/* ================================================
   ROKO KEDAMA — Main Stylesheet
   ================================================ */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500&display=swap');

/* --- Design Tokens --- */
:root {
  --bg:          #F7F4EE;
  --bg-alt:      #EDE8DE;
  --bg-card:     #FDFBF7;
  --text:        #2A2118;
  --text-soft:   #6B5E52;
  --text-muted:  #9E8E82;
  --green:       #3D6B47;
  --green-light: #6B9B78;
  --green-pale:  #D4E6D7;
  --terra:       #B85C3A;
  --terra-light: #E4A882;
  --terra-pale:  #F2DDD0;
  --border:      #D4CAB8;
  --white:       #FDFBF7;

  --font-display: 'EB Garamond', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;

  --radius:  12px;
  --radius-sm: 6px;
  --shadow:  0 4px 24px rgba(42,33,24,.08);
  --shadow-hover: 0 8px 40px rgba(42,33,24,.14);

  --transition: .25s ease;
  --max-width: 1200px;
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a  { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; font-family: var(--font-body); border: none; background: none; }

/* --- Typography --- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .01em;
}
h1 { font-size: clamp(2.4rem, 6vw, 4.5rem); }
h2 { font-size: clamp(1.8rem, 4vw, 3rem); }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.9rem); }
h4 { font-size: 1.2rem; }

p { max-width: 65ch; }

.italic { font-style: italic; }
.muted  { color: var(--text-muted); }
.soft   { color: var(--text-soft); }

/* --- Layout --- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 clamp(1.2rem, 4vw, 2.5rem);
}

section { padding: clamp(3rem, 8vw, 6rem) 0; }

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 2rem;
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: var(--transition);
}

.btn-primary {
  background: var(--green);
  color: var(--white);
}
.btn-primary:hover {
  background: #2e5236;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(61,107,71,.3);
}

.btn-outline {
  border: 1.5px solid var(--green);
  color: var(--green);
}
.btn-outline:hover {
  background: var(--green);
  color: var(--white);
  transform: translateY(-2px);
}

.btn-terra {
  background: var(--terra);
  color: var(--white);
}
.btn-terra:hover {
  background: #9a4b2f;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(184,92,58,.3);
}

/* --- Tags / Badges --- */
.tag {
  display: inline-block;
  padding: .25rem .8rem;
  border-radius: 100px;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.tag-green { background: var(--green-pale); color: var(--green); }
.tag-terra { background: var(--terra-pale); color: var(--terra); }
.tag-muted { background: var(--bg-alt); color: var(--text-soft); }

/* ================================================
   NAVIGATION
   ================================================ */
.nav {
  z-index: 100;
  background: rgba(247,244,238,.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav--sticky {
  position: sticky;
  top: 0;
}
.nav--static {
  position: relative;
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.nav__logo {
  display: flex;
  align-items: center;
}

.nav__logo-img {
  height: 38px;
  width: auto;
  display: block;
}

.nav__logo-mark {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.nav__logo-text {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1;
}

.nav__logo-text span {
  display: block;
  font-size: .65rem;
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav__links a {
  font-size: .85rem;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-soft);
  transition: color var(--transition);
  position: relative;
  padding-bottom: 2px;
}

.nav__links a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 1.5px;
  background: var(--green);
  transition: width var(--transition);
}

.nav__links a:hover,
.nav__links a.active {
  color: var(--green);
}
.nav__links a:hover::after,
.nav__links a.active::after {
  width: 100%;
}

.nav__cta { margin-left: .5rem; }

/* Nav action buttons (auth + cart + lang) */
.nav__actions {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-left: .75rem;
}

/* Language toggle */
.nav__lang {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .78rem;
  font-weight: 500;
  color: var(--text-soft);
  text-decoration: none;
  white-space: nowrap;
  background: transparent;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}
.nav__lang-flag {
  width: 16px;
  height: 12px;
  border-radius: 1px;
  flex-shrink: 0;
}
.nav__lang:hover { border-color: var(--green); color: var(--green); }

/* Auth link — small, icon + text */
.nav__auth {
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .78rem;
  font-weight: 500;
  color: var(--text-soft);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--transition), color var(--transition);
}
.nav__auth:hover { border-color: var(--green); color: var(--green); }
.nav__auth svg { flex-shrink: 0; }

.nav__cart {
  position: relative;
  padding: .4rem .55rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition), color var(--transition);
}
.nav__cart:hover { border-color: var(--green); color: var(--green); }

.nav__cart-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 16px;
  height: 16px;
  background: var(--terra);
  color: #fff;
  font-size: .6rem;
  font-weight: 600;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  font-family: var(--font-body);
}
.nav__cart-badge[data-count="0"],
.nav__cart-badge:empty { display: none; }

/* Logo text fallback */
.nav__logo-fallback {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--green);
  letter-spacing: .08em;
}

/* Cart drawer */
.cart-drawer {
  position: fixed;
  top: 0; right: -420px;
  width: min(420px, 100vw);
  height: 100vh;
  background: var(--white);
  box-shadow: -4px 0 40px rgba(42,33,24,.14);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transition: right .3s ease;
}
.cart-drawer.open { right: 0; }
.cart-overlay {
  position: fixed; inset: 0;
  background: rgba(42,33,24,.35);
  z-index: 999;
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
.cart-overlay.open { opacity: 1; pointer-events: all; }
.cart-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem 1.5rem;
  border-bottom: 1px solid var(--border);
}
.cart-drawer__head h3 { font-size: 1.2rem; }
.cart-drawer__close { font-size: 1.3rem; color: var(--text-muted); padding: .3rem; cursor: pointer; }
.cart-drawer__close:hover { color: var(--text); }
.cart-drawer__body { flex: 1; overflow-y: auto; padding: 1rem 1.5rem; }
.cart-drawer__empty { text-align: center; color: var(--text-muted); padding: 3rem 0; font-size: .95rem; }
.cart-item {
  display: flex; align-items: center; gap: 1rem;
  padding: .9rem 0; border-bottom: 1px solid var(--border);
}
.cart-item:last-child { border-bottom: none; }
.cart-item__img {
  width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-sm);
  background: var(--green-pale); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
}
.cart-item__info { flex: 1; }
.cart-item__name { font-size: .9rem; font-weight: 500; }
.cart-item__price { font-size: .82rem; color: var(--text-muted); margin-top: .15rem; }
.cart-item__qty { display: flex; align-items: center; gap: .4rem; margin-top: .4rem; }
.cart-item__qty button {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--border); font-size: .85rem;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-soft); cursor: pointer;
}
.cart-item__qty button:hover { border-color: var(--green); color: var(--green); }
.cart-item__qty span { font-size: .85rem; min-width: 16px; text-align: center; }
.cart-item__remove { color: var(--text-muted); cursor: pointer; font-size: .8rem; padding: .2rem; }
.cart-item__remove:hover { color: var(--terra); }
.cart-drawer__foot {
  padding: 1.2rem 1.5rem;
  border-top: 1px solid var(--border);
}
.cart-total { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.cart-total__label { font-size:.9rem; color:var(--text-soft); }
.cart-total__value { font-family: var(--font-display); font-size: 1.4rem; color: var(--green); }

/* Mobile menu */
.nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
}
.nav__hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--text);
  transition: var(--transition);
  transform-origin: center;
}
.nav__hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__hamburger.open span:nth-child(2) { opacity: 0; }
.nav__hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav__mobile {
  display: none;
  flex-direction: column;
  background: var(--white);
  border-top: 1px solid var(--border);
  padding: 1.5rem;
  gap: .25rem;
}
.nav__mobile.open { display: flex; }
.nav__mobile a {
  padding: .65rem .5rem;
  font-size: .9rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-soft);
  border-bottom: 1px solid var(--border);
  transition: color var(--transition);
}
.nav__mobile a:last-child { border-bottom: none; }
.nav__mobile a:hover { color: var(--green); }

/* ================================================
   HERO
   ================================================ */
.hero-section {
  height: calc(100vh - 72px - 40px);
  min-height: 480px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  padding: clamp(1.5rem, 3vh, 3.5rem) 0;
}

.hero__content { max-width: 540px; }

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: clamp(.75rem, 1.5vh, 1.5rem);
}
.hero__eyebrow::before {
  content: '';
  display: block;
  width: 28px; height: 1.5px;
  background: var(--green);
}

.hero__title {
  margin-bottom: clamp(.75rem, 1.5vh, 1.5rem);
  color: var(--text);
}

.hero__title em {
  font-style: italic;
  color: var(--green);
}

.hero__desc {
  font-size: 1.05rem;
  color: var(--text-soft);
  margin-bottom: clamp(1rem, 2.5vh, 2.5rem);
  line-height: 1.8;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.hero__scroll {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: clamp(1rem, 2.5vh, 3rem);
}
.hero__scroll-line {
  width: 32px; height: 1px;
  background: var(--text-muted);
}

/* Hero illustration */
.hero__visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero__blob {
  position: absolute;
  width: 85%;
  aspect-ratio: 1;
  background: var(--green-pale);
  border-radius: 60% 40% 50% 70% / 60% 50% 40% 70%;
  animation: morphBlob 8s ease-in-out infinite;
  z-index: 0;
}

@keyframes morphBlob {
  0%, 100% { border-radius: 60% 40% 50% 70% / 60% 50% 40% 70%; }
  25%       { border-radius: 40% 60% 70% 50% / 50% 60% 40% 70%; }
  50%       { border-radius: 70% 30% 40% 60% / 40% 70% 60% 50%; }
  75%       { border-radius: 50% 70% 60% 40% / 70% 40% 50% 60%; }
}

.hero__img-wrap {
  position: relative;
  z-index: 1;
  width: 80%;
  aspect-ratio: 3/4;
  border-radius: 50% 50% 45% 45%;
  overflow: hidden;
  background: var(--bg-alt);
}

.hero__img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 4px 24px rgba(0,0,0,.08), inset 0 0 48px rgba(0,0,0,.04);
  pointer-events: none;
  z-index: 2;
}

.hero__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Floating badges */
.hero__badge {
  position: absolute;
  z-index: 2;
  background: var(--white);
  border-radius: var(--radius);
  padding: .75rem 1rem;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  font-weight: 400;
  white-space: nowrap;
}
.hero__badge--tl { top: 10%; left: -5%; }
.hero__badge--br { bottom: 12%; right: -5%; }
.hero__badge-icon { font-size: 1.1rem; }

/* ================================================
   SECTION HEADERS
   ================================================ */
.section-header {
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section-header .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 1rem;
}

.section-header .eyebrow::before,
.section-header .eyebrow::after {
  content: '';
  display: block;
  width: 20px; height: 1.5px;
  background: var(--green);
}

.section-header h2 { margin-bottom: 1rem; }
.section-header p {
  color: var(--text-soft);
  font-size: 1.05rem;
  margin: 0 auto;
}

/* ================================================
   CATEGORIES / COLLECTIONS
   ================================================ */
.collections { background: var(--bg-alt); }

.collections__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}

.collection-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 3/4;
  cursor: pointer;
  background: var(--bg-card);
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.collection-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}

.collection-card__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  transition: transform .4s ease;
}
.collection-card:hover .collection-card__bg {
  transform: scale(1.05);
}

.collection-card__body {
  position: relative;
  z-index: 1;
  padding: 1.5rem;
  background: linear-gradient(transparent, rgba(42,33,24,.65));
  color: var(--white);
}

.collection-card__icon {
  font-size: 1.8rem;
  margin-bottom: .5rem;
}

.collection-card__name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
}

.collection-card__count {
  font-size: .78rem;
  opacity: .8;
  letter-spacing: .08em;
  margin-top: .2rem;
}

/* ================================================
   PRODUCTS GRID
   ================================================ */
.products__filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  margin-bottom: 3rem;
}

.filter-btn {
  padding: .5rem 1.4rem;
  border-radius: 100px;
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1.5px solid var(--border);
  color: var(--text-soft);
  background: var(--white);
  transition: var(--transition);
}

.filter-btn:hover,
.filter-btn.active {
  border-color: var(--green);
  background: var(--green);
  color: var(--white);
}

.products__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.8rem;
}

.product-card {
  position: relative;
  background: var(--bg-card);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  box-shadow: 0 2px 12px rgba(42,33,24,.05);
  border: 2px solid transparent;
  display: flex;
  flex-direction: column;
}

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

/* Sale frame — slight terra-toned edge matching the .price-sale color.
   Applies on both desktop and mobile; transparent border on non-sale
   cards keeps the layout box size identical so there's no jump. */
.product-card--sale {
  border-color: var(--terra);
}

/* Image area — positions the QR button over the image */
.product-card__img-wrap {
  position: relative;
  flex-shrink: 0;
}

/* Clickable image wrapper */
.product-card__img-link {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--bg-alt);
  position: relative;
}

/* Legacy selector kept for existing markup compatibility */
.product-card__img {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--bg-alt);
  position: relative;
  flex-shrink: 0;
}

.product-card__img-link img,
.product-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.product-card:hover .product-card__img-link img,
.product-card:hover .product-card__img img {
  transform: scale(1.06);
}

.product-card__img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-card__badge {
  position: absolute;
  top: .75rem; left: .75rem;
}

.product-card__qr {
  position: absolute;
  bottom: .75rem; left: .75rem;
  width: 32px; height: 32px;
  background: var(--white);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  transition: transform var(--transition);
  z-index: 2;
}
.product-card__qr:hover { transform: scale(1.1); }

/* Card body — flex column so footer is always at bottom */
.product-card__body {
  padding: 1.2rem;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .3rem .8rem;
  flex: 1;
}

.product-card__name {
  grid-column: 1 / -1;
  font-family: var(--font-display);
  font-size: var(--card-title-size, 1.2rem);
  font-weight: var(--card-name-weight, 500);
  font-style: var(--card-title-style, normal);
  line-height: 1.25;
  margin-bottom: 0;
  padding-bottom: var(--card-title-pb, .3rem);
  color: var(--text);
  transition: color var(--transition);
  /* Always reserve space for 2 lines so description starts at the same Y
     on every card, regardless of actual title length. Titles longer than
     2 lines are truncated with an ellipsis. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 2.5em; /* 2 lines × line-height 1.25 */
}
.product-card__name:hover { color: var(--green); }

