/**
 * LFO Studio — Additional CSS
 * Dark / immersive / club-visual redesign
 * Paste into: Appearance → Customize → Additional CSS
 * (or Site Editor → Styles → Additional CSS)
 *
 * Parent theme: Twenty Twenty-Four + WooCommerce + Stackable
 */

/* Fonts load via functions.php (preconnect + stylesheet) — no @import (blocks CSS). */

/* -------------------------------------------------------------------------- */
/* Design tokens                                                              */
/* -------------------------------------------------------------------------- */
:root {
  --lfo-bg: #0f0e17;
  --lfo-bg-elevated: #161522;
  --lfo-bg-card: #1a1826;
  --lfo-border: rgba(255, 255, 254, 0.1);
  --lfo-border-strong: rgba(255, 255, 254, 0.18);
  --lfo-text: #fffffe;
  --lfo-text-muted: #a8a6b3;
  --lfo-accent: #b026ff;
  --lfo-accent-hover: #d24dff;
  --lfo-accent-soft: rgba(176, 38, 255, 0.15);
  --lfo-radius: 4px;
  --lfo-radius-lg: 12px;
  --lfo-font-display: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --lfo-font-body: "DM Sans", "Inter", system-ui, -apple-system, sans-serif;
  --lfo-max: 1200px;
  --lfo-header-h: 72px;
}

/* -------------------------------------------------------------------------- */
/* Base                                                                       */
/* -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

body,
body.wp-theme-twentytwentyfour,
body.theme-lfo-studio,
body.wp-theme-lfo-studio {
  background-color: var(--lfo-bg) !important;
  color: var(--lfo-text) !important;
  font-family: var(--lfo-font-body) !important;
}

.wp-site-blocks {
  background-color: var(--lfo-bg) !important;
  color: var(--lfo-text) !important;
  font-family: var(--lfo-font-body) !important;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.wp-block-post-title,
.woocommerce-loop-product__title,
.product_title {
  font-family: var(--lfo-font-display) !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em;
  color: var(--lfo-text) !important;
}

a {
  color: var(--lfo-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color 0.15s ease;
}

a:hover,
a:focus {
  color: var(--lfo-accent-hover);
}

p,
li,
.wp-block-post-excerpt {
  color: var(--lfo-text-muted);
}

/* Flat solid background — no grids, fixed layers, or GPU-heavy effects */
body {
  background-color: var(--lfo-bg) !important;
  background-image: none !important;
}

/* -------------------------------------------------------------------------- */
/* Header / navigation                                                        */
/* -------------------------------------------------------------------------- */
header.wp-block-template-part,
.wp-block-template-part header,
body .wp-site-blocks > header {
  background: var(--lfo-bg) !important;
  border-bottom: 1px solid var(--lfo-border);
  position: sticky;
  top: 0;
  z-index: 100;
  /* no backdrop-filter — causes scroll jank on many devices */
}

/* Inner header group spacing */
header .wp-block-group {
  max-width: var(--lfo-max);
  margin-left: auto;
  margin-right: auto;
}

.wp-block-navigation,
.wp-block-navigation .wp-block-navigation-item__content {
  font-family: var(--lfo-font-body) !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lfo-text) !important;
}

.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item__content:focus {
  color: var(--lfo-accent) !important;
}

.wp-block-navigation__responsive-container.is-menu-open {
  background: var(--lfo-bg) !important;
}

.wp-block-site-logo img {
  max-height: 40px;
  width: auto;
}

/* Light logo on dark: invert black logos if you haven't uploaded a white one yet */
.wp-block-site-logo img[src*="Black"],
.wp-block-site-logo img[src*="black"] {
  filter: invert(1) brightness(1.05);
}

/* Mini cart */
.wc-block-mini-cart__button,
.wp-block-woocommerce-mini-cart {
  color: var(--lfo-text) !important;
}

.wc-block-mini-cart__badge {
  background: var(--lfo-accent) !important;
  color: #fff !important;
}

/* -------------------------------------------------------------------------- */
/* Buttons                                                                    */
/* -------------------------------------------------------------------------- */
.wp-block-button__link,
.wp-element-button,
button.single_add_to_cart_button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button:not(.is-link),
.wp-block-search__button {
  background: var(--lfo-accent) !important;
  color: #fffffe !important;
  border: 1px solid transparent !important;
  border-radius: var(--lfo-radius) !important;
  font-family: var(--lfo-font-body) !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.8rem !important;
  padding: 0.85rem 1.4rem !important;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: none !important;
}

.wp-block-button__link:hover,
.wp-element-button:hover,
button.single_add_to_cart_button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.wc-block-components-button:not(.is-link):hover {
  background: var(--lfo-accent-hover) !important;
  color: #fffffe !important;
  transform: translateY(-1px);
}

/* Ghost / outline buttons — add class "is-style-outline" on block buttons */
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button__link.has-background-background-color {
  background: transparent !important;
  color: var(--lfo-text) !important;
  border: 1px solid var(--lfo-border-strong) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  border-color: var(--lfo-accent) !important;
  color: var(--lfo-accent) !important;
  background: var(--lfo-accent-soft) !important;
}

/* -------------------------------------------------------------------------- */
/* Footer                                                                     */
/* -------------------------------------------------------------------------- */
footer.wp-block-template-part,
.wp-site-blocks > footer {
  background: #0a0910 !important;
  border-top: 1px solid var(--lfo-border);
  color: var(--lfo-text-muted) !important;
  margin-top: 4rem;
}

footer a {
  color: var(--lfo-text-muted);
}

footer a:hover {
  color: var(--lfo-accent);
}

footer h1, footer h2, footer h3, footer h4 {
  color: var(--lfo-text) !important;
}

/* -------------------------------------------------------------------------- */
/* Forms (Fluent Forms + newsletter)                                          */
/* -------------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
input[type="tel"],
input[type="number"],
textarea,
select,
.fluentform .ff-el-form-control,
.wp-block-search__input {
  background: var(--lfo-bg-elevated) !important;
  border: 1px solid var(--lfo-border) !important;
  color: var(--lfo-text) !important;
  border-radius: var(--lfo-radius) !important;
  padding: 0.75rem 1rem !important;
}

input:focus,
textarea:focus,
select:focus,
.fluentform .ff-el-form-control:focus {
  outline: none !important;
  border-color: var(--lfo-accent) !important;
  box-shadow: 0 0 0 3px var(--lfo-accent-soft) !important;
}

.fluentform .ff-btn-submit,
.fluentform .ff-btn {
  background: var(--lfo-accent) !important;
  border-color: var(--lfo-accent) !important;
  color: #fff !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600 !important;
}

/* -------------------------------------------------------------------------- */
/* Home — festival booth: full hero → large work → hire → shop                */
/* -------------------------------------------------------------------------- */

