/*
Theme Name:       OGA Mini App v109005 · Brand Edition
Theme URI:        https://onlineguideassociation.org/
Author:           Online Guide Association
Author URI:       https://onlineguideassociation.org/
Description:      OGA Mini App v109005 (Brand Edition) — Online Guide Association. Brand identity applied throughout: OGA Blue #003DA5 and OGA Red #D41159 taken from the logo, with light and dark surface modes selectable in the Customizer. Inline SVG logo, Cambodia listings directory (guides, drivers, temples, tours) and the Siem Reap category grid. Fully responsive, WordPress 7.0 + WooCommerce 10.0 compatible, WCAG AA verified. PHP 8.0+ required.
Version:          109005.0
Requires at least: 7.0
Tested up to:     7.0
Requires PHP:     8.0
License:          GPL-2.0-or-later
License URI:      https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:      oga-v109002
Tags:             responsive, woocommerce, social-commerce, ai-shopping, networks, tourism, cambodia, ogace, pwa, accessibility-ready, wide-blocks
*/

/* ══════════════════════════════════════════════════════════════════════════
 * OGA v109002.1 · DESIGN TOKENS
 * WordPress 7.0 · Fully Responsive · WooCommerce Unified
 * ══════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700&family=Inter+Tight:wght@500;600;700&family=DM+Mono:wght@400;500&display=swap');

:root {
	/* ── Surfaces (Linear near-black ramp) ── */
	--bg0:      #08090a;
	--bg1:      #0f1011;
	--bg2:      #141516;
	--bg3:      #1a1c1e;
	--bg4:      #212325;
	--line1:    rgba(255,255,255,0.06);
	--line2:    rgba(255,255,255,0.10);
	--line3:    rgba(255,255,255,0.14);
	--fg0:      #f7f8f8;
	--fg1:      #d0d2d8;
	--fg2:      #8a8f98;
	--fg3:      #62666d;

	/* ── Accent (Linear indigo) — variable kept named --gold for back-compat ── */
	--gold:         #5e6ad2;
	--gold-dim:     rgba(94,106,210,0.14);
	--gold-glow:    rgba(94,106,210,0.20);
	--gold-hover:   #6e79e0;

	/* ── G-layer network palette (muted to Linear's calm register; g1 = brand indigo) ── */
	--g0: #46a99b; --g0-bg: rgba(70,169,155,0.10);  --g0-bd: rgba(70,169,155,0.22);
	--g1: #5e6ad2; --g1-bg: rgba(94,106,210,0.12);  --g1-bd: rgba(94,106,210,0.26);
	--g2: #8b7ed8; --g2-bg: rgba(139,126,216,0.10); --g2-bd: rgba(139,126,216,0.22);
	--g3: #7c6bc4; --g3-bg: rgba(124,107,196,0.10); --g3-bd: rgba(124,107,196,0.22);
	--g4: #5fae6e; --g4-bg: rgba(95,174,110,0.10);  --g4-bd: rgba(95,174,110,0.22);
	--g5: #5a8fd8; --g5-bg: rgba(90,143,216,0.10);  --g5-bd: rgba(90,143,216,0.22);
	--g6: #c46f8e; --g6-bg: rgba(196,111,142,0.10); --g6-bd: rgba(196,111,142,0.22);
	--g7: #cf8a5e; --g7-bg: rgba(207,138,94,0.10);  --g7-bd: rgba(207,138,94,0.22);

	/* ── Typography (Linear: Inter / Inter Tight; mono kept for technical cells) ── */
	--sans:    'Inter', system-ui, -apple-system, sans-serif;
	--mono:    'DM Mono', ui-monospace, 'JetBrains Mono', 'Courier New', monospace;
	--display: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;

	/* ── Radius (Linear scale — unchanged: 8px workhorse) ── */
	--r4:  4px;
	--r6:  6px;
	--r8:  8px;
	--r12: 12px;
	--r16: 16px;

	/* ── Legacy aliases ── */
	--o-bg0: var(--bg0);   --o-bg1: var(--bg1);   --o-bg2: var(--bg2);   --o-bg3: var(--bg3);
	--o-fg0: var(--fg0);   --o-fg1: var(--fg1);   --o-fg2: var(--fg2);   --o-fg3: var(--fg3);
	--o-line1: var(--line1);  --o-line2: var(--line2);
	--o-gold:   var(--gold);  --o-rose:  var(--g6);   --o-teal:  var(--g0);  --o-violet: var(--g2);
	--t-free:  var(--g0);  --t-pro:  var(--g1);   --t-agency: var(--g7);
	--t-ent:   var(--g2);  --t-dao:  var(--g6);
	--tc-wc:   var(--g3);  --tc-ai:  var(--g2);   --tc-nvidia: var(--g4);
	--o-r4: var(--r4);  --o-r8: var(--r8);  --o-r12: var(--r12);
	--o-mono: var(--mono);  --o-sans: var(--sans);

	/* ── WordPress 7.0 Block Editor ── */
	--wp--preset--color--foreground: var(--fg0);
	--wp--preset--color--background: var(--bg0);
	--wp--preset--color--primary: var(--gold);
	--wp--preset--color--secondary: var(--g0);
	--wp--preset--spacing--small: 0.5rem;
	--wp--preset--spacing--medium: 1rem;
	--wp--preset--spacing--large: 2rem;
}

