/* Sketchbook watercolor finish. Decorative layers stay behind interactive content. */
body{
  background-color:#fbf5e8;
  background-image:
    linear-gradient(rgba(255,255,255,.28),rgba(255,255,255,.28)),
    url("data:image/svg+xml,%3Csvg width='220' height='220' viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3Cpath d='M0 35h220M0 105h220M0 174h220' stroke='%238b7652' stroke-opacity='.055'/%3E%3C/svg%3E");
}
main{position:relative;isolation:isolate}
main:before,main:after{content:'';position:absolute;z-index:-2;pointer-events:none;filter:blur(2px);opacity:.55}
main:before{top:610px;left:-100px;width:290px;height:240px;background:radial-gradient(ellipse at 45% 55%,rgba(185,66,39,.14),rgba(221,137,75,.09) 43%,transparent 70%);border-radius:46% 54% 62% 38%/55% 37% 63% 45%;transform:rotate(13deg)}
main:after{top:1080px;right:-120px;width:330px;height:290px;background:radial-gradient(ellipse at 50% 50%,rgba(71,116,71,.15),rgba(150,173,101,.08) 48%,transparent 72%);border-radius:58% 42% 36% 64%/43% 57% 43% 57%;transform:rotate(-17deg)}
.header{background-color:rgba(251,245,232,.9);background-image:linear-gradient(90deg,transparent,rgba(178,151,94,.06),transparent);box-shadow:0 4px 20px rgba(73,54,29,.035)}
.brand{position:relative;text-shadow:.6px .5px 0 rgba(41,76,53,.18)}
.brand:after{content:'';position:absolute;left:-3px;right:-8px;bottom:-7px;height:7px;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 150 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 7c25-5 48 3 72-1s47 2 74-3' fill='none' stroke='%23b94227' stroke-width='2' stroke-linecap='round' opacity='.65'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.hero{position:relative;background:rgba(255,251,240,.67);box-shadow:0 15px 38px rgba(75,57,30,.07),inset 0 0 60px rgba(218,182,106,.07)}
.hero:before,.hero:after{content:'';position:absolute;pointer-events:none;mix-blend-mode:multiply}
.hero:before{inset:3% 3% 5% 48%;background:radial-gradient(ellipse at 50% 50%,rgba(225,163,61,.19),rgba(221,110,55,.08) 47%,transparent 72%);border-radius:61% 39% 48% 52%/43% 54% 46% 57%;transform:rotate(-8deg)}
.hero:after{left:4%;bottom:7%;width:190px;height:90px;background:radial-gradient(ellipse,rgba(105,145,83,.12),transparent 68%);transform:rotate(8deg)}
.hero-copy,.hero-art{position:relative;z-index:1}
.hero-art .hero-drink,.product-art .drink-svg,.builder-dialog .live-drink .drink-svg{mix-blend-mode:multiply;filter:saturate(.91) contrast(.96) drop-shadow(3px 7px 4px rgba(83,63,35,.12))}
.hero-art .art-ring{opacity:.72}.round-stamp{background:rgba(251,245,232,.44);backdrop-filter:blur(1px)}
h1,h2,.product h3,.preview h2{text-wrap:balance;text-shadow:.4px .4px 0 rgba(74,52,25,.13)}
.section-heading h2,.custom-entry h2{position:relative;display:inline-block}
.section-heading h2:after,.custom-entry h2:after{content:'';position:absolute;left:1%;right:8%;bottom:-9px;height:8px;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 240 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 7c40 2 63-4 104 0s74-3 129 1' fill='none' stroke='%23b94227' stroke-width='3' stroke-linecap='round' opacity='.52'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.ticker{background:rgba(255,253,247,.53);box-shadow:inset 0 0 20px rgba(153,118,56,.045)}
#products .product{position:relative;background:rgba(255,253,247,.77);border-color:rgba(105,82,46,.15);box-shadow:0 11px 30px rgba(72,52,24,.075)}
#products .product:before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(137deg,rgba(255,255,255,.68),rgba(235,215,170,.09));transform:rotate(.45deg)}
#products .product-art{position:relative;background-color:#f8edda;background-image:radial-gradient(ellipse at 43% 53%,rgba(231,177,70,.18),transparent 58%),radial-gradient(ellipse at 72% 28%,rgba(185,66,39,.07),transparent 43%)}
#products .product:nth-child(3n+2) .product-art{background-image:radial-gradient(ellipse at 48% 52%,rgba(190,76,45,.15),transparent 61%),radial-gradient(ellipse at 22% 24%,rgba(235,179,62,.1),transparent 42%)}
#products .product:nth-child(3n) .product-art{background-image:radial-gradient(ellipse at 51% 50%,rgba(107,145,76,.13),transparent 60%),radial-gradient(ellipse at 78% 26%,rgba(206,93,51,.09),transparent 40%)}
.product-tag{border-radius:2px 5px 3px 6px;box-shadow:1px 3px 7px rgba(80,57,25,.1);transform:rotate(-2deg)!important}.product:nth-child(even) .product-tag{transform:rotate(2deg)!important}
.custom-entry{overflow:hidden;background-color:rgba(240,237,211,.7);background-image:radial-gradient(ellipse at 9% 20%,rgba(111,148,77,.16),transparent 36%),radial-gradient(ellipse at 91% 80%,rgba(221,157,54,.15),transparent 42%)}
.custom-entry:after{content:'';position:absolute;right:15%;top:-45px;width:160px;height:110px;border:2px solid rgba(185,66,39,.13);border-radius:50%;transform:rotate(-14deg);pointer-events:none}
.how{background:rgba(255,253,247,.63);box-shadow:inset 0 0 36px rgba(191,153,82,.045)}
.how-step>span{border-radius:48% 52% 44% 56%/57% 43% 55% 45%;box-shadow:inset 0 0 10px rgba(166,115,44,.09)}
.builder-dialog,.builder-dialog .config,#cart-dialog{background-color:#fbf5e8;background-image:url("data:image/svg+xml,%3Csvg width='140' height='140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E")}
.builder-dialog .preview{background-color:#eee3bf;background-image:repeating-linear-gradient(0deg,transparent 0 31px,rgba(107,86,44,.055) 32px),radial-gradient(ellipse at 70% 58%,rgba(216,143,50,.15),transparent 58%),radial-gradient(ellipse at 17% 82%,rgba(105,151,79,.11),transparent 38%)}
.choice{box-shadow:0 2px 5px rgba(72,52,24,.035)}.choice.active{box-shadow:inset 0 0 18px rgba(255,255,255,.055),0 3px 9px rgba(41,76,53,.11)}
.selection-summary{background-color:rgba(233,239,218,.87);background-image:radial-gradient(ellipse at 20% 50%,rgba(128,159,91,.07),transparent 60%)}
.button,.cart-trigger,.order-bar{box-shadow:0 7px 18px rgba(41,76,53,.14)}
footer{position:relative;overflow:hidden;background-image:radial-gradient(ellipse at 12% 20%,rgba(217,181,98,.1),transparent 32%),radial-gradient(ellipse at 82% 80%,rgba(185,66,39,.1),transparent 30%)}
@media(max-width:750px){main:before{top:530px;left:-150px}.hero:before{inset:45% 0 2% 0}.section-heading h2:after{bottom:-6px}.custom-entry:after{right:-50px}.hero-art .hero-drink,.product-art .drink-svg,.builder-dialog .live-drink .drink-svg{filter:saturate(.92) contrast(.97) drop-shadow(2px 5px 3px rgba(83,63,35,.1))}}
@media(prefers-reduced-motion:reduce){main:before,main:after{filter:none}}