/* =========================================================
   WHAPPENSTAR — COMPONENTS
   ========================================================= */

/* ---- Buttons ---- */
.ws-btn {
	display: inline-block;
	border: var(--ws-border-width) solid var(--ws-ink);
	background: var(--ws-paper);
	color: var(--ws-ink);
	font-family: var(--ws-font-display);
	text-transform: uppercase;
	padding: 12px 28px;
	text-decoration: none;
	font-size: var(--ws-text-sm);
	transition: background-color 0.15s ease, color 0.15s ease;
}
.ws-btn:hover,
.ws-btn:focus-visible {
	background: var(--ws-ink);
	color: var(--ws-paper);
}
.ws-btn--red {
	background: var(--ws-red);
	border-color: var(--ws-ink);
	color: #fff;
}
.ws-btn--red:hover {
	background: var(--ws-red-dark);
}
.ws-btn--neon {
	font-family: var(--ws-font-display);
	font-size: var(--ws-text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ws-neon-ink);
	background: var(--ws-neon);
	border: none;
	padding: 10px 22px;
	box-shadow: var(--ws-neon-glow);
}
.ws-btn--neon:hover,
.ws-btn--neon:focus-visible {
	filter: brightness(1.08);
}

/* =========================================================
   NEON DROP-INSERT — the signature element.
   Sticker-on-photocopy treatment: dark surface, neon border/glow,
   torn-paper notch, slight rotation. Carries forward the approved
   mockup exactly.
   ========================================================= */
.ws-neon-insert-wrap {
	display: flex;
	justify-content: center;
	padding: var(--ws-space-5) var(--ws-space-3);
}
.ws-neon-insert {
	position: relative;
	max-width: 560px;
	width: 100%;
	background: var(--ws-neon-ink);
	border: 2px solid var(--ws-neon);
	border-radius: 4px;
	box-shadow: var(--ws-neon-glow), 6px 6px 0 var(--ws-ink);
	padding: 26px 28px;
	color: var(--ws-paper);
	transform: rotate(-0.6deg);
}
.ws-neon-insert::before {
	/* Torn-sticker corner notch — sells the "stuck on top" read. */
	content: "";
	position: absolute;
	top: -10px;
	right: 22px;
	width: 34px;
	height: 18px;
	background: var(--ws-paper);
	border-left: 2px solid var(--ws-ink);
	border-right: 2px solid var(--ws-ink);
	transform: rotate(4deg);
}
.ws-neon-kicker {
	font-family: var(--ws-font-display);
	font-size: var(--ws-text-xs);
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--ws-neon);
	text-shadow: var(--ws-neon-glow);
	margin-bottom: 8px;
}
.ws-neon-headline {
	font-family: var(--ws-font-display);
	font-size: var(--ws-text-lg);
	text-transform: uppercase;
	margin: 0 0 10px;
	line-height: 1.1;
	color: #fff;
}
.ws-neon-description {
	font-size: var(--ws-text-sm);
	line-height: 1.7;
	color: var(--ws-neon-ink-text);
	margin: 0 0 18px;
	max-width: 420px;
}
.ws-neon-cta {
	display: inline-block;
	font-family: var(--ws-font-display);
	font-size: var(--ws-text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ws-neon-ink);
	background: var(--ws-neon);
	padding: 10px 22px;
	text-decoration: none;
	box-shadow: var(--ws-neon-glow);
}
.ws-neon-meta {
	display: flex;
	gap: 18px;
	margin-top: 16px;
	font-size: var(--ws-text-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ws-neon-ink-text); /* was #7c7a6e at 4.27:1, fails WCAG AA for 11px text — now 10.88:1 */
}
.ws-neon-dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ws-neon);
	box-shadow: var(--ws-neon-glow);
	margin-right: 6px;
	vertical-align: middle;
}
.ws-neon-insert--sold-out {
	border-color: var(--ws-ink-soft);
}
.ws-neon-insert--sold-out .ws-neon-kicker,
.ws-neon-insert--sold-out .ws-neon-dot {
	color: var(--ws-ink-soft);
	text-shadow: none;
	box-shadow: none;
}
.ws-neon-sold-out-note {
	font-size: var(--ws-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ws-ink-soft);
	margin-bottom: 14px;
}

/* =========================================================
   DROP STATUS BADGE
   ========================================================= */
