/*
 Theme Name: Line & Loom
 Theme URI:
 Author: Line & Loom
 Description: Custom FSE theme for Line & Loom.
 Version: 1.2.0
 Requires at least: 6.4
 Tested up to: 6.7
 Requires PHP: 8.0
 License: GNU General Public License v2 or later
 Text Domain: line-and-loom
*/

/* Prevent horizontal overflow from cramped intermediate viewport widths */
html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

#contact {
  scroll-margin-top: 80px;
}

/* WPE Commerce cart pane — ensure it doesn't bleed into layout when closed */
.ecom-pane:not(.ecom-pane-is-open) .ecom-pane-inner {
  visibility: hidden;
  pointer-events: none;
}

/* ---- FLOATING CART ---- */
.ecom-cart-icon-fixed,
.ecom-cart-icon-fixed:hover,
.ecom-cart-icon-fixed:focus {
  top: auto !important;
  bottom: var(--wp--preset--spacing--m) !important;
  right: var(--wp--preset--spacing--m) !important;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.ecom-cart-icon-fixed.lnl-cart--on-dark,
.ecom-cart-icon-fixed.lnl-cart--on-dark:hover,
.ecom-cart-icon-fixed.lnl-cart--on-dark:focus {
  background-color: var(--wp--preset--color--linen) !important;
  color: var(--wp--preset--color--ink) !important;
  border-color: var(--wp--preset--color--linen) !important;
}

.ecom-cart-icon-fixed.lnl-cart--on-dark svg,
.ecom-cart-icon-fixed.lnl-cart--on-dark path {
  fill: var(--wp--preset--color--ink) !important;
  stroke: var(--wp--preset--color--ink) !important;
}

@media (max-width: 900px) {
  .ecom-cart-icon-fixed,
  .ecom-cart-icon-fixed:hover,
  .ecom-cart-icon-fixed:focus {
    bottom: var(--wp--preset--spacing--s) !important;
    right: var(--wp--preset--spacing--s) !important;
  }
}

/* ---- BLOCK GAP RESET ---- */
.wp-site-blocks > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

.wp-block-html {
  display: block;
  margin: 0;
}

/* Consistent breathing room between header and content on interior pages.
   The homepage hero is full-bleed and butts up against the header intentionally. */
body:not(.home) .wp-site-blocks > header + * {
  margin-top: var(--wp--preset--spacing--m);
}

/* ---- HEADING LINKS ---- */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-transform: inherit;
}

/* ---- WPE COMMERCE ---- */
:root {
  /* brand fonts cascade through plugin's typography token system */
  --typography-font-online-store-display: "berthold-baskerville-pro", Baskerville, Georgia, serif;
  --typography-font-online-store-heading: "berthold-baskerville-pro", Baskerville, Georgia, serif;
  --typography-font-online-store-body:    "avenir-lt-pro", Avenir, "Century Gothic", system-ui, sans-serif;
  --typography-weight-bold:     400;
  --typography-weight-semibold: 400;
  --typography-weight-medium:   500;

  /* sharp corners — no rounding in the storefront */
  --radius-radius-sm: 0px;
  --radius-radius-md: 0px;
  --radius-radius-lg: 0px;
  --radius-radius-xl: 0px;
  --radius-radius-2xl: 0px;

  /* primary button → Ink on Linen */
  --ecom-ui-primary-button-color-background: #1C1814;
  --ecom-ui-primary-button-color-text: #EDE6DA;
  --ecom-ui-primary-button-hover-color-background: #6B5E55;
  --ecom-ui-primary-button-hover-color-text: #EDE6DA;

  /* image placeholder matches page background — invisible during load */
  --colors-background-bg-primary: #FAF8F4;
  --colors-background-bg-primary-hover: #EDE6DA;
}

.product-card__content {
  gap: 4px;
  padding-block-end: 0;
}

.product-card__content hgroup {
  gap: 4px;
  margin-bottom: 0;
}

/* card hover buy-button overlay → Paper instead of white */
.product-card__images-buy-button .ecom-product-buy-button__add-to-cart-inner {
  background-color: #FAF8F4 !important;
}

/* ============================================================
   SHARED UTILITIES
============================================================ */

/* Link treatment system: Amber on Ink surfaces, Ink underline on light */
.lnl-tc a,
.lnl-brand-strip a,
.has-ink-background-color a {
  color: var(--wp--preset--color--amber);
}

.lnl-eyebrow {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--wp--preset--color--lichen);
  margin: 0 0 8px;
}

.lnl-section-header {
  margin-bottom: 8px;
}

.lnl-section-header h4 {
  margin: 0;
}

/* ============================================================
   HERO
============================================================ */

.lnl-hero .wp-block-cover__inner-container {
  width: 100%;
  padding-bottom: var(--wp--preset--spacing--xl);
}

.lnl-hero__content {
  padding-top: var(--wp--preset--spacing--2xl);
}

.lnl-hero__content h4 {
  margin: 0 0 16px;
}

.lnl-hero__content h1 {
  margin: 0 0 20px;
  line-height: 1;
}

.lnl-hero__content p {
  max-width: 480px;
}

/* ============================================================
   EDITORIAL VOICE
============================================================ */

.lnl-voice {
  padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--l);
  text-align: center;
  background: var(--wp--preset--color--linen);
}

.lnl-voice p {
  font-family: var(--wp--preset--font-family--serif);
  font-size: clamp(1.4rem, 2.8vw, 2.4rem);
  font-style: italic;
  color: var(--wp--preset--color--ink);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.35;
}

/* ============================================================
   SHOP THE ROOM
============================================================ */

.lnl-shop-the-room {
  background: var(--wp--preset--color--paper);
  padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--l);
}

.str-header {
  text-align: center;
  margin-bottom: var(--wp--preset--spacing--m);
}

.str-header .str-eyebrow {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--wp--preset--color--lichen);
  margin: 0 0 8px;
}

.str-heading {
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--hero);
  color: var(--wp--preset--color--ink);
  margin: 0;
  line-height: 1.1;
}

.str-scene {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  background: #C4B8A7;
}

.str-image {
  width: 100%;
  display: block;
  height: auto;
}

.str-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #C4B8A7;
}

/* pins */
.str-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.str-pin__dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--wp--preset--color--paper);
  border: 1.5px solid var(--wp--preset--color--ink);
  color: var(--wp--preset--color--ink);
  font-family: var(--wp--preset--font-family--sans);
  font-size: 17px;
  font-weight: 300;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
  box-shadow: 0 1px 6px rgba(28,24,20,0.18);
}

.str-pin--active .str-pin__dot {
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--paper);
}

.str-pin__card {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  min-width: 200px;
  background: var(--wp--preset--color--paper);
  border: 1px solid rgba(107, 94, 85, 0.18);
  padding: 16px;
  z-index: 3;
  box-shadow: 0 4px 24px rgba(28,24,20,0.10);
}

.str-pin__card--flip {
  left: auto;
  right: 0;
}

.str-pin__name {
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--body-lg);
  color: var(--wp--preset--color--ink);
  margin: 0 0 4px;
  line-height: 1.2;
}

.str-pin__price {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body-sm);
  color: var(--wp--preset--color--lichen);
  margin: 0 0 12px;
  letter-spacing: 0.5px;
}

.str-pin__link {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--wp--preset--color--ink);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  transition: background-size 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.str-pin__link:hover {
  background-size: 100% 1px;
}

/* ============================================================
   CATEGORY GRID
============================================================ */

.lnl-categories {
  padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--l);
  background: var(--wp--preset--color--linen);
}

.lnl-categories__header {
  margin-bottom: var(--wp--preset--spacing--m);
}

.lnl-categories__header h2 {
  margin: 0;
  font-size: var(--wp--preset--font-size--hero);
}

.lnl-categories__grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 280px 280px 180px;
  gap: 6px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Outdoor Living — tall left tile */
.lnl-cat-tile:nth-child(1) {
  grid-row: 1 / 3;
}

/* Accessories — full-width bottom strip */
.lnl-cat-tile:nth-child(4) {
  grid-column: 1 / 3;
}

.lnl-cat-tile {
  position: relative;
  overflow: hidden;
  display: block;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.lnl-cat-tile__bg {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.lnl-cat-tile:hover .lnl-cat-tile__bg {
  transform: scale(1.05);
}

.lnl-cat-tile__label {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 1;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.lnl-cat-tile:hover .lnl-cat-tile__label {
  transform: translateY(-6px);
}

.lnl-cat-tile__label h3 {
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--subheadline);
  color: var(--wp--preset--color--paper);
  margin: 0 0 4px;
  line-height: 1.1;
  text-shadow: 0 1px 8px rgba(28,24,20,0.25);
}

.lnl-cat-tile__label p {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body-sm);
  color: rgba(250,248,244,0.78);
  margin: 0;
  letter-spacing: 0.5px;
}

.lnl-categories__grid:has(.lnl-cat-tile:hover) .lnl-cat-tile:not(:hover) {
  opacity: 0.72;
}

/* ============================================================
   NEW IN
============================================================ */

.lnl-new-in {
  background: var(--wp--preset--color--linen);
}

/* hide sort/filter toolbar if it's present in home page context */
.lnl-new-in .ecom-filters-toolbar {
  display: none;
}

/* ============================================================
   JOURNAL
============================================================ */

.lnl-journal {
  background: var(--wp--preset--color--paper);
  position: relative;
}

.lnl-journal__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.lnl-journal h4 {
  margin: 0;
}

.lnl-journal__headline {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 8px;
}

.lnl-journal__headline h2 {
  margin: 0;
}

.lnl-journal__link {
  color: var(--wp--preset--color--lichen);
  font-size: var(--wp--preset--font-size--body-sm);
  font-family: var(--wp--preset--font-family--sans);
  font-weight: 300;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  transition: background-size 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.lnl-journal__link:hover {
  background-size: 100% 1px;
}

/* Decorative hairline between header and grid */
.lnl-journal__rule {
  width: 100%;
  height: 1px;
  background: var(--wp--custom--lichen--rule);
  margin: var(--wp--preset--spacing--l) 0;
}

/* Animated draw-in — default state set by motion.js */
.lnl-journal__rule.lnl-rule-reveal {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}

.lnl-journal__rule.lnl-rule-reveal--in {
  transform: scaleX(1);
}

/* Editorial asymmetric grid */
.lnl-journal-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  grid-template-rows: auto auto;
  gap: 20px 32px;
  counter-reset: journal;
}

/* Featured card — left column, spans both rows */
.lnl-journal-grid > li:first-child {
  grid-row: 1 / 3;
}

.lnl-journal-grid > li {
  display: flex;
  flex-direction: column;
  gap: 14px;
  counter-increment: journal;
  position: relative;
  transition: opacity 0.4s ease;
}

/* Ordinal counter — faint editorial numbering */
.lnl-journal-grid > li::after {
  content: counter(journal, decimal-leading-zero);
  font-family: var(--wp--preset--font-family--serif);
  font-size: 11px;
  font-weight: 400;
  font-style: italic;
  color: var(--wp--preset--color--lichen);
  opacity: 0.35;
  letter-spacing: 1px;
  padding-top: 4px;
}

/* card image */
.lnl-journal-card__image {
  display: block;
  overflow: hidden;
}

.lnl-journal-card__image img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}

/* Featured card — image fills the available grid height */
.lnl-journal-grid > li:first-child .lnl-journal-card__image {
  flex: 1;
  min-height: 0;
}

.lnl-journal-grid > li:first-child .lnl-journal-card__image img {
  aspect-ratio: auto;
  height: 100%;
}

/* category eyebrow */
.lnl-post-eyebrow {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--wp--preset--color--lichen);
  margin: 0;
}

.lnl-post-eyebrow a {
  color: inherit;
  text-decoration: none;
}

/* post title */
.lnl-journal-card__title {
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--subheadline);
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
}

/* Featured card title — larger for hierarchy */
.lnl-journal-grid > li:first-child .lnl-journal-card__title {
  font-size: clamp(22px, 2.4vw, 30px);
}

.lnl-journal-card__title a {
  color: var(--wp--preset--color--ink);
  text-decoration: none;
  background-image: linear-gradient(var(--wp--preset--color--lichen), var(--wp--preset--color--lichen));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  transition: background-size 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* excerpt */
.lnl-journal-card__excerpt {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body-sm);
  color: var(--wp--preset--color--lichen);
  line-height: 1.6;
  margin: 0;
}

/* ============================================================
   BRAND STRIP
   Two-column layout: boutique image (left) + stacked content
   (right) with lichen rules between sections. The image spans
   the full height and its bookmark-V bottom edge straddles a
   full-width rule at the base.
============================================================ */

.lnl-brand-strip {
  background: var(--wp--preset--color--ink);
}

.lnl-brand-strip .lnl-eyebrow {
  color: rgba(250, 248, 244, 0.45);
  font-size: var(--wp--preset--font-size--label);
}

/* grid: image left, content right, end-rule row for the V */
.lnl-brand-strip__inner {
  display: grid;
  grid-template-columns: 55fr 45fr;
  grid-template-rows: 1fr 72px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--wp--preset--spacing--l);
}

/* ── image ─────────────────────────────────────────────────── */

.lnl-brand-strip__image {
  grid-column: 1;
  grid-row: 1 / 3;
  overflow: hidden;
  position: relative;
  z-index: 1;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 48px), 0 100%);
}

.lnl-brand-strip__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ── right-column content stack ────────────────────────────── */

.lnl-brand-strip__content {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
}

/* about text */
.lnl-brand-strip__text {
  padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--l) var(--wp--preset--spacing--l);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.lnl-brand-strip__text h2 {
  font-size: var(--wp--preset--font-size--hero);
  color: var(--wp--preset--color--linen);
  margin: 0;
}

.lnl-brand-strip__text p {
  font-size: var(--wp--preset--font-size--body-lg);
  color: rgba(237, 230, 218, 0.6);
  line-height: 1.6;
  max-width: 480px;
  margin: 0;
}

/* lichen rule between about text and mark+info */
.lnl-brand-strip__rule {
  height: 1px;
  background: var(--wp--custom--lichen--rule);
  margin: 0 var(--wp--preset--spacing--l);
}

/* logo mark */
.lnl-brand-strip__mark {
  color: rgba(237, 230, 218, 0.35);
  padding: var(--wp--preset--spacing--l) var(--wp--preset--spacing--l) var(--wp--preset--spacing--s);
}

/* location / hours / contact */
.lnl-brand-strip__info {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 var(--wp--preset--spacing--l) var(--wp--preset--spacing--l);
}

.lnl-brand-strip__info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lnl-brand-strip__info-label {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(237, 230, 218, 0.35);
}

.lnl-brand-strip__info-item span:last-child {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body-sm);
  font-weight: 300;
  color: rgba(237, 230, 218, 0.7);
  line-height: 1.6;
}

/* ── end rule (right column only — bookmark hangs over ink) ── */

.lnl-brand-strip__end-rule {
  grid-column: 2;
  grid-row: 2;
  border-top: 1px solid var(--wp--custom--lichen--rule);
}

/* ============================================================
   FOOTER
============================================================ */

.lnl-footer {
  background: var(--wp--preset--color--ink);
}

.lnl-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--l);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wp--preset--spacing--l);
}

.lnl-footer__mark {
  color: rgba(237, 230, 218, 0.35);
}

.lnl-footer__nav {
  display: flex;
  gap: var(--wp--preset--spacing--l);
  flex-wrap: wrap;
  justify-content: center;
}

.lnl-footer__nav a {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body-sm);
  font-weight: 300;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--wp--preset--color--linen);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  transition: background-size 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.2s ease;
}

.lnl-footer__nav a:hover {
  background-size: 100% 1px;
}

.lnl-footer__nav:has(a:hover) a:not(:hover) {
  opacity: 0.45;
}