/* ══════════════════════════════════════════════════════════════════════════
 * BASE RESET · Accessibility-first
 * ══════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
	font-size: clamp(13px, 1.5vw, 16px);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	scroll-behavior: smooth;
}

body {
	font-family: var(--sans);
	background: var(--bg0);
	color: var(--fg0);
	line-height: 1.6;
	min-height: 100vh;
	overflow-x: hidden;
}

/* Skip link — accessibility requirement */
.skip-link {
	position: absolute;
	top: -9999px;
	left: 1rem;
	z-index: 99999;
	padding: 8px 16px;
	background: var(--gold);
	color: var(--bg0);
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 700;
	border-radius: var(--r4);
	text-decoration: none;
}
.skip-link:focus { top: 1rem; }

a { color: var(--g0); text-decoration: none; transition: color .15s; }
a:hover, a:focus { color: var(--gold); outline: 2px solid transparent; }
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: var(--r4); }

img, video { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; border: none; background: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}

/* Screen reader only utility */
.screen-reader-text {
	clip: rect(1px,1px,1px,1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* ══════════════════════════════════════════════════════════════════════════
 * APP SHELL — Fully Responsive 3-breakpoint layout
 * ══════════════════════════════════════════════════════════════════════════ */
.oga-shell {
	max-width: 480px;
	margin: 0 auto;
	min-height: 100vh;
	background: var(--bg0);
	position: relative;
}
@media (min-width: 640px)  { .oga-shell { max-width: 640px; } }
@media (min-width: 768px)  { .oga-shell { max-width: 768px; } }
@media (min-width: 1024px) { .oga-shell { max-width: 1200px; } }
@media (min-width: 1280px) { .oga-shell { max-width: 1440px; } }

.oga-section { padding: clamp(12px, 2vw, 24px) clamp(16px, 3vw, 32px); }

.oga-section-label {
	font-family: var(--mono);
	font-size: 10px;
	text-transform: none;
	letter-spacing: -0.01em;
	color: var(--fg3);
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.oga-section-label::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--line1);
}

.oga-prompt {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--fg3);
	padding: 8px 12px;
	background: var(--bg1);
	border-radius: var(--r4);
	border-left: 2px solid var(--gold);
	margin-bottom: 14px;
	overflow-x: auto;
	white-space: nowrap;
}

/* ── Grid utilities ── */
.oga-grid { display: grid; gap: 12px; }
.oga-grid-2 { grid-template-columns: repeat(2, 1fr); }
.oga-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 480px) {
	.oga-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

/* ── Card ── */
.oga-card {
	background: var(--bg2);
	border: 1px solid var(--line2);
	border-radius: var(--r12);
	padding: 16px;
	transition: border-color .2s, transform .15s;
}
.oga-card:hover { border-color: var(--line3); transform: translateY(-1px); }

/* ── Main content ── */
.oga-main { padding-bottom: 40px; }

/* ── Article ── */
.oga-article {
	margin-bottom: 24px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--line2);
}

/* ══════════════════════════════════════════════════════════════════════════
 * WOOCOMMERCE — Full Reskin to Match OGA Design System
 * ══════════════════════════════════════════════════════════════════════════ */

/* ── WC wrapper ── */
.woocommerce, .woocommerce-page {
	background: var(--bg0);
	color: var(--fg0);
}

