/* im-home.css — Porsche-like Home — FINAL v3 — 2026-01-21
   Scope: Home page only (front-page.php structure: .lm-hero, .lm-wide-card, .lm-product-card, .lm-discover-card)
*/

/* =========================
   Design tokens (Admin-ready)
========================= */
:root{
  /* Page */
  --lm-page-bg:#ffffff;
  --lm-page-fg:#111111;
  --lm-muted:rgba(17,17,17,.70);

  /* Card look on white background (minimal Porsche-like) */
  --lm-card-radius:22px;
  --lm-btn-radius:14px;
  --lm-border:rgba(17,17,17,.10);
  --lm-border-hover:rgba(17,17,17,.18);
  --lm-shadow:0 10px 30px rgba(0,0,0,.08);

  /* Hero */
  --lm-hero-text:#ffffff;           /* future: editable from admin */
  --lm-hero-btn-text:#ffffff;       /* future: editable from admin */
  --lm-hero-btn-border:rgba(255,255,255,.55);
  --lm-hero-btn-bg:rgba(0,0,0,.08);
  --lm-header-h:82px;               /* set to your real header height if needed */

  /* Hero gradient sizing (limited to header + content area, NOT whole image) */
  --lm-hero-top-gradient-from:rgba(0,0,0,.80);
  --lm-hero-top-gradient-to:rgba(0,0,0,0);
  --lm-hero-bottom-gradient-from:rgba(0,0,0,0);
  --lm-hero-bottom-gradient-mid:rgba(0,0,0,.62);
  --lm-hero-bottom-gradient-to:rgba(0,0,0,.86);
  --lm-hero-bottom-height:46%;      /* size of bottom gradient zone */

  /* Image gradients behind text (Products / Discover) */
  --lm-info-gradient-a:rgba(0,0,0,0);
  --lm-info-gradient-b:rgba(0,0,0,.62);
  --lm-info-gradient-c:rgba(0,0,0,.86);

  /* Discover needs stronger readability (white text on potentially white images) */
  --lm-discover-gradient-b:rgba(0,0,0,.72);
  --lm-discover-gradient-c:rgba(0,0,0,.90);

  /* Layout */
  --lm-wrap:1200px;
  --lm-pad:24px;

  /* Heights */
  --lm-wide-h:520px;
  --lm-product-min:560px;
  --lm-discover-h:340px;

  /* Hover */
  --lm-img-hover:1.04;
}

/* =========================
   Base
========================= */
.lm-home{ background:var(--lm-page-bg); color:var(--lm-page-fg); }
body.home{ background:var(--lm-page-bg); }

.lm-wrap{ max-width:var(--lm-wrap); margin:0 auto; padding:0 var(--lm-pad); }
@media (max-width:900px){ .lm-wrap{ padding:0 16px; } }

/* Section spacing */
.lm-section{ padding:64px 0; }
@media (max-width:900px){ .lm-section{ padding:42px 0; } }
.lm-section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:22px; }
.lm-section-title{ font-size:40px; line-height:1.1; margin:0; font-weight:800; color:var(--lm-page-fg); }
@media (max-width:900px){ .lm-section-title{ font-size:30px; } }

/* Buttons (base) */
.lm-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px;
  border-radius:var(--lm-btn-radius);
  border:1px solid rgba(17,17,17,.28);
  background:transparent;
  color:var(--lm-page-fg);
  text-decoration:none;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.lm-btn:hover{ background:rgba(17,17,17,.04); border-color:rgba(17,17,17,.40); }
.lm-btn:active{ transform:translateY(1px); }
@media (max-width:900px){ .lm-btn{ width:100%; } }

/* =========================
   HERO (full viewport + LIMITED gradients)
========================= */
.lm-hero{
  position:relative;
  min-height:100vh;
  overflow:hidden;
}
@supports (height: 100svh){
  .lm-hero{ min-height:100svh; }
}
/* hero edge-to-edge */
.lm-hero .lm-wrap{ max-width:none; padding:0; }

.lm-hero-slider{ position:absolute; inset:0; width:100%; height:100%; }
.lm-hero-slide{ position:absolute; inset:0; opacity:0; transition:opacity .45s ease; }
.lm-hero-slide.is-active{ opacity:1; z-index:2; }

.lm-hero-img{
  position:absolute; inset:0;
  width:100% !important; height:100% !important;
  object-fit:cover;
  object-position:50% 50%;
  display:block;
  opacity:1 !important;
  transform:scale(1);
  transition:transform .6s cubic-bezier(0,0,.2,1);
}
@media (hover:hover){
  .lm-hero-slide:hover .lm-hero-img{ transform:scale(var(--lm-img-hover)); }
}

/* Overlay gradients: ONLY top header strip + bottom content zone */
.lm-hero-overlay{ position:absolute; inset:0; pointer-events:none; }
.lm-hero-overlay::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:var(--lm-header-h);
  background:linear-gradient(180deg, var(--lm-hero-top-gradient-from), var(--lm-hero-top-gradient-to));
}
.lm-hero-overlay::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:var(--lm-hero-bottom-height);
  background:linear-gradient(180deg, var(--lm-hero-bottom-gradient-from), var(--lm-hero-bottom-gradient-mid) 60%, var(--lm-hero-bottom-gradient-to));
}

/* Text area */
.lm-hero-content{
  position:absolute;
  left:24px; right:24px;
  bottom:64px;
  max-width:var(--lm-wrap);
  margin:0 auto;
  text-align:right;
  color:var(--lm-hero-text);
  display:flex;
  flex-direction:column;
  gap:14px; /* more space between title/sub/button */
}
@media (max-width:900px){
  /* Mobile: text centered vertically above button (Porsche-like) */
  .lm-hero-content{
    top:50%;
    bottom:auto;
    transform:translateY(-50%);
    text-align:center;
    gap:16px;
  }
}
.lm-hero-tag{ font-size:12px; letter-spacing:.10em; opacity:.92; margin:0; }
.lm-hero-title{ font-size:64px; line-height:1.02; margin:0; font-weight:800; color:var(--lm-hero-text); }
.lm-hero-sub{ margin:0; line-height:1.7; max-width:56ch; color:rgba(255,255,255,.88); }
@media (max-width:900px){ .lm-hero-title{ font-size:40px; } }

