/* ================================================================
   SHOP (/shop/) and the Black Sunday collection: ONE definition for the product grid, cards, filters and buttons.
   Card markup: tcn_render_shop_card() / tcn_render_access_card() in inc/tcn-woocommerce.php. The page opens on the shared banner (.pg-head).
   Law (CLAUDE.md "UI LAW"): pills and buttons are one line, 44px+, padded, one button family. Every card has the same parts in the
   same places: image, tags, name, price, ONE full-width button pinned to the bottom, so a row of cards always lines up.
   Mobile first: two cards per row, three from 768, four from 1100.
   ================================================================ */
body .tsshop-wrap { min-height: 0; padding: 0; background: #fff; }
body .tsshop-body { padding: 28px 0 88px; background: var(--paper, #f6f6f8); }
body .tsshop-inner { width: min(100% - 2 * var(--gutter, 16px), 1240px); max-width: none; margin: 0 auto; padding: 0; }

/* ---------- search and filters ---------- */
body .tsshop-toolbar { display: flex; flex-direction: column; gap: 14px; margin: 0 0 24px; }
body .tsshop-search { display: flex; width: 100%; max-width: 480px; margin: 0; }
body .tsshop-search-input { flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 0 18px; border: 1.5px solid var(--line-strong, #cfd3dc); border-right: 0; border-radius: 999px 0 0 999px; background: #fff; color: var(--ink, #0b0b0d); font: 500 15px/1 var(--dp-sans); }
body .tsshop-search-input:focus { outline: 0; border-color: var(--accent, #313de0); }
body .tsshop-search-btn { flex: none; width: 56px; min-height: 48px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 0 999px 999px 0; background: var(--ink, #0b0b0d); color: #fff; font-size: 16px; cursor: pointer; }
body .tsshop-filters { display: flex; flex-wrap: wrap; gap: 8px; }
body .tsshop-cat-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--line-strong, #cfd3dc); border-radius: 999px; background: #fff; color: var(--ink, #0b0b0d); font: 700 14px/1 var(--dp-sans); white-space: nowrap; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
body .tsshop-cat-btn:hover { border-color: var(--accent, #313de0); }
body .tsshop-cat-btn.active { border-color: transparent; background: linear-gradient(135deg, #7b93e2 0%, #313de0 55%, #5b2fd1 100%); color: #fff; }
body .tsshop-cat-n { font-size: 12px; font-weight: 800; opacity: .6; }
@media (min-width: 768px) { }

/* ---------- grid ---------- */
body .tsshop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 768px) { body .tsshop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 1100px) { body .tsshop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- card ---------- */
body .tsshop-card-wrap { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: #fff; border: 1px solid var(--line, #e7e7ea); border-radius: 18px; transition: box-shadow .2s, transform .2s; }
body .tsshop-card-wrap:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(20, 20, 43, .12); }
body .tsshop-card { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; color: inherit; text-decoration: none; }
body .tsshop-card-img-wrap { position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; background: #f3f3f7; }
body .tsshop-card-img { width: 100%; height: 100%; object-fit: contain; padding: 6%; box-sizing: border-box; transition: transform .3s; }
body .tsshop-card-wrap:hover .tsshop-card-img { transform: scale(1.04); }
body .tsshop-card-noimg { font-size: 44px; opacity: .35; }
body .tsshop-drop-lock { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; font-size: 28px; color: #fff; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .5)); }

/* tags on the image: one size, one look */
body .tsshop-type-badge, body .tsshop-sale-badge, body .tsshop-card-img-wrap .dpt2-license-pill { position: absolute; z-index: 2; display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border: 0; border-radius: 999px; font: 800 11px/1 var(--dp-sans); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
body .tsshop-card-img-wrap .tsshop-type-badge { top: 10px; left: 10px; background: rgba(255, 255, 255, .95); color: var(--ink, #0b0b0d); }   /* one look for every type (the old per-type colors made the row look uneven) */
body .tsshop-card-img-wrap .tsshop-sale-badge { top: 10px; right: 10px; background: var(--accent, #313de0); color: #fff; }
body .tsshop-card-img-wrap .dpt2-license-pill { bottom: 10px; left: 10px; background: rgba(20, 20, 43, .88); color: #fff; }

body .tsshop-card-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 6px; padding: 14px 14px 0; }
body .tsshop-card-name { margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink, #0b0b0d); font: 700 15px/1.3 var(--dp-sans); letter-spacing: -.01em; text-transform: none; }
body .tsshop-card-collection, body .tsshop-card-cat { margin: 0; color: var(--muted, #6f7078); font: 600 12px/1.3 var(--dp-sans); text-transform: none; letter-spacing: 0; }
body .tsshop-card-divider { display: none; }
body .tsshop-card-price-row { display: flex; align-items: baseline; gap: 8px; }
body .tsshop-price-now { color: var(--ink, #0b0b0d); font: 800 16px/1 var(--dp-sans); }
body .tsshop-price-old { color: var(--muted, #6f7078); font-size: 13px; text-decoration: line-through; }

/* the one button of a card: same size, same look, always at the bottom */
body .tsshop-actions { margin-top: auto; padding: 14px; }
body .tsshop-cart-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; padding: 0 16px; border: 0; border-radius: 14px; background: linear-gradient(135deg, #7b93e2 0%, #313de0 55%, #5b2fd1 100%); color: #fff; font: 800 14px/1 var(--dp-sans); letter-spacing: 0; text-align: center; text-decoration: none; text-transform: none; white-space: nowrap; cursor: pointer; }
body .tsshop-cart-btn:hover { filter: brightness(1.07); }
body .tsshop-cart-btn:disabled { opacity: .6; cursor: default; }

/* ---------- empty state and pagination ---------- */
body .tsshop-empty { grid-column: 1 / -1; padding: 72px 16px; text-align: center; color: var(--muted, #6f7078); }
body .tsshop-empty p:first-child { margin: 0; font-size: 44px; }
body .tsshop-empty h3 { margin: 12px 0 8px; color: var(--ink, #0b0b0d); font: 800 20px/1.2 var(--dp-sans); }
body .tsshop-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 32px; }
body .tsshop-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--line-strong, #cfd3dc); border-radius: 999px; background: #fff; color: var(--ink, #0b0b0d); font: 700 14px/1 var(--dp-sans); text-decoration: none; white-space: nowrap; }
body .tsshop-pagination .page-numbers.current { border-color: transparent; background: linear-gradient(135deg, #7b93e2 0%, #313de0 55%, #5b2fd1 100%); color: #fff; }

/* the same tag inside the quick view popup (it sits in the text, not on the photo) */
body .tqv-info .tsshop-type-badge { position: static; background: rgba(49, 61, 224, .1); color: var(--accent, #313de0); }

/* the code box inside an unlockable song's popup: compact, one row (input + Unlock), same button law as everything else */
body .tqv-code .rw-panel { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
body .tqv-code .rw-body { padding: 0; }
body .tqv-code .rw-title { margin: 0 0 10px; font: 800 15px/1.3 var(--dp-sans); letter-spacing: 0; text-transform: none; color: var(--ink, #0b0b0d); }
body .tqv-code .rw-user, body .tqv-code .rw-scan { display: none; }
body .tqv-code .rw-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body .tqv-code .rw-row { display: flex; gap: 8px; }
body .tqv-code .rw-input { flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 0 16px; border: 1.5px solid var(--line-strong, #cfd3dc); border-radius: 14px; background: #fff; color: var(--ink, #0b0b0d); font: 600 15px/1 var(--dp-sans); }
body .tqv-code .rw-submit { flex: none; min-height: 48px; padding: 0 20px; border: 1.5px solid var(--accent, #313de0); border-radius: 14px; background: #fff; color: var(--accent, #313de0); font: 800 14px/1 var(--dp-sans); white-space: nowrap; cursor: pointer; }


/* ---------- Plans view: the same card family, a colored top instead of a photo ---------- */
body .tsshop-plan-top { position: relative; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 52px 18px 20px; color: #fff; }
body .tsshop-plan-top .tsshop-type-badge { top: 14px; left: 14px; background: rgba(255, 255, 255, .16); color: #fff; border: 1px solid rgba(255, 255, 255, .4); }
body .tsshop-plan-name { margin: 0; font: 800 22px/1.15 var(--dp-sans); color: #fff; }
body .tsshop-plan-price { margin: 0; font: 800 34px/1 var(--dp-sans); color: #fff; }
body .tsshop-plan-price small { font-size: 14px; font-weight: 700; opacity: .8; }
body .tsshop-plan-perks { flex: 1 1 auto; margin: 0; padding: 18px 18px 0 38px; display: grid; gap: 10px; color: var(--ink, #0b0b0d); font: 500 14px/1.4 var(--dp-sans); }
body .tsshop-plan-perks li::marker { color: var(--accent, #313de0); }

/* plans need room: one per row on a phone, three across from 768 */
body .tsshop-grid:has(.tsshop-plan) { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { body .tsshop-grid:has(.tsshop-plan) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
body .tsshop-plan-top .tsshop-type-badge { position: static; align-self: flex-start; }
body .tsshop-plan-top { padding-top: 20px; }

/* Under a card's or popup's button: the outlet an item is really sold on (items from another platform) */
.tsshop-outlet { display: block; margin: 8px 0 0; color: var(--muted, #7a7f93); font: 700 12px/1.3 var(--dp-sans); text-align: center; }

/* the plain view: one box per channel, grouped by department (inc/tcn-shop-stores.php; the box itself is the shared .idc / .idb family) */
body .tsshop-cat-btn { text-decoration: none; }
/* the shop's type bar: plain text tabs with an underline, search at the end (no pills) */
body .shs-bar { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; margin: 0; border-bottom: 1px solid var(--tm-line, #e6e8ee); }
body .shs-tabs { display: flex; gap: 28px; overflow-x: auto; scrollbar-width: none; }
body .shs-tabs::-webkit-scrollbar { display: none; }
body .shs-tab { position: relative; display: inline-flex; align-items: center; flex: 0 0 auto; min-height: 56px; color: var(--ink, #0b0b0d); font: 600 15px/1 var(--dp-sans); text-decoration: none; white-space: nowrap; }
body .shs-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink, #0b0b0d); border-radius: 2px; opacity: 0; }
body .shs-tab:hover::after, body .shs-tab.active::after { opacity: 1; }
body .shs-bar .tsshop-search { flex: 0 1 280px; max-width: 280px; }
@media (max-width: 767px) { body .shs-bar { flex-direction: column; align-items: stretch; gap: 0; } body .shs-bar .tsshop-search { flex: none; max-width: none; margin: 12px 0; order: 2; } }
/* a type's banner: the featured item large over a blurred copy of itself */
body .shs-banner { position: relative; overflow: hidden; margin: 28px 0 18px; border-radius: 24px; background: #0b0b0d; color: #fff; isolation: isolate; }
body .shs-banner-bg { position: absolute; inset: -60px; z-index: -1; background-size: cover; background-position: center; filter: blur(46px) brightness(.5) saturate(1.35); }
body .shs-banner-in { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; padding: 28px 22px 32px; }
body .shs-banner-img { order: -1; justify-self: center; width: min(100%, 300px); aspect-ratio: 1; object-fit: cover; border-radius: 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
body .shs-banner-eyebrow { margin: 0 0 10px; color: rgba(255, 255, 255, .72); font: 700 12px/1.3 var(--dp-sans); letter-spacing: .12em; text-transform: uppercase; }
body .shs-banner-title { margin: 0 0 10px; color: #fff; font: 800 clamp(44px, 9vw, 84px)/1 var(--dp-sans); letter-spacing: -.02em; }
body .shs-banner-sub { margin: 0 0 22px; color: rgba(255, 255, 255, .88); font: 500 18px/1.4 var(--dp-sans); }
body .shs-banner-btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 26px; border-radius: 999px; background: #fff; color: #0b0b0d; font: 700 15px/1 var(--dp-sans); text-decoration: none; white-space: nowrap; }
body .shs-banner-btn:hover { background: #e9ebff; }
@media (min-width: 768px) { body .shs-banner-in { grid-template-columns: 1.1fr .9fr; gap: 40px; padding: 56px 64px; min-height: 420px; } body .shs-banner-img { order: 0; width: min(100%, 360px); } }
body .shs-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 768px) { body .shs-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } }
@media (max-width: 767px) { body .shs-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: -16px; padding-right: 16px; } body .shs-row::-webkit-scrollbar { display: none; } body .shs-row > * { flex: 0 0 68%; scroll-snap-align: start; } }
body .shs-type + .shs-type { margin-top: 44px; }
/* a channel's cluster: one light-purple box, the department's colour as its edge */
body .shs-cluster { position: relative; margin: 0 0 24px; padding: 18px 18px 20px; border: 1px solid var(--box-line, rgba(49, 61, 224, .10)); border-radius: 24px; background: var(--box-grad, linear-gradient(160deg, #f6f5fd 0%, #ebe9f9 58%, #e3e1f4 100%)); overflow: hidden; }
body .shs-cluster--dept { padding-left: 26px; }
body .shs-cluster--dept::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--dc); }
body .shs-ch { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 16px; }
body .shs-ch-id { display: inline-flex; align-items: center; gap: 14px; min-width: 0; text-decoration: none; }
body .shs-ch-id:hover .idb-name { color: var(--accent, #313de0); }
body .shs-cluster .idb-img { width: 56px; height: 56px; }