/* ============================================================
   ThemeVisto marketplace — premium catalog design system.
   Used on the marketplace homepage template and every WooCommerce
   page (shop archive, single product, cart, checkout, account);
   the agency homepage's own dark navy/violet/teal system in
   style.css is untouched.

   Tokens are defined on :root, not scoped to .tv-mp, because the
   real shop archive and single-product pages render through
   WooCommerce's own default templates with no .tv-mp wrapper at
   all — a var() with no defining ancestor resolves to nothing.
   They're prefixed --tv- specifically so they never collide with
   the parent style.css, which already defines its own --ink and
   --accent globally on :root, at completely different values, for
   the agency homepage.
============================================================ */

:root {
	--tv-paper:    #FAFAF9;
	--tv-surface:  #FFFFFF;
	--tv-ink:      #1C1917;
	--tv-ink-soft: #57534E;
	--tv-faint:    #8B8681;
	--tv-line:     rgba(28,25,23,.11);
	--tv-line-2:   rgba(28,25,23,.22);
	--tv-accent:   #A16207;
	--tv-accent-ink: #5C3A05;
	--tv-accent-bg: #FBF0DC;
	--tv-good:     #1F6B4E;
	--tv-good-bg:  #E5F0EA;

	--tv-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
	--tv-body-font:    "IBM Plex Sans", -apple-system, sans-serif;
	--tv-mono:    "IBM Plex Mono", "SF Mono", Menlo, monospace;

	--tv-measure: 62ch;
	--tv-shell: 1200px;
	--tv-radius: 15px;
}