.product-card__desc {
  grid-column: 1 / -1;
  font-size: var(--card-desc-size, .85rem);
  font-style: var(--card-desc-style, normal);
  color: var(--text-soft);
  margin-bottom: 0;
  padding-bottom: var(--card-desc-pb, .75rem);
  max-width: none;
  /* clamp to N lines so all cards are same height; ellipsis when overflowing */
  display: -webkit-box;
  -webkit-line-clamp: var(--card-desc-lines, 2);
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Price sits on the bottom-left of the grid, cart icon on the bottom-right */
.product-card__price {
  grid-column: 1;
  display: block;
  font-family: var(--font-display);
  font-size: var(--card-price-size, 1.3rem);
  font-style: var(--card-price-style, normal);
  font-weight: 500;
  color: var(--green);
  line-height: 1;
  padding-left: var(--card-price-offset-x, 0);
  padding-top: var(--card-row-pd, .5rem);
  padding-bottom: var(--card-row-pd, .5rem);
  margin: 0;
  align-self: center;
}

/* Footer holds just the icon-only add-to-cart button, grid-col 2 */
.product-card__footer {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-top: var(--card-row-pd, .5rem);
  padding-bottom: var(--card-row-pd, .5rem);
  align-self: center;
}

/* Icon-only round add-to-cart button. Diameter + SVG size are driven by
   CSS custom properties so admin can resize via Setari → Magazin. Mobile
   @media override hardcodes smaller sizes (vars only affect desktop). */
.product-card__add {
  width: var(--card-cart-size, 40px);
  height: var(--card-cart-size, 40px);
  padding: 0;
  font-size: 0;
  border-radius: 50%;
  background-color: var(--green);
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--card-cart-svg, 20px) var(--card-cart-svg, 20px);
  border: none;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.product-card__add:hover {
  background-color: #2e5236;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(61,107,71,.3);
}
.product-card__add:disabled {
  opacity: .7;
  cursor: default;
  transform: none;
  box-shadow: none;
}

/* ================================================
   CARE GUIDE PREVIEW
   ================================================ */
.care-section { background: var(--bg-alt); }

.care-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
}

.care-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 1.8rem;
  transition: transform var(--transition), box-shadow var(--transition);
  box-shadow: 0 2px 12px rgba(42,33,24,.05);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.care-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.care-card__icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--green-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.care-card__title {
  font-family: var(--font-display);
  font-size: 1.3rem;
}

.care-card__desc {
  font-size: .88rem;
  color: var(--text-soft);
  flex-grow: 1;
  max-width: none;
}

.care-card__link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--green);
  transition: gap var(--transition);
}
.care-card__link:hover { gap: .7rem; }

/* ================================================
   ABOUT STRIP
   ================================================ */
.about-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.about-strip__img {
  position: relative;
}

.about-strip__img-main {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4/5;
  background: var(--bg-alt);
}

.about-strip__img-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-strip__img-accent {
  position: absolute;
  bottom: -1.5rem;
  right: -1.5rem;
  width: 45%;
  aspect-ratio: 1;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--green-pale);
  border: 4px solid var(--bg);
}

.about-strip__img-accent img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-strip__content .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 1rem;
}

.about-strip__content h2 { margin-bottom: 1.2rem; }

.about-strip__content p {
  color: var(--text-soft);
  margin-bottom: 1rem;
  font-size: 1rem;
  max-width: 48ch;
}

.about-strip__stats {
  display: flex;
  gap: 2.5rem;
  margin: 2rem 0;
}

.stat__num {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 500;
  color: var(--green);
  line-height: 1;
}

.stat__label {
  font-size: .8rem;
  color: var(--text-soft);
  letter-spacing: .04em;
  margin-top: .2rem;
}

/* ================================================
   TESTIMONIALS
   ================================================ */
.testimonials { background: var(--green); color: var(--white); }

.testimonials .section-header { color: var(--white); }
.testimonials .section-header .eyebrow { color: var(--green-pale); }
.testimonials .section-header .eyebrow::before,
.testimonials .section-header .eyebrow::after { background: var(--green-pale); }
.testimonials .section-header p { color: rgba(255,255,255,.7); }

/* Legacy grid kept for backward compat */
.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

/* Testimonials Carousel */
.tc-carousel {
  position: relative;
  overflow: hidden;
  padding-bottom: 2.5rem;
}
.tc-track {
  display: flex;
  transition: transform .5s ease;
}
.tc-slide {
  flex: 0 0 var(--tc-slide-w, 33.3333%);
  max-width: var(--tc-slide-w, 33.3333%);
  min-width: 0;
  padding: 0 .75rem;
  box-sizing: border-box;
}
.tc-slide .testimonial-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.tc-slide .testimonial-card__text {
  flex: 1;
}
.tc-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.1);
  color: var(--white);
  font-size: 1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition), border-color var(--transition);
  backdrop-filter: blur(4px);
  z-index: 2;
}
.tc-btn:hover {
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.5);
}
.tc-btn--prev { left: 0; }
.tc-btn--next { right: 0; }
.tc-dots {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: .5rem;
}
.tc-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.3);
  cursor: pointer;
  padding: 0;
  transition: background var(--transition), transform var(--transition);
}
.tc-dot.active {
  background: var(--white);
  transform: scale(1.3);
}

.testimonial-card {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--tc-radius, var(--radius));
  padding: var(--tc-pad, 1.8rem);
  backdrop-filter: blur(4px);
}

.testimonial-card__stars {
  color: #F5C842;
  font-size: 1rem;
  letter-spacing: .1em;
  margin-bottom: .8rem;
}

.testimonial-card__text {
  font-family: var(--font-display);
  font-size: var(--tc-text-size, 1.1rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.7;
  margin-bottom: 1.2rem;
  max-width: none;
  color: rgba(255,255,255,.9);
}

.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.testimonial-card__avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
}

.testimonial-card__name {
  font-size: .9rem;
  font-weight: 500;
}
.testimonial-card__location {
  font-size: .78rem;
  opacity: .6;
}

/* ================================================
   NEWSLETTER / CTA BANNER
   ================================================ */
.cta-banner {
  background: var(--terra-pale);
  border-radius: var(--radius);
  padding: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 5vw, 4rem);
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
}

.cta-banner__icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.cta-banner h2 { margin-bottom: .8rem; }

.cta-banner p {
  color: var(--text-soft);
  margin: 0 auto 2rem;
}

.cta-banner__form {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
  max-width: 460px;
  margin: 0 auto;
}

.cta-banner__form input[type="email"] {
  flex: 1;
  min-width: 200px;
  padding: .75rem 1.2rem;
  border-radius: 100px;
  border: 1.5px solid var(--border);
  background: var(--white);
  font-family: var(--font-body);
  font-size: .9rem;
  color: var(--text);
  outline: none;
  transition: border-color var(--transition);
}
.cta-banner__form input:focus {
  border-color: var(--green);
}

/* ================================================
   FOOTER
   ================================================ */
.footer {
  background: var(--text);
  color: rgba(255,255,255,.7);
  padding: clamp(3rem, 6vw, 5rem) 0 2rem;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 3rem;
}

.footer__brand {}

.footer__logo {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.footer__logo-img {
  width: auto;
  display: block;
  object-fit: contain;
}

.footer__logo-text {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--white);
}

.footer__brand p {
  font-size: .88rem;
  line-height: 1.8;
  max-width: 28ch;
}

.footer__social {
  display: flex;
  gap: .75rem;
  margin-top: 1.5rem;
}

.social-link {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: background var(--transition), transform var(--transition);
}
.social-link:hover {
  background: var(--green);
  transform: translateY(-2px);
}

.footer__col-title {
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 1.2rem;
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.footer__links a {
  font-size: .88rem;
  transition: color var(--transition);
}
.footer__links a:hover { color: var(--white); }

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  padding: 1.2rem 0;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: .82rem;
}
.footer__legal a {
  color: rgba(255,255,255,.6);
  transition: color var(--transition);
}
.footer__legal a:hover { color: var(--white); }

.footer__company {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.2rem;
  padding: .8rem 0;
  font-size: .75rem;
  color: rgba(255,255,255,.4);
}

.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  font-size: .8rem;
}

.footer__bottom a { transition: color var(--transition); }
.footer__bottom a:hover { color: var(--white); }

/* ================================================
   CARE PAGE (QR TARGET)
   ================================================ */
.care-hero {
  padding: clamp(3rem, 6vw, 5rem) 0 2rem;
}

.care-hero__back {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 2rem;
  transition: color var(--transition), gap var(--transition);
}
.care-hero__back:hover {
  color: var(--green);
  gap: .6rem;
}

.care-hero__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.care-hero__img {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4/5;
  background: var(--bg-alt);
  position: sticky;
  top: 100px;
}

.care-hero__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.care-hero__info .tag { margin-bottom: 1rem; }
.care-hero__info h1 { margin-bottom: .3rem; }
.care-hero__info .latin-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}
.care-hero__info .intro {
  font-size: 1rem;
  color: var(--text-soft);
  margin-bottom: 2rem;
  max-width: 50ch;
}

/* Care stats bar */
.care-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding: 1.5rem;
  background: var(--bg-alt);
  border-radius: var(--radius);
  margin-bottom: 2.5rem;
}

.care-stat {
  text-align: center;
}

.care-stat__icon {
  font-size: 1.5rem;
  margin-bottom: .3rem;
}

.care-stat__label {
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .2rem;
}

.care-stat__value {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--green);
}

/* Care sections */
.care-section-block {
  margin-bottom: 2rem;
}

.care-section-block h3 {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: 1.3rem;
  margin-bottom: .8rem;
}

.care-section-block h3 .icon {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--green-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  flex-shrink: 0;
}

.care-section-block p, .care-section-block li {
  font-size: .95rem;
  color: var(--text-soft);
  max-width: 55ch;
}

.care-section-block ul {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding-left: .5rem;
}

.care-section-block li {
  display: flex;
  gap: .5rem;
  align-items: flex-start;
}
.care-section-block li::before {
  content: '○';
  color: var(--green);
  font-size: .7rem;
  margin-top: .35rem;
  flex-shrink: 0;
}

/* QR section on care page */
.qr-cta {
  background: var(--green-pale);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-top: 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.qr-cta__icon { font-size: 2.5rem; }
.qr-cta__text h4 { font-size: 1rem; margin-bottom: .2rem; }
.qr-cta__text p { font-size: .85rem; color: var(--text-soft); max-width: 40ch; }

/* ================================================
   PAGE HEADER (inner pages)
   ================================================ */
.page-header {
  background: var(--bg-alt);
  padding-top: var(--ph-padding, clamp(2.5rem, 6vw, 5rem));
  padding-bottom: var(--ph-padding, clamp(2.5rem, 6vw, 5rem));
  text-align: center;
}
.page-header .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--ph-eyebrow, .75rem);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 1rem;
}
.page-header .eyebrow::before,
.page-header .eyebrow::after {
  content: '';
  display: block;
  width: 20px; height: 1.5px;
  background: var(--green);
}
.page-header h1 {
  margin-bottom: .8rem;
  font-size: var(--ph-title, clamp(1.7rem, 3.4vw, 2.4rem));
}
.page-header p {
  color: var(--text-soft);
  font-size: var(--ph-desc, 1.05rem);
  margin: 0 auto;
}

/* ================================================
   ABOUT PAGE
   ================================================ */
.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

.value-card {
  padding: 2rem;
  background: var(--bg-card);
  border-radius: var(--radius);
  border-left: 3px solid var(--green);
}

.value-card__icon {
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

.value-card h3 { font-size: 1.2rem; margin-bottom: .5rem; }
.value-card p { font-size: .9rem; color: var(--text-soft); max-width: none; }

/* ================================================
   CONTACT PAGE
   ================================================ */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.contact-info__item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.8rem;
}

.contact-info__icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--green-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.contact-info__label {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .2rem;
}
.contact-info__value {
  font-size: .95rem;
  color: var(--text-soft);
}

/* Form */
.contact-form {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: clamp(1.8rem, 4vw, 2.5rem);
  box-shadow: var(--shadow);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-group {
  margin-bottom: 1.2rem;
}

.form-group label {
  display: block;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: .4rem;
}

.form-group input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
.form-group textarea,
.form-group select {
  width: 100%;
  padding: .75rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--text);
  outline: none;
  transition: border-color var(--transition);
}

.form-group input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--green);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

/* --- Custom Checkbox & Radio --- */
input[type="checkbox"],
input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  border: 2px solid var(--border);
  background: var(--bg);
  cursor: pointer;
  vertical-align: middle;
  position: relative;
  transition: border-color .15s, background .15s;
}
input[type="checkbox"] {
  border-radius: 4px;
}
input[type="radio"] {
  border-radius: 50%;
}
input[type="checkbox"]:checked {
  background: var(--green);
  border-color: var(--green);
}
input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 6px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
input[type="radio"]:checked {
  border-color: var(--green);
  background: var(--bg);
}
input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
}
input[type="checkbox"]:hover,
input[type="radio"]:hover {
  border-color: var(--green);
}
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--green);
  outline: none;
}

/* ================================================
   UTILITY CLASSES
   ================================================ */
.text-center  { text-align: center; }
.text-green   { color: var(--green); }
.text-terra   { color: var(--terra); }
.bg-alt       { background: var(--bg-alt); }
.bg-green     { background: var(--green); }
.mt-sm        { margin-top: 1rem; }
.mt-md        { margin-top: 2rem; }
.mt-lg        { margin-top: 3rem; }
.mb-sm        { margin-bottom: 1rem; }
.divider      { border: none; border-top: 1px solid var(--border); margin: 2rem 0; }

