@charset "UTF-8";
/* ==========================================================================
   LUCETELLE — single source of truth for site layout and styling.
   Loaded by the LUCETELLE Site Pack plugin. The child theme ships no CSS.

   Layer order (never reorder, never bolt a new layer on the end):
     01 tokens + reset + typography + controls
     02 shell (header / mobile menu / footer)
     03 page container + Blocksy/WooCommerce normalisation
     04 editorial sections (home, about, collections, designers)
     05 catalog + product grid
     06 product page
     07 forms
     08 responsive
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces — warm graphite */
  --lt-bg:            #171614;
  --lt-surface:       #1D1C19;
  --lt-surface-2:     #23221E;
  --lt-surface-3:     #2A2824;

  /* Text — warm light */
  --lt-text:          #F2EFE8;
  --lt-text-soft:     #C8C2B7;
  --lt-text-muted:    #979086;

  /* Lines */
  --lt-line:          #33312C;
  --lt-line-strong:   #47443D;

  /* The only accent: copper */
  --lt-copper:        #B66D43;
  --lt-copper-hover:  #C67E53;
  --lt-copper-tint:   rgba(182,109,67,.12);

  /* Light control surface (primary button) */
  --lt-light:         #F2EFE8;
  --lt-light-hover:   #FFFFFF;
  --lt-on-light:      #17160F;

  /* Radii */
  --lt-r-btn:   999px;
  --lt-r-card:  20px;
  --lt-r-img:   16px;
  --lt-r-field: 14px;

  /* Widths */
  --lt-max:         1440px;
  --lt-max-product: 1480px;   /* minus gutters => 1328–1368px of content */
  --lt-max-text:    720px;

  /* Gutters — never let content touch the viewport edge */
  --lt-gutter: clamp(20px, 4vw, 56px);

  /* Vertical rhythm. Section: 56–88 mobile, 80–140 desktop. */
  --lt-section: clamp(56px, 7.4vw, 140px);

  /* The spacing scale. Used everywhere; no ad-hoc margins. */
  --lt-gap-label: clamp(20px, 2.1vw, 28px);   /* label  -> heading   */
  --lt-gap-head:  clamp(24px, 2.4vw, 32px);   /* heading -> paragraph */
  --lt-gap-cta:   clamp(32px, 3.4vw, 48px);   /* paragraph -> CTA    */
  --lt-gap-body:  clamp(14px, 1.2vw, 20px);   /* paragraph -> paragraph */
  --lt-gap-grid:  clamp(20px, 2.4vw, 40px);

  /* Card interiors: >= 24px mobile, >= 40px desktop */
  --lt-card-pad:     clamp(24px, 3.1vw, 56px);
  --lt-card-pad-sm:  clamp(24px, 2.2vw, 40px);

  /* Header */
  --lt-header-h: 64px;

  --lt-ease: cubic-bezier(.22,.61,.36,1);
}

@media (min-width: 1000px) {
  :root { --lt-header-h: 76px; }
}

/* --------------------------------------------------------------------------
   2. RESET — scoped to what this stylesheet owns
   -------------------------------------------------------------------------- */
body.ltsp-shell,
body.ltsp-shell *,
body.ltsp-shell *::before,
body.ltsp-shell *::after { box-sizing: border-box; }

body.ltsp-shell {
  margin: 0;
  background: var(--lt-bg);
  color: var(--lt-text);
  font-family: "Manrope", "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

body.ltsp-shell img,
body.ltsp-shell svg,
body.ltsp-shell video { max-width: 100%; }

/* :where() keeps this a zero-specificity default. As a normal selector it
   would out-specify every .lt-*__img rule and collapse the full-bleed
   images (hero, editorial media, image CTA) to their intrinsic height. */
:where(body.ltsp-shell) img { display: block; height: auto; }

/* hidden always wins over any layout rule below (the mobile menu relies on it) */
body.ltsp-shell [hidden] { display: none; }

/* Never break Russian words mid-glyph. This is what produced
   "Индивидуаль-ная" in the designer cards. */
body.ltsp-shell,
body.ltsp-shell h1, body.ltsp-shell h2, body.ltsp-shell h3,
body.ltsp-shell h4, body.ltsp-shell p,  body.ltsp-shell li,
body.ltsp-shell a,  body.ltsp-shell span, body.ltsp-shell label {
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  -webkit-hyphens: none;
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY

   Scoped with :where() so these are ZERO-specificity defaults. Every
   component rule further down the file beats them without !important —
   that is the whole point of the rewrite.
   -------------------------------------------------------------------------- */
:where(body.ltsp-shell) h1,
:where(body.ltsp-shell) h2,
:where(body.ltsp-shell) h3,
:where(body.ltsp-shell) h4 {
  margin: 0;
  font-weight: 500;
  letter-spacing: -.028em;
  line-height: 1.08;
  color: var(--lt-text);
  text-wrap: balance;
}

:where(body.ltsp-shell) h1 { font-size: clamp(30px, 5.2vw, 60px); }
:where(body.ltsp-shell) h2 { font-size: clamp(25px, 3.7vw, 44px); }
:where(body.ltsp-shell) h3 { font-size: clamp(19px, 1.85vw, 26px); line-height: 1.16; }
:where(body.ltsp-shell) h4 { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.24; }

:where(body.ltsp-shell) p {
  margin: 0;
  font-size: clamp(15px, 1.02vw, 17px);
  line-height: 1.62;
  color: var(--lt-text-soft);
  max-width: var(--lt-max-text);
}
:where(body.ltsp-shell) p + p { margin-top: var(--lt-gap-body); }
:where(body.ltsp-shell) strong { font-weight: 600; color: var(--lt-text); }
:where(body.ltsp-shell) em { font-style: italic; }

:where(body.ltsp-shell) a { color: var(--lt-text); text-decoration: none; }
:where(body.ltsp-shell) a:hover { color: var(--lt-copper-hover); }

:where(body.ltsp-shell) h1 + p,
:where(body.ltsp-shell) h2 + p,
:where(body.ltsp-shell) h3 + p { margin-top: var(--lt-gap-head); }

/* Copper micro-label. Always followed by --lt-gap-label. */
.lt-kicker {
  display: block;
  margin: 0 0 var(--lt-gap-label);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--lt-copper);
}

/* --------------------------------------------------------------------------
   4. CONTROLS
   -------------------------------------------------------------------------- */
.lt-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 32px;
  border: 1px solid var(--lt-light);
  border-radius: var(--lt-r-btn);
  background: var(--lt-light);
  color: var(--lt-on-light);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background .22s var(--lt-ease), border-color .22s var(--lt-ease), color .22s var(--lt-ease);
}
.lt-button:hover,
.lt-button:focus-visible {
  background: var(--lt-light-hover);
  border-color: var(--lt-light-hover);
  color: var(--lt-on-light);
}

.lt-button--ghost {
  background: transparent;
  border-color: var(--lt-line-strong);
  color: var(--lt-text);
}
.lt-button--ghost:hover,
.lt-button--ghost:focus-visible {
  background: transparent;
  border-color: var(--lt-copper);
  color: var(--lt-copper-hover);
}

.lt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: var(--lt-gap-cta);
}

.lt-text-link {
  display: inline-block;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--lt-copper);
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
}
.lt-text-link:hover { color: var(--lt-copper-hover); }

/* WordPress/WooCommerce print visually-hidden labels with this class and
   expect the theme to style it. The plugin owns the front end now, so it
   defines it itself instead of relying on Blocksy — an unstyled
   .screen-reader-text inside .quantity widens the row and pushes the
   add-to-cart button past the viewport on a narrow phone. */
body.ltsp-shell .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* One focus ring for the whole site — never the browser blue. */
body.ltsp-shell :focus-visible {
  outline: 2px solid var(--lt-copper);
  outline-offset: 3px;
  border-radius: 4px;
}
body.ltsp-shell ::selection { background: var(--lt-copper); color: #fff; }
body.ltsp-shell { accent-color: var(--lt-copper); }
/* ==========================================================================
   02 — SHELL: one header, one mobile menu, one footer.
   The child theme no longer renders any header/footer markup, so nothing
   here has to hide a second shell.
   ========================================================================== */

/* Blocksy's own header/footer are switched off in PHP; these two rules are
   the only defence if a Blocksy update re-registers them. */
body.ltsp-shell .ct-header,
body.ltsp-shell .ct-footer { display: none; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.lt-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  background: rgba(23,22,20,.88);
  border-bottom: 1px solid var(--lt-line);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  transition: background .32s var(--lt-ease), background-color .32s var(--lt-ease), border-color .32s var(--lt-ease), backdrop-filter .32s var(--lt-ease), -webkit-backdrop-filter .32s var(--lt-ease);
}

/* Transparent over the home hero only, and only until scrolled. */
body.home .lt-header:not(.is-stuck) {
  background: linear-gradient(to bottom, rgba(10,9,8,.55), rgba(10,9,8,0));
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.lt-header__inner {
  max-width: var(--lt-max);
  min-height: var(--lt-header-h);
  margin: 0 auto;
  padding: 0 var(--lt-gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}

.lt-header__logo {
  grid-column: 2;
  justify-self: center;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .2em;
  line-height: 1;
  color: var(--lt-text);
  white-space: nowrap;
}
.lt-header__logo:hover { color: var(--lt-text); }

.lt-header__nav { display: none; }

.lt-header__actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
}

.lt-cart {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--lt-text);
  white-space: nowrap;
}
.lt-cart:hover { color: var(--lt-copper-hover); }
.lt-cart__word { display: none; }
.lt-cart__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  border: 1px solid var(--lt-line-strong);
  border-radius: 999px;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0;
}
.lt-cart:hover .lt-cart__count { border-color: var(--lt-copper); }

/* Burger */
.lt-burger {
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 0 9px;
  border: 0;
  background: none;
  cursor: pointer;
}
.lt-burger span {
  display: block;
  height: 1.5px;
  width: 100%;
  background: currentColor;
  color: var(--lt-text);
  border-radius: 2px;
}

/* Body offset so fixed header never covers content. */
body.ltsp-shell { padding-top: var(--lt-header-h); }
body.ltsp-shell.home { padding-top: 0; }

/* Logged-in admins: sit below the WordPress admin bar instead of under it. */
@media screen and (min-width: 783px) {
  body.ltsp-shell.admin-bar .lt-header { top: 32px; }
}
@media screen and (min-width: 601px) and (max-width: 782px) {
  body.ltsp-shell.admin-bar .lt-header { top: 46px; }
}