.tv-mp {
	background: var(--tv-paper);
	color: var(--tv-ink);
	font-family: var(--tv-body-font);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.tv-mp * { box-sizing: border-box; }
.tv-mp h1, .tv-mp h2, .tv-mp h3, .tv-mp h4 {
	font-family: var(--tv-display);
	font-weight: 700;
	letter-spacing: -0.01em;
	text-wrap: balance;
	margin: 0;
	line-height: 1.15;
	/* the parent theme's style.css forces h1-h6 to white with !important */
	color: var(--tv-ink) !important;
}
.tv-mp p { margin: 0; }
.tv-mp a { color: inherit; text-decoration: none; }
.tv-mp ::selection { background: var(--tv-accent); color: #fff; }
.tv-mp a:focus-visible, .tv-mp button:focus-visible, .tv-mp [tabindex]:focus-visible {
	outline: 2px solid var(--tv-accent);
	outline-offset: 2px;
}
.tv-mp .mono { font-family: var(--tv-mono); font-variant-numeric: tabular-nums; }
.tv-mp .shell { max-width: var(--tv-shell); margin: 0 auto; padding: 0 32px; }
.tv-mp .eyebrow {
	font-family: var(--tv-mono); font-size: 11.5px; font-weight: 500;
	letter-spacing: .1em; text-transform: uppercase; color: var(--tv-faint);
}

/* ---------- buttons ---------- */

.tv-mp .btn {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--tv-body-font); font-weight: 600; font-size: 14.5px;
	padding: 13px 24px; border-radius: var(--tv-radius);
	border: 1.5px solid var(--tv-ink); cursor: pointer; transition: .15s ease;
}
.tv-mp .btn-solid { background: var(--tv-ink); color: var(--tv-paper) !important; }
.tv-mp .btn-solid:hover { background: var(--tv-accent); border-color: var(--tv-accent); }
.tv-mp .btn-line { background: transparent; color: var(--tv-ink) !important; }
.tv-mp .btn-line:hover { background: var(--tv-ink); color: var(--tv-paper) !important; }

/* ---------- nav ---------- */

.tv-mp .site-nav { position: sticky; top: 0; z-index: 40; background: var(--tv-paper); border-bottom: 1px solid var(--tv-line); }
.tv-mp .site-nav .shell { height: 68px; display: flex; align-items: center; gap: 32px; }
.tv-mp .wordmark { font-family: var(--tv-display); font-weight: 800; font-size: 19px; letter-spacing: -0.01em; }
.tv-mp .nav-links { display: flex; gap: 26px; margin-left: 8px; }
.tv-mp .nav-links a { font-size: 14px; font-weight: 500; color: var(--tv-ink-soft) !important; }
.tv-mp .nav-links a:hover, .tv-mp .nav-links a.active { color: var(--tv-ink) !important; }
.tv-mp .nav-right { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.tv-mp .nav-contact {
	display: inline-flex; align-items: center; gap: 7px;
	font-family: var(--tv-mono); font-size: 12.5px; color: var(--tv-ink-soft) !important;
	border: 1px solid var(--tv-line); border-radius: var(--tv-radius);
	padding: 7px 13px; transition: border-color .15s ease, color .15s ease;
}
.tv-mp .nav-contact svg { width: 14px; height: 14px; flex-shrink: 0; }
.tv-mp .nav-contact:hover { border-color: var(--tv-ink); color: var(--tv-ink) !important; }
.tv-mp .nav-cart {
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--tv-ink); color: var(--tv-paper) !important;
	padding: 9px 16px; border-radius: var(--tv-radius);
	font-size: 13px; font-weight: 600;
}

/* ---------- hero ---------- */

.tv-mp .hero { border-bottom: 1px solid var(--tv-line); padding: 76px 0 60px; text-align: center; }
.tv-mp .hero-inner { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.tv-mp .hero h1 { font-size: clamp(28px, 3.4vw, 40px); }
.tv-mp .hero h1 .accent-word { color: var(--tv-accent); }
.tv-mp .hero .desc { color: var(--tv-ink-soft); font-size: 16px; max-width: 48ch; }

.tv-mp .search-wrap { position: relative; width: 100%; max-width: 560px; margin-top: 8px; }
.tv-mp .search-box {
	display: flex; align-items: center; gap: 10px;
	background: var(--tv-surface); border: 1.5px solid var(--tv-ink);
	border-radius: var(--tv-radius); padding: 4px 4px 4px 18px; overflow: hidden;
}
.tv-mp .search-box input {
	flex: 1; border: none; outline: none; background: transparent;
	font-family: var(--tv-body-font); font-size: 15px; color: var(--tv-ink); padding: 12px 0;
}
.tv-mp .search-box input::placeholder { color: var(--tv-faint); }
.tv-mp .search-box button {
	font-family: var(--tv-body-font); font-weight: 600; font-size: 13.5px;
	background: var(--tv-ink); color: var(--tv-paper); border: none;
	padding: 12px 20px; cursor: pointer; border-radius: calc(var(--tv-radius) - 4px);
}
.tv-mp .search-suggest {
	position: absolute; left: 0; right: 0; top: calc(100% + 6px);
	background: var(--tv-surface); border: 1px solid var(--tv-line);
	border-radius: var(--tv-radius); overflow: hidden;
	text-align: left; box-shadow: 0 12px 30px rgba(20,22,26,.10); z-index: 10;
}
.tv-mp .search-suggest__row {
	display: flex; align-items: center; gap: 12px;
	padding: 10px 16px; border-top: 1px solid var(--tv-line);
	font-size: 14px; cursor: pointer;
}
.tv-mp .search-suggest__row:first-child { border-top: none; }
.tv-mp .search-suggest__row:hover { background: var(--tv-paper); }
.tv-mp .search-suggest__glyph {
	width: 30px; height: 30px; flex-shrink: 0;
	background: linear-gradient(135deg, #F3E4C4, #EFEDE8);
	display: flex; align-items: center; justify-content: center;
	font-family: var(--tv-display); font-weight: 800; font-size: 11px; color: rgba(28,25,23,.3);
}
.tv-mp .search-suggest__meta { color: var(--tv-faint); font-size: 12px; margin-left: auto; font-family: var(--tv-mono); }
.tv-mp .search-suggest__empty { padding: 14px 16px; font-size: 13.5px; color: var(--tv-faint); }

.tv-mp .hero-trust {
	display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center;
	margin-top: 2px; font-family: var(--tv-mono); font-size: 12.5px; color: var(--tv-ink-soft);
}
.tv-mp .hero-trust b { color: var(--tv-ink); font-weight: 600; }
.tv-mp .hero-trust .stars { color: var(--tv-accent); letter-spacing: 1px; }
.tv-mp .hero-trust .sep { color: var(--tv-faint); }

.tv-mp .quick-tags { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.tv-mp .quick-tags a {
	font-size: 13px; font-family: var(--tv-mono); color: var(--tv-ink-soft) !important;
	border: 1px solid var(--tv-line); padding: 6px 13px;
}
.tv-mp .quick-tags a:hover { border-color: var(--tv-ink); color: var(--tv-ink) !important; }

/* ---------- generic section ---------- */

.tv-mp section.block { padding: 68px 0; border-bottom: 1px solid var(--tv-line); }
.tv-mp #categories, .tv-mp #hire { background: var(--tv-surface); }
.tv-mp .block-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 34px; }
.tv-mp .block-head h2 { font-size: clamp(24px, 2.4vw, 30px); }
.tv-mp .block-head p { color: var(--tv-ink-soft); max-width: var(--tv-measure); font-size: 15.5px; }
.tv-mp .block-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

/* ---------- categories ---------- */

.tv-mp .cat-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 16px; }
.tv-mp .cat-tile {
	background: var(--tv-surface); border: 1px solid var(--tv-line); border-radius: var(--tv-radius); padding: 26px 18px;
	display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
	transition: background .16s ease, transform .16s ease, border-color .16s ease;
}
.tv-mp .cat-tile:hover { background: var(--tv-accent-bg); border-color: var(--tv-accent); transform: translateY(-2px); }
.tv-mp .cat-tile__glyph { width: 54px; height: 54px; color: var(--tv-accent-ink); display: flex; align-items: center; justify-content: center; transition: color .16s ease; }
.tv-mp .cat-tile__glyph svg { width: 28px; height: 28px; }
.tv-mp .cat-tile:hover .cat-tile__glyph { color: var(--tv-ink); }
.tv-mp .cat-tile h4 { font-size: 14.5px; font-weight: 600; font-family: var(--tv-body-font); }
.tv-mp .cat-tile .count { font-family: var(--tv-mono); font-size: 12px; color: var(--tv-faint); }

/* ---------- product grid + card (also used by the real WooCommerce loop) ---------- */

.tv-mp .products-grid,
ul.products {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0,1fr));
	gap: 22px;
	list-style: none;
	margin: 0 0 40px !important;
	padding: 0 !important;
}
@media (max-width: 900px) {
	.tv-mp .products-grid, ul.products { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px) {
	.tv-mp .products-grid, ul.products { grid-template-columns: 1fr; }
}

.p-card {
	/* WooCommerce's own core stylesheet sets an explicit width + float on
	   .products li.product for its default multi-column layout — without
	   overriding both here, a card can render narrower than its actual
	   grid cell, floating left inside it with visible empty space around it. */
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
	background: var(--tv-surface); border: 1px solid var(--tv-line); border-radius: var(--tv-radius);
	overflow: hidden; display: flex; flex-direction: column; position: relative;
	transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
	list-style: none;
}
.p-card:hover { border-color: var(--tv-line-2); z-index: 2; box-shadow: 0 14px 32px rgba(28,25,23,.13); transform: translateY(-3px); }
.p-card__link { display: flex; flex-direction: column; color: inherit; }
.p-card__thumb {
	height: 148px; position: relative; overflow: hidden;
	background: linear-gradient(135deg, #F3E4C4, #EFEDE8);
	display: flex; align-items: center; justify-content: center;
}
.p-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.p-card__glyph { font-family: var(--tv-display); font-weight: 800; font-size: 24px; color: rgba(28,25,23,.16); }
.p-card__cat {
	position: absolute; top: 10px; left: 10px;
	font-family: var(--tv-mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase;
	background: var(--tv-surface); border: 1px solid var(--tv-line); color: var(--tv-ink-soft); padding: 4px 10px;
}
.p-card__body { padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 9px; }
.p-card__title { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.p-card__meta { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--tv-faint); }
.p-card__count { color: var(--tv-faint); }
.p-card__price-row { display: flex; align-items: baseline; justify-content: space-between; margin-top: 3px; padding-top: 9px; border-top: 1px solid var(--tv-line); }
.p-card__price { font-family: var(--tv-mono); font-weight: 600; font-size: 16.5px; color: var(--tv-ink); }
.p-card__price ins { text-decoration: none; }
.p-card__price del { opacity: .55; font-size: .85em; }

.p-card__actions { display: flex; gap: 8px; margin-top: auto; padding: 0 18px 18px; }
.p-card__preview {
	flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
	font-size: 12.5px; font-weight: 600; color: var(--tv-ink) !important;
	background: transparent; border: 1px solid var(--tv-line); border-radius: var(--tv-radius);
	padding: 10px 12px; transition: border-color .15s ease, background .15s ease;
}
.p-card__preview:hover { border-color: var(--tv-ink); background: var(--tv-paper); }

/* WooCommerce's own add-to-cart button, restyled to match the card system */
.p-card .add_to_cart_button,
.p-card .ajax_add_to_cart {
	flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	background: var(--tv-ink) !important; color: var(--tv-paper) !important;
	border: 1px solid var(--tv-ink) !important; border-radius: var(--tv-radius) !important;
	font-family: var(--tv-body-font) !important; font-weight: 600 !important; font-size: 12.5px !important;
	padding: 10px 16px !important; text-align: center;
	transition: background .15s ease;
}
.p-card .add_to_cart_button:hover { background: var(--tv-accent) !important; border-color: var(--tv-accent) !important; }
.p-card .added_to_cart {
	font-size: 11px; color: var(--tv-good); font-family: var(--tv-mono);
	display: block; text-align: center; margin-top: 6px; width: 100%;
}

/* WooCommerce's star-rating output */
.p-card .star-rating,
.tv-mp .star-rating {
	font-size: 13px; letter-spacing: 1px; color: var(--tv-line-2);
	overflow: hidden; position: relative; height: 1em; line-height: 1;
}
.p-card .star-rating::before,
.tv-mp .star-rating::before {
	content: "\2605\2605\2605\2605\2605"; color: var(--tv-line-2);
	letter-spacing: 1px; position: absolute; top: 0; left: 0;
}
.p-card .star-rating span,
.tv-mp .star-rating span { overflow: hidden; position: absolute; top: 0; left: 0; height: 100%; }
.p-card .star-rating span::before,
.tv-mp .star-rating span::before {
	content: "\2605\2605\2605\2605\2605"; color: var(--tv-accent); letter-spacing: 1px;
	position: absolute; top: 0; left: 0;
}

/* ---------- services ---------- */

.tv-mp .services-list { display: flex; flex-direction: column; }
.tv-mp .svc-row {
	display: grid; grid-template-columns: 40px 1fr auto; gap: 18px; align-items: baseline;
	padding: 18px 14px; margin: 0 -14px; border-top: 1px solid var(--tv-line); transition: background .15s ease;
}
.tv-mp .services-list .svc-row:last-child { border-bottom: 1px solid var(--tv-line); }
.tv-mp .svc-row:hover { background: var(--tv-accent-bg); }
.tv-mp .svc-row .idx { font-family: var(--tv-mono); font-size: 12px; color: var(--tv-accent); }
.tv-mp .svc-row h4 { font-size: 16px; font-weight: 600; font-family: var(--tv-body-font); }
.tv-mp .svc-row p { color: var(--tv-ink-soft); font-size: 14px; margin-top: 4px; max-width: 52ch; }
.tv-mp .svc-row .tag { font-family: var(--tv-mono); font-size: 11px; color: var(--tv-faint); white-space: nowrap; }

/* ---------- final CTA ---------- */

.tv-mp .cta-block { position: relative; overflow: hidden; background: var(--tv-ink); color: var(--tv-paper); padding: 76px 0 68px; text-align: center; }
.tv-mp .cta-block::before {
	content: ""; position: absolute; inset: 0;
	background-image: linear-gradient(rgba(250,250,249,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(250,250,249,.06) 1px, transparent 1px);
	background-size: 44px 44px;
	-webkit-mask-image: radial-gradient(ellipse 75% 90% at center, #000 40%, transparent 100%);
	mask-image: radial-gradient(ellipse 75% 90% at center, #000 40%, transparent 100%);
	pointer-events: none;
}
.tv-mp .cta-block .shell { position: relative; z-index: 1; }
.tv-mp .cta-block .eyebrow { color: var(--tv-accent); }
.tv-mp .cta-trust {
	display: inline-flex; align-items: center; gap: 8px; font-family: var(--tv-mono); font-size: 12px;
	color: rgba(250,250,249,.6); border: 1px solid rgba(250,250,249,.18); padding: 6px 16px; margin-bottom: 18px;
}
.tv-mp .cta-trust .stars { color: var(--tv-accent); letter-spacing: 1px; }
.tv-mp .cta-block h2 { color: var(--tv-paper) !important; font-size: clamp(28px, 3.4vw, 40px); }
.tv-mp .cta-block p { color: rgba(250,250,249,.68); max-width: 52ch; margin: 14px auto 0; font-size: 15.5px; }
.tv-mp .cta-actions { display: flex; gap: 14px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }
.tv-mp .cta-block .btn { padding: 15px 30px; font-size: 15px; }
.tv-mp .cta-block .btn-solid { background: var(--tv-accent); border-color: var(--tv-accent); color: #1C1300 !important; }
.tv-mp .cta-block .btn-solid:hover { background: #B8730A; border-color: #B8730A; }
.tv-mp .cta-block .btn-line { border-color: rgba(250,250,249,.4); color: var(--tv-paper) !important; }
.tv-mp .cta-block .btn-line:hover { background: var(--tv-paper); color: var(--tv-ink) !important; border-color: var(--tv-paper); }

/* ---------- newsletter ---------- */

.tv-mp .newsletter { padding: 52px 0; text-align: center; }
.tv-mp .newsletter h3 { font-size: 20px; }
.tv-mp .newsletter p { color: var(--tv-ink-soft); font-size: 14.5px; margin-top: 8px; }
.tv-mp .newsletter-form { display: flex; gap: 0; max-width: 440px; margin: 22px auto 0; border: 1.5px solid var(--tv-ink); border-radius: var(--tv-radius); overflow: hidden; }
.tv-mp .newsletter-form input { flex: 1; border: none; outline: none; background: transparent; font-family: var(--tv-body-font); font-size: 14.5px; color: var(--tv-ink); padding: 13px 16px; }
.tv-mp .newsletter-form input::placeholder { color: var(--tv-faint); }
.tv-mp .newsletter-form button { font-family: var(--tv-body-font); font-weight: 600; font-size: 13.5px; background: var(--tv-ink); color: var(--tv-paper); border: none; padding: 0 22px; cursor: pointer; transition: background .15s ease; }
.tv-mp .newsletter-form button:hover { background: var(--tv-accent); }
.tv-mp .newsletter-error { display: none; color: #A32D2D; font-size: 13px; margin-top: 10px; }
.tv-mp .newsletter-error.visible { display: block; }
.tv-mp .newsletter-success {
	display: none; max-width: 440px; margin: 22px auto 0; background: var(--tv-good-bg); color: #123527;
	border: 1px solid var(--tv-good); border-radius: var(--tv-radius); padding: 13px 16px; font-size: 14px; text-align: left;
}
.tv-mp .newsletter-success.visible { display: block; }

/* ---------- footer ---------- */

.tv-mp footer.tv-footer { padding: 44px 0; }
.tv-mp .foot-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; font-size: 13.5px; color: var(--tv-ink-soft); }
.tv-mp .foot-links { display: flex; gap: 22px; }

@media (max-width: 900px) {
	.tv-mp .cat-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
	.tv-mp .nav-links { display: none; }
}
@media (max-width: 560px) {
	.tv-mp .shell { padding: 0 20px; }
	.tv-mp .cat-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Single product page. Not wrapped in .tv-mp — this renders
   through WooCommerce's own default header, same as the shop
   archive already does — so every color here uses the global
   --tv- tokens directly rather than relying on an ancestor scope.
============================================================ */

/* WordPress/WooCommerce puts a "single-product" class on <body> for every
   product page. Without an explicit background here, the parent theme's
   own dark-navy body background (meant for the agency site) shows through
   behind the whole page and around the related-products section, which
   both sit outside .tv-product's own box. */
body.single-product {
	background: var(--tv-paper) !important;
	color: var(--tv-ink) !important;
}

/* WooCommerce's default breadcrumb renders before this template is even
   included, so it's a sibling of .tv-product, not a descendant. */
.woocommerce-breadcrumb {
	max-width: var(--tv-shell); margin: 0 auto; padding: 22px 32px 0;
	font-size: 13px; color: var(--tv-ink-soft) !important;
}
.woocommerce-breadcrumb a { color: var(--tv-ink-soft) !important; }
.woocommerce-breadcrumb a:hover { color: var(--tv-ink) !important; }

.tv-product {
	max-width: var(--tv-shell);
	margin: 0 auto;
	padding: 40px 32px 60px;
	font-family: var(--tv-body-font);
	color: var(--tv-ink);
}
.tv-product * { box-sizing: border-box; }
.tv-product h1, .tv-product h2, .tv-product h3 {
	font-family: var(--tv-display);
	font-weight: 700;
	letter-spacing: -0.01em;
	text-wrap: balance;
	margin: 0;
	color: var(--tv-ink) !important;
}
.tv-product a { text-decoration: none; }
.tv-product .mono { font-family: var(--tv-mono); font-variant-numeric: tabular-nums; }

.tv-product__layout {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 36px;
	align-items: start;
}

.tv-product__main { min-width: 0; }

.tv-product__preview {
	position: relative;
	background: linear-gradient(135deg, #F3E4C4, #EFEDE8);
	border: 1px solid var(--tv-line);
	border-radius: var(--tv-radius);
	overflow: hidden;
	aspect-ratio: 16 / 10;
	display: flex;
	align-items: center;
	justify-content: center;
}
.tv-product__preview img { width: 100%; height: 100%; object-fit: cover; }
.tv-product__glyph {
	font-family: var(--tv-display); font-weight: 800; font-size: 48px;
	color: rgba(28,25,23,.18);
}
.tv-product__preview-btn {
	position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
	display: inline-flex; align-items: center; gap: 8px;
	background: rgba(28,25,23,.82);
	color: var(--tv-paper) !important;
	font-weight: 600; font-size: 13px;
	padding: 11px 22px; border-radius: var(--tv-radius);
	transition: background .15s ease;
}
.tv-product__preview-btn:hover { background: var(--tv-ink); }

/* WooCommerce's tab widget, restyled */
.tv-product .woocommerce-tabs { margin-top: 28px; }
.tv-product .woocommerce-tabs ul.tabs {
	display: flex; gap: 4px; list-style: none; margin: 0; padding: 0;
	border-bottom: 1px solid var(--tv-line);
}
.tv-product .woocommerce-tabs ul.tabs li { margin: 0; }
.tv-product .woocommerce-tabs ul.tabs li a {
	display: inline-block;
	font-family: var(--tv-display); font-size: 14px; font-weight: 600;
	color: var(--tv-ink-soft) !important;
	padding: 11px 16px;
	border-bottom: 2px solid transparent;
	transition: color .15s ease, border-color .15s ease;
}
.tv-product .woocommerce-tabs ul.tabs li.active a,
.tv-product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--tv-ink) !important;
	border-bottom-color: var(--tv-accent);
}
.tv-product .woocommerce-tabs .panel {
	padding: 22px 2px; font-size: 15px; line-height: 1.75; color: var(--tv-ink-soft);
}
.tv-product .woocommerce-tabs .panel h2 {
	font-size: 18px; margin-bottom: 12px;
}
.tv-product .woocommerce-Reviews .comment-form-rating label,
.tv-product .woocommerce-Reviews label { color: var(--tv-ink); }
.tv-product .woocommerce-Reviews textarea,
.tv-product .woocommerce-Reviews input[type="text"],
.tv-product .woocommerce-Reviews input[type="email"] {
	border: 1px solid var(--tv-line); border-radius: var(--tv-radius);
	padding: 10px 14px; font-family: var(--tv-body-font);
}
.tv-product .woocommerce-Reviews #submit,
.tv-product .woocommerce-Reviews .button {
	background: var(--tv-ink) !important; color: var(--tv-paper) !important;
	border: none !important; border-radius: var(--tv-radius) !important;
	padding: 11px 22px !important; font-weight: 600 !important;
}

/* buy box */
.tv-product__buybox {
	background: var(--tv-surface);
	border: 1px solid var(--tv-line);
	border-radius: var(--tv-radius);
	padding: 24px;
	display: flex; flex-direction: column; gap: 14px;
	position: sticky; top: 20px;
}
.tv-product__cat {
	color: var(--tv-accent) !important; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
}
.tv-product__title { font-size: 22px !important; }
.tv-product__byline { font-size: 13px; color: var(--tv-ink-soft); margin-top: -4px; }
.tv-product__byline span { color: var(--tv-accent); font-weight: 600; }
.tv-product__rating { display: flex; align-items: center; gap: 10px; }
.tv-product__review-count { font-size: 12.5px; color: var(--tv-ink-soft) !important; }
.tv-product__price {
	font-family: var(--tv-mono); font-weight: 700; font-size: 28px; color: var(--tv-ink);
}
.tv-product__price del { opacity: .5; font-weight: 400; font-size: .7em; }

.tv-product__cart .single_add_to_cart_button,
.tv-product__cart button[type="submit"] {
	width: 100%; display: block; text-align: center;
	background: var(--tv-ink) !important; color: var(--tv-paper) !important;
	border: none !important; border-radius: var(--tv-radius) !important;
	padding: 14px !important; font-weight: 700 !important; font-size: 15px !important;
	font-family: var(--tv-body-font) !important; cursor: pointer;
	transition: background .15s ease;
}
.tv-product__cart .single_add_to_cart_button:hover { background: var(--tv-accent) !important; }
.tv-product__cart .quantity { display: none; }

.tv-product__details { border-top: 1px solid var(--tv-line); padding-top: 6px; }
.tv-product__detail-row {
	display: flex; justify-content: space-between; gap: 12px;
	padding: 10px 0; border-top: 1px solid var(--tv-line);
	font-size: 13px; color: var(--tv-ink-soft);
}
.tv-product__detail-row:first-child { border-top: none; }
.tv-product__detail-row b { color: var(--tv-ink); font-weight: 500; }
.tv-product__detail-row a { color: var(--tv-accent) !important; font-weight: 600; }

/* Related products — reuses the existing ul.products / .p-card grid */
.tv-product ~ .related.products {
	max-width: var(--tv-shell); margin: 0 auto; padding: 0 32px 60px;
}
.related.products > h2 {
	font-family: var(--tv-display); font-size: 22px; font-weight: 700;
	color: var(--tv-ink) !important; margin-bottom: 22px;
}

@media (max-width: 860px) {
	.tv-product__layout { grid-template-columns: 1fr; }
	.tv-product__buybox { position: static; }
}
@media (max-width: 560px) {
	.tv-product { padding: 28px 20px 44px; }
	.related.products { padding: 0 20px 44px !important; }
}
