@import url('https://fonts.googleapis.com/css2?family=Rubik+Dirt&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Didact+Gothic&display=swap');



/* ================== VARIABLES / BASE ================== */
:root{
  --retro-cream:#f6efe4;
  --retro-red:#c94b34;
  --retro-sand:#e9c887;
  --retro-brown:#6e4a2f;
  --retro-ink:#2b2b2b;
}

.landing-wrapper{
  background:#fffaf3;
  color:var(--retro-ink);
  font-family:"Domine", Georgia, serif;
  line-height:1.6;
}

/* Containers */
.lr-container{ max-width:1240px; margin:0 auto; padding:0 20px; }
.lr-section{ max-width:1240px; margin:0 auto; padding:56px 20px; }
.lr-section--narrow{ max-width:920px; }

/* Buttons */
.lr-btn{
  display:inline-block; background:#2b2b2b; color:#fff; text-decoration:none;
  padding:12px 24px; border-radius:999px; font-weight:700;
  transition:transform .15s, box-shadow .15s, background .15s;
  box-shadow:0 6px 14px rgba(0,0,0,.18);
}
.lr-btn:hover{ transform:translateY(-2px); background:#444; }
.lr-btn--light{ background:#fff; color:#2b2b2b; }
.lr-btn--light:hover{ background:#f1f1f1; }

/* Headings (retro tone) */
.retro h1,.retro h2,.retro h3{ font-family:"Paytone One", system-ui, sans-serif; letter-spacing:.2px; }
.retro .display-num{ font-family:"Bowlby One SC", system-ui, sans-serif; }

/* ================== HERO ================== */
/* Вариант 1: новый герой hero-80s с фоном */
.hero-80s{
  position:relative; color:#fff; text-align:center;
  padding:96px 20px; background-position:center; background-size:cover; background-repeat:no-repeat;
}
.hero-80s::before{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.35); }
.hero-80s .hero-inner{ position:relative; z-index:1; max-width:1000px; margin:0 auto; }
.retro-title{
  font-family:"Paytone One", system-ui, sans-serif;
  font-size:clamp(40px, 6vw, 86px); line-height:.95; letter-spacing:.3px; color:#fff7ec;
  text-shadow:0.06em 0.06em 0 rgba(0,0,0,.25), 0.12em 0.12em 0 rgba(0,0,0,.15);
}
.hero-80s p{ font-size:clamp(18px, 1.8vw, 24px); max-width:900px; margin:14px auto 24px; }

/* Вариант 2: старый герой lr-hero (градиент) */
.lr-hero{
  background: linear-gradient(135deg, #f9d976, #f39f86);
  color:#fff; text-align:center; padding:72px 20px;
}
.lr-hero h1{ font-size:clamp(28px, 4.8vw, 56px); margin:0 0 12px; }
.lr-hero p{ font-size:clamp(16px, 1.6vw, 20px); max-width:760px; margin:0 auto 18px; }

/* ================== PAPER / PANELS ================== */
.retro{ background:var(--retro-cream); color:var(--retro-ink); }
.retro-paper{
  position:relative; background:var(--retro-cream) url('{{ "paper.jpg" | asset_url }}') center/cover repeat;
  border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,.08);
}
.retro-paper::after{
  content:""; position:absolute; inset:0; background:url('{{ "grain.png" | asset_url }}') center/300px repeat;
  opacity:.18; pointer-events:none; border-radius:12px;
}
.torn-top{ position:relative; }
.torn-top::before{
  content:""; position:absolute; left:0; right:0; top:-16px; height:24px;
  background: radial-gradient(22px 8px at 12px 16px, var(--retro-cream) 60%, #0000 62%) repeat-x 0 0/32px 24px;
}

/* Red panel */
.panel-red{
  background:var(--retro-red); color:#fff7ec; padding:48px 20px; border-radius:12px;
}
.panel-red .display-num{ font-size:clamp(64px, 12vw, 128px); text-shadow:6px 6px 0 rgba(0,0,0,.1); }
.panel-red .sub{ text-transform:uppercase; font-weight:700; letter-spacing:.06em; }

/* Cards / quotes / two columns */
.card{
  background:#fff; border:1px solid #eee; border-radius:12px; padding:22px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.quote{ font-size:1.1rem; line-height:1.6; padding:16px 18px; border-left:4px solid #e8d8c3; background:#fffef9; border-radius:8px; }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; }

/* ================== GALLERY (3:4, 3 в ряд) ================== */
.landing-wrapper .lr-gallery{ padding:56px 20px; }
.landing-wrapper .lr-gallery h2{ text-align:center; margin-bottom:18px; }

.lr-gallery__grid{
  max-width:1240px; margin:0 auto;
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.lr-gallery__grid figure{ margin:0; }

/* Плитка: фиксируем соотношение и аккуратную обрезку */
.tile{
  border-radius:12px; overflow:hidden; background:#f3eee6;
  aspect-ratio:3/4; /* ← вертикальный 3:4 */
}
.tile img, .tile picture, .tile source{
  width:100%; height:100%; display:block;
}
.tile img{ object-fit:cover; }

/* Подписи */
.lr-gallery__grid figcaption{
  font-size:14px; color:#6b6b6b; padding:6px 2px 0; text-align:center;
}

/* ================== VIDEO ================== */
.lr-video{ padding:56px 20px; background:#fffaf3; text-align:center; }
.lr-video h2{ margin-bottom:18px; }
.lr-video__frame{ max-width:1000px; margin:0 auto; border-radius:12px; overflow:hidden; box-shadow:0 6px 20px rgba(0,0,0,.2); }
.lr-video__frame iframe{ width:100%; aspect-ratio:16/9; border:0; display:block; }

/* ================== STORY / TEXT ================== */
.lr-story{ padding:56px 20px; background:#fffaf3; }
.lr-story h2{ text-align:center; font-size:clamp(22px, 3.2vw, 32px); margin-bottom:20px; }
.lr-story p{ max-width:920px; margin:0 auto 12px; }
.lr-story ul{ max-width:920px; margin:12px auto; padding-left:20px; }

/* ================== PRODUCTS ================== */
.lr-products{ background:transparent; padding:56px 20px; }
.lr-products h2{
  text-align:center; margin-bottom:24px;
  font-family:"Paytone One", system-ui, sans-serif; letter-spacing:.3px;
}

.lr-products__grid{
  display:grid; gap:22px;
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  max-width:1240px; margin:0 auto;
}

/* Card */
.product-card{
  background:#fffaf4; border:1px solid #eadfce; border-radius:10px;
  padding:16px; display:flex; flex-direction:column; gap:10px;
  transition:transform .2s, box-shadow .2s;
  box-shadow:0 8px 20px rgba(0,0,0,.06);
}
.product-card:hover{ transform:translateY(-4px); box-shadow:0 12px 26px rgba(0,0,0,.1); }

/* Media (квадрат) */
.product-card__media{ display:block; width:100%; aspect-ratio:1/1; background:#f3eee6; border-radius:8px; overflow:hidden; }
.product-card__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.product-card__placeholder{
  width:100%; height:100%; display:grid; place-items:center; color:#a8a29e; font-size:14px;
}

/* Title & price */
.product-card__title{ margin:6px 0 0; font-size:16px; line-height:1.35; font-weight:700; color:#2b2b2b; }
.product-card__title a{ text-decoration:none; color:inherit; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.price{ margin:4px 0 8px; font-size:16px; font-weight:600; color:#2b2b2b; }

/* CTA button */
.product-card__btn{
  align-self:center; margin-top:auto;
  background:var(--retro-brown); color:#fff; padding:10px 18px; border-radius:6px;
  font-weight:600; text-decoration:none; transition: background .2s, transform .15s;
}
.product-card__btn:hover{ background:#523722; transform:translateY(-2px); }

/* ================== FINAL SECTION ================== */
.lr-final{
  background:linear-gradient(135deg, #f39f86, #f9d976);
  color:#fff; text-align:center; padding:72px 20px;
}
.lr-final h2{ font-size:clamp(24px, 3.6vw, 40px); margin-bottom:18px; }

/* ================== RESPONSIVE ================== */
@media (max-width: 1200px){
  .hero-80s{ padding:84px 16px; }
}
@media (max-width: 992px){
  .two-col{ grid-template-columns:1fr; }
  .lr-gallery__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 560px){
  .hero-80s{ padding:68px 14px; }
  .lr-gallery__grid{ grid-template-columns:1fr; }
}
/* --- Универсальные фиксы для контента из редактора --- */
.lr-container, .lr-container * { box-sizing: border-box; }

/* Картинки из редактора: всегда ужимаются по контейнеру и не плавают */
.lr-container img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* Сброс float из редактора на узких экранах */
@media (max-width: 768px){
  .lr-container [style*="float:left"],
  .lr-container [style*="float:right"]{
    float: none !important;
    margin: 0 0 16px 0 !important;
  }
}

/* Таблицы из редактора не вылазят за край */
.lr-container table { width: 100% !important; table-layout: fixed; }
.lr-container td, .lr-container th { word-wrap: break-word; }

/* Отступы между «голыми» картинками подряд */
.lr-container p > img:only-child,
.lr-container > img { margin: 0 0 16px 0; }

/* --- Утилиты для удобной сетки из редактора (без внешнего CSS) --- */
/* Flex-сетка: 3 в ряд на ПК → 1 в ряд на мобилке */
.lr-container .u-flex-3 { display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }
.lr-container .u-flex-3 > .u-item { flex:1 1 calc(33.333% - 16px); max-width:calc(33.333% - 16px); }
@media (max-width: 768px){
  .lr-container .u-flex-3 > .u-item { flex:1 1 100%; max-width:100%; }
}

/* Grid-сетка: 3 в ряд → 1 в ряд */
.lr-container .u-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:1240px; margin:0 auto; }
@media (max-width: 768px){
  .lr-container .u-grid-3 { grid-template-columns:1fr; }
}

/* Картинки внутри ячеек выглядят аккуратно */
.lr-container .u-item img { width:100%; height:auto; border-radius:8px; display:block; }
@import url('https://fonts.googleapis.com/css2?family=Oi&display=swap');

.lr-content h1,
.lr-content h2,
.lr-content h3 {
  font-family: "Oi", serif;
  font-weight: 400;
}
/* Все заголовки на лендинге — Rubik Dirt */
.lr-content h1,
.lr-content h2,
.lr-content h3,
.lr-products h2,
.lr-final h2,
.lr-hero h1,
.lr-story h2,
.lr-gallery h2,
.lr-video h2,
.lr-reviews h2,
.lr-about h2 {
  font-family: "Rubik Dirt", system-ui !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1.2;
}
/* ===== Didact Gothic только для карточек товара на лендинге ===== */
.lr-products .product-card,
.lr-products .product-card * {
  font-family: "Didact Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 400;
}

/* Можно чуть подтянуть размеры, если нужно */
.lr-products .product-card__title { font-size: 16px; line-height: 1.35; }
.lr-products .price { font-size: 16px; }
.lr-products .product-card__btn { font-size: 15px; }

/* ===== Фикс шрифта в карточках товара на лендинге (десктоп + мобайл) ===== */

/* 1) Единый шрифт и запрет псевдожирного */
.lr-products .product-card,
.lr-products .product-card * {
  font-family: "Didact Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 400 !important;               /* всегда normal */
  font-synthesis: none;                      /* запретить «фальшивый» bold/italic */
  -webkit-font-smoothing: antialiased;       /* сглаживание для macOS/WebKit */
  -moz-osx-font-smoothing: grayscale;
}

/* 2) На всякий случай отдельно заголовок/ссылка (тема часто ставит 700) */
.lr-products .product-card__title,
.lr-products .product-card__title a {
  font-weight: 400 !important;
}

/* 3) Если тема оборачивает часть названия в strong/b — убираем жирность */
.lr-products .product-card b,
.lr-products .product-card strong {
  font-weight: 400 !important;
}