/*
Theme Name:   Light Craze
Theme URI:    https://lightcraze.com
Description:  Light Craze child theme for Kadence. Anime and gaming wall art, Pakistan.
              Dark-only by design (LD-07). Palette locked at seven — see tokens.css and
              ../../09-design-system.md. Do not add an eighth colour (LCB-01), and never
              use a Naqshira colour (LCB-02).
Author:       Light Craze
Version:      1.0.0
Template:     kadence
Text Domain:  lightcraze
*/

/* Everything token-level lives in tokens.css, loaded separately so it can be edited
   without touching the theme header. This file holds only Kadence overrides. */

/* Kadence paints its own light defaults in a few places — override to the palette. */
.site,
.content-bg,
body.wp-singular .content-bg {
  background: var(--lc-ground);
}

.site-header-wrap,
.site-footer {
  background: var(--lc-surface);
  border-color: var(--lc-line);
}

/* LC-161 : product grids never drop to one column */
.woocommerce ul.products {
  display: grid;
  gap: var(--lc-4);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px){ .woocommerce ul.products { grid-template-columns: repeat(4, 1fr); } }
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }
.woocommerce ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; }

/* Price in Volt, tabular (LCB-04) */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price {
  color: var(--lc-volt);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Sale badge — Ember fill, Bone text. Ember is never text on ground (LCB-03). */
.woocommerce span.onsale {
  background: var(--lc-ember);
  color: var(--lc-bone);
  border-radius: var(--lc-radius-sm);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 2px 8px;
  min-height: 0;
  min-width: 0;
  line-height: 1.6;
}

/* LC-107 : backlit cards carry a "lights up" badge */
.lc-badge-lit {
  display: inline-block;
  border: 1px solid var(--lc-volt);
  color: var(--lc-volt);
  border-radius: var(--lc-radius-sm);
  font-size: .6rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 1px 6px;
  width: max-content;
}

/* Buttons — Volt fill, Ground text, 48px target (LC-65) */
.woocommerce button.button,
.woocommerce a.button,
.woocommerce #respond input#submit,
.wc-block-components-button {
  background: var(--lc-volt);
  color: var(--lc-ground);
  border-radius: var(--lc-radius-sm);
  min-height: 48px;
  font-weight: 700;
}
.woocommerce button.button:hover,
.woocommerce a.button:hover {
  background: var(--lc-volt);
  color: var(--lc-ground);
  box-shadow: var(--lc-glow-volt);
}

/* LC-62 : visible focus everywhere */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--lc-volt);
  outline-offset: 3px;
}

/* ==========================================================================
   Storefront components — homepage, utility pages and forms
   [lc_search] · [lc_series_tiles] · [lc_products] · claim and tracking forms
   ========================================================================== */

/* LC-27 : a real field, above the fold, never behind an icon */
.lc-search {
  display: flex;
  gap: var(--lc-2);
  max-width: 34rem;
  margin: var(--lc-5) 0;
}
.lc-search__field {
  flex: 1 1 auto;
  min-width: 0;                      /* lets the field shrink inside the flex row */
}
.lc-search__go {
  flex: 0 0 auto;
  background: var(--lc-volt);
  color: var(--lc-ground);
  border: 0;
  border-radius: var(--lc-radius-sm);
  min-height: 48px;
  padding: 0 var(--lc-5);
  font-weight: 700;
  cursor: pointer;
}
.lc-search__go:hover { box-shadow: var(--lc-glow-volt); }

/* Product rows — these render nothing at all when the catalogue is empty */
.lc-row { margin: var(--lc-7) 0; }
.lc-row__heading { margin: 0 0 var(--lc-4); }

/* Callout used on the policy pages */
.lc-note {
  border-left: 3px solid var(--lc-volt);
  background: var(--lc-surface);
  border-radius: var(--lc-radius-sm);
  padding: var(--lc-3) var(--lc-4);
  margin: var(--lc-4) 0;
}

/* Contact, claim and tracking forms */
.lc-contact-buttons { display: flex; flex-wrap: wrap; gap: var(--lc-3); }
.lc-contact-buttons .button { min-height: 48px; display: inline-flex; align-items: center; }

.lc-claim-form label,
.lc-track-form label { display: inline-block; margin-bottom: var(--lc-1); }
.lc-claim-form .description,
.lc-track-form .description {
  display: block;
  margin-top: var(--lc-1);
  color: var(--lc-smoke);
  font-size: .875rem;
}
.lc-claim-form input[type="file"] {
  min-height: 48px;
  padding: var(--lc-2) var(--lc-3);
  width: 100%;
  max-width: 34rem;
}
.lc-track-result .shop_table { width: 100%; max-width: 34rem; }

/* Tables in page content scroll rather than pushing the page sideways */
.wp-block-table { overflow-x: auto; }
.wp-block-table table { border-collapse: collapse; width: 100%; }
.wp-block-table th,
.wp-block-table td {
  border: 1px solid var(--lc-line);
  padding: var(--lc-2) var(--lc-3);
  text-align: left;
  vertical-align: top;
}
.wp-block-table th { background: var(--lc-surface); font-weight: 700; }

/* ==========================================================================
   Format ladder — homepage section 5, the upsell (LC-30 … LC-33)
   ========================================================================== */
.lc-formats {
  list-style: none;
  margin: var(--lc-5) 0;
  padding: 0;
  display: grid;
  gap: var(--lc-4);
  grid-template-columns: 1fr;
}
@media (min-width: 820px) { .lc-formats { grid-template-columns: repeat(3, 1fr); } }

.lc-format { margin: 0; }
.lc-format__link {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--lc-2);
  height: 100%;
  padding: var(--lc-5);
  background: var(--lc-surface);
  border: 1px solid var(--lc-line);
  border-radius: var(--lc-radius);
  text-decoration: none;
  color: var(--lc-bone);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.lc-format__link:hover {
  border-color: var(--lc-volt);
  box-shadow: var(--lc-glow-volt);
  transform: translateY(-2px);
}

/* Backlit leads — the only card that carries the accent edge */
.lc-format--lead .lc-format__link { border-color: var(--lc-volt); }
.lc-format__flag {
  align-self: flex-start;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lc-ground);
  background: var(--lc-volt);
  padding: 3px var(--lc-2);
  border-radius: var(--lc-radius-sm);
}

.lc-format__name {
  margin: 0;
  font-size: 1.15rem;
  color: var(--lc-bone);
}
.lc-format__what { margin: 0; }
.lc-format__best {
  margin: 0;
  color: var(--lc-smoke);
  font-size: .92rem;
}
.lc-format__go {
  margin-top: auto;
  padding-top: var(--lc-3);
  color: var(--lc-volt);
  font-weight: 700;
  font-size: .92rem;
}
.lc-format__go::after { content: " →"; }

/* --------------------------------------------------------------------------
   Homepage rhythm — the sections need air between them, and the opening
   needs to read as a hero rather than as the first paragraph of a document.
   -------------------------------------------------------------------------- */
.home .entry-content > h2 { margin-top: var(--lc-7); }
.home .entry-content > h1 { margin-bottom: var(--lc-3); }
.home .entry-content > h1 + p {
  font-size: 1.15rem;
  color: var(--lc-smoke);
  max-width: 46ch;
}
.home .lc-search { margin-block: var(--lc-6) var(--lc-7); }

/* ==========================================================================
   Homepage bloom demonstration (LD-10, LC-104)
   The interaction is the argument for the format. Give it room.
   ========================================================================== */
.lc-demo {
  display: grid;
  gap: var(--lc-6);
  align-items: center;
  margin: var(--lc-7) 0;
  padding: var(--lc-6);
  background: var(--lc-surface);
  border: 1px solid var(--lc-line);
  border-radius: var(--lc-radius);
}
@media (min-width: 860px) {
  .lc-demo { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--lc-7); }
}
.lc-demo .lc-bloom { margin: 0; }
.lc-demo__copy > * { margin: 0 0 var(--lc-3); }
.lc-demo__copy > *:last-child { margin-bottom: 0; }
.lc-demo__copy h2 { font-size: clamp(1.3rem, 3vw, 1.75rem); }
.lc-demo__cta {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--lc-5);
  background: var(--lc-volt);
  color: var(--lc-ground);
  font-weight: 700;
  border-radius: var(--lc-radius-sm);
  text-decoration: none;
}
.lc-demo__cta:hover { box-shadow: var(--lc-glow-volt); color: var(--lc-ground); }
.lc-demo__note {
  border-left: 3px solid var(--lc-ember);
  padding-left: var(--lc-3);
  color: var(--lc-smoke);
  font-size: .85rem;
}

/* --------------------------------------------------------------------------
   Trust bar — COD is the purchase-blocking question in this market, so it is
   answered before anything else rather than in the footer.
   -------------------------------------------------------------------------- */
.lc-trustbar {
  background: var(--lc-surface);
  border-bottom: 1px solid var(--lc-line);
  font-size: .82rem;
  color: var(--lc-smoke);
}
/* The ribbon row is .lc-trustbar__track now — see the marquee rules. */
.lc-trustbar li { display: flex; align-items: center; gap: var(--lc-2); }
.lc-trustbar strong { color: var(--lc-bone); font-weight: 700; }
.lc-trustbar li::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--lc-volt);
  flex: 0 0 auto;
}

/* Price on the format cards — the ladder is meaningless without it (LC-30) */
.lc-format__price {
  margin: 0;
  color: var(--lc-volt);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Hero — [lc_hero]
   Built to the approved mockup: full-bleed room shot, copy left behind a scrim,
   Volt rule on the column edge, series chips beneath the actions.
   ========================================================================== */
.lc-hero {
  position: relative;
  margin: 0 0 var(--lc-7);
  isolation: isolate;
}

/* Full-bleed: escape the theme's content column without touching its markup. */
.lc-hero.has-image {
  min-height: clamp(520px, 74vh, 760px);
  display: flex;
  align-items: center;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  padding: var(--lc-8) max(var(--lc-5), calc(50vw - 600px + var(--lc-5)));
  overflow: hidden;
}
.lc-hero__media { position: absolute; inset: 0; z-index: -2; }
.lc-hero__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Scrim: dark at the left where the copy sits, clearing to the right so the lit
   panel in the picture stays the brightest thing on the screen. */
.lc-hero.has-image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to right, rgb(21 18 15 / .95) 0%, rgb(21 18 15 / .88) 34%,
                              rgb(21 18 15 / .45) 58%, rgb(21 18 15 / .10) 100%),
    linear-gradient(to bottom, rgb(21 18 15 / .55) 0%, rgb(21 18 15 / 0) 30%);
}

.lc-hero.is-type-led { padding-left: 0; }

