/* Bodrum Olive House — global components (Novamira sandbox) */
:root {
  --boh-forest: #13231B;
  --boh-midnight: #0B0D0A;
  --boh-charcoal: #25271F;
  --boh-gold: #B89545;
  --boh-gold-soft: #D2B36A;
  --boh-olive: #737A36;
  --boh-ivory: #F7F0E4;
  --boh-stone: #D9CCB7;
  --boh-taupe: #8B806D;
  --boh-white: #FFFDF8;
  --boh-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html { scroll-behavior: smooth; }
body { touch-action: manipulation; }

/* ---------- Buttons (shortcode-rendered CTAs) ---------- */
.boh-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 14px;
  letter-spacing: 1px; text-transform: uppercase; line-height: 1;
  padding: 17px 30px; border-radius: 2px; text-decoration: none !important;
  cursor: pointer; border: 1px solid transparent;
  transition: background-color .25s var(--boh-ease), color .25s var(--boh-ease), border-color .25s var(--boh-ease), transform .25s var(--boh-ease);
}
.boh-btn:active { transform: scale(.97); }
.boh-btn--gold { background: var(--boh-gold); color: var(--boh-forest) !important; }
.boh-btn--gold:hover { background: var(--boh-gold-soft); color: var(--boh-forest) !important; }
.boh-btn--outline { background: transparent; color: var(--boh-white) !important; border-color: var(--boh-gold); }
.boh-btn--outline:hover { background: var(--boh-gold); color: var(--boh-forest) !important; }
.boh-btn--dark { background: var(--boh-forest); color: var(--boh-white) !important; }
.boh-btn--dark:hover { background: var(--boh-charcoal); color: var(--boh-white) !important; }
.boh-wa-ico { flex: 0 0 auto; }

/* ---------- Language switcher ---------- */
.boh-langs { display: inline-flex; align-items: center; gap: 2px; }
.boh-lang {
  font-family: 'Manrope', sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: 1.5px; padding: 6px 8px; text-decoration: none !important;
  color: inherit; opacity: .55; transition: opacity .2s ease, color .2s ease;
}
.boh-lang:hover { opacity: 1; }
.boh-lang.is-active { opacity: 1; color: var(--boh-gold); }
.boh-lang + .boh-lang { border-inline-start: 1px solid rgba(184,149,69,.35); }

/* ---------- Nav menu (shortcode) ---------- */
.boh-nav-list { display: flex; gap: 34px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.boh-nav-list a {
  font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 500;
  letter-spacing: .8px; text-transform: uppercase; text-decoration: none !important;
  color: inherit; position: relative; padding-bottom: 4px;
}
.boh-nav-list a::after {
  content: ''; position: absolute; inset-inline-start: 0; bottom: 0; height: 1px; width: 0;
  background: var(--boh-gold); transition: width .3s var(--boh-ease);
}
.boh-nav-list a:hover::after, .boh-nav-list .current-menu-item a::after { width: 100%; }

/* ---------- Sticky WhatsApp FAB (desktop/tablet) ---------- */
.boh-fab {
  position: fixed; z-index: 9000; inset-inline-end: 26px; bottom: 26px;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--boh-forest); color: var(--boh-gold-soft);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(19, 35, 27, .35);
  transition: transform .25s var(--boh-ease), background-color .25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .boh-fab:hover { transform: translateY(-4px); background: var(--boh-charcoal); color: var(--boh-gold-soft); }
  .boh-fab:hover .boh-fab-tip { opacity: 1; }
}
.boh-fab-tip {
  position: absolute; inset-inline-end: 64px; top: 50%; transform: translateY(-50%);
  background: var(--boh-forest); color: var(--boh-white);
  font-family: 'Manrope', sans-serif; font-size: 12px; font-weight: 500;
  padding: 8px 14px; border-radius: 2px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 180ms ease;
}
.boh-fab:focus-visible .boh-fab-tip { opacity: 1; }

/* ---------- Mobile bottom conversion bar ---------- */
.boh-mobilebar {
  display: none; position: fixed; z-index: 9100; left: 0; right: 0; bottom: 0;
  background: var(--boh-forest); border-top: 1px solid rgba(184,149,69,.45);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  gap: 10px;
}
.boh-mobilebar a {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 600;
  letter-spacing: .6px; text-transform: uppercase; text-decoration: none !important;
  border-radius: 2px; line-height: 1.2; text-align: center;
}
.boh-mobilebar a svg { width: 18px; height: 18px; }
.boh-mb-info { color: var(--boh-white) !important; border: 1px solid var(--boh-gold); background: transparent; }
.boh-mb-order { background: var(--boh-gold); color: var(--boh-forest) !important; }

@media (max-width: 767px) {
  .boh-fab { display: none; }
  .boh-mobilebar { display: flex; }
  body { padding-bottom: 72px; }
}

/* ---------- Gold hairline + motifs ---------- */
.boh-hairline { height: 1px; background: linear-gradient(90deg, transparent, var(--boh-gold) 20%, var(--boh-gold) 80%, transparent); border: 0; }

/* Gold line draw-in for headings (added via .boh-goldline on Elementor divider/heading wrappers) */
.boh-goldline { position: relative; }
.boh-goldline::after {
  content: ''; display: block; width: 72px; height: 2px; margin-top: 18px;
  background: var(--boh-gold); transform-origin: left center; transform: scaleX(0);
  transition: transform 1s var(--boh-ease) .2s;
}
[dir='rtl'] .boh-goldline::after { transform-origin: right center; }
.boh-goldline.boh-inview::after { transform: scaleX(1); }
.boh-goldline--center::after { margin-left: auto; margin-right: auto; transform-origin: center; }

