/* Navigation and product carousel shared visually with the WordPress header. */
@font-face{font-family:Pinar;src:url('/assets/hero-v3/fonts/Pinar-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Pinar;src:url('/assets/hero-v3/fonts/Pinar-Medium.ttf') format('truetype');font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:Pinar;src:url('/assets/hero-v3/fonts/Pinar-Bold.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:Pinar;src:url('/assets/hero-v3/fonts/Pinar-Black.ttf') format('truetype');font-style:normal;font-weight:900;font-display:swap}
.floor-glow{display:none!important}
.studio-backdrop .color-field{
  left:calc(-22vw + 80px);top:calc(-27svh - 80px);width:min(90vw,1250px);height:auto;aspect-ratio:1;
  border-radius:0!important;box-shadow:none!important;filter:none!important;
  background:none!important;opacity:1!important;overflow:visible;
  transform:rotate(var(--hex-angle,0deg))!important;
  transition:none!important;
  will-change:transform;
  transform-origin:50% 50%;
}
.color-field svg{display:block;width:100%;height:100%;overflow:visible}
.color-field svg path{filter:none!important}
.hero-copy{background:transparent!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important}
.flavor-tag{background:transparent!important;box-shadow:none!important;padding:0!important;border-radius:0!important}
.showcase{--hero-type-display:clamp(40px,3.4vw,52px);--hero-type-heading:clamp(30px,2.6vw,40px);--hero-type-body:16px;--hero-type-small:14px;--hero-type-caption:12px}
.hero-copy h1{font-size:var(--hero-type-display);line-height:1.22;white-space:pre-line}
.hero-copy small{font-size:var(--hero-type-caption);line-height:1.5;opacity:.85;max-width:none}
.flavor-tag{font-size:var(--hero-type-small);line-height:1.5}
.product-loading{position:absolute;left:19%;top:49%;z-index:4;margin:0;color:#073044;font-size:16px;font-weight:700;pointer-events:none}
.product-loading[hidden]{display:none}
.store h2{font-size:var(--hero-type-heading);line-height:1.3;white-space:pre-line}
.product-row{font-size:var(--hero-type-body);line-height:1.4}
.product-row .weight,.caption,.list-head{font-size:var(--hero-type-caption);line-height:1.4}
.explore{font-size:var(--hero-type-small);line-height:1.4}
footer{font-size:var(--hero-type-caption)}
.progress i{animation-duration:2s!important}
.showcase[data-slide="0"] #hex-fill stop:nth-child(1){stop-color:#fff1d5}
.showcase[data-slide="0"] #hex-fill stop:nth-child(2){stop-color:#ffd28d}
.showcase[data-slide="0"] #hex-fill stop:nth-child(3){stop-color:#f5af58}
.showcase[data-slide="1"] #hex-fill stop:nth-child(1){stop-color:#fff0e8}
.showcase[data-slide="1"] #hex-fill stop:nth-child(2){stop-color:#ffc4b1}
.showcase[data-slide="1"] #hex-fill stop:nth-child(3){stop-color:#f28b76}
.showcase[data-slide="2"] #hex-fill stop:nth-child(1){stop-color:#deeee7}
.showcase[data-slide="2"] #hex-fill stop:nth-child(2){stop-color:#9cc9b8}
.showcase[data-slide="2"] #hex-fill stop:nth-child(3){stop-color:#6b9e9c}
#hex-fill stop{transition:stop-color .75s}
.showcase>header{z-index:35;justify-content:space-between;pointer-events:auto}
.hero-menu-toggle{width:56px;height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-radius:50%;background:#fffaf2e8;border:1px solid #07304424;box-shadow:0 4px 12px #07304414;position:relative;z-index:42;transition:background .2s,transform .2s}
.hero-menu-toggle:hover{background:#fff;transform:translateY(-2px)}
.hero-menu-toggle span{display:block;width:22px;height:2px;border-radius:2px;background:#073044;transition:transform .25s,opacity .25s}
.hero-menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(8px) rotate(45deg)}
.hero-menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.hero-menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-8px) rotate(-45deg)}
.showcase>header .ring-logo{z-index:42;filter:none}
.hero-menu{position:absolute;inset:0;z-index:30;background:radial-gradient(circle at 9% 90%,#f6c87655,transparent 30%),#f8f4ea;display:flex;align-items:center;justify-content:center;padding:100px 7% 50px;direction:rtl;overflow-x:hidden;overflow-y:auto;animation:menu-arrive .36s ease both}
.hero-menu[hidden]{display:none!important}
.hero-menu:focus{outline:none}
.hero-menu-inner{position:relative;width:min(980px,100%);margin:auto}
.hero-menu-kicker,.hero-menu-foot{font:600 11px Arial,sans-serif;letter-spacing:2px;color:#b75a1c;direction:ltr}
.hero-menu-inner p{font-size:clamp(25px,3vw,42px);font-weight:900;margin:10px 0 26px;color:#073044}
.hero-menu nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 58px;max-width:900px}
.hero-menu nav a{display:block;padding:11px 0;border-bottom:1px solid #07304424;color:#073044;font-size:clamp(18px,2.2vw,32px);font-weight:800;transition:color .2s,padding .2s}
.hero-menu nav a:hover,.hero-menu nav a:focus-visible{color:#de6a26;padding-right:12px}
.hero-menu-foot{position:absolute;bottom:32px;left:6%}
@keyframes menu-arrive{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
.showcase.menu-open .dock,.showcase.menu-open .store,.showcase.menu-open .hero-copy,.showcase.menu-open .product-stage,.showcase.menu-open .fallback-jar,.showcase.menu-open .orbit-fruit{visibility:hidden}
@media(max-width:700px){
  .showcase{--hero-type-display:clamp(28px,7.7vw,32px);--hero-type-heading:26px;--hero-type-body:15px;--hero-type-small:14px;--hero-type-caption:12px}
  .hero-copy{top:8%;width:76%}
  .hero-copy h1 br{display:block}
  .product-loading{left:35%;top:43%;font-size:14px}
  .store{top:58%}
  .studio-backdrop .color-field{left:calc(-35vw + 80px);top:calc(-1svh - 80px);width:135vw;height:auto;aspect-ratio:1}
  .triangle-one,.triangle-two,.brand-square{display:none!important}
  .hero-menu-toggle{width:48px;height:48px;gap:5px}
  .hero-menu-toggle span{width:20px}
  .hero-menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(7px) rotate(45deg)}
  .hero-menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-7px) rotate(-45deg)}
  .hero-menu{padding:96px 7% 45px;align-items:flex-start}
  .hero-menu-inner{margin:0}
  .hero-menu-inner p{margin-bottom:16px}
  .hero-menu nav{grid-template-columns:1fr;gap:0}
  .hero-menu nav a{font-size:22px;padding:10px 0}
  .hero-menu-foot{bottom:18px;font-size:8px}
}
@media(max-width:700px) and (max-height:700px){
  .showcase{--hero-type-display:26px;--hero-type-heading:22px}
  .hero-copy{top:10%}
}
@media(prefers-reduced-motion:reduce){.studio-backdrop .color-field,.hero-menu{transition:none!important;animation:none!important}}

/* Reference typography: PINAR Black/Bold/Medium/Regular at the supplied desktop sizes. */
.showcase{--hero-type-display:clamp(38px,3.62vw,52px);--hero-type-heading:clamp(30px,2.5vw,36px);--hero-type-body:17px;--hero-type-small:17px;--hero-type-caption:14px;font-family:Pinar,Vazirmatn,sans-serif;color:#00344b}
.showcase button,.showcase a{font-family:inherit}
.hero-copy{color:#00344b!important}
.hero-copy h1{font-weight:900;line-height:1.2}
.hero-copy small{font-family:Pinar,Vazirmatn,sans-serif;font-size:14px;font-weight:500;letter-spacing:0;color:#00344b;opacity:1}
.flavor-tag{font-size:17px;font-weight:400;line-height:1.65;color:#3b4b5a}
.store h2{font-size:var(--hero-type-heading);font-weight:700;color:#00344b}
.store .caption,.list-head{font-family:Pinar,Vazirmatn,sans-serif;font-size:14px;font-weight:400;color:#6b7280}
.product-row{font-size:17px;font-weight:500;color:#00344b;grid-template-columns:minmax(0,1fr) 54px 62px 26px;gap:10px}
.product-row .weight{font-size:14px;font-weight:400;color:#6b7280}
.product-row img{width:62px;height:72px;object-fit:contain}
.explore{font-size:15px;font-weight:500}
.showcase footer{font-size:15px;font-weight:400;color:#6b7280}
.showcase footer .counter{font-family:Pinar,Vazirmatn,sans-serif;font-size:14px;font-weight:500;letter-spacing:0}

/* Slightly tighter product cards while allowing their package images to read clearly. */
.store{width:clamp(320px,28vw,400px);right:6%}
.product-row{height:clamp(76px,10vh,96px);padding:8px 15px}

/* Each fruit cutout has its own visual layer, so gentle idle movement never fights the slide transform. */
.orbit-fruit{background-image:none!important}
.fruit-visual{display:block;width:100%;height:100%;background-image:url('/assets/hero-v3/ae70bc29163ab5c6.webp');background-repeat:no-repeat;background-size:300% 200%;animation:fruit-breathe 4.1s ease-in-out infinite;will-change:transform}
.fruit-a .fruit-visual{--float-x:4px;--float-y:-7px;animation-delay:-1.1s}
.fruit-b .fruit-visual{--float-x:-5px;--float-y:5px;animation-delay:-2.4s;animation-duration:4.5s}
.fruit-c .fruit-visual{--float-x:3px;--float-y:-5px;animation-delay:-3.1s;animation-duration:3.8s}
@keyframes fruit-breathe{0%,100%{transform:translate3d(0,0,0) rotate(-2deg)}50%{transform:translate3d(var(--float-x),var(--float-y),0) rotate(3deg)}}
.showcase.paused .fruit-visual{animation-play-state:paused}
.showcase[data-decorations="0"] .fruit-a .fruit-visual{background-position:0 100%}
.showcase[data-decorations="0"] .fruit-b .fruit-visual{background-position:50% 100%}
.showcase[data-decorations="0"] .fruit-c .fruit-visual{background-position:0 100%}
.showcase[data-decorations="1"] .fruit-a .fruit-visual,.showcase[data-decorations="1"] .fruit-b .fruit-visual{background-image:url('/assets/hero-v3/strawberry-slice-v2.webp');background-size:contain;background-position:center}
.showcase[data-decorations="1"] .fruit-c .fruit-visual{background-image:url('/assets/hero-v3/strawberry-whole-v2.webp');background-size:contain;background-position:center}
.showcase[data-decorations="1"] .fruit-a{left:26%;top:57%;width:clamp(88px,9vw,130px);height:clamp(82px,8vw,115px)}
.showcase[data-decorations="1"] .fruit-b{left:60%;top:26%;width:clamp(78px,7.5vw,108px);height:clamp(75px,7vw,100px)}
.showcase[data-decorations="1"] .fruit-c{left:28%;top:25%;width:clamp(75px,7vw,102px);height:clamp(78px,7.3vw,105px)}
.showcase[data-decorations="2"] .fruit-visual{background-image:url('/assets/hero-v3/0ed013339cef02d2.webp');background-size:300% 100%}
.showcase[data-decorations="2"] .fruit-a .fruit-visual{background-position:0 0}
.showcase[data-decorations="2"] .fruit-b .fruit-visual{background-position:50% 0}
.showcase[data-decorations="2"] .fruit-c .fruit-visual{background-position:100% 0}
@media(max-width:700px){
  .showcase{--hero-type-display:clamp(27px,7.7vw,33px);--hero-type-heading:24px;--hero-type-body:14px;--hero-type-small:13px;--hero-type-caption:11px}
  .hero-copy small{font-size:10px}
  .flavor-tag{font-size:12px}
  .store{width:88%;right:6%}
  .store h2{font-size:24px}
  .product-row{height:clamp(52px,7.3svh,66px);grid-template-columns:minmax(0,1fr) 39px 50px 24px;gap:6px;padding:5px 11px;font-size:14px}
  .product-row .weight{font-size:11px}
  .product-row img{width:50px;height:50px}
  .explore{font-size:12px}
  .showcase footer{font-size:11px}
  .showcase[data-decorations="1"] .fruit-a{left:25%;top:44%;width:75px;height:69px}
  .showcase[data-decorations="1"] .fruit-b{left:75%;top:29%;width:65px;height:60px}
  .showcase[data-decorations="1"] .fruit-c{left:26%;top:26%;width:70px;height:73px}
}
@media(prefers-reduced-motion:reduce){.fruit-visual{animation:none!important;transform:none!important}}