/* ── WC notices ── */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	border-radius: var(--r8);
	padding: 12px 16px;
	margin: 0 0 16px;
	border-left-width: 3px;
	border-left-style: solid;
	font-family: var(--mono);
	font-size: 12px;
	list-style: none;
	background: var(--bg2);
	color: var(--fg1);
}
.woocommerce-message { border-left-color: var(--g4); }
.woocommerce-info    { border-left-color: var(--g5); }
.woocommerce-error   { border-left-color: var(--g6); }

/* ── Product loop ── */
ul.products { display: grid; gap: 16px; list-style: none; padding: 0; margin: 0; }
@media (min-width: 480px) { ul.products { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px){ ul.products { grid-template-columns: repeat(4, 1fr); } }

ul.products li.product {
	background: var(--bg2);
	border: 1px solid var(--line2);
	border-radius: var(--r12);
	padding: 0;
	overflow: hidden;
	transition: border-color .2s, transform .15s, box-shadow .2s;
}
ul.products li.product:hover {
	border-color: var(--gold-glow);
	transform: translateY(-2px);
	box-shadow: 0 8px 32px rgba(0,0,0,.4);
}
ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 500;
	color: var(--fg0);
	padding: 12px 12px 4px;
	margin: 0;
}
ul.products li.product .price {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--gold);
	padding: 0 12px 8px;
	display: block;
}
ul.products li.product .button,
ul.products li.product a.button {
	display: block;
	margin: 0 12px 12px;
	padding: 8px 0;
	text-align: center;
	background: var(--gold-dim);
	border: 1px solid var(--g1-bd);
	border-radius: var(--r6);
	color: var(--gold);
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 500;
	text-transform: none;
	letter-spacing: -0.01em;
	transition: background .2s, border-color .2s;
}
ul.products li.product .button:hover { background: var(--gold-hover); border-color: var(--gold); }

/* Sale badge */
ul.products li.product span.onsale {
	background: var(--g6);
	color: #fff;
	font-family: var(--mono);
	font-size: 9px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: -0.01em;
	padding: 3px 7px;
	border-radius: var(--r4);
	top: 10px;
	left: 10px;
}

/* ── Single product ── */
.woocommerce div.product {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}
@media (min-width: 768px) {
	.woocommerce div.product {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}
}
.woocommerce div.product .product_title {
	font-family: var(--display);
	font-size: clamp(18px, 3vw, 28px);
	font-weight: 700;
	color: var(--fg0);
	margin-bottom: 8px;
}
.woocommerce div.product p.price, .woocommerce div.product span.price {
	font-family: var(--mono);
	font-size: 20px;
	color: var(--gold);
	font-weight: 500;
}
.woocommerce div.product .woocommerce-product-rating .star-rating {
	color: var(--gold);
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
	border-bottom: 1px solid var(--line2);
	padding: 0;
	list-style: none;
	display: flex;
	gap: 4px;
	margin-bottom: 16px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: 1px solid var(--line2);
	border-bottom: none;
	border-radius: var(--r6) var(--r6) 0 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: var(--bg2);
	border-color: var(--line3);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-family: var(--mono);
	font-size: 11px;
	text-transform: none;
	letter-spacing: -0.01em;
	color: var(--fg2);
	padding: 8px 14px;
	display: block;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--fg0); }

/* ── Cart ── */
.woocommerce-cart .cart-empty,
.woocommerce table.shop_table {
	background: var(--bg2);
	border: 1px solid var(--line2);
	border-radius: var(--r12);
	overflow: hidden;
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
}
.woocommerce table.shop_table th {
	background: var(--bg3);
	font-family: var(--mono);
	font-size: 10px;
	text-transform: none;
	letter-spacing: -0.01em;
	color: var(--fg3);
	padding: 10px 14px;
	border-bottom: 1px solid var(--line2);
	font-weight: 400;
}
.woocommerce table.shop_table td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--line1);
	color: var(--fg1);
	vertical-align: middle;
}
.woocommerce table.shop_table .product-name a { color: var(--fg0); }
.woocommerce table.shop_table .product-price, .woocommerce table.shop_table .product-total {
	font-family: var(--mono);
	color: var(--gold);
}
.woocommerce .coupon input, .woocommerce-page .coupon input {
	background: var(--bg3);
	border: 1px solid var(--line2);
	border-radius: var(--r6);
	color: var(--fg0);
	padding: 8px 12px;
	font-family: var(--mono);
	font-size: 12px;
}
.woocommerce .coupon input:focus { border-color: var(--gold); }
.woocommerce-cart .cart-totals {
	background: var(--bg2);
	border: 1px solid var(--line2);
	border-radius: var(--r12);
	padding: 20px;
	margin-top: 20px;
}
.woocommerce-cart .cart-totals h2 {
	font-family: var(--mono);
	font-size: 11px;
	text-transform: none;
	letter-spacing: -0.01em;
	color: var(--fg3);
	margin-bottom: 12px;
}
.woocommerce-cart .cart-totals .order-total .woocommerce-Price-amount {
	font-family: var(--mono);
	font-size: 20px;
	color: var(--gold);
	font-weight: 500;
}

