/* ================================================================
   SHOP (/shop/ and the Black Sunday collection) — the concept's .product tile: art on top,
   quiet meta underneath, pill actions. Real media-library product art.
   Card markup: tcn_render_shop_card() (inc/tcn-woocommerce.php). Tokens: tcn-base.css §0.
   ================================================================ */
body .tsshop-wrap { --clr-bg: var(--paper); --clr-surface: var(--panel); --clr-surface-light: var(--panel-2); background: var(--paper); padding-top: 110px; }
body .tsshop-inner { max-width: 1240px; }
body .tsshop-title {
    font-family: var(--dp-serif); font-weight: 400; color: var(--ink);
    font-size: clamp(58px, 8vw, 116px); line-height: .9; letter-spacing: .015em; margin: 12px 0 18px; text-transform: uppercase; }
body .tsshop-title::before { content: "Direct from the creator"; display: block; margin-bottom: 18px; font: 600 11px/1 var(--dp-sans); letter-spacing: .19em; text-transform: uppercase; color: var(--accent); }
body .tsshop-sub { color: var(--muted); font-size: 16px; }
body .tsshop-search { max-width: 460px; }
body .tsshop-search-input { background: var(--paper-2); border: 1px solid var(--line); color: var(--ink); border-radius: 999px 0 0 999px; padding: 12px 20px; }
body .tsshop-search-btn { background: var(--accent); color: var(--on-accent); border-radius: 0 999px 999px 0; }
body .tsshop-cat-btn { background: transparent; border: 1px solid var(--line); color: var(--muted); border-radius: 999px; font-size: 12px; padding: 8px 14px; }
body .tsshop-cat-btn:hover, body .tsshop-cat-btn.active { background: var(--ink); color: var(--inverse); border-color: var(--ink); }
body .tsshop-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 44px 20px; }
body .tsshop-card { background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
body .tsshop-card:hover { transform: none; box-shadow: none; border: 0; }
body .tsshop-card-img-wrap { display: grid; place-items: center; aspect-ratio: 4 / 5; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; margin-bottom: 18px; }
/* fill the tile and centre: a landscape or small image (the tool icon is 300x172) used to hug the top of the 4:5 box */
body .tsshop-card-img { width: 100%; height: 100%; box-sizing: border-box; object-fit: contain; object-position: center; padding: 6%; }
body .tsshop-card:hover .tsshop-card-img { transform: scale(1.04); }
body .tsshop-type-badge { background: var(--ink) !important; color: #fff !important; border: 0; border-radius: 3px; letter-spacing: .1em; font-weight: 800; }
body .tsshop-card-img-wrap .dpt2-license-pill { background: var(--ink) !important; color: #fff !important; border: 0; border-radius: 3px; }
body .tsshop-sale-badge { background: var(--accent); color: var(--on-accent); border-radius: 999px; }
body .tsshop-card-body { padding: 0; }
body .tsshop-card-name { font-family: var(--dp-sans); font-weight: 600; font-size: 14px; color: var(--ink); margin: 0 0 5px; }
body .tsshop-card-collection { color: var(--accent); }
body .tsshop-card-divider { display: none; }
body .tsshop-price-now { color: var(--ink); font-weight: 600; font-size: 13px; }
body .tsshop-card-cat { color: var(--muted); }
body .tsshop-cart-btn { width: auto; align-self: flex-start; margin-top: 14px; padding: 9px 16px; background: transparent; border: 1px solid var(--line-strong); color: var(--ink); border-radius: 999px; font-size: 11px; letter-spacing: .06em; }
body .tsshop-cart-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
body .tsshop-card-wrap { display: flex; flex-direction: column; }
body .tsshop-pagination a, body .tsshop-pagination span { background: transparent; border: 1px solid var(--line); color: var(--muted); border-radius: 999px; }