/*!
Theme Name: Jake Van Base Theme
Theme URI: https://jakevan.ca
Author: Jake Vanderwerf
Author URI: https://jakevan.ca
Description: A base theme for Jake Van clients
Requires at least: 6.4
Tested up to: 6.4
Requires PHP: 7.0
Version: 1.279
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jv
*/
/*************************************************************
VARIABLES
*************************************************************/
:root{
    /* Layout */
    --narrow: min(500px, 50vw);
    --maxWidth: min(768px, 65vw);
    --alignWide: min(1024px, 90vw);
    --alignMed: min(962px, 82.5vw);
    --full: 100vw;
    /* Margin */
    --mr: auto;
    --ml: auto;
    --mt: 1rem;
    --mb: 1rem;
    --p-x: 1.5rem;
    --p-y: .5rem;
    --setMargin: var(--mt) var(--mr) var(--mb) var(--ml);
    --insetMargin: var(--mt) calc((var(--maxWidth) - var(--narrow)) / 2 + var(--mr)) var(--mb) var(--ml);
    --height: 4rem;
    --doubleHeight: 8rem;
    --offHeight: 5rem;
    --maxHeight: calc(100vh - var(--height) - var(--height));

    --gap: .5rem;
    --wrap: wrap;
    --justify: center;
    --align: center;
    --dir: row;
    /* Typography */
    --w: 1.2em; /** Icon **/

    --filter: grayscale(.3) sepia(.4);
    --dashed: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23151515' stroke-width='1' stroke-dasharray='12%2c18%2c36' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
    --dashed-action: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23B7332E' stroke-width='1' stroke-dasharray='12%2c18%2c36' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
    --font-base: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
    --heading: 'Aleo', var(--font-base);
    --body: 'Josefin Slab', var(--font-base);
    --hWeight: 900;
    --hlight: 400;
    --bWeight: 400;
    --bBold: 700;
    --bLight: 200;

    /* Font sizes */
    --enormous: calc(26vh - 4rem);
    --xxxlarge: clamp(2.5rem, 1.429rem + 2.857vw, 4rem);
    --xxlarge: clamp(2rem, 1.286rem + 1.905vw, 3rem);
    --xlarge: clamp(1.6rem, .957rem + 1.714vw, 2.5rem);
    --large: clamp(1.3rem, .6rem + 1.867vw, 2rem);
    --xmedium: clamp(1.4rem, .971rem + 1.143vw, 2rem);
    --medium: clamp(1.1rem, .993rem + .286vw, 1.25rem);
    --small: clamp(.95rem, .879rem + .19vw, 1.05rem);
    --extra-small: clamp(.75rem, 1.1337rem + -1.2278vw, .059375rem);
    /* Colours
    For best results, generate colours from base colours using: https://uicolors.app/generate/
    or sass darken/lighten by 5%: http://scg.ar-ch.org/
    For DUOTONE: https://cssduotone.com/
    */
    --mixBlendMode: darken;
    --coverBlend: overlay;
    --coverIndex: 2;
    --light-0: #fafafa;
    --light-50: #fcfbfb;
    --light-100: #f1eded;
    --light-200: #e6dfdf;
    --dark-0: #201313;
    --dark-50: #261717;
    --dark-100: #2d1b1b;
    --dark-200: #331e1e;
    --action-0: #B7332E;
    --action-50: #a32d29;
    --action-100: #8e2824;
    --action-200: #7a221f;
    --secondary-0: #E8A737;
    --secondary-50: #e59d20;
    --secondary-100: #d48f18;
    --secondary-200: #bd7f16;

    --success: #22C55E;
    --successBack: #d4edda;
    --successText:#155724;
    --warning: #E8A737;
    --error: #EF4444;
    --errorBack: #f8d7da;
    --errorText: #721c24;
    --action-contrast: var(--light-0);
    --secondary-contrast: var(--light-0);
    --light-rgb: 250,250,250;
    --dark-rgb: 16,4,4;
    --action-rgb: 183,51,46;
    --secondary-rgb: 232,167,55;

    --rgba-subtle: rgba(var(--c),.05);
    --rgba-subtle-hover: rgba(var(--c),.1);

    --base: var(--light-0);
    --base-50: var(--light-50);
    --base-100: var(--light-100);
    --base-200: var(--light-200);
    --contrast: var(--dark-0);
    --contrast-50: var(--dark-50);
    --contrast-100: var(--dark-100);
    --contrast-200: var(--dark-200);
    --c: var(--light-rgb);
    --base-rgb: var(--light-rgb);
    --contrast-rgb: var(--dark-rgb);

    /* Stacking */
    --z-1: 5;
    --z-2: 10;
    --z-3: 15;
    --z-4: 20;
    --z-5: 50;
    --z-6: 100;
    --z-top: 999;
    --z-topper: 1000;
    --zz-top: 999999;
    --z-above: 9999999;
    /* Overlays */
    --rgb-subtle: .05;
    --rgb-subtle-hover: .15;
    --rgb-light: .25;
    --rgb-medium: .66;
    --rgb-heavy: .85;
    --overlay-light: rgba(var(--c), .25);
    --overlay-medium: rgba(var(--c), .66);
    --overlay-heavy: rgba(var(--c), .85);
    --shimmer: rgba(var(--dark-rgb),0) 0%,
    rgba(var(--dark-rgb),.05) 50%,
    rgba(var(--dark-rgb),0) 100%;
    /* Shadows */
    --shadow: rgba(var(--dark-rgb),.45) 0px 0px 4px;
    --shadow-down: rgba(var(--dark-rgb),.45) 0 6px 5px -5px;    /* Bottom */
    --shadow-right: rgba(var(--dark-rgb),.45) 6px 0 5px -5px;   /* Right */
    --shadow-left: rgba(var(--dark-rgb), .45) -6px 0 5px -5px;   /* Left */
    --shadow-up: rgba(var(--dark-rgb), .45) 0 -6px 5px -5px;     /* Up */
    --subtle: rgba(var(--dark-rgb), .45) 0px 25px 20px -20px;
    --subtleRight: rgba(var(--dark-rgb), .45) 10px 0 20px -20px;
    --shadow-none: transparent 0px 0px 0px;
    /* Rounding */
    --innerRadius: 4px;
    --outerPadding: 1rem;
    --outerRadius: calc(var(--innerRadius) + var(--outerPadding));
    /* Transitions */
    --function:cubic-bezier(.47,.24,.07,.47);
    --timing: .25s;
    --transition-base: var(--timing) var(--function);
    --transition-color: background-color var(--transition-base),
    color var(--transition-base), border var(--transition-base);
    --transition-transform: transform var(--transition-base);
    --transition-size: width var(--transition-base),
    height var(--transition-base),max-width var(--transition-base), max-height var(--transition-base);

    /**** SPACING ****/
    --sp1: clamp(0.5rem, 0.714vw + 0.321rem, 1rem);      /* 8px → 16px */
    --sp2: clamp(0.75rem, 1.071vw + 0.482rem, 1.5rem);   /* 12px → 24px */
    --sp3: clamp(1rem, 1.429vw + 0.643rem, 2rem);        /* 16px → 32px */
    --sp4: clamp(1.5rem, 2.143vw + 0.964rem, 3rem);      /* 24px → 48px */
    --sp5: clamp(2rem, 2.857vw + 1.286rem, 4rem);        /* 32px → 64px */
    --sp6: clamp(3rem, 4.286vw + 1.929rem, 6rem);        /* 48px → 96px */
    --sp7: clamp(4rem, 5.714vw + 2.571rem, 8rem);        /* 64px → 128px */

    --offScreen: -200vw;

    /*!** Icons **!*/
    /*--quote: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23000000" viewBox="0 0 256 256"><path d="M116,72v88a48.05,48.05,0,0,1-48,48,8,8,0,0,1,0-16,32,32,0,0,0,32-32v-8H40a16,16,0,0,1-16-16V72A16,16,0,0,1,40,56h60A16,16,0,0,1,116,72ZM216,56H156a16,16,0,0,0-16,16v64a16,16,0,0,0,16,16h60v8a32,32,0,0,1-32,32,8,8,0,0,0,0,16,48.05,48.05,0,0,0,48-48V72A16,16,0,0,0,216,56Z"></path></svg>');*/
    /*--minus: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23151515" viewBox="0 0 256 256"><path d="M208,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36Zm4,172a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4Zm-40-80a4,4,0,0,1-4,4H88a4,4,0,0,1,0-8h80A4,4,0,0,1,172,128Z"></path></svg>');*/
    /*--plus: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23151515" viewBox="0 0 256 256"><path d="M208,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36Zm4,172a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4Zm-40-80a4,4,0,0,1-4,4H132v36a4,4,0,0,1-8,0V132H88a4,4,0,0,1,0-8h36V88a4,4,0,0,1,8,0v36h36A4,4,0,0,1,172,128Z"></path></svg>');*/
    /*--close: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M208,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36Zm4,172a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4ZM162.83,98.83,133.66,128l29.17,29.17a4,4,0,0,1-5.66,5.66L128,133.66,98.83,162.83a4,4,0,0,1-5.66-5.66L122.34,128,93.17,98.83a4,4,0,0,1,5.66-5.66L128,122.34l29.17-29.17a4,4,0,1,1,5.66,5.66Z"></path></svg>');*/
    /*--chevron: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23151515" viewBox="0 0 256 256"><path d="M128,28A100,100,0,1,0,228,128,100.11,100.11,0,0,0,128,28Zm0,192a92,92,0,1,1,92-92A92.1,92.1,0,0,1,128,220Zm42.83-110.83a4,4,0,0,1,0,5.66l-40,40a4,4,0,0,1-5.66,0l-40-40a4,4,0,0,1,5.66-5.66L128,146.34l37.17-37.17A4,4,0,0,1,170.83,109.17Z"></path></svg>');*/
    /*--details: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M210.83,98.83l-80,80a4,4,0,0,1-5.66,0l-80-80a4,4,0,0,1,5.66-5.66L128,170.34l77.17-77.17a4,4,0,1,1,5.66,5.66Z"></path></svg>');*/
    /*--shop: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M28.15,95A3.81,3.81,0,0,0,28,96v16a36,36,0,0,0,16,29.92V216a4,4,0,0,0,4,4H208a4,4,0,0,0,4-4V141.92A36,36,0,0,0,228,112V96a3.81,3.81,0,0,0-.17-1.08L213.5,44.7A12,12,0,0,0,202,36H54A12,12,0,0,0,42.5,44.7Zm22-48.08A4,4,0,0,1,54,44H202a4,4,0,0,1,3.84,2.9L218.7,92H37.3ZM100,100h56v12a28,28,0,0,1-56,0ZM36,112V100H92v12a28,28,0,0,1-41.37,24.59,4,4,0,0,0-1.31-.76A28,28,0,0,1,36,112ZM204,212H52V145.94a36,36,0,0,0,44-17.48,36,36,0,0,0,64,0,36,36,0,0,0,44,17.48Zm2.68-76.17a3.94,3.94,0,0,0-1.3.76A28,28,0,0,1,164,112V100h56v12A28,28,0,0,1,206.68,135.83Z"></path></svg>');*/
    /*--style: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M224,92H170.61l9.33-51.28a4,4,0,1,0-7.88-1.44L162.48,92H106.61l9.33-51.28a4,4,0,1,0-7.88-1.44L98.48,92H48a4,4,0,0,0,0,8H97L86.84,156H32a4,4,0,0,0,0,8H85.39l-9.33,51.28a4,4,0,0,0,3.22,4.65A3.65,3.65,0,0,0,80,220a4,4,0,0,0,3.94-3.29L93.52,164h55.87l-9.33,51.28a4,4,0,0,0,3.22,4.65,3.65,3.65,0,0,0,.72.07,4,4,0,0,0,3.94-3.29L157.52,164H208a4,4,0,0,0,0-8H159l10.19-56H224a4,4,0,0,0,0-8Zm-73.16,64H95l10.19-56H161Z"></path></svg>');*/
    /*--map: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M128,68a36,36,0,1,0,36,36A36,36,0,0,0,128,68Zm0,64a28,28,0,1,1,28-28A28,28,0,0,1,128,132Zm0-112a84.09,84.09,0,0,0-84,84c0,30.42,14.17,62.79,41,93.62a250,250,0,0,0,40.73,37.66,4,4,0,0,0,4.58,0A250,250,0,0,0,171,197.62c26.81-30.83,41-63.2,41-93.62A84.09,84.09,0,0,0,128,20Zm37.1,172.23A254.62,254.62,0,0,1,128,227a254.62,254.62,0,0,1-37.1-34.81C73.15,171.8,52,139.9,52,104a76,76,0,0,1,152,0C204,139.9,182.85,171.8,165.1,192.23Z"></path></svg>');*/
    /*--theme: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M241.72,113a11.88,11.88,0,0,0-9.73-5H212V88a12,12,0,0,0-12-12H129.33l-28.8-21.6a12.05,12.05,0,0,0-7.2-2.4H40A12,12,0,0,0,28,64V208a4,4,0,0,0,4,4H211.09a4,4,0,0,0,3.79-2.74l28.49-85.47A11.86,11.86,0,0,0,241.72,113ZM40,60H93.33a4,4,0,0,1,2.4.8L125.6,83.2a4,4,0,0,0,2.4.8h72a4,4,0,0,1,4,4v20H69.76a12,12,0,0,0-11.38,8.21L36,183.35V64A4,4,0,0,1,40,60Zm195.78,61.26L208.2,204H37.55L66,118.74A4,4,0,0,1,69.76,116H232a4,4,0,0,1,3.79,5.26Z"></path></svg>');*/
    /*--arrow-up: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M236,192a4,4,0,0,1-4,4H88a4,4,0,0,1-4-4V57.66L42.83,98.83a4,4,0,0,1-5.66-5.66l48-48a4,4,0,0,1,5.66,0l48,48a4,4,0,0,1-5.66,5.66L92,57.66V188H232A4,4,0,0,1,236,192Z"></path></svg>');*/
    /*--colour: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M174,47.75a254.19,254.19,0,0,0-41.45-38.3,8,8,0,0,0-9.18,0A254.19,254.19,0,0,0,82,47.75C54.51,79.32,40,112.6,40,144a88,88,0,0,0,176,0C216,112.6,201.49,79.32,174,47.75Zm9.85,105.59a57.6,57.6,0,0,1-46.56,46.55A8.75,8.75,0,0,1,136,200a8,8,0,0,1-1.32-15.89c16.57-2.79,30.63-16.85,33.44-33.45a8,8,0,0,1,15.78,2.68Z"></path></svg>');*/
    /*--linkIcon:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M236,88.12a50.44,50.44,0,0,1-14.81,34.31l-34.75,34.74A50.33,50.33,0,0,1,150.62,172h-.05A50.63,50.63,0,0,1,100,120a4,4,0,0,1,4-3.89h.11a4,4,0,0,1,3.89,4.11A42.64,42.64,0,0,0,150.58,164h0a42.32,42.32,0,0,0,30.14-12.49l34.75-34.74a42.63,42.63,0,1,0-60.29-60.28l-11,11a4,4,0,0,1-5.66-5.65l11-11A50.64,50.64,0,0,1,236,88.12ZM111.78,188.49l-11,11A42.33,42.33,0,0,1,70.6,212h0a42.63,42.63,0,0,1-30.11-72.77l34.75-34.74A42.63,42.63,0,0,1,148,135.82a4,4,0,0,0,8,.23A50.64,50.64,0,0,0,69.55,98.83L34.8,133.57A50.63,50.63,0,0,0,70.56,220h0a50.33,50.33,0,0,0,35.81-14.83l11-11a4,4,0,1,0-5.65-5.66Z"></path></svg>');*/
    /*--swipeRight: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzAwMDAwMCIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMTIsMTQwdjM2YzAsMjQuNjYtOC4wOCw0MS4xLTguNDIsNDEuNzlhNCw0LDAsMSwxLTcuMTYtMy41OGMuMDctLjE1LDcuNTgtMTUuNTUsNy41OC0zOC4yMVYxNDBhMTYsMTYsMCwwLDAtMzIsMHY0YTQsNCwwLDAsMS04LDBWMTI0YTE2LDE2LDAsMCwwLTMyLDB2MTJhNCw0LDAsMCwxLTgsMFY2OGExNiwxNiwwLDAsMC0zMiwwVjE3NmE0LDQsMCwwLDEtNy4zOSwyLjExbC0xOC42OC0zMGEuNzUuNzUsMCwwLDEtLjA3LS4xMiwxNiwxNiwwLDAsMC0yNy43MiwxNmwyOS4zMSw1MGE0LDQsMCwwLDEtNi45LDRMMzEuMjIsMTY4YTI0LDI0LDAsMCwxLDQxLjUyLTI0LjA5TDg0LDE2MlY2OGEyNCwyNCwwLDAsMSw0OCwwdjM4LjEzYTI0LDI0LDAsMCwxLDM5Ljk0LDE2LjA2QTI0LDI0LDAsMCwxLDIxMiwxNDBabTM4LjgzLTg2LjgzLTMyLTMyYTQsNCwwLDAsMC01LjY2LDUuNjZMMjM4LjM0LDUySDE3NmE0LDQsMCwwLDAsMCw4aDYyLjM0TDIxMy4xNyw4NS4xN2E0LDQsMCwwLDAsNS42Niw1LjY2bDMyLTMyQTQsNCwwLDAsMCwyNTAuODMsNTMuMTdaIj48L3BhdGg+PC9zdmc+');*/


    --scrollbar-width: 8px;
    --scrollbar-track-color: var(--base-100);
    --scrollbar-thumb-color: var(--action-0);
    --scrollbar-thumb-hover-color: var(--action-50);
    --scrollbar-thumb-border: 2px solid var(--base-50);
    --scrollbar-border-radius: 4px;

    --can-scroll: 0;
}

