/* ============ Laguz · Shop page ============ */

/* backdrop: the photo stays fixed behind the page, softened by an ivory veil */
body.page-shop{background:#e9dcc6}
.page-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:#efe2cc;transition:opacity .7s var(--ease),visibility 0s}
/* among the products: a clean ivory page, the wall of photos stops */
.res-mode .page-bg{opacity:0;visibility:hidden;transition:opacity .7s var(--ease),visibility 0s .7s}
.res-mode .wall-col{animation-play-state:paused}
body.page-shop{background:var(--ivory)}
/* a wall of the shop's own pieces drifting in slow columns (each column is one GPU layer) */
.wall{position:absolute;inset:-25% -12%;z-index:0;display:flex;justify-content:center;gap:18px;transform:rotate(-8deg);opacity:0;transition:opacity 2.4s var(--ease)}
.wall.on{opacity:1}
.wall-col{flex:0 0 clamp(140px,15vw,220px);will-change:transform;animation:wallUp var(--t,90s) linear infinite}
.wall-col:nth-child(even){animation-name:wallDown}
.wall img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:4px;margin-bottom:18px;filter:sepia(.3) saturate(.95) brightness(1.03)}
@keyframes wallUp{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-50%,0)}}
@keyframes wallDown{from{transform:translate3d(0,-50%,0)}to{transform:translate3d(0,0,0)}}
/* warm veil: ivory where the text sits, saffron and rose glowing through towards the edges */
.page-bg::after{content:"";position:absolute;inset:0;z-index:1;background:
  linear-gradient(180deg,rgba(246,242,236,.9) 0%,rgba(246,242,236,.84) 24%,rgba(246,242,236,.5) 45%,rgba(246,242,236,.42) 80%,rgba(246,242,236,.8) 100%),
  radial-gradient(ellipse 60% 50% at 95% 10%,rgba(212,145,63,.28),transparent 70%),
  radial-gradient(ellipse 50% 50% at 85% 100%,rgba(142,47,42,.16),transparent 70%)}
.page-bg .bg-fx{z-index:2}

.catalog{position:relative;min-height:100svh;padding:clamp(7rem,10vw,8.5rem) clamp(1rem,4vw,3.5rem) clamp(4rem,8vw,6rem);background:linear-gradient(180deg,rgba(246,242,236,0) 0%,rgba(246,242,236,.25) 70svh,rgba(246,242,236,.9) 100svh,rgba(246,242,236,.96) 100%)}
.catalog .fx-mandala{opacity:.18}

/* ---------- top line: label + progress ---------- */
.guide-top{position:relative;display:flex;justify-content:space-between;align-items:flex-end;gap:1rem 2rem;flex-wrap:wrap;padding-bottom:1.1rem;border-bottom:1px solid var(--line)}
.guide-top::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:var(--gold);transform:scaleX(var(--p,0));transform-origin:left;transition:transform 1.2s var(--ease)}
.steps{display:flex;flex-wrap:wrap;gap:.4rem clamp(1rem,3vw,2.6rem);list-style:none}
.steps li{display:flex;align-items:baseline;gap:.55rem;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);transition:color .6s}
.steps li b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1rem;letter-spacing:0;line-height:1}
.steps li.done{color:var(--gold)}
.steps li.on{color:var(--ink)}
.steps li.on b{color:var(--gold)}