.lc-hero__title {
  margin: 0 0 var(--lc-4);
  font-size: clamp(2.1rem, 5.4vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.lc-hero__sub {
  margin: 0 0 var(--lc-5);
  color: var(--lc-smoke);
  font-size: clamp(.98rem, 1.5vw, 1.08rem);
  max-width: 44ch;
}
.lc-hero .lc-search { margin: 0 0 var(--lc-5); max-width: 32rem; }

.lc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lc-3) var(--lc-5);
  margin: 0 0 var(--lc-5);
}
.lc-hero__cta {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--lc-6);
  background: var(--lc-volt);
  color: var(--lc-ground);
  font-weight: 700;
  border-radius: var(--lc-radius-sm);
  text-decoration: none;
}
.lc-hero__cta:hover { box-shadow: var(--lc-glow-volt); color: var(--lc-ground); }
.lc-hero__alt {
  color: var(--lc-bone);
  text-decoration: underline;
  text-underline-offset: .22em;
  font-weight: 600;
}
.lc-hero__alt:hover { color: var(--lc-volt); }

/* Series chips — the header nav is flat, so series discovery lives here. */
.lc-hero__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--lc-2);
}
.lc-hero__chips a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--lc-4);
  border: 1px solid var(--lc-line);
  border-radius: var(--lc-radius-sm);
  background: rgb(33 28 23 / .72);
  color: var(--lc-bone);
  text-decoration: none;
  font-size: .92rem;
  white-space: nowrap;
  transition: border-color .18s ease, color .18s ease;
}
.lc-hero__chips a:hover { border-color: var(--lc-volt); color: var(--lc-volt); }

@media (max-width: 860px) {
  /* On a phone the artwork sits behind the copy rather than beside it, so the scrim
     has to work top-to-bottom instead of left-to-right. */
  .lc-hero.has-image {
    min-height: 0;
    padding: var(--lc-7) var(--lc-5);
    align-items: flex-end;
  }
  .lc-hero.has-image::before {
    background: linear-gradient(to top, rgb(21 18 15 / .96) 0%, rgb(21 18 15 / .88) 46%,
                                        rgb(21 18 15 / .40) 100%);
  }
  .lc-hero__inner { max-width: none; }
  .lc-hero__chips { gap: var(--lc-1) var(--lc-2); }
}

/* ==========================================================================
   Hero — [lc_hero]
   Arcadia North opens on imagery. Two states: with a hero image, and without,
   because the second is what exists until the shoot happens.
   ========================================================================== */
.lc-hero { position: relative; margin: 0 0 var(--lc-7); }
.lc-hero__inner { position: relative; z-index: 1; }
.lc-hero__sub {
  margin: 0 0 var(--lc-5);
  color: var(--lc-smoke);
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  max-width: 46ch;
}
.lc-hero .lc-search { margin: 0 0 var(--lc-5); }
.lc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lc-3) var(--lc-5);
  margin: 0;
}
.lc-hero__cta {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--lc-5);
  background: var(--lc-volt);
  color: var(--lc-ground);
  font-weight: 700;
  border-radius: var(--lc-radius-sm);
  text-decoration: none;
}
.lc-hero__cta:hover { box-shadow: var(--lc-glow-volt); color: var(--lc-ground); }
.lc-hero__alt { color: var(--lc-bone); text-decoration: underline; }
.lc-hero__alt:hover { color: var(--lc-volt); }

/* With imagery: full-bleed picture, copy sitting over a scrim so it stays legible
   whatever the artwork does underneath. */
.lc-hero.has-image {
  min-height: min(78vh, 640px);
  display: flex;
  align-items: flex-end;
  padding: var(--lc-7) var(--lc-5);
  border-radius: var(--lc-radius);
  overflow: hidden;
}
.lc-hero__media { position: absolute; inset: 0; z-index: 0; }
.lc-hero__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Type-led fallback: no image, so the type carries it and a Volt rule marks the edge. */
.lc-hero.is-type-led { padding-left: var(--lc-5); border-left: 3px solid var(--lc-volt); }

/* ==========================================================================
   Header — to the approved mockup
   ========================================================================== */
.site-header-wrap { background: var(--lc-ground); border-bottom: 1px solid var(--lc-line); }
.site-title { font-family: var(--lc-font-display); font-weight: 700; letter-spacing: -.01em; }
.site-branding .site-title, .site-branding a { color: var(--lc-bone); }

.main-navigation .menu > li > a { color: var(--lc-smoke); font-weight: 500; }
.main-navigation .menu > li > a:hover,
.main-navigation .menu > li.current-menu-item > a { color: var(--lc-bone); }

/* Cart: the word, with the count riding on it as a tag. The badge is only in the
   markup when the cart is not empty, so there is never a permanent "0". */
.lc-cart { position: relative; display: inline-flex; align-items: center; }
.lc-cart__count {
  position: absolute;
  top: -.55em;
  right: -1.15em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--lc-volt);
  color: var(--lc-ground);
  font-size: .7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.lc-cart-item { margin-right: var(--lc-3); }

/* The nav reads flat, as drawn — but the dropdowns still work. The caret is hidden
   on the DESKTOP nav only; the mobile menu keeps its expand buttons, which is the
   one place they are the sole way in. */
.main-navigation .dropdown-nav-toggle { display: none; }

/* Hiding the caret removes the keyboard route into the submenu, so put it back:
   hover opens it for a mouse, focus-within opens it for a keyboard. */
.main-navigation .menu li.menu-item-has-children:focus-within > ul.sub-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

/* Logo lockup.
   The wordmark inside the lockup is only 28% of the artwork's height, so a 46px logo
   rendered it at ~13px — under body size, and the reason it read as undersized.
   At 72px the wordmark lands near 20px, comfortably above the nav. */
.site-branding img.custom-logo {
  height: 72px;
  width: auto;
  max-width: none;          /* beats Kadence's 200px cap, which would re-crop the ratio */
  display: block;
}
@media (max-width: 1024px) { .site-branding img.custom-logo { height: 62px; } }
@media (max-width: 767px)  { .site-branding img.custom-logo { height: 53px; } }

/* Kadence sizes the brand link by the title it no longer renders; let it hug the image. */
.site-branding a.brand { display: inline-flex; align-items: center; }
.site-branding .site-title-wrap { display: none; }

/* Trust bar to match: centred, Volt dot, emphasis on the claim not the qualifier. */
.lc-trustbar { background: var(--lc-ground); border-bottom: 1px solid var(--lc-line); }

/* ==========================================================================
   Format section — [lc_formats], built to the approved mock
   ========================================================================== */
.lc-fmt {
  margin: 0 0 var(--lc-8);
  text-align: center;
}

/* Eyebrow with a rule running out either side */
.lc-fmt__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--lc-4);
  margin: 0 0 var(--lc-3);
  color: var(--lc-volt);
  font-family: var(--lc-font-display);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.lc-fmt__eyebrow::before,
.lc-fmt__eyebrow::after {
  content: "";
  height: 1px;
  width: clamp(28px, 7vw, 78px);
  background: var(--lc-line);
}

.lc-fmt__title {
  margin: 0 0 var(--lc-3);
  font-size: clamp(2.2rem, 6.4vw, 4.2rem);
  line-height: .98;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.lc-fmt__sub { margin: 0 0 var(--lc-6); color: var(--lc-smoke); }

.lc-fmt__grid {
  list-style: none;
  margin: 0 0 var(--lc-5);
  padding: 0;
  display: grid;
  gap: var(--lc-4);
  grid-template-columns: 1fr;
  text-align: left;
}
@media (min-width: 900px) { .lc-fmt__grid { grid-template-columns: repeat(3, 1fr); } }

.lc-fmt__card { margin: 0; }
.lc-fmt__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--lc-surface);
  border: 1px solid var(--lc-line);
  border-radius: var(--lc-radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--lc-bone);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.lc-fmt__link:hover {
  border-color: var(--lc-volt);
  box-shadow: var(--lc-glow-volt);
  transform: translateY(-2px);
  color: var(--lc-bone);
}

.lc-fmt__media {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--lc-ground);
  overflow: hidden;
}
.lc-fmt__img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lc-fmt__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: var(--lc-5);
}
.lc-fmt__name {
  font-family: var(--lc-font-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -.01em;
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: var(--lc-2);
}
.lc-fmt__what { color: var(--lc-bone); font-size: .95rem; }
.lc-fmt__rule {
  display: block;
  height: 1px;
  background: var(--lc-line);
  margin: var(--lc-4) 0;
}
.lc-fmt__label {
  color: var(--lc-smoke);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: var(--lc-1);
}
.lc-fmt__price {
  color: var(--lc-volt);
  font-size: 1.4rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.lc-fmt__go {
  margin-top: auto;
  padding-top: var(--lc-5);
  font-family: var(--lc-font-display);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: var(--lc-2);
}
.lc-fmt__go::after {
  content: "";
  width: 20px;
  height: 1px;
  background: var(--lc-volt);
  position: relative;
  transition: width .18s ease;
  /* arrowhead */
  box-shadow: 4px -3px 0 -1px var(--lc-volt), 4px 3px 0 -1px var(--lc-volt);
}
.lc-fmt__link:hover .lc-fmt__go::after { width: 30px; }

/* ==========================================================================
   Vertical rhythm pass — ribbon, header, hero, format section
   Each block below overrides an earlier rule deliberately; kept together so the
   spacing of the top of the page can be read in one place.
   ========================================================================== */

/* ---- 1. Delivery ribbon -------------------------------------------------
   Three messages, one line on desktop. On a phone they will not fit, so the row
   scrolls sideways instead of stacking into three lines and tripling the height
   before anyone has seen the product. */
/* Fade the right edge on mobile so it reads as scrollable rather than clipped. */
@media (max-width: 859px) {
  .lc-trustbar { position: relative; }
  .lc-trustbar::after {
    content: "";
    position: absolute;
    inset: 0 0 0 auto;
    width: 40px;
    pointer-events: none;
    background: linear-gradient(to right, rgb(21 18 15 / 0), var(--lc-ground));
  }
}

/* ---- 2. Header ----------------------------------------------------------
   Target 72–80px total. Kadence pads the row generously by default; this trims
   it and sizes the logo to fit rather than the other way round. */
.site-header-main-section-left,
.site-header-main-section-right { padding-block: 0; }
.site-main-header-inner-wrap { min-height: 0; }
.site-header-row-container-inner > .site-container { padding-block: 8px; }
.site-branding { padding: 0; }
.site-branding img.custom-logo { height: 64px; }
@media (max-width: 1024px) { .site-branding img.custom-logo { height: 56px; } }
@media (max-width: 767px)  { .site-branding img.custom-logo { height: 46px; } }

/* Cart stays out of the hamburger and visible at every width. */
@media (max-width: 1024px) {
  .main-navigation .lc-cart-item { display: list-item; }
  .site-header-main-section-right .lc-cart-item { order: 99; }
}

/* ---- 3. Hero ------------------------------------------------------------
   The headline was sitting a long way below the header. Bring it up. */

/* Push the scrim further right so the lit panel keeps the right 40–45% and the
   copy column stays firmly dark. */
.lc-hero.has-image::before {
  background:
    linear-gradient(to right, rgb(21 18 15 / .96) 0%, rgb(21 18 15 / .92) 40%,
                              rgb(21 18 15 / .55) 58%, rgb(21 18 15 / .08) 100%),
    linear-gradient(to bottom, rgb(21 18 15 / .5) 0%, rgb(21 18 15 / 0) 26%);
}

/* Series chips: one scrolling row on mobile, never three ragged lines. */
.lc-hero__chipwrap { margin-top: var(--lc-1); }
@media (max-width: 767px) {
  .lc-hero__chipwrap {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* bleed to the screen edge so the last chip is visibly cut, not just missing */
    margin-inline: calc(-1 * var(--lc-5));
    padding-inline: var(--lc-5);
  }
  .lc-hero__chipwrap::-webkit-scrollbar { display: none; }
  .lc-hero__chips { flex-wrap: nowrap; }
  .lc-hero__chips li { flex: 0 0 auto; }
}

/* ---- 4. Choose your format ---------------------------------------------- */

.lc-fmt__grid { margin-bottom: 0; }

/* Equal heights with the price and CTA baselines aligned across all three: the
   description is reserved two lines so a wrap in one card cannot shift the rest. */
.lc-fmt__link { height: 100%; }
.lc-fmt__what {
  min-height: 2.9em;
  color: var(--lc-smoke);
}
.lc-fmt__body { padding: var(--lc-5) var(--lc-5) var(--lc-6); }

/* ==========================================================================
   Backlit off/on comparison — [lc_backlit]
   ========================================================================== */
.lc-bx-section__inner {
  display: grid;
  gap: var(--lc-6);
  align-items: center;
  margin-bottom: var(--lc-5);
}
@media (min-width: 960px) {
  .lc-bx-section__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--lc-8);
  }
}

