/* =========================================================================
   GETU Shopping — "Soluções B2B" (/solucoes-b2b/) + Fabbri landing (/fabbri/)
   WordPress build of assets/css/b2b-fabbri.css (2026-11-06, build-b2b-fabbri-wp.mjs).
   Loaded only on those two pages (getu-b2b-fabbri.php), after getu-launches.css.
   Page-scoped: body.lx-page.lx-b2b / body.lx-page.lx-fabbri and .lx-* components;
   no reset, no second Tailwind layer.
   ========================================================================= */
/* ---------- Page rhythm: ONE gap between two blocks -------------------------
   Set once, as margin-top on the later block. Blocks carry no vertical padding
   of their own, so gaps never add up. Phones 48px, tablets 64px, desktop 96px. */
.lx-page { --lx-gap: 48px; --lx-head-gap: 28px; }
@media (min-width: 768px) { .lx-page { --lx-gap: 64px; --lx-head-gap: 32px; } }
@media (min-width: 1024px) { .lx-page { --lx-gap: 96px; --lx-head-gap: 40px; } }
.lx-page .lx-block { margin-top: var(--lx-gap); }
.lx-page .lx-block--last { padding-bottom: var(--lx-gap); }
.lx-page .lx-anchor { scroll-margin-top: 96px; } /* sticky header (76px) + air */
/* The live WordPress base styles give figcaption a 1em margin and labels a 5px bottom margin
   and centre it (found 2026-11-06 in the live-shell preview); these components set their own spacing. */
.lx-page .lx-segment figcaption { margin: 0; text-align: left; }
.lx-page .lx-inspo figcaption { margin-bottom: 0; }
.lx-page .lx-check label { margin: 0; }

/* ---------- Section heads ---------- */
.lx-page .lx-h2 { color: var(--wine-700); text-wrap: balance; font-weight: 600; }
.lx-page :is(.lx-why__title, .lx-flow__title, .lx-segment figcaption, .lx-brand__name, .lx-product__name, .lx-inspo figcaption, .lx-partner__formtitle) { font-weight: 600; }
.lx-head { max-width: 1180px; }
.lx-head--center { margin-inline: auto; text-align: center; }
.lx-head .lx-h2 { margin-top: 12px; }
.lx-head .lx-h2:first-child { margin-top: 0; }
.lx-head .lx-lead { margin-top: 14px; max-width: 40rem; }
.lx-head--center .lx-lead { margin-inline: auto; }
.lx-head + .lx-body { margin-top: var(--lx-head-gap); }
.lx-kicker--rule { display: inline-flex; align-items: center; gap: 14px; }
.lx-kicker--rule::after { content: ""; width: 44px; height: 1px; background: rgba(200, 164, 93, .85); }
@media (max-width: 639px) { .lx-kicker--rule { display: block; } .lx-kicker--rule::after { display: none; } }
@media (min-width: 1024px) { .lx-kicker--rule::after { width: 64px; } }

/* Text link with arrow on light backgrounds */
.lx-arrowlink { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; font-size: 15.5px; color: var(--wine-600);
  text-decoration: underline; text-decoration-color: rgba(200, 164, 93, .9); text-decoration-thickness: 1.5px; text-underline-offset: 6px;
  border-radius: 6px; transition: color .2s; }
.lx-arrowlink svg { flex-shrink: 0; transition: transform .35s var(--ease-spring); }
.lx-arrowlink:hover { color: var(--wine-500); }
.lx-arrowlink:hover svg { transform: translateX(3px); }
.lx-arrowlink:active { color: var(--wine-700); }
.lx-arrowlink:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Hero photo (both pages, delivered 2026-11-05): subject on the right, a dark empty left part
   made for the HTML text.
   Phones/tablets: the photo sits above the text. It is a little taller than the shared hero so
   the cover crop drops the empty left part (subject anchored right), and the fade into the wine
   text panel starts low so people and bottles stay clear.
   Desktop: the photo keeps its own ratio at full hero height, anchored right, so nothing is ever
   cropped; its empty left part fades (mask, no colour overlay → no seam) into the wine panel. */