/* Optional future video band (only used when mp4 is real) */
.lfo-banner {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  background: #05040a;
}

.lfo-banner__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.lfo-banner__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/*
 * Home only: full-width pattern fringe under nav, fades into black.
 * Tile asset: pattern-2-tile.webp (transparent cutout).
 */
.lfo-home-fringe {
  position: relative;
  width: 100%;
  /* a bit longer / taller */
  height: clamp(96px, 15vw, 148px);
  margin: 0;
  padding: 0;
  overflow: hidden;
  pointer-events: none;
  background: #0a0910;
  z-index: 2;
}

.lfo-home-fringe__tile {
  position: absolute;
  inset: 0;
  background-image: url("https://lfostudio.com/wp-content/uploads/2026/07/pattern-2-tile.webp");
  background-repeat: repeat-x;
  /* smaller flower motifs */
  background-position: center top;
  background-size: auto 92%;
  opacity: 0.7;
  /* Long, gradual fade into black */
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 12%,
    rgba(0, 0, 0, 0.85) 28%,
    rgba(0, 0, 0, 0.55) 48%,
    rgba(0, 0, 0, 0.28) 68%,
    rgba(0, 0, 0, 0.1) 84%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 12%,
    rgba(0, 0, 0, 0.85) 28%,
    rgba(0, 0, 0, 0.55) 48%,
    rgba(0, 0, 0, 0.28) 68%,
    rgba(0, 0, 0, 0.1) 84%,
    transparent 100%
  );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* Soft extra veil — long blend into hero black */
.lfo-home-fringe::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 72%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(10, 9, 16, 0.15) 25%,
    rgba(10, 9, 16, 0.45) 55%,
    rgba(10, 9, 16, 0.82) 80%,
    #0a0910 100%
  );
  pointer-events: none;
}

@media (max-width: 600px) {
  .lfo-home-fringe {
    height: clamp(72px, 20vw, 104px);
  }

  .lfo-home-fringe__tile {
    opacity: 0.58;
    background-size: auto 88%;
  }
}

/* Hero: walk into a dark booth — full viewport, art-led */
.lfo-feature {
  position: relative;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  min-height: 100dvh;
  /* pull hero up slightly so fringe sits into the booth, not as a hard band */
  margin-top: clamp(-28px, -4vw, -16px);
  padding: clamp(4.5rem, 10vh, 6rem) 1.25rem clamp(2.5rem, 6vh, 4rem);
  box-sizing: border-box;
  overflow: hidden;
  background: #0a0910;
  border-bottom: 1px solid var(--lfo-border);
}

/*
 * Decorative transparent VJ loops (asset packs, not portfolio).
 * Slots are fixed-size; blend on the slot (Firefox fails mix-blend on <video>).
 * Firefox also gets a canvas draw path via JS (see functions.php).
 */
.lfo-fx {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.lfo-fx__slot {
  position: absolute;
  margin: 0;
  padding: 0;
  pointer-events: none;
  /* screen on the wrapper — works in Firefox; video alone often doesn't */
  mix-blend-mode: screen;
  opacity: 0.85;
  overflow: hidden;
}

.lfo-fx__video,
.lfo-fx__canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: none;
}

/* Soft morph field behind the figure */
.lfo-fx__slot--morph {
  width: min(96vw, 780px);
  height: min(96vw, 780px);
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  opacity: 0.88;
}

/* Pulse accent */
.lfo-fx__slot--pulse {
  width: min(80vw, 480px);
  height: min(80vw, 480px);
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
  opacity: 0.9;
}

/* Side halo — heavier file; hide on small screens */
.lfo-fx__slot--circle {
  width: min(55vw, 560px);
  height: min(55vw, 560px);
  right: -8%;
  top: 48%;
  transform: translateY(-50%);
  opacity: 0.75;
}

.lfo-fx__slot--hire {
  position: relative;
  width: min(90vw, 560px);
  height: min(90vw, 560px);
  left: auto;
  top: auto;
  transform: none;
  opacity: 0.7;
}

@media (max-width: 699px) {
  .lfo-fx__slot--circle {
    display: none;
  }
}

@media (min-width: 900px) {
  .lfo-fx__slot--morph {
    width: min(68vw, 860px);
    height: min(68vw, 860px);
  }

  .lfo-fx__slot--pulse {
    left: 8%;
    transform: none;
    bottom: 8%;
    width: min(30vw, 400px);
    height: min(30vw, 400px);
  }
}

/* Firefox: lighten is more reliable than screen on some builds */
@-moz-document url-prefix() {
  .lfo-fx__slot {
    mix-blend-mode: lighten;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lfo-fx,
  .lfo-hire-fx {
    display: none !important;
  }
}

.lfo-feature__art {
  position: relative;
  z-index: 2;
  width: min(94vw, 640px);
  margin: 0 auto;
  flex: 0 1 auto;
  background: transparent;
}

.lfo-feature__art img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  background: transparent;
  -webkit-user-drag: none;
  user-select: none;
}

/* Visible brand H1 — SEO + clarity without a big page title block */
.lfo-feature__brand {
  position: relative;
  z-index: 2;
  margin: clamp(1.1rem, 2.5vh, 1.5rem) 0 0;
  padding: 0 1rem;
  text-align: center;
  font-family: var(--lfo-font-display);
  font-size: clamp(1.15rem, 2.6vw, 1.45rem);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lfo-text);
}

.lfo-feature__tagline {
  position: relative;
  z-index: 2;
  margin: 0.45rem 0 0;
  padding: 0 1rem;
  text-align: center;
  font-family: var(--lfo-font-display);
  font-size: clamp(0.85rem, 2vw, 1.05rem);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lfo-text-muted);
}

.lfo-feature__actions {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
  margin-top: clamp(1.25rem, 3vh, 1.75rem);
}

.lfo-banner__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1.65rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none !important;
  border-radius: 0;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.lfo-banner__btn--solid {
  background: var(--lfo-accent);
  color: #fffffe !important;
  border: 1px solid var(--lfo-accent);
}

.lfo-banner__btn--solid:hover {
  background: var(--lfo-accent-hover);
  border-color: var(--lfo-accent-hover);
  color: #fffffe !important;
}

.lfo-banner__btn--ghost {
  background: transparent;
  color: var(--lfo-text) !important;
  border: 1px solid rgba(255, 255, 254, 0.35);
}

.lfo-banner__btn--ghost:hover {
  border-color: var(--lfo-accent);
  color: var(--lfo-accent) !important;
}