/* --------------------------------------------------------------------------
   Mobile menu — portalled to <body>, fixed to the viewport.
   Not inside any scrollable or backdrop-filtered ancestor.
   -------------------------------------------------------------------------- */
.lt-menu {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  flex-direction: column;
  background: var(--lt-bg);
  overscroll-behavior: contain;
}
.lt-menu[hidden] { display: none; }

.lt-menu__inner {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;            /* only the menu scrolls, and only if it must */
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  padding: 0 var(--lt-gutter) calc(var(--lt-gutter) + env(safe-area-inset-bottom, 0px));
}

.lt-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--lt-header-h);
  margin-bottom: clamp(28px, 6vw, 56px);
}
.lt-menu__top span {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .2em;
}
.lt-menu__close {
  width: 44px;
  height: 44px;
  margin-right: -10px;
  border: 0;
  background: none;
  color: var(--lt-text);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.lt-menu__close:hover { color: var(--lt-copper-hover); }

.lt-menu__nav {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1.6vw, 12px);
}
.lt-menu__nav a {
  padding: 10px 0;
  font-size: clamp(24px, 6.4vw, 34px);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.lt-menu__nav a:hover { color: var(--lt-copper-hover); }

.lt-menu__meta {
  margin-top: auto;
  padding-top: clamp(32px, 7vw, 56px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 24px;
  border-top: 1px solid var(--lt-line);
}
.lt-menu__meta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--lt-text-muted);
}
.lt-menu__meta a:hover { color: var(--lt-copper-hover); }
.lt-menu__meta .lt-cart__count { min-width: 22px; height: 22px; font-size: 10px; }

/* Lock the page behind the open menu. */
html.lt-menu-open,
html.lt-menu-open body {
  overflow: hidden;
  overscroll-behavior: none;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.lt-footer {
  border-top: 1px solid var(--lt-line);
  background: var(--lt-bg);
}
.lt-footer__inner {
  max-width: var(--lt-max);
  margin: 0 auto;
  padding: var(--lt-section) var(--lt-gutter) clamp(32px, 4vw, 56px);
  display: grid;
  gap: clamp(36px, 4vw, 56px);
}
.lt-footer__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 4vw, 56px);
}
.lt-footer__brand p {
  margin-top: 16px;
  font-size: 14px;
  color: var(--lt-text-muted);
}
.lt-footer__brand > a {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .2em;
}
.lt-footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.lt-footer__col > span {
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--lt-copper);
  margin-bottom: 4px;
}
.lt-footer__col a { font-size: 14px; color: var(--lt-text-soft); }
.lt-footer__col a:hover { color: var(--lt-copper-hover); }

/* The seller's name and ИНН take their own line below the copyright rather
   than becoming a third item in a space-between row, where they would land
   awkwardly in the middle. flex-basis 100% is what puts them there. */
.lt-footer__req { flex: 1 1 100%; }

.lt-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--lt-line);
  font-size: 12px;
  letter-spacing: .05em;
  color: var(--lt-text-muted);
}

.lt-skip {
  position: absolute;
  left: -9999px;
  top: 0;
}
.lt-skip:focus {
  left: 12px;
  top: 12px;
  z-index: 500;
  padding: 12px 20px;
  background: var(--lt-light);
  color: var(--lt-on-light);
  border-radius: var(--lt-r-btn);
}

/* --------------------------------------------------------------------------
   Cookie notice.

   Not a modal and not a wall: the page stays readable and usable behind it.
   It is the only fixed element besides the header, so it carries the bottom
   safe-area inset itself.
   -------------------------------------------------------------------------- */
.lt-cookie {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: max(12px, env(safe-area-inset-bottom, 0px));
  width: calc(100% - (2 * var(--lt-gutter)));
  max-width: calc(var(--lt-max) - (2 * var(--lt-gutter)));
  transform: translateX(-50%);
  z-index: 800;
  background: var(--lt-surface);
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-r-field);
  padding: 20px;
}
.lt-cookie__inner {
  max-width: var(--lt-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.lt-cookie__text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--lt-text-muted);
}
.lt-cookie__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
/* Both share one row even at 375px: equal flex basis of 0 and a label that
   may wrap inside the button, rather than one full-width button per line,
   which made the notice a third of a phone screen tall. Equal size on
   purpose — declining must be exactly as easy as accepting. */
.lt-cookie__actions .lt-button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 48px;
  padding-inline: 14px;
  font-size: 11px;
  letter-spacing: .1em;
  line-height: 1.35;
}
/* ==========================================================================
   03 — PAGE CONTAINER + Blocksy/WooCommerce normalisation.

   One wrapper for every page: .lt-shell > .lt-page.
   Blocksy's own containers are flattened here once, so no individual
   section has to fight a narrow ancestor later.
   ========================================================================== */

/* --------------------------------------------------------------------------
   BLOCKSY THEME PALETTE — remapped onto the LUCETELLE tokens.

   This is the root cause of every stray blue on the site. Blocksy ships a
   stock blue palette (--theme-palette-color-1: #2872fa) and draws EVERYTHING
   through these variables: links, buttons, table headings, form fields,
   select arrows, notices. Any element this stylesheet did not name by hand —
   and the cart and checkout are full of them — came out blue.

   Remapping the variables once fixes all of it, including pages that have
   not been styled yet. Never chase an individual blue element again: if
   something is still wrong here, a variable is missing from this block.
   -------------------------------------------------------------------------- */
body.ltsp-shell {
  /* Accent */
  --theme-palette-color-1: var(--lt-copper);
  --theme-palette-color-2: var(--lt-copper-hover);
  /* Text */
  --theme-palette-color-3: var(--lt-text);
  --theme-palette-color-4: var(--lt-text);
  /* Lines and surfaces (stock values are light greys — inverted here) */
  --theme-palette-color-5: var(--lt-line);
  --theme-palette-color-6: var(--lt-surface-2);
  --theme-palette-color-7: var(--lt-surface);
  --theme-palette-color-8: var(--lt-bg);

  --theme-text-color: var(--lt-text-soft);
  --theme-headings-color: var(--lt-text);
  --theme-border-color: var(--lt-line);
  --theme-box-shadow: none;

  --theme-link-initial-color: var(--lt-copper);
  --theme-link-hover-color: var(--lt-copper-hover);

  --theme-button-background-initial-color: var(--lt-light);
  --theme-button-background-hover-color: var(--lt-light-hover);
  --theme-button-text-initial-color: var(--lt-on-light);
  --theme-button-text-hover-color: var(--lt-on-light);
  --theme-button-border-radius: var(--lt-r-btn);
  --theme-button-padding: 0 30px;

  --theme-form-field-background-initial-color: var(--lt-bg);
  --theme-form-field-background-focus-color: var(--lt-bg);
  --theme-form-field-border-initial-color: var(--lt-line-strong);
  --theme-form-field-border-focus-color: var(--lt-copper);
  --theme-form-text-initial-color: var(--lt-text);
  --theme-form-text-focus-color: var(--lt-text);
  --theme-form-field-border-radius: var(--lt-r-field);
  --theme-form-field-height: 56px;
  --theme-form-label-color: var(--lt-text-muted);
  --theme-form-selection-color: var(--lt-copper);

  --theme-table-border-color: var(--lt-line);
  --theme-table-heading-color: var(--lt-text);
}

.lt-shell { width: 100%; }

.lt-page { width: 100%; }
.lt-page > * { width: 100%; }

/* Blocksy wraps page content in .ct-container / .ct-container-full with its
   own max-width and padding. Our sections manage their own width, so the
   ancestors are neutralised exactly once, here. */
body.ltsp-shell #main,
body.ltsp-shell .site-main,
body.ltsp-shell .ct-container,
body.ltsp-shell .ct-container-full,
body.ltsp-shell .ct-container-narrow,
body.ltsp-shell [class*="ct-container"] > article,
body.ltsp-shell .entry-content {
  max-width: none;
  width: 100%;
  margin-inline: 0;
  padding-inline: 0;
}

/* Blocksy page title bar / breadcrumbs are not part of this design. */
body.ltsp-shell .page-title,
body.ltsp-shell .hero-section,
body.ltsp-shell .ct-breadcrumbs,
body.ltsp-shell .woocommerce-breadcrumb,
body.ltsp-shell .ct-sidebar,
body.ltsp-shell .entry-header { display: none; }

/* Standard WooCommerce archive chrome we do not use: the public catalogue
   is an editorial page, not a shop archive. */
body.ltsp-shell .woocommerce-ordering,
body.ltsp-shell .woocommerce-result-count,
body.ltsp-shell .woocommerce-products-header,
body.ltsp-shell .ct-filters,
body.ltsp-shell .products .woocommerce-loop-category__title,
body.ltsp-shell .product_meta,
body.ltsp-shell .woocommerce-tabs .reviews_tab,
body.ltsp-shell #reviews,
body.ltsp-shell .woocommerce-product-rating { display: none; }

/* WooCommerce notices, restyled once. */
body.ltsp-shell .woocommerce-message,
body.ltsp-shell .woocommerce-info,
body.ltsp-shell .woocommerce-error {
  max-width: var(--lt-max);
  margin: 0 auto var(--lt-gap-cta);
  padding: 20px var(--lt-card-pad-sm);
  border: 1px solid var(--lt-line);
  border-left: 3px solid var(--lt-copper);
  border-radius: var(--lt-r-field);
  background: var(--lt-surface);
  color: var(--lt-text);
  list-style: none;
  font-size: 14px;
}
body.ltsp-shell .woocommerce-message a,
body.ltsp-shell .woocommerce-info a { color: var(--lt-copper); }

/* --------------------------------------------------------------------------
   Section primitives. Every section on the site uses one of these.
   -------------------------------------------------------------------------- */
.lt-section {
  max-width: var(--lt-max);
  margin: 0 auto;
  padding: var(--lt-section) var(--lt-gutter);
}
.lt-section--tight { padding-block: calc(var(--lt-section) * .62); }
.lt-section--flush { max-width: none; padding-inline: 0; }

.lt-head { max-width: 900px; margin-bottom: clamp(36px, 4.6vw, 72px); }
.lt-head p { margin-top: var(--lt-gap-head); }

.lt-head--row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--lt-gap-cta);
  max-width: none;
}
.lt-head--row > div { max-width: 760px; }
.lt-head--row .lt-button { flex: none; }
/* ==========================================================================
   04 — EDITORIAL SECTIONS
   Home, About, Collections, Designers, Delivery, FAQ, Contacts, 404.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero — one statement over a strong interior frame.
   -------------------------------------------------------------------------- */