body:has(#theme-switcher:checked){
    --action-50: #cb3933;
    --action-100: #d14c47;
    --action-200: #d6605c;
    --secondary-50: #ebb14e;
    --secondary-100: #edbb65;
    --secondary-200: #f0c57c;
    --mixBlendMode: lighten;
    --coverBlend: multiply;
    --coverIndex: 0;
    --contrast: var(--light-0);
    --contrast-50: var(--light-50);
    --contrast-100: var(--light-100);
    --contrast-200: var(--light-200);
    --base: var(--dark-0);
    --base-50: var(--dark-50);
    --base-100: var(--dark-100);
    --base-200: var(--dark-200);
    --c: var(--dark-rgb);
    --base-rgb: var(--dark-rgb);
    --contrast-rgb: var(--light-rgb);
    --overlay-light: rgba(var(--c), .25);
    --overlay-medium: rgba(var(--c), .5);
    --overlay-heavy: rgba(var(--c), .85);
    --shimmer: rgba(var(--c),0) 0%,
    rgba(var(--c),.05) 50%,
    rgba(var(--c),0) 100%;
    --shadow: rgba(var(--light-rgb),.45) 0px 0px 4px;
    --shadow-down: rgba(var(--light-rgb),.45) 0 6px 5px -5px;    /* Bottom */
    --shadow-right: rgba(var(--light-rgb),.45) 6px 0 5px -5px;   /* Right */
    --shadow-left: rgba(var(--light-rgb), .45) -6px 0 5px -5px;   /* Left */
    --shadow-up: rgba(var(--light-rgb), .45) 0 -6px 5px -5px;     /* Up */
    --subtle: rgba(var(--light-rgb), .45) 0px 25px 20px -20px;
    --subtleRight: rgba(var(--light-rgb), .45) 10px 0 20px -20px;

    --successBack: #155724;
    --successText:#d4edda;
    --errorBack: #721c24;
    --errorText: #f8d7da;

    /*--dashed: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23fafafa' stroke-width='1' stroke-dasharray='12%2c18%2c36' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");*/

    /*--minus: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M208,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36Zm4,172a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4Zm-40-80a4,4,0,0,1-4,4H88a4,4,0,0,1,0-8h80A4,4,0,0,1,172,128Z"></path></svg>');*/
    /*--plus: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M208,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36Zm4,172a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4Zm-40-80a4,4,0,0,1-4,4H132v36a4,4,0,0,1-8,0V132H88a4,4,0,0,1,0-8h36V88a4,4,0,0,1,8,0v36h36A4,4,0,0,1,172,128Z"></path></svg>');*/
    /*--close: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M208,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36Zm4,172a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4ZM162.83,98.83,133.66,128l29.17,29.17a4,4,0,0,1-5.66,5.66L128,133.66,98.83,162.83a4,4,0,0,1-5.66-5.66L122.34,128,93.17,98.83a4,4,0,0,1,5.66-5.66L128,122.34l29.17-29.17a4,4,0,1,1,5.66,5.66Z"></path></svg>');*/
    /*--chevron: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M128,28A100,100,0,1,0,228,128,100.11,100.11,0,0,0,128,28Zm0,192a92,92,0,1,1,92-92A92.1,92.1,0,0,1,128,220Zm42.83-110.83a4,4,0,0,1,0,5.66l-40,40a4,4,0,0,1-5.66,0l-40-40a4,4,0,0,1,5.66-5.66L128,146.34l37.17-37.17A4,4,0,0,1,170.83,109.17Z"></path></svg>');*/
    /*--details: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M210.83,98.83l-80,80a4,4,0,0,1-5.66,0l-80-80a4,4,0,0,1,5.66-5.66L128,170.34l77.17-77.17a4,4,0,1,1,5.66,5.66Z"></path></svg>');*/
    /*--shop: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M28.15,95A3.81,3.81,0,0,0,28,96v16a36,36,0,0,0,16,29.92V216a4,4,0,0,0,4,4H208a4,4,0,0,0,4-4V141.92A36,36,0,0,0,228,112V96a3.81,3.81,0,0,0-.17-1.08L213.5,44.7A12,12,0,0,0,202,36H54A12,12,0,0,0,42.5,44.7Zm22-48.08A4,4,0,0,1,54,44H202a4,4,0,0,1,3.84,2.9L218.7,92H37.3ZM100,100h56v12a28,28,0,0,1-56,0ZM36,112V100H92v12a28,28,0,0,1-41.37,24.59,4,4,0,0,0-1.31-.76A28,28,0,0,1,36,112ZM204,212H52V145.94a36,36,0,0,0,44-17.48,36,36,0,0,0,64,0,36,36,0,0,0,44,17.48Zm2.68-76.17a3.94,3.94,0,0,0-1.3.76A28,28,0,0,1,164,112V100h56v12A28,28,0,0,1,206.68,135.83Z"></path></svg>');*/
    /*--style: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M224,92H170.61l9.33-51.28a4,4,0,1,0-7.88-1.44L162.48,92H106.61l9.33-51.28a4,4,0,1,0-7.88-1.44L98.48,92H48a4,4,0,0,0,0,8H97L86.84,156H32a4,4,0,0,0,0,8H85.39l-9.33,51.28a4,4,0,0,0,3.22,4.65A3.65,3.65,0,0,0,80,220a4,4,0,0,0,3.94-3.29L93.52,164h55.87l-9.33,51.28a4,4,0,0,0,3.22,4.65,3.65,3.65,0,0,0,.72.07,4,4,0,0,0,3.94-3.29L157.52,164H208a4,4,0,0,0,0-8H159l10.19-56H224a4,4,0,0,0,0-8Zm-73.16,64H95l10.19-56H161Z"></path></svg>');*/
    /*--map: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M128,68a36,36,0,1,0,36,36A36,36,0,0,0,128,68Zm0,64a28,28,0,1,1,28-28A28,28,0,0,1,128,132Zm0-112a84.09,84.09,0,0,0-84,84c0,30.42,14.17,62.79,41,93.62a250,250,0,0,0,40.73,37.66,4,4,0,0,0,4.58,0A250,250,0,0,0,171,197.62c26.81-30.83,41-63.2,41-93.62A84.09,84.09,0,0,0,128,20Zm37.1,172.23A254.62,254.62,0,0,1,128,227a254.62,254.62,0,0,1-37.1-34.81C73.15,171.8,52,139.9,52,104a76,76,0,0,1,152,0C204,139.9,182.85,171.8,165.1,192.23Z"></path></svg>');*/
    /*--theme: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M241.72,113a11.88,11.88,0,0,0-9.73-5H212V88a12,12,0,0,0-12-12H129.33l-28.8-21.6a12.05,12.05,0,0,0-7.2-2.4H40A12,12,0,0,0,28,64V208a4,4,0,0,0,4,4H211.09a4,4,0,0,0,3.79-2.74l28.49-85.47A11.86,11.86,0,0,0,241.72,113ZM40,60H93.33a4,4,0,0,1,2.4.8L125.6,83.2a4,4,0,0,0,2.4.8h72a4,4,0,0,1,4,4v20H69.76a12,12,0,0,0-11.38,8.21L36,183.35V64A4,4,0,0,1,40,60Zm195.78,61.26L208.2,204H37.55L66,118.74A4,4,0,0,1,69.76,116H232a4,4,0,0,1,3.79,5.26Z"></path></svg>');*/
    /*--arrow-up: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M236,192a4,4,0,0,1-4,4H88a4,4,0,0,1-4-4V57.66L42.83,98.83a4,4,0,0,1-5.66-5.66l48-48a4,4,0,0,1,5.66,0l48,48a4,4,0,0,1-5.66,5.66L92,57.66V188H232A4,4,0,0,1,236,192Z"></path></svg>');*/
    /*--colour: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M174,47.75a254.19,254.19,0,0,0-41.45-38.3,8,8,0,0,0-9.18,0A254.19,254.19,0,0,0,82,47.75C54.51,79.32,40,112.6,40,144a88,88,0,0,0,176,0C216,112.6,201.49,79.32,174,47.75Zm9.85,105.59a57.6,57.6,0,0,1-46.56,46.55A8.75,8.75,0,0,1,136,200a8,8,0,0,1-1.32-15.89c16.57-2.79,30.63-16.85,33.44-33.45a8,8,0,0,1,15.78,2.68Z"></path></svg>');*/
    /*--linkIcon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M236,88.12a50.44,50.44,0,0,1-14.81,34.31l-34.75,34.74A50.33,50.33,0,0,1,150.62,172h-.05A50.63,50.63,0,0,1,100,120a4,4,0,0,1,4-3.89h.11a4,4,0,0,1,3.89,4.11A42.64,42.64,0,0,0,150.58,164h0a42.32,42.32,0,0,0,30.14-12.49l34.75-34.74a42.63,42.63,0,1,0-60.29-60.28l-11,11a4,4,0,0,1-5.66-5.65l11-11A50.64,50.64,0,0,1,236,88.12ZM111.78,188.49l-11,11A42.33,42.33,0,0,1,70.6,212h0a42.63,42.63,0,0,1-30.11-72.77l34.75-34.74A42.63,42.63,0,0,1,148,135.82a4,4,0,0,0,8,.23A50.64,50.64,0,0,0,69.55,98.83L34.8,133.57A50.63,50.63,0,0,0,70.56,220h0a50.33,50.33,0,0,0,35.81-14.83l11-11a4,4,0,1,0-5.65-5.66Z"></path></svg>');*/
}

/* https://frontendmasters.com/blog/the-coyier-css-starter/ */
@layer reset {
    html {
        color-scheme: light dark;
        font:
                clamp(1rem, 1rem + 0.5vw, 2rem) / 1.4 system-ui,
                sans-serif;
        tab-size: 2;
        hanging-punctuation: first allow-end last;
        word-break: break-word;
    }

    body {
        margin: 0;
        /*padding: 2rem;*/
        /*@media (width < 500px) {*/
        /*    padding: 1rem;*/
        /*}*/
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    h1,
    h2 {
        font-weight: 900;
        letter-spacing: -0.02rem;
    }
    h1,
    h2,
    h3 {
        line-height: 1.1;
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 /* FUTURE :heading */ {
        text-wrap: balance;
        margin-block-start: 0;
    }

    p,
    li,
    dd {
        text-wrap: pretty;
        max-inline-size: 88ch;
    }

    a {
        color: oklch(0.68 0.17 228);
        text-underline-offset: 2px;
        &:not(:is(:hover, :focus)) {
            text-decoration-color: color-mix(in srgb, currentColor, transparent 50%);
        }
    }

    sub,
    sup {
        font-size: 75%;
        line-height: 0;
        position: relative;
        vertical-align: baseline;
    }
    sub {
        inset-block-end: -0.25em;
    }
    sup {
        inset-block-start: -0.5em;
    }

    ul,
    ol,
    dl {
        margin: 0;
        padding: 0;
        list-style: inside;
        ul,
        ol,
        dl {
            padding-inline-start: 2ch;
        }
    }
    li {
        padding-bottom: .5rem;
    }

    img,
    video,
    iframe {
        display: block;
        max-inline-size: 100%;
        block-size: auto;
        border-style: none;
    }

    figure {
        inline-size: fit-content;
        margin-inline: auto;
    }
    figcaption {
        contain: inline-size;
        font-size: 90%;
    }

    input,
    select,
    textarea,
    button {
        font: inherit;
        /* FUTURE: appearance: base; */
    }
    label {
        display: block;
    }
    input:not(
    :where(
      [type="submit"],
      [type="checkbox"],
      [type="radio"],
      [type="button"],
      [type="reset"]
    )
  ) {
        inline-size: 100%;
    }
    button,
    input:where(
    [type="submit"],
    [type="reset"],
    [type="button"]
  ) {
        background: CanvasText;
        color: Canvas;
        border: 1px solid transparent;
    }
    textarea {
        field-sizing: content;
        min-block-size: 5lh;
        inline-size: 100%;
        max-inline-size: 100%;
    }

    pre,
    code,
    kbd,
    samp {
        font-family: ui-monospace, SFMono-Regular, monospace;
    }

    svg {
        fill: currentColor;
    }

    [aria-disabled="true" i],
    [disabled] {
        cursor: not-allowed;
    }
    [hidden] {
        display: none !important;
    }
    [disabled],
    label:has(input[disabled]) {
        opacity: 0.5;

        [disabled] {
            opacity: 1;
        }
    }

    pre {
        white-space: pre-wrap;
        background: CanvasText;
        color: Canvas;
        padding: 1.5rem;
    }

    hr {
        border-style: solid;
        border-width: 1px 0 0;
        color: inherit;
        height: 0;
        overflow: visible;
        margin-block: 2.5rem;
    }

    :target {
        scroll-margin: 3rlh;
    }

    table {
        caption-side: bottom;
        border-collapse: collapse;
        td {
            font-size: 90%;
        }
        td,
        th {
            word-break: normal;
            border: 1px solid gray;
            padding: 0.5rem;
        }
    }
    [role="region"][aria-labelledby][tabindex] {
        overflow: auto;
    }
    caption {
        font-size: 90%;
    }

    .screen-reader-text:not(:focus):not(:active) {
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }
    :focus-visible {
        outline-offset: 2px;
    }

    @media (prefers-reduced-motion: no-preference) {
        @view-transition {
            navigation: auto;
        }

        html {
            interpolate-size: allow-keywords;
            &:focus-within {
                scroll-behavior: smooth;
            }
        }
    }
}
/***************************************************************
SCROLLBAR
***************************************************************/
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
}

/* For WebKit browsers (Chrome, Safari, etc.) */
::-webkit-scrollbar {
    width: var(--scrollbar-width);
    height: var(--scrollbar-width);
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track-color);
}

::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb-color);
    border-radius: var(--scrollbar-border-radius);
    border: var(--scrollbar-thumb-border);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover-color);
}


body{
    background-color: var(--base-50);
    color: var(--contrast);
    max-width: 100vw;
    overflow-x: hidden;
    margin: 0;
    font-family: var(--body);
    font-weight: var(--bWeight);
    font-size: var(--medium);
    line-height: 1.4;
    position: relative;
}
body b,
body strong {
    font-weight: var(--bBold);
}


*:target {
    scroll-snap-margin-top: max(6rem, 20vh);
    scroll-margin-top: max(6rem, 20vh);
    outline: double var(--action-0);
    border-radius: var(--outerRadius);
    padding: var(--outerPadding);
}
body.menu_item *:target h2 {
    background-color: var(--action-0);
    color: var(--action-contrast);
}
body,
body * {
    transition: background-color var(--transition-base);
    transition-property: background-color, border;
}

.home > section:first-of-type,
.home main {
    margin-top: 0;
}
/**************************************************************
UTILITY CLASSES
**************************************************************/
body:has(aside.expanded),
body:has(nav.open),
body:has(dialog[open]),
body.loading {
    overflow: hidden;
}
/** PADDING **/
.p-1 {padding: var(--sp1);}
.p-2 {padding: var(--sp2);}
.p-3 {padding: var(--sp3);}
.p-4 {padding: var(--sp4);}
.p-5 {padding: var(--sp5);}
.p-6 {padding: var(--sp6);}
.p-7 {padding: var(--sp7);}

.px-1 {padding-left: var(--sp1);padding-right: var(--sp1);}
.px-2 {padding-left: var(--sp2);padding-right: var(--sp2);}
.px-3 {padding-left: var(--sp3);padding-right: var(--sp3);}
.px-4 {padding-left: var(--sp4);padding-right: var(--sp4);}
.px-5 {padding-left: var(--sp5);padding-right: var(--sp5);}
.px-6 {padding-left: var(--sp6);padding-right: var(--sp6);}
.px-7 {padding-left: var(--sp7);padding-right: var(--sp7);}

.py-1 {padding-top: var(--sp1);padding-bottom: var(--sp1);}
.py-2 {padding-top: var(--sp2);padding-bottom: var(--sp2);}
.py-3 {padding-top: var(--sp3);padding-bottom: var(--sp3);}
.py-4 {padding-top: var(--sp4);padding-bottom: var(--sp4);}
.py-5 {padding-top: var(--sp5);padding-bottom: var(--sp5);}
.py-6 {padding-top: var(--sp6);padding-bottom: var(--sp6);}
.py-7 {padding-top: var(--sp7);padding-bottom: var(--sp7);}

