@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');


:root{
  --green:#5ab04b;
  --green-dark:#2f6f29;
  --cream:#f7f4ec;
  --ink:#1f211e;
  --muted:#6b7169;
  --line:#dedfd8;
  --white:#fff;
  --radius:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:var(--ink);background:var(--cream);line-height:1.55}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.container{width:min(1180px,calc(100% - 36px));margin:auto}
.site-header{position:sticky;top:0;z-index:20;background:rgba(247,244,236,.94);backdrop-filter:blur(12px);border-bottom:1px solid rgba(0,0,0,.07)}
.nav{height:82px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:13px;font-weight:700;font-size:1.15rem}
.brand img{width:58px;height:42px;object-fit:contain}
.nav-links{display:flex;gap:26px;font-weight:700}
.nav-actions{display:flex;align-items:center;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:13px 20px;font-weight:700;border:1px solid transparent;cursor:pointer}
.btn-primary{background:var(--green);color:white}
.btn-outline{border-color:var(--ink);background:transparent}
.hero{padding:44px 0 24px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;min-height:610px;background:var(--white);border-radius:30px;overflow:hidden}
.hero-copy{padding:66px;display:flex;flex-direction:column;justify-content:center}
.eyebrow{text-transform:uppercase;letter-spacing:.16em;color:var(--green-dark);font-weight:700;font-size:.78rem}
h1,h2,h3{line-height:1.05;margin:0}
h1{font-size:clamp(3.1rem,7vw,6rem);letter-spacing:-.055em;margin:16px 0 20px}
.hero-copy p{font-size:1.12rem;color:var(--muted);max-width:580px}
.hero-image{position:relative;min-height:100%;overflow:hidden}
.hero-image img{width:100%;height:100%;object-fit:cover;object-position:center center}
.hero-badge{position:absolute;left:24px;bottom:24px;background:white;padding:16px 18px;border-radius:16px;font-weight:700;box-shadow:0 12px 30px rgba(0,0,0,.14)}
.section{padding:54px 0}
.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:24px;gap:24px}
.section-head h2{font-size:clamp(2.1rem,4vw,3.3rem);letter-spacing:-.04em}
.section-head p{color:var(--muted);max-width:520px}
.recipe-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:white;border-radius:var(--radius);overflow:hidden;border:1px solid rgba(0,0,0,.06);transition:.2s transform,.2s box-shadow}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(36,55,30,.12)}
.card-image{aspect-ratio:4/3;overflow:hidden}
.card-image img{width:100%;height:100%;object-fit:cover;transition:.3s transform}
.card:hover img{transform:scale(1.03)}
.card-body{padding:20px}
.meta{display:flex;gap:12px;flex-wrap:wrap;font-size:.82rem;color:var(--green-dark);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.card h3{font-size:1.48rem;margin:11px 0 9px}
.card p{color:var(--muted);margin:0 0 16px}
.card-foot{display:flex;justify-content:space-between;color:var(--muted);font-size:.9rem;border-top:1px solid var(--line);padding-top:14px}
.category-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.cat{background:var(--green);color:white;border-radius:18px;padding:24px;font-size:1.25rem;font-weight:700;min-height:130px;display:flex;align-items:end}
.about-band{background:#1f211e;color:white;border-radius:30px;padding:50px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.about-band h2{font-size:3rem;letter-spacing:-.04em}
.about-band p{color:#d9ddd7}
.site-footer{padding:44px 0 30px}
.footer-row{display:flex;justify-content:space-between;gap:30px;border-top:1px solid var(--line);padding-top:30px;color:var(--muted)}
.search-wrap{display:flex;gap:12px;margin:24px 0 30px}
.search-wrap input{width:100%;padding:16px 18px;border-radius:14px;border:1px solid var(--line);font:inherit;background:white}
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}
.filter{border:1px solid var(--line);background:white;padding:10px 15px;border-radius:999px;font-weight:700;cursor:pointer}
.filter.active{background:var(--ink);color:white}
.page-hero{padding:58px 0 20px}
.page-hero h1{font-size:clamp(3rem,6vw,5.5rem)}
.recipe-hero{padding:34px 0}
.recipe-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:start}
.recipe-main-image{border-radius:26px;overflow:hidden}
.recipe-sidebar{background:white;border-radius:26px;padding:30px;position:sticky;top:105px}
.recipe-sidebar h1{font-size:3.5rem}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:24px 0}
.stat{background:var(--cream);border-radius:14px;padding:14px}
.stat strong{display:block;font-size:.85rem}
.content-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:34px;padding:35px 0 70px}
.panel{background:white;border-radius:24px;padding:30px}
.panel h2{font-size:2rem;margin-bottom:20px}
.ingredients li,.steps li{margin-bottom:12px}
.note{background:#eef7ec;border-left:5px solid var(--green);padding:18px;border-radius:12px;margin-top:22px}
.mobile-menu{display:none}
@media(max-width:900px){
  .nav-links{display:none}
  .mobile-menu{display:block}
  .hero-grid,.recipe-layout,.content-grid,.about-band{grid-template-columns:1fr}
  .hero-copy{padding:38px 28px}
  .hero-image{min-height:420px}
  .recipe-grid{grid-template-columns:repeat(2,1fr)}
  .category-strip{grid-template-columns:repeat(2,1fr)}
  .recipe-sidebar{position:static}
}
@media(max-width:620px){
  .container{width:min(100% - 22px,1180px)}
  .nav{height:70px}
  .brand span{display:none}
  .recipe-grid{grid-template-columns:1fr}
  .category-strip{grid-template-columns:1fr 1fr}
  h1{font-size:3.1rem}
  .hero-image{min-height:330px}
  .hero-badge{left:14px;bottom:14px}
  .section{padding:38px 0}
  .footer-row{flex-direction:column}
  .stats{grid-template-columns:1fr 1fr}
}


.video-section{padding:8px 0 34px}
.video-card{
  background:var(--white);
  border-radius:26px;
  padding:30px;
}
.video-head{margin-bottom:20px}
.video-embed{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:20px;
  background:#000;
}
.video-embed iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
@media(max-width:620px){
  .video-card{padding:16px}
}

.video-fallback{
  margin:14px 2px 0;
  color:var(--muted);
  font-size:.92rem;
}
.video-fallback a{
  color:var(--green-dark);
  font-weight:700;
}

.footer-grid{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:start;border-top:1px solid var(--line);padding-top:30px}
.footer-brand .brand{width:max-content}
.footer-brand p{margin:14px 0 0;color:var(--muted)}
.footer-socials>span{display:block;font-weight:700;margin-bottom:12px}
.social-links{display:flex;gap:12px;flex-wrap:wrap}
.social-icon{
  width:46px;
  height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--white);
  transition:.2s transform,.2s border-color,.2s background;
}
.social-icon svg{
  width:21px;
  height:21px;
  fill:var(--ink);
}
.social-icon:hover{
  transform:translateY(-3px);
  border-color:var(--green);
  background:#eef7ec;
}
.social-icon:focus-visible{
  outline:3px solid rgba(90,176,75,.35);
  outline-offset:3px;
}
.footer-bottom{padding-top:24px;color:var(--muted);font-size:.9rem}
@media(max-width:720px){.footer-grid{grid-template-columns:1fr}.social-links{gap:8px}}

.email-copy{
  margin-top:14px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:46px;
  padding:0 16px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--white);
  color:var(--ink);
  font:inherit;
  font-weight:700;
  cursor:pointer;
  transition:.2s transform,.2s border-color,.2s background;
}
.email-copy svg{
  width:19px;
  height:19px;
  fill:var(--green-dark);
  flex:0 0 auto;
}
.email-copy:hover{
  transform:translateY(-1px);
  border-color:var(--green);
  background:#eef7ec;
}
.email-copy.copied{
  border-color:var(--green);
  background:#eef7ec;
}
.email-copy:focus-visible{
  outline:3px solid rgba(90,176,75,.35);
  outline-offset:3px;
}
.copy-status{
  display:block;
  min-height:1.2em;
  margin-top:7px;
  color:var(--green-dark);
  font-size:.82rem;
  font-weight:700;
}
@media(max-width:520px){
  .email-copy{
    width:100%;
    justify-content:center;
  }
  .email-copy-text{
    overflow-wrap:anywhere;
  }
}


/* Decorative Kubo Cooks accent bar */
body::before{
  content:"";
  position:fixed;
  left:0;
  top:0;
  width:50px;
  height:100vh;
  background:var(--green);
  z-index:9999;
  pointer-events:none;
  box-shadow:2px 0 10px rgba(47,111,41,.14);
}

@media(max-width:620px){
  body::before{
    width:10px;
  }
}

@media(min-width:621px){
  body{
    padding-left:50px;
  }
}


/* Kubo Cooks typography */
h1,
h2,
h3,
.brand,
.nav-links,
.btn,
.eyebrow,
.cat,
.filter,
.hero-badge,
.meta{
  font-family:Montserrat,"Arial Black","Helvetica Neue",Arial,sans-serif;
  font-weight:700;
}

body,
p,
li,
input,
button,
.card-foot,
.footer-row,
.footer-tagline,
.footer-bottom,
.email-copy,
.copy-status{
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:400;
}

/* Featured image edge fix */
.hero-grid{
  background:transparent;
}
.hero-copy{
  background:var(--white);
}
.hero-image{
  margin:0;
  border-radius:0 30px 30px 0;
}
.hero-image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  border-radius:0 30px 30px 0;
}

@media(max-width:900px){
  .hero-copy{
    border-radius:30px 30px 0 0;
  }
  .hero-image,
  .hero-image img{
    border-radius:0 0 30px 30px;
  }
}

/* Force the featured photo to bleed fully into the rounded right edge */
.hero-grid{
  overflow:hidden;
}
.hero-image{
  width:calc(100% + 32px);
  margin-right:-32px;
  min-width:0;
  border-radius:0;
}
.hero-image img{
  width:100%;
  max-width:none;
  border-radius:0;
}

@media(max-width:900px){
  .hero-image{
    width:100%;
    margin-right:0;
  }
}


/* Clickable featured recipe */
.featured-link{
  color:inherit;
  text-decoration:none;
  cursor:pointer;
}
.featured-link:focus-visible{
  outline:4px solid rgba(90,176,75,.45);
  outline-offset:-4px;
}
.featured-link:hover img{
  transform:scale(1.015);
}
.featured-link img{
  transition:transform .25s ease;
}

/* Secret footer celebration button */
.footer-secret{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:calc(1rem + 2px);
  font-weight:400;
  cursor:pointer;
}
.footer-secret img{
  width:24px;
  height:24px;
  object-fit:contain;
  filter:none;
}
.footer-secret:hover span{
  text-decoration:underline;
  text-underline-offset:4px;
}
.footer-secret:focus-visible{
  outline:3px solid rgba(90,176,75,.35);
  outline-offset:5px;
  border-radius:8px;
}

/* Confetti animation */
.confetti-piece{
  position:fixed;
  top:-24px;
  z-index:10000;
  pointer-events:none;
  border-radius:2px;
  animation-name:kubo-confetti-fall;
  animation-timing-function:linear;
  animation-fill-mode:forwards;
}

@keyframes kubo-confetti-fall{
  0%{
      translate:0 -10vh;
    rotate:0deg;
  }
  100%{
    opacity:.95;
    translate:calc((var(--drift, 0) * 1px)) 110vh;
    rotate:900deg;
  }
}

@media (prefers-reduced-motion: reduce){
  .confetti-piece{
    animation-duration:.8s !important;
  }
}

@media(max-width:620px){
  .footer-secret{
    font-size:1rem;
    line-height:1.4;
    text-align:left;
    align-items:flex-start;
  }
  .footer-secret img{
    width:22px;
    height:22px;
    flex:0 0 auto;
  }
}

/* Ensure the secret spoon-and-fork icon is clearly visible */
.footer-secret{
  display:inline-flex !important;
  align-items:center !important;
  gap:12px !important;
}
.footer-secret-icon{
  display:block !important;
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  object-fit:contain !important;
  opacity:1 !important;
  visibility:visible !important;
  filter:none !important;
}

/* Footer secret icon placement fix */
.footer-tagline-wrap{
  margin-top:14px;
}
.footer-secret{
  display:inline-flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  color:var(--muted) !important;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif !important;
  font-size:18px !important;
  line-height:1.4 !important;
  font-weight:400 !important;
  cursor:pointer !important;
}
.footer-secret-icon{
  display:inline-block !important;
  width:28px !important;
  height:28px !important;
  min-width:28px !important;
  max-width:28px !important;
  object-fit:contain !important;
  vertical-align:middle !important;
  opacity:1 !important;
  visibility:visible !important;
  filter:none !important;
}
.footer-secret:hover span{
  text-decoration:underline;
  text-underline-offset:4px;
}

/* Footer tagline polish */
.footer-secret{
  gap:4px !important;
  font-size:20px !important;
  text-decoration:none !important;
}
.footer-secret span{
  text-decoration:none !important;
}
.footer-secret:hover span,
.footer-secret:focus span{
  text-decoration:none !important;
}
.footer-secret-icon{
  margin-left:0 !important;
  width:25px !important;
  height:25px !important;
  min-width:25px !important;
  max-width:25px !important;
}

/* Confetti is triggered only by the spoon-and-fork icon */
.footer-tagline-wrap{
  display:flex;
  align-items:center;
  gap:4px;
  margin-top:14px;
}
.footer-tagline-text{
  color:var(--muted);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:20px;
  font-weight:400;
  line-height:1.4;
}
.footer-secret-icon-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:29px;
  height:29px;
  padding:0;
  margin:0;
  border:0;
  border-radius:50%;
  background:transparent;
  cursor:pointer;
  flex:0 0 auto;
}
.footer-secret-icon-button:hover{
  background:#eef7ec;
  transform:rotate(-8deg) scale(1.08);
}
.footer-secret-icon-button:focus-visible{
  outline:3px solid rgba(90,176,75,.35);
  outline-offset:2px;
}
.footer-secret-icon-button .footer-secret-icon{
  display:block;
  width:25px;
  height:25px;
  min-width:25px;
  object-fit:contain;
}


/* Keep anchored section labels visible below the sticky header */
#latest{
  scroll-margin-top:110px;
}

/* Tighter anchor spacing for the Latest section */
#latest{
  scroll-margin-top:82px;
}

/* Final Latest section anchor offset */
#latest{
  scroll-margin-top:75px;
}

/* Latest section anchor offset: 60px */
#latest{
  scroll-margin-top:60px;
}

/* Latest section anchor offset: 50px */
#latest{
  scroll-margin-top:50px;
}

/* Latest section anchor offset: 55px */
#latest{
  scroll-margin-top:55px;
}

/* Latest section anchor offset: 30px */
#latest{
  scroll-margin-top:30px;
}

/* Latest section anchor offset: 40px */
#latest{
  scroll-margin-top:40px;
}

/* Nested recipe pages */
.recipe-main-image img{
  width:100%;
  height:100%;
  min-height:520px;
  object-fit:cover;
}
@media(max-width:900px){
  .recipe-main-image img{min-height:360px}
}

