* { box-sizing: border-box; }
:root {
  --wall: #bfbdb9;
  --wine: #650f29;
  --ink: #30282a;
  --rule: #8b817e;
  --light: #f6f4f0;
  --photo-height: clamp(145px, 15vw, 202px);
}
body {
  margin: 0; min-height: 100svh; color: var(--ink);
  font: 15px/1.55 Tahoma, Arial, sans-serif;
  background-color: var(--wall);
  background-image: linear-gradient(119deg, #fff4 0%, transparent 24%, transparent 61%, #655d6110 82%, transparent),
                    radial-gradient(ellipse at 42% 0, #fff5, transparent 74%);
  background-attachment: fixed;
}
button,input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; -webkit-tap-highlight-color: transparent; }
button:focus-visible,input:focus-visible { outline: 2px solid var(--wine); outline-offset: 4px; }
button:disabled { opacity: .4; cursor: default; }
button[hidden],[hidden] { display: none !important; }
.mast { height: 108px; max-width: 1120px; margin: auto; display:flex; justify-content:center; align-items:center; position:relative; }
#brand { width: clamp(116px, 14vw, 185px); max-height:64px; object-fit:contain; }
.tool { position:absolute; top:50%; transform:translateY(-50%); min-width:42px; height:38px; border:1px solid #62505255; border-radius:24px; color:var(--wine); display:flex; align-items:center; justify-content:center; gap:7px; padding:0 11px; }
.tool svg { width:17px; fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round; }
.bag { left:4%; font:600 13px Arial; }.home{right:4%;font:22px Arial}
main { max-width:1080px; padding:0 38px 10px; margin:auto; }
h1,h2,h3,p { margin:0; }
h1 { display:flex; justify-content:center; align-items:center; gap:19px; margin:4px auto 24px; color:var(--wine); font-size:clamp(27px,3.3vw,42px); line-height:1.35; }
h1::before,h1::after { content:''; width:clamp(32px,5vw,67px); height:1px; background:#823144; }
.navline { display:flex; justify-content:center; align-items:center; gap:8px; margin:0 auto 30px; flex-wrap:wrap; }
.filters { display:flex; gap:5px; }
.filter,.aux { padding:7px 16px; font-size:13px; border-radius:99px; border:1px solid #7c65633b; }
.filter[aria-pressed=true],.primary { background:var(--wine); color:#fff9f7; }
.find { width:150px; padding:8px 13px; height:36px; background:#ffffff38; border:1px solid #74636350; border-radius:20px; font-size:12px; }
.find::placeholder { color:#5f5357; }
.shelf-row { --columns: 4; display:grid; position:relative; grid-template-columns:repeat(var(--columns),minmax(0,1fr)); margin:0 0 24px; isolation:isolate; }
.shelf { position:absolute; pointer-events:none; width:100%; height:clamp(19px,2.9vw,37px); left:0; top:calc(var(--photo-height) - 10px); z-index:-1; filter:drop-shadow(0 7px 6px #35282c40); }
.product { width:100%; min-width:0; padding:0 5px; display:flex; flex-direction:column; align-items:stretch; text-align:center; border-radius:6px; }
.photo { height:var(--photo-height); display:flex; align-items:flex-end; justify-content:center; }
.photo img { display:block; width:86%; height:95%; object-fit:contain; object-position:center bottom; transform-origin:center bottom; transform:translate(var(--x,0px),var(--y,0px)) scale(var(--scale,1)); filter:drop-shadow(2px 2px 3px #3a282831); transition:filter .2s; }
.product:hover .photo img {filter:drop-shadow(1px 4px 5px #3a282846);}
.caption { display:flex; flex-direction:column; align-items:center; gap:3px; padding:clamp(20px,3.4vw,39px) 2px 7px; }
.caption strong,.sweet-name { font-size:clamp(15px,1.8vw,20px); font-weight:700; line-height:1.5; }
.amount { white-space:nowrap; display:inline-flex; flex-direction:row; align-items:baseline; gap:4px; color:var(--wine); }
.amount b {font:600 1.1em/1.2 Arial,sans-serif; font-variant-numeric:tabular-nums;}
.amount small {font-size:.72em;}
.subtitle {color:#54484a;text-align:center;font-size:13px}
.selected-drink { max-width:540px; display:flex;align-items:center;gap:14px;padding:9px 16px;margin:0 auto 24px;background:#ffffff40;border:1px solid #ffffff30;border-radius:10px;}
.selected-drink img {height:55px;width:42px;object-fit:contain;}
.selected-drink strong {display:block;font-size:15px;}
.stepper {display:inline-flex;align-items:center;justify-content:center;gap:4px;direction:ltr;white-space:nowrap;}
.stepper button {width:32px;height:32px;line-height:1;font:19px Arial;border:1px solid #73495755;border-radius:50%;color:var(--wine);background:#ffffff35;}
.stepper output {font:14px Arial;min-width:19px;text-align:center;}
.selected-drink .stepper {margin-right:auto;}
.sweets {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:start;}
.sweet {position:relative;min-width:0;text-align:center;border:1px solid transparent;border-radius:12px;padding:6px 8px 12px;}
.sweet.chosen {border-color:var(--wine);background:#ffffff28;}
.sweet.chosen:after{content:'✓';position:absolute;right:8px;top:8px;background:var(--wine);color:white;border-radius:50%;width:19px;height:19px;font:12px/19px Arial;pointer-events:none;}
.sweet-pick{display:flex;flex-direction:column;align-items:center;width:100%;min-width:0;padding:0;}
.sweet-pick img{width:93%;height:140px;object-fit:contain;margin:8px 0 12px;filter:drop-shadow(1px 4px 5px #4a343926);}
.sweet .stepper{margin-top:7px;}
.primary {border-radius:7px;padding:12px 20px;min-height:44px;font-weight:600;}
.sticky {position:sticky;bottom:10px;z-index:5;display:flex;align-items:center;justify-content:center;gap:12px;max-width:560px;margin:24px auto 0;padding:8px;background:#dedbd7f5;box-shadow:0 3px 18px #49383d26;border-radius:11px;}
.sticky .primary {flex:1;}.sticky .aux{border:0;}
.result-grid{display:grid;grid-template-columns:minmax(260px,.85fr) minmax(0,1.15fr);align-items:center;gap:40px;direction:ltr;}
.result-grid>*{direction:rtl;}
.exhibit {position:relative;isolation:isolate;width:100%;aspect-ratio:1/.95;max-width:620px;margin:auto;direction:ltr;}
.exhibit img {pointer-events:none;user-select:none;}
.prop,.on-stage,.box-system {position:absolute;transform:translate(-50%,-100%);}
.prop,.on-stage {object-fit:fill;filter:drop-shadow(0 6px 5px #30191b30);}
.on-stage {object-fit:contain;object-position:bottom;filter:drop-shadow(1px 4px 3px #30191b33);}
.box-system{isolation:isolate;}
.carton,.lip{position:absolute;inset:0;width:100%;height:100%;}
.carton{filter:drop-shadow(0 4px 3px #38262c38);}
.lip{clip-path:polygon(0 76%,100% 76%,100% 100%,0 100%);z-index:3;}
.in-box {position:absolute;transform:translate(-50%,-100%);object-fit:contain;object-position:center bottom;z-index:2;}
.page-nav{display:flex;justify-content:center;align-items:center;gap:12px;font-size:13px;margin:6px 0;}
.page-nav button{width:34px;height:34px;border:1px solid #76546055;border-radius:50%;font-size:20px;}
.bill {padding:20px 22px;background:#faf8f249;border:1px solid #ffffff45;border-radius:12px;}
.bill h2{font-size:20px;color:var(--wine);}
.bill-row {display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;border-bottom:1px solid #79656838;padding:12px 0;font-size:14px;}
.bill-row .stepper{justify-self:start;margin-top:5px;}
.bill-total{display:flex;align-items:center;justify-content:space-between;color:var(--wine);margin:15px 0;font-size:19px;}
.bill-actions {display:flex;gap:8px;flex-wrap:wrap;}
.bill-actions button{flex:1;white-space:nowrap;}
.empty-msg{text-align:center;padding:34px 0;}
footer{text-align:center;padding:22px;color:#554749;font-size:12px;}
footer button{text-decoration:underline;text-underline-offset:4px;}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
@media(max-width:760px){:root{--photo-height:clamp(130px,40vw,210px)}.mast{height:85px}main{padding:0 15px 12px}h1{margin-bottom:17px}.navline{margin-bottom:22px}.filter{padding:6px 12px}.find{width:122px}.shelf-row{--columns:2;margin-bottom:18px}.shelf{height:24px;top:calc(var(--photo-height) - 8px)}.caption{padding-top:21px}.caption strong{font-size:16px}.amount{font-size:15px}.sweets{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.sweet-name{font-size:15px}.sweet-pick img{height:110px}.selected-drink{gap:8px;padding:8px 11px}.result-grid{display:flex;flex-direction:column;gap:12px}.art,.bill{width:100%}.exhibit{max-width:440px}.bill{padding:15px}.sticky{gap:3px;bottom:6px}.sticky .aux{padding:6px}.bill-actions button{font-size:13px}.tool{height:34px}}
@media(max-width:365px){.find{width:106px}.filter{padding:6px 9px}.selected-drink{font-size:12px}.stepper button{width:28px;height:28px}.caption strong{font-size:14px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}

@media(max-width:760px){.result-grid .art{order:-1}}

body{background-image:linear-gradient(127deg,#fff5,transparent 62%),var(--wall-image,url('assets/wall.webp'));background-size:cover;background-position:center}
#shelves{max-width:720px;margin:auto}.locked-row{margin-bottom:24px}.locked-scene{position:relative;aspect-ratio:1536/656;isolation:isolate}.slab{position:absolute;top:-26.6768%;left:0;width:100%;pointer-events:none;filter:drop-shadow(4px 8px 5px #372a2138)}.cup-target,.cup-shade{position:absolute}.cup-shade{pointer-events:none}.cup-target{padding:0;line-height:0;transform-origin:center bottom}.cup-target img{width:100%;height:auto}.locked-labels{display:flex;justify-content:space-around;padding:0 6%}.shelf-label{display:grid;justify-items:center;gap:2px;color:var(--wine)}.shelf-label strong{font-size:clamp(16px,2vw,23px)}

/* The drink catalogue follows the proportions of the approved menu panel. */
body:has(.drinks-heading) .mast{max-width:600px;height:clamp(92px,22vw,126px)}
body:has(.drinks-heading) #brand{width:clamp(150px,42vw,235px);max-height:76px}
body:has(.drinks-heading) #bag:has(#count:empty){display:none}
body:has(.drinks-heading) main{max-width:610px;padding:0 9px 20px}
.drinks-heading{gap:18px;margin:2px auto 12px;color:var(--wine);font-size:clamp(27px,6.4vw,39px)}
.drinks-heading::before,.drinks-heading::after{width:15%}
.locked-row{margin:0 0 clamp(4px,1.4vw,10px)}
.locked-labels{display:block;position:relative;padding:0;height:clamp(48px,11vw,64px)}
.shelf-label{position:absolute;transform:translateX(-50%);width:43%;padding:2px 0 0;line-height:1.32;color:var(--wine);gap:2px}
.shelf-label strong{font-size:clamp(16px,3.8vw,22px)}
.shelf-label .amount{font-size:clamp(15px,3.5vw,20px);gap:.28em}
.shelf-label .amount small{font-size:.82em}.cup-target:hover img{filter:brightness(1.055)}
.menu-search{margin:20px auto 0;text-align:center;color:var(--wine)}.menu-search summary{cursor:pointer}.menu-search .navline{margin:12px auto}

#language{position:absolute;right:14px;top:5px;font-size:12px;text-decoration:underline;text-underline-offset:3px;color:var(--wine);padding:5px 8px}
.shelf-label strong,.sweet-name,.bill-row strong,.selected-drink strong{color:#302421}
.amount,.shelf-label .amount{color:#734232;font-size:.92em;font-weight:500;gap:.28em;align-items:center}
.amount svg{width:.85em;height:.85em}.sticky .primary .amount{color:inherit}.amount b{font-weight:550}
.selected-drink img{position:relative;z-index:5;transform-origin:top left}
.sweets{max-width:640px;margin:auto;grid-template-columns:repeat(2,minmax(0,1fr));padding:12px;gap:8px;background:linear-gradient(112deg,#fff5,#fff1 55%,#886f5720),var(--counter,url('assets/counter.webp'));background-size:cover,100% 440px;border-radius:12px}
.sweet-pick img{height:clamp(115px,30vw,185px);object-position:bottom;position:relative;filter:drop-shadow(3px 3px 2px #48302344);margin-bottom:8px}
.sweet-pick{position:relative;isolation:isolate}.sweet-pick:before{content:'';position:absolute;z-index:-1;top:calc(clamp(115px,30vw,185px) - 4px);width:70%;height:17px;background:radial-gradient(ellipse,#57443360,transparent 68%);transform:translateX(4%)}
.remove-sweet{display:inline-grid;place-items:center;min-width:34px;min-height:34px;color:#78334a;border-radius:50%;background:#fff8}
.sweet>.remove-sweet{position:absolute;top:6px;left:6px}.stage-stone,.stage-box{position:absolute;bottom:4%;left:0;width:100%;aspect-ratio:3/2}.stage-box{z-index:8}.stage-box .carton{filter:none}.stage-box .lip{z-index:4}

body:has(.drinks-heading) .mast{height:clamp(104px,18svh,155px);max-width:600px}
body:has(.drinks-heading) #brand{width:45%;max-height:92px;object-fit:contain;filter:drop-shadow(1px 3px 3px #342a262f)}
.drinks-heading{font-size:clamp(22px,5vw,30px);font-weight:600;margin:0 auto clamp(24px,4svh,45px)}
.drinks-heading::before,.drinks-heading::after{display:none}
.locked-labels .amount{font-size:clamp(13px,3.1vw,17px);color:#684b3c}
.locked-labels .shelf-label strong{font-size:clamp(17px,4.2vw,23px);line-height:1.45}
@media(max-width:650px){.locked-row{min-height:clamp(0px,30svh,300px);display:flex;flex-direction:column;justify-content:flex-end}.locked-row:first-child{min-height:0}.locked-labels{height:clamp(54px,8svh,72px)}}


body:has(.drinks-heading){--board:min(100vw,610px)}
body:has(.drinks-heading) main{padding:0;max-width:610px}
body:has(.drinks-heading) .mast{max-width:610px;height:calc(var(--board)*.25);background:var(--head-scene) center top/100% auto no-repeat}
body:has(.drinks-heading) #brand{width:45%;filter:drop-shadow(1px 3px 2px #32281f70)}
.drinks-heading{box-sizing:border-box;margin:0;height:calc(var(--board)*.1085);padding-bottom:calc(var(--board)*.02);background:var(--head-scene) center bottom/100% auto no-repeat;font-size:clamp(24px,6.4vw,38px);font-weight:700;gap:4%}
.drinks-heading::before,.drinks-heading::after{display:block;width:14%}
.reference-row{position:relative;background-size:100% 100%}.reference-row .shelf-label{position:absolute}
.locked-row{min-height:0;margin-bottom:6px}

body:has(.drinks-heading){background-color:#f5e3d0;background-image:url('assets/cream-wall.webp');background-size:cover;background-position:center top;background-attachment:fixed}
body:has(.drinks-heading) .mast,.drinks-heading{background:none}
.reference-stone{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0px 5px 4px #5636194a)}
.reference-row .shelf-label strong{color:#533027}.reference-row .amount{color:#7e2131}

.reference-stone{filter:none}
.reference-row .original-pose{width:40%;transform:translate(-50%,-100%);isolation:isolate}
.original-pose img{width:100%;height:100%;object-fit:contain;object-position:center bottom}
.original-pose:before{content:'';position:absolute;bottom:-1%;left:25%;width:55%;height:7%;border-radius:50%;background:radial-gradient(ellipse,#31170775,transparent 71%);z-index:-1}
body:has(.drinks-heading) .mast{height:calc(var(--board)*.25);background:var(--head-scene) center top/100% auto no-repeat}
.drinks-heading{height:calc(var(--board)*.1508);background:var(--head-scene) center bottom/100% auto no-repeat}

.original-pose:before{content:none}
.cup-surface{position:absolute;width:40%;transform:translateX(-50%);pointer-events:none;overflow:hidden;mask-image:linear-gradient(to bottom,#000 0%,#000c 44%,#0001 100%)}
.cup-surface svg{display:block;width:100%;height:100%;opacity:.62;filter:blur(.32px) saturate(.9)}



body:has(.drinks-heading) .mast,.drinks-heading{background:transparent}
.reference-stone{filter:drop-shadow(2px 5px 4px #6a3b252e)}
.cup-surface svg{opacity:.38}

.ext-cup{transform:translateX(-50%)}.extension .shelf-label{line-height:1.15;gap:1px;padding:0}.extension .shelf-label strong{font-size:clamp(14px,3.8vw,22px)}.extension .shelf-label .amount{font-size:clamp(12px,3.1vw,16px)}
#shelves{container-type:inline-size}
#shelves .shelf-label{width:46%;display:flex;align-items:center;justify-content:center;flex-direction:row;gap:1.4cqw;white-space:nowrap}
#shelves .shelf-label strong{font-size:3.35cqw}
#shelves .shelf-label .amount{font:700 5.1cqw/1.05 Arial;color:#761831;gap:.55cqw}
#shelves .shelf-label .amount b{font:inherit}
#shelves .shelf-label .amount svg{width:4.45cqw;height:4.45cqw}
.amount{direction:ltr;flex-direction:row-reverse}
[dir=rtl] .shelf-label .amount{border-right:1px solid #9d776a;padding-right:1.2cqw}
[dir=ltr] .shelf-label .amount{border-left:1px solid #9d776a;padding-left:1.2cqw}

.wall-part{position:relative}.wall-part>img{display:block;width:100%;height:auto}.wall-hit{position:absolute;transform:translateX(-50%);width:40%;background:transparent;border:0;cursor:pointer}
body:has(.wall-part) .mast{position:absolute;top:0;left:50%;transform:translateX(-50%);width:var(--board);height:calc(var(--board)*.26);z-index:2;pointer-events:none}
body:has(.wall-part) .mast button{pointer-events:auto}body:has(.wall-part) #brand{visibility:hidden}
body:has(.wall-part) #app{position:relative;width:var(--board);max-width:100%;margin:auto;padding:0}
body:has(.wall-part) .drinks-heading{position:absolute;top:calc(var(--board)*.29);width:100%;z-index:1;height:calc(var(--board)*.1);pointer-events:none}
#shelves .wall-part .shelf-label{padding-top:1.5cqw}

body:has(.sweets){background:#f6dfc8 url('assets/cream-wall.webp') center top/cover fixed;color:#4c291c}
body:has(.sweets) .mast{max-width:610px}
body:has(.sweets) #app{max-width:610px;margin:auto;padding-inline:clamp(12px,3vw,24px)}
body:has(.sweets) .selected-drink{max-width:none;background:#d6a57245;border:0;border-radius:13px;margin-bottom:0}
.drink-only{display:flex;align-items:center;gap:12px;color:#711c31;min-height:44px;margin:4px auto 12px;padding:0 14px;font-weight:700}
.drink-only:before,.drink-only:after{content:'';width:32px;height:1px;background:#955948}
body .sweets{background:none;border-radius:0;padding:0;gap:16px 8px}
.sweet-pick img{height:clamp(110px,29vw,172px);filter:drop-shadow(1px 2px 1px #69371838)}
.sweet-pick:before{display:none}
.sweet-pick .amount{color:#78172c;font-size:1.12em;font-weight:700}
body:has(.sweets) .sticky{background:#fae7d5f5;max-width:580px}
body .sweets.dessert-board{display:block;padding:0;margin:0 -12px;container-type:inline-size}
body:has(.dessert-board){background:#fbe4d6}
body:has(.dessert-board) #app{padding-inline:12px}
.dessert-part{position:relative;line-height:1}
.dessert-part>img{display:block;width:100%;height:auto}
.dessert-target{position:absolute;transform:translateX(-50%);width:47%;border:1px solid transparent;border-radius:14px}
.dessert-target.chosen{border-color:#781b32}
.dessert-select{position:absolute;inset:0;width:100%;height:100%;border-radius:14px}
.dessert-caption{position:absolute;left:1%;right:1%;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:1cqw;pointer-events:none}
.dessert-caption button{pointer-events:auto}
.dessert-name{font-weight:700;font-size:3.65cqw;padding:0;color:#533027}
.dessert-caption .amount{font-size:4.6cqw;color:#781b32;pointer-events:none}
.dessert-caption .amount svg{width:.9em;height:.9em}
.dessert-caption .stepper{flex-basis:100%;margin-top:1cqw;gap:8px}
.dessert-caption .stepper button{width:30px;height:30px}
.dessert-target>.remove-sweet{position:absolute;top:3px;left:3px;z-index:1;background:#fff6}
.dessert-target.chosen:after,.wall-hit.chosen:after{content:'✓';position:absolute;right:5px;top:5px;width:23px;height:23px;display:grid;place-items:center;background:#781b32;color:white;border-radius:50%;font:15px Arial}
.wall-hit.chosen{border:1px solid #781b32;border-radius:13px}
.drink-quantity{position:absolute;transform:translateX(-50%);width:44%}
.drink-quantity .stepper{margin:0;gap:8px}
.drink-quantity .stepper button{width:28px;height:28px}
.selected-drinks{display:grid;gap:6px}
body:has(.dessert-board) .sticky{max-width:580px}
@media(min-width:600px){.dessert-caption .stepper button{width:36px;height:36px}}
.selected-drinks .selected-drink{width:100%;margin-inline:0}
.filtered-drinks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:12px}
.filtered-drink{border:1px solid transparent;border-radius:14px;text-align:center}
.filtered-drink.chosen{border-color:#781b32}
.filtered-drink>button{display:flex;flex-direction:column;align-items:center;width:100%;padding:12px}
.filtered-drink img{height:150px;width:100%;object-fit:contain}
.filtered-drink .stepper{padding-bottom:10px}
body:has(.drinks-heading) .sticky{max-width:580px}
body:has(.result-grid){background-color:#f6dfc8;background-image:url('assets/cream-wall.webp');background-position:center top;background-size:cover;background-attachment:fixed}
body:has(.result-grid) .bill{background:#fff4e8b8;border-color:#c99e7e55;box-shadow:0 5px 24px #6f352510}
body:has(.result-grid) .bill-row{border-color:#c99e7e55}

/* Order display: a shared platform for one pair; separate platforms for larger orders. */
body:has(.result-grid) main{max-width:1040px;margin-inline:auto}
.result-grid{align-items:start;gap:24px}
.result-grid .art{align-self:start}
.pair-scene{aspect-ratio:1/.84}
.pair-scene .box-system{left:73%!important;width:43%!important;top:90%!important;height:45%!important}
.result-platforms{display:flex;flex-direction:column;gap:0}
.result-platforms .exhibit{aspect-ratio:1/.85}
.result-platforms .sweets-platform{aspect-ratio:1/.56;margin-top:-2%}
.sweets-platform .box-system{height:62%!important;top:87%!important}
.sweets-platform .prop{height:45%!important}
.result-grid .on-stage{filter:drop-shadow(0 1px 1px #30191b22)}
.result-grid .bill{margin-top:24px}
@media(max-width:760px){.result-grid{gap:0}.result-grid .bill{margin-top:8px}.result-platforms{gap:4px}}

.result-platforms .tiered-scene{aspect-ratio:1/1.2}

@font-face{font-family:Handicrafts;src:url('assets/fonts/Handicrafts-Regular.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:Handicrafts;src:url('assets/fonts/Handicrafts-Semibold.otf') format('opentype');font-weight:600 900;font-display:swap}
@font-face{font-family:Agasiz;src:url('assets/fonts/Agasiz.ttf') format('truetype');font-weight:400 900;font-display:swap}
html[lang=ar] body{font-family:Handicrafts,Tahoma,sans-serif}
html[lang=en] body{font-family:Agasiz,Georgia,serif}
button,input,select{font-family:inherit}
.amount b,.stepper output{font-family:Handicrafts,Arial,sans-serif}
.order-complete{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);z-index:100;background:#741a32;color:#fff5e9;padding:16px 25px;border-radius:16px;box-shadow:0 8px 24px #42182735;text-align:center;width:max-content;max-width:90vw}
.result-grid .prop{filter:drop-shadow(4px 10px 7px #4b291e40)}

.exhibit.duo-stage{aspect-ratio:1;max-width:700px}
.stage-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;mask-image:linear-gradient(transparent,#000 12%,#000 96%,transparent)}
.duo-stage .pair-product{filter:drop-shadow(3px 4px 3px #2d140e44)}
.duo-stage .carton{filter:drop-shadow(3px 5px 3px #2d140e44)}
body:has(.duo-stage) .art{overflow:hidden}

html[lang=ar] .bill-row{font-size:16px}
html[lang=ar] .bill-actions button{font-size:15px}
.duo-stage .stage-background{mask-image:linear-gradient(transparent,#000 12%,#000 95%,transparent),linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-composite:intersect}

html[lang=ar] #shelves .shelf-label strong{font-size:3.9cqw}
html[lang=ar] #shelves .shelf-label[data-drink="iced-spanish-latte"] strong{font-size:3.2cqw}

.registered-pair .registered-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform:none;filter:none;z-index:2}
.registered-pair .pair-contact{position:absolute;pointer-events:none;background:#33190b66;border-radius:50%;filter:blur(5px);z-index:1}
.registered-pair .cup-contact{left:20%;top:62%;width:24%;height:3%}
.registered-pair .cake-contact{left:47%;top:67%;width:35%;height:5%;transform:rotate(8deg)}
.result-grid .bill-row strong{line-height:1.6}
.result-grid .bill h2{line-height:1.5;font-weight:600}
html[lang=en] .bill-row strong,html[lang=en] .bill-actions button{font-weight:400}
html[lang=en] .result-grid .bill-row{font-size:17px}
html[lang=ar] .result-grid .bill-row{font-size:17px}

/* Consistent top controls, independent of the artwork. */
body .mast #language,body .mast .tool{position:absolute;top:14px;transform:none;height:42px;min-width:44px;border:1px solid #9e665d40;background:#fff4e6e8;box-shadow:0 3px 10px #62351c12;border-radius:15px;color:#741b31;display:flex;align-items:center;justify-content:center;gap:7px;padding:0 12px;text-decoration:none;font:600 14px/1 Handicrafts,Arial,sans-serif;backdrop-filter:blur(8px)}
body .mast #language{right:12px;left:auto}
body .mast .bag,body .mast .home{left:12px;right:auto}
body .mast #language svg,body .mast .tool svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
body .mast .bag{width:48px;padding:0}
body .mast #count{position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;padding:2px 4px;border-radius:12px;background:#741b31;color:white;border:2px solid #fff0e1;display:grid;place-items:center;font:600 10px/1 Arial}
html[dir=rtl] .mast .home svg{transform:rotate(180deg)}
body .mast button:hover{background:#fff8ef;box-shadow:0 4px 14px #62351c20}
body:has(.wall-part){--board:min(100vw,760px);background:#f6dfca}
body:has(.wall-part) #app,body:has(.wall-part) .mast{max-width:760px;width:var(--board)}
body:has(.wall-part) #shelves{max-width:none;width:100%}
.wall-part>img{mask-image:none;-webkit-mask-image:none}
body:has(.result-grid){background:#f6dfca}
.duo-stage .stage-background{mask-image:linear-gradient(transparent,#000 16%,#000 93%,transparent),linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-composite:intersect}
.registered-pair .registered-layer{filter:drop-shadow(4px 7px 3px #34170c40)}
.registered-pair .cup-contact{left:20%;top:62.5%;width:25%;height:3%;background:#29120799;filter:blur(3px)}
.registered-pair .cake-contact{left:46%;top:68%;width:37%;height:5%;background:#29120788;filter:blur(5px);transform:rotate(8deg)}
@media(max-width:760px){body:has(.result-grid) #app{padding-inline:0}.result-grid .bill{width:calc(100% - 28px)}.result-grid .art{width:100%}}
@media(max-width:760px){.result-grid .bill{align-self:center}}
.duo-stage .stage-background{mask-image:linear-gradient(transparent,#000 16%,#000 93%,transparent),linear-gradient(90deg,transparent,#000 1.8%,#000 98.2%,transparent);mask-composite:intersect}

/* Keep both original marble ends inside the available viewport. */
body:has(.wall-part){--board:min(100vw,760px)}
body:has(.wall-part) #app{width:100%;max-width:760px}