/* =============================================
   HOMEPAGE — matches Figma 1440px artboard
   ============================================= */

/* -----------------------------------------------
   HERO — Figma node 1:536
   Full-viewport section: photo abs-positioned right,
   text content on left, floating product card at junction.
   ----------------------------------------------- */
.hero {
  position: relative;
  min-height: 887px;           /* Figma: exact hero height */
  background-color: var(--color-bg);
  overflow: hidden;
  display: flex;
  align-items: flex-start;     /* content anchored from top, not centred */
  /* Figma: title starts at y=322px from page top.
     Using 22.4vw scales to ≈322px at the 1440px Figma canvas width. */
  padding-top: clamp(160px, 22.4vw, 360px);
}

/* ── Right side: lifestyle photo ───────────────
   Figma: the photo container is 1913px wide at
   left:-362px on a 1440px canvas — i.e. it bleeds
   ~25vw to the left and ~8vw to the right.
   Image inside: 135.66% × 132.85vw = 180.24vw wide,
   left = -25.14vw(container) + -34.57%×132.85vw
        = -25.14vw - 45.93vw = -71.07vw
   A cream→transparent gradient fades the photo on
   the left so the headline sits on a clean ground.
   ─────────────────────────────────────────────── */
.hero__photo-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero__photo {
  position: absolute;
  width: 180.24vw;    /* 135.66% of the 132.85vw-wide Figma container */
  height: 110.7%;     /* Figma: taller than section, crops top/bottom */
  left: -71.07vw;     /* Figma: container(-25.14vw) + img(-45.93vw) */
  top: -9.52%;
  max-width: none;
}

/* Gradient overlay: cream on left → transparent on right.
   Ensures the title/text stays readable on the cream ground.
   Values tuned to match Figma's clean split at ~42% from left. */
.hero__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--color-bg)        0%,
    var(--color-bg)       34%,
    rgba(243,236,227,0.82) 46%,
    transparent            62%
  );
  pointer-events: none;
  z-index: 1;
}

/* ── Left side: text content ───────────────────
   z-index: 2 sits above both the photo and the
   gradient overlay. Padding aligns with the
   1212px container left edge (same as rest of page).
   ─────────────────────────────────────────────── */
.hero__content {
  position: relative;
  z-index: 2;
  padding-left: max(var(--container-pad, 24px), calc((100vw - var(--container, 1212px)) / 2));
  max-width: calc(max(var(--container-pad, 24px), calc((100vw - var(--container, 1212px)) / 2)) + 520px);
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(48px, 4.4vw, 64px);
  font-weight: 700;
  line-height: 1.0;
  color: var(--color-dark);
  margin-bottom: 24px;
}

.hero__text {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-brown);
  line-height: 1.7;
  margin-bottom: 40px;
  max-width: 400px;
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  background: var(--color-dark);
  color: var(--color-bg);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.hero__cta:hover {
  background: var(--color-brown);
  color: var(--color-bg);
}

/* ── Floating product card ─────────────────────
   Positioned at the junction of content and photo.
   Figma: white card, 12px radius, shadow, ~200×72px.
   ─────────────────────────────────────────────── */
.hero__card {
  position: absolute;
  /* Figma: left:822px on 1440px canvas = 57.1% */
  left: clamp(440px, 57.1%, 860px);
  /* Figma: top:292px on 887px hero = 32.9% */
  top: 32.9%;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 10px 10px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(79, 52, 27, 0.18);
  text-decoration: none;
  color: inherit;
  min-width: 190px;
  max-width: 260px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.hero__card:hover {
  box-shadow: 0 8px 32px rgba(79, 52, 27, 0.26);
  transform: translateY(-2px);
}

.hero__card-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
  background: var(--color-tan-light);
}

.hero__card-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}

.hero__card-cat {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent);
}

.hero__card-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-dark);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero__card-name span {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
}

.hero__card-price {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-brown);
}