/* Work strip — world of stills (large, lazy-loaded) */
.lfo-home-work {
  background: #08070f;
  border-bottom: 1px solid var(--lfo-border);
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1rem, 3vw, 1.75rem) clamp(2.5rem, 6vw, 3.5rem);
}

.lfo-home-work__grid {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.85rem, 2vw, 1.25rem);
}

.lfo-home-work__grid--world {
  grid-template-columns: 1fr 1fr;
}

@media (min-width: 900px) {
  .lfo-home-work__grid--world {
    grid-template-columns: repeat(4, 1fr);
  }
}

.lfo-home-work__cell {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  min-height: min(44vw, 200px);
  background: transparent;
  border: 1px solid transparent;
  overflow: hidden;
  text-decoration: none !important;
  color: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

@media (min-width: 900px) {
  .lfo-home-work__cell {
    min-height: min(22vw, 300px);
  }
}

.lfo-home-work__media {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.lfo-home-work__media img,
.lfo-home-work__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  -webkit-user-drag: none;
  user-select: none;
}

.lfo-home-work__cell:hover {
  border-color: rgba(176, 38, 255, 0.35);
  transform: translateY(-3px);
}

.lfo-home-work__cell:focus-visible {
  outline: 2px solid var(--lfo-accent);
  outline-offset: 3px;
}

.lfo-home-work__more {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
}

@media (prefers-reduced-motion: reduce) {
  .lfo-home-work__cell:hover {
    transform: none;
  }
}

/* Offer pillars — scannable clarity */
.lfo-pillars {
  border-bottom: 1px solid var(--lfo-border);
  background: #0a0910;
  padding: clamp(2.75rem, 7vw, 4.5rem) clamp(1.25rem, 4vw, 2rem);
}

.lfo-pillars__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  text-align: center;
}

@media (min-width: 720px) {
  .lfo-pillars__inner {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem 2rem;
  }
}

.lfo-pillars__item {
  padding: 0.5rem 0.75rem;
}

.lfo-pillars__label {
  margin: 0 0 0.55rem;
  font-family: var(--lfo-font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lfo-accent);
}

.lfo-pillars__text {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--lfo-text-muted);
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}

/* Sparse home panels */
.lfo-home-panel {
  position: relative;
  border-top: 1px solid var(--lfo-border);
  background: var(--lfo-bg);
  overflow: hidden;
}

.lfo-home-panel__inner {
  position: relative;
  z-index: 1;
  max-width: 36rem;
  margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 5.5rem) 1.5rem;
  text-align: center;
}

.lfo-home-panel__title {
  font-family: var(--lfo-font-display) !important;
  font-size: clamp(1.45rem, 3vw, 2rem) !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em;
  color: var(--lfo-text) !important;
  margin: 0 0 0.85rem !important;
}

.lfo-home-panel__text {
  color: var(--lfo-text-muted) !important;
  font-size: 1rem !important;
  line-height: 1.55 !important;
  margin: 0 0 1.75rem !important;
}

.lfo-home-panel__actions {
  display: flex;
  justify-content: center;
}

.lfo-home-panel--hire {
  background: #0a0910;
  border-top: none;
}

.lfo-home-panel__title {
  font-size: clamp(1.5rem, 3vw, 2rem) !important;
  margin: 0 0 0.85rem !important;
  letter-spacing: -0.02em;
}

.lfo-home-panel__text {
  color: var(--lfo-text-muted) !important;
  font-size: 1rem !important;
  line-height: 1.55 !important;
  margin: 0 0 1.75rem !important;
}

.lfo-home-panel .wp-block-buttons {
  margin-top: 0.25rem;
}

.lfo-home-panel .wp-block-button__link {
  border-radius: 0 !important;
}

.lfo-home-panel--shop .lfo-home-panel__text {
  margin-bottom: 1.25rem !important;
}

.lfo-section {
  max-width: var(--lfo-max);
  margin: 0 auto;
  padding: 4.5rem 1.5rem;
}

.lfo-section__label {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lfo-accent);
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.lfo-section__title {
  font-size: clamp(1.75rem, 3vw, 2.5rem) !important;
  margin-bottom: 0.75rem !important;
}

.lfo-section__intro {
  max-width: 48ch;
  color: var(--lfo-text-muted) !important;
  margin-bottom: 2.5rem;
}

.lfo-band {
  background: var(--lfo-bg-elevated);
  border-top: 1px solid var(--lfo-border);
  border-bottom: 1px solid var(--lfo-border);
}

.lfo-band .lfo-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* Portfolio teaser grid on home */
.lfo-gallery-teaser {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

@media (min-width: 782px) {
  .lfo-gallery-teaser {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
}

.lfo-gallery-teaser figure,
.lfo-gallery-teaser .wp-block-image {
  margin: 0 !important;
  overflow: hidden;
  border-radius: var(--lfo-radius-lg);
  border: 1px solid var(--lfo-border);
  aspect-ratio: 1;
  background: var(--lfo-bg-card);
}

.lfo-gallery-teaser img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease, filter 0.4s ease;
  filter: saturate(1.05);
}

.lfo-gallery-teaser a:hover img {
  transform: scale(1.04);
  filter: saturate(1.15) brightness(1.05);
}

/* Newsletter band */
.lfo-transmissions {
  text-align: center;
  max-width: 520px;
  margin: 0 auto;
  padding: 4rem 1.5rem 5rem;
}

.lfo-transmissions h2 {
  margin-bottom: 0.5rem !important;
}

/* -------------------------------------------------------------------------- */
/* Portfolio page (/work/)                                                    */
/* -------------------------------------------------------------------------- */
.lfo-portfolio-hero {
  text-align: center;
  padding: 5rem 1.5rem 2rem;
  max-width: 640px;
  margin: 0 auto;
}

.lfo-portfolio-hero h1 {
  font-size: clamp(2.25rem, 5vw, 3.5rem) !important;
}

/* Filter tabs */
.lfo-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  padding: 0 0 2rem;
}

.lfo-filter {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--lfo-border-strong);
  color: var(--lfo-text-muted);
  padding: 0.5rem 1rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: var(--lfo-font-body);
  border-radius: 0;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.lfo-filter:hover {
  border-color: var(--lfo-accent);
  color: var(--lfo-accent);
}

.lfo-filter.is-active {
  border-color: var(--lfo-accent);
  color: var(--lfo-accent);
  background: var(--lfo-accent-soft);
}

.lfo-portfolio-item.is-hidden {
  display: none !important;
}