.ws-drop-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--ws-font-display);
	font-size: var(--ws-text-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 5px 10px;
	margin-bottom: var(--ws-space-1);
	border: 1px solid var(--ws-ink);
}
.ws-drop-badge-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ws-ink);
}
.ws-drop-badge--live .ws-drop-badge-dot { background: var(--ws-neon); box-shadow: var(--ws-neon-glow); }
.ws-drop-badge--coming_soon { border-color: var(--ws-ink-soft); color: var(--ws-ink-soft); }
.ws-drop-badge--sold_out { border-color: var(--ws-ink-soft); color: var(--ws-ink-soft); }
.ws-drop-badge--archived { border-style: dashed; color: var(--ws-ink-soft); }
.ws-drop-badge-stock {
	color: var(--ws-red);
	font-weight: 700;
}
.ws-drop-badge--compact {
	font-size: 10px;
	padding: 3px 7px;
}

/* =========================================================
   RESTOCK + NEWSLETTER FORMS
   ========================================================= */
.ws-restock-form,
.ws-newsletter-form {
	margin-top: var(--ws-space-2);
}
.ws-restock-prompt {
	font-size: var(--ws-text-sm);
	color: var(--ws-ink-soft);
	margin-bottom: var(--ws-space-1);
}
.ws-restock-form-inner,
.ws-newsletter-form {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.ws-restock-form-inner input[type="email"],
.ws-newsletter-form input[type="email"] {
	flex: 1 1 200px;
	min-width: 0;
	padding: 11px 14px;
	border: 2px solid var(--ws-ink);
	background: var(--ws-paper);
	font-family: var(--ws-font-body);
	font-size: var(--ws-text-sm);
}
.ws-restock-success,
.ws-restock-error,
.ws-newsletter-success,
.ws-newsletter-error {
	width: 100%;
	font-size: var(--ws-text-xs);
	margin-top: 6px;
}
.ws-restock-success,
.ws-newsletter-success { color: #2f7a3d; }
.ws-restock-error,
.ws-newsletter-error { color: var(--ws-red); }

/* Neon-context forms (inside the dark drop-insert / popup) need
   light-on-dark input styling instead of the default paper input. */
.ws-neon-insert .ws-restock-form-inner input[type="email"],
.ws-newsletter-panel .ws-newsletter-form input[type="email"] {
	background: #1f1e18;
	border-color: var(--ws-neon);
	color: var(--ws-paper);
}
.ws-neon-insert .ws-restock-form-inner input[type="email"]::placeholder,
.ws-newsletter-panel .ws-newsletter-form input[type="email"]::placeholder {
	color: #8a886f;
}

/* =========================================================
   MODALS (size guide + newsletter popup share the shell)
   ========================================================= */
.ws-modal {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--ws-space-3);
}
.ws-modal[hidden] {
	display: none;
}
.ws-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(28, 28, 26, 0.75);
}
.ws-modal-panel {
	position: relative;
	background: var(--ws-paper);
	border: var(--ws-border-width) solid var(--ws-ink);
	max-width: 520px;
	width: 100%;
	max-height: 85vh;
	overflow-y: auto;
	padding: var(--ws-space-4);
	box-shadow: 6px 6px 0 var(--ws-ink);
}
.ws-modal-close {
	position: absolute;
	top: 10px;
	right: 14px;
	background: none;
	border: none;
	font-size: 28px;
	line-height: 1;
	color: var(--ws-ink);
	padding: 4px 8px;
}
.ws-modal-title {
	font-family: var(--ws-font-display);
	text-transform: uppercase;
	font-size: var(--ws-text-lg);
	margin: 0 0 var(--ws-space-2);
}

.ws-size-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--ws-text-sm);
	margin-bottom: var(--ws-space-2);
}
.ws-size-table th,
.ws-size-table td {
	border: 1px solid var(--ws-line);
	padding: 8px 10px;
	text-align: left;
}
.ws-size-table th {
	background: var(--ws-paper-dark);
	font-family: var(--ws-font-display);
	text-transform: uppercase;
	font-size: var(--ws-text-xs);
}
.ws-size-note {
	font-size: var(--ws-text-xs);
	color: var(--ws-ink-soft);
}

.ws-size-guide-trigger {
	background: none;
	border: none;
	border-bottom: 1px solid var(--ws-ink);
	padding: 0;
	font-family: var(--ws-font-body);
	font-weight: 700;
	font-size: var(--ws-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ws-ink);
	margin-top: var(--ws-space-1);
}
.ws-fit-note {
	font-size: var(--ws-text-xs);
	color: var(--ws-ink-soft);
	margin-top: 4px;
}