/* ── Checkout ── */
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review {
	background: var(--bg2);
	border: 1px solid var(--line2);
	border-radius: var(--r12);
	padding: 24px;
}
.woocommerce form .form-row label {
	font-family: var(--mono);
	font-size: 10px;
	text-transform: none;
	letter-spacing: -0.01em;
	color: var(--fg3);
	margin-bottom: 6px;
	display: block;
}
.woocommerce form .form-row input, .woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	background: var(--bg3);
	border: 1px solid var(--line2);
	border-radius: var(--r6);
	color: var(--fg0);
	padding: 10px 12px;
	width: 100%;
	font-family: var(--sans);
	font-size: 13px;
	transition: border-color .15s;
}
.woocommerce form .form-row input:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	border-color: var(--gold);
	outline: none;
	box-shadow: 0 0 0 2px var(--gold-dim);
}
.woocommerce #payment {
	background: var(--bg3);
	border-radius: var(--r8);
	padding: 16px;
	margin-top: 16px;
}
.woocommerce #payment ul.payment_methods li label {
	font-family: var(--sans);
	color: var(--fg1);
	font-size: 13px;
}

/* ── CTA / Purchase buttons ── */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce input[type=submit] {
	background: var(--gold);
	color: var(--bg0);
	border: none;
	border-radius: var(--r8);
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: -0.01em;
	padding: 12px 24px;
	cursor: pointer;
	transition: opacity .2s, transform .15s;
	display: inline-block;
	text-align: center;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce input[type=submit]:hover {
	opacity: .85;
	transform: translateY(-1px);
}
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt {
	background: var(--g0);
	color: var(--bg0);
}

/* ── My Account ── */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	padding: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 10px 14px;
	font-family: var(--mono);
	font-size: 11px;
	text-transform: none;
	letter-spacing: -0.01em;
	color: var(--fg2);
	border-radius: var(--r6);
	transition: background .15s, color .15s;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background: var(--gold-dim);
	color: var(--gold);
}

/* ── Order status badges ── */
.woocommerce-order-status-processing { color: var(--g5); }
.woocommerce-order-status-completed  { color: var(--g4); }
.woocommerce-order-status-cancelled  { color: var(--g6); }
.woocommerce-order-status-on-hold    { color: var(--g7); }
.woocommerce-order-status-refunded   { color: var(--g2); }
.woocommerce-order-status-pending    { color: var(--fg3); }

mark.order-status { background: transparent; }
mark.order-status.status-processing { color: var(--g5); }
mark.order-status.status-completed  { color: var(--g4); }
mark.order-status.status-cancelled  { color: var(--g6); }

/* ── Mini cart widget ── */
.widget_shopping_cart .cart_list li {
	padding: 8px 0;
	border-bottom: 1px solid var(--line1);
	font-size: 12px;
	color: var(--fg1);
}
.widget_shopping_cart .total {
	font-family: var(--mono);
	color: var(--gold);
	font-size: 13px;
	padding: 8px 0;
}

/* ── Breadcrumbs ── */
.woocommerce-breadcrumb {
	font-family: var(--mono);
	font-size: 10px;
	text-transform: none;
	letter-spacing: -0.01em;
	color: var(--fg3);
	padding: 12px 0;
}
.woocommerce-breadcrumb a { color: var(--fg2); }
.woocommerce-breadcrumb a:hover { color: var(--gold); }

/* ── Sorting + Result count ── */
.woocommerce-ordering select {
	background: var(--bg2);
	border: 1px solid var(--line2);
	border-radius: var(--r6);
	color: var(--fg1);
	font-family: var(--mono);
	font-size: 11px;
	padding: 6px 10px;
}
.woocommerce-result-count {
	font-family: var(--mono);
	font-size: 10px;
	color: var(--fg3);
	text-transform: none;
	letter-spacing: -0.01em;
}

