/* ============================================================
   SCYAVURU — Global tokens
   Reference artboard: 1440 px wide
   Figma type system: Gotham (Book 325 / Bold 700)
   ============================================================ */
:root {
  --font-sans: "Gotham", "Montserrat", "Helvetica Neue", Arial, sans-serif;

  --color-white: #ffffff;
  --color-ink: #4c4848;      /* body copy      */
  --color-brown: #756959;    /* section labels */
  --color-gold: #6d5c3c;     /* small links    */

  --gutter: 5%;              /* hero side gutter (72px @ 1440) */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }  /* keep anchored headings clear of the fixed header */

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-ink);
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

/* ============================================================
   SECTION 1 — HERO
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
  height: 57vw;              /* 823 / 1440 → scales with width */
  min-height: 620px;
  max-height: 860px;
  overflow: hidden;
  background: #14100c;       /* shown before the first poster paints */
}

/* ---------- Background slider ---------- */
.hero-slider {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s ease;
  will-change: opacity;
}
.hero-slide.is-active { opacity: 1; }

/* Poster image + video share the same box */
.slide-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.slide-video {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.hero-slide.video-playing .slide-video { opacity: 1; }  /* fade video over poster */

/* ---------- Legibility shade (constant) ---------- */
.hero-shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0) 55%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.28) 100%);
}

/* ---------- Navbar (sticky, transparent over hero → tinted on scroll) ---------- */
.hero-navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: 120px;
  padding: 0;
  background: transparent;
  transition: background-color 0.3s ease, height 0.3s ease, box-shadow 0.3s ease;
}
.hero-navbar.is-scrolled {
  height: 84px;
  background: linear-gradient(0deg, #756959 0%, #756959 100%), rgba(0, 0, 0, 0.40);
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.18);
}
.hero-navbar.is-scrolled .hero-logo { height: 56px; }

.hero-container {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.hero-logo { height: 72px; width: auto; transition: height 0.3s ease; }

.hero-menu .nav-link {
  color: var(--color-white);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 0.5rem 0.95rem;
  opacity: 0.95;
  transition: opacity 0.2s ease;
}
.hero-menu .nav-link:hover,
.hero-menu .nav-link:focus { opacity: 1; }

/* Active menu item: keep the text white, show only an underline (Figma).
   The `.active` class is added by Scy_Header_Navwalker (inc/enqueue.php)
   on the current page's menu item. */
.hero-menu .nav-item .nav-link.active,
.hero-menu .nav-item.active > .nav-link {
  color: var(--color-white);
  opacity: 1;
  position: relative;
}
.hero-menu .nav-item .nav-link.active::after,
.hero-menu .nav-item.active > .nav-link::after {
  content: "";
  position: absolute;
  left: 0.95rem;
  right: 0.95rem;
  bottom: 3px;
  height: 2px;
  background: var(--color-white);
}

.hero-menu .nav-sep span {
  color: rgba(255, 255, 255, 0.55);
  padding: 0 0.35rem;
  display: inline-block;
}

.hero-navbar .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.6);
  padding: 0.35rem 0.55rem;
}
.hero-navbar .navbar-toggler:focus { box-shadow: none; }
.hero-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ---------- Headline (constant) ---------- */
.hero-content {
  position: absolute;
  left: var(--gutter);
  bottom: 12.6%;             /* divider baseline: (823-719)/823 */
  z-index: 4;
  width: 83%;
  max-width: 1201px;
}

.hero-title {
  margin: 0 0 10px 0;
  color: var(--color-white);
  font-weight: 700;
  font-size: clamp(30px, 3.47vw, 50px);
  line-height: 1.05;
}

.hero-subtitle {
  margin: 0 0 26px 0;
  max-width: 537px;
  color: var(--color-white);
  font-weight: 400;
  font-size: clamp(13px, 1.11vw, 16px);
  line-height: 1.35;
}

.hero-divider {
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.45);
}

/* ---------- Slider controls ---------- */
.hero-arrow {
  position: absolute;
  bottom: 10%;                    /* bottom area, aligned with the divider */
  z-index: 6;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.20);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 6px;             /* rounded-square, matches Figma */
  cursor: pointer;
  opacity: 0;                     /* hidden by default */
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease, background 0.2s ease;
}
.hero:hover .hero-arrow { opacity: 1; visibility: visible; }   /* reveal on hover */
.hero-arrow:hover { background: rgba(0, 0, 0, 0.42); }
.hero-next { right: 5%; }
.hero-prev { right: calc(5% + 54px); }        /* sits just left of "next" */

/* Dots not used in the hero (Figma shows arrows only) */
.hero-dots { display: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991.98px) {
  .hero-navbar { height: 88px; }
  .hero-logo { height: 58px; }

  .hero-menu {
    background: rgba(20, 16, 12, 0.92);
    border-radius: 10px;
    padding: 8px 14px;
    margin-top: 10px;
  }
  .hero-menu .nav-link { padding: 0.6rem 0.25rem; }
  /* Match the reduced horizontal padding above. */
  .hero-menu .nav-item .nav-link.active::after,
  .hero-menu .nav-item.active > .nav-link::after {
    left: 0.25rem;
    right: 0.25rem;
  }
  .hero-menu .nav-sep { display: none; }

  .hero-arrow { width: 40px; height: 40px; }
  .hero-next { right: 4%; }
  .hero-prev { right: calc(4% + 50px); }
}

@media (max-width: 575.98px) {
  .hero {
    height: auto;
    min-height: 88vh;
  }
  .hero-content { width: 90%; bottom: 12%; }
  .hero-subtitle { margin-bottom: 20px; }
  .hero-dots { bottom: 6%; right: auto; left: 50%; transform: translateX(-50%); }
  .hero-arrow { display: none; }   /* keep it clean on phones; swipe/auto only */
}

/* ============================================================
   SECTION 2 — AGRICULTURAL COMPANY / COLLECTIONS
   Reference: heading @930, lead @1019, cards 298x400 @1178
   ============================================================ */
.collections {
  background: #ffffff;
  padding: 92px 0 84px;
}

.container-1440 {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 82px;
  padding-right: 82px;
}

/* Intro copy — heading flanked by full-width rules (matches Figma) */
.sec-title-rule {
  max-width: 1440px;
  margin: 0 auto 22px auto;
  display: flex;
  align-items: center;
  gap: 28px;
}
.sec-title-rule::before,
.sec-title-rule::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: #d8d2c6;
}
.sec-title {
  flex: 0 0 auto;
  max-width: 100%;
  margin: 0;
  color: #4c4848;
  font-weight: 400;                         /* Gotham Book */
  font-size: clamp(22px, 2.08vw, 30px);     /* 30 / 1440 */
  line-height: 1.2;
  text-align: center;
}
.sec-lead {
  max-width: 718px;
  margin: 0 auto 58px auto;
  color: #6f6f6f;
  font-weight: 400;
  font-size: clamp(14px, 1.11vw, 16px);     /* 16 / 1440 */
  line-height: 1.5;
  text-align: center;
}

/* On small phones drop the flanking rules so the heading isn't cramped */
@media (max-width: 767.98px) {
  .sec-title-rule::before,
  .sec-title-rule::after { display: none; }
  .sec-title-rule { justify-content: center; }
}

/* Card grid — 28px gutters to match the 298px card pitch */
.collection-row {
  --bs-gutter-x: 28px;
  --bs-gutter-y: 28px;
}

/* Card */
.collection-card {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 298 / 400;                  /* exact Figma ratio */
  isolation: isolate;
}
.collection-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.6s ease;
}
.collection-card:hover .collection-img { transform: scale(1.05); }

.collection-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.12) 0%,
    rgba(0, 0, 0, 0.15) 45%,
    rgba(0, 0, 0, 0.58) 100%
  );
}

.collection-body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 0 14px 26px;
  text-align: center;
  color: #ffffff;
}
.collection-name {
  margin: 0 0 16px 0;
  color: #ffffff;
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(17px, 2.08vw, 30px);     /* 30 / 1440 */
  line-height: 1.08;
  letter-spacing: 0.5px;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
.btn-readmore {
  display: inline-block;
  padding: 9px 22px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 5px;
  color: #ffffff;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.btn-readmore:hover { background: #ffffff; color: #4c4848; }

/* Responsive */
@media (max-width: 991.98px) {
  .container-1440 { padding-left: 32px; padding-right: 32px; }
  .collections { padding: 64px 0 60px; }
}
@media (max-width: 575.98px) {
  .container-1440 { padding-left: 20px; padding-right: 20px; }
  .collection-row { --bs-gutter-x: 16px; --bs-gutter-y: 16px; }
  .sec-head { margin-bottom: 40px; }
}

/* ============================================================
   SECTION 3 — PRIVATE LABEL
   Reference: sep @1631, title @1823, copy @1941, icons @~2100,
   button @~2261, image 553x553 @ left772/top1737
   ============================================================ */
.private-label {
  background: #ffffff;
  padding: 0 0 84px;              /* top space comes from the separator above */
}

/* Centered small-caps separator label with flanking rules (H4 Separator).
   Full-bleed to the 1440 frame edges, with equal space above and below. */
.section-sep {
  max-width: 1440px;
  margin: 0 auto 84px auto;      /* bottom gap == top gap fed by the section above */
  display: flex;
  align-items: center;
  gap: 22px;
  color: #756959;
  font-weight: 700;
  font-size: clamp(16px, 1.4vw, 20px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  white-space: nowrap;
}
.section-sep::before,
.section-sep::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: #d8d2c6;           /* soft warm rule */
}
.section-sep > span { flex: 0 0 auto; }

.pl-row { --bs-gutter-x: 66px; }

.pl-title {
  margin: 0 0 22px 0;
  color: #4c4848;
  font-weight: 400;                       /* Gotham Book */
  font-size: clamp(24px, 2.08vw, 30px);   /* 30 / 1440 */
  line-height: 1.25;
}
.pl-text {
  margin: 0 0 34px 0;
  max-width: 623px;
  color: #4c4848;
  font-weight: 400;
  font-size: clamp(14px, 1.11vw, 16px);
  line-height: 1.6;
  text-align: justify;
}

/* Feature icons row */
.pl-features {
  list-style: none;
  margin: 0 0 36px 0;
  padding: 0;
  display: flex;
  gap: 18px;
  max-width: 624px;
}
.pl-feature {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
.pl-ico {
  width: 46px;
  height: 46px;
  object-fit: contain;
}
.pl-feature span {
  color: #4c4848;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
}

/* Outlined brand button */
.btn-outline-brand {
  display: inline-block;
  padding: 12px 40px;
  border: 1px solid #6d5c3c;
  border-radius: 5px;
  color: #6d5c3c;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.btn-outline-brand:hover { background: #6d5c3c; color: #ffffff; }

/* Right image */
.pl-right { text-align: right; }
.pl-image {
  width: 553px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  margin-left: auto;
}

/* Responsive */
@media (max-width: 991.98px) {
  .private-label { padding: 24px 0 60px; }
  .pl-row { --bs-gutter-x: 32px; --bs-gutter-y: 40px; }
  .pl-right { text-align: center; }
  .pl-image { margin: 0 auto; }
}
@media (max-width: 575.98px) {
  .pl-features { flex-wrap: wrap; gap: 22px 8px; }
  .pl-feature { flex: 0 0 46%; }        /* 2 x 2 grid on phones */
  .btn-outline-brand { display: block; text-align: center; }
}

/* Section 3 — category tiles (299x299, centered white label) */
.pl-tiles {
  --bs-gutter-x: 28px;
  --bs-gutter-y: 28px;
  margin-top: 52px;
}
.pl-tile {
  position: relative;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 1 / 1;             /* 299 x 299 */
  isolation: isolate;
}
.pl-tile-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.pl-tile:hover .pl-tile-img { transform: scale(1.05); }
.pl-tile-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.43);
}
.pl-tile-label {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  text-align: center;
  color: #ffffff;
  font-weight: 400;
  font-size: clamp(15px, 1.39vw, 20px);   /* 20 / 1440 */
  line-height: 1.2;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ============================================================
   SECTION 4 — CERTIFICATIONS
   Reference: sep @2769, image 553x553 @left120/top2901,
   heading @2969, copy @3082, logos @~3233, button @3384
   ============================================================ */
.certifications {
  background: #ffffff;
  padding: 0 0 92px;
}
.cert-row { --bs-gutter-x: 64px; --bs-gutter-y: 36px; }

.cert-image {
  width: 553px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
}

.cert-title {
  margin: 0 0 22px 0;
  color: #4c4848;
  font-weight: 400;                       /* Gotham Book */
  font-size: clamp(24px, 2.08vw, 30px);
  line-height: 1.25;
}
.cert-text {
  margin: 0 0 30px 0;
  max-width: 545px;
  color: #4c4848;
  font-weight: 400;
  font-size: clamp(14px, 1.11vw, 16px);
  line-height: 1.6;
  text-align: justify;
}

.cert-logos {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 34px;
  margin-bottom: 30px;
}
.cert-logos img {
  width: clamp(96px, 10.5vw, 150px);
  height: auto;
}

.cert-btn { padding: 9px 26px; }

/* Responsive */
@media (max-width: 991.98px) {
  .certifications { padding: 12px 0 60px; }
  .cert-left { text-align: center; }
  .cert-image { margin: 0 auto; }
}
@media (max-width: 575.98px) {
  .cert-logos { gap: 20px; justify-content: space-between; }
}

/* Separator on small screens */
@media (max-width: 575.98px) {
  .section-sep {
    gap: 14px;
    letter-spacing: 0.18em;
    font-size: 14px;
    padding: 0 16px;
    margin-bottom: 56px;
  }
}

/* ============================================================
   SECTION 5 — TIMELINE (scroll-driven, pinned background)
   Reference: full-bleed image @top3600 h751, dark overlay 0.39,
   years @40px bold, heading @50px bold, copy @16px
   ============================================================ */
.timeline {
  position: relative;
  height: 540vh;                 /* scroll length that drives the 6 steps */
  background: #14100c;
}
.timeline-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.timeline-bg {
  position: absolute;
  inset: 0;
  /* Photo is printed inline by the Home Sec 5 block, from the Media Library. */
}
.timeline-shade {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
}
.timeline-inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 70px;
}

/* Years */
.tl-years {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tl-year {
  color: rgba(255, 255, 255, 0.32);
  font-weight: 700;
  font-size: clamp(24px, 2.78vw, 40px);
  line-height: 1.28;
  cursor: pointer;
  transition: color 0.3s ease, transform 0.3s ease;
}
.tl-year:hover { color: rgba(255, 255, 255, 0.7); }
.tl-year.is-active {
  color: #ffffff;
  transform: translateX(4px);
}

/* Content */
.tl-content {
  color: #ffffff;
  max-width: 900px;
  opacity: 0;
  transform: translateY(10px);
}
.tl-content.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.tl-title {
  margin: 0 0 20px 0;
  color: #ffffff;
  font-weight: 700;
  font-size: clamp(28px, 3.47vw, 50px);
  line-height: 1.12;
}
.tl-text {
  margin: 0;
  max-width: 760px;
  color: #ffffff;
  font-weight: 400;
  font-size: clamp(14px, 1.11vw, 16px);
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 767.98px) {
  .timeline { height: 460vh; }
  .timeline-inner {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 26px;
  }
  .tl-years {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px 16px;
  }
  .tl-year { font-size: 22px; }
  .tl-title { font-size: clamp(24px, 6vw, 32px); }
}

/* ============================================================
   SECTION 6 — OUR BRANDS
   Reference: sep @4427, feature image 553 @left107/top4564,
   heading 40px @top4688, products 193x215 @top5283
   ============================================================ */
.brands {
  background: #ffffff;
  padding: 84px 0 92px;          /* top gap == separator's 84px bottom gap */
}
.brands-row {
  --bs-gutter-x: 64px;
  --bs-gutter-y: 36px;
  margin-bottom: 68px;
}

/* The 64px column gutter on cert/brands rows becomes a negative row margin
   wider than the container padding on small screens → horizontal scroll.
   These columns stack below lg, so drop the horizontal gutter there. */
@media (max-width: 991.98px) {
  .cert-row, .brands-row { --bs-gutter-x: 0; }
}

/* Feature image */
.brands-figure {
  width: 553px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  background: #f3f3f3;
  border: 1px solid #ececec;
  border-radius: 10px;
  overflow: hidden;
}
.brands-figure-img { width: 100%; height: 100%; object-fit: cover; }

/* Brand story */
.brands-wordmark { height: 26px; width: auto; margin-bottom: 18px; }
.brands-title {
  margin: 0 0 20px 0;
  color: #4c4848;
  font-weight: 700;                       /* Gotham Bold */
  font-size: clamp(26px, 2.78vw, 40px);   /* 40 / 1440 */
  line-height: 1.25;
}
.brands-text {
  margin: 0 0 16px 0;
  max-width: 624px;
  color: #4c4848;
  font-weight: 400;
  font-size: clamp(14px, 1.11vw, 16px);
  line-height: 1.6;
  text-align: justify;
}
.brands .btn-outline-brand { margin-top: 14px; }

/* Products carousel */
.brands-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
}
.brands-track {
  flex: 1 1 auto;
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 12px 2px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.brands-track::-webkit-scrollbar { display: none; }

.brand-card {
  flex: 0 0 calc((100% - 48px) / 3);      /* 3 per view (2 gaps of 24px) */
  scroll-snap-align: start;
  text-align: center;
}
.brand-jar {
  position: relative;
  height: 240px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: 18px;
}
.brand-jar img {
  height: 216px;
  width: auto;
  object-fit: contain;
  position: relative;
  z-index: 1;
}
.brand-jar::after {                        /* soft shadow under the jar */
  content: "";
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 68%;
  height: 26px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0) 70%);
  z-index: 0;
}
.brand-name {
  margin: 0 0 14px 0;
  color: #6d5c3c;
  font-weight: 400;
  font-size: clamp(16px, 1.39vw, 20px);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.btn-readmore-brand {
  display: inline-block;
  padding: 8px 22px;
  border: 1px solid #6d5c3c;
  border-radius: 5px;
  color: #6d5c3c;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.btn-readmore-brand:hover { background: #6d5c3c; color: #ffffff; }

.brands-arrow {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 6px;                       /* rounded-square, matches Figma */
  border: 1px solid #d8d2c6;
  background: #ffffff;
  color: #6d5c3c;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.brands-arrow:hover { background: #6d5c3c; color: #ffffff; border-color: #6d5c3c; }

/* Responsive */
@media (max-width: 991.98px) {
  .brands-figure-col { text-align: center; }
  .brands-figure { margin: 0 auto; }
  .brand-card { flex: 0 0 calc((100% - 24px) / 2); }   /* 2 per view */
}
@media (max-width: 575.98px) {
  .brand-card { flex: 0 0 100%; }                       /* 1 per view */
}

/* ============================================================
   SECTION 7 — CATALOGUE BANNER
   Reference: banner 1280x553 rounded @top5768, text left @140,
   heading 30px, copy 16px, download button
   ============================================================ */
.catalogo {
  background: #ffffff;
  padding: 0 0 92px;
}
.catalogo-banner {
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  aspect-ratio: 1280 / 553;
  border-radius: 10px;
  overflow: hidden;
  background: #c4c4c4;   /* Photo is printed inline by the Home Sec 7 block. */
}
.catalogo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.52) 0%,
    rgba(0, 0, 0, 0.20) 55%,
    rgba(0, 0, 0, 0.05) 100%
  );
}
.catalogo-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 60px;
  max-width: 660px;
  color: #ffffff;
}
.catalogo-title {
  margin: 0 0 18px 0;
  color: #ffffff;
  font-weight: 400;                       /* Gotham Book */
  font-size: clamp(20px, 2.08vw, 30px);
  line-height: 1.25;
}
.catalogo-text {
  margin: 0 0 14px 0;
  max-width: 580px;
  color: #ffffff;
  font-weight: 400;
  font-size: clamp(12px, 1.11vw, 16px);
  line-height: 1.55;
  text-align: justify;
}
.btn-outline-white {
  display: inline-block;
  margin-top: 12px;
  padding: 10px 26px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 5px;
  color: #ffffff;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.btn-outline-white:hover { background: #ffffff; color: #4c4848; }

/* Responsive */
@media (max-width: 767.98px) {
  .catalogo-banner { aspect-ratio: auto; min-height: 480px; }
  .catalogo-overlay { background: rgba(0, 0, 0, 0.5); }
  .catalogo-content { padding: 0 24px; max-width: none; }
}

/* ============================================================
   SECTION 8 — SUSTAINABILITY
   Reference: full-bleed image @top6484 h802, heading 40px @top6813,
   "zero." 250px watermark, frosted feature box 1274x248 @top7084
   ============================================================ */
.eco {
  position: relative;
  background: #ffffff;
  padding-bottom: 52px;
}
.eco-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 802;
}
.eco-bg {
  position: absolute;
  inset: 0;
  /* Photo is printed inline by the sustainability block, from the Media Library. */
}
.eco-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 18%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.28) 55%, rgba(0, 0, 0, 0.12) 100%);
}
.eco-banner-inner {
  position: absolute;
  inset: 0;
  z-index: 2;
  max-width: 1440px;
  margin: 0 auto;
}