.recipe-photo-placeholder{
  min-height:520px;
  border-radius:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:
    radial-gradient(circle at 30% 25%, rgba(90,176,75,.28), transparent 32%),
    linear-gradient(135deg, #eef7ec, #dfead8);
}
.recipe-photo-placeholder div{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.recipe-photo-placeholder span{
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  color:var(--green-dark);
  font-size:1rem;
}
.recipe-photo-placeholder strong{
  font-family:Montserrat,"Arial Black","Helvetica Neue",Arial,sans-serif;
  font-size:2rem;
  color:var(--ink);
}

.ingredient-group-title{
  margin:28px 0 10px;
  padding-bottom:8px;
  border-bottom:1px solid var(--line);
  font-family:Montserrat,"Arial Black","Helvetica Neue",Arial,sans-serif;
  font-size:1.05rem;
  font-weight:700;
}
.ingredient-group-title:first-of-type{
  margin-top:8px;
}
.ingredient-group-title span{
  float:right;
  color:var(--green-dark);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:.9rem;
  font-weight:400;
}











/* Polished footer social block */
.footer-socials{
  width:320px;
  max-width:100%;
  margin-left:auto;
}

.footer-socials > span{
  display:block;
  width:100%;
  margin-bottom:14px;
  text-align:left;
  font-size:1.08rem;
  font-weight:700;
}

.footer-socials .social-links{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  align-items:center;
  justify-items:center;
  width:100%;
  gap:0;
}

.footer-socials .social-icon{
  width:48px;
  height:48px;
}

.footer-socials .social-icon svg{
  width:21px;
  height:21px;
}

.footer-socials .email-copy{
  width:100%;
  min-height:50px;
  margin-top:12px;
  padding:0 16px;
  box-sizing:border-box;
  justify-content:center;
  gap:12px;
}

@media(max-width:720px){
  .footer-socials{
    width:100%;
    margin-left:0;
  }
}

@media(max-width:480px){
  .footer-socials .social-icon{
    width:50px;
    height:50px;
  }

  .footer-socials .email-copy{
    padding:0 14px;
  }
}


/* Dynamic process-photo row */
.recipe-photo-tabs-section{
  padding:0 0 30px;
}
.recipe-photo-tabs-section[hidden]{
  display:none;
}
.recipe-photo-tabs{
  background:var(--white);
  border-radius:24px;
  padding:16px;
  border:1px solid rgba(0,0,0,.06);
}
.photo-tab-buttons{
  display:none;
}
.photo-tab-stage{
  display:flex;
  gap:14px;
  height:clamp(210px,22vw,300px);
  transition:height .5s cubic-bezier(.22,.61,.36,1);
}

.photo-tab-stage:hover{
  height:clamp(245px,25vw,340px);
}
.photo-tab-panel,
.photo-tab-panel.active{
  display:block;
  flex:1 1 0;
  min-width:0;
  height:100%;
  overflow:hidden;
  border-radius:16px;
  background:#ece7dd;
  will-change:flex-grow,filter,transform;
  transition:flex-grow .48s cubic-bezier(.22,.61,.36,1), filter .42s ease, transform .42s ease;
}
.photo-tab-panel img{
  width:100%;
  height:100%;
  object-fit:cover;
  will-change:transform,filter;
  transition:transform .48s cubic-bezier(.22,.61,.36,1), filter .42s ease;
}
.photo-tab-stage:hover .photo-tab-panel{
  flex-grow:.92;
  filter:brightness(.66) saturate(.82);
}
.photo-tab-stage .photo-tab-panel:hover{
  flex-grow:1.28;
  filter:brightness(1) saturate(1);
  transform:translateY(-1px);
}
.photo-tab-stage .photo-tab-panel:hover img{
  transform:scale(1.02);
}

@media(max-width:760px){
  .photo-tab-stage{
    display:grid;
    grid-template-columns:1fr;
    height:auto;
  }

  .photo-tab-stage:hover{
    height:auto;
  }

  .photo-tab-panel img{
    aspect-ratio:4/3;
  }
  .photo-tab-stage:hover .photo-tab-panel,
  .photo-tab-stage .photo-tab-panel:hover{
    flex-grow:1;
      transform:none;
  }
}


/* Mobile polish pass */
@media(max-width:620px){
  .container{
    width:calc(100% - 32px);
  }

  .site-header{
    backdrop-filter:blur(10px);
  }

  .nav{
    height:64px;
    gap:12px;
  }

  .brand{
    gap:8px;
  }

  .brand img{
    width:47px;
    height:35px;
  }

  .nav-actions{
    margin-left:auto;
  }

  .nav-actions .btn{
    padding:10px 16px;
    font-size:.88rem;
    white-space:nowrap;
  }

  .hero{
    padding:20px 0 12px;
  }

  .hero-grid{
    min-height:0;
    border-radius:24px;
  }

  .hero-copy{
    padding:36px 24px 34px;
  }

  .eyebrow{
    font-size:.7rem;
    letter-spacing:.14em;
  }

  h1{
    margin:12px 0 16px;
    font-size:clamp(2.5rem,12vw,3.15rem);
    line-height:1.01;
    letter-spacing:-.05em;
  }

  .hero-copy p{
    margin:0;
    max-width:32rem;
    font-size:1rem;
    line-height:1.55;
  }

  .hero-copy > div[style*="display:flex"]{
    display:grid !important;
    grid-template-columns:1fr 1fr;
    gap:10px !important;
    margin-top:22px !important;
  }

  .hero-copy > div[style*="display:flex"] .btn{
    width:100%;
    padding:12px 10px;
    font-size:.84rem;
    text-align:center;
  }

  .hero-image{
    min-height:285px;
  }

  .hero-badge{
    left:12px;
    right:12px;
    bottom:12px;
    padding:12px 14px;
    text-align:center;
    font-size:.83rem;
  }

  .section{
    padding:42px 0;
  }

  .section-head{
    display:block;
    margin-bottom:20px;
  }

  .section-head h2{
    margin-top:8px;
    font-size:2.25rem;
    line-height:1.02;
  }

  .section-head p{
    margin:16px 0 0;
    font-size:.98rem;
    line-height:1.55;
  }

  .recipe-grid{
    gap:20px;
  }

  .card{
    border-radius:20px;
  }

  .card-body{
    padding:20px 18px 18px;
  }

  .card h3{
    margin:9px 0 8px;
    font-size:1.35rem;
  }

  .card p{
    margin-bottom:14px;
    font-size:.96rem;
    line-height:1.5;
  }

  .card-foot{
    gap:14px;
    font-size:.84rem;
  }

  .card-foot span:last-child{
    text-align:right;
  }

  .category-strip{
    grid-template-columns:1fr 1fr;
    gap:12px;
  }

  .cat{
    min-height:95px;
    padding:18px;
    border-radius:16px;
    font-size:1rem;
  }

  .about-band{
    gap:24px;
    padding:30px 24px;
    border-radius:22px;
  }

  .about-band h2{
    font-size:2.15rem;
  }

  .page-hero{
    padding:36px 0 12px;
  }

  .page-hero h1{
    font-size:2.7rem;
  }

  .search-wrap{
    margin:18px 0 22px;
  }

  .filters{
    gap:8px;
    margin-bottom:20px;
  }

  .filter{
    padding:9px 12px;
    font-size:.84rem;
  }

  .recipe-hero{
    padding:22px 0;
  }

  .recipe-layout{
    gap:20px;
  }

  .recipe-main-image{
    border-radius:20px;
  }

  .recipe-sidebar{
    padding:24px 20px;
    border-radius:20px;
  }

  .recipe-sidebar h1{
    font-size:2.45rem;
  }

  .stats{
    gap:8px;
    margin:20px 0;
  }

  .stat{
    padding:12px;
  }

  .content-grid{
    gap:20px;
    padding:22px 0 48px;
  }

  .panel{
    padding:24px 20px;
    border-radius:20px;
  }

  .panel h2{
    margin-bottom:18px;
    font-size:1.7rem;
  }

  .video-section{
    padding:4px 0 24px;
  }

  .video-card{
    padding:12px;
    border-radius:20px;
  }

  .video-embed{
    border-radius:14px;
  }

  .footer-grid{
    gap:28px;
  }

  .site-footer{
    padding-top:34px;
  }
}

@media(max-width:390px){
  .container{
    width:calc(100% - 26px);
  }

  .nav-actions .btn{
    padding:9px 13px;
    font-size:.82rem;
  }

  .hero-copy{
    padding:32px 20px 30px;
  }

  .hero-copy > div[style*="display:flex"]{
    grid-template-columns:1fr;
  }

  .hero-image{
    min-height:255px;
  }

  .section-head h2{
    font-size:2.05rem;
  }

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

  .cat{
    min-height:82px;
  }
}


/* Mobile polish pass 2 */
@media(max-width:620px){
  /* The decorative bar uses too much valuable width on phones. */
  body::before,
  .page-accent,
  .left-accent,
  .green-bar{
    display:none !important;
  }

  body{
    padding-left:0 !important;
  }

  .site-shell,
  .site-header,
  main,
  .site-footer{
    margin-left:0 !important;
  }

  .container{
    width:calc(100% - 40px);
  }

  .hero{
    padding-top:24px;
  }

  .hero-grid{
    overflow:hidden;
  }

  .hero-copy{
    padding:40px 28px 36px;
  }

  h1{
    font-size:clamp(2.35rem,10.5vw,2.95rem);
    line-height:1.03;
  }

  .hero-copy p{
    font-size:.98rem;
    line-height:1.62;
  }

  .hero-image{
    min-height:270px;
  }

  .section{
    padding:52px 0;
  }

  .section-head{
    margin-bottom:26px;
  }

  .section-head h2{
    max-width:13ch;
    font-size:2.1rem;
    line-height:1.05;
  }

  .section-head p{
    max-width:31rem;
    font-size:.96rem;
    line-height:1.62;
  }

  .recipe-grid{
    gap:28px;
  }

  .card-body{
    padding:22px 20px 20px;
  }

  .card h3{
    font-size:1.28rem;
    line-height:1.12;
  }

  .card p{
    font-size:.93rem;
  }

  .card-foot{
    padding-top:13px;
    font-size:.8rem;
  }

  .about-band{
    padding:34px 26px;
  }

  /* Footer */
  .site-footer{
    padding:48px 0 28px;
  }

  .footer-grid{
    display:block;
  }

  .footer-brand{
    max-width:none;
    margin-bottom:44px;
  }

  .footer-brand img{
    width:58px;
    margin-bottom:18px;
  }

  .footer-brand p{
    max-width:24rem;
    margin:0;
    font-size:1rem;
    line-height:1.55;
  }

  .footer-socials{
    width:100%;
    max-width:360px;
    margin:0;
  }

  .footer-socials > span{
    margin-bottom:16px;
    font-size:1rem;
  }

  .footer-socials .social-links{
    grid-template-columns:repeat(4,1fr);
    gap:10px;
  }

  .footer-socials .social-icon{
    width:46px;
    height:46px;
  }

  .footer-socials .social-icon svg{
    width:20px;
    height:20px;
  }

  .footer-socials .email-copy{
    min-height:50px;
    margin-top:14px;
    padding:0 14px;
    font-size:.84rem;
  }

  .footer-bottom{
    margin-top:28px;
    padding-top:22px;
    font-size:.8rem;
    line-height:1.5;
  }
}

@media(max-width:390px){
  .container{
    width:calc(100% - 32px);
  }

  .hero-copy{
    padding:34px 22px 30px;
  }

  h1{
    font-size:2.25rem;
  }

  .section{
    padding:46px 0;
  }

  .section-head h2{
    font-size:1.95rem;
  }

  .footer-socials{
    max-width:none;
  }

  .footer-socials .email-copy{
    font-size:.8rem;
  }
}


/* Mobile footer tagline alignment */
@media(max-width:620px){
  .footer-brand .brand{
    margin-bottom:0;
  }

  .footer-brand .brand img{
    margin-bottom:0;
  }

  .footer-tagline-wrap{
    display:block;
    margin-top:8px;
    line-height:1.55;
  }

  .footer-tagline-text{
    display:inline;
    font-size:1.12rem;
    line-height:1.5;
  }

  .footer-secret-icon-button{
    display:inline-flex;
    width:25px;
    height:25px;
    margin-left:5px;
    vertical-align:-5px;
  }

  .footer-secret-icon-button .footer-secret-icon{
    width:22px;
    height:22px;
    min-width:22px;
  }
}


/* Header live recipe search */
.header-recipe-search{
  position:relative;
  width:min(290px,27vw);
  flex:0 1 290px;
}

.header-search-form{
  display:flex;
  align-items:center;
  width:100%;
  min-height:48px;
  padding:0 8px 0 15px;
  border:1px solid rgba(31,33,30,.16);
  border-radius:999px;
  background:#fff;
  box-shadow:0 5px 18px rgba(31,33,30,.05);
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}

.header-search-form:focus-within{
  border-color:var(--green);
  box-shadow:0 0 0 4px rgba(90,176,75,.14),0 8px 22px rgba(31,33,30,.08);
}

.header-search-icon{
  flex:0 0 auto;
  margin-right:8px;
  color:var(--green-dark);
  font-size:1.2rem;
  font-weight:700;
  line-height:1;
}

.header-search-input{
  width:100%;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:var(--ink);
  font:inherit;
  font-size:.9rem;
}

.header-search-input::-webkit-search-cancel-button{
  cursor:pointer;
}

.header-search-submit{
  display:grid;
  place-items:center;
  flex:0 0 34px;
  width:34px;
  height:34px;
  border:0;
  border-radius:999px;
  background:var(--green);
  color:#fff;
  font-size:1rem;
  font-weight:700;
  cursor:pointer;
  transition:transform .18s ease,background .18s ease;
}

.header-search-submit:hover{
  background:var(--green-dark);
  transform:translateX(1px);
}

.header-search-results{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  z-index:80;
  width:min(390px,calc(100vw - 32px));
  overflow:hidden;
  border:1px solid rgba(31,33,30,.1);
  border-radius:18px;
  background:#fff;
  box-shadow:0 22px 55px rgba(31,33,30,.18);
}

.header-search-results[hidden]{
  display:none;
}

.header-search-result{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  transition:background .16s ease;
}

.header-search-result:last-child{
  border-bottom:0;
}

.header-search-result:hover,
.header-search-result.active{
  background:#eef7ec;
}

.header-search-result-copy{
  display:grid;
  min-width:0;
}

.header-search-result-copy strong{
  overflow:hidden;
  color:var(--ink);
  font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:.9rem;
  line-height:1.3;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.header-search-result-copy small{
  margin-top:3px;
  color:var(--green-dark);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.header-search-arrow{
  color:var(--green-dark);
  font-weight:700;
}

.header-search-empty{
  padding:16px;
  color:var(--muted);
  font-size:.88rem;
}

@media(max-width:900px){
  .nav-links{
    display:none;
  }

  .header-recipe-search{
    width:min(310px,48vw);
    flex-basis:min(310px,48vw);
  }
}

@media(max-width:620px){
  .nav{
    height:72px;
    gap:14px;
  }

  .brand span{
    display:none;
  }

  .header-recipe-search{
    width:auto;
    min-width:0;
    flex:1 1 auto;
  }

  .header-search-form{
    min-height:44px;
    padding-left:13px;
  }

  .header-search-input{
    font-size:.84rem;
  }

  .header-search-submit{
    width:32px;
    height:32px;
    flex-basis:32px;
  }

  .header-search-results{
    position:fixed;
    top:76px;
    left:16px;
    right:16px;
    width:auto;
    max-height:min(410px,calc(100vh - 96px));
    overflow-y:auto;
  }
}

@media(max-width:390px){
  .nav{
    gap:10px;
  }

  .brand img{
    width:45px;
  }

  .header-search-icon{
    display:none;
  }

  .header-search-form{
    padding-left:12px;
  }

  .header-search-input{
    font-size:.8rem;
  }
}


/* Search-arrow alignment refinement */
.header-search-submit{
  padding:0;
  line-height:1;
  font-size:0;
}

.header-search-submit span{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  padding-bottom:1px;
  color:#fff;
  font-family:Arial,Helvetica,sans-serif;
  font-size:1.18rem;
  font-weight:900;
  line-height:1;
}


/* About and Work With Us pages */
.info-hero{
  padding:74px 0 54px;
}
.info-hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:54px;
  align-items:center;
}
.info-hero h1{
  max-width:12ch;
  margin:14px 0 22px;
  font-size:clamp(3.6rem,6vw,6.5rem);
  line-height:.96;
  letter-spacing:-.06em;
}
.info-lead{
  max-width:42rem;
  margin:0 0 28px;
  color:var(--muted);
  font-size:1.17rem;
  line-height:1.65;
}
.info-hero-card{
  overflow:hidden;
  min-height:520px;
  border-radius:34px;
}
.info-hero-card img{
  width:100%;
  height:100%;
  min-height:520px;
  object-fit:cover;
}
.story-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:70px;
}
.story-grid h2,
.compact-section-head h2,
.contact-panel h2{
  margin:10px 0 0;
  font-size:clamp(2.4rem,4vw,4.5rem);
  line-height:1;
  letter-spacing:-.045em;
}
.story-copy{
  display:grid;
  gap:18px;
}
.story-copy p{
  margin:0;
  color:var(--muted);
  font-size:1.08rem;
  line-height:1.72;
}
.compact-section-head{
  grid-template-columns:1fr;
  margin-bottom:30px;
}
.value-grid,
.service-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.value-card,
.service-card{
  padding:30px 26px;
  border:1px solid rgba(0,0,0,.07);
  border-radius:24px;
  background:#fff;
}
.value-card span{
  color:var(--green-dark);
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.1em;
}
.value-card h3,
.service-card h3{
  margin:28px 0 10px;
  font-size:1.25rem;
}
.service-card h3{
  margin-top:0;
}
.value-card p,
.service-card p{
  margin:0;
  color:var(--muted);
  line-height:1.58;
}
.info-cta{
  align-items:center;
}
.collab-card{
  display:grid;
  gap:14px;
  padding:22px;
  border-radius:30px;
  background:var(--ink);
}
.collab-stat{
  padding:26px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  background:rgba(255,255,255,.045);
}
.collab-stat strong{
  display:block;
  margin-bottom:8px;
  color:#fff;
  font-size:1.2rem;
}
.collab-stat span{
  color:#cfd3ce;
  line-height:1.55;
}
.process-list{
  display:grid;
  gap:0;
}
.process-list div{
  display:grid;
  grid-template-columns:130px 1fr;
  gap:20px;
  padding:22px 0;
  border-bottom:1px solid var(--line);
}
.process-list strong{
  color:var(--ink);
}
.process-list span{
  color:var(--muted);
  line-height:1.55;
}
.contact-panel{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:50px;
  padding:48px;
  border-radius:30px;
  background:#fff;
}
.contact-panel p{
  max-width:42rem;
  color:var(--muted);
  line-height:1.62;
}
.contact-actions{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
}
.contact-actions .btn{
  max-width:100%;
}
.contact-actions p{
  margin:14px 0 0;
  font-size:.9rem;
}

@media(max-width:900px){
  .info-hero-grid,
  .story-grid,
  .contact-panel{
    grid-template-columns:1fr;
  }
  .info-hero h1{
    max-width:14ch;
  }
  .info-hero-card,
  .info-hero-card img{
    min-height:390px;
  }
  .value-grid,
  .service-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:620px){
  .info-hero{
    padding:38px 0 34px;
  }
  .info-hero-grid{
    gap:28px;
  }
  .info-hero h1{
    max-width:none;
    font-size:2.75rem;
    line-height:1;
  }
  .info-lead{
    font-size:1rem;
  }
  .info-hero-card,
  .info-hero-card img{
    min-height:300px;
    border-radius:22px;
  }
  .story-grid{
    gap:24px;
  }
  .story-grid h2,
  .compact-section-head h2,
  .contact-panel h2{
    font-size:2.15rem;
  }
  .value-grid,
  .service-grid{
    grid-template-columns:1fr;
  }
  .value-card,
  .service-card{
    padding:24px 22px;
  }
  .process-list div{
    grid-template-columns:1fr;
    gap:7px;
  }
  .contact-panel{
    gap:24px;
    padding:30px 24px;
  }
}




/* About page image-only looping island */
.info-hero-card{
  display:grid;
  place-items:center;
  background:#e9efe6;
}
.info-hero-card img{
  object-fit:cover;
}

.about-photo-island-section{
  padding:4px 0 26px;
}

.about-photo-island{
  overflow:hidden;
  padding:14px;
  border:1px solid rgba(0,0,0,.06);
  border-radius:24px;
  background:#fff;
  box-shadow:0 10px 30px rgba(31,33,30,.06);
}

.about-photo-island-track{
  display:flex;
  width:max-content;
  gap:14px;
  animation:kuboAboutPhotoLoop 46s linear infinite;
  will-change:transform;
}

.about-photo-island:hover .about-photo-island-track{
  animation-play-state:paused;
}

.about-photo-slide{
  flex:0 0 310px;
  overflow:hidden;
  border-radius:16px;
  background:#ece7dd;
}

.about-photo-slide img{
  display:block;
  width:100%;
  height:220px;
  object-fit:cover;
  transition:transform .3s ease;
}

.about-photo-slide:hover img{
  transform:scale(1.025);
}

@keyframes kuboAboutPhotoLoop{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-50% - 7px))}
}

.contact-secondary{
  display:grid;
  gap:5px;
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid var(--line);
}
.contact-secondary strong{
  color:var(--ink);
}
.contact-secondary span{
  max-width:32rem;
  color:var(--muted);
  font-size:.88rem;
  line-height:1.5;
}

@media(max-width:620px){
  .about-photo-island-section{
    padding:0 0 22px;
  }

  .about-photo-island{
    padding:10px;
    border-radius:20px;
  }

  .about-photo-island-track{
    gap:10px;
    animation-duration:36s;
  }

  .about-photo-slide{
    flex-basis:245px;
    border-radius:14px;
  }

  .about-photo-slide img{
    height:175px;
  }
}

@media(prefers-reduced-motion:reduce){
  .about-photo-island-track{
    animation:none;
  }
}


/* About and Work With Us refinements */
.info-hero:not(.work-hero) h1{
  max-width:11.5ch;
  font-size:clamp(3.25rem,5vw,5.45rem);
  line-height:.98;
}

.work-hero h1{
  max-width:12ch;
  font-size:clamp(3.15rem,4.65vw,5.2rem);
  line-height:.98;
}

.about-photo-island{
  position:relative;
}

.about-photo-island::before,
.about-photo-island::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  z-index:3;
  width:78px;
  pointer-events:none;
}

.about-photo-island::before{
  left:0;
  background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.92) 30%,rgba(255,255,255,0) 100%);
}

.about-photo-island::after{
  right:0;
  background:linear-gradient(270deg,#fff 0%,rgba(255,255,255,.92) 30%,rgba(255,255,255,0) 100%);
}

.contact-secondary strong{
  filter:none;
}

@media(max-width:900px){
  .info-hero:not(.work-hero) h1,
  .work-hero h1{
    max-width:14ch;
  }
}

@media(max-width:620px){
  .info-hero:not(.work-hero) h1,
  .work-hero h1{
    max-width:none;
    font-size:2.45rem;
    line-height:1;
  }

  .about-photo-island::before,
  .about-photo-island::after{
    width:44px;
  }
}


/* Softer About-carousel edge fades */
.about-photo-island::before,
.about-photo-island::after{
  width:96px;
}

.about-photo-island::before{
  background:linear-gradient(
    90deg,
    rgba(255,255,255,.72) 0%,
    rgba(255,255,255,.42) 28%,
    rgba(255,255,255,.16) 56%,
    rgba(255,255,255,0) 100%
  );
}

.about-photo-island::after{
  background:linear-gradient(
    270deg,
    rgba(255,255,255,.72) 0%,
    rgba(255,255,255,.42) 28%,
    rgba(255,255,255,.16) 56%,
    rgba(255,255,255,0) 100%
  );
}

@media(max-width:620px){
  .about-photo-island::before,
  .about-photo-island::after{
    width:54px;
  }
}


/* Darker, smoother About-carousel edge fades */
.about-photo-island::before{
  background:linear-gradient(
    90deg,
    rgba(20,22,20,.56) 0%,
    rgba(20,22,20,.30) 30%,
    rgba(20,22,20,.12) 58%,
    rgba(20,22,20,0) 100%
  );
}

.about-photo-island::after{
  background:linear-gradient(
    270deg,
    rgba(20,22,20,.56) 0%,
    rgba(20,22,20,.30) 30%,
    rgba(20,22,20,.12) 58%,
    rgba(20,22,20,0) 100%
  );
}


/* Narrow edge-only fade for the About recipe carousel */
.about-photo-island::before,
.about-photo-island::after{
  top:14px;
  bottom:14px;
  width:38px;
  border-radius:14px;
}

.about-photo-island::before{
  left:14px;
  background:linear-gradient(
    90deg,
    rgba(18,20,18,.30) 0%,
    rgba(18,20,18,.16) 38%,
    rgba(18,20,18,.05) 72%,
    rgba(18,20,18,0) 100%
  );
}

.about-photo-island::after{
  right:14px;
  background:linear-gradient(
    270deg,
    rgba(18,20,18,.30) 0%,
    rgba(18,20,18,.16) 38%,
    rgba(18,20,18,.05) 72%,
    rgba(18,20,18,0) 100%
  );
}

@media(max-width:620px){
  .about-photo-island::before,
  .about-photo-island::after{
    top:10px;
    bottom:10px;
    width:28px;
    border-radius:12px;
  }

  .about-photo-island::before{
    left:10px;
  }

  .about-photo-island::after{
    right:10px;
  }
}


/* Fix carousel fade gap against the island edges */
.about-photo-island::before,
.about-photo-island::after{
  top:0;
  bottom:0;
  width:52px;
  border-radius:0;
}

.about-photo-island::before{
  left:0;
}

.about-photo-island::after{
  right:0;
}

@media(max-width:620px){
  .about-photo-island::before,
  .about-photo-island::after{
    top:0;
    bottom:0;
    width:36px;
    border-radius:0;
  }

  .about-photo-island::before{
    left:0;
  }

  .about-photo-island::after{
    right:0;
  }
}


/* Extended but subtle About-carousel edge fade */
.about-photo-island::before,
.about-photo-island::after{
  width:88px;
}

.about-photo-island::before{
  background:linear-gradient(
    90deg,
    rgba(18,20,18,.30) 0%,
    rgba(18,20,18,.19) 24%,
    rgba(18,20,18,.10) 48%,
    rgba(18,20,18,.04) 72%,
    rgba(18,20,18,0) 100%
  );
}

.about-photo-island::after{
  background:linear-gradient(
    270deg,
    rgba(18,20,18,.30) 0%,
    rgba(18,20,18,.19) 24%,
    rgba(18,20,18,.10) 48%,
    rgba(18,20,18,.04) 72%,
    rgba(18,20,18,0) 100%
  );
}

@media(max-width:620px){
  .about-photo-island::before,
  .about-photo-island::after{
    width:54px;
  }
}


/* Interactive ingredient shopping checklist */
.ingredients li,
.ingredients-panel li{
  list-style:none;
  margin-left:0;
}

.ingredient-check{
  display:grid;
  grid-template-columns:22px 1fr;
  align-items:start;
  gap:11px;
  width:100%;
  cursor:pointer;
  user-select:none;
}

.ingredient-check input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.ingredient-check-box{
  position:relative;
  width:20px;
  height:20px;
  margin-top:2px;
  border:1.5px solid rgba(31,33,30,.35);
  border-radius:6px;
  background:#fff;
  transition:
    border-color .18s ease,
    background .18s ease,
    transform .18s ease;
}

.ingredient-check:hover .ingredient-check-box{
  border-color:var(--green);
  transform:scale(1.04);
}

.ingredient-check input:focus-visible + .ingredient-check-box{
  outline:3px solid rgba(90,176,75,.22);
  outline-offset:2px;
}

.ingredient-check input:checked + .ingredient-check-box{
  border-color:var(--green);
  background:var(--green);
}

.ingredient-check input:checked + .ingredient-check-box::after{
  content:"";
  position:absolute;
  left:6px;
  top:2px;
  width:5px;
  height:10px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

.ingredient-check-text{
  transition:color .2s ease,opacity .2s ease,text-decoration-color .2s ease;
}

.ingredient-complete .ingredient-check-text{
  color:var(--muted);
  opacity:.62;
  text-decoration:line-through;
  text-decoration-thickness:1.5px;
  text-decoration-color:rgba(31,33,30,.45);
}

@media(max-width:620px){
  .ingredient-check{
    grid-template-columns:24px 1fr;
    gap:12px;
  }

  .ingredient-check-box{
    width:22px;
    height:22px;
  }

  .ingredient-check input:checked + .ingredient-check-box::after{
    left:7px;
    top:3px;
  }
}


/* Recipe-page section order: details first, video afterward */
#recipe-details{
  padding-top:30px;
}

#recipe-details + .recipe-photo-tabs-section,
#recipe-details + .video-section{
  padding-top:8px;
}

@media(max-width:620px){
  #recipe-details{
    padding-top:18px;
  }
}