/* ── Pagination ── */
.woocommerce-pagination ul,
.page-numbers { list-style: none; padding: 0; display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; }
.woocommerce-pagination ul li span,
.woocommerce-pagination ul li a,
.page-numbers li span,
.page-numbers li a {
	display: inline-block;
	padding: 6px 12px;
	font-family: var(--mono);
	font-size: 11px;
	color: var(--fg2);
	background: var(--bg2);
	border: 1px solid var(--line2);
	border-radius: var(--r6);
	transition: background .15s, color .15s;
}
.woocommerce-pagination ul li span.current,
.page-numbers li span.current {
	background: var(--gold-dim);
	border-color: var(--g1-bd);
	color: var(--gold);
}

/* ── Related / Cross-sell headings ── */
.related.products h2,
.cross-sells h2,
.upsells.products h2 {
	font-family: var(--mono);
	font-size: 11px;
	text-transform: none;
	letter-spacing: -0.01em;
	color: var(--fg3);
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}
.related.products h2::after,
.cross-sells h2::after,
.upsells.products h2::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--line1);
}

/* ══════════════════════════════════════════════════════════════════════════
 * WORDPRESS 7.0 BLOCK EDITOR SUPPORT
 * ══════════════════════════════════════════════════════════════════════════ */
.wp-block-group { background: transparent; }
.wp-block-separator { border-color: var(--line2); }
.wp-block-quote {
	border-left: 3px solid var(--gold);
	padding-left: 16px;
	color: var(--fg1);
	font-style: italic;
}
.wp-block-code, .wp-block-preformatted {
	background: var(--bg2);
	border: 1px solid var(--line2);
	border-radius: var(--r8);
	padding: 16px;
	font-family: var(--mono);
	font-size: 12px;
	color: var(--g0);
	overflow-x: auto;
}
.wp-block-table { width: 100%; border-collapse: collapse; }
.wp-block-table td, .wp-block-table th {
	border: 1px solid var(--line2);
	padding: 10px 14px;
	color: var(--fg1);
}
.wp-block-table thead th { background: var(--bg2); color: var(--fg0); font-weight: 600; }
.wp-block-image img { border-radius: var(--r8); }
.wp-block-button__link {
	background: var(--gold);
	color: var(--bg0) !important;
	border-radius: var(--r8);
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: -0.01em;
	padding: 12px 24px;
	border: none;
}
.wp-block-button__link:hover { opacity: .85; }
.has-gold-color { color: var(--gold); }
.has-background { background: var(--bg2); }

/* Block editor admin styles */
.editor-styles-wrapper {
	background: var(--bg0);
	color: var(--fg0);
	font-family: var(--sans);
}

/* ══════════════════════════════════════════════════════════════════════════
 * NETWORK TAG CHIPS — G-layer palette
 * Both .oga-network-tag--gN (new) and .oga-network-tag.gN (legacy)
 * ══════════════════════════════════════════════════════════════════════════ */
.oga-network-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 8px;
	border-radius: 100px;
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 500;
	text-transform: none;
	letter-spacing: -0.01em;
	white-space: nowrap;
}
.oga-network-tag--g0, .oga-network-tag.g0 { background: var(--g0-bg); border: 1px solid var(--g0-bd); color: var(--g0); }
.oga-network-tag--g1, .oga-network-tag.g1 { background: var(--g1-bg); border: 1px solid var(--g1-bd); color: var(--g1); }
.oga-network-tag--g2, .oga-network-tag.g2 { background: var(--g2-bg); border: 1px solid var(--g2-bd); color: var(--g2); }
.oga-network-tag--g3, .oga-network-tag.g3 { background: var(--g3-bg); border: 1px solid var(--g3-bd); color: var(--g3); }
.oga-network-tag--g4, .oga-network-tag.g4 { background: var(--g4-bg); border: 1px solid var(--g4-bd); color: var(--g4); }
.oga-network-tag--g5, .oga-network-tag.g5 { background: var(--g5-bg); border: 1px solid var(--g5-bd); color: var(--g5); }
.oga-network-tag--g6, .oga-network-tag.g6 { background: var(--g6-bg); border: 1px solid var(--g6-bd); color: var(--g6); }
.oga-network-tag--g7, .oga-network-tag.g7 { background: var(--g7-bg); border: 1px solid var(--g7-bd); color: var(--g7); }