/* Hero button (white) */
.lm-hero .lm-btn{
  border-color:var(--lm-hero-btn-border);
  background:var(--lm-hero-btn-bg);
  color:var(--lm-hero-btn-text);
}
.lm-hero .lm-btn:hover{ background:rgba(0,0,0,.18); border-color:rgba(255,255,255,.75); }

/* Minimal arrows */
.lm-hero-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.40);
  background:rgba(0,0,0,.18);
  color:#fff;
  display:grid; place-items:center;
  cursor:pointer; z-index:5;
}
.lm-hero-arrow:hover{ background:rgba(0,0,0,.28); border-color:rgba(255,255,255,.70); }
.lm-hero-arrow--prev{ left:16px; }
.lm-hero-arrow--next{ right:16px; }

/* =========================
   CARD HOVER (all card-like blocks)
========================= */
.lm-wide-card,
.lm-product-card,
.lm-discover-card{
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
@media (hover:hover){
  .lm-wide-card:hover,
  .lm-product-card:hover,
  .lm-discover-card:hover{
    transform:translateY(-2px);
    box-shadow:var(--lm-shadow);
    border-color:var(--lm-border-hover);
  }
}

/* =========================
   WIDE CARDS (Announcement / Aftersales)
   - Always readable on white page background
========================= */
.lm-wide-card{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  border-radius:var(--lm-card-radius);
  overflow:hidden;
  background:#ffffff;
  border:1px solid var(--lm-border);
  min-height:var(--lm-wide-h);
}
.lm-wide-card--alt{ grid-template-columns: .95fr 1.05fr; }

/* IMPORTANT: After Sales must be like Announcement: image RIGHT, text LEFT.
   Your HTML already uses .lm-wide-card--aftersales, so we force the "alt" layout there. */
.lm-wide-card--aftersales{ grid-template-columns: .95fr 1.05fr; } /* text (left col) + media (right col) */

.lm-wide-media{
  position:relative;
  min-height:var(--lm-wide-h);
  background-size:cover !important;
  background-position:50% 50% !important;
  background-repeat:no-repeat !important;
  background-color:#111;
  transform:scale(1);
  transition:transform .6s cubic-bezier(0,0,.2,1);
}
@media (hover:hover){
  .lm-wide-card:hover .lm-wide-media{ transform:scale(var(--lm-img-hover)); }
}

/* Gradient only where text is (near the edge adjacent to content) */
.lm-wide-media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.00) 60%);
  pointer-events:none;
}
.lm-wide-card--alt .lm-wide-media::after,
.lm-wide-card--aftersales .lm-wide-media::after{
  background:linear-gradient(270deg, rgba(0,0,0,.72), rgba(0,0,0,.00) 60%);
}

.lm-wide-content{
  padding:44px 40px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:14px;
  color:#ffffff; /* on top of dark gradient edge */
}
.lm-wide-title{ font-size:36px; line-height:1.1; margin:0; font-weight:800; color:#fff; }
.lm-wide-text{
  margin:0;
  line-height:1.8;
  max-width:56ch;
  color:rgba(255,255,255,.90);
  overflow-wrap:anywhere; /* prevents text from spilling out */
}

/* Wide card button (white) */
.lm-wide-card .lm-btn{
  border-color:rgba(255,255,255,.55);
  background:rgba(0,0,0,.08);
  color:#fff;
}
.lm-wide-card .lm-btn:hover{ background:rgba(0,0,0,.18); border-color:rgba(255,255,255,.75); }

@media (max-width:900px){
  .lm-wide-card,
  .lm-wide-card--alt,
  .lm-wide-card--aftersales{ grid-template-columns:1fr; }
  .lm-wide-media{ min-height:340px; }  /* increased mobile media height */
  .lm-wide-content{ padding:26px 18px; gap:16px; }
  .lm-wide-title{ font-size:28px; }
}

/* =========================
   PRODUCTS (Porsche-like tiles)
========================= */
.lm-products-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:26px;
}

/* Mobile: horizontal swipe like Porsche */
@media (max-width:900px){
  .lm-products-grid{
    display:flex;
    gap:16px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding-bottom:8px;
  }
  .lm-products-grid::-webkit-scrollbar{ height:8px; }
  .lm-products-grid::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.12); border-radius:999px; }
}

.lm-product-card{
  position:relative;
  border-radius:var(--lm-card-radius);
  overflow:hidden;
  background:#111;
  border:1px solid var(--lm-border);
  min-height:var(--lm-product-min);
  text-decoration:none;
  color:inherit;
}
@media (max-width:900px){
  .lm-product-card{
    flex:0 0 86%;
    scroll-snap-align:start;
    min-height:520px;
  }
}

.lm-product-media{
  position:absolute; inset:0;
  background:#111;
  transform:scale(1);
  transition:transform .6s cubic-bezier(0,0,.2,1);
}
@media (hover:hover){
  .lm-product-card:hover .lm-product-media{ transform:scale(var(--lm-img-hover)); }
}

.lm-product-media img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 50%;
  display:block;
  opacity:1 !important;
}

/* Gradient ONLY at bottom where text sits (not across whole image) */
.lm-product-media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(
    180deg,
    var(--lm-info-gradient-a) 0%,
    var(--lm-info-gradient-a) 55%,
    var(--lm-info-gradient-b) 78%,
    var(--lm-info-gradient-c) 100%
  );
  pointer-events:none;
}

/* Content: LEFT side, Arrow: RIGHT side (Porsche-like) */
.lm-product-body{
  position:absolute; left:18px; right:18px; bottom:18px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  z-index:2;
}
.lm-product-meta{
  display:flex;
  flex-direction:column;
  gap:6px;
  text-align:left;
  max-width:70%;
  color:#fff;
}
.lm-chip{
  display:inline-flex;
  align-items:center;
  height:26px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.20);
  background:rgba(255,255,255,.10);
  font-size:12px;
  color:#fff;
  max-width:fit-content;
}
.lm-product-title{ font-size:22px; line-height:1.1; font-weight:800; margin:0; color:#fff; }
.lm-product-sub{ font-size:13px; opacity:.88; margin:0; color:rgba(255,255,255,.88); }

.lm-product-cta{
  width:44px; height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.40);
  background:rgba(0,0,0,.18);
  display:grid; place-items:center;
  color:#fff;
  flex:0 0 auto;
}
.lm-product-cta:hover{ background:rgba(0,0,0,.30); }