/* Pin card CTAs to the card's baseline so all four line up regardless of copy length */
.e-con.boh-card { display: flex; }
.e-con.boh-card > .boh-card-cta { margin-top: auto; }
/* Product cards: anchor the sizes line (and the CTA after it) to the card
   bottom, so "500 ml · ..." rows align across all four cards regardless of
   how long each tasting note runs. */
.e-con.boh-card > div:has(.boh-card-sizes) { margin-top: auto; }
.e-con.boh-card:has(.boh-card-sizes) > .boh-card-cta { margin-top: 0; }

/* ---------- Card hover (apply .boh-card to Elementor containers) ---------- */
.boh-card { transition: transform .35s var(--boh-ease), border-color .35s ease, box-shadow .35s ease; }
.boh-card .boh-card-img img { transition: transform .3s var(--boh-ease); }
@media (hover: hover) and (pointer: fine) {
  .boh-card:hover { transform: translateY(-6px); border-color: var(--boh-gold) !important; }
  .boh-card:hover .boh-card-img img { transform: scale(1.045); }
}
.boh-card-img.elementor-widget-image img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }

/* ---------- Entrance animation retune ----------
   Elementor ships Animate.css keyframes (fadeInUp = translate 100% of the
   element's own height) at a 2s "slow" duration. Both are jarring at section
   scale. Replace every entrance with a short, quiet rise/fade: 22-26px of
   travel, 550-650ms, exponential ease-out. Same class names, so pages need
   no rebuild and the Elementor editor still shows the animation controls. */