.pt-1 { padding-top: var(--sp1); }
.pr-1 { padding-right: var(--sp1); }
.pl-1 { padding-left: var(--sp1); }
.pb-1 { padding-bottom: var(--sp1); }
.pt-2 { padding-top: var(--sp2); }
.pr-2 { padding-right: var(--sp2); }
.pl-2 { padding-left: var(--sp2); }
.pb-2 { padding-bottom: var(--sp2); }
.pt-3 { padding-top: var(--sp3); }
.pr-3 { padding-right: var(--sp3); }
.pl-3 { padding-left: var(--sp3); }
.pb-3 { padding-bottom: var(--sp3); }
.pt-4 { padding-top: var(--sp4); }
.pr-4 { padding-right: var(--sp4); }
.pl-4 { padding-left: var(--sp4); }
.pb-4 { padding-bottom: var(--sp4); }
.pt-5 { padding-top: var(--sp5); }
.pr-5 { padding-right: var(--sp5); }
.pl-5 { padding-left: var(--sp5); }
.pb-5 { padding-bottom: var(--sp5); }
.pt-6 { padding-top: var(--sp6); }
.pr-6 { padding-right: var(--sp6); }
.pl-6 { padding-left: var(--sp6); }
.pb-6 { padding-bottom: var(--sp6); }
.pt-7 { padding-top: var(--sp7); }
.pr-7 { padding-right: var(--sp7); }
.pl-7 { padding-left: var(--sp7); }
.pb-7 { padding-bottom: var(--sp7); }
/** MARGIN **/
.m-1 {margin: var(--sp1);}
.m-2 {margin: var(--sp2);}
.m-3 {margin: var(--sp3);}
.m-4 {margin: var(--sp4);}
.m-5 {margin: var(--sp5);}
.m-6 {margin: var(--sp6);}
.m-7 {margin: var(--sp7);}

.mx-1 {margin-left: var(--sp1);margin-right: var(--sp1);}
.mx-2 {margin-left: var(--sp2);margin-right: var(--sp2);}
.mx-3 {margin-left: var(--sp3);margin-right: var(--sp3);}
.mx-4 {margin-left: var(--sp4);margin-right: var(--sp4);}
.mx-5 {margin-left: var(--sp5);margin-right: var(--sp5);}
.mx-6 {margin-left: var(--sp6);margin-right: var(--sp6);}
.mx-7 {margin-left: var(--sp7);margin-right: var(--sp7);}

.my-1 {margin-top: var(--sp1);margin-bottom: var(--sp1);}
.my-2 {margin-top: var(--sp2);margin-bottom: var(--sp2);}
.my-3 {margin-top: var(--sp3);margin-bottom: var(--sp3);}
.my-4 {margin-top: var(--sp4);margin-bottom: var(--sp4);}
.my-5 {margin-top: var(--sp5);margin-bottom: var(--sp5);}
.my-6 {margin-top: var(--sp6);margin-bottom: var(--sp6);}
.my-7 {margin-top: var(--sp7);margin-bottom: var(--sp7);}

.mt-1 { margin-top: var(--sp1); }
.mr-1 { margin-right: var(--sp1); }
.ml-1 { margin-left: var(--sp1); }
.mb-1 { margin-bottom: var(--sp1); }
.mt-2 { margin-top: var(--sp2); }
.mr-2 { margin-right: var(--sp2); }
.ml-2 { margin-left: var(--sp2); }
.mb-2 { margin-bottom: var(--sp2); }
.mt-3 { margin-top: var(--sp3); }
.mr-3 { margin-right: var(--sp3); }
.ml-3 { margin-left: var(--sp3); }
.mb-3 { margin-bottom: var(--sp3); }
.mt-4 { margin-top: var(--sp4); }
.mr-4 { margin-right: var(--sp4); }
.ml-4 { margin-left: var(--sp4); }
.mb-4 { margin-bottom: var(--sp4); }
.mt-5 { margin-top: var(--sp5); }
.mr-5 { margin-right: var(--sp5); }
.ml-5 { margin-left: var(--sp5); }
.mb-5 { margin-bottom: var(--sp5); }
.mt-6 { margin-top: var(--sp6); }
.mr-6 { margin-right: var(--sp6); }
.ml-6 { margin-left: var(--sp6); }
.mb-6 { margin-bottom: var(--sp6); }
.mt-7 { margin-top: var(--sp7); }
.mr-7 { margin-right: var(--sp7); }
.ml-7 { margin-left: var(--sp7); }
.mb-7 { margin-bottom: var(--sp7); }

.text-center {
    text-align: center;
}
.text-left {
    text-align: left;
}
.text-right {
    text-align: right;
}


*[hidden] {
    display: none!important;
}

@media (max-width: 767px){
    .hide-small {
        display: none;
    }
}

.width-50 {
    width: 100%;
}
.width-25 {
    width: 50%;
}
.width-75 {
    width: 100%;
}
.w-full,
.width-full {
    width: 100%;
}


@media (min-width: 768px){
    .buttons li.width-50,
    .width-50 {
        width: calc(50% - .3em);
    }
    .width-25 {
        width: calc(25% - .3em);
    }
    .width-75 {
        width: calc(75% - .3em);
    }
}

.row:not(.icon),
.col {
    --align: center;
    --justify: center;
    display: flex;
    justify-content: var(--justify);
    align-items: var(--align);
    gap: var(--gap);
    flex-wrap: var(--wrap);
    flex-direction: var(--dir);
}
.col {
    --dir: column;
}
.row:not(.icon) {
    --dir: row;
}
.col.rev {
    --dir: column-reverse;
}
.row.rev {
    --dir: row-reverse;
}

.nowrap {
    --wrap: nowrap;
}
.col.a-start,
.row.start {
    --justify: flex-start;
}

.col.a-end,
.row.end {
    --justify: flex-end;
}
.col.btw,
.row.btw {
    --justify: space-between;
    width: 100%;
}
.col.even,
.row.even {
    --justify: space-evenly;
}

.col.start,
.row.a-start {
    --align: flex-start;
}

.col.end,
.row.a-end {
    --align: flex-end;
}

.abs {
    position: absolute;
}
*:has(>.abs) {
    position: relative;
}
.hidden {
    transform: scale(0);
    max-width: 0;
    max-height: 0;
    overflow: hidden;
    transition: var(--transition-transform), var(--transition-size);
}

.visible {
    transform: scale(1);
    max-width: 100%;
    max-height: 100%;
    transition: var(--transition-transform), var(--transition-size);
}

/******************************************************************
THEME SWITCHER & TOGGLE
******************************************************************/
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
    left: var(--offScreen);
}

.toggle-switch .slider {
    position: relative;
    width: 2rem;
    height: 1rem;
    background-color: var(--base-200);
    border-radius: .75rem;
    overflow: hidden;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    border: 4px solid transparent;
    transition: .3s;
    box-shadow: 0 0 .25rem 0 rgba(var(--contrast-rgb), .125) inset;
    cursor: pointer;
    margin: 5px;
}

.toggle-switch .slider::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    left: 0;
    background-color: var(--base);
    transform: translateX(-1rem);
    border-radius: .75rem;
    transition: .3s;
    box-shadow: 0 0 .25rem 3px rgba(var(--contrast-rgb), .125);
}

.toggle-switch input:checked ~ .slider::before {
    transform: translateX(1rem);
    box-shadow: 0 0 .25rem 3px rgb(0, 0, 0, 0.25);
}

.toggle-switch input:checked ~ .slider {
    background-color: var(--action-0);
}

.toggle-switch input:active ~ .slider::before {
    transform: translate(0);
}


/*.theme-switcher {*/
/*    position: absolute;*/
/*    opacity: 0;*/
/*    width: 0;*/
/*    height: 0;*/
/*}*/
#theme-switch {
    z-index: 99;
    margin: 0;
    --wrap: nowrap;
    --gap: 1rem;
}
#theme-switch .slider {
    width: 3rem;
    height: 1.5rem;
}
#theme-switch .slider::before {
    transform: translateX(-1.5rem);
}
#theme-switch input:checked ~ .slider::before {
    transform: translateX(1.5rem);
}


/*#theme-switch,*/
/*.toggle-switch {*/
/*    --wrap: nowrap;*/
/*    cursor: pointer;*/
/*}*/
/*#theme-switch,*/
/*.toggle-switch input[type=checkbox] {*/
/*    --h: 2rem;*/
/*    width: calc(var(--h) * 2);*/
/*    height: var(--h);*/
/*    margin: 0 2rem 0 0;*/
/*    left: 0;*/
/*    appearance:none;*/
/*    background: var(--base-200);*/
/*    border: 1px solid var(--base-50);*/
/*    border-radius: var(--h);*/
/*    cursor: pointer;*/
/*    transition: all .3s ease;*/
/*    opacity: 1;*/
/*}*/

/*.toggle-switch input[type=checkbox] {*/
/*    position: relative;*/
/*}*/
/*.toggle-switch {*/
/*    position: relative;*/
/*}*/

@media (max-width: 600px) {
    #theme-switch {
        left: 1rem;
    }
    .wp-site-blocks > header {
        padding: 0!important;
    }
}

/* Icon wrapper styling */
/*#theme-switch .icon {*/
/*    --w: 1em;*/
/*    position: relative;*/
/*    top: 0;*/
/*    margin: 0 .25em;*/
/*    color: var(--contrast-200);*/
/*    z-index: 2;*/
/*    transform: translateX(0);*/
/*}*/


/*#theme-switcher:not(:checked) ~ .sun-dim,*/
/*#theme-switcher:checked ~ .moon {*/
/*    --w: 1.5em;*/
/*    color: var(--contrast);*/
/*}*/

/*#theme-switcher:not(:checked) ~ .moon,*/
/*#theme-switcher:checked ~ .sun-dim {*/
/*    top: -.17rem;*/
/*}*/
/*    #theme-switcher:not(:checked) ~ .sun-dim {*/
/*        color: var(--secondary-0);*/
/*        transform: translate(-2px, 2px);*/
/*    }*/
/*    #theme-switcher:checked ~ .moon {*/
/*        transform: translate(4px, 4px);*/
/*    }*/

/*#theme-switch span,*/
/*.toggle-switch input[type=checkbox]::before {*/
/*    --m: 2px;*/
/*    content: "";*/
/*    position: absolute;*/
/*    top: var(--m);*/
/*    left: var(--m);*/
/*    width: calc(var(--h) - (var(--m) * 2));*/
/*    height: calc(var(--h) - var(--m) * 2);*/
/*    border: 1px solid rgba(var(--contrast-rgb), .2);*/
/*    border-bottom: 3px solid var(--contrast-200);*/
/*    background: var(--base-50);*/
/*    border-radius: 50%;*/
/*    z-index: 1;*/
/*    transform: rotate(360deg);*/
/*    transition: transform var(--transition-base),*/
/*    left var(--transition-base),*/
/*    top var(--transition-base),*/
/*    height var(--transition-base);*/
/*}*/
/*    #theme-switch input:checked ~ span,*/
/*    .toggle-switch input[type=checkbox]:checked::before {*/
/*        left: calc(100% - (var(--h) - var(--m)));*/
/*        transform: rotate(-180deg);*/
/*        transition: transform var(--transition-base), left var(--transition-base);*/
/*    }*/
/*    .toggle-switch input[type=checkbox]:checked {*/
/*        background: var(--action-0);*/
/*    }*/

/*!* Focus States *!*/
/*.theme-switch:focus-visible + label {*/
/*    outline: 2px solid var(--action-0);*/
/*    outline-offset: 2px;*/
/*}*/

/*!* Icon Animations *!*/
/*#theme-switch .icon {*/
/*    transition:*/
/*            transform var(--transition-base),*/
/*            width var(--transition-base),*/
/*            height var(--transition-base),*/
/*            top var(--transition-base),*/
/*            color var(--transition-base);*/
/*}*/

/*#theme-switcher:not(:checked) ~ .icon.dark,*/
/*#theme-switcher:checked ~ .icon.light {*/
/*    transform: rotate(360deg);*/
/*    color: var(--contrast-200);*/
/*}*/
/*#theme-switcher:not(:checked) ~ .icon.light,*/
/*#theme-switcher:checked ~ .icon.dark {*/
/*    transform: rotate(-360deg);*/
/*    color: var(--contrast);*/
/*}*/

/*!* Hover Effects *!*/
/*#theme-switch:hover span {*/
/*    background-color: var(--base-100);*/
/*}*/


/*#theme-switch:hover .icon {*/
/*    color: var(--action-50);*/
/*}*/

/*!* Active State *!*/
/*#theme-switch:active span {*/
/*    transform: scale(.97);*/
/*}*/

/***********************************************************
SMOOTH SCROLLING
***********************************************************/
html {
    scroll-behavior: smooth;
}

@media(prefers-reduced-motion){
    html {
        scroll-behavior: unset;
    }
    * {
        transition: none!important;
        animation: none!important;
    }
}

/*********************************************************
SPACING
*********************************************************/
main {
    min-height: 90vh;
    --justify: flex-start;
}

main > * {
    width: 100%;
    max-width: var(--maxWidth);
    margin: var(--setMargin);
}
main > .align-wide {
    max-width: var(--alignWide);
}
main > .align-full {
    --ml: 0;
    --mr: 0;
    max-width: var(--full);
}
main > section {
    --mt: 6rem;
}
main > *:first-child {
    margin-top: 0;
}

footer {
    padding: 1rem;
    background-color: var(--base-200);
    color: var(--contrast-200);
    text-align: center;
    margin: 4rem 0 0;
    position: relative;
    z-index: var(--z-top);
}
body:has(nav.fixed.bottom,nav.on-this-page) footer {
    padding-bottom: var(--offHeight);
}
footer p,
footer p + p {
    margin: .5rem auto;
}

@media (min-width:768px) {
    footer {
        padding: 1rem 2rem var(--offHeight);
    }
}
/*********************************************************
GRIDS
*********************************************************/
.grid-view,
.item-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.grid-view .item,
.item-grid .item {
    border-radius: var(--outerRadius);
    aspect-ratio: 1;
    display:flex;
    filter: none;
    transition: filter var(--transition-base), padding var(--transition-base), background-color var(--transition-base);
}
.item-grid button {
    --height: max-content;
    aspect-ratio: 1;
}
.grid-view img,
.item-grid img {
    border-radius: var(--innerRadius);
}
.item-grid.list-view {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    --gap: 2rem;
}
.item-grid.list-view .item .col {
    --gap: .5rem;
}
.item-grid.list-view img {
    width: 20%;
}

