/**
 * Storefront Product Grid — boudoir cards, 1:1 with the design spec.
 * Crimson/ivory/gold via --ly-* tokens where they map cleanly; the design's
 * specific ink/rose/gold literals are kept exact.
 *
 * Kit immunity: `.so-card__wish` and `.so-btn--ghost` are <button>/<a> whose
 * backgrounds are written double-class (0,2,0) to beat the Elementor Kit's
 * `.elementor-kit-N button { background:#E0102F }` (0,1,1). `.so-btn--primary`
 * is double-classed too so its exact crimson + hover/active are deterministic.
 */

.spg { width: 100%; }

/* ------------------------------------------------------------- section head */
.spg__head { text-align: center; margin-bottom: 40px; }
.spg__eyebrow {
	margin: 0 0 12px;
	font-family: 'Manrope', system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #E0102F;
}
.spg__title {
	margin: 0;
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 700;
	font-size: clamp(30px, 4.4vw, 52px);
	line-height: 1.1;
	color: #F5EDE7;
}

/* ---------------------------------------------------------------------- grid */
.spg__grid {
	display: grid;
	grid-template-columns: repeat(var(--spg-cols, 4), minmax(0, 1fr));
	gap: 24px;
}
@media (max-width: 1100px) { .spg__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .spg__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .spg__grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- card shell */
.so-card {
	width: 100%; /* fill the grid cell so the row spans the full container */
	height: 100%; /* equal-height cards: fill the stretched grid cell */
	display: flex;
	flex-direction: column;
	position: relative; /* anchor for the whole-card stretched link */
	font-family: 'Manrope', system-ui, sans-serif;
	background: #1A0F15;
	border: 1px solid rgba(245, 237, 231, 0.12);
	border-radius: 20px;
	overflow: hidden;
	transition: all 240ms cubic-bezier(.22, 1, .36, 1);
}
/* Whole card is a link to the product: the name link stretches over the card;
   the wishlist heart + Add button sit above it via z-index so they still work. */
.so-card .so-card__name a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}
.so-card__addform,
.so-card .so-btn { position: relative; z-index: 2; }
.so-card:hover {
	border-color: rgba(245, 237, 231, 0.24);
	transform: translateY(-2px);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 10px 30px rgba(0, 0, 0, .45);
}

/* media — square box to match the store's 1:1 (500×500) product images:
   a square image fills a square box exactly, so cover neither crops nor bars. */
.so-card__media { position: relative; aspect-ratio: 1 / 1; background: #22131B; overflow: hidden; flex-shrink: 0; }
.so-card__medialink {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	cursor: pointer;
}
/* Two-class selector (0,2,0) beats Elementor's `.elementor img { height:auto }`
   (0,1,1), which otherwise lets the image overflow the 200px media box. */
.so-card__media .so-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	max-width: none;
	border-radius: 0;
}
.so-card__ph {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Playfair Display', Georgia, serif;
	font-style: italic;
	font-size: 44px;
	color: #311C26;
	user-select: none;
}