.eco-watermark {
  position: absolute;
  right: 5%;
  bottom: 28.8%;                  /* ~30px above the feature panel */
  z-index: 1;
  color: rgba(255, 255, 255, 0.28);
  font-weight: 400;
  font-size: clamp(90px, 17vw, 250px);
  line-height: 0.8;
  letter-spacing: -2px;
  pointer-events: none;
  user-select: none;
}

/* Copy anchored to sit ~40px above the feature panel (heading ~41% down) */
.eco-copy {
  position: absolute;
  left: 82px;
  bottom: 30%;
  z-index: 2;
  max-width: 624px;
}
.eco-title {
  margin: 0 0 22px 0;
  color: #ffffff;
  font-weight: 700;                       /* Gotham Bold */
  font-size: clamp(28px, 2.78vw, 40px);
  line-height: 1.25;
}
.eco-text {
  margin: 0;
  max-width: 624px;
  color: #ffffff;
  font-weight: 400;
  font-size: clamp(14px, 1.11vw, 16px);
  line-height: 1.6;
}

/* Frosted feature panel — pulled up to overlap the banner's bottom edge */
.eco-features-holder {
  position: relative;
  z-index: 3;
  margin-top: -14%;               /* overlaps ~25% of the banner, hangs a little below */
}
.eco-features {
  width: min(1276px, calc(100% - 164px));
  margin: 0 auto;
  display: flex;
  background: #ffffff;
  border: 1px solid #ececec;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}
.eco-feature {
  flex: 1 1 0;
  padding: 30px 26px;
  text-align: center;
  border-left: 1px solid rgba(0, 0, 0, 0.08);
}
.eco-feature:first-child { border-left: none; }
.eco-ico { height: 46px; width: auto; margin: 0 auto 16px; display: block; }
.eco-ftitle {
  margin: 0 0 10px 0;
  color: #6d5c3c;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
}
.eco-fdesc {
  margin: 0;
  color: #4c4848;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
}

/* Responsive */
@media (max-width: 991.98px) {
  .eco-banner { aspect-ratio: auto; min-height: 520px; }
  .eco-banner-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 24px;
  }
  .eco-copy { position: static; left: auto; bottom: auto; max-width: none; }
  .eco-features-holder { margin-top: 28px; }      /* box sits below the banner */
  .eco-features { width: calc(100% - 32px); flex-wrap: wrap; }
  .eco-feature { flex: 1 1 50%; }
  .eco-feature:nth-child(1),
  .eco-feature:nth-child(2) { border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
  .eco-feature:nth-child(odd) { border-left: none; }
  .eco-watermark { top: 40%; }
}
@media (max-width: 575.98px) {
  .eco-banner { min-height: 460px; }
  .eco-feature { flex: 1 1 100%; border-left: none; border-bottom: 1px solid rgba(0,0,0,0.08); }
  .eco-feature:last-child { border-bottom: none; }
  .eco-watermark { display: none; }
}

/* ============================================================
   SECTION 9 — BLOG (autoplay slider)
   Reference: sep @7412, heading @7525, cards 408x580 @top7707
   ============================================================ */
/* `section.blog`, not `.blog`: WordPress puts a `blog` class on <body> for the
   posts index, and a bare `.blog` selector applied this section's padding to
   the whole page there — pushing the blog banner out from under the fixed
   navbar instead of letting it sit behind it. */
section.blog {
  background: #ffffff;
  padding: 84px 0 90px;
}
.blog-head { text-align: center; max-width: 1000px; margin: 0 auto 46px; }
.blog-heading {
  margin: 0 0 16px 0;
  color: #4c4848;
  font-weight: 400;                       /* Gotham Book */
  font-size: clamp(22px, 2.08vw, 30px);
  line-height: 1.25;
}
.blog-lead {
  margin: 0 auto;
  max-width: 760px;
  color: #6f6f6f;
  font-weight: 400;
  font-size: clamp(14px, 1.11vw, 16px);
  line-height: 1.5;
}

.blog-carousel { position: relative; }
.blog-track {
  display: flex;
  gap: 28px;                                 /* matches Figma spacing between cards */
  margin-right: -82px;                        /* bleed the row to the container edge (cancels right padding) */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 6px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.blog-track::-webkit-scrollbar { display: none; }

.blog-card {
  position: relative;
  flex: 0 0 calc((100% - 84px) / 3.125);   /* 3 full cards (≈408px) + a peek of the 4th, per Figma */
  scroll-snap-align: start;
  aspect-ratio: 408 / 580;
  border-radius: 10px;
  overflow: hidden;
  isolation: isolate;
}
.blog-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.blog-card:hover .blog-card-img { transform: scale(1.05); }
.blog-card-shade { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.43); }

.blog-card-body {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;
  padding: 24px 24px 0;
  color: #ffffff;
}
.blog-cat {
  display: block;
  font-size: 20px;
  font-weight: 400;
  color: #ffffff;
  margin-bottom: 12px;
}
.blog-cat-line {
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.5);
  margin-bottom: 16px;
}
.blog-title {
  margin: 0 0 22px 0;
  color: #ffffff;
  font-weight: 400;
  font-size: clamp(20px, 2.08vw, 30px);
  line-height: 1.25;
}
.blog-readmore { margin-top: 0; }

/* Nav arrows (bottom-right) */
.blog-nav {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}
.blog-arrow {
  width: 38px;
  height: 38px;
  border-radius: 6px;                       /* rounded-square, matches Figma */
  border: 1px solid #d8d2c6;
  background: #ffffff;
  color: #6d5c3c;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.blog-arrow:hover { background: #6d5c3c; color: #ffffff; border-color: #6d5c3c; }

/* Responsive */
@media (max-width: 991.98px) {
  .blog-track { margin-right: -32px; }                   /* match container padding at this width */
  .blog-card { flex: 0 0 calc((100% - 56px) / 2.125); }  /* 2 full + peek */
}
@media (max-width: 575.98px) {
  .blog-track { margin-right: -20px; }                   /* match container padding at this width */
  .blog-card { flex: 0 0 82%; }                          /* 1 + peek */
}

/* ============================================================
   SECTION 10 — CONTACT
   Reference: full-bleed banner, CONTACT US @20px, heading 40px,
   2-column form with outlined fields, checkboxes + SEND
   ============================================================ */
.contact {
  position: relative;
  overflow: hidden;
  background: #14100c;
}
.contact-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Photo is printed inline by the contact block, from the Media Library. */
}
.contact-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.42) 100%);
}
.contact-inner {
  position: relative;
  z-index: 2;
  padding: 70px 82px;
}

.contact-label {
  display: block;
  color: #ffffff;
  font-weight: 700;
  font-size: clamp(16px, 1.4vw, 20px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.contact-title {
  margin: 0 0 18px 0;
  color: #ffffff;
  font-weight: 700;                       /* Gotham Bold */
  font-size: clamp(28px, 2.78vw, 40px);
  line-height: 1.2;
}
/* Keep "We're Here to Help" on one line on desktop (intro is a side column);
   allow it to wrap on mobile where the block is full width. */
@media (min-width: 992px) {
  .contact-title { white-space: nowrap; }
}
.contact-text {
  margin: 0;
  max-width: 360px;
  color: #ffffff;
  font-weight: 400;
  font-size: clamp(14px, 1.11vw, 16px);
  line-height: 1.6;
}

/* Form fields */
.cf-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  padding: 12px 14px;
  color: #ffffff;
  font-family: inherit;
  font-size: 14px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.cf-input::placeholder { color: rgba(255, 255, 255, 0.78); }
.cf-input:focus {
  outline: none;
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}
.cf-textarea { resize: vertical; min-height: 116px; }

/* Footer: checkboxes + send */
.cf-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-top: 20px;
}
.cf-checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 28px;
  flex: 1 1 auto;
}
.cf-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #ffffff;
  font-size: 13px;
  line-height: 1.4;
  cursor: pointer;
}
.cf-check input {
  margin-top: 2px;
  width: 15px;
  height: 15px;
  accent-color: #6d5c3c;
  flex: 0 0 auto;
}
.cf-send {
  flex: 0 0 auto;
  cursor: pointer;
  background: transparent;
  padding: 11px 40px;
}

/* Responsive */
@media (max-width: 991.98px) {
  .contact-inner { padding: 56px 24px; }
  .contact-text { max-width: none; }
}
@media (max-width: 575.98px) {
  .cf-footer { flex-direction: column; align-items: stretch; }
  .cf-checks { grid-template-columns: 1fr; }
  .cf-send { width: 100%; text-align: center; }
}

/* ============================================================
   FOOTER
   Reference: top rule, brand lockup + wordmark, 4 link columns,
   quality-certified box (BRCS + IFS), Contatti + social, and a
   bottom legal bar. Matches Figma node 2192:3870.
   ============================================================ */
.site-footer {
  background: #ffffff;
  color: #4c4848;
  padding-top: 54px;            /* white space above the top border (matches Figma) */
}
.footer-rule {
  display: block;
  height: 1px;
  background: #e7e2d7;
  width: 100%;
}

.footer-main {
  display: grid;
  /* Contatti (last) gets extra room so the address + hours never wrap. */
  grid-template-columns: 196px 1fr 1fr 1fr 1fr 1.62fr;
  gap: 28px;
  align-items: start;
  padding: 56px 0 44px;
}

/* Brand lockup — vertically centered against the navigation column
   (the Contatti column is taller, so we offset instead of align-self:center). */
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: start;
  margin-top: 34px;
}
.footer-logo { width: 126px; height: auto; display: block; margin: auto; }
.footer-brand-line {
  display: block;
  width: 178px;
  max-width: 100%;
  height: 1px;
  background: #e7e2d7;
  margin: 22px 0;
}
.footer-wordmark { width: 152px; height: auto; display: block; margin: auto; }

/* Link columns */
.footer-title {
  margin: 0 0 22px 0;
  color: #4c4848;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 15px; }
.footer-links li:last-child { margin-bottom: 0; }
.footer-links a,
.footer-line a,
.footer-address {
  color: #6f6f6f;
  font-size: 14px;
  line-height: 1.5;
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-links a:hover,
.footer-line a:hover { color: #6d5c3c; }

/* Quality-certified box — label straddles the top border (Figma legend style) */
.footer-certs {
  position: relative;
  margin-top: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  border: 1px solid #e2ddd2;
  border-radius: 8px;
  padding: 15px 18px 13px;
}
.footer-certs-label {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;          /* cuts the border line behind the text */
  padding: 0 7px;
  font-size: 8px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #a49d90;
  white-space: nowrap;          /* keep "QUALITY CERTIFIED BY" on one line */
}
.footer-certs-logos { display: flex; align-items: center; justify-content: center; gap: 18px; }
.footer-certs-logos img { height: 38px; width: auto; display: block; }

/* Contatti */
.footer-contatti .footer-address,
.footer-contatti .footer-line,
.footer-contatti .footer-hours { white-space: nowrap; }   /* match Figma line breaks exactly */
.footer-address { font-style: normal; margin: 0 0 16px 0; }
.footer-line { margin: 0 0 14px 0; }
.footer-hours { color: #6f6f6f; font-size: 14px; line-height: 1.6; margin: 16px 0 0 0; }
.footer-follow {
  margin: 24px 0 12px 0;
  color: #4c4848;
  font-weight: 700;
  font-size: 14px;
}
.footer-social { display: flex; gap: 12px; }
.footer-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}
.footer-social-btn img { width: 30px; height: 30px; display: block; }
.footer-social-btn:hover { opacity: 0.72; }

/* Bottom legal bar */
.footer-legal {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px clamp(40px, 6vw, 90px);
  margin: 0;
  padding: 26px 0 44px;
}
.footer-legal a {
  color: #6d5c3c;
  font-size: 14px;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.footer-legal a:hover { text-decoration: underline; }

/* Responsive */
@media (max-width: 991.98px) {
  .footer-main {
    grid-template-columns: repeat(3, 1fr);
    gap: 34px 24px;
    padding: 44px 0 36px;
  }
  .footer-brand { grid-column: 1 / -1; align-self: auto; margin-top: 0; }
  .footer-brand-line { width: 220px; }
  /* let the address wrap naturally when the column is narrow */
  .footer-contatti .footer-address,
  .footer-contatti .footer-line,
  .footer-contatti .footer-hours { white-space: normal; }
}
@media (max-width: 575.98px) {
  /* Single centered column on phones */
  .footer-main {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 34px;
    padding: 40px 0 34px;
  }
  .footer-brand { align-items: center; margin-top: 0; }
  .footer-brand-line { margin-left: auto; margin-right: auto; }
  .footer-col { width: 100%; }
  .footer-certs { margin-left: auto; margin-right: auto; }
  .footer-social { justify-content: center; }
  .footer-legal {
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 22px 0 32px;
  }
}

/* ============================================================
   PAGE BANNER — inner-page hero (e.g. our-history.html)
   Reference: full-bleed image (~454px), dark shade, centered
   breadcrumb + 50px title + subtitle. Matches Figma 2173:268.
   ============================================================ */
.page-banner {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 31.5vw;                 /* 454 / 1440 */
  min-height: 440px;
  max-height: 520px;
  padding-top: 120px;             /* clear the fixed navbar; biases content lower like Figma */
  overflow: hidden;
  background: #14100c;   /* Photo is printed inline by the Our Story banner block. */
  box-sizing: border-box;
}
.page-banner-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.30) 55%, rgba(0, 0, 0, 0.46) 100%);
}
.page-banner-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
  color: #ffffff;
}

.page-crumbs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}
.page-crumbs a { color: rgba(255, 255, 255, 0.9); text-decoration: none; transition: opacity 0.2s ease; }
.page-crumbs a:hover { opacity: 0.75; }
.page-crumbs-sep { opacity: 0.7; }

.page-banner-title {
  margin: 0 auto 18px auto;
  max-width: 900px;
  color: #ffffff;
  font-weight: 700;
  font-size: clamp(30px, 3.47vw, 50px);   /* 50 / 1440 */
  line-height: 1.1;
}
.page-banner-sub {
  margin: 0 auto;
  max-width: 620px;
  color: #ffffff;
  font-weight: 400;
  font-size: clamp(14px, 1.11vw, 16px);
  line-height: 1.45;
}

@media (max-width: 991.98px) {
  .page-banner { padding-top: 88px; min-height: 380px; }
}
@media (max-width: 575.98px) {
  .page-banner { min-height: 340px; padding-top: 88px; }
  .page-banner-inner { padding-left: 8px; padding-right: 8px; }
}

/* ============================================================
   OUR PRODUCTION — section label (rules both sides) + facility slider
   Reference: Figma 2173:275 / 2173:348 / 2173:269
   ============================================================ */
.production {
  background: #ffffff;
  padding: 90px 0 96px;
}
.production .section-sep { margin-bottom: 50px; }   /* gap from label to title */
.eco .section-sep { margin-bottom: 50px; padding-top: 6px; }   /* our-history sustainability label */

/* our-history certifications spacing: ~90px above the label, 60px below it
   (the eco section above already contributes ~52px of bottom padding) */
.cert-history { padding-top: 38px; }
.cert-history .section-sep { margin-bottom: 60px; }
@media (max-width: 991.98px) {
  .cert-history { padding-top: 40px; }
  .cert-history .section-sep { margin-bottom: 44px; }
}
@media (max-width: 575.98px) {
  .cert-history { padding-top: 32px; }
  .cert-history .section-sep { margin-bottom: 34px; }
}
.prod-head { text-align: center; max-width: 900px; margin: 0 auto 48px; }
.prod-heading {
  margin: 0 0 16px 0;
  color: #4c4848;
  font-weight: 400;                         /* Gotham Book */
  font-size: clamp(22px, 2.08vw, 30px);     /* 30 / 1440 */
  line-height: 1.25;
}
.prod-lead {
  margin: 0 auto;
  max-width: 720px;
  color: #6f6f6f;
  font-weight: 400;
  font-size: clamp(14px, 1.11vw, 16px);
  line-height: 1.5;
}

/* Slider */
.prod-slider {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}
.prod-track {
  display: flex;
  transition: transform 0.55s ease;
}
.prod-slide {
  position: relative;
  flex: 0 0 100%;
  aspect-ratio: 1280 / 553;
  overflow: hidden;
}
.prod-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.prod-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.74) 0%, rgba(0, 0, 0, 0.55) 34%, rgba(0, 0, 0, 0.10) 66%, rgba(0, 0, 0, 0) 100%);
}
.prod-body {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  left: clamp(24px, 4.1%, 56px);
  max-width: 600px;
  padding-right: 24px;
  color: #ffffff;
}
.prod-title {
  margin: 0 0 20px 0;
  color: #ffffff;
  font-weight: 400;
  font-size: clamp(22px, 2.08vw, 30px);
  line-height: 1.25;
}
.prod-text p {
  margin: 0 0 14px 0;
  color: #ffffff;
  font-weight: 400;
  font-size: clamp(13px, 1.11vw, 16px);
  line-height: 1.6;
  text-align: justify;
}
.prod-text p:last-child { margin-bottom: 0; }

