/*!
 * ShopMyNest storefront polish
 * v1.1.0 — first proper design pass. Layer over the child theme's blocks.
 *
 * Order of concerns:
 *   1. Tokens are set inline by the plugin via wp_add_inline_style()
 *   2. Global helpers (buttons, chips, focus rings)
 *   3. Header / navigation
 *   4. Home hero + category grid + featured makers
 *   5. Product archive (category + shop)
 *   6. Single product buy-box
 *   7. Cart & empty state
 *   8. Trust badges (used on product + cart)
 *   9. Accessibility + responsive
 */

/* ---------------- 2. Global helpers ---------------- */

body {
	background: var(--sn-cream);
	color: var(--sn-ink);
	font-family: 'InterVariable', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
}

a { color: var(--sn-teal); }
a:hover, a:focus { color: var(--sn-teal-dk); }

/* Buttons: force teal on any WP block button */
.wp-block-button__link,
.wp-element-button,
button.single_add_to_cart_button,
.woocommerce-button,
button[type="submit"] {
	background: var(--sn-teal) !important;
	color: #fff !important;
	border-color: var(--sn-teal) !important;
	border-radius: 999px !important;
	font-weight: 600;
	letter-spacing: 0.01em;
	transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
	box-shadow: var(--sn-shadow);
}
.wp-block-button__link:hover,
.wp-element-button:hover,
button.single_add_to_cart_button:hover,
.woocommerce-button:hover,
button[type="submit"]:hover {
	background: var(--sn-teal-dk) !important;
	transform: translateY(-1px);
	box-shadow: var(--sn-shadow-lg);
}
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent !important;
	color: var(--sn-teal) !important;
	border: 1.5px solid var(--sn-teal) !important;
	box-shadow: none;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--sn-teal) !important;
	color: #fff !important;
}

/* Focus rings that don't scream */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
	outline: 2px solid var(--sn-teal);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Chips (reused across home, shop, category) */
.mynest-chips {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}
.mynest-chips .chip {
	display: inline-block;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid var(--sn-border);
	color: var(--sn-ink);
	background: var(--sn-card);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: all .15s ease;
}
.mynest-chips .chip:hover {
	border-color: var(--sn-teal);
	color: var(--sn-teal);
	background: var(--sn-card);
	transform: translateY(-1px);
}

/* ---------------- 3. Header ---------------- */

.wp-block-site-title a,
.wp-block-site-title {
	color: var(--sn-ink) !important;
	font-weight: 700;
	letter-spacing: -0.02em;
}
.wp-block-search__input {
	border-radius: 999px !important;
	border: 1px solid var(--sn-border) !important;
	background: var(--sn-card) !important;
	padding: 10px 16px !important;
}
.wp-block-search__button {
	border-radius: 999px !important;
	background: var(--sn-teal) !important;
	color: #fff !important;
}

/* ---------------- 4. Home ---------------- */

.mynest-hero h1 {
	letter-spacing: -0.02em;
	line-height: 1.05;
	max-width: 20ch;
	margin-inline: auto;
}
.mynest-hero p {
	color: color-mix(in oklab, var(--sn-ink) 78%, transparent);
	font-size: 18px;
	max-width: 52ch;
	margin-inline: auto;
}

/* Category grid — used by home to give the category chips real visual weight */
.mynest-cat-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 16px;
	margin: 32px 0;
}
@media (max-width: 900px) { .mynest-cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .mynest-cat-grid { grid-template-columns: repeat(2, 1fr); } }
.mynest-cat-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px 12px;
	border-radius: var(--sn-radius);
	border: 1px solid var(--sn-border);
	background: var(--sn-card);
	color: var(--sn-ink);
	text-decoration: none;
	font-size: 15px;
	font-weight: 500;
	text-align: center;
	transition: all .18s ease;
	min-height: 84px;
}
.mynest-cat-tile:hover {
	border-color: var(--sn-teal);
	transform: translateY(-2px);
	box-shadow: var(--sn-shadow);
	color: var(--sn-teal);
}

/* Featured-makers band */
.mynest-makers {
	background: linear-gradient(180deg, var(--sn-cream), var(--sn-card));
	border-radius: var(--sn-radius-lg);
	padding: 40px 24px;
	margin: 40px 0;
}
.mynest-makers h2 {
	text-align: center;
	margin: 0 0 8px;
	letter-spacing: -0.02em;
}
.mynest-makers .subtitle {
	text-align: center;
	color: color-mix(in oklab, var(--sn-ink) 65%, transparent);
	margin: 0 0 24px;
}

/* Value-prop strip */
.mynest-values {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin: 40px 0;
}
@media (max-width: 700px) { .mynest-values { grid-template-columns: 1fr; } }
.mynest-value {
	background: var(--sn-card);
	border-radius: var(--sn-radius);
	padding: 24px;
	border: 1px solid var(--sn-border);
	text-align: center;
}
.mynest-value .icon {
	font-size: 28px;
	margin-bottom: 12px;
	display: block;
}
.mynest-value h3 {
	font-size: 18px;
	margin: 0 0 8px;
	letter-spacing: -0.01em;
}
.mynest-value p {
	margin: 0;
	color: color-mix(in oklab, var(--sn-ink) 65%, transparent);
	font-size: 15px;
	line-height: 1.5;
}