.lt-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 82svh;
  background: var(--lt-surface);
  isolation: isolate;
}
.lt-hero__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
/* Mandatory shade so the statement is always readable, without hiding
   the room: dark at the bottom, transparent across the top two thirds. */
.lt-hero__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(10,9,8,.52) 0%,     /* under the transparent header */
      rgba(10,9,8,.12) 24%,
      rgba(10,9,8,.08) 44%,    /* the room stays visible here */
      rgba(10,9,8,.58) 74%,    /* the statement starts here */
      rgba(10,9,8,.86) 100%);
}
.lt-hero__content {
  width: min(100%, var(--lt-max));
  margin: 0 auto;
  padding: clamp(120px, 18vh, 200px) var(--lt-gutter) clamp(44px, 7vw, 96px);
}
.lt-hero__statement {
  /* ch-based measure: ~4 short lines on a phone, ~3 on a wide screen,
     so the statement never fills the frame. */
  max-width: min(100%, 26ch);
  font-size: clamp(25px, 4.4vw, 52px);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -.022em;
  color: #fff;
  text-wrap: balance;
  text-shadow: 0 1px 24px rgba(0,0,0,.35);
}

/* --------------------------------------------------------------------------
   Collection cards (3 collections on home)
   -------------------------------------------------------------------------- */
.lt-collections {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(36px, 3.2vw, 44px);
}
.lt-collection { display: flex; flex-direction: column; }
.lt-collection__media {
  display: block;
  margin-bottom: clamp(20px, 2.2vw, 28px);
  border-radius: var(--lt-r-img);
  overflow: hidden;
  background: var(--lt-surface-2);
}
.lt-collection__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform .5s var(--lt-ease);
}
.lt-collection:hover .lt-collection__media img { transform: scale(1.03); }
.lt-collection .lt-kicker { margin-bottom: 10px; }
.lt-collection h3 { margin-bottom: var(--lt-gap-body); }
.lt-collection p { font-size: 15px; }
.lt-collection .lt-text-link { margin-top: clamp(20px, 2vw, 26px); align-self: flex-start; }

/* --------------------------------------------------------------------------
   Editorial split: image + copy, alternating
   -------------------------------------------------------------------------- */
.lt-editorial {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--lt-surface);
}
.lt-editorial__media { background: var(--lt-surface-2); }
.lt-editorial__media img {
  width: 100%;
  height: 100%;
  min-height: 300px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.lt-editorial__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--lt-card-pad);
  max-width: 780px;
}
/* About copy and media keep the same vertical rhythm when stacked. */
.lt-intro--about + .lt-editorial { margin-top: var(--lt-gap-cta); }
.lt-editorial--dark { background: var(--lt-bg); }
.lt-editorial--soft { background: var(--lt-surface-2); }
.lt-editorial .lt-button,
.lt-editorial .lt-actions { align-self: flex-start; }
.lt-editorial__copy > .lt-button { margin-top: var(--lt-gap-cta); }

/* Product-detail style image: contained, not cropped */
.lt-editorial--object .lt-editorial__media {
  display: grid;
  place-items: center;
  padding: var(--lt-card-pad);
}
.lt-editorial--object .lt-editorial__media img {
  aspect-ratio: auto;
  height: auto;
  max-height: 560px;
  object-fit: contain;
  border-radius: var(--lt-r-img);
}

/* Fact / spec lines */
.lt-lines {
  display: grid;
  margin-top: var(--lt-gap-head);
  border-top: 1px solid var(--lt-line);
}
.lt-lines span {
  padding: 15px 0;
  border-bottom: 1px solid var(--lt-line);
  font-size: 14px;
  line-height: 1.5;
  color: var(--lt-text-soft);
}
.lt-lines b { font-weight: 600; color: var(--lt-text); }
.lt-lines + p { margin-top: var(--lt-gap-head); }

/* --------------------------------------------------------------------------
   Split text (two copy columns)
   -------------------------------------------------------------------------- */
.lt-split {
  max-width: var(--lt-max);
  margin: 0 auto;
  padding: var(--lt-section) var(--lt-gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(44px, 5vw, 96px);
}
.lt-split h2 + p,
.lt-split h2 + .lt-sizes { margin-top: var(--lt-gap-head); }

.lt-sizes { display: grid; gap: var(--lt-gap-grid); }
.lt-sizes > div {
  padding: var(--lt-card-pad-sm);
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-r-card);
  background: var(--lt-surface);
}
.lt-sizes strong {
  display: block;
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 500;
  letter-spacing: -.02em;
}
.lt-sizes p { margin-top: var(--lt-gap-body); font-size: 14px; }

/* --------------------------------------------------------------------------
   Image CTA
   -------------------------------------------------------------------------- */
.lt-image-cta {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(84svh, 720px);
  padding: var(--lt-gutter);
  isolation: isolate;
}
.lt-image-cta > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lt-image-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(10,9,8,.15) 0%, rgba(10,9,8,.55) 100%);
}
.lt-image-cta__box {
  max-width: 620px;
  padding: var(--lt-card-pad);
  border-radius: var(--lt-r-card);
  background: rgba(23,22,20,.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.lt-image-cta__box .lt-button { margin-top: var(--lt-gap-cta); }

/* --------------------------------------------------------------------------
   Statement / brand block
   -------------------------------------------------------------------------- */
.lt-statement {
  max-width: var(--lt-max);
  margin: 0 auto;
  padding: var(--lt-section) var(--lt-gutter);
  text-align: left;
}
.lt-statement h2 { max-width: 20ch; }
.lt-statement p { margin-top: var(--lt-gap-head); }
.lt-statement .lt-button { margin-top: var(--lt-gap-cta); }
.lt-statement--soft {
  border-top: 1px solid var(--lt-line);
  border-bottom: 1px solid var(--lt-line);
  background: var(--lt-surface);
}
.lt-statement--center { text-align: center; }
.lt-statement--center h2,
.lt-statement--center p { margin-inline: auto; }

/* Final CTA */
.lt-final {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(76svh, 640px);
  padding: var(--lt-gutter);
  isolation: isolate;
}
.lt-final > img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.lt-final::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,9,8,.20) 0%, rgba(10,9,8,.74) 100%);
}
.lt-final > div { max-width: 720px; }
.lt-final p { margin-top: var(--lt-gap-head); color: rgba(255,255,255,.82); }

/* --------------------------------------------------------------------------
   Page intro (catalog, about, delivery, faq, contacts, returns)
   -------------------------------------------------------------------------- */
.lt-intro {
  max-width: var(--lt-max);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 96px) var(--lt-gutter) 0;
}
.lt-intro h1 { max-width: 18ch; }
.lt-intro p { margin-top: var(--lt-gap-head); }

/* On a legal page the intro shares the document's measure. Without this the
   title sits at the page gutter while the clauses start 270px further in on
   a wide screen, and the two read as separate documents. */
.lt-intro--legal { max-width: 900px; }

.lt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--lt-gap-cta);
}
.lt-chips a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid var(--lt-line-strong);
  border-radius: var(--lt-r-btn);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lt-text);
}
.lt-chips a:hover { border-color: var(--lt-copper); color: var(--lt-copper-hover); }

/* Collection hero (collection + designers pages) */
.lt-collection-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--lt-surface);
}
.lt-collection-hero__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.lt-collection-hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--lt-card-pad);
}
.lt-collection-hero__copy h1 { max-width: 15ch; }
.lt-collection-hero__copy h2 {
  margin-top: var(--lt-gap-head);
  font-size: clamp(18px, 1.6vw, 23px);
  font-weight: 400;
  color: var(--lt-text-soft);
}
.lt-collection-hero__copy p { margin-top: var(--lt-gap-head); }
.lt-collection-hero__copy .lt-button { margin-top: var(--lt-gap-cta); align-self: flex-start; }

/* --------------------------------------------------------------------------
   Service / designer cards — generous interiors, no cramped text.
   -------------------------------------------------------------------------- */
.lt-services {
  max-width: var(--lt-max);
  margin: 0 auto;
  padding: var(--lt-section) var(--lt-gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--lt-gap-grid);
}
.lt-services article {
  display: flex;
  flex-direction: column;
  padding: var(--lt-card-pad);
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-r-card);
  background: var(--lt-surface);
}
.lt-services article > span {
  display: block;
  margin-bottom: var(--lt-gap-label);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .17em;
  color: var(--lt-copper);
}
.lt-services h2 {
  font-size: clamp(20px, 1.75vw, 25px);
  line-height: 1.2;
  text-wrap: pretty;
}
.lt-services p {
  margin-top: var(--lt-gap-head);
  font-size: 15px;
  line-height: 1.62;
}

/* --------------------------------------------------------------------------
   FAQ / legal / 404
   -------------------------------------------------------------------------- */
.lt-faq {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--lt-section) var(--lt-gutter);
  display: grid;
  gap: 0;
}
.lt-faq details {
  border-bottom: 1px solid var(--lt-line);
}
.lt-faq summary {
  padding: clamp(20px, 2.2vw, 28px) 44px clamp(20px, 2.2vw, 28px) 0;
  position: relative;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}
.lt-faq summary::-webkit-details-marker { display: none; }
.lt-faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  line-height: 1;
  color: var(--lt-copper);
}
.lt-faq details[open] summary::after { content: "–"; }
.lt-faq summary:hover { color: var(--lt-copper-hover); }
.lt-faq details p { padding: 0 44px clamp(22px, 2.4vw, 30px) 0; }

.lt-legal {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--lt-section) var(--lt-gutter);
}
/* Quieter than an editorial heading: a document with fifteen numbered
   sections reads as a wall of shouting at the display size. */
.lt-legal h2 {
  margin-top: var(--lt-gap-cta);
  font-size: clamp(18px, 1.5vw, 21px);
  letter-spacing: -.005em;
}
.lt-legal h2:first-child { margin-top: 0; }
.lt-legal p { margin-top: var(--lt-gap-head); }
.lt-legal .lt-button { margin-top: var(--lt-gap-cta); }

/* Clause lists. Legal text is read in fragments, so the marker has to sit
   clear of the text rather than hang off the measure. */
.lt-legal ul {
  margin-top: var(--lt-gap-head);
  padding: 0;
  list-style: none;
}
.lt-legal li {
  position: relative;
  padding-left: 22px;
  margin-top: 10px;
  color: var(--lt-text-soft);
}
.lt-legal li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .65em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lt-copper);
}

