/* =====================================================================
   LONGEVIUM — Immersive homepage hero header (hand-coded child theme)
   Transparent nav overlaid on an auto-rotating 2-slide banner.
   No Elementor / Porto wrapper hacks — we own the markup, so the
   immersion is just: .lvh (relative) + .lvh__nav (absolute) over .lv-slider.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=DM+Sans:wght@400;500;700&display=swap');

/* ---- design tokens ---- */
.lvh,.lv-slider{
  --lv-forest:#2E4034;--lv-forest-deep:#21302A;--lv-forest-mid:#3A5142;
  --lv-tan:#D6B98E;--lv-tan-light:#F0E4D2;--lv-tan-mid:#E4CFAE;
  --lv-sage-a:#7C8A5E;--lv-sage-b:#8A9A5B;
  --lv-gold:#C9A24B;--lv-gold-light:#D8C48A;--lv-gold-lighter:#E4D2A0;
  --lv-on-dark:#F5F1E8;--lv-on-light-h:#24352B;--lv-on-tan-b:#5A4B38;
  --lv-serif:'Cormorant Garamond',Georgia,serif;--lv-sans:'DM Sans',system-ui,sans-serif;

  /* ---- page layout, matched to the rest of the homepage ----
   * The Elementor kit sets .e-con{--container-max-width:1440px} with
   * --container-default-padding-left/right:0, and that content sits inside
   * Porto's .container-fluid (--porto-fluid-spacing:20px each side). So every
   * section below the hero occupies exactly min(1440px, 100vw - 40px), centred.
   * Both --lvh-page and --lvh-gutter below reproduce that band, so the logo and
   * the headline line up with the sections underneath at ANY viewport width.
   * Because box-sizing is border-box, the wrappers use
   * max-width: page + 2*gutter and then pad the gutter back in. */
  --lvh-page:1440px;
  --lvh-gutter:20px;
}
.lvh,.lvh *,.lv-slider,.lv-slider *{box-sizing:border-box;}

/* =====================================================================
   1. HEADER SHELL + IMMERSION  (the whole point)
   ===================================================================== */
.lvh{position:relative;width:100%;}

/* Nav floats transparently ON the banner. z-index keeps it above + clickable. */
.lvh__nav{position:absolute;top:0;left:0;right:0;z-index:20;background:transparent;}
.lvh__bar{display:flex;align-items:center;gap:clamp(20px,3vw,40px);
  width:100%;max-width:calc(var(--lvh-page) + var(--lvh-gutter) * 2);
  margin:0 auto;padding:22px var(--lvh-gutter);}

.lvh__logo{flex:0 0 auto;display:inline-flex;}
.lvh__logo img{height:46px;width:auto;display:block;}

/* main menu (wp_nav_menu output) */
/* flex-wrap is a safety net: if the menu ever outgrows the bar it wraps to a
   second line instead of overflowing and forcing a horizontal scrollbar. */
.lvh__menu{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,1.8vw,28px);
  list-style:none;margin:0;padding:0;min-width:0;}
.lvh__menu li{margin:0;}
.lvh__menu a{color:var(--lv-on-dark);text-decoration:none;
  font:600 14px/1 var(--lv-sans);letter-spacing:.3px;padding:6px 0;display:inline-flex;align-items:center;gap:8px;
  border-bottom:2px solid transparent;transition:color .2s,border-color .2s;}
.lvh__menu a:hover,.lvh__menu .current-menu-item>a{color:var(--lv-gold-lighter);border-color:var(--lv-gold);}
/* per-item Font Awesome icons injected from the menu item's CSS Classes */
.lvh__menu a > i{font-size:.95em;line-height:0;color:inherit;}

/* right-side actions: language switcher, account, cart, search */
.lvh__actions{margin-left:auto;display:flex;align-items:center;gap:clamp(14px,1.6vw,22px);}
.lvh__actions a{color:var(--lv-on-dark);text-decoration:none;font:600 13px/1 var(--lv-sans);display:inline-flex;align-items:center;gap:8px;}
.lvh__actions a:hover{color:var(--lv-gold-lighter);}
.lvh__icon svg{width:22px;height:22px;display:block;fill:none;stroke:currentColor;stroke-width:1.6;}
.lvh__cart{position:relative;}
.lvh__cart-count{position:absolute;top:-8px;right:-10px;min-width:18px;height:18px;padding:0 4px;
  border-radius:9px;background:var(--lv-gold);color:var(--lv-forest);
  font:700 11px/18px var(--lv-sans);text-align:center;}

