/* ============================================================
   Homepage — New Layout  (homepage-new.css)
   Mobile-first · Fluid · Multi-breakpoint
   Breakpoints:
     xs  < 480px   (small phones)
     sm  ≥ 480px   (large phones)
     md  ≥ 768px   (tablets portrait)
     lg  ≥ 1024px  (tablets landscape / small laptops)
     xl  ≥ 1280px  (desktops)
     2xl ≥ 1440px  (wide desktops)
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --clr-primary:      #1a1a1a;
  --clr-accent:       #f0c040;
  --clr-accent-dark:  #d4a820;
  --clr-bg:           #ffffff;
  --clr-bg-alt:       #f5f5f3;
  --clr-text:         #1a1a1a;
  --clr-text-muted:   #666666;
  --clr-border:       #e8e8e6;

  --radius-sm:  4px;
  --radius:     6px;
  --radius-lg:  12px;

  --transition: 0.22s ease;
  --shadow-sm:  0 1px 6px rgba(0,0,0,.08);
  --shadow:     0 2px 16px rgba(0,0,0,.10);
  --shadow-lg:  0 6px 28px rgba(0,0,0,.14);

  /* Fluid spacing scale */
  --space-xs:  clamp(8px,  1vw,  12px);
  --space-sm:  clamp(12px, 2vw,  20px);
  --space-md:  clamp(20px, 3vw,  32px);
  --space-lg:  clamp(32px, 4vw,  56px);
  --space-xl:  clamp(48px, 6vw,  80px);

  /* Container side padding */
  --container-pad: clamp(16px, 4vw, 48px);
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
img  { max-width: 100%; height: auto; display: block; }
a    { text-decoration: none; color: inherit; }

/* ── Container ──────────────────────────────────────────────── */
.container,
.hero-container {
  width: 100%;
  max-width: 1380px;
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ── Global section spacing ─────────────────────────────────── */
section { padding-block: var(--space-lg); }

/* ── Section titles ─────────────────────────────────────────── */
.section-title {
  font-size: clamp(1.2rem, 3vw, 1.9rem);
  font-weight: 800;
  color: var(--clr-primary);
  margin-bottom: var(--space-sm);
  line-height: 1.2;
}

.section-header { margin-bottom: var(--space-sm); }

.section-label {
  display: block;
  font-size: clamp(.7rem, 1.2vw, .78rem);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
  margin-bottom: 4px;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn-descopera {
  display: inline-block;
  padding: clamp(8px, 1.2vw, 11px) clamp(18px, 2.5vw, 30px);
  background: var(--clr-accent);
  color: var(--clr-primary);
  font-weight: 700;
  font-size: clamp(.78rem, 1.2vw, .92rem);
  letter-spacing: .05em;
  text-transform: uppercase;
  border-radius: var(--radius);
  transition: background var(--transition), transform var(--transition);
  white-space: nowrap;
}
.btn-descopera:hover,
.btn-descopera:focus-visible {
  background: var(--clr-accent-dark);
  transform: translateY(-2px);
  outline: none;
}
.btn-descopera.btn-sm {
  padding: 6px 16px;
  font-size: .78rem;
}

.btn-vezi {
  display: inline-block;
  padding: 8px 20px;
  background: var(--clr-accent);
  color: var(--clr-primary);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: var(--radius);
  transition: background var(--transition);
  white-space: nowrap;
}
.btn-vezi:hover,
.btn-vezi:focus-visible {
  background: var(--clr-accent-dark);
  outline: none;
}

/* ── Arrow icon ──────────────────────────────────────────────── */
.arrow-right {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  flex-shrink: 0;
}


/* ============================================================
   HERO  (mobile-first)
   ============================================================ */
.hero-section {
  background: var(--clr-bg);
  padding-block: 0;
}

/* ── Top row: stacked on mobile, 2-col on md+ ─────────────── */
.hero-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(6px, 1vw, 10px);
  margin-bottom: clamp(6px, 1vw, 10px);
}

@media (min-width: 768px) {
  .hero-top { grid-template-columns: 1fr 1fr; }
}

/* Main (large) image */
.hero-main { width: 100%; }

.hero-main-inner {
  width: 100%;
  height: clamp(200px, 42vw, 480px);
  background-size: cover;
  background-position: center;
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}

/* Two secondary images — side-by-side on mobile, stacked on md+ */
.hero-secondary {
  display: flex;
  flex-direction: row;
  gap: clamp(6px, 1vw, 10px);
}

@media (min-width: 768px) {
  .hero-secondary { flex-direction: column; }
}

.hero-secondary-item {
  flex: 1;
  min-height: clamp(110px, 18vw, 230px);
  background-size: cover;
  background-position: center;
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}

/* Shared overlay */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.62) 0%, transparent 65%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: clamp(12px, 2.5vw, 28px);
  text-align: center;
}