.hero__card-price .woocommerce-Price-amount { font: inherit; color: inherit; }

/* ── Responsive ────────────────────────────────── */
@media (max-width: 960px) {
  .hero {
    min-height: 70vh;
    align-items: flex-end;
    /* On mobile content sits at bottom — header (≈96px) is still fixed on top */
    padding-top: 96px;
    padding-bottom: var(--space-lg);
  }

  .hero__photo {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    object-fit: cover;
    object-position: 70% center;
  }

  .hero__fade {
    background: linear-gradient(
      to top,
      rgba(243,236,227,0.96) 0%,
      rgba(243,236,227,0.78) 55%,
      transparent 100%
    );
  }

  .hero__content {
    padding-left: var(--container-pad, 24px);
    padding-right: var(--container-pad, 24px);
    max-width: 100%;
    padding-top: 0;
    padding-bottom: 32px;
    width: 100%;
  }

  .hero__title { font-size: clamp(36px, 10vw, 52px); }
  .hero__text  { font-size: 14px; margin-bottom: 28px; }
  .hero__card  { display: none; }
}

@media (max-width: 480px) {
  .hero { min-height: 60vh; }
  .hero__title { font-size: 36px; }
}

/* -----------------------------------------------
   VALUES STRIP
   ----------------------------------------------- */
.values {
  padding-block: var(--space-lg);
  background: var(--color-bg);
}

.values__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.value-card {
  background: var(--color-tan);
  border-radius: 12px;
  padding: 36px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-height: 259px;
  justify-content: center;
}

.value-card__icon {
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.value-card__icon svg,
.value-card__icon img {
  width: 58px;
  height: 58px;
  object-fit: contain;
}

.value-card__title {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-brown-alt);
  letter-spacing: 0.04em;
}

.value-card__text {
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--color-brown);
  line-height: 31px;
  max-width: 210px;
}

@media (max-width: 900px) {
  .values__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .values__grid { grid-template-columns: 1fr; }
}

/* -----------------------------------------------
   TAGLINE
   ----------------------------------------------- */
.tagline {
  padding-block: var(--space-xl);
  background: var(--color-bg);
}

.tagline__container {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Figma node 9:97 — text + decorations laid out in 2 flex rows */
.tagline__text {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.8vw, 40px);
  color: var(--color-dark);
  text-align: center;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
}

.tagline__row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 16px;
}

.tagline__phrase {
  white-space: nowrap;
  line-height: 1;
}

/* Photo tile decorations — sized 111×125 per Figma nodes 9:93 and 9:95 */
.tagline__deco img {
  display: block;
  width: 111px;
  height: 125px;
  object-fit: cover;
  border-radius: 10px;
}

/* Photo 1 (Rectangle12 / node 9:93): rotate(6.75deg), border #bb9572 */
.tagline__deco--p1 {
  display: inline-block;
  transform: rotate(6.75deg);
  transform-origin: center;
}
.tagline__deco--p1 img { border: 6px solid #bb9572; }

/* Photo 2 (Rectangle13 / node 9:95): rotate(-10.48deg), border #d4c5ad */
.tagline__deco--p2 {
  display: inline-block;
  transform: rotate(-10.48deg);
  transform-origin: center;
}
.tagline__deco--p2 img { border: 6px solid #d4c5ad; }

/* Small botanical branch decoration — sits inline at end of "ama-te todos os dias."
   Figma node 10:334: outer rotate(-10.96deg) + inner rotate(83.26deg) = 72.3deg */
.tagline__branch {
  display: inline-block;
  width: 110px;
  height: auto;
  transform: rotate(72.3deg) skewX(-0.52deg);
  transform-origin: center center;
  pointer-events: none;
}

.tagline__branch img {
  width: 100%;
  height: auto;
  display: block;
}

.tagline__branch img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 960px) {
  /* Stack rows; decorations stay inline but smaller */
  .tagline__deco img { width: 78px; height: 88px; border-width: 4px; }
  .tagline__branch  { width: 72px; }
  .tagline__row { gap: 12px; }
}

@media (max-width: 600px) {
  /* On phones, drop the photo decorations entirely so the words fit */
  .tagline__deco--p1, .tagline__deco--p2 { display: none; }
  .tagline__row { gap: 8px; }
  .tagline__branch { width: 56px; }
}

/* -----------------------------------------------
   PRODUCTS SECTION
   ----------------------------------------------- */
.products-section {
  padding-block: var(--space-xl);
  background: var(--color-bg);
}

.products-section__header {
  text-align: center;
  margin-bottom: 32px;
}

.products-section__title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  color: var(--color-brown-dark);
}