/* Portfolio grid: Group with class lfo-portfolio-grid containing columns or images */
.lfo-portfolio-grid {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  max-width: var(--lfo-max);
  margin: 0 auto 5rem;
  padding: 0 1.5rem;
}

@media (min-width: 600px) {
  .lfo-portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .lfo-portfolio-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

/* Each portfolio item: Group with class lfo-portfolio-item */
.lfo-portfolio-item {
  position: relative;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease;
}

.lfo-portfolio-item:hover {
  transform: translateY(-2px);
}

.lfo-portfolio-item .lfo-portfolio-media,
.lfo-portfolio-item figure,
.lfo-portfolio-item .wp-block-image,
.lfo-portfolio-item .wp-block-video,
.lfo-portfolio-item .wp-block-embed {
  margin: 0 !important;
  aspect-ratio: 1;
  background: #000;
  overflow: hidden;
}

.lfo-portfolio-item img,
.lfo-portfolio-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lfo-portfolio-item .lfo-portfolio-media {
  position: relative;
  aspect-ratio: 1;
  background:
    radial-gradient(ellipse 80% 70% at 50% 45%, rgba(176, 38, 255, 0.1) 0%, transparent 55%),
    linear-gradient(165deg, #1a1828 0%, #0c0b14 100%);
  overflow: hidden;
}

.lfo-portfolio-item .lfo-portfolio-media video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
}

.lfo-portfolio-item .lfo-portfolio-media img {
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

.lfo-portfolio-title {
  font-family: var(--lfo-font-display) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  margin: 0 !important;
  color: var(--lfo-text) !important;
}

.lfo-portfolio-item .wp-block-embed__wrapper {
  aspect-ratio: 1;
}

.lfo-portfolio-item .wp-block-embed iframe {
  width: 100%;
  height: 100%;
  min-height: 220px;
}

.lfo-portfolio-meta {
  padding: 1rem 1.1rem 1.15rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.lfo-portfolio-meta h3,
.lfo-portfolio-meta .wp-block-heading {
  font-size: 1rem !important;
  margin: 0 !important;
  color: var(--lfo-text) !important;
}

.lfo-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lfo-accent);
  border: 1px solid var(--lfo-accent);
  border-radius: 999px;
  padding: 0.25rem 0.55rem;
  white-space: nowrap;
  background: var(--lfo-accent-soft);
}

/* Filter visibility helpers (optional — use with HTML block JS or manually hide) */
.lfo-portfolio-item[data-type="illustration"],
.lfo-portfolio-item[data-type="animation"],
.lfo-portfolio-item[data-type="live"] {
  /* data attributes reserved for future filter script */
}

/* -------------------------------------------------------------------------- */
/* WooCommerce — catalog                                                      */
/* -------------------------------------------------------------------------- */
.woocommerce-products-header__title,
.woocommerce .woocommerce-breadcrumb {
  color: var(--lfo-text-muted) !important;
}

.woocommerce .woocommerce-breadcrumb a {
  color: var(--lfo-text-muted);
}

.woocommerce-result-count,
.woocommerce-ordering {
  color: var(--lfo-text-muted) !important;
  font-size: 0.85rem;
}

.woocommerce-ordering select {
  background: var(--lfo-bg-elevated) !important;
  color: var(--lfo-text) !important;
  border-color: var(--lfo-border) !important;
}

/* Product collection / classic loops */
ul.products,
.wc-block-product-template,
ul.wc-block-product-template {
  gap: 1.5rem !important;
}

ul.products li.product,
.wc-block-product,
li.wc-block-product,
.wc-block-product-template .wc-block-product {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: hidden;
  padding: 0 !important;
}

ul.products li.product:hover,
.wc-block-product:hover {
  border-color: transparent !important;
}

ul.products li.product a img,
.wc-block-product img,
.wc-block-components-product-image img {
  border-radius: 0 !important;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  object-position: center;
  display: block;
  padding: 8% !important;
  box-sizing: border-box;
  background-color: #12101c !important;
  background-image:
    radial-gradient(ellipse 80% 70% at 50% 42%, rgba(176, 38, 255, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse 100% 90% at 50% 100%, rgba(22, 21, 34, 0.9) 0%, transparent 50%),
    linear-gradient(165deg, #1c1a2a 0%, #0f0e17 48%, #161422 100%) !important;
}

ul.products li.product .woocommerce-loop-product__title,
.wc-block-product .wc-block-components-product-name,
.wc-block-components-product-name {
  color: var(--lfo-text) !important;
  font-family: var(--lfo-font-display) !important;
  font-size: 1rem !important;
  padding: 0.85rem 1rem 0.25rem !important;
  text-decoration: none !important;
}

.woocommerce ul.products li.product .price,
.wc-block-components-product-price,
.wc-block-components-product-price__value {
  color: var(--lfo-text-muted) !important;
  font-size: 0.9rem !important;
  padding: 0 1rem 1rem !important;
}

.woocommerce ul.products li.product .button,
.wc-block-components-product-button .wp-block-button__link {
  margin: 0 1rem 1rem !important;
  width: calc(100% - 2rem);
  text-align: center;
}

/* Hide bulky result chrome slightly on mobile */
@media (max-width: 600px) {
  .woocommerce-result-count {
    margin-bottom: 0.5rem;
  }
}

/* -------------------------------------------------------------------------- */
/* WooCommerce — single product                                               */
/* -------------------------------------------------------------------------- */
.single-product .product {
  color: var(--lfo-text);
}

.single-product div.product .product_title {
  font-size: clamp(1.75rem, 3vw, 2.5rem) !important;
}

.single-product div.product p.price,
.single-product .woocommerce-Price-amount {
  color: var(--lfo-accent) !important;
  font-size: 1.25rem !important;
}

/* Hide short description / excerpt beside the product image */
body.single-product .wp-block-post-excerpt,
body.single-product .wp-block-post-excerpt__excerpt,
body.single-product .woocommerce-product-details__short-description,
.single-product div.product .woocommerce-product-details__short-description,
.single-product .summary .woocommerce-product-details__short-description,
.single-product .entry-summary .woocommerce-product-details__short-description {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

.single-product div.product .woocommerce-Tabs-panel {
  color: var(--lfo-text-muted);
}

.woocommerce div.product div.images img {
  border-radius: var(--lfo-radius-lg);
  border: 1px solid var(--lfo-border);
  background: var(--lfo-bg-card);
}

.woocommerce div.product form.cart .variations select {
  min-width: 12rem;
}

/* Related / product collection: image + title only (no price / Select options) */
body.single-product .related.products .price,
body.single-product .related.products .woocommerce-Price-amount,
body.single-product .related.products .button,
body.single-product .related.products a.button,
body.single-product .related.products .add_to_cart_button,
body.single-product .related.products .product_type_variable,
body.single-product .related.products .product_type_simple,
body.single-product .upsells.products .price,
body.single-product .upsells.products .button,
body.single-product .upsells.products a.button,
body.single-product .wp-block-woocommerce-product-collection .wc-block-components-product-price,
body.single-product .wp-block-woocommerce-product-collection .wp-block-woocommerce-product-price,
body.single-product .wp-block-woocommerce-product-collection .wc-block-components-product-button,
body.single-product .wp-block-woocommerce-product-collection .wp-block-woocommerce-product-button,
body.single-product .wp-block-woocommerce-product-collection .wp-block-button,
body.single-product .wp-block-woocommerce-product-collection .wp-block-button__link,
body.single-product .wc-block-product-template .wc-block-components-product-price,
body.single-product .wc-block-product-template .wp-block-woocommerce-product-price,
body.single-product .wc-block-product-template .wc-block-components-product-button,
body.single-product .wc-block-product-template .wp-block-woocommerce-product-button,
body.single-product .wc-block-product-template .wp-block-button,
body.single-product .wc-block-product-template .wp-block-button__link,
body.single-product ul.products .price,
body.single-product ul.products .button,
body.single-product ul.products a.button {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  border: none !important;
  position: absolute !important;
  width: 1px !important;
  clip: rect(0, 0, 0, 0) !important;
  font-size: 0 !important;
  pointer-events: none !important;
}

.woocommerce-tabs ul.tabs {
  padding: 0 !important;
  border-bottom: 1px solid var(--lfo-border) !important;
  margin-bottom: 1.5rem !important;
}

.woocommerce-tabs ul.tabs li {
  background: transparent !important;
  border: none !important;
}

.woocommerce-tabs ul.tabs li a {
  color: var(--lfo-text-muted) !important;
}

.woocommerce-tabs ul.tabs li.active a {
  color: var(--lfo-accent) !important;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  background: var(--lfo-bg-elevated) !important;
  color: var(--lfo-text) !important;
  border-top-color: var(--lfo-accent) !important;
}

/* Cart / checkout */
.woocommerce-cart .cart-collaterals,
.woocommerce-checkout .woocommerce,
.wc-block-cart,
.wc-block-checkout {
  color: var(--lfo-text);
}

.woocommerce table.shop_table {
  border-color: var(--lfo-border) !important;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  border-color: var(--lfo-border) !important;
  color: var(--lfo-text-muted);
}

/* Side / mini cart drawer */
.wp-block-woocommerce-mini-cart-contents,
.wc-block-mini-cart__drawer {
  background: var(--lfo-bg) !important;
  color: var(--lfo-text) !important;
}

/* -------------------------------------------------------------------------- */
/* Separators, groups, misc blocks                                            */
/* -------------------------------------------------------------------------- */
.wp-block-separator {
  border-color: var(--lfo-border) !important;
  opacity: 1;
}

.wp-block-separator.is-style-wide {
  border-bottom-width: 1px;
}

.has-background-background-color,
.has-base-background-color {
  /* leave explicit block backgrounds; global body is dark */
}

/* Reduce default TT4 huge padding on some groups */
.entry-content > .wp-block-group.alignfull {
  /* keep full-bleed bands intentional */
}

/* Social links */
.wp-block-social-links:not(.is-style-logos-only) .wp-social-link {
  background: var(--lfo-bg-elevated) !important;
  color: var(--lfo-text) !important;
}

.wp-block-social-links.is-style-logos-only .wp-social-link {
  color: var(--lfo-text-muted) !important;
}

.wp-block-social-links .wp-social-link:hover {
  color: var(--lfo-accent) !important;
}

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

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

  .lfo-gallery-teaser a:hover img,
  ul.products li.product:hover,
  .lfo-portfolio-item:hover {
    transform: none;
  }
}

/* Focus visible */
a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible {
  outline: 2px solid var(--lfo-accent);
  outline-offset: 3px;
}

/* -------------------------------------------------------------------------- */
/* Hide residual copy-protector message if plugin partially left behind       */
/* -------------------------------------------------------------------------- */
body > div:has(> :only-child),
.unselectable::after {
  /* no-op placeholder */
}

/* Common copy-protector toast / banner patterns */
#wpcp-error-message,
.wpcp-error-message,
div[id*="copy-protection"],
div[class*="copy-protection"] {
  display: none !important;
}


/* -------------------------------------------------------------------------- */
/* Logo-only chrome (no duplicate "LFO Studio" text)                         */
/* -------------------------------------------------------------------------- */
.wp-custom-logo .wp-block-site-title,
header .wp-block-site-title,
footer .wp-block-site-title,
.lfo-site-header .wp-block-site-title,
.lfo-site-footer .wp-block-site-title {
  display: none !important;
}

/* Never show the page title "Home" on the front page */
body.home .wp-block-post-title,
body.home .lfo-page-header,
body.home h1.wp-block-post-title {
  display: none !important;
}

/* Tighter header */
.lfo-site-header {
  background: rgba(15, 14, 23, 0.92) !important;
  border-bottom: 1px solid var(--lfo-border);
}

.lfo-site-header .wp-block-site-logo img {
  max-height: 48px;
  width: auto;
}

/* Desktop: hide hamburger nav; mobile: hide horizontal text nav (one nav only) */
@media (min-width: 782px) {
  .lfo-mobile-nav,
  .lfo-site-header .wp-block-navigation.lfo-mobile-nav {
    display: none !important;
  }
}

@media (max-width: 781px) {
  .lfo-site-header .wp-block-navigation:not(.lfo-mobile-nav) {
    display: none !important;
  }
}

.lfo-footer-tagline {
  color: var(--lfo-text-muted) !important;
  max-width: 28ch;
  margin: 0.5rem 0 1rem !important;
  font-size: 0.95rem;
}

.lfo-footer-copy {
  color: var(--lfo-text-muted) !important;
  margin-top: 2.5rem !important;
  opacity: 0.8;
}

.lfo-page-header {
  padding: 2.5rem 1.5rem 0.5rem;
}

.lfo-page-title {
  font-size: clamp(1.75rem, 3vw, 2.5rem) !important;
}

/* Practice columns */
.lfo-section .wp-block-column h3 {
  color: var(--lfo-text) !important;
  font-size: 1.15rem !important;
  margin-bottom: 0.5rem !important;
}

.lfo-section .wp-block-column p {
  font-size: 0.95rem;
}


/* -------------------------------------------------------------------------- */
/* Work / portfolio page — sectioned Still / Motion / Live                    */
/* -------------------------------------------------------------------------- */
.lfo-work-page {
  max-width: 1320px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 5rem;
}

.lfo-work-top {
  position: sticky;
  top: var(--lfo-header-h, 72px);
  z-index: 40;
  margin: 0 0 2rem;
  padding: 0.75rem 0;
  background: rgba(15, 14, 23, 0.96);
  border-bottom: 1px solid var(--lfo-border);
}

/* Jump links (not hide/show filters) */
.lfo-work-page .lfo-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.35rem;
  justify-content: center;
}

.lfo-work-page .lfo-filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1.1rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none !important;
  color: var(--lfo-text-muted) !important;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
}

.lfo-work-page .lfo-filter:hover {
  color: var(--lfo-text) !important;
  border-color: var(--lfo-border);
}

.lfo-work-page .lfo-filter.is-active {
  color: var(--lfo-text) !important;
  border-color: var(--lfo-accent);
  background: var(--lfo-accent-soft);
}

/* Hide default page title on Work (page-id-2659) — art-first */
body.page-id-2659 .wp-block-post-title,
body.page-id-2659 .lfo-page-header {
  display: none !important;
}

/* Sections */
.lfo-work-section {
  scroll-margin-top: calc(var(--lfo-header-h, 72px) + 4rem);
  margin-bottom: clamp(3rem, 8vw, 5rem);
  padding-top: 0.5rem;
}

.lfo-work-section:last-child {
  margin-bottom: 0;
}

.lfo-work-section__head {
  margin: 0 0 1.25rem;
}

.lfo-work-section__label {
  margin: 0 !important;
  font-family: var(--lfo-font-display) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--lfo-accent) !important;
}