/* If CTA arrow element isn't present in HTML, we still show an arrow using CSS (safe) */
.lm-product-card .lm-product-cta::before{
  content:"→";
  font-size:20px;
  line-height:1;
}

/* =========================
   DISCOVER (More about Liana)
========================= */
.lm-discover-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:22px;
}
@media (max-width:900px){
  .lm-discover-grid{ grid-template-columns:1fr; gap:16px; }
}

.lm-discover-card{
  position:relative;
  border-radius:var(--lm-card-radius);
  overflow:hidden;
  border:1px solid var(--lm-border);
  background:#111;
  min-height:var(--lm-discover-h);
  text-decoration:none;
  color:inherit;
  display:block;
}
.lm-discover-media{
  position:absolute; inset:0;
  background:#111;
  transform:scale(1);
  transition:transform .6s cubic-bezier(0,0,.2,1);
}
@media (hover:hover){
  .lm-discover-card:hover .lm-discover-media{ transform:scale(var(--lm-img-hover)); }
}

.lm-discover-media img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 50%;
  display:block;
  opacity:1 !important;
}

/* Stronger gradient ONLY at bottom for readability */
.lm-discover-media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(
    180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 50%,
    var(--lm-discover-gradient-b) 78%,
    var(--lm-discover-gradient-c) 100%
  );
  pointer-events:none;
}

/* Text RIGHT, Arrow LEFT (as requested) */
.lm-discover-body{
  position:absolute; left:18px; right:18px; bottom:16px;
  z-index:2;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  flex-direction:row-reverse; /* places text on right, arrow on left */
  color:#fff;
  text-align:right;
}
.lm-discover-title{ font-weight:800; font-size:18px; margin:0; color:#fff; }
.lm-discover-text{ font-size:13px; opacity:.90; margin:6px 0 0 0; line-height:1.6; color:rgba(255,255,255,.90); }
.lm-arrow{ font-size:22px; line-height:1; opacity:.92; background:transparent !important; border:0 !important; border-radius:0 !important; width:auto !important; height:auto !important; padding:0 !important; box-shadow:none !important; }
.lm-arrow::before{ content:"←"; } /* Porsche-like left arrow in this section */

/* =========================
   HEADER (white background site)
   We add robust selectors to cover your existing header implementation.
   Goal:
   - On top of HERO: white text/icons (overlay)
   - After scroll: dark text/icons on white
========================= */

/* Default (site on white) */
header, .site-header, .lm-header{
  background:transparent;
  color:var(--lm-page-fg);
}
header a, .site-header a, .lm-header a{
  color:inherit;
}

/* Top of Home over Hero: force white */
body.home header,
body.home .site-header,
body.home .lm-header{
  position:absolute;
  top:0; left:0; right:0;
  z-index:999;
  color:#fff;
}
body.home header a,
body.home .site-header a,
body.home .lm-header a{
  color:#fff;
}

/* Scrolled / sticky state (try common class names from menu patches) */
body.home.scrolled header,
body.home.scrolled .site-header,
body.home.scrolled .lm-header,
body.home .is-scrolled,
body.home .scrolled,
body.home .is-sticky,
body.home .sticky,
body.home header.is-scrolled,
body.home header.is-sticky,
body.home .site-header.is-scrolled,
body.home .site-header.is-sticky,
body.home .lm-header.is-scrolled,
body.home .lm-header.is-sticky{
  position:fixed;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  color:#111;
  box-shadow:0 8px 22px rgba(0,0,0,.08);
}
body.home.scrolled header a,
body.home.scrolled .site-header a,
body.home.scrolled .lm-header a,
body.home header.is-scrolled a,
body.home header.is-sticky a,
body.home .site-header.is-scrolled a,
body.home .site-header.is-sticky a,
body.home .lm-header.is-scrolled a,
body.home .lm-header.is-sticky a{
  color:#111;
}

/* Icons (if SVG uses currentColor) */
body.home .site-header svg,
body.home .lm-header svg,
body.home header svg{
  fill:currentColor;
  stroke:currentColor;
}

/* =========================
   Safety overrides (prevent old dark theme rules)
========================= */
.lm-home *{ box-sizing:border-box; }

/* ===== Porsche-like overrides v4 (2026-01-22) ===== */

/* Global background: switch to white theme */
body.home .lm-home,
body.home .lm-home main,
body.home .lm-home .lm-wrap {
  background: #fff !important;
  color: #111;
}

/* ---------- Header visibility on white sections ---------- */
/* Keep header readable everywhere: add subtle dark glass strip behind it */
body.home .lm-site-header{
  background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,0));
  backdrop-filter: blur(8px);
}
body.home .lm-site-header .lm-header-inner,
body.home .lm-site-header a,
body.home .lm-site-header button{
  color: #fff;
  text-shadow: 0 1px 10px rgba(0,0,0,.45);
}

/* ---------- HERO: gradient only where needed ---------- */
:root{
  --lm-hero-top-grad-h: clamp(64px, 8vh, 120px);      /* behind header */
  --lm-hero-bottom-grad-h: clamp(220px, 34vh, 420px); /* behind hero text/button */
  --lm-hero-bottom-grad-opacity: .78;
  --lm-hero-top-grad-opacity: .55;
  --lm-hero-gap: 14px;
}

body.home .lm-hero{
  position: relative;
  min-height: 100vh;
  background: #000;
}
body.home .lm-hero::before{
  content:"";
  position:absolute; inset:0 0 auto 0;
  height: var(--lm-hero-top-grad-h);
  background: linear-gradient(to bottom, rgba(0,0,0,var(--lm-hero-top-grad-opacity)), rgba(0,0,0,0));
  pointer-events:none;
  z-index: 3;
}
body.home .lm-hero::after{
  content:"";
  position:absolute; inset:auto 0 0 0;
  height: var(--lm-hero-bottom-grad-h);
  background: linear-gradient(to top, rgba(0,0,0,var(--lm-hero-bottom-grad-opacity)), rgba(0,0,0,0));
  pointer-events:none;
  z-index: 3;
}

