/* Sea Pop ingredient illustrations and packaging-inspired visual layer. */
.hero{position:relative;isolation:isolate;background:#edf6fa;padding-bottom:30px}
.hero:before{content:"";position:absolute;inset:0;background:url('assets/sea-pop-pattern.svg') right top/780px auto no-repeat;opacity:.17;pointer-events:none;z-index:0}
.hero>.container{position:relative;z-index:1}
.hero-visual{border-radius:70px 7px 70px 7px}
.hero-facts{border-color:#c4dce7}
.cajun-tag{box-shadow:4px 4px 0 var(--yellow)}
.ingredient-break{position:relative;height:178px;display:flex;align-items:center;isolation:isolate;--anchor:20%;--tilt:-12deg}
.ingredient-break--mussel{--anchor:72%;--tilt:12deg}
.ingredient-break--corn{--anchor:25%;--tilt:-17deg}
.ingredient-break--potato{--anchor:68%;--tilt:11deg}
.ingredient-break--chorizo{--anchor:32%;--tilt:-12deg}
.ingredient-break--chorizo .pop-spark{fill:#ff6339;transform:rotate(-12deg)}
.ingredient-trail{position:absolute;inset:9px 0 0;width:100%;height:160px;pointer-events:none;z-index:-1}
.ingredient-trail path{stroke:#8fc8db;stroke-width:2;stroke-dasharray:3 10;stroke-linecap:round}
.ingredient-sticker{position:relative;width:170px;flex:none;margin-left:var(--anchor);transform:translateX(-50%)}
.ingredient-float{transform:rotate(var(--tilt));animation:ingredient-bob 8s ease-in-out infinite;animation-play-state:paused;filter:drop-shadow(5px 7px 0 #123c6815)}
.ingredient-break.in-view .ingredient-float{animation-play-state:running}
.ingredient-sticker:hover .ingredient-float{animation-play-state:paused}
.ingredient-sticker img{width:170px;height:170px;object-fit:contain}
.ingredient-tag{position:absolute;bottom:8px;left:50%;transform:translateX(-50%) rotate(-5deg);background:var(--yellow);color:var(--navy);padding:5px 16px;border-radius:50% 45% 48% 39% / 25% 43% 29% 36%;font-size:13px;font-weight:700;line-height:1.2;white-space:nowrap;box-shadow:2px 3px 0 #123c681c}
.ingredient-break--mussel .ingredient-tag,.ingredient-break--potato .ingredient-tag{background:#ff6339;color:#fff;transform:translateX(-50%) rotate(5deg)}
.pop-spark{position:absolute;width:44px;height:44px;left:calc(var(--anchor) + 92px);top:26px;transform:rotate(12deg);fill:var(--yellow);stroke:var(--navy);stroke-width:1.2}
.ingredient-break--corn .pop-spark{fill:#ff6339;transform:rotate(-12deg)}
.product{padding-top:28px;padding-bottom:45px}
.product-visual{min-height:600px;border-radius:35px 100px 35px 35px;background:#7cc9e4 url('assets/sea-pop-pattern.svg') center/cover}
.product-visual>img{inset:60px 0 0;height:calc(100% - 60px);border-radius:48% 48% 0 0 / 30% 30% 0 0;object-position:center}
.product-visual:before{content:"";position:absolute;top:15px;left:25px;width:145px;height:70px;background:#fff url('assets/sea-pop-logo.webp') center/125px auto no-repeat;border-radius:0 0 24px 24px;z-index:2;transform:rotate(-5deg)}
.benefits{overflow:hidden}
.benefits:before{content:"";position:absolute;inset:0;background:url('assets/sea-pop-pattern.svg') center/800px auto repeat;opacity:.075;pointer-events:none}
.benefits-inner{position:relative}
.preparation{padding-top:35px;padding-bottom:42px}
.story-gallery{padding-top:12px;padding-bottom:22px}
.story-heading{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:32px;gap:30px}
.story-heading h2{font-size:48px;text-align:right}
.story-heading .eyebrow{margin:0 0 5px}
.story-frames{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px}
.story-frames figure:nth-child(1){transform:rotate(-2deg)}
.story-frames figure:nth-child(3){transform:rotate(2deg)}
.story-photo{aspect-ratio:1.7;overflow:hidden;background:var(--light-blue);border-radius:36px 8px 36px 8px;box-shadow:0 6px 0 #123c6810}
.story-photo svg{display:block;width:100%;height:100%}
.story-frames figcaption{display:flex;align-items:center;gap:12px;margin-top:20px;color:var(--navy)}
.story-number{display:grid;place-items:center;width:39px;height:39px;border-radius:50%;background:var(--yellow);font-family:var(--display);font-size:20px;flex:none;transform:rotate(-8deg)}
.story-frames figcaption div{display:flex;flex-direction:column;gap:3px}
.story-frames figcaption strong{font-size:18px;line-height:1.2}
.story-frames figcaption div>span{font-size:12px;color:var(--muted)}
.story-note{font-size:11px;color:var(--muted);margin:28px 0 0}
.final-cta{position:relative;overflow:hidden}
.final-cta:before{content:"";position:absolute;inset:0;background:url('assets/sea-pop-pattern.svg') right center/650px auto no-repeat;opacity:.09;pointer-events:none}
@keyframes ingredient-bob{0%,100%{transform:translateY(0) rotate(var(--tilt))}50%{transform:translateY(-8px) rotate(calc(var(--tilt) + 5deg))}}
@media(max-width:959px){.ingredient-break{height:155px}.ingredient-sticker,.ingredient-sticker img{width:145px;height:145px}.pop-spark{left:calc(var(--anchor) + 73px);width:34px;height:34px}.product{padding-top:24px;padding-bottom:30px}.product-visual{min-height:570px}.story-frames{gap:19px}.story-frames figcaption{gap:9px}.story-frames figcaption strong{font-size:16px}.story-number{width:32px;height:32px;font-size:18px}.story-heading h2{font-size:42px}}
@media(max-width:719px){.hero{padding-bottom:15px}.hero:before{background-size:600px auto}.hero-visual{border-radius:40px 7px 40px 7px}.ingredient-break{height:126px;--anchor:26%}.ingredient-break--mussel,.ingredient-break--potato{--anchor:66%}.ingredient-sticker,.ingredient-sticker img{width:118px;height:118px}.ingredient-float{animation:none}.ingredient-tag{font-size:11px;padding:4px 12px;bottom:4px}.ingredient-trail{height:118px;inset:0}.pop-spark{width:27px;height:27px;left:calc(var(--anchor) + 58px);top:22px}.product{padding-top:18px;padding-bottom:12px}.product-visual{min-height:0;aspect-ratio:1.16;border-radius:25px 70px 25px 25px}.product-visual:before{width:112px;height:55px;background-size:97px auto;left:18px;top:12px}.product-visual>img{inset:43px 0 0;height:calc(100% - 43px)}.photo-label{font-size:34px}.preparation{padding-top:20px;padding-bottom:30px}.story-gallery{padding-top:5px;padding-bottom:10px}.story-heading{display:block;margin-bottom:25px}.story-heading .eyebrow{margin-bottom:14px}.story-heading h2{text-align:left;font-size:43px}.story-frames{grid-template-columns:1fr;gap:30px;padding:0 6px}.story-frames figure:nth-child(1){transform:rotate(-1deg)}.story-frames figure:nth-child(3){transform:rotate(1deg)}.story-photo{aspect-ratio:1.9;border-radius:30px 7px 30px 7px}.story-frames figcaption{margin-top:15px;gap:12px}.story-frames figcaption strong{font-size:18px}.story-frames figcaption div>span{font-size:13px}.story-number{width:36px;height:36px;font-size:20px}.story-note{margin-top:23px;line-height:1.5}}
@media(prefers-reduced-motion:reduce){.ingredient-float{animation:none!important}.story-frames figure{transform:none!important}}
@media print{.ingredient-break,.story-gallery,.hero:before,.benefits:before,.final-cta:before{display:none!important}.hero{background:#fff}.product-visual{background:#fff}}

.ingredient-break--chorizo+.product-details{padding-top:35px}
@media(max-width:719px){.ingredient-break--chorizo+.product-details{padding-top:22px}}

/* The DE/FR packaging artwork needs a wide view without side cropping. */
.hero--print-update .hero-layout{display:block}
.hero--print-update .hero-copy{display:grid;grid-template-columns:1fr 1fr;gap:0 70px;padding:8px 0 35px;align-items:start}
.hero--print-update .hero-copy>.eyebrow{grid-column:1/-1;margin-bottom:20px}
.hero--print-update h1{grid-column:1;grid-row:2/span 3}
.hero--print-update .hero-description{grid-column:2;grid-row:2;margin:0 0 23px;max-width:490px}
.hero--print-update .hero-actions{grid-column:2;grid-row:3;flex-direction:row;flex-wrap:wrap;align-items:center;gap:20px}
.hero--print-update .link-note{grid-column:2;grid-row:4;margin-top:14px}
.hero--print-update .hero-visual{min-height:0;aspect-ratio:16/9;align-self:auto;border-radius:48px 7px 48px 7px;background:#f0e4d6}
.hero--print-update .hero-visual>img{object-fit:contain;object-position:center}
.hero--print-update .hero-facts{margin-top:26px}
@media(max-width:959px){.hero--print-update .hero-copy{gap:0 35px}.hero--print-update .hero-description{font-size:15px}.hero--print-update .hero-actions{gap:18px}.hero--print-update .hero-visual{min-height:0}}
@media(max-width:719px){.hero--print-update .hero-copy{display:block;padding:4px 0 25px}.hero--print-update .hero-description{margin:22px 0;max-width:none}.hero--print-update .hero-visual{min-height:0;aspect-ratio:16/9;border-radius:25px 5px 25px 5px}.hero--print-update .time-stamp{width:58px;height:58px;right:10px;top:10px}.hero--print-update .time-stamp strong{font-size:31px}.hero--print-update .time-stamp span{font-size:8px}.hero--print-update .hero-visual figcaption{font-size:9px;right:10px;bottom:10px}.hero--print-update .hero-facts{margin-top:22px}}
