/* The Shoppe: Tebex categories, package cards and the basket drawer. Loaded on the Shoppe page only.
   The page stands on umber, candlelight, like the Shoppe wall on the front page. The cards are flat
   fields; only their buttons, the basket pill and the drawer's controls are pressable. */
html,body{background-color:var(--umber)}
body{--mm-ground:#2d1c0f}

.mm-shop-admin{margin:0 0 20px;padding:10px 14px;box-shadow:inset 3px 0 0 var(--mm-vitae);background:#2d1c0f;font-size:14px;color:var(--mm-ash)}

.mm-shop-thanks{display:grid;gap:6px;justify-items:center;text-align:center;margin:0 0 40px;padding:28px 24px}
.mm-shop-thanks .mm-ico{width:40px;height:40px;color:var(--mm-brass)}
.mm-shop-thanks-title{margin:0;font:var(--display-wght) calc(24px * var(--display-scale))/1.15 var(--display);letter-spacing:0;color:var(--mm-ink)}
.mm-shop-thanks p{margin:0;color:var(--mm-ash)}

.mm-shop-cat{margin:clamp(36px,6vw,64px) 0 0}
.mm-shop-cat-head{max-width:70ch;margin-bottom:22px}
.mm-shop-cat-head h2{margin:0;font:var(--display-wght) calc(clamp(24px,3vw,32px) * var(--display-scale))/1.15 var(--display);letter-spacing:0;color:var(--mm-ink)}
.mm-shop-cat-desc{margin-top:8px;color:var(--mm-ash)}
.mm-shop-cat-desc p{margin:0 0 .6em}

.mm-shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.mm-shop-cat.is-titles .mm-shop-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}

.mm-shop-card{display:flex;flex-direction:column;gap:10px;padding:22px 20px 20px;--mm-ground:#2d1c0f}
.mm-shop-img{width:100%;aspect-ratio:16/9;object-fit:cover;margin-bottom:4px}
.mm-shop-card h3{margin:0;font:var(--display-wght) calc(21px * var(--display-scale))/1.15 var(--display);letter-spacing:0;color:var(--mm-ink)}
.mm-shop-price{margin:0;font:700 22px/1.2 var(--mm-ui);color:var(--mm-ink)}
.mm-shop-price span{font:italic 400 14px/1 var(--mm-text);color:var(--mm-ash)}
.mm-shop-desc{flex:1;font-size:15px;line-height:1.55;color:var(--mm-ash)}
.mm-shop-desc p{margin:0 0 .5em}
.mm-shop-desc ul{margin:.2em 0 .5em;padding-left:1.1em}
.mm-shop-desc li{margin:.15em 0}
.mm-shop-desc li::marker{color:var(--mm-brass)}
.mm-shop-card .mm-btn{align-self:stretch;margin-top:auto}
.mm-shop-card .mm-btn[disabled]{opacity:.6;cursor:progress}

/* Titles: a ladder that warms as it climbs. */
.mm-shop-cat.is-titles .mm-shop-card{text-align:center;align-items:center}
.mm-shop-cat.is-titles .mm-shop-img{aspect-ratio:1;margin-bottom:2px} /* The patron seals are square. */
.mm-shop-cat.is-titles .mm-shop-card:last-child{--mm-ground:linear-gradient(180deg,rgba(74,18,32,.6),#2d1c0f 60%)}
.mm-shop-cat.is-titles .mm-dots{margin-bottom:2px}
.mm-shop-cat.is-titles .mm-dot{width:9px;height:9px}
.mm-shop-cat.is-titles .mm-shop-desc ul{list-style:none;padding:0}
.mm-shop-cat.is-titles .mm-shop-desc li{position:relative;padding-top:10px}
.mm-shop-cat.is-titles .mm-shop-desc li::before{content:"";position:absolute;left:50%;top:1px;width:4px;height:4px;margin-left:-2px;background:var(--mm-brass);transform:rotate(45deg);opacity:.7}
.mm-shop-cat.is-titles .mm-shop-desc li:first-child{padding-top:0}
.mm-shop-cat.is-titles .mm-shop-desc li:first-child::before{display:none}

.mm-shop-notes{margin-top:clamp(36px,6vw,56px)}
.mm-shop-fine{margin:clamp(32px,5vw,48px) 0 0;max-width:70ch;font:italic 400 14px/1.55 var(--mm-text);color:var(--mm-smoke)}

/* Basket pill and drawer */
.mm-basket-pill{position:fixed;right:18px;bottom:18px;z-index:60;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px;border:2px solid var(--bone);border-radius:2px;background:var(--ink);cursor:pointer;
  font:700 16px/1 var(--mm-ui);color:var(--bone);box-shadow:0 10px 28px -12px #000;transition:background-color var(--mm-quick),color var(--mm-quick)}
.mm-basket-pill:hover{background:var(--bone);color:var(--ink)}
.mm-basket-pill[hidden],.mm-basket[hidden]{display:none}

.mm-basket{position:fixed;top:0;right:0;bottom:0;z-index:70;width:min(380px,100vw);display:flex;flex-direction:column;
  background:#1a1008;box-shadow:-24px 0 60px -20px #000;
  transform:translateX(100%);transition:transform var(--mm-slow) var(--mm-ease)}
.mm-basket.is-open{transform:none}
.mm-basket header{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid rgba(223,182,83,.2)}
.mm-basket-close{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;background:none;border:2px solid var(--bone);border-radius:2px;font-size:24px;line-height:1;color:var(--bone);cursor:pointer;transition:background-color var(--mm-quick),color var(--mm-quick)}
.mm-basket-close:hover{background:var(--bone);color:var(--ink)}
.mm-basket-body{flex:1;overflow:auto;padding:18px 22px 24px;display:flex;flex-direction:column;gap:14px}
.mm-basket-note,.mm-basket-who,.mm-basket-empty{margin:0;color:var(--mm-ash);font-size:15px}
.mm-basket-who{font-style:italic}
.mm-basket-thanks{margin:0;font:var(--display-wght) calc(20px * var(--display-scale))/1.15 var(--display);letter-spacing:0;color:var(--mm-ink)}
.mm-basket-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(223,182,83,.2)}
.mm-basket-list li{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:12px 0;border-bottom:1px solid rgba(223,182,83,.2)}
.mm-basket-name{color:var(--mm-ink)}
.mm-basket-price{color:var(--mm-ink);font-weight:700;text-align:right}
.mm-basket-price small{color:var(--mm-ash);font-style:italic}
.mm-basket-remove{grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;min-height:44px;padding:0;background:none;border:0;cursor:pointer;font:700 15px/1.2 var(--mm-ui);color:var(--bone);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.28em}
.mm-basket-remove:hover{text-decoration-color:var(--mm-vitae)}
.mm-basket-total{display:flex;justify-content:space-between;align-items:baseline;margin:4px 0 0;font:800 13px/1 var(--mm-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--mm-ash)}
.mm-basket-total b{font:700 22px/1 var(--mm-ui);letter-spacing:0;color:var(--mm-ink)}
.mm-basket-auth,.mm-basket-checkout{width:100%}