/* Large section grids */
.lfo-work-page .lfo-portfolio-grid {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: clamp(0.85rem, 2vw, 1.25rem);
  min-height: 0;
  border: none;
  background: transparent;
  padding: 0;
}

@media (min-width: 700px) {
  .lfo-work-page .lfo-portfolio-grid--still {
    grid-template-columns: repeat(2, 1fr);
  }

  .lfo-work-page .lfo-portfolio-grid--motion {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1000px) {
  .lfo-work-page .lfo-portfolio-grid--still {
    grid-template-columns: repeat(2, 1fr);
  }

  .lfo-work-page .lfo-portfolio-grid--motion {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Odd last motion full-width if 3 items */
  .lfo-work-page .lfo-portfolio-grid--motion .lfo-portfolio-item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
}

.lfo-work-page .lfo-portfolio-item {
  margin: 0;
  border: none;
  background: transparent;
  overflow: hidden;
}

.lfo-work-page .lfo-portfolio-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: min(88vw, 320px);
  background: transparent;
}

@media (min-width: 700px) {
  .lfo-work-page .lfo-portfolio-media {
    min-height: min(42vw, 480px);
  }
}

@media (min-width: 1100px) {
  .lfo-work-page .lfo-portfolio-media {
    min-height: 520px;
  }
}

/* Motion stages a bit taller / cinematic */
.lfo-work-page .lfo-portfolio-grid--motion .lfo-portfolio-media {
  aspect-ratio: 16 / 10;
  min-height: min(56vw, 360px);
}

@media (min-width: 700px) {
  .lfo-work-page .lfo-portfolio-grid--motion .lfo-portfolio-media {
    min-height: min(32vw, 420px);
  }
}

.lfo-work-page .lfo-portfolio-media img,
.lfo-work-page .lfo-portfolio-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.lfo-portfolio-grid--empty {
  min-height: 28vh;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--lfo-border);
  background: var(--lfo-bg-elevated);
  padding: 3rem 1.5rem;
  grid-template-columns: 1fr !important;
}