/* Tighten spacing between recipe hero and recipe details */
.recipe-hero{
  padding-bottom:10px;
}

#recipe-details{
  padding-top:10px;
}

.recipe-layout{
  margin-bottom:0;
}

@media(max-width:620px){
  .recipe-hero{
    padding-bottom:6px;
  }

  #recipe-details{
    padding-top:6px;
  }
}


/* Match hero-to-details spacing with gallery-to-video spacing */
@media(min-width:621px){
  .recipe-hero{
    padding-bottom:0;
  }

  #recipe-details{
    padding-top:3px;
  }
}


/* Match details-to-gallery spacing with the rest of the recipe page */
#recipe-details{
  padding-bottom:10px;
}

#recipe-details + .recipe-photo-tabs-section{
  padding-top:0;
  margin-top:0;
}

@media(max-width:620px){
  #recipe-details{
    padding-bottom:6px;
  }

  #recipe-details + .recipe-photo-tabs-section{
    padding-top:0;
    margin-top:0;
  }
}


/* Balance spacing around Ingredients + How to Make It */
#recipe-details{
  padding-bottom:0;
}

#recipe-details .content-grid{
  padding-bottom:35px;
}

#recipe-details + .recipe-photo-tabs-section{
  padding-top:0;
  margin-top:0;
}

@media(max-width:620px){
  #recipe-details{
    padding-bottom:0;
  }

  #recipe-details .content-grid{
    padding-bottom:22px;
  }
}

/* Mobile hamburger navigation */
.mobile-menu-toggle{display:none}
@media(max-width:900px){
  .site-header .nav{position:relative}
  .mobile-menu-toggle{
    display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;
    flex:0 0 42px;width:42px;height:42px;padding:0;border:1px solid rgba(31,33,30,.14);
    border-radius:999px;background:#fff;cursor:pointer;z-index:92
  }
  .mobile-menu-toggle span{display:block;width:18px;height:2px;border-radius:999px;background:var(--ink);transition:transform .22s ease,opacity .22s ease}
  .mobile-menu-open .mobile-menu-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .mobile-menu-open .mobile-menu-toggle span:nth-child(2){opacity:0}
  .mobile-menu-open .mobile-menu-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .site-header .nav-links{
    display:flex;position:absolute;top:calc(100% + 10px);left:0;right:0;z-index:90;
    flex-direction:column;align-items:stretch;gap:0;padding:10px;border:1px solid rgba(31,33,30,.1);
    border-radius:18px;background:#fff;box-shadow:0 18px 45px rgba(31,33,30,.16);
    opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none;
    transition:opacity .2s ease,transform .2s ease,visibility .2s ease
  }
  .mobile-menu-open .nav-links{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
  .site-header .nav-links a{width:100%;padding:12px 14px;border-radius:12px}
  .site-header .nav-links a:hover{background:#eef7ec}
  .header-recipe-search{margin-left:auto}
}

/* Compact horizontal process-photo row on phones */
@media(max-width:620px){
  .photo-tab-stage{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;height:auto}
  .photo-tab-stage:hover{height:auto}
  .photo-tab-panel,.photo-tab-panel.active{
    width:100%;height:auto;min-width:0;border-radius:12px;opacity:1;filter:none;transform:none
  }
  .photo-tab-stage:hover .photo-tab-panel,.photo-tab-stage .photo-tab-panel:hover{
    flex-grow:1;opacity:1;filter:none;transform:none
  }
  .photo-tab-panel img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;transform:none}
  .photo-tab-stage .photo-tab-panel:hover img{transform:none}
  .recipe-photo-tabs{padding:10px;border-radius:18px}
}
@media(max-width:390px){
  .mobile-menu-toggle{flex-basis:38px;width:38px;height:38px}
  .photo-tab-stage{gap:6px}
  .photo-tab-panel,.photo-tab-panel.active{border-radius:10px}
}


/* Place the mobile menu button directly beside the Kubo logo */
@media(max-width:900px){
  .site-header .nav{
    display:grid;
    grid-template-columns:auto auto minmax(0,1fr);
    align-items:center;
    gap:10px;
  }

  .site-header .brand{
    grid-column:1;
    margin:0;
  }

  .site-header .mobile-menu-toggle{
    grid-column:2;
    display:flex !important;
    position:relative;
    z-index:95;
  }

  .site-header .header-recipe-search{
    grid-column:3;
    width:100%;
    min-width:0;
    margin-left:0;
  }

  .site-header .nav-links{
    grid-column:1 / -1;
    top:calc(100% + 10px);
  }
}

@media(max-width:620px){
  .site-header .nav{
    grid-template-columns:auto auto minmax(0,1fr);
    gap:8px;
  }

  .site-header .brand img{
    width:48px;
    height:auto;
  }

  .site-header .mobile-menu-toggle{
    width:40px;
    height:40px;
    flex-basis:40px;
  }
}

@media(max-width:390px){
  .site-header .nav{
    gap:7px;
  }

  .site-header .brand img{
    width:44px;
  }

  .site-header .mobile-menu-toggle{
    width:38px;
    height:38px;
    flex-basis:38px;
  }

  .site-header .header-search-form{
    min-height:42px;
  }
}


/* Final mobile menu visibility fix */
@media(max-width:900px){
  .site-header .nav{
    display:grid !important;
    grid-template-columns:auto auto minmax(0,1fr) !important;
    align-items:center !important;
    gap:10px !important;
  }

  .site-header .brand{
    grid-column:1 !important;
  }

  .site-header .mobile-menu-toggle{
    display:flex !important;
    grid-column:2 !important;
    visibility:visible !important;
    opacity:1 !important;
    position:relative !important;
    z-index:100 !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:center !important;
    gap:4px !important;
    width:42px !important;
    height:42px !important;
    padding:0 !important;
    border:1px solid rgba(31,33,30,.16) !important;
    border-radius:999px !important;
    background:#fff !important;
  }

  .site-header .mobile-menu-toggle span{
    display:block !important;
    width:18px !important;
    height:2px !important;
    border-radius:999px !important;
    background:var(--ink) !important;
  }

  .site-header .header-recipe-search{
    grid-column:3 !important;
    min-width:0 !important;
    width:100% !important;
  }

  .site-header .nav-links{
    grid-column:1 / -1 !important;
  }
}

@media(max-width:620px){
  .site-header .nav{
    grid-template-columns:auto auto minmax(0,1fr) !important;
    gap:8px !important;
  }

  .site-header .mobile-menu-toggle{
    width:38px !important;
    height:38px !important;
  }

  .site-header .brand img{
    width:44px !important;
  }
}


/* Refine mobile header proportions */
@media(max-width:620px){
  .site-header .nav{
    grid-template-columns:auto auto minmax(0,230px) !important;
    justify-content:start !important;
    column-gap:12px !important;
  }

  .site-header .brand{
    margin-right:2px !important;
  }

  .site-header .mobile-menu-toggle{
    margin-left:2px !important;
  }

  .site-header .mobile-menu-toggle span{
    width:19px !important;
    height:3px !important;
  }

  .site-header .header-recipe-search{
    width:min(100%,230px) !important;
    justify-self:end !important;
  }

  .site-header .header-search-form{
    min-height:40px !important;
    padding-left:12px !important;
  }

  .site-header .header-search-input{
    font-size:.78rem !important;
  }

  .site-header .header-search-submit{
    width:30px !important;
    height:30px !important;
    flex-basis:30px !important;
  }
}

@media(max-width:390px){
  .site-header .nav{
    grid-template-columns:auto auto minmax(0,205px) !important;
    column-gap:10px !important;
  }

  .site-header .header-recipe-search{
    width:min(100%,205px) !important;
  }

  .site-header .mobile-menu-toggle span{
    width:18px !important;
    height:3px !important;
  }
}


/* Keep the mobile search bar right-aligned */
@media(max-width:620px){
  .site-header .nav{
    grid-template-columns:auto auto minmax(0,1fr) !important;
    justify-content:stretch !important;
  }

  .site-header .header-recipe-search{
    width:min(100%,230px) !important;
    justify-self:end !important;
    margin-left:auto !important;
  }
}

@media(max-width:390px){
  .site-header .header-recipe-search{
    width:min(100%,205px) !important;
    justify-self:end !important;
    margin-left:auto !important;
  }
}


/* Match mobile search height with the hamburger button */
@media(max-width:620px){
  .site-header .mobile-menu-toggle{
    width:42px !important;
    height:42px !important;
    flex-basis:42px !important;
  }

  .site-header .header-recipe-search{
    width:min(100%,242px) !important;
  }

  .site-header .header-search-form{
    min-height:42px !important;
    height:42px !important;
    padding-left:13px !important;
    padding-right:6px !important;
  }

  .site-header .header-search-submit{
    width:32px !important;
    height:32px !important;
    flex-basis:32px !important;
  }
}

@media(max-width:390px){
  .site-header .mobile-menu-toggle{
    width:40px !important;
    height:40px !important;
    flex-basis:40px !important;
  }

  .site-header .header-recipe-search{
    width:min(100%,216px) !important;
  }

  .site-header .header-search-form{
    min-height:40px !important;
    height:40px !important;
  }

  .site-header .header-search-submit{
    width:30px !important;
    height:30px !important;
    flex-basis:30px !important;
  }
}


/* Cleaner hamburger-to-X animation */
@media(max-width:900px){
  .site-header .mobile-menu-toggle{
    position:relative !important;
    outline:none !important;
  }

  .site-header .mobile-menu-toggle:focus-visible{
    outline:3px solid rgba(90,176,75,.22) !important;
    outline-offset:2px !important;
  }

  .site-header .mobile-menu-toggle::before,
  .site-header .mobile-menu-toggle::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:19px;
    height:3px;
    border-radius:999px;
    background:var(--ink);
    opacity:0;
    transform:translate(-50%,-50%) rotate(0deg);
    transition:opacity .18s ease,transform .22s ease;
  }

  .site-header .mobile-menu-open .mobile-menu-toggle span{
    opacity:0 !important;
    transform:none !important;
  }

  .site-header .mobile-menu-open .mobile-menu-toggle::before{
    opacity:1;
    transform:translate(-50%,-50%) rotate(45deg);
  }

  .site-header .mobile-menu-open .mobile-menu-toggle::after{
    opacity:1;
    transform:translate(-50%,-50%) rotate(-45deg);
  }
}


/* Slightly taller mobile header controls */
@media(max-width:620px){
  .site-header .mobile-menu-toggle{
    width:46px !important;
    height:46px !important;
    flex-basis:46px !important;
  }

  .site-header .header-search-form{
    min-height:46px !important;
    height:46px !important;
  }

  .site-header .header-search-submit{
    width:34px !important;
    height:34px !important;
    flex-basis:34px !important;
  }
}

@media(max-width:390px){
  .site-header .mobile-menu-toggle{
    width:44px !important;
    height:44px !important;
    flex-basis:44px !important;
  }

  .site-header .header-search-form{
    min-height:44px !important;
    height:44px !important;
  }

  .site-header .header-search-submit{
    width:32px !important;
    height:32px !important;
    flex-basis:32px !important;
  }
}


/* Balance the mobile header's left and right outer spacing */
@media(max-width:620px){
  .site-header .nav{
    padding-left:8px !important;
    padding-right:0 !important;
  }
}

@media(max-width:390px){
  .site-header .nav{
    padding-left:7px !important;
  }
}


/* Fine-tune mobile header edge spacing */
@media(max-width:620px){
  .site-header .nav{
    padding-left:4px !important;
  }
}

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


/* Public recipe sorting */
.recipe-sort-row{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  margin:14px 0 30px;
}

.recipe-sort-row label{
  color:var(--muted);
  font-size:.86rem;
  font-weight:700;
}

.recipe-sort-row select{
  min-height:42px;
  padding:0 38px 0 14px;
  border:1px solid rgba(31,33,30,.14);
  border-radius:999px;
  background:#fff;
  color:var(--ink);
  font:inherit;
  font-size:.88rem;
  font-weight:700;
  cursor:pointer;
}

@media(max-width:620px){
  .recipe-sort-row{
    justify-content:stretch;
    margin:12px 0 24px;
  }

  .recipe-sort-row label{
    display:none;
  }

  .recipe-sort-row select{
    width:100%;
  }
}


/* Slowly rotating homepage featured recipes */
.featured-carousel{
  position:relative;
  isolation:isolate;
  background:#20211f;
}

.featured-slide{
  position:absolute;
  inset:0;
  display:block;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:scale(1.025);
  transition:
    opacity 1.1s ease,
    transform 5.8s ease,
    visibility 1.1s ease;
}

.featured-slide.active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:scale(1);
  z-index:2;
}

.featured-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.featured-slide .hero-badge{
  z-index:3;
}

.featured-dots{
  position:absolute;
  right:22px;
  bottom:25px;
  z-index:5;
  display:flex;
  align-items:center;
  gap:7px;
  padding:8px 10px;
  border-radius:999px;
  background:rgba(20,22,20,.48);
  backdrop-filter:blur(8px);
}

.featured-dot{
  width:8px;
  height:8px;
  padding:0;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.55);
  cursor:pointer;
  transition:width .22s ease,background .22s ease;
}

.featured-dot.active{
  width:22px;
  background:#fff;
}

@media(max-width:620px){
  .featured-dots{
    right:14px;
    bottom:76px;
    gap:6px;
    padding:7px 9px;
  }

  .featured-dot{
    width:7px;
    height:7px;
  }

  .featured-dot.active{
    width:19px;
  }
}

@media(prefers-reduced-motion:reduce){
  .featured-slide{
    transition:opacity .2s linear;
    transform:none;
  }
}


/* Refined featured-recipe transition: soft fade with horizontal motion */
.featured-carousel{
  overflow:hidden;
}

.featured-slide{
  visibility:visible;
  opacity:0;
  pointer-events:none;
  z-index:1;
  transform:translateX(-7%);
  transition:
    opacity 1.05s cubic-bezier(.22,.61,.36,1),
    transform 1.05s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}

.featured-slide.active{
  opacity:1;
  pointer-events:auto;
  z-index:3;
  transform:translateX(0);
}

.featured-slide.is-entering{
  z-index:4;
}

.featured-slide.is-entering.from-left{
  opacity:0;
  transform:translateX(-7%);
}

.featured-slide.is-entering.from-right{
  opacity:0;
  transform:translateX(7%);
}

.featured-slide.is-leaving{
  opacity:0;
  pointer-events:none;
  z-index:2;
}

.featured-slide.is-leaving.to-right{
  transform:translateX(7%);
}

.featured-slide.is-leaving.to-left{
  transform:translateX(-7%);
}

/* Make the Featured recipe bubble travel and fade with its photo */
.featured-slide .hero-badge{
  opacity:0;
  transform:translateX(-22px);
  transition:
    opacity .72s ease .16s,
    transform .9s cubic-bezier(.22,.61,.36,1) .08s;
  will-change:opacity,transform;
}

.featured-slide.active .hero-badge{
  opacity:1;
  transform:translateX(0);
}

.featured-slide.is-leaving .hero-badge{
  opacity:0;
  transform:translateX(24px);
  transition-delay:0s;
}

@media(max-width:620px){
  .featured-slide{
    transform:translateX(-5%);
  }

  .featured-slide.is-entering.from-left{
    transform:translateX(-5%);
  }

  .featured-slide.is-entering.from-right,
  .featured-slide.is-leaving.to-right{
    transform:translateX(5%);
  }

  .featured-slide.is-leaving.to-left{
    transform:translateX(-5%);
  }

  .featured-slide .hero-badge{
    transform:translateX(-16px);
  }

  .featured-slide.is-leaving .hero-badge{
    transform:translateX(16px);
  }
}

@media(prefers-reduced-motion:reduce){
  .featured-slide,
  .featured-slide .hero-badge{
    transition:opacity .2s linear !important;
    transform:none !important;
  }
}


/* Refined select arrows: thicker and slightly inset */
.recipe-sort-row select,
.filters select{
  appearance:none;
  -webkit-appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position:
    calc(100% - 19px) 50%,
    calc(100% - 13px) 50%;
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
  padding-right:42px !important;
}


/* Clean subtle zoom-in for the active homepage featured photo */
.featured-slide img{
  transform:scale(1.015);
  transform-origin:center center;
  backface-visibility:hidden;
  will-change:transform;
}

.featured-slide.active img{
  animation:kuboFeaturedPhotoZoom 5.8s cubic-bezier(.22,.61,.36,1) both;
}

@keyframes kuboFeaturedPhotoZoom{
  from{
    transform:scale(1.015);
  }
  to{
    transform:scale(1.045);
  }
}

@media(prefers-reduced-motion:reduce){
  .featured-slide.active img{
    animation:none !important;
    transform:none !important;
  }
}


/* Recipe sharing and previous/next navigation */
.recipe-share-nav{
  padding:0 0 42px;
}

.recipe-share-nav-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  padding:20px 22px;
  border:1px solid rgba(31,33,30,.08);
  border-radius:22px;
  background:#fff;
  box-shadow:0 10px 28px rgba(31,33,30,.05);
}

.recipe-share-block{
  display:grid;
  gap:9px;
}

.recipe-share-label{
  color:#2e6f2c;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.recipe-share-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.recipe-share-button{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid #dcd9d0;
  border-radius:50%;
  background:#f7f4ec;
  color:#22251f;
  cursor:pointer;
  transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease;
}

.recipe-share-button:hover,
.recipe-share-button:focus-visible{
  transform:translateY(-2px);
  border-color:#5ab04b;
  background:#5ab04b;
  color:#fff;
}

.recipe-share-button.is-bookmarked{
  border-color:#5ab04b;
  background:#5ab04b;
  color:#fff;
}

.recipe-share-button svg{
  width:19px;
  height:19px;
  fill:currentColor;
}

.recipe-share-status{
  min-height:1.1em;
  color:#656a62;
  font-size:.78rem;
}

.recipe-prev-next{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  width:min(520px,52%);
}

.recipe-nav-button{
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border:1px solid #dedbd2;
  border-radius:15px;
  background:#f7f4ec;
  color:#22251f;
  text-decoration:none;
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}

.recipe-nav-button:hover,
.recipe-nav-button:focus-visible{
  transform:translateY(-2px);
  border-color:#5ab04b;
  background:#edf7e9;
}

.recipe-nav-next{
  justify-content:flex-end;
  text-align:right;
}

.recipe-nav-button svg{
  width:22px;
  height:22px;
  flex:0 0 auto;
  fill:currentColor;
}

.recipe-nav-button span{
  min-width:0;
  display:grid;
  gap:2px;
}

.recipe-nav-button small{
  color:#70756d;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.recipe-nav-button strong{
  overflow:hidden;
  font-size:.84rem;
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap;
}

@media(max-width:820px){
  .recipe-share-nav-card{
    align-items:stretch;
    flex-direction:column;
  }

  .recipe-prev-next{
    width:100%;
  }
}

@media(max-width:520px){
  .recipe-share-nav{
    padding-bottom:28px;
  }

  .recipe-share-nav-card{
    padding:17px;
    border-radius:18px;
  }

  .recipe-share-button{
    width:40px;
    height:40px;
  }

  .recipe-prev-next{
    grid-template-columns:1fr;
  }

  .recipe-nav-next{
    text-align:left;
    justify-content:flex-start;
  }

  .recipe-nav-next span{
    order:2;
  }

  .recipe-nav-next svg{
    order:1;
    transform:rotate(180deg);
  }
}


/* Match recipe-share icons to the footer social-icon style */
.recipe-share-button{
  width:40px !important;
  height:40px !important;
  display:grid !important;
  place-items:center !important;
  padding:0 !important;
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:50% !important;
  background:#252824 !important;
  color:#fff !important;
  box-shadow:none !important;
  cursor:pointer;
  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease !important;
}

.recipe-share-button:hover,
.recipe-share-button:focus-visible{
  transform:translateY(-2px) !important;
  border-color:#5ab04b !important;
  background:#5ab04b !important;
  color:#fff !important;
}

.recipe-share-button.is-bookmarked{
  border-color:#5ab04b !important;
  background:#5ab04b !important;
  color:#fff !important;
}

.recipe-share-button svg{
  width:18px !important;
  height:18px !important;
  fill:currentColor !important;
}


/* Exact footer-style treatment for recipe-share icons */
.recipe-share-button{
  width:46px !important;
  height:46px !important;
  border:1px solid #d9d7cf !important;
  background:#fff !important;
  color:#20231f !important;
  box-shadow:none !important;
}

.recipe-share-button:hover,
.recipe-share-button:focus-visible{
  border-color:#5ab04b !important;
  background:#5ab04b !important;
  color:#fff !important;
}

.recipe-share-button.is-bookmarked{
  border-color:#5ab04b !important;
  background:#5ab04b !important;
  color:#fff !important;
}

/* Thicker previous/next arrows, matching the search button weight */
.recipe-nav-button svg{
  width:24px !important;
  height:24px !important;
  fill:currentColor !important;
}


/* Share icon sizing matched to the Follow Kubo Cooks footer icons */
.recipe-share-button svg{
  width:22px !important;
  height:22px !important;
}

/* Previous/next use the exact arrow glyph from the search bar */
.recipe-nav-arrow{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  color:currentColor;
  font-size:1.45rem;
  font-family:Arial,Helvetica,sans-serif;
  font-weight:700;
  line-height:1;
}

.recipe-nav-arrow-prev{
  transform:rotate(180deg);
}

.recipe-nav-arrow-next{
  transform:none;
}

/* Prevent old SVG arrow rules from affecting the new glyph */
.recipe-nav-button > svg{
  display:none !important;
}

@media(max-width:520px){
  .recipe-nav-next .recipe-nav-arrow{
    order:1;
    transform:none;
  }
}


/* Restore the previous recipe navigation arrow design */
.recipe-nav-arrow{
  display:none !important;
}

.recipe-nav-button > svg{
  display:block !important;
  width:24px !important;
  height:24px !important;
  flex:0 0 auto !important;
  fill:currentColor !important;
}

.recipe-nav-prev svg{
  transform:none !important;
}

.recipe-nav-next svg{
  transform:none !important;
}