body.home .lm-hero-overlay{ /* keep if exists but prevent full-cover wash */
  background: transparent !important;
}
body.home .lm-hero-content{
  position:absolute;
  inset:auto clamp(16px, 4vw, 56px) clamp(22px, 5vh, 56px) clamp(16px, 4vw, 56px);
  z-index: 4;
  color:#fff;
  display:flex;
  flex-direction: column;
  gap: var(--lm-hero-gap);
}
body.home .lm-hero-title,
body.home .lm-hero-subtitle{ color:#fff; }
body.home .lm-hero-actions{ display:flex; gap: 10px; flex-wrap: wrap; }
body.home .lm-hero .lm-btn,
body.home .lm-hero a.lm-btn,
body.home .lm-hero button.lm-btn{
  color:#fff;
  border-color: rgba(255,255,255,.45);
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(6px);
}
body.home .lm-hero .lm-btn:hover,
body.home .lm-hero a.lm-btn:hover{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.65);
}

@media (max-width: 640px){
  body.home .lm-hero-content{
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(520px, calc(100% - 32px));
    text-align: center;
    align-items: center;
  }
  body.home .lm-hero-actions{
    width: 100%;
    flex-direction: column;
  }
  body.home .lm-hero-actions .lm-btn{
    width: 100%;
  }
}

/* ---------- Wide cards (Announcement / After-sales) ---------- */
:root{
  --lm-card-bg: #fff;
  --lm-card-border: rgba(0,0,0,.10);
  --lm-card-border-hover: rgba(0,0,0,.18);
  --lm-card-shadow: 0 14px 40px rgba(0,0,0,.08);
  --lm-card-radius: 22px;
}

body.home .lm-wide-card{
  background: var(--lm-card-bg) !important;
  border: 1px solid var(--lm-card-border) !important;
  box-shadow: var(--lm-card-shadow);
}

/* After Sales: force image on right, text on left (stable in RTL) */
body.home .lm-wide-card.lm-wide-card--aftersales{
  direction: ltr;
}
body.home .lm-wide-card.lm-wide-card--aftersales .lm-wide-content{
  direction: rtl;
}
body.home .lm-wide-card:hover{
  border-color: var(--lm-card-border-hover) !important;
  transform: translateY(-2px);
}
body.home .lm-wide-card .lm-wide-card-content,
body.home .lm-wide-card .lm-wide-card-title,
body.home .lm-wide-card .lm-wide-card-subtitle{
  color:#111 !important;
}
body.home .lm-wide-card .lm-btn{
  color:#111;
  border-color: rgba(0,0,0,.18);
  background: transparent;
}
body.home .lm-wide-card .lm-btn:hover{
  background: rgba(0,0,0,.05);
  border-color: rgba(0,0,0,.28);
}

/* Make text stay inside card */
body.home .lm-wide-card *{
  max-width: 100%;
}
body.home .lm-wide-card .lm-wide-card-text{
  overflow: hidden;
  text-overflow: ellipsis;
}

/* After-sales: image right, text left (desktop) */
body.home .lm-wide-card--aftersales .lm-wide-card-inner{
  flex-direction: row-reverse;
}
@media (max-width: 640px){
  body.home .lm-wide-card--announcement,
  body.home .lm-wide-card--aftersales{
    min-height: clamp(380px, 58vh, 520px);
  }
}

/* ---------- Product tiles (Porsche-like overlay text + arrow) ---------- */
:root{
  --lm-prod-min-h: clamp(340px, 48vh, 560px);
  --lm-prod-grad-h: clamp(170px, 26vh, 260px);
}

body.home .lm-products{
  background:#fff;
}
body.home .lm-products h2,
body.home .lm-products .lm-section-title{
  color:#111;
}

/* Ensure 2 cards side by side on desktop */
body.home .lm-products-grid{
  gap: clamp(14px, 2vw, 22px);
}
@media (min-width: 900px){
  body.home .lm-products-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 899px){
  /* mobile: horizontal swipe */
  body.home .lm-products-grid{
    display:flex !important;
    overflow-x:auto;
    gap: 14px;
    padding-inline: 16px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  body.home .lm-products-grid::-webkit-scrollbar{ height: 10px; }
  body.home .lm-products-grid > *{ scroll-snap-align: start; flex: 0 0 86%; }
}

/* Tile base */
body.home a.lm-product-tile{
  position: relative;
  display:block;
  min-height: var(--lm-prod-min-h);
  border-radius: var(--lm-card-radius);
  overflow:hidden;
  background:#000;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: var(--lm-card-shadow);
  transition: transform .25s ease, border-color .25s ease;
}
body.home a.lm-product-tile:hover{
  transform: translateY(-2px);
  border-color: rgba(0,0,0,.18);
}
body.home .lm-product-media,
body.home .lm-product-media img{
  height: 100%;
}
body.home .lm-product-media{
  position:absolute; inset:0;
}
body.home .lm-product-media img{
  width:100%;
  height:100%;
  object-fit: cover;
  transform: scale(1.001);
}

/* Bottom gradient only under text */
body.home a.lm-product-tile::after{
  content:"";
  position:absolute; inset:auto 0 0 0;
  height: var(--lm-prod-grad-h);
  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));
  pointer-events:none;
  z-index: 2;
}

/* Text overlay */
body.home .lm-product-body{ position:absolute; right:22px; left:auto; bottom:20px; z-index:3; display:flex; flex-direction:column; align-items:flex-end; gap:6px; padding-right:0; padding-left:0; }

/* Product card: arrow (no circle) + text block on right, arrow on left */
body.home .lm-product-card{
  padding-left: 56px; /* space for left arrow */
}
body.home .lm-product-card::after{
  content: "→";
  position:absolute;
  left: 18px;
  bottom: 22px;
  z-index: 4;
  font-size: 18px;
  line-height: 1;
  color: rgba(255,255,255,.95);
  opacity: .95;
  transition: transform .25s ease, opacity .25s ease;
  pointer-events: none;
}
body.home .lm-product-card:hover::after{
  transform: translateX(4px);
  opacity: 1;
}
/* Ensure texts align to right (RTL) */
body.home .lm-product-title,
body.home .lm-product-subtitle{
  text-align: right;
}
body.home .lm-chip{
  position:absolute;
  right: 22px;
  bottom: 86px;
  z-index: 4;
}
body.home .lm-product-body .lm-product-left{
  display:flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
body.home .lm-product-tag{
  align-self:flex-start;
  display:inline-flex;
  font-size: 12px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.25);
  color:#fff;
  backdrop-filter: blur(6px);
}
body.home .lm-product-name{
  font-size: clamp(18px, 2.2vw, 28px);
  font-weight: 650;
  letter-spacing: -.01em;
  color:#fff;
  margin:0;
}
body.home .lm-product-sub{
  font-size: 14px;
  opacity: .92;
  margin:0;
}