@media (min-width: 768px) {
    .item-grid,
    .grid-view {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

/*********************************************************
TYPOGRAPHY
*********************************************************/
h1 b, h1 strong,
h2 b, h2 strong,
h3 b, h3 strong,
h4 b, h4 strong,
h5 b, h5 strong,
h6 b, h6 strong {
    font-weight: var(--hBold);
    letter-spacing: 2px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    --mt: 1.5em;
    --mb: .25em;
    font-family: var(--heading);
    text-transform: uppercase;
    font-weight: var(--hWeight);
    line-height: 1.3;
    margin: var(--mt) var(--mr) var(--mb) var(--ml);
}
h1.inline,
h2.inline,
h3.inline,
h4.inline,
h5.inline,
h6.inline {
    font-size: 1.2rem;
    font-weight: 600;
    display: inline-block;
    margin: 0 2rem 0 0;
    letter-spacing: .05em;
}
h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small {
    display: block;
    line-height: .8;
    font-family: var(--body);
    font-size: .5em;
}

h1.inline + *,
h2.inline + *,
h3.inline + *,
h4.inline + *,
h5.inline + *,
h6.inline + * {
    display: inline-block;
    margin: .5rem 0;
}
h1.inline + .term-list,
h2.inline + .term-list,
h3.inline + .term-list,
h4.inline + .term-list,
h5.inline + .term-list,
h6.inline + .term-list {
    display: inline-flex;
    margin: .5rem 0;
}

h1 {
    font-size: var(--xxxlarge);
    font-weight: var(--hWeight);
    line-height: 1;
    margin: 0 var(--mr) .25em var(--ml);
}
h1:first-of-type {
    margin-top: 20vh;
}
h1 small {
    display: block;
    font-size: var(--small);
    font-weight: var(--bWeight);
    line-height: 1;
    font-family: var(--body);
}

h2 {
    font-size: var(--xxlarge);
}
h3 {
    font-size: var(--xlarge);
}
h4 {
    /*font-family: var(--body);*/
    font-weight: 400;
    font-size: var(--large);
}
h5, h6 {
    /*font-family: var(--body);*/
    font-weight: 400;
    font-size: var(--medium);
}

p {
    line-height: 1.6;
}
main > * h1,
main > * h2,
main > * h3,
main > * h4,
main > * h5,
main > * h6,
main > * p {
    width: 100%;
}
main > * p {
    margin: .5rem 0;
}
/*p + p {*/
/*    margin-top: 2.5rem;*/
/*}*/

a {
    color: var(--action-0);
    text-decoration: none;
}
ul a {
    display: inline-flex;
    text-decoration: none;
}

a:visited {
    color: var(--action-100);
}
a:hover {
    color: var(--action-50);
    text-decoration: underline;
}
ol {
    list-style-type:decimal;
}
/******************************************************************
BUTTONS
******************************************************************/
.buttons {
    --wrap: wrap;
    --justify: flex-start;
    margin: 1rem var(--mr) 1rem var(--ml);
    width: 100%;
    padding: 0;
}
.buttons.fit {
    width: fit-content;
    margin: 1rem 2rem;
}
.buttons li {
    --justify: stretch;
    --align: stretch;
    padding: 0;
    list-style: none;
    overflow:hidden;
    width: 100%;
}
.list-none {
    list-style: none;
}

@media (min-width: 768px){
    .buttons {
        max-width: var(--maxWidth);
        margin: 3rem var(--mr) 3rem var(--ml);
    }
}
ul.socials a,
.buttons a,
.btn + label,
[type=submit],
a.button,
a.wp-block-button__link,
button {
    --justify: center;
    --align: center;
    --dir: row;
    width: fit-content;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    background-color: var(--base-100);
    color: var(--contrast-50);
    border: 1px solid var(--base-200);
    border-radius: var(--innerRadius);
    padding: .25rem 1rem;
    font-family: var(--heading);
    cursor: pointer;
    outline: inherit;
    height: var(--height);
    display: inline-flex;
    justify-content: var(--justify);
    align-items: var(--align);
    gap: var(--gap);
    flex-wrap: var(--wrap);
    flex-direction: var(--dir);
    transition: color var(--transition-base);
    transition-property: color, border,background-color;
    position: relative;
}

a.button:hover,
a.button:focus,
ul.socials a:hover,
ul.socials a:focus,
.buttons a:hover,
.buttons a:focus,
.btn + label:hover,
.btn + label:focus,
[type=submit]:hover,
[type=submit]:focus,
button:hover,
button:focus {
    background-color: var(--action-0);
    color: var(--action-contrast);
}

.buttons .outline a {
    background-color: transparent;
    color: var(--action-0);
    border: 2px solid var(--action-0);
}
.buttons .outline a:hover,
.buttons .outline a:focus {
    background-color: var(--action-0);
    color: var(--action-contrast);
    border-color: var(--action-0);
}

.buttons a {
    width: 100%;
}

ul.socials a:disabled,
ul.socials a:disabled:hover,
.btn:disabled + label,
.btn:disabled + label:hover,
[type=submit]:disabled,
[type=submit]:disabled:hover,
[type=submit]:disabled:focus,
a.button:disabled,
a.wp-block-button__link:disabled,
button:disabled,
a.button:disabled:hover,
a.wp-block-button__link:disabled:hover,
button:disabled:hover,
a.button:disabled:focus,
a.wp-block-button__link:disabled:focus,
button:disabled:focus {
    opacity: .5;
    background-color: var(--base-200)!important;
    color: var(--contrast-200)!important;
}
details .icon {
    --w: 1.5em;
}

button.voted .icon,
button.favourite.favourited {
    animation: favourite-pop .4s cubic-bezier(.25, .46, .45, .94);
}
@keyframes favourite-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    75% { transform: scale(.9); }
    100% { transform: scale(1); }
}

button.filter-toggle {
    border: 1px solid var(--base-200);
    background-color: transparent;
    white-space: nowrap;
    font-size: 1rem;
    padding: .35em;
    --w: 1.2em;
}
.filter-toggle:hover {
    border-color: var(--action-50);
    color: var(--action-50);
}
.filter-toggle:focus {
    background-color: var(--action-50);
    color: var(--action-contrast);
}

button.favourite:not(.favourited) .heart-fill,
button.favourite.favourited .heart,
.toggle.notifications:not(.has) .bell-ringing,
.toggle.notifications.has .bell,
.vote button:not(.voted) .upvoted,
.vote button:not(.voted) .downvoted,
.vote .voted .upvote,
.vote .voted .downvote {
    display: none;
}
button.favourite:not(.favourited) .heart,
button.favourite.favourited .heart-fill,
.toggle.notifications:not(.has) .bell,
.toggle.notifications.has .bell-ringing,
.vote button:not(.voted) .upvote,
.vote button:not(.voted) .downvote,
.vote .voted .upvoted,
.vote .voted .downvoted {
    display: block;
}
/******************************************************************
ICONS
******************************************************************/

i.icon {
    width: var(--w);
    height: var(--w);
    display: inline-block;
    background-color: currentColor;
    mask-image: var(--icon);
    -webkit-mask-image: var(--icon);
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    vertical-align: middle;
    transition: var(--transition-size), var(--transition-color);
}
.icon.small,
nav ul .icon {
    --w: 24px;
}

.icon-colour {
    background: rgb(183, 51, 46);
    background: linear-gradient(180deg, rgba(255,0,128,1) 0%, rgba(250,71,101,1) 14%, rgba(251,121,35,1) 28%, rgba(176,190,19,1) 42%, rgba(14,204,0,1) 56%, rgba(14,225,166,1) 70%, rgba(63,152,253,1) 84%, rgba(166,90,196,1) 100%);
}

.icon.logo-basic svg path {
    transition: fill var(--timing) var(--function);
}
.icon.logo-basic svg path#innerCircle,
.icon.logo-basic svg path#outerSkull {
    fill: var(--base);
}

a .icon.logo-basic:hover svg path {
    fill: var(--base);
}
a .icon.logo-basic:hover svg path#innerCircle,
a .icon.logo-basic:hover svg path#outerSkull {
    fill: var(--action-0);
}

.icon.grab {
    cursor: grab;
}

main a .icon {
    margin-right: .5em;
}

body:has(#theme-switcher:not(:checked)) .icon.logo-split-color {
    position: relative;
}
body:has(#theme-switcher:not(:checked)) .icon.logo-split-color::before{
    content: '';
    display: block;
    width:60%;
    height:60%;
    border-radius: 50%;
    background-color: var(--dark-200);
    position: absolute;
    left: 18%;
    top: 22%;
    z-index:-1;
}

path#refresh {
    transform-origin: center;
    transform-box: fill-box;
    animation: spin 1s var(--function) infinite;
}

/******************************************************************
ACCESSIBILITY
******************************************************************/
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}
input[type=checkbox] + label:focus,
input[type=checkbox] + label:focus-visible,
input[type=radio] + label:focus,
input[type=radio] + label:focus-visible,
input:focus,
input:focus-within {
    outline: 2px solid var(--action-0) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(var(--action-rgb), var(--rgb-light))!important;
}

[aria-busy="true"] {
    cursor: progress;
}

/* Disabled states */
[aria-disabled="true"],
[disabled] {
    cursor: not-allowed;
    opacity: .7;
}

/******************************************************************
DETAILS
******************************************************************/
details {
    padding: .25rem 0;
    border-top: 1px solid var(--base-200);
    border-bottom: 1px solid var(--base-200);
}
details[open] {
    background-color: var(--base-50);
}
details summary {
    --wrap: nowrap;
    list-style: none;
    text-transform: uppercase;
    cursor: pointer;
    border: 0;
    transition: background-color var(--transition-base);
    transition-property: background-color, border;
    position: relative;
    padding: .5rem 2.5rem .5rem .5rem;
    gap: .5rem;
}
details summary:hover {
    background-color: var(--base-100);
    border-color: var(--base-100);
    color: var(--contrast);
    transition: background-color var(--transition-base);
    transition-property: background-color, border,color;
}
details[open] > summary {
    background-color: var(--base-50);
}
details summary::after {
    content: "";
    background-color: var(--contrast-100);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-image: var(--details);
    mask-image: var(--details);
    mask-repeat: no-repeat;
    mask-size: contain;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: auto;
    transition: background-color var(--transition-base);
    transition-property: background-color, transform;
}

details summary:hover::after,
details[open] > summary::after {
    background-color: var(--contrast);
}
details[open] > summary::after {
    transform: rotate(-540deg);
    transition: background-color var(--transition-base);
    transition-property: background-color, transform;
}

details::details-content {
    opacity: 0;
    block-size: 0;
    overflow-y: clip;
    transition: content-visibility var(--timing) allow-discrete, opacity var(--timing), block-size var(--timing);
}
details[open]::details-content {
    opacity: 1;
    block-size: auto;
}
@media (prefers-reduced-motion: no-preference){
    details {
        interpolate-size: allow-keywords;
    }
}

/******************************************************************
FORMS & FIELDS
******************************************************************/
textarea,
input[type=date],
input[type=number],
input[type=text],
input[type=url],
input[type=email],
input[type=textarea],
input[type=tel],
input[type=password],
input[type=search] {
    font-family: var(--body);
    font-size: var(--medium);
    color: var(--contrast);
    padding: var(--p-y) var(--p-x);
    border-radius: var(--innerRadius);
    background-color: var(--base);
    outline: 0;
    border: 1px solid var(--base-100);
    border-bottom: 2px solid var(--contrast-200);
    width: 100%;
    max-width: 100%;
    margin: 0 4px;
    transition: background-color var(--transition-base);
    transition-property: background-color, border;
}
textarea:focus,
input[type=number]:focus,
input[type=text]:focus,
input[type=url]:focus,
input[type=email]:focus,
input[type=textarea]:focus,
input[type=tel]:focus,
input[type=password]:focus,
input[type=search]:focus {
    outline: var(--action-50);
    background-color: var(--base-100);
    color: var(--contrast);
}
textarea::placeholder,
input::placeholder {
    font-family: var(--body);
    color: var(--base-200);
}
@media (min-width: 768px) {
    :root {
        --p-y: 1rem;
    }
}
select {
    /*appearance: none;*/
    /*-webkit-appearance: none;*/
    /*-moz-appearance: none;*/
    background: var(--base);
    border: 2px solid var(--base-100);
    border-radius: var(--innerRadius);
    color: var(--contrast);
    cursor: pointer;
    font-family: var(--body);
    font-size: var(--small);
    padding: .5rem 1rem;
    width: 100%;
    transition: var(--transition-color);
}
select:disabled {
    background-color: var(--base-50);
    border-color: var(--base-100);
    color: var(--base-200);
    cursor: not-allowed;
}

select option {
    background: var(--base);
    color: var(--contrast);
    padding: .5rem;
}
select option:hover,
select option:focus,
select option:active,
select option:checked {
    background: var(--action-0);
    color: var(--base);
    box-shadow: 0 0 0 100px var(--action-0) inset;
}

select option:checked {
    background: var(--action-0) linear-gradient(0deg, var(--action-0) 0%, var(--action-0) 100%);
    color: var(--base);
}

select:hover {
    border-color: var(--action-0);
}

select:focus {
    border-color: var(--action-0);
}

input[type=search]:focus + .clear-search {
    opacity: 1;
    cursor: pointer;
    transition: opacity var(--transition-base);
}

.search-container .clear-search {
    opacity: 0;
    cursor: default;
    transition: opacity var(--transition-base);
}
.search-container .icon.search {
    padding: 4px 8px;
    color: var(--contrast-200);
    --w: 3rem;
}
input[type="search"]::-moz-search-clear-button,
input[type="search"]::-ms-clear,
input[type="search"]::-ms-reveal,
input[type="search"]::search-cancel-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: none;
    visibility: hidden;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance:none;
}

.integration .label,
label {
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: .5rem;
    display: block;
}

/**********************
SPECIAL FIELDS
**********************/
.selected-items {
    --justify: flex-start;
    --gap: .5rem;
    margin-bottom: .5rem;
}

.selected-item {
    padding: .25rem .5rem;
    margin: .125em;
    background: var(--base-100);
    border-radius: .25rem;
    font-size: var(--medium);
    border: 1px solid var(--base-200);
    position: relative;
}

.remove-item {
    background: none;
    border: none;
    padding: .25rem;
    cursor: pointer;
    color: #666;
    border-radius: var(--innerRadius);
    width: 1.5em;
    height: 1.5em;
}
.remove-item .close {
    width: .5em;
    height: .5em;
}

.remove-item:hover {
    color: var(--action-0);
    background: #fee;
}

.clear-filters {
    margin-left: auto;
    border: 1px solid var(--base-200);
}
[type=radio],
[type=checkbox],
input.ch {
    position: absolute;
    opacity: 0;
    left: -200vw;
}
/* Pseudo checkbox */
[type=radio] + label,
[type=checkbox] + label,
input.ch + label {
    position: relative;
    cursor: pointer;
}
[type=radio] + label:hover,
[type=checkbox] + label:hover {
    color: var(--action-0);
}
[type=radio] + label::before,
[type=checkbox] + label::before,
input.ch + label::before,
[type=radio] + label::after,
[type=checkbox] + label::after,
input.ch + label::after {
    content: '';
    position: absolute;
    top: 50%;
}


[type=radio] + label::after,
[type=checkbox] + label::after,
input.ch + label::after {
    left: 5px;
    transform: translateY(-70%) rotate(45deg);
    width: 5px;
    height: 10px;
    border: solid var(--light-0);
    border-width: 0 2px 2px 0;
    display: none;
}




[type=radio] + label::before,
[type=checkbox] + label::before,
input.ch + label::before {
    left: 0;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--contrast-200);
    background-color: var(--base);
    border-radius: var(--innerRadius);
    transition: background-color var(--transition-base),
    border-color var(--transition-base);
}
[type=radio]:hover + label::before,
[type=checkbox]:hover + label::before,
input.ch:hover + label::before {
    border-color: var(--action-200);
}

[type=radio]:checked + label::before,
[type=checkbox]:checked + label::before,
input.ch:checked + label::before {
    background-color: var(--action-0);
    border-color: var(--action-100);
}

[type=radio]:checked + label::before {
    border-radius: 50%;
}

[type=checkbox]:checked + label::after,
input.ch:checked + label::after {
    display: block;
    left: 5px;
    top: 50%;
    transform: translateY(-70%) rotate(45deg);
    width: .35rem;
    height: .66rem;
    border: solid var(--light-0);
    border-width: 0 2px 2px 0;
}

[type=radio]:disabled + label,
[type=checkbox]:disabled + label,
input.ch:disabled + label {
    cursor: not-allowed;
    background-color: var(--base-50);
    color: var(--base-200);
    border-color: var(--base-200);
}
[type=radio]:disabled + label:hover,
[type=checkbox]:disabled + label:hover,
input.ch:disabled + label:hover {
    background-color: var(--base-50);
    color: var(--base-200);
    border-color: var(--base-200);
}
[type=radio]:disabled + label::before,
[type=checkbox]:disabled + label::before,
input.ch:disabled + label::before {
    border-color: var(--base-200);
}

[type=radio]:not(.btn) + label,
[type=checkbox]:not(.btn) + label,
input.ch + label {
    flex: 1;
    padding-left: 2rem;
    transform-origin: top center;
    transition: transform .3s ease;
    will-change: transform;
}

/* Non-pseudo checkbox, that acts more like a button/pill style */
.btn + label::before,
.btn + label::after {
    display: none;
}
.btn + label {
    --w: 1.2em; /* For icons */
    border: 1px solid var(--base-200);
    border-radius: var(--innerRadius);
    min-width: 2rem;
    min-height: 2rem;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: .5rem;
    color: var(--contrast-200);
    opacity: .8;
}
.radio-options.status label {
    padding: 0 .5rem;
}
.btn:checked + label {
    border-color: var(--contrast);
    color: var(--contrast);
    opacity: 1;
}

.btn + label:hover {
    color: var(--action-50);
    border-color: var(--action-50);
}

.btn[hidden] + label {
    display: none;
}

/* DATE */
.date-wrapper {
    position: relative;
    display: inline-block;
}
input[type=date] {
    padding: 8px 36px 8px 8px;
    /*border: 1px solid #ccc;*/
    border-radius: 4px;
}
input[type=date]::-webkit-calendar-picker-indicator {
    opacity: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
}
input[type=date] + .icon {
    --w: 20px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none; /* This allows clicks to pass through to the input below */
}

/** TIME **/


input[type=url] {
    background: var(--linkIcon);
    background-position: .5em;
    background-size: 1em;
    background-repeat: no-repeat;
    padding-left: 2em;
}


.field {
    margin: 2rem 0;
    position: relative;
}
.field:has(.has-tooltip) label {
    margin-left: 2rem;
}
/***************
TOGGLE TEXT
***************/
.toggle-text input {
    display: none;
}

.toggle-text input + label {
    font-weight: normal;
    color: var(--contrast)!important;
    text-transform: none;
    cursor: pointer;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.toggle-text label::before,
.toggle-text label::after {
    display: none;
}
.toggle-text label {
    padding-left: 0!important;
}

.toggle-text input + label .text {
    position: relative;
    margin: 0 .5rem;
    font-weight: bold;
    width: fit-content;
    padding: 2px 4px;
    border: 1px solid var(--action-50);
    border-radius: 4px;
    color: var(--action-50)!important;
}
table .toggle-text input+label .text {
    color: var(--contrast)!important;
    border-color: var(--contrast);
}
.toggle-text:hover .text,
table .toggle-text:hover .text {
    background-color: var(--action-50);
    color: var(--light-0)!important;
    border-color: var(--action-50);
}

.toggle-text input + label .off,
.toggle-text input + label .on {
    /*left: 0;*/
    /*position: absolute;*/
    /*top: 0;*/
    -webkit-transition: opacity .125s ease-out, -webkit-transform .125s ease-out;
    transition: opacity .125s ease-out, -webkit-transform .125s ease-out;
    transition: transform .125s ease-out, opacity .125s ease-out;
    transition: transform .125s ease-out, opacity .125s ease-out, -webkit-transform .125s ease-out;
}

.toggle-text input + label .off {
    opacity: 1;
    max-width: 100%;
    -webkit-transform: none;
    transform: none;
}

.toggle-text input + label .on {
    opacity: 0;
    max-width: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
}

.toggle-text input:checked + label .off {
    opacity: 0;
    max-width: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
}

.toggle-text input:checked + label .on {
    max-width: 100%;
    opacity: 1;
    -webkit-transform: none;
    transform: none;
}


/******************************************************************
TAXONOMY SELECTOR
******************************************************************/
.items-container {
    margin: 0;
    padding: 0;
    width: 100%;
}
.create-new-term {
    margin-top: 1rem;
    width: 100%;
}
.create-new-term .field,
.create-new-term[open] summary {
    margin-bottom: 1rem;
}
.create-new-term .field {
    max-width: 100%;
}
#jvb-selector > .wrap {
    --gap: nowrap;
}
/******************************************************************
QUANTITY FIELD
******************************************************************/
.quantity {
    margin: 0;
}
.quantity label {
    margin: 0;
    font-size: var(--small);
}
.quantity {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 4px;
    position: relative;
}
.quantity:focus-within {
    border-color: var(--action-0);
}

