/* Puur Crumb atelier (27 Oct 2026): the made-to-order collection, the allergen filter and the bag drawer.
   Rhythm on purpose: cakes hold their photo on the left, catering on the right, the tasting opens wide.
   Motion: the photo settles about 5% as it arrives, the ingredient list unrolls once, nothing loops. */
.atelier{
 --at-ink:#543525;--at-muted:#6f4c3b;--at-line:rgb(84 53 37 / .2);--at-paper:#f7e4df;--at-card:#fbf1ed;--at-plate:#f2dcd6;
 position:relative;background:var(--at-paper);color:var(--at-ink);
 padding:var(--rhythm-m,128px) var(--edge) var(--rhythm-s,96px);scroll-margin-top:76px}
.atelier :is(h2,h3,h4,p,ul,ol,dl,dd,figure){margin:0}
.atelier ol,.atelier ul{list-style:none;padding:0}

/* ---------- Head ---------- */
.atelier-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px 64px;align-items:end;margin-bottom:56px}
.atelier-head h2{font-size:clamp(46px,5.6vw,84px);line-height:1}
.atelier-head h2 em{color:var(--at-muted)}
.atelier-lede{font-size:17px;line-height:1.6;max-width:42ch;padding-bottom:6px}
.rava-site :is(.atelier-eyebrow,.atelier-label,.atelier-group-title+p,.atelier-filter legend,.atelier-lead,.atelier-opts legend,.bag-eyebrow,.bag-label,.bag-steps li){
 font:400 var(--micro-size,11px)/1.4 var(--font-sans);letter-spacing:var(--micro-track,.14em);text-transform:uppercase;color:var(--micro-ink,#5b3b2c)}
.atelier-eyebrow{margin-bottom:20px!important}

/* ---------- Tools: jump links + the filter ---------- */
.atelier-tools{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 40px;padding:14px 0;border-block:1px solid var(--at-line)}
.atelier-jump{display:flex;flex-wrap:wrap;gap:4px 28px}
.atelier .atelier-jump a{display:inline-flex;align-items:baseline;gap:8px;min-height:44px;align-items:center;font:400 21px/1 var(--font-display);color:var(--at-ink);text-decoration:none}
.atelier-jump a span{font:400 12px/1 var(--font-sans);font-variant-numeric:tabular-nums;color:var(--at-muted);transform:translateY(-6px)}
@media (hover:hover){.atelier-jump a:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}}
.atelier-filter{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;border:0;padding:0;margin:0}
.atelier-filter legend{float:left;margin-right:6px}
.atelier-filter>div{display:flex;flex-wrap:wrap;gap:2px 18px}
.atelier-filter label{position:relative;display:inline-flex;align-items:center;gap:9px;min-height:44px;font-size:15px;cursor:pointer}
.atelier-filter input{position:absolute;opacity:0;width:1px;height:1px}
.atelier-filter label span::before{content:"";display:inline-block;width:16px;height:16px;margin-right:9px;vertical-align:-3px;border:1px solid rgb(84 53 37 / .55);border-radius:3px;background:#fff8 center/11px no-repeat;transition:background-color .3s ease,border-color .3s ease}
.atelier-filter input:checked+span::before{background-color:var(--at-ink);border-color:var(--at-ink);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.3 4.9 9 9.8 3.4' fill='none' stroke='%23fbf1ed' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.atelier-filter input:focus-visible+span{outline:2px solid var(--at-ink);outline-offset:4px;border-radius:2px}
.atelier-filter-status{flex-basis:100%;font-size:13px;color:var(--at-muted);min-height:0}
.atelier-filter-status:empty{display:none}

/* ---------- Groups ---------- */
.atelier-group{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:12px 64px;align-items:baseline;margin-top:var(--rhythm-s,96px);padding-bottom:20px;border-bottom:1px solid var(--at-line);scroll-margin-top:84px}
.atelier-group:first-of-type{margin-top:72px}
.rava-site .atelier-group-title{font-size:clamp(36px,3.6vw,52px);line-height:1}
.atelier-group-title+p{max-width:44ch;text-transform:none!important;letter-spacing:0!important;font-size:14px!important;line-height:1.55!important}

/* ---------- One product, one moment ---------- */
.atelier-item{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start;padding-block:64px;border-bottom:1px solid var(--at-line);scroll-margin-top:72px;transition:opacity .6s ease}
.atelier-item:last-child{border-bottom:0}
.atelier-photo{grid-column:1/span 6;grid-row:1;position:sticky;top:84px;aspect-ratio:4/5;max-height:calc(100svh - 116px);overflow:hidden;border-radius:6px;background:var(--at-plate)}
.atelier-photo img{display:block;width:100%;height:100%;object-fit:cover;transform-origin:50% 60%}
.atelier-copy{grid-column:8/span 5;grid-row:1;padding-block:10vh 14vh}
.atelier-catering .atelier-photo{grid-column:7/span 6}
.atelier-catering .atelier-copy{grid-column:1/span 5}

.atelier-num{display:flex;align-items:baseline;gap:14px;margin-bottom:18px!important}
.atelier-index-num{font:400 30px/1 var(--font-display);color:var(--at-muted);font-variant-numeric:lining-nums}
.rava-site .atelier-copy h3{font-size:clamp(46px,4.6vw,68px);line-height:.96}
.rava-site .atelier-copy h3 em{display:block;margin-top:10px;font-size:.46em;line-height:1.15;color:var(--at-muted)}
.atelier-story{font-size:17px;line-height:1.55;max-width:40ch;margin-top:22px!important}

/* The long list of materials: a recipe card, name in the serif, where it comes from beside it */
.atelier-materials{margin-top:34px}
.atelier-label{padding-bottom:10px;border-bottom:1px solid var(--at-line)}
.atelier-materials li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 20px;align-items:baseline;padding:11px 0;border-bottom:1px solid rgb(84 53 37 / .12)}
.atelier-materials strong{font:400 20px/1.2 var(--font-display);letter-spacing:0}
.atelier-materials li span{font-size:13px;line-height:1.45;color:var(--at-muted)}
.atelier-allergens{margin-top:16px!important;font-size:13px;line-height:1.55;color:var(--at-muted);max-width:46ch}
.atelier-fit{font-weight:700;color:var(--at-ink)}

/* Sizes and mixes: quiet tiles, the price beside the name */
.atelier-choose{margin-top:30px}
.atelier-opts{border:0;padding:0;margin:0 0 18px}
.atelier-opts legend{margin-bottom:10px}
.atelier-opts>div{display:flex;flex-wrap:wrap;gap:8px}
.atelier-opts label{position:relative;flex:1 1 0;min-width:112px;display:flex;flex-direction:column;justify-content:center;gap:3px;min-height:58px;padding:9px 14px;border:1px solid rgb(84 53 37 / .28);border-radius:6px;background:#fff5;cursor:pointer;transition:border-color .3s ease,background-color .3s ease,box-shadow .3s ease}
.atelier-opts input{position:absolute;opacity:0;width:1px;height:1px}
.atelier-opts .opt-name{font-size:15px;line-height:1.25}
.atelier-opts .opt-price{font-size:13px;color:var(--at-muted);font-variant-numeric:tabular-nums}
.atelier-opts label:has(input:checked){border-color:var(--at-ink);background:#fffc;box-shadow:inset 0 0 0 1px var(--at-ink)}
.atelier-opts label:has(input:focus-visible){outline:2px solid var(--at-ink);outline-offset:3px}
@media (hover:hover){.atelier-opts label:hover{border-color:rgb(84 53 37 / .6)}}

.atelier-buy{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;margin-top:22px;padding-top:20px;border-top:1px solid var(--at-line)}
.atelier-price{font:400 40px/1 var(--font-display);font-variant-numeric:lining-nums}
.atelier-lead{margin-top:8px!important;text-transform:none!important;letter-spacing:.01em!important;font-size:12px!important}
.atelier-add{min-height:52px;padding:0 24px;border:1px solid var(--at-ink);border-radius:4px;background:var(--at-ink);color:#fbf1ed;font:400 15px/1.2 var(--font-sans);white-space:nowrap;cursor:pointer;transition:background-color .35s ease,color .35s ease}
@media (hover:hover){.atelier-add:hover{background:#3a2419}}
.atelier-add:focus-visible{outline:2px solid var(--at-ink);outline-offset:3px}
.atelier-item.is-added .atelier-add{background:#7a5543;border-color:#7a5543}
.atelier-added{min-height:24px;margin-top:12px!important;font-size:14px;line-height:1.5}
.atelier-added .text-link{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0;border:0;background:none;color:inherit;font:inherit;text-decoration:underline;text-underline-offset:4px;cursor:pointer}

/* The filter fades what does not fit; nothing moves */
.atelier-item :is(.atelier-photo,.atelier-copy>:not(.atelier-allergens)){transition:opacity .6s ease}
.atelier-item.is-dimmed :is(.atelier-photo,.atelier-copy>:not(.atelier-allergens)){opacity:.42}
.atelier-item.is-dimmed .atelier-photo img{filter:saturate(.55)}

/* A product still to be photographed: a plate on the paper, its name in the serif */
.atelier-photo.is-pending{display:grid;place-items:center;background:linear-gradient(180deg,#f4e3de,#efd6cf)}
.atelier-plate{display:grid;place-items:center;align-content:center;gap:12px;width:62%;aspect-ratio:1;border-radius:50%;border:1px solid rgb(84 53 37 / .16);background:#fbf3ef;box-shadow:0 30px 60px -30px rgb(84 53 37 / .35);text-align:center}
.atelier-plate span{font:400 clamp(28px,2.8vw,40px)/1 var(--font-display);color:var(--at-muted);padding-inline:12%}
.atelier-plate small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--micro-ink,#5b3b2c)}

/* Tailor-made: the photo opens wide, the copy sits in two columns below */
.atelier-tailor .atelier-photo{grid-column:1/-1;position:relative;top:auto;aspect-ratio:16/8;max-height:72svh}
.atelier-tailor .atelier-copy{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:calc(100% / 12 + 24px);padding-block:48px 0}
.atelier-tailor .atelier-copy>*{grid-column:1}
.atelier-tailor .atelier-materials{grid-column:2;grid-row:1/span 3;margin-top:0}
.atelier-tailor .atelier-choose{grid-column:2;grid-row:4/span 2}

/* ---------- Motion: a slow settle and an unrolling list; nothing loops ---------- */
.atelier[data-motion] .atelier-materials li{clip-path:inset(0 100% 0 0);opacity:.001;transition:clip-path 1s var(--ease-out,cubic-bezier(.16,1,.3,1)) calc(var(--i,0) * 75ms + 180ms),opacity .7s ease calc(var(--i,0) * 75ms + 180ms)}
.atelier[data-motion] .atelier-item.is-in .atelier-materials li{clip-path:inset(0 0 0 0);opacity:1}
@supports (animation-timeline: view()){
 .atelier[data-motion] .atelier-photo img{animation:atelier-settle linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
 @keyframes atelier-settle{from{transform:scale(1.05)}to{transform:scale(1)}}
}
@media (prefers-reduced-motion:reduce){
 .atelier[data-motion] .atelier-materials li{clip-path:none;opacity:1;transition:none}
 .atelier[data-motion] .atelier-photo img{animation:none}
 .atelier-item,.atelier-add,.atelier-opts label{transition:none}
}

/* ---------- Laptop and tablet narrower than the two-column moment ---------- */
@media (max-width:1100px){
 .atelier-copy,.atelier-catering .atelier-copy{grid-column:7/-1}
 .atelier-catering .atelier-photo{grid-column:7/-1}
 .atelier-catering .atelier-copy{grid-column:1/span 6}
 .atelier-photo,.atelier-catering .atelier-photo{grid-column-end:span 6}
 .atelier-materials li{grid-template-columns:1fr;gap:2px}
}

/* ---------- Phone first column: photo, then the moment below it ---------- */
@media (max-width:899px){
 .atelier{padding:var(--rhythm-s,96px) 24px 64px}
 .atelier-head{grid-template-columns:1fr;gap:20px;margin-bottom:36px}
 .atelier-head h2{font-size:clamp(40px,11.5vw,54px)}
 .atelier-lede{font-size:16px}
 .atelier-tools{flex-direction:column;align-items:flex-start;gap:6px;padding:10px 0 12px}
 .atelier-jump{gap:0 22px}
 .atelier-jump a{font-size:19px}
 .atelier-filter{gap:0 14px}
 .atelier-filter legend{float:none;margin:6px 0 0}
 .atelier-filter>div{gap:0 16px}
 .atelier-group{grid-template-columns:1fr;margin-top:72px;gap:10px}
 .atelier-group:first-of-type{margin-top:56px}
 .atelier-item,.atelier-catering .atelier-item,.atelier-tailor .atelier-item{display:block;padding-block:40px 48px}
 .atelier-photo,.atelier-tailor .atelier-photo{position:relative;top:auto;aspect-ratio:4/5;max-height:none;width:100%}
 .atelier-tailor .atelier-photo{aspect-ratio:4/3}
 .atelier-copy,.atelier-tailor .atelier-copy{display:block;padding:28px 0 0}
 .rava-site .atelier-copy h3{font-size:clamp(40px,11vw,52px)}
 .atelier-story{font-size:16px;margin-top:18px!important}
 .atelier-materials{margin-top:26px}
 .atelier-materials li{grid-template-columns:1fr;gap:1px;padding:9px 0}
 .atelier-materials strong{font-size:19px}
 .atelier-tailor .atelier-materials{margin-top:26px}
 .atelier-opts label{min-width:0;padding:8px 10px}
 .atelier-buy{flex-direction:column;align-items:stretch}
 .atelier-add{width:100%;min-height:54px}
 .atelier-plate{width:70%}
}

/* ============================== The bag drawer ============================== */
body.bag-is-open{overflow:hidden}
.bag-drawer{
 --bag-ink:#543525;--bag-muted:#6f4c3b;--bag-line:rgb(84 53 37 / .18);
 position:fixed;inset:0 0 0 auto;margin:0;width:min(470px,100vw);max-width:none;height:100dvh;max-height:none;padding:0;border:0;border-left:1px solid #fff8;
 background:#fbf2ee;color:var(--bag-ink);box-shadow:-30px 0 90px rgb(84 53 37 / .2);overflow:hidden;font:400 16px/1.5 var(--font-sans);
 transition:transform .46s var(--ease-out,cubic-bezier(.16,1,.3,1))}
.bag-drawer[open]{transform:none}
@starting-style{.bag-drawer[open]{transform:translateX(100%)}}
.bag-drawer.is-closing{transform:translateX(100%);transition:transform .32s cubic-bezier(.5,0,.75,0)}
.bag-drawer::backdrop{background:rgb(70 36 38 / .34);transition:opacity .4s ease}
@starting-style{.bag-drawer[open]::backdrop{opacity:0}}
.bag-drawer.is-closing::backdrop{opacity:0}
.bag-drawer [hidden]{display:none!important}
.bag-drawer :is(h2,h3,p,dl,dd,ul,ol,fieldset){margin:0}
.bag-drawer :is(ul,ol){list-style:none;padding:0}
.bag-drawer :is(button,input,select,a):focus-visible{outline:2px solid var(--bag-ink);outline-offset:3px}
.bag-frame{display:flex;flex-direction:column;height:100%}
.bag-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:24px 24px 14px}
.rava-site .bag-head h2{font-size:38px;line-height:1;margin-top:8px}
.bag-head h2:focus{outline:0}
.bag-close{flex:none;display:grid;place-items:center;width:44px;height:44px;border:1px solid rgb(84 53 37 / .25);border-radius:50%;background:#fff8;color:var(--bag-ink);font:300 28px/1 var(--font-sans);cursor:pointer}
.bag-drawer .bag-steps{display:flex;gap:22px;padding:0 24px 14px;border-bottom:1px solid var(--bag-line)}
.bag-steps li{position:relative;opacity:.55}
.bag-steps li[aria-current]{opacity:1}
.bag-steps li[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-15px;height:2px;background:var(--bag-ink)}
.bag-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:8px 24px 28px}
.rava-site .bag-step-title{font-size:28px;line-height:1.1;margin:22px 0 16px}

/* Lines */
.bag-line{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:14px;align-items:start;padding:18px 0;border-bottom:1px solid var(--bag-line)}
.bag-thumb{width:56px;height:70px;border-radius:4px;overflow:hidden;background:#f0d9d2}
.bag-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.bag-thumb.is-plate{display:grid;place-items:center;font:400 28px/1 var(--font-display);color:var(--bag-muted)}
.bag-line-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.bag-line-info strong{font:400 21px/1.15 var(--font-display)}
.bag-line-info>span{font-size:13px;color:var(--bag-muted)}
.bag-line-price{font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap;padding-top:3px}
.bag-line-controls{display:flex;align-items:center;gap:14px;margin-top:8px}
.bag-qty{display:inline-flex;align-items:center;border:1px solid rgb(84 53 37 / .28);border-radius:30px}
.bag-qty button{width:44px;height:40px;border:0;background:none;color:var(--bag-ink);font:300 20px/1 var(--font-sans);cursor:pointer}
.bag-qty button:disabled{opacity:.35;cursor:default}
.bag-qty span{min-width:18px;text-align:center;font-size:14px;font-variant-numeric:tabular-nums}
.bag-remove{min-height:44px;padding:0;border:0;background:none;color:var(--bag-muted);font:400 13px/1 var(--font-sans);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.bag-empty{padding:40px 0;font-size:16px;line-height:1.6}
.bag-empty p{font:400 26px/1.2 var(--font-display);margin-bottom:12px}
.bag-empty .text-link{display:inline-flex;gap:6px;align-items:center;min-height:44px;color:inherit;text-decoration:underline;text-underline-offset:4px}

/* Your day */
.bag-mode,.bag-pay{display:grid;gap:8px;border:0;padding:0}
.bag-mode label,.bag-pay label{position:relative;display:flex;align-items:center;gap:14px;min-height:62px;padding:12px 16px;border:1px solid rgb(84 53 37 / .26);border-radius:8px;background:#fff6;cursor:pointer;transition:border-color .3s ease,box-shadow .3s ease}
.bag-mode input,.bag-pay input,.bag-day input{position:absolute;opacity:0;width:1px;height:1px}
.bag-mode label::before,.bag-pay label::before{content:"";flex:none;width:18px;height:18px;border:1px solid rgb(84 53 37 / .55);border-radius:50%;background:#fff;transition:box-shadow .3s ease}
.bag-mode label:has(input:checked),.bag-pay label:has(input:checked){border-color:var(--bag-ink);box-shadow:inset 0 0 0 1px var(--bag-ink);background:#fffb}
.bag-mode label:has(input:checked)::before,.bag-pay label:has(input:checked)::before{box-shadow:inset 0 0 0 5px var(--bag-ink)}
.bag-mode label:has(input:disabled){opacity:.42;cursor:default}
.bag-mode label:has(input:focus-visible),.bag-pay label:has(input:focus-visible){outline:2px solid var(--bag-ink);outline-offset:3px}
.bag-mode span,.bag-pay span{display:flex;flex-direction:column;gap:1px}
.bag-mode strong,.bag-pay strong{font-weight:400;font-size:16px}
.bag-mode small,.bag-pay small{font-size:13px;color:var(--bag-muted)}
.bag-note{font-size:13px;line-height:1.5;color:var(--bag-muted);margin-top:10px!important}
.bag-note:empty{display:none}
.bag-days{border:0;padding:0;margin-top:26px!important}
.bag-days legend{margin-bottom:10px}
.bag-day-strip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.bag-day-head{text-align:center;font-size:11px;letter-spacing:.08em;color:var(--bag-muted);padding-bottom:2px}
.bag-day{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:52px;border:1px solid rgb(84 53 37 / .2);border-radius:6px;background:#fff7;cursor:pointer;transition:background-color .3s ease,color .3s ease}
.bag-day-wk{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.bag-day-num{font:400 19px/1 var(--font-display);font-variant-numeric:lining-nums}
.bag-day-mo{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--bag-muted)}
.bag-day.is-off{background:transparent;border-color:transparent;cursor:default}
.bag-day.is-off .bag-day-num{opacity:.4;text-decoration:line-through;text-decoration-thickness:1px}
.bag-day.is-off .bag-day-mo{opacity:.6}
.bag-day:has(input:checked){background:var(--bag-ink);border-color:var(--bag-ink);color:#fbf1ed}
.bag-day:has(input:checked) .bag-day-mo{color:#f2d8cf}
.bag-day:has(input:focus-visible){outline:2px solid var(--bag-ink);outline-offset:2px}
@media (hover:hover){.bag-day:not(.is-off):hover{border-color:var(--bag-ink)}}
.bag-field{display:flex;flex-direction:column;gap:6px;margin-top:16px;font-size:13px}
.bag-field>span{color:var(--bag-muted)}
.bag-time{margin-top:20px}
.bag-field :is(input,select){width:100%;min-height:48px;padding:10px 12px;border:1px solid rgb(84 53 37 / .32);border-radius:6px;background:#fffc;color:var(--bag-ink);font:400 16px/1.3 var(--font-sans);color-scheme:light}
.bag-field input::placeholder{color:#9b7c6c}
.bag-field :is(input,select):user-invalid{border-color:#9b163e;box-shadow:inset 0 0 0 1px #9b163e}
.bag-occasion{margin-top:30px;padding-top:18px;border-top:1px solid var(--bag-line)}

/* Details and payment */
#bag-form{display:block}
.bag-address{margin-top:4px}
.bag-postcode input{max-width:180px;text-transform:uppercase}
.bag-drawer .bag-pay{margin-top:28px}
.bag-pay legend{margin-bottom:10px}
.bag-concept{margin-top:22px!important;padding:14px 16px;border-radius:8px;background:#f1e0da;font-size:13px;line-height:1.55}
.bag-concept strong{font-weight:700}

/* Done */
.bag-done{padding-top:22px}
.bag-done .bag-step-title{margin-top:10px}
.bag-done .bag-step-title:focus{outline:0}
.bag-receipt{border-top:1px solid var(--bag-line)}
.bag-receipt>div{display:grid;grid-template-columns:104px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--bag-line);font-size:14px;line-height:1.5}
.bag-receipt dt{color:var(--bag-muted)}

/* Foot: totals and the one next step */
.bag-drawer .bag-foot{display:block;padding:14px 24px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--bag-line);background:#f6e5df}
.bag-drawer[data-step="done"] .bag-sums{display:none}
.bag-drawer[data-step="done"] .bag-actions{margin-top:0}
.bag-sums>div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:14px;padding:2px 0}
.bag-sums dd{font-variant-numeric:tabular-nums}
.bag-sums>div:not([hidden])~.bag-total-row{margin-top:4px;padding-top:6px!important;border-top:1px solid var(--bag-line)}
.bag-total-row dt{font-size:14px}
.bag-total-row dd{font:400 26px/1 var(--font-display)}
.bag-actions{display:flex;gap:10px;margin-top:12px}
.bag-back{flex:none;min-height:52px;padding:0 14px;border:1px solid rgb(84 53 37 / .3);border-radius:4px;background:transparent;color:var(--bag-ink);font:400 15px/1 var(--font-sans);cursor:pointer}
.bag-next{flex:1;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:0 20px;border:1px solid var(--bag-ink);border-radius:4px;background:var(--bag-ink);color:#fbf1ed;font:400 15px/1.2 var(--font-sans);cursor:pointer;transition:background-color .3s ease}
.bag-next:disabled{opacity:.4;cursor:default}
@media (hover:hover){.bag-next:not(:disabled):hover{background:#3a2419}}

/* Phone: the bag rises from the bottom as a sheet */
@media (max-width:639px){
 .bag-drawer{inset:auto 0 0 0;width:100vw;height:90dvh;border-left:0;border-radius:18px 18px 0 0;box-shadow:0 -24px 80px rgb(84 53 37 / .22)}
 @starting-style{.bag-drawer[open]{transform:translateY(100%)}}
 .bag-drawer.is-closing{transform:translateY(100%)}
 .bag-head{padding:18px 20px 10px}
 .bag-head::before{content:"";position:absolute;top:8px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:rgb(84 53 37 / .22)}
 .rava-site .bag-head h2{font-size:32px}
 .bag-drawer .bag-steps{padding-inline:20px;gap:18px}
 .bag-body{padding:4px 20px 24px}
 .bag-drawer .bag-foot{padding-inline:20px}
 .bag-day-strip{gap:4px}
 .bag-day{min-height:48px}
 .bag-receipt>div{grid-template-columns:88px minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){.bag-drawer,.bag-drawer::backdrop{transition:none}}

/* The bag button in the glass nav (moved here from the retired shop.css) */
.rava-header .shop-open{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:0;border:0;background:none;color:inherit;white-space:nowrap;cursor:pointer}
.basket-count{display:inline-grid;place-items:center;min-width:28px;height:28px;padding-inline:6px;border:1px solid currentColor;border-radius:50%;font-size:12px;font-variant-numeric:tabular-nums}
@media (max-width:700px){.rava-header .shop-open{gap:6px}.basket-count{min-width:24px;height:24px;font-size:11px}}

/* The visit section's tasting link is now a link, not a button: keep its 44px tap height */
.visit-details a.text-link{display:inline-flex;align-items:center;gap:6px;min-height:44px}

/* ---------- Layout "4, 2, 2", the standard since 27 Oct (her yes); ?layout=one shows the old one-per-row ----------
   Laptop only (phone is always one per row). The four cakes and the two everyday catering boxes sit in pairs;
   the two biggest orders (the dessert table, the tasting) keep the full moment. Space follows price. */
@media (min-width:900px){
 .atelier[data-layout="pairs"] :is(.atelier-list-cakes,.atelier-list-catering){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:64px}
 .atelier[data-layout="pairs"] :is(.atelier-list-cakes,.atelier-list-catering)>.atelier-item:not(#p-table){display:block;padding-block:56px 48px}
 .atelier[data-layout="pairs"] :is(.atelier-list-cakes,.atelier-list-catering)>.atelier-item:not(#p-table) .atelier-photo{position:relative;top:auto;aspect-ratio:1/1;max-height:none;width:100%}
 .atelier[data-layout="pairs"] :is(.atelier-list-cakes,.atelier-list-catering)>.atelier-item:not(#p-table) .atelier-copy{padding:28px 0 0}
 .atelier[data-layout="pairs"] :is(.atelier-list-cakes,.atelier-list-catering)>.atelier-item:not(#p-table) h3{font-size:clamp(40px,3.6vw,54px)}
 .atelier[data-layout="pairs"] .atelier-list-catering>#p-table{grid-column:1/-1}
}

/* ---------- The film melts into the atelier (her note, 27 Oct: "a really hard line where the cake ends") ----------
   The section starts in the film's last rose (#e1c0bd, sampled at the seam) and eases into the paper pink. */
.atelier{background:linear-gradient(180deg,rgb(225 192 189) 0px,rgb(226 194 190) 65px,rgb(228 198 194) 130px,rgb(232 203 200) 195px,rgb(236 210 206) 260px,rgb(240 217 212) 325px,rgb(244 222 218) 390px,rgb(246 226 222) 455px,rgb(247 228 223) 520px) var(--at-paper) no-repeat;background-size:100% 520px}
@media (max-width:899px){.atelier{background:linear-gradient(180deg,rgb(225 192 189) 0px,rgb(226 194 190) 45px,rgb(228 198 194) 90px,rgb(232 203 200) 135px,rgb(236 210 206) 180px,rgb(240 217 212) 225px,rgb(244 222 218) 270px,rgb(246 226 222) 315px,rgb(247 228 223) 360px) var(--at-paper) no-repeat;background-size:100% 360px}}

/* Crypto (the studio's Paykit standard, 27 Oct): Bitcoin · Lightning and USDT sit with the other payment options */
.bag-network{margin-top:12px}
/* Mina's Taha'a (3:4): keep the vanilla pods in the square crop on laptop */
#p-tahaa .atelier-photo img{object-position:50% 28%}
#p-tasting .atelier-photo img{object-position:50% 38%}

/* Mina's petits fours box is square: it stays square on phone too, so the whole box shows */
@media (max-width:899px){#p-petits .atelier-photo{aspect-ratio:1/1}}

/* Motion rhythm (Ariana's tell 6: never one reveal everywhere): cakes settle, catering rises softly, the tasting pans slowly.
   Each about 5%, scroll-driven, still where unsupported or with Reduce Motion. */
@supports (animation-timeline: view()){
 .atelier[data-motion] .atelier-catering .atelier-photo img{animation-name:atelier-rise}
 .atelier[data-motion] .atelier-tailor .atelier-photo img{animation-name:atelier-pan;animation-range:entry 0% cover 55%}
 @keyframes atelier-rise{from{transform:translateY(3%) scale(1.03)}to{transform:none}}
 @keyframes atelier-pan{from{transform:translateX(-2.5%) scale(1.04)}to{transform:none}}
}
@media (prefers-reduced-motion:reduce){.atelier[data-motion] .atelier-photo img{animation:none!important}}
/* Footer logo: a 44px tap area on phones */
@media (max-width:639px){.rava-footer a.wordmark{display:inline-block;padding-block:12px}}