/* Arrow on right like Porsche */
body.home .lm-product-body::after{
  content:"\2192";
  flex: 0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.20);
  backdrop-filter: blur(6px);
  color:#fff;
  transform: translateY(-4px);
}

/* In case markup doesn't have left wrapper, normalize */
body.home .lm-product-body > :not(script):not(style){
  max-width: 100%;
}

/* ---------- Discover cards (3 tiles) ---------- */
:root{
  --lm-discover-grad-h: clamp(140px, 22vh, 220px);
  --lm-discover-grad-opacity: .82;
}

body.home .lm-discover{
  background:#fff;
}
body.home .lm-discover h2{ color:#111; }

body.home a.lm-discover-tile{
  position:relative;
  border-radius: var(--lm-card-radius);
  overflow:hidden;
  background:#000;
  border: 1px solid var(--lm-card-border);
  box-shadow: var(--lm-card-shadow);
  transition: transform .25s ease, border-color .25s ease;
}
body.home a.lm-discover-tile:hover{
  transform: translateY(-2px);
  border-color: var(--lm-card-border-hover);
}
body.home a.lm-discover-tile::after{
  content:"";
  position:absolute; inset:auto 0 0 0;
  height: var(--lm-discover-grad-h);
  background: linear-gradient(to top, rgba(0,0,0,var(--lm-discover-grad-opacity)), rgba(0,0,0,0));
  z-index: 2;
  pointer-events:none;
}
body.home .lm-discover-body{ position:absolute; left:22px; right:22px; bottom:18px; z-index:3; display:flex; direction:ltr; align-items:flex-end; justify-content:space-between; gap:18px; }

body.home .lm-discover-title{ direction: rtl; text-align: right; }
body.home .lm-discover-text{ direction: rtl; text-align: right; opacity:.88; max-width: 60%; }
body.home .lm-discover-title{
  margin:0;
  color:#fff;
}
body.home .lm-discover-body::after{
  content:"\2192";
  width: 38px; height: 38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.20);
  backdrop-filter: blur(6px);
  color:#fff;
}

/* RTL alignment: text right, arrow left (Discover) */
html[dir="rtl"] body.home .lm-discover-body{
  flex-direction: row-reverse;
}

/* ---------- Fix section spacing on white theme ---------- */
body.home .lm-section{
  padding-block: clamp(28px, 5vw, 56px);
}


/* ============================================================
   LM HOME — Porsche-like overrides (v5)
   هدف: اصلاح دقیق موارد گزارش‌شده (پس‌زمینه سفید + چیدمان پورشه‌ای)
   ============================================================ */

/* 0) ایمن‌سازی: فقط روی Home */
body.home{
  background:#fff;
  color:#111;
}

/* 1) Header/Menu: ثابت نباشد (با اسکرول پایین نچسبد) */
body.home .lm-site-header,
body.home .lm-site-header.is-sticky,
body.home .lm-site-header.is-fixed,
body.home .lm-site-header[data-sticky="1"]{
  position:absolute !important;
  top:0; left:0; right:0;
}

/* ارتفاع هدر برای گرادینت بالای Hero */
:root{
  --lm-header-h: 84px;         /* در صورت نیاز از پنل قابل تغییر */
  --lm-hero-top-grad-h: var(--lm-header-h);
}

/* 2) Hero: گرادینت فقط به اندازه هدر (نه روی کل اسلایدر) */
body.home .lm-hero::before{
  height: var(--lm-hero-top-grad-h) !important;
  background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,0)) !important;
}
body.home .lm-hero::after{
  /* گرادینت پایین برای خوانایی متن/دکمه */
  background: linear-gradient(to top, rgba(0,0,0,.70), rgba(0,0,0,0) 60%) !important;
}

/* 2.1) فاصله متن/دکمه در Hero */
body.home .lm-hero-content{
  gap: 14px !important;
}
body.home .lm-hero-actions{
  gap: 12px !important;
}

/* 2.2) دکمه Hero: فقط موبایل عریض باشد */
body.home .lm-hero-actions .lm-btn{
  width:auto;
  max-width:none;
}
@media (max-width: 640px){
  body.home .lm-hero-actions .lm-btn{
    width: 100% !important;
  }
}

/* 3) کارت‌های Wide (Announcement / AfterSales): متن مشکی روی زمینه سفید */
body.home .lm-wide-card,
body.home .lm-wide-card *{
  color:#111;
}
body.home .lm-wide-card{
  background:#fff !important;
  border:1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.06) !important;
}
body.home .lm-wide-card .lm-wide-card-kicker{
  color:#222 !important;
  opacity:.75;
}
body.home .lm-wide-card .lm-wide-card-subtitle,
body.home .lm-wide-card .lm-wide-card-desc{
  color:#333 !important;
  opacity:.85;
}
body.home .lm-wide-card .lm-btn{
  color:#111 !important;
  border-color: rgba(0,0,0,.22) !important;
  background: transparent !important;
}
body.home .lm-wide-card:hover{
  box-shadow: 0 14px 36px rgba(0,0,0,.10) !important;
  transform: translateY(-2px);
}

/* 3.1) Announcement: موبایل کمی بلندتر */
@media (max-width: 900px){
  body.home .lm-wide-card--announcement{
    min-height: 340px !important;
  }
}

/* 4) AfterSales: تصویر راست، متن/دکمه چپ (همانند Announcement) */
body.home .lm-wide-card--aftersales .lm-wide-card-inner{
  direction: rtl; /* سایت RTL */
}
body.home .lm-wide-card--aftersales .lm-wide-card-media{
  order: 2 !important; /* سمت راست */
}
body.home .lm-wide-card--aftersales .lm-wide-card-content{
  order: 1 !important; /* سمت چپ */
}
@media (max-width: 900px){
  body.home .lm-wide-card--aftersales{
    min-height: 340px !important; /* هم‌قد با Announcement موبایل */
  }
}

/* 5) Product cards: بردر مینیمال مثل Announcement + ارتفاع (کم نشود) */
body.home .lm-product-card{
  border:1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.06) !important;
}
body.home .lm-product-card:hover{
  box-shadow: 0 14px 36px rgba(0,0,0,.10) !important;
  transform: translateY(-2px);
}
@media (min-width: 901px){
  body.home .lm-products-grid .lm-product-card{
    min-height: 520px !important; /* نزدیک به حالت قبلی */
  }
}

