/* the shop: the cart is warm orange (--cart), the wish list warm yellow (--wish) */
:root{--wish:#f2ac00;--wish-soft:rgba(242,172,0,.12);--cart-soft:rgba(242,107,29,.1);--ease:cubic-bezier(.2,.7,.2,1);--spring:cubic-bezier(.3,1.6,.5,1)}

/* the top bar: heart and cart, each with a count */
.bagnav{justify-self:end;display:flex;align-items:center;gap:2px}
.wish{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:var(--wish);opacity:.38;position:relative;cursor:default}
.wish svg{width:22px;height:22px;fill:transparent;transition:fill .25s}
.wish.has svg{fill:currentColor}
.wish.live{opacity:1;cursor:pointer}
.wish .note{position:absolute;top:44px;right:0;white-space:nowrap;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);opacity:0;pointer-events:none;transition:opacity .15s}
.wish:hover .note{opacity:1}
.wish:hover,.cart.live:hover{background:rgba(0,0,0,.035)}
.bagnav .badge{position:absolute;top:2px;right:0;min-width:17px;height:17px;padding:0 5px;border-radius:9px;background:var(--cart);color:#fff;font:600 10px/17px Inter,system-ui,sans-serif;font-style:normal;text-align:center;transform:scale(0);transition:transform .3s var(--spring);pointer-events:none}
.wish .badge{background:var(--wish);color:#3b2a00}
.bagnav .badge.show{transform:scale(1)}
/* the strip between the words of a product page */
.shelf{margin:40px -48px 0;padding:40px 0 0;border-top:1px solid var(--line)}
/* the line sits halfway between the section above and the strip's first words; a section's opening
   block already ends in 24px of its own (Davis, 2026-09-29); the product after a strip starts closer, the
   strip already ends in 34px of room for its cards' shadows (Davis, 2026-10-28) */
.page>.shelf+.intro:not(:first-child){margin-top:8px}
.intro+.shelf{margin-top:16px}
.shelf-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:0 48px;margin-bottom:22px}
.shelf-kick{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute)}
.shelf-kick::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--cart);margin-right:12px;vertical-align:2px}
.shelf h3{font:400 clamp(30px,2.8vw,42px)/1.02 'Instrument Serif',Georgia,serif;margin:12px 0 0}
.shelf-vat{margin-top:9px;padding-left:18px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);opacity:.75}
.shelf-nav{display:flex;gap:8px}
/* the arrows hang centred on the words' last line and add no height: as 40px circles at the row's foot they
   pushed the words 22px further from the line above (Davis, 2026-10-28) */
.shelf-head>.shelf-nav{margin:-11px 0}
.shelf-nav button{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:border-color .2s,opacity .2s,transform .12s}
.shelf-nav button:hover{border-color:var(--ink)}
.shelf-nav button:active{transform:scale(.92)}
.shelf-nav button:disabled{opacity:.3;cursor:default;border-color:var(--line)}
.shelf-nav svg{width:14px;height:14px}
.shelf-nav .prev svg{transform:rotate(180deg)}
.shelf-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 48px;padding:8px 48px 34px;scrollbar-width:none;overscroll-behavior-x:contain}
.shelf-track::-webkit-scrollbar{display:none}
/* the cards stay inside the content's edges (the same line as the logo and the cart; Davis 2026-09-28),
   fading out where more wait; on a phone they run to the screen's edge */