/* language switcher (Polylang pll_the_languages) */
.lvh__lang{list-style:none;margin:0;padding:0;display:flex;gap:10px;align-items:center;}
.lvh__lang a{color:var(--lv-on-dark);text-decoration:none;font:600 13px/1 var(--lv-sans);display:inline-flex;align-items:center;gap:6px;}
.lvh__lang img{height:12px;width:auto;border-radius:1px;}

/* mobile hamburger — hidden on desktop */
.lvh__toggle{display:none;margin-left:auto;background:none;border:0;cursor:pointer;padding:6px;color:var(--lv-on-dark);}
.lvh__toggle svg{width:26px;height:26px;stroke:currentColor;stroke-width:2;fill:none;}

/* =====================================================================
   2. SLIDER  (visual — unchanged from the tested build, hacks removed)
   ===================================================================== */
.lv-slider{position:relative;overflow:hidden;width:100%;max-width:100%;font-family:var(--lv-sans);}
.lv-slider__track{display:flex;transition:transform .6s cubic-bezier(.4,0,.2,1);will-change:transform;}

.lv-hero{position:relative;overflow:hidden;font-family:var(--lv-sans);flex:0 0 100%;min-width:100%;
  display:flex;align-items:center;min-height:clamp(480px,82vh,760px);padding:0 var(--lvh-gutter);}
/* leave room at the top so the copy never tucks under the floating nav */
.lv-hero__inner{position:relative;z-index:1;display:flex;align-items:center;
  gap:clamp(24px,5vw,64px);width:100%;max-width:var(--lvh-page);margin:0 auto;
  padding-top:clamp(80px,9vh,120px);}
.lv-hero__copy{display:flex;flex-direction:column;align-items:flex-start;gap:22px;flex:1 1 56%;max-width:600px;}
/* The card does NOT grow: with the band at 1440px a flexible media column left
   the card floating in ~260px of dead space. space-between on the inner pins the
   copy to one edge of the band and the card to the other, so the composition
   still reads as edge-to-edge — and it stays symmetric on the row-reverse slide. */
.lv-hero__inner{justify-content:space-between;}
.lv-hero__media{flex:0 0 auto;align-self:stretch;display:flex;align-items:center;justify-content:center;}
.lv-badge{font-family:var(--lv-sans);text-transform:uppercase;letter-spacing:2.5px;font-size:11px;
  font-weight:700;padding:7px 16px;border-radius:22px;display:inline-block;}
.lv-h{font-family:var(--lv-serif);font-weight:600;line-height:1.06;letter-spacing:.3px;margin:0;font-size:clamp(34px,5vw,56px);}
.lv-sub{font-family:var(--lv-sans);font-weight:400;font-size:clamp(14px,1.4vw,15px);line-height:1.6;max-width:440px;margin:0;}
.lv-cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:4px;}
.lv-btn{font-family:var(--lv-sans);font-weight:700;font-size:14px;letter-spacing:.5px;padding:15px 32px;
  border-radius:32px;display:inline-block;text-decoration:none;border:1.5px solid transparent;cursor:pointer;}
.lv-hero__leaf{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(circle at 12% 88%,var(--lv-sage-b) 0,transparent 24%),
    radial-gradient(circle at 92% 22%,var(--lv-sage-a) 0,transparent 28%);}
