/* ==========================================================================
   LEMO × CSB — custom-home.css
   Homepage: Hero, Collection grid, Featured products, Reviews
   ========================================================================== */

/* ==========================================================================
   Hero — Full-bleed image/video
   Dùng trong Elementor/WPBakery: wrap section với class .lemo-hero
   ========================================================================== */
body.lemo-home .lemo-hero,
body.lemo-home .elementor-section.lemo-hero {
  position: relative !important;
  min-height: calc(100vh - 64px) !important;
  max-height: 820px;
  display: flex !important;
  align-items: flex-end !important;
  overflow: hidden !important;
  padding: 0 !important;
}
body.lemo-home .lemo-hero > *:not(.lemo-hero-media):not(.lemo-hero-overlay) {
  position: relative;
  z-index: 2;
}
body.lemo-home .lemo-hero-media,
body.lemo-home .lemo-hero .elementor-background-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
}
body.lemo-home .lemo-hero-media img,
body.lemo-home .lemo-hero-media video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
body.lemo-home .lemo-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.45) 100%);
  z-index: 1;
  pointer-events: none;
}

body.lemo-home .lemo-hero-content {
  padding: 56px 48px !important;
  max-width: 620px !important;
  color: var(--lemo-white) !important;
}
body.lemo-home .lemo-hero-content .lemo-eyebrow {
  color: rgba(255,255,255,.85) !important;
}
body.lemo-home .lemo-hero-content h1,
body.lemo-home .lemo-hero-content .h1 {
  color: var(--lemo-white) !important;
  font-size: clamp(2.2rem, 5vw, 3.8rem) !important;
  margin-bottom: 18px !important;
  line-height: 1.05 !important;
}
body.lemo-home .lemo-hero-content p {
  color: rgba(255,255,255,.85) !important;
  font-size: 1.05rem !important;
  margin-bottom: 28px !important;
  max-width: 480px;
}
body.lemo-home .lemo-hero-buttons {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap;
}

/* ==========================================================================
   Split Hero — 2 panel ngang (Active / Leisure)
   ========================================================================== */
.lemo-split-hero {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
  min-height: 600px;
}
.lemo-split-panel {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: 440px;
}
.lemo-split-panel > img,
.lemo-split-panel > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  transition: transform .7s ease;
}
.lemo-split-panel:hover > img {
  transform: scale(1.04);
}
.lemo-split-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.55) 0%, transparent 60%);
  z-index: 2;
}
.lemo-split-content {
  position: relative;
  z-index: 3;
  padding: 36px 36px 40px;
  color: var(--lemo-white);
  width: 100%;
}
.lemo-split-content h2 {
  color: var(--lemo-white) !important;
  font-size: clamp(1.4rem, 2.5vw, 2rem) !important;
  margin-bottom: 8px !important;
}
.lemo-split-content p {
  color: rgba(255,255,255,.8) !important;
  margin-bottom: 16px !important;
  font-size: .92rem !important;
}

/* ==========================================================================
   Featured Collection Grid (2x2 featured layout)
   ========================================================================== */
.lemo-collection-grid {
  display: grid !important;
  gap: 4px !important;
  padding: 4px;
}
.lemo-collection-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
.lemo-collection-grid--featured {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  min-height: 720px;
}

.lemo-coll-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: var(--lemo-gray-100);
  min-height: 320px;
}
.lemo-coll-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.16,1,.3,1);
}
.lemo-coll-card:hover > img {
  transform: scale(1.05);
}
.lemo-coll-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.5) 0%, transparent 55%);
  z-index: 1;
  transition: background var(--lemo-ease);
}
.lemo-coll-card:hover::after {
  background: linear-gradient(0deg, rgba(0,0,0,.6) 0%, transparent 55%);
}
.lemo-coll-card-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 28px 28px 32px;
  z-index: 2;
  color: var(--lemo-white);
}
.lemo-coll-card-body h3 {
  color: var(--lemo-white) !important;
  font-size: clamp(1.1rem, 1.5vw, 1.4rem) !important;
  margin: 0 0 10px !important;
  font-weight: 600 !important;
}
.lemo-coll-card--featured {
  grid-row: 1 / 3;
}
.lemo-coll-card--featured h3 {
  font-size: clamp(1.5rem, 2.5vw, 2rem) !important;
}

/* ==========================================================================
   Category chips (thay thế "Season Collection" cũ)
   ========================================================================== */
.lemo-cat-chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 18px;
  padding: 0;
}
.lemo-cat-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  padding: 16px 8px;
  transition: transform var(--lemo-ease);
}
.lemo-cat-chip:hover {
  transform: translateY(-3px);
}
.lemo-cat-chip-img {
  width: 100%;
  max-width: 180px;
  aspect-ratio: 1;
  border-radius: var(--lemo-r-full);
  overflow: hidden;
  background: var(--lemo-gray-100);
  transition: box-shadow var(--lemo-ease);
}
.lemo-cat-chip:hover .lemo-cat-chip-img {
  box-shadow: var(--lemo-shadow-md);
}
.lemo-cat-chip-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.lemo-cat-chip:hover .lemo-cat-chip-img img {
  transform: scale(1.08);
}
.lemo-cat-chip-label {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lemo-black);
}
.lemo-cat-chip-count {
  font-size: .7rem;
  color: var(--lemo-gray-500);
  letter-spacing: .05em;
  margin-top: -6px;
}