/* Mobile Browse by Category: compact two-column layout */
@media(max-width:700px){
  .category-strip{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
  }

  .category-strip .cat{
    width:100% !important;
    min-height:78px !important;
    padding:18px 16px !important;
    border-radius:18px !important;
    font-size:1rem !important;
    line-height:1.15 !important;
  }
}

@media(max-width:360px){
  .category-strip{
    gap:10px !important;
  }

  .category-strip .cat{
    min-height:72px !important;
    padding:16px 13px !important;
    font-size:.94rem !important;
  }
}


/* Automatic NEW flag for the most recently published recipe */
.card-image{
  position:relative;
}

.new-recipe-badge{
  position:absolute;
  top:14px;
  left:14px;
  z-index:3;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:7px 13px 6px;
  border-radius:10px;
  background:#5ab04b;
  color:#fff;
  box-shadow:0 7px 18px rgba(31,33,30,.18);
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.08em;
  line-height:1;
  text-transform:uppercase;
  pointer-events:none;
}

@media(max-width:700px){
  .new-recipe-badge{
    top:11px;
    left:11px;
    min-height:31px;
    padding:6px 11px 5px;
    border-radius:9px;
    font-size:.72rem;
  }
}


/* Slightly larger NEW badge with a subtle breathing animation */
.new-recipe-badge{
  min-height:38px !important;
  padding:8px 15px 7px !important;
  border-radius:11px !important;
  font-size:.84rem !important;
  animation:kuboNewBadgePulse 2.8s ease-in-out infinite;
  transform-origin:center center;
  will-change:transform;
}

@keyframes kuboNewBadgePulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.055); }
}

@media(prefers-reduced-motion:reduce){
  .new-recipe-badge{
    animation:none !important;
  }
}