/* Category tabs — height 42px, rounded 7px */
.cat-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}

.cat-tab {
  height: 42px;
  padding: 0 20px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  background: rgba(209, 186, 158, 0.7);
  color: var(--color-brown);
  transition: background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.cat-tab.is-active,
.cat-tab:hover {
  background: var(--color-brown);
  color: #fff;
}

/* Product grid — 3 columns, gap 18px */
.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

/* HTML `hidden` attribute must win over `display: grid` */
.products-grid[hidden] {
  display: none !important;
}

/* Product card — 377×372px per Figma, border-radius 14px, photo fills full card */
.product-card {
  width: 100%;
  /* Figma: 377×372px → ratio ≈ 372/377 */
  aspect-ratio: 377 / 372;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(79, 52, 27, 0.14);
}

/* Full-card clickable overlay link */
.product-card__link {
  position: absolute;
  inset: 0;
  z-index: 4;
}

/* Image-wrap fills the whole card */
.product-card__image-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.product-card__image-wrap > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  display: block;
}

.product-card:hover .product-card__image-wrap > img {
  transform: scale(1.04);
}

/* Cart / wishlist icon — 35×35px circle, top-left (left:13px, top:13px per Figma) */
.product-card__wishlist {
  position: absolute;
  top: 13px;
  left: 13px;
  z-index: 3;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: rgba(243, 236, 227, 0.8);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
}

.product-card__wishlist:hover {
  background: var(--color-bg);
}

.product-card__wishlist svg {
  width: 16px;
  height: 16px;
}

/* Category badge — top-right (right:12px, top:13px per Figma)
   bg #6e5446, h 26px, border-radius 7px, white text 10px uppercase */
.product-card__badge {
  position: absolute;
  top: 13px;
  right: 12px;
  z-index: 3;
  background: #6e5446;
  color: #fff;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  height: 26px;
  padding: 0 10px;
  border-radius: 7px;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

/* Bottom tan overlay — absolute, height 87px, rounded-bottom 13px, rgba(209,186,158,0.93) */
.product-card__info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 87px;
  background: rgba(209, 186, 158, 0.93);
  border-radius: 0 0 13px 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  gap: 4px;
  z-index: 2;
}

.product-card__category {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: #a47c59;
  letter-spacing: 0.06em;
  text-align: center;
}

.product-card__divider {
  width: 22px;
  height: 1px;
  background: rgba(164, 124, 89, 0.2);
  flex-shrink: 0;
}

.product-card__name {
  font-family: var(--font-display);
  font-size: 18px;
  /* Figma: color #6e5446 */
  color: #6e5446;
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.product-card__name a {
  color: inherit;
  text-decoration: none;
}

.product-card__price {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  color: #a47c59;
  text-align: center;
}

.product-card__price .woocommerce-Price-amount {
  font: inherit;
  color: inherit;
}

.products-section__cta {
  text-align: center;
  margin-top: var(--space-lg);
}

/* "VEJA TODOS OS PRODUTOS" button — bg #6e5446, h 42px, w 294px, border-radius 7px,
   cream uppercase Montserrat Bold 18px (Figma) */
.btn--products {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 294px;
  height: 42px;
  background: #6e5446;
  color: #f3ece3;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 7px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.btn--products:hover {
  background: #4f341b;
  color: #fff;
}

@media (max-width: 900px) {
  .products-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .products-grid { grid-template-columns: 1fr; }
}

/* -----------------------------------------------
   FACILITIES (Instalações Premium)
   ----------------------------------------------- */
.facilities {
  padding-block: var(--space-lg);
  background: var(--color-bg);
}

/* Inner container: 1212px, rounded 33px, height 544px, relative, overflow hidden */
.facilities__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  border-radius: var(--radius-xl);
  overflow: hidden;
  height: 544px;
  position: relative;
}