/* ══════════════════════════════════════════════════════════════════════════
 * RESPONSIVE UTILITIES
 * ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
	.oga-hide-mobile { display: none !important; }
	.oga-section { padding: 12px 14px; }
}
@media (min-width: 481px) and (max-width: 767px) {
	.oga-hide-tablet { display: none !important; }
}
@media (min-width: 768px) {
	.oga-hide-desktop { display: none !important; }
	.oga-main { display: grid; grid-template-columns: 1fr; gap: 0; }
}
@media (min-width: 1024px) {
	.oga-main.has-sidebar {
		grid-template-columns: 1fr 320px;
		gap: 32px;
	}
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--bg1); }
::-webkit-scrollbar-thumb { background: var(--bg4); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--fg3); }


/* ══════════════════════════════════════════════════════════════════════════
 * OGA v109003 · COMPACT EXPERT VIDEO MAGAZINE — Reel + Photo + Detail Feed
 * WooCommerce 10.0 · WordPress 7.0 · PHP 8.0+
 * ══════════════════════════════════════════════════════════════════════════ */

/* ── Magazine Layout Shell ─────────────────────────────────────── */
.oga-magazine {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	background: var(--bg0);
}

@media (min-width: 900px) {
	.oga-magazine {
		grid-template-columns: 380px 1fr;
		min-height: 100svh;
	}
}

/* ── Feed Column (left / full on mobile) ───────────────────────── */
.oga-feed-col {
	border-right: 1px solid var(--line2);
	overflow-y: auto;
	max-height: 100svh;
	scrollbar-width: thin;
	scrollbar-color: var(--bg3) transparent;
	position: sticky;
	top: 0;
}

/* ── Detail Column (right) ─────────────────────────────────────── */
.oga-detail-col {
	padding: 0;
	overflow-y: auto;
	max-height: 100svh;
}

/* ── Feed Filter Strip ─────────────────────────────────────────── */
.oga-feed-filter {
	display: flex;
	gap: 6px;
	padding: 10px 12px;
	background: var(--bg1);
	border-bottom: 1px solid var(--line2);
	overflow-x: auto;
	scrollbar-width: none;
	position: sticky;
	top: 0;
	z-index: 10;
}
.oga-feed-filter::-webkit-scrollbar { display: none; }

.oga-filter-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px 10px;
	border-radius: 20px;
	font-size: 11px;
	font-family: var(--mono);
	white-space: nowrap;
	border: 1px solid var(--line2);
	background: var(--bg2);
	color: var(--fg2);
	cursor: pointer;
	transition: border-color .15s, color .15s;
}
.oga-filter-chip[data-active="1"],
.oga-filter-chip:hover {
	border-color: var(--gold);
	color: var(--gold);
}

/* ── Feed Item Cards ───────────────────────────────────────────── */
.oga-feed-item {
	display: grid;
	grid-template-columns: 88px 1fr;
	gap: 0;
	border-bottom: 1px solid var(--line1);
	cursor: pointer;
	transition: background .12s;
	position: relative;
}
.oga-feed-item:hover,
.oga-feed-item[data-active="1"] {
	background: var(--bg2);
}
.oga-feed-item[data-active="1"]::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--gold);
	border-radius: 0 2px 2px 0;
}