.lv-hero--forest{background:radial-gradient(130% 130% at 82% 0%,var(--lv-forest-mid) 0%,var(--lv-forest) 46%,var(--lv-forest-deep) 100%);color:var(--lv-on-dark);}
.lv-hero--forest .lv-hero__leaf{opacity:.10;}
.lv-hero--forest .lv-h{color:var(--lv-on-dark);}
.lv-hero--forest .lv-sub{color:rgba(245,241,232,.86);}
.lv-hero--forest .lv-badge{background:rgba(201,162,75,.18);border:1px solid rgba(201,162,75,.5);color:var(--lv-gold-lighter);}
.lv-hero--forest .lv-btn--primary{background:var(--lv-gold);color:var(--lv-forest);}
.lv-hero--forest .lv-btn--ghost{background:transparent;border-color:rgba(245,241,232,.5);color:var(--lv-on-dark);}
.lv-hero--tan{background:radial-gradient(120% 120% at 15% 90%,var(--lv-tan-light) 0%,var(--lv-tan-mid) 52%,var(--lv-tan) 100%);color:var(--lv-on-light-h);}
.lv-hero--tan .lv-hero__inner{flex-direction:row-reverse;}
.lv-hero--tan .lv-hero__leaf{opacity:.08;}
.lv-hero--tan .lv-h{color:var(--lv-on-light-h);}
.lv-hero--tan .lv-sub{color:var(--lv-on-tan-b);}
.lv-hero--tan .lv-badge{background:rgba(46,64,52,.10);border:1px solid rgba(46,64,52,.28);color:var(--lv-forest-mid);}
.lv-hero--tan .lv-btn--primary{background:var(--lv-forest);color:var(--lv-on-dark);}
.lv-hero--tan .lv-btn--ghost{background:transparent;border-color:rgba(46,64,52,.45);color:var(--lv-on-light-h);}