.facilities__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

/* Gradient overlay: brown on left fading to transparent */
.facilities__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    #6e5446 0%,
    #6e5446 45%,
    rgba(110, 84, 70, 0.6) 62%,
    rgba(110, 84, 70, 0) 100%
  );
  z-index: 1;
}

/* Content: absolute left 54px, vertically centered */
.facilities__content {
  position: absolute;
  left: 54px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  max-width: 600px;
}

.facilities__title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  color: #fff;
  line-height: 1.1;
  white-space: pre-line;
}

.facilities__name {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-tan);
  margin-top: 22px;
  letter-spacing: 0.06em;
}

.facilities__desc {
  font-family: var(--font-body);
  font-size: 18px;
  color: rgba(243, 236, 227, 0.85);
  max-width: 547px;
  line-height: 31px;
  margin-top: 18px;
}

/* Nav arrows: two 40px buttons — directly under title (Figma) */
.facilities__nav {
  display: flex;
  gap: 10px;
  margin-top: 28px;
}

.facilities__nav-btn {
  width: 38px;
  height: 38px;
  border-radius: 8px;        /* Figma: subtly-rounded squares, not circles */
  background: rgba(255, 255, 255, 0.18);
  border: none;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.facilities__nav-btn:hover {
  background: rgba(255, 255, 255, 0.32);
}

@media (max-width: 768px) {
  .facilities__inner { height: auto; min-height: 420px; }
  .facilities__content { left: 24px; right: 24px; max-width: none; }
  .facilities__gradient {
    background: linear-gradient(to bottom, rgba(110,84,70,0.85) 0%, rgba(110,84,70,0.5) 100%);
  }
}

/* -----------------------------------------------
   SERVICES
   ----------------------------------------------- */
.services {
  padding-block: var(--space-lg);
}

.services__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 48px;
  padding-inline: var(--container-pad);
  max-width: calc(var(--container-max) + var(--container-pad) * 2);
  margin-inline: auto;
}

.services__title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  color: var(--color-brown);
  line-height: 1.0;          /* Figma: tight line-height for 2-line title */
  flex: 1;
  margin: 0;
}

/* Nav arrows: position top-right */
.services__nav {
  display: flex;
  gap: 8px;
  align-self: flex-end;
  padding-bottom: 8px;
}

.services__nav-btn {
  height: 39px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid rgba(209, 186, 158, 0.61);
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  color: var(--color-brown);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.services__nav-btn:hover {
  border-color: var(--color-tan);
  background: rgba(209, 186, 158, 0.2);
}

/* Scrollable track */
.services__track {
  display: flex;
  gap: 25px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-inline: var(--container-pad);
  /* bleed to edges */
  max-width: none;
}

.services__track::-webkit-scrollbar {
  display: none;
}

/* Service card: Figma 377×372px card ratio, horizontal scroll min-width 377px */
/* Figma: card 408×541px (portrait), radius 16px */
.service-card {
  min-width: 408px;
  height: 541px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  scroll-snap-align: start;
  background: var(--color-tan);
}

.service-card__link {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  text-decoration: none;
}

.service-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  display: block;
}

.service-card:hover img {
  transform: scale(1.04);
}

/* Bottom strip: Figma layers brown rgba(110,84,70,0.76) + tan rgba(209,186,158,0.54) */
.service-card__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 96px;
  border-radius: 0 0 13px 13px;
  background:
    linear-gradient(rgba(209, 186, 158, 0.54), rgba(209, 186, 158, 0.54)),
    rgba(110, 84, 70, 0.76);
  z-index: 1;
}

