/**
 * Loomify Editorial Theme Layer — "Premium Editorial Product Studio".
 *
 * Visual-only alignment of the WooCommerce storefront (Twenty Twenty-Five parent)
 * with the Loomify Next.js marketing site. Enqueued on the front end only
 * (see functions.php), so wp-admin / the block editor are never touched.
 *
 * Scope is strictly presentational — Typography, Color, Spacing, Buttons,
 * Product Cards, Header, Footer, Forms. No markup, template logic, cart,
 * checkout, pricing, or authentication behaviour is changed; WooCommerce keeps
 * its own DOM and its own class names, we only paint over them.
 *
 * Tokens mirror the marketing design system (globals.css: Playfair Display +
 * Inter, warm paper #faf9f6, near-black ink) with the exact palette handed off
 * for this task.
 */

/* ------------------------------------------------------------------ */
/* 1. Design tokens                                                     */
/* ------------------------------------------------------------------ */
:root {
  /* Typography */
  --lm-font-display: "Playfair Display", "Cormorant Garamond", Georgia,
    "Times New Roman", serif;
  --lm-font-body: "Inter", "Work Sans", "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  /* Color system */
  --lm-bg: #faf9f6; /* Primary background */
  --lm-bg-2: #e9e8e5; /* Warm gray (secondary background) */
  --lm-card: #ffffff; /* Card background */
  --lm-text: #171717; /* Text primary */
  --lm-text-2: #6b6b6b; /* Text secondary */
  --lm-border: #d8d5cf; /* Border */
  --lm-accent: #171717; /* Accent / primary button */
  --lm-dark: #171717; /* Footer surface */
  --lm-on-dark: #f4f1ea; /* Warm white on dark */

  /* Spacing scale (8pt-ish, editorial generous whitespace) */
  --lm-space-1: 0.5rem;
  --lm-space-2: 1rem;
  --lm-space-3: 1.5rem;
  --lm-space-4: 2rem;
  --lm-space-5: 3rem;
  --lm-space-6: 4rem;
  --lm-space-7: 6rem;

  /* Component metrics */
  --lm-btn-h: 60px; /* Primary button height (56–64) */
  --lm-input-h: 52px; /* Form input height (48–56) */
  --lm-radius: 2px; /* "0 或轻微圆角" */
  --lm-transition: 0.3s ease;

  /* Shared chrome (Navbar.tsx / Footer.tsx; values from src/app/globals.css).
     The *-rgb triplets exist because the reference uses those colours with
     Tailwind alpha modifiers (bg-paper/80, border-hairline/30, text-stone/60). */
  --lm-ink-2: #1a1c1a; /* --color-obsidian-2 — wordmark / utility icons */
  --lm-stone: #454844; /* --color-stone — navigation link, rest state */
  --lm-paper-rgb: 250, 249, 246; /* --color-paper #faf9f6 */
  --lm-hairline-rgb: 197, 199, 194; /* --color-hairline #c5c7c2 */
  --lm-on-dark-rgb: 244, 241, 234; /* --lm-on-dark #f4f1ea */
  --lm-header-h: 68px; /* Figma header 1280×68 */
  --lm-shell-max: 1440px; /* Navbar/Footer container max-width */
}

