:root{--pink:#007b91;--ink:#152a31;--light:#effbf6;--border:#c9e5de}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:20px}body{margin:0;font:16px/1.5 Arial,sans-serif;color:var(--ink);background:#f8fcfc}button,a,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #197ea7;outline-offset:4px}header{display:flex;align-items:center;justify-content:space-between;padding:22px 5%;background:white;border-bottom:1px solid var(--border);gap:20px}.brand{font-weight:900;font-size:23px;letter-spacing:-1px;color:var(--pink);text-decoration:none}.brand small{display:block;font-size:12px;letter-spacing:3px;color:var(--ink)}nav{display:flex;gap:24px;align-items:center}nav a{color:var(--ink);text-decoration:none;font-weight:600}.cta{border:0;border-radius:30px;background:var(--pink);color:white;padding:12px 24px;text-decoration:none;font-weight:bold;display:inline-block}.demo{text-align:center;background:var(--ink);color:white;font-size:14px;padding:8px 16px}.intro{max-width:1250px;margin:auto;padding:35px 24px 25px;display:flex;align-items:end;justify-content:space-between;gap:20px}.eyebrow{font-size:14px;font-weight:bold;letter-spacing:2px;text-transform:uppercase;color:var(--pink)}h1{font: bold clamp(32px,4vw,54px)/1.1 Georgia,serif;margin:8px 0 13px;letter-spacing:-1.5px}p{margin:0 0 12px}.intro p{color:#6d5b70}.note{font-size:14px;color:#6d5b70}.layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(310px,1fr);gap:28px;max-width:1250px;margin:0 auto;padding:0 24px 50px}.case{border:9px solid #badbdc;border-radius:24px 24px 12px 12px;background:linear-gradient(115deg,#fff 25%,#edf9fa 70%,#fff);box-shadow:0 14px 35px #48253b0d;overflow:hidden}.case-head{display:flex;justify-content:space-between;gap:15px;padding:15px 20px;border-bottom:1px solid var(--border);background:#ffffffa8}.case-head strong{font-size:18px}.catalog{display:grid;grid-template-columns:repeat(3,1fr);padding:12px 13px 20px;gap:22px 12px}.product{min-width:0;text-align:center;position:relative;padding:0 5px 12px;border-bottom:5px solid #9ebec1}.photo{width:100%;aspect-ratio:1;display:block;border:0;padding:0;background-color:white;background-image:var(--donut-image);background-size:300% 300%;background-repeat:no-repeat;border-radius:14px;cursor:grab;transition:transform .2s}.photo:hover{transform:translateY(-5px)}.product h3{font-size:16px;margin:10px 0 2px;line-height:1.25}.product p{font-size:13px;color:#735d71;margin:4px 0 10px}.add{border:1px solid #aad5d8;border-radius:20px;color:var(--pink);background:white;padding:6px 18px;font-weight:bold;font-size:14px}.add:hover{background:var(--light)}.case-foot{background:#badbdc;text-align:center;padding:10px;font-size:14px;font-weight:bold;letter-spacing:2px}.box-panel{position:sticky;top:20px;align-self:start;background:white;padding:24px;border:1px solid var(--border);border-radius:22px;box-shadow:0 12px 30px #432b3710}.box-panel h2{font:bold 28px Georgia,serif;margin:0 0 16px}.sizes{display:flex;background:var(--light);border-radius:25px;padding:4px;gap:4px;margin-bottom:18px}.sizes button{flex:1;border:0;background:transparent;border-radius:22px;padding:9px 3px;font-size:14px;font-weight:bold;color:var(--ink)}.sizes button[aria-pressed=true]{background:var(--ink);color:white}.box-lid{background:#cdf1b8;border:2px solid #82c66c;border-bottom:0;text-align:center;border-radius:16px 16px 0 0;padding:15px;color:#226b38;font:bold 22px Georgia,serif;transform:perspective(350px) rotateX(12deg);transform-origin:bottom}.box-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;background:#fff3e3;padding:15px;border:8px solid #e6c8a8;border-radius:0 0 14px 14px;min-height:200px;transition:background .2s}.box-grid.over{background:#cdf1b8}.slot{aspect-ratio:1;background:#fffaf3;border:1px dashed #d8b38e;border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center;color:#806a54;font-size:22px}.slot.filled{border:0;background-image:var(--donut-image);background-size:300% 300%;border-radius:14px}.remove{position:absolute;right:-3px;top:-3px;border:1px solid var(--border);border-radius:50%;background:white;color:var(--ink);width:28px;height:28px;font-size:18px;line-height:1}.progress{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:17px 0 7px;font-weight:bold}.clear{background:none;border:0;color:#775e70;text-decoration:underline;font-size:14px}.status{min-height:42px;color:#735d71;font-size:14px}.review{width:100%;margin-top:10px}.review:disabled{background:#eadde3;color:#786975;cursor:default}.story{padding:48px 24px;background:var(--light);text-align:center}.story-inner{max-width:650px;margin:auto}.story h2{font:bold 36px Georgia,serif;margin:5px 0 18px}.story p{font-size:18px}.story .note{font-size:14px}footer{text-align:center;padding:25px;font-size:14px;color:#725a6b}dialog{width:min(520px,calc(100% - 30px));border:0;border-radius:20px;padding:28px;color:var(--ink);box-shadow:0 20px 80px #0004}dialog::backdrop{background:#33203988}dialog h2{font:bold 30px Georgia,serif;margin:0 0 15px}dialog ul{padding-left:20px}.total{font-size:22px;font-weight:bold;border-top:1px solid var(--border);padding-top:15px}dialog .cta{width:100%;margin-top:12px}.close-dialog{float:right;border:0;background:var(--light);border-radius:50%;width:34px;height:34px}label{display:block;font-weight:bold;margin-top:18px}input{width:100%;padding:10px;border:1px solid #ccb9c5;border-radius:8px}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(max-width:850px){.layout{grid-template-columns:1fr}.box-panel{position:static;max-width:500px;width:100%;margin:auto}.intro{align-items:start}.intro .note{display:none}.catalog{gap:18px 8px}.box-grid{min-height:0}header{padding:17px 20px}nav{gap:15px}nav a{font-size:14px}.brand{font-size:20px}}@media(max-width:480px){nav a:first-child{display:none}nav .cta{padding:9px 15px}.intro{padding:26px 16px 20px}.layout{padding:0 12px 35px;gap:22px}.case{border-width:6px}.catalog{grid-template-columns:repeat(2,1fr);padding:10px}.case-head{padding:12px;font-size:14px}.case-head strong{font-size:16px}.box-panel{padding:20px}h1{letter-spacing:-.7px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.photo{transition:none}} .categories{display:flex;flex-wrap:wrap;gap:8px;padding:16px;border-bottom:1px solid var(--border)}.categories button{border:1px solid #afd1d4;border-radius:20px;background:white;color:var(--ink);padding:8px 13px;font-size:14px;font-weight:bold}.categories button[aria-pressed=true]{background:var(--pink);color:white;border-color:var(--pink)}.photo,.slot.filled{background-size:cover;background-position:center;overflow:hidden}.flavor-label{font:bold 20px/1.2 Georgia,serif;color:#12644a;display:flex;align-items:center;justify-content:center;padding:14px;background:#e9f8eb;width:100%;height:100%}.slot .flavor-label{font-size:12px;padding:6px}.product .photo{font-size:16px}.product h3{min-height:40px}.box-lid{font-size:18px}.case-foot{letter-spacing:1px}#active-category{font-size:15px;color:var(--pink);font-weight:bold;margin-bottom:15px}.box-list{margin:15px 0;font-size:14px}.box-list button{display:block;border:0;padding:5px 0;background:transparent;color:var(--pink);text-align:left}dialog{max-height:90vh;overflow:auto} [hidden]{display:none!important}header{padding:10px 5%}.demo{font-size:12px;padding:5px}.home-hero{max-width:1200px;margin:auto;padding:40px 24px;display:grid;grid-template-columns:1fr 1fr;gap:45px;align-items:center}.home-copy p{max-width:490px;font-size:18px;color:#42575c}.home-copy .note{font-size:15px;margin:15px 0 0}.home-copy h1{font-size:clamp(36px,4vw,56px)}.hero-photo{width:100%;height:390px;object-fit:cover;border-radius:24px;box-shadow:12px 12px 0 #b9e9d1}.home-story{max-width:800px;text-align:center;margin:15px auto 40px;padding:25px}.home-story h2,.home-menu h2{font:bold 34px Georgia,serif;margin:8px 0 20px}.home-story p{font-size:18px}.signature{color:#007b91;font-style:italic}.home-menu{padding:40px 24px;background:#effbf6;text-align:center}.menu-grid{max-width:1050px;margin:20px auto;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.menu-grid article{background:white;border:1px solid var(--border);border-radius:18px;padding:25px}.menu-grid h3{font:bold 25px Georgia,serif;margin:0 0 15px}.menu-price{font-size:22px;font-weight:bold}.home-menu .note{margin:15px 0 0} #order-view .intro{max-width:940px;padding:16px 20px 12px}#order-view h1{font-size:32px;margin:4px 0 6px;letter-spacing:-.5px}#order-view .intro .eyebrow{display:none}#order-view .intro p{margin:0;font-size:15px}.layout{display:flex;flex-direction:column;max-width:940px;gap:15px;padding:0 20px 25px}.case{border:6px solid #b5d8db;border-radius:20px 20px 8px 8px;background:linear-gradient(115deg,#ffffff,#eaf7f9 60%,#fff);box-shadow:0 8px 18px #193f4612}.case-head{padding:8px 14px;font-size:14px}.case-controls{display:flex;align-items:center;gap:15px;padding:8px 14px;border-bottom:1px solid var(--border)}.case-controls label{font-size:14px;white-space:nowrap;margin:0}.case-controls select{width:100%;max-width:300px;padding:7px 10px;background:white;border:1px solid #9dbfc3;border-radius:8px;font:inherit;font-size:15px;color:var(--ink)}.catalog{grid-template-columns:repeat(6,minmax(0,1fr));padding:8px 12px 6px;gap:12px}.product{padding:0 0 5px;border-bottom:3px solid #a5c0c6}.product h3{font-size:14px;min-height:34px;margin:7px 0 6px;line-height:1.2}.photo{aspect-ratio:1.12}.flavor-label{font-size:17px;padding:7px}.add{padding:4px 14px;font-size:14px}.case-pages{display:flex;align-items:center;justify-content:space-between;padding:7px 12px;background:#b5d8db;font-size:14px}.case-pages button{background:white;border:1px solid #91b6bd;padding:5px 13px;border-radius:16px;font-size:14px;color:var(--ink)}.case-pages button:disabled{opacity:.45;cursor:default}.box-panel{position:static;max-width:none;padding:12px 18px;border-radius:16px;box-shadow:none}.box-heading{display:flex;gap:14px;align-items:center;margin-bottom:8px}.box-heading h2{font-size:22px;margin:0}#active-category{font-size:14px;margin:0}.sizes{max-width:400px;margin:0 0 10px;padding:3px}.sizes button{padding:6px 10px}.box-lid{display:flex;align-items:center;justify-content:center;gap:15px;background:white;border:3px solid #d5c0a6;border-bottom:0;padding:5px;transform:none;border-radius:10px 10px 0 0}.box-lid img{height:48px;width:48px;object-fit:contain}.box-lid span{font:bold 20px Georgia,serif;color:#226b38}.box-lid small{display:block;font:12px Arial,sans-serif;color:#596657;margin-top:4px}.box-grid{grid-template-columns:repeat(6,minmax(0,1fr));min-height:0;padding:8px 16px;border:6px solid #d5c0a6;gap:10px;background:#fffdf6;box-shadow:inset 0 3px 8px #714a2a10}.slot{aspect-ratio:1.25;max-height:80px;width:100%;border-radius:12px}.slot .flavor-label{font-size:12px;background:#edf8ed}.progress{margin:8px 0 3px;font-size:15px}.status{min-height:22px;font-size:14px}.review{margin-top:6px;padding:9px}.box-list{display:flex;flex-wrap:wrap;gap:4px 15px;margin:6px 0}.box-list button{font-size:13px;padding:1px 0}.box-panel>p.note{font-size:12px;margin:5px 0 0!important}.remove{width:26px;height:26px;right:-4px;top:-4px}.ordering footer{display:none} @media(max-width:650px){header{padding:7px 15px}nav{gap:12px}nav a{font-size:14px}nav .cta{padding:8px 14px}.brand img{width:58px!important;height:58px!important}.home-hero{grid-template-columns:1fr;gap:25px;padding:28px 20px}.home-copy h1{font-size:38px}.hero-photo{height:270px}.home-copy p{font-size:17px}.home-story{padding:20px;margin:10px auto 25px}.menu-grid{grid-template-columns:1fr;gap:12px}.menu-grid article{padding:20px}.menu-price{font-size:20px}.layout{padding:0 10px 18px;gap:12px}.catalog{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.product h3{min-height:34px;font-size:14px}.photo{aspect-ratio:1.1}.flavor-label{font-size:16px}.case-controls{gap:10px;padding:7px 10px}.case-controls label{font-size:13px}.case-controls select{font-size:14px;padding:6px;min-width:0}.case-head{padding:7px 10px}#order-view .intro{padding:12px 14px 10px}#order-view h1{font-size:27px}.box-panel{padding:10px 12px}.box-heading{margin-bottom:7px;gap:10px}.box-heading h2{font-size:21px}.box-grid{grid-template-columns:repeat(3,minmax(0,1fr));padding:8px 16px;gap:8px;max-height:none}.slot{max-height:65px;aspect-ratio:1.3}.sizes button{font-size:13px;padding:5px}.box-lid img{height:40px;width:40px}.box-lid span{font-size:18px}.status{min-height:22px}.box-list{max-height:48px;overflow:auto}.box-panel .note{display:none}nav a:first-child{display:inline}} #order-view{background:radial-gradient(ellipse at top,#d8f3f4 0,#f5faf8 60%)}#order-view .layout{max-width:950px;gap:18px}.case{border:0;background:none;border-radius:0;box-shadow:none;overflow:visible}.case-head{border:0;background:none;padding:6px 3px}.case-head strong{font: bold 24px Georgia,serif}.case-head span{font-size:14px}.case-controls{border:0;padding:8px 0 12px}.case-controls select{background:white;max-width:380px}.case-window{position:relative;background:url('../graphics/display-case.jpg') center/100% 100% no-repeat;min-height:390px;display:flex;align-items:flex-start;padding:48px 9% 112px}.catalog{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;padding:0;background:none}.product{border:0;padding:0;display:flex;flex-direction:column;align-items:center;min-width:0}.photo{width:100%;max-width:160px;aspect-ratio:1.15;border-radius:50%;box-shadow:0 7px 10px #251d2426;border:2px solid #ffffffc4;background-color:#fff}.photo:hover{transform:translateY(-7px) scale(1.03)}.product h3{background:#fffffff5;box-shadow:0 2px 3px #193f4620;border:1px solid #b8c8cd;border-radius:4px;font-size:14px;min-height:42px;max-width:200px;width:100%;margin:10px 0 7px;padding:5px 8px;text-align:center;display:flex;align-items:center;justify-content:center}.add{background:#007b91;border:1px solid #006575;color:white;padding:6px 22px;box-shadow:0 3px 8px #273a4323}.add:hover{background:#005c70}.case-pages{background:none;padding:0 5px;margin-top:-14px;position:relative}.case-pages button{background:white;box-shadow:0 2px 6px #35525915}.box-panel{background:none;border:0;border-radius:0;padding:0 10px;box-shadow:none}.box-heading{margin:0 0 12px}.box-heading h2{font-size:27px}.sizes{background:white;border:1px solid #c6dbd3;max-width:390px}.box-scene{position:relative;background:url('../graphics/open-box.jpg') center/100% 100% no-repeat;padding:140px 13% 50px;min-height:380px}.box-lid{position:absolute;top:22px;left:25%;width:50%;height:95px;display:flex;justify-content:center;align-items:center;border:0;border-radius:0;background:transparent;gap:14px;box-shadow:none}.box-lid img{height:80px;width:80px;mix-blend-mode:multiply}.box-lid span{font-size:21px;transform:rotate(-3deg)}.box-grid{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 25px;min-height:140px}.box-grid.over{background:#8bddaa55;border-radius:15px;outline:3px dashed #218c61;outline-offset:10px}.slot{max-width:125px;max-height:100px;aspect-ratio:1.25;justify-self:center;border:1px dashed #c3b2997d;background:#ffffff50;box-shadow:none}.slot.filled{border:0;border-radius:50%;box-shadow:0 6px 9px #674a342c}.remove{z-index:2;right:-5px;top:-5px}.progress,.status,.box-list{max-width:660px;margin-left:auto;margin-right:auto}.progress{margin-top:0}.review{max-width:660px;margin:6px auto 0;display:block}.box-panel>.note{display:none}.slot .flavor-label{border-radius:15px}.flavor-label{font-size:18px}.box-grid.dozen{gap:8px 20px}.box-grid.dozen .slot{max-height:60px;aspect-ratio:1.4}.box-scene:has(.dozen){padding-top:135px;padding-bottom:42px} @media(max-width:650px){#order-view .layout{padding:0 8px 18px;gap:16px}#order-view .intro{padding:12px 14px}.case-head{padding:4px 4px}.case-head strong{font-size:21px}.case-controls{padding:7px 4px 9px}.case-controls select{max-width:none}.case-window{min-height:225px;padding:26px 8% 55px}.catalog{gap:9px}.photo{max-width:none;aspect-ratio:1.13;box-shadow:0 4px 6px #2e2c2626}.product h3{font-size:12px;min-height:38px;padding:3px;margin:7px 0 5px}.add{font-size:13px;padding:4px 13px}.case-pages{margin-top:-6px;padding:0 4px}.box-panel{padding:0 4px}.box-heading h2{font-size:23px}.box-heading{margin-bottom:8px}.sizes{max-width:none;margin-bottom:3px}.box-scene{min-height:260px;padding:90px 12% 34px}.box-lid{top:13px;height:64px;left:22%;width:56%;gap:7px}.box-lid img{width:57px;height:57px}.box-lid span{font-size:16px}.box-lid small{font-size:10px}.box-grid{gap:9px 14px;min-height:115px}.slot{max-height:60px;aspect-ratio:1.15}.slot.filled{border-radius:50%}.box-grid.dozen{gap:5px 12px}.box-grid.dozen .slot{max-height:37px;aspect-ratio:1.45}.box-scene:has(.dozen){padding-top:87px;padding-bottom:30px}.flavor-label{font-size:14px;padding:5px}.slot .flavor-label{font-size:11px}.progress{margin-top:0}.remove{width:24px;height:24px;font-size:17px}.case-pages button{font-size:13px;padding:5px 14px}.box-lid small{display:none}} .case-window{padding-top:78px}.box-scene{min-height:440px;padding:172px 16% 110px}.box-lid{height:72px}.box-lid img{height:62px;width:62px}.box-grid{min-height:0;gap:12px 25px}.slot{width:90px;height:72px;max-height:none;aspect-ratio:auto}.box-grid.dozen .slot{height:36px;width:67px;max-height:none;aspect-ratio:auto}.box-scene:has(.dozen){min-height:480px;padding-top:184px;padding-bottom:125px}.box-grid.dozen{gap:8px 20px} @media(max-width:650px){.case-window{padding-top:43px;min-height:245px;padding-bottom:57px}.product h3{font-size:14px;min-height:40px;line-height:1.2}.box-scene{min-height:275px;padding:107px 16% 68px}.box-lid{height:50px;top:9px}.box-lid img{height:45px;width:45px}.box-grid{gap:9px 14px}.slot{width:65px;height:45px;max-height:none}.box-grid.dozen .slot{width:52px;height:25px;max-height:none}.box-scene:has(.dozen){min-height:320px;padding-top:125px;padding-bottom:80px}.box-grid.dozen{gap:4px 12px}.case-controls label{font-size:14px}} .case-window{padding:58px 8% 78px;min-height:600px;background-image:url('../graphics/display-case-stacked.jpg');align-items:stretch}.catalog{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,1fr);gap:10px 18px;align-items:center}.product{padding:0;align-self:center}.photo{width:100%;height:84px;max-width:125px;aspect-ratio:auto;background-color:transparent;background-size:contain;background-position:center;background-repeat:no-repeat;border:0;border-radius:0;box-shadow:none;filter:drop-shadow(0 5px 4px #33241430)}.photo:hover{transform:translateY(-4px) scale(1.05)}.product h3{min-height:34px;height:auto;max-width:180px;margin:3px 0 4px;padding:2px 4px;box-shadow:0 1px 3px #193f461a;font-size:14px;line-height:1.15}.add{padding:3px 16px;min-height:29px;font-size:14px;box-shadow:none}.photo .flavor-label{font-size:14px;background:#fffffff0;border-radius:8px;border:1px solid #e3dfd0;color:#394c42}.slot.filled{border-radius:0;box-shadow:none;background-color:transparent;background-size:contain;background-repeat:no-repeat;filter:drop-shadow(0 4px 3px #674a3430)}.slot .remove{filter:none}.box-grid.dozen .slot{background-size:contain}.case-pages{margin-top:3px} @media(max-width:650px){.case-window{min-height:530px;padding:42px 8% 60px}.catalog{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px 10px;grid-template-rows:repeat(3,1fr)}.photo{height:66px;max-width:90px;aspect-ratio:auto;border:0;border-radius:0}.product h3{min-height:34px;font-size:14px;margin:3px 0 4px;line-height:1.15;padding:2px}.add{font-size:14px;min-height:29px;padding:3px 10px}.photo .flavor-label{font-size:13px;padding:4px}.slot.filled{border-radius:0}} .case-window{min-height:640px}.catalog{grid-template-rows:repeat(3,minmax(0,1fr))}.product h3{min-height:34px} @media(max-width:650px){.case-window{min-height:570px}.product h3{min-height:42px;font-size:14px}} .case-window{position:relative;min-height:0;height:660px;padding:0;display:block;background-image:url('../graphics/tray-display-case.jpg');border-radius:14px 14px 0 0;overflow:hidden;box-shadow:0 12px 24px #40251820}.catalog{position:absolute;left:4%;right:4%;top:14.5%;height:70.5%;width:auto;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:0 13px;align-items:stretch}.product{position:relative;align-self:stretch;justify-content:flex-start;min-height:0;padding:0 4px;gap:0}.photo{height:60%;min-height:0;max-width:none;width:100%;padding:2px 3px 5px;border:0;border-radius:0;background:none!important;filter:none;display:flex;align-items:center;justify-content:center;cursor:default}.donut-display{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:2px;width:100%;height:100%;padding:0 5px;perspective:400px}.stock-piece{display:block;background-size:contain;background-position:center;background-repeat:no-repeat;min-width:0;min-height:0;cursor:grab;filter:drop-shadow(0 3px 2px #2a1a1660);transform:rotate(-4deg);transition:transform .15s}.stock-piece:nth-child(even){transform:rotate(3deg)}.stock-piece:hover{transform:translateY(-4px) scale(1.12)}.photo:hover{transform:none}.product h3{background:#211a15;color:#fffaf0;border:1px solid #796d57;border-radius:3px;box-shadow:0 2px 3px #24180f66;font:bold italic 14px/1.2 Georgia,serif;min-height:34px;height:34px;max-width:100%;padding:3px 4px;margin:0 0 4px;display:flex;align-items:center;justify-content:center}.product .add{min-height:27px;padding:2px 14px;line-height:1.2;border-radius:20px;background:#007b91;border:1px solid #81b9b3;font-size:14px;box-shadow:0 2px 4px #20161333}.case-pages{padding:9px 7px 0;margin:0}.case-head strong{font-style:italic}.photo .flavor-label{height:80%;width:85%;max-width:120px;font-size:14px;padding:5px;background:#fff9e8cc;color:#453629;border:1px solid #d7cba6;box-shadow:none}.box-panel{margin-top:4px} @media(max-width:650px){.case-window{height:630px;min-height:0;border-radius:9px 9px 0 0}.catalog{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));left:4%;right:4%;gap:0 6px;top:14.5%;height:70.5%}.product{padding:0 1px}.photo{height:46%;max-width:none;padding:0}.donut-display{grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;padding:0}.stock-piece:nth-child(n+5){display:none}.product h3{height:48px;min-height:48px;font-size:14px;line-height:1.08;padding:2px 1px;margin:0 0 3px}.product .add{font-size:14px;min-height:27px;padding:2px 8px;max-width:100%}.photo .flavor-label{font-size:12px;padding:3px}.stock-piece{filter:drop-shadow(0 2px 1px #24191360)}.case-head strong{font-size:23px}} @media(prefers-reduced-motion:reduce){.stock-piece{transition:none}} .photo{overflow:visible}.donut-display{position:relative;display:block;perspective:none;isolation:isolate;width:100%;height:100%;padding:0;overflow:visible}.stock-piece{position:absolute;display:block;width:53%;height:120%;min-height:0;min-width:0;background-size:contain;background-position:center;background-repeat:no-repeat;left:50%;top:32%;transform:translate(-50%,-50%) scaleY(var(--donut-flatness,1));transform-origin:center;filter:drop-shadow(0 2px 1px #2a190e80);transition:filter .15s;z-index:1}.stock-piece:nth-child(even){transform:translate(-50%,-50%) scaleY(var(--donut-flatness,1))}.stock-piece:nth-child(1),.stock-piece:nth-child(4){left:23%}.stock-piece:nth-child(2),.stock-piece:nth-child(5){left:50%}.stock-piece:nth-child(3),.stock-piece:nth-child(6){left:77%}.stock-piece:nth-child(n+4){top:68%;z-index:2}.stock-piece:hover{transform:translate(-50%,-50%) scaleY(var(--donut-flatness,1));filter:drop-shadow(0 2px 1px #25130da0) brightness(1.04)}.product h3,.product .add{position:relative;z-index:3}.product .photo:hover{transform:none} @media(max-width:650px){.donut-display{display:block;padding:0}.stock-piece{width:69%;height:118%;top:35%;left:33%;display:block;filter:drop-shadow(0 2px 1px #29180c80)}.stock-piece:nth-child(1),.stock-piece:nth-child(3){left:33%;display:block}.stock-piece:nth-child(2),.stock-piece:nth-child(4){left:68%;display:block}.stock-piece:nth-child(1),.stock-piece:nth-child(2){top:35%;z-index:1}.stock-piece:nth-child(3),.stock-piece:nth-child(4){top:67%;z-index:2}.stock-piece:nth-child(n+5){display:none}} /* Compact ordering workspace: case and box remain together. */ body.ordering header{height:68px;padding:5px 3%}body.ordering .brand img{height:52px!important;width:52px!important}body.ordering .demo{height:26px;padding:4px} #order-view{height:calc(100svh - 94px);min-height:600px;display:flex;flex-direction:column;padding:0 24px 14px}#order-view .intro{width:100%;max-width:1500px;padding:8px 0;align-items:center}#order-view h1{font-size:26px;margin:0}#order-view .intro p{font-size:14px}.order-controls{max-width:1500px;width:100%;margin:0 auto}.order-controls .sizes{max-width:670px;margin:0 0 6px;border-radius:12px}.sizes button{border-radius:9px;font-size:14px;padding:6px 12px}.sizes small{display:block;font-size:12px;font-weight:normal}.case-controls{padding:0 0 8px;gap:12px;align-items:start}.case-controls>span{font-size:14px;font-weight:bold;padding-top:6px;white-space:nowrap}.category-links{display:flex;flex-wrap:wrap;gap:4px 14px}.category-links button{border:0;border-bottom:2px solid transparent;background:transparent;padding:5px 0;color:#365057;font-size:14px;font-weight:bold}.category-links button[aria-pressed=true]{color:#007b91;border-color:#007b91}.category-links button:hover{color:#007b91} #order-view .layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;max-width:1500px;width:100%;padding:0;gap:22px;flex:1;min-height:0}.case{min-height:0;display:flex;flex-direction:column}.case-head{padding:0 3px 5px;height:31px}.case-head strong{font-size:22px}.case-window{height:auto;flex:1;min-height:0}.catalog{gap:0 12px}.photo{height:59%}.product h3{font-size:14px;min-height:29px;height:29px;margin:0 0 3px}.product .add{min-height:25px;padding:2px 12px}.case-pages{padding:5px 4px 0;height:34px}.case-pages button{padding:3px 12px}.box-panel{padding:12px 10px;margin:0;min-height:0;border:1px solid #c9e5de;background:#ffffffc9;border-radius:15px;overflow:auto;align-self:stretch}.box-heading{display:block;margin:0 0 4px}.box-heading h2{font-size:24px}#active-category{font-size:14px}.box-scene,.box-scene:has(.dozen){min-height:0;height:245px;padding:99px 16% 57px}.box-lid{top:8px;height:42px;left:20%;width:60%;gap:6px}.box-lid img{height:42px;width:42px}.box-lid span{font-size:14px}.box-lid small{display:none}.box-grid{gap:5px 10px}.slot{width:50px;height:40px}.box-grid.dozen{gap:3px 9px}.box-grid.dozen .slot{width:45px;height:20px}.remove{width:22px;height:22px;font-size:16px;right:-4px;top:-4px}.progress{font-size:14px;margin:0 0 4px}.clear{font-size:13px}.status{font-size:14px;min-height:42px;line-height:1.3}.status.error{color:#982d22;font-weight:bold}.separate{width:100%;background:#effbf6;border:1px solid #007b91;color:#007b91;border-radius:8px;padding:7px;margin:5px 0;font-size:14px;font-weight:bold}.physical-boxes{display:flex;gap:5px;flex-wrap:wrap}.physical-boxes button{font-size:12px;padding:3px 6px;border:1px solid #c9e5de;border-radius:6px;background:white;color:#152a31}.physical-boxes button[aria-pressed=true]{background:#007b91;color:white}.box-list{max-height:65px;overflow:auto;margin:4px 0;gap:3px 12px}.box-list button{font-size:13px;text-decoration:underline}.review{font-size:14px;padding:8px;margin-top:5px} @media(min-width:1500px){#order-view .layout{grid-template-columns:minmax(0,1fr) 370px}.box-scene,.box-scene:has(.dozen){height:275px;padding-top:112px;padding-bottom:66px}.slot{width:60px;height:46px}.box-grid.dozen .slot{width:50px;height:23px}} @media(max-width:900px){#order-view{padding:0 10px 8px}#order-view .layout{grid-template-columns:minmax(0,1fr) 280px;gap:10px}.product h3{font-size:12px}.catalog{gap:0 7px}.box-scene,.box-scene:has(.dozen){height:215px;padding-top:84px;padding-bottom:46px}.box-lid span{font-size:12px}.slot{width:42px;height:35px}.box-grid.dozen .slot{width:38px;height:18px}} @media(max-width:650px){body.ordering header{height:54px}body.ordering .brand img{height:40px!important;width:40px!important}body.ordering .demo{height:25px;font-size:11px}#order-view{height:calc(100svh - 79px);min-height:620px;padding:0 8px 5px}#order-view .intro{padding:5px 3px}#order-view h1{font-size:22px}#order-view .intro p{font-size:12px}.order-controls .sizes{margin-bottom:3px}.sizes button{padding:5px 2px;font-size:12px}.sizes small{font-size:11px}.case-controls{display:block;padding-bottom:4px}.case-controls>span{display:none}.category-links{gap:0 10px;max-height:73px;overflow:auto}.category-links button{font-size:12px;padding:4px 0}#order-view .layout{grid-template-columns:1fr;grid-template-rows:minmax(200px,1fr) 202px;gap:5px}.case-head{height:24px;padding:0}.case-head strong{font-size:18px}.case-head span{font-size:12px}.case-window{overflow:auto}.catalog{gap:0 6px}.product h3{height:32px;min-height:32px;font-size:11px}.photo{height:48%}.product .add{font-size:12px;min-height:24px;padding:2px 8px}.case-pages{height:29px;padding-top:2px;font-size:12px}.case-pages button{font-size:12px;padding:2px 10px}.box-panel{position:relative;display:grid;grid-template-columns:43% 1fr;grid-template-rows:26px 28px 1fr 31px;column-gap:10px;padding:6px 8px;overflow:auto}.box-heading{grid-column:2;grid-row:1;margin:0;display:flex;align-items:center;gap:6px}.box-heading h2{font-size:18px}#active-category{font-size:12px}.box-scene,.box-scene:has(.dozen){grid-column:1;grid-row:1/5;width:100%;height:180px;padding:73px 16% 41px}.box-lid{top:4px;height:29px;gap:3px}.box-lid img{width:29px;height:29px}.box-lid span{display:none}.box-grid{gap:4px}.slot{width:26px;height:28px}.box-grid.dozen{gap:2px 4px}.box-grid.dozen .slot{width:25px;height:15px}.remove{width:18px;height:18px;font-size:14px}.physical-boxes{grid-column:2;grid-row:2;align-items:start}.physical-boxes button{font-size:11px;padding:2px 4px}.progress{grid-column:2;grid-row:3;align-self:start;font-size:12px;justify-content:start;gap:5px}.clear{font-size:11px;padding:0}.status{grid-column:2;grid-row:3;margin-top:23px;min-height:0;font-size:12px}.separate{grid-column:2;grid-row:3;align-self:end;font-size:12px;padding:3px;margin:0}.review{grid-column:2;grid-row:4;margin:0;padding:5px;font-size:12px}.box-list{grid-column:1/3;display:none}.box-panel:has(.separate:not([hidden])) .status{margin-bottom:25px}.stock-piece{width:69%;height:118%}} @media(max-height:700px) and (min-width:651px){#order-view{min-height:530px}.box-scene,.box-scene:has(.dozen){height:200px;padding-top:77px;padding-bottom:42px}.box-grid.dozen .slot{height:17px}.box-lid img{height:35px;width:35px}.status{min-height:32px}} @media(max-width:650px){#order-view .layout{grid-template-rows:minmax(200px,1fr) 224px}.box-panel{grid-template-rows:26px 28px 1fr 31px 20px}.box-list{grid-column:1/3;grid-row:5;display:flex;flex-wrap:nowrap;max-height:20px;white-space:nowrap;margin:0;overflow:auto}.box-list button{font-size:11px;flex-shrink:0}} .product .photo{height:calc(100% - 57px)}@media(max-width:650px){.product .photo{height:calc(100% - 59px)}} /* Larger brand, clear choices, full-size boxed treats and prominent warnings. */ header .brand img{width:112px!important;height:112px!important;object-fit:contain}header{padding:8px 3%}body.ordering header{height:122px;padding:5px 3%}body.ordering .brand img{width:112px!important;height:112px!important}#order-view{height:calc(100svh - 148px);min-height:610px} .category-links{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;width:100%;padding:4px;background:#fff;border:1px solid #c6dbd3;border-radius:12px}.category-links button{display:flex;align-items:center;justify-content:center;border:0;border-radius:9px;background:#effbf6;padding:8px 9px;font-size:14px;line-height:1.2;color:#152a31;min-height:37px}.category-links button[aria-pressed=true]{background:#152a31;color:white;border:0}.category-links button:hover{background:#d8efea;color:#152a31}.category-links button[aria-pressed=true]:hover{background:#007b91;color:white}.case-controls{align-items:center}.case-controls>span{padding:0}.case-controls{padding-bottom:7px} .box-scene,.box-scene:has(.dozen){height:290px;min-height:0;padding:0}.box-grid,.box-grid.dozen{position:absolute;left:11%;right:11%;top:36%;bottom:22%;width:auto;height:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:0;min-height:0;padding:0;overflow:visible}.box-grid.dozen{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));top:35%;bottom:20%}.box-grid .slot,.box-grid.dozen .slot{width:100%;height:100%;max-width:none;max-height:none;aspect-ratio:auto;justify-self:stretch;border-radius:50%;font-size:18px}.box-grid .slot.filled{background-size:contain;transform:scale(1.16);z-index:1;overflow:visible;filter:drop-shadow(0 2px 2px #674a3440)}.box-grid .slot.filled:focus-within{z-index:2}.box-grid .remove{right:3%;top:2%;width:23px;height:23px;font-size:18px}.slot .flavor-label{font-size:12px;border-radius:8px;padding:3px}.box-lid{top:7px;height:53px}.box-lid img{height:53px;width:53px}.box-lid span{font-size:16px}.box-panel .status{font-size:16px;line-height:1.4;min-height:24px}.box-panel .status.error{font-size:19px;line-height:1.4;font-weight:800;color:#752315;background:#fff0dd;border:2px solid #d57c35;border-left:6px solid #bc5425;border-radius:10px;padding:12px 13px;margin:8px 0;min-height:0}.separate{font-size:16px;padding:10px;line-height:1.3}.box-list{max-height:130px;gap:6px;margin:10px 0}.box-list button{display:block;width:100%;font-size:16px;font-weight:700;line-height:1.35;text-decoration:none;padding:9px 10px;border:1px solid #94bfc0;background:white;border-radius:8px}.box-list button[aria-current=true]{background:#007b91;color:white;border-color:#007b91}.physical-boxes button{font-size:14px;padding:5px 8px}#active-category{font-size:16px} @media(min-width:1500px){.box-scene,.box-scene:has(.dozen){height:310px}} @media(max-width:900px){.category-links{grid-template-columns:repeat(3,minmax(0,1fr))}.category-links button{font-size:14px;padding:7px 6px}.case-controls{gap:8px}.case-controls>span{white-space:normal;max-width:80px}.box-scene,.box-scene:has(.dozen){height:260px}} @media(max-width:650px){header .brand img{width:82px!important;height:82px!important}body.ordering header{height:92px}body.ordering .brand img{width:82px!important;height:82px!important}body.ordering .demo{height:25px}#order-view{height:calc(100svh - 117px);min-height:670px}.category-links{grid-template-columns:repeat(3,minmax(0,1fr));max-height:none;overflow:visible;gap:4px;padding:3px}.category-links button{font-size:14px;min-height:40px;padding:5px 3px}.case-controls{padding-bottom:5px}#order-view .layout{grid-template-rows:minmax(160px,1fr) 285px}.box-panel{display:grid;grid-template-columns:43% minmax(0,1fr);grid-template-rows:auto auto auto auto auto auto;align-content:start;align-items:start;gap:5px 9px;padding:7px;overflow:auto}.box-scene,.box-scene:has(.dozen){grid-column:1;grid-row:1/6;height:210px;width:100%;padding:0}.box-heading{grid-column:2;grid-row:1;display:block}.box-heading h2{font-size:20px}#active-category{font-size:14px}.physical-boxes{grid-column:2;grid-row:2}.physical-boxes button{font-size:12px;padding:3px 5px}.progress{grid-column:2;grid-row:3;align-self:auto;display:flex;flex-wrap:wrap;font-size:14px;margin:0}.clear{font-size:12px}.box-panel .status{grid-column:2;grid-row:4;font-size:14px;margin:0;min-height:0}.box-panel .status.error{font-size:16px;padding:8px;margin:0;line-height:1.35;border-left-width:4px}.box-panel:has(.separate:not([hidden])) .status{margin:0}.separate{grid-column:2;grid-row:5;align-self:auto;margin:0;font-size:14px;padding:7px}.review{grid-column:2;grid-row:6;font-size:14px;margin:0;padding:7px}.box-list{grid-column:1/3;grid-row:7;display:flex;flex-wrap:nowrap;max-height:none;overflow:auto;margin:2px 0;gap:7px;white-space:normal}.box-list button{width:auto;flex-shrink:0;max-width:220px;font-size:14px;padding:7px 9px}.box-lid{top:5px;height:37px}.box-lid img{height:37px;width:37px}.box-grid .remove{width:19px;height:19px;font-size:15px;right:0;top:0}.box-grid .slot.filled{transform:scale(1.13)}.slot .flavor-label{font-size:10px}} /* Quiet, concise guidance and a clear made-to-order brand signature. */ .brand-group{display:flex;align-items:center;gap:17px;min-width:0}.brand-note{font-size:16px;font-weight:600;color:#007b91;white-space:nowrap}.case-controls{width:100%}.box-panel .status.error{font-size:16px;line-height:1.4;font-weight:600;color:#775332;background:#fff8ec;border:1px solid #e2caa5;border-left:3px solid #ceaa76;border-radius:8px;padding:8px 10px;margin:6px 0} @media(max-width:650px){.brand-group{gap:8px}.brand-note{font-size:13px;max-width:65px;white-space:normal;line-height:1.3}.box-panel .status.error{font-size:14px;font-weight:600;padding:7px 8px;margin:0;border-left-width:3px}header{gap:8px}nav{gap:9px}nav .cta{padding:8px 11px}} .box-toggle{display:none} @media(max-width:650px){ html{scroll-padding-bottom:270px}body{overflow-x:hidden}header{padding:6px 12px;gap:8px;min-height:88px}header .brand img,body.ordering .brand img{width:76px!important;height:76px!important}body.ordering header{height:88px}.brand-group{gap:7px}.brand-note{font-size:13px;max-width:60px}nav{gap:9px}nav a[href="#home"]{display:none}nav a{min-height:44px;display:flex;align-items:center;font-size:14px}nav .cta{min-height:44px;padding:9px 13px;font-size:14px}body.ordering .demo{height:auto;font-size:12px;line-height:1.4;padding:5px 12px} body.ordering{padding-bottom:calc(var(--box-dock-height,245px) + 12px)}#order-view{display:block;height:auto;min-height:0;padding:0 10px 18px}#order-view .intro{padding:9px 2px 8px;display:block}#order-view h1{font-size:24px;margin-bottom:3px}#order-view .intro p{font-size:14px;line-height:1.4}.order-controls .sizes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;padding:3px;margin-bottom:7px}.sizes button{font-size:13px;line-height:1.25;padding:8px 3px;min-height:54px;overflow-wrap:normal}.sizes small{font-size:12px;margin-top:4px}.category-links{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;padding:4px;margin-bottom:7px}.category-links button{font-size:14px;min-height:48px;padding:7px 4px}.case-controls{padding:0} #order-view .layout{display:block;padding:0;min-height:0}.case{display:block}.case-window{height:600px;min-height:0;background-size:200% 100%;background-position:left center;border:1px solid #9dabae;border-radius:12px 12px 0 0;overflow:hidden}.catalog{left:8%;right:6%;top:14.5%;height:70.5%;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:0 17px}.product{padding:0 2px;min-width:0}.product .photo{height:calc(100% - 83px);min-height:0;cursor:pointer;touch-action:manipulation}.product h3{height:36px;min-height:36px;font-size:14px;line-height:1.2;margin:0 0 3px;padding:3px;max-width:100%}.product .add{font-size:15px;min-height:44px;width:90%;padding:8px 12px}.photo .flavor-label{font-size:14px;max-width:none;width:94%;height:92%;padding:4px}.stock-piece{touch-action:pan-y}.case-pages{height:auto;min-height:52px;padding:5px 0 0;gap:6px;font-size:13px}.case-pages button{min-height:44px;padding:9px 12px;font-size:14px} .box-panel{position:fixed;z-index:20;left:8px;right:8px;bottom:0;display:grid;grid-template-columns:42% minmax(0,1fr);grid-template-rows:45px 44px 44px 44px;align-content:start;align-items:center;gap:3px 9px;padding:8px 9px calc(8px + env(safe-area-inset-bottom,0px));max-height:calc(100svh - 105px);overflow:auto;overscroll-behavior:contain;border:1px solid #b8d7d7;border-radius:16px 16px 0 0;background:#fff;box-shadow:0 -6px 25px #183e4326;margin:0}.box-heading{grid-column:2;grid-row:1;display:flex;align-items:center;justify-content:space-between;gap:5px;margin:0}.box-heading h2{font-size:18px;margin:0}#active-category{font-size:12px;line-height:1.2}.box-toggle{display:block;border:1px solid #9bbec1;border-radius:8px;background:#effbf6;color:#007b91;font-size:13px;font-weight:bold;line-height:1.2;min-height:44px;padding:5px 7px;max-width:68px;flex-shrink:0}.box-scene,.box-scene:has(.dozen){grid-column:1;grid-row:1/5;width:100%;height:160px;margin:0;padding:0;align-self:center}.box-lid{height:30px;top:4px}.box-lid img{width:30px;height:30px}.box-grid .remove{display:none}.progress{grid-column:2;grid-row:2;font-size:14px;display:flex;flex-wrap:nowrap;justify-content:space-between;gap:4px;margin:0}.clear{min-height:44px;font-size:12px;padding:0}.physical-boxes{grid-column:1/3;grid-row:5;gap:5px;margin:0}.physical-boxes:empty{display:none}.physical-boxes button{min-height:44px;font-size:14px;padding:7px 10px}.box-panel .status{grid-column:2;grid-row:3;font-size:13px;line-height:1.3;margin:0;min-height:0}.box-panel .status.error{grid-column:1/3;grid-row:6;font-size:14px;line-height:1.35;padding:7px 9px;margin:0;font-weight:600}.separate{grid-column:1/3;grid-row:7;font-size:14px;min-height:44px;padding:8px;margin:0}.review{grid-column:2;grid-row:4;font-size:14px;min-height:44px;margin:0;padding:8px}.box-list{grid-column:1/3;grid-row:8;display:flex;flex-wrap:nowrap;white-space:normal;overflow-x:auto;max-height:none;margin:2px 0 0;gap:6px}.box-list:empty{display:none}.box-list button{flex-shrink:0;max-width:210px;width:auto;min-height:44px;padding:7px 9px;font-size:14px;line-height:1.2}.box-panel.expanded{display:flex;flex-direction:column;align-items:stretch;gap:7px;padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px));max-height:85svh}.expanded .box-heading{display:flex;gap:12px}.expanded .box-toggle{max-width:none;min-width:110px}.expanded .box-heading h2{font-size:24px}.expanded #active-category{font-size:16px}.expanded .box-scene,.expanded .box-scene:has(.dozen){height:280px;min-height:280px;width:100%;flex-shrink:0}.expanded .box-lid{height:46px;top:7px}.expanded .box-lid img{width:46px;height:46px}.expanded .box-grid .remove{display:block;min-width:44px;min-height:44px;width:44px;height:44px;font-size:22px;right:-3px;top:-3px}.expanded .progress{font-size:16px}.expanded .clear{min-height:44px;font-size:14px;padding:5px}.expanded .status,.expanded .status.error{font-size:14px}.expanded .box-list{flex-shrink:0}.expanded .review,.expanded .separate{flex-shrink:0}.home-hero{padding:24px 18px}.home-copy p,.home-story p{font-size:17px}.home-copy .cta,.home-menu .cta{min-height:48px;padding:12px 24px}dialog{padding:22px;max-height:85svh}dialog button{min-height:44px}.slot .flavor-label{font-size:11px}.expanded .slot .flavor-label{font-size:12px} } @media(max-width:360px){nav .cta{padding:9px 10px}nav{gap:6px}.brand-note{max-width:52px;font-size:12px}.category-links button{font-size:13px}.catalog{gap:0 11px}.box-panel{grid-template-columns:40% minmax(0,1fr);column-gap:6px}.box-toggle{font-size:12px;max-width:61px}.case-pages{font-size:12px}.case-pages button{padding:9px 10px}} .phone-instructions{display:none}@media(max-width:650px){.desktop-instructions{display:none}.phone-instructions{display:inline}} /* Phone menu: real photos and a slim box bar; desktop case stays intact. */ .phone-cart,.phone-notice{display:none}.picked{display:none}#box-sheet{padding:0} @media(max-width:650px){ body.ordering{padding-bottom:calc(82px + env(safe-area-inset-bottom,0px))}html{scroll-padding-bottom:90px}#order-view{background:#f0f8f7;padding:0 12px 18px}#order-view .intro{padding:13px 2px 10px}#order-view h1{font-size:28px;letter-spacing:-.6px}.phone-instructions{font-size:14px;color:#42575c}.order-controls .sizes{border:1px solid #bdced0;border-radius:15px;background:white;gap:4px;margin-bottom:10px;padding:4px}.sizes button{border-radius:11px;min-height:60px;font-size:13px;font-weight:700;padding:7px 3px}.sizes small{font-size:12px;line-height:1.25}.category-links{border:0;background:transparent;padding:0;gap:6px;margin-bottom:14px}.category-links button{border:1px solid #c5d9d6;background:white;min-height:49px;border-radius:11px;font-size:14px;line-height:1.2;padding:8px 4px}.category-links button[aria-pressed=true]{border:1px solid #007b91;background:#007b91;color:white}.phone-notice:not([hidden]){display:block;background:#fff8ec;border:1px solid #e2caa5;border-radius:12px;padding:10px 12px;margin:0 0 12px}.phone-notice p{font-size:14px;line-height:1.4;color:#775332;margin:0}.phone-notice .separate{display:block;margin:8px 0 0;background:white;min-height:46px;border-radius:9px;font-size:14px}.phone-notice .separate[hidden]{display:none} .case-window{height:auto;min-height:0;display:block;background:none;border:0;border-radius:0;box-shadow:none;padding:0;overflow:visible}.catalog{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:auto;width:100%;height:auto;gap:12px;left:auto;right:auto;top:auto}.product{display:flex;flex-direction:column;align-items:stretch;justify-content:start;align-self:stretch;background:white;border:1px solid #d4e4df;border-radius:18px;padding:9px;box-shadow:0 4px 12px #193f4608;gap:0;min-width:0}.product .photo{position:relative;width:100%;height:auto!important;aspect-ratio:1;min-height:0;display:block;padding:0;background:radial-gradient(ellipse at center,#e1f3ee 0,#f3faf7 60%,#fff 85%)!important;border:0;border-radius:13px;overflow:visible;cursor:pointer;filter:none;touch-action:manipulation}.donut-display{display:block;position:absolute;inset:6px;width:auto;height:auto;padding:0;overflow:visible}.photo .stock-piece{display:none!important}.photo .stock-piece:first-child{display:block!important;left:0;top:0;width:100%;height:100%;background-size:contain;background-position:center;transform:none!important;filter:drop-shadow(0 5px 3px #4b2c222c);cursor:pointer}.photo .flavor-label{display:flex;height:100%;width:100%;max-width:none;align-items:center;justify-content:center;border:0;background:#eff8f5;font:bold 17px/1.25 Georgia,serif;color:#244b44;border-radius:13px;padding:10px}.product h3{display:flex;align-items:center;justify-content:start;color:#152a31;background:none;border:0;border-radius:0;box-shadow:none;min-height:46px;height:auto;font:700 15px/1.3 Arial,sans-serif;text-align:left;padding:8px 2px;margin:0;max-width:none}.product .add{position:static;min-height:46px;width:100%;border:0;border-radius:11px;background:#007b91;box-shadow:none;color:white;font-size:15px;padding:10px;margin-top:auto}.picked:not([hidden]){position:absolute;right:0;top:0;z-index:4;display:block;background:#152a31;color:white;border-radius:8px;font-size:12px;font-weight:bold;padding:4px 6px;pointer-events:none}.case-pages{margin-top:8px;min-height:54px;font-size:13px;padding:4px 0 0;gap:7px}.case-pages button{border-radius:11px;min-height:46px;background:white;font-size:14px;padding:8px 12px}.box-panel{display:none!important} body.ordering .phone-cart{position:fixed;z-index:15;display:block;left:0;right:0;bottom:0;padding:9px 12px calc(9px + env(safe-area-inset-bottom,0px));background:#fff;border-top:1px solid #bcd7d6;box-shadow:0 -3px 14px #183e4312}.phone-cart>button{display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;background:#152a31;color:white;border:0;border-radius:14px;min-height:58px;padding:8px 14px;text-align:left}.phone-cart strong{display:block;font-size:16px;line-height:1.3}.phone-cart small{display:block;font-size:12px;color:#c5e7de;line-height:1.4;margin-top:2px}.cart-action{font-size:15px;font-weight:bold;white-space:nowrap;color:#b9edcd;border-left:1px solid #ffffff33;padding-left:15px} #box-sheet{position:fixed;inset:auto 0 0;width:100%;max-width:600px;margin:0 auto;max-height:86svh;overflow-y:auto;overscroll-behavior:contain;border:0;border-radius:22px 22px 0 0;background:#f7fcfa;padding:14px 14px calc(14px + env(safe-area-inset-bottom,0px));box-shadow:0 -10px 45px #0003}#box-sheet::backdrop{background:#102b35aa}#box-sheet[open] .box-panel{display:flex!important;position:static;max-height:none;overflow:visible;width:100%;padding:0;margin:0;background:transparent;border:0;border-radius:0;box-shadow:none;flex-direction:column;align-items:stretch;gap:9px}#box-sheet .box-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}#box-sheet .box-heading h2{font-size:26px}#box-sheet #active-category{font-size:15px}#box-sheet .box-toggle{display:block;min-height:46px;min-width:115px;font-size:14px;padding:8px 10px;background:white;border:1px solid #94bfc0;border-radius:11px}#box-sheet .box-scene,#box-sheet .box-scene:has(.dozen){height:285px;min-height:285px;width:100%;flex-shrink:0}#box-sheet .box-grid .remove{display:block;min-width:44px;min-height:44px;width:44px;height:44px;font-size:22px}#box-sheet .progress{font-size:16px}#box-sheet .clear{min-height:44px;font-size:14px}#box-sheet .status,#box-sheet .status.error{font-size:14px}#box-sheet .separate{min-height:46px;font-size:14px}#box-sheet .review{min-height:48px;font-size:16px}#box-sheet .physical-boxes button,#box-sheet .box-list button{min-height:46px;font-size:14px}#box-sheet .box-list{max-height:none;overflow-x:auto} } @media(max-width:360px){#order-view{padding-left:9px;padding-right:9px}.catalog{gap:9px}.product{padding:7px}.product h3{font-size:14px}.category-links button{font-size:13px}.phone-cart>button{padding:8px 11px}.phone-cart small{font-size:12px}#box-sheet .box-scene,#box-sheet .box-scene:has(.dozen){height:255px;min-height:255px}} /* Discreet remove marks; generous invisible touch area. */ .box-grid .remove,#box-sheet .box-grid .remove{width:24px;height:24px;min-width:24px;min-height:24px;font-size:18px;line-height:24px;padding:0;background:transparent;border:0;border-radius:0;box-shadow:none;color:#493b32;right:-3px;top:-5px;text-shadow:none;overflow:visible}.box-grid .remove::after{content:"";position:absolute;inset:-10px;background:transparent}.box-grid .remove:hover{color:#007b91;background:transparent}.box-grid .remove:focus-visible{outline:2px solid #007b91;outline-offset:3px;border-radius:3px} /* Phone case: two trays per shelf, one photo per flavor. */ @media(max-width:650px){ .case-window{position:relative;height:760px;min-height:0;display:block;padding:0;background:url('../graphics/tray-display-case.jpg') left center/200% 100% no-repeat;border:1px solid #b4b9b5;border-radius:13px 13px 0 0;overflow:hidden;box-shadow:0 7px 20px #40251818}.catalog{position:absolute;left:8%;right:6%;top:14.5%;height:70.5%;width:auto;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));grid-auto-rows:auto;gap:0 17px}.product{display:flex;align-self:stretch;align-items:center;justify-content:flex-start;background:transparent;border:0;border-radius:0;padding:0 2px;box-shadow:none;min-height:0}.product .photo{width:100%;height:calc(100% - 90px)!important;min-height:0;aspect-ratio:auto;display:block;padding:0;background:none!important;border:0;border-radius:0;overflow:visible;filter:none}.donut-display{position:absolute;inset:0;width:100%;height:100%;padding:0}.photo .stock-piece:first-child{left:0;top:-10%;width:100%;height:120%;background-size:contain;background-position:center;transform:scaleY(var(--donut-flatness,1))!important;transform-origin:center;filter:drop-shadow(0 3px 2px #3c251e60)}.photo .stock-piece:nth-child(n+2){display:none!important}.product h3{display:flex;align-items:center;justify-content:center;text-align:center;background:#211a15;color:#fffaf0;border:1px solid #796d57;border-radius:4px;font:bold italic 14px/1.2 Georgia,serif;height:42px;min-height:42px;width:100%;padding:3px 4px;margin:0 0 4px;box-shadow:0 2px 3px #24180f33;position:relative;z-index:3}.product .add{min-height:44px;width:92%;padding:8px 10px;border-radius:12px;font-size:15px;border:1px solid #81b9b3;margin:0;position:relative;z-index:3}.photo .flavor-label{height:90%;width:100%;font-size:15px;background:#fff9e8e6;color:#453629;border:1px solid #d7cba6;border-radius:9px;padding:6px}.picked:not([hidden]){top:0;right:0;font-size:12px;padding:4px 6px;z-index:4}.case-pages{margin-top:0;padding-top:6px} } @media(max-width:360px){.catalog{gap:0 12px}.product h3{font-size:14px}.case-window{height:730px}} /* Full boxes pause selection; removing a treat restores it. */ .product.unavailable .photo{filter:grayscale(1);opacity:.42;cursor:default}.product.unavailable .add{background:#d6dcda!important;color:#60706b!important;border-color:#bdc8c3!important;box-shadow:none;cursor:default}.product.unavailable .stock-piece{cursor:default}.product.unavailable h3{opacity:.7} @media(max-width:650px){.order-controls .sizes:has(button[data-size="24"][hidden]){grid-template-columns:repeat(2,minmax(0,1fr))}} .header-cart{display:none;align-items:center;gap:9px;border:1px solid #abcacb;border-radius:13px;color:#007b91;background:#effbf6;padding:10px 14px;min-height:48px;font-weight:bold;text-decoration:none}.cart-count{display:flex;align-items:center;justify-content:center;min-width:26px;height:26px;padding:0 6px;border-radius:50%;background:#152a31;color:white;font-size:14px}.ordering nav>a:not(.header-cart){display:none}.ordering nav .header-cart{display:flex}.cart-page{max-width:800px;margin:auto;padding:25px 24px 45px}.cart-back{display:inline-flex;min-height:44px;align-items:center;color:#007b91;font-weight:bold;text-decoration:none;margin-bottom:10px}.cart-summary{background:white;border:1px solid #c9e5de;border-radius:20px;padding:28px}.cart-summary h1{font-size:38px;margin:0 0 12px}.cart-warning{padding:12px 14px;background:#effbf6;border-radius:10px;line-height:1.4}.cart-warning.incomplete{background:#fff8ec;color:#775332}#summary-list{list-style:none;padding:0;margin:20px 0}#summary-list>li{padding:18px 0;border-bottom:1px solid #d7e7e1}#summary-list strong{font-size:18px}#summary-list ul{padding-left:22px;margin:10px 0;font-size:16px}.cart-box-progress{font-size:14px;color:#5c6d68;margin:4px 0 0}.cart-edit{border:1px solid #9bbec1;background:#effbf6;color:#007b91;border-radius:9px;min-height:44px;padding:8px 14px;font-weight:bold}.cart-summary .total{font-size:20px;line-height:1.6;margin-bottom:20px}.cart-summary .cta{min-height:48px;margin-bottom:18px}.cart-summary .note{font-size:14px}.cart .phone-cart{display:none!important}body.cart{padding-bottom:0} @media(max-width:650px){.ordering nav .header-cart{font-size:15px;padding:8px 11px;gap:7px;min-height:46px}.header-cart svg{width:21px;height:21px}.cart-page{padding:13px 12px 30px}.cart-summary{padding:20px 16px;border-radius:17px}.cart-summary h1{font-size:30px}#summary-list strong{font-size:16px}.cart-summary .total{font-size:18px}.cart-summary .cta{width:100%;text-align:center}} .home-copy .delivery-line{font-size:23px;font-weight:bold;color:#007b91;margin:0 0 16px}.home-copy .home-story{max-width:none;text-align:left;padding:0;margin:0 0 20px}.home-copy .home-story h2{font-size:28px;margin:5px 0 12px}.home-copy .home-story p{font-size:16px;line-height:1.55;margin:0 0 12px}.home-copy .home-story .signature{font-size:15px;margin-bottom:0}.menu-options{list-style:none;padding:0;margin:0;text-align:center}.menu-options li{font-size:17px;line-height:1.6;margin:4px 0}.menu-grid article{text-align:center}.kitchen-note{max-width:800px;margin:32px auto;padding:28px 30px;background:white;border:1px solid #c9e5de;border-radius:20px;text-align:center}.kitchen-note h2{font:bold 28px/1.3 Georgia,serif;color:#007b91;margin:0 0 18px}.kitchen-note p{font-size:17px;line-height:1.65;margin:0 0 18px}.prep-times{list-style:none;padding:0;margin:20px auto;text-align:left;max-width:330px}.prep-times li{font-size:17px;font-weight:600;line-height:1.6;margin:8px 0}.kitchen-note .kitchen-contact{margin-bottom:0}.kitchen-contact a{color:#007b91;text-decoration:none;white-space:nowrap} @media(max-width:650px){.home-copy .delivery-line{font-size:21px;margin-bottom:18px}.home-copy .home-story{padding:0;margin:0 0 20px}.home-copy .home-story h2{font-size:26px}.home-copy .home-story p{font-size:16px}.menu-options li{font-size:17px}.kitchen-note{margin:22px 14px;padding:23px 18px;border-radius:17px}.kitchen-note h2{font-size:24px}.kitchen-note p,.prep-times li{font-size:16px}.prep-times{max-width:305px}} /* Logo-led blue and green, with the menu on the home page's opening surface. */ :root{--brand-blue:#42bad4;--brand-green:#79c64a;--brand-deep-green:#008c48;--pink:#197ea7;--ink:#103642;--light:#edf9f0;--border:#c2e4d7}body{background:#fbfefe;color:var(--ink)}header{border-bottom:3px solid var(--brand-blue)}.eyebrow{color:#008447}.cta{background:#197ea7;color:white;box-shadow:0 5px 0 #79c64a;transition:background .15s}.cta:hover{background:#066985}.heading-blue{color:#197ea7}.home-hero{max-width:1280px;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);gap:30px 38px;align-items:start;padding:28px 24px 36px}.home-copy h1{font-size:clamp(36px,3.7vw,48px);line-height:1.12}.home-copy .delivery-line{color:#008447}.home-copy>.cta{margin:0 0 26px;padding:13px 30px;font-size:18px}.home-copy .home-story .eyebrow{color:#008447}.home-copy .home-story h2{color:#103642}.home-copy .signature{color:#008447}.home-hero>.home-menu{margin:0;padding:22px 22px 24px;background:linear-gradient(145deg,#e9f8fc,#f0fbea);border:2px solid #42bad4;border-top:7px solid #79c64a;border-radius:22px;box-shadow:0 9px 26px #13667b12;text-align:center}.home-menu h2{font-size:36px;color:#197ea7;margin:5px 0 16px}.home-menu .eyebrow{font-size:12px;letter-spacing:1.4px}.home-menu .menu-grid{display:grid;grid-template-columns:1fr;gap:10px;max-width:none;margin:0 0 15px}.home-menu .menu-grid article{padding:13px 15px;border:1px solid #c2e4d7;border-radius:13px;background:white}.home-menu .menu-grid h3{font-size:24px;margin:0 0 8px;color:#008447}.home-menu .menu-grid p{font-size:16px;margin:0;line-height:1.5}.home-menu .menu-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 12px}.home-menu .menu-options li{font-size:16px;line-height:1.4;margin:2px 0}.home-menu .menu-price{font-size:20px;color:#103642;margin:12px 0 14px}.home-menu .cta{min-height:48px;padding:11px 28px;font-size:17px}.home-hero>.hero-photo{grid-column:1/-1;width:100%;height:260px;object-fit:cover;border-radius:20px;box-shadow:0 7px 0 #79c64a;margin:0}.kitchen-note{border-color:#a9ddbe;border-top:5px solid #79c64a;background:#fff}.kitchen-note h2,.kitchen-contact a{color:#197ea7}.prep-times li{color:#176542}footer{background:#edf9f0;border-top:1px solid #c2e4d7}footer a{color:#197ea7} @media(max-width:650px){.home-hero{display:grid;grid-template-columns:1fr;gap:17px;padding:23px 16px 26px}.home-copy{display:contents}.home-copy>.eyebrow{order:1;margin:0}.home-copy>h1{order:2;font-size:38px;margin:0;line-height:1.12}.home-copy>.delivery-line{order:3;font-size:21px;margin:0}.home-copy>.cta{order:4;justify-self:start;margin:0 0 3px;min-height:50px;font-size:17px;padding:12px 28px}.home-hero>.home-menu{order:5;padding:19px 15px;border-radius:18px}.home-copy>.home-story{order:6;margin:9px 2px 0}.home-hero>.hero-photo{order:7;grid-column:auto;height:240px}.home-menu h2{font-size:32px}.home-menu .menu-grid article{padding:13px 10px}.home-menu .menu-options{gap:4px 8px}.home-menu .menu-options li{font-size:15px}.home-menu .menu-price{font-size:18px}.home-copy .home-story h2{font-size:27px}.kitchen-note{margin-top:12px}} /* Bigger brand and calls to order, with a centered story and colorful menu. */ header .brand img{width:164px!important;height:164px!important}header{padding:8px 3%}.delivery-title{font:bold 27px/1.2 Georgia,serif;color:#008447}.home-copy .home-story{text-align:center}.home-copy .home-story p{margin-left:auto;margin-right:auto}.home-copy>.cta{font-size:22px;min-height:62px;padding:16px 42px;border-radius:17px;margin-top:12px;margin-bottom:28px;box-shadow:0 6px 0 #79c64a}.home-menu>.cta{font-size:21px;min-height:58px;padding:14px 36px;border-radius:15px;box-shadow:0 6px 0 #79c64a}.home-hero>.home-menu{background:linear-gradient(140deg,#c9f1fb,#e2f5c6);border-color:#42bad4;border-top-color:#79c64a}.home-menu .menu-grid article{border-width:2px;padding:0 0 13px;overflow:hidden}.home-menu .menu-grid h3{padding:10px 12px;margin:0 0 11px}.home-menu .menu-grid article:nth-child(1){background:#e1f6fd;border-color:#42bad4}.home-menu .menu-grid article:nth-child(1) h3{background:#42bad4;color:#073849}.home-menu .menu-grid article:nth-child(2){background:#edf9dc;border-color:#79c64a}.home-menu .menu-grid article:nth-child(2) h3{background:#79c64a;color:#163d20}.home-menu .menu-grid article:nth-child(3){background:#e0f6e9;border-color:#008c48}.home-menu .menu-grid article:nth-child(3) h3{background:#008c48;color:white}.home-menu .menu-grid article>p,.home-menu .menu-options{padding-left:12px;padding-right:12px} @media(min-width:651px){body.ordering header{height:152px}body.ordering .brand img{width:140px!important;height:140px!important}#order-view{height:calc(100svh - 178px);min-height:530px}} @media(max-width:650px){header .brand img,body.ordering .brand img{width:92px!important;height:92px!important}header,body.ordering header{min-height:104px;height:104px}.home-copy>h1{font-size:36px}.delivery-title{font-size:25px}.home-copy>.cta{font-size:20px;min-height:58px;padding:15px 35px;margin-top:0;margin-bottom:5px;justify-self:center}.home-menu>.cta{font-size:20px;min-height:56px;padding:13px 32px}.home-copy .home-story{text-align:center}.home-menu .menu-grid article{padding:0 0 13px}.home-menu .menu-grid h3{font-size:24px;padding:10px;margin-bottom:9px}#order-view{height:auto;min-height:0}} /* Clean centered header; ordering keeps its cart within reach. */ header{position:relative;justify-content:center} header .brand-group{justify-content:center} header nav{position:absolute;right:3%;top:50%;transform:translateY(-50%)} .home-copy>h1{margin-bottom:26px} @media(max-width:650px){header nav{right:12px}.ordering nav .header-cart{padding:8px;gap:5px}.ordering .header-cart>span:first-of-type{display:none}.home-copy>h1{margin-bottom:8px}} /* Reveal two rows of donuts instead of the narrow photo strip. */ .home-hero>.hero-photo{height:auto;aspect-ratio:2 / 1;max-width:1000px;justify-self:center;object-fit:cover;object-position:center top} /* Prominent ordering action below the logo, before homepage content. */ .delivery-lime{color:#79c64a} .home-order-action{grid-column:1 / -1;justify-self:center;text-align:center;padding:0 0 6px} .home-order-action>.cta{font-size:22px;min-height:62px;padding:16px 42px;border-radius:17px;box-shadow:0 6px 0 #79c64a} @media(max-width:650px){.home-order-action{order:0;grid-column:auto;margin-top:0}.home-order-action>.cta{font-size:20px;min-height:58px;padding:15px 35px}.home-hero>.hero-photo{order:8}} /* Centered contact information and a larger main ordering action. */ header .brand-group{flex-direction:column;gap:4px} .brand-phone{font-size:20px;line-height:1.4;font-weight:700;color:#197ea7;text-decoration:none;text-align:center} .brand-phone:hover{text-decoration:underline} header{height:auto} body.ordering header{height:184px} body.ordering #order-view{height:calc(100svh - 210px)} .home-menu>.menu-price{margin:8px 0 20px;font-size:18px;font-weight:700;color:#197ea7} .home-order-action{width:100%;max-width:360px} .home-order-action>.cta{display:flex;align-items:center;justify-content:center;width:100%;min-height:96px;padding:22px 38px;font-size:30px;letter-spacing:1px;border-radius:20px} @media(max-width:650px){header,body.ordering header{height:140px;min-height:140px}.brand-phone{font-size:18px}.home-order-action{max-width:320px}.home-order-action>.cta{min-height:88px;padding:18px 24px;font-size:28px}.home-menu>.menu-price{font-size:17px}body.ordering #order-view{height:auto}} /* A distinct, centered story bubble and a lime frame for ordering. */ .home-copy .home-story{position:relative;isolation:isolate;background:linear-gradient(155deg,#ffffff,#effaff);border:2px solid #b5e5ef;border-radius:72px 88px 76px 86px;padding:36px 32px 34px;margin:12px 0 32px;box-shadow:0 9px 24px #197ea716;text-align:center} .home-copy .home-story::before,.home-copy .home-story::after{content:"";position:absolute;background:#f4fcff;border:2px solid #b5e5ef;border-radius:50%;pointer-events:none} .home-copy .home-story::before{width:24px;height:24px;left:70px;bottom:-22px} .home-copy .home-story::after{width:12px;height:12px;left:52px;bottom:-37px} .home-copy .home-story p{max-width:450px} .home-order-action>.cta{border:6px solid #79c64a;box-shadow:0 6px 0 #63ab38,0 0 0 3px #dcf4bf} @media(max-width:650px){.home-copy .home-story{padding:30px 23px;margin:12px 0 34px;border-radius:54px 66px 56px 64px}.home-order-action>.cta{border-width:6px}.home-copy .home-story::before{left:58px}.home-copy .home-story::after{left:42px}} /* A bakery menu illustrated with the original uploaded photographs. */ .home-hero>.photo-menu{background:white;border:2px solid #42bad4;border-top:7px solid #79c64a;border-radius:12px;padding:24px 22px 20px;box-shadow:0 7px 0 #e0f1f4} .photo-menu>h2{font-size:38px;color:#197ea7;margin:0 0 6px} .home-menu.photo-menu>.menu-price{padding-bottom:17px;border-bottom:2px solid #79c64a;margin:0 0 12px;font-size:17px} .home-menu.photo-menu .menu-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:0} .home-menu.photo-menu .menu-grid article{border:0;border-radius:0;background:transparent;padding:0;overflow:visible;min-width:0} .home-menu.photo-menu .menu-grid article h3{background:none;color:#197ea7;padding:0;margin:8px 0 14px;font-size:27px} .home-menu.photo-menu .menu-donuts{grid-column:1/-1;border-bottom:1px dashed #70b8c8;padding-bottom:18px} .menu-photo-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:0 0 16px} .menu-photo-strip img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;object-position:50% 55%;border-radius:8px} .home-menu.photo-menu .menu-options{padding:0;gap:7px 12px} .home-menu.photo-menu .menu-options li{font-size:16px;line-height:1.4;margin:0;color:#163f49} .home-menu.photo-menu .menu-rolls{padding-right:16px;border-right:1px solid #b5dfe7;display:flex;flex-direction:column;justify-content:center} .home-menu.photo-menu .menu-rolls h3{color:#008447} .home-menu.photo-menu .menu-grid article>p{padding:0;font-size:16px;color:#42575c} .menu-muffin-photo{width:78px;height:78px;object-fit:cover;object-position:center;border-radius:50%;display:block;margin:0 auto 10px} .home-menu.photo-menu .menu-muffins .menu-options{grid-template-columns:1fr;gap:5px} @media(max-width:650px){.home-hero>.photo-menu{padding:20px 15px}.photo-menu>h2{font-size:34px}.home-menu.photo-menu .menu-grid{gap:17px 12px}.menu-photo-strip{gap:6px}.home-menu.photo-menu .menu-grid article h3{font-size:23px}.home-menu.photo-menu .menu-options li{font-size:16px}.home-menu.photo-menu>.menu-price{font-size:16px}.home-menu.photo-menu .menu-rolls{padding-right:12px}} /* Tighter photo windows keep the pastries in focus. */ .menu-photo-crop{width:100%;max-width:100px;aspect-ratio:1;overflow:hidden;border-radius:50%;margin:0 auto;background:#f2faf5} @media(max-width:650px){.menu-photo-crop{max-width:95px}} .menu-photo-crop img{height:100%;width:100%;aspect-ratio:auto;border-radius:0;object-fit:cover;object-position:50% 55%;transform:scale(1.28)} .home-menu.photo-menu .menu-rolls{justify-content:flex-start} .menu-roll-photo{width:100%;max-width:160px;height:118px;object-fit:contain;display:block;margin:0 auto 12px} .menu-muffin-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .menu-muffin-pair figure{margin:0;min-width:0} .menu-muffin-pair img{width:100%;height:118px;object-fit:cover;object-position:center;border-radius:8px;display:block;margin:0 0 12px} .menu-muffin-pair img.chip-muffin{object-fit:contain;background:#f2faf5} .menu-muffin-pair figcaption{font-size:16px;line-height:1.4;color:#163f49;text-align:center} @media(max-width:650px){.menu-muffin-pair{gap:5px}.menu-muffin-pair img{height:95px}.menu-roll-photo{height:95px}} /* Keep the circular muffin portraits. */ .menu-muffin-pair img{width:100%;max-width:100px;height:auto;aspect-ratio:1;border-radius:50%;margin:0 auto 12px} @media(max-width:650px){.menu-muffin-pair img{height:auto;max-width:95px}} /* A short box-closing and delivery handoff between picking and review. */ #delivery-handoff{width:min(760px,100vw - 24px);max-width:760px;padding:24px 0 20px;overflow:hidden;border:2px solid #42bad4;border-radius:22px;background:#f8fcfc;text-align:center;box-shadow:0 15px 50px #183e4933} #delivery-handoff::backdrop{background:#15343bcc;backdrop-filter:blur(4px)} #delivery-handoff h2{font:700 26px Georgia,serif;color:#197ea7;margin:0 20px} .handoff-stage{height:280px;position:relative;overflow:hidden} .handoff-parcel{position:absolute;left:calc(50% - 90px);top:76px;width:180px;height:140px;z-index:2;perspective:500px} .handoff-snapshot .box-scene{height:160px!important;min-height:160px!important;width:180px!important;padding:0!important;margin:0!important;position:relative} .handoff-snapshot .remove{display:none!important} .handoff-snapshot .box-lid span{display:none} .handoff-snapshot .box-lid img{height:28px;width:28px} .handoff-closed-box{position:absolute;left:6px;right:6px;top:56px;height:80px;border:3px solid #c9af8d;border-radius:5px;background:#e6d1b2;box-shadow:0 6px 5px #543e2425;opacity:0} .handoff-lid{position:absolute;inset:-3px -3px 13px;background:#fff5e5;border:3px solid #d4bb99;border-radius:5px;transform-origin:center top;backface-visibility:hidden;display:flex;align-items:center;justify-content:center} .handoff-lid img{height:56px;width:56px;object-fit:contain;mix-blend-mode:multiply} .handoff-runner{position:absolute;left:calc(50% - 150px);top:80px;width:160px;height:180px;z-index:1;transform:translateX(-100vw)} .handoff-runner img{width:100%;height:100%;object-fit:contain} #handoff-skip{border:1px solid #91bfc7;color:#197ea7;background:white;border-radius:20px;padding:9px 20px;min-height:44px;font-size:16px} @media(max-width:650px){.handoff-stage{height:260px}#delivery-handoff h2{font-size:23px}} /* Branded lid with a clear pastry window. */ .handoff-lid{justify-content:flex-start;padding:5px;gap:5px} .handoff-lid img.handoff-box-logo{width:38px;height:48px;flex-shrink:0;object-fit:contain;mix-blend-mode:multiply} .handoff-window{position:relative;align-self:stretch;flex:1;min-width:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:0;background:#fffdf4;border:2px solid #c9af8d;border-radius:5px;overflow:hidden;box-shadow:inset 0 1px 4px #83684b28} .handoff-window.dozen{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr))} .handoff-window-treat{min-width:0;min-height:0;background-position:center;background-repeat:no-repeat;background-size:contain} .handoff-window::after{content:"";position:absolute;inset:0;background:linear-gradient(125deg,transparent 22%,#ffffff80 23%,#ffffff25 38%,transparent 39%,transparent 62%,#ffffff45 63%,transparent 75%);pointer-events:none} /* The parcel stays proportionate and below the runner's face. */ .handoff-parcel{transform:scale(.65);transform-origin:center center} /* Show the full bakery box closing; shrink only when it is picked up. */ .handoff-parcel{transform:scale(1)} /* Real white bakery packaging, with the customer's treats under its window. */ .handoff-closed-box{left:0;right:0;top:45px;height:110px;border:0;background:transparent;box-shadow:none} .handoff-lid{inset:0;border:0;border-radius:0;padding:0;display:block;background:url('../graphics/window-donut-box.png') center / 100% 100% no-repeat} .handoff-lid img.handoff-box-logo{position:absolute;left:42%;top:66%;height:18%;width:16%;object-fit:contain;mix-blend-mode:multiply} .handoff-window{position:absolute;left:14%;right:14%;top:23%;bottom:45%;border:0;border-radius:0;background:transparent;clip-path:polygon(6% 0,94% 0,100% 100%,0 100%);box-shadow:none;padding:2px 3px} .handoff-window-treat{transform:scale(.97);filter:drop-shadow(0 1px 1px #6b53353b)} /* Keep the box base steady while its lid folds shut. */ .handoff-closed-box{background:url('../graphics/window-donut-box.png') center / 100% 100% no-repeat;filter:drop-shadow(0 4px 3px #263a3b24)} .handoff-lid{clip-path:inset(0 0 30% 0);transform-origin:50% 16%;backface-visibility:hidden} .handoff-closed-box>img.handoff-box-logo{position:absolute;left:42%;top:66%;height:18%;width:16%;object-fit:contain;mix-blend-mode:multiply} .handoff-window{background:#eee8dc40;box-shadow:inset 0 1px 3px #4d494a28} .handoff-window-treat{background-size:100% 125%;transform:scale(.97);filter:drop-shadow(0 1px 1px #46332040)} .handoff-window::after{background:linear-gradient(125deg,transparent 20%,#ffffff55 21%,#ffffff15 38%,transparent 39%,transparent 68%,#ffffff30 69%,transparent 78%)} /* A small printed logo stays anchored within the front cardboard panel. */ .handoff-closed-box>img.handoff-box-logo{left:45%;top:69%;width:10%;height:12%;max-width:none;max-height:none;object-fit:contain;pointer-events:none;transform:none} .handoff-snapshot .box-lid img{width:18px;height:18px} /* A brief first-visit greeting before the homepage. */ #welcome-screen{display:none} html.welcome-pending{overflow:hidden} .welcome-pending body>*:not(#welcome-screen){visibility:hidden!important} .welcome-pending #welcome-screen{position:fixed;inset:0;z-index:2000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;background:#fff8fb;padding:24px;transition:opacity .25s} #welcome-screen.welcome-leaving{opacity:0;pointer-events:none} .welcome-art{width:min(360px,82vw,48svh);flex-shrink:0;aspect-ratio:1;height:auto;background:url('../graphics/welcome-cartoon-v1.webp') 0 50% / 300% 100% no-repeat;opacity:0} .welcome-ready .welcome-art{opacity:1;animation:welcome-wave 1.4s steps(1,end) infinite} @keyframes welcome-wave{0%,100%{background-position:0% 50%}50%{background-position:50% 50%}} #welcome-skip{background:white;color:#197ea7;border:1px solid #badfe6;border-radius:24px;padding:10px 22px;min-height:44px;font-size:16px} .welcome-screen-title{margin:0;max-width:620px;text-align:center;font-size:clamp(24px,4.5vw,38px);font-weight:800;line-height:1.2;letter-spacing:-.025em}.welcome-screen-title span{display:block}.welcome-hello{color:#197ea7;margin-bottom:8px}.welcome-fresh{color:#79c64a} @media(prefers-reduced-motion:reduce){.welcome-art{animation:none!important}#welcome-screen{transition:none!important}} /* Delivery checkout and family celebration. */ .cart-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.cart-actions .cta:disabled{opacity:.45;cursor:not-allowed} .checkout-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}.checkout-fields label,.checkout-extra{display:flex;flex-direction:column;gap:7px;font-weight:700;color:#163f49}.checkout-fields .wide{grid-column:1/-1} .checkout-fields input,.checkout-extra textarea{width:100%;min-width:0;min-height:48px;border:1px solid #aacdd4;border-radius:12px;padding:12px;font:inherit;background:white;color:#163f49}.checkout-fields input:focus,.checkout-extra textarea:focus{outline:3px solid #79c64a;outline-offset:2px} #checkout-form h2{font-size:25px;color:#197ea7}.checkout-total{font-weight:800;font-size:21px;color:#197ea7;line-height:1.5}.payment-options{border:0;padding:0;margin:26px 0 12px}.payment-options legend{font-size:23px;font-weight:800;margin-bottom:14px;color:#197ea7}.payment-options label{display:flex;align-items:center;gap:14px;border:2px solid #c9e4e9;border-radius:15px;padding:16px;margin:10px 0;cursor:pointer;background:white}.payment-options label:has(input:checked){border-color:#79c64a;background:#f2fbe9}.payment-options input{width:22px;height:22px;accent-color:#197ea7;flex-shrink:0}.payment-options strong,.payment-options small{display:block}.payment-options small{margin-top:4px;font-size:14px;line-height:1.4;color:#536c70}.square-note{font-size:15px;font-weight:700;color:#197ea7;text-align:center}.checkout-extra{margin:24px 0}.preview-notice{font-size:14px;line-height:1.5;background:#edf9fc;border-radius:12px;padding:12px;color:#305c68}.checkout-submit{width:100%;margin-top:8px}.checkout-error{color:#a32745;background:#fff0f3;border:1px solid #edbcc8;padding:12px;border-radius:12px} .confirmation-card{text-align:center}.confirmation-card h1{color:#197ea7}.confirmation-label{font-weight:700;color:#538e25}.confirmation-stage{position:relative;height:320px;margin:12px auto;max-width:600px;overflow:hidden}.confirm-woman,.confirm-man{position:absolute;bottom:0;width:290px;height:290px;background-image:url('../graphics/confirmation-cartoon-v2.webp');background-size:300% 100%;background-repeat:no-repeat}.confirm-woman{left:0;background-position:50% 50%}.confirm-man{right:0;background-position:100% 50%}.woo-hoo{position:absolute;right:22px;top:5px;padding:9px 17px;border-radius:22px;background:#79c64a;color:#143a24;font-size:28px;font-weight:900;transform:rotate(5deg)} .celebrating .confirm-woman{animation:confirm-pop .45s ease-out both,phone-message 1.5s steps(1,end) both}.celebrating .confirm-man{animation:confirm-pop .55s 1.8s cubic-bezier(.2,.8,.3,1.2) both}.celebrating .woo-hoo{animation:confirm-pop .4s 2.15s ease-out both} @keyframes confirm-pop{from{opacity:0;transform:translateY(35px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes phone-message{0%{background-position:0% 50%}100%{background-position:50% 50%;filter:drop-shadow(0 0 7px #87d6e633)}} #confirmation-detail,#confirmation-payment{line-height:1.6;overflow-wrap:anywhere} @media(max-width:650px){.checkout-fields{gap:12px}.cart-summary{padding:22px 18px}.confirmation-stage{height:230px}.confirm-woman,.confirm-man{width:58%;height:auto;aspect-ratio:1}.confirm-woman{left:-3%}.confirm-man{right:-3%}.woo-hoo{font-size:21px;right:5px;top:0}.payment-options legend{font-size:21px}} @media(prefers-reduced-motion:reduce){.celebrating .confirm-woman,.celebrating .confirm-man,.celebrating .woo-hoo{animation:none}} /* Equal, prominent confirmation messages; celebration keeps its full space. */ .confirmation-card .confirmation-label,.confirmation-card #confirmation-title{font-size:clamp(32px,4.5vw,44px);font-weight:800;line-height:1.15;letter-spacing:-.025em} .confirmation-card .confirmation-label{margin:0 auto 20px;text-wrap:balance} .confirmation-card #confirmation-title{margin:0 0 18px} /* Align the chocolate donut within its circular photo; keep logo unframed. */ .menu-photo-crop img.menu-chocolate-photo{object-position:50% 12%;transform:translateX(5%) scale(1.28)} header .brand,header .brand img{border:0;box-shadow:none} .home-copy h1:focus{outline:none} /* Mobile tray option: three generous, overlapping pastries. */ @media(max-width:650px){ #order-view .photo .stock-piece{width:64%;height:88%;left:32%;top:40%;background-size:contain;background-position:center;transform:translate(-50%,-50%) scaleY(var(--donut-flatness,1))!important;transform-origin:center;filter:drop-shadow(0 3px 2px #3c251e60);cursor:pointer} #order-view .photo .stock-piece:nth-child(-n+3){display:block!important} #order-view .photo .stock-piece:nth-child(1){left:32%;top:40%;z-index:1} #order-view .photo .stock-piece:nth-child(2){left:68%;top:40%;z-index:1} #order-view .photo .stock-piece:nth-child(3){left:50%;top:62%;z-index:2} #order-view .photo .stock-piece:nth-child(n+4){display:none!important} } /* Mobile trays: four big overlapping pastries, with removal at the case. */ .tray-actions{display:contents}.case-remove{display:none}.case-remove[hidden]{display:none!important} @media(max-width:650px){ #order-view .photo .stock-piece{width:64%;height:88%;transform:translate(-50%,-50%) scaleY(var(--donut-flatness,1))!important} #order-view .photo .stock-piece:nth-child(-n+4){display:block!important} #order-view .photo .stock-piece:nth-child(1){left:32%;top:33%;z-index:1} #order-view .photo .stock-piece:nth-child(2){left:68%;top:33%;z-index:1} #order-view .photo .stock-piece:nth-child(3){left:32%;top:66%;z-index:2} #order-view .photo .stock-piece:nth-child(4){left:68%;top:66%;z-index:2} #order-view .photo .stock-piece:nth-child(n+5){display:none!important} #order-view .tray-actions{display:flex;align-items:stretch;gap:6px;width:100%;position:relative;z-index:3} #order-view .tray-actions .add{flex:1;width:auto;min-width:0;padding:8px 5px;font-size:14px} #order-view .case-remove{display:flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;min-height:44px;margin:0;padding:0;border:1px solid #81b9b3;border-radius:12px;background:#fff;color:#197ea7;font-size:25px;line-height:1;box-shadow:0 2px 4px #24180f22;touch-action:manipulation} } /* Visible flavor pagination above and below the case. */ #order-view .case-pages{display:flex;align-items:center;justify-content:space-between;gap:10px;height:auto;min-height:66px;padding:8px 4px;margin:0;flex-shrink:0} #order-view .case-pages-top{margin-bottom:6px} #order-view .page-information{flex:1;min-width:0;text-align:center;color:#197ea7;line-height:1.2} #order-view .page-position{display:block;font-size:25px;font-weight:800;white-space:nowrap} #order-view .page-flavors{display:block;margin-top:4px;font-size:15px;font-weight:600;color:#35585b;white-space:nowrap} #order-view .case-pages button{min-height:44px;flex-shrink:0;font-size:15px;padding:8px 13px;border-radius:11px} @media(max-width:650px){#order-view .case-pages{gap:7px;min-height:70px;padding:8px 0}#order-view .page-position{font-size:22px}#order-view .page-flavors{font-size:14px}#order-view .case-pages button{font-size:14px;padding:8px 10px}} @media(max-width:360px){#order-view .case-pages{gap:4px}#order-view .page-position{font-size:20px}#order-view .page-flavors{font-size:12px}#order-view .case-pages button{font-size:13px;padding:8px}} /* Illustrated half-dozen packaging based on the customer's real box. */ .box-scene.real-half-box{position:relative!important;background:none!important;height:auto!important;min-height:0!important;aspect-ratio:3/4;width:min(100%,300px);margin:0 auto;padding:0!important;isolation:isolate;perspective:600px} .box-scene.real-half-box::before,.real-half-box>.real-box-top{content:"";position:absolute;inset:0;background:url('../graphics/half-dozen-open-cartoon.png') center/100% 100% no-repeat;pointer-events:none} .box-scene.real-half-box::before{clip-path:inset(46% 0 0);z-index:-1} .real-half-box>.real-box-top{clip-path:inset(0 0 54%);transform-origin:50% 46%;z-index:0;backface-visibility:hidden} .box-scene:not(.real-half-box)>.real-box-top,.real-half-box>.box-lid{display:none!important} .real-half-box>.box-grid{position:absolute!important;left:12%!important;right:12%!important;top:55%!important;bottom:17%!important;width:auto!important;height:auto!important;min-height:0!important;max-height:none!important;padding:0!important;border:0!important;background:transparent!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-template-rows:repeat(2,minmax(0,1fr));gap:3px!important;transform:none!important;box-shadow:none!important;z-index:1} .real-half-box .slot{width:100%!important;height:100%!important;max-height:none!important;min-width:0;aspect-ratio:auto!important;background-size:contain!important} .real-half-box .slot:not(.filled){background:#fff9ed55;border-color:#d7d1c7;color:#a59a88} .handoff-snapshot .box-scene.real-half-box{width:180px!important;height:240px!important;min-height:240px!important;transform:translateY(-55px)} .handoff-snapshot .real-half-box>.real-box-top{z-index:3} .handoff-parcel.real-half-handoff .handoff-closed-box{left:9px;right:9px;top:58px;height:100px;background:none!important;filter:drop-shadow(0 4px 3px #263a3b24)} .real-half-handoff .handoff-lid{inset:0;clip-path:polygon(6% 9%,94% 9%,96% 30%,97% 82%,94% 90%,6% 90%,3% 82%,4% 30%);background:url('../graphics/half-dozen-closed-cartoon.png') center/100% 100% no-repeat!important;transform-origin:center;isolation:isolate} .real-half-handoff .handoff-lid::before{display:none} .real-half-handoff .handoff-closed-box>img.handoff-box-logo{display:none!important} .real-half-box>.real-box-sticker{position:absolute;left:39%;bottom:5.1%;width:22%;height:9%;object-fit:contain;background:#fff;border:1px solid #dedede;border-radius:5px;pointer-events:none;z-index:2}.box-scene:not(.real-half-box)>.real-box-sticker{display:none} /* Contents sit below a clipped, reflective window; the label stays above it. */ .real-half-handoff .handoff-window{display:grid!important;inset:0;left:0;right:0;top:0;bottom:0;padding:0;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:1px;background:#e8e5dd;clip-path:polygon(14% 21%,38% 26%,38% 32%,62% 32%,62% 26%,86% 21%,80% 47%,86% 73%,50% 66%,14% 73%,20% 47%);border:0;border-radius:0;box-shadow:inset 0 5px 12px #504c4b55;overflow:hidden} .real-half-handoff .handoff-window-treat{background-size:contain;transform:scale(.93,.83);filter:brightness(.87) saturate(.8) drop-shadow(0 2px 1px #3e302966);opacity:.8} .real-half-handoff .handoff-window::after{content:"";position:absolute;inset:0;background:linear-gradient(125deg,#cfe9f060,transparent 23%,#ffffff9c 24%,#ffffff65 27%,transparent 28%,#cee6ee40 68%,#ffffff80 69%,#ffffff45 72%,transparent 73%);box-shadow:inset 0 4px 9px #404d5455;pointer-events:none} .runner-body{position:relative;width:100%;height:100%;transform-origin:55% 60%} .runner-body>img{position:absolute;inset:0;z-index:1} .runner-grip{position:absolute;inset:0;background:url('../graphics/delivery-cartoon-v2.webp') center/contain no-repeat;z-index:4;pointer-events:none;opacity:0} .runner-grip.near{clip-path:polygon(70% 48%,78% 45%,83% 46%,88% 49%,88% 53%,81% 56%,73% 54%)} .runner-grip.far{clip-path:polygon(83% 45%,94% 43%,99% 46%,98% 50%,88% 52%,82% 48%)} .runner-body.holding .runner-grip{opacity:1} .runner-body>.handoff-parcel.carried{position:absolute;left:86px;top:44px;width:82px;height:48px;transform-origin:top left;z-index:3;perspective:400px} .handoff-parcel.carried .handoff-snapshot{display:none} .handoff-parcel.carried .handoff-closed-box{left:0!important;right:0!important;top:0!important;width:100%!important;height:100%!important} .handoff-parcel.carried .handoff-lid{transform:perspective(300px) rotateX(22deg) rotate(-6deg);transform-origin:center bottom} .handoff-window-inner{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}.handoff-window.dozen .handoff-window-inner{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr))}.real-half-handoff .handoff-window-inner{inset:25% 15% 28%} /* Center the welcome copy and give the menu a soft sprinkle finish. */ .home-copy>.eyebrow,.home-copy>h1{text-align:center} .home-copy>.eyebrow{margin-left:auto;margin-right:auto} .heading-blue,.photo-menu>h2,.home-menu.photo-menu .menu-grid article:not(.menu-rolls) h3,.kitchen-note h2{color:#329bc3} .home-hero>.home-menu.photo-menu{background-color:#fffefd;background-image:url('../graphics/menu-sprinkles.svg');background-size:240px 240px;border-color:#80d0e6;border-top-color:#79c64a;box-shadow:0 7px 0 #daf2f7,0 12px 28px #329bc31a} .home-menu.photo-menu>.menu-price{background:#fffefdc9;border-bottom-color:#a8db83;border-radius:8px 8px 0 0;padding-top:6px} .home-menu.photo-menu .menu-options li,.home-menu.photo-menu .menu-grid article>p,.home-menu.photo-menu figcaption{text-shadow:0 0 5px #fff,0 0 3px #fff} /* A script menu title, stronger frame, and individual flavor colors. */ @font-face{font-family:BakeryScript;src:url('../fonts/bakery-script.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap} .home-menu.photo-menu>h2{font-family:BakeryScript,"Apple Chancery","Brush Script MT",cursive;font-size:58px;font-weight:400;line-height:1.12;margin:0 0 10px} .home-hero>.home-menu.photo-menu{border:5px solid #42bad4;border-top:9px solid #79c64a;border-radius:16px;box-shadow:0 7px 0 #d5eff5,0 12px 28px #329bc31a} .home-menu.photo-menu>.menu-price{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:5px 10px;font-size:22px;font-weight:700;line-height:1.4;padding:10px 4px 18px;margin-bottom:16px;border-bottom:1px solid #bcdbc0;background:#fffefdbb} .menu-price>span{white-space:nowrap}.menu-price>.price-divider{font-weight:400;color:#98b8b7} .home-menu.photo-menu .menu-donuts{border-bottom:1px solid #b9d6df;padding-bottom:22px} .home-menu.photo-menu .menu-rolls{border-right:1px solid #c8dcdf;padding-right:18px} .home-menu.photo-menu .menu-donuts .menu-options li{font-weight:700} .home-menu.photo-menu .menu-donuts .menu-options li:nth-child(1){color:#17799e} .home-menu.photo-menu .menu-donuts .menu-options li:nth-child(2){color:#b83d76} .home-menu.photo-menu .menu-donuts .menu-options li:nth-child(3){color:#80513b} .home-menu.photo-menu .menu-donuts .menu-options li:nth-child(4){color:#b65321} .home-menu.photo-menu .menu-donuts .menu-options li:nth-child(5){color:#9b6314} .home-menu.photo-menu .menu-donuts .menu-options li:nth-child(6){color:#6653ad} @media(max-width:650px){.home-hero>.home-menu.photo-menu{padding:20px 13px;border-width:5px;border-top-width:9px}.home-menu.photo-menu>h2{font-size:52px}.home-menu.photo-menu>.menu-price{font-size:20px;gap:4px 8px}.home-menu.photo-menu .menu-rolls{padding-right:12px}} /* Requested flavor accents and matching round cinnamon-roll framing. */ .home-menu.photo-menu .menu-donuts .menu-options li:nth-child(2){color:#73a724} .home-menu.photo-menu .menu-muffin-pair figure:nth-child(1) figcaption{color:#187bb7;font-weight:700} .home-menu.photo-menu .menu-muffin-pair figure:nth-child(2) figcaption{color:#80513b;font-weight:700} .menu-roll-crop{width:100px;height:100px;aspect-ratio:1;border-radius:50%;overflow:hidden;margin:0 auto 12px;background:#f2faf5;flex-shrink:0} .menu-roll-crop .menu-roll-photo{display:block;width:100%;height:100%;max-width:none;margin:0;object-fit:cover;object-position:center} @media(max-width:650px){.menu-roll-crop{width:95px;height:95px}} /* Menu finishing touches: paired prices, rainbow sprinkles and royal blue frame. */ .home-hero>.home-menu.photo-menu{container-type:inline-size;border:7px solid #4169e1;background-size:160px 160px;box-shadow:0 7px 0 #e0e7fc,0 12px 28px #4169e11a} .home-menu.photo-menu>.menu-price{flex-wrap:nowrap;font-size:18px;font-size:clamp(14px,5.1cqi,22px);gap:6px;justify-content:center} .home-menu.photo-menu>.menu-price>.price-divider{color:#4169e1;flex-shrink:0} .home-menu.photo-menu .menu-rolls>p{font-family:Arial,Helvetica,sans-serif;font-size:16px;font-weight:700} @media(max-width:650px){.home-hero>.home-menu.photo-menu{border:7px solid #4169e1}.home-menu.photo-menu>.menu-price{flex-wrap:nowrap;font-size:clamp(14px,5.1cqi,22px);gap:4px}} /* Frequently asked questions, matched to our original bakery page. */ .faq-section{max-width:800px;margin:32px auto;padding:28px 30px;background:#fff;border:1px solid #c2e4d7;border-top:5px solid #4169e1;border-radius:20px} .faq-section>.faq-heading,.faq-section>div:first-child{text-align:center} .faq-section h2{font:bold 28px/1.3 Georgia,serif;color:#329bc3;margin:8px 0 23px} .faq-list details{border-top:1px solid #d7e8ed} .faq-list details:last-child{border-bottom:1px solid #d7e8ed} .faq-list summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:18px;cursor:pointer;padding:19px 0;color:#197ea7;font-size:16px;font-weight:700;min-height:54px} .faq-list summary::-webkit-details-marker{display:none} .faq-list summary::after{content:'+';font-size:25px;font-weight:400;line-height:1;color:#4169e1;flex-shrink:0} .faq-list details[open] summary::after{content:'−'} .faq-list summary:focus-visible{outline:3px solid #329bc3;outline-offset:4px;border-radius:5px} .faq-list p{font-size:16px;line-height:1.65;color:#42575c;margin:0;padding:0 28px 20px 0} .faq-list a{color:#197ea7;font-weight:700;text-underline-offset:3px} @media(max-width:650px){.faq-section{margin:22px 14px;padding:23px 18px;border-radius:17px}.faq-section h2{font-size:24px}.faq-list summary{font-size:15px;padding:17px 0}.faq-list p{font-size:15px;padding-right:15px}} .business-hours{background:#eff9fc;border:1px solid #d2eaf1;border-radius:12px;padding:14px!important;color:#197ea7!important;line-height:1.6!important}.business-hours span{color:#42575c;font-size:15px} .checkout-fields select{display:block;width:100%;min-width:0;min-height:46px;padding:10px;border:1px solid #ccb9c5;border-radius:8px;background:#fff;color:#103642;font:inherit;margin-top:0} .checkout-fields select:focus-visible{outline:3px solid #197ea7;outline-offset:4px}.checkout-fields select:disabled{background:#f2f5f7;color:#687a83} #delivery-availability{font-size:14px;line-height:1.5;margin:12px 0;color:#42575c} /* Keep delivery controls within their columns and stack them on phones. */ .checkout-fields{grid-template-columns:repeat(2,minmax(0,1fr))} .checkout-fields label{min-width:0} .checkout-fields input,.checkout-fields select{max-width:100%;min-width:0;min-height:48px;border:1px solid #aacdd4;border-radius:12px;padding:12px;font:inherit;box-sizing:border-box} .business-hours span{color:#c62828;font-weight:700} @media(max-width:650px){.checkout-fields{grid-template-columns:minmax(0,1fr)}.checkout-fields .wide{grid-column:1}.checkout-fields select{font-size:16px}} #delivery-availability.sunday-warning{color:#c62828;font-size:20px;font-weight:700;line-height:1.45;background:#fff1f1;border-left:4px solid #c62828;border-radius:8px;padding:14px 16px;margin:16px 0} .cart-summary #total{display:flex;flex-direction:column;align-items:flex-start;gap:6px} .cart-summary #total .order-total-line{display:block} .cart-summary #total .order-total-line:last-child{font-size:24px;color:#197ea7;margin-top:4px} /* Full-screen box review keeps the next action in view. */ #box-sheet{inset:0;width:100%;max-width:none;height:100vh;height:100dvh;max-height:none;margin:0;border-radius:0;overflow:hidden;padding:calc(14px + env(safe-area-inset-top,0px)) 14px calc(14px + env(safe-area-inset-bottom,0px));box-sizing:border-box} #box-sheet[open] .box-panel{display:grid!important;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(100px,1fr) auto auto auto auto auto;gap:8px;height:100%;min-height:0;max-height:100%;overflow:hidden;align-content:stretch} #box-sheet .box-heading{grid-column:1;grid-row:1;min-width:0;margin:0} #box-sheet .physical-boxes{grid-column:1;grid-row:2;min-width:0;flex-wrap:nowrap;overflow-x:auto;margin:0} #box-sheet .box-scene,#box-sheet .box-scene:has(.dozen){grid-column:1;grid-row:3;min-height:0;height:100%;max-height:420px;align-self:center;width:100%;margin:0} #box-sheet .progress{grid-column:1;grid-row:4;margin:0} #box-sheet .status,#box-sheet .status.error{grid-column:1;grid-row:5;min-height:0;max-height:90px;overflow-y:auto;margin:0} #box-sheet .separate{grid-column:1;grid-row:6;margin:0} #box-sheet .box-list{grid-column:1;grid-row:7;display:flex;flex-wrap:nowrap;min-width:0;max-height:52px;overflow-x:auto;margin:0;gap:6px} #box-sheet .box-list:empty{display:none} #box-sheet .box-list button{flex-shrink:0;max-width:210px} #box-sheet .review{grid-column:1;grid-row:8;width:100%;min-height:54px;margin:0;padding:12px 18px;box-shadow:0 4px 0 #79c64a;font-size:18px} #box-sheet .box-panel>p.note{display:none} /* Pack the treats more generously into the open box without stretching photos. */ .box-panel .real-half-box>.box-grid{left:11%!important;right:11%!important;top:54%!important;bottom:15%!important;gap:2px!important} .box-panel .box-grid .slot.filled{background-size:contain;transform:scale(1.23);transform-origin:center;filter:drop-shadow(0 2px 2px #674a3438)} .box-panel .box-grid.dozen .slot.filled{transform:scale(1.26)} .box-panel .box-grid .slot.filled:nth-child(3n+1){transform:scale(1.23) rotate(-1deg)} .box-panel .box-grid .slot.filled:nth-child(3n){transform:scale(1.23) rotate(1deg)} .box-panel .box-grid.dozen .slot.filled:nth-child(3n+1){transform:scale(1.26) rotate(-1deg)} .box-panel .box-grid.dozen .slot.filled:nth-child(3n){transform:scale(1.26) rotate(1deg)} /* Leave clearance at the inner walls so the outer donuts stay inside the box. */ .box-panel .real-half-box>.box-grid{left:13%!important;right:13%!important;top:56.5%!important;bottom:17.5%!important;gap:2px!important} .box-panel .box-grid.dozen{left:12%;right:12%;top:38%;bottom:24%} .box-panel .box-grid .slot.filled{transform:scale(1.21)} .box-panel .box-grid .slot.filled:nth-child(3n+1){transform:scale(1.21) rotate(-1deg)} .box-panel .box-grid .slot.filled:nth-child(3n){transform:scale(1.21) rotate(1deg)} .box-panel .box-grid.dozen .slot.filled{transform:scale(1.23)} .box-panel .box-grid.dozen .slot.filled:nth-child(3n+1){transform:scale(1.23) rotate(-1deg)} .box-panel .box-grid.dozen .slot.filled:nth-child(3n){transform:scale(1.23) rotate(1deg)} .order-request-note{font-size:14px;line-height:1.6;color:#42575c;background:#eff9fc;padding:12px 14px;border-radius:10px;margin:16px 0} .test-order-notice{font-size:15px;font-weight:700;color:#81530a;background:#fff4d8;border:1px solid #e7cf97;padding:14px;border-radius:10px;line-height:1.5} .checkout-submit:disabled{opacity:.65;cursor:wait} .phone-privacy-note{margin:9px 0 0;font-size:14px;line-height:1.55;font-weight:400;color:#536c70}.phone-privacy-note strong{font-weight:700;color:#197ea7} /* Desktop keeps six generous pastries on each full-width case tray. */ @media(min-width:651px){ #order-view .case-window{min-height:540px} #order-view .product .photo{height:calc(100% - 58px);padding:0;position:relative} #order-view .donut-display{position:relative;inset:auto;width:100%;height:100%} #order-view .photo .stock-piece{display:block!important;width:53%;height:145%;background-size:contain;background-position:center;transform:translate(-50%,-50%) scaleY(var(--donut-flatness,1))!important;transform-origin:center} #order-view .photo .stock-piece:nth-child(1),#order-view .photo .stock-piece:nth-child(4){left:23%} #order-view .photo .stock-piece:nth-child(2),#order-view .photo .stock-piece:nth-child(5){left:50%} #order-view .photo .stock-piece:nth-child(3),#order-view .photo .stock-piece:nth-child(6){left:77%} #order-view .photo .stock-piece:nth-child(-n+3){top:27%;z-index:1} #order-view .photo .stock-piece:nth-child(n+4){top:65%;z-index:2} } /* Slightly taller character; keep his feet and carrying hands aligned. */ .confirm-man{width:336px;height:336px;right:-23px} .handoff-runner{width:170px;height:191px;top:110px;left:calc(50% - 155px)} .runner-body>.handoff-parcel.carried{left:98px;top:54px;width:87px;height:51px} @media(max-width:650px){.confirm-man{width:67.2%;height:auto;right:-7.6%}.confirmation-stage{height:270px}} @media(min-width:651px){.confirmation-stage{height:350px}} /* Facebook follow action beneath the existing homepage order button. */ /* Compact blue Facebook follow action. */ #delivery-handoff .handoff-stage{height:325px} .confirm-woman{clip-path:inset(0 5% 0 0)} /* Compact Facebook link at the upper-left of the header. */ .header-facebook-follow{position:absolute;left:3%;top:12px;display:flex;align-items:center;justify-content:center;gap:7px;box-sizing:border-box;width:140px;min-height:44px;padding:8px 10px;border-radius:12px;background:#0866ff;color:#fff;font:12px/1.25 Arial,sans-serif;text-decoration:none;box-shadow:0 2px 0 #064fc5} .header-facebook-follow:hover{background:#0756d8} .header-facebook-follow:focus-visible{outline:3px solid #79c64a;outline-offset:3px} .header-facebook-text{text-align:left}.header-facebook-text strong{display:block;font-size:14px} .header-facebook-follow .home-facebook-logo{display:flex;align-items:flex-end;justify-content:center;flex:0 0 20px;width:20px;height:20px;overflow:hidden;border-radius:50%;background:#fff;color:#0866ff;font:bold 22px/1 Arial,sans-serif} @media(max-width:650px){.header-facebook-follow{left:12px;top:12px;width:min(124px,calc((100% - 100px)/2 - 12px));gap:5px;padding:7px;font-size:11.5px}.header-facebook-text strong{font-size:13px}.header-facebook-follow .home-facebook-logo{flex-basis:17px;width:17px;height:17px;font-size:19px}} /* Desktop: keep the review action directly beneath the box and within reach. */ @media (min-width:651px){ #order-view .layout>.box-panel{position:sticky;top:12px;align-self:start;display:flex;flex-direction:column;gap:6px;height:auto;max-height:calc(100dvh - 24px);overflow:auto} #order-view .layout>.box-panel>.box-heading{order:0;margin:0} #order-view .layout>.box-panel>.physical-boxes{order:1;margin:0} #order-view .layout>.box-panel>.box-scene{order:2;flex:none;width:100%;height:clamp(120px,calc(100dvh - 490px),290px);min-height:0;margin:0;padding:0} #order-view .layout>.box-panel>.review{order:3;flex:none;min-height:48px;width:100%;margin:0;padding:10px 14px;font-size:16px} #order-view .layout>.box-panel>.progress{order:4;margin:0} #order-view .layout>.box-panel>.status{order:5;min-height:0;margin:0} #order-view .layout>.box-panel>.separate{order:6;margin:0} #order-view .layout>.box-panel>.box-list{order:7;max-height:100px;overflow:auto;margin:0} #order-view .layout>.box-panel>p.note{order:8;margin:0!important} } /* Fit the parcel between the palms: only the thumb and outer fingertips overlap it. */ .runner-body>.handoff-parcel.carried{left:111px;top:65px;width:58px;height:36px;transform:none} .handoff-parcel.carried .handoff-lid{transform:none!important} .runner-grip.near{clip-path:polygon(72% 49%,76% 48%,79% 47%,81% 47.5%,81% 49%,78% 50%,75% 51%,73% 50.5%)} .runner-grip.far{clip-path:polygon(97% 45%,100% 45%,100% 50%,97% 51%)} /* Compact homepage story and kitchen note; keep ordering layouts unchanged. */ #home-view .home-copy .home-story{padding:22px 24px 20px;margin:8px auto 16px} #home-view .home-copy .home-story h2{margin:4px 0 9px;line-height:1.2} #home-view .home-copy .home-story .eyebrow{margin:0 0 3px} #home-view .home-copy .home-story p{line-height:1.4;margin:0 auto 8px} #home-view .home-copy .home-story p.signature{margin:8px auto 0} #home-view .home-copy>.kitchen-note{padding:18px 22px;margin:8px auto 16px} #home-view .home-copy>.kitchen-note h2{margin:0 0 9px;line-height:1.2} #home-view .home-copy>.kitchen-note p{line-height:1.42;margin:0 0 9px} #home-view .home-copy>.kitchen-note .business-hours{margin-bottom:9px} #home-view .home-copy>.kitchen-note .prep-times{margin:9px auto 11px} #home-view .home-copy>.kitchen-note .prep-times li{line-height:1.35;margin:4px 0} #home-view .home-copy>.kitchen-note .kitchen-contact{margin-bottom:0} #home-view .home-copy>.kitchen-note .kitchen-contact a{font-size:clamp(21px,2.7vw,29px);font-weight:900;letter-spacing:1.3px;display:inline-block} header .brand-phone{font-size:clamp(22px,2.4vw,30px);font-weight:900;letter-spacing:1.5px;white-space:nowrap} #home-view .home-order-action>.cta{transition:background-color .2s ease,color .2s ease,box-shadow .2s ease,filter .2s ease,transform .2s ease} @media(hover:hover){ #home-view .home-order-action>.cta:hover{background:#b9ff38;color:#11391c;border-color:#77d817;box-shadow:0 0 12px #b9ff38,0 0 28px #a5ff39,0 0 46px #92f32d,0 6px 0 #4c9c1e;filter:brightness(1.07);transform:translateY(-2px)} } #home-view .home-order-action>.cta:focus-visible{background:#b9ff38;color:#11391c;box-shadow:0 0 0 4px #fff,0 0 0 8px #4fae15,0 0 28px #a5ff39} @media(max-width:650px){ #home-view .home-copy .home-story{padding:18px 17px;margin:6px auto 14px} #home-view .home-copy>.kitchen-note{padding:16px 15px;margin:7px auto 14px} #home-view .home-copy>.kitchen-note .prep-times li{margin:3px 0} header .brand-phone{font-size:22px;letter-spacing:1px} } @media(prefers-reduced-motion:reduce){#home-view .home-order-action>.cta{transition:none}} /* Homepage: hours before ordering, compact centered kitchen note, larger logo. */ #home-view .home-hero>.home-hours{grid-column:1/-1;justify-self:center;text-align:center;width:min(100%,360px);margin:0 auto 4px} #home-view .home-hours .business-hours{margin:0!important;padding:9px 12px!important;font-size:15px;line-height:1.3!important} #home-view .home-hours .business-hours span{font-size:14px} #home-view .home-copy>.kitchen-note{max-width:540px;width:100%;box-sizing:border-box;padding:13px 17px;margin:6px auto 12px;text-align:center} #home-view .home-copy>.kitchen-note h2{font-size:clamp(20px,2.2vw,25px);margin-bottom:7px} #home-view .home-copy>.kitchen-note p{font-size:15px;line-height:1.35;margin-bottom:7px} #home-view .home-copy>.kitchen-note .prep-times{max-width:330px;margin:7px auto 8px} #home-view .home-copy>.kitchen-note .prep-times li{font-size:15px;margin:3px 0;line-height:1.3} header .brand img{width:188px!important;height:188px!important} @media(max-width:650px){ #home-view .home-hero>.home-hours{order:-1;grid-column:1;width:min(100%,320px);margin:0 auto 2px} #home-view .home-hero>.home-order-action{order:0} #home-view .home-copy>.eyebrow{order:1;text-align:center;margin-top:0} #home-view .home-copy>h1{order:2;text-align:center} #home-view .home-copy>.kitchen-note{order:3;max-width:100%;margin:4px auto 10px;padding:12px 12px;text-align:center;justify-self:center} #home-view .home-copy>.kitchen-note h2,#home-view .home-copy>.kitchen-note p{text-align:center} #home-view .home-copy>.kitchen-note .prep-times{width:max-content;max-width:100%;margin:6px auto;text-align:left} #home-view .home-copy>.home-story{order:4} header .brand img{width:112px!important;height:112px!important} header,body.ordering header{height:auto;min-height:124px} } /* Mobile: center business hours and reduce the space around its card. */ @media(max-width:650px){ #home-view .home-hero>.home-hours{display:flex;align-items:center;justify-content:center;justify-self:center;align-self:center;width:min(100%,290px);max-width:290px;margin:0 auto!important;padding:0!important;min-height:0;box-sizing:border-box;text-align:center} #home-view .home-hours>.business-hours{display:block;width:100%;box-sizing:border-box;text-align:center!important;padding:6px 10px!important;margin:0!important;line-height:1.22!important;font-size:14px} #home-view .home-hours>.business-hours strong{display:inline-block;margin-bottom:1px} #home-view .home-hours>.business-hours span{font-size:13px} #home-view .home-hero{row-gap:10px} } /* Mobile homepage scale adjustments. */ @media(max-width:650px){ header .brand img{width:124px!important;height:124px!important} #home-view .home-order-action{max-width:285px} #home-view .home-order-action>.cta{min-height:70px;padding:12px 20px;font-size:24px;border-width:5px;border-radius:18px} #home-view .home-copy>.eyebrow{font-size:12px;line-height:1.2;letter-spacing:.6px;margin:0 auto 3px;text-align:center} #home-view .home-copy>h1{font-size:clamp(25px,7.2vw,30px);line-height:1.18;letter-spacing:-.5px;margin:0;text-align:center} } /* Use almost the entire phone width for the printed menu, with tap-to-zoom. */ #home-view .menu-fullsize-link{display:block;width:100%;max-width:760px;margin:0 auto;cursor:zoom-in} #home-view .menu-fullsize-link img{display:block;width:100%;max-width:100%;height:auto} #home-view .menu-zoom-hint{display:none} @media(max-width:650px){ #home-view .home-hero>.home-menu.photo-menu{box-sizing:border-box;width:calc(100% + 32px);max-width:none;margin-left:-16px;margin-right:-16px;padding:10px 3px 12px!important;border-left-width:2px!important;border-right-width:2px!important;border-radius:8px} #home-view .home-menu.photo-menu #menu-title{font-size:clamp(30px,9vw,42px)!important;margin:4px 0 10px!important;-webkit-text-stroke:7px #000!important} #home-view .home-menu.photo-menu .menu-fullsize-link{width:100%;max-width:none} #home-view .home-menu.photo-menu .menu-fullsize-link img{width:100%!important;max-width:none!important;border-radius:2px!important} #home-view .menu-zoom-hint{display:block;text-align:center;font-size:13px;font-weight:700;color:#176542;margin:9px 4px 0} } /* Homepage layout: menu before story, thin consistent borders, larger natural-ratio menu. */ #home-view .home-hero>.home-menu.photo-menu{border:1.5px solid #111!important;border-top:1.5px solid #111!important;box-sizing:border-box} #home-view .home-hero>.home-menu.photo-menu .menu-fullsize-link{max-width:100%;width:100%} #home-view .home-hero>.home-menu.photo-menu .menu-fullsize-link img{max-width:100%!important;width:100%!important;height:auto!important;object-fit:contain} #home-view .home-copy>.kitchen-note{border:1px solid #a9ddbe!important;border-top:1px solid #a9ddbe!important} #home-view .home-hero>.home-story{grid-column:1/-1;justify-self:center;width:min(100%,700px);box-sizing:border-box;text-align:center;margin:10px auto 20px} #home-view .home-hero>.home-story p{max-width:560px;margin-left:auto;margin-right:auto} #home-view .faq-section,#home-view ~ .faq-section,.faq-section{border:1px solid #c2e4d7!important;border-top:1px solid #c2e4d7!important} @media(max-width:650px){ #home-view .home-hero>.home-menu.photo-menu{order:4;width:calc(100% + 32px);max-width:none;margin-left:-16px;margin-right:-16px;padding:8px 1px 10px!important;border:1px solid #111!important} #home-view .home-hero>.home-story{order:5;grid-column:1;width:100%;max-width:100%;margin:8px auto 16px} #home-view .home-hero>.home-menu.photo-menu .menu-fullsize-link{width:100%;max-width:none} #home-view .home-hero>.home-menu.photo-menu .menu-fullsize-link img{border-radius:0!important} } /* Five-page site navigation beneath the branded header. */ .site-tabs{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:clamp(6px,2.4vw,28px);width:100%;padding:11px 14px;background:#fff;border-top:3px solid #35a9d2;border-bottom:1px solid #c2e4d7;box-sizing:border-box} .site-tabs a{display:inline-block;text-align:center;padding:8px 13px;border-radius:10px;color:#176a81;text-decoration:none;font-size:clamp(13px,1.55vw,17px);font-weight:800;white-space:nowrap;transition:background-color .15s,color .15s} .site-tabs a:hover,.site-tabs a[aria-current="page"]{background:#e1f8e7;color:#176b32} .site-tabs a:focus-visible{outline:3px solid #24b6d8;outline-offset:2px} .info-page{min-height:55vh;padding:30px 16px 55px;background:#f8fcfc} .info-page-inner{width:min(100%,850px);margin:0 auto} .info-page .home-copy{display:block!important} .info-page .home-story{width:min(100%,760px);margin:18px auto 22px;padding:30px 28px;text-align:center} .info-page .home-story p{max-width:610px;margin-left:auto;margin-right:auto} .info-page .faq-section{max-width:780px;margin:15px auto 24px} .info-page-action{text-align:center;margin:24px auto} .contact-page{width:min(100%,700px);margin:12px auto;padding:30px 26px;border:1px solid #b9e0d1;border-radius:20px;background:#fff;text-align:center} .contact-page h1{color:#197ea7} .contact-page>p{line-height:1.5} .contact-links{display:grid;grid-template-columns:1fr;gap:12px;max-width:490px;margin:22px auto} .contact-links>a,.contact-email{display:flex;flex-direction:column;gap:3px;align-items:center;justify-content:center;min-height:82px;padding:12px 16px;background:#f0fbf7;border:1px solid #c2e4d7;border-radius:12px;text-decoration:none;color:#176542} .contact-links>a:hover{background:#e0f7e9} .contact-links span{font-size:14px;color:#426b71} .contact-links strong{font-size:clamp(18px,3vw,25px);overflow-wrap:anywhere} .contact-email strong{font-size:clamp(18px,3vw,25px);color:inherit} .contact-local{font-weight:700;color:#197ea7} @media(max-width:650px){ .site-tabs{gap:3px;padding:8px 4px;flex-wrap:nowrap;justify-content:space-evenly} .site-tabs a{font-size:clamp(10px,2.8vw,13px);padding:8px 4px;border-radius:6px} .info-page{padding:16px 10px 32px} .info-page .home-copy{display:block!important} .info-page .home-story{margin:12px auto;padding:22px 16px} .info-page .faq-section{margin:10px auto 18px;padding:19px 15px} .contact-page{padding:22px 14px} } /* Photo Gallery page and six-tab navigation. */ .gallery-page{width:min(100%,900px);margin:10px auto;text-align:center} .gallery-page h1{color:#197ea7;margin:10px 0 8px} .gallery-page>p{font-size:17px;margin-bottom:24px} .gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:16px;max-width:650px;margin:auto} .gallery-grid a{display:block;border:1px solid #c2e4d7;border-radius:12px;overflow:hidden;background:#fff} .gallery-grid img{display:block;width:100%;height:auto;object-fit:contain} @media(max-width:650px){.site-tabs{flex-wrap:wrap;gap:3px 5px;justify-content:center}.site-tabs a{font-size:clamp(11px,2.9vw,13px);padding:7px 8px}.gallery-page>p{font-size:15px}} /* Center all six navigation tabs as one balanced group. */ .site-tabs{display:flex!important;justify-content:center!important;align-items:center!important;align-content:center!important;gap:8px 18px!important;text-align:center;width:100%;margin:0 auto} .site-tabs a{flex:0 0 auto;text-align:center} @media(max-width:650px){ .site-tabs{justify-content:center!important;align-items:center!important;align-content:center!important;flex-wrap:wrap!important;gap:4px 9px!important;padding:9px 7px!important} .site-tabs a{flex:0 0 auto!important;padding:7px 6px!important} } /* Navigation: match the Homemade donuts headline typeface, slightly larger. */ .site-tabs a{font-family:Georgia,serif!important;font-size:20px!important;font-weight:700!important;letter-spacing:-.35px} @media(max-width:650px){ .site-tabs a{font-family:Georgia,serif!important;font-size:clamp(13px,3.65vw,16px)!important;font-weight:700!important;letter-spacing:-.25px;padding:7px 6px!important} } /* Keep the page tabs clickable and visible while the ordering workspace is open. */ .site-tabs,body.ordering .site-tabs{position:relative!important;z-index:50!important;display:flex!important;visibility:visible!important;pointer-events:auto!important} .site-tabs a,body.ordering .site-tabs a{display:inline-flex!important;align-items:center;justify-content:center;visibility:visible!important;pointer-events:auto!important;min-height:40px} .site-tabs a[href="#home"],body.ordering .site-tabs a[href="#home"]{display:inline-flex!important} @media(max-width:650px){ body.ordering .site-tabs{flex-wrap:wrap!important;justify-content:center!important} body.ordering .site-tabs a{min-height:40px!important} } /* Per-flavor size adjustments for the six-donut display in the order case. */ #order-view .photo .donut-display .stock-piece{transform:translate(-50%,-50%) scale(var(--donut-image-scale,1)) scaleY(var(--donut-flatness,1))!important} /* Real bakery-case category sign, updated as customers browse. */ .case-category-sign{padding:12px 14px 10px;text-align:center;background:linear-gradient(180deg,#fffefa,#f2fff6);border-bottom:3px solid #31a9cc;box-shadow:inset 0 -1px 0 #b8e5d0} .case-sign-small{display:block;color:#34806a;font:700 10px/1.3 Arial,sans-serif;letter-spacing:2.2px} .case-category-sign h2{margin:4px 0 0;color:#176b78;font-family:Georgia,serif;font-size:clamp(23px,2.8vw,32px);font-weight:800;line-height:1.15;text-shadow:1px 1px 0 #d1eee1} @media(max-width:650px){.case-category-sign{padding:9px 8px 8px}.case-sign-small{font-size:9px;letter-spacing:1.5px}.case-category-sign h2{font-size:23px}} /* Keep the actual box full: 6 treats in 3x2, 12 treats in 4x3. */ #order-view .box-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-template-rows:repeat(2,minmax(0,1fr))!important;gap:1px!important} #order-view .box-grid.dozen{grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-template-rows:repeat(3,minmax(0,1fr))!important;gap:1px!important} #order-view .box-grid .slot.filled{background-position:center;background-size:100% 100%!important;transform:scale(1.15)!important;transform-origin:center;min-width:0!important;min-height:0!important} #order-view .box-grid .slot.filled:nth-child(odd){transform:scale(1.15) rotate(-1deg)!important} #order-view .box-grid .slot.filled:nth-child(even){transform:scale(1.15) rotate(1deg)!important} #order-view .box-grid .slot.filled .remove{z-index:5} /* Mobile header, compact tabs, readable homepage. Desktop unchanged. */ @media(max-width:650px){ header .header-facebook-follow{left:12px!important;top:12px!important;width:38px!important;height:38px!important;min-height:38px!important;padding:0!important;gap:0!important;border-radius:7px!important;display:flex!important;align-items:center!important;justify-content:center!important} header .header-facebook-follow .header-facebook-text{display:none!important} header .header-facebook-follow .home-facebook-logo{display:flex!important;align-items:center!important;justify-content:center!important;flex:0 0 auto!important;width:28px!important;height:28px!important;border-radius:5px!important;font:bold 27px/1 Arial,sans-serif!important} header .header-cart{display:none!important} .site-tabs,body.ordering .site-tabs{gap:2px 4px!important;padding:5px 3px!important} .site-tabs a,body.ordering .site-tabs a{font-size:clamp(12px,3.45vw,15px)!important;min-height:34px!important;padding:5px 4px!important;letter-spacing:-.4px!important} #home-view .home-copy h1{font-size:clamp(26px,7vw,36px)!important;line-height:1.13!important} #home-view .home-hero>.home-menu.photo-menu{width:calc(100% + 32px)!important;margin-left:-16px!important;margin-right:-16px!important;padding:2px 0 4px!important;border-width:0!important;border-radius:0!important} #home-view .home-menu.photo-menu #menu-title{font-size:clamp(23px,7vw,32px)!important;margin:3px 0 5px!important} #home-view .home-menu.photo-menu .menu-fullsize-link,#home-view .home-menu.photo-menu .menu-fullsize-link img{display:block!important;width:100%!important;max-width:none!important;border-radius:0!important} } /* Zoom the menu without navigating to a standalone image (which has no back button). */ .menu-zoom-overlay{display:none;position:fixed;inset:0;z-index:10000;background:#fff;overflow:auto;overscroll-behavior:contain;padding:64px 8px 24px;text-align:center;box-sizing:border-box} .menu-zoom-overlay:target{display:block} .menu-zoom-overlay img{display:block;width:100%;max-width:1200px;height:auto;margin:0 auto;border:1px solid #111;border-radius:0;touch-action:pinch-zoom} .menu-zoom-back{position:fixed;top:10px;left:10px;z-index:10001;background:#087b9d;color:#fff!important;border:2px solid #111;border-radius:0;padding:11px 16px;font:700 16px/1.2 Arial,sans-serif;text-decoration:none;box-shadow:0 2px 8px #0003} .menu-zoom-back:focus-visible{outline:3px solid #3ecb6b;outline-offset:2px} @media(max-width:650px){.menu-zoom-overlay{padding:58px 0 18px}.menu-zoom-overlay img{width:100%;max-width:none}.menu-zoom-back{top:7px;left:7px;padding:10px 13px;font-size:15px}} /* Single real donut beside the existing homepage headline; all other styles unchanged. */ #home-view .home-copy{position:relative} #home-view .home-feature-donut{float:right;width:clamp(110px,22vw,240px);height:auto;max-height:230px;object-fit:contain;margin:0 0 6px 12px;filter:drop-shadow(0 6px 7px #0002)} @media(max-width:650px){#home-view .home-feature-donut{width:clamp(84px,25vw,120px);max-height:125px;margin:0 0 3px 7px}} /* Homepage actions in existing LETMEE EAT colors and type; active nav tab. */ .site-tabs a[aria-current="page"]{background:#82d843!important;color:#102b1c!important;border-radius:9px!important} #home-view .home-primary-actions{display:flex!important;align-items:stretch;justify-content:center;flex-wrap:nowrap;gap:12px;width:100%;max-width:780px;margin-left:auto;margin-right:auto} #home-view .home-primary-actions .cta{display:flex!important;flex:1 1 0;align-items:center;justify-content:center;gap:12px;min-width:0;margin:0!important;padding:15px 17px!important;border-radius:12px;text-align:center;text-decoration:none;white-space:nowrap;font-family:Georgia,serif;font-size:clamp(15px,2.2vw,23px);font-weight:800;line-height:1.2} #home-view .home-order-online{background:#1ba63d!important;color:white!important} #home-view .home-view-menu{background:#078fce!important;color:white!important} #home-view .home-primary-actions a:hover{filter:brightness(1.07)} #home-view .home-primary-actions a:focus-visible{outline:3px solid #111;outline-offset:3px} @media(max-width:650px){ #home-view .home-primary-actions{gap:7px!important;width:100%!important} #home-view .home-primary-actions .cta{font-size:clamp(13px,3.65vw,17px)!important;padding:12px 6px!important;gap:5px!important;border-radius:8px!important} } /* Screenshot-inspired navigation and calls to action. Existing site type and content retained. */ .site-tabs,body.ordering .site-tabs{background:#05b4eb!important;border-top:0!important;border-bottom:2px solid #079acc!important;gap:clamp(4px,1.5vw,16px)!important;padding:8px 8px!important} .site-tabs a,body.ordering .site-tabs a{color:#080b0d!important;background:transparent;font-weight:800!important;border-radius:12px!important;padding:11px clamp(7px,1.3vw,19px)!important} .site-tabs a[aria-current="page"],body.ordering .site-tabs a[aria-current="page"]{background:#80d944!important;color:#0a0e09!important} .site-tabs a:hover{background:#b0ed75!important} #home-view .home-copy>.home-primary-actions{clear:both;display:flex!important;position:relative;width:100%!important;max-width:980px;gap:12px!important;margin:18px auto 17px!important;float:none;align-items:stretch} #home-view .home-copy>.home-primary-actions .cta{box-sizing:border-box;min-height:72px!important;flex:1 1 0!important;border:0!important;border-radius:13px!important;font-family:Georgia,serif!important;font-size:clamp(16px,2.4vw,25px)!important;font-weight:800!important;letter-spacing:.1px;padding:14px 12px!important;line-height:1.15!important;box-shadow:none!important;text-shadow:none!important;transform:none!important} #home-view .home-copy>.home-primary-actions .home-order-online{background:linear-gradient(#21b943,#079823)!important;color:#fff!important} #home-view .home-copy>.home-primary-actions .home-view-menu{background:linear-gradient(#07a9ed,#007fc7)!important;color:#fff!important} #home-view .home-copy>.home-primary-actions .action-icon{font-family:Arial,sans-serif;font-size:1.25em;line-height:1;flex-shrink:0} @media(max-width:650px){ .site-tabs,body.ordering .site-tabs{gap:2px 3px!important;padding:5px 3px!important} .site-tabs a,body.ordering .site-tabs a{padding:6px 5px!important;min-height:34px!important;font-size:clamp(11px,3.35vw,15px)!important;border-radius:7px!important} #home-view .home-copy>.home-primary-actions{gap:7px!important;margin:10px auto 12px!important} #home-view .home-copy>.home-primary-actions .cta{min-height:52px!important;font-size:clamp(11px,3.3vw,16px)!important;padding:9px 4px!important;gap:4px!important;border-radius:9px!important} #home-view .home-copy>.home-primary-actions .action-icon{font-size:1.1em} } /* Original customer-supplied photo beside the centered logo, without shifting header controls. */ header .header-donut{position:absolute;left:calc(50% + 125px);top:50%;transform:translateY(-50%);display:block;width:clamp(72px,10vw,110px);height:auto;object-fit:contain;border-radius:10px;pointer-events:none} @media(max-width:650px){ header .header-donut{left:calc(50% + 74px);top:8px;transform:none;width:clamp(58px,18vw,84px);height:auto;border-radius:7px} } /* Navigation first; phone, ordering buttons, and a single-line tagline beneath the brand. */ header,body.ordering header{height:auto;min-height:0;padding:12px 3% 15px} header .brand-group{width:100%;gap:8px} header .header-brand-row{position:relative;display:flex;justify-content:center;align-items:center} header .header-brand-row .header-donut{left:calc(100% + 18px);top:50%;transform:translateY(-50%);width:clamp(90px,15vw,160px);height:auto;border-radius:0;filter:drop-shadow(0 5px 5px #0002)} header .home-primary-actions{display:flex;align-items:stretch;justify-content:center;gap:12px;width:min(100%,680px);margin:2px auto 0} header .home-primary-actions .cta{display:flex;flex:1 1 0;align-items:center;justify-content:center;gap:12px;min-width:0;min-height:58px;padding:12px 16px;border:0;border-radius:13px;color:#fff;font:800 22px/1.15 Georgia,serif;white-space:nowrap} header .home-order-online{background:linear-gradient(#21b943,#079823)} header .home-view-menu{background:linear-gradient(#07a9ed,#007fc7)} header .home-primary-actions .action-icon{font-family:Arial,sans-serif;font-size:1.25em} header .home-primary-actions a:hover{filter:brightness(1.07)} header .header-tagline{width:100%;margin:3px 0 0;font:bold clamp(7.5px,2.2vw,28px)/1.3 Georgia,serif;letter-spacing:0;text-align:center;white-space:nowrap;color:var(--ink)} header .header-tagline .heading-blue{color:#329bc3} header .header-tagline .delivery-lime{color:#79c64a} header .header-tagline .tagline-divider{color:var(--ink)} @media(max-width:650px){ header,body.ordering header{padding:8px 10px 11px} header .brand-group{gap:6px} header .header-brand-row .header-donut{left:calc(100% + 8px);top:50%;width:clamp(58px,18vw,100px)} header .home-primary-actions{max-width:440px;gap:7px} header .home-primary-actions .cta{min-height:46px;padding:9px 6px;gap:5px;font-size:clamp(13px,3.65vw,17px);border-radius:9px} header .header-tagline{font-size:clamp(7.5px,2.2vw,16px);margin-top:3px} } /* Keep header button icons, labels, and arrows inside equal-width buttons. */ header .home-primary-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:min(100%,680px);max-width:680px;padding:0;gap:12px} header .home-primary-actions .cta{display:grid;grid-template-columns:1.25em minmax(0,1fr) .6em;align-items:center;justify-items:center;width:100%;min-width:0;gap:8px;margin:0;padding:12px 16px;letter-spacing:.1px;text-align:center;box-shadow:none;text-shadow:none;line-height:1.2} header .home-primary-actions .cta>span{display:block;min-width:0;position:static;transform:none;line-height:1.2} header .home-primary-actions .cta>.action-icon{font-size:1.2em;line-height:1} @media(max-width:650px){ header .home-primary-actions{width:100%;max-width:440px;gap:7px} header .home-primary-actions .cta{grid-template-columns:1.2em minmax(0,1fr) .6em;gap:4px;padding:10px 6px;font-size:clamp(11px,3.3vw,16px);min-height:46px} } /* Stack the kitchen note directly above the menu on desktop and mobile. */ #home-view .home-hero>.home-copy{display:block;grid-column:1 / -1;order:2;width:100%;min-width:0} #home-view .home-hero>.home-menu.photo-menu{grid-column:1 / -1;order:3} /* Match the order button's green when hovering over View Menu. */ header .home-primary-actions .home-view-menu:hover{background:linear-gradient(#21b943,#079823);color:#fff} /* Keep the decorative donut smaller than the logo, including during image loading. */ header .header-brand-row .header-donut{width:100px!important;max-width:100px!important;height:auto!important;max-height:80px;object-fit:contain} @media(max-width:650px){header .header-brand-row .header-donut{width:64px!important;max-width:64px!important;max-height:52px}} /* The non-interactive homepage message stays borderless, including after welcome focus. */ header .header-tagline{border:0;box-shadow:none} header .header-tagline:focus{outline:none} /* Equal-width donuts flank the centered logo and scale together on phones. */ header .header-brand-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;gap:12px;width:min(100%,588px)} header .header-brand-row .brand{display:block;min-width:0;width:100%} header .header-brand-row .brand img,body.ordering header .header-brand-row .brand img{width:100%!important;height:auto!important;aspect-ratio:1;object-fit:contain} header .header-brand-row .header-donut{position:static;left:auto;top:auto;transform:none;width:100%!important;max-width:100%!important;height:auto!important;max-height:none!important;object-fit:contain} header .header-brand-row .header-donut-left{position:relative;display:block;width:100%;aspect-ratio:1075 / 658;overflow:hidden;pointer-events:none;filter:drop-shadow(0 5px 5px #0002)} header .header-donut-left img{position:absolute;display:block;width:142.883721%;max-width:none;height:auto;left:-16%;top:-101.215806%;object-fit:contain} @media(max-width:650px){header .header-brand-row{max-width:396px;gap:8px;margin-top:42px}} /* Green flavor pagination, with the existing disabled state preserved. */ #order-view .case-pages button{background:#1ba63d;color:#fff;border-color:#078e28} #order-view .case-pages button:hover:not(:disabled){background:#078e28} #order-view .case-pages button:disabled{opacity:.45;cursor:default} /* The supplied family picture sits to the left of the existing story card. */ #story-view .story-family-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px;align-items:center;width:min(100%,1200px)} #story-view .story-family-photo{display:block;width:100%;height:auto;border-radius:16px} #story-view .story-family-layout>.home-copy{min-width:0} #story-view .story-family-layout .home-story{width:100%;margin:0} @media(max-width:750px){#story-view .story-family-layout{grid-template-columns:1fr;gap:20px;max-width:760px}#story-view .story-family-photo{max-width:600px;margin:0 auto}} /* Enlarge the mobile message while retaining one continuous line. */ @media(max-width:650px){ header .header-tagline{font-size:clamp(9px,2.6vw,17px);letter-spacing:-.7px;white-space:nowrap;line-height:1.4} } /* Browse the photo gallery in one horizontal, swipeable row. */ #gallery-view .gallery-page{width:min(100%,1100px)} #gallery-view .gallery-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:650px;margin:18px auto 8px} #gallery-view .gallery-controls button{min-height:44px;padding:9px 16px;border:1px solid #078e28;border-radius:11px;background:#1ba63d;color:#fff;font-weight:700} #gallery-view .gallery-controls button:hover:not(:disabled){background:#078e28} #gallery-view .gallery-controls button:disabled{opacity:.45;cursor:default} #gallery-view .gallery-hint{font-size:14px;margin:0 0 16px;color:#426b71} #gallery-view .gallery-grid{display:flex;flex-wrap:nowrap;gap:16px;width:100%;max-width:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:4px;padding:4px 4px 16px;scrollbar-color:#1ba63d #e1f8e7;scrollbar-width:auto} #gallery-view .gallery-grid>a{flex:0 0 min(78vw,340px);min-width:0;height:360px;scroll-snap-align:start;scroll-snap-stop:normal;display:flex;align-items:center;justify-content:center} #gallery-view .gallery-grid img{display:block;width:100%;height:100%;object-fit:contain} @media(max-width:650px){#gallery-view .gallery-grid{gap:12px}#gallery-view .gallery-grid>a{height:300px}#gallery-view .gallery-controls button{padding:9px 12px}#gallery-view .gallery-hint{font-size:13px}} /* Edge-to-edge photos: no white cards, borders, gaps, or letterboxing. */ #gallery-view .gallery-grid{gap:0;padding:0;scroll-snap-type:none;scroll-padding:0;scroll-behavior:auto;background:transparent;border:0;border-radius:0;scrollbar-width:none} #gallery-view .gallery-grid::-webkit-scrollbar{display:none} #gallery-view .gallery-grid>a{border:0;border-radius:0;box-shadow:none;background:transparent;scroll-snap-align:none;overflow:hidden} #gallery-view .gallery-grid img{object-fit:cover;border:0;border-radius:0} #gallery-view .gallery-controls{flex-wrap:wrap;justify-content:center} #gallery-view #gallery-position{min-width:65px;font-size:14px} /* Full-size photos always keep a clear route back to the gallery. */ dialog.gallery-photo-dialog{position:fixed;inset:0;width:100vw;max-width:none;height:100vh;height:100dvh;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:#102128;color:#fff;overflow:auto;overscroll-behavior:contain} .gallery-photo-dialog .gallery-photo-toolbar{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px max(12px,env(safe-area-inset-right)) 12px max(12px,env(safe-area-inset-left));background:#102128} .gallery-photo-dialog .gallery-photo-toolbar button{min-height:44px;padding:10px 16px;border:0;border-radius:10px;background:#1ba63d;color:#fff;font-weight:700} .gallery-photo-dialog .gallery-photo-toolbar span{font-size:13px} .gallery-photo-dialog .gallery-photo-content{display:flex;align-items:center;justify-content:center;min-height:calc(100% - 72px);padding:12px} .gallery-photo-dialog .gallery-photo-content img{display:block;width:auto;height:auto;max-width:100%;max-height:calc(100dvh - 100px);object-fit:contain;touch-action:pinch-zoom} /* Add the supplied Butterfinger cutout beside the M&M donut, without altering the menu artwork. */ #home-view .home-menu.photo-menu .menu-artwork{position:relative;display:block;width:100%} #home-view .home-menu.photo-menu .menu-zoom-overlay>.menu-artwork{max-width:1200px;margin:0 auto} #home-view .home-menu.photo-menu .menu-artwork>img.menu-butterfinger-donut{position:absolute;left:22.8%;bottom:4.6%;display:block!important;width:9%!important;max-width:none!important;height:auto!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;object-fit:contain;pointer-events:none}