/* Requisites. Two columns where there is room, stacked pairs on a phone —
   never a table, which cannot wrap a long address at 375px. */
.lt-legal__meta {
  margin: var(--lt-gap-head) 0 0;
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-r-card);
  background: var(--lt-surface);
}
.lt-legal__meta dt {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lt-copper);
}
.lt-legal__meta dd {
  margin: 6px 0 0;
  color: var(--lt-text);
  overflow-wrap: anywhere;
}
.lt-legal__meta dd + dt { margin-top: 20px; }

.lt-404 {
  max-width: var(--lt-max);
  margin: 0 auto;
  padding: clamp(80px, 14vw, 180px) var(--lt-gutter);
}
/* ==========================================================================
   05 — CATALOG / PRODUCT GRID
   One grid definition. Used by the [ltsp_products] shortcode and by any
   native WooCommerce loop that still renders (search, category fallback).
   ========================================================================== */

.lt-grid {
  display: grid;
  grid-template-columns: 1fr;                    /* mobile: one large card */
  gap: clamp(40px, 4vw, 64px) var(--lt-gap-grid);
}

.lt-card { display: flex; flex-direction: column; }

.lt-card__media {
  display: block;
  border-radius: var(--lt-r-img);
  overflow: hidden;
  background: var(--lt-surface-2);
}
.lt-card__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform .5s var(--lt-ease);
}
.lt-card:hover .lt-card__media img { transform: scale(1.03); }

.lt-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: clamp(16px, 1.6vw, 22px);
}
.lt-card__body h3 {
  font-size: clamp(17px, 1.35vw, 21px);
  font-weight: 500;
  line-height: 1.24;
}
.lt-card__price {
  font-size: 14px;
  letter-spacing: .01em;
  color: var(--lt-text-muted);
}
.lt-card__price .amount,
.lt-card__price bdi { color: var(--lt-text-muted); }

.lt-empty {
  padding: var(--lt-card-pad);
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-r-card);
  background: var(--lt-surface);
  color: var(--lt-text-muted);
}

/* --------------------------------------------------------------------------
   Native WooCommerce loop fallback — quiet cards, no marketplace CTA.
   -------------------------------------------------------------------------- */
body.ltsp-shell ul.products {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 4vw, 64px) var(--lt-gap-grid);
  margin: 0;
  padding: 0;
  list-style: none;
}
body.ltsp-shell ul.products::before,
body.ltsp-shell ul.products::after { content: none; }
body.ltsp-shell ul.products li.product {
  width: auto;
  margin: 0;
  padding: 0;
  float: none;
  text-align: left;
}
body.ltsp-shell ul.products li.product img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--lt-r-img);
  margin-bottom: clamp(16px, 1.6vw, 22px);
}
body.ltsp-shell ul.products li.product .woocommerce-loop-product__title {
  padding: 0;
  font-size: clamp(17px, 1.35vw, 21px);
  font-weight: 500;
  line-height: 1.24;
  color: var(--lt-text);
}
body.ltsp-shell ul.products li.product .price {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--lt-text-muted);
}
/* No oversized "Выберите параметры" button in the grid. */
body.ltsp-shell ul.products li.product .button,
body.ltsp-shell ul.products li.product .added_to_cart,
body.ltsp-shell ul.products li.product .onsale,
body.ltsp-shell ul.products li.product .ct-woo-card-actions { display: none; }
/* ==========================================================================
   06 — PRODUCT PAGE
   Mobile-first single column; one two-column grid from 1000px up.
   Details always sit BELOW the buy area — never as a third narrow column.
   ========================================================================== */

.lt-product {
  max-width: var(--lt-max-product);
  margin: 0 auto;
  padding: clamp(24px, 3vw, 48px) var(--lt-gutter) var(--lt-section);
}

.lt-product__hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 4vw, 48px);
}

/* --------------------------------------------------------------------------
   Gallery — view only. No lightbox, no zoom, no layout shift.
   -------------------------------------------------------------------------- */
.lt-product__gallery { min-width: 0; }

.lt-product__gallery .woocommerce-product-gallery {
  width: 100%;
  margin: 0;
  float: none;
  opacity: 1;
}
.lt-product__gallery .woocommerce-product-gallery__wrapper { margin: 0; }

.lt-product__gallery .woocommerce-product-gallery__image {
  border-radius: var(--lt-r-img);
  overflow: hidden;
  background: var(--lt-surface-2);
}
.lt-product__gallery .woocommerce-product-gallery__image img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
/* Main image is not a link target: nothing happens on click or hover. */
.lt-product__gallery .woocommerce-product-gallery__image > a {
  display: block;
  cursor: default;
  pointer-events: none;
}
.lt-product__gallery .woocommerce-product-gallery__trigger,
.lt-product__gallery .zoomImg,
body.ltsp-shell .pswp { display: none; }

/* Thumbnails — the only interactive part of the gallery. */
.lt-product__gallery .flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(8px, 1vw, 14px);
  margin: clamp(12px, 1.4vw, 18px) 0 0;
  padding: 0;
  list-style: none;
}
.lt-product__gallery .flex-control-thumbs li { margin: 0; width: auto; }
.lt-product__gallery .flex-control-thumbs img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  opacity: .55;
  cursor: pointer;
  transition: opacity .2s var(--lt-ease), box-shadow .2s var(--lt-ease);
}
.lt-product__gallery .flex-control-thumbs img:hover { opacity: .85; }
.lt-product__gallery .flex-control-thumbs img.flex-active {
  opacity: 1;
  box-shadow: 0 0 0 1.5px var(--lt-copper);
}

/* --------------------------------------------------------------------------
   Product info column
   -------------------------------------------------------------------------- */
.lt-product__info { min-width: 0; }

.lt-product__info .product_title {
  margin: 0;
  font-size: clamp(28px, 3.3vw, 46px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.028em;
  color: var(--lt-text);
}


/* Three short facts: Что даёт интерьеру / Сочетается с / Лучшее размещение.
   .lt-product-facts is the 2.x class name, kept so product pages look right
   in the window between the plugin update and the content migration. */
.lt-facts,
.lt-product-facts {
  margin-top: var(--lt-gap-cta);
  padding-top: var(--lt-gap-cta);
  border-top: 1px solid var(--lt-line);
  display: grid;
  gap: var(--lt-gap-cta);
}
.lt-facts section,
.lt-product-facts section { display: block; }
.lt-facts h3,
.lt-product-facts h3 {
  margin: 0 0 var(--lt-gap-body);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--lt-copper);
}
.lt-facts p,
.lt-product-facts p { font-size: 15px; line-height: 1.62; max-width: 56ch; }

/* --------------------------------------------------------------------------
   Purchase area
   -------------------------------------------------------------------------- */
.lt-product__buy {
  margin-top: var(--lt-gap-cta);
  padding-top: var(--lt-gap-cta);
  border-top: 1px solid var(--lt-line);
}

/* The price already provides the separator above the cart row, so the
   variation block itself adds no extra rule or gap. */
body.ltsp-shell .single_variation_wrap { display: block; }

body.ltsp-shell form.cart { margin: 0; }
body.ltsp-shell form.cart::before,
body.ltsp-shell form.cart::after { content: none; }

/* Variation rows become labelled option groups. */
body.ltsp-shell table.variations {
  display: block;
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
}
body.ltsp-shell table.variations tbody,
body.ltsp-shell table.variations tr,
body.ltsp-shell table.variations th,
body.ltsp-shell table.variations td {
  display: block;
  width: auto;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
}
body.ltsp-shell table.variations tr + tr { margin-top: var(--lt-gap-cta); }
body.ltsp-shell table.variations th label {
  display: block;
  margin: 0 0 var(--lt-gap-label);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--lt-copper);
}

/* The native <select> stays in the DOM for WooCommerce, visually hidden. */
body.ltsp-shell .lt-choices-on select {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.lt-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.lt-choice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 24px;
  border: 1px solid var(--lt-line-strong);
  border-radius: var(--lt-r-btn);
  background: var(--lt-surface);
  color: var(--lt-text);
  font: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .2s var(--lt-ease), color .2s var(--lt-ease), background .2s var(--lt-ease);
}
.lt-choice:hover { border-color: var(--lt-copper); color: var(--lt-copper-hover); }
.lt-choice.is-selected {
  border-color: var(--lt-copper);
  background: var(--lt-copper-tint);
  color: var(--lt-text);
  box-shadow: inset 0 0 0 1px var(--lt-copper);
}
.lt-choice.is-unavailable {
  opacity: .34;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* Reset link WooCommerce prints under the variations */
body.ltsp-shell .reset_variations {
  display: inline-block;
  margin-top: var(--lt-gap-body);
  font-size: 12px;
  color: var(--lt-text-muted);
}
body.ltsp-shell .reset_variations:hover { color: var(--lt-copper-hover); }

/* Variation price / availability block */
body.ltsp-shell .woocommerce-variation:not(:empty) {
  margin: var(--lt-gap-body) 0 0;
}
body.ltsp-shell .woocommerce-variation-price {
  font-size: clamp(18px, 1.5vw, 22px);
  color: var(--lt-text);
}
body.ltsp-shell .woocommerce-variation-price .amount,
body.ltsp-shell .woocommerce-variation-price bdi { color: var(--lt-text); }

/* JS mirrors the selected variation's price into .lt-product__price and only
   then adds this class. Without JS the price stays in WooCommerce's own block,
   so it is never lost — it is just never shown twice. */
body.ltsp-shell .lt-price-mirrored .woocommerce-variation-price { display: none; }

/* --------------------------------------------------------------------------
   THE PRICE — printed inside the form, under the options, above the cart row.
   Copper and large, because this is the number the customer is looking for
   while they change size and finish. It is the one place copper is used at
   size; everything else keeps it to labels and states.
   -------------------------------------------------------------------------- */
.lt-product__price {
  display: flex;
  align-items: center;
  /* Reserve the height of the price line so swapping prompt -> price does
     not shove the add-to-cart button down the page. box-sizing is border-box
     here, so the separator and the top padding have to be counted in. */
  min-height: calc(var(--lt-gap-cta) + clamp(34px, 3.2vw, 44px) + 1px);
  margin: var(--lt-gap-cta) 0 0;
  padding-top: var(--lt-gap-cta);
  border-top: 1px solid var(--lt-line);
  font-size: clamp(30px, 2.9vw, 40px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--lt-copper);
}

/* Nothing chosen yet: an instruction, deliberately NOT styled as a price. */
.lt-product__price--prompt {
  font-size: clamp(14px, 1.05vw, 16px);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--lt-text-soft);
}
.lt-product__price .amount,
.lt-product__price bdi,
.lt-product__price .price,
.lt-product__price .lt-price-from,
.lt-product__price .woocommerce-Price-currencySymbol {
  color: inherit;
  font: inherit;
}
.lt-product__price .price,
.lt-product__price .lt-price-from { display: inline; }
.lt-product__price ins { text-decoration: none; }
/* "от" stays quiet — the number is the message. */
.lt-product__price .lt-price-from { font-size: .82em; }
.lt-product__price del { display: none; }
body.ltsp-shell .woocommerce-variation-availability { font-size: 13px; color: var(--lt-text-muted); }