/* ------------------------------------------------------------------ */
/* 2. Base typography + color                                          */
/* ------------------------------------------------------------------ */
body.wp-site-blocks,
body {
  background-color: var(--lm-bg);
  color: var(--lm-text);
  font-family: var(--lm-font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.entry-title,
.product_title,
.woocommerce-loop-product__title,
.wc-block-components-product-name {
  font-family: var(--lm-font-display);
  color: var(--lm-text);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

p,
li,
label,
input,
select,
textarea,
button,
.woocommerce,
.wc-block-components-product-price {
  font-family: var(--lm-font-body);
}

a {
  color: var(--lm-text);
  text-decoration: none;
  transition: color var(--lm-transition);
}
a:hover {
  color: var(--lm-accent);
}

/* Editorial "eyebrow" / meta label utility. */
.lm-eyebrow {
  font-family: var(--lm-font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--lm-text-2);
}

/* ------------------------------------------------------------------ */
/* 3. Buttons — black solid primary / outline secondary               */
/* ------------------------------------------------------------------ */
.wp-element-button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button,
.wc-block-components-button,
button.single_add_to_cart_button,
.woocommerce-checkout #place_order,
input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--lm-btn-h);
  padding: 0 2.25rem;
  background-color: var(--lm-accent) !important;
  color: #ffffff !important;
  border: 1px solid var(--lm-accent) !important;
  border-radius: var(--lm-radius) !important;
  font-family: var(--lm-font-body);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--lm-transition), color var(--lm-transition),
    border-color var(--lm-transition);
}
.wp-element-button:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .button:hover,
.wc-block-components-button:hover,
button.single_add_to_cart_button:hover,
.woocommerce-checkout #place_order:hover,
input[type="submit"]:hover {
  background-color: #333333 !important;
  border-color: #333333 !important;
  color: #ffffff !important;
}

/* Secondary / ghost button (outline). */
.woocommerce .button.wc-backward,
.woocommerce a.button.alt.wc-forward,
.woocommerce .button.wp-element-button.checkout-button,
.is-style-outline .wp-block-button__link,
.woocommerce a.added_to_cart {
  background-color: transparent !important;
  color: var(--lm-accent) !important;
  border: 1px solid var(--lm-accent) !important;
}
.woocommerce .button.wc-backward:hover,
.woocommerce a.added_to_cart:hover,
.is-style-outline .wp-block-button__link:hover {
  background-color: var(--lm-accent) !important;
  color: #ffffff !important;
}

/* Add-to-cart on the single product page: full editorial 64px CTA. */
.single-product button.single_add_to_cart_button,
.single-product .single_add_to_cart_button.button {
  min-height: 64px;
  width: 100%;
  max-width: 26rem;
}

/* ------------------------------------------------------------------ */
/* 4. Forms — unified inputs                                           */
/* ------------------------------------------------------------------ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="url"],
select,
textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.select2-container .select2-selection,
.wc-block-components-text-input input {
  min-height: var(--lm-input-h);
  padding: 0.75rem 1rem;
  background-color: var(--lm-card);
  color: var(--lm-text);
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius);
  font-family: var(--lm-font-body);
  font-size: 0.9375rem;
  line-height: 1.4;
  box-shadow: none;
  transition: border-color var(--lm-transition), box-shadow var(--lm-transition);
}
textarea {
  min-height: 8rem;
}
input:focus,
select:focus,
textarea:focus,
.woocommerce form .form-row input.input-text:focus,
.wc-block-components-text-input input:focus {
  outline: none;
  /* Remove default Woo/WordPress blue focus. */
  border-color: var(--lm-accent);
  box-shadow: 0 0 0 1px var(--lm-accent);
}
label,
.woocommerce form .form-row label,
.wc-block-components-checkout-step__title {
  color: var(--lm-text);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ------------------------------------------------------------------ */
/* 5. Product archive — editorial product grid                        */
/* ------------------------------------------------------------------ */
.woocommerce ul.products,
.woocommerce-page ul.products,
ul.products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--lm-space-5) var(--lm-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.woocommerce ul.products li.product,
ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  background: transparent;
  border: 0;
  box-shadow: none;
  text-align: left;
}

/* Image: fixed 4:5 editorial frame with subtle hover zoom. */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img {
  aspect-ratio: 4 / 5;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
  margin: 0 0 var(--lm-space-3);
  background-color: var(--lm-bg-2);
  border-radius: var(--lm-radius);
  transition: transform 0.5s ease;
}
.woocommerce ul.products li.product a {
  display: block;
  overflow: hidden;
}
.woocommerce ul.products li.product:hover a img {
  transform: scale(1.03);
}