/* ---- copy column ---- */
.lc-bx__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--lc-2);
  margin: 0 0 var(--lc-4);
  color: var(--lc-volt);
  font-family: var(--lc-font-display);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.lc-bx__title {
  margin: 0 0 var(--lc-4);
  font-size: clamp(2.1rem, 5.6vw, 3.6rem);
  line-height: .98;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
/* "On." is the whole point of the sentence, so it is the only word that lights up. */
.lc-bx__title em { font-style: normal; color: var(--lc-volt); }

.lc-bx__sub { margin: 0 0 var(--lc-6); color: var(--lc-smoke); }
.lc-bx__from {
  margin: 0 0 var(--lc-1);
  color: var(--lc-smoke);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.lc-bx__price {
  margin: 0 0 var(--lc-5);
  color: var(--lc-volt);
  font-family: var(--lc-font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.2rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.lc-bx__actions { margin: 0; }
.lc-bx__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--lc-2);
  min-height: 52px;
  padding: 0 var(--lc-6);
  background: var(--lc-volt);
  color: var(--lc-ground);
  border-radius: var(--lc-radius-sm);
  font-family: var(--lc-font-display);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
}
.lc-bx__cta::after {
  content: "";
  width: 16px; height: 1px;
  background: currentColor;
  box-shadow: 3px -3px 0 -1px currentColor, 3px 3px 0 -1px currentColor;
}
.lc-bx__cta:hover { box-shadow: var(--lc-glow-volt); color: var(--lc-ground); }

/* ---- the comparison ---- */
.lc-bx { margin: 0; }
.lc-bx__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: 660px;
  margin-inline: auto;
  border: 1px solid var(--lc-line);
  border-radius: var(--lc-radius);
  overflow: hidden;
  background: var(--lc-ground);
  cursor: ew-resize;
  /* THE critical line. Vertical scrolling always belongs to the browser, so a
     downward swipe can never be swallowed by the drag handler — which is the
     objection LC-105 raised against sliders. Only horizontal reaches the JS. */
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.lc-bx__base, .lc-bx__on { position: absolute; inset: 0; display: block; }
.lc-bx__on { clip-path: inset(0 0 0 50%); will-change: clip-path; }
.lc-bx__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* State chips */
.lc-bx__chip {
  position: absolute;
  top: var(--lc-4);
  z-index: 2;
  padding: 6px 12px;
  border-radius: var(--lc-radius-sm);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  pointer-events: none;
}
.lc-bx__chip--off { left: var(--lc-4); background: rgb(21 18 15 / .82); color: var(--lc-bone); }
.lc-bx__chip--on  { right: var(--lc-4); background: var(--lc-volt); color: var(--lc-ground); }

/* Divider + handle */
.lc-bx__handle {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 3;
  width: 56px;
  height: 100%;
  transform: translateX(-50%);
  background: none;
  border: 0;
  padding: 0;
  cursor: ew-resize;
  color: var(--lc-volt);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* the hairline */
.lc-bx__handle::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: var(--lc-bone);
  opacity: .9;
}
/* the grip */
.lc-bx__handle > span {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--lc-ground);
  border: 2px solid var(--lc-volt);
  box-shadow: var(--lc-glow-volt);
}
.lc-bx__handle:focus-visible > span { outline: 2px solid var(--lc-bone); outline-offset: 3px; }

.lc-bx__hint {
  margin: var(--lc-3) 0 0;
  text-align: center;
  color: var(--lc-smoke);
  font-size: .85rem;
}

/* Until both frames have decoded, do not invite interaction (LC-106). */
.lc-bx:not(.is-ready) .lc-bx__handle { opacity: 0; pointer-events: none; }
.lc-bx.is-dragging .lc-bx__frame { cursor: grabbing; }

/* ---- benefits strip ---- */
.lc-bx__benefits {
  list-style: none;
  margin: 0;
  padding: var(--lc-5);
  display: grid;
  gap: var(--lc-5) var(--lc-4);
  grid-template-columns: 1fr;
  background: var(--lc-surface);
  border: 1px solid var(--lc-line);
  border-radius: var(--lc-radius);
}
@media (min-width: 620px) { .lc-bx__benefits { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) {
  .lc-bx__benefits { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .lc-bx__benefits li + li { border-left: 1px solid var(--lc-line); padding-left: var(--lc-5); }
}
.lc-bx__benefits li { display: flex; align-items: flex-start; gap: var(--lc-3); margin: 0; }
.lc-bx__bicon { color: var(--lc-volt); flex: 0 0 auto; display: flex; }
.lc-bx__btext { display: flex; flex-direction: column; gap: 2px; }
.lc-bx__btext strong { color: var(--lc-bone); font-weight: 600; }
.lc-bx__btext > span { color: var(--lc-smoke); font-size: .9rem; line-height: 1.4; }

@media (prefers-reduced-motion: reduce) {
  .lc-bx__on, .lc-bx__handle { transition: none !important; }
}

/* ==========================================================================
   Typography — self-hosted display face
   Archivo was named in tokens.css from the start but never actually loaded, so
   every heading was falling through to system-ui: Segoe UI on Windows, SF on
   Mac. Neither is condensed, which is why the headings did not look like the
   mocks. Self-hosted rather than pulled from Google (LC-93) — a shared Google
   Fonts request pattern is one more thing identical across two sites.
   Variable weight 400–900, latin subset, 35 KB.
   ========================================================================== */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("assets/fonts/archivo-latin-var.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Section rhythm
   One scale, applied once per boundary. Previously the hero's bottom padding,
   the hero's margin and the next section's top padding all stacked — 208px
   between the hero and the format eyebrow.
   ========================================================================== */
:root { --lc-section: 96px; }
@media (max-width: 767px) { :root { --lc-section: 64px; } }

/* The hero owns its internal breathing room; it contributes no outer margin. */
.lc-hero,
.lc-hero.has-image { margin-bottom: 0; }
.lc-hero.has-image {
  min-height: 0;
  align-items: center;
  padding-top: 72px;
  padding-bottom: 56px;
}
@media (max-width: 860px) {
  .lc-hero.has-image { padding-top: 48px; padding-bottom: 44px; }
}

/* Each following section states the gap above it, and nothing states it twice. */
.lc-fmt { padding-top: 40px; margin-bottom: var(--lc-section); }
@media (max-width: 767px) { .lc-fmt { padding-top: 24px; } }
.lc-bx-section { margin: 0 0 var(--lc-section); }
.home .entry-content > h2 { margin-top: var(--lc-section); }
.lc-row { margin: var(--lc-section) 0; }
.lc-cp { margin-top: var(--lc-4); }

/* ==========================================================================
   Hero alignment
   The hero was full-bleeding its whole box and re-deriving a 1200px column,
   while every section below sits in Kadence's 1290px container — so the
   headline started ~45px left of everything under it. Now only the artwork
   escapes the container; the copy stays in the normal content column and lines
   up with the sections below by construction rather than by arithmetic.
   ========================================================================== */
.lc-hero.has-image {
  margin-left: 0;
  margin-right: 0;
  width: auto;
  padding-left: 0;
  padding-right: 0;
  border-radius: 0;
}
.lc-hero__media,
.lc-hero.has-image::before {
  left: 50%;
  right: auto;
  width: 100vw;
  transform: translateX(-50%);
}

/* ==========================================================================
   Comparison handle — no hover state
   The handle is a <button>, so Kadence's global button styling was filling it
   with Volt on hover. It is a grip, not a call to action: it should look the
   same at rest, on hover and while dragging.
   ========================================================================== */
.lc-bx__handle,
.lc-bx__handle:hover,
.lc-bx__handle:focus,
.lc-bx__handle:active {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--lc-volt) !important;
  transform: translateX(-50%) !important;
}
.lc-bx__handle > span,
.lc-bx__handle:hover > span,
.lc-bx__handle:active > span {
  background: var(--lc-ground);
  border: 2px solid var(--lc-volt);
  box-shadow: var(--lc-glow-volt);
  color: var(--lc-volt);
}

/* ==========================================================================
   Type scale
   The section headings had grown larger than the page headline — 4.2rem H2
   against a 3rem H1 — so "Choose your format" was the biggest thing on the
   page and read as shouting. One scale, H1 above H2, applied everywhere.
   ========================================================================== */
:root {
  --lc-h1: clamp(2.15rem, 4.6vw, 3.3rem);
  --lc-h2: clamp(1.65rem, 3.1vw, 2.4rem);
  --lc-h3: clamp(1.1rem, 1.8vw, 1.35rem);
}

.lc-hero__title { font-size: var(--lc-h1); line-height: 1.02; }
.lc-fmt__title,
.lc-bx__title   { font-size: var(--lc-h2); line-height: 1.04; }
.lc-fmt__name   { font-size: var(--lc-h3); }

/* The eyebrow and sub sit either side of the H2; keep them proportional to it
   rather than to the old, larger heading. */
.lc-fmt__eyebrow, .lc-bx__eyebrow { font-size: .78rem; }
.lc-fmt__sub { font-size: 1rem; margin-bottom: var(--lc-6); }

/* ==========================================================================
   Hero — full-bleed section, centred content
   The section spans the viewport; the content sits in a centred container that
   uses the full site width rather than an arbitrary 40rem column. On desktop
   the text still stops short of the right side, because that is where the lit
   panel is — running copy over it would mean darkening the product to keep the
   text readable, which defeats the picture.
   ========================================================================== */
.lc-hero.has-image {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  padding-left: 0;
  padding-right: 0;
}
/* Section is already the full viewport, so the layers just fill it. */
.lc-hero__media,
.lc-hero.has-image::before {
  left: 0;
  right: 0;
  width: auto;
  transform: none;
}

.lc-hero__inner {
  width: 100%;
  max-width: 1290px;
  margin-inline: auto;
  padding-inline: var(--lc-5);
  /* The Volt rule marks the whole content column, top to bottom — on the headline
     alone it read as a pull-quote rather than as the edge of the block. */
  border-left: 3px solid var(--lc-volt);
}
@media (min-width: 960px) {
  /* A fixed measure, not a percentage. 58% of a 1290px container is 748px, which on a
     1900px screen runs the copy straight over the lit panel — the percentage has no way
     to know where the panel begins. These are also simply better line lengths. */
  .lc-hero__title    { max-width: 21ch; }
  .lc-hero__sub      { max-width: 46ch; }
  .lc-hero__actions,
  .lc-hero__chipwrap { max-width: 34rem; }
  .lc-hero .lc-search { max-width: 32rem; }
}

/* Hero height: the room shot is 1.87:1, and a hero sized only by its content was
   about 4:1 on a wide screen — object-fit: cover then threw away half the room and
   left the panel filling the frame with no context. Give it height so the crop is
   closer to the picture's own proportion. */
.lc-hero.has-image { min-height: clamp(520px, 40vw, 700px); }
@media (max-width: 860px) { .lc-hero.has-image { min-height: clamp(440px, 96vw, 620px); } }
.lc-hero__img { object-position: 62% center; }
@media (max-width: 860px) { .lc-hero__img { object-position: 70% center; } }

/* ==========================================================================
   Homepage: the hero meets the header
   Kadence gives .content-area an 80px top margin and .entry-content-wrap a 32px
   top padding. That is right for a page that opens with text, and wrong for one
   that opens with a full-bleed image — it left a 112px band of empty ground
   between the header and the hero. Removed on the front page only; the hero's own
   72px top padding provides the breathing room, inside the picture where it
   belongs. Side padding is untouched, since the sections below rely on it.
   ========================================================================== */
.home .content-area { margin-top: 0; }
.home .entry-content-wrap { padding-top: 0; }

/* ==========================================================================
   Browse by series — [lc_series_tiles], built to the approved mock
   ========================================================================== */
.lc-series { margin: 0 0 var(--lc-section); text-align: center; }

.lc-series__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--lc-4);
  margin: 0 0 var(--lc-3);
  color: var(--lc-volt);
  font-family: var(--lc-font-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.lc-series__eyebrow::before,
.lc-series__eyebrow::after {
  content: "";
  height: 1px;
  width: clamp(28px, 7vw, 78px);
  background: var(--lc-line);
}
.lc-series__title {
  margin: 0 0 var(--lc-3);
  font-size: var(--lc-h2);
  line-height: 1.04;
  letter-spacing: -.02em;
}
.lc-series__sub { margin: 0 0 var(--lc-6); color: var(--lc-smoke); }

/* ---- the grid ---- */
.lc-tiles {
  list-style: none;
  margin: 0 0 var(--lc-6);
  padding: 0;
  display: grid;
  gap: var(--lc-4);
  grid-template-columns: 1fr;
  text-align: left;
}
@media (min-width: 620px)  { .lc-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .lc-tiles { grid-template-columns: repeat(3, 1fr); } }

.lc-tile { margin: 0; }
.lc-tile > a {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--lc-line);
  border-radius: var(--lc-radius);
  background: var(--lc-surface);
  overflow: hidden;
  text-decoration: none;
  color: var(--lc-bone);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.lc-tile > a:hover {
  border-color: var(--lc-volt);
  box-shadow: var(--lc-glow-volt);
  transform: translateY(-2px);
  color: var(--lc-bone);
}

/* 3:2, matching the source artwork, so nothing is cropped away. */
.lc-tile__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--lc-ground); }
.lc-tile__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The name sits under the artwork, not over it: an overlay would have to be dark
   enough to guarantee contrast against six different images, which means dimming
   the thing the visitor is scanning for. */
.lc-tile__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lc-3);
  padding: var(--lc-4) var(--lc-4);
}
.lc-tile__name {
  font-family: var(--lc-font-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1.2;
}
.lc-tile__go { color: var(--lc-volt); display: flex; flex: 0 0 auto; transition: transform .18s ease; }
.lc-tile > a:hover .lc-tile__go { transform: translateX(4px); }

/* No artwork yet — the bar becomes the whole card rather than sitting under a hole. */
.lc-tile--text .lc-tile__media { display: none; }
.lc-tile--text .lc-tile__bar { padding: var(--lc-6) var(--lc-4); }

/* ---- view all ---- */
.lc-series__all { margin: 0; }
.lc-series__all a {
  display: inline-flex;
  align-items: center;
  gap: var(--lc-3);
  min-height: 52px;
  padding: 0 var(--lc-6);
  border: 1px solid var(--lc-volt);
  border-radius: var(--lc-radius-sm);
  color: var(--lc-bone);
  font-family: var(--lc-font-display);
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: box-shadow .18s ease, background .18s ease;
}
.lc-series__all a:hover { box-shadow: var(--lc-glow-volt); color: var(--lc-bone); }
.lc-series__grid, .lc-series__arrow { color: var(--lc-volt); display: flex; }
.lc-series__all a:hover .lc-series__arrow { transform: translateX(3px); }

/* ==========================================================================
   Heading case — one system
   Uppercase is a LABEL treatment: it aids scanning at small sizes, where the
   letterspacing can do its work and there is little to read. At heading size it
   costs legibility, because word shapes flatten into rectangles and the reader
   loses the ascender/descender cues they navigate by.
   So: uppercase for eyebrows, card names, badges and buttons; sentence case for
   every H1 and H2. The uppercase eyebrow directly above each section heading
   already supplies the emphatic register.
   ========================================================================== */
.lc-fmt__title,
.lc-bx__title,
.lc-series__title,
.lc-hero__title { text-transform: none; }

/* Label tier keeps uppercase — unchanged, listed here so the system is readable
   in one place rather than inferred from six scattered rules. */
.lc-fmt__eyebrow,
.lc-bx__eyebrow,
.lc-series__eyebrow,
.lc-fmt__name,
.lc-tile__name,
.lc-fmt__label,
.lc-bx__from,
.lc-fmt__go,
.lc-bx__cta,
.lc-series__all a { text-transform: uppercase; }

/* ==========================================================================
   Featured designs — [lc_featured], built to the approved mock
   The mock renders in gold. Volt is the only accent this brand has (LCB-01), so
   the gold is translated rather than copied: Volt where the mock accents, and the
   three badges split by meaning instead of sharing one colour.
   ========================================================================== */
.lc-feat { margin: 0 0 var(--lc-section); text-align: center; }

.lc-feat__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--lc-4);
  margin: 0 0 var(--lc-3);
  color: var(--lc-volt);
  font-family: var(--lc-font-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.lc-feat__eyebrow::before,
.lc-feat__eyebrow::after {
  content: "";
  height: 1px;
  width: clamp(28px, 7vw, 78px);
  background: var(--lc-line);
}
.lc-feat__title {
  margin: 0 0 var(--lc-3);
  font-size: var(--lc-h2);
  line-height: 1.04;
  letter-spacing: -.02em;
}
.lc-feat__sub { margin: 0 0 var(--lc-6); color: var(--lc-smoke); }

.lc-feat__empty {
  margin: 0;
  padding: var(--lc-5);
  border: 1px dashed var(--lc-line);
  border-radius: var(--lc-radius);
  color: var(--lc-smoke);
  font-size: .9rem;
}

/* ---- grid ---- */
.lc-feat__grid {
  list-style: none;
  margin: 0 0 var(--lc-6);
  padding: 0;
  display: grid;
  gap: var(--lc-4);
  grid-template-columns: 1fr;
  text-align: left;
}
@media (min-width: 600px)  { .lc-feat__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .lc-feat__grid { grid-template-columns: repeat(4, 1fr); } }

.lc-feat__card { margin: 0; }
.lc-feat__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--lc-line);
  border-radius: var(--lc-radius);
  background: var(--lc-surface);
  overflow: hidden;
  text-decoration: none;
  color: var(--lc-bone);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.lc-feat__link:hover {
  border-color: var(--lc-volt);
  box-shadow: var(--lc-glow-volt);
  transform: translateY(-2px);
  color: var(--lc-bone);
}