@keyframes bohFadeUp   { from { opacity: 0; transform: translateY(36px); }  to { opacity: 1; transform: none; } }
@keyframes bohFadeLeft  { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
@keyframes bohFadeRight { from { opacity: 0; transform: translateX(40px); }  to { opacity: 1; transform: none; } }
@keyframes bohFade      { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
[dir='rtl'] .animated.fadeInLeft  { animation-name: bohFadeRight !important; }
[dir='rtl'] .animated.fadeInRight { animation-name: bohFadeLeft !important; }
.animated.fadeInUp    { animation-name: bohFadeUp !important; }
.animated.fadeInLeft  { animation-name: bohFadeLeft !important; }
.animated.fadeInRight { animation-name: bohFadeRight !important; }
.animated.fadeIn      { animation-name: bohFade !important; }
.animated {
  animation-duration: 1s !important;
  animation-timing-function: cubic-bezier(.16, 1, .3, 1) !important;
  animation-fill-mode: both;
}
.animated.animated-slow { animation-duration: 1.15s !important; }
.animated.animated-fast { animation-duration: .6s !important; }
/* Phones: content appears instantly — no scroll choreography on small screens. */
@media (max-width: 767px) {
  .elementor-invisible { visibility: visible !important; }
  .animated { animation: none !important; }
}

/* ---------- Product image float: retired ----------
   The infinite bob competed with everything else on the page. Images now
   rest still; hover states and entrances carry the motion instead. */
.boh-float img { animation: none; }

/* ---------- Global button normalization (Elementor button = shortcode button metrics) ---------- */
.boh-btn { min-height: 52px; padding: 12px 26px; line-height: 1.3; text-align: center; box-sizing: border-box; }
.elementor-widget-button .elementor-button {
  line-height: 1.3 !important;
  min-height: 52px; height: auto; box-sizing: border-box;
  padding-top: 12px !important; padding-bottom: 12px !important;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color .25s cubic-bezier(.22,1,.36,1), color .25s cubic-bezier(.22,1,.36,1), border-color .25s ease, transform .25s cubic-bezier(.22,1,.36,1);
}
.boh-mobilebar a { height: auto; padding: 12px 10px; }
@media (hover: hover) and (pointer: fine) {
  .elementor-widget-button .elementor-button:hover,
  .boh-btn:hover { transform: translateY(-2px); }
}
.boh-btn:active, .elementor-widget-button .elementor-button:active { transform: scale(.97); }
/* Subtle shine sweep — reserved for the two signature CTAs (hero + header), not
   blanket-applied to every gold button, since these are the highest-frequency
   element on the site. */
.boh-btn--gold { position: relative; overflow: hidden; }
.boh-hero-v2 .boh-btn--gold::after,
.boh-header .boh-btn--gold::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 44%; left: -60%;
  background: linear-gradient(105deg, transparent, rgba(255, 253, 248, .38), transparent);
  transform: skewX(-18deg);
  transition: left .5s var(--boh-ease);
  pointer-events: none;
}
.boh-hero-v2 .boh-btn--gold:hover::after,
.boh-header .boh-btn--gold:hover::after { left: 120%; }

/* ---------- Hero v2 (full-bleed photo, text left) ---------- */
.boh-hero-v2 { position: relative; }
.boh-hero-v2 h1 { text-shadow: 0 2px 24px rgba(8, 12, 9, .45); }
.boh-hero-sub { text-shadow: 0 1px 14px rgba(8, 12, 9, .5); }
/* Thin gold inset frame — quiet editorial detail (desktop only) */
@media (min-width: 1025px) {
  .boh-hero-v2::after {
    content: ''; position: absolute; inset: 22px; z-index: 1;
    border: 1px solid rgba(210, 179, 106, .28);
    pointer-events: none;
  }
}
/* On tablet/mobile the text spans most of the frame; deepen the scrim so copy stays AA-readable over the bottles. */
@media (max-width: 1024px) {
  .boh-hero-v2::before,
  .boh-hero-v2 > .elementor-background-overlay {
    background: linear-gradient(180deg, rgba(8,12,9,.78) 0%, rgba(8,12,9,.55) 52%, rgba(8,12,9,.78) 100%) !important;
  }
}
/* background-attachment: fixed is unreliable on touch devices; fall back to scroll. */
@media (max-width: 1024px), (hover: none) {
  .boh-hero-v2 { background-attachment: scroll !important; }
}

/* ---------- Editorial photo stack (story section) ----------
   Large portrait photo filling the column, a smaller overlapping accent
   photo at the lower corner, and a hairline gold frame offset behind —
   layered depth without leaving the grid. */
.boh-photo-stack { position: relative; }
.boh-photo-stack::before {
  content: ''; position: absolute; z-index: 0;
  inset-inline-start: -16px; top: -16px; width: 100%; height: 100%;
  border: 1px solid rgba(184, 149, 69, .5);
  pointer-events: none;
}
.boh-photo-main { position: relative; z-index: 1; }
.boh-photo-main img { width: 100%; height: 620px; object-fit: cover; display: block; }
.boh-photo-accent {
  position: absolute !important; z-index: 2;
  inset-inline-end: -18px; bottom: -44px; width: 46%;
}
.boh-photo-accent img {
  width: 100%; height: 230px; object-fit: cover; display: block;
  border: 8px solid #F7F0E4;
  box-shadow: 0 18px 44px rgba(19, 35, 27, .22);
}
.e-con.boh-photo-col { padding-bottom: 44px; }
.boh-photo-stack--dark::before { border-color: rgba(210, 179, 106, .4); }
.boh-photo-stack--dark .boh-photo-main img { height: 480px; }
.boh-photo-col:has(.boh-photo-stack--dark) { padding-bottom: 0; }
@media (max-width: 1024px) {
  .boh-photo-main img { height: 480px; }
  .boh-photo-accent img { height: 180px; }
}
@media (max-width: 767px) {
  .boh-photo-stack::before { inset-inline-start: -10px; top: -10px; }
  .boh-photo-main img { height: 400px; }
  .boh-photo-accent { width: 52%; bottom: -28px; inset-inline-end: 4px; }
  .boh-photo-accent img { height: 150px; border-width: 6px; }
  .e-con.boh-photo-col { padding-bottom: 36px; }
}

/* ---------- Header behaviors (Elementor Pro header template uses .boh-header) ---------- */
.boh-header { transition: background-color .35s var(--boh-ease), box-shadow .35s var(--boh-ease); }
body.boh-scrolled .boh-header { background-color: rgba(11, 13, 10, .96) !important; box-shadow: 0 6px 24px rgba(11,13,10,.25); }

/* ---------- Utility: measure control for long copy ---------- */
.boh-measure { max-width: 62ch; }

/* ---------- Tables (comparison/facts) ---------- */
.boh-facts table { width: 100%; border-collapse: collapse; font-family: 'Manrope', sans-serif; font-size: 15px; }
.boh-facts th, .boh-facts td { text-align: start; padding: 14px 16px; border-bottom: 1px solid rgba(184,149,69,.3); }
.boh-facts td { color: #3A4A40; }
.boh-facts th { font-weight: 600; color: var(--boh-taupe); text-transform: uppercase; font-size: 12px; letter-spacing: 1px; }

/* ---------- Arabic typography ---------- */
[dir='rtl'] body, [dir='rtl'] p, [dir='rtl'] .boh-btn, [dir='rtl'] .boh-nav-list a { letter-spacing: 0 !important; }
[dir='rtl'] h1, [dir='rtl'] h2, [dir='rtl'] h3, [dir='rtl'] h4 { font-family: 'Noto Naskh Arabic', serif !important; letter-spacing: 0 !important; }
[dir='rtl'] body, [dir='rtl'] p, [dir='rtl'] a, [dir='rtl'] span, [dir='rtl'] li { font-family: 'IBM Plex Sans Arabic', 'Manrope', sans-serif; }

/* ---------- Fixed header ---------- */
.boh-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1200;
  background: linear-gradient(180deg, rgba(8, 12, 9, .72) 0%, rgba(8, 12, 9, .35) 60%, rgba(8, 12, 9, 0) 100%);
  border-bottom: 1px solid transparent;
}
body.admin-bar .boh-header { top: 32px; }
body.boh-scrolled .boh-header {
  background: rgba(11, 13, 10, .97) !important;
  border-bottom-color: rgba(184, 149, 69, .35);
  box-shadow: 0 8px 28px rgba(8, 12, 9, .35);
}
.boh-header .boh-btn { min-height: 42px; padding: 8px 20px; font-size: 11.5px; white-space: nowrap; }
.boh-header-logo img { width: auto !important; height: 48px !important; }
@media (max-width: 767px) { .boh-header-logo img { height: 40px !important; } }
.boh-header .boh-langs { color: #FFFDF8; white-space: nowrap; }
.boh-header-right { flex-shrink: 0; }
.boh-header-logo img { transition: opacity .25s ease; }
.boh-header-logo:hover img { opacity: .85; }
/* Keep the nav on one line; collapse handled by Elementor's burger at tablet */
.boh-header .elementor-nav-menu--main .elementor-nav-menu a { white-space: nowrap; }
.boh-header .elementor-nav-menu--main .elementor-item { padding-left: 6px !important; padding-right: 6px !important; }
.boh-header .elementor-nav-menu--main .elementor-nav-menu { flex-wrap: nowrap !important; }
/* Elementor Pro nav dropdown on dark */
.boh-header .elementor-nav-menu--dropdown { background-color: #0B0D0A; }
.boh-header .elementor-nav-menu--dropdown a { color: #FFFDF8; }
.boh-header .elementor-nav-menu--dropdown a:hover { color: #D2B36A; }

/* ---------- Footer ---------- */
.boh-footer { color: #B9B2A0; }
.boh-footer h4 { color: #FFFDF8; }
.boh-footer ul { list-style: none; margin: 0; padding: 0; }
.boh-footer li { margin: 0 0 12px; }
.boh-footer a { color: #B9B2A0; text-decoration: none; transition: color .2s ease; font-size: 15px; }
.boh-footer a:hover { color: #D2B36A; }
.boh-footer .boh-langs { color: #FFFDF8; }
.boh-footer-legal { font-size: 13px; }
.boh-footer-legal a, .boh-footer-legal .boh-footer-cookie-link { font-size: 13px; margin-inline-end: 18px; }
.boh-footer-legal .boh-footer-cookie-link { color: #B9B2A0; text-decoration: none; transition: color .2s ease; }
.boh-footer-legal .boh-footer-cookie-link:hover { color: #D2B36A; }

/* ---------- Related products ---------- */
.boh-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .boh-related { grid-template-columns: 1fr; } }
.boh-related-card {
  display: flex; flex-direction: column; gap: 10px; padding: 28px 26px;
  border: 1px solid rgba(184,149,69,.35); background: #FFFDF8; text-decoration: none !important;
  transition: transform .35s var(--boh-ease), border-color .3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .boh-related-card:hover { transform: translateY(-6px); border-color: #B89545; }
}
.boh-related-name { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 600; color: #13231B; line-height: 1.2; }
.boh-related-note { font-family: 'Manrope', sans-serif; font-size: 14px; color: #8B806D; line-height: 1.6; }
.boh-related-more { font-family: 'Manrope', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #B89545; margin-top: 6px; }

/* ---------- Chips (facts) ---------- */
.boh-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.boh-chip {
  font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .5px;
  color: #D2B36A; border: 1px solid rgba(184,149,69,.5); padding: 9px 16px; border-radius: 2px;
}
.boh-chip--light { color: #6b5a2a; border-color: rgba(184,149,69,.6); }

/* ---------- Product FAQ (details) ---------- */
.boh-pfaq-item { border-bottom: 1px solid rgba(184,149,69,.35); padding: 4px 0; }
.boh-pfaq-item summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center;
  font-family: 'Cormorant Garamond', serif; font-size: 21px; font-weight: 600; color: #13231B; padding: 16px 0;
}
[dir='rtl'] .boh-pfaq-item summary { font-family: 'Noto Naskh Arabic', serif; }
.boh-pfaq-item summary::after { content: '+'; color: #B89545; font-size: 24px; font-family: 'Manrope', sans-serif; transition: transform .25s var(--boh-ease); }
.boh-pfaq-item[open] summary::after { transform: rotate(45deg); }
.boh-pfaq-item p { font-family: 'Manrope', sans-serif; font-size: 15.5px; line-height: 1.75; color: #3A4A40; padding: 0 0 18px; margin: 0; }
[dir='rtl'] .boh-pfaq-item p { font-family: 'IBM Plex Sans Arabic', sans-serif; }

/* ---------- Search & 404: Elementor archive template owns the page ----------
   Astra keeps rendering its native results loop and archive title as siblings
   of the Elementor archive wrapper inside #main; hide them and let the
   template's full-bleed sections span the viewport. */
body.search .site-main > .ast-row,
body.error404 .site-main > .ast-row,
body.search .ast-archive-description,
body.error404 .ast-archive-description,
body.search .site-main > article,
body.error404 .site-main > article { display: none; }
body.search #content .ast-container,
body.error404 #content .ast-container {
  max-width: 100%; padding-left: 0; padding-right: 0;
}
body.search #primary, body.error404 #primary { margin: 0; padding: 0; }

/* ---------- Search results ---------- */
.boh-search-list { display: flex; flex-direction: column; gap: 18px; }
.boh-search-item {
  display: flex; align-items: center; gap: 22px; padding: 22px 26px;
  border: 1px solid rgba(184,149,69,.3); background: #FFFDF8; text-decoration: none !important;
  transition: transform .3s var(--boh-ease), border-color .3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .boh-search-item:hover { transform: translateY(-4px); border-color: #B89545; }
}
.boh-search-thumb { flex: 0 0 auto; width: 76px; height: 76px; border-radius: 2px; overflow: hidden; }
.boh-search-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.boh-search-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.boh-search-type { font-family: 'Manrope', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: #B89545; }
[dir='rtl'] .boh-search-type { letter-spacing: 0; }
.boh-search-title { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 600; color: #13231B; line-height: 1.25; }
[dir='rtl'] .boh-search-title { font-family: 'Noto Naskh Arabic', serif; }
.boh-search-excerpt { font-family: 'Manrope', sans-serif; font-size: 14.5px; color: #6b6154; line-height: 1.6; }
.boh-search-more { font-family: 'Manrope', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #737A36; margin-top: 2px; }
.boh-search-empty { text-align: center; padding: 20px 0; font-family: 'Manrope', sans-serif; font-size: 16px; color: #6b6154; }
@media (max-width: 600px) {
  .boh-search-item { flex-direction: column; align-items: flex-start; gap: 12px; }
  .boh-search-thumb { width: 100%; height: 160px; }
}

/* ---------- 404 ---------- */
.boh-404-num {
  font-family: 'Cormorant Garamond', serif; font-weight: 600; line-height: .85;
  font-size: clamp(96px, 22vw, 220px); color: transparent;
  -webkit-text-stroke: 1.5px rgba(184,149,69,.55);
}

/* ---------- Cookie consent (CMP) ----------
   Self-contained, no external dependency: localStorage-backed, three categories
   (necessary/analytics/marketing), banner + reopenable preferences panel. */
.boh-consent-banner {
  position: fixed; z-index: 9500; left: 0; right: 0; bottom: 0;
  background: #0B0D0A; border-top: 1px solid rgba(184,149,69,.4);
  padding: 22px 24px calc(22px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 28px rgba(8,12,9,.35);
  display: none;
}
.boh-consent-banner.is-visible { display: block; animation: bohFadeUp .5s cubic-bezier(.22,1,.36,1); }
.boh-consent-inner { max-width: 1220px; margin: 0 auto; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.boh-consent-text { flex: 1 1 420px; font-family: 'Manrope', sans-serif; font-size: 14px; line-height: 1.6; color: #B9B2A0; }
.boh-consent-text a { color: #D2B36A; text-decoration: underline; }
.boh-consent-actions { display: flex; gap: 10px; flex-wrap: wrap; flex: 0 0 auto; }
.boh-consent-actions button {
  font-family: 'Manrope', sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase;
  padding: 12px 20px; border-radius: 2px; cursor: pointer; white-space: nowrap; min-height: 44px;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
[dir='rtl'] .boh-consent-actions button { letter-spacing: 0; }
.boh-consent-accept { background: #B89545; color: #13231B; border: 1px solid #B89545; }
.boh-consent-accept:hover { background: #D2B36A; }
.boh-consent-reject { background: transparent; color: #FFFDF8; border: 1px solid rgba(184,149,69,.5); }
.boh-consent-reject:hover { border-color: #B89545; }
.boh-consent-manage { background: transparent; color: #D2B36A; border: 1px solid transparent; text-decoration: underline; padding-left: 6px; padding-right: 6px; }

/* Preferences modal */
.boh-consent-modal-overlay {
  position: fixed; inset: 0; z-index: 9600; background: rgba(8,12,9,.6);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.boh-consent-modal-overlay.is-visible { display: flex; }
.boh-consent-modal {
  background: #FFFDF8; max-width: 560px; width: 100%; max-height: 85vh; overflow-y: auto;
  padding: 34px; border: 1px solid rgba(184,149,69,.4);
}
.boh-consent-modal h2 { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 26px; color: #13231B; margin: 0 0 10px; }
[dir='rtl'] .boh-consent-modal h2 { font-family: 'Noto Naskh Arabic', serif; }
.boh-consent-modal > p { font-family: 'Manrope', sans-serif; font-size: 14px; color: #6b6154; line-height: 1.6; margin: 0 0 24px; }
.boh-consent-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 18px 0; border-top: 1px solid rgba(184,149,69,.25); }
.boh-consent-row:first-of-type { border-top: none; }
.boh-consent-row-text strong { display: block; font-family: 'Manrope', sans-serif; font-size: 15px; font-weight: 600; color: #13231B; margin-bottom: 4px; }
.boh-consent-row-text span { font-family: 'Manrope', sans-serif; font-size: 13.5px; color: #6b6154; line-height: 1.55; }
.boh-consent-switch { position: relative; flex: 0 0 auto; width: 46px; height: 26px; }
.boh-consent-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.boh-consent-switch-track { position: absolute; inset: 0; background: #D9CCB7; border-radius: 999px; transition: background-color .25s ease; pointer-events: none; }
.boh-consent-switch-track::after {
  content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #FFFDF8; transition: inset-inline-start .25s ease;
}
.boh-consent-switch input:checked + .boh-consent-switch-track { background: #737A36; }
.boh-consent-switch input:checked + .boh-consent-switch-track::after { inset-inline-start: 23px; }
.boh-consent-switch input:disabled + .boh-consent-switch-track { opacity: .6; }
.boh-consent-switch input:focus-visible + .boh-consent-switch-track { outline: 2px solid #B89545; outline-offset: 2px; }
.boh-consent-modal-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.boh-consent-modal-actions button {
  font-family: 'Manrope', sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase;
  padding: 13px 22px; border-radius: 2px; cursor: pointer; min-height: 44px;
}
[dir='rtl'] .boh-consent-modal-actions button { letter-spacing: 0; }
.boh-consent-save { background: #B89545; color: #13231B; border: 1px solid #B89545; }
.boh-consent-save:hover { background: #D2B36A; }
.boh-consent-close { background: transparent; color: #13231B; border: 1px solid rgba(184,149,69,.5); }
.boh-footer-cookie-link { background: none; border: none; padding: 0; font: inherit; cursor: pointer; }

@media (max-width: 680px) {
  .boh-consent-banner { padding: 16px 18px calc(14px + env(safe-area-inset-bottom)); }
  .boh-consent-inner { flex-direction: column; align-items: stretch; gap: 14px; }
  /* flex-basis 420px is a desktop row-width; in the column layout it becomes height and
     inflates the text block to 420px tall, covering most of the phone screen. */
  .boh-consent-text { flex: 0 0 auto; font-size: 13px; line-height: 1.5; }
  .boh-consent-actions { justify-content: stretch; gap: 8px; }
  .boh-consent-actions button { flex: 1 1 auto; padding: 10px 14px; }
}
/* The consent banner's height varies with wrapped text/stacked buttons on narrow screens,
   so a fixed offset above the mobile WhatsApp bar isn't reliable — hide that bar instead
   while consent is open (JS toggles .boh-consent-open on body), then restore it on dismiss. */
@media (max-width: 767px) {
  body.boh-consent-open .boh-mobilebar { display: none; }
}

/* ---------- Product fact cards (icon grid, replaces bare table on product pages) ---------- */
.boh-fact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.boh-fact-card {
  display: flex; flex-direction: column; gap: 8px; padding: 20px 20px 22px;
  background: #FFFDF8; border: 1px solid rgba(184,149,69,.32); transition: border-color .3s ease, transform .3s var(--boh-ease);
}
@media (hover: hover) and (pointer: fine) {
  .boh-fact-card:hover { border-color: var(--boh-gold); transform: translateY(-3px); }
}
.boh-fact-icon { line-height: 0; }
.boh-fact-label { font-family: 'Manrope', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--boh-taupe); }
.boh-fact-value { font-family: 'Manrope', sans-serif; font-size: 15.5px; font-weight: 600; color: #13231B; }
[dir='rtl'] .boh-fact-label, [dir='rtl'] .boh-fact-value { font-family: 'IBM Plex Sans Arabic', sans-serif; letter-spacing: 0; }
@media (max-width: 600px) { .boh-fact-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .boh-fact-card { padding: 16px 16px 18px; } }

/* ---------- Pairing / use-case chips ---------- */
.boh-chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.boh-chip {
  display: inline-flex; align-items: center; padding: 9px 18px; font-family: 'Manrope', sans-serif; font-size: 13.5px;
  font-weight: 600; color: #3A4A40; background: #F7F0E4; border: 1px solid rgba(184,149,69,.35);
}
[dir='rtl'] .boh-chip { font-family: 'IBM Plex Sans Arabic', sans-serif; }

/* Decorative pseudo-elements (hero frame glow) must never create a horizontal scrollbar.
   'clip' does not create a scroll container, so position:sticky keeps working. */
html, body { overflow-x: clip; }

/* ---------- Guide articles: readable measure + editorial components ---------- */
.boh-article.e-con > .e-con-inner { max-width: 840px; }
.boh-article-meta {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  font-family: 'Manrope', sans-serif; font-size: 13px; color: #8B806D;
  padding-bottom: 16px; border-bottom: 1px solid rgba(184,149,69,.35);
}
[dir='rtl'] .boh-article-meta { font-family: 'IBM Plex Sans Arabic', sans-serif; }
.boh-article-meta .dot { color: #B89545; }
.boh-answer {
  font-family: 'Cormorant Garamond', serif; font-size: 22px; line-height: 1.6; color: #13231B;
  background: #F7F0E4; border-inline-start: 3px solid #B89545; padding: 26px 30px;
}
[dir='rtl'] .boh-answer { font-family: 'Noto Naskh Arabic', serif; }
.boh-takeaways { background: #F7F0E4; border: 1px solid rgba(184,149,69,.4); padding: 26px 28px; }
.boh-takeaways-head {
  font-family: 'Manrope', sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase; color: #7A5F24; margin-bottom: 14px;
}
[dir='rtl'] .boh-takeaways-head { letter-spacing: 0; font-family: 'IBM Plex Sans Arabic', sans-serif; }
.boh-takeaways ul { list-style: none; margin: 0; padding: 0; }
.boh-takeaways li {
  position: relative; padding-inline-start: 26px; margin-bottom: 10px;
  font-family: 'Manrope', sans-serif; font-size: 15.5px; line-height: 1.6; color: #3A4A40;
}
[dir='rtl'] .boh-takeaways li { font-family: 'IBM Plex Sans Arabic', sans-serif; }
.boh-takeaways li:last-child { margin-bottom: 0; }
.boh-takeaways li::before { content: ''; position: absolute; inset-inline-start: 0; top: 11px; width: 14px; height: 2px; background: #B89545; }
.boh-sources { font-family: 'Manrope', sans-serif; font-size: 13px; color: #8B806D; line-height: 1.7; }
.boh-sources span { font-weight: 600; color: #7A5F24; }
[dir='rtl'] .boh-sources { font-family: 'IBM Plex Sans Arabic', sans-serif; }
.boh-article .elementor-widget-text-editor ul { margin: 12px 0 0; padding-inline-start: 22px; }
.boh-article .elementor-widget-text-editor li { margin-bottom: 8px; }
/* Catalogue Packaging Models — real render cards (private label page) */
.boh-model-card { text-align: center; }
.boh-model-img {
  width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover; display: block;
  transition: transform .35s var(--boh-ease);
}
@media (hover: hover) and (pointer: fine) {
  .boh-model-card:hover .boh-model-img { transform: scale(1.05); }
}
.boh-model-meta { display: flex; flex-direction: column; gap: 3px; align-items: center; font-family: 'Manrope', sans-serif; }
[dir='rtl'] .boh-model-meta { font-family: 'IBM Plex Sans Arabic', sans-serif; }
.boh-model-code { font-size: 14px; font-weight: 700; letter-spacing: 1.5px; color: #13231B; }
.boh-model-name { font-family: 'Cormorant Garamond', serif; font-size: 18px; font-weight: 600; color: #7A5F24; }
[dir='rtl'] .boh-model-name { font-family: 'Noto Naskh Arabic', serif; }
.boh-model-sizes { font-size: 12.5px; font-weight: 600; letter-spacing: .5px; color: #8B806D; }

/* Compare the Collection — premium editorial table (products index) */
.boh-compare-lux { overflow-x: auto; border: 1px solid rgba(184,149,69,.45); }
.boh-compare-lux table { width: 100%; min-width: 640px; border-collapse: collapse; font-family: 'Manrope', sans-serif; font-size: 15px; background: #FFFDF8; }
[dir='rtl'] .boh-compare-lux table { font-family: 'IBM Plex Sans Arabic', sans-serif; }
.boh-compare-lux thead th {
  background: linear-gradient(150deg, #0B0D0A, #13231B) !important; color: #D2B36A;
  font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 16px 18px; text-align: start; border-bottom: 1px solid rgba(184,149,69,.5);
}
[dir='rtl'] .boh-compare-lux thead th { letter-spacing: 0; }
.boh-compare-lux tbody th {
  font-family: 'Cormorant Garamond', serif; font-size: 19px; font-weight: 600; color: #13231B;
  padding: 16px 18px; text-align: start; border-bottom: 1px solid rgba(184,149,69,.28);
}
[dir='rtl'] .boh-compare-lux tbody th { font-family: 'Noto Naskh Arabic', serif; }
.boh-compare-lux tbody td { padding: 16px 18px; color: #3A4A40; border-bottom: 1px solid rgba(184,149,69,.28); }
.boh-compare-lux tbody tr:nth-child(even) { background: #F7F0E4; }
.boh-compare-lux tbody tr:last-child th, .boh-compare-lux tbody tr:last-child td { border-bottom: 0; }
@media (hover: hover) and (pointer: fine) {
  .boh-compare-lux tbody tr { transition: background-color .25s ease; }
  .boh-compare-lux tbody tr:hover { background: rgba(184,149,69,.12); }
}

/* Comparison table (early vs late harvest) */
.boh-compare { overflow-x: auto; }
.boh-compare table { width: 100%; border-collapse: collapse; font-family: 'Manrope', sans-serif; font-size: 14.5px; }
[dir='rtl'] .boh-compare table { font-family: 'IBM Plex Sans Arabic', sans-serif; }
.boh-compare th, .boh-compare td { text-align: start; padding: 12px 14px; border-bottom: 1px solid rgba(184,149,69,.3); color: #3A4A40; }
.boh-compare th { font-weight: 600; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #7A5F24; }
[dir='rtl'] .boh-compare th { letter-spacing: 0; }
.boh-compare td.rowhead { font-weight: 600; color: #13231B; }

/* Guide index card number */
.boh-guide-num {
  font-family: 'Cormorant Garamond', serif; font-size: 34px; font-weight: 600; line-height: 1;
  color: rgba(184,149,69,.45); display: block;
}

/* ---------- Trust strip: badge tiles + staggered reveal ----------
   Reveal is CSS-transition based (interruptible, cheap) driven by an
   IntersectionObserver in boh-site.js adding .in-view once. */
.boh-trust { display: grid; grid-template-columns: repeat(4, 1fr); }
.boh-trust-item {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px;
  padding: 10px 18px;
  border-inline-start: 1px solid rgba(184,149,69,.35);
}
.boh-trust-item:first-child { border-inline-start: 0; }
.boh-trust-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; color: #737A36;
  border: 1px solid rgba(184,149,69,.5); border-radius: 50%;
  background: #FFFDF8;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .3s var(--boh-ease);
}
.boh-trust-label { font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 14.5px; color: #13231B; line-height: 1.35; }
[dir='rtl'] .boh-trust-label { font-family: 'IBM Plex Sans Arabic', sans-serif; }
@media (hover: hover) and (pointer: fine) {
  .boh-trust-item:hover .boh-trust-icon { background: #B89545; color: #13231B; border-color: #B89545; transform: translateY(-3px); }
}
/* Staggered reveal (works on mobile too — light, transition-based) */
@media (prefers-reduced-motion: no-preference) {
  [data-boh-reveal] .boh-trust-item {
    opacity: 0; transform: translateY(16px);
    transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
    transition-delay: calc(var(--i, 0) * 110ms);
  }
  [data-boh-reveal].in-view .boh-trust-item { opacity: 1; transform: none; }
}
@media (max-width: 767px) {
  .boh-trust { grid-template-columns: repeat(4, 1fr); }
  .boh-trust-item { padding: 2px 5px; gap: 8px; }
  .boh-trust-icon { width: 38px; height: 38px; }
  .boh-trust-icon svg { width: 20px; height: 20px; }
  .boh-trust-label { font-size: 10.5px; letter-spacing: .2px; }
}

/* ---------- Quality principle cards (numbered, icon tile) ----------
   Motion: entrance handled by Elementor stagger; hover is a color-only
   micro-interaction (gold fill on the icon tile, number brightens) so it
   stays engaging without competing transforms. */
.boh-qhead { display: flex; align-items: center; justify-content: space-between; }
.boh-qicon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; color: #737A36; background: #F7F0E4;
  border: 1px solid rgba(184,149,69,.5);
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.boh-qnum {
  font-family: 'Cormorant Garamond', serif; font-size: 38px; font-weight: 600; line-height: 1;
  color: rgba(184,149,69,.38); transition: color .3s ease;
}
.boh-qcard-dark .boh-qicon { color: #D2B36A; background: rgba(184,149,69,.08); }
.boh-qcard-dark .boh-qnum { color: rgba(210,179,106,.4); }
@media (hover: hover) and (pointer: fine) {
  .boh-qcard:hover .boh-qicon { background: #B89545; color: #13231B; border-color: #B89545; }
  .boh-qcard:hover .boh-qnum { color: rgba(122,95,36,.9); }
  .boh-qcard-dark:hover .boh-qnum { color: rgba(210,179,106,.85); }
}

/* ---------- Dark editorial product cards (The Collection + Aromatic) ---------- */
.boh-card-dark .boh-card-img, .boh-card-forest .boh-card-img { position: relative; }
.boh-card-dark .boh-card-img::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 64px;
  background: linear-gradient(to bottom, rgba(37,39,31,0), #25271F); pointer-events: none;
}
.boh-card-forest .boh-card-img::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 64px;
  background: linear-gradient(to bottom, rgba(19,35,27,0), #13231B); pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .boh-card-dark:hover, .boh-card-forest:hover { box-shadow: 0 22px 48px -20px rgba(0,0,0,.55); }
}

/* ---------- Product card badge chip (The Collection) ----------
   Sits between the photo and the title (never over the bottle imagery). */
.boh-card-badge {
  display: inline-block; align-self: flex-start; padding: 6px 12px;
  background: rgba(11,13,10,.5); color: #D2B36A;
  font-family: 'Manrope', sans-serif; font-size: 10.5px; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase;
  border: 1px solid rgba(184,149,69,.45);
}
[dir='rtl'] .boh-card-badge { font-family: 'IBM Plex Sans Arabic', sans-serif; letter-spacing: 0; }

/* ---------- Product hero photo: framed, glowing presentation ---------- */
.boh-hero-photo { position: relative; }
.boh-hero-photo.elementor-widget-image img,
.boh-hero-photo.elementor-widget-theme-post-featured-image img {
  width: 100%; aspect-ratio: 3/4; object-fit: cover;
  border: 1px solid rgba(184,149,69,.5);
  /* Dual layer: deep drop for weight + soft gold halo so the frame reads on dark heroes. */
  box-shadow: 0 30px 64px -22px rgba(0,0,0,.78), 0 0 60px -6px rgba(184,149,69,.32);
}
.boh-hero-photo::before {
  content: ''; position: absolute; top: 16px; right: -16px; bottom: -16px; left: 16px;
  border: 1px solid rgba(184,149,69,.35); pointer-events: none;
}
.boh-hero-photo::after {
  content: ''; position: absolute; inset: -56px; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 60% at 50% 44%, rgba(184,149,69,.26), transparent 72%);
}
[dir='rtl'] .boh-hero-photo::before { right: 16px; left: -16px; }
@media (max-width: 767px) {
  .boh-hero-photo::before { top: 10px; right: -10px; bottom: -10px; left: 10px; }
  [dir='rtl'] .boh-hero-photo::before { right: 10px; left: -10px; }
}
/* Light-background variant: softer forest-toned shadow, slightly warmer glow. */
.boh-photo-light.elementor-widget-image img { box-shadow: 0 28px 56px -26px rgba(19,35,27,.38); }
.boh-photo-light::after { background: radial-gradient(58% 58% at 50% 44%, rgba(184,149,69,.22), transparent 72%); }
/* Square variant (provenance): balances a wide column against the text column
   without over-cropping the portrait source. */
.boh-photo-wide.elementor-widget-image img { aspect-ratio: 1/1; }

/* ---------- Product lifestyle photo ---------- */
.boh-product-lifestyle-img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }
.boh-lifestyle-photo.elementor-widget-image img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }

@media (prefers-reduced-motion: reduce) {
  .boh-consent-banner.is-visible { animation: none; }
}

/* ---------- Legal pages: sticky table of contents ---------- */
.boh-legal-anchor { scroll-margin-top: 96px; }
.boh-legal-toc { position: sticky; top: 96px; border-inline-start: 1px solid rgba(184,149,69,.35); padding-inline-start: 20px; }
.boh-legal-toc-label { display: block; font-family: 'Manrope', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: #8B806D; margin-bottom: 14px; }
[dir='rtl'] .boh-legal-toc-label { letter-spacing: 0; }
.boh-legal-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.boh-legal-toc li { margin-bottom: 10px; }
.boh-legal-toc a { font-family: 'Manrope', sans-serif; font-size: 14px; color: #3A4A40; text-decoration: none; line-height: 1.4; }
.boh-legal-toc a:hover { color: #B89545; }
@media (max-width: 1023px) { .boh-legal-toc { position: static; border-inline-start: none; padding-inline-start: 0; border-bottom: 1px solid rgba(184,149,69,.35); padding-bottom: 20px; } }

/* ---------- Breadcrumbs ---------- */
.boh-crumbs { font-family: 'Manrope', sans-serif; font-size: 12.5px; letter-spacing: .5px; color: #8B806D; }
.boh-crumbs a { color: #B89545; text-decoration: none; }
.boh-crumbs a:hover { text-decoration: underline; }
.boh-crumbs .sep { margin: 0 8px; opacity: .6; }

/* ---------- Skip link ----------
   Astra's default .screen-reader-text:focus rule (which should expand this to a visible box) is
   getting overridden somewhere in the cascade — confirmed staying a 1×1px invisible box even on
   keyboard focus. Force it visible explicitly with brand-consistent styling and AA-safe contrast. */
html body a.skip-link.screen-reader-text:focus,
.skip-link:focus {
  position: fixed !important; top: 12px !important; inset-inline-start: 12px !important;
  width: auto !important; height: auto !important; clip: auto !important; clip-path: none !important;
  overflow: visible !important; white-space: normal !important;
  z-index: 100000 !important; background: #0B0D0A !important; color: #FFFDF8 !important;
  padding: 14px 22px !important; border-radius: 2px; border: 1px solid #B89545;
  font-family: 'Manrope', sans-serif; font-size: 14px; font-weight: 600; text-decoration: none;
}

/* ---------- Focus states ---------- */
a:focus-visible, button:focus-visible { outline: 2px solid var(--boh-gold); outline-offset: 3px; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .boh-float img { animation: none; }
  /* Drop movement, keep color/opacity feedback — reduced motion means gentler, not silent. */
  .boh-card:hover,
  .boh-card:hover .boh-card-img img,
  .boh-related-card:hover,
  .boh-fab:hover,
  .elementor-widget-button .elementor-button:hover,
  .boh-btn:hover { transform: none !important; }
  .boh-btn--gold::after { display: none; }
  .boh-goldline::after { transition: none; transform: scaleX(1); }
  .elementor-invisible { visibility: visible !important; opacity: 1 !important; animation: none !important; }
  .animated { animation: none !important; }
}