/* Title: Playfair; price: small sans; meta muted. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  padding: 0;
  margin: 0 0 var(--lm-space-1);
  font-family: var(--lm-font-display);
  font-size: 1.1875rem;
  font-weight: 500;
  color: var(--lm-text);
}
.woocommerce ul.products li.product .price {
  color: var(--lm-text-2);
  font-family: var(--lm-font-body);
  font-size: 0.875rem;
  font-weight: 500;
}
.woocommerce ul.products li.product .price del {
  color: var(--lm-text-2);
  opacity: 0.6;
}
.woocommerce ul.products li.product .price ins {
  text-decoration: none;
  color: var(--lm-text);
}

/* Remove default shop chrome: sale badge, card shadow, borders. */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
  display: none !important;
}
.woocommerce ul.products li.product .button {
  margin-top: var(--lm-space-2);
}

/* ------------------------------------------------------------------ */
/* 6. Single product — gallery left / info right                      */
/* ------------------------------------------------------------------ */
.single-product.woocommerce div.product,
.single-product .wp-block-woocommerce-product-image-gallery + .summary,
.single-product div.product {
  background-color: var(--lm-bg);
}
.single-product.woocommerce div.product {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--lm-space-6);
  align-items: start;
}
.single-product div.product .woocommerce-product-gallery {
  margin: 0;
  width: 100% !important;
}
.single-product div.product .woocommerce-product-gallery img {
  border-radius: var(--lm-radius);
  background-color: var(--lm-bg-2);
}
.single-product div.product .summary.entry-summary {
  margin: 0;
  width: 100% !important;
}
.single-product .product_title {
  font-family: var(--lm-font-display);
  font-size: clamp(2rem, 3vw, 2.75rem);
  font-weight: 500;
  margin: 0 0 var(--lm-space-2);
}
.single-product .summary .price,
.single-product .summary .woocommerce-Price-amount {
  font-family: var(--lm-font-display);
  font-size: 1.5rem;
  color: var(--lm-text);
}
.single-product .woocommerce-product-details__short-description {
  color: var(--lm-text-2);
  line-height: 1.7;
}

/* Variation swatches — round color chips + outline size buttons.
   Covers the common "Variation Swatches for WooCommerce" markup and native selects. */
