@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Caveat:wght@500;600&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#f8e9d1;background:#122e30;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100vh}button,input,textarea{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #ffcb7d;outline-offset:3px}
.experience{width:min(100%,720px);margin:0 auto}.artboard{position:relative;width:100%;isolation:isolate}.scene-art{display:block;width:100%;height:auto}.mood{position:absolute;top:36.9%;left:2%;width:96%;margin:0;color:#fff5df;text-align:center;font:600 clamp(20px,5.4vw,42px)/1 'Caveat',cursive;text-shadow:0 2px 5px #301a0c,0 3px 15px #1b1b1b;pointer-events:none;transform:rotate(-1deg)}
.art-hotspot{position:absolute;display:block;border:2px solid transparent;border-radius:5%;background:transparent;cursor:pointer;touch-action:manipulation;transition:background .15s,border-color .15s}.art-hotspot:hover{background:#fff5df14;border-color:#fff5df77}.art-hotspot:active{background:#fff5df2e}.chocolate-hotspot{left:6.7%;top:40.7%;width:42%;height:35.6%}.gummies-hotspot{left:51%;top:40.7%;width:42%;height:35.6%}.email-hotspot{left:42%;top:87%;width:24%;height:4.4%;border-radius:999px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.prototype-note{font-size:.78rem;line-height:1.6;text-align:center;color:#f4e1c7;padding:12px 20px 24px;margin:0;background:#122e30}
.request-tab{position:fixed;right:20px;bottom:20px;z-index:5;border:1px solid #f8dca9;background:#173f3e;color:#fff0d9;border-radius:50px;padding:14px 20px;box-shadow:0 5px 25px #0008}.request-tab span{background:#e4b875;color:#153f40;border-radius:50%;padding:3px 8px;margin-left:8px}dialog{width:min(94vw,630px);max-height:88vh;overflow:auto;border:1px solid #dbbf92;border-radius:22px;background:#f7ecda;color:#183f3d;padding:26px;box-shadow:0 20px 80px #0009}dialog::backdrop{background:#071d1bc7;backdrop-filter:blur(5px)}.dialog-top{display:flex;justify-content:space-between;align-items:center}.eyebrow{letter-spacing:.2em;font-size:.7rem;font-weight:700}.close{border:0;background:transparent;font-size:2rem;color:#173f3d}dialog h2{font-family:Georgia,serif;font-size:2.1rem;margin:8px 0}.dialog-note,.fineprint{font-size:.87rem;line-height:1.5;color:#5d6962}.product{border-top:1px solid #d6c7af;padding:18px 0;display:flex;align-items:center;gap:15px;justify-content:space-between}.product-name{font-weight:700}.product small{display:block;color:#61716b;margin-top:5px}.quantity{display:flex;align-items:center;gap:12px;flex-shrink:0}.quantity button{border:1px solid #8a9b8e;border-radius:50%;width:35px;height:35px;background:#fff9ed;color:#173f3d;font-size:1.2rem}.quantity output{min-width:15px;text-align:center;font-weight:700}.review-button{width:100%;margin-top:14px}#request-lines{border-top:1px solid #d6c7af;margin:20px 0}.request-line{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #d6c7af;padding:12px 0;gap:10px}.request-line button{border:0;background:transparent;text-decoration:underline;color:#173f3d}form{display:grid;gap:15px}form label{display:grid;gap:7px;font-size:.85rem;font-weight:700}form label span{color:#a64a2b}form small{font-weight:400}input,textarea{width:100%;border:1px solid #c9bda8;background:#fffaf1;border-radius:9px;padding:12px;color:#183f3d}form .button{margin-top:6px}@media(max-width:600px){.product{align-items:flex-start}.quantity{gap:7px}.quantity button{width:31px;height:31px}dialog{padding:20px}}
/* Product photography: independent of the approved homepage artwork. */
.product{display:grid;grid-template-columns:82px minmax(0,1fr) auto;gap:12px;align-items:center}
.product-photo{display:block;width:82px;height:82px;object-fit:contain;background:#fff;border-radius:10px;padding:4px}
.product-info{min-width:0}.product-name{line-height:1.3;overflow-wrap:anywhere}
@media(max-width:600px){.product{grid-template-columns:72px minmax(0,1fr);gap:10px;align-items:center}.product-photo{width:72px;height:72px}.quantity{grid-column:2;justify-self:start;margin-top:-2px}.quantity button{width:38px;height:38px}}

/* Keep each complete product photograph in frame; never crop the packaging. */
.product-photo{object-fit:contain;object-position:center;background:#fff;padding:3px}
.thank-you-van{display:block;width:min(100%,340px);max-height:400px;object-fit:contain;margin:12px auto 18px;border-radius:12px}
#thanks{text-align:center}#thanks .dialog-top{text-align:left}#thanks h2{font-size:clamp(1.5rem,5vw,2.1rem);line-height:1.2}#thanks .button{width:100%}
.button{border:0;border-radius:999px;background:#173f3e;color:#fff7e9;padding:14px 20px;font-weight:700;cursor:pointer}.button:disabled{opacity:.5;cursor:not-allowed}

/* Tropical postcard confirmation: text remains real, selectable and accessible. */
#thanks{padding:18px 20px 20px;background:#fff3dd;border:1px solid #e6bd7c;overflow-x:hidden;}
#thanks .dialog-top{position:relative;z-index:2;min-height:32px}
#thanks .close{border:1px solid #e6bd7c;border-radius:3px;width:40px;height:40px;font-size:1.7rem;line-height:1;background:#fff7e9}
#thanks .thank-you-content{position:relative;z-index:1;max-width:510px;margin:0 auto;padding:0 3px}
#thanks .sun-mark{font-size:2rem;line-height:1;color:#eda72f;margin:0 auto 2px}
#thanks h2{font-family:'Caveat',cursive;font-size:clamp(2.4rem,9vw,3.5rem);font-weight:600;line-height:1;margin:0 0 8px;color:#163e3d}
#thanks .thanks-headline{font-family:Georgia,serif;font-size:clamp(1.2rem,4.4vw,1.8rem);font-weight:700;line-height:1.18;margin:0 auto 12px;color:#163e3d}
#thanks .thanks-message{font-size:clamp(.87rem,3.3vw,1rem);line-height:1.5;color:#465c58;margin:0 auto 11px;max-width:440px}
#thanks .thanks-outro{font-size:clamp(.82rem,3vw,.96rem);line-height:1.45;color:#254d49;margin:0 auto 6px;max-width:440px}
#thanks .thanks-outro span{font-family:'Caveat',cursive;font-size:1.45rem;font-weight:600;color:#163e3d}
#thanks .beach-scene{position:relative;isolation:isolate;display:flex;justify-content:center;align-items:flex-end;overflow:hidden;min-height:190px;margin:0 -20px 6px;background:linear-gradient(180deg,transparent 0%,#fbe4bd 27%,#f8c987 43%,#a6c9c1 44%,#6da8ac 54%,#347e8a 64%,#e3c494 65%,#efd4a5 100%)}
#thanks .beach-scene:before,#thanks .beach-scene:after{content:'';position:absolute;bottom:0;width:42%;height:68%;z-index:-1;opacity:.5;background:radial-gradient(ellipse at 50% 100%,#4f8a75 0 28%,transparent 29%),radial-gradient(ellipse at 25% 70%,#5b9a79 0 17%,transparent 18%),radial-gradient(ellipse at 70% 55%,#5b9a79 0 15%,transparent 16%)}
#thanks .beach-scene:before{left:-18%;transform:rotate(-16deg)}#thanks .beach-scene:after{right:-18%;transform:scaleX(-1) rotate(-16deg)}
#thanks .beach-sun{position:absolute;z-index:-1;right:10%;top:20%;width:68px;aspect-ratio:1;border-radius:50%;background:#f5b44f;box-shadow:0 0 45px 18px #f8d29c99}
#thanks .thank-you-van{position:relative;display:block;width:min(80%,310px);height:auto;max-height:310px;object-fit:contain;margin:0 auto -1px;border-radius:0;filter:drop-shadow(0 5px 3px #394c3d55)}
#thanks .trial-confirmation{font-size:.7rem;line-height:1.35;color:#5d6962;margin:7px auto 12px}
#thanks #thanks-close{width:100%;max-width:410px}
@media(max-width:430px){#thanks{padding:12px 14px 16px;max-height:94dvh}#thanks .beach-scene{margin:0 -14px 5px;min-height:160px}#thanks .thank-you-van{width:min(78%,240px);max-height:245px}#thanks .thanks-headline{font-size:1.28rem}#thanks .thanks-message{margin-bottom:6px}#thanks .thanks-outro{margin-bottom:4px}}
@media(max-height:670px){#thanks .thank-you-van{max-height:175px;width:auto}#thanks .beach-scene{min-height:130px}}

/* V5: illustrated sunset postcard, preserving the independent transparent van and real text. */
#thanks{background:#fff3dd;}
#thanks .beach-scene{background:#f6d7a7 url('assets/postcard-beach.svg') center bottom / cover no-repeat;min-height:245px;margin-top:5px;border-radius:0 0 10px 10px;}
#thanks .beach-scene:before,#thanks .beach-scene:after,#thanks .beach-sun{display:none;}
#thanks .thank-you-van{width:min(83%,350px);max-height:340px;filter:drop-shadow(0 7px 5px #473e3255);}
@media(max-width:430px){#thanks .beach-scene{min-height:185px}#thanks .thank-you-van{width:min(81%,265px);max-height:270px}}
@media(max-height:670px){#thanks .beach-scene{min-height:140px}#thanks .thank-you-van{max-height:190px;width:auto}}

/* Final confirmation artwork: use the approved illustrated tropical postcard, not the geometric replacement. */
#thanks .beach-scene{background:#f4d6a5 url('assets/confirmation-postcard.jpg') center center / cover no-repeat;min-height:300px;margin-top:8px;border-radius:0 0 10px 10px;}
#thanks .beach-scene .thank-you-van{display:none;}
#thanks .beach-scene:before,#thanks .beach-scene:after,#thanks .beach-sun{display:none;}
@media(max-width:430px){#thanks .beach-scene{min-height:245px;}}
@media(max-height:670px){#thanks .beach-scene{min-height:175px;}}

/* Responsive confirmation postcard: display the COMPLETE original artwork, without cover cropping. */
#thanks .beach-scene{display:block;min-height:0!important;height:auto;margin:14px 0 12px!important;padding:0;background:none!important;overflow:hidden;border-radius:12px;}
#thanks .confirmation-postcard{display:block;width:100%;height:auto;max-width:100%;object-fit:contain;object-position:center;border-radius:12px;}
@media(max-width:430px){#thanks .beach-scene{min-height:0!important;margin:12px 0!important;}}
@media(max-height:670px){#thanks .beach-scene{min-height:0!important;}}

/* v3.4: keep the entire clean postcard visible, with no clipped or double frame. */
#thanks .beach-scene{margin:14px 0 12px!important;padding:0!important;overflow:visible!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;}
#thanks .confirmation-postcard{display:block;width:100%;height:auto;object-fit:contain;border:0!important;border-radius:12px;box-shadow:none!important;}
/* The original homepage button text is baked into the concept artwork.
   An opaque, accessible button replaces its label without altering the rest of the artwork. */
.email-hotspot{left:39%;top:87%;width:28%;height:4.4%;border:1px solid #d8b67b;border-radius:999px;background:#173f3e;display:flex;align-items:center;justify-content:center;color:#fff6df;box-shadow:0 2px 8px #081d1c55;}
.email-hotspot:hover{background:#24514e;border-color:#ffdb9c;}
.email-hotspot:active{background:#315d58;}
.contact-button-label{display:block;font-size:clamp(9px,1.65vw,13px);font-weight:700;white-space:nowrap;line-height:1;}

/* v4 catalogue refresh: image-forward grab-and-go product selection. */
#catalogue{width:min(95vw,760px);padding:24px 26px 26px}
#catalogue .dialog-note{margin-bottom:4px}
#product-list{margin-top:10px}
.product{display:grid;grid-template-columns:minmax(180px,44%) minmax(0,1fr);gap:22px;align-items:center;padding:22px 0;border-top:1px solid #d6c7af}
.product:first-child{border-top:0}
.product-photo-button{appearance:none;border:0;background:#fff;border-radius:14px;padding:6px;width:100%;cursor:zoom-in;box-shadow:0 1px 0 #d9cbb5;transition:transform .16s ease,box-shadow .16s ease}
.product-photo-button:hover{transform:translateY(-1px);box-shadow:0 7px 22px #173f3d18}
.product-photo{display:block;width:100%;height:210px;object-fit:contain;object-position:center;background:#fff;border-radius:10px;padding:0}
.product-info{display:flex;flex-direction:column;min-width:0;align-items:flex-start}
.product-name{font-family:Georgia,serif;font-size:1.23rem;line-height:1.2;color:#173f3d;font-weight:700}
.product-detail{display:block;margin-top:7px;color:#61716b;font-size:.88rem;line-height:1.35}
.product-note{margin:10px 0 0;font-size:.78rem;line-height:1.35;color:#8b5b3d;font-weight:600}
.product .quantity{margin-top:15px;display:flex;align-items:center;gap:11px}
.product .quantity button{width:38px;height:38px}
.product .quantity output{min-width:24px;font-size:1rem}
.image-hint{display:block;text-align:center;color:#738078;font-size:.7rem;margin-top:4px}
.image-viewer{width:min(94vw,900px);max-height:94vh;padding:14px;background:#fff;border:0;border-radius:18px;overflow:auto}
.image-viewer::backdrop{background:#071d1be8;backdrop-filter:blur(7px)}
.image-viewer img{display:block;width:100%;max-height:84vh;object-fit:contain;border-radius:10px}
.image-viewer-close{position:sticky;top:0;float:right;z-index:2;width:42px;height:42px;border:0;border-radius:50%;background:#173f3e;color:#fff;font-size:1.8rem;line-height:1;margin:0 0 -42px 0}
@media(max-width:600px){#catalogue{padding:18px 18px 22px}.product{grid-template-columns:46% minmax(0,1fr);gap:14px;padding:18px 0}.product-photo{height:160px}.product-name{font-size:1.08rem}.product-detail{font-size:.79rem}.product .quantity{grid-column:auto;margin-top:12px}.product .quantity button{width:38px;height:38px}.image-hint{font-size:.64rem}}
@media(max-width:390px){.product{grid-template-columns:44% minmax(0,1fr);gap:11px}.product-photo{height:140px}.product-name{font-size:1rem}}


/* Production modal behavior: keep the page fixed behind active dialogs and contain mobile overscroll. */
html.modal-open,body.modal-open{overflow:hidden;overscroll-behavior:none}
dialog{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
#catalogue,#request,#contact,#thanks{touch-action:pan-y pinch-zoom}
.image-viewer{touch-action:pan-x pan-y pinch-zoom}
.form-status{min-height:1.2em;margin:0;font-size:.78rem;line-height:1.4;color:#8b3f2b}


/* 21+ entrance — real controls overlay the approved artwork. */

.age-gate{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:#102f31;overflow:hidden;overscroll-behavior:none}
.age-gate::before{content:"";position:absolute;inset:-5%;background:url("assets/age-gate-v1.png") center/cover no-repeat;filter:blur(18px) brightness(.52) saturate(.85);transform:scale(1.08);opacity:.95}
.age-gate[hidden]{display:none}
.age-gate-art{position:relative;z-index:1;width:min(100vw,calc(100dvh * 1.5));aspect-ratio:3/2;overflow:hidden;background:#e7c18a;box-shadow:0 18px 70px #0008}
.age-gate-art>img{display:block;width:100%;height:100%;object-fit:contain}
.age-hotspot{position:absolute;border:0;background:rgba(255,244,213,.07);border-radius:12px;touch-action:manipulation;cursor:pointer;box-shadow:0 0 18px rgba(255,226,168,.24);transition:background .16s ease,box-shadow .16s ease,transform .16s ease}
.age-hotspot:hover,.age-hotspot:focus-visible{background:rgba(255,248,213,.18);box-shadow:0 0 0 2px rgba(255,244,213,.34),0 0 30px rgba(255,226,168,.5);outline:none;transform:scale(1.02)}
.age-hotspot:active{background:rgba(255,248,213,.25);transform:scale(.99)}
/* Coordinates match the painted signs in age-gate-v1.png. */
.age-yes{left:46.4%;top:47.2%;width:22.0%;height:9.8%}
.age-no{left:48.2%;top:57.2%;width:19.4%;height:9.0%}
.age-note{position:absolute;z-index:2;left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(92vw,680px);min-height:1.4em;margin:0;color:#fff0d9;text-align:center;font-size:.9rem;text-shadow:0 1px 5px #000}
body.age-locked{overflow:hidden;overscroll-behavior:none}
@media(max-width:700px){.age-gate-art{width:100vw;aspect-ratio:3/2;box-shadow:0 10px 40px #0007}.age-hotspot{border-radius:9px;box-shadow:0 0 16px rgba(255,226,168,.3)}.age-note{padding:0 14px}}
/* SpeakEasy Quote Calculator layer */
.product-price{margin-top:9px;font-weight:800;font-size:1rem;color:#173f3d}.quote-controls{display:grid;gap:12px;padding:14px 0 4px;border-top:1px solid #d6c7af}.quote-controls>label:first-child{display:flex;align-items:center;justify-content:space-between;font-weight:700}.discount-input{display:flex;align-items:center;gap:6px}.discount-input input{width:78px;padding:9px;text-align:right}.check-row{display:flex!important;grid-template-columns:none!important;align-items:center;gap:9px!important;font-weight:600!important}.check-row input{width:auto;accent-color:#173f3e}.check-row strong{margin-left:auto}.quote-summary{margin:12px 0 4px;padding:13px 15px;background:#fffaf1;border:1px solid #d6c7af;border-radius:12px}.quote-summary>div{display:flex;justify-content:space-between;gap:20px;padding:5px 0;font-size:.9rem}.quote-total{margin-top:7px;padding-top:12px!important;border-top:1px solid #cdbb9e;font-size:1.08rem!important}.clear-quote{display:block;margin:5px 0 18px auto;border:0;background:transparent;color:#173f3d;text-decoration:underline;font-size:.8rem}.request-line span{min-width:0}.request-line small{display:block;margin-top:4px;color:#61716b;line-height:1.35}