.quantity button {
    background: var(--base);
    padding: 0;
    width: 38px;
    height: 38px;
    z-index: 0;
    position: relative;
    border: 1px solid var(--base-200);
    color: var(--contrast-200);
}
.quantity button:hover:not(:disabled) {
    color: var(--action-0);
    border-color: var(--action-0);
    background-color: var(--base);
}
.quantity button:active:not(:disabled) {
    background-color: var(--action-0);
    color: var(--light-0);
    transform: scale(.95);
}
.quantity button:disabled {
    opacity: .5;
    cursor: not-allowed;
}
.quantity input[type=number] {
    z-index: 1;
    border: 1px solid var(--base-200);
    background: var(--base);
    text-align: center;
    font-size: 1.1rem;
    width: 60px;
    height: 48px;
    margin: 0;
    padding: 0!important;
    appearance: textfield;
}
.quantity input[type=number]::-webkit-outer-spin-button,
.quantity input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.quantity input[type=number]:focus {
    background-color: var(--base-50);
}
.quantity button.increase {
    left: -2px;
    border-radius: 0 4px 4px 0;
}
.quantity button.decrease {
    right: -2px;
    border-radius: 4px 0 0  4px;
}

/**************************************************
LIST OVERRIDES
**************************************************/
.term-list {
    --justify: flex-start;
    --align: center;
    --wrap: nowrap;
    --gap: 1.5rem;
    --dir: row;
    --w: 1em;
    list-style: none;
    padding: 0;
    height: var(--height);
    display: flex;
    justify-content: var(--justify);
    align-items: var(--align);
    gap: var(--gap);
    flex-wrap: var(--wrap);
    flex-direction: var(--dir);
    position: relative;
    overflow: auto hidden;
    touch-action: pan-x;
    text-transform: lowercase;
}
/*.term-list a {*/
/*        color: var(--contrast);*/
/*        text-decoration: none;*/
/*        font-size: var(--small);*/
/*    }*/
/*        .term-list a:hover {*/
/*            color: var(--action-0);*/
/*        }*/
/*.term-list.shop a::before,*/
/*.term-list.style a::before,*/
/*.term-list.theme a::before,*/
/*.term-list.city a::before,*/
/*#by-city::before,*/
/*#by-style::before,*/
/*#by-theme::before,*/
/*.term-list.all a::before{*/
/*    content:"";*/
/*    display:inline-block;*/
/*    mask-repeat: no-repeat;*/
/*    mask-size: contain;*/
/*    width: 1.2em;*/
/*    height: 1.2em;*/
/*    margin-right: .5rem;*/
/*    vertical-align: middle;*/
/*    background-color: currentColor;*/
/*}*/
/*.term-list a::after {*/
/*    display: none;*/
/*}*/

/*.term-list.shop a::before {*/
/*    mask-image: var(--shop);*/
/*}*/

/*.term-list.city a::before,*/
/*#by-city::before {*/
/*    mask-image: var(--map);*/
/*}*/
/*.term-list.style a::before,*/
/*#by-style::before,*/
/*.term-list.all.styles a::before {*/
/*    mask-image: var(--style);*/
/*}*/
/*.term-list.theme a::before,*/
/*#by-theme::before {*/
/*    mask-image: var(--theme);*/
/*}*/
/**************************************************
COVER BLOCK
**************************************************/
.cover {
    position: relative;
    overflow: hidden;
    min-height: 60vh;
    padding: var(--height);
}
    .cover::before {
        z-index: var(--coverIndex);
        background-color: var(--action-0);
        mix-blend-mode: var(--coverBlend);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        content: '';
        /*filter: brightness(.25);*/
    }
    .cover::before,
    .cover > video,
    .cover > img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }
    .cover .content {
        z-index: 5;
        overflow: hidden auto;
        width: max-content;
        height: max-content;
        max-width:100%;
        max-height: 100%;
    }
    /** A second image that overlays the first one **/
    .cover > img {
        z-index: 1;
        opacity: .5;
        mix-blend-mode: luminosity;
        object-fit: cover;
    }
    @media (min-width: 768px) {
        .cover > img {
            opacity: .33;
        }
    }
    /* Have the h1 have a background image. cool! */
    /*.cover h1 {*/
    /*    -webkit-background-clip: text;*/
    /*    -webkit-box-decoration-break: clone;*/
    /*    -webkit-text-fill-color: rgba(0, 0, 0, 0);*/
    /*    background-image: var(--bg-2);*/
    /*    background-position: center 75%;*/
    /*    background-repeat: no-repeat;*/
    /*    background-size: cover;*/
    /*    display: inline;*/
    /*    font-size: clamp(6.5rem, 15vw, 30rem);*/
    /*    font-variation-settings: "wght" 900;*/
    /*    order: 2;*/
    /*    overflow: hidden;*/
    /*    user-select: none;*/
    /*}*/

/**************************************************
BLOCKQUOTE
**************************************************/
blockquote {
    --background: var(--base-100);
    --border: var(--action-0);
    line-height: 1.2;
    padding: var(--height);
    border-radius: 4rem;
    background-color: var(--background);
}
    blockquote .content {
        margin: 12px auto;
        max-width: min(680px, 80vw);
        position: relative;
        font-family: var(--heading);
        font-weight: var(--hBold);
        padding: 25px;
        border-radius: var(--outerRadius);
        border: 2px solid var(--border);
    }
    blockquote .content::before,
    blockquote .content::after {
        position: absolute;
        content: '';
        left: 50px;
    }
    blockquote .content::before {
        width: 80px;
        border: 6px solid var(--background);
        bottom: -3px;
        z-index: 2;
    }
    blockquote .content::after {
        border: 2px solid var(--border);
        border-radius: 0 100% 0 0;
        width: 60px;
        height: 60px;
        bottom: -60px;
        border-bottom: 0;
        border-left: 0;
        z-index: 3;
    }
    blockquote cite {
        padding: 15px 0 0 12px;
        margin: 0 0 0 150px;
        z-index: 1;
    }
blockquote.pull {
    background-color: unset;
    border-radius: 0;
    margin: 4rem auto;
    padding: 3rem;
    box-shadow: var(--shadow-down), var(--shadow-up);
}
    blockquote.pull cite {
        margin: 0;
    }
/**************************************************
MODALS DIALOGUE
**************************************************/
dialog::backdrop {
    backdrop-filter: blur(5px);
    background-color: var(--overlay-medium);
}

dialog[open] {
    z-index:999;
    --padding: 0;
    top: 5vh;
    width: min(500px, 95vw);
    border-radius: 1rem;
    height: fit-content;
    overflow: hidden;
    max-height: 90vh;
    padding: var(--padding);
    background-color: var(--base-50);
    color: var(--contrast);
    border: 1px solid var(--base-200);
    box-shadow: var(--shadow);
}

dialog > .wrap,
dialog > form {
    max-height: 100%;
    overflow: hidden auto;
    margin: 0 0 0 1.5rem;
    padding-right: 1.2rem;
    width: calc(100% - 1.5rem);
}

dialog label {
    font-weight: normal;
}

dialog h2,
dialog h3 {
    margin: 0 0 .5rem 0;
    font-size: var(--large);
}

dialog:has(.m-actions){
    padding-bottom: var(--height);
}
.m-actions {
    --w: 1.15em;
    --justify: flex-end;
    --wrap: nowrap;
    --gap: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: var(--z-6);
    background-color: var(--action-100);
    box-shadow: var(--shadow-up);
}
.m-actions button {
    width: 100%;
    height: 3rem;
    border-radius: 0;
    color: var(--action-contrast);
    background-color: var(--action-50);
    border: 2px solid var(--action-50);
}
.m-actions button:hover,
.m-actions button:focus {
    background-color: var(--base);
    color: var(--contrast);
}
.m-actions button:first-of-type {
    border-bottom-left-radius: 1rem;
}
.m-actions button:last-of-type {
    border-bottom-right-radius: 1rem;
}
dialog ul {
    list-style: none;
}

dialog .search-container {
    padding-top: 1rem;
    width: 100%;
    gap: .5rem;
}
/****************
GALLERY
****************/
dialog[open].gallery {
    width: calc(100vw - var(--padding) * 2);
    height: 99vh;
    background: var(--overlay-heavy);
}

.gallery .content {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    padding: 2rem;
}
.gallery .favourite button.favourite {
    top: unset;
    bottom: 1rem;
    right: 1rem;
}

.gallery .image {
    max-width: 100%;
    max-height: calc(100vh - 4rem);
    object-fit: contain;
}

.gallery .cancel {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: .5rem;
    z-index: 10;
    transition: color .3s ease;
}

.gallery .cancel:hover {
    color: var(--action-0);
}

.gallery .nav {
    position: absolute;
    top: 50%;
    height: 50%;
    z-index: 5;
    transform: translateY(-50%);
    border: none;
    color: var(--contrast);
    cursor: pointer;
    padding: 1rem;
    transition: color .3s ease;
}
.gallery .nav:hover {
    background-color: var(--overlay-heavy);
}

.gallery .nav:hover {
    color: var(--action-0);
}

.gallery .prev {
    left: 1rem;
}

.gallery .next {
    right: 1rem;
}

.gallery .counter {
    position: absolute;
    top: 1rem;
    left: 1rem;
    color: white;
    font-size: .875rem;
}

.gallery .content details {
    position:absolute;
    bottom: 1rem;
    left: 2rem;
    width: calc(100% - 4rem);
    background-color: var(--overlay-light);
    padding: 0;
}
.gallery .content details:hover,
.gallery .content details[open] {
    background-color: var(--overlay-heavy);
    backdrop-filter: blur(5px);
}
.gallery .content details[open] summary {
    background-color: transparent;
}
/**************************************************
TABLES
**************************************************/
table {
    white-space: nowrap;
    width: 100%;
    display: block;
    margin: 0 0 2rem;
    border-radius: 4px;
    height: var(--maxHeight);
    overflow: auto;
    position: relative;
}
thead,tfoot {
    position: sticky;
    z-index: 10;
    background-color: var(--base);
    text-transform: uppercase;
    padding: .5rem 0;
    line-height: 2;
    font-weight: normal;
}

tr:nth-of-type(even){
    background-color: var(--base-200);
}
tfoot th {
    vertical-align: middle;
}
tfoot th:first-of-type {
    text-align: right;
}
tbody {
}
thead tr, tfoot tr {
    background-color: var(--overlay-heavy);
    box-shadow: var(--shadow);
}
thead tr {
    border-bottom: 1px solid var(--contrast-200);
}
tfoot tr {
    border-top: 1px solid var(--contrast-200);
}
thead {
    top: 0;
}
tfoot {
    bottom: 0;
}
thead th {
    width: max-content;
}
th p {
    margin: 0!important;
}
td {
    width: max-content;
    padding: .5rem 1rem;
}

td .toggle input[type=checkbox] {
    margin: 0;
}
td .field {
    margin: .25rem 0;
}
td[data-id="actions"] label {
    margin: 0;
    padding: 0;
}
td .description {
    display: none;
}
td input[type=text] {
    width: fit-content;
    max-width: 40vw;
    padding: .25em!important;
    font-size: var(--small)!important;
}

tbody tr {
    border: 2px solid transparent;
}
tbody tr:focus-within {
    background-color: var(--base-100);
    border-color: var(--action-50)
}

[data-stuck] {
    background-color: var(--overlay-medium);
    position: sticky;
    left: -1rem;
    z-index: 15;
    box-shadow: var(--subtleRight);
}
tbody [data-stuck] {
    z-index: 5;
}
thead [data-stuck],
tfoot [data-stuck] {
    background: var(--base);
}

/**************************************************
TOOLTIP
**************************************************/
[role=tooltip],
.hide-tooltip.hide-tooltip.hide-tooltip + [role="tooltip"] {
    visibility: hidden;
    position: absolute;
    bottom: 2rem;
    left: 1rem;
    width: max-content;
    height:fit-content;
    max-width: 50vw;
    padding: .5rem;
    border-radius: var(--innerRadius);
    box-shadow: var(--shadow);
    background: var(--action-0);
    color: var(--action-contrast);
}

body.menu_item [role=tooltip] {
    left: auto;
    right: 100%;
    top: -200%;
    z-index: var(--z-4);
}
[role=tooltip] p {
    margin: 0;
}
[role=tooltip] p + p {
    margin-top: .5rem;
}

/*.field:has([aria-describedby]:hover) [role=tooltip],*/
.field:has([aria-describedby]:focus) [role=tooltip],
[aria-describedby]:hover ~ .has-tooltip [role="tooltip"],
[aria-describedby]:focus  ~ .has-tooltip[role="tooltip"] {
    visibility: visible;
    display: block;
}
.has-tooltip {
    display: inline-flex;
    justify-content: flex-end;
    position: absolute;
    top: 0;
    left: 0;
    --w: 1.5rem
}
.tt-toggle {
    cursor: pointer;
    display: flex;
    border-radius: 50%;
    background-color: transparent;
}
.tt-toggle:hover,
.tt-toggle:focus {
    background-color: var(--action-0);
    color: var(--action-contrast);
}
.tt-toggle:hover + [role=tooltip],
.tt-toggle:focus + [role=tooltip] {
    visibility: visible;
}

/************************************************************
SELECTOR
************************************************************/
dialog[open]#jvb-selector {
    height: 70vh;
    top: 15vh;
    display: flex;
}
#jvb-selector > .wrap {
    flex: 1;
}

/******************************************************************
LOADING
******************************************************************/
dialog.loading {
    opacity: 0;
    transition: opacity var(--transition-base);
}
dialog.loading[open] {
    opacity: 1;
    transition: opacity var(--transition-base);
    width: 100vw;
    height: 100vh;
    display: flex;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
    border: none;
    background-color: transparent;
    box-shadow: none;
    --w: 3em;
    justify-content: center;
    align-items: center;
}
dialog.loading[open]@starting-style {
    opacity: 0;
}
dialog.loading[open] > .col {
    height: fit-content;
    width: min(400px, 60vw);
    border-radius: var(--outerRadius);
    background-color: var(--overlay-medium);
    padding: 2rem;
    box-shadow: var(--shadow);
    position: relative;
}

dialog.loading[open] .spinner {
    position: absolute;
    top: 1rem;
    width: 5rem;
    height: 5rem;
    border-width: 0;
    border-top-width: 4px;
    animation: spin 1s var(--function) infinite;
}
.loading[open] .icon {
    background-color: var(--action-0);
}

dialog.loading[open] .icon {
    animation: dance 2s ease-in-out infinite;
    transition: color .3s ease;
}
dialog.loading[open] h3 {
    color: var(--contrast);
    margin: 2rem 1rem auto !important;
    font-size: var(--large);
    width: -moz-fit-content;
    width: fit-content;
    /*-webkit-text-stroke: 1px var(--contrast);*/
    /*--g: conic-gradient(var(--action-0) 0 0) no-repeat text;*/
    /*animation: letterOutline 1s linear infinite alternate, letterInside 2s linear infinite;*/
    /*background: var(--g) 0, var(--g) 1ch, var(--g) 2ch, var(--g) 3ch, var(--g) 4ch, var(--g) 5ch, var(--g) 6ch;*/
}

dialog.loading[open] p {
    margin: .5rem auto;
}

dialog.loading[open]::after {
    animation: shimmer 3s ease-in-out infinite;
    background: linear-gradient(90deg, var(--shimmer));
    content: "";
    inset: 0;
    position: absolute;
    z-index: -1;
}

.spinner {
    width: 12px;
    height: 12px;
    border: 2px solid transparent;
    border-top: 2px solid var(--action-50);
    border-radius: 50%;
    animation: spin 1s var(--function) infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes shimmer {
    0% {
        left: -50%;
    }
    50% {
        left: 150%;
    }
    100% {
        left: -50%;
    }
}


@keyframes dance {
    0%, 100% {
        transform: rotate(-5deg) scale(1);
    }
    50% {
        transform: rotate(5deg) scale(1.1);
    }
}

@keyframes letterOutline {
    0% {
        background-size: 1ch 0;
    }
    100% {
        background-size: 1ch 100%;
    }
}

@keyframes letterInside {
    0%, 50% {
        background-position-y: 100%,0;
    }
    50.01%, 100% {
        background-position-y: 0, 100%;
    }
}

/******************************
TABS
******************************/
.tab-content[hidden] {
    display: block!important;
    transform: scaleY(0);
    height: 0;
    overflow: hidden;
}
.tab-content[hidden]:focus-within {
    transform: scaleY(1);
    height:auto;
}

nav.tabs h2 {
    margin: 0!important;
    line-height: 1;
    font-size: var(--medium);
    display: flex;
    color: var(--contrast);
    white-space: nowrap;
    gap: 1rem;
}
nav.tabs .active h2 {
    color: var(--action-contrast);
}
nav.tabs button {
    padding: .75rem 1.5rem;
    border-radius: 0;
    position: relative;
    border: 2px solid var(--action-0);
}
nav.tabs > button:first-of-type {
    border-top-left-radius: var(--innerRadius);
}
nav.tabs > button:last-of-type {
    border-top-right-radius: var(--innerRadius);
}
.tabs > button:hover,
.tabs > button:focus {
    background-color: var(--base-200);
}

.tabs > button::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 3px;
    background-color: var(--action-50);
    transition: width .3s;
}
.tabs > button:hover::after,
.tabs > button.active::after {
    width: 100%;
}
.tabs > button.active::after {
    background-color: var(--action-200);
}
.tabs > button.active {
    background-color: var(--action-0);
    color: var(--action-contrast);
}
.tabs > button.active:hover,
.tabs > button.active:focus {
    background-color: var(--action-100);
}
.tab-content h2 {
    display: none;
}
/*****************************************************************************
MENU
*****************************************************************************/
.toggle-details {
    gap: 2px;
}
body.menu_item #top {
    z-index: var(--z-4);
    position: relative;
}
section .toggle-details {
    position: absolute;
    right: 0;
    top: 5rem;
}