.variable-items-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0 1rem;
}
.variable-items-wrapper .variable-item {
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius);
  box-shadow: none;
  transition: border-color var(--lm-transition);
}
.variable-items-wrapper .color-variable-item,
.variable-items-wrapper .color-variable-item .variable-item-span {
  width: 30px;
  height: 30px;
  border-radius: 50%; /* round color swatch */
  overflow: hidden;
}
.variable-items-wrapper .variable-item.selected,
.variable-items-wrapper .variable-item:hover {
  border-color: var(--lm-accent);
  box-shadow: 0 0 0 1px var(--lm-accent);
}
.variable-items-wrapper .button-variable-item {
  min-width: 44px;
  height: 44px;
  padding: 0 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Quantity + native variation select tidy-up. */
.single-product table.variations select {
  min-height: 48px;
}

/* ------------------------------------------------------------------ */
/* 7. Cart & Checkout                                                  */
/* ------------------------------------------------------------------ */
.woocommerce-cart .cart_totals,
.woocommerce-checkout .woocommerce-checkout-review-order,
.wc-block-components-panel,
.woocommerce table.shop_table {
  background-color: var(--lm-card);
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  border-color: var(--lm-border);
  color: var(--lm-text);
}
.woocommerce-cart table.cart img {
  border-radius: var(--lm-radius);
}
.woocommerce .cart-collaterals .cart_totals > h2,
.woocommerce-checkout #order_review_heading,
.woocommerce-billing-fields > h3,
.woocommerce-additional-fields > h3 {
  font-family: var(--lm-font-display);
  font-weight: 500;
}

/* ------------------------------------------------------------------ */
/* 8. Header — shared brand header, aligned to the Next.js Navbar      */
/*    (src/components/layout/Navbar.tsx → Figma Final Handoff 3:646)   */
/*                                                                    */
/*    Two DOM shapes have to be painted. This theme's parts/header.html */
/*    (.lm-header-inner / .lm-brand / .lm-header-utility), and a Site  */
/*    Editor + database override of the same template part, which      */
/*    carries none of the lm-* classes: an anonymous inner group with a */
/*    wp:site-title, the navigation and a customer-account block.      */
/*    Shell, brand typography, navigation and CTA rules are written to */
/*    match both; the lm-* rules only add what the override cannot     */
/*    carry. Exactly one of the two shapes is rendered per request.    */
/* ------------------------------------------------------------------ */
.loomify-site-header {
  --lm-shell-pad: var(--lm-space-3); /* px-6, → lg:px-16 in §10 */
  background-color: rgba(var(--lm-paper-rgb), 0.8);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(var(--lm-hairline-rgb), 0.3);
  padding-block: 0;
}
/* Gutters live on the inner row, so drop the root padding the constrained
   layout would otherwise stack on top of them. */
.loomify-site-header.has-global-padding {
  padding-inline: 0;
}

/* Inner row: max-w-[1440px], 68px tall — 1px of which is the bottom rule.
   `!important` is scoped to max-width, because the constrained layout
   otherwise caps the row at the theme content size (TT5: 645px). */
.loomify-site-header .lm-header-inner,
.loomify-site-header > .wp-block-group:not(.lm-header-inner) {
  max-width: var(--lm-shell-max) !important;
  min-height: calc(var(--lm-header-h) - 1px);
  margin-inline: auto;
  padding-inline: var(--lm-shell-pad);
  gap: var(--lm-space-2);
}

/* Wordmark: Playfair Display Bold 24/31.2, tracking -0.6px, #1a1c1a.
   .lm-brand is this part's static home link; .wp-block-site-title is what the
   database override renders in its place. Both are painted here — but CSS can
   only style the override's title, it cannot correct the title *text*. */
.loomify-site-header .lm-brand,
.loomify-site-header .wp-block-site-title {
  margin: 0;
  font-family: var(--lm-font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 31.2px;
  letter-spacing: -0.6px;
}
.loomify-site-header .lm-brand a,
.loomify-site-header .wp-block-site-title a {
  color: var(--lm-ink-2);
  text-decoration: none;
}

/* Navigation: sans 16/24, gap 32, stone at rest → ink on hover. */
.loomify-site-header .wp-block-navigation {
  font-family: var(--lm-font-body);
  font-size: 1rem;
  gap: var(--lm-space-4);
}
.loomify-site-header .wp-block-navigation a,
.loomify-site-header .wp-block-navigation .wp-block-navigation-item__content {
  padding-bottom: 6px;
  border-bottom: 2px solid transparent;
  color: var(--lm-stone);
  font-weight: 400;
  line-height: 1.5;
  /* A link may never break across two lines — that would grow the 68px row. */
  white-space: nowrap;
  transition: color var(--lm-transition), border-color var(--lm-transition);
}
.loomify-site-header .wp-block-navigation a:hover,
.loomify-site-header .wp-block-navigation .wp-block-navigation-item__content:hover {
  color: var(--lm-text);
}
/* Active item: bold ink + 2px ink underline (Navbar.tsx isActive branch). */
.loomify-site-header .wp-block-navigation .current-menu-item > a,
.loomify-site-header .wp-block-navigation [aria-current="page"] {
  color: var(--lm-text);
  font-weight: 700;
  border-bottom-color: var(--lm-text);
}
.loomify-site-header a:focus-visible,
.loomify-site-header button:focus-visible {
  outline: 2px solid var(--lm-text);
  outline-offset: 2px;
}

/* Right-hand cluster: CTA group, then the icon group 24px further right. */
.loomify-site-header .lm-header-actions {
  gap: 0;
}
.loomify-site-header .wp-block-buttons {
  gap: var(--lm-space-2);
}
/* "Start Designing": solid ink, square corners, 12/16.8 uppercase, tracking
   1.2px, padding 8/24, hover = 80% opacity. Overrides §3, whose colour
   declarations are !important-flagged. */
.loomify-site-header .wp-block-button__link {
  min-height: 0;
  padding: 8px 24px;
  border-radius: 0 !important;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 16.8px;
  letter-spacing: 1.2px;
  transition: opacity var(--lm-transition);
}
.loomify-site-header .wp-block-button__link:hover {
  background-color: var(--lm-accent) !important;
  border-color: var(--lm-accent) !important;
  opacity: 0.8;
}
/* "Get a Quote": the outline twin of the CTA above (Navbar.tsx GET_A_QUOTE_HREF
   → /bulk-orders#bulk-process). Deliberately *not* `is-style-outline`: §3's
   outline rules are written for WooCommerce and their !important hover would
   land accent text on an accent fill here. These rules carry one more class
   than both §3 and the block above, so they win without new !important flags
   beyond the ones §3 already forces us to answer. */
.loomify-site-header .lm-header-quote .wp-block-button__link {
  padding: 9px 25px;
  background-color: transparent !important;
  border: 1px solid var(--lm-accent) !important;
  color: var(--lm-accent) !important;
}
.loomify-site-header .lm-header-quote .wp-block-button__link:hover {
  background-color: var(--lm-accent) !important;
  border-color: var(--lm-accent) !important;
  color: #ffffff !important;
  opacity: 1;
}

/* Cart + Account: 20px line icons (the reference's own vectors), gap 16. */
.loomify-site-header .lm-header-utility {
  display: flex;
  align-items: center;
  gap: var(--lm-space-2);
  margin-left: var(--lm-space-3);
}
.loomify-site-header .lm-header-utility__link {
  display: inline-flex;
  color: var(--lm-ink-2);
  transition: opacity var(--lm-transition);
}
.loomify-site-header .lm-header-utility__link:hover {
  opacity: 0.7;
}
.loomify-site-header .lm-header-utility svg {
  display: block;
  width: 20px;
  height: 20px;
}

/* Core's mobile overlay — its own open / close / focus behaviour is untouched,
   only the surface and the type are painted. */
.loomify-site-header .wp-block-navigation__responsive-container-open,
.loomify-site-header .wp-block-navigation__responsive-container-close {
  color: var(--lm-ink-2);
}
.loomify-site-header .wp-block-navigation__responsive-container.is-menu-open {
  inset: 0;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  overflow-y: auto;
  box-sizing: border-box;
  background-color: var(--lm-bg);
  color: var(--lm-text);
  padding: var(--lm-space-4) var(--lm-space-3);
}
@supports (height: 100dvh) {
  .loomify-site-header .wp-block-navigation__responsive-container.is-menu-open {
    height: 100dvh;
    min-height: 100dvh;
  }
}
.loomify-site-header .wp-block-navigation__responsive-container.is-menu-open a {
  padding-bottom: 0;
  border-bottom: 0;
  color: var(--lm-text);
}

/* Account, Start Designing and Get a Quote are duplicated as plain navigation
   links so the closed mobile row can drop all three (§10) and still reach them.
   The duplicates are gated on Core's own `is-menu-open` state rather than on a
   media query, so they are hidden in *every* closed state and at *every*
   desktop width — they can never be visible at the same time as the header
   actions, independently of where Core puts its own breakpoint. `!important`
   answers Core's `.wp-block-navigation-item { display: flex }`, which a
   database override could re-emit after this file. */
.loomify-site-header
  .wp-block-navigation__responsive-container:not(.is-menu-open)
  .lm-nav-overlay-only {
  display: none !important;
}
/* The duplicated CTAs keep their button treatment inside the overlay: solid
   for Start Designing, outline for Get a Quote (Navbar.tsx mobile panel). */
.loomify-site-header
  .wp-block-navigation__responsive-container.is-menu-open
  .lm-nav-cta a {
  padding: 8px 24px;
  background-color: var(--lm-accent);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.loomify-site-header
  .wp-block-navigation__responsive-container.is-menu-open
  .lm-nav-quote a {
  padding: 8px 24px;
  border: 1px solid var(--lm-accent);
  background-color: transparent;
  color: var(--lm-accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ */
/* 9. Footer — brand footer, aligned to the Next.js Footer             */
/*    (src/components/layout/Footer.tsx → Figma Final Handoff 3:569)   */
/*                                                                    */
/*    Deliberate divergence: the reference footer sits on warm paper,  */
/*    this one keeps the dark near-black brand surface the child theme */
/*    already ships. Everything else — shell width, gutters, column    */
/*    grid, type scale, tracking, spacing, bottom rule — follows the   */
/*    reference, with the on-dark palette inverted from the same       */
/*    tokens.                                                         */
/*                                                                    */
/*    As in §8, the rules avoid the lm-* column classes so they also   */
/*    paint a database override of this part, which drops them and     */
/*    keeps `has-text-align-center` on the legal line.                 */
/* ------------------------------------------------------------------ */
.loomify-site-footer {
  --lm-shell-pad: var(--lm-space-3);
  background-color: var(--lm-dark);
  color: var(--lm-on-dark);
  padding-block: 8rem var(--lm-space-6); /* pt-32 / pb-16 */
}
.loomify-site-footer.has-global-padding {
  padding-inline: 0; /* see §8 — gutters live on the children */
}
/* Both regions share the Navbar/Footer shell: max-w-[1440px] + px-6. */
.loomify-site-footer > * {
  max-width: var(--lm-shell-max) !important;
  margin-inline: auto;
  padding-inline: var(--lm-shell-pad);
}

/* Column row: grid-cols-2 (→3 →5 in §10), gap-x 32 / gap-y 48, 96px above the
   bottom bar. Grid also makes the core column widths and core's below-782px
   `flex-basis: 100% !important` stacking rule inert, which is what we want. */
.loomify-site-footer .wp-block-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--lm-space-4);
  row-gap: var(--lm-space-5);
  margin-bottom: var(--lm-space-7);
}
.loomify-site-footer .wp-block-column {
  min-width: 0;
}
/* Brand column spans the row until lg (col-span-2 / md:3 / lg:1). It is the
   first column in both DOM shapes, so no lm-* marker class is needed. */
.loomify-site-footer .wp-block-columns > .wp-block-column:first-child {
  grid-column: span 2;
}

.loomify-site-footer,
.loomify-site-footer p,
.loomify-site-footer li {
  color: var(--lm-on-dark);
}

/* Brand block: serif wordmark 24/31.2 + 16/26 copy capped at 190px. */
.loomify-site-footer .lm-footer-brand {
  margin: 0 0 var(--lm-space-4);
  font-family: var(--lm-font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 31.2px;
  letter-spacing: -0.01em;
  color: #ffffff;
}
.loomify-site-footer .wp-block-column:first-child p:not(.lm-footer-brand) {
  max-width: 190px;
  margin: 0;
  font-size: 1rem;
  line-height: 26px;
  color: rgba(var(--lm-on-dark-rgb), 0.6);
}

/* Column headings: sans 12/16.8, uppercase, tracking 1.8px, 40px to the list. */
.loomify-site-footer h2,
.loomify-site-footer h3,
.loomify-site-footer .wp-block-heading {
  margin: 0 0 2.5rem;
  font-family: var(--lm-font-body);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 16.8px;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  color: #ffffff;
}

/* Link lists: 14/20, 16px apart. */
.loomify-site-footer .wp-block-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--lm-space-2);
}
.loomify-site-footer .wp-block-list li {
  margin: 0;
}
.loomify-site-footer a {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgba(var(--lm-on-dark-rgb), 0.7);
  transition: color var(--lm-transition);
}
.loomify-site-footer a:hover {
  color: var(--lm-on-dark);
}
.loomify-site-footer a:focus-visible {
  outline: 2px solid var(--lm-on-dark);
  outline-offset: 2px;
}

/* Bottom bar: hairline rule + pt-16 + 10/15 uppercase, tracking 1.5px. The
   text-align also cancels the `has-text-align-center` that the database
   override keeps on this paragraph. */
.loomify-site-footer .lm-footer-legal {
  margin: 0;
  border-top: 1px solid rgba(var(--lm-hairline-rgb), 0.1);
  padding-top: var(--lm-space-6);
  font-family: var(--lm-font-body);
  font-size: 0.625rem;
  line-height: 15px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-align: left;
  color: rgba(var(--lm-on-dark-rgb), 0.4);
}

/* ------------------------------------------------------------------ */
/* 10. Responsive — desktop 1440 / mobile 390, no horizontal scroll   */
/* ------------------------------------------------------------------ */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Shared chrome breakpoints: md → 3 footer columns, lg → 5 columns and the
   64px shell gutters (Footer.tsx md:grid-cols-3 / lg:grid-cols-5 / lg:gap-x-20;
   Navbar.tsx + Footer.tsx lg:px-16). */
@media (min-width: 782px) {
  .loomify-site-footer .wp-block-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .loomify-site-footer .wp-block-columns > .wp-block-column:first-child {
    grid-column: span 3;
  }
}

@media (min-width: 1024px) {
  .loomify-site-header,
  .loomify-site-footer {
    --lm-shell-pad: var(--lm-space-6);
  }
  .loomify-site-footer .wp-block-columns {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: 5rem;
  }
  .loomify-site-footer .wp-block-columns > .wp-block-column:first-child {
    grid-column: span 1;
  }
}

@media (max-width: 1024px) {
  .woocommerce ul.products,
  ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .single-product.woocommerce div.product {
    grid-template-columns: 1fr;
    gap: var(--lm-space-4);
  }
}

@media (max-width: 640px) {
  .woocommerce ul.products,
  ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--lm-space-4) var(--lm-space-2);
  }
  /* Tighter shell gutters and a compact CTA, so the chrome stays as short as
     possible on small screens. */
  .loomify-site-header,
  .loomify-site-footer {
    --lm-shell-pad: var(--lm-space-2);
  }
  .loomify-site-header .wp-block-button__link {
    padding: 8px 14px;
    letter-spacing: 1px;
  }
  .loomify-site-header .lm-header-utility {
    margin-left: var(--lm-space-2);
    gap: 0.75rem;
  }
  .single-product button.single_add_to_cart_button,
  .single-product .single_add_to_cart_button.button {
    max-width: 100%;
  }
}