/* Fade-in animation */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 900px) {
  .hero-section { height: auto; min-height: 0; }
  .hero {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero__content { max-width: 100%; }
  .hero__eyebrow { justify-content: center; }
  .hero__actions { justify-content: center; }
  .hero__scroll  { justify-content: center; }
  .hero__visual  { order: -1; }
  .hero__img-wrap { width: 70%; margin: 0 auto; }
  .hero__badge--tl { left: 0; }
  .hero__badge--br { right: 0; }

  .about-strip   { grid-template-columns: 1fr; }
  .about-strip__img { max-width: 500px; margin: 0 auto; }

  .footer__grid  {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
  .footer__brand { grid-column: 1 / -1; }

  .care-hero__layout { grid-template-columns: 1fr; }
  .care-hero__img { position: static; max-width: 400px; }

  /* Mobile/tablet: reorder so the form sits between the info list and the
     two "Cum comanzi"/"Comenzi Personalizate" sideboxes. gap: 0 because
     with display:contents the info items would get doubled spacing
     (their own margin-bottom PLUS the flex gap). */
  .contact-layout {
    display: flex;
    flex-direction: column;
    gap: 0;
    grid-template-columns: 1fr;
  }
  .contact-layout > .fade-in:first-child { display: contents; }
  .contact-layout > .fade-in:first-child > * { order: 1; }
  .contact-layout > .fade-in:nth-child(2) { order: 2; margin-top: 1.5rem; }
  .contact-layout > .fade-in:first-child > .contact-info__sidebox { order: 3; }
}

@media (max-width: 640px) {
  .nav__links   { display: none; }
  .nav__cta     { display: none; }
  .nav__auth    { display: none; }
  .nav__lang    { display: none; }
  .nav__hamburger { display: flex; }

  /* Default: teaser variant hides the accent picture-in-picture.
     The --full variant (despre page) brings it back below. */
  .about-strip__img-accent { display: none; }
  .about-strip__stats { gap: 1.5rem; flex-wrap: wrap; }

  /* --full variant (despre page): image first with accent staying in its
     natural bottom-right picture-in-picture position; the title tab floats
     at the same bottom level, just to the LEFT of the accent, overlapping
     the lower edge of the image. Body text flows below. */
  .about-strip--full {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
  }
  /* Flatten content so its children become direct flex children of --full */
  .about-strip--full .about-strip__content { display: contents; }
  /* Main image sits first (order 1); undo the ≤900 max-width cap so it
     fills the container width, matching the body text gutter. */
  .about-strip--full .about-strip__img {
    order: 1;
    max-width: none;
    margin: 0;
    position: relative;
  }
  /* Accent picture-in-picture — desktop-style proportional sizing so it
     reads as a prominent PIP, not a thumbnail. */
  .about-strip--full .about-strip__img-accent {
    display: block;
    position: absolute;
    bottom: -1rem;
    right: -.8rem;
    top: auto;
    left: auto;
    width: 38%;
    max-width: 150px;
    height: auto;
    aspect-ratio: 1;
    border-radius: var(--radius);
    border-width: 3px;
    z-index: 3;
  }
  /* Title tab flows FROM the text area INTO the image above it — same
     page background as the text (no separate card), no shadow, rounded
     top corners only, zero bottom margin so it reads as one continuous
     cream shape where the tab is just the top portion sticking up past
     the image bottom. */
  .about-strip--full .about-strip__heading {
    order: 2;
    align-self: flex-start;
    /* Widened to ~65% of container; leaves ~35% clear for the accent on
       the right. Tab bg is flush to the container left edge (no notch),
       while the text inside is indented via padding-left so it sits a
       step to the right of the paragraphs below — as requested. */
    max-width: calc(100% - 35%);
    margin: -3.2rem 0 0 0;
    padding: .8rem 1rem .2rem 1.2rem;
    background: var(--bg);
    border-radius: 0 var(--radius) 0 0;
    box-shadow: none;
    z-index: 2;
    position: relative;
  }
  .about-strip--full .about-strip__heading .eyebrow {
    font-size: .7rem;
    letter-spacing: .12em;
    margin-bottom: .25rem;
  }
  .about-strip--full .about-strip__heading h2 {
    font-size: 1.6rem;
    line-height: 1.1;
    margin: 0;
  }
  /* Body elements below the tab — flow continuously, no visible seam */
  .about-strip--full .about-strip__content > p,
  .about-strip--full .about-strip__content > .about-strip__stats,
  .about-strip--full .about-strip__content > .btn {
    order: 3;
  }
  .about-strip--full .about-strip__content > p:first-of-type {
    margin-top: .8rem;
  }

  /* Mobile TEASER variant (homepage about_strip widget) — side-by-side
     layout with a compact left image stretched to match the overlap card.
     The --full variant (despre-page about_story) keeps the stacked layout
     from the ≤900px rule above and is NOT affected by any rule below. */
  .about-strip--teaser {
    display: flex;
    align-items: stretch;
    gap: 0;
    position: relative;
  }
  .about-strip--teaser .about-strip__img {
    flex: 0 0 42%;
    max-width: none;
    margin: 0;
    z-index: 1;
    display: flex;
  }
  .about-strip--teaser .about-strip__img-main {
    aspect-ratio: auto;
    width: 100%;
    height: 100%;
    min-height: 100%;
  }
  .about-strip--teaser .about-strip__img-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .about-strip--teaser .about-strip__content {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 2;
    background: var(--bg-card, var(--white));
    padding: 1.4rem 1.2rem;
    margin-left: -2rem;
    border-radius: var(--radius);
    box-shadow: 0 6px 20px rgba(42, 33, 24, .10);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  /* Specificity bump so these beat the generic ≤768 rules later. */
  .about-strip--teaser .about-strip__content .eyebrow {
    margin-bottom: .35rem;
    font-size: .65rem;
    letter-spacing: .12em;
  }
  .about-strip--teaser .about-strip__content h2 {
    font-size: 1.1rem;
    line-height: 1.2;
    margin-bottom: .5rem;
  }
  .about-strip--teaser .about-strip__content p {
    font-size: .82rem;
    line-height: 1.5;
    max-width: none;
    margin-bottom: .55rem;
  }
  /* Teaser shows only paragraph 1; full story lives one tap away behind the CTA. */
  .about-strip--teaser .about-strip__content p:not(:first-of-type) { display: none; }
  .about-strip--teaser .about-strip__content p:first-of-type { margin-bottom: .7rem; }
  .about-strip--teaser .about-strip__stats { display: none; }

  /* Teaser CTA: short label swap via font-size:0 + ::before; centered
     horizontally in the card and sized a little smaller. */
  .about-strip--teaser .about-strip__content .btn {
    padding: .38rem .75rem;
    letter-spacing: .06em;
    font-size: 0;
    display: inline-flex;
    align-items: center;
    align-self: center;
    margin-top: auto;
  }
  .about-strip--teaser .about-strip__content .btn::before {
    content: "Citește povestea →";
    font-size: .66rem;
    font-weight: 500;
    letter-spacing: .06em;
  }
  html[lang="en"] .about-strip--teaser .about-strip__content .btn::before {
    content: "Read the story →";
  }

  .footer { padding: 2rem 0 1.5rem; }
  .footer__grid {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 1.2rem;
  }
  .footer__brand { grid-column: 1 / -1; margin-bottom: .5rem; }
  .footer__logo-img { height: 64px !important; max-height: 64px !important; width: auto; }
  .footer__brand p { font-size: .82rem; }
  .footer__social { margin-top: 1rem; }
  .footer__col-title { margin-bottom: .6rem; font-size: .7rem; }
  .footer__links { gap: .25rem; }
  .footer__links a { font-size: .8rem; line-height: 1.4; }
  .footer__legal { flex-direction: row; flex-wrap: wrap; gap: .3rem .8rem; font-size: .78rem; }
  .footer__company { flex-direction: column; gap: .2rem; }
  .footer__bottom { flex-direction: column; text-align: center; gap: .5rem; padding-top: 1rem; }

  .form-row { grid-template-columns: 1fr; }

  .care-stats { grid-template-columns: repeat(3, 1fr); }
}

/* ================================================
   HERO CAROUSEL (legacy — kept for design variant classes)
   Transitions now handled by .hero-carousel [data-slide]
   in the HERO DISPLAY MODES section.
   ================================================ */

/* ---- Slide design variants ---- */
/* All variants keep the classic 2-column grid layout.
   They differ only in the decorative shape behind the image. */

/* ·· Hexagon ·· Sharp geometric honeycomb shape */
.hero-slide--hexagon .hero__blob {
  background: var(--green-pale);
  width: 88%;
  aspect-ratio: 1;
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  border-radius: 0;
  animation: hexSpin 20s linear infinite;
}
.hero-slide--hexagon .hero__visual::before {
  content: '';
  position: absolute;
  width: 98%;
  aspect-ratio: 1;
  clip-path: polygon(50% 3%, 91% 26%, 91% 74%, 50% 97%, 9% 74%, 9% 26%);
  border: 0;
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--green-light);
  opacity: .3;
  z-index: 0;
  animation: hexSpin 20s linear infinite reverse;
}
.hero-slide--hexagon .hero__img-wrap {
  clip-path: polygon(50% 2%, 91% 26%, 91% 74%, 50% 98%, 9% 74%, 9% 26%);
  border-radius: 0;
  width: 78%;
}
.hero-slide--hexagon .hero__img-wrap::after { clip-path: inherit; border-radius: 0; }
.hero-slide--hexagon .hero__badge { border-radius: 4px; }
@keyframes hexSpin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ·· Arch ·· Gothic window / keyhole — tall arch top, flat bottom */
.hero-slide--arch .hero__blob {
  background: var(--terra-pale);
  width: 72%;
  aspect-ratio: 3/4;
  clip-path: ellipse(50% 42% at 50% 42%);
  border-radius: 0;
  animation: none;
}
.hero-slide--arch .hero__visual::before {
  content: '';
  position: absolute;
  width: 80%;
  aspect-ratio: 3/4;
  border: 2px solid var(--terra-light);
  border-radius: 50% 50% 4px 4px;
  opacity: .3;
  z-index: 0;
}
.hero-slide--arch .hero__img-wrap {
  border-radius: 50% 50% 6px 6px;
  width: 68%;
  aspect-ratio: 3/4;
}
.hero-slide--arch .hero__img-wrap::after { border-radius: 50% 50% 6px 6px; }
.hero-slide--arch .hero__badge { border-left: 3px solid var(--terra-light); }

/* ·· Diamond ·· 45° rotated square, sharp and modern */
.hero-slide--diamond .hero__blob {
  background: var(--green-pale);
  width: 65%;
  aspect-ratio: 1;
  border-radius: 0;
  transform: rotate(45deg);
  animation: diamondPulse 5s ease-in-out infinite;
}
.hero-slide--diamond .hero__visual::before {
  content: '';
  position: absolute;
  width: 75%;
  aspect-ratio: 1;
  border: 2px solid var(--green-light);
  border-radius: 0;
  transform: rotate(45deg);
  opacity: .25;
  z-index: 0;
  animation: diamondPulse 5s ease-in-out 1.5s infinite;
}
.hero-slide--diamond .hero__visual::after {
  content: '';
  position: absolute;
  width: 55%;
  aspect-ratio: 1;
  border: 1.5px dashed var(--border);
  border-radius: 0;
  transform: rotate(45deg);
  opacity: .15;
  z-index: 0;
}
.hero-slide--diamond .hero__img-wrap {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  border-radius: 0;
  width: 72%;
  aspect-ratio: 1;
}
.hero-slide--diamond .hero__img-wrap::after { clip-path: inherit; border-radius: 0; }
@keyframes diamondPulse {
  0%, 100% { transform: rotate(45deg) scale(1); }
  50%      { transform: rotate(45deg) scale(1.04); }
}

/* ·· Leaf ·· Botanical leaf silhouette via clip-path */
.hero-slide--leaf .hero__blob {
  background: var(--green-pale);
  width: 85%;
  aspect-ratio: 3/4;
  clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 80% 90%, 50% 100%, 20% 90%, 0% 60%, 10% 20%);
  border-radius: 0;
  animation: breatheLeaf 7s ease-in-out infinite;
}
.hero-slide--leaf .hero__visual::before {
  content: '';
  position: absolute;
  width: 50%;
  height: 100%;
  left: 50%;
  top: 0;
  border-left: 1.5px solid var(--green-light);
  opacity: .2;
  z-index: 0;
  transform: translateX(-50%);
}
.hero-slide--leaf .hero__visual::after {
  content: '';
  position: absolute;
  width: 80%;
  height: 1.5px;
  top: 45%;
  background: linear-gradient(90deg, transparent, var(--green-light) 30%, var(--green-light) 70%, transparent);
  opacity: .15;
  z-index: 0;
  transform: rotate(-15deg);
}
.hero-slide--leaf .hero__img-wrap {
  clip-path: polygon(50% 2%, 88% 21%, 98% 60%, 79% 89%, 50% 98%, 21% 89%, 2% 60%, 12% 21%);
  border-radius: 0;
  width: 76%;
  aspect-ratio: 3/4;
}
.hero-slide--leaf .hero__img-wrap::after { clip-path: inherit; border-radius: 0; }
@keyframes breatheLeaf {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}

/* ·· Frames ·· Stacked offset rectangles creating depth */
.hero-slide--frames .hero__blob {
  background: transparent;
  width: 82%;
  aspect-ratio: 3/4;
  border: 2.5px solid var(--green-light);
  border-radius: 4px;
  transform: translate(10px, -10px);
  animation: none;
}
.hero-slide--frames .hero__visual::before {
  content: '';
  position: absolute;
  width: 82%;
  aspect-ratio: 3/4;
  border: 2px solid var(--terra-light);
  border-radius: 4px;
  opacity: .35;
  z-index: 0;
  transform: translate(-8px, 8px);
}
.hero-slide--frames .hero__visual::after {
  content: '';
  position: absolute;
  width: 82%;
  aspect-ratio: 3/4;
  border: 1px dashed var(--border);
  border-radius: 4px;
  opacity: .2;
  z-index: 0;
  transform: translate(18px, -18px);
}
.hero-slide--frames .hero__img-wrap {
  border-radius: 4px;
  width: 78%;
  aspect-ratio: 3/4;
}
.hero-slide--frames .hero__img-wrap::after { border-radius: 4px; }

/* ·· Wabi ·· Wabi-sabi: imperfect form, gold kintsugi accent lines */
.hero-slide--wabi .hero__blob {
  background: var(--bg-alt);
  width: 86%;
  border-radius: 48% 52% 55% 45% / 52% 44% 56% 48%;
  animation: morphWabi 15s ease-in-out infinite;
  box-shadow: inset 0 0 60px rgba(42,33,24,.04);
}
.hero-slide--wabi .hero__visual::before {
  content: '';
  position: absolute;
  width: 70%;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #C4A24E 30%, #D4B65E 50%, #C4A24E 70%, transparent 100%);
  bottom: 18%;
  left: 15%;
  z-index: 3;
  opacity: .5;
  border-radius: 2px;
  transform: rotate(-8deg);
}
.hero-slide--wabi .hero__visual::after {
  content: '';
  position: absolute;
  width: 40%;
  height: 1.5px;
  background: linear-gradient(90deg, transparent 0%, #C4A24E 40%, transparent 100%);
  top: 22%;
  right: 10%;
  z-index: 3;
  opacity: .35;
  border-radius: 2px;
  transform: rotate(5deg);
}
.hero-slide--wabi .hero__img-wrap {
  border-radius: 48% 52% 45% 55% / 50% 46% 54% 50%;
  width: 78%;
}
.hero-slide--wabi .hero__badge {
  border-left: 2px solid #C4A24E;
}
@keyframes morphWabi {
  0%, 100% { border-radius: 48% 52% 55% 45% / 52% 44% 56% 48%; }
  33%      { border-radius: 52% 48% 45% 55% / 44% 52% 48% 56%; }
  66%      { border-radius: 55% 45% 52% 48% / 56% 48% 44% 52%; }
}

/* ================================================
   HERO DISPLAY MODES (modular architecture)
   Each mode: .hero-mode-{name} on <section>
   Slides: [data-slide] with .active toggled by JS
   Nav: .hero-nav with .hero-nav__btn / .hero-nav__dot
   ================================================ */

/* ── Carousel nav (shared across all modes) ── */
.hero-nav {
  display: flex; align-items: center; justify-content: center;
  gap: 1rem; margin-top: 1.5rem;
}
.hero-nav__btn {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--white);
  font-size: 1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition), border-color var(--transition);
}
.hero-nav__btn:hover { background: var(--green); border-color: var(--green); color: var(--white); }
.hero-nav__dots { display: flex; gap: .5rem; }
.hero-nav__dot {
  width: 8px; height: 8px; border-radius: 50%; border: none;
  background: var(--border); cursor: pointer; padding: 0;
  transition: background var(--transition), transform var(--transition);
}
.hero-nav__dot.active { background: var(--green); transform: scale(1.3); }