/* ---------- steps ---------- */
.step{display:none;margin-top:clamp(1.8rem,4vh,3rem)}
.step.on{display:block}
.step-head{position:relative;display:flex;justify-content:space-between;align-items:flex-end;gap:.8rem 3rem;flex-wrap:wrap;margin-bottom:clamp(1.4rem,3.5vh,2.6rem)}
/* a soft ivory halo behind the title and text, so they stay readable over the wall of photos */
.step-head::before{content:"";position:absolute;inset:-2.5rem -4rem -1.5rem;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 60% 85% at 28% 55%,rgba(246,242,236,.95),rgba(246,242,236,.75) 55%,rgba(246,242,236,0) 80%)}
.step-title,.step h2{font-family:var(--serif);font-weight:300;font-size:clamp(2.6rem,6vw,5.2rem);line-height:1;letter-spacing:-.01em;margin:0;text-wrap:balance}
.step-title em,.step h2 em{font-style:italic;color:var(--gold)}
.step-intro{color:var(--muted);max-width:25rem;font-size:.98rem;animation:fadeUp .9s .3s var(--ease-out) both}
.step-actions{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;margin-top:clamp(1.4rem,3vh,2.2rem);animation:fadeUp .9s .6s var(--ease-out) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* titles rise word by word (words are wrapped by shop.js) */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.w > span{display:inline-block;animation:wordUp 1s var(--ease-out) both;animation-delay:calc(var(--i) * 70ms)}
@keyframes wordUp{from{transform:translateY(108%)}to{transform:none}}

.textlink{background:none;border:0;font:inherit;font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;cursor:pointer;color:var(--ink);padding:.3rem 0;background-image:linear-gradient(currentColor,currentColor);background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .6s var(--ease)}
.textlink:hover{background-size:0 1px;background-position:100% 100%}
.textlink.muted{color:var(--muted)}

/* ---------- category / style choice: gallery panels that open on hover ---------- */
.choices{display:flex;gap:clamp(.5rem,1vw,.9rem);height:clamp(320px,50vh,540px)}
.choice{position:relative;flex:1 1 0;min-width:0;overflow:hidden;border:0;padding:0;border-radius:4px;cursor:pointer;background:var(--sand);color:var(--ivory);font:inherit;text-align:left;transition:flex-grow .9s var(--ease);animation:panelIn 1.1s var(--ease) both;animation-delay:calc(var(--i) * 90ms + .15s)}
@keyframes panelIn{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
.choices:hover .choice{flex-grow:.72}
.choices .choice:hover,.choices .choice:focus-visible{flex-grow:2;outline:none}
.choice .media{position:absolute;inset:0}
.choice .media img{animation:imgIn 1.8s var(--ease-out) both;animation-delay:calc(var(--i) * 90ms + .15s);transition:transform 1.4s var(--ease-out)}
@keyframes imgIn{from{scale:1.3}to{scale:1.1}}
.choice:hover .media img,.choice:focus-visible .media img{transform:scale(.93)}
.choice .media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,18,16,.8) 0%,rgba(20,18,16,.18) 50%,rgba(20,18,16,0) 75%);transition:opacity .8s}
.choice:hover .media::after{opacity:.8}
.choice .meta{position:absolute;z-index:2;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:flex-start;gap:.7rem;padding:clamp(1.1rem,2vw,1.7rem) clamp(1rem,2vw,1.7rem) clamp(1.5rem,2.6vw,2.2rem)}
.choice .name{font-family:var(--serif);font-weight:300;font-size:clamp(1.5rem,2.3vw,2.3rem);line-height:1.02;text-wrap:balance}
.choice .go{display:inline-flex;align-items:center;gap:.6rem;font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.choice:hover .go,.choice:focus-visible .go{opacity:1;transform:none;transition-delay:.15s}
.choice::after{content:"";position:absolute;z-index:2;left:clamp(1rem,2vw,1.7rem);right:clamp(1rem,2vw,1.7rem);bottom:clamp(.8rem,1.4vw,1.2rem);height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease)}
.choice:hover::after,.choice:focus-visible::after{transform:scaleX(1)}