/* Closed compact row = wordmark + Cart + Core's menu toggle, in that order and
   nothing else, from the narrowest viewport up to 1023px.
 *
 * The header follows the reference's `lg` breakpoint (Navbar.tsx: `lg:flex` for
 * the inline list and the desktop cluster, `lg:hidden` for the compact row), so
 * the switch happens at 1024px. Core's `overlayMenu: "mobile"` puts its own
 * switch at 600px: from `min-width: 600px` it shows the responsive container
 * inline and hides the toggle. Left alone, 600–1023px would therefore render
 * the full desktop cluster — six inline links + two CTAs + two icons — inside a
 * 68px row and wrap it. The three rules below move Core's breakpoint up to
 * 1024px purely in CSS: no script is replaced and no markup is added, so Core's
 * own open / close / focus-trap / aria behaviour is untouched — the toggle it
 * already renders is simply visible over a wider range.
 *
 * Each override carries one class more than the Core rule it answers
 * (`:not(.hidden-by-default):not(.is-menu-open)` = 3, ours = 4; the toggle's
 * `:not(.always-shown)` = 2, ours = 3), so they win on specificity alone and do
 * not depend on whether the separate core-block stylesheet is printed before or
 * after this file. `!important` is used only where Core's declaration is itself
 * in a media query that could be re-emitted by a plugin at equal weight. */