@media (max-width: 1023px) {
  .lx-page .lx-hero__media { height: clamp(260px, 72vw, 440px); }
  .lx-page .lx-hero__media > img { object-position: 100% 50%; }
  .lx-page .lx-hero__media::after { background: linear-gradient(180deg, rgba(46, 13, 21, 0) 70%, rgba(46, 13, 21, .6) 90%, #2E0D15 100%); }
}
@media (min-width: 1024px) {
  .lx-page .lx-hero__media { top: 0; bottom: auto; height: 100%; width: auto; max-width: 100%; aspect-ratio: 1672 / 941; }
  .lx-page .lx-hero__media::after { display: none; }
  .lx-page .lx-hero__media > img { object-position: 100% 50%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .6) 10%, #000 24%);
    mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .6) 10%, #000 24%); }
}
/* Hero text: gold rule after the kicker, two-sentence title, WhatsApp icon in the ghost button */
.lx-page .lx-hero .lx-kicker--rule::after { background: rgba(224, 189, 110, .7); }
.lx-page .lx-hero__title { text-wrap: balance; }
.lx-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
@media (max-width: 479px) { .lx-hero__actions .lx-btn { width: 100%; } }
/* 1024–1279px: the photo's subject starts ~390px from the left (owner's arm, espresso glass);
   two buttons side by side (~540px) would cover it, so they stack on the empty part. */
@media (min-width: 1024px) and (max-width: 1279px) { .lx-page .lx-hero__actions { flex-direction: column; align-items: flex-start; } }

/* =========================================================================
   B2B — "Soluções B2B"
   ========================================================================= */
@media (min-width: 1024px) {
  .lx-b2b .lx-hero { min-height: clamp(500px, 40vw, 600px); }
  .lx-b2b .lx-hero__title { font-size: clamp(60px, 5.6vw, 84px); line-height: .95; }
}

/* Why GETU: three points with gold dividers */
.lx-why { display: grid; grid-template-columns: 1fr; }
.lx-why__item { display: grid; grid-template-columns: 48px 1fr; column-gap: 18px; padding: 24px 0; }
.lx-why__item + .lx-why__item { border-top: 1px solid var(--lx-line); }
.lx-why__icon { color: var(--wine-600); }
.lx-why__icon svg { width: 40px; height: 40px; }
.lx-why__title { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: 26px; line-height: 1.12; color: var(--wine-700); }
.lx-why__text { font-size: 15.5px; line-height: 1.6; color: var(--lx-muted); margin-top: 8px; max-width: 26rem; }
@media (min-width: 768px) {
  .lx-why { grid-template-columns: repeat(3, 1fr); }
  .lx-why__item { grid-template-columns: 1fr; row-gap: 18px; padding: 4px 28px 8px; }
  .lx-why__item:first-child { padding-left: 0; }
  .lx-why__item + .lx-why__item { border-top: 0; border-left: 1px solid rgba(200, 164, 93, .55); }
  .lx-why__icon svg { width: 44px; height: 44px; }
}
@media (min-width: 1024px) { .lx-why__item { padding: 4px 40px 8px; } .lx-why__title { font-size: 30px; } .lx-why__text { font-size: 16.5px; } }

/* Mokaflor feature panel (announcement only — no price, no cart) */
.lx-mkpanel { position: relative; display: grid; grid-template-columns: 1fr; overflow: hidden; border-radius: var(--lx-radius-lg); color: #FFF;
  background: var(--lx-panel); box-shadow: 0 2px 6px rgba(42, 14, 20, .1), 0 24px 54px rgba(42, 14, 20, .16); isolation: isolate; }
/* Photo 02-b2b-mokaflor: four bags on the right, empty wine wall on the left (for the text).
   Phones/tablets: photo above the text, cover-cropped from the left so the bags fill the frame. */
.lx-mkpanel__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
@media (min-width: 640px) { .lx-mkpanel__media { aspect-ratio: 16 / 10; } }
.lx-mkpanel__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; }
.lx-mkpanel__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(58, 15, 24, 0) 72%, rgba(58, 15, 24, .65) 90%, #3A0F18 100%); }
.lx-mkpanel__body { position: relative; z-index: 1; padding: 4px 24px 32px; }
.lx-mkpanel__brand { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.lx-mkpanel__name { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: 26px; letter-spacing: .12em; text-transform: uppercase; line-height: 1; }
.lx-pill { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 14px; border-radius: 9999px; font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--wine-900); background: #E0BD6E; }
.lx-mkpanel__title { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; letter-spacing: -0.02em; font-size: clamp(34px, 8.6vw, 54px); line-height: 1.02;
  margin-top: 20px; text-wrap: balance; }
.lx-mkpanel__text { font-size: 16.5px; line-height: 1.6; color: rgba(255, 255, 255, .86); margin-top: 14px; max-width: 28rem; }
.lx-blendrow { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 20px; }
.lx-blendrow li { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, .92); }
.lx-blendrow .lx-dot { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .55); }
.lx-mkpanel .lx-btn { margin-top: 28px; }
@media (min-width: 768px) { .lx-mkpanel__body { padding: 8px 40px 40px; } }
@media (min-width: 1024px) {
  /* Desktop: the photo runs from 15 % of the panel to its right edge, behind the text column, so
     the text sits on the photo's own empty wall (as in the mockup) and the bags stay large. */
  .lx-mkpanel { grid-template-columns: minmax(0, 42%) minmax(0, 58%); align-items: center; min-height: 480px; }
  .lx-mkpanel__media { position: absolute; inset: 0 0 0 15%; aspect-ratio: auto; }
  .lx-mkpanel__media img { object-position: 100% 62%; -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .6) 12%, #000 30%);
    mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .6) 12%, #000 30%); }
  .lx-mkpanel__media::after { display: none; }
  .lx-mkpanel__body { padding: 48px 24px 52px 56px; }
  .lx-mkpanel::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(60% 120% at 0% 0%, rgba(139, 36, 54, .45) 0%, rgba(46, 13, 21, 0) 70%); }
}