.lc-feat__media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--lc-ground); }
.lc-feat__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Badges carry meaning, so they carry different colour. */
.lc-feat__badge {
  position: absolute;
  top: var(--lc-3);
  left: var(--lc-3);
  padding: 5px 10px;
  border-radius: 999px;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1;
}
.lc-feat__badge.is-best    { background: var(--lc-volt); color: var(--lc-ground); }
.lc-feat__badge.is-limited { background: var(--lc-ember); color: var(--lc-bone); }  /* fill, LCB-03 */
.lc-feat__badge.is-new     { background: rgb(21 18 15 / .78); color: var(--lc-volt); box-shadow: inset 0 0 0 1px var(--lc-volt); }

.lc-feat__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: var(--lc-4); }
.lc-feat__name {
  font-family: var(--lc-font-display);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 2px;
}
.lc-feat__format { color: var(--lc-volt); font-size: .88rem; margin-bottom: var(--lc-3); }

.lc-feat__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lc-3);
  padding-top: var(--lc-3);
  margin-top: auto;
  border-top: 1px solid var(--lc-line);
}
.lc-feat__size {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--lc-smoke);
  font-size: .78rem;
  line-height: 1.25;
}
.lc-feat__size svg { color: var(--lc-volt); flex: 0 0 auto; }
.lc-feat__price {
  color: var(--lc-bone);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.lc-feat__price del { color: var(--lc-smoke); font-weight: 400; margin-right: 4px; }
.lc-feat__price ins { text-decoration: none; color: var(--lc-volt); }

.lc-feat__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--lc-2);
  min-height: 48px;
  margin-top: var(--lc-4);
  border: 1px solid var(--lc-line);
  border-radius: var(--lc-radius-sm);
  font-family: var(--lc-font-display);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: border-color .18s ease, color .18s ease;
}
.lc-feat__link:hover .lc-feat__cta { border-color: var(--lc-volt); color: var(--lc-volt); }