.lnl-footer__rule {
  width: 100%;
  height: 1px;
  background: var(--wp--custom--lichen--rule);
}

.lnl-footer__bottom {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.lnl-footer__copy {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body-sm);
  font-weight: 300;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(237, 230, 218, 0.4);
  margin: 0;
}

.lnl-footer__legal {
  display: flex;
  gap: var(--wp--preset--spacing--m);
  justify-self: end;
}

.lnl-footer__legal a {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 300;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(237, 230, 218, 0.4);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.lnl-footer__legal a:hover {
  opacity: 0.7;
}

@media (max-width: 640px) {
  .lnl-footer__inner {
    padding: var(--wp--preset--spacing--l) var(--wp--preset--spacing--s);
  }
  .lnl-footer__nav {
    gap: var(--wp--preset--spacing--m);
  }
  .lnl-footer__bottom {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: var(--wp--preset--spacing--s);
    text-align: center;
  }
  .lnl-footer__legal {
    justify-self: center;
  }
}

/* Rule never needed — footer reads clean without it */
.lnl-footer__rule {
  display: none;
}

/* Front page: mark lives in brand strip, hide footer dupe */
.home .lnl-footer__mark {
  display: none;
}

/* ============================================================
   JOURNAL PAGE
============================================================ */

.lnl-journal-page {
  margin-top: 0 !important;
  border-top: 1px solid var(--wp--custom--lichen--rule) !important;
  padding-top: var(--wp--preset--spacing--xl) !important;
}

.lnl-journal-page__header h4 {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body-sm);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--wp--preset--color--lichen);
  margin: 0 0 12px;
}

.lnl-journal-page__header h1 {
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.1;
  margin: 0;
}

.lnl-journal-page__rule {
  margin: var(--wp--preset--spacing--l) 0;
}

/* Grid: 3-col with featured first post spanning left two columns */
.lnl-journal-page__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: 40px 24px;
  counter-reset: journal;
}

/* ── Card ──────────────────────────────────────────────────── */

.lnl-journal-page__card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  counter-increment: journal;
  position: relative;
}

/* Ordinal counter — faint editorial numbering */
.lnl-journal-page__card::after {
  content: counter(journal, decimal-leading-zero);
  font-family: var(--wp--preset--font-family--serif);
  font-size: 11px;
  font-weight: 400;
  font-style: italic;
  color: var(--wp--preset--color--lichen);
  opacity: 0.35;
  letter-spacing: 1px;
  padding-top: 4px;
}

.lnl-journal-page__card .wp-block-post-featured-image {
  overflow: hidden;
  margin: 0;
}


.lnl-journal-page__card .wp-block-post-featured-image img {
  width: 100%;
  display: block;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.lnl-journal-page__card:hover .wp-block-post-featured-image img {
  transform: scale(1.04);
}

.lnl-journal-page__card .lnl-post-eyebrow {
  margin: 0;
}

.lnl-journal-page__card .lnl-post-eyebrow a {
  color: inherit;
  text-decoration: none;
}

.lnl-journal-page__card .lnl-journal-card__title {
  margin: 0;
}

.lnl-journal-page__card .lnl-journal-card__title a {
  color: var(--wp--preset--color--ink);
  text-decoration: none;
  background-image: linear-gradient(var(--wp--preset--color--lichen), var(--wp--preset--color--lichen));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  transition: background-size 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.lnl-journal-page__card:hover .lnl-journal-card__title a {
  background-size: 100% 1px;
}

.lnl-journal-page__card .wp-block-post-excerpt {
  margin: 0;
}

.lnl-journal-page__card .wp-block-post-excerpt__excerpt {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body-sm);
  color: var(--wp--preset--color--lichen);
  line-height: 1.6;
  margin: 0;
}

.lnl-journal-page__card .wp-block-post-excerpt__more-link {
  display: none;
}

/* ── Featured first card — spans left two columns ──────────── */

.lnl-journal-page__grid > li:first-child {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

.lnl-journal-page__grid > li:first-child .lnl-journal-card__title {
  font-size: clamp(22px, 2.4vw, 30px);
}

.lnl-journal-page__grid > li:first-child .wp-block-post-featured-image {
  flex: 1;
  min-height: 0;
}

.lnl-journal-page__grid > li:first-child .wp-block-post-featured-image img {
  height: 100%;
  object-fit: cover;
}

/* ── Hover interactions ────────────────────────────────────── */

.lnl-journal-page__grid > li {
  transition: opacity 0.4s ease;
}

.lnl-journal-page__grid:has(> li:hover) > li:not(:hover) {
  opacity: 0.6;
}

/* ── Pagination ────────────────────────────────────────────── */

.lnl-journal-page__pagination {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body-sm);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 300;
  gap: var(--wp--preset--spacing--m) !important;
}

.lnl-journal-page__pagination a,
.lnl-journal-page__pagination span {
  color: var(--wp--preset--color--ink);
  text-decoration: none;
  transition: color 0.2s ease;
}

.lnl-journal-page__pagination a:hover {
  color: var(--wp--preset--color--amber);
}

.lnl-journal-page__pagination .wp-block-query-pagination-numbers {
  display: flex;
  gap: 16px;
}

.lnl-journal-page__pagination .wp-block-query-pagination-numbers .current {
  color: var(--wp--preset--color--amber);
}

.lnl-journal-page__pagination .wp-block-query-pagination-previous,
.lnl-journal-page__pagination .wp-block-query-pagination-next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(28, 24, 20, 0.2);
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.lnl-journal-page__pagination .wp-block-query-pagination-previous:hover,
.lnl-journal-page__pagination .wp-block-query-pagination-next:hover {
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--paper);
  border-color: var(--wp--preset--color--ink);
}

/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 900px) {
  .lnl-journal-page__grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px 20px;
  }

  .lnl-journal-page__grid > li:first-child {
    grid-column: 1 / 3;
    grid-row: auto;
  }

  .lnl-journal-page__grid > li:first-child .wp-block-post-featured-image {
    flex: 0 0 auto;
  }

  .lnl-journal-page__grid > li:first-child .wp-block-post-featured-image img {
    height: auto;
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 640px) {
  .lnl-journal-page__grid {
    grid-template-columns: 1fr;
  }

  .lnl-journal-page__grid > li:first-child {
    grid-column: auto;
  }

  .lnl-journal-page {
    padding-left: var(--wp--preset--spacing--s) !important;
    padding-right: var(--wp--preset--spacing--s) !important;
  }
}

@media (max-width: 900px) {
  .lnl-categories__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 220px 220px 160px;
  }

  .lnl-cat-tile:nth-child(1) {
    grid-column: 1 / 3;
    grid-row: auto;
  }

  .lnl-cat-tile:nth-child(4) {
    grid-column: 1 / 3;
  }

  .lnl-journal-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 20px;
  }

  .lnl-journal-grid > li:first-child {
    grid-column: 1 / 3;
    grid-row: auto;
  }

  .lnl-journal-grid > li:first-child .lnl-journal-card__image {
    flex: 0 0 auto;
  }

  .lnl-journal-grid > li:first-child .lnl-journal-card__image img {
    aspect-ratio: 16 / 10;
    height: auto;
  }

  .lnl-testimonials__inner {
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--m);
  }

  .lnl-brand-strip__inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    padding: 0;
  }

  .lnl-brand-strip__image {
    grid-row: auto;
    grid-column: 1;
    min-height: 280px;
    clip-path: none;
  }

  .lnl-brand-strip__content {
    grid-column: 1;
  }

  .lnl-brand-strip__end-rule {
    display: none;
  }
}

@media (max-width: 640px) {
  .lnl-categories__grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .lnl-cat-tile:nth-child(1),
  .lnl-cat-tile:nth-child(4) {
    grid-column: auto;
    grid-row: auto;
  }

  .lnl-cat-tile {
    min-height: 200px;
  }

  .lnl-cat-tile__bg {
    position: relative;
    height: 200px;
  }

  .lnl-journal-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .lnl-journal-grid > li:first-child {
    grid-column: auto;
    grid-row: auto;
  }

  .lnl-journal-grid > li:first-child .lnl-journal-card__image {
    flex: 0 0 auto;
  }

  .lnl-journal-grid > li:first-child .lnl-journal-card__image img {
    aspect-ratio: 16 / 10;
    height: auto;
  }
}

/* ============================================================
   PRODUCT CAROUSEL
============================================================ */

.lnl-new-in-carousel {
  padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--l);
  background: var(--wp--preset--color--linen);
}

.pc-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: var(--wp--preset--spacing--l);
}

.pc-header__left {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pc-eyebrow {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--wp--preset--color--lichen);
  margin: 0;
}

.pc-title {
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--hero);
  color: var(--wp--preset--color--ink);
  margin: 0;
  line-height: 1.1;
}

.pc-header__controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pc-arrow {
  background: none;
  border: 1px solid rgba(28, 24, 20, 0.2);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--wp--preset--font-family--sans);
  font-size: 15px;
  color: var(--wp--preset--color--ink);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.pc-arrow:hover:not(:disabled) {
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--paper);
  border-color: var(--wp--preset--color--ink);
}

.pc-arrow:disabled {
  opacity: 0.25;
  cursor: default;
}

.pc-view-all {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body-sm);
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--wp--preset--color--ink);
  text-decoration: none;
  margin-left: 12px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  transition: background-size 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.pc-view-all:hover {
  background-size: 100% 1px;
}

.pc-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* track */

.pc-track-wrap {
  overflow: hidden;
}

.pc-track {
  display: flex;
  gap: 20px;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.pc-card {
  flex: 0 0 calc(25% - 15px); /* 4 cols: (100% - 3×20px) / 4 */
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pc-card__image-wrap {
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--wp--preset--color--paper);
}

.pc-card__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.pc-card__image-placeholder {
  width: 100%;
  height: 100%;
  background: #C4B8A7;
}

.pc-card:hover .pc-card__image-wrap img {
  transform: scale(1.04);
}

.pc-card__info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.pc-card__name {
  flex: 1;
}

.pc-card__name {
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--body-lg);
  color: var(--wp--preset--color--ink);
  margin: 0;
  line-height: 1.25;
}


.pc-card__price {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body-sm);
  color: var(--wp--preset--color--lichen);
  margin: 0;
  letter-spacing: 0.5px;
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.pc-card__price::after {
  content: '\2192';
  font-family: var(--wp--preset--font-family--sans);
  font-size: 11px;
  position: absolute;
  left: calc(100% + 4px);
  top: 50%;
  transform: translateY(-50%) translateX(4px);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.pc-card:hover .pc-card__price {
  transform: translateX(-14px);
}

.pc-card:hover .pc-card__price::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

@media (max-width: 900px) {
  .pc-card {
    flex: 0 0 calc(50% - 10px); /* 2 cols */
  }
}

@media (max-width: 600px) {
  .pc-card {
    flex: 0 0 80%; /* peek effect — shows start of next card */
  }
}

/* ============================================================
   TESTIMONIALS CAROUSEL
============================================================ */

.lnl-tc {
  background: var(--wp--preset--color--ink);
  padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--l);
  text-align: center;
}

.lnl-tc__inner {
  max-width: 680px;
  margin: 0 auto;
}

.lnl-tc__track {
  display: grid;
  grid-template-areas: 'slide';
  min-height: 180px;
}

.lnl-tc__slide {
  grid-area: slide;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity  0.75s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  visibility: hidden;
}

.lnl-tc__slide--active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
}

.lnl-tc__stars {
  font-size: 13px;
  letter-spacing: 4px;
  color: var(--wp--preset--color--amber);
}

.lnl-tc__quote {
  font-family: var(--wp--preset--font-family--serif);
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  font-style: italic;
  color: var(--wp--preset--color--linen);
  line-height: 1.45;
  max-width: 60ch;
  margin: 0;
}

.lnl-tc__cite {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body-sm);
  font-style: normal;
  color: rgba(237, 230, 218, 0.55);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.lnl-tc__nav {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  margin-top: 36px;
}

.lnl-tc__dot {
  width: 18px;
  height: 2px;
  background: rgba(237, 230, 218, 0.18);
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s ease;
}

/* extend hit area without affecting layout */
.lnl-tc__dot::before {
  content: '';
  position: absolute;
  inset: -10px 0;
}

.lnl-tc__dot--active {
  width: 32px;
  background: rgba(237, 230, 218, 0.18);
}

.lnl-tc__dot--active::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--wp--preset--color--linen);
  transform-origin: left;
  animation: lnl-dot-progress 6s linear forwards;
}

@keyframes lnl-dot-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.lnl-tc:hover .lnl-tc__dot--active::after,
.lnl-tc:focus-within .lnl-tc__dot--active::after {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .lnl-tc__slide {
    transition: none;
  }
  .lnl-tc__dot--active::after {
    animation: none;
    transform: scaleX(1);
  }
}

/* ============================================================
   MOTION
   All classes below are added by motion.js — never present
   when JS is absent or prefers-reduced-motion is set.
   Default (no-JS) state is always fully visible.
============================================================ */

/* ── Hero entrance ───────────────────────────────────────── */

.lnl-entrance {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity  0.75s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms),
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms);
}

.lnl-entrance--in {
  opacity: 1;
  transform: translateY(0);
}

/* ── Scroll reveals ──────────────────────────────────────── */

.lnl-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity  0.65s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms),
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms);
}

.lnl-reveal--in {
  opacity: 1;
  transform: translateY(0);
}

/* ── Testimonial line draw-in ────────────────────────────── */

.lnl-testimonial.lnl-reveal::before {
  transform: scaleX(0);
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms);
}

.lnl-testimonial.lnl-reveal--in::before {
  transform: scaleX(1);
}

/* ── Pin pulse — idle state until first click ────────────── */

@keyframes lnl-pin-pulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(28, 24, 20, 0.22); }
  55%       { box-shadow: 0 0 0 10px rgba(28, 24, 20, 0);   }
}

.str-pin__dot--pulse {
  animation: lnl-pin-pulse 2.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ── Journal — image zoom + title sweep + sibling dim ─────── */

.lnl-journal-card__image img {
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.lnl-journal-grid > li:hover .lnl-journal-card__image img {
  transform: scale(1.04);
}

.lnl-journal-grid > li:hover .lnl-journal-card__title a {
  background-size: 100% 1px;
}

/* Sibling dim — hovered card stays vivid, others recede */
.lnl-journal-grid:has(> li:hover) > li:not(:hover) {
  opacity: 0.6;
}

/* ── Section header — "View all" / "Read more" links ────── */

.lnl-section-header a {
  color: var(--wp--preset--color--lichen);
  font-size: var(--wp--preset--font-size--body-sm);
  font-family: var(--wp--preset--font-family--sans);
  font-weight: 300;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  transition: background-size 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.lnl-section-header a:hover {
  background-size: 100% 1px;
}

/* ── Reduced motion safety net ───────────────────────────── */
/* motion.js returns early when this matches, so classes are
   never added — but guard here too for belt-and-suspenders   */

@media (prefers-reduced-motion: reduce) {
  .lnl-entrance,
  .lnl-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .lnl-testimonial.lnl-reveal::before {
    transform: scaleX(1) !important;
    transition: none !important;
  }

  .str-pin__dot--pulse {
    animation: none !important;
  }

  .lnl-rule-reveal {
    transform: scaleX(1) !important;
    transition: none !important;
  }
}

/* ============================================================
   COLLECTION HEADER — archive/taxonomy pages
   Left-aligned editorial intro, matching the journal and
   category section headers. Never centered — that reads as
   generic e-commerce, not editorial curation.
============================================================ */

.lnl-collection-header {
  max-width: 1200px;
  margin: 0 auto;
}

.lnl-collection-header h4 {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body-sm);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--wp--preset--color--lichen);
  margin: 0 0 12px;
}

.lnl-collection-header__title {
  font-size: clamp(32px, 5vw, 48px);
  margin: 0 0 16px;
  line-height: 1.1;
}

.lnl-collection-header__desc {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body-lg);
  font-weight: 300;
  color: var(--wp--preset--color--lichen);
  line-height: 1.6;
  margin: 0;
  max-width: 480px;
}