/* Mobile previous/next recipe navigation: keep both buttons side by side */
@media(max-width:520px){
  .recipe-prev-next{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }

  .recipe-nav-button{
    min-height:64px !important;
    padding:10px 11px !important;
    border-radius:14px !important;
    gap:7px !important;
  }

  .recipe-nav-button small{
    font-size:.58rem !important;
    letter-spacing:.06em !important;
  }

  .recipe-nav-button strong{
    font-size:.72rem !important;
    line-height:1.15 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .recipe-nav-button svg{
    width:20px !important;
    height:20px !important;
  }

  .recipe-nav-next{
    justify-content:flex-end !important;
    text-align:right !important;
  }

  .recipe-nav-next span{
    order:1 !important;
  }

  .recipe-nav-next svg{
    order:2 !important;
    transform:none !important;
  }
}


/* Tighten spacing between share buttons and Previous/Next on mobile */
@media(max-width:520px){
  .recipe-share-nav-card{
    gap:14px !important;
  }

  .recipe-share-block{
    gap:8px !important;
  }

  .recipe-share-status{
    min-height:0 !important;
  }

  .recipe-prev-next{
    margin-top:0 !important;
  }
}


/* Shop coming-soon page */
.shop-coming-soon{
  min-height:calc(100vh - 180px);
  display:grid;
  align-items:center;
  padding:72px 0 90px;
}

.shop-coming-soon-card{
  max-width:820px;
  margin:0 auto;
  padding:64px 58px;
  border:1px solid rgba(31,33,30,.08);
  border-radius:28px;
  background:#fff;
  box-shadow:0 18px 46px rgba(31,33,30,.07);
  text-align:center;
}

.shop-coming-soon-card h1{
  max-width:680px;
  margin:14px auto 18px;
  font-size:clamp(2.6rem,6vw,5.2rem);
  line-height:.98;
  letter-spacing:-.055em;
}

.shop-coming-soon-card p{
  max-width:640px;
  margin:0 auto 28px;
  color:#62675f;
  font-size:1.08rem;
  line-height:1.65;
}

.shop-coming-soon-card .btn{
  min-width:180px;
}

@media(max-width:700px){
  .shop-coming-soon{
    padding:42px 0 58px;
  }

  .shop-coming-soon-card{
    padding:42px 24px;
    border-radius:22px;
  }

  .shop-coming-soon-card h1{
    font-size:2.65rem;
  }

  .shop-coming-soon-card p{
    font-size:.98rem;
  }
}


/* Direction-aware Featured carousel motion */
.featured-slide.is-entering.from-left .hero-badge{
  opacity:0 !important;
  transform:translateX(-24px) !important;
}

.featured-slide.is-entering.from-right .hero-badge{
  opacity:0 !important;
  transform:translateX(24px) !important;
}

.featured-slide.is-entering.active .hero-badge{
  opacity:1 !important;
  transform:translateX(0) !important;
}

.featured-slide.is-leaving.to-right .hero-badge{
  opacity:0 !important;
  transform:translateX(24px) !important;
  transition-delay:0s !important;
}

.featured-slide.is-leaving.to-left .hero-badge{
  opacity:0 !important;
  transform:translateX(-24px) !important;
  transition-delay:0s !important;
}

/* Keep image and badge moving together in the chosen direction */
.featured-slide.is-entering.from-left{
  transform:translateX(-7%) !important;
}

.featured-slide.is-entering.from-right{
  transform:translateX(7%) !important;
}

.featured-slide.is-leaving.to-right{
  transform:translateX(7%) !important;
}

.featured-slide.is-leaving.to-left{
  transform:translateX(-7%) !important;
}

@media(max-width:700px){
  .featured-slide.is-entering.from-left{
    transform:translateX(-5%) !important;
  }

  .featured-slide.is-entering.from-right{
    transform:translateX(5%) !important;
  }

  .featured-slide.is-leaving.to-right{
    transform:translateX(5%) !important;
  }

  .featured-slide.is-leaving.to-left{
    transform:translateX(-5%) !important;
  }

  .featured-slide.is-entering.from-left .hero-badge{
    transform:translateX(-16px) !important;
  }

  .featured-slide.is-entering.from-right .hero-badge{
    transform:translateX(16px) !important;
  }

  .featured-slide.is-leaving.to-right .hero-badge{
    transform:translateX(16px) !important;
  }

  .featured-slide.is-leaving.to-left .hero-badge{
    transform:translateX(-16px) !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .featured-slide,
  .featured-slide .hero-badge{
    transform:none !important;
  }
}


/* Smoother Featured text-box movement and a more relaxed transition */
.featured-slide{
  transition:
    opacity 1.25s cubic-bezier(.22,.61,.36,1) !important,
    transform 1.25s cubic-bezier(.22,.61,.36,1) !important;
}

.featured-slide .hero-badge{
  transition:
    opacity .9s cubic-bezier(.22,.61,.36,1) .10s !important,
    transform 1.15s cubic-bezier(.22,.61,.36,1) .04s !important;
}

.featured-slide.is-leaving .hero-badge{
  transition:
    opacity .72s cubic-bezier(.4,0,.2,1) !important,
    transform 1s cubic-bezier(.4,0,.2,1) !important;
  transition-delay:0s !important;
}

/* Reduce badge travel slightly so the movement feels softer */
.featured-slide.is-entering.from-left .hero-badge{
  transform:translateX(-18px) !important;
}

.featured-slide.is-entering.from-right .hero-badge{
  transform:translateX(18px) !important;
}

.featured-slide.is-leaving.to-right .hero-badge{
  transform:translateX(18px) !important;
}

.featured-slide.is-leaving.to-left .hero-badge{
  transform:translateX(-18px) !important;
}

@media(max-width:700px){
  .featured-slide.is-entering.from-left .hero-badge{
    transform:translateX(-12px) !important;
  }

  .featured-slide.is-entering.from-right .hero-badge{
    transform:translateX(12px) !important;
  }

  .featured-slide.is-leaving.to-right .hero-badge{
    transform:translateX(12px) !important;
  }

  .featured-slide.is-leaving.to-left .hero-badge{
    transform:translateX(-12px) !important;
  }
}


/* Explicit direction control for the incoming Featured text box */
.featured-carousel[data-transition-direction="left-to-right"]
.featured-slide.is-entering .hero-badge{
  opacity:0 !important;
  transform:translateX(-18px) !important;
}

.featured-carousel[data-transition-direction="right-to-left"]
.featured-slide.is-entering .hero-badge{
  opacity:0 !important;
  transform:translateX(18px) !important;
}

.featured-carousel[data-transition-direction="left-to-right"]
.featured-slide.is-entering.active .hero-badge,
.featured-carousel[data-transition-direction="right-to-left"]
.featured-slide.is-entering.active .hero-badge{
  opacity:1 !important;
  transform:translateX(0) !important;
}

.featured-carousel[data-transition-direction="left-to-right"]
.featured-slide.is-leaving .hero-badge{
  opacity:0 !important;
  transform:translateX(18px) !important;
}

.featured-carousel[data-transition-direction="right-to-left"]
.featured-slide.is-leaving .hero-badge{
  opacity:0 !important;
  transform:translateX(-18px) !important;
}

@media(max-width:700px){
  .featured-carousel[data-transition-direction="left-to-right"]
  .featured-slide.is-entering .hero-badge{
    transform:translateX(-12px) !important;
  }

  .featured-carousel[data-transition-direction="right-to-left"]
  .featured-slide.is-entering .hero-badge{
    transform:translateX(12px) !important;
  }

  .featured-carousel[data-transition-direction="left-to-right"]
  .featured-slide.is-leaving .hero-badge{
    transform:translateX(12px) !important;
  }

  .featured-carousel[data-transition-direction="right-to-left"]
  .featured-slide.is-leaving .hero-badge{
    transform:translateX(-12px) !important;
  }
}


/* Hard direction lock for the Featured text box */
.featured-slide.badge-from-left .hero-badge{
  opacity:0 !important;
  transform:translateX(-20px) !important;
}

.featured-slide.badge-from-right .hero-badge{
  opacity:0 !important;
  transform:translateX(20px) !important;
}

.featured-slide.is-entering.active:not(.badge-from-left):not(.badge-from-right) .hero-badge{
  opacity:1 !important;
  transform:translateX(0) !important;
}

.featured-slide.badge-to-right .hero-badge{
  opacity:0 !important;
  transform:translateX(20px) !important;
}

.featured-slide.badge-to-left .hero-badge{
  opacity:0 !important;
  transform:translateX(-20px) !important;
}

@media(max-width:700px){
  .featured-slide.badge-from-left .hero-badge{
    transform:translateX(-13px) !important;
  }

  .featured-slide.badge-from-right .hero-badge{
    transform:translateX(13px) !important;
  }

  .featured-slide.badge-to-right .hero-badge{
    transform:translateX(13px) !important;
  }

  .featured-slide.badge-to-left .hero-badge{
    transform:translateX(-13px) !important;
  }
}


/* One-way Featured text animation: no pullback or reverse drift */
.featured-slide.badge-enter-ltr .hero-badge,
.featured-slide.badge-enter-rtl .hero-badge,
.featured-slide.badge-exit-ltr .hero-badge,
.featured-slide.badge-exit-rtl .hero-badge{
  transition:none !important;
}

.featured-slide.badge-enter-ltr .hero-badge{
  animation:kuboBadgeEnterLTR 1.05s cubic-bezier(.22,.61,.36,1) both !important;
}

.featured-slide.badge-enter-rtl .hero-badge{
  animation:kuboBadgeEnterRTL 1.05s cubic-bezier(.22,.61,.36,1) both !important;
}

.featured-slide.badge-exit-ltr .hero-badge{
  animation:kuboBadgeExitLTR .82s cubic-bezier(.4,0,.2,1) both !important;
}

.featured-slide.badge-exit-rtl .hero-badge{
  animation:kuboBadgeExitRTL .82s cubic-bezier(.4,0,.2,1) both !important;
}

@keyframes kuboBadgeEnterLTR{
  from{
    opacity:0;
    transform:translateX(-18px);
  }
  to{
    opacity:1;
    transform:translateX(0);
  }
}

@keyframes kuboBadgeEnterRTL{
  from{
    opacity:0;
    transform:translateX(18px);
  }
  to{
    opacity:1;
    transform:translateX(0);
  }
}

@keyframes kuboBadgeExitLTR{
  from{
    opacity:1;
    transform:translateX(0);
  }
  to{
    opacity:0;
    transform:translateX(18px);
  }
}

@keyframes kuboBadgeExitRTL{
  from{
    opacity:1;
    transform:translateX(0);
  }
  to{
    opacity:0;
    transform:translateX(-18px);
  }
}

@media(max-width:700px){
  @keyframes kuboBadgeEnterLTR{
    from{opacity:0;transform:translateX(-12px)}
    to{opacity:1;transform:translateX(0)}
  }

  @keyframes kuboBadgeEnterRTL{
    from{opacity:0;transform:translateX(12px)}
    to{opacity:1;transform:translateX(0)}
  }

  @keyframes kuboBadgeExitLTR{
    from{opacity:1;transform:translateX(0)}
    to{opacity:0;transform:translateX(12px)}
  }

  @keyframes kuboBadgeExitRTL{
    from{opacity:1;transform:translateX(0)}
    to{opacity:0;transform:translateX(-12px)}
  }
}

@media(prefers-reduced-motion:reduce){
  .featured-slide .hero-badge{
    animation:none !important;
  }
}


/* One-way Featured photo animation with true reversed motion */
.featured-slide.photo-enter-ltr,
.featured-slide.photo-enter-rtl,
.featured-slide.photo-exit-ltr,
.featured-slide.photo-exit-rtl{
  transition:none !important;
  will-change:transform,opacity;
}

.featured-slide.photo-enter-ltr{
  animation:kuboPhotoEnterLTR 1.25s cubic-bezier(.22,.61,.36,1) both !important;
}

.featured-slide.photo-enter-rtl{
  animation:kuboPhotoEnterRTL 1.25s cubic-bezier(.22,.61,.36,1) both !important;
}

.featured-slide.photo-exit-ltr{
  animation:kuboPhotoExitLTR 1.05s cubic-bezier(.4,0,.2,1) both !important;
}

.featured-slide.photo-exit-rtl{
  animation:kuboPhotoExitRTL 1.05s cubic-bezier(.4,0,.2,1) both !important;
}

@keyframes kuboPhotoEnterLTR{
  from{
    opacity:0;
    transform:translateX(-7%);
  }
  to{
    opacity:1;
    transform:translateX(0);
  }
}

@keyframes kuboPhotoEnterRTL{
  from{
    opacity:0;
    transform:translateX(7%);
  }
  to{
    opacity:1;
    transform:translateX(0);
  }
}

@keyframes kuboPhotoExitLTR{
  from{
    opacity:1;
    transform:translateX(0);
  }
  to{
    opacity:0;
    transform:translateX(7%);
  }
}

@keyframes kuboPhotoExitRTL{
  from{
    opacity:1;
    transform:translateX(0);
  }
  to{
    opacity:0;
    transform:translateX(-7%);
  }
}

@media(max-width:700px){
  @keyframes kuboPhotoEnterLTR{
    from{opacity:0;transform:translateX(-5%)}
    to{opacity:1;transform:translateX(0)}
  }

  @keyframes kuboPhotoEnterRTL{
    from{opacity:0;transform:translateX(5%)}
    to{opacity:1;transform:translateX(0)}
  }

  @keyframes kuboPhotoExitLTR{
    from{opacity:1;transform:translateX(0)}
    to{opacity:0;transform:translateX(5%)}
  }

  @keyframes kuboPhotoExitRTL{
    from{opacity:1;transform:translateX(0)}
    to{opacity:0;transform:translateX(-5%)}
  }
}

@media(prefers-reduced-motion:reduce){
  .featured-slide{
    animation:none !important;
  }
}


/* Refined Featured carousel:
   keep each slide fixed, move only the image inside it, and float the badge independently */
.featured-carousel{
  overflow:hidden !important;
}

.featured-slide.photo-enter-ltr,
.featured-slide.photo-enter-rtl,
.featured-slide.photo-exit-ltr,
.featured-slide.photo-exit-rtl{
  animation:none !important;
  transform:none !important;
  transition:none !important;
}

/* Smooth crossfade between fixed slide layers */
.featured-slide.photo-enter-ltr,
.featured-slide.photo-enter-rtl{
  opacity:1 !important;
}

.featured-slide.photo-exit-ltr,
.featured-slide.photo-exit-rtl{
  opacity:0 !important;
  transition:opacity 1.05s cubic-bezier(.4,0,.2,1) !important;
}

/* Move only the image, with extra scale so no hard photo edges appear */
.featured-slide img{
  transform:scale(1.08);
  transform-origin:center center;
  backface-visibility:hidden;
  will-change:transform,opacity;
}

.featured-slide.photo-enter-ltr img{
  animation:kuboImageEnterLTR 1.3s cubic-bezier(.22,.61,.36,1) both !important;
}

.featured-slide.photo-enter-rtl img{
  animation:kuboImageEnterRTL 1.3s cubic-bezier(.22,.61,.36,1) both !important;
}

.featured-slide.photo-exit-ltr img{
  animation:kuboImageExitLTR 1.05s cubic-bezier(.4,0,.2,1) both !important;
}

.featured-slide.photo-exit-rtl img{
  animation:kuboImageExitRTL 1.05s cubic-bezier(.4,0,.2,1) both !important;
}

@keyframes kuboImageEnterLTR{
  from{
    opacity:.35;
    transform:scale(1.10) translateX(-2.2%);
  }
  to{
    opacity:1;
    transform:scale(1.08) translateX(0);
  }
}

@keyframes kuboImageEnterRTL{
  from{
    opacity:.35;
    transform:scale(1.10) translateX(2.2%);
  }
  to{
    opacity:1;
    transform:scale(1.08) translateX(0);
  }
}

@keyframes kuboImageExitLTR{
  from{
    opacity:1;
    transform:scale(1.08) translateX(0);
  }
  to{
    opacity:.2;
    transform:scale(1.10) translateX(2.2%);
  }
}

@keyframes kuboImageExitRTL{
  from{
    opacity:1;
    transform:scale(1.08) translateX(0);
  }
  to{
    opacity:.2;
    transform:scale(1.10) translateX(-2.2%);
  }
}

/* Make the Featured label feel like a separate floating card */
.featured-slide .hero-badge{
  z-index:6 !important;
  box-shadow:
    0 16px 34px rgba(0,0,0,.18),
    0 3px 10px rgba(0,0,0,.08) !important;
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  transform-origin:center center;
  will-change:transform,opacity;
}

.featured-slide.badge-enter-ltr .hero-badge{
  animation:kuboBadgeFloatEnterLTR 1.05s cubic-bezier(.22,.61,.36,1) both !important;
}

.featured-slide.badge-enter-rtl .hero-badge{
  animation:kuboBadgeFloatEnterRTL 1.05s cubic-bezier(.22,.61,.36,1) both !important;
}

.featured-slide.badge-exit-ltr .hero-badge{
  animation:kuboBadgeFloatExitLTR .82s cubic-bezier(.4,0,.2,1) both !important;
}

.featured-slide.badge-exit-rtl .hero-badge{
  animation:kuboBadgeFloatExitRTL .82s cubic-bezier(.4,0,.2,1) both !important;
}

@keyframes kuboBadgeFloatEnterLTR{
  from{
    opacity:0;
    transform:translate3d(-18px,8px,0) scale(.97);
  }
  to{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
  }
}

@keyframes kuboBadgeFloatEnterRTL{
  from{
    opacity:0;
    transform:translate3d(18px,8px,0) scale(.97);
  }
  to{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
  }
}

@keyframes kuboBadgeFloatExitLTR{
  from{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
  }
  to{
    opacity:0;
    transform:translate3d(18px,-5px,0) scale(.98);
  }
}

@keyframes kuboBadgeFloatExitRTL{
  from{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
  }
  to{
    opacity:0;
    transform:translate3d(-18px,-5px,0) scale(.98);
  }
}

@media(max-width:700px){
  @keyframes kuboImageEnterLTR{
    from{opacity:.35;transform:scale(1.09) translateX(-1.7%)}
    to{opacity:1;transform:scale(1.07) translateX(0)}
  }

  @keyframes kuboImageEnterRTL{
    from{opacity:.35;transform:scale(1.09) translateX(1.7%)}
    to{opacity:1;transform:scale(1.07) translateX(0)}
  }

  @keyframes kuboImageExitLTR{
    from{opacity:1;transform:scale(1.07) translateX(0)}
    to{opacity:.2;transform:scale(1.09) translateX(1.7%)}
  }

  @keyframes kuboImageExitRTL{
    from{opacity:1;transform:scale(1.07) translateX(0)}
    to{opacity:.2;transform:scale(1.09) translateX(-1.7%)}
  }
}

@media(prefers-reduced-motion:reduce){
  .featured-slide img,
  .featured-slide .hero-badge{
    animation:none !important;
    transform:none !important;
  }
}


/* Final Featured-carousel refinement:
   fixed image scale, smooth directional fade, and independent floating badge */
.featured-slide img{
  transform:scale(1.065) translate3d(0,0,0) !important;
  transform-origin:center center !important;
}

/* Remove the abrupt zoom-out by keeping scale constant from start to finish */
.featured-slide.photo-enter-ltr img{
  animation:kuboImageEnterLTRFixed 1.3s cubic-bezier(.22,.61,.36,1) both !important;
}

.featured-slide.photo-enter-rtl img{
  animation:kuboImageEnterRTLFixed 1.3s cubic-bezier(.22,.61,.36,1) both !important;
}

.featured-slide.photo-exit-ltr img{
  animation:kuboImageExitLTRFixed 1.05s cubic-bezier(.4,0,.2,1) both !important;
}

.featured-slide.photo-exit-rtl img{
  animation:kuboImageExitRTLFixed 1.05s cubic-bezier(.4,0,.2,1) both !important;
}

@keyframes kuboImageEnterLTRFixed{
  from{
    opacity:.28;
    transform:scale(1.065) translate3d(-2%,0,0);
  }
  to{
    opacity:1;
    transform:scale(1.065) translate3d(0,0,0);
  }
}

@keyframes kuboImageEnterRTLFixed{
  from{
    opacity:.28;
    transform:scale(1.065) translate3d(2%,0,0);
  }
  to{
    opacity:1;
    transform:scale(1.065) translate3d(0,0,0);
  }
}

@keyframes kuboImageExitLTRFixed{
  from{
    opacity:1;
    transform:scale(1.065) translate3d(0,0,0);
  }
  to{
    opacity:.18;
    transform:scale(1.065) translate3d(2%,0,0);
  }
}

@keyframes kuboImageExitRTLFixed{
  from{
    opacity:1;
    transform:scale(1.065) translate3d(0,0,0);
  }
  to{
    opacity:.18;
    transform:scale(1.065) translate3d(-2%,0,0);
  }
}

/* Restore a clear directional slide-fade for the floating text box */
.featured-slide.badge-enter-ltr .hero-badge{
  animation:kuboBadgeEnterLTRFinal 1.05s cubic-bezier(.22,.61,.36,1) both !important;
}

.featured-slide.badge-enter-rtl .hero-badge{
  animation:kuboBadgeEnterRTLFinal 1.05s cubic-bezier(.22,.61,.36,1) both !important;
}

.featured-slide.badge-exit-ltr .hero-badge{
  animation:kuboBadgeExitLTRFinal .85s cubic-bezier(.4,0,.2,1) both !important;
}

.featured-slide.badge-exit-rtl .hero-badge{
  animation:kuboBadgeExitRTLFinal .85s cubic-bezier(.4,0,.2,1) both !important;
}

@keyframes kuboBadgeEnterLTRFinal{
  from{
    opacity:0;
    transform:translate3d(-20px,0,0);
  }
  to{
    opacity:1;
    transform:translate3d(0,0,0);
  }
}

@keyframes kuboBadgeEnterRTLFinal{
  from{
    opacity:0;
    transform:translate3d(20px,0,0);
  }
  to{
    opacity:1;
    transform:translate3d(0,0,0);
  }
}

@keyframes kuboBadgeExitLTRFinal{
  from{
    opacity:1;
    transform:translate3d(0,0,0);
  }
  to{
    opacity:0;
    transform:translate3d(20px,0,0);
  }
}

@keyframes kuboBadgeExitRTLFinal{
  from{
    opacity:1;
    transform:translate3d(0,0,0);
  }
  to{
    opacity:0;
    transform:translate3d(-20px,0,0);
  }
}

@media(max-width:700px){
  @keyframes kuboImageEnterLTRFixed{
    from{opacity:.28;transform:scale(1.055) translate3d(-1.6%,0,0)}
    to{opacity:1;transform:scale(1.055) translate3d(0,0,0)}
  }

  @keyframes kuboImageEnterRTLFixed{
    from{opacity:.28;transform:scale(1.055) translate3d(1.6%,0,0)}
    to{opacity:1;transform:scale(1.055) translate3d(0,0,0)}
  }

  @keyframes kuboImageExitLTRFixed{
    from{opacity:1;transform:scale(1.055) translate3d(0,0,0)}
    to{opacity:.18;transform:scale(1.055) translate3d(1.6%,0,0)}
  }

  @keyframes kuboImageExitRTLFixed{
    from{opacity:1;transform:scale(1.055) translate3d(0,0,0)}
    to{opacity:.18;transform:scale(1.055) translate3d(-1.6%,0,0)}
  }

  @keyframes kuboBadgeEnterLTRFinal{
    from{opacity:0;transform:translate3d(-14px,0,0)}
    to{opacity:1;transform:translate3d(0,0,0)}
  }

  @keyframes kuboBadgeEnterRTLFinal{
    from{opacity:0;transform:translate3d(14px,0,0)}
    to{opacity:1;transform:translate3d(0,0,0)}
  }

  @keyframes kuboBadgeExitLTRFinal{
    from{opacity:1;transform:translate3d(0,0,0)}
    to{opacity:0;transform:translate3d(14px,0,0)}
  }

  @keyframes kuboBadgeExitRTLFinal{
    from{opacity:1;transform:translate3d(0,0,0)}
    to{opacity:0;transform:translate3d(-14px,0,0)}
  }
}


/* More dynamic directional slide-and-fade for the Featured text box */
.featured-slide.badge-enter-ltr .hero-badge{
  animation:kuboBadgeEnterLTRDynamic 1.08s cubic-bezier(.18,.72,.28,1) both !important;
}

.featured-slide.badge-enter-rtl .hero-badge{
  animation:kuboBadgeEnterRTLDynamic 1.08s cubic-bezier(.18,.72,.28,1) both !important;
}

.featured-slide.badge-exit-ltr .hero-badge{
  animation:kuboBadgeExitLTRDynamic .78s cubic-bezier(.4,0,.2,1) both !important;
}

.featured-slide.badge-exit-rtl .hero-badge{
  animation:kuboBadgeExitRTLDynamic .78s cubic-bezier(.4,0,.2,1) both !important;
}

@keyframes kuboBadgeEnterLTRDynamic{
  from{
    opacity:0;
    transform:translate3d(-38px,0,0);
  }
  to{
    opacity:1;
    transform:translate3d(0,0,0);
  }
}

@keyframes kuboBadgeEnterRTLDynamic{
  from{
    opacity:0;
    transform:translate3d(38px,0,0);
  }
  to{
    opacity:1;
    transform:translate3d(0,0,0);
  }
}

@keyframes kuboBadgeExitLTRDynamic{
  from{
    opacity:1;
    transform:translate3d(0,0,0);
  }
  to{
    opacity:0;
    transform:translate3d(38px,0,0);
  }
}

@keyframes kuboBadgeExitRTLDynamic{
  from{
    opacity:1;
    transform:translate3d(0,0,0);
  }
  to{
    opacity:0;
    transform:translate3d(-38px,0,0);
  }
}

@media(max-width:700px){
  @keyframes kuboBadgeEnterLTRDynamic{
    from{opacity:0;transform:translate3d(-26px,0,0)}
    to{opacity:1;transform:translate3d(0,0,0)}
  }

  @keyframes kuboBadgeEnterRTLDynamic{
    from{opacity:0;transform:translate3d(26px,0,0)}
    to{opacity:1;transform:translate3d(0,0,0)}
  }

  @keyframes kuboBadgeExitLTRDynamic{
    from{opacity:1;transform:translate3d(0,0,0)}
    to{opacity:0;transform:translate3d(26px,0,0)}
  }

  @keyframes kuboBadgeExitRTLDynamic{
    from{opacity:1;transform:translate3d(0,0,0)}
    to{opacity:0;transform:translate3d(-26px,0,0)}
  }
}


/* FINAL FEATURED BADGE ANIMATION — directional slide + fade */
.featured-carousel .featured-slide .hero-badge{
  opacity:0;
  transform:translate3d(0,0,0);
  transition:none !important;
  animation:none;
}

.featured-carousel .featured-slide.active:not(.is-entering):not(.is-leaving) .hero-badge{
  opacity:1;
  transform:translate3d(0,0,0);
}

.featured-carousel .featured-slide.badge-enter-ltr .hero-badge{
  animation:kuboBadgeEnterLTRClean 1.05s cubic-bezier(.18,.72,.28,1) both !important;
}

.featured-carousel .featured-slide.badge-enter-rtl .hero-badge{
  animation:kuboBadgeEnterRTLClean 1.05s cubic-bezier(.18,.72,.28,1) both !important;
}

.featured-carousel .featured-slide.badge-exit-ltr .hero-badge{
  animation:kuboBadgeExitLTRClean .78s cubic-bezier(.4,0,.2,1) both !important;
}

.featured-carousel .featured-slide.badge-exit-rtl .hero-badge{
  animation:kuboBadgeExitRTLClean .78s cubic-bezier(.4,0,.2,1) both !important;
}

@keyframes kuboBadgeEnterLTRClean{
  0%{
    opacity:0;
    transform:translate3d(-42px,0,0);
  }
  100%{
    opacity:1;
    transform:translate3d(0,0,0);
  }
}

@keyframes kuboBadgeEnterRTLClean{
  0%{
    opacity:0;
    transform:translate3d(42px,0,0);
  }
  100%{
    opacity:1;
    transform:translate3d(0,0,0);
  }
}

@keyframes kuboBadgeExitLTRClean{
  0%{
    opacity:1;
    transform:translate3d(0,0,0);
  }
  100%{
    opacity:0;
    transform:translate3d(42px,0,0);
  }
}

@keyframes kuboBadgeExitRTLClean{
  0%{
    opacity:1;
    transform:translate3d(0,0,0);
  }
  100%{
    opacity:0;
    transform:translate3d(-42px,0,0);
  }
}

@media(max-width:700px){
  @keyframes kuboBadgeEnterLTRClean{
    0%{opacity:0;transform:translate3d(-28px,0,0)}
    100%{opacity:1;transform:translate3d(0,0,0)}
  }

  @keyframes kuboBadgeEnterRTLClean{
    0%{opacity:0;transform:translate3d(28px,0,0)}
    100%{opacity:1;transform:translate3d(0,0,0)}
  }

  @keyframes kuboBadgeExitLTRClean{
    0%{opacity:1;transform:translate3d(0,0,0)}
    100%{opacity:0;transform:translate3d(28px,0,0)}
  }

  @keyframes kuboBadgeExitRTLClean{
    0%{opacity:1;transform:translate3d(0,0,0)}
    100%{opacity:0;transform:translate3d(-28px,0,0)}
  }
}

@media(prefers-reduced-motion:reduce){
  .featured-carousel .featured-slide .hero-badge{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}


/* Sequenced Featured badge transition:
   outgoing leaves first, incoming replaces it second */
.featured-carousel .featured-slide.badge-waiting .hero-badge{
  opacity:0 !important;
  animation:none !important;
  transition:none !important;
  pointer-events:none;
}

.featured-carousel .featured-slide.badge-enter-ltr .hero-badge{
  animation:kuboBadgeEdgeEnterLTR .82s cubic-bezier(.18,.72,.28,1) both !important;
}

.featured-carousel .featured-slide.badge-enter-rtl .hero-badge{
  animation:kuboBadgeEdgeEnterRTL .82s cubic-bezier(.18,.72,.28,1) both !important;
}

.featured-carousel .featured-slide.badge-exit-ltr .hero-badge{
  animation:kuboBadgeEdgeExitLTR .52s cubic-bezier(.4,0,.2,1) both !important;
}

.featured-carousel .featured-slide.badge-exit-rtl .hero-badge{
  animation:kuboBadgeEdgeExitRTL .52s cubic-bezier(.4,0,.2,1) both !important;
}

/* Desktop edge travel:
   badge resting position is ~24px from the photo edge,
   so 430px clears most hero widths without exposing hard edges. */
@keyframes kuboBadgeEdgeEnterLTR{
  from{
    opacity:0;
    transform:translate3d(-430px,0,0);
  }
  to{
    opacity:1;
    transform:translate3d(0,0,0);
  }
}

@keyframes kuboBadgeEdgeEnterRTL{
  from{
    opacity:0;
    transform:translate3d(430px,0,0);
  }
  to{
    opacity:1;
    transform:translate3d(0,0,0);
  }
}

@keyframes kuboBadgeEdgeExitLTR{
  from{
    opacity:1;
    transform:translate3d(0,0,0);
  }
  to{
    opacity:0;
    transform:translate3d(430px,0,0);
  }
}

@keyframes kuboBadgeEdgeExitRTL{
  from{
    opacity:1;
    transform:translate3d(0,0,0);
  }
  to{
    opacity:0;
    transform:translate3d(-430px,0,0);
  }
}

@media(max-width:700px){
  @keyframes kuboBadgeEdgeEnterLTR{
    from{opacity:0;transform:translate3d(calc(-100vw + 54px),0,0)}
    to{opacity:1;transform:translate3d(0,0,0)}
  }

  @keyframes kuboBadgeEdgeEnterRTL{
    from{opacity:0;transform:translate3d(calc(100vw - 54px),0,0)}
    to{opacity:1;transform:translate3d(0,0,0)}
  }

  @keyframes kuboBadgeEdgeExitLTR{
    from{opacity:1;transform:translate3d(0,0,0)}
    to{opacity:0;transform:translate3d(calc(100vw - 54px),0,0)}
  }

  @keyframes kuboBadgeEdgeExitRTL{
    from{opacity:1;transform:translate3d(0,0,0)}
    to{opacity:0;transform:translate3d(calc(-100vw + 54px),0,0)}
  }
}

@media(prefers-reduced-motion:reduce){
  .featured-carousel .featured-slide .hero-badge{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}


/* Final Featured badge motion:
   short outgoing travel + clearly visible delayed incoming slide */
.featured-carousel .featured-slide.badge-enter-ltr .hero-badge{
  opacity:0;
  animation:kuboBadgeSoftEnterLTR .78s cubic-bezier(.18,.72,.28,1) .18s both !important;
}

.featured-carousel .featured-slide.badge-enter-rtl .hero-badge{
  opacity:0;
  animation:kuboBadgeSoftEnterRTL .78s cubic-bezier(.18,.72,.28,1) .18s both !important;
}

.featured-carousel .featured-slide.badge-exit-ltr .hero-badge{
  animation:kuboBadgeSoftExitLTR .46s cubic-bezier(.4,0,.2,1) both !important;
}

.featured-carousel .featured-slide.badge-exit-rtl .hero-badge{
  animation:kuboBadgeSoftExitRTL .46s cubic-bezier(.4,0,.2,1) both !important;
}

@keyframes kuboBadgeSoftEnterLTR{
  0%{
    opacity:0;
    transform:translate3d(-72px,0,0);
  }
  100%{
    opacity:1;
    transform:translate3d(0,0,0);
  }
}

@keyframes kuboBadgeSoftEnterRTL{
  0%{
    opacity:0;
    transform:translate3d(72px,0,0);
  }
  100%{
    opacity:1;
    transform:translate3d(0,0,0);
  }
}

@keyframes kuboBadgeSoftExitLTR{
  0%{
    opacity:1;
    transform:translate3d(0,0,0);
  }
  100%{
    opacity:0;
    transform:translate3d(72px,0,0);
  }
}

@keyframes kuboBadgeSoftExitRTL{
  0%{
    opacity:1;
    transform:translate3d(0,0,0);
  }
  100%{
    opacity:0;
    transform:translate3d(-72px,0,0);
  }
}

@media(max-width:700px){
  @keyframes kuboBadgeSoftEnterLTR{
    0%{opacity:0;transform:translate3d(-46px,0,0)}
    100%{opacity:1;transform:translate3d(0,0,0)}
  }

  @keyframes kuboBadgeSoftEnterRTL{
    0%{opacity:0;transform:translate3d(46px,0,0)}
    100%{opacity:1;transform:translate3d(0,0,0)}
  }

  @keyframes kuboBadgeSoftExitLTR{
    0%{opacity:1;transform:translate3d(0,0,0)}
    100%{opacity:0;transform:translate3d(46px,0,0)}
  }

  @keyframes kuboBadgeSoftExitRTL{
    0%{opacity:1;transform:translate3d(0,0,0)}
    100%{opacity:0;transform:translate3d(-46px,0,0)}
  }
}


/* Featured text box: intentionally static */
.featured-carousel .featured-slide .hero-badge,
.featured-carousel .featured-slide.active .hero-badge,
.featured-carousel .featured-slide.is-entering .hero-badge,
.featured-carousel .featured-slide.is-leaving .hero-badge,
.featured-carousel .featured-slide[class*="badge-"] .hero-badge{
  animation:none !important;
  transition:none !important;
  transform:none !important;
}

.featured-carousel .featured-slide.active .hero-badge,
.featured-carousel .featured-slide.is-entering.active .hero-badge{
  opacity:1 !important;
}

.featured-carousel .featured-slide.is-leaving .hero-badge,
.featured-carousel .featured-slide:not(.active) .hero-badge{
  opacity:0 !important;
}


/* Featured photos: directional slide + blend transition
   The text box remains completely static. */
.featured-carousel{
  overflow:hidden !important;
  isolation:isolate;
}

.featured-carousel .featured-slide{
  
  transition:none !important;
  will-change:opacity;
}

/* Keep the image slightly oversized at one constant scale so no hard edges appear. */
.featured-carousel .featured-slide img{
  transform:scale(1.06) translate3d(0,0,0) !important;
  transform-origin:center center !important;
  backface-visibility:hidden;
  will-change:transform,opacity;
}

/* Incoming photo: blend in while sliding from the correct side. */
.featured-carousel .featured-slide.photo-enter-ltr{
  opacity:1 !important;
  animation:none !important;
}

.featured-carousel .featured-slide.photo-enter-rtl{
  opacity:1 !important;
  animation:none !important;
}

.featured-carousel .featured-slide.photo-enter-ltr img{
  animation:kuboPhotoSlideMixEnterLTR 1.18s cubic-bezier(.22,.61,.36,1) both !important;
}

.featured-carousel .featured-slide.photo-enter-rtl img{
  animation:kuboPhotoSlideMixEnterRTL 1.18s cubic-bezier(.22,.61,.36,1) both !important;
}

/* Outgoing photo: slide away gently while blending out underneath. */
.featured-carousel .featured-slide.photo-exit-ltr{
  opacity:1 !important;
  animation:none !important;
}

.featured-carousel .featured-slide.photo-exit-rtl{
  opacity:1 !important;
  animation:none !important;
}

.featured-carousel .featured-slide.photo-exit-ltr img{
  animation:kuboPhotoSlideMixExitLTR 1.02s cubic-bezier(.4,0,.2,1) both !important;
}

.featured-carousel .featured-slide.photo-exit-rtl img{
  animation:kuboPhotoSlideMixExitRTL 1.02s cubic-bezier(.4,0,.2,1) both !important;
}

@keyframes kuboPhotoSlideMixEnterLTR{
  0%{
    opacity:0;
    transform:scale(1.06) translate3d(-4.5%,0,0);
  }
  35%{
    opacity:.55;
  }
  100%{
    opacity:1;
    transform:scale(1.06) translate3d(0,0,0);
  }
}

@keyframes kuboPhotoSlideMixEnterRTL{
  0%{
    opacity:0;
    transform:scale(1.06) translate3d(4.5%,0,0);
  }
  35%{
    opacity:.55;
  }
  100%{
    opacity:1;
    transform:scale(1.06) translate3d(0,0,0);
  }
}

@keyframes kuboPhotoSlideMixExitLTR{
  0%{
    opacity:1;
    transform:scale(1.06) translate3d(0,0,0);
  }
  65%{
    opacity:.42;
  }
  100%{
    opacity:0;
    transform:scale(1.06) translate3d(4.5%,0,0);
  }
}

@keyframes kuboPhotoSlideMixExitRTL{
  0%{
    opacity:1;
    transform:scale(1.06) translate3d(0,0,0);
  }
  65%{
    opacity:.42;
  }
  100%{
    opacity:0;
    transform:scale(1.06) translate3d(-4.5%,0,0);
  }
}

@media(max-width:700px){
  .featured-carousel .featured-slide img{
    transform:scale(1.05) translate3d(0,0,0) !important;
  }

  @keyframes kuboPhotoSlideMixEnterLTR{
    0%{opacity:0;transform:scale(1.05) translate3d(-3.2%,0,0)}
    35%{opacity:.55}
    100%{opacity:1;transform:scale(1.05) translate3d(0,0,0)}
  }

  @keyframes kuboPhotoSlideMixEnterRTL{
    0%{opacity:0;transform:scale(1.05) translate3d(3.2%,0,0)}
    35%{opacity:.55}
    100%{opacity:1;transform:scale(1.05) translate3d(0,0,0)}
  }

  @keyframes kuboPhotoSlideMixExitLTR{
    0%{opacity:1;transform:scale(1.05) translate3d(0,0,0)}
    65%{opacity:.42}
    100%{opacity:0;transform:scale(1.05) translate3d(3.2%,0,0)}
  }

  @keyframes kuboPhotoSlideMixExitRTL{
    0%{opacity:1;transform:scale(1.05) translate3d(0,0,0)}
    65%{opacity:.42}
    100%{opacity:0;transform:scale(1.05) translate3d(-3.2%,0,0)}
  }
}

/* Preserve the requested static Featured text box. */
.featured-carousel .featured-slide .hero-badge,
.featured-carousel .featured-slide.active .hero-badge,
.featured-carousel .featured-slide.is-entering .hero-badge,
.featured-carousel .featured-slide.is-leaving .hero-badge,
.featured-carousel .featured-slide[class*="badge-"] .hero-badge{
  animation:none !important;
  transition:none !important;
  transform:none !important;
}

.featured-carousel .featured-slide.active .hero-badge,
.featured-carousel .featured-slide.is-entering.active .hero-badge{
  opacity:1 !important;
}

.featured-carousel .featured-slide.is-leaving .hero-badge,
.featured-carousel .featured-slide:not(.active) .hero-badge{
  opacity:0 !important;
}

@media(prefers-reduced-motion:reduce){
  .featured-carousel .featured-slide img{
    animation:none !important;
    transform:scale(1.06) !important;
  }
}


/* WORKING Featured photo slide + mix
   Animate the slide layer itself so horizontal movement is unmistakable. */
.featured-carousel .featured-slide.photo-enter-ltr,
.featured-carousel .featured-slide.photo-enter-rtl,
.featured-carousel .featured-slide.photo-exit-ltr,
.featured-carousel .featured-slide.photo-exit-rtl{
  transition:none !important;
  will-change:transform,opacity;
}

/* Keep image scale fixed; the slide container provides the movement. */
.featured-carousel .featured-slide img{
  animation:none !important;
  transform:scale(1.075) !important;
  transform-origin:center center !important;
}

/* Next recipe: incoming from left, outgoing to right. */
.featured-carousel .featured-slide.photo-enter-ltr{
  animation:kuboSlideMixLayerEnterLTR 1.18s cubic-bezier(.22,.61,.36,1) both !important;
}

.featured-carousel .featured-slide.photo-exit-ltr{
  animation:kuboSlideMixLayerExitLTR 1.02s cubic-bezier(.4,0,.2,1) both !important;
}

/* Previous recipe: incoming from right, outgoing to left. */
.featured-carousel .featured-slide.photo-enter-rtl{
  animation:kuboSlideMixLayerEnterRTL 1.18s cubic-bezier(.22,.61,.36,1) both !important;
}

.featured-carousel .featured-slide.photo-exit-rtl{
  animation:kuboSlideMixLayerExitRTL 1.02s cubic-bezier(.4,0,.2,1) both !important;
}

@keyframes kuboSlideMixLayerEnterLTR{
  0%{
    opacity:0;
    transform:translate3d(-6%,0,0);
  }
  42%{
    opacity:.62;
  }
  100%{
    opacity:1;
    transform:translate3d(0,0,0);
  }
}

@keyframes kuboSlideMixLayerExitLTR{
  0%{
    opacity:1;
    transform:translate3d(0,0,0);
  }
  58%{
    opacity:.45;
  }
  100%{
    opacity:0;
    transform:translate3d(6%,0,0);
  }
}

@keyframes kuboSlideMixLayerEnterRTL{
  0%{
    opacity:0;
    transform:translate3d(6%,0,0);
  }
  42%{
    opacity:.62;
  }
  100%{
    opacity:1;
    transform:translate3d(0,0,0);
  }
}

@keyframes kuboSlideMixLayerExitRTL{
  0%{
    opacity:1;
    transform:translate3d(0,0,0);
  }
  58%{
    opacity:.45;
  }
  100%{
    opacity:0;
    transform:translate3d(-6%,0,0);
  }
}

@media(max-width:700px){
  .featured-carousel .featured-slide img{
    transform:scale(1.065) !important;
  }

  @keyframes kuboSlideMixLayerEnterLTR{
    0%{opacity:0;transform:translate3d(-4.5%,0,0)}
    42%{opacity:.62}
    100%{opacity:1;transform:translate3d(0,0,0)}
  }

  @keyframes kuboSlideMixLayerExitLTR{
    0%{opacity:1;transform:translate3d(0,0,0)}
    58%{opacity:.45}
    100%{opacity:0;transform:translate3d(4.5%,0,0)}
  }

  @keyframes kuboSlideMixLayerEnterRTL{
    0%{opacity:0;transform:translate3d(4.5%,0,0)}
    42%{opacity:.62}
    100%{opacity:1;transform:translate3d(0,0,0)}
  }

  @keyframes kuboSlideMixLayerExitRTL{
    0%{opacity:1;transform:translate3d(0,0,0)}
    58%{opacity:.45}
    100%{opacity:0;transform:translate3d(-4.5%,0,0)}
  }
}

/* Text box remains static as requested. */
.featured-carousel .featured-slide .hero-badge{
  animation:none !important;
  transition:none !important;
  transform:none !important;
}


/* TRUE Featured directional slide + mix */
.featured-carousel{
  overflow:hidden !important;
  position:relative;
  isolation:isolate;
}

.featured-carousel .featured-slide{
  transition:none !important;
  will-change:transform,opacity;
}

.featured-carousel .featured-slide img{
  animation:none !important;
  transform:scale(1.08) !important;
  transform-origin:center center !important;
}

/* Forward / next: new photo from left, current photo toward right */
.featured-carousel .featured-slide.photo-enter-ltr{
  animation:kuboTrueEnterFromLeft 1.2s cubic-bezier(.22,.61,.36,1) both !important;
}

.featured-carousel .featured-slide.photo-exit-ltr{
  animation:kuboTrueExitToRight 1.05s cubic-bezier(.4,0,.2,1) both !important;
}

/* Backward / previous: new photo from right, current photo toward left */
.featured-carousel .featured-slide.photo-enter-rtl{
  animation:kuboTrueEnterFromRight 1.2s cubic-bezier(.22,.61,.36,1) both !important;
}

.featured-carousel .featured-slide.photo-exit-rtl{
  animation:kuboTrueExitToLeft 1.05s cubic-bezier(.4,0,.2,1) both !important;
}

@keyframes kuboTrueEnterFromLeft{
  0%{
    opacity:0;
    transform:translate3d(-9%,0,0);
  }
  45%{
    opacity:.65;
  }
  100%{
    opacity:1;
    transform:translate3d(0,0,0);
  }
}

@keyframes kuboTrueExitToRight{
  0%{
    opacity:1;
    transform:translate3d(0,0,0);
  }
  55%{
    opacity:.5;
  }
  100%{
    opacity:0;
    transform:translate3d(9%,0,0);
  }
}

@keyframes kuboTrueEnterFromRight{
  0%{
    opacity:0;
    transform:translate3d(9%,0,0);
  }
  45%{
    opacity:.65;
  }
  100%{
    opacity:1;
    transform:translate3d(0,0,0);
  }
}

@keyframes kuboTrueExitToLeft{
  0%{
    opacity:1;
    transform:translate3d(0,0,0);
  }
  55%{
    opacity:.5;
  }
  100%{
    opacity:0;
    transform:translate3d(-9%,0,0);
  }
}

/* Text box stays static. */
.featured-carousel .featured-slide .hero-badge{
  animation:none !important;
  transition:none !important;
  transform:none !important;
}

@media(max-width:700px){
  .featured-carousel .featured-slide img{
    transform:scale(1.07) !important;
  }

  @keyframes kuboTrueEnterFromLeft{
    0%{opacity:0;transform:translate3d(-7%,0,0)}
    45%{opacity:.65}
    100%{opacity:1;transform:translate3d(0,0,0)}
  }

  @keyframes kuboTrueExitToRight{
    0%{opacity:1;transform:translate3d(0,0,0)}
    55%{opacity:.5}
    100%{opacity:0;transform:translate3d(7%,0,0)}
  }

  @keyframes kuboTrueEnterFromRight{
    0%{opacity:0;transform:translate3d(7%,0,0)}
    45%{opacity:.65}
    100%{opacity:1;transform:translate3d(0,0,0)}
  }

  @keyframes kuboTrueExitToLeft{
    0%{opacity:1;transform:translate3d(0,0,0)}
    55%{opacity:.5}
    100%{opacity:0;transform:translate3d(-7%,0,0)}
  }
}


/* Dedicated Featured photo motion layer.
   This wrapper is untouched by all legacy slide/image transform overrides. */
.featured-carousel .featured-photo-motion{
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:1;
  pointer-events:none;
  transform:translate3d(0,0,0);
  opacity:1;
  will-change:transform,opacity;
}

.featured-carousel .featured-photo-motion > img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  animation:none !important;
  transform:scale(1.075) !important;
  transform-origin:center center !important;
}

/* Keep badge and carousel controls above the photo wrapper. */
.featured-carousel .hero-badge{
  z-index:5 !important;
}

.featured-carousel .featured-dots{
  z-index:7 !important;
}

/* Next recipe: incoming photo moves left to right; outgoing follows right. */
.featured-carousel .featured-slide.photo-enter-ltr .featured-photo-motion{
  animation:kuboWrapperEnterLTR 1.2s cubic-bezier(.22,.61,.36,1) both !important;
}

.featured-carousel .featured-slide.photo-exit-ltr .featured-photo-motion{
  animation:kuboWrapperExitLTR 1.04s cubic-bezier(.4,0,.2,1) both !important;
}

/* Previous recipe: exact reverse. */
.featured-carousel .featured-slide.photo-enter-rtl .featured-photo-motion{
  animation:kuboWrapperEnterRTL 1.2s cubic-bezier(.22,.61,.36,1) both !important;
}

.featured-carousel .featured-slide.photo-exit-rtl .featured-photo-motion{
  animation:kuboWrapperExitRTL 1.04s cubic-bezier(.4,0,.2,1) both !important;
}

@keyframes kuboWrapperEnterLTR{
  0%{
    opacity:0;
    transform:translate3d(-10%,0,0);
  }
  45%{
    opacity:.68;
  }
  100%{
    opacity:1;
    transform:translate3d(0,0,0);
  }
}

@keyframes kuboWrapperExitLTR{
  0%{
    opacity:1;
    transform:translate3d(0,0,0);
  }
  55%{
    opacity:.48;
  }
  100%{
    opacity:0;
    transform:translate3d(10%,0,0);
  }
}

@keyframes kuboWrapperEnterRTL{
  0%{
    opacity:0;
    transform:translate3d(10%,0,0);
  }
  45%{
    opacity:.68;
  }
  100%{
    opacity:1;
    transform:translate3d(0,0,0);
  }
}

@keyframes kuboWrapperExitRTL{
  0%{
    opacity:1;
    transform:translate3d(0,0,0);
  }
  55%{
    opacity:.48;
  }
  100%{
    opacity:0;
    transform:translate3d(-10%,0,0);
  }
}

@media(max-width:700px){
  .featured-carousel .featured-photo-motion > img{
    transform:scale(1.065) !important;
  }

  @keyframes kuboWrapperEnterLTR{
    0%{opacity:0;transform:translate3d(-8%,0,0)}
    45%{opacity:.68}
    100%{opacity:1;transform:translate3d(0,0,0)}
  }

  @keyframes kuboWrapperExitLTR{
    0%{opacity:1;transform:translate3d(0,0,0)}
    55%{opacity:.48}
    100%{opacity:0;transform:translate3d(8%,0,0)}
  }

  @keyframes kuboWrapperEnterRTL{
    0%{opacity:0;transform:translate3d(8%,0,0)}
    45%{opacity:.68}
    100%{opacity:1;transform:translate3d(0,0,0)}
  }

  @keyframes kuboWrapperExitRTL{
    0%{opacity:1;transform:translate3d(0,0,0)}
    55%{opacity:.48}
    100%{opacity:0;transform:translate3d(-8%,0,0)}
  }
}

/* Featured text box remains static. */
.featured-carousel .featured-slide .hero-badge{
  animation:none !important;
  transition:none !important;
  transform:none !important;
}


/* Remove side gaps during Featured-photo movement.
   Keep the wrapper fixed and slide the oversized image inside it. */
.featured-carousel .featured-slide.photo-enter-ltr .featured-photo-motion,
.featured-carousel .featured-slide.photo-enter-rtl .featured-photo-motion,
.featured-carousel .featured-slide.photo-exit-ltr .featured-photo-motion,
.featured-carousel .featured-slide.photo-exit-rtl .featured-photo-motion{
  animation:none !important;
  transform:none !important;
  opacity:1 !important;
}

/* Extra image coverage prevents the carousel background from showing. */
.featured-carousel .featured-photo-motion > img{
  width:112% !important;
  height:112% !important;
  max-width:none !important;
  position:absolute;
  left:-6%;
  top:-6%;
  object-fit:cover;
  transform:translate3d(0,0,0) !important;
  will-change:transform,opacity;
}

/* Next recipe: new image comes from left, old image moves right. */
.featured-carousel .featured-slide.photo-enter-ltr .featured-photo-motion > img{
  animation:kuboCoveredEnterLTR 1.2s cubic-bezier(.22,.61,.36,1) both !important;
}

.featured-carousel .featured-slide.photo-exit-ltr .featured-photo-motion > img{
  animation:kuboCoveredExitLTR 1.04s cubic-bezier(.4,0,.2,1) both !important;
}

/* Previous recipe: exact reverse. */
.featured-carousel .featured-slide.photo-enter-rtl .featured-photo-motion > img{
  animation:kuboCoveredEnterRTL 1.2s cubic-bezier(.22,.61,.36,1) both !important;
}

.featured-carousel .featured-slide.photo-exit-rtl .featured-photo-motion > img{
  animation:kuboCoveredExitRTL 1.04s cubic-bezier(.4,0,.2,1) both !important;
}

@keyframes kuboCoveredEnterLTR{
  0%{
    opacity:0;
    transform:translate3d(-4.5%,0,0);
  }
  45%{opacity:.68}
  100%{
    opacity:1;
    transform:translate3d(0,0,0);
  }
}

@keyframes kuboCoveredExitLTR{
  0%{
    opacity:1;
    transform:translate3d(0,0,0);
  }
  55%{opacity:.48}
  100%{
    opacity:0;
    transform:translate3d(4.5%,0,0);
  }
}

@keyframes kuboCoveredEnterRTL{
  0%{
    opacity:0;
    transform:translate3d(4.5%,0,0);
  }
  45%{opacity:.68}
  100%{
    opacity:1;
    transform:translate3d(0,0,0);
  }
}

@keyframes kuboCoveredExitRTL{
  0%{
    opacity:1;
    transform:translate3d(0,0,0);
  }
  55%{opacity:.48}
  100%{
    opacity:0;
    transform:translate3d(-4.5%,0,0);
  }
}

@media(max-width:700px){
  .featured-carousel .featured-photo-motion > img{
    width:110% !important;
    height:110% !important;
    left:-5%;
    top:-5%;
  }

  @keyframes kuboCoveredEnterLTR{
    0%{opacity:0;transform:translate3d(-3.5%,0,0)}
    45%{opacity:.68}
    100%{opacity:1;transform:translate3d(0,0,0)}
  }

  @keyframes kuboCoveredExitLTR{
    0%{opacity:1;transform:translate3d(0,0,0)}
    55%{opacity:.48}
    100%{opacity:0;transform:translate3d(3.5%,0,0)}
  }

  @keyframes kuboCoveredEnterRTL{
    0%{opacity:0;transform:translate3d(3.5%,0,0)}
    45%{opacity:.68}
    100%{opacity:1;transform:translate3d(0,0,0)}
  }

  @keyframes kuboCoveredExitRTL{
    0%{opacity:1;transform:translate3d(0,0,0)}
    55%{opacity:.48}
    100%{opacity:0;transform:translate3d(-3.5%,0,0)}
  }
}


/* Refined Featured photo slide:
   visible movement, minimal crop, no black side bars */
.featured-carousel .featured-photo-motion{
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:1;
  opacity:1 !important;
  transform:none !important;
  animation:none !important;
}

.featured-carousel .featured-photo-pan{
  position:absolute;
  inset:-2%;
  will-change:transform,opacity;
  transform:translate3d(0,0,0);
  opacity:1;
}

.featured-carousel .featured-photo-pan > img{
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:cover;
  transform:none !important;
  animation:none !important;
}

/* Forward / next */
.featured-carousel .featured-slide.photo-enter-ltr .featured-photo-pan{
  animation:kuboPanEnterLTR 1.15s cubic-bezier(.22,.61,.36,1) both !important;
}

.featured-carousel .featured-slide.photo-exit-ltr .featured-photo-pan{
  animation:kuboPanExitLTR 1s cubic-bezier(.4,0,.2,1) both !important;
}

/* Backward / previous */
.featured-carousel .featured-slide.photo-enter-rtl .featured-photo-pan{
  animation:kuboPanEnterRTL 1.15s cubic-bezier(.22,.61,.36,1) both !important;
}

.featured-carousel .featured-slide.photo-exit-rtl .featured-photo-pan{
  animation:kuboPanExitRTL 1s cubic-bezier(.4,0,.2,1) both !important;
}

@keyframes kuboPanEnterLTR{
  0%{
    opacity:0;
    transform:translate3d(-3.5%,0,0);
  }
  40%{opacity:.62}
  100%{
    opacity:1;
    transform:translate3d(0,0,0);
  }
}

@keyframes kuboPanExitLTR{
  0%{
    opacity:1;
    transform:translate3d(0,0,0);
  }
  60%{opacity:.46}
  100%{
    opacity:0;
    transform:translate3d(3.5%,0,0);
  }
}

@keyframes kuboPanEnterRTL{
  0%{
    opacity:0;
    transform:translate3d(3.5%,0,0);
  }
  40%{opacity:.62}
  100%{
    opacity:1;
    transform:translate3d(0,0,0);
  }
}

@keyframes kuboPanExitRTL{
  0%{
    opacity:1;
    transform:translate3d(0,0,0);
  }
  60%{opacity:.46}
  100%{
    opacity:0;
    transform:translate3d(-3.5%,0,0);
  }
}

@media(max-width:700px){
  .featured-carousel .featured-photo-pan{
    inset:-1.5%;
  }

  @keyframes kuboPanEnterLTR{
    0%{opacity:0;transform:translate3d(-2.5%,0,0)}
    40%{opacity:.62}
    100%{opacity:1;transform:translate3d(0,0,0)}
  }

  @keyframes kuboPanExitLTR{
    0%{opacity:1;transform:translate3d(0,0,0)}
    60%{opacity:.46}
    100%{opacity:0;transform:translate3d(2.5%,0,0)}
  }

  @keyframes kuboPanEnterRTL{
    0%{opacity:0;transform:translate3d(2.5%,0,0)}
    40%{opacity:.62}
    100%{opacity:1;transform:translate3d(0,0,0)}
  }

  @keyframes kuboPanExitRTL{
    0%{opacity:1;transform:translate3d(0,0,0)}
    60%{opacity:.46}
    100%{opacity:0;transform:translate3d(-2.5%,0,0)}
  }
}

/* Keep the Featured text box static. */
.featured-carousel .featured-slide .hero-badge{
  animation:none !important;
  transition:none !important;
  transform:none !important;
}


/* Brighter Featured transition:
   keep one photo fully visible while the next one blends in,
   preventing the dark dip between slides. */
.featured-carousel .featured-slide.photo-enter-ltr .featured-photo-pan{
  animation:kuboPanEnterLTRBright 1.15s cubic-bezier(.22,.61,.36,1) both !important;
}

.featured-carousel .featured-slide.photo-exit-ltr .featured-photo-pan{
  animation:kuboPanExitLTRBright 1.05s cubic-bezier(.4,0,.2,1) both !important;
}

.featured-carousel .featured-slide.photo-enter-rtl .featured-photo-pan{
  animation:kuboPanEnterRTLBright 1.15s cubic-bezier(.22,.61,.36,1) both !important;
}

.featured-carousel .featured-slide.photo-exit-rtl .featured-photo-pan{
  animation:kuboPanExitRTLBright 1.05s cubic-bezier(.4,0,.2,1) both !important;
}

@keyframes kuboPanEnterLTRBright{
  0%{
    opacity:0;
    transform:translate3d(-3.5%,0,0);
  }
  28%{
    opacity:.48;
  }
  58%{
    opacity:.88;
  }
  72%{
    opacity:1;
  }
  100%{
    opacity:1;
    transform:translate3d(0,0,0);
  }
}

@keyframes kuboPanExitLTRBright{
  0%{
    opacity:1;
    transform:translate3d(0,0,0);
  }
  62%{
    opacity:1;
  }
  82%{
    opacity:.72;
  }
  100%{
    opacity:0;
    transform:translate3d(3.5%,0,0);
  }
}

@keyframes kuboPanEnterRTLBright{
  0%{
    opacity:0;
    transform:translate3d(3.5%,0,0);
  }
  28%{
    opacity:.48;
  }
  58%{
    opacity:.88;
  }
  72%{
    opacity:1;
  }
  100%{
    opacity:1;
    transform:translate3d(0,0,0);
  }
}

@keyframes kuboPanExitRTLBright{
  0%{
    opacity:1;
    transform:translate3d(0,0,0);
  }
  62%{
    opacity:1;
  }
  82%{
    opacity:.72;
  }
  100%{
    opacity:0;
    transform:translate3d(-3.5%,0,0);
  }
}

@media(max-width:700px){
  @keyframes kuboPanEnterLTRBright{
    0%{opacity:0;transform:translate3d(-2.5%,0,0)}
    28%{opacity:.48}
    58%{opacity:.88}
    72%{opacity:1}
    100%{opacity:1;transform:translate3d(0,0,0)}
  }

  @keyframes kuboPanExitLTRBright{
    0%{opacity:1;transform:translate3d(0,0,0)}
    62%{opacity:1}
    82%{opacity:.72}
    100%{opacity:0;transform:translate3d(2.5%,0,0)}
  }

  @keyframes kuboPanEnterRTLBright{
    0%{opacity:0;transform:translate3d(2.5%,0,0)}
    28%{opacity:.48}
    58%{opacity:.88}
    72%{opacity:1}
    100%{opacity:1;transform:translate3d(0,0,0)}
  }

  @keyframes kuboPanExitRTLBright{
    0%{opacity:1;transform:translate3d(0,0,0)}
    62%{opacity:1}
    82%{opacity:.72}
    100%{opacity:0;transform:translate3d(-2.5%,0,0)}
  }
}


/* Final no-dark-dip Featured transition:
   outgoing photo stays fully visible underneath;
   incoming photo slides and fades over it. */
.featured-carousel .featured-slide.photo-enter-ltr,
.featured-carousel .featured-slide.photo-enter-rtl{
  z-index:3 !important;
  opacity:1 !important;
}

.featured-carousel .featured-slide.photo-exit-ltr,
.featured-carousel .featured-slide.photo-exit-rtl{
  z-index:2 !important;
  opacity:1 !important;
}

.featured-carousel .featured-slide.photo-enter-ltr .featured-photo-pan{
  animation:kuboNoDipEnterLTR 1.15s cubic-bezier(.22,.61,.36,1) both !important;
}

.featured-carousel .featured-slide.photo-enter-rtl .featured-photo-pan{
  animation:kuboNoDipEnterRTL 1.15s cubic-bezier(.22,.61,.36,1) both !important;
}

/* Never fade the outgoing image. It only shifts slightly underneath. */
.featured-carousel .featured-slide.photo-exit-ltr .featured-photo-pan{
  animation:kuboNoDipExitLTR 1.05s cubic-bezier(.4,0,.2,1) both !important;
}

.featured-carousel .featured-slide.photo-exit-rtl .featured-photo-pan{
  animation:kuboNoDipExitRTL 1.05s cubic-bezier(.4,0,.2,1) both !important;
}

@keyframes kuboNoDipEnterLTR{
  0%{
    opacity:0;
    transform:translate3d(-3.5%,0,0);
  }
  32%{opacity:.52}
  62%{opacity:.9}
  100%{
    opacity:1;
    transform:translate3d(0,0,0);
  }
}

@keyframes kuboNoDipEnterRTL{
  0%{
    opacity:0;
    transform:translate3d(3.5%,0,0);
  }
  32%{opacity:.52}
  62%{opacity:.9}
  100%{
    opacity:1;
    transform:translate3d(0,0,0);
  }
}

@keyframes kuboNoDipExitLTR{
  0%{
    opacity:1;
    transform:translate3d(0,0,0);
  }
  100%{
    opacity:1;
    transform:translate3d(2%,0,0);
  }
}

@keyframes kuboNoDipExitRTL{
  0%{
    opacity:1;
    transform:translate3d(0,0,0);
  }
  100%{
    opacity:1;
    transform:translate3d(-2%,0,0);
  }
}

@media(max-width:700px){
  @keyframes kuboNoDipEnterLTR{
    0%{opacity:0;transform:translate3d(-2.5%,0,0)}
    32%{opacity:.52}
    62%{opacity:.9}
    100%{opacity:1;transform:translate3d(0,0,0)}
  }

  @keyframes kuboNoDipEnterRTL{
    0%{opacity:0;transform:translate3d(2.5%,0,0)}
    32%{opacity:.52}
    62%{opacity:.9}
    100%{opacity:1;transform:translate3d(0,0,0)}
  }

  @keyframes kuboNoDipExitLTR{
    0%{opacity:1;transform:translate3d(0,0,0)}
    100%{opacity:1;transform:translate3d(1.4%,0,0)}
  }

  @keyframes kuboNoDipExitRTL{
    0%{opacity:1;transform:translate3d(0,0,0)}
    100%{opacity:1;transform:translate3d(-1.4%,0,0)}
  }
}


/* Zero-dark-dip Featured transition:
   both photos stay fully opaque; movement creates the blend instead of transparency. */
.featured-carousel,
.featured-carousel .featured-slide,
.featured-carousel .featured-photo-motion,
.featured-carousel .featured-photo-pan,
.featured-carousel .featured-photo-pan > img{
  filter:none !important;
  mix-blend-mode:normal !important;
}

.featured-carousel{
  background:transparent !important;
}

.featured-carousel .featured-slide.photo-enter-ltr,
.featured-carousel .featured-slide.photo-enter-rtl,
.featured-carousel .featured-slide.photo-exit-ltr,
.featured-carousel .featured-slide.photo-exit-rtl,
.featured-carousel .featured-slide.is-entering,
.featured-carousel .featured-slide.is-leaving{
  opacity:1 !important;
}

.featured-carousel .featured-slide.photo-enter-ltr .featured-photo-pan{
  animation:kuboOpaqueEnterLTR 1.12s cubic-bezier(.22,.61,.36,1) both !important;
}

.featured-carousel .featured-slide.photo-enter-rtl .featured-photo-pan{
  animation:kuboOpaqueEnterRTL 1.12s cubic-bezier(.22,.61,.36,1) both !important;
}

.featured-carousel .featured-slide.photo-exit-ltr .featured-photo-pan{
  animation:kuboOpaqueExitLTR 1.02s cubic-bezier(.4,0,.2,1) both !important;
}

.featured-carousel .featured-slide.photo-exit-rtl .featured-photo-pan{
  animation:kuboOpaqueExitRTL 1.02s cubic-bezier(.4,0,.2,1) both !important;
}

@keyframes kuboOpaqueEnterLTR{
  from{
    opacity:1;
    transform:translate3d(-3.5%,0,0);
  }
  to{
    opacity:1;
    transform:translate3d(0,0,0);
  }
}

@keyframes kuboOpaqueEnterRTL{
  from{
    opacity:1;
    transform:translate3d(3.5%,0,0);
  }
  to{
    opacity:1;
    transform:translate3d(0,0,0);
  }
}

@keyframes kuboOpaqueExitLTR{
  from{
    opacity:1;
    transform:translate3d(0,0,0);
  }
  to{
    opacity:1;
    transform:translate3d(2%,0,0);
  }
}

@keyframes kuboOpaqueExitRTL{
  from{
    opacity:1;
    transform:translate3d(0,0,0);
  }
  to{
    opacity:1;
    transform:translate3d(-2%,0,0);
  }
}

@media(max-width:700px){
  @keyframes kuboOpaqueEnterLTR{
    from{opacity:1;transform:translate3d(-2.5%,0,0)}
    to{opacity:1;transform:translate3d(0,0,0)}
  }

  @keyframes kuboOpaqueEnterRTL{
    from{opacity:1;transform:translate3d(2.5%,0,0)}
    to{opacity:1;transform:translate3d(0,0,0)}
  }

  @keyframes kuboOpaqueExitLTR{
    from{opacity:1;transform:translate3d(0,0,0)}
    to{opacity:1;transform:translate3d(1.4%,0,0)}
  }

  @keyframes kuboOpaqueExitRTL{
    from{opacity:1;transform:translate3d(0,0,0)}
    to{opacity:1;transform:translate3d(-1.4%,0,0)}
  }
}


/* Featured transition: true slide + blend
   The outgoing photo stays fully covering the frame.
   The incoming photo slides over it while crossfading in. */
.featured-carousel{
  overflow:hidden !important;
  background:transparent !important;
  isolation:isolate;
}

.featured-carousel .featured-slide.photo-exit-ltr,
.featured-carousel .featured-slide.photo-exit-rtl{
  z-index:2 !important;
  opacity:1 !important;
  transform:none !important;
  animation:none !important;
}

.featured-carousel .featured-slide.photo-enter-ltr,
.featured-carousel .featured-slide.photo-enter-rtl{
  z-index:3 !important;
  opacity:1 !important;
  transform:none !important;
  animation:none !important;
}

/* Keep the outgoing image completely stationary and opaque underneath. */
.featured-carousel .featured-slide.photo-exit-ltr .featured-photo-pan,
.featured-carousel .featured-slide.photo-exit-rtl .featured-photo-pan{
  opacity:1 !important;
  transform:none !important;
  animation:none !important;
}

/* Incoming image gets the only fade, so there is always a full photo underneath. */
.featured-carousel .featured-slide.photo-enter-ltr .featured-photo-pan{
  animation:kuboBlendSlideEnterLTR 1.15s cubic-bezier(.22,.61,.36,1) both !important;
}

.featured-carousel .featured-slide.photo-enter-rtl .featured-photo-pan{
  animation:kuboBlendSlideEnterRTL 1.15s cubic-bezier(.22,.61,.36,1) both !important;
}

/* Slight overscan only—enough to hide the edge during the short slide. */
.featured-carousel .featured-photo-pan{
  inset:-1.5% !important;
}

.featured-carousel .featured-photo-pan > img{
  width:100% !important;
  height:100% !important;
  inset:0 !important;
  left:0 !important;
  top:0 !important;
  object-fit:cover;
  transform:none !important;
  animation:none !important;
}

@keyframes kuboBlendSlideEnterLTR{
  0%{
    opacity:0;
    transform:translate3d(-2.8%,0,0);
  }
  45%{
    opacity:.58;
  }
  75%{
    opacity:.9;
  }
  100%{
    opacity:1;
    transform:translate3d(0,0,0);
  }
}

@keyframes kuboBlendSlideEnterRTL{
  0%{
    opacity:0;
    transform:translate3d(2.8%,0,0);
  }
  45%{
    opacity:.58;
  }
  75%{
    opacity:.9;
  }
  100%{
    opacity:1;
    transform:translate3d(0,0,0);
  }
}

@media(max-width:700px){
  .featured-carousel .featured-photo-pan{
    inset:-1% !important;
  }

  @keyframes kuboBlendSlideEnterLTR{
    0%{opacity:0;transform:translate3d(-2%,0,0)}
    45%{opacity:.58}
    75%{opacity:.9}
    100%{opacity:1;transform:translate3d(0,0,0)}
  }

  @keyframes kuboBlendSlideEnterRTL{
    0%{opacity:0;transform:translate3d(2%,0,0)}
    45%{opacity:.58}
    75%{opacity:.9}
    100%{opacity:1;transform:translate3d(0,0,0)}
  }
}

/* Text box remains static. */
.featured-carousel .featured-slide .hero-badge{
  animation:none !important;
  transition:none !important;
  transform:none !important;
}


/* CLEAN FEATURED PHOTO SLIDE
   No crossfade, no transparency, no white/dark dip.
   The old photo remains fully visible underneath while the next photo
   slides over it from the selected direction. */
.featured-carousel{
  overflow:hidden !important;
  isolation:isolate;
  background:transparent !important;
}

.featured-carousel .featured-slide.photo-exit-ltr,
.featured-carousel .featured-slide.photo-exit-rtl{
  z-index:2 !important;
  opacity:1 !important;
  transform:none !important;
  animation:none !important;
}

.featured-carousel .featured-slide.photo-enter-ltr,
.featured-carousel .featured-slide.photo-enter-rtl{
  z-index:3 !important;
  opacity:1 !important;
  transform:none !important;
  animation:none !important;
}

/* Keep the outgoing photo completely still and fully opaque. */
.featured-carousel .featured-slide.photo-exit-ltr .featured-photo-motion,
.featured-carousel .featured-slide.photo-exit-rtl .featured-photo-motion,
.featured-carousel .featured-slide.photo-exit-ltr .featured-photo-pan,
.featured-carousel .featured-slide.photo-exit-rtl .featured-photo-pan{
  opacity:1 !important;
  transform:none !important;
  animation:none !important;
}

/* Keep photo sizing natural with only tiny overscan to avoid seams. */
.featured-carousel .featured-photo-motion{
  position:absolute;
  inset:0;
  overflow:hidden;
  opacity:1 !important;
}

.featured-carousel .featured-photo-pan{
  position:absolute;
  inset:-0.75% !important;
  opacity:1 !important;
  transform:none !important;
}

.featured-carousel .featured-photo-pan > img{
  position:absolute;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:cover;
  opacity:1 !important;
  transform:none !important;
  animation:none !important;
}

/* Slide only the incoming photo layer over the outgoing one. */
.featured-carousel .featured-slide.photo-enter-ltr .featured-photo-motion{
  animation:kuboCleanOverlayEnterLTR 1.05s cubic-bezier(.22,.61,.36,1) both !important;
}

.featured-carousel .featured-slide.photo-enter-rtl .featured-photo-motion{
  animation:kuboCleanOverlayEnterRTL 1.05s cubic-bezier(.22,.61,.36,1) both !important;
}

@keyframes kuboCleanOverlayEnterLTR{
  from{
    opacity:1;
    transform:translate3d(-100%,0,0);
  }
  to{
    opacity:1;
    transform:translate3d(0,0,0);
  }
}

@keyframes kuboCleanOverlayEnterRTL{
  from{
    opacity:1;
    transform:translate3d(100%,0,0);
  }
  to{
    opacity:1;
    transform:translate3d(0,0,0);
  }
}

/* Text box remains static as requested. */
.featured-carousel .featured-slide .hero-badge{
  animation:none !important;
  transition:none !important;
  transform:none !important;
}


/* RESTORED FEATURED SLIDE + MIX
   Outgoing photo stays fully visible underneath.
   Incoming photo slides across while fading from transparent to opaque.
   This preserves the blend without exposing the page background. */
.featured-carousel .featured-slide.photo-exit-ltr,
.featured-carousel .featured-slide.photo-exit-rtl{
  z-index:2 !important;
  opacity:1 !important;
  transform:none !important;
  animation:none !important;
}

.featured-carousel .featured-slide.photo-enter-ltr,
.featured-carousel .featured-slide.photo-enter-rtl{
  z-index:3 !important;
  opacity:1 !important;
  transform:none !important;
  animation:none !important;
}

/* Outgoing photo remains fixed and fully opaque for the full handoff. */
.featured-carousel .featured-slide.photo-exit-ltr .featured-photo-motion,
.featured-carousel .featured-slide.photo-exit-rtl .featured-photo-motion,
.featured-carousel .featured-slide.photo-exit-ltr .featured-photo-pan,
.featured-carousel .featured-slide.photo-exit-rtl .featured-photo-pan{
  opacity:1 !important;
  transform:none !important;
  animation:none !important;
}

/* Incoming wrapper handles the slide.
   Incoming inner photo handles the fade/mix. */
.featured-carousel .featured-slide.photo-enter-ltr .featured-photo-motion{
  animation:kuboSlideMixWrapperLTR 1.08s cubic-bezier(.22,.61,.36,1) both !important;
}

.featured-carousel .featured-slide.photo-enter-rtl .featured-photo-motion{
  animation:kuboSlideMixWrapperRTL 1.08s cubic-bezier(.22,.61,.36,1) both !important;
}

.featured-carousel .featured-slide.photo-enter-ltr .featured-photo-pan,
.featured-carousel .featured-slide.photo-enter-rtl .featured-photo-pan{
  animation:kuboSlideMixFade 1.08s cubic-bezier(.22,.61,.36,1) both !important;
}

/* Tiny overscan prevents edge seams without making the photos look zoomed. */
.featured-carousel .featured-photo-pan{
  inset:-0.75% !important;
}

@keyframes kuboSlideMixWrapperLTR{
  from{transform:translate3d(-8%,0,0)}
  to{transform:translate3d(0,0,0)}
}

@keyframes kuboSlideMixWrapperRTL{
  from{transform:translate3d(8%,0,0)}
  to{transform:translate3d(0,0,0)}
}

@keyframes kuboSlideMixFade{
  0%{opacity:0}
  30%{opacity:.34}
  58%{opacity:.72}
  82%{opacity:.94}
  100%{opacity:1}
}

@media(max-width:700px){
  @keyframes kuboSlideMixWrapperLTR{
    from{transform:translate3d(-6%,0,0)}
    to{transform:translate3d(0,0,0)}
  }

  @keyframes kuboSlideMixWrapperRTL{
    from{transform:translate3d(6%,0,0)}
    to{transform:translate3d(0,0,0)}
  }
}

/* Text box remains static. */
.featured-carousel .featured-slide .hero-badge{
  animation:none !important;
  transition:none !important;
  transform:none !important;
}


/* Featured panel transition rebuilt with the Web Animations API */
.featured-carousel{
  position:relative;
  overflow:hidden !important;
  isolation:isolate;
}

.featured-carousel .featured-slide{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  animation:none !important;
  transition:none !important;
  transform:none !important;
}

.featured-carousel .featured-slide.active,
.featured-carousel .featured-slide.is-entering,
.featured-carousel .featured-slide.is-leaving{
  opacity:1 !important;
  pointer-events:auto;
}

.featured-carousel .featured-photo-motion{
  position:absolute;
  inset:0;
  overflow:hidden;
  opacity:1;
  transform:translate3d(0,0,0);
  animation:none !important;
  transition:none !important;
  will-change:transform,opacity;
}

.featured-carousel .featured-photo-pan{
  position:absolute;
  inset:-0.75%;
  opacity:1;
  transform:translate3d(0,0,0);
  animation:none !important;
  transition:none !important;
  will-change:transform;
}

.featured-carousel .featured-photo-pan > img{
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:cover;
  opacity:1 !important;
  transform:none !important;
  animation:none !important;
  transition:none !important;
}

.featured-carousel .hero-badge{
  z-index:5 !important;
  animation:none !important;
  transition:none !important;
  transform:none !important;
}

.featured-carousel .featured-dots{
  z-index:7 !important;
}


/* Isolated Featured photo animator — no legacy selector targets this layer */
.featured-carousel .featured-photo-animator{
  position:absolute;
  inset:-0.75%;
  overflow:hidden;
  opacity:1;
  transform:translate3d(0,0,0);
  will-change:transform,opacity;
  pointer-events:none;
}

.featured-carousel .featured-photo-animator > img{
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:cover;
  opacity:1 !important;
  transform:none !important;
  animation:none !important;
  transition:none !important;
}

.featured-carousel .featured-slide{
  overflow:hidden;
}

.featured-carousel .featured-slide.active{
  opacity:1 !important;
}

.featured-carousel .hero-badge{
  z-index:5 !important;
  animation:none !important;
  transition:none !important;
  transform:none !important;
}

.featured-carousel .featured-dots{
  z-index:7 !important;
}


/* Same Featured slide + blend, with cleaner photo edges */
.featured-carousel .featured-photo-animator{
  inset:0 -4% !important;
  overflow:hidden;
}

.featured-carousel .featured-photo-animator > img{
  position:absolute;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:cover;
  object-position:center center;
  transform:none !important;
}

/* Keep the panel itself clipping the small horizontal overscan. */
.featured-carousel .featured-slide{
  overflow:hidden !important;
}


/* Featured text box: directional slide + fade, driven by JavaScript */
.featured-carousel .hero-badge{
  z-index:5 !important;
  animation:none !important;
  transition:none !important;
  will-change:transform,opacity;
}


/* Dedicated Featured text motion layer.
   This wrapper carries the slide while the badge itself keeps its styling. */
.featured-carousel .featured-badge-motion{
  position:absolute;
  inset:auto;
  z-index:5;
  pointer-events:none;
  will-change:transform,opacity;
}

/* Let the original badge keep its exact layout position inside the wrapper. */
.featured-carousel .featured-badge-motion > .hero-badge{
  position:relative !important;
  inset:auto !important;
  margin:0 !important;
  animation:none !important;
  transition:none !important;
  transform:none !important;
}

/* Match the badge's original placement. */
.featured-carousel .featured-badge-motion{
  left:var(--featured-badge-left, 24px);
  bottom:var(--featured-badge-bottom, 24px);
}

/* Use the existing badge position values when available. */
.featured-carousel .hero-badge{
  left:auto !important;
  bottom:auto !important;
}

@media(max-width:700px){
  .featured-carousel .featured-badge-motion{
    left:var(--featured-badge-left-mobile, 14px);
    right:14px;
    bottom:var(--featured-badge-bottom-mobile, 14px);
  }

  .featured-carousel .featured-badge-motion > .hero-badge{
    width:100%;
  }
}


/* Sequenced Featured text boxes:
   outgoing finishes before incoming begins, preventing overlap. */
.featured-carousel .featured-badge-motion{
  will-change:transform,opacity;
  backface-visibility:hidden;
}


/* Refined Featured text handoff:
   incoming begins just before outgoing fully disappears,
   while remaining spatially separated and slightly slower. */
.featured-carousel .featured-badge-motion{
  will-change:transform,opacity;
  backface-visibility:hidden;
}


/* Featured photo and text timing are now closely matched.
   Photo motion is slightly slower for a smoother unified handoff. */
.featured-carousel .featured-photo-animator,
.featured-carousel .featured-badge-motion{
  backface-visibility:hidden;
}


/* Main navigation hover underline */
.site-header nav a,
.main-nav a,
.header-nav a,
.nav-links a{
  position:relative;
  text-decoration:none;
}

.site-header nav a::after,
.main-nav a::after,
.header-nav a::after,
.nav-links a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-7px;
  height:2px;
  border-radius:999px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .24s cubic-bezier(.22,.61,.36,1);
  pointer-events:none;
}

.site-header nav a:hover::after,
.site-header nav a:focus-visible::after,
.main-nav a:hover::after,
.main-nav a:focus-visible::after,
.header-nav a:hover::after,
.header-nav a:focus-visible::after,
.nav-links a:hover::after,
.nav-links a:focus-visible::after{
  transform:scaleX(1);
}

/* Preserve clean mobile navigation spacing. */
@media(max-width:800px){
  .site-header nav a::after,
  .main-nav a::after,
  .header-nav a::after,
  .nav-links a::after{
    bottom:-4px;
  }
}


/* Kubo Cooks logo/name hover animation */
.site-logo,
.brand,
.navbar-brand,
.logo-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  transition:
    transform .28s cubic-bezier(.22,.61,.36,1),
    filter .28s ease;
  transform-origin:center;
  text-decoration:none;
}

.site-logo::after,
.brand::after,
.navbar-brand::after,
.logo-link::after{
  content:"";
  position:absolute;
  left:12%;
  right:12%;
  bottom:-6px;
  height:3px;
  border-radius:999px;
  background:#5ab04b;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .30s cubic-bezier(.22,.61,.36,1);
  pointer-events:none;
}

.site-logo:hover,
.site-logo:focus-visible,
.brand:hover,
.brand:focus-visible,
.navbar-brand:hover,
.navbar-brand:focus-visible,
.logo-link:hover,
.logo-link:focus-visible{
  transform:translateY(-2px) scale(1.02);
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.08));
}