/* Newsletter popup — neon sticker treatment matching the drop-insert */
.ws-newsletter-panel {
	background: var(--ws-neon-ink);
	border-color: var(--ws-neon);
	box-shadow: var(--ws-neon-glow), 6px 6px 0 var(--ws-ink);
	color: var(--ws-paper);
	text-align: center;
}
.ws-newsletter-panel .ws-modal-close {
	color: var(--ws-paper);
}
.ws-newsletter-popup-title {
	font-family: var(--ws-font-display);
	text-transform: uppercase;
	font-size: var(--ws-text-xl);
	margin: 0 0 var(--ws-space-1);
	color: #fff;
}
.ws-newsletter-popup p {
	font-size: var(--ws-text-sm);
	color: var(--ws-neon-ink-text);
	margin-bottom: var(--ws-space-2);
}
.ws-newsletter-popup .ws-newsletter-form {
	justify-content: center;
}

/* =========================================================
   WISHLIST
   ========================================================= */
.ws-wishlist-toggle {
	background: rgba(237, 233, 223, 0.9);
	border: 1px solid var(--ws-ink);
	border-radius: 50%;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--ws-ink);
	padding: 0;
}
.ws-wishlist-toggle[aria-pressed="true"] {
	color: var(--ws-red);
	border-color: var(--ws-red);
}
.ws-wishlist-toggle--loop {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
}
.ws-wishlist-empty {
	text-align: center;
	padding: var(--ws-space-5) var(--ws-space-3);
}
.ws-wishlist-empty p {
	margin-bottom: var(--ws-space-2);
	color: var(--ws-ink-soft);
}

/* =========================================================
   INSTAGRAM FEED
   ========================================================= */
.ws-insta-feed {
	padding: var(--ws-space-5) var(--ws-space-3);
	text-align: center;
}
.ws-section-title {
	font-family: var(--ws-font-display);
	text-transform: uppercase;
	font-size: var(--ws-text-xl);
	margin: 0 0 var(--ws-space-3);
}
.ws-insta-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 4px;
	max-width: var(--ws-content-width);
	margin: 0 auto;
}
.ws-insta-item {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	position: relative;
}
.ws-insta-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}
.ws-insta-item:hover img {
	transform: scale(1.05);
}