/* 5.1) گرادینت فقط زیر بخش نوشته‌ها (نه روی کل تصویر) */
body.home .lm-product-card::after{
  content:"" !important;
  position:absolute !important;
  left:0; right:0; bottom:0;
  top:auto !important;
  height: 42% !important;
  background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,0) 100%) !important;
  pointer-events:none;
}

/* 5.2) چیدمان متن/تگ/فلش: متن سمت راست، فلش سمت چپ + بدون دایره */
body.home .lm-product-card .lm-card-info{
  position:absolute !important;
  left:0; right:0; bottom:0;
  padding: 22px 22px 18px !important;
  display:flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  gap: 18px !important;
  z-index: 5;
}
body.home .lm-product-card .lm-card-text{
  text-align: right !important;
}
body.home .lm-product-card .lm-card-tag{
  display:inline-flex;
  margin-bottom: 10px;
}
body.home .lm-product-card .lm-card-title{
  margin:0 0 6px 0 !important;
}
body.home .lm-product-card .lm-card-subtitle{
  margin:0 !important;
  opacity:.85;
}

/* فلش ساده (بدون دایره) */
body.home .lm-product-card .lm-card-arrow{
  width: 28px !important;
  height: 28px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  box-shadow:none !important;
  color:#fff !important;
  opacity:.9;
}
body.home .lm-product-card .lm-card-arrow:hover{
  opacity: 1;
  transform: translateX(-4px); /* RTL: حرکت به چپ */
}
body.home .lm-product-card .lm-card-arrow svg{
  width: 22px;
  height: 22px;
}

/* 5.3) موبایل: اسکرول افقی کارت‌های محصول */
@media (max-width: 900px){
  body.home .lm-products-grid{
    display:flex !important;
    overflow-x:auto !important;
    gap: 14px !important;
    padding-bottom: 8px !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  body.home .lm-products-grid::-webkit-scrollbar{ height: 8px; }
  body.home .lm-products-grid > *{
    flex: 0 0 82% !important;
    scroll-snap-align: start;
  }
}

/* 6) Discover (بیشتر درباره لیانا): بردر مینیمال + جای متن/فلش + گرادینت فقط زیر متن */
body.home .lm-discover-card{
  background:#fff !important;
  border:1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.06) !important;
}

/* Discover cards: arrow on left (no circle) */
body.home .lm-discover-card::before{
  content:"→";
  position:absolute;
  left:18px;
  bottom:22px;
  z-index:4;
  font-size:18px;
  line-height:1;
  color: rgba(255,255,255,.95);
  opacity:.95;
  transition: transform .25s ease, opacity .25s ease;
  pointer-events:none;
}
body.home .lm-discover-card:hover::before{
  transform: translateX(4px);
  opacity:1;
}
body.home .lm-discover-card:hover{
  box-shadow: 0 14px 36px rgba(0,0,0,.10) !important;
  transform: translateY(-2px);
}

/* گرادینت فقط پایین کارت برای خوانایی متن (قوی‌تر) */
body.home .lm-discover-card::after{
  content:"" !important;
  position:absolute !important;
  left:0; right:0; bottom:0;
  height: 38% !important;
  background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.45) 60%, rgba(0,0,0,0) 100%) !important;
  pointer-events:none;
}

/* متن سمت راست + فلش سمت چپ (بدون دایره) */
body.home .lm-discover-card .lm-card-info{
  display:flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  gap: 14px !important;
  padding: 18px 18px 16px !important;
  position:absolute !important;
  left:0; right:0; bottom:0;
  z-index:5;
}
body.home .lm-discover-card .lm-card-text{
  text-align: right !important;
}
body.home .lm-discover-card .lm-card-arrow{
  width: 26px !important;
  height: 26px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow:none !important;
  color:#fff !important;
  opacity:.9;
}
body.home .lm-discover-card .lm-card-arrow:hover{
  opacity:1;
  transform: translateX(-4px);
}

/* 6.1) 3 کارت پایین: عنوان (اخبار/اطلاعیه‌ها/درباره‌ما) سمت راست، توضیح سمت چپ */
body.home .lm-mini-cards .lm-mini-card .lm-mini-title{
  text-align:right !important;
}
body.home .lm-mini-cards .lm-mini-card .lm-mini-desc{
  text-align:left !important;
}

/* فلش مینی‌کارت‌ها: بدون دایره + هاور */
body.home .lm-mini-cards .lm-mini-card .lm-mini-arrow{
  border:0 !important;
  background:transparent !important;
  border-radius:0 !important;
  box-shadow:none !important;
  opacity:.9;
}
body.home .lm-mini-cards .lm-mini-card .lm-mini-arrow:hover{
  opacity:1;
  transform: translateX(-4px);
}

/* 7) اصلاح رنگ متن در Announcement/AfterSales برای حالت‌هایی که سفید مانده */
body.home .lm-wide-card .lm-wide-card-title,
body.home .lm-wide-card .lm-wide-card-title *,
body.home .lm-wide-card .lm-wide-card-desc,
body.home .lm-wide-card .lm-wide-card-desc *{
  color:#111 !important;
}

/* 8) اطمینان از خوانایی متن روی Hero (سفید) */
body.home .lm-hero,
body.home .lm-hero *{
  color:#fff;
}



@media (min-width: 641px){
  body.home .lm-hero-actions .lm-btn{ width: auto; }
}

/* =========================
   PATCH v7 (2026-01-22)
   Only fixes requested by Ali:
   1) Hero desktop CTA not full-width (mobile stays full)
   2) Products: taller cards + right-aligned text/tag + left arrow (no circle) + border like Announcement
   3) Discover: remove duplicate arrow (keep single arrow, no circle)
   ========================= */

/* 1) HERO — keep CTA normal on desktop, full-width only on mobile */
body.home a.lm-hero-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;              /* desktop: not wide */
  max-width:fit-content;
  padding:14px 24px;
  border-radius:12px;
  text-decoration:none;
}
@media (max-width:900px){
  body.home a.lm-hero-cta{
    display:flex;
    width:100%;
    max-width:none;
    padding:16px 18px;
    border-radius:14px;
  }
}