.lfo-work-empty {
  color: var(--lfo-text-muted) !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 !important;
  text-align: center;
}

.lfo-work-page .lfo-portfolio-grid:not(.lfo-portfolio-grid--empty) {
  min-height: 0;
  border: none;
  background: transparent;
}


/* -------------------------------------------------------------------------- */
/* Contact page                                                               */
/* -------------------------------------------------------------------------- */
.lfo-contact-page {
  max-width: 36rem;
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
}

body.page-id-1441 .wp-block-post-title,
body.page-id-1441 .lfo-page-header,
body.postid-1441 .wp-block-post-title,
body.postid-1441 .lfo-page-header {
  display: none !important;
}

.lfo-contact-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
  margin: 0.25rem 0 0.75rem !important;
}

.lfo-contact-lede {
  color: var(--lfo-text-muted) !important;
  margin: 0 0 1.25rem !important;
  font-size: 0.95rem !important;
}

.lfo-contact-form {
  text-align: left;
  margin-bottom: 2rem;
}

.lfo-contact-email {
  margin: 2rem 0 0 !important;
  font-size: 0.9rem !important;
  color: var(--lfo-text-muted) !important;
  letter-spacing: 0.02em;
  pointer-events: none;
  user-select: text;
}

.lfo-contact-form .ff-el-input--label label,
.lfo-contact-form .ff-el-form-control,
.lfo-contact-form label {
  color: var(--lfo-text-muted) !important;
}

.lfo-contact-form .ff-btn-submit {
  width: 100%;
}


/* -------------------------------------------------------------------------- */
/* Store                                                                      */
/* -------------------------------------------------------------------------- */
/* Hide page titles on all store chrome pages (WP uses postid-* here) */
body:has(.lfo-store-page) .lfo-page-header,
body:has(.lfo-store-page) .wp-block-post-title,
body.postid-2501 .lfo-page-header,
body.postid-2501 .wp-block-post-title,
body.postid-1754 .lfo-page-header,
body.postid-1754 .wp-block-post-title,
body.postid-3738 .lfo-page-header,
body.postid-3738 .wp-block-post-title,
body.page-id-2501 .lfo-page-header,
body.page-id-2501 .wp-block-post-title,
body.page-id-1754 .lfo-page-header,
body.page-id-1754 .wp-block-post-title,
body.page-id-3738 .lfo-page-header,
body.page-id-3738 .wp-block-post-title {
  display: none !important;
  margin: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
}

