/* Resin Relms storefront -------------------------------------------------- */

:root {
	--resin-radius: 6px;
	--resin-shadow: 0 1px 2px rgba(21, 23, 28, .05), 0 8px 24px -12px rgba(21, 23, 28, .18);
	--resin-shadow-lift: 0 2px 4px rgba(21, 23, 28, .06), 0 18px 36px -16px rgba(21, 23, 28, .28);
	--resin-ease: 180ms cubic-bezier(.2, .6, .3, 1);
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; }

/* Header ------------------------------------------------------------------ */
.resin-header {
	border-bottom: 1px solid var(--wp--preset--color--line);
	position: sticky; top: 0; z-index: 30;
	background: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
	backdrop-filter: saturate(150%) blur(10px);
}
.resin-header .wp-block-navigation a { text-decoration: none; }
.resin-header .wp-block-navigation a:hover { color: var(--wp--preset--color--accent); }
.resin-header .wp-block-site-title a { text-decoration: none; }
.resin-announce {
	font-size: .8125rem; letter-spacing: .02em;
	background: var(--wp--preset--color--ink-deep); color: #fff;
}
.resin-announce p { margin: 0; padding: .55rem 0; }

/* Product cards ----------------------------------------------------------- */
.wc-block-product {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--resin-radius);
	padding: 0 0 1rem;
	overflow: hidden;
	display: flex; flex-direction: column;
	transition: box-shadow var(--resin-ease), transform var(--resin-ease), border-color var(--resin-ease);
}
.wc-block-product:hover {
	box-shadow: var(--resin-shadow-lift);
	transform: translateY(-2px);
	border-color: color-mix(in srgb, var(--wp--preset--color--contrast) 18%, var(--wp--preset--color--line));
}
.wc-block-product .wc-block-components-product-image {
	margin: 0 0 .9rem; background: #fff; border-bottom: 1px solid var(--wp--preset--color--line);
}
.wc-block-product .wc-block-components-product-image a { display: block; }
.wc-block-product .wc-block-components-product-image img { aspect-ratio: 1 / 1; object-fit: contain; width: 100%; display: block; }
.wc-block-product .wp-block-post-title,
.wc-block-product .wp-block-woocommerce-product-price,
.wc-block-product .wp-block-woocommerce-product-button,
.wc-block-product .wc-block-components-product-rating { padding-inline: .9rem; }
.wc-block-product .wp-block-post-title {
	font-family: var(--wp--preset--font-family--sans);
	font-size: .95rem; font-weight: 600; line-height: 1.35; letter-spacing: 0;
	margin: 0 0 .45rem; text-align: left;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.wc-block-product .wp-block-post-title a { text-decoration: none; }
.wc-block-product .wp-block-post-title a:hover { color: var(--wp--preset--color--accent); }
.wc-block-product .wp-block-woocommerce-product-price { text-align: left; margin: 0 0 .85rem; font-size: 1rem; }
.wc-block-product .wp-block-woocommerce-product-button { margin-top: auto; text-align: left; }
.wc-block-product .wp-block-button__link,
.wc-block-product .wc-block-components-product-button__button {
	width: 100%; justify-content: center;
	background: transparent; color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--line);
	font-size: .85rem; padding: .7em 1em;
}
.wc-block-product .wp-block-button__link:hover,
.wc-block-product .wc-block-components-product-button__button:hover {
	background: var(--wp--preset--color--contrast); color: #fff; border-color: var(--wp--preset--color--contrast);
}