/* ============================================================
   SHOP PAGE HEADER
   Two-part layout: editorial intro (left-aligned) then
   category nav as a horizontal table-of-contents.
============================================================ */

.lnl-shop-header {
  max-width: 1200px;
  margin: 0 auto;
}

.lnl-shop-header__inner {
  margin-bottom: 0;
}

.lnl-shop-header__title {
  font-size: clamp(32px, 5vw, 48px);
  margin: 0 0 16px;
  line-height: 1.1;
}

.lnl-shop-header__desc {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body-lg);
  font-weight: 300;
  color: var(--wp--preset--color--lichen);
  line-height: 1.6;
  margin: 0;
  max-width: 480px;
}

.lnl-shop-header__rule {
  width: 100%;
  max-width: 1200px;
  margin: var(--wp--preset--spacing--m) auto;
  height: 1px;
  background: var(--wp--custom--lichen--rule);
}

.lnl-shop-nav {
  display: flex;
  gap: var(--wp--preset--spacing--xl);
  flex-wrap: wrap;
  padding-bottom: 0;
}

.lnl-shop-nav__link {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body-sm);
  font-weight: 300;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--wp--preset--color--ink);
  text-decoration: none;
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.2s ease;
}

.lnl-shop-nav__link:hover {
  background-size: 100% 1px;
}

.lnl-shop-nav:has(.lnl-shop-nav__link:hover) .lnl-shop-nav__link:not(:hover) {
  opacity: 0.45;
}

/* ============================================================
   ARCHIVE / SHOP — shared layout
   Side padding matches the header's fluid clamp so content
   edges align with the logo and cart icon at every viewport.
============================================================ */

.lnl-archive,
.lnl-shop {
  margin-top: 0 !important;
  padding-top: var(--wp--preset--spacing--xl) !important;
  padding-bottom: var(--wp--preset--spacing--xl) !important;
  padding-left: clamp(var(--wp--preset--spacing--s), 4vw, var(--wp--preset--spacing--l)) !important;
  padding-right: clamp(var(--wp--preset--spacing--s), 4vw, var(--wp--preset--spacing--l)) !important;
}

.lnl-archive__rule {
  width: 100%;
  max-width: 1200px;
  margin: var(--wp--preset--spacing--m) auto;
  height: 1px;
  background: var(--wp--custom--lichen--rule);
}

/* ── Archive entrance — CSS-only reveal on page load ──────── */

