/* ================================================================
   PRODUCT PAGE — WooCommerce single product (single-product.php).
   Mobile-first on the layout system (assets/layout.css): container gutter, --space-*, --fs-*, --tap.
   One column on a phone; gallery | details from 900px. Tokens: tcn-base.css §0.
   ================================================================ */
/* type badge colours — soft tint on white needs the dark ink variant to pass contrast */
.type-badge--video   { background: rgba(13,148,136,.14); color: #0b6b62; }
.type-badge--audio   { background: rgba(124,58,237,.12); color: #5b21b6; }
.type-badge--episode { background: rgba(217,119,6,.14);  color: #92400e; }
.type-badge--article { background: rgba(5,150,105,.14);  color: #065f46; }
.type-badge--code    { background: rgba(219,39,119,.12); color: #9d174d; }
.type-badge--ticket, .type-badge--product { background: rgba(234,88,12,.12); color: #9a3412; }
.type-badge--photo   { background: rgba(37,99,235,.12);  color: #1e40af; }
.type-badge--drop    { background: rgba(194,65,12,.12);  color: #9a3412; }

.tcn-product-page { min-height: 0; background: var(--band-cream); color: var(--ink); padding-top: calc(var(--header-h) + var(--space-4)); --clr-bg: var(--paper); --clr-invert-text: var(--ink); --clr-invert-text-muted: var(--muted); }
.tcn-product-page .tcn-lift-grid { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; padding: var(--space-2) 0 var(--space-7); max-width: none; }
.tcn-product-page .tcn-faq { padding: var(--space-2) var(--gutter) var(--space-7); }
.tcn-prod-body { width: min(100% - 2 * var(--gutter), var(--container)); max-width: none; margin-inline: auto; padding: var(--space-5) 0 var(--space-8); }
.tcn-prod-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 900px) { .tcn-prod-grid { grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: start; } .tcn-product-page { padding-top: calc(var(--header-h) + var(--space-6)); } }

/* gallery */
.tcn-prod-main-img { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; }
.tcn-prod-main-img img { display: block; width: 100%; max-height: 560px; object-fit: contain; }
.tcn-prod-thumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.tcn-prod-thumb { flex: none; width: 64px; height: 64px; overflow: hidden; border: 2px solid transparent; border-radius: var(--r-sm); background: #fff; cursor: pointer; transition: border-color .2s; }
.tcn-prod-thumb.active { border-color: var(--ink); }
.tcn-prod-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* title block */
.tcn-prod-title-row { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-2); }
.tcn-prod-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tcn-prod-badge { display: inline-block; width: fit-content; padding: 5px 12px; border-radius: 99px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.tcn-prod-badge--out { background: rgba(198,40,40,.1); color: #b3261e; }
.tcn-prod-badge--sale { background: rgba(198,40,40,.1); color: #b3261e; }
body .tcn-prod-info-title { margin: 0; font-family: "Dela Gothic One", var(--dp-display); font-weight: 400; font-size: clamp(1.375rem, 1rem + 2vw, 2.5rem); line-height: var(--lh-tight); letter-spacing: -.03em; text-transform: uppercase; color: var(--ink); overflow-wrap: anywhere; }
.tcn-prod-collection { margin: 0; color: var(--accent); font-size: var(--fs-sm); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.tcn-prod-divider { margin: 0 0 var(--space-4); border: 0; border-top: 1px solid var(--line); }
.tcn-prod-price { margin-bottom: var(--space-3); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); font-weight: 900; color: var(--ink); }
.tcn-prod-price del { margin-right: var(--space-2); color: var(--muted); font-size: 1.1rem; }
.tcn-prod-price ins { text-decoration: none; color: var(--ink); }
.tcn-prod-stock { margin-bottom: var(--space-5); font-size: var(--fs-sm); font-weight: 700; letter-spacing: .06em; }
.tcn-prod-stock-in { color: #0f7a55; }
.tcn-prod-stock-out { color: #b3261e; }
.tcn-prod-short-desc { margin-bottom: var(--space-5); color: var(--muted); font-size: var(--fs-md); line-height: var(--lh-body); }
.tcn-prod-sku { margin-bottom: var(--space-5); font-size: var(--fs-sm); color: var(--muted); }
.tcn-prod-sku span { font-weight: 700; }

/* add to cart */
.tcn-prod-cart-form { margin-bottom: var(--space-6); }
.tcn-prod-qty-row { margin-bottom: var(--space-4); }
.tcn-prod-qty-row label { display: block; margin-bottom: var(--space-2); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tcn-prod-qty-wrap { display: flex; width: fit-content; }
.tcn-qty-btn { display: flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); border: 1px solid var(--line-strong); background: #fff; color: var(--ink); font-size: 1.2rem; cursor: pointer; transition: background .15s; }
.tcn-qty-btn:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.tcn-qty-btn:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.tcn-qty-btn:hover { background: #f1f4f9; }
.tcn-qty-input { width: 56px; height: var(--tap); border: 1px solid var(--line-strong); border-left: 0; border-right: 0; background: #fff; color: var(--ink); text-align: center; font-size: 16px; font-weight: 700; -moz-appearance: textfield; }
.tcn-qty-input::-webkit-inner-spin-button, .tcn-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.tcn-prod-add-btn { display: block; width: 100%; min-height: 52px; padding: 0 var(--space-5); border: 0; border-radius: 999px; background: var(--ink); color: var(--inverse); font-size: 1rem; font-weight: 800; letter-spacing: .06em; cursor: pointer; transition: background .15s; }
.tcn-prod-add-btn:hover { background: var(--accent); color: var(--on-accent); }
.tcn-prod-unavailable { padding: var(--space-5); background: rgba(198,40,40,.06); border: 1px solid rgba(198,40,40,.2); border-radius: var(--r-md); color: #b3261e; text-align: center; font-weight: 600; }

/* meta + share */
.tcn-prod-meta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); gap: var(--space-4); margin-bottom: var(--space-5); padding: var(--space-5); background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); }
.tcn-prod-meta-label { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tcn-prod-meta-value { color: var(--ink); font-size: var(--fs-sm); font-weight: 600; }
.tcn-prod-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tcn-prod-share-btn { min-height: var(--tap); padding: 0 var(--space-5); border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; color: var(--ink); cursor: pointer; font-size: var(--fs-sm); font-weight: 700; letter-spacing: .04em; transition: background .2s; }
.tcn-prod-share-btn:hover { background: #f1f4f9; }

.tcn-prod-full-desc, .tcn-prod-related { margin-top: var(--space-7); padding-top: var(--space-6); border-top: 1px solid var(--line); }
.tcn-prod-full-desc h3, .tcn-prod-related h3 { margin: 0 0 var(--space-4); font-family: "Dela Gothic One", var(--dp-display); font-weight: 400; font-size: var(--fs-h3); letter-spacing: -.03em; text-transform: uppercase; color: var(--ink); }
.tcn-prod-desc-content { color: var(--muted); font-size: var(--fs-md); line-height: var(--lh-body); }

/* related: two up on a phone */
.tcn-prod-related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
@media (min-width: 768px) { .tcn-prod-related-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-4); } }
.tcn-prod-rel-wrap { display: flex; flex-direction: column; min-width: 0; }
.tcn-prod-related-card { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); text-decoration: none; transition: border-color .2s; }
.tcn-prod-related-card:hover { border-color: var(--line-strong); }
.tcn-prod-rel-img-wrap { position: relative; aspect-ratio: 1; overflow: hidden; background: #fff; }
.tcn-prod-rel-img { width: 100%; height: 100%; object-fit: contain; transition: transform .3s; }
.tcn-prod-related-card:hover .tcn-prod-rel-img { transform: scale(1.05); }
.tcn-prod-rel-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: var(--faint); }
.tcn-prod-rel-img-wrap .tsshop-type-badge { position: absolute; top: var(--space-2); left: var(--space-2); z-index: 2; padding: 4px 10px; border-radius: 99px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.tcn-prod-rel-info { display: flex; flex-direction: column; padding: var(--space-3) var(--space-3) var(--space-4); }
.tcn-prod-rel-name { margin: 0 0 4px; font-family: "Dela Gothic One", var(--dp-display); font-size: .75rem; line-height: 1.3; letter-spacing: -.01em; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-transform: uppercase; }
.tcn-prod-rel-collection { margin: 0 0 var(--space-2); color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.tcn-prod-rel-divider { margin: 0 0 var(--space-2); border: 0; border-top: 1px solid var(--line); }
.tcn-prod-rel-price { color: var(--ink); font-size: var(--fs-sm); font-weight: 800; }
.tcn-prod-rel-price del { color: var(--muted); font-size: 12px; }
.tcn-prod-rel-price ins { text-decoration: none; color: var(--ink); }
.tcn-prod-rel-cat { margin: 4px 0 0; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

/* WooCommerce variable-product form */
.tcn-prod-info .variations_form { margin-bottom: var(--space-6); }
.tcn-prod-info .variations { width: 100%; margin-bottom: var(--space-4); }
.tcn-prod-info .variations td { padding: var(--space-2) 0; vertical-align: middle; }
.tcn-prod-info .variations .label label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tcn-prod-info .variations .value select { width: 100%; max-width: 360px; min-height: var(--tap); padding: 0 var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: #fff; color: var(--ink); font-size: 16px; cursor: pointer; }
.tcn-prod-info .variations .reset_variations { display: inline-flex; align-items: center; min-height: var(--tap); margin-left: var(--space-2); color: var(--accent); font-size: var(--fs-sm); }
.tcn-prod-info .woocommerce-variation-price .price { margin-bottom: var(--space-2); font-size: 1.4rem; font-weight: 900; color: var(--ink); }
.tcn-prod-info .woocommerce-variation-description { margin-bottom: var(--space-3); color: var(--muted); font-size: var(--fs-sm); }
.tcn-prod-info .woocommerce-variation-add-to-cart { display: flex; align-items: center; gap: var(--space-3); }
.tcn-prod-info .woocommerce-variation-add-to-cart .qty { width: 56px; height: var(--tap); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: #fff; color: var(--ink); text-align: center; font-size: 16px; font-weight: 700; -moz-appearance: textfield; }
.tcn-prod-info .woocommerce-variation-add-to-cart .qty::-webkit-inner-spin-button, .tcn-prod-info .woocommerce-variation-add-to-cart .qty::-webkit-outer-spin-button { -webkit-appearance: none; }
.tcn-prod-info .single_add_to_cart_button, .tcn-prod-info .single_add_to_cart_button.button.alt {
    flex: 1; min-height: 52px; padding: 0 var(--space-5) !important; border: 0 !important; border-radius: 999px !important; background: var(--ink) !important; color: var(--inverse) !important;
    font-size: 1rem !important; font-weight: 800 !important; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: background .15s;
}
.tcn-prod-info .single_add_to_cart_button:hover, .tcn-prod-info .single_add_to_cart_button.button.alt:hover { background: var(--accent) !important; color: var(--on-accent) !important; }
.tcn-prod-info .woocommerce-variation-availability { margin-top: var(--space-2); font-size: var(--fs-sm); }
.tcn-prod-info .stock.in-stock { color: #0f7a55; }
.tcn-prod-info .stock.out-of-stock { color: #b3261e; }

/* WooCommerce notices */
.tcn-prod-body .woocommerce-message { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); padding: var(--space-4) var(--space-5); background: rgba(11,135,152,.08); border: 1px solid rgba(11,135,152,.3); border-radius: var(--r-md); color: #0b6b78; font-weight: 600; font-size: var(--fs-sm); }
.tcn-prod-body .woocommerce-message a.button { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--space-4); border-radius: 999px; background: var(--ink); color: var(--inverse); text-decoration: none; font-weight: 800; font-size: 13px; letter-spacing: .04em; }
.tcn-prod-body .woocommerce-error { margin-bottom: var(--space-5); padding: var(--space-4) var(--space-5); background: rgba(198,40,40,.06); border: 1px solid rgba(198,40,40,.25); border-radius: var(--r-md); color: #b3261e; font-weight: 600; font-size: var(--fs-sm); list-style: none; }

body .tcn-prod-info li, body .tcn-prod-info strong, body .tcn-prod-info label, body .tcn-prod-meta-label, body .tcn-prod-rel-cat, body .tcn-prod-info p { color: var(--muted); }
body .tcn-prod-info .tcn-prod-price, body .tcn-prod-info .tcn-prod-meta-value { color: var(--ink); }
body .install-btn { background: var(--ink); color: var(--inverse); border-radius: 999px; }
body .install-btn:hover { background: var(--accent); color: var(--on-accent); }