/* ---------- step 2 (lines of a category): the site's own square photos, shown whole ---------- */
/* all the lines of a category side by side on one row, same size (--n = how many, set by shop.js) */
#choicesSub{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,300px));justify-content:center;align-items:start;gap:clamp(1.2rem,2.4vw,2.2rem);height:auto;perspective:1200px}
#choicesSub .choice{flex:0 0 clamp(220px,21vw,320px);aspect-ratio:auto;display:flex;flex-direction:column;overflow:visible;background:none;color:var(--ink);border-radius:0;animation:none;opacity:0;transform:translateY(50px) rotateX(18deg);transform-origin:50% 100%;transition:transform 1.1s var(--ease-out),opacity .9s var(--ease-out);transition-delay:calc(var(--i) * 120ms + .1s)}
#choicesSub .choice.shown{opacity:1;transform:none}
#choicesSub:hover .choice{flex-grow:0}
/* the photo is never cropped or recoloured: square frame, image at its natural size */
#choicesSub .choice .media{position:relative;inset:auto;aspect-ratio:1/1;overflow:hidden;background:#fff;clip-path:polygon(50% 50%,50% 50%,50% 50%,50% 50%);transition:clip-path 1.3s var(--ease);transition-delay:calc(var(--i) * 120ms + .25s);box-shadow:0 30px 50px -36px rgba(29,22,18,.55)}
#choicesSub .choice.shown .media{clip-path:polygon(50% -50%,150% 50%,50% 150%,-50% 50%)}
#choicesSub .choice .media::after{content:"";inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%) no-repeat;background-size:250% 100%;background-position:150% 0;opacity:1;transition:background-position 1.1s var(--ease)}
#choicesSub .choice:hover .media::after,#choicesSub .choice:focus-visible .media::after{background-position:-50% 0}
#choicesSub .choice .media img{animation:none;scale:1;transform:none;transition:transform 1.4s var(--ease-out)}
#choicesSub .choice:hover .media img,#choicesSub .choice:focus-visible .media img{transform:scale(1.04)}
/* gold lacquer frame drawing itself around the photo on hover */
#choicesSub .choice::before{content:"";position:absolute;top:-8px;left:-8px;right:-8px;aspect-ratio:1/1;z-index:0;border:1px solid var(--gold);clip-path:inset(0 100% 100% 0);transition:clip-path 1s var(--ease);pointer-events:none}
#choicesSub .choice:hover::before,#choicesSub .choice:focus-visible::before{clip-path:inset(0 0 0 0)}
#choicesSub .choice::after{display:none}
#choicesSub .choice:focus-visible{outline:none}
/* name under the photo */
#choicesSub .choice .meta{position:static;flex-direction:row;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem .2rem 0}
#choicesSub .choice .name{font-size:clamp(1.3rem,1.8vw,1.7rem);background:linear-gradient(var(--gold),var(--gold)) 0 100%/0 1px no-repeat;transition:background-size .8s var(--ease)}
#choicesSub .choice:hover .name,#choicesSub .choice:focus-visible .name{background-size:100% 1px}
#choicesSub .choice .go{opacity:1;transform:none;color:var(--muted);transition:color .4s,transform .6s var(--ease-out)}
#choicesSub .choice:hover .go{color:var(--gold);transform:translateX(4px)}
/* ---------- results ---------- */
.results{margin-top:clamp(1.8rem,4vh,3rem)}
.res-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem 2rem;flex-wrap:wrap;padding-bottom:clamp(1.4rem,3vw,2.2rem)}
.res-head h2{font-size:clamp(2.4rem,5.5vw,4.6rem);line-height:1;margin:.9rem 0 .5rem;text-wrap:balance}
.res-head .note{font-family:var(--serif);font-style:italic;color:var(--muted);font-size:1.1rem;animation:fadeUp .9s .3s var(--ease-out) both}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.crumbs button{background:none;border:0;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;padding:0;transition:color .3s}
.crumbs button:hover{color:var(--ink)}
.crumbs .sep{opacity:.45}
.crumbs .cur{color:var(--gold)}
.restart{display:inline-flex;align-items:center;gap:.7rem;background:none;border:0;border-bottom:1px solid currentColor;font:inherit;font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);cursor:pointer;padding:.5rem 0}
.restart svg{transition:transform .8s var(--ease-out)}
.restart:hover svg{transform:rotate(-200deg)}