@keyframes lnl-archive-enter {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.lnl-collection-header,
.lnl-shop-header__inner {
  animation: lnl-archive-enter 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.lnl-shop-header__rule {
  transform: scaleX(0);
  transform-origin: left;
  animation: lnl-rule-draw 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}

.lnl-shop-nav {
  animation: lnl-archive-enter 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

.lnl-archive__rule {
  transform: scaleX(0);
  transform-origin: left;
  animation: lnl-rule-draw 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}

@keyframes lnl-rule-draw {
  to { transform: scaleX(1); }
}

.lnl-archive .wp-block-wpe-mustang-products,
.lnl-shop .wp-block-wpe-mustang-products {
  animation: lnl-archive-enter 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

@media (prefers-reduced-motion: reduce) {
  .lnl-collection-header,
  .lnl-shop-header__inner,
  .lnl-shop-header__rule,
  .lnl-shop-nav,
  .lnl-archive__rule,
  .lnl-archive .wp-block-wpe-mustang-products,
  .lnl-shop .wp-block-wpe-mustang-products {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   WPE COMMERCE — brand overrides
   The plugin renders a React "storefront" inside the Mustang
   products wrapper. We flatten its layout system, suppress
   filters (sort-only), and restyle everything in L&L language.
============================================================ */

/* ── Root reset: strip plugin wrapper chrome ─────────────── */

.lnl-archive .wp-block-wpe-mustang-products,
.lnl-shop .wp-block-wpe-mustang-products {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  color: var(--wp--preset--color--ink);
  font-family: var(--wp--preset--font-family--sans);
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Dropzone layout: #lnl-products-* as direct siblings (live React output) ──
   The storefront mounts count, sort, and grid as three block-level divs.
   CSS Grid places count (col 1) and sort (col 2) on one row; grid full width. */

.lnl-archive .wp-block-wpe-mustang-products:has(> #lnl-products-count),
.lnl-shop .wp-block-wpe-mustang-products:has(> #lnl-products-count) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: var(--wp--preset--spacing--m);
  row-gap: var(--wp--preset--spacing--s);
}

.lnl-archive .wp-block-wpe-mustang-products:has(> #lnl-products-count) > #lnl-products-count,
.lnl-shop .wp-block-wpe-mustang-products:has(> #lnl-products-count) > #lnl-products-count {
  grid-column: 1;
  justify-self: start;
  width: auto;
  max-width: 100%;
}

.lnl-archive .wp-block-wpe-mustang-products:has(> #lnl-products-count) > #lnl-products-sort,
.lnl-shop .wp-block-wpe-mustang-products:has(> #lnl-products-count) > #lnl-products-sort {
  grid-column: 2;
  justify-self: end;
  width: auto;
  max-width: 100%;
}

.lnl-archive .wp-block-wpe-mustang-products:has(> #lnl-products-count) > #lnl-products-grid,
.lnl-shop .wp-block-wpe-mustang-products:has(> #lnl-products-count) > #lnl-products-grid {
  grid-column: 1 / -1;
}

/* ── Block-editor columns: CSS Grid structure ──────────────────
   Archive layout:
     col 1 (180px) │ col 2 (1fr, gap 40px)
     ──────────────┼──────────────────────────
     sidebar       │ controls (count | sort)   row 1
     sidebar       │ product grid              row 2

   Content row uses display:contents so sidebar + grid become
   direct grid children. Controls row sits in col 2 / row 1.
   Shop has no sidebar — controls + grid span full width. */

/* Archive: 2-col CSS Grid on the mustang block */
.lnl-archive .wp-block-wpe-mustang-products {
  display: grid !important;
  grid-template-columns: 180px 1fr;
  column-gap: 40px;
}

/* Controls row → right column, row 1 */
.lnl-archive .wp-block-wpe-mustang-products > .wp-block-columns:first-child {
  grid-column: 2;
  grid-row: 1;
  display: flex !important;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 var(--wp--preset--spacing--s) 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}

/* Shop controls row: full width flex bar */
.lnl-shop .wp-block-wpe-mustang-products > .wp-block-columns:first-child {
  display: flex !important;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 var(--wp--preset--spacing--s) 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}

/* Collapse count + sort columns to content width so space-between actually separates them */
.lnl-archive .wp-block-wpe-mustang-products > .wp-block-columns:first-child > .wp-block-column:has([id^="products-count-"]),
.lnl-archive .wp-block-wpe-mustang-products > .wp-block-columns:first-child > .wp-block-column:has([id^="products-sort-control-"]),
.lnl-shop .wp-block-wpe-mustang-products > .wp-block-columns:first-child > .wp-block-column:has([id^="products-count-"]),
.lnl-shop .wp-block-wpe-mustang-products > .wp-block-columns:first-child > .wp-block-column:has([id^="products-sort-control-"]) {
  flex: 0 0 auto !important;
}

/* Hide filter-selections and filter-control column wrappers in controls row */
.lnl-archive .wp-block-wpe-mustang-products > .wp-block-columns:first-child > .wp-block-column:has([id^="products-filter-selections-"]),
.lnl-archive .wp-block-wpe-mustang-products > .wp-block-columns:first-child > .wp-block-column:has([id^="products-filter-control-"]),
.lnl-shop .wp-block-wpe-mustang-products > .wp-block-columns:first-child > .wp-block-column:has([id^="products-filter-selections-"]),
.lnl-shop .wp-block-wpe-mustang-products > .wp-block-columns:first-child > .wp-block-column:has([id^="products-filter-control-"]) {
  display: none !important;
}

/* Content row → display:contents promotes children into the CSS Grid */
.lnl-archive .wp-block-wpe-mustang-products > .wp-block-columns:last-child,
.lnl-shop .wp-block-wpe-mustang-products > .wp-block-columns:last-child {
  display: contents !important;
}

/* Sidebar → left column, spans rows 1 and 2 */
.lnl-archive .wp-block-wpe-mustang-products > .wp-block-columns:last-child > .wp-block-column:first-child {
  grid-column: 1;
  grid-row: 1 / span 2;
  margin: 0 !important;
  padding: 0 !important;
}

/* Product grid → right column, row 2 */
.lnl-archive .wp-block-wpe-mustang-products > .wp-block-columns:last-child > .wp-block-column:last-child {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
}

/* Shop: hide filter column (no sidebar on shop page) */
.lnl-shop .wp-block-wpe-mustang-products .wp-block-column:has(> [id^="products-filter"]) {
  display: none !important;
}

/* ── Storefront wrapper: collapse React layout wrappers ─── */

.lnl-archive .ecom-storefront,
.lnl-archive .ecom-storefront-layout-wrapper,
.lnl-archive .ecom-storefront-main-content,
.lnl-shop .ecom-storefront,
.lnl-shop .ecom-storefront-layout-wrapper,
.lnl-shop .ecom-storefront-main-content {
  display: contents !important;
}

/* ── Filter sidebar ─────────────────────────────────────────── */

/* Hide mobile controls and toggle button — sidebar is always visible on desktop */
.lnl-archive .ecom-storefront-sidebar-wrapper,
.lnl-archive .ecom-storefront-options-mobile,
.lnl-archive .ecom-filters-toggle-button,
.lnl-archive .ecom-filters-toggle-wrapper,
.lnl-archive .ecom-storefront-selectors,
.lnl-archive .ecom-storefront-controls-bar,
.lnl-archive [id^="products-filter-control-"],
.lnl-shop .ecom-storefront-sidebar-wrapper,
.lnl-shop .ecom-storefront-options-mobile,
.lnl-shop .ecom-filters-toggle-button,
.lnl-shop .ecom-filters-toggle-wrapper,
.lnl-shop .ecom-storefront-selectors,
.lnl-shop .ecom-storefront-controls-bar,
.lnl-shop [id^="products-filter-control-"] {
  display: none !important;
}

/* Filter panel — brand typography */
.lnl-archive [id^="products-filters-"],
.lnl-shop [id^="products-filters-"] {
  font-family: var(--wp--preset--font-family--sans) !important;
  font-size: var(--wp--preset--font-size--body-sm) !important;
  color: var(--wp--preset--color--ink) !important;
}

/* Filter group heading */
.lnl-archive .ecom-filter-group__title,
.lnl-shop .ecom-filter-group__title {
  font-family: var(--wp--preset--font-family--sans) !important;
  font-size: var(--wp--preset--font-size--body-sm) !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--ink) !important;
  border-bottom: 1px solid oklch(from var(--wp--preset--color--lichen) l c h / 0.15) !important;
  padding-bottom: 10px !important;
  margin-bottom: 12px !important;
}

/* Filter option labels */
.lnl-archive .ecom-filter-option,
.lnl-archive .ecom-filter-option__label,
.lnl-shop .ecom-filter-option,
.lnl-shop .ecom-filter-option__label {
  font-family: var(--wp--preset--font-family--sans) !important;
  font-size: var(--wp--preset--font-size--body-sm) !important;
  font-weight: 300 !important;
  color: var(--wp--preset--color--lichen) !important;
  cursor: pointer !important;
}

.lnl-archive .ecom-filter-option:hover .ecom-filter-option__label,
.lnl-shop .ecom-filter-option:hover .ecom-filter-option__label {
  color: var(--wp--preset--color--ink) !important;
}

/* Active filter chip (selected filter selections row) */
.lnl-archive [id^="products-filter-selections-"],
.lnl-shop [id^="products-filter-selections-"] {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
}

.lnl-archive .ecom-filter-selection,
.lnl-shop .ecom-filter-selection {
  font-family: var(--wp--preset--font-family--sans) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--ink) !important;
  border: 1px solid oklch(from var(--wp--preset--color--lichen) l c h / 0.3) !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 4px 10px !important;
}

.lnl-archive .ecom-filter-selection:hover,
.lnl-shop .ecom-filter-selection:hover {
  border-color: var(--wp--preset--color--amber) !important;
  color: var(--wp--preset--color--amber) !important;
}

/* ── Toolbar: count + sort ───────────────────────────────── */
/* Plugin renders count in .ecom-item-count-label and sort as
   button.ecom-dropdown__trigger inside the wp-block-columns bar. */

.lnl-archive .ecom-item-count-label,
.lnl-shop .ecom-item-count-label {
  display: block !important;
  font-family: var(--wp--preset--font-family--sans) !important;
  font-size: var(--wp--preset--font-size--body-sm) !important;
  font-weight: 300 !important;
  color: var(--wp--preset--color--lichen) !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Collapse plugin dropdown wrappers so they don't add height */
.lnl-archive .ecom-dropdown,
.lnl-archive .ecom-dropdown__container,
.lnl-shop .ecom-dropdown,
.lnl-shop .ecom-dropdown__container {
  display: block !important;
}

/* Sort button — strip plugin ghost-button chrome, apply L&L style */
.lnl-archive .ecom-dropdown__trigger,
.lnl-shop .ecom-dropdown__trigger {
  appearance: none !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-family: var(--wp--preset--font-family--sans) !important;
  font-size: var(--wp--preset--font-size--body-sm) !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  color: var(--wp--preset--color--ink) !important;
  letter-spacing: 0.5px;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: border-color 0.2s ease;
}

.lnl-archive .ecom-dropdown__trigger:focus,
.lnl-shop .ecom-dropdown__trigger:focus {
  outline: none !important;
}

/* Hide plugin's filled SVG chevron, replace with stroke version */
.lnl-archive .ecom-dropdown__trigger .ecom-icon-animate,
.lnl-shop .ecom-dropdown__trigger .ecom-icon-animate {
  display: none !important;
}

.lnl-archive .ecom-dropdown__trigger::after,
.lnl-shop .ecom-dropdown__trigger::after {
  content: '';
  display: block;
  width: 5px;
  height: 5px;
  border-right: 1.2px solid currentColor;
  border-bottom: 1.2px solid currentColor;
  transform: rotate(45deg);
  margin-top: -4px;
  flex-shrink: 0;
  color: var(--wp--preset--color--lichen);
}

/* Trigger hover — full button softens to lichen */
.lnl-archive .ecom-dropdown__trigger:hover,
.lnl-shop .ecom-dropdown__trigger:hover {
  color: var(--wp--preset--color--lichen) !important;
}

.lnl-archive .ecom-dropdown__trigger:hover::after,
.lnl-shop .ecom-dropdown__trigger:hover::after {
  color: var(--wp--preset--color--ink) !important;
}

/* ── Sort dropdown menu ───────────────────────────────────── */

.lnl-archive .ecom-dropdown__menu,
.lnl-shop .ecom-dropdown__menu {
  background: var(--wp--preset--color--paper) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: 0 4px 24px oklch(0.13 0.015 55 / 0.08) !important;
  padding: 8px 0 !important;
  overflow: hidden !important;
}

.lnl-archive .ecom-dropdown__option,
.lnl-shop .ecom-dropdown__option {
  font-family: var(--wp--preset--font-family--sans) !important;
  font-size: var(--wp--preset--font-size--body-sm) !important;
  font-weight: 300 !important;
  color: var(--wp--preset--color--ink) !important;
  letter-spacing: 0.5px;
  padding: 10px 16px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  transition: background 0.15s ease !important;
}

.lnl-archive .ecom-dropdown__option:hover,
.lnl-shop .ecom-dropdown__option:hover {
  background: var(--wp--preset--color--linen) !important;
}

.lnl-archive .ecom-dropdown__option--selected,
.lnl-shop .ecom-dropdown__option--selected {
  color: var(--wp--preset--color--lichen) !important;
}

.lnl-archive .ecom-dropdown__checkmark,
.lnl-shop .ecom-dropdown__checkmark {
  width: 12px !important;
  height: 12px !important;
  flex-shrink: 0;
}

/* ── Product grid ─────────────────────────────────────────── */
/* 3-column at desktop, generous gap for editorial breathing. */

.lnl-archive .ecom-storefront-items-wrapper,
.lnl-shop .ecom-storefront-items-wrapper {
  width: 100%;
  margin-bottom: 0 !important;
}

.lnl-archive .products__list,
.lnl-shop .products__list {
  gap: 32px 24px;
}

.lnl-archive .product-card,
.lnl-shop .product-card {
  border: none;
  border-radius: 0 !important;
  box-shadow: none;
  background: none;
  overflow: visible;
  transition: opacity 0.4s ease;
}

/* Product card image */
.lnl-archive .product-card__images,
.lnl-shop .product-card__images {
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.lnl-archive .product-card__images-wrapper,
.lnl-shop .product-card__images-wrapper {
  border-radius: 0 !important;
}

.lnl-archive .product-card__image:before,
.lnl-shop .product-card__image:before {
  padding-top: 133.33%;
}

.lnl-archive .product-card__image,
.lnl-shop .product-card__image {
  background: var(--wp--preset--color--paper);
}

.lnl-archive .product-card:hover .product-card__image,
.lnl-shop .product-card:hover .product-card__image {
  transform: scale(1.04);
  transition-delay: 0ms;
}

/* Suppress the buy-button overlay on hover — products
   appear as natural conclusions, not commercial demands */
.lnl-archive .product-card__images-buy-button,
.lnl-shop .product-card__images-buy-button {
  display: none !important;
}

/* Product card content */
.lnl-archive .product-card__content,
.lnl-shop .product-card__content {
  gap: 4px;
  padding: 14px 0 0;
}

.lnl-archive .product-card__content hgroup,
.lnl-shop .product-card__content hgroup {
  gap: 4px;
  margin-bottom: 0;
}

/* Title underline sweep on hover */
.lnl-archive .product-card__content a,
.lnl-shop .product-card__content a {
  text-decoration: none;
  background-image: linear-gradient(var(--wp--preset--color--lichen), var(--wp--preset--color--lichen));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  transition: background-size 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.lnl-archive .product-card:hover .product-card__content a,
.lnl-shop .product-card:hover .product-card__content a {
  background-size: 100% 1px;
}

/* Sibling dim — hovered card stays vivid, others recede */
.lnl-archive [class*="products-grid"]:has(.product-card:hover) .product-card:not(:hover),
.lnl-shop [class*="products-grid"]:has(.product-card:hover) .product-card:not(:hover) {
  opacity: 0.55;
}

/* Chip (sale badge, etc.) — strip plugin defaults */
.lnl-archive .product-card__chip,
.lnl-shop .product-card__chip {
  border-radius: 0 !important;
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Legacy Mustang product items (fallback) */
.lnl-archive .wpe-mustang-products-items,
.lnl-shop .wpe-mustang-products-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 24px;
  margin: 0;
  padding: 0;
}

.lnl-archive .wpe-mustang-products-item,
.lnl-shop .wpe-mustang-products-item {
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  text-align: left;
  transition: opacity 0.4s ease;
}

.lnl-archive .wpe-mustang-products-item:hover,
.lnl-shop .wpe-mustang-products-item:hover {
  transform: none;
  box-shadow: none;
}

.lnl-archive .wpe-mustang-products-item-image,
.lnl-shop .wpe-mustang-products-item-image {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--wp--preset--color--paper);
  border-radius: 0;
  height: auto;
}

.lnl-archive .wpe-mustang-products-item-image img,
.lnl-shop .wpe-mustang-products-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-height: none;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.lnl-archive .wpe-mustang-products-item:hover .wpe-mustang-products-item-image img,
.lnl-shop .wpe-mustang-products-item:hover .wpe-mustang-products-item-image img {
  transform: scale(1.04);
}

.lnl-archive .wpe-mustang-products-item-details,
.lnl-shop .wpe-mustang-products-item-details {
  padding: 14px 0 0;
}

.lnl-archive .wpe-mustang-products-item-details h3,
.lnl-shop .wpe-mustang-products-item-details h3 {
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--body-lg);
  font-weight: 400;
  color: var(--wp--preset--color--ink);
  margin: 0 0 4px;
  text-transform: none;
  line-height: 1.25;
}

.lnl-archive .wpe-mustang-products-item-price,
.lnl-shop .wpe-mustang-products-item-price {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body-sm);
  font-weight: 300;
  color: var(--wp--preset--color--lichen);
  margin: 0;
  letter-spacing: 0.5px;
}

.lnl-archive .wpe-mustang-products-item-details h3 a,
.lnl-shop .wpe-mustang-products-item-details h3 a {
  color: var(--wp--preset--color--ink);
  text-decoration: none;
  background-image: linear-gradient(var(--wp--preset--color--lichen), var(--wp--preset--color--lichen));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  transition: background-size 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.lnl-archive .wpe-mustang-products-item:hover .wpe-mustang-products-item-details h3 a,
.lnl-shop .wpe-mustang-products-item:hover .wpe-mustang-products-item-details h3 a {
  background-size: 100% 1px;
}

.lnl-archive .wpe-mustang-products-item-button,
.lnl-shop .wpe-mustang-products-item-button {
  display: none;
}

.lnl-archive .wpe-mustang-products-item-link-wrapper,
.lnl-shop .wpe-mustang-products-item-link-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.lnl-archive .wpe-mustang-products-items:has(.wpe-mustang-products-item:hover) .wpe-mustang-products-item:not(:hover),
.lnl-shop .wpe-mustang-products-items:has(.wpe-mustang-products-item:hover) .wpe-mustang-products-item:not(:hover) {
  opacity: 0.55;
}

/* ── Pagination ───────────────────────────────────────────── */

.lnl-archive .wpe-mustang-products-pagination,
.lnl-archive .wpe-mustang-products-load-more,
.lnl-shop .wpe-mustang-products-pagination,
.lnl-shop .wpe-mustang-products-load-more {
  margin-top: var(--wp--preset--spacing--xl);
}

.lnl-archive .wpe-mustang-products-pagination button,
.lnl-archive .wpe-mustang-products-load-more button,
.lnl-shop .wpe-mustang-products-pagination button,
.lnl-shop .wpe-mustang-products-load-more button {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body-sm);
  font-weight: 300;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--linen);
  border: none;
  border-radius: 0;
  padding: 14px 32px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.lnl-archive .wpe-mustang-products-pagination button:hover:not(:disabled),
.lnl-archive .wpe-mustang-products-load-more button:hover:not(:disabled),
.lnl-shop .wpe-mustang-products-pagination button:hover:not(:disabled),
.lnl-shop .wpe-mustang-products-load-more button:hover:not(:disabled) {
  background: var(--wp--preset--color--lichen);
  transform: none;
  box-shadow: none;
}

.lnl-archive .wpe-mustang-products-pagination button:disabled,
.lnl-shop .wpe-mustang-products-pagination button:disabled {
  background: var(--wp--custom--lichen--rule);
  color: var(--wp--preset--color--lichen);
  cursor: default;
}

/* ── Loading state ────────────────────────────────────────── */

.lnl-archive .wpe-mustang-products-loading p,
.lnl-shop .wpe-mustang-products-loading p {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body-sm);
  color: var(--wp--preset--color--lichen);
  letter-spacing: 1px;
}

/* ============================================================
   ARCHIVE / SHOP RESPONSIVE
============================================================ */

@media (max-width: 900px) {
  .lnl-archive .wpe-mustang-products-items,
  .lnl-shop .wpe-mustang-products-items {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .lnl-shop-nav {
    gap: var(--wp--preset--spacing--s) var(--wp--preset--spacing--l);
  }

  .lnl-archive .ecom-unified-controls-bar,
  .lnl-shop .ecom-unified-controls-bar {
    flex-wrap: wrap;
    gap: 8px;
  }

  .lnl-archive .ecom-storefront-layout-wrapper,
  .lnl-shop .ecom-storefront-layout-wrapper {
    flex-direction: column;
  }

  .lnl-archive .products__list,
  .lnl-shop .products__list {
    gap: 20px;
  }
}

@media (max-width: 640px) {
  .lnl-collection-header__title,
  .lnl-shop-header__title {
    font-size: 28px;
  }

  .lnl-collection-header__desc,
  .lnl-shop-header__desc {
    font-size: var(--wp--preset--font-size--body);
    max-width: none;
  }

  .lnl-shop-nav__link {
    font-size: var(--wp--preset--font-size--label);
  }

  .lnl-archive .wpe-mustang-products-items,
  .lnl-shop .wpe-mustang-products-items {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .lnl-archive .products__list,
  .lnl-shop .products__list {
    gap: 14px;
  }
}

/* ============================================================
   HEADER NAV — impeccable
============================================================ */

/* ── Mobile nav: hide account block, show account links in primary hamburger ── */

/* Sign In / Sign Up live in primary nav but only appear on mobile.
   Needs (0,2,0) specificity to beat WP core's .wp-block-navigation .wp-block-navigation-item rule. */
.wp-block-navigation .lnl-mobile-only {
  display: none;
}

@media (max-width: 900px) {
  /* Show account links inside the primary hamburger menu */
  .wp-block-navigation .lnl-mobile-only {
    display: flex;
  }
  /* Hide the separate account nav block — primary hamburger covers it */
  .lnl-account-nav-block {
    display: none !important;
  }
  /* Pull hamburger right so it sits adjacent to the cart.
     flex: 0 0 auto prevents WP layout classes from expanding the nav;
     margin-left: auto then absorbs all leftover space, pushing it flush against the cart. */
  .lnl-primary-nav {
    flex: 0 0 auto !important;
    width: auto !important;
    margin-left: auto !important;
  }
}

/* WP defaults to showing horizontal nav above 600px and hiding hamburger.
   Override that 600–900px gap so our primary nav stays in hamburger mode
   until the same breakpoint where the rest of the page reflows. */
@media (min-width: 600px) and (max-width: 900px) {
  .lnl-primary-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none !important;
  }
  .lnl-primary-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex !important;
  }
}

/* ── Nav item spacing ─────────────────────────────────────── */

.lnl-primary-nav .wp-block-navigation__container {
  column-gap: 40px;
}

.lnl-primary-nav > .wp-block-navigation__container > .wp-block-navigation-item {
  position: relative;
}

.lnl-account-nav-block {
  flex: 0 0 auto;
}

.lnl-account-nav-block .wp-block-navigation__container {
  column-gap: 20px;
}

/* ── Primary nav link hover: underline sweep left→right ──── */

.lnl-primary-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
.lnl-primary-nav .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation-item__content {
  position: relative;
  padding-bottom: 2px;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.2s ease;
}

.lnl-primary-nav .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.lnl-primary-nav .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.lnl-primary-nav .wp-block-navigation__container > .wp-block-navigation-submenu:hover > .wp-block-navigation-item__content {
  background-size: 100% 1px;
}

/* Sibling dim — focused link stays full, others pull back */
.lnl-primary-nav .wp-block-navigation__container:has(> .wp-block-navigation-item:hover)
  > .wp-block-navigation-item:not(:hover) > .wp-block-navigation-item__content {
  opacity: 0.45;
}

/* ── Shared dropdown base ──────────────────────────────────── */

.lnl-primary-nav .wp-block-navigation__submenu-icon,
.lnl-account-nav .wp-block-navigation__submenu-icon {
  display: none;
}

.lnl-primary-nav .wp-block-navigation__submenu-container,
.lnl-account-nav .wp-block-navigation__submenu-container {
  background: var(--wp--preset--color--paper) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: 0 4px 24px oklch(0.13 0.015 55 / 0.08) !important;
  padding: 12px 0 !important;
  top: calc(100% + 8px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-4px) !important;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0s linear 0.2s !important;
}

.lnl-primary-nav .wp-block-navigation-submenu::after,
.lnl-account-nav::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  right: 0;
  height: 8px;
}

.lnl-primary-nav .wp-block-navigation-submenu:hover > .wp-block-navigation__submenu-container,
.lnl-primary-nav .wp-block-navigation-submenu.open > .wp-block-navigation__submenu-container,
.lnl-account-nav:hover .wp-block-navigation__submenu-container,
.lnl-account-nav.open .wp-block-navigation__submenu-container {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
  transition-delay: 0s !important;
}

.lnl-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item,
.lnl-account-nav .wp-block-navigation__submenu-container .wp-block-navigation-item {
  border: none !important;
}

.lnl-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.lnl-account-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: block !important;
  padding: 8px 24px !important;
  color: var(--wp--preset--color--ink) !important;
  font-size: var(--wp--preset--font-size--nav) !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  font-weight: 300 !important;
  font-family: var(--wp--preset--font-family--sans) !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  opacity: 1 !important;
  transition: color 0.15s ease !important;
}

.lnl-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.lnl-account-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--amber) !important;
  opacity: 1 !important;
}

/* ── Shop dropdown overrides ──────────────────────────────── */

.lnl-primary-nav .wp-block-navigation__submenu-container {
  display: flex;
  flex-direction: column;
  min-width: 180px;
}

.lnl-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item:has(.wp-block-navigation-item__content[href*="/shop"]) {
  order: 99;
}

/* "Shop All" — amber arrow link, matches Figma pairing specimen */
.lnl-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content[href*="/shop"] {
  color: var(--wp--preset--color--amber);
  text-transform: none;
  text-decoration: none !important;
  font-size: 13px;
  letter-spacing: 0.5px;
}

.lnl-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content[href*="/shop"]::after {
  content: " \2192";
  display: inline-block;
  margin-left: 2px;
  transition: transform 0.2s ease;
}

.lnl-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content[href*="/shop"]:hover::after {
  transform: translateX(3px);
}

/* ── Account icon: reset trigger button, hide chevron ─────── */

/* Strip default button chrome from the submenu trigger */
.lnl-account-nav .wp-block-navigation-item__content {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  line-height: inherit;
  font-size: inherit;
  font-family: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  font-weight: inherit;
  color: inherit;
}

/* Hide the auto-generated chevron — icon is the entire trigger */
.lnl-account-nav .wp-block-navigation__submenu-icon {
  display: none;
}

/* ── Account dropdown overrides ────────────────────────────── */

.lnl-account-nav .wp-block-navigation__submenu-container {
  min-width: 0 !important;
  width: auto !important;
  left: 50% !important;
  right: auto !important;
  translate: -50% 0 !important;
}

/* ---- ACCOUNT NAV ---- */

/* Commerce logged out: plugin renders a text link — hide it, our icon submenu handles this.
   Inside a nav block the wrapper class is wp-block-wpe-mustang-account-menu, not
   wpe-mustang-account-menu-item (that only applies in standalone context). */
.wp-block-wpe-mustang-account-menu:has(a.ecom-account-menu__login-link) {
  display: none;
}

/* Commerce logged in: plugin renders icon+dropdown — hide our static submenu */
body:has(.ecom-account-menu__toggle) .lnl-account-nav {
  display: none;
}

/* Replace "Account" text label with the native WPE Commerce person-in-circle icon */
.lnl-account-nav > .wp-block-navigation-item__content .wp-block-navigation-item__label {
  display: none;
}

.lnl-account-nav > .wp-block-navigation-item__content::before {
  content: "";
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%231C1814'%3E%3Cpath d='M2.50004 9.99999C2.50004 5.85786 5.8579 2.49999 10 2.49999C14.1422 2.49999 17.5 5.85786 17.5 9.99999C17.5 12.1341 16.6087 14.0601 15.1779 15.4259C14.6332 14.0638 13.7645 13.0103 12.6652 12.3696C13.5827 11.6053 14.1667 10.4542 14.1667 9.16666C14.1667 6.86547 12.3012 4.99999 10 4.99999C7.69885 4.99999 5.83337 6.86547 5.83337 9.16666C5.83337 10.4542 6.41736 11.6053 7.33491 12.3696C6.23553 13.0103 5.36685 14.0638 4.82219 15.4259C3.39142 14.0601 2.50004 12.1341 2.50004 9.99999ZM6.21511 16.4763C7.32612 17.127 8.61952 17.5 10 17.5C11.3806 17.5 12.674 17.127 13.785 16.4763C13.1184 14.3848 11.6878 13.3333 10 13.3333C8.31228 13.3333 6.88171 14.3848 6.21511 16.4763ZM10 0.833328C4.93743 0.833328 0.833374 4.93738 0.833374 9.99999C0.833374 15.0626 4.93743 19.1667 10 19.1667C15.0626 19.1667 19.1667 15.0626 19.1667 9.99999C19.1667 4.93738 15.0626 0.833328 10 0.833328ZM7.50004 9.16666C7.50004 7.78595 8.61933 6.66666 10 6.66666C11.3808 6.66666 12.5 7.78595 12.5 9.16666C12.5 10.5474 11.3808 11.6667 10 11.6667C8.61933 11.6667 7.50004 10.5474 7.50004 9.16666Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
  transform: translateY(-2px);
}

/* ── Header icon group — even spacing ────────────────────────── */

header .wp-block-group > .wp-block-group {
  gap: 12px;
}

/* ── WPE Commerce cart icon — normalize for header flex context ── */

header .cart-icon-blocks {
  display: flex;
  align-items: center;
  max-width: none;
  width: auto;
}

header .cart-icon-blocks .ecom-cart-icon,
header .cart-icon-blocks .ecom-cart-icon-inline {
  padding: 0;
}

header .cart-icon-blocks .ecom-cart-icon-inline svg.ecom-icon-cart {
  width: 15px;
  height: 15px;
  transform: none;
}

/* ── Logged-in account menu: match site dropdown style ─────── */
/*
 * .wp-block-wpe-mustang-account-menu is the WordPress-generated class on the
 * block's <span> wrapper (confirmed via DOM inspection). The plugin uses
 * .wpe-mustang-account-menu-item which only applies in standalone context,
 * not inside a navigation block.
 */

/* Strip ecom-button ghost/md padding — standalone context resets these via
   .wpe-mustang-account-menu-item but that selector doesn't apply inside a nav block. */
.wp-block-wpe-mustang-account-menu .ecom-account-menu__toggle {
  padding: 0;
  min-height: unset;
  max-height: unset;
  min-width: unset;
  max-width: unset;
  background: none;
  border: none;
  line-height: 1;
}

/* Native WPE Commerce toggle SVG renders the same person-in-circle — no override needed. */

/* Bridge pseudo-element covers the 8px gap between icon and panel
   so hover doesn't drop as the mouse moves downward. */
.wp-block-wpe-mustang-account-menu .ecom-account-menu::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 8px;
}

.wp-block-wpe-mustang-account-menu .ecom-account-menu__content {
  background: var(--wp--preset--color--paper);
  border: none;
  border-radius: 0;
  box-shadow: 0 4px 24px oklch(0.13 0.015 55 / 0.08);
  padding: 12px 0;
  top: calc(100% + 8px);
  min-width: 160px;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0s linear 0.2s;
}

/* Show on hover — mirrors how .lnl-account-nav and .lnl-primary-nav submenus work */
.wp-block-wpe-mustang-account-menu .ecom-account-menu:hover .ecom-account-menu__content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.wp-block-wpe-mustang-account-menu .ecom-account-menu__menu {
  padding: 0;
  gap: 0;
}

.wp-block-wpe-mustang-account-menu .ecom-account-menu__item {
  padding: 0;
  align-self: stretch;
}

.wp-block-wpe-mustang-account-menu .ecom-account-menu__link {
  display: block;
  padding: 8px 24px;
  color: var(--wp--preset--color--ink);
  font-size: var(--wp--preset--font-size--nav);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 300;
  font-family: var(--wp--preset--font-family--sans);
  white-space: nowrap;
  text-decoration: none;
  min-height: unset;
  border-radius: 0;
  background: transparent;
  transition: color 0.15s ease;
}

.wp-block-wpe-mustang-account-menu .ecom-account-menu__link:hover,
.wp-block-wpe-mustang-account-menu .ecom-account-menu__link:focus {
  color: var(--wp--preset--color--amber);
  background: transparent;
  text-decoration: none;
}

/* ── Support icon — matches account icon treatment ─────────── */

.lnl-support-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wp--preset--color--ink);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.lnl-support-icon:hover {
  opacity: 0.6;
}

/* ============================================================
   SUPPORT PAGE
============================================================ */

.lnl-support {
  background: var(--wp--preset--color--linen);
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  box-sizing: border-box;
}

.lnl-support__inner {
  max-width: min(820px, 100% - var(--wp--preset--spacing--l) * 2);
  margin: 0 auto;
  padding: var(--wp--preset--spacing--xl) 0 var(--wp--preset--spacing--2xl);
}

/* ── Top section: hero + contact form side by side ─────────── */

.lnl-support__top {
  display: grid;
  grid-template-columns: 5fr 8fr;
  gap: var(--wp--preset--spacing--l);
  align-items: start;
  margin-bottom: var(--wp--preset--spacing--xl);
}

.lnl-support__hero {
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.lnl-support__hero h4 {
  margin: 0;
}

.lnl-support__hero h1 {
  font-size: clamp(28px, 3.5vw, 38px);
  margin: 0;
  line-height: 1.1;
}

.lnl-support__hero-note {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body);
  color: var(--wp--preset--color--lichen);
  margin: 0;
  line-height: 1.5;
}

.lnl-support__contact-details {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 4px;
}

.lnl-support__contact-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lnl-support__contact-label {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--wp--preset--color--lichen);
  opacity: 0.6;
}

.lnl-support__contact-item a,
.lnl-support__contact-item span:last-child {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body);
  font-weight: 300;
  color: var(--wp--preset--color--ink);
  text-decoration: none;
  transition: color 0.2s ease;
}