body.woocommerce-shop .wp-block-query-title,
body.post-type-archive-product .wp-block-query-title,
body.woocommerce-shop .woocommerce-breadcrumb,
body.post-type-archive-product .woocommerce-breadcrumb,
body.woocommerce-shop .woocommerce-result-count,
body.woocommerce-shop .woocommerce-ordering,
body.post-type-archive-product .woocommerce-result-count,
body.post-type-archive-product .woocommerce-ordering,
body.woocommerce-shop .wc-block-product-results-count,
body.woocommerce-shop .wc-block-catalog-sorting,
body.post-type-archive-product .wc-block-breadcrumbs,
/* Woo shop page title ("Store") + default archive chrome */
.woocommerce-products-header,
.woocommerce-products-header__title,
h1.woocommerce-products-header__title,
h1.page-title.woocommerce-products-header__title,
body.archive .woocommerce-products-header,
body.archive h1.page-title,
.woocommerce-breadcrumb,
nav.woocommerce-breadcrumb {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  position: absolute !important;
  width: 1px !important;
}

/* Centered store shell — kill constrained/left-pack + Woo float columns */
.lfo-store-main {
  width: 100% !important;
  max-width: 100% !important;
}

.lfo-store-main,
.lfo-store-page {
  box-sizing: border-box;
}

.lfo-store-page {
  max-width: min(1280px, 100%) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 2rem clamp(1.25rem, 4vw, 2rem) 5rem !important;
}

/* Constrained layout otherwise pins content to a narrow content-size on the left */
.lfo-store-page.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.lfo-store-page .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.lfo-store-page .lfo-store-section,
.lfo-store-page .lfo-store-nav,
.lfo-store-main .lfo-store-page > * {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.lfo-store-page.has-global-padding,
.lfo-store-section.has-global-padding {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.lfo-store-nav {
  display: flex !important;
  justify-content: center !important;
  gap: 1.5rem !important;
  margin: 0 auto 2.5rem !important;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--lfo-border);
  width: 100%;
  text-align: center;
}

.lfo-store-nav-link {
  margin: 0 !important;
}

.lfo-store-nav-link.is-active a,
.lfo-store-nav-link a[aria-current="page"] {
  color: var(--lfo-text) !important;
  border-bottom: 1px solid var(--lfo-accent);
  padding-bottom: 0.15rem;
}

.lfo-store-nav-link a {
  color: var(--lfo-text-muted) !important;
  text-decoration: none !important;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}

.lfo-store-nav-link a:hover {
  color: var(--lfo-accent) !important;
  border-color: var(--lfo-accent);
}

.lfo-store-section {
  margin-bottom: 4rem;
  scroll-margin-top: 6rem;
}

.lfo-store-section .lfo-section__label {
  text-align: center;
  margin-bottom: 2rem !important;
}

/*
 * Catalog grid — shop archive + shortcode pages.
 * Large tiles, patterned stages, image + title only. Centered.
 */
.lfo-store-section .woocommerce,
.lfo-store-page .woocommerce,
.lfo-store-main .woocommerce,
body.post-type-archive-product .woocommerce {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  float: none !important;
}

.lfo-store-section ul.products,
.lfo-store-page ul.products,
.lfo-store-main ul.products,
body.post-type-archive-product ul.products,
body.woocommerce-shop ul.products,
ul.products.columns-3,
ul.products.columns-4 {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 2rem !important;
  margin: 0 auto !important;
  padding: 0 !important;
  list-style: none !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  clear: both !important;
}

@media (min-width: 700px) {
  .lfo-store-section ul.products,
  .lfo-store-page ul.products,
  .lfo-store-main ul.products,
  body.post-type-archive-product ul.products,
  body.woocommerce-shop ul.products,
  ul.products.columns-3,
  ul.products.columns-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 1.75rem !important;
  }
}

.lfo-store-section ul.products::before,
.lfo-store-section ul.products::after,
.lfo-store-page ul.products::before,
.lfo-store-page ul.products::after,
.lfo-store-main ul.products::before,
.lfo-store-main ul.products::after,
body.post-type-archive-product ul.products::before,
body.post-type-archive-product ul.products::after,
ul.products::before,
ul.products::after {
  display: none !important;
  content: none !important;
}

.lfo-store-section ul.products li.product,
.lfo-store-page ul.products li.product,
.lfo-store-main ul.products li.product,
body.post-type-archive-product ul.products li.product,
body.woocommerce-shop ul.products li.product,
ul.products.columns-3 li.product,
ul.products li.product.first,
ul.products li.product.last {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  display: flex !important;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0 !important;
  position: relative;
  transition: transform 0.22s ease;
}

/* Product link: stack image then title */
.lfo-store-section ul.products li.product > a.woocommerce-LoopProduct-link,
.lfo-store-page ul.products li.product > a.woocommerce-LoopProduct-link,
.lfo-store-main ul.products li.product > a.woocommerce-LoopProduct-link,
body.post-type-archive-product ul.products li.product > a.woocommerce-LoopProduct-link,
body.woocommerce-shop ul.products li.product > a.woocommerce-LoopProduct-link {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  gap: 0.85rem;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible;
  text-decoration: none !important;
  width: 100%;
}

