/* Fortune Trading Corporation: shop, cart and checkout. Uses the same colour and shape variables as site.css. */
.shopgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:1.3rem}
.prod{padding:1rem 1rem 1.2rem;gap:.55rem}
.prod[hidden]{display:none}
.prod .pimg{aspect-ratio:4/5;border-radius:var(--rs) calc(var(--rl)*.7) var(--rs) calc(var(--rl)*.7);overflow:hidden;background:var(--tint);display:grid;place-items:center;color:var(--ink-primary);border:1px solid var(--line);margin-bottom:.3rem}
.prod .pimg img{width:100%;height:100%;object-fit:cover;display:block}
.prod .pimg svg{width:38%;height:38%;opacity:.8}
.prod h3{font-size:1.08rem}
.prod .ptxt{font-size:.9rem;color:var(--muted)}
.price{display:flex;align-items:baseline;gap:.55rem;margin-top:auto;padding-top:.3rem}
.price b{font:700 1.2rem var(--body);color:var(--ink-primary)}
.price s{color:var(--muted);font-size:.9rem}
.buy{display:grid;grid-template-columns:1fr 64px;gap:.5rem}
.buy select{grid-column:1/-1;padding:.55rem .7rem}
.buy select.need{border-color:var(--btn);box-shadow:0 0 0 3px color-mix(in srgb,var(--btn) 25%,transparent)}
.buy input[data-qty]{padding:.55rem .5rem;text-align:center;grid-column:2;grid-row:2}
.buy [data-add]{grid-column:1;grid-row:2;justify-content:center}
.buy:not(:has(select)) input[data-qty]{grid-row:1}
.buy:not(:has(select)) [data-add]{grid-row:1}
.oos{margin-top:auto;font-weight:800;color:var(--muted);font-size:.9rem}
.shopnote{margin-top:1.4rem;color:var(--muted);font-size:.92rem}
.shop-tools .pl-row .sel{max-width:300px;flex:1 1 240px}

/* header cart button */
.cartbtn{all:unset;cursor:pointer;position:relative;width:40px;height:40px;display:grid;place-items:center;flex:none;border:1px solid var(--gl-edge);border-radius:var(--rs) 12px var(--rs) 12px;color:var(--fg);
  background:linear-gradient(180deg,var(--gl1),var(--gl2));box-shadow:inset 0 1px 0 var(--gl-edge),inset 0 -2px 3px var(--sh),0 4px 8px -4px var(--drop2)}