.lnl-support__contact-item a:hover {
  color: var(--wp--preset--color--amber);
}

/* ── Two-column layout: sticky nav + FAQ content ──────────── */

.lnl-support__layout {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--wp--preset--spacing--l);
  align-items: start;
}

.lnl-support__nav {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 4px;
}

.lnl-support__nav-link {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body-sm);
  font-weight: 300;
  letter-spacing: 0.5px;
  color: var(--wp--preset--color--lichen);
  text-decoration: none;
  padding: 10px 0;
  border-bottom: 1px solid var(--wp--custom--lichen--rule);
  transition: color 0.2s ease;
}

.lnl-support__nav-link:first-child {
  border-top: 1px solid var(--wp--custom--lichen--rule);
}

.lnl-support__nav-link:hover,
.lnl-support__nav-link.is-active {
  color: var(--wp--preset--color--ink);
}

.lnl-support__content {
  min-width: 0;
  padding-top: 4px;
}

/* ── FAQ ──────────────────────────────────────────────────── */

.lnl-faq__group {
  margin-bottom: var(--wp--preset--spacing--xl);
  scroll-margin-top: 80px;
}

.lnl-faq__group h3 {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--wp--preset--color--lichen);
  margin: 0 0 4px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--wp--custom--lichen--rule);
}

.lnl-faq__item {
  border-bottom: 1px solid var(--wp--custom--lichen--rule);
}

.lnl-faq__item summary {
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--body-lg);
  font-weight: 400;
  color: var(--wp--preset--color--ink);
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  transition: color 0.2s ease;
}

.lnl-faq__item summary:hover {
  color: var(--wp--preset--color--amber);
}

.lnl-faq__item summary::-webkit-details-marker {
  display: none;
}

.lnl-faq__item summary::after {
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  border-right: 1px solid var(--wp--preset--color--lichen);
  border-bottom: 1px solid var(--wp--preset--color--lichen);
  transform: rotate(-45deg);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  margin-right: 4px;
}

.lnl-faq__item[open] summary::after {
  transform: rotate(45deg) translateY(-2px);
}

.lnl-faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.lnl-faq__item[open] .lnl-faq__answer {
  grid-template-rows: 1fr;
}

.lnl-faq__answer > p {
  overflow: hidden;
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body);
  color: var(--wp--preset--color--lichen);
  line-height: 1.75;
  margin: 0;
  padding: 0 0 24px;
  max-width: 55ch;
}

/* ── Contact Form ────────────────────────────────────────── */

.lnl-support__form-section {
}

.lnl-support__form-card {
  background: var(--wp--preset--color--paper);
  padding: var(--wp--preset--spacing--l);
}

.lnl-support__form-card h2 {
  font-size: var(--wp--preset--font-size--subheadline);
  margin: 0 0 var(--wp--preset--spacing--m);
}

.lnl-support__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lnl-support__form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.lnl-support__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lnl-support__field label {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body-sm);
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--wp--preset--color--ink);
}

.lnl-support__optional {
  font-weight: 300;
  text-transform: none;
  letter-spacing: 0;
  color: var(--wp--preset--color--lichen);
}

.lnl-support__field select,
.lnl-support__field input,
.lnl-support__field textarea {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body);
  font-weight: 300;
  color: var(--wp--preset--color--ink);
  background: var(--wp--preset--color--linen);
  border: 1px solid var(--wp--custom--lichen--rule);
  padding: 14px 16px;
  transition: border-color 0.2s ease;
  outline: none;
}

.lnl-support__field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235D6654' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
  cursor: pointer;
}

.lnl-support__field select:focus,
.lnl-support__field input:focus,
.lnl-support__field textarea:focus {
  border-color: var(--wp--preset--color--amber);
}

.lnl-support__field textarea {
  resize: vertical;
  min-height: 80px;
}

.lnl-support__field input::placeholder,
.lnl-support__field textarea::placeholder {
  color: var(--wp--preset--color--lichen);
  opacity: 0.5;
}

.lnl-support__submit {
  align-self: flex-start;
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body-sm);
  font-weight: 300;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--wp--preset--color--linen);
  background: var(--wp--preset--color--ink);
  border: none;
  padding: 14px 32px;
  cursor: pointer;
  transition: background-color 0.25s ease;
}

.lnl-support__submit:hover {
  background: var(--wp--preset--color--lichen);
}

/* ── Support responsive ──────────────────────────────────── */

@media (max-width: 900px) {
  .lnl-support__top {
    grid-template-columns: 1fr;
  }

  .lnl-support__layout {
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--l);
  }

  .lnl-support__nav {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 24px;
    border-bottom: 1px solid var(--wp--custom--lichen--rule);
    padding-bottom: 16px;
  }

  .lnl-support__nav-link {
    border: none;
    padding: 6px 0;
  }

  .lnl-support__nav-link:first-child {
    border: none;
  }
}

@media (max-width: 640px) {
  .lnl-support__inner {
    max-width: min(820px, 100% - var(--wp--preset--spacing--s) * 2);
    padding: var(--wp--preset--spacing--s) 0 var(--wp--preset--spacing--xl);
  }

  .lnl-support__form-row {
    grid-template-columns: 1fr;
  }

  .lnl-support__form-card {
    padding: var(--wp--preset--spacing--m);
  }

  .lnl-support__top {
    gap: var(--wp--preset--spacing--m);
  }
}

/* ============================================================
   HEADER RESPONSIVE
============================================================ */

/* Fluid side padding — 48→16px between 400–1200px viewports */
header.wp-block-group {
  padding-left: clamp(var(--wp--preset--spacing--s), 4vw, var(--wp--preset--spacing--l)) !important;
  padding-right: clamp(var(--wp--preset--spacing--s), 4vw, var(--wp--preset--spacing--l)) !important;
  gap: var(--wp--preset--spacing--m) !important;
  position: relative;
  z-index: 100;
}

/* Prevent nav block from flex-growing into logo/cart space */
.lnl-primary-nav {
  flex: 0 1 auto !important;
  width: auto !important;
}

/* Optical alignment: the logo mark is taller than the wordmark text,
   so flex center overshoots. Nudge nav + icons down to sit on the
   visual center of "line & loom" rather than the full logo height. */
header.wp-block-group .lnl-primary-nav {
  transform: translateY(3px);
}

header.wp-block-group > .wp-block-group:last-child {
  transform: translateY(3px);
}

/* Narrow desktop: ease nav gaps before hamburger kicks in */
@media (max-width: 1080px) {
  .lnl-primary-nav .wp-block-navigation__container {
    column-gap: 28px;
  }
  .lnl-account-nav-block .wp-block-navigation__container {
    column-gap: 14px;
  }
}

/* Hamburger zone: compact vertical rhythm, match icon group gap */
@media (max-width: 900px) {
  header.wp-block-group {
    padding-top: var(--wp--preset--spacing--s) !important;
    padding-bottom: var(--wp--preset--spacing--s) !important;
    gap: 12px !important;
  }
}

/* ============================================================
   SHOP CATEGORY TILES
   Editorial 4-tile grid between the rule and editorial picks.
   Mirrors the front-page category grid proportions.
============================================================ */

.lnl-shop-category-tiles {
  max-width: 1200px;
  margin: 0 auto;
}

.lnl-sct__grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 220px 220px 160px;
  gap: 6px;
}

.lnl-sct__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px 32px;
  background: var(--wp--preset--color--linen);
  text-decoration: none;
  overflow: hidden;
  transition: opacity 0.35s ease;
}

.lnl-sct__tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--wp--preset--color--ink);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.lnl-sct__tile:hover::before {
  opacity: 0.06;
}

.lnl-sct__tile--dark {
  background: var(--wp--preset--color--ink);
}

.lnl-sct__tile--dark::before {
  background: var(--wp--preset--color--paper);
}

/* Outdoor Living: tall left tile */
.lnl-sct__tile--tall {
  grid-row: 1 / 3;
}

/* Accessories: full-width bottom strip */
.lnl-sct__tile--wide {
  grid-column: 1 / -1;
}

/* Sibling dim on hover */
.lnl-sct__grid:has(.lnl-sct__tile:hover) .lnl-sct__tile:not(:hover) {
  opacity: 0.7;
}

.lnl-sct__label {
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--subheadline);
  font-weight: 300;
  color: var(--wp--preset--color--ink);
  margin: 0 0 4px;
  line-height: 1.1;
}

.lnl-sct__tile--dark .lnl-sct__label {
  color: var(--wp--preset--color--paper);
}

.lnl-sct__desc {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body-sm);
  font-weight: 300;
  color: var(--wp--preset--color--lichen);
  margin: 0 0 16px;
}

.lnl-sct__tile--dark .lnl-sct__desc {
  color: rgba(250, 248, 244, 0.55);
}

.lnl-sct__arrow {
  font-size: 18px;
  color: var(--wp--preset--color--amber);
  display: block;
  transform: translateX(0);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  line-height: 1;
}

.lnl-sct__tile:hover .lnl-sct__arrow {
  transform: translateX(6px);
}

@media (max-width: 900px) {
  .lnl-sct__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 180px 180px 140px;
  }

  .lnl-sct__tile--tall {
    grid-row: auto;
  }

  .lnl-sct__tile--wide {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .lnl-sct__grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .lnl-sct__tile--tall,
  .lnl-sct__tile--wide {
    grid-column: auto;
    grid-row: auto;
  }

  .lnl-sct__tile {
    min-height: 140px;
  }
}