/* filters bar: stays under the top bar while scrolling */
.toolbar{position:sticky;top:var(--hdr-s,72px);z-index:20;display:flex;justify-content:space-between;align-items:center;gap:0 2.4rem;flex-wrap:wrap;margin:0 calc(-1 * clamp(1rem,4vw,3.5rem)) clamp(2rem,4vw,3.2rem);padding:0 clamp(1rem,4vw,3.5rem);background:rgba(246,242,236,.97);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.seg{position:relative;display:flex;gap:clamp(1.2rem,2.8vw,2.6rem);overflow-x:auto;scrollbar-width:none;max-width:100%}
.seg::-webkit-scrollbar{display:none}
.seg button{background:none;border:0;font:inherit;font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;white-space:nowrap;color:var(--muted);cursor:pointer;padding:1.15rem 0;transition:color .4s}
.seg button:hover,.seg button.on{color:var(--ink)}
/* lines of a category, opened by hovering its name in the filters bar */
.subdrop{position:absolute;top:100%;left:0;z-index:30;min-width:240px;display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;padding:1rem 1.2rem 1.1rem;background:var(--ivory);border:1px solid var(--line);border-top:1px solid var(--gold);box-shadow:0 30px 60px -30px rgba(29,22,18,.45);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .35s var(--ease-out),transform .45s var(--ease-out),visibility 0s .45s}
.subdrop.open{opacity:1;visibility:visible;transform:none;transition:opacity .35s var(--ease-out),transform .45s var(--ease-out),visibility 0s}
.subdrop-title{font-family:var(--serif);font-style:italic;font-size:1.1rem;color:var(--gold);margin-bottom:.35rem}
.subdrop button{display:flex;align-items:center;gap:.6rem;width:100%;background:none;border:0;font:inherit;font-size:.82rem;text-align:left;color:var(--muted);cursor:pointer;padding:.42rem 0;opacity:0;transform:translateX(-6px);transition:color .3s,padding .4s var(--ease-out)}
.subdrop.open button{opacity:1;transform:none;transition:color .3s,padding .4s var(--ease-out),opacity .4s calc(var(--k) * 45ms + 60ms),transform .5s var(--ease-out) calc(var(--k) * 45ms + 60ms)}
.subdrop button::before{content:"";width:5px;height:5px;transform:rotate(45deg);border:1px solid currentColor;transition:background .3s}
.subdrop button:hover,.subdrop button:focus-visible,.subdrop button.on{color:var(--ink);padding-left:.3rem;outline:none}
.subdrop button.on::before,.subdrop button:hover::before{background:var(--gold);border-color:var(--gold)}
.seg-ind{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--gold);transition:transform .7s var(--ease),width .7s var(--ease)}
.subfilters{display:flex;flex-wrap:wrap;gap:.3rem 1.5rem;padding:.7rem 0}
.subfilters:empty{display:none}
.subfilters button{display:inline-flex;align-items:center;gap:.55rem;background:none;border:0;font:inherit;font-size:.74rem;color:var(--muted);cursor:pointer;padding:.15rem 0;transition:color .4s;animation:fadeUp .6s var(--ease-out) both}
.subfilters button:nth-child(2){animation-delay:.05s}.subfilters button:nth-child(3){animation-delay:.1s}.subfilters button:nth-child(4){animation-delay:.15s}.subfilters button:nth-child(5){animation-delay:.2s}
.subfilters button::before{content:"";width:7px;height:7px;border-radius:50%;border:1px solid currentColor;transition:background .4s,border-color .4s}
.subfilters button:hover,.subfilters button.on{color:var(--ink)}
.subfilters button.on::before{background:var(--gold);border-color:var(--gold)}