/* Nav arrows (bottom-right, over the image) */
.prod-nav {
  position: absolute;
  z-index: 3;
  right: 40px;
  bottom: 34px;
  display: flex;
  gap: 14px;
}
.prod-arrow {
  width: 40px;
  height: 40px;
  border-radius: 8px;                            /* rounded square, white bg (Figma) */
  border: 1px solid #d8d2c6;
  background: #ffffff;
  color: #6d5c3c;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.prod-arrow svg { width: 16px; height: 16px; }
.prod-arrow:hover { background: #6d5c3c; color: #ffffff; border-color: #6d5c3c; }

/* Responsive */
@media (max-width: 991.98px) {
  .production { padding: 64px 0 72px; }
}
@media (max-width: 767.98px) {
  .prod-slide { aspect-ratio: auto; min-height: 500px; }
  .prod-shade { background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.62) 100%); }
  .prod-body { left: 0; right: 0; max-width: none; padding: 0 24px; }
  .prod-nav { right: 20px; bottom: 20px; }
  .prod-arrow { width: 40px; height: 40px; }
}

/* ------------------------------------------------------------
   OUR PRODUCTION — global presence (stats + world map)
   ------------------------------------------------------------ */
.global-presence { margin-top: 92px; }
.gp-row { --bs-gutter-x: 64px; --bs-gutter-y: 48px; }

.gp-title {
  margin: 0 0 20px 0;
  max-width: 520px;
  color: #4c4848;
  font-weight: 400;
  font-size: clamp(24px, 2.08vw, 30px);
  line-height: 1.25;
}
.gp-text {
  margin: 0;
  max-width: 585px;
  color: #6f6f6f;
  font-weight: 400;
  font-size: clamp(14px, 1.11vw, 16px);
  line-height: 1.6;
}

/* Stats */
.gp-stats { display: flex; margin-top: 46px; }
.gp-stat {
  flex: 1 1 0;
  text-align: center;
  padding: 0 18px;
  position: relative;
}
.gp-stat + .gp-stat::before {
  content: "";
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 1px;
  background: #e2ddd2;
}
.gp-stat-ico { height: 38px; width: auto; margin: 0 auto 16px; display: block; }
.gp-stat-num {
  display: block;
  color: #756959;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.gp-stat-label { display: block; color: #6d5c3c; font-size: 14px; line-height: 1.3; }

/* World map + legend */
.gp-right { text-align: center; }
.gp-map { width: 100%; max-width: 581px; height: auto; margin: 0 auto; display: block; }
.gp-legend {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 20px 0 0;
  padding: 0;
}
.gp-legend li { display: flex; align-items: center; gap: 8px; color: #6d5c3c; font-size: 14px; }
.gp-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }

@media (max-width: 991.98px) {
  .gp-row { --bs-gutter-x: 0; }
  .global-presence { margin-top: 60px; }
  .gp-title, .gp-text { max-width: none; }
}
@media (max-width: 575.98px) {
  .gp-stats { gap: 0; }
  .gp-stat { padding: 0 10px; }
  .gp-stat-num { font-size: 18px; letter-spacing: 1.5px; }
}

/* ============================================================
   OUR STORY — timeline + gallery + catalogue cards (our-history)
   ============================================================ */
.our-story { background: #ffffff; padding-top: 90px; padding-bottom: 60px; }
.our-story .section-sep { margin-bottom: 60px; }
.cert-history { padding-bottom: 0; }      /* let OUR STORY own the 90px top gap */

.story-head { text-align: center; max-width: 860px; margin: 0 auto; }
.story-heading {
  margin: 0 0 16px 0;
  color: #4c4848;
  font-weight: 400;
  font-size: clamp(24px, 2.08vw, 30px);
  line-height: 1.25;
}
.story-lead {
  margin: 0 auto;
  max-width: 700px;
  color: #6f6f6f;
  font-weight: 400;
  font-size: clamp(14px, 1.11vw, 16px);
  line-height: 1.5;
}

/* Timeline */
.timeline5 { position: relative; display: flex; margin-top: 52px; }
.timeline5::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 10%; right: 10%;
  height: 1px;
  background: #d8d2c6;
  z-index: 0;
}
.tl5-item { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; text-align: center; padding: 0 10px; }
.tl5-marker {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1px solid #c9bfae;
  background: #ffffff;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
}
.tl5-ico { width: 26px; height: 26px; object-fit: contain; }
.tl5-year {
  display: block;
  color: #4c4848;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.tl5-caption {
  display: block;
  color: #6f6f6f;
  font-size: clamp(13px, 1.05vw, 16px);
  line-height: 1.35;
  max-width: 190px;
  margin: 0 auto;
}

/* Gallery — 5 squares */
.story-gallery { display: flex; gap: 22px; margin-top: 56px; }
.story-gallery img {
  flex: 1 1 0;
  min-width: 0;              /* allow flex items to shrink below the image's intrinsic width */
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
}

/* Catalogue + boutique cards */
.story-cards { display: flex; gap: 28px; margin-top: 28px; }
.story-card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 627 / 553;
  border-radius: 10px;
  overflow: hidden;
  isolation: isolate;
}
.story-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story-card-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.34) 46%, rgba(0,0,0,0.74) 100%);
}
.story-card-body { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 40px; color: #ffffff; }
.story-card-title {
  margin: 0 0 16px 0;
  color: #ffffff;
  font-weight: 400;
  font-size: clamp(22px, 2.08vw, 30px);
  line-height: 1.25;
  max-width: 440px;
}
.story-card-text {
  margin: 0 0 26px 0;
  color: #ffffff;
  font-weight: 400;
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.55;
  max-width: 470px;
}

/* Responsive */
@media (max-width: 991.98px) {
  .our-story { padding-top: 60px; padding-bottom: 48px; }
  .our-story .section-sep { margin-bottom: 44px; }
}
@media (max-width: 767.98px) {
  .timeline5 { flex-wrap: wrap; row-gap: 34px; margin-top: 40px; }
  .timeline5::before { display: none; }
  .tl5-item { flex: 0 0 33.333%; }
  .story-gallery { flex-wrap: wrap; gap: 14px; }
  .story-gallery img { flex: 0 0 calc((100% - 30px) / 3); }   /* 3 per row (+slack) */
  .story-cards { flex-direction: column; gap: 20px; }
  .story-card { aspect-ratio: auto; min-height: 430px; }
  .story-card-body { padding: 28px; }
}
@media (max-width: 575.98px) {
  .tl5-item { flex: 0 0 50%; }
  .story-gallery img { flex: 0 0 calc((100% - 16px) / 2); }   /* 2 per row (+slack) */
}


/* ============================================================
   BLOG LISTING — card grid + categories sidebar (blog.html)
   Reference: Figma 2127:156 (BLOG-SCYAVURU)
   ============================================================ */
.blog-listing {
  padding: 72px 0 96px 0;
}
.blog-layout {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}
.blog-main { flex: 1 1 auto; min-width: 0; }

.blog-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* ---------- Card ---------- */
.blog-card {
  position: relative;
  aspect-ratio: 299 / 425;
  border-radius: 10px;
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  display: block;
}
.blog-card-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.blog-card-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.38) 0%, rgba(0,0,0,0.42) 55%, rgba(0,0,0,0.52) 100%);
  transition: background 0.3s ease;
}
.blog-card-body {
  position: absolute; z-index: 2;
  top: 0; left: 0; right: 0;
  padding: 26px 26px 0 26px;
  color: #ffffff;
}
.blog-card-cat {
  margin: 0;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.1;
  color: #ffffff;
}
.blog-card-rule {
  display: block;            /* span is inline by default → height/margin ignored, so the line never showed */
  width: 100%;
  height: 1px;
  margin: 14px 0 16px 0;
  background: rgba(255, 255, 255, 0.75);
}
.blog-card-title {
  margin: 0;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.25;
  color: #ffffff;
}
.blog-card-more {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%) translateY(8px);
  padding: 8px 22px;
  border: 0.5px solid rgba(255, 255, 255, 0.9);
  border-radius: 5px;
  color: #ffffff;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease, color 0.2s ease;
  pointer-events: none;
}
.blog-card:hover .blog-card-img { transform: scale(1.05); }
.blog-card:hover .blog-card-shade { background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.55) 100%); }
.blog-card:hover .blog-card-more {
  opacity: 1;
  transform: translate(-50%, -50%) translateY(0);
  pointer-events: auto;
}
.blog-card-more:hover { background: #ffffff; color: #4c4848; }

/* ---------- Pagination ---------- */
.blog-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 44px;
  color: #4c4848;
  font-size: 15px;
}
.blog-pager button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border: 0.5px solid #6d5c3c;
  border-radius: 50%;
  background: transparent;
  color: #6d5c3c;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.blog-pager button:hover { background: #6d5c3c; color: #ffffff; }
.blog-pager button svg { width: 15px; height: 15px; }
.blog-pager-count { min-width: 54px; text-align: center; letter-spacing: 0.04em; }

