/* Fourthwall Storefront — front-end styles
   Uses the active theme's WP preset variables where available (so it blends
   into block themes like trikdang-flex) with sane fallbacks for any theme. */

.fws-store-title {
	margin-bottom: 1rem;
}

.fws-notice {
	padding: 1rem 1.25rem;
	border-radius: 6px;
	background: var( --wp--preset--color--surface, #f4f4f4 );
	color: var( --wp--preset--color--paper, inherit );
}
.fws-notice--error {
	border-left: 3px solid var( --fws-accent, #e4002b );
}

.fws-loading {
	opacity: 0.7;
	font-style: italic;
}

/* ---------------- Grid ---------------- */

.fws-store-grid {
	--fws-columns: 4;
	display: grid;
	grid-template-columns: repeat( var( --fws-columns ), minmax( 0, 1fr ) );
	gap: 1.75rem;
}

@media ( max-width: 900px ) {
	.fws-store-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}
@media ( max-width: 520px ) {
	.fws-store-grid {
		grid-template-columns: 1fr;
	}
}

.fws-card {
	display: flex;
	flex-direction: column;
	background: var( --wp--preset--color--surface, #fff );
	border: 1px solid rgba( 128, 128, 128, 0.18 );
	border-radius: 10px;
	overflow: hidden;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.fws-card:hover {
	transform: translateY( -3px );
	box-shadow: 0 10px 24px rgba( 0, 0, 0, 0.18 );
}

.fws-card__media {
	aspect-ratio: 1 / 1;
	background: var( --wp--preset--color--night-flight, #111 );
	overflow: hidden;
}
.fws-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}
.fws-card:hover .fws-card__media img {
	transform: scale( 1.04 );
}

.fws-card__body {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	flex: 1;
}

.fws-card__title {
	font-family: var( --wp--preset--font-family--display, inherit );
	font-size: var( --wp--preset--font-size--medium, 1.05rem );
	margin: 0;
	line-height: 1.25;
}

.fws-card__price {
	font-family: var( --wp--preset--font-family--spec-mono, inherit );
	opacity: 0.85;
}

/* ---------------- Buttons ---------------- */

.fws-btn {
	appearance: none;
	border: none;
	cursor: pointer;
	border-radius: 999px;
	padding: 0.65rem 1.25rem;
	font-weight: 600;
	font-family: var( --wp--preset--font-family--body, inherit );
	transition: opacity 0.15s ease, transform 0.1s ease;
}
.fws-btn:disabled {
	cursor: not-allowed;
	opacity: 0.55;
}
.fws-btn:active:not( :disabled ) {
	transform: scale( 0.98 );
}
.fws-btn--primary {
	background: var( --fws-accent, #e4002b );
	color: #fff;
}
.fws-btn--primary:hover:not( :disabled ) {
	opacity: 0.9;
}
.fws-btn--block {
	width: 100%;
	margin-top: auto;
}

/* ---------------- Floating cart toggle ---------------- */

.fws-cart-toggle {
	border: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.fws-cart-toggle:hover {
	opacity: 0.92;
}

.fws-cart-toggle--floating {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 9998;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var( --fws-accent, #e4002b );
	color: #fff;
	box-shadow: 0 6px 18px rgba( 0, 0, 0, 0.35 );
	/* Hidden by default; only shown once the cart has items (see
	   .fws-cart-toggle--has-items, toggled by refreshCartBadge() in
	   storefront.js). */
	opacity: 0;
	visibility: hidden;
	transform: scale( 0.8 );
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	pointer-events: none;
}

.fws-cart-toggle--floating.fws-cart-toggle--has-items {
	opacity: 1;
	visibility: visible;
	transform: scale( 1 );
	pointer-events: auto;
}

/* Inline variant: sized to sit in a header/nav, inherits surrounding
   text color so it blends with your theme's nav styling. Override
   color/size from your theme if needed via the .fws-cart-toggle--inline
   selector. */
.fws-cart-toggle--inline {
	position: relative;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: transparent;
	color: inherit;
}
.fws-cart-toggle--inline:hover {
	background: rgba( 128, 128, 128, 0.12 );
}
.fws-cart-toggle--inline .fws-cart-count {
	background: var( --fws-accent, #e4002b );
	border-color: transparent;
}

.fws-cart-count {
	position: absolute;
	top: -4px;
	right: -4px;
	background: #111;
	color: #fff;
	border: 2px solid #fff;
	border-radius: 999px;
	font-size: 0.7rem;
	line-height: 1;
	padding: 3px 6px;
	font-weight: 700;
}

/* ---------------- Cart drawer ---------------- */

.fws-cart-overlay,
.fws-modal__overlay {
	position: fixed;
	inset: 0;
	background: rgba( 0, 0, 0, 0.5 );
	z-index: 9997;
}

.fws-cart-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min( 400px, 100vw );
	background: var( --wp--preset--color--night-flight, #16171a );
	color: var( --wp--preset--color--paper, #f3efe4 );
	z-index: 9999;
	display: flex;
	flex-direction: column;
	transform: translateX( 100% );
	transition: transform 0.25s ease;
	box-shadow: -8px 0 24px rgba( 0, 0, 0, 0.35 );
}
.fws-cart-drawer.is-open {
	transform: translateX( 0 );
}

.fws-cart-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.25rem;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.1 );
}
.fws-cart-drawer__header h2 {
	margin: 0;
	font-size: 1.1rem;
}
.fws-cart-drawer__close {
	background: none;
	border: none;
	color: inherit;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.fws-cart-drawer__items {
	flex: 1;
	overflow-y: auto;
	padding: 1rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.fws-cart-empty {
	opacity: 0.7;
	text-align: center;
	margin-top: 2rem;
}

.fws-cart-item {
	display: flex;
	gap: 0.75rem;
}
.fws-cart-item__img,
.fws-cart-item__img--placeholder {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 6px;
	background: rgba( 255, 255, 255, 0.08 );
	flex-shrink: 0;
}
.fws-cart-item__info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}
.fws-cart-item__name {
	font-weight: 600;
}
.fws-cart-item__attrs {
	font-size: 0.85rem;
	opacity: 0.7;
}
.fws-cart-item__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 0.25rem;
}
.fws-cart-item__price {
	font-family: var( --wp--preset--font-family--spec-mono, inherit );
}
.fws-cart-item__remove {
	align-self: flex-start;
	background: none;
	border: none;
	color: var( --fws-accent, #e4002b );
	font-size: 0.8rem;
	cursor: pointer;
	padding: 0;
	margin-top: 0.25rem;
	text-decoration: underline;
}

.fws-qty-stepper {
	display: inline-flex;
	align-items: center;
	border: 1px solid rgba( 255, 255, 255, 0.2 );
	border-radius: 999px;
	overflow: hidden;
}
.fws-qty-btn {
	background: none;
	border: none;
	color: inherit;
	width: 26px;
	height: 26px;
	cursor: pointer;
	font-size: 1rem;
	line-height: 1;
}
.fws-qty-val {
	min-width: 22px;
	text-align: center;
	font-size: 0.9rem;
}

.fws-cart-drawer__footer {
	padding: 1.25rem;
	border-top: 1px solid rgba( 255, 255, 255, 0.1 );
}
.fws-cart-drawer__subtotal {
	display: flex;
	justify-content: space-between;
	margin-bottom: 0.75rem;
	font-weight: 600;
}
.fws-checkout-notice {
	background: rgba( 228, 0, 43, 0.12 );
	color: var( --wp--preset--color--paper, inherit );
	border-left: 3px solid var( --fws-accent, #e4002b );
	padding: 0.6rem 0.75rem;
	border-radius: 4px;
	font-size: 0.85rem;
	margin: 0 0 0.75rem;
}

.fws-no-scroll {
	overflow: hidden;
}

/* ---------------- Product modal ---------------- */

.fws-modal[hidden] {
	display: none;
}
.fws-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
}
/* The shared .fws-modal__overlay rule above gives it z-index:9997 for use at
   the root level (matching .fws-cart-overlay). But here it's nested *inside*
   .fws-modal as a sibling of .fws-modal__panel, in .fws-modal's own stacking
   context — so that same z-index would otherwise paint on top of the panel
   and swallow all clicks. Bring it back down to the bottom of that context. */
.fws-modal .fws-modal__overlay {
	z-index: 0;
}
.fws-modal__panel {
	position: relative;
	z-index: 1; /* stack above .fws-modal__overlay (scoped to 0 below) */
	background: var( --wp--preset--color--night-flight, #16171a );
	color: var( --wp--preset--color--paper, #f3efe4 );
	max-width: 900px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	/* Hard guarantee: the popup itself should only ever scroll vertically.
	   If anything inside miscalculates its width again, clip it here
	   rather than letting the whole popup become horizontally scrollable. */
	overflow-x: hidden;
	border-radius: 10px;
	padding: 2rem;
}
.fws-modal__close {
	position: absolute;
	top: 0.75rem;
	right: 1rem;
	background: none;
	border: none;
	color: inherit;
	font-size: 1.75rem;
	cursor: pointer;
	line-height: 1;
}

.fws-detail {
	display: grid;
	/* minmax(0, 1fr), not plain 1fr — a plain 1fr track won't shrink
	   below the intrinsic width of its content, so wide, non-wrapping
	   content inside (like the option-pill rows) was stretching this
	   whole grid — and the popup with it — wider than the screen. */
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	gap: 2rem;
}
@media ( max-width: 640px ) {
	.fws-detail {
		grid-template-columns: minmax( 0, 1fr );
		gap: 1.25rem;
	}
}
.fws-detail__media {
	position: relative;
	border-radius: 8px;
	overflow: hidden;
	background: rgba( 127, 127, 127, 0.08 );
	/* Keep the photo a sane, predictable shape instead of however tall the
	   source image happens to be — that's what was stretching the whole
	   popup out on mobile. */
	aspect-ratio: 1 / 1;
}
@media ( max-width: 640px ) {
	.fws-detail__media {
		aspect-ratio: 4 / 3;
	}
}
.fws-media__track {
	display: flex;
	width: 100%;
	height: 100%;
	transition: transform 0.25s ease;
}
.fws-detail__image {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	/* contain, not cover — product photos can be almost any aspect ratio
	   (sleeves stretched wide, etc.), and cover was cropping them to fit
	   the box. contain guarantees the whole product is always visible. */
	object-fit: contain;
	display: block;
}
.fws-media__arrow {
	appearance: none;
	cursor: pointer;
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: none;
	background: rgba( 255, 255, 255, 0.85 );
	color: #16171a;
	font-size: 1.2rem;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.2 );
}
.fws-media__arrow:hover {
	background: #fff;
}
.fws-media__arrow--prev {
	left: 10px;
}
.fws-media__arrow--next {
	right: 10px;
}
.fws-media__arrow[hidden] {
	display: none;
}
.fws-detail__info {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	min-width: 0;
}
.fws-detail__title {
	margin: 0;
	font-family: var( --wp--preset--font-family--display, inherit );
}
.fws-detail__price {
	font-size: 1.2rem;
	font-family: var( --wp--preset--font-family--spec-mono, inherit );
}
.fws-detail__desc {
	opacity: 0.85;
	line-height: 1.5;
}
.fws-detail__stock {
	color: var( --fws-accent, #e4002b );
	font-weight: 600;
}
.fws-detail__stock:empty {
	display: none;
}

/* Each attribute (Color, Size, ...) gets its own full-width row — label on
   top, a wrapping row of tappable option pills below — matching how
   Fourthwall's own product page presents "Select color" / "Select size",
   rather than a native <select> dropdown. */
.fws-variant-axis {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	min-width: 0;
}
.fws-variant-axis__label {
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.75;
}
.fws-option-group {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.5rem;
}
.fws-option-pill {
	appearance: none;
	cursor: pointer;
	box-sizing: border-box;
	flex: 0 0 auto;
	white-space: nowrap;
	padding: 0.5rem 1rem;
	border-radius: 999px;
	font-size: 0.9rem;
	line-height: 1.2;
	/* Neutral, mid-tone border/fill that stays visible on both a dark and
	   a light theme, instead of a white-only version that vanishes on
	   light backgrounds. */
	border: 1px solid rgba( 127, 127, 127, 0.4 );
	background: rgba( 127, 127, 127, 0.08 );
	color: inherit;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.fws-option-pill:hover {
	border-color: rgba( 127, 127, 127, 0.7 );
}
.fws-option-pill.is-selected {
	background: var( --fws-accent, #e4002b );
	border-color: var( --fws-accent, #e4002b );
	color: #fff;
	font-weight: 600;
}

/* Horizontally-scrollable, overflow-hidden row used for Color/Size option
   pills — the same "slide" treatment as the photo carousel — so a long
   option list scrolls in place on a narrow screen instead of wrapping
   onto extra lines. */
.fws-scroll-row {
	position: relative;
	min-width: 0;
}
.fws-scroll-row__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
	padding: 2px 2px 6px;
	margin: -2px -2px -6px;
	min-width: 0;
}
.fws-scroll-row__viewport::-webkit-scrollbar {
	display: none;
}
.fws-scroll-arrow {
	appearance: none;
	cursor: pointer;
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: none;
	background: rgba( 255, 255, 255, 0.85 );
	color: #16171a;
	font-size: 1.05rem;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.2 );
}
.fws-scroll-arrow:hover {
	background: #fff;
}
.fws-scroll-arrow--prev {
	left: -4px;
}
.fws-scroll-arrow--next {
	right: -4px;
}
.fws-scroll-arrow[hidden] {
	display: none;
}

/* Quantity + Add to Cart share one row, like Fourthwall's own popup. */
.fws-qty-cart-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.fws-qty-row {
	flex-direction: row;
	align-items: center;
	gap: 0.75rem;
	flex: 0 0 auto;
}
.fws-qty-row .fws-variant-axis__label {
	margin: 0;
}
.fws-qty-input {
	box-sizing: border-box;
	margin: 0;
	padding: 0.5rem 0.75rem;
	border-radius: 6px;
	border: 1px solid rgba( 127, 127, 127, 0.4 );
	background: rgba( 127, 127, 127, 0.08 );
	color: inherit;
	font-size: 0.95rem;
	line-height: 1.3;
	width: 70px;
	height: 40px;
}
.fws-btn--cart {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}

.fws-product-embed .fws-detail {
	padding: 1rem 0;
}