.hero-overlay h2,
.hero-overlay h6 {
  color: #fff;
  margin-bottom: clamp(8px, 1.5vw, 14px);
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
  line-height: 1.2;
}

.hero-overlay h2 { font-size: clamp(1rem, 3vw, 2.2rem); }
.hero-overlay h6 { font-size: clamp(.8rem, 1.8vw, 1.3rem); font-weight: 600; }

/* ── Bottom row: 3 category tiles ───────────────────────── */
.hero-bottom {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(6px, 1vw, 10px);
}

@media (min-width: 480px) {
  .hero-bottom { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 768px) {
  .hero-bottom { grid-template-columns: repeat(3, 1fr); }
}

.hero-bottom-item {
  height: clamp(130px, 18vw, 220px);
  background-size: cover;
  background-position: center;
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}

.hero-bottom-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.58) 0%, transparent 55%);
  display: flex;
  align-items: flex-end;
  padding: clamp(10px, 2vw, 20px);
}

.hero-bottom-overlay a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: clamp(.78rem, 1.4vw, 1rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}


/* ============================================================
   WHY US / TRUST BAR
   ============================================================ */
.why-us {
  background: var(--clr-primary);
  padding-block: clamp(28px, 4vw, 48px);
  color: #fff;
}

.why-us .section-title {
  color: #fff;
  text-align: center;
  margin-bottom: var(--space-md);
}

.trust-badges-bar {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(10px, 2vw, 24px);
}

@media (min-width: 480px) {
  .trust-badges-bar { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .trust-badges-bar { grid-template-columns: repeat(4, 1fr); }
}

.trust-item {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.5vw, 16px);
  padding: clamp(10px, 1.5vw, 16px) clamp(12px, 2vw, 20px);
  border-left: 3px solid var(--clr-accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: rgba(255,255,255,.04);
}

.trust-icon {
  width: clamp(28px, 4vw, 38px);
  height: clamp(28px, 4vw, 38px);
  background: var(--clr-accent);
  border-radius: 50%;
  flex-shrink: 0;
}

.trust-text strong {
  display: block;
  font-size: clamp(.72rem, 1.2vw, .88rem);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--clr-accent);
}

.trust-text small {
  font-size: clamp(.66rem, 1vw, .76rem);
  color: rgba(255,255,255,.6);
  text-transform: uppercase;
  line-height: 1.4;
}


/* ============================================================
   PRODUCT CARD  (shared component)
   ============================================================ */
.product-card {
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
  height: 100%;
}

@media (hover: hover) {
  .product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
  }
}

.product-card__img {
  width: 100%;
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
}

.product-card__body {
  padding: clamp(10px, 1.5vw, 14px) clamp(12px, 1.5vw, 16px);
}

.product-card__body h6 {
  font-size: clamp(.8rem, 1.2vw, .92rem);
  font-weight: 700;
  color: var(--clr-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Row variant */
.product-card--row .product-card__img { aspect-ratio: 5/3; }


/* ============================================================
   RECENTLY ADDED
   ============================================================ */
.recently-added { background: var(--clr-bg-alt); }


/* ============================================================
   MOBILIER LA COMANDA
   ============================================================ */
.mobilier-la-comanda { background: var(--clr-bg); }

.mlc-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  align-items: center;
}

@media (min-width: 1024px) {
  .mlc-inner {
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 60px);
  }
}

.mlc-content h2 {
  font-size: clamp(1.3rem, 3vw, 2.2rem);
  font-weight: 800;
  margin-bottom: clamp(10px, 1.8vw, 18px);
  line-height: 1.2;
}

.mlc-content p {
  color: var(--clr-text-muted);
  line-height: 1.75;
  font-size: clamp(.87rem, 1.3vw, 1rem);
  margin-bottom: clamp(16px, 2.5vw, 28px);
}

.yt-channel-link a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: clamp(.87rem, 1.3vw, .98rem);
  color: var(--clr-primary);
  transition: opacity var(--transition);
}
.yt-channel-link a:hover { opacity: .72; }

.yt-badge {
  width: 36px;
  height: 36px;
  background: #ff0000;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.yt-badge svg { width: 20px; height: 20px; }

.yt-thumb {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
}
.yt-thumb img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}

.yt-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.28);
  transition: background var(--transition);
}
.yt-play:hover { background: rgba(0,0,0,.50); }
.yt-play img { width: clamp(32px, 6vw, 52px); }