/* ---------- Sidebar ---------- */
.blog-aside {
  flex: 0 0 288px;
  width: 288px;
}
.blog-cat-heading {
  margin: 0 0 20px 0;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: #4c4848;
}
.blog-acc {
  margin-bottom: 12px;
}
.blog-acc > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 32px;
  padding: 0 14px;
  /* 1px hairline renders on every edge; a 0.5px border drops its
     top/bottom edges at fractional display scaling, leaving a gap */
  border: 1px solid #6d5c3c;
  border-radius: 5px;
  box-sizing: border-box;
  color: #4c4848;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
}
.blog-acc > summary::-webkit-details-marker { display: none; }
.blog-acc > summary::after {
  content: "+";
  font-size: 16px;
  line-height: 1;
  color: #4c4848;
}
.blog-acc[open] > summary::after { content: "\2013"; }
.blog-acc-list {
  list-style: none;
  margin: 4px 0 0 0;
  padding: 0 2px;
}
.blog-acc-list li { border-bottom: 1px solid #d8d2c6; }
.blog-acc-list a {
  display: block;
  padding: 10px 12px;
  color: #4c4848;
  font-size: 14px;
  text-decoration: none;
  transition: color 0.2s ease;
}
.blog-acc-list a:hover { color: #6d5c3c; }

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
  .blog-aside { flex-basis: 250px; width: 250px; }
}
@media (max-width: 991.98px) {
  .blog-layout { flex-direction: column; }
  .blog-aside { width: 100%; flex-basis: auto; }
  .blog-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
  .blog-listing { padding: 48px 0 64px 0; }
  .blog-cards { grid-template-columns: 1fr; gap: 20px; }
  .blog-card { aspect-ratio: 320 / 300; }
}

/* ============================================================
   NAVBAR ON INNER PAGES
   The hero/slider now lives only on the homepage, so on every
   other page the fixed navbar has no image behind it. Give it a
   solid background there so the menu stays readable.
   ============================================================ */
.hero-navbar.is-solid {
  position: fixed;
  height: 84px;
  background: linear-gradient(0deg, #756959 0%, #756959 100%);
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.18);
}
.hero-navbar.is-solid .hero-logo { height: 56px; }

/* ============================================================
   CART PAGE
   Ported from scyavuru/cart.html. Used by
   woocommerce/cart/cart.php and woocommerce/cart/cart-empty.php.
   ============================================================ */

/* ---------- Breadcrumb strip (cream bar below the fixed navbar) ---------- */
.ct-breadcrumb {
  background: #fbfcf4;
  /* Top padding clears the 84px fixed navbar and leaves ~32px of air
     above the crumbs. The static file used 150px, which left a large
     empty band under the header. */
  padding: 116px 0 24px 0;
  text-align: center;
}
.ct-crumbs {
  margin: 0;
  color: #6d5c3c;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ct-crumbs a { color: #6d5c3c; text-decoration: none; transition: opacity .2s ease; }
.ct-crumbs a:hover { opacity: .7; }
.ct-crumbs-sep { margin: 0 8px; opacity: .55; }
.ct-crumbs .is-current { color: #6d5c3c; }

/* ---------- Layout ---------- */
/* `section.cart`, not `.cart`: WooCommerce's add-to-cart form on every
   product page carries class="cart", and a bare .cart rule gave it 48px
   top / 84px bottom padding — the mystery gap under "Add to Cart". */
section.cart { padding: 48px 0 84px 0; }
.cart-title {
  margin: 0 0 6px 0;
  color: #4c4848;
  font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
}
.cart-sub { margin: 0 0 40px 0; color: #6f6f6f; font-size: 15px; }

.cart-layout {
  display: flex;
  align-items: flex-start;
  gap: clamp(28px, 3.4vw, 56px);
}
.cart-items { flex: 1 1 auto; min-width: 0; }
.cart-aside { flex: 0 0 360px; max-width: 360px; }

/* ---------- Column header (desktop) ---------- */
.cart-head {
  display: grid;
  grid-template-columns: 1fr 120px 150px 120px 40px;
  align-items: center;
  gap: 16px;
  padding: 0 0 14px 0;
  border-bottom: 1px solid #e3ddd0;
  color: #6d5c3c;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cart-head span:nth-child(2),
.cart-head span:nth-child(3),
.cart-head span:nth-child(4) { text-align: center; }

/* ---------- Item row ---------- */
.cart-item {
  display: grid;
  grid-template-columns: 1fr 120px 150px 120px 40px;
  align-items: center;
  gap: 16px;
  padding: 24px 0;
  border-bottom: 1px solid #e3ddd0;
}
.ci-product { display: flex; align-items: center; gap: 20px; min-width: 0; }
.ci-thumb-link { flex: 0 0 auto; display: block; line-height: 0; }
.ci-thumb {
  flex: 0 0 auto;
  width: 92px;
  height: 92px;
  border: 1px solid #e3ddd0;
  border-radius: 10px;
  background: #fbfcf4;
  object-fit: contain;
  padding: 6px;
}
.ci-meta { min-width: 0; }
.ci-name {
  margin: 0 0 4px 0;
  color: #4c4848;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}
.ci-name a { color: inherit; text-decoration: none; }
.ci-name a:hover { color: #6d5c3c; }
.ci-desc {
  margin: 0;
  color: #6f6f6f;
  font-size: 13px;
  /* Product descriptions vary wildly in length; cap them at two lines so
     one long entry cannot blow up the height of the whole row. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ci-desc p { margin: 0; }

.ci-price { text-align: center; color: #4c4848; font-size: 15px; }
.ci-price .old {
  display: block;
  color: #b3a894;
  font-size: 12px;
  text-decoration: line-through;
}
.ci-price .woocommerce-Price-amount { color: inherit; }

/* ---------- Quantity stepper ---------- */
.ci-qty {
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qstep {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 118px;
  height: 44px;
  padding: 0 6px;
  border: 1px solid rgba(109, 92, 60, 0.5);
  border-radius: 10px;
}
.qstep-single { justify-content: center; color: #6d5c3c; font-size: 16px; }
.qstep button {
  width: 32px;
  height: 100%;
  border: none;
  background: none;
  color: #6d5c3c;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: opacity .2s ease;
}
.qstep button:hover { opacity: .6; }
.qstep input {
  width: 38px;
  border: none;
  background: none;
  color: #6d5c3c;
  font-family: inherit;
  font-size: 16px;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
.qstep input:focus { outline: none; }
.qstep input::-webkit-outer-spin-button,
.qstep input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* The field is readonly — the value comes from the +/- buttons only. */
.qstep input[readonly] { cursor: default; user-select: none; }

/* Spinner shown next to the stepper while the cart is being updated. */
.ci-spin {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-left: 10px;
  border: 2px solid rgba(109, 92, 60, 0.25);
  border-top-color: #6d5c3c;
  border-radius: 50%;
  opacity: 0;
  transition: opacity .15s ease;
  animation: scy-spin .6s linear infinite;
}
.cart-item.is-busy .ci-spin { opacity: 1; }
.cart-item.is-busy .qstep,
.cart-item.is-busy .ci-remove { opacity: .45; pointer-events: none; }
.cart-item.is-busy .ci-total { opacity: .45; }

.summary { transition: opacity .15s ease; }
.summary.is-busy { opacity: .5; pointer-events: none; }

@keyframes scy-spin { to { transform: rotate(360deg); } }

/* Shared visibility helper (matches the static templates). */
.is-hidden { display: none !important; }

.ci-total { text-align: center; color: #4c4848; font-weight: 700; font-size: 16px; }

.ci-remove {
  justify-self: center;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: #b3a894;
  cursor: pointer;
  border-radius: 50%;
  text-decoration: none;
  transition: color .2s ease, background .2s ease;
}
.ci-remove:hover { color: #c0392b; background: #f4efe6; }
.ci-remove svg { width: 18px; height: 18px; }

/* ---------- Under-list actions ---------- */
.cart-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 26px;
}
.cart-continue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #6d5c3c;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity .2s ease;
}
.cart-continue:hover { opacity: .65; }

/* The stepper submits the form for us; the button stays in the DOM for
   keyboard users and no-JS fallback, visually out of the way. */
.cart-update {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.cart-update:focus-visible {
  position: static;
  width: auto;
  height: auto;
  margin: 18px 0 0 0;
  padding: 10px 20px;
  clip: auto;
  border: 1px solid #6d5c3c;
  border-radius: 5px;
  background: transparent;
  color: #6d5c3c;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---------- Order summary card ---------- */
.summary {
  border: 1px solid #e3ddd0;
  border-radius: 12px;
  background: #fbfcf4;
  padding: 30px 30px 34px 30px;
  position: sticky;
  top: 140px;
}
.summary-title {
  margin: 0 0 22px 0;
  color: #4c4848;
  font-weight: 400;
  font-size: 20px;
}
.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
  color: #6f6f6f;
  font-size: 14px;
}
.summary-row .val { color: #4c4848; font-weight: 500; }
.summary-row.save .val { color: #7ba05b; }
.summary-rule { height: 1px; background: #e3ddd0; margin: 20px 0; }
.summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 24px;
  color: #4c4848;
}
.summary-total .lbl { font-size: 15px; font-weight: 600; }
.summary-total .amt { font-size: 26px; font-weight: 700; }
.summary-note { margin: 0 0 22px 0; color: #9a917f; font-size: 12px; }

.btn-checkout {
  display: block;
  width: 100%;
  padding: 15px 20px;
  border: 0.5px solid #6d5c3c;
  border-radius: 5px;
  background: #6d5c3c;
  color: #ffffff;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.btn-checkout:hover { background: #5a4b30; color: #ffffff; }

.summary-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 0 0;
  color: #9a917f;
  font-size: 12px;
}
.summary-secure svg { width: 14px; height: 14px; }

/* ---------- Empty state ---------- */
.cart-empty { text-align: center; padding: 40px 0 20px; }
.cart-empty-ico {
  width: 64px;
  height: 64px;
  margin: 0 auto 22px;
  color: #cbc1ad;
}
.cart-empty h2 { margin: 0 0 10px; color: #4c4848; font-weight: 400; font-size: 24px; }
.cart-empty p { margin: 0 0 26px; color: #6f6f6f; font-size: 15px; }
.cart-empty .btn-checkout {
  display: inline-block;
  width: auto;
  padding: 14px 34px;
  background: transparent;
  color: #6d5c3c;
}
.cart-empty .btn-checkout:hover { background: #6d5c3c; color: #fff; }

/* ---------- WooCommerce notices on the cart page ---------- */
section.cart .woocommerce-message,
section.cart .woocommerce-info,
section.cart .woocommerce-error {
  position: relative;
  margin: 0 0 26px 0;
  /* Left padding leaves room for WooCommerce's absolutely positioned
     status icon, which otherwise prints on top of the text. */
  padding: 14px 18px 14px 46px;
  border: 1px solid #e3ddd0;
  border-left: 3px solid #6d5c3c;
  border-radius: 8px;
  background: #fbfcf4;
  color: #4c4848;
  font-size: 14px;
  list-style: none;
}
section.cart .woocommerce-message::before,
section.cart .woocommerce-info::before,
section.cart .woocommerce-error::before {
  top: 15px;
  left: 18px;
  color: #6d5c3c;
}
section.cart .woocommerce-error::before { color: #c0392b; }
section.cart .woocommerce-error { border-left-color: #c0392b; }
section.cart .woocommerce-message a,
section.cart .woocommerce-info a { color: #6d5c3c; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  .cart-layout { flex-direction: column; }
  .cart-aside { flex-basis: auto; max-width: none; width: 100%; }
  .summary { position: static; }
}
@media (max-width: 767.98px) {
  .cart-head { display: none; }
  .cart-item {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "product remove"
      "price   price"
      "qty     total";
    row-gap: 14px;
  }
  .ci-product { grid-area: product; }
  .ci-remove { grid-area: remove; justify-self: end; align-self: start; }
  .ci-price { grid-area: price; text-align: left; }
  .ci-qty { grid-area: qty; justify-self: start; }
  .ci-total { grid-area: total; text-align: right; align-self: center; }
  .ci-price::before,
  .ci-total::before {
    content: attr(data-label) ": ";
    color: #9a917f;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
}
@media (max-width: 575.98px) {
  .ci-thumb { width: 72px; height: 72px; }
  section.cart { padding: 32px 0 64px 0; }
  .ct-breadcrumb { padding: 104px 0 20px 0; }
}

/* ============================================================
   CHECKOUT PAGE
   Ported from scyavuru/checkout.html and mapped onto the markup
   WooCommerce's woocommerce_form_field() actually produces.
   Used by woocommerce/checkout/form-checkout.php, review-order.php
   and payment.php. (Breadcrumb styles are shared with the cart.)
   ============================================================ */

.checkout { padding: 48px 0 84px 0; }
.checkout-title {
  margin: 0 0 6px 0;
  color: #4c4848;
  font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
}
.checkout-sub { margin: 0 0 40px 0; color: #6f6f6f; font-size: 15px; }

.checkout-layout {
  display: flex;
  align-items: flex-start;
  gap: clamp(28px, 3.4vw, 56px);
}
.checkout-main { flex: 1 1 auto; min-width: 0; }
.checkout-aside { flex: 0 0 384px; max-width: 384px; }

/* ---------- Numbered blocks ---------- */
.co-block { margin-bottom: 40px; }
.co-block-head { display: flex; align-items: center; gap: 12px; margin: 0 0 20px 0; }
.co-step {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #6d5c3c;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.co-block-title { margin: 0; color: #4c4848; font-weight: 500; font-size: 18px; }

/* ---------- Fields ----------
   WooCommerce wraps each field in <p class="form-row">, so the grid items
   are .form-row rather than the static file's .co-field.

   NOTE ON SPECIFICITY: WooCommerce's stylesheet is enqueued after the
   theme's, and its rules are shaped `.woocommerce form .form-row ...`
   (three classes). Every rule below is therefore scoped with
   `.checkout .checkout-main` so it outranks them — without that,
   .form-row-first/.form-row-last keep WooCommerce's 47% float width and
   the inputs keep Bootstrap's 36px .form-control height. */
.co-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.checkout .checkout-main .co-grid .form-row {
  display: flex;
  flex-direction: column;
  width: 100%;
  float: none;
  margin: 0;
  padding: 0;
}
.checkout .checkout-main .co-grid .woocommerce-input-wrapper {
  display: block;
  width: 100%;
}

/* WooCommerce marks almost every billing field `form-row-wide`, so the
   two-column layout is driven by explicit spans and order rather than by
   that class. Target order (per the Figma): name pair / address /
   city + state / postcode + country. */
.checkout .checkout-main .co-grid #billing_company_field,
.checkout .checkout-main .co-grid #billing_address_1_field,
.checkout .checkout-main .co-grid #billing_address_2_field,
.checkout .checkout-main .co-grid #order_comments_field { grid-column: 1 / -1; }

.checkout .checkout-main .co-grid #billing_first_name_field { order: 1; }
.checkout .checkout-main .co-grid #billing_last_name_field { order: 2; }
.checkout .checkout-main .co-grid #billing_company_field { order: 3; }
.checkout .checkout-main .co-grid #billing_address_1_field { order: 4; }
.checkout .checkout-main .co-grid #billing_address_2_field { order: 5; }
.checkout .checkout-main .co-grid #billing_city_field { order: 6; }
.checkout .checkout-main .co-grid #billing_state_field { order: 7; }
.checkout .checkout-main .co-grid #billing_postcode_field { order: 8; }
.checkout .checkout-main .co-grid #billing_country_field { order: 9; }

.checkout .checkout-main .co-grid .form-row > label {
  display: block;
  margin: 0 0 7px 2px;
  padding: 0;
  color: #6d5c3c;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.checkout .checkout-main .co-grid .form-row > label .required {
  color: #c0392b;
  text-decoration: none;
  border: 0;
}
.checkout .checkout-main .co-grid .form-row > label .optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.checkout .checkout-main .co-grid .form-row input.input-text,
.checkout .checkout-main .co-grid .form-row input[type="text"],
.checkout .checkout-main .co-grid .form-row input[type="email"],
.checkout .checkout-main .co-grid .form-row input[type="tel"],
.checkout .checkout-main .co-grid .form-row input[type="password"],
.checkout .checkout-main .co-grid .form-row input[type="number"],
.checkout .checkout-main .co-grid .form-row select,
.checkout .checkout-main .co-grid .form-row textarea {
  width: 100%;
  height: 48px;
  margin: 0;
  padding: 0 15px;
  border: 1px solid #e3ddd0;
  border-radius: 8px;
  background-color: #fff;
  color: #4c4848;
  font-family: inherit;
  font-size: 15px;
  line-height: normal;
  box-shadow: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.checkout .checkout-main .co-grid .form-row textarea {
  height: 88px;
  min-height: 88px;
  padding: 13px 15px;
  line-height: 1.4;
  resize: vertical;
}
.checkout .checkout-main .co-grid .form-row select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236d5c3c' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.checkout .checkout-main .co-grid ::placeholder { color: #b3a894; }
.checkout .checkout-main .co-grid .form-row input:focus,
.checkout .checkout-main .co-grid .form-row select:focus,
.checkout .checkout-main .co-grid .form-row textarea:focus {
  outline: none;
  border-color: #6d5c3c;
  box-shadow: 0 0 0 3px rgba(109, 92, 60, .10);
}
.checkout .checkout-main .co-grid .form-row.woocommerce-invalid input,
.checkout .checkout-main .co-grid .form-row.woocommerce-invalid select,
.checkout .checkout-main .co-grid .form-row.woocommerce-invalid .select2-selection--single {
  border-color: #c0392b;
}
.checkout .checkout-main .co-grid .description { margin: 6px 0 0; color: #9a917f; font-size: 12px; }

/* selectWoo / select2 replaces the country + state selects. Same
   specificity story as the inputs above, hence the long prefixes. */
.checkout .checkout-main .co-grid .select2-container {
  display: block;
  width: 100% !important;
  height: 48px;
}
.checkout .checkout-main .co-grid .select2-container .select2-selection--single {
  height: 48px;
  border: 1px solid #e3ddd0;
  border-radius: 8px;
  background: #fff;
  outline: none;
}
.checkout .checkout-main .co-grid .select2-container .select2-selection--single .select2-selection__rendered {
  /* Full shorthand: select2 ships 7.5px of vertical padding, which on top
     of the 46px line-height pushed the label out of the 48px box and made
     it sit low against the bottom border. */
  height: 46px;
  padding: 0 38px 0 15px;
  color: #4c4848;
  font-size: 15px;
  line-height: 46px;
}
/* The theme's form-field filter sets data-allow-clear, which drops an
   "x" on top of the arrow on required selects. */
.checkout .checkout-main .co-grid .select2-container .select2-selection__clear { display: none; }
/* Replace select2's CSS-triangle with the same chevron the native
   selects use, so the two field types look identical. */
.checkout .checkout-main .co-grid .select2-container .select2-selection--single .select2-selection__arrow {
  top: 0;
  right: 14px;
  width: 12px;
  height: 48px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236d5c3c' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
}
.checkout .checkout-main .co-grid .select2-container .select2-selection--single .select2-selection__arrow b { display: none; }
.checkout .checkout-main .co-grid .select2-container--open .select2-selection--single,
.checkout .checkout-main .co-grid .select2-container--focus .select2-selection--single {
  border-color: #6d5c3c;
  box-shadow: 0 0 0 3px rgba(109, 92, 60, .10);
}
.select2-dropdown {
  border-color: #e3ddd0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(76, 72, 72, .14);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: #f4efe6;
  color: #6d5c3c;
}

/* ---------- Option cards (shipping / payment) ---------- */
.co-options { display: flex; flex-direction: column; gap: 12px; }
.co-option {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 16px 18px;
  border: 1px solid #e3ddd0;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.co-option:hover { border-color: #c9bfa8; }
.co-option.is-active { border-color: #6d5c3c; background: #fbfcf4; }
.co-radio {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid #c0b69f;
  position: relative;
  transition: border-color .2s ease;
}
.co-option.is-active .co-radio { border-color: #6d5c3c; }
.co-option.is-active .co-radio::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #6d5c3c;
}
.co-option input { position: absolute; opacity: 0; pointer-events: none; }
.co-opt-main { flex: 1 1 auto; min-width: 0; }
.co-opt-name { display: block; color: #4c4848; font-size: 14px; font-weight: 600; }
.co-opt-name img { max-height: 22px; width: auto; margin-left: 6px; vertical-align: middle; }
.co-opt-desc { display: block; color: #6f6f6f; font-size: 12.5px; margin-top: 2px; }
.co-opt-price { color: #4c4848; font-size: 14px; font-weight: 600; white-space: nowrap; }
.co-ship-empty { margin: 0; color: #9a917f; font-size: 14px; }

/* Gateway fields revealed under the selected card. */
.co-card-fields {
  margin: -4px 0 0 0;
  padding: 16px 18px;
  border: 1px solid #e3ddd0;
  border-top: none;
  border-radius: 0 0 10px 10px;
  background: #fbfcf4;
  color: #6f6f6f;
  font-size: 13.5px;
}
.co-card-fields p:last-child { margin-bottom: 0; }
.co-card-fields input[type="text"],
.co-card-fields input[type="email"],
.co-card-fields input[type="tel"],
.co-card-fields select {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid #e3ddd0;
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  font-size: 15px;
}
.co-noscript { margin: 14px 0 0; color: #6f6f6f; font-size: 13px; }

/* ---------- Order summary (aside) ---------- */
.co-summary {
  border: 1px solid #e3ddd0;
  border-radius: 12px;
  background: #fbfcf4;
  padding: 28px 28px 32px 28px;
  position: sticky;
  top: 140px;
}
.co-summary-title { margin: 0 0 20px 0; color: #4c4848; font-weight: 400; font-size: 20px; }

.co-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid #e7e1d4;
}
.co-item:first-of-type { padding-top: 0; }
.co-thumb-wrap { position: relative; flex: 0 0 auto; }
.co-thumb {
  width: 56px;
  height: 56px;
  border: 1px solid #e3ddd0;
  border-radius: 8px;
  background: #fff;
  object-fit: contain;
  padding: 4px;
  display: block;
}
.co-qbadge {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #6d5c3c;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  border-radius: 999px;
  box-shadow: 0 0 0 2px #fbfcf4;
}
.co-iname {
  flex: 1 1 auto;
  min-width: 0;
  color: #4c4848;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
}
.co-idesc { display: block; color: #9a917f; font-size: 12px; font-weight: 400; margin-top: 3px; }
.co-idesc p { margin: 0; }
.co-iprice { color: #4c4848; font-size: 14px; font-weight: 700; white-space: nowrap; }

.co-totals { margin-top: 18px; }
.co-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  color: #6f6f6f;
  font-size: 14px;
}
.co-row .val { color: #4c4848; font-weight: 500; }
.co-row.save .val { color: #7ba05b; }
.co-rule { height: 1px; background: #e3ddd0; margin: 18px 0; }
.co-grandtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 22px;
  color: #4c4848;
}
.co-grandtotal .lbl { font-size: 15px; font-weight: 600; }
.co-grandtotal .amt { font-size: 26px; font-weight: 700; }
.co-grandtotal .amt small { display: block; font-size: 12px; font-weight: 400; color: #9a917f; }

.btn-place {
  display: block;
  width: 100%;
  padding: 15px 20px;
  border: 0.5px solid #6d5c3c;
  border-radius: 5px;
  background: #6d5c3c;
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease;
}
.btn-place:hover { background: #5a4b30; color: #fff; }
.co-summary .place-order { margin: 0; padding: 0; }
.co-summary .place-order .woocommerce-terms-and-conditions-wrapper {
  margin: 0 0 16px 0;
  color: #6f6f6f;
  font-size: 12.5px;
}
.co-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 0 0;
  color: #9a917f;
  font-size: 12px;
}
.co-secure svg { width: 14px; height: 14px; }

.co-backcart {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  color: #6d5c3c;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity .2s ease;
}
.co-backcart:hover { opacity: .65; color: #6d5c3c; }

/* ---------- WooCommerce notices on the checkout ---------- */
.checkout .woocommerce-error,
.checkout .woocommerce-info,
.checkout .woocommerce-message,
.checkout .woocommerce-NoticeGroup ul {
  position: relative;
  margin: 0 0 26px 0;
  padding: 14px 18px 14px 46px;
  border: 1px solid #e3ddd0;
  border-left: 3px solid #6d5c3c;
  border-radius: 8px;
  background: #fbfcf4;
  color: #4c4848;
  font-size: 14px;
  list-style: none;
}
.checkout .woocommerce-error { border-left-color: #c0392b; }
.checkout .woocommerce-error li { list-style: none; }
.checkout .woocommerce-error::before,
.checkout .woocommerce-info::before,
.checkout .woocommerce-message::before { top: 15px; left: 18px; color: #6d5c3c; }
.checkout .woocommerce-error::before { color: #c0392b; }
.co-must-login { color: #6f6f6f; font-size: 15px; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  .checkout-layout { flex-direction: column-reverse; }
  .checkout-aside { flex-basis: auto; max-width: none; width: 100%; }
  .co-summary { position: static; }
}
@media (max-width: 575.98px) {
  .co-grid { grid-template-columns: 1fr; }
  .checkout { padding: 32px 0 64px 0; }
}

/* ---------- Checkout: overrides for WooCommerce's own chrome ---------- */
/* WooCommerce paints #payment with a grey panel and rounded corners. */
.checkout-main #payment.woocommerce-checkout-payment {
  padding: 0;
  border-radius: 0;
  background: transparent;
}
.checkout-main #payment.woocommerce-checkout-payment .woocommerce-notice {
  margin: 0;
  padding: 14px 18px 14px 46px;
  border: 1px solid #e3ddd0;
  border-left: 3px solid #6d5c3c;
  border-radius: 8px;
  background: #fbfcf4;
  color: #4c4848;
  font-size: 14px;
}
.checkout-main #payment.woocommerce-checkout-payment .woocommerce-notice::before {
  top: 15px;
  left: 18px;
  color: #6d5c3c;
}


/* ---------- Checkout: coupon + login forms ----------
   WooCommerce ships these with Bootstrap's blue outline button and focus
   ring; repaint them in the brand palette. Selectors carry the extra
   .checkout / form.checkout_coupon classes so they outrank
   `.woocommerce form .form-row-first` and Bootstrap's .form-control. */
.checkout .woocommerce-form-coupon-toggle { margin-bottom: 18px; }
.checkout .woocommerce-form-coupon-toggle .woocommerce-info { margin: 0; }
.checkout .woocommerce-info a.showcoupon,
.checkout .woocommerce-info a.showlogin {
  color: #6d5c3c;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.checkout .woocommerce-info a.showcoupon:hover,
.checkout .woocommerce-info a.showlogin:hover { opacity: .7; }

.checkout form.checkout_coupon,
.checkout form.woocommerce-form-login {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 0 0 30px 0;
  padding: 24px 26px;
  border: 1px solid #e3ddd0;
  border-radius: 12px;
  background: #fbfcf4;
}
.checkout form.checkout_coupon > p:first-of-type,
.checkout form.woocommerce-form-login > p:first-of-type {
  flex: 1 0 100%;
  margin: 0;
  color: #6f6f6f;
  font-size: 14px;
}
.checkout form.checkout_coupon .form-row,
.checkout form.checkout_coupon .form-row.form-row-first,
.checkout form.checkout_coupon .form-row.form-row-last,
.checkout form.woocommerce-form-login .form-row,
.checkout form.woocommerce-form-login .form-row.form-row-first,
.checkout form.woocommerce-form-login .form-row.form-row-last {
  width: auto;
  float: none;
  margin: 0;
  padding: 0;
}
.checkout form.checkout_coupon .form-row.form-row-first,
.checkout form.woocommerce-form-login .form-row.form-row-first { flex: 1 1 260px; }

.checkout form.checkout_coupon input[type="text"],
.checkout form.woocommerce-form-login input[type="text"],
.checkout form.woocommerce-form-login input[type="password"] {
  width: 100%;
  height: 48px;
  padding: 0 15px;
  border: 1px solid #e3ddd0;
  border-radius: 8px;
  background-color: #fff;
  color: #4c4848;
  font-family: inherit;
  font-size: 15px;
  box-shadow: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.checkout form.checkout_coupon input[type="text"]:focus,
.checkout form.woocommerce-form-login input:focus {
  outline: none;
  border-color: #6d5c3c;
  box-shadow: 0 0 0 3px rgba(109, 92, 60, .10);
}
.checkout form.checkout_coupon input[type="text"]::placeholder { color: #b3a894; }

.checkout form.checkout_coupon button,
.checkout form.woocommerce-form-login button {
  height: 48px;
  padding: 0 26px;
  border: 0.5px solid #6d5c3c;
  border-radius: 5px;
  background: #6d5c3c;
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s ease;
}
.checkout form.checkout_coupon button:hover,
.checkout form.woocommerce-form-login button:hover { background: #5a4b30; color: #fff; }
.checkout form.checkout_coupon .clear,
.checkout form.woocommerce-form-login .clear { display: none; }

.checkout form.woocommerce-form-login .woocommerce-form-login__rememberme,
.checkout form.woocommerce-form-login .lost_password {
  flex: 1 0 100%;
  margin: 0;
  color: #6f6f6f;
  font-size: 13px;
}
.checkout form.woocommerce-form-login .lost_password a { color: #6d5c3c; }

/* ---------- Checkout: privacy / terms copy in the summary ----------
   WooCommerce prints these through woocommerce_review_order_before_submit,
   so they land inside the cream card with default link blue. */
.co-summary .woocommerce-privacy-policy-text,
.co-summary .woocommerce-terms-and-conditions-wrapper {
  margin: 0 0 18px 0;
  color: #9a917f;
  font-size: 12px;
  line-height: 1.55;
}
.co-summary .woocommerce-privacy-policy-text p,
.co-summary .woocommerce-terms-and-conditions-wrapper p { margin: 0; }
.co-summary .woocommerce-privacy-policy-text a,
.co-summary .woocommerce-terms-and-conditions-wrapper a {
  color: #6d5c3c;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: opacity .2s ease;
}
.co-summary .woocommerce-privacy-policy-text a:hover,
.co-summary .woocommerce-terms-and-conditions-wrapper a:hover { opacity: .7; color: #6d5c3c; }

/* ============================================================
   SIGN IN / MY ACCOUNT
   Ported from scyavuru/signin.html. Used by
   woocommerce/myaccount/form-login.php.
   ============================================================ */

.signin {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 90px 20px;
  min-height: 720px;
  background: #ffffff;
  overflow: hidden;
}
/* Sicilian landscape line-art behind the card. The source image is
   already a pale watermark, so it is shown at full opacity. */
.signin-bg {
  position: absolute;
  inset: 0;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
}

.signin-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 458px;
  padding: 42px 40px 44px 40px;
  border: 0.5px solid #6d5c3c;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06);
  text-align: center;
}
.signin-title {
  margin: 0 0 16px 0;
  color: #333333;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.signin-sub {
  margin: 0 auto 30px auto;
  max-width: 395px;
  color: #000000;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.35;
}

.signin-form { display: flex; flex-direction: column; align-items: stretch; }
/* WooCommerce draws its own bordered panel around form.login /
   form.register — the card already provides that frame. */
.signin-card form.login,
.signin-card form.register {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
/* WooCommerce wraps password fields in <span class="password-input">,
   which becomes the flex item in place of the input itself. */
.signin-card .password-input {
  position: relative;
  display: block;
  width: 100%;
  margin-bottom: 16px;
}
.signin-card .password-input .signin-field { margin-bottom: 0; }
.signin-card .show-password-input {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  color: #6d5c3c;
  cursor: pointer;
}
.signin-card .signin-field {
  width: 100%;
  height: 44px;
  margin-bottom: 16px;
  padding: 0 16px;
  border: 0.7px solid #6d5c3c;
  border-radius: 6px;
  background: #ffffff;
  color: #4c4848;
  font-family: inherit;
  font-size: 16px;
  box-shadow: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.signin-card .signin-field::placeholder { color: #959595; }
.signin-card .signin-field:focus {
  outline: none;
  border-color: #6d5c3c;
  box-shadow: 0 0 0 2px rgba(109, 92, 60, 0.14);
}

.signin-remember {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 2px 0 0 0;
  color: #6f6f6f;
  font-size: 14px;
  cursor: pointer;
}
.signin-remember input { accent-color: #6d5c3c; }
.signin-note { margin: 0 0 4px; color: #6f6f6f; font-size: 13px; }

.signin-card .signin-submit {
  align-self: center;
  margin: 12px 0 4px 0;
  min-width: 113px;
  padding: 9px 22px;
  border: 0.5px solid #6d5c3c;
  border-radius: 5px;
  background: transparent;
  color: #6d5c3c;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.signin-card .signin-submit:hover { background: #6d5c3c; color: #ffffff; }

.signin-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
}
.signin-links a {
  color: #000000;
  font-size: 16px;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s ease;
}
.signin-links a:hover { color: #6d5c3c; }

/* WooCommerce notices (bad password, "please log in", registration
   errors) render just above the card. */
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-message {
  position: relative;
  max-width: 640px;
  margin: 0 auto 24px auto;
  padding: 14px 18px 14px 46px;
  border: 1px solid #e3ddd0;
  border-left: 3px solid #6d5c3c;
  border-radius: 8px;
  background: #fbfcf4;
  color: #4c4848;
  font-size: 14px;
  list-style: none;
}
.woocommerce-account .woocommerce-error { border-left-color: #c0392b; }
.woocommerce-account .woocommerce-error li { list-style: none; }
.woocommerce-account .woocommerce-error::before,
.woocommerce-account .woocommerce-info::before,
.woocommerce-account .woocommerce-message::before { top: 15px; left: 18px; color: #6d5c3c; }
.woocommerce-account .woocommerce-error::before { color: #c0392b; }
.woocommerce-account .woocommerce-info a { color: #6d5c3c; font-weight: 600; }

@media (max-width: 575.98px) {
  .signin { padding: 60px 16px; min-height: 620px; }
  .signin-card { padding: 34px 24px 36px 24px; border-radius: 16px; }
  .signin-sub { font-size: 15px; }
}

/* Registration privacy notice + generated-password note inside the card. */
.signin-card .woocommerce-privacy-policy-text,
.signin-card .signin-note {
  margin: 4px 0 8px 0;
  color: #6f6f6f;
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
}
.signin-card .woocommerce-privacy-policy-text p { margin: 0; }
.signin-card .woocommerce-privacy-policy-text a {
  color: #6d5c3c;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.signin-card .woocommerce-privacy-policy-text a:hover { opacity: .7; color: #6d5c3c; }

/* ---------- Checkout: validation notices ----------
   WooCommerce prepends .woocommerce-NoticeGroup-checkout to form.checkout
   after a failed submit. That form IS the flex layout, so the notice
   became a third flex item squeezed into a narrow left column. Give it a
   full-width row of its own above the columns instead. */
.checkout .checkout-layout { flex-wrap: wrap; }
.checkout .checkout-layout > .woocommerce-NoticeGroup,
.checkout .checkout-layout > .woocommerce-error,
.checkout .checkout-layout > .woocommerce-info,
.checkout .checkout-layout > .woocommerce-message {
  flex: 1 0 100%;
  width: 100%;
  order: -1;
  margin: 0;
}
.checkout .woocommerce-NoticeGroup ul,
.checkout .woocommerce-NoticeGroup ul.woocommerce-error {
  margin: 0;
  padding-left: 46px;
}
.checkout .woocommerce-NoticeGroup ul li { list-style: none; }

@media (max-width: 991.98px) {
  /* The layout is column-reverse here, so the highest order value is the
     one that renders at the top. */
  .checkout .checkout-layout > .woocommerce-NoticeGroup,
  .checkout .checkout-layout > .woocommerce-error,
  .checkout .checkout-layout > .woocommerce-info,
  .checkout .checkout-layout > .woocommerce-message { order: 2; }
}

/* ============================================================
   ORDER RECEIVED  +  MY ACCOUNT
   The success block is ported from scyavuru/checkout.html
   (.co-done); the account area reuses the same card language.
   Used by woocommerce/checkout/thankyou.php,
   woocommerce/order/order-details.php and woocommerce/myaccount/*.
   ============================================================ */

/* ---------- Success / failure block ---------- */
.co-done {
  max-width: 560px;
  margin: 0 auto;
  padding: 30px 0 10px;
  text-align: center;
}
.co-done-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: #eef3e6;
  color: #7ba05b;
}
.co-done-ico svg { width: 34px; height: 34px; }
.co-done-ico--failed { background: #f7e9e7; color: #c0392b; }
.co-done h2 { margin: 0 0 12px; color: #4c4848; font-weight: 400; font-size: 26px; }
.co-done p { margin: 0 0 8px; color: #6f6f6f; font-size: 15px; }
.co-done .oid { color: #6d5c3c; font-weight: 700; }
.co-done-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 28px;
}
/* Inline variant of the solid brand button. */
.btn-place--inline { display: inline-block; width: auto; padding: 14px 34px; }

/* Order facts (number / date / total / payment method). */
.co-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin: 28px 0 0 0;
  padding: 22px 24px;
  border: 1px solid #e3ddd0;
  border-radius: 12px;
  background: #fbfcf4;
  list-style: none;
}
.co-fact {
  flex: 1 1 140px;
  min-width: 0;
  text-align: center;
}
.co-fact-label {
  display: block;
  margin-bottom: 6px;
  color: #6d5c3c;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.co-fact-value { display: block; color: #4c4848; font-size: 15px; font-weight: 500; }
.co-fact-value .woocommerce-Price-amount { font-weight: 700; }

/* ---------- Order details card ---------- */
.order-card,
.woocommerce-customer-details {
  max-width: 720px;
  margin: 36px auto 0 auto;
  padding: 28px 28px 30px 28px;
  border: 1px solid #e3ddd0;
  border-radius: 12px;
  background: #fbfcf4;
}
.order-card-title,
.woocommerce-customer-details h2 {
  margin: 0 0 20px 0;
  color: #4c4848;
  font-weight: 400;
  font-size: 20px;
}
.woocommerce-customer-details address {
  margin: 0;
  padding: 0;
  border: 0;
  color: #6f6f6f;
  font-size: 14px;
  font-style: normal;
  line-height: 1.7;
}
.woocommerce-customer-details .woocommerce-customer-details--email,
.woocommerce-customer-details .woocommerce-customer-details--phone { margin: 8px 0 0; }

/* ---------- Downloads (thank-you page + account) ---------- */
.woocommerce-order-downloads,
.dl-list {
  max-width: 720px;
  margin: 36px auto 0 auto;
}
.account-content .dl-list { max-width: none; margin: 0; }
.dl-item {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  padding: 16px 18px;
  border: 1px solid #e3ddd0;
  border-radius: 10px;
  background: #fbfcf4;
}
.dl-ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #f1ece0;
  color: #6d5c3c;
}
.dl-ico svg { width: 20px; height: 20px; }
.dl-meta { flex: 1 1 auto; min-width: 0; }
.dl-name { display: block; color: #4c4848; font-size: 14px; font-weight: 600; }
.dl-sub { display: block; margin-top: 3px; color: #9a917f; font-size: 12.5px; }
.dl-sub a { color: #6d5c3c; }
.dl-btn {
  flex: 0 0 auto;
  padding: 10px 22px;
  border: 0.5px solid #6d5c3c;
  border-radius: 5px;
  background: transparent;
  color: #6d5c3c;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
.dl-btn:hover { background: #6d5c3c; color: #fff; }

/* ---------- My Account layout ---------- */
.account { padding: 48px 0 84px 0; }
.account-title {
  margin: 0 0 32px 0;
  color: #4c4848;
  font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
}
.account-layout {
  display: flex;
  align-items: flex-start;
  gap: clamp(28px, 3.4vw, 56px);
}
.woocommerce-account .woocommerce-MyAccount-navigation {
  flex: 0 0 240px;
  max-width: 240px;
  width: 240px;
  padding: 14px;
  border: 1px solid #e3ddd0;
  border-radius: 12px;
  background: #fbfcf4;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 11px 14px;
  border-radius: 8px;
  color: #6f6f6f;
  font-size: 14px;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: #f1ece0; color: #6d5c3c; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  background: #6d5c3c;
  color: #ffffff;
  font-weight: 600;
}
.account-content { flex: 1 1 auto; min-width: 0; }
.account-content > p { color: #6f6f6f; font-size: 15px; }
/* Buttons are excluded: :not() counts toward specificity, so without
   these exclusions this rule (0,3,1) outranks the button rules below
   and paints their labels brown-on-brown. */
.account-content a:not(.dl-btn):not(.btn-place):not(.button):not(.btn):not(.woocommerce-button) { color: #6d5c3c; }

.account-empty {
  padding: 40px 20px;
  border: 1px solid #e3ddd0;
  border-radius: 12px;
  background: #fbfcf4;
  text-align: center;
}
.account-empty-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 18px;
  color: #cbc1ad;
}
.account-empty-ico svg { width: 34px; height: 34px; }
.account-empty h2 { margin: 0 0 10px; color: #4c4848; font-weight: 400; font-size: 22px; }
.account-empty p { margin: 0 0 24px; color: #6f6f6f; font-size: 15px; }

@media (max-width: 991.98px) {
  .account-layout { flex-direction: column; }
  .woocommerce-account .woocommerce-MyAccount-navigation {
    flex-basis: auto;
    max-width: none;
    width: 100%;
  }
}
@media (max-width: 575.98px) {
  .account { padding: 32px 0 64px 0; }
  .dl-item { flex-wrap: wrap; }
  .dl-btn { width: 100%; text-align: center; }
  .co-done-actions { flex-direction: column; gap: 14px; }
}

/* ---------- Order received: links + gateway copy ----------
   Product names in the order card and the customer-details block are
   real links, so they arrive in default browser blue. */
.order-card .co-iname a,
.woocommerce-order-downloads a:not(.dl-btn),
.woocommerce-customer-details a {
  color: #4c4848;
  text-decoration: none;
  transition: color .2s ease;
}
.order-card .co-iname a:hover,
.woocommerce-customer-details a:hover { color: #6d5c3c; }
.woocommerce-customer-details a[href^="mailto"],
.woocommerce-customer-details a[href^="tel"] { color: #6d5c3c; }

/* Gateway instructions (e.g. Cash on delivery) print a bare <p> straight
   into the page — centre it under the success block. */
.thankyou > .container-1440 > p {
  max-width: 720px;
  margin: 24px auto 0 auto;
  color: #6f6f6f;
  font-size: 15px;
  text-align: center;
}
.thankyou .woocommerce-thankyou-order-received {
  max-width: 720px;
  margin: 0 auto;
  color: #6f6f6f;
  text-align: center;
}
.thankyou .co-item:last-of-type { border-bottom: none; }
.thankyou .order-card .co-totals { margin-top: 8px; }

/* ============================================================
   MY ACCOUNT — WooCommerce chrome
   Tables, buttons and forms inside the account area arrive with
   WooCommerce's grey/purple defaults and Bootstrap's blue .btn.
   Everything below repaints them in the brand palette.

   Specificity note: WooCommerce's stylesheet loads after the theme's,
   so these rules carry the extra .woocommerce-account /
   .account-content classes to outrank it without !important.
   ============================================================ */

/* ---------- Tables (orders, addresses, order details) ---------- */
.woocommerce-account .account-content table,
.woocommerce-account .account-content table.shop_table {
  width: 100%;
  margin: 0 0 24px 0;
  border: 1px solid #e3ddd0;
  border-radius: 12px;
  border-collapse: separate;
  border-spacing: 0;
  background: #fbfcf4;
  overflow: hidden;
  font-size: 14px;
}
.woocommerce-account .account-content table th,
.woocommerce-account .account-content table.shop_table th {
  padding: 14px 18px;
  border: 0;
  border-bottom: 1px solid #e3ddd0;
  background: #f4efe6;
  color: #6d5c3c;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
}
.woocommerce-account .account-content table td,
.woocommerce-account .account-content table.shop_table td {
  padding: 16px 18px;
  border: 0;
  border-bottom: 1px solid #e7e1d4;
  color: #4c4848;
  vertical-align: middle;
}
.woocommerce-account .account-content table tr:last-child td { border-bottom: 0; }
.woocommerce-account .account-content table tbody tr:hover td { background: #f7f4ea; }
/* Plain links inside cells (order numbers, product names) — buttons are
   excluded by every class WooCommerce/Bootstrap may put on them, or this
   rule's specificity keeps their label brown even while the fill turns
   brown on hover. */
.woocommerce-account .account-content table td a:not(.button):not(.btn):not(.woocommerce-button):not(.dl-btn) {
  color: #6d5c3c;
  font-weight: 600;
  text-decoration: none;
}
.woocommerce-account .account-content table td a:not(.button):not(.btn):not(.woocommerce-button):not(.dl-btn):hover {
  text-decoration: underline;
}
.woocommerce-account .account-content table .woocommerce-Price-amount { font-weight: 600; }

/* ---------- Buttons ---------- */
.woocommerce-account .account-content .button,
.woocommerce-account .account-content .btn,
.woocommerce-account .account-content .woocommerce-Button,
.woocommerce-account .account-content button[type="submit"],
.woocommerce-account .account-content input[type="submit"],
.woocommerce-account .woocommerce-message .button,
.woocommerce-account .woocommerce-info .button {
  display: inline-block;
  padding: 11px 24px;
  border: 0.5px solid #6d5c3c;
  border-radius: 5px;
  background: #6d5c3c;
  background-image: none;
  color: #ffffff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: none;
  box-shadow: none;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .12s ease;
}
.woocommerce-account .account-content .button:hover,
.woocommerce-account .account-content .btn:hover,
.woocommerce-account .account-content .woocommerce-Button:hover,
.woocommerce-account .account-content button[type="submit"]:hover,
.woocommerce-account .account-content input[type="submit"]:hover,
.woocommerce-account .woocommerce-message .button:hover,
.woocommerce-account .woocommerce-info .button:hover {
  background: #5a4b30;
  color: #ffffff;
}
.woocommerce-account .account-content .button:active,
.woocommerce-account .account-content button[type="submit"]:active { transform: translateY(1px); }
.woocommerce-account .account-content .button:focus-visible,
.woocommerce-account .account-content button[type="submit"]:focus-visible,
.woocommerce-account .account-content input[type="submit"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(109, 92, 60, .22);
}

/* Secondary / "View" style actions inside tables read better outlined. */
.woocommerce-account .account-content table .button,
.woocommerce-account .account-content .woocommerce-Address .button {
  padding: 8px 18px;
  background: transparent;
  color: #6d5c3c;
}
.woocommerce-account .account-content table .button:hover,
.woocommerce-account .account-content .woocommerce-Address .button:hover {
  background: #6d5c3c;
  color: #ffffff;
}

/* ---------- Forms (account details, addresses) ---------- */
.woocommerce-account .account-content form .form-row,
.woocommerce-account .account-content form p.form-row {
  display: flex;
  flex-direction: column;
  width: 100%;
  float: none;
  margin: 0 0 18px 0;
  padding: 0;
}
.woocommerce-account .account-content form .form-row-first,
.woocommerce-account .account-content form .form-row-last { width: 100%; }
.woocommerce-account .account-content form label {
  margin: 0 0 7px 2px;
  color: #6d5c3c;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.woocommerce-account .account-content form label .required { color: #c0392b; border: 0; text-decoration: none; }
.woocommerce-account .account-content form input[type="text"],
.woocommerce-account .account-content form input[type="email"],
.woocommerce-account .account-content form input[type="tel"],
.woocommerce-account .account-content form input[type="password"],
.woocommerce-account .account-content form select,
.woocommerce-account .account-content form textarea {
  width: 100%;
  height: 48px;
  padding: 0 15px;
  border: 1px solid #e3ddd0;
  border-radius: 8px;
  background-color: #fff;
  color: #4c4848;
  font-family: inherit;
  font-size: 15px;
  line-height: normal;
  box-shadow: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.woocommerce-account .account-content form textarea { height: 96px; padding: 13px 15px; line-height: 1.4; }
.woocommerce-account .account-content form input:focus,
.woocommerce-account .account-content form select:focus,
.woocommerce-account .account-content form textarea:focus {
  outline: none;
  border-color: #6d5c3c;
  box-shadow: 0 0 0 3px rgba(109, 92, 60, .10);
}
.woocommerce-account .account-content form .password-input { position: relative; display: block; width: 100%; }
.woocommerce-account .account-content form .show-password-input {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  color: #6d5c3c;
  cursor: pointer;
}
.woocommerce-account .account-content fieldset {
  margin: 28px 0 24px 0;
  padding: 22px 24px;
  border: 1px solid #e3ddd0;
  border-radius: 12px;
  background: #fbfcf4;
}
.woocommerce-account .account-content fieldset legend {
  width: auto;
  padding: 0 8px;
  color: #4c4848;
  font-size: 15px;
  font-weight: 600;
}
.woocommerce-account .account-content form em,
.woocommerce-account .account-content form .description { color: #9a917f; font-size: 12.5px; font-style: normal; }

/* ---------- Address cards ---------- */
.woocommerce-account .account-content .woocommerce-Addresses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.woocommerce-account .account-content .woocommerce-Address {
  width: auto;
  float: none;
  padding: 24px 26px;
  border: 1px solid #e3ddd0;
  border-radius: 12px;
  background: #fbfcf4;
}
.woocommerce-account .account-content .woocommerce-Address-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.woocommerce-account .account-content .woocommerce-Address-title h2,
.woocommerce-account .account-content .woocommerce-Address-title h3 {
  margin: 0;
  color: #4c4848;
  font-size: 16px;
  font-weight: 600;
}
.woocommerce-account .account-content .woocommerce-Address address {
  margin: 0;
  color: #6f6f6f;
  font-size: 14px;
  font-style: normal;
  line-height: 1.7;
}

/* ---------- Order detail view inside the account ---------- */
.woocommerce-account .account-content .order-card,
.woocommerce-account .account-content .woocommerce-customer-details,
.woocommerce-account .account-content .woocommerce-order-downloads { max-width: none; margin: 0 0 24px 0; }
.woocommerce-account .account-content .woocommerce-order-downloads__title,
.woocommerce-account .account-content .order-card-title { font-size: 18px; }
.woocommerce-account .account-content mark {
  padding: 0 4px;
  background: none;
  color: #6d5c3c;
  font-weight: 700;
}

/* ---------- Pagination ---------- */
.woocommerce-account .woocommerce-pagination ul {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}
.woocommerce-account .woocommerce-pagination li { border: 0; }
.woocommerce-account .woocommerce-pagination a,
.woocommerce-account .woocommerce-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid #e3ddd0;
  border-radius: 8px;
  background: #fff;
  color: #6d5c3c;
  font-size: 14px;
  text-decoration: none;
}
.woocommerce-account .woocommerce-pagination a:hover { background: #f4efe6; }
.woocommerce-account .woocommerce-pagination .current { background: #6d5c3c; border-color: #6d5c3c; color: #fff; }

@media (max-width: 767.98px) {
  .woocommerce-account .account-content .woocommerce-Addresses { grid-template-columns: 1fr; }
  .woocommerce-account .account-content table th { display: none; }
  .woocommerce-account .account-content table td {
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }
  .woocommerce-account .account-content table td::before {
    content: attr(data-title) ": ";
    color: #9a917f;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
}

/* ---------- Order facts: receipt-style rows ----------
   The earlier flex-wrap version broke into an uneven 3 + 2 grid and let
   long email addresses run past the card edge. A label/value list keeps
   every row aligned regardless of content length. */
.co-facts {
  display: block;
  max-width: 460px;
  margin: 28px auto 0 auto;
  padding: 4px 24px;
  border: 1px solid #e3ddd0;
  border-radius: 12px;
  background: #fbfcf4;
  list-style: none;
  text-align: left;
}
.co-fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid #e7e1d4;
  text-align: left;
}
.co-fact:last-child { border-bottom: 0; }
.co-fact-label {
  flex: 0 0 auto;
  margin: 0;
  color: #6d5c3c;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.co-fact-value {
  flex: 1 1 auto;
  min-width: 0;
  color: #4c4848;
  font-size: 15px;
  font-weight: 500;
  text-align: right;
  overflow-wrap: anywhere;
}
.co-fact-value .woocommerce-Price-amount { font-weight: 700; }

/* ---------- Account fixes ----------
   WooCommerce writes its button classes as `woocommerce-button`
   (lowercase b) and the theme's filter adds Bootstrap's `.btn`, so both
   have to be named alongside `.button` or the outline variant misses. */
.woocommerce-account .account-content .woocommerce-button,
.woocommerce-account .account-content a.btn,
.woocommerce-account .account-content button.btn {
  border: 0.5px solid #6d5c3c;
  border-radius: 5px;
  background: #6d5c3c;
  background-image: none;
  color: #ffffff;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: none;
}
.woocommerce-account .account-content table .button,
.woocommerce-account .account-content table .btn,
.woocommerce-account .account-content table .woocommerce-button,
.woocommerce-account .account-content .woocommerce-Address .button,
.woocommerce-account .account-content .woocommerce-Address .btn {
  padding: 8px 18px;
  background: transparent;
  color: #6d5c3c;
}
.woocommerce-account .account-content table .button:hover,
.woocommerce-account .account-content table .btn:hover,
.woocommerce-account .account-content table .woocommerce-button:hover,
.woocommerce-account .account-content .woocommerce-Address .button:hover,
.woocommerce-account .account-content .woocommerce-Address .btn:hover {
  background: #6d5c3c;
  color: #ffffff;
}

/* WooCommerce clears .col2-set with ::before/::after table pseudo-elements.
   In a grid container those become two extra grid items, which pushed the
   billing card into column 2 and the shipping card onto a second row. */
.woocommerce-account .account-content .woocommerce-Addresses::before,
.woocommerce-account .account-content .woocommerce-Addresses::after {
  display: none;
}
.woocommerce-account .account-content .woocommerce-Addresses .woocommerce-Address { align-self: start; }
.woocommerce-account .account-content .woocommerce-Address-title h3 { font-size: 16px; }

/* Table / address action buttons: keep the label readable in both states.
   Specificity here has to clear the cell-link rule above (0,5,2). */
.woocommerce-account .account-content table td a.button,
.woocommerce-account .account-content table td a.btn,
.woocommerce-account .account-content table td a.woocommerce-button,
.woocommerce-account .account-content .woocommerce-Address a.button,
.woocommerce-account .account-content .woocommerce-Address a.btn {
  color: #6d5c3c;
  font-weight: 400;
  text-decoration: none;
}
.woocommerce-account .account-content table td a.button:hover,
.woocommerce-account .account-content table td a.btn:hover,
.woocommerce-account .account-content table td a.woocommerce-button:hover,
.woocommerce-account .account-content .woocommerce-Address a.button:hover,
.woocommerce-account .account-content .woocommerce-Address a.btn:hover {
  background: #6d5c3c;
  color: #ffffff;
  text-decoration: none;
}

/* ============================================================
   WISHLIST
   Saved products, in the same card language as the shop grid.
   Rendered by the [scy_wishlist] shortcode (inc/acf-data.php).
   ============================================================ */

.wishlist { padding: 48px 0 84px 0; }
.wishlist-title {
  margin: 0 0 6px 0;
  color: #4c4848;
  font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
}
.wishlist-sub { margin: 0 0 40px 0; color: #6f6f6f; font-size: 15px; }

.wish-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
}

.wish-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 20px 26px;
  border: 0.3px solid rgba(76, 72, 72, .5);
  border-radius: 10px;
  background: #fff;
  text-align: center;
  transition: box-shadow .2s ease, border-color .2s ease, opacity .2s ease;
}
.wish-card:hover {
  border-color: #6d5c3c;
  box-shadow: 0 14px 30px rgba(76, 72, 72, .10);
}
.wish-card.is-busy { opacity: .45; pointer-events: none; }

.wish-remove {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: #b3a894;
  cursor: pointer;
  transition: color .2s ease, background .2s ease;
}
.wish-remove svg { width: 16px; height: 16px; }
.wish-remove:hover { color: #c0392b; background: #f4efe6; }

.wish-name {
  margin: 0 0 4px;
  min-height: 44px;
  color: #6d5c3c;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.15;
  text-transform: uppercase;
}
.wish-media {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  padding: 8px 0 16px;
}
.wish-media img {
  width: auto;
  height: 150px;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 16px 14px rgba(0, 0, 0, .14));
}
.wish-price { margin-bottom: 14px; color: #4c4848; font-weight: 700; }
.wish-price del { color: #b3a894; font-weight: 400; margin-right: 6px; }

.wish-btn {
  display: inline-block;
  padding: 9px 22px;
  border: 0.5px solid #6d5c3c;
  border-radius: 5px;
  color: #6d5c3c;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.wish-btn:hover { background: #6d5c3c; color: #fff; }

@media (max-width: 1199.98px) {
  .wish-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
  .wish-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .wishlist { padding: 32px 0 64px 0; }
  .wish-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ============================================================
   SECTION 11 — CONTACT PAGE
   Ported from /scyavuru/contact.html (Figma node 2128:1670).
   Rendered by the acf/contact-sec-1..3 blocks in
   page-templates/pages-block/contact/. The form itself is a
   Contact Form 7 form whose template carries these same class
   names, so CF7 output inherits the design one-for-one.
   ============================================================ */

/* Banner copy on the contact page is a touch narrower than the shared
   .page-banner default. The background image comes from the block's Media
   Library field and is printed inline, so the shared .page-banner default
   photo is cleared here — the block never falls back to a theme image. */
.page-banner-contact { background-image: none; }
.page-banner-contact .page-banner-title { max-width: 720px; }
.page-banner-contact .page-banner-sub { max-width: 600px; }

/* Editor-only hint shown when no banner image has been picked yet */
.page-banner-hint {
  margin: 0 auto 14px auto;
  max-width: 620px;
  padding: 8px 14px;
  border: 1px dashed rgba(255, 255, 255, 0.55);
  border-radius: 6px;
  color: #ffffff;
  font-size: 13px;
}

/* Active menu item: keep the text white, show only an underline */
.hero-menu .nav-link.active { color: #ffffff; opacity: 1; position: relative; }
.hero-menu .nav-link.active::after {
  content: "";
  position: absolute;
  left: 0.95rem;
  right: 0.95rem;
  bottom: 3px;
  height: 2px;
  background: #ffffff;
}

/* ---------- Section eyebrow label + trailing rule ---------- */
.c-eyebrow {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 0 0 20px 0;
  color: #4c4848;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.c-eyebrow::after { content: ""; flex: 1 1 auto; height: 1px; background: #d8d2c6; }

/* ============================================================
   CONTACT US
   ============================================================ */
.contact-section { padding: 78px 0 84px 0; }
.contact-layout { display: flex; align-items: flex-start; gap: clamp(40px, 5vw, 78px); }
.contact-info { flex: 0 0 372px; max-width: 372px; }
.contact-form-wrap { flex: 1 1 auto; min-width: 0; }

.contact-info h2 {
  margin: 0 0 20px 0;
  color: #4c4848;
  font-weight: 400;
  font-size: clamp(24px, 2.08vw, 30px);
  line-height: 1.2;
}
.contact-info p {
  margin: 0;
  color: #4c4848;
  font-size: 16px;
  line-height: 1.55;
}

/* Editor-only hint when no CF7 form is picked / the plugin is off */
.cform-notice {
  margin: 0;
  padding: 18px 20px;
  border: 1px dashed rgba(76, 72, 72, 0.4);
  border-radius: 6px;
  color: #6d5c3c;
  font-size: 14px;
}

/* ---------- Form layout ---------- */
.contact-form-wrap .wpcf7 { margin: 0; }
.contact-form-wrap .wpcf7-form { margin: 0; }

.cform-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
}
.cform-cell { min-width: 0; }
.cform-span2 { grid-column: 1 / -1; }

/* Contact Form 7 wraps every control in a <span> — make it fill its cell. */
.cform-cell .wpcf7-form-control-wrap { display: block; width: 100%; }

.cform-input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 0.7px solid rgba(76, 72, 72, 0.5);
  border-radius: 6px;
  background: #ffffff;
  color: #4c4848;
  font-family: inherit;
  font-size: 15px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
textarea.cform-input { height: 104px; padding: 12px 14px; resize: vertical; }
.cform-input::placeholder { color: #8a857e; }
.cform-input:focus {
  outline: none;
  border-color: #6d5c3c;
  box-shadow: 0 0 0 2px rgba(109, 92, 60, 0.12);
}
.cform-input.wpcf7-not-valid {
  border-color: #c0563f;
  box-shadow: 0 0 0 2px rgba(192, 86, 63, 0.14);
}

/* CF7 inline validation message */
.wpcf7-not-valid-tip {
  display: block;
  margin-top: 5px;
  color: #c0563f;
  font-size: 12.5px;
  line-height: 1.35;
}

/* ---------- Subject dropdown ---------- */
.cselect { position: relative; }

/* The real CF7 <select>. It stays in the DOM so CF7 keeps validating and
   submitting it; the script in the block hides it and draws the custom UI.
   Without JS it is styled to match the design on its own. */
.cselect-native {
  width: 100%;
  height: 44px;
  padding: 0 42px 0 14px;
  border: 0.7px solid rgba(76, 72, 72, 0.5);
  border-radius: 6px;
  background: #ffffff
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234c4848' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right 15px center;
  color: #4c4848;
  font-family: inherit;
  font-size: 15px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
}
.cselect-native:focus {
  outline: none;
  border-color: #6d5c3c;
  box-shadow: 0 0 0 2px rgba(109, 92, 60, 0.12);
}
/* Enhanced: the custom button/list replaces the native control. */
.cselect.is-enhanced .cselect-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.cselect-toggle {
  width: 100%;
  height: 44px;
  padding: 0 42px 0 14px;
  display: flex;
  align-items: center;
  border: 0.7px solid rgba(76, 72, 72, 0.5);
  border-radius: 6px;
  background: #ffffff;
  color: #8a857e;
  font-family: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.cselect.has-value .cselect-toggle { color: #4c4848; }
.cselect.is-open .cselect-toggle,
.cselect-toggle:focus-visible {
  outline: none;
  border-color: #6d5c3c;
  box-shadow: 0 0 0 2px rgba(109, 92, 60, 0.12);
}
.cselect-toggle.is-invalid { border-color: #c0563f; box-shadow: 0 0 0 2px rgba(192, 86, 63, 0.14); }
.cselect-value { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cselect-chevron {
  position: absolute;
  top: 22px;
  right: 15px;
  transform: translateY(-50%);
  color: #4c4848;
  transition: transform .2s ease;
  pointer-events: none;
}
.cselect.is-open .cselect-chevron { transform: translateY(-50%) rotate(180deg); }

.cselect-menu {
  position: absolute;
  top: calc(44px + 6px);
  left: 0;
  right: 0;
  z-index: 40;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #ffffff;
  border: 0.7px solid rgba(76, 72, 72, 0.4);
  border-radius: 8px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.cselect.is-open .cselect-menu { opacity: 1; visibility: visible; transform: none; }
.cselect-menu li {
  padding: 10px 12px;
  border-radius: 6px;
  color: #4c4848;
  font-size: 15px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.cselect-menu li:hover,
.cselect-menu li.is-focus { background: #f6f1e8; color: #6d5c3c; }
.cselect-menu li.is-selected { background: #6d5c3c; color: #ffffff; }

/* The subject cell's validation tip belongs under the whole control */
.cselect .wpcf7-not-valid-tip { position: relative; z-index: 1; }

/* ---------- Consent row + SEND (top-aligned) ---------- */
.cform-consent {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: start;
  gap: 18px 24px;
  margin-top: 24px;
}

/* CF7 [acceptance] markup, restyled into the design's checkbox rows. */
.cform-check .wpcf7-form-control-wrap { display: block; }
.cform-check .wpcf7-acceptance,
.cform-check .wpcf7-list-item { display: block; margin: 0; }
.cform-check label {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  color: #4c4848;
  font-size: 13px;
  line-height: 1.4;
  cursor: pointer;
}
.cform-check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  accent-color: #6d5c3c;
}
.cform-check .wpcf7-list-item-label { flex: 1 1 auto; }
.cform-check a { color: #6d5c3c; text-decoration: underline; }

.cform-actions { justify-self: end; display: flex; align-items: center; gap: 10px; }
.cform-send {
  min-width: 200px;
  padding: 11px 26px;
  border: 0.7px solid rgba(76, 72, 72, 0.5);
  border-radius: 5px;
  background: transparent;
  color: #4c4848;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.cform-send:hover { background: #6d5c3c; color: #ffffff; border-color: #6d5c3c; }
.cform-send:disabled { opacity: .55; cursor: default; }
.cform-send:disabled:hover { background: transparent; color: #4c4848; border-color: rgba(76, 72, 72, 0.5); }

/* Contact Form 7 injects a spinner right after the submit button. It is only
   `visibility: hidden` when idle, so it still occupies 24px plus 24px margins
   either side — enough to push SEND well clear of the form's right edge.
   Taking it out of flow and parking it to the left of the button keeps SEND
   flush right, while the spinner still appears during a submission. */
.cform-actions { position: relative; }
.cform-actions .wpcf7-spinner {
  position: absolute;
  top: 50%;
  right: calc(100% + 14px);
  transform: translateY(-50%);
  margin: 0;
}

/* CF7 status message under the form.
   Selectors are deliberately deep so they outrank Contact Form 7's own
   `.wpcf7 form .wpcf7-response-output` default (a 2px cyan box). */
.contact-form-wrap .wpcf7 form .wpcf7-response-output {
  margin: 20px 0 0 0;
  padding: 12px 16px;
  border-width: 1px;
  border-style: solid;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.45;
}
/* CF7 only hides the box in a handful of states, so an empty box still shows
   as a stray bar while the form is live-validating. Hide it whenever it has
   nothing to say. */
.contact-form-wrap .wpcf7 form .wpcf7-response-output:empty { display: none; }

.contact-form-wrap .wpcf7 form.sent .wpcf7-response-output {
  border-color: #4f7a45;
  background: #f2f7f0;
  color: #3f6337;
}
.contact-form-wrap .wpcf7 form.invalid .wpcf7-response-output,
.contact-form-wrap .wpcf7 form.unaccepted .wpcf7-response-output,
.contact-form-wrap .wpcf7 form.spam .wpcf7-response-output,
.contact-form-wrap .wpcf7 form.failed .wpcf7-response-output,
.contact-form-wrap .wpcf7 form.aborted .wpcf7-response-output {
  border-color: #c0563f;
  background: #fdf3f1;
  color: #a8452f;
}

/* ============================================================
   VISIT US
   ============================================================ */
.visit-section { padding: 8px 0 96px 0; }
.visit-layout { display: flex; align-items: flex-start; gap: clamp(40px, 5vw, 78px); }
.visit-info { flex: 0 0 372px; max-width: 372px; }
.visit-info h2 {
  margin: 0 0 22px 0;
  color: #4c4848;
  font-weight: 400;
  font-size: clamp(24px, 2.08vw, 30px);
  line-height: 1.2;
}
.visit-address {
  font-style: normal;
  color: #4c4848;
  font-size: 16px;
  line-height: 1.7;
}
.visit-map-wrap { flex: 1 1 auto; min-width: 0; }
.visit-map-frame {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}
.visit-map {
  width: 100%;
  height: 300px;
  border: 0;
  display: block;
  pointer-events: none;              /* purely visual — overlay handles clicks */
  /* Match the Figma's monochrome map treatment */
  filter: grayscale(1) contrast(0.92) brightness(1.05);
}
/* Full-cover link — a click anywhere on the map opens Google Maps */
.visit-map-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  cursor: pointer;
}
.visit-map-cta {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  background: #6d5c3c;
  color: #ffffff;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 6px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease;
}
.visit-map-cta svg { width: 14px; height: 14px; }
.visit-map-overlay:hover .visit-map-cta,
.visit-map-overlay:focus-visible .visit-map-cta { opacity: 1; transform: none; }

/* ---------- Google-style place info card (small), on the map ---------- */
.map-place-card {
  position: absolute;
  left: 26%;
  top: 13%;
  z-index: 3;
  width: 174px;
  max-width: calc(100% - 28px);
  background: #ffffff;
  border-radius: 9px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  pointer-events: none;              /* clicks fall through to the map link */
}
.map-place-photo {
  width: 100%;
  height: 78px;
  object-fit: cover;
  display: block;
}
.map-place-info {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 6px 8px 8px;
}
.map-place-text { flex: 1 1 auto; min-width: 0; }
.map-place-name {
  display: block;
  color: #202124;
  font-weight: 600;
  font-size: 11px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.map-place-rating {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 1px;
  font-size: 8.5px;
  color: #3c4043;
}
.map-place-rating .stars { color: #fbbc04; font-size: 8px; letter-spacing: .5px; }
.map-place-rating .rev { color: #70757a; }
.map-place-cat {
  display: block;
  margin-top: 1px;
  color: #70757a;
  font-size: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.map-place-actions { flex: 0 0 auto; display: flex; gap: 4px; padding-top: 1px; }
.map-place-btn {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.map-place-btn.dir { background: #e8f0fe; color: #1a73e8; }
.map-place-btn.save { background: #ffffff; border: 1px solid #dadce0; color: #1a73e8; }
.map-place-btn svg { width: 11px; height: 11px; }

/* ============================================================
   CONTACT PAGE — RESPONSIVE
   ============================================================ */
@media (max-width: 991.98px) {
  .contact-layout, .visit-layout { flex-direction: column; }
  .contact-info, .visit-info { flex-basis: auto; max-width: none; width: 100%; }
  .visit-map { height: 320px; }
}
@media (max-width: 575.98px) {
  .contact-section { padding: 56px 0 60px 0; }
  .visit-section { padding: 0 0 64px 0; }
  .cform-grid { grid-template-columns: 1fr; }
  .cform-consent { grid-template-columns: 1fr; }
  .cform-actions { justify-self: stretch; }
  .cform-send { width: 100%; }
  .c-eyebrow { font-size: 17px; }
  .map-place-card { width: 168px; left: 16px; }
}

/* ============================================================
   SECTION 12 — COLLECTIONS (collection taxonomy archive)
   Ported from /scyavuru/collections.html (Figma node 2191:3436).
   Rendered by taxonomy-collection.php; every value comes from
   term meta, so nothing here assumes a particular image.
   ============================================================ */

/* The banner photo comes from the term's Media Library field and is printed
   inline, so the shared .page-banner default image is cleared here. */
.page-banner-collection { background-image: none; }
.page-banner-collection .page-banner-title { max-width: 820px; }
.page-banner-collection .page-banner-sub { max-width: 620px; }

/* ============================================================
   OUR COLLECTIONS — intro
   ============================================================ */
.coll-intro-section { padding: 60px 0 0 0; }
.coll-intro { text-align: center; }
.coll-eyebrow {
  display: flex;
  align-items: center;
  gap: 26px;
  margin: 0 0 44px 0;
  color: #756959;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.coll-eyebrow::before,
.coll-eyebrow::after { content: ""; flex: 1 1 auto; height: 1px; background: #d8d2c6; }
.coll-intro-title {
  margin: 0 auto 20px auto;
  max-width: 572px;
  color: #4c4848;
  font-weight: 400;
  font-size: clamp(24px, 2.35vw, 30px);
  line-height: 1.25;
}
.coll-intro-text {
  margin: 0 auto;
  max-width: 704px;
  color: #4c4848;
  font-size: 16px;
  line-height: 1.55;
}

/* ============================================================
   COLLECTION BLOCKS — alternating image / copy
   ============================================================ */
.coll-section { padding: 60px 0 96px 0; }
.coll-block {
  display: flex;
  align-items: center;
  gap: clamp(36px, 4.5vw, 78px);
  margin-bottom: 76px;
}
.coll-block:last-child { margin-bottom: 0; }
.coll-block.reverse { flex-direction: row-reverse; }

.coll-media { flex: 1 1 50%; min-width: 0; max-width: 556px; }
.coll-media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

.coll-copy { flex: 1 1 50%; min-width: 0; }
.coll-num {
  color: rgba(109, 92, 60, 0.5);
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
  margin: 0 0 12px 0;
}
.coll-title {
  margin: 0 0 18px 0;
  color: #4c4848;
  font-weight: 400;
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.2;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.coll-text {
  margin: 0 0 28px 0;
  color: #4c4848;
  font-size: 16px;
  line-height: 1.62;
  text-align: justify;
}
.coll-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 181px;
  height: 40px;
  padding: 0 22px;
  border: 0.7px solid #6d5c3c;
  border-radius: 5px;
  background: transparent;
  color: #6d5c3c;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.coll-btn:hover { background: #6d5c3c; color: #ffffff; }

/* The collection whose page is currently open — a quiet marker rather than a
   new visual treatment, so the list still reads as one design. */
.coll-block.is-current .coll-num { color: #6d5c3c; }
.coll-block.is-current .coll-btn { background: #6d5c3c; color: #ffffff; }
.coll-block.is-current .coll-btn:hover { opacity: .88; }

/* ============================================================
   COLLECTIONS — RESPONSIVE
   ============================================================ */
@media (max-width: 991.98px) {
  .coll-block, .coll-block.reverse { flex-direction: column; }
  .coll-media, .coll-copy { flex-basis: auto; max-width: none; width: 100%; }
  .coll-text { text-align: left; }
  .coll-section { padding: 48px 0 72px 0; }
}
@media (max-width: 575.98px) {
  .coll-block { margin-bottom: 56px; }
  .coll-num { font-size: 34px; }
  .coll-eyebrow { font-size: 17px; gap: 16px; }
}

/* ============================================================
   SECTION 13 — COLLECTION LANDING PAGE
   Ported from /scyavuru/landing.html (Figma node 2145:478).
   Rendered by taxonomy-collection.php; every value comes from
   term meta, so nothing here assumes a particular image.
   ============================================================ */

/* ---------- HERO ---------- */
.lp-hero {
  position: relative;
  min-height: 660px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 150px 20px 150px;
  background: #14100c center center / cover no-repeat;
  overflow: hidden;
}
.lp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.28) 40%, rgba(0,0,0,0.38) 100%);
  z-index: 1;
}
.lp-hero-inner { position: relative; z-index: 2; max-width: 900px; }
.lp-hero-title {
  margin: 0;
  color: #ffffff;
  font-weight: 700;
  font-size: clamp(34px, 4.2vw, 50px);
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.lp-hero-sub {
  margin: 16px 0 0 0;
  color: #ffffff;
  font-weight: 400;
  font-size: clamp(11px, 1vw, 14px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* ---------- WHY CHOOSE — overlapping white card ---------- */
.lp-why-wrap { position: relative; z-index: 3; }
.lp-why {
  max-width: 1046px;
  margin: -165px auto 0 auto;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.14);
  padding: 42px clamp(24px, 4vw, 56px) 46px;
}
.lp-why-title {
  margin: 0 0 36px 0;
  text-align: center;
  color: #4c4848;
  font-weight: 400;
  font-size: clamp(21px, 2vw, 26px);
  line-height: 1.2;
}
.lp-why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2.5vw, 32px);
}
.lp-feature { text-align: center; padding: 0 6px; }
.lp-feature-ico {
  height: 54px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: 0 auto 18px auto;
}
.lp-feature-ico img { max-height: 52px; width: auto; display: block; }
.lp-feature-label {
  margin: 0;
  color: #4c4848;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ---------- STORY BLOCKS ---------- */
.lp-story-section { padding: 80px 0 30px 0; }
.lp-story {
  display: flex;
  align-items: center;
  gap: clamp(40px, 6vw, 110px);
  margin-bottom: 64px;
}
.lp-story:last-child { margin-bottom: 0; }
.lp-story.reverse { flex-direction: row-reverse; }
.lp-story-copy { flex: 1 1 50%; min-width: 0; }
.lp-story-title {
  margin: 0 0 20px 0;
  color: #4c4848;
  font-weight: 400;
  font-size: clamp(24px, 2.35vw, 30px);
  line-height: 1.25;
}
.lp-story-copy p {
  margin: 0 0 16px 0;
  color: #4c4848;
  font-size: 16px;
  line-height: 1.62;
  text-align: justify;
}
.lp-story-copy p:last-child { margin-bottom: 0; }
.lp-story-media {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lp-story-media img { max-width: 100%; height: auto; display: block; }
.lp-story-media.plain img { max-width: 460px; }
.lp-story-media.framed img { width: 100%; border-radius: 12px; }
/* the flipped row's image sits flush to the container's left edge */
.lp-story.reverse .lp-story-media { justify-content: flex-start; }

/* ---------- PRODUCTS — carousel ---------- */
.lp-products-section { padding: 70px 0 20px 0; }
.lp-eyebrow {
  display: flex;
  align-items: center;
  gap: 26px;
  margin: 0 0 44px 0;
  color: #756959;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.lp-eyebrow::before,
.lp-eyebrow::after { content: ""; flex: 1 1 auto; height: 1px; background: #d8d2c6; }

.lp-carousel { display: flex; align-items: center; gap: 14px; }
.lp-car-arrow {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 7px;
  border: 1px solid #d8d2c6;
  background: #ffffff;
  color: #6d5c3c;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.lp-car-arrow:hover { background: #6d5c3c; color: #ffffff; border-color: #6d5c3c; }

.lp-car-track {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 28px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding: 6px 2px 12px 2px;
  scrollbar-width: none;
}
.lp-car-track::-webkit-scrollbar { display: none; }

.lp-prod {
  flex: 0 0 calc((100% - 56px) / 3);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #ffffff;
  border: 1px solid rgba(76, 72, 72, 0.16);
  border-radius: 10px;
  padding: 26px 20px 24px 20px;
}
.lp-prod-name {
  margin: 0 0 14px 0;
  min-height: 32px;
  color: #6d5c3c;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
}
.lp-prod-media {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 6px 0 20px 0;
}
.lp-prod-media img {
  height: 150px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 14px 12px rgba(0, 0, 0, 0.14));
}
.lp-prod-btn {
  display: inline-block;
  padding: 8px 18px;
  border: 1px solid #6d5c3c;
  border-radius: 5px;
  color: #6d5c3c;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.lp-prod-btn:hover { background: #6d5c3c; color: #ffffff; }

/* ---------- PRIVATE LABEL — CTA banner ---------- */
.lp-cta-section { padding: 70px 0 40px 0; }
.lp-cta-banner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 440px;
  border-radius: 14px;
  overflow: hidden;
  background: #262c14 center center / cover no-repeat;
}
.lp-cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(38,44,20,0.78) 0%, rgba(38,44,20,0.50) 34%, rgba(38,44,20,0.08) 60%, rgba(38,44,20,0) 100%);
}
.lp-cta-inner {
  position: relative;
  z-index: 2;
  max-width: 600px;
  padding: 48px clamp(28px, 4vw, 60px);
  color: #ffffff;
}
.lp-cta-title {
  margin: 0 0 14px 0;
  max-width: 360px;
  font-weight: 700;
  font-size: clamp(26px, 2.8vw, 34px);
  line-height: 1.15;
}
.lp-cta-sub {
  margin: 0 0 20px 0;
  font-weight: 400;
  font-size: clamp(17px, 1.5vw, 20px);
}
.lp-cta-inner p {
  margin: 0 0 14px 0;
  max-width: 560px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 14px;
  line-height: 1.6;
}
.lp-cta-inner p:last-child { margin-bottom: 0; }

/* ============================================================
   COLLECTION LANDING — RESPONSIVE
   ============================================================ */
@media (max-width: 991.98px) {
  .lp-prod { flex-basis: calc((100% - 28px) / 2); }
  .lp-story, .lp-story.reverse { flex-direction: column; }
  .lp-story-copy, .lp-story-media { flex-basis: auto; width: 100%; }
  .lp-story-copy p { text-align: left; }
  .lp-story-section { padding: 56px 0 24px 0; }
}
@media (max-width: 767.98px) {
  .lp-hero { min-height: 520px; padding: 130px 18px 130px; }
  .lp-why { margin-top: -70px; padding: 32px 20px 34px; }
  .lp-why-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 16px; }
  .lp-cta-banner { min-height: 400px; }
  .lp-cta-banner::before { background: linear-gradient(180deg, rgba(38,44,20,0.52) 0%, rgba(38,44,20,0.72) 100%); }
  .lp-cta-inner { max-width: none; padding: 40px 24px; }
  .lp-cta-title { max-width: none; }
}
@media (max-width: 575.98px) {
  .lp-prod { flex-basis: 84%; }
  .lp-products-section { padding: 52px 0 10px 0; }
}
@media (max-width: 400px) {
  .lp-why-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SECTION 14 — CONTACT, DARK BANNER VARIANT
   The band from /scyavuru/collections.html, rendered by the
   acf/contact-dark block. It reuses the same Contact Form 7
   form as the light contact section, reskinned for the dark
   background — one set of fields, two appearances.
   ============================================================ */

/* The photo comes from the block's Media Library field and is printed inline,
   so the shared .contact-bg default image is cleared here — the block never
   falls back to a theme image. */

/* Top-aligned with the form, as in the static design — the intro column is
   shorter than the form, and centring it left the heading floating. */
.contact-block .contact-intro { display: flex; flex-direction: column; justify-content: flex-start; }
.contact-block .wpcf7 { margin: 0; }
.contact-block .wpcf7-form { margin: 0; }
.contact-block .cform-notice { border-color: rgba(255, 255, 255, 0.5); color: #ffffff; }

/* ---------- Fields ---------- */
.contact .cform-cell .wpcf7-form-control-wrap { display: block; width: 100%; }

.contact .cform-input,
.contact .cselect-toggle,
.contact .cselect-native {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  color: #ffffff;
}
.contact .cform-input::placeholder { color: rgba(255, 255, 255, 0.78); }
.contact .cselect-toggle { color: rgba(255, 255, 255, 0.78); }
.contact .cselect.has-value .cselect-toggle { color: #ffffff; }
.contact .cselect-chevron { color: #ffffff; }

.contact textarea.cform-input { min-height: 116px; height: auto; }

.contact .cform-input:focus,
.contact .cselect.is-open .cselect-toggle,
.contact .cselect-toggle:focus-visible,
.contact .cselect-native:focus {
  outline: none;
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}
.contact .cform-input.wpcf7-not-valid,
.contact .cselect-toggle.is-invalid {
  border-color: #f0a795;
  box-shadow: none;
}
/* The dropdown panel stays light so the options remain readable. */
.contact .cselect-menu { background: #ffffff; border-color: rgba(76, 72, 72, 0.4); }
.contact .cselect-menu li { color: #4c4848; }

.contact .wpcf7-not-valid-tip { color: #f0a795; }

/* ---------- Consent + send ---------- */
.contact .cform-check,
.contact .cform-check label { color: #ffffff; }
.contact .cform-check a { color: #ffffff; }

.contact .cform-send {
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 5px;
  background: transparent;
  color: #ffffff;
  letter-spacing: 1.5px;
}
.contact .cform-send:hover {
  background: #ffffff;
  color: #4c4848;
  border-color: #ffffff;
}
.contact .cform-send:disabled { opacity: .5; }
.contact .cform-send:disabled:hover { background: transparent; color: #ffffff; }

/* ---------- CF7 status message ---------- */
.contact .wpcf7 form .wpcf7-response-output {
  margin: 20px 0 0 0;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-size: 14px;
  line-height: 1.45;
}
.contact .wpcf7 form .wpcf7-response-output:empty { display: none; }
.contact .wpcf7 form.sent .wpcf7-response-output { border-color: #bcd9b4; background: rgba(188, 217, 180, 0.16); }
.contact .wpcf7 form.invalid .wpcf7-response-output,
.contact .wpcf7 form.unaccepted .wpcf7-response-output,
.contact .wpcf7 form.spam .wpcf7-response-output,
.contact .wpcf7 form.failed .wpcf7-response-output,
.contact .wpcf7 form.aborted .wpcf7-response-output { border-color: #f0a795; background: rgba(240, 167, 149, 0.16); }


/* ============================================================
   BLOG LISTING — dynamic states
   ------------------------------------------------------------
   The listing is rendered by page-blog.php from real posts and
   real categories, so it needs a few states the static mock-up
   carried in an inline <style>: the selected category, the
   empty result, the filtering spinner, and a pager built from
   links rather than <button>s (so it works with JS off).
   ============================================================ */

/* The banner photo comes from Theme Settings → Blog Page and is printed
   inline, so the shared .page-banner default photo is cleared here — the
   page never falls back to a theme image. */
.page-banner-blog { background-image: none; }

/* ---------- Selected category ---------- */
.blog-acc > summary { transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
.blog-acc.is-active > summary {
  border-color: #6d5c3c;
  background: #f6f2ea;
  color: #3d3126;
}
/* The category title is a real link so the filter is navigable without JS;
   it should still read as part of the box, not as a link inside it. */
.blog-acc > summary .blog-acc-link {
  flex: 1 1 auto;
  color: inherit;
  font: inherit;
  text-decoration: none;
  outline-offset: 3px;
}
.blog-acc-list a.is-active {
  color: #6d5c3c;
  font-weight: 600;
}

/* ---------- Empty result ---------- */
.blog-empty {
  grid-column: 1 / -1;
  margin: 8px 0;
  color: #7a746c;
  font-size: 15px;
}

/* ---------- Pager built from links ---------- */
.blog-pager .blog-pager-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border: 0.5px solid #6d5c3c;
  border-radius: 50%;
  background: transparent;
  color: #6d5c3c;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.blog-pager a.blog-pager-btn:hover { background: #6d5c3c; color: #ffffff; }
.blog-pager .blog-pager-btn svg { width: 15px; height: 15px; }
.blog-pager .blog-pager-btn.is-disabled {
  opacity: 0.35;
  cursor: default;
  background: transparent;
  color: #4c4848;
  border-color: #4c4848;
}

/* ---------- Filtering spinner ---------- */
.blog-cards-wrap { position: relative; min-height: 240px; }
.blog-cards { transition: opacity 0.3s ease; }
.blog-cards-wrap.is-loading .blog-cards { opacity: 0.18; }
.blog-loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 90px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 5;
}
.blog-cards-wrap.is-loading .blog-loader { opacity: 1; visibility: visible; }
.blog-loader .spinner {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 3px solid rgba(109, 92, 60, 0.18);
  border-top-color: #6d5c3c;
  animation: blog-spin 0.7s linear infinite;
}
@keyframes blog-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .blog-loader .spinner { animation-duration: 1.4s; }
}


/* ============================================================
   SINGLE ARTICLE (single.php)
   ------------------------------------------------------------
   Ported from the inline <style> block in
   /scyavuru/single-blog.html. The body copy now comes out of a
   rich text editor rather than hand-written markup, so the
   heading / list / step rules are written against plain
   <h2>, <ul> and <ol> inside .article-body.
   ============================================================ */

/* The banner photo comes from the post (Article → Banner Image, or the
   Featured Image) and is printed inline, so the shared .page-banner default
   photo is cleared here — an article never falls back to a theme image. */
.page-banner-article { background-image: none; }

.article-listing { padding: 64px 0 40px 0; }

/* ---------- Lead / intro line ---------- */
.article-lead {
  margin: 0 0 24px 0;
  max-width: 720px;
  color: #4c4848;
  font-weight: 400;
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.35;
}

/* Editor-only note shown when an article has no body yet */
.article-hint {
  margin: 0 0 22px 0;
  padding: 12px 16px;
  border: 1px dashed #d8d2c6;
  border-radius: 6px;
  color: #7a746c;
  font-size: 14px;
}

/* ---------- Body copy ---------- */
.article-body p {
  margin: 0 0 22px 0;
  color: #6f6f6f;
  font-size: 15px;
  line-height: 1.75;
}
.article-body a { color: #6d5c3c; }
.article-body img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}
.article-body > *:last-child { margin-bottom: 0; }

/* Section headings — "Ingredients", "Preparation", … */
.article-body h2,
.article-body h3,
.article-h {
  margin: 34px 0 18px 0;
  color: #4c4848;
  font-weight: 400;
  font-size: clamp(20px, 1.7vw, 24px);
  line-height: 1.25;
}
.article-body h3 { font-size: clamp(18px, 1.4vw, 20px); }
.article-body > h2:first-child,
.article-body > h3:first-child { margin-top: 0; }

/* Ingredients — the repeater list, and any bulleted list in the Introduction */
.article-body ul,
.article-ing {
  margin: 0 0 22px 0;
  padding-left: 20px;
  list-style: disc;
  color: #6f6f6f;
  font-size: 15px;
  line-height: 1.6;
}
.article-body ul li,
.article-ing li { margin-bottom: 10px; }

/* Numbered lists written in the Introduction editor */
.article-body ol {
  margin: 0 0 22px 0;
  padding-left: 20px;
  color: #6f6f6f;
  font-size: 15px;
  line-height: 1.75;
}
.article-body ol li { margin: 0 0 20px 0; }
.article-body ol li p { margin: 0; }

/* Preparation steps — built from the Steps repeater. The step number is part
   of the bold title, as in the design, so the list itself has no marker. */
.article-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}
.article-step {
  margin: 0 0 20px 0;
  color: #6f6f6f;
  font-size: 15px;
  line-height: 1.75;
}
.article-body ol li strong,
.article-step strong {
  display: block;
  margin-bottom: 4px;
  color: #4c4848;
  font-weight: 600;
}

/* ---------- Step gallery (2 per row, as in Figma) ---------- */
.recipe-steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 32px 0 0 0;
  border-radius: 10px;
  overflow: hidden;
}
.recipe-step {
  position: relative;
  margin: 0;
  aspect-ratio: 476 / 317;   /* each quadrant of the 952x635 block */
  background: #efeae1;
}
.recipe-step img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 575.98px) {
  .recipe-steps { grid-template-columns: 1fr; }
}

/* ---------- Sidebar: Latest Articles ---------- */
.aside-block { margin-top: 40px; }
.aside-heading {
  margin: 0 0 4px 0;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: #4c4848;
}
.latest-list { list-style: none; margin: 0; padding: 0; }
.latest-list li { border-bottom: 1px solid #d8d2c6; }
.latest-list a {
  display: block;
  padding: 16px 0;
  color: #4c4848;
  font-size: 15px;
  line-height: 1.4;
  text-decoration: none;
  transition: color .2s ease;
}
.latest-list a:hover { color: #6d5c3c; }

/* On an article the category title only opens its box — the sub-categories
   carry the links — so it must not read as clickable text. */
.blog-acc > summary span.blog-acc-link { flex: 1 1 auto; }

/* ---------- "Other Articles" slider ---------- */
.other-articles { padding: 8px 0 20px 0; }
.oa-head {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 30px;
}
.oa-title {
  flex: 0 0 auto;
  margin: 0;
  color: #4c4848;
  font-weight: 400;
  font-size: clamp(18px, 1.6vw, 22px);
  letter-spacing: 0.02em;
}
.oa-rule { flex: 1 1 auto; height: 1px; background: #d8d2c6; }
.oa-nav { flex: 0 0 auto; margin-top: 0; }

/* Reuse the article's two-column layout with an empty sidebar spacer, so the
   cards column is always exactly as wide as the article above it. Three cards
   fill that width; the rest scroll in via the arrows. */
.oa-spacer { align-self: stretch; }
.other-articles .blog-carousel { width: 100%; }
.other-articles .blog-track {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  scrollbar-width: none;
  margin-right: 0;
  padding-bottom: 0;
}
.other-articles .blog-track::-webkit-scrollbar { display: none; }
.other-articles .blog-card {
  flex: 0 0 calc((100% - 56px) / 3);          /* 3 cards + two 28px gaps */
  aspect-ratio: 299 / 425;
}
@media (max-width: 991.98px) {
  .oa-spacer { display: none; }
  .other-articles .blog-card { flex: 0 0 300px; }
}
@media (max-width: 575.98px) {
  .other-articles .blog-card { flex: 0 0 82%; }
}


/* ============================================================
   CERTIFICATIONS PAGE (page-templates/pages-block/certifications)
   ------------------------------------------------------------
   Ported from the inline <style> block in
   /scyavuru/certificazioni.html — Figma node 2150:225.
   ============================================================ */

/* The banner photo comes from the block's Media Library field and is printed
   inline, so the shared .page-banner default photo is cleared here — the block
   never falls back to a theme image. */
.page-banner-certifications { background-image: none; }
.page-banner-certifications .page-banner-title { max-width: 820px; }
.page-banner-certifications .page-banner-sub { max-width: 620px; }

/* ---------- Our Commitment to Quality ---------- */
.commitment { padding: 64px 0 0 0; }
.commitment .section-sep { margin-bottom: 40px; }
.commit-text {
  margin: 0 auto 18px auto;
  max-width: 733px;
  color: #6f6f6f;
  font-weight: 400;
  font-size: clamp(14px, 1.11vw, 16px);
  line-height: 1.6;
  text-align: center;
}
.commit-text:last-child { margin-bottom: 0; }
@media (max-width: 575.98px) {
  .commitment { padding: 48px 0 0 0; }
  .commit-text { text-align: left; }
}

/* ---------- Our Certifications — cards ---------- */
.certs { padding: 72px 0 20px 0; }
.certs .section-sep { margin-bottom: 56px; }

.certs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 950px;
  margin: 0 auto;
}

.cert-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #e3ddd0;
  border-radius: 10px;
  background: #ffffff;
  padding: 30px 34px 34px 34px;
}

.cert-card-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  margin-bottom: 22px;
}
.cert-card-logo img { max-height: 84px; max-width: 100%; width: auto; }

.cert-card-text {
  margin: 0 0 22px 0;
  color: #6f6f6f;
  font-size: 13px;
  line-height: 1.55;
  text-align: justify;
}

.cert-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 16px;
  row-gap: 4px;
  margin: 0 0 26px 0;
  font-size: 12.5px;
  line-height: 1.5;
}
.cert-meta dt { color: #4c4848; font-weight: 700; white-space: nowrap; }
.cert-meta dd { margin: 0; color: #6f6f6f; }

.cert-dl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  height: 40px;
  padding: 0 18px;
  border: 0.8px solid #6d5c3c;
  border-radius: 5px;
  background: transparent;
  color: #6d5c3c;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.cert-dl:hover { background: #6d5c3c; color: #ffffff; }

@media (max-width: 991.98px) {
  .certs-grid { grid-template-columns: repeat(2, 1fr); max-width: 640px; }
}
@media (max-width: 575.98px) {
  .certs { padding: 52px 0 8px 0; }
  .certs-grid { grid-template-columns: 1fr; max-width: 360px; }
  .cert-card-text { text-align: left; }
}

/* ---------- Quality process / technical documents / markets ---------- */
.quality { padding: 72px 0 84px 0; }
.quality .section-sep { margin-bottom: 60px; }

.qp-steps {
  position: relative;
  display: flex;
  justify-content: space-between;
  max-width: 1080px;
  margin: 0 auto;
}
.qp-line {
  position: absolute;
  top: 28px;
  left: 68px;
  right: 68px;
  height: 1px;
  background: #d8c9ad;
  z-index: 0;
}
.qp-step {
  position: relative;
  z-index: 1;
  flex: 0 0 136px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.qp-ico {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid #d8c9ad;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.qp-ico img { width: auto; height: 27px; max-width: 30px; }
.qp-label {
  color: #6d5c3c;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}

.techdocs-row {
  display: flex;
  align-items: center;
  gap: clamp(40px, 5vw, 72px);
  margin-top: 84px;
}
.techdocs { flex: 1 1 50%; min-width: 0; }
.techdocs-media { flex: 1 1 50%; min-width: 0; max-width: 553px; }
.techdocs-media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
.td-title {
  margin: 0 0 16px 0;
  color: #4c4848;
  font-weight: 400;
  font-size: clamp(22px, 1.9vw, 26px);
  line-height: 1.25;
}
.td-intro {
  margin: 0 0 34px 0;
  max-width: 545px;
  color: #6f6f6f;
  font-size: 14px;
  line-height: 1.55;
}
.td-list { list-style: none; margin: 0; padding: 0; max-width: 616px; }
.td-item {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 15px 4px;
  border-bottom: 1px solid #e3ddd0;
}
.td-name { flex: 1 1 auto; color: #4c4848; font-size: 13px; font-weight: 600; }
.td-type { color: #6d5c3c; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; }
.td-dl { display: inline-flex; flex: 0 0 auto; opacity: .85; transition: opacity .2s ease; }
.td-dl:hover { opacity: 1; }
.td-dl img { width: 16px; height: 15px; }

.cim-row {
  display: flex;
  align-items: center;
  gap: clamp(40px, 5vw, 72px);
  margin-top: 72px;
}
.cim-map { flex: 1 1 52%; min-width: 0; display: flex; justify-content: flex-end; }
.cim-map img { width: 100%; max-width: 400px; height: auto; display: block; }
.cim-copy { flex: 1 1 48%; min-width: 0; }
.cim-title {
  margin: 0 0 18px 0;
  color: #4c4848;
  font-weight: 400;
  font-size: clamp(22px, 1.9vw, 26px);
  line-height: 1.3;
}
.cim-rule { display: block; width: 100%; max-width: 586px; height: 1px; background: #d8d2c6; margin: 0 0 20px 0; }
.cim-text { margin: 0; max-width: 545px; color: #6f6f6f; font-size: 14px; line-height: 1.6; }

@media (max-width: 991.98px) {
  .qp-steps { flex-wrap: wrap; justify-content: center; gap: 32px 24px; }
  .qp-line { display: none; }
  .qp-step { flex: 0 0 30%; }
  .techdocs-row, .cim-row { flex-direction: column; }
  .cim-row { flex-direction: column-reverse; }
  .techdocs, .techdocs-media, .cim-map, .cim-copy { flex-basis: auto; width: 100%; max-width: none; }
  .techdocs-media { max-width: 553px; }
  .cim-map { justify-content: center; }
}
@media (max-width: 575.98px) {
  .quality { padding: 52px 0 64px 0; }
  .qp-step { flex: 0 0 44%; }
  .techdocs-row { margin-top: 56px; }
}


/* ============================================================
   OUR STORY PAGE (page-templates/pages-block/our-story)
   ------------------------------------------------------------
   The page's layout already lives in this stylesheet — it was
   written for the static our-story.html. These two rules are
   all the block version needs: both photographs now come from
   the Media Library and are printed inline, so the stylesheet's
   defaults have to get out of the way.
   ============================================================ */


/* ============================================================
   HOME PAGE — ACF BLOCK OVERRIDES
   ------------------------------------------------------------
   The homepage layout already lives in this stylesheet — it was
   written for the static index.html, where the timeline backdrop
   and the catalogue banner were CSS background images.

   In the block versions both photographs come from the Media
   Library and are printed inline, so the stylesheet's defaults
   have to get out of the way. The timeline also sets its own
   height inline (one step per milestone), which is why the fixed
   540vh is dropped here rather than overridden per section.
   ============================================================ */
.timeline-block { height: auto; }


/* ============================================================
   404 — PAGE NOT FOUND
   ------------------------------------------------------------
   Reuses the .page-banner treatment the inner pages share, then
   offers two ways back: a search and the site's real pages.
   The banner photo is optional (Theme Settings → 404 Page); with
   none set the .page-banner dark background shows through.
   ============================================================ */
.page-banner-404 .page-banner-title { max-width: 760px; }
.page-banner-404 .page-banner-sub { max-width: 640px; }

.e404-code {
  display: block;
  margin: 0 0 6px 0;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 700;
  font-size: clamp(52px, 7.6vw, 110px);
  line-height: 1;
  letter-spacing: 4px;
}

.e404 {
  background: #ffffff;
  padding: 76px 0 96px;
  text-align: center;
}
.e404-search {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: 640px;
  margin: 0 auto 38px auto;
}
.e404-input {
  flex: 1 1 320px;
  min-width: 0;
  padding: 12px 18px;
  border: 1px solid #e2ddd3;
  border-radius: 5px;
  background: #fbfcf4;
  color: #4c4848;
  font-size: 15px;
}
.e404-input::placeholder { color: #a09a92; }
.e404-input:focus { outline: none; border-color: #6d5c3c; }
.e404-submit { background: transparent; cursor: pointer; }

.e404-or {
  margin: 0 0 20px 0;
  color: #7d7873;
  font-size: 15px;
}
.e404-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.e404-links .btn-outline-brand { padding: 10px 26px; }

@media (max-width: 575.98px) {
  .e404 { padding: 56px 0 72px; }
  .e404-submit { width: 100%; }
}
/* ============================================================
   HEADER — LANGUAGE SWITCHER DROPDOWN
   TranslatePress menu items (Appearance → Menus → Language
   Switcher). The parent is the "Current Language" item, so the
   toggle always shows the language being viewed and the panel
   lists the other one.
   ============================================================ */
.hero-menu .nav-lang > .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-white);
  opacity: 1;
}

/* Bootstrap's caret, sized down to match the 14px nav type. */
.hero-menu .nav-lang > .nav-link.dropdown-toggle::after {
  margin: 0;
  border-top-width: 4px;
  border-right-width: 4px;
  border-left-width: 4px;
}

.hero-menu .dropdown-menu-lang {
  min-width: 0;
  /* Padding, not margin: a margin would leave a gap the pointer
     falls through on its way down from the toggle. */
  padding: 10px 0 6px;
  margin: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.hero-menu .dropdown-menu-lang .dropdown-item {
  padding: 5px 0.95rem;
  background: transparent;
  color: var(--color-white);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  opacity: 0.95;
  transition: opacity 0.2s ease;
}
.hero-menu .dropdown-menu-lang .dropdown-item:hover,
.hero-menu .dropdown-menu-lang .dropdown-item:focus {
  background: transparent;
  color: var(--color-white);
  opacity: 0.7;
}

/* ---------- Desktop: open on hover ----------
   Bootstrap only opens dropdowns on click, and it positions them
   with Popper when it does. Hovering never runs Popper, so the
   panel is placed by these rules instead — pinned under the
   toggle and right-aligned, since the switcher sits at the end
   of the navbar. */
@media (min-width: 992px) {
  .hero-menu .nav-lang {
    position: relative;
  }
  .hero-menu .dropdown-menu-lang {
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    text-align: right;
  }
  .hero-menu .nav-lang:hover > .dropdown-menu-lang,
  .hero-menu .nav-lang:focus-within > .dropdown-menu-lang {
    display: block;
  }
}

/* ---------- Collapsed navbar ----------
   The panel sits inline in the burger menu, so it needs no
   positioning at all. */
@media (max-width: 991.98px) {
  .hero-menu .dropdown-menu-lang {
    padding: 0;
  }
  .hero-menu .dropdown-menu-lang .dropdown-item {
    padding: 0.6rem 0.25rem;
  }
}

/* ---------- Solid navbar: the panel becomes part of the bar ----------
   On the shop screens (.is-solid) and once any page is scrolled
   (.is-scrolled) the navbar is filled brown, and the panel hangs
   below it over light page content — white-on-transparent would be
   unreadable there, so it takes the bar's own colour and drops a
   shadow downward only, reading as an extension of the navbar. */
@media (min-width: 992px) {
  .hero-navbar.is-solid .hero-menu .dropdown-menu-lang,
  .hero-navbar.is-scrolled .hero-menu .dropdown-menu-lang {
    padding: 8px 0 10px;
    background: #756959;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 10px 18px -8px rgba(0, 0, 0, 0.35);
  }
}