:root{
  --fn-red:#d71920;
  --fn-black:#070707;
  --fn-white:#fff;
  --fn-paper:#f6f3ed;
  --fn-green:#547e28;
  --fn-orange:#ef9417;
  --fn-head:"Arial Narrow","Roboto Condensed",Impact,Haettenschweiler,sans-serif;
  --fn-body:Arial,Helvetica,sans-serif
}
.fn-page{font-family:var(--fn-body);color:#101010;background:var(--fn-paper);line-height:1.45;overflow:hidden}
.fn-page *{box-sizing:border-box}
.fn-container{width:min(1180px,94%);margin:0 auto}
.fn-poster-title,.fn-page h1,.fn-page h2,.fn-page h3,.fn-page h4,.fn-page b,.fn-page strong{font-family:var(--fn-head);font-stretch:condensed}
.fn-center{text-align:center}
.fn-btn,.fn-card-btn{display:inline-flex;align-items:center;justify-content:center;background:var(--fn-red);color:#fff!important;text-decoration:none!important;text-transform:uppercase;font-family:var(--fn-head);font-weight:900;letter-spacing:.03em;padding:14px 24px;border:0;transition:.18s ease}
.fn-btn:hover,.fn-card-btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
.fn-card-btn{background:#070707;margin-top:auto;padding:11px 15px;font-size:15px}

.fn-brand-nav{background:#050505;border-bottom:3px solid var(--fn-red);position:relative;z-index:20}
.fn-brand-nav-inner{height:82px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.fn-nav-logo{height:96px;width:96px;display:block;transform:translateY(10px);z-index:2}
.fn-nav-logo img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.fn-nav-links{display:flex;gap:36px;align-items:center}
.fn-nav-links a{color:#fff!important;text-decoration:none!important;font-family:var(--fn-head);font-weight:900;font-size:16px;text-transform:uppercase}
.fn-nav-links a:hover{color:var(--fn-red)!important}

.fn-poster-hero{position:relative;min-height:575px;background:#070707;color:#fff;display:flex;align-items:center;border-bottom:12px solid #fff}
.fn-hero-photo{position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(0,0,0,.96) 0%,rgba(0,0,0,.88) 37%,rgba(0,0,0,.24) 66%,rgba(0,0,0,.08)),url("../images/bottles-trini.jpeg");background-size:cover;background-position:center 40%}
.fn-hero-photo:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 28% 40%,rgba(215,25,32,.25),transparent 26%),repeating-linear-gradient(25deg,transparent 0 20px,rgba(255,255,255,.012) 20px 22px)}
.fn-poster-hero-inner{position:relative;z-index:2}
.fn-poster-hero-copy{max-width:470px;padding:70px 0 55px}
.fn-poster-hero h1{font-size:clamp(64px,8vw,112px);line-height:.77;margin:0 0 26px;text-transform:uppercase;color:#fff;letter-spacing:-.035em;text-shadow:1px 1px 0 rgba(255,255,255,.12)}
.fn-poster-hero h1 span{color:var(--fn-red)}
.fn-poster-hero p{font-size:19px;max-width:360px;margin-bottom:24px;color:#fff}

.fn-poster-products{padding:26px 0 18px;background:var(--fn-paper);position:relative}
.fn-poster-products:before,.fn-story-masthead:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;background-image:radial-gradient(#999 .55px,transparent .55px);background-size:5px 5px}
.fn-poster-title{font-size:38px;line-height:1;text-transform:uppercase;margin:0 0 22px;position:relative;z-index:1}
.fn-poster-title span{font-weight:400}
.fn-flavour-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;position:relative;z-index:1}
.fn-flavour-card{min-height:535px;padding:20px 30px 24px;color:#fff;text-align:center;display:flex;flex-direction:column;align-items:center;border:4px solid rgba(255,255,255,.78);box-shadow:0 8px 18px rgba(0,0,0,.16);position:relative}
.fn-flavour-card:before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(110deg,transparent 0 13px,rgba(255,255,255,.018) 13px 15px)}
.fn-flavour-hot{background:linear-gradient(145deg,#e51e2a,#ad0713)}
.fn-flavour-mild{background:linear-gradient(145deg,#668e36,#315418)}
.fn-flavour-slight{background:linear-gradient(145deg,#f6a31d,#dd7604)}
.fn-flavour-logo{width:130px;height:130px;object-fit:cover;border-radius:50%;margin-bottom:2px;position:relative}
.fn-flavour-card h3{font-size:44px;line-height:1;margin:2px 0 8px;color:#fff;text-transform:uppercase}
.fn-flavour-card h4{font-size:24px;line-height:1.02;margin:0 0 14px;color:#fff;text-transform:uppercase}
.fn-flavour-card p{font-size:15px;max-width:250px;margin:0 auto 10px;color:#fff}
.fn-flavour-card strong{font-size:15px;margin-bottom:18px;color:#fff}

.fn-heat-picker{background:#fbfaf7;padding:8px 0 25px;border-top:1px solid #ddd}
.fn-heat-picker .fn-poster-title{font-size:35px;margin-bottom:12px}
.fn-heat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.fn-heat-choice{background:#fff;border:1px solid #ddd;box-shadow:0 4px 12px rgba(0,0,0,.06);padding:15px 18px;display:grid;grid-template-columns:42px 1fr;grid-template-areas:"dot label" "dot sub";align-items:center}
.fn-heat-choice .fn-pepper-dot{grid-area:dot;font-size:46px;line-height:1}
.fn-heat-choice b{grid-area:label;font-size:20px;text-transform:uppercase}
.fn-heat-choice em{grid-area:sub;font-style:normal;font-weight:800}
.fn-green{color:#517c22}.fn-orange{color:#f09913}.fn-red-dot{color:#d71920}

.fn-family-band{background:#090909;color:#fff;padding:0}
.fn-family-band-grid{display:grid;grid-template-columns:35% 65%;min-height:340px}
.fn-family-image-wrap{overflow:hidden;max-height:340px}
.fn-family-bottle{width:100%;height:100%;object-fit:cover;object-position:35% 50%;filter:saturate(1.08)}
.fn-family-copy{padding:38px 42px}
.fn-family-copy h2{font-size:42px;line-height:.9;margin:0 0 16px;color:#fff;text-transform:uppercase}
.fn-family-copy p{max-width:620px;color:#fff;margin:8px 0}
.fn-family-copy blockquote,.fn-story-bottom-band blockquote{color:var(--fn-red);font-size:22px;font-weight:900;margin:14px 0}
.fn-family-copy .fn-btn{margin-top:10px}

.fn-values-strip{background:#fff;border-bottom:10px solid var(--fn-red)}
.fn-values-strip-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.fn-values-strip-grid>div{padding:15px 18px;text-align:center;border-right:1px solid #ddd;display:flex;flex-direction:column}
.fn-values-strip-grid>div:last-child{border-right:0}
.fn-values-strip span{font-size:28px}.fn-values-strip b{font-size:15px}.fn-values-strip small{font-size:11px}
.fn-poster-footer-cta{background:var(--fn-red);color:#fff;padding:18px 0}
.fn-poster-footer-inner{display:flex;align-items:center;justify-content:center;gap:45px}
.fn-poster-footer-cta h2{font-size:32px;margin:0;color:#fff;text-transform:uppercase}
.fn-poster-footer-cta h2 span{color:#050505}
.fn-poster-footer-cta .fn-btn{background:#050505}

/* Story poster */
.fn-story-poster-page{background:#f7f6f2}
.fn-story-masthead{position:relative;padding:30px 0 20px}
.fn-story-masthead-grid{display:grid;grid-template-columns:37% 63%;gap:28px;position:relative;z-index:1}
.fn-dad-frame{padding:8px;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.14);transform:rotate(-.6deg)}
.fn-dad-poster{width:100%;height:100%;max-height:520px;object-fit:cover;object-position:center 40%;filter:saturate(.82) contrast(1.05)}
.fn-story-heading{position:relative;padding:8px 10px 5px}
.fn-story-logo{position:absolute;right:0;top:0;width:150px;height:150px;object-fit:cover;border-radius:50%}
.fn-story-heading h1{font-size:84px;line-height:.88;margin:0 170px 8px 0;text-transform:uppercase;color:#070707}
.fn-story-heading h2{font-size:36px;line-height:.98;color:var(--fn-red);text-transform:uppercase;margin:0 0 12px}
.fn-brush-title,.fn-brush-quote{display:inline-block;background:#070707;color:#fff;font-family:var(--fn-head);font-size:30px;font-weight:900;text-transform:uppercase;padding:7px 18px;transform:rotate(-1deg);clip-path:polygon(1% 8%,98% 0,100% 84%,2% 100%)}
.fn-red-rule{height:5px;background:var(--fn-red);margin:22px 0 15px;clip-path:polygon(0 20%,100% 0,99% 100%,0 70%)}
.fn-story-heading h3,.fn-story-panel h3{color:var(--fn-red);font-size:31px;line-height:.95;margin:0 0 10px;text-transform:uppercase}
.fn-story-heading p{font-size:15px;max-width:690px;margin:9px 0}

.fn-story-panels{border-top:1px solid #ccc;border-bottom:1px solid #ccc;background:#faf9f5}
.fn-story-panels-grid{display:grid;grid-template-columns:1.05fr 1fr 1.15fr}
.fn-story-panel{padding:28px 26px;border-right:1px solid #ccc;min-height:470px}
.fn-story-panel:last-child{border-right:0}
.fn-story-panel h4{font-size:20px;line-height:1.05;margin:8px 0;text-transform:uppercase}
.fn-story-panel p{font-size:14px;margin:9px 0}
.fn-music-notes{font-size:31px;letter-spacing:8px;margin:10px 0}
.fn-peppa-word{font-size:25px!important}
.fn-family-table-panel blockquote{background:var(--fn-red);color:#fff;font-family:var(--fn-head);font-size:21px;font-weight:900;line-height:1.05;padding:11px 14px;margin:15px 0;clip-path:polygon(1% 7%,98% 0,100% 90%,2% 100%)}
.fn-mini-photo{height:145px;margin-top:15px;overflow:hidden;border:6px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,.12)}
.fn-cropped-bottles{width:100%;height:100%;object-fit:cover;object-position:center 42%;transform:scale(1.08)}
.fn-brush-quote{font-size:26px;margin:15px 0}
.fn-wanted-panel strong{color:var(--fn-red);font-size:19px}

.fn-story-bottom-band{background:#080808;color:#fff;padding:18px 0 24px;border-top:7px solid var(--fn-red)}
.fn-story-bottom-grid{display:grid;grid-template-columns:170px 1fr 220px;gap:28px;align-items:center}
.fn-bottom-logo-img{width:150px;height:150px;object-fit:cover;border-radius:50%}
.fn-story-bottom-band h2{font-size:32px;line-height:.95;margin:0 0 8px;color:#fff;text-transform:uppercase}
.fn-story-bottom-band p{font-size:13px;color:#fff;margin:7px 0}
.fn-story-cta{text-align:center;border-left:1px solid rgba(255,255,255,.2);padding-left:20px}
.fn-story-cta h2{font-size:42px;line-height:.78}
.fn-story-cta h2 span{color:var(--fn-red);font-size:58px}
.fn-story-cta .fn-btn{margin-top:15px}

@media(max-width:900px){
  .fn-nav-links{gap:16px}.fn-nav-links a{font-size:13px}
  .fn-poster-hero{min-height:600px}.fn-hero-photo{background-position:62% center}
  .fn-flavour-grid,.fn-heat-grid,.fn-values-strip-grid{grid-template-columns:1fr}
  .fn-flavour-card{min-height:500px}
  .fn-family-band-grid,.fn-story-masthead-grid,.fn-story-bottom-grid{grid-template-columns:1fr}
  .fn-family-image-wrap{max-height:380px}
  .fn-story-logo{position:static;width:105px;height:105px;margin-bottom:12px}
  .fn-story-heading h1{font-size:66px;margin-right:0}
  .fn-story-panels-grid{grid-template-columns:1fr}
  .fn-story-panel{border-right:0;border-bottom:1px solid #ccc;min-height:auto}
  .fn-story-cta{border-left:0;padding-left:0}
}
@media(max-width:600px){
  .fn-brand-nav-inner{height:auto;padding:10px 0;align-items:flex-start}
  .fn-nav-logo{width:72px;height:72px;transform:none}
  .fn-nav-links{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;padding-top:10px}
  .fn-poster-hero-copy{padding:80px 0 55px}
  .fn-poster-hero h1{font-size:62px}
  .fn-hero-photo{background-position:68% center}
  .fn-family-copy{padding:30px 24px}
  .fn-poster-footer-inner{flex-direction:column;gap:14px}
  .fn-story-heading h1{font-size:54px}
  .fn-story-heading h2{font-size:29px}
  .fn-brush-title{font-size:24px}
}


/* =========================================================
   v1.4 — Reference-matched header + hero
   ========================================================= */
.fn-page{
  width:100vw;
  max-width:none!important;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
.fn-reference-header{
  height:84px;
  background:#030303;
  position:relative;
  z-index:100;
  border:0;
}
.fn-reference-header-inner{
  width:100%;
  height:84px;
  margin:0;
  padding:0 22px 0 178px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  position:relative;
}
.fn-reference-logo{
  position:absolute;
  left:18px;
  top:7px;
  width:128px;
  height:128px;
  z-index:104;
  display:block;
}
.fn-reference-logo img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius:50%;
  background:#fff;
}
.fn-reference-nav{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:33px;
  white-space:nowrap;
}
.fn-reference-nav>a:not(.fn-cart-link){
  color:#fff!important;
  text-decoration:none!important;
  font-family:var(--fn-head);
  font-weight:900;
  font-size:15px;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:-.015em;
}
.fn-reference-nav>a:not(.fn-cart-link):hover{
  color:#d71920!important;
}
.fn-cart-link{
  width:42px;
  height:42px;
  position:relative;
  display:block;
  margin-left:3px;
}
.fn-cart-icon{
  position:absolute;
  left:4px;
  top:12px;
  width:25px;
  height:16px;
  border-bottom:2px solid #fff;
  border-left:2px solid #fff;
  transform:skew(-7deg);
}
.fn-cart-icon:before{
  content:"";
  position:absolute;
  left:-5px;
  top:-8px;
  width:10px;
  border-top:2px solid #fff;
  transform:rotate(13deg);
}
.fn-cart-icon:after{
  content:"";
  position:absolute;
  left:2px;
  bottom:-8px;
  width:5px;
  height:5px;
  background:#fff;
  border-radius:50%;
  box-shadow:16px 0 0 #fff;
}
.fn-cart-count{
  position:absolute;
  right:0;
  top:3px;
  min-width:18px;
  height:18px;
  padding:0 4px;
  border-radius:10px;
  background:#e21b23;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font:700 10px/1 Arial,sans-serif;
}

.fn-reference-hero{
  height:548px;
  min-height:548px;
  position:relative;
  overflow:hidden;
  background:#050505;
  border-bottom:0;
  display:block;
}
.fn-reference-hero:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:52%;
  z-index:1;
  background:
    radial-gradient(circle at 35% 42%,rgba(214,15,26,.12),transparent 33%),
    linear-gradient(90deg,#050505 0%,#050505 72%,rgba(5,5,5,.84) 89%,rgba(5,5,5,0) 100%);
}
.fn-reference-hero-image{
  position:absolute;
  right:0;
  top:0;
  width:60%;
  height:100%;
  z-index:0;
  background-image:url("../images/bottles-trini.jpeg");
  background-size:cover;
  background-position:55% 45%;
  filter:saturate(1.04) contrast(1.02);
}
.fn-reference-hero-image:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.08) 28%,rgba(0,0,0,0) 64%);
}
.fn-reference-splatter{
  position:absolute;
  z-index:2;
  left:22px;
  top:12px;
  width:430px;
  height:360px;
  opacity:.72;
  pointer-events:none;
  background:
    radial-gradient(circle at 27% 18%,#b60d17 0 2px,transparent 3px),
    radial-gradient(circle at 42% 23%,#b60d17 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 60% 31%,#b60d17 0 2px,transparent 3px),
    radial-gradient(circle at 18% 39%,#b60d17 0 1px,transparent 2px),
    radial-gradient(circle at 74% 52%,#b60d17 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 48% 64%,#b60d17 0 1px,transparent 2px),
    radial-gradient(circle at 34% 79%,#b60d17 0 2px,transparent 3px);
  background-size:47px 43px,61px 57px,73px 69px,41px 39px,59px 52px,66px 61px,51px 48px;
}
.fn-reference-hero-inner{
  position:relative;
  z-index:3;
  width:100%;
  height:100%;
}
.fn-reference-hero-copy{
  position:absolute;
  left:22px;
  top:49px;
  width:350px;
}
.fn-reference-hero h1{
  margin:0;
  font-family:var(--fn-head);
  font-size:69px;
  line-height:.77;
  letter-spacing:-.04em;
  text-transform:uppercase;
  color:#fff;
  text-shadow:none;
}
.fn-reference-hero h1 .fn-white-line{color:#fff}
.fn-reference-hero h1 .fn-hot-line{color:#d71920;font-size:1.2em}
.fn-reference-hero p{
  margin:24px 0 15px;
  color:#fff;
  font-size:14px;
  line-height:1.28;
  max-width:245px;
}
.fn-reference-hero .fn-btn{
  min-height:40px;
  padding:0 22px;
  background:#d71920;
  font-size:14px;
  border-radius:0;
}

/* Reference image places the product section immediately under hero. */
.fn-poster-products{
  padding-top:12px;
}
.fn-poster-products .fn-poster-title{
  margin:0 0 14px;
  font-size:31px;
}

/* Astra/WP wrapper neutralization for shortcode pages */
.entry-content .fn-page,
.ast-container .fn-page,
.site-content .fn-page{
  max-width:none!important;
}
.entry-content > .fn-page{
  margin-top:0;
}
.fn-page p:last-child{margin-bottom:0}

@media(max-width:900px){
  .fn-reference-header-inner{padding-left:130px;padding-right:12px}
  .fn-reference-logo{width:102px;height:102px;left:14px;top:8px}
  .fn-reference-nav{gap:17px}
  .fn-reference-nav>a:not(.fn-cart-link){font-size:12px}
  .fn-reference-hero{height:520px;min-height:520px}
  .fn-reference-hero-image{width:66%;background-position:58% 45%}
  .fn-reference-hero-copy{left:18px;top:58px;width:300px}
  .fn-reference-hero h1{font-size:59px}
}
@media(max-width:680px){
  .fn-reference-header{height:122px}
  .fn-reference-header-inner{height:122px;padding:12px 12px 10px 104px;align-items:flex-start}
  .fn-reference-logo{width:88px;height:88px;left:10px;top:9px}
  .fn-reference-nav{
    width:100%;
    display:grid;
    grid-template-columns:repeat(3,auto);
    gap:10px 15px;
    align-content:center;
    justify-content:end;
    padding-top:2px;
  }
  .fn-reference-nav>a:not(.fn-cart-link){font-size:11px}
  .fn-cart-link{position:absolute;right:8px;bottom:5px}
  .fn-reference-hero{height:560px;min-height:560px}
  .fn-reference-hero:before{width:78%;background:linear-gradient(90deg,#050505 0%,#050505 70%,rgba(5,5,5,.65) 100%)}
  .fn-reference-hero-image{width:74%;height:54%;top:auto;bottom:0;background-position:57% 50%}
  .fn-reference-hero-image:after{background:linear-gradient(90deg,rgba(0,0,0,.44),rgba(0,0,0,0))}
  .fn-reference-hero-copy{left:18px;top:38px;width:270px}
  .fn-reference-hero h1{font-size:56px}
  .fn-reference-hero p{font-size:13px}
}

/* =========================================================
   v2.0 — Combined plugin cleanup
   Original plugin header + hero are intentionally removed.
   Keep all content centered; no viewport breakout/right drift.
   ========================================================= */
body.fnh-pro-layout .fn-page{
  width:100% !important;
  max-width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
  overflow:hidden;
}
body.fnh-pro-layout .fn-page .fn-container{
  width:min(1180px, calc(100% - 48px));
  max-width:1180px;
  margin-left:auto;
  margin-right:auto;
}
/* Safety: legacy top menu/banner can never render if stale cached markup exists */
body.fnh-pro-layout .fn-reference-header,
body.fnh-pro-layout .fn-brand-nav,
body.fnh-pro-layout .fn-reference-hero,
body.fnh-pro-layout .fn-poster-hero.fn-reference-hero{
  display:none !important;
}
@media(max-width:767px){
  body.fnh-pro-layout .fn-page .fn-container{width:calc(100% - 28px)}
}

/* =========================================================
   v2.2 — Premium flavour-card redesign
   ========================================================= */
.fn-poster-products{
  padding:72px 0 68px;
  background:
    radial-gradient(circle at 10% 0%,rgba(215,25,32,.06),transparent 30%),
    radial-gradient(circle at 90% 100%,rgba(239,148,23,.07),transparent 34%),
    #f7f4ee;
}
.fn-poster-products:before{
  opacity:.12;
  background-size:7px 7px;
}
.fn-poster-products .fn-container{
  width:min(1400px,92%);
}
.fn-poster-products .fn-poster-title{
  max-width:980px;
  margin:0 auto 42px;
  color:#111;
  font-size:clamp(34px,3.15vw,58px);
  line-height:.96;
  letter-spacing:-.035em;
  text-wrap:balance;
}
.fn-poster-products .fn-poster-title:before{
  content:"FIND YOUR HEAT";
  display:block;
  width:max-content;
  margin:0 auto 13px;
  padding:7px 13px 6px;
  background:#111;
  color:#fff;
  border-radius:999px;
  font:900 12px/1 var(--fn-body);
  letter-spacing:.18em;
}
.fn-poster-products .fn-poster-title span{
  font-weight:400;
  color:#555;
}
.fn-flavour-grid{
  gap:28px;
  align-items:stretch;
}
.fn-flavour-card{
  min-height:500px;
  padding:34px 34px 30px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:28px;
  overflow:hidden;
  isolation:isolate;
  box-shadow:
    0 22px 55px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .28s ease,box-shadow .28s ease;
}
.fn-flavour-card:hover{
  transform:translateY(-7px);
  box-shadow:
    0 30px 70px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.2);
}
.fn-flavour-card:before{
  z-index:-2;
  background:
    linear-gradient(180deg,rgba(255,255,255,.07),transparent 34%),
    repeating-linear-gradient(118deg,transparent 0 18px,rgba(255,255,255,.025) 18px 20px);
}
.fn-flavour-card:after{
  content:"";
  position:absolute;
  z-index:-1;
  width:260px;
  height:260px;
  border-radius:50%;
  right:-105px;
  bottom:-105px;
  background:rgba(255,255,255,.08);
  box-shadow:0 0 0 38px rgba(255,255,255,.03);
  pointer-events:none;
}
.fn-flavour-hot{
  background:linear-gradient(155deg,#ed2631 0%,#c70d19 54%,#87040d 100%);
}
.fn-flavour-mild{
  background:linear-gradient(155deg,#719b3c 0%,#4d7725 52%,#274414 100%);
}
.fn-flavour-slight{
  background:linear-gradient(155deg,#ffad22 0%,#f18b0b 52%,#c85f00 100%);
}
.fn-flavour-logo{
  width:104px;
  height:104px;
  margin:0 0 22px;
  padding:5px;
  background:#fff;
  border:0;
  box-shadow:0 10px 25px rgba(0,0,0,.18);
}
.fn-flavour-card h3{
  margin:0 0 12px;
  font-size:clamp(46px,3.2vw,62px);
  line-height:.88;
  letter-spacing:-.035em;
  text-shadow:0 2px 0 rgba(0,0,0,.08);
}
.fn-flavour-card h4{
  display:inline-block;
  max-width:100%;
  margin:0 0 22px;
  padding:9px 13px 8px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:12px;
  background:rgba(0,0,0,.12);
  font-size:clamp(19px,1.45vw,24px);
  line-height:1.05;
  letter-spacing:.01em;
}
.fn-flavour-card p{
  max-width:330px;
  margin:0 auto 15px;
  color:rgba(255,255,255,.94);
  font-size:17px;
  line-height:1.52;
}
.fn-flavour-card strong{
  margin:0 0 26px;
  color:#fff;
  font-size:16px;
  letter-spacing:.01em;
}
.fn-flavour-card .fn-card-btn{
  width:min(100%,270px);
  min-height:54px;
  margin-top:auto;
  padding:14px 22px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:#0b0b0b;
  box-shadow:0 10px 22px rgba(0,0,0,.18);
  font-size:14px;
  letter-spacing:.06em;
}
.fn-flavour-card .fn-card-btn:hover{
  transform:translateY(-2px) scale(1.015);
  background:#fff;
  color:#111!important;
  filter:none;
}

@media (max-width:1100px){
  .fn-poster-products{padding:58px 0 54px}
  .fn-flavour-grid{gap:18px}
  .fn-flavour-card{padding:30px 24px 26px;min-height:485px}
  .fn-flavour-card p{font-size:16px}
}
@media (max-width:900px){
  .fn-poster-products .fn-container{width:min(720px,91%)}
  .fn-poster-products .fn-poster-title{margin-bottom:30px}
  .fn-flavour-grid{gap:22px}
  .fn-flavour-card{min-height:0;padding:34px 30px 30px}
}
@media (max-width:600px){
  .fn-poster-products{padding:44px 0 42px}
  .fn-poster-products .fn-poster-title{font-size:38px;margin-bottom:26px}
  .fn-poster-products .fn-poster-title:before{font-size:10px;padding:7px 11px 6px}
  .fn-flavour-card{border-radius:22px;padding:28px 22px 24px}
  .fn-flavour-logo{width:88px;height:88px;margin-bottom:18px}
  .fn-flavour-card h3{font-size:48px}
  .fn-flavour-card h4{font-size:19px;margin-bottom:18px}
  .fn-flavour-card p{font-size:15.5px}
  .fn-flavour-card .fn-card-btn{width:100%}
}

/* =========================================================
   v2.3 — Full-width flavour showcase / relaxed typography
   ========================================================= */
.fn-poster-products{
  width:100vw;
  max-width:none;
  margin-left:calc(50% - 50vw);
  padding:76px 0 84px;
  overflow:hidden;
  background:
    radial-gradient(circle at 8% 18%,rgba(215,25,32,.10),transparent 26%),
    radial-gradient(circle at 92% 82%,rgba(239,148,23,.12),transparent 28%),
    linear-gradient(180deg,#fffdfa 0%,#f4efe7 100%);
  border-top:1px solid rgba(0,0,0,.06);
  border-bottom:1px solid rgba(0,0,0,.08);
}
.fn-poster-products .fn-container{
  width:min(1760px,calc(100vw - 56px));
  max-width:none;
  margin-inline:auto;
}
.fn-flavour-kicker{
  display:table;
  margin:0 auto 14px;
  padding:9px 16px 8px;
  border-radius:999px;
  background:#111;
  color:#fff;
  font-family:Arial,Helvetica,sans-serif;
  font-size:12px;
  font-weight:800;
  line-height:1;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.fn-poster-products .fn-poster-title{
  max-width:1500px;
  margin:0 auto;
  color:#111;
  font-family:"Arial Black",Arial,Helvetica,sans-serif!important;
  font-stretch:normal!important;
  font-size:clamp(36px,3.1vw,66px);
  font-weight:900;
  line-height:1.02;
  letter-spacing:-.045em;
  text-transform:uppercase;
}
.fn-poster-products .fn-poster-title:before{display:none!important;content:none!important}
.fn-poster-products .fn-poster-title span{
  color:#555;
  font-family:Arial,Helvetica,sans-serif!important;
  font-weight:400;
  letter-spacing:-.04em;
}
.fn-flavour-intro{
  margin:15px auto 38px;
  max-width:700px;
  text-align:center;
  color:#6a655f;
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(15px,1vw,18px);
  line-height:1.5;
}
.fn-flavour-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,1.5vw,30px);
  align-items:stretch;
}
.fn-flavour-card{
  min-width:0;
  min-height:555px;
  padding:34px clamp(26px,2.2vw,44px) 32px;
  border:1px solid rgba(255,255,255,.30);
  border-radius:34px;
  overflow:hidden;
  isolation:isolate;
  box-shadow:0 26px 65px rgba(24,18,10,.18),inset 0 1px 0 rgba(255,255,255,.24);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease;
}
.fn-flavour-card:hover{
  transform:translateY(-9px);
  box-shadow:0 36px 78px rgba(24,18,10,.24),inset 0 1px 0 rgba(255,255,255,.28);
}
.fn-flavour-card:before{
  z-index:-2;
  background:
    radial-gradient(circle at 50% -10%,rgba(255,255,255,.22),transparent 36%),
    repeating-linear-gradient(122deg,transparent 0 22px,rgba(255,255,255,.026) 22px 24px);
}
.fn-flavour-card:after{
  width:360px;
  height:360px;
  right:-175px;
  bottom:-185px;
  background:rgba(255,255,255,.075);
  box-shadow:0 0 0 48px rgba(255,255,255,.025),0 0 0 98px rgba(255,255,255,.018);
}
.fn-flavour-hot{background:linear-gradient(145deg,#f12b35 0%,#cf101d 51%,#8d0610 100%)}
.fn-flavour-mild{background:linear-gradient(145deg,#7ba742 0%,#4f7927 52%,#294715 100%)}
.fn-flavour-slight{background:linear-gradient(145deg,#ffb52b 0%,#f28d0d 52%,#c65c00 100%)}
.fn-flavour-logo{
  width:112px;
  height:112px;
  margin:0 0 24px;
  padding:7px;
  border-radius:50%;
  background:#fff;
  object-fit:cover;
  box-shadow:0 14px 32px rgba(0,0,0,.22);
}
.fn-flavour-card h3{
  margin:0 0 14px;
  color:#fff;
  font-family:"Arial Black",Arial,Helvetica,sans-serif!important;
  font-stretch:normal!important;
  font-size:clamp(42px,3vw,64px);
  font-weight:900;
  line-height:1;
  letter-spacing:-.045em;
  text-transform:uppercase;
  text-shadow:0 2px 0 rgba(0,0,0,.08);
}
.fn-flavour-card h4{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:64px;
  max-width:390px;
  margin:0 auto 24px;
  padding:10px 18px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:16px;
  background:rgba(0,0,0,.13);
  color:#fff;
  font-family:Arial,Helvetica,sans-serif!important;
  font-stretch:normal!important;
  font-size:clamp(17px,1.25vw,22px);
  font-weight:800;
  line-height:1.13;
  letter-spacing:.005em;
  text-transform:uppercase;
}
.fn-flavour-card p{
  max-width:430px;
  margin:0 auto 17px;
  color:rgba(255,255,255,.96);
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:clamp(15.5px,1.02vw,18px);
  font-weight:400;
  line-height:1.58;
  letter-spacing:0;
}
.fn-flavour-card strong{
  margin:0 0 28px;
  color:#fff;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:15px;
  font-weight:800;
  line-height:1.35;
  letter-spacing:.01em;
}
.fn-flavour-card .fn-card-btn{
  width:min(100%,340px);
  min-height:58px;
  margin-top:auto;
  padding:16px 24px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:#0a0a0a;
  color:#fff!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-stretch:normal!important;
  font-size:13px;
  font-weight:900;
  line-height:1.1;
  letter-spacing:.085em;
  box-shadow:0 12px 25px rgba(0,0,0,.22);
}
.fn-flavour-card .fn-card-btn:hover{
  background:#fff;
  color:#111!important;
  transform:translateY(-3px);
  box-shadow:0 16px 32px rgba(0,0,0,.2);
}
@media (min-width:1900px){
  .fn-poster-products .fn-container{width:min(1840px,calc(100vw - 80px))}
  .fn-flavour-card{min-height:575px}
}
@media (max-width:1180px){
  .fn-poster-products .fn-container{width:min(1080px,calc(100vw - 40px))}
  .fn-flavour-card{min-height:520px;padding:30px 22px 28px;border-radius:28px}
  .fn-flavour-logo{width:94px;height:94px;margin-bottom:20px}
  .fn-flavour-card h4{min-height:60px;padding:9px 12px}
}
@media (max-width:900px){
  .fn-poster-products{padding:58px 0 64px}
  .fn-poster-products .fn-container{width:min(760px,calc(100vw - 32px))}
  .fn-flavour-grid{grid-template-columns:1fr;gap:22px}
  .fn-flavour-card{min-height:0;padding:34px 30px 30px}
  .fn-flavour-card p{max-width:520px}
  .fn-flavour-intro{margin-bottom:30px}
}
@media (max-width:560px){
  .fn-poster-products{padding:44px 0 48px}
  .fn-poster-products .fn-container{width:calc(100vw - 24px)}
  .fn-flavour-kicker{font-size:10px}
  .fn-poster-products .fn-poster-title{font-size:clamp(31px,10vw,42px);line-height:1.02}
  .fn-flavour-intro{margin:12px auto 24px;font-size:14px}
  .fn-flavour-card{padding:28px 20px 24px;border-radius:24px}
  .fn-flavour-logo{width:86px;height:86px}
  .fn-flavour-card h3{font-size:44px}
  .fn-flavour-card h4{min-height:0;font-size:16px;border-radius:13px}
  .fn-flavour-card p{font-size:15px;line-height:1.5}
  .fn-flavour-card .fn-card-btn{width:100%;min-height:54px}
}

/* =========================================================
   v2.4 — Interactive F'N Spice Meter
   ========================================================= */
.fn-heat-picker{
  --heat-green:#587f2c;
  --heat-orange:#f29a17;
  --heat-red:#d71920;
  --heat-active:var(--heat-green);
  position:relative;
  overflow:hidden;
  padding:64px clamp(18px,3vw,54px) 72px;
  border:0;
  background:
    radial-gradient(circle at 18% 16%,rgba(215,25,32,.09),transparent 25%),
    radial-gradient(circle at 84% 82%,rgba(242,154,23,.08),transparent 24%),
    #0b0b0b;
  color:#fff;
}
.fn-heat-picker:before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.18;
  background-image:radial-gradient(rgba(255,255,255,.38) .6px,transparent .6px);
  background-size:7px 7px;
}
.fn-heat-shell{width:min(1760px,100%);margin:0 auto;position:relative;z-index:1}
.fn-heat-kicker{font:800 13px/1 var(--fn-body);letter-spacing:.22em;color:#ff4a50;text-align:center;margin-bottom:12px}
.fn-heat-title{font-family:Arial,Helvetica,sans-serif!important;font-stretch:normal!important;font-size:clamp(36px,4.1vw,72px);line-height:.95;letter-spacing:-.045em;text-align:center;margin:0;color:#fff!important;text-transform:uppercase;font-weight:900}
.fn-heat-title span{color:#ff353d;display:inline-block}
.fn-heat-lead{text-align:center;color:rgba(255,255,255,.68);font-size:clamp(15px,1.2vw,19px);margin:16px auto 36px;max-width:620px}
.fn-spice-meter{--meter-pos:16.66%;--heat-active:var(--heat-green)}
.fn-spice-meter[data-level="slight"]{--meter-pos:50%;--heat-active:var(--heat-orange)}
.fn-spice-meter[data-level="hot"]{--meter-pos:83.34%;--heat-active:var(--heat-red)}
.fn-meter-stage{position:relative;height:96px;margin:0 auto 12px;width:min(1180px,91%)}
.fn-meter-track{position:absolute;left:0;right:0;top:39px;height:16px;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.18);border-radius:999px;overflow:hidden;box-shadow:inset 0 2px 7px rgba(0,0,0,.45)}
.fn-meter-track:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--heat-green) 0 33.33%,var(--heat-orange) 33.33% 66.66%,var(--heat-red) 66.66%);opacity:.3}
.fn-meter-fill{position:absolute;z-index:2;left:0;top:0;bottom:0;width:var(--meter-pos);border-radius:999px;background:linear-gradient(90deg,var(--heat-green),var(--heat-active));box-shadow:0 0 24px color-mix(in srgb,var(--heat-active) 64%,transparent);transition:width .65s cubic-bezier(.2,.75,.2,1),background .45s ease}
.fn-meter-pepper{position:absolute;z-index:4;top:5px;left:var(--meter-pos);font-size:49px;line-height:1;transform:translateX(-50%) rotate(-14deg);filter:drop-shadow(0 8px 8px rgba(0,0,0,.5));transition:left .65s cubic-bezier(.2,.75,.2,1);will-change:left}
.fn-meter-tick{position:absolute;top:34px;width:26px;height:26px;border-radius:50%;background:#111;border:4px solid rgba(255,255,255,.88);transform:translateX(-50%);z-index:3;box-shadow:0 3px 8px rgba(0,0,0,.4)}
.fn-meter-tick-1{left:16.66%;border-color:var(--heat-green)}.fn-meter-tick-2{left:50%;border-color:var(--heat-orange)}.fn-meter-tick-3{left:83.34%;border-color:var(--heat-red)}
.fn-heat-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0 auto 26px;width:min(1500px,100%)}
.fn-heat-option{appearance:none;-webkit-appearance:none;min-width:0;cursor:pointer;text-align:left;color:#fff;background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.035));border:1px solid rgba(255,255,255,.13);border-radius:22px;padding:23px 24px;display:grid;grid-template-columns:56px 1fr;gap:16px;align-items:center;min-height:154px;box-shadow:0 12px 32px rgba(0,0,0,.22);transition:transform .24s ease,border-color .24s ease,background .24s ease,box-shadow .24s ease;position:relative;overflow:hidden}
.fn-heat-option:before{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--option-color);transform:scaleX(.18);transform-origin:left;opacity:.5;transition:transform .35s ease,opacity .35s ease}
.fn-heat-option[data-heat="mild"]{--option-color:var(--heat-green)}.fn-heat-option[data-heat="slight"]{--option-color:var(--heat-orange)}.fn-heat-option[data-heat="hot"]{--option-color:var(--heat-red)}
.fn-heat-option:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--option-color) 65%,white);background:linear-gradient(145deg,color-mix(in srgb,var(--option-color) 16%,#161616),#111);box-shadow:0 18px 42px rgba(0,0,0,.32)}
.fn-heat-option.is-active{border-color:var(--option-color);background:linear-gradient(145deg,color-mix(in srgb,var(--option-color) 22%,#151515),#101010);box-shadow:0 20px 46px rgba(0,0,0,.38),inset 0 0 0 1px color-mix(in srgb,var(--option-color) 36%,transparent)}
.fn-heat-option.is-active:before{transform:scaleX(1);opacity:1}
.fn-heat-number{font:900 40px/1 Arial,Helvetica,sans-serif;color:var(--option-color);letter-spacing:-.06em}
.fn-heat-copy{display:flex;flex-direction:column;min-width:0}
.fn-heat-copy strong{font-family:Arial,Helvetica,sans-serif!important;font-stretch:normal!important;font-size:clamp(18px,1.4vw,25px);line-height:1.05;letter-spacing:-.025em;color:#fff;text-transform:uppercase}
.fn-heat-copy em{font-style:normal;font-family:Arial,Helvetica,sans-serif;font-size:14px;font-weight:900;letter-spacing:.14em;color:var(--option-color);margin-top:8px}
.fn-heat-copy small{font-size:13px;color:rgba(255,255,255,.58);margin-top:7px;line-height:1.35}
.fn-heat-result{width:min(1080px,100%);margin:0 auto;display:grid;grid-template-columns:74px 1fr auto;gap:20px;align-items:center;padding:22px 24px;border:1px solid rgba(255,255,255,.12);border-radius:22px;background:rgba(255,255,255,.055);backdrop-filter:blur(8px)}
.fn-heat-result-icon{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;font-size:31px;background:color-mix(in srgb,var(--heat-active) 24%,#161616);border:1px solid color-mix(in srgb,var(--heat-active) 55%,transparent);transition:.4s ease}
.fn-heat-result-copy{min-width:0}.fn-result-label{display:block;font-size:10px;font-weight:900;letter-spacing:.2em;color:rgba(255,255,255,.54)}
.fn-result-title{display:block;font-family:Arial,Helvetica,sans-serif!important;font-stretch:normal!important;font-size:31px;line-height:1;color:var(--heat-active);margin:3px 0 4px;transition:color .35s ease}
.fn-result-text{margin:0;color:rgba(255,255,255,.72);font-size:14px}
.fn-heat-shop{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:52px;border-radius:999px;padding:0 23px;color:#fff!important;text-decoration:none!important;background:var(--heat-active);font-size:12px;font-weight:900;letter-spacing:.09em;transition:background .35s ease,transform .2s ease}
.fn-heat-shop:hover{transform:translateY(-2px);color:#fff!important}.fn-heat-shop span{font-size:20px;line-height:1}
.fn-heat-picker.fn-heat-inview .fn-heat-kicker{animation:fnHeatReveal .55s both}
.fn-heat-picker.fn-heat-inview .fn-heat-title{animation:fnHeatReveal .7s .08s both}
.fn-heat-picker.fn-heat-inview .fn-heat-title span{animation:fnHeatPulse .85s .28s both}
.fn-heat-picker.fn-heat-inview .fn-heat-lead{animation:fnHeatReveal .65s .18s both}
.fn-heat-option.fn-heat-pop .fn-heat-copy strong{animation:fnHeatHeading .46s both}
.fn-heat-option.fn-heat-pop .fn-heat-copy em{animation:fnHeatHeading .46s .08s both}
.fn-heat-option.fn-heat-pop .fn-heat-copy small{animation:fnHeatHeading .46s .14s both}
.fn-heat-result.fn-result-pop{animation:fnHeatResult .45s both}
@keyframes fnHeatReveal{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fnHeatPulse{0%{opacity:0;transform:scale(.82) rotate(-2deg)}65%{transform:scale(1.06) rotate(1deg)}100%{opacity:1;transform:none}}
@keyframes fnHeatHeading{0%{opacity:.1;transform:translateY(10px) scale(.97)}70%{transform:translateY(-2px) scale(1.015)}100%{opacity:1;transform:none}}
@keyframes fnHeatResult{0%{opacity:.35;transform:translateY(8px)}100%{opacity:1;transform:none}}
@media(max-width:900px){
 .fn-heat-picker{padding:52px 18px 58px}.fn-heat-options{grid-template-columns:1fr;gap:12px}.fn-heat-option{min-height:118px;padding:18px 20px}.fn-meter-stage{width:92%;margin-bottom:6px}.fn-heat-result{grid-template-columns:60px 1fr}.fn-heat-result-icon{width:54px;height:54px}.fn-heat-shop{grid-column:1/-1;width:100%}
}
@media(max-width:560px){
 .fn-heat-picker{padding:44px 14px 48px}.fn-heat-title{font-size:38px}.fn-heat-lead{margin-bottom:25px}.fn-meter-stage{height:78px}.fn-meter-track{top:31px;height:13px}.fn-meter-pepper{top:2px;font-size:41px}.fn-meter-tick{top:27px;width:21px;height:21px;border-width:3px}.fn-heat-option{grid-template-columns:44px 1fr;border-radius:18px;padding:17px 16px}.fn-heat-number{font-size:31px}.fn-heat-copy strong{font-size:18px}.fn-heat-result{padding:18px 16px;border-radius:18px}.fn-result-title{font-size:27px}
}
@media(prefers-reduced-motion:reduce){
 .fn-meter-fill,.fn-meter-pepper,.fn-heat-option,.fn-heat-result-icon,.fn-result-title,.fn-heat-shop{transition:none!important}.fn-heat-picker *{animation:none!important;scroll-behavior:auto!important}
}

/* =========================================================
   v2.5 — Full-bleed flavour section + product bottle art
   ========================================================= */
.fn-poster-products{
  /* Robust full-bleed treatment even when Astra/blocks constrain the shortcode. */
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
  position:relative;
  isolation:isolate;
  overflow:visible;
  background:#f4efe7!important;
  border:0;
  box-shadow:0 0 0 100vmax #f4efe7;
  clip-path:inset(0 -100vmax);
}
.fn-poster-products:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 8% 18%,rgba(215,25,32,.10),transparent 27%),
    radial-gradient(circle at 92% 82%,rgba(239,148,23,.12),transparent 30%),
    linear-gradient(180deg,#fffdfa 0%,#f4efe7 100%);
}
.fn-poster-products .fn-container{
  width:min(1840px,calc(100% - 48px))!important;
  margin-inline:auto!important;
}
.fn-flavour-card{
  min-height:720px;
  padding-top:26px;
}
.fn-flavour-bottle{
  display:block;
  width:auto;
  height:clamp(225px,16vw,310px);
  max-width:72%;
  margin:-6px auto 10px;
  object-fit:contain;
  object-position:center bottom;
  filter:drop-shadow(0 22px 18px rgba(0,0,0,.28));
  transform:translateZ(0);
  transition:transform .38s cubic-bezier(.2,.8,.2,1),filter .38s ease;
  position:relative;
  z-index:2;
}
.fn-flavour-card:hover .fn-flavour-bottle{
  transform:translateY(-10px) scale(1.035) rotate(-1deg);
  filter:drop-shadow(0 30px 22px rgba(0,0,0,.33));
}
.fn-flavour-card:nth-child(2):hover .fn-flavour-bottle{transform:translateY(-10px) scale(1.035)}
.fn-flavour-card:nth-child(3):hover .fn-flavour-bottle{transform:translateY(-10px) scale(1.035) rotate(1deg)}
.fn-flavour-card h3{margin-top:0}

@media (min-width:1900px){
  .fn-poster-products .fn-container{width:min(1900px,calc(100% - 64px))!important}
  .fn-flavour-card{min-height:760px}
  .fn-flavour-bottle{height:320px}
}
@media (max-width:1180px){
  .fn-poster-products .fn-container{width:calc(100% - 32px)!important}
  .fn-flavour-card{min-height:660px;padding-top:24px}
  .fn-flavour-bottle{height:235px;max-width:76%}
}
@media (max-width:900px){
  .fn-poster-products .fn-container{width:calc(100% - 28px)!important}
  .fn-flavour-card{min-height:0;padding-top:26px}
  .fn-flavour-bottle{height:290px;max-width:62%;margin-bottom:8px}
}
@media (max-width:560px){
  .fn-poster-products .fn-container{width:calc(100% - 20px)!important}
  .fn-flavour-card{padding-top:22px}
  .fn-flavour-bottle{height:235px;max-width:72%;margin-top:-2px}
}
@media (prefers-reduced-motion:reduce){
  .fn-flavour-bottle{transition:none!important}
  .fn-flavour-card:hover .fn-flavour-bottle{transform:none!important}
}


/* =========================================================
   v2.6 — Compact flavour showcase
   Keeps the bottle-led design while reducing vertical scroll.
   ========================================================= */
.fn-poster-products{
  padding-top:clamp(38px,3.2vw,58px)!important;
  padding-bottom:clamp(42px,3.6vw,64px)!important;
}
.fn-flavour-intro{
  margin-bottom:clamp(20px,2vw,30px)!important;
}
.fn-flavour-card{
  min-height:570px!important;
  padding-top:18px!important;
  padding-bottom:22px!important;
}
.fn-flavour-bottle{
  height:clamp(190px,12.5vw,245px)!important;
  max-width:66%!important;
  margin:-8px auto 2px!important;
}
.fn-flavour-card h3{
  font-size:clamp(36px,2.45vw,52px)!important;
  margin-bottom:8px!important;
}
.fn-flavour-card h4{
  min-height:52px!important;
  margin-bottom:14px!important;
  padding:8px 14px!important;
  font-size:clamp(15px,1.05vw,19px)!important;
}
.fn-flavour-card p{
  margin-bottom:10px!important;
  font-size:clamp(14.5px,.92vw,16.5px)!important;
  line-height:1.45!important;
}
.fn-flavour-card strong{
  margin-bottom:15px!important;
  font-size:14px!important;
}
.fn-flavour-card .fn-card-btn{
  min-height:50px!important;
  padding:13px 22px!important;
}

@media (min-width:1900px){
  .fn-flavour-card{min-height:590px!important}
  .fn-flavour-bottle{height:250px!important}
}
@media (max-width:1180px){
  .fn-flavour-card{min-height:535px!important;padding-top:16px!important}
  .fn-flavour-bottle{height:190px!important;max-width:68%!important}
}
@media (max-width:900px){
  .fn-flavour-card{min-height:0!important;padding:24px 28px 26px!important}
  .fn-flavour-bottle{height:230px!important;max-width:58%!important}
}
@media (max-width:560px){
  .fn-poster-products{padding-top:36px!important;padding-bottom:40px!important}
  .fn-flavour-card{padding:20px 18px 22px!important}
  .fn-flavour-bottle{height:190px!important;max-width:68%!important}
  .fn-flavour-card h3{font-size:38px!important}
}

/* =========================================================
   v2.6.1 — Slightly larger bottles, same compact card height
   ========================================================= */
.fn-flavour-bottle{
  height:clamp(210px,14vw,270px)!important;
  max-width:70%!important;
  margin:-16px auto -4px!important;
}
@media (min-width:1900px){
  .fn-flavour-bottle{height:275px!important;max-width:70%!important}
}
@media (max-width:1180px){
  .fn-flavour-bottle{height:205px!important;max-width:72%!important;margin:-12px auto -2px!important}
}
@media (max-width:900px){
  .fn-flavour-bottle{height:245px!important;max-width:62%!important;margin:-8px auto 0!important}
}
@media (max-width:560px){
  .fn-flavour-bottle{height:205px!important;max-width:72%!important;margin:-8px auto 0!important}
}


/* =========================================================
   v2.7 — Reference-inspired flavour cards
   More breathing room above the product + bottle/content split
   on desktop, while retaining the compact section height.
   ========================================================= */
@media (min-width:1101px){
  .fn-flavour-card{
    min-height:600px!important;
    padding:34px 28px 26px!important;
    display:grid!important;
    grid-template-columns:minmax(150px,42%) minmax(0,58%)!important;
    grid-template-rows:auto auto 1fr auto auto!important;
    column-gap:22px!important;
    row-gap:9px!important;
    align-items:center!important;
    text-align:left!important;
    overflow:hidden!important;
  }

  .fn-flavour-bottle{
    grid-column:1!important;
    grid-row:1 / 6!important;
    align-self:center!important;
    justify-self:center!important;
    width:100%!important;
    max-width:220px!important;
    height:auto!important;
    max-height:455px!important;
    margin:18px auto 0!important;
    object-fit:contain!important;
    filter:drop-shadow(0 24px 20px rgba(0,0,0,.31))!important;
  }

  .fn-flavour-card h3,
  .fn-flavour-card h4,
  .fn-flavour-card p,
  .fn-flavour-card strong,
  .fn-flavour-card .fn-card-btn{
    grid-column:2!important;
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  .fn-flavour-card h3{
    align-self:end!important;
    margin:22px 0 2px!important;
    font-size:clamp(34px,2.35vw,49px)!important;
    line-height:.94!important;
    text-align:left!important;
  }

  .fn-flavour-card h4{
    min-height:0!important;
    margin:0 0 3px!important;
    padding:9px 11px!important;
    font-size:clamp(14px,.92vw,18px)!important;
    line-height:1.05!important;
    text-align:left!important;
  }

  .fn-flavour-card p{
    align-self:start!important;
    margin:5px 0 0!important;
    font-size:clamp(14px,.88vw,16px)!important;
    line-height:1.46!important;
    text-align:left!important;
  }

  .fn-flavour-card strong{
    align-self:end!important;
    margin:0 0 4px!important;
    text-align:left!important;
  }

  .fn-flavour-card .fn-card-btn{
    align-self:end!important;
    min-height:48px!important;
    padding:12px 14px!important;
    text-align:center!important;
  }

  .fn-flavour-card:hover .fn-flavour-bottle{
    transform:translateY(-5px) scale(1.035)!important;
  }
}

@media (min-width:1500px){
  .fn-flavour-card{
    min-height:620px!important;
    grid-template-columns:minmax(175px,44%) minmax(0,56%)!important;
    column-gap:26px!important;
    padding:38px 32px 28px!important;
  }
  .fn-flavour-bottle{
    max-width:245px!important;
    max-height:485px!important;
    margin-top:20px!important;
  }
}

@media (min-width:1900px){
  .fn-flavour-card{min-height:640px!important}
  .fn-flavour-bottle{max-width:270px!important;max-height:510px!important}
}

/* Preserve stacked cards on tablet/mobile, but add breathing room above bottle. */
@media (max-width:1100px){
  .fn-flavour-card{padding-top:30px!important}
  .fn-flavour-bottle{margin-top:4px!important}
}
@media (max-width:560px){
  .fn-flavour-card{padding-top:28px!important}
  .fn-flavour-bottle{margin-top:2px!important}
}


/* =========================================================
   v2.7.1 — Premium flavour-card typography
   Wider copy column, balanced line lengths and deliberate type hierarchy.
   ========================================================= */
@media (min-width:1101px){
  .fn-flavour-card{
    grid-template-columns:minmax(165px,46%) minmax(0,54%)!important;
    column-gap:clamp(20px,1.5vw,30px)!important;
    padding-left:clamp(28px,2vw,38px)!important;
    padding-right:clamp(28px,2vw,38px)!important;
  }

  .fn-flavour-card h3{
    font-family:Arial,Helvetica,sans-serif!important;
    font-stretch:normal!important;
    font-weight:900!important;
    font-size:clamp(31px,2.05vw,42px)!important;
    line-height:.92!important;
    letter-spacing:-.045em!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    hyphens:none!important;
    text-wrap:balance;
    margin:16px 0 12px!important;
    text-shadow:0 3px 0 rgba(0,0,0,.08)!important;
  }

  .fn-flavour-card h4{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    width:fit-content!important;
    max-width:100%!important;
    min-height:0!important;
    padding:10px 14px!important;
    margin:0 0 14px!important;
    border-radius:14px!important;
    border:1px solid rgba(255,255,255,.38)!important;
    background:rgba(0,0,0,.12)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12)!important;
    font-family:Arial,Helvetica,sans-serif!important;
    font-size:clamp(13px,.82vw,16px)!important;
    font-weight:800!important;
    line-height:1.12!important;
    letter-spacing:.01em!important;
    text-align:left!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    text-wrap:balance;
  }

  .fn-flavour-card p{
    max-width:29ch!important;
    margin:0 0 16px!important;
    font-family:Arial,Helvetica,sans-serif!important;
    font-size:clamp(15px,.9vw,17px)!important;
    font-weight:400!important;
    line-height:1.55!important;
    letter-spacing:-.01em!important;
    color:rgba(255,255,255,.94)!important;
    text-align:left!important;
    text-wrap:pretty;
  }

  .fn-flavour-card strong{
    display:block!important;
    position:relative!important;
    width:fit-content!important;
    max-width:100%!important;
    margin:2px 0 12px!important;
    padding-top:12px!important;
    font-family:Arial,Helvetica,sans-serif!important;
    font-size:clamp(13px,.78vw,15px)!important;
    font-weight:800!important;
    line-height:1.25!important;
    letter-spacing:.01em!important;
    color:#fff!important;
    text-align:left!important;
  }
  .fn-flavour-card strong:before{
    content:""!important;
    position:absolute!important;
    top:0!important;
    left:0!important;
    width:42px!important;
    height:2px!important;
    border-radius:99px!important;
    background:rgba(255,255,255,.72)!important;
  }

  .fn-flavour-card .fn-card-btn{
    border-radius:999px!important;
    font-family:Arial,Helvetica,sans-serif!important;
    font-size:12px!important;
    font-weight:900!important;
    letter-spacing:.09em!important;
    box-shadow:0 10px 24px rgba(0,0,0,.22)!important;
  }
}

@media (min-width:1500px){
  .fn-flavour-card{
    grid-template-columns:minmax(190px,47%) minmax(0,53%)!important;
  }
  .fn-flavour-card h3{
    font-size:clamp(36px,2.15vw,46px)!important;
  }
  .fn-flavour-card p{
    max-width:31ch!important;
  }
}

/* Keep the stacked mobile/tablet treatment polished too. */
@media (max-width:1100px){
  .fn-flavour-card h3{
    font-family:Arial,Helvetica,sans-serif!important;
    font-weight:900!important;
    letter-spacing:-.04em!important;
    line-height:.95!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
  }
  .fn-flavour-card h4{
    font-family:Arial,Helvetica,sans-serif!important;
    font-weight:800!important;
    line-height:1.15!important;
    text-wrap:balance;
  }
  .fn-flavour-card p{
    font-family:Arial,Helvetica,sans-serif!important;
    max-width:34ch!important;
    line-height:1.52!important;
    text-wrap:pretty;
  }
}


/* =========================================================
   v2.7.2 — Wider flavour panels
   Uses more of the available screen width and reduces gutters.
   ========================================================= */
.fn-poster-products .fn-inner,
.fn-poster-products .fn-flavour-inner,
.fn-poster-products .fn-products-inner{
  width:min(96vw,1880px)!important;
  max-width:1880px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:clamp(14px,1.2vw,24px)!important;
  padding-right:clamp(14px,1.2vw,24px)!important;
}

.fn-flavour-grid,
.fn-poster-grid,
.fn-products-grid{
  gap:clamp(16px,1.25vw,24px)!important;
}

@media (min-width:1101px){
  .fn-flavour-card{
    min-width:0!important;
    padding-left:clamp(30px,1.8vw,42px)!important;
    padding-right:clamp(30px,1.8vw,42px)!important;
    grid-template-columns:minmax(185px,45%) minmax(0,55%)!important;
    column-gap:clamp(24px,1.6vw,34px)!important;
  }
  .fn-flavour-card p{
    max-width:34ch!important;
  }
}

@media (min-width:1500px){
  .fn-poster-products .fn-inner,
  .fn-poster-products .fn-flavour-inner,
  .fn-poster-products .fn-products-inner{
    width:min(97vw,2040px)!important;
    max-width:2040px!important;
  }
  .fn-flavour-card{
    grid-template-columns:minmax(210px,46%) minmax(0,54%)!important;
  }
  .fn-flavour-card p{
    max-width:37ch!important;
  }
}

@media (min-width:2200px){
  .fn-poster-products .fn-inner,
  .fn-poster-products .fn-flavour-inner,
  .fn-poster-products .fn-products-inner{
    max-width:2280px!important;
  }
}


/* =========================================================
   v2.8 — Full-width flavour showcase + repaired card layout
   ========================================================= */

/* True full-bleed section: escape Astra/page containers exactly like a hero. */
.fn-poster-products{
  position:relative!important;
  left:50%!important;
  right:50%!important;
  width:100vw!important;
  max-width:none!important;
  margin-left:-50vw!important;
  margin-right:-50vw!important;
  padding-left:0!important;
  padding-right:0!important;
  overflow:hidden!important;
}

/* Inner content uses almost the entire screen, but remains comfortably padded. */
.fn-poster-products .fn-inner,
.fn-poster-products .fn-flavour-inner,
.fn-poster-products .fn-products-inner{
  width:100%!important;
  max-width:none!important;
  margin:0 auto!important;
  padding-left:clamp(22px,3vw,64px)!important;
  padding-right:clamp(22px,3vw,64px)!important;
  box-sizing:border-box!important;
}

/* Force the actual three-card wrapper to be a stable 3-column grid. */
.fn-poster-products .fn-flavour-grid,
.fn-poster-products .fn-poster-grid,
.fn-poster-products .fn-products-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  width:100%!important;
  max-width:none!important;
  gap:clamp(20px,1.55vw,32px)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Repair the overly narrow text area introduced by v2.7.2. */
@media (min-width:1101px){
  .fn-flavour-card{
    min-height:620px!important;
    display:grid!important;
    grid-template-columns:minmax(175px,43%) minmax(0,57%)!important;
    grid-template-rows:auto auto 1fr auto auto!important;
    column-gap:clamp(24px,1.7vw,38px)!important;
    row-gap:10px!important;
    padding:38px clamp(28px,2vw,42px) 28px!important;
    text-align:left!important;
  }

  .fn-flavour-bottle{
    grid-column:1!important;
    grid-row:1 / 6!important;
    align-self:center!important;
    justify-self:center!important;
    width:100%!important;
    max-width:250px!important;
    height:auto!important;
    max-height:485px!important;
    margin:14px auto 0!important;
    object-fit:contain!important;
  }

  .fn-flavour-card h3,
  .fn-flavour-card h4,
  .fn-flavour-card p,
  .fn-flavour-card strong,
  .fn-flavour-card .fn-card-btn{
    grid-column:2!important;
    min-width:0!important;
    max-width:100%!important;
  }

  .fn-flavour-card h3{
    margin:18px 0 8px!important;
    font-size:clamp(32px,2vw,44px)!important;
    line-height:.94!important;
    letter-spacing:-.045em!important;
    white-space:normal!important;
    word-break:keep-all!important;
    overflow-wrap:normal!important;
  }

  .fn-flavour-card h4{
    width:100%!important;
    max-width:300px!important;
    padding:10px 14px!important;
    margin:0 0 12px!important;
    font-size:clamp(13px,.85vw,16px)!important;
    line-height:1.15!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
  }

  .fn-flavour-card p{
    width:100%!important;
    max-width:36ch!important;
    margin:2px 0 14px!important;
    font-size:clamp(14px,.88vw,17px)!important;
    line-height:1.52!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
  }

  .fn-flavour-card strong{
    margin:0 0 10px!important;
    white-space:normal!important;
    word-break:normal!important;
  }

  .fn-flavour-card .fn-card-btn{
    width:100%!important;
    max-width:320px!important;
    justify-self:start!important;
  }
}

/* Give the copy considerably more room on ordinary 1080p desktops. */
@media (min-width:1101px) and (max-width:1599px){
  .fn-poster-products .fn-inner,
  .fn-poster-products .fn-flavour-inner,
  .fn-poster-products .fn-products-inner{
    padding-left:clamp(18px,1.8vw,34px)!important;
    padding-right:clamp(18px,1.8vw,34px)!important;
  }
  .fn-poster-products .fn-flavour-grid,
  .fn-poster-products .fn-poster-grid,
  .fn-poster-products .fn-products-grid{
    gap:18px!important;
  }
  .fn-flavour-card{
    grid-template-columns:minmax(155px,40%) minmax(0,60%)!important;
    column-gap:22px!important;
    padding-left:24px!important;
    padding-right:24px!important;
  }
  .fn-flavour-bottle{
    max-width:220px!important;
  }
  .fn-flavour-card h3{
    font-size:clamp(30px,2.15vw,40px)!important;
  }
  .fn-flavour-card p{
    font-size:15px!important;
    max-width:none!important;
  }
}

/* On very wide displays, keep the cards broad instead of reverting to a narrow centered island. */
@media (min-width:1600px){
  .fn-poster-products .fn-inner,
  .fn-poster-products .fn-flavour-inner,
  .fn-poster-products .fn-products-inner{
    padding-left:clamp(42px,4vw,90px)!important;
    padding-right:clamp(42px,4vw,90px)!important;
  }
  .fn-flavour-card{
    grid-template-columns:minmax(210px,44%) minmax(0,56%)!important;
  }
}

/* Tablet/mobile: stack naturally and keep full-width background. */
@media (max-width:1100px){
  .fn-poster-products .fn-flavour-grid,
  .fn-poster-products .fn-poster-grid,
  .fn-poster-products .fn-products-grid{
    grid-template-columns:1fr!important;
    gap:18px!important;
  }
  .fn-poster-products .fn-inner,
  .fn-poster-products .fn-flavour-inner,
  .fn-poster-products .fn-products-inner{
    padding-left:18px!important;
    padding-right:18px!important;
  }
}


/* =========================================================
   v2.9 — SITE-WIDE FULL-BLEED FN EXPERIENCE
   The FN shortcode pages now escape Astra's narrow content column.
   Every branded section spans the same browser width as the hero.
   ========================================================= */

/* Break the entire FN experience out of Astra/entry-content containers. */
body.fnh-pro-layout .entry-content > .fn-page,
body.fnh-pro-layout .site-main .fn-page,
body.fnh-pro-layout .ast-container .fn-page,
body.fnh-pro-layout .site-content .fn-page,
.fn-page.fn-poster-page,
.fn-page.fn-story-poster-page{
  position:relative!important;
  left:50%!important;
  width:100vw!important;
  max-width:100vw!important;
  margin-left:-50vw!important;
  margin-right:-50vw!important;
  padding-left:0!important;
  padding-right:0!important;
  overflow:hidden!important;
}

/* All FN sections occupy the complete full-bleed page canvas. */
.fn-page > section,
.fn-page .fn-poster-products,
.fn-page .fn-heat-picker,
.fn-page .fn-values-strip,
.fn-page .fn-family-band,
.fn-page .fn-poster-footer-cta,
.fn-page .fn-story-masthead,
.fn-page .fn-story-panels,
.fn-page .fn-story-bottom-band{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
}

/* Replace the old 1180px limit with responsive near-edge-to-edge content. */
body.fnh-pro-layout .fn-page .fn-container,
.fn-page .fn-container,
.fn-poster-products .fn-container{
  width:100%!important;
  max-width:none!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:clamp(22px,3.25vw,72px)!important;
  padding-right:clamp(22px,3.25vw,72px)!important;
  box-sizing:border-box!important;
}

/* Product section: use almost all available desktop width. */
.fn-poster-products .fn-flavour-grid{
  width:100%!important;
  max-width:none!important;
  margin-inline:auto!important;
}

/* Interactive heat meter gets the same generous full-width treatment. */
.fn-heat-picker{
  padding-left:clamp(22px,3.25vw,72px)!important;
  padding-right:clamp(22px,3.25vw,72px)!important;
  box-sizing:border-box!important;
}
.fn-heat-shell{
  width:100%!important;
  max-width:none!important;
  margin-inline:auto!important;
}

/* Family/story/value content should no longer sit in a narrow island. */
.fn-values-strip-grid,
.fn-family-band-grid,
.fn-poster-footer-inner,
.fn-story-masthead-grid,
.fn-story-panels-grid,
.fn-story-bottom-grid{
  width:100%!important;
  max-width:none!important;
}

/* Give desktop layouts room to breathe while still avoiding edge collisions. */
@media (min-width:1600px){
  body.fnh-pro-layout .fn-page .fn-container,
  .fn-page .fn-container,
  .fn-poster-products .fn-container{
    padding-left:clamp(48px,4vw,110px)!important;
    padding-right:clamp(48px,4vw,110px)!important;
  }
  .fn-heat-picker{
    padding-left:clamp(48px,4vw,110px)!important;
    padding-right:clamp(48px,4vw,110px)!important;
  }
}

@media (min-width:2400px){
  body.fnh-pro-layout .fn-page .fn-container,
  .fn-page .fn-container,
  .fn-poster-products .fn-container{
    padding-left:clamp(80px,4.5vw,150px)!important;
    padding-right:clamp(80px,4.5vw,150px)!important;
  }
  .fn-heat-picker{
    padding-left:clamp(80px,4.5vw,150px)!important;
    padding-right:clamp(80px,4.5vw,150px)!important;
  }
}

/* Tablet/mobile remain full-width with safe touch-friendly gutters. */
@media (max-width:900px){
  body.fnh-pro-layout .fn-page .fn-container,
  .fn-page .fn-container,
  .fn-poster-products .fn-container{
    width:100%!important;
    padding-left:18px!important;
    padding-right:18px!important;
  }
  .fn-heat-picker{
    padding-left:18px!important;
    padding-right:18px!important;
  }
}

@media (max-width:560px){
  body.fnh-pro-layout .fn-page .fn-container,
  .fn-page .fn-container,
  .fn-poster-products .fn-container{
    padding-left:12px!important;
    padding-right:12px!important;
  }
  .fn-heat-picker{
    padding-left:12px!important;
    padding-right:12px!important;
  }
}


/* =========================================================
   v2.9.1 — Centering fix after site-wide full-bleed conversion
   Prevent nested sections from applying a second viewport breakout.
   ========================================================= */

/* The page itself is already full-bleed in v2.9.0.
   Do NOT let child sections break out a second time. */
.fn-page .fn-poster-products,
.fn-page .fn-heat-picker,
.fn-page .fn-values-strip,
.fn-page .fn-family-band,
.fn-page .fn-poster-footer-cta,
.fn-page .fn-story-masthead,
.fn-page .fn-story-panels,
.fn-page .fn-story-bottom-band{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
  transform:none!important;
}

/* Explicitly undo the older v2.8 viewport breakout on the flavour section. */
.fn-page .fn-poster-products{
  left:auto!important;
  right:auto!important;
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
  padding-left:0!important;
  padding-right:0!important;
}

/* Keep the three-panel composition centered across the available width. */
.fn-poster-products .fn-inner,
.fn-poster-products .fn-container,
.fn-poster-products .fn-flavour-inner,
.fn-poster-products .fn-products-inner{
  width:100%!important;
  max-width:none!important;
  margin-left:auto!important;
  margin-right:auto!important;
  box-sizing:border-box!important;
}

.fn-poster-products .fn-flavour-grid,
.fn-poster-products .fn-poster-grid,
.fn-poster-products .fn-products-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  width:100%!important;
  max-width:none!important;
  margin-left:auto!important;
  margin-right:auto!important;
  justify-content:center!important;
  align-items:stretch!important;
}

/* Make sure no individual flavour card inherits stray horizontal offsets. */
.fn-poster-products .fn-flavour-card{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  margin-left:0!important;
  margin-right:0!important;
  transform:none;
  min-width:0!important;
}

/* Restore hover lift without affecting base centering. */
@media (hover:hover) and (pointer:fine){
  .fn-poster-products .fn-flavour-card:hover{
    transform:translateY(-4px)!important;
  }
}

/* Mobile/tablet remain one centered column. */
@media (max-width:1100px){
  .fn-poster-products .fn-flavour-grid,
  .fn-poster-products .fn-poster-grid,
  .fn-poster-products .fn-products-grid{
    grid-template-columns:1fr!important;
  }
}


/* =========================================================
   v2.9.2 — RESPONSIVE HERO/BANNER FIX
   Show the COMPLETE banner at every viewport instead of cropping it.
   ========================================================= */

/* Any banner/hero wrapper in the FN page must size itself from the image. */
.fn-page .fn-hero,
.fn-page .fn-banner,
.fn-page .fn-poster-hero,
.fn-page .fn-hero-banner,
.fn-page .fn-home-hero{
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:auto!important;
  overflow:hidden!important;
  background-size:100% auto!important;
  background-position:center top!important;
  background-repeat:no-repeat!important;
}

/* If the hero is rendered as an actual IMG, never crop it. */
.fn-page .fn-hero img,
.fn-page .fn-banner img,
.fn-page .fn-poster-hero img,
.fn-page .fn-hero-banner img,
.fn-page .fn-home-hero img{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center top!important;
  margin:0!important;
}

/* Common WordPress image wrappers must not impose a fixed crop. */
.fn-page .fn-hero figure,
.fn-page .fn-banner figure,
.fn-page .fn-poster-hero figure,
.fn-page .fn-hero-banner figure,
.fn-page .fn-home-hero figure,
.fn-page .fn-hero .wp-block-image,
.fn-page .fn-banner .wp-block-image{
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  margin:0!important;
  overflow:visible!important;
}

/* Desktop / 2K / 4K:
   preserve the banner's complete composition rather than using cover. */
@media (min-width:901px){
  .fn-page .fn-hero,
  .fn-page .fn-banner,
  .fn-page .fn-poster-hero,
  .fn-page .fn-hero-banner,
  .fn-page .fn-home-hero{
    background-size:contain!important;
    background-position:center top!important;
  }
}

/* Mobile:
   the mobile artwork is portrait, so allow its natural height.
   This prevents the top logo/flags and lower bottles from being chopped. */
@media (max-width:900px){
  .fn-page .fn-hero,
  .fn-page .fn-banner,
  .fn-page .fn-poster-hero,
  .fn-page .fn-hero-banner,
  .fn-page .fn-home-hero{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    background-size:contain!important;
    background-position:center top!important;
  }

  .fn-page .fn-hero img,
  .fn-page .fn-banner img,
  .fn-page .fn-poster-hero img,
  .fn-page .fn-hero-banner img,
  .fn-page .fn-home-hero img{
    width:100vw!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    object-fit:contain!important;
    object-position:center top!important;
  }
}

/* Extra specificity against legacy "cover" rules in earlier builds. */
body.fnh-pro-layout .fn-page [class*="hero"],
body.fnh-pro-layout .fn-page [class*="banner"]{
  background-position:center center!important;
}

body.fnh-pro-layout .fn-page [class*="hero"] img,
body.fnh-pro-layout .fn-page [class*="banner"] img{
  width:100%!important;
  height:auto!important;
  object-fit:contain!important;
  object-position:center center!important;
}


/* =========================================================
   v3.0 — MODERN FAMILY / ORIGIN STORY SECTION
   Canada + Trinidad visual language, bottle-led composition,
   premium typography and motion.
   ========================================================= */
.fn-family-modern{
  position:relative!important;
  isolation:isolate;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 18% 42%,rgba(215,25,32,.24),transparent 31%),
    radial-gradient(circle at 82% 22%,rgba(255,108,0,.11),transparent 28%),
    linear-gradient(112deg,#070707 0%,#0b0b0b 50%,#111 100%)!important;
  border-top:1px solid rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.fn-family-modern:before{
  content:"";
  position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:
    radial-gradient(rgba(255,255,255,.075) .7px,transparent .7px),
    linear-gradient(135deg,transparent 0 48%,rgba(215,25,32,.025) 48% 52%,transparent 52% 100%);
  background-size:12px 12px,78px 78px;
  opacity:.46;
}
.fn-family-ambient{
  position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
}
.fn-family-ambient:before,.fn-family-ambient:after{
  content:"";position:absolute;border-radius:50%;filter:blur(80px);opacity:.38;
}
.fn-family-ambient:before{width:330px;height:330px;background:#d71920;left:-110px;top:18%}
.fn-family-ambient:after{width:250px;height:250px;background:#ff8a00;right:5%;bottom:-120px;opacity:.18}

.fn-family-modern .fn-family-band-grid{
  min-height:clamp(560px,42vw,760px)!important;
  display:grid!important;
  grid-template-columns:minmax(0,48%) minmax(0,52%)!important;
  align-items:stretch!important;
  gap:0!important;
  padding-top:0!important;
  padding-bottom:0!important;
}

/* Bottle stage */
.fn-family-visual{
  position:relative;min-height:100%;display:grid;place-items:center;
  overflow:hidden;isolation:isolate;
  border-right:1px solid rgba(255,255,255,.08);
}
.fn-family-visual:before{
  content:"";position:absolute;left:8%;right:8%;bottom:7%;height:17%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.78),transparent 68%);
  filter:blur(12px);z-index:0;
}
.fn-family-glow{
  position:absolute;width:min(68%,470px);aspect-ratio:1;border-radius:50%;z-index:0;
  background:radial-gradient(circle,rgba(230,45,35,.32) 0%,rgba(215,25,32,.13) 44%,transparent 72%);
  filter:blur(6px);
  animation:fnFamilyPulse 4.5s ease-in-out infinite;
}
.fn-family-orbit{
  position:absolute;border:1px solid rgba(255,255,255,.11);border-radius:50%;z-index:0;
}
.fn-family-orbit-one{width:62%;aspect-ratio:1;transform:rotate(-13deg);border-color:rgba(215,25,32,.25)}
.fn-family-orbit-two{width:78%;aspect-ratio:1;transform:rotate(18deg);border-style:dashed;opacity:.45}

.fn-family-hero-bottle{
  position:relative;z-index:3;
  width:auto!important;height:clamp(430px,35vw,650px)!important;
  max-width:52%!important;object-fit:contain!important;
  filter:drop-shadow(0 28px 28px rgba(0,0,0,.52)) drop-shadow(0 0 24px rgba(215,25,32,.12));
  transform-origin:50% 90%;
  animation:fnFamilyFloat 5.2s ease-in-out infinite;
}

.fn-family-flag{
  position:absolute;z-index:1;width:46%;height:36%;top:16%;
  opacity:.34;filter:saturate(.9) contrast(1.08);
  border-radius:24px;overflow:hidden;
  transform:skewY(-6deg) rotate(-4deg);
  box-shadow:0 18px 40px rgba(0,0,0,.24);
}
.fn-family-flag span{
  position:absolute;left:18px;bottom:14px;color:rgba(255,255,255,.62);
  font-size:11px;font-weight:900;letter-spacing:.16em;
}
.fn-family-flag-canada{
  left:4%;
  background:
    linear-gradient(90deg,#d71920 0 24%,#f2eee7 24% 76%,#d71920 76% 100%);
}
.fn-family-flag-canada:after{
  content:"🍁";position:absolute;inset:0;display:grid;place-items:center;
  font-size:clamp(48px,6vw,96px);filter:grayscale(1) sepia(1) saturate(8) hue-rotate(335deg);
}
.fn-family-flag-trini{
  right:2%;top:23%;transform:skewY(7deg) rotate(5deg);
  background:
    linear-gradient(145deg,#cf142b 0 37%,#fff 37% 40%,#050505 40% 60%,#fff 60% 63%,#cf142b 63% 100%);
}
.fn-family-origin{
  position:absolute;z-index:4;right:7%;bottom:11%;
  display:flex;flex-direction:column;gap:5px;align-items:flex-end;
  transform:rotate(-2deg);
}
.fn-family-origin span{
  display:inline-block;padding:6px 10px;
  font-weight:900;font-style:italic;letter-spacing:.035em;
  font-size:clamp(14px,1.1vw,20px);
  color:#fff;text-shadow:0 4px 18px rgba(0,0,0,.6);
}
.fn-origin-trini{background:rgba(5,5,5,.78);border-left:3px solid #cf142b}
.fn-origin-canada{background:#d71920}
.fn-family-pepper{position:absolute;z-index:2;font-size:clamp(28px,3vw,48px);filter:drop-shadow(0 12px 14px rgba(0,0,0,.42));opacity:.95}
.fn-family-pepper-a{left:13%;bottom:11%;transform:rotate(-26deg)}
.fn-family-pepper-b{left:22%;bottom:7%;font-size:clamp(20px,2.2vw,34px);transform:rotate(24deg)}

/* Copy */
.fn-family-modern .fn-family-copy{
  padding:clamp(52px,5vw,96px) clamp(44px,5vw,100px)!important;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  position:relative;z-index:3;
}
.fn-family-kicker{
  display:inline-flex;align-items:center;gap:9px;
  color:#ef343b;font-size:clamp(11px,.75vw,14px);font-weight:900;letter-spacing:.16em;
  margin:0 0 18px;text-transform:uppercase;
}
.fn-family-kicker:before{content:"";width:32px;height:2px;background:#ef343b}
.fn-family-modern .fn-family-copy h2{
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:clamp(44px,4.2vw,78px)!important;
  line-height:.88!important;letter-spacing:-.055em!important;
  font-weight:950!important;margin:0 0 22px!important;
  max-width:11ch!important;text-wrap:balance;
}
.fn-family-modern .fn-family-copy h2 span{color:#e31d25}
.fn-family-rule{width:min(100%,560px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;margin:0 0 24px}
.fn-family-rule i{height:1px;background:linear-gradient(90deg,#d71920,rgba(215,25,32,.08))}
.fn-family-rule i:last-child{transform:scaleX(-1)}
.fn-family-rule b{font-size:18px;filter:drop-shadow(0 3px 8px rgba(215,25,32,.35))}
.fn-family-modern .fn-family-copy p{
  max-width:62ch!important;color:rgba(255,255,255,.83)!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:clamp(16px,1.05vw,19px)!important;
  line-height:1.62!important;margin:0 0 12px!important;
}
.fn-family-modern .fn-family-copy .fn-family-lead{color:#fff!important;font-weight:600!important}
.fn-family-modern .fn-family-copy blockquote{
  position:relative;margin:17px 0 16px!important;padding:6px 0 8px 22px!important;
  max-width:760px;color:#f12c34!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:clamp(24px,2.1vw,38px)!important;
  line-height:1.08!important;font-weight:900!important;font-style:italic!important;
  letter-spacing:-.035em;
  border-left:3px solid #d71920;
}
.fn-family-modern .fn-family-copy blockquote:after{
  content:"";position:absolute;left:22px;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,#d71920,transparent 76%);
}
.fn-family-modern .fn-family-now{
  margin:4px 0 18px!important;font-size:13px!important;font-weight:900!important;
  letter-spacing:.16em!important;color:rgba(255,255,255,.7)!important;
}
.fn-family-modern .fn-family-btn{
  min-width:220px!important;border-radius:999px!important;padding:15px 24px!important;
  background:linear-gradient(135deg,#e31d25,#be1017)!important;
  box-shadow:0 14px 34px rgba(215,25,32,.28)!important;
  letter-spacing:.08em!important;transition:transform .22s ease,box-shadow .22s ease!important;
}
.fn-family-modern .fn-family-btn:hover{transform:translateY(-3px)!important;box-shadow:0 18px 42px rgba(215,25,32,.4)!important}

/* Modern values strip */
.fn-values-modern{
  background:#f3eee6!important;border-bottom:0!important;
  padding:0!important;
}
.fn-values-modern .fn-values-strip-grid{
  grid-template-columns:repeat(4,1fr)!important;
  gap:0!important;padding-left:0!important;padding-right:0!important;
}
.fn-values-modern .fn-value-card{
  min-height:128px;padding:26px clamp(20px,2.3vw,42px)!important;
  display:grid!important;grid-template-columns:auto 1fr!important;gap:18px!important;
  align-items:center!important;text-align:left!important;
  border-right:1px solid rgba(20,20,20,.12)!important;
  background:transparent;
  transition:background .25s ease,transform .25s ease;
}
.fn-values-modern .fn-value-card:last-child{border-right:0!important}
.fn-values-modern .fn-value-card:hover{background:#fff;transform:translateY(-3px)}
.fn-values-modern .fn-value-icon{
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  background:#111;color:#fff;font-size:28px!important;line-height:1!important;
  box-shadow:0 8px 20px rgba(0,0,0,.13);
}
.fn-values-modern .fn-value-copy{display:flex;flex-direction:column;gap:4px}
.fn-values-modern b{font-family:Arial,Helvetica,sans-serif;font-size:14px!important;letter-spacing:.03em}
.fn-values-modern small{font-family:Arial,Helvetica,sans-serif;font-size:12px!important;line-height:1.35;color:#4b4b4b}

/* Scroll-in animation */
.fn-family-modern .fn-family-visual,
.fn-family-modern .fn-family-copy,
.fn-values-modern .fn-value-card{
  opacity:0;transform:translateY(22px);
  transition:opacity .72s cubic-bezier(.2,.7,.2,1),transform .72s cubic-bezier(.2,.7,.2,1);
}
.fn-family-modern.fn-family-inview .fn-family-visual{opacity:1;transform:none}
.fn-family-modern.fn-family-inview .fn-family-copy{opacity:1;transform:none;transition-delay:.13s}
.fn-family-modern.fn-family-inview + .fn-values-modern .fn-value-card{opacity:1;transform:none}
.fn-family-modern.fn-family-inview + .fn-values-modern .fn-value-card:nth-child(2){transition-delay:.08s}
.fn-family-modern.fn-family-inview + .fn-values-modern .fn-value-card:nth-child(3){transition-delay:.16s}
.fn-family-modern.fn-family-inview + .fn-values-modern .fn-value-card:nth-child(4){transition-delay:.24s}

@keyframes fnFamilyFloat{0%,100%{transform:translateY(0) rotate(-.7deg)}50%{transform:translateY(-12px) rotate(.7deg)}}
@keyframes fnFamilyPulse{0%,100%{transform:scale(.96);opacity:.72}50%{transform:scale(1.06);opacity:1}}

@media (max-width:1100px){
  .fn-family-modern .fn-family-band-grid{grid-template-columns:1fr!important}
  .fn-family-visual{min-height:520px;border-right:0;border-bottom:1px solid rgba(255,255,255,.08)}
  .fn-family-hero-bottle{height:440px!important}
  .fn-family-modern .fn-family-copy{padding:52px 7vw!important}
  .fn-values-modern .fn-values-strip-grid{grid-template-columns:repeat(2,1fr)!important}
  .fn-values-modern .fn-value-card:nth-child(2){border-right:0!important}
  .fn-values-modern .fn-value-card{border-bottom:1px solid rgba(20,20,20,.1)}
}
@media (max-width:620px){
  .fn-family-visual{min-height:430px}
  .fn-family-hero-bottle{height:355px!important;max-width:58%!important}
  .fn-family-flag{width:54%;height:31%;top:19%}
  .fn-family-origin{right:5%;bottom:7%}
  .fn-family-modern .fn-family-copy{padding:42px 22px 48px!important}
  .fn-family-modern .fn-family-copy h2{font-size:clamp(40px,12vw,58px)!important}
  .fn-family-modern .fn-family-copy blockquote{font-size:25px!important}
  .fn-values-modern .fn-values-strip-grid{grid-template-columns:1fr!important}
  .fn-values-modern .fn-value-card{border-right:0!important;min-height:104px!important;padding:20px 24px!important}
}
@media (prefers-reduced-motion:reduce){
  .fn-family-glow,.fn-family-hero-bottle{animation:none!important}
  .fn-family-modern .fn-family-visual,.fn-family-modern .fn-family-copy,.fn-values-modern .fn-value-card{
    opacity:1!important;transform:none!important;transition:none!important;
  }
}


/* =========================================================
   v3.0.1 — Family section polish
   Better typography, branded CTA, all three bottles.
   ========================================================= */

.fn-family-modern .fn-family-copy{
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;
}
.fn-family-modern .fn-family-kicker{
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;
  font-weight:800!important;
  letter-spacing:.14em!important;
}
.fn-family-modern .fn-family-copy h2{
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;
  font-weight:900!important;
  letter-spacing:-.055em!important;
  line-height:.9!important;
}
.fn-family-modern .fn-family-copy p{
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;
  letter-spacing:-.012em!important;
}
.fn-family-modern .fn-family-copy blockquote{
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;
  font-weight:850!important;
  letter-spacing:-.045em!important;
}

/* Make the CTA look like a real branded button — never a default blue link. */
.fn-family-modern a.fn-family-btn,
.fn-family-modern a.fn-family-btn:link,
.fn-family-modern a.fn-family-btn:visited,
.fn-family-modern a.fn-family-btn:hover,
.fn-family-modern a.fn-family-btn:focus,
.fn-family-modern a.fn-family-btn:active{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:220px!important;
  min-height:54px!important;
  padding:15px 28px!important;
  border-radius:999px!important;
  border:1px solid rgba(255,255,255,.1)!important;
  background:linear-gradient(135deg,#ed2029 0%,#c90f18 100%)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  text-decoration:none!important;
  text-decoration-line:none!important;
  text-underline-offset:0!important;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;
  font-size:13px!important;
  font-weight:900!important;
  line-height:1!important;
  letter-spacing:.11em!important;
  text-transform:uppercase!important;
  box-shadow:0 14px 34px rgba(215,25,32,.32),inset 0 1px 0 rgba(255,255,255,.12)!important;
  transition:transform .22s ease,box-shadow .22s ease,background .22s ease!important;
}
.fn-family-modern a.fn-family-btn:after{
  content:"→";
  margin-left:14px;
  font-size:18px;
  line-height:1;
  transition:transform .22s ease;
}
.fn-family-modern a.fn-family-btn:hover{
  transform:translateY(-3px)!important;
  background:linear-gradient(135deg,#ff3038 0%,#d6121b 100%)!important;
  box-shadow:0 18px 44px rgba(215,25,32,.42),inset 0 1px 0 rgba(255,255,255,.15)!important;
}
.fn-family-modern a.fn-family-btn:hover:after{transform:translateX(4px)}
.fn-family-modern a.fn-family-btn:focus-visible{
  outline:3px solid rgba(255,255,255,.9)!important;
  outline-offset:4px!important;
}

/* Three bottle composition */
.fn-family-bottle-stack{
  position:relative;
  z-index:3;
  width:min(84%,680px);
  height:clamp(430px,34vw,650px);
  margin:0 auto;
  display:block;
}
.fn-family-bottle{
  position:absolute!important;
  bottom:2%!important;
  width:auto!important;
  object-fit:contain!important;
  transform-origin:50% 92%;
  filter:drop-shadow(0 28px 28px rgba(0,0,0,.52)) drop-shadow(0 0 20px rgba(215,25,32,.10));
}
.fn-family-bottle-hot{
  z-index:4;
  left:50%;
  height:92%!important;
  max-width:46%!important;
  transform:translateX(-50%);
  animation:fnFamilyBottleHot 5.2s ease-in-out infinite;
}
.fn-family-bottle-mild{
  z-index:2;
  left:7%;
  height:74%!important;
  max-width:34%!important;
  transform:rotate(-6deg);
  opacity:.96;
  animation:fnFamilyBottleSideA 5.8s ease-in-out infinite;
}
.fn-family-bottle-slight{
  z-index:2;
  right:6%;
  height:76%!important;
  max-width:34%!important;
  transform:rotate(6deg);
  opacity:.97;
  animation:fnFamilyBottleSideB 6.1s ease-in-out infinite;
}
.fn-family-bottle-hot:hover{
  transform:translateX(-50%) translateY(-7px) scale(1.025)!important;
}
.fn-family-bottle-mild:hover{
  transform:rotate(-4deg) translateY(-7px) scale(1.025)!important;
}
.fn-family-bottle-slight:hover{
  transform:rotate(4deg) translateY(-7px) scale(1.025)!important;
}

@keyframes fnFamilyBottleHot{
  0%,100%{transform:translateX(-50%) translateY(0) rotate(-.4deg)}
  50%{transform:translateX(-50%) translateY(-11px) rotate(.4deg)}
}
@keyframes fnFamilyBottleSideA{
  0%,100%{transform:rotate(-6deg) translateY(0)}
  50%{transform:rotate(-4.5deg) translateY(-7px)}
}
@keyframes fnFamilyBottleSideB{
  0%,100%{transform:rotate(6deg) translateY(0)}
  50%{transform:rotate(4.5deg) translateY(-8px)}
}

/* Refine origin badges so they don't compete with the bottle lineup. */
.fn-family-origin{
  right:5%!important;
  bottom:7%!important;
  gap:6px!important;
}
.fn-family-origin span{
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;
  font-style:normal!important;
  font-weight:900!important;
  letter-spacing:.06em!important;
  font-size:clamp(11px,.86vw,15px)!important;
  border-radius:5px!important;
}

/* More controlled copy widths */
.fn-family-modern .fn-family-copy h2{max-width:12ch!important}
.fn-family-modern .fn-family-copy p{max-width:58ch!important}
.fn-family-modern .fn-family-copy blockquote{max-width:690px!important}

/* Prevent legacy family bottle animation from affecting removed single bottle class. */
.fn-family-hero-bottle{animation:none!important}

@media (max-width:1100px){
  .fn-family-bottle-stack{
    height:470px;
    width:min(86%,680px);
  }
  .fn-family-bottle-hot{height:90%!important}
  .fn-family-bottle-mild,.fn-family-bottle-slight{height:72%!important}
  .fn-family-origin{right:6%!important;bottom:5%!important}
}
@media (max-width:620px){
  .fn-family-bottle-stack{
    height:350px;
    width:94%;
  }
  .fn-family-bottle-hot{height:86%!important;max-width:45%!important}
  .fn-family-bottle-mild{left:3%;height:68%!important;max-width:33%!important}
  .fn-family-bottle-slight{right:3%;height:69%!important;max-width:33%!important}
  .fn-family-origin{
    left:50%!important;
    right:auto!important;
    bottom:2%!important;
    transform:translateX(-50%)!important;
    align-items:center!important;
    width:max-content;
  }
  .fn-family-origin span{font-size:10px!important}
  .fn-family-modern a.fn-family-btn,
  .fn-family-modern a.fn-family-btn:link,
  .fn-family-modern a.fn-family-btn:visited{
    width:100%!important;
    max-width:330px!important;
  }
}
@media (prefers-reduced-motion:reduce){
  .fn-family-bottle-hot,.fn-family-bottle-mild,.fn-family-bottle-slight{
    animation:none!important;
  }
}

/* v3.1 heat-coloured values + animated Trini CTA */
.fn-values-modern{background:#0b0b0b!important;border-top:1px solid rgba(255,255,255,.06)!important}
.fn-values-modern .fn-values-strip-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;width:100%!important;max-width:none!important}
.fn-values-modern .fn-value-card{position:relative;isolation:isolate;overflow:hidden;min-height:148px!important;color:#fff!important;border-right:1px solid rgba(255,255,255,.17)!important;border-bottom:0!important;transition:transform .25s ease,filter .25s ease!important}
.fn-values-modern .fn-value-card:before{content:"";position:absolute;inset:0;z-index:-2}
.fn-values-modern .fn-value-card:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(135deg,transparent 0 43%,rgba(255,255,255,.06) 43% 47%,transparent 47% 100%),radial-gradient(circle at 15% 15%,rgba(255,255,255,.18),transparent 32%);background-size:74px 74px,100% 100%;opacity:.5}
.fn-values-modern .fn-value-card:nth-child(1):before{background:linear-gradient(135deg,#d71920 0%,#a90e15 100%)}
.fn-values-modern .fn-value-card:nth-child(2):before{background:linear-gradient(135deg,#669631 0%,#356918 100%)}
.fn-values-modern .fn-value-card:nth-child(3):before{background:linear-gradient(135deg,#ff9f12 0%,#e87500 100%)}
.fn-values-modern .fn-value-card:nth-child(4):before{background:linear-gradient(90deg,#cf142b 0 22%,#f4f0e8 22% 78%,#cf142b 78% 100%)}
.fn-values-modern .fn-value-card:nth-child(4){color:#111!important}
.fn-values-modern .fn-value-card:last-child{border-right:0!important}
.fn-values-modern .fn-value-card:hover{transform:translateY(-5px)!important;filter:saturate(1.07) brightness(1.03);background:transparent!important}
.fn-values-modern .fn-value-icon{width:64px!important;height:64px!important;background:rgba(8,8,8,.88)!important;border:1px solid rgba(255,255,255,.16)!important;box-shadow:0 12px 26px rgba(0,0,0,.22)!important;font-size:30px!important;transition:transform .25s ease,box-shadow .25s ease!important}
.fn-values-modern .fn-value-card:hover .fn-value-icon{transform:rotate(-5deg) scale(1.07)}
.fn-values-modern .fn-value-copy b{color:inherit!important;font-size:clamp(14px,1vw,18px)!important;font-weight:900!important}
.fn-values-modern .fn-value-copy small{color:rgba(255,255,255,.86)!important;font-size:clamp(12px,.82vw,15px)!important}
.fn-values-modern .fn-value-card:nth-child(4) .fn-value-copy small{color:rgba(17,17,17,.72)!important}

.fn-trini-cta{position:relative!important;isolation:isolate;overflow:hidden!important;background:radial-gradient(circle at 50% 130%,rgba(255,161,0,.55),transparent 34%),linear-gradient(100deg,#a80710 0%,#df171f 42%,#f0232a 60%,#a90912 100%)!important;border-top:1px solid rgba(255,255,255,.16);border-bottom:4px solid #0a0a0a}
.fn-trini-cta:before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(145deg,transparent 0 36%,rgba(0,0,0,.13) 36% 39%,transparent 39% 100%),radial-gradient(rgba(255,255,255,.15) .7px,transparent .7px);background-size:140px 140px,13px 13px;opacity:.38}
.fn-trini-cta:after{content:"";position:absolute;left:50%;bottom:-72px;width:min(72vw,980px);height:160px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse at center,rgba(255,139,0,.9) 0%,rgba(255,78,0,.42) 32%,transparent 68%);filter:blur(18px);z-index:-1;animation:fnTriniGlow 3.8s ease-in-out infinite}
.fn-trini-cta .fn-poster-footer-inner{min-height:220px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:clamp(34px,6vw,110px)!important;padding-top:34px!important;padding-bottom:34px!important}
.fn-trini-copy{display:flex;flex-direction:column;align-items:flex-start;max-width:760px}
.fn-trini-kicker{display:inline-flex;align-items:center;gap:8px;margin-bottom:8px;color:rgba(255,255,255,.75);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-size:12px;font-weight:900;letter-spacing:.17em}
.fn-trini-kicker:before{content:"";width:28px;height:2px;background:#111}
.fn-trini-cta h2{margin:0!important;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;color:#fff!important;font-size:clamp(42px,4vw,78px)!important;line-height:.92!important;font-weight:950!important;letter-spacing:-.055em!important;text-shadow:0 8px 22px rgba(82,0,0,.25)}
.fn-trini-cta h2 span{position:relative;display:inline-block;color:#0b0b0b!important;text-shadow:none!important}
.fn-trini-cta h2 span:after{content:"";position:absolute;left:-2%;right:-2%;bottom:-7px;height:6px;background:#ff9e16;border-radius:99px;transform:rotate(-2deg);box-shadow:0 0 20px rgba(255,158,22,.58)}
.fn-trini-cta p{margin:16px 0 0!important;color:rgba(255,255,255,.88)!important;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;font-size:clamp(14px,1vw,18px)!important;font-weight:600!important}

.fn-trini-cta a.fn-trini-btn,.fn-trini-cta a.fn-trini-btn:link,.fn-trini-cta a.fn-trini-btn:visited,.fn-trini-cta a.fn-trini-btn:hover,.fn-trini-cta a.fn-trini-btn:focus,.fn-trini-cta a.fn-trini-btn:active{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:235px!important;min-height:64px!important;padding:18px 32px!important;border-radius:999px!important;border:1px solid rgba(255,255,255,.15)!important;background:#0a0a0a!important;color:#fff!important;-webkit-text-fill-color:#fff!important;text-decoration:none!important;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;font-size:14px!important;font-weight:900!important;letter-spacing:.11em!important;text-transform:uppercase!important;box-shadow:0 18px 40px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.08)!important;transition:transform .22s ease,box-shadow .22s ease!important}
.fn-trini-cta a.fn-trini-btn:before{content:"🌶️";margin-right:12px;font-size:18px;transform:rotate(-18deg)}
.fn-trini-cta a.fn-trini-btn:after{content:"→";margin-left:13px;font-size:18px;transition:transform .22s ease}
.fn-trini-cta a.fn-trini-btn:hover{transform:translateY(-4px) scale(1.015)!important;box-shadow:0 22px 48px rgba(0,0,0,.4),0 0 26px rgba(255,145,0,.18)!important}
.fn-trini-cta a.fn-trini-btn:hover:after{transform:translateX(4px)}

.fn-trini-fire{position:absolute;z-index:1;top:50%;display:flex;align-items:flex-end;gap:8px;pointer-events:none;opacity:.9}
.fn-trini-fire-left{left:3%;transform:translateY(-50%) rotate(-8deg)}
.fn-trini-fire-right{right:3%;transform:translateY(-50%) rotate(8deg)}
.fn-trini-fire i{display:block;font-style:normal;font-size:clamp(22px,2.4vw,42px);filter:drop-shadow(0 8px 10px rgba(76,0,0,.4));animation:fnTriniPepper 2.6s ease-in-out infinite}
.fn-trini-fire i:nth-child(2){font-size:clamp(34px,3.3vw,58px);animation-delay:.22s}
.fn-trini-fire i:nth-child(3){animation-delay:.44s}
@keyframes fnTriniPepper{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-9px) rotate(6deg)}}
@keyframes fnTriniGlow{0%,100%{opacity:.58;transform:translateX(-50%) scale(.95)}50%{opacity:1;transform:translateX(-50%) scale(1.05)}}

@media (max-width:1100px){
  .fn-values-modern .fn-values-strip-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .fn-values-modern .fn-value-card:nth-child(2){border-right:0!important}
  .fn-values-modern .fn-value-card:nth-child(1),.fn-values-modern .fn-value-card:nth-child(2){border-bottom:1px solid rgba(255,255,255,.16)!important}
  .fn-trini-fire{opacity:.5}
}
@media (max-width:700px){
  .fn-values-modern .fn-values-strip-grid{grid-template-columns:1fr!important}
  .fn-values-modern .fn-value-card{border-right:0!important;border-bottom:1px solid rgba(255,255,255,.16)!important;min-height:112px!important}
  .fn-values-modern .fn-value-card:nth-child(4){border-bottom:0!important}
  .fn-trini-cta .fn-poster-footer-inner{min-height:0!important;flex-direction:column!important;text-align:center!important;gap:26px!important;padding:48px 20px!important}
  .fn-trini-copy{align-items:center}
  .fn-trini-kicker:before{display:none}
  .fn-trini-cta h2{font-size:clamp(42px,13vw,68px)!important}
  .fn-trini-cta p{max-width:34ch!important}
  .fn-trini-fire-left{left:-8px;top:30%}
  .fn-trini-fire-right{right:-8px;top:72%}
}
@media (prefers-reduced-motion:reduce){
  .fn-trini-fire i,.fn-trini-cta:after{animation:none!important}
}


/* =========================================================
   v3.1.2 — ORIGINAL COLOUR-BLOCK IDEA, REFINED
   Full-bleed continuous strip. No black gutters.
   ========================================================= */

.fn-values-modern{
  position:relative!important;
  left:50%!important;
  right:50%!important;
  width:100vw!important;
  max-width:100vw!important;
  margin-left:-50vw!important;
  margin-right:-50vw!important;
  padding:0!important;
  background:#111!important;
  border:0!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}

.fn-values-modern .fn-values-strip-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  gap:0!important;
}

.fn-values-modern .fn-value-card{
  position:relative!important;
  isolation:isolate!important;
  box-sizing:border-box!important;
  min-width:0!important;
  min-height:172px!important;
  margin:0!important;
  padding:30px clamp(20px,2.2vw,42px)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:20px!important;
  overflow:hidden!important;
  border:0!important;
  border-right:1px solid rgba(255,255,255,.18)!important;
  border-radius:0!important;
  box-shadow:none!important;
  color:#fff!important;
  transition:filter .22s ease!important;
}

.fn-values-modern .fn-value-card:last-child{border-right:0!important}

/* Solid, rich heat-level colour fields */
.fn-values-modern .fn-value-card:nth-child(1){
  background:linear-gradient(135deg,#ee252d 0%,#bd1018 100%)!important;
}
.fn-values-modern .fn-value-card:nth-child(2){
  background:linear-gradient(135deg,#75a83d 0%,#3d711d 100%)!important;
}
.fn-values-modern .fn-value-card:nth-child(3){
  background:linear-gradient(135deg,#ffae28 0%,#ee7d00 100%)!important;
}
.fn-values-modern .fn-value-card:nth-child(4){
  background:linear-gradient(135deg,#e51e2a 0%,#b70d17 100%)!important;
}

/* Texture sits inside each panel without exposing the parent background */
.fn-values-modern .fn-value-card:before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:-1!important;
  width:auto!important;
  background:
    linear-gradient(125deg,transparent 0 43%,rgba(255,255,255,.07) 43% 46%,transparent 46% 100%),
    radial-gradient(circle at 12% 16%,rgba(255,255,255,.15),transparent 34%)!important;
  background-size:92px 92px,100% 100%!important;
  opacity:.48!important;
}
.fn-values-modern .fn-value-card:after{
  content:""!important;
  position:absolute!important;
  width:150px!important;
  height:150px!important;
  right:-58px!important;
  bottom:-70px!important;
  border-radius:50%!important;
  z-index:-1!important;
  background:rgba(0,0,0,.12)!important;
  opacity:1!important;
}

.fn-values-modern .fn-value-card:hover{
  transform:none!important;
  filter:brightness(1.055) saturate(1.04)!important;
}

/* Icons become clean dark badges with matching glow */
.fn-values-modern .fn-value-icon{
  position:relative!important;
  z-index:2!important;
  flex:0 0 auto!important;
  width:68px!important;
  height:68px!important;
  min-width:68px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  background:#151515!important;
  border:1px solid rgba(255,255,255,.18)!important;
  box-shadow:0 12px 28px rgba(0,0,0,.24)!important;
  font-size:31px!important;
  transition:transform .25s ease,box-shadow .25s ease!important;
}

.fn-values-modern .fn-value-card:hover .fn-value-icon{
  transform:translateY(-3px) rotate(-4deg) scale(1.04)!important;
  box-shadow:0 16px 32px rgba(0,0,0,.3)!important;
}

.fn-values-modern .fn-value-copy{
  position:relative!important;
  z-index:2!important;
  min-width:0!important;
  max-width:300px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:5px!important;
}

.fn-values-modern .fn-value-copy b{
  margin:0!important;
  color:#fff!important;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;
  font-size:clamp(15px,1vw,19px)!important;
  line-height:1.08!important;
  font-weight:950!important;
  letter-spacing:.015em!important;
  text-shadow:0 2px 10px rgba(0,0,0,.12)!important;
}

.fn-values-modern .fn-value-copy small,
.fn-values-modern .fn-value-card:nth-child(4) .fn-value-copy small{
  color:rgba(255,255,255,.88)!important;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;
  font-size:clamp(12px,.8vw,15px)!important;
  line-height:1.35!important;
}

/* Tiny flavour-colour underline inside the dark icon/copy composition */
.fn-values-modern .fn-value-copy:after{
  content:""!important;
  display:block!important;
  width:38px!important;
  height:3px!important;
  margin-top:7px!important;
  border-radius:20px!important;
  background:rgba(255,255,255,.72)!important;
}

/* Make the Canada block feel Canadian without the awkward white centre panel */
.fn-values-modern .fn-value-card:nth-child(4):after{
  width:190px!important;
  height:190px!important;
  right:-72px!important;
  bottom:-95px!important;
  background:rgba(255,255,255,.09)!important;
}

/* Tablet: still colour-blocked, two clean rows */
@media (max-width:1100px){
  .fn-values-modern .fn-values-strip-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .fn-values-modern .fn-value-card{
    min-height:150px!important;
    border-bottom:1px solid rgba(255,255,255,.18)!important;
  }
  .fn-values-modern .fn-value-card:nth-child(2){border-right:0!important}
  .fn-values-modern .fn-value-card:nth-child(3),
  .fn-values-modern .fn-value-card:nth-child(4){border-bottom:0!important}
}

/* Mobile: four stacked full-width colour bands */
@media (max-width:620px){
  .fn-values-modern .fn-values-strip-grid{
    grid-template-columns:1fr!important;
  }
  .fn-values-modern .fn-value-card{
    min-height:112px!important;
    justify-content:flex-start!important;
    padding:20px 22px!important;
    border-right:0!important;
    border-bottom:1px solid rgba(255,255,255,.18)!important;
  }
  .fn-values-modern .fn-value-card:nth-child(3){border-bottom:1px solid rgba(255,255,255,.18)!important}
  .fn-values-modern .fn-value-card:nth-child(4){border-bottom:0!important}
  .fn-values-modern .fn-value-icon{
    width:56px!important;
    height:56px!important;
    min-width:56px!important;
    font-size:26px!important;
  }
  .fn-values-modern .fn-value-copy{max-width:none!important}
}


/* =========================================================
   v3.1.3 — TRUE EDGE-TO-EDGE VALUES STRIP
   The coloured panels themselves now span the viewport.
   ========================================================= */

/* The FN page is already full width. Keep this child section normal
   inside that canvas instead of applying a second breakout. */
.fn-page .fn-values-modern{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
  overflow:hidden!important;
  background:transparent!important;
}

/* Remove every container restriction from the strip. */
.fn-page .fn-values-modern .fn-container,
.fn-page .fn-values-modern .fn-values-strip-grid{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  box-sizing:border-box!important;
}

/* Four panels must collectively occupy exactly 100% of the page width. */
.fn-page .fn-values-modern .fn-values-strip-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:0!important;
  align-items:stretch!important;
  justify-content:stretch!important;
}

/* Prevent any inherited max-width / centering / side gap on cards. */
.fn-page .fn-values-modern .fn-value-card{
  width:auto!important;
  max-width:none!important;
  min-width:0!important;
  margin:0!important;
  border-radius:0!important;
  box-sizing:border-box!important;
}

/* Desktop gets absolutely no outside gutter. */
@media (min-width:1101px){
  .fn-page .fn-values-modern,
  .fn-page .fn-values-modern .fn-container,
  .fn-page .fn-values-modern .fn-values-strip-grid{
    padding-left:0!important;
    padding-right:0!important;
  }
}

/* Tablet remains a full-width 2x2 colour wall. */
@media (max-width:1100px){
  .fn-page .fn-values-modern .fn-values-strip-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* Mobile remains full-width, one colour band per row. */
@media (max-width:620px){
  .fn-page .fn-values-modern .fn-values-strip-grid{
    grid-template-columns:1fr!important;
  }
}


/* =========================================================
   v3.1.4 — VALUES STRIP ESCAPES ASTRA PAGE GUTTERS
   True browser-edge-to-browser-edge colour panels.
   ========================================================= */

/* Standard full-bleed breakout:
   use the section's own centre point to reach both viewport edges.
   This works even when Astra wraps the shortcode in a padded container. */
body.fnh-pro-layout .fn-page .fn-values-modern,
body.fnh-pro-layout .entry-content .fn-values-modern,
body.fnh-pro-layout .site-main .fn-values-modern,
.fn-page .fn-values-modern{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  width:100vw!important;
  max-width:100vw!important;
  margin-left:calc(50% - 50vw)!important;
  margin-right:calc(50% - 50vw)!important;
  padding-left:0!important;
  padding-right:0!important;
  box-sizing:border-box!important;
  transform:none!important;
  overflow:hidden!important;
}

/* Kill every possible inner Astra/FN container gutter. */
body.fnh-pro-layout .fn-values-modern > .fn-container,
body.fnh-pro-layout .fn-values-modern .fn-values-strip-grid,
.fn-values-modern > .fn-container,
.fn-values-modern .fn-values-strip-grid{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  gap:0!important;
  box-sizing:border-box!important;
}

/* The four colour blocks divide the entire viewport exactly. */
body.fnh-pro-layout .fn-values-modern .fn-values-strip-grid,
.fn-values-modern .fn-values-strip-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  align-items:stretch!important;
  justify-items:stretch!important;
}

body.fnh-pro-layout .fn-values-modern .fn-value-card,
.fn-values-modern .fn-value-card{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin:0!important;
  box-sizing:border-box!important;
}

/* Avoid the 100vw scrollbar-width horizontal nudge on browsers that expose it. */
html{
  overflow-x:clip;
}
body.fnh-pro-layout{
  overflow-x:clip!important;
}

@media (max-width:1100px){
  body.fnh-pro-layout .fn-values-modern .fn-values-strip-grid,
  .fn-values-modern .fn-values-strip-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media (max-width:620px){
  body.fnh-pro-layout .fn-values-modern .fn-values-strip-grid,
  .fn-values-modern .fn-values-strip-grid{
    grid-template-columns:1fr!important;
  }
}


/* =========================================================
   v3.2 — RETRO-MODERN OUR STORY PAGE
   Family-photo storytelling with FN Hot Sauce brand language.
   ========================================================= */

.fn-story-poster-page{
  --story-red:#d71920;
  --story-deep:#0b0b0b;
  --story-cream:#f4eee5;
  --story-green:#5f8f2e;
  --story-orange:#f59b16;
  background:
    radial-gradient(rgba(20,20,20,.045) .7px,transparent .7px),
    linear-gradient(180deg,#f7f2eb 0%,#efe7dc 100%)!important;
  background-size:12px 12px,100% 100%!important;
}

/* Masthead: retro editorial split */
.fn-story-poster-page .fn-story-masthead{
  position:relative!important;
  overflow:hidden!important;
  background:
    linear-gradient(90deg,#ede5da 0 48%,#f8f3ec 48% 100%)!important;
  border-bottom:1px solid rgba(20,20,20,.1)!important;
}
.fn-story-poster-page .fn-story-masthead:before{
  content:"";
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(135deg,transparent 0 46%,rgba(215,25,32,.035) 46% 50%,transparent 50% 100%),
    radial-gradient(circle at 86% 12%,rgba(215,25,32,.09),transparent 25%);
  background-size:90px 90px,100% 100%;
}
.fn-story-poster-page .fn-story-masthead-grid{
  min-height:clamp(520px,40vw,720px)!important;
  display:grid!important;
  grid-template-columns:minmax(0,42%) minmax(0,58%)!important;
  gap:0!important;
  padding:0!important;
  align-items:stretch!important;
}

/* Family photo as a framed archival print */
.fn-story-poster-page .fn-dad-frame{
  position:relative!important;
  min-height:100%!important;
  padding:clamp(28px,3vw,54px)!important;
  display:grid!important;
  place-items:center!important;
  background:
    linear-gradient(180deg,rgba(215,25,32,.08),transparent 42%),
    #e9dfd2!important;
  border-right:1px solid rgba(20,20,20,.1)!important;
}
.fn-story-poster-page .fn-dad-frame:before{
  content:"FAMILY ARCHIVE · TORONTO";
  position:absolute;left:clamp(28px,3vw,54px);top:20px;
  color:#6d665f;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-size:10px;font-weight:900;letter-spacing:.17em;
}
.fn-story-poster-page .fn-dad-frame:after{
  content:"";
  position:absolute;
  width:72%;height:18%;
  left:14%;bottom:7%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.18),transparent 70%);
  filter:blur(18px);
}
.fn-story-poster-page .fn-dad-poster{
  position:relative!important;z-index:2!important;
  width:min(92%,690px)!important;
  height:auto!important;
  max-height:620px!important;
  object-fit:cover!important;
  object-position:center!important;
  padding:9px!important;
  background:#fff!important;
  box-shadow:0 22px 50px rgba(51,35,20,.18),0 2px 0 rgba(255,255,255,.8) inset!important;
  transform:rotate(-1.1deg)!important;
  filter:saturate(.9) contrast(.98) sepia(.05)!important;
  transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease!important;
}
.fn-story-poster-page .fn-dad-frame:hover .fn-dad-poster{
  transform:rotate(.2deg) scale(1.018)!important;
  box-shadow:0 30px 64px rgba(51,35,20,.24)!important;
}

/* Story heading editorial block */
.fn-story-poster-page .fn-story-heading{
  position:relative!important;
  padding:clamp(52px,5vw,96px) clamp(46px,5vw,100px)!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:flex-start!important;
  color:#111!important;
}
.fn-story-poster-page .fn-story-logo{
  position:absolute!important;
  right:clamp(34px,4vw,72px)!important;
  top:clamp(28px,3vw,54px)!important;
  width:88px!important;height:88px!important;
  object-fit:contain!important;
  border-radius:50%!important;
  background:#fff!important;
  box-shadow:0 14px 30px rgba(0,0,0,.12)!important;
}
.fn-story-poster-page .fn-story-heading h1{
  margin:0 0 8px!important;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;
  font-size:clamp(58px,5.5vw,104px)!important;
  line-height:.84!important;
  letter-spacing:-.065em!important;
  font-weight:950!important;
  color:#111!important;
  max-width:8ch!important;
}
.fn-story-poster-page .fn-story-heading h2{
  margin:0 0 18px!important;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;
  font-size:clamp(24px,2vw,38px)!important;
  line-height:.98!important;
  letter-spacing:-.03em!important;
  font-weight:900!important;
  color:var(--story-red)!important;
  max-width:14ch!important;
}
.fn-story-poster-page .fn-brush-title{
  display:inline-flex!important;
  width:auto!important;
  margin:0 0 28px!important;
  padding:10px 16px!important;
  background:#111!important;
  color:#fff!important;
  transform:rotate(-2deg)!important;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;
  font-size:clamp(14px,1vw,19px)!important;
  font-weight:900!important;
  letter-spacing:.04em!important;
  box-shadow:7px 7px 0 var(--story-red)!important;
}
.fn-story-poster-page .fn-story-heading:after{
  content:"";
  width:min(100%,760px);
  height:3px;
  background:linear-gradient(90deg,var(--story-red),transparent);
  margin:2px 0 20px;
}

/* First story text inside masthead */
.fn-story-poster-page .fn-story-heading h3,
.fn-story-poster-page .fn-story-heading .fn-story-intro-title{
  color:var(--story-red)!important;
}
.fn-story-poster-page .fn-story-heading p{
  max-width:72ch!important;
  color:#3f3a35!important;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;
  font-size:clamp(14px,.95vw,17px)!important;
  line-height:1.58!important;
}

/* Three story chapters */
.fn-story-poster-page .fn-story-panels{
  background:#f3ede4!important;
}
.fn-story-poster-page .fn-story-panels-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:0!important;
  width:100%!important;
  max-width:none!important;
  padding:0!important;
}
.fn-story-poster-page .fn-story-panel{
  position:relative!important;
  min-height:470px!important;
  padding:clamp(34px,3vw,58px)!important;
  border-right:1px solid rgba(20,20,20,.11)!important;
  background:rgba(255,255,255,.46)!important;
  overflow:hidden!important;
}
.fn-story-poster-page .fn-story-panel:last-child{border-right:0!important}
.fn-story-poster-page .fn-story-panel:nth-child(1){
  background:linear-gradient(180deg,#f6efe7 0%,#eee4d8 100%)!important;
}
.fn-story-poster-page .fn-story-panel:nth-child(2){
  background:linear-gradient(180deg,#f1eadf 0%,#e8ded1 100%)!important;
}
.fn-story-poster-page .fn-story-panel:nth-child(3){
  background:linear-gradient(180deg,#f6eee4 0%,#eadfd3 100%)!important;
}
.fn-story-poster-page .fn-story-panel:before{
  content:attr(data-story-step);
  position:absolute;right:22px;top:18px;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-size:72px;font-weight:950;letter-spacing:-.07em;
  color:rgba(215,25,32,.06);
  pointer-events:none;
}
.fn-story-poster-page .fn-story-panel h3{
  margin:0 0 10px!important;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;
  font-size:clamp(28px,2vw,42px)!important;
  line-height:.94!important;
  letter-spacing:-.045em!important;
  font-weight:950!important;
  color:var(--story-red)!important;
  max-width:14ch!important;
}
.fn-story-poster-page .fn-story-panel h4{
  margin:0 0 18px!important;
  color:#222!important;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;
  font-size:clamp(14px,.95vw,17px)!important;
  line-height:1.25!important;
  font-weight:900!important;
  letter-spacing:.01em!important;
}
.fn-story-poster-page .fn-story-panel p{
  color:#48423c!important;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;
  font-size:clamp(14px,.88vw,16px)!important;
  line-height:1.58!important;
  max-width:48ch!important;
}
.fn-story-poster-page .fn-story-panel strong{
  color:#1c1c1c!important;
  font-weight:900!important;
}
.fn-story-poster-page .fn-story-panel blockquote,
.fn-story-poster-page .fn-story-panel .fn-quote-ribbon{
  position:relative!important;
  margin:18px 0!important;
  padding:12px 18px!important;
  background:var(--story-red)!important;
  color:#fff!important;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;
  font-weight:900!important;
  font-style:italic!important;
  transform:rotate(-1deg)!important;
  box-shadow:7px 7px 0 rgba(0,0,0,.08)!important;
}
.fn-story-poster-page .fn-story-panel img{
  width:100%!important;
  height:auto!important;
  max-height:200px!important;
  object-fit:cover!important;
  margin-top:18px!important;
  border:7px solid #fff!important;
  box-shadow:0 14px 28px rgba(44,31,20,.15)!important;
  transform:rotate(.8deg)!important;
}

/* Retro accents */
.fn-story-poster-page .fn-story-panel:nth-child(1):after{
  content:"♫  ♫  ♫";
  display:block;
  margin-top:18px;
  color:#111;
  font-size:22px;
  letter-spacing:.32em;
}
.fn-story-poster-page .fn-story-panel:nth-child(2):after{
  content:"FAMILY TABLE";
  position:absolute;bottom:18px;right:22px;
  color:rgba(215,25,32,.16);
  font-size:12px;font-weight:950;letter-spacing:.22em;
}
.fn-story-poster-page .fn-story-panel:nth-child(3):after{
  content:"F'N HOT SAUCE";
  position:absolute;bottom:18px;right:22px;
  color:rgba(215,25,32,.16);
  font-size:12px;font-weight:950;letter-spacing:.22em;
}

/* Motion */
.fn-story-poster-page .fn-dad-frame,
.fn-story-poster-page .fn-story-heading,
.fn-story-poster-page .fn-story-panel{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);
}
.fn-story-poster-page.fn-story-inview .fn-dad-frame,
.fn-story-poster-page.fn-story-inview .fn-story-heading{
  opacity:1;transform:none;
}
.fn-story-poster-page.fn-story-inview .fn-story-heading{transition-delay:.12s}
.fn-story-poster-page .fn-story-panel.fn-story-panel-inview{
  opacity:1;transform:none;
}
.fn-story-poster-page .fn-story-panel:nth-child(2){transition-delay:.08s}
.fn-story-poster-page .fn-story-panel:nth-child(3){transition-delay:.16s}

@media (max-width:1100px){
  .fn-story-poster-page .fn-story-masthead-grid{
    grid-template-columns:1fr!important;
  }
  .fn-story-poster-page .fn-dad-frame{
    min-height:520px!important;
    border-right:0!important;
    border-bottom:1px solid rgba(20,20,20,.1)!important;
  }
  .fn-story-poster-page .fn-dad-poster{
    max-height:500px!important;
  }
  .fn-story-poster-page .fn-story-panels-grid{
    grid-template-columns:1fr!important;
  }
  .fn-story-poster-page .fn-story-panel{
    min-height:0!important;
    border-right:0!important;
    border-bottom:1px solid rgba(20,20,20,.11)!important;
  }
}
@media (max-width:620px){
  .fn-story-poster-page .fn-dad-frame{
    min-height:420px!important;
    padding:42px 18px 24px!important;
  }
  .fn-story-poster-page .fn-dad-poster{
    width:96%!important;
    max-height:390px!important;
  }
  .fn-story-poster-page .fn-story-heading{
    padding:42px 22px 48px!important;
  }
  .fn-story-poster-page .fn-story-logo{
    width:64px!important;height:64px!important;
    right:20px!important;top:20px!important;
  }
  .fn-story-poster-page .fn-story-heading h1{
    font-size:clamp(54px,17vw,78px)!important;
  }
  .fn-story-poster-page .fn-story-panel{
    padding:32px 22px 38px!important;
  }
}
@media (prefers-reduced-motion:reduce){
  .fn-story-poster-page .fn-dad-frame,
  .fn-story-poster-page .fn-story-heading,
  .fn-story-poster-page .fn-story-panel{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }
}


/* =========================================================
   v3.3 — MEMORY COMES ALIVE STORY EXPERIENCE
   Full uncropped family photo + grayscale-to-colour story reveal.
   ========================================================= */

/* Never crop the family photo on any display. */
.fn-story-poster-page .fn-dad-frame{
  min-height:0!important;
  padding:clamp(34px,3.2vw,62px)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.fn-story-poster-page .fn-dad-poster{
  display:block!important;
  width:auto!important;
  max-width:min(92%,720px)!important;
  height:auto!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center center!important;
  aspect-ratio:auto!important;
  filter:grayscale(1) contrast(1.04) sepia(.06)!important;
  transition:
    filter .9s cubic-bezier(.2,.7,.2,1),
    transform .55s cubic-bezier(.2,.7,.2,1),
    box-shadow .55s ease!important;
}

/* The image gets colour progressively as the story "wakes up". */
.fn-story-poster-page.fn-story-colour-1 .fn-dad-poster{
  filter:grayscale(.72) contrast(1.03) sepia(.045)!important;
}
.fn-story-poster-page.fn-story-colour-2 .fn-dad-poster{
  filter:grayscale(.42) contrast(1.02) sepia(.025)!important;
}
.fn-story-poster-page.fn-story-colour-3 .fn-dad-poster{
  filter:grayscale(0) contrast(1) sepia(0)!important;
}

@media (hover:hover) and (pointer:fine){
  .fn-story-poster-page .fn-dad-frame:hover .fn-dad-poster{
    filter:grayscale(0) contrast(1) sepia(0)!important;
    transform:rotate(.15deg) scale(1.018)!important;
  }
}

/* A red "developing" light passes over the archival image. */
.fn-story-poster-page .fn-dad-frame .fn-dad-poster{
  position:relative;
}
.fn-story-poster-page .fn-dad-frame{
  overflow:hidden!important;
}
.fn-story-poster-page .fn-dad-frame > *{
  position:relative;
  z-index:2;
}
.fn-story-poster-page .fn-dad-frame:before{
  z-index:3!important;
}
.fn-story-poster-page .fn-dad-frame .fn-story-photo-wash{
  pointer-events:none;
}
.fn-story-poster-page .fn-dad-frame::selection{background:transparent}
.fn-story-poster-page .fn-dad-frame .fn-photo-colour-wash{display:none}
.fn-story-poster-page .fn-dad-frame:after{
  content:""!important;
  position:absolute!important;
  top:-15%!important;
  bottom:-15%!important;
  left:-38%!important;
  width:24%!important;
  height:auto!important;
  background:linear-gradient(90deg,transparent,rgba(215,25,32,.18),rgba(255,161,18,.10),transparent)!important;
  filter:blur(18px)!important;
  transform:skewX(-12deg)!important;
  opacity:0!important;
  z-index:4!important;
  animation:none!important;
}
.fn-story-poster-page.fn-story-colour-1 .fn-dad-frame:after{
  opacity:.75!important;
  animation:fnStoryDevelop 1.35s cubic-bezier(.2,.7,.2,1) both!important;
}

/* Heading also transitions from archival neutral to brand colour. */
.fn-story-poster-page .fn-story-heading h1,
.fn-story-poster-page .fn-story-heading h2,
.fn-story-poster-page .fn-brush-title{
  transition:color .7s ease,background .7s ease,box-shadow .7s ease!important;
}
.fn-story-poster-page:not(.fn-story-colour-2) .fn-story-heading h2{
  color:#6d6861!important;
}
.fn-story-poster-page:not(.fn-story-colour-2) .fn-brush-title{
  background:#343434!important;
  box-shadow:7px 7px 0 #7c7770!important;
}
.fn-story-poster-page.fn-story-colour-2 .fn-story-heading h2{
  color:var(--story-red)!important;
}
.fn-story-poster-page.fn-story-colour-2 .fn-brush-title{
  background:#111!important;
  box-shadow:7px 7px 0 var(--story-red)!important;
}

/* Story panels begin muted and gain heat colour one chapter at a time. */
.fn-story-poster-page .fn-story-panel{
  transition:
    opacity .7s cubic-bezier(.2,.7,.2,1),
    transform .7s cubic-bezier(.2,.7,.2,1),
    background .7s ease,
    border-color .7s ease!important;
}
.fn-story-poster-page .fn-story-panel h3,
.fn-story-poster-page .fn-story-panel blockquote,
.fn-story-poster-page .fn-story-panel .fn-quote-ribbon{
  transition:color .65s ease,background .65s ease,box-shadow .65s ease!important;
}
.fn-story-poster-page .fn-story-panel:not(.fn-story-panel-colour) h3{
  color:#6a655f!important;
}
.fn-story-poster-page .fn-story-panel:not(.fn-story-panel-colour) blockquote,
.fn-story-poster-page .fn-story-panel:not(.fn-story-panel-colour) .fn-quote-ribbon{
  background:#4a4743!important;
  box-shadow:7px 7px 0 rgba(0,0,0,.08)!important;
}
.fn-story-poster-page .fn-story-panel.fn-story-panel-colour h3{
  color:var(--story-red)!important;
}
.fn-story-poster-page .fn-story-panel.fn-story-panel-colour blockquote,
.fn-story-poster-page .fn-story-panel.fn-story-panel-colour .fn-quote-ribbon{
  background:var(--story-red)!important;
}

/* Pepper trail: colour literally moves through the chapters. */
.fn-story-poster-page .fn-story-panel .fn-story-pepper{
  position:absolute;
  left:clamp(26px,2.6vw,50px);
  bottom:22px;
  font-size:26px;
  opacity:0;
  transform:translateY(12px) rotate(-18deg) scale(.75);
  filter:grayscale(1);
  transition:opacity .55s ease,transform .65s cubic-bezier(.2,.7,.2,1),filter .55s ease;
  pointer-events:none;
}
.fn-story-poster-page .fn-story-panel.fn-story-panel-colour .fn-story-pepper{
  opacity:.95;
  transform:translateY(0) rotate(-8deg) scale(1);
  filter:grayscale(0);
}
.fn-story-poster-page .fn-story-panel:nth-child(2) .fn-story-pepper{
  left:auto;
  right:34px;
  transform:translateY(12px) rotate(16deg) scale(.75);
}
.fn-story-poster-page .fn-story-panel:nth-child(2).fn-story-panel-colour .fn-story-pepper{
  transform:translateY(0) rotate(8deg) scale(1);
}
.fn-story-poster-page .fn-story-panel:nth-child(3) .fn-story-pepper{
  left:50%;
  transform:translate(-50%,12px) rotate(-4deg) scale(.75);
}
.fn-story-poster-page .fn-story-panel:nth-child(3).fn-story-panel-colour .fn-story-pepper{
  transform:translate(-50%,0) rotate(4deg) scale(1);
}

/* Slight archival tone before colour reaches a panel. */
.fn-story-poster-page .fn-story-panel:not(.fn-story-panel-colour){
  filter:saturate(.72);
}
.fn-story-poster-page .fn-story-panel.fn-story-panel-colour{
  filter:saturate(1);
}

/* Make sure the family photo always fits narrower phones without clipping. */
@media (max-width:1100px){
  .fn-story-poster-page .fn-dad-frame{
    min-height:0!important;
    padding:44px 22px 30px!important;
  }
  .fn-story-poster-page .fn-dad-poster{
    width:auto!important;
    max-width:min(94%,680px)!important;
    max-height:none!important;
  }
}
@media (max-width:620px){
  .fn-story-poster-page .fn-dad-frame{
    min-height:0!important;
    padding:48px 14px 24px!important;
  }
  .fn-story-poster-page .fn-dad-poster{
    width:auto!important;
    max-width:96%!important;
    height:auto!important;
    max-height:none!important;
    object-fit:contain!important;
  }
}

@keyframes fnStoryDevelop{
  0%{left:-38%;opacity:0}
  18%{opacity:.7}
  100%{left:118%;opacity:0}
}

@media (prefers-reduced-motion:reduce){
  .fn-story-poster-page .fn-dad-poster{
    filter:grayscale(0)!important;
  }
  .fn-story-poster-page .fn-story-panel{
    filter:none!important;
  }
  .fn-story-poster-page .fn-story-panel .fn-story-pepper{
    opacity:.95!important;
    filter:none!important;
    transform:none!important;
  }
  .fn-story-poster-page .fn-dad-frame:after{
    animation:none!important;
    display:none!important;
  }
}


/* =========================================================
   v3.4 — INTERACTIVE RETRO STORYBOOK
   Black-and-white family album that the visitor brings to life.
   ========================================================= */

.fn-story-poster-page{
  --fn-story-colour:0;
  background:
    radial-gradient(rgba(20,20,20,.045) .7px,transparent .7px),
    linear-gradient(180deg,#f2eee8 0%,#e9e2d8 100%)!important;
  filter:saturate(calc(.15 + (var(--fn-story-colour) * .85)));
  transition:filter .25s linear;
}

/* remove v3.3 pepper decorations */
.fn-story-poster-page .fn-story-pepper{
  display:none!important;
}

/* Storybook control */
.fn-storybook-control{
  position:relative;
  z-index:10;
  width:100%;
  background:#111;
  color:#fff;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.fn-storybook-control-inner{
  width:min(100% - 32px,1100px);
  margin:0 auto;
  min-height:82px;
  display:grid;
  grid-template-columns:auto minmax(180px,1fr) auto;
  align-items:center;
  gap:18px;
}
.fn-storybook-label{
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-size:11px;
  font-weight:900;
  letter-spacing:.16em;
  color:rgba(255,255,255,.66);
  white-space:nowrap;
}
.fn-storybook-label-right{color:#ef343b}
.fn-storybook-range{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:8px;
  border-radius:999px;
  outline:none;
  background:
    linear-gradient(90deg,#696969 0%,#b5b5b5 calc(var(--fn-story-colour) * 100%),#272727 calc(var(--fn-story-colour) * 100%),#272727 100%);
  cursor:pointer;
}
.fn-storybook-range::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:34px;height:34px;
  border-radius:50%;
  background:#fff;
  border:6px solid #d71920;
  box-shadow:0 5px 18px rgba(0,0,0,.34),0 0 0 5px rgba(215,25,32,.16);
}
.fn-storybook-range::-moz-range-thumb{
  width:22px;height:22px;
  border-radius:50%;
  background:#fff;
  border:6px solid #d71920;
  box-shadow:0 5px 18px rgba(0,0,0,.34),0 0 0 5px rgba(215,25,32,.16);
}

/* Book spread */
.fn-story-poster-page .fn-story-masthead,
.fn-story-poster-page .fn-story-panels{
  width:min(calc(100% - 48px),1780px)!important;
  margin:clamp(26px,2.6vw,48px) auto!important;
  border-radius:28px!important;
  overflow:hidden!important;
  box-shadow:0 26px 70px rgba(44,31,20,.18),0 2px 0 rgba(255,255,255,.8) inset!important;
  border:1px solid rgba(37,28,20,.11)!important;
}

/* center gutter like an open book */
.fn-story-poster-page .fn-story-masthead:after,
.fn-story-poster-page .fn-story-panels:after{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:30px;
  transform:translateX(-50%);
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(30,22,16,.08),rgba(255,255,255,.22),rgba(30,22,16,.08),transparent);
  opacity:.55;
  z-index:5;
}

/* All story imagery/text begin archival grayscale */
.fn-story-poster-page .fn-dad-poster,
.fn-story-poster-page .fn-story-panel img{
  filter:
    grayscale(calc(1 - var(--fn-story-colour)))
    sepia(calc(.08 * (1 - var(--fn-story-colour))))
    contrast(1.02)!important;
  transition:filter .2s linear,transform .45s ease,box-shadow .45s ease!important;
}
.fn-story-poster-page .fn-story-heading,
.fn-story-poster-page .fn-story-panel{
  --story-accent:rgb(
    calc(90 + (125 * var(--fn-story-colour))),
    calc(90 - (65 * var(--fn-story-colour))),
    calc(90 - (58 * var(--fn-story-colour)))
  );
}
.fn-story-poster-page .fn-story-heading h2,
.fn-story-poster-page .fn-story-panel h3{
  color:color-mix(in srgb,#68635d calc((1 - var(--fn-story-colour))*100%),#d71920 calc(var(--fn-story-colour)*100%))!important;
}
.fn-story-poster-page .fn-brush-title{
  background:color-mix(in srgb,#3e3b38 calc((1 - var(--fn-story-colour))*100%),#111 calc(var(--fn-story-colour)*100%))!important;
  box-shadow:7px 7px 0 color-mix(in srgb,#7f7a74 calc((1 - var(--fn-story-colour))*100%),#d71920 calc(var(--fn-story-colour)*100%))!important;
}
.fn-story-poster-page .fn-story-panel blockquote,
.fn-story-poster-page .fn-story-panel .fn-quote-ribbon{
  background:color-mix(in srgb,#4a4743 calc((1 - var(--fn-story-colour))*100%),#d71920 calc(var(--fn-story-colour)*100%))!important;
}

/* Paper texture and modern depth */
.fn-story-poster-page .fn-story-masthead,
.fn-story-poster-page .fn-story-panel{
  background-image:
    radial-gradient(rgba(38,28,20,.045) .65px,transparent .65px),
    linear-gradient(180deg,rgba(255,255,255,.78),rgba(239,231,221,.92))!important;
  background-size:10px 10px,100% 100%!important;
}
.fn-story-poster-page .fn-story-panel{
  min-height:520px!important;
}
.fn-story-poster-page .fn-story-panel:nth-child(1){
  border-top:5px solid color-mix(in srgb,#888 calc((1 - var(--fn-story-colour))*100%),#d71920 calc(var(--fn-story-colour)*100%))!important;
}
.fn-story-poster-page .fn-story-panel:nth-child(2){
  border-top:5px solid color-mix(in srgb,#888 calc((1 - var(--fn-story-colour))*100%),#5f8f2e calc(var(--fn-story-colour)*100%))!important;
}
.fn-story-poster-page .fn-story-panel:nth-child(3){
  border-top:5px solid color-mix(in srgb,#888 calc((1 - var(--fn-story-colour))*100%),#f59b16 calc(var(--fn-story-colour)*100%))!important;
}

/* subtle page-turn lift */
.fn-story-poster-page .fn-story-panel,
.fn-story-poster-page .fn-dad-frame,
.fn-story-poster-page .fn-story-heading{
  transform-style:preserve-3d;
}
@media (hover:hover) and (pointer:fine){
  .fn-story-poster-page .fn-story-panel:hover{
    transform:translateY(-6px) rotateX(.7deg)!important;
    box-shadow:0 18px 38px rgba(44,31,20,.14)!important;
  }
}

/* modern chapter markers */
.fn-story-poster-page .fn-story-panel:before{
  color:rgba(0,0,0,.07)!important;
}
.fn-story-poster-page .fn-story-panel:nth-child(1):before{
  color:color-mix(in srgb,rgba(0,0,0,.07) calc((1 - var(--fn-story-colour))*100%),rgba(215,25,32,.10) calc(var(--fn-story-colour)*100%))!important;
}
.fn-story-poster-page .fn-story-panel:nth-child(2):before{
  color:color-mix(in srgb,rgba(0,0,0,.07) calc((1 - var(--fn-story-colour))*100%),rgba(95,143,46,.11) calc(var(--fn-story-colour)*100%))!important;
}
.fn-story-poster-page .fn-story-panel:nth-child(3):before{
  color:color-mix(in srgb,rgba(0,0,0,.07) calc((1 - var(--fn-story-colour))*100%),rgba(245,155,22,.12) calc(var(--fn-story-colour)*100%))!important;
}

/* Keep photo fully visible, all devices */
.fn-story-poster-page .fn-dad-frame{
  min-height:0!important;
  overflow:visible!important;
}
.fn-story-poster-page .fn-dad-poster{
  width:auto!important;
  max-width:min(92%,720px)!important;
  height:auto!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center center!important;
}

/* phone/tablet book adapts to stacked pages */
@media (max-width:1100px){
  .fn-story-poster-page .fn-story-masthead,
  .fn-story-poster-page .fn-story-panels{
    width:calc(100% - 24px)!important;
    border-radius:20px!important;
  }
  .fn-story-poster-page .fn-story-masthead:after,
  .fn-story-poster-page .fn-story-panels:after{
    display:none;
  }
  .fn-story-poster-page .fn-story-panel{
    min-height:0!important;
  }
}
@media (max-width:620px){
  .fn-storybook-control-inner{
    width:calc(100% - 24px);
    grid-template-columns:1fr;
    gap:8px;
    padding:16px 0;
    text-align:center;
  }
  .fn-storybook-label{
    white-space:normal;
  }
  .fn-story-poster-page .fn-story-masthead,
  .fn-story-poster-page .fn-story-panels{
    width:calc(100% - 16px)!important;
    margin:16px auto!important;
    border-radius:16px!important;
  }
  .fn-story-poster-page .fn-dad-poster{
    max-width:96%!important;
  }
}

@media (prefers-reduced-motion:reduce){
  .fn-story-poster-page{
    --fn-story-colour:1!important;
  }
}


/* v3.4.1 — automatic memory reveal; visible slider removed */
.fn-storybook-control{display:none!important}


/* =========================================================
   v3.4.5 — Approved Family Table artwork
   Stable v3.4.1 structure + image swap only.
   ========================================================= */
.fn-story-poster-page .fn-family-table-art{
  width:100%!important;
  margin:20px 0 4px!important;
  padding:0!important;
  background:#111!important;
  border:6px solid #fff!important;
  border-radius:3px!important;
  overflow:hidden!important;
  box-shadow:0 14px 28px rgba(44,31,20,.16)!important;
  transform:rotate(.25deg)!important;
}
.fn-story-poster-page .fn-family-table-art-img{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:center!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  box-shadow:none!important;
  transform:none!important;
}
@media (max-width:620px){
  .fn-story-poster-page .fn-family-table-art{
    margin-top:16px!important;
    border-width:4px!important;
  }
}


/* =========================================================
   v3.4.6 — Family Table image cleanup
   Removes inherited mini-photo framing and all crop rules.
   ========================================================= */

.fn-story-poster-page .fn-family-table-art{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  max-height:none!important;
  margin:22px 0 0!important;
  padding:0!important;
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  transform:none!important;
}

.fn-story-poster-page .fn-family-table-art img,
.fn-story-poster-page .fn-family-table-art .fn-family-table-art-img{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  max-height:none!important;
  min-height:0!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:center center!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:12px!important;
  box-shadow:0 14px 28px rgba(44,31,20,.16)!important;
  transform:none!important;
}

/* Override older generic story image rules that used max-height:200px + cover. */
.fn-story-poster-page .fn-story-panel .fn-family-table-art img{
  max-height:none!important;
  height:auto!important;
  object-fit:contain!important;
  transform:none!important;
  border:0!important;
  margin-top:0!important;
}

/* Ensure no pseudo-frame from old mini-photo styles can appear. */
.fn-story-poster-page .fn-family-table-art:before,
.fn-story-poster-page .fn-family-table-art:after{
  content:none!important;
  display:none!important;
}

@media (max-width:620px){
  .fn-story-poster-page .fn-family-table-art{
    margin-top:16px!important;
  }
  .fn-story-poster-page .fn-family-table-art img{
    border-radius:9px!important;
  }
}


/* =========================================================
   v3.8.3 — HEAT LEVEL SECTION MATCHES SHOP
   01 HOT · 02 MILD · 03 SLIGHT-PEPPA
   ========================================================= */

/* If the heat-level choices are laid out by flavour classes, force shop order. */
.fn-heat-level-card--hot,
.fn-heat-card--hot,
[data-heat="hot"],
[data-flavour="hot"],
[data-flavor="hot"]{
  order:1!important;
}

.fn-heat-level-card--mild,
.fn-heat-card--mild,
[data-heat="mild"],
[data-flavour="mild"],
[data-flavor="mild"]{
  order:2!important;
}

.fn-heat-level-card--slight,
.fn-heat-card--slight,
[data-heat="slight"],
[data-flavour="slight"],
[data-flavor="slight"]{
  order:3!important;
}

/* Correct visual scale from strongest to weakest */
.fn-heat-scale,
.fn-peppa-scale,
.fn-heat-meter{
  --fnh-scale-start:#d71920;
  --fnh-scale-mid:#5f8f2e;
  --fnh-scale-end:#f59b16;
}

/* Generic flavour accents */
.fn-heat-card--hot,
.fn-heat-level-card--hot{--heat-accent:#d71920!important}
.fn-heat-card--mild,
.fn-heat-level-card--mild{--heat-accent:#5f8f2e!important}
.fn-heat-card--slight,
.fn-heat-level-card--slight{--heat-accent:#f59b16!important}


/* =========================================================
   v3.8.4 — FINAL HEAT PICKER ORDER
   LEFT -> RIGHT: 01 HOT · 02 MILD · 03 SLIGHT-PEPPA
   ========================================================= */

/* The meter now follows the same order as the tabs/shop. */
.fn-spice-meter{
  --meter-pos:16.66%;
  --heat-active:var(--heat-red);
}
.fn-spice-meter[data-level="hot"]{
  --meter-pos:16.66%;
  --heat-active:var(--heat-red);
}
.fn-spice-meter[data-level="mild"]{
  --meter-pos:50%;
  --heat-active:var(--heat-green);
}
.fn-spice-meter[data-level="slight"]{
  --meter-pos:83.34%;
  --heat-active:var(--heat-orange);
}

/* Track colours correspond exactly to HOT -> MILD -> SLIGHT-PEPPA. */
.fn-meter-track:after{
  background:linear-gradient(
    90deg,
    var(--heat-red) 0 33.33%,
    var(--heat-green) 33.33% 66.66%,
    var(--heat-orange) 66.66% 100%
  )!important;
}
.fn-meter-fill{
  background:linear-gradient(90deg,var(--heat-red),var(--heat-active))!important;
}

.fn-meter-tick-1{
  left:16.66%!important;
  border-color:var(--heat-red)!important;
}
.fn-meter-tick-2{
  left:50%!important;
  border-color:var(--heat-green)!important;
}
.fn-meter-tick-3{
  left:83.34%!important;
  border-color:var(--heat-orange)!important;
}

/* Tab colours remain tied to the actual flavour. */
.fn-heat-option[data-heat="hot"]{
  --option-color:var(--heat-red)!important;
  order:1!important;
}
.fn-heat-option[data-heat="mild"]{
  --option-color:var(--heat-green)!important;
  order:2!important;
}
.fn-heat-option[data-heat="slight"]{
  --option-color:var(--heat-orange)!important;
  order:3!important;
}


/* =========================================================
   v3.8.10 — SAFE MOBILE FAMILY VISUAL CENTERING
   Restores bottle composition and centers only the inner stack.
   ========================================================= */
@media (max-width:768px){

  /* Do NOT override .fn-family-visual transform/opacity.
     Those are controlled by the family reveal animation. */
  body.home .fn-family-modern .fn-family-visual{
    width:100%!important;
    left:auto!important;
    right:auto!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  /* Center only the inner three-bottle composition. */
  body.home .fn-family-modern .fn-family-bottle-stack{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    margin-left:auto!important;
    margin-right:auto!important;
    transform:none!important;
    justify-self:center!important;
  }

  /* Keep the origin badges centered independently. */
  body.home .fn-family-modern .fn-family-origin{
    left:50%!important;
    right:auto!important;
    transform:translateX(-50%)!important;
  }

  /* Preserve each bottle's original absolute positioning/animations. */
  body.home .fn-family-modern .fn-family-bottle{
    transform-origin:center bottom!important;
  }
}

@media (max-width:620px){
  body.home .fn-family-modern .fn-family-bottle-stack{
    width:94%!important;
    max-width:620px!important;
  }
}