/*
 * Theme Name:  The Attic Place
 * Description: Child theme of Forme — site-specific overrides for The Attic Place.
 * Template:    forme-theme
 * Version:     1.0.0
 * Text Domain: the-attic-place-child
 */

/* ── Your custom CSS overrides go here ──────────────────── */

.forme-header__center {
	margin-top: 0 !important;
}


.term-shop-all .facetwp-checkbox[data-value="sold"],
.term-shop-all .facetwp-checkbox[data-value="sold"] + .facetwp-depth {
    display: none !important;
}

.wp-block-woocommerce-product-meta .wp-block-group  {
	flex-wrap: wrap;
}
/* ── Mobile nav overlay ──────────────────────────────────────────────── */
/* When WP opens the overlay it adds body.modal-open.
   The overlay is trapped inside the header's sticky stacking context,
   so we hide the announce bar and promote the header's stacking context
   rather than fighting z-index from inside it. */
body.modal-open .forme-announce-bar {
	display: none !important;
}
body.modal-open header.wp-block-template-part {
	z-index: 99999 !important;
}

/* Overlay panel — full viewport */
.wp-block-navigation__responsive-container.is-menu-open {
	position: fixed !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100dvh !important;
	z-index: 99999 !important;
	overflow-y: auto !important;
	background: #FDFAF4 !important;
	display: flex !important;
	flex-direction: column !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding: 4rem 1.5rem 2rem !important;
	flex: 1 !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0 !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	width: 100% !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	border-bottom: 1px solid rgba(42,31,15,0.08) !important;
	padding: 0.85rem 0 !important;
	width: 100% !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item button {
	font-size: 0.72rem !important;
	letter-spacing: 0.15em !important;
	text-transform: uppercase !important;
	color: #2A1F0F !important;
	font-family: 'Jost', sans-serif !important;
	font-weight: 500 !important;
}
/* Close button — fixed so it stays visible while content scrolls */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	position: fixed !important;
	top: 1rem !important;
	right: 1rem !important;
	z-index: 100000 !important;
	color: #2A1F0F !important;
	background: none !important;
	border: none !important;
	width: 44px !important;
	height: 44px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

/* ── Mobile header icons ─────────────────────────────────────────────── */
@media (max-width: 781px) {
	/* Tighten the right icon group */
	.forme-header-icons { gap: 0 !important; }

	/* Reduce icon tap area slightly so they all fit */
	.forme-hicon { width: 34px !important; height: 34px !important; }

	/* Hide account, wishlist and theme toggle on mobile — keep search + cart */
	.forme-hicon--account,
	.forme-hicon--wishlist,
	.forme-theme-toggle { display: none !important; }

	/* Logo: smaller on mobile so icons have breathing room */
	.forme-header__center .wp-block-site-logo img { max-width: 130px !important; }

	/* Ensure left/right header sections have a minimum width so logo stays centred
	   and icons don't crowd it */
	.forme-header__left,
	.forme-header__right { min-width: 72px !important; flex-shrink: 0 !important; }
}

.forme-newsletter__form .wp-block-search__button {
	margin-left: 0;
}
/* ── Utility ─────────────────────────────────────────────────────────── */
.hide-facet { display: none !important; }
.forme-inline { display: inline; }
.forme-align-left { text-align: left; }

/* ── FacetWP: vertical list checkboxes ──────────────────────────────── */
.facetwp-type-checkboxes {
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	gap: 0 !important;
	padding: 0 !important;
}
.facetwp-checkbox {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 7px 0 !important;
	border: none !important;
	border-bottom: 1px solid rgba(42,31,15,0.07) !important;
	border-radius: 0 !important;
	background: transparent !important;
	cursor: pointer !important;
	gap: 8px !important;
}
.facetwp-checkbox:last-child { border-bottom: none !important; }
/* Custom checkbox box */
.facetwp-checkbox::before {
	display: flex !important;
	flex-shrink: 0 !important;
	width: 14px !important;
	height: 14px !important;
	border: 1.5px solid rgba(42,31,15,0.3) !important;
	border-radius: 2px !important;
	background: transparent !important;
	content: '' !important;
	transition: background 0.12s, border-color 0.12s !important;
	order: 0 !important;
}
.facetwp-checkbox:hover::before {
	border-color: #2A1F0F !important;
}
.facetwp-checkbox.checked::before {
	background: #2A1F0F !important;
	border-color: #2A1F0F !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' stroke='%23EAD89A' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-size: 9px 7px !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
}
.facetwp-checkbox .facetwp-display-value {
	flex: 1 !important;
	font-family: 'Jost', sans-serif !important;
	font-size: 0.82rem !important;
	font-weight: 400 !important;
	letter-spacing: 0.01em !important;
	color: #3D2E18 !important;
	margin-top: 0 !important;
	order: 1 !important;
}
.facetwp-checkbox:hover .facetwp-display-value { color: #2A1F0F !important; }
.facetwp-checkbox.checked .facetwp-display-value { color: #2A1F0F !important; font-weight: 500 !important; }
.facetwp-counter {
	margin-left: auto !important;
	font-size: 0.72rem !important;
	color: #9A8872 !important;
	opacity: 1 !important;
	order: 2 !important;
}
.facetwp-checkbox.checked .facetwp-counter { color: #5C4A32 !important; }
.facetwp-checkbox.checked { background: transparent !important; }
.facetwp-checkbox:hover { border-color: rgba(42,31,15,0.07) !important; color: inherit !important; }
/* Sub-items: vertical indent */
.facetwp-depth {
	display: flex !important;
	flex-direction: column !important;
	padding-left: 22px !important;
	width: 100% !important;
}
.facetwp-depth .facetwp-checkbox {
	width: 100% !important;
}
/* Hide the [+]/[-] expand toggle — not needed when always expanded */
.facetwp-expand { display: none !important; }

/* ── Product price colours ──────────────────────────────────────────── */
.woocommerce div.product p.price,
.woocommerce div.product span.price { color: #2A1F0F !important; font-size: 1.5rem !important; }
.woocommerce div.product p.price del,
.woocommerce div.product span.price del { color: #9A8872 !important; font-size: 1rem !important; opacity: 1 !important; }
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins { text-decoration: none !important; color: #2A1F0F !important; }
.woocommerce-price-label { display: none !important; }

.pro_price_extra_info {
	color: #9A8872 !important;
	text-decoration: line-through;
}

/* ── Payment & Shipping tab ─────────────────────────────────────────── */
.attic-tab-ps { max-width: 680px; }
.attic-tab-ps__section { margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(184,150,46,0.15); }
.attic-tab-ps__section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.attic-tab-ps__section h3 { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #B8962E; font-family: 'Jost', sans-serif; margin: 0 0 0.75rem; }
.attic-tab-ps__section p,
.attic-tab-ps__section ul { font-size: 0.88rem; color: #5C4A32; line-height: 1.8; margin: 0 0 0.5rem; }
.attic-tab-ps__section ul { padding-left: 1.25rem; }
.attic-tab-ps__section ul li { margin-bottom: 0.25rem; }
.attic-tab-ps__section a { color: #B8962E !important; text-decoration: underline; }
.attic-tab-ps__section a:hover { color: #5C4A32 !important; text-decoration: underline; }

/* ── Sold — product loop ─────────────────────────────────────────────────── */
.woocommerce ul.products li.product { position: relative; }

/* ── Add to cart: overlay on product image, revealed on hover ────────────── */
.wc-block-components-product-image { position: relative; }

.forme-overlay-add-to-cart {
	position: absolute;
	left: 0.6rem;
	right: 0.6rem;
	bottom: 0.6rem;
	z-index: 2;
	margin: 0 !important;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.2s ease, transform 0.2s ease;
	pointer-events: none;
}

li.product:hover .forme-overlay-add-to-cart,
li.product:focus-within .forme-overlay-add-to-cart {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* Touch devices have no hover — keep the button visible below the image */
@media (hover: none) {
	.forme-overlay-add-to-cart {
		position: static;
		opacity: 1;
		transform: none;
		pointer-events: auto;
		margin-top: 0.5rem !important;
	}
}

/* Badge injected by JS into .attic-is-sold cards */
.attic-sold-badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 2;
	background: #2A1F0F;
	color: #FDFAF4;
	font-family: 'Jost', sans-serif;
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	padding: 0.3rem 0.65rem;
	pointer-events: none;
}

/* Hide the entire price block (including "Now:" label) on sold loop cards */
li.product.attic-is-sold .price,
li.product.attic-is-sold p.price,
li.product.attic-is-sold span.price { display: none !important; }

/* Hide Add to Cart on sold loop cards, regardless of which listing/URL it's viewed from */
li.product.attic-is-sold .wc-block-components-product-button,
li.product.attic-is-sold .wc-block-components-product-button__button,
li.product.attic-is-sold .wp-block-woocommerce-product-button,
li.product.attic-is-sold .add_to_cart_button { display: none !important; }

/* ── Sold — single product ───────────────────────────────────────────────── */
/* Hide price on single product page when sold */
.woocommerce div.product.attic-is-sold p.price,
.woocommerce div.product.attic-is-sold span.price { display: none !important; }

.attic-sold-label {
	display: inline-block;
	background: #2A1F0F;
	color: #FDFAF4;
	font-family: 'Jost', sans-serif;
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	padding: 0.4rem 1rem;
	margin: 0 0 1.25rem;
}

/* ══════════════════════════════════════════════════════════════════════
   MOBILE LAYOUT — consistent 20px horizontal padding, sane section gaps
   Target: ≤781px (WP mobile nav breakpoint)
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 781px) {

	/* ── 0. Utility classes ──────────────────────────────────────────── */
	.forme-inline p {
		display: flex;
		gap: 1rem;
	}
	.forme-align-left {
		text-align: left !important;
	}

	/* ── 1. Section containers: cap horizontal padding at 1.25rem ──────── */
	/* forme-section class forces 96px — reset on mobile */
	.forme-section {
		--forme-section-pad-x: 1.25rem;
		padding-inline-start: 1.25rem !important;
		padding-inline-end:   1.25rem !important;
		--forme-container-pl: 1.25rem !important;
		--forme-container-pr: 1.25rem !important;
	}

	/* Top-level forme/container blocks (full / wide / content width):
	   override the inline-style CSS vars with the actual property. */
	.forme-container--full,
	.forme-container--wide,
	.forme-container--content {
		padding-inline-start: 1.25rem !important;
		padding-inline-end:   1.25rem !important;
	}

	/* Header container: tighter asymmetric padding on mobile */
	header.wp-block-template-part .forme-container--full,
	header.wp-block-template-part .forme-container--wide,
	header.wp-block-template-part .forme-container--content {
		padding-inline-start: 0.45rem !important;
		padding-inline-end:   0.9rem !important;
	}

	/* Nested containers inside columns keep their own padding — reset
	   the inline-start/end back to 0 so they don't double-pad. */
	.forme-column .forme-container--content,
	.forme-column .forme-container--wide {
		padding-inline-start: 0 !important;
		padding-inline-end:   0 !important;
	}

	/* ── 2. Footer: reduce padding, stack all columns ──────────────────── */
	.forme-footer .forme-container {
		padding-inline-start: 1.25rem !important;
		padding-inline-end:   1.25rem !important;
		padding-block-start:  2.5rem !important;
	}
	/* Stack the 4-col row */
	.forme-footer > .forme-container > .forme-container__inner > .forme-row,
	.forme-footer .forme-row:not(.forme-footer__bottom) {
		flex-direction: column !important;
		gap: 2rem !important;
	}
	/* Every column goes full width */
	.forme-footer .forme-column {
		flex-basis: 100% !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	/* Bottom bar: keep side-by-side but wrap if needed */
	.forme-footer__bottom.forme-row {
		flex-direction: row !important;
		flex-wrap: wrap !important;
		gap: 0.25rem 1rem !important;
	}

	/* ── 3. Pre-footer payment band ────────────────────────────────────── */
	.forme-prefooter { padding: 1.5rem 1.25rem !important; }
	.forme-prefooter__inner {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 1rem !important;
	}

	/* ── 4. Constrained wp-block-group sections: uniform horizontal pad ── */
	/* Core WP groups that have inline padding set via block editor */
	.wp-site-blocks > .wp-block-group:not(header):not(footer) {
		padding-inline-start: 1.25rem !important;
		padding-inline-end:   1.25rem !important;
	}

	/* ── 5. Single product: un-sticky image column on mobile ───────────── */
	.single-product .wp-block-columns > .wp-block-column:first-child {
		position: static !important;
		max-height: none !important;
		overflow-y: visible !important;
	}

	/* ── 6. Shop toolbar: full width on mobile ─────────────────────────── */
	.forme-shop-toolbar.alignwide {
		padding-inline: 1.25rem !important;
	}
}