@media (max-width: 600px) {
	.ws-insta-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.ws-admin-only-notice {
	max-width: var(--ws-content-width);
	margin: var(--ws-space-2) auto;
	padding: var(--ws-space-2);
	background: #fff3cd;
	border: 1px solid #ffe69c;
	font-size: var(--ws-text-xs);
	text-align: center;
}

/* =========================================================
   PRODUCT GRID BLOCK
   Centered grid, column count driven by the --ws-grid-columns
   custom property (set inline per-block by render.php), and
   collapses to fewer columns at standard breakpoints regardless
   of the configured column count, so a 6-column grid never forces
   tiny unreadable cards on mobile.
   ========================================================= */
.ws-product-grid-wrap {
	display: flex;
	justify-content: center;
	padding: var(--ws-space-4) var(--ws-space-3);
}
.ws-product-grid {
	--ws-grid-columns: 4; /* overridden inline per-block instance — wrapping/breakpoint reference only, no longer drives card width directly */
	--ws-card-width-columns: 4; /* card size is permanently based on 4-per-row math at desktop, regardless of --ws-grid-columns above */
	--ws-card-width-gap-total: calc( 3 * 1.5rem ); /* (4-1) gaps at --ws-space-3, matches --ws-card-width-columns: 4 */
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: var(--ws-space-3);
	width: 100%;
	max-width: var(--ws-content-width);
	margin: 0 auto;
}

.ws-product-grid-card {
	display: flex;
	flex-direction: column;
	background: var(--ws-paper);
	border: 1px solid var(--ws-line);
	padding: var(--ws-space-2);
	transition: box-shadow 0.15s ease;

	/* Explicit box-sizing: border-box, not just relying on the global
	   *, *::before, *::after reset in style.css. A live-site check
	   found cards rendering 34px wider than their flex-basis intended
	   (measured: 316px actual vs. 282px expected at 4 columns in a
	   1200px row) — 34px being exactly this card's padding (32px,
	   2 × 1rem) plus its border (2px, 2 × 1px). That's the signature
	   of content-box sizing: padding/border being added ON TOP of the
	   flex-basis width instead of absorbed within it, which only
	   happens if box-sizing isn't actually border-box on this element
	   despite the theme-wide reset — almost certainly a plugin or
	   WooCommerce stylesheet loading after the theme with enough
	   specificity to win. Setting box-sizing directly here removes
	   the dependency on that global reset's specificity/cascade order
	   entirely, rather than chasing which other stylesheet caused it. */
	box-sizing: border-box;

	/* Card width is permanently based on a fixed 4-columns-per-row
	   reference, NOT on the block's configurable "columns" setting
	   (--ws-grid-columns). This is intentional: brand standard is 4
	   cards per row at default desktop size, and that size doesn't
	   change even if the columns setting is changed in the block
	   panel to something else — a 3-column setting would still show
	   cards at this same fixed 1/4 width, just with 3 per row and
	   empty space left over, not 3 cards stretched to fill the row.
	   --ws-card-width-columns / --ws-card-width-gap-total are a
	   SEPARATE pair of custom properties from --ws-grid-columns
	   specifically so the two concerns (how many cards wrap per row,
	   vs. how wide each card actually is) can vary independently.
	   At responsive breakpoints, both pairs ARE overridden together
	   (see below) so card size DOES shrink to match the breakpoint's
	   own column count there — the "no resize" rule applies only at
	   the default/desktop tier, not universally. */
	flex: 0 0 calc( ( 100% - var(--ws-card-width-gap-total) ) / var(--ws-card-width-columns) );

	/* Needed regardless of column math: without this, long unbroken
	   text (a product title, SKU) can force the card wider than its
	   intended width, breaking the equal-column layout and
	   potentially causing unwanted wrapping. */
	min-width: 0;
}
.ws-product-grid-card:hover {
	box-shadow: 4px 4px 0 var(--ws-ink);
}
.ws-product-grid-card-link {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	flex: 1;
}
.ws-product-grid-card-image {
	position: relative;
	margin-bottom: var(--ws-space-2);
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--ws-paper-dark);
}
.ws-product-grid-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ws-product-grid-card-badge {
	position: absolute;
	top: 8px;
	left: 8px;
}
.ws-product-grid-card-title {
	font-family: var(--ws-font-display);
	font-size: var(--ws-text-sm);
	text-transform: uppercase;
	margin: 0 0 4px;
	line-height: 1.3;
	overflow-wrap: break-word;
	word-break: break-word;
}
.ws-product-grid-card-sku {
	font-size: var(--ws-text-xs);
	color: var(--ws-ink-soft);
	margin: 0 0 4px;
	overflow-wrap: break-word;
	word-break: break-word;
}
.ws-product-grid-card-rating {
	margin-bottom: 4px;
}
.ws-product-grid-card-price {
	font-family: var(--ws-font-body);
	font-weight: 700;
	font-size: var(--ws-text-sm);
	margin-bottom: 4px;
}
.ws-product-grid-card-price del {
	opacity: 0.5;
	font-weight: 400;
	margin-right: 6px;
}
.ws-product-grid-card-price ins {
	text-decoration: none;
	color: var(--ws-red);
}
.ws-product-grid-card-excerpt {
	font-size: var(--ws-text-xs);
	color: var(--ws-ink-soft);
	line-height: 1.5;
	margin: 0;
}
.ws-product-grid-card-cta {
	margin-top: var(--ws-space-2);
}
.ws-product-grid-card-cta .button {
	display: block;
	text-align: center;
	width: 100%;
}

.ws-product-grid-load-more-wrap {
	display: flex;
	justify-content: center;
	margin-top: var(--ws-space-4);
}
.ws-product-grid-load-more[disabled] {
	opacity: 0.5;
	cursor: default;
}

/* ---- Responsive column collapse ----
   Three tiers: 3 columns at tablet-landscape, 2 at tablet, 1 on
   mobile. Collapses regardless of the configured column count, so a
   grid set to 5 or 6 columns never forces unreadably narrow cards on
   smaller screens.

   Unlike the default/desktop tier (where card width is permanently
   fixed at 4-per-row sizing via --ws-card-width-columns, independent
   of --ws-grid-columns — see the brand-standard note on
   .ws-product-grid-card above), card width DOES recalculate at every
   breakpoint to match that breakpoint's own column count. Both
   property pairs are overridden together here so wrapping and sizing
   stay in sync at each screen size — the "card size never changes"
   rule is specifically a desktop-default behavior, not a universal
   lock across all screen sizes. */
@media (max-width: 1024px) {
	.ws-product-grid {
		--ws-grid-columns: 3 !important;
		--ws-card-width-columns: 3 !important;
		--ws-card-width-gap-total: calc( 2 * 1.5rem ) !important;
	}
}
@media (max-width: 768px) {
	.ws-product-grid {
		--ws-grid-columns: 2 !important;
		--ws-card-width-columns: 2 !important;
		--ws-card-width-gap-total: calc( 1 * 1.5rem ) !important;
	}
}
@media (max-width: 480px) {
	.ws-product-grid {
		--ws-grid-columns: 1 !important;
		--ws-card-width-columns: 1 !important;
		--ws-card-width-gap-total: 0px !important;
	}
}