/*
Theme Name:       OGA Mini App v109002 · Networks Edition
Theme URI:        https://onlineguideassociation.org/
Author:           Online Guide Association
Author URI:       https://onlineguideassociation.org/
Description:      OGA Mini App v109002 — Online Guide Association with OGACE Network. Fully responsive, WooCommerce-integrated, WordPress 7.0 + WooCommerce 10.0-compatible theme. Compact Expert Video-Magazine feed with Reels, Photos, and Detail Content. Unified design system: Syne + DM Sans + DM Mono fonts, 8-color G-layer network palette, cyberpunk dark aesthetic. PHP 8.0+ required.
Version:          109003.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=Syne:wght@400;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=DM+Mono:wght@400;500&display=swap');

:root {
	/* ── Surfaces ── */
	--bg0:      #0a0a0c;
	--bg1:      #111114;
	--bg2:      #18181d;
	--bg3:      #1f1f26;
	--bg4:      #26262f;
	--line1:    rgba(255,255,255,0.06);
	--line2:    rgba(255,255,255,0.10);
	--line3:    rgba(255,255,255,0.16);
	--fg0:      #f5f4f0;
	--fg1:      #c8c6be;
	--fg2:      #8a887f;
	--fg3:      #585650;

	/* ── Gold accent ── */
	--gold:         #c9a227;
	--gold-dim:     rgba(201,162,39,0.14);
	--gold-glow:    rgba(201,162,39,0.22);
	--gold-hover:   rgba(201,162,39,0.40);

	/* ── G-layer network palette ── */
	--g0: #5ec3c0; --g0-bg: rgba(94,195,192,0.11);  --g0-bd: rgba(94,195,192,0.24);
	--g1: #c9a227; --g1-bg: rgba(201,162,39,0.11);  --g1-bd: rgba(201,162,39,0.24);
	--g2: #a855f7; --g2-bg: rgba(168,85,247,0.11);  --g2-bd: rgba(168,85,247,0.24);
	--g3: #7f54b3; --g3-bg: rgba(127,84,179,0.11);  --g3-bd: rgba(127,84,179,0.24);
	--g4: #76b900; --g4-bg: rgba(118,185,0,0.11);   --g4-bd: rgba(118,185,0,0.24);
	--g5: #4285f4; --g5-bg: rgba(66,133,244,0.11);  --g5-bd: rgba(66,133,244,0.24);
	--g6: #d4537e; --g6-bg: rgba(212,83,126,0.11);  --g6-bd: rgba(212,83,126,0.24);
	--g7: #ff8a65; --g7-bg: rgba(255,138,101,0.11); --g7-bd: rgba(255,138,101,0.24);

	/* ── Typography ── */
	--sans:    'DM Sans', system-ui, -apple-system, sans-serif;
	--mono:    'DM Mono', ui-monospace, 'JetBrains Mono', 'Courier New', monospace;
	--display: 'Syne', system-ui, -apple-system, sans-serif;

	/* ── Radius ── */
	--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: uppercase;
	letter-spacing: .08em;
	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: uppercase;
	letter-spacing: .06em;
	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: uppercase;
	letter-spacing: .08em;
	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: uppercase;
	letter-spacing: .06em;
	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: uppercase;
	letter-spacing: .08em;
	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: uppercase;
	letter-spacing: .08em;
	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: uppercase;
	letter-spacing: .07em;
	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: uppercase;
	letter-spacing: .06em;
	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: uppercase;
	letter-spacing: .06em;
	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: uppercase;
	letter-spacing: .07em;
	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: uppercase;
	letter-spacing: .07em;
}

/* ── 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: uppercase;
	letter-spacing: .08em;
	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: uppercase;
	letter-spacing: .06em;
	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: uppercase;
	letter-spacing: .06em;
	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: .02em;
}
.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: .05em;
}
.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: .04em;
	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;
	}
}