/* ---- view all ---- */
.lc-feat__all { margin: 0; display: flex; align-items: center; gap: var(--lc-5); }
.lc-feat__all::before,
.lc-feat__all::after { content: ""; height: 1px; flex: 1 1 auto; background: var(--lc-line); }
.lc-feat__all a {
  display: inline-flex;
  align-items: center;
  gap: var(--lc-2);
  min-height: 52px;
  padding: 0 var(--lc-6);
  border: 1px solid var(--lc-volt);
  border-radius: 999px;
  color: var(--lc-bone);
  font-weight: 600;
  text-decoration: none;
  transition: box-shadow .18s ease;
}
.lc-feat__all a:hover { box-shadow: var(--lc-glow-volt); color: var(--lc-bone); }
.lc-feat__spark { color: var(--lc-volt); display: flex; }

/* ==========================================================================
   Custom preview — [lc_custom_preview], built to the approved mock
   ========================================================================== */
.lc-cp {
  display: grid;
  gap: var(--lc-6);
  margin: 0 0 var(--lc-section);
  align-items: start;
}
@media (min-width: 1000px) {
  .lc-cp { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--lc-7); }
}

/* ---- left column ---- */
.lc-cp__title {
  margin: 0 0 var(--lc-4);
  font-size: var(--lc-h2);
  line-height: 1.06;
  letter-spacing: -.02em;
}
.lc-cp__title em { font-style: normal; color: var(--lc-volt); display: block; }
.lc-cp__lede { margin: 0 0 var(--lc-5); color: var(--lc-smoke); }

.lc-cp__panel {
  padding: var(--lc-5);
  background: var(--lc-surface);
  border: 1px solid var(--lc-line);
  border-radius: var(--lc-radius);
}
.lc-cp__step {
  display: flex;
  align-items: baseline;
  gap: var(--lc-2);
  margin: 0 0 var(--lc-3);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lc-bone);
}
.lc-cp__step span { color: var(--lc-volt); }
.lc-cp__panel > .lc-cp__step:not(:first-child) { margin-top: var(--lc-5); }

/* upload */
.lc-cp__drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lc-1);
  padding: var(--lc-6) var(--lc-4);
  border: 1px dashed var(--lc-line);
  border-radius: var(--lc-radius);
  background: rgb(21 18 15 / .45);
  cursor: pointer;
  text-align: center;
  transition: border-color .18s ease;
}
.lc-cp__drop:hover { border-color: var(--lc-volt); }
.lc-cp__dropicon { color: var(--lc-volt); }
.lc-cp__droptitle { color: var(--lc-bone); font-weight: 600; }
.lc-cp__dropmeta { color: var(--lc-smoke); font-size: .82rem; }
.lc-cp__file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.lc-cp__drop:focus-within { outline: 2px solid var(--lc-volt); outline-offset: 3px; }

.lc-cp__size { width: 100%; }

/* format cards */
.lc-cp__formats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--lc-2); }
.lc-cp__format {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--lc-3) var(--lc-2);
  background: rgb(21 18 15 / .45);
  border: 1px solid var(--lc-line);
  border-radius: var(--lc-radius-sm);
  color: var(--lc-smoke);
  cursor: pointer;
  text-align: center;
  transition: border-color .18s ease, color .18s ease;
}
.lc-cp__format:hover { border-color: var(--lc-smoke); }
.lc-cp__format.is-on {
  border-color: var(--lc-volt);
  color: var(--lc-bone);
  box-shadow: inset 0 0 0 1px var(--lc-volt);
}
.lc-cp__ficon { color: var(--lc-smoke); }
.lc-cp__format.is-on .lc-cp__ficon { color: var(--lc-volt); }
.lc-cp__fname { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.lc-cp__fprice { font-size: .72rem; color: var(--lc-smoke); font-variant-numeric: tabular-nums; }
.lc-cp__format.is-on .lc-cp__fprice { color: var(--lc-volt); }

.lc-cp__note,
.lc-cp__privacy {
  display: flex;
  align-items: flex-start;
  gap: var(--lc-2);
  margin: var(--lc-4) 0 0;
  color: var(--lc-smoke);
  font-size: .82rem;
  line-height: 1.4;
}
.lc-cp__note svg, .lc-cp__privacy svg { flex: 0 0 auto; margin-top: 2px; }

.lc-cp__actions { margin: var(--lc-5) 0 0; }
.lc-cp__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--lc-2);
  min-height: 54px;
  background: var(--lc-volt);
  color: var(--lc-ground);
  border-radius: var(--lc-radius-sm);
  font-family: var(--lc-font-display);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
}
.lc-cp__cta:hover { box-shadow: var(--lc-glow-volt); color: var(--lc-ground); }

/* ---- right column ---- */
.lc-cp__stage {
  border: 1px solid var(--lc-line);
  border-radius: var(--lc-radius);
  background: var(--lc-surface);
  overflow: hidden;
}
.lc-cp__stagebar {
  display: flex;
  align-items: center;
  gap: var(--lc-3);
  padding: var(--lc-3) var(--lc-4);
  border-bottom: 1px solid var(--lc-line);
}
.lc-cp__live {
  color: var(--lc-volt);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.lc-cp__toggle {
  display: inline-flex;
  padding: 3px;
  background: rgb(21 18 15 / .7);
  border: 1px solid var(--lc-line);
  border-radius: 999px;
}
.lc-cp__state {
  min-height: 34px;
  padding: 0 var(--lc-4);
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--lc-smoke);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.lc-cp__state.is-on { background: var(--lc-volt); color: var(--lc-ground); }
.lc-cp__sizechip {
  margin-left: auto;
  padding: 6px 12px;
  border: 1px solid var(--lc-line);
  border-radius: var(--lc-radius-sm);
  color: var(--lc-bone);
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lc-cp__viewport { position: relative; background: var(--lc-ground); }
.lc-cp__canvas { display: block; width: 100%; height: auto; }
.lc-cp__empty {
  position: absolute;
  inset: auto 0 0 0;
  margin: 0;
  padding: var(--lc-5);
  text-align: center;
  color: var(--lc-smoke);
  background: linear-gradient(to top, rgb(21 18 15 / .95), rgb(21 18 15 / 0));
}

/* verdict — colour is never the only carrier (LC-102): the wording changes too */
.lc-cp__verdict {
  display: flex;
  align-items: center;
  gap: var(--lc-3);
  padding: var(--lc-4);
  border-top: 1px solid var(--lc-line);
}
.lc-cp__vicon {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px solid var(--lc-line);
  display: grid;
  place-items: center;
}
.lc-cp.is-ok   .lc-cp__vicon { border-color: var(--lc-volt); }
.lc-cp.is-ok   .lc-cp__vicon::after { content: "✓"; color: var(--lc-volt); font-weight: 700; }
.lc-cp.is-warn .lc-cp__vicon { border-color: var(--lc-ember); background: var(--lc-ember); }
.lc-cp.is-warn .lc-cp__vicon::after { content: "!"; color: var(--lc-bone); font-weight: 700; }
.lc-cp__vtext { display: flex; flex-direction: column; gap: 2px; }
.lc-cp__vtext strong { color: var(--lc-bone); }
.lc-cp.is-ok .lc-cp__vtext strong { color: var(--lc-volt); }
.lc-cp__vtext span { color: var(--lc-smoke); font-size: .88rem; line-height: 1.4; }
.lc-cp__change {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--lc-2);
  min-height: 44px;
  padding: 0 var(--lc-4);
  background: none;
  border: 1px solid var(--lc-line);
  border-radius: var(--lc-radius-sm);
  color: var(--lc-bone);
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.lc-cp__change:hover { border-color: var(--lc-volt); color: var(--lc-volt); }

/* ==========================================================================
   Custom preview — spacing pass
   Two problems the measurements showed:

   1. The gap BETWEEN step groups (24px) was the same as the panel's own padding
      (24px), so the first step sat as far from the panel edge as the groups sat
      from each other and nothing read as grouped. Group gap goes to 32px, leaving
      12px between a label and its own control — a 12/32 rhythm, so proximity does
      the grouping rather than the labels having to.

   2. The two columns had different internal padding — 24px on the left panel,
      12/16px in the stage — so their content did not line up across the gap.
      Both now sit on 24px.
   ========================================================================== */
.lc-cp__panel > .lc-cp__step:not(:first-child) { margin-top: var(--lc-6); }
.lc-cp__actions { margin-top: var(--lc-6); }
.lc-cp__stagebar { padding: var(--lc-4) var(--lc-5); }
.lc-cp__verdict { padding: var(--lc-5); }
.lc-cp__empty { padding: var(--lc-5); }

/* The dropzone was the tallest thing in the column by some way; bring it back in
   line so step 1 does not dominate steps 2 and 3. */
.lc-cp__drop { padding: var(--lc-5) var(--lc-4); }

/* Only a backlit panel lights up. For the flat formats the control is removed and
   replaced with a plain statement — a greyed-out switch still suggests the option is
   there and simply unavailable, which is the wrong idea. */
.lc-cp__flat {
  color: var(--lc-smoke);
  font-size: .78rem;
  letter-spacing: .02em;
}

/* The format cards are <button>, so Kadence's global button styling was filling them
   with Volt on hover, focus and active. Selection is a BORDER state here, not a fill:
   filling a card that sits beside two others makes the choice look like a submit
   button rather than a chosen option. */
.lc-cp__format,
.lc-cp__format:hover,
.lc-cp__format:focus,
.lc-cp__format:active,
.lc-cp__format.is-on,
.lc-cp__format.is-on:hover,
.lc-cp__format.is-on:focus {
  background: rgb(21 18 15 / .45) !important;
  box-shadow: none !important;
}
.lc-cp__format.is-on {
  border-color: var(--lc-volt) !important;
  color: var(--lc-bone) !important;
}
.lc-cp__format:focus-visible { outline: 2px solid var(--lc-volt); outline-offset: 2px; }

/* Same leak on the lighting toggle: only the active state is a fill, and it must not
   change on hover. */
.lc-cp__state,
.lc-cp__state:hover,
.lc-cp__state:focus { background: none; box-shadow: none; }
.lc-cp__state.is-on,
.lc-cp__state.is-on:hover { background: var(--lc-volt); color: var(--lc-ground); }

/* ==========================================================================
   How ordering works — [lc_steps], built to the approved mock
   ========================================================================== */
.lc-steps { margin: 0 0 var(--lc-section); text-align: center; }

/* Eyebrow with a Volt rule and terminal dot either side, as drawn. */
.lc-steps__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--lc-4);
  margin: 0 0 var(--lc-3);
  color: var(--lc-volt);
  font-family: var(--lc-font-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.lc-steps__eyebrow::before,
.lc-steps__eyebrow::after {
  content: "";
  height: 1px;
  width: clamp(34px, 9vw, 110px);
  background: var(--lc-volt);
  position: relative;
}
/* the dot at the inner end of each rule */
.lc-steps__eyebrow span { position: relative; }
.lc-steps__eyebrow span::before,
.lc-steps__eyebrow span::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 6px; height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--lc-volt);
  box-shadow: 0 0 8px 0 rgb(180 255 46 / .8);
}
.lc-steps__eyebrow span::before { left: calc(-1 * var(--lc-4) + 1px); }
.lc-steps__eyebrow span::after  { right: calc(-1 * var(--lc-4) + 1px); }

