/*! Notes...

Author: Jay George
Author URI: https://jaygeorge.co.uk

ABOUT THIS CSS
===================================================
- Only edit filename-dev.css, then process with Laravel Mix (1. Configure with `webpack.mix.js` 2. `npm run production` will compile into prod/ on the server)

*/@layer base,elements,objects,components,modifiers,vendors,ui,utilities,scope;@layer components{.c-product-lead{--product-width: 25%;--image-width: min(70vw, 40rem, 100%);display:grid}@media (min-width: 1800px){.c-product-lead{--image-width: 85%}}.c-product-lead__product{position:relative;padding:var(--spacing-l) var(--spacing-gutter);padding-block-end:var(--spacing-l-1);background:#fff}.c-product-lead__product picture{position:absolute;top:0;left:60%;width:var(--product-width);max-width:20.5rem;rotate:-15deg}.c-product-lead__product img{width:var(--image-width);max-width:none}.c-product-lead__product h2{font-size:calc(var(--jumbo-2-max) + 2rem);line-height:.775;text-align:left}@media (min-width: 1150px) and (max-width: 1320px){.c-product-lead__product h2{font-size:calc(var(--jumbo-2-max) - 2rem)}}.c-product-lead__product h3{font-size:var(--font-size-l);line-height:var(--font-size-l-line-height)}.c-product-lead__product :is(h2,h3,p){text-align:left;max-width:21rem;text-wrap:balance}.c-product-lead__product p{margin-block-end:calc(var(--spacing-m) + var(--spacing-s));font-size:var(--font-size-s)}@media (max-width: 1149px){.c-product-lead__product{padding-block-end:4rem}.c-product-lead__product h2{font-size:var(--font-size-jumbo-2)}.c-product-lead__product p,.c-product-lead__product h3{max-width:min(96%,29rem)}}}@layer modifiers{.c-product-lead{background:var(--lifestyle-background)}.c-product-lead .c-btn{border-style:dashed}.c-product-lead--oklch77-0226-47{--lifestyle-background-legacy: var(--color-blue-light-1-legacy);--lifestyle-background: var(--color-gradient-blue-dusk);color:var(--color-orange-legacy)}@supports (background: oklch(0% 0 0)){.c-product-lead--oklch77-0226-47{color:var(--color-orange)}}.c-product-lead--oklch77-0226-47 h3,.c-product-lead--oklch77-0226-47 p{color:var(--color-blue-legacy)}@supports (background: oklch(0% 0 0)){.c-product-lead--oklch77-0226-47 h3,.c-product-lead--oklch77-0226-47 p{color:var(--color-blue)}}.c-product-lead--oklch77-0226-47 .c-btn{color:var(--color-orange-legacy);border-color:var(--color-orange-legacy)}@supports (background: oklch(0% 0 0)){.c-product-lead--oklch77-0226-47 .c-btn{border-color:var(--color-orange);color:var(--color-orange)}}.c-product-lead--oklch87-02-92{--lifestyle-background: var(--color-lemon-spritz-gradient-blue-light);color:var(--color-blue-mid)}.c-product-lead--oklch87-02-92 h2{color:var(--color-yellow)}.c-product-lead--oklch87-02-92 .c-btn{border-color:var(--color-blue-mid);color:var(--color-blue-mid)}}@layer components{.c-product-lead__lifestyle-shot{overflow:hidden;position:relative}.c-product-lead__lifestyle-shot figure{position:relative;top:10%;margin-inline:auto}@media (max-width: 1149px){.c-product-lead__lifestyle-shot figure{max-width:30rem}}.c-product-lead__lifestyle-shot .o-eyebrow-heading{position:relative;z-index:var(--z-index-above-body);text-align:center;left:unset;max-width:none;padding-block-end:var(--spacing-s);color:#fff}.c-product-lead__lifestyle-shot .o-eyebrow-heading--l-1ong{width:50%;margin-inline:auto}.c-product-lead__lifestyle-shot img{display:block;width:var(--image-width);margin-inline:auto}.c-product-lead__lifestyle-shot__pull-up{top:15%}@media (min-width: 1150px){.c-product-lead{--product-width: 40%;grid-template-columns:repeat(auto-fit,minmax(min(100%,39em),1fr))}.c-product-lead__product picture{left:45%}@media (width < 1800px){.c-product-lead__product picture{top:-5rem}}.c-product-lead__product :where(h3,p){max-width:50%}.c-product-lead__lifestyle-shot picture{position:absolute;bottom:0;width:75%;left:50%;transform:translate(-50%)}.c-product-lead__lifestyle-shot figure{top:17.5%}}.c-recipe{max-width:var(--max-width-reading-short);padding:var(--spacing-m);background:var(--color-pink);background:var(--color-orange);background:var(--color-blue);color:#fff;rotate:-4deg;box-shadow:var(--box-shadow-polaroid)}@media (min-width: 768px){.c-recipe{rotate:-8deg}}.c-recipe p{max-width:none;font-size:var(--font-size-s-x-1);margin-block-end:var(--spacing-s-1)}.c-recipe h3{max-width:none;font-family:var(--font-family-decorative);font-size:var(--font-size-l-1-decorative);font-weight:400;line-height:var(--font-size-l-1-line-height-decorative-loose);padding-block-end:var(--spacing-m)}}@layer components{:root{--carousel-product-fake-ceiling: 6rem}.f-carousel{background:#fff}@media (min-width: 1150px){.c-flying-badges{margin-block-end:calc(0% - var(--carousel-product-fake-ceiling))}.f-carousel .c-product-lead{--product-width: 44%}.f-carousel .c-product-lead__product{padding-block-start:var(--carousel-product-fake-ceiling);background:linear-gradient(to bottom,var(--color-blue) 0%,var(--color-blue) var(--carousel-product-fake-ceiling),white var(--carousel-product-fake-ceiling),white 100%)}.f-carousel .c-product-lead__product h2{margin-block-start:var(--spacing-l)}.f-carousel .c-product-lead__product picture{max-width:42%;top:-4.5rem;padding-block-start:3rem}.f-carousel .c-product-lead__lifestyle-shot{background:linear-gradient(to bottom,var(--color-blue) 0%,var(--color-blue) var(--carousel-product-fake-ceiling),var(--lifestyle-background) var(--carousel-product-fake-ceiling),var(--lifestyle-background) 100%)}.f-carousel .c-product-lead__lifestyle-shot>*{padding-block-start:var(--spacing-l)}}@media (max-width: 1149px){.f-carousel .c-product-lead__lifestyle-shot{display:none}}}@layer ui{@media (max-width: 1149px){.f-carousel{--f-button-width: 50px;--f-carousel-dots-width: 25px;--f-carousel-dot-width: 8px}.f-button{opacity:.75}}}