/* ── Shared slide transition base ── */
.hero-carousel { position: relative; }
.hero-carousel [data-slide] {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .6s ease, visibility .6s ease;
  z-index: 0;
}
.hero-carousel [data-slide].active {
  position: relative;
  opacity: 1; visibility: visible;
  z-index: 1;
}

/* ── Fallback (no slides) ── */
.hero-fallback {
  text-align: center;
  padding: clamp(3rem, 8vw, 6rem) 0;
}
.hero-fallback h1 { margin-bottom: 1rem; }
.hero-fallback p { color: var(--text-soft); margin-bottom: 2rem; font-size: 1.05rem; }

/* ════════════════════════════════════════════════
   MODE: Classic (blob + badges + 2-col grid)
   Template: hero-modes/classic.php
   ════════════════════════════════════════════════ */
.hero-mode-classic .hm-classic__slide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  padding: clamp(1.5rem, 3vh, 3.5rem) 0;
}
@media (max-width: 900px) {
  .hero-mode-classic .hm-classic__slide {
    grid-template-columns: 1fr; text-align: center;
  }
  .hero-mode-classic .hero__content { max-width: 100%; }
  .hero-mode-classic .hero__eyebrow { justify-content: center; }
  .hero-mode-classic .hero__actions { justify-content: center; }
  .hero-mode-classic .hero__visual { order: -1; }
  .hero-mode-classic .hero__img-wrap { width: 70%; margin: 0 auto; }
}

/* ════════════════════════════════════════════════
   MODE: Cinematic (fullscreen bg, centered text)
   Template: hero-modes/cinematic.php
   ════════════════════════════════════════════════ */
.hero-mode-cinematic .hm-cinematic__slide {
  display: flex; align-items: center; justify-content: center;
  min-height: calc(100vh - 112px);
}
.hm-cinematic__bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
}
.hm-cinematic__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.55));
}
.hm-cinematic__content {
  position: relative; z-index: 2;
  text-align: center; color: #fff;
  max-width: 720px; margin: 0 auto;
  padding: 2rem 1rem;
}
.hm-cinematic__eyebrow {
  font-size: .75rem; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--green-pale); margin-bottom: 1rem;
}
.hm-cinematic__title {
  font-family: var(--font-display); color: #fff;
  font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.15;
  margin-bottom: 1rem;
}
.hm-cinematic__desc {
  font-size: 1.1rem; color: rgba(255,255,255,.8);
  margin-bottom: 2rem; line-height: 1.7;
  max-width: 560px; margin-left: auto; margin-right: auto;
}
.hm-cinematic__actions { display: flex; justify-content: center; gap: 1rem; }
/* Nav override for dark bg */
.hero-mode-cinematic .hero-nav__btn {
  border-color: rgba(255,255,255,.3); color: #fff; background: rgba(255,255,255,.1);
}
.hero-mode-cinematic .hero-nav__btn:hover { background: rgba(255,255,255,.25); border-color: rgba(255,255,255,.5); }
.hero-mode-cinematic .hero-nav__dot { background: rgba(255,255,255,.3); }
.hero-mode-cinematic .hero-nav__dot.active { background: #fff; }

/* ════════════════════════════════════════════════
   MODE: Editorial (huge text + accent image)
   Template: hero-modes/editorial.php
   ════════════════════════════════════════════════ */
.hero-mode-editorial .hm-editorial__slide {
  display: grid; grid-template-columns: 1.5fr 1fr;
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
  padding: clamp(2rem, 4vh, 4rem) 0;
}
.hm-editorial__eyebrow {
  font-size: .75rem; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--green); margin-bottom: 1rem;
  display: inline-flex; align-items: center; gap: .5rem;
}
.hm-editorial__eyebrow::before {
  content: ''; display: block; width: 28px; height: 1.5px; background: var(--green);
}
.hm-editorial__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  line-height: 1.08; letter-spacing: -.02em; margin-bottom: 1rem;
}
.hm-editorial__desc {
  font-size: 1.05rem; color: var(--text-soft);
  margin-bottom: 2rem; line-height: 1.7; max-width: 45ch;
}
.hm-editorial__actions { display: flex; gap: 1rem; }
.hm-editorial__img {
  border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 3/4; max-height: 420px;
}
.hm-editorial__img img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .hero-mode-editorial .hm-editorial__slide { grid-template-columns: 1fr; text-align: center; }
  .hm-editorial__eyebrow { justify-content: center; }
  .hm-editorial__actions { justify-content: center; }
  .hm-editorial__desc { margin-left: auto; margin-right: auto; }
  .hm-editorial__img { max-height: 280px; aspect-ratio: 16/9; max-width: 400px; margin: 0 auto; }
}

/* ════════════════════════════════════════════════
   MODE: Split (50/50, full-bleed image)
   Template: hero-modes/split.php
   ════════════════════════════════════════════════ */
.hero-mode-split { overflow: hidden; }
.hero-mode-split .hero-carousel { overflow: hidden; }
.hero-mode-split .hm-split__slide {
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: stretch; min-height: calc(100vh - 112px);
}
.hm-split__text {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(2rem, 5vw, 5rem);
}
.hm-split__eyebrow {
  font-size: .75rem; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--green); margin-bottom: 1rem;
  display: inline-flex; align-items: center; gap: .5rem;
}
.hm-split__eyebrow::before {
  content: ''; display: block; width: 28px; height: 1.5px; background: var(--green);
}
.hm-split__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 3rem); margin-bottom: 1rem;
}
.hm-split__desc {
  color: var(--text-soft); margin-bottom: 1.5rem;
  font-size: 1.05rem; line-height: 1.7;
}
.hm-split__actions { display: flex; gap: 1rem; }
.hm-split__img { overflow: hidden; }
.hm-split__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) {
  .hero-mode-split .hm-split__slide { grid-template-columns: 1fr; min-height: auto; }
  .hm-split__img { max-height: 300px; }
}

/* ════════════════════════════════════════════════
   MODE: Minimal (text only, animated accent)
   Template: hero-modes/minimal.php
   ════════════════════════════════════════════════ */
.hero-mode-minimal .hm-minimal__slide {
  display: flex; align-items: center; justify-content: center;
  text-align: center; min-height: calc(100vh - 112px);
}
.hm-minimal__content { max-width: 700px; margin: 0 auto; padding: 2rem 1rem; }
.hm-minimal__eyebrow {
  font-size: .75rem; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--green); margin-bottom: 1.5rem;
  display: flex; justify-content: center; align-items: center; gap: .5rem;
}
.hm-minimal__eyebrow::before, .hm-minimal__eyebrow::after {
  content: ''; display: block; width: 20px; height: 1.5px; background: var(--green);
}
.hm-minimal__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1.1; letter-spacing: -.02em; margin-bottom: 0;
}
.hm-minimal__line {
  width: 60px; height: 2px; background: var(--green);
  margin: 1.2rem auto 1.5rem;
}
.hm-minimal__desc {
  font-size: 1.15rem; color: var(--text-soft);
  margin-bottom: 2rem; line-height: 1.8;
  max-width: 520px; margin-left: auto; margin-right: auto;
}
.hm-minimal__actions { display: flex; justify-content: center; gap: 1rem; }

/* ════════════════════════════════════════════════
   MODE: Showcase (image dominant + overlapping card)
   Template: hero-modes/showcase.php
   ════════════════════════════════════════════════ */
.hero-mode-showcase { height: auto; min-height: 0; overflow: visible; }
.hero-mode-showcase .hm-showcase__slide {
  position: relative; padding-bottom: 3rem;
}
.hm-showcase__img {
  border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 16/9; max-height: 500px;
}
.hm-showcase__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hm-showcase__card {
  background: var(--bg-card); border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: var(--shadow-hover);
  max-width: 480px;
  margin-top: -3rem;
  position: relative; z-index: 2;
  margin-left: clamp(1rem, 3vw, 3rem);
}
.hm-showcase__eyebrow {
  font-size: .75rem; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--green); margin-bottom: .8rem;
  display: inline-flex; align-items: center; gap: .5rem;
}
.hm-showcase__eyebrow::before {
  content: ''; display: block; width: 20px; height: 1.5px; background: var(--green);
}
.hm-showcase__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.2rem); margin-bottom: .6rem;
}
.hm-showcase__desc {
  color: var(--text-soft); margin-bottom: 1rem;
  font-size: .95rem; line-height: 1.7;
}
@media (max-width: 900px) {
  .hm-showcase__card { max-width: 100%; margin-left: 0; margin-top: -1.5rem; }
}

/* ================================================
   PRODUS (produs.php) — Product detail page
   ================================================ */

.produs-section { padding: clamp(2.5rem, 6vw, 5rem) 0; }

.produs-back {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 2.5rem;
  transition: color var(--transition), gap var(--transition);
}
.produs-back:hover { color: var(--green); gap: .6rem; }

.produs-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
  margin-bottom: clamp(3rem, 7vw, 6rem);
}
@media (max-width: 700px) {
  .produs-layout { grid-template-columns: 1fr; }
  /* Gallery is sticky on mobile — details scroll over it, so give details
     an opaque background or text would overlap the image behind it. */
  .produs-details {
    position: relative;
    z-index: 1;
    background: var(--bg);
    padding-top: 1.2rem;
  }
}

.produs-gallery {
  position: sticky;
  top: 90px;
}
.produs-img-wrap {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4/5;
  background: var(--bg-alt);
}
.produs-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.produs-img-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 5rem; background: var(--green-pale);
}

.produs-care-link {
  position: absolute;
  bottom: 1rem; right: 1rem;
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--white);
  padding: .5rem .85rem;
  border-radius: 100px;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--text-soft);
  box-shadow: var(--shadow);
  transition: color var(--transition), background var(--transition);
}
.produs-care-link:hover { color: var(--green); background: var(--green-pale); }

.produs-cat { margin-bottom: 1rem; }

.produs-title {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 400;
  margin-bottom: .75rem;
  line-height: 1.1;
}

.produs-price {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 500;
  color: var(--green);
  margin-bottom: 1.5rem;
  line-height: 1;
}

.produs-desc {
  font-size: 1rem;
  color: var(--text-soft);
  line-height: 1.8;
  margin-bottom: 1.5rem;
  max-width: 50ch;
}

.produs-handmade {
  background: var(--green-pale);
  border-radius: var(--radius-sm);
  padding: .8rem 1rem;
  font-size: .85rem;
  color: var(--green);
  margin-bottom: 1.75rem;
}

/* Variant picker */
.produs-variants { margin: 1rem 0 1.2rem; }
.produs-variants__label { font-size: .82rem; color: var(--text-soft); margin-bottom: .4rem; }
.produs-variants__label strong { color: var(--text); }
.produs-variants__options { display: flex; flex-wrap: wrap; gap: .4rem; }
.produs-variant-btn {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .45rem .8rem;
  font-size: .85rem;
  cursor: pointer;
  font-family: inherit;
  color: var(--text);
  transition: all var(--transition);
}
.produs-variant-btn:hover:not(:disabled) { border-color: var(--green); color: var(--green); }
.produs-variant-btn.is-active { background: var(--green); color: #fff; border-color: var(--green); }
.produs-variant-btn.is-out, .produs-variant-btn:disabled {
  opacity: .5; cursor: not-allowed; text-decoration: line-through;
}

/* Action buttons — always equal height, side by side */
.produs-actions {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.produs-add-btn {
  flex: 1;
  justify-content: center;
  min-width: 160px;
}

.produs-meta { border-top: 1px solid var(--border); padding-top: 1.2rem; }
.produs-meta__row {
  display: flex;
  justify-content: space-between;
  padding: .5rem 0;
  border-bottom: 1px solid var(--border);
  font-size: .88rem;
}
.produs-meta__row:last-child { border-bottom: none; }
.produs-meta__label { color: var(--text-muted); }
.produs-meta__value { font-weight: 500; color: var(--text-soft); }
.produs-meta__value a { color: var(--green); }

.produs-related { margin-top: clamp(3rem, 7vw, 5rem); }
.produs-related__title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 400;
  margin-bottom: 1.75rem;
}

/* ================================================
   COȘ (cos.php)
   ================================================ */

.cos-layout {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 2rem;
  align-items: start;
}
@media (max-width: 860px) { .cos-layout { grid-template-columns: 1fr; } }

.cos-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow);
  margin-bottom: 1.25rem;
}
.cos-card h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  margin-bottom: 1.2rem;
}

/* Cart items */
.cos-item {
  display: flex;
  gap: 1rem;
  padding: .9rem 0;
  border-bottom: 1px solid var(--border);
  align-items: center;
}
.cos-item:last-child { border-bottom: none; }

.cos-item__img {
  width: 64px; height: 64px;
  border-radius: var(--radius-sm);
  background: var(--green-pale);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  overflow: hidden;
}
.cos-item__img img { width: 100%; height: 100%; object-fit: cover; }

.cos-item__info { flex: 1; min-width: 0; }
.cos-item__name { font-weight: 500; font-size: .95rem; margin-bottom: .2rem; }
.cos-item__price { font-size: .85rem; color: var(--text-muted); }

.cos-item__qty {
  display: flex; align-items: center; gap: .5rem; margin-top: .4rem;
}
.cos-item__qty button {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg);
  cursor: pointer; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--transition), color var(--transition);
}
.cos-item__qty button:hover { border-color: var(--green); color: var(--green); }
.cos-item__qty span { min-width: 24px; text-align: center; font-size: .9rem; }

.cos-item__remove {
  margin-left: auto;
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 1rem; padding: .25rem;
  transition: color var(--transition);
}
.cos-item__remove:hover { color: var(--terra); }

/* Order summary */
.cos-summary-row {
  display: flex; justify-content: space-between;
  font-size: .88rem; padding: .3rem 0; color: var(--text-soft);
}
.cos-summary-row--total {
  font-size: 1.05rem; font-weight: 600; color: var(--text);
  border-top: 1px solid var(--border);
  margin-top: .5rem; padding-top: .65rem;
}