[data-toggle=all] {
    position: fixed;
    bottom: calc(var(--offHeight) + var(--height) + .5rem);
    right: 0;
    z-index: var(--z-4);
    background-color: var(--action-0);
    color: var(--action-contrast);
}
[data-toggle] {
    z-index: var(--z-1);
}
body:has(#queue[hidden]) [data-toggle=all] {
    left: 1rem;
}
dialog:not([open]).col,
dialog:not([open]).row {
    display: none;
}

@media (min-width:768px) {
    section .toggle-details {
        right: -10%;
    }
}
/********************************************
TYPE TEXT
********************************************/
/* Cursor, for typing messages */
.typeText::after {
    content: '|';
    display: inline-block;
    margin-left: 0;
    animation: blink .75s step-end infinite;
}
@keyframes blink {
    from, to { opacity: 1; }
    50% { opacity: 0; }
}

/**************************************************
POPUPS:
- toast container
- cart
- queue
**************************************************/
aside {
    position: fixed;
    top: var(--doubleHeight);
    bottom: var(--offHeight);
    width: min(500px, calc(100vw - 2rem));
    background-color: var(--base);
    z-index: var(--z-5);
    box-shadow: var(--shadow);
    padding-bottom: var(--height);
    overflow: visible;
}

.qtoggle
    /*.toggle-cart,*/
/*.create-item */
{
    z-index: var(--z-6);
    position: fixed;
    bottom: var(--offHeight);
    width: var(--height);
    height: var(--height);
    background-color: var(--overlay-medium);
    color: var(--contrast);
    transition: width var(--transition-base), background-color var(--transition-base), color var(--transition-base), left var(--transition-base);
    box-shadow: var(--shadow);
}
/*.toggle-cart:hover,*/
.qtoggle:hover,
/*.create-item:hover,*/
    /*.toggle-cart:focus,*/
.qtoggle:focus
/*.create-item:focus */
{
    background-color: rgba(var(--action-rgb),var(--rgb-heavy));
    color: var(--action-contrast);
}
/*.toggle-cart:disabled,*/
.qtoggle:disabled,
/*.create-item:disabled,*/
    /*.toggle-cart:disabled:hover,*/
.qtoggle:disabled:hover,
/*.create-item:disabled:hover,*/
    /*.toggle-cart:disabled:focus,*/
.qtoggle:disabled:focus
/*.create-item:disabled:focus */
{
    opacity: .5;
    background-color: var(--overlay-light);
    color: var(--contrast);
}
/******************
CART
******************/
/*.create-item,*/
.toggle-cart {
    right: 0;
    border-radius: 4px 4px 4px var(--outerRadius);
}

body:has(#cart.expanded) .toggle-cart .icon {
    display: none;
}

aside#cart {
    padding-bottom: 6rem;
}
#cart form {
    max-height: 100%;
    overflow: hidden auto;
}
#cart nav.tabs {
    z-index: var(--z-6);
    top: 0;
}
#cart table {
    height: auto;
}
#cart th {
    padding: 0 1.5rem;
}
#cart table th:first-of-type {
    width: 100%;
}

#cart nav.tabs {
    position: sticky;
    box-shadow: var(--shadow);
}
#cart button[data-tab] {
    flex: 1;
    border-radius: 0;
}

#cart form > *:not(.tabs) {
    max-width: 90%;
    margin: 0 auto;
}

#cart form .empty p {
    margin: .5rem 0!important;
}

#cart .cart-total.cart-total {
    --gap: 0 1rem;
    padding-right: 1rem;
    position: absolute;
    bottom: var(--height);
    width: 100%;
    max-width: 100%;
    background-color: var(--overlay-heavy);
    z-index: var(--z-6);
    box-shadow: var(--shadow-up);
}
.cart-total p {
    --gap: 2rem;
    max-width: 100%;
    margin: 0;
}
.cart-total p span {
    width: 6rem;
    display: inline-block;
    text-align: right;
}
.cart-total p + p {
    font-weight: bold;
}

.cart-items .total {
    font-weight: bold;
}
#cart .restored {
    background-color: rgba(var(--action-rgb), var(--rgb-light));
    border-radius: var(--outerRadius);
    padding: 1rem;
}
.restored h3 {
    font-size: var(--medium);
    margin: 0;
}
.restored p {
    margin: 0;
}
.restored .row {
    --gap: 0;
    --wrap:nowrap;
    --w: 1em;
}
/******************
TOAST
******************/
.toasts {
    position: fixed;
    top: 4rem;
    right: -350px;
    z-index: 1000;
    width: 350px;
}

.toast {
    background-color: var(--overlay-heavy);
    border-left: 4px solid var(--action-0);
    padding: 1rem;
    box-shadow: var(--shadow);
    left: 0;
    position: relative;
    opacity: 0;
    transition: left .3s, opacity .3s;
}

.toast.success {
    border-left-color: var(--success);
}

.toast.error {
    border-left-color: var(--error);
}

.toast.info {
    border-left-color: var(--warning);
}

.toast.show {
    left: calc(-350px - 1rem);
    opacity: 1;
}

.toast.hiding {
    left: 0;
    opacity: 0;
}

.toast-content p {
    margin: 0;
}

.close-toast {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    opacity: .5;
    transition: opacity .2s;
    color: inherit;
}

.close-toast:hover {
    opacity: 1;
}
/******************
QUEUE
******************/

.qtoggle {
    left: 0;
    border-radius: 4px 4px var(--outerRadius) 4px;
}

.qtoggle.expanded {
    left: var(--height);
    width: min(calc(500px - var(--height)), calc(100vw - 2rem - var(--height)));
}

.qtoggle.saving .icon {
    background-color: var(--action-0);
    animation: spin .87s var(--function) infinite;
}

#queue .status-actions {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-2);
}

#queue .status-actions .popup {
    position: absolute;
    z-index: -1;
    width: max-content;
    max-width: 300px;
    background-color: var(--action-50);
    color: var(--action-contrast);
    border-radius: var(--innerRadius);
    padding: .25em .75em;
    top: 1rem;
    left: -100vw;
    transition: left var(--transition-base);
}
aside#queue .popup::before{
    content: '';
    width: 10px;
    height: 10px;
    transform: rotate(-45deg);
    background-color: var(--action-50);
    z-index: -1;
    left: -5px;
    position: absolute;
    top: calc(50% - 5px);
}

.expanded#queue .status-actions .popup.showing {
    left: calc(100% + 1em);
}
#queue .status-actions .popup.showing {
    left: calc(200vw + var(--offHeight));
    max-width: 75vw;
}

/** BADGES **/

.refresh .countdown,
#queue .item .status,
.filter .count,
.qtoggle .count,
.qtoggle .indicator {
    z-index: var(--z-3);
    --offset: 0;
    position: absolute;
    top: var(--offset);
    background-color: var(--overlay-light);
}
.expanded + .qtoggle .indicator,
.expanded + .qtoggle .count {
    --offset: .25rem;
}
/* Status indicator */
.qtoggle .indicator {
    right: var(--offset);
    width: .75rem;
    height: .75rem;
    border-radius: 50%;
}

aside#queue.synced + .qtoggle .indicator {
    background-color: var(--success);
}

aside#queue.pending + .qtoggle .indicator {
    background-color: var(--warning);
    animation: pulse 2s infinite;
}
aside#queue.pending:not(.expanded) + .qtoggle .icon {
    background-color: var(--error);
    animation: spin 1s var(--function) infinite;
}

/* Status count badge */
.qtoggle .count {
    --align: center;
    --justify: center;
    left: var(--offset);
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 4px;
    color: var(--contrast);
    border-radius: var(--innerRadius);
    font-size: var(--extra-small);
}

#queue:has(.empty-queue) + .qtoggle .count {
    display: none;
}

aside#queue .header {
    padding: 15px;
    border-bottom: 1px solid var(--base-200);
    flex-shrink: 0;
}
.qitems {
    flex: 1;
    overflow: hidden auto;
    padding: .5rem 2rem;
    --gap: .5rem;
}

aside#queue h3 {
    margin: 0 0 12px 0;
    font-size: 16px;
    color: var(--contrast);
}

#queue .filters .filter {
    background-color: transparent;
    white-space: nowrap;
    font-size: var(--small);
}

#queue .filters .filter.active {
    background: var(--base-200);
    border-color: transparent;
}
#queue .filter:hover,
#queue .filter:focus {
    background-color: var(--action-0);
    color: var(--action-contrast);
}


/* Filter count badge */
.filter .count {
    --offset: -8px;
    right: var(--offset);
    background: var(--base-200);
    color: var(--contrast-200);
    border-radius: 10px;
    min-width: 18px;
    height: 18px;
    font-size: 10px;
}
.filter .count:empty {
    display: none;
}

/* Empty state */
.empty-queue {
    height: 100px;
    color: var(--contrast-200);
    font-size: var(--small);
    font-style: italic;
}

.refresh .countdown:not(.counting),
aside#queue:has(.empty-queue) .refresh .count {
    display: none;
}

/* Queue items */
#queue .item {
    padding: 15px;
    background: var(--base-100);
    border-radius: var(--innerRadius);
    transition: all .2s ease;
    box-shadow: var(--shadow-none);
}

#queue .item:hover {
    box-shadow: var(--shadow);
}

#queue .item .header {
    position: relative;
}

#queue .item .type {
    font-size: var(--small);
}

#queue .item .status {
    --w: 1em;
    --gap: 0;
    --justify:center;
    --align: center;
    --offset: -1.2rem;
    aspect-ratio: 1;
    right: var(--offset);
    border-radius: 50%;
    color: var(--contrast-200);
    background-color: var(--base-50);
    border: 1px solid var(--base-200);
    width: 1.25em;
    height: 1.25em;
}

#queue .item .status.pending {
    background: var(--base-100);
    color: var(--contrast-200);
}
#queue .item .status.processing {
    background: var(--base-200);
    color: var(--contrast-100);
    animation: pulse-color 2s infinite;
}

#queue .item .status.completed {
    background: var(--base-50);
    color: var(--base-200);
}
#queue .item .status.completed:hover {
    color: var(--contrast-200);
}

#queue .item .status.failed {
    background: var(--base);
    color: var(--error);
}


#queue .item button {
    font-size: 16px;
    padding: 0;
    line-height: 1;
    opacity: .5;
    transition: opacity .2s;
}

#queue .item button:hover {
    opacity: 1;
}

/* Item details */
#queue .item .info {
    margin-top: 8px;
    font-size: var(--small);
}
#queue .item .info .time {
    --gap: 7px;
    font-size: 10px;
}

/* Item actions */
#queue .item .actions {
    margin-top: 12px;
    --gap: 8px;
}

#queue .item .actions button {
    padding: 6px 12px;
    font-size: 12px;
    background: var(--base-200);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all .2s;
    color: var(--contrast);
}

#queue .item .actions .retry {
    background-color: var(--secondary-200);
    color: var(--secondary-contrast);
}


#queue .item .actions button:hover {
    opacity: .9;
}

/* Queue actions footer */
.queue-actions {
    padding: 15px;
    border-top: 1px solid var(--base-200);
    flex-shrink: 0;
}

.queue-actions button {
    padding: 8px 12px;
    font-size: var(--small);
    transition: all .2s;
}


/* Refresh area */
.status-actions > .refresh {
    position: relative;
    font-size: var(--small);
}

.refresh .countdown {
    --justify:center;
    --align: center;
    --offset: 0;
    right: var(--offset);
    margin: 0 3px;
    border-radius: 50%;
    border: 1px solid var(--base-200);
}

.refreshNow {
    width: var(--height);
    height: var(--height);
}

.refreshNow:hover {
    background: var(--base-200);
    color: var(--contrast-200);
}

.icon.refresh {
    --w: 18px;
}

/* Refreshing animation */
#queue.pending.expanded .refreshNow .icon {
    animation: spin 1.5s var(--function) infinite;
}
/**************************************************
DELAY
**************************************************/
/* Initialize counter on the parent container */
.item-grid, #queue {
    counter-reset: delay-counter;
}

/* Increment counter for each item */
.item {
    counter-increment: delay-counter;
}

/* Use counter value to calculate delay */
.item .progress .fill::after {
    --delay: calc(counter(delay-counter) * .1s);
}
/**************************************************
PROGRESS
**************************************************/
.progress .bar {
    height: 6px;
    display: block;
    border-radius: 6px;
    overflow: hidden;
    background: var(--base-200);
    position: relative;
}

.progress .fill {
    height: 100%;
    background: var(--action-0);
    border-radius: 6px;
    width: 0;
    transition: width .3s ease;
}
.progress .details {
    margin-top: 5px;
    font-size: var(--small);
    color: var(--contrast);
    text-align: center;
    padding: .25rem 0;
}
.progress .details:empty {
    display: none;
}
.queued .fill::after,
.pending .fill::after,
.processing .fill::after,
.uploading .fill::after {
    --delay: 0s;
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 30%;
    height: 100%;
    background: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, .225) 50%,
            rgba(255, 255, 255, 0) 100%
    );
    animation: shimmer 2.5s infinite linear var(--delay);
}
/**************************************************
ACTIONS
**************************************************/
.additional-actions.additional-actions {
    padding: 0;
    background-color: transparent;
}
.additional-actions .buttons {
    position: fixed;
    bottom: var(--offHeight);
    right: 1rem;
    margin: 0;
    --gap: 1rem;
    z-index: var(--z-6);
    width: fit-content;
}
.additional-actions .buttons button {
    height: var(--height);
    width: var(--height);
    background-color: var(--overlay-medium);
    color: var(--contrast);
    transition: width var(--transition-base), background-color var(--transition-base), color var(--transition-base), left var(--transition-base);
    box-shadow: var(--shadow);
}
.additional-actions .buttons button:hover {
    background-color: var(--action-0);
    color: var(--action-contrast);
}
.additional-actions .buttons button:disabled,
.additional-actions .buttons button:disabled:hover,
.additional-actions .buttons button:disabled:focus {
    opacity: .5;
    background-color: var(--overlay-light);
    color: var(--contrast);
}
.additional-actions .buttons button:last-of-type {
    border-radius: 4px 4px 4px var(--outerRadius);
}
aside {
    position: fixed;
    top: var(--doubleHeight);
    bottom: var(--offHeight);
    width: min(500px, calc(100vw - 2rem));
    background-color: var(--base);
    z-index: var(--z-5);
    box-shadow: var(--shadow);
    --wrap: nowrap;
    --align: stretch;
    overflow: hidden auto;
    padding: 1rem 1rem var(--height);
}
aside.left {
    left: var(--offScreen);
    transition: left var(--transition-base);
    border-radius: 0 var(--outerRadius) var(--outerRadius) 0;
}
aside.left.expanded {
    left: 0;
}

aside.right {
    right: var(--offScreen);
    border-radius: var(--outerRadius) 0 0 var(--outerRadius);
    transition: right var(--transition-base);
}
aside.right.expanded {
    right: 0;
}
aside.right.expanded button.close {
    position: sticky;
    bottom: calc(var(--height) * -1);
    left: 0;
    border-bottom-left-radius: var(--outerRadius);
    width: var(--height);
    height: var(--height);

}
.additional-actions .buttons:has(.expanded) button:not(.expanded) {
    display: none;
}
.additional-actions .buttons:has(.expanded){
    right: 0;
}

.additional-actions .buttons .expanded {
    width: calc(min(500px, calc(100vw - 2rem)));
    background-color: var(--base);
}
.additional-actions .buttons button:hover,
.additional-actions .buttons .expanded:hover {
    background-color: var(--action-0);
    color: var(--action-contrast);
}

[type=submit] {
    width: 100%;
    height: var(--height);
    background-color: var(--action-0);
    color: var(--action-contrast);
    box-shadow: var(--shadow-none);
    font-weight: bold;
}
[type=submit]:hover {
    box-shadow: var(--shadow);
    border: 2px solid var(--action-0);
    color: var(--action-0);
    background-color: var(--action-contrast);
}

aside nav.tabs {
    position: sticky;
    bottom: unset;
    top: 0;
    left: 0;
    right: 0;
}
.jvb-referral nav.tabs button {
    width: 50%;
}
aside .tab-content.active {
    padding: 1rem;
    min-height: 100%;
}

aside header h3 {
    font-size: var(--medium);
    margin: 1rem 0;
    text-align: center;
}
aside header p {
    margin: .25rem 0;
    text-align: center;
}
aside h4 {
    font-size: var(--small);
    margin: 1rem 0 0 0;
}

code {
    width: 100%;
    margin: .5rem;
    padding: .5rem;
    user-select: all;
    text-align: center;
    border-radius: 4px;
    background-color: var(--base-200);
    border: 1px solid var(--contrast-200);
}
.restore-form {
    background-color: rgba(var(--action-rgb), var(--rgb-light));
    border: 1px solid var(--action-200);
    padding: .5rem;
    border-radius: var(--outerRadius);
    margin: 1rem 2rem;
}
.restore-form h3 {
    text-align: center;
    margin: 1rem 0 0;
    font-size: var(--medium);
}
.restore-form p {
    margin: .5rem 0;
}
.fstatus {
    z-index: var(--z-5);
    background-color: rgba(var(--base-rgb),var(--rgb-heavy));
    border-radius: 4px;
    padding: 0 .5rem;
    position: fixed;
    bottom: var(--offHeight);
    right: calc(var(--offHeight) + 1rem);
    --w: 1em;
    box-shadow:var(--shadow);
}
.fstatus .spinner {
    display: none;
}
.fstatus.loading .spinner {
    display: inline-block;
}