/* Thumbnail cell */
.oga-feed-thumb {
	width: 88px;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	flex-shrink: 0;
	position: relative;
	background: var(--bg2);
}
.oga-feed-thumb-inner {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32px;
}
.oga-feed-thumb-badge {
	position: absolute;
	bottom: 4px;
	right: 4px;
	font-family: var(--mono);
	font-size: 9px;
	background: rgba(0,0,0,.72);
	color: #fff;
	padding: 2px 5px;
	border-radius: 4px;
	letter-spacing: -0.01em;
}
.oga-feed-thumb-type {
	position: absolute;
	top: 4px;
	left: 4px;
	font-size: 10px;
	padding: 2px 5px;
	border-radius: 4px;
	font-family: var(--mono);
	font-weight: 700;
	letter-spacing: -0.01em;
}
.oga-feed-thumb-type--reel  { background: rgba(212,83,126,.85); color: #fff; }
.oga-feed-thumb-type--photo { background: rgba(66,133,244,.85); color: #fff; }
.oga-feed-thumb-type--live  { background: rgba(118,185,0,.85);  color: #fff; }
.oga-feed-thumb-type--shop  { background: rgba(201,162,39,.85); color: #000; }

/* Meta cell */
.oga-feed-meta {
	padding: 10px 12px 10px 10px;
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}
.oga-feed-creator {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	color: var(--fg2);
	font-family: var(--mono);
}
.oga-feed-avatar {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--bg3);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: 700;
	flex-shrink: 0;
}
.oga-feed-title {
	font-size: 12px;
	font-weight: 600;
	color: var(--fg0);
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.oga-feed-stats {
	display: flex;
	gap: 8px;
	font-size: 10px;
	color: var(--fg3);
	font-family: var(--mono);
}
.oga-feed-product-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 7px;
	border-radius: 10px;
	background: var(--gold-dim);
	border: 1px solid var(--gold-glow);
	color: var(--gold);
	font-size: 10px;
	font-family: var(--mono);
	font-weight: 700;
	white-space: nowrap;
}

/* ── Detail Viewer ─────────────────────────────────────────────── */
.oga-detail {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* Reel / photo hero */
.oga-detail-hero {
	position: relative;
	background: var(--bg1);
	aspect-ratio: 16 / 9;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.oga-detail-hero--reel {
	aspect-ratio: 9 / 16;
	max-height: 60svh;
}
.oga-detail-hero-emoji {
	font-size: 96px;
	user-select: none;
}
.oga-detail-play-btn {
	position: absolute;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(0,0,0,.55);
	border: 2px solid rgba(255,255,255,.4);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	cursor: pointer;
	backdrop-filter: blur(4px);
}
.oga-detail-overlay-meta {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 12px 16px;
	background: linear-gradient(to top, rgba(0,0,0,.8) 0%, transparent 100%);
	font-size: 11px;
	color: var(--fg1);
	font-family: var(--mono);
	display: flex;
	gap: 12px;
}

/* Detail body */
.oga-detail-body {
	padding: 16px;
	flex: 1;
}
.oga-detail-title {
	font-family: var(--display);
	font-size: clamp(15px, 2.5vw, 22px);
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 8px;
	color: var(--fg0);
}
.oga-detail-byline {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	color: var(--fg2);
	font-family: var(--mono);
	margin-bottom: 12px;
	flex-wrap: wrap;
}
.oga-detail-byline-avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--bg3);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 12px;
	flex-shrink: 0;
}
.oga-tier-badge {
	padding: 2px 7px;
	border-radius: 10px;
	font-size: 10px;
	font-family: var(--mono);
	font-weight: 700;
}
.oga-detail-desc {
	font-size: 13px;
	color: var(--fg1);
	line-height: 1.7;
	margin-bottom: 16px;
}
.oga-detail-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-bottom: 16px;
}
.oga-detail-tag {
	padding: 3px 8px;
	border-radius: 10px;
	font-size: 10px;
	font-family: var(--mono);
	border: 1px solid var(--line2);
	color: var(--fg2);
}

/* Engagement bar */
.oga-detail-engage {
	display: flex;
	gap: 14px;
	font-size: 12px;
	color: var(--fg2);
	padding: 10px 0;
	border-top: 1px solid var(--line1);
	border-bottom: 1px solid var(--line1);
	margin-bottom: 14px;
}
.oga-detail-engage-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	cursor: pointer;
}

/* WC Product card inside detail */
.oga-detail-product {
	background: var(--bg2);
	border: 1px solid var(--line2);
	border-radius: var(--r12);
	padding: 14px;
	margin-bottom: 12px;
}
.oga-detail-product-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}
.oga-detail-product-icon {
	font-size: 32px;
	flex-shrink: 0;
}
.oga-detail-product-name {
	font-weight: 700;
	font-size: 13px;
	color: var(--fg0);
	margin-bottom: 2px;
}
.oga-detail-product-price {
	font-family: var(--mono);
	font-size: 12px;
}
.oga-detail-product-price .price-now   { color: var(--gold); font-weight: 700; font-size: 15px; }
.oga-detail-product-price .price-was   { color: var(--fg3); text-decoration: line-through; margin-left: 4px; }
.oga-detail-product-price .price-badge { color: var(--g6); font-weight: 700; margin-left: 4px; }