/* ==========================================================================
   Review / Feedback Section — grid 4 cards
   ========================================================================== */
.lemo-review-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.lemo-review-card {
  padding: 24px;
  background: var(--lemo-white);
  border: 1px solid var(--lemo-gray-150);
  border-radius: var(--lemo-r-md);
  transition: box-shadow var(--lemo-ease), transform var(--lemo-ease);
}
.lemo-review-card:hover {
  box-shadow: var(--lemo-shadow-md);
  transform: translateY(-2px);
}
.lemo-review-stars {
  display: flex;
  gap: 2px;
  margin-bottom: 12px;
}
.lemo-review-stars svg {
  width: 14px;
  height: 14px;
  fill: var(--lemo-black);
}
.lemo-review-name {
  font-weight: 700;
  font-size: .9rem;
  margin-bottom: 8px;
  color: var(--lemo-black);
}
.lemo-review-text {
  font-size: .85rem;
  color: var(--lemo-gray-700);
  line-height: 1.7;
  margin-bottom: 16px;
}
.lemo-review-product {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--lemo-gray-150);
  text-decoration: none;
}
.lemo-review-product img {
  width: 44px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--lemo-r-xs);
  background: var(--lemo-gray-100);
}
.lemo-review-product-name {
  font-size: .78rem;
  font-weight: 600;
  color: var(--lemo-black);
  letter-spacing: .02em;
}

/* ==========================================================================
   Newsletter Block — centered, dark variant
   ========================================================================== */
.lemo-newsletter {
  background: var(--lemo-black) !important;
  color: var(--lemo-white);
  padding: 80px 20px !important;
  text-align: center;
}
.lemo-newsletter h2 {
  color: var(--lemo-white) !important;
  font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
  margin-bottom: 12px !important;
}
.lemo-newsletter p {
  color: rgba(255,255,255,.7) !important;
  max-width: 520px;
  margin: 0 auto 28px !important;
  font-size: .95rem !important;
}
.lemo-newsletter form {
  display: flex !important;
  max-width: 480px;
  margin: 0 auto !important;
  gap: 0 !important;
}
.lemo-newsletter input[type="email"] {
  flex: 1 !important;
  padding: 0 20px !important;
  height: 52px !important;
  border: 1.5px solid rgba(255,255,255,.3) !important;
  border-right: none !important;
  border-radius: var(--lemo-r-xs) 0 0 var(--lemo-r-xs) !important;
  background: transparent !important;
  color: var(--lemo-white) !important;
  font-size: .9rem !important;
  outline: none !important;
  transition: border-color var(--lemo-ease) !important;
}
.lemo-newsletter input[type="email"]::placeholder {
  color: rgba(255,255,255,.4) !important;
}
.lemo-newsletter input[type="email"]:focus {
  border-color: var(--lemo-white) !important;
}
.lemo-newsletter button,
.lemo-newsletter input[type="submit"] {
  height: 52px !important;
  padding: 0 32px !important;
  background: var(--lemo-white) !important;
  color: var(--lemo-black) !important;
  border: 1.5px solid var(--lemo-white) !important;
  border-radius: 0 var(--lemo-r-xs) var(--lemo-r-xs) 0 !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  font-size: .78rem !important;
  transition: all var(--lemo-ease) !important;
}
.lemo-newsletter button:hover {
  background: transparent !important;
  color: var(--lemo-white) !important;
}

/* ==========================================================================
   Instagram Feed strip (6 square images)
   ========================================================================== */
.lemo-ig-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
}
.lemo-ig-item {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--lemo-gray-100);
}
.lemo-ig-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.lemo-ig-item:hover img {
  transform: scale(1.08);
}
.lemo-ig-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  transition: background var(--lemo-ease);
}
.lemo-ig-item:hover::after {
  background: rgba(0,0,0,.25);
}

/* ==========================================================================
   USP Bar (under hero or above footer)
   ========================================================================== */
.lemo-usp-bar {
  border-top: 1px solid var(--lemo-gray-200);
  border-bottom: 1px solid var(--lemo-gray-200);
}
.lemo-usp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.lemo-usp-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 22px 18px;
  border-right: 1px solid var(--lemo-gray-150);
}
.lemo-usp-item:last-child { border-right: none; }
.lemo-usp-item svg {
  width: 22px;
  height: 22px;
  color: var(--lemo-black);
  stroke-width: 1.6;
  flex-shrink: 0;
}
.lemo-usp-item strong {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  margin-bottom: 2px;
}
.lemo-usp-item span {
  font-size: .74rem;
  color: var(--lemo-gray-500);
  letter-spacing: .02em;
}