.fstatus p {
    margin: 0;
    padding: .25rem;
}

/**************************************************
ASIDE EXCEPTIONS
**************************************************/
aside.pre-header,
aside.sub-header {
    left: 0;
    right: 0;
    width: 100vw;
    display: flex;
    justify-content: space-between;
    height: 2rem;
    bottom: unset;
    padding: 0 .5rem;
    font-size: var(--small);
    flex-wrap: nowrap;
    align-items: center;
    max-width: 100vw;
}
    @media (min-width: 768px) {
        aside.pre-header,
        aside.sub-header {
            padding: 0 2rem;
            font-size: var(--medium);
        }
    }
    .pre-header p,
    .pre-header p + p,
    .sub-header p,
    .sub-header p + p {
        margin: 0;
    }
.pre-header {
    top: 0;
    z-index: 1001;
}
.wp-site-blocks > .pre-header ~ header {
    top: 2.05rem;
}
.sub-header {
    top: var(--height);
    box-shadow: var(--shadow);
}
.pre-header ~ .sub-header {
    top: calc(var(--height) + 1.5rem);
}

/**************************************************
RESPONSES
**************************************************/
/*dialog.create-response {*/
/*    width: min(650px, calc(95vw - (var(--padding) * 2)));*/
/*}*/
/*dialog.create-response .original {*/
/*    height: 20vh;*/
/*    overflow-y: scroll;*/
/*    padding: 1rem;*/
/*    background-color: var(--base-100);*/
/*    border-radius: var(--innerRadius);*/
/*}*/
/*dialog.create-response .editor-container .ql-container {*/
/*    height: 30vh;*/
/*}*/

/*.responses summary {*/
/*    text-transform: none;*/
/*    display: block;*/
/*}*/
/*.news .header {*/
/*    margin-right: 2rem;*/
/*}*/
/*.news > summary::after,*/
/*.responses summary::after {*/
/*    display: block;*/
/*    position: absolute;*/
/*    top: 0;*/
/*    right: 0;*/
/*    mask-image: var(--chevron);*/
/*}*/
/*.responses[open] > summary {*/
/*    background-color: inherit;*/
/*}*/
/*.responses[open] {*/
/*    background-color: var(--base-200);*/
/*}*/
/*.responses {*/
/*    margin: 1rem 0;*/
/*}*/

/*.response {*/
/*    background-color: inherit;*/
/*}*/
/*.response[open] {*/
/*    background-color: var(--base-100);*/
/*}*/
/*.response[open] > summary {*/
/*    background-color: inherit;*/
/*}*/
/*.news[open] > summary::after,*/
/*.responses[open] > summary::after,*/
/*.response[open] > summary::after {*/
/*    mask-image: var(--chevron);*/
/*}*/
/*.response > summary::after {*/
/*    display: none;*/
/*}*/
/*.response:has(.response) > summary::after {*/
/*    display: block;*/
/*}*/
/*.response:nth-of-type(even) {*/
/*    background-color: var(--base-50);*/
/*}*/
/*button.reply {*/
/*    margin-left: auto;*/
/*}*/
/**************************************************
ANIMATIONS
**************************************************/
/** Used for Loading **/
@keyframes shimmer {
    0% {
        left: -50%;
    }
    50% {
        left: 150%;
    }
    100% {
        left: -50%;
    }
}


@keyframes pulse-color {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--action-rgb), .4);
    }
    30% {
        box-shadow: 0 0 0 .75rem rgba(var(--action-rgb), 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(var(--action-rgb), 0);
    }
}

/** fadeIn & fadeOut, for adding/removing items **/
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(20px);
    }
}

/******************************************
OVERFLOW DETECTION
Include this in items to detect:
// Scroll detection animation
animation: detect-scroll linear;
animation-timeline: scroll(self inline);
******************************************/
/* Scroll detection keyframe */
@keyframes detect-scroll {
    from, to {
        --can-scroll: 1;
    }
}


/******************************************************************
DIRECTORY
******************************************************************/

/*.directory-list {*/
/*    max-width: var(--alignWide);*/
/*}*/
/*.directory-list ul {*/
/*    gap: 0;*/
/*}*/
/*    .directory-list li.title {*/
/*        margin-left: -1rem;*/
/*    }*/


/*.is-directory section {*/
/*    max-width: var(--full);*/
/*    width: calc(var(--full) - 1rem);*/
/*    padding: 0 .5rem;*/
/*}*/
/*    .is-directory .list-none ul,*/
/*    .is-directory .list-none {*/
/*        margin: 0;*/
/*        padding: 0;*/
/*        list-style: none;*/
/*    }*/
/*    .is-directory .list-none ul {*/
/*        width: 80%;*/
/*    }*/
/*    .is-directory .list-none > li + li {*/
/*        border-top: 1px solid var(--base-100);*/
/*        padding-top: 2rem;*/
/*        margin-top: 2rem;*/
/*    }*/
/*    .is-directory .list-none ul li {*/
/*        background-color: var(--base-50);*/
/*        padding: .5rem .25rem;*/
/*    }*/
/*    .is-directory .list-none ul li:nth-of-type(even){*/
/*        background-color: var(--base-100);*/
/*    }*/
/*    .is-directory .list-none h3 {*/
/*        margin: .5rem auto!important;*/
/*        position: sticky;*/
/*        text-align: center;*/
/*        top: 4rem;*/
/*        font-size: 20vw;*/
/*        color: var(--base-200);*/
/*        background-color: var(--base);*/
/*        width: 20%;*/
/*    }*/
/*    @media (min-width:768px){*/
/*        .is-directory section {*/
/*            max-width: var(--alignWide);*/
/*        }*/
/*        .is-directory .list-none,*/
/*        .is-directory .list-none ul {*/
/*            padding-left: 2rem;*/
/*        }*/
/*        .is-directory .list-none h3 {*/
/*            text-align: left;*/
/*            top: 8rem;*/
/*            position: sticky;*/
/*            background-color: transparent;*/
/*        }*/
/*    }*/

/*.directories > .directory {*/
/*    border-radius: 1rem;*/
/*    background-color: var(--base-100);*/
/*    text-align: center;*/
/*    padding: .5rem;*/
/*}*/
/*.directories > .directory a .icon {*/
/*    --w: 3rem;*/
/*    margin: 0;*/
/*}*/
/*.directory h2 {*/
/*    font-size: var(--large);*/
/*    margin: .5rem 0!important;*/
/*    width: 100%;*/
/*}*/
/*@media (min-width: 768px) {*/
/*    .directories {*/
/*        display: grid;*/
/*        grid-template-columns: repeat(3, 1fr);*/
/*        gap: 1rem;*/
/*    }*/
/*}*/

/*nav.directory li {*/
/*    list-style: none;*/
/*    display: inline-flex;*/
/*}*/
/*.grouped-directory {*/
/*    margin: 0;*/
/*    padding: 0;*/
/*    list-style: none;*/
/*}*/
/*    .grouped-directory .grouped-directory {*/
/*        padding-left: 2rem;*/
/*    }*/
/*.grouped-directory li:not(:has(details)) {*/
/*    padding: .625rem;*/
/*}*/
/*.grouped-directory summary a {*/
/*    order: 1;*/
/*    text-transform: none;*/
/*}*/
/*.grouped-directory summary::after {*/
/*    order: 2;*/
/*}*/
/*.grouped-directory li details[open] > summary,*/
/*.grouped-directory li details[open] {*/
/*    background-color: var(--base-100);*/
/*}*/

/*.grouped-directory details[open] details[open] > summary,*/
/*.grouped-directory details[open] details[open] {*/
/*    background-color: var(--overlay-light);*/
/*}*/

/*.is-directory h1 {*/
/*    margin-top: 3rem!important;*/
/*}*/
/******************************************************************
NORTHEH
******************************************************************/
.menu-items .menu-item {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 1rem;
}
.menu-items .menu-item:not(.variable) label {
    display: none;
}
.menu-items .menu-item .field {
    margin: 0;
    --wrap: nowrap;
}
.menu-items .menu-item .has-tooltip {
    position: absolute;
    right: -2.5rem;
}
.menu-items .menu-item + .menu-item {
    border-top: 1px solid var(--base-200);
    margin-top: 2rem;
    padding-top: 1rem;
}
.menu-items .menu-item .header {
    grid-column: 1/-1;
}
.menu-items .menu-item .description {
    grid-column: 1/3;
}
.menu-items .menu-item .info {
    grid-column: 3/3;
}
.menu-items .menu-item h3 {
    font-size: var(--medium);
    font-weight: normal;
    margin: 0 0 .5rem 0!important;
}

.menu-items .menu-item .info {
    --gap: 1rem;
}
.price > span {
    vertical-align: super;
    font-size: 12px;
}
body.menu_item section > h2 {
    display: inline-block;
    max-width: var(--maxWidth);
    width: max-content;
    background-color: var(--base-50);
    color: var(--action-0);
    position: relative;
    z-index: 5;
    padding: 0 1rem;
    margin: var(--mt) auto var(--mb) auto;
}

.menu-section {
    position: relative;
}
.menu-section hr {
    position: absolute;
    width: 100%;
    left: -5%;
    top: 3.5rem;
    border: none;
    background-color: var(--action-100);
    height: 2px;
}


details.menu-item summary.row {
    flex-direction: column;
    align-items: flex-start;
}
details.menu-item summary .row {
    width: 100%;
}

.menu_item h1:first-of-type {
    margin-top: 10vh!important;
}

@media (min-width: 768px) {
    .menu-section hr {
        width: 120%;
        left: -10%;
        top: 4.25rem;
    }

    .menu_item section {
        max-width: var(--maxWidth);
    }

    /*details.menu-item summary.row {*/
    /*    flex-direction: var(--dir);*/
    /*    align-items: var(--justify);*/
    /*}*/
}
/**
TODO: For Legacy
Triangles Loader

.loading-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1rem 1rem;
}
.loader-wrap {
    height: 75px;
    width: 75px;
}
.new-term-toggle:disabled + .loader,
.loading .loader {
    width: 50px;
    aspect-ratio: 1.154;
    display: grid;
    color: var(--action-0);
    background:
            linear-gradient(to bottom left ,#0000 calc(50% - 1px),currentColor 0 calc(50% + 1px),#0000 0) right/50% 100%,
            linear-gradient(to bottom right,#0000 calc(50% - 1px),currentColor 0 calc(50% + 1px),#0000 0) left /50% 100%,
            linear-gradient(currentColor 0 0) bottom/100% 2px;
    background-repeat: no-repeat;
    transform-origin: 50% 66%;
    animation: l5 4s infinite linear;
}
.new-term-toggle:disabled + .loader::before,
.new-term-toggle:disabled + .loader::after,
.loading .loader::before,
.loading .loader::after {
    content: "";
    grid-area: 1/1;
    background: inherit;
    transform-origin: inherit;
    animation: inherit;
}
.new-term-toggle:disabled + .loader::after,
.loading .loader::after {
    animation-duration: 2s;
}
@keyframes l5{
    100% {transform:rotate(1turn)}
}
 */

/* DONE TO HERE */



/*dialog .search-wrapper {*/
/*    padding: .5rem;*/
/*}*/


/*.favourite-terms ul {*/
/*    gap: .25rem 1rem;*/
/*    padding: 0;*/
/*}*/
/*    .favourite-terms label::before,*/
/*    .favourite-terms label::after {*/
/*        display: none;*/
/*    }*/
/*    .favourite-terms label {*/
/*        padding: .25rem .5rem!important;*/
/*        border: 1px solid var(--base-200);*/
/*        color: var(--contrast-200);*/
/*        border-radius: var(--innerRadius);*/
/*    }*/
/*    .favourite-terms :checked + label,*/
/*    .favourite-terms label:hover {*/
/*        border-color: var(--action-0);*/
/*        color: var(--action-0);*/
/*    }*/
/*.items-container {*/
/*    padding: 0;*/
/*}*/
/*    .items-container li .children {*/
/*        width: 100%;*/
/*        padding-left: 1rem;*/
/*    }*/
/*.path button+button::before {*/
/*    content: ' > ';*/
/*    display: inline-block;*/
/*    margin: 0 .5rem;*/
/*}*/
/*!** Forms **!*/


/*!*.field.time_open,*!*/
/*!*.field.time_closes,*!*/
/*!*.field.date_start,*!*/
/*!*.field.time_start,*!*/
/*!*.field.time_end {*!*/
/*!*    margin-bottom: 0;*!*/
/*!*}*!*/

/*!*.field.time_open,*!*/
/*!*.field.time_closes,*!*/
/*!*.field.time_start,*!*/
/*!*.field.time_end {*!*/
/*!*    width: 49%;*!*/
/*!*    display: inline-block;*!*/
/*!*    margin-top: 1rem;*!*/
/*!*}*!*/

/*[data-h] {*/
/*    border: 0;*/
/*    clip: rect(1px, 1px, 1px, 1px);*/
/*    clip-path: inset(50%);*/
/*    height: 1px;*/
/*    margin: -1px;*/
/*    overflow: hidden;*/
/*    padding: 0;*/
/*    position: absolute !important;*/
/*    width: 1px;*/
/*    word-wrap: normal !important;*/
/*}*/

/*.checkbox-options {*/
/*    --gap: .5rem 2rem;*/
/*}*/
/*.checkbox-options label {*/
/*    flex: unset!important;*/
/*}*/

/*.radio-options {*/
/*    --gap: .125rem .5rem;*/
/*}*/

/*.radio-options input:not(.ch) + label::before {*/
/*    display: none!important;*/
/*}*/
/*.radio-options input:not(.ch) + label {*/
/*    flex: unset!important;*/
/*    padding: .25rem!important;*/
/*    border-radius: 4px;*/
/*    border: 1px solid var(--base-100);*/
/*    color: var(--contrast-200);*/
/*    transition: var(--transition-color)!important;*/
/*    font-weight: normal;*/
/*    !*width: 40%;*!*/
/*    text-align: center;*/
/*}*/
/*.radio-options input:not(.ch) + label:hover,*/
/*.radio-options input:not(.ch):checked + label {*/
/*    border-color: var(--action-0);*/
/*    color: var(--action-0);*/
/*    transition: var(--transition-color);*/
/*}*/



/*!* Style for disabled state *!*/



/*.date-range {*/
/*    padding: 2rem;*/
/*    border: none;*/
/*    border-radius: var(--innerRadius);*/
/*    background: var(--base);*/
/*    box-shadow: var(--shadow);*/
/*}*/
/*.date-range::backdrop {*/
/*    backdrop-filter: blur(5px);*/
/*    background: var(--overlay-medium);*/
/*}*/

/*.custom-range,*/
/*.month-picker {*/
/*    --gap: 1rem;*/
/*    margin-bottom: 1rem;*/
/*}*/
/*.custom-range input,*/
/*.month-picker select {*/
/*    padding: .5rem;*/
/*    border: 1px solid var(--base-100);*/
/*    border-radius: var(--innerRadius);*/
/*    background: var(--base-200);*/
/*    color: var(--contrast);*/
/*    font: inherit;*/
/*}*/
/*.custom-range input:focus,*/
/*.month-picker select:focus {*/
/*    outline: none;*/
/*    border-color: var(--action-0);*/
/*}*/
/*!** Shop Page **!*/
/*.shop header {*/
/*    max-width: var(--full);*/
/*}*/
/*.shop header img {*/
/*    width: 100%;*/
/*    height: auto;*/
/*}*/
/*.shop header h1 {*/
/*    margin-bottom: .5em;*/
/*}*/
/*.ratings {*/
/*    margin: 0;*/
/*}*/
/*!** Bio Sections **!*/
/*.bio-info {*/
/*    max-width: var(--alignWide);*/
/*    padding: .25em;*/
/*    border-radius: var(--outerRadius);*/
/*    font-size: var(--medium);*/
/*    line-height: 1.5;*/
/*}*/
/*.bio-info section {*/
/*    margin: 4rem 0;*/
/*}*/
/*.shop .column,*/
/*.bio-info .column {*/
/*    --justify: center;*/
/*}*/
/*.bio-info[open] {*/
/*    background-color: var(--base-100);*/
/*}*/
/*.bio-info summary {*/
/*    padding: .25rem;*/
/*    position: relative;*/
/*    border-radius: var(--innerRadius);*/
/*}*/
/*.bio-info[open] summary {*/
/*    background-color: var(--base-50);*/
/*    margin-bottom: 1rem;*/
/*}*/
/*.bio-info > div:not(.columns) {*/
/*    margin: 4rem 0;*/
/*    padding: 0 1rem;*/
/*}*/
/*.bio-info h2 {*/
/*    margin: 0!important;*/
/*    font-size: var(--medium);*/
/*    font-family: var(--body);*/
/*    font-weight: var(--bWeight);*/
/*}*/

/*.bio-info h3 {*/
/*    margin: 1em 0!important;*/
/*    font-size: var(--medium);*/
/*}*/
/*.bio-info figure {*/
/*    margin: 0;*/
/*    padding: 0;*/
/*}*/
/*.bio-info img {*/
/*    width: 100%;*/
/*    height: auto;*/
/*    aspect-ratio: 5/4;*/
/*    object-fit: cover;*/
/*}*/