/* ============================================================
   SHOP EDITORIAL PICKS
   Staggered 4-col grid of 7 newest products. Card 1 spans
   2 cols × 2 rows (hero); card 3 spans 2 rows (tall);
   card 6 spans 2 cols (wide landscape).
============================================================ */

.lnl-editorial-picks {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--wp--preset--spacing--xl) 0 0;
}

.lnl-editorial-picks__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: var(--wp--preset--spacing--l);
}

.lnl-editorial-picks__title {
  font-family: var(--wp--preset--font-family--serif);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 300;
  color: var(--wp--preset--color--ink);
  line-height: 1.1;
  margin: 0;
}

.lnl-editorial-picks__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* Hero: 2 cols × 2 rows */
.lnl-editorial-picks__grid .lnl-ep-card:nth-child(1) {
  grid-column: span 2;
  grid-row: span 2;
  height: 100%;
}

/* Tall: 1 col × 2 rows */
.lnl-editorial-picks__grid .lnl-ep-card:nth-child(3) {
  grid-row: span 2;
  height: 100%;
}

/* Wide: 2 cols × 1 row */
.lnl-editorial-picks__grid .lnl-ep-card:nth-child(6) {
  grid-column: span 2;
}

/* Spanning cards: image fills available height */
.lnl-editorial-picks__grid .lnl-ep-card:nth-child(1),
.lnl-editorial-picks__grid .lnl-ep-card:nth-child(3) {
  display: flex;
  flex-direction: column;
}

.lnl-editorial-picks__grid .lnl-ep-card:nth-child(1) .pc-card__image-wrap,
.lnl-editorial-picks__grid .lnl-ep-card:nth-child(3) .pc-card__image-wrap {
  flex: 1;
  aspect-ratio: unset;
  min-height: 0;
}

/* Wide card: landscape aspect */
.lnl-editorial-picks__grid .lnl-ep-card:nth-child(6) .pc-card__image-wrap {
  aspect-ratio: 2 / 1;
}

/* Sibling dim on hover */
.lnl-editorial-picks__grid:has(.lnl-ep-card:hover) .lnl-ep-card:not(:hover) {
  opacity: 0.55;
}

@media (max-width: 900px) {
  .lnl-editorial-picks__grid {
    grid-template-columns: 1fr 1fr;
  }

  .lnl-editorial-picks__grid .lnl-ep-card:nth-child(1) {
    grid-column: span 2;
    grid-row: span 1;
    height: auto;
  }

  .lnl-editorial-picks__grid .lnl-ep-card:nth-child(1) .pc-card__image-wrap {
    aspect-ratio: 16 / 9;
    flex: none;
  }

  .lnl-editorial-picks__grid .lnl-ep-card:nth-child(3) {
    grid-row: span 1;
    height: auto;
  }

  .lnl-editorial-picks__grid .lnl-ep-card:nth-child(3) .pc-card__image-wrap {
    aspect-ratio: 3 / 4;
    flex: none;
  }
}

@media (max-width: 640px) {
  .lnl-editorial-picks__grid {
    grid-template-columns: 1fr;
  }

  .lnl-editorial-picks__grid .lnl-ep-card:nth-child(1),
  .lnl-editorial-picks__grid .lnl-ep-card:nth-child(6) {
    grid-column: auto;
  }

  .lnl-editorial-picks__grid .lnl-ep-card:nth-child(1) .pc-card__image-wrap {
    aspect-ratio: 3 / 4;
  }

  .lnl-editorial-picks__grid .lnl-ep-card:nth-child(6) .pc-card__image-wrap {
    aspect-ratio: 3 / 4;
  }
}

/* ── Shop section break — rule between editorial picks and full catalog ──── */

.lnl-shop-section-break {
  max-width: 1200px;
  margin: var(--wp--preset--spacing--xl) auto var(--wp--preset--spacing--l);
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--m);
}

.lnl-shop-section-break::before,
.lnl-shop-section-break::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(93, 102, 84, 0.15);
}

.lnl-shop-section-break span {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body-sm);
  font-weight: 300;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--lichen);
  white-space: nowrap;
}

/* ============================================================
   SUMMER 2026 SHOWCASE
   Featured hero + category-separated product rows.
   Replaces the WPE Mustang block on the summer-2026 page.
============================================================ */

.lnl-summer-showcase {
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: var(--wp--preset--spacing--xl);
}

/* ── Featured hero ─────────────────────────────────────────── */

.lnl-sh-hero {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: 48px;
  align-items: center;
  margin-bottom: var(--wp--preset--spacing--xl);
  text-decoration: none;
  color: inherit;
}

.lnl-sh-hero__image {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--wp--preset--color--paper);
}

.lnl-sh-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.lnl-sh-hero:hover .lnl-sh-hero__image img {
  transform: scale(1.04);
}

.lnl-sh-hero__img-placeholder {
  width: 100%;
  height: 100%;
  background: var(--wp--preset--color--paper);
}

.lnl-sh-hero__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lnl-sh-hero__title {
  font-family: var(--wp--preset--font-family--serif);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 300;
  color: var(--wp--preset--color--ink);
  line-height: 1.1;
  margin: 0;
}

.lnl-sh-hero__price {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--price);
  font-weight: 300;
  color: var(--wp--preset--color--lichen);
  margin: 0;
}

.lnl-sh-hero__cta {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body-sm);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--amber);
  display: inline-block;
  transform: translateX(0);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.lnl-sh-hero:hover .lnl-sh-hero__cta {
  transform: translateX(6px);
}

@media (max-width: 900px) {
  .lnl-sh-hero {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .lnl-sh-hero__image {
    aspect-ratio: 16 / 9;
  }
}

/* ── Combined outdoor + indoor row ─────────────────────────── */

.lnl-sh-combined-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-bottom: var(--wp--preset--spacing--xl);
}

.lnl-sh-combined-row .lnl-sh-section--combined {
  margin-bottom: 0;
}

/* auto-fit: 1 product fills its column; 2 products split it */
.lnl-sh-section--combined .lnl-sh-section__row {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

/* Solo column (1 product): stretch to match the multi column's natural height.
   Multi column drives the row height via its image aspect-ratios.
   Grid already stretches solo to that height — we thread height down to the card. */
.lnl-sh-section--combined-solo {
  display: flex;
  flex-direction: column;
}

.lnl-sh-section--combined-solo .lnl-sh-section__header,
.lnl-sh-section--combined-solo .lnl-sh-section__rule {
  flex-shrink: 0;
}

.lnl-sh-section--combined-solo .lnl-sh-section__row {
  flex: 1;
  min-height: 0; /* allow flex item to shrink below content size */
  align-items: stretch;
}

.lnl-sh-section--combined-solo .lnl-sh-section__row .pc-card {
  height: 100%;
}

.lnl-sh-section--combined-solo .lnl-sh-section__row .pc-card .pc-card__image-wrap {
  flex: 1;
  min-height: 0; /* prevent natural image height from driving grid row size */
  aspect-ratio: unset;
}

@media (max-width: 900px) {
  .lnl-sh-combined-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .lnl-sh-combined-row .lnl-sh-section--combined {
    margin-bottom: var(--wp--preset--spacing--xl);
  }
}

/* ── Category sections ─────────────────────────────────────── */

.lnl-sh-section {
  margin-bottom: var(--wp--preset--spacing--xl);
}

.lnl-sh-section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--m);
  margin-bottom: var(--wp--preset--spacing--s);
}

.lnl-sh-section__meta {
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.lnl-sh-section__title {
  font-family: var(--wp--preset--font-family--serif);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 300;
  color: var(--wp--preset--color--ink);
  margin: 0;
  line-height: 1.1;
}

.lnl-sh-section__count {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body-sm);
  font-weight: 300;
  color: var(--wp--preset--color--lichen);
  white-space: nowrap;
}

.lnl-sh-section__more {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body-sm);
  font-weight: 300;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--lichen);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.25s ease;
}

.lnl-sh-section__more:hover {
  color: var(--wp--preset--color--ink);
}

.lnl-sh-section__rule {
  height: 1px;
  background: rgba(93, 102, 84, 0.15);
  margin-bottom: var(--wp--preset--spacing--l);
}

/* Product row: 4-col grid on desktop, scroll on mobile */
.lnl-sh-section__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

@media (max-width: 900px) {
  .lnl-sh-section__row {
    display: flex;
    overflow-x: auto;
    gap: 16px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    scrollbar-width: none;
  }

  .lnl-sh-section__row::-webkit-scrollbar {
    display: none;
  }

  .lnl-sh-section__row .pc-card {
    flex: 0 0 calc(50% - 8px);
    scroll-snap-align: start;
  }
}

@media (max-width: 640px) {
  .lnl-sh-section__row .pc-card {
    flex: 0 0 80%;
  }
}

/* ── Fallback: flat grid ────────────────────────────────────── */

.lnl-sh-flat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

@media (max-width: 900px) {
  .lnl-sh-flat-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .lnl-sh-flat-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   WPE COMMERCE — Sign In / Registration / Account
   Overrides the plugin's default design with the L&L six-color
   palette and Avenir + Baskerville type system.
   Selectors (plugin v2+ uses ecom-* classes):
     Login + Registration: .ecom-form--card, .ecom-input__*, .ecom-button
     Lost password:        .mustang-lost-password-container, .mustang-reset-button
     Logout:               .mustang-customer-logout (unchanged)
============================================================ */

/* ── Page layout — breathing room around the card ──────────── */

/* ── Suppress WP post title — plugin block has its own ─────── */

body:has(.ecom-form--card) .wp-block-post-title,
body:has(.mustang-customer-logout) .wp-block-post-title {
  display: none;
}

/* ── Card containers ────────────────────────────────────────── */

.ecom-form.ecom-form--card,
.mustang-lost-password-container {
  background: var(--wp--preset--color--paper);
  border-radius: 0;
  border: 1px solid var(--wp--custom--lichen--rule);
  font-family: var(--wp--preset--font-family--sans);
}

/* ── Form gap control ───────────────────────────────────────── */

.ecom-form {
  row-gap: 0;
}

.ecom-input__field-group {
  margin-bottom: 28px;
}

.ecom-form__footer {
  margin-bottom: 12px;
  gap: 4px;
}

/* ── Titles ─────────────────────────────────────────────────── */

.ecom-form__title,
.mustang-title {
  font-family: var(--wp--preset--font-family--serif);
  font-weight: 400;
  font-size: var(--wp--preset--font-size--subheadline);
  color: var(--wp--preset--color--ink) !important;
  line-height: 1.15;
  letter-spacing: 0;
}

.ecom-form__subtitle,
.mustang-subtitle {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body);
  font-weight: 300;
  color: var(--wp--preset--color--lichen);
  line-height: 1.54;
}

/* ── Form labels ────────────────────────────────────────────── */

.ecom-input__label,
.mustang-label {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--label) !important;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--wp--preset--color--lichen) !important;
  line-height: 1.6;
}

/* ── Inputs ─────────────────────────────────────────────────── */

.ecom-input {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body);
  font-weight: 300;
  background: var(--wp--preset--color--paper);
  border-color: var(--wp--custom--lichen--rule);
  border-radius: 0;
  color: var(--wp--preset--color--ink);
}

.ecom-input::placeholder {
  color: var(--wp--preset--color--lichen);
  opacity: 0.6;
}

.ecom-input:focus {
  border-color: var(--wp--preset--color--amber);
  box-shadow: 0 0 0 2px rgba(194, 138, 82, 0.12);
  outline: none;
}

.ecom-input__wrapper {
  background: var(--wp--preset--color--paper);
  border-color: var(--wp--custom--lichen--rule);
  border-radius: 0;
}

.ecom-input__wrapper:focus-within {
  border-color: var(--wp--preset--color--amber);
  box-shadow: 0 0 0 2px rgba(194, 138, 82, 0.12);
}

/* ── Password show/hide toggle ──────────────────────────────── */

.ecom-input__password-toggle {
  color: var(--wp--preset--color--lichen);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

.ecom-input__password-toggle:hover {
  color: var(--wp--preset--color--ink);
}

/* ── Primary button ─────────────────────────────────────────── */

.ecom-button.ecom-button--primary,
.mustang-reset-button.enabled {
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--linen);
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--label) !important;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: 0;
}

.ecom-button.ecom-button--primary:hover,
.mustang-reset-button.enabled:hover {
  background: var(--wp--preset--color--lichen);
  color: var(--wp--preset--color--paper);
  transform: none;
}

.ecom-button.ecom-button--primary:focus,
.mustang-reset-button.enabled:focus {
  box-shadow: 0 0 0 2px rgba(194, 138, 82, 0.35);
  outline: none;
}

/* Disabled state */
.ecom-button.ecom-button--primary:disabled,
.ecom-button--state-disabled,
.mustang-reset-button.disabled {
  background: rgba(93, 102, 84, 0.08);
  color: var(--wp--preset--color--lichen);
  border-radius: 0;
  cursor: not-allowed;
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--label) !important;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ── Forgot password button ─────────────────────────────────── */

.ecom-input__label-action,
.mustang-forgot-password-link {
  color: var(--wp--preset--color--amber);
  font-family: var(--wp--preset--font-family--sans);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  text-decoration-color: var(--wp--preset--color--amber);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.ecom-input__label-action::after {
  background: var(--wp--preset--color--amber) !important;
}

.ecom-input__label-action:hover,
.mustang-forgot-password-link:hover {
  color: var(--wp--preset--color--ink);
  background: none;
}

.ecom-input__label-action:hover::after {
  background: var(--wp--preset--color--ink) !important;
}

/* ── Cross-nav links (Create account / Sign in) ─────────────── */

.ecom-form__link,
.mustang-signup-link {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body) !important;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--wp--preset--color--amber) !important;
  background: transparent;
  border: none;
  text-decoration: none;
}

.ecom-form__link:hover,
.mustang-signup-link:hover {
  color: var(--wp--preset--color--ink) !important;
  background: transparent;
}

/* ── Error / validation ─────────────────────────────────────── */

.ecom-input--error,
.mustang-field-error,
.mustang-error-feedback-text {
  color: var(--wp--preset--color--clay);
  font-family: var(--wp--preset--font-family--sans);
}

.ecom-input.ecom-input--error,
.mustang-input-container.invalid {
  border-color: var(--wp--preset--color--clay) !important;
}

.ecom-input.ecom-input--error:focus {
  border-color: var(--wp--preset--color--clay) !important;
  box-shadow: 0 0 0 2px rgba(143, 94, 84, 0.12);
}

.mustang-error-message {
  background: rgba(143, 94, 84, 0.06);
  border-color: rgba(143, 94, 84, 0.25);
  color: var(--wp--preset--color--clay);
  font-family: var(--wp--preset--font-family--sans);
  border-radius: 0;
}

/* ── Success states ─────────────────────────────────────────── */

.mustang-success-feedback-text,
.mustang-feedback-text {
  color: var(--wp--preset--color--lichen);
  font-family: var(--wp--preset--font-family--sans);
}

.mustang-success-message {
  background: rgba(93, 102, 84, 0.06);
  border-color: rgba(93, 102, 84, 0.25);
  color: var(--wp--preset--color--lichen);
  font-family: var(--wp--preset--font-family--sans);
  border-radius: 0;
}

/* ── Back button ────────────────────────────────────────────── */

.mustang-back-button-bg {
  border-radius: 0;
  background: var(--wp--preset--color--paper);
  border-color: var(--wp--custom--lichen--rule);
}

/* ── Required indicator ─────────────────────────────────────── */

.ecom-input__asterisk {
  color: var(--wp--preset--color--clay);
}