/* product grid: no boxes, the photo is the object */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:clamp(1.8rem,3vw,2.6rem) clamp(.9rem,1.6vw,1.4rem)}
.card{cursor:pointer;outline:none;transition:opacity .35s}
.grid.out .card{opacity:0}
.card .img{position:relative;aspect-ratio:1/1;max-width:100%;overflow:hidden;border-radius:2px;background:#efe7db;clip-path:inset(100% 0 0 0);transition:clip-path 1.1s var(--ease);transition-delay:var(--d,0s)}
.card.in .img{clip-path:inset(0 0 0 0)}
.card .img::before{content:"";position:absolute;inset:7px;z-index:2;border:1px solid rgba(176,144,90,.38);pointer-events:none;transition:inset .7s var(--ease-out),border-color .7s}
.card .img::after{content:"";position:absolute;inset:3px;z-index:2;pointer-events:none;opacity:.55;transition:opacity .7s,inset .7s var(--ease-out);
  background:
    linear-gradient(45deg,transparent 42%,var(--gold) 42% 58%,transparent 58%) 0 0/9px 9px no-repeat,
    linear-gradient(45deg,transparent 42%,var(--gold) 42% 58%,transparent 58%) 100% 0/9px 9px no-repeat,
    linear-gradient(45deg,transparent 42%,var(--gold) 42% 58%,transparent 58%) 0 100%/9px 9px no-repeat,
    linear-gradient(45deg,transparent 42%,var(--gold) 42% 58%,transparent 58%) 100% 100%/9px 9px no-repeat}
.card:hover .img::before,.card:focus-visible .img::before{inset:11px;border-color:rgba(176,144,90,.75)}
.card:hover .img::after,.card:focus-visible .img::after{opacity:1;inset:7px}
.card .img img{position:absolute;inset:0;scale:1.18;transition:scale 1.6s var(--ease-out),transform 1.2s var(--ease-out),opacity .8s var(--ease);transition-delay:var(--d,0s),0s,0s}
.card.in .img img{scale:1}
.card .img img.alt{opacity:0}
.card:hover .img img,.card:focus-visible .img img{transform:scale(1.05)}
.card:hover .img img.alt,.card:focus-visible .img img.alt{opacity:1}
.card:focus-visible .img{outline:1px solid var(--gold);outline-offset:4px}
.card .info{display:flex;justify-content:space-between;align-items:flex-start;gap:.8rem;padding-top:1rem;opacity:0;transform:translateY(10px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);transition-delay:calc(var(--d,0s) + .3s)}
.card.in .info{opacity:1;transform:none}
.card h3{display:inline;font-family:var(--serif);font-weight:400;font-size:1.12rem;line-height:1.2;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .7s var(--ease)}
.card:hover h3,.card:focus-visible h3{background-size:100% 1px}
.card .lbl{display:block;margin-top:.4rem;font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.card .go{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:background .5s,color .5s,border-color .5s,transform .7s var(--ease-out)}
.card:hover .go,.card:focus-visible .go{background:var(--ink);color:var(--ivory);border-color:var(--ink);transform:rotate(-45deg)}

/* ---------- product detail: floating panel over the blurred page ---------- */
.lb{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:clamp(1rem,3vw,2.5rem);background:rgba(20,18,16,.7);opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility 0s .6s}
.lb.open{opacity:1;visibility:visible;transition:opacity .6s var(--ease),visibility 0s}
.lb-panel{position:relative;width:min(1120px,100%);height:min(700px,100%);display:grid;grid-template-columns:1.1fr .9fr;background:var(--ivory);border-radius:8px;overflow:hidden;box-shadow:0 60px 120px -40px rgba(0,0,0,.6);transform:translateY(60px) scale(.97);transition:transform .9s var(--ease-out)}
.lb.open .lb-panel{transform:none}
.lb-media{position:relative;background:#efe7db;overflow:hidden}
.lb-media > img{position:absolute;inset:0;opacity:0;transform:scale(1.06);transition:opacity .8s var(--ease),transform 1.6s var(--ease-out)}
.lb-media > img.on{opacity:1;transform:none}
/* the row of photos stops before the previous / next arrows (bottom-right of the photo); many photos scroll sideways */
/* the row of photos stops before the previous / next arrows (bottom-right of the photo) */
.lb-thumbs{position:absolute;left:1.2rem;right:calc(1.2rem + 112px);bottom:1.2rem;display:flex;gap:.5rem;z-index:2}
.lb-thumbs:empty{display:none}
.lb-thumbs img{display:block;width:100%;height:100%;object-fit:cover}
.lb-thumbs button{width:56px;height:56px;border:1px solid transparent;border-radius:3px;overflow:hidden;padding:0;cursor:pointer;background:var(--ivory);opacity:.55;transition:opacity .4s,border-color .4s}
.lb-thumbs button.on{opacity:1;border-color:var(--gold)}
.lb-info{display:flex;flex-direction:column;justify-content:center;padding:clamp(1.6rem,4.5vw,4.5rem);padding-bottom:6rem;overflow-y:auto}
.lb-info h2{margin:1rem 0}
.lb-chips{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin-bottom:1.4rem}
.lb-chips span{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:.5rem}
.lb-chips span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold)}
.lb-info p{color:var(--muted);max-width:26rem}
.lb-info .lb-desc{color:var(--ink);font-family:var(--serif);font-size:1.15rem;line-height:1.5;margin:0 0 1.2rem;white-space:pre-line}
.lb-specs{display:grid;grid-template-columns:auto 1fr;gap:.45rem 1.2rem;margin:0 0 1.4rem;max-width:26rem;font-size:.85rem}
.lb-specs dt{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);padding-top:.2rem}
.lb-specs dd{margin:0}
.lb-info [hidden]{display:none}
.lb-info .btns{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.lb-info .btns .btn{margin-top:0;padding:1rem 1.8rem}
@keyframes swapIn{from{opacity:0;transform:translate(calc(var(--dx,0) * 50px),calc(var(--dy,1) * 24px))}to{opacity:1;transform:none}}
.lb-panel.swap .lb-info > *{animation:swapIn .8s var(--ease-out) both}
.lb-panel.swap .lb-info > *:nth-child(2){animation-delay:.06s}
.lb-panel.swap .lb-info > *:nth-child(3){animation-delay:.12s}
.lb-panel.swap .lb-info > *:nth-child(4){animation-delay:.18s}
.lb-panel.swap .lb-info > *:nth-child(5){animation-delay:.24s}
.lb-panel.swap .lb-media > img.on{animation:swapIn 1s var(--ease-out) both}
.lb-close{position:absolute;top:1.1rem;right:1.1rem;z-index:3;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);cursor:pointer;background:rgba(246,242,236,.9);transition:transform .6s var(--ease-out),background .4s}
.lb-close::before,.lb-close::after{content:"";position:absolute;top:50%;left:30%;width:40%;height:1px;background:var(--ink);transform:rotate(45deg)}
.lb-close::after{transform:rotate(-45deg)}
.lb-close:hover{transform:rotate(90deg);background:var(--ivory)}
/* previous / next piece: on the photo's bottom-right corner, so the text column scrolls freely under nothing */
.lb-nav{position:absolute;right:calc(45% + 1.2rem);bottom:1.2rem;z-index:2;display:flex;align-items:center;justify-content:flex-end;gap:1rem}
.lb-arrows{display:flex;gap:.5rem}
.lb-arrows button{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:rgba(246,242,236,.92);cursor:pointer;display:grid;place-items:center;color:var(--ink);transition:background .4s,color .4s,border-color .4s}
.lb-arrows button:hover{background:var(--ink);color:var(--ivory);border-color:var(--ink)}