/* Empty state */
.cos-empty {
  text-align: center; padding: 2.5rem 1rem; color: var(--text-muted);
}
.cos-empty__icon { font-size: 2.5rem; margin-bottom: .75rem; }
.cos-empty a { color: var(--green); }

/* Auth tabs */
.cos-auth-intro { font-size: .9rem; color: var(--text-muted); margin-bottom: 1.2rem; }
.cos-auth-tabs {
  display: flex; border-bottom: 2px solid var(--border); margin-bottom: 1.5rem; gap: .5rem;
}
.cos-auth-tab {
  padding: .55rem 1.1rem; font-size: .9rem; cursor: pointer;
  border: none; background: none; color: var(--text-muted);
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  font-family: var(--font-body); transition: color var(--transition);
}
.cos-auth-tab.active { color: var(--green); border-bottom-color: var(--green); font-weight: 500; }
.cos-auth-panel { display: none; }
.cos-auth-panel.active { display: block; }

/* Checkout specifics */
.cos-handmade-note {
  background: var(--green-pale);
  border-radius: var(--radius-sm);
  padding: .85rem 1rem;
  font-size: .85rem; color: var(--green);
  margin-bottom: 1.2rem;
}
.cos-submit-btn {
  width: 100%; justify-content: center;
  font-size: 1rem; padding: .9rem;
}
.cos-payment-note {
  text-align: center; font-size: .78rem;
  color: var(--text-muted); margin-top: .6rem;
}
.req { color: var(--terra); }

/* Flash messages (public pages) */
.flash-ok {
  background: #e8f5e9; border: 1px solid #a5d6a7; color: #1b5e20;
  padding: .75rem 1rem; border-radius: var(--radius-sm);
  margin-bottom: 1rem; font-size: .88rem;
}
.flash-err {
  background: #fce4e4; border: 1px solid #ef9a9a; color: #c62828;
  padding: .75rem 1rem; border-radius: var(--radius-sm);
  margin-bottom: 1rem; font-size: .88rem;
}

/* ================================================
   CONT (cont.php) — My account page
   ================================================ */

.cont-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 2rem;
  align-items: start;
}
@media (max-width: 700px) { .cont-grid { grid-template-columns: 1fr; } }

.cont-sidebar {
  background: var(--white);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
}
.cont-sidebar .cont-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--green-pale);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; margin-bottom: .9rem;
}
.cont-sidebar .cont-name  { font-family: var(--font-display); font-size: 1.2rem; }
.cont-sidebar .cont-email { font-size: .8rem; color: var(--text-muted); margin-bottom: 1.1rem; }
.cont-sidebar a { display: block; padding: .45rem 0; font-size: .88rem; color: var(--text-soft); transition: color var(--transition); }
.cont-sidebar a:hover { color: var(--green); }

.cont-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
  margin-bottom: 1.2rem;
}
.cont-card h3 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 400; margin-bottom: 1rem; }

.order-block {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: .9rem;
  overflow: hidden;
}
.order-block__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: .7rem 1rem; background: var(--bg-alt);
  flex-wrap: wrap; gap: .4rem;
}
.order-block__body { padding: .75rem 1rem; }

.order-item-row {
  display: flex; justify-content: space-between;
  font-size: .85rem; padding: .2rem 0; color: var(--text-soft);
}
.order-total-row {
  display: flex; justify-content: space-between;
  font-size: .9rem; font-weight: 600;
  border-top: 1px solid var(--border);
  margin-top: .4rem; padding-top: .5rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
@media (max-width: 540px) { .form-row { grid-template-columns: 1fr; } }

/* ============================================================
   SITE SETTINGS EXTENSIONS
   New elements added by the settings system. Append-only.
   ============================================================ */

/* --- Sticky header (defined in nav section above) --- */

/* --- Announcement banner --- */
.announcement-banner {
  color: #fff;
  font-size: .88rem;
  padding: .55rem 0;
  text-align: center;
  position: relative;
  z-index: 1001;
}
.announcement-banner .container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.announcement-banner__text {
  flex: 1;
  text-align: center;
}
.announcement-banner__close {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  opacity: .7;
  transition: opacity var(--transition);
  padding: 0 .3rem;
  line-height: 1;
}
.announcement-banner__close:hover { opacity: 1; }

/* --- Cookie consent bar --- */
.cookie-consent {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--text);
  color: var(--bg);
  padding: .9rem 0;
  z-index: 9999;
  box-shadow: 0 -4px 20px rgba(0,0,0,.12);
}
.cookie-consent .container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.cookie-consent__text {
  font-size: .85rem;
  line-height: 1.5;
  flex: 1;
  min-width: 200px;
}
.cookie-consent__btn {
  flex-shrink: 0;
}

/* --- Dark mode data-theme (minimal: just token overrides) --- */
html[data-theme="dark"] {
  --bg:         #1A1612;
  --bg-alt:     #231E19;
  --bg-card:    #2A2420;
  --text:       #E8E0D6;
  --text-soft:  #B8ADA2;
  --text-muted: #8A7E72;
  --border:     #3D3530;
  --white:      #2A2420;
  --shadow:     0 4px 24px rgba(0,0,0,.25);
  --shadow-hover: 0 8px 40px rgba(0,0,0,.35);
}

/* --- Admin settings tabs --- */
.settings-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  border-bottom: 2px solid var(--border);
  margin-bottom: 1.5rem;
}
.settings-tab {
  padding: .55rem 1rem;
  font-size: .82rem;
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
  white-space: nowrap;
}
.settings-tab:hover { color: var(--text-soft); }
.settings-tab.active {
  color: var(--green);
  border-bottom-color: var(--green);
}
.settings-panel { display: none; }
.settings-panel.active { display: block; }

/* --- Nav link manager / reorder rows --- */
.nav-link-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  margin-bottom: .4rem;
}
.nav-link-row input[type="text"] {
  flex: 1;
  min-width: 0;
  padding: .4rem .6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .85rem;
  font-family: var(--font-body);
}
.reorder-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .2rem .5rem;
  cursor: pointer;
  font-size: .75rem;
  color: var(--text-soft);
}
.reorder-btn:hover { background: var(--bg-alt); }

/* ================================================
   PRODUCT IMAGE THUMBS — admin multi-image manager
   ================================================ */
.prod-img-thumb {
  position: relative;
  width: 90px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border);
  overflow: hidden;
  background: var(--green-pale);
  flex-shrink: 0;
}
.prod-img-thumb--primary { border-color: var(--green); }
.prod-img-thumb img {
  width: 90px;
  height: 90px;
  object-fit: cover;
  display: block;
}
.prod-img-thumb__badge {
  position: absolute;
  top: 3px; left: 3px;
  background: var(--green);
  color: #fff;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .05em;
  padding: .1rem .35rem;
  border-radius: 3px;
  pointer-events: none;
}
.prod-img-thumb__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .15rem;
  padding: .3rem .35rem;
  background: var(--white);
  font-size: .72rem;
}
.prod-img-thumb__controls label { cursor: pointer; display: flex; align-items: center; gap: .1rem; }

/* ================================================
   CHAR COUNTER — SEO fields
   ================================================ */
.char-counter {
  font-size: .7rem;
  color: var(--text-muted);
  font-weight: 400;
  float: right;
  margin-left: .5rem;
  text-transform: none;
  letter-spacing: 0;
}

/* ================================================
   SALE PRICE & STOCK — public product pages
   ================================================ */
.price-sale    { color: var(--terra); }
.price-original {
  text-decoration: line-through;
  color: var(--text-muted);
  font-size: .85em;
  margin-left: .5rem;
}
.stock-info  { font-size: .85rem; color: var(--text-soft); margin-top: .3rem; }
.stock-empty { color: var(--terra); }

/* ================================================
   PRODUCT IMAGE GALLERY — public product page
   ================================================ */
.produs-thumbs {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: .75rem;
}
.produs-thumb-btn {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 2px solid var(--border);
  cursor: pointer;
  padding: 0;
  background: var(--bg-alt);
  transition: border-color var(--transition);
  flex-shrink: 0;
}
.produs-thumb-btn--active { border-color: var(--green); }
.produs-thumb-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* =============================================
   LIGHTBOX
   ============================================= */
.lb-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 92vw;
  max-height: 92vh;
}
.lb-wrap img {
  max-width: 88vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: var(--radius);
  display: block;
  box-shadow: 0 8px 40px rgba(0,0,0,.6);
}
.lb-close {
  position: absolute;
  top: -2.8rem;
  right: 0;
  background: none;
  border: none;
  color: #fff;
  font-size: 2.2rem;
  line-height: 1;
  cursor: pointer;
  opacity: .85;
  padding: 0 .3rem;
}
.lb-close:hover { opacity: 1; }
.lb-prev, .lb-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,.45);
  border: none;
  color: #fff;
  font-size: 2.8rem;
  line-height: 1;
  cursor: pointer;
  padding: .2rem .55rem;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}
.lb-prev:hover, .lb-next:hover { background: rgba(0,0,0,.7); }
.lb-prev { left: -4rem; }
.lb-next { right: -4rem; }
@media (max-width: 640px) {
  .lb-prev { left: -2.5rem; font-size: 2rem; padding: .15rem .4rem; }
  .lb-next { right: -2.5rem; font-size: 2rem; padding: .15rem .4rem; }
  .lb-wrap img { max-width: 94vw; max-height: 80vh; }
}

/* --- Wishlist heart button on product cards --- */
.wishlist-heart {
  position: absolute; top: .6rem; right: .6rem; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.85); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); transition: color .2s, background .2s, transform .15s;
  backdrop-filter: blur(4px);
}
.wishlist-heart:hover { color: #e53935; background: rgba(255,255,255,.95); transform: scale(1.1); }
.wishlist-heart.active { color: #e53935; }
.wishlist-heart.active svg { fill: #e53935; }

/* --- Nav: wishlist link + account dropdown --- */
.nav__wishlist {
  position: relative; display: flex; align-items: center;
  color: var(--text-soft); transition: color .15s;
}
.nav__wishlist:hover { color: #e53935; }
.wishlist-badge {
  position: absolute; top: -6px; right: -8px;
  background: #e53935; color: #fff; font-size: .6rem; font-weight: 600;
  min-width: 16px; height: 16px; line-height: 16px; text-align: center;
  border-radius: 50%; padding: 0 3px;
}
.nav__account-wrap { position: relative; }
.nav__account-btn { cursor: pointer; background: none; border: none; font-family: var(--font-body); }
.nav__account-dropdown {
  display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 200;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); min-width: 180px; overflow: hidden;
}
.nav__account-wrap.open .nav__account-dropdown { display: block; }
.nav__account-dropdown a {
  display: block; padding: .55rem 1rem; font-size: .85rem; color: var(--text);
  transition: background .1s; border-bottom: 1px solid var(--border);
}
.nav__account-dropdown a:last-child { border-bottom: none; }
.nav__account-dropdown a:hover { background: var(--bg-alt); }

/* ============================================
   MOBILE OPTIMIZATIONS — added 2026-04-11
   All rules are max-width: 768px
   ============================================ */
@media (max-width: 768px) {

  /* --- 1. Shop page: 2-column product grid --- */
  .products__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
  }
  /* Mobile product cards: tighter typography so the image dominates.
     The base card already renders price-left / cart-icon-right via the
     shared grid body + icon-only button; only size tweaks needed here.
     Explicitly neutralizes the admin-driven desktop vars (italic,
     padding, cart-button size) so mobile stays compact regardless of
     Setari → Magazin settings. */
  .product-card__body {
    gap: .15rem .5rem;
    padding: .6rem .7rem .7rem;
  }
  .product-card__name {
    font-size: 1.05rem;
    font-style: normal;
    margin-bottom: 0;
    padding-bottom: 0;
  }
  .product-card__desc {
    font-size: .72rem;
    font-style: normal;
    margin-bottom: 0;
    padding-bottom: 0;
    -webkit-line-clamp: 1;
  }
  .product-card__price {
    font-size: 1.2rem;
    font-style: normal;
    padding: 0;
  }
  .product-card__footer {
    padding: 0;
  }
  .product-card__add {
    width: 34px;
    height: 34px;
    background-size: 18px 18px;
  }
  .product-card__add:hover {
    transform: none;
    box-shadow: 0 4px 12px rgba(61,107,71,.35);
  }
  .product-card__qr {
    width: 26px; height: 26px;
    bottom: .5rem; left: .5rem;
  }
  .product-card__qr svg {
    width: 14px; height: 14px;
  }

  /* --- 2. Wishlist heart: overlay on image, top-right --- */
  .wishlist-heart {
    top: .4rem; right: .4rem;
    width: 30px; height: 30px;
  }
  .wishlist-heart svg {
    width: 16px; height: 16px;
  }

  /* --- 3. Filter pills: horizontal scroll --- */
  .products__filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    padding-bottom: .25rem;
    margin-bottom: 1.5rem;
  }
  .products__filters::-webkit-scrollbar {
    display: none;
  }
  .filter-btn {
    flex-shrink: 0;
    padding: .4rem 1.1rem;
    font-size: .75rem;
  }

  /* --- 4. Care guides: compact cards --- */
  .care-grid {
    gap: .75rem;
  }
  .care-card {
    padding: 1.2rem;
    gap: .6rem;
  }
  .care-card__icon {
    width: 40px; height: 40px;
    font-size: 1.2rem;
  }
  .care-card__title {
    font-size: 1.1rem;
  }
  .care-card__desc {
    font-size: .8rem;
  }

  /* --- 5. Contact page: tighter info items --- */
  .contact-info__item {
    gap: .6rem;
    margin-bottom: 1rem;
  }
  .contact-info__icon {
    width: 34px; height: 34px;
    font-size: .9rem;
  }
  .contact-info__label {
    font-size: .68rem;
  }
  .contact-info__value {
    font-size: .85rem;
  }

  /* --- 6. Global: reduce section vertical padding --- */
  section {
    padding: clamp(1.8rem, 5vw, 3.5rem) 0;
  }

  /* --- 7. Collection/feature cards: compact --- */
  .collection-card__body {
    padding: 1rem;
  }
  .collection-card__icon {
    font-size: 1.4rem;
    margin-bottom: .3rem;
  }
  .collection-card__name {
    font-size: 1.1rem;
  }

}

/* ============================================
   MOBILE OPTIMIZATIONS — Part 2 (2026-04-11)
   Collections, Testimonials carousel, Ingrijire,
   Despre, Contact — max-width: 768px
   ============================================ */
@media (max-width: 768px) {

  /* --- Collections: tighter card content --- */
  .collections .collection-card__body {
    padding: .8rem;
  }
  .collections .collection-card__icon {
    font-size: 1.3rem;
    margin-bottom: .15rem;
  }
  .collections .collection-card__name {
    font-size: .95rem !important;
  }
  .collections .collection-card__count {
    font-size: .75rem !important;
  }

  /* --- Testimonials: native scroll-snap peek carousel (JS translate off) --- */
  .tc-carousel {
    overflow: hidden;
    padding-bottom: 2rem;
  }
  .tc-track {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    transform: none !important;
    transition: none;
    gap: .6rem;
  }
  .tc-track::-webkit-scrollbar { display: none; }
  .tc-slide {
    flex: 0 0 85vw;
    max-width: 85vw;
    padding: 0;
    scroll-snap-align: center;
  }
  /* Margin trick lets the browser center the edge slides with peek room */
  .tc-slide:first-child { margin-left: 7.5vw; }
  .tc-slide:last-child  { margin-right: 7.5vw; }
  /* Cards stay equal-height (tallest in set) but text is line-clamped so
     "tallest" can't balloon. This gives a uniform stack regardless of how
     long any individual testimonial is. */
  .tc-slide .testimonial-card__text {
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .tc-btn { display: none !important; }
  .testimonial-card {
    padding: 1.2rem;
    border-radius: var(--tc-radius, 12px);
  }
  .testimonial-card__text {
    font-size: .95rem;
    margin-bottom: .8rem;
  }
  .testimonial-card__stars {
    font-size: .85rem;
    margin-bottom: .5rem;
  }
  .testimonial-card__avatar {
    width: 34px; height: 34px;
    font-size: .95rem;
  }
  .testimonial-card__name {
    font-size: .82rem;
  }

  /* --- Ingrijire index: care grid 2-col --- */
  .care-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: .6rem;
  }
  .care-card {
    padding: 1rem;
    gap: .5rem;
  }
  .care-card__icon {
    width: 36px; height: 36px;
    font-size: 1.1rem;
  }
  .care-card__title {
    font-size: .95rem;
  }
  .care-card__desc {
    font-size: .75rem;
  }
  .care-card__link {
    font-size: .72rem;
  }

  /* --- Ingrijire detail pages --- */
  .care-hero {
    padding: 1.5rem 0 1rem;
  }
  .care-hero__back {
    margin-bottom: 1rem;
  }
  .care-hero__img {
    max-width: 100%;
    aspect-ratio: 4/3;
  }
  .care-stats {
    padding: 1rem;
    gap: .6rem;
  }
  .care-stat__icon {
    font-size: 1.2rem;
  }
  .care-stat__value {
    font-size: .95rem;
  }
  .care-section-block h3 {
    font-size: 1.1rem;
    gap: .4rem;
  }
  .care-section-block h3 .icon {
    width: 28px; height: 28px;
    font-size: .8rem;
  }
  .care-section-block p,
  .care-section-block li {
    font-size: .88rem;
  }

  /* Page-header — sizes are driven by --ph-* CSS vars (admin-controlled via Setari → Aspect → Aspect pagini).
     The vars themselves switch at max-width:768px in the <style> emitted by _nav.php, so we only override
     margins + decoration widths here; size rules would be redundant. */
  .page-header .eyebrow {
    margin-bottom: .4rem;
  }
  .page-header .eyebrow::before,
  .page-header .eyebrow::after {
    width: 16px;
  }
  .page-header h1 {
    margin-bottom: .6rem;
  }
  .about-strip__content h2 {
    font-size: 1.5rem;
  }
  .about-strip__content p {
    font-size: .9rem;
  }
  .about-strip__stats {
    gap: 1.2rem;
    margin: 1.2rem 0;
  }
  .stat__num {
    font-size: 1.6rem;
  }
  .stat__label {
    font-size: .72rem;
  }
  .values-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: .6rem;
  }
  .value-card {
    padding: 1rem;
  }
  .value-card__icon {
    font-size: 1.3rem;
    margin-bottom: .4rem;
  }
  .value-card h3 {
    font-size: .95rem;
  }
  .value-card p {
    font-size: .78rem;
  }

  /* --- Contact page: tighter form + layout --- */
  .contact-layout h2 {
    font-size: 1.4rem;
    margin-bottom: 1.2rem !important;
  }
  .contact-form {
    padding: 1.2rem;
  }

  /* --- CTA banner: compact --- */
  .cta-banner {
    padding: 1.5rem 1.2rem;
  }
  .cta-banner__icon {
    font-size: 1.8rem;
    margin-bottom: .6rem;
  }
  .cta-banner h2 {
    font-size: 1.3rem;
  }
  .cta-banner p {
    font-size: .88rem;
    margin-bottom: 1.2rem;
  }

}