.shelf-track{--g:48px;--fl:0px;--fr:0px;-webkit-mask-image:linear-gradient(90deg,transparent var(--g),rgba(0,0,0,.08) var(--g),#000 calc(var(--g) + var(--fl)),#000 calc(100% - var(--g) - var(--fr)),rgba(0,0,0,.08) calc(100% - var(--g)),transparent calc(100% - var(--g)));mask-image:linear-gradient(90deg,transparent var(--g),rgba(0,0,0,.08) var(--g),#000 calc(var(--g) + var(--fl)),#000 calc(100% - var(--g) - var(--fr)),rgba(0,0,0,.08) calc(100% - var(--g)),transparent calc(100% - var(--g)))}
.shelf.fl .shelf-track{--fl:64px}.shelf.fr .shelf-track{--fr:64px}

.card{flex:0 0 236px;scroll-snap-align:start;position:relative;display:flex;flex-direction:column;gap:4px;padding:14px 16px 16px;background:#fff;border-radius:18px;box-shadow:0 1px 2px rgba(30,20,0,.04);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:0 22px 40px -26px rgba(60,40,10,.35)}
.card .fig{margin:0 0 10px;height:188px;display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center;cursor:pointer}
.card .fig img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .5s var(--ease)}
.card:hover .fig img{transform:scale(1.045)}
.card .meta{display:flex;flex-direction:column;gap:4px}
.card .nm{font:400 21px/1.12 'Instrument Serif',Georgia,serif;font-weight:400}
.card .vr{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.card .buy{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto;padding-top:14px}
.card .price{display:flex;flex-direction:column;gap:1px;font-size:15px;line-height:1.15;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.card .price b{font-weight:500}
.card.find{justify-content:center;background:transparent;border:1px solid var(--line);box-shadow:none;text-decoration:none;color:var(--ink);cursor:pointer}
.card.find:hover{border-color:var(--ink);box-shadow:none}
.card.find .nm{font:400 25px/1.15 'Instrument Serif',Georgia,serif;max-width:8ch}
.card.find .go{margin-top:16px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.card.find .go::after{content:"";display:inline-block;width:7px;height:7px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(-45deg);vertical-align:1px}
.card .price s{font-size:11.5px;font-weight:400;color:var(--mute);text-decoration-thickness:1px}


/* the heart: grey outline, fills warm yellow with a pop and a ring */
.heart{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.9);color:#c2c2bc;display:grid;place-items:center;cursor:pointer;transition:color .2s,transform .12s,background .2s}
.heart:hover{color:var(--wish);background:#fff}
.heart:active{transform:scale(.88)}
.heart svg{width:20px;height:20px;fill:transparent;transition:fill .2s}
.heart.on{color:var(--wish)}
.heart.on svg{fill:currentColor}
.heart::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--wish);opacity:0;transform:scale(.5);pointer-events:none}
.heart.pop svg{animation:heartpop .5s var(--spring)}
.heart.pop::after{animation:heartring .55s ease-out}
@keyframes heartpop{0%{transform:scale(1)}30%{transform:scale(.7)}65%{transform:scale(1.3)}100%{transform:scale(1)}}
@keyframes heartring{0%{opacity:.9;transform:scale(.5)}100%{opacity:0;transform:scale(1.7)}}

/* the copy that arcs up into the bar */
.flyer{position:fixed;z-index:50;pointer-events:none;object-fit:contain;transform-origin:center;will-change:transform}
img.flyer{mix-blend-mode:multiply}
.heart-fly{color:var(--wish);display:grid;place-items:center}
.heart-fly svg{width:100%;height:100%;fill:currentColor}

/* the drawer */
#bagShade{position:fixed;top:0;left:0;bottom:0;right:var(--admin-w);background:rgba(22,22,22,.16);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .35s;z-index:14}
body.bag-open #bagShade{opacity:1;pointer-events:auto}
#bag{position:fixed;top:0;bottom:0;right:var(--admin-w);width:min(440px,100vw);background:#fbfbf9;border-left:1px solid var(--line);display:flex;flex-direction:column;z-index:15;transform:translateX(calc(100% + 30px));visibility:hidden;transition:transform .5s var(--ease),visibility 0s linear .5s;box-shadow:-40px 0 80px -50px rgba(40,30,10,.35)}
body.bag-open #bag{transform:none;visibility:visible;transition:transform .5s var(--ease),visibility 0s}
#bag header{display:flex;justify-content:space-between;align-items:center;padding:18px 20px 6px 28px}
#bag .hint{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#b3b3ae}
#bag .x{width:38px;height:38px;border-radius:50%;border:0;background:none;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background .2s,transform .2s}
#bag .x:hover{background:rgba(0,0,0,.05);transform:rotate(90deg)}
#bag .x svg{width:16px;height:16px}
.bag-body{flex:1;overflow-y:auto;padding:0 16px 40px;scrollbar-width:thin}
.bag-list{padding:18px 12px 24px;border-radius:18px;transition:background .25s,box-shadow .25s}
.bag-list+.bag-list{margin-top:10px}
.bag-list h4{display:flex;align-items:center;gap:12px;margin:0 0 12px;font:400 32px/1 'Instrument Serif',Georgia,serif}
.bag-list h4 i{width:8px;height:8px;border-radius:50%;background:var(--cart);flex:none}
.bag-list h4 em{font:500 11px Inter,system-ui,sans-serif;font-style:normal;letter-spacing:.1em;color:var(--mute);margin-left:auto}
.bag-list .empty{display:none;margin:4px 0 0;font-size:13.5px;line-height:1.5;font-weight:300;color:var(--mute);max-width:32ch}
.bag-list.none .empty{display:block}
.bag-list.none .sum,.bag-list.none .checkout{display:none}

.row{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--line);border-radius:4px}
.row figure{margin:0;width:64px;height:64px;border-radius:12px;background:#fff;display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center;overflow:hidden}
.row img{width:84%;height:84%;object-fit:contain;mix-blend-mode:multiply;pointer-events:none}
.row .nm{display:block;font:400 19px/1.12 'Instrument Serif',Georgia,serif;font-weight:400}
.row .vr{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-top:2px}
.row .acts{display:flex;gap:14px;margin-top:8px}
.row .acts button{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:0;font:400 10.5px Inter,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#a3a39e;cursor:pointer;transition:color .15s}
.row .acts button:hover{color:var(--ink)}
.row .acts .later svg{width:12px;height:12px;fill:transparent;transition:fill .15s}
.row .acts .later:hover{color:#b88300}
.row .acts .later:hover svg{fill:var(--wish);color:var(--wish)}
.row .side{display:flex;flex-direction:column;align-items:flex-end;gap:9px}
.row .rp{font-size:14px;font-weight:500;font-variant-numeric:tabular-nums}
.qty{display:inline-flex;align-items:center;height:30px;border:1px solid var(--line);border-radius:15px;background:#fff}
.qty button{width:28px;height:28px;border:0;background:none;border-radius:50%;font:400 15px/1 Inter,system-ui,sans-serif;color:var(--ink);cursor:pointer;transition:background .15s,color .15s}
.qty button:hover{background:var(--cart-soft);color:var(--cart)}
.qty span{min-width:18px;text-align:center;font-size:12.5px;font-variant-numeric:tabular-nums}

.sum{display:flex;justify-content:space-between;align-items:baseline;margin-top:6px;padding-top:16px;border-top:1px solid var(--ink)}
.sum span{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.sum em{font-style:normal;margin-left:10px;opacity:.7}
.sum b{font:400 30px/1 'Instrument Serif',Georgia,serif;font-variant-numeric:tabular-nums}
.checkout{width:100%;height:50px;margin-top:18px;border:0;border-radius:25px;background:var(--cart);color:#fff;font:500 11.5px Inter,system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;box-shadow:0 14px 28px -16px rgba(242,107,29,.9);transition:filter .2s,transform .12s,box-shadow .2s}
.checkout:hover{filter:brightness(1.06);box-shadow:0 18px 32px -16px rgba(242,107,29,1)}
.checkout:active{transform:scale(.98)}
.checkout:disabled{opacity:.35;box-shadow:none;cursor:default}
.co-note{margin:12px 0 0;text-align:center;font-size:12px;font-weight:300;color:var(--mute)}
.bag-list.none .co-note{display:none}

#bagToast{position:fixed;right:calc(var(--admin-w) + 24px);bottom:24px;z-index:70;display:flex;align-items:center;gap:18px;padding:12px 18px;border-radius:24px;background:var(--ink);color:#f6f6f4;font-size:12.5px;letter-spacing:.02em;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .25s,transform .35s var(--ease)}
#bagToast.on{opacity:1;transform:none;pointer-events:auto}
#bagToast button{border:0;background:none;padding:0;color:var(--wish);font:500 11px Inter,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}

@media (max-width:900px){
  .shelf{margin:32px -20px 0;padding-top:32px}.intro+.shelf{margin-top:8px}
  .shelf-head{padding:0 20px}.shelf-nav{display:none}
  .shelf-track{padding:8px 20px 28px;scroll-padding:0 20px;gap:12px;--g:0px}
  .shelf.fl .shelf-track{--fl:72px}.shelf.fr .shelf-track{--fr:72px}
  .card{flex-basis:62vw;max-width:260px}
  .bagnav{gap:0}.wish,.cart{width:36px;height:36px}
  #bagToast{right:16px;left:16px;justify-content:space-between}
}
@media (max-width:440px){
  .bar{padding:0 10px;gap:6px}.logo{height:17px}
  .ways .cut{margin:0 6px}.ways button{letter-spacing:.1em;font-size:10.5px}
  .wish,.cart{width:32px;height:32px}.wish svg,.cart svg{width:20px;height:20px}
  .bagnav .note{display:none}
}
@media (prefers-reduced-motion:reduce){
  .card,.card .fig img,.heart svg,#bag{transition:none}
  .heart.pop svg,.heart.pop::after{animation:none}
}

/* PRICES HIDDEN (Davis, 2026-10-11: "temporarily hide all of the prices ... visually hidden", until he
   turns them back on). Only the look: every price is still computed and in the page. Delete this block
   and the one at the end of shop/assets/css/lapa.css to show them again.
   Shown again on 2026-10-29 (Davis: "show the 1 euro price everywhere I add products"): the strip cards'
   price and VAT line, the drawer's line prices and total, every product at 1 € (getProducts() in
   shop/includes/functions.php, PLACEHOLDER in shop.js). To hide them again:
   .card .price,.shelf-vat,.row .rp,.sum{display:none!important} */