/* ---- Quantity + add to cart: ONE row ---- */
body.ltsp-shell .woocommerce-variation-add-to-cart,
body.ltsp-shell form.cart:not(.variations_form) {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 12px;
  margin-top: var(--lt-gap-cta);
}

/* Blocksy injects its own quantity stepper (<span class="ct-increase">/
   ".ct-decrease", absolutely positioned over the input). We ship our own
   copper one, so Blocksy's must leave the layout — otherwise both render
   and you get two overlapping +/- glyphs in different colours. */
body.ltsp-shell .quantity .ct-increase,
body.ltsp-shell .quantity .ct-decrease { display: none; }

/* Blocksy sizes .quantity from custom properties:
     div.quantity            { width: var(--quantity-width, 70px) }
     .shop_table .quantity[data-type=type-2] { --quantity-width: 100px }
   Our stepper measures 52 + 46 + 52 = 150px, so that pin, combined with the
   overflow below, silently cut the trailing "+" off the end — the cart showed
   a minus, a number, and nothing else. Neither declaration is scoped to
   Blocksy's own wrapper, so both apply here. The box is sized by its contents
   instead, and min-width keeps it that way whatever a container does. */
body.ltsp-shell .quantity {
  --quantity-width: auto;
  --quantity-height: auto;
  width: auto;
  min-width: max-content;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: stretch;
  height: 60px;
  border: 1px solid var(--lt-line-strong);
  border-radius: var(--lt-r-btn);
  background: var(--lt-surface);
  overflow: hidden;
}
body.ltsp-shell .quantity input.qty {
  flex: 0 0 46px;
  width: 46px;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--lt-text);
  font: inherit;
  font-size: 15px;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
body.ltsp-shell .quantity input.qty::-webkit-outer-spin-button,
body.ltsp-shell .quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
body.ltsp-shell .lt-qty-btn {
  /* flex: 0 0 — without it the buttons shrink inside a narrow cart cell and
     the +/- end up tiny. */
  flex: 0 0 52px;
  width: 52px;
  align-self: stretch;              /* the whole height is the tap target */
  border: 0;
  background: none;
  color: var(--lt-copper);          /* + and − are copper */
  font: inherit;
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  transition: color .2s var(--lt-ease), background .2s var(--lt-ease);
}
body.ltsp-shell .lt-qty-btn:hover { color: var(--lt-copper-hover); background: var(--lt-copper-tint); }
body.ltsp-shell .lt-qty-btn:disabled { opacity: .4; cursor: not-allowed; }

body.ltsp-shell .single_add_to_cart_button {
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 0 32px;
  border: 1px solid var(--lt-light);
  border-radius: var(--lt-r-btn);
  background: var(--lt-light);
  color: var(--lt-on-light);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .22s var(--lt-ease), border-color .22s var(--lt-ease);
}
body.ltsp-shell .single_add_to_cart_button:hover {
  background: var(--lt-light-hover);
  border-color: var(--lt-light-hover);
}
body.ltsp-shell .single_add_to_cart_button.disabled,
body.ltsp-shell .single_add_to_cart_button:disabled {
  opacity: .4;
  cursor: not-allowed;
}
body.ltsp-shell .added_to_cart { display: none; }

/* --------------------------------------------------------------------------
   Details — always a full-width band under the hero area.
   -------------------------------------------------------------------------- */
.lt-product__details {
  margin-top: var(--lt-section);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--lt-gap-grid);
}
.lt-product__details article {
  padding: var(--lt-card-pad);
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-r-card);
  background: var(--lt-surface);
}
.lt-product__details h2 {
  font-size: clamp(20px, 1.75vw, 26px);
  line-height: 1.2;
}
.lt-product__details p { margin-top: var(--lt-gap-head); font-size: 15px; }

/* Related products, when shown */
body.ltsp-shell .related.products {
  max-width: var(--lt-max-product);
  margin: 0 auto;
  padding: 0 var(--lt-gutter) var(--lt-section);
}
body.ltsp-shell .related.products > h2 {
  margin-bottom: clamp(28px, 3vw, 48px);
  font-size: clamp(22px, 2.2vw, 32px);
}

/* 2.x long description is no longer part of the product page. */
body.ltsp-shell .lt-product-long { display: none; }
/* ==========================================================================
   07 — FORMS
   The clipping was never an input-width problem: the form panel inherited
   the page gutter from an ancestor that had none. The chain is fixed here
   at every level — section, wrapper, form, field — and nothing uses a
   negative margin, a transform or a width greater than its container.
   ========================================================================== */

.lt-form-section {
  max-width: var(--lt-max);
  margin: 0 auto;
  /* The gutter lives on the section itself, so no descendant can sit
     flush against the viewport edge. */
  padding: var(--lt-section) var(--lt-gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(36px, 4vw, 72px);
  align-items: start;
}
.lt-form-section > * { min-width: 0; }
.lt-form-section__copy p { margin-top: var(--lt-gap-head); }
.lt-form-section__copy .lt-text-link { margin-top: var(--lt-gap-cta); }

.lt-form {
  width: 100%;
  max-width: 100%;
  padding: var(--lt-card-pad);
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-r-card);
  background: var(--lt-surface);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 2.2vw, 28px);
}
.lt-form > * { min-width: 0; max-width: 100%; }

.lt-form label {
  display: grid;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.lt-form label > span {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lt-text-muted);
}

.lt-form input[type="text"],
.lt-form input[type="email"],
.lt-form input[type="tel"],
.lt-form textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 56px;
  padding: 16px 18px;
  border: 1px solid var(--lt-line-strong);
  border-radius: var(--lt-r-field);
  background: var(--lt-bg);
  color: var(--lt-text);
  font: inherit;
  font-size: 16px;   /* 16px stops iOS Safari zooming on focus */
  line-height: 1.5;
}
.lt-form textarea {
  height: 180px;
  min-height: 180px;
  resize: none;
}
.lt-form input::placeholder,
.lt-form textarea::placeholder { color: var(--lt-text-muted); }
.lt-form input:focus,
.lt-form textarea:focus {
  outline: none;
  border-color: var(--lt-copper);
  box-shadow: inset 0 0 0 1px var(--lt-copper);
}

