/* =========================================================================
   Urban Rivaj - shared components (loaded last, on every page)
   ONE look for tables and buttons: theme pages, WooCommerce, YITH wishlist, WPForms, block editor.
   To use on anything new: <table class="ur-table"> / <a class="ur-btn ur-btn--gold"> (see README "Design system").
   Change a token here (or in base.css :root) and the whole site follows.
   ========================================================================= */
:root {
	--ur-table-head-bg: var(--ur-black);
	--ur-table-head-fg: var(--ur-gold);
	--ur-table-zebra: #faf8f3;
	--ur-table-line: var(--ur-line);
	--ur-table-radius: var(--ur-radius);
}

/* ---------- Tables ---------- */
.ur-table, .prose table, .entry-content table, .wp-block-table table, table.shop_table, table.wishlist_table,
table.woocommerce-orders-table, table.woocommerce-table, .ur-sg__table table, .wpforms-container table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: #fff;
	border: 1px solid var(--ur-table-line);
	border-radius: var(--ur-table-radius);
	overflow: hidden;
	font-size: .9375rem;
	color: var(--ur-text);
}
.ur-table th, .ur-table td, .prose table th, .prose table td, .entry-content table th, .entry-content table td,
.wp-block-table th, .wp-block-table td, table.shop_table th, table.shop_table td, table.wishlist_table th, table.wishlist_table td,
table.woocommerce-orders-table th, table.woocommerce-orders-table td, table.woocommerce-table th, table.woocommerce-table td,
.ur-sg__table th, .ur-sg__table td {
	padding: .8rem 1rem;
	border: 0;
	border-bottom: 1px solid var(--ur-table-line);
	text-align: left;
	vertical-align: middle;
}
.ur-table thead th, .prose table thead th, .entry-content table thead th, .wp-block-table thead th, table.shop_table thead th,
table.wishlist_table thead th, table.woocommerce-orders-table thead th, .ur-sg__table thead th, .ur-sg__table th {
	background: var(--ur-table-head-bg);
	color: var(--ur-table-head-fg);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
	border-bottom: 0;
}
/* Tables without a <thead>: first-row th still gets the header look; row headers (th in tbody) stay plain. */
.prose table tbody th, .entry-content table tbody th, table.shop_table tbody th, table.shop_table tfoot th {
	background: transparent; color: var(--ur-ink); text-transform: none; letter-spacing: 0; font-size: inherit; white-space: normal;
}
.ur-table tbody tr:nth-child(even) td, .prose table tbody tr:nth-child(even) td, .entry-content table tbody tr:nth-child(even) td,
.wp-block-table tbody tr:nth-child(even) td, table.woocommerce-orders-table tbody tr:nth-child(even) td { background: var(--ur-table-zebra); }
.ur-table tbody tr:hover td, table.wishlist_table tbody tr:hover td, table.woocommerce-orders-table tbody tr:hover td { background: #f5f0e1; }
.ur-table tr:last-child > td, .ur-table tr:last-child > th, .prose table tr:last-child > td, .entry-content table tr:last-child > td,
table.shop_table tr:last-child > td, table.shop_table tr:last-child > th, table.wishlist_table tr:last-child > td { border-bottom: 0; }
table.shop_table tfoot th, table.shop_table tfoot td { background: var(--ur-table-zebra); font-weight: 700; color: var(--ur-ink); }
table.shop_table .order-total td, table.shop_table .order-total th, .cart_totals .order-total td, .cart_totals .order-total th { background: #f5f0e1; color: var(--ur-ink); font-size: 1.05rem; }
.ur-table a, .prose table a, table.shop_table td a:not(.button):not(.remove) { color: var(--ur-gold-ink); }
.ur-table caption, .prose table caption { caption-side: bottom; padding: .6rem 0; font-size: .8125rem; color: var(--ur-muted); text-align: left; }

/* ---------- Buttons: every flavour of "button" on the site maps to the same four looks ---------- */
/* Primary (gold): add to cart, place order, submit, apply coupon in forms */
.ur-btn--gold, .single_add_to_cart_button, .checkout-button, #place_order, button[type="submit"], input[type="submit"],
.wp-block-button__link, .wp-element-button, .wpforms-submit, .wpforms-container .wpforms-submit-container button, .woocommerce-Button,
.woocommerce button.button.alt, .woocommerce a.button.alt, .yith-wcwl-add-to-wishlist .button {
	background: var(--ur-gold); border-color: var(--ur-gold); color: var(--ur-black);
}
.ur-btn--gold:hover, .single_add_to_cart_button:hover, .checkout-button:hover, #place_order:hover, button[type="submit"]:hover, input[type="submit"]:hover,
.wp-block-button__link:hover, .wpforms-submit:hover, .woocommerce-Button:hover { background: var(--ur-black); border-color: var(--ur-black); color: var(--ur-gold); }
/* Secondary (outline): WooCommerce's plain .button (update cart, view cart, continue shopping, wishlist add-to-cart) */
.woocommerce a.button:not(.alt):not(.ur-btn--gold), .woocommerce button.button:not(.alt):not(.ur-btn--gold), table.wishlist_table .button,
.woocommerce-message .button, .woocommerce-info .button, .woocommerce-orders-table .button, .woocommerce-MyAccount-content .button:not(.alt) {
	background: transparent; border: 1px solid var(--ur-ink); color: var(--ur-ink);
}
.woocommerce a.button:not(.alt):not(.ur-btn--gold):hover, .woocommerce button.button:not(.alt):not(.ur-btn--gold):hover, table.wishlist_table .button:hover,
.woocommerce-message .button:hover, .woocommerce-info .button:hover, .woocommerce-orders-table .button:hover { background: var(--ur-black); border-color: var(--ur-black); color: var(--ur-gold); }
/* Buttons inside table cells stay compact and never wrap */
table .button, table .ur-btn { min-height: 40px; padding: .4rem 1rem; white-space: nowrap; font-size: .75rem; }
/* Focus ring for all buttons/links in tables */
.ur-table a:focus-visible, table .button:focus-visible { outline: 2px solid var(--ur-gold); outline-offset: 2px; }

/* ---------- Phones: any table wider than the screen scrolls inside itself, never widens the page ---------- */
@media (max-width: 767px) {
	.prose table:not(.shop_table), .entry-content table:not(.shop_table), .ur-table:not(.shop_table), .wp-block-table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.ur-table th, .ur-table td, .prose table th, .prose table td { padding: .65rem .8rem; }
}