@media (max-width: 1023px) {
  /* Closed: the responsive container stays out of the row entirely. This is
     also what hides the inline six-link list — the list lives inside it. */
  .loomify-site-header
    .wp-block-navigation
    .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }
  /* Open: nothing here touches `.is-menu-open`, so Core's full-viewport flex
     overlay and the §8 rules that paint it apply unchanged. */

  /* The hamburger Core would hide from 600px up. */
  .loomify-site-header
    .wp-block-navigation
    .wp-block-navigation__responsive-container-open {
    display: flex !important;
  }

  /* Row order: brand, then the action cluster pushed right, then the toggle. */
  .loomify-site-header .lm-header-inner {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: var(--lm-space-1);
  }
  .loomify-site-header .lm-header-actions {
    order: 2;
    margin-left: auto;
  }
  .loomify-site-header .lm-header-inner > .wp-block-navigation {
    order: 3;
    min-width: 0;
    flex: 0 0 auto;
  }
  .loomify-site-header .lm-brand {
    min-width: 0;
    white-space: nowrap;
  }
  /* Both CTAs and the Account icon leave the row; they stay reachable from
     inside the opened overlay as duplicated navigation links (see §8). */
  .loomify-site-header .lm-header-actions .wp-block-buttons,
  .loomify-site-header .lm-header-utility__link--account {
    display: none;
  }
  /* The header's blur is a composited filter, so it would be the containing
     block for Core's position:fixed overlay and pin it to the 68px row. While
     the overlay is open it is dropped, so the overlay resolves against the
     viewport instead. The closed header keeps its blur. */
  .loomify-site-header:has(
      .wp-block-navigation__responsive-container.is-menu-open
    ) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* From `lg` the reference layout is back: inline list, both CTAs, both icons,
   no toggle. Core already produces exactly this from 600px up, so these rules
   only re-assert it against the block above and keep the row on one line. */