.lc-steps__title {
  margin: 0 0 var(--lc-3);
  font-size: var(--lc-h2);
  line-height: 1.04;
  letter-spacing: -.02em;
}
.lc-steps__title em { font-style: normal; color: var(--lc-volt); }
.lc-steps__sub { margin: 0 0 var(--lc-6); color: var(--lc-smoke); }

/* ---- the three steps ---- */
.lc-steps__list {
  list-style: none;
  margin: 0 0 var(--lc-5);
  padding: 0;
  display: grid;
  gap: var(--lc-4);
  grid-template-columns: 1fr;
  counter-reset: none;
}
@media (min-width: 900px) {
  .lc-steps__list { grid-template-columns: repeat(3, 1fr); gap: var(--lc-6); }
}

.lc-steps__step {
  position: relative;
  margin: 0;
  padding: var(--lc-6) var(--lc-5);
  background: var(--lc-surface);
  border: 1px solid var(--lc-line);
  border-radius: var(--lc-radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lc-2);
}

/* Connector between cards: a dotted run with a chevron, as drawn. Desktop only —
   stacked on a phone the numbers already carry the sequence, and a horizontal
   connector between vertically stacked cards points nowhere. */
@media (min-width: 900px) {
  .lc-steps__step + .lc-steps__step::before {
    content: "";
    position: absolute;
    top: 34%;
    left: calc(-1 * var(--lc-6));
    width: var(--lc-6);
    border-top: 2px dotted var(--lc-line);
  }
  .lc-steps__step + .lc-steps__step::after {
    content: "";
    position: absolute;
    top: 34%;
    left: calc(-1 * var(--lc-6) + 8px);
    width: 9px; height: 9px;
    margin-top: -5px;
    border-top: 2px solid var(--lc-volt);
    border-right: 2px solid var(--lc-volt);
    transform: rotate(45deg);
  }
}

.lc-steps__head {
  display: flex;
  align-items: center;
  gap: var(--lc-4);
  margin-bottom: var(--lc-3);
}
.lc-steps__num {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  flex: 0 0 auto;
  border: 2px solid var(--lc-volt);
  border-radius: 50%;
  color: var(--lc-volt);
  font-family: var(--lc-font-display);
  font-weight: 700;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
.lc-steps__icon { color: var(--lc-bone); display: flex; }

.lc-steps__name {
  font-family: var(--lc-font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: uppercase;
  line-height: 1.15;
}
.lc-steps__copy { color: var(--lc-smoke); max-width: 30ch; }

/* ---- footer links ---- */
.lc-steps__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--lc-2) var(--lc-3);
  margin: 0;
  font-size: .92rem;
}
.lc-steps__foot a {
  display: inline-flex;
  align-items: center;
  gap: var(--lc-2);
  color: var(--lc-smoke);
  text-decoration: none;
}
.lc-steps__foot a:hover { color: var(--lc-volt); }
.lc-steps__wa { color: var(--lc-volt); display: flex; }
.lc-steps__dot { color: var(--lc-line); }

/* ==========================================================================
   Footer — built to the approved mock
   ========================================================================== */
.lc-footer { border-top: 1px solid var(--lc-line); background: var(--lc-surface); }
.lc-footer__inner {
  max-width: 1290px;
  margin: 0 auto;
  padding: var(--lc-8) var(--lc-5) var(--lc-7);
  display: grid;
  gap: var(--lc-7) var(--lc-5);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  /* Brand column gets its own track; the four link groups share the rest. */
  .lc-footer__inner { grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); }
}

/* ---- brand ---- */
.lc-footer__logo { display: inline-block; }
.lc-footer__logo img {
  display: block;
  width: auto;
  height: 64px;               /* horizontal lockup, aspect 2.36 -> ~151px wide */
  max-width: 100%;
}
.lc-footer__tagline {
  margin: var(--lc-4) 0 var(--lc-5);
  color: var(--lc-smoke);
  font-size: .92rem;
  max-width: 30ch;
}

.lc-footer__social { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--lc-3); }
.lc-footer__social a {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;          /* LC-65 touch target */
  border: 1px solid var(--lc-line);
  border-radius: 50%;
  color: var(--lc-volt);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.lc-footer__social a:hover { border-color: var(--lc-volt); box-shadow: var(--lc-glow-volt); }

/* ---- link groups ---- */
.lc-footer__groups {
  display: grid;
  gap: var(--lc-6) var(--lc-5);
  grid-template-columns: repeat(2, 1fr);
  align-content: start;
}
@media (min-width: 700px) { .lc-footer__groups { grid-template-columns: repeat(4, 1fr); } }

.lc-footer__heading {
  margin: 0 0 var(--lc-4);
  color: var(--lc-volt);              /* Volt headings, as drawn */
  font-family: var(--lc-font-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.lc-footer__group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--lc-2);
}
.lc-footer__group a {
  display: inline-block;
  padding: var(--lc-1) 0;             /* keeps a 44px target without spacing the list out */
  color: var(--lc-bone);
  text-decoration: none;
}
.lc-footer__group a:hover { color: var(--lc-volt); }

/* ---- the bar below: registered company name only (SEP-13) ---- */
.site-footer .footer-html { text-align: center; }

/* The [hidden] attribute only works through the user-agent's `display: none`, so any
   author `display` rule silently beats it — which is why the lighting toggle stayed
   on screen for the flat formats despite hidden being set. State it explicitly. */
.lc-cp [hidden],
.lc-cp__toggle[hidden],
.lc-cp__flat[hidden],
.lc-cp__change[hidden] { display: none !important; }

/* ==========================================================================
   Mobile corrections
   ========================================================================== */

/* 2. Header background.
   Kadence paints #masthead itself #ffffff — a literal, not a palette variable, so
   remapping the palette never touched it. On desktop an inner wrapper covered it;
   on mobile the row layout differs and the white showed through, taking the Bone
   wordmark down to near-zero contrast. */
#masthead,
#masthead .site-header-row-container-inner,
.site-header-wrap,
.site-top-header-wrap .site-header-row-container-inner { background: var(--lc-ground); }
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) > .site-header-row-container-inner {
  background: var(--lc-ground);
}
/* The hamburger inherits the palette's button colours; keep it on the ground. */
.mobile-toggle-open-container .menu-toggle-open,
.mobile-toggle-open-container .menu-toggle-open:hover {
  background: transparent;
  color: var(--lc-bone);
}

@media (max-width: 767px) {
  /* 1. Ribbon. Three messages will not fit a 390px viewport, so the row scrolls —
     but at the previous size it clipped mid-word, which reads as broken rather
     than as scrollable. Smaller type, tighter gaps, and a wider fade so the cut
     is obviously a cut. */
  /* Ribbon sizing now lives with the marquee rules, on .lc-trustbar__track. */

  /* 3. Hero.
     The supporting line is Smoke, which is fine on Ground but was sitting over the
     lit artwork on a phone, where the copy overlays the image instead of standing
     beside it. Strengthen the scrim under the copy and lift the text to Bone. */
  .lc-hero.has-image::before {
    background: linear-gradient(to top,
      rgb(21 18 15 / .97) 0%,
      rgb(21 18 15 / .93) 52%,
      rgb(21 18 15 / .60) 78%,
      rgb(21 18 15 / .25) 100%);
  }
  .lc-hero__sub { color: var(--lc-bone); opacity: .88; }

  /* Buttons were desktop-sized on a 390px screen. Keep the 48px touch target
     (LC-65) and take the weight out of the padding and type instead. */
  .lc-hero__cta,
  .lc-search__go {
    min-height: 48px;
    padding: 0 var(--lc-4);
    font-size: .92rem;
  }
  .lc-search { gap: var(--lc-2); }
  .lc-search__field { font-size: .95rem; }
  .lc-hero__actions { gap: var(--lc-3) var(--lc-4); }
  .lc-hero__alt { font-size: .92rem; }
}

/* ==========================================================================
   Ribbon — marquee on mobile, static on desktop
   Three messages do not fit a 390px viewport. A row the visitor has to discover
   is scrollable is worse than one that moves on its own, so on mobile it drifts
   continuously; on desktop, where everything fits, it stays still.
   ========================================================================== */
.lc-trustbar__viewport { overflow: hidden; }
.lc-trustbar__track {
  list-style: none;
  margin: 0 auto;
  padding: 9px var(--lc-5);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: var(--lc-7);
  max-width: 1290px;
}
.lc-trustbar__track li { white-space: nowrap; flex: 0 0 auto; display: flex; align-items: center; gap: var(--lc-2); }
.lc-trustbar__track li::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lc-volt);
  flex: 0 0 auto;
}
/* Everything fits on desktop, so the duplicate is not needed and would just
   repeat the row across the width. */
@media (min-width: 768px) {
  .lc-trustbar__track li[aria-hidden="true"] { display: none; }
}

