/* =========================================================
   L'abeille D'or - Landing Page v1
   Real website CSS for ABD-WEB
   Warm premium dessert maison style
   ========================================================= */

/* ---------- Base Reset ---------- */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Segoe UI", Arial, sans-serif;
  color: #2f2118;
  background:
    radial-gradient(circle at top left, rgba(214, 166, 87, 0.18), transparent 32rem),
    linear-gradient(180deg, #fff8ed 0%, #f8efe2 45%, #fffaf3 100%);
  line-height: 1.6;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

/* ---------- Design Tokens ---------- */

:root {
  --ivory: #fff8ed;
  --warm-ivory: #f8efe2;
  --cream: #fffaf3;
  --champagne: #e8c37a;
  --honey: #c6923e;
  --soft-gold: #d9aa5b;
  --cocoa: #4a2f22;
  --espresso: #2f2118;
  --muted-brown: #7a6253;
  --soft-beige: #eadcc8;
  --blush: #f4dfd6;
  --white: #ffffff;

  --shadow-soft: 0 18px 45px rgba(74, 47, 34, 0.12);
  --shadow-card: 0 12px 30px rgba(74, 47, 34, 0.10);
  --radius-large: 30px;
  --radius-medium: 22px;
  --radius-small: 14px;

  --container: 1180px;
}

/* ---------- Layout Helpers ---------- */

.container {
  width: min(100% - 32px, var(--container));
  margin: 0 auto;
}

.section {
  padding: 88px 0;
}

.section-soft {
  background:
    linear-gradient(180deg, rgba(255, 250, 243, 0.75), rgba(248, 239, 226, 0.9));
}

.section-title {
  max-width: 760px;
  margin-bottom: 38px;
}

.eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--honey);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--espresso);
  line-height: 1.08;
}

h1 {
  font-size: clamp(2.55rem, 6vw, 5.35rem);
  letter-spacing: -0.055em;
}

h2 {
  font-size: clamp(2rem, 4vw, 3.55rem);
  letter-spacing: -0.045em;
}

h3 {
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  letter-spacing: -0.025em;
}

p {
  margin: 0;
  color: var(--muted-brown);
}

.lead {
  font-size: clamp(1rem, 1.55vw, 1.22rem);
  max-width: 680px;
}

/* ---------- Buttons ---------- */

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  font-weight: 700;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  color: #fffaf3;
  background: linear-gradient(135deg, #9b652c, #c6923e);
  box-shadow: 0 12px 24px rgba(155, 101, 44, 0.25);
}

.btn-primary:hover {
  box-shadow: 0 16px 32px rgba(155, 101, 44, 0.32);
}

.btn-secondary {
  color: var(--espresso);
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid rgba(198, 146, 62, 0.32);
}

.btn-secondary:hover {
  background: #fff;
  box-shadow: var(--shadow-card);
}

/* ---------- Header / Navigation ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 248, 237, 0.86);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(198, 146, 62, 0.16);
}

.navbar {
  width: min(100% - 32px, var(--container));
  min-height: 82px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 210px;
}

.brand img {
  width: 156px;
  height: auto;
}

.brand-mark {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: contain;
  background: #fff;
  padding: 6px;
  box-shadow: 0 10px 24px rgba(74, 47, 34, 0.12);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  color: var(--cocoa);
  font-size: 0.96rem;
  font-weight: 650;
}

.nav-links a {
  position: relative;
  padding: 8px 0;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 0;
  height: 2px;
  background: var(--honey);
  transition: width 0.2s ease;
}

.nav-links a:hover::after {
  width: 100%;
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 18px;
  border-radius: 999px;
  color: #fffaf3;
  background: var(--cocoa);
  font-weight: 700;
  box-shadow: 0 10px 22px rgba(74, 47, 34, 0.18);
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: 76px 0 92px;
}

.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto auto;
  width: 540px;
  height: 540px;
  background: radial-gradient(circle, rgba(232, 195, 122, 0.35), transparent 68%);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 54px;
  align-items: center;
}

.hero-copy {
  max-width: 680px;
}

.hero-copy p {
  margin-top: 22px;
}

.hero-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.hero-badge {
  padding: 9px 14px;
  border-radius: 999px;
  color: var(--cocoa);
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(198, 146, 62, 0.22);
  font-size: 0.88rem;
  font-weight: 650;
}

.hero-media {
  position: relative;
  min-height: 560px;
}

.hero-main-card {
  position: relative;
  overflow: hidden;
  height: 520px;
  border-radius: 42px;
  background: #eadcc8;
  box-shadow: var(--shadow-soft);
}

.hero-main-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 54%;
}

.hero-floating-card {
  position: absolute;
  left: -34px;
  bottom: 34px;
  width: min(265px, 52%);
  overflow: hidden;
  border: 10px solid rgba(255, 250, 243, 0.92);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(74, 47, 34, 0.20);
}

.hero-floating-card img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  object-position: center;
}

.hero-note {
  position: absolute;
  right: -8px;
  top: 46px;
  max-width: 230px;
  padding: 18px;
  border-radius: 24px;
  background: rgba(255, 250, 243, 0.88);
  border: 1px solid rgba(198, 146, 62, 0.22);
  box-shadow: var(--shadow-card);
}

.hero-note strong {
  display: block;
  margin-bottom: 5px;
  color: var(--espresso);
}

.hero-note span {
  color: var(--muted-brown);
  font-size: 0.92rem;
}

/* ---------- Intro / Maison Section ---------- */

.intro-grid {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 46px;
  align-items: center;
}

.intro-media {
  display: grid;
  grid-template-columns: 1fr 0.82fr;
  gap: 16px;
  align-items: end;
}

.intro-media .image-card:first-child {
  height: 430px;
}

.intro-media .image-card:last-child {
  height: 310px;
}

.image-card {
  overflow: hidden;
  border-radius: var(--radius-large);
  background: var(--soft-beige);
  box-shadow: var(--shadow-card);
}

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

.image-card.branch img {
  object-position: center;
}

.image-card.sweets img {
  object-position: center 52%;
}

.intro-copy p + p {
  margin-top: 16px;
}

/* ---------- Category Cards ---------- */

.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.category-card {
  overflow: hidden;
  border-radius: var(--radius-large);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(198, 146, 62, 0.16);
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

.category-image {
  height: 255px;
  background: var(--soft-beige);
}

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

.category-card:nth-child(1) .category-image img {
  object-position: center 54%;
}

.category-card:nth-child(2) .category-image img {
  object-position: center;
}

.category-card:nth-child(3) .category-image img {
  object-position: center 48%;
}

.category-card:nth-child(4) .category-image img {
  object-position: center 52%;
}

.category-card:nth-child(5) .category-image img {
  object-position: center;
}

.category-card:nth-child(6) .category-image img {
  object-position: center 55%;
}

.category-content {
  padding: 22px;
}

.category-content p {
  margin-top: 9px;
  font-size: 0.97rem;
}

/* ---------- Knefe Feature ---------- */

.knefe-feature {
  position: relative;
  overflow: hidden;
  border-radius: 42px;
  padding: 42px;
  background:
    linear-gradient(135deg, rgba(74, 47, 34, 0.93), rgba(121, 76, 39, 0.86)),
    var(--cocoa);
  box-shadow: var(--shadow-soft);
}

.knefe-grid {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 34px;
  align-items: center;
}

.knefe-copy h2,
.knefe-copy p {
  color: #fffaf3;
}

.knefe-copy p {
  margin-top: 18px;
  color: rgba(255, 250, 243, 0.82);
}

.knefe-gallery {
  display: grid;
  grid-template-columns: 1fr 0.78fr;
  gap: 16px;
  align-items: stretch;
}

.knefe-large,
.knefe-small {
  overflow: hidden;
  border-radius: 30px;
  background: #eadcc8;
}

.knefe-large {
  min-height: 410px;
}

.knefe-small-stack {
  display: grid;
  gap: 16px;
}

.knefe-small {
  min-height: 197px;
}

.knefe-large img,
.knefe-small img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.knefe-large img {
  object-position: center 54%;
}

.knefe-small img {
  object-position: center;
}

/* ---------- Occasions ---------- */

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

.occasion-card {
  overflow: hidden;
  min-height: 330px;
  position: relative;
  border-radius: var(--radius-large);
  background: var(--soft-beige);
  box-shadow: var(--shadow-card);
}

.occasion-card img {
  width: 100%;
  height: 100%;
  min-height: 330px;
  object-fit: cover;
  transition: transform 0.35s ease;
}

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

.occasion-overlay {
  position: absolute;
  inset: auto 14px 14px 14px;
  padding: 16px;
  border-radius: 22px;
  background: rgba(255, 250, 243, 0.88);
  backdrop-filter: blur(12px);
}

.occasion-overlay h3 {
  font-size: 1.08rem;
}

.occasion-overlay p {
  margin-top: 5px;
  font-size: 0.9rem;
}

/* ---------- Barista ---------- */

.barista-section {
  background:
    radial-gradient(circle at bottom right, rgba(74, 47, 34, 0.10), transparent 30rem),
    linear-gradient(180deg, #fffaf3, #f4e7d7);
}

.barista-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 46px;
  align-items: center;
}

.barista-copy p {
  margin-top: 16px;
}

.barista-media-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.barista-media-grid .image-card {
  height: 230px;
}

.barista-media-grid .image-card:first-child {
  grid-row: span 2;
  height: 474px;
}

.barista-media-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.barista-media-grid .image-card:first-child img {
  object-position: center;
}

.barista-media-grid .image-card:nth-child(2) img {
  object-position: center;
}

.barista-media-grid .image-card:nth-child(3) img {
  object-position: center 52%;
}

/* ---------- Branch Preview ---------- */

.branch-preview {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 42px;
  align-items: center;
}

.branch-photo-wall {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.branch-photo-wall .image-card {
  height: 240px;
}

.branch-photo-wall .image-card:first-child {
  grid-column: span 2;
  height: 340px;
}

.branch-photo-wall img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.branch-photo-wall .image-card:first-child img {
  object-position: center;
}

.branch-photo-wall .image-card:nth-child(2) img {
  object-position: center;
}

.branch-photo-wall .image-card:nth-child(3) img {
  object-position: center;
}

/* ---------- Contact CTA ---------- */

.cta-panel {
  overflow: hidden;
  position: relative;
  padding: 54px;
  border-radius: 42px;
  background:
    linear-gradient(135deg, rgba(255, 250, 243, 0.94), rgba(248, 239, 226, 0.94)),
    #fffaf3;
  border: 1px solid rgba(198, 146, 62, 0.18);
  box-shadow: var(--shadow-soft);
}

.cta-panel::after {
  content: "";
  position: absolute;
  right: -120px;
  bottom: -160px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: rgba(232, 195, 122, 0.35);
}

.cta-content {
  position: relative;
  z-index: 1;
  max-width: 820px;
}

/* ---------- Footer ---------- */

.site-footer {
  padding: 46px 0;
  color: rgba(255, 250, 243, 0.8);
  background: var(--espresso);
}

.footer-grid {
  width: min(100% - 32px, var(--container));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 26px;
  align-items: center;
}

.footer-logo {
  width: 160px;
  margin-bottom: 16px;
}

.site-footer p {
  color: rgba(255, 250, 243, 0.72);
}

.footer-links {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 18px;
  color: rgba(255, 250, 243, 0.86);
  font-weight: 650;
}

/* ---------- Responsive: Tablets ---------- */

@media (max-width: 980px) {
  .section {
    padding: 70px 0;
  }

  .navbar {
    min-height: 76px;
  }

  .nav-links {
    display: none;
  }

  .hero-grid,
  .intro-grid,
  .knefe-grid,
  .barista-grid,
  .branch-preview {
    grid-template-columns: 1fr;
  }

  .hero-media {
    min-height: auto;
  }

  .hero-main-card {
    height: 520px;
  }

  .hero-floating-card {
    left: 22px;
    bottom: 22px;
  }

  .hero-note {
    right: 22px;
  }

  .category-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .occasion-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .knefe-feature {
    padding: 30px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-links {
    justify-content: flex-start;
  }
}

/* ---------- Responsive: Phones ---------- */

@media (max-width: 640px) {
  .container,
  .navbar,
  .footer-grid {
    width: min(100% - 24px, var(--container));
  }

  .section {
    padding: 58px 0;
  }

  .brand img {
    width: 138px;
  }

  .nav-cta {
    padding: 10px 14px;
    font-size: 0.9rem;
  }

  .hero {
    padding: 52px 0 64px;
  }

  .hero-main-card {
    height: 420px;
    border-radius: 32px;
  }

  .hero-floating-card {
    position: relative;
    left: auto;
    bottom: auto;
    width: 72%;
    margin: -78px 0 0 18px;
    border-width: 8px;
  }

  .hero-floating-card img {
    height: 150px;
  }

  .hero-note {
    position: relative;
    right: auto;
    top: auto;
    max-width: none;
    margin-top: 14px;
  }

  .btn {
    width: 100%;
  }

  .intro-media {
    grid-template-columns: 1fr;
  }

  .intro-media .image-card:first-child,
  .intro-media .image-card:last-child {
    height: 330px;
  }

  .category-grid,
  .occasion-grid {
    grid-template-columns: 1fr;
  }

  .category-image {
    height: 245px;
  }

  .knefe-feature {
    border-radius: 30px;
    padding: 22px;
  }

  .knefe-gallery {
    grid-template-columns: 1fr;
  }

  .knefe-large {
    min-height: 330px;
  }

  .knefe-small {
    min-height: 210px;
  }

  .barista-media-grid {
    grid-template-columns: 1fr;
  }

  .barista-media-grid .image-card,
  .barista-media-grid .image-card:first-child {
    height: 285px;
  }

  .branch-photo-wall {
    grid-template-columns: 1fr;
  }

  .branch-photo-wall .image-card,
  .branch-photo-wall .image-card:first-child {
    grid-column: auto;
    height: 285px;
  }

  .cta-panel {
    padding: 32px 22px;
    border-radius: 30px;
  }
}

/* =========================================================
   L'abeille D'or - Landing Page v1.1 Desktop/Layout Fixes
   Fixes: header/logo, hero proportions, desktop image rhythm
   ========================================================= */


/* ---------- Header refinement ---------- */

@media (min-width: 981px) {
  .navbar {
    min-height: 104px;
  }

  .brand {
    min-width: 260px;
  }

  .brand img {
    width: 210px;
    max-height: 78px;
    object-fit: contain;
  }

  .brand-mark {
    width: auto;
    height: auto;
    max-width: 210px;
    max-height: 78px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    object-fit: contain;
  }

  .nav-links {
    gap: 30px;
    font-size: 1rem;
  }

  .nav-cta {
    padding: 13px 22px;
  }
}


/* ---------- Remove unwanted logo background globally ---------- */

.brand img,
.footer-logo {
  background: transparent !important;
  box-shadow: none;
}

.brand-mark {
  background: transparent !important;
}


/* ---------- Hero desktop proportion correction ---------- */

@media (min-width: 981px) {
  .hero {
    padding: 64px 0 76px;
  }

  .hero-grid {
    grid-template-columns: 1.08fr 0.92fr;
    gap: 46px;
  }

  .hero-copy {
    max-width: 700px;
  }

  .hero-media {
    min-height: 470px;
  }

  .hero-main-card {
    height: 440px;
    border-radius: 34px;
  }

  .hero-main-card img {
    object-fit: cover;
    object-position: center 50%;
  }

  .hero-floating-card {
    width: 220px;
    left: -22px;
    bottom: 24px;
    border-width: 8px;
    border-radius: 24px;
  }

  .hero-floating-card img {
    height: 150px;
  }

  .hero-note {
    top: 28px;
    right: -2px;
    max-width: 215px;
  }
}


/* ---------- More uniform desktop image rhythm ---------- */

@media (min-width: 981px) {
  .category-image {
    height: 235px;
  }

  .category-card {
    height: 100%;
  }

  .occasion-card,
  .occasion-card img {
    min-height: 300px;
  }

  .intro-media .image-card:first-child {
    height: 390px;
  }

  .intro-media .image-card:last-child {
    height: 290px;
  }

  .knefe-large {
    min-height: 360px;
  }

  .knefe-small {
    min-height: 172px;
  }

  .barista-media-grid .image-card {
    height: 210px;
  }

  .barista-media-grid .image-card:first-child {
    height: 434px;
  }

  .branch-photo-wall .image-card:first-child {
    height: 300px;
  }

  .branch-photo-wall .image-card {
    height: 215px;
  }
}


/* ---------- Desktop section spacing tightening ---------- */

@media (min-width: 981px) {
  .section {
    padding: 76px 0;
  }

  .section-title {
    margin-bottom: 32px;
  }

  .category-grid {
    gap: 20px;
  }

  .occasion-grid {
    gap: 18px;
  }
}
/* =========================================================
   L'abeille D'or - Landing Page v1.2 Quick Corrections
   Footer logo size normalization
   ========================================================= */

.footer-logo {
  width: 115px;
  max-height: 58px;
  object-fit: contain;
}

@media (max-width: 640px) {
  .footer-logo {
    width: 105px;
    max-height: 54px;
  }
}




/* =========================================================
   L'abeille D'or - Header Logo Size Fix
   ========================================================= */

@media (min-width: 981px) {
  .site-header .brand img,
  .site-header .brand-mark {
    width: auto;
    height: 86px;
    max-height: 86px;
    max-width: 280px;
    object-fit contain;
  }

  .navbar {
    min-height: 118px;
  }
}

@media (max-width: 980px) {
  .site-header .brand img,
  .site-header .brand-mark {
    width: auto;
    height: 68px;
    max-height: 68px;
    max-width: 220px;
    object-fit: contain;
  }

  .navbar {
    min-height: 92px;
  }
}

@media (max-width: 640px) {
  .site-header .brand img,
  .site-header .brand-mark {
    height: 54px;
    max-height: 54px;
    max-width: 175px;
  }

  .navbar {
    min-height: 76px;
  }
}
/* =========================================================
   L'abeille D'or - Final Header/Footer Logo Control
   ========================================================= */

.site-header .brand {
  display: flex;
  align-items: center;
  min-width: 300px;
}

.site-header .brand img {
  display: block;
  width: auto !important;
  height: 96px !important;
  max-width: 320px !important;
  max-height: 96px !important;
  object-fit: contain !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.site-header .navbar {
  min-height: 124px !important;
}

.footer-logo {
  width: auto !important;
  height: 64px !important;
  max-width: 180px !important;
  max-height: 64px !important;
  object-fit: contain !important;
  background: transparent !important;
  box-shadow: none !important;
}

@media (max-width: 980px) {
  .site-header .brand {
    min-width: auto;
  }

  .site-header .brand img {
    height: 70px !important;
    max-height: 70px !important;
    max-width: 230px !important;
  }

  .site-header .navbar {
    min-height: 94px !important;
  }
}

@media (max-width: 640px) {
  .site-header .brand img {
    height: 54px !important;
    max-height: 54px !important;
    max-width: 180px !important;
  }

  .site-header .navbar {
    min-height: 78px !important;
  }

  .footer-logo {
    height: 52px !important;
    max-height: 52px !important;
    max-width: 145px !important;
  }
}

/* =========================================================
   L'abeille D'or - Clean Header System v1
   Replaces older .navbar / .brand / .nav-links behavior
   ========================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 248, 237, 0.94);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(198, 146, 62, 0.16);
}

.header-inner {
  min-height: 118px;
  display: grid;
  grid-template-columns: 280px 1fr auto;
  align-items: center;
  gap: 28px;
}

.site-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 96px;
}

.site-logo img {
  display: block;
  width: auto;
  height: 92px;
  max-width: 270px;
  object-fit: contain;
  background: transparent;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  color: var(--cocoa);
  font-size: 1rem;
  font-weight: 650;
}

.site-nav a {
  position: relative;
  padding: 10px 0;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 3px;
  width: 0;
  height: 2px;
  background: var(--honey);
  transition: width 0.2s ease;
}

.site-nav a:hover::after {
  width: 100%;
}

.header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 20px;
  border-radius: 999px;
  color: #fffaf3;
  background: var(--cocoa);
  font-weight: 700;
  box-shadow: 0 10px 22px rgba(74, 47, 34, 0.18);
  white-space: nowrap;
}

/* Disable older header classes if they still exist somewhere */
.navbar,
.brand,
.nav-links,
.nav-cta {
  all: unset;
}

/* Tablet header */
@media (max-width: 980px) {
  .header-inner {
    min-height: 92px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
  }

  .site-logo {
    height: 76px;
  }

  .site-logo img {
    height: 68px;
    max-width: 220px;
  }

  .site-nav {
    display: none;
  }

  .header-cta {
    min-height: 42px;
    padding: 10px 16px;
    font-size: 0.92rem;
  }
}

/* Phone header */
@media (max-width: 640px) {
  .header-inner {
    min-height: 76px;
  }

  .site-logo {
    height: 60px;
  }

  .site-logo img {
    height: 52px;
    max-width: 170px;
  }

  .header-cta {
    min-height: 38px;
    padding: 9px 13px;
    font-size: 0.86rem;
  }
}
/* =========================================================
   L'abeille D'or - Header Size Final Tuning
   Purpose: make logo proportionate to hero heading
   ========================================================= */

@media (min-width: 981px) {
  .header-inner {
    min-height: 142px !important;
    grid-template-columns: 360px 1fr auto !important;
  }

  .site-logo {
    height: 118px !important;
  }

  .site-logo img {
    height: 112px !important;
    max-height: 112px !important;
    max-width: 350px !important;
    width: auto !important;
    object-fit: contain !important;
  }

  .site-nav {
    font-size: 1.03rem !important;
    gap: 30px !important;
  }

  .header-cta {
    min-height: 48px !important;
    padding: 13px 22px !important;
  }
}

@media (max-width: 980px) {
  .header-inner {
    min-height: 96px !important;
  }

  .site-logo img {
    height: 72px !important;
    max-height: 72px !important;
    max-width: 230px !important;
  }
}

@media (max-width: 640px) {
  .header-inner {
    min-height: 78px !important;
  }

  .site-logo img {
    height: 54px !important;
    max-height: 54px !important;
    max-width: 175px !important;
  }
}

/* =========================================================
   L'abeille D'or - Landing Page v2 Top Section
   Matches current index.html structure:
   .site-header / .header-inner / .site-logo
   .hero / .hero-content / .hero-image-wrap / .hero-image
   ========================================================= */


/* ---------- Header: premium balanced version ---------- */

@media (min-width: 981px) {
  .site-header {
    background: rgba(255, 248, 237, 0.96) !important;
    border-bottom: 1px solid rgba(198, 146, 62, 0.14) !important;
  }

  .header-inner {
    min-height: 128px !important;
    display: grid !important;
    grid-template-columns: 340px 1fr auto !important;
    align-items: center !important;
    gap: 34px !important;
  }

  .site-logo {
    display: flex !important;
    align-items: center !important;
    height: 110px !important;
  }

  .site-logo img {
    height: 100px !important;
    max-height: 100px !important;
    max-width: 330px !important;
    width: auto !important;
    object-fit: contain !important;
    background: transparent !important;
  }

  .site-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 30px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #4a2f22 !important;
  }

  .header-cta {
    min-height: 48px !important;
    padding: 13px 24px !important;
    border-radius: 999px !important;
    background: #4a2f22 !important;
    color: #fff8ed !important;
    font-weight: 800 !important;
    box-shadow: 0 14px 28px rgba(74, 47, 34, 0.18) !important;
  }
}


/* ---------- Hero: centered two-column premium layout ---------- */

.hero {
  width: min(100% - 48px, 1180px) !important;
  margin: 0 auto !important;
  padding: 78px 0 84px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr) !important;
  align-items: center !important;
  gap: 58px !important;
  overflow: visible !important;
}

.hero-content {
  max-width: 590px !important;
}

.hero .eyebrow {
  margin-bottom: 18px !important;
  color: #b98634 !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
}

.hero h1 {
  margin: 0 !important;
  max-width: 640px !important;
  color: #2f2118 !important;
  font-size: clamp(3rem, 4.9vw, 5.25rem) !important;
  font-weight: 760 !important;
  line-height: 0.96 !important;
  letter-spacing: -0.065em !important;
}

.hero-text {
  margin-top: 24px !important;
  max-width: 570px !important;
  color: #725c4e !important;
  font-size: clamp(1rem, 1.25vw, 1.18rem) !important;
  line-height: 1.75 !important;
}

.hero-actions {
  margin-top: 32px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

.hero-actions .btn,
.btn.primary,
.btn.secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 50px !important;
  padding: 14px 24px !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.hero-actions .btn:hover {
  transform: translateY(-2px) !important;
}

.btn.primary {
  color: #fff8ed !important;
  background: linear-gradient(135deg, #9b652c, #c6923e) !important;
  box-shadow: 0 14px 28px rgba(155, 101, 44, 0.24) !important;
}

.btn.secondary {
  color: #4a2f22 !important;
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(198, 146, 62, 0.30) !important;
  box-shadow: 0 10px 24px rgba(74, 47, 34, 0.08) !important;
}

.hero-image-wrap {
  position: relative !important;
  min-height: 500px !important;
  border-radius: 42px !important;
  background:
    radial-gradient(circle at 50% 45%, rgba(232, 195, 122, 0.30), transparent 44%),
    linear-gradient(145deg, rgba(255, 250, 243, 0.90), rgba(240, 224, 201, 0.88)) !important;
  box-shadow: 0 24px 60px rgba(74, 47, 34, 0.14) !important;
  overflow: hidden !important;
}

.hero-image-wrap::before {
  content: "" !important;
  position: absolute !important;
  inset: 28px !important;
  border: 1px solid rgba(198, 146, 62, 0.18) !important;
  border-radius: 32px !important;
  pointer-events: none !important;
}

.hero-image {
  position: absolute !important;
  left: 50% !important;
  bottom: 22px !important;
  width: 104% !important;
  max-width: none !important;
  height: auto !important;
  transform: translateX(-50%) !important;
  object-fit: contain !important;
  object-position: center bottom !important;
}


/* ---------- Calm down global H1 if older rules are still active ---------- */

main h1 {
  font-weight: 760 !important;
}


/* ---------- Tablet ---------- */

@media (max-width: 980px) {
  .hero {
    width: min(100% - 32px, 760px) !important;
    padding: 56px 0 70px !important;
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  .hero-content {
    max-width: 720px !important;
  }

  .hero h1 {
    font-size: clamp(2.75rem, 8vw, 4.4rem) !important;
  }

  .hero-image-wrap {
    min-height: 430px !important;
  }

  .hero-image {
    width: 110% !important;
  }
}


/* ---------- Phone ---------- */

@media (max-width: 640px) {
  .hero {
    width: min(100% - 24px, 520px) !important;
    padding: 42px 0 58px !important;
    gap: 28px !important;
  }

  .hero h1 {
    font-size: clamp(2.35rem, 13vw, 3.35rem) !important;
    line-height: 1.02 !important;
  }

  .hero-text {
    font-size: 1rem !important;
    line-height: 1.65 !important;
  }

  .hero-actions {
    gap: 12px !important;
  }

  .hero-actions .btn {
    width: 100% !important;
  }

  .hero-image-wrap {
    min-height: 330px !important;
    border-radius: 30px !important;
  }

  .hero-image-wrap::before {
    inset: 18px !important;
    border-radius: 24px !important;
  }

  .hero-image {
    width: 118% !important;
    bottom: 10px !important;
  }
}

/* =========================================================
   L'abeille D'or - Hero Title and Logo Balance v2.1
   Purpose: reduce hero dominance while improving brand presence
   ========================================================= */

@media (min-width: 981px) {
  .header-inner {
    min-height: 138px !important;
    grid-template-columns: 370px 1fr auto !important;
  }

  .site-logo img {
    height: 112px !important;
    max-height: 112px !important;
    max-width: 360px !important;
  }

  .hero {
    padding-top: 68px !important;
    padding-bottom: 82px !important;
    grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr) !important;
  }

  .hero h1 {
    font-size: clamp(2.85rem, 4.25vw, 4.65rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.055em !important;
    font-weight: 760 !important;
  }

  .hero-text {
    margin-top: 22px !important;
    max-width: 610px !important;
  }

  .hero-image-wrap {
    min-height: 470px !important;
  }

  .hero-image {
    width: 100% !important;
    bottom: 18px !important;
  }
}

@media (max-width: 980px) {
  .hero h1 {
    font-size: clamp(2.6rem, 7vw, 4rem) !important;
    line-height: 1.04 !important;
  }
}

@media (max-width: 640px) {
  .hero h1 {
    font-size: clamp(2.25rem, 11vw, 3.1rem) !important;
    line-height: 1.05 !important;
  }
}

/* =========================================================
   L'abeille D'or - Hero Headline Size Adjustment v2.2
   Purpose: make hero title bold but less dominant than brand
   ========================================================= */

@media (min-width: 981px) {
  .hero h1 {
    font-size: clamp(2.55rem, 3.65vw, 4.05rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.045em !important;
  }

  .hero-content {
    max-width: 560px !important;
  }
}

@media (max-width: 980px) {
  .hero h1 {
    font-size: clamp(2.45rem, 6.3vw, 3.65rem) !important;
    line-height: 1.05 !important;
  }
}

@media (max-width: 640px) {
  .hero h1 {
    font-size: clamp(2.15rem, 10vw, 2.95rem) !important;
    line-height: 1.06 !important;
  }
}

/* =========================================================
   L'abeille D'or - Contact Section v1
   Temporary department contact cards
   ========================================================= */

.contact-section {
  width: min(100% - 48px, 1180px) !important;
  margin: 0 auto 88px !important;
  padding: 58px !important;
  display: grid !important;
  grid-template-columns: 0.9fr 1.1fr !important;
  gap: 42px !important;
  align-items: center !important;
  border-radius: 42px !important;
  background:
    linear-gradient(135deg, rgba(255, 250, 243, 0.96), rgba(244, 231, 215, 0.96)),
    #fffaf3 !important;
  border: 1px solid rgba(198, 146, 62, 0.18) !important;
  box-shadow: 0 24px 60px rgba(74, 47, 34, 0.12) !important;
}

.contact-heading h2 {
  margin: 0 !important;
  color: #2f2118 !important;
  font-size: clamp(2rem, 3.5vw, 3.25rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.045em !important;
}

.contact-heading p:not(.eyebrow) {
  margin-top: 18px !important;
  max-width: 560px !important;
  color: #725c4e !important;
  font-size: 1.05rem !important;
  line-height: 1.7 !important;
}

.contact-card-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

.contact-card {
  min-height: 245px !important;
  padding: 28px !important;
  border-radius: 28px !important;
  background: rgba(255, 255, 255, 0.74) !important;
  border: 1px solid rgba(198, 146, 62, 0.18) !important;
  box-shadow: 0 14px 34px rgba(74, 47, 34, 0.08) !important;
}

.contact-label {
  display: inline-block !important;
  margin-bottom: 14px !important;
  color: #b98634 !important;
  font-size: 0.76rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
}

.contact-card h3 {
  margin: 0 !important;
  color: #2f2118 !important;
  font-size: 1.45rem !important;
  line-height: 1.15 !important;
}

.contact-card p {
  margin-top: 14px !important;
  color: #725c4e !important;
  line-height: 1.65 !important;
}

.contact-card-link {
  display: inline-flex !important;
  margin-top: 20px !important;
  color: #4a2f22 !important;
  font-weight: 850 !important;
  border-bottom: 2px solid rgba(198, 146, 62, 0.45) !important;
}

.contact-card-link:hover {
  color: #9b652c !important;
}


/* ---------- Footer cleanup ---------- */

.site-footer {
  padding: 42px 24px !important;
  text-align: center !important;
  background: #2f2118 !important;
}

.site-footer img {
  width: auto !important;
  height: 54px !important;
  max-width: 140px !important;
  object-fit: contain !important;
  margin: 0 auto 14px !important;
}

.site-footer p {
  color: rgba(255, 250, 243, 0.72) !important;
  font-size: 0.95rem !important;
}


/* ---------- Contact responsive ---------- */

@media (max-width: 980px) {
  .contact-section {
    width: min(100% - 32px, 760px) !important;
    grid-template-columns: 1fr !important;
    padding: 42px !important;
    margin-bottom: 70px !important;
  }

  .contact-card-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 640px) {
  .contact-section {
    width: min(100% - 24px, 520px) !important;
    padding: 28px !important;
    border-radius: 30px !important;
  }

  .contact-card-grid {
    grid-template-columns: 1fr !important;
  }

  .contact-card {
    min-height: auto !important;
    padding: 24px !important;
    border-radius: 24px !important;
  }

  .site-footer img {
    height: 46px !important;
    max-width: 120px !important;
  }
}

/* =========================================================
   L'abeille D'or - Contact Layout v1.1
   Places contact heading above cards for easier scaling
   ========================================================= */

.contact-section {
  grid-template-columns: 1fr !important;
  align-items: start !important;
}

.contact-heading {
  max-width: 820px !important;
}

.contact-heading p:not(.eyebrow) {
  max-width: 760px !important;
}

.contact-card-grid {
  width: 100% !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  margin-top: 8px !important;
}

@media (min-width: 1180px) {
  .contact-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .contact-card-grid {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   L'abeille D'or - Our Knefe Story Section v1
   Premium story block after hero
   ========================================================= */

.knefe-story-section {
  width: min(100% - 48px, 1180px) !important;
  margin: 0 auto 88px !important;
  padding: 34px !important;
  display: grid !important;
  grid-template-columns: minmax(360px, 0.95fr) minmax(0, 1.05fr) !important;
  gap: 48px !important;
  align-items: center !important;
  border-radius: 46px !important;
  background:
    linear-gradient(135deg, rgba(255, 250, 243, 0.92), rgba(244, 231, 215, 0.92)),
    #fffaf3 !important;
  border: 1px solid rgba(198, 146, 62, 0.16) !important;
  box-shadow: 0 24px 60px rgba(74, 47, 34, 0.10) !important;
}

.knefe-story-media {
  min-height: 430px !important;
  overflow: hidden !important;
  border-radius: 34px !important;
  background:
    radial-gradient(circle at center, rgba(232, 195, 122, 0.26), transparent 48%),
    #eadcc8 !important;
  box-shadow: 0 18px 42px rgba(74, 47, 34, 0.12) !important;
}

.knefe-story-media img {
  width: 100% !important;
  height: 100% !important;
  min-height: 430px !important;
  object-fit: cover !important;
  object-position: center 52% !important;
}

.knefe-story-content {
  max-width: 610px !important;
}

.knefe-story-content h2 {
  margin: 0 !important;
  color: #2f2118 !important;
  font-size: clamp(2.25rem, 4vw, 4rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.05em !important;
}

.knefe-story-content p:not(.eyebrow) {
  margin-top: 20px !important;
  color: #725c4e !important;
  font-size: clamp(1rem, 1.18vw, 1.12rem) !important;
  line-height: 1.78 !important;
}

.text-link {
  display: inline-flex !important;
  margin-top: 26px !important;
  color: #4a2f22 !important;
  font-weight: 850 !important;
  border-bottom: 2px solid rgba(198, 146, 62, 0.48) !important;
  padding-bottom: 4px !important;
}

.text-link:hover {
  color: #9b652c !important;
}


/* ---------- Our Knefe responsive ---------- */

@media (max-width: 980px) {
  .knefe-story-section {
    width: min(100% - 32px, 760px) !important;
    grid-template-columns: 1fr !important;
    gap: 34px !important;
    padding: 30px !important;
    margin-bottom: 72px !important;
  }

  .knefe-story-media,
  .knefe-story-media img {
    min-height: 360px !important;
  }

  .knefe-story-content {
    max-width: 720px !important;
  }
}

@media (max-width: 640px) {
  .knefe-story-section {
    width: min(100% - 24px, 520px) !important;
    padding: 22px !important;
    border-radius: 32px !important;
    gap: 26px !important;
  }

  .knefe-story-media {
    border-radius: 26px !important;
  }

  .knefe-story-media,
  .knefe-story-media img {
    min-height: 285px !important;
  }

  .knefe-story-content h2 {
    font-size: clamp(2rem, 10vw, 2.85rem) !important;
  }
}

/* =========================================================
   L'abeille D'or - Header Logo Size Adjustment v1
   Purpose: make new bee + wordmark logo more present
   ========================================================= */

@media (min-width: 981px) {
  .site-logo img {
    height: 126px !important;
    max-height: 126px !important;
    max-width: 430px !important;
    width: auto !important;
    object-fit: contain !important;
  }

  .site-logo {
    height: 132px !important;
  }

  .header-inner {
    min-height: 154px !important;
    grid-template-columns: 440px 1fr auto !important;
  }
}

@media (max-width: 980px) {
  .site-logo img {
    height: 82px !important;
    max-height: 82px !important;
    max-width: 280px !important;
  }

  .header-inner {
    min-height: 104px !important;
  }
}

@media (max-width: 640px) {
  .site-logo img {
    height: 58px !important;
    max-height: 58px !important;
    max-width: 205px !important;
  }

  .header-inner {
    min-height: 82px !important;
  }
}


/* =========================================================
   L'abeille D'or - Header + Hero Background Blend v1
   Purpose: remove hard divider line and align header/hero tones
   ========================================================= */

body {
  background:
    radial-gradient(circle at 86% 18%, rgba(232, 195, 122, 0.20), transparent 34rem),
    radial-gradient(circle at 12% 22%, rgba(255, 250, 243, 0.85), transparent 28rem),
    linear-gradient(180deg, #fff8ed 0%, #fbf1e3 42%, #fffaf3 100%) !important;
}

.site-header {
  background:
    linear-gradient(90deg, rgba(255, 248, 237, 0.97) 0%, rgba(255, 248, 237, 0.95) 48%, rgba(248, 238, 222, 0.98) 100%) !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

.site-header::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -1px !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(198, 146, 62, 0.10), transparent) !important;
  pointer-events: none !important;
}

.hero {
  margin-top: 0 !important;
  background: transparent !important;
}

.hero-image-wrap {
  background:
    radial-gradient(circle at 55% 45%, rgba(232, 195, 122, 0.26), transparent 46%),
    linear-gradient(145deg, rgba(255, 250, 243, 0.92), rgba(241, 226, 204, 0.92)) !important;
}

@media (max-width: 980px) {
  .site-header {
    background: rgba(255, 248, 237, 0.97) !important;
  }
}

/* =========================================================
   L'abeille D'or - Brand Strip v1
   Safe trust/value strip under hero
   ========================================================= */

.brand-strip {
  width: min(100% - 48px, 1180px) !important;
  margin: -28px auto 72px !important;
  position: relative !important;
  z-index: 2 !important;
}

.brand-strip-inner {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0 !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: rgba(255, 250, 243, 0.78) !important;
  border: 1px solid rgba(198, 146, 62, 0.18) !important;
  box-shadow: 0 18px 44px rgba(74, 47, 34, 0.09) !important;
  backdrop-filter: blur(10px) !important;
}

.brand-strip-inner span {
  min-height: 58px !important;
  padding: 16px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  color: #4a2f22 !important;
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  border-right: 1px solid rgba(198, 146, 62, 0.16) !important;
}

.brand-strip-inner span:last-child {
  border-right: 0 !important;
}

@media (max-width: 980px) {
  .brand-strip {
    width: min(100% - 32px, 760px) !important;
    margin: -18px auto 58px !important;
  }

  .brand-strip-inner {
    grid-template-columns: repeat(2, 1fr) !important;
    border-radius: 28px !important;
  }

  .brand-strip-inner span:nth-child(2) {
    border-right: 0 !important;
  }

  .brand-strip-inner span:nth-child(1),
  .brand-strip-inner span:nth-child(2) {
    border-bottom: 1px solid rgba(198, 146, 62, 0.16) !important;
  }
}

@media (max-width: 640px) {
  .brand-strip {
    width: min(100% - 24px, 520px) !important;
    margin: -10px auto 48px !important;
  }

  .brand-strip-inner {
    grid-template-columns: 1fr !important;
    border-radius: 24px !important;
  }

  .brand-strip-inner span {
    min-height: 50px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(198, 146, 62, 0.14) !important;
    font-size: 0.88rem !important;
  }

  .brand-strip-inner span:last-child {
    border-bottom: 0 !important;
  }
}


/* =========================================================
   L'abeille D'or - Brand Strip v2
   Slim two-line value strip with subtle icons
   ========================================================= */

.brand-strip {
  width: min(100% - 48px, 1180px) !important;
  margin: -22px auto 68px !important;
  position: relative !important;
  z-index: 2 !important;
}

.brand-strip-inner {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.brand-strip-item {
  min-height: 58px !important;
  padding: 10px 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  border-right: 1px solid rgba(198, 146, 62, 0.18) !important;
}

.brand-strip-item:last-child {
  border-right: 0 !important;
}

.strip-icon {
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px !important;
  display: inline-block !important;
  border: 1.8px solid rgba(198, 146, 62, 0.58) !important;
  border-radius: 6px !important;
  transform: rotate(30deg) !important;
  background: rgba(255, 250, 243, 0.28) !important;
}

.brand-strip-item strong {
  display: block !important;
  color: #4a2f22 !important;
  font-size: 0.94rem !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
}

.brand-strip-item small {
  display: block !important;
  margin-top: 4px !important;
  color: #7a6253 !important;
  font-size: 0.76rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}

/* Remove old span styling from Brand Strip v1 */
.brand-strip-inner > span {
  all: unset !important;
}

/* ---------- Brand Strip responsive ---------- */

@media (max-width: 980px) {
  .brand-strip {
    width: min(100% - 32px, 760px) !important;
    margin: -10px auto 56px !important;
  }

  .brand-strip-inner {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .brand-strip-item {
    padding: 14px 18px !important;
    border-right: 1px solid rgba(198, 146, 62, 0.16) !important;
    border-bottom: 1px solid rgba(198, 146, 62, 0.14) !important;
  }

  .brand-strip-item:nth-child(2),
  .brand-strip-item:nth-child(4) {
    border-right: 0 !important;
  }

  .brand-strip-item:nth-child(3),
  .brand-strip-item:nth-child(4) {
    border-bottom: 0 !important;
  }
}

@media (max-width: 640px) {
  .brand-strip {
    width: min(100% - 24px, 520px) !important;
    margin: 0 auto 46px !important;
  }

  .brand-strip-inner {
    grid-template-columns: 1fr !important;
  }

  .brand-strip-item {
    min-height: 54px !important;
    padding: 12px 8px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(198, 146, 62, 0.14) !important;
  }

  .brand-strip-item:last-child {
    border-bottom: 0 !important;
  }

  .brand-strip-item strong {
    font-size: 0.92rem !important;
  }

  .brand-strip-item small {
    font-size: 0.75rem !important;
  }
}


/* =========================================================
   L'abeille D'or - Brand Strip Hexagon Icon v1
   Replaces rotated rectangle with subtle brand-style hexagon
   ========================================================= */

.strip-icon {
  position: relative !important;
  width: 22px !important;
  height: 12.5px !important;
  flex: 0 0 22px !important;
  display: inline-block !important;
  background: transparent !important;
  border-top: 1.6px solid rgba(198, 146, 62, 0.62) !important;
  border-bottom: 1.6px solid rgba(198, 146, 62, 0.62) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
  box-sizing: border-box !important;
}

.strip-icon::before,
.strip-icon::after {
  content: "" !important;
  position: absolute !important;
  top: -1.6px !important;
  width: 100% !important;
  height: 100% !important;
  left: 0 !important;
  background: transparent !important;
  box-sizing: border-box !important;
  border-top: 1.6px solid rgba(198, 146, 62, 0.62) !important;
  border-bottom: 1.6px solid rgba(198, 146, 62, 0.62) !important;
}

.strip-icon::before {
  transform: rotate(60deg) !important;
}

.strip-icon::after {
  transform: rotate(-60deg) !important;
}

@media (max-width: 640px) {
  .strip-icon {
    width: 20px !important;
    height: 11px !important;
    flex: 0 0 20px !important;
  }
}


/* =========================================================
   L'abeille D'or - Brand Strip Hexagon Icon v2
   Uses clean inline SVG outline to match reference
   ========================================================= */

.strip-icon {
  width: 22px !important;
  height: 20px !important;
  flex: 0 0 22px !important;
  display: inline-block !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 22px 20px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpolygon points='6,1 18,1 23,10 18,19 6,19 1,10' fill='none' stroke='%23c6923e' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  border: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
  position: static !important;
  box-sizing: border-box !important;
}

.strip-icon::before,
.strip-icon::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 640px) {
  .strip-icon {
    width: 20px !important;
    height: 18px !important;
    flex: 0 0 20px !important;
    background-size: 20px 18px !important;
  }
}


/* =========================================================
   L'abeille D'or - Brand Strip Final Tuning v1
   Removes dividers, lifts strip closer to hero, softens hexagons
   ========================================================= */

.brand-strip {
  margin: -38px auto 58px !important;
}

.brand-strip-item {
  border-right: 0 !important;
  border-bottom: 0 !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.brand-strip-inner {
  column-gap: 22px !important;
}

.strip-icon {
  width: 21px !important;
  height: 19px !important;
  flex: 0 0 21px !important;
  background-size: 21px 19px !important;
  opacity: 0.72 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpolygon points='6,1 18,1 23,10 18,19 6,19 1,10' fill='none' stroke='%23c6923e' stroke-width='1.25' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

.brand-strip-item strong {
  font-size: 0.92rem !important;
}

.brand-strip-item small {
  color: #7f6a5b !important;
  font-size: 0.75rem !important;
}

@media (max-width: 980px) {
  .brand-strip {
    margin: -20px auto 52px !important;
  }

  .brand-strip-inner {
    column-gap: 0 !important;
    row-gap: 0 !important;
  }

  .brand-strip-item {
    border-right: 0 !important;
    border-bottom: 0 !important;
  }
}

@media (max-width: 640px) {
  .brand-strip {
    margin: -4px auto 42px !important;
  }

  .brand-strip-inner {
    row-gap: 8px !important;
  }

  .brand-strip-item {
    padding: 8px 4px !important;
  }

  .strip-icon {
    width: 19px !important;
    height: 17px !important;
    flex: 0 0 19px !important;
    background-size: 19px 17px !important;
    opacity: 0.68 !important;
  }
}


/* =========================================================
   L'abeille D'or - Sticky Header Scroll State v1
   Top: blended. Scrolled: frosted warm header.
   ========================================================= */

.site-header {
  z-index: 9999 !important;
  transition:
    background 0.25s ease,
    box-shadow 0.25s ease,
    backdrop-filter 0.25s ease,
    border-color 0.25s ease !important;
}

.site-header.is-scrolled {
  background: rgba(255, 248, 237, 0.94) !important;
  backdrop-filter: blur(18px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.05) !important;
  box-shadow: 0 14px 34px rgba(74, 47, 34, 0.10) !important;
  border-bottom: 1px solid rgba(198, 146, 62, 0.14) !important;
}

.site-header.is-scrolled::after {
  display: none !important;
  content: none !important;
}

/* Prevent visual collision by giving the scrolled header a clean layer */
.site-header.is-scrolled .header-inner {
  position: relative !important;
  z-index: 2 !important;
}

/* Keep the top state blended */
.site-header:not(.is-scrolled) {
  background: transparent !important;
  box-shadow: none !important;
  border-bottom: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* =========================================================
   L'abeille D'or - Interactive Selection Tabs v1
   Category tabs with feature image and supporting images
   ========================================================= */

.selection-tabs-section {
  width: min(100% - 48px, 1180px) !important;
  margin: 0 auto 92px !important;
  padding: 0 !important;
}

.selection-heading {
  max-width: 820px !important;
  margin-bottom: 28px !important;
}

.selection-heading h2 {
  margin: 0 !important;
  color: #2f2118 !important;
  font-size: clamp(2.25rem, 4vw, 4rem) !important;
  line-height: 1.03 !important;
  letter-spacing: -0.05em !important;
}

.selection-heading p:not(.eyebrow) {
  margin-top: 16px !important;
  color: #725c4e !important;
  max-width: 740px !important;
  font-size: 1.06rem !important;
  line-height: 1.7 !important;
}

.selection-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-bottom: 26px !important;
}

.selection-tab {
  min-height: 42px !important;
  padding: 10px 16px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(198, 146, 62, 0.24) !important;
  background: rgba(255, 250, 243, 0.52) !important;
  color: #4a2f22 !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}

.selection-tab:hover {
  transform: translateY(-1px) !important;
  background: rgba(255, 250, 243, 0.86) !important;
}

.selection-tab.is-active {
  color: #fff8ed !important;
  background: #4a2f22 !important;
  border-color: #4a2f22 !important;
  box-shadow: 0 12px 26px rgba(74, 47, 34, 0.16) !important;
}

.selection-gallery {
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr) !important;
  gap: 24px !important;
  align-items: stretch !important;
}

.selection-feature {
  min-height: 520px !important;
  overflow: hidden !important;
  border-radius: 42px !important;
  background:
    radial-gradient(circle at center, rgba(232, 195, 122, 0.22), transparent 46%),
    rgba(255, 250, 243, 0.70) !important;
  box-shadow: 0 24px 60px rgba(74, 47, 34, 0.12) !important;
}

.selection-feature img {
  width: 100% !important;
  height: 100% !important;
  min-height: 520px !important;
  object-fit: cover !important;
  object-position: center !important;
}

.selection-side {
  display: grid !important;
  grid-template-rows: auto 1fr !important;
  gap: 18px !important;
}

.selection-copy {
  padding: 30px !important;
  border-radius: 32px !important;
  background: rgba(255, 250, 243, 0.76) !important;
  border: 1px solid rgba(198, 146, 62, 0.16) !important;
  box-shadow: 0 16px 38px rgba(74, 47, 34, 0.08) !important;
}

.selection-copy span {
  display: block !important;
  margin-bottom: 10px !important;
  color: #b98634 !important;
  font-size: 0.76rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}

.selection-copy h3 {
  margin: 0 !important;
  color: #2f2118 !important;
  font-size: clamp(1.55rem, 2vw, 2.15rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.035em !important;
}

.selection-copy p {
  margin-top: 14px !important;
  color: #725c4e !important;
  line-height: 1.7 !important;
}

.selection-thumbs {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.selection-thumb {
  min-height: 165px !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 26px !important;
  background: rgba(255, 250, 243, 0.72) !important;
  box-shadow: 0 14px 34px rgba(74, 47, 34, 0.09) !important;
  cursor: pointer !important;
}

.selection-thumb img {
  width: 100% !important;
  height: 100% !important;
  min-height: 165px !important;
  object-fit: cover !important;
  object-position: center !important;
  transition: transform 0.25s ease !important;
}

.selection-thumb:hover img {
  transform: scale(1.04) !important;
}

/* When a category has fewer supporting images, keep layout clean */
.selection-thumbs:empty {
  display: none !important;
}


/* ---------- Selection responsive ---------- */

@media (max-width: 980px) {
  .selection-tabs-section {
    width: min(100% - 32px, 760px) !important;
    margin-bottom: 72px !important;
  }

  .selection-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding-bottom: 8px !important;
  }

  .selection-tab {
    flex: 0 0 auto !important;
  }

  .selection-gallery {
    grid-template-columns: 1fr !important;
  }

  .selection-feature,
  .selection-feature img {
    min-height: 420px !important;
  }

  .selection-thumbs {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .selection-tabs-section {
    width: min(100% - 24px, 520px) !important;
    margin-bottom: 58px !important;
  }

  .selection-heading h2 {
    font-size: clamp(2rem, 10vw, 3rem) !important;
  }

  .selection-feature,
  .selection-feature img {
    min-height: 320px !important;
    border-radius: 30px !important;
  }

  .selection-copy {
    padding: 24px !important;
    border-radius: 26px !important;
  }

  .selection-thumbs {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  .selection-thumb,
  .selection-thumb img {
    min-height: 135px !important;
    border-radius: 20px !important;
  }
}


/* =========================================================
   L'abeille D'or - Selection Banner Tabs v2
   Turns category tabs into visual dark product tiles
   ========================================================= */

.selection-tabs {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 18px !important;
  margin: 30px 0 32px !important;
  overflow: visible !important;
}

.selection-tab {
  position: relative !important;
  min-height: 138px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  border: 1px solid rgba(198, 146, 62, 0.18) !important;
  background: #201711 !important;
  color: #fff8ed !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(1rem, 1.18vw, 1.35rem) !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em !important;
  line-height: 1.15 !important;
  text-align: center !important;
  cursor: pointer !important;
  box-shadow: 0 12px 28px rgba(74, 47, 34, 0.12) !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important;
}

.selection-tab::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 45% 0 !important;
  background-size: cover !important;
  background-position: center !important;
  opacity: 0.48 !important;
  filter: saturate(0.92) contrast(1.05) !important;
  transition: opacity 0.22s ease, transform 0.22s ease !important;
}

.selection-tab::after {
  content: "" !important;
  position: absolute !important;
  inset: 45% 0 0 0 !important;
  background:
    linear-gradient(180deg, rgba(32, 23, 17, 0.82), rgba(32, 23, 17, 0.98)) !important;
  z-index: 1 !important;
}

.selection-tab {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
}

.selection-tab {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}

.selection-tab span {
  position: relative !important;
  z-index: 2 !important;
}

.selection-tab:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 18px 38px rgba(74, 47, 34, 0.18) !important;
}

.selection-tab:hover::before {
  opacity: 0.62 !important;
  transform: scale(1.04) !important;
}

.selection-tab.is-active {
  border-color: rgba(198, 146, 62, 0.75) !important;
  box-shadow:
    0 18px 38px rgba(74, 47, 34, 0.18),
    0 0 0 2px rgba(198, 146, 62, 0.20) !important;
}

/* Background images per selection tile */
.selection-tab:nth-child(1)::before {
  background-image: url("/assets/products/knefe/knefe-kaake-01.png") !important;
}

.selection-tab:nth-child(2)::before {
  background-image: url("/assets/products/categories/category-lebanese-sweets-01.png") !important;
}

.selection-tab:nth-child(3)::before {
  background-image: url("/assets/products/categories/category-cakes-desserts-01.jpeg") !important;
}

.selection-tab:nth-child(4)::before {
  background-image: url("/assets/products/categories/category-icecream-01.png") !important;
}

.selection-tab:nth-child(5)::before {
  background-image: url("/assets/products/categories/category-chocolate-gifting-01.png") !important;
}

.selection-tab:nth-child(6)::before {
  background-image: url("/assets/barista/barista-cold-drink-01.png") !important;
}

/* Put button text over the dark lower area */
.selection-tab {
  padding-bottom: 24px !important;
}

/* Improve long names */
.selection-tab:nth-child(3),
.selection-tab:nth-child(5),
.selection-tab:nth-child(6) {
  font-size: clamp(0.92rem, 1.04vw, 1.18rem) !important;
}

/* ---------- Responsive selection banner tabs ---------- */

@media (max-width: 1180px) {
  .selection-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .selection-tabs {
    display: flex !important;
    overflow-x: auto !important;
    gap: 14px !important;
    padding-bottom: 12px !important;
    scroll-snap-type: x mandatory !important;
  }

  .selection-tab {
    flex: 0 0 220px !important;
    min-height: 128px !important;
    scroll-snap-align: start !important;
  }
}

@media (max-width: 480px) {
  .selection-tab {
    flex-basis: 190px !important;
    min-height: 118px !important;
  }
}


/* =========================================================
   L'abeille D'or - Brand Reel Section v1
   Hidden until /assets/videos/brand-reel-01.mp4 exists
   ========================================================= */

.brand-reel-section {
  width: min(100% - 48px, 1180px) !important;
  margin: 0 auto 92px !important;
  display: grid !important;
  grid-template-columns: 0.82fr 1.18fr !important;
  gap: 42px !important;
  align-items: center !important;
  padding: 34px !important;
  border-radius: 46px !important;
  background:
    linear-gradient(135deg, rgba(255, 250, 243, 0.78), rgba(244, 231, 215, 0.76)),
    rgba(255, 250, 243, 0.62) !important;
  border: 1px solid rgba(198, 146, 62, 0.16) !important;
  box-shadow: 0 24px 60px rgba(74, 47, 34, 0.10) !important;
}

.brand-reel-section.is-hidden {
  display: none !important;
}

.brand-reel-content {
  max-width: 440px !important;
}

.brand-reel-content h2 {
  margin: 0 !important;
  color: #2f2118 !important;
  font-size: clamp(2rem, 3.2vw, 3.4rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.045em !important;
}

.brand-reel-content p:not(.eyebrow) {
  margin-top: 16px !important;
  color: #725c4e !important;
  font-size: 1.04rem !important;
  line-height: 1.72 !important;
}

.brand-reel-frame {
  overflow: hidden !important;
  border-radius: 34px !important;
  background:
    radial-gradient(circle at 70% 20%, rgba(232, 195, 122, 0.20), transparent 36%),
    #2f2118 !important;
  box-shadow: 0 22px 52px rgba(74, 47, 34, 0.16) !important;
}

.brand-reel-frame video {
  width: 100% !important;
  height: 100% !important;
  min-height: 430px !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
}

@media (max-width: 980px) {
  .brand-reel-section {
    width: min(100% - 32px, 760px) !important;
    grid-template-columns: 1fr !important;
    margin-bottom: 72px !important;
    padding: 30px !important;
    gap: 30px !important;
  }

  .brand-reel-content {
    max-width: 720px !important;
  }

  .brand-reel-frame video {
    min-height: 360px !important;
  }
}

@media (max-width: 640px) {
  .brand-reel-section {
    width: min(100% - 24px, 520px) !important;
    padding: 22px !important;
    border-radius: 32px !important;
    margin-bottom: 58px !important;
  }

  .brand-reel-frame {
    border-radius: 26px !important;
  }

  .brand-reel-frame video {
    min-height: 280px !important;
  }
}


/* =========================================================
   L'abeille D'or - Brand Reel Compact Layout v1
   Makes reel section shorter and aligns text to the top
   ========================================================= */

.brand-reel-section {
  align-items: start !important;
  grid-template-columns: 0.78fr 1.22fr !important;
  gap: 34px !important;
  padding: 28px !important;
  margin: 0 auto 76px !important;
}

.brand-reel-content {
  align-self: start !important;
  padding-top: 12px !important;
  max-width: 430px !important;
}

.brand-reel-content h2 {
  font-size: clamp(1.85rem, 2.75vw, 3rem) !important;
  line-height: 1.05 !important;
}

.brand-reel-content p:not(.eyebrow) {
  font-size: 1rem !important;
  line-height: 1.65 !important;
}

.brand-reel-frame {
  align-self: start !important;
  max-height: 360px !important;
}

.brand-reel-frame video {
  min-height: 0 !important;
  height: 360px !important;
  max-height: 360px !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Keep the video cinematic, but not oversized */
@media (min-width: 1180px) {
  .brand-reel-frame video {
    height: 340px !important;
    max-height: 340px !important;
  }
}

@media (max-width: 980px) {
  .brand-reel-section {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 26px !important;
    margin-bottom: 66px !important;
  }

  .brand-reel-content {
    padding-top: 0 !important;
    max-width: 720px !important;
  }

  .brand-reel-frame video {
    height: 330px !important;
    max-height: 330px !important;
  }
}

@media (max-width: 640px) {
  .brand-reel-section {
    padding: 20px !important;
    margin-bottom: 52px !important;
  }

  .brand-reel-frame video {
    height: 260px !important;
    max-height: 260px !important;
  }
}


/* =========================================================
   L'abeille D'or - Brand Reel Fit + Background Blend v2
   Reduces crop and blends reel section into page background
   ========================================================= */

.brand-reel-section {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 auto 84px !important;
  align-items: start !important;
  grid-template-columns: 0.72fr 1.28fr !important;
  gap: 42px !important;
}

.brand-reel-content {
  padding-top: 18px !important;
  max-width: 430px !important;
}

.brand-reel-content h2 {
  font-size: clamp(1.85rem, 2.7vw, 3rem) !important;
}

.brand-reel-frame {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 38px !important;
  background:
    radial-gradient(circle at 72% 22%, rgba(232, 195, 122, 0.14), transparent 38%),
    rgba(255, 250, 243, 0.32) !important;
  border: 1px solid rgba(198, 146, 62, 0.12) !important;
  box-shadow: 0 24px 56px rgba(74, 47, 34, 0.12) !important;
}

.brand-reel-frame video {
  width: 100% !important;
  height: auto !important;
  max-height: 520px !important;
  min-height: 0 !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
}

/* If the uploaded reel is vertical, keep it elegant instead of cropping it badly */
.brand-reel-frame {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Tablet */
@media (max-width: 980px) {
  .brand-reel-section {
    grid-template-columns: 1fr !important;
    gap: 26px !important;
    margin-bottom: 70px !important;
  }

  .brand-reel-content {
    padding-top: 0 !important;
    max-width: 720px !important;
  }

  .brand-reel-frame {
    border-radius: 32px !important;
  }

  .brand-reel-frame video {
    max-height: 460px !important;
  }
}

/* Phone */
@media (max-width: 640px) {
  .brand-reel-section {
    margin-bottom: 56px !important;
  }

  .brand-reel-frame {
    border-radius: 26px !important;
  }

  .brand-reel-frame video {
    max-height: 390px !important;
  }
}


/* =========================================================
   L'abeille D'or - Portrait Reel Layout v1
   Makes reel section match vertical video format and blend with page
   ========================================================= */

.brand-reel-section {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 auto 86px !important;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px) !important;
  gap: 58px !important;
  align-items: center !important;
}

.brand-reel-content {
  max-width: 560px !important;
  padding-top: 0 !important;
}

.brand-reel-content h2 {
  font-size: clamp(2rem, 3.2vw, 3.65rem) !important;
  line-height: 1.03 !important;
}

.brand-reel-content p:not(.eyebrow) {
  max-width: 520px !important;
  font-size: 1.05rem !important;
  line-height: 1.72 !important;
}

.brand-reel-frame {
  width: min(100%, 340px) !important;
  aspect-ratio: 9 / 16 !important;
  justify-self: end !important;
  align-self: center !important;
  border-radius: 34px !important;
  overflow: hidden !important;
  background: transparent !important;
  border: 1px solid rgba(198, 146, 62, 0.16) !important;
  box-shadow: 0 24px 58px rgba(74, 47, 34, 0.16) !important;
}

.brand-reel-frame video {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
  background: transparent !important;
}

/* Add a very subtle glow behind the reel instead of a mismatched section background */
.brand-reel-frame::before {
  content: "" !important;
  position: absolute !important;
  inset: -20px !important;
  background: radial-gradient(circle at center, rgba(232, 195, 122, 0.18), transparent 62%) !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

.brand-reel-frame {
  position: relative !important;
}

/* Tablet */
@media (max-width: 980px) {
  .brand-reel-section {
    width: min(100% - 32px, 760px) !important;
    grid-template-columns: 1fr !important;
    gap: 30px !important;
    margin-bottom: 70px !important;
  }

  .brand-reel-frame {
    justify-self: center !important;
    width: min(100%, 360px) !important;
  }

  .brand-reel-content {
    max-width: 720px !important;
  }
}

/* Phone */
@media (max-width: 640px) {
  .brand-reel-section {
    width: min(100% - 24px, 520px) !important;
    margin-bottom: 56px !important;
    gap: 24px !important;
  }

  .brand-reel-frame {
    width: min(100%, 320px) !important;
    border-radius: 28px !important;
  }

  .brand-reel-content h2 {
    font-size: clamp(2rem, 9vw, 3rem) !important;
  }
}


/* =========================================================
   L'abeille D'or - Mobile Selection Grid v1
   Replaces horizontal scrolling tabs with visible 2-column grid
   ========================================================= */

@media (max-width: 760px) {
  .selection-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    overflow: visible !important;
    gap: 12px !important;
    padding-bottom: 0 !important;
    scroll-snap-type: none !important;
  }

  .selection-tab {
    flex: initial !important;
    min-width: 0 !important;
    width: 100% !important;
    min-height: 108px !important;
    scroll-snap-align: none !important;
    border-radius: 14px !important;
    font-size: 0.92rem !important;
    padding-bottom: 18px !important;
  }

  .selection-tab::before {
    inset: 0 0 48% 0 !important;
  }

  .selection-tab::after {
    inset: 48% 0 0 0 !important;
  }
}

@media (max-width: 420px) {
  .selection-tabs {
    gap: 10px !important;
  }

  .selection-tab {
    min-height: 98px !important;
    font-size: 0.84rem !important;
    padding-bottom: 15px !important;
  }
}


/* =========================================================
   L'abeille D'or - Mobile Selection Layout Reorder v1
   Mobile order: headline/text, main image, thumbnails
   ========================================================= */

@media (max-width: 760px) {
  .selection-gallery {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
  }

  .selection-side {
    display: contents !important;
  }

  .selection-copy {
    order: 1 !important;
  }

  .selection-feature {
    order: 2 !important;
  }

  .selection-thumbs {
    order: 3 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-top: 0 !important;
  }

  .selection-feature img {
    width: 100% !important;
    max-height: 360px !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 24px !important;
  }

  .selection-thumb {
    width: 100% !important;
    height: 96px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  .selection-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}

@media (max-width: 420px) {
  .selection-feature img {
    max-height: 320px !important;
    border-radius: 20px !important;
  }

  .selection-thumbs {
    gap: 8px !important;
  }

  .selection-thumb {
    height: 82px !important;
    border-radius: 14px !important;
  }
}


/* =========================================================
   L'abeille D'or - Selection Thumbnail Behavior Cleanup v1
   Main image is display-only; thumbnails replace the main image
   ========================================================= */

#selection-feature-img {
  cursor: default !important;
}

.selection-thumb img,
.selection-thumb {
  cursor: pointer !important;
}


/* =========================================================
   L'abeille D'or - Header, Hero, Nav and Mobile Strip Fix v1
   Fixes logo scale, hero dominance, missing nav, and mobile value strip layout
   ========================================================= */

/* ---------- Desktop header balance ---------- */

.site-header {
  z-index: 1000 !important;
}

.header-inner {
  grid-template-columns: 470px 1fr auto !important;
  min-height: 162px !important;
}

.site-logo {
  height: 142px !important;
  display: flex !important;
  align-items: center !important;
}

.site-logo img {
  height: 136px !important;
  max-width: 460px !important;
  width: auto !important;
  display: block !important;
}

/* Make sure the main navigation/banner is visible on desktop */
.site-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 24px !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.site-nav a {
  display: inline-flex !important;
  color: #3f2a1c !important;
  font-size: 0.94rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.site-nav a:hover {
  color: #a87524 !important;
}

/* Keep contact button visible */
.header-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

/* ---------- Hero text balance ---------- */

.hero h1 {
  font-size: clamp(3.15rem, 6.2vw, 6.6rem) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.065em !important;
}

.hero p {
  font-size: clamp(1.02rem, 1.35vw, 1.22rem) !important;
  line-height: 1.72 !important;
  max-width: 610px !important;
}

/* ---------- Mobile/tablet header ---------- */

@media (max-width: 980px) {
  .header-inner {
    grid-template-columns: 1fr auto !important;
    min-height: 104px !important;
    gap: 16px !important;
  }

  .site-logo {
    height: 94px !important;
  }

  .site-logo img {
    height: 88px !important;
    max-width: 280px !important;
  }

  /*
    On tablet/mobile, show nav as a second row instead of hiding it.
    This avoids losing Our Knefe / Selection / Occasions / Barista / Branches.
  */
  .site-nav {
    grid-column: 1 / -1 !important;
    order: 3 !important;
    display: flex !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    overflow-x: auto !important;
    padding: 0 0 10px !important;
    scrollbar-width: none !important;
  }

  .site-nav::-webkit-scrollbar {
    display: none !important;
  }

  .site-nav a {
    flex: 0 0 auto !important;
    font-size: 0.82rem !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    background: rgba(255, 250, 243, 0.56) !important;
    border: 1px solid rgba(198, 146, 62, 0.14) !important;
  }

  .header-cta {
    font-size: 0.82rem !important;
    padding: 10px 14px !important;
  }

  .hero h1 {
    font-size: clamp(2.8rem, 10vw, 4.9rem) !important;
  }
}

/* ---------- Phone header ---------- */

@media (max-width: 640px) {
  .header-inner {
    min-height: 96px !important;
    gap: 12px !important;
  }

  .site-logo {
    height: 82px !important;
  }

  .site-logo img {
    height: 76px !important;
    max-width: 230px !important;
  }

  .header-cta {
    font-size: 0.78rem !important;
    padding: 9px 12px !important;
  }

  .site-nav {
    gap: 8px !important;
    padding-bottom: 8px !important;
  }

  .site-nav a {
    font-size: 0.78rem !important;
    padding: 7px 10px !important;
  }

  .hero h1 {
    font-size: clamp(2.45rem, 12vw, 4rem) !important;
    line-height: 1 !important;
  }

  .hero p {
    font-size: 0.98rem !important;
  }
}

/* ---------- Brand strip under hero: mobile 2x2 instead of vertical ---------- */

@media (max-width: 760px) {
  .brand-strip-inner {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    align-items: stretch !important;
  }

  .brand-strip-item {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    padding: 14px 12px !important;
    border-radius: 18px !important;
    background: rgba(255, 250, 243, 0.46) !important;
    border: 1px solid rgba(198, 146, 62, 0.10) !important;
  }

  .brand-strip-item strong {
    font-size: 0.82rem !important;
    line-height: 1.25 !important;
  }

  .brand-strip-item small {
    font-size: 0.72rem !important;
    line-height: 1.25 !important;
  }

  .strip-icon {
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;
  }
}

@media (max-width: 390px) {
  .brand-strip-inner {
    gap: 10px !important;
  }

  .brand-strip-item {
    padding: 12px 10px !important;
  }

  .brand-strip-item strong {
    font-size: 0.76rem !important;
  }

  .brand-strip-item small {
    font-size: 0.68rem !important;
  }

  .strip-icon {
    width: 24px !important;
    height: 24px !important;
    flex-basis: 24px !important;
  }
}


/* =========================================================
   L'abeille D'or - Mobile Header, Hero and Reel Tuning v1
   Mobile nav fit, bigger mobile logo, smaller hero headline, tighter reel desktop layout
   ========================================================= */

/* ---------- Hero headline: reduce on PC and mobile ---------- */

.hero h1 {
  font-size: clamp(2.8rem, 5.35vw, 5.7rem) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.055em !important;
}

.hero p {
  font-size: clamp(0.98rem, 1.2vw, 1.12rem) !important;
  max-width: 570px !important;
}

/* ---------- Desktop reel: bring reel closer to text ---------- */

@media (min-width: 981px) {
  .brand-reel-section {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px) !important;
    gap: 34px !important;
  }

  .brand-reel-frame {
    justify-self: start !important;
  }
}

/* ---------- Mobile header only: remove Contact Us and enlarge logo ---------- */

@media (max-width: 640px) {
  .header-inner {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    min-height: auto !important;
    gap: 8px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .header-cta {
    display: none !important;
  }

  .site-logo {
    width: 100% !important;
    height: auto !important;
    justify-content: center !important;
  }

  .site-logo img {
    width: min(100%, 345px) !important;
    max-width: calc(100vw - 28px) !important;
    height: auto !important;
  }

  .site-nav {
    width: 100% !important;
    grid-column: 1 / -1 !important;
    justify-content: center !important;
    overflow: visible !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    padding: 0 !important;
  }

  .site-nav a {
    font-size: clamp(0.62rem, 2.55vw, 0.74rem) !important;
    padding: 6px 5px !important;
    letter-spacing: -0.015em !important;
    white-space: nowrap !important;
    border-radius: 999px !important;
  }

  .hero h1 {
    font-size: clamp(2.05rem, 9.4vw, 3.25rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.045em !important;
  }

  .hero p {
    font-size: 0.94rem !important;
    line-height: 1.62 !important;
  }
}

/* Very narrow phones */
@media (max-width: 390px) {
  .site-logo img {
    width: min(100%, 322px) !important;
    max-width: calc(100vw - 22px) !important;
  }

  .site-nav {
    gap: 3px !important;
  }

  .site-nav a {
    font-size: clamp(0.58rem, 2.45vw, 0.68rem) !important;
    padding: 5px 4px !important;
  }

  .hero h1 {
    font-size: clamp(1.9rem, 9vw, 3rem) !important;
  }
}


/* =========================================================
   L'abeille D'or - Header, Hero and Reel Correction v2
   Mobile-only logo/nav correction, smaller desktop hero,
   larger mobile hero, tighter desktop reel spacing
   ========================================================= */

/* ---------- PC + general hero correction ---------- */

.hero h1 {
  font-size: clamp(2.65rem, 4.65vw, 5.05rem) !important;
  line-height: 1.01 !important;
  letter-spacing: -0.045em !important;
  font-weight: 650 !important;
}

.hero p {
  font-size: clamp(0.98rem, 1.12vw, 1.08rem) !important;
  line-height: 1.68 !important;
  max-width: 560px !important;
}

/* ---------- PC only: bring reel closer to its text ---------- */

@media (min-width: 981px) {
  .brand-reel-section {
    grid-template-columns: minmax(0, 0.95fr) minmax(250px, 330px) !important;
    gap: 22px !important;
  }

  .brand-reel-content {
    max-width: 520px !important;
  }

  .brand-reel-frame {
    justify-self: start !important;
  }
}

/* ---------- Mobile header correction only ---------- */

@media (max-width: 640px) {
  .site-header .container.header-inner,
  .header-inner {
    width: 100% !important;
    max-width: none !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    align-items: center !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    gap: 8px !important;
  }

  .header-cta {
    display: none !important;
  }

  .site-logo {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .site-logo img {
    width: calc(100vw - 14px) !important;
    max-width: 430px !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
  }

  /*
    Mobile nav: readable first.
    If all items cannot fit on one line, it wraps neatly to a second centered line.
  */
  .site-nav {
    width: 100% !important;
    max-width: calc(100vw - 12px) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    overflow: visible !important;
    padding: 2px 0 4px !important;
  }

  .site-nav a {
    font-size: 0.76rem !important;
    line-height: 1 !important;
    padding: 7px 9px !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap !important;
    border-radius: 999px !important;
  }

  /*
    Mobile hero: make it larger than previous mobile version,
    but not as huge as desktop.
  */
  .hero h1 {
    font-size: clamp(2.55rem, 11.2vw, 4.15rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.04em !important;
    font-weight: 650 !important;
  }

  .hero p {
    font-size: 0.98rem !important;
    line-height: 1.65 !important;
    max-width: 100% !important;
  }
}

/* ---------- Very narrow phones ---------- */

@media (max-width: 390px) {
  .site-logo img {
    width: calc(100vw - 10px) !important;
    max-width: 390px !important;
  }

  .site-nav {
    gap: 5px !important;
  }

  .site-nav a {
    font-size: 0.72rem !important;
    padding: 7px 8px !important;
  }

  .hero h1 {
    font-size: clamp(2.35rem, 10.8vw, 3.7rem) !important;
  }
}


/* =========================================================
   L'abeille D'or - Hero Headline Size Correction v1
   Reduces hero headline size and visual weight on PC and mobile
   ========================================================= */

.hero h1 {
  font-size: clamp(2.35rem, 4.15vw, 4.35rem) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.035em !important;
  font-weight: 560 !important;
}

.hero p {
  font-size: clamp(0.96rem, 1.05vw, 1.04rem) !important;
  line-height: 1.66 !important;
  max-width: 540px !important;
}

@media (max-width: 640px) {
  .hero h1 {
    font-size: clamp(2.05rem, 8.6vw, 3.25rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.03em !important;
    font-weight: 560 !important;
  }

  .hero p {
    font-size: 0.95rem !important;
    line-height: 1.62 !important;
  }
}

@media (max-width: 390px) {
  .hero h1 {
    font-size: clamp(1.95rem, 8.2vw, 2.95rem) !important;
  }
}


/* =========================================================
   L'abeille D'or - Section Headline Harmony v1
   Aligns section headings visually with the calmer hero headline
   ========================================================= */

.selection-heading h2,
.brand-reel-content h2,
.knefe-story-copy h2,
.occasions-copy h2,
.branches-copy h2,
.barista-copy h2,
.contact-copy h2 {
  font-size: clamp(2rem, 3.15vw, 3.35rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.035em !important;
  font-weight: 560 !important;
  color: #2f2118 !important;
}

.selection-heading p,
.knefe-story-copy p,
.occasions-copy p,
.branches-copy p,
.barista-copy p,
.contact-copy p,
.brand-reel-content p:not(.eyebrow) {
  font-size: clamp(0.96rem, 1.05vw, 1.05rem) !important;
  line-height: 1.68 !important;
  color: #725c4e !important;
}

.eyebrow {
  font-size: 0.76rem !important;
  letter-spacing: 0.16em !important;
  font-weight: 700 !important;
  color: #a87524 !important;
  text-transform: uppercase !important;
}

/* Category/gallery titles should be strong, but not oversized */
.selection-copy h3,
.occasion-card h3,
.branch-card h3,
.contact-card h3 {
  font-size: clamp(1.35rem, 2vw, 2rem) !important;
  line-height: 1.14 !important;
  letter-spacing: -0.025em !important;
  font-weight: 600 !important;
  color: #2f2118 !important;
}

/* Mobile headline balance */
@media (max-width: 640px) {
  .selection-heading h2,
  .brand-reel-content h2,
  .knefe-story-copy h2,
  .occasions-copy h2,
  .branches-copy h2,
  .barista-copy h2,
  .contact-copy h2 {
    font-size: clamp(1.75rem, 7.4vw, 2.65rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.028em !important;
    font-weight: 560 !important;
  }

  .selection-heading p,
  .knefe-story-copy p,
  .occasions-copy p,
  .branches-copy p,
  .barista-copy p,
  .contact-copy p,
  .brand-reel-content p:not(.eyebrow) {
    font-size: 0.95rem !important;
    line-height: 1.62 !important;
  }

  .selection-copy h3,
  .occasion-card h3,
  .branch-card h3,
  .contact-card h3 {
    font-size: clamp(1.25rem, 5.2vw, 1.65rem) !important;
  }
}


/* =========================================================
   L'abeille D'or - Desktop Reel Tight Layout v1
   Brings the portrait reel closer to its text on PC only
   ========================================================= */

@media (min-width: 981px) {
  .brand-reel-section {
    grid-template-columns: minmax(420px, 520px) minmax(260px, 330px) !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 26px !important;
  }

  .brand-reel-content {
    max-width: 520px !important;
    justify-self: end !important;
  }

  .brand-reel-frame {
    justify-self: start !important;
  }
}


/* =========================================================
   L'abeille D'or - Desktop Reel Left Alignment Fix v1
   Keeps reel close to text, but aligns text with other section headings
   ========================================================= */

@media (min-width: 981px) {
  .brand-reel-section {
    grid-template-columns: minmax(420px, 520px) minmax(260px, 330px) !important;
    justify-content: start !important;
    align-items: center !important;
    gap: 28px !important;
  }

  .brand-reel-content {
    max-width: 520px !important;
    justify-self: start !important;
    text-align: left !important;
  }

  .brand-reel-frame {
    justify-self: start !important;
  }
}


/* =========================================================
   L'abeille D'or - Two Brand Reels Layout v1
   PC: text + two portrait reels
   Mobile: text, reel 1, reel 2
   ========================================================= */

.brand-reel-videos {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(220px, 300px)) !important;
  gap: 18px !important;
  align-items: center !important;
  justify-content: start !important;
}

.brand-reel-frame.is-hidden {
  display: none !important;
}

@media (min-width: 981px) {
  .brand-reel-section {
    grid-template-columns: minmax(390px, 500px) auto !important;
    justify-content: start !important;
    align-items: center !important;
    gap: 30px !important;
  }

  .brand-reel-content {
    max-width: 500px !important;
    justify-self: start !important;
  }

  .brand-reel-frame {
    width: min(100%, 285px) !important;
  }
}

@media (max-width: 980px) {
  .brand-reel-videos {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 22px !important;
  }

  .brand-reel-frame {
    width: min(100%, 360px) !important;
  }
}


/* =========================================================
   L'abeille D'or - Brand Reel Sound Button v1
   Reels autoplay muted; visitor can enable audio manually
   ========================================================= */

.brand-reel-frame {
  position: relative !important;
}

.brand-reel-sound-toggle {
  position: absolute !important;
  right: 12px !important;
  bottom: 12px !important;
  z-index: 5 !important;
  border: 1px solid rgba(255, 255, 255, 0.34) !important;
  border-radius: 999px !important;
  background: rgba(34, 23, 17, 0.58) !important;
  color: #fffaf3 !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  padding: 8px 12px !important;
  cursor: pointer !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.brand-reel-sound-toggle:hover {
  background: rgba(34, 23, 17, 0.74) !important;
}

@media (max-width: 640px) {
  .brand-reel-sound-toggle {
    right: 10px !important;
    bottom: 10px !important;
    font-size: 0.72rem !important;
    padding: 7px 10px !important;
  }
}


/* =========================================================
   L'abeille D'or - Selection PC Compact Gallery v1
   Keeps heading, narrative, main image and thumbnails visible with less scrolling
   ========================================================= */

@media (min-width: 981px) {
  .selection-tabs-section {
    padding-top: 74px !important;
    padding-bottom: 82px !important;
  }

  .selection-heading {
    margin-bottom: 30px !important;
  }

  .selection-heading h2 {
    font-size: clamp(2rem, 2.75vw, 3rem) !important;
  }

  .selection-heading p {
    max-width: 760px !important;
    font-size: 1rem !important;
    line-height: 1.58 !important;
  }

  .selection-tabs {
    margin-bottom: 28px !important;
  }

  .selection-tab {
    min-height: 118px !important;
  }

  .selection-gallery {
    display: grid !important;
    grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.65fr) !important;
    gap: 28px !important;
    align-items: start !important;
  }

  .selection-feature {
    max-height: 430px !important;
    overflow: hidden !important;
    border-radius: 28px !important;
  }

  .selection-feature img {
    width: 100% !important;
    height: 430px !important;
    max-height: 430px !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 28px !important;
  }

  .selection-side {
    gap: 18px !important;
  }

  .selection-copy {
    padding: 22px 22px 20px !important;
    border-radius: 24px !important;
  }

  .selection-copy h3 {
    font-size: clamp(1.35rem, 1.75vw, 1.85rem) !important;
    line-height: 1.12 !important;
    margin-bottom: 10px !important;
  }

  .selection-copy p {
    font-size: 0.96rem !important;
    line-height: 1.55 !important;
  }

  .selection-thumbs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .selection-thumb {
    height: 112px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  .selection-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}

/* Slightly smaller laptops */
@media (min-width: 981px) and (max-height: 780px) {
  .selection-tabs-section {
    padding-top: 60px !important;
    padding-bottom: 70px !important;
  }

  .selection-feature,
  .selection-feature img {
    height: 380px !important;
    max-height: 380px !important;
  }

  .selection-tab {
    min-height: 104px !important;
  }

  .selection-thumb {
    height: 96px !important;
  }
}


/* =========================================================
   L'abeille D'or - Selection Main Image Smaller + Reel Gap v1
   PC only: reduce main Selection image height and move brand reel upward
   ========================================================= */

@media (min-width: 981px) {
  .selection-feature {
    max-height: 340px !important;
  }

  .selection-feature img {
    height: 340px !important;
    max-height: 340px !important;
  }

  .selection-tabs-section {
    padding-bottom: 42px !important;
  }

  .brand-reel-section {
    margin-top: -8px !important;
  }
}

/* Smaller laptop screens */
@media (min-width: 981px) and (max-height: 780px) {
  .selection-feature,
  .selection-feature img {
    height: 310px !important;
    max-height: 310px !important;
  }

  .selection-tabs-section {
    padding-bottom: 34px !important;
  }
}


/* =========================================================
   L'abeille D'or - Selection Section Push Up v1
   Reduces empty space above and inside Selection section on PC
   ========================================================= */

@media (min-width: 981px) {
  .selection-tabs-section {
    margin-top: -28px !important;
    padding-top: 46px !important;
    padding-bottom: 36px !important;
  }

  .selection-heading {
    margin-bottom: 22px !important;
  }

  .selection-tabs {
    margin-bottom: 22px !important;
  }
}

/* Smaller laptop screens */
@media (min-width: 981px) and (max-height: 780px) {
  .selection-tabs-section {
    margin-top: -36px !important;
    padding-top: 38px !important;
    padding-bottom: 30px !important;
  }

  .selection-heading {
    margin-bottom: 18px !important;
  }

  .selection-tabs {
    margin-bottom: 18px !important;
  }
}


/* =========================================================
   L'abeille D'or - Logo-Inspired Font Test v1
   Serif headings inspired by the logo.
   Clean sans-serif text inspired by "SWEETS & DESSERTS".
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;560;600;700&family=Montserrat:wght@400;500;600;700&display=swap');

body {
  font-family: "Montserrat", Arial, sans-serif !important;
}

/* Logo-inspired serif for emotional / premium headings */
.hero h1,
.selection-heading h2,
.brand-reel-content h2,
.knefe-story-copy h2,
.occasions-copy h2,
.branches-copy h2,
.barista-copy h2,
.contact-copy h2,
.selection-copy h3,
.occasion-card h3,
.branch-card h3,
.contact-card h3 {
  font-family: "Cormorant Garamond", Georgia, serif !important;
}

/* Keep body text clean and readable */
p,
li,
a,
button,
small,
.hero p,
.selection-heading p,
.selection-copy p,
.brand-reel-content p,
.knefe-story-copy p,
.occasions-copy p,
.branches-copy p,
.barista-copy p,
.contact-copy p,
.contact-card p {
  font-family: "Montserrat", Arial, sans-serif !important;
}

/* Keep the small uppercase labels close to the logo subtitle style */
.eyebrow,
.site-nav a,
.header-cta,
.selection-label,
#selection-label,
.brand-strip-item strong,
.brand-strip-item small {
  font-family: "Montserrat", Arial, sans-serif !important;
  letter-spacing: 0.12em !important;
}

/* Refine heading weight after switching to serif */
.hero h1 {
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}

.selection-heading h2,
.brand-reel-content h2,
.knefe-story-copy h2,
.occasions-copy h2,
.branches-copy h2,
.barista-copy h2,
.contact-copy h2 {
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
}

/* Category/card titles should remain readable */
.selection-copy h3,
.occasion-card h3,
.branch-card h3,
.contact-card h3 {
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}


/* =========================================================
   L'abeille D'or - Serif Headline Size Tuning v1
   Keeps the logo-inspired font but reduces size and boldness
   ========================================================= */

.hero h1 {
  font-size: clamp(2.05rem, 3.55vw, 3.85rem) !important;
  line-height: 1.08 !important;
  font-weight: 500 !important;
  letter-spacing: -0.012em !important;
}

.selection-heading h2,
.brand-reel-content h2,
.knefe-story-copy h2,
.occasions-copy h2,
.branches-copy h2,
.barista-copy h2,
.contact-copy h2 {
  font-size: clamp(1.75rem, 2.45vw, 2.75rem) !important;
  line-height: 1.12 !important;
  font-weight: 500 !important;
  letter-spacing: -0.008em !important;
}

.selection-copy h3,
.occasion-card h3,
.branch-card h3,
.contact-card h3 {
  font-size: clamp(1.25rem, 1.65vw, 1.65rem) !important;
  line-height: 1.18 !important;
  font-weight: 520 !important;
  letter-spacing: -0.004em !important;
}

@media (max-width: 640px) {
  .hero h1 {
    font-size: clamp(1.9rem, 7.7vw, 2.85rem) !important;
    line-height: 1.1 !important;
    font-weight: 500 !important;
  }

  .selection-heading h2,
  .brand-reel-content h2,
  .knefe-story-copy h2,
  .occasions-copy h2,
  .branches-copy h2,
  .barista-copy h2,
  .contact-copy h2 {
    font-size: clamp(1.55rem, 6.4vw, 2.25rem) !important;
    line-height: 1.14 !important;
    font-weight: 500 !important;
  }

  .selection-copy h3,
  .occasion-card h3,
  .branch-card h3,
  .contact-card h3 {
    font-size: clamp(1.15rem, 4.8vw, 1.45rem) !important;
    font-weight: 520 !important;
  }
}


/* =========================================================
   L'abeille D'or - Typography Proportion Tuning v1
   Aligns eyebrow labels, section headlines and paragraphs
   after applying logo-inspired serif headings.
   ========================================================= */

/* Main hero headline: still the largest, but refined */
.hero h1 {
  font-size: clamp(2rem, 3.35vw, 3.65rem) !important;
  line-height: 1.08 !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
}

/* Main section headlines */
.selection-heading h2,
.brand-reel-content h2,
.knefe-story-copy h2,
.occasions-copy h2,
.branches-copy h2,
.barista-copy h2,
.contact-copy h2 {
  font-size: clamp(1.65rem, 2.25vw, 2.45rem) !important;
  line-height: 1.14 !important;
  font-weight: 500 !important;
  letter-spacing: -0.006em !important;
}

/* Smaller card/category titles */
.selection-copy h3,
.occasion-card h3,
.branch-card h3,
.contact-card h3 {
  font-size: clamp(1.15rem, 1.45vw, 1.5rem) !important;
  line-height: 1.18 !important;
  font-weight: 520 !important;
}

/* Eyebrow labels: make them consistent everywhere */
.eyebrow,
.selection-copy span,
#selection-label {
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 0.68rem !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: #a87524 !important;
}

/* Body paragraphs: slightly smaller so they match the refined headlines */
.hero p,
.selection-heading p,
.selection-copy p,
.brand-reel-content p:not(.eyebrow),
.knefe-story-copy p,
.occasions-copy p,
.branches-copy p,
.barista-copy p,
.contact-copy p,
.contact-card p,
.branch-card p,
.occasion-card p {
  font-size: clamp(0.9rem, 0.98vw, 0.98rem) !important;
  line-height: 1.62 !important;
  font-weight: 400 !important;
}

/* Brand strip text should not visually compete with section headings */
.brand-strip-item strong {
  font-size: 0.78rem !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
}

.brand-strip-item small {
  font-size: 0.7rem !important;
  line-height: 1.25 !important;
  letter-spacing: 0.04em !important;
}

/* Mobile tuning */
@media (max-width: 640px) {
  .hero h1 {
    font-size: clamp(1.85rem, 7.2vw, 2.65rem) !important;
    line-height: 1.1 !important;
  }

  .selection-heading h2,
  .brand-reel-content h2,
  .knefe-story-copy h2,
  .occasions-copy h2,
  .branches-copy h2,
  .barista-copy h2,
  .contact-copy h2 {
    font-size: clamp(1.45rem, 5.8vw, 2.05rem) !important;
    line-height: 1.16 !important;
  }

  .selection-copy h3,
  .occasion-card h3,
  .branch-card h3,
  .contact-card h3 {
    font-size: clamp(1.08rem, 4.4vw, 1.35rem) !important;
  }

  .eyebrow,
  .selection-copy span,
  #selection-label {
    font-size: 0.62rem !important;
    letter-spacing: 0.14em !important;
  }

  .hero p,
  .selection-heading p,
  .selection-copy p,
  .brand-reel-content p:not(.eyebrow),
  .knefe-story-copy p,
  .occasions-copy p,
  .branches-copy p,
  .barista-copy p,
  .contact-copy p,
  .contact-card p,
  .branch-card p,
  .occasion-card p {
    font-size: 0.9rem !important;
    line-height: 1.58 !important;
  }
}


/* =========================================================
   L'abeille D'or - Final Typography Alignment Test v1
   Uses brand-reel section as the reference style.
   Aligns eyebrow labels, main headlines, and paragraphs.
   ========================================================= */

/* ---------- Eyebrow labels: match A TASTE OF L'ABEILLE D'OR ---------- */

.eyebrow,
.hero .eyebrow,
.selection-heading .eyebrow,
.brand-reel-content .eyebrow,
.knefe-story-copy .eyebrow,
.occasions-copy .eyebrow,
.branches-copy .eyebrow,
.barista-copy .eyebrow,
.contact-copy .eyebrow,
#selection-label,
.selection-copy span {
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 0.68rem !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #a87524 !important;
  margin-bottom: 14px !important;
}

/* ---------- Main serif headlines: keep close to the screenshot ---------- */

.hero h1,
.selection-heading h2,
.brand-reel-content h2,
.knefe-story-copy h2,
.occasions-copy h2,
.branches-copy h2,
.barista-copy h2,
.contact-copy h2 {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: clamp(1.95rem, 3.15vw, 3.35rem) !important;
  line-height: 1.08 !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  color: #2f2118 !important;
}

/* Hero remains slightly stronger, but not oversized */
.hero h1 {
  font-size: clamp(2rem, 3.25vw, 3.55rem) !important;
}

/* ---------- Section/card sub-headlines ---------- */

.selection-copy h3,
.occasion-card h3,
.branch-card h3,
.contact-card h3 {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: clamp(1.25rem, 1.55vw, 1.65rem) !important;
  line-height: 1.16 !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  color: #2f2118 !important;
}

/* ---------- Paragraphs: proportional to the new headline size ---------- */

.hero p,
.selection-heading p,
.selection-copy p,
.brand-reel-content p:not(.eyebrow),
.knefe-story-copy p,
.occasions-copy p,
.branches-copy p,
.barista-copy p,
.contact-copy p,
.contact-card p,
.branch-card p,
.occasion-card p {
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: clamp(0.88rem, 0.95vw, 0.96rem) !important;
  line-height: 1.62 !important;
  font-weight: 500 !important;
  color: #6e5c50 !important;
}

/* ---------- Selection heading spacing ---------- */

.selection-heading .eyebrow {
  display: block !important;
  margin-bottom: 12px !important;
}

.selection-heading h2 {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

.selection-heading p {
  margin-top: 0 !important;
}

/* ---------- Selection active category label ---------- */

#selection-label {
  display: inline-block !important;
  margin-bottom: 10px !important;
}

/* ---------- Mobile typography ---------- */

@media (max-width: 640px) {
  .eyebrow,
  .hero .eyebrow,
  .selection-heading .eyebrow,
  .brand-reel-content .eyebrow,
  .knefe-story-copy .eyebrow,
  .occasions-copy .eyebrow,
  .branches-copy .eyebrow,
  .barista-copy .eyebrow,
  .contact-copy .eyebrow,
  #selection-label,
  .selection-copy span {
    font-size: 0.62rem !important;
    letter-spacing: 0.15em !important;
    margin-bottom: 10px !important;
  }

  .hero h1,
  .selection-heading h2,
  .brand-reel-content h2,
  .knefe-story-copy h2,
  .occasions-copy h2,
  .branches-copy h2,
  .barista-copy h2,
  .contact-copy h2 {
    font-size: clamp(1.65rem, 6.4vw, 2.35rem) !important;
    line-height: 1.12 !important;
    font-weight: 500 !important;
  }

  .hero h1 {
    font-size: clamp(1.85rem, 7.4vw, 2.65rem) !important;
  }

  .selection-copy h3,
  .occasion-card h3,
  .branch-card h3,
  .contact-card h3 {
    font-size: clamp(1.15rem, 4.8vw, 1.45rem) !important;
  }

  .hero p,
  .selection-heading p,
  .selection-copy p,
  .brand-reel-content p:not(.eyebrow),
  .knefe-story-copy p,
  .occasions-copy p,
  .branches-copy p,
  .barista-copy p,
  .contact-copy p,
  .contact-card p,
  .branch-card p,
  .occasion-card p {
    font-size: 0.88rem !important;
    line-height: 1.58 !important;
    font-weight: 500 !important;
  }
}


/* =========================================================
   L'abeille D'or - Header/Nav/Selection Layout Tuning v1
   PC: narrower header height, compact Selection section.
   Mobile: keep nav readable and fit Branches on first row.
   ========================================================= */

/* ---------- PC header: reduce banner height without shrinking logo ---------- */

@media (min-width: 981px) {
  .header-inner {
    min-height: 132px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    align-items: center !important;
  }

  .site-logo {
    height: 124px !important;
    align-items: center !important;
  }

  .site-logo img {
    height: 124px !important;
    max-height: 124px !important;
  }

  .site-nav {
    gap: 18px !important;
  }

  .site-nav a {
    font-size: 0.88rem !important;
  }
}

/* ---------- PC Selection: fit category tiles + gallery better on one screen ---------- */

@media (min-width: 981px) {
  .selection-tabs-section {
    margin-top: -38px !important;
    padding-top: 34px !important;
    padding-bottom: 28px !important;
  }

  .selection-heading {
    margin-bottom: 16px !important;
  }

  .selection-heading h2 {
    margin-bottom: 8px !important;
  }

  .selection-heading p {
    max-width: 720px !important;
    line-height: 1.5 !important;
  }

  .selection-tabs {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-bottom: 18px !important;
  }

  .selection-tab {
    min-height: 86px !important;
    border-radius: 14px !important;
    font-size: 0.78rem !important;
    padding: 10px 8px !important;
  }

  .selection-tab span {
    line-height: 1.15 !important;
  }

  .selection-gallery {
    grid-template-columns: minmax(0, 0.9fr) minmax(300px, 0.62fr) !important;
    gap: 22px !important;
  }

  .selection-feature {
    max-height: 300px !important;
    border-radius: 24px !important;
  }

  .selection-feature img {
    height: 300px !important;
    max-height: 300px !important;
    border-radius: 24px !important;
  }

  .selection-copy {
    padding: 18px 18px 16px !important;
    border-radius: 22px !important;
  }

  .selection-copy h3 {
    margin-bottom: 8px !important;
  }

  .selection-copy p {
    line-height: 1.48 !important;
  }

  .selection-thumbs {
    gap: 8px !important;
  }

  .selection-thumb {
    height: 84px !important;
    border-radius: 14px !important;
  }
}

/* ---------- PC brand reel: pull up slightly after compact Selection ---------- */

@media (min-width: 981px) {
  .brand-reel-section {
    margin-top: -18px !important;
  }
}

/* ---------- Mobile nav: fit all items in one readable line ---------- */

@media (max-width: 640px) {
  .site-nav {
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 4px !important;
    max-width: calc(100vw - 8px) !important;
    overflow: visible !important;
  }

  .site-nav a {
    font-size: clamp(0.64rem, 2.55vw, 0.73rem) !important;
    padding: 6px 5px !important;
    letter-spacing: -0.018em !important;
  }
}

@media (max-width: 390px) {
  .site-nav {
    gap: 3px !important;
  }

  .site-nav a {
    font-size: clamp(0.58rem, 2.35vw, 0.66rem) !important;
    padding: 5px 4px !important;
  }
}


/* =========================================================
   L'abeille D'or - Section Fit + Mobile Nav Tuning v1
   PC: sections land better from nav and Selection fits more in one screen.
   Mobile: nav slightly larger while keeping all items on one row.
   ========================================================= */

/* ---------- Better anchor positioning under sticky header ---------- */

#selection,
#brand-reel,
#our-knefe,
#occasions,
#barista,
#branches,
#contact {
  scroll-margin-top: 142px !important;
}

/* ---------- PC: general section compact rhythm ---------- */

@media (min-width: 981px) {
  section {
    scroll-margin-top: 142px !important;
  }

  .selection-tabs-section,
  .brand-reel-section,
  .knefe-story-section,
  .occasions-section,
  .branches-section,
  .barista-section,
  .contact-section {
    margin-bottom: 54px !important;
  }

  .knefe-story-section,
  .occasions-section,
  .branches-section,
  .barista-section,
  .contact-section {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}

/* ---------- PC: make Selection section fit as one compact visual block ---------- */

@media (min-width: 981px) {
  .selection-tabs-section {
    margin-top: -46px !important;
    padding-top: 26px !important;
    padding-bottom: 20px !important;
  }

  .selection-heading {
    margin-bottom: 12px !important;
  }

  .selection-heading .eyebrow {
    margin-bottom: 8px !important;
  }

  .selection-heading h2 {
    margin-bottom: 6px !important;
  }

  .selection-heading p {
    max-width: 700px !important;
    line-height: 1.42 !important;
  }

  .selection-tabs {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
  }

  .selection-tab {
    min-height: 70px !important;
    border-radius: 12px !important;
    font-size: 0.72rem !important;
    padding: 8px 6px !important;
  }

  .selection-tab span {
    line-height: 1.12 !important;
  }

  .selection-gallery {
    grid-template-columns: minmax(0, 0.86fr) minmax(300px, 0.64fr) !important;
    gap: 18px !important;
    align-items: start !important;
  }

  .selection-feature {
    height: 255px !important;
    max-height: 255px !important;
    border-radius: 22px !important;
  }

  .selection-feature img {
    height: 255px !important;
    max-height: 255px !important;
    border-radius: 22px !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  .selection-side {
    gap: 12px !important;
  }

  .selection-copy {
    padding: 15px 16px 14px !important;
    border-radius: 20px !important;
  }

  #selection-label {
    margin-bottom: 6px !important;
  }

  .selection-copy h3 {
    margin-bottom: 6px !important;
  }

  .selection-copy p {
    line-height: 1.42 !important;
  }

  .selection-thumbs {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .selection-thumb {
    height: 78px !important;
    border-radius: 13px !important;
  }
}

/* ---------- Smaller-height laptops: compact further ---------- */

@media (min-width: 981px) and (max-height: 780px) {
  .selection-tabs-section {
    margin-top: -52px !important;
    padding-top: 22px !important;
    padding-bottom: 16px !important;
  }

  .selection-tab {
    min-height: 62px !important;
    font-size: 0.68rem !important;
  }

  .selection-feature,
  .selection-feature img {
    height: 225px !important;
    max-height: 225px !important;
  }

  .selection-thumb {
    height: 68px !important;
  }

  .selection-copy {
    padding: 13px 14px 12px !important;
  }
}

/* ---------- PC: pull brand reel up after compact Selection ---------- */

@media (min-width: 981px) {
  .brand-reel-section {
    margin-top: -28px !important;
  }
}

/* ---------- Mobile nav: slightly larger, still one row ---------- */

@media (max-width: 640px) {
  .site-nav {
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 4px !important;
    max-width: calc(100vw - 6px) !important;
    overflow: visible !important;
  }

  .site-nav a {
    font-size: clamp(0.66rem, 2.62vw, 0.76rem) !important;
    padding: 6px 5px !important;
    letter-spacing: -0.02em !important;
  }
}

@media (max-width: 390px) {
  .site-nav a {
    font-size: clamp(0.61rem, 2.44vw, 0.69rem) !important;
    padding: 5px 4px !important;
  }
}


/* =========================================================
   L'abeille D'or - Corrected Mobile Nav + PC Selection Tiles v1
   Mobile: show all nav items including Reels, larger and full-width.
   PC: restore visual Selection tiles, reduce main media height only.
   ========================================================= */

/* ---------- Mobile header nav correction ---------- */

@media (max-width: 640px) {
  /* Bring Reels back on mobile */
  .site-nav a[href="#brand-reel"] {
    display: inline-flex !important;
  }

  /*
    Use a 6-column grid so all nav items reach across the phone width.
    This is better than squeezing them as random flex pills.
  */
  .site-nav {
    width: calc(100vw - 8px) !important;
    max-width: calc(100vw - 8px) !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 3px !important;
    justify-content: stretch !important;
    align-items: center !important;
    overflow: visible !important;
    padding: 2px 4px 6px !important;
  }

  .site-nav a {
    width: 100% !important;
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: clamp(0.66rem, 2.55vw, 0.78rem) !important;
    line-height: 1 !important;
    padding: 7px 2px !important;
    letter-spacing: -0.03em !important;
    white-space: nowrap !important;
    text-align: center !important;
  }
}

@media (max-width: 390px) {
  .site-nav {
    width: calc(100vw - 6px) !important;
    max-width: calc(100vw - 6px) !important;
    gap: 2px !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
  }

  .site-nav a {
    font-size: clamp(0.6rem, 2.38vw, 0.7rem) !important;
    padding: 6px 1px !important;
    letter-spacing: -0.035em !important;
  }
}

/* ---------- PC Selection section: restore tile size, reduce main image only ---------- */

@media (min-width: 981px) {
  /*
    Sticky header reduces visible viewport, so keep section compact.
    But restore the category tiles to proper visual cards.
  */
  #selection {
    scroll-margin-top: 132px !important;
  }

  .selection-tabs-section {
    margin-top: -42px !important;
    padding-top: 24px !important;
    padding-bottom: 16px !important;
  }

  .selection-heading {
    margin-bottom: 12px !important;
  }

  .selection-heading .eyebrow {
    margin-bottom: 7px !important;
  }

  .selection-heading h2 {
    margin-bottom: 6px !important;
  }

  .selection-heading p {
    max-width: 700px !important;
    line-height: 1.38 !important;
  }

  /*
    Restore visual tiles.
    These should show the background images clearly again.
  */
  .selection-tabs {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
  }

  .selection-tab {
    min-height: 112px !important;
    border-radius: 16px !important;
    font-size: 0.82rem !important;
    padding: 12px 8px !important;
  }

  .selection-tab::before,
  .selection-tab::after {
    inset: 0 !important;
  }

  .selection-tab span {
    line-height: 1.15 !important;
  }

  /*
    Main media is intentionally smaller.
    This is where the future reel will sit.
  */
  .selection-gallery {
    grid-template-columns: minmax(0, 0.78fr) minmax(320px, 0.7fr) !important;
    gap: 18px !important;
    align-items: start !important;
  }

  .selection-feature {
    height: 215px !important;
    max-height: 215px !important;
    border-radius: 22px !important;
  }

  .selection-feature img {
    height: 215px !important;
    max-height: 215px !important;
    border-radius: 22px !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  .selection-side {
    gap: 10px !important;
  }

  .selection-copy {
    padding: 13px 16px 12px !important;
    border-radius: 20px !important;
  }

  #selection-label {
    margin-bottom: 5px !important;
  }

  .selection-copy h3 {
    margin-bottom: 5px !important;
  }

  .selection-copy p {
    line-height: 1.36 !important;
  }

  .selection-thumbs {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .selection-thumb {
    height: 72px !important;
    border-radius: 13px !important;
  }
}

/* ---------- Average 14–15 inch laptop height ---------- */

@media (min-width: 981px) and (max-height: 820px) {
  .selection-tabs-section {
    margin-top: -48px !important;
    padding-top: 18px !important;
    padding-bottom: 12px !important;
  }

  .selection-tab {
    min-height: 104px !important;
  }

  .selection-feature,
  .selection-feature img {
    height: 195px !important;
    max-height: 195px !important;
  }

  .selection-thumb {
    height: 64px !important;
  }

  .selection-copy {
    padding: 12px 14px 11px !important;
  }
}


/* =========================================================
   L'abeille D'or - Hero Reel v1
   Replaces static hero image with muted landscape video when available.
   Fallback image remains if video fails.
   ========================================================= */

.hero-video-wrap {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 38px !important;
  background:
    radial-gradient(circle at 70% 20%, rgba(232, 195, 122, 0.14), transparent 42%),
    rgba(255, 250, 243, 0.18) !important;
  box-shadow: 0 26px 64px rgba(74, 47, 34, 0.13) !important;
}

.hero-video,
.hero-fallback-image {
  width: 100% !important;
  height: 100% !important;
  min-height: 420px !important;
  max-height: 520px !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 38px !important;
}

.hero-video.is-hidden {
  display: none !important;
}

.hero-video:not(.is-hidden) + .hero-fallback-image {
  display: none !important;
}

/* Desktop: keep hero video elegant and not overpowering */
@media (min-width: 981px) {
  .hero-video-wrap {
    max-height: 470px !important;
  }

  .hero-video,
  .hero-fallback-image {
    height: 470px !important;
    min-height: 470px !important;
    max-height: 470px !important;
  }
}

/* Tablet */
@media (max-width: 980px) {
  .hero-video-wrap {
    border-radius: 32px !important;
  }

  .hero-video,
  .hero-fallback-image {
    min-height: 360px !important;
    max-height: 430px !important;
    border-radius: 32px !important;
  }
}

/* Phone */
@media (max-width: 640px) {
  .hero-video-wrap {
    border-radius: 26px !important;
  }

  .hero-video,
  .hero-fallback-image {
    min-height: 280px !important;
    max-height: 340px !important;
    border-radius: 26px !important;
  }
}


/* =========================================================
   L'abeille D'or - Soft Reel Edge Blend v1
   Softens hero and brand reel edges so videos blend better
   with the warm page background.
   ========================================================= */

/* Shared premium video frame treatment */
.hero-video-wrap,
.brand-reel-frame {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  border: 1px solid rgba(198, 146, 62, 0.10) !important;
  box-shadow:
    0 20px 48px rgba(74, 47, 34, 0.12),
    0 0 0 1px rgba(255, 250, 243, 0.24) inset !important;
}

/* Soft warm glow behind reels */
.hero-video-wrap::before,
.brand-reel-frame::before {
  content: "" !important;
  position: absolute !important;
  inset: -24px !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 50% 45%, rgba(232, 195, 122, 0.20), transparent 62%) !important;
  filter: blur(6px) !important;
}

/* Soft edge overlay on top of videos */
.hero-video-wrap::after,
.brand-reel-frame::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  box-shadow:
    inset 0 0 34px rgba(255, 250, 243, 0.24),
    inset 0 0 18px rgba(74, 47, 34, 0.10) !important;
  background:
    linear-gradient(90deg,
      rgba(255, 250, 243, 0.10),
      transparent 12%,
      transparent 88%,
      rgba(255, 250, 243, 0.10)
    ),
    linear-gradient(180deg,
      rgba(255, 250, 243, 0.08),
      transparent 14%,
      transparent 86%,
      rgba(255, 250, 243, 0.08)
    ) !important;
}

/* Keep sound button above the edge overlay */
.brand-reel-sound-toggle {
  z-index: 6 !important;
}

/* Hero reel should feel less like a hard rectangle */
.hero-video-wrap {
  background: transparent !important;
}

.hero-video,
.hero-fallback-image,
.brand-reel-frame video {
  transform: scale(1.01) !important;
}

/* Mobile: slightly reduce glow so it does not look heavy */
@media (max-width: 640px) {
  .hero-video-wrap::after,
  .brand-reel-frame::after {
    box-shadow:
      inset 0 0 24px rgba(255, 250, 243, 0.20),
      inset 0 0 14px rgba(74, 47, 34, 0.08) !important;
  }

  .hero-video-wrap::before,
  .brand-reel-frame::before {
    inset: -16px !important;
    filter: blur(4px) !important;
  }
}


/* =========================================================
   L'abeille D'or - Reel Fade-to-Background v2
   Stronger edge fade for hero and brand reels.
   Removes the hard pasted-rectangle look.
   ========================================================= */

/* Remove hard frame feel created by earlier tests */
.hero-video-wrap,
.brand-reel-frame {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  isolation: isolate !important;
  overflow: visible !important;
}

/* Disable previous overlay edge effect */
.hero-video-wrap::after,
.brand-reel-frame::after {
  display: none !important;
}

/* Keep only a soft warm aura behind media */
.hero-video-wrap::before,
.brand-reel-frame::before {
  content: "" !important;
  position: absolute !important;
  inset: -26px !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(232, 195, 122, 0.18),
      rgba(232, 195, 122, 0.08) 34%,
      transparent 68%
    ) !important;
  filter: blur(10px) !important;
}

/* Actual fade effect: video/image edges fade into the page */
.hero-video,
.hero-fallback-image {
  border-radius: 26px !important;
  box-shadow: none !important;
  -webkit-mask-image:
    radial-gradient(ellipse 82% 82% at 50% 50%,
      #000 58%,
      rgba(0, 0, 0, 0.84) 70%,
      rgba(0, 0, 0, 0.42) 84%,
      transparent 100%
    ) !important;
  mask-image:
    radial-gradient(ellipse 82% 82% at 50% 50%,
      #000 58%,
      rgba(0, 0, 0, 0.84) 70%,
      rgba(0, 0, 0, 0.42) 84%,
      transparent 100%
    ) !important;
}

/* Portrait brand reels get their own softer vertical mask */
.brand-reel-frame video {
  border-radius: 22px !important;
  box-shadow: none !important;
  -webkit-mask-image:
    radial-gradient(ellipse 78% 88% at 50% 50%,
      #000 60%,
      rgba(0, 0, 0, 0.86) 72%,
      rgba(0, 0, 0, 0.42) 86%,
      transparent 100%
    ) !important;
  mask-image:
    radial-gradient(ellipse 78% 88% at 50% 50%,
      #000 60%,
      rgba(0, 0, 0, 0.86) 72%,
      rgba(0, 0, 0, 0.42) 86%,
      transparent 100%
    ) !important;
}

/* Hero sound button */
.hero-sound-toggle {
  position: absolute !important;
  right: 22px !important;
  bottom: 22px !important;
  z-index: 7 !important;
  border: 1px solid rgba(255, 255, 255, 0.34) !important;
  border-radius: 999px !important;
  background: rgba(34, 23, 17, 0.58) !important;
  color: #fffaf3 !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  padding: 9px 13px !important;
  cursor: pointer !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.hero-sound-toggle:hover {
  background: rgba(34, 23, 17, 0.74) !important;
}

.hero-sound-toggle.is-hidden {
  display: none !important;
}

/* Keep brand reel sound buttons above the faded media */
.brand-reel-sound-toggle {
  z-index: 7 !important;
}

/* Mobile: slightly softer mask so videos remain clear */
@media (max-width: 640px) {
  .hero-video-wrap::before,
  .brand-reel-frame::before {
    inset: -18px !important;
    filter: blur(7px) !important;
  }

  .hero-video,
  .hero-fallback-image {
    -webkit-mask-image:
      radial-gradient(ellipse 88% 86% at 50% 50%,
        #000 62%,
        rgba(0, 0, 0, 0.82) 74%,
        rgba(0, 0, 0, 0.45) 88%,
        transparent 100%
      ) !important;
    mask-image:
      radial-gradient(ellipse 88% 86% at 50% 50%,
        #000 62%,
        rgba(0, 0, 0, 0.82) 74%,
        rgba(0, 0, 0, 0.45) 88%,
        transparent 100%
      ) !important;
  }

  .hero-sound-toggle {
    right: 14px !important;
    bottom: 14px !important;
    font-size: 0.72rem !important;
    padding: 8px 11px !important;
  }
}


/* =========================================================
   L'abeille D'or - Hero Fallback + Real Edge Fade Fix v1
   Fixes fallback image overlay and visually blends reel edges
   into the warm page background.
   ========================================================= */

/* Once video is ready, hide fallback even if button is between video and image */
.hero-video-wrap.is-video-ready .hero-fallback-image {
  display: none !important;
}

/* Keep fallback visible only when video is not ready */
.hero-video-wrap:not(.is-video-ready) .hero-fallback-image {
  display: block !important;
}

/* Clean previous mask/shadow experiments */
.hero-video,
.hero-fallback-image,
.brand-reel-frame video {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  transform: none !important;
}

/* Keep reels clean and integrated */
.hero-video-wrap,
.brand-reel-frame {
  position: relative !important;
  overflow: hidden !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/*
  This is the real visual fade:
  warm background-colored gradients overlay the video edges.
  It makes the video dissolve into the page instead of looking pasted.
*/
.hero-video-wrap::after,
.brand-reel-frame::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  display: block !important;
  background:
    linear-gradient(to right,
      rgba(246, 238, 224, 0.92) 0%,
      rgba(246, 238, 224, 0.58) 3%,
      rgba(246, 238, 224, 0.00) 10%,
      rgba(246, 238, 224, 0.00) 90%,
      rgba(246, 238, 224, 0.58) 97%,
      rgba(246, 238, 224, 0.92) 100%
    ),
    linear-gradient(to bottom,
      rgba(246, 238, 224, 0.92) 0%,
      rgba(246, 238, 224, 0.48) 5%,
      rgba(246, 238, 224, 0.00) 14%,
      rgba(246, 238, 224, 0.00) 86%,
      rgba(246, 238, 224, 0.48) 95%,
      rgba(246, 238, 224, 0.92) 100%
    ) !important;
}

/* Softer aura behind reels */
.hero-video-wrap::before,
.brand-reel-frame::before {
  content: "" !important;
  position: absolute !important;
  inset: -22px !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at center,
      rgba(184, 128, 45, 0.10),
      rgba(184, 128, 45, 0.04) 38%,
      transparent 70%
    ) !important;
  filter: blur(12px) !important;
}

/* Keep videos and fallback inside the blended frame */
.hero-video,
.hero-fallback-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: inherit !important;
  box-shadow: none !important;
}

/* Keep buttons above the edge fade overlay */
.hero-sound-toggle,
.brand-reel-sound-toggle {
  z-index: 8 !important;
}

/* Slightly reduce fade strength on mobile */
@media (max-width: 640px) {
  .hero-video-wrap::after,
  .brand-reel-frame::after {
    background:
      linear-gradient(to right,
        rgba(246, 238, 224, 0.78) 0%,
        rgba(246, 238, 224, 0.42) 4%,
        rgba(246, 238, 224, 0.00) 12%,
        rgba(246, 238, 224, 0.00) 88%,
        rgba(246, 238, 224, 0.42) 96%,
        rgba(246, 238, 224, 0.78) 100%
      ),
      linear-gradient(to bottom,
        rgba(246, 238, 224, 0.78) 0%,
        rgba(246, 238, 224, 0.38) 6%,
        rgba(246, 238, 224, 0.00) 16%,
        rgba(246, 238, 224, 0.00) 84%,
        rgba(246, 238, 224, 0.38) 94%,
        rgba(246, 238, 224, 0.78) 100%
      ) !important;
  }
}


/* =========================================================
   L'abeille D'or - Reel Fade Opacity + Mobile Logo Shift v1
   Softens reel edge fade and moves mobile header logo slightly left.
   ========================================================= */

/* Reduce edge fade opacity so reels are not eaten too much */
.hero-video-wrap::after,
.brand-reel-frame::after {
  background:
    linear-gradient(to right,
      rgba(246, 238, 224, 0.68) 0%,
      rgba(246, 238, 224, 0.36) 3%,
      rgba(246, 238, 224, 0.00) 10%,
      rgba(246, 238, 224, 0.00) 90%,
      rgba(246, 238, 224, 0.36) 97%,
      rgba(246, 238, 224, 0.68) 100%
    ),
    linear-gradient(to bottom,
      rgba(246, 238, 224, 0.68) 0%,
      rgba(246, 238, 224, 0.30) 5%,
      rgba(246, 238, 224, 0.00) 14%,
      rgba(246, 238, 224, 0.00) 86%,
      rgba(246, 238, 224, 0.30) 95%,
      rgba(246, 238, 224, 0.68) 100%
    ) !important;
}

/* Reduce aura slightly too */
.hero-video-wrap::before,
.brand-reel-frame::before {
  background:
    radial-gradient(circle at center,
      rgba(184, 128, 45, 0.07),
      rgba(184, 128, 45, 0.025) 38%,
      transparent 70%
    ) !important;
  filter: blur(10px) !important;
}

/* Mobile: keep fade even lighter */
@media (max-width: 640px) {
  .hero-video-wrap::after,
  .brand-reel-frame::after {
    background:
      linear-gradient(to right,
        rgba(246, 238, 224, 0.56) 0%,
        rgba(246, 238, 224, 0.28) 4%,
        rgba(246, 238, 224, 0.00) 12%,
        rgba(246, 238, 224, 0.00) 88%,
        rgba(246, 238, 224, 0.28) 96%,
        rgba(246, 238, 224, 0.56) 100%
      ),
      linear-gradient(to bottom,
        rgba(246, 238, 224, 0.56) 0%,
        rgba(246, 238, 224, 0.24) 6%,
        rgba(246, 238, 224, 0.00) 16%,
        rgba(246, 238, 224, 0.00) 84%,
        rgba(246, 238, 224, 0.24) 94%,
        rgba(246, 238, 224, 0.56) 100%
      ) !important;
  }

  /* Move mobile logo slightly left */
  .site-logo {
    transform: translateX(-8px) !important;
  }
}

/* Very narrow phones: smaller left shift */
@media (max-width: 390px) {
  .site-logo {
    transform: translateX(-5px) !important;
  }
}


/* =========================================================
   L'abeille D'or - Selection Mixed Media v1
   Supports image and reel main media with sound button and soft fade.
   ========================================================= */

.selection-feature {
  position: relative !important;
  overflow: hidden !important;
  background: transparent !important;
}

.selection-main-media,
.selection-main-video-wrap {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  border-radius: inherit !important;
  background: transparent !important;
}

.selection-main-image,
.selection-main-video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: inherit !important;
}

.selection-main-video.is-hidden {
  display: none !important;
}

.selection-main-video-wrap.is-video-ready .selection-video-fallback {
  display: none !important;
}

/* Apply same soft fade family as hero/brand reels, lighter for Selection */
.selection-feature::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  background:
    linear-gradient(to right,
      rgba(246, 238, 224, 0.52) 0%,
      rgba(246, 238, 224, 0.24) 3%,
      rgba(246, 238, 224, 0.00) 10%,
      rgba(246, 238, 224, 0.00) 90%,
      rgba(246, 238, 224, 0.24) 97%,
      rgba(246, 238, 224, 0.52) 100%
    ),
    linear-gradient(to bottom,
      rgba(246, 238, 224, 0.52) 0%,
      rgba(246, 238, 224, 0.22) 5%,
      rgba(246, 238, 224, 0.00) 14%,
      rgba(246, 238, 224, 0.00) 86%,
      rgba(246, 238, 224, 0.22) 95%,
      rgba(246, 238, 224, 0.52) 100%
    ) !important;
}

.selection-sound-toggle {
  position: absolute !important;
  right: 14px !important;
  bottom: 14px !important;
  z-index: 8 !important;
  border: 1px solid rgba(255, 255, 255, 0.34) !important;
  border-radius: 999px !important;
  background: rgba(34, 23, 17, 0.58) !important;
  color: #fffaf3 !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  padding: 8px 11px !important;
  cursor: pointer !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.selection-sound-toggle.is-hidden {
  display: none !important;
}

.selection-thumb {
  position: relative !important;
}

.selection-thumb.is-active {
  outline: 2px solid rgba(168, 117, 36, 0.55) !important;
  outline-offset: 2px !important;
}

.selection-thumb-badge {
  position: absolute !important;
  right: 7px !important;
  bottom: 7px !important;
  z-index: 3 !important;
  border-radius: 999px !important;
  background: rgba(34, 23, 17, 0.62) !important;
  color: #fffaf3 !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  padding: 4px 7px !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* Let JS-controlled tab images override older hardcoded tile backgrounds */
.selection-tab::before {
  background-image: var(--tab-bg) !important;
}

@media (max-width: 640px) {
  .selection-sound-toggle {
    right: 10px !important;
    bottom: 10px !important;
    font-size: 0.68rem !important;
    padding: 7px 10px !important;
  }

  .selection-feature::after {
    background:
      linear-gradient(to right,
        rgba(246, 238, 224, 0.42) 0%,
        rgba(246, 238, 224, 0.18) 4%,
        rgba(246, 238, 224, 0.00) 12%,
        rgba(246, 238, 224, 0.00) 88%,
        rgba(246, 238, 224, 0.18) 96%,
        rgba(246, 238, 224, 0.42) 100%
      ),
      linear-gradient(to bottom,
        rgba(246, 238, 224, 0.42) 0%,
        rgba(246, 238, 224, 0.18) 6%,
        rgba(246, 238, 224, 0.00) 16%,
        rgba(246, 238, 224, 0.00) 84%,
        rgba(246, 238, 224, 0.18) 94%,
        rgba(246, 238, 224, 0.42) 100%
      ) !important;
  }
}


/* =========================================================
   L'abeille D'or - Selection Media Background Blend v1
   Makes Selection main images/reels blend into the warm page background.
   Applies to the large Selection media only, not thumbnails.
   ========================================================= */

.selection-feature {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Soft aura behind Selection main media */
.selection-feature::before {
  content: "" !important;
  position: absolute !important;
  inset: -20px !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at center,
      rgba(184, 128, 45, 0.07),
      rgba(184, 128, 45, 0.025) 38%,
      transparent 70%
    ) !important;
  filter: blur(10px) !important;
}

/*
  Real edge blend for Selection main image/reel.
  This uses the page background color so the media fades into the page,
  instead of looking like a pasted rectangle.
*/
.selection-feature::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  display: block !important;
  background:
    linear-gradient(to right,
      rgba(246, 238, 224, 0.68) 0%,
      rgba(246, 238, 224, 0.36) 3%,
      rgba(246, 238, 224, 0.00) 10%,
      rgba(246, 238, 224, 0.00) 90%,
      rgba(246, 238, 224, 0.36) 97%,
      rgba(246, 238, 224, 0.68) 100%
    ),
    linear-gradient(to bottom,
      rgba(246, 238, 224, 0.68) 0%,
      rgba(246, 238, 224, 0.30) 5%,
      rgba(246, 238, 224, 0.00) 14%,
      rgba(246, 238, 224, 0.00) 86%,
      rgba(246, 238, 224, 0.30) 95%,
      rgba(246, 238, 224, 0.68) 100%
    ) !important;
}

/* Make actual image/video edges less hard */
.selection-main-image,
.selection-main-video,
.selection-video-fallback {
  border-radius: inherit !important;
  box-shadow: none !important;
}

/* Keep Selection sound button above the blend overlay */
.selection-sound-toggle {
  z-index: 8 !important;
}

/* Keep thumbnails clear. Only subtle active state. */
.selection-thumb {
  box-shadow: none !important;
}

.selection-thumb img {
  filter: none !important;
}

/* Mobile: slightly lighter fade so the media remains clear */
@media (max-width: 640px) {
  .selection-feature::before {
    inset: -16px !important;
    filter: blur(7px) !important;
  }

  .selection-feature::after {
    background:
      linear-gradient(to right,
        rgba(246, 238, 224, 0.56) 0%,
        rgba(246, 238, 224, 0.28) 4%,
        rgba(246, 238, 224, 0.00) 12%,
        rgba(246, 238, 224, 0.00) 88%,
        rgba(246, 238, 224, 0.28) 96%,
        rgba(246, 238, 224, 0.56) 100%
      ),
      linear-gradient(to bottom,
        rgba(246, 238, 224, 0.56) 0%,
        rgba(246, 238, 224, 0.24) 6%,
        rgba(246, 238, 224, 0.00) 16%,
        rgba(246, 238, 224, 0.00) 84%,
        rgba(246, 238, 224, 0.24) 94%,
        rgba(246, 238, 224, 0.56) 100%
      ) !important;
  }
}


/* =========================================================
   L'abeille D'or - Global Media Blend Tuning v1
   Reduces edge fade opacity on large media and applies a lighter
   blend style to thumbnails/photos.
   ========================================================= */

/* ---------- Large media: hero, brand reels, selection main media ---------- */

.hero-video-wrap::after,
.brand-reel-frame::after,
.selection-feature::after {
  background:
    linear-gradient(to right,
      rgba(246, 238, 224, 0.44) 0%,
      rgba(246, 238, 224, 0.22) 3%,
      rgba(246, 238, 224, 0.00) 10%,
      rgba(246, 238, 224, 0.00) 90%,
      rgba(246, 238, 224, 0.22) 97%,
      rgba(246, 238, 224, 0.44) 100%
    ),
    linear-gradient(to bottom,
      rgba(246, 238, 224, 0.44) 0%,
      rgba(246, 238, 224, 0.20) 5%,
      rgba(246, 238, 224, 0.00) 14%,
      rgba(246, 238, 224, 0.00) 86%,
      rgba(246, 238, 224, 0.20) 95%,
      rgba(246, 238, 224, 0.44) 100%
    ) !important;
}

.hero-video-wrap::before,
.brand-reel-frame::before,
.selection-feature::before {
  background:
    radial-gradient(circle at center,
      rgba(184, 128, 45, 0.045),
      rgba(184, 128, 45, 0.018) 38%,
      transparent 70%
    ) !important;
  filter: blur(8px) !important;
}

/* ---------- Selection thumbnails: lighter blend, still clear and clickable ---------- */

.selection-thumb {
  position: relative !important;
  overflow: hidden !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.selection-thumb::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  background:
    linear-gradient(to right,
      rgba(246, 238, 224, 0.26) 0%,
      rgba(246, 238, 224, 0.10) 6%,
      rgba(246, 238, 224, 0.00) 18%,
      rgba(246, 238, 224, 0.00) 82%,
      rgba(246, 238, 224, 0.10) 94%,
      rgba(246, 238, 224, 0.26) 100%
    ),
    linear-gradient(to bottom,
      rgba(246, 238, 224, 0.24) 0%,
      rgba(246, 238, 224, 0.09) 8%,
      rgba(246, 238, 224, 0.00) 22%,
      rgba(246, 238, 224, 0.00) 78%,
      rgba(246, 238, 224, 0.09) 92%,
      rgba(246, 238, 224, 0.24) 100%
    ) !important;
}

.selection-thumb img {
  border-radius: inherit !important;
  box-shadow: none !important;
}

/* Keep Reel badge above thumbnail fade */
.selection-thumb-badge {
  z-index: 4 !important;
}

/* Keep active outline visible */
.selection-thumb.is-active {
  outline: 2px solid rgba(168, 117, 36, 0.50) !important;
  outline-offset: 2px !important;
}

/* ---------- General photo cards / image blocks: light blend language ---------- */

.occasion-card,
.branch-card,
.barista-card,
.knefe-story-image,
.occasions-image,
.branches-image,
.barista-image {
  position: relative !important;
  overflow: hidden !important;
}

.occasion-card img,
.branch-card img,
.barista-card img,
.knefe-story-image img,
.occasions-image img,
.branches-image img,
.barista-image img {
  border-radius: inherit !important;
  box-shadow: none !important;
}

/*
  This targets common image containers without being too aggressive.
  We will refine exact section classes later when we redesign those sections.
*/
.occasion-card::after,
.branch-card::after,
.barista-card::after,
.knefe-story-image::after,
.occasions-image::after,
.branches-image::after,
.barista-image::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  background:
    linear-gradient(to right,
      rgba(246, 238, 224, 0.22) 0%,
      rgba(246, 238, 224, 0.08) 7%,
      rgba(246, 238, 224, 0.00) 20%,
      rgba(246, 238, 224, 0.00) 80%,
      rgba(246, 238, 224, 0.08) 93%,
      rgba(246, 238, 224, 0.22) 100%
    ),
    linear-gradient(to bottom,
      rgba(246, 238, 224, 0.22) 0%,
      rgba(246, 238, 224, 0.08) 8%,
      rgba(246, 238, 224, 0.00) 22%,
      rgba(246, 238, 224, 0.00) 78%,
      rgba(246, 238, 224, 0.08) 92%,
      rgba(246, 238, 224, 0.22) 100%
    ) !important;
}

/* ---------- Mobile: keep everything a little clearer ---------- */

@media (max-width: 640px) {
  .hero-video-wrap::after,
  .brand-reel-frame::after,
  .selection-feature::after {
    background:
      linear-gradient(to right,
        rgba(246, 238, 224, 0.34) 0%,
        rgba(246, 238, 224, 0.16) 4%,
        rgba(246, 238, 224, 0.00) 12%,
        rgba(246, 238, 224, 0.00) 88%,
        rgba(246, 238, 224, 0.16) 96%,
        rgba(246, 238, 224, 0.34) 100%
      ),
      linear-gradient(to bottom,
        rgba(246, 238, 224, 0.34) 0%,
        rgba(246, 238, 224, 0.14) 6%,
        rgba(246, 238, 224, 0.00) 16%,
        rgba(246, 238, 224, 0.00) 84%,
        rgba(246, 238, 224, 0.14) 94%,
        rgba(246, 238, 224, 0.34) 100%
      ) !important;
  }

  .selection-thumb::after {
    background:
      linear-gradient(to right,
        rgba(246, 238, 224, 0.18) 0%,
        rgba(246, 238, 224, 0.07) 7%,
        rgba(246, 238, 224, 0.00) 20%,
        rgba(246, 238, 224, 0.00) 80%,
        rgba(246, 238, 224, 0.07) 93%,
        rgba(246, 238, 224, 0.18) 100%
      ),
      linear-gradient(to bottom,
        rgba(246, 238, 224, 0.18) 0%,
        rgba(246, 238, 224, 0.07) 8%,
        rgba(246, 238, 224, 0.00) 22%,
        rgba(246, 238, 224, 0.00) 78%,
        rgba(246, 238, 224, 0.07) 92%,
        rgba(246, 238, 224, 0.18) 100%
      ) !important;
  }
}


/* =========================================================
   L'abeille D'or - Mobile Horizontal Scroll Fix v1
   Prevents tiny left/right page movement on mobile.
   ========================================================= */

html,
body {
  max-width: 100% !important;
  overflow-x: clip !important;
}

@supports not (overflow-x: clip) {
  html,
  body {
    overflow-x: hidden !important;
  }
}

/* Mobile nav should fit inside viewport including its padding */
@media (max-width: 640px) {
  .site-header,
  .site-header .container.header-inner,
  .header-inner {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .site-nav {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: calc(100vw - 12px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: hidden !important;
  }

  .site-nav a {
    min-width: 0 !important;
  }

  /*
    Reel glow pseudo-elements can extend outside their containers.
    On mobile, keep the page from expanding sideways because of them.
  */
  .hero,
  .selection-tabs-section,
  .brand-reel-section,
  .selection-feature,
  .hero-video-wrap,
  .brand-reel-frame {
    max-width: 100% !important;
  }
}


/* =========================================================
   L'abeille D'or - Selection Laptop Alignment Fix v1
   Purpose:
   - Keep Selection nav + main media + thumbnails in one laptop view.
   - Align the bottom of the main reel/image with the thumbnail block.
   - Keep phone layout untouched.
   ========================================================= */

@media (min-width: 981px) and (max-height: 820px) {

  .selection-tabs-section {
    padding-top: 34px !important;
    padding-bottom: 28px !important;
  }

  .selection-tabs-section .section-heading {
    margin-bottom: 12px !important;
  }

  .selection-tabs-section .section-heading h2 {
    font-size: clamp(2rem, 2.7vw, 3rem) !important;
    line-height: 0.98 !important;
    margin-bottom: 6px !important;
  }

  .selection-tabs-section .section-heading p {
    font-size: 0.95rem !important;
    line-height: 1.35 !important;
  }

  .selection-tabs {
    margin-bottom: 14px !important;
    gap: 8px !important;
  }

  .selection-tab {
    min-height: 78px !important;
    padding: 8px !important;
  }

  .selection-tab img {
    height: 38px !important;
  }

  .selection-tab span {
    font-size: 0.76rem !important;
    line-height: 1.1 !important;
  }

  .selection-gallery {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(310px, 360px) !important;
    gap: 18px !important;
    align-items: stretch !important;
  }

  .selection-feature {
    height: 300px !important;
    max-height: 300px !important;
    min-height: 0 !important;
    align-self: stretch !important;
  }

  .selection-side {
    display: grid !important;
    grid-template-rows: auto 1fr !important;
    align-self: stretch !important;
  }

  .selection-copy {
    margin-bottom: 10px !important;
  }

  .selection-copy .eyebrow,
  .selection-copy span {
    margin-bottom: 4px !important;
  }

  .selection-copy h3 {
    font-size: clamp(1.65rem, 2.1vw, 2.35rem) !important;
    line-height: 0.98 !important;
    margin-bottom: 5px !important;
  }

  .selection-copy p {
    font-size: 0.92rem !important;
    line-height: 1.32 !important;
    margin-bottom: 0 !important;
  }

  /*
    6 thumbnails on PC/laptop:
    3 columns x 2 rows.
    This keeps the thumbnail block compact and visually aligned.
  */
  .selection-thumbs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: 1fr !important;
    gap: 8px !important;
    align-self: end !important;
  }

  .selection-thumb {
    height: 76px !important;
    min-height: 0 !important;
  }

  .selection-thumb img {
    height: 100% !important;
    object-fit: cover !important;
  }
}

/* Extra compact mode for shorter laptop browser windows */
@media (min-width: 981px) and (max-height: 720px) {

  .selection-tabs-section {
    padding-top: 26px !important;
    padding-bottom: 22px !important;
  }

  .selection-tabs-section .section-heading {
    margin-bottom: 8px !important;
  }

  .selection-tabs {
    margin-bottom: 10px !important;
  }

  .selection-tab {
    min-height: 68px !important;
  }

  .selection-tab img {
    height: 32px !important;
  }

  .selection-feature {
    height: 270px !important;
    max-height: 270px !important;
  }

  .selection-copy h3 {
    font-size: clamp(1.5rem, 1.9vw, 2.1rem) !important;
  }

  .selection-copy p {
    font-size: 0.88rem !important;
    line-height: 1.28 !important;
  }

  .selection-thumb {
    height: 66px !important;
  }
}


/* =========================================================
   L'abeille D'or - Selection Laptop Layout Rollback v1
   Fixes the previous laptop tuning that made:
   - category tabs too flat
   - main media too wide and short
   - thumbnails too small and pushed right
   ========================================================= */

@media (min-width: 981px) {

  /* Keep the whole Selection area centered and controlled */
  .selection-tabs-section .container {
    max-width: 1280px !important;
  }

  /* Restore premium category tiles */
  .selection-tabs {
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 22px !important;
    gap: 12px !important;
  }

  .selection-tab {
    min-height: 104px !important;
    padding: 12px 12px !important;
    border-radius: 18px !important;
  }

  .selection-tab img {
    height: 58px !important;
  }

  .selection-tab span {
    font-size: 0.88rem !important;
    line-height: 1.15 !important;
  }

  /*
    Restore a balanced layout:
    - main reel/photo should not stretch like a banner
    - right side should not be pushed too far right
  */
  .selection-gallery {
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: grid !important;
    grid-template-columns: minmax(560px, 1.18fr) minmax(390px, 0.82fr) !important;
    gap: 24px !important;
    align-items: stretch !important;
  }

  .selection-feature {
    height: 370px !important;
    max-height: 370px !important;
    min-height: 0 !important;
    align-self: stretch !important;
  }

  .selection-main-image,
  .selection-main-video,
  .selection-video-fallback {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /*
    Right side behaves as one visual block:
    copy card on top, thumbnails below.
  */
  .selection-side {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-height: 370px !important;
    align-self: stretch !important;
  }

  .selection-copy {
    margin-bottom: 14px !important;
  }

  .selection-copy h3 {
    font-size: clamp(1.9rem, 2.4vw, 2.8rem) !important;
    line-height: 1.03 !important;
    margin-bottom: 8px !important;
  }

  .selection-copy p {
    font-size: 0.98rem !important;
    line-height: 1.42 !important;
  }

  /*
    Keep 6 thumbnails ready:
    3 columns x 2 rows.
    Bigger and closer to the main reel.
  */
  .selection-thumbs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-self: stretch !important;
  }

  .selection-thumb {
    height: 86px !important;
    min-height: 0 !important;
    border-radius: 14px !important;
  }

  .selection-thumb img {
    height: 100% !important;
    object-fit: cover !important;
  }
}

/* Laptop screens: compact only slightly, without destroying the design */
@media (min-width: 981px) and (max-height: 820px) {

  .selection-tabs-section {
    padding-top: 40px !important;
    padding-bottom: 36px !important;
  }

  .selection-tabs-section .section-heading {
    margin-bottom: 14px !important;
  }

  .selection-tabs {
    margin-bottom: 18px !important;
  }

  .selection-tab {
    min-height: 96px !important;
  }

  .selection-tab img {
    height: 52px !important;
  }

  .selection-gallery {
    max-width: 1160px !important;
    grid-template-columns: minmax(540px, 1.12fr) minmax(390px, 0.88fr) !important;
    gap: 22px !important;
  }

  .selection-feature {
    height: 350px !important;
    max-height: 350px !important;
  }

  .selection-side {
    min-height: 350px !important;
  }

  .selection-copy h3 {
    font-size: clamp(1.8rem, 2.25vw, 2.5rem) !important;
  }

  .selection-copy p {
    font-size: 0.94rem !important;
    line-height: 1.36 !important;
  }

  .selection-thumb {
    height: 82px !important;
  }
}

/* Very short laptop windows: compact a little more, but keep proportions */
@media (min-width: 981px) and (max-height: 720px) {

  .selection-tabs-section {
    padding-top: 32px !important;
    padding-bottom: 28px !important;
  }

  .selection-tabs {
    margin-bottom: 14px !important;
  }

  .selection-tab {
    min-height: 88px !important;
  }

  .selection-tab img {
    height: 46px !important;
  }

  .selection-feature {
    height: 325px !important;
    max-height: 325px !important;
  }

  .selection-side {
    min-height: 325px !important;
  }

  .selection-thumb {
    height: 76px !important;
  }
}


/* =========================================================
   L'abeille D'or - Selection Desktop Rebalance v2
   Fixes previous laptop layout:
   - restores taller main media
   - restores larger thumbnails
   - avoids banner-like wide crop
   - keeps category nav visible on laptop/desktop
   - phone layout untouched
   ========================================================= */

@media (min-width: 981px) {

  .selection-tabs-section {
    padding-top: 42px !important;
    padding-bottom: 48px !important;
  }

  .selection-tabs-section .container {
    max-width: 1220px !important;
  }

  .selection-tabs-section .section-heading {
    margin-bottom: 16px !important;
  }

  .selection-tabs {
    max-width: 1120px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 22px !important;
    gap: 12px !important;
  }

  .selection-tab {
    min-height: 104px !important;
    padding: 12px 12px !important;
    border-radius: 18px !important;
  }

  .selection-tab img {
    height: 58px !important;
  }

  .selection-tab span {
    font-size: 0.88rem !important;
    line-height: 1.15 !important;
  }

  /*
    Important:
    Keep the gallery controlled in width.
    The previous version made the main reel too wide and too short.
  */
  .selection-gallery {
    max-width: 1120px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: grid !important;
    grid-template-columns: minmax(500px, 1.05fr) minmax(390px, 0.95fr) !important;
    gap: 22px !important;
    align-items: stretch !important;
  }

  .selection-feature {
    height: 430px !important;
    max-height: 430px !important;
    min-height: 0 !important;
    align-self: stretch !important;
  }

  .selection-main-image,
  .selection-video-fallback {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /*
    For reels, avoid aggressive crop.
    This is especially important for portrait/mobile reels.
  */
  .selection-main-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: transparent !important;
  }

  .selection-side {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-height: 430px !important;
    align-self: stretch !important;
  }

  .selection-copy {
    margin-bottom: 16px !important;
  }

  .selection-copy h3 {
    font-size: clamp(2rem, 2.45vw, 2.85rem) !important;
    line-height: 1.03 !important;
    margin-bottom: 8px !important;
  }

  .selection-copy p {
    font-size: 0.98rem !important;
    line-height: 1.42 !important;
  }

  /*
    6 thumbnails ready:
    3 columns x 2 rows.
    Larger than the previous failed version.
  */
  .selection-thumbs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-self: stretch !important;
  }

  .selection-thumb {
    height: 108px !important;
    min-height: 0 !important;
    border-radius: 15px !important;
  }

  .selection-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
}

/* Laptop height tuning without destroying the proportions */
@media (min-width: 981px) and (max-height: 820px) {

  .selection-tabs-section {
    padding-top: 34px !important;
    padding-bottom: 38px !important;
  }

  .selection-tabs-section .section-heading {
    margin-bottom: 12px !important;
  }

  .selection-tabs {
    margin-bottom: 18px !important;
  }

  .selection-tab {
    min-height: 96px !important;
  }

  .selection-tab img {
    height: 52px !important;
  }

  .selection-gallery {
    max-width: 1100px !important;
    grid-template-columns: minmax(490px, 1.05fr) minmax(385px, 0.95fr) !important;
    gap: 22px !important;
  }

  .selection-feature {
    height: 405px !important;
    max-height: 405px !important;
  }

  .selection-side {
    min-height: 405px !important;
  }

  .selection-copy {
    margin-bottom: 14px !important;
  }

  .selection-copy h3 {
    font-size: clamp(1.9rem, 2.25vw, 2.55rem) !important;
  }

  .selection-copy p {
    font-size: 0.94rem !important;
    line-height: 1.36 !important;
  }

  .selection-thumb {
    height: 100px !important;
  }
}

/* Very short browser windows: only mild compacting */
@media (min-width: 981px) and (max-height: 720px) {

  .selection-tabs-section {
    padding-top: 28px !important;
    padding-bottom: 32px !important;
  }

  .selection-tabs {
    margin-bottom: 14px !important;
  }

  .selection-tab {
    min-height: 90px !important;
  }

  .selection-tab img {
    height: 48px !important;
  }

  .selection-feature {
    height: 380px !important;
    max-height: 380px !important;
  }

  .selection-side {
    min-height: 380px !important;
  }

  .selection-thumb {
    height: 92px !important;
  }
}


/* =========================================================
   L'abeille D'or - Selection Portrait Reel Background Fix v2
   Uses the reel poster as a blurred background behind portrait reels.
   Desktop/laptop only. Phone layout remains untouched.
   ========================================================= */

@media (min-width: 981px) {

  .selection-feature {
    height: 455px !important;
    max-height: 455px !important;
  }

  .selection-side {
    min-height: 455px !important;
  }

  .selection-thumb {
    height: 112px !important;
  }

  .selection-feature.has-portrait-video-bg {
    background:
      linear-gradient(
        rgba(246, 238, 224, 0.14),
        rgba(246, 238, 224, 0.14)
      ),
      var(--selection-video-poster) center center / cover no-repeat !important;
  }

  .selection-feature.has-portrait-video-bg::before {
    content: "" !important;
    position: absolute !important;
    inset: -24px !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background: var(--selection-video-poster) center center / cover no-repeat !important;
    filter: blur(24px) saturate(1.05) !important;
    opacity: 0.46 !important;
    transform: scale(1.08) !important;
  }

  .selection-feature.has-portrait-video-bg .selection-main-video-wrap {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    height: 100% !important;
  }

  .selection-feature.has-portrait-video-bg .selection-main-video {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: transparent !important;
  }

  .selection-feature.has-portrait-video-bg .selection-video-fallback {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: transparent !important;
  }

  .selection-feature.has-portrait-video-bg .selection-sound-toggle {
    z-index: 8 !important;
  }
}

/* Laptop height tuning */
@media (min-width: 981px) and (max-height: 820px) {

  .selection-feature {
    height: 435px !important;
    max-height: 435px !important;
  }

  .selection-side {
    min-height: 435px !important;
  }

  .selection-thumb {
    height: 106px !important;
  }
}

/* Very short laptop browser windows */
@media (min-width: 981px) and (max-height: 720px) {

  .selection-feature {
    height: 405px !important;
    max-height: 405px !important;
  }

  .selection-side {
    min-height: 405px !important;
  }

  .selection-thumb {
    height: 98px !important;
  }
}


/* =========================================================
   L'abeille D'or - Selection Desktop Fill + Thumbnail Tune v1
   Removes failed blurred portrait-video look.
   Restores full-frame main reel/image and makes side thumbnails larger.
   Phone remains untouched.
   ========================================================= */

@media (min-width: 981px) {

  /*
    Keep the Selection nav visible, but use the available screen height better.
  */
  .selection-tabs-section {
    padding-top: 34px !important;
    padding-bottom: 34px !important;
  }

  .selection-tabs-section .container {
    max-width: 1240px !important;
  }

  .selection-tabs {
    max-width: 1160px !important;
    margin-bottom: 18px !important;
    gap: 12px !important;
  }

  .selection-tab {
    min-height: 100px !important;
    padding: 12px !important;
    border-radius: 18px !important;
  }

  .selection-tab img {
    height: 56px !important;
  }

  /*
    Balanced desktop layout:
    Main media should not become a shallow banner.
    Right side gets enough width for larger thumbnails.
  */
  .selection-gallery {
    max-width: 1160px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: grid !important;
    grid-template-columns: minmax(520px, 1.05fr) minmax(430px, 0.95fr) !important;
    gap: 22px !important;
    align-items: stretch !important;
  }

  .selection-feature {
    height: 455px !important;
    max-height: 455px !important;
    min-height: 0 !important;
    background: transparent !important;
  }

  /*
    Important:
    Reels and images fill the whole main media frame again.
    This restores the previous full-thumbnail look.
  */
  .selection-main-video,
  .selection-main-image,
  .selection-video-fallback {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    background: transparent !important;
  }

  .selection-main-video-wrap {
    width: 100% !important;
    height: 100% !important;
  }

  /*
    Disable the failed blurred background styling even if the old class remains
    somewhere because of browser cache.
  */
  .selection-feature.has-portrait-video-bg {
    background: transparent !important;
  }

  .selection-feature.has-portrait-video-bg::before {
    display: none !important;
  }

  .selection-feature.has-portrait-video-bg .selection-main-video {
    object-fit: cover !important;
  }

  /*
    Keep the bottom alignment that is now working.
    Use the empty space below the copy card to make thumbnails bigger.
  */
  .selection-side {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-height: 455px !important;
    align-self: stretch !important;
  }

  .selection-copy {
    margin-bottom: 14px !important;
  }

  .selection-copy h3 {
    font-size: clamp(2rem, 2.4vw, 2.75rem) !important;
    line-height: 1.03 !important;
    margin-bottom: 8px !important;
  }

  .selection-copy p {
    font-size: 0.98rem !important;
    line-height: 1.38 !important;
  }

  /*
    Bigger and wider thumbnails:
    3 columns x 2 rows, aligned with the bottom of the main media.
  */
  .selection-thumbs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-self: stretch !important;
    margin-top: 10px !important;
  }

  .selection-thumb {
    height: 124px !important;
    min-height: 0 !important;
    border-radius: 15px !important;
  }

  .selection-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
}

/* Laptop screens */
@media (min-width: 981px) and (max-height: 820px) {

  .selection-tabs-section {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }

  .selection-tabs {
    margin-bottom: 16px !important;
  }

  .selection-tab {
    min-height: 94px !important;
  }

  .selection-tab img {
    height: 52px !important;
  }

  .selection-feature {
    height: 430px !important;
    max-height: 430px !important;
  }

  .selection-side {
    min-height: 430px !important;
  }

  .selection-thumb {
    height: 116px !important;
  }
}

/* Very short laptop browser windows */
@media (min-width: 981px) and (max-height: 720px) {

  .selection-tabs-section {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  .selection-tabs {
    margin-bottom: 14px !important;
  }

  .selection-tab {
    min-height: 88px !important;
  }

  .selection-tab img {
    height: 48px !important;
  }

  .selection-feature {
    height: 405px !important;
    max-height: 405px !important;
  }

  .selection-side {
    min-height: 405px !important;
  }

  .selection-thumb {
    height: 106px !important;
  }
}


/* =========================================================
   L'abeille D'or - Brand Reel Screen Fit v1
   Makes the brand-reel section behave like a full visual screen stop
   on laptop/desktop, without touching the finished phone layout.
   ========================================================= */

@media (min-width: 981px) {

  .brand-reel-section {
    min-height: calc(100vh - 86px) !important;
    padding-top: 54px !important;
    padding-bottom: 54px !important;
    display: flex !important;
    align-items: center !important;
  }

  .brand-reel-section .container,
  .brand-reel-inner {
    width: 100% !important;
  }

  .brand-reel-inner {
    max-width: 1240px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: grid !important;
    grid-template-columns: minmax(360px, 0.78fr) minmax(640px, 1.22fr) !important;
    gap: 34px !important;
    align-items: center !important;
  }

  .brand-reel-copy {
    max-width: 420px !important;
  }

  .brand-reel-copy h2 {
    font-size: clamp(2.35rem, 3vw, 3.65rem) !important;
    line-height: 1.02 !important;
    margin-bottom: 12px !important;
  }

  .brand-reel-copy p {
    font-size: 1rem !important;
    line-height: 1.48 !important;
    margin-bottom: 0 !important;
  }

  .brand-reel-videos {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    align-items: stretch !important;
  }

  .brand-reel-frame {
    height: min(560px, 66vh) !important;
    min-height: 460px !important;
    border-radius: 26px !important;
  }

  .brand-reel-video,
  .brand-reel-fallback {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
}

/* Laptop screens: keep full-section feeling without making reels too tall */
@media (min-width: 981px) and (max-height: 820px) {

  .brand-reel-section {
    min-height: calc(100vh - 76px) !important;
    padding-top: 42px !important;
    padding-bottom: 42px !important;
  }

  .brand-reel-inner {
    max-width: 1180px !important;
    grid-template-columns: minmax(340px, 0.75fr) minmax(610px, 1.25fr) !important;
    gap: 28px !important;
  }

  .brand-reel-copy h2 {
    font-size: clamp(2.1rem, 2.65vw, 3.15rem) !important;
  }

  .brand-reel-copy p {
    font-size: 0.96rem !important;
    line-height: 1.42 !important;
  }

  .brand-reel-frame {
    height: min(520px, 64vh) !important;
    min-height: 420px !important;
  }
}

/* Very short laptop browser windows */
@media (min-width: 981px) and (max-height: 720px) {

  .brand-reel-section {
    min-height: calc(100vh - 70px) !important;
    padding-top: 34px !important;
    padding-bottom: 34px !important;
  }

  .brand-reel-inner {
    gap: 24px !important;
  }

  .brand-reel-frame {
    height: min(470px, 62vh) !important;
    min-height: 380px !important;
  }
}


/* =========================================================
   L'abeille D'or - Brand Reel Top Align + Screen Fit v2
   Aligns brand reels with the copy/headline area and lets them
   use more vertical screen space on laptop/desktop.
   Phone layout remains untouched.
   ========================================================= */

@media (min-width: 981px) {

  .brand-reel-section {
    min-height: calc(100vh - 74px) !important;
    padding-top: 48px !important;
    padding-bottom: 42px !important;
    display: flex !important;
    align-items: stretch !important;
  }

  .brand-reel-section .container {
    width: 100% !important;
    display: flex !important;
    align-items: stretch !important;
  }

  .brand-reel-inner {
    width: 100% !important;
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: grid !important;
    grid-template-columns: minmax(360px, 0.72fr) minmax(700px, 1.28fr) !important;
    gap: 34px !important;
    align-items: stretch !important;
  }

  /*
    Keep the text aligned to the top instead of vertically centering it.
    This lets the reels start closer to the headline height.
  */
  .brand-reel-copy {
    align-self: start !important;
    max-width: 460px !important;
    padding-top: 6px !important;
  }

  .brand-reel-copy h2 {
    font-size: clamp(2.35rem, 3vw, 3.7rem) !important;
    line-height: 1.02 !important;
    margin-bottom: 14px !important;
  }

  .brand-reel-copy p {
    font-size: 1rem !important;
    line-height: 1.46 !important;
    max-width: 430px !important;
  }

  /*
    Reels align to the top and stretch down toward the bottom of the screen.
  */
  .brand-reel-videos {
    align-self: stretch !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    align-items: stretch !important;
  }

  .brand-reel-frame {
    height: calc(100vh - 230px) !important;
    min-height: 520px !important;
    max-height: 680px !important;
    border-radius: 26px !important;
    align-self: stretch !important;
  }

  .brand-reel-video,
  .brand-reel-fallback {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
}

/* Laptop screens */
@media (min-width: 981px) and (max-height: 820px) {

  .brand-reel-section {
    min-height: calc(100vh - 70px) !important;
    padding-top: 38px !important;
    padding-bottom: 34px !important;
  }

  .brand-reel-inner {
    max-width: 1220px !important;
    grid-template-columns: minmax(350px, 0.72fr) minmax(680px, 1.28fr) !important;
    gap: 30px !important;
  }

  .brand-reel-copy h2 {
    font-size: clamp(2.15rem, 2.7vw, 3.25rem) !important;
  }

  .brand-reel-copy p {
    font-size: 0.96rem !important;
    line-height: 1.42 !important;
  }

  .brand-reel-frame {
    height: calc(100vh - 205px) !important;
    min-height: 500px !important;
    max-height: 620px !important;
  }
}

/* Very short laptop browser windows */
@media (min-width: 981px) and (max-height: 720px) {

  .brand-reel-section {
    padding-top: 32px !important;
    padding-bottom: 28px !important;
  }

  .brand-reel-inner {
    gap: 26px !important;
  }

  .brand-reel-frame {
    height: calc(100vh - 185px) !important;
    min-height: 450px !important;
    max-height: 560px !important;
  }
}


/* =========================================================
   L'abeille D'or - Brand Reel 3-Column + Overlay v1
   Adds room for a third reel and a click-to-enlarge reel viewer.
   ========================================================= */

@media (min-width: 981px) {

  .brand-reel-inner {
    max-width: 1420px !important;
    grid-template-columns: minmax(300px, 0.58fr) minmax(900px, 1.42fr) !important;
    gap: 28px !important;
  }

  .brand-reel-copy {
    max-width: 390px !important;
  }

  .brand-reel-copy h2 {
    font-size: clamp(2.15rem, 2.65vw, 3.35rem) !important;
  }

  .brand-reel-copy p {
    max-width: 360px !important;
  }

  .brand-reel-videos {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  .brand-reel-frame {
    cursor: pointer !important;
    height: calc(100vh - 205px) !important;
    min-height: 500px !important;
    max-height: 660px !important;
    transition: transform 220ms ease, filter 220ms ease !important;
  }

  .brand-reel-frame:hover {
    transform: translateY(-4px) scale(1.01) !important;
    filter: brightness(1.03) !important;
  }
}

@media (min-width: 981px) and (max-height: 820px) {

  .brand-reel-inner {
    max-width: 1340px !important;
    grid-template-columns: minmax(285px, 0.56fr) minmax(850px, 1.44fr) !important;
    gap: 24px !important;
  }

  .brand-reel-frame {
    height: calc(100vh - 190px) !important;
    min-height: 455px !important;
    max-height: 610px !important;
  }
}

@media (min-width: 981px) and (max-height: 720px) {

  .brand-reel-frame {
    height: calc(100vh - 170px) !important;
    min-height: 410px !important;
    max-height: 540px !important;
  }
}

/* Overlay viewer */

.brand-reel-lightbox {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 28px !important;
}

.brand-reel-lightbox.is-hidden {
  display: none !important;
}

.brand-reel-lightbox-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(42, 27, 20, 0.58) !important;
  backdrop-filter: blur(8px) !important;
}

.brand-reel-lightbox-panel {
  position: relative !important;
  z-index: 1 !important;
  height: min(86vh, 760px) !important;
  aspect-ratio: 9 / 16 !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  background: #1f1713 !important;
  box-shadow: 0 30px 90px rgba(42, 27, 20, 0.42) !important;
  transform: scale(1) !important;
  animation: brandReelLightboxIn 220ms ease-out both !important;
}

.brand-reel-lightbox-video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.brand-reel-lightbox-close {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 3 !important;
  width: 42px !important;
  height: 42px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(42, 27, 20, 0.72) !important;
  color: #fff !important;
  font-size: 30px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

.brand-reel-lightbox-sound {
  position: absolute !important;
  right: 16px !important;
  bottom: 16px !important;
  z-index: 3 !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 10px 18px !important;
  background: rgba(42, 27, 20, 0.72) !important;
  color: #fff !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

body.brand-reel-lightbox-open {
  overflow: hidden !important;
}

@keyframes brandReelLightboxIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Mobile overlay safety */
@media (max-width: 640px) {
  .brand-reel-lightbox {
    padding: 18px !important;
  }

  .brand-reel-lightbox-panel {
    height: min(82vh, 720px) !important;
    max-width: 92vw !important;
  }
}


/* =========================================================
   L'abeille D'or - Selection Nav Image Visibility v1
   Makes category nav images more visible while keeping labels readable.
   ========================================================= */

.selection-tab {
  position: relative !important;
  overflow: hidden !important;
}

/* Reduce the dark cover so the background image shows better */
.selection-tab::before {
  background: linear-gradient(
    rgba(35, 22, 15, 0.48),
    rgba(35, 22, 15, 0.58)
  ) !important;
}

/* Keep text readable */
.selection-tab span {
  position: relative !important;
  z-index: 3 !important;
  color: #fffaf1 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55) !important;
}

/* Active tab can stay slightly stronger */
.selection-tab.is-active::before {
  background: linear-gradient(
    rgba(35, 22, 15, 0.38),
    rgba(35, 22, 15, 0.50)
  ) !important;
}

/* Optional subtle image lift on hover */
.selection-tab:hover::before {
  background: linear-gradient(
    rgba(35, 22, 15, 0.34),
    rgba(35, 22, 15, 0.48)
  ) !important;
}


/* =========================================================
   L'abeille D'or - Selection Nav Image Visibility v1
   Makes category nav images more visible while keeping labels readable.
   ========================================================= */

.selection-tab {
  position: relative !important;
  overflow: hidden !important;
}

/* Reduce the dark cover so the background image shows better */
.selection-tab::before {
  background: linear-gradient(
    rgba(35, 22, 15, 0.48),
    rgba(35, 22, 15, 0.58)
  ) !important;
}

/* Keep text readable */
.selection-tab span {
  position: relative !important;
  z-index: 3 !important;
  color: #fffaf1 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55) !important;
}

/* Active tab can stay slightly stronger */
.selection-tab.is-active::before {
  background: linear-gradient(
    rgba(35, 22, 15, 0.38),
    rgba(35, 22, 15, 0.50)
  ) !important;
}

/* Optional subtle image lift on hover */
.selection-tab:hover::before {
  background: linear-gradient(
    rgba(35, 22, 15, 0.34),
    rgba(35, 22, 15, 0.48)
  ) !important;
}


/* =========================================================
   L'abeille D'or - Selection Nav Brighter Images v2
   Makes Selection nav tile images clearly visible.
   ========================================================= */

/* Make the actual nav tile image brighter */
.selection-tab img {
  opacity: 1 !important;
  filter: brightness(1.22) contrast(1.04) saturate(1.08) !important;
}

/* Much lighter dark layer over the image */
.selection-tab::before {
  background: linear-gradient(
    rgba(35, 22, 15, 0.22),
    rgba(35, 22, 15, 0.34)
  ) !important;
}

/* Active button: visible image, slightly premium darker finish */
.selection-tab.is-active::before {
  background: linear-gradient(
    rgba(35, 22, 15, 0.18),
    rgba(35, 22, 15, 0.30)
  ) !important;
}

/* Hover: image becomes even clearer */
.selection-tab:hover::before {
  background: linear-gradient(
    rgba(35, 22, 15, 0.12),
    rgba(35, 22, 15, 0.24)
  ) !important;
}

/* Text stays readable even with lighter overlay */
.selection-tab span {
  position: relative !important;
  z-index: 5 !important;
  color: #fffaf1 !important;
  text-shadow:
    0 2px 5px rgba(0, 0, 0, 0.78),
    0 0 14px rgba(0, 0, 0, 0.45) !important;
}

/* Remove any extra dark overlay if an older pseudo-layer exists */
.selection-tab::after {
  background: transparent !important;
  opacity: 0 !important;
}

/* =========================================================
   L'abeille D'or - Our Knefe Visual Redesign v2
   Aligns standalone Knefe section with current premium page style
   ========================================================= */

.knefe-story-section {
  width: min(100% - 48px, 1180px) !important;
  margin: 0 auto 56px !important;
  padding: 42px 46px !important;
  display: grid !important;
  grid-template-columns: minmax(360px, 0.95fr) minmax(320px, 0.78fr) !important;
  gap: 42px !important;
  align-items: center !important;
  border-radius: 38px !important;
  background:
    radial-gradient(circle at 18% 48%, rgba(219, 174, 91, 0.20), transparent 34%),
    linear-gradient(135deg, rgba(255, 250, 242, 0.78), rgba(246, 234, 216, 0.56)) !important;
  border: 1px solid rgba(198, 146, 62, 0.10) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.knefe-story-media {
  min-height: 360px !important;
  height: 360px !important;
  overflow: visible !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at center, rgba(220, 176, 91, 0.24), transparent 58%) !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.knefe-story-media img {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 0 !important;
  filter: drop-shadow(0 22px 28px rgba(74, 47, 34, 0.16)) !important;
}

.knefe-story-content {
  max-width: 500px !important;
  justify-self: start !important;
}

.knefe-story-content .eyebrow {
  display: block !important;
  margin-bottom: 10px !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 0.68rem !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #a87524 !important;
}

.knefe-story-content h2 {
  margin: 0 0 12px !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: clamp(1.95rem, 3.15vw, 3.35rem) !important;
  line-height: 1.08 !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  color: #2f2118 !important;
}

.knefe-story-content p:not(.eyebrow) {
  margin: 0 !important;
  max-width: 470px !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: clamp(0.88rem, 0.95vw, 0.96rem) !important;
  line-height: 1.62 !important;
  font-weight: 500 !important;
  color: #6e5c50 !important;
}

.knefe-story-content .text-link {
  margin-top: 22px !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.04em !important;
  font-weight: 700 !important;
  color: #4a2f22 !important;
  border-bottom: 1px solid rgba(198, 146, 62, 0.55) !important;
  padding-bottom: 5px !important;
}

.knefe-story-content .text-link:hover {
  color: #a87524 !important;
}

@media (min-width: 981px) and (max-height: 780px) {
  .knefe-story-section {
    padding-top: 34px !important;
    padding-bottom: 34px !important;
    margin-bottom: 46px !important;
  }

  .knefe-story-media {
    height: 320px !important;
    min-height: 320px !important;
  }
}

@media (max-width: 980px) {
  .knefe-story-section {
    width: min(100% - 32px, 760px) !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding: 34px !important;
    margin-bottom: 64px !important;
  }

  .knefe-story-media {
    height: 340px !important;
    min-height: 340px !important;
  }

  .knefe-story-content {
    max-width: 680px !important;
  }

  .knefe-story-content p:not(.eyebrow) {
    max-width: 620px !important;
  }
}

@media (max-width: 640px) {
  .knefe-story-section {
    width: min(100% - 24px, 520px) !important;
    padding: 24px 22px 28px !important;
    border-radius: 30px !important;
    gap: 22px !important;
    margin-bottom: 56px !important;
  }

  .knefe-story-media {
    height: 270px !important;
    min-height: 270px !important;
    border-radius: 24px !important;
  }

  .knefe-story-content h2 {
    font-size: clamp(1.65rem, 6.4vw, 2.35rem) !important;
    line-height: 1.12 !important;
  }

  .knefe-story-content p:not(.eyebrow) {
    font-size: 0.88rem !important;
    line-height: 1.58 !important;
  }

  .knefe-story-content .text-link {
    margin-top: 18px !important;
  }
}

/* =========================================================
   L'abeille D'or - Our Knefe Visual Tune v3
   Softer page blend, stronger image presence, rounded media feel
   ========================================================= */

.knefe-story-section {
  margin: 0 auto 52px !important;
  padding: 38px 44px !important;
  background:
    radial-gradient(circle at 22% 50%, rgba(219, 174, 91, 0.18), transparent 42%),
    linear-gradient(135deg, rgba(255, 250, 242, 0.42), rgba(246, 234, 216, 0.30)) !important;
  border: 1px solid rgba(198, 146, 62, 0.045) !important;
  box-shadow: none !important;
}

.knefe-story-media {
  height: 390px !important;
  min-height: 390px !important;
  border-radius: 34px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at center, rgba(227, 188, 111, 0.30), rgba(255, 250, 242, 0.18) 48%, rgba(255, 250, 242, 0.04) 72%) !important;
}

.knefe-story-media img {
  width: 112% !important;
  height: 112% !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 34px !important;
  transform: scale(1.05) !important;
  filter: drop-shadow(0 24px 30px rgba(74, 47, 34, 0.18)) !important;
}

@media (min-width: 981px) and (max-height: 780px) {
  .knefe-story-media {
    height: 350px !important;
    min-height: 350px !important;
  }

  .knefe-story-media img {
    transform: scale(1.04) !important;
  }
}

@media (max-width: 980px) {
  .knefe-story-section {
    padding: 30px !important;
    background:
      radial-gradient(circle at 50% 18%, rgba(219, 174, 91, 0.16), transparent 42%),
      linear-gradient(135deg, rgba(255, 250, 242, 0.42), rgba(246, 234, 216, 0.28)) !important;
  }

  .knefe-story-media {
    height: 360px !important;
    min-height: 360px !important;
  }
}

@media (max-width: 640px) {
  .knefe-story-section {
    padding: 22px 20px 26px !important;
    border-radius: 28px !important;
    background:
      radial-gradient(circle at 50% 18%, rgba(219, 174, 91, 0.14), transparent 44%),
      linear-gradient(135deg, rgba(255, 250, 242, 0.36), rgba(246, 234, 216, 0.22)) !important;
  }

  .knefe-story-media {
    height: 285px !important;
    min-height: 285px !important;
    border-radius: 26px !important;
  }

  .knefe-story-media img {
    width: 116% !important;
    height: 116% !important;
    border-radius: 26px !important;
    transform: scale(1.06) !important;
  }
}

/* =========================================================
   L'abeille D'or - Our Knefe Visual Tune v3
   Date: 2026-05-27
   Purpose: softer page blend, stronger image presence, rounded media feel
   ========================================================= */

.knefe-story-section {
  margin: 0 auto 52px !important;
  padding: 38px 44px !important;
  background:
    radial-gradient(circle at 22% 50%, rgba(219, 174, 91, 0.18), transparent 42%),
    linear-gradient(135deg, rgba(255, 250, 242, 0.42), rgba(246, 234, 216, 0.30)) !important;
  border: 1px solid rgba(198, 146, 62, 0.045) !important;
  box-shadow: none !important;
}

.knefe-story-media {
  height: 390px !important;
  min-height: 390px !important;
  border-radius: 34px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at center, rgba(227, 188, 111, 0.30), rgba(255, 250, 242, 0.18) 48%, rgba(255, 250, 242, 0.04) 72%) !important;
}

.knefe-story-media img {
  width: 112% !important;
  height: 112% !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 34px !important;
  transform: scale(1.05) !important;
  filter: drop-shadow(0 24px 30px rgba(74, 47, 34, 0.18)) !important;
}

@media (min-width: 981px) and (max-height: 780px) {
  .knefe-story-media {
    height: 350px !important;
    min-height: 350px !important;
  }

  .knefe-story-media img {
    transform: scale(1.04) !important;
  }
}

@media (max-width: 980px) {
  .knefe-story-section {
    padding: 30px !important;
    background:
      radial-gradient(circle at 50% 18%, rgba(219, 174, 91, 0.16), transparent 42%),
      linear-gradient(135deg, rgba(255, 250, 242, 0.42), rgba(246, 234, 216, 0.28)) !important;
  }

  .knefe-story-media {
    height: 360px !important;
    min-height: 360px !important;
  }
}

@media (max-width: 640px) {
  .knefe-story-section {
    padding: 22px 20px 26px !important;
    border-radius: 28px !important;
    background:
      radial-gradient(circle at 50% 18%, rgba(219, 174, 91, 0.14), transparent 44%),
      linear-gradient(135deg, rgba(255, 250, 242, 0.36), rgba(246, 234, 216, 0.22)) !important;
  }

  .knefe-story-media {
    height: 285px !important;
    min-height: 285px !important;
    border-radius: 26px !important;
  }

  .knefe-story-media img {
    width: 116% !important;
    height: 116% !important;
    border-radius: 26px !important;
    transform: scale(1.06) !important;
  }
}

/* =========================================================
   L'abeille D'or - Our Knefe Aesthetic Correction v4
   Date: 2026-05-27
   Purpose: remove visible panel feel, enlarge media, force rounded visual edges
   ========================================================= */

/* Make the section feel like part of the page, not a separate card */
.knefe-story-section {
  width: min(100% - 48px, 1180px) !important;
  margin: 0 auto 54px !important;
  padding: 26px 0 34px !important;
  display: grid !important;
  grid-template-columns: minmax(520px, 1fr) minmax(320px, 0.72fr) !important;
  gap: 46px !important;
  align-items: center !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Turn the photo area into the visual anchor */
.knefe-story-media {
  height: 430px !important;
  min-height: 430px !important;
  width: 100% !important;
  border-radius: 34px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at center, rgba(223, 183, 105, 0.22), rgba(255, 250, 242, 0.55) 52%, rgba(255, 250, 242, 0.18) 100%) !important;
  box-shadow: 0 18px 42px rgba(74, 47, 34, 0.10) !important;
}

/* Force the image to behave like the rounded media used in previous sections */
.knefe-story-media img {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 34px !important;
  transform: none !important;
  filter: none !important;
}

/* Keep the story text refined and compact */
.knefe-story-content {
  max-width: 470px !important;
  justify-self: start !important;
}

.knefe-story-content .eyebrow {
  margin-bottom: 10px !important;
}

.knefe-story-content h2 {
  margin-bottom: 12px !important;
}

.knefe-story-content p:not(.eyebrow) {
  max-width: 455px !important;
  line-height: 1.58 !important;
}

/* Smaller laptop height tuning */
@media (min-width: 981px) and (max-height: 780px) {
  .knefe-story-section {
    padding-top: 18px !important;
    padding-bottom: 26px !important;
    margin-bottom: 46px !important;
  }

  .knefe-story-media {
    height: 370px !important;
    min-height: 370px !important;
  }
}

/* Tablet */
@media (max-width: 980px) {
  .knefe-story-section {
    width: min(100% - 32px, 760px) !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding: 22px 0 30px !important;
    margin-bottom: 62px !important;
  }

  .knefe-story-media {
    height: 390px !important;
    min-height: 390px !important;
    border-radius: 32px !important;
  }

  .knefe-story-media img {
    border-radius: 32px !important;
  }

  .knefe-story-content {
    max-width: 660px !important;
  }

  .knefe-story-content p:not(.eyebrow) {
    max-width: 620px !important;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .knefe-story-section {
    width: min(100% - 24px, 520px) !important;
    gap: 22px !important;
    padding: 16px 0 24px !important;
    margin-bottom: 54px !important;
  }

  .knefe-story-media {
    height: 315px !important;
    min-height: 315px !important;
    border-radius: 28px !important;
  }

  .knefe-story-media img {
    border-radius: 28px !important;
    object-position: center !important;
  }

  .knefe-story-content {
    max-width: 100% !important;
  }

  .knefe-story-content p:not(.eyebrow) {
    max-width: 100% !important;
  }
}

/* =========================================================
   L'abeille D'or - Our Knefe Image Zoom-Out Tune v5
   Date: 2026-05-27
   Purpose: show more of the current image while keeping rounded media styling
   ========================================================= */

.knefe-story-media {
  height: 440px !important;
  min-height: 440px !important;
}

.knefe-story-media img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 14px 16px !important;
  box-sizing: border-box !important;
  border-radius: 34px !important;
  background: transparent !important;
}

/* Smaller laptop screens */
@media (min-width: 981px) and (max-height: 780px) {
  .knefe-story-media {
    height: 390px !important;
    min-height: 390px !important;
  }

  .knefe-story-media img {
    padding: 12px 14px !important;
  }
}

/* Tablet */
@media (max-width: 980px) {
  .knefe-story-media {
    height: 400px !important;
    min-height: 400px !important;
  }

  .knefe-story-media img {
    padding: 12px 14px !important;
    border-radius: 32px !important;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .knefe-story-media {
    height: 320px !important;
    min-height: 320px !important;
  }

  .knefe-story-media img {
    padding: 10px 12px !important;
    border-radius: 28px !important;
  }
}

/* =========================================================
   L'abeille D'or - Our Knefe Restore v4 Look v6
   Date: 2026-05-27
   Purpose: undo v5 framed/portrait effect and restore full rounded media behavior
   ========================================================= */

.knefe-story-media {
  height: 430px !important;
  min-height: 430px !important;
  border-radius: 34px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at center, rgba(223, 183, 105, 0.22), rgba(255, 250, 242, 0.55) 52%, rgba(255, 250, 242, 0.18) 100%) !important;
  box-shadow: 0 18px 42px rgba(74, 47, 34, 0.10) !important;
}

.knefe-story-media img {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center center !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  border-radius: 34px !important;
  background: transparent !important;
  transform: none !important;
  filter: none !important;
}

/* Smaller laptop screens */
@media (min-width: 981px) and (max-height: 780px) {
  .knefe-story-media {
    height: 370px !important;
    min-height: 370px !important;
  }

  .knefe-story-media img {
    padding: 0 !important;
    object-fit: cover !important;
  }
}

/* Tablet */
@media (max-width: 980px) {
  .knefe-story-media {
    height: 390px !important;
    min-height: 390px !important;
    border-radius: 32px !important;
  }

  .knefe-story-media img {
    padding: 0 !important;
    object-fit: cover !important;
    border-radius: 32px !important;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .knefe-story-media {
    height: 315px !important;
    min-height: 315px !important;
    border-radius: 28px !important;
  }

  .knefe-story-media img {
    padding: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 28px !important;
  }
}

/* =========================================================
   L'abeille D'or - Our Knefe Screen Fit v7
   Date: 2026-05-27
   Purpose: pull section closer to Brand Reel and make it land as a full story view
   ========================================================= */

@media (min-width: 981px) {
  .knefe-story-section {
    margin-top: -18px !important;
    margin-bottom: 34px !important;
    min-height: calc(100vh - 156px) !important;
    padding-top: 18px !important;
    padding-bottom: 28px !important;
    align-content: center !important;
  }

  .knefe-story-media {
    height: min(52vh, 470px) !important;
    min-height: 390px !important;
  }

  .knefe-story-content {
    align-self: center !important;
  }
}

/* Smaller laptop screens */
@media (min-width: 981px) and (max-height: 780px) {
  .knefe-story-section {
    margin-top: -22px !important;
    min-height: calc(100vh - 142px) !important;
    padding-top: 12px !important;
    padding-bottom: 20px !important;
  }

  .knefe-story-media {
    height: min(50vh, 390px) !important;
    min-height: 350px !important;
  }
}

/* Do not force full-screen behavior on tablets/mobile */
@media (max-width: 980px) {
  .knefe-story-section {
    margin-top: 0 !important;
    min-height: 0 !important;
  }
}

/* =========================================================
   L'abeille D'or - Our Knefe Spacing + Mobile Order v8
   Date: 2026-05-27
   Purpose: reduce gap after Brand Reel and show story text before image on mobile
   ========================================================= */

/* Desktop/laptop: reduce the visual gap before Our Knefe */
@media (min-width: 981px) {
  .brand-reel-section {
    margin-bottom: 18px !important;
  }

  .knefe-story-section {
    margin-top: -56px !important;
    margin-bottom: 34px !important;
    min-height: calc(100vh - 156px) !important;
    padding-top: 10px !important;
    padding-bottom: 28px !important;
    align-content: center !important;
  }

  .knefe-story-media {
    height: min(52vh, 470px) !important;
    min-height: 390px !important;
  }
}

/* Smaller laptop screens: tighter vertical rhythm */
@media (min-width: 981px) and (max-height: 780px) {
  .brand-reel-section {
    margin-bottom: 10px !important;
  }

  .knefe-story-section {
    margin-top: -66px !important;
    min-height: calc(100vh - 142px) !important;
    padding-top: 6px !important;
    padding-bottom: 20px !important;
  }

  .knefe-story-media {
    height: min(50vh, 390px) !important;
    min-height: 350px !important;
  }
}

/* Tablet/mobile: keep normal scrolling and put story first */
@media (max-width: 980px) {
  .knefe-story-section {
    display: flex !important;
    flex-direction: column !important;
    margin-top: 0 !important;
    min-height: 0 !important;
  }

  .knefe-story-content {
    order: 1 !important;
  }

  .knefe-story-media {
    order: 2 !important;
  }
}

/* Mobile: slightly tighter story flow */
@media (max-width: 640px) {
  .knefe-story-section {
    gap: 20px !important;
  }

  .knefe-story-content {
    text-align: left !important;
  }
}

/* =========================================================
   L'abeille D'or - Our Knefe Spacing + Story Cleanup v9
   Date: 2026-05-27
   Purpose: tighten spacing with Brand Reel, prepare cleaner bottom rhythm, remove CTA dependency
   ========================================================= */

@media (min-width: 981px) {
  .brand-reel-section {
    margin-bottom: 6px !important;
  }

  .knefe-story-section {
    margin-top: -74px !important;
    margin-bottom: 26px !important;
    min-height: calc(100vh - 156px) !important;
    padding-top: 4px !important;
    padding-bottom: 26px !important;
  }

  .knefe-story-content .text-link {
    display: none !important;
  }
}

@media (min-width: 981px) and (max-height: 780px) {
  .brand-reel-section {
    margin-bottom: 2px !important;
  }

  .knefe-story-section {
    margin-top: -82px !important;
    margin-bottom: 22px !important;
    min-height: calc(100vh - 142px) !important;
    padding-top: 2px !important;
    padding-bottom: 20px !important;
  }
}

@media (max-width: 980px) {
  .knefe-story-content .text-link {
    display: none !important;
  }
}

@media (max-width: 640px) {
  .knefe-story-section {
    margin-bottom: 50px !important;
  }
}

/* =========================================================
   L'abeille D'or - Our Knefe Editorial Media v10
   Date: 2026-05-27
   Purpose: make the story media taller and more editorial while preserving full-screen rhythm
   ========================================================= */

@media (min-width: 981px) {
  .knefe-story-section {
    margin-top: -68px !important;
    margin-bottom: 18px !important;
    min-height: calc(100vh - 142px) !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
    grid-template-columns: minmax(560px, 1.08fr) minmax(340px, 0.72fr) !important;
    gap: 48px !important;
    align-items: center !important;
  }

  .knefe-story-media {
    height: clamp(460px, calc(100vh - 210px), 620px) !important;
    min-height: 460px !important;
    border-radius: 36px !important;
  }

  .knefe-story-media img {
    border-radius: 36px !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  .knefe-story-content {
    max-width: 520px !important;
  }

  .knefe-story-content p:not(.eyebrow) {
    max-width: 500px !important;
  }
}

/* Smaller laptop screens */
@media (min-width: 981px) and (max-height: 780px) {
  .knefe-story-section {
    margin-top: -72px !important;
    margin-bottom: 14px !important;
    min-height: calc(100vh - 132px) !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  .knefe-story-media {
    height: clamp(390px, calc(100vh - 180px), 500px) !important;
    min-height: 390px !important;
    border-radius: 32px !important;
  }

  .knefe-story-media img {
    border-radius: 32px !important;
  }
}

/* Keep tablet/mobile from becoming oversized */
@media (max-width: 980px) {
  .knefe-story-media {
    height: 390px !important;
    min-height: 390px !important;
  }
}

@media (max-width: 640px) {
  .knefe-story-media {
    height: 315px !important;
    min-height: 315px !important;
  }
}

/* =========================================================
   L'abeille D'or - Our Knefe Spacing Correction v11
   Date: 2026-05-27
   Purpose: keep taller editorial media but stop Brand Reel thumbnails from peeking above
   ========================================================= */

@media (min-width: 981px) {
  .brand-reel-section {
    margin-bottom: 18px !important;
  }

  .knefe-story-section {
    margin-top: -42px !important;
    margin-bottom: 18px !important;
    min-height: calc(100vh - 142px) !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }

  .knefe-story-media {
    height: clamp(440px, calc(100vh - 220px), 600px) !important;
    min-height: 440px !important;
  }
}

/* Smaller laptop screens */
@media (min-width: 981px) and (max-height: 780px) {
  .brand-reel-section {
    margin-bottom: 14px !important;
  }

  .knefe-story-section {
    margin-top: -46px !important;
    margin-bottom: 16px !important;
    min-height: calc(100vh - 132px) !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  .knefe-story-media {
    height: clamp(380px, calc(100vh - 190px), 480px) !important;
    min-height: 380px !important;
  }
}

/* =========================================================
   L'abeille D'or - Our Knefe Story Thumbnails v12
   Date: 2026-05-27
   Purpose: move story copy upward and add 3 future thumbnail slots
   ========================================================= */

@media (min-width: 981px) {
  .knefe-story-content {
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding-top: clamp(18px, 4vh, 42px) !important;
    max-width: 540px !important;
  }

  .knefe-story-content p:not(.eyebrow) {
    max-width: 520px !important;
  }
}

.knefe-story-thumbs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-top: clamp(24px, 5vh, 46px) !important;
  width: 100% !important;
}

.knefe-story-thumb {
  margin: 0 !important;
  min-width: 0 !important;
}

.knefe-story-thumb-image {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background:
    linear-gradient(135deg, rgba(255, 250, 242, 0.60), rgba(232, 207, 161, 0.34)),
    var(--story-thumb) center / cover no-repeat !important;
  border: 1px solid rgba(198, 146, 62, 0.14) !important;
  box-shadow: 0 12px 28px rgba(74, 47, 34, 0.08) !important;
}

.knefe-story-thumb figcaption {
  margin-top: 9px !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 0.72rem !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  color: #7a6558 !important;
}

.knefe-story-thumb figcaption strong {
  display: inline-block !important;
  margin-top: 2px !important;
  color: #3c2a20 !important;
  font-weight: 800 !important;
}

/* Smaller laptop screens */
@media (min-width: 981px) and (max-height: 780px) {
  .knefe-story-content {
    padding-top: 18px !important;
  }

  .knefe-story-thumbs {
    margin-top: 26px !important;
    gap: 10px !important;
  }

  .knefe-story-thumb-image {
    border-radius: 16px !important;
  }

  .knefe-story-thumb figcaption {
    font-size: 0.68rem !important;
  }
}

/* Tablet */
@media (max-width: 980px) {
  .knefe-story-content {
    display: block !important;
  }

  .knefe-story-thumbs {
    margin-top: 24px !important;
    gap: 12px !important;
  }

  .knefe-story-thumb-image {
    border-radius: 18px !important;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .knefe-story-thumbs {
    gap: 9px !important;
    margin-top: 22px !important;
  }

  .knefe-story-thumb-image {
    border-radius: 15px !important;
  }

  .knefe-story-thumb figcaption {
    font-size: 0.63rem !important;
    line-height: 1.22 !important;
    margin-top: 7px !important;
  }
}

/* =========================================================
   L'abeille D'or - Occasions Editorial Section v1
   Date: 2026-05-27
   Purpose: align occasions section with current premium visual language
   ========================================================= */

.occasion-section {
  width: min(100% - 48px, 1180px) !important;
  margin: 0 auto 58px !important;
  padding: 54px 52px !important;
  display: grid !important;
  grid-template-columns: minmax(340px, 0.82fr) minmax(460px, 1fr) !important;
  gap: 54px !important;
  align-items: center !important;
  border-radius: 38px !important;
  background:
    radial-gradient(circle at 78% 18%, rgba(219, 174, 91, 0.16), transparent 34%),
    linear-gradient(135deg, rgba(255, 250, 242, 0.54), rgba(246, 234, 216, 0.34)) !important;
  border: 1px solid rgba(198, 146, 62, 0.07) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.occasion-content {
  max-width: 500px !important;
}

.occasion-content .eyebrow {
  display: block !important;
  margin-bottom: 10px !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 0.68rem !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #a87524 !important;
}

.occasion-content h2 {
  margin: 0 0 12px !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: clamp(1.95rem, 3.15vw, 3.35rem) !important;
  line-height: 1.08 !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  color: #2f2118 !important;
}

.occasion-content p:not(.eyebrow) {
  margin: 0 !important;
  max-width: 480px !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: clamp(0.88rem, 0.95vw, 0.96rem) !important;
  line-height: 1.62 !important;
  font-weight: 500 !important;
  color: #6e5c50 !important;
}

.occasion-content .btn.primary {
  margin-top: 26px !important;
}

.occasion-images {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.58fr) !important;
  gap: 18px !important;
  align-items: end !important;
  min-height: 420px !important;
}

.occasion-images img {
  width: 100% !important;
  display: block !important;
  object-fit: cover !important;
  border-radius: 32px !important;
  box-shadow: 0 18px 42px rgba(74, 47, 34, 0.10) !important;
}

.occasion-images img:first-child {
  height: 420px !important;
}

.occasion-images img:last-child {
  height: 310px !important;
  transform: translateY(-28px) !important;
  border-radius: 28px !important;
}

@media (min-width: 981px) and (max-height: 780px) {
  .occasion-section {
    padding-top: 42px !important;
    padding-bottom: 42px !important;
    margin-bottom: 46px !important;
  }

  .occasion-images {
    min-height: 360px !important;
  }

  .occasion-images img:first-child {
    height: 360px !important;
  }

  .occasion-images img:last-child {
    height: 270px !important;
    transform: translateY(-22px) !important;
  }
}

@media (max-width: 980px) {
  .occasion-section {
    width: min(100% - 32px, 760px) !important;
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 38px 34px !important;
    margin-bottom: 64px !important;
  }

  .occasion-content {
    max-width: 680px !important;
  }

  .occasion-content p:not(.eyebrow) {
    max-width: 620px !important;
  }

  .occasion-images {
    grid-template-columns: 1fr 0.72fr !important;
    min-height: 340px !important;
  }

  .occasion-images img:first-child {
    height: 340px !important;
  }

  .occasion-images img:last-child {
    height: 255px !important;
    transform: translateY(-18px) !important;
  }
}

@media (max-width: 640px) {
  .occasion-section {
    width: min(100% - 24px, 520px) !important;
    padding: 28px 22px !important;
    border-radius: 30px !important;
    gap: 26px !important;
    margin-bottom: 56px !important;
  }

  .occasion-content h2 {
    font-size: clamp(1.65rem, 6.4vw, 2.35rem) !important;
    line-height: 1.12 !important;
  }

  .occasion-content p:not(.eyebrow) {
    font-size: 0.88rem !important;
    line-height: 1.58 !important;
  }

  .occasion-content .btn.primary {
    width: 100% !important;
    margin-top: 22px !important;
  }

  .occasion-images {
    grid-template-columns: 1fr 0.78fr !important;
    gap: 12px !important;
    min-height: 255px !important;
  }

  .occasion-images img {
    border-radius: 24px !important;
  }

  .occasion-images img:first-child {
    height: 255px !important;
  }

  .occasion-images img:last-child {
    height: 195px !important;
    transform: translateY(-14px) !important;
    border-radius: 22px !important;
  }
}

/* =========================================================
   L'abeille D'or - Occasions Atelier Grouped Showcase v1
   Date: 2026-05-27
   Purpose: elegant grouped occasions showcase with tabs and media lightbox
   ========================================================= */

.occasion-atelier-section {
  width: min(100% - 48px, 1180px) !important;
  margin: 0 auto 64px !important;
  padding: 38px 0 54px !important;
  scroll-margin-top: 142px !important;
}

.occasion-atelier-heading {
  max-width: 780px !important;
  margin-bottom: 20px !important;
}

.occasion-atelier-heading .eyebrow {
  display: block !important;
  margin-bottom: 10px !important;
}

.occasion-atelier-heading h2 {
  margin: 0 0 10px !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: clamp(1.95rem, 3.15vw, 3.35rem) !important;
  line-height: 1.08 !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  color: #2f2118 !important;
}

.occasion-atelier-heading p:not(.eyebrow) {
  margin: 0 !important;
  max-width: 760px !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: clamp(0.88rem, 0.95vw, 0.96rem) !important;
  line-height: 1.58 !important;
  font-weight: 500 !important;
  color: #6e5c50 !important;
}

.occasion-atelier-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-bottom: 22px !important;
}

.occasion-tab {
  min-height: 40px !important;
  padding: 10px 15px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(198, 146, 62, 0.20) !important;
  background: rgba(255, 250, 243, 0.54) !important;
  color: #4a2f22 !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
}

.occasion-tab:hover {
  transform: translateY(-1px) !important;
  background: rgba(255, 250, 243, 0.88) !important;
}

.occasion-tab.is-active {
  color: #fff8ed !important;
  background: #4a2f22 !important;
  border-color: #4a2f22 !important;
  box-shadow: 0 12px 26px rgba(74, 47, 34, 0.16) !important;
}

.occasion-atelier-showcase {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 0.42fr) !important;
  gap: 26px !important;
  align-items: stretch !important;
  min-height: 500px !important;
}

.occasion-feature-card {
  position: relative !important;
  width: 100% !important;
  min-height: 500px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 34px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  background:
    radial-gradient(circle at center, rgba(219, 174, 91, 0.18), rgba(255, 250, 242, 0.30) 54%, rgba(246, 234, 216, 0.18) 100%) !important;
  box-shadow: 0 20px 46px rgba(74, 47, 34, 0.10) !important;
}

.occasion-feature-media,
.occasion-thumb-media,
.occasion-lightbox-media {
  background:
    linear-gradient(135deg, rgba(255, 250, 242, 0.55), rgba(232, 207, 161, 0.28)),
    var(--occasion-image, none) center / cover no-repeat !important;
}

.occasion-feature-media {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  transition: transform 0.45s ease !important;
}

.occasion-feature-card:hover .occasion-feature-media {
  transform: scale(1.025) !important;
}

.occasion-feature-card video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: inherit !important;
}

.occasion-feature-hint {
  position: absolute !important;
  right: 18px !important;
  bottom: 18px !important;
  z-index: 2 !important;
  padding: 9px 13px !important;
  border-radius: 999px !important;
  background: rgba(255, 250, 243, 0.78) !important;
  color: #4a2f22 !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 10px 26px rgba(74, 47, 34, 0.12) !important;
}

.occasion-side-panel {
  border-radius: 32px !important;
  padding: 30px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(219, 174, 91, 0.13), transparent 44%),
    linear-gradient(145deg, rgba(255, 250, 242, 0.62), rgba(246, 234, 216, 0.36)) !important;
  border: 1px solid rgba(198, 146, 62, 0.08) !important;
  display: flex !important;
  flex-direction: column !important;
}

.occasion-side-panel .eyebrow {
  margin-bottom: 10px !important;
}

.occasion-side-panel h3 {
  margin: 0 0 10px !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: clamp(1.35rem, 2vw, 2rem) !important;
  line-height: 1.1 !important;
  font-weight: 500 !important;
  color: #2f2118 !important;
}

.occasion-side-panel p:not(.eyebrow) {
  margin: 0 !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 0.9rem !important;
  line-height: 1.58 !important;
  color: #6e5c50 !important;
  font-weight: 500 !important;
}

.occasion-thumbs {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-top: 24px !important;
  margin-bottom: 24px !important;
}

.occasion-thumb {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  background: transparent !important;
  box-shadow: 0 12px 26px rgba(74, 47, 34, 0.08) !important;
}

.occasion-thumb-media {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
  transition: transform 0.32s ease !important;
}

.occasion-thumb:hover .occasion-thumb-media {
  transform: scale(1.04) !important;
}

.occasion-side-panel .btn.primary {
  margin-top: auto !important;
  width: 100% !important;
}

/* ---------- Lightbox ---------- */

.occasion-lightbox {
  position: fixed !important;
  inset: 0 !important;
  z-index: 120 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 28px !important;
  background: rgba(47, 33, 24, 0.64) !important;
  backdrop-filter: blur(12px) !important;
}

.occasion-lightbox.is-open {
  display: flex !important;
}

.occasion-lightbox-media {
  width: min(92vw, 980px) !important;
  height: min(78vh, 680px) !important;
  border-radius: 34px !important;
  overflow: hidden !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28) !important;
}

.occasion-lightbox-media video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: #211711 !important;
  border-radius: inherit !important;
}

.occasion-lightbox-close {
  position: fixed !important;
  top: 22px !important;
  right: 22px !important;
  z-index: 122 !important;
  min-height: 42px !important;
  padding: 10px 16px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 250, 243, 0.88) !important;
  color: #4a2f22 !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

/* ---------- Smaller laptop tuning ---------- */

@media (min-width: 981px) and (max-height: 780px) {
  .occasion-atelier-section {
    padding-top: 30px !important;
    padding-bottom: 40px !important;
    margin-bottom: 48px !important;
  }

  .occasion-atelier-heading {
    margin-bottom: 14px !important;
  }

  .occasion-atelier-tabs {
    margin-bottom: 16px !important;
  }

  .occasion-atelier-showcase {
    min-height: 410px !important;
  }

  .occasion-feature-card {
    min-height: 410px !important;
  }

  .occasion-side-panel {
    padding: 24px !important;
  }

  .occasion-thumbs {
    margin-top: 18px !important;
    margin-bottom: 18px !important;
  }
}

/* ---------- Tablet ---------- */

@media (max-width: 980px) {
  .occasion-atelier-section {
    width: min(100% - 32px, 760px) !important;
    padding-top: 34px !important;
  }

  .occasion-atelier-showcase {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  .occasion-feature-card {
    min-height: 430px !important;
  }

  .occasion-side-panel {
    padding: 28px !important;
  }

  .occasion-thumbs {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* ---------- Mobile ---------- */

@media (max-width: 640px) {
  .occasion-atelier-section {
    width: min(100% - 24px, 520px) !important;
    padding-top: 28px !important;
    margin-bottom: 56px !important;
  }

  .occasion-atelier-heading h2 {
    font-size: clamp(1.65rem, 6.4vw, 2.35rem) !important;
    line-height: 1.12 !important;
  }

  .occasion-atelier-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding-bottom: 4px !important;
    margin-left: -2px !important;
    margin-right: -2px !important;
  }

  .occasion-tab {
    flex: 0 0 auto !important;
    font-size: 0.72rem !important;
    padding: 9px 13px !important;
  }

  .occasion-feature-card {
    min-height: 315px !important;
    border-radius: 28px !important;
  }

  .occasion-side-panel {
    padding: 24px 22px !important;
    border-radius: 28px !important;
  }

  .occasion-thumbs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .occasion-thumb {
    border-radius: 18px !important;
  }

  .occasion-lightbox {
    padding: 16px !important;
  }

  .occasion-lightbox-media {
    width: 94vw !important;
    height: min(70vh, 520px) !important;
    border-radius: 24px !important;
  }

  .occasion-lightbox-close {
    top: 14px !important;
    right: 14px !important;
  }
}

/* =========================================================
   L'abeille D'or - Occasions Grouped Fit + Media Clarity v2
   Date: 2026-05-27
   Purpose: fit occasions showcase better in one screen and reduce faded thumbnail look
   ========================================================= */

/* ---------- Desktop / laptop fit ---------- */

@media (min-width: 981px) {
  .occasion-atelier-section {
    margin-bottom: 42px !important;
    padding-top: 24px !important;
    padding-bottom: 34px !important;
  }

  .occasion-atelier-heading {
    margin-bottom: 14px !important;
  }

  .occasion-atelier-heading .eyebrow {
    margin-bottom: 7px !important;
  }

  .occasion-atelier-heading h2 {
    margin-bottom: 7px !important;
  }

  .occasion-atelier-heading p:not(.eyebrow) {
    max-width: 740px !important;
    line-height: 1.44 !important;
  }

  .occasion-atelier-tabs {
    margin-bottom: 14px !important;
    gap: 8px !important;
  }

  .occasion-tab {
    min-height: 36px !important;
    padding: 8px 13px !important;
    font-size: 0.74rem !important;
  }

  .occasion-atelier-showcase {
    min-height: 430px !important;
    gap: 22px !important;
  }

  .occasion-feature-card {
    min-height: 430px !important;
    border-radius: 32px !important;
  }

  .occasion-side-panel {
    padding: 24px !important;
    border-radius: 30px !important;
  }

  .occasion-side-panel h3 {
    margin-bottom: 8px !important;
  }

  .occasion-side-panel p:not(.eyebrow) {
    line-height: 1.46 !important;
  }

  .occasion-thumbs {
    gap: 10px !important;
    margin-top: 18px !important;
    margin-bottom: 18px !important;
  }

  .occasion-thumb {
    border-radius: 18px !important;
  }
}

/* Smaller laptop screens */
@media (min-width: 981px) and (max-height: 780px) {
  .occasion-atelier-section {
    padding-top: 18px !important;
    padding-bottom: 28px !important;
    margin-bottom: 34px !important;
  }

  .occasion-atelier-heading {
    margin-bottom: 10px !important;
  }

  .occasion-atelier-heading p:not(.eyebrow) {
    line-height: 1.36 !important;
  }

  .occasion-atelier-tabs {
    margin-bottom: 10px !important;
  }

  .occasion-tab {
    min-height: 34px !important;
    padding: 7px 12px !important;
    font-size: 0.72rem !important;
  }

  .occasion-atelier-showcase {
    min-height: 380px !important;
  }

  .occasion-feature-card {
    min-height: 380px !important;
  }

  .occasion-side-panel {
    padding: 20px !important;
  }

  .occasion-thumbs {
    margin-top: 14px !important;
    margin-bottom: 14px !important;
  }
}

/* ---------- Media clarity: remove faded overlay feel ---------- */

.occasion-feature-media,
.occasion-thumb-media,
.occasion-lightbox-media {
  background:
    var(--occasion-image, none) center / cover no-repeat !important;
}

.occasion-feature-card {
  background:
    radial-gradient(circle at center, rgba(219, 174, 91, 0.12), rgba(255, 250, 242, 0.18) 54%, rgba(246, 234, 216, 0.12) 100%) !important;
}

.occasion-thumb {
  background: rgba(255, 250, 243, 0.35) !important;
}

.occasion-thumb-media {
  opacity: 1 !important;
  filter: none !important;
}

/* Keep a very light premium edge without washing out the photo */
.occasion-feature-card::after,
.occasion-thumb::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  background:
    linear-gradient(to bottom, rgba(255, 250, 242, 0.06), rgba(255, 250, 242, 0.00) 35%, rgba(47, 33, 24, 0.04)) !important;
}

/* ---------- Tablet ---------- */

@media (max-width: 980px) {
  .occasion-atelier-section {
    padding-top: 28px !important;
    margin-bottom: 58px !important;
  }

  .occasion-feature-card {
    min-height: 390px !important;
  }

  .occasion-side-panel {
    padding: 24px !important;
  }
}

/* ---------- Mobile ---------- */

@media (max-width: 640px) {
  .occasion-atelier-section {
    padding-top: 24px !important;
    margin-bottom: 52px !important;
  }

  .occasion-atelier-heading {
    margin-bottom: 14px !important;
  }

  .occasion-feature-card {
    min-height: 285px !important;
  }

  .occasion-side-panel {
    padding: 22px 20px !important;
  }

  .occasion-thumbs {
    margin-top: 18px !important;
    margin-bottom: 18px !important;
  }
}

/* =========================================================
   L'abeille D'or - Occasions 7-Nav Tune v1
   Date: 2026-05-27
   Purpose: support 7 grouped occasion tabs and main reel + 4 image thumbnails
   ========================================================= */

@media (min-width: 981px) {
  .occasion-atelier-tabs {
    gap: 8px !important;
  }

  .occasion-tab {
    min-height: 36px !important;
    padding: 8px 12px !important;
    font-size: 0.72rem !important;
  }
}

@media (max-width: 640px) {
  .occasion-atelier-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  .occasion-atelier-tabs::-webkit-scrollbar {
    display: none !important;
  }

  .occasion-tab {
    flex: 0 0 auto !important;
  }
}

/* =========================================================
   L'abeille D'or - Occasions Side Panel Blend + Alignment v1
   Date: 2026-05-27
   Purpose: blend side content with page background and align CTA with main media bottom
   ========================================================= */

@media (min-width: 981px) {
  .occasion-atelier-showcase {
    align-items: stretch !important;
  }

  .occasion-feature-card,
  .occasion-side-panel {
    min-height: 430px !important;
  }

  .occasion-side-panel {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 12px 4px 4px 6px !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .occasion-side-panel .eyebrow {
    margin-bottom: 9px !important;
  }

  .occasion-side-panel h3 {
    margin-bottom: 9px !important;
  }

  .occasion-side-panel p:not(.eyebrow) {
    line-height: 1.48 !important;
    max-width: 340px !important;
  }

  .occasion-thumbs {
    margin-top: 22px !important;
    margin-bottom: 20px !important;
    gap: 11px !important;
  }

  .occasion-side-panel .btn.primary {
    margin-top: auto !important;
    align-self: stretch !important;
  }
}

/* Smaller laptop screens */
@media (min-width: 981px) and (max-height: 780px) {
  .occasion-feature-card,
  .occasion-side-panel {
    min-height: 380px !important;
  }

  .occasion-side-panel {
    padding-top: 6px !important;
  }

  .occasion-side-panel p:not(.eyebrow) {
    line-height: 1.4 !important;
  }

  .occasion-thumbs {
    margin-top: 14px !important;
    margin-bottom: 14px !important;
    gap: 9px !important;
  }
}

/* Tablet: keep a very soft panel so content remains readable */
@media (max-width: 980px) {
  .occasion-side-panel {
    background:
      linear-gradient(145deg, rgba(255, 250, 242, 0.36), rgba(246, 234, 216, 0.18)) !important;
    border: 1px solid rgba(198, 146, 62, 0.05) !important;
    box-shadow: none !important;
  }
}

/* Mobile: keep the soft card because transparent blocks can look loose on small screens */
@media (max-width: 640px) {
  .occasion-side-panel {
    background:
      linear-gradient(145deg, rgba(255, 250, 242, 0.42), rgba(246, 234, 216, 0.20)) !important;
    border: 1px solid rgba(198, 146, 62, 0.06) !important;
  }
}

/* =========================================================
   L'abeille D'or - Occasions Media Behavior v1
   Date: 2026-05-27
   Purpose: add sound control, keep thumbnails as overlay-only, prevent overlay cropping
   ========================================================= */

/* Sound button on the main occasion reel */
.occasion-sound-toggle {
  position: absolute !important;
  left: 18px !important;
  bottom: 18px !important;
  z-index: 4 !important;
  min-height: 38px !important;
  padding: 9px 13px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 250, 243, 0.82) !important;
  color: #4a2f22 !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 10px 26px rgba(74, 47, 34, 0.12) !important;
}

.occasion-sound-toggle.is-on {
  background: rgba(74, 47, 34, 0.88) !important;
  color: #fff8ed !important;
}

.occasion-sound-toggle[hidden] {
  display: none !important;
}

/* Keep page media cinematic */
.occasion-feature-card video {
  object-fit: cover !important;
}

/* Overlay should show full original media without cropping */
.occasion-lightbox-media {
  background:
    #211711
    var(--occasion-image, none)
    center / contain
    no-repeat !important;
}

.occasion-lightbox-media video {
  object-fit: contain !important;
  background: #211711 !important;
}

/* Slightly cleaner overlay sizing for portrait and landscape media */
@media (min-width: 981px) {
  .occasion-lightbox-media {
    width: min(92vw, 1040px) !important;
    height: min(82vh, 720px) !important;
  }
}

@media (max-width: 640px) {
  .occasion-sound-toggle {
    left: 14px !important;
    bottom: 14px !important;
    min-height: 36px !important;
    padding: 8px 12px !important;
    font-size: 0.68rem !important;
  }

  .occasion-lightbox-media {
    width: 94vw !important;
    height: min(76vh, 560px) !important;
  }
}

/* =========================================================
   L'abeille D'or - Occasions Media Behavior v2
   Date: 2026-05-27
   Purpose: natural overlay sizing, play/pause button, cleaner reel controls
   ========================================================= */

/* Keep feature media cinematic on the page */
.occasion-feature-card video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Place Sound and Play/Pause controls neatly */
.occasion-sound-toggle,
.occasion-play-toggle {
  position: absolute !important;
  bottom: 18px !important;
  z-index: 4 !important;
  min-height: 38px !important;
  padding: 9px 13px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 250, 243, 0.82) !important;
  color: #4a2f22 !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 10px 26px rgba(74, 47, 34, 0.12) !important;
}

.occasion-sound-toggle {
  left: 18px !important;
}

.occasion-play-toggle {
  left: 96px !important;
}

.occasion-sound-toggle.is-on,
.occasion-play-toggle.is-paused {
  background: rgba(74, 47, 34, 0.88) !important;
  color: #fff8ed !important;
}

.occasion-sound-toggle[hidden],
.occasion-play-toggle[hidden] {
  display: none !important;
}

/* Overlay becomes a natural media viewer, not a fixed black photo frame */
.occasion-lightbox-media {
  width: auto !important;
  height: auto !important;
  max-width: 92vw !important;
  max-height: 82vh !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  background: transparent !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28) !important;
}

.occasion-lightbox-media img,
.occasion-lightbox-media video {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 92vw !important;
  max-height: 82vh !important;
  object-fit: contain !important;
  border-radius: 28px !important;
  background: #211711 !important;
}

/* Mobile overlay */
@media (max-width: 640px) {
  .occasion-sound-toggle,
  .occasion-play-toggle {
    bottom: 14px !important;
    min-height: 36px !important;
    padding: 8px 12px !important;
    font-size: 0.68rem !important;
  }

  .occasion-sound-toggle {
    left: 14px !important;
  }

  .occasion-play-toggle {
    left: 88px !important;
  }

  .occasion-lightbox-media,
  .occasion-lightbox-media img,
  .occasion-lightbox-media video {
    max-width: 94vw !important;
    max-height: 76vh !important;
    border-radius: 22px !important;
  }
}

/* =========================================================
   L'abeille D'or - Occasions Reel Controls Spacing v1
   Date: 2026-05-27
   Purpose: prevent Sound/Sound On and Play/Pause buttons from overlapping
   ========================================================= */

/* Put both reel controls in the same bottom-left control row */
.occasion-sound-toggle,
.occasion-play-toggle {
  bottom: 18px !important;
  left: auto !important;
  right: auto !important;
  min-width: 76px !important;
  text-align: center !important;
  white-space: nowrap !important;
}

/* Sound button position */
.occasion-sound-toggle {
  left: 18px !important;
}

/* Play/Pause button sits after Sound with enough room for "Sound On" */
.occasion-play-toggle {
  left: 118px !important;
}

/* Slightly larger spacing on desktop */
@media (min-width: 981px) {
  .occasion-sound-toggle {
    left: 18px !important;
  }

  .occasion-play-toggle {
    left: 124px !important;
  }
}

/* Mobile spacing */
@media (max-width: 640px) {
  .occasion-sound-toggle,
  .occasion-play-toggle {
    bottom: 14px !important;
    min-width: 70px !important;
  }

  .occasion-sound-toggle {
    left: 14px !important;
  }

  .occasion-play-toggle {
    left: 106px !important;
  }
}

/* =========================================================
   L'abeille D'or - Occasions Nav + Media Size Tune v1
   Date: 2026-05-27
   Purpose: slightly reduce occasion nav buttons and main media height
   ========================================================= */

/* Desktop / laptop */
@media (min-width: 981px) {
  .occasion-atelier-tabs {
    gap: 7px !important;
    margin-bottom: 12px !important;
  }

  .occasion-tab {
    min-height: 32px !important;
    padding: 6px 10px !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.01em !important;
  }

  .occasion-atelier-showcase {
    min-height: 400px !important;
  }

  .occasion-feature-card,
  .occasion-side-panel {
    min-height: 400px !important;
  }

  .occasion-feature-card {
    border-radius: 30px !important;
  }

  .occasion-feature-media,
  .occasion-feature-card video {
    border-radius: 30px !important;
  }
}

/* Smaller laptop screens */
@media (min-width: 981px) and (max-height: 780px) {
  .occasion-atelier-tabs {
    gap: 6px !important;
    margin-bottom: 9px !important;
  }

  .occasion-tab {
    min-height: 30px !important;
    padding: 5px 9px !important;
    font-size: 0.66rem !important;
  }

  .occasion-atelier-showcase {
    min-height: 355px !important;
  }

  .occasion-feature-card,
  .occasion-side-panel {
    min-height: 355px !important;
  }
}

/* Tablet */
@media (max-width: 980px) {
  .occasion-tab {
    min-height: 34px !important;
    padding: 7px 11px !important;
    font-size: 0.7rem !important;
  }

  .occasion-feature-card {
    min-height: 370px !important;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .occasion-atelier-tabs {
    gap: 7px !important;
    margin-bottom: 14px !important;
  }

  .occasion-tab {
    min-height: 32px !important;
    padding: 7px 11px !important;
    font-size: 0.68rem !important;
  }

  .occasion-feature-card {
    min-height: 270px !important;
    border-radius: 26px !important;
  }

  .occasion-feature-media,
  .occasion-feature-card video {
    border-radius: 26px !important;
  }
}

/* =========================================================
   L'abeille D'or - Occasions Viewport Fit v2
   Date: 2026-05-27
   Purpose: make occasion nav visible at section start and prevent bottom clipping
   ========================================================= */

/*
  The Occasions section has its own scroll landing now.
  This prevents the sticky header offset from pushing the section too low.
*/
#occasions,
.occasion-atelier-section {
  scroll-margin-top: 116px !important;
}

/* ---------- Desktop / laptop viewport fit ---------- */

@media (min-width: 981px) {
  .occasion-atelier-section {
    padding-top: 14px !important;
    padding-bottom: 24px !important;
    margin-bottom: 32px !important;
  }

  .occasion-atelier-heading {
    margin-bottom: 10px !important;
  }

  .occasion-atelier-heading .eyebrow {
    margin-bottom: 5px !important;
  }

  .occasion-atelier-heading h2 {
    margin-bottom: 5px !important;
  }

  .occasion-atelier-heading p:not(.eyebrow) {
    max-width: 760px !important;
    line-height: 1.34 !important;
  }

  .occasion-atelier-tabs {
    margin-bottom: 10px !important;
    gap: 7px !important;
  }

  .occasion-tab {
    min-height: 30px !important;
    padding: 5px 10px !important;
    font-size: 0.66rem !important;
    line-height: 1.1 !important;
  }

  .occasion-atelier-showcase {
    min-height: 360px !important;
    gap: 20px !important;
    align-items: stretch !important;
  }

  .occasion-feature-card,
  .occasion-side-panel {
    min-height: 360px !important;
  }

  .occasion-feature-card {
    border-radius: 28px !important;
  }

  .occasion-feature-media,
  .occasion-feature-card video {
    border-radius: 28px !important;
  }

  .occasion-side-panel {
    padding-top: 4px !important;
    padding-bottom: 0 !important;
    padding-left: 4px !important;
    padding-right: 2px !important;
  }

  .occasion-side-panel .eyebrow {
    margin-bottom: 6px !important;
  }

  .occasion-side-panel h3 {
    margin-bottom: 6px !important;
    line-height: 1.06 !important;
  }

  .occasion-side-panel p:not(.eyebrow) {
    line-height: 1.34 !important;
    font-size: 0.86rem !important;
  }

  .occasion-thumbs {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
    gap: 9px !important;
  }

  .occasion-thumb {
    border-radius: 16px !important;
  }

  .occasion-side-panel .btn.primary {
    min-height: 42px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    margin-top: auto !important;
  }
}

/* ---------- Smaller laptop screens ---------- */

@media (min-width: 981px) and (max-height: 780px) {
  #occasions,
  .occasion-atelier-section {
    scroll-margin-top: 106px !important;
  }

  .occasion-atelier-section {
    padding-top: 8px !important;
    padding-bottom: 18px !important;
    margin-bottom: 26px !important;
  }

  .occasion-atelier-heading {
    margin-bottom: 8px !important;
  }

  .occasion-atelier-heading p:not(.eyebrow) {
    line-height: 1.28 !important;
  }

  .occasion-atelier-tabs {
    margin-bottom: 8px !important;
  }

  .occasion-tab {
    min-height: 28px !important;
    padding: 5px 9px !important;
    font-size: 0.64rem !important;
  }

  .occasion-atelier-showcase {
    min-height: 330px !important;
  }

  .occasion-feature-card,
  .occasion-side-panel {
    min-height: 330px !important;
  }

  .occasion-side-panel h3 {
    font-size: clamp(1.22rem, 1.65vw, 1.7rem) !important;
  }

  .occasion-side-panel p:not(.eyebrow) {
    font-size: 0.82rem !important;
    line-height: 1.28 !important;
  }

  .occasion-thumbs {
    margin-top: 9px !important;
    margin-bottom: 9px !important;
    gap: 8px !important;
  }

  .occasion-side-panel .btn.primary {
    min-height: 40px !important;
    padding: 9px 14px !important;
  }
}

/* ---------- Tablet ---------- */

@media (max-width: 980px) {
  #occasions,
  .occasion-atelier-section {
    scroll-margin-top: 112px !important;
  }

  .occasion-atelier-section {
    padding-top: 22px !important;
    margin-bottom: 54px !important;
  }

  .occasion-feature-card {
    min-height: 350px !important;
  }
}

/* ---------- Mobile ---------- */

@media (max-width: 640px) {
  #occasions,
  .occasion-atelier-section {
    scroll-margin-top: 96px !important;
  }

  .occasion-atelier-section {
    padding-top: 20px !important;
    margin-bottom: 48px !important;
  }

  .occasion-atelier-heading {
    margin-bottom: 12px !important;
  }

  .occasion-atelier-tabs {
    margin-bottom: 12px !important;
  }

  .occasion-feature-card {
    min-height: 255px !important;
    border-radius: 24px !important;
  }

  .occasion-feature-media,
  .occasion-feature-card video {
    border-radius: 24px !important;
  }

  .occasion-side-panel {
    padding: 20px 18px !important;
  }

  .occasion-thumbs {
    margin-top: 14px !important;
    margin-bottom: 14px !important;
  }

  .occasion-side-panel .btn.primary {
    min-height: 42px !important;
  }
}

/* =========================================================
   L'abeille D'or - Occasions Compact Fit v3
   Date: 2026-05-27
   Purpose: keep occasion nav/content within laptop viewport by reducing media and thumbnail height slightly
   ========================================================= */

/* Desktop / laptop */
@media (min-width: 981px) {
  .occasion-atelier-section {
    padding-top: 12px !important;
    padding-bottom: 18px !important;
    margin-bottom: 28px !important;
  }

  .occasion-atelier-heading {
    margin-bottom: 8px !important;
  }

  .occasion-atelier-heading .eyebrow {
    margin-bottom: 4px !important;
  }

  .occasion-atelier-heading h2 {
    margin-bottom: 4px !important;
  }

  .occasion-atelier-heading p:not(.eyebrow) {
    line-height: 1.3 !important;
  }

  .occasion-atelier-tabs {
    margin-bottom: 8px !important;
  }

  .occasion-atelier-showcase {
    min-height: 318px !important;
    gap: 18px !important;
  }

  .occasion-feature-card,
  .occasion-side-panel {
    min-height: 318px !important;
  }

  .occasion-feature-card {
    border-radius: 26px !important;
  }

  .occasion-feature-media,
  .occasion-feature-card video {
    border-radius: 26px !important;
  }

  .occasion-side-panel {
    padding-top: 2px !important;
    padding-bottom: 0 !important;
  }

  .occasion-side-panel .eyebrow {
    margin-bottom: 4px !important;
  }

  .occasion-side-panel h3 {
    margin-bottom: 5px !important;
    line-height: 1.04 !important;
    font-size: clamp(1.18rem, 1.55vw, 1.58rem) !important;
  }

  .occasion-side-panel p:not(.eyebrow) {
    font-size: 0.8rem !important;
    line-height: 1.28 !important;
  }

  .occasion-thumbs {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    gap: 7px !important;
  }

  .occasion-thumb {
    border-radius: 14px !important;
  }

  .occasion-side-panel .btn.primary {
    min-height: 38px !important;
    padding: 8px 13px !important;
    font-size: 0.78rem !important;
  }

  .occasion-feature-hint {
    right: 14px !important;
    bottom: 14px !important;
    padding: 7px 11px !important;
    font-size: 0.68rem !important;
  }

  .occasion-sound-toggle,
  .occasion-play-toggle {
    bottom: 14px !important;
    min-height: 34px !important;
    padding: 7px 11px !important;
    font-size: 0.66rem !important;
  }

  .occasion-sound-toggle {
    left: 14px !important;
  }

  .occasion-play-toggle {
    left: 112px !important;
  }
}

/* Smaller laptop screens */
@media (min-width: 981px) and (max-height: 780px) {
  .occasion-atelier-section {
    padding-top: 6px !important;
    padding-bottom: 14px !important;
    margin-bottom: 22px !important;
  }

  .occasion-atelier-heading {
    margin-bottom: 6px !important;
  }

  .occasion-atelier-heading p:not(.eyebrow) {
    line-height: 1.24 !important;
  }

  .occasion-atelier-tabs {
    margin-bottom: 6px !important;
  }

  .occasion-atelier-showcase {
    min-height: 292px !important;
    gap: 16px !important;
  }

  .occasion-feature-card,
  .occasion-side-panel {
    min-height: 292px !important;
  }

  .occasion-side-panel h3 {
    font-size: clamp(1.08rem, 1.45vw, 1.45rem) !important;
    margin-bottom: 4px !important;
  }

  .occasion-side-panel p:not(.eyebrow) {
    font-size: 0.76rem !important;
    line-height: 1.22 !important;
  }

  .occasion-thumbs {
    margin-top: 6px !important;
    margin-bottom: 6px !important;
    gap: 6px !important;
  }

  .occasion-side-panel .btn.primary {
    min-height: 36px !important;
    padding: 7px 12px !important;
    font-size: 0.74rem !important;
  }
}

/* Tablet: keep comfortable, not too compressed */
@media (max-width: 980px) {
  .occasion-feature-card {
    min-height: 340px !important;
  }

  .occasion-side-panel {
    padding: 22px !important;
  }
}

/* Mobile: smooth vertical scrolling, no aggressive compression */
@media (max-width: 640px) {
  .occasion-atelier-section {
    padding-top: 20px !important;
    margin-bottom: 48px !important;
  }

  .occasion-feature-card {
    min-height: 255px !important;
  }

  .occasion-side-panel {
    padding: 20px 18px !important;
  }

  .occasion-thumbs {
    margin-top: 14px !important;
    margin-bottom: 14px !important;
    gap: 10px !important;
  }

  .occasion-side-panel .btn.primary {
    min-height: 42px !important;
    font-size: 0.82rem !important;
  }
}

/* =========================================================
   L'abeille D'or - Occasions Nav Landing v1
   Date: 2026-05-27
   Purpose: when an occasion tab is clicked, land with nav row visible under sticky header
   ========================================================= */

@media (min-width: 981px) {
  .occasion-atelier-tabs {
    scroll-margin-top: 138px !important;
  }
}

/* Smaller laptop screens */
@media (min-width: 981px) and (max-height: 780px) {
  .occasion-atelier-tabs {
    scroll-margin-top: 126px !important;
  }
}

/* Mobile/tablet: no forced landing behavior needed */
@media (max-width: 980px) {
  .occasion-atelier-tabs {
    scroll-margin-top: 96px !important;
  }
}

/* =========================================================
   L'abeille D'or - Occasions Nav Spacing v1
   Date: 2026-05-27
   Purpose: add breathing space between intro text and occasion nav line
   ========================================================= */

@media (min-width: 981px) {
  .occasion-atelier-heading {
    margin-bottom: 16px !important;
  }

  .occasion-atelier-tabs {
    margin-top: 4px !important;
  }
}

@media (min-width: 981px) and (max-height: 780px) {
  .occasion-atelier-heading {
    margin-bottom: 14px !important;
  }

  .occasion-atelier-tabs {
    margin-top: 3px !important;
  }
}

@media (max-width: 980px) {
  .occasion-atelier-heading {
    margin-bottom: 18px !important;
  }

  .occasion-atelier-tabs {
    margin-top: 4px !important;
  }
}

@media (max-width: 640px) {
  .occasion-atelier-heading {
    margin-bottom: 16px !important;
  }

  .occasion-atelier-tabs {
    margin-top: 3px !important;
  }
}

/* =========================================================
   L'abeille D'or - Occasions Nav Landing Space v2
   Date: 2026-05-27
   Purpose: add extra space above occasion nav and land on that space when tabs are clicked
   ========================================================= */

/* The invisible landing anchor above the occasion nav */
.occasion-nav-landing {
  display: block !important;
  height: 18px !important;
  scroll-margin-top: 132px !important;
}

/* Add more visible breathing room before the nav row */
.occasion-atelier-heading {
  margin-bottom: 22px !important;
}

.occasion-atelier-tabs {
  margin-top: 0 !important;
}

/* Smaller laptop tuning */
@media (min-width: 981px) and (max-height: 780px) {
  .occasion-nav-landing {
    height: 16px !important;
    scroll-margin-top: 120px !important;
  }

  .occasion-atelier-heading {
    margin-bottom: 20px !important;
  }
}

/* Tablet */
@media (max-width: 980px) {
  .occasion-nav-landing {
    height: 16px !important;
    scroll-margin-top: 96px !important;
  }

  .occasion-atelier-heading {
    margin-bottom: 20px !important;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .occasion-nav-landing {
    height: 14px !important;
    scroll-margin-top: 88px !important;
  }

  .occasion-atelier-heading {
    margin-bottom: 18px !important;
  }
}

/* =========================================================
   L'abeille D'or - Mobile Nav + Section Landing + Small Controls v1
   Date: 2026-05-28
   Purpose:
   1) wrap Occasion nav buttons on phone
   2) improve main top-nav landing so eyebrow/headline are not hidden
   3) slightly reduce sound/play/view-larger controls
   ========================================================= */

/* Main top navigation anchor landing correction */
section[id],
#hero,
#selection,
#our-knefe,
#occasions,
#contact {
  scroll-margin-top: 132px !important;
}

/* Desktop/laptop: keep enough offset for sticky header */
@media (min-width: 981px) {
  section[id],
  #hero,
  #selection,
  #our-knefe,
  #occasions,
  #contact {
    scroll-margin-top: 138px !important;
  }
}

/* Smaller laptop tuning */
@media (min-width: 981px) and (max-height: 780px) {
  section[id],
  #hero,
  #selection,
  #our-knefe,
  #occasions,
  #contact {
    scroll-margin-top: 124px !important;
  }
}

/* Tablet */
@media (max-width: 980px) {
  section[id],
  #hero,
  #selection,
  #our-knefe,
  #occasions,
  #contact {
    scroll-margin-top: 118px !important;
  }
}

/* Phone */
@media (max-width: 640px) {
  section[id],
  #hero,
  #selection,
  #our-knefe,
  #occasions,
  #contact {
    scroll-margin-top: 106px !important;
  }
}

/* Mobile Occasions nav: show all buttons instead of horizontal scrolling */
@media (max-width: 640px) {
  .occasion-atelier-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    overflow-x: visible !important;
    gap: 7px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .occasion-tab {
    flex: 0 1 auto !important;
    min-height: 30px !important;
    padding: 6px 9px !important;
    font-size: 0.62rem !important;
    line-height: 1.08 !important;
    white-space: normal !important;
    text-align: center !important;
  }
}

/* Slightly smaller video/media controls on desktop and phone */
.occasion-sound-toggle,
.occasion-play-toggle,
.occasion-feature-hint,
.selection-sound-toggle,
.selection-play-toggle,
.selection-feature-hint,
.reel-sound-toggle,
.reel-play-toggle,
.reel-feature-hint,
.hero-sound-toggle,
.hero-play-toggle,
.hero-feature-hint {
  min-height: 31px !important;
  padding: 6px 10px !important;
  font-size: 0.62rem !important;
  line-height: 1 !important;
}

/* Occasions known controls */
.occasion-sound-toggle,
.occasion-play-toggle {
  bottom: 12px !important;
  min-width: 68px !important;
}

.occasion-sound-toggle {
  left: 12px !important;
}

.occasion-play-toggle {
  left: 102px !important;
}

.occasion-feature-hint {
  right: 12px !important;
  bottom: 12px !important;
}

/* Phone controls: not too small, but less dominant */
@media (max-width: 640px) {
  .occasion-sound-toggle,
  .occasion-play-toggle,
  .occasion-feature-hint,
  .selection-sound-toggle,
  .selection-play-toggle,
  .selection-feature-hint,
  .reel-sound-toggle,
  .reel-play-toggle,
  .reel-feature-hint,
  .hero-sound-toggle,
  .hero-play-toggle,
  .hero-feature-hint {
    min-height: 30px !important;
    padding: 6px 9px !important;
    font-size: 0.6rem !important;
  }

  .occasion-sound-toggle {
    left: 12px !important;
    bottom: 12px !important;
  }

  .occasion-play-toggle {
    left: 96px !important;
    bottom: 12px !important;
  }

  .occasion-feature-hint {
    right: 12px !important;
    bottom: 12px !important;
  }
}

/* =========================================================
   L'abeille D'or - Hero + Selection Main Media Overlay v1
   Date: 2026-05-28
   Purpose: larger overlay for Hero media and Selection main media only
   ========================================================= */

.hero-video-wrap,
.selection-feature {
  cursor: pointer !important;
}

.main-media-lightbox {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 28px !important;
  background: rgba(25, 16, 10, 0.82) !important;
  backdrop-filter: blur(10px) !important;
}

.main-media-lightbox.is-open {
  display: flex !important;
}

.main-media-lightbox-stage {
  max-width: 92vw !important;
  max-height: 82vh !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.32) !important;
  background: #211711 !important;
}

.main-media-lightbox-stage img,
.main-media-lightbox-stage video {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 92vw !important;
  max-height: 82vh !important;
  object-fit: contain !important;
  background: #211711 !important;
}

.main-media-lightbox-close {
  position: fixed !important;
  top: 22px !important;
  right: 22px !important;
  z-index: 10000 !important;
  min-height: 34px !important;
  padding: 8px 13px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 250, 243, 0.9) !important;
  color: #4a2f22 !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18) !important;
}

@media (max-width: 640px) {
  .main-media-lightbox {
    padding: 18px !important;
  }

  .main-media-lightbox-stage,
  .main-media-lightbox-stage img,
  .main-media-lightbox-stage video {
    max-width: 94vw !important;
    max-height: 76vh !important;
    border-radius: 22px !important;
  }

  .main-media-lightbox-close {
    top: 14px !important;
    right: 14px !important;
    min-height: 32px !important;
    padding: 7px 11px !important;
    font-size: 0.66rem !important;
  }
}

/* =========================================================
   L'abeille D'or - Hero Controls + Occasion Button Alignment v1
   Date: 2026-05-28
   Purpose: fix Occasion View Larger text alignment and standardize Hero controls
   ========================================================= */

/* Fix Occasion View Larger text centering */
.occasion-feature-hint {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1 !important;
}

/* Hero control positioning */
.hero-video-wrap {
  position: relative !important;
  cursor: pointer !important;
}

.hero-sound-toggle,
.hero-play-toggle,
.hero-feature-hint {
  position: absolute !important;
  z-index: 6 !important;
  min-height: 31px !important;
  padding: 6px 10px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 250, 243, 0.84) !important;
  color: #4a2f22 !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 10px 26px rgba(74, 47, 34, 0.12) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.hero-sound-toggle {
  left: 12px !important;
  bottom: 12px !important;
  min-width: 68px !important;
}

.hero-play-toggle {
  left: 102px !important;
  bottom: 12px !important;
  min-width: 68px !important;
}

.hero-feature-hint {
  right: 12px !important;
  bottom: 12px !important;
  min-width: 82px !important;
}

.hero-sound-toggle:not(.is-hidden):hover,
.hero-play-toggle:not(.is-hidden):hover,
.hero-feature-hint:hover,
.occasion-feature-hint:hover {
  background: rgba(74, 47, 34, 0.88) !important;
  color: #fff8ed !important;
}

.hero-play-toggle.is-paused {
  background: rgba(74, 47, 34, 0.88) !important;
  color: #fff8ed !important;
}

.hero-sound-toggle.is-hidden,
.hero-play-toggle.is-hidden {
  display: none !important;
}

/* Shared larger media overlay, used by Hero and Selection main media */
.main-media-lightbox {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 28px !important;
  background: rgba(25, 16, 10, 0.82) !important;
  backdrop-filter: blur(10px) !important;
}

.main-media-lightbox.is-open {
  display: flex !important;
}

.main-media-lightbox-stage {
  max-width: 92vw !important;
  max-height: 82vh !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.32) !important;
  background: #211711 !important;
}

.main-media-lightbox-stage img,
.main-media-lightbox-stage video {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 92vw !important;
  max-height: 82vh !important;
  object-fit: contain !important;
  background: #211711 !important;
}

.main-media-lightbox-close {
  position: fixed !important;
  top: 22px !important;
  right: 22px !important;
  z-index: 10000 !important;
  min-height: 34px !important;
  padding: 8px 13px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 250, 243, 0.9) !important;
  color: #4a2f22 !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18) !important;
}

/* Phone tuning */
@media (max-width: 640px) {
  .hero-sound-toggle,
  .hero-play-toggle,
  .hero-feature-hint {
    min-height: 30px !important;
    padding: 6px 9px !important;
    font-size: 0.6rem !important;
  }

  .hero-sound-toggle {
    left: 10px !important;
    bottom: 10px !important;
    min-width: 62px !important;
  }

  .hero-play-toggle {
    left: 86px !important;
    bottom: 10px !important;
    min-width: 62px !important;
  }

  .hero-feature-hint {
    right: 10px !important;
    bottom: 10px !important;
    min-width: 78px !important;
  }

  .main-media-lightbox {
    padding: 18px !important;
  }

  .main-media-lightbox-stage,
  .main-media-lightbox-stage img,
  .main-media-lightbox-stage video {
    max-width: 94vw !important;
    max-height: 76vh !important;
    border-radius: 22px !important;
  }

  .main-media-lightbox-close {
    top: 14px !important;
    right: 14px !important;
    min-height: 32px !important;
    padding: 7px 11px !important;
    font-size: 0.66rem !important;
  }
}

/* =========================================================
   L'abeille D'or - Global Reel Controls Standardization v1
   Date: 2026-05-28
   Purpose: compact consistent Sound / Play / View larger controls across media sections
   ========================================================= */

/* ---------- HERO: stop the controls from stretching into a bar ---------- */

.hero-video-wrap {
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
}

.hero-sound-toggle,
.hero-play-toggle,
.hero-feature-hint {
  width: auto !important;
  max-width: max-content !important;
  min-width: 58px !important;
  height: auto !important;
  min-height: 29px !important;
  padding: 6px 10px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  position: absolute !important;
  z-index: 20 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  background: rgba(255, 250, 243, 0.86) !important;
  color: #4a2f22 !important;
  box-shadow: 0 10px 24px rgba(74, 47, 34, 0.14) !important;
  backdrop-filter: blur(12px) !important;
  cursor: pointer !important;
  transform: none !important;
}

.hero-sound-toggle {
  left: 12px !important;
  right: auto !important;
  bottom: 12px !important;
}

.hero-play-toggle {
  left: 88px !important;
  right: auto !important;
  bottom: 12px !important;
}

.hero-feature-hint {
  left: auto !important;
  right: 12px !important;
  bottom: 12px !important;
}

.hero-sound-toggle.is-hidden,
.hero-play-toggle.is-hidden {
  display: none !important;
}

.hero-play-toggle.is-paused,
.hero-sound-toggle.is-on,
.hero-sound-toggle:hover,
.hero-play-toggle:hover,
.hero-feature-hint:hover {
  background: rgba(74, 47, 34, 0.88) !important;
  color: #fff8ed !important;
}

/* ---------- OCCASIONS: center the View larger text exactly ---------- */

.occasion-feature-hint {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1 !important;
  height: auto !important;
}

/* ---------- SELECTION: compact Sound / Play buttons ---------- */

.selection-main-media,
.selection-main-video-wrap,
.selection-feature {
  position: relative !important;
}

.selection-sound-toggle,
.selection-play-toggle {
  width: auto !important;
  max-width: max-content !important;
  min-width: 58px !important;
  min-height: 29px !important;
  padding: 6px 10px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  position: absolute !important;
  bottom: 12px !important;
  z-index: 20 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  background: rgba(255, 250, 243, 0.86) !important;
  color: #4a2f22 !important;
  box-shadow: 0 10px 24px rgba(74, 47, 34, 0.14) !important;
  backdrop-filter: blur(12px) !important;
  cursor: pointer !important;
}

.selection-sound-toggle {
  left: 12px !important;
}

.selection-play-toggle {
  left: 88px !important;
}

.selection-sound-toggle.is-hidden,
.selection-play-toggle.is-hidden {
  display: none !important;
}

.selection-play-toggle.is-paused,
.selection-sound-toggle:hover,
.selection-play-toggle:hover {
  background: rgba(74, 47, 34, 0.88) !important;
  color: #fff8ed !important;
}

/* ---------- BRAND REELS: compact Sound / Play buttons ---------- */

.brand-reel-frame {
  position: relative !important;
}

.brand-reel-sound-toggle,
.brand-reel-play-toggle {
  width: auto !important;
  max-width: max-content !important;
  min-width: 54px !important;
  min-height: 28px !important;
  padding: 6px 9px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  position: absolute !important;
  bottom: 10px !important;
  z-index: 20 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 0.58rem !important;
  font-weight: 800 !important;
  background: rgba(255, 250, 243, 0.86) !important;
  color: #4a2f22 !important;
  box-shadow: 0 10px 22px rgba(74, 47, 34, 0.14) !important;
  backdrop-filter: blur(12px) !important;
  cursor: pointer !important;
}

.brand-reel-sound-toggle {
  left: 10px !important;
}

.brand-reel-play-toggle {
  left: 76px !important;
}

.brand-reel-play-toggle.is-paused,
.brand-reel-sound-toggle:hover,
.brand-reel-play-toggle:hover {
  background: rgba(74, 47, 34, 0.88) !important;
  color: #fff8ed !important;
}

/* ---------- MOBILE ---------- */

@media (max-width: 640px) {
  .hero-sound-toggle,
  .hero-play-toggle,
  .hero-feature-hint,
  .selection-sound-toggle,
  .selection-play-toggle {
    min-width: 52px !important;
    min-height: 28px !important;
    padding: 5px 8px !important;
    font-size: 0.56rem !important;
    bottom: 10px !important;
  }

  .hero-sound-toggle,
  .selection-sound-toggle {
    left: 10px !important;
  }

  .hero-play-toggle,
  .selection-play-toggle {
    left: 74px !important;
  }

  .hero-feature-hint {
    right: 10px !important;
  }

  .brand-reel-sound-toggle,
  .brand-reel-play-toggle {
    min-width: 48px !important;
    min-height: 26px !important;
    padding: 5px 7px !important;
    font-size: 0.54rem !important;
    bottom: 8px !important;
  }

  .brand-reel-sound-toggle {
    left: 8px !important;
  }

  .brand-reel-play-toggle {
    left: 66px !important;
  }
}

/* ---------- Overlay mobile reliability ---------- */

.main-media-lightbox,
.occasion-lightbox {
  touch-action: manipulation !important;
}

.main-media-lightbox-stage video,
.main-media-lightbox-stage img,
.occasion-lightbox-media video,
.occasion-lightbox-media img {
  max-width: 94vw !important;
  max-height: 78vh !important;
  object-fit: contain !important;
}

/* =========================================================
   L'abeille D'or - Hero Mobile Controls Fix v1
   Date: 2026-05-28
   Purpose: keep Hero controls inside reel on phone and make all buttons visible
   ========================================================= */

/* Strong Hero positioning reset */
.hero .hero-image-wrap.hero-video-wrap {
  position: relative !important;
  overflow: hidden !important;
}

/* Prevent video/image layer from stealing mobile taps from the wrapper */
.hero .hero-image-wrap.hero-video-wrap #hero-reel-video,
.hero .hero-image-wrap.hero-video-wrap .hero-fallback-image {
  pointer-events: none !important;
}

/* Force compact floating buttons inside Hero reel */
.hero .hero-image-wrap.hero-video-wrap > .hero-sound-toggle,
.hero .hero-image-wrap.hero-video-wrap > .hero-play-toggle,
.hero .hero-image-wrap.hero-video-wrap > .hero-feature-hint {
  position: absolute !important;
  top: auto !important;
  bottom: 12px !important;
  width: auto !important;
  max-width: max-content !important;
  height: auto !important;
  min-height: 29px !important;
  min-width: 58px !important;
  padding: 6px 10px !important;
  margin: 0 !important;
  z-index: 50 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  transform: none !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  background: rgba(255, 250, 243, 0.88) !important;
  color: #4a2f22 !important;
  box-shadow: 0 10px 24px rgba(74, 47, 34, 0.14) !important;
  backdrop-filter: blur(12px) !important;
  cursor: pointer !important;
}

/* Keep hidden class respected only before JS reveals controls */
.hero .hero-image-wrap.hero-video-wrap > .hero-sound-toggle.is-hidden,
.hero .hero-image-wrap.hero-video-wrap > .hero-play-toggle.is-hidden {
  display: none !important;
}

.hero .hero-image-wrap.hero-video-wrap > .hero-sound-toggle {
  left: 12px !important;
  right: auto !important;
}

.hero .hero-image-wrap.hero-video-wrap > .hero-play-toggle {
  left: 88px !important;
  right: auto !important;
}

.hero .hero-image-wrap.hero-video-wrap > .hero-feature-hint {
  left: auto !important;
  right: 12px !important;
}

/* Phone-specific placement */
@media (max-width: 640px) {
  .hero .hero-image-wrap.hero-video-wrap {
    overflow: hidden !important;
  }

  .hero .hero-image-wrap.hero-video-wrap > .hero-sound-toggle,
  .hero .hero-image-wrap.hero-video-wrap > .hero-play-toggle,
  .hero .hero-image-wrap.hero-video-wrap > .hero-feature-hint {
    bottom: 9px !important;
    min-width: 46px !important;
    min-height: 25px !important;
    padding: 5px 7px !important;
    font-size: 0.5rem !important;
    z-index: 80 !important;
  }

  .hero .hero-image-wrap.hero-video-wrap > .hero-sound-toggle {
    left: 8px !important;
  }

  .hero .hero-image-wrap.hero-video-wrap > .hero-play-toggle {
    left: 64px !important;
  }

  .hero .hero-image-wrap.hero-video-wrap > .hero-feature-hint {
    right: 8px !important;
    min-width: 68px !important;
  }
}

/* Extra-small phones */
@media (max-width: 380px) {
  .hero .hero-image-wrap.hero-video-wrap > .hero-sound-toggle,
  .hero .hero-image-wrap.hero-video-wrap > .hero-play-toggle,
  .hero .hero-image-wrap.hero-video-wrap > .hero-feature-hint {
    bottom: 7px !important;
    min-width: 42px !important;
    min-height: 24px !important;
    padding: 4px 6px !important;
    font-size: 0.48rem !important;
  }

  .hero .hero-image-wrap.hero-video-wrap > .hero-sound-toggle {
    left: 7px !important;
  }

  .hero .hero-image-wrap.hero-video-wrap > .hero-play-toggle {
    left: 58px !important;
  }

  .hero .hero-image-wrap.hero-video-wrap > .hero-feature-hint {
    right: 7px !important;
    min-width: 62px !important;
  }
}

/* =========================================================
   L'abeille D'or - Hero Mobile Controls + Poster v2
   Date: 2026-05-28
   Purpose:
   1) move Hero buttons upward into the visible reel area on phones
   2) reduce ugly fallback flash by showing video poster immediately
   ========================================================= */

/* Let the video poster be visible immediately instead of waiting behind fallback */
.hero-video-wrap #hero-reel-video {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Once the video element exists, keep fallback behind it */
.hero-video-wrap .hero-fallback-image {
  transition: opacity 0.25s ease !important;
}

/* Phone: push Hero controls higher into the visible reel, not the lower container area */
@media (max-width: 640px) {
  .hero .hero-image-wrap.hero-video-wrap > .hero-sound-toggle,
  .hero .hero-image-wrap.hero-video-wrap > .hero-play-toggle,
  .hero .hero-image-wrap.hero-video-wrap > .hero-feature-hint {
    bottom: 42px !important;
    min-width: 46px !important;
    min-height: 25px !important;
    padding: 5px 7px !important;
    font-size: 0.5rem !important;
    z-index: 90 !important;
  }

  .hero .hero-image-wrap.hero-video-wrap > .hero-sound-toggle {
    left: 8px !important;
  }

  .hero .hero-image-wrap.hero-video-wrap > .hero-play-toggle {
    left: 64px !important;
  }

  .hero .hero-image-wrap.hero-video-wrap > .hero-feature-hint {
    right: 8px !important;
    min-width: 68px !important;
  }
}

/* Extra-small phones: slightly less upward shift */
@media (max-width: 380px) {
  .hero .hero-image-wrap.hero-video-wrap > .hero-sound-toggle,
  .hero .hero-image-wrap.hero-video-wrap > .hero-play-toggle,
  .hero .hero-image-wrap.hero-video-wrap > .hero-feature-hint {
    bottom: 36px !important;
    min-width: 42px !important;
    min-height: 24px !important;
    padding: 4px 6px !important;
    font-size: 0.48rem !important;
  }

  .hero .hero-image-wrap.hero-video-wrap > .hero-play-toggle {
    left: 58px !important;
  }

  .hero .hero-image-wrap.hero-video-wrap > .hero-feature-hint {
    min-width: 62px !important;
  }
}

/* =========================================================
   L'abeille D'or - Hero Mobile Buttons Up v3
   Date: 2026-05-28
   Purpose: push Hero reel buttons slightly higher inside the visible reel on mobile
   ========================================================= */

@media (max-width: 640px) {
  .hero .hero-image-wrap.hero-video-wrap > .hero-sound-toggle,
  .hero .hero-image-wrap.hero-video-wrap > .hero-play-toggle,
  .hero .hero-image-wrap.hero-video-wrap > .hero-feature-hint {
    bottom: 56px !important;
  }
}

/* Extra-small phones: keep it a little less high */
@media (max-width: 380px) {
  .hero .hero-image-wrap.hero-video-wrap > .hero-sound-toggle,
  .hero .hero-image-wrap.hero-video-wrap > .hero-play-toggle,
  .hero .hero-image-wrap.hero-video-wrap > .hero-feature-hint {
    bottom: 48px !important;
  }
}

/* =========================================================
   L'abeille D'or - Hero Mobile Buttons Up v3
   Date: 2026-05-28
   Purpose: push Hero reel buttons slightly higher inside the visible reel on mobile
   ========================================================= */

@media (max-width: 640px) {
  .hero .hero-image-wrap.hero-video-wrap > .hero-sound-toggle,
  .hero .hero-image-wrap.hero-video-wrap > .hero-play-toggle,
  .hero .hero-image-wrap.hero-video-wrap > .hero-feature-hint {
    bottom: 56px !important;
  }
}

/* Extra-small phones: keep it a little less high */
@media (max-width: 380px) {
  .hero .hero-image-wrap.hero-video-wrap > .hero-sound-toggle,
  .hero .hero-image-wrap.hero-video-wrap > .hero-play-toggle,
  .hero .hero-image-wrap.hero-video-wrap > .hero-feature-hint {
    bottom: 48px !important;
  }
}

/* =========================================================
   L'abeille D'or - Hero Mobile Media Stack v1
   Date: 2026-05-28
   Purpose: prevent Hero poster/fallback image from extending below the reel on mobile
   ========================================================= */

/*
  On mobile, the Hero video and fallback poster must occupy the same frame.
  The fallback should not create extra layout height below the reel.
*/
@media (max-width: 640px) {
  .hero .hero-image-wrap.hero-video-wrap {
    position: relative !important;
    overflow: hidden !important;
    aspect-ratio: 4 / 3 !important;
    min-height: 0 !important;
    height: auto !important;
  }

  .hero .hero-image-wrap.hero-video-wrap #hero-reel-video,
  .hero .hero-image-wrap.hero-video-wrap .hero-fallback-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
  }

  .hero .hero-image-wrap.hero-video-wrap #hero-reel-video {
    z-index: 2 !important;
  }

  .hero .hero-image-wrap.hero-video-wrap .hero-fallback-image {
    z-index: 1 !important;
  }

  .hero .hero-image-wrap.hero-video-wrap > .hero-sound-toggle,
  .hero .hero-image-wrap.hero-video-wrap > .hero-play-toggle,
  .hero .hero-image-wrap.hero-video-wrap > .hero-feature-hint {
    z-index: 5 !important;
  }
}

/* Extra-small phones: same stack behavior */
@media (max-width: 380px) {
  .hero .hero-image-wrap.hero-video-wrap {
    aspect-ratio: 4 / 3 !important;
  }
}

/* =========================================================
   L'abeille D'or - Hero Mobile Media Stack v1
   Date: 2026-05-28
   Purpose: prevent Hero poster/fallback image from extending below the reel on mobile
   ========================================================= */

/*
  On mobile, the Hero video and fallback poster must occupy the same frame.
  The fallback should not create extra layout height below the reel.
*/
@media (max-width: 640px) {
  .hero .hero-image-wrap.hero-video-wrap {
    position: relative !important;
    overflow: hidden !important;
    aspect-ratio: 4 / 3 !important;
    min-height: 0 !important;
    height: auto !important;
  }

  .hero .hero-image-wrap.hero-video-wrap #hero-reel-video,
  .hero .hero-image-wrap.hero-video-wrap .hero-fallback-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
  }

  .hero .hero-image-wrap.hero-video-wrap #hero-reel-video {
    z-index: 2 !important;
  }

  .hero .hero-image-wrap.hero-video-wrap .hero-fallback-image {
    z-index: 1 !important;
  }

  .hero .hero-image-wrap.hero-video-wrap > .hero-sound-toggle,
  .hero .hero-image-wrap.hero-video-wrap > .hero-play-toggle,
  .hero .hero-image-wrap.hero-video-wrap > .hero-feature-hint {
    z-index: 5 !important;
  }
}

/* Extra-small phones: same stack behavior */
@media (max-width: 380px) {
  .hero .hero-image-wrap.hero-video-wrap {
    aspect-ratio: 4 / 3 !important;
  }
}

/* =========================================================
   L'abeille D'or - Hero Buttons Lower v5
   Date: 2026-05-28
   Purpose: force Hero controls to sit at the lower edge of the visible reel
   ========================================================= */

/*
  Strong final override.
  Some mobile browsers report a wider viewport than expected,
  so this applies up to tablet width, not only max-width 640px.
*/
@media (max-width: 980px) {
  .hero .hero-image-wrap.hero-video-wrap > .hero-sound-toggle,
  .hero .hero-image-wrap.hero-video-wrap > .hero-play-toggle,
  .hero .hero-image-wrap.hero-video-wrap > .hero-feature-hint {
    top: auto !important;
    bottom: 2px !important;
    transform: translateY(0) !important;
    z-index: 120 !important;
  }

  .hero .hero-image-wrap.hero-video-wrap > .hero-sound-toggle {
    left: 8px !important;
  }

  .hero .hero-image-wrap.hero-video-wrap > .hero-play-toggle {
    left: 64px !important;
  }

  .hero .hero-image-wrap.hero-video-wrap > .hero-feature-hint {
    right: 8px !important;
  }
}

/* Normal phones */
@media (max-width: 640px) {
  .hero .hero-image-wrap.hero-video-wrap > .hero-sound-toggle,
  .hero .hero-image-wrap.hero-video-wrap > .hero-play-toggle,
  .hero .hero-image-wrap.hero-video-wrap > .hero-feature-hint {
    bottom: 2px !important;
  }
}

/* Very small phones */
@media (max-width: 380px) {
  .hero .hero-image-wrap.hero-video-wrap > .hero-sound-toggle,
  .hero .hero-image-wrap.hero-video-wrap > .hero-play-toggle,
  .hero .hero-image-wrap.hero-video-wrap > .hero-feature-hint {
    bottom: 1px !important;
  }

  .hero .hero-image-wrap.hero-video-wrap > .hero-play-toggle {
    left: 58px !important;
  }
}

/* =========================================================
   L'abeille D'or - Hero Buttons One Notch Up v6
   Date: 2026-05-28
   Purpose: move Hero mobile controls slightly above the lower edge
   ========================================================= */

@media (max-width: 980px) {
  .hero .hero-image-wrap.hero-video-wrap > .hero-sound-toggle,
  .hero .hero-image-wrap.hero-video-wrap > .hero-play-toggle,
  .hero .hero-image-wrap.hero-video-wrap > .hero-feature-hint {
    bottom: 6px !important;
  }
}

@media (max-width: 640px) {
  .hero .hero-image-wrap.hero-video-wrap > .hero-sound-toggle,
  .hero .hero-image-wrap.hero-video-wrap > .hero-play-toggle,
  .hero .hero-image-wrap.hero-video-wrap > .hero-feature-hint {
    bottom: 6px !important;
  }
}

@media (max-width: 380px) {
  .hero .hero-image-wrap.hero-video-wrap > .hero-sound-toggle,
  .hero .hero-image-wrap.hero-video-wrap > .hero-play-toggle,
  .hero .hero-image-wrap.hero-video-wrap > .hero-feature-hint {
    bottom: 5px !important;
  }
}

/* =========================================================
   L'abeille D'or - Hero Buttons One Notch Up v6
   Date: 2026-05-28
   Purpose: move Hero mobile controls slightly above the lower edge
   ========================================================= */

@media (max-width: 980px) {
  .hero .hero-image-wrap.hero-video-wrap > .hero-sound-toggle,
  .hero .hero-image-wrap.hero-video-wrap > .hero-play-toggle,
  .hero .hero-image-wrap.hero-video-wrap > .hero-feature-hint {
    bottom: 6px !important;
  }
}

@media (max-width: 640px) {
  .hero .hero-image-wrap.hero-video-wrap > .hero-sound-toggle,
  .hero .hero-image-wrap.hero-video-wrap > .hero-play-toggle,
  .hero .hero-image-wrap.hero-video-wrap > .hero-feature-hint {
    bottom: 6px !important;
  }
}

@media (max-width: 380px) {
  .hero .hero-image-wrap.hero-video-wrap > .hero-sound-toggle,
  .hero .hero-image-wrap.hero-video-wrap > .hero-play-toggle,
  .hero .hero-image-wrap.hero-video-wrap > .hero-feature-hint {
    bottom: 5px !important;
  }
}

/* =========================================================
   L'abeille D'or - Our Knefe Media Controls v1
   Date: 2026-05-28
   Purpose: standard media controls for Our Knefe image/reel
   ========================================================= */

.knefe-media-wrap {
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
}

.knefe-story-video,
.knefe-story-image {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
}

.knefe-story-video {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
}

.knefe-story-image {
  position: relative !important;
  z-index: 1 !important;
}

.knefe-story-video.is-hidden,
.knefe-story-image.is-hidden {
  display: none !important;
}

.knefe-sound-toggle,
.knefe-play-toggle,
.knefe-feature-hint {
  width: auto !important;
  max-width: max-content !important;
  min-width: 58px !important;
  min-height: 29px !important;
  padding: 6px 10px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  position: absolute !important;
  bottom: 12px !important;
  z-index: 20 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  background: rgba(255, 250, 243, 0.86) !important;
  color: #4a2f22 !important;
  box-shadow: 0 10px 24px rgba(74, 47, 34, 0.14) !important;
  backdrop-filter: blur(12px) !important;
  cursor: pointer !important;
}

.knefe-sound-toggle {
  left: 12px !important;
}

.knefe-play-toggle {
  left: 88px !important;
}

.knefe-feature-hint {
  right: 12px !important;
  min-width: 82px !important;
}

.knefe-sound-toggle.is-hidden,
.knefe-play-toggle.is-hidden,
.knefe-feature-hint.is-hidden {
  display: none !important;
}

.knefe-play-toggle.is-paused,
.knefe-sound-toggle.is-on,
.knefe-sound-toggle:hover,
.knefe-play-toggle:hover,
.knefe-feature-hint:hover {
  background: rgba(74, 47, 34, 0.88) !important;
  color: #fff8ed !important;
}

/* Mobile */
@media (max-width: 640px) {
  .knefe-media-wrap {
    position: relative !important;
    overflow: hidden !important;
  }

  .knefe-sound-toggle,
  .knefe-play-toggle,
  .knefe-feature-hint {
    bottom: 6px !important;
    min-width: 46px !important;
    min-height: 25px !important;
    padding: 5px 7px !important;
    font-size: 0.5rem !important;
    z-index: 90 !important;
  }

  .knefe-sound-toggle {
    left: 8px !important;
  }

  .knefe-play-toggle {
    left: 64px !important;
  }

  .knefe-feature-hint {
    right: 8px !important;
    min-width: 68px !important;
  }
}

/* Extra-small phones */
@media (max-width: 380px) {
  .knefe-sound-toggle,
  .knefe-play-toggle,
  .knefe-feature-hint {
    bottom: 5px !important;
    min-width: 42px !important;
    min-height: 24px !important;
    padding: 4px 6px !important;
    font-size: 0.48rem !important;
  }

  .knefe-play-toggle {
    left: 58px !important;
  }

  .knefe-feature-hint {
    min-width: 62px !important;
  }
}

/* =========================================================
   L'abeille D'or - Our Knefe Media Controls v1
   Date: 2026-05-28
   Purpose: standard media controls for Our Knefe image/reel
   ========================================================= */

.knefe-media-wrap {
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
}

.knefe-story-video,
.knefe-story-image {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
}

.knefe-story-video {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
}

.knefe-story-image {
  position: relative !important;
  z-index: 1 !important;
}

.knefe-story-video.is-hidden,
.knefe-story-image.is-hidden {
  display: none !important;
}

.knefe-sound-toggle,
.knefe-play-toggle,
.knefe-feature-hint {
  width: auto !important;
  max-width: max-content !important;
  min-width: 58px !important;
  min-height: 29px !important;
  padding: 6px 10px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  position: absolute !important;
  bottom: 12px !important;
  z-index: 20 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  background: rgba(255, 250, 243, 0.86) !important;
  color: #4a2f22 !important;
  box-shadow: 0 10px 24px rgba(74, 47, 34, 0.14) !important;
  backdrop-filter: blur(12px) !important;
  cursor: pointer !important;
}

.knefe-sound-toggle {
  left: 12px !important;
}

.knefe-play-toggle {
  left: 88px !important;
}

.knefe-feature-hint {
  right: 12px !important;
  min-width: 82px !important;
}

.knefe-sound-toggle.is-hidden,
.knefe-play-toggle.is-hidden,
.knefe-feature-hint.is-hidden {
  display: none !important;
}

.knefe-play-toggle.is-paused,
.knefe-sound-toggle.is-on,
.knefe-sound-toggle:hover,
.knefe-play-toggle:hover,
.knefe-feature-hint:hover {
  background: rgba(74, 47, 34, 0.88) !important;
  color: #fff8ed !important;
}

/* Mobile */
@media (max-width: 640px) {
  .knefe-media-wrap {
    position: relative !important;
    overflow: hidden !important;
  }

  .knefe-sound-toggle,
  .knefe-play-toggle,
  .knefe-feature-hint {
    bottom: 6px !important;
    min-width: 46px !important;
    min-height: 25px !important;
    padding: 5px 7px !important;
    font-size: 0.5rem !important;
    z-index: 90 !important;
  }

  .knefe-sound-toggle {
    left: 8px !important;
  }

  .knefe-play-toggle {
    left: 64px !important;
  }

  .knefe-feature-hint {
    right: 8px !important;
    min-width: 68px !important;
  }
}

/* Extra-small phones */
@media (max-width: 380px) {
  .knefe-sound-toggle,
  .knefe-play-toggle,
  .knefe-feature-hint {
    bottom: 5px !important;
    min-width: 42px !important;
    min-height: 24px !important;
    padding: 4px 6px !important;
    font-size: 0.48rem !important;
  }

  .knefe-play-toggle {
    left: 58px !important;
  }

  .knefe-feature-hint {
    min-width: 62px !important;
  }
}

/* =========================================================
   L'abeille D'or - Header Nav Landing Correction v2
   Date: 2026-05-28
   Purpose: make top header nav links land at the section eyebrow/headline, not below it
   ========================================================= */

/*
  Main header navigation anchors.
  Higher scroll-margin-top means the browser stops earlier,
  keeping the eyebrow/headline visible.
*/
#selection,
#our-knefe,
#occasions,
#contact {
  scroll-margin-top: 164px !important;
}

/* Laptop / desktop */
@media (min-width: 981px) {
  #selection,
  #our-knefe,
  #occasions,
  #contact {
    scroll-margin-top: 168px !important;
  }
}

/* Smaller laptop screens */
@media (min-width: 981px) and (max-height: 780px) {
  #selection,
  #our-knefe,
  #occasions,
  #contact {
    scroll-margin-top: 154px !important;
  }
}

/* Tablet */
@media (max-width: 980px) {
  #selection,
  #our-knefe,
  #occasions,
  #contact {
    scroll-margin-top: 144px !important;
  }
}

/* Phone */
@media (max-width: 640px) {
  #selection,
  #our-knefe,
  #occasions,
  #contact {
    scroll-margin-top: 132px !important;
  }
}

/* =========================================================
   L'abeille D'or - Header Nav Landing Correction v3
   Date: 2026-05-28
   Purpose: stronger correction so top header nav lands at eyebrow/headline
   ========================================================= */

/*
  Main header nav anchors.
  Higher value = page stops earlier.
  This is intentionally stronger because previous offset still landed near the narrative.
*/
#selection,
#our-knefe,
#occasions,
#contact {
  scroll-margin-top: 230px !important;
}

/* Desktop / laptop */
@media (min-width: 981px) {
  #selection,
  #our-knefe,
  #occasions,
  #contact {
    scroll-margin-top: 240px !important;
  }
}

/* Smaller laptop screens */
@media (min-width: 981px) and (max-height: 780px) {
  #selection,
  #our-knefe,
  #occasions,
  #contact {
    scroll-margin-top: 220px !important;
  }
}

/* Tablet */
@media (max-width: 980px) {
  #selection,
  #our-knefe,
  #occasions,
  #contact {
    scroll-margin-top: 210px !important;
  }
}

/* Phone */
@media (max-width: 640px) {
  #selection,
  #our-knefe,
  #occasions,
  #contact {
    scroll-margin-top: 190px !important;
  }
}

/* =========================================================
   L'abeille D'or - Mobile Reels Header Nav Landing v1
   Date: 2026-05-28
   Purpose: CSS fallback for Reels mobile anchor landing
   ========================================================= */

@media (max-width: 640px) {
  #reels,
  #brand-reels,
  #brand-reel,
  .brand-reel-section,
  .brand-reels-section {
    scroll-margin-top: 190px !important;
  }
}

/* =========================================================
   L'abeille D'or - Selection Nav Landing v1
   Date: 2026-05-28
   Purpose: make only the Selection header nav land one line above the eyebrow
   ========================================================= */

/*
  Selection only.
  Other section landings are now approved and should not be changed here.
*/
#selection {
  scroll-margin-top: 210px !important;
}

/* Desktop / laptop */
@media (min-width: 981px) {
  #selection {
    scroll-margin-top: 215px !important;
  }
}

/* Smaller laptop screens */
@media (min-width: 981px) and (max-height: 780px) {
  #selection {
    scroll-margin-top: 198px !important;
  }
}

/* Tablet */
@media (max-width: 980px) {
  #selection {
    scroll-margin-top: 182px !important;
  }
}

/* Phone */
@media (max-width: 640px) {
  #selection {
    scroll-margin-top: 166px !important;
  }
}

/* =========================================================
   L'abeille D'or - Selection Nav Landing v2
   Date: 2026-05-28
   Purpose: move Selection header-nav landing upward, one line above the eyebrow
   ========================================================= */

/*
  Selection only.
  Higher scroll-margin-top = page stops earlier = eyebrow appears lower in view with space above it.
*/
#selection {
  scroll-margin-top: 250px !important;
}

/* Desktop / laptop */
@media (min-width: 981px) {
  #selection {
    scroll-margin-top: 260px !important;
  }
}

/* Smaller laptop screens */
@media (min-width: 981px) and (max-height: 780px) {
  #selection {
    scroll-margin-top: 240px !important;
  }
}

/* Tablet */
@media (max-width: 980px) {
  #selection {
    scroll-margin-top: 230px !important;
  }
}

/* Phone */
@media (max-width: 640px) {
  #selection {
    scroll-margin-top: 215px !important;
  }
}

/* =========================================================
   L'abeille D'or - Desktop Header Nav Landing Correction v5
   Date: 2026-05-28
   Purpose: fix PC header nav landing without touching mobile
   ========================================================= */

/*
  Desktop/laptop only.
  Mobile landing is already approved and should not be changed.
  Lower scroll-margin-top = lands slightly lower, hiding the previous section bottom.
*/
@media (min-width: 981px) {
  #selection,
  #brand-reel,
  #our-knefe,
  #occasions,
  #barista,
  #branches,
  #contact {
    scroll-margin-top: 168px !important;
  }
}

/* Smaller laptop screens */
@media (min-width: 981px) and (max-height: 780px) {
  #selection,
  #brand-reel,
  #our-knefe,
  #occasions,
  #barista,
  #branches,
  #contact {
    scroll-margin-top: 156px !important;
  }
}

/* =========================================================
   L'abeille D'or - Desktop Header Nav Landing Correction v5
   Date: 2026-05-28
   Purpose: fix PC header nav landing without touching mobile
   ========================================================= */

/*
  Desktop/laptop only.
  Mobile landing is already approved and should not be changed.
  Lower scroll-margin-top = lands slightly lower, hiding the previous section bottom.
*/
@media (min-width: 981px) {
  #selection,
  #brand-reel,
  #our-knefe,
  #occasions,
  #barista,
  #branches,
  #contact {
    scroll-margin-top: 168px !important;
  }
}

/* Smaller laptop screens */
@media (min-width: 981px) and (max-height: 780px) {
  #selection,
  #brand-reel,
  #our-knefe,
  #occasions,
  #barista,
  #branches,
  #contact {
    scroll-margin-top: 156px !important;
  }
}

/* =========================================================
   L'abeille D'or - Barista Atelier Section v1
   Date: 2026-05-28
   Purpose: elegant compact Barista/Café preview section
   ========================================================= */

.barista-atelier-section {
  margin: 54px auto 64px !important;
  padding: 34px clamp(22px, 5vw, 72px) 42px !important;
  background:
    radial-gradient(circle at top left, rgba(198, 146, 62, 0.13), transparent 30rem),
    linear-gradient(180deg, rgba(255, 250, 243, 0.96), rgba(246, 235, 220, 0.92)) !important;
}

.barista-atelier-heading {
  max-width: 780px !important;
  margin: 0 auto 24px !important;
  text-align: center !important;
}

.barista-atelier-heading .eyebrow {
  margin-bottom: 7px !important;
}

.barista-atelier-heading h2 {
  margin-bottom: 9px !important;
}

.barista-atelier-heading p:not(.eyebrow) {
  margin: 0 auto !important;
  max-width: 760px !important;
  line-height: 1.5 !important;
}

.barista-atelier-showcase {
  display: grid !important;
  grid-template-columns: minmax(0, 1.04fr) minmax(300px, 0.96fr) !important;
  gap: 28px !important;
  align-items: stretch !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
}

.barista-media-card {
  position: relative !important;
  min-height: 420px !important;
  overflow: hidden !important;
  border-radius: 32px !important;
  cursor: pointer !important;
  background: #f2dfc9 !important;
  box-shadow: 0 22px 56px rgba(74, 47, 34, 0.13) !important;
}

.barista-main-image,
.barista-reel-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.barista-main-image {
  z-index: 1 !important;
}

.barista-reel-video {
  z-index: 2 !important;
}

.barista-main-image.is-hidden,
.barista-reel-video.is-hidden {
  display: none !important;
}

.barista-side-panel {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 18px 4px 8px 8px !important;
}

.barista-side-panel .eyebrow {
  margin-bottom: 9px !important;
}

.barista-side-panel h3 {
  margin: 0 0 10px !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: clamp(1.55rem, 2.3vw, 2.35rem) !important;
  line-height: 1.05 !important;
  color: #4a2f22 !important;
}

.barista-side-panel p:not(.eyebrow) {
  max-width: 410px !important;
  line-height: 1.5 !important;
  color: rgba(74, 47, 34, 0.82) !important;
}

.barista-thumbs {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 11px !important;
  margin: 24px 0 22px !important;
}

.barista-thumb {
  min-width: 0 !important;
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
  text-align: left !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  color: #4a2f22 !important;
}

.barista-thumb-media {
  display: block !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 18px !important;
  background: var(--barista-thumb) center / cover no-repeat !important;
  box-shadow: 0 12px 26px rgba(74, 47, 34, 0.10) !important;
}

.barista-thumb span:last-child {
  display: block !important;
  margin-top: 7px !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
}

.barista-sound-toggle,
.barista-play-toggle,
.barista-feature-hint {
  width: auto !important;
  max-width: max-content !important;
  min-width: 58px !important;
  min-height: 29px !important;
  padding: 6px 10px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  position: absolute !important;
  bottom: 12px !important;
  z-index: 20 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  background: rgba(255, 250, 243, 0.86) !important;
  color: #4a2f22 !important;
  box-shadow: 0 10px 24px rgba(74, 47, 34, 0.14) !important;
  backdrop-filter: blur(12px) !important;
  cursor: pointer !important;
}

.barista-sound-toggle {
  left: 12px !important;
}

.barista-play-toggle {
  left: 88px !important;
}

.barista-feature-hint {
  right: 12px !important;
  min-width: 82px !important;
}

.barista-sound-toggle.is-hidden,
.barista-play-toggle.is-hidden,
.barista-feature-hint.is-hidden {
  display: none !important;
}

.barista-play-toggle.is-paused,
.barista-sound-toggle.is-on,
.barista-sound-toggle:hover,
.barista-play-toggle:hover,
.barista-feature-hint:hover {
  background: rgba(74, 47, 34, 0.88) !important;
  color: #fff8ed !important;
}

@media (min-width: 981px) and (max-height: 780px) {
  .barista-atelier-section {
    padding-top: 26px !important;
    padding-bottom: 34px !important;
  }

  .barista-atelier-heading {
    margin-bottom: 18px !important;
  }

  .barista-media-card {
    min-height: 360px !important;
  }

  .barista-thumbs {
    margin: 18px 0 18px !important;
  }
}

@media (max-width: 980px) {
  .barista-atelier-section {
    margin: 48px auto 56px !important;
    padding: 32px 22px 38px !important;
  }

  .barista-atelier-showcase {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .barista-media-card {
    min-height: 360px !important;
  }

  .barista-side-panel {
    padding: 0 !important;
  }

  .barista-side-panel p:not(.eyebrow) {
    max-width: 100% !important;
  }
}

@media (max-width: 640px) {
  .barista-atelier-section {
    margin: 42px auto 50px !important;
    padding: 28px 18px 34px !important;
  }

  .barista-atelier-heading {
    margin-bottom: 18px !important;
    text-align: left !important;
  }

  .barista-media-card {
    min-height: 280px !important;
    border-radius: 26px !important;
  }

  .barista-thumbs {
    gap: 8px !important;
    margin: 18px 0 18px !important;
  }

  .barista-thumb-media {
    border-radius: 14px !important;
  }

  .barista-thumb span:last-child {
    font-size: 0.58rem !important;
  }

  .barista-sound-toggle,
  .barista-play-toggle,
  .barista-feature-hint {
    bottom: 6px !important;
    min-width: 46px !important;
    min-height: 25px !important;
    padding: 5px 7px !important;
    font-size: 0.5rem !important;
    z-index: 90 !important;
  }

  .barista-sound-toggle {
    left: 8px !important;
  }

  .barista-play-toggle {
    left: 64px !important;
  }

  .barista-feature-hint {
    right: 8px !important;
    min-width: 68px !important;
  }
}

/* =========================================================
   L'abeille D'or - Barista Polish v2
   Date: 2026-05-28
   Purpose:
   1) make Barista section blend with page background
   2) refine paragraph spacing
   3) correct Barista-only header nav landing on PC and phone
   ========================================================= */

/* Blend Barista section with page background */
.barista-atelier-section {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Softer main media treatment, closer to other approved sections */
.barista-main-media {
  background: transparent !important;
  box-shadow: 0 18px 40px rgba(74, 47, 34, 0.08) !important;
}

.barista-main-media::before,
.barista-main-media::after {
  display: none !important;
  content: none !important;
}

/* Keep side panel clean, not card-like */
.barista-side-panel {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Make the two text areas feel intentionally different */
.barista-atelier-heading p:not(.eyebrow) {
  max-width: 720px !important;
  line-height: 1.52 !important;
}

.barista-side-panel p:not(.eyebrow) {
  max-width: 360px !important;
  line-height: 1.48 !important;
}

/* Barista-only header nav landing.
   PC was landing too low visually, so we reduce the desktop offset.
   Mobile was eating the eyebrow/headline, so we increase the mobile offset.
*/
@media (min-width: 981px) {
  #barista {
    scroll-margin-top: 150px !important;
  }
}

@media (min-width: 981px) and (max-height: 780px) {
  #barista {
    scroll-margin-top: 140px !important;
  }
}

@media (max-width: 980px) {
  #barista {
    scroll-margin-top: 205px !important;
  }
}

@media (max-width: 640px) {
  #barista {
    scroll-margin-top: 215px !important;
  }
}

/* =========================================================
   L'abeille D'or - Barista Polish v3
   Date: 2026-05-28
   Purpose:
   1) push Barista nav landing slightly downward on PC and phone
   2) blend Barista media edges with page background
   3) reduce and standardize Barista main heading
   ========================================================= */

/* ---------- Barista-only nav landing correction ---------- */
/* Lower scroll-margin-top = page lands slightly lower */
@media (min-width: 981px) {
  #barista {
    scroll-margin-top: 138px !important;
  }
}

@media (min-width: 981px) and (max-height: 780px) {
  #barista {
    scroll-margin-top: 130px !important;
  }
}

@media (max-width: 980px) {
  #barista {
    scroll-margin-top: 176px !important;
  }
}

@media (max-width: 640px) {
  #barista {
    scroll-margin-top: 178px !important;
  }
}

/* ---------- Main Barista heading standardization ---------- */

.barista-atelier-heading {
  margin-bottom: 20px !important;
}

.barista-atelier-heading .eyebrow {
  margin-bottom: 8px !important;
}

.barista-atelier-heading h2 {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: clamp(1.72rem, 2.45vw, 2.65rem) !important;
  line-height: 1.08 !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  color: #2f2118 !important;
  margin-bottom: 8px !important;
}

.barista-atelier-heading p:not(.eyebrow) {
  max-width: 720px !important;
  font-size: clamp(0.84rem, 0.9vw, 0.92rem) !important;
  line-height: 1.48 !important;
}

/* ---------- Media edge blending ---------- */

.barista-main-media {
  border-radius: 30px !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 1px solid rgba(198, 146, 62, 0.08) !important;
  outline-offset: -1px !important;
}

.barista-main-video,
.barista-main-image {
  border-radius: 30px !important;
}

/* Add a very soft inner fade instead of a visible card edge */
.barista-main-media::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  box-shadow: inset 0 0 0 1px rgba(255, 250, 243, 0.16) !important;
}

/* Controls must stay above the soft edge overlay */
.barista-sound-toggle,
.barista-play-toggle,
.barista-feature-hint {
  z-index: 24 !important;
}

/* Side panel should remain open/background-free */
.barista-side-panel {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Softer thumbnails, less card-like */
.barista-thumb {
  border-radius: 16px !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 1px solid rgba(198, 146, 62, 0.08) !important;
  outline-offset: -1px !important;
}

.barista-thumb-media {
  border-radius: 16px !important;
}

.barista-thumb::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  box-shadow: inset 0 0 0 1px rgba(255, 250, 243, 0.12) !important;
}

/* Slightly tighter full-screen laptop fit */
@media (min-width: 981px) {
  .barista-atelier-section {
    padding-top: 34px !important;
    padding-bottom: 42px !important;
    margin-bottom: 48px !important;
  }

  .barista-atelier-showcase {
    min-height: 390px !important;
    gap: 26px !important;
  }

  .barista-main-media,
  .barista-main-video,
  .barista-main-image {
    min-height: 390px !important;
  }

  .barista-side-panel h3 {
    font-size: clamp(1.26rem, 1.72vw, 1.78rem) !important;
    line-height: 1.08 !important;
  }

  .barista-side-panel p:not(.eyebrow) {
    font-size: 0.86rem !important;
    line-height: 1.44 !important;
  }

  .barista-thumbs {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }
}

/* Smaller laptop */
@media (min-width: 981px) and (max-height: 780px) {
  .barista-atelier-section {
    padding-top: 24px !important;
    padding-bottom: 34px !important;
    margin-bottom: 40px !important;
  }

  .barista-atelier-heading {
    margin-bottom: 16px !important;
  }

  .barista-atelier-heading h2 {
    font-size: clamp(1.62rem, 2.15vw, 2.35rem) !important;
  }

  .barista-atelier-heading p:not(.eyebrow) {
    line-height: 1.38 !important;
  }

  .barista-atelier-showcase {
    min-height: 340px !important;
  }

  .barista-main-media,
  .barista-main-video,
  .barista-main-image {
    min-height: 340px !important;
  }

  .barista-thumbs {
    margin-top: 14px !important;
    margin-bottom: 14px !important;
  }
}

/* Mobile: keep smooth, not over-compressed */
@media (max-width: 640px) {
  .barista-atelier-heading h2 {
    font-size: clamp(1.52rem, 5.7vw, 2.08rem) !important;
    line-height: 1.12 !important;
  }

  .barista-atelier-heading p:not(.eyebrow) {
    font-size: 0.84rem !important;
    line-height: 1.48 !important;
  }

  .barista-main-media,
  .barista-main-video,
  .barista-main-image {
    min-height: 270px !important;
    border-radius: 24px !important;
  }

  .barista-main-media::after {
    border-radius: 24px !important;
  }

  .barista-thumb,
  .barista-thumb-media,
  .barista-thumb::after {
    border-radius: 14px !important;
  }
}

/* =========================================================
   L'abeille D'or - Hero / Knefe / Occasions Fit v1
   Date: 2026-05-28
   Purpose:
   1) prevent Selection headline from peeking under Hero on desktop
   2) reduce Our Knefe top space slightly
   3) move Occasions internal landing one notch upward
   ========================================================= */

/* ---------- Hero: keep next section from peeking on PC ---------- */

@media (min-width: 981px) {
  .hero {
    min-height: calc(100vh - 16px) !important;
    padding-bottom: 54px !important;
  }
}

/* Smaller laptop screens */
@media (min-width: 981px) and (max-height: 780px) {
  .hero {
    min-height: calc(100vh - 8px) !important;
    padding-bottom: 42px !important;
  }
}

/* Do not force Hero height on phone */
@media (max-width: 980px) {
  .hero {
    min-height: auto !important;
  }
}

/* ---------- Our Knefe: reduce top breathing space by one notch ---------- */

@media (min-width: 981px) {
  .knefe-story-section {
    padding-top: 18px !important;
  }
}

@media (min-width: 981px) and (max-height: 780px) {
  .knefe-story-section {
    padding-top: 12px !important;
  }
}

@media (max-width: 640px) {
  .knefe-story-section {
    padding-top: 16px !important;
  }
}

/* ---------- Occasions: move approved nav landing one notch upward ---------- */

/*
  Lower scroll-margin-top = the page scrolls slightly more,
  so the Occasions nav/content moves upward in the viewport.
  This keeps the bottom of the reel/thumbnails from touching the screen bottom.
*/
@media (min-width: 981px) {
  .occasion-nav-landing {
    scroll-margin-top: 118px !important;
  }
}

@media (min-width: 981px) and (max-height: 780px) {
  .occasion-nav-landing {
    scroll-margin-top: 108px !important;
  }
}

/* Mobile stays smooth, no forced full-screen behavior */
@media (max-width: 980px) {
  .occasion-nav-landing {
    scroll-margin-top: 96px !important;
  }
}

@media (max-width: 640px) {
  .occasion-nav-landing {
    scroll-margin-top: 88px !important;
  }
}

/* =========================================================
   L'abeille D'or - Section Up + Barista Heading v1
   Date: 2026-05-28
   Purpose:
   1) push all approved sections except Barista up by one visual line
   2) keep Barista full-screen position unchanged
   3) standardize Barista side headline font/size
   ========================================================= */

/* ---------------------------------------------------------
   Push sections up by one notch.
   This excludes Barista because its full-screen view is approved.
   --------------------------------------------------------- */

@media (min-width: 981px) {
  /* Hero: prevent next section from peeking while keeping hero balanced */
  .hero {
    padding-top: 34px !important;
    padding-bottom: 60px !important;
  }

  /* Selection */
  #selection.selection-tabs-section {
    padding-top: 28px !important;
  }

  /* Reels */
  #brand-reel.brand-reel-section {
    padding-top: 28px !important;
  }

  /* Our Knefe */
  #our-knefe.knefe-story-section {
    padding-top: 10px !important;
  }

  /* Occasions: keep the approved nav-spacer behavior but move visual content up slightly */
  #occasions.occasion-atelier-section {
    padding-top: 6px !important;
  }

  .occasion-nav-landing {
    scroll-margin-top: 108px !important;
  }

  /* Branches and Contact */
  #branches {
    padding-top: 28px !important;
  }

  #contact.contact-section {
    padding-top: 28px !important;
  }
}

/* Smaller laptop screens */
@media (min-width: 981px) and (max-height: 780px) {
  .hero {
    padding-top: 26px !important;
    padding-bottom: 48px !important;
  }

  #selection.selection-tabs-section,
  #brand-reel.brand-reel-section,
  #branches,
  #contact.contact-section {
    padding-top: 22px !important;
  }

  #our-knefe.knefe-story-section {
    padding-top: 6px !important;
  }

  #occasions.occasion-atelier-section {
    padding-top: 4px !important;
  }

  .occasion-nav-landing {
    scroll-margin-top: 100px !important;
  }
}

/* Mobile/tablet: keep smooth natural scrolling, only minor top tightening */
@media (max-width: 980px) {
  #selection.selection-tabs-section,
  #brand-reel.brand-reel-section,
  #our-knefe.knefe-story-section,
  #occasions.occasion-atelier-section,
  #branches,
  #contact.contact-section {
    padding-top: 18px !important;
  }
}

@media (max-width: 640px) {
  #selection.selection-tabs-section,
  #brand-reel.brand-reel-section,
  #our-knefe.knefe-story-section,
  #occasions.occasion-atelier-section,
  #branches,
  #contact.contact-section {
    padding-top: 16px !important;
  }
}

/* ---------------------------------------------------------
   Barista: keep approved section position, only fix side headline.
   --------------------------------------------------------- */

.barista-side-panel h3 {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: clamp(1.72rem, 2.45vw, 2.65rem) !important;
  line-height: 1.08 !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  color: #2f2118 !important;
  margin: 0 0 10px !important;
}

/* Smaller laptop Barista side heading */
@media (min-width: 981px) and (max-height: 780px) {
  .barista-side-panel h3 {
    font-size: clamp(1.55rem, 2.05vw, 2.3rem) !important;
    line-height: 1.08 !important;
  }
}

/* Mobile Barista side heading */
@media (max-width: 640px) {
  .barista-side-panel h3 {
    font-size: clamp(1.52rem, 5.7vw, 2.08rem) !important;
    line-height: 1.12 !important;
  }
}

/* =========================================================
   L'abeille D'or - PC Occasions + Barista Tune v1
   Date: 2026-05-28
   Purpose:
   1) move Occasions PC internal landing one line downward
   2) make Barista PC section more compact
   3) stretch Barista first narrative to two lines where possible
   4) leave mobile unchanged
   ========================================================= */

/* ---------- PC only: Occasions one line down ---------- */
/*
  Higher scroll-margin-top = page stops earlier = section appears slightly lower.
  This only affects the internal Occasions nav landing on PC/laptop.
*/
@media (min-width: 981px) {
  .occasion-nav-landing {
    scroll-margin-top: 124px !important;
  }
}

@media (min-width: 981px) and (max-height: 780px) {
  .occasion-nav-landing {
    scroll-margin-top: 114px !important;
  }
}

/* ---------- PC only: Barista compact full-screen fit ---------- */

@media (min-width: 981px) {
  .barista-atelier-section {
    padding-top: 26px !important;
    padding-bottom: 30px !important;
    margin-bottom: 36px !important;
  }

  .barista-atelier-heading {
    max-width: 980px !important;
    margin-bottom: 14px !important;
  }

  .barista-atelier-heading .eyebrow {
    margin-bottom: 6px !important;
  }

  .barista-atelier-heading h2 {
    margin-bottom: 6px !important;
    font-size: clamp(1.62rem, 2.25vw, 2.42rem) !important;
    line-height: 1.06 !important;
  }

  .barista-atelier-heading p:not(.eyebrow) {
    max-width: 940px !important;
    font-size: 0.86rem !important;
    line-height: 1.38 !important;
  }

  .barista-atelier-showcase {
    min-height: 350px !important;
    gap: 24px !important;
  }

  .barista-main-media,
  .barista-main-video,
  .barista-main-image {
    min-height: 350px !important;
  }

  .barista-side-panel {
    padding-top: 0 !important;
  }

  .barista-side-panel .eyebrow {
    margin-bottom: 6px !important;
  }

  .barista-side-panel h3 {
    margin-bottom: 7px !important;
    font-size: clamp(1.48rem, 2.05vw, 2.25rem) !important;
    line-height: 1.06 !important;
  }

  .barista-side-panel p:not(.eyebrow) {
    max-width: 380px !important;
    font-size: 0.82rem !important;
    line-height: 1.36 !important;
  }

  .barista-thumbs {
    margin-top: 14px !important;
    margin-bottom: 14px !important;
    gap: 9px !important;
  }

  .barista-side-panel .btn.primary {
    min-height: 38px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    font-size: 0.78rem !important;
  }
}

/* Smaller laptop full-screen fit */
@media (min-width: 981px) and (max-height: 780px) {
  .barista-atelier-section {
    padding-top: 20px !important;
    padding-bottom: 24px !important;
    margin-bottom: 30px !important;
  }

  .barista-atelier-heading {
    margin-bottom: 12px !important;
  }

  .barista-atelier-heading h2 {
    font-size: clamp(1.5rem, 2vw, 2.18rem) !important;
  }

  .barista-atelier-heading p:not(.eyebrow) {
    font-size: 0.82rem !important;
    line-height: 1.32 !important;
  }

  .barista-atelier-showcase {
    min-height: 320px !important;
  }

  .barista-main-media,
  .barista-main-video,
  .barista-main-image {
    min-height: 320px !important;
  }

  .barista-side-panel h3 {
    font-size: clamp(1.34rem, 1.82vw, 2rem) !important;
  }

  .barista-side-panel p:not(.eyebrow) {
    font-size: 0.78rem !important;
    line-height: 1.3 !important;
  }

  .barista-thumbs {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }

  .barista-side-panel .btn.primary {
    min-height: 36px !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
  }
}

/* =========================================================
   L'abeille D'or - Barista Layout v4
   Date: 2026-05-28
   Purpose:
   1) make Barista closer to Selection/Occasions structure
   2) widen top narrative so it does not wrap into 3 lines
   3) add balanced 4-thumbnail pairing grid
   4) reduce PC media height so reel/thumbnails/CTA are not cut
   ========================================================= */

/* PC / laptop only */
@media (min-width: 981px) {
  .barista-atelier-section {
    padding-top: 18px !important;
    padding-bottom: 26px !important;
    margin-bottom: 32px !important;
  }

  .barista-atelier-heading {
    max-width: 1120px !important;
    margin: 0 auto 18px !important;
    text-align: center !important;
  }

  .barista-atelier-heading .eyebrow {
    margin-bottom: 6px !important;
  }

  .barista-atelier-heading h2 {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: clamp(1.78rem, 2.35vw, 2.55rem) !important;
    line-height: 1.06 !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 8px !important;
  }

  .barista-atelier-heading p:not(.eyebrow) {
    max-width: 1040px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: 0.86rem !important;
    line-height: 1.38 !important;
    font-weight: 500 !important;
  }

  .barista-atelier-showcase {
    grid-template-columns: minmax(0, 0.58fr) minmax(360px, 0.42fr) !important;
    gap: 28px !important;
    min-height: 335px !important;
    align-items: stretch !important;
  }

  .barista-main-media,
  .barista-main-video,
  .barista-main-image {
    min-height: 335px !important;
    border-radius: 28px !important;
  }

  .barista-side-panel {
    padding-top: 4px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .barista-side-panel .eyebrow {
    margin-bottom: 7px !important;
  }

  .barista-side-panel h3 {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: clamp(1.55rem, 2.15vw, 2.35rem) !important;
    line-height: 1.06 !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 8px !important;
    color: #2f2118 !important;
  }

  .barista-side-panel p:not(.eyebrow) {
    max-width: 460px !important;
    font-size: 0.84rem !important;
    line-height: 1.38 !important;
    font-weight: 500 !important;
  }

  .barista-thumbs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
    margin-top: 14px !important;
    margin-bottom: 14px !important;
  }

  .barista-thumb {
    aspect-ratio: 1.92 / 1 !important;
    border-radius: 15px !important;
  }

  .barista-thumb-media {
    border-radius: inherit !important;
  }

  .barista-thumb-label {
    position: absolute !important;
    left: 9px !important;
    right: 9px !important;
    bottom: 7px !important;
    z-index: 3 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 22px !important;
    padding: 4px 7px !important;
    border-radius: 999px !important;
    background: rgba(255, 250, 243, 0.82) !important;
    color: #4a2f22 !important;
    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: 0.56rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-align: center !important;
    backdrop-filter: blur(10px) !important;
  }

  .barista-side-panel .btn.primary {
    width: 100% !important;
    min-height: 38px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    font-size: 0.78rem !important;
    margin-top: auto !important;
  }
}

/* Smaller laptop screens */
@media (min-width: 981px) and (max-height: 780px) {
  .barista-atelier-section {
    padding-top: 14px !important;
    padding-bottom: 20px !important;
    margin-bottom: 26px !important;
  }

  .barista-atelier-heading {
    margin-bottom: 14px !important;
  }

  .barista-atelier-heading h2 {
    font-size: clamp(1.6rem, 2.1vw, 2.25rem) !important;
    margin-bottom: 6px !important;
  }

  .barista-atelier-heading p:not(.eyebrow) {
    font-size: 0.8rem !important;
    line-height: 1.3 !important;
  }

  .barista-atelier-showcase {
    min-height: 310px !important;
    gap: 24px !important;
  }

  .barista-main-media,
  .barista-main-video,
  .barista-main-image {
    min-height: 310px !important;
  }

  .barista-side-panel h3 {
    font-size: clamp(1.4rem, 1.85vw, 2.05rem) !important;
    margin-bottom: 6px !important;
  }

  .barista-side-panel p:not(.eyebrow) {
    font-size: 0.78rem !important;
    line-height: 1.3 !important;
  }

  .barista-thumbs {
    gap: 8px !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }

  .barista-thumb-label {
    min-height: 20px !important;
    font-size: 0.52rem !important;
    bottom: 6px !important;
  }
}

/* Mobile stays mostly as already approved, only support the 4-thumb layout cleanly */
@media (max-width: 640px) {
  .barista-thumbs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  .barista-thumb {
    aspect-ratio: 1.55 / 1 !important;
  }

  .barista-thumb-label {
    position: absolute !important;
    left: 7px !important;
    right: 7px !important;
    bottom: 6px !important;
    z-index: 3 !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 20px !important;
    padding: 4px 6px !important;
    border-radius: 999px !important;
    background: rgba(255, 250, 243, 0.82) !important;
    color: #4a2f22 !important;
    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: 0.5rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-align: center !important;
  }
}

/* =========================================================
   L'abeille D'or - Mobile Occasions to Barista Gap v1
   Date: 2026-05-28
   Purpose: reduce the large phone gap between Occasions and Barista
   ========================================================= */

/*
  Phone only.
  Desktop/laptop Occasions full-screen behavior remains locked.
*/
@media (max-width: 640px) {
  #occasions.occasion-atelier-section {
    margin-bottom: 18px !important;
    padding-bottom: 18px !important;
  }

  #barista.barista-atelier-section {
    padding-top: 12px !important;
    margin-top: 0 !important;
  }
}

/* Tablet safety: reduce only slightly, not aggressively */
@media (min-width: 641px) and (max-width: 980px) {
  #occasions.occasion-atelier-section {
    margin-bottom: 28px !important;
    padding-bottom: 24px !important;
  }

  #barista.barista-atelier-section {
    padding-top: 20px !important;
    margin-top: 0 !important;
  }
}

/* =========================================================
   L'abeille D'or - Barista Six Thumbnails v5
   Date: 2026-05-28
   Purpose:
   1) keep right headline on one line on PC
   2) expand right paragraph width
   3) use 6 labeled thumbnails without making the section feel heavy
   ========================================================= */

/* PC / laptop Barista refinement */
@media (min-width: 981px) {
  .barista-atelier-showcase {
    grid-template-columns: minmax(0, 0.55fr) minmax(440px, 0.45fr) !important;
    gap: 30px !important;
    min-height: 335px !important;
  }

  .barista-main-media,
  .barista-main-video,
  .barista-main-image {
    min-height: 335px !important;
  }

  .barista-side-panel {
    min-width: 0 !important;
    padding-top: 0 !important;
  }

  .barista-side-panel h3 {
    font-size: clamp(1.42rem, 1.75vw, 2rem) !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    margin-bottom: 8px !important;
  }

  .barista-side-panel p:not(.eyebrow) {
    max-width: 100% !important;
    width: 100% !important;
    font-size: 0.82rem !important;
    line-height: 1.36 !important;
  }

  .barista-thumbs {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 12px !important;
    margin-bottom: 12px !important;
  }

  .barista-thumb {
    aspect-ratio: 1.45 / 1 !important;
    border-radius: 14px !important;
  }

  .barista-thumb-label {
    left: 6px !important;
    right: 6px !important;
    bottom: 5px !important;
    min-height: 19px !important;
    padding: 3px 5px !important;
    font-size: 0.48rem !important;
    letter-spacing: 0.01em !important;
  }

  .barista-side-panel .btn.primary {
    min-height: 36px !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    font-size: 0.76rem !important;
  }
}

/* Smaller laptop screens */
@media (min-width: 981px) and (max-height: 780px) {
  .barista-atelier-showcase {
    grid-template-columns: minmax(0, 0.55fr) minmax(420px, 0.45fr) !important;
    min-height: 310px !important;
    gap: 26px !important;
  }

  .barista-main-media,
  .barista-main-video,
  .barista-main-image {
    min-height: 310px !important;
  }

  .barista-side-panel h3 {
    font-size: clamp(1.28rem, 1.55vw, 1.8rem) !important;
    margin-bottom: 6px !important;
  }

  .barista-side-panel p:not(.eyebrow) {
    font-size: 0.76rem !important;
    line-height: 1.28 !important;
  }

  .barista-thumbs {
    gap: 7px !important;
    margin-top: 9px !important;
    margin-bottom: 9px !important;
  }

  .barista-thumb {
    aspect-ratio: 1.5 / 1 !important;
  }

  .barista-thumb-label {
    min-height: 18px !important;
    font-size: 0.45rem !important;
    bottom: 4px !important;
  }

  .barista-side-panel .btn.primary {
    min-height: 34px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
}

/* Mobile: keep it readable with 2 columns */
@media (max-width: 640px) {
  .barista-thumbs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  .barista-thumb {
    aspect-ratio: 1.45 / 1 !important;
  }

  .barista-thumb-label {
    font-size: 0.48rem !important;
  }
}

/* =========================================================
   L'abeille D'or - Barista Labels Fix v1
   Date: 2026-05-28
   Purpose: restore and force visibility of Barista thumbnail labels
   ========================================================= */

.barista-thumb {
  position: relative !important;
  overflow: hidden !important;
}

.barista-thumb-media {
  position: relative !important;
  z-index: 1 !important;
}

.barista-thumb::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 42% !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background: linear-gradient(
    180deg,
    rgba(47, 33, 24, 0),
    rgba(47, 33, 24, 0.28)
  ) !important;
}

.barista-thumb-label {
  position: absolute !important;
  left: 7px !important;
  right: 7px !important;
  bottom: 6px !important;
  z-index: 5 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 21px !important;
  padding: 4px 7px !important;
  border-radius: 999px !important;
  background: rgba(255, 250, 243, 0.86) !important;
  color: #4a2f22 !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 0.52rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 8px 18px rgba(74, 47, 34, 0.12) !important;
  pointer-events: none !important;
}

/* PC: keep labels compact inside 6-thumbnail layout */
@media (min-width: 981px) {
  .barista-thumb-label {
    left: 6px !important;
    right: 6px !important;
    bottom: 5px !important;
    min-height: 19px !important;
    padding: 3px 5px !important;
    font-size: 0.48rem !important;
  }
}

/* Mobile: keep readable */
@media (max-width: 640px) {
  .barista-thumb-label {
    left: 7px !important;
    right: 7px !important;
    bottom: 6px !important;
    min-height: 20px !important;
    padding: 4px 6px !important;
    font-size: 0.5rem !important;
  }
}

/* =========================================================
   L'abeille D'or - Barista Labels Under Thumbnails v2
   Date: 2026-05-28
   Purpose: move Barista thumbnail labels below images with elegant italic styling
   ========================================================= */

/*
  Labels should read like captions, not like buttons inside thumbnails.
  Use Cormorant italic for a refined touch without going full calligraphic.
*/

.barista-thumb {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  aspect-ratio: auto !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0 !important;
}

.barista-thumb::before,
.barista-thumb::after {
  display: none !important;
  content: none !important;
}

.barista-thumb-media {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1.45 / 1 !important;
  border-radius: 14px !important;
  background: var(--barista-thumb, none) center / cover no-repeat !important;
  box-shadow: 0 10px 22px rgba(74, 47, 34, 0.08) !important;
  outline: 1px solid rgba(198, 146, 62, 0.08) !important;
  outline-offset: -1px !important;
}

.barista-thumb-label {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 1 !important;
  display: block !important;
  min-height: 0 !important;
  padding: 0 2px !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #4a2f22 !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: 0.86rem !important;
  font-style: italic !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: 0.01em !important;
  text-align: center !important;
  white-space: normal !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

/* PC: keep six thumbnails compact */
@media (min-width: 981px) {
  .barista-thumbs {
    gap: 9px 10px !important;
  }

  .barista-thumb {
    gap: 5px !important;
  }

  .barista-thumb-label {
    font-size: 0.78rem !important;
  }
}

/* Smaller laptop */
@media (min-width: 981px) and (max-height: 780px) {
  .barista-thumbs {
    gap: 7px 9px !important;
  }

  .barista-thumb {
    gap: 4px !important;
  }

  .barista-thumb-label {
    font-size: 0.72rem !important;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .barista-thumb {
    gap: 5px !important;
  }

  .barista-thumb-media {
    aspect-ratio: 1.45 / 1 !important;
    border-radius: 13px !important;
  }

  .barista-thumb-label {
    font-size: 0.76rem !important;
    line-height: 1.05 !important;
  }
}

/* =========================================================
   L'abeille D'or - Barista Signature Labels v1
   Date: 2026-05-28
   Purpose:
   1) test PC-only handwritten/signature-style thumbnail labels
   2) position labels top-left, slightly angled, partly over thumbnail
   3) keep phone label style unchanged for now
   ========================================================= */

/*
  Truthmode:
  This uses a handwritten-style font stack. On Windows, Segoe Script may appear.
  If the browser does not have it, it falls back to Brush Script MT, then Cormorant.
  We are not importing a new font yet to avoid adding external dependencies.
*/

@media (min-width: 981px) {
  .barista-thumbs {
    padding-top: 12px !important;
    gap: 13px 12px !important;
    overflow: visible !important;
  }

  .barista-thumb {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  .barista-thumb-media {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    aspect-ratio: 1.45 / 1 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: var(--barista-thumb, none) center / cover no-repeat !important;
    box-shadow: 0 10px 22px rgba(74, 47, 34, 0.08) !important;
    outline: 1px solid rgba(198, 146, 62, 0.08) !important;
    outline-offset: -1px !important;
  }

  .barista-thumb::before,
  .barista-thumb::after {
    display: none !important;
    content: none !important;
  }

  .barista-thumb-label {
    position: absolute !important;
    top: -9px !important;
    left: -4px !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 6 !important;

    display: inline-block !important;
    min-height: 0 !important;
    max-width: 118px !important;
    padding: 0 !important;
    margin: 0 !important;

    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;

    font-family: "Segoe Script", "Brush Script MT", "Cormorant Garamond", Georgia, serif !important;
    font-size: 1.02rem !important;
    font-style: italic !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: -0.01em !important;

    color: #5b351f !important;
    text-align: left !important;
    white-space: nowrap !important;
    transform: rotate(-8deg) !important;
    transform-origin: left center !important;

    text-shadow:
      0 1px 0 rgba(255, 250, 243, 0.85),
      0 6px 14px rgba(74, 47, 34, 0.16) !important;

    pointer-events: none !important;
  }

  .barista-thumb:nth-child(2) .barista-thumb-label,
  .barista-thumb:nth-child(5) .barista-thumb-label {
    transform: rotate(-6deg) !important;
  }

  .barista-thumb:nth-child(3) .barista-thumb-label,
  .barista-thumb:nth-child(6) .barista-thumb-label {
    transform: rotate(-9deg) !important;
  }
}

/* Smaller laptop: keep the signature effect but slightly tighter */
@media (min-width: 981px) and (max-height: 780px) {
  .barista-thumbs {
    padding-top: 10px !important;
    gap: 11px 10px !important;
  }

  .barista-thumb-label {
    top: -8px !important;
    left: -3px !important;
    font-size: 0.92rem !important;
    max-width: 108px !important;
  }
}

/* =========================================================
   L'abeille D'or - Barista Media Safety v6
   Date: 2026-05-28
   Purpose: support deterministic Barista reel/photo/thumb rendering
   ========================================================= */

.barista-thumb-media {
  background: var(--barista-thumb, none) center / cover no-repeat !important;
}

.barista-main-video.is-active {
  display: block !important;
}

.barista-main-image.is-active {
  display: block !important;
}

.barista-main-media.has-video .barista-main-image {
  display: none !important;
}

.barista-main-media.has-image .barista-main-video {
  display: none !important;
}

/* Make overlay media feel clickable again for double-click/double-tap close */
.media-overlay img,
.media-overlay video,
.lightbox-overlay img,
.lightbox-overlay video,
.image-overlay img,
.image-overlay video,
.gallery-overlay img,
.gallery-overlay video {
  cursor: zoom-out !important;
}

/* =========================================================
   L'abeille D'or - Barista Real Naming Safety v7
   Date: 2026-05-28
   Purpose: force Barista thumbnails and reel/image state after naming correction
   ========================================================= */

.barista-thumb-media {
  background: var(--barista-thumb, none) center / cover no-repeat !important;
}

.barista-main-media.has-video .barista-main-video,
.barista-main-video.is-active {
  display: block !important;
}

.barista-main-media.has-video .barista-main-image {
  display: none !important;
}

.media-overlay img,
.media-overlay video,
.lightbox-overlay img,
.lightbox-overlay video,
.image-overlay img,
.image-overlay video,
.gallery-overlay img,
.gallery-overlay video {
  cursor: zoom-out !important;
}

/* =========================================================
   L'abeille D'or - Barista IMG Thumbnail Fix v8
   Date: 2026-05-28
   Purpose:
   1) make Barista thumbnails show real images at rest
   2) stop relying on CSS background-image for thumbnails
   3) preserve PC signature labels
   ========================================================= */

.barista-thumb-media {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1.45 / 1 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: rgba(255, 250, 243, 0.7) !important;
  box-shadow: 0 10px 22px rgba(74, 47, 34, 0.08) !important;
  outline: 1px solid rgba(198, 146, 62, 0.08) !important;
  outline-offset: -1px !important;
}

.barista-thumb-media img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: inherit !important;
}

/* Make sure old background-based rules do not hide the image */
.barista-thumb-media::before,
.barista-thumb-media::after {
  display: none !important;
  content: none !important;
}

/* Barista reel visibility */
.barista-main-video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.barista-main-video.is-active,
.barista-main-media.has-video .barista-main-video {
  display: block !important;
}

.barista-main-media.has-video .barista-main-image {
  display: none !important;
}

/* =========================================================
   L'abeille D'or - Barista Reel + Full Image Fit v9
   Date: 2026-05-28
   Purpose:
   1) show full Barista thumbnail images without cropping
   2) force Barista reel visibility after poster/video generation
   ========================================================= */

/* Thumbnail frame: full image fit, no cropping */
.barista-thumb-media {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.75), rgba(246, 232, 211, 0.62)) !important;
}

.barista-thumb-media img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: inherit !important;
}

/* Barista reel must be visible when active */
.barista-main-media.has-video,
.barista-main-media {
  position: relative !important;
}

#barista-main-video,
.barista-main-video {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: inherit !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 2 !important;
}

.barista-main-video.is-active,
.barista-main-media.has-video #barista-main-video {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.barista-main-media.has-video .barista-main-image {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Keep signature labels above the fitted image */
.barista-thumb-label {
  z-index: 6 !important;
}

/* =========================================================
   L'abeille D'or - Barista Cover Thumbnails v10
   Date: 2026-05-28
   Purpose:
   1) use generated thumbnail files that fill the frame
   2) keep original images for popup overlay
   3) remove contain-style empty spaces
   ========================================================= */

.barista-thumb-media {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 1.5 / 1 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: rgba(255, 250, 243, 0.72) !important;
}

.barista-thumb-media img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: inherit !important;
}

/* Keep signature labels above thumbnail */
@media (min-width: 981px) {
  .barista-thumb-label {
    z-index: 8 !important;
  }
}

/* =========================================================
   L'abeille D'or - Restore Barista Video v11
   Date: 2026-05-28
   Purpose: restore and force visible Barista reel after missing video element
   ========================================================= */

#barista-main-video,
.barista-main-video {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 3 !important;
}

.barista-main-media {
  position: relative !important;
  overflow: hidden !important;
}

.barista-main-media.has-video #barista-main-video,
#barista-main-video.is-active {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.barista-main-media.has-video .barista-main-image {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* =========================================================
   L'abeille D'or - Barista Final Behavior v12
   Date: 2026-05-28
   Purpose:
   1) main Barista media is reel-only
   2) thumbnails open dedicated overlay
   3) prevent thumbnail clicks from visually replacing reel
   ========================================================= */

.barista-main-media {
  position: relative !important;
  overflow: hidden !important;
}

#barista-main-video,
.barista-main-video {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 3 !important;
}

.barista-main-media.has-video .barista-main-image,
.barista-main-image {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.barista-sound-toggle,
.barista-play-toggle,
.barista-feature-hint {
  position: absolute !important;
  z-index: 30 !important;
}

/* Dedicated Barista photo overlay */
.barista-photo-overlay-v12 {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 28px !important;
  background: rgba(35, 24, 17, 0.78) !important;
  backdrop-filter: blur(10px) !important;
}

.barista-photo-overlay-v12.is-open {
  display: flex !important;
}

.barista-overlay-frame-v12 {
  width: min(92vw, 980px) !important;
  height: min(84vh, 760px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.barista-overlay-img-v12 {
  display: block !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  border-radius: 22px !important;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.32) !important;
  cursor: zoom-out !important;
  background: rgba(255, 250, 243, 0.2) !important;
}

.barista-overlay-close-v12 {
  position: fixed !important;
  top: 18px !important;
  right: 22px !important;
  z-index: 10000 !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 250, 243, 0.48) !important;
  background: rgba(255, 250, 243, 0.18) !important;
  color: #fffaf3 !important;
  font-size: 2rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

body.barista-overlay-open-v12 {
  overflow: hidden !important;
}

@media (max-width: 640px) {
  .barista-photo-overlay-v12 {
    padding: 18px !important;
  }

  .barista-overlay-frame-v12 {
    width: 94vw !important;
    height: 82vh !important;
  }

  .barista-overlay-img-v12 {
    border-radius: 18px !important;
  }

  .barista-overlay-close-v12 {
    top: 14px !important;
    right: 14px !important;
  }
}

/* =========================================================
   L'abeille D'or - Barista Actual Visuals v13
   Date: 2026-05-28
   Purpose:
   1) target actual Barista classes from current HTML
   2) blend reel and thumbnail edges with background
   3) add elegant overlay fade/zoom effect
   ========================================================= */

/* Main Barista reel frame */
.barista-media-card {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 30px !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 1px solid rgba(198, 146, 62, 0.08) !important;
  outline-offset: -1px !important;
}

.barista-media-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 8 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  box-shadow:
    inset 0 0 26px rgba(255, 250, 243, 0.42),
    inset 0 -34px 42px rgba(246, 232, 211, 0.15) !important;
}

#barista-reel-video,
.barista-reel-video {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 3 !important;
}

#barista-reel-video.is-hidden,
.barista-reel-video.is-hidden {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.barista-media-card.has-video .barista-main-image {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.barista-sound-toggle,
.barista-play-toggle,
.barista-feature-hint {
  z-index: 30 !important;
}

/* Side thumbnails: blend edges with background */
.barista-thumb-media {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 15px !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 1px solid rgba(198, 146, 62, 0.08) !important;
  outline-offset: -1px !important;
}

.barista-thumb-media::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  box-shadow:
    inset 0 0 16px rgba(255, 250, 243, 0.42),
    inset 0 -20px 26px rgba(246, 232, 211, 0.10) !important;
}

.barista-thumb-media img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: inherit !important;
}

/* Elegant Barista overlay */
.barista-elegant-overlay-v13 {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 30px !important;
  background: rgba(35, 24, 17, 0) !important;
  backdrop-filter: blur(0) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition:
    opacity 260ms ease,
    visibility 260ms ease,
    background 260ms ease,
    backdrop-filter 260ms ease !important;
}

.barista-elegant-overlay-v13.is-open {
  background: rgba(35, 24, 17, 0.72) !important;
  backdrop-filter: blur(10px) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.barista-elegant-frame-v13 {
  width: min(92vw, 980px) !important;
  height: min(84vh, 760px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: translateY(14px) scale(0.965) !important;
  opacity: 0 !important;
  transition:
    transform 320ms cubic-bezier(.2,.8,.2,1),
    opacity 260ms ease !important;
}

.barista-elegant-overlay-v13.is-open .barista-elegant-frame-v13 {
  transform: translateY(0) scale(1) !important;
  opacity: 1 !important;
}

.barista-elegant-img-v13,
.barista-elegant-video-v13 {
  display: block !important;
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 22px !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.34) !important;
  background: rgba(255, 250, 243, 0.16) !important;
  cursor: zoom-out !important;
}

.barista-elegant-video-v13 {
  width: min(92vw, 560px) !important;
  height: min(84vh, 760px) !important;
  object-fit: contain !important;
}

.barista-elegant-close-v13 {
  position: fixed !important;
  top: 18px !important;
  right: 22px !important;
  z-index: 10000 !important;
  border: 1px solid rgba(255, 250, 243, 0.45) !important;
  border-radius: 999px !important;
  padding: 10px 16px !important;
  background: rgba(255, 250, 243, 0.16) !important;
  color: #fffaf3 !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}

body.barista-overlay-open-v13 {
  overflow: hidden !important;
}

@media (max-width: 640px) {
  .barista-elegant-overlay-v13 {
    padding: 18px !important;
  }

  .barista-elegant-frame-v13 {
    width: 94vw !important;
    height: 82vh !important;
  }

  .barista-elegant-img-v13,
  .barista-elegant-video-v13 {
    border-radius: 18px !important;
  }

  .barista-elegant-close-v13 {
    top: 14px !important;
    right: 14px !important;
  }
}

/* =========================================================
   L'abeille D'or - Barista Soft Edges + Overlay v14
   Date: 2026-05-28
   Purpose:
   1) make Barista reel and thumbnails blend more softly with the page background
   2) make overlay opening effect slower, smoother, and more elegant
   ========================================================= */

/* ---------- Softer main reel frame blending ---------- */

.barista-media-card {
  border-radius: 32px !important;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 250, 243, 0.22), rgba(246, 232, 211, 0.08) 48%, rgba(246, 232, 211, 0) 76%) !important;
  box-shadow:
    0 22px 52px rgba(74, 47, 34, 0.045),
    0 8px 22px rgba(74, 47, 34, 0.035) !important;
  outline: 1px solid rgba(198, 146, 62, 0.045) !important;
  outline-offset: -1px !important;
}

/* stronger inner fade, less hard frame edge */
.barista-media-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 8 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  box-shadow:
    inset 0 0 38px rgba(255, 250, 243, 0.58),
    inset 0 0 74px rgba(246, 232, 211, 0.26),
    inset 0 -42px 58px rgba(246, 232, 211, 0.18),
    inset 0 1px 0 rgba(255, 250, 243, 0.34) !important;
}

/* very soft outside feather */
.barista-media-card::before {
  content: "" !important;
  position: absolute !important;
  inset: -14px !important;
  z-index: 1 !important;
  pointer-events: none !important;
  border-radius: 40px !important;
  background:
    radial-gradient(circle at center, rgba(255, 250, 243, 0) 52%, rgba(246, 232, 211, 0.22) 78%, rgba(246, 232, 211, 0) 100%) !important;
}

/* keep actual video/image above the soft feather but below controls */
#barista-reel-video,
.barista-reel-video,
.barista-media-card .barista-main-image {
  z-index: 3 !important;
}

/* ---------- Softer thumbnail edge blending ---------- */

.barista-thumb-media {
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 250, 243, 0.25), rgba(246, 232, 211, 0.08) 56%, rgba(246, 232, 211, 0) 82%) !important;
  box-shadow:
    0 12px 24px rgba(74, 47, 34, 0.035),
    0 4px 10px rgba(74, 47, 34, 0.025) !important;
  outline: 1px solid rgba(198, 146, 62, 0.045) !important;
  outline-offset: -1px !important;
}

.barista-thumb-media::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  z-index: 4 !important;
  box-shadow:
    inset 0 0 22px rgba(255, 250, 243, 0.58),
    inset 0 0 42px rgba(246, 232, 211, 0.20),
    inset 0 -24px 34px rgba(246, 232, 211, 0.14) !important;
}

/* subtle outside feather for each thumbnail */
.barista-thumb-media::before {
  content: "" !important;
  position: absolute !important;
  inset: -8px !important;
  border-radius: 22px !important;
  pointer-events: none !important;
  z-index: 1 !important;
  background:
    radial-gradient(circle at center, rgba(255, 250, 243, 0) 58%, rgba(246, 232, 211, 0.18) 82%, rgba(246, 232, 211, 0) 100%) !important;
}

.barista-thumb-media img {
  position: relative !important;
  z-index: 2 !important;
}

/* keep signature labels clearly above the edge fade */
.barista-thumb-label {
  z-index: 10 !important;
}

/* ---------- Slower, more elegant overlay effect ---------- */

.barista-elegant-overlay-v13 {
  background: rgba(35, 24, 17, 0) !important;
  backdrop-filter: blur(0px) saturate(100%) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition:
    opacity 520ms ease,
    visibility 520ms ease,
    background 520ms ease,
    backdrop-filter 620ms ease !important;
}

.barista-elegant-overlay-v13.is-open {
  background:
    radial-gradient(circle at center, rgba(255, 250, 243, 0.10), rgba(35, 24, 17, 0.76) 64%, rgba(35, 24, 17, 0.86)) !important;
  backdrop-filter: blur(14px) saturate(112%) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* make opening visibly graceful instead of instant */
.barista-elegant-frame-v13 {
  transform: translateY(30px) scale(0.91) !important;
  opacity: 0 !important;
  filter: blur(6px) !important;
  transition:
    transform 720ms cubic-bezier(.16, .84, .26, 1),
    opacity 560ms ease,
    filter 620ms ease !important;
  will-change: transform, opacity, filter !important;
}

.barista-elegant-overlay-v13.is-open .barista-elegant-frame-v13 {
  transform: translateY(0) scale(1) !important;
  opacity: 1 !important;
  filter: blur(0) !important;
}

/* image/video itself gets a second refined reveal */
.barista-elegant-img-v13,
.barista-elegant-video-v13 {
  border-radius: 24px !important;
  box-shadow:
    0 34px 95px rgba(0, 0, 0, 0.34),
    0 10px 30px rgba(0, 0, 0, 0.22) !important;
  transform: scale(0.985) !important;
  transition:
    transform 760ms cubic-bezier(.16, .84, .26, 1),
    box-shadow 760ms ease !important;
}

.barista-elegant-overlay-v13.is-open .barista-elegant-img-v13,
.barista-elegant-overlay-v13.is-open .barista-elegant-video-v13 {
  transform: scale(1) !important;
}

/* close button should also fade in softly */
.barista-elegant-close-v13 {
  opacity: 0 !important;
  transform: translateY(-8px) !important;
  transition:
    opacity 520ms ease 180ms,
    transform 520ms ease 180ms,
    background 220ms ease !important;
}

.barista-elegant-overlay-v13.is-open .barista-elegant-close-v13 {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.barista-elegant-close-v13:hover {
  background: rgba(255, 250, 243, 0.26) !important;
}

/* Mobile: keep effect elegant but not too heavy */
@media (max-width: 640px) {
  .barista-media-card {
    border-radius: 26px !important;
  }

  .barista-thumb-media {
    border-radius: 14px !important;
  }

  .barista-elegant-frame-v13 {
    transform: translateY(22px) scale(0.93) !important;
    transition:
      transform 580ms cubic-bezier(.16, .84, .26, 1),
      opacity 460ms ease,
      filter 520ms ease !important;
  }

  .barista-elegant-overlay-v13 {
    transition:
      opacity 440ms ease,
      visibility 440ms ease,
      background 440ms ease,
      backdrop-filter 520ms ease !important;
  }
}

/* =========================================================
   L'abeille D'or - Mobile Overlay Lock + Fallback Posters v15
   Date: 2026-05-28
   Purpose:
   1) stop background page from scrolling behind Barista overlay
   2) keep actual Barista reel visible on phone
   3) support poster fallback if autoplay is blocked
   ========================================================= */

html.barista-overlay-locked-v15,
body.barista-overlay-locked-v15 {
  overflow: hidden !important;
  overscroll-behavior: none !important;
  touch-action: none !important;
}

#barista-reel-video,
.barista-reel-video {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 3 !important;
}

#barista-reel-video.is-hidden,
.barista-reel-video.is-hidden {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.barista-media-card.has-video .barista-main-image {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.barista-elegant-overlay-v13 {
  overscroll-behavior: contain !important;
  touch-action: none !important;
}

.barista-elegant-frame-v13,
.barista-elegant-img-v13,
.barista-elegant-video-v13 {
  touch-action: manipulation !important;
}

/* =========================================================
   L'abeille D'or - Barista Clean Overlay v16
   Date: 2026-05-28
   Purpose:
   1) support clean Barista JS controller
   2) prevent page scroll behind overlay
   3) preserve same-page return position after closing overlay
   4) keep soft overlay animation
   ========================================================= */

html.barista-clean-lock-v16,
body.barista-clean-lock-v16 {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

#barista-reel-video,
.barista-reel-video {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 3 !important;
}

#barista-reel-video.is-hidden,
.barista-reel-video.is-hidden {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.barista-media-card.has-video .barista-main-image {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.barista-clean-overlay-v16 {
  position: fixed !important;
  inset: 0 !important;
  z-index: 12000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 30px !important;
  background: rgba(35, 24, 17, 0) !important;
  backdrop-filter: blur(0px) saturate(100%) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  overscroll-behavior: contain !important;
  touch-action: none !important;
  transition:
    opacity 520ms ease,
    visibility 520ms ease,
    background 520ms ease,
    backdrop-filter 620ms ease !important;
}

.barista-clean-overlay-v16.is-open {
  background:
    radial-gradient(circle at center, rgba(255, 250, 243, 0.10), rgba(35, 24, 17, 0.76) 64%, rgba(35, 24, 17, 0.86)) !important;
  backdrop-filter: blur(14px) saturate(112%) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.barista-clean-frame-v16 {
  width: min(92vw, 980px) !important;
  height: min(84vh, 760px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: translateY(30px) scale(0.91) !important;
  opacity: 0 !important;
  filter: blur(6px) !important;
  transition:
    transform 720ms cubic-bezier(.16, .84, .26, 1),
    opacity 560ms ease,
    filter 620ms ease !important;
  will-change: transform, opacity, filter !important;
}

.barista-clean-overlay-v16.is-open .barista-clean-frame-v16 {
  transform: translateY(0) scale(1) !important;
  opacity: 1 !important;
  filter: blur(0) !important;
}

.barista-clean-img-v16,
.barista-clean-video-v16 {
  display: block !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  border-radius: 24px !important;
  box-shadow:
    0 34px 95px rgba(0, 0, 0, 0.34),
    0 10px 30px rgba(0, 0, 0, 0.22) !important;
  background: rgba(255, 250, 243, 0.16) !important;
}

.barista-clean-img-v16 {
  cursor: zoom-out !important;
}

.barista-clean-video-v16 {
  width: min(92vw, 560px) !important;
  height: min(84vh, 760px) !important;
}

.barista-clean-close-v16 {
  position: fixed !important;
  top: 18px !important;
  right: 22px !important;
  z-index: 12001 !important;
  border: 1px solid rgba(255, 250, 243, 0.45) !important;
  border-radius: 999px !important;
  padding: 10px 16px !important;
  background: rgba(255, 250, 243, 0.16) !important;
  color: #fffaf3 !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  opacity: 0 !important;
  transform: translateY(-8px) !important;
  transition:
    opacity 520ms ease 180ms,
    transform 520ms ease 180ms,
    background 220ms ease !important;
}

.barista-clean-overlay-v16.is-open .barista-clean-close-v16 {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.barista-clean-close-v16:hover {
  background: rgba(255, 250, 243, 0.26) !important;
}

@media (max-width: 640px) {
  .barista-clean-overlay-v16 {
    padding: 18px !important;
  }

  .barista-clean-frame-v16 {
    width: 94vw !important;
    height: 82vh !important;
    transform: translateY(22px) scale(0.93) !important;
    transition:
      transform 580ms cubic-bezier(.16, .84, .26, 1),
      opacity 460ms ease,
      filter 520ms ease !important;
  }

  .barista-clean-img-v16,
  .barista-clean-video-v16 {
    border-radius: 18px !important;
  }

  .barista-clean-close-v16 {
    top: 14px !important;
    right: 14px !important;
  }
}

/* =========================================================
   L'abeille D'or - Barista v17 Scroll + Mobile Signature Labels
   Date: 2026-05-28
   Purpose:
   1) prevent overlay close from jumping to top
   2) keep page behind overlay from scrolling
   3) apply signature-style labels on phone
   4) keep v17 overlay styling separate from v16
   ========================================================= */

html.barista-clean-lock-v17,
body.barista-clean-lock-v17 {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

/* Actual Barista reel */
#barista-reel-video,
.barista-reel-video {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 3 !important;
}

#barista-reel-video.is-hidden,
.barista-reel-video.is-hidden {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.barista-media-card.has-video .barista-main-image {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* v17 overlay */
.barista-clean-overlay-v17 {
  position: fixed !important;
  inset: 0 !important;
  z-index: 13000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 30px !important;
  background: rgba(35, 24, 17, 0) !important;
  backdrop-filter: blur(0px) saturate(100%) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  overscroll-behavior: contain !important;
  touch-action: none !important;
  transition:
    opacity 520ms ease,
    visibility 520ms ease,
    background 520ms ease,
    backdrop-filter 620ms ease !important;
}

.barista-clean-overlay-v17.is-open {
  background:
    radial-gradient(circle at center, rgba(255, 250, 243, 0.10), rgba(35, 24, 17, 0.76) 64%, rgba(35, 24, 17, 0.86)) !important;
  backdrop-filter: blur(14px) saturate(112%) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.barista-clean-frame-v17 {
  width: min(92vw, 980px) !important;
  height: min(84vh, 760px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: translateY(30px) scale(0.91) !important;
  opacity: 0 !important;
  filter: blur(6px) !important;
  transition:
    transform 720ms cubic-bezier(.16, .84, .26, 1),
    opacity 560ms ease,
    filter 620ms ease !important;
}

.barista-clean-overlay-v17.is-open .barista-clean-frame-v17 {
  transform: translateY(0) scale(1) !important;
  opacity: 1 !important;
  filter: blur(0) !important;
}

.barista-clean-img-v17,
.barista-clean-video-v17 {
  display: block !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  border-radius: 24px !important;
  box-shadow:
    0 34px 95px rgba(0, 0, 0, 0.34),
    0 10px 30px rgba(0, 0, 0, 0.22) !important;
  background: rgba(255, 250, 243, 0.16) !important;
}

.barista-clean-img-v17 {
  cursor: zoom-out !important;
}

.barista-clean-video-v17 {
  width: min(92vw, 560px) !important;
  height: min(84vh, 760px) !important;
}

.barista-clean-close-v17 {
  position: fixed !important;
  top: 18px !important;
  right: 22px !important;
  z-index: 13001 !important;
  border: 1px solid rgba(255, 250, 243, 0.45) !important;
  border-radius: 999px !important;
  padding: 10px 16px !important;
  background: rgba(255, 250, 243, 0.16) !important;
  color: #fffaf3 !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  opacity: 0 !important;
  transform: translateY(-8px) !important;
  transition:
    opacity 520ms ease 180ms,
    transform 520ms ease 180ms,
    background 220ms ease !important;
}

.barista-clean-overlay-v17.is-open .barista-clean-close-v17 {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Mobile signature-style labels */
@media (max-width: 640px) {
  .barista-thumbs {
    padding-top: 10px !important;
    gap: 14px 10px !important;
  }

  .barista-thumb {
    position: relative !important;
    overflow: visible !important;
  }

  .barista-thumb-label {
    position: absolute !important;
    top: -8px !important;
    left: -2px !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 12 !important;
    display: inline-block !important;
    min-height: 0 !important;
    max-width: 96px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    color: #5b351f !important;
    font-family: "Segoe Script", "Brush Script MT", "Cormorant Garamond", Georgia, serif !important;
    font-size: 0.78rem !important;
    font-style: italic !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: -0.01em !important;
    text-align: left !important;
    white-space: nowrap !important;
    transform: rotate(-7deg) !important;
    transform-origin: left center !important;
    text-shadow:
      0 1px 0 rgba(255, 250, 243, 0.85),
      0 5px 12px rgba(74, 47, 34, 0.16) !important;
    pointer-events: none !important;
  }

  .barista-clean-overlay-v17 {
    padding: 18px !important;
  }

  .barista-clean-frame-v17 {
    width: 94vw !important;
    height: 82vh !important;
    transform: translateY(22px) scale(0.93) !important;
  }

  .barista-clean-img-v17,
  .barista-clean-video-v17 {
    border-radius: 18px !important;
  }

  .barista-clean-close-v17 {
    top: 14px !important;
    right: 14px !important;
  }
}

/* =========================================================
   L'abeille D'or - Hero Copy + Trust Strip v1
   Date: 2026-05-29
   Purpose:
   1) support revised hero introduction
   2) add subtle ISO / ingredients / quality trust strip
   ========================================================= */

.hero-trust-strip {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px 16px !important;
  margin-top: 18px !important;
  color: rgba(74, 47, 34, 0.78) !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 0.66rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.11em !important;
  text-transform: uppercase !important;
}

.hero-trust-strip span {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
}

.hero-trust-strip span:not(:last-child)::after {
  content: "" !important;
  width: 5px !important;
  height: 5px !important;
  margin-left: 16px !important;
  border-radius: 999px !important;
  background: rgba(176, 122, 42, 0.55) !important;
}

/* Keep the hero message elegant on smaller screens */
@media (max-width: 640px) {
  .hero-trust-strip {
    justify-content: center !important;
    gap: 8px 12px !important;
    margin-top: 16px !important;
    font-size: 0.58rem !important;
    line-height: 1.5 !important;
    text-align: center !important;
  }

  .hero-trust-strip span:not(:last-child)::after {
    width: 4px !important;
    height: 4px !important;
    margin-left: 12px !important;
  }
}

/* =========================================================
   L'abeille D'or - Hero Copy Polish v2
   Date: 2026-05-29
   Purpose:
   1) make hero intro paragraph more attractive/readable
   2) add breathing room above trust strip
   3) make trust strip separators clearly visible
   ========================================================= */

/* Hero paragraph: stronger first impression */
.hero p:not(.eyebrow):not(.hero-trust-strip p),
.hero-content p:not(.eyebrow),
.hero-copy p:not(.eyebrow),
.hero-text p:not(.eyebrow) {
  font-size: clamp(1.05rem, 1.28vw, 1.22rem) !important;
  line-height: 1.72 !important;
  font-weight: 500 !important;
  color: rgba(74, 47, 34, 0.82) !important;
  max-width: 780px !important;
}

/* Trust strip: more space below buttons */
.hero-trust-strip {
  margin-top: 30px !important;
  gap: 0 !important;
  color: rgba(74, 47, 34, 0.76) !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
}

/* Clear bullet separators */
.hero-trust-strip span {
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
}

.hero-trust-strip span:not(:last-child)::after {
  content: "•" !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  margin: 0 15px !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(176, 122, 42, 0.85) !important;
  font-size: 0.78rem !important;
  line-height: 1 !important;
}

/* Mobile: keep readable but not oversized */
@media (max-width: 640px) {
  .hero p:not(.eyebrow):not(.hero-trust-strip p),
  .hero-content p:not(.eyebrow),
  .hero-copy p:not(.eyebrow),
  .hero-text p:not(.eyebrow) {
    font-size: 1rem !important;
    line-height: 1.62 !important;
    max-width: 100% !important;
  }

  .hero-trust-strip {
    margin-top: 24px !important;
    justify-content: center !important;
    font-size: 0.58rem !important;
    line-height: 1.6 !important;
    text-align: center !important;
  }

  .hero-trust-strip span:not(:last-child)::after {
    margin: 0 10px !important;
    font-size: 0.66rem !important;
  }
}

/* =========================================================
   L'abeille D'or - Selection Copy + Landing Layout v2
   Date: 2026-05-29
   Purpose:
   1) make Selection intro richer and more readable
   2) restore full-screen Selection nav landing
   3) prevent Brand Reel from peeking after clicking Selection nav
   ========================================================= */

/* Desktop/laptop: restore stronger section presence */
@media (min-width: 981px) {
  #selection.selection-tabs-section {
    min-height: calc(100vh - 2px) !important;
    padding-top: 34px !important;
    padding-bottom: 64px !important;
    scroll-margin-top: 82px !important;
  }

  .selection-heading {
    margin-bottom: 24px !important;
  }

  .selection-heading h2 {
    max-width: 920px !important;
  }

  .selection-heading p:not(.eyebrow) {
    max-width: 880px !important;
    font-size: clamp(1rem, 1.08vw, 1.12rem) !important;
    line-height: 1.66 !important;
    font-weight: 500 !important;
    color: rgba(74, 47, 34, 0.82) !important;
  }
}

/* Smaller laptop screens: keep it fitting without showing next section */
@media (min-width: 981px) and (max-height: 780px) {
  #selection.selection-tabs-section {
    min-height: calc(100vh - 2px) !important;
    padding-top: 24px !important;
    padding-bottom: 48px !important;
    scroll-margin-top: 76px !important;
  }

  .selection-heading {
    margin-bottom: 18px !important;
  }

  .selection-heading p:not(.eyebrow) {
    font-size: 0.96rem !important;
    line-height: 1.54 !important;
    max-width: 850px !important;
  }
}

/* Phone: improve readability but avoid making the section too long */
@media (max-width: 640px) {
  .selection-heading p:not(.eyebrow) {
    font-size: 0.98rem !important;
    line-height: 1.58 !important;
    font-weight: 500 !important;
  }
}

/* =========================================================
   L'abeille D'or - Selection Nav One Line Up v3
   Date: 2026-05-29
   Purpose: move Selection header-nav landing one line upward
   ========================================================= */

/*
  Lower scroll-margin-top = browser scrolls slightly further down.
  Higher scroll-margin-top = section appears lower.
  Since Selection currently lands below the eyebrow, we increase the
  scroll-margin-top slightly so the landing shows one line above it.
*/
@media (min-width: 981px) {
  #selection.selection-tabs-section {
    scroll-margin-top: 104px !important;
  }
}

@media (min-width: 981px) and (max-height: 780px) {
  #selection.selection-tabs-section {
    scroll-margin-top: 96px !important;
  }
}

@media (max-width: 640px) {
  #selection.selection-tabs-section {
    scroll-margin-top: 92px !important;
  }
}

/* =========================================================
   L'abeille D'or - Selection Nav One Line Up v3
   Date: 2026-05-29
   Purpose: move Selection header-nav landing one line upward
   ========================================================= */

/*
  Lower scroll-margin-top = browser scrolls slightly further down.
  Higher scroll-margin-top = section appears lower.
  Since Selection currently lands below the eyebrow, we increase the
  scroll-margin-top slightly so the landing shows one line above it.
*/
@media (min-width: 981px) {
  #selection.selection-tabs-section {
    scroll-margin-top: 104px !important;
  }
}

@media (min-width: 981px) and (max-height: 780px) {
  #selection.selection-tabs-section {
    scroll-margin-top: 96px !important;
  }
}

@media (max-width: 640px) {
  #selection.selection-tabs-section {
    scroll-margin-top: 92px !important;
  }
}

/* =========================================================
   L'abeille D'or - Contact Phone + Background Blend v1
   Date: 2026-05-29
   Purpose:
   1) soften Contact section background so it blends with page
   2) support phone/email action buttons in Contact cards
   ========================================================= */

#contact.contact-section {
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 250, 243, 0.92), rgba(246, 232, 211, 0.42) 42%, rgba(246, 232, 211, 0) 72%),
    linear-gradient(180deg, rgba(255, 250, 243, 0.66), rgba(246, 232, 211, 0.34)) !important;
  box-shadow:
    inset 0 34px 64px rgba(255, 250, 243, 0.42),
    inset 0 -34px 64px rgba(255, 250, 243, 0.30) !important;
}

#contact .contact-card {
  background: rgba(255, 250, 243, 0.66) !important;
  border: 1px solid rgba(198, 146, 62, 0.10) !important;
  box-shadow: 0 18px 46px rgba(74, 47, 34, 0.045) !important;
}

.contact-action-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 16px !important;
}

.contact-action-row .contact-card-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 9px 13px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(176, 122, 42, 0.22) !important;
  background: rgba(255, 250, 243, 0.72) !important;
  color: #4a2f22 !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-decoration: none !important;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease !important;
}

.contact-action-row .contact-card-link:hover {
  transform: translateY(-1px) !important;
  background: rgba(255, 250, 243, 0.95) !important;
  border-color: rgba(176, 122, 42, 0.36) !important;
}

.contact-phone-link {
  direction: ltr !important;
  unicode-bidi: isolate !important;
}

@media (max-width: 640px) {
  .contact-action-row {
    flex-direction: column !important;
    gap: 9px !important;
  }

  .contact-action-row .contact-card-link {
    width: 100% !important;
    min-height: 40px !important;
  }
}

/* =========================================================
   L'abeille D'or - Contact Correction v2
   Date: 2026-05-29
   Purpose:
   1) blend Contact section background with page
   2) remove ugly phone-pill treatment
   3) show labelled phone details cleanly
   4) preserve original contact button/link styling
   ========================================================= */

/* Make the Contact section blend into the warm page instead of looking like a separate block */
html body #contact.contact-section {
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 250, 243, 0.72), rgba(246, 232, 211, 0.20) 44%, rgba(246, 232, 211, 0) 76%),
    linear-gradient(180deg, rgba(246, 232, 211, 0), rgba(255, 250, 243, 0.34) 44%, rgba(246, 232, 211, 0)) !important;
  box-shadow:
    inset 0 40px 70px rgba(255, 250, 243, 0.34),
    inset 0 -40px 70px rgba(255, 250, 243, 0.22) !important;
}

/* Undo the previous pill/button treatment for contact-action-row, if it still exists anywhere */
.contact-action-row,
.contact-action-row .contact-card-link,
.contact-phone-link {
  all: unset;
}

/* Clean labelled phone rows */
.contact-detail-list {
  display: grid !important;
  gap: 8px !important;
  margin: 16px 0 14px !important;
}

.contact-detail-line {
  display: grid !important;
  grid-template-columns: 92px minmax(0, 1fr) !important;
  align-items: baseline !important;
  gap: 12px !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid rgba(176, 122, 42, 0.14) !important;
  color: #4a2f22 !important;
  text-decoration: none !important;
}

.contact-detail-line:hover strong {
  color: #8a5b22 !important;
}

.contact-detail-type {
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: rgba(74, 47, 34, 0.58) !important;
}

.contact-detail-line strong {
  direction: ltr !important;
  unicode-bidi: isolate !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 0.86rem !important;
  font-weight: 800 !important;
  color: #4a2f22 !important;
  transition: color 180ms ease !important;
}

/* Keep the original email/contact-card-link style from earlier CSS.
   This only spaces the email after the phone detail rows. */
.contact-detail-list + .contact-card-link {
  margin-top: 4px !important;
}

/* Make cards softer, but do not change the existing button/link visual language */
html body #contact .contact-card {
  background: rgba(255, 250, 243, 0.58) !important;
  border-color: rgba(198, 146, 62, 0.09) !important;
  box-shadow:
    0 18px 44px rgba(74, 47, 34, 0.035),
    inset 0 0 28px rgba(255, 250, 243, 0.24) !important;
}

@media (max-width: 640px) {
  .contact-detail-line {
    grid-template-columns: 88px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .contact-detail-line strong {
    font-size: 0.82rem !important;
  }

  .contact-detail-type {
    font-size: 0.58rem !important;
  }
}

/* =========================================================
   L'abeille D'or - Contact Clean Correction v3
   Date: 2026-05-29
   Purpose:
   1) make Contact background blend with page background
   2) restore light/off-white card feel
   3) remove phone pill/button treatment
   4) show landline/mobile details as clean labelled rows
   ========================================================= */

/* Contact section should not look like a separate white box */
html body #contact.contact-section {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* If an older background layer exists on pseudo-elements, neutralize it */
html body #contact.contact-section::before,
html body #contact.contact-section::after {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Keep cards light and elegant, closer to original */
html body #contact .contact-card {
  background: rgba(255, 250, 243, 0.78) !important;
  border: 1px solid rgba(198, 146, 62, 0.10) !important;
  box-shadow:
    0 14px 34px rgba(74, 47, 34, 0.035),
    inset 0 0 28px rgba(255, 250, 243, 0.26) !important;
}

/* Remove old pill styles if any older patch still tries to apply them */
#contact .contact-action-row {
  display: none !important;
}

#contact .contact-action-row .contact-card-link,
#contact .contact-phone-link {
  all: unset !important;
}

/* Clean labelled phone details */
#contact .contact-detail-list {
  display: grid !important;
  gap: 7px !important;
  margin: 17px 0 13px !important;
}

#contact .contact-detail-line {
  display: grid !important;
  grid-template-columns: 82px minmax(0, 1fr) !important;
  align-items: baseline !important;
  gap: 12px !important;
  padding: 7px 0 !important;
  border-bottom: 1px solid rgba(176, 122, 42, 0.14) !important;
}

#contact .contact-detail-line-wide {
  grid-template-columns: 82px minmax(0, 1fr) !important;
}

#contact .contact-detail-type {
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 0.60rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.11em !important;
  text-transform: uppercase !important;
  color: rgba(74, 47, 34, 0.56) !important;
}

#contact .contact-detail-line a,
#contact .contact-number-group a {
  direction: ltr !important;
  unicode-bidi: isolate !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  color: #4a2f22 !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(176, 122, 42, 0.26) !important;
  padding-bottom: 2px !important;
}

#contact .contact-detail-line a:hover,
#contact .contact-number-group a:hover {
  color: #8a5b22 !important;
  border-bottom-color: rgba(176, 122, 42, 0.55) !important;
}

#contact .contact-number-group {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
}

#contact .contact-number-separator {
  color: rgba(74, 47, 34, 0.46) !important;
  font-weight: 700 !important;
}

/* Preserve email link/button feel, do not convert to phone pills */
#contact .contact-card-link {
  display: inline-flex !important;
  width: fit-content !important;
  margin-top: 3px !important;
}

/* Mobile */
@media (max-width: 640px) {
  #contact .contact-detail-line,
  #contact .contact-detail-line-wide {
    grid-template-columns: 76px minmax(0, 1fr) !important;
    gap: 9px !important;
  }

  #contact .contact-number-group {
    gap: 6px !important;
  }

  #contact .contact-detail-line a,
  #contact .contact-number-group a {
    font-size: 0.78rem !important;
  }

  #contact .contact-detail-type {
    font-size: 0.56rem !important;
  }
}

/* =========================================================
   L'abeille D'or - Contact Remove Lines v4
   Date: 2026-05-29
   Purpose:
   1) remove underline from phone numbers
   2) remove divider line between phone details and email
   3) keep contact details clean and readable
   ========================================================= */

#contact .contact-detail-line {
  border-bottom: 0 !important;
  padding-bottom: 4px !important;
}

#contact .contact-detail-line a,
#contact .contact-number-group a {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
  text-decoration: none !important;
}

#contact .contact-detail-line a:hover,
#contact .contact-number-group a:hover {
  border-bottom: 0 !important;
  text-decoration: none !important;
  color: #8a5b22 !important;
}

/* Add gentle spacing instead of divider lines */
#contact .contact-detail-list {
  gap: 6px !important;
  margin: 16px 0 12px !important;
}

/* Keep the email visually separate through spacing only */
#contact .contact-detail-list + .contact-card-link {
  margin-top: 8px !important;
}

/* =========================================================
   L'abeille D'or - Contact Remove Lines v4
   Date: 2026-05-29
   Purpose:
   1) remove underline from phone numbers
   2) remove divider line between phone details and email
   3) keep contact details clean and readable
   ========================================================= */

#contact .contact-detail-line {
  border-bottom: 0 !important;
  padding-bottom: 4px !important;
}

#contact .contact-detail-line a,
#contact .contact-number-group a {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
  text-decoration: none !important;
}

#contact .contact-detail-line a:hover,
#contact .contact-number-group a:hover {
  border-bottom: 0 !important;
  text-decoration: none !important;
  color: #8a5b22 !important;
}

/* Add gentle spacing instead of divider lines */
#contact .contact-detail-list {
  gap: 6px !important;
  margin: 16px 0 12px !important;
}

/* Keep the email visually separate through spacing only */
#contact .contact-detail-list + .contact-card-link {
  margin-top: 8px !important;
}

/* =========================================================
   L'abeille D'or - Contact WhatsApp v5
   Date: 2026-05-29
   Purpose:
   1) make HR mobile numbers open WhatsApp
   2) make general enquiries landline plain non-clickable text
   3) keep phone details visually clean
   ========================================================= */

#contact .contact-number-text {
  direction: ltr !important;
  unicode-bidi: isolate !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  color: #4a2f22 !important;
}

#contact .contact-number-group a::after {
  content: " WhatsApp" !important;
  margin-left: 5px !important;
  font-size: 0.58rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(138, 91, 34, 0.68) !important;
}

#contact .contact-detail-line a,
#contact .contact-number-group a {
  border-bottom: 0 !important;
  text-decoration: none !important;
}

#contact .contact-detail-line a:hover,
#contact .contact-number-group a:hover {
  color: #8a5b22 !important;
  text-decoration: none !important;
}

@media (max-width: 640px) {
  #contact .contact-number-text {
    font-size: 0.78rem !important;
  }

  #contact .contact-number-group a::after {
    display: block !important;
    margin-left: 0 !important;
    margin-top: 2px !important;
    font-size: 0.52rem !important;
  }
}

/* =========================================================
   L'abeille D'or - Contact WhatsApp Icons v6
   Date: 2026-05-29
   Purpose:
   1) keep mobile numbers as plain text
   2) open WhatsApp only from the small icon
   3) remove previous appended WhatsApp text labels
   ========================================================= */

/* Remove previous automatic WhatsApp word label */
#contact .contact-number-group a::after {
  content: none !important;
  display: none !important;
}

/* Number grouping */
#contact .contact-number-group-icons {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
}

#contact .contact-number-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
}

/* Numbers are text, not links */
#contact .contact-number-text {
  direction: ltr !important;
  unicode-bidi: isolate !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  color: #4a2f22 !important;
}

/* Small WhatsApp icon only */
#contact .contact-whatsapp-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 21px !important;
  height: 21px !important;
  min-width: 21px !important;
  border-radius: 999px !important;
  background: rgba(37, 211, 102, 0.12) !important;
  color: #1f8f4d !important;
  text-decoration: none !important;
  border: 1px solid rgba(31, 143, 77, 0.20) !important;
  box-shadow: none !important;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease !important;
}

#contact .contact-whatsapp-icon svg {
  display: block !important;
  width: 15px !important;
  height: 15px !important;
  fill: currentColor !important;
}

#contact .contact-whatsapp-icon:hover {
  transform: translateY(-1px) !important;
  background: rgba(37, 211, 102, 0.18) !important;
  border-color: rgba(31, 143, 77, 0.34) !important;
}

/* Keep separator simple */
#contact .contact-number-separator {
  color: rgba(74, 47, 34, 0.38) !important;
  font-weight: 700 !important;
  margin: 0 2px !important;
}

/* Mobile */
@media (max-width: 640px) {
  #contact .contact-number-group-icons {
    gap: 8px !important;
  }

  #contact .contact-number-item {
    gap: 6px !important;
  }

  #contact .contact-number-text {
    font-size: 0.78rem !important;
  }

  #contact .contact-whatsapp-icon {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
  }

  #contact .contact-whatsapp-icon svg {
    width: 15px !important;
    height: 15px !important;
  }
}

/* =========================================================
   L'abeille D'or - Contact Label Spacing v7
   Date: 2026-05-29
   Purpose:
   Move phone numbers closer to their Landline/Mobile labels
   ========================================================= */

#contact .contact-detail-line,
#contact .contact-detail-line-wide {
  grid-template-columns: 62px minmax(0, 1fr) !important;
  gap: 8px !important;
}

#contact .contact-detail-type {
  min-width: 0 !important;
}

#contact .contact-number-group-icons {
  gap: 6px !important;
}

#contact .contact-number-item {
  gap: 5px !important;
}

@media (max-width: 640px) {
  #contact .contact-detail-line,
  #contact .contact-detail-line-wide {
    grid-template-columns: 58px minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  #contact .contact-number-group-icons {
    gap: 6px !important;
  }
}

/* =========================================================
   L'abeille D'or - Contact Mobile Spacing v8
   Date: 2026-05-29
   Purpose:
   Pull Careers mobile numbers closer to the Mobile label
   ========================================================= */

/* Make the Careers mobile row tighter than the general row */
#contact .contact-detail-line-wide {
  grid-template-columns: 50px minmax(0, 1fr) !important;
  gap: 6px !important;
}

/* Make sure the mobile group starts immediately after the label */
#contact .contact-detail-line-wide .contact-number-group-icons {
  justify-content: flex-start !important;
  justify-self: start !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Keep each number + WhatsApp icon tight */
#contact .contact-detail-line-wide .contact-number-item {
  gap: 4px !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Keep separator compact between the two numbers */
#contact .contact-detail-line-wide .contact-number-separator {
  margin: 0 1px !important;
}

/* Mobile screens */
@media (max-width: 640px) {
  #contact .contact-detail-line-wide {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 5px !important;
  }
}

/* =========================================================
   L'abeille D'or - Selection Anchor Correction v4
   Date: 2026-05-29
   Purpose:
   Move Selection nav landing slightly higher across laptop/desktop heights
   without changing the Selection section layout.
   ========================================================= */

/* Standard desktop and laptop screens */
@media (min-width: 981px) {
  #selection.selection-tabs-section {
    scroll-margin-top: 118px !important;
  }
}

/* Taller laptop / larger screen adjustment */
@media (min-width: 981px) and (min-height: 820px) {
  #selection.selection-tabs-section {
    scroll-margin-top: 126px !important;
  }
}

/* Shorter laptop screens */
@media (min-width: 981px) and (max-height: 780px) {
  #selection.selection-tabs-section {
    scroll-margin-top: 108px !important;
  }
}

/* =========================================================
   L'abeille D'or - Selection Anchor Correction v5
   Date: 2026-05-29
   Purpose:
   Move Selection nav landing about one and a half lines higher
   across laptop/desktop screen heights.
   ========================================================= */

/* Standard desktop and laptop screens */
@media (min-width: 981px) {
  #selection.selection-tabs-section {
    scroll-margin-top: 142px !important;
  }
}

/* Taller laptop / larger screen adjustment */
@media (min-width: 981px) and (min-height: 820px) {
  #selection.selection-tabs-section {
    scroll-margin-top: 152px !important;
  }
}

/* Shorter laptop screens */
@media (min-width: 981px) and (max-height: 780px) {
  #selection.selection-tabs-section {
    scroll-margin-top: 128px !important;
  }
}

/* =========================================================
   L'abeille D'or - Our Knefe Thumbnails + Overlay v1
   Date: 2026-05-29
   Purpose:
   1) remove faded thumbnail overlay
   2) reduce aggressive image cropping
   3) make Knefe story thumbnails clickable
   4) add elegant Barista-style overlay behavior
   ========================================================= */

/* Buttons should visually behave like the old figure thumbnails */
#our-knefe .knefe-story-thumb {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
  border: 0 !important;
  background: transparent !important;
  text-align: left !important;
  cursor: pointer !important;
  font: inherit !important;
}

/* Less fade, less crop. Use contain instead of cover. */
#our-knefe .knefe-story-thumb-image {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background:
    rgba(255, 250, 243, 0.62)
    var(--story-thumb) center / contain no-repeat !important;
  border: 1px solid rgba(198, 146, 62, 0.14) !important;
  box-shadow: 0 12px 28px rgba(74, 47, 34, 0.08) !important;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease !important;
}

#our-knefe .knefe-story-thumb:hover .knefe-story-thumb-image,
#our-knefe .knefe-story-thumb:focus-visible .knefe-story-thumb-image {
  transform: translateY(-2px) !important;
  border-color: rgba(198, 146, 62, 0.24) !important;
  background-color: rgba(255, 250, 243, 0.78) !important;
  box-shadow: 0 18px 36px rgba(74, 47, 34, 0.12) !important;
}

#our-knefe .knefe-story-thumb:focus-visible {
  outline: 2px solid rgba(176, 122, 42, 0.34) !important;
  outline-offset: 5px !important;
  border-radius: 20px !important;
}

#our-knefe .knefe-story-thumb-caption,
#our-knefe .knefe-story-thumb figcaption {
  display: block !important;
  margin-top: 9px !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 0.72rem !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  color: #7a6558 !important;
}

#our-knefe .knefe-story-thumb-caption strong,
#our-knefe .knefe-story-thumb figcaption strong {
  display: inline-block !important;
  margin-top: 2px !important;
  color: #3c2a20 !important;
  font-weight: 800 !important;
}

/* Elegant Knefe overlay */
.knefe-clean-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(18px, 4vw, 54px) !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 250, 243, 0.20), rgba(30, 19, 14, 0.78) 58%, rgba(18, 11, 8, 0.90)) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 180ms ease !important;
}

.knefe-clean-overlay.is-open {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.knefe-clean-overlay-card {
  position: relative !important;
  max-width: min(1120px, 92vw) !important;
  max-height: min(82vh, 820px) !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  background: rgba(255, 250, 243, 0.92) !important;
  border: 1px solid rgba(255, 250, 243, 0.28) !important;
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.32),
    inset 0 0 38px rgba(255, 250, 243, 0.22) !important;
  transform: translateY(10px) scale(0.985) !important;
  transition: transform 180ms ease !important;
}

.knefe-clean-overlay.is-open .knefe-clean-overlay-card {
  transform: translateY(0) scale(1) !important;
}

.knefe-clean-overlay img {
  display: block !important;
  max-width: 100% !important;
  max-height: min(82vh, 820px) !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  background: rgba(255, 250, 243, 0.82) !important;
}

.knefe-clean-overlay-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 2 !important;
  border: 1px solid rgba(255, 250, 243, 0.48) !important;
  border-radius: 999px !important;
  padding: 9px 13px !important;
  background: rgba(44, 28, 20, 0.62) !important;
  color: #fffaf3 !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}

.knefe-clean-overlay-close:hover {
  background: rgba(44, 28, 20, 0.78) !important;
}

body.knefe-overlay-open {
  overflow: hidden !important;
}

@media (max-width: 640px) {
  #our-knefe .knefe-story-thumb-image {
    border-radius: 15px !important;
  }

  #our-knefe .knefe-story-thumb-caption,
  #our-knefe .knefe-story-thumb figcaption {
    font-size: 0.63rem !important;
    line-height: 1.22 !important;
    margin-top: 7px !important;
  }

  .knefe-clean-overlay {
    padding: 14px !important;
  }

  .knefe-clean-overlay-card {
    border-radius: 22px !important;
    max-width: 94vw !important;
    max-height: 78vh !important;
  }

  .knefe-clean-overlay img {
    max-height: 78vh !important;
  }

  .knefe-clean-overlay-close {
    top: 10px !important;
    right: 10px !important;
    padding: 8px 11px !important;
    font-size: 0.62rem !important;
  }
}

/* =========================================================
   L'abeille D'or - Our Knefe Thumbnails + Overlay v2
   Date: 2026-05-29
   Purpose:
   1) make Knefe thumbnails fill the frame
   2) improve Jdeideh thumbnail positioning
   3) strengthen overlay visual effect
   ========================================================= */

/* Make thumbnail image areas clickable and full-frame again */
#our-knefe .knefe-story-thumb,
#our-knefe .knefe-story-thumb * {
  pointer-events: auto !important;
}

#our-knefe .knefe-story-thumb-image {
  background:
    rgba(255, 250, 243, 0.34)
    var(--story-thumb) center / cover no-repeat !important;
}

/* Jdeideh branch photo: tune crop slightly upward */
#our-knefe .knefe-story-thumb:nth-child(1) .knefe-story-thumb-image {
  background:
    rgba(255, 250, 243, 0.34)
    var(--story-thumb) center 42% / cover no-repeat !important;
}

/* Stronger Barista-like overlay feel */
.knefe-clean-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(18px, 4vw, 54px) !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 250, 243, 0.18), rgba(40, 25, 17, 0.78) 56%, rgba(18, 11, 8, 0.92)) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 220ms ease !important;
}

.knefe-clean-overlay.is-open {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.knefe-clean-overlay-card {
  position: relative !important;
  max-width: min(1120px, 92vw) !important;
  max-height: min(82vh, 820px) !important;
  border-radius: 30px !important;
  overflow: hidden !important;
  background: rgba(255, 250, 243, 0.94) !important;
  border: 1px solid rgba(255, 250, 243, 0.34) !important;
  box-shadow:
    0 36px 100px rgba(0, 0, 0, 0.36),
    0 0 0 1px rgba(198, 146, 62, 0.10),
    inset 0 0 40px rgba(255, 250, 243, 0.22) !important;
  transform: translateY(14px) scale(0.975) !important;
  transition: transform 220ms ease !important;
}

.knefe-clean-overlay.is-open .knefe-clean-overlay-card {
  transform: translateY(0) scale(1) !important;
}

.knefe-clean-overlay img {
  display: block !important;
  max-width: 100% !important;
  max-height: min(82vh, 820px) !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  background: rgba(255, 250, 243, 0.82) !important;
}

.knefe-clean-overlay-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 3 !important;
  border: 1px solid rgba(255, 250, 243, 0.48) !important;
  border-radius: 999px !important;
  padding: 9px 13px !important;
  background: rgba(44, 28, 20, 0.66) !important;
  color: #fffaf3 !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}

.knefe-clean-overlay-close:hover {
  background: rgba(44, 28, 20, 0.82) !important;
}

body.knefe-overlay-open {
  overflow: hidden !important;
}

@media (max-width: 640px) {
  #our-knefe .knefe-story-thumb:nth-child(1) .knefe-story-thumb-image {
    background:
      rgba(255, 250, 243, 0.34)
      var(--story-thumb) center 42% / cover no-repeat !important;
  }

  .knefe-clean-overlay {
    padding: 14px !important;
  }

  .knefe-clean-overlay-card {
    border-radius: 22px !important;
    max-width: 94vw !important;
    max-height: 78vh !important;
  }

  .knefe-clean-overlay img {
    max-height: 78vh !important;
  }
}

/* =========================================================
   L'abeille D'or - Our Knefe Main Overlay v3
   Date: 2026-05-29
   Purpose:
   1) give main Our Knefe media the same elegant overlay feel
   2) blend media edges better with the warm background
   ========================================================= */

#our-knefe .knefe-media-wrap,
#our-knefe .knefe-story-media {
  cursor: pointer !important;
}

#our-knefe .knefe-story-image,
#our-knefe .knefe-story-video {
  border-radius: 32px !important;
  box-shadow:
    0 22px 58px rgba(74, 47, 34, 0.12),
    inset 0 0 40px rgba(255, 250, 243, 0.18) !important;
}

/* Soft edge blend on main Knefe media */
#our-knefe .knefe-media-wrap::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  box-shadow:
    inset 0 0 34px rgba(255, 250, 243, 0.20),
    inset 0 0 90px rgba(74, 47, 34, 0.08) !important;
}

/* Main Knefe overlay */
.knefe-main-clean-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(18px, 4vw, 54px) !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 250, 243, 0.18), rgba(40, 25, 17, 0.78) 56%, rgba(18, 11, 8, 0.92)) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 220ms ease !important;
}

.knefe-main-clean-overlay.is-open {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.knefe-main-clean-overlay-card {
  position: relative !important;
  max-width: min(1120px, 92vw) !important;
  max-height: min(82vh, 820px) !important;
  border-radius: 30px !important;
  overflow: hidden !important;
  background: rgba(255, 250, 243, 0.94) !important;
  border: 1px solid rgba(255, 250, 243, 0.34) !important;
  box-shadow:
    0 36px 100px rgba(0, 0, 0, 0.36),
    0 0 0 1px rgba(198, 146, 62, 0.10),
    inset 0 0 40px rgba(255, 250, 243, 0.22) !important;
  transform: translateY(14px) scale(0.975) !important;
  transition: transform 220ms ease !important;
}

.knefe-main-clean-overlay.is-open .knefe-main-clean-overlay-card {
  transform: translateY(0) scale(1) !important;
}

.knefe-main-clean-overlay video,
.knefe-main-clean-overlay img {
  display: block !important;
  max-width: 100% !important;
  max-height: min(82vh, 820px) !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  background: rgba(255, 250, 243, 0.82) !important;
}

.knefe-main-clean-overlay-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 3 !important;
  border: 1px solid rgba(255, 250, 243, 0.48) !important;
  border-radius: 999px !important;
  padding: 9px 13px !important;
  background: rgba(44, 28, 20, 0.66) !important;
  color: #fffaf3 !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}

.knefe-main-clean-overlay-close:hover {
  background: rgba(44, 28, 20, 0.82) !important;
}

body.knefe-main-overlay-open {
  overflow: hidden !important;
}

@media (max-width: 640px) {
  .knefe-main-clean-overlay {
    padding: 14px !important;
  }

  .knefe-main-clean-overlay-card {
    border-radius: 22px !important;
    max-width: 94vw !important;
    max-height: 78vh !important;
  }

  .knefe-main-clean-overlay video,
  .knefe-main-clean-overlay img {
    max-height: 78vh !important;
  }
}

/* =========================================================
   L'abeille D'or - Our Knefe Main Overlay Media Fit v4
   Date: 2026-05-29
   Purpose:
   Keep image and video previews visually consistent in the main Knefe overlay.
   ========================================================= */

.knefe-main-clean-overlay-media {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 250, 243, 0.86) !important;
}

.knefe-main-clean-overlay-media img,
.knefe-main-clean-overlay-media video {
  display: block !important;
  max-width: 100% !important;
  max-height: min(82vh, 820px) !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* =========================================================
   L'abeille D'or - Selection Anchor Correction v6
   Date: 2026-05-29
   Purpose:
   Move Selection nav landing higher so the eyebrow and headline
   are visible after recent layout/media changes.
   ========================================================= */

/* Standard desktop/laptop */
@media (min-width: 981px) {
  #selection.selection-tabs-section {
    scroll-margin-top: 172px !important;
  }
}

/* Taller laptop / larger screens */
@media (min-width: 981px) and (min-height: 820px) {
  #selection.selection-tabs-section {
    scroll-margin-top: 184px !important;
  }
}

/* Shorter laptop screens */
@media (min-width: 981px) and (max-height: 780px) {
  #selection.selection-tabs-section {
    scroll-margin-top: 152px !important;
  }
}

/* Mobile/tablet will be checked separately later */
@media (max-width: 980px) {
  #selection.selection-tabs-section {
    scroll-margin-top: 104px !important;
  }
}

/* =========================================================
   L'abeille D'or - Brand Reels Visual Lift v1
   Date: 2026-05-29
   Purpose:
   Lift the Brand Reels section content slightly so reel bottoms
   do not visually touch the bottom/taskbar area on desktop screens.
   This does not change the nav landing anchor.
   ========================================================= */

@media (min-width: 981px) {
  #brand-reel > * {
    transform: translateY(-18px) !important;
  }
}

/* Slightly stronger lift on shorter laptop screens */
@media (min-width: 981px) and (max-height: 820px) {
  #brand-reel > * {
    transform: translateY(-24px) !important;
  }
}

/* Do not affect tablet/mobile yet. We will do a dedicated phone pass later. */
@media (max-width: 980px) {
  #brand-reel > * {
    transform: none !important;
  }
}

/* =========================================================
   L'abeille D'or - Selection Mobile Anchor Correction v7
   Date: 2026-05-29
   Purpose:
   Move Selection nav landing higher on phone/tablet only,
   so the eyebrow and headline are visible.
   ========================================================= */

/* Tablet/mobile */
@media (max-width: 980px) {
  #selection.selection-tabs-section {
    scroll-margin-top: 150px !important;
  }
}

/* Smaller phones */
@media (max-width: 640px) {
  #selection.selection-tabs-section {
    scroll-margin-top: 164px !important;
  }
}

/* Very small phone heights */
@media (max-width: 640px) and (max-height: 740px) {
  #selection.selection-tabs-section {
    scroll-margin-top: 150px !important;
  }
}

/* =========================================================
   L'abeille D'or - Selection Mobile Anchor Correction v8
   Date: 2026-05-29
   Purpose:
   Move Selection mobile nav landing one notch higher.
   Desktop/laptop and Brand Reels are untouched.
   ========================================================= */

@media (max-width: 980px) {
  #selection.selection-tabs-section {
    scroll-margin-top: 174px !important;
  }
}

@media (max-width: 640px) {
  #selection.selection-tabs-section {
    scroll-margin-top: 188px !important;
  }
}

@media (max-width: 640px) and (max-height: 740px) {
  #selection.selection-tabs-section {
    scroll-margin-top: 172px !important;
  }
}

/* =========================================================
   L'abeille D'or - Hide View Larger Pills v1
   Date: 2026-05-29
   Purpose:
   Remove visible "View larger" media pills while keeping
   media clickable and preserving accessibility labels in HTML.
   ========================================================= */

/* Hero, Knefe, Barista and other feature media hints */
.hero-feature-hint,
.knefe-feature-hint,
.barista-feature-hint,
.occasion-feature-hint,
.selection-feature-hint,
.brand-reel-feature-hint,
.media-feature-hint {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* In case some hints are spans/buttons inside section media cards */
#hero [aria-label*="Open"][class*="hint"],
#selection [aria-label*="Open"][class*="hint"],
#brand-reel [aria-label*="Open"][class*="hint"],
#our-knefe [aria-label*="Open"][class*="hint"],
#occasions [aria-label*="Open"][class*="hint"],
#barista [aria-label*="Open"][class*="hint"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Keep the media cards themselves clickable */
.hero-video-wrap,
.selection-media-card,
.brand-reel-frame,
.knefe-media-wrap,
.occasion-feature-card,
.barista-media-card,
.barista-thumb,
.knefe-story-thumb {
  cursor: pointer !important;
}

/* =========================================================
   L'abeille D'or - Brand Reel Close Pill v1
   Date: 2026-05-29
   Purpose:
   Standardize Brand Reel overlay close button as a visible Close pill,
   replacing the previous X-style close control.
   ========================================================= */

.brand-reel-lightbox-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 5 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border: 1px solid rgba(255, 250, 243, 0.48) !important;
  border-radius: 999px !important;
  padding: 9px 13px !important;
  background: rgba(44, 28, 20, 0.66) !important;
  color: #fffaf3 !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 0.68rem !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

.brand-reel-lightbox-close:hover {
  background: rgba(44, 28, 20, 0.82) !important;
}

@media (max-width: 640px) {
  .brand-reel-lightbox-close {
    top: 10px !important;
    right: 10px !important;
    padding: 8px 11px !important;
    font-size: 0.62rem !important;
  }
}

/* =========================================================
   L'abeille D'or - Brand Reel Copy + Close Pill v2
   Date: 2026-05-29
   Purpose:
   1) force Brand Reel overlay close control to appear as Close pill
   2) override older X-style button sizing
   ========================================================= */

.brand-reel-lightbox-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 5 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border: 1px solid rgba(255, 250, 243, 0.48) !important;
  border-radius: 999px !important;
  padding: 9px 13px !important;
  background: rgba(44, 28, 20, 0.66) !important;
  color: #fffaf3 !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 0.68rem !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  box-shadow: none !important;
  text-indent: 0 !important;
  overflow: visible !important;
}

.brand-reel-lightbox-close:hover {
  background: rgba(44, 28, 20, 0.82) !important;
}

@media (max-width: 640px) {
  .brand-reel-lightbox-close {
    top: 10px !important;
    right: 10px !important;
    padding: 8px 11px !important;
    font-size: 0.62rem !important;
  }
}

/* =========================================================
   L'abeille D'or - Brand Reel Hide Overlay Sound v1
   Date: 2026-05-29
   Purpose:
   Hide the extra Brand Reel overlay Sound button because
   the overlay video already has native media controls.
   ========================================================= */

.brand-reel-lightbox-sound {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* =========================================================
   L'abeille D'or - Barista Overlay Standard v1
   Date: 2026-05-29
   Purpose:
   Make Barista main reel and side thumbnails use the same
   elegant overlay direction as Our Knefe.
   ========================================================= */

.barista-standard-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(18px, 4vw, 54px) !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 250, 243, 0.18), rgba(40, 25, 17, 0.78) 56%, rgba(18, 11, 8, 0.92)) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 220ms ease !important;
}

.barista-standard-overlay.is-open {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.barista-standard-overlay-card {
  position: relative !important;
  max-width: min(1120px, 92vw) !important;
  max-height: min(82vh, 820px) !important;
  border-radius: 30px !important;
  overflow: hidden !important;
  background: rgba(255, 250, 243, 0.94) !important;
  border: 1px solid rgba(255, 250, 243, 0.34) !important;
  box-shadow:
    0 36px 100px rgba(0, 0, 0, 0.36),
    0 0 0 1px rgba(198, 146, 62, 0.10),
    inset 0 0 40px rgba(255, 250, 243, 0.22) !important;
  transform: translateY(14px) scale(0.975) !important;
  transition: transform 220ms ease !important;
}

.barista-standard-overlay.is-open .barista-standard-overlay-card {
  transform: translateY(0) scale(1) !important;
}

.barista-standard-overlay-media {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 250, 243, 0.86) !important;
}

.barista-standard-overlay-media img,
.barista-standard-overlay-media video {
  display: block !important;
  max-width: 100% !important;
  max-height: min(82vh, 820px) !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  background: rgba(255, 250, 243, 0.82) !important;
}

.barista-standard-overlay-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 3 !important;
  border: 1px solid rgba(255, 250, 243, 0.48) !important;
  border-radius: 999px !important;
  padding: 9px 13px !important;
  background: rgba(44, 28, 20, 0.66) !important;
  color: #fffaf3 !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 0.68rem !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}

.barista-standard-overlay-close:hover {
  background: rgba(44, 28, 20, 0.82) !important;
}

body.barista-standard-overlay-open {
  overflow: hidden !important;
}

/* Keep Barista media visually clickable */
#barista .barista-media-card,
#barista .barista-thumb {
  cursor: pointer !important;
}

@media (max-width: 640px) {
  .barista-standard-overlay {
    padding: 14px !important;
  }

  .barista-standard-overlay-card {
    border-radius: 22px !important;
    max-width: 94vw !important;
    max-height: 78vh !important;
  }

  .barista-standard-overlay-media img,
  .barista-standard-overlay-media video {
    max-height: 78vh !important;
  }

  .barista-standard-overlay-close {
    top: 10px !important;
    right: 10px !important;
    padding: 8px 11px !important;
    font-size: 0.62rem !important;
  }
}

/* =========================================================
   L'abeille D'or - Brand Reel Overlay Safe Standard v2
   Date: 2026-05-29
   Purpose:
   Add the standard elegant overlay for Brand Reel without replacing
   the older controller. Safer append-only approach.
   ========================================================= */

.brand-reel-safe-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(18px, 4vw, 54px) !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 250, 243, 0.18), rgba(40, 25, 17, 0.78) 56%, rgba(18, 11, 8, 0.92)) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 220ms ease !important;
}

.brand-reel-safe-overlay.is-open {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.brand-reel-safe-overlay-card {
  position: relative !important;
  max-width: min(1120px, 92vw) !important;
  max-height: min(82vh, 820px) !important;
  border-radius: 30px !important;
  overflow: hidden !important;
  background: rgba(255, 250, 243, 0.94) !important;
  border: 1px solid rgba(255, 250, 243, 0.34) !important;
  box-shadow:
    0 36px 100px rgba(0, 0, 0, 0.36),
    0 0 0 1px rgba(198, 146, 62, 0.10),
    inset 0 0 40px rgba(255, 250, 243, 0.22) !important;
  transform: translateY(14px) scale(0.975) !important;
  transition: transform 220ms ease !important;
}

.brand-reel-safe-overlay.is-open .brand-reel-safe-overlay-card {
  transform: translateY(0) scale(1) !important;
}

.brand-reel-safe-overlay-media {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 250, 243, 0.86) !important;
}

.brand-reel-safe-overlay-media video {
  display: block !important;
  max-width: 100% !important;
  max-height: min(82vh, 820px) !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  background: rgba(255, 250, 243, 0.82) !important;
}

.brand-reel-safe-overlay-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 3 !important;
  border: 1px solid rgba(255, 250, 243, 0.48) !important;
  border-radius: 999px !important;
  padding: 9px 13px !important;
  background: rgba(44, 28, 20, 0.66) !important;
  color: #fffaf3 !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 0.68rem !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}

.brand-reel-safe-overlay-close:hover {
  background: rgba(44, 28, 20, 0.82) !important;
}

body.brand-reel-safe-overlay-open {
  overflow: hidden !important;
}

@media (max-width: 640px) {
  .brand-reel-safe-overlay {
    padding: 14px !important;
  }

  .brand-reel-safe-overlay-card {
    border-radius: 22px !important;
    max-width: 94vw !important;
    max-height: 78vh !important;
  }

  .brand-reel-safe-overlay-media video {
    max-height: 78vh !important;
  }

  .brand-reel-safe-overlay-close {
    top: 10px !important;
    right: 10px !important;
    padding: 8px 11px !important;
    font-size: 0.62rem !important;
  }
}

/* =========================================================
   L'abeille D'or - Occasions Overlay Standard v1
   Date: 2026-05-29
   Purpose:
   Visually standardize the existing Occasions lightbox to match
   the newer Our Knefe / Barista / Brand Reel overlay direction,
   without touching the approved JSON-driven Occasions JS logic.
   ========================================================= */

#occasion-lightbox.occasion-lightbox {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(18px, 4vw, 54px) !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 250, 243, 0.18), rgba(40, 25, 17, 0.78) 56%, rgba(18, 11, 8, 0.92)) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 220ms ease !important;
}

#occasion-lightbox.occasion-lightbox.is-open {
  opacity: 1 !important;
  pointer-events: auto !important;
}

#occasion-lightbox .occasion-lightbox-media {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  max-width: min(1120px, 92vw) !important;
  max-height: min(82vh, 820px) !important;
  border-radius: 30px !important;
  overflow: hidden !important;
  background: rgba(255, 250, 243, 0.94) !important;
  border: 1px solid rgba(255, 250, 243, 0.34) !important;
  box-shadow:
    0 36px 100px rgba(0, 0, 0, 0.36),
    0 0 0 1px rgba(198, 146, 62, 0.10),
    inset 0 0 40px rgba(255, 250, 243, 0.22) !important;
  transform: translateY(14px) scale(0.975) !important;
  transition: transform 220ms ease !important;
}

#occasion-lightbox.occasion-lightbox.is-open .occasion-lightbox-media {
  transform: translateY(0) scale(1) !important;
}

#occasion-lightbox .occasion-lightbox-media img,
#occasion-lightbox .occasion-lightbox-media video {
  display: block !important;
  max-width: 100% !important;
  max-height: min(82vh, 820px) !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  background: rgba(255, 250, 243, 0.82) !important;
}

/* Standard Close pill */
#occasion-lightbox .occasion-lightbox-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 3 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border: 1px solid rgba(255, 250, 243, 0.48) !important;
  border-radius: 999px !important;
  padding: 9px 13px !important;
  background: rgba(44, 28, 20, 0.66) !important;
  color: #fffaf3 !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 0.68rem !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

#occasion-lightbox .occasion-lightbox-close:hover {
  background: rgba(44, 28, 20, 0.82) !important;
}

/* Keep Occasions media visibly clickable */
#occasions .occasion-feature-card,
#occasions .occasion-thumb {
  cursor: pointer !important;
}

@media (max-width: 640px) {
  #occasion-lightbox.occasion-lightbox {
    padding: 14px !important;
  }

  #occasion-lightbox .occasion-lightbox-media {
    border-radius: 22px !important;
    max-width: 94vw !important;
    max-height: 78vh !important;
  }

  #occasion-lightbox .occasion-lightbox-media img,
  #occasion-lightbox .occasion-lightbox-media video {
    max-height: 78vh !important;
  }

  #occasion-lightbox .occasion-lightbox-close {
    top: 10px !important;
    right: 10px !important;
    padding: 8px 11px !important;
    font-size: 0.62rem !important;
  }
}

/* =========================================================
   L'abeille D'or - Occasions Main Overlay Safe v2
   Date: 2026-05-29
   Purpose:
   Apply the standard elegant overlay only to the main Occasions media.
   Side thumbnails remain untouched.
   ========================================================= */

.occasion-main-safe-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(18px, 4vw, 54px) !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 250, 243, 0.18), rgba(40, 25, 17, 0.78) 56%, rgba(18, 11, 8, 0.92)) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 220ms ease !important;
}

.occasion-main-safe-overlay.is-open {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.occasion-main-safe-overlay-card {
  position: relative !important;
  max-width: min(1120px, 92vw) !important;
  max-height: min(82vh, 820px) !important;
  border-radius: 30px !important;
  overflow: hidden !important;
  background: rgba(255, 250, 243, 0.94) !important;
  border: 1px solid rgba(255, 250, 243, 0.34) !important;
  box-shadow:
    0 36px 100px rgba(0, 0, 0, 0.36),
    0 0 0 1px rgba(198, 146, 62, 0.10),
    inset 0 0 40px rgba(255, 250, 243, 0.22) !important;
  transform: translateY(14px) scale(0.975) !important;
  transition: transform 220ms ease !important;
}

.occasion-main-safe-overlay.is-open .occasion-main-safe-overlay-card {
  transform: translateY(0) scale(1) !important;
}

.occasion-main-safe-overlay-media {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 250, 243, 0.86) !important;
}

.occasion-main-safe-overlay-media img,
.occasion-main-safe-overlay-media video {
  display: block !important;
  max-width: 100% !important;
  max-height: min(82vh, 820px) !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  background: rgba(255, 250, 243, 0.82) !important;
}

.occasion-main-safe-overlay-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 3 !important;
  border: 1px solid rgba(255, 250, 243, 0.48) !important;
  border-radius: 999px !important;
  padding: 9px 13px !important;
  background: rgba(44, 28, 20, 0.66) !important;
  color: #fffaf3 !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 0.68rem !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}

.occasion-main-safe-overlay-close:hover {
  background: rgba(44, 28, 20, 0.82) !important;
}

body.occasion-main-safe-overlay-open {
  overflow: hidden !important;
}

#occasions .occasion-feature-card {
  cursor: pointer !important;
}

@media (max-width: 640px) {
  .occasion-main-safe-overlay {
    padding: 14px !important;
  }

  .occasion-main-safe-overlay-card {
    border-radius: 22px !important;
    max-width: 94vw !important;
    max-height: 78vh !important;
  }

  .occasion-main-safe-overlay-media img,
  .occasion-main-safe-overlay-media video {
    max-height: 78vh !important;
  }

  .occasion-main-safe-overlay-close {
    top: 10px !important;
    right: 10px !important;
    padding: 8px 11px !important;
    font-size: 0.62rem !important;
  }
}

/* =========================================================
   L'abeille D'or - Selection Main Overlay Safe v1
   Date: 2026-05-29
   Purpose:
   Apply the standard elegant overlay only to the main Selection media.
   Side thumbnails remain untouched.
   ========================================================= */

.selection-main-safe-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(18px, 4vw, 54px) !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 250, 243, 0.18), rgba(40, 25, 17, 0.78) 56%, rgba(18, 11, 8, 0.92)) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 220ms ease !important;
}

.selection-main-safe-overlay.is-open {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.selection-main-safe-overlay-card {
  position: relative !important;
  max-width: min(1120px, 92vw) !important;
  max-height: min(82vh, 820px) !important;
  border-radius: 30px !important;
  overflow: hidden !important;
  background: rgba(255, 250, 243, 0.94) !important;
  border: 1px solid rgba(255, 250, 243, 0.34) !important;
  box-shadow:
    0 36px 100px rgba(0, 0, 0, 0.36),
    0 0 0 1px rgba(198, 146, 62, 0.10),
    inset 0 0 40px rgba(255, 250, 243, 0.22) !important;
  transform: translateY(14px) scale(0.975) !important;
  transition: transform 220ms ease !important;
}

.selection-main-safe-overlay.is-open .selection-main-safe-overlay-card {
  transform: translateY(0) scale(1) !important;
}

.selection-main-safe-overlay-media {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 250, 243, 0.86) !important;
}

.selection-main-safe-overlay-media img,
.selection-main-safe-overlay-media video {
  display: block !important;
  max-width: 100% !important;
  max-height: min(82vh, 820px) !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  background: rgba(255, 250, 243, 0.82) !important;
}

.selection-main-safe-overlay-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 3 !important;
  border: 1px solid rgba(255, 250, 243, 0.48) !important;
  border-radius: 999px !important;
  padding: 9px 13px !important;
  background: rgba(44, 28, 20, 0.66) !important;
  color: #fffaf3 !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 0.68rem !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}

.selection-main-safe-overlay-close:hover {
  background: rgba(44, 28, 20, 0.82) !important;
}

body.selection-main-safe-overlay-open {
  overflow: hidden !important;
}

#selection .selection-feature {
  cursor: pointer !important;
}

@media (max-width: 640px) {
  .selection-main-safe-overlay {
    padding: 14px !important;
  }

  .selection-main-safe-overlay-card {
    border-radius: 22px !important;
    max-width: 94vw !important;
    max-height: 78vh !important;
  }

  .selection-main-safe-overlay-media img,
  .selection-main-safe-overlay-media video {
    max-height: 78vh !important;
  }

  .selection-main-safe-overlay-close {
    top: 10px !important;
    right: 10px !important;
    padding: 8px 11px !important;
    font-size: 0.62rem !important;
  }
}

/* =========================================================
   L'abeille D'or - Hero Overlay Safe v1
   Date: 2026-05-29
   Purpose:
   Apply the standard elegant overlay to the Hero media only,
   without touching the approved Hero layout.
   ========================================================= */

.hero-safe-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(18px, 4vw, 54px) !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 250, 243, 0.18), rgba(40, 25, 17, 0.78) 56%, rgba(18, 11, 8, 0.92)) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 220ms ease !important;
}

.hero-safe-overlay.is-open {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.hero-safe-overlay-card {
  position: relative !important;
  max-width: min(1120px, 92vw) !important;
  max-height: min(82vh, 820px) !important;
  border-radius: 30px !important;
  overflow: hidden !important;
  background: rgba(255, 250, 243, 0.94) !important;
  border: 1px solid rgba(255, 250, 243, 0.34) !important;
  box-shadow:
    0 36px 100px rgba(0, 0, 0, 0.36),
    0 0 0 1px rgba(198, 146, 62, 0.10),
    inset 0 0 40px rgba(255, 250, 243, 0.22) !important;
  transform: translateY(14px) scale(0.975) !important;
  transition: transform 220ms ease !important;
}

.hero-safe-overlay.is-open .hero-safe-overlay-card {
  transform: translateY(0) scale(1) !important;
}

.hero-safe-overlay-media {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 250, 243, 0.86) !important;
}

.hero-safe-overlay-media video,
.hero-safe-overlay-media img {
  display: block !important;
  max-width: 100% !important;
  max-height: min(82vh, 820px) !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  background: rgba(255, 250, 243, 0.82) !important;
}

.hero-safe-overlay-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 3 !important;
  border: 1px solid rgba(255, 250, 243, 0.48) !important;
  border-radius: 999px !important;
  padding: 9px 13px !important;
  background: rgba(44, 28, 20, 0.66) !important;
  color: #fffaf3 !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 0.68rem !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}

.hero-safe-overlay-close:hover {
  background: rgba(44, 28, 20, 0.82) !important;
}

body.hero-safe-overlay-open {
  overflow: hidden !important;
}

.hero-video-wrap {
  cursor: pointer !important;
}

@media (max-width: 640px) {
  .hero-safe-overlay {
    padding: 14px !important;
  }

  .hero-safe-overlay-card {
    border-radius: 22px !important;
    max-width: 94vw !important;
    max-height: 78vh !important;
  }

  .hero-safe-overlay-media video,
  .hero-safe-overlay-media img {
    max-height: 78vh !important;
  }

  .hero-safe-overlay-close {
    top: 10px !important;
    right: 10px !important;
    padding: 8px 11px !important;
    font-size: 0.62rem !important;
  }
}

/* =========================================================
   L'abeille D'or - Digital Menu CTA Preview v5 Square QR
   Purpose:
   Square QR buttons for Selection and Barista.
   QR is the main clickable element. No JavaScript.
   ========================================================= */

@media (min-width: 981px) {
    #selection.selection-tabs-section {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 260px;
        column-gap: clamp(30px, 5vw, 72px);
        align-items: center;
    }

    #selection .selection-heading {
        grid-column: 1;
        margin-bottom: 0;
    }

    #selection .digital-menu-selection-square-wrap {
        grid-column: 2;
        justify-self: start;
        transform: translateX(-26px);
    }

    #selection .selection-tabs,
    #selection .selection-gallery {
        grid-column: 1 / -1;
    }

    #selection .selection-tabs {
        margin-top: clamp(28px, 4vw, 50px);
    }
}

.digital-menu-square-wrap {
    position: relative;
}

.digital-menu-square-button {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    text-decoration: none;
    color: #3b2413;
    border: 1px solid rgba(157, 105, 41, 0.28);
    background:
        radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.76), transparent 33%),
        linear-gradient(145deg, rgba(255, 248, 229, 0.98), rgba(230, 196, 141, 0.58));
    box-shadow:
        0 22px 48px rgba(74, 39, 12, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
    overflow: visible;
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.digital-menu-square-button::before {
    content: "";
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(157, 105, 41, 0.22);
    border-radius: 21px;
    pointer-events: none;
}

.digital-menu-square-button:hover {
    transform: translateY(-2px);
    filter: saturate(1.04);
    box-shadow:
        0 28px 58px rgba(74, 39, 12, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.digital-menu-square-button:active {
    transform: translateY(0) scale(0.992);
}

.digital-menu-selection-square {
    width: 230px;
    height: 230px;
    border-radius: 28px;
    padding: 24px 20px 17px;
}

.digital-menu-barista-square {
    width: 136px;
    height: 136px;
    margin-top: 12px;
    border-radius: 24px;
    padding: 20px 13px 12px;
}

.digital-menu-corner-label {
    position: absolute;
    top: 11px;
    left: 10px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 23px;
    padding: 0 10px;
    border-radius: 999px;
    color: #fff8e8;
    background: linear-gradient(180deg, #b77d33, #68401b);
    box-shadow:
        0 8px 16px rgba(74, 39, 12, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transform: rotate(-6deg);
    transform-origin: left center;
    pointer-events: none;
}

.digital-menu-barista-square .digital-menu-corner-label {
    top: 8px;
    left: 8px;
    min-height: 20px;
    padding: 0 8px;
    font-size: 0.54rem;
}

.digital-menu-square-qr {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    background: #fff9eb;
    border: 1px solid rgba(76, 43, 16, 0.24);
    box-shadow:
        0 14px 30px rgba(74, 39, 12, 0.16),
        inset 0 0 0 7px rgba(186, 132, 54, 0.08);
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.digital-menu-selection-square .digital-menu-square-qr {
    width: 150px;
    height: 150px;
    padding: 16px;
    gap: 6px;
    border-radius: 24px;
}

.digital-menu-barista-square .digital-menu-square-qr {
    width: 84px;
    height: 84px;
    padding: 10px;
    gap: 4px;
    border-radius: 18px;
}

.digital-menu-square-button:hover .digital-menu-square-qr {
    transform: scale(1.035);
    box-shadow:
        0 18px 38px rgba(74, 39, 12, 0.2),
        inset 0 0 0 7px rgba(186, 132, 54, 0.1);
}

.digital-menu-square-qr span {
    border-radius: 4px;
    background: rgba(58, 35, 16, 0.92);
}

.digital-menu-square-qr span:nth-child(2),
.digital-menu-square-qr span:nth-child(5),
.digital-menu-square-qr span:nth-child(7),
.digital-menu-square-qr span:nth-child(11),
.digital-menu-square-qr span:nth-child(14),
.digital-menu-square-qr span:nth-child(18),
.digital-menu-square-qr span:nth-child(21),
.digital-menu-square-qr span:nth-child(24) {
    background: rgba(188, 132, 50, 0.44);
}

.digital-menu-square-caption {
    position: relative;
    z-index: 2;
    margin-top: 10px;
    color: rgba(62, 37, 18, 0.68);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
    pointer-events: none;
}

.digital-menu-barista-square .digital-menu-square-caption {
    margin-top: 7px;
    font-size: 0.56rem;
    letter-spacing: 0.1em;
}

/* Keep Barista from becoming too tall on desktop/laptop */
@media (min-width: 981px) {
    #barista .digital-menu-barista-square {
        display: inline-grid;
        vertical-align: top;
        margin-left: 12px;
        margin-top: 10px;
    }
}

@media (max-width: 980px) {
    #selection .digital-menu-selection-square-wrap {
        margin: 18px 0 24px;
    }

    .digital-menu-selection-square {
        width: 100%;
        max-width: 230px;
        height: 230px;
        margin: 0 auto;
    }

    .digital-menu-selection-square .digital-menu-square-qr {
        width: 152px;
        height: 152px;
    }

    #barista .digital-menu-barista-square {
        width: 134px;
        height: 134px;
        margin: 12px 0 0;
    }
}

@media (max-width: 560px) {
    .digital-menu-selection-square {
        width: 100%;
        max-width: 210px;
        height: 210px;
        padding-top: 22px;
    }

    .digital-menu-selection-square .digital-menu-square-qr {
        width: 136px;
        height: 136px;
        padding: 14px;
        gap: 5px;
        border-radius: 22px;
    }

    .digital-menu-barista-square {
        width: 124px;
        height: 124px;
    }

    .digital-menu-barista-square .digital-menu-square-qr {
        width: 76px;
        height: 76px;
        padding: 9px;
        gap: 3px;
    }
}

/* =========================================================
   L'abeille D'or - Barista Action Tiles v1
   Purpose:
   Pair Digital Menu QR square with Branch Availability companion tile.
   No JavaScript.
   ========================================================= */

#barista .barista-action-tiles {
    display: flex;
    align-items: stretch;
    gap: 14px;
    margin-top: 14px;
    max-width: 300px;
}

#barista .barista-action-tiles .digital-menu-barista-square {
    margin: 0;
    flex: 0 0 auto;
}

#barista .barista-availability-tile {
    position: relative;
    isolation: isolate;
    display: grid;
    align-content: center;
    justify-items: start;
    width: 136px;
    height: 136px;
    padding: 22px 15px 14px;
    border-radius: 24px;
    text-decoration: none;
    color: #3b2413;
    border: 1px solid rgba(157, 105, 41, 0.28);
    background:
        radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.76), transparent 33%),
        linear-gradient(145deg, rgba(255, 248, 229, 0.98), rgba(230, 196, 141, 0.58));
    box-shadow:
        0 18px 38px rgba(74, 39, 12, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
    overflow: visible;
    transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

#barista .barista-availability-tile::before {
    content: "";
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(157, 105, 41, 0.22);
    border-radius: 18px;
    pointer-events: none;
}

#barista .barista-availability-tile:hover {
    transform: translateY(-2px);
    filter: saturate(1.04);
    box-shadow:
        0 24px 48px rgba(74, 39, 12, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

#barista .barista-availability-label {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    color: #fff8e8;
    background: linear-gradient(180deg, #b77d33, #68401b);
    box-shadow:
        0 8px 16px rgba(74, 39, 12, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
    font-size: 0.54rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transform: rotate(-6deg);
    transform-origin: left center;
    pointer-events: none;
}

#barista .barista-availability-tile strong {
    position: relative;
    z-index: 2;
    display: block;
    margin-top: 10px;
    color: #3b2413;
    font-size: 1rem;
    line-height: 1.02;
}

#barista .barista-availability-tile small {
    position: relative;
    z-index: 2;
    display: block;
    margin-top: 7px;
    color: rgba(62, 37, 18, 0.68);
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    line-height: 1.1;
    text-transform: uppercase;
}

@media (min-width: 981px) {
    #barista .barista-action-tiles {
        max-width: 292px;
    }
}

@media (max-width: 980px) {
    #barista .barista-action-tiles {
        max-width: none;
        justify-content: center;
        gap: 12px;
        margin-top: 14px;
    }

    #barista .barista-availability-tile {
        width: 134px;
        height: 134px;
    }
}

@media (max-width: 380px) {
    #barista .barista-action-tiles {
        gap: 10px;
    }

    #barista .digital-menu-barista-square,
    #barista .barista-availability-tile {
        width: 122px;
        height: 122px;
    }

    #barista .digital-menu-barista-square .digital-menu-square-qr {
        width: 74px;
        height: 74px;
    }

    #barista .barista-availability-tile strong {
        font-size: 0.9rem;
    }
}

/* =========================================================
   L'abeille D'or - Selection Nav Elegant Porcelain Tabs v1
   Purpose:
   Replace failed photo-backed nav pills with premium readable
   cream/gold category tabs. No JavaScript.
   ========================================================= */

.selection-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-bottom: 28px !important;
}

.selection-tab {
    --tab-accent: rgba(183, 125, 51, 0.62);

    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    min-height: 50px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(176, 122, 45, 0.26) !important;
    background:
        linear-gradient(180deg, rgba(255, 250, 239, 0.96), rgba(241, 219, 185, 0.68)) !important;
    color: #352115 !important;
    box-shadow:
        0 10px 24px rgba(74, 47, 34, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
    cursor: pointer !important;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease !important;
}

/* Soft category glow, not a photo */
.selection-tab::before {
    content: "" !important;
    position: absolute !important;
    right: -20px !important;
    top: 50% !important;
    width: 78px !important;
    height: 78px !important;
    border-radius: 999px !important;
    background:
        radial-gradient(circle, var(--tab-accent) 0%, rgba(255, 255, 255, 0) 68%) !important;
    opacity: 0.46 !important;
    transform: translateY(-50%) !important;
    z-index: -2 !important;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
}

/* Inner porcelain border */
.selection-tab::after {
    content: "" !important;
    position: absolute !important;
    inset: 5px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.46) !important;
    box-shadow: inset 0 0 0 1px rgba(158, 104, 42, 0.06) !important;
    z-index: -1 !important;
    pointer-events: none !important;
}

.selection-tab span,
.selection-tab.is-active span {
    position: relative !important;
    z-index: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #352115 !important;
    font-size: 0.94rem !important;
    font-weight: 850 !important;
    letter-spacing: 0.01em !important;
    line-height: 1.05 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) !important;
}

/* Small jewel dot before label */
.selection-tab span::before {
    content: "" !important;
    width: 7px !important;
    height: 7px !important;
    flex: 0 0 7px !important;
    border-radius: 999px !important;
    background: var(--tab-accent) !important;
    box-shadow:
        0 0 0 3px rgba(255, 246, 228, 0.76),
        0 6px 12px rgba(90, 49, 17, 0.14) !important;
}

/* Per-category subtle accent */
.selection-tab[data-selection="knefe"] {
    --tab-accent: rgba(203, 139, 48, 0.72);
}

.selection-tab[data-selection="arabic"] {
    --tab-accent: rgba(174, 111, 43, 0.68);
}

.selection-tab[data-selection="cakes"] {
    --tab-accent: rgba(128, 80, 48, 0.62);
}

.selection-tab[data-selection="icecream"] {
    --tab-accent: rgba(207, 170, 104, 0.72);
}

.selection-tab[data-selection="gifting"] {
    --tab-accent: rgba(151, 65, 58, 0.58);
}

.selection-tab[data-selection="barista"] {
    --tab-accent: rgba(105, 64, 35, 0.68);
}

.selection-tab:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(176, 122, 45, 0.38) !important;
    background:
        linear-gradient(180deg, rgba(255, 252, 244, 0.98), rgba(243, 222, 188, 0.78)) !important;
    box-shadow:
        0 14px 30px rgba(74, 47, 34, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

.selection-tab:hover::before {
    opacity: 0.62 !important;
    transform: translateY(-50%) scale(1.06) !important;
}

.selection-tab.is-active {
    color: #2f1d11 !important;
    border-color: rgba(171, 113, 38, 0.54) !important;
    background:
        linear-gradient(180deg, rgba(255, 246, 226, 0.98), rgba(223, 180, 115, 0.84)) !important;
    box-shadow:
        0 16px 36px rgba(112, 68, 24, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.76),
        inset 0 -1px 0 rgba(136, 84, 28, 0.18) !important;
}

.selection-tab.is-active::before {
    opacity: 0.74 !important;
    transform: translateY(-50%) scale(1.08) !important;
}

.selection-tab.is-active span::before {
    box-shadow:
        0 0 0 3px rgba(255, 239, 211, 0.88),
        0 8px 15px rgba(90, 49, 17, 0.18) !important;
}

/* Phone/tablet */
@media (max-width: 980px) {
    .selection-tabs {
        gap: 10px !important;
    }

    .selection-tab {
        min-height: 46px !important;
        padding: 0 15px !important;
    }

    .selection-tab span,
    .selection-tab.is-active span {
        font-size: 0.9rem !important;
    }

    .selection-tab span::before {
        width: 6px !important;
        height: 6px !important;
        flex-basis: 6px !important;
    }
}

/* =========================================================
   L'abeille D'or - Selection Nav Final Elegant Tabs v2
   Purpose:
   Final recovery from failed photo-backed nav attempts.
   Clean premium text-only ivory/gold category tabs.
   No images. No JavaScript.
   ========================================================= */

.selection-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 11px !important;
    margin-bottom: 28px !important;
}

/* Full reset of photo/pseudo-image behavior */
.selection-tab,
.selection-tab.is-active {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    min-height: 48px !important;
    padding: 0 20px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(169, 112, 42, 0.28) !important;
    background:
        linear-gradient(180deg, rgba(255, 251, 242, 0.98), rgba(240, 219, 187, 0.72)) !important;
    color: #342115 !important;
    box-shadow:
        0 9px 22px rgba(74, 47, 34, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
    cursor: pointer !important;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease !important;
}

/* Remove all previous image/dot/texture effects */
.selection-tab::before,
.selection-tab.is-active::before {
    content: "" !important;
    position: absolute !important;
    inset: 4px !important;
    left: 4px !important;
    right: 4px !important;
    top: 4px !important;
    bottom: 4px !important;
    width: auto !important;
    height: auto !important;
    border-radius: 999px !important;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.5), rgba(255,255,255,0.08)) !important;
    background-image: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    z-index: -2 !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.38) !important;
}

.selection-tab::after,
.selection-tab.is-active::after {
    content: "" !important;
    position: absolute !important;
    left: 18px !important;
    right: 18px !important;
    bottom: 7px !important;
    top: auto !important;
    height: 2px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, transparent, rgba(176, 122, 45, 0.42), transparent) !important;
    opacity: 0.42 !important;
    z-index: -1 !important;
    pointer-events: none !important;
    box-shadow: none !important;
}

/* Text only, no dot before label */
.selection-tab span,
.selection-tab.is-active span {
    position: relative !important;
    z-index: 3 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #342115 !important;
    font-size: 0.94rem !important;
    font-weight: 850 !important;
    letter-spacing: 0.01em !important;
    line-height: 1 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.58) !important;
    box-shadow: none !important;
}

.selection-tab span::before,
.selection-tab.is-active span::before {
    content: none !important;
    display: none !important;
}

/* Hover */
.selection-tab:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(169, 112, 42, 0.42) !important;
    background:
        linear-gradient(180deg, rgba(255, 253, 247, 1), rgba(244, 223, 190, 0.82)) !important;
    box-shadow:
        0 14px 30px rgba(74, 47, 34, 0.11),
        inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
}

.selection-tab:hover::after {
    opacity: 0.72 !important;
}

/* Active: richer but still soft/readable */
.selection-tab.is-active {
    border-color: rgba(158, 100, 31, 0.55) !important;
    background:
        linear-gradient(180deg, rgba(255, 246, 226, 0.98), rgba(220, 174, 105, 0.86)) !important;
    box-shadow:
        0 16px 34px rgba(112, 68, 24, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.78),
        inset 0 -1px 0 rgba(136, 84, 28, 0.16) !important;
}

.selection-tab.is-active::after {
    opacity: 0.9 !important;
    background: linear-gradient(90deg, transparent, rgba(105, 61, 22, 0.48), transparent) !important;
}

/* Mobile */
@media (max-width: 980px) {
    .selection-tabs {
        gap: 9px !important;
    }

    .selection-tab,
    .selection-tab.is-active {
        min-height: 44px !important;
        padding: 0 16px !important;
    }

    .selection-tab span,
    .selection-tab.is-active span {
        font-size: 0.9rem !important;
    }
}

/* =========================================================
   L'abeille D'or - Selection Nav Hard Reset v3
   Purpose:
   Fully remove failed photo/dot nav styling and restore clean
   elegant ivory/gold text-only category tabs.
   No JavaScript.
   ========================================================= */

.selection-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-bottom: 28px !important;
}

/* Main tab button: no images, no texture leaks */
.selection-tabs .selection-tab,
.selection-tabs .selection-tab.is-active,
.selection-tabs .selection-tab:hover {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    min-height: 48px !important;
    padding: 0 21px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(170, 112, 42, 0.3) !important;
    background-color: transparent !important;
    background-image:
        linear-gradient(180deg, rgba(255, 251, 243, 0.98), rgba(239, 218, 185, 0.74)) !important;
    color: #342115 !important;
    box-shadow:
        0 9px 22px rgba(74, 47, 34, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
    cursor: pointer !important;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease !important;
}

/* Kill every previous image/dot effect on ::before */
.selection-tabs .selection-tab::before,
.selection-tabs .selection-tab.is-active::before,
.selection-tabs .selection-tab:hover::before,
.selection-tabs .selection-tab[data-selection]::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 5px !important;
    width: auto !important;
    height: auto !important;
    left: 5px !important;
    right: 5px !important;
    top: 5px !important;
    bottom: 5px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.22) !important;
    background-image: none !important;
    background-size: auto !important;
    background-position: initial !important;
    background-repeat: no-repeat !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    z-index: -2 !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.36) !important;
    pointer-events: none !important;
}

/* Use ::after only as a subtle gold underline accent */
.selection-tabs .selection-tab::after,
.selection-tabs .selection-tab.is-active::after,
.selection-tabs .selection-tab:hover::after,
.selection-tabs .selection-tab[data-selection]::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 22px !important;
    right: 22px !important;
    bottom: 8px !important;
    top: auto !important;
    width: auto !important;
    height: 2px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, transparent, rgba(176, 122, 45, 0.42), transparent) !important;
    background-image: linear-gradient(90deg, transparent, rgba(176, 122, 45, 0.42), transparent) !important;
    opacity: 0.42 !important;
    filter: none !important;
    transform: none !important;
    z-index: -1 !important;
    pointer-events: none !important;
    box-shadow: none !important;
}

/* Text: force clean readable label, no chips, no dots */
.selection-tabs .selection-tab span,
.selection-tabs .selection-tab.is-active span,
.selection-tabs .selection-tab:hover span {
    position: relative !important;
    z-index: 3 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    color: #342115 !important;
    font-size: 0.94rem !important;
    font-weight: 850 !important;
    letter-spacing: 0.01em !important;
    line-height: 1 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.58) !important;
    box-shadow: none !important;
}

/* Remove old dot before text */
.selection-tabs .selection-tab span::before,
.selection-tabs .selection-tab.is-active span::before,
.selection-tabs .selection-tab:hover span::before {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

/* Hover */
.selection-tabs .selection-tab:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(170, 112, 42, 0.42) !important;
    background-image:
        linear-gradient(180deg, rgba(255, 253, 247, 1), rgba(244, 223, 190, 0.82)) !important;
    box-shadow:
        0 14px 30px rgba(74, 47, 34, 0.11),
        inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
}

.selection-tabs .selection-tab:hover::after {
    opacity: 0.72 !important;
}

/* Active */
.selection-tabs .selection-tab.is-active {
    border-color: rgba(158, 100, 31, 0.55) !important;
    background-image:
        linear-gradient(180deg, rgba(255, 246, 226, 0.98), rgba(220, 174, 105, 0.86)) !important;
    box-shadow:
        0 16px 34px rgba(112, 68, 24, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.78),
        inset 0 -1px 0 rgba(136, 84, 28, 0.16) !important;
}

.selection-tabs .selection-tab.is-active::after {
    opacity: 0.9 !important;
    background: linear-gradient(90deg, transparent, rgba(105, 61, 22, 0.48), transparent) !important;
    background-image: linear-gradient(90deg, transparent, rgba(105, 61, 22, 0.48), transparent) !important;
}

/* Mobile */
@media (max-width: 980px) {
    .selection-tabs {
        gap: 9px !important;
    }

    .selection-tabs .selection-tab,
    .selection-tabs .selection-tab.is-active {
        min-height: 44px !important;
        padding: 0 16px !important;
    }

    .selection-tabs .selection-tab span,
    .selection-tabs .selection-tab.is-active span {
        font-size: 0.9rem !important;
    }

    .selection-tabs .selection-tab::after,
    .selection-tabs .selection-tab.is-active::after {
        left: 18px !important;
        right: 18px !important;
        bottom: 7px !important;
    }
}

/* =========================================================
   L'abeille D'or - Selection Nav Slim Clean Reset v4
   Purpose:
   Final slim text-only Selection nav buttons.
   Removes leftover large-pill, image, dot, underline and bottom-label effects.
   No JavaScript.
   ========================================================= */

#selection .selection-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 26px !important;
}

/* Clean slim tab button */
#selection .selection-tabs .selection-tab,
#selection .selection-tabs .selection-tab.is-active,
#selection .selection-tabs .selection-tab:hover {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(170, 112, 42, 0.28) !important;
    background: linear-gradient(180deg, rgba(255, 251, 242, 0.98), rgba(238, 218, 186, 0.72)) !important;
    background-image: linear-gradient(180deg, rgba(255, 251, 242, 0.98), rgba(238, 218, 186, 0.72)) !important;
    color: #352115 !important;
    box-shadow:
        0 7px 18px rgba(74, 47, 34, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
    cursor: pointer !important;
    transform: none !important;
}

/* Kill all previous pseudo layers completely */
#selection .selection-tabs .selection-tab::before,
#selection .selection-tabs .selection-tab::after,
#selection .selection-tabs .selection-tab.is-active::before,
#selection .selection-tabs .selection-tab.is-active::after,
#selection .selection-tabs .selection-tab:hover::before,
#selection .selection-tabs .selection-tab:hover::after,
#selection .selection-tabs .selection-tab[data-selection]::before,
#selection .selection-tabs .selection-tab[data-selection]::after {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
    box-shadow: none !important;
    border: 0 !important;
    opacity: 0 !important;
}

/* Label centered, no chip, no dot, no bottom alignment */
#selection .selection-tabs .selection-tab span,
#selection .selection-tabs .selection-tab.is-active span,
#selection .selection-tabs .selection-tab:hover span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: static !important;
    z-index: 1 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    color: #352115 !important;
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.01em !important;
    line-height: 1 !important;
    text-align: center !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) !important;
    box-shadow: none !important;
}

/* Remove any dot or icon before label */
#selection .selection-tabs .selection-tab span::before,
#selection .selection-tabs .selection-tab span::after,
#selection .selection-tabs .selection-tab.is-active span::before,
#selection .selection-tabs .selection-tab.is-active span::after {
    content: none !important;
    display: none !important;
}

/* Hover */
#selection .selection-tabs .selection-tab:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(170, 112, 42, 0.4) !important;
    background: linear-gradient(180deg, rgba(255, 253, 247, 1), rgba(244, 224, 193, 0.82)) !important;
    background-image: linear-gradient(180deg, rgba(255, 253, 247, 1), rgba(244, 224, 193, 0.82)) !important;
    box-shadow:
        0 11px 24px rgba(74, 47, 34, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
}

/* Active state */
#selection .selection-tabs .selection-tab.is-active {
    border-color: rgba(158, 100, 31, 0.52) !important;
    background: linear-gradient(180deg, rgba(255, 246, 226, 0.98), rgba(222, 178, 111, 0.84)) !important;
    background-image: linear-gradient(180deg, rgba(255, 246, 226, 0.98), rgba(222, 178, 111, 0.84)) !important;
    box-shadow:
        0 13px 28px rgba(112, 68, 24, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.78),
        inset 0 -1px 0 rgba(136, 84, 28, 0.14) !important;
}

#selection .selection-tabs .selection-tab.is-active span {
    color: #2f1d11 !important;
}

/* Mobile */
@media (max-width: 980px) {
    #selection .selection-tabs {
        gap: 8px !important;
    }

    #selection .selection-tabs .selection-tab,
    #selection .selection-tabs .selection-tab.is-active {
        min-height: 36px !important;
        height: 36px !important;
        padding: 0 14px !important;
    }

    #selection .selection-tabs .selection-tab span,
    #selection .selection-tabs .selection-tab.is-active span {
        font-size: 0.86rem !important;
    }
}

/* =========================================================
   L'abeille D'or - Selection Nav Match Occasions v1
   Purpose:
   Make Selection nav tabs visually match the slim Occasions nav line,
   move Digital Menu QR tile slightly right on desktop, and use
   2-column Selection nav on phone.
   No JavaScript.
   ========================================================= */

/* Desktop/laptop: match Occasions tab style */
#selection .selection-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 0 0 26px !important;
    align-items: center !important;
}

#selection .selection-tabs .selection-tab,
#selection .selection-tabs .selection-tab.is-active,
#selection .selection-tabs .selection-tab:hover {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 10px 15px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(198, 146, 62, 0.20) !important;
    background: rgba(255, 250, 243, 0.54) !important;
    background-image: none !important;
    color: #4a2f22 !important;
    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    box-shadow: none !important;
    overflow: hidden !important;
    transform: none !important;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Fully kill all previous image/dot/underline pseudo effects */
#selection .selection-tabs .selection-tab::before,
#selection .selection-tabs .selection-tab::after,
#selection .selection-tabs .selection-tab.is-active::before,
#selection .selection-tabs .selection-tab.is-active::after,
#selection .selection-tabs .selection-tab:hover::before,
#selection .selection-tabs .selection-tab:hover::after,
#selection .selection-tabs .selection-tab[data-selection]::before,
#selection .selection-tabs .selection-tab[data-selection]::after {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: 0 !important;
    transform: none !important;
}

#selection .selection-tabs .selection-tab span,
#selection .selection-tabs .selection-tab.is-active span,
#selection .selection-tabs .selection-tab:hover span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: static !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    color: inherit !important;
    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

#selection .selection-tabs .selection-tab span::before,
#selection .selection-tabs .selection-tab span::after,
#selection .selection-tabs .selection-tab.is-active span::before,
#selection .selection-tabs .selection-tab.is-active span::after {
    content: none !important;
    display: none !important;
}

/* Hover and active copied from Occasions direction */
#selection .selection-tabs .selection-tab:hover {
    transform: translateY(-1px) !important;
    background: rgba(255, 250, 243, 0.88) !important;
}

#selection .selection-tabs .selection-tab.is-active {
    color: #fff8ed !important;
    background: #4a2f22 !important;
    border-color: #4a2f22 !important;
    box-shadow: 0 12px 26px rgba(74, 47, 34, 0.16) !important;
}

/* Move the Selection Digital Menu QR tile slightly right on PC/laptop */
@media (min-width: 981px) {
    #selection .digital-menu-selection-square-wrap {
        transform: translateX(4px) !important;
    }
}

/* Phone: 2-column grid instead of horizontal scroll */
@media (max-width: 980px) {
    #selection .selection-tabs {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
        margin: 0 0 22px !important;
        overflow: visible !important;
        padding-bottom: 0 !important;
    }

    #selection .selection-tabs .selection-tab,
    #selection .selection-tabs .selection-tab.is-active {
        width: 100% !important;
        min-height: 38px !important;
        height: 38px !important;
        padding: 8px 10px !important;
        font-size: 0.72rem !important;
        white-space: normal !important;
    }

    #selection .selection-tabs .selection-tab span,
    #selection .selection-tabs .selection-tab.is-active span {
        line-height: 1.12 !important;
    }
}

/* =========================================================
   L'abeille D'or - Occasions Nav Spacing v1
   Purpose:
   Push Occasions nav line slightly upward while keeping a clean
   one-line gap between the nav and the reel/text area below.
   No JavaScript.
   ========================================================= */

.occasion-atelier-heading {
    margin-bottom: 14px !important;
}

.occasion-atelier-tabs {
    margin-top: -4px !important;
    margin-bottom: 16px !important;
}

/* Phone: keep spacing clean but not cramped */
@media (max-width: 640px) {
    .occasion-atelier-heading {
        margin-bottom: 12px !important;
    }

    .occasion-atelier-tabs {
        margin-top: -2px !important;
        margin-bottom: 14px !important;
    }
}

/* =========================================================
   L'abeille D'or - Contact Orders Card + Compact Layout v1
   Purpose:
   Add support for 3 contact cards and reduce vertical card height.
   No JavaScript.
   ========================================================= */

#contact.contact-section {
    padding-top: 70px !important;
    padding-bottom: 72px !important;
}

#contact .contact-heading {
    margin-bottom: 26px !important;
}

#contact .contact-heading h2 {
    margin-bottom: 10px !important;
}

#contact .contact-heading p:not(.eyebrow) {
    max-width: 660px !important;
    line-height: 1.52 !important;
}

#contact .contact-card-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
    align-items: stretch !important;
}

#contact .contact-card {
    min-height: 0 !important;
    padding: 24px 22px !important;
    display: flex !important;
    flex-direction: column !important;
}

#contact .contact-card h3 {
    margin: 7px 0 8px !important;
    line-height: 1.1 !important;
}

#contact .contact-card p {
    margin-bottom: 16px !important;
    line-height: 1.48 !important;
}

#contact .contact-detail-list {
    margin-top: auto !important;
    margin-bottom: 13px !important;
}

#contact .contact-card-link {
    margin-top: 0 !important;
}

/* Keep single-number Orders mobile row clean */
#contact .contact-card-orders .contact-detail-line-wide {
    grid-template-columns: 50px minmax(0, 1fr) !important;
    gap: 6px !important;
}

#contact .contact-card-orders .contact-number-group-icons {
    justify-content: flex-start !important;
    justify-self: start !important;
}

/* Tablet: two cards then one card below */
@media (max-width: 1100px) {
    #contact .contact-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Phone: stacked cards, compact spacing */
@media (max-width: 720px) {
    #contact.contact-section {
        padding-top: 56px !important;
        padding-bottom: 58px !important;
    }

    #contact .contact-heading {
        margin-bottom: 22px !important;
    }

    #contact .contact-card-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    #contact .contact-card {
        padding: 22px 20px !important;
    }

    #contact .contact-card p {
        margin-bottom: 14px !important;
    }
}

/* =========================================================
   L'abeille D'or - Contact Compact Alignment v2
   Purpose:
   Reduce Contact card height, align Orders mobile row with Careers,
   and keep Careers mobile numbers side by side on desktop.
   No JavaScript.
   ========================================================= */

#contact.contact-section {
    padding-top: 58px !important;
    padding-bottom: 58px !important;
}

#contact .contact-heading {
    margin-bottom: 20px !important;
}

#contact .contact-heading h2 {
    margin-bottom: 8px !important;
}

#contact .contact-heading p:not(.eyebrow) {
    line-height: 1.44 !important;
}

/* Reduce card vertical height */
#contact .contact-card {
    padding: 20px 20px !important;
    min-height: 0 !important;
}

#contact .contact-label {
    margin-bottom: 4px !important;
}

#contact .contact-card h3 {
    margin: 4px 0 6px !important;
    line-height: 1.08 !important;
}

#contact .contact-card p {
    margin: 0 0 12px !important;
    line-height: 1.38 !important;
    font-size: 0.88rem !important;
}

/* Keep the contact rows aligned across cards */
#contact .contact-detail-list {
    margin-top: auto !important;
    margin-bottom: 10px !important;
}

#contact .contact-detail-line,
#contact .contact-detail-line-wide,
#contact .contact-card-orders .contact-detail-line-wide {
    align-items: center !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 6px !important;
}

/* Orders card: force same mobile-row rhythm as Careers */
#contact .contact-card-orders .contact-detail-list {
    margin-top: auto !important;
    margin-bottom: 10px !important;
}

#contact .contact-card-orders .contact-number-group-icons {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
}

/* Careers card: keep both mobile numbers on one line on desktop */
@media (min-width: 981px) {
    #contact .contact-card:nth-child(2) .contact-number-group-icons {
        display: inline-flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
        gap: 5px !important;
    }

    #contact .contact-card:nth-child(2) .contact-number-item {
        display: inline-flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 3px !important;
        white-space: nowrap !important;
    }

    #contact .contact-card:nth-child(2) .contact-number-separator {
        display: inline-flex !important;
        align-items: center !important;
        margin: 0 1px !important;
    }

    #contact .contact-card:nth-child(2) .contact-number-text {
        font-size: 0.84rem !important;
        white-space: nowrap !important;
    }

    #contact .contact-card:nth-child(2) .contact-whatsapp-icon {
        width: 24px !important;
        height: 24px !important;
        flex: 0 0 24px !important;
    }

    #contact .contact-card:nth-child(2) .contact-whatsapp-icon svg {
        width: 14px !important;
        height: 14px !important;
    }
}

/* Keep links close and compact */
#contact .contact-card-link {
    margin-top: 0 !important;
    font-size: 0.88rem !important;
}

/* Phone: keep stacked layout readable, not too compressed */
@media (max-width: 720px) {
    #contact.contact-section {
        padding-top: 50px !important;
        padding-bottom: 52px !important;
    }

    #contact .contact-card {
        padding: 19px 18px !important;
    }

    #contact .contact-card p {
        font-size: 0.88rem !important;
        line-height: 1.42 !important;
        margin-bottom: 12px !important;
    }

    #contact .contact-detail-list {
        margin-bottom: 10px !important;
    }
}

/* =========================================================
   L'abeille D'or - Contact Careers Width Fix v3
   Purpose:
   Keep compact card height, but give the Careers card enough
   desktop width so the second WhatsApp icon stays inside the card.
   No JavaScript.
   ========================================================= */

/* Desktop only: middle Careers card gets slightly more width */
@media (min-width: 981px) {
    #contact .contact-card-grid {
        grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1.22fr) minmax(0, 0.92fr) !important;
        gap: 18px !important;
    }

    #contact .contact-card:nth-child(2) {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    #contact .contact-card:nth-child(2) .contact-detail-line-wide {
        grid-template-columns: 44px minmax(0, 1fr) !important;
        gap: 5px !important;
    }

    #contact .contact-card:nth-child(2) .contact-number-group-icons {
        max-width: 100% !important;
        overflow: visible !important;
    }

    #contact .contact-card:nth-child(2) .contact-number-text {
        font-size: 0.82rem !important;
    }

    #contact .contact-card:nth-child(2) .contact-whatsapp-icon {
        width: 22px !important;
        height: 22px !important;
        flex: 0 0 22px !important;
    }

    #contact .contact-card:nth-child(2) .contact-whatsapp-icon svg {
        width: 13px !important;
        height: 13px !important;
    }

    #contact .contact-card:nth-child(2) .contact-number-separator {
        margin: 0 !important;
    }
}

/* Tablet: allow normal wrapping instead of overflowing */
@media (max-width: 980px) {
    #contact .contact-card:nth-child(2) .contact-number-group-icons {
        flex-wrap: wrap !important;
        white-space: normal !important;
    }
}

/* =========================================================
   L'abeille D'or - Contact Mobile Landing + Card Lift v1
   Purpose:
   1) On phone, make Contact header nav land one line above eyebrow.
   2) Push Contact cards upward visually.
   No JavaScript.
   ========================================================= */

/* Desktop/laptop: lift cards slightly without changing card size */
#contact .contact-card-grid {
    margin-top: -18px !important;
}

/* Phone: stronger lift and better anchor landing */
@media (max-width: 720px) {
    #contact.contact-section {
        scroll-margin-top: 92px !important;
    }

    #contact .contact-card-grid {
        margin-top: -34px !important;
    }
}

/* Smaller phones: avoid over-pulling the cards */
@media (max-width: 420px) {
    #contact .contact-card-grid {
        margin-top: -28px !important;
    }
}

/* =========================================================
   L'abeille D'or - Contact Mobile Anchor Landing v2
   Purpose:
   On phone, make all links to #contact land above the Contact eyebrow,
   especially Hero "Contact Us" and Occasions "Plan your occasion".
   Does not affect Branches.
   No JavaScript.
   ========================================================= */

@media (max-width: 720px) {
    #contact.contact-section {
        scroll-margin-top: 142px !important;
    }
}

/* Slightly smaller offset for very small phones */
@media (max-width: 420px) {
    #contact.contact-section {
        scroll-margin-top: 134px !important;
    }
}

/* =========================================================
   L'abeille D'or - Contact Mobile Anchor Landing v2
   Purpose:
   On phone, make all links to #contact land above the Contact eyebrow,
   especially Hero "Contact Us" and Occasions "Plan your occasion".
   Does not affect Branches.
   No JavaScript.
   ========================================================= */

@media (max-width: 720px) {
    #contact.contact-section {
        scroll-margin-top: 142px !important;
    }
}

/* Slightly smaller offset for very small phones */
@media (max-width: 420px) {
    #contact.contact-section {
        scroll-margin-top: 134px !important;
    }
}

/* =========================================================
   L'abeille D'or - Branches Temporary Photo Below Headline v1
   Purpose:
   Temporary visibility fix before full Branches section redesign.
   On phone/tablet, show Branches headline/text above the photo.
   No JavaScript.
   ========================================================= */

@media (max-width: 980px) {
    #branches.split-section,
    #branches.split-section.reverse {
        display: flex !important;
        flex-direction: column !important;
    }

    #branches .split-content {
        order: 1 !important;
    }

    #branches .split-image {
        order: 2 !important;
        margin-top: 18px !important;
    }
}

/* =========================================================
   L'abeille D'or - Branches Temporary Order + Landing v2
   Purpose:
   Temporary visibility fix before the full Branches redesign.
   1) Show Branches headline/text above the photo on all screen sizes.
   2) Make top-nav Branches click land above the eyebrow.
   No JavaScript.
   ========================================================= */

/* Anchor landing: keep Branches eyebrow visible below sticky header */
#branches {
    scroll-margin-top: 142px !important;
}

/* Temporary layout: content first, photo below */
#branches.split-section,
#branches.split-section.reverse {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 22px !important;
}

#branches .split-content {
    order: 1 !important;
}

#branches .split-image {
    order: 2 !important;
    margin-top: 0 !important;
}

/* Keep the temporary photo controlled on desktop/laptop */
@media (min-width: 981px) {
    #branches.split-section,
    #branches.split-section.reverse {
        width: min(100% - 48px, 1180px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #branches .split-content {
        max-width: 760px !important;
    }

    #branches .split-image {
        width: 100% !important;
        max-height: 430px !important;
        overflow: hidden !important;
        border-radius: 32px !important;
    }

    #branches .split-image img {
        width: 100% !important;
        height: 430px !important;
        object-fit: cover !important;
        display: block !important;
    }
}

/* Phone/tablet anchor landing */
@media (max-width: 980px) {
    #branches {
        scroll-margin-top: 128px !important;
    }

    #branches.split-section,
    #branches.split-section.reverse {
        gap: 18px !important;
    }

    #branches .split-image {
        margin-top: 0 !important;
    }
}

/* Smaller phones */
@media (max-width: 420px) {
    #branches {
        scroll-margin-top: 118px !important;
    }
}

/* =========================================================
   L'abeille D'or - Branches Mobile Anchor Landing v3
   Purpose:
   Keep PC/laptop Branches behavior approved, but fix phone
   anchor landing so Branches opens above the eyebrow.
   No JavaScript.
   ========================================================= */

/* Phone/tablet only: increase landing offset so eyebrow is not skipped */
@media (max-width: 980px) {
    #branches {
        scroll-margin-top: 168px !important;
    }
}

/* Smaller phones still need enough offset, not less than before */
@media (max-width: 420px) {
    #branches {
        scroll-margin-top: 158px !important;
    }
}

/* =========================================================
   L'abeille D'or - Branches Mobile Anchor Landing v4
   Purpose:
   Fine-tune phone Branches landing so it stops one line above
   the Branches eyebrow. PC/laptop remains unchanged.
   No JavaScript.
   ========================================================= */

@media (max-width: 980px) {
    #branches {
        scroll-margin-top: 190px !important;
    }
}

@media (max-width: 420px) {
    #branches {
        scroll-margin-top: 180px !important;
    }
}

/* =========================================================
   L'abeille D'or - Branches Laptop Anchor Landing v5
   Purpose:
   Fine-tune laptop/desktop Branches landing so it stops one line
   above the Branches eyebrow. Phone remains untouched.
   No JavaScript.
   ========================================================= */

@media (min-width: 981px) {
    #branches {
        scroll-margin-top: 168px !important;
    }
}

/* =========================================================
   L'abeille D'or - Branches Laptop Anchor Landing v5
   Purpose:
   Fine-tune laptop/desktop Branches landing so it stops one line
   above the Branches eyebrow. Phone remains untouched.
   No JavaScript.
   ========================================================= */

@media (min-width: 981px) {
    #branches {
        scroll-margin-top: 168px !important;
    }
}

/* =========================================================
   L'abeille D'or - Contact Laptop Anchor Correction v2
   Purpose:
   Correct laptop/desktop Contact landing so it stops about one
   line above the Contact eyebrow, without showing too much of
   the Branches photo above. Phone remains untouched.
   No JavaScript.
   ========================================================= */

@media (min-width: 981px) {
    #contact.contact-section {
        scroll-margin-top: 96px !important;
    }
}

/* =========================================================
   L'abeille D'or - Branches Typography Alignment v1
   Purpose:
   Make Branches eyebrow, headline and text match the typography,
   sizing and alignment direction used in the refined homepage sections.
   Applies to laptop/desktop and phone.
   No JavaScript.
   ========================================================= */

#branches .split-content {
    max-width: 760px !important;
    padding: 0 !important;
    text-align: left !important;
}

#branches .split-content .eyebrow {
    margin: 0 0 10px !important;
    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: 0.72rem !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: #a86e2d !important;
}

#branches .split-content h2 {
    margin: 0 0 14px !important;
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: clamp(2.45rem, 4.4vw, 4.25rem) !important;
    line-height: 0.98 !important;
    font-weight: 700 !important;
    letter-spacing: -0.035em !important;
    color: #2f2118 !important;
}

#branches .split-content p:not(.eyebrow) {
    margin: 0 !important;
    max-width: 680px !important;
    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: clamp(0.9rem, 0.98vw, 1rem) !important;
    line-height: 1.58 !important;
    font-weight: 500 !important;
    color: #6e5c50 !important;
}

/* Laptop/desktop: keep it aligned like the refined editorial sections */
@media (min-width: 981px) {
    #branches .split-content {
        margin: 0 !important;
    }
}

/* Phone/tablet: match the softer mobile rhythm of the other sections */
@media (max-width: 980px) {
    #branches .split-content {
        width: 100% !important;
        max-width: 620px !important;
        margin: 0 auto !important;
        text-align: left !important;
    }

    #branches .split-content .eyebrow {
        margin-bottom: 9px !important;
        font-size: 0.68rem !important;
        letter-spacing: 0.16em !important;
    }

    #branches .split-content h2 {
        margin-bottom: 12px !important;
        font-size: clamp(2rem, 8vw, 2.75rem) !important;
        line-height: 1.02 !important;
        letter-spacing: -0.03em !important;
    }

    #branches .split-content p:not(.eyebrow) {
        max-width: 100% !important;
        font-size: 0.92rem !important;
        line-height: 1.55 !important;
    }
}

/* =========================================================
   L'abeille D'or - Branches Headline Size Correction v2
   Purpose:
   Reduce Branches headline size to better match refined sections
   such as Our Knefe. Keeps eyebrow/text styling consistent.
   No JavaScript.
   ========================================================= */

#branches .split-content h2 {
    font-size: clamp(2.05rem, 2.8vw, 3rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.025em !important;
    margin: 0 0 12px !important;
}

/* Laptop: avoid oversized headline on shorter screens */
@media (min-width: 981px) and (max-height: 820px) {
    #branches .split-content h2 {
        font-size: clamp(1.95rem, 2.45vw, 2.65rem) !important;
    }
}

/* Phone/tablet: match mobile section rhythm */
@media (max-width: 980px) {
    #branches .split-content h2 {
        font-size: clamp(1.85rem, 6.6vw, 2.35rem) !important;
        line-height: 1.08 !important;
        letter-spacing: -0.025em !important;
        margin-bottom: 11px !important;
    }
}

/* =========================================================
   L'abeille D'or - Contact Typography Alignment v1
   Purpose:
   Make Contact eyebrow, headline and paragraph match the refined
   section typography used across the homepage.
   Keeps contact cards, phone landing, and anchors untouched.
   No JavaScript.
   ========================================================= */

#contact .contact-heading {
    max-width: 760px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    margin-bottom: 20px !important;
    text-align: left !important;
}

#contact .contact-heading .eyebrow {
    margin: 0 0 10px !important;
    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: 0.72rem !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: #a86e2d !important;
}

#contact .contact-heading h2 {
    margin: 0 0 12px !important;
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: clamp(2.05rem, 2.8vw, 3rem) !important;
    line-height: 1.08 !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
    color: #2f2118 !important;
}

#contact .contact-heading p:not(.eyebrow) {
    margin: 0 !important;
    max-width: 680px !important;
    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: clamp(0.9rem, 0.98vw, 1rem) !important;
    line-height: 1.58 !important;
    font-weight: 500 !important;
    color: #6e5c50 !important;
}

/* Laptop: avoid oversized headline on shorter screens */
@media (min-width: 981px) and (max-height: 820px) {
    #contact .contact-heading h2 {
        font-size: clamp(1.95rem, 2.45vw, 2.65rem) !important;
    }
}

/* Phone/tablet: match mobile rhythm of the other refined sections */
@media (max-width: 980px) {
    #contact .contact-heading {
        width: 100% !important;
        max-width: 620px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 18px !important;
        text-align: left !important;
    }

    #contact .contact-heading .eyebrow {
        margin-bottom: 9px !important;
        font-size: 0.68rem !important;
        letter-spacing: 0.16em !important;
    }

    #contact .contact-heading h2 {
        margin-bottom: 11px !important;
        font-size: clamp(1.85rem, 6.6vw, 2.35rem) !important;
        line-height: 1.08 !important;
        letter-spacing: -0.025em !important;
    }

    #contact .contact-heading p:not(.eyebrow) {
        max-width: 100% !important;
        font-size: 0.92rem !important;
        line-height: 1.55 !important;
    }
}

/* =========================================================
   L'abeille D'or - Contact Number Spacing v3
   Purpose:
   Move Contact phone numbers slightly right so they do not overlap
   or sit too close to Landline/Mobile labels.
   No JavaScript.
   ========================================================= */

/* General contact rows: give the label column more breathing room */
#contact .contact-detail-line,
#contact .contact-detail-line-wide {
    grid-template-columns: 72px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: center !important;
}

/* Landline row needs the most space because "Landline" is wider */
#contact .contact-card:first-child .contact-detail-line {
    grid-template-columns: 78px minmax(0, 1fr) !important;
    gap: 10px !important;
}

/* Careers and Orders can stay tighter, but not overlapping */
#contact .contact-card:nth-child(2) .contact-detail-line-wide,
#contact .contact-card-orders .contact-detail-line-wide {
    grid-template-columns: 62px minmax(0, 1fr) !important;
    gap: 9px !important;
}

/* Keep labels clean and prevent them from colliding with numbers */
#contact .contact-detail-type {
    white-space: nowrap !important;
    min-width: 0 !important;
}

/* Keep number groups aligned after the wider label column */
#contact .contact-number-group-icons,
#contact .contact-number-group,
#contact .contact-number-text {
    justify-self: start !important;
}

/* Phone: still give enough label space, without making cards too wide */
@media (max-width: 720px) {
    #contact .contact-detail-line,
    #contact .contact-detail-line-wide,
    #contact .contact-card:first-child .contact-detail-line,
    #contact .contact-card:nth-child(2) .contact-detail-line-wide,
    #contact .contact-card-orders .contact-detail-line-wide {
        grid-template-columns: 70px minmax(0, 1fr) !important;
        gap: 9px !important;
    }
}

/* Very small phones: compact but still avoid overlap */
@media (max-width: 420px) {
    #contact .contact-detail-line,
    #contact .contact-detail-line-wide,
    #contact .contact-card:first-child .contact-detail-line,
    #contact .contact-card:nth-child(2) .contact-detail-line-wide,
    #contact .contact-card-orders .contact-detail-line-wide {
        grid-template-columns: 66px minmax(0, 1fr) !important;
        gap: 8px !important;
    }
}

/* =========================================================
   L'abeille D'or - Hero Brand Strip Lift v1
   Purpose:
   On PC/laptop only, lift the brand strip closer to the hero reel
   without pulling the Selection section upward or changing its anchor.
   Phone/tablet remains untouched.
   No JavaScript.
   ========================================================= */

@media (min-width: 981px) {
    .brand-strip {
        position: relative !important;
        transform: translateY(-110px) !important;
        z-index: 3 !important;
    }
}

/* Shorter laptop screens need a slightly stronger lift */
@media (min-width: 981px) and (max-height: 820px) {
    .brand-strip {
        transform: translateY(-125px) !important;
    }
}

/* Very tall desktop screens need a softer lift */
@media (min-width: 981px) and (min-height: 950px) {
    .brand-strip {
        transform: translateY(-95px) !important;
    }
}

/* =========================================================
   L'abeille D'or - Contact + Branches Heading Weight v1
   Purpose:
   Make Contact and Branches section headings feel lighter and
   closer to the refined typography used in other homepage sections.
   Does not affect contact cards or branch layout.
   No JavaScript.
   ========================================================= */

#branches .split-content h2,
#contact .contact-heading h2 {
    font-weight: 500 !important;
    letter-spacing: -0.02em !important;
}

/* Keep paragraph text refined and not overly heavy */
#branches .split-content p:not(.eyebrow),
#contact .contact-heading p:not(.eyebrow) {
    font-weight: 400 !important;
}

/* Keep eyebrow strong but not too heavy */
#branches .split-content .eyebrow,
#contact .contact-heading .eyebrow {
    font-weight: 700 !important;
}

/* =========================================================
   L'abeille D'or - Hero Desktop Anchor Offset v1
   Purpose:
   On PC/laptop only, make the Hero anchor land about three lines
   higher without affecting the Selection section or its anchor.
   Phone/tablet remains untouched.
   No JavaScript.
   ========================================================= */

@media (min-width: 981px) {
    #hero.hero {
        scroll-margin-top: 180px !important;
    }
}

/* Shorter laptop screens: slightly stronger offset */
@media (min-width: 981px) and (max-height: 820px) {
    #hero.hero {
        scroll-margin-top: 196px !important;
    }
}

/* =========================================================
   L'abeille D'or - Hero Visual Lift v2
   Purpose:
   On PC/laptop only, move the visible Hero section upward by
   about three visual lines without changing Selection position
   or Selection anchor behavior.
   Phone/tablet remains untouched.
   No JavaScript.
   ========================================================= */

@media (min-width: 981px) {
    #hero.hero,
    .hero {
        transform: translateY(-54px) !important;
        position: relative !important;
        z-index: 2 !important;
    }
}

/* Shorter laptop screens: slightly stronger lift */
@media (min-width: 981px) and (max-height: 820px) {
    #hero.hero,
    .hero {
        transform: translateY(-62px) !important;
    }
}

/* =========================================================
   L'abeille D'or - Hero Brand Strip Follow-up Lift v2
   Purpose:
   After lifting the Hero section visually, lift the brand strip
   further on PC/laptop so it sits closer below the reel.
   Does not pull Selection upward or change Selection anchor behavior.
   Phone/tablet remains untouched.
   No JavaScript.
   ========================================================= */

@media (min-width: 981px) {
    .brand-strip {
        position: relative !important;
        transform: translateY(-165px) !important;
        z-index: 3 !important;
    }
}

/* Shorter laptop screens: slightly stronger lift */
@media (min-width: 981px) and (max-height: 820px) {
    .brand-strip {
        transform: translateY(-182px) !important;
    }
}

/* Taller desktop screens: slightly softer lift */
@media (min-width: 981px) and (min-height: 950px) {
    .brand-strip {
        transform: translateY(-145px) !important;
    }
}

/* =========================================================
   L'abeille D'or - Contact Info WhatsApp v1
   Purpose:
   Support added mobile/WhatsApp number in General enquiries card
   while preserving approved compact contact layout.
   No JavaScript.
   ========================================================= */

#contact .contact-card:first-child .contact-detail-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

#contact .contact-card:first-child .contact-detail-line,
#contact .contact-card:first-child .contact-detail-line-wide {
    grid-template-columns: 78px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: center !important;
}

#contact .contact-card:first-child .contact-number-group-icons {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
}

#contact .contact-card:first-child .contact-number-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
}

@media (max-width: 720px) {
    #contact .contact-card:first-child .contact-detail-list {
        gap: 7px !important;
    }

    #contact .contact-card:first-child .contact-detail-line,
    #contact .contact-card:first-child .contact-detail-line-wide {
        grid-template-columns: 70px minmax(0, 1fr) !important;
        gap: 9px !important;
    }
}

/* =========================================================
   L'abeille D'or - Selection Desktop Anchor + Viewport Fit v1
   Purpose:
   1) On PC/laptop, push the top-nav Selection landing about two lines higher.
   2) On PC/laptop, give the Selection gallery more height so the selected
      content fills the screen better and does not expose the Brand Reel top.
   Does not modify Brand Reel section or Brand Reel anchor.
   Phone/tablet remains untouched.
   No JavaScript.
   ========================================================= */

/* 1) Top header Selection anchor: desktop/laptop only */
@media (min-width: 981px) {
    #selection.selection-tabs-section {
        scroll-margin-top: 174px !important;
    }
}

/* Taller screens: keep the same "above eyebrow" feeling */
@media (min-width: 981px) and (min-height: 820px) {
    #selection.selection-tabs-section {
        scroll-margin-top: 184px !important;
    }
}

/* Shorter laptop screens: still higher than before, but not excessive */
@media (min-width: 981px) and (max-height: 780px) {
    #selection.selection-tabs-section {
        scroll-margin-top: 160px !important;
    }
}

/* 2) Selection content fill: desktop/laptop only */
@media (min-width: 981px) {
    #selection .selection-gallery {
        min-height: clamp(600px, 66vh, 720px) !important;
        align-items: stretch !important;
    }

    #selection .selection-feature {
        min-height: clamp(560px, 62vh, 680px) !important;
    }

    #selection .selection-feature img,
    #selection .selection-feature video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    #selection .selection-side {
        min-height: clamp(560px, 62vh, 680px) !important;
        display: flex !important;
        flex-direction: column !important;
    }

    #selection .selection-thumbs {
        margin-top: auto !important;
    }
}

/* Slightly shorter laptop screens: controlled expansion */
@media (min-width: 981px) and (max-height: 780px) {
    #selection .selection-gallery {
        min-height: 570px !important;
    }

    #selection .selection-feature,
    #selection .selection-side {
        min-height: 530px !important;
    }
}

/* =========================================================
   L'abeille D'or - Selection Thumbnail Bottom Alignment v2
   Purpose:
   On PC/laptop only, align the lower edge of the Selection side
   thumbnails with the lower edge of the main Selection media.
   Does not affect Brand Reel or Brand Reel anchor.
   Phone/tablet remains untouched.
   No JavaScript.
   ========================================================= */

@media (min-width: 981px) {
    #selection .selection-gallery {
        align-items: stretch !important;
    }

    #selection .selection-side {
        display: flex !important;
        flex-direction: column !important;
        justify-content: stretch !important;
        min-height: clamp(560px, 62vh, 680px) !important;
    }

    #selection .selection-copy {
        flex: 0 0 auto !important;
    }

    #selection .selection-thumbs {
        margin-top: auto !important;
        align-self: stretch !important;
    }

    #selection .selection-thumb-grid,
    #selection .selection-thumbs {
        align-items: end !important;
    }
}

/* Shorter laptop screens: match the reduced Selection height from the previous patch */
@media (min-width: 981px) and (max-height: 780px) {
    #selection .selection-side {
        min-height: 530px !important;
    }
}

/* =========================================================
   L'abeille D'or - Selection Media + Thumbnail Sync v3
   Purpose:
   On PC/laptop only, align the bottom edge of the Selection side
   thumbnail grid with the bottom edge of the main Selection media.
   Does not affect Brand Reel or Brand Reel anchor.
   Phone/tablet remains untouched.
   No JavaScript.
   ========================================================= */

@media (min-width: 981px) {
    #selection .selection-gallery {
        align-items: stretch !important;
        min-height: clamp(600px, 66vh, 720px) !important;
    }

    /* Main media height */
    #selection .selection-feature {
        height: clamp(560px, 62vh, 680px) !important;
        min-height: 0 !important;
        max-height: 680px !important;
        align-self: stretch !important;
    }

    #selection .selection-feature img,
    #selection .selection-feature video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* Side column matches main media height */
    #selection .selection-side {
        height: clamp(560px, 62vh, 680px) !important;
        min-height: 0 !important;
        max-height: 680px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }

    #selection .selection-copy {
        flex: 0 0 auto !important;
    }

    /* Thumbnail area sits at the bottom and must not exceed main media edge */
    #selection .selection-thumbs,
    #selection #selection-thumbs {
        flex: 0 0 auto !important;
        margin-top: 18px !important;
        margin-bottom: 0 !important;
        align-self: stretch !important;
        transform: none !important;
    }

    /* Make the thumbnail grid compact enough to fit inside the matched height */
    #selection .selection-thumbs {
        gap: 12px !important;
    }

    #selection .selection-thumb {
        aspect-ratio: 1.55 / 1 !important;
        min-height: 0 !important;
    }

    #selection .selection-thumb img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }
}

/* Shorter laptop screens */
@media (min-width: 981px) and (max-height: 780px) {
    #selection .selection-gallery {
        min-height: 570px !important;
    }

    #selection .selection-feature,
    #selection .selection-side {
        height: 530px !important;
        max-height: 530px !important;
    }

    #selection .selection-thumbs {
        gap: 10px !important;
    }

    #selection .selection-thumb {
        aspect-ratio: 1.65 / 1 !important;
    }
}

/* =========================================================
   L'abeille D'or - Selection Thumbnail Grid Correction v4
   Purpose:
   Fix Selection side thumbnail overlap after height sync.
   Keep main media and side thumbnail area visually aligned on PC/laptop.
   Does not affect Brand Reel or Brand Reel anchor.
   Phone/tablet remains untouched.
   No JavaScript.
   ========================================================= */

@media (min-width: 981px) {
    #selection .selection-gallery {
        align-items: stretch !important;
    }

    #selection .selection-feature {
        height: clamp(560px, 62vh, 680px) !important;
        min-height: 0 !important;
        max-height: 680px !important;
    }

    #selection .selection-side {
        height: clamp(560px, 62vh, 680px) !important;
        min-height: 0 !important;
        max-height: 680px !important;
        display: grid !important;
        grid-template-rows: auto 1fr !important;
        align-content: stretch !important;
    }

    #selection .selection-copy {
        min-height: 0 !important;
    }

    #selection .selection-thumbs,
    #selection #selection-thumbs {
        align-self: end !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 14px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        overflow: visible !important;
    }

    #selection .selection-thumb {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 1.72 / 1 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        position: relative !important;
        margin: 0 !important;
        transform: none !important;
    }

    #selection .selection-thumb img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
        position: relative !important;
        inset: auto !important;
    }
}

/* Shorter laptop screens */
@media (min-width: 981px) and (max-height: 780px) {
    #selection .selection-feature,
    #selection .selection-side {
        height: 530px !important;
        max-height: 530px !important;
    }

    #selection .selection-thumbs,
    #selection #selection-thumbs {
        gap: 12px !important;
    }

    #selection .selection-thumb {
        aspect-ratio: 1.8 / 1 !important;
    }
}

/* =========================================================
   L'abeille D'or - Selection 6-Thumbnail Fill Layout v5
   Purpose:
   On PC/laptop only, keep the existing 6 Selection thumbnails
   and expand them into a clean 3 x 2 grid that fills the available
   side area, instead of adding more photos.
   Does not affect Brand Reel or Brand Reel anchor.
   Phone/tablet remains untouched.
   No JavaScript.
   ========================================================= */

@media (min-width: 981px) {
    #selection .selection-gallery {
        align-items: stretch !important;
        min-height: clamp(600px, 66vh, 720px) !important;
    }

    /* Keep main media as the height reference */
    #selection .selection-feature {
        height: clamp(560px, 62vh, 680px) !important;
        min-height: 0 !important;
        max-height: 680px !important;
        align-self: stretch !important;
    }

    #selection .selection-feature img,
    #selection .selection-feature video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* Side column: text on top, thumbnails fill the rest */
    #selection .selection-side {
        height: clamp(560px, 62vh, 680px) !important;
        min-height: 0 !important;
        max-height: 680px !important;
        display: grid !important;
        grid-template-rows: auto minmax(0, 1fr) !important;
        row-gap: 22px !important;
        align-self: stretch !important;
    }

    #selection .selection-copy {
        min-height: 0 !important;
        align-self: start !important;
    }

    /* Existing 6 thumbnails become a larger 3 x 2 grid */
    #selection .selection-thumbs,
    #selection #selection-thumbs {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        align-self: stretch !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        transform: none !important;
    }

    #selection .selection-thumb {
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        aspect-ratio: auto !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        position: relative !important;
        margin: 0 !important;
        transform: none !important;
        border-radius: 22px !important;
    }

    #selection .selection-thumb img,
    #selection .selection-thumb video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
        position: relative !important;
        inset: auto !important;
    }
}

/* Shorter laptop screens: same idea, slightly tighter */
@media (min-width: 981px) and (max-height: 780px) {
    #selection .selection-gallery {
        min-height: 570px !important;
    }

    #selection .selection-feature,
    #selection .selection-side {
        height: 530px !important;
        max-height: 530px !important;
    }

    #selection .selection-side {
        row-gap: 18px !important;
    }

    #selection .selection-thumbs,
    #selection #selection-thumbs {
        gap: 13px !important;
    }

    #selection .selection-thumb {
        border-radius: 20px !important;
    }
}

/* =========================================================
   L'abeille D'or - Hero Brand Strip Adaptive Lift v3
   Purpose:
   Replace hard laptop height jumps with a smoother PC/laptop brand
   strip lift so the strip sits below the hero reel without overlapping it.
   Keeps Selection section and Selection anchor untouched.
   Phone/tablet remains untouched.
   No JavaScript.
   ========================================================= */

@media (min-width: 981px) {
    .brand-strip {
        position: relative !important;
        /*
          Adaptive lift:
          - avoids the previous hard jump between laptop viewport heights
          - prevents overlap on larger laptop screens
          - keeps the strip visually closer to the hero reel
        */
        transform: translateY(clamp(-155px, calc(-10vh - 55px), -115px)) !important;
        z-index: 3 !important;
    }
}

/* Safety: on very short laptop viewports, do not lift too aggressively */
@media (min-width: 981px) and (max-height: 760px) {
    .brand-strip {
        transform: translateY(-118px) !important;
    }
}

/* Safety: on taller desktop viewports, allow a little more lift but not overlap */
@media (min-width: 981px) and (min-height: 950px) {
    .brand-strip {
        transform: translateY(-145px) !important;
    }
}

/* =========================================================
   L'abeille D'or - Phone Landscape Conservative Mode v3
   Purpose:
   Make phone landscape usable without changing section anchors
   and without forcing thumbnails over headings/text.
   Priority: preserve content order and readability.
   Does not affect PC/laptop or phone portrait.
   No JavaScript.
   ========================================================= */

@media (max-width: 980px) and (orientation: landscape) and (max-height: 600px) {

    body {
        overflow-x: hidden !important;
    }

    section {
        min-height: auto !important;
    }

    .site-header,
    .header-inner {
        min-height: 60px !important;
    }

    .header-inner {
        padding-top: 7px !important;
        padding-bottom: 7px !important;
    }

    .eyebrow {
        font-size: 0.62rem !important;
        margin-bottom: 6px !important;
    }

    .hero h1,
    h1 {
        font-size: clamp(1.75rem, 4vw, 2.25rem) !important;
        line-height: 1.04 !important;
        margin-bottom: 10px !important;
    }

    .selection-heading h2,
    .occasion-atelier-heading h2,
    .barista-atelier-heading h2,
    #branches .split-content h2,
    #contact .contact-heading h2 {
        font-size: clamp(1.55rem, 3.7vw, 2.05rem) !important;
        line-height: 1.08 !important;
        margin-bottom: 8px !important;
    }

    .hero-text,
    .selection-heading p,
    .occasion-atelier-heading p:not(.eyebrow),
    .barista-atelier-heading p,
    #branches .split-content p:not(.eyebrow),
    #contact .contact-heading p:not(.eyebrow) {
        font-size: 0.82rem !important;
        line-height: 1.42 !important;
    }

    /* Hero: compact, but no aggressive visual lift */
    .hero,
    #hero.hero {
        transform: none !important;
        min-height: auto !important;
        padding-top: 78px !important;
        padding-bottom: 24px !important;
        gap: 18px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 0.95fr) minmax(260px, 1.05fr) !important;
        align-items: center !important;
    }

    .hero-image-wrap,
    .hero-video-wrap {
        height: min(54vh, 280px) !important;
        min-height: 215px !important;
        max-height: 280px !important;
    }

    .hero-video,
    .hero-image {
        height: 100% !important;
        object-fit: cover !important;
    }

    .brand-strip {
        transform: none !important;
        margin-top: 8px !important;
        margin-bottom: 24px !important;
    }

    .brand-strip-inner {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 8px !important;
        padding: 10px !important;
    }

    .brand-strip-item {
        padding: 8px !important;
        gap: 7px !important;
    }

    .brand-strip-item strong {
        font-size: 0.72rem !important;
    }

    .brand-strip-item small {
        font-size: 0.62rem !important;
    }

    /* Selection: keep content order, do not force thumbnails over text */
    #selection.selection-tabs-section {
        padding-top: 30px !important;
    }

    #selection .selection-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin-bottom: 14px !important;
    }

    #selection .selection-tab,
    #selection .selection-tab.is-active {
        min-height: 34px !important;
        height: 34px !important;
        padding: 7px 9px !important;
        font-size: 0.68rem !important;
    }

    #selection .selection-gallery {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(270px, 0.95fr) !important;
        gap: 18px !important;
        align-items: start !important;
        min-height: auto !important;
    }

    #selection .selection-feature {
        height: min(58vh, 300px) !important;
        min-height: 230px !important;
        max-height: 300px !important;
    }

    #selection .selection-feature img,
    #selection .selection-feature video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    #selection .selection-side {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        overflow: visible !important;
    }

    #selection .selection-copy {
        order: 1 !important;
        flex: 0 0 auto !important;
    }

    #selection .selection-copy h3 {
        font-size: 1.12rem !important;
        line-height: 1.08 !important;
        margin-bottom: 6px !important;
    }

    #selection .selection-copy p {
        font-size: 0.74rem !important;
        line-height: 1.32 !important;
    }

    #selection .selection-thumbs,
    #selection #selection-thumbs {
        order: 2 !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        grid-template-rows: auto !important;
        gap: 8px !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        transform: none !important;
    }

    #selection .selection-thumb {
        aspect-ratio: 1.65 / 1 !important;
        height: auto !important;
        min-height: 0 !important;
        border-radius: 14px !important;
    }

    #selection .selection-thumb img,
    #selection .selection-thumb video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* Occasions: preserve order, do not force thumbs above text */
    .occasion-atelier-section {
        padding-top: 30px !important;
        margin-bottom: 36px !important;
    }

    .occasion-atelier-heading {
        margin-bottom: 10px !important;
    }

    .occasion-atelier-tabs {
        margin-top: 0 !important;
        margin-bottom: 10px !important;
        gap: 7px !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
    }

    .occasion-tab {
        min-height: 34px !important;
        padding: 7px 11px !important;
        font-size: 0.68rem !important;
        flex: 0 0 auto !important;
    }

    .occasion-atelier-showcase {
        grid-template-columns: minmax(0, 1fr) minmax(270px, 0.95fr) !important;
        gap: 16px !important;
        align-items: start !important;
        min-height: auto !important;
    }

    .occasion-feature-card {
        height: min(60vh, 310px) !important;
        min-height: 250px !important;
        max-height: 310px !important;
        border-radius: 24px !important;
    }

    .occasion-side-panel {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 16px !important;
        border-radius: 24px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        overflow: visible !important;
    }

    .occasion-side-panel h3 {
        font-size: 1.12rem !important;
        line-height: 1.08 !important;
        margin-bottom: 4px !important;
    }

    .occasion-side-panel p:not(.eyebrow) {
        font-size: 0.74rem !important;
        line-height: 1.32 !important;
    }

    .occasion-thumbs {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin-top: 4px !important;
    }

    .occasion-thumb {
        aspect-ratio: 1.7 / 1 !important;
        border-radius: 14px !important;
    }

    /* Barista: preserve order, do not force thumbs above text */
    .barista-atelier-section {
        padding-top: 30px !important;
        margin-bottom: 36px !important;
    }

    .barista-atelier-showcase {
        grid-template-columns: minmax(0, 1fr) minmax(270px, 0.95fr) !important;
        gap: 16px !important;
        align-items: start !important;
    }

    .barista-media-card {
        height: min(60vh, 310px) !important;
        min-height: 250px !important;
        max-height: 310px !important;
        border-radius: 24px !important;
    }

    .barista-side-panel {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 16px !important;
        border-radius: 24px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        overflow: visible !important;
    }

    .barista-side-panel h3 {
        font-size: 1.12rem !important;
        line-height: 1.08 !important;
        margin-bottom: 4px !important;
    }

    .barista-side-panel p:not(.eyebrow) {
        font-size: 0.74rem !important;
        line-height: 1.32 !important;
    }

    .barista-thumbs {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin-top: 4px !important;
    }

    .barista-thumb {
        aspect-ratio: 1.55 / 1 !important;
        border-radius: 14px !important;
    }

    .barista-action-tiles {
        gap: 8px !important;
        margin-top: 2px !important;
    }

    /* Branches and Contact: compact only, no anchor overrides */
    #branches.split-section,
    #branches.split-section.reverse {
        gap: 14px !important;
        margin-bottom: 34px !important;
    }

    #branches .split-image img {
        height: min(48vh, 260px) !important;
        object-fit: cover !important;
    }

    #contact.contact-section {
        padding-top: 34px !important;
        padding-bottom: 36px !important;
    }

    #contact .contact-heading {
        margin-bottom: 12px !important;
    }

    #contact .contact-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin-top: 0 !important;
    }

    #contact .contact-card {
        padding: 14px !important;
    }

    #contact .contact-card h3 {
        font-size: 1rem !important;
        margin-bottom: 5px !important;
    }

    #contact .contact-card p {
        font-size: 0.74rem !important;
        line-height: 1.32 !important;
        margin-bottom: 8px !important;
    }

    #contact .contact-card-link,
    #contact .contact-number-text,
    #contact .contact-detail-type {
        font-size: 0.72rem !important;
    }

    #contact .contact-whatsapp-icon {
        width: 22px !important;
        height: 22px !important;
        flex: 0 0 22px !important;
    }
}

/* =========================================================
   L'abeille D'or - Phone Landscape Media Alignment v4
   Purpose:
   Phone landscape only:
   Keep headings/text above thumbnails, but stretch the main media/reel
   to align with the side content bottom edge.
   Does not affect phone portrait, laptop/desktop, or anchor behavior.
   No JavaScript.
   ========================================================= */

@media (max-width: 980px) and (orientation: landscape) and (max-height: 600px) {

    /* Selection: main media stretches to match side content height */
    #selection .selection-gallery {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(270px, 0.95fr) !important;
        gap: 18px !important;
        align-items: stretch !important;
        min-height: auto !important;
    }

    #selection .selection-feature {
        height: auto !important;
        min-height: 300px !important;
        max-height: none !important;
        align-self: stretch !important;
    }

    #selection .selection-feature img,
    #selection .selection-feature video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    #selection .selection-side {
        height: auto !important;
        min-height: 300px !important;
        max-height: none !important;
        align-self: stretch !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        overflow: visible !important;
    }

    #selection .selection-copy {
        order: 1 !important;
        flex: 0 0 auto !important;
    }

    #selection .selection-thumbs,
    #selection #selection-thumbs {
        order: 2 !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        height: auto !important;
        min-height: 0 !important;
        margin-top: 2px !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    #selection .selection-thumb {
        aspect-ratio: 1.65 / 1 !important;
        height: auto !important;
        min-height: 0 !important;
        border-radius: 14px !important;
    }

    /* Occasions: stretch main reel card to match side panel natural height */
    .occasion-atelier-showcase {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(270px, 0.95fr) !important;
        gap: 16px !important;
        align-items: stretch !important;
        min-height: auto !important;
    }

    .occasion-feature-card {
        height: auto !important;
        min-height: 300px !important;
        max-height: none !important;
        align-self: stretch !important;
        border-radius: 24px !important;
    }

    .occasion-side-panel {
        height: auto !important;
        min-height: 300px !important;
        max-height: none !important;
        align-self: stretch !important;
        padding: 16px !important;
        border-radius: 24px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        overflow: visible !important;
    }

    .occasion-thumbs {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin-top: 4px !important;
        overflow: visible !important;
    }

    .occasion-thumb {
        aspect-ratio: 1.7 / 1 !important;
        height: auto !important;
        min-height: 0 !important;
        border-radius: 14px !important;
    }

    /* Barista: stretch main reel card to match side panel natural height */
    .barista-atelier-showcase {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(270px, 0.95fr) !important;
        gap: 16px !important;
        align-items: stretch !important;
    }

    .barista-media-card {
        height: auto !important;
        min-height: 300px !important;
        max-height: none !important;
        align-self: stretch !important;
        border-radius: 24px !important;
    }

    .barista-side-panel {
        height: auto !important;
        min-height: 300px !important;
        max-height: none !important;
        align-self: stretch !important;
        padding: 16px !important;
        border-radius: 24px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        overflow: visible !important;
    }

    .barista-thumbs {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin-top: 4px !important;
        overflow: visible !important;
    }

    .barista-thumb {
        aspect-ratio: 1.55 / 1 !important;
        height: auto !important;
        min-height: 0 !important;
        border-radius: 14px !important;
    }
}

/* =========================================================
   L'abeille D'or - Occasions Valentine Poster Fit v1
   Purpose:
   Make occasion video posters and thumbnails fit cleanly,
   including Valentine reel thumbnails, on desktop, phone portrait,
   and phone landscape. Does not change section anchors.
   ========================================================= */

.occasion-thumb,
.occasion-feature-card {
    overflow: hidden !important;
}

.occasion-thumb img,
.occasion-thumb video,
.occasion-feature-card img,
.occasion-feature-card video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
}

/* Phone portrait: keep thumbnail posters clean and contained */
@media (max-width: 640px) and (orientation: portrait) {
    .occasion-thumb img,
    .occasion-thumb video {
        object-fit: cover !important;
        object-position: center center !important;
    }
}

/* Phone landscape: poster fit only, no anchor changes */
@media (max-width: 980px) and (orientation: landscape) and (max-height: 600px) {
    .occasion-thumb img,
    .occasion-thumb video,
    .occasion-feature-card img,
    .occasion-feature-card video {
        object-fit: cover !important;
        object-position: center center !important;
    }
}

/* =========================================================
   L'abeille D'or - Branches Bee Trail Section v2
   Purpose:
   Premium dark bee-trail layout with floating hover card,
   alphabetized branch points, and detail overlay.
   Scoped to Branches section only.
   ========================================================= */

#branches.branch-trail-section-v2 {
    position: relative !important;
    padding: clamp(46px, 5.8vw, 74px) clamp(18px, 4vw, 48px) clamp(46px, 5.6vw, 72px) !important;
    scroll-margin-top: 230px !important;
    background:
        radial-gradient(circle at 18% 0%, rgba(201, 143, 63, 0.10), transparent 34%),
        linear-gradient(180deg, rgba(255, 248, 233, 0.54), rgba(248, 236, 216, 0.38)) !important;
    overflow: hidden !important;
}

#branches.branch-trail-section-v2 .branch-trail-inner {
    width: min(100%, 1180px) !important;
    margin: 0 auto !important;
    position: relative !important;
    z-index: 1 !important;
}

#branches.branch-trail-section-v2 .branch-trail-heading {
    max-width: 760px !important;
    margin: 0 0 20px !important;
    text-align: left !important;
}

#branches.branch-trail-section-v2 .branch-trail-heading .eyebrow {
    margin: 0 0 10px !important;
    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: 0.72rem !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: #a86e2d !important;
}

#branches.branch-trail-section-v2 .branch-trail-heading h2 {
    margin: 0 0 10px !important;
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: clamp(2.05rem, 2.8vw, 3rem) !important;
    line-height: 1.08 !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
    color: #2f2118 !important;
}

#branches.branch-trail-section-v2 .branch-trail-heading p:not(.eyebrow) {
    margin: 0 !important;
    max-width: 670px !important;
    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: clamp(0.9rem, 0.98vw, 1rem) !important;
    line-height: 1.58 !important;
    font-weight: 500 !important;
    color: #6e5c50 !important;
}

#branches.branch-trail-section-v2 .branch-filter-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 18px 0 22px !important;
}

#branches.branch-trail-section-v2 .branch-filter {
    appearance: none !important;
    border: 1px solid rgba(143, 92, 36, 0.22) !important;
    background:
        linear-gradient(180deg, rgba(255, 250, 239, 0.92), rgba(247, 231, 205, 0.72)) !important;
    color: #6d4a2f !important;
    border-radius: 999px !important;
    padding: 9px 17px !important;
    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: 0.69rem !important;
    font-weight: 850 !important;
    letter-spacing: 0.11em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 10px 24px rgba(89, 54, 24, 0.06) !important;
    transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease !important;
}

#branches.branch-trail-section-v2 .branch-filter:hover,
#branches.branch-trail-section-v2 .branch-filter.active {
    background:
        linear-gradient(180deg, rgba(151, 96, 39, 0.98), rgba(104, 61, 31, 0.98)) !important;
    border-color: rgba(151, 96, 39, 0.98) !important;
    color: #fff4df !important;
    box-shadow: 0 14px 30px rgba(93, 55, 23, 0.18) !important;
    transform: translateY(-1px) !important;
}

#branches.branch-trail-section-v2 .branch-trail-map {
    position: relative !important;
    min-height: 430px !important;
    border-radius: 36px !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 15% 24%, rgba(218, 178, 103, 0.18), transparent 28%),
        radial-gradient(circle at 75% 70%, rgba(255, 232, 179, 0.13), transparent 36%),
        linear-gradient(135deg, #382418 0%, #5a3923 46%, #2d1c13 100%) !important;
    border: 1px solid rgba(230, 190, 120, 0.20) !important;
    box-shadow: 0 26px 76px rgba(68, 41, 20, 0.24) !important;
}

#branches.branch-trail-section-v2 .branch-trail-glow {
    position: absolute !important;
    inset: -35% -20% auto auto !important;
    width: 58% !important;
    height: 76% !important;
    border-radius: 999px !important;
    background: radial-gradient(circle, rgba(245, 210, 143, 0.22), transparent 68%) !important;
    pointer-events: none !important;
}

#branches.branch-trail-section-v2 .branch-trail-line {
    position: absolute !important;
    inset: 34px !important;
    opacity: 0.72 !important;
    background-image:
        radial-gradient(circle, rgba(232, 194, 121, 0.48) 1.45px, transparent 1.9px) !important;
    background-size: 22px 22px !important;
    mask-image:
        linear-gradient(112deg, transparent 4%, #000 14%, #000 88%, transparent 98%) !important;
    transform: rotate(-2.5deg) scale(1.03) !important;
    pointer-events: none !important;
}

#branches.branch-trail-section-v2 .branch-bee {
    position: absolute !important;
    left: 7% !important;
    top: 16% !important;
    width: 42px !important;
    height: 40px !important;
    z-index: 6 !important;
    transform: translate(-50%, -50%) rotate(-7deg) !important;
    transition: left 650ms cubic-bezier(.18,.88,.22,1), top 650ms cubic-bezier(.18,.88,.22,1), transform 650ms ease !important;
    pointer-events: none !important;
    filter: drop-shadow(0 10px 13px rgba(0,0,0,0.26)) !important;
}

#branches.branch-trail-section-v2 .branch-bee img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

#branches.branch-trail-section-v2 .branch-trail-points {
    position: absolute !important;
    inset: 0 !important;
    z-index: 5 !important;
}

#branches.branch-trail-section-v2 .branch-point {
    position: absolute !important;
    left: var(--branch-x) !important;
    top: var(--branch-y) !important;
    transform: translate(-50%, -50%) !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    cursor: pointer !important;
    text-align: center !important;
}

#branches.branch-trail-section-v2 .branch-point-dot {
    width: 13px !important;
    height: 13px !important;
    display: block !important;
    margin: 0 auto 7px !important;
    border-radius: 999px !important;
    background: #f6e5bf !important;
    border: 2px solid #d8ae63 !important;
    box-shadow: 0 0 0 6px rgba(225, 180, 99, 0.13), 0 10px 17px rgba(0, 0, 0, 0.20) !important;
    transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease !important;
}

#branches.branch-trail-section-v2 .branch-point-name {
    display: inline-block !important;
    max-width: 138px !important;
    padding: 5px 9px !important;
    border-radius: 999px !important;
    background: rgba(255, 243, 218, 0.92) !important;
    border: 1px solid rgba(232, 194, 121, 0.26) !important;
    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: 0.66rem !important;
    line-height: 1.15 !important;
    font-weight: 850 !important;
    letter-spacing: 0.01em !important;
    color: #442a18 !important;
    box-shadow: 0 10px 22px rgba(0,0,0,0.12) !important;
    white-space: normal !important;
}

#branches.branch-trail-section-v2 .branch-point:hover .branch-point-dot,
#branches.branch-trail-section-v2 .branch-point.is-active .branch-point-dot {
    transform: scale(1.25) !important;
    background: #d8ae63 !important;
    box-shadow: 0 0 0 10px rgba(225, 180, 99, 0.19), 0 16px 28px rgba(0, 0, 0, 0.22) !important;
}

#branches.branch-trail-section-v2 .branch-point.status-coming-soon .branch-point-name {
    background: rgba(255, 243, 218, 0.74) !important;
    font-style: italic !important;
}

#branches.branch-trail-section-v2 .branch-hover-card {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: min(330px, calc(100% - 36px)) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translate(-50%, calc(-100% - 18px)) scale(0.98) !important;
    transform-origin: bottom center !important;
    z-index: 8 !important;
    border-radius: 24px !important;
    background: rgba(255, 246, 224, 0.96) !important;
    border: 1px solid rgba(232, 194, 121, 0.38) !important;
    box-shadow: 0 24px 58px rgba(0,0,0,0.26) !important;
    padding: 18px 18px 16px !important;
    pointer-events: none !important;
    transition: opacity 160ms ease, visibility 160ms ease, transform 160ms ease !important;
}

#branches.branch-trail-section-v2 .branch-hover-card.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(-50%, calc(-100% - 14px)) scale(1) !important;
}

#branches.branch-trail-section-v2 .branch-hover-card h3 {
    margin: 0 0 7px !important;
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: 1.85rem !important;
    line-height: 1.02 !important;
    color: #2f2118 !important;
}

#branches.branch-trail-section-v2 .branch-hover-region {
    display: block !important;
    margin: 0 0 8px !important;
    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: 0.62rem !important;
    font-weight: 850 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: #9f692f !important;
}

#branches.branch-trail-section-v2 .branch-hover-card p {
    margin: 0 0 7px !important;
    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: 0.82rem !important;
    line-height: 1.42 !important;
    font-weight: 600 !important;
    color: #695244 !important;
}

#branches.branch-trail-section-v2 .branch-hover-card small {
    display: block !important;
    margin-top: 10px !important;
    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #9f692f !important;
}

#branches.branch-trail-section-v2 .branch-hover-badges,
#branches.branch-trail-section-v2 .branch-overlay-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    margin: 11px 0 0 !important;
}

#branches.branch-trail-section-v2 .branch-badge {
    display: inline-flex !important;
    align-items: center !important;
    border-radius: 999px !important;
    background: rgba(138, 85, 38, 0.12) !important;
    color: #744a29 !important;
    padding: 6px 10px !important;
    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: 0.62rem !important;
    font-weight: 850 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    cursor: default !important;
    user-select: none !important;
}

#branches.branch-trail-section-v2 .branch-mobile-list {
    display: none !important;
}

#branches.branch-trail-section-v2 .branch-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2000 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 220ms ease, visibility 220ms ease !important;
}

#branches.branch-trail-section-v2 .branch-overlay.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

#branches.branch-trail-section-v2 .branch-overlay-backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(38, 24, 15, 0.55) !important;
    backdrop-filter: blur(8px) !important;
}

#branches.branch-trail-section-v2 .branch-overlay-card {
    position: relative !important;
    width: min(92vw, 920px) !important;
    max-height: min(86vh, 720px) !important;
    margin: 7vh auto !important;
    display: grid !important;
    grid-template-columns: minmax(260px, 0.92fr) minmax(300px, 1.08fr) !important;
    overflow: hidden !important;
    border-radius: 34px !important;
    background: #fff6e8 !important;
    border: 1px solid rgba(139, 91, 43, 0.18) !important;
    box-shadow: 0 30px 90px rgba(38, 22, 12, 0.34) !important;
}

#branches.branch-trail-section-v2 .branch-overlay-close {
    position: absolute !important;
    right: 16px !important;
    top: 14px !important;
    z-index: 3 !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(139, 91, 43, 0.16) !important;
    background: rgba(255, 250, 239, 0.94) !important;
    color: #4c3424 !important;
    font-size: 1.55rem !important;
    line-height: 1 !important;
    cursor: pointer !important;
}

#branches.branch-trail-section-v2 .branch-overlay-media {
    min-height: 360px !important;
    background:
        radial-gradient(circle at 38% 32%, rgba(210, 155, 70, 0.28), transparent 31%),
        radial-gradient(circle at 68% 72%, rgba(126, 82, 36, 0.16), transparent 34%),
        linear-gradient(135deg, #fff1d4, #e8d1a6) !important;
    position: relative !important;
}

#branches.branch-trail-section-v2 .branch-overlay-image {
    position: absolute !important;
    inset: 0 !important;
    background-size: cover !important;
    background-position: center !important;
}

#branches.branch-trail-section-v2 .branch-image-fallback::before {
    content: "L’abeille D’or" !important;
    position: absolute !important;
    left: 28px !important;
    bottom: 28px !important;
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: 2.2rem !important;
    color: rgba(80, 53, 33, 0.48) !important;
}

#branches.branch-trail-section-v2 .branch-overlay-content {
    padding: 34px 34px 30px !important;
    overflow: auto !important;
}

#branches.branch-trail-section-v2 .branch-overlay-region {
    display: block !important;
    margin: 0 0 10px !important;
    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: 0.68rem !important;
    font-weight: 850 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: #a86e2d !important;
}

#branches.branch-trail-section-v2 .branch-overlay-content h3 {
    margin: 0 0 10px !important;
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: clamp(1.8rem, 2.4vw, 2.4rem) !important;
    line-height: 1.05 !important;
    color: #2f2118 !important;
}

#branches.branch-trail-section-v2 .branch-overlay-address,
#branches.branch-trail-section-v2 .branch-overlay-service,
#branches.branch-trail-section-v2 .branch-overlay-note {
    margin: 0 0 12px !important;
    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: 0.9rem !important;
    line-height: 1.55 !important;
    color: #6e5c50 !important;
}

#branches.branch-trail-section-v2 .branch-overlay-service {
    font-weight: 750 !important;
    color: #4f3828 !important;
}

#branches.branch-trail-section-v2 .branch-overlay-contact {
    display: grid !important;
    gap: 6px !important;
    margin: 16px 0 8px !important;
}

#branches.branch-trail-section-v2 .branch-contact-line {
    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: 0.84rem !important;
    line-height: 1.4 !important;
    color: #685043 !important;
}

#branches.branch-trail-section-v2 .branch-contact-line strong {
    color: #3f2b1f !important;
}

#branches.branch-trail-section-v2 .branch-overlay-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 20px !important;
}

#branches.branch-trail-section-v2 .branch-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 40px !important;
    padding: 10px 15px !important;
    border-radius: 999px !important;
    background: #8f5c24 !important;
    color: #fff8ec !important;
    text-decoration: none !important;
    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: 0.72rem !important;
    font-weight: 850 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

#branches.branch-trail-section-v2 .branch-action.secondary {
    background: rgba(143, 92, 36, 0.10) !important;
    color: #6f4726 !important;
}

body.branch-overlay-open {
    overflow: hidden !important;
}

@media (max-width: 980px) {
    #branches.branch-trail-section-v2 {
        padding: 52px 18px 64px !important;
        scroll-margin-top: 210px !important;
    }

    #branches.branch-trail-section-v2 .branch-trail-heading {
        max-width: 620px !important;
        margin: 0 auto 18px !important;
    }

    #branches.branch-trail-section-v2 .branch-trail-heading .eyebrow {
        margin-bottom: 9px !important;
        font-size: 0.68rem !important;
        letter-spacing: 0.16em !important;
    }

    #branches.branch-trail-section-v2 .branch-trail-heading h2 {
        font-size: clamp(1.85rem, 6.6vw, 2.35rem) !important;
        line-height: 1.08 !important;
        margin-bottom: 11px !important;
    }

    #branches.branch-trail-section-v2 .branch-filter-row {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        padding: 2px 0 12px !important;
        margin: 18px -2px 12px !important;
        scrollbar-width: none !important;
    }

    #branches.branch-trail-section-v2 .branch-filter-row::-webkit-scrollbar {
        display: none !important;
    }

    #branches.branch-trail-section-v2 .branch-filter {
        flex: 0 0 auto !important;
        font-size: 0.66rem !important;
        padding: 9px 13px !important;
    }

    #branches.branch-trail-section-v2 .branch-trail-map {
        display: none !important;
    }

    #branches.branch-trail-section-v2 .branch-mobile-list {
        display: grid !important;
        gap: 11px !important;
        margin-top: 12px !important;
    }

    #branches.branch-trail-section-v2 .branch-mobile-card {
        width: 100% !important;
        border: 1px solid rgba(134, 86, 39, 0.14) !important;
        background: rgba(255, 250, 239, 0.82) !important;
        border-radius: 22px !important;
        padding: 15px 16px !important;
        text-align: left !important;
        box-shadow: 0 14px 34px rgba(78, 48, 23, 0.07) !important;
        cursor: pointer !important;
    }

    #branches.branch-trail-section-v2 .branch-mobile-card strong {
        display: block !important;
        font-family: "Cormorant Garamond", Georgia, serif !important;
        font-size: 1.5rem !important;
        color: #2f2118 !important;
        line-height: 1.08 !important;
        margin-bottom: 4px !important;
    }

    #branches.branch-trail-section-v2 .branch-mobile-card span {
        display: block !important;
        font-family: "Montserrat", Arial, sans-serif !important;
        font-size: 0.82rem !important;
        line-height: 1.45 !important;
        color: #6e5c50 !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay-card {
        width: min(92vw, 560px) !important;
        max-height: 86vh !important;
        margin: 7vh auto !important;
        display: block !important;
        overflow: auto !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay-media {
        min-height: 210px !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay-content {
        padding: 25px 22px 24px !important;
        overflow: visible !important;
    }
}

@media (max-width: 420px) {
    #branches.branch-trail-section-v2 {
        scroll-margin-top: 198px !important;
    }
}

/* END L'abeille D'or - Branches Bee Trail Section v2 */

/* =========================================================
   L'abeille D'or - Branches Real Bee PNG v1
   Purpose:
   Use uploaded transparent logo-style bee and tint it champagne/gold
   for the dark Branches trail panel.
   ========================================================= */

#branches.branch-trail-section-v2 .branch-bee {
    width: 48px !important;
    height: 42px !important;
}

#branches.branch-trail-section-v2 .branch-bee img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    filter:
        sepia(1)
        saturate(2.2)
        hue-rotate(350deg)
        brightness(0.92)
        contrast(1.05)
        drop-shadow(0 9px 12px rgba(0,0,0,0.26)) !important;
}

/* =========================================================
   L'abeille D'or - Branches Bee Trail v2.1 Tune
   Purpose:
   Anchor correction, chocolate map, calmer route texture,
   hidden hover card until hover, better bee movement.
   ========================================================= */

#branches.branch-trail-section-v2 {
    scroll-margin-top: 118px !important;
    padding-top: clamp(34px, 4.6vw, 58px) !important;
}

#branches.branch-trail-section-v2 .branch-trail-map {
    min-height: 390px !important;
    background:
        radial-gradient(circle at 18% 18%, rgba(229, 184, 103, 0.14), transparent 24%),
        radial-gradient(circle at 82% 68%, rgba(207, 149, 74, 0.12), transparent 32%),
        linear-gradient(135deg, #24160f 0%, #3a2417 42%, #5a3821 68%, #2b1a11 100%) !important;
    border-color: rgba(232, 194, 121, 0.24) !important;
}

#branches.branch-trail-section-v2 .branch-trail-line {
    opacity: 0.36 !important;
    background-image:
        radial-gradient(circle, rgba(226, 184, 105, 0.42) 1.15px, transparent 1.7px) !important;
    background-size: 28px 28px !important;
    mask-image:
        linear-gradient(112deg, transparent 7%, #000 18%, #000 84%, transparent 96%) !important;
}

#branches.branch-trail-section-v2 .branch-point-name {
    background: rgba(255, 241, 211, 0.92) !important;
    color: #3d2416 !important;
    font-size: 0.65rem !important;
    padding: 5px 10px !important;
}

#branches.branch-trail-section-v2 .branch-point-dot {
    background: #ffe7aa !important;
    border-color: #d9ad5f !important;
}

#branches.branch-trail-section-v2 .branch-bee {
    width: 46px !important;
    height: 40px !important;
    transition:
        left 760ms cubic-bezier(.18,.88,.22,1),
        top 760ms cubic-bezier(.18,.88,.22,1),
        transform 760ms cubic-bezier(.18,.88,.22,1) !important;
}

#branches.branch-trail-section-v2 .branch-bee.is-flying {
    transform: translate(-50%, -50%) rotate(12deg) scale(1.08) !important;
}

#branches.branch-trail-section-v2 .branch-hover-card {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

#branches.branch-trail-section-v2 .branch-hover-card.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
}

#branches.branch-trail-section-v2 .branch-badge {
    background: rgba(138, 85, 38, 0.13) !important;
    border: 1px solid rgba(138, 85, 38, 0.10) !important;
    cursor: default !important;
}

#branches.branch-trail-section-v2 .branch-overlay-badges {
    margin-top: 14px !important;
}

@media (min-width: 981px) {
    #branches.branch-trail-section-v2 .branch-filter-row {
        scroll-margin-top: 96px !important;
    }
}

@media (max-width: 980px) {
    #branches.branch-trail-section-v2 {
        scroll-margin-top: 142px !important;
    }
}

@media (max-width: 420px) {
    #branches.branch-trail-section-v2 {
        scroll-margin-top: 132px !important;
    }
}

/* =========================================================
   L'abeille D'or - Branches Bee Trail v2.2 Tune
   Purpose:
   Fine tune anchor, headline, hover-card placement,
   bee visibility, label styling, and chocolate panel texture.
   ========================================================= */

#branches.branch-trail-section-v2 {
    scroll-margin-top: 142px !important;
    padding-top: clamp(38px, 4.8vw, 62px) !important;
}

#branches.branch-trail-section-v2 .branch-trail-heading h2 {
    font-size: clamp(1.95rem, 2.55vw, 2.75rem) !important;
    line-height: 1.08 !important;
    font-weight: 650 !important;
    letter-spacing: -0.022em !important;
}

#branches.branch-trail-section-v2 .branch-trail-heading p:not(.eyebrow) {
    max-width: 640px !important;
    font-size: clamp(0.88rem, 0.95vw, 0.98rem) !important;
    line-height: 1.55 !important;
}

#branches.branch-trail-section-v2 .branch-filter-row {
    scroll-margin-top: 128px !important;
}

#branches.branch-trail-section-v2 .branch-trail-map {
    min-height: 382px !important;
    background:
        radial-gradient(circle at 14% 18%, rgba(219, 171, 91, 0.13), transparent 26%),
        radial-gradient(circle at 86% 72%, rgba(255, 219, 151, 0.09), transparent 34%),
        linear-gradient(135deg, #20120c 0%, #321f14 38%, #4a2d1b 66%, #24150d 100%) !important;
}

#branches.branch-trail-section-v2 .branch-trail-line {
    opacity: 0.24 !important;
    background-image:
        radial-gradient(circle, rgba(232, 190, 109, 0.34) 1px, transparent 1.55px) !important;
    background-size: 34px 34px !important;
}

#branches.branch-trail-section-v2 .branch-point-name {
    min-width: 76px !important;
    padding: 6px 11px !important;
    border-radius: 18px !important;
    background:
        linear-gradient(180deg, rgba(255, 243, 218, 0.98), rgba(238, 214, 174, 0.94)) !important;
    border: 1px solid rgba(232, 194, 121, 0.42) !important;
    color: #3d2416 !important;
    font-size: 0.66rem !important;
    line-height: 1.12 !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.55),
        0 12px 24px rgba(0,0,0,0.15) !important;
}

#branches.branch-trail-section-v2 .branch-point-dot {
    width: 14px !important;
    height: 14px !important;
    margin-bottom: 8px !important;
    background: #ffdfa0 !important;
    border-color: #d7ac5c !important;
    box-shadow:
        0 0 0 7px rgba(225, 180, 99, 0.13),
        0 12px 20px rgba(0, 0, 0, 0.24) !important;
}

#branches.branch-trail-section-v2 .branch-point:hover .branch-point-name,
#branches.branch-trail-section-v2 .branch-point.is-active .branch-point-name {
    background:
        linear-gradient(180deg, rgba(255, 238, 196, 1), rgba(219, 174, 99, 0.96)) !important;
    color: #2a180e !important;
}

#branches.branch-trail-section-v2 .branch-bee {
    width: 58px !important;
    height: 48px !important;
    z-index: 9 !important;
    margin-top: -18px !important;
    filter:
        drop-shadow(0 12px 16px rgba(0,0,0,0.32))
        drop-shadow(0 0 10px rgba(231, 184, 94, 0.20)) !important;
    transition:
        left 900ms cubic-bezier(.16,.9,.18,1),
        top 900ms cubic-bezier(.16,.9,.18,1),
        transform 900ms cubic-bezier(.16,.9,.18,1) !important;
}

#branches.branch-trail-section-v2 .branch-bee.is-flying {
    transform: translate(-50%, -50%) rotate(16deg) scale(1.16) !important;
}

#branches.branch-trail-section-v2 .branch-bee::after {
    content: "" !important;
    position: absolute !important;
    left: -16px !important;
    top: 50% !important;
    width: 26px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, transparent, rgba(230, 188, 101, 0.75)) !important;
    opacity: 0 !important;
    transform: translateY(-50%) !important;
}

#branches.branch-trail-section-v2 .branch-bee.is-flying::after {
    opacity: 1 !important;
}

#branches.branch-trail-section-v2 .branch-hover-card {
    width: min(300px, calc(100% - 36px)) !important;
    transform: translate(-50%, calc(-100% - 18px)) scale(0.98) !important;
}

#branches.branch-trail-section-v2 .branch-hover-card.is-visible {
    transform: translate(-50%, calc(-100% - 14px)) scale(1) !important;
}

#branches.branch-trail-section-v2 .branch-hover-card.opens-below {
    transform: translate(-50%, 20px) scale(0.98) !important;
}

#branches.branch-trail-section-v2 .branch-hover-card.opens-below.is-visible {
    transform: translate(-50%, 18px) scale(1) !important;
}

#branches.branch-trail-section-v2 .branch-hover-card h3 {
    font-size: 1.72rem !important;
}

#branches.branch-trail-section-v2 .branch-badge {
    background: rgba(138, 85, 38, 0.10) !important;
    border: 1px solid rgba(138, 85, 38, 0.14) !important;
    color: #684025 !important;
    padding: 5px 9px !important;
    font-size: 0.6rem !important;
}

@media (max-width: 980px) {
    #branches.branch-trail-section-v2 {
        scroll-margin-top: 154px !important;
    }

    #branches.branch-trail-section-v2 .branch-trail-heading h2 {
        font-size: clamp(1.85rem, 6.4vw, 2.32rem) !important;
    }
}

@media (max-width: 420px) {
    #branches.branch-trail-section-v2 {
        scroll-margin-top: 144px !important;
    }
}

/* =========================================================
   L'abeille D'or - Branches Bee Trail v2.3 Tune
   Purpose:
   Better anchor landing, real hover-card overflow,
   stronger bee movement visibility, icon chips, and calmer
   chocolate background.
   ========================================================= */

#branches.branch-trail-section-v2 {
    scroll-margin-top: 176px !important;
}

#branches.branch-trail-section-v2 .branch-filter-row {
    scroll-margin-top: 156px !important;
}

#branches.branch-trail-section-v2 .branch-trail-map {
    min-height: 378px !important;
    overflow: visible !important;
    background:
        radial-gradient(circle at 14% 18%, rgba(222, 173, 91, 0.11), transparent 25%),
        radial-gradient(circle at 88% 66%, rgba(255, 220, 154, 0.08), transparent 34%),
        linear-gradient(135deg, #1d100a 0%, #2a180f 38%, #3b2416 66%, #21120b 100%) !important;
    box-shadow:
        0 26px 76px rgba(68, 41, 20, 0.25),
        inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

#branches.branch-trail-section-v2 .branch-trail-map::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 36px !important;
    pointer-events: none !important;
    box-shadow: inset 0 0 0 1px rgba(232, 194, 121, 0.20) !important;
}

#branches.branch-trail-section-v2 .branch-trail-line {
    opacity: 0.16 !important;
    background-image:
        radial-gradient(circle, rgba(232, 190, 109, 0.25) 0.85px, transparent 1.35px) !important;
    background-size: 42px 42px !important;
}

#branches.branch-trail-section-v2 .branch-trail-glow {
    opacity: 0.55 !important;
}

#branches.branch-trail-section-v2 .branch-bee {
    width: 64px !important;
    height: 52px !important;
    z-index: 15 !important;
    margin-top: 0 !important;
    will-change: left, top, transform !important;
    pointer-events: none !important;
    filter:
        drop-shadow(0 14px 18px rgba(0,0,0,0.36))
        drop-shadow(0 0 12px rgba(231, 184, 94, 0.24)) !important;
}

#branches.branch-trail-section-v2 .branch-bee.is-flying {
    transform: translate(-50%, -50%) rotate(14deg) scale(1.18) !important;
}

#branches.branch-trail-section-v2 .branch-bee::after {
    content: "" !important;
    position: absolute !important;
    right: 74% !important;
    top: 52% !important;
    width: 36px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, transparent, rgba(230, 188, 101, 0.78)) !important;
    opacity: 0 !important;
    transform: translateY(-50%) !important;
}

#branches.branch-trail-section-v2 .branch-bee.is-flying::after {
    opacity: 1 !important;
}

#branches.branch-trail-section-v2 .branch-point-name {
    min-width: 78px !important;
    border-radius: 16px !important;
    background:
        linear-gradient(180deg, rgba(255, 244, 222, 0.98), rgba(236, 211, 169, 0.95)) !important;
    border: 1px solid rgba(238, 202, 134, 0.48) !important;
}

#branches.branch-trail-section-v2 .branch-hover-card {
    z-index: 40 !important;
    width: min(310px, calc(100% - 36px)) !important;
    max-height: none !important;
}

#branches.branch-trail-section-v2 .branch-hover-card.opens-above {
    transform: translate(-50%, calc(-100% - 18px)) scale(0.98) !important;
}

#branches.branch-trail-section-v2 .branch-hover-card.opens-above.is-visible {
    transform: translate(-50%, calc(-100% - 14px)) scale(1) !important;
}

#branches.branch-trail-section-v2 .branch-hover-card.opens-below {
    transform: translate(-50%, 20px) scale(0.98) !important;
}

#branches.branch-trail-section-v2 .branch-hover-card.opens-below.is-visible {
    transform: translate(-50%, 16px) scale(1) !important;
}

#branches.branch-trail-section-v2 .branch-hover-card.opens-side {
    transform: translate(18px, -50%) scale(0.98) !important;
}

#branches.branch-trail-section-v2 .branch-hover-card.opens-side.is-visible {
    transform: translate(16px, -50%) scale(1) !important;
}

#branches.branch-trail-section-v2 .branch-hover-card.opens-side-left {
    transform: translate(calc(-100% - 18px), -50%) scale(0.98) !important;
}

#branches.branch-trail-section-v2 .branch-hover-card.opens-side-left.is-visible {
    transform: translate(calc(-100% - 16px), -50%) scale(1) !important;
}

#branches.branch-trail-section-v2 .branch-hover-badges,
#branches.branch-trail-section-v2 .branch-overlay-badges,
#branches.branch-trail-section-v2 .branch-overlay-contact {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 13px 0 0 !important;
}

#branches.branch-trail-section-v2 .branch-badge,
#branches.branch-trail-section-v2 .branch-contact-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    border-radius: 999px !important;
    background: rgba(138, 85, 38, 0.10) !important;
    border: 1px solid rgba(138, 85, 38, 0.14) !important;
    color: #684025 !important;
    padding: 6px 10px !important;
    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: 0.62rem !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    letter-spacing: 0.055em !important;
    text-transform: uppercase !important;
    cursor: default !important;
    user-select: none !important;
}

#branches.branch-trail-section-v2 .branch-chip-icon {
    width: 15px !important;
    height: 15px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
}

#branches.branch-trail-section-v2 .branch-chip-icon svg {
    width: 15px !important;
    height: 15px !important;
    display: block !important;
    fill: currentColor !important;
}

#branches.branch-trail-section-v2 .branch-overlay-contact {
    margin-top: 16px !important;
    margin-bottom: 4px !important;
}

#branches.branch-trail-section-v2 .branch-overlay-actions {
    margin-top: 18px !important;
}

@media (max-width: 980px) {
    #branches.branch-trail-section-v2 {
        scroll-margin-top: 164px !important;
    }

    #branches.branch-trail-section-v2 .branch-filter-row {
        scroll-margin-top: 150px !important;
    }
}

@media (max-width: 420px) {
    #branches.branch-trail-section-v2 {
        scroll-margin-top: 154px !important;
    }
}

/* =========================================================
   L'abeille D'or - Branches Bee Trail v2.5 Cleanup
   Purpose:
   PC-first cleanup: blended section background, taller chocolate
   trail panel, stable hover preview, cleaner service/contact marks,
   and less repetitive branch overlay.
   ========================================================= */

#branches.branch-trail-section-v2 {
    background: transparent !important;
    scroll-margin-top: 176px !important;
    padding-top: clamp(38px, 4.8vw, 62px) !important;
    padding-bottom: clamp(64px, 7vw, 96px) !important;
    overflow: visible !important;
}

#branches.branch-trail-section-v2 .branch-trail-inner {
    overflow: visible !important;
}

#branches.branch-trail-section-v2 .branch-trail-heading h2 {
    font-size: clamp(1.95rem, 2.55vw, 2.75rem) !important;
    line-height: 1.08 !important;
    font-weight: 600 !important;
    letter-spacing: -0.022em !important;
}

#branches.branch-trail-section-v2 .branch-filter-row {
    scroll-margin-top: 144px !important;
    margin-bottom: 22px !important;
}

#branches.branch-trail-section-v2 .branch-trail-map {
    min-height: 500px !important;
    overflow: visible !important;
    border-radius: 38px !important;
    background:
        radial-gradient(circle at 18% 18%, rgba(220, 172, 91, 0.12), transparent 28%),
        radial-gradient(circle at 82% 72%, rgba(255, 220, 154, 0.08), transparent 36%),
        linear-gradient(135deg, #1b0f09 0%, #2b190f 42%, #3d2516 68%, #21120b 100%) !important;
    border: 1px solid rgba(232, 194, 121, 0.22) !important;
    box-shadow:
        0 28px 82px rgba(68, 41, 20, 0.24),
        inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

#branches.branch-trail-section-v2 .branch-trail-map::before {
    content: "" !important;
    position: absolute !important;
    inset: 24px !important;
    border-radius: 30px !important;
    pointer-events: none !important;
    background:
        linear-gradient(115deg, transparent 0%, rgba(232, 190, 109, 0.12) 48%, transparent 56%),
        linear-gradient(25deg, transparent 0%, rgba(232, 190, 109, 0.07) 42%, transparent 52%) !important;
    opacity: 0.75 !important;
}

#branches.branch-trail-section-v2 .branch-trail-line {
    opacity: 0.11 !important;
    background-image:
        radial-gradient(circle, rgba(232, 190, 109, 0.24) 0.8px, transparent 1.25px) !important;
    background-size: 48px 48px !important;
}

#branches.branch-trail-section-v2 .branch-trail-points {
    z-index: 5 !important;
}

#branches.branch-trail-section-v2 .branch-bee {
    width: 72px !important;
    height: 58px !important;
    z-index: 60 !important;
    margin: 0 !important;
    will-change: left, top, transform !important;
    pointer-events: none !important;
    transition:
        left 900ms cubic-bezier(.16,.9,.18,1),
        top 900ms cubic-bezier(.16,.9,.18,1),
        transform 900ms cubic-bezier(.16,.9,.18,1) !important;
    filter:
        drop-shadow(0 15px 20px rgba(0,0,0,0.42))
        drop-shadow(0 0 14px rgba(231, 184, 94, 0.28)) !important;
}

#branches.branch-trail-section-v2 .branch-bee.is-flying {
    transform: translate(-50%, -50%) rotate(14deg) scale(1.16) !important;
}

#branches.branch-trail-section-v2 .branch-bee::after {
    content: "" !important;
    position: absolute !important;
    right: 76% !important;
    top: 52% !important;
    width: 44px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, transparent, rgba(232, 190, 109, 0.78)) !important;
    opacity: 0 !important;
    transform: translateY(-50%) !important;
}

#branches.branch-trail-section-v2 .branch-bee.is-flying::after {
    opacity: 1 !important;
}

#branches.branch-trail-section-v2 .branch-point-name {
    min-width: 82px !important;
    padding: 7px 12px !important;
    border-radius: 16px !important;
    background:
        linear-gradient(180deg, rgba(255, 246, 226, 0.98), rgba(237, 213, 172, 0.95)) !important;
    border: 1px solid rgba(238, 202, 134, 0.52) !important;
    color: #392114 !important;
    font-size: 0.66rem !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.62),
        0 14px 26px rgba(0,0,0,0.18) !important;
}

#branches.branch-trail-section-v2 .branch-point:hover .branch-point-name,
#branches.branch-trail-section-v2 .branch-point.is-active .branch-point-name {
    background:
        linear-gradient(180deg, rgba(255, 237, 192, 1), rgba(218, 171, 91, 0.98)) !important;
}

#branches.branch-trail-section-v2 .branch-hover-card {
    position: absolute !important;
    z-index: 80 !important;
    width: min(325px, calc(100% - 36px)) !important;
    max-height: none !important;
    transform: none !important;
    border-radius: 24px !important;
    background: rgba(255, 247, 229, 0.97) !important;
    border: 1px solid rgba(232, 194, 121, 0.36) !important;
    box-shadow: 0 24px 58px rgba(0,0,0,0.28) !important;
    cursor: pointer !important;
}

#branches.branch-trail-section-v2 .branch-hover-card.is-visible,
#branches.branch-trail-section-v2 .branch-hover-card.opens-above.is-visible,
#branches.branch-trail-section-v2 .branch-hover-card.opens-below.is-visible,
#branches.branch-trail-section-v2 .branch-hover-card.opens-side.is-visible,
#branches.branch-trail-section-v2 .branch-hover-card.opens-side-left.is-visible {
    transform: none !important;
}

#branches.branch-trail-section-v2 .branch-hover-card h3 {
    font-size: 1.68rem !important;
    margin-bottom: 6px !important;
}

#branches.branch-trail-section-v2 .branch-hover-card p {
    font-size: 0.8rem !important;
    line-height: 1.38 !important;
}

#branches.branch-trail-section-v2 .branch-hover-card small {
    margin-top: 12px !important;
    color: #8d5b2a !important;
}

#branches.branch-trail-section-v2 .branch-hover-badges,
#branches.branch-trail-section-v2 .branch-overlay-badges,
#branches.branch-trail-section-v2 .branch-overlay-contact {
    display: grid !important;
    gap: 8px !important;
    margin: 14px 0 0 !important;
}

#branches.branch-trail-section-v2 .branch-service-row,
#branches.branch-trail-section-v2 .branch-contact-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
    align-items: center !important;
}

#branches.branch-trail-section-v2 .branch-row-label {
    flex: 0 0 72px !important;
    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: 0.62rem !important;
    font-weight: 850 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: #9a642d !important;
}

#branches.branch-trail-section-v2 .branch-service-mark,
#branches.branch-trail-section-v2 .branch-contact-mark {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: 0.76rem !important;
    line-height: 1.25 !important;
    font-weight: 650 !important;
    color: #5f402c !important;
}

#branches.branch-trail-section-v2 .branch-chip-icon {
    width: 15px !important;
    height: 15px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    color: #8e5a25 !important;
}

#branches.branch-trail-section-v2 .branch-chip-icon svg {
    width: 15px !important;
    height: 15px !important;
    display: block !important;
    fill: currentColor !important;
}

#branches.branch-trail-section-v2 .branch-overlay-card {
    background: #fff7e9 !important;
}

#branches.branch-trail-section-v2 .branch-overlay-content {
    padding: 34px 34px 30px !important;
}

#branches.branch-trail-section-v2 .branch-overlay-service {
    font-weight: 700 !important;
    color: #4f3828 !important;
}

#branches.branch-trail-section-v2 .branch-overlay-actions {
    margin-top: 22px !important;
}

@media (max-width: 980px) {
    #branches.branch-trail-section-v2 {
        scroll-margin-top: 164px !important;
    }

    #branches.branch-trail-section-v2 .branch-trail-map {
        min-height: 430px !important;
    }
}

@media (max-width: 420px) {
    #branches.branch-trail-section-v2 {
        scroll-margin-top: 154px !important;
    }
}

/* Branch overlay note spacing refinement */
#branches.branch-trail-section-v2 .branch-overlay-note {
    margin-top: 16px !important;
}

/* =========================================================
   L'abeille D'or - Branches Bee Flight + Anchor v2.6
   Purpose:
   Restore section landing just above eyebrow, keep filter landing,
   expand map to prevent Contact peeking, and make bee movement
   transform-based for visible flight.
   ========================================================= */

/* Section nav landing: just above eyebrow */
#branches.branch-trail-section-v2 {
    scroll-margin-top: 122px !important;
    padding-bottom: clamp(78px, 8vw, 112px) !important;
}

/* Filter landing: keep the filter/nav row comfortably below header */
#branches.branch-trail-section-v2 .branch-filter-row {
    scroll-margin-top: 144px !important;
}

/* Expand map vertically instead of pushing section anchor down */
#branches.branch-trail-section-v2 .branch-trail-map {
    min-height: 560px !important;
}

/* Bee now moves using transform, not left/top */
#branches.branch-trail-section-v2 .branch-bee {
    left: 0 !important;
    top: 0 !important;
    width: 74px !important;
    height: 60px !important;
    z-index: 80 !important;
    margin: 0 !important;
    pointer-events: none !important;
    will-change: transform !important;
    transition: transform 950ms cubic-bezier(.16,.9,.18,1) !important;
    filter:
        drop-shadow(0 15px 20px rgba(0,0,0,0.42))
        drop-shadow(0 0 14px rgba(231, 184, 94, 0.30)) !important;
}

#branches.branch-trail-section-v2 .branch-bee.is-flying {
    filter:
        drop-shadow(0 18px 24px rgba(0,0,0,0.44))
        drop-shadow(0 0 18px rgba(231, 184, 94, 0.42)) !important;
}

#branches.branch-trail-section-v2 .branch-bee::after {
    content: "" !important;
    position: absolute !important;
    right: 78% !important;
    top: 52% !important;
    width: 48px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, transparent, rgba(232, 190, 109, 0.78)) !important;
    opacity: 0 !important;
    transform: translateY(-50%) !important;
}

#branches.branch-trail-section-v2 .branch-bee.is-flying::after {
    opacity: 1 !important;
}

/* Keep map texture calmer as height increases */
#branches.branch-trail-section-v2 .branch-trail-line {
    opacity: 0.10 !important;
    background-size: 50px 50px !important;
}

/* PC-only full-screen improvement */
@media (min-width: 981px) {
    #branches.branch-trail-section-v2 {
        padding-top: clamp(34px, 4.4vw, 56px) !important;
    }
}

/* Keep mobile/tablet for later tuning */
@media (max-width: 980px) {
    #branches.branch-trail-section-v2 {
        scroll-margin-top: 154px !important;
    }

    #branches.branch-trail-section-v2 .branch-trail-map {
        min-height: 430px !important;
    }
}

@media (max-width: 420px) {
    #branches.branch-trail-section-v2 {
        scroll-margin-top: 144px !important;
    }
}

/* =========================================================
   L'abeille D'or - Branches Bee Trail v2.7
   Purpose:
   Real bee movement via CSS variables, calmer chocolate panel,
   subtle dots restored, and sequential golden route path.
   ========================================================= */

#branches.branch-trail-section-v2 .branch-trail-map {
    min-height: 575px !important;
    overflow: visible !important;
    background:
        radial-gradient(circle at 50% 45%, rgba(222, 172, 91, 0.055), transparent 42%),
        linear-gradient(135deg, #21130c 0%, #2e1b11 48%, #2a180f 100%) !important;
}

#branches.branch-trail-section-v2 .branch-trail-map::before {
    opacity: 0.35 !important;
    background:
        linear-gradient(115deg, transparent 0%, rgba(232, 190, 109, 0.07) 48%, transparent 56%) !important;
}

#branches.branch-trail-section-v2 .branch-trail-line {
    opacity: 0.20 !important;
    background-image:
        radial-gradient(circle, rgba(232, 190, 109, 0.25) 0.85px, transparent 1.25px) !important;
    background-size: 44px 44px !important;
}

/* Sequential golden route line */
#branches.branch-trail-section-v2 .branch-route-svg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 4 !important;
    pointer-events: none !important;
    overflow: visible !important;
}

#branches.branch-trail-section-v2 .branch-route-path {
    fill: none !important;
    stroke: rgba(226, 184, 105, 0.58) !important;
    stroke-width: 0.42 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    stroke-dasharray: 1.4 1.8 !important;
    filter: drop-shadow(0 0 5px rgba(226, 184, 105, 0.18)) !important;
}

/* Bee movement now uses CSS variables. This avoids JS transform being blocked by !important rules. */
#branches.branch-trail-section-v2 .branch-bee {
    left: 0 !important;
    top: 0 !important;
    width: 76px !important;
    height: 62px !important;
    z-index: 80 !important;
    margin: 0 !important;
    pointer-events: none !important;
    will-change: transform !important;
    transform:
        translate(var(--bee-x, 40px), var(--bee-y, 40px))
        translate(-50%, -50%)
        rotate(var(--bee-rotate, -6deg))
        scale(var(--bee-scale, 1)) !important;
    transition:
        transform 920ms cubic-bezier(.16,.9,.18,1),
        filter 260ms ease !important;
    filter:
        drop-shadow(0 15px 20px rgba(0,0,0,0.42))
        drop-shadow(0 0 14px rgba(231, 184, 94, 0.30)) !important;
}

#branches.branch-trail-section-v2 .branch-bee.is-flying {
    --bee-rotate: 15deg !important;
    --bee-scale: 1.15 !important;
    filter:
        drop-shadow(0 18px 24px rgba(0,0,0,0.45))
        drop-shadow(0 0 20px rgba(231, 184, 94, 0.46)) !important;
}

#branches.branch-trail-section-v2 .branch-bee::after {
    content: "" !important;
    position: absolute !important;
    right: 76% !important;
    top: 52% !important;
    width: 48px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, transparent, rgba(232, 190, 109, 0.82)) !important;
    opacity: 0 !important;
    transform: translateY(-50%) !important;
}

#branches.branch-trail-section-v2 .branch-bee.is-flying::after {
    opacity: 1 !important;
}

/* Make branch plaques slightly richer on the darker panel */
#branches.branch-trail-section-v2 .branch-point-name {
    background:
        linear-gradient(180deg, rgba(255, 246, 226, 0.98), rgba(239, 215, 176, 0.96)) !important;
    border-color: rgba(238, 202, 134, 0.58) !important;
}

#branches.branch-trail-section-v2 .branch-point.is-active .branch-point-name,
#branches.branch-trail-section-v2 .branch-point:hover .branch-point-name {
    background:
        linear-gradient(180deg, rgba(255, 237, 193, 1), rgba(222, 176, 96, 0.98)) !important;
}

/* =========================================================
   L'abeille D'or - Branches Bee Route v2.8
   Purpose:
   Make branch route thinner and continuous, and add visible
   bee-flight wobble without resetting to the first branch.
   ========================================================= */

/* Thin continuous golden route */
#branches.branch-trail-section-v2 .branch-route-path {
    stroke: rgba(226, 184, 105, 0.50) !important;
    stroke-width: 0.24 !important;
    stroke-dasharray: none !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    filter: drop-shadow(0 0 4px rgba(226, 184, 105, 0.14)) !important;
}

/* Keep background texture subtle, not empty */
#branches.branch-trail-section-v2 .branch-trail-line {
    opacity: 0.16 !important;
    background-image:
        radial-gradient(circle, rgba(232, 190, 109, 0.20) 0.75px, transparent 1.2px) !important;
    background-size: 46px 46px !important;
}

/* More uniform chocolate panel */
#branches.branch-trail-section-v2 .branch-trail-map {
    background:
        radial-gradient(circle at 52% 46%, rgba(226, 184, 105, 0.045), transparent 46%),
        linear-gradient(135deg, #21130c 0%, #2b190f 52%, #24150d 100%) !important;
}

/* Bee movement state */
#branches.branch-trail-section-v2 .branch-bee {
    transform:
        translate(var(--bee-x, 40px), var(--bee-y, 40px))
        translate(-50%, -50%)
        rotate(var(--bee-rotate, -5deg))
        scale(var(--bee-scale, 1)) !important;
    transition:
        transform 1250ms cubic-bezier(.22,.78,.16,1),
        filter 260ms ease !important;
}

#branches.branch-trail-section-v2 .branch-bee.is-flying {
    --bee-scale: 1.12 !important;
    filter:
        drop-shadow(0 18px 24px rgba(0,0,0,0.45))
        drop-shadow(0 0 20px rgba(231, 184, 94, 0.45)) !important;
}

/* Wobble the actual bee image while the container travels */
#branches.branch-trail-section-v2 .branch-bee.is-flying img {
    animation: branchBeeWobble 1250ms ease-in-out both !important;
}

@keyframes branchBeeWobble {
    0% {
        transform: translate(0, 0) rotate(-4deg);
    }
    18% {
        transform: translate(8px, -8px) rotate(12deg);
    }
    36% {
        transform: translate(-7px, 5px) rotate(-10deg);
    }
    55% {
        transform: translate(7px, -5px) rotate(9deg);
    }
    74% {
        transform: translate(-4px, 3px) rotate(-6deg);
    }
    100% {
        transform: translate(0, 0) rotate(-3deg);
    }
}

/* Slightly slower trail flash */
#branches.branch-trail-section-v2 .branch-bee::after {
    width: 54px !important;
    opacity: 0 !important;
}

#branches.branch-trail-section-v2 .branch-bee.is-flying::after {
    opacity: 1 !important;
}

/* Bee flight only refinement v1 */
#branches.branch-trail-section-v2 .branch-bee {
    transition:
        transform var(--bee-duration, 420ms) cubic-bezier(.25,.78,.16,1),
        filter 220ms ease !important;
}

#branches.branch-trail-section-v2 .branch-bee.no-transition {
    transition: none !important;
}

#branches.branch-trail-section-v2 .branch-bee.is-flying {
    --bee-scale: 1.12 !important;
}

#branches.branch-trail-section-v2 .branch-bee.is-flying img {
    animation: branchBeeFlutterOnlyV1 260ms ease-in-out infinite alternate !important;
}

@keyframes branchBeeFlutterOnlyV1 {
    0% {
        transform: translate(0, 0) rotate(-7deg);
    }
    50% {
        transform: translate(5px, -5px) rotate(9deg);
    }
    100% {
        transform: translate(-4px, 4px) rotate(-6deg);
    }
}

/* Bee mouse-follow refinement v1 */
#branches.branch-trail-section-v2 .branch-bee {
    transition: filter 180ms ease !important;
    transform:
        translate(var(--bee-x, 40px), var(--bee-y, 40px))
        translate(-50%, -50%)
        rotate(var(--bee-rotate, -5deg))
        scale(var(--bee-scale, 1)) !important;
}

#branches.branch-trail-section-v2 .branch-bee.is-flying {
    --bee-scale: 1.08 !important;
}

#branches.branch-trail-section-v2 .branch-bee.is-flying img {
    animation: branchBeeMouseFlutterV1 240ms ease-in-out infinite alternate !important;
}

@keyframes branchBeeMouseFlutterV1 {
    0% {
        transform: translate(0, 0) rotate(-6deg);
    }
    50% {
        transform: translate(4px, -5px) rotate(8deg);
    }
    100% {
        transform: translate(-4px, 3px) rotate(-5deg);
    }
}

/* Bee mouse-shadow refinement v1 */
#branches.branch-trail-section-v2 .branch-bee {
    transition: filter 160ms ease !important;
    transform:
        translate(var(--bee-x, 40px), var(--bee-y, 40px))
        translate(-50%, -50%)
        rotate(var(--bee-rotate, -5deg))
        scale(var(--bee-scale, 1)) !important;
}

#branches.branch-trail-section-v2 .branch-bee.is-flying {
    --bee-scale: 1.07 !important;
}

#branches.branch-trail-section-v2 .branch-bee.is-flying img {
    animation: branchBeeMouseShadowV1 240ms ease-in-out infinite alternate !important;
}

@keyframes branchBeeMouseShadowV1 {
    0% {
        transform: translate(0, 0) rotate(-5deg);
    }
    50% {
        transform: translate(4px, -5px) rotate(8deg);
    }
    100% {
        transform: translate(-4px, 3px) rotate(-5deg);
    }
}

/* Bee mouse-shadow refinement v2
   Purpose: remove old shake behavior and make the bee smoothly shadow the mouse. */

#branches.branch-trail-section-v2 .branch-bee {
    transition: filter 160ms ease !important;
    transform:
        translate(var(--bee-x, 40px), var(--bee-y, 40px))
        translate(-50%, -50%)
        rotate(var(--bee-rotate, -5deg))
        scale(var(--bee-scale, 1)) !important;
}

/* Neutralize old flying animation class */
#branches.branch-trail-section-v2 .branch-bee.is-flying {
    --bee-scale: 1 !important;
}

#branches.branch-trail-section-v2 .branch-bee.is-flying img {
    animation: none !important;
}

/* New controlled mouse-follow animation */
#branches.branch-trail-section-v2 .branch-bee.is-following {
    --bee-scale: 1.07 !important;
}

#branches.branch-trail-section-v2 .branch-bee.is-following img {
    animation: branchBeeMouseShadowV2 240ms ease-in-out infinite alternate !important;
}

@keyframes branchBeeMouseShadowV2 {
    0% {
        transform: translate(0, 0) rotate(-5deg);
    }
    50% {
        transform: translate(4px, -5px) rotate(8deg);
    }
    100% {
        transform: translate(-4px, 3px) rotate(-5deg);
    }
}

/* Bee size refinement v1
   Slightly smaller bee for cleaner balance in the Branches map */
#branches.branch-trail-section-v2 .branch-bee {
    width: 66px !important;
    height: 54px !important;
}

/* Bee gold + size refinement v1
   Slightly smaller bee with a warmer golden tone */
#branches.branch-trail-section-v2 .branch-bee {
    width: 64px !important;
    height: 52px !important;
    filter:
        sepia(0.22)
        saturate(1.18)
        hue-rotate(-6deg)
        brightness(1.04)
        drop-shadow(0 14px 18px rgba(0,0,0,0.38))
        drop-shadow(0 0 12px rgba(231, 184, 94, 0.26)) !important;
}

#branches.branch-trail-section-v2 .branch-bee.is-following,
#branches.branch-trail-section-v2 .branch-bee.is-flying {
    filter:
        sepia(0.22)
        saturate(1.2)
        hue-rotate(-6deg)
        brightness(1.05)
        drop-shadow(0 16px 20px rgba(0,0,0,0.40))
        drop-shadow(0 0 15px rgba(231, 184, 94, 0.34)) !important;
}

/* Branch overlay fade refinement v1
   Softens hover preview and clickable branch overlay transitions */

/* Hover preview card */
#branches.branch-trail-section-v2 .branch-hover-card {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(8px) scale(0.985) !important;
    transition:
        opacity 220ms ease,
        visibility 220ms ease,
        transform 260ms cubic-bezier(.22,.78,.16,1) !important;
}

#branches.branch-trail-section-v2 .branch-hover-card.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
}

/* Click overlay backdrop */
#branches.branch-trail-section-v2 .branch-overlay {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition:
        opacity 240ms ease,
        visibility 240ms ease !important;
}

#branches.branch-trail-section-v2 .branch-overlay.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Click overlay card */
#branches.branch-trail-section-v2 .branch-overlay-card {
    opacity: 0 !important;
    transform: translateY(16px) scale(0.985) !important;
    transition:
        opacity 260ms ease,
        transform 300ms cubic-bezier(.22,.78,.16,1) !important;
}

#branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-card {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
}

/* Respect reduced-motion users */
@media (prefers-reduced-motion: reduce) {
    #branches.branch-trail-section-v2 .branch-hover-card,
    #branches.branch-trail-section-v2 .branch-overlay,
    #branches.branch-trail-section-v2 .branch-overlay-card {
        transition: none !important;
        transform: none !important;
    }
}

/* Hover card positioning refinement v2
   Forces hover preview to position near the selected branch dot
   and neutralizes older opens-above/below/side transform behavior. */

#branches.branch-trail-section-v2 .branch-hover-card {
    position: absolute !important;
    left: var(--hover-left, 16px) !important;
    top: var(--hover-top, 16px) !important;
    right: auto !important;
    bottom: auto !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(8px) scale(0.985) !important;
    transition:
        opacity 180ms ease,
        visibility 180ms ease,
        transform 220ms cubic-bezier(.22,.78,.16,1),
        left 160ms ease,
        top 160ms ease !important;
}

#branches.branch-trail-section-v2 .branch-hover-card.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
}

/* Neutralize older directional transform classes */
#branches.branch-trail-section-v2 .branch-hover-card.opens-above,
#branches.branch-trail-section-v2 .branch-hover-card.opens-below,
#branches.branch-trail-section-v2 .branch-hover-card.opens-side,
#branches.branch-trail-section-v2 .branch-hover-card.opens-side-left,
#branches.branch-trail-section-v2 .branch-hover-card.opens-above.is-visible,
#branches.branch-trail-section-v2 .branch-hover-card.opens-below.is-visible,
#branches.branch-trail-section-v2 .branch-hover-card.opens-side.is-visible,
#branches.branch-trail-section-v2 .branch-hover-card.opens-side-left.is-visible {
    transform: translateY(0) scale(1) !important;
}


/* =========================================================
   L'abeille D'or - Contact HR Recruitment Details
   Keeps HR and Recruitment contacts readable inside the card.
   ========================================================= */

.contact-email-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 14px !important;
}

.contact-email-list .contact-card-link {
  margin-top: 0 !important;
}

.contact-detail-list-split {
  gap: 10px !important;
}

.contact-detail-line-stacked {
  align-items: flex-start !important;
}

.contact-detail-line-stacked .contact-detail-type {
  min-width: 150px !important;
}

@media (max-width: 640px) {
  .contact-detail-line-stacked {
    flex-direction: column !important;
    gap: 6px !important;
  }

  .contact-detail-line-stacked .contact-detail-type {
    min-width: 0 !important;
  }

  .contact-email-list .contact-card-link {
    font-size: 0.92rem !important;
    overflow-wrap: anywhere !important;
  }
}


/* =========================================================
   L'abeille D'or - Final HR Contact Alignment Fix
   Aligns HR and Recruitment numbers cleanly inside the contact card.
   ========================================================= */

#contact .contact-card .contact-detail-line-stacked {
  display: grid !important;
  grid-template-columns: 130px minmax(0, 1fr) !important;
  column-gap: 16px !important;
  align-items: center !important;
}

#contact .contact-card .contact-detail-line-stacked .contact-detail-type {
  min-width: 0 !important;
  width: 130px !important;
  white-space: nowrap !important;
}

#contact .contact-card .contact-detail-line-stacked .contact-number-group {
  justify-content: flex-start !important;
  min-width: 0 !important;
}

#contact .contact-card .contact-detail-line-stacked .contact-number-item {
  gap: 8px !important;
}

#contact .contact-email-list {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 10px !important;
}

@media (max-width: 640px) {
  #contact .contact-card .contact-detail-line-stacked {
    grid-template-columns: 112px minmax(0, 1fr) !important;
    column-gap: 12px !important;
  }

  #contact .contact-card .contact-detail-line-stacked .contact-detail-type {
    width: 112px !important;
  }

  #contact .contact-email-list .contact-card-link {
    font-size: 0.92rem !important;
    overflow-wrap: anywhere !important;
  }
}


/* =========================================================
   L'abeille D'or - Final Contact Label Number Alignment v2
   Aligns all contact labels vertically on the right,
   with numbers/icons immediately beside them.
   ========================================================= */

#contact .contact-detail-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

#contact .contact-detail-line,
#contact .contact-detail-line-wide,
#contact .contact-detail-line-stacked {
  display: grid !important;
  grid-template-columns: 118px minmax(0, max-content) !important;
  column-gap: 10px !important;
  align-items: center !important;
  justify-content: start !important;
}

#contact .contact-detail-type {
  width: 118px !important;
  min-width: 118px !important;
  max-width: 118px !important;
  text-align: right !important;
  white-space: nowrap !important;
}

#contact .contact-number-group,
#contact .contact-number-group-icons {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-width: 0 !important;
  width: auto !important;
}

#contact .contact-number-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
}

#contact .contact-number-text {
  white-space: nowrap !important;
}

#contact .contact-number-separator {
  display: none !important;
}

@media (max-width: 640px) {
  #contact .contact-detail-line,
  #contact .contact-detail-line-wide,
  #contact .contact-detail-line-stacked {
    grid-template-columns: 106px minmax(0, max-content) !important;
    column-gap: 8px !important;
  }

  #contact .contact-detail-type {
    width: 106px !important;
    min-width: 106px !important;
    max-width: 106px !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.08em !important;
  }

  #contact .contact-number-text {
    font-size: 0.96rem !important;
  }
}


/* =========================================================
   L'abeille D'or - Final Contact Row Alignment v3
   Creates a clean label + number structure for all contact cards.
   Labels align right, numbers sit immediately beside them.
   ========================================================= */

#contact .contact-detail-list {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 28px !important;
}

#contact .contact-detail-line,
#contact .contact-detail-line-wide,
#contact .contact-detail-line-stacked {
  display: grid !important;
  grid-template-columns: 140px auto !important;
  column-gap: 10px !important;
  align-items: center !important;
  justify-content: center !important;
  width: max-content !important;
  max-width: 100% !important;
}

#contact .contact-detail-type {
  grid-column: 1 !important;
  justify-self: end !important;
  text-align: right !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  white-space: nowrap !important;
}

#contact .contact-number-group,
#contact .contact-number-group-icons {
  grid-column: 2 !important;
  justify-self: start !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
}

#contact .contact-number-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
}

#contact .contact-number-text {
  display: inline-block !important;
  white-space: nowrap !important;
}

#contact .contact-number-separator {
  display: none !important;
}

@media (max-width: 640px) {
  #contact .contact-detail-list {
    align-items: flex-start !important;
    margin-top: 22px !important;
  }

  #contact .contact-detail-line,
  #contact .contact-detail-line-wide,
  #contact .contact-detail-line-stacked {
    grid-template-columns: 104px auto !important;
    column-gap: 8px !important;
    justify-content: start !important;
    width: 100% !important;
  }

  #contact .contact-detail-type {
    font-size: 0.72rem !important;
    letter-spacing: 0.08em !important;
  }

  #contact .contact-number-text {
    font-size: 0.95rem !important;
  }
}

/* Honeycomb texture refinement v1
   Uses the uploaded honeycomb image as a faint texture inside
   the Branches chocolate map only. */

#branches.branch-trail-section-v2 .branch-trail-map {
    position: relative !important;
    overflow: hidden !important;
}

/* Faint image layer behind route, dots, labels, bee, and overlays */
#branches.branch-trail-section-v2 .branch-trail-map::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: -48px !important;
    border-radius: 46px !important;
    pointer-events: none !important;
    z-index: 2 !important;
    opacity: 0.075 !important;
    background-image: url("/assets/branches/textures/honeycomb-01.png?v=honeycomb-20260604153333") !important;
    background-size: 122% 122% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    mix-blend-mode: screen !important;
    filter: saturate(0.72) brightness(0.82) contrast(0.92) !important;
}

/* Keep all functional layers above the honeycomb texture */
#branches.branch-trail-section-v2 .branch-trail-line {
    z-index: 3 !important;
}

#branches.branch-trail-section-v2 .branch-route-svg {
    z-index: 4 !important;
}

#branches.branch-trail-section-v2 .branch-trail-points {
    z-index: 8 !important;
}

#branches.branch-trail-section-v2 .branch-bee {
    z-index: 80 !important;
}

#branches.branch-trail-section-v2 .branch-hover-card {
    z-index: 90 !important;
}

/* Branch click overlay note spacing refinement v1 */
#branches.branch-trail-section-v2 .branch-overlay-note {
    margin-top: 18px !important;
    display: block !important;
}

/* Branch overlay fallback final v1
   Clean final state after removing obsolete fallback/gallery patch blocks.
   Uses real HTML fallback content from index.html. */

#branches.branch-trail-section-v2 .branch-overlay-media {
    position: relative !important;
    min-height: 360px !important;
}

#branches.branch-trail-section-v2 .branch-overlay-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* Neutral branded fallback panel */
#branches.branch-trail-section-v2 .branch-overlay-image.branch-image-fallback {
    background-image:
        radial-gradient(circle at 50% 38%, rgba(232, 190, 109, 0.20), transparent 32%),
        radial-gradient(circle at 50% 70%, rgba(255, 246, 226, 0.08), transparent 36%),
        linear-gradient(135deg, #21130c 0%, #3a2416 52%, #24150d 100%) !important;
}

/* Disable old pseudo-element fallback text from the older base rules */
#branches.branch-trail-section-v2 .branch-overlay-image::before,
#branches.branch-trail-section-v2 .branch-overlay-image::after,
#branches.branch-trail-section-v2 .branch-image-fallback::before,
#branches.branch-trail-section-v2 .branch-image-fallback::after,
#branches.branch-trail-section-v2 .branch-overlay-image.branch-image-fallback::before,
#branches.branch-trail-section-v2 .branch-overlay-image.branch-image-fallback::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Real fallback message */
#branches.branch-trail-section-v2 .branch-fallback-message {
    position: absolute !important;
    inset: 0 !important;
    z-index: 40 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    pointer-events: none !important;
    padding: 28px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#branches.branch-trail-section-v2 .branch-fallback-title {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: clamp(2rem, 3vw, 3.1rem) !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    color: rgba(255, 238, 196, 0.94) !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
}

#branches.branch-trail-section-v2 .branch-fallback-subtitle {
    margin-top: 12px !important;
    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: 0.68rem !important;
    font-weight: 750 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: rgba(255, 238, 196, 0.66) !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
}

/* When a real branch image is used later, hide the fallback message */
#branches.branch-trail-section-v2 .branch-overlay-image:not(.branch-image-fallback) .branch-fallback-message {
    display: none !important;
}

/* Ensure no failed gallery layer remains visible */
#branches.branch-trail-section-v2 .branch-gallery-layer {
    display: none !important;
}


/* Clean branch photo gallery v1
   Real gallery UI layered inside the existing branch overlay media panel. */

#branches.branch-trail-section-v2 .branch-photo-gallery {
    position: absolute !important;
    inset: 0 !important;
    z-index: 50 !important;
    display: none !important;
    background: #21130c !important;
}

#branches.branch-trail-section-v2 .branch-overlay-image.has-branch-photo-gallery .branch-photo-gallery {
    display: block !important;
}

#branches.branch-trail-section-v2 .branch-overlay-image.has-branch-photo-gallery .branch-fallback-message {
    display: none !important;
}

#branches.branch-trail-section-v2 .branch-photo-gallery-img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center center !important;
}

#branches.branch-trail-section-v2 .branch-photo-gallery::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background: linear-gradient(180deg, rgba(38, 22, 12, 0.05), rgba(38, 22, 12, 0.24)) !important;
}

#branches.branch-trail-section-v2 .branch-photo-gallery-arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 55 !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 238, 196, 0.42) !important;
    background: rgba(30, 17, 10, 0.52) !important;
    color: rgba(255, 246, 226, 0.96) !important;
    font-family: Arial, sans-serif !important;
    font-size: 1.5rem !important;
    line-height: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    backdrop-filter: blur(5px) !important;
}

#branches.branch-trail-section-v2 .branch-photo-gallery-prev {
    left: 16px !important;
}

#branches.branch-trail-section-v2 .branch-photo-gallery-next {
    right: 16px !important;
}

#branches.branch-trail-section-v2 .branch-photo-gallery-counter {
    position: absolute !important;
    left: 50% !important;
    bottom: 16px !important;
    transform: translateX(-50%) !important;
    z-index: 55 !important;
    padding: 7px 11px !important;
    border-radius: 999px !important;
    background: rgba(30, 17, 10, 0.56) !important;
    border: 1px solid rgba(255, 238, 196, 0.30) !important;
    color: rgba(255, 246, 226, 0.92) !important;
    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: 0.66rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    backdrop-filter: blur(5px) !important;
}

/* Branch gallery fit v1
   Shows full branch photos in the preview gallery instead of cropping them. */

#branches.branch-trail-section-v2 .branch-photo-gallery {
    background:
        radial-gradient(circle at 50% 38%, rgba(232, 190, 109, 0.12), transparent 34%),
        linear-gradient(135deg, #21130c 0%, #3a2416 52%, #24150d 100%) !important;
}

#branches.branch-trail-section-v2 .branch-photo-gallery-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    padding: 10px !important;
    box-sizing: border-box !important;
}

/* Branch contact/services cleanup v1
   Keeps compact inline rows and removes duplicated standalone service text. */

#branches.branch-trail-section-v2 .branch-overlay-service,
#branches.branch-trail-section-v2 .branch-hover-service {
    display: none !important;
}

/* Keep contact and service rows compact, inline, and wrapping only when needed. */
#branches.branch-trail-section-v2 .branch-contact-row,
#branches.branch-trail-section-v2 .branch-service-row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
}

#branches.branch-trail-section-v2 .branch-row-label {
    flex: 0 0 auto !important;
    margin-right: 2px !important;
}

#branches.branch-trail-section-v2 .branch-contact-mark,
#branches.branch-trail-section-v2 .branch-service-mark {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
}

/* Slightly tighten click overlay spacing after removing duplicate service line. */
#branches.branch-trail-section-v2 .branch-overlay-contact {
    margin-top: 18px !important;
}

#branches.branch-trail-section-v2 .branch-overlay-badges {
    margin-top: 10px !important;
}

/* Branch contact row refinement v1
   Gives the click overlay more right-side room and turns WhatsApp into an icon-only badge. */

@media (min-width: 900px) {
    #branches.branch-trail-section-v2 .branch-overlay-card {
        width: min(94vw, 1000px) !important;
        grid-template-columns: minmax(260px, 0.88fr) minmax(360px, 1.18fr) !important;
    }
}

#branches.branch-trail-section-v2 .branch-contact-row {
    gap: 8px 14px !important;
}

#branches.branch-trail-section-v2 .branch-contact-mark {
    white-space: nowrap !important;
}

#branches.branch-trail-section-v2 .branch-whatsapp-mark {
    min-width: 28px !important;
    min-height: 24px !important;
    justify-content: center !important;
    padding-inline: 2px !important;
}

#branches.branch-trail-section-v2 .branch-whatsapp-mark svg,
#branches.branch-trail-section-v2 .branch-whatsapp-mark img {
    width: 18px !important;
    height: 18px !important;
}

#branches.branch-trail-section-v2 .branch-hover-card .branch-whatsapp-mark svg,
#branches.branch-trail-section-v2 .branch-hover-card .branch-whatsapp-mark img {
    width: 17px !important;
    height: 17px !important;
}

/* Prevent compact rows from looking crowded after removing WhatsApp text. */
#branches.branch-trail-section-v2 .branch-row-label {
    margin-right: 4px !important;
}

/* Contact badge alignment cleanup v1
   Keeps WhatsApp visually attached to the mobile number and reduces click overlay width. */

@media (min-width: 900px) {
    #branches.branch-trail-section-v2 .branch-overlay-card {
        width: min(92vw, 930px) !important;
        grid-template-columns: minmax(260px, 0.92fr) minmax(335px, 1.08fr) !important;
    }
}

#branches.branch-trail-section-v2 .branch-contact-row {
    gap: 8px 12px !important;
}

#branches.branch-trail-section-v2 .branch-mobile-mark {
    gap: 6px !important;
}

#branches.branch-trail-section-v2 .branch-whatsapp-inline {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 5px !important;
    transform: translateY(1px) !important;
}

#branches.branch-trail-section-v2 .branch-whatsapp-inline svg,
#branches.branch-trail-section-v2 .branch-whatsapp-inline img {
    width: 17px !important;
    height: 17px !important;
}

#branches.branch-trail-section-v2 .branch-hover-card .branch-whatsapp-inline svg,
#branches.branch-trail-section-v2 .branch-hover-card .branch-whatsapp-inline img {
    width: 16px !important;
    height: 16px !important;
}

/* Retire the old separate WhatsApp marker spacing if it still exists from previous CSS. */
#branches.branch-trail-section-v2 .branch-whatsapp-mark {
    min-width: 0 !important;
    min-height: 0 !important;
    padding-inline: 0 !important;
}

/* Branch contact final alignment v1
   Attaches WhatsApp icon to the mobile number, reduces click overlay width,
   and gives hover card enough width for landline + mobile where possible. */

@media (min-width: 900px) {
    #branches.branch-trail-section-v2 .branch-overlay-card {
        width: min(92vw, 890px) !important;
        grid-template-columns: minmax(250px, 0.9fr) minmax(330px, 1.1fr) !important;
    }

    #branches.branch-trail-section-v2 .branch-hover-card {
        width: min(440px, calc(100vw - 48px)) !important;
        max-width: 440px !important;
    }
}

#branches.branch-trail-section-v2 .branch-contact-row,
#branches.branch-trail-section-v2 .branch-service-row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px 11px !important;
}

@media (min-width: 900px) {
    #branches.branch-trail-section-v2 .branch-hover-card .branch-contact-row {
        flex-wrap: nowrap !important;
    }
}

#branches.branch-trail-section-v2 .branch-contact-mark,
#branches.branch-trail-section-v2 .branch-service-mark {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
}

#branches.branch-trail-section-v2 .branch-mobile-mark {
    gap: 6px !important;
}

#branches.branch-trail-section-v2 .branch-whatsapp-inline {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 5px !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    transform: translateY(1px) !important;
}

#branches.branch-trail-section-v2 .branch-whatsapp-inline svg,
#branches.branch-trail-section-v2 .branch-whatsapp-inline img {
    width: 17px !important;
    height: 17px !important;
    display: block !important;
}

#branches.branch-trail-section-v2 .branch-hover-card .branch-whatsapp-inline svg,
#branches.branch-trail-section-v2 .branch-hover-card .branch-whatsapp-inline img {
    width: 16px !important;
    height: 16px !important;
}

/* Hide old separate WhatsApp badge if any stale markup remains. */
#branches.branch-trail-section-v2 .branch-whatsapp-mark {
    display: none !important;
}

/* Final contact/hover cleanup v1
   Removes hover Directions badge, visually attaches WhatsApp to the mobile number,
   widens hover slightly, and tightens click overlay width. */

@media (min-width: 900px) {
    #branches.branch-trail-section-v2 .branch-overlay-card {
        width: min(91vw, 850px) !important;
        grid-template-columns: minmax(250px, 0.95fr) minmax(315px, 1.05fr) !important;
    }

    #branches.branch-trail-section-v2 .branch-hover-card {
        width: min(470px, calc(100vw - 48px)) !important;
        max-width: 470px !important;
    }
}

/* Contact row remains compact and wraps only when it has to. */
#branches.branch-trail-section-v2 .branch-contact-row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px 10px !important;
}

@media (min-width: 900px) {
    #branches.branch-trail-section-v2 .branch-hover-card .branch-contact-row {
        flex-wrap: nowrap !important;
    }
}

/* Force each number badge to size only to its content. */
#branches.branch-trail-section-v2 .branch-contact-mark {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

/* Mobile + WhatsApp should behave as one compact badge. */
#branches.branch-trail-section-v2 .branch-mobile-mark {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: auto !important;
    flex: 0 0 auto !important;
}

#branches.branch-trail-section-v2 .branch-whatsapp-inline {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 2px !important;
    width: 17px !important;
    height: 17px !important;
    flex: 0 0 17px !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    transform: translateY(1px) !important;
}

#branches.branch-trail-section-v2 .branch-whatsapp-inline svg,
#branches.branch-trail-section-v2 .branch-whatsapp-inline img {
    width: 17px !important;
    height: 17px !important;
    display: block !important;
}

/* Remove stale separate WhatsApp and Directions badges if old markup appears from cache. */
#branches.branch-trail-section-v2 .branch-whatsapp-mark,
#branches.branch-trail-section-v2 .branch-directions-mark {
    display: none !important;
}

/* Slightly tighten right content after reducing card width. */
#branches.branch-trail-section-v2 .branch-overlay-content {
    padding-right: 42px !important;
}

/* Tight contact and overlay width v1
   Forces WhatsApp to stay attached to the mobile number
   and reduces the click overlay width. */

@media (min-width: 900px) {
    #branches.branch-trail-section-v2 .branch-overlay-card {
        width: min(88vw, 790px) !important;
        grid-template-columns: minmax(230px, 0.92fr) minmax(300px, 1.08fr) !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay-content {
        padding-right: 36px !important;
    }

    #branches.branch-trail-section-v2 .branch-hover-card {
        width: min(470px, calc(100vw - 48px)) !important;
        max-width: 470px !important;
    }
}

/* Compact contact row */
#branches.branch-trail-section-v2 .branch-contact-row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px 10px !important;
}

@media (min-width: 900px) {
    #branches.branch-trail-section-v2 .branch-hover-card .branch-contact-row {
        flex-wrap: nowrap !important;
    }
}

/* Every contact item should shrink to its own content */
#branches.branch-trail-section-v2 .branch-contact-mark {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: max-content !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    gap: 6px !important;
}

/* Mobile number and WhatsApp icon act as one tight group */
#branches.branch-trail-section-v2 .branch-mobile-mark {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: max-content !important;
    flex: 0 0 auto !important;
    gap: 4px !important;
}

#branches.branch-trail-section-v2 .branch-mobile-number {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: max-content !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

#branches.branch-trail-section-v2 .branch-whatsapp-inline {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: static !important;
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    max-width: 17px !important;
    flex: 0 0 17px !important;
    margin-left: 1px !important;
    padding: 0 !important;
    line-height: 1 !important;
    transform: translateY(1px) !important;
}

#branches.branch-trail-section-v2 .branch-whatsapp-inline svg,
#branches.branch-trail-section-v2 .branch-whatsapp-inline img {
    width: 17px !important;
    height: 17px !important;
    display: block !important;
    margin: 0 !important;
}

/* Keep old separate WhatsApp/Directions badges hidden if any stale CSS/markup remains */
#branches.branch-trail-section-v2 .branch-whatsapp-mark,
#branches.branch-trail-section-v2 .branch-directions-mark {
    display: none !important;
}

/* Tight contact and overlay width v1
   Forces WhatsApp to stay attached to the mobile number
   and reduces the click overlay width. */

@media (min-width: 900px) {
    #branches.branch-trail-section-v2 .branch-overlay-card {
        width: min(88vw, 790px) !important;
        grid-template-columns: minmax(230px, 0.92fr) minmax(300px, 1.08fr) !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay-content {
        padding-right: 36px !important;
    }

    #branches.branch-trail-section-v2 .branch-hover-card {
        width: min(470px, calc(100vw - 48px)) !important;
        max-width: 470px !important;
    }
}

/* Compact contact row */
#branches.branch-trail-section-v2 .branch-contact-row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px 10px !important;
}

@media (min-width: 900px) {
    #branches.branch-trail-section-v2 .branch-hover-card .branch-contact-row {
        flex-wrap: nowrap !important;
    }
}

/* Every contact item should shrink to its own content */
#branches.branch-trail-section-v2 .branch-contact-mark {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: max-content !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    gap: 6px !important;
}

/* Mobile number and WhatsApp icon act as one tight group */
#branches.branch-trail-section-v2 .branch-mobile-mark {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: max-content !important;
    flex: 0 0 auto !important;
    gap: 4px !important;
}

#branches.branch-trail-section-v2 .branch-mobile-number {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: max-content !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

#branches.branch-trail-section-v2 .branch-whatsapp-inline {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: static !important;
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    max-width: 17px !important;
    flex: 0 0 17px !important;
    margin-left: 1px !important;
    padding: 0 !important;
    line-height: 1 !important;
    transform: translateY(1px) !important;
}

#branches.branch-trail-section-v2 .branch-whatsapp-inline svg,
#branches.branch-trail-section-v2 .branch-whatsapp-inline img {
    width: 17px !important;
    height: 17px !important;
    display: block !important;
    margin: 0 !important;
}

/* Keep old separate WhatsApp/Directions badges hidden if any stale CSS/markup remains */
#branches.branch-trail-section-v2 .branch-whatsapp-mark,
#branches.branch-trail-section-v2 .branch-directions-mark {
    display: none !important;
}

/* Hover width and WhatsApp color v1
   Tightens hover overlay width and makes WhatsApp icon visually clear. */

@media (min-width: 900px) {
    #branches.branch-trail-section-v2 .branch-hover-card {
        width: fit-content !important;
        min-width: 360px !important;
        max-width: 430px !important;
    }

    #branches.branch-trail-section-v2 .branch-hover-card .branch-hover-address {
        max-width: 370px !important;
    }

    #branches.branch-trail-section-v2 .branch-hover-card .branch-contact-row {
        flex-wrap: wrap !important;
        max-width: 390px !important;
    }
}

/* Keep WhatsApp attached to the mobile number and make it recognizable. */
#branches.branch-trail-section-v2 .branch-mobile-mark {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

#branches.branch-trail-section-v2 .branch-whatsapp-inline {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    margin-left: 2px !important;
    color: #25D366 !important;
    transform: translateY(1px) !important;
}

#branches.branch-trail-section-v2 .branch-whatsapp-inline svg,
#branches.branch-trail-section-v2 .branch-whatsapp-inline svg *,
#branches.branch-trail-section-v2 .branch-whatsapp-inline img {
    width: 18px !important;
    height: 18px !important;
    color: #25D366 !important;
    fill: #25D366 !important;
    stroke: #25D366 !important;
}

/* If the icon uses text/icon-font rendering instead of SVG. */
#branches.branch-trail-section-v2 .branch-whatsapp-inline i,
#branches.branch-trail-section-v2 .branch-whatsapp-inline span {
    color: #25D366 !important;
}

/* Click overlay: keep it tighter than the previous wide version. */
@media (min-width: 900px) {
    #branches.branch-trail-section-v2 .branch-overlay-card {
        width: min(88vw, 800px) !important;
        grid-template-columns: minmax(230px, 0.95fr) minmax(300px, 1.05fr) !important;
    }
}

/* Hover width and WhatsApp color v1
   Tightens hover overlay width and makes WhatsApp icon visually clear. */

@media (min-width: 900px) {
    #branches.branch-trail-section-v2 .branch-hover-card {
        width: fit-content !important;
        min-width: 360px !important;
        max-width: 430px !important;
    }

    #branches.branch-trail-section-v2 .branch-hover-card .branch-hover-address {
        max-width: 370px !important;
    }

    #branches.branch-trail-section-v2 .branch-hover-card .branch-contact-row {
        flex-wrap: wrap !important;
        max-width: 390px !important;
    }
}

/* Keep WhatsApp attached to the mobile number and make it recognizable. */
#branches.branch-trail-section-v2 .branch-mobile-mark {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

#branches.branch-trail-section-v2 .branch-whatsapp-inline {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    margin-left: 2px !important;
    color: #25D366 !important;
    transform: translateY(1px) !important;
}

#branches.branch-trail-section-v2 .branch-whatsapp-inline svg,
#branches.branch-trail-section-v2 .branch-whatsapp-inline svg *,
#branches.branch-trail-section-v2 .branch-whatsapp-inline img {
    width: 18px !important;
    height: 18px !important;
    color: #25D366 !important;
    fill: #25D366 !important;
    stroke: #25D366 !important;
}

/* If the icon uses text/icon-font rendering instead of SVG. */
#branches.branch-trail-section-v2 .branch-whatsapp-inline i,
#branches.branch-trail-section-v2 .branch-whatsapp-inline span {
    color: #25D366 !important;
}

/* Click overlay: keep it tighter than the previous wide version. */
@media (min-width: 900px) {
    #branches.branch-trail-section-v2 .branch-overlay-card {
        width: min(88vw, 800px) !important;
        grid-template-columns: minmax(230px, 0.95fr) minmax(300px, 1.05fr) !important;
    }
}

/* Contact icon color and position v1
   Places WhatsApp beside the mobile icon, not after the number.
   Colors only the icons, keeping phone numbers readable. */

#branches.branch-trail-section-v2 .branch-contact-row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px 10px !important;
}

#branches.branch-trail-section-v2 .branch-contact-mark {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: max-content !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    gap: 5px !important;
}

#branches.branch-trail-section-v2 .branch-contact-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    flex: 0 0 17px !important;
    line-height: 1 !important;
}

#branches.branch-trail-section-v2 .branch-contact-icon .branch-chip-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 17px !important;
    height: 17px !important;
    margin: 0 !important;
}

#branches.branch-trail-section-v2 .branch-contact-icon svg,
#branches.branch-trail-section-v2 .branch-contact-icon svg * {
    width: 17px !important;
    height: 17px !important;
}

/* Elegant icon colors */
#branches.branch-trail-section-v2 .branch-landline-icon,
#branches.branch-trail-section-v2 .branch-landline-icon svg,
#branches.branch-trail-section-v2 .branch-landline-icon svg * {
    color: #A66A2C !important;
    fill: #A66A2C !important;
    stroke: #A66A2C !important;
}

#branches.branch-trail-section-v2 .branch-mobile-icon,
#branches.branch-trail-section-v2 .branch-mobile-icon svg,
#branches.branch-trail-section-v2 .branch-mobile-icon svg * {
    color: #C08A2D !important;
    fill: #C08A2D !important;
    stroke: #C08A2D !important;
}

#branches.branch-trail-section-v2 .branch-whatsapp-inline,
#branches.branch-trail-section-v2 .branch-whatsapp-inline svg,
#branches.branch-trail-section-v2 .branch-whatsapp-inline svg * {
    color: #25D366 !important;
    fill: #25D366 !important;
    stroke: #25D366 !important;
}

/* Keep the WhatsApp icon visually attached to the mobile icon */
#branches.branch-trail-section-v2 .branch-mobile-mark {
    gap: 4px !important;
}

#branches.branch-trail-section-v2 .branch-whatsapp-inline {
    margin-left: -1px !important;
    margin-right: 3px !important;
    transform: translateY(1px) !important;
}

#branches.branch-trail-section-v2 .branch-contact-number {
    display: inline-block !important;
    white-space: nowrap !important;
}

/* Keep hover compact after removing the Directions badge */
@media (min-width: 900px) {
    #branches.branch-trail-section-v2 .branch-hover-card {
        width: fit-content !important;
        min-width: 350px !important;
        max-width: 410px !important;
    }

    #branches.branch-trail-section-v2 .branch-hover-card .branch-contact-row {
        flex-wrap: wrap !important;
        max-width: 370px !important;
    }
}

/* Branch photo large viewer v1
   Full-screen photo viewer for branch gallery images. */

#branches.branch-trail-section-v2 .branch-photo-lightbox {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 34px !important;
}

#branches.branch-trail-section-v2 .branch-photo-lightbox.is-open {
    display: flex !important;
}

#branches.branch-trail-section-v2 .branch-photo-lightbox-backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(26, 14, 8, 0.78) !important;
    backdrop-filter: blur(8px) !important;
}

#branches.branch-trail-section-v2 .branch-photo-lightbox-card {
    position: relative !important;
    z-index: 2 !important;
    width: min(92vw, 1120px) !important;
    height: min(86vh, 760px) !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 50% 38%, rgba(232, 190, 109, 0.12), transparent 34%),
        linear-gradient(135deg, #21130c 0%, #3a2416 52%, #24150d 100%) !important;
    border: 1px solid rgba(255, 238, 196, 0.22) !important;
    box-shadow: 0 30px 90px rgba(0,0,0,0.48) !important;
}

#branches.branch-trail-section-v2 .branch-photo-lightbox-img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: contain !important;
    object-position: center center !important;
    padding: 18px !important;
    box-sizing: border-box !important;
}

#branches.branch-trail-section-v2 .branch-photo-lightbox-close {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    z-index: 5 !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 238, 196, 0.36) !important;
    background: rgba(30, 17, 10, 0.62) !important;
    color: rgba(255, 246, 226, 0.96) !important;
    font-size: 1.7rem !important;
    line-height: 1 !important;
    cursor: pointer !important;
    backdrop-filter: blur(5px) !important;
}

#branches.branch-trail-section-v2 .branch-photo-lightbox-arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 5 !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 238, 196, 0.36) !important;
    background: rgba(30, 17, 10, 0.58) !important;
    color: rgba(255, 246, 226, 0.96) !important;
    font-family: Arial, sans-serif !important;
    font-size: 1.8rem !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    backdrop-filter: blur(5px) !important;
}

#branches.branch-trail-section-v2 .branch-photo-lightbox-prev {
    left: 18px !important;
}

#branches.branch-trail-section-v2 .branch-photo-lightbox-next {
    right: 18px !important;
}

#branches.branch-trail-section-v2 .branch-photo-lightbox-counter {
    position: absolute !important;
    left: 50% !important;
    bottom: 18px !important;
    transform: translateX(-50%) !important;
    z-index: 5 !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    background: rgba(30, 17, 10, 0.58) !important;
    border: 1px solid rgba(255, 238, 196, 0.30) !important;
    color: rgba(255, 246, 226, 0.92) !important;
    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    backdrop-filter: blur(5px) !important;
}

@media (max-width: 760px) {
    #branches.branch-trail-section-v2 .branch-photo-lightbox {
        padding: 16px !important;
    }

    #branches.branch-trail-section-v2 .branch-photo-lightbox-card {
        width: 96vw !important;
        height: 78vh !important;
        border-radius: 22px !important;
    }

    #branches.branch-trail-section-v2 .branch-photo-lightbox-img {
        padding: 12px !important;
    }

    #branches.branch-trail-section-v2 .branch-photo-lightbox-arrow {
        width: 38px !important;
        height: 38px !important;
        font-size: 1.5rem !important;
    }
}

/* Adaptive photo lightbox v1
   The large viewer frame now adapts to the original photo ratio,
   reducing empty side background without cropping or stretching. */

#branches.branch-trail-section-v2 .branch-photo-lightbox-card {
    max-width: min(92vw, 1120px) !important;
    max-height: min(86vh, 760px) !important;
    width: auto !important;
    height: auto !important;
}

#branches.branch-trail-section-v2 .branch-photo-lightbox-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    padding: 14px !important;
    box-sizing: border-box !important;
}

/* Keep the chocolate background, but reduce the heavy side feel. */
#branches.branch-trail-section-v2 .branch-photo-lightbox-card {
    background:
        radial-gradient(circle at 50% 38%, rgba(232, 190, 109, 0.10), transparent 34%),
        linear-gradient(135deg, #21130c 0%, #332014 52%, #21130c 100%) !important;
}

@media (max-width: 760px) {
    #branches.branch-trail-section-v2 .branch-photo-lightbox-card {
        max-width: 96vw !important;
        max-height: 78vh !important;
    }

    #branches.branch-trail-section-v2 .branch-photo-lightbox-img {
        padding: 10px !important;
    }
}

/* Safe adaptive photo lightbox v2
   Reasonable large-view size, adaptive photo ratio, no crop, no stretch. */

#branches.branch-trail-section-v2 .branch-photo-lightbox-card {
    --branch-photo-aspect: 1.333;

    width: min(88vw, 960px, calc(74vh * var(--branch-photo-aspect))) !important;
    height: min(74vh, 660px, calc(88vw / var(--branch-photo-aspect))) !important;

    max-width: 960px !important;
    max-height: 660px !important;
}

#branches.branch-trail-section-v2 .branch-photo-lightbox-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    padding: 12px !important;
    box-sizing: border-box !important;
}

@media (max-width: 760px) {
    #branches.branch-trail-section-v2 .branch-photo-lightbox-card {
        width: min(94vw, calc(72vh * var(--branch-photo-aspect))) !important;
        height: min(72vh, calc(94vw / var(--branch-photo-aspect))) !important;
        max-width: 94vw !important;
        max-height: 72vh !important;
    }

    #branches.branch-trail-section-v2 .branch-photo-lightbox-img {
        padding: 8px !important;
    }
}

/* Large photo viewer close pill v1
   Replaces the plain X with a clearer Close pill. */

#branches.branch-trail-section-v2 .branch-photo-lightbox-close {
    width: auto !important;
    min-width: 86px !important;
    height: 40px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border-radius: 999px !important;
    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

#branches.branch-trail-section-v2 .branch-photo-lightbox-close-x {
    font-size: 1.35rem !important;
    line-height: 1 !important;
    transform: translateY(-1px) !important;
}

/* Branches mobile/tablet pass 1
   Fixes close pill, mobile contact spacing, scroll lock, and phone nav layout. */

/* Lock page behind branch detail overlay and large photo viewer */
body.branch-overlay-open,
body.branch-photo-lightbox-open {
    overflow: hidden !important;
}

/* Branch detail overlay Close pill */
#branches.branch-trail-section-v2 .branch-overlay-close {
    width: auto !important;
    min-width: 86px !important;
    height: 40px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border-radius: 999px !important;
    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    z-index: 20 !important;
}

#branches.branch-trail-section-v2 .branch-overlay-close-x {
    font-size: 1.35rem !important;
    line-height: 1 !important;
    transform: translateY(-1px) !important;
}

/* Phone polish */
@media (max-width: 760px) {

    /* Make branch detail overlay close button easier to see/tap */
    #branches.branch-trail-section-v2 .branch-overlay-close {
        top: 14px !important;
        right: 14px !important;
        min-width: 92px !important;
        height: 42px !important;
        padding: 0 15px !important;
    }

    /* In the branch detail overlay, remove the Contact label on small screens.
       This gives the phone/mobile numbers more room to sit cleanly. */
    #branches.branch-trail-section-v2 .branch-overlay .branch-contact-mark,
    #branches.branch-trail-section-v2 .branch-overlay .branch-contact-line strong {
        display: none !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay .branch-contact-row,
    #branches.branch-trail-section-v2 .branch-overlay .branch-contact-line {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px 12px !important;
        text-align: left !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay .branch-contact-number {
        white-space: nowrap !important;
    }

    /* Make the section navigation behave like a 2 x 2 grid on phones.
       Multiple selectors are intentional because this section has evolved. */
    #branches.branch-trail-section-v2 .branch-section-nav,
    #branches.branch-trail-section-v2 .branch-nav,
    #branches.branch-trail-section-v2 .section-nav,
    #branches.branch-trail-section-v2 .section-tabs,
    #branches.branch-trail-section-v2 .branch-filter-row,
    #branches.branch-trail-section-v2 .branch-filter-tabs,
    #branches.branch-trail-section-v2 .branch-tabs {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        overflow: visible !important;
        overflow-x: visible !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #branches.branch-trail-section-v2 .branch-section-nav > *,
    #branches.branch-trail-section-v2 .branch-nav > *,
    #branches.branch-trail-section-v2 .section-nav > *,
    #branches.branch-trail-section-v2 .section-tabs > *,
    #branches.branch-trail-section-v2 .branch-filter-row > *,
    #branches.branch-trail-section-v2 .branch-filter-tabs > *,
    #branches.branch-trail-section-v2 .branch-tabs > * {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: normal !important;
    }

    /* Prevent side-scroll feel inside branch galleries */
    #branches.branch-trail-section-v2 .branch-photo-gallery,
    #branches.branch-trail-section-v2 .branch-photo-lightbox-card {
        touch-action: pan-y !important;
    }
}

/* Extra protection for full-screen large viewer */
#branches.branch-trail-section-v2 .branch-photo-lightbox.is-open {
    overflow: hidden !important;
    overscroll-behavior: contain !important;
    touch-action: none !important;
}

/* Branches mobile/tablet pass 2
   Corrects mobile branch overlay close button, restores contact/badges,
   and changes the 5 nav buttons to centered wrapping pills. */

/* Keep PC branch overlay close consistent and visible */
#branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-close {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 99999 !important;
}

/* Phone branch detail overlay close pill.
   Use fixed positioning so it does not disappear inside the scrollable overlay. */
@media (max-width: 760px) {
    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-close {
        position: fixed !important;
        top: calc(env(safe-area-inset-top, 0px) + 14px) !important;
        right: 14px !important;
        left: auto !important;
        bottom: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        min-width: 92px !important;
        height: 42px !important;
        padding: 0 15px !important;
        border-radius: 999px !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        z-index: 99999 !important;
    }

    /* Restore branch details that were accidentally hidden on phone */
    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-contact,
    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-badges {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-contact {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        margin-top: 10px !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-badges {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        margin-top: 10px !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-contact-row,
    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-contact-line {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px 12px !important;
        width: 100% !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Hide only the Contact label, not the numbers/icons */
    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-contact-mark,
    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-contact-line > strong:first-child {
        display: none !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-contact-row > *:not(.branch-contact-mark),
    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-contact-chip,
    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-contact-icon,
    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-contact-number {
        display: inline-flex !important;
        align-items: center !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-contact-number {
        white-space: nowrap !important;
    }

    /* Replace the previous 2-column grid with centered wrapping pills for 5 nav buttons */
    #branches.branch-trail-section-v2 .branch-section-nav,
    #branches.branch-trail-section-v2 .branch-nav,
    #branches.branch-trail-section-v2 .section-nav,
    #branches.branch-trail-section-v2 .section-tabs,
    #branches.branch-trail-section-v2 .branch-filter-row,
    #branches.branch-trail-section-v2 .branch-filter-tabs,
    #branches.branch-trail-section-v2 .branch-tabs {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 9px !important;
        overflow: visible !important;
        overflow-x: visible !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #branches.branch-trail-section-v2 .branch-section-nav > *,
    #branches.branch-trail-section-v2 .branch-nav > *,
    #branches.branch-trail-section-v2 .section-nav > *,
    #branches.branch-trail-section-v2 .section-tabs > *,
    #branches.branch-trail-section-v2 .branch-filter-row > *,
    #branches.branch-trail-section-v2 .branch-filter-tabs > *,
    #branches.branch-trail-section-v2 .branch-tabs > * {
        flex: 0 1 auto !important;
        width: auto !important;
        min-width: 118px !important;
        max-width: calc(50% - 8px) !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: normal !important;
    }
}

@media (max-width: 380px) {
    #branches.branch-trail-section-v2 .branch-section-nav > *,
    #branches.branch-trail-section-v2 .branch-nav > *,
    #branches.branch-trail-section-v2 .section-nav > *,
    #branches.branch-trail-section-v2 .section-tabs > *,
    #branches.branch-trail-section-v2 .branch-filter-row > *,
    #branches.branch-trail-section-v2 .branch-filter-tabs > *,
    #branches.branch-trail-section-v2 .branch-tabs > * {
        min-width: 104px !important;
        max-width: calc(50% - 7px) !important;
        font-size: 0.72rem !important;
    }
}

/* Branches mobile/tablet pass 3
   Restores mobile contact/badges, equalizes nav pills, and reinforces scroll lock. */

/* Stronger scroll lock fallback */
html.branch-page-locked,
body.branch-page-locked,
body.branch-overlay-open,
body.branch-photo-lightbox-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

/* Keep the branch overlay close pill visible */
#branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-close {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Mobile-specific fixes */
@media (max-width: 760px) {

    /* Restore contact block and badges in the branch click overlay */
    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-contact,
    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-badges {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        transform: none !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-contact {
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        width: 100% !important;
        margin-top: 10px !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-badges {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        width: 100% !important;
        margin-top: 10px !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-contact *,
    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-badges * {
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        transform: none !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-contact-row,
    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-contact-line {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px 12px !important;
        width: 100% !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-contact-chip,
    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-contact-icon,
    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-contact-number {
        display: inline-flex !important;
        align-items: center !important;
        white-space: nowrap !important;
    }

    /* Hide the label only. Do not hide numbers, icons, or chips. */
    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-contact-mark,
    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-contact-line > strong:first-child {
        display: none !important;
    }

    /* Make the 5 nav buttons look intentional.
       Equal-height wrapping pills prevent one two-line label from looking oversized. */
    #branches.branch-trail-section-v2 .branch-section-nav,
    #branches.branch-trail-section-v2 .branch-nav,
    #branches.branch-trail-section-v2 .section-nav,
    #branches.branch-trail-section-v2 .section-tabs,
    #branches.branch-trail-section-v2 .branch-filter-row,
    #branches.branch-trail-section-v2 .branch-filter-tabs,
    #branches.branch-trail-section-v2 .branch-tabs {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
        justify-content: center !important;
        gap: 8px !important;
        overflow: visible !important;
        overflow-x: visible !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #branches.branch-trail-section-v2 .branch-section-nav > *,
    #branches.branch-trail-section-v2 .branch-nav > *,
    #branches.branch-trail-section-v2 .section-nav > *,
    #branches.branch-trail-section-v2 .section-tabs > *,
    #branches.branch-trail-section-v2 .branch-filter-row > *,
    #branches.branch-trail-section-v2 .branch-filter-tabs > *,
    #branches.branch-trail-section-v2 .branch-tabs > * {
        flex: 0 1 calc(50% - 8px) !important;
        width: calc(50% - 8px) !important;
        min-width: 0 !important;
        max-width: calc(50% - 8px) !important;
        min-height: 46px !important;
        height: 46px !important;
        padding: 6px 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: normal !important;
        line-height: 1.05 !important;
        font-size: 0.68rem !important;
    }

    /* Center the fifth button cleanly */
    #branches.branch-trail-section-v2 .branch-section-nav > *:last-child:nth-child(odd),
    #branches.branch-trail-section-v2 .branch-nav > *:last-child:nth-child(odd),
    #branches.branch-trail-section-v2 .section-nav > *:last-child:nth-child(odd),
    #branches.branch-trail-section-v2 .section-tabs > *:last-child:nth-child(odd),
    #branches.branch-trail-section-v2 .branch-filter-row > *:last-child:nth-child(odd),
    #branches.branch-trail-section-v2 .branch-filter-tabs > *:last-child:nth-child(odd),
    #branches.branch-trail-section-v2 .branch-tabs > *:last-child:nth-child(odd) {
        flex-basis: min(210px, 58%) !important;
        width: min(210px, 58%) !important;
        max-width: min(210px, 58%) !important;
    }
}

@media (max-width: 380px) {
    #branches.branch-trail-section-v2 .branch-section-nav > *,
    #branches.branch-trail-section-v2 .branch-nav > *,
    #branches.branch-trail-section-v2 .section-nav > *,
    #branches.branch-trail-section-v2 .section-tabs > *,
    #branches.branch-trail-section-v2 .branch-filter-row > *,
    #branches.branch-trail-section-v2 .branch-filter-tabs > *,
    #branches.branch-trail-section-v2 .branch-tabs > * {
        font-size: 0.62rem !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
}

/* Overlay and Branches mobile cleanup v1 */

/* Global page lock for all overlays. Avoid fixed body positioning to prevent close-jump behavior. */
html.site-overlay-lock,
body.site-overlay-lock {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

/* Branch mobile contact fix:
   The real label is .branch-row-label.
   The numbers are inside .branch-contact-mark, so never hide .branch-contact-mark. */
@media (max-width: 760px) {
    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-row-label {
        display: none !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-contact,
    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-badges {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-contact {
        width: 100% !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        margin-top: 10px !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-badges {
        width: 100% !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        margin-top: 10px !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-contact-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px 12px !important;
        width: 100% !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-contact-mark,
    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-landline-mark,
    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-mobile-mark {
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        white-space: nowrap !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-contact-icon,
    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-contact-number,
    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-chip,
    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-badge,
    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-service-badge {
        display: inline-flex !important;
        align-items: center !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-contact-number {
        white-space: nowrap !important;
    }

    /* Neutralize the earlier wrong mobile rules that hid the number wrappers. */
    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-contact-mark {
        display: inline-flex !important;
    }

    /* Better 5-button mobile nav:
       2 columns, equal height, smaller text, centered final button. */
    #branches.branch-trail-section-v2 .branch-section-nav,
    #branches.branch-trail-section-v2 .branch-nav,
    #branches.branch-trail-section-v2 .section-nav,
    #branches.branch-trail-section-v2 .section-tabs,
    #branches.branch-trail-section-v2 .branch-filter-row,
    #branches.branch-trail-section-v2 .branch-filter-tabs,
    #branches.branch-trail-section-v2 .branch-tabs {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: stretch !important;
        gap: 8px !important;
        overflow: visible !important;
        overflow-x: visible !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #branches.branch-trail-section-v2 .branch-section-nav > *,
    #branches.branch-trail-section-v2 .branch-nav > *,
    #branches.branch-trail-section-v2 .section-nav > *,
    #branches.branch-trail-section-v2 .section-tabs > *,
    #branches.branch-trail-section-v2 .branch-filter-row > *,
    #branches.branch-trail-section-v2 .branch-filter-tabs > *,
    #branches.branch-trail-section-v2 .branch-tabs > * {
        flex: 0 1 calc(50% - 8px) !important;
        width: calc(50% - 8px) !important;
        max-width: calc(50% - 8px) !important;
        min-width: 0 !important;
        height: 48px !important;
        min-height: 48px !important;
        padding: 6px 7px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: normal !important;
        line-height: 1.02 !important;
        font-size: 0.64rem !important;
        letter-spacing: 0.04em !important;
    }

    #branches.branch-trail-section-v2 .branch-section-nav > *:last-child:nth-child(odd),
    #branches.branch-trail-section-v2 .branch-nav > *:last-child:nth-child(odd),
    #branches.branch-trail-section-v2 .section-nav > *:last-child:nth-child(odd),
    #branches.branch-trail-section-v2 .section-tabs > *:last-child:nth-child(odd),
    #branches.branch-trail-section-v2 .branch-filter-row > *:last-child:nth-child(odd),
    #branches.branch-trail-section-v2 .branch-filter-tabs > *:last-child:nth-child(odd),
    #branches.branch-trail-section-v2 .branch-tabs > *:last-child:nth-child(odd) {
        flex-basis: min(220px, 62%) !important;
        width: min(220px, 62%) !important;
        max-width: min(220px, 62%) !important;
    }
}

@media (max-width: 380px) {
    #branches.branch-trail-section-v2 .branch-section-nav > *,
    #branches.branch-trail-section-v2 .branch-nav > *,
    #branches.branch-trail-section-v2 .section-nav > *,
    #branches.branch-trail-section-v2 .section-tabs > *,
    #branches.branch-trail-section-v2 .branch-filter-row > *,
    #branches.branch-trail-section-v2 .branch-filter-tabs > *,
    #branches.branch-trail-section-v2 .branch-tabs > * {
        font-size: 0.58rem !important;
        letter-spacing: 0.03em !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
}

/* Branches mobile contact/nav final correction v1
   Hide only the Contact label on phone.
   Keep number wrappers, icons, service badges, and WhatsApp visible. */

@media (max-width: 760px) {
    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-row-label {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-contact {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px 12px !important;
        width: 100% !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-top: 10px !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-contact-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px 12px !important;
        width: 100% !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-contact-mark,
    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-landline-mark,
    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-mobile-mark {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 5px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        visibility: visible !important;
        opacity: 1 !important;
        white-space: nowrap !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-contact-icon,
    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-contact-number {
        display: inline-flex !important;
        align-items: center !important;
        visibility: visible !important;
        opacity: 1 !important;
        white-space: nowrap !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-badges {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        width: 100% !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-top: 10px !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-badges > * {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Keep mobile nav compact and balanced after the Knefe label wrap */
    #branches.branch-trail-section-v2 .branch-section-nav > *,
    #branches.branch-trail-section-v2 .branch-nav > *,
    #branches.branch-trail-section-v2 .section-nav > *,
    #branches.branch-trail-section-v2 .section-tabs > *,
    #branches.branch-trail-section-v2 .branch-filter-row > *,
    #branches.branch-trail-section-v2 .branch-filter-tabs > *,
    #branches.branch-trail-section-v2 .branch-tabs > * {
        min-height: 48px !important;
        height: 48px !important;
        line-height: 1.02 !important;
        font-size: 0.62rem !important;
    }
}

/* Branch contact label cleanup v1
   Hide the Contact label inside the branch detail overlay only.
   Keep phone numbers, mobile numbers, icons, WhatsApp icon, and service badges visible. */

#branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-contact .branch-row-label,
#branches.branch-trail-section-v2 .branch-overlay .branch-overlay-contact .branch-row-label,
.branch-overlay.is-open .branch-overlay-contact .branch-row-label,
.branch-overlay .branch-overlay-contact .branch-row-label {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    pointer-events: none !important;
}

/* Re-confirm the actual number wrappers stay visible */
#branches.branch-trail-section-v2 .branch-overlay.is-open .branch-contact-mark,
#branches.branch-trail-section-v2 .branch-overlay.is-open .branch-contact-number,
#branches.branch-trail-section-v2 .branch-overlay.is-open .branch-contact-icon {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Branch action safe order v1
   Direct JS order is Call, WhatsApp, Directions.
   This CSS only keeps the row compact on mobile. */

@media (max-width: 760px) {
    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-actions {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        margin-top: 10px !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-actions > * {
        flex: 0 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: nowrap !important;
    }
}

/* Phone landscape pass 1
   Target: phone landscape only.
   Do not affect desktop, tablet portrait, or phone portrait. */

@media (max-width: 980px) and (orientation: landscape) and (max-height: 600px) {

    /* Fix top-nav anchor landing in phone landscape.
       Previous scroll margins were too large, leaving the user in the previous section. */
    html {
        scroll-padding-top: 74px !important;
    }

    #hero,
    #selection,
    #brand-reel,
    #our-knefe,
    #occasions,
    #barista,
    #branches,
    #contact {
        scroll-margin-top: 74px !important;
    }

    /* Branch overlay: use landscape space horizontally instead of hiding details below. */
    #branches.branch-trail-section-v2 .branch-overlay.is-open {
        align-items: center !important;
        justify-content: center !important;
        padding: 12px !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-card {
        width: min(94vw, 900px) !important;
        height: min(84vh, 430px) !important;
        max-width: 94vw !important;
        max-height: 84vh !important;
        display: grid !important;
        grid-template-columns: minmax(250px, 48%) minmax(240px, 52%) !important;
        gap: 12px !important;
        padding: 12px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-media {
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        overflow: hidden !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-image {
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-photo-gallery {
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-photo-gallery-img {
        max-height: 100% !important;
        object-fit: contain !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-content {
        min-height: 0 !important;
        max-height: 100% !important;
        overflow-y: auto !important;
        padding: 6px 4px 6px 0 !important;
        gap: 6px !important;
        box-sizing: border-box !important;
        overscroll-behavior: contain !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-region {
        margin-bottom: 2px !important;
        font-size: 0.64rem !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open #branch-overlay-title {
        font-size: 1.05rem !important;
        line-height: 1.08 !important;
        margin: 0 86px 4px 0 !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-address,
    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-note {
        font-size: 0.72rem !important;
        line-height: 1.25 !important;
        margin: 0 !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-contact {
        margin-top: 6px !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-contact-row {
        gap: 6px 10px !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-contact-number {
        font-size: 0.72rem !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-badges {
        margin-top: 6px !important;
        gap: 6px !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-actions {
        margin-top: 8px !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 7px !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-actions > * {
        min-height: 34px !important;
        height: 34px !important;
        padding: 0 12px !important;
        font-size: 0.68rem !important;
        white-space: nowrap !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-close {
        position: fixed !important;
        top: 12px !important;
        right: 12px !important;
        z-index: 99999 !important;
    }

    /* Large photo viewer must be meaningfully larger than the in-overlay gallery in landscape. */
    #branches.branch-trail-section-v2 .branch-photo-lightbox.is-open {
        padding: 8px !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #branches.branch-trail-section-v2 .branch-photo-lightbox.is-open .branch-photo-lightbox-card {
        width: 96vw !important;
        height: 88vh !important;
        max-width: 96vw !important;
        max-height: 88vh !important;
        min-width: 0 !important;
        min-height: 0 !important;
    }

    #branches.branch-trail-section-v2 .branch-photo-lightbox.is-open .branch-photo-lightbox-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        padding: 6px !important;
        box-sizing: border-box !important;
    }

    #branches.branch-trail-section-v2 .branch-photo-lightbox.is-open .branch-photo-lightbox-close {
        top: 10px !important;
        right: 10px !important;
    }

    #branches.branch-trail-section-v2 .branch-photo-lightbox.is-open .branch-photo-lightbox-arrow {
        width: 38px !important;
        height: 38px !important;
    }
}

/* Phone landscape pass 2
   Keeps portrait and PC untouched.
   Landscape strategy:
   - lower anchor offset
   - larger in-overlay gallery
   - compact but readable branch details
   - no large-view dependency in landscape */

@media (max-width: 980px) and (orientation: landscape) and (max-height: 600px) {

    /* Anchor landing correction.
       Lower value = browser scrolls further down, reducing previous-section overlap. */
    html {
        scroll-padding-top: 36px !important;
    }

    #hero,
    #selection,
    #brand-reel,
    #our-knefe,
    #occasions,
    #barista,
    #branches,
    #contact {
        scroll-margin-top: 36px !important;
    }

    /* Branch overlay uses landscape width better */
    #branches.branch-trail-section-v2 .branch-overlay.is-open {
        padding: 8px !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-card {
        width: min(96vw, 940px) !important;
        height: min(86vh, 440px) !important;
        max-width: 96vw !important;
        max-height: 86vh !important;
        display: grid !important;
        grid-template-columns: minmax(330px, 61%) minmax(210px, 39%) !important;
        gap: 10px !important;
        padding: 10px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* Give gallery maximum useful room */
    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-media,
    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-image,
    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-photo-gallery {
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        overflow: hidden !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-photo-gallery-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        padding: 4px !important;
        box-sizing: border-box !important;
    }

    /* Details: not cramped, but compact enough to fit */
    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-content {
        min-height: 0 !important;
        max-height: 100% !important;
        overflow-y: auto !important;
        padding: 8px 0 8px 2px !important;
        gap: 9px !important;
        box-sizing: border-box !important;
        overscroll-behavior: contain !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-region {
        font-size: 0.64rem !important;
        margin: 0 !important;
        line-height: 1.15 !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open #branch-overlay-title {
        font-size: 1.04rem !important;
        line-height: 1.12 !important;
        margin: 0 84px 0 0 !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-address {
        font-size: 0.74rem !important;
        line-height: 1.35 !important;
        margin: 0 !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-contact {
        margin-top: 0 !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-contact-row {
        gap: 7px 10px !important;
        line-height: 1.25 !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-contact-number {
        font-size: 0.72rem !important;
        line-height: 1.25 !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-badges {
        margin-top: 0 !important;
        gap: 7px !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-actions {
        margin-top: 0 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 7px !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-actions > * {
        min-height: 34px !important;
        height: 34px !important;
        padding: 0 11px !important;
        font-size: 0.68rem !important;
        white-space: nowrap !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-note {
        font-size: 0.68rem !important;
        line-height: 1.25 !important;
        margin: 0 !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-close {
        position: fixed !important;
        top: 10px !important;
        right: 10px !important;
        height: 38px !important;
        min-width: 86px !important;
        z-index: 99999 !important;
    }

    /* In landscape, the in-overlay gallery is the main viewer.
       Do not encourage opening a second viewer that is not visually better. */
    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-photo-gallery-img {
        cursor: default !important;
    }
}

/* Phone landscape pass 3
   Landscape-only refinement.
   Strategy:
   - Branch gallery becomes the main viewer.
   - Details get more vertical breathing room.
   - Right-side wasted margin is reduced.
   - Separate full-view button/click is visually de-emphasized in landscape. */

@media (max-width: 980px) and (orientation: landscape) and (max-height: 600px) {

    /* Keep this low, but JS below will handle anchor precision more reliably. */
    html {
        scroll-padding-top: 28px !important;
    }

    #hero,
    #selection,
    #brand-reel,
    #our-knefe,
    #occasions,
    #barista,
    #branches,
    #contact {
        scroll-margin-top: 28px !important;
    }

    /* Wider overlay and more gallery room */
    #branches.branch-trail-section-v2 .branch-overlay.is-open {
        padding: 6px !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-card {
        width: 97vw !important;
        height: 88vh !important;
        max-width: 97vw !important;
        max-height: 88vh !important;
        display: grid !important;
        grid-template-columns: minmax(360px, 69%) minmax(190px, 31%) !important;
        gap: 8px !important;
        padding: 8px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* Gallery gets maximum useful space */
    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-media,
    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-image,
    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-photo-gallery {
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        overflow: hidden !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-photo-gallery-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        padding: 2px !important;
        box-sizing: border-box !important;
        cursor: default !important;
    }

    /* Right details: less wasted right margin, more vertical breathing room */
    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-content {
        min-height: 0 !important;
        max-height: 100% !important;
        overflow-y: auto !important;
        padding: 10px 0 10px 0 !important;
        gap: 12px !important;
        box-sizing: border-box !important;
        overscroll-behavior: contain !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-region {
        font-size: 0.64rem !important;
        line-height: 1.2 !important;
        margin: 0 !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open #branch-overlay-title {
        font-size: 1.02rem !important;
        line-height: 1.16 !important;
        margin: 0 82px 0 0 !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-address {
        font-size: 0.73rem !important;
        line-height: 1.45 !important;
        margin: 0 !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-contact {
        margin-top: 0 !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-contact-row {
        gap: 8px 10px !important;
        line-height: 1.35 !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-contact-mark {
        line-height: 1.35 !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-contact-number {
        font-size: 0.72rem !important;
        line-height: 1.35 !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-badges {
        margin-top: 0 !important;
        gap: 8px !important;
        line-height: 1.25 !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-actions {
        margin-top: 0 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-actions > * {
        min-height: 34px !important;
        height: 34px !important;
        padding: 0 11px !important;
        font-size: 0.67rem !important;
        white-space: nowrap !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-note {
        font-size: 0.68rem !important;
        line-height: 1.35 !important;
        margin: 0 !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-close {
        position: fixed !important;
        top: 8px !important;
        right: 8px !important;
        height: 38px !important;
        min-width: 86px !important;
        z-index: 99999 !important;
    }

    /* Landscape decision: the overlay gallery is the viewing mode.
       Hide the separate enlarged photo viewer if it somehow opens in landscape. */
    #branches.branch-trail-section-v2 .branch-photo-lightbox.is-open {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* Phone landscape pass 4
   Refines Branches landscape overlay after pass 3.
   Keeps anchor correction limited to top header nav through JS.
   Gives details more width, bigger text, and more vertical breathing room. */

@media (max-width: 980px) and (orientation: landscape) and (max-height: 600px) {

    #branches.branch-trail-section-v2 .branch-overlay.is-open {
        padding: 7px !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-card {
        width: 97vw !important;
        height: 88vh !important;
        max-width: 97vw !important;
        max-height: 88vh !important;
        display: grid !important;
        grid-template-columns: minmax(320px, 64%) minmax(230px, 36%) !important;
        gap: 12px !important;
        padding: 10px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-media,
    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-image,
    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-photo-gallery {
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        overflow: hidden !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-photo-gallery-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        padding: 3px !important;
        box-sizing: border-box !important;
        cursor: default !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-content {
        min-height: 0 !important;
        max-height: 100% !important;
        overflow-y: auto !important;
        padding: 12px 2px 12px 0 !important;
        gap: 14px !important;
        box-sizing: border-box !important;
        overscroll-behavior: contain !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-region {
        font-size: 0.68rem !important;
        line-height: 1.25 !important;
        margin: 0 !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open #branch-overlay-title {
        font-size: 1.12rem !important;
        line-height: 1.2 !important;
        margin: 0 82px 0 0 !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-address {
        font-size: 0.79rem !important;
        line-height: 1.55 !important;
        margin: 0 !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-contact {
        margin-top: 0 !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-contact-row {
        gap: 9px 12px !important;
        line-height: 1.45 !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-contact-mark {
        line-height: 1.45 !important;
        gap: 6px !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-contact-number {
        font-size: 0.78rem !important;
        line-height: 1.45 !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-badges {
        margin-top: 0 !important;
        gap: 9px !important;
        line-height: 1.35 !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-badges > * {
        font-size: 0.68rem !important;
        min-height: 28px !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-actions {
        margin-top: 0 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 9px !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-actions > * {
        min-height: 36px !important;
        height: 36px !important;
        padding: 0 13px !important;
        font-size: 0.72rem !important;
        white-space: nowrap !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-note {
        font-size: 0.72rem !important;
        line-height: 1.45 !important;
        margin: 0 !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-close {
        position: fixed !important;
        top: 8px !important;
        right: 8px !important;
        height: 38px !important;
        min-width: 86px !important;
        z-index: 99999 !important;
    }

    /* Keep landscape full-view disabled.
       The overlay gallery is the intended viewing mode on phone landscape. */
    #branches.branch-trail-section-v2 .branch-photo-lightbox.is-open {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* Phone landscape overlay spacing correction v1
   Gives the right-side branch details more width, larger text,
   and more vertical breathing room while keeping gallery large. */

@media (max-width: 980px) and (orientation: landscape) and (max-height: 600px) {

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-card {
        width: 97vw !important;
        height: 88vh !important;
        max-width: 97vw !important;
        max-height: 88vh !important;
        display: grid !important;
        grid-template-columns: minmax(300px, 60%) minmax(250px, 40%) !important;
        gap: 14px !important;
        padding: 10px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-content {
        min-height: 0 !important;
        max-height: 100% !important;
        overflow-y: auto !important;
        padding: 14px 4px 14px 0 !important;
        gap: 18px !important;
        box-sizing: border-box !important;
        overscroll-behavior: contain !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-region {
        font-size: 0.74rem !important;
        line-height: 1.35 !important;
        margin: 0 !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open #branch-overlay-title {
        font-size: 1.22rem !important;
        line-height: 1.28 !important;
        margin: 0 86px 0 0 !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-address {
        font-size: 0.86rem !important;
        line-height: 1.65 !important;
        margin: 0 !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-contact-row {
        gap: 10px 14px !important;
        line-height: 1.6 !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-contact-mark {
        line-height: 1.6 !important;
        gap: 7px !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-contact-number {
        font-size: 0.84rem !important;
        line-height: 1.6 !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-badges {
        gap: 10px !important;
        line-height: 1.45 !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-badges > * {
        font-size: 0.74rem !important;
        min-height: 30px !important;
        padding: 5px 10px !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-actions > * {
        min-height: 38px !important;
        height: 38px !important;
        padding: 0 14px !important;
        font-size: 0.76rem !important;
        white-space: nowrap !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-note {
        font-size: 0.78rem !important;
        line-height: 1.55 !important;
        margin: 0 !important;
    }

    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-photo-gallery-img {
        padding: 3px !important;
        object-fit: contain !important;
    }
}

/* Phone-only overlay scroll lock v1
   Safe version: phone/tablet only, no global touch-action:none.
   Locks the background only when an overlay-open body class exists. */

@media (max-width: 980px) {
    html.phone-overlay-scroll-lock,
    body.phone-overlay-scroll-lock {
        overflow: hidden !important;
        overscroll-behavior: none !important;
        height: 100% !important;
    }

    body.phone-overlay-scroll-lock {
        position: fixed !important;
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
    }
}

/* Branch overlay availability note spacing v1
   Phone landscape only.
   Adds breathing room above:
   "Product availability may vary by day and branch." */

@media (max-width: 980px) and (orientation: landscape) and (max-height: 600px) {
    #branches.branch-trail-section-v2 .branch-overlay.is-open .branch-overlay-note {
        margin-top: 12px !important;
        padding-top: 2px !important;
        display: block !important;
    }
}

/* Phone overlay no-jump correction v1
   Keeps phone overlay background locking but removes fixed-body snap on close. */

@media (max-width: 980px) {
    html.phone-overlay-scroll-lock,
    body.phone-overlay-scroll-lock {
        overflow: hidden !important;
        overscroll-behavior: none !important;
        height: auto !important;
    }

    body.phone-overlay-scroll-lock {
        position: static !important;
        width: auto !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
    }
}

/* Selection phone portrait nav compact v1
   Phone portrait only.
   Reduces the height of the Selection category image buttons.
   Does not touch anchors, JavaScript, PC, or phone landscape. */

@media (max-width: 760px) and (orientation: portrait) {
    #selection .selection-tabs {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 7px !important;
        margin-bottom: 12px !important;
    }

    #selection .selection-tabs .selection-tab,
    #selection .selection-tabs .selection-tab.is-active,
    #selection .selection-tabs .selection-tab:hover {
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        aspect-ratio: auto !important;
        padding: 6px 7px !important;
        border-radius: 13px !important;
        font-size: 0.64rem !important;
        line-height: 1.08 !important;
    }

    #selection .selection-tabs .selection-tab span,
    #selection .selection-tabs .selection-tab.is-active span {
        font-size: 0.64rem !important;
        line-height: 1.08 !important;
        padding: 0 !important;
        max-width: 100% !important;
    }

    #selection .selection-tabs .selection-tab::before,
    #selection .selection-tabs .selection-tab::after {
        border-radius: 13px !important;
    }
}

/* Selection phone landscape compact media v2
   Phone landscape only.
   Corrects v1:
   - restores side thumbnails to their previous usable size
   - only reduces the main Selection reel/image height
   - does not touch anchors, JavaScript, PC, or phone portrait */

@media (max-width: 980px) and (orientation: landscape) and (max-height: 600px) {
    #selection.selection-tabs-section {
        padding-top: 26px !important;
        padding-bottom: 34px !important;
    }

    #selection .selection-gallery {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(270px, 0.95fr) !important;
        gap: 18px !important;
        align-items: start !important;
        min-height: 0 !important;
    }

    /* Only this is intentionally reduced from the old tall landscape layout. */
    #selection .selection-feature {
        height: min(77vh, 390px) !important;
        min-height: 315px !important;
        max-height: 390px !important;
        align-self: start !important;
    }

    #selection .selection-feature img,
    #selection .selection-feature video,
    #selection .selection-main-image,
    #selection .selection-main-video,
    #selection .selection-video-fallback {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    #selection .selection-side {
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        gap: 10px !important;
        overflow: visible !important;
    }

    #selection .selection-thumbs,
    #selection #selection-thumbs {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        min-height: 0 !important;
        height: auto !important;
        margin-top: 2px !important;
        overflow: visible !important;
    }

    /* Restore side thumbnail proportions. */
    #selection .selection-thumb {
        aspect-ratio: 1.65 / 1 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        border-radius: 14px !important;
    }

    #selection .selection-thumb img,
    #selection .selection-thumb video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
}

/* Controlled global overlay lock v1
   Locks page background while approved site overlays are open.
   Safe approach:
   - all devices, including PC
   - no fixed body positioning
   - no touch-action:none
   - no broad generic modal guessing */

html.abd-overlay-lock,
body.abd-overlay-lock {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

/* Direct body-class fallback for overlays that already add body state */
body.branch-overlay-open,
body.branch-photo-lightbox-open,
body.knefe-overlay-open,
body.knefe-main-overlay-open,
body.barista-standard-overlay-open,
body.brand-reel-safe-overlay-open,
body.occasion-main-safe-overlay-open,
body.selection-main-safe-overlay-open,
body.hero-safe-overlay-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

/* Allow normal interaction inside overlay content */
.abd-overlay-lock .branch-overlay-card,
.abd-overlay-lock .branch-photo-lightbox-card,
.abd-overlay-lock .main-media-lightbox-stage,
.abd-overlay-lock .occasion-lightbox-media,
.abd-overlay-lock .brand-reel-safe-overlay-card,
.abd-overlay-lock .selection-main-safe-overlay-card,
.abd-overlay-lock .occasion-main-safe-overlay-card,
.abd-overlay-lock .hero-safe-overlay-card,
.abd-overlay-lock .knefe-overlay-card,
.abd-overlay-lock .knefe-main-overlay-card,
.abd-overlay-lock .barista-standard-overlay-card {
    overscroll-behavior: contain !important;
}


/* =========================================================
   L'abeille D'or - Contact Mini Icons v3
   Contact-only.
   Removes visible text labels and uses compact phone/mobile/WhatsApp icons
   similar in spirit to the Branches contact badges, without touching Branches.
   ========================================================= */

#contact .contact-clean-list {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin-top: 22px !important;
  width: 100% !important;
}

#contact .contact-clean-row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
}

#contact .contact-clean-label,
#contact .contact-clean-badge {
  display: none !important;
}

#contact .contact-mini-icon,
#contact .contact-clean-whatsapp {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
}

#contact .contact-mini-icon {
  color: #b9822b !important;
  background: rgba(198, 146, 62, 0.10) !important;
  border: 1px solid rgba(198, 146, 62, 0.20) !important;
}

#contact .contact-mini-icon svg {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
  fill: currentColor !important;
}

#contact .contact-clean-whatsapp {
  margin-left: 0 !important;
  color: #22a861 !important;
  background: rgba(34, 168, 97, 0.10) !important;
  border: 1px solid rgba(34, 168, 97, 0.22) !important;
}

#contact .contact-clean-whatsapp svg {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
  fill: currentColor !important;
}

#contact .contact-clean-number {
  color: #4a3024 !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

#contact .contact-clean-number:hover {
  color: #8a5a17 !important;
}

#contact .contact-clean-email-list {
  margin-top: 18px !important;
}

#contact .contact-clean-email-list-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px 18px !important;
}

#contact .contact-clean-email-list .contact-card-link {
  margin-top: 0 !important;
  font-size: 0.92rem !important;
}

@media (max-width: 640px) {
  #contact .contact-clean-list {
    gap: 9px !important;
  }

  #contact .contact-clean-row {
    gap: 7px !important;
  }

  #contact .contact-mini-icon,
  #contact .contact-clean-whatsapp {
    width: 23px !important;
    height: 23px !important;
    min-width: 23px !important;
  }

  #contact .contact-mini-icon svg,
  #contact .contact-clean-whatsapp svg {
    width: 13px !important;
    height: 13px !important;
  }

  #contact .contact-clean-number {
    font-size: 0.88rem !important;
  }

  #contact .contact-clean-email-list-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  #contact .contact-clean-email-list .contact-card-link {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}


/* =========================================================
   L'abeille D'or - Contact Mini Icons v3 Reapplied
   Contact-only.
   Icon badges for phone, mobile, and WhatsApp.
   Does not touch Branches or other sections.
   ========================================================= */

#contact .contact-clean-list {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin-top: 22px !important;
  width: 100% !important;
}

#contact .contact-clean-row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
}

#contact .contact-clean-label,
#contact .contact-clean-badge,
#contact .contact-detail-type,
#contact .contact-number-separator {
  display: none !important;
}

#contact .contact-mini-icon,
#contact .contact-clean-whatsapp {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
}

#contact .contact-mini-icon {
  color: #b9822b !important;
  background: rgba(198, 146, 62, 0.10) !important;
  border: 1px solid rgba(198, 146, 62, 0.20) !important;
}

#contact .contact-mini-icon svg {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
  fill: currentColor !important;
}

#contact .contact-clean-whatsapp {
  margin-left: 0 !important;
  color: #22a861 !important;
  background: rgba(34, 168, 97, 0.10) !important;
  border: 1px solid rgba(34, 168, 97, 0.22) !important;
}

#contact .contact-clean-whatsapp svg {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
  fill: currentColor !important;
}

#contact .contact-clean-number {
  color: #4a3024 !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

#contact .contact-clean-number:hover {
  color: #8a5a17 !important;
}

#contact .contact-clean-email-list {
  margin-top: 18px !important;
}

#contact .contact-clean-email-list-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px 18px !important;
}

#contact .contact-clean-email-list .contact-card-link {
  margin-top: 0 !important;
  font-size: 0.92rem !important;
}

@media (max-width: 640px) {
  #contact .contact-clean-list {
    gap: 9px !important;
  }

  #contact .contact-clean-row {
    gap: 7px !important;
  }

  #contact .contact-mini-icon,
  #contact .contact-clean-whatsapp {
    width: 23px !important;
    height: 23px !important;
    min-width: 23px !important;
  }

  #contact .contact-mini-icon svg,
  #contact .contact-clean-whatsapp svg {
    width: 13px !important;
    height: 13px !important;
  }

  #contact .contact-clean-number {
    font-size: 0.88rem !important;
  }

  #contact .contact-clean-email-list-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  #contact .contact-clean-email-list .contact-card-link {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}

/* =========================================================
   L'abeille D'or - Occasions Intro Width Tuning v1
   Date: 2026-06-08
   Purpose:
   Let the Occasions intro paragraph breathe slightly wider on desktop
   so the updated text balances better, without touching mobile/tablet,
   tabs, anchors, reels, overlays, or locked section behavior.
   ========================================================= */

@media (min-width: 981px) {
    .occasion-atelier-heading {
        max-width: 900px !important;
    }

    .occasion-atelier-heading p:not(.eyebrow) {
        max-width: 880px !important;
    }
}

@media (min-width: 981px) and (max-height: 780px) {
    .occasion-atelier-heading {
        max-width: 860px !important;
    }

    .occasion-atelier-heading p:not(.eyebrow) {
        max-width: 840px !important;
    }
}

/* =========================================================
   L'abeille D'or - Occasions Intro Width Tuning v2
   Date: 2026-06-08
   Purpose:
   Slightly widen the Occasions intro paragraph on desktop so the
   final word does not wrap alone onto a third line.
   Desktop only. Does not touch mobile/tablet, tabs, anchors, reels,
   overlays, or locked section behavior.
   ========================================================= */

@media (min-width: 981px) {
    .occasion-atelier-heading {
        max-width: 980px !important;
    }

    .occasion-atelier-heading p:not(.eyebrow) {
        max-width: 960px !important;
    }
}

@media (min-width: 981px) and (max-height: 780px) {
    .occasion-atelier-heading {
        max-width: 940px !important;
    }

    .occasion-atelier-heading p:not(.eyebrow) {
        max-width: 920px !important;
    }
}

/* =========================================================
   L'abeille D'or - Hide Header Contact CTA Mobile Tablet Only v1
   Date: 2026-06-10
   Purpose:
   Keep the top header Contact button visible on PC,
   but hide it on tablet and phone.
   The Hero Contact button and section links remain unchanged.
   ========================================================= */

@media (max-width: 980px) {
    .header-cta {
        display: none !important;
    }
}

/*
   L'abeille D'or - Branches 10-inch Tablet Landscape Map v1
   Purpose:
   Show the Branches bee trail/map on tablet landscape layouts that are
   wide/tall enough, while keeping phones on the simple branch list.
*/
@media (min-width: 800px) and (max-width: 980px) and (orientation: landscape) and (min-height: 540px) {
    #branches.branch-trail-section-v2 .branch-trail-map {
        display: block !important;
        min-height: 430px !important;
        margin-top: 14px !important;
    }

    #branches.branch-trail-section-v2 .branch-mobile-list {
        display: none !important;
    }
}

/*
   L'abeille D'or - Branches 10-inch Tablet Landscape Map v2
   Purpose:
   When JS confirms a compact tablet landscape profile, show the bee trail/map
   instead of the mobile branch list. Phones remain on the list layout.
*/
body.branches-tablet-map-landscape #branches.branch-trail-section-v2 .branch-trail-map {
    display: block !important;
    min-height: 430px !important;
    margin-top: 14px !important;
}

body.branches-tablet-map-landscape #branches.branch-trail-section-v2 .branch-mobile-list {
    display: none !important;
}

/*
   L'abeille D'or - Hero 10-inch Tablet Landscape Refinement v1
   Scope:
   Detected 10-inch tablet landscape profile only.
   Purpose:
   Lift the Hero reel slightly, improve vertical balance, and keep Hero buttons
   side by side without changing phone or PC layouts.
*/
body.branches-tablet-map-landscape #hero.hero,
body.branches-tablet-map-landscape .hero {
    padding-top: 54px !important;
    padding-bottom: 18px !important;
    gap: 18px !important;
    align-items: start !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(250px, 0.95fr) !important;
}

body.branches-tablet-map-landscape .hero-content,
body.branches-tablet-map-landscape .hero-text,
body.branches-tablet-map-landscape .hero-copy {
    align-self: start !important;
}

body.branches-tablet-map-landscape .hero-image-wrap,
body.branches-tablet-map-landscape .hero-video-wrap {
    align-self: start !important;
    transform: translateY(-8px) !important;
    height: min(50vh, 250px) !important;
    min-height: 205px !important;
    max-height: 250px !important;
}

body.branches-tablet-map-landscape .hero-actions,
body.branches-tablet-map-landscape .hero-cta,
body.branches-tablet-map-landscape .hero-buttons {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    align-items: center !important;
}

body.branches-tablet-map-landscape .hero-actions .btn,
body.branches-tablet-map-landscape .hero-cta .btn,
body.branches-tablet-map-landscape .hero-buttons .btn,
body.branches-tablet-map-landscape .hero-actions a,
body.branches-tablet-map-landscape .hero-cta a,
body.branches-tablet-map-landscape .hero-buttons a {
    white-space: nowrap !important;
    flex: 0 0 auto !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    font-size: 0.72rem !important;
}

/*
   L'abeille D'or - Barista Landscape Touch Thumbs v1
   Scope:
   Phone and tablet landscape touch devices only.
   Purpose:
   Restore Barista thumbnail labels as top-left signature overlays and make
   thumbnails more square-like in landscape.
   Does not affect portrait phone/tablet or PC/laptop.
*/
@media (orientation: landscape) and (hover: none) and (pointer: coarse) and (max-width: 1180px) and (max-height: 720px) {

    #barista .barista-thumbs {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
        padding-top: 12px !important;
        margin-top: 8px !important;
        margin-bottom: 8px !important;
        overflow: visible !important;
    }

    #barista .barista-thumb {
        position: relative !important;
        display: block !important;
        flex-direction: initial !important;
        gap: 0 !important;
        aspect-ratio: auto !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    #barista .barista-thumb::before,
    #barista .barista-thumb::after {
        display: none !important;
        content: none !important;
    }

    #barista .barista-thumb-media {
        position: relative !important;
        z-index: 1 !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        border-radius: 15px !important;
        overflow: hidden !important;
        background: var(--barista-thumb, none) center / cover no-repeat !important;
        box-shadow: 0 10px 22px rgba(74, 47, 34, 0.10) !important;
        outline: 1px solid rgba(198, 146, 62, 0.10) !important;
        outline-offset: -1px !important;
    }

    #barista .barista-thumb-media img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
        border-radius: inherit !important;
    }

    #barista .barista-thumb-label {
        position: absolute !important;
        top: -8px !important;
        left: -2px !important;
        right: auto !important;
        bottom: auto !important;
        z-index: 12 !important;

        display: inline-block !important;
        min-height: 0 !important;
        max-width: 96px !important;
        padding: 0 !important;
        margin: 0 !important;

        background: transparent !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;

        font-family: "Segoe Script", "Brush Script MT", "Cormorant Garamond", Georgia, serif !important;
        font-size: 0.9rem !important;
        font-style: italic !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        letter-spacing: -0.01em !important;

        color: #5b351f !important;
        text-align: left !important;
        white-space: nowrap !important;
        transform: rotate(-8deg) !important;
        transform-origin: left center !important;

        text-shadow:
            0 1px 0 rgba(255, 250, 243, 0.85),
            0 6px 14px rgba(74, 47, 34, 0.16) !important;

        pointer-events: none !important;
    }

    #barista .barista-thumb:nth-child(2) .barista-thumb-label,
    #barista .barista-thumb:nth-child(5) .barista-thumb-label {
        transform: rotate(-6deg) !important;
    }

    #barista .barista-thumb:nth-child(3) .barista-thumb-label,
    #barista .barista-thumb:nth-child(6) .barista-thumb-label {
        transform: rotate(-9deg) !important;
    }
}

/* =========================================================
   L'abeille D'or - Header/Nav Consolidated Stable v9
   Scope:
   - Header/nav sticky behavior.
   - Header-to-Hero visual background blending.
   - PC, phone and tablet only through header/Hero blend rules.
   - Does not modify website sections, branch map, bee behavior,
     Barista layout, contact cards, admin dashboard, media, SSL or proxy.

   Cleanup purpose:
   Replaces old stacked header/Hero experiments:
   - Hero Lift v1
   - Unified Header + Hero Background v2
   - Header Solid Default Background v1
   - Header Blended Solid Background v2
   - Header Mobile Tablet Blend v3
   - Header Mobile Tablet Gradient Match v4
   - Header Mobile Portrait Seam Blend v8
   ========================================================= */

/* Keep the approved warm page canvas in one place */
body {
    background:
        radial-gradient(circle at 88% 18%, rgba(255, 250, 243, 0.92), transparent 36rem),
        radial-gradient(circle at 8% 22%, rgba(232, 195, 122, 0.18), transparent 34rem),
        linear-gradient(90deg, #f6ead7 0%, #fbf1e3 38%, #fff8ed 74%, #fffaf3 100%) !important;
}

/* Base header: sticky, solid, below overlays */
.site-header,
.site-header:not(.is-scrolled),
.site-header.is-scrolled {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;

    background:
        linear-gradient(
            90deg,
            #f6ead7 0%,
            #fbf1e3 42%,
            #fff8ed 78%,
            #fffaf3 100%
        ) !important;

    border-bottom: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    isolation: isolate !important;
}

.site-header::after,
.site-header.is-scrolled::after {
    display: none !important;
    content: none !important;
}

.site-header .container.header-inner,
.site-header .header-inner {
    position: relative !important;
    z-index: 2 !important;
}

/* Preserve approved PC header/Hero visual relationship */
@media (min-width: 981px) {
    .site-header {
        margin-bottom: -34px !important;
    }

    #hero.hero,
    .hero {
        padding-top: 38px !important;
        background: transparent !important;
    }
}

/* Phone/tablet: no negative header overlap */
@media (max-width: 980px) {
    .site-header {
        margin-bottom: 0 !important;
    }

    #hero.hero,
    .hero {
        background: transparent !important;
    }

    /* Top of page: warmer header to sit closer to mobile Hero start */
    .site-header:not(.is-scrolled) {
        background:
            radial-gradient(circle at 18% 0%, rgba(201, 143, 63, 0.13), transparent 38%),
            linear-gradient(
                180deg,
                rgba(255, 248, 233, 0.98) 0%,
                rgba(250, 239, 220, 0.96) 48%,
                rgba(248, 236, 216, 0.95) 100%
            ) !important;
    }

    /* After scroll: normal page/header blend */
    .site-header.is-scrolled {
        background:
            linear-gradient(
                90deg,
                #f6ead7 0%,
                #fbf1e3 42%,
                #fff8ed 78%,
                #fffaf3 100%
            ) !important;
    }
}

/* Phone/tablet portrait: keep a soft blend, but avoid layout changes */
@media (max-width: 980px) and (orientation: portrait) {
    .site-header:not(.is-scrolled)::after {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: -64px !important;
        height: 64px !important;
        pointer-events: none !important;
        opacity: 1 !important;
        z-index: 1 !important;
        background:
            linear-gradient(
                180deg,
                rgba(248, 236, 216, 0.98) 0%,
                rgba(248, 236, 216, 0.92) 34%,
                rgba(248, 236, 216, 0.70) 66%,
                rgba(248, 236, 216, 0.24) 88%,
                rgba(248, 236, 216, 0) 100%
            ) !important;
    }

    /* Preserve the previous mobile portrait Hero breathing room without
       overriding landscape/tablet-specific Hero rules. */
    #hero.hero,
    .hero {
        padding-top: 34px !important;
    }
}

/* Phone/tablet landscape: keep the improved lighter feather */
@media (max-width: 980px) and (orientation: landscape) {
    .site-header:not(.is-scrolled)::after {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: -32px !important;
        height: 32px !important;
        pointer-events: none !important;
        opacity: 1 !important;
        z-index: 1 !important;
        background:
            linear-gradient(
                180deg,
                rgba(248, 236, 216, 0.93) 0%,
                rgba(248, 236, 216, 0.70) 36%,
                rgba(248, 236, 216, 0.30) 74%,
                rgba(248, 236, 216, 0) 100%
            ) !important;
    }
}

/* Touch landscape sticky reinforcement only */
@media (max-width: 980px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
    .site-header,
    .site-header:not(.is-scrolled),
    .site-header.is-scrolled {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 0 !important;
        transform: translateZ(0) !important;
    }

    body {
        overflow-x: clip !important;
    }
}

@supports not (overflow-x: clip) {
    @media (max-width: 980px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
        body {
            overflow-x: hidden !important;
        }
    }
}

/* =========================================================
   End Header/Nav Consolidated Stable v9
   ========================================================= */

/* =========================================================
   L'abeille D'or - Tap Scan Real QR Asset Size Fix v2
   Scope:
   - Digital Menu Tap/Scan QR buttons only.
   - Fixes real QR image being trapped inside the old fake QR grid.
   - Does not modify header/nav, Hero, Branches, Barista media,
     contact cards, Orders overlay, admin dashboard, SSL or proxy.
   ========================================================= */

.digital-menu-square-qr {
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
    background: #fff8ed !important;
    border: 1px solid rgba(198, 146, 62, 0.24) !important;
}

.digital-menu-square-qr span {
    display: none !important;
}

.digital-menu-square-qr-img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    padding: 5px !important;
    border-radius: inherit !important;
    background: #fff8ed !important;
    transform-origin: center center !important;
}

.digital-menu-square-button:hover .digital-menu-square-qr-img {
    transform: scale(1.035) !important;
}

@media (max-width: 640px) {
    .digital-menu-square-qr-img {
        padding: 4px !important;
    }
}

/* =========================================================
   End Tap Scan Real QR Asset Size Fix v2
   ========================================================= */

/* =========================================================
   L'abeille D'or - Tap Scan QR Size Tune v3
   Scope:
   - Digital Menu Tap/Scan QR buttons only.
   - Slightly enlarges the inner beige QR frame and QR image.
   - Does not modify header/nav, Hero, Branches, Barista media,
     contact cards, Orders overlay, admin dashboard, SSL or proxy.
   ========================================================= */

.digital-menu-selection-square .digital-menu-square-qr,
.digital-menu-barista-square .digital-menu-square-qr {
    transform: scale(1.12) !important;
    transform-origin: center center !important;
}

.digital-menu-selection-square .digital-menu-square-qr-img,
.digital-menu-barista-square .digital-menu-square-qr-img {
    padding: 3px !important;
}

.digital-menu-selection-square .digital-menu-square-caption,
.digital-menu-barista-square .digital-menu-square-caption {
    margin-top: 12px !important;
}

@media (max-width: 640px) {
    .digital-menu-selection-square .digital-menu-square-qr,
    .digital-menu-barista-square .digital-menu-square-qr {
        transform: scale(1.08) !important;
    }

    .digital-menu-selection-square .digital-menu-square-caption,
    .digital-menu-barista-square .digital-menu-square-caption {
        margin-top: 10px !important;
    }
}

/* =========================================================
   End Tap Scan QR Size Tune v3
   ========================================================= */

/* =========================================================
   L'abeille D'or - Touch Landscape Header Final Behavior v3
   Scope:
   - Phone and tablet landscape touch screens only.
   - Header scrolls away instead of staying sticky.
   - Portrait phone/tablet remain sticky through Header/Nav v9.
   - PC/laptop remains sticky through Header/Nav v9.
   - Removes dependency on the tablet landscape fixed paint shield.
   - Does not modify QR, Orders, Branches logic, Barista media, Hero,
     admin dashboard, SSL or proxy.

   Final behavior:
   - PC/laptop: sticky header.
   - Phone portrait: sticky header.
   - Tablet portrait: sticky header.
   - Phone landscape: header scrolls away.
   - Tablet landscape: header scrolls away.
   ========================================================= */

@media (orientation: landscape) and (hover: none) and (pointer: coarse) and (max-width: 1180px) and (max-height: 720px) {
    body::before,
    body.branches-tablet-map-landscape::before {
        display: none !important;
        content: none !important;
        height: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .site-header,
    .site-header:not(.is-scrolled),
    .site-header.is-scrolled,
    body.branches-tablet-map-landscape .site-header,
    body.branches-tablet-map-landscape .site-header:not(.is-scrolled),
    body.branches-tablet-map-landscape .site-header.is-scrolled {
        position: relative !important;
        top: auto !important;
        z-index: 1000 !important;
        margin-bottom: 0 !important;
        transform: none !important;
        will-change: auto !important;
    }

    .site-header::before,
    .site-header::after,
    .site-header:not(.is-scrolled)::before,
    .site-header:not(.is-scrolled)::after,
    .site-header.is-scrolled::before,
    .site-header.is-scrolled::after {
        display: none !important;
        content: none !important;
        height: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* =========================================================
   End Touch Landscape Header Final Behavior v3
   ========================================================= */

/* =========================================================
   L'abeille D'or - Orders Assistance Interactive Email Form v2
   Scope:
   - Orders assistance email click flow only.
   - Visitor fills callback/request details, then email client opens.
   - Does not modify QR, header/nav, Hero, Branches, Barista,
     admin dashboard, SSL or proxy.
   ========================================================= */

.orders-email-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 230000 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 22px !important;
}

.orders-email-overlay.is-open {
    display: flex !important;
}

.orders-email-overlay-backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(38, 24, 15, 0.58) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.orders-email-dialog {
    position: relative !important;
    z-index: 1 !important;
    width: min(100%, 680px) !important;
    max-height: min(88vh, 760px) !important;
    overflow: auto !important;
    padding: clamp(22px, 4vw, 34px) !important;
    border-radius: 30px !important;
    background:
        radial-gradient(circle at 16% 0%, rgba(232, 195, 122, 0.22), transparent 34%),
        linear-gradient(180deg, rgba(255, 250, 243, 0.98), rgba(250, 239, 220, 0.98)) !important;
    color: #4a2f22 !important;
    border: 1px solid rgba(198, 146, 62, 0.24) !important;
    box-shadow: 0 28px 90px rgba(38, 24, 15, 0.30) !important;
}

.orders-email-close {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 999px !important;
    border: 0 !important;
    background: rgba(74, 47, 34, 0.10) !important;
    color: #4a2f22 !important;
    font-size: 1.45rem !important;
    line-height: 1 !important;
    cursor: pointer !important;
}

.orders-email-eyebrow {
    margin: 0 0 8px !important;
    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: 0.72rem !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: #a86e2d !important;
}

.orders-email-dialog h2 {
    margin: 0 42px 12px 0 !important;
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: clamp(2rem, 5.4vw, 3rem) !important;
    line-height: 1.02 !important;
    font-weight: 700 !important;
    letter-spacing: -0.035em !important;
    color: #2f2118 !important;
}

.orders-email-intro {
    margin: 0 0 18px !important;
    max-width: 560px !important;
    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: 0.95rem !important;
    line-height: 1.55 !important;
    color: rgba(74, 47, 34, 0.76) !important;
}

.orders-assistance-form {
    margin: 0 !important;
}

.orders-form-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.orders-form-field {
    display: grid !important;
    gap: 6px !important;
    margin: 0 !important;
}

.orders-form-wide {
    grid-column: 1 / -1 !important;
}

.orders-form-field span {
    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: 0.76rem !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: rgba(74, 47, 34, 0.82) !important;
}

.orders-form-field em {
    font-style: normal !important;
    font-size: 0.66rem !important;
    letter-spacing: 0.04em !important;
    color: #a86e2d !important;
}

.orders-form-field input,
.orders-form-field select,
.orders-form-field textarea {
    width: 100% !important;
    min-height: 44px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(198, 146, 62, 0.24) !important;
    background: rgba(255, 250, 243, 0.82) !important;
    color: #4a2f22 !important;
    padding: 11px 13px !important;
    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: 0.9rem !important;
    line-height: 1.35 !important;
    outline: none !important;
}

.orders-form-field textarea {
    min-height: 96px !important;
    resize: vertical !important;
}

.orders-form-field input:focus,
.orders-form-field select:focus,
.orders-form-field textarea:focus {
    border-color: rgba(198, 146, 62, 0.72) !important;
    box-shadow: 0 0 0 3px rgba(198, 146, 62, 0.14) !important;
}

.orders-form-field.is-invalid input,
.orders-form-field.is-invalid select,
.orders-form-field.is-invalid textarea {
    border-color: rgba(160, 55, 42, 0.72) !important;
    box-shadow: 0 0 0 3px rgba(160, 55, 42, 0.12) !important;
}

.orders-form-error {
    min-height: 20px !important;
    margin: 10px 0 0 !important;
    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: 0.82rem !important;
    line-height: 1.35 !important;
    color: #9b382d !important;
    font-weight: 700 !important;
}

.orders-email-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
    margin-top: 8px !important;
}

.orders-email-proceed,
.orders-email-secondary {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 11px 18px !important;
    border-radius: 999px !important;
    font-family: "Montserrat", Arial, sans-serif !important;
    font-weight: 800 !important;
    font-size: 0.88rem !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

.orders-email-proceed {
    background: #4a2f22 !important;
    color: #fff !important;
    border: 1px solid #4a2f22 !important;
}

.orders-email-secondary {
    background: rgba(255, 250, 243, 0.70) !important;
    color: #4a2f22 !important;
    border: 1px solid rgba(198, 146, 62, 0.26) !important;
}

body.orders-email-overlay-open {
    overflow: hidden !important;
}

@media (max-width: 640px) {
    .orders-email-overlay {
        padding: 12px !important;
        align-items: flex-end !important;
    }

    .orders-email-dialog {
        max-height: 90vh !important;
        border-radius: 26px !important;
        padding: 24px 16px !important;
    }

    .orders-email-dialog h2 {
        font-size: clamp(1.75rem, 8.4vw, 2.25rem) !important;
    }

    .orders-form-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .orders-email-actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .orders-email-proceed,
    .orders-email-secondary {
        width: 100% !important;
    }
}

/* =========================================================
   End Orders Assistance Interactive Email Form v2
   ========================================================= */

/* =========================================================
   L'abeille D'or - Orders Overlay Background Scroll Lock v2
   Scope:
   - Locks background page scrolling while Orders overlay is open.
   - Restores page position instantly when overlay closes.
   ========================================================= */

html.orders-email-overlay-locked,
body.orders-email-overlay-open,
body.orders-email-scroll-locked {
    overflow: hidden !important;
    overscroll-behavior: contain !important;
}

html.orders-email-overlay-restoring,
body.orders-email-overlay-restoring {
    scroll-behavior: auto !important;
}

body.orders-email-scroll-locked {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
}

#orders-email-overlay.is-open {
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
}

@supports (height: 100dvh) {
    #orders-email-overlay.is-open {
        max-height: 100dvh;
    }
}

/* =========================================================
   End Orders Overlay Background Scroll Lock v2
   ========================================================= */


/*
   L'abeille D'or - Admin Lite v1.6 Order Online Tile
   Scope:
   Public Order Online QR tile beside the existing Digital Menu tile.
   Safety:
   Hidden unless Admin Lite orderOnline.enabled=true.
   Blood red accent is used on the tile only; QR remains high contrast for scanning.
*/
.abd-order-online-square[hidden] {
    display: none !important;
}

.abd-action-tiles-wrap.abd-has-order-online {
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 12px !important;
    width: auto !important;
    max-width: min(100%, 390px) !important;
}

.abd-action-tiles-wrap.abd-has-order-online .digital-menu-square-button {
    flex: 0 0 auto !important;
}

.abd-order-online-square {
    border-color: rgba(122, 30, 44, 0.72) !important;
    background:
        radial-gradient(circle at 50% 18%, rgba(122, 30, 44, 0.24), transparent 44%),
        linear-gradient(145deg, rgba(86, 24, 30, 0.98), rgba(43, 20, 11, 0.98)) !important;
    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(255, 217, 154, 0.12) inset !important;
}

.abd-order-online-square .digital-menu-corner-label {
    color: #ffd99a !important;
    background: rgba(122, 30, 44, 0.34) !important;
    border-color: rgba(255, 217, 154, 0.28) !important;
}

.abd-order-online-qr {
    background: #fff7e8 !important;
    border-color: rgba(122, 30, 44, 0.62) !important;
}

.abd-order-online-helper {
    display: block;
    max-width: 112px;
    margin: 2px auto 0;
    color: rgba(255, 247, 232, 0.72);
    font-size: 0.58rem;
    line-height: 1.12;
    font-family: Arial, sans-serif;
    text-align: center;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

@media (max-width: 760px) {
    .abd-action-tiles-wrap.abd-has-order-online {
        flex-direction: column !important;
        gap: 10px !important;
        max-width: 180px !important;
    }

    .abd-order-online-helper {
        display: none !important;
    }
}

@media (orientation: landscape) and (hover: none) and (pointer: coarse) and (max-height: 720px) {
    .abd-order-online-helper {
        display: none !important;
    }
}

/*
   ABD_ORDER_ONLINE_EMERGENCY_HIDE_V1
   Temporary safety hide after v1.6 Order Online tile visual test.
   Keeps /order/ available but removes the public homepage tile.
*/
[data-order-online-tile],
.abd-order-online-square {
    display: none !important;
    visibility: hidden !important;
}

.abd-action-tiles-wrap {
    display: block !important;
    max-width: none !important;
}

/*
   ABD_ORDER_ONLINE_FINAL_TWIN_TILE_V1
   Final public layout for Digital Menu + Order Online.
   Equal visual weight. No helper text inside tiles.
   Order Online uses blood red accents while QR remains scan-safe.
*/

/* Disabled or unavailable state stays hidden. */
#selection [data-order-online-tile][hidden],
#selection .abd-order-online-square[hidden] {
    display: none !important;
    visibility: hidden !important;
}

/* Enabled state: equal twin tiles. */
#selection .abd-action-tiles-wrap.abd-has-order-online {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 12px !important;
    width: min(100%, 340px) !important;
    max-width: 340px !important;
}

/* Compact equal cards only when Order Online is enabled. */
#selection .abd-action-tiles-wrap.abd-has-order-online .digital-menu-selection-square {
    width: 164px !important;
    height: 164px !important;
    min-width: 0 !important;
    min-height: 164px !important;
    padding: 20px 12px 12px !important;
    border-radius: 22px !important;
}

#selection .abd-action-tiles-wrap.abd-has-order-online .digital-menu-square-qr {
    width: 104px !important;
    height: 104px !important;
    border-radius: 18px !important;
}

#selection .abd-action-tiles-wrap.abd-has-order-online .digital-menu-square-qr-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

#selection .abd-action-tiles-wrap.abd-has-order-online .digital-menu-corner-label {
    font-size: 0.58rem !important;
    line-height: 1 !important;
    padding: 6px 10px !important;
    max-width: 132px !important;
    white-space: nowrap !important;
}

#selection .abd-action-tiles-wrap.abd-has-order-online .digital-menu-square-caption {
    font-size: 0.62rem !important;
    letter-spacing: 0.11em !important;
    margin-top: 7px !important;
}

/* Override emergency hide only when enabled class exists. */
#selection .abd-action-tiles-wrap.abd-has-order-online .abd-order-online-square,
#selection .abd-action-tiles-wrap.abd-has-order-online [data-order-online-tile] {
    display: flex !important;
    visibility: visible !important;
}

/* Order Online visual identity. */
#selection .abd-action-tiles-wrap.abd-has-order-online .abd-order-online-square {
    border-color: rgba(122, 30, 44, 0.78) !important;
    background:
        radial-gradient(circle at 50% 18%, rgba(122, 30, 44, 0.28), transparent 42%),
        linear-gradient(145deg, rgba(92, 24, 32, 0.98), rgba(43, 20, 11, 0.98)) !important;
    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(255, 217, 154, 0.10) inset !important;
}

#selection .abd-action-tiles-wrap.abd-has-order-online .abd-order-online-square .digital-menu-corner-label {
    color: #fff7e8 !important;
    background: #7a1e2c !important;
    border-color: rgba(255, 217, 154, 0.36) !important;
}

#selection .abd-action-tiles-wrap.abd-has-order-online .abd-order-online-qr {
    background: #fff7e8 !important;
    border-color: rgba(122, 30, 44, 0.72) !important;
}

/* Helper text is intentionally not shown in the Selection tile. */
#selection .abd-order-online-helper {
    display: none !important;
}

/* Very narrow screens: keep equal importance, but avoid breaking width. */
@media (max-width: 390px) {
    #selection .abd-action-tiles-wrap.abd-has-order-online {
        width: min(100%, 310px) !important;
        max-width: 310px !important;
        gap: 8px !important;
    }

    #selection .abd-action-tiles-wrap.abd-has-order-online .digital-menu-selection-square {
        width: 151px !important;
        height: 151px !important;
        min-height: 151px !important;
        padding: 18px 10px 10px !important;
    }

    #selection .abd-action-tiles-wrap.abd-has-order-online .digital-menu-square-qr {
        width: 94px !important;
        height: 94px !important;
    }

    #selection .abd-action-tiles-wrap.abd-has-order-online .digital-menu-corner-label {
        font-size: 0.54rem !important;
        padding: 5px 8px !important;
    }
}

/*
   ABD_ORDER_ONLINE_REPAIR_LAYOUT_V1
   Repair pass after first visual test.
   Goal:
   - Equal importance for Digital Menu and Order Online.
   - No overlap.
   - Larger tiles.
   - No helper text in Selection tile.
   - Stronger blood red accent for Order Online.
*/

/* Disabled state: Order tile remains hidden. */
#selection .abd-action-tiles-wrap [data-order-online-tile][hidden],
#selection .abd-action-tiles-wrap .abd-order-online-square[hidden] {
    display: none !important;
    visibility: hidden !important;
}

/* Enabled state: proper twin tile panel. */
#selection .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online {
    display: grid !important;
    grid-template-columns: 210px 210px !important;
    justify-content: end !important;
    align-items: stretch !important;
    gap: 16px !important;
    width: 436px !important;
    max-width: 436px !important;
    min-width: 436px !important;
    height: 214px !important;
    max-height: 214px !important;
    margin-left: auto !important;
    overflow: visible !important;
}

/* Equal tile size. */
#selection .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online .digital-menu-selection-square {
    width: 210px !important;
    height: 210px !important;
    min-width: 210px !important;
    max-width: 210px !important;
    min-height: 210px !important;
    max-height: 210px !important;
    padding: 24px 14px 14px !important;
    border-radius: 24px !important;
    transform: none !important;
    position: relative !important;
}

/* QR size inside both tiles. */
#selection .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online .digital-menu-square-qr {
    width: 136px !important;
    height: 136px !important;
    min-width: 136px !important;
    min-height: 136px !important;
    border-radius: 18px !important;
    margin: 0 auto !important;
}

#selection .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online .digital-menu-square-qr-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* Labels stay readable and obvious. */
#selection .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online .digital-menu-corner-label {
    font-size: 0.66rem !important;
    line-height: 1 !important;
    padding: 7px 12px !important;
    max-width: 150px !important;
    white-space: nowrap !important;
    letter-spacing: 0.08em !important;
}

/* Caption only. No helper text. */
#selection .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online .digital-menu-square-caption {
    font-size: 0.68rem !important;
    letter-spacing: 0.12em !important;
    margin-top: 9px !important;
}

#selection .abd-order-online-helper {
    display: none !important;
    visibility: hidden !important;
}

/* Override previous emergency hide only when Admin Lite enables the tile. */
#selection .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online .abd-order-online-square,
#selection .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online [data-order-online-tile] {
    display: flex !important;
    visibility: visible !important;
}

/* Clearer blood red Order Online identity. */
#selection .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online .abd-order-online-square {
    border-color: rgba(155, 12, 35, 0.88) !important;
    background:
        radial-gradient(circle at 48% 18%, rgba(190, 18, 48, 0.34), transparent 44%),
        linear-gradient(145deg, #8b0018 0%, #5c1018 48%, #2b140b 100%) !important;
    box-shadow:
        0 20px 44px rgba(64, 6, 17, 0.30),
        0 0 0 1px rgba(255, 217, 154, 0.16) inset !important;
}

#selection .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online .abd-order-online-square .digital-menu-corner-label {
    color: #fff7e8 !important;
    background: #9b0c23 !important;
    border-color: rgba(255, 217, 154, 0.42) !important;
    box-shadow: 0 8px 18px rgba(80, 0, 16, 0.22) !important;
}

#selection .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online .abd-order-online-qr {
    background: #fff7e8 !important;
    border-color: rgba(155, 12, 35, 0.82) !important;
}

/* Medium screens: keep them side by side but slightly smaller. */
@media (max-width: 980px) {
    #selection .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online {
        grid-template-columns: 178px 178px !important;
        width: 370px !important;
        max-width: 370px !important;
        min-width: 370px !important;
        height: 184px !important;
        max-height: 184px !important;
        gap: 14px !important;
    }

    #selection .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online .digital-menu-selection-square {
        width: 178px !important;
        height: 178px !important;
        min-width: 178px !important;
        max-width: 178px !important;
        min-height: 178px !important;
        max-height: 178px !important;
        padding: 22px 12px 12px !important;
    }

    #selection .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online .digital-menu-square-qr {
        width: 112px !important;
        height: 112px !important;
        min-width: 112px !important;
        min-height: 112px !important;
    }
}

/* Phones: stack equally, but only on narrow screens where side-by-side would truly break. */
@media (max-width: 560px) {
    #selection .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online {
        grid-template-columns: 1fr !important;
        width: 190px !important;
        max-width: 190px !important;
        min-width: 190px !important;
        height: auto !important;
        max-height: none !important;
        gap: 12px !important;
        justify-content: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #selection .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online .digital-menu-selection-square {
        width: 190px !important;
        height: 190px !important;
        min-width: 190px !important;
        max-width: 190px !important;
        min-height: 190px !important;
        max-height: 190px !important;
    }

    #selection .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online .digital-menu-square-qr {
        width: 122px !important;
        height: 122px !important;
        min-width: 122px !important;
        min-height: 122px !important;
    }
}

/*
   ABD_ORDER_ONLINE_TWIN_POSITION_SIZE_V1
   Final enabled-state positioning repair.
   Disabled state remains original: Digital Menu alone is untouched.
   Enabled state: two equal, larger tiles shifted left to avoid right-margin overflow.
*/

/* Only when Order Online is enabled. */
#selection .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online {
    display: grid !important;
    grid-template-columns: 230px 230px !important;
    gap: 18px !important;
    width: 478px !important;
    min-width: 478px !important;
    max-width: 478px !important;
    height: 238px !important;
    max-height: 238px !important;
    align-items: stretch !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    transform: translateX(-115px) !important;
    overflow: visible !important;
}

/* Equal larger tiles. */
#selection .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online .digital-menu-selection-square {
    width: 230px !important;
    height: 230px !important;
    min-width: 230px !important;
    max-width: 230px !important;
    min-height: 230px !important;
    max-height: 230px !important;
    padding: 27px 14px 14px !important;
    border-radius: 26px !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
}

/* Larger QR fill. */
#selection .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online .digital-menu-square-qr {
    width: 154px !important;
    height: 154px !important;
    min-width: 154px !important;
    min-height: 154px !important;
    border-radius: 20px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#selection .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online .digital-menu-square-qr-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* Keep labels clear and obvious. */
#selection .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online .digital-menu-corner-label {
    font-size: 0.72rem !important;
    line-height: 1 !important;
    padding: 8px 13px !important;
    max-width: 170px !important;
    white-space: nowrap !important;
    letter-spacing: 0.08em !important;
    z-index: 3 !important;
}

/* Captions must stay below QR, not beside it. */
#selection .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online .digital-menu-square-caption {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.12em !important;
    margin: 10px auto 0 !important;
    position: static !important;
    transform: none !important;
}

/* Stronger true blood red identity. */
#selection .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online .abd-order-online-square {
    border-color: rgba(190, 0, 38, 0.88) !important;
    background:
        radial-gradient(circle at 48% 18%, rgba(220, 18, 58, 0.38), transparent 42%),
        linear-gradient(145deg, #b00020 0%, #7a0015 48%, #2b140b 100%) !important;
    box-shadow:
        0 20px 44px rgba(80, 0, 18, 0.30),
        0 0 0 1px rgba(255, 217, 154, 0.14) inset !important;
}

#selection .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online .abd-order-online-square .digital-menu-corner-label {
    color: #fff7e8 !important;
    background: #b00020 !important;
    border-color: rgba(255, 217, 154, 0.42) !important;
}

#selection .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online .abd-order-online-qr {
    background: #fff7e8 !important;
    border-color: rgba(190, 0, 38, 0.82) !important;
}

/* Helper text remains disabled in this premium tile. */
#selection .abd-order-online-helper {
    display: none !important;
    visibility: hidden !important;
}

/* Medium widths: reduce and shift less. */
@media (max-width: 1180px) {
    #selection .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online {
        grid-template-columns: 200px 200px !important;
        width: 416px !important;
        min-width: 416px !important;
        max-width: 416px !important;
        height: 208px !important;
        max-height: 208px !important;
        gap: 16px !important;
        transform: translateX(-80px) !important;
    }

    #selection .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online .digital-menu-selection-square {
        width: 200px !important;
        height: 200px !important;
        min-width: 200px !important;
        max-width: 200px !important;
        min-height: 200px !important;
        max-height: 200px !important;
    }

    #selection .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online .digital-menu-square-qr {
        width: 132px !important;
        height: 132px !important;
        min-width: 132px !important;
        min-height: 132px !important;
    }
}

/* Phone: stack only when truly necessary. */
@media (max-width: 560px) {
    #selection .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online {
        grid-template-columns: 1fr !important;
        width: 190px !important;
        min-width: 190px !important;
        max-width: 190px !important;
        height: auto !important;
        max-height: none !important;
        transform: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
        gap: 12px !important;
    }

    #selection .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online .digital-menu-selection-square {
        width: 190px !important;
        height: 190px !important;
        min-width: 190px !important;
        max-width: 190px !important;
        min-height: 190px !important;
        max-height: 190px !important;
    }

    #selection .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online .digital-menu-square-qr {
        width: 122px !important;
        height: 122px !important;
        min-width: 122px !important;
        min-height: 122px !important;
    }
}

/*
   ABD_ORDER_ONLINE_TWIN_POLISH_V1
   Visual repair:
   - Digital Menu remains original when Order Online is disabled.
   - When Order Online is enabled, Selection text narrows slightly.
   - Twin tiles shift left and align better with the thumbnails.
   - Order tile becomes chocolate-first with a clearer blood-red label/accent.
   - Helper text stays hidden.
*/

/* Only when Order Online is enabled. Narrow text slightly to give the twin panel breathing room. */
#selection.abd-order-online-enabled .section-header p,
#selection.abd-order-online-enabled .selection-header p,
#selection.abd-order-online-enabled .section-copy,
#selection.abd-order-online-enabled .selection-intro,
#selection.abd-order-online-enabled .section-lead {
    max-width: 560px !important;
}

/* Enabled twin layout only. Disabled/single Digital Menu state is untouched. */
#selection.abd-order-online-enabled .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online {
    display: grid !important;
    grid-template-columns: 222px 222px !important;
    gap: 16px !important;
    width: 460px !important;
    min-width: 460px !important;
    max-width: 460px !important;
    height: 230px !important;
    max-height: 230px !important;
    justify-content: center !important;
    align-items: stretch !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    transform: translateX(-175px) !important;
    overflow: visible !important;
}

/* Equal, premium-size tiles. */
#selection.abd-order-online-enabled .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online .digital-menu-selection-square {
    width: 222px !important;
    height: 222px !important;
    min-width: 222px !important;
    max-width: 222px !important;
    min-height: 222px !important;
    max-height: 222px !important;
    padding: 26px 14px 14px !important;
    border-radius: 26px !important;
    position: relative !important;
    transform: none !important;
}

/* QR should fill the tile more generously. */
#selection.abd-order-online-enabled .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online .digital-menu-square-qr {
    width: 150px !important;
    height: 150px !important;
    min-width: 150px !important;
    min-height: 150px !important;
    border-radius: 20px !important;
    margin: 0 auto !important;
}

#selection.abd-order-online-enabled .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online .digital-menu-square-qr-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* Captions remain clean. */
#selection.abd-order-online-enabled .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online .digital-menu-square-caption {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.12em !important;
    margin: 10px auto 0 !important;
    position: static !important;
    transform: none !important;
}

/* Labels readable and premium. */
#selection.abd-order-online-enabled .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online .digital-menu-corner-label {
    font-size: 0.72rem !important;
    line-height: 1 !important;
    padding: 8px 13px !important;
    white-space: nowrap !important;
    letter-spacing: 0.08em !important;
    z-index: 3 !important;
}

/* Order tile: chocolate base, blood-red identity. */
#selection.abd-order-online-enabled .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online .abd-order-online-square {
    border-color: rgba(196, 18, 48, 0.82) !important;
    background:
        radial-gradient(circle at 50% 16%, rgba(196, 18, 48, 0.20), transparent 42%),
        linear-gradient(145deg, #3a160f 0%, #260e09 52%, #120706 100%) !important;
    box-shadow:
        0 20px 44px rgba(0, 0, 0, 0.34),
        0 0 0 1px rgba(255, 217, 154, 0.14) inset,
        0 0 22px rgba(196, 18, 48, 0.14) !important;
}

#selection.abd-order-online-enabled .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online .abd-order-online-square .digital-menu-corner-label {
    color: #fff7e8 !important;
    background: #c41230 !important;
    border-color: rgba(255, 217, 154, 0.50) !important;
    box-shadow: 0 8px 20px rgba(196, 18, 48, 0.32) !important;
}

#selection.abd-order-online-enabled .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online .abd-order-online-qr {
    background: #fff7e8 !important;
    border-color: rgba(196, 18, 48, 0.78) !important;
}

/* No helper text in the premium Selection tiles. */
#selection .abd-order-online-helper {
    display: none !important;
    visibility: hidden !important;
}

/* Medium screens: keep side-by-side but reduce shift. */
@media (max-width: 1180px) {
    #selection.abd-order-online-enabled .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online {
        grid-template-columns: 200px 200px !important;
        width: 416px !important;
        min-width: 416px !important;
        max-width: 416px !important;
        height: 208px !important;
        max-height: 208px !important;
        gap: 16px !important;
        transform: translateX(-105px) !important;
    }

    #selection.abd-order-online-enabled .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online .digital-menu-selection-square {
        width: 200px !important;
        height: 200px !important;
        min-width: 200px !important;
        max-width: 200px !important;
        min-height: 200px !important;
        max-height: 200px !important;
    }

    #selection.abd-order-online-enabled .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online .digital-menu-square-qr {
        width: 132px !important;
        height: 132px !important;
        min-width: 132px !important;
        min-height: 132px !important;
    }
}

/* Phone: stack only when necessary. */
@media (max-width: 560px) {
    #selection.abd-order-online-enabled .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online {
        grid-template-columns: 1fr !important;
        width: 190px !important;
        min-width: 190px !important;
        max-width: 190px !important;
        height: auto !important;
        max-height: none !important;
        transform: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
        gap: 12px !important;
    }

    #selection.abd-order-online-enabled .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online .digital-menu-selection-square {
        width: 190px !important;
        height: 190px !important;
        min-width: 190px !important;
        max-width: 190px !important;
        min-height: 190px !important;
        max-height: 190px !important;
    }

    #selection.abd-order-online-enabled .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online .digital-menu-square-qr {
        width: 122px !important;
        height: 122px !important;
        min-width: 122px !important;
        min-height: 122px !important;
    }
}

/*
   ABD_ORDER_ONLINE_TEXT_CLEARANCE_V1
   Repair after visual test:
   - Tiles were too far left and sitting over the text.
   - This slightly reduces tile size, moves them right, and narrows body copy.
   - Applies only when Order Online is enabled.
   - Digital Menu alone remains untouched.
*/

/* Narrow only the body text/copy when Order Online is visible. */
#selection.abd-order-online-enabled .selection-copy,
#selection.abd-order-online-enabled .selection-text,
#selection.abd-order-online-enabled .section-copy,
#selection.abd-order-online-enabled .section-header {
    max-width: 820px !important;
}

#selection.abd-order-online-enabled .selection-copy p,
#selection.abd-order-online-enabled .selection-text p,
#selection.abd-order-online-enabled .section-copy p,
#selection.abd-order-online-enabled .section-header p,
#selection.abd-order-online-enabled > div:first-of-type p {
    max-width: 660px !important;
}

/* Correct twin tile position and size. */
#selection.abd-order-online-enabled .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online {
    grid-template-columns: 204px 204px !important;
    gap: 16px !important;
    width: 424px !important;
    min-width: 424px !important;
    max-width: 424px !important;
    height: 212px !important;
    max-height: 212px !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    transform: translateX(-92px) !important;
    overflow: visible !important;
}

/* Equal but slightly smaller tiles. */
#selection.abd-order-online-enabled .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online .digital-menu-selection-square {
    width: 204px !important;
    height: 204px !important;
    min-width: 204px !important;
    max-width: 204px !important;
    min-height: 204px !important;
    max-height: 204px !important;
    padding: 24px 13px 13px !important;
    border-radius: 24px !important;
}

/* QR size adjusted to match tile. */
#selection.abd-order-online-enabled .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online .digital-menu-square-qr {
    width: 136px !important;
    height: 136px !important;
    min-width: 136px !important;
    min-height: 136px !important;
    border-radius: 18px !important;
}

/* Label and caption balanced for smaller tile. */
#selection.abd-order-online-enabled .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online .digital-menu-corner-label {
    font-size: 0.68rem !important;
    padding: 7px 12px !important;
}

#selection.abd-order-online-enabled .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online .digital-menu-square-caption {
    font-size: 0.68rem !important;
    margin-top: 8px !important;
}

/* Keep Order Online chocolate-first, with clearer red label. */
#selection.abd-order-online-enabled .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online .abd-order-online-square {
    background:
        radial-gradient(circle at 50% 16%, rgba(196, 18, 48, 0.18), transparent 42%),
        linear-gradient(145deg, #35140d 0%, #220c08 55%, #120706 100%) !important;
    border-color: rgba(196, 18, 48, 0.86) !important;
}

#selection.abd-order-online-enabled .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online .abd-order-online-square .digital-menu-corner-label {
    background: #d11232 !important;
    color: #fff7e8 !important;
    border-color: rgba(255, 217, 154, 0.55) !important;
}

/* Medium screens: reduce shift further. */
@media (max-width: 1180px) {
    #selection.abd-order-online-enabled .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online {
        grid-template-columns: 188px 188px !important;
        width: 392px !important;
        min-width: 392px !important;
        max-width: 392px !important;
        height: 196px !important;
        max-height: 196px !important;
        gap: 16px !important;
        transform: translateX(-60px) !important;
    }

    #selection.abd-order-online-enabled .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online .digital-menu-selection-square {
        width: 188px !important;
        height: 188px !important;
        min-width: 188px !important;
        max-width: 188px !important;
        min-height: 188px !important;
        max-height: 188px !important;
    }

    #selection.abd-order-online-enabled .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online .digital-menu-square-qr {
        width: 122px !important;
        height: 122px !important;
        min-width: 122px !important;
        min-height: 122px !important;
    }

    #selection.abd-order-online-enabled .selection-copy p,
    #selection.abd-order-online-enabled .selection-text p,
    #selection.abd-order-online-enabled .section-copy p,
    #selection.abd-order-online-enabled .section-header p,
    #selection.abd-order-online-enabled > div:first-of-type p {
        max-width: 600px !important;
    }
}

/* Phone behavior unchanged: stack only when truly necessary. */
@media (max-width: 560px) {
    #selection.abd-order-online-enabled .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online {
        grid-template-columns: 1fr !important;
        width: 190px !important;
        min-width: 190px !important;
        max-width: 190px !important;
        height: auto !important;
        max-height: none !important;
        transform: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
        gap: 12px !important;
    }
}

/*
   ABD_ORDER_ONLINE_ALIGNMENT_TUNE_V1
   Fine tune after visual review:
   - Body text was too narrow.
   - Twin tiles needed a slight left shift, but without sitting on the text.
   - Phone portrait remains mostly unchanged.
   - Phone landscape centers the twin tiles.
*/

/* Widen the body copy back to a cleaner 3-line feel on desktop. */
#selection.abd-order-online-enabled .selection-copy p,
#selection.abd-order-online-enabled .selection-text p,
#selection.abd-order-online-enabled .section-copy p,
#selection.abd-order-online-enabled .section-header p,
#selection.abd-order-online-enabled > div:first-of-type p {
    max-width: 790px !important;
}

/* Move the enabled twin panel slightly left and keep current comfortable size. */
#selection.abd-order-online-enabled .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online {
    grid-template-columns: 204px 204px !important;
    gap: 16px !important;
    width: 424px !important;
    min-width: 424px !important;
    max-width: 424px !important;
    height: 212px !important;
    max-height: 212px !important;
    transform: translateX(-132px) !important;
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* Keep tile dimensions stable. */
#selection.abd-order-online-enabled .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online .digital-menu-selection-square {
    width: 204px !important;
    height: 204px !important;
    min-width: 204px !important;
    max-width: 204px !important;
    min-height: 204px !important;
    max-height: 204px !important;
}

/* Keep QR readable and not cramped. */
#selection.abd-order-online-enabled .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online .digital-menu-square-qr {
    width: 136px !important;
    height: 136px !important;
    min-width: 136px !important;
    min-height: 136px !important;
}

/* Keep the Order label clearer against the darker tile. */
#selection.abd-order-online-enabled .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online .abd-order-online-square {
    background:
        radial-gradient(circle at 50% 16%, rgba(209, 18, 50, 0.16), transparent 42%),
        linear-gradient(145deg, #32120c 0%, #1d0906 58%, #100504 100%) !important;
    border-color: rgba(209, 18, 50, 0.88) !important;
}

#selection.abd-order-online-enabled .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online .abd-order-online-square .digital-menu-corner-label {
    background: #d11232 !important;
    color: #fff7e8 !important;
    border-color: rgba(255, 217, 154, 0.58) !important;
}

/* Medium desktop/tablet: keep text reasonable and avoid collision. */
@media (max-width: 1180px) {
    #selection.abd-order-online-enabled .selection-copy p,
    #selection.abd-order-online-enabled .selection-text p,
    #selection.abd-order-online-enabled .section-copy p,
    #selection.abd-order-online-enabled .section-header p,
    #selection.abd-order-online-enabled > div:first-of-type p {
        max-width: 680px !important;
    }

    #selection.abd-order-online-enabled .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online {
        transform: translateX(-72px) !important;
    }
}

/* Phone landscape: center the two tiles for better visual balance. */
@media (orientation: landscape) and (hover: none) and (pointer: coarse) and (max-height: 560px) {
    #selection.abd-order-online-enabled .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online {
        grid-template-columns: 150px 150px !important;
        width: 314px !important;
        min-width: 314px !important;
        max-width: 314px !important;
        height: 158px !important;
        max-height: 158px !important;
        gap: 14px !important;
        transform: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
        justify-content: center !important;
    }

    #selection.abd-order-online-enabled .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online .digital-menu-selection-square {
        width: 150px !important;
        height: 150px !important;
        min-width: 150px !important;
        max-width: 150px !important;
        min-height: 150px !important;
        max-height: 150px !important;
        padding: 18px 9px 9px !important;
    }

    #selection.abd-order-online-enabled .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online .digital-menu-square-qr {
        width: 96px !important;
        height: 96px !important;
        min-width: 96px !important;
        min-height: 96px !important;
        border-radius: 15px !important;
    }

    #selection.abd-order-online-enabled .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online .digital-menu-corner-label {
        font-size: 0.54rem !important;
        padding: 5px 8px !important;
    }

    #selection.abd-order-online-enabled .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online .digital-menu-square-caption {
        font-size: 0.56rem !important;
        margin-top: 6px !important;
    }
}

/* Phone portrait stays with the previous stack behavior. */
@media (max-width: 560px) and (orientation: portrait) {
    #selection.abd-order-online-enabled .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online {
        transform: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/*
   ABD_ORDER_ONLINE_FINAL_TEXT_WIDTH_TUNE_V1
   Final minor text width tune after visual review.
   Applies only when Order Online is enabled.
   Digital Menu-alone layout remains untouched.
*/
#selection.abd-order-online-enabled .selection-copy p,
#selection.abd-order-online-enabled .selection-text p,
#selection.abd-order-online-enabled .section-copy p,
#selection.abd-order-online-enabled .section-header p,
#selection.abd-order-online-enabled > div:first-of-type p {
    max-width: 750px !important;
}

@media (max-width: 1180px) {
    #selection.abd-order-online-enabled .selection-copy p,
    #selection.abd-order-online-enabled .selection-text p,
    #selection.abd-order-online-enabled .section-copy p,
    #selection.abd-order-online-enabled .section-header p,
    #selection.abd-order-online-enabled > div:first-of-type p {
        max-width: 650px !important;
    }
}

/*
   ABD_ORDER_LABEL_LIMIT_22_CSS_V1
   Allows "International Ordering" to fit cleanly inside the Order tile label pill.
*/
#selection.abd-order-online-enabled .abd-order-online-square .digital-menu-corner-label,
#selection.abd-order-online-enabled .abd-order-online-square [data-order-online-label] {
    width: auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 14px) !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 0.60rem !important;
    letter-spacing: 0.055em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    box-sizing: border-box !important;
}

@media (max-width: 1180px) {
    #selection.abd-order-online-enabled .abd-order-online-square .digital-menu-corner-label,
    #selection.abd-order-online-enabled .abd-order-online-square [data-order-online-label] {
        font-size: 0.54rem !important;
        letter-spacing: 0.045em !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        max-width: calc(100% - 12px) !important;
    }
}

/*
   ABD_ORDER_LABEL_PILL_EXTRA_WIDTH_V1
   Gives the Order label pill a little more rounded background on both sides.
   Keeps the 22-character public label limit intact.
*/
#selection.abd-order-online-enabled .abd-order-online-square .digital-menu-corner-label,
#selection.abd-order-online-enabled .abd-order-online-square [data-order-online-label] {
    max-width: calc(100% - 6px) !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    border-radius: 999px !important;
    letter-spacing: 0.045em !important;
}

@media (max-width: 1180px) {
    #selection.abd-order-online-enabled .abd-order-online-square .digital-menu-corner-label,
    #selection.abd-order-online-enabled .abd-order-online-square [data-order-online-label] {
        max-width: calc(100% - 6px) !important;
        padding-left: 11px !important;
        padding-right: 11px !important;
        letter-spacing: 0.035em !important;
    }
}

/*
   ABD_ORDER_LABEL_CLIPPING_FIX_V1
   Fixes clipping of long labels like "International Ordering".
   Instead of stretching outside the tile, the pill is moved inward,
   slightly tightened, and capped inside the card.
*/
#selection.abd-order-online-enabled .abd-order-online-square .digital-menu-corner-label,
#selection.abd-order-online-enabled .abd-order-online-square [data-order-online-label] {
    position: absolute !important;
    top: 10px !important;
    left: 12px !important;
    right: auto !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 24px) !important;

    padding: 7px 10px !important;
    border-radius: 999px !important;

    font-size: 0.54rem !important;
    line-height: 1 !important;
    letter-spacing: 0.025em !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    box-sizing: border-box !important;

    transform: rotate(-5deg) !important;
    transform-origin: left center !important;
}

/* Keep the pill safely inside smaller enabled tiles too. */
@media (max-width: 1180px) {
    #selection.abd-order-online-enabled .abd-order-online-square .digital-menu-corner-label,
    #selection.abd-order-online-enabled .abd-order-online-square [data-order-online-label] {
        top: 9px !important;
        left: 10px !important;
        max-width: calc(100% - 20px) !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        font-size: 0.50rem !important;
        letter-spacing: 0.015em !important;
    }
}

/*
   ABD_ORDER_TILE_FINAL_FIT_FIX_V1
   Final visual tuning for Order Online tile:
   1) Prevents "International Ordering" from clipping on PC.
   2) Shrinks twin tiles slightly on phone portrait so they stay inside screen margin.
   3) Makes "Scan or Tap" readable on chocolate Order tile.
*/

/* Allow the long rounded pill to breathe without being cut by the tile edge. */
#selection.abd-order-online-enabled .abd-order-online-square {
    overflow: visible !important;
}

/* PC and general: center the label pill safely inside the Order tile. */
#selection.abd-order-online-enabled .abd-order-online-square .digital-menu-corner-label,
#selection.abd-order-online-enabled .abd-order-online-square [data-order-online-label] {
    position: absolute !important;
    top: 10px !important;
    left: 50% !important;
    right: auto !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 34px) !important;

    padding: 7px 10px !important;
    border-radius: 999px !important;

    font-size: 0.49rem !important;
    line-height: 1 !important;
    letter-spacing: 0.012em !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    box-sizing: border-box !important;

    transform: translateX(-50%) rotate(-5deg) !important;
    transform-origin: center center !important;
}

/* Make the Order tile "Scan or Tap" readable on chocolate background. */
#selection.abd-order-online-enabled .abd-order-online-square .digital-menu-corner-caption,
#selection.abd-order-online-enabled .abd-order-online-square .digital-menu-caption,
#selection.abd-order-online-enabled .abd-order-online-square .qr-caption,
#selection.abd-order-online-enabled .abd-order-online-square .scan-caption,
#selection.abd-order-online-enabled .abd-order-online-square small,
#selection.abd-order-online-enabled .abd-order-online-square p:last-child {
    color: #f3d19a !important;
    opacity: 0.92 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55) !important;
}

/* Phone portrait: keep both tiles inside the screen margin. */
@media (max-width: 640px) and (orientation: portrait) {
    #selection.abd-order-online-enabled .digital-menu-corner,
    #selection.abd-order-online-enabled .digital-menu-aside,
    #selection.abd-order-online-enabled .selection-digital-menu-card,
    #selection.abd-order-online-enabled .selection-qr-row,
    #selection.abd-order-online-enabled .digital-menu-corner:has([data-order-online-tile]) {
        width: 100% !important;
        max-width: calc(100vw - 28px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        transform: none !important;
    }

    #selection.abd-order-online-enabled .digital-menu-square,
    #selection.abd-order-online-enabled .digital-menu-corner-card,
    #selection.abd-order-online-enabled .abd-order-online-square,
    #selection.abd-order-online-enabled [data-order-online-tile] {
        width: 142px !important;
        min-width: 142px !important;
        max-width: 142px !important;
        height: 142px !important;
        min-height: 142px !important;
        max-height: 142px !important;
        flex: 0 0 142px !important;
    }

    #selection.abd-order-online-enabled .digital-menu-square img,
    #selection.abd-order-online-enabled .digital-menu-corner-card img,
    #selection.abd-order-online-enabled .abd-order-online-square img,
    #selection.abd-order-online-enabled [data-order-online-tile] img {
        width: 104px !important;
        max-width: 104px !important;
        height: auto !important;
    }

    #selection.abd-order-online-enabled .abd-order-online-square .digital-menu-corner-label,
    #selection.abd-order-online-enabled .abd-order-online-square [data-order-online-label] {
        top: 8px !important;
        max-width: calc(100% - 24px) !important;
        padding: 6px 8px !important;
        font-size: 0.44rem !important;
        letter-spacing: 0.006em !important;
    }
}

/*
   ABD_ORDER_TILE_EXACT_SELECTOR_FIX_V1
   Exact final override for Order Online tile:
   - Full "International Ordering" fits without clipping.
   - Phone portrait shrinks the tile frames, not only the QR.
   - "Scan or tap" is readable on chocolate background.
*/

/* Keep the action tiles row contained. */
#selection.abd-order-online-enabled .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online {
    overflow: visible !important;
}

/* Order tile must clip its own frame normally, but label must stay inside it. */
#selection.abd-order-online-enabled .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online
.abd-order-online-square {
    overflow: hidden !important;
}

/* Replace the diagonal clipped label with a straight centered pill that fits 22 chars. */
#selection.abd-order-online-enabled .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online
.abd-order-online-square [data-order-online-label] {
    position: absolute !important;
    top: 10px !important;
    left: 9px !important;
    right: 9px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    padding: 7px 7px !important;
    border-radius: 999px !important;

    font-size: 0.465rem !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;

    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;

    transform: none !important;
    transform-origin: center center !important;
    box-sizing: border-box !important;
}

/* Exact caption class from the HTML. */
#selection.abd-order-online-enabled .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online
.abd-order-online-square .digital-menu-square-caption {
    color: #f3d19a !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.65) !important;
    z-index: 5 !important;
}

/* Keep Digital Menu caption normal. */
#selection.abd-order-online-enabled .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online
.digital-menu-selection-square:not(.abd-order-online-square) .digital-menu-square-caption {
    visibility: visible !important;
}

/* Phone portrait: shrink both tile frames and keep QR proportional, not tiny. */
@media (max-width: 640px) and (orientation: portrait) {
    #selection.abd-order-online-enabled .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online {
        width: 100% !important;
        max-width: calc(100vw - 24px) !important;
        margin-left: auto !important;
        margin-right: auto !important;

        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;

        padding-left: 0 !important;
        padding-right: 0 !important;
        transform: none !important;
        left: auto !important;
        right: auto !important;
    }

    #selection.abd-order-online-enabled .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online
    > .digital-menu-selection-square {
        width: 146px !important;
        min-width: 146px !important;
        max-width: 146px !important;
        height: 146px !important;
        min-height: 146px !important;
        max-height: 146px !important;
        flex: 0 0 146px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    #selection.abd-order-online-enabled .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online
    > .digital-menu-selection-square .digital-menu-square-qr {
        width: 112px !important;
        height: 112px !important;
        min-width: 112px !important;
        min-height: 112px !important;
        max-width: 112px !important;
        max-height: 112px !important;
    }

    #selection.abd-order-online-enabled .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online
    > .digital-menu-selection-square .digital-menu-square-qr-img {
        width: 112px !important;
        height: 112px !important;
        min-width: 112px !important;
        min-height: 112px !important;
        max-width: 112px !important;
        max-height: 112px !important;
        object-fit: contain !important;
    }

    #selection.abd-order-online-enabled .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online
    .abd-order-online-square [data-order-online-label] {
        top: 8px !important;
        left: 7px !important;
        right: 7px !important;
        padding: 6px 5px !important;
        font-size: 0.405rem !important;
        letter-spacing: 0 !important;
    }
}

/*
   ABD_ORDER_TILE_PREMIUM_LABEL_PHONE_SIZE_V1
   Overrides the previous straight red warning-like label.
   Restores a premium tilted top-left label, uses chocolate/gold styling,
   keeps Scan or tap visible, and fixes phone portrait tile size/centering.
*/

/* Keep both captions visible. Order caption stays readable on chocolate tile. */
#selection.abd-order-online-enabled
.digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online
.abd-order-online-square .digital-menu-square-caption {
    color: #f3d19a !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.65) !important;
    z-index: 5 !important;
}

/* Restore premium top-left tilted label, no warning red. */
#selection.abd-order-online-enabled
.digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online
.abd-order-online-square [data-order-online-label] {
    position: absolute !important;
    top: 11px !important;
    left: 9px !important;
    right: auto !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 18px) !important;

    padding: 6px 9px !important;
    border-radius: 999px !important;

    background: linear-gradient(135deg, rgba(88, 48, 25, 0.98), rgba(42, 20, 11, 0.96)) !important;
    color: #f7d88d !important;
    border: 1px solid rgba(247, 216, 141, 0.42) !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.30) !important;

    font-size: 0.43rem !important;
    line-height: 1 !important;
    letter-spacing: 0.004em !important;
    text-transform: uppercase !important;

    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    box-sizing: border-box !important;

    transform: rotate(-5deg) !important;
    transform-origin: left center !important;
}

/* Phone portrait: enlarge from the previous too-small state and center the two tiles. */
@media (max-width: 640px) and (orientation: portrait) {
    #selection.abd-order-online-enabled
    .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online {
        width: calc(100vw - 18px) !important;
        max-width: calc(100vw - 18px) !important;
        margin-left: auto !important;
        margin-right: auto !important;

        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        position: relative !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
    }

    #selection.abd-order-online-enabled
    .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online
    > .digital-menu-selection-square {
        width: clamp(150px, 43vw, 170px) !important;
        min-width: clamp(150px, 43vw, 170px) !important;
        max-width: clamp(150px, 43vw, 170px) !important;

        height: clamp(150px, 43vw, 170px) !important;
        min-height: clamp(150px, 43vw, 170px) !important;
        max-height: clamp(150px, 43vw, 170px) !important;

        flex: 0 0 clamp(150px, 43vw, 170px) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    #selection.abd-order-online-enabled
    .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online
    > .digital-menu-selection-square .digital-menu-square-qr {
        width: clamp(116px, 33vw, 132px) !important;
        height: clamp(116px, 33vw, 132px) !important;
        min-width: clamp(116px, 33vw, 132px) !important;
        min-height: clamp(116px, 33vw, 132px) !important;
        max-width: clamp(116px, 33vw, 132px) !important;
        max-height: clamp(116px, 33vw, 132px) !important;
    }

    #selection.abd-order-online-enabled
    .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online
    > .digital-menu-selection-square .digital-menu-square-qr-img {
        width: clamp(116px, 33vw, 132px) !important;
        height: clamp(116px, 33vw, 132px) !important;
        min-width: clamp(116px, 33vw, 132px) !important;
        min-height: clamp(116px, 33vw, 132px) !important;
        max-width: clamp(116px, 33vw, 132px) !important;
        max-height: clamp(116px, 33vw, 132px) !important;
        object-fit: contain !important;
    }

    #selection.abd-order-online-enabled
    .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online
    .abd-order-online-square [data-order-online-label] {
        top: 9px !important;
        left: 8px !important;
        max-width: calc(100% - 16px) !important;
        padding: 5px 7px !important;
        font-size: 0.385rem !important;
        letter-spacing: 0 !important;
        transform: rotate(-5deg) !important;
    }
}

/*
   ABD_ORDER_LABEL_DIGITAL_STYLE_CAPTION_DROP_V1
   Matches Order label closer to Digital Menu label:
   gold/brown pill, white/cream text, tilted top-left.
   Also lowers Scan or tap slightly on PC for both tiles.
*/

/* Order label: same family as Digital Menu label, not warning red. */
#selection.abd-order-online-enabled
.digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online
.abd-order-online-square [data-order-online-label] {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    right: auto !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    max-width: calc(100% - 18px) !important;

    padding: 7px 10px !important;
    border-radius: 999px !important;

    background: linear-gradient(135deg, #b98232 0%, #8a551e 55%, #6e3d16 100%) !important;
    color: #fff8ea !important;
    border: 1px solid rgba(255, 236, 188, 0.42) !important;
    box-shadow: 0 8px 18px rgba(67, 31, 10, 0.28) !important;

    font-size: 0.52rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0.018em !important;
    text-transform: uppercase !important;

    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    box-sizing: border-box !important;

    transform: rotate(-5deg) !important;
    transform-origin: left center !important;
}

/* PC/tablet: push Scan or tap down a little on both tiles. */
@media (min-width: 641px) {
    #selection.abd-order-online-enabled
    .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online
    .digital-menu-selection-square .digital-menu-square-caption {
        position: relative !important;
        top: 5px !important;
    }
}

/* Keep the Order caption readable on chocolate tile. */
#selection.abd-order-online-enabled
.digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online
.abd-order-online-square .digital-menu-square-caption {
    color: #f3d19a !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.65) !important;
}

/* Phone: same style, slightly smaller so International Ordering still fits. */
@media (max-width: 640px) and (orientation: portrait) {
    #selection.abd-order-online-enabled
    .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online
    .abd-order-online-square [data-order-online-label] {
        top: 9px !important;
        left: 8px !important;
        max-width: calc(100% - 16px) !important;
        padding: 6px 8px !important;
        font-size: 0.45rem !important;
        letter-spacing: 0.006em !important;
        transform: rotate(-5deg) !important;
    }
}

/*
   ABD_ORDER_LABEL_FONT_SIZE_MATCH_V1
   Makes the Order label visually closer to the Digital Menu label size.
   Allows the longer label to breathe without clipping.
*/
#selection.abd-order-online-enabled
.digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online {
    overflow: visible !important;
}

#selection.abd-order-online-enabled
.digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online
.abd-order-online-square {
    overflow: visible !important;
}

#selection.abd-order-online-enabled
.digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online
.abd-order-online-square [data-order-online-label] {
    top: 9px !important;
    left: 8px !important;
    max-width: none !important;

    padding: 7px 12px !important;
    font-size: 0.64rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.018em !important;
    line-height: 1 !important;

    transform: rotate(-5deg) !important;
    transform-origin: left center !important;
    z-index: 20 !important;
}

/* Phone portrait: larger than before, but slightly controlled so it does not dominate the small tile. */
@media (max-width: 640px) and (orientation: portrait) {
    #selection.abd-order-online-enabled
    .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online
    .abd-order-online-square [data-order-online-label] {
        top: 8px !important;
        left: 7px !important;
        padding: 6px 9px !important;
        font-size: 0.54rem !important;
        letter-spacing: 0.008em !important;
        max-width: none !important;
    }
}

/*
   ABD_ORDER_LABEL_TYPOGRAPHY_MATCH_V1
   Fine-tunes Order label typography to look closer to the Digital Menu label:
   larger text, stronger weight, wider letter spacing, same premium gold/brown feel.
*/
#selection.abd-order-online-enabled
.digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online
.abd-order-online-square [data-order-online-label] {
    font-size: 0.70rem !important;
    font-weight: 850 !important;
    letter-spacing: 0.055em !important;
    line-height: 1 !important;

    padding: 7px 12px !important;
    top: 9px !important;
    left: 8px !important;

    background: linear-gradient(135deg, #b98232 0%, #8a551e 55%, #6e3d16 100%) !important;
    color: #fff8ea !important;
    border: 1px solid rgba(255, 236, 188, 0.42) !important;

    max-width: none !important;
    overflow: visible !important;
    white-space: nowrap !important;
    text-overflow: clip !important;

    transform: rotate(-5deg) !important;
    transform-origin: left center !important;
    z-index: 25 !important;
}

/* Phone portrait: closer to Digital Menu, but controlled enough for the smaller tile. */
@media (max-width: 640px) and (orientation: portrait) {
    #selection.abd-order-online-enabled
    .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online
    .abd-order-online-square [data-order-online-label] {
        font-size: 0.58rem !important;
        font-weight: 850 !important;
        letter-spacing: 0.035em !important;
        padding: 6px 9px !important;
        top: 8px !important;
        left: 7px !important;
        max-width: none !important;
    }
}

/*
   ABD_ORDER_HELPER_TOOLTIP_V1
   Uses the Admin Lite Order helper text as a desktop hover/focus tooltip.
   Keeps the public tile clean when not hovered.
*/

#selection.abd-order-online-enabled
.digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online
.abd-order-online-square {
    position: relative !important;
}

/* Tooltip base */
#selection.abd-order-online-enabled
.digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online
.abd-order-online-square .abd-order-online-helper {
    position: absolute !important;
    right: 0 !important;
    bottom: calc(100% + 12px) !important;

    width: max-content !important;
    max-width: min(320px, 78vw) !important;

    display: block !important;
    padding: 12px 14px !important;
    border-radius: 16px !important;

    background: linear-gradient(145deg, rgba(55, 27, 13, 0.98), rgba(30, 14, 8, 0.98)) !important;
    color: #f8dfad !important;
    border: 1px solid rgba(248, 223, 173, 0.34) !important;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.34) !important;

    font-size: 0.78rem !important;
    line-height: 1.45 !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    text-align: left !important;
    white-space: normal !important;

    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(6px) !important;
    pointer-events: none !important;
    z-index: 80 !important;

    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease !important;
}

/* Small arrow under tooltip */
#selection.abd-order-online-enabled
.digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online
.abd-order-online-square .abd-order-online-helper::after {
    content: "" !important;
    position: absolute !important;
    right: 22px !important;
    bottom: -7px !important;
    width: 14px !important;
    height: 14px !important;
    background: rgba(30, 14, 8, 0.98) !important;
    border-right: 1px solid rgba(248, 223, 173, 0.28) !important;
    border-bottom: 1px solid rgba(248, 223, 173, 0.28) !important;
    transform: rotate(45deg) !important;
}

/* Show on desktop hover and keyboard focus */
@media (hover: hover) and (pointer: fine) {
    #selection.abd-order-online-enabled
    .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online
    .abd-order-online-square:hover .abd-order-online-helper,
    #selection.abd-order-online-enabled
    .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online
    .abd-order-online-square:focus-visible .abd-order-online-helper,
    #selection.abd-order-online-enabled
    .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online
    .abd-order-online-square:focus-within .abd-order-online-helper {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }
}

/* On touch devices, keep the helper hidden so tap-to-order remains simple. */
@media (hover: none), (pointer: coarse) {
    #selection.abd-order-online-enabled
    .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online
    .abd-order-online-square .abd-order-online-helper {
        display: none !important;
    }
}

/*
   ABD_DIGITAL_MENU_HELPER_TOOLTIP_V1
   Uses the Admin Lite Digital Menu helper text as a desktop hover/focus tooltip.
   Empty helper text means no tooltip. Touch devices stay simple.
*/
#selection .digital-menu-selection-square[data-digital-menu-tile] {
    position: relative !important;
}

#selection .digital-menu-selection-square[data-digital-menu-tile] .abd-digital-menu-helper {
    position: absolute !important;
    left: 0 !important;
    bottom: calc(100% + 12px) !important;

    width: max-content !important;
    max-width: min(320px, 78vw) !important;

    display: block !important;
    padding: 12px 14px !important;
    border-radius: 16px !important;

    background: linear-gradient(145deg, rgba(55, 27, 13, 0.98), rgba(30, 14, 8, 0.98)) !important;
    color: #f8dfad !important;
    border: 1px solid rgba(248, 223, 173, 0.34) !important;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.34) !important;

    font-size: 0.78rem !important;
    line-height: 1.45 !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    text-align: left !important;
    white-space: normal !important;

    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(6px) !important;
    pointer-events: none !important;
    z-index: 80 !important;

    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease !important;
}

#selection .digital-menu-selection-square[data-digital-menu-tile] .abd-digital-menu-helper::after {
    content: "" !important;
    position: absolute !important;
    left: 22px !important;
    bottom: -7px !important;
    width: 14px !important;
    height: 14px !important;
    background: rgba(30, 14, 8, 0.98) !important;
    border-right: 1px solid rgba(248, 223, 173, 0.28) !important;
    border-bottom: 1px solid rgba(248, 223, 173, 0.28) !important;
    transform: rotate(45deg) !important;
}

@media (hover: hover) and (pointer: fine) {
    #selection .digital-menu-selection-square[data-digital-menu-tile].abd-has-digital-helper-tooltip:hover .abd-digital-menu-helper,
    #selection .digital-menu-selection-square[data-digital-menu-tile].abd-has-digital-helper-tooltip:focus-visible .abd-digital-menu-helper,
    #selection .digital-menu-selection-square[data-digital-menu-tile].abd-has-digital-helper-tooltip:focus-within .abd-digital-menu-helper {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }
}

@media (hover: none), (pointer: coarse) {
    #selection .digital-menu-selection-square[data-digital-menu-tile] .abd-digital-menu-helper {
        display: none !important;
    }
}

/*
   ABD_ORDER_HELPER_EMPTY_HIDE_FIX_V1
   Prevents an empty brown tooltip shell/dot from showing when
   the Order helper text field is empty in Admin Lite.
*/

/* Empty helper must never render. */
#selection.abd-order-online-enabled
.digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online
.abd-order-online-square .abd-order-online-helper:empty {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Default hidden state, even on hover, unless helper class exists. */
#selection.abd-order-online-enabled
.digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online
.abd-order-online-square:not(.abd-has-helper-tooltip) .abd-order-online-helper {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Only show Order tooltip when JS confirms helper text exists. */
@media (hover: hover) and (pointer: fine) {
    #selection.abd-order-online-enabled
    .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online
    .abd-order-online-square.abd-has-helper-tooltip:hover .abd-order-online-helper,
    #selection.abd-order-online-enabled
    .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online
    .abd-order-online-square.abd-has-helper-tooltip:focus-visible .abd-order-online-helper,
    #selection.abd-order-online-enabled
    .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online
    .abd-order-online-square.abd-has-helper-tooltip:focus-within .abd-order-online-helper {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }
}

/*
   ABD_MOBILE_ORDER_LABEL_FONT_MATCH_V1
   Brings the mobile Order label closer to the PC/Digital Menu label size.
   Only affects the Order tile label on phone portrait.
*/
@media (max-width: 640px) and (orientation: portrait) {
    #selection.abd-order-online-enabled
    .digital-menu-square-wrap.digital-menu-selection-square-wrap.abd-action-tiles-wrap.abd-has-order-online
    .abd-order-online-square [data-order-online-label] {
        font-size: 0.66rem !important;
        font-weight: 850 !important;
        letter-spacing: 0.032em !important;
        line-height: 1 !important;

        padding: 6px 9px !important;
        top: 8px !important;
        left: 7px !important;

        max-width: none !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;

        transform: rotate(-5deg) !important;
        transform-origin: left center !important;
        z-index: 30 !important;
    }
}

/* ABD_ADMIN_SELECTION_OVERFLOW_GUARD_V1
   Protect Selection tab text from pushing the desktop/tablet layout outside the visible frame. */
#selection,
.selection-tabs-section,
.selection-gallery,
.selection-side,
.selection-copy,
.selection-thumbs,
.selection-thumb {
  box-sizing: border-box !important;
  max-width: 100% !important;
}

.selection-gallery,
.selection-side,
.selection-copy,
.selection-thumbs,
.selection-thumb {
  min-width: 0 !important;
}

.selection-gallery {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr) !important;
  overflow: hidden !important;
}

.selection-copy span,
.selection-copy h3,
.selection-copy p,
#selection-label,
#selection-title,
#selection-text {
  max-width: 100% !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

.selection-copy {
  overflow: hidden !important;
}

.selection-thumbs {
  overflow: hidden !important;
}


/*
   ABD_KNEFE_STORY_THUMB_HELPER_TOOLTIP_V1
   Styled Our Knefe thumb helper tooltip.
   Uses Admin Dashboard helper text from data-helper.
   Empty helper means no data-helper attribute and no tooltip.
*/
#our-knefe .knefe-story-thumbs {
    overflow: visible !important;
}

#our-knefe .knefe-story-thumb[data-helper] {
    position: relative !important;
    overflow: visible !important;
}

#our-knefe .knefe-story-thumb[data-helper]::after {
    content: attr(data-helper) !important;
    position: absolute !important;
    left: 50% !important;
    bottom: calc(100% + 12px) !important;

    width: max-content !important;
    max-width: min(320px, 78vw) !important;

    display: block !important;
    padding: 12px 14px !important;
    border-radius: 16px !important;

    background: linear-gradient(145deg, rgba(55, 27, 13, 0.98), rgba(30, 14, 8, 0.98)) !important;
    color: #f8dfad !important;
    border: 1px solid rgba(248, 223, 173, 0.34) !important;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.34) !important;

    font-size: 0.78rem !important;
    line-height: 1.45 !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    text-align: left !important;
    white-space: normal !important;

    opacity: 0 !important;
    visibility: hidden !important;
    transform: translate(-50%, 6px) !important;
    pointer-events: none !important;
    z-index: 90 !important;

    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease !important;
}

#our-knefe .knefe-story-thumb[data-helper]::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: calc(100% + 5px) !important;

    width: 14px !important;
    height: 14px !important;
    background: rgba(30, 14, 8, 0.98) !important;
    border-right: 1px solid rgba(248, 223, 173, 0.28) !important;
    border-bottom: 1px solid rgba(248, 223, 173, 0.28) !important;

    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(-50%) rotate(45deg) !important;
    pointer-events: none !important;
    z-index: 89 !important;

    transition: opacity 180ms ease, visibility 180ms ease !important;
}

@media (hover: hover) and (pointer: fine) {
    #our-knefe .knefe-story-thumb[data-helper]:hover::after,
    #our-knefe .knefe-story-thumb[data-helper]:focus-visible::after {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translate(-50%, 0) !important;
    }

    #our-knefe .knefe-story-thumb[data-helper]:hover::before,
    #our-knefe .knefe-story-thumb[data-helper]:focus-visible::before {
        opacity: 1 !important;
        visibility: visible !important;
    }
}

@media (hover: none), (pointer: coarse) {
    #our-knefe .knefe-story-thumb[data-helper]::before,
    #our-knefe .knefe-story-thumb[data-helper]::after {
        display: none !important;
    }
}




/* ABD_BARISTA_EMPTY_THUMB_LABEL_HIDE_V1
   Empty Barista thumb labels are allowed from Admin Dashboard.
   When a label is blank, the label span should not display visible space.
*/
.barista-thumb-label:empty {
    display: none !important;
}


/* ABD_CONTACT_HEADING_WIDTH_POLISH_V1
   Gives the Contact intro paragraph more room on desktop/tablet
   so normal approved text does not wrap too early.
   Contact cards, phone numbers, emails, and buttons are untouched.
*/
#contact .contact-heading {
    max-width: 920px;
}

#contact .contact-heading > p:not(.eyebrow) {
    max-width: 820px;
}


/* ABD_CONTACT_HEADING_WIDTH_FORCE_V2
   Force Contact intro text to use the available section width.
   This only affects the Contact heading area, not the cards or contact links.
*/
#contact.contact-section .contact-heading {
    width: 100% !important;
    max-width: 1180px !important;
}

#contact.contact-section .contact-heading > p:not(.eyebrow) {
    width: 100% !important;
    max-width: 1080px !important;
}


/* ABD_HERO_ORDER_ONLINE_RELOCATION_V1 */
.hero-actions.abd-hero-actions-with-order {
    align-items: center;
    flex-wrap: wrap;
}

.hero-actions.abd-hero-actions-with-order .abd-hero-selection-action {
    order: 1;
}

.hero-actions.abd-hero-actions-with-order .abd-hero-order-online-square {
    order: 2;
    flex: 0 0 auto;
    margin: 0;
}

.hero-actions.abd-hero-actions-with-order .abd-hero-contact-action {
    order: 3;
}

.hero-actions.abd-hero-actions-with-order .abd-hero-order-online-square[hidden] {
    display: none !important;
}

@media (min-width: 1100px) {
    .hero-actions.abd-hero-actions-with-order.abd-has-order-online .abd-hero-contact-action {
        display: none !important;
    }
}

@media (max-width: 1099px) {
    .hero-actions.abd-hero-actions-with-order {
        flex-direction: column;
        align-items: flex-start;
    }

    .hero-actions.abd-hero-actions-with-order .abd-hero-order-online-square {
        order: 1;
        align-self: flex-start;
    }

    .hero-actions.abd-hero-actions-with-order .abd-hero-selection-action {
        order: 2;
    }

    .hero-actions.abd-hero-actions-with-order .abd-hero-contact-action {
        order: 3;
    }
}

@media (max-width: 640px) {
    .hero-actions.abd-hero-actions-with-order {
        align-items: stretch;
    }

    .hero-actions.abd-hero-actions-with-order .abd-hero-order-online-square {
        align-self: center;
    }
}
/* END ABD_HERO_ORDER_ONLINE_RELOCATION_V1 */

/* ABD_HERO_ORDER_ONLINE_VISIBILITY_FIX_V1 */
.hero-actions.abd-hero-actions-with-order.abd-has-order-online .abd-hero-order-online-square:not([hidden]) {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.hero-actions.abd-hero-actions-with-order:not(.abd-has-order-online) .abd-hero-contact-action {
    display: inline-flex !important;
}

@media (min-width: 1100px) {
    .hero-actions.abd-hero-actions-with-order {
        max-width: 100%;
        align-items: center;
    }

    .hero-actions.abd-hero-actions-with-order.abd-has-order-online .abd-hero-contact-action {
        display: none !important;
    }
}

@media (max-width: 1099px) {
    .hero-actions.abd-hero-actions-with-order {
        align-items: center !important;
        justify-content: center;
        width: 100%;
    }

    .hero-actions.abd-hero-actions-with-order .abd-hero-selection-action,
    .hero-actions.abd-hero-actions-with-order .abd-hero-contact-action {
        align-self: center;
    }

    .hero-actions.abd-hero-actions-with-order .abd-hero-order-online-square {
        align-self: center !important;
    }
}

@media (max-width: 640px) {
    .hero-actions.abd-hero-actions-with-order {
        align-items: center !important;
    }

    .hero-actions.abd-hero-actions-with-order .abd-hero-selection-action,
    .hero-actions.abd-hero-actions-with-order .abd-hero-contact-action {
        width: min(100%, 280px);
        justify-content: center;
        text-align: center;
    }
}
/* END ABD_HERO_ORDER_ONLINE_VISIBILITY_FIX_V1 */

/* ABD_HERO_ORDER_ONLINE_LAYOUT_FIX_V2 */
.hero-actions.abd-hero-actions-with-order .abd-hero-order-online-square[hidden] {
    display: none !important;
}

.hero-actions.abd-hero-actions-with-order.abd-has-order-online .abd-hero-order-online-square:not([hidden]) {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.hero-actions.abd-hero-actions-with-order .abd-hero-contact-action {
    display: inline-flex !important;
}

/* Keep helper text as hover tooltip, not as visible text inside the tile */
.abd-hero-order-online-square {
    position: relative !important;
    overflow: visible !important;
}

.abd-hero-order-online-square .abd-order-online-helper {
    position: absolute !important;
    left: 50% !important;
    bottom: calc(100% + 10px) !important;
    transform: translateX(-50%) translateY(6px) !important;
    width: min(260px, 78vw) !important;
    padding: 9px 12px !important;
    border-radius: 12px !important;
    background: rgba(43, 28, 18, 0.96) !important;
    color: #fff7e8 !important;
    font-size: 0.72rem !important;
    line-height: 1.35 !important;
    text-align: center !important;
    box-shadow: 0 12px 28px rgba(0,0,0,0.22) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 20 !important;
}

.abd-hero-order-online-square:hover .abd-order-online-helper,
.abd-hero-order-online-square:focus-visible .abd-order-online-helper {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
}

/* PC layout: two standard buttons stacked left, QR tile right */
@media (min-width: 1100px) {
    .hero-actions.abd-hero-actions-with-order.abd-has-order-online {
        display: grid !important;
        grid-template-columns: max-content max-content;
        grid-template-areas:
            "selection order"
            "contact   order";
        column-gap: 22px !important;
        row-gap: 14px !important;
        align-items: center !important;
        justify-content: flex-start !important;
        max-width: min(100%, 620px) !important;
        margin-top: 30px !important;
        margin-bottom: 0 !important;
    }

    .hero-actions.abd-hero-actions-with-order .abd-hero-selection-action {
        grid-area: selection !important;
        width: 260px !important;
        justify-content: center !important;
    }

    .hero-actions.abd-hero-actions-with-order .abd-hero-contact-action {
        grid-area: contact !important;
        width: 260px !important;
        justify-content: center !important;
    }

    .hero-actions.abd-hero-actions-with-order .abd-hero-order-online-square {
        grid-area: order !important;
        justify-self: start !important;
        align-self: center !important;
        margin: 0 !important;
    }

    .hero-trust-strip {
        margin-top: 34px !important;
        clear: both !important;
    }
}

/* Tablet/mobile layout: QR first, then the two regular buttons, centered */
@media (max-width: 1099px) {
    .hero-actions.abd-hero-actions-with-order {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        gap: 14px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    .hero-actions.abd-hero-actions-with-order .abd-hero-order-online-square {
        order: 1 !important;
        align-self: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .hero-actions.abd-hero-actions-with-order .abd-hero-selection-action {
        order: 2 !important;
    }

    .hero-actions.abd-hero-actions-with-order .abd-hero-contact-action {
        order: 3 !important;
    }

    .hero-actions.abd-hero-actions-with-order .abd-hero-selection-action,
    .hero-actions.abd-hero-actions-with-order .abd-hero-contact-action {
        width: min(100%, 280px) !important;
        justify-content: center !important;
        text-align: center !important;
        align-self: center !important;
    }

    .hero-trust-strip {
        margin-top: 26px !important;
    }
}
/* END ABD_HERO_ORDER_ONLINE_LAYOUT_FIX_V2 */

/* ABD_HERO_ORDER_ONLINE_FINAL_POLISH_V3
   Purpose:
   - Make relocated hero Order Online tile use the same final chocolate/red visual identity it had in Selection.
   - Keep Contact Us visible in hero.
   - Desktop: two normal buttons stacked left, QR tile right.
   - Mobile/tablet: QR tile centered, then full-width-ish normal buttons centered.
   - No visible helper text inside the tile.
*/

/* Visibility when Admin Dashboard enables Order Online */
.hero-actions.abd-hero-actions-with-order.abd-has-order-online .abd-hero-order-online-square:not([hidden]) {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Contact Us must stay visible */
.hero-actions.abd-hero-actions-with-order .abd-hero-contact-action {
    display: inline-flex !important;
}

/* Hero tile final visual identity copied from the approved Selection tile style */
.hero-actions.abd-hero-actions-with-order .abd-hero-order-online-square {
    width: 222px !important;
    height: 222px !important;
    min-width: 222px !important;
    max-width: 222px !important;
    min-height: 222px !important;
    max-height: 222px !important;
    padding: 26px 14px 14px !important;
    border-radius: 26px !important;
    position: relative !important;
    transform: none !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    border-color: rgba(196, 18, 48, 0.82) !important;
    background:
        radial-gradient(circle at 50% 16%, rgba(196, 18, 48, 0.20), transparent 42%),
        linear-gradient(145deg, #3a160f 0%, #260e09 52%, #120706 100%) !important;
    box-shadow:
        0 20px 44px rgba(0, 0, 0, 0.34),
        0 0 0 1px rgba(255, 217, 154, 0.14) inset,
        0 0 22px rgba(196, 18, 48, 0.14) !important;
}

/* Keep hover elegant, not experimental */
.hero-actions.abd-hero-actions-with-order .abd-hero-order-online-square:hover,
.hero-actions.abd-hero-actions-with-order .abd-hero-order-online-square:focus-visible {
    background:
        radial-gradient(circle at 50% 16%, rgba(196, 18, 48, 0.24), transparent 42%),
        linear-gradient(145deg, #3a160f 0%, #260e09 52%, #120706 100%) !important;
    box-shadow:
        0 22px 48px rgba(0, 0, 0, 0.36),
        0 0 0 1px rgba(255, 217, 154, 0.18) inset,
        0 0 24px rgba(196, 18, 48, 0.16) !important;
}

/* Label: solid red background, not transparent */
.hero-actions.abd-hero-actions-with-order .abd-hero-order-online-square .digital-menu-corner-label {
    color: #fff7e8 !important;
    background: #c41230 !important;
    border-color: rgba(255, 217, 154, 0.50) !important;
    box-shadow: 0 8px 20px rgba(196, 18, 48, 0.32) !important;
    font-size: 0.72rem !important;
    line-height: 1 !important;
    padding: 8px 13px !important;
    white-space: nowrap !important;
    letter-spacing: 0.08em !important;
    z-index: 3 !important;
}

/* QR size/style exactly in the final Selection family */
.hero-actions.abd-hero-actions-with-order .abd-hero-order-online-square .digital-menu-square-qr,
.hero-actions.abd-hero-actions-with-order .abd-hero-order-online-square .abd-order-online-qr {
    width: 150px !important;
    height: 150px !important;
    min-width: 150px !important;
    min-height: 150px !important;
    border-radius: 20px !important;
    margin: 0 auto !important;
    background: #fff7e8 !important;
    border-color: rgba(196, 18, 48, 0.78) !important;
}

.hero-actions.abd-hero-actions-with-order .abd-hero-order-online-square .digital-menu-square-qr-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* Caption clean under QR */
.hero-actions.abd-hero-actions-with-order .abd-hero-order-online-square .digital-menu-square-caption {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.12em !important;
    margin: 10px auto 0 !important;
    position: static !important;
    transform: none !important;
}

/* Hide helper text in the hero tile, same as the final premium Selection tile */
.hero-actions.abd-hero-actions-with-order .abd-hero-order-online-square .abd-order-online-helper {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Desktop: buttons stacked left, QR right */
@media (min-width: 1100px) {
    .hero-actions.abd-hero-actions-with-order.abd-has-order-online {
        display: grid !important;
        grid-template-columns: 260px 222px !important;
        grid-template-areas:
            "selection order"
            "contact   order";
        column-gap: 24px !important;
        row-gap: 14px !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: auto !important;
        max-width: min(100%, 530px) !important;
        margin-top: 30px !important;
        margin-bottom: 0 !important;
    }

    .hero-actions.abd-hero-actions-with-order .abd-hero-selection-action {
        grid-area: selection !important;
        width: 260px !important;
        min-width: 260px !important;
        justify-content: center !important;
    }

    .hero-actions.abd-hero-actions-with-order .abd-hero-contact-action {
        grid-area: contact !important;
        width: 260px !important;
        min-width: 260px !important;
        justify-content: center !important;
    }

    .hero-actions.abd-hero-actions-with-order .abd-hero-order-online-square {
        grid-area: order !important;
        justify-self: start !important;
        align-self: center !important;
        margin: 0 !important;
    }

    .hero-trust-strip {
        margin-top: 48px !important;
    }
}

/* Tablet/mobile: QR first, then full-width normal buttons, centered */
@media (max-width: 1099px) {
    .hero-actions.abd-hero-actions-with-order {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 14px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    .hero-actions.abd-hero-actions-with-order .abd-hero-order-online-square {
        order: 1 !important;
        align-self: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 200px !important;
        height: 200px !important;
        min-width: 200px !important;
        max-width: 200px !important;
        min-height: 200px !important;
        max-height: 200px !important;
    }

    .hero-actions.abd-hero-actions-with-order .abd-hero-order-online-square .digital-menu-square-qr,
    .hero-actions.abd-hero-actions-with-order .abd-hero-order-online-square .abd-order-online-qr {
        width: 132px !important;
        height: 132px !important;
        min-width: 132px !important;
        min-height: 132px !important;
    }

    .hero-actions.abd-hero-actions-with-order .abd-hero-selection-action {
        order: 2 !important;
    }

    .hero-actions.abd-hero-actions-with-order .abd-hero-contact-action {
        order: 3 !important;
    }

    .hero-actions.abd-hero-actions-with-order .abd-hero-selection-action,
    .hero-actions.abd-hero-actions-with-order .abd-hero-contact-action {
        width: min(100%, 340px) !important;
        max-width: 340px !important;
        justify-content: center !important;
        text-align: center !important;
        align-self: center !important;
    }

    .hero-trust-strip {
        margin-top: 32px !important;
    }
}

@media (max-width: 430px) {
    .hero-actions.abd-hero-actions-with-order .abd-hero-selection-action,
    .hero-actions.abd-hero-actions-with-order .abd-hero-contact-action {
        width: min(100%, 320px) !important;
        max-width: 320px !important;
    }
}
/* END ABD_HERO_ORDER_ONLINE_FINAL_POLISH_V3 */

/* ABD_HERO_ORDER_ONLINE_POLISH_V4
   Final correction after relocation:
   - Restore Contact Us on desktop.
   - Make left buttons fill the QR tile height.
   - Use chocolate/brown label, not red.
   - Restore premium chocolate hover helper.
   - Make mobile tile slightly larger and centered.
*/

/* Force Contact Us visible even when older desktop rules tried to hide it */
.hero-actions.abd-hero-actions-with-order.abd-has-order-online .abd-hero-contact-action {
    display: inline-flex !important;
}

/* Chocolate label, matching the settled premium menu/tile family */
.hero-actions.abd-hero-actions-with-order .abd-hero-order-online-square .digital-menu-corner-label {
    color: #fff7e8 !important;
    background: #8a5a24 !important;
    border-color: rgba(255, 217, 154, 0.48) !important;
    box-shadow: 0 8px 18px rgba(43, 20, 11, 0.28) !important;
}

/* Keep tile chocolate-first, no red label dominance */
.hero-actions.abd-hero-actions-with-order .abd-hero-order-online-square {
    border-color: rgba(138, 90, 36, 0.58) !important;
    background:
        radial-gradient(circle at 50% 16%, rgba(138, 90, 36, 0.18), transparent 42%),
        linear-gradient(145deg, #3a160f 0%, #260e09 52%, #120706 100%) !important;
    box-shadow:
        0 20px 44px rgba(0, 0, 0, 0.34),
        0 0 0 1px rgba(255, 217, 154, 0.14) inset,
        0 0 22px rgba(138, 90, 36, 0.12) !important;
}

/* Desktop: left buttons stacked and sized to visually fill QR tile height */
@media (min-width: 1100px) {
    .hero-actions.abd-hero-actions-with-order.abd-has-order-online {
        display: grid !important;
        grid-template-columns: 300px 222px !important;
        grid-template-rows: 104px 104px !important;
        grid-template-areas:
            "selection order"
            "contact   order";
        column-gap: 24px !important;
        row-gap: 14px !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        width: auto !important;
        max-width: min(100%, 560px) !important;
        margin-top: 30px !important;
        margin-bottom: 0 !important;
    }

    .hero-actions.abd-hero-actions-with-order .abd-hero-selection-action,
    .hero-actions.abd-hero-actions-with-order .abd-hero-contact-action {
        width: 300px !important;
        min-width: 300px !important;
        height: 104px !important;
        min-height: 104px !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        border-radius: 34px !important;
    }

    .hero-actions.abd-hero-actions-with-order .abd-hero-selection-action {
        grid-area: selection !important;
    }

    .hero-actions.abd-hero-actions-with-order .abd-hero-contact-action {
        grid-area: contact !important;
    }

    .hero-actions.abd-hero-actions-with-order .abd-hero-order-online-square {
        grid-area: order !important;
        justify-self: start !important;
        align-self: center !important;
        margin: 0 !important;
    }

    .hero-trust-strip {
        margin-top: 52px !important;
    }
}

/* Premium chocolate helper bubble, like the original Digital Menu hover */
.hero-actions.abd-hero-actions-with-order .abd-hero-order-online-square {
    overflow: visible !important;
}

.hero-actions.abd-hero-actions-with-order .abd-hero-order-online-square .abd-order-online-helper {
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    bottom: calc(100% + 14px) !important;
    transform: translateX(-50%) translateY(6px) !important;
    width: min(360px, 86vw) !important;
    max-width: 360px !important;
    padding: 14px 18px !important;
    border-radius: 18px !important;
    background: #2b140b !important;
    color: #fff7e8 !important;
    font-family: Arial, sans-serif !important;
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    text-align: left !important;
    box-shadow: 0 20px 48px rgba(43, 20, 11, 0.30) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 80 !important;
    white-space: normal !important;
}

.hero-actions.abd-hero-actions-with-order .abd-hero-order-online-square .abd-order-online-helper::after {
    content: "" !important;
    position: absolute !important;
    left: 36px !important;
    bottom: -14px !important;
    width: 26px !important;
    height: 26px !important;
    background: #2b140b !important;
    transform: rotate(45deg) !important;
}

.hero-actions.abd-hero-actions-with-order .abd-hero-order-online-square:hover .abd-order-online-helper,
.hero-actions.abd-hero-actions-with-order .abd-hero-order-online-square:focus-visible .abd-order-online-helper {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
}

/* Mobile/tablet: slightly larger QR tile and wider centered buttons */
@media (max-width: 1099px) {
    .hero-actions.abd-hero-actions-with-order .abd-hero-order-online-square {
        width: 230px !important;
        height: 230px !important;
        min-width: 230px !important;
        max-width: 230px !important;
        min-height: 230px !important;
        max-height: 230px !important;
        align-self: center !important;
    }

    .hero-actions.abd-hero-actions-with-order .abd-hero-order-online-square .digital-menu-square-qr,
    .hero-actions.abd-hero-actions-with-order .abd-hero-order-online-square .abd-order-online-qr {
        width: 154px !important;
        height: 154px !important;
        min-width: 154px !important;
        min-height: 154px !important;
    }

    .hero-actions.abd-hero-actions-with-order .abd-hero-selection-action,
    .hero-actions.abd-hero-actions-with-order .abd-hero-contact-action {
        width: min(100%, 340px) !important;
        max-width: 340px !important;
        justify-content: center !important;
        text-align: center !important;
        align-self: center !important;
    }
}

@media (max-width: 430px) {
    .hero-actions.abd-hero-actions-with-order .abd-hero-order-online-square {
        width: 220px !important;
        height: 220px !important;
        min-width: 220px !important;
        max-width: 220px !important;
        min-height: 220px !important;
        max-height: 220px !important;
    }

    .hero-actions.abd-hero-actions-with-order .abd-hero-order-online-square .digital-menu-square-qr,
    .hero-actions.abd-hero-actions-with-order .abd-hero-order-online-square .abd-order-online-qr {
        width: 146px !important;
        height: 146px !important;
        min-width: 146px !important;
        min-height: 146px !important;
    }

    .hero-actions.abd-hero-actions-with-order .abd-hero-selection-action,
    .hero-actions.abd-hero-actions-with-order .abd-hero-contact-action {
        width: min(100%, 330px) !important;
        max-width: 330px !important;
    }
}
/* END ABD_HERO_ORDER_ONLINE_POLISH_V4 */

/* ABD_HERO_ORDER_ONLINE_TOOLTIP_SPACING_V5
   - Keep helper bubble inside the hero text area on PC.
   - Match the premium Digital Menu hover style more closely.
   - Hide helper bubble on touch/mobile.
   - Push the lower feature row slightly down.
   - Enlarge mobile QR tile.
*/

/* PC helper: anchor to the QR tile's right edge so the bubble extends left, not into the reel */
@media (min-width: 1100px) {
    .hero-actions.abd-hero-actions-with-order .abd-hero-order-online-square .abd-order-online-helper {
        left: auto !important;
        right: 0 !important;
        bottom: calc(100% + 16px) !important;
        transform: translateY(6px) !important;
        width: 390px !important;
        max-width: 390px !important;
        padding: 14px 18px !important;
        border-radius: 18px !important;
        background: #2b140b !important;
        color: #fff0c7 !important;
        font-family: Arial, sans-serif !important;
        font-size: 1rem !important;
        font-weight: 800 !important;
        line-height: 1.35 !important;
        letter-spacing: 0 !important;
        text-align: left !important;
        box-shadow: 0 22px 52px rgba(43, 20, 11, 0.32) !important;
        z-index: 999 !important;
        white-space: normal !important;
    }

    .hero-actions.abd-hero-actions-with-order .abd-hero-order-online-square .abd-order-online-helper::after {
        left: auto !important;
        right: 42px !important;
        bottom: -13px !important;
        width: 26px !important;
        height: 26px !important;
        background: #2b140b !important;
        transform: rotate(45deg) !important;
    }

    .hero-actions.abd-hero-actions-with-order .abd-hero-order-online-square:hover .abd-order-online-helper,
    .hero-actions.abd-hero-actions-with-order .abd-hero-order-online-square:focus-visible .abd-order-online-helper {
        transform: translateY(0) !important;
    }

    /* Give the lower feature row breathing room from the ISO/trust line */
    .hero + .brand-strip {
        margin-top: 18px !important;
    }

    .hero-trust-strip {
        margin-bottom: 10px !important;
    }
}

/* Touch/tablet/mobile: no hover bubble */
@media (max-width: 1099px), (hover: none), (pointer: coarse) {
    .hero-actions.abd-hero-actions-with-order .abd-hero-order-online-square .abd-order-online-helper {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
}

/* Mobile/tablet: make the QR tile larger and better aligned with the buttons */
@media (max-width: 1099px) {
    .hero-actions.abd-hero-actions-with-order .abd-hero-order-online-square {
        width: 260px !important;
        height: 260px !important;
        min-width: 260px !important;
        max-width: 260px !important;
        min-height: 260px !important;
        max-height: 260px !important;
    }

    .hero-actions.abd-hero-actions-with-order .abd-hero-order-online-square .digital-menu-square-qr,
    .hero-actions.abd-hero-actions-with-order .abd-hero-order-online-square .abd-order-online-qr {
        width: 176px !important;
        height: 176px !important;
        min-width: 176px !important;
        min-height: 176px !important;
    }
}

@media (max-width: 430px) {
    .hero-actions.abd-hero-actions-with-order .abd-hero-order-online-square {
        width: 250px !important;
        height: 250px !important;
        min-width: 250px !important;
        max-width: 250px !important;
        min-height: 250px !important;
        max-height: 250px !important;
    }

    .hero-actions.abd-hero-actions-with-order .abd-hero-order-online-square .digital-menu-square-qr,
    .hero-actions.abd-hero-actions-with-order .abd-hero-order-online-square .abd-order-online-qr {
        width: 168px !important;
        height: 168px !important;
        min-width: 168px !important;
        min-height: 168px !important;
    }
}
/* END ABD_HERO_ORDER_ONLINE_TOOLTIP_SPACING_V5 */

/* ABD_HERO_ORDER_ONLINE_PC_FINAL_TUNE_V6
   PC-only final tuning:
   - Pull feature row back into first-screen view.
   - Make hero Order Online helper closer to Digital Menu helper style.
*/

@media (min-width: 1100px) {
    /* Undo the over-push from V5 */
    .hero + .brand-strip {
        margin-top: 0 !important;
    }

    .hero-trust-strip {
        margin-top: 38px !important;
        margin-bottom: 0 !important;
    }

    /* Helper: closer to Digital Menu hover, less heavy and less oversized */
    .hero-actions.abd-hero-actions-with-order .abd-hero-order-online-square .abd-order-online-helper {
        right: 0 !important;
        bottom: calc(100% + 14px) !important;
        width: 360px !important;
        max-width: 360px !important;
        padding: 13px 17px !important;
        border-radius: 17px !important;
        background: #2b140b !important;
        color: #fff0c7 !important;
        font-family: Arial, sans-serif !important;
        font-size: 0.92rem !important;
        font-weight: 700 !important;
        line-height: 1.32 !important;
        letter-spacing: 0 !important;
        text-align: left !important;
        box-shadow: 0 20px 48px rgba(43, 20, 11, 0.30) !important;
    }

    .hero-actions.abd-hero-actions-with-order .abd-hero-order-online-square .abd-order-online-helper::after {
        right: 42px !important;
        bottom: -13px !important;
        width: 26px !important;
        height: 26px !important;
        background: #2b140b !important;
    }
}
/* END ABD_HERO_ORDER_ONLINE_PC_FINAL_TUNE_V6 */

/* ABD_HERO_TRUST_STRIP_NOWRAP_V7
   Keep ISO / Selected Ingredients / Consistent Quality on one desktop line after hero action relocation.
*/
@media (min-width: 1100px) {
    .hero-trust-strip {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 14px !important;
        white-space: nowrap !important;
        font-size: 0.68rem !important;
        letter-spacing: 0.13em !important;
        max-width: 100% !important;
    }

    .hero-trust-strip span {
        white-space: nowrap !important;
        flex: 0 0 auto !important;
    }
}
/* END ABD_HERO_TRUST_STRIP_NOWRAP_V7 */

/* ABD_HERO_TRUST_STRIP_CENTER_V8
   Center the ISO / Selected Ingredients / Consistent Quality line on desktop.
*/
@media (min-width: 1100px) {
    .hero-trust-strip {
        justify-content: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }
}
/* END ABD_HERO_TRUST_STRIP_CENTER_V8 */

/* ABD_HERO_TRUST_STRIP_ALIGN_ACTION_V9
   Align the ISO / Selected Ingredients / Consistent Quality line with the hero action group,
   not with the full page or an auto-sized strip.
*/
@media (min-width: 1100px) {
    .hero-trust-strip {
        width: 560px !important;
        max-width: 560px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 14px !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    .hero-trust-strip span {
        white-space: nowrap !important;
    }
}
/* END ABD_HERO_TRUST_STRIP_ALIGN_ACTION_V9 */

/* ABD_HERO_TRUST_STRIP_POSITION_V10
   Fix desktop trust-strip alignment after hero Order Online relocation:
   - Give the ISO line enough width so it does not overflow left.
   - Center it under the hero text/action area.
   - Pull the lower feature row slightly upward.
*/
@media (min-width: 1100px) {
    .hero-trust-strip {
        width: 780px !important;
        max-width: 780px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 14px !important;
        white-space: nowrap !important;
        text-align: center !important;
        font-size: 0.68rem !important;
        letter-spacing: 0.13em !important;
    }

    .hero-trust-strip span {
        white-space: nowrap !important;
        flex: 0 0 auto !important;
    }

    .hero + .brand-strip {
        margin-top: -22px !important;
    }
}
/* END ABD_HERO_TRUST_STRIP_POSITION_V10 */

/* ABD_HERO_ACTIONS_DISABLED_VISIBLE_REFINE_V11
   Desktop refinement:
   - When Order Online is visible: keep left buttons stacked, but slimmer and more elegant.
   - When Order Online is hidden: restore normal two-button hero layout.
*/
@media (min-width: 1100px) {
    /* Order Online visible */
    .hero-actions.abd-hero-actions-with-order.abd-has-order-online {
        grid-template-columns: 280px 222px !important;
        grid-template-rows: 88px 88px !important;
        grid-template-areas:
            "selection order"
            "contact   order" !important;
        column-gap: 24px !important;
        row-gap: 14px !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        max-width: min(100%, 530px) !important;
    }

    .hero-actions.abd-hero-actions-with-order.abd-has-order-online .abd-hero-selection-action,
    .hero-actions.abd-hero-actions-with-order.abd-has-order-online .abd-hero-contact-action {
        width: 280px !important;
        min-width: 280px !important;
        height: 88px !important;
        min-height: 88px !important;
        border-radius: 30px !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /* Order Online hidden: return to cleaner normal hero layout */
    .hero-actions.abd-hero-actions-with-order:not(.abd-has-order-online) {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 14px !important;
        width: auto !important;
        max-width: 100% !important;
        margin-top: 30px !important;
    }

    .hero-actions.abd-hero-actions-with-order:not(.abd-has-order-online) .abd-hero-order-online-square {
        display: none !important;
    }

    .hero-actions.abd-hero-actions-with-order:not(.abd-has-order-online) .abd-hero-selection-action,
    .hero-actions.abd-hero-actions-with-order:not(.abd-has-order-online) .abd-hero-contact-action {
        width: auto !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 1rem 1.55rem !important;
        border-radius: 999px !important;
        justify-content: center !important;
        align-items: center !important;
    }
}
/* END ABD_HERO_ACTIONS_DISABLED_VISIBLE_REFINE_V11 */

/* ABD_HERO_TRUST_STRIP_DISABLED_STATE_V12
   When Order Online is hidden, keep the ISO trust strip inside the left hero content column.
   This prevents it from stretching behind the reel.
*/
@media (min-width: 1100px) {
    .hero-actions.abd-hero-actions-with-order:not(.abd-has-order-online) ~ .hero-trust-strip {
        width: 620px !important;
        max-width: 620px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 42px !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 11px !important;
        white-space: nowrap !important;
        text-align: left !important;
        font-size: 0.64rem !important;
        letter-spacing: 0.115em !important;
        overflow: visible !important;
    }

    .hero-actions.abd-hero-actions-with-order:not(.abd-has-order-online) ~ .hero-trust-strip span {
        white-space: nowrap !important;
        flex: 0 0 auto !important;
    }
}
/* END ABD_HERO_TRUST_STRIP_DISABLED_STATE_V12 */

/* ABD_HERO_TRUST_STRIP_STATE_CLASS_V13
   Use reliable JS state classes to position the ISO trust strip correctly.
*/
@media (min-width: 1100px) {
    /* QR enabled: wider line under the combined button + QR group */
    .hero-actions.abd-hero-actions-with-order.abd-hero-order-online-enabled ~ .hero-trust-strip {
        width: 780px !important;
        max-width: 780px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 38px !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 14px !important;
        white-space: nowrap !important;
        text-align: center !important;
        font-size: 0.68rem !important;
        letter-spacing: 0.13em !important;
        overflow: visible !important;
    }

    /* QR disabled: keep line inside the left hero column only */
    .hero-actions.abd-hero-actions-with-order.abd-hero-order-online-disabled ~ .hero-trust-strip {
        width: 620px !important;
        max-width: 620px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 42px !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 11px !important;
        white-space: nowrap !important;
        text-align: left !important;
        font-size: 0.64rem !important;
        letter-spacing: 0.115em !important;
        overflow: visible !important;
    }

    .hero-actions.abd-hero-actions-with-order.abd-hero-order-online-enabled ~ .hero-trust-strip span,
    .hero-actions.abd-hero-actions-with-order.abd-hero-order-online-disabled ~ .hero-trust-strip span {
        white-space: nowrap !important;
        flex: 0 0 auto !important;
    }
}
/* END ABD_HERO_TRUST_STRIP_STATE_CLASS_V13 */

/* ABD_HERO_TRUST_STRIP_SAFE_DEFAULT_V14
   Final safer rule:
   - Default/QR hidden: trust strip stays inside the left hero column and may wrap.
   - QR visible: trust strip uses the wider one-line layout.
*/
@media (min-width: 1100px) {
    /* Safe default, including QR hidden */
    .hero-trust-strip {
        width: 600px !important;
        max-width: 600px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 40px !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 8px 12px !important;
        white-space: normal !important;
        text-align: left !important;
        font-size: 0.62rem !important;
        letter-spacing: 0.10em !important;
        overflow: visible !important;
    }

    .hero-trust-strip span {
        white-space: nowrap !important;
        flex: 0 0 auto !important;
    }

    /* QR visible: wider one-line layout */
    .hero-actions.abd-hero-actions-with-order.abd-has-order-online ~ .hero-trust-strip {
        width: 780px !important;
        max-width: 780px !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        gap: 14px !important;
        white-space: nowrap !important;
        text-align: center !important;
        font-size: 0.68rem !important;
        letter-spacing: 0.13em !important;
    }
}
/* END ABD_HERO_TRUST_STRIP_SAFE_DEFAULT_V14 */

/* ABD_HERO_TRUST_STRIP_FINAL_SAFE_V15
   Final stable fix:
   Keep the ISO trust strip inside the left hero column in all desktop states.
   No QR enabled/disabled dependency.
   Prevents overlap with the reel permanently.
*/
@media (min-width: 1100px) {
    .hero .hero-content .hero-trust-strip,
    .hero-actions.abd-hero-actions-with-order.abd-has-order-online ~ .hero-trust-strip,
    .hero-actions.abd-hero-actions-with-order:not(.abd-has-order-online) ~ .hero-trust-strip,
    .hero-actions.abd-hero-actions-with-order.abd-hero-order-online-enabled ~ .hero-trust-strip,
    .hero-actions.abd-hero-actions-with-order.abd-hero-order-online-disabled ~ .hero-trust-strip {
        width: 600px !important;
        max-width: 600px !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 38px !important;
        margin-bottom: 0 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 8px 12px !important;
        white-space: normal !important;
        text-align: left !important;
        font-size: 0.62rem !important;
        letter-spacing: 0.10em !important;
        overflow: visible !important;
        clear: both !important;
    }

    .hero .hero-content .hero-trust-strip span {
        white-space: nowrap !important;
        flex: 0 0 auto !important;
    }
}
/* END ABD_HERO_TRUST_STRIP_FINAL_SAFE_V15 */

/* ABD_HERO_TRUST_STRIP_COMPACT_V16
   Keep the trust strip on one line inside the left hero column.
   Stable for both Order Online enabled and disabled states.
*/
@media (min-width: 1100px) {
    .hero .hero-content .hero-trust-strip,
    .hero-actions.abd-hero-actions-with-order.abd-has-order-online ~ .hero-trust-strip,
    .hero-actions.abd-hero-actions-with-order:not(.abd-has-order-online) ~ .hero-trust-strip,
    .hero-actions.abd-hero-actions-with-order.abd-hero-order-online-enabled ~ .hero-trust-strip,
    .hero-actions.abd-hero-actions-with-order.abd-hero-order-online-disabled ~ .hero-trust-strip {
        width: 640px !important;
        max-width: 640px !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 38px !important;
        margin-bottom: 0 !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 9px !important;
        white-space: nowrap !important;
        text-align: left !important;
        font-size: 0.54rem !important;
        letter-spacing: 0.075em !important;
        overflow: visible !important;
        clear: both !important;
    }

    .hero .hero-content .hero-trust-strip span {
        white-space: nowrap !important;
        flex: 0 0 auto !important;
    }
}
/* END ABD_HERO_TRUST_STRIP_COMPACT_V16 */

/* ABD_HERO_TRUST_STRIP_READABLE_V17
   Restore readable trust-strip size while keeping it on one line.
*/
@media (min-width: 1100px) {
    .hero .hero-content .hero-trust-strip,
    .hero-actions.abd-hero-actions-with-order.abd-has-order-online ~ .hero-trust-strip,
    .hero-actions.abd-hero-actions-with-order:not(.abd-has-order-online) ~ .hero-trust-strip,
    .hero-actions.abd-hero-actions-with-order.abd-hero-order-online-enabled ~ .hero-trust-strip,
    .hero-actions.abd-hero-actions-with-order.abd-hero-order-online-disabled ~ .hero-trust-strip {
        width: 670px !important;
        max-width: 670px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 38px !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 10px !important;
        white-space: nowrap !important;
        text-align: left !important;
        font-size: 0.64rem !important;
        letter-spacing: 0.075em !important;
        overflow: visible !important;
    }

    .hero .hero-content .hero-trust-strip span {
        white-space: nowrap !important;
        flex: 0 0 auto !important;
    }
}
/* END ABD_HERO_TRUST_STRIP_READABLE_V17 */

/* ABD_HERO_ORDER_ONLINE_DESKTOP_FINAL_V1
   Final approved behavior:
   - Desktop: Contact Us restored in header.
   - Desktop: Order Online QR/button removed from header.
   - Desktop: Order Online QR/button displayed inside hero beside Explore/Contact.
   - Mobile/tablet: header CTA remains hidden and hero Order Online remains unchanged.
   - Dashboard hooks preserved: data-order-online-tile, data-order-online-label, data-order-online-helper.
*/

.header-cta-wrap {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 10001 !important;
}

.header-order-online-square[hidden],
.abd-hero-order-online-square[hidden] {
    display: none !important;
}

@media (min-width: 1100px) {
    .site-header .header-cta-wrap .header-order-online-square,
    .site-header .header-cta-wrap.abd-has-order-online .header-order-online-square,
    .site-header .header-cta-wrap.abd-has-order-online .header-order-online-square:not([hidden]) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .site-header .header-cta-wrap .header-contact-fallback,
    .site-header .header-cta-wrap.abd-has-order-online .header-contact-fallback {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    #hero.hero {
        min-height: calc(100vh - 24px) !important;
        padding-top: 86px !important;
        padding-bottom: 30px !important;
    }

    #hero.hero .hero-content {
        padding-top: 0 !important;
        gap: 0 !important;
    }

    #hero.hero .eyebrow {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-bottom: 8px !important;
        font-size: 0.70rem !important;
        line-height: 1.05 !important;
        position: relative !important;
        z-index: 8 !important;
    }

    #hero.hero h1 {
        font-size: clamp(2.05rem, 3.05vw, 3.18rem) !important;
        line-height: 1.0 !important;
        margin-bottom: 10px !important;
        max-width: 690px !important;
    }

    #hero.hero .hero-text,
    #hero.hero p.hero-text {
        font-size: 0.90rem !important;
        line-height: 1.38 !important;
        max-width: 545px !important;
        margin-bottom: 0 !important;
    }

    #hero.hero .hero-actions.abd-hero-actions-with-order.abd-has-order-online {
        display: grid !important;
        grid-template-columns: minmax(220px, max-content) 168px !important;
        grid-template-areas:
            "selection order"
            "contact   order"
            "trust     trust" !important;
        column-gap: 22px !important;
        row-gap: 8px !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: max-content !important;
        max-width: 100% !important;
        margin-top: 14px !important;
        margin-left: 26px !important;
        overflow: visible !important;
    }

    #hero.hero .hero-actions.abd-hero-actions-with-order.abd-has-order-online .abd-hero-selection-action {
        grid-area: selection !important;
        width: 220px !important;
        min-width: 220px !important;
        min-height: 50px !important;
        padding: 14px 24px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    #hero.hero .hero-actions.abd-hero-actions-with-order.abd-has-order-online .abd-hero-contact-action {
        grid-area: contact !important;
        width: 220px !important;
        min-width: 220px !important;
        min-height: 50px !important;
        padding: 14px 24px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    #hero.hero .hero-actions.abd-hero-actions-with-order.abd-has-order-online
    > a.abd-hero-order-online-square.digital-menu-square-button.digital-menu-selection-square.abd-order-online-square:not([hidden]) {
        grid-area: order !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        width: 168px !important;
        height: 168px !important;
        min-width: 168px !important;
        max-width: 168px !important;
        min-height: 168px !important;
        max-height: 168px !important;
        padding: 32px 14px 12px !important;
        border-radius: 28px !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        isolation: isolate !important;
        overflow: visible !important;
        color: #fff7e8 !important;
        border: 1px solid rgba(138, 90, 36, 0.58) !important;
        background:
            radial-gradient(circle at 50% 16%, rgba(138, 90, 36, 0.18), transparent 42%),
            linear-gradient(145deg, #3a160f 0%, #260e09 52%, #120706 100%) !important;
        box-shadow:
            0 16px 34px rgba(0, 0, 0, 0.26),
            0 0 0 1px rgba(255, 217, 154, 0.14) inset,
            0 0 18px rgba(138, 90, 36, 0.12) !important;
        text-decoration: none !important;
        transform: none !important;
        z-index: 3 !important;
    }

    #hero.hero .hero-actions.abd-hero-actions-with-order.abd-has-order-online
    > a.abd-hero-order-online-square:hover,
    #hero.hero .hero-actions.abd-hero-actions-with-order.abd-has-order-online
    > a.abd-hero-order-online-square:focus-visible {
        transform: translateY(-2px) !important;
    }

    #hero.hero .hero-actions.abd-hero-actions-with-order.abd-has-order-online
    > a.abd-hero-order-online-square .digital-menu-corner-label,
    #hero.hero .hero-actions.abd-hero-actions-with-order.abd-has-order-online
    > a.abd-hero-order-online-square [data-order-online-label] {
        top: 8px !important;
        left: 11px !important;
        max-width: 138px !important;
        min-height: 19px !important;
        padding: 0 8px !important;
        border-radius: 999px !important;
        color: #fff7e8 !important;
        background: linear-gradient(180deg, #b77d33, #68401b) !important;
        border: 1px solid rgba(255, 217, 154, 0.46) !important;
        box-shadow: 0 7px 14px rgba(43, 20, 11, 0.24) !important;
        font-size: 0.54rem !important;
        font-weight: 900 !important;
        letter-spacing: 0.07em !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        transform: rotate(-5deg) !important;
        z-index: 5 !important;
    }

    #hero.hero .hero-actions.abd-hero-actions-with-order.abd-has-order-online
    > a.abd-hero-order-online-square .digital-menu-square-qr,
    #hero.hero .hero-actions.abd-hero-actions-with-order.abd-has-order-online
    > a.abd-hero-order-online-square .abd-order-online-qr {
        width: 126px !important;
        height: 126px !important;
        min-width: 126px !important;
        min-height: 126px !important;
        border-radius: 19px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        background: #fff8ed !important;
        border: 1px solid rgba(198, 146, 62, 0.30) !important;
        transform: none !important;
        overflow: hidden !important;
    }

    #hero.hero .hero-actions.abd-hero-actions-with-order.abd-has-order-online
    > a.abd-hero-order-online-square .digital-menu-square-qr-img {
        padding: 2px !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }

    #hero.hero .hero-actions.abd-hero-actions-with-order.abd-has-order-online
    > a.abd-hero-order-online-square .digital-menu-square-caption {
        position: static !important;
        transform: none !important;
        margin-top: 7px !important;
        color: rgba(255, 247, 232, 0.72) !important;
        font-size: 0.52rem !important;
        line-height: 1 !important;
        letter-spacing: 0.11em !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    #hero.hero .hero-actions.abd-hero-actions-with-order.abd-has-order-online
    > a.abd-hero-order-online-square .abd-order-online-helper {
        display: block !important;
        position: absolute !important;
        top: auto !important;
        bottom: calc(100% + 12px) !important;
        left: 50% !important;
        width: min(280px, 80vw) !important;
        max-width: 280px !important;
        padding: 9px 12px !important;
        border-radius: 14px !important;
        background: #2b140b !important;
        color: #fff0c7 !important;
        font-size: 0.74rem !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        text-align: left !important;
        box-shadow: 0 14px 32px rgba(43, 20, 11, 0.24) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        z-index: 10005 !important;
        white-space: normal !important;
        transform: translateX(-50%) !important;
    }

    #hero.hero .hero-actions.abd-hero-actions-with-order.abd-has-order-online
    > a.abd-hero-order-online-square:hover .abd-order-online-helper,
    #hero.hero .hero-actions.abd-hero-actions-with-order.abd-has-order-online
    > a.abd-hero-order-online-square:focus-visible .abd-order-online-helper {
        opacity: 1 !important;
        visibility: visible !important;
    }

    #hero.hero .hero-actions.abd-hero-actions-with-order.abd-has-order-online > .hero-trust-strip {
        grid-area: trust !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 6px 9px !important;
        width: 100% !important;
        max-width: 430px !important;
        margin-top: -6px !important;
        position: relative !important;
        top: -12px !important;
        transform: none !important;
        z-index: 8 !important;
        font-size: 0.72rem !important;
        line-height: 1.18 !important;
        clear: both !important;
    }

    #hero.hero .hero-actions.abd-hero-actions-with-order.abd-has-order-online > .hero-trust-strip span {
        display: inline-flex !important;
        align-items: center !important;
        line-height: 1.18 !important;
        white-space: nowrap !important;
        position: relative !important;
        z-index: 2 !important;
    }

    #hero.hero + section.brand-strip {
        margin-top: -24px !important;
        padding-left: 104px !important;
        padding-right: 104px !important;
        width: 100% !important;
        position: relative !important;
        z-index: 1 !important;
    }

    #hero.hero + section.brand-strip .brand-strip-inner {
        display: grid !important;
        width: 100% !important;
        max-width: 1280px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        grid-template-columns:
            minmax(205px, 0.9fr)
            minmax(205px, 0.9fr)
            minmax(260px, 1.04fr)
            minmax(260px, 1.04fr) !important;
        column-gap: 10px !important;
        align-items: center !important;
    }

    #hero.hero + section.brand-strip .brand-strip-item {
        min-width: 0 !important;
    }

    #hero.hero + section.brand-strip .brand-strip-item:nth-child(3),
    #hero.hero + section.brand-strip .brand-strip-item:nth-child(4) {
        min-width: 260px !important;
    }
}

@media (max-width: 1099px) {
    .site-header .header-cta-wrap,
    .site-header .header-contact-fallback,
    .site-header .header-order-online-square {
        display: none !important;
    }

    #hero.hero .hero-actions.abd-hero-actions-with-order .abd-hero-order-online-square:not([hidden]) {
        display: flex !important;
    }
}
/* END ABD_HERO_ORDER_ONLINE_DESKTOP_FINAL_V1 */



/* =========================================================
   ABD_ABOUT_US_STAGING_V1
   Hero About Us modal - staging only
   ========================================================= */

.about-us-overlay {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.about-us-overlay.is-open {
    display: flex;
}

.about-us-overlay-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(37, 22, 14, 0.68);
    backdrop-filter: blur(4px);
}

.about-us-dialog {
    position: relative;
    z-index: 1;
    width: min(720px, 100%);
    max-height: min(760px, 88vh);
    overflow-y: auto;
    box-sizing: border-box;
    padding: 48px 52px;
    border-radius: 28px;
    background: #f8efe2;
    color: #3d2619;
    box-shadow: 0 24px 70px rgba(0,0,0,.28);
}

.about-us-close {
    position: absolute;
    top: 18px;
    right: 20px;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: #4a2d1f;
    color: #fff;
    font-size: 27px;
    line-height: 1;
    cursor: pointer;
}

.about-us-eyebrow {
    margin: 0 0 12px;
    text-transform: uppercase;
    letter-spacing: .20em;
    font-size: 13px;
    font-weight: 700;
    color: #9a6748;
}

.about-us-dialog h2 {
    margin: 0 48px 22px 0;
    font-size: clamp(30px, 5vw, 46px);
    line-height: 1.08;
    color: #4a2d1f;
}

.about-us-body {
    font-size: 17px;
    line-height: 1.8;
}

.about-us-body p {
    margin: 0 0 18px;
}

@media (max-width: 640px) {
    .about-us-overlay {
        padding: 16px;
    }

    .about-us-dialog {
        padding: 40px 26px 32px;
        border-radius: 22px;
        max-height: 86vh;
    }

    .about-us-close {
        top: 14px;
        right: 14px;
    }

    .about-us-dialog h2 {
        margin-right: 38px;
    }
}


/* =========================================================
   ABD_ABOUT_US_RESPONSIVE_ACTIONS_V1
   Desktop: header Contact + hero About
   Tablet/mobile: hero About + Contact
   ========================================================= */

/* Never show the extra Contact button on desktop */
.abd-hero-mobile-contact-action {
    display: none !important;
}

@media (max-width: 1099px) {
    .hero-actions.abd-hero-actions-with-order .abd-hero-mobile-contact-action {
        display: inline-flex !important;
        order: 4 !important;
        width: min(100%, 340px) !important;
        max-width: 340px !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        align-self: center !important;
    }
}

@media (max-width: 430px) {
    .hero-actions.abd-hero-actions-with-order .abd-hero-mobile-contact-action {
        width: min(100%, 320px) !important;
        max-width: 320px !important;
    }
}

/* ABD_ABOUT_US_RESPONSIVE_ACTIONS_V2
   Strong desktop hide for mobile/tablet Contact Us button.
*/
#hero.hero .hero-actions.abd-hero-actions-with-order .abd-hero-mobile-contact-action {
    display: none !important;
}

@media (max-width: 1099px) {
    #hero.hero .hero-actions.abd-hero-actions-with-order .abd-hero-mobile-contact-action {
        display: inline-flex !important;
    }
}

/* ABD_ABOUT_US_RESPONSIVE_ACTIONS_V2
   Strong desktop hide for mobile/tablet Contact Us button.
*/
#hero.hero .hero-actions.abd-hero-actions-with-order .abd-hero-mobile-contact-action {
    display: none !important;
}

@media (max-width: 1099px) {
    #hero.hero .hero-actions.abd-hero-actions-with-order .abd-hero-mobile-contact-action {
        display: inline-flex !important;
    }
}


/* =========================================================
   ABD_ABOUT_US_CONFIG_VISIBILITY_V1
   ========================================================= */

#hero.hero .hero-actions [data-about-us-open][hidden] {
    display: none !important;
}

.about-us-body {
    white-space: pre-line;
}

/* ABD_ABOUT_US_HIDDEN_FINAL_FIX_V1
   Must override older hero display:inline-flex !important rules.
*/
#hero.hero
.hero-actions.abd-hero-actions-with-order
.abd-hero-contact-action[data-about-us-open][hidden] {
    display: none !important;
}


/* ABD_ABOUT_US_TEXT_WEIGHT_V1 */
.about-us-body,
.about-us-body p {
    font-weight: 400 !important;
}

/* ABD_ABOUT_US_BODY_SITE_TYPOGRAPHY_V1
   Match normal website paragraph typography.
   Heading, eyebrow and buttons remain unchanged.
*/
.about-us-dialog .about-us-body {
    font-family: inherit !important;
    font-weight: 400 !important;
    font-style: normal !important;
    color: var(--muted-brown) !important;
    letter-spacing: normal !important;
}

/* ABD_ABOUT_US_TYPOGRAPHY_FINAL_V2
   Balanced site-consistent About Us typography.
*/

/* Dashboard heading, e.g. "Our Story" */
.about-us-dialog #about-us-title {
    font-family: "Segoe UI Semibold", "Segoe UI", Arial, sans-serif !important;
    font-size: clamp(2rem, 3.2vw, 2.6rem) !important;
    font-weight: 600 !important;
    line-height: 1.18 !important;
    color: #4a2d1f !important;
    margin: 0 48px 26px 0 !important;
}

/* Main article text */
.about-us-dialog .about-us-body,
.about-us-dialog .about-us-body p {
    font-family: "Segoe UI", Arial, sans-serif !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    line-height: 1.75 !important;
    letter-spacing: normal !important;
    color: var(--muted-brown) !important;
}

/* ABD_ABOUT_US_HEADING_FINAL_V3
   Final About Us heading only.
*/
#about-us-overlay .about-us-dialog #about-us-title {
    font-family: "Segoe UI", Arial, sans-serif !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: #4a2d1f !important;
    margin: 0 48px 26px 0 !important;
}

@media (max-width: 640px) {
    #about-us-overlay .about-us-dialog #about-us-title {
        font-size: 26px !important;
        margin-right: 38px !important;
    }
}