/* ============================================================
   CATEGORII IMPORTANTE
   ============================================================ */
.categorii-importante { background: var(--clr-bg-alt); }

.cat-card {
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
  height: 100%;
}

@media (hover: hover) {
  .cat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
  }
}

.cat-card__img {
  width: 100%;
  aspect-ratio: 16/9;
  background-size: cover;
  background-position: center;
}

.cat-card__footer {
  padding: clamp(10px, 1.5vw, 14px);
  text-align: center;
}


/* ============================================================
   PRODUCT ROW SECTIONS  (Bucatarie / Dormitor / Paturi)
   ============================================================ */
.product-row-section {
  background: var(--clr-bg);
  padding-block: clamp(26px, 4vw, 24px);
  border-bottom: 1px solid var(--clr-border);
}

.product-row-title {
  font-size: clamp(1rem, 2.5vw, 1.6rem);
  font-weight: 800;
  color: var(--clr-primary);
  margin-bottom: var(--space-sm);
  line-height: 1.2;
}


/* ============================================================
   RECLAMA BANNER
   ============================================================ */
.reclama-banner {
  padding-block: clamp(18px, 3vw, 36px);
  background: var(--clr-bg-alt);
  text-align: center;
}

.reclama-banner a { display: inline-block; }

.reclama-banner img {
  display: inline-block;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  max-width: min(100%, 720px);
  width: 100%;
}


/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials { background: var(--clr-bg-alt); }

.testimonial-card {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2.5vw, 28px);
  background: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(16px, 3vw, 32px);
  box-shadow: var(--shadow);
}

@media (min-width: 600px) {
  .testimonial-card {
    flex-direction: row;
    align-items: center;
  }
}

.testimonial-card__text { flex: 1; min-width: 0; }

.testimonial-card__text h6 {
  font-size: clamp(.9rem, 1.5vw, 1.1rem);
  font-weight: 800;
  margin-bottom: clamp(6px, 1.2vw, 12px);
}

.testimonial-card__text p {
  color: var(--clr-text-muted);
  font-style: italic;
  line-height: 1.75;
  font-size: clamp(.84rem, 1.2vw, .98rem);
  margin-bottom: clamp(10px, 1.5vw, 16px);
}

.testimonial-card__img {
  flex-shrink: 0;
  width: 100%;
  max-width: 240px;
  margin-inline: auto;
}

@media (min-width: 600px) {
  .testimonial-card__img {
    width: clamp(140px, 22%, 230px);
    margin-inline: 0;
  }
}

.testimonial-card__img img {
  border-radius: var(--radius);
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.stars {
  color: var(--clr-accent);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  letter-spacing: 2px;
}


/* ============================================================
   OWL CAROUSEL — responsive overrides
   ============================================================ */
/*.owl-theme .owl-nav [class*='owl-'] {
  background: var(--clr-primary) !important;
  color: #fff !important;
  border-radius: 50% !important;
  width:       clamp(30px, 4.5vw, 42px) !important;
  height:      clamp(30px, 4.5vw, 42px) !important;
  line-height: clamp(30px, 4.5vw, 42px) !important;
  font-size:   clamp(.85rem, 1.4vw, 1.2rem) !important;
  transition:  background var(--transition) !important;
}

.owl-theme .owl-nav [class*='owl-']:hover {
  background: var(--clr-accent) !important;
  color: var(--clr-primary) !important;
}*/

.owl-theme .owl-dots { margin-top: clamp(8px, 1.5vw, 16px) !important; }

.owl-theme .owl-dots .owl-dot span {
  background: #ccc !important;
  width: 8px !important;
  height: 8px !important;
  transition: background var(--transition) !important;
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
  background: var(--clr-accent) !important;
}

/* Hide nav arrows on xs phones — swipe is enough */
@media (max-width: 479px) {
  .owl-theme .owl-nav { display: none !important; }
}


/* ============================================================
   UTILITY: visually hidden but accessible
   ============================================================ */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}


/* ============================================================
   PRINT — strip decorative backgrounds, hide nav chrome
   ============================================================ */
@media print {
  .hero-overlay,
  .owl-theme .owl-nav,
  .owl-theme .owl-dots,
  .why-us { display: none; }

  section { padding-block: 16px; }
  .hero-bottom, .hero-top { gap: 4px; }

  .hero-main-inner,
  .hero-secondary-item,
  .hero-bottom-item,
  .product-card__img,
  .cat-card__img { print-color-adjust: exact; }
}

.product-row-owl .owl-nav {
  text-align: center;
  position: absolute;
  top: -60px;
  right: 0px;
}