/* File input — the native control must never push the panel wider. */
.lt-form--file input[type="file"],
.lt-form input[type="file"] {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 14px 16px;
  border: 1px dashed var(--lt-line-strong);
  border-radius: var(--lt-r-field);
  background: var(--lt-bg);
  color: var(--lt-text-muted);
  font: inherit;
  font-size: 13px;
  overflow: hidden;              /* long filenames stay inside */
  text-overflow: ellipsis;
}
.lt-form input[type="file"]::file-selector-button {
  margin-right: 14px;
  padding: 10px 18px;
  border: 1px solid var(--lt-line-strong);
  border-radius: var(--lt-r-btn);
  background: var(--lt-surface-2);
  color: var(--lt-text);
  font: inherit;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.lt-form input[type="file"]::file-selector-button:hover {
  border-color: var(--lt-copper);
  color: var(--lt-copper-hover);
}

/* Consent row: a fixed-width checkbox beside flowing text.
   This is what used to stretch to 100% and blow the panel open. */
.lt-form .lt-consent {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  max-width: 100%;
}
.lt-form .lt-consent input[type="checkbox"] {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  min-width: 20px;
  max-width: 20px;
  margin: 2px 0 0;
  padding: 0;
  accent-color: var(--lt-copper);
  cursor: pointer;
}
.lt-form .lt-consent > span {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  color: var(--lt-text-muted);
}
.lt-form .lt-consent a { color: var(--lt-copper); }

.lt-form__submit { margin-top: clamp(8px, 1.2vw, 16px); }
.lt-form__submit .lt-button { width: 100%; }

/* Honeypot */
.lt-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.lt-form-success {
  margin-bottom: var(--lt-gap-cta);
  padding: 20px var(--lt-card-pad-sm);
  border: 1px solid var(--lt-copper);
  border-radius: var(--lt-r-field);
  background: var(--lt-copper-tint);
  color: var(--lt-text);
  font-size: 14px;
}
.lt-form-success--error { border-color: #C2553F; background: rgba(194,85,63,.1); }
.lt-form__status { display: none; grid-column: 1 / -1; }
.lt-form__status.is-visible {
  display: block;
  padding: 16px 18px;
  border: 1px solid var(--lt-line-strong);
  border-radius: var(--lt-r-field);
  background: var(--lt-bg);
  color: var(--lt-text);
  font-size: 14px;
}
.lt-form__status.is-success { border-color: var(--lt-copper); background: var(--lt-copper-tint); }
.lt-form__status.is-error { border-color: #C2553F; }
.lt-form .is-invalid { border-color: #C2553F !important; box-shadow: inset 0 0 0 1px #C2553F; }
.lt-field-error { display: block; color: #E18A72; font-size: 12px; line-height: 1.4; letter-spacing: 0; text-transform: none; }
.lt-consent-error { margin-top: calc(-1 * var(--lt-gap-body)); }
.lt-form button[disabled] { opacity: .6; cursor: wait; }

/* ==========================================================================
   WOOCOMMERCE CART / CHECKOUT / ACCOUNT

   Structure stays WooCommerce's. Only the visual language is ours, and the
   colours mostly come free from the palette remap in layer 03 — what is left
   here is spacing, hierarchy and the few things Woo hard-codes.
   ========================================================================== */
body.ltsp-shell.woocommerce-cart .lt-page,
body.ltsp-shell.woocommerce-checkout .lt-page,
body.ltsp-shell.woocommerce-account .lt-page,
body.ltsp-shell.woocommerce-order-received .lt-page {
  max-width: var(--lt-max);
  margin: 0 auto;
  /* Tight at the top on a phone: every pixel here pushes "Оформить заказ"
     further past the fold. */
  padding: clamp(18px, 4vw, 64px) var(--lt-gutter) var(--lt-section);
}

/* --------------------------------------------------------------------------
   Notices. WooCommerce prints an icon with its own "woo" webfont through
   ::before, absolutely positioned at left:18px — which lands on top of the
   text, because our padding is smaller than the theme's. The copper rule down
   the left edge already marks the notice, so the icon is removed rather than
   worked around.
   -------------------------------------------------------------------------- */
body.ltsp-shell .woocommerce-message,
body.ltsp-shell .woocommerce-info,
body.ltsp-shell .woocommerce-error,
body.ltsp-shell .woocommerce-noreviews,
body.ltsp-shell .cart-empty {
  position: relative;
  width: calc(100% - (2 * var(--lt-gutter)));
  max-width: calc(var(--lt-max) - (2 * var(--lt-gutter)));
  margin: clamp(16px, 2vw, 28px) auto var(--lt-gap-cta);
  padding: 20px var(--lt-card-pad-sm);
  border: 1px solid var(--lt-line);
  border-left: 1px solid var(--lt-line);
  border-radius: var(--lt-r-field);
  background: var(--lt-surface);
  color: var(--lt-text);
  font-size: 15px;
  line-height: 1.5;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
}
body.ltsp-shell .woocommerce-message::before,
body.ltsp-shell .woocommerce-info::before,
body.ltsp-shell .woocommerce-error::before,
body.ltsp-shell .cart-empty::before { content: none; }
body.ltsp-shell .woocommerce-error { border-color: #C2553F; }

/* Cart and checkout already live inside the padded page container. Do not
   subtract the gutter a second time there. */
body.ltsp-shell.woocommerce-cart .lt-page .woocommerce-message,
body.ltsp-shell.woocommerce-cart .lt-page .woocommerce-info,
body.ltsp-shell.woocommerce-cart .lt-page .woocommerce-error,
body.ltsp-shell.woocommerce-cart .lt-page .cart-empty,
body.ltsp-shell.woocommerce-checkout .lt-page .woocommerce-message,
body.ltsp-shell.woocommerce-checkout .lt-page .woocommerce-info,
body.ltsp-shell.woocommerce-checkout .lt-page .woocommerce-error {
  width: 100%;
  max-width: none;
}

/* Add-to-cart feedback remains visible after a scrolled add action. */
body.ltsp-shell .woocommerce-message.lt-cart-toast {
  position: fixed;
  top: calc(var(--lt-header-h) + 16px);
  left: 50%;
  z-index: 700;
  transform: translateX(-50%);
  margin: 0;
  box-shadow: 0 16px 48px rgba(0,0,0,.34);
}

/* "Отменить?" and friends are links inside a notice, not buttons. Blocksy
   was painting them with the stock accent, which made a blue block. */
body.ltsp-shell .woocommerce-message a,
body.ltsp-shell .woocommerce-info a,
body.ltsp-shell .restore-item {
  padding: 0;
  border: 0;
  background: none;
  color: var(--lt-copper);
  font-size: inherit;
  font-weight: 600;
  line-height: inherit;
  text-transform: none;
  letter-spacing: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: 0;
}
body.ltsp-shell .woocommerce-message a:hover,
body.ltsp-shell .restore-item:hover { color: var(--lt-copper-hover); background: none; }
/* …except a genuine button in a notice ("Вернуться в магазин"). */
body.ltsp-shell .woocommerce-message a.button,
body.ltsp-shell .woocommerce-info a.button {
  text-decoration: none;
  font-weight: 650;
}

/* --------------------------------------------------------------------------
   Fields — same language as the site forms
   -------------------------------------------------------------------------- */
body.ltsp-shell .woocommerce form .form-row { margin: 0 0 var(--lt-gap-body); padding: 0; }
body.ltsp-shell .woocommerce form .form-row label,
body.ltsp-shell .woocommerce-billing-fields label,
body.ltsp-shell .woocommerce-shipping-fields label {
  display: block;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .14em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--lt-text-muted);
}
body.ltsp-shell .woocommerce form .form-row label.checkbox,
body.ltsp-shell .woocommerce form .form-row label.woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--lt-text-soft);
}
body.ltsp-shell .woocommerce form .form-row label.checkbox input[type="checkbox"] {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--lt-copper);
}

/* Kept in the DOM for shipping zones and tax, but not asked of the customer. */
body.ltsp-shell .ltsp-field-hidden { display: none; }

/* The required marker was Woo's default red. */
body.ltsp-shell .required,
body.ltsp-shell abbr.required,
body.ltsp-shell .woocommerce form .form-row .required {
  color: var(--lt-copper);
  border: 0;
  text-decoration: none;
}
body.ltsp-shell .optional { color: var(--lt-text-muted); font-weight: 400; }

body.ltsp-shell .woocommerce form .form-row input.input-text,
body.ltsp-shell .woocommerce form .form-row textarea,
body.ltsp-shell .woocommerce form .form-row select,
body.ltsp-shell .woocommerce input[type="text"],
body.ltsp-shell .woocommerce input[type="email"],
body.ltsp-shell .woocommerce input[type="tel"],
body.ltsp-shell .woocommerce input[type="password"],
body.ltsp-shell .select2-container .select2-selection--single {
  width: 100%;
  max-width: 100%;
  min-height: 56px;
  height: auto;
  padding: 15px 18px;
  border: 1px solid var(--lt-line-strong);
  border-radius: var(--lt-r-field);
  background: var(--lt-bg);
  color: var(--lt-text);
  font: inherit;
  font-size: 16px;   /* stops iOS zooming on focus */
  line-height: 1.45;
}
body.ltsp-shell .woocommerce form .form-row input.input-text:focus,
body.ltsp-shell .woocommerce form .form-row textarea:focus,
body.ltsp-shell .woocommerce form .form-row select:focus {
  outline: none;
  border-color: var(--lt-copper);
  box-shadow: inset 0 0 0 1px var(--lt-copper);
}
body.ltsp-shell .woocommerce form .form-row textarea {
  height: 180px;
  min-height: 180px;
  resize: none;
}
body.ltsp-shell .woocommerce form .form-row.woocommerce-invalid input.input-text,
body.ltsp-shell .woocommerce form .form-row.woocommerce-invalid select,
body.ltsp-shell .woocommerce form .form-row.woocommerce-invalid textarea {
  border-color: #C2553F;
  box-shadow: inset 0 0 0 1px #C2553F;
}
body.ltsp-shell .woocommerce form .form-row .lt-checkout-field-error {
  margin-top: 6px;
  color: #E18A72;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}
body.ltsp-shell .woocommerce ::placeholder { color: var(--lt-text-muted); opacity: 1; }

/* Native + select2 dropdowns: copper arrow, dark menu, never the stock blue. */
body.ltsp-shell .woocommerce form .form-row select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 46px;
  background-image: linear-gradient(45deg, transparent 50%, var(--lt-copper) 50%),
                    linear-gradient(135deg, var(--lt-copper) 50%, transparent 50%);
  background-position: calc(100% - 24px) 50%, calc(100% - 17px) 50%;
  background-size: 7px 7px, 7px 7px;
  background-repeat: no-repeat;
}
body.ltsp-shell .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0;
  color: var(--lt-text);
  line-height: inherit;
}
body.ltsp-shell .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-top-color: var(--lt-copper);
}
.select2-dropdown {
  border-color: var(--lt-line-strong);
  border-radius: var(--lt-r-field);
  background: var(--lt-surface);
  color: var(--lt-text);
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected="true"] {
  background: var(--lt-copper-tint);
  color: var(--lt-text);
}
.select2-search--dropdown .select2-search__field {
  border: 1px solid var(--lt-line-strong);
  border-radius: 10px;
  background: var(--lt-bg);
  color: var(--lt-text);
}

/* --------------------------------------------------------------------------
   Buttons — the base for every WooCommerce button.
   MUST stay above the specific overrides below: they have the same
   specificity, so the later rule wins and secondary buttons would be
   repainted as primary.
   -------------------------------------------------------------------------- */
body.ltsp-shell .woocommerce .button,
body.ltsp-shell .woocommerce button.button,
body.ltsp-shell .woocommerce input.button,
body.ltsp-shell .woocommerce a.button,
body.ltsp-shell .woocommerce #respond input#submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 30px;
  border: 1px solid var(--lt-light);
  border-radius: var(--lt-r-btn);
  background: var(--lt-light);
  color: var(--lt-on-light);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .12em;
  line-height: 1.1;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .22s var(--lt-ease), border-color .22s var(--lt-ease), color .22s var(--lt-ease);
}
body.ltsp-shell .woocommerce .button:hover,
body.ltsp-shell .woocommerce button.button:hover,
body.ltsp-shell .woocommerce a.button:hover {
  background: var(--lt-light-hover);
  border-color: var(--lt-light-hover);
  color: var(--lt-on-light);
}

/* --------------------------------------------------------------------------
   Cart table
   -------------------------------------------------------------------------- */
body.ltsp-shell .woocommerce table.shop_table {
  width: 100%;
  margin: 0 0 var(--lt-gap-cta);
  border: 0;
  border-collapse: collapse;
  color: var(--lt-text);
}
body.ltsp-shell .woocommerce table.shop_table th {
  padding: 0 0 16px;
  border: 0;
  border-bottom: 1px solid var(--lt-line);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--lt-copper);     /* was Blocksy's blue-grey heading colour */
  text-align: left;
}
body.ltsp-shell .cart_totals table.shop_table th,
body.ltsp-shell .cart_totals table.shop_table td { padding: 12px 0; }
body.ltsp-shell .woocommerce table.shop_table td {
  padding: var(--lt-gap-body) 0;
  border: 0;
  border-bottom: 1px solid var(--lt-line);
  vertical-align: middle;
}
body.ltsp-shell .woocommerce table.shop_table .woocommerce-cart-form__cart-item > td {
  padding-top: clamp(20px, 2vw, 28px);
  padding-bottom: clamp(20px, 2vw, 28px);
}
body.ltsp-shell .woocommerce-cart-form__cart-item:last-child td { border-bottom: 0; }
body.ltsp-shell .woocommerce table.shop_table .product-thumbnail img {
  width: 96px;
  border-radius: 12px;
}
body.ltsp-shell .woocommerce table.shop_table td.product-thumbnail {
  padding-right: clamp(20px, 2vw, 28px);
}
body.ltsp-shell .woocommerce table.shop_table .product-name a { color: var(--lt-text); font-weight: 500; }
body.ltsp-shell .woocommerce table.shop_table .product-name a:hover { color: var(--lt-copper-hover); }
body.ltsp-shell .woocommerce table.shop_table .product-remove a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: none;
  color: var(--lt-text-muted);
  font-size: 22px;
  line-height: 1;
  text-decoration: none;
}
body.ltsp-shell .woocommerce table.shop_table .product-remove a.remove:hover {
  background: var(--lt-copper-tint);
  color: var(--lt-copper-hover);
}