/* Category tiles ---------------------------------------------------------- */
.resin-tiles {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 1.1rem;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.resin-tile a {
	display: block; text-decoration: none; color: inherit;
	border: 1px solid var(--wp--preset--color--line); border-radius: var(--resin-radius);
	background: var(--wp--preset--color--base); overflow: hidden; height: 100%;
	transition: box-shadow var(--resin-ease), transform var(--resin-ease), border-color var(--resin-ease);
}
.resin-tile a:hover { box-shadow: var(--resin-shadow-lift); transform: translateY(-2px); border-color: color-mix(in srgb, var(--wp--preset--color--contrast) 18%, var(--wp--preset--color--line)); }
.resin-tile__media { display: block; background: #fff; border-bottom: 1px solid var(--wp--preset--color--line); }
.resin-tile__media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.resin-tile__body { display: block; padding: .8rem .9rem 1rem; }
.resin-tile__name { display: block; font-weight: 700; font-size: .95rem; letter-spacing: -.01em; }
.resin-tile__count { display: block; font-size: .8125rem; color: var(--wp--preset--color--muted); margin-top: .15rem; }

/* Trust bar --------------------------------------------------------------- */
.resin-trust {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 1rem 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.resin-trust li { display: flex; flex-direction: column; gap: .15rem; }
.resin-trust strong { font-size: .9rem; font-weight: 700; letter-spacing: -.01em; }
.resin-trust span { font-size: .8125rem; color: var(--wp--preset--color--muted); }

/* Chips ------------------------------------------------------------------- */
.resin-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.resin-chip {
	display: inline-flex; align-items: baseline; gap: .4rem;
	padding: .45rem .85rem; border-radius: 999px; text-decoration: none;
	border: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--base);
	font-size: .875rem; font-weight: 600; color: var(--wp--preset--color--contrast);
	transition: background var(--resin-ease), color var(--resin-ease), border-color var(--resin-ease);
}
.resin-chip span { font-weight: 400; font-size: .8125rem; color: var(--wp--preset--color--muted); }
.resin-chip:hover { background: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--contrast); color: #fff; }
.resin-chip:hover span { color: rgba(255,255,255,.7); }

/* Shop layout ------------------------------------------------------------- */
.resin-filters .wp-block-heading { font-family: var(--wp--preset--font-family--sans); font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em; color: var(--wp--preset--color--muted); margin-bottom: .6rem; }
.resin-filters > * + * { margin-top: 2rem; }
.wp-block-woocommerce-product-results-count, .wp-block-woocommerce-catalog-sorting { font-size: .875rem; color: var(--wp--preset--color--muted); }
.wc-block-product-template { gap: 1.1rem !important; }

/* Single product ---------------------------------------------------------- */
.wc-block-components-product-image, .woocommerce-product-gallery { background: #fff; }
.single-product .wp-block-post-title { letter-spacing: -.02em; }
.wc-block-components-product-details__value, .woocommerce-product-attributes { font-size: .9rem; }

/* Footer ------------------------------------------------------------------ */
.resin-footer { background: var(--wp--preset--color--ink-deep); color: #cfd2d8; }
.resin-footer :where(h2, h3, h4) { color: #fff; font-family: var(--wp--preset--font-family--sans); font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.resin-footer a { color: #cfd2d8; text-decoration: none; }
.resin-footer a:hover { color: #fff; text-decoration: underline; }
.resin-footer .wp-block-site-title a { color: #fff; }
.resin-footer .wp-block-list { list-style: none; margin: 0; padding: 0; }
.resin-footer .wp-block-list li { margin: 0; }
.resin-footer .resin-fineprint { font-size: .8125rem; color: #8b9099; }

/* Breadcrumbs ------------------------------------------------------------- */
.wp-block-woocommerce-breadcrumbs { font-size: .8125rem; color: var(--wp--preset--color--muted); }
.wp-block-woocommerce-breadcrumbs a { text-decoration: none; }
.wp-block-woocommerce-breadcrumbs a:hover { text-decoration: underline; }

/* Collapsible filters (mobile) -------------------------------------------- */
.resin-filters__collapse > summary {
	cursor: pointer; list-style: none;
	display: flex; align-items: center; justify-content: space-between;
	padding: .8rem 1rem; border: 1px solid var(--wp--preset--color--line); border-radius: var(--resin-radius);
	font-weight: 700; font-size: .9rem; background: var(--wp--preset--color--base);
}
.resin-filters__collapse > summary::-webkit-details-marker { display: none; }
.resin-filters__collapse > summary::after { content: "+"; font-weight: 400; font-size: 1.2rem; line-height: 1; }
.resin-filters__collapse[open] > summary::after { content: "\2212"; }
.resin-filters__collapse[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.resin-filters__body {
	border: 1px solid var(--wp--preset--color--line); border-top: 0;
	border-radius: 0 0 var(--resin-radius) var(--resin-radius); padding: 1.2rem 1rem;
}
.resin-filters__body > * + * { margin-top: 1.8rem; }

@media (max-width: 781px) {
	.resin-tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
	/* keep title, menu, search and cart on one row without pushing the cart off-screen */
	.resin-header > .wp-block-group { gap: .4rem; flex-wrap: nowrap; }
	.resin-header .wp-block-site-title {
		white-space: nowrap; font-size: 1.05rem; min-width: 0; overflow: hidden; text-overflow: ellipsis;
	}
	.resin-header .wp-block-group { gap: .35rem; }
	.resin-header .wp-block-search__button { padding: .45rem .6rem; }
	.resin-header .wp-block-woocommerce-mini-cart,
	.resin-header .wc-block-mini-cart { flex: 0 0 auto; }
	.resin-filters { margin-bottom: 1.5rem; }
	.resin-trust { grid-template-columns: 1fr 1fr; gap: .9rem 1rem; }
}
@media (max-width: 520px) {
	/* account lives in the menu and footer; the cart must stay reachable */
	.resin-header .wp-block-woocommerce-customer-account { display: none; }
}
@media (max-width: 420px) {
	.resin-trust { grid-template-columns: 1fr; }
}