/* ============================================================
   Hero Carousel v2 (rebuild, 2026-04)
   BEM: .hero-carousel, .hero-carousel__*, .hero-carousel--*
   Transition duration driven by --hc-transition-duration
   Overlay opacity driven by --hc-overlay-opacity
   Max height driven by --hc-max-height
   ============================================================ */

/* --- Wrapper + layering --- */
/* Scoped to [data-hero-carousel] to avoid colliding with the legacy
   .hero-carousel div used by the old hero widget pre-migration. */
[data-hero-carousel] {
  position: relative;
  overflow: hidden;
  height: var(--hc-height-desktop, 75vh);
  min-height: 420px;
}
[data-hero-carousel] .container {
  max-width: var(--hc-content-max, var(--max-width, 1200px));
}
@media (max-width: 640px) {
  [data-hero-carousel] {
    height: var(--hc-height-mobile, 60vh);
    min-height: 380px;
  }
}
[data-hero-carousel][data-show-dots="0"]   .hero-carousel__dots { display: none; }
[data-hero-carousel][data-show-arrows="0"] .hero-carousel__nav  { display: none; }

/* --- Admin sticky preview pane --- */
.hc-preview-wrap {
  position: sticky;
  top: var(--topbar, 56px);
  z-index: 30;
  background: var(--bg-alt);
  height: 360px;
  overflow: hidden;
  border-bottom: 2px solid var(--border);
  margin: -2rem -2rem 1.5rem -2rem;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
}
.hc-preview-inner {
  transform: scale(0.5);
  transform-origin: top left;
  width: 200%;
  height: 200%;
  pointer-events: auto;
}
.hc-preview-bar {
  position: absolute;
  top: .5rem;
  right: .8rem;
  z-index: 5;
  display: flex;
  gap: .3rem;
  background: rgba(255,255,255,.92);
  padding: .25rem;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.hc-preview-bar button {
  background: transparent;
  border: 1px solid transparent;
  padding: .25rem .55rem;
  font-size: .75rem;
  color: var(--text-soft);
  cursor: pointer;
  border-radius: 4px;
}
.hc-preview-bar button.is-active { background: var(--green); color: #fff; }
.hc-preview-badge {
  position: absolute;
  top: .55rem;
  left: .8rem;
  z-index: 5;
  background: var(--green);
  color: #fff;
  font-size: .65rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .2rem .5rem;
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.hc-preview-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-muted);
  font-size: .9rem;
}
@media (max-width: 900px) {
  .hc-preview-wrap { height: 280px; margin: -1rem -1rem 1rem -1rem; }
  .hc-preview-inner { transform: scale(0.4); width: 250%; height: 250%; }
}
.hero-carousel__track {
  position: relative;
  height: 100%;
}
.hero-carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--hc-transition-duration, 600ms) ease,
              visibility var(--hc-transition-duration, 600ms) ease,
              transform var(--hc-transition-duration, 600ms) ease;
  pointer-events: none;
}
.hero-carousel__slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
}

/* View wrappers: one per slide per breakpoint. Only the matching breakpoint's view is shown. */
.hero-carousel__view {
  position: absolute;
  inset: 0;
}
.hero-carousel__view--desktop { display: block; }
.hero-carousel__view--mobile  { display: none; }
@media (max-width: 640px) {
  .hero-carousel__view--desktop { display: none; }
  .hero-carousel__view--mobile  { display: block; }
}
/* Immediate-child layout containers fill the view */
.hero-carousel__view > .container {
  width: 100%;
  height: 100%;
  max-width: var(--hc-content-max, 1200px);
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
.hero-carousel__view > .hero-carousel__split { width: 100%; height: 100%; }

/* --- Transition variants --- */
/* fade = default (opacity only) — already above */

/* slide: track translated horizontally; slides sit side-by-side */
.hero-carousel--transition-slide .hero-carousel__track {
  display: flex;
  width: 100%;
  will-change: transform;
}
.hero-carousel--transition-slide .hero-carousel__slide {
  position: relative;
  inset: auto;
  flex: 0 0 100%;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: none;
}

/* zoom: scale + fade */
.hero-carousel--transition-zoom .hero-carousel__slide {
  transform: scale(1.04);
}
.hero-carousel--transition-zoom .hero-carousel__slide.is-active {
  transform: scale(1);
}

/* reduced motion — kill transitions */
.hero-carousel--reduced-motion .hero-carousel__slide,
.hero-carousel--reduced-motion .hero-carousel__track {
  transition: none !important;
  animation: none !important;
}

/* --- Typography + shared content bits --- */
.hero-carousel__eyebrow {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--green);
  font-weight: 500;
  margin-bottom: .8rem;
}
.hero-carousel__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.08;
  color: var(--text);
  margin: 0 0 1rem;
  font-weight: 400;
}
.hero-carousel__title--light { color: var(--white); text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.hero-carousel__title--editorial { font-size: clamp(2.2rem, 5vw, 4rem); }
.hero-carousel__title--minimal { font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 300; letter-spacing: .01em; }
.hero-carousel__title--showcase { font-size: clamp(1.8rem, 3vw, 2.6rem); }

.hero-carousel__desc {
  font-size: clamp(.95rem, 1.3vw, 1.08rem);
  color: var(--text-soft);
  line-height: 1.55;
  max-width: 520px;
  margin: 0 0 1.5rem;
}
.hero-carousel__desc--light { color: rgba(255,255,255,.92); text-shadow: 0 1px 8px rgba(0,0,0,.3); max-width: 640px; }
.hero-carousel__desc--minimal { max-width: 580px; margin-inline: auto; }

.hero-carousel__actions { display: flex; gap: .8rem; flex-wrap: wrap; }

/* --- Mode: Classic (2-col grid) --- */
/* Per-mode min-heights removed — wrapper vh drives the height now */
.hero-carousel__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 1.2rem 0;
  box-sizing: border-box;
}
.hero-carousel__grid > * { min-width: 0; min-height: 0; }
.hero-carousel__content { padding: 2rem 0; }
.hero-carousel__visual {
  position: relative;
  aspect-ratio: 3 / 4;
  width: 100%;
  max-width: 440px;
  max-height: 100%;
  margin-left: auto;
}
.hero-carousel__blob {
  position: absolute;
  inset: -8% -6% -6% -8%;
  background: radial-gradient(ellipse at 30% 30%, var(--green-pale), transparent 60%),
              radial-gradient(ellipse at 70% 70%, var(--terra-pale), transparent 60%);
  border-radius: 48% 52% 40% 60% / 50% 45% 55% 50%;
  z-index: 0;
  opacity: .7;
}

/* --- Shared frame (image wrapper with shape) --- */
.hero-carousel__frame {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--green-pale);
}
.hero-carousel__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-carousel__placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--green-pale), var(--terra-pale));
}

/* --- Shape variants (applied to .hero-carousel__frame) ---
   Static silhouettes use clip-path or border-radius.
   Animated variants keep a rectangular frame and layer motion on top. */

/* classic — rectangle with medium rounded corners */
.hero-carousel__frame--classic {
  border-radius: 24px;
  clip-path: none;
}

/* arch — flat bottom, semicircular top */
.hero-carousel__frame--arch {
  clip-path: polygon(
    0% 50%,
    2% 35%, 8% 22%, 18% 11%, 30% 4%, 50% 0%,
    70% 4%, 82% 11%, 92% 22%, 98% 35%, 100% 50%,
    100% 100%, 0% 100%
  );
  border-radius: 0;
}

/* wabi — asymmetric organic blob */
.hero-carousel__frame--wabi {
  clip-path: polygon(
    20% 0%, 60% 5%, 85% 0%,
    95% 20%, 100% 55%, 85% 80%,
    95% 100%, 55% 95%, 20% 100%,
    0% 75%, 10% 40%, 0% 15%
  );
  border-radius: 0;
}

/* frames — thick white photo-frame border + drop shadow */
.hero-carousel__frame--frames {
  border: 12px solid var(--white);
  box-shadow: 0 0 0 1px var(--border), 0 10px 30px rgba(0,0,0,.18);
  border-radius: 2px;
  background: var(--white);
  clip-path: none;
}

/* kenburns — rectangular frame, image slowly pans and zooms */
.hero-carousel__frame--kenburns {
  border-radius: 20px;
  clip-path: none;
  overflow: hidden;
}
.hero-carousel__frame--kenburns img {
  animation: hcKenBurns 18s ease-in-out infinite alternate;
  transform-origin: center center;
  will-change: transform;
}
@keyframes hcKenBurns {
  0%   { transform: scale(1.00) translate(0, 0); }
  50%  { transform: scale(1.12) translate(-3%, 2%); }
  100% { transform: scale(1.06) translate(3%, -2%); }
}

/* glow — rectangular frame with pulsing green halo */
.hero-carousel__frame--glow {
  border-radius: 16px;
  clip-path: none;
  animation: hcGlow 4s ease-in-out infinite;
}
@keyframes hcGlow {
  0%, 100% {
    box-shadow:
      0 0 0 0 rgba(61, 107, 71, 0.00),
      0 0 24px 6px rgba(107, 155, 120, 0.20);
  }
  50% {
    box-shadow:
      0 0 0 10px rgba(61, 107, 71, 0.08),
      0 0 48px 18px rgba(107, 155, 120, 0.40);
  }
}

/* float — rectangular frame, gentle vertical floating motion */
.hero-carousel__frame--float {
  border-radius: 20px;
  clip-path: none;
  animation: hcFloat 6s ease-in-out infinite;
  will-change: transform;
}
@keyframes hcFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* leaf — real teardrop / botanical leaf silhouette (pointed top, rounded bottom) */
.hero-carousel__frame--leaf {
  clip-path: polygon(
    50% 0%,
    65% 3%, 80% 12%, 90% 25%, 97% 40%, 100% 55%,
    95% 72%, 85% 88%, 68% 97%, 55% 100%, 45% 100%, 32% 97%,
    15% 88%, 5% 72%, 0% 55%, 3% 40%, 10% 25%, 20% 12%, 35% 3%
  );
  border-radius: 0;
}