/* 2) PRODUCTS — adapt to actual front-page markup:
   .lm-product-card > .lm-product-media(img + optional .lm-chip) + .lm-product-body(title/subtitle)
   Make body overlay on image with gradient only at bottom, align text/tag to right, arrow on left (no circle). */
body.home .lm-products-grid{
  gap:22px;
}

/* Card shell: border like Announcement (subtle), not harsh black */
body.home .lm-product-card{
  border:1px solid rgba(0,0,0,.08) !important;
  box-shadow:0 10px 26px rgba(0,0,0,.06) !important;
  overflow:hidden;
  position:relative;
  background:#fff;
}

/* Height (desktop) — match previous larger look */
@media (min-width:901px){
  body.home .lm-product-card{
    min-height:520px; /* taller like before */
  }
}
/* Height (mobile) */
@media (max-width:900px){
  body.home .lm-product-card{
    min-height:420px;
  }
}

/* Media area fills the card */
body.home .lm-product-media{
  position:absolute;
  inset:0;
}
body.home .lm-product-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Bottom gradient ONLY where texts are (not whole image) */
body.home .lm-product-media::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:42%;
  pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.74) 0%, rgba(0,0,0,.46) 36%, rgba(0,0,0,.0) 100%);
}

/* Overlay body at bottom */
body.home .lm-product-body{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:18px 18px 18px 18px;
  display:grid;
  grid-template-columns: 1fr auto; /* text right, arrow left (RTL-friendly with text-align) */
  align-items:end;
  gap:14px;
  z-index:2;
}

/* Text stack on the RIGHT */
body.home .lm-product-title,
body.home .lm-product-subtitle{
  color:#fff !important;
  text-align:right !important;
  margin:0;
  text-shadow:0 2px 16px rgba(0,0,0,.35);
}
body.home .lm-product-title{
  font-weight:800;
  font-size:clamp(18px, 1.55vw, 28px);
  line-height:1.15;
}
body.home .lm-product-subtitle{
  opacity:.92;
  font-size:clamp(12px, 1.05vw, 15px);
  line-height:1.35;
  margin-top:6px;
}

/* Tag (chip) on the RIGHT, above title (Porsche-like) */
body.home .lm-product-media .lm-chip{
  position:absolute;
  right:18px;
  bottom:calc(18px + 54px); /* above title block */
  z-index:3;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

/* Arrow on the LEFT (no circle) */
body.home .lm-product-card::after{
  content:"→";
  position:absolute;
  left:18px;
  bottom:20px;
  z-index:3;
  color:#fff;
  font-size:20px;
  line-height:1;
  opacity:.9;
  transform:translateX(0);
  transition:transform .18s ease, opacity .18s ease;
  text-shadow:0 2px 16px rgba(0,0,0,.35);
}
body.home .lm-product-card:hover::after{
  transform:translateX(-4px);
  opacity:1;
}

/* Make whole card feel clickable like Porsche */
body.home a.lm-product-card{
  display:block;
  text-decoration:none;
}
body.home a.lm-product-card:hover{
  transform:translateY(-2px);
}

/* 3) DISCOVER — remove duplicate arrow sources, keep single arrow (no circle) */
body.home .lm-discover-card::before,
body.home .lm-discover-body::before,
body.home .lm-discover-body::after{
  content:none !important;
}

/* Keep one arrow on the LEFT (no circle), RTL-friendly */
body.home .lm-discover-card{
  position:relative;
  overflow:hidden;
}
body.home .lm-discover-card::after{
  content:"→";
  position:absolute;
  left:18px;
  bottom:18px;
  color:#fff;
  font-size:20px;
  line-height:1;
  opacity:.9;
  transform:translateX(0);
  transition:transform .18s ease, opacity .18s ease;
  z-index:4;
  text-shadow:0 2px 16px rgba(0,0,0,.35);
}
body.home .lm-discover-card:hover::after{
  transform:translateX(-4px);
  opacity:1;
}


/* =========================================================
   LM HOTFIX v9 (2026-01-22)
   هدف: رفع 3 مشکل بدون دست زدن به سایر بخش‌ها
   1) دکمه Hero در دسکتاپ عریض نباشد (فقط موبایل عریض)
   2) Product cards: ارتفاع بیشتر + چیدمان متن/تگ سمت راست + Arrow سمت چپ بدون دایره + Border مثل Announcement
   3) Discover cards: حذف Arrow اضافی و یک Arrow بدون دایره + hover
   ========================================================= */

/* Global: مطمئن شو بک‌گراند سفید است (اگر استایل قدیمی مشکی override می‌کرد) */
body.home{
  background:#fff !important;
}

/* -------------------------
   1) HERO CTA button widths
   ------------------------- */
body.home .lm-hero .lm-hero-cta,
body.home .lm-hero .lm-hero-cta a,
body.home .lm-hero .lm-hero-cta .lm-btn{
  width:auto;
  max-width:none;
}
@media (max-width: 768px){
  body.home .lm-hero .lm-hero-cta,
  body.home .lm-hero .lm-hero-cta a,
  body.home .lm-hero .lm-hero-cta .lm-btn{
    width:100%;
  }
}

/* -------------------------
   2) PRODUCTS — layout & arrow
   ------------------------- */
body.home .lm-products .lm-product-card{
  position:relative;
  overflow:hidden;
  border-radius: 24px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);          /* مثل کارت اطلاعیه */
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
body.home .lm-products .lm-product-card:hover{
  box-shadow: 0 16px 40px rgba(0,0,0,.10);
  transform: translateY(-2px);
}

/* ارتفاع کارت‌ها (برگرده به حالت قبلی/بیشتر) */
body.home .lm-products .lm-product-card{
  min-height: 420px;
}
@media (max-width: 1024px){
  body.home .lm-products .lm-product-card{ min-height: 380px; }
}
@media (max-width: 768px){
  body.home .lm-products .lm-product-card{ min-height: 340px; }
}

/* محتوا پایین کارت: راست‌چین + فاصله مناسب */
body.home .lm-products .lm-product-content{
  position:absolute;
  inset:auto 0 0 0;
  padding: 22px 26px 22px 26px;
  color:#fff;
  display:grid;
  grid-template-columns: 1fr auto; /* متن (راست) + فلش (چپ) در RTL با order پایین تنظیم می‌کنیم */
  column-gap: 16px;
  align-items:end;
  z-index:3;
  direction: rtl;
}

/* گرادینت فقط پایین (روی متن/دکمه) */
body.home .lm-products .lm-product-card::before{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 42%;
  background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,0) 100%);
  z-index:2;
  pointer-events:none;
}