.site-logo:hover::after,
.site-logo:focus-visible::after,
.brand:hover::after,
.brand:focus-visible::after,
.navbar-brand:hover::after,
.navbar-brand:focus-visible::after,
.logo-link:hover::after,
.logo-link:focus-visible::after{
  transform:scaleX(1);
}

@media(max-width:800px){
  .site-logo::after,
  .brand::after,
  .navbar-brand::after,
  .logo-link::after{
    bottom:-4px;
    height:2px;
  }
}


/* Kubo Cooks logo hover: slight shrink + sweeping rounded green frame */
.site-logo,
.brand,
.navbar-brand,
.logo-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  isolation:isolate;
  transform-origin:center;
  transition:transform .30s cubic-bezier(.22,.61,.36,1);
  filter:none !important;
}

/* Disable the earlier underline treatment. */
.site-logo::after,
.brand::after,
.navbar-brand::after,
.logo-link::after{
  content:"";
  position:absolute;
  inset:-8px -12px;
  height:auto;
  border:2px solid #5ab04b;
  border-radius:14px;
  background:transparent;
  transform:scaleX(0);
  transform-origin:left center;
  opacity:0;
  transition:
    transform .38s cubic-bezier(.22,.61,.36,1),
    opacity .16s ease;
  pointer-events:none;
  z-index:-1;
}