/* Arte Café + Fabbri brand cards — photos 03-b2b-arte-cafe / 04-b2b-fabbri (3:2): products in the
   right ~55 %, a plain light background on the left made for the text.
   Up to 1279px: photo on top (cover, anchored right so the bags/bottles stay whole), text below on
   the photo's own counter colour. From 1280px: the photo fills the 5:3 card (window = rows 55–977
   of 1024: bag tops, bottle caps and the beans whole, with air above) and the text sits on the
   photo's empty left part, as in the mockup. */
.lx-brands { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 20px; }
@media (min-width: 768px) { .lx-brands { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 24px; } }
@media (min-width: 1024px) { .lx-brands { gap: 32px; margin-top: 32px; } }
.lx-brand { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--lx-radius-lg); isolation: isolate;
  background: var(--lx-brand-bg, #EFE5D5); border: 1px solid rgba(42, 14, 20, .06);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out); }
.lx-brand--arte { --lx-brand-bg: #D9B291; }   /* bottom edge of 03-b2b-arte-cafe (#D7AF8D) */
.lx-brand--fabbri { --lx-brand-bg: #E7C6A4; } /* bottom edge of 04-b2b-fabbri (#E5C3A0) */
.lx-brand:hover { transform: translateY(-3px); box-shadow: var(--lx-shadow-card-hover); }
.lx-brand__media { order: -1; position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.lx-brand__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; }
.lx-brand__body { padding: 18px 22px 22px; }
.lx-brand__name { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; letter-spacing: -0.015em; font-size: clamp(32px, 7.5vw, 46px); line-height: 1; color: var(--wine-700); }
.lx-brand__text { font-size: 15.5px; line-height: 1.55; color: rgba(36, 16, 21, .8); margin-top: 10px; }
.lx-brand .lx-arrowlink { margin-top: 10px; white-space: nowrap; }
@media (min-width: 640px) { .lx-brand__media { aspect-ratio: 3 / 2; } .lx-brand__body { padding: 22px 28px 26px; } }
@media (min-width: 1280px) {
  .lx-brand { flex-direction: row; align-items: center; aspect-ratio: 5 / 3; min-height: 300px; }
  .lx-brand__media { position: absolute; inset: 0; z-index: -1; aspect-ratio: auto; }
  .lx-brand__media img { object-position: 100% 55%; }
  .lx-brand__body { padding: 32px 0 32px 44px; max-width: 46%; }
  .lx-brand__text { font-size: 17px; max-width: 15rem; margin-top: 12px; }
  .lx-brand .lx-arrowlink { margin-top: 14px; }
}

/* Segments: "Para quem vive de servir bem." */
.lx-segments { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 640px) { .lx-segments { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1024px) { .lx-segments { gap: 32px; } }
.lx-segment { overflow: hidden; border-radius: var(--lx-radius); background: #F3EADC; border: 1px solid rgba(42, 14, 20, .06); }
.lx-segment__img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #E9DCC7; }
.lx-segment__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lx-segment figcaption { padding: 18px 22px 22px; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: 26px; line-height: 1.1; color: var(--wine-700); }
.lx-segment figcaption::after { content: ""; display: block; width: 44px; height: 2px; margin-top: 12px; background: var(--gold); }
@media (min-width: 640px) and (max-width: 1023px) { .lx-segment figcaption { font-size: 22px; padding: 16px 18px 18px; } }
@media (min-width: 1024px) { .lx-segment figcaption { font-size: 29px; padding: 22px 28px 26px; } }

/* Steps: "Uma conversa. O início de uma parceria." (a real sequence, so numbered) */
.lx-flow { display: grid; grid-template-columns: 1fr; gap: 28px; counter-reset: none; }
@media (min-width: 768px) { .lx-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }
@media (min-width: 1024px) { .lx-flow { gap: 48px; } }
.lx-flow__num { display: flex; align-items: center; gap: 16px; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 500;
  font-size: 56px; line-height: .9; color: #C9A35A; font-variant-numeric: lining-nums; }
.lx-flow__num::after { content: ""; flex: 1; height: 1px; background: rgba(200, 164, 93, .6); }
.lx-flow__title { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: 27px; line-height: 1.15; color: var(--wine-700); margin-top: 16px; }
.lx-flow__text { font-size: 15.5px; line-height: 1.6; color: var(--lx-muted); margin-top: 6px; }
@media (min-width: 1024px) { .lx-flow__num { font-size: 68px; } .lx-flow__title { font-size: 31px; } .lx-flow__text { font-size: 17px; } }

/* Partner form: wine panel (intro + cup photo) and white form card */
.lx-partner { position: relative; display: grid; grid-template-columns: 1fr; gap: 0; overflow: hidden; border-radius: var(--lx-radius-lg); color: #FFF;
  background: var(--lx-panel); box-shadow: 0 2px 6px rgba(42, 14, 20, .1), 0 24px 54px rgba(42, 14, 20, .16); isolation: isolate; }
.lx-partner__intro { position: relative; display: flex; flex-direction: column; padding: 32px 24px 0; }
.lx-partner__title { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; letter-spacing: -0.02em; font-size: clamp(36px, 9vw, 56px); line-height: 1.02; margin-top: 14px; text-wrap: balance; }
.lx-partner__text { font-size: 16.5px; line-height: 1.6; color: rgba(255, 255, 255, .86); margin-top: 16px; max-width: 26rem; }
.lx-partner__wa { display: inline-flex; align-items: center; gap: 12px; align-self: flex-start; min-height: 44px; margin-top: 18px; font-size: 18px; font-weight: 500; color: #FFF;
  border-radius: 6px; font-variant-numeric: tabular-nums; transition: color .2s; }
.lx-partner__wa svg { color: #E0BD6E; flex-shrink: 0; }
.lx-partner__wa:hover { color: #F3D9A0; }
.lx-partner__wa:active { color: #E0BD6E; }
.lx-partner__wa:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* Photo 08-b2b-contact (portrait 4:5): plain wine wall on top, cup + beans in the lower third.
   It belongs to the intro column only. Phones/tablets: a band under the text showing the cup
   (the band's top fades into the panel). Desktop: the whole column background, cup at the bottom. */
.lx-partner__photo { position: relative; margin: 24px -24px 0; aspect-ratio: 16 / 9; overflow: hidden; }
.lx-partner__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 86%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%); mask-image: linear-gradient(180deg, transparent 0, #000 30%); }
.lx-partner__card { position: relative; z-index: 1; margin: 0 12px 12px; padding: 24px 20px 26px; border-radius: 16px; background: #FFFDF9; color: var(--ink);
  box-shadow: 0 2px 6px rgba(20, 6, 10, .14), 0 24px 50px rgba(20, 6, 10, .28); }
.lx-partner__formtitle { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: 32px; line-height: 1.05; color: var(--wine-700); }
.lx-partner__card .lx-fields { margin-top: 18px; }
.lx-partner__card .lx-field--full { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .lx-partner__intro { padding: 44px 44px 0; }
  .lx-partner__photo { margin: 28px -44px 0; aspect-ratio: 16 / 9; }
  .lx-partner__photo img { object-position: 50% 88%; }
  .lx-partner__card { margin: 0 24px 24px; padding: 32px 32px 32px; }
}
@media (min-width: 1024px) {
  .lx-partner { grid-template-columns: minmax(0, 42%) minmax(0, 58%); }
  .lx-partner__intro { padding: 56px 32px 0 56px; min-height: 680px; }
  .lx-partner__photo { position: absolute; inset: 0; z-index: -1; margin: 0; aspect-ratio: auto; }
  /* The column (410–564px) is narrower than the photo at full height (~640px): anchor it to the
     right (90 %) so the cup stays clear of the form card and of the right-edge fade; the napkin
     on the far left is what gets cropped. Only the right edge fades: above and below the form
     card it meets the panel gradient. */
  .lx-partner__photo img { object-position: 90% 100%; -webkit-mask-image: linear-gradient(90deg, #000 91%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 91%, transparent 100%); }
  .lx-partner__card { margin: 32px 32px 32px 0; padding: 40px 44px 40px; }
  .lx-partner__formtitle { font-size: 38px; }
  .lx-partner::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(55% 90% at 0% 0%, rgba(139, 36, 54, .45) 0%, rgba(46, 13, 21, 0) 70%); }
}
/* Form controls not in launches.css: select, textarea, required/optional markers */
.lx-select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E1A2A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; }
.lx-select:invalid { color: rgba(36, 16, 21, .5); }
.lx-select option { color: var(--ink); }
.lx-textarea { min-height: 116px; resize: vertical; line-height: 1.5; }
.lx-form-note { font-size: 13.5px; line-height: 1.5; color: var(--lx-muted); margin-top: 12px; }
.lx-partner .lx-check { margin-top: 18px; }
.lx-partner .lx-check a { color: var(--wine-600); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; border-radius: 3px; }
.lx-partner .lx-check a:hover { color: var(--wine-500); }
.lx-partner .lx-check a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.lx-partner .lx-submit { border-radius: 9999px; }
/* The submit button opens WhatsApp (2026-11-06): the note under it says so before anything happens. */
.lx-partner .lx-submit + .lx-form-note { margin-top: 12px; text-align: center; }
.lx-done[hidden], .lx-partner__form[hidden] { display: none; }
/* The done title only receives focus programmatically (so screen readers announce it); it is not
   interactive, so neither the local nor the live site-wide focus ring may frame it (same as the
   Mokaflor dialog title in getu-launches.css). */
.lx-partner .lx-done__title:focus, .lx-partner .lx-done__title:focus-visible { outline: none !important; box-shadow: none !important; }
.lx-partner__card:has(> .lx-done:not([hidden])) { display: flex; flex-direction: column; justify-content: center; }
.lx-done__actions { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-top: 16px; }

/* FAQ with plain lines (B2B) */
.lx-faq--lines { max-width: none; background: transparent; border: 0; border-radius: 0; border-top: 1px solid rgba(42, 14, 20, .14); }
.lx-faq--lines .lx-faq__item { border-bottom: 1px solid rgba(42, 14, 20, .14); }
.lx-faq--lines .lx-faq__item + .lx-faq__item { border-top: 0; }
.lx-faq--lines .lx-faq__q { padding: 20px 4px; font-size: 16.5px; color: var(--ink); border-radius: 6px; }
.lx-faq--lines .lx-faq__a { padding: 0 4px 22px; font-size: 16px; max-width: 52rem; }
@media (min-width: 1024px) { .lx-faq--lines .lx-faq__q { padding: 22px 8px; font-size: 18px; } .lx-faq--lines .lx-faq__a { padding: 0 8px 24px; font-size: 17px; } }
.lx-head--rule { display: flex; align-items: center; gap: 22px; }
.lx-head--rule::after { content: ""; flex: 0 1 120px; height: 1px; background: rgba(200, 164, 93, .8); }
@media (max-width: 639px) { .lx-head--rule { display: block; } .lx-head--rule::after { display: none; } }

/* =========================================================================
   Fabbri landing
   ========================================================================= */
/* Hero: photo 01-fabbri-hero, placed by the shared hero-photo rules at the top of this file. */
@media (min-width: 1024px) {
  .lx-fabbri .lx-hero { min-height: clamp(520px, 42vw, 620px); }
  .lx-fabbri .lx-hero__title { font-size: clamp(58px, 5.3vw, 80px); line-height: .96; }
}

/* Product grid: horizontal cards on phones, 2 columns on tablets, 4 on desktop */
.lx-products { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 560px) { .lx-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1024px) { .lx-products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; } }
.lx-product { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; padding: 14px; align-items: center; }
.lx-product__img { position: relative; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: #FFF; }
.lx-product__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.lx-product__body { display: flex; flex-direction: column; min-width: 0; }
.lx-product__name { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: 28px; line-height: 1.05; color: var(--wine-900); }
/* The flavour name links to the product page (2026-11-06). */
.lx-product__name a { color: inherit; text-decoration: none; border-radius: 4px; transition: color .2s; }
.lx-product__name a:hover { color: var(--wine-600); text-decoration: underline; text-decoration-color: rgba(200, 164, 93, .9);
  text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.lx-product__name a:active { color: var(--wine-700); }
.lx-product__name a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.lx-product__meta { font-size: 14px; color: var(--lx-muted); margin-top: 6px; }
.lx-product__desc { font-size: 14.5px; color: rgba(36, 16, 21, .8); margin-top: 4px; }
.lx-product__price { font-size: 22px; font-weight: 700; color: var(--wine-900); margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(200, 164, 93, .55);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.lx-product__cta { margin-top: 14px; }
.lx-product__cta .lx-btn { width: 100%; }
@media (min-width: 560px) {
  /* rows auto + 1fr: when the cards of one row stretch to the tallest card, the extra height goes to the
     body (button pinned at the bottom), never to the 3:4 image box — which would otherwise grow wider
     than its column (seen at 1024px, 2026-11-06) */
  .lx-product { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 0; padding: 16px 16px 20px; align-items: stretch; }
  .lx-product__img { aspect-ratio: 3 / 4; margin-bottom: 18px; }
  .lx-product__body { flex: 1; padding-inline: 6px; }
  .lx-product__cta { margin-top: auto; padding-top: 16px; }
}
@media (min-width: 1024px) {
  .lx-product { padding: 18px 18px 22px; }
  .lx-product__name { font-size: 32px; }
  .lx-product__meta { font-size: 15px; }
  .lx-product__desc { font-size: 15.5px; }
  .lx-product__price { font-size: 24px; margin-top: 16px; padding-top: 14px; }
}
.lx-products__more { display: flex; justify-content: center; margin-top: 28px; }
@media (min-width: 1024px) { .lx-products__more { margin-top: 40px; } }
.lx-fabbri .lx-preview-note { margin-top: 10px; }
/* Live WooCommerce price HTML (a sale shows the old price struck through) and the cart button states. */
.lx-product__price del { font-size: .72em; font-weight: 500; opacity: .6; margin-right: 6px; }
.lx-product__price ins { text-decoration: none; }
.lx-product__cta .lx-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.lx-product__cta .lx-btn[aria-busy="true"] { cursor: progress; }

/* Editorial: image + uses list */
.lx-editorial { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
.lx-editorial__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--lx-radius-lg); background: #E9DCC7; box-shadow: var(--lx-shadow-card); }
.lx-editorial__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; } /* 4:3 photo; 5:4 frame keeps the pouring hand */
.lx-uses { margin-top: 24px; border-top: 1px solid rgba(200, 164, 93, .55); }
.lx-uses li { display: flex; align-items: center; gap: 18px; padding: 15px 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: 22px; line-height: 1.2; color: var(--wine-700);
  border-bottom: 1px solid rgba(200, 164, 93, .55); }
.lx-uses svg { flex-shrink: 0; width: 30px; height: 30px; color: var(--wine-600); }
@media (min-width: 768px) { .lx-editorial { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; } .lx-editorial__img { aspect-ratio: 5 / 4; } }
@media (min-width: 1024px) { .lx-editorial { gap: 72px; } .lx-uses li { font-size: 24px; padding: 17px 0; } .lx-editorial .lx-lead { max-width: 30rem; } }

/* Inspiration cards */
.lx-inspo { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 640px) { .lx-inspo { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1024px) { .lx-inspo { gap: 32px; } }
.lx-inspo__img { position: relative; aspect-ratio: 3 / 2; overflow: hidden; /* = photos 07–09 and the mockup: nothing cropped */ border-radius: var(--lx-radius); background: #E9DCC7; box-shadow: var(--lx-shadow-card); }
.lx-inspo__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lx-inspo figcaption { margin-top: 14px; text-align: center; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: 25px; line-height: 1.15; color: var(--wine-700); }
@media (min-width: 1024px) { .lx-inspo figcaption { font-size: 28px; margin-top: 16px; } }
.lx-inspo__more { display: flex; justify-content: center; margin-top: 20px; }
@media (min-width: 1024px) { .lx-inspo__more { margin-top: 28px; } }

/* Flavour comparison (lx-table: a real table from 640px, one card per flavour on phones) */
.lx-fabbri .lx-table { max-width: none; font-size: 15.5px; }
.lx-fabbri .lx-table thead th { font-family: "Cormorant Garamond", Georgia, serif; font-size: 21px; font-weight: 600; color: var(--wine-700); background: #F3EADB; }
.lx-fabbri .lx-table tbody th { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 21px; color: var(--wine-700); }
.lx-fabbri .lx-table th, .lx-fabbri .lx-table td { padding: 14px 24px; }
@media (min-width: 1024px) { .lx-fabbri .lx-table { font-size: 17px; } .lx-fabbri .lx-table th, .lx-fabbri .lx-table td { padding: 16px 32px; } }
@media (max-width: 639px) {
  .lx-fabbri .lx-table th, .lx-fabbri .lx-table td { padding: 0; }
  .lx-fabbri .lx-table tbody th { font-size: 24px; }
  .lx-fabbri .lx-table td { font-size: 15px; }
  .lx-fabbri .lx-table td::before { flex-shrink: 0; }
  .lx-fabbri .lx-table td { text-align: right; }
}

/* FAQ rows without the coffee-page chevron */
.lx-fabbri .lx-faq--rows { max-width: none; }
.lx-fabbri .lx-faq--rows .lx-faq__a { padding-left: 20px; }
@media (min-width: 768px) { .lx-fabbri .lx-faq--rows .lx-faq__q { font-size: 17px; } .lx-fabbri .lx-faq--rows .lx-faq__a { padding: 0 32px 20px; font-size: 16.5px; } }

/* Contact banner — photo 10-fabbri-contactbanner: machine + bottle on the right, dark empty left.
   The bottle (rows 145–810 of 941) must stay whole.
   Phones/tablets: photo above the text, cover-cropped from the left, a short fade at the bottom.
   From 900px: a right-anchored frame of ratio 1672:760 at full banner height, so the window is
   always rows 90–850 (bottle whole, ~88 % of the banner height); the left part fades into wine. */
@media (max-width: 899px) {
  .lx-contact--fabbri .lx-contact__media { height: clamp(240px, 46vw, 360px); }
  .lx-contact--fabbri .lx-contact__media img { object-position: 100% 50%; }
  .lx-contact--fabbri .lx-contact__media::after { background: linear-gradient(180deg, rgba(58, 15, 24, 0) 72%, rgba(58, 15, 24, .65) 90%, #3A0F18 100%); }
}
@media (min-width: 900px) {
  .lx-contact--fabbri .lx-contact__media { top: 0; bottom: auto; height: 100%; width: auto; max-width: 62%; aspect-ratio: 1672 / 760; }
  .lx-contact--fabbri .lx-contact__media::after { display: none; }
  .lx-contact--fabbri .lx-contact__media img { object-position: 100% 50%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .6) 14%, #000 34%);
    mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .6) 14%, #000 34%); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .lx-arrowlink svg, .lx-brand, .lx-partner__wa { transition: none; }
  .lx-brand:hover { transform: none; }
  .lx-arrowlink:hover svg { transform: none; }
}