/* The actions cell holds only the update button, which is hidden because
   front.js submits a quantity change by itself. Coupons are switched off in
   PHP, so there is no coupon box either — the cell collapses to nothing and
   "Оформить заказ" moves up into the first screen. */
body.ltsp-shell .woocommerce table.shop_table td.actions {
  display: none;
  padding: 0;
  border: 0;
}
body.ltsp-shell .woocommerce td.actions:empty { display: none; }
/* Kept in the DOM and clickable by script, just never shown. */
body.ltsp-shell .woocommerce button[name="update_cart"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}
body.ltsp-shell .woocommerce a.button.wc-backward {
  flex: 0 0 auto;
  background: transparent;
  border-color: var(--lt-line-strong);
  color: var(--lt-text);
}
body.ltsp-shell .woocommerce a.button.wc-backward:hover {
  background: transparent;
  border-color: var(--lt-copper);
  color: var(--lt-copper-hover);
}
/* Woo disables "Обновить корзину" until the quantity changes — make that
   read as inactive rather than as a grey slab. */
body.ltsp-shell .woocommerce button[name="update_cart"]:disabled,
body.ltsp-shell .woocommerce button.button:disabled {
  background: transparent;
  border-color: var(--lt-line);
  color: var(--lt-text-muted);
  opacity: .55;
  cursor: not-allowed;
}

/* Totals + the one primary action */
body.ltsp-shell .cart-collaterals,
body.ltsp-shell .cart_totals {
  width: 100%;
  max-width: 520px;
  float: none;
}
body.ltsp-shell .cart-collaterals { margin-top: clamp(20px, 2.5vw, 40px); }
body.ltsp-shell .cart_totals {
  padding: clamp(20px, 2vw, 32px);
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-r-card);
  background: var(--lt-surface);
}
body.ltsp-shell .cart_totals h2 {
  margin-bottom: 14px;
  font-size: clamp(18px, 1.5vw, 22px);
}
body.ltsp-shell .cart_totals table.shop_table { margin: 0; }
body.ltsp-shell .cart_totals .order-total .amount { color: var(--lt-copper); font-size: 1.25em; }
body.ltsp-shell .wc-proceed-to-checkout { padding: var(--lt-gap-body) 0 0; }
body.ltsp-shell .wc-proceed-to-checkout a.checkout-button { width: 100%; }

/* --------------------------------------------------------------------------
   Checkout
   -------------------------------------------------------------------------- */
body.ltsp-shell .woocommerce-billing-fields h3,
body.ltsp-shell .woocommerce-shipping-fields h3,
body.ltsp-shell #order_review_heading,
body.ltsp-shell .woocommerce-additional-fields h3 {
  margin-bottom: var(--lt-gap-head);
  font-size: clamp(20px, 1.8vw, 26px);
}
body.ltsp-shell .woocommerce-checkout-review-order,
body.ltsp-shell #payment {
  padding: var(--lt-card-pad-sm);
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-r-card);
  background: var(--lt-surface);
}
body.ltsp-shell .woocommerce-checkout-review-order table.shop_table th,
body.ltsp-shell .woocommerce-checkout-review-order table.shop_table td {
  padding: 14px 0;
  vertical-align: middle;
}
body.ltsp-shell .woocommerce-checkout-review-order tfoot th,
body.ltsp-shell .woocommerce-checkout-review-order tfoot td { line-height: 1.4; }
body.ltsp-shell #payment { margin-top: var(--lt-gap-body); background: var(--lt-surface-2); }
body.ltsp-shell #payment ul.payment_methods {
  margin: 0;
  padding: 0 0 var(--lt-gap-body);
  border-bottom: 1px solid var(--lt-line);
  list-style: none;
}
body.ltsp-shell #payment ul.payment_methods li { padding: 8px 0; }
body.ltsp-shell #payment ul.payment_methods label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--lt-text);
}
body.ltsp-shell #payment input[type="radio"] { accent-color: var(--lt-copper); width: 18px; height: 18px; }
body.ltsp-shell #payment .payment_box {
  margin: 10px 0 0;
  padding: 16px 18px;
  border-radius: var(--lt-r-field);
  background: var(--lt-bg);
  color: var(--lt-text-soft);
  font-size: 14px;
}
body.ltsp-shell #payment .payment_box::before { content: none; }
/* Consent at checkout. The site form's rule is scoped to .lt-form and this
   sits inside WooCommerce's own markup, so it needs its own shape. */
body.ltsp-shell .lt-checkout-consent { margin: var(--lt-gap-head) 0 0; padding: 0; }
/* Must out-specify `.woocommerce form .form-row label` (0,3,3) above, which
   styles FIELD labels — block, 11px, uppercase, muted. Without the extra
   class the consent line lost its flex layout and the checkbox and its text
   stacked on top of each other. Every property that rule sets is reset here,
   not only the ones that looked wrong. */
body.ltsp-shell .woocommerce form .form-row.lt-checkout-consent label,
body.ltsp-shell .lt-checkout-consent label {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.55;
  text-transform: none;
  color: var(--lt-text-soft);
  cursor: pointer;
}
body.ltsp-shell .woocommerce form .form-row.lt-checkout-consent input[type="checkbox"],
body.ltsp-shell .lt-checkout-consent input[type="checkbox"] {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  min-width: 20px;
  margin: 2px 0 0;
  accent-color: var(--lt-copper);
  cursor: pointer;
}

body.ltsp-shell #place_order { width: 100%; margin-top: var(--lt-gap-body); }
body.ltsp-shell .woocommerce-terms-and-conditions-wrapper { margin: var(--lt-gap-body) 0; }

/* An empty cart has exactly one action, so it is the primary one. */
body.ltsp-shell .return-to-shop a.button,
body.ltsp-shell .return-to-shop a.button.wc-backward {
  background: var(--lt-light);
  border-color: var(--lt-light);
  color: var(--lt-on-light);
}
body.ltsp-shell .return-to-shop a.button:hover {
  background: var(--lt-light-hover);
  border-color: var(--lt-light-hover);
  color: var(--lt-on-light);
}

/* --------------------------------------------------------------------------
   Cart on a phone.

   Blocksy turns .shop_table_responsive into blocks with its own rules, which
   is why the cart looked different from everything tested here. The cart row
   is laid out explicitly instead, so it does not depend on the theme.

   Blocksy's own duplicate row (.product-mobile-actions) is removed in JS —
   see dedupeCartRows() for why CSS alone is not enough. This is the no-script
   safety net, and it also covers the checkout's copy of the same block.
   -------------------------------------------------------------------------- */
body.ltsp-shell .product-mobile-actions { display: none; }

/* 999.98px, not 767px, and it is not a taste decision. On a cart that has
   items Blocksy wraps the form in div.ct-woocommerce-cart-form, which turns
   on its own rule:

     @media (max-width: 999.98px) {
       [class*="ct-woocommerce"] .shop_table tr > .product-price,
       .product-quantity, .product-subtotal, .product-remove { display: none }
     }

   Blocksy hides those cells because its own layout re-prints them elsewhere.
   With this plugin owning the row they are simply gone: between 768px and
   999px the cart showed a photo and a title and nothing else — no quantity,
   no price, no way to remove the item. Matching Blocksy's boundary exactly
   means there is never a width where neither layout owns the row. */