/* Service name: Cormorant Garamond 18px, color #4f341b, centered in 96px strip */
.service-card__name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--color-dark);
  padding-inline: 16px;
  z-index: 2;
}

@media (max-width: 768px) {
  .service-card { min-width: 280px; height: 372px; }
}

/* -----------------------------------------------
   TESTIMONIAL
   ----------------------------------------------- */
.testimonial {
  padding-block: var(--space-xl);
  text-align: center;
  position: relative;
  overflow: hidden;
  background: var(--color-bg);
}

/* Decorative botanical branch — Figma CMgVFJ asset */
.testimonial__branch {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  width: 558px; /* matches Figma inner node 687.3 × 557.9, scaled */
}

.testimonial__branch img {
  width: 100%;
  height: auto;
  display: block;
}

/* Figma applies NESTED rotation: outer wrapper + inner 83.26deg + skew(-0.52deg)
   Total visual angle = outer + 83.26
   Left:  53.88 + 83.26 = 137.14deg
   Right: -116.7 + 83.26 = -33.44deg */
.testimonial__branch--left {
  left: -260px;
  top: -80px;
  transform: rotate(137.14deg) skewX(-0.52deg);
  transform-origin: center center;
}

.testimonial__branch--right {
  right: -260px;
  bottom: -80px;
  transform: rotate(-33.44deg) skewX(-0.52deg);
  transform-origin: center center;
}

.testimonial__container {
  position: relative;
  z-index: 1;
}

/* 5 gold stars — appear after quote in Figma */
.testimonial__stars {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 32px;
  margin-bottom: 16px;
}

.testimonial__star {
  font-size: 20px;
  color: var(--color-accent);
  line-height: 1;
}

.testimonial__star--empty {
  opacity: 0.3;
}

/* Quote */
.testimonial__quote {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.5vw, 36px);
  color: var(--color-brown);
  font-style: normal;        /* Figma: not italic */
  line-height: 1.5;
  max-width: 1022px;         /* Figma quote container width */
  margin-inline: auto;
  margin-top: 0;
  margin-bottom: 0;
  text-transform: lowercase; /* Figma: applies lowercase class to quote */
  text-align: center;
}

/* Keep first character of language-sensitive quote upright */
.testimonial__quote::first-letter {
  text-transform: lowercase;
}

.testimonial__author-name {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-brown);
  margin-top: 32px;
}

.testimonial__author-role {
  font-family: var(--font-body);
  font-size: 14px;
  font-style: italic;
  color: var(--color-brown);
  margin-top: 8px;
}

/* Product bottles image in testimonial section */
.testimonial__bottles {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}

.testimonial__bottles img {
  max-width: 420px;
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

@media (max-width: 600px) {
  .testimonial__bottles img { max-width: 280px; }
}

/* -----------------------------------------------
   NEWSLETTER
   ----------------------------------------------- */
.newsletter {
  padding-block: var(--space-lg);
}

/* Inner: 1212px, rounded 33px, height 544px */
.newsletter__inner-wrap {
  max-width: var(--container-max);
  margin-inline: auto;
  border-radius: var(--radius-xl);
  overflow: hidden;
  height: 544px;
  position: relative;
  background-color: var(--color-brown-alt);
}

.newsletter__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

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

.newsletter__overlay {
  position: absolute;
  inset: 0;
  background: rgba(69, 41, 16, 0.75);
  z-index: 1;
}

/* Content: absolute left 54px, vertically centered */
.newsletter__content {
  position: absolute;
  left: 54px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  max-width: 700px;
}

.newsletter__title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  color: #fff;
  line-height: 0.91;
}

.newsletter__text {
  font-family: var(--font-body);
  font-size: 18px;
  color: rgba(255, 255, 255, 0.85);
  max-width: 478px;
  line-height: 31px;
  margin-top: 24px;
}