.oga-detail-buy-btn {
	display: block;
	width: 100%;
	padding: 11px;
	background: var(--gold);
	color: var(--bg0);
	border: none;
	border-radius: var(--r8);
	font-weight: 700;
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: -0.01em;
	text-align: center;
	cursor: pointer;
	transition: opacity .15s;
}
.oga-detail-buy-btn:hover { opacity: .88; }

/* Related feed strip */
.oga-related-strip {
	padding: 14px 16px;
	border-top: 1px solid var(--line2);
}
.oga-related-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
	gap: 6px;
	margin-top: 8px;
}
.oga-related-card {
	background: var(--bg2);
	border: 1px solid var(--line1);
	border-radius: var(--r8);
	overflow: hidden;
	cursor: pointer;
}
.oga-related-thumb {
	aspect-ratio: 1/1;
	background: var(--bg3);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
}
.oga-related-label {
	padding: 4px 6px;
	font-size: 9px;
	color: var(--fg2);
	font-family: var(--mono);
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ── Photo Grid (magazine multi-col) ───────────────────────────── */
.oga-photo-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2px;
}
.oga-photo-grid-item {
	aspect-ratio: 1/1;
	background: var(--bg2);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32px;
	overflow: hidden;
	cursor: pointer;
	position: relative;
}
.oga-photo-grid-item:hover .oga-photo-grid-overlay {
	opacity: 1;
}
.oga-photo-grid-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.5);
	opacity: 0;
	transition: opacity .15s;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	color: #fff;
	font-family: var(--mono);
}

/* ── WooCommerce 10.x HPOS-safe product grid in feed ──────────── */
.oga-wc-product-row {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding: 10px 12px;
	scrollbar-width: none;
	border-bottom: 1px solid var(--line2);
}
.oga-wc-product-row::-webkit-scrollbar { display: none; }

.oga-wc-mini-card {
	flex-shrink: 0;
	width: 120px;
	background: var(--bg2);
	border: 1px solid var(--line1);
	border-radius: var(--r8);
	overflow: hidden;
}
.oga-wc-mini-thumb {
	aspect-ratio: 1/1;
	background: var(--bg3);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
}
.oga-wc-mini-body {
	padding: 6px 8px;
}
.oga-wc-mini-name {
	font-size: 10px;
	font-weight: 600;
	color: var(--fg0);
	margin-bottom: 2px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.oga-wc-mini-price {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--gold);
	font-weight: 700;
}

/* ── Section header for magazine ───────────────────────────────── */
.oga-mag-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 12px;
	border-bottom: 1px solid var(--line2);
	font-size: 11px;
}
.oga-mag-section-head-title {
	font-family: var(--mono);
	font-weight: 700;
	color: var(--fg0);
	display: flex;
	align-items: center;
	gap: 6px;
}
.oga-mag-section-head-link {
	font-family: var(--mono);
	font-size: 10px;
	color: var(--gold);
}

/* ── Responsive: mobile stacks feed above detail ───────────────── */
@media (max-width: 899px) {
	.oga-feed-col {
		max-height: none;
		position: static;
		border-right: none;
		border-bottom: 1px solid var(--line2);
	}
	.oga-detail-col {
		max-height: none;
	}
	.oga-detail-hero--reel {
		aspect-ratio: 16 / 9;
		max-height: none;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
 * LINEAR EDITION · refinement layer (v109004)
 * Additive only — locks Linear's tight display tracking, medium heading
 * weights, off-white-on-near-black body, and hairline-quiet elevation.
 * ══════════════════════════════════════════════════════════════════════════ */
body { letter-spacing: -0.011em; }
h1, .h1 { font-weight: 600; letter-spacing: -0.032em; line-height: 1.04; }
h2, .h2 { font-weight: 600; letter-spacing: -0.026em; line-height: 1.08; }
h3, .h3 { font-weight: 600; letter-spacing: -0.02em; }
h4, h5, h6 { font-weight: 600; letter-spacing: -0.014em; }
/* Buttons: Linear is calm — no caps, tight (not wide) tracking, medium weight, 8px */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.wp-block-button__link, ul.products li.product .button, button.button {
	text-transform: none; letter-spacing: -0.01em; font-weight: 600; border-radius: var(--r8);
}
/* Elevation: prefer hairline separation; soften any heavy lift to Linear's quiet shadow */