/*    #contact {*/
/*        max-width: var(--alignWide);*/
/*    }*/
/*    #contact h2,*/
/*    section.inline h2 {*/
/*        font-size: var(--medium);*/
/*        font-weight: var(--bWeight);*/
/*        margin: 0 0 .5em 0!important;*/
/*        white-space: nowrap;*/
/*    }*/
/*ul.contact {*/
/*    list-style: none;*/
/*    display: inline-flex;*/
/*    justify-content: flex-start;*/
/*    flex-wrap: wrap;*/
/*    align-items: center;*/
/*    gap: 1rem;*/
/*    margin: 0;*/
/*    padding: 0;*/
/*}*/
/*    ul.contact + ul.contact {*/
/*        margin-left: 1rem;*/
/*    }*/
/*    ul.contact a{*/
/*        color: var(--contrast);*/
/*    }*/
/*        ul.contact a:hover {*/
/*            color: var(--action-0);*/
/*        }*/

/*.term-list {*/
/*    display: inline-flex;*/
/*    flex-wrap: wrap;*/
/*    list-style: none;*/
/*    text-transform: lowercase;*/
/*    margin: 0;*/
/*    padding: 0;*/
/*    gap: 0 .5em;*/
/*}*/
/*p.loading {*/
/*    text-align: center;*/
/*    margin: 3rem 0;*/
/*}*/
/*
/*.term-list li {*/
/*    padding: 2px 6px;*/
/*}*/

/*ul.simple-list {*/
/*    margin: 0;*/
/*    padding: 0;*/
/*    list-style: none;*/
/*}*/
/*ul.reviews li + li{*/
/*    margin-top: 2rem;*/
/*}*/



/*!*!* Status notification *!*/
/*!*.status-notification {*!*/
/*!*    position: fixed;*!*/
/*!*    bottom: 20px;*!*/
/*!*    left: 80px; !* Position to the right of the panel *!*!*/
/*!*    width: 300px;*!*/
/*!*    max-width: calc(100vw - 100px);*!*/
/*!*    border-radius: 8px;*!*/
/*!*    padding: 15px;*!*/
/*!*    background: #323232;*!*/
/*!*    color: white;*!*/
/*!*    transform: translateY(20px);*!*/
/*!*    opacity: 0;*!*/
/*!*    transition: transform .3s, opacity .3s;*!*/
/*!*    z-index: 10000;*!*/
/*!*    box-shadow: 0 4px 20px rgba(0, 0, 0, .2);*!*/
/*!*    pointer-events: none;*!*/
/*!*}*!*/

/*!*.status-notification.active {*!*/
/*!*    transform: translateY(0);*!*/
/*!*    opacity: 1;*!*/
/*!*    pointer-events: auto;*!*/
/*!*}*!*/

/*!*.status-notification .title {*!*/
/*!*    font-weight: 600;*!*/
/*!*    margin-bottom: 5px;*!*/
/*!*    font-size: 15px;*!*/
/*!*}*!*/

/*!*.status-notification .message {*!*/
/*!*    margin-bottom: 10px;*!*/
/*!*    font-size: 14px;*!*/
/*!*}*!*/

/*!*.status-notification .actions {*!*/
/*!*    display: flex;*!*/
/*!*    justify-content: flex-end;*!*/
/*!*}*!*/

/*!*.status-notification .actions button {*!*/
/*!*    padding: 6px 12px;*!*/
/*!*    background: rgba(255, 255, 255, .2);*!*/
/*!*    border: none;*!*/
/*!*    border-radius: 4px;*!*/
/*!*    color: white;*!*/
/*!*    cursor: pointer;*!*/
/*!*    font-size: 13px;*!*/
/*!*    transition: background .2s;*!*/
/*!*}*!*/

/*!*.status-notification .actions button:hover {*!*/
/*!*    background: rgba(255, 255, 255, .3);*!*/
/*!*}*!*/

/*!* Progress containers in notifications *!*/
/*.progress-container {*/
/*    margin-top: 15px;*/
/*    background: rgba(255, 255, 255, .1);*/
/*    border-radius: 4px;*/
/*    padding: 10px;*/
/*    transition: all .3s;*/
/*}*/

/*.progress-container.complete {*/
/*    opacity: .5;*/
/*}*/

/*!* Collapsed state - just show the toggle button *!*/







/*!***/
/*Response stuff*/
/* *!*/

/*.columns {*/
/*    --wrap: nowrap;*/
/*}*/
/*    .columns.stack-small {*/
/*        --wrap: wrap;*/
/*    }*/
/*    @media (min-width: 768px){*/
/*        .columns.stack-small {*/
/*            --wrap: nowrap;*/
/*        }*/
/*    }*/
/*.column {*/
/*    width: 100%;*/
/*    padding: 1rem 0;*/
/*}*/

/*.width-300 {*/
/*    width: 300px!important;*/
/*    height: auto!important;*/
/*}*/

    .stack-small.stack-small {
        --wrap: wrap;
    }
    @media (min-width: 768px){
        .stack-small.stack-small {
            --wrap: nowrap;
        }
    }


.font-small {
    font-size: var(--small);
}
.font-medium {
    font-size: var(--medium);
}
.font-large {
    font-size: var(--large);
}


/*!***/
/*Circular Loader*/
/* *!*/
/*!*.new-term-toggle:disabled + .loader,*!*/
/*!*.loading .loader {*!*/
/*!*    width: 50px;*!*/
/*!*    aspect-ratio: 1;*!*/
/*!*    display: grid;*!*/
/*!*    border: 4px solid #0000;*!*/
/*!*    border-radius: 50%;*!*/
/*!*    border-right-color: var(--action-0);*!*/
/*!*    animation: l15 1s infinite linear;*!*/
/*!*}*!*/
/*!*.new-term-toggle:disabled + .loader::before,*!*/
/*!*.new-term-toggle:disabled + .loader::after,*!*/
/*!*.loading .loader::before,*!*/
/*!*.loading .loader::after {*!*/
/*!*    content: "";*!*/
/*!*    grid-area: 1/1;*!*/
/*!*    margin: 2px;*!*/
/*!*    border: inherit;*!*/
/*!*    border-radius: 50%;*!*/
/*!*    animation: l15 2s infinite;*!*/
/*!*}*!*/
/*!*.new-term-toggle:disabled + .loader::after,*!*/
/*!*.loading .loader::after {*!*/
/*!*    margin: 8px;*!*/
/*!*    animation-duration: 3s;*!*/
/*!*}*!*/
/*!*@keyframes l15{*!*/
/*!*    100%{transform: rotate(1turn)}*!*/
/*!*}*!*/



/*!* High contrast mode support *!*/
/*@media (forced-colors: active) {*/
/*    .feed-item {*/
/*        border: 1px solid CanvasText;*/
/*    }*/

/*    button,*/
/*    [role="button"] {*/
/*        border: 1px solid ButtonText;*/
/*    }*/

/*    button.favourite.favourited {*/
/*        background-color: Highlight;*/
/*        color: HighlightText;*/
/*    }*/
/*}*/


/*!** TODO: Verify **!*/

input[type=time],
input[type=datetime-local],
input[type=date] {
    padding: .5rem;
    border: 1px solid var(--contrast-200);
    border-radius: 4px;
    font-size: 14px;
    min-width: 180px;
    background: var(--base);
    color: var(--contrast);
    cursor: pointer;
    transition: border-color .2s ease;
}

.field-input-wrapper input[type=time]:focus,
.field-input-wrapper input[type=datetime-local]:focus,
.field-input-wrapper input[type=date]:focus,
.time-wrapper input[type=time]:focus,
.datetime-wrapper input[type=datetime-local]:focus,
.date-wrapper input[type=date]:focus {
    border-color: var(--action-0);
    box-shadow: 0 0 0 2px rgba(var(--action-rgb), .1);
}

/* Icon styling in form fields */
.field-input-wrapper .icon,
.time-wrapper .icon,
.datetime-wrapper .icon,
.date-wrapper .icon {
    width: 18px;
    height: 18px;
    background-color: var(--contrast);
    opacity: .7;
}

/*!* Required field asterisk *!*/
/*.time-wrapper input[required],*/
/*.datetime-wrapper input[required],*/
/*.date-wrapper input[required] {*/
/*    border-left: 3px solid #dc3232;*/
/*}*/

/*!* Invalid field styling *!*/
/*.time-wrapper input:invalid,*/
/*.datetime-wrapper input:invalid,*/
/*.date-wrapper input:invalid {*/
/*    border-color: #dc3232;*/
/*    background-color: #fef7f7;*/
/*}*/

/*!* Frontend Display *!*/
/*.time-field-display,*/
/*.datetime-field-display,*/
/*.date-field-display {*/
/*    display: inline-flex;*/
/*    align-items: center;*/
/*    gap: .5rem;*/
/*    padding: .25rem 0;*/
/*}*/

/*.time-field-display svg,*/
/*.datetime-field-display svg,*/
/*.date-field-display svg {*/
/*    width: 16px;*/
/*    height: 16px;*/
/*    color: #0073aa;*/
/*    flex-shrink: 0;*/
/*}*/

/*.time-value,*/
/*.datetime-value,*/
/*.date-value {*/
/*    font-weight: 500;*/
/*    color: #333;*/
/*}*/

/*!* Set and Checkbox Field Display *!*/
/*.set-field-display {*/
/*    --wrap: wrap;*/
/*}*/

/*.set-label,*/
/*.checkbox-label {*/
/*    font-weight: 600;*/
/*    color: #555;*/
/*}*/

/*.set-item {*/
/*    background: #f0f0f1;*/
/*    padding: .25rem .5rem;*/
/*    border-radius: 3px;*/
/*    font-size: .9em;*/
/*    border: 1px solid #ddd;*/
/*}*/

/*!* Radio and Select Field Display *!*/
/*.radio-field-display,*/
/*.select-field-display {*/
/*    display: inline-flex;*/
/*    align-items: center;*/
/*    gap: .5rem;*/
/*}*/

/*.radio-label,*/
/*.select-label {*/
/*    font-weight: 600;*/
/*    color: #555;*/
/*}*/

/*.radio-value,*/
/*.select-value {*/
/*    background: #f8f9fa;*/
/*    padding: .25rem .5rem;*/
/*    border-radius: 3px;*/
/*    border: 1px solid #dee2e6;*/
/*}*/

/*!* True/False Field Display *!*/
/*.true-false-display {*/
/*    display: inline-flex;*/
/*    align-items: center;*/
/*    gap: .5rem;*/
/*}*/

/*.true-false-label {*/
/*    font-weight: 600;*/
/*    color: #555;*/
/*}*/

/*.true-value {*/
/*    color: var(--success);*/
/*    font-weight: 600;*/
/*}*/

/*.false-value {*/
/*    color: var(--error);*/
/*    font-weight: 600;*/
/*}*/

/*!* Group Field Styling *!*/
/*.group-field {*/
/*    border: 1px solid #e0e0e0;*/
/*    border-radius: 6px;*/
/*    padding: 1rem;*/
/*    margin: 1rem 0;*/
/*    background: #fafafa;*/
/*}*/

/*.group-label {*/
/*    font-size: 1.1em;*/
/*    font-weight: 600;*/
/*    color: #333;*/
/*    margin: 0 0 1rem 0;*/
/*    padding-bottom: .5rem;*/
/*    border-bottom: 1px solid #e0e0e0;*/
/*}*/

/*.group-content {*/
/*    --gap: .75rem;*/
/*}*/

/*.group-item {*/
/*    padding: .5rem 0;*/
/*    border-bottom: 1px solid #f0f0f0;*/
/*}*/

/*.group-item:last-child {*/
/*    border-bottom: none;*/
/*}*/

/*.subfield-label {*/
/*    font-weight: 600;*/
/*    color: #555;*/
/*    margin-right: .5rem;*/
/*}*/

/*!* Responsive Design *!*/
/*@media (max-width: 768px) {*/
/*    .time-wrapper input[type="time"],*/
/*    .datetime-wrapper input[type="datetime-local"],*/
/*    .date-wrapper input[type="date"] {*/
/*        min-width: 150px;*/
/*        font-size: 16px; !* Prevents zoom on iOS *!*/
/*    }*/

/*    .set-field-display,*/
/*    .checkbox-field-display {*/
/*        flex-direction: column;*/
/*        align-items: flex-start;*/
/*    }*/

/*    .group-content {*/
/*        gap: .5rem;*/
/*    }*/
/*}*/

legend {
    padding: 0 1rem;
}
.abs {
    position: absolute;
}
.top {
    top: 0;
    right: 0;
    left: 0;
}
.top-right {
    top: 0;
    right: 0;
}
.top-left {
    top: 0;
    left: 0;
}

.btm {
    bottom: 0;
    left: 0;
    right: 0;
}
.btm-right {
    bottom: 0;
    right: 0;
}
.btm-left {
    bottom: 0;
    left: 0;
}
.edges {
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}



/*********************** REFERRAL SYSTEM ***********************/
.referral-widget {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 24px;
    margin: 20px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.referral-header {
    text-align: center;
    margin-bottom: 20px;
}

.referral-header h3 {
    margin: 0 0 8px 0;
    color: #2271b1;
}

.referral-header p {
    margin: 0;
    color: #666;
    font-size: 14px;
}

/* Share Widget Styles */
.referral-link-section {
    margin-bottom: 20px;
}

.referral-link-section label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #333;
}

.link-copy-wrapper {
    display: flex;
    gap: 8px;
}

.link-copy-wrapper input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: monospace;
    font-size: 13px;
    background: #f9f9f9;
}

.copy-link-btn {
    padding: 10px 20px;
    background: #2271b1;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.2s;
}

.copy-link-btn:hover {
    background: #135e96;
}

.referral-code-display {
    margin: 8px 0 0 0;
    font-size: 13px;
    color: #666;
}

.referral-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 6px;
}

.stat-item {
    text-align: center;
}

.stat-value {
    display: block;
    font-size: 24px;
    font-weight: bold;
    color: #2271b1;
}

.stat-label {
    display: block;
    font-size: 12px;
    color: #666;
    margin-top: 4px;
}

.share-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
}

.share-btn:hover {
    background: #f5f5f5;
    border-color: #999;
}

/* Validation Widget Styles */
.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #333;
}

.input-button-wrapper {
    display: flex;
    gap: 8px;
}

.input-button-wrapper input {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    font-family: monospace;
    font-weight: 600;
    text-transform: uppercase;
    transition: border-color 0.2s;
}

.input-button-wrapper input:focus {
    outline: none;
    border-color: #2271b1;
}

.validate-btn {
    padding: 12px 24px;
    background: #2271b1;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.2s;
}

.validate-btn:hover {
    background: #135e96;
}

.validate-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.helper-text {
    margin: 8px 0 0 0;
    font-size: 13px;
    color: #666;
}

.helper-text a {
    color: #2271b1;
    text-decoration: none;
}

.helper-text a:hover {
    text-decoration: underline;
}

.message {
    padding: 12px 16px;
    border-radius: 4px;
    margin-top: 16px;
    font-size: 14px;
}

.message.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.message.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Success State Styles */
.referral-success-state {
    text-align: center;
}

.success-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: #28a745;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 40px;
}

.success-content h3 {
    color: #28a745;
    margin: 0 0 12px 0;
}

.reward-highlight {
    background: #e7f5ff;
    padding: 20px;
    border-radius: 6px;
    margin: 20px 0;
    border-left: 4px solid #2271b1;
}

.reward-highlight strong {
    color: #2271b1;
    font-size: 18px;
}

.cta-button {
    display: inline-block;
    padding: 14px 32px;
    background: #2271b1;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    margin-top: 16px;
    transition: background 0.2s;
}

.cta-button:hover {
    background: #135e96;
}

.referred-by {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #ddd;
    font-size: 13px;
    color: #666;
}

.loading-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #2271b1;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-left: 8px;
    vertical-align: middle;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 600px) {
    .input-button-wrapper {
        flex-direction: column;
    }

    .validate-btn {
        width: 100%;
    }

    .link-copy-wrapper {
        flex-direction: column;
    }

    .copy-link-btn {
        width: 100%;
    }
}

.callalt.callalt,
.callout.callout {
    padding: 2rem;
    margin: 2rem 0;
    max-width: none;
}

@media (min-width: 768px){
    .callout.callout {
        padding: 2rem 20vw;
    }
}
.callout.callout {
    background-color: var(--action-0);
    color: var(--action-contrast);
}
.callalt.callalt {
    background-color: var(--secondary-0);
    color: var(--secondary-contrast);
}
    .callalt h1,
    .callalt h2,
    .callalt h3,
    .callalt h4,
    .callalt h5,
    .callalt h6,
    .callout h1,
    .callout h2,
    .callout h3,
    .callout h4,
    .callout h5,
    .callout h6 {
        font-family: var(--body);
        font-weight: var(--bBold);
        margin: 1rem 0 0;
        width: 100%;
    }

    .callout a {
        background-color: var(--action-contrast);
        padding: 0 .125rem;
        border-radius: 4px;
    }

    .attn {
        animation: pulse-color 5s infinite;
        animation-delay: 1s;
    }

    @media (min-width:768px ){
        .media-text {
            --wrap: nowrap;
        }
    }
    .media-text > div,
    .media-text figure {
        width: 100%;
        margin: 0;
    }
    .media-text > div {
        max-width: var(--maxWidth);
        margin: 0 auto;
        padding: 2rem;
    }