@media (max-width: 767px) {
  .lc-trustbar__track {
    justify-content: flex-start;
    width: max-content;
    max-width: none;
    padding-inline: var(--lc-4);
    gap: var(--lc-6);
    animation: lc-ribbon 26s linear infinite;
    will-change: transform;
  }
  .lc-trustbar__track li { font-size: .74rem; }
  /* Half the track is one full copy of the row, so -50% lands exactly on the
     start of the duplicate and the seam is invisible. */
  @keyframes lc-ribbon {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  /* No edge fade needed now that it moves by itself. */
  .lc-trustbar::after { content: none; }
}

/* LC-100 — continuous motion is exactly what reduced-motion is for. Stop it and
   give the row back its manual scroll, so the content is still reachable. */
@media (prefers-reduced-motion: reduce) {
  .lc-trustbar__track { animation: none; }
  .lc-trustbar__viewport { overflow-x: auto; scrollbar-width: none; }
  .lc-trustbar__viewport::-webkit-scrollbar { display: none; }
  .lc-trustbar__track li[aria-hidden="true"] { display: none; }
}

/* ==========================================================================
   Backlit section — stacked layout
   Below 960px the copy sits ABOVE the comparison rather than beside it, so it is
   no longer a left column against a right one: it is a block on its own, and a
   ragged left edge under a centred image reads as misalignment. Centre it there
   only — on desktop the left edge is doing real work against the picture.
   ========================================================================== */
@media (max-width: 959px) {
  .lc-bx__copy { text-align: center; }
  .lc-bx__eyebrow { justify-content: center; }
  .lc-bx__sub { margin-inline: auto; }
  .lc-bx__actions { display: flex; justify-content: center; }

  /* The label wraps to two lines at this width, so it needs to be centred inside
     the button as well — otherwise the second line hangs left while the arrow
     sits out at the edge. */
  .lc-bx__cta {
    justify-content: center;
    text-align: center;
    width: 100%;
    padding-inline: var(--lc-5);
  }
}

/* The arrow belongs to the label, not to the button's far edge — keep it tight to
   the text at every width. */
.lc-bx__cta { gap: var(--lc-3); }

/* ==========================================================================
   Hero — mobile, to the approved mock
   ========================================================================== */

/* The magnifier is decoration on desktop, where the labelled button carries the
   action; on mobile it becomes the button itself. */
.lc-search__go { gap: var(--lc-2); }
.lc-search__icon { display: none; }

@media (max-width: 767px) {
  .lc-hero.has-image {
    min-height: 0;
    padding-top: 40px;
    padding-bottom: 44px;
    align-items: flex-end;
  }

  /* The headline is the whole first screen in the mock — it should fill the width
     and push everything else below the fold deliberately. */
  .lc-hero__title {
    font-size: clamp(2.6rem, 12.5vw, 3.4rem);
    line-height: .94;
    letter-spacing: -.03em;
    max-width: none;
    border-left: 0;               /* the rule reads as clutter at this size */
    padding-left: 0;
    margin-left: 0;
    margin-bottom: var(--lc-4);
    text-wrap: balance;
  }
  .lc-hero__inner { border-left: 0; padding-inline: var(--lc-5); }
  .lc-hero__sub { max-width: none; margin-bottom: var(--lc-5); }

  /* Search: one full-width field with the magnifier inside it, as drawn. The icon
     IS the submit button — a field with no submit at all leaves touch users with
     only the keyboard's Go key. */
  .lc-search { position: relative; max-width: none; gap: 0; }
  .lc-search__field {
    width: 100%;
    padding-left: 52px;
    min-height: 56px;
    border-radius: var(--lc-radius);
    font-size: 1rem;
  }
  .lc-search__go {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 52px;
    min-height: 0;
    padding: 0;
    background: none;
    border-radius: var(--lc-radius) 0 0 var(--lc-radius);
    color: var(--lc-volt);
  }
  .lc-search__go:hover { background: none; box-shadow: none; }
  .lc-search__icon { display: flex; }
  .lc-search__label {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Primary action full width; the secondary drops to its own line so it cannot
     read as an equal partner to it. */
  .lc-hero__actions { display: block; margin-bottom: var(--lc-5); }
  .lc-hero__cta {
    display: flex;
    width: 100%;
    justify-content: space-between;
    min-height: 60px;
    padding-inline: var(--lc-5);
    font-family: var(--lc-font-display);
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-radius: var(--lc-radius);
  }
  .lc-hero__cta::after {
    content: "";
    width: 18px; height: 2px;
    background: currentColor;
    box-shadow: 4px -4px 0 -1px currentColor, 4px 4px 0 -1px currentColor;
    flex: 0 0 auto;
  }
  .lc-hero__alt { display: inline-block; margin-top: var(--lc-4); color: var(--lc-volt); }

  /* Chips carry the series artwork and sit on one scrolling row. */
  .lc-hero__chips li a {
    gap: var(--lc-3);
    min-height: 62px;
    padding: 0 var(--lc-4) 0 var(--lc-2);
    border-radius: var(--lc-radius);
    background: rgb(21 18 15 / .82);
    font-size: 1rem;
  }
  .lc-hero__chipimg {
    width: 42px; height: 42px;
    border-radius: var(--lc-radius-sm);
    object-fit: cover;
    display: block;
    flex: 0 0 auto;
  }
}

/* On desktop the chips stay compact; the thumbnail would crowd a wrapping row. */
@media (min-width: 768px) { .lc-hero__chipimg { display: none; } }

/* The CTA label is 23 characters of letterspaced uppercase, which wraps below about
   440px. Scale the type to the viewport and hold it on one line — a wrapped label
   with the arrow floating beside the second line reads as two separate controls. */
.lc-bx__cta {
  white-space: nowrap;
  font-size: clamp(.76rem, 3.3vw, .95rem);
  letter-spacing: .04em;
}
@media (max-width: 767px) {
  .lc-bx__cta { padding-inline: var(--lc-4); gap: var(--lc-2); }
}

/* The arrow was built from a 1px bar plus two offset box-shadows, which collapses
   into something that reads as a dash at small sizes. A real glyph renders
   predictably at every size. */
.lc-bx__cta::after {
  content: "→";
  width: auto;
  height: auto;
  background: none;
  box-shadow: none;
  font-size: 1.15em;
  line-height: 1;
}

/* ==========================================================================
   Mobile corrections — round two
   ========================================================================== */
@media (max-width: 767px) {

  /* 1. Search. The icon was overlaid and the field indented with padding-left to
     clear it — but the padding was losing to a theme rule, so the magnifier sat on
     top of the placeholder. Put the button back in the flex flow and move it first
     with `order`, so the icon occupies real space and nothing has to be indented
     around it. No specificity fight to lose. */
  .lc-search {
    position: static;
    display: flex;
    align-items: stretch;
    background: var(--lc-surface);
    border: 1px solid var(--lc-line);
    border-radius: var(--lc-radius);
    overflow: hidden;
  }
  .lc-search__go {
    position: static;
    order: -1;
    flex: 0 0 52px;
    width: 52px;
    min-height: 56px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    color: var(--lc-volt);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .lc-search__field {
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 0;
    background: none;
    border: 0;
    border-radius: 0;
    min-height: 56px;
  }
  .lc-search__field:focus-visible { outline-offset: -2px; }

  /* 2. The hero CTA arrow was the same box-shadow construction that collapsed into
     a dash on the backlit button. Use the glyph. */
  .lc-hero__cta::after {
    content: "→";
    width: auto;
    height: auto;
    background: none;
    box-shadow: none;
    font-size: 1.1em;
    line-height: 1;
  }


  /* 4. Custom preview.
     The note sat hard against the format tiles with no separation, and the CTA
     label wrapped. */
  .lc-cp__formats { margin-bottom: var(--lc-4); }
  .lc-cp__note { margin-top: var(--lc-5); }
  .lc-cp__cta {
    white-space: nowrap;
    font-size: clamp(.78rem, 3.4vw, .95rem);
    letter-spacing: .04em;
    padding-inline: var(--lc-4);
  }

  /* 5. The stage bar squeezed four items onto one row, crushing the toggle until
     UNLIT and LIT stacked one letter per line. Let the row wrap and stop the
     controls shrinking. */
  .lc-cp__stagebar { flex-wrap: wrap; row-gap: var(--lc-3); }
  .lc-cp__toggle { flex: 0 0 auto; }
  .lc-cp__state { white-space: nowrap; flex: 0 0 auto; padding-inline: var(--lc-3); }
  .lc-cp__sizechip { margin-left: auto; }
  .lc-cp__flat { flex: 1 1 100%; }

}

/* ==========================================================================
   Mobile — card alignment, swept across every card component
   At one card per row each is full width, so a left-hugging label under a centred
   image reads as misalignment. Centred everywhere except the footer link lists,
   which are scanned down rather than read across and stay left.
   ========================================================================== */
@media (max-width: 767px) {
  /* Card TEXT stays left-aligned — only the card boxes are centred, below.
     Kept from that pass: the description no longer reserves two lines, since that
     existed to align price baselines across three columns and just adds empty
     space at one card per row. */
  .lc-fmt__what { min-height: 0; }
  .lc-feat__cta { width: 100%; }

  /* Three format tiles have to share one row, so their labels hold one line. */
  .lc-cp__fname { white-space: nowrap; font-size: .66rem; }
  .lc-cp__fprice { white-space: nowrap; font-size: .68rem; }
}

/* The upload area doubles as the message surface when a file is rejected. */
.lc-cp__empty { text-align: center; }

/* ==========================================================================
   Mobile — centre the card BOXES, not their contents
   At one card per row the grid stretches each card edge to edge, so "centred" is
   invisible. Capping the width makes the centring real on wide phones and large
   phones in landscape, while small phones still get the full width.
   Text inside stays left-aligned: a left edge is what the eye returns to when
   reading a title, a description and a price stacked together.
   ========================================================================== */
@media (max-width: 767px) {
  .lc-fmt__grid,
  .lc-tiles,
  .lc-feat__grid,
  .lc-steps__list,
  .lc-bx__benefits { justify-items: center; }

  .lc-fmt__card,
  .lc-tile,
  .lc-feat__card,
  .lc-steps__step {
    width: 100%;
    max-width: 420px;
  }
}

/* In the stacked backlit block the eyebrow, heading and button stay centred, but
   the supporting lines and the price read left. Two sentences and a figure are
   read, not scanned — a common left edge is what carries the eye down them. */
@media (max-width: 959px) {
  .lc-bx__sub,
  .lc-bx__from,
  .lc-bx__price {
    text-align: left;
    margin-inline: 0;
  }
}

/* ==========================================================================
   Custom order — panel overflow
   `grid-template-columns: repeat(3, 1fr)` resolves to minmax(auto, 1fr), which
   refuses to shrink a track below its content. Adding white-space: nowrap to the
   tile labels therefore set a hard minimum width on all three, and the panel grew
   past the viewport. minmax(0, 1fr) lets the tracks shrink; min-width: 0 lets the
   flex/grid children inside them do the same.
   ========================================================================== */
.lc-cp,
.lc-cp__copy,
.lc-cp__panel,
.lc-cp__stage { min-width: 0; }

.lc-cp__formats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lc-cp__format { min-width: 0; overflow: hidden; }

/* The labels can now shrink, so they no longer need to be unbreakable — keep them
   on one line by fitting the type to the track instead of forcing the track wide. */
@media (max-width: 767px) {
  .lc-cp__fname  { font-size: clamp(.56rem, 2.6vw, .68rem); letter-spacing: .04em; }
  .lc-cp__fprice { font-size: clamp(.58rem, 2.6vw, .7rem); }
  .lc-cp__format { padding: var(--lc-3) var(--lc-1); gap: 2px; }
  .lc-cp__ficon svg { width: 22px; height: 22px; }
}

/* Nothing in this section may push the page sideways. */
.lc-cp__stagebar { min-width: 0; }
.lc-cp__sizechip { flex: 0 1 auto; min-width: 0; }

/* ==========================================================================
   Series chips — centred scroller
   `justify-content: center` on an overflowing flex row makes the leading items
   unreachable: overflow spills off BOTH edges and there is nothing to scroll back
   to. `safe center` centres only while the row fits and falls back to flex-start
   the moment it does not, which is exactly the behaviour wanted here.
   Snapping is added so a swipe settles on a chip rather than mid-word.
   ========================================================================== */
@media (max-width: 767px) {
  .lc-hero__chipwrap {
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--lc-5);
    overscroll-behavior-x: contain;   /* a swipe past the end must not navigate back */
  }
  .lc-hero__chips {
    justify-content: safe center;
    padding-inline: var(--lc-5);
    gap: var(--lc-3);
  }
  .lc-hero__chips li { scroll-snap-align: center; }

  /* Fade both edges so the row reads as continuing in either direction. */
  .lc-hero__chipwrap {
    -webkit-mask-image: linear-gradient(to right,
      transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right,
      transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
  }
}

/* ==========================================================================
   Tablet — the two three-across grids
   Both the format cards and the ordering steps only went to three columns at
   900px, so an iPad in portrait (768px) got a single stacked column: cards the
   full width of the page with their content marooned in the middle. Three items
   cannot go two-across without an orphan, so they go three-across earlier and
   the type and spacing come down to suit the narrower track.
   ========================================================================== */
@media (min-width: 700px) {
  .lc-fmt__grid,
  .lc-steps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 700px) and (max-width: 899px) {
  .lc-fmt__grid { gap: var(--lc-3); }
  .lc-fmt__body { padding: var(--lc-4); }
  .lc-fmt__name { font-size: 1.05rem; }
  .lc-fmt__what { font-size: .86rem; min-height: 3.4em; }
  .lc-fmt__price { font-size: 1.15rem; }
  .lc-fmt__go { font-size: .72rem; letter-spacing: .06em; padding-top: var(--lc-4); }

  .lc-steps__list { gap: var(--lc-3); }
  .lc-steps__step { padding: var(--lc-5) var(--lc-4); }
  .lc-steps__head { gap: var(--lc-3); margin-bottom: var(--lc-2); }
  .lc-steps__num { width: 38px; height: 38px; font-size: .88rem; }
  .lc-steps__icon svg { width: 34px; height: 34px; }
  .lc-steps__name { font-size: 1rem; }
  .lc-steps__copy { font-size: .88rem; }

  /* The connector sits in the gap between cards, which is now smaller. */
  .lc-steps__step + .lc-steps__step::before { left: calc(-1 * var(--lc-3)); width: var(--lc-3); }
  .lc-steps__step + .lc-steps__step::after { left: calc(-1 * var(--lc-3) + 3px); }
}

/* ==========================================================================
   Custom order — upload confirmation
   ========================================================================== */
.lc-cp__added {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lc-3);
  margin: var(--lc-5) 0 0;
  /* Accent bar, not a box: a second outline directly under the dashed upload area
     reads as one overlapping the other however the gap is tuned. */
  padding: var(--lc-3) var(--lc-4);
  background: rgb(180 255 46 / .07);
  border-left: 3px solid var(--lc-volt);
  border-radius: 0 var(--lc-radius-sm) var(--lc-radius-sm) 0;
  color: var(--lc-bone);
  font-size: .88rem;
}
.lc-cp__addedmark {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--lc-volt);
  color: var(--lc-ground);
}
.lc-cp__addedtext { flex: 1 1 auto; min-width: 0; word-break: break-word; }
.lc-cp__jump {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 var(--lc-3);
  background: none;
  border: 1px solid var(--lc-volt);
  border-radius: var(--lc-radius-sm);
  color: var(--lc-volt);
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
}
.lc-cp__jump:hover { box-shadow: var(--lc-glow-volt); }
/* The stage is beside the form on desktop, so there is nothing to jump to. */
@media (min-width: 1000px) { .lc-cp__jump { display: none; } }

/* ==========================================================================
   Backlit block — tablet alignment
   Below 960px the copy stacks above the comparison. On a phone the eyebrow,
   heading and button read well centred with the body left. At tablet width the
   block is far wider, and that mix leaves a centred heading floating over a
   left-aligned paragraph with a large gap between them — it reads as a mistake.
   Above the phone breakpoint the whole block aligns left.
   ========================================================================== */
@media (min-width: 700px) and (max-width: 959px) {
  .lc-bx__copy { text-align: left; }
  .lc-bx__eyebrow { justify-content: flex-start; }
  .lc-bx__actions { justify-content: flex-start; }
  .lc-bx__sub { margin-inline: 0; max-width: 52ch; }
  .lc-bx__cta { width: auto; }
}

/* ==========================================================================
   Upload confirmation — treatment
   A bordered box directly beneath the dashed upload box gave two hard outlines a
   few pixels apart, which reads as one overlapping the other however the gap is
   tuned. The confirmation drops its outline and takes the accent-bar treatment
   used elsewhere for notes, so there is only ever one box edge in that column.
   ========================================================================== */

@media (max-width: 767px) {
  /* Stack the parts rather than letting the filename and the button fight over
     one line — the filename can be long and is not truncatable to nothing. */
  .lc-cp__added { align-items: flex-start; }
  .lc-cp__jump { width: 100%; justify-content: center; margin-top: 2px; }
}

/* ==========================================================================
   Newsletter + WhatsApp channel — [lc_newsletter]
   ========================================================================== */
.lc-news {
  display: grid;
  gap: var(--lc-6);
  margin: 0 0 var(--lc-section);
  padding: var(--lc-7) var(--lc-6);
  background: var(--lc-surface);
  border: 1px solid var(--lc-line);
  border-radius: var(--lc-radius);
}
@media (min-width: 900px) {
  .lc-news { grid-template-columns: 1fr 1fr; gap: var(--lc-8); padding: var(--lc-8); }
  /* One hairline between the halves, not a border on each. */
  .lc-news__col + .lc-news__col {
    border-left: 1px solid var(--lc-line);
    padding-left: var(--lc-8);
  }
  .lc-news.is-single { grid-template-columns: minmax(0, 640px); justify-content: center; }
}

.lc-news__eyebrow {
  margin: 0 0 var(--lc-2);
  color: var(--lc-volt);
  font-family: var(--lc-font-display);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.lc-news__title {
  margin: 0 0 var(--lc-3);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.02;
  letter-spacing: -.02em;
}
.lc-news__sub { margin: 0 0 var(--lc-5); color: var(--lc-smoke); max-width: 46ch; }

/* ---- form ---- */
.lc-news__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lc-3);
  margin: 0 0 var(--lc-6);
}
.lc-news__field { position: relative; flex: 1 1 15rem; min-width: 0; display: block; }
.lc-news__field input {
  width: 100%;
  min-height: 54px;
  padding-right: 46px;
  border-radius: var(--lc-radius-sm);
}
.lc-news__at {
  position: absolute;
  right: var(--lc-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--lc-smoke);
  pointer-events: none;
  display: flex;
}
.lc-news__go,
.lc-news__wago {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lc-2);
  min-height: 54px;
  padding: 0 var(--lc-5);
  border-radius: var(--lc-radius-sm);
  font-family: var(--lc-font-display);
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.lc-news__go { background: var(--lc-volt); color: var(--lc-ground); border: 0; }
.lc-news__go:hover { box-shadow: var(--lc-glow-volt); }
/* The channel is the secondary action of the two, so it is outlined, not filled. */
.lc-news__wago {
  background: none;
  border: 1px solid var(--lc-volt);
  color: var(--lc-volt);
  flex: 1 1 auto;
}
.lc-news__wago:hover { box-shadow: var(--lc-glow-volt); color: var(--lc-volt); }
.lc-news__wa { color: var(--lc-volt); display: flex; flex: 0 0 auto; }