@media (min-width: 1024px) {
  .loomify-site-header
    .wp-block-navigation
    .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: block;
  }
  .loomify-site-header
    .wp-block-navigation
    .wp-block-navigation__responsive-container-open {
    display: none;
  }
  .loomify-site-header .lm-header-actions .wp-block-buttons {
    display: flex;
  }
  .loomify-site-header .lm-header-utility__link--account {
    display: inline-flex;
  }
  /* `flex-wrap` is deliberately left at the block layout's `wrap` here. The
     density step below is sized to keep all eleven items on one 68px line from
     1024px up; if a font stack renders wider than budgeted, the row wraps and
     grows rather than shrinking items until the Account icon is clipped. */
}

/* 1024–1279 density step. The Figma header is specified at 1280×68; between
   `lg` and that width the same eleven items have up to 256px less to sit in, so
   the shell gutter, the navigation gap and type, and the CTA padding tighten a
   notch to keep the row on one line at 68px. Above 1279 the full spec applies.
   Scoped to the header only — the footer keeps its 64px gutters. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .loomify-site-header {
    --lm-shell-pad: var(--lm-space-3);
  }
  .loomify-site-header .lm-header-inner {
    gap: 0.75rem;
  }
  .loomify-site-header .wp-block-navigation {
    gap: var(--lm-space-2);
    font-size: 0.9375rem;
  }
  .loomify-site-header .wp-block-buttons {
    gap: 0.75rem;
  }
  .loomify-site-header .wp-block-button__link {
    padding: 8px 14px;
    letter-spacing: 1px;
  }
  .loomify-site-header .lm-header-quote .wp-block-button__link {
    padding: 7px 13px;
  }
  .loomify-site-header .lm-header-utility {
    margin-left: var(--lm-space-2);
    gap: 0.75rem;
  }
}

@media (max-width: 430px) {
  .woocommerce ul.products,
  ul.products {
    grid-template-columns: 1fr;
  }
}