@media (max-width: 999.98px) {
  body.ltsp-shell .woocommerce-cart-form__contents thead { display: none; }
  body.ltsp-shell .woocommerce-cart-form__contents,
  body.ltsp-shell .woocommerce-cart-form__contents tbody { display: block; width: 100%; }

  body.ltsp-shell .woocommerce-cart-form__cart-item {
    display: grid;
    /* min-content, not 0, for the middle track: with minmax(0, 1fr) the
       column could be squeezed below the stepper's 124px and the row would
       overlap the price. */
    grid-template-columns: 64px minmax(min-content, 1fr) auto;
    grid-template-areas:
      "thumb name    remove"
      "thumb qty     price";
    align-items: center;
    gap: 10px 12px;
    padding: var(--lt-gap-body) 0;
    border-bottom: 1px solid var(--lt-line);
  }
  /* Total placement. Every cell below is placed by name; this catches any
     cell a theme or plugin adds that we did not anticipate and gives it its
     own full-width row, instead of letting grid auto-place it into an
     implicit column on top of a real one. */
  body.ltsp-shell .woocommerce-cart-form__cart-item > * { grid-column: 1 / -1; }
  /* Grid items default to min-width:auto, so a cell whose content reports a
     larger intrinsic size stretches past its fixed track and paints over the
     next column. The thumbnail is the one at risk (see the img rule below),
     and overflow:hidden is the hard stop: a photo can never reach the title
     whatever its size. Quantity is deliberately NOT in this list — its track
     is sized from the stepper's min-content and must stay that way. */
  body.ltsp-shell .woocommerce-cart-form__cart-item .product-name { min-width: 0; }

  /* The whole thumbnail chain is pinned, because each link in it was sized
     by something else and the cell ended up 120px wide inside a 64px track —
     the photo then rode over the title by 20px. Measured on the live cart:
       td      120px  <- Blocksy: [class*=ct-woocommerce] .shop_table
                         [class*=product-thumbnail] { width: 120px }
       a       120px  <- Blocksy's .ct-media-container, display:inline-flex
       img      96px  <- our own desktop rule, which out-specifies the phone
                         one; max-width:100% could not cap it because the
                         container was wider still
     Pinning only the image is not enough: min-width:auto on a grid item lets
     an oversized cell stretch its own track. */
  body.ltsp-shell .woocommerce table.shop_table .woocommerce-cart-form__cart-item .product-thumbnail,
  body.ltsp-shell .woocommerce-cart-form__cart-item .product-thumbnail {
    width: 64px;
    min-width: 0;
    overflow: hidden;
  }
  body.ltsp-shell .woocommerce table.shop_table .woocommerce-cart-form__cart-item .product-thumbnail .ct-media-container,
  body.ltsp-shell .woocommerce-cart-form__cart-item .product-thumbnail .ct-media-container {
    display: block;
    width: 64px;
    height: auto;
  }
  /* Must out-specify `body.ltsp-shell .woocommerce table.shop_table td`,
     otherwise the cell borders survive and leave stray line fragments under
     the thumbnail and the price. */
  body.ltsp-shell .woocommerce .woocommerce-cart-form__cart-item > td,
  body.ltsp-shell .woocommerce table.shop_table .woocommerce-cart-form__cart-item > td {
    display: block;
    padding: 0;
    border: 0;
    text-align: left;
  }
  body.ltsp-shell .woocommerce-cart-form__cart-item .product-thumbnail { grid-area: thumb; }
  body.ltsp-shell .woocommerce-cart-form__cart-item .product-name { grid-area: name; }
  body.ltsp-shell .woocommerce-cart-form__cart-item .product-remove { grid-area: remove; justify-self: end; }
  body.ltsp-shell .woocommerce-cart-form__cart-item .product-quantity { grid-area: qty; }
  body.ltsp-shell .woocommerce-cart-form__cart-item .product-subtotal { grid-area: price; justify-self: end; font-size: 16px; }
  /* The per-unit price repeats the subtotal on a narrow screen. Written at
     the same specificity as the `> td { display: block }` rule above, and
     after it, or the cell reappears. */
  body.ltsp-shell .woocommerce .woocommerce-cart-form__cart-item > td.product-price,
  body.ltsp-shell .woocommerce table.shop_table .woocommerce-cart-form__cart-item > td.product-price {
    display: none;
  }
  /* Blocksy's "Товар: " prefixes belong to its layout, not ours. */
  body.ltsp-shell .woocommerce-cart-form__contents td[data-title]::before { content: none; }
  /* Must carry `table.shop_table` too. The desktop rule above is
     `.woocommerce table.shop_table .product-thumbnail img { width: 96px }`,
     a longer selector, so without it the phone size loses the cascade and
     only max-width:100% keeps the photo inside its cell — one theme rule
     away from a 96px image riding over the title. */
  body.ltsp-shell .woocommerce table.shop_table .woocommerce-cart-form__cart-item .product-thumbnail img,
  body.ltsp-shell .woocommerce-cart-form__cart-item .product-thumbnail img {
    width: 64px;
    height: auto;
    max-width: 100%;
  }
  /* Blocksy prints the unit price a second time inside the name cell. It
     carries .ct-hidden-sm, which only covers Blocksy's own small range, so
     on a phone it reappeared under the title next to the subtotal. */
  body.ltsp-shell .woocommerce-cart-form__cart-item .product-name > .price { display: none; }

  /* A slightly tighter stepper than the product page: 44 + 36 + 44 = 124px,
     which leaves the name and the price room at 375px. 44px is still a full
     tap target. */
  body.ltsp-shell .woocommerce-cart-form__cart-item .quantity { height: 52px; }
  body.ltsp-shell .woocommerce-cart-form__cart-item .lt-qty-btn {
    flex: 0 0 44px;
    width: 44px;
    font-size: 24px;
  }
  body.ltsp-shell .woocommerce-cart-form__cart-item .quantity input.qty {
    flex: 0 0 36px;
    width: 36px;
  }

  body.ltsp-shell .woocommerce table.shop_table td.actions { display: none; }
  body.ltsp-shell .woocommerce .coupon input.input-text { flex: 1 1 140px; width: auto; }
}

/* The technical WooCommerce archive uses the same horizontal grid as every
   editorial catalogue, without changing its section hierarchy. */
body.ltsp-shell.post-type-archive-product #main > .ct-container,
body.ltsp-shell.woocommerce-shop #main > .ct-container {
  width: 100%;
  max-width: var(--lt-max);
  margin-inline: auto;
  padding: clamp(32px, 5vw, 72px) var(--lt-gutter) var(--lt-section);
}
body.ltsp-shell.woocommerce-shop .ct-pagination,
body.ltsp-shell.post-type-archive-product .ct-pagination {
  margin-top: var(--lt-gap-cta);
}
body.ltsp-shell .woocommerce nav.woocommerce-pagination { display: block; width: 100%; margin-top: var(--lt-gap-cta); }
body.ltsp-shell .woocommerce nav.woocommerce-pagination ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}
body.ltsp-shell .woocommerce nav.woocommerce-pagination ul li { border: 0; }
body.ltsp-shell .woocommerce nav.woocommerce-pagination ul li a,
body.ltsp-shell .woocommerce nav.woocommerce-pagination ul li span {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 8px;
  border: 1px solid var(--lt-line-strong);
  border-radius: 999px;
  color: var(--lt-text);
  background: transparent;
}
body.ltsp-shell .woocommerce nav.woocommerce-pagination .current { border-color: var(--lt-copper); color: var(--lt-copper); }

@media (max-width: 767.98px) {
  .lt-cookie { padding-inline: 18px; }
  .lt-editorial { row-gap: var(--lt-gap-cta); }
  .lt-editorial__copy { padding-top: 0; }
  body.ltsp-shell .woocommerce-message.lt-cart-toast { top: calc(var(--lt-header-h) + 12px); }
}
/* ==========================================================================
   08 — RESPONSIVE
   Mobile-first. Everything above is the phone layout; these are the only
   media queries in the stylesheet, and they only ever ADD columns.
   Tested at 375 / 390 / 430 / 768 / 1024 / 1280 / 1440 / 1920.
   ========================================================================== */

/* ---------- >= 560px : two-up grids ---------- */
@media (min-width: 560px) {
  .lt-grid,
  body.ltsp-shell ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lt-collections { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lt-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lt-sizes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lt-form-section__copy { max-width: 620px; }
  .lt-form__submit .lt-button { width: auto; min-width: 240px; }
}

/* ---------- >= 768px : tablet ---------- */
@media (min-width: 768px) {
  .lt-collections { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lt-product__details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lt-footer__cols { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .lt-cart__word { display: inline; }
  .lt-collection-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .lt-collection-hero__img { height: 100%; aspect-ratio: auto; min-height: 480px; }
  .lt-editorial { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lt-editorial__media img { height: 100%; aspect-ratio: auto; min-height: 480px; }
  .lt-editorial--flip .lt-editorial__media { order: 2; }
  .lt-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* Once there is room the notice is one line: text left, buttons right. */
  .lt-cookie__inner { flex-direction: row; align-items: center; gap: 28px; }
  .lt-cookie__text { flex: 1 1 auto; }
  .lt-cookie__actions { flex: 0 0 auto; }
  .lt-cookie__actions .lt-button { flex: 0 0 auto; }
  /* Requisites read as label/value pairs once there is room for two columns.
     Stacked below this, because "г. Санкт-Петербург, Гражданский проспект,
     д. 15, корп. 2, кв. 21" does not fit beside a label at 375px. */
  .lt-legal__meta {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    align-items: baseline;
    gap: 14px 24px;
  }
  .lt-legal__meta dt { padding-top: 2px; }
  .lt-legal__meta dd { margin: 0; }
  .lt-legal__meta dd + dt { margin-top: 0; }
}

/* ---------- >= 1000px : desktop navigation + two-column product ---------- */
@media (min-width: 1000px) {
  /* Header: inline nav, no burger */
  .lt-burger { display: none; }
  .lt-header__inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: clamp(24px, 3vw, 56px);
  }
  .lt-header__logo { grid-column: 1; justify-self: start; font-size: 19px; }
  .lt-header__nav {
    grid-column: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(18px, 2.2vw, 38px);
  }
  .lt-header__nav a {
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .13em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--lt-text);
  }
  .lt-header__nav a:hover,
  .lt-header__nav a[aria-current="page"] { color: var(--lt-copper-hover); }
  .lt-header__actions { grid-column: 3; }

  /* The mobile overlay can never be visible on desktop. */
  .lt-menu { display: none; }

  /* ---- Product: gallery ~50% / info ~50%, generous gap, details below ---- */
  .lt-product__hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(56px, 5vw, 80px);
    align-items: start;
  }
  .lt-product__gallery { position: sticky; top: calc(var(--lt-header-h) + 24px); }
  .lt-product__gallery .woocommerce-product-gallery__image img { aspect-ratio: 4 / 5; }

  .lt-facts { grid-template-columns: 1fr; }

  /* Catalog: three across */
  .lt-grid,
  body.ltsp-shell ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lt-services { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* Form: copy beside the panel, panel never wider than its track */
  .lt-form-section {
    grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(48px, 5vw, 96px);
  }
  .lt-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lt-form > .lt-form-wide,
  .lt-form > .lt-form__submit { grid-column: 1 / -1; }

  .lt-image-cta,
  .lt-final { padding: clamp(56px, 6vw, 96px) var(--lt-gutter); }

  /* Checkout: details on the left, the order beside them instead of a
     column of empty space. No sticky — it must never trap the scroll. */
  body.ltsp-shell form.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.9fr);
    gap: clamp(40px, 4vw, 80px);
    align-items: start;
  }
  body.ltsp-shell form.checkout > #customer_details { grid-column: 1; grid-row: 1 / span 2; }
  body.ltsp-shell form.checkout > #order_review_heading { grid-column: 2; grid-row: 1; margin-top: 0; }
  body.ltsp-shell form.checkout > #order_review { grid-column: 2; grid-row: 2; }
  body.ltsp-shell form.checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; }
}

/* ---------- >= 1280px ---------- */
@media (min-width: 1280px) {
  .lt-grid,
  body.ltsp-shell ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lt-hero { min-height: min(88svh, 900px); }
}

/* ---------- >= 1600px : stop the line length growing ---------- */
@media (min-width: 1600px) {
  .lt-hero__statement { font-size: 54px; }
}

/* ---------- Motion / contrast ---------- */
@media (prefers-reduced-motion: reduce) {
  body.ltsp-shell *,
  body.ltsp-shell *::before,
  body.ltsp-shell *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .lt-product__gallery { position: static; }
}

/* On the narrowest phones the price prompt wraps to two lines while the price
   itself is one. Reserve the taller state so the add-to-cart button does not
   move when the price appears. */
@media (max-width: 389px) {
  .lt-product__price { min-height: calc(var(--lt-gap-cta) + 42px + 1px); }
}

/* Short viewports: a sticky gallery must never trap the page. */
@media (max-height: 760px) {
  .lt-product__gallery { position: static; }
}

/* ---------- Print ---------- */
@media print {
  .lt-header, .lt-menu, .lt-footer, .lt-product__buy { display: none; }
  body.ltsp-shell { background: #fff; color: #000; padding-top: 0; }
}