/* ── Logout container ───────────────────────────────────────── */

.mustang-customer-logout .mustang-logout-container {
  background: var(--wp--preset--color--paper);
  border-radius: 0;
  box-shadow: none;
  border: 1px solid var(--wp--custom--lichen--rule);
  font-family: var(--wp--preset--font-family--sans);
}

.mustang-customer-logout .mustang-logout-container::before {
  font-family: var(--wp--preset--font-family--sans);
  color: var(--wp--preset--color--lichen);
  font-size: var(--wp--preset--font-size--body);
}

.mustang-customer-logout .mustang-logout-button {
  background: var(--wp--preset--color--ink);
  border-radius: 0;
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--wp--preset--color--linen);
}

.mustang-customer-logout .mustang-logout-button:hover {
  background: var(--wp--preset--color--lichen);
  transform: none;
}

/* ============================================================
   STICKY FOOTER
   Keeps the footer pinned to the bottom of the viewport on
   short-content pages (sign-in, sign-up, etc.)
============================================================ */

.wp-site-blocks {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.wp-site-blocks > main {
  flex: 1;
}

/* ============================================================
   ACCOUNT REGISTRATION — FORM FIXES
   The plugin renders the error notice as the first DOM child
   of the form (before the header). Use flex ordering to:
   1. Push the header to the top (order: -1)
   2. Push the error notice to after the fields (order: 10)
   3. Keep the footer last (order: 20)
   This makes errors appear inline — between the fields and
   the submit button — rather than at the top of the card.
============================================================ */

.ecom-account-container .ecom-form--card > .ecom-form__header {
  order: -1;
}

/* Notice: render after the input fields, before the button */
.ecom-account-container .ecom-form--card > .ecom-notice {
  order: 10;
  width: 100%;
  margin-top: 8px;
  margin-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}

/* Footer: always last */
.ecom-account-container .ecom-form--card > .ecom-form__footer {
  order: 20;
  margin-top: 16px;
}

/* Secondary link (Create account / Sign in) renders after the primary CTA */
.ecom-account-container .ecom-form--card > .ecom-form__footer-link {
  order: 21;
}

/* Zero out the plugin's 28px margin-bottom on the field group so error text
   sits 8px below the last field (from .ecom-notice margin-top) rather than 36px.
   Footer margin-top: 16px handles the button gap when no error is shown. */
.ecom-account-container .ecom-input__field-group {
  margin-bottom: 0;
}

/* Back button — strip the WordPress global button background/border
   so it renders as a bare icon, not a gray box */
.ecom-account-container .ecom-form__header--with-back > button:first-child {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--wp--preset--color--lichen);
}

.ecom-account-container .ecom-form__header--with-back > button:first-child:hover {
  background: transparent !important;
  color: var(--wp--preset--color--ink);
}

/* ── Password requirements — brand treatment ────────────────
   Replace the generic bullet list with Avenir small-caps
   label + en-dash items in Lichen. A thin rule separates
   the requirements from the header area above.
──────────────────────────────────────────────────────────── */

.ecom-account__password-requirements {
  font-family: var(--wp--preset--font-family--sans);
  width: 100%;
  margin-bottom: 20px !important;
  border-top: 1px solid var(--wp--custom--lichen--rule);
  padding-top: 14px;
}

.ecom-account__password-requirements-title {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--label) !important;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--wp--preset--color--lichen);
  margin: 0 0 10px 0 !important;
}

.ecom-account__password-requirements-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ecom-account__password-requirements-list li {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body-sm);
  font-weight: 300;
  color: var(--wp--preset--color--lichen);
  padding-left: 16px;
  position: relative;
  line-height: 1.5;
}

.ecom-account__password-requirements-list li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--wp--preset--color--amber);
  font-weight: 400;
}

/* ── Error notice — calm, brand-consistent treatment ─────────
   The plugin's notice uses a red CSS variable and an icon SVG.
   Override both: Clay color, no icon, thin top rule. Errors
   should inform — not alarm.
──────────────────────────────────────────────────────────── */

.ecom-account-container .ecom-form--card > .ecom-notice[data-status="error"] {
  color: var(--wp--preset--color--clay) !important;
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body-sm);
  font-weight: 400;
  background: transparent;
  border-bottom: 1px solid rgba(143, 94, 84, 0.2);
  padding: 0 0 16px;
}

.ecom-account-container .ecom-notice[data-status="error"] .ecom-notice-icon {
  display: none;
}

.ecom-account-container .ecom-notice[data-status="error"] .ecom-notice-text {
  font-family: var(--wp--preset--font-family--sans);
  display: block;
  text-align: center;
}

/* ── Password requirements — staggered entrance ──────────────
   Items arrive one by one with a decelerated ease. Not
   announced — just there when you look.
──────────────────────────────────────────────────────────── */

@keyframes lnl-req-in {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0);   }
}

.ecom-account__password-requirements-list li {
  animation: lnl-req-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
  opacity: 0;
}

.ecom-account__password-requirements-list li:nth-child(1) { animation-delay: 0.10s; }
.ecom-account__password-requirements-list li:nth-child(2) { animation-delay: 0.16s; }
.ecom-account__password-requirements-list li:nth-child(3) { animation-delay: 0.22s; }
.ecom-account__password-requirements-list li:nth-child(4) { animation-delay: 0.28s; }
.ecom-account__password-requirements-list li:nth-child(5) { animation-delay: 0.34s; }

@media (prefers-reduced-motion: reduce) {
  .ecom-account__password-requirements-list li {
    animation: none;
    opacity: 1;
  }
}

/* ============================================================
   ACCOUNT — FORM + INPUT OVERRIDES
   Closes CSS gaps where WPE Commerce plugin defaults bleed
   through: card rounding, white background, purple focus ring,
   generic label weight.
============================================================ */

/* ── Card shell ─────────────────────────────────────────────────
   Plugin default: border-radius: 12px; background: #fff; no border.
   Sharp corners, Paper bg, thin Lichen rule border.
──────────────────────────────────────────────────────────── */

.ecom-form--card {
  border-radius: 0;
  background: var(--wp--preset--color--paper);
  border: 1px solid var(--wp--custom--lichen--rule);
  box-shadow: none;
  padding: 48px;
}

@media (max-width: 520px) {
  .ecom-form--card {
    padding: 32px 24px;
    border-left: none;
    border-right: none;
  }
}

/* ── Input fields ───────────────────────────────────────────────
   Plugin default: border-radius: 4px; purple focus ring; white bg.
──────────────────────────────────────────────────────────── */

.ecom-account-container .ecom-input {
  border-radius: 0;
  border-color: rgba(93, 102, 84, 0.3);
  background-color: var(--wp--preset--color--paper);
  color: var(--wp--preset--color--ink);
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body);
  font-weight: 300;
}

.ecom-account-container .ecom-input:focus {
  border-color: var(--wp--preset--color--amber);
  box-shadow: 0 0 0 2px rgba(194, 138, 82, 0.12);
  outline: none;
}

/* Suppress plugin's green valid state */
.ecom-account-container .ecom-input--valid,
.ecom-account-container .ecom-input--valid:focus {
  border-color: rgba(93, 102, 84, 0.4);
  box-shadow: none;
}

/* ── Field labels ───────────────────────────────────────────────
   Plugin default: 14px, weight 600.
   Brand treatment: Avenir small-caps (label scale), Lichen.
──────────────────────────────────────────────────────────── */

.ecom-account-container .ecom-input__label {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--wp--preset--color--lichen);
}

/* ── Form title (h2 inside card) ────────────────────────────────
   Baskerville, editorial weight, proper bottom spacing.
──────────────────────────────────────────────────────────── */

.ecom-account-container .ecom-form__title {
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--subheadline);
  font-weight: 400;
  color: var(--wp--preset--color--ink);
  line-height: 1.2;
  margin-bottom: var(--wp--preset--spacing--m);
}

/* ── Primary button ─────────────────────────────────────────────
   Ensure no border-radius from plugin defaults.
──────────────────────────────────────────────────────────── */

.ecom-account-container .ecom-button,
.ecom-account-container .ecom-button--primary {
  border-radius: 0;
}

/* ── Password show/hide toggle ──────────────────────────────────
   Plugin default is likely a dark icon color.
──────────────────────────────────────────────────────────── */

.ecom-account-container .ecom-input__toggle-visibility {
  color: var(--wp--preset--color--lichen);
}

.ecom-account-container .ecom-input__toggle-visibility:hover {
  color: var(--wp--preset--color--ink);
}

/* ============================================================
   ACCOUNT — LOGGED-IN (Details / Addresses / Orders tabs)
   Overrides WPE Commerce plugin defaults to match brand.
   Plugin CSS lives in wpe-commerce/build/; never edit there.
============================================================ */

/* ── Account page h1 ────────────────────────────────────────
   The post-title block defaults to subheadline (22px) globally.
   Scope to the account page via :has() on the parent. */

body:not(.home) .wp-site-blocks > main:has(.ecom-account-container) {
  margin-top: 0;
  padding-top: var(--wp--preset--spacing--xl);
  padding-bottom: var(--wp--preset--spacing--xl);
}

main:has(.ecom-account-container) .wp-block-post-title {
  font-size: var(--wp--preset--font-size--hero);
  padding-bottom: var(--wp--preset--spacing--m);
  border-bottom: 1px solid var(--wp--custom--lichen--rule);
  margin-bottom: 0;
}

/* ── Tab bar ────────────────────────────────────────────────── */

.ecom-account {
  border-bottom-color: var(--wp--custom--lichen--rule);
  margin-top: var(--wp--preset--spacing--m);
}

/* ── Tabs (inactive) ────────────────────────────────────────── */

.ecom-account__tab {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 300;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--wp--preset--color--lichen);
  padding: 12px 20px;
}

.ecom-account__tab:hover {
  background-color: rgba(93, 102, 84, 0.05);
}

/* ── Active tab ─────────────────────────────────────────────── */

.ecom-account__tab--active {
  color: var(--wp--preset--color--ink);
  font-weight: 500;
  border-bottom-color: var(--wp--preset--color--amber);
}

/* ── User name + logout area ────────────────────────────────── */

.ecom-account__user-status {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body-sm);
  font-weight: 300;
  color: var(--wp--preset--color--lichen);
}

/* ── Content card ───────────────────────────────────────────── */

.ecom-account__inner {
  background-color: var(--wp--preset--color--paper);
  border-color: var(--wp--custom--lichen--rule);
  border-radius: 0;
  padding: 32px 40px;
}

/* ── Section headings — hidden (tabs already label the section) */

.ecom-account__details-title,
.ecom-account__addresses-title,
.ecom-account__orders-title {
  display: none;
}

/* ── Details body text ──────────────────────────────────────── */

.ecom-account__details-message,
.ecom-account__details-data,
.ecom-account__addresses-message,
.ecom-account__addresses-data,
.ecom-account__orders-message {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body);
  font-weight: 300;
  color: var(--wp--preset--color--ink);
}

/* ── Hover states on editable rows ─────────────────────────── */

.ecom-account__details-contact:hover,
.ecom-account__edit-password:hover,
.ecom-account__address:hover {
  background-color: var(--wp--preset--color--linen);
}

/* ── Orders table structure ─────────────────────────────────── */

.ecom-account__orders-table {
  border-color: var(--wp--custom--lichen--rule);
  border-radius: 0;
}

.ecom-account__orders-header {
  background-color: var(--wp--preset--color--linen);
}

.ecom-account__orders-header-item,
.ecom-account__orders-header-order,
.ecom-account__orders-header-date,
.ecom-account__orders-header-price,
.ecom-account__orders-header-button {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--wp--preset--color--lichen);
  border-color: var(--wp--custom--lichen--rule);
}

.ecom-account__orders-body-item,
.ecom-account__orders-body-date,
.ecom-account__orders-body-price,
.ecom-account__orders-body-button {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body);
  font-weight: 300;
  color: var(--wp--preset--color--ink);
  border-color: var(--wp--custom--lichen--rule);
}

.ecom-account__orders-currency {
  color: var(--wp--preset--color--lichen);
  font-family: var(--wp--preset--font-family--sans);
}

/* ── Order status badges ────────────────────────────────────── */

/* Neutral / cancelled / refunded */
.ecom-account__orders-badge--draft,
.ecom-account__orders-badge--cancelled,
.ecom-account__orders-badge--refunded,
.ecom-account__orders-badge--partially-refunded {
  background: rgba(93, 102, 84, 0.08);
  color: var(--wp--preset--color--lichen);
  border-color: rgba(93, 102, 84, 0.2);
}

/* Pending / awaiting — warm amber signal */
.ecom-account__orders-badge--awaiting-payment,
.ecom-account__orders-badge--awaiting-fulfillment,
.ecom-account__orders-badge--awaiting-pickup,
.ecom-account__orders-badge--awaiting-shipment,
.ecom-account__orders-badge--manual-verification-required {
  background: rgba(194, 138, 82, 0.1);
  color: #8B6035;
  border-color: rgba(194, 138, 82, 0.3);
}

/* Declined / disputed — clay signal */
.ecom-account__orders-badge--declined,
.ecom-account__orders-badge--disputed {
  background: rgba(143, 94, 84, 0.08);
  color: var(--wp--preset--color--clay);
  border-color: rgba(143, 94, 84, 0.25);
}

/* Completed / shipped — lichen (positive, understated) */
.ecom-account__orders-badge--completed,
.ecom-account__orders-badge--shipped {
  background: rgba(93, 102, 84, 0.1);
  color: var(--wp--preset--color--lichen);
  border-color: rgba(93, 102, 84, 0.25);
}

/* ── Addresses default badge ────────────────────────────────── */

.ecom-account__addresses-default-badge {
  background-color: rgba(194, 138, 82, 0.1);
  border-color: rgba(194, 138, 82, 0.3);
  color: #8B6035;
  border-radius: 0;
}

/* ── Loading spinner ────────────────────────────────────────── */

.ecom-account__orders-loading-spinner {
  color: var(--wp--preset--color--lichen);
}

.ecom-account__orders-loading-text {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body-sm);
  font-weight: 300;
  color: var(--wp--preset--color--lichen);
}

/* ── Tab focus ring — keyboard-only, amber ──────────────────
   Remove the generic blue box-shadow on mouse click; keep
   a visible indicator for keyboard navigation only. */

.ecom-account__tab:focus {
  outline: none;
  box-shadow: none;
}

.ecom-account__tab:focus-visible {
  outline: 2px solid rgba(194, 138, 82, 0.5);
  outline-offset: -2px;
  box-shadow: none;
}

/* ── Orders empty state (skeleton table + overlay) ──────────
   The empty state renders the column skeleton behind an
   overlay card. Override generic grays with brand palette. */

.ecom-account__orders-empty .ecom-account__orders-header {
  background-color: var(--wp--preset--color--linen);
}

.ecom-account__orders-empty .ecom-account__orders-header th {
  border-color: var(--wp--custom--lichen--rule);
}

.ecom-account__orders-empty .ecom-account__orders-table,
.ecom-account__orders-empty .ecom-account__orders-empty-row {
  background-color: var(--wp--preset--color--paper);
}

.ecom-account__orders-empty .ecom-account__orders-empty-row .ecom-account__orders-body-item {
  background-color: var(--wp--preset--color--paper);
  border-bottom-color: var(--wp--custom--lichen--rule);
}

.ecom-account__orders-empty .ecom-account__orders-empty-rect {
  background: rgba(93, 102, 84, 0.1);
}

/* Overlay card */
.ecom-account__orders-empty-content {
  background: var(--wp--preset--color--paper);
  border-color: var(--wp--custom--lichen--rule);
  border-radius: 0;
}

.ecom-account__orders-empty-title {
  font-family: var(--wp--preset--font-family--serif);
  font-size: 18px;
  font-weight: 400;
  color: var(--wp--preset--color--ink);
}