/* wave — sine-wave edges top and bottom */
.hero-carousel__frame--wave {
  clip-path: polygon(
    0% 8%, 8% 2%, 17% 6%, 25% 0%, 33% 6%, 42% 2%, 50% 8%, 58% 2%, 67% 6%, 75% 0%, 83% 6%, 92% 2%, 100% 8%,
    100% 92%, 92% 98%, 83% 94%, 75% 100%, 67% 94%, 58% 98%, 50% 92%, 42% 98%, 33% 94%, 25% 100%, 17% 94%, 8% 98%, 0% 92%
  );
  border-radius: 0;
}

/* scalloped — wiggly scalloped edges (approximated with many zigzag points) */
.hero-carousel__frame--scalloped {
  clip-path: polygon(
    0% 4%, 5% 0%, 10% 4%, 15% 0%, 20% 4%, 25% 0%, 30% 4%, 35% 0%, 40% 4%, 45% 0%,
    50% 4%, 55% 0%, 60% 4%, 65% 0%, 70% 4%, 75% 0%, 80% 4%, 85% 0%, 90% 4%, 95% 0%, 100% 4%,
    100% 96%,
    95% 100%, 90% 96%, 85% 100%, 80% 96%, 75% 100%, 70% 96%, 65% 100%, 60% 96%, 55% 100%,
    50% 96%, 45% 100%, 40% 96%, 35% 100%, 30% 96%, 25% 100%, 20% 96%, 15% 100%, 10% 96%, 5% 100%, 0% 96%
  );
  border-radius: 0;
}

/* doodle — hand-drawn sketchy frame (dashed border + offset solid shadow + tiny tilt) */
.hero-carousel__frame--doodle {
  border: 3px dashed var(--text);
  border-radius: 18px 26px 18px 26px;
  box-shadow: 5px 5px 0 var(--terra-light), 5px 5px 0 1px var(--text);
  background: var(--white);
  clip-path: none;
  transform: rotate(-0.6deg);
}

/* honeycomb — regular hexagon (pointed top/bottom variant for more visual distinction) */
.hero-carousel__frame--honeycomb {
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  border-radius: 0;
}

/* glass — glassmorphism: translucent, subtle border + inner highlight + drop shadow */
.hero-carousel__frame--glass {
  border-radius: 20px;
  clip-path: none;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.55),
    inset 0 2px 20px rgba(255,255,255,0.22),
    0 12px 40px rgba(31, 38, 135, 0.22);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.hero-carousel__frame--glass::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.04) 55%, transparent 100%);
  border-radius: inherit;
  z-index: 2;
  pointer-events: none;
}

/* Respect user motion preference — kill animated frames + decorations */
@media (prefers-reduced-motion: reduce) {
  .hero-carousel__frame--kenburns img,
  .hero-carousel__frame--glow,
  .hero-carousel__frame--float,
  .hero-carousel__decor--blob,
  .hero-carousel__decor--halo,
  .hero-carousel__decor--orbit::before,
  .hero-carousel__decor--orbit::after,
  .hero-carousel__decor--rings::before,
  .hero-carousel__decor--rings::after,
  .hero-carousel__decor--leaves::before,
  .hero-carousel__decor--leaves::after,
  .hero-carousel__decor--leaves-bunch,
  .hero-carousel__decor--leaves-falling,
  .hero-carousel__decor--kokedama::before,
  .hero-carousel__decor--kokedama::after,
  .hero-carousel__decor--kokedama-trio,
  .hero-carousel__decor--petals,
  .hero-carousel__decor--sprig::after,
  .hero-carousel__decor--branch::after,
  .hero-carousel__decor--dew {
    animation: none !important;
  }
}

/* Mobile decor can have its own scale — scoped to the mobile view wrapper */
@media (max-width: 640px) {
  .hero-carousel__view--mobile .hero-carousel__decor {
    inset: calc((1 - var(--hc-decor-scale-mobile, 1)) * 50%);
  }
}

/* --- Image decorations (behind each slide's image, local to the frame) ---
   Positioned in the same container as the image frame, z-index 0 so the
   image covers them; parts peek out past the image as the animation runs. */
.hero-carousel__decor {
  position: absolute;
  /* inset driven by --hc-decor-scale: 1.0 = match image, <1 shrinks toward center, >1 extends past edges */
  inset: calc((1 - var(--hc-decor-scale, 1)) * 50%);
  z-index: 0;
  pointer-events: none;
}

/* blob — soft morphing colored blob */
.hero-carousel__decor--blob {
  background:
    radial-gradient(ellipse at 30% 30%, var(--green-pale), transparent 60%),
    radial-gradient(ellipse at 70% 70%, var(--terra-pale), transparent 60%);
  border-radius: 48% 52% 40% 60% / 50% 45% 55% 50%;
  opacity: .8;
  animation: hcDecorBlob 10s ease-in-out infinite;
  transform-origin: center;
}
@keyframes hcDecorBlob {
  0%, 100% { border-radius: 48% 52% 40% 60% / 50% 45% 55% 50%; transform: rotate(0deg) scale(1); }
  33%      { border-radius: 60% 40% 55% 45% / 40% 60% 45% 55%; transform: rotate(5deg)  scale(1.03); }
  66%      { border-radius: 40% 60% 50% 50% / 55% 45% 60% 40%; transform: rotate(-4deg) scale(0.98); }
}

/* orbit — two rotating elliptical rings, different speeds + directions */
.hero-carousel__decor--orbit::before,
.hero-carousel__decor--orbit::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(61, 107, 71, 0.32);
}
.hero-carousel__decor--orbit::before {
  inset: 4% -2%;
  animation: hcDecorSpinCW 18s linear infinite;
}
.hero-carousel__decor--orbit::after {
  inset: -3% 6%;
  border-style: dashed;
  border-color: rgba(184, 92, 58, 0.28);
  animation: hcDecorSpinCCW 26s linear infinite;
}
@keyframes hcDecorSpinCW  { from { transform: rotate(0deg); }   to { transform: rotate(360deg); } }
@keyframes hcDecorSpinCCW { from { transform: rotate(0deg); }   to { transform: rotate(-360deg); } }

/* halo — pulsing soft glow */
.hero-carousel__decor--halo {
  background: radial-gradient(circle, rgba(107,155,120,0.38) 0%, rgba(107,155,120,0.12) 50%, transparent 75%);
  border-radius: 50%;
  animation: hcDecorHalo 4s ease-in-out infinite;
}
@keyframes hcDecorHalo {
  0%, 100% { transform: scale(0.92); opacity: 0.55; }
  50%      { transform: scale(1.05); opacity: 0.95; }
}

/* rings — concentric dashed circles rotating */
.hero-carousel__decor--rings::before,
.hero-carousel__decor--rings::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px dashed rgba(61, 107, 71, 0.28);
}
.hero-carousel__decor--rings::before {
  inset: -2%;
  animation: hcDecorSpinCW 22s linear infinite;
}
.hero-carousel__decor--rings::after {
  inset: 8%;
  border-width: 1px;
  border-color: rgba(184, 92, 58, 0.28);
  animation: hcDecorSpinCCW 32s linear infinite;
}

