/* Heartysan storefront, on the shared foundation /ui/hs.css (tokens, fonts).
   A marketplace page: white paper, product pictures carry the colour, search is the main way in. Berry only for
   what moves an order forward; everything else is ink, grey and hairlines. The older variable names below
   (--wall, --graphite, --heart…) are kept as aliases so page-level styles keep working. */
:root{
  --paper:var(--hs-paper); --ink:var(--hs-ink); --graphite:var(--hs-muted); --wall:var(--hs-ground); --wall-2:var(--hs-sunk);
  --line:var(--hs-line); --heart:var(--hs-berry); --heart-ink:#fff; --heart-dark:var(--hs-berry-hover);
  --ok:var(--hs-ok); --warn:var(--hs-warn);
  --oak:#b98b5a; --frame-black:#1d1d1d; --frame-white:#f4f3f0;
  --f-head:var(--hs-f-head); --f-body:var(--hs-f-body);
  --r:var(--hs-r); --wrap:1280px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--hs-paper);color:var(--hs-ink);font:16px/1.55 var(--hs-f-body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button,[role=button],a,select,summary,label[for]{cursor:pointer}
:focus-visible{outline:2px solid var(--hs-berry);outline-offset:2px}
[hidden]{display:none!important}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
@media (max-width:600px){.wrap{padding:0 16px}}

/* ---------- promo strip + header ---------- */
.promo{background:var(--hs-blush);color:var(--hs-berry-ink);font-size:13px;font-weight:500}
.promo .wrap{display:flex;justify-content:center;gap:28px;padding-top:7px;padding-bottom:7px;flex-wrap:wrap}
.promo span{display:inline-flex;align-items:center;gap:6px}
.promo svg{width:16px;height:16px}
@media (max-width:600px){.promo .wrap{gap:4px 16px}.promo .opt2{display:none}}
.hdr{background:var(--hs-paper);position:sticky;top:0;z-index:20;box-shadow:0 1px 0 var(--hs-line)}
.hdr .bar{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;padding:14px 0 12px}
.logo{text-decoration:none;display:flex;align-items:center;color:var(--hs-ink)}
.logo .wm{display:block;height:35px;width:auto;margin-top:7px}
.logo .mk{display:none;height:28px;width:auto}
.search{display:flex;align-items:center;border:1.5px solid var(--hs-line-strong);border-radius:var(--hs-pill);background:var(--hs-paper);max-width:720px;width:100%;justify-self:center;padding:4px 4px 4px 18px;transition:border-color .15s, box-shadow .15s}
.search:hover{border-color:var(--hs-muted)}
.search:focus-within{border-color:var(--hs-berry);box-shadow:0 0 0 4px var(--hs-blush)}
.search input{flex:1;border:0;padding:7px 8px 7px 0;background:transparent;min-width:0;font-size:15px}
.search input::placeholder{color:var(--hs-muted)}
.search input:focus{outline:none}
.search button{border:0;background:var(--hs-berry);color:#fff;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;transition:background .15s}
.search button:hover{background:var(--hs-berry-hover)}
.search button svg{width:18px;height:18px}
.tools{display:flex;gap:2px;align-items:center}
.tools a,.tools button,.tools select{border:0;background:transparent;padding:9px 11px;border-radius:var(--hs-pill);text-decoration:none;font-size:14px;font-weight:500;display:flex;align-items:center;gap:6px;transition:background .15s}
.tools a:hover,.tools button:hover,.tools select:hover{background:var(--hs-ground)}
.tools svg{width:22px;height:22px}
.acc{position:relative}.acc .chev{width:16px;height:16px;margin-left:-2px;color:var(--hs-muted)}
.accmenu{position:absolute;right:0;top:calc(100% + 6px);z-index:60;min-width:220px;display:flex;flex-direction:column;padding:6px;background:var(--hs-paper);border:1px solid var(--hs-line);border-radius:var(--hs-r);box-shadow:var(--hs-shadow-pop)}
.accmenu[hidden]{display:none}
.accmenu .who{margin:0;padding:8px 12px 10px;font-size:13px;color:var(--hs-muted);border-bottom:1px solid var(--hs-line);margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tools .accmenu a,.tools .accmenu button{border-radius:var(--hs-r-sm);padding:9px 12px;font-size:14px;color:var(--hs-ink);text-align:left;width:100%;cursor:pointer;font-family:inherit}
.tools .accmenu button{border-top:1px solid var(--hs-line);border-radius:0 0 var(--hs-r-sm) var(--hs-r-sm);margin-top:4px;color:var(--hs-muted)}
.cartlink{position:relative}
.cartlink b{position:absolute;top:3px;right:3px;background:var(--hs-berry);color:#fff;font:700 11px/1 var(--hs-f-body);min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 4px;border:2px solid var(--hs-paper)}
.cats{display:flex;gap:2px;overflow-x:auto;padding:0 0 2px;scrollbar-width:none;margin:0 -6px}
.cats::-webkit-scrollbar{display:none}
.cats a{display:flex;align-items:center;gap:7px;text-decoration:none;font-size:14px;font-weight:500;padding:8px 12px 10px;white-space:nowrap;color:var(--hs-muted);border-bottom:2px solid transparent;transition:color .15s, border-color .15s}
.cats a:hover{color:var(--hs-ink)}
.cats a[aria-current="page"]{color:var(--hs-ink);border-bottom-color:var(--hs-berry)}
.cats svg{width:18px;height:18px}
@media (max-width:860px){.hdr .bar{grid-template-columns:auto auto;row-gap:10px}.search{grid-column:1 / -1;grid-row:2;max-width:none}.tools .hide-s{display:none}}

/* ---------- the framed print ---------- */
.art{margin:0;background:var(--hs-ground);display:grid;place-items:center;aspect-ratio:1/1;border-radius:var(--hs-r);overflow:hidden;position:relative}
.art .frame{width:62%;padding:3.2%;background:var(--frame-black);box-shadow:0 1px 1px rgba(0,0,0,.08),0 10px 22px -8px rgba(0,0,0,.30),0 2px 6px rgba(0,0,0,.10);transition:transform .25s}
.art .frame .mat{background:#fff;padding:7%}
.art .frame img{width:100%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
.art[data-frame="white"] .frame{background:var(--frame-white)}
.art[data-frame="oak"] .frame{background:linear-gradient(135deg,#c79a68,#a87c4f 55%,#bf9363)}
.art[data-frame="none"] .frame{background:transparent;padding:0;box-shadow:0 8px 20px -10px rgba(0,0,0,.30)}
.art[data-frame="none"] .frame .mat{padding:0}
.art.object img{width:100%;height:100%;object-fit:cover}

/* ---------- listing grid ---------- */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px 20px}
@media (max-width:1050px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.grid{grid-template-columns:repeat(2,1fr);gap:24px 12px}}
.card{text-decoration:none;display:flex;flex-direction:column;gap:6px}
.card h3{font:400 15px/1.35 var(--hs-f-body);margin:8px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--hs-ink)}
.card .price{font-weight:700;font-size:17px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.card .price small{font-weight:400;color:var(--hs-muted);font-size:13px}
.card .kind{font-size:13px;color:var(--hs-muted);order:3}
.card:hover h3{text-decoration:underline;text-underline-offset:3px}
.card:hover .art .frame{transform:translateY(-3px)}
.card .photo{margin:0;aspect-ratio:1/1;border-radius:var(--hs-r);overflow:hidden;background:var(--hs-ground)}
.card .photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.card:hover .photo img{transform:scale(1.03)}
@media (prefers-reduced-motion:reduce){.card:hover .art .frame,.card:hover .photo img{transform:none}}

/* ---------- headings, sections ---------- */
h1,h2{font-family:var(--hs-f-head);letter-spacing:-.005em;margin:0;color:var(--hs-ink)}
h1{font-size:clamp(36px,5vw,60px);line-height:1.02;font-weight:700}
h2{font-size:clamp(26px,3vw,34px);line-height:1.1;font-weight:700}
.sec{padding:52px 0}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:24px}
.sec-head a{font-size:15px;font-weight:500;color:var(--hs-ink);text-underline-offset:3px}
.lead{font-size:18px;color:var(--hs-muted);max-width:56ch}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid var(--hs-ink);background:var(--hs-paper);color:var(--hs-ink);padding:11px 22px;border-radius:var(--hs-pill);font-weight:600;text-decoration:none;font-size:15px;transition:background .15s, border-color .15s, color .15s}
.btn:hover{background:var(--hs-ground)}
.btn.go,.btn.dark{background:var(--hs-berry);border-color:var(--hs-berry);color:#fff}
.btn.go:hover,.btn.dark:hover{background:var(--hs-berry-hover);border-color:var(--hs-berry-hover)}
.btn.wide{width:100%;padding:14px 22px;font-size:16px}
.btn:disabled{opacity:.5;cursor:default}

/* ---------- footer ---------- */
.ftr{margin-top:72px;background:var(--hs-ground);color:var(--hs-ink);font-size:14px;border-top:1px solid var(--hs-line)}
.ftr .wrap{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px;padding-top:44px;padding-bottom:36px}
.ftr .logo{color:var(--hs-ink)!important}
.ftr p{color:var(--hs-muted)}
.ftr h4{font:600 15px var(--hs-f-body);margin:0 0 10px}
.ftr a{display:block;color:var(--hs-muted);text-decoration:none;padding:4px 0}
.ftr a:hover{color:var(--hs-ink);text-decoration:underline;text-underline-offset:3px}
.ftr .small{grid-column:1 / -1;border-top:1px solid var(--hs-line);padding-top:18px;color:var(--hs-muted);font-size:13px}
@media (max-width:760px){.ftr .wrap{grid-template-columns:1fr 1fr}}

/* ---------- forms bits ---------- */
.opts{display:flex;flex-direction:column;gap:18px}
.opt label{display:block;font-weight:600;font-size:14px;margin-bottom:6px}
.opt select,.opt input[type=text],.opt textarea{width:100%;padding:11px 12px;border:1.5px solid var(--hs-line-strong);border-radius:var(--hs-r-sm);background:var(--hs-paper);transition:border-color .15s}
.opt select:hover,.opt input[type=text]:hover,.opt textarea:hover{border-color:var(--hs-muted)}
.opt select:focus,.opt input[type=text]:focus,.opt textarea:focus{outline:none;border-color:var(--hs-berry);box-shadow:0 0 0 3px var(--hs-blush)}
.seg{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.seg button{border:1.5px solid var(--hs-line-strong);background:var(--hs-paper);border-radius:var(--hs-r-sm);padding:10px;text-align:left;line-height:1.3;transition:border-color .15s, background .15s}
.seg button:hover{border-color:var(--hs-muted)}
.seg button small{display:block;color:var(--hs-muted);font-size:12px;margin-top:2px}
.seg button[aria-pressed="true"]{border-color:var(--hs-berry);background:var(--hs-blush);box-shadow:inset 0 0 0 1px var(--hs-berry)}
.qty{display:inline-flex;border:1.5px solid var(--hs-line-strong);border-radius:var(--hs-pill);overflow:hidden;background:var(--hs-paper)}
.qty button{border:0;background:transparent;width:38px;height:38px;font-size:18px}
.qty button:hover{background:var(--hs-ground)}
.qty span{min-width:30px;display:grid;place-items:center;font-weight:600}
.note{font-size:14px;color:var(--hs-muted)}
.msg{font-size:14px;margin:0}.msg.err{color:var(--hs-berry-hover)}.msg.ok{color:var(--hs-ok)}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0;list-style:none}
.chips li{background:var(--hs-paper);border:1px solid var(--hs-line-strong);border-radius:var(--hs-pill);padding:5px 14px;font-size:14px;transition:border-color .15s}
.chips li:hover{border-color:var(--hs-ink)}
/* sales set in ShopFlow: the old price struck through, a berry badge */
.was{color:var(--hs-muted);font-weight:400;font-size:.85em}
.salebadge{display:inline-block;background:var(--hs-blush);color:var(--hs-berry-ink);border-radius:var(--hs-pill);padding:1px 8px;font-size:12px;font-weight:700;vertical-align:middle}
.salenote{margin:0;color:var(--hs-berry-ink);font-size:14px;font-weight:600}
.card .kind{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.card .pz{display:inline-flex;align-items:center;gap:4px;color:var(--hs-berry-ink);font-weight:500}
.card .pz svg{width:14px;height:14px}