/* KITCARDSTYLES v1 (templates a5 10-21; Master: the last axis that keeps two stores from looking like siblings): FOUR product-card styles for the product_shop base, CSS only (no markup change), picked by html[data-rl-card]:not(#_):
   borderless = image first, no box;  framed = editorial frame, centred serif name;  overlay = the name sits on the photo over a scrim;  list = compact row (thumb, name + blurb, price). Cards are li.prod[data-item] > .pic[data-item-media],
   h3, .row (price + status), .blurb, option fields, the Add button. Tokens only (no colour literals but the overlay scrim). The photo box keeps its own aspect-ratio: zero layout change after first paint. */
html[data-rl-card]:not(#_) #grid>.prod{background:transparent;border:0;box-shadow:none;border-radius:0;padding:0}
/* 1 borderless / image-first */
html[data-rl-card=borderless]:not(#_) #grid{gap:clamp(20px,3vw,36px) clamp(14px,2vw,24px)}
html[data-rl-card=borderless]:not(#_) #grid>.prod{display:grid;gap:8px;align-content:start}
html[data-rl-card=borderless]:not(#_) .prod .pic{aspect-ratio:4/5;border-radius:4px;overflow:hidden}
html[data-rl-card=borderless]:not(#_) .prod .pic>*:not(.tag){width:100%;height:100%;object-fit:cover}
html[data-rl-card=borderless]:not(#_) .prod h3{font-size:1rem;font-weight:600;letter-spacing:0;margin:6px 0 0}
html[data-rl-card=borderless]:not(#_) .prod .blurb{display:none}
html[data-rl-card=borderless]:not(#_) .prod .btn{background:transparent;border:0;border-bottom:1px solid currentColor;border-radius:0;padding:4px 0;min-height:44px;justify-self:start;font-weight:600}
/* 2 framed / editorial */
html[data-rl-card=framed]:not(#_) #grid>.prod{display:grid;gap:10px;align-content:start;text-align:center;border:1px solid var(--line,currentColor);padding:clamp(10px,1.6vw,18px);background:var(--surface,transparent)}
html[data-rl-card=framed]:not(#_) .prod .pic{aspect-ratio:1;overflow:hidden;outline:1px solid var(--line,currentColor);outline-offset:-8px;border-radius:0}
html[data-rl-card=framed]:not(#_) .prod .pic>*:not(.tag){width:100%;height:100%;object-fit:cover;padding:8px;box-sizing:border-box}
html[data-rl-card=framed]:not(#_) .prod h3{font-family:var(--serif,var(--display,inherit));font-size:1.15rem;font-weight:500;margin:4px 0 0}
html[data-rl-card=framed]:not(#_) .prod .row{justify-content:center;gap:10px}
html[data-rl-card=framed]:not(#_) .prod .blurb{font-size:.9rem;opacity:.8}
html[data-rl-card=framed]:not(#_) .prod .btn{justify-self:center;border-radius:0;text-transform:uppercase;letter-spacing:.08em;font-size:.78rem}
/* 3 overlay caption: name + price sit on a soft bottom scrim over the photo; Add shows on hover / focus (always on touch) */
html[data-rl-card=overlay]:not(#_) #grid>.prod{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto auto auto;gap:0;align-content:start;align-self:start;position:relative}
html[data-rl-card=overlay]:not(#_) .prod .pic{grid-area:1/1/4/2;aspect-ratio:4/5;border-radius:var(--r-card,12px);overflow:hidden;position:relative}
html[data-rl-card=overlay]:not(#_) .prod .pic>*:not(.tag){width:100%;height:100%;object-fit:cover}
html[data-rl-card=overlay]:not(#_) .prod .pic::after{content:"";position:absolute;inset:auto 0 0 0;height:48%;background:linear-gradient(to top,rgba(0,0,0,.74),rgba(0,0,0,0));pointer-events:none}
html[data-rl-card=overlay]:not(#_) .prod h3{grid-area:2/1;z-index:2;margin:0;padding:0 14px 2px;color:#fff;font-size:1.05rem;text-shadow:0 1px 10px rgba(0,0,0,.4);pointer-events:none}
html[data-rl-card=overlay]:not(#_) .prod .row{grid-area:3/1;z-index:2;padding:0 14px 14px;color:#fff;justify-content:space-between;pointer-events:none}
html[data-rl-card=overlay]:not(#_) .prod .row *{color:inherit}
html[data-rl-card=overlay]:not(#_) .prod .blurb{display:none}
html[data-rl-card=overlay]:not(#_) .prod .btn{grid-area:4/1;margin-top:8px}
html[data-rl-card=overlay]:not(#_) .prod .field{grid-area:auto/1}
@media (hover:hover) and (pointer:fine){html[data-rl-card=overlay]:not(#_) .prod .btn{opacity:0;transition:opacity .18s ease}html[data-rl-card=overlay]:not(#_) .prod:hover .btn,html[data-rl-card=overlay]:not(#_) .prod:focus-within .btn{opacity:1}}
/* 4 compact list */
html[data-rl-card=list]:not(#_) .shop #grid[data-list],html[data-rl-card=list]:not(#_) #grid{grid-template-columns:minmax(0,1fr)!important;gap:0}
html[data-rl-card=list]:not(#_) #grid>.prod{display:grid;grid-template-columns:clamp(72px,18vw,112px) minmax(0,1fr) auto;grid-template-areas:"pic h3 row" "pic blurb btn";gap:4px 16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line,rgba(0,0,0,.15))}
html[data-rl-card=list]:not(#_) #grid>.prod:first-child{grid-column:auto;grid-row:auto} /* the bento layout's featured first card is an ordinary row here */
html[data-rl-card=list]:not(#_) .prod .pic{grid-area:pic;aspect-ratio:1;height:auto;min-height:0;max-height:clamp(72px,18vw,112px);width:100%;border-radius:6px;overflow:hidden;align-self:start}
html[data-rl-card=list]:not(#_) .prod .pic>*:not(.tag){width:100%;height:100%;object-fit:cover}
html[data-rl-card=list]:not(#_) .prod h3{grid-area:h3;font-size:1.02rem;margin:0}
html[data-rl-card=list]:not(#_) .prod .row{grid-area:row;justify-self:end}
html[data-rl-card=list]:not(#_) .prod .blurb{grid-area:blurb;margin:0;font-size:.88rem;opacity:.75;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html[data-rl-card=list]:not(#_) .prod .btn{grid-area:btn;justify-self:end;min-height:44px}
html[data-rl-card=list]:not(#_) .prod .field{grid-column:2/-1}
@media (max-width:520px){html[data-rl-card=list]:not(#_) #grid>.prod{grid-template-columns:72px minmax(0,1fr);grid-template-areas:"pic h3" "pic row" "pic blurb" "btn btn"}html[data-rl-card=list]:not(#_) .prod .row{justify-self:start}html[data-rl-card=list]:not(#_) .prod .btn{justify-self:stretch}}