/** Shopify CDN: Minification failed

Line 14:0 All "@import" rules must come first

**/
/* ============================================================
   CRAVY FRIES — landing styles (verbatim design tokens + the
   standalone build's keyframes/hover CSS). Loaded on the homepage.
   ============================================================ */

/* ---- Self-hosted brand fonts ---- */
@font-face{font-family:'Cravyy';src:url('cravyy.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Cartoonist';src:url('cartoonist.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Luckiest+Guy&family=Montserrat:wght@400;500;600;700;800&family=Poppins:wght@400;500;600;700&family=Six+Caps&display=swap');

/* ---- Colors (verbatim from tokens/colors.css) ---- */
:root{
--cravy-red:#E90000;--cravy-orange:#FE4100;--cravy-black:#000000;--cravy-yellow:#FB9D00;
--cravy-maroon:#411215;--cravy-green:#1B5536;--cravy-white:#F7F5F7;--cravy-tag-red:#DD2D35;
--cravy-ink:#221F20;--line-gray:#A6A6A6;--line-gray-dark:#515151;
--brand-primary:var(--cravy-red);--surface-page:#FFFFFF;--surface-panel:var(--cravy-black);
--surface-rail:var(--cravy-red);--text-body:#000000;--text-on-color:#FFFFFF;--text-muted:rgba(255,255,255,0.5);
/* Typography (verbatim from tokens/typography.css) */
--font-display:'Cartoonist','Luckiest Guy',cursive;
--font-statement:'Cravyy','Anton',sans-serif;
--font-compressed:'Six Caps',sans-serif;
--font-body:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
--font-alt:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
--lh-display:0.9;--lh-subhead:1.0;--lh-body:1.2;
--size-statement:190.439px;--size-section:120px;--size-cover:100px;--size-heading:40px;
--size-subhead:32px;--size-body:24px;--size-label:20px;--size-caption:16px;--size-toc:21.455px;
}

/* ---- Standalone build's page-level CSS (verbatim from index-standalone.html) ---- */
.cravy-site,.cravy-site *{box-sizing:border-box}
.cravy-site h1,.cravy-site h2{font-family:var(--font-statement);font-weight:400;font-size:173px;line-height:128px;letter-spacing:-17px;text-transform:uppercase;margin:0}
.cravy-site a{color:var(--cravy-red)}.cravy-site a:hover{color:var(--cravy-orange)}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(-10px*var(--k,1)))}}
.rv{opacity:0;transition:opacity .7s cubic-bezier(.22,.9,.3,1),transform .7s cubic-bezier(.22,.9,.3,1)}
.rv-up{transform:translateY(calc(60px*var(--k,1)))}
.rv-tiltl{transform:translateY(calc(70px*var(--k,1))) rotate(calc(-4deg*var(--k,1)))}
.rv-tiltr{transform:translateY(calc(70px*var(--k,1))) rotate(calc(4deg*var(--k,1)))}
.rv.on{opacity:1;transform:none}
.pcard{transition:transform .3s cubic-bezier(.22,.9,.3,1),box-shadow .3s}
.pcard:hover{transform:translateY(calc(-8px*var(--k,1))) rotate(calc(-1deg*var(--k,1)));box-shadow:8px 10px 0 rgba(0,0,0,0.25)}
.addbtn:hover{background:var(--cravy-red) !important}
.whybtn{transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.whybtn span{transition:background .2s,color .2s,box-shadow .25s;box-shadow:0 4px 0 rgba(0,0,0,0.18)}
.whybtn:hover{transform:translateY(-4px) rotate(calc(-1.5deg*var(--k,1))) scale(1.04)}
.whybtn:hover span{background:#000 !important;color:#fff !important;box-shadow:0 8px 0 rgba(0,0,0,0.22)}
/* Cravy: normalize product-card image height so every packet renders the same size (crinkle's canvas is a different aspect ratio) */
#product-grid .card__inner,#product-grid .card__media{aspect-ratio:664/830 !important;height:auto !important;padding-bottom:0 !important}
#product-grid .card__media img{object-fit:contain !important}
.ft-link:hover{opacity:1 !important;padding-left:10px !important}
.herobtn{transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s,background .2s,color .2s;box-shadow:0 4px 0 rgba(0,0,0,0.25)}
.herobtn:hover{transform:translateY(-4px) rotate(calc(-1.5deg*var(--k,1))) scale(1.04);box-shadow:0 10px 0 rgba(0,0,0,0.25);background:#000;color:#fff}
.herobtn:active{transform:translateY(0) scale(0.98);box-shadow:0 2px 0 rgba(0,0,0,0.25)}
.herobtn-lite:hover{background:var(--cravy-yellow);color:#000}
.herobtn-dark:hover{background:var(--cravy-red);color:#fff}
@keyframes fadein{from{opacity:0;transform:translateY(calc(26px*var(--k,1)))}to{opacity:1;transform:none}}
@keyframes load{from{width:0}to{width:100%}}
.socialbtn{transition:transform .25s cubic-bezier(.34,1.56,.64,1),background .2s}
.socialbtn:hover{transform:translateY(-3px) scale(1.03);background:#000 !important}
.socard{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.socard:hover{transform:scale(1.04) rotate(0deg) !important}
.fadein-1{animation:fadein .9s cubic-bezier(.22,.9,.3,1) .15s both}
.fadein-2{animation:fadein .9s cubic-bezier(.22,.9,.3,1) .35s both}
.fadein-3{animation:fadein .9s cubic-bezier(.22,.9,.3,1) .55s both}
@media(max-width:768px){.cravy-site h1,.cravy-site h2{font-size:clamp(52px,15vw,72px);line-height:0.92;letter-spacing:-4px}}

/* image-slot fallback (outside the design runtime it just shows its src) */
image-slot{display:block;width:100%;height:100%}
image-slot img{width:100%;height:100%;object-fit:cover;display:block}