.ecom-account__orders-empty-message {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body-sm);
  font-weight: 300;
  color: var(--wp--preset--color--lichen);
}

/* ── Addresses empty state ──────────────────────────────────── */

.ecom-account__simple-empty-title {
  font-family: var(--wp--preset--font-family--serif);
  font-weight: 400;
  color: var(--wp--preset--color--ink);
}

.ecom-account__simple-empty-message {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body);
  font-weight: 300;
  color: var(--wp--preset--color--lichen);
}

/* ============================================================
   SINGLE PRODUCT PAGE
   WPE Commerce renders all product detail inside
   .ecom-single-product-container. Body class .single-product
   scopes every override so nothing bleeds into collection pages.
============================================================ */

/* ── Page frame ─────────────────────────────────────────── */

.single-product main.wp-block-group {
  padding-top: var(--wp--preset--spacing--l);
  padding-bottom: var(--wp--preset--spacing--xl);
}

.single-product .ecom-single-product-container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* ── Two-column layout ──────────────────────────────────── */

.single-product .wp-block-columns {
  gap: var(--wp--preset--spacing--xl) !important;
  align-items: flex-start !important;
}

.single-product .wp-block-columns > .wp-block-column:first-child {
  flex-basis: 55% !important;
  flex-grow: 0;
  flex-shrink: 0;
}

.single-product .wp-block-columns > .wp-block-column:last-child {
  flex-basis: 45% !important;
  flex-grow: 0;
  flex-shrink: 1;
}

/* ── Image gallery chrome reset ─────────────────────────── */

.single-product .ecom-image-magnifier {
  border-radius: 0;
  border: none;
}

.single-product .wp-block-woocommerce-product-image-gallery,
.single-product .product-details__gallery,
.single-product .product-gallery__container {
  margin-top: 0;
  padding-top: 0;
}

.single-product .product-gallery__container {
  --product-gallery-image-border-radius: 0;
}

.single-product .product-gallery__thumbnail {
  border-radius: 0;
  border-color: transparent !important;
}

.single-product .product-gallery__thumbnail--active {
  border-color: var(--wp--preset--color--amber) !important;
}

/* ── Collection eyebrow ─────────────────────────────────── */

.single-product .ecom-heading-group__label {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body-sm);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--lichen);
  display: block;
  margin-bottom: var(--wp--preset--spacing--xs);
}

/* ── Product title ──────────────────────────────────────── */

.single-product .ecom-product-title__pdp {
  font-size: var(--wp--preset--font-size--subheadline);
  font-weight: 400;
  color: var(--wp--preset--color--ink);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: var(--wp--preset--spacing--xs);
}

/* ── Price ──────────────────────────────────────────────── */

.single-product .ecom-product-pricing {
  margin-bottom: var(--wp--preset--spacing--m);
}

.single-product .ecom-product-prices {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.single-product .ecom-product-prices__price {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--price);
  font-weight: 300;
  color: var(--wp--preset--color--ink);
  letter-spacing: 0.02em;
}

/* ── Quantity + ATC area ────────────────────────────────── */

.single-product .ecom-product-buy-button {
  border-top: 1px solid var(--wp--custom--lichen--rule);
  padding-top: var(--wp--preset--spacing--s);
}

.single-product .ecom-quantity__label {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--lichen);
  margin-top: 0;
}

.single-product .ecom-quantity {
  margin-bottom: 0 !important;
}

.single-product .ecom-quantity__button,
.single-product .ecom-quantity__input {
  border-radius: 0 !important;
  border-color: var(--wp--custom--lichen--rule) !important;
  color: var(--wp--preset--color--ink);
  background: transparent;
}

.single-product .ecom-quantity__button:hover {
  border-color: var(--wp--preset--color--lichen) !important;
}

/* ── Add to Cart button ─────────────────────────────────── */

.single-product .ecom-button--primary {
  background-color: var(--wp--preset--color--amber) !important;
  color: var(--wp--preset--color--paper) !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 400;
  padding: 14px 32px;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.single-product .ecom-button--primary:hover {
  background-color: var(--wp--preset--color--ink) !important;
  color: var(--wp--preset--color--linen) !important;
}

/* ── Product description ─────────────────────────────────── */

.single-product .ecom-product-description {
  margin-top: var(--wp--preset--spacing--s);
  padding-top: var(--wp--preset--spacing--m);
  border-top: 1px solid var(--wp--custom--lichen--rule);
}

.single-product .ecom-product-description p,
.single-product .ecom-product-description__full p {
  font-family: var(--wp--preset--font-family--serif);
  font-size: 15px;
  font-weight: 400;
  color: var(--wp--preset--color--ink);
  line-height: 1.85;
  letter-spacing: 0.01em;
  margin: 0;
}

/* ── Hide empty schema/tracking shell ───────────────────── */

.single-product .ecom-storefront-items-wrapper {
  display: none;
}

/* ── Responsive ─────────────────────────────────────────── */

@media (max-width: 781px) {
  .single-product main.wp-block-group {
    padding-top: var(--wp--preset--spacing--m);
    padding-bottom: var(--wp--preset--spacing--l);
  }

  .single-product .wp-block-columns {
    flex-direction: column !important;
    gap: var(--wp--preset--spacing--m) !important;
  }

  .single-product .wp-block-columns > .wp-block-column:first-child,
  .single-product .wp-block-columns > .wp-block-column:last-child {
    flex-basis: 100% !important;
    width: 100%;
  }
}

/* ── Breadcrumb ──────────────────────────────────────────── */

.single-product .wp-block-woocommerce-breadcrumbs {
  font-size: var(--wp--preset--font-size--label) !important;
  letter-spacing: 0.12em !important;
  color: var(--wp--preset--color--lichen);
}

.single-product .wp-block-woocommerce-breadcrumbs a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.single-product .wp-block-woocommerce-breadcrumbs a:hover {
  color: var(--wp--preset--color--ink);
}

/* ── Variant group labels ────────────────────────────────── */

.single-product .ecom-product-buy-button__variant-group {
  border: none;
  padding: 0;
  margin: 0 0 var(--wp--preset--spacing--m) 0;
  min-inline-size: 0;
}

.single-product .ecom-product-buy-button__variant-group legend {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--lichen);
  padding: 0;
  margin-bottom: var(--wp--preset--spacing--xs);
  float: left;
  width: 100%;
}

.single-product .ecom-product-buy-button__option-label-value {
  font-weight: 300 !important;
  text-transform: none;
  letter-spacing: 0;
  color: var(--wp--preset--color--ink);
}

/* ── Variant button grid ─────────────────────────────────── */

.single-product .ecom-product-buy-button__variants {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: var(--wp--preset--spacing--xs) !important;
}

.single-product .ecom-product-buy-button__variant {
  border: 1px solid var(--wp--custom--lichen--rule) !important;
  background: transparent !important;
  border-radius: 0 !important;
  font-family: var(--wp--preset--font-family--sans) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--ink) !important;
  min-height: 40px !important;
  min-width: 48px !important;
  width: auto !important;
  flex: 0 0 auto !important;
  padding: 8px 16px !important;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.single-product .ecom-product-buy-button__variant:hover:not([disabled]):not(.ecom-product-buy-button__variant--is-selected) {
  border-color: var(--wp--preset--color--lichen) !important;
}

.single-product .ecom-product-buy-button__variant--is-selected {
  background-color: var(--wp--preset--color--ink) !important;
  border-color: var(--wp--preset--color--ink) !important;
  color: var(--wp--preset--color--linen) !important;
}

.single-product .ecom-product-buy-button__variant[disabled] {
  color: var(--wp--preset--color--lichen) !important;
  opacity: 0.4;
  text-decoration: line-through;
  cursor: not-allowed;
}

/* ── Sale price differentiation ─────────────────────────── */

.single-product .ecom-product-prices__label {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--lichen);
  display: block;
  margin-bottom: 4px;
}

.single-product .ecom-product-prices__price--sale {
  color: var(--wp--preset--color--lichen) !important;
}

.single-product .ecom-product-prices:has(.ecom-product-prices__price--sale) .ecom-product-prices__price:not(.ecom-product-prices__price--sale) {
  color: var(--wp--preset--color--lichen) !important;
  opacity: 0.4;
  font-size: var(--wp--preset--font-size--body) !important;
  font-weight: 300;
  text-decoration: line-through;
}

/* ── Quantity + ATC layout ───────────────────────────────── */

.single-product .ecom-product-buy-button__quantity-and-button {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch;
  gap: 12px;
}

.single-product .ecom-product-buy-button__add-button-wrapper {
  width: 100%;
  margin-top: 0 !important;
}

.single-product .ecom-button--primary {
  width: 100% !important;
}

/* ── Missing selection validation ───────────────────────── */

.single-product .ecom-product-buy-button__missing-selection-text {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body-sm);
  color: var(--wp--preset--color--lichen);
  letter-spacing: 0.04em;
  margin-top: 8px;
  display: block;
}

/* ── Product meta block ──────────────────────────────────── */

.single-product .wp-block-woocommerce-product-meta {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--lichen);
  opacity: 0.75;
}

.single-product .wp-block-woocommerce-product-meta a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.single-product .wp-block-woocommerce-product-meta a:hover {
  color: var(--wp--preset--color--ink);
  opacity: 1;
}

/* ── Image gallery: suppress magnifier chrome ───────────── */

.single-product .ecom-magnify-chip {
  display: none;
}

/* ── Product details tabs ────────────────────────────────── */

.single-product .wp-block-woocommerce-product-details {
  margin-top: var(--wp--preset--spacing--xl);
}

.single-product .wp-block-woocommerce-product-details ul.tabs.wc-tabs {
  list-style: none;
  padding: 0;
  margin: 0 0 0 0;
  display: flex;
  border-bottom: 1px solid var(--wp--custom--lichen--rule);
  overflow: visible;
}

.single-product .wp-block-woocommerce-product-details ul.tabs.wc-tabs::before,
.single-product .wp-block-woocommerce-product-details ul.tabs.wc-tabs::after {
  display: none;
}

.single-product .wp-block-woocommerce-product-details ul.tabs.wc-tabs li {
  background: transparent;
  border: none;
  border-radius: 0;
  margin: 0;
  padding: 0;
  position: relative;
  bottom: -1px;
}

.single-product .wp-block-woocommerce-product-details ul.tabs.wc-tabs li::before,
.single-product .wp-block-woocommerce-product-details ul.tabs.wc-tabs li::after {
  display: none;
}

.single-product .wp-block-woocommerce-product-details ul.tabs.wc-tabs li a {
  display: inline-block;
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--lichen);
  text-decoration: none;
  text-shadow: none;
  padding: 16px 0;
  margin-right: 32px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.single-product .wp-block-woocommerce-product-details ul.tabs.wc-tabs li a:hover {
  color: var(--wp--preset--color--ink);
  text-decoration: none;
}

.single-product .wp-block-woocommerce-product-details ul.tabs.wc-tabs li.active a {
  color: var(--wp--preset--color--ink);
  border-bottom-color: var(--wp--preset--color--ink);
}

.single-product .wp-block-woocommerce-product-details .panel {
  padding-top: var(--wp--preset--spacing--m);
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body);
  font-weight: 300;
  color: var(--wp--preset--color--lichen);
  line-height: 1.75;
}

.single-product .wp-block-woocommerce-product-details .panel p {
  margin: 0 0 var(--wp--preset--spacing--s) 0;
  max-width: 65ch;
}

.single-product .wp-block-woocommerce-product-details .panel table {
  border-collapse: collapse;
  width: 100%;
}

.single-product .wp-block-woocommerce-product-details .panel table th {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--lichen);
  font-weight: 400;
  padding: 12px var(--wp--preset--spacing--m) 12px 0;
  border-bottom: 1px solid var(--wp--custom--lichen--rule);
  text-align: left;
  white-space: nowrap;
}

.single-product .wp-block-woocommerce-product-details .panel table td {
  font-size: var(--wp--preset--font-size--body);
  color: var(--wp--preset--color--ink);
  padding: 12px 0;
  border-bottom: 1px solid var(--wp--custom--lichen--rule);
}

/* ── Page entrance animation ─────────────────────────────── */

@keyframes lnl-pdp-image-breathe {
  from { opacity: 0.7; }
  to   { opacity: 1;   }
}

@keyframes lnl-pdp-info-arrive {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.single-product .wp-block-columns > .wp-block-column:first-child {
  animation: lnl-pdp-image-breathe 0.8s ease-out both;
}

.single-product .wp-block-columns > .wp-block-column:last-child {
  animation: lnl-pdp-info-arrive 0.6s cubic-bezier(0.22, 0.1, 0.36, 1) 0.1s both;
}

@media (prefers-reduced-motion: reduce) {
  .single-product .wp-block-columns > .wp-block-column:first-child,
  .single-product .wp-block-columns > .wp-block-column:last-child {
    animation: none;
  }
}

/* ── Gallery: remove plugin's sticky padding-top ────────── */

.single-product .product-gallery {
  padding-top: 0 !important;
}

/* ── Gallery: thumbnails repositioned to bottom strip ───── */

.single-product .product-gallery__container {
  flex-direction: column !important;
  gap: 12px !important;
}

.single-product .product-gallery__thumbnails {
  flex-direction: row !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  order: 2 !important;
  gap: 8px !important;
  padding-inline: 0 !important;
  scrollbar-width: none !important;
}

.single-product .product-gallery__thumbnails::-webkit-scrollbar {
  display: none;
}

.single-product .product-gallery__thumbnail {
  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
  height: 64px !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}

.single-product .product-gallery__thumbnail img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.single-product .product-gallery__frame {
  order: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* ── Label as eyebrow: above product title ──────────────── */

.single-product .ecom-heading-group {
  display: flex;
  flex-direction: column;
}

.single-product .ecom-heading-group__label {
  order: -1;
}

.single-product .ecom-product-title__pdp {
  margin-bottom: var(--wp--preset--spacing--xs) !important;
}

/* ============================================================
   FPO — FOR PLACEMENT ONLY
   Centered label on all image placeholder areas during development.
   Disappears automatically when real photography is wired up:
   – Custom placeholder divs: the div is removed when an <img> renders in PHP
   – Hero cover: hidden when .wp-block-cover__image-background is present
============================================================ */

.str-placeholder,
.pc-card__image-placeholder,
.lnl-sh-hero__img-placeholder {
  position: relative;
}

.str-placeholder::after,
.pc-card__image-placeholder::after,
.lnl-sh-hero__img-placeholder::after,
.lnl-cat-tile__bg::after {
  content: 'FPO';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--wp--preset--font-family--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(28, 24, 20, 0.5);
  pointer-events: none;
  white-space: nowrap;
}

/* Shop category tiles (shop page) — placeholder background + FPO label.
   Background and label vanish automatically when an <img> is placed inside the tile. */
.lnl-sct__tile:not(:has(img)) {
  background: #C4B8A7;
}

.lnl-sct__tile--dark:not(:has(img)) {
  background: #8A7E78;
}

.lnl-sct__tile::after {
  content: 'FPO';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--wp--preset--font-family--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(28, 24, 20, 0.45);
  pointer-events: none;
  white-space: nowrap;
}

.lnl-sct__tile--dark::after {
  color: rgba(250, 248, 244, 0.55);
}

/* Hero: pin to top-right clear zone so it doesn't land on the text block */
.lnl-hero:not(:has(.wp-block-cover__image-background)) .wp-block-cover__background::after {
  content: 'FPO';
  position: absolute;
  top: 15%;
  right: 10%;
  left: auto;
  transform: none;
  font-family: var(--wp--preset--font-family--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(28, 24, 20, 0.5);
  pointer-events: none;
  white-space: nowrap;
}