/* sale badge */
.so-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	font-family: 'Manrope', system-ui, sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 5px 11px;
	border-radius: 999px;
}
.so-badge--sale { background: #E0102F; color: #FFF6F0; }

/* wishlist button (fades in on hover; stays when active) */
.so-card__wish.so-card__wish {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 3;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border-radius: 999px;
	border: 1px solid transparent;
	background: #22131B;
	color: #DCC6CC;
	cursor: pointer;
	opacity: 0;
	transition: opacity 150ms cubic-bezier(.22, 1, .36, 1), background 150ms cubic-bezier(.22, 1, .36, 1), color 150ms cubic-bezier(.22, 1, .36, 1);
}
.so-card:hover .so-card__wish.so-card__wish,
.so-card__wish.so-card__wish.is-active,
.so-card__wish.so-card__wish:focus-visible { opacity: 1; }
.so-card__wish.so-card__wish:hover { background: rgba(245, 237, 231, .07); color: #F5EDE7; }
.so-card__wish.so-card__wish.is-active { background: rgba(224, 16, 47, .12); color: #E0102F; }
.so-card__wish.so-card__wish:focus-visible { outline: none; box-shadow: 0 0 0 2px #0B0508, 0 0 0 4px #F03A50; }
.so-card__wish .so-heart { fill: none; }
.so-card__wish.is-active .so-heart { fill: currentColor; }

/* -------------------------------------------------------------------- body */
.so-card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
.so-card__cat {
	margin: 0;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #A98D96;
}
.so-card__name { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.35; }
.so-card .so-card__name a { color: #F5EDE7; text-decoration: none; }

/* rating */
.so-rating { display: inline-flex; align-items: center; gap: 2px; }
.so-star { fill: none; stroke: #77606A; }
.so-star.is-on { fill: #D9B584; stroke: #D9B584; }
.so-rating__count {
	font-family: 'Manrope', system-ui, sans-serif;
	font-size: 12px;
	color: #A98D96;
	margin-left: 6px;
}

/* foot: price stacked above a full-width, centred Add button pinned to the
   bottom of the card (so it lands in the same place on every card). */
.so-card__foot {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
	margin-top: auto;
	padding-top: 12px;
}
.so-card__addform { width: 100%; }
.so-card__foot .so-btn { width: 100%; justify-content: center; }

.so-price { display: inline-flex; align-items: baseline; gap: 8px; font-family: 'Playfair Display', Georgia, serif; }
.so-price__was { font-size: 12px; color: #A98D96; text-decoration: line-through; text-decoration-color: #77606A; }
.so-price__now { font-size: 15px; font-weight: 700; color: #F5EDE7; }
.so-price__now.is-sale { color: #E0102F; }
/* inner wc_price / price-html markup inherits the was/now styling */
.so-price__was .woocommerce-Price-amount,
.so-price__was bdi,
.so-price__now .woocommerce-Price-amount,
.so-price__now bdi,
.so-price__now ins { color: inherit; font: inherit; text-decoration: none; }
.so-price__now del { color: #A98D96; font-size: 0.8em; margin-right: 6px; }

/* add button */
.so-btn {
	font-family: 'Manrope', system-ui, sans-serif;
	font-weight: 600;
	border-radius: 999px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	text-decoration: none;
	transition: all 150ms cubic-bezier(.22, 1, .36, 1);
}
.so-btn--sm { font-size: 13px; padding: 8px 18px; }
.so-btn--primary.so-btn--primary { background: #E0102F; color: #FFF6F0; border: none; }
.so-btn--primary.so-btn--primary:hover {
	background: #F03A50;
	transform: translateY(-1px);
	box-shadow: 0 0 0 1px rgba(224, 16, 47, .4), 0 8px 28px rgba(224, 16, 47, .35);
}
.so-btn--primary.so-btn--primary:active { background: #C00E27; transform: none; box-shadow: none; }
.so-btn--ghost.so-btn--ghost { background: rgba(245, 237, 231, .06); color: #F5EDE7; border: none; }
.so-btn--ghost.so-btn--ghost:hover { background: rgba(245, 237, 231, .10); }
.so-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }
.so-card__addform { margin: 0; }
.so-card__addform[data-ly-cart-busy="1"] .so-btn { opacity: .65; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
	.so-card,
	.so-card__wish.so-card__wish,
	.so-btn { transition: none; }
}

/* =============================================================================
   WooCommerce archive (shop / category) — lay the .so-card cells (rendered by
   the theme's content-product.php override) out as the spec grid, and retint
   the Woo result-count + ordering chrome to the dark palette.
   ============================================================================= */
.woocommerce ul.products,
ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 16px;
	align-items: stretch; /* equal-height cards per row */
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Neutralise WooCommerce's default loop-item margins on our card's inner
   elements — the homepage grid isn't inside `ul.products li.product` so it
   stays tight; the archive was inheriting h3/p/.price margins, which is the
   "too much spacing between the text/reviews". Let .so-card__body's gap own it. */
.woocommerce ul.products li.product .so-card__body > *,
.woocommerce ul.products li.product .so-card h3,
.woocommerce ul.products li.product .so-card p,
.woocommerce ul.products li.product .so-card .so-rating,
.woocommerce ul.products li.product .so-card .so-price { margin: 0; }
.woocommerce ul.products li.product,
ul.products li.product,
li.product.so-card-cell {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	padding: 0 !important;
	clear: none !important;
	list-style: none;
}
ul.products li.product::before,
ul.products::before,
ul.products::after { content: none !important; display: none !important; }

/* (auto-fill minmax above handles the column count responsively — no fixed breakpoints) */

/* result count */
.woocommerce-result-count {
	font-family: 'Manrope', system-ui, sans-serif;
	font-size: 13px;
	color: #A98D96;
}

/* ordering select → the spec .so-select look */
.woocommerce-ordering select,
select.orderby {
	height: 44px;
	padding: 0 38px 0 14px;
	font-family: 'Manrope', system-ui, sans-serif;
	font-size: 13px;
	color: #F5EDE7;
	background-color: #160C11;
	border: 1px solid rgba(245, 237, 231, .12);
	border-radius: 14px;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A98D96' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
}
.woocommerce-ordering select:hover { border-color: rgba(245, 237, 231, .24); }
.woocommerce-ordering select option { background: #160C11; color: #F5EDE7; }

/* pagination / load more pills */
.woocommerce nav.woocommerce-pagination ul,
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination a,
.woocommerce nav.woocommerce-pagination span.current {
	font-family: 'Manrope', system-ui, sans-serif;
	color: #DCC6CC;
	border: 1px solid rgba(245, 237, 231, .12);
	border-radius: 999px;
	background: transparent;
}
.woocommerce nav.woocommerce-pagination span.current { border-color: rgba(224, 16, 47, .5); color: #F5EDE7; }

/* =============================================================================
   Branded sort dropdown (theme's .ly-sort) — dark retint + kit-button immunity.
   .ly-sort__btn and .ly-sort__option are <button>s, so double-class (0,2,0)
   beats BOTH the theme's light defaults and the kit's crimson bleed (0,1,1).
   (Sorting itself already works — this is purely the "red blocks" look.)
   ============================================================================= */
.ly-sort__btn.ly-sort__btn {
	background: transparent;
	border: 1px solid rgba(245, 237, 231, .24);
	color: #DCC6CC;
	box-shadow: none;
	padding: 12px 20px;
	font-family: 'Manrope', system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
}
.ly-sort__btn.ly-sort__btn:hover { border-color: rgba(224, 16, 47, .5); color: #F5EDE7; transform: none; }
.ly-sort__menu {
	background: #160C11;
	border: 1px solid rgba(245, 237, 231, .12);
	border-radius: 14px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
}
.ly-sort__option.ly-sort__option {
	background: transparent;
	color: #DCC6CC;
	font-family: 'Manrope', system-ui, sans-serif;
	border-radius: 10px;
}
.ly-sort__option.ly-sort__option:hover { background: rgba(245, 237, 231, .07); color: #F5EDE7; }
.ly-sort__option.ly-sort__option[aria-selected="true"] {
	background: rgba(224, 16, 47, .12);
	color: #E0102F;
	font-weight: 700;
}

/* =============================================================================
   Filter chip bar (archive) — spec .so-filters. Chips + on-sale are <a>, so the
   `.so-filters .so-*` descendant (0,2,0) beats the Elementor kit `a` bleed (0,1,1).
   ============================================================================= */
.so-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 16px 0; border-top: 1px solid rgba(245,237,231,.12); border-bottom: 1px solid rgba(245,237,231,.12); }
.so-filters .so-chip {
	font-family: 'Manrope', system-ui, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .08em;
	padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(245,237,231,.12); background: transparent;
	color: #DCC6CC; text-decoration: none; cursor: pointer; white-space: nowrap;
	transition: all 150ms cubic-bezier(.22,1,.36,1);
}
.so-filters .so-chip:hover { border-color: rgba(245,237,231,.24); color: #F5EDE7; }
.so-filters .so-chip.is-active { border-color: rgba(224,16,47,.5); background: rgba(224,16,47,.12); color: #F5EDE7; }
.so-filters__div { width: 1px; height: 22px; background: rgba(245,237,231,.12); flex: 0 0 auto; }

.so-filters .so-onsale { display: inline-flex; align-items: center; gap: 8px; font-family: 'Manrope', system-ui, sans-serif; font-size: 13px; color: #DCC6CC; text-decoration: none; cursor: pointer; white-space: nowrap; }
.so-filters .so-onsale:hover { color: #F5EDE7; }
.so-onsale__box { width: 18px; height: 18px; border-radius: 5px; border: 1px solid rgba(245,237,231,.24); background: transparent; flex: 0 0 auto; transition: all 150ms cubic-bezier(.22,1,.36,1); }
.so-filters .so-onsale.is-active { color: #F5EDE7; }
.so-filters .so-onsale.is-active .so-onsale__box {
	border-color: #E0102F;
	background: #E0102F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23FFF6F0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.so-filters__sort { margin-left: auto; min-width: 210px; }
.so-select {
	width: 100%; height: 44px; padding: 0 38px 0 14px;
	font-family: 'Manrope', system-ui, sans-serif; font-size: 13px; color: #F5EDE7;
	background-color: #160C11; border: 1px solid rgba(245,237,231,.12); border-radius: 14px; cursor: pointer;
	-webkit-appearance: none; appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A98D96' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 14px center;
	transition: border-color 150ms cubic-bezier(.22,1,.36,1);
}
.so-select:hover { border-color: rgba(245,237,231,.24); }
.so-select:focus-visible { outline: none; border-color: rgba(224,16,47,.5); box-shadow: 0 0 0 2px #0B0508, 0 0 0 4px #F03A50; }
.so-select option { background: #160C11; color: #F5EDE7; }

/* The archive's native WooCommerce result-count + ordering row is redundant now
   the Filter Chips bar carries the sort — hide it. The bar's own .so-filters__sort
   is a separate <form>, so it is unaffected. */
.woocommerce-result-count,
.woocommerce-ordering { display: none !important; }

/* =========================================== "Just Landed" (New this month) */
/* NEW pill — ivory over ink (reuses the .so-badge base position). */
.so-badge--new { background: #F5EDE7; color: #1A0F15; }

/* Split header: eyebrow + rule + "See all →" on one row, title below, left-aligned. */
.spg--new .spg__head { text-align: left; margin-bottom: 44px; }
.spg__head--split .spg__headrow { display: flex; align-items: center; gap: 22px; margin-bottom: 18px; }
.spg__head--split .spg__eyebrow { margin: 0; white-space: nowrap; }
.spg__rule { flex: 1 1 auto; height: 1px; background: rgba(245, 237, 231, .14); }
.spg--new .spg__seeall { flex: 0 0 auto; white-space: nowrap; font-family: 'Manrope', system-ui, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #E0102F; text-decoration: none; transition: opacity .2s ease; }
.spg--new .spg__seeall:hover { opacity: .7; color: #E0102F; }
.spg--new .spg__title { text-align: left; }
@media (max-width: 560px) {
	.spg__head--split .spg__headrow { gap: 14px; }
	.spg--new .spg__seeall { font-size: 11px; letter-spacing: .12em; }
}

/* =============================================================================
   Card spacing + mobile archive fixes
   ============================================================================= */
/* The archive neutraliser earlier only covers `.woocommerce ul.products
   li.product`, so the homepage grid (and any other context) kept the browser's
   default h3/p margins — that's the "too much spacing between the elements".
   Reset the text-element margins for EVERY .so-card so the .so-card__body `gap`
   owns the vertical rhythm. `.so-card__foot` is deliberately excluded so it
   keeps its `margin-top:auto` (Add button pinned to the card bottom). */
.so-card .so-card__cat,
.so-card .so-card__name,
.so-card .so-rating,
.so-card .so-price,
.so-card__body > h3,
.so-card__body > p { margin: 0; }

@media (max-width: 767px) {
	/* The category-nav sidebar and the products sit in two Elementor columns that
	   don't stack on phones, so the product column was squeezed and the filter
	   chips ran off the right edge. The hamburger menu already covers navigation
	   on mobile — drop the sidebar column and give the products/filters column the
	   full width. (:has() is supported by all current mobile browsers; where it
	   isn't, the layout simply stays as-is.) */
	body.woocommerce .e-con-inner > .e-con-full:has(.ly-catnav) { display: none !important; }
	body.woocommerce .e-con-inner > .e-con-full:has(ul.products) {
		flex: 1 1 100% !important;
		max-width: 100% !important;
		width: 100% !important;
	}

	/* Filter bar: kill the dangling divider, let the chips wrap, and drop the
	   sort select onto its own full-width line instead of being pushed
	   off-screen by margin-left:auto + min-width. */
	.so-filters { gap: 8px; }
	.so-filters__div { display: none; }
	.so-filters .so-chip { font-size: 11px; padding: 8px 13px; letter-spacing: .04em; }
	.so-filters__sort { margin-left: 0; width: 100%; min-width: 0; }
}

/* Mobile: product grids (Best Sellers, Just Landed, etc.) become a horizontal
   swipe slider instead of a tall vertical stack. !important beats the widget's
   own column rules; cards snap, the next card peeks (~18%). */
@media (max-width: 767px) {
	.spg__grid {
		display: grid !important;
		grid-auto-flow: column !important;
		grid-auto-columns: 82% !important;
		grid-template-columns: none !important;
		gap: 14px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 12px;
	}
	.spg__grid::-webkit-scrollbar { display: none; }
	.spg__grid > .so-card { scroll-snap-align: start; }
}