/* ---------- shop information band ---------- */
.shop-info{background:#f3ece2;padding-block:clamp(3rem,6vw,5rem)}
.shop-contact{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;border-top:1px solid var(--line);padding-top:2.5rem}
.shop-contact h4,.shop-contact .h4{font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);font-weight:400;margin-bottom:.8rem}
.shop-contact p{font-family:var(--serif);font-size:1.3rem;line-height:1.45}

/* ---------- responsive ---------- */

@media (max-width:900px){
  .wall{inset:-20% -30%}
  .wall-col{flex-basis:30vw}
  .wall-col:nth-child(n+5){display:none}
  .catalog{padding-top:6.2rem}
  .catalog .fx-mandala{right:-55%;top:-4%;width:140vw;opacity:.14}
  .steps{gap:.3rem 1rem}
  .steps li{font-size:.54rem;letter-spacing:.16em}
  .steps li b{font-size:.85rem}
  .step-head{flex-direction:column;align-items:flex-start}
  .step-intro{font-size:.92rem}
  /* panels become a stack of horizontal bands */
  .choices{flex-direction:column;height:auto;gap:.5rem}
  .choice{flex:none;height:clamp(78px,11vh,104px)}
  .choices:hover .choice,.choices .choice:hover{flex-grow:0}
  .choice .media::after{background:linear-gradient(90deg,rgba(20,18,16,.72) 0%,rgba(20,18,16,.25) 60%,rgba(20,18,16,.05) 100%)}
  .choice .meta{top:0;flex-direction:row;align-items:center;justify-content:space-between;padding:0 1.1rem}
  .choice .name{font-size:1.55rem}
  .choice .go{opacity:1;transform:none}
  .choice .go .t{display:none}
  #choicesSub{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem .8rem}
  #choicesSub .choice{height:auto}
  #choicesSub .choice .meta{top:auto;padding:.7rem 0 0}
  #choicesSub .choice .name{font-size:1.1rem}
  #choicesSub .choice .go .t{display:none}
  .choice::after{display:none}
  .toolbar{top:var(--hdr-s,72px)}
  .grid{grid-template-columns:repeat(3,1fr);gap:1.4rem .6rem}
  .card h3{font-size:.92rem}
  .card .lbl{font-size:.5rem;letter-spacing:.14em}
  .card .info{padding-top:.6rem}
  .card .img::before{inset:4px}
  .card .img::after{inset:1px}
  .card .go{display:none}
  .lb{padding:0;place-items:end center}
  .lb-panel{grid-template-columns:1fr;grid-template-rows:46vh auto;height:94vh;border-radius:14px 14px 0 0;overflow-y:auto;transform:translateY(100%)}
  .lb-info{padding:1.6rem 1.2rem 7rem;overflow:visible;justify-content:flex-start}
  .lb-nav{position:fixed;left:0;right:0;bottom:0;padding:.8rem 1.2rem;background:rgba(246,242,236,.98);border-top:1px solid var(--line)}
  .lb-close{top:.8rem;right:.8rem}
  .lb-thumbs{right:1.2rem}
  .shop-contact{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.wall-col{animation:none}}
.card .price{display:block;margin-top:.35rem;font-family:var(--serif);font-size:1.12rem;color:var(--ink)}
/* many photos: the thumbnail strip scrolls */
.lb-thumbs{overflow-x:auto;scrollbar-width:none}
.lb-thumbs::-webkit-scrollbar{display:none}
.lb-thumbs button{flex:none}