/* Honeypot: out of sight, out of the tab order, never announced. */
.lc-news__hp {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.lc-news__done,
.lc-news__error {
  margin: 0 0 var(--lc-6);
  padding: var(--lc-3) var(--lc-4);
  border-radius: var(--lc-radius-sm);
  font-size: .92rem;
}
.lc-news__done {
  background: rgb(180 255 46 / .07);
  border-left: 3px solid var(--lc-volt);
  color: var(--lc-bone);
}
.lc-news__error {
  background: var(--lc-ember);      /* fill, never text (LCB-03) */
  color: var(--lc-bone);
}

/* ---- perks ---- */
.lc-news__perks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lc-2) 0;
  color: var(--lc-bone);
  font-size: .88rem;
}
.lc-news__perks li {
  display: flex;
  align-items: center;
  gap: var(--lc-2);
  padding-inline: var(--lc-4);
}
.lc-news__perks li:first-child { padding-left: 0; }
.lc-news__perks li + li { border-left: 1px solid var(--lc-line); }
.lc-news__picon {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: 0 0 auto;
  border: 1px solid var(--lc-line);
  border-radius: 50%;
  color: var(--lc-volt);
}
@media (max-width: 520px) {
  /* Three items with dividers will not fit; drop the dividers and let them wrap. */
  .lc-news__perks li { padding-inline: 0; flex: 1 1 100%; }
  .lc-news__perks li + li { border-left: 0; }
  .lc-news__go, .lc-news__wago { width: 100%; }
}

/* The format tiles are three across even on a phone, so "From Rs. 11,700" on one
   line forces the type down to keep it in the track. Splitting the label from the
   figure lets the amount stay legible — it is the number people compare. */
.lc-cp__fprice { display: inline; }
.lc-cp__flabel { opacity: .8; }

@media (max-width: 767px) {
  .lc-cp__fprice {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.25;
  }
  .lc-cp__flabel {
    font-size: .6rem;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .lc-cp__famt { font-size: .76rem; font-weight: 700; }
}