/* Soft inner sweep that helps the frame feel like it is being drawn. */
.site-logo::before,
.brand::before,
.navbar-brand::before,
.logo-link::before{
  content:"";
  position:absolute;
  inset:-8px -12px;
  border-radius:14px;
  background:linear-gradient(
    90deg,
    rgba(90,176,75,0) 0%,
    rgba(90,176,75,.10) 45%,
    rgba(90,176,75,0) 100%
  );
  transform:translateX(-115%);
  opacity:0;
  transition:
    transform .46s cubic-bezier(.22,.61,.36,1),
    opacity .18s ease;
  pointer-events:none;
  z-index:-2;
}

.site-logo:hover,
.site-logo:focus-visible,
.brand:hover,
.brand:focus-visible,
.navbar-brand:hover,
.navbar-brand:focus-visible,
.logo-link:hover,
.logo-link:focus-visible{
  transform:scale(.97);
  filter:none !important;
}

.site-logo:hover::after,
.site-logo:focus-visible::after,
.brand:hover::after,
.brand:focus-visible::after,
.navbar-brand:hover::after,
.navbar-brand:focus-visible::after,
.logo-link:hover::after,
.logo-link:focus-visible::after{
  transform:scaleX(1);
  opacity:1;
}

.site-logo:hover::before,
.site-logo:focus-visible::before,
.brand:hover::before,
.brand:focus-visible::before,
.navbar-brand:hover::before,
.navbar-brand:focus-visible::before,
.logo-link:hover::before,
.logo-link:focus-visible::before{
  transform:translateX(115%);
  opacity:1;
}