/* ---------------- 5. Product archive ---------------- */

.wp-block-woocommerce-product-collection,
.wc-block-product-template,
ul.products {
	--sn-card-gap: 20px;
}

/* Give product tiles a card treatment */
.wc-block-product,
li.product {
	background: var(--sn-card);
	border-radius: var(--sn-radius);
	padding: 12px !important;
	border: 1px solid var(--sn-border);
	transition: all .18s ease;
}
.wc-block-product:hover,
li.product:hover {
	border-color: var(--sn-teal);
	box-shadow: var(--sn-shadow);
	transform: translateY(-2px);
}
.wc-block-product img,
li.product img {
	border-radius: var(--sn-radius-sm);
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--sn-cream);
}
.wc-block-product .wp-block-post-title a,
li.product .woocommerce-loop-product__title {
	color: var(--sn-ink) !important;
	font-weight: 600;
	font-size: 15px !important;
	line-height: 1.3;
}
.woocommerce-Price-amount,
.price ins .woocommerce-Price-amount {
	color: var(--sn-teal);
	font-weight: 700;
}

/* Category page title — reduce brutalist size */
.wp-block-query-title,
.woocommerce-products-header__title {
	font-size: 32px !important;
	letter-spacing: -0.02em;
	margin: 24px 0 16px !important;
}
.woocommerce-result-count {
	color: color-mix(in oklab, var(--sn-ink) 60%, transparent);
	font-size: 14px;
}
.woocommerce-ordering select {
	border-radius: 999px;
	border: 1px solid var(--sn-border);
	background: var(--sn-card);
	padding: 8px 32px 8px 14px;
}

/* ---------------- 6. Single product ---------------- */

.wp-block-woocommerce-single-product,
.woocommerce div.product {
	padding: 32px 0;
}
.woocommerce div.product .product_title,
.wp-block-post-title.wc-block-post-title {
	font-size: 32px !important;
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin: 8px 0 12px !important;
}
.woocommerce div.product p.price,
.wc-block-components-product-price {
	font-size: 28px !important;
	color: var(--sn-teal) !important;
	font-weight: 700;
	margin: 0 0 20px !important;
}

/* Buy-box container */
.mynest-buy-box {
	background: var(--sn-card);
	border-radius: var(--sn-radius);
	padding: 24px;
	border: 1px solid var(--sn-border);
	margin: 20px 0;
}
.mynest-seller-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--sn-border);
	margin-bottom: 16px;
}
.mynest-seller-row .avatar-placeholder {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--sn-cream);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
}
.mynest-seller-row .seller-info { line-height: 1.3; }
.mynest-seller-row .seller-info .label {
	font-size: 12px;
	color: color-mix(in oklab, var(--sn-ink) 60%, transparent);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.mynest-seller-row .seller-info .name {
	font-weight: 600;
	color: var(--sn-ink);
}

/* De-emphasise the specifications table */
.woocommerce div.product .woocommerce-product-attributes,
table.woocommerce-product-attributes {
	font-size: 14px;
	margin-top: 32px;
	border: 1px solid var(--sn-border);
	border-radius: var(--sn-radius-sm);
	overflow: hidden;
}
table.woocommerce-product-attributes th {
	background: var(--sn-cream);
	color: color-mix(in oklab, var(--sn-ink) 70%, transparent);
	font-weight: 500;
}

/* ---------------- 7. Cart ---------------- */

.wc-block-cart {
	background: var(--sn-card);
	border-radius: var(--sn-radius);
	padding: 24px;
	border: 1px solid var(--sn-border);
}
.wc-block-cart-items__row {
	border-bottom: 1px solid var(--sn-border);
	padding: 16px 0;
}
.wc-block-cart-item__image img,
.woocommerce ul.cart_list img {
	border-radius: var(--sn-radius-sm);
}
.wc-block-components-totals-wrapper {
	border-top: 1px solid var(--sn-border);
	padding-top: 16px;
}

.mynest-cart-empty {
	text-align: center;
	padding: 40px 20px;
}
.mynest-cart-empty h2 {
	font-size: 28px !important;
	letter-spacing: -0.02em;
	margin: 0 0 12px;
}
.mynest-cart-empty p {
	color: color-mix(in oklab, var(--sn-ink) 65%, transparent);
	margin: 0 0 24px;
}

/* ---------------- 8. Trust badges ---------------- */

.mynest-trust-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin: 24px 0;
	padding: 16px;
	background: var(--sn-cream);
	border-radius: var(--sn-radius);
	border: 1px solid var(--sn-border);
}
@media (max-width: 600px) { .mynest-trust-row { grid-template-columns: 1fr; } }
.mynest-trust {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	line-height: 1.3;
	color: color-mix(in oklab, var(--sn-ink) 78%, transparent);
}
.mynest-trust .icon {
	font-size: 20px;
	flex-shrink: 0;
}
.mynest-trust .label {
	font-weight: 600;
	color: var(--sn-ink);
	display: block;
}

/* ---------------- 9. A11y + responsive ---------------- */

@media (max-width: 600px) {
	.mynest-hero h1 { font-size: 40px !important; }
	.woocommerce div.product .product_title { font-size: 26px !important; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition-duration: .01ms !important;
		transform: none !important;
	}
}