.cartbtn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.cartbtn svg{width:21px;height:21px}
.cartbtn .cnt{position:absolute;top:-6px;right:-7px;min-width:19px;height:19px;padding:0 5px;border-radius:99px;background:var(--btn);color:#fff;font:800 .7rem/19px var(--body);text-align:center;box-shadow:0 0 0 2px var(--bg)}
.cartbtn .cnt[hidden]{display:none}
.cartbtn.pop{animation:cartpop .45s ease}
@keyframes cartpop{40%{transform:scale(1.18)}}
@media (max-width:1120px){.cartbtn{order:2}.burger{order:3;margin-left:0!important}.brand{margin-right:auto}}

/* drawer */
.cartx{position:fixed;inset:0;z-index:60}
.cartx[hidden]{display:none}
.cart-scrim{position:absolute;inset:0;background:rgba(10,8,16,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.cart-panel{position:absolute;top:0;right:0;bottom:0;width:min(480px,100%);background:var(--bg);color:var(--fg);display:flex;flex-direction:column;box-shadow:-20px 0 50px -20px rgba(0,0,0,.5);border-left:1px solid var(--line);animation:cartin .25s ease}
@keyframes cartin{from{transform:translateX(30px);opacity:0}}
@media (prefers-reduced-motion:reduce){.cart-panel,.cartbtn.pop{animation:none}}
body.cart-open{overflow:hidden}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.2rem;border-bottom:1px solid var(--line)}
.cart-head h2{font-size:1.35rem}
.cart-x{all:unset;cursor:pointer;width:36px;height:36px;display:grid;place-items:center;border-radius:8px;border:1px solid var(--line);font-size:1rem}
.cart-x:focus-visible{outline:3px solid var(--accent)}
.cart-body{overflow:auto;padding:1rem 1.2rem 2rem;display:grid;gap:1rem;align-content:start;flex:1}
.cart-empty{color:var(--muted);padding:1rem 0}
.cart-empty[hidden]{display:none}
.cart-list{display:grid;gap:.6rem}
.cl{display:grid;grid-template-columns:auto 1fr auto auto;align-items:start;grid-template-areas:"img info amt rm" "img q q rm";gap:.2rem .7rem;align-items:center;padding:.6rem;border:1px solid var(--line);border-radius:var(--rs) 14px var(--rs) 14px;background:var(--card1)}
.cart-img{grid-area:img;width:52px;height:62px;border-radius:6px;background:var(--tint);overflow:hidden}
.cart-img img{width:100%;height:100%;object-fit:cover}
.cart-info{grid-area:info;display:grid;min-width:0}
.cart-info b{font-size:.94rem;line-height:1.25}
.cart-info small,.cpr{color:var(--muted);font-size:.78rem}
.cq{grid-area:q;display:inline-flex;align-items:center;gap:.2rem;justify-self:start}
.cq button{all:unset;cursor:pointer;width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--line);border-radius:6px;font-weight:800}
.cq button:focus-visible,.crm:focus-visible{outline:3px solid var(--accent)}
.cq span{min-width:28px;text-align:center;font-weight:800}
.camt{grid-area:amt;font-size:.95rem}
.crm{all:unset;cursor:pointer;grid-area:rm;color:var(--muted);padding:.3rem;align-self:start}
.cart-form{padding:0;gap:.85rem}
.cart-form[hidden],.cart-done[hidden],.ship-fields[hidden]{display:none}
.ship-fields{display:grid;gap:.85rem}
.row.three{grid-template-columns:1.2fr 1fr .8fr}
@media (max-width:520px){.row.three{grid-template-columns:1fr 1fr}.row.three .field:first-child{grid-column:1/-1}}
.cart-sum dl{margin:0;display:grid;gap:.3rem;padding:.8rem 1rem;border-radius:var(--rs) 14px var(--rs) 14px;background:var(--tint);border:1px solid var(--line)}
.cart-sum dl div{display:flex;justify-content:space-between}
.cart-sum dt{color:var(--muted)}
.cart-sum dd{margin:0;font-weight:700}
.cart-sum .tot{border-top:1px solid var(--line);padding-top:.35rem;margin-top:.2rem}
.cart-sum .tot dt,.cart-sum .tot dd{color:var(--fg);font-weight:800;font-size:1.08rem}
.cart-sum .hint{font-size:.82rem;color:var(--ink-primary);margin-top:.4rem;font-weight:700}
.opts{border:0;padding:0;margin:0;display:grid;gap:.5rem}
.opts legend{font-weight:800;font-size:.86rem;margin-bottom:.4rem}
.opts label{display:flex;gap:.7rem;align-items:flex-start;padding:.7rem .8rem;border:1px solid var(--line);border-radius:var(--rs) 12px var(--rs) 12px;cursor:pointer;background:var(--card1)}
.opts label:has(input:checked){border-color:var(--btn);box-shadow:0 0 0 2px color-mix(in srgb,var(--btn) 22%,transparent)}
.opts input{width:auto;margin-top:.25rem;box-shadow:none;accent-color:var(--btn)}
.opts span{display:grid}
.opts small{color:var(--muted);font-size:.8rem}
.cart-note{font-size:.88rem;color:var(--muted)}
.cart-legal{font-size:.78rem;color:var(--muted)}
.cart-legal a{color:var(--ink-primary)}
#payBtn{justify-content:center;width:100%;padding-block:.9rem}
#payBtn[disabled]{opacity:.6;cursor:wait}
.cart-done{display:grid;gap:.7rem;padding:1.2rem;border-radius:var(--rs) var(--rl) var(--rs) var(--rl);background:var(--tint);border:1px solid var(--line)}
.cart-done h3{font-size:1.3rem;color:var(--ink-primary)}
.cart-done .btn{justify-self:start}
.prod .pimg:not(:has(img)){aspect-ratio:16/10}
/* make room for the cart button: the header quotation button hides until the screen is wide enough */
.site-header:has(.cartbtn) .hdr-cta{display:none}
@media (min-width:1121px){.site-header:has(.cartbtn) .menu a{padding:.42rem .4rem}}
@media (min-width:1121px) and (max-width:1300px){.site-header:has(.cartbtn) .menu a{font-size:.8rem}}
.cart-img:empty{display:none}
.cl .cq{margin-top:.3rem}