@media(max-width:800px){
  .site-logo::after,
  .brand::after,
  .navbar-brand::after,
  .logo-link::after,
  .site-logo::before,
  .brand::before,
  .navbar-brand::before,
  .logo-link::before{
    inset:-6px -9px;
    border-radius:12px;
  }
}


/* Fix logo-hover green bleed:
   remove the broad highlight layer and keep only the rounded frame sweep. */
.site-logo::before,
.brand::before,
.navbar-brand::before,
.logo-link::before{
  content:none !important;
  display:none !important;
  opacity:0 !important;
  transform:none !important;
}

/* Keep the frame isolated around the logo only. */
.site-logo,
.brand,
.navbar-brand,
.logo-link{
  isolation:isolate;
  z-index:2;
  filter:none !important;
}

.site-logo::after,
.brand::after,
.navbar-brand::after,
.logo-link::after{
  z-index:-1 !important;
  box-shadow:none !important;
  filter:none !important;
  background:transparent !important;
}


/* Match logo hover frame rounding to the Featured text box */
.site-logo::after,
.brand::after,
.navbar-brand::after,
.logo-link::after{
  border-radius:16px !important;
}

@media(max-width:800px){
  .site-logo::after,
  .brand::after,
  .navbar-brand::after,
  .logo-link::after{
    border-radius:16px !important;
  }
}


/* Kubo Cooks logo hover: soft rounded-frame pop */
.site-logo,
.brand,
.navbar-brand,
.logo-link{
  transition:transform .28s cubic-bezier(.22,.61,.36,1) !important;
  transform-origin:center;
  filter:none !important;
}

.site-logo::after,
.brand::after,
.navbar-brand::after,
.logo-link::after{
  content:"" !important;
  position:absolute !important;
  inset:-8px -12px !important;
  height:auto !important;
  border:2px solid #5ab04b !important;
  border-radius:16px !important;
  background:transparent !important;
  box-shadow:none !important;
  opacity:0;
  transform:scale(.92) !important;
  transform-origin:center !important;
  transition:
    opacity .22s ease,
    transform .34s cubic-bezier(.22,.61,.36,1) !important;
  pointer-events:none;
  z-index:-1 !important;
}

.site-logo:hover,
.site-logo:focus-visible,
.brand:hover,
.brand:focus-visible,
.navbar-brand:hover,
.navbar-brand:focus-visible,
.logo-link:hover,
.logo-link:focus-visible{
  transform:scale(.98) !important;
}

.site-logo:hover::after,
.site-logo:focus-visible::after,
.brand:hover::after,
.brand:focus-visible::after,
.navbar-brand:hover::after,
.navbar-brand:focus-visible::after,
.logo-link:hover::after,
.logo-link:focus-visible::after{
  opacity:1;
  transform:scale(1) !important;
}

@media(max-width:800px){
  .site-logo::after,
  .brand::after,
  .navbar-brand::after,
  .logo-link::after{
    inset:-6px -9px !important;
    border-radius:16px !important;
  }
}


/* Refine soft frame pop */
.site-logo:hover,
.site-logo:focus-visible,
.brand:hover,
.brand:focus-visible,
.navbar-brand:hover,
.navbar-brand:focus-visible,
.logo-link:hover,
.logo-link:focus-visible{
  transform:scale(.97) !important;
}

.site-logo::after,
.brand::after,
.navbar-brand::after,
.logo-link::after{
  border-width:2.5px !important;
}


/* Search suggestion arrows: slightly thicker and more legible */
.search-suggestions a::after,
.search-results a::after,
.search-dropdown a::after,
.autocomplete-results a::after,
.search-suggestion::after,
.search-result-item::after{
  font-weight:700 !important;
  -webkit-text-stroke:.25px currentColor;
  transform:scaleX(1.08);
  transform-origin:center;
}

/* Handle arrow elements that are separate spans/icons */
.search-suggestions .arrow,
.search-results .arrow,
.search-dropdown .arrow,
.autocomplete-results .arrow,
.search-suggestion .arrow,
.search-result-item .arrow{
  font-weight:700 !important;
  -webkit-text-stroke:.25px currentColor;
  transform:scaleX(1.08);
  transform-origin:center;
}


/* Search suggestion arrow: dedicated thicker SVG */
.header-search-arrow{
  display:inline-flex;
  width:20px;
  height:20px;
  flex:0 0 20px;
  align-items:center;
  justify-content:center;
  color:var(--green-dark);
  font-size:0;
  line-height:0;
  transform:none !important;
  -webkit-text-stroke:0 !important;
}

.header-search-arrow svg{
  display:block;
  width:17px;
  height:17px;
  overflow:visible;
}

.header-search-arrow path{
  fill:none;
  stroke:currentColor;
  stroke-width:2.25;
  stroke-linecap:round;
  stroke-linejoin:round;
}


/* About-page photo carousel: remove dark side gradients/vignette */
.about-carousel::before,
.about-carousel::after,
.about-photo-carousel::before,
.about-photo-carousel::after,
.about-gallery::before,
.about-gallery::after,
.about-carousel-track::before,
.about-carousel-track::after,
.about-photo-strip::before,
.about-photo-strip::after{
  content:none !important;
  display:none !important;
  background:none !important;
  background-image:none !important;
  box-shadow:none !important;
  opacity:0 !important;
  filter:none !important;
}

/* Also remove any inset shading applied directly to the carousel shell. */
.about-carousel,
.about-photo-carousel,
.about-gallery,
.about-carousel-track,
.about-photo-strip{
  background-image:none !important;
  box-shadow:none !important;
  filter:none !important;
  -webkit-mask-image:none !important;
  mask-image:none !important;
}


/* Definitive About carousel gradient removal */
.about-page .about-photo-island-track::before,
.about-photo-island-track::before,
body.about-page .about-photo-island-track::before,
body[data-page='about'] .about-photo-island-track::before,
.about-page .about-photo-island-track::after,
.about-photo-island-track::after,
body.about-page .about-photo-island-track::after,
body[data-page='about'] .about-photo-island-track::after{
  content:none !important;
  display:none !important;
  background:none !important;
  background-image:none !important;
  box-shadow:none !important;
  filter:none !important;
  opacity:0 !important;
  -webkit-mask:none !important;
  mask:none !important;
}
.about-page .about-photo-island-track,
.about-photo-island-track,
body.about-page .about-photo-island-track,
body[data-page='about'] .about-photo-island-track{
  background:none !important;
  background-image:none !important;
  box-shadow:none !important;
  filter:none !important;
  -webkit-mask:none !important;
  -webkit-mask-image:none !important;
  mask:none !important;
  mask-image:none !important;
}
.about-page .about-photo-island-track .edge-fade,
.about-page .about-photo-island-track .fade-left,
.about-page .about-photo-island-track .fade-right,
.about-page .about-photo-island-track .vignette,
.about-page .about-photo-island-track .overlay,
.about-photo-island-track .edge-fade,
.about-photo-island-track .fade-left,
.about-photo-island-track .fade-right,
.about-photo-island-track .vignette,
.about-photo-island-track .overlay,
body.about-page .about-photo-island-track .edge-fade,
body.about-page .about-photo-island-track .fade-left,
body.about-page .about-photo-island-track .fade-right,
body.about-page .about-photo-island-track .vignette,
body.about-page .about-photo-island-track .overlay,
body[data-page='about'] .about-photo-island-track .edge-fade,
body[data-page='about'] .about-photo-island-track .fade-left,
body[data-page='about'] .about-photo-island-track .fade-right,
body[data-page='about'] .about-photo-island-track .vignette,
body[data-page='about'] .about-photo-island-track .overlay{
  display:none !important;
  opacity:0 !important;
  background:none !important;
  background-image:none !important;
}


/* Remove the actual About carousel edge overlays */
.about-photo-island::before,
.about-photo-island::after{
  content:none !important;
  display:none !important;
  width:0 !important;
  height:0 !important;
  opacity:0 !important;
  background:none !important;
  background-image:none !important;
  box-shadow:none !important;
  filter:none !important;
}


/* Recipe page spacing: give the video panel more room below the hero */
.recipe-hero + .video-section,
.recipe-hero + .recipe-video-section,
.recipe-hero + .watch-recipe,
.recipe-hero + section:has(.youtube-embed),
.recipe-header + .video-section,
.recipe-header + .recipe-video-section{
  margin-top:42px !important;
}

/* Keep a comfortable gap when the section is identified by its content. */
section:has(.youtube-embed),
section:has(iframe[src*="youtube.com/embed"]){
  scroll-margin-top:110px;
}

/* The 3-photo gallery now sits directly below the video panel. */
section:has(iframe[src*="youtube.com/embed"]) + .recipe-gallery,
section:has(iframe[src*="youtube.com/embed"]) + .process-gallery,
section:has(iframe[src*="youtube.com/embed"]) + .photo-gallery,
section:has(iframe[src*="youtube.com/embed"]) + section:has(.gallery-grid),
section:has(iframe[src*="youtube.com/embed"]) + section:has(.process-grid){
  margin-top:28px !important;
}


/* Recipe page vertical rhythm */
.recipe-hero{
  margin-bottom:48px !important;
}

.video-section{
  margin-top:0 !important;
}

/* Three-photo gallery directly beneath the video panel */
.video-section + .recipe-photo-tabs-section{
  margin-top:30px !important;
}


/* Recipe-page spacing refinement */
.recipe-hero{
  margin-bottom:30px !important;
}

.video-section{
  margin-top:0 !important;
  margin-bottom:0 !important;
}

/* Keep exactly 30px above and below the three-photo gallery */
.video-section + .recipe-photo-tabs-section{
  margin-top:30px !important;
}

.recipe-photo-tabs-section{
  margin-bottom:30px !important;
}

.recipe-photo-tabs-section + #recipe-details,
.recipe-photo-tabs-section + .recipe-details,
.recipe-photo-tabs-section + section{
  margin-top:0 !important;
}


/* Definitive recipe-section spacing: 30px between major panels */
.recipe-hero{
  margin-bottom:0 !important;
  padding-bottom:30px !important;
}

.video-section{
  margin-top:0 !important;
  margin-bottom:0 !important;
  padding-top:0 !important;
  padding-bottom:30px !important;
}

.recipe-photo-tabs-section{
  margin-top:0 !important;
  margin-bottom:0 !important;
  padding-top:0 !important;
  padding-bottom:30px !important;
}

#recipe-details,
.recipe-details{
  margin-top:0 !important;
  padding-top:0 !important;
}

/* Prevent generic section spacing rules from stacking extra space */
.recipe-page main > section + section,
body:has(.recipe-hero) main > section + section{
  margin-top:0 !important;
}


/* Final recipe spacing fix:
   remove stacked margin + padding and keep one true 30px gap */

/* Hero → video */
.recipe-hero{
  margin-bottom:0 !important;
  padding-bottom:0 !important;
}

.recipe-hero + .video-section,
.recipe-hero + .recipe-video-section,
.recipe-hero + .watch-recipe,
.recipe-hero + section:has(.youtube-embed),
.recipe-header + .video-section,
.recipe-header + .recipe-video-section{
  margin-top:30px !important;
}

/* Video → 3-photo gallery */
.video-section{
  margin-bottom:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}

.video-section + .recipe-photo-tabs-section{
  margin-top:30px !important;
}

/* 3-photo gallery → Ingredients / How to Make It */
.recipe-photo-tabs-section{
  margin-bottom:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}

.recipe-photo-tabs-section + #recipe-details,
.recipe-photo-tabs-section + .recipe-details,
.recipe-photo-tabs-section + section{
  margin-top:30px !important;
}

/* Avoid generic section spacing from adding more space */
body:has(.recipe-hero) main > section + section{
  margin-bottom:0;
}


/* Recipe-page spacing fine tune: 36px between major panels */
.recipe-hero + .video-section,
.recipe-hero + .recipe-video-section,
.recipe-hero + .watch-recipe,
.recipe-hero + section:has(.youtube-embed),
.recipe-header + .video-section,
.recipe-header + .recipe-video-section{
  margin-top:36px !important;
}

.video-section + .recipe-photo-tabs-section{
  margin-top:36px !important;
}

.recipe-photo-tabs-section + #recipe-details,
.recipe-photo-tabs-section + .recipe-details,
.recipe-photo-tabs-section + section{
  margin-top:36px !important;
}


/* Hero photo/title card to video panel: 40px */
.recipe-hero + .video-section,
.recipe-hero + .recipe-video-section,
.recipe-hero + .watch-recipe,
.recipe-hero + section:has(.youtube-embed),
.recipe-header + .video-section,
.recipe-header + .recipe-video-section{
  margin-top:40px !important;
}


/* Recipe section spacing adjustments */
.video-section + .recipe-photo-tabs-section{
  margin-top:34px !important;
}

.recipe-photo-tabs-section + #recipe-details,
.recipe-photo-tabs-section + .recipe-details,
.recipe-photo-tabs-section + section{
  margin-top:40px !important;
}


/* Use padding instead of collapsible margins so the visual gaps match exactly */

/* Hero → video: true 40px */
.recipe-hero + .video-section{
  margin-top:0 !important;
  padding-top:40px !important;
}

/* Video → gallery: true 34px */
.video-section + .recipe-photo-tabs-section{
  margin-top:0 !important;
  padding-top:34px !important;
}

/* Gallery → Ingredients / How to Make It: true 40px */
.recipe-photo-tabs-section + #recipe-details{
  margin-top:0 !important;
  padding-top:40px !important;
}


/* Exact visible card-edge spacing on recipe pages */

/* Reset stacked spacing on the three relevant sections */
.recipe-hero,
.video-section,
.recipe-photo-tabs-section,
#recipe-details{
  margin-bottom:0 !important;
}

.recipe-hero + .video-section,
.video-section + .recipe-photo-tabs-section,
.recipe-photo-tabs-section + #recipe-details{
  margin-top:0 !important;
}

/* Apply spacing to the inner containers so measurements are from visible panel edge to panel edge */
.recipe-hero + .video-section > .container{
  padding-top:40px !important;
}

.video-section + .recipe-photo-tabs-section > .container{
  padding-top:34px !important;
}

.recipe-photo-tabs-section + #recipe-details > .container{
  padding-top:40px !important;
}

/* Remove outer-section padding that would otherwise stack with the container spacing */
.recipe-hero + .video-section,
.video-section + .recipe-photo-tabs-section,
.recipe-photo-tabs-section + #recipe-details{
  padding-top:0 !important;
}

/* Ensure the gallery card itself does not contribute an extra bottom margin */
.recipe-photo-tabs,
.recipe-photo-tabs-section .container{
  margin-bottom:0 !important;
}


/* Final visible card-edge spacing adjustment */
.recipe-hero + .video-section > .container{
  padding-top:42px !important;
}

.recipe-photo-tabs-section + #recipe-details > .container{
  padding-top:42px !important;
}


/* Final visible card-edge spacing adjustment: 45px */
.recipe-hero + .video-section > .container{
  padding-top:45px !important;
}

.recipe-photo-tabs-section + #recipe-details > .container{
  padding-top:45px !important;
}


/* Ingredients / How to Make It → Share panel: 34px */
#recipe-details + .recipe-share-nav{
  margin-top:34px !important;
}

#recipe-details{
  margin-bottom:0 !important;
  padding-bottom:0 !important;
}

#recipe-details .content-grid{
  padding-bottom:0 !important;
}


/* Mobile recipe-page spacing refinement */
@media (max-width: 620px){

  /* Hero photo → title card */
  .recipe-layout{
    gap:20px !important;
  }

  /* Hero/title section → video panel */
  .recipe-hero + .video-section > .container{
    padding-top:30px !important;
  }

  /* Video panel → 3-photo gallery */
  .video-section + .recipe-photo-tabs-section > .container{
    padding-top:24px !important;
  }

  /* 3-photo gallery → Ingredients / How to Make It */
  .recipe-photo-tabs-section + #recipe-details > .container{
    padding-top:30px !important;
  }

  /* Ingredients → How to Make It */
  #recipe-details .content-grid{
    gap:20px !important;
  }

  /* Ingredients / How to Make It → Share panel */
  #recipe-details + .recipe-share-nav{
    margin-top:24px !important;
  }
}


/* Mobile share buttons: keep every action on one row */
@media (max-width: 620px){
  .recipe-share-buttons{
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:10px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    padding-bottom:4px !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  .recipe-share-buttons::-webkit-scrollbar{
    display:none;
  }

  .recipe-share-button{
    flex:0 0 auto !important;
  }
}


/* Mobile share-row scroll hints */
@media (max-width: 620px){
  .recipe-share-block{
    position:relative;
  }

  .share-scroll-hint{
    position:absolute;
    top:48px;
    z-index:8;
    width:34px;
    height:42px;
    border:0;
    border-radius:999px;
    background:rgba(255,255,255,.96);
    box-shadow:0 4px 14px rgba(0,0,0,.12);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    opacity:0;
    visibility:hidden;
    transform:scale(.9);
    transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
  }

  .share-scroll-hint.is-visible{
    opacity:1;
    visibility:visible;
    transform:scale(1);
  }

  .share-scroll-hint-left{
    left:-4px;
  }

  .share-scroll-hint-right{
    right:-4px;
  }

  .share-scroll-hint svg{
    width:18px;
    height:18px;
    fill:none;
    stroke:currentColor;
    stroke-width:2.4;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .recipe-share-buttons{
    scroll-behavior:smooth;
  }
}


/* Strong mobile share overflow indicators */
@media (max-width: 620px){
  .recipe-share-block{
    position:relative !important;
    overflow:visible !important;
  }

  .recipe-share-buttons{
    position:relative !important;
    padding-right:38px !important;
    padding-left:4px !important;
  }

  .share-scroll-hint{
    position:absolute !important;
    top:38px !important;
    width:36px !important;
    height:36px !important;
    border:1px solid rgba(0,0,0,.10) !important;
    border-radius:999px !important;
    background:#ffffff !important;
    color:#111111 !important;
    box-shadow:0 5px 16px rgba(0,0,0,.18) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    z-index:50 !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:none !important;
  }

  .share-scroll-hint.is-visible{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  .share-scroll-hint-left{
    left:2px !important;
  }

  .share-scroll-hint-right{
    right:2px !important;
  }

  .share-scroll-hint svg{
    width:19px !important;
    height:19px !important;
    stroke:#111111 !important;
  }
}


/* Minimal, aligned mobile share-scroll arrows */
@media (max-width: 620px){
  .recipe-share-block{
    position:relative !important;
  }

  .recipe-share-buttons{
    padding-left:0 !important;
    padding-right:28px !important;
  }

  .share-scroll-hint{
    top:37px !important;
    width:24px !important;
    height:42px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:linear-gradient(
      to right,
      rgba(255,255,255,0),
      rgba(255,255,255,.92) 42%,
      #fff 72%
    ) !important;
    color:#181818 !important;
    box-shadow:none !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    z-index:50 !important;
  }

  .share-scroll-hint-left{
    left:0 !important;
    justify-content:flex-start !important;
    background:linear-gradient(
      to left,
      rgba(255,255,255,0),
      rgba(255,255,255,.92) 42%,
      #fff 72%
    ) !important;
  }

  .share-scroll-hint-right{
    right:0 !important;
  }

  .share-scroll-hint svg{
    width:15px !important;
    height:15px !important;
    stroke:#181818 !important;
    stroke-width:2.15 !important;
  }
}


/* Fine-tune mobile share arrows: center with icon row */
@media (max-width: 620px){
  .share-scroll-hint{
    top:33px !important;
  }
}


/* Fine-tune mobile share arrows: move slightly higher */
@media (max-width: 620px){
  .share-scroll-hint{
    top:30px !important;
  }
}


/* Fine-tune mobile share arrows: move 3px higher */
@media (max-width: 620px){
  .share-scroll-hint{
    top:27px !important;
  }
}


/* Final mobile share-arrow position: 1px lower */
@media (max-width: 620px){
  .share-scroll-hint{
    top:28px !important;
  }
}


/* Desktop safeguard: mobile share-scroll arrows must never render */
@media (min-width: 621px){
  .share-scroll-hint{
    display:none !important;
    width:0 !important;
    height:0 !important;
    min-width:0 !important;
    min-height:0 !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    overflow:hidden !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
}


/* Mobile interactive 3-photo gallery */
@media (max-width: 620px){
  .recipe-photo-tabs{
    overflow:hidden !important;
  }

  .photo-tab-stage{
    display:flex !important;
    align-items:stretch !important;
    gap:6px !important;
    overflow:visible !important;
  }

  .photo-tab-panel{
    position:relative !important;
    inset:auto !important;
    flex:1 1 0 !important;
    min-width:0 !important;
    opacity:1 !important;
    transform:none !important;
    filter:brightness(.72) saturate(.88) !important;
    transition:
      flex-grow .34s ease,
      filter .34s ease,
      transform .34s ease,
      opacity .34s ease !important;
    cursor:pointer !important;
    overflow:hidden !important;
    border-radius:14px !important;
  }

  .photo-tab-panel.active{
    flex-grow:1.45 !important;
    filter:brightness(1) saturate(1) !important;
    transform:scale(1.015) !important;
    z-index:2 !important;
  }

  .photo-tab-panel img{
    width:100% !important;
    height:100% !important;
    min-height:120px !important;
    object-fit:cover !important;
    transition:transform .34s ease !important;
  }

  .photo-tab-panel.active img{
    transform:scale(1.03) !important;
  }
}


/* Mobile featured carousel swipe affordance */
@media (max-width: 620px){
  [data-featured-carousel]{
    touch-action:pan-y !important;
    cursor:grab;
  }

  [data-featured-carousel]:active{
    cursor:grabbing;
  }

  [data-featured-carousel] .featured-slide{
    will-change:transform, opacity;
  }
}