/* Shared building blocks for the shop and admin, on top of the design tokens in shop.css / admin.css */
html{scroll-behavior:smooth}
body{margin:0;background:#FBFBF3}
.canvas.dark ~ *,.canvas{min-height:100vh}
.wrapx{max-width:1680px;margin:0 auto;padding-inline:max(clamp(16px,3vw,48px),env(safe-area-inset-left,0px)) max(clamp(16px,3vw,48px),env(safe-area-inset-right,0px))}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;border-radius:999px;border:0;background:var(--ink);color:var(--ivory);font:700 1em 'Quicksand',sans-serif;text-decoration:none;cursor:pointer}
.btn:hover{color:var(--ivory)}
.btn.ghost{background:transparent;color:var(--ink);border:2px dashed var(--ink)}
.btn.ghost:hover{color:var(--ink)}
.btn.small{min-height:38px;padding:0 16px;font-size:.9em}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.field{display:flex;flex-direction:column;gap:5px;font-size:14px;font-weight:700}
.field small{font-weight:400;color:var(--muted)}
.input{font:400 16px 'Quicksand','Segoe UI',sans-serif;padding:12px;border:1px solid var(--ink);border-radius:10px;background:var(--ivory);color:var(--ink);width:100%;box-sizing:border-box}
textarea.input{resize:vertical}
.input:focus,.btn:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid #C49A2C;outline-offset:2px}
.note{font-size:14px;color:var(--muted)}
.error{background:#F8DED6;color:#8A2F17;border-radius:12px;padding:12px 16px;font-weight:700}
.okmsg{background:#E2F1E6;color:#1F5A31;border-radius:12px;padding:12px 16px;font-weight:700}
.pill{display:inline-block;padding:3px 10px;border-radius:99px;font:700 12px Quicksand,sans-serif}
.site-head{border-bottom:1px solid var(--stone);background:var(--ivory)}
.site-head .row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
.site-head nav{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(14px,2vw,28px);font-size:1.15em}
.site-head nav a{text-decoration:none}
.theme-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1.5px dashed var(--ink);background:transparent;color:var(--ink);font:400 .9em 'Quicksand',sans-serif;cursor:pointer}
.cart-link{background:var(--ink);color:var(--ivory)!important;padding:12px 22px;border-radius:999px;text-decoration:none}
.search{flex:1 1 260px;max-width:520px;display:flex}
.search input{width:100%;font:400 1em 'Quicksand',sans-serif;padding:12px 20px;border:2px dashed var(--ink);border-radius:999px;background:var(--ivory);color:var(--ink)}
.site-foot{background:var(--footer);color:var(--footer-ink)}
.site-foot .row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding-block:28px;font-size:.9em}
.site-foot a{color:var(--footer-ink)}
.card-media{position:relative;aspect-ratio:4/5;background:var(--stone);border-radius:14px;outline:2px dashed var(--ivory);outline-offset:-10px;display:block;overflow:hidden}
.card-media img,.card-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:14px}
.card-tag{position:absolute;z-index:1;top:14px;left:14px;background:var(--ivory);border:1.5px dashed var(--ink);font-weight:700;font-size:.8em;padding:2px 12px;border-radius:999px;color:var(--ink)}
.sold-tag{position:absolute;z-index:1;top:14px;right:14px;background:var(--ink);color:var(--ivory);font-weight:700;font-size:.8em;padding:3px 12px;border-radius:999px}
.share-btn{width:44px;height:44px;padding:0;border:2px dashed var(--ink);border-radius:50%;background:transparent;display:grid;place-items:center;flex:none;cursor:pointer;color:var(--ink)}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:60;background:var(--ink);color:var(--ivory);padding:12px 20px;border-radius:999px;font-weight:700;font-size:14px;opacity:0;transition:opacity .3s;pointer-events:none;max-width:calc(100vw - 32px);text-align:center}
.toast.on{opacity:1}
.empty{padding:40px;text-align:center;color:var(--muted);border:2px dashed var(--line);border-radius:16px}
@media (max-width:760px){.site-head nav{font-size:1em;gap:12px}.hide-sm{display:none!important}}
.cat-btn{min-height:44px;padding:0 4px;margin-right:14px;border:0;border-radius:0;background:transparent;font:500 1em 'Quicksand',sans-serif;color:var(--muted);border-bottom:2.5px solid transparent;cursor:pointer}
.cat-btn[aria-pressed="true"]{font-weight:700;color:var(--ink);border-bottom:2.5px dashed var(--ink)}
.card[hidden]{display:none!important}
@media (prefers-reduced-motion:no-preference){
.ty-inline .sew{animation:sewheart 2.2s .2s cubic-bezier(.4,0,.2,1) both}
.ty-inline .needle{offset-path:path("M60 98 C10 62 4 22 34 14 C48 10 58 20 60 30 C62 20 72 10 86 14 C116 22 110 62 60 98");animation:needle 2.2s .2s cubic-bezier(.4,0,.2,1) both}
}
@keyframes sewheart{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes needle{from{offset-distance:0%}to{offset-distance:100%}}
@media (max-width:760px){
.site-head .row{gap:10px;padding-block:10px}
.site-head .search{order:3;flex-basis:100%;max-width:none}
.site-head nav{gap:10px}
.site-head .theme-btn{padding:0 12px}
.site-head .theme-btn [data-theme-label]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.cart-link{padding:11px 16px}
.admin-side{max-width:none!important;flex-basis:100%!important;flex-direction:row!important;flex-wrap:wrap;align-items:center;padding:12px 16px!important}
.admin-side > span:not(:first-child){display:none}
}