/* متن‌ها سمت راست */
body.home .lm-products .lm-product-text{
  grid-column:1;
  text-align:right;
}
body.home .lm-products .lm-product-title{
  font-weight:800;
  font-size: 28px;
  line-height:1.15;
  margin: 6px 0 0 0;
}
body.home .lm-products .lm-product-subtitle{
  font-size: 14px;
  opacity:.9;
  margin-top: 6px;
}

/* تگ (chip) سمت راست پایین/بالا */
body.home .lm-products .lm-product-chip{
  position:absolute;
  right: 22px;
  bottom: 20px;
  z-index:4;
  background: rgba(255,255,255,.14);
  color:#fff;
  border:1px solid rgba(255,255,255,.20);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  backdrop-filter: blur(8px);
}

/* Arrow بدون دایره — سمت چپ */
body.home .lm-products .lm-product-card::after{
  content:"→";
  position:absolute;
  left: 22px;
  bottom: 22px;
  z-index:4;
  font-size: 22px;
  line-height:1;
  color: rgba(255,255,255,.90);
  opacity:.85;
  transition: transform .2s ease, opacity .2s ease;
}
body.home .lm-products .lm-product-card:hover::after{
  opacity:1;
  transform: translateX(-4px); /* در RTL حس حرکت به چپ */
}

/* موبایل: اسکرول افقی محصولات */
@media (max-width: 768px){
  body.home .lm-products .lm-products-grid{
    display:flex;
    gap: 16px;
    overflow-x:auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
  }
  body.home .lm-products .lm-product-card{
    flex: 0 0 86%;
    scroll-snap-align: start;
  }
}

/* -------------------------
   3) DISCOVER — single arrow, no circle
   ------------------------- */
/* حذف هر Arrow قدیمی که با pseudo-element ساخته شده */
body.home .lm-discover .lm-discover-card::before,
body.home .lm-discover .lm-discover-card::after{
  content:none !important;
}

body.home .lm-discover .lm-discover-card{
  position:relative;
  border:1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
body.home .lm-discover .lm-discover-card:hover{
  box-shadow: 0 16px 40px rgba(0,0,0,.10);
  transform: translateY(-2px);
}
/* گرادینت فقط پایین روی متن */
body.home .lm-discover .lm-discover-card .lm-discover-overlay{
  background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.40) 45%, rgba(0,0,0,0) 100%) !important;
}

/* Arrow جدید بدون دایره (پایین چپ) */
body.home .lm-discover .lm-discover-card .lm-discover-content{
  position:relative;
}
body.home .lm-discover .lm-discover-card .lm-discover-content::after{
  content:"→";
  position:absolute;
  left: 18px;
  bottom: 14px;
  font-size: 20px;
  color: rgba(255,255,255,.92);
  opacity:.85;
  transition: transform .2s ease, opacity .2s ease;
  pointer-events:none;
}
body.home .lm-discover .lm-discover-card:hover .lm-discover-content::after{
  opacity:1;
  transform: translateX(-4px);
}


/* ===== LM HOTFIX OVERRIDES (must stay at bottom) ===== */

/* Ensure Home background is WHITE (avoid dark overrides) */
body.home, body.home #page, body.home #content, body.home .site, body.home .site-content{
  background:#ffffff !important;
}

/* 1) Hero CTA: desktop NOT full width, mobile full width */
body.home .lm-btn-hero{
  width:auto !important;
  display:inline-flex !important;
  justify-content:center !important;
  padding-left:28px !important;
  padding-right:28px !important;
  min-width:220px;
  max-width:360px;
}
@media (max-width: 768px){
  body.home .lm-btn-hero{
    width:100% !important;
    max-width:none !important;
  }
}

/* 2) Product cards: increase height back + layout like Porsche (text right, arrow left, no circle) */
body.home .lm-products-grid{gap:24px !important;}
body.home .lm-product-card{
  min-height:520px !important;
  border:1px solid rgba(0,0,0,.10) !important;
  box-shadow:0 14px 40px rgba(0,0,0,.08) !important;
}
body.home .lm-product-media{position:relative !important;}
/* gradient only at bottom area */
body.home .lm-product-media::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:42%;
  pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.35) 55%, rgba(0,0,0,0) 100%);
}
/* Move chip + text block to bottom-right */
body.home .lm-product-media .lm-chip{
  position:absolute !important;
  right:18px !important;
  bottom:122px !important;
  left:auto !important;
  z-index:3 !important;
}
body.home .lm-product-body{
  position:absolute !important;
  right:18px !important;
  left:18px !important;
  bottom:18px !important;
  z-index:3 !important;
  text-align:right !important;
}
body.home .lm-product-title,
body.home .lm-product-subtitle{
  color:#fff !important;
}
body.home .lm-product-subtitle{opacity:.92 !important;}
/* Arrow (left) as simple icon (no circle) */
body.home .lm-product-card::after{
  content:"";
  position:absolute;
  left:18px;
  bottom:22px;
  width:22px;
  height:22px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:22px 22px;
  opacity:.85;
  transform:translateX(0);
  transition:transform .18s ease, opacity .18s ease;
  /* inline SVG arrow-right */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h12'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
body.home .lm-product-card:hover::after{transform:translateX(-4px); opacity:1;}
/* remove any old circle-arrow implementations if exist */
body.home .lm-product-arrow,
body.home .lm-product-cta,
body.home .lm-product-card .lm-arrow,
body.home .lm-product-card .lm-circle-arrow{
  display:none !important;
}

/* 3) Discover cards: remove duplicated arrows, keep ONE arrow without circle */
body.home .lm-discover-body::after,
body.home .lm-discover-content::after,
body.home .lm-discover-tile::after{
  content:none !important;
  display:none !important;
}
body.home .lm-discover-card::after{
  content:"";
  position:absolute;
  right:18px;
  bottom:18px;
  width:22px;
  height:22px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:22px 22px;
  opacity:.85;
  transition:transform .18s ease, opacity .18s ease;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h12'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
body.home .lm-discover-card:hover::after{transform:translateX(4px); opacity:1;}

/* Make Discover text on RIGHT (RTL) if needed */
body.home .lm-discover-title,
body.home .lm-discover-text{
  text-align:right !important;
}