/* leaves — larger leaf silhouettes tucked at opposite corners, gentle rocking */
.hero-carousel__decor--leaves::before,
.hero-carousel__decor--leaves::after {
  content: '';
  position: absolute;
  width: 42px;
  height: 66px;
  background: linear-gradient(135deg, var(--green-light) 0%, var(--green) 70%, #2d5036 100%);
  border-radius: 0 100% 0 100%;
  opacity: 0.9;
  box-shadow: inset 0 0 6px rgba(0,0,0,.12);
  animation: hcDecorLeafSway 7s ease-in-out infinite;
}
.hero-carousel__decor--leaves::before {
  top: 4%;
  left: -6%;
  transform-origin: bottom right;
  background: linear-gradient(135deg, var(--green) 0%, #2d5036 80%);
}
.hero-carousel__decor--leaves::after {
  bottom: 4%;
  right: -6%;
  transform-origin: top left;
  border-radius: 100% 0 100% 0;
  animation-delay: -3.5s;
}
@keyframes hcDecorLeafSway {
  0%, 100% { transform: rotate(-8deg); }
  50%      { transform: rotate(14deg); }
}

/* leaves-bunch — 4 larger leaves at the 4 corners via multiple background gradients */
.hero-carousel__decor--leaves-bunch {
  background:
    radial-gradient(ellipse 20px 32px at 6% 10%,  var(--green)       0 68%, transparent 72%),
    radial-gradient(ellipse 18px 28px at 92% 14%, var(--green-light) 0 68%, transparent 72%),
    radial-gradient(ellipse 18px 28px at 10% 88%, var(--terra-light) 0 68%, transparent 72%),
    radial-gradient(ellipse 20px 32px at 94% 90%, var(--green)       0 68%, transparent 72%);
  animation: hcDecorLeavesBunch 9s ease-in-out infinite alternate;
  transform-origin: center;
}
@keyframes hcDecorLeavesBunch {
  0%   { transform: rotate(-3deg) scale(0.97); opacity: 0.85; }
  100% { transform: rotate(4deg)  scale(1.03); opacity: 1; }
}

/* leaves-falling — multiple leaves drifting diagonally across the frame */
.hero-carousel__decor--leaves-falling {
  background:
    radial-gradient(ellipse 14px 22px at 12% 8%,  var(--green)       0 65%, transparent 70%),
    radial-gradient(ellipse 12px 18px at 68% 22%, var(--green-light) 0 65%, transparent 70%),
    radial-gradient(ellipse 13px 20px at 32% 48%, var(--green)       0 65%, transparent 70%),
    radial-gradient(ellipse 11px 16px at 82% 58%, var(--terra-light) 0 65%, transparent 70%),
    radial-gradient(ellipse 14px 22px at 18% 82%, var(--green-light) 0 65%, transparent 70%),
    radial-gradient(ellipse 12px 18px at 60% 92%, var(--green)       0 65%, transparent 70%);
  animation: hcDecorLeavesFall 14s linear infinite;
}
@keyframes hcDecorLeavesFall {
  0%   { transform: translateY(-6%) rotate(-6deg); opacity: 0.7; }
  50%  { transform: translateY(3%)  rotate(4deg);  opacity: 1;   }
  100% { transform: translateY(-6%) rotate(-6deg); opacity: 0.7; }
}

/* kokedama — two larger moss balls at the bottom corners, subtle breathing */
.hero-carousel__decor--kokedama::before,
.hero-carousel__decor--kokedama::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, var(--green-light) 0 22%, var(--green) 55%, #2d5036 100%);
  box-shadow: 0 6px 18px rgba(0,0,0,.22), inset 0 -6px 12px rgba(0,0,0,.18);
  animation: hcDecorKokedama 5s ease-in-out infinite;
}
.hero-carousel__decor--kokedama::before {
  width: 66px;
  height: 66px;
  bottom: 5%;
  left: -5%;
}
.hero-carousel__decor--kokedama::after {
  width: 48px;
  height: 48px;
  bottom: 14%;
  right: -4%;
  animation-delay: -2s;
}
@keyframes hcDecorKokedama {
  0%, 100% { transform: translateY(0)    scale(1);   }
  50%      { transform: translateY(-4px) scale(1.05); }
}

/* kokedama-trio — three moss balls clustered at bottom center, varying sizes */
.hero-carousel__decor--kokedama-trio {
  background:
    radial-gradient(circle 38px at 16% 92%, #2d5036 0 48%, transparent 50%),
    radial-gradient(circle 38px at 16% 92%, var(--green) 0 45%, transparent 48%),
    radial-gradient(circle 32px at 15% 90%, var(--green-light) 0 28%, transparent 32%),

    radial-gradient(circle 48px at 50% 96%, #2d5036 0 48%, transparent 50%),
    radial-gradient(circle 48px at 50% 96%, var(--green) 0 45%, transparent 48%),
    radial-gradient(circle 40px at 48% 93%, var(--green-light) 0 28%, transparent 32%),

    radial-gradient(circle 34px at 86% 94%, #2d5036 0 48%, transparent 50%),
    radial-gradient(circle 34px at 86% 94%, var(--green) 0 45%, transparent 48%),
    radial-gradient(circle 28px at 85% 92%, var(--green-light) 0 28%, transparent 32%);
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.22));
  animation: hcDecorKokedama 6s ease-in-out infinite;
}

/* petals — larger flower petals drifting around (6 points via background + gentle drift) */
.hero-carousel__decor--petals {
  background:
    radial-gradient(ellipse 14px 24px at 12% 18%, rgba(184, 92, 58, 0.6)  0 65%, transparent 70%),
    radial-gradient(ellipse 14px 24px at 85% 25%, rgba(228, 168, 130, 0.7) 0 65%, transparent 70%),
    radial-gradient(ellipse 12px 20px at 20% 75%, rgba(242, 221, 208, 0.75) 0 65%, transparent 70%),
    radial-gradient(ellipse 14px 24px at 75% 82%, rgba(184, 92, 58, 0.6)  0 65%, transparent 70%),
    radial-gradient(ellipse 12px 20px at 50% 12%, rgba(228, 168, 130, 0.7) 0 65%, transparent 70%),
    radial-gradient(ellipse 12px 20px at 50% 92%, rgba(242, 221, 208, 0.75) 0 65%, transparent 70%);
  animation: hcDecorPetalsDrift 12s ease-in-out infinite alternate;
}
@keyframes hcDecorPetalsDrift {
  0%   { transform: translateY(0)    rotate(0deg); opacity: 0.85; }
  100% { transform: translateY(-10px) rotate(5deg); opacity: 1;    }
}

/* sprig — a diagonal branch with small leaves along its length */
.hero-carousel__decor--sprig::before {
  content: '';
  position: absolute;
  top: 18%;
  left: -6%;
  width: 70%;
  height: 3px;
  background: linear-gradient(to right, var(--green) 0%, var(--green-light) 70%, transparent 100%);
  transform: rotate(28deg);
  transform-origin: left center;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.hero-carousel__decor--sprig::after {
  content: '';
  position: absolute;
  top: 13%;
  left: -4%;
  width: 68%;
  height: 32%;
  background:
    radial-gradient(ellipse 12px 20px at 18% 40%, var(--green)       0 65%, transparent 70%),
    radial-gradient(ellipse 10px 17px at 40% 55%, var(--green-light) 0 65%, transparent 70%),
    radial-gradient(ellipse 12px 20px at 62% 45%, var(--green)       0 65%, transparent 70%),
    radial-gradient(ellipse 10px 17px at 82% 62%, var(--green-light) 0 65%, transparent 70%);
  transform: rotate(28deg);
  transform-origin: left center;
  animation: hcDecorLeafSway 6s ease-in-out infinite;
}

/* branch — a horizontal arched branch across the top with hanging leaves */
.hero-carousel__decor--branch::before {
  content: '';
  position: absolute;
  top: 8%;
  left: -4%;
  right: -4%;
  height: 22%;
  background:
    radial-gradient(ellipse 60% 100% at 50% 120%, transparent 62%, var(--green) 63%, var(--green) 68%, transparent 69%);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.18));
}
.hero-carousel__decor--branch::after {
  content: '';
  position: absolute;
  top: 20%;
  left: 8%;
  right: 8%;
  height: 26%;
  background:
    radial-gradient(ellipse 10px 18px at 14% 12%, var(--green)       0 65%, transparent 70%),
    radial-gradient(ellipse 10px 18px at 32% 42%, var(--green-light) 0 65%, transparent 70%),
    radial-gradient(ellipse 11px 20px at 50% 22%, var(--green)       0 65%, transparent 70%),
    radial-gradient(ellipse 10px 18px at 68% 50%, var(--green-light) 0 65%, transparent 70%),
    radial-gradient(ellipse 10px 18px at 86% 18%, var(--green)       0 65%, transparent 70%);
  animation: hcDecorLeafSway 8s ease-in-out infinite;
  transform-origin: top center;
}

/* dew — larger water droplets scattered, subtle pulse */
.hero-carousel__decor--dew {
  background:
    radial-gradient(circle 11px at 15% 20%, rgba(107, 155, 120, 0.45) 0 55%, transparent 60%),
    radial-gradient(circle 8px  at 80% 25%, rgba(107, 155, 120, 0.55) 0 55%, transparent 60%),
    radial-gradient(circle 10px at 25% 75%, rgba(107, 155, 120, 0.5)  0 55%, transparent 60%),
    radial-gradient(circle 7px  at 70% 80%, rgba(107, 155, 120, 0.6)  0 55%, transparent 60%),
    radial-gradient(circle 8px  at 50% 50%, rgba(107, 155, 120, 0.45) 0 55%, transparent 60%),
    radial-gradient(circle 9px  at 88% 55%, rgba(107, 155, 120, 0.5)  0 55%, transparent 60%),
    radial-gradient(circle 6px  at 38% 38%, rgba(107, 155, 120, 0.4)  0 55%, transparent 60%),
    radial-gradient(circle 7px  at 62% 62%, rgba(107, 155, 120, 0.5)  0 55%, transparent 60%);
  animation: hcDecorDew 4s ease-in-out infinite alternate;
}
@keyframes hcDecorDew {
  0%   { opacity: 0.55; transform: scale(0.96); }
  100% { opacity: 1;    transform: scale(1.04); }
}

/* Cinematic mode removed 2026-04-12 */

/* --- Mode: Editorial (image + caption stacked with asymmetric feel) --- */
.hero-carousel__editorial {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3rem;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 1.2rem 0;
  box-sizing: border-box;
}
.hero-carousel__editorial > * { min-width: 0; min-height: 0; }
.hero-carousel__fig-wrap {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
  max-width: 480px;
  max-height: 100%;
}
.hero-carousel__fig {
  margin: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  position: relative;
  z-index: 1;
  border-radius: var(--radius);
  overflow: hidden;
}
.hero-carousel__caption { padding: 1rem 0; }

/* --- Mode: Split (50/50 full-bleed) — flex-based for guaranteed full height --- */
.hero-carousel__split {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.hero-carousel__split > * {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
}
.hero-carousel__split-text {
  padding: 4rem clamp(1.5rem, 5vw, 4rem);
  background: var(--bg-alt);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-carousel__split-wrap {
  position: relative;
  height: 100%;
}
/* Image is full-bleed in its cell — no shape rounding on split */
.hero-carousel__split-media {
  position: relative;
  z-index: 1;
  height: 100%;
  width: 100%;
  overflow: hidden;
  border-radius: 0 !important;
  clip-path: none !important;
}
.hero-carousel__split-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Mode: Minimal (centered text, optional small shaped image above) --- */
.hero-carousel--mode-minimal .hero-carousel__slide {
  justify-content: center;
  text-align: center;
  background-color: var(--bg);
}
.hero-carousel__minimal {
  max-width: 720px;
  padding: 4rem 1rem;
  text-align: center;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.hero-carousel__minimal .hero-carousel__actions { justify-content: center; }
.hero-carousel__minimal-wrap {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto 1.8rem;
}
.hero-carousel__minimal-img {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

/* --- Mode: Showcase (big image + overlapping caption card) --- */
.hero-carousel__showcase {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 0;
  align-items: center;
  width: 100%;
  height: 100%;
  position: relative;
  padding: 1.2rem 0;
  box-sizing: border-box;
}
.hero-carousel__showcase > * { min-width: 0; min-height: 0; }
.hero-carousel__showcase-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  width: 100%;
  max-height: min(560px, 100%);
}
.hero-carousel__showcase-media {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
}
.hero-carousel__showcase-card {
  background: var(--white);
  padding: 2.2rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-hover);
  margin-left: -3rem;
  position: relative;
  z-index: 3;
}

/* --- Controls bar: arrows flanking dots, pinned at the bottom of the carousel --- */
.hero-carousel__controls {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: .6rem;
  z-index: 10;
  background: rgba(253, 251, 247, 0.82);
  padding: .35rem .6rem;
  border-radius: 100px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero-carousel__nav {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  padding: 0;
  transition: background var(--transition), color var(--transition);
}
.hero-carousel__nav:hover { background: var(--green); color: var(--white); }
.hero-carousel__nav:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* --- Dots (inside the controls bar) --- */
.hero-carousel__dots {
  display: flex;
  gap: .45rem;
  align-items: center;
}
.hero-carousel__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background var(--transition), transform var(--transition);
}
.hero-carousel__dot:hover { background: var(--text-muted); }
.hero-carousel__dot.is-active { background: var(--green); transform: scale(1.3); }
.hero-carousel__dot:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

/* --- Empty state --- */
.hero-carousel__empty {
  padding: 5rem 0;
  text-align: center;
  background: var(--bg-alt);
}
.hero-carousel__empty-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--text);
  margin: 0 0 .8rem;
}
.hero-carousel__empty-desc {
  color: var(--text-soft);
  margin: 0 0 1.4rem;
}

/* --- Tablet (641–900px): collapse multi-column grids to 1 column --- */
@media (max-width: 900px) {
  .hero-carousel__grid,
  .hero-carousel__editorial,
  .hero-carousel__split,
  .hero-carousel__showcase {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .hero-carousel__showcase-card { margin-left: 0; margin-top: -2rem; }
  .hero-carousel__split-text { padding: 2.5rem 1.2rem; }
  .hero-carousel__visual,
  .hero-carousel__fig-wrap,
  .hero-carousel__showcase-wrap { max-width: 360px; margin: 0 auto; }
  .hero-carousel__nav--prev { left: .4rem; }
  .hero-carousel__nav--next { right: .4rem; }
}

@media (max-width: 540px) {
  .hero-carousel__showcase-card { padding: 1.4rem; }
}

/* ============================================================
   MOBILE (≤640px): every mode gets its OWN dedicated layout.
   Each designed to look intentional on a phone, not a collapsed
   desktop grid. Nav arrows are hidden (swipe handles nav); dots
   stay as the "more slides" indicator.
   ============================================================ */
@media (max-width: 640px) {
  /* --- Universal mobile tweaks --- */
  .hero-carousel__nav { display: none !important; }
  .hero-carousel__dots { bottom: 1.1rem; gap: .4rem; z-index: 15; }
  .hero-carousel__dot  { width: 9px; height: 9px; }
  .hero-carousel__slide .hero-carousel__decor { opacity: .6; }
  /* Force containers to stretch so flex-column mode layouts fill the slide */
  .hero-carousel__slide > .container { height: 100%; align-self: stretch; max-width: 100%; }

  /* ===== CLASSIC — image card top-right, text bottom-left overlapping ===== */
  .hero-carousel--mode-classic .hero-carousel__grid {
    display: block;
    position: relative;
    height: 100%;
    padding: 0;
    gap: 0;
  }
  .hero-carousel--mode-classic .hero-carousel__visual {
    position: absolute;
    top: 6%;
    right: 4%;
    width: 62%;
    aspect-ratio: 3/4;
    max-width: none;
    max-height: 66%;
    margin: 0;
    z-index: 1;
  }
  .hero-carousel--mode-classic .hero-carousel__content {
    position: absolute;
    left: 4%;
    right: 22%;
    bottom: 3rem;
    z-index: 3;
    padding: 1rem 1rem 1rem 0;
    background: transparent;
    border-radius: 0;
    text-align: left;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
    color: var(--white);
  }
  .hero-carousel--mode-classic .hero-carousel__content .hero-carousel__title,
  .hero-carousel--mode-classic .hero-carousel__content .hero-carousel__desc,
  .hero-carousel--mode-classic .hero-carousel__content .hero-carousel__eyebrow {
    color: var(--white);
  }
  .hero-carousel--mode-classic .hero-carousel__eyebrow { margin-bottom: .35rem; }
  .hero-carousel--mode-classic .hero-carousel__title {
    font-size: clamp(1.2rem, 5vw, 1.6rem);
    line-height: 1.15;
    margin-bottom: .4rem;
  }
  .hero-carousel--mode-classic .hero-carousel__desc {
    font-size: .82rem;
    margin: 0 0 .7rem;
    max-width: none;
  }
  .hero-carousel--mode-classic .hero-carousel__actions {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: .4rem;
  }
  .hero-carousel--mode-classic .hero-carousel__actions .btn { padding: .5rem .9rem; font-size: .82rem; }

/* ===== EDITORIAL — magazine cover: full-width image with title overlay, caption below ===== */
  .hero-carousel--mode-editorial .hero-carousel__editorial {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    height: 100%;
    align-items: stretch;
  }
  .hero-carousel--mode-editorial .hero-carousel__fig-wrap {
    position: relative;
    aspect-ratio: auto;
    width: 100%;
    max-width: none;
    height: 55%;
    margin: 0;
    flex-shrink: 0;
  }
  .hero-carousel--mode-editorial .hero-carousel__caption {
    flex: 1;
    padding: 1.3rem 1.4rem 2.8rem;
    text-align: center;
    overflow: hidden;
  }
  .hero-carousel--mode-editorial .hero-carousel__eyebrow {
    margin-bottom: .4rem;
    color: var(--green);
  }
  .hero-carousel--mode-editorial .hero-carousel__title--editorial {
    font-size: clamp(1.4rem, 5.8vw, 1.9rem);
    margin-bottom: .5rem;
  }
  .hero-carousel--mode-editorial .hero-carousel__desc {
    font-size: .88rem;
    margin: 0 auto .9rem;
    max-width: 90%;
  }

  /* ===== SPLIT — horizontal: image 80% right (full height), text left overflowing ===== */
  .hero-carousel--mode-split .hero-carousel__split {
    display: block;
    position: relative;
    height: 100%;
    min-height: 0;
    gap: 0;
    flex: none;
  }
  .hero-carousel--mode-split .hero-carousel__split > * { flex: none; }
  /* Image: forced full-height by pinning top/right/bottom */
  .hero-carousel--mode-split .hero-carousel__split-wrap {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 80%;
    height: auto;
    max-width: none;
    margin: 0;
    z-index: 1;
  }
  .hero-carousel--mode-split .hero-carousel__split-media {
    height: 100%;
    width: 100%;
  }
  .hero-carousel--mode-split .hero-carousel__split-text {
    position: absolute;
    left: 4%;
    right: 30%;
    bottom: 3rem;
    top: auto;
    padding: 1rem 1rem 1.1rem 1rem;
    background: linear-gradient(to right,
      var(--bg-alt) 0%,
      var(--bg-alt) 55%,
      rgba(237, 232, 222, 0.88) 85%,
      rgba(237, 232, 222, 0.25) 100%);
    border-radius: 0 var(--radius) var(--radius) 0;
    text-align: left;
    z-index: 3;
    flex: none;
    justify-content: flex-start;
  }
  .hero-carousel--mode-split .hero-carousel__eyebrow { margin-bottom: .35rem; }
  .hero-carousel--mode-split .hero-carousel__title {
    font-size: clamp(1.2rem, 5vw, 1.6rem);
    line-height: 1.15;
    margin-bottom: .4rem;
  }
  .hero-carousel--mode-split .hero-carousel__desc {
    font-size: .82rem;
    margin: 0 0 .7rem;
    max-width: none;
  }
  .hero-carousel--mode-split .hero-carousel__actions {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: .4rem;
  }
  .hero-carousel--mode-split .hero-carousel__actions .btn { padding: .5rem .9rem; font-size: .82rem; }

  /* ===== MINIMAL — compact, centered, generous whitespace ===== */
  .hero-carousel--mode-minimal .hero-carousel__minimal {
    padding: 2rem 1.4rem 3.5rem;
  }
  .hero-carousel--mode-minimal .hero-carousel__minimal-wrap {
    width: 140px;
    height: 140px;
    margin: 0 auto 1.2rem;
  }
  .hero-carousel--mode-minimal .hero-carousel__title--minimal {
    font-size: clamp(1.25rem, 5.2vw, 1.7rem);
    margin-bottom: .4rem;
  }
  .hero-carousel--mode-minimal .hero-carousel__desc--minimal {
    font-size: .88rem;
    margin: 0 auto 1rem;
    max-width: 92%;
  }

  /* ===== SHOWCASE — image fills top, floating card overlaps bottom with roomy padding ===== */
  .hero-carousel--mode-showcase .hero-carousel__showcase {
    display: flex;
    flex-direction: column;
    gap: 0;
    grid-template-columns: none;
    height: 100%;
    align-items: stretch;
    padding: 1.2rem 1.2rem 0;
  }
  .hero-carousel--mode-showcase .hero-carousel__showcase-wrap {
    position: relative;
    aspect-ratio: auto;
    height: 52%;
    width: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    flex-shrink: 0;
  }
  .hero-carousel--mode-showcase .hero-carousel__showcase-card {
    flex: 1;
    margin: -2rem .2rem 3rem;
    padding: 1.8rem 1.5rem 1.6rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    background: var(--white);
    text-align: center;
    z-index: 3;
    position: relative;
  }
  .hero-carousel--mode-showcase .hero-carousel__eyebrow { margin-bottom: .3rem; }
  .hero-carousel--mode-showcase .hero-carousel__title--showcase {
    font-size: clamp(1.2rem, 5vw, 1.55rem);
    margin-bottom: .35rem;
  }
  .hero-carousel--mode-showcase .hero-carousel__desc {
    font-size: .85rem;
    margin: 0 auto .7rem;
    max-width: 95%;
  }
  .hero-carousel--mode-showcase .hero-carousel__actions {
    justify-content: center;
  }
}