/* Large patterned stage behind product art */
.lfo-store-section ul.products li.product a img,
.lfo-store-section ul.products li.product img,
.lfo-store-page ul.products li.product a img,
.lfo-store-page ul.products li.product img,
.lfo-store-main ul.products li.product a img,
.lfo-store-main ul.products li.product img,
body.post-type-archive-product ul.products li.product a img,
body.post-type-archive-product ul.products li.product img,
body.woocommerce-shop ul.products li.product a img,
body.woocommerce-shop ul.products li.product img,
ul.products li.product a img,
ul.products li.product img.attachment-woocommerce_thumbnail,
ul.products li.product img.woocommerce-placeholder {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: min(88vw, 280px) !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: 0 !important;
  padding: 12% !important;
  box-sizing: border-box !important;
  display: block !important;
  margin: 0 !important;
  border: 1px solid rgba(255, 255, 254, 0.08) !important;
  background-color: #12101c !important;
  background-image:
    linear-gradient(rgba(255, 255, 254, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 254, 0.05) 1px, transparent 1px),
    radial-gradient(ellipse 85% 75% at 50% 40%, rgba(176, 38, 255, 0.14) 0%, transparent 58%),
    radial-gradient(circle at 50% 110%, rgba(15, 14, 23, 0.95) 0%, transparent 55%),
    linear-gradient(160deg, #222033 0%, #12101c 45%, #0c0b14 100%) !important;
  background-size:
    28px 28px,
    28px 28px,
    auto,
    auto,
    auto !important;
  background-position: center center !important;
  transition:
    border-color 0.22s ease,
    transform 0.22s ease,
    box-shadow 0.22s ease;
}

@media (min-width: 700px) {
  .lfo-store-section ul.products li.product a img,
  .lfo-store-page ul.products li.product a img,
  .lfo-store-main ul.products li.product a img,
  body.post-type-archive-product ul.products li.product a img,
  body.woocommerce-shop ul.products li.product a img,
  ul.products li.product a img {
    min-height: min(42vw, 520px) !important;
  }
}

@media (min-width: 1100px) {
  .lfo-store-section ul.products li.product a img,
  .lfo-store-page ul.products li.product a img,
  .lfo-store-main ul.products li.product a img,
  body.post-type-archive-product ul.products li.product a img,
  body.woocommerce-shop ul.products li.product a img,
  ul.products li.product a img {
    min-height: 560px !important;
  }
}

/* Subtle hover: lift + soft purple glow (catalog tiles) */
.lfo-store-section ul.products li.product:hover,
.lfo-store-page ul.products li.product:hover,
.lfo-store-main ul.products li.product:hover,
body.post-type-archive-product ul.products li.product:hover,
body.woocommerce-shop ul.products li.product:hover,
ul.products li.product:hover {
  transform: translateY(-5px);
}

.lfo-store-section ul.products li.product:hover a img,
.lfo-store-page ul.products li.product:hover a img,
.lfo-store-main ul.products li.product:hover a img,
body.post-type-archive-product ul.products li.product:hover a img,
body.woocommerce-shop ul.products li.product:hover a img,
ul.products li.product:hover a img {
  border-color: rgba(176, 38, 255, 0.45) !important;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.4),
    0 0 36px rgba(176, 38, 255, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .lfo-store-section ul.products li.product,
  .lfo-store-page ul.products li.product,
  .lfo-store-main ul.products li.product,
  body.post-type-archive-product ul.products li.product,
  ul.products li.product {
    transition: none !important;
  }

  .lfo-store-section ul.products li.product:hover,
  .lfo-store-page ul.products li.product:hover,
  .lfo-store-main ul.products li.product:hover,
  body.post-type-archive-product ul.products li.product:hover,
  ul.products li.product:hover {
    transform: none;
  }
}

/* Title under stage */
.lfo-store-section ul.products li.product .woocommerce-loop-product__title,
.lfo-store-page ul.products li.product .woocommerce-loop-product__title,
.lfo-store-main ul.products li.product .woocommerce-loop-product__title,
body.post-type-archive-product ul.products li.product .woocommerce-loop-product__title,
body.woocommerce-shop ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-product__title {
  text-align: center !important;
  font-size: clamp(0.95rem, 1.6vw, 1.15rem) !important;
  line-height: 1.3 !important;
  padding: 0 0.25rem !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  color: var(--lfo-text) !important;
  font-family: var(--lfo-font-display) !important;
  font-weight: 500 !important;
}

/* No prices, no Select options / add to cart on catalog */
.lfo-store-section ul.products li.product .price,
.lfo-store-page ul.products li.product .price,
.lfo-store-main ul.products li.product .price,
body.post-type-archive-product ul.products li.product .price,
body.woocommerce-shop ul.products li.product .price,
ul.products li.product .price,
ul.products li.product .woocommerce-Price-amount,
ul.products li.product .button,
ul.products li.product a.button,
ul.products li.product .added_to_cart,
ul.products li.product .add_to_cart_button,
ul.products li.product .product_type_variable,
ul.products li.product .product_type_simple,
ul.products li.product .ajax_add_to_cart,
.lfo-store-section ul.products li.product .button,
.lfo-store-page ul.products li.product .button,
.lfo-store-main ul.products li.product .button,
body.post-type-archive-product ul.products li.product .button,
body.woocommerce-shop ul.products li.product .button {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  border: none !important;
  overflow: hidden !important;
  visibility: hidden !important;
  position: absolute !important;
  width: 1px !important;
  clip: rect(0, 0, 0, 0) !important;
  font-size: 0 !important;
}

/* Hide empty-assets helper when products exist (JS-free: hide if products list present) */
.lfo-store-section--assets:has(ul.products li.product) .lfo-store-empty--assets {
  display: none !important;
}

.lfo-store-section--assets:not(:has(ul.products li.product)) .lfo-store-empty--assets,
.lfo-store-empty {
  color: var(--lfo-text-muted) !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 2rem 0 0 !important;
}

/* When shortcode returns no products it may leave empty wrapper */
.lfo-store-section--assets .woocommerce:empty + .lfo-store-empty,
.lfo-store-section--assets .products:empty {
  display: block;
}


/* -------------------------------------------------------------------------- */
/* Size guide (Printful)                                                      */
/* -------------------------------------------------------------------------- */
.lfo-size-guide {
  margin: 1.5rem 0 0.5rem;
  padding: 1.25rem 1rem 1rem;
  border: 1px solid var(--lfo-border);
  border-radius: var(--lfo-radius-lg);
  background: var(--lfo-bg-elevated);
}

.lfo-size-guide__label {
  font-size: 0.7rem !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lfo-accent) !important;
  font-weight: 600;
  margin: 0 0 0.75rem !important;
}

/* Hide product category / tag meta on single products */
body.single-product .product_meta,
body.single-product .posted_in,
body.single-product .tagged_as,
body.single-product .wp-block-post-terms,
body.single-product .wp-block-post-terms__prefix,
body.single-product .wp-block-woocommerce-product-meta,
body.single-product .woocommerce-breadcrumb,
body.single-product .wp-block-woocommerce-breadcrumbs,
body.single-product .wp-block-breadcrumbs,
.single-product .product_meta,
.single-product .posted_in,
.single-product .wp-block-post-terms {
  display: none !important;
}

.lfo-size-guide__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -0.25rem;
  padding: 0 0.25rem;
}

.lfo-size-guide__table {
  width: 100%;
  border-collapse: collapse;
  min-width: 320px;
  font-size: 0.8rem;
  color: var(--lfo-text);
}

.lfo-size-guide__table th,
.lfo-size-guide__table td {
  border: 1px solid var(--lfo-border);
  padding: 0.45rem 0.5rem;
  text-align: center;
  white-space: nowrap;
}

.lfo-size-guide__table thead th {
  background: rgba(176, 38, 255, 0.08);
  color: var(--lfo-text);
  font-weight: 600;
  font-size: 0.75rem;
}

.lfo-size-guide__table tbody th {
  text-align: left;
  font-weight: 500;
  color: var(--lfo-text-muted);
  background: transparent;
}

.lfo-size-guide__source {
  margin: 0.75rem 0 0 !important;
  font-size: 0.7rem !important;
  color: var(--lfo-text-muted) !important;
  opacity: 0.85;
}

/* Avoid duplicate giant guide in tab if summary already showed it — tab still useful */
.woocommerce-Tabs-panel--lfo_size_guide .lfo-size-guide {
  border: none;
  background: transparent;
  padding: 0;
}