/* ---- matched card ---- */
.lv-card{width:clamp(200px,26vw,258px);min-height:clamp(380px,56vh,480px);
  border-radius:12px 12px 10px 10px;background:linear-gradient(160deg,#20302A 0%,#10201A 100%);
  box-shadow:0 24px 44px rgba(0,0,0,.45),inset 0 2px 6px rgba(255,255,255,.06);
  position:relative;display:flex;flex-direction:column;align-items:center;
  padding:26px 20px 22px;color:var(--lv-on-dark);text-align:center;}
.lv-card::before{content:"";position:absolute;top:-9px;left:32px;right:32px;height:10px;background:#2b3d34;border-radius:4px 4px 0 0;}
.lv-card__brand{font-family:var(--lv-serif);color:var(--lv-gold-light);font-size:16px;letter-spacing:3px;}
.lv-card__line{width:38px;height:1px;background:rgba(216,196,138,.6);margin:12px 0 0;}
.lv-card__media{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;width:100%;padding:14px 0;}
.lv-card__title{font-family:var(--lv-serif);color:var(--lv-on-dark);font-size:clamp(26px,3vw,32px);line-height:1.05;font-weight:600;}
.lv-card__img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 14px 24px rgba(0,0,0,.5));}
.lv-card__tag{font-size:9px;letter-spacing:2px;color:rgba(245,241,232,.6);text-transform:uppercase;}
.lv-card--light{background:linear-gradient(160deg,#FDFBF5 0%,#EFE7D6 100%);color:var(--lv-on-light-h);
  box-shadow:0 24px 44px rgba(0,0,0,.22),inset 0 2px 6px rgba(255,255,255,.5);}
.lv-card--light::before{background:#E4CFAE;}
.lv-card--light .lv-card__brand{color:var(--lv-forest);}
.lv-card--light .lv-card__line{background:rgba(46,64,52,.45);}
.lv-card--light .lv-card__tag{color:rgba(46,64,52,.6);}
.lv-card--light .lv-card__img{filter:drop-shadow(0 14px 22px rgba(0,0,0,.28));}

/* ---- arrows + dots ---- */
.lv-slider__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(245,241,232,.35);background:rgba(20,30,25,.35);color:#F5F1E8;font-size:22px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);}
.lv-slider__arrow:hover{background:rgba(20,30,25,.55);}
.lv-slider__arrow--prev{left:18px;} .lv-slider__arrow--next{right:18px;}
.lv-slider__dots{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:9px;
  padding:8px 12px;border-radius:20px;background:rgba(15,22,18,.28);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);}
.lv-slider__dot{width:9px;height:9px;border-radius:50%;border:none;background:rgba(245,241,232,.5);padding:0;cursor:pointer;}
.lv-slider__dot[aria-current="true"]{background:var(--lv-gold);}

/* =====================================================================
   3. RESPONSIVE
   ===================================================================== */
/* --- arrows: never on top of the copy ---------------------------------------
   A side arrow spans 18px→62px from the edge. The content band starts at
   max(20px, (100vw - 1440px) / 2), so the arrow only clears the headline once
   the viewport is at least 1440 + 2*(62 + 10) = 1584px wide. Below that the
   prev arrow lands on the headline and the next arrow on the product card —
   badly so in Polish, where the heading runs to three lines.
   So below 1584px the arrows drop down to flank the dots, forming one control
   cluster over empty background instead of over text. */
@media (max-width:1583px){
  .lv-slider__arrow{top:auto;bottom:12px;transform:none;
    width:34px;height:34px;font-size:18px;}
  .lv-slider__arrow--prev{left:50%;margin-left:-78px;}
  .lv-slider__arrow--next{right:50%;margin-right:-78px;}
}

/* --- compact desktop bar (992–1199px) ---------------------------------------
   Six menu items + the Polylang switcher + three icons don't fit a ~950px bar.
   Drop the language *names* (flags stay, and they're still real links) and
   tighten type/gaps rather than letting the menu wrap onto the logo. */
@media (min-width:992px) and (max-width:1199px){
  .lvh__bar{gap:18px;}
  .lvh__menu{gap:14px;}
  .lvh__menu a{font-size:13px;letter-spacing:.2px;}
  .lvh__actions{gap:14px;}
  .lvh__lang a span{display:none;}
  .lvh__logo img{height:40px;}
}

/* --- mobile / tablet nav (≤991px) -------------------------------------------
   991px matches Porto's and Elementor's own tablet breakpoint.

   The panels are laid out by WRAPPING the flex bar, not by absolute
   positioning. The previous version gave .lvh__menu and .lvh__actions the same
   `position:absolute; top:100%; left:0; right:0`, so both panels were painted
   in the identical box — the actions row sat on top of the menu, which is why
   the menu looked truncated and the items appeared collapsed over each other.
   Wrapping puts them in normal flow as row 2 and row 3, so each gets its own
   height and neither can overlap the other. */
@media (max-width:991px){
  .lvh__bar{flex-wrap:wrap;row-gap:0;}
  .lvh__logo img{height:38px;}
  .lvh__menu,.lvh__actions{display:none;}
  .lvh__toggle{display:inline-flex;}

  /* open state (toggled by JS): the bar itself becomes the drop-down panel */
  .lvh__nav.is-open .lvh__bar{
    background:var(--lv-forest-deep);
    /* a long menu on a short screen scrolls instead of running off-screen */
    max-height:calc(100vh - 20px);overflow-y:auto;-webkit-overflow-scrolling:touch;}

  .lvh__nav.is-open .lvh__menu,
  .lvh__nav.is-open .lvh__actions{
    display:flex;flex:0 0 100%;width:100%;margin:0;}

  .lvh__nav.is-open .lvh__menu{
    flex-direction:column;align-items:stretch;gap:0;
    margin-top:14px;border-top:1px solid rgba(245,241,232,.14);}
  .lvh__nav.is-open .lvh__menu li{width:100%;}
  .lvh__nav.is-open .lvh__menu a{
    width:100%;padding:14px 0;font-size:15px;
    border-bottom:1px solid rgba(245,241,232,.10);}

  /* actions stay a single horizontal row — they're icons, not list items */
  .lvh__nav.is-open .lvh__actions{
    flex-direction:row;flex-wrap:wrap;align-items:center;gap:22px;
    margin-left:0;padding:18px 0 4px;}
  .lvh__nav.is-open .lvh__lang{gap:16px;}
}
@media (max-width:820px){
  .lv-hero{min-height:0;padding-top:0;padding-bottom:56px;}
  .lv-hero__inner{flex-direction:column;text-align:center;padding-top:110px;}
  .lv-hero--tan .lv-hero__inner{flex-direction:column;}
  .lv-hero__copy{align-items:center;max-width:100%;order:1;}
  .lv-hero__media{order:2;margin-top:32px;}
  .lv-sub{margin-left:auto;margin-right:auto;}
  .lv-cta-row{justify-content:center;}
  .lv-h{font-size:clamp(30px,8vw,40px);}
  /* arrow position is handled by the ≤1583px rule above — it already sits in the
     bottom control cluster here, so no left/right override (which would put it
     back over the stacked, centred copy). */
}