/* Figma: input + submit live INSIDE one rounded translucent pill
   Pill: 475×58, radius 13, bg rgba(255,255,255,0.22), border 2px white
   Button: 137×37, radius 6, bg white, brown text — inset on the right */
.newsletter__form {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 40px;
  width: 100%;
  max-width: 475px;
  height: 58px;
  padding: 8px 8px 8px 24px;
  background: rgba(255, 255, 255, 0.22);
  border: 2px solid #fff;
  border-radius: 13px;
}

.newsletter__input {
  flex: 1;
  height: 100%;
  padding: 0;
  background: transparent;
  border: none;
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  min-width: 0;
}

.newsletter__input::placeholder {
  color: rgba(255, 255, 255, 0.85);
}

.newsletter__input:focus {
  outline: none;
}

.newsletter__submit {
  height: 37px;
  padding: 0 18px;
  flex-shrink: 0;
  background: #fff;
  border: none;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-brown);
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.newsletter__submit:hover {
  opacity: 0.88;
}

@media (max-width: 768px) {
  .newsletter__inner-wrap { height: auto; min-height: 420px; }
  .newsletter__content { left: 24px; right: 24px; max-width: none; position: relative; top: auto; transform: none; padding-block: 48px; }
  .newsletter__form { flex-direction: column; }
  .newsletter__input { max-width: none; }
}

/* -----------------------------------------------
   INSTAGRAM SECTION
   ----------------------------------------------- */
.instagram-section {
  padding-block: var(--space-lg);
  overflow: hidden;
}

/* Figma: heading = "Siga-nos no" [photo1] [photo2] "Instagram" — flex row */
.instagram-section__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: var(--space-lg);
  padding-inline: var(--container-pad);
  flex-wrap: nowrap;
}

.instagram-section__title-part {
  font-family: var(--font-display);
  font-size: clamp(40px, 4.4vw, 64px);
  color: var(--color-brown);
  white-space: nowrap;
  line-height: 1;
}

/* Two small rotated photo tiles between the text parts */
.instagram-section__heading-photos {
  position: relative;
  width: 160px;
  height: 150px;
  flex-shrink: 0;
  margin-inline: 8px;
}

.instagram-section__heading-photo {
  position: absolute;
  width: 111px;
  height: 125px;
  border-radius: 10px;
  overflow: hidden;
  border: 6px solid #99775b;
}

.instagram-section__heading-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Left photo: rotate(-5.61deg), slightly behind */
.instagram-section__heading-photo--left {
  left: 0;
  top: 50%;
  transform: translateY(-50%) rotate(-5.61deg);
  z-index: 1;
}

/* Right photo: rotate(10.44deg), slightly in front */
.instagram-section__heading-photo--right {
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(10.44deg);
  z-index: 2;
}

.instagram-section__feed-wrap {
  /* bleed slightly off left */
  padding-left: calc(var(--container-pad) - 12px);
  padding-right: var(--container-pad);
  overflow: hidden;
}

/* Smash Balloon override */
#sb_instagram { width: 100% !important; }

/* Static fallback grid: 4 photos, 436×436px, border-radius 26px (Figma) */
.instagram-section__grid {
  display: flex;
  gap: 24px;
  /* Allow slight horizontal bleed on wide screens */
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px; /* breathing room for rotated card */
}

.instagram-section__grid::-webkit-scrollbar {
  display: none;
}

.instagram-placeholder {
  flex-shrink: 0;
  width: 436px;
  height: 436px;
  background: var(--color-tan);
  border-radius: 26px;
  overflow: hidden;
  display: block;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.instagram-placeholder:hover {
  opacity: 0.88;
}

.instagram-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.instagram-placeholder--rotated {
  transform: rotate(2.7deg);
}

@media (max-width: 768px) {
  .instagram-placeholder {
    width: 280px;
    height: 280px;
  }
}