/*
Theme Name:         Forme
Theme URI:          https://github.com/your-org/forme-theme
Description:        Premium FSE WordPress theme. Gutenberg-native. No page builders. No jQuery. No bloat.
Version:            1.0.0
Requires at least:  6.5
Tested up to:       6.7
Requires PHP:       8.1
Author:             Forme
License:            GPL-2.0-or-later
License URI:        https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:        forme
*/

/*
 * All design tokens live in theme.json.
 * This file is intentionally minimal — only global resets and
 * cross-cutting rules that theme.json cannot express.
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media ( prefers-reduced-motion: reduce ) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

/* =============================================================
   Light theme — CSS custom property overrides
   All form blocks reference var(--wp--preset--color--*) so
   flipping these vars is enough for structural elements.
   Note: blocks with hard-coded inline colour styles won't flip;
   encourage users to use Theme Colour palette swatches.
   ============================================================= */

html[ data-forme-scheme="light" ] {
	--wp--preset--color--rich-black:     #F2F0EC;
	--wp--preset--color--off-white:      #0F0F0F;
	--wp--preset--color--surface:        #FFFFFF;
	--wp--preset--color--muted:          #555555;
	--wp--preset--color--border:         rgba( 0, 0, 0, 0.09 );
	--wp--preset--color--primary-accent: var( --forme-accent, #C8B8A2 );
	color-scheme: light;
}

html[ data-forme-scheme="light" ] body {
	background-color: var( --wp--preset--color--rich-black );
	color:            var( --wp--preset--color--off-white );
}

/* Flip block backgrounds that use theme palette vars */
html[ data-forme-scheme="light" ] .has-rich-black-background-color  { background-color: #F2F0EC !important; }
html[ data-forme-scheme="light" ] .has-rich-black-color              { color:            #0F0F0F !important; }
html[ data-forme-scheme="light" ] .has-off-white-background-color    { background-color: #0F0F0F !important; }
html[ data-forme-scheme="light" ] .has-off-white-color               { color:            #F2F0EC !important; }
html[ data-forme-scheme="light" ] .has-surface-background-color      { background-color: #FFFFFF !important; }
html[ data-forme-scheme="light" ] .has-border-color                  { border-color:     rgba(0,0,0,.09) !important; }

/* Smooth colour-scheme transitions */
body,
.forme-header,
.forme-footer {
	transition:
		background-color 0.35s var( --wp--custom--animation--easing--out ),
		color            0.35s var( --wp--custom--animation--easing--out ),
		border-color     0.35s var( --wp--custom--animation--easing--out );
}

/* =============================================================
   Header icons — cart, account, wishlist, theme toggle
   ============================================================= */

.forme-header-icons {
	display:     flex;
	align-items: center;
	gap:         4px;
	flex-shrink: 0;
}

/* Lineicons sizing inside header */
.forme-hicon .lni {
	font-size:   20px;
	line-height: 1;
	display:     block;
}
.forme-theme-toggle__track .lni {
	font-size:   17px;
	line-height: 1;
}

/* Base icon button / link */
.forme-hicon {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           40px;
	height:          40px;
	border-radius:   var( --wp--custom--radius--md, 8px );
	color:           currentColor;
	text-decoration: none;
	background:      transparent;
	border:          none;
	cursor:          pointer;
	opacity:         0.75;
	transition:      opacity 0.2s ease, background 0.2s ease;
}
.forme-hicon:hover {
	opacity:    1;
	background: rgba( 128, 128, 128, 0.12 );
}

/* Cart count badge */
.forme-hicon--cart {
	position: relative;
}
.forme-cart-count {
	position:         absolute;
	top:              4px;
	right:            4px;
	min-width:        16px;
	height:           16px;
	padding:          0 4px;
	border-radius:    9999px;
	background:       var( --forme-accent, var( --wp--preset--color--primary-accent ) );
	color:            var( --wp--preset--color--rich-black );
	font-size:        10px;
	font-weight:      700;
	line-height:      16px;
	text-align:       center;
	pointer-events:   none;
	transform-origin: top right;
	transition:       transform 0.25s var( --wp--custom--animation--easing--spring ),
	                  opacity   0.2s ease;
}
.forme-cart-count[hidden] {
	display:   none;
}

/* =============================================================
   Theme toggle — animated sun ↔ moon
   ============================================================= */

.forme-theme-toggle {
	position: relative;
	overflow: hidden;
}

.forme-theme-toggle__track {
	display:         inline-flex;
	position:        relative;
	width:           16px;
	height:          16px;
}

/* Both icons overlap in the same cell — works for <svg> and <i> */
.forme-theme-toggle__sun,
.forme-theme-toggle__moon {
	position:    absolute;
	top:         0;
	left:        0;
	line-height: 1;
	transition:
		opacity   0.3s ease,
		transform 0.4s var( --wp--custom--animation--easing--spring, cubic-bezier( 0.16, 1, 0.3, 1 ) );
}

/* Dark mode (default): show moon, hide sun */
html[ data-forme-scheme="dark" ] .forme-theme-toggle__sun {
	opacity:   0;
	transform: rotate( 90deg ) scale( 0.5 );
}
html[ data-forme-scheme="dark" ] .forme-theme-toggle__moon {
	opacity:   1;
	transform: rotate( 0deg ) scale( 1 );
}

/* Light mode: show sun, hide moon */
html[ data-forme-scheme="light" ] .forme-theme-toggle__sun {
	opacity:   1;
	transform: rotate( 0deg ) scale( 1 );
}
html[ data-forme-scheme="light" ] .forme-theme-toggle__moon {
	opacity:   0;
	transform: rotate( -90deg ) scale( 0.5 );
}

/* Spin animation on click */
@keyframes forme-toggle-spin {
	0%   { transform: rotate( 0 )   scale( 1 );    }
	40%  { transform: rotate( 180deg ) scale( 0.8 ); }
	100% { transform: rotate( 360deg ) scale( 1 );  }
}
.forme-theme-toggle--spinning .forme-theme-toggle__track {
	animation: forme-toggle-spin 0.5s var( --wp--custom--animation--easing--spring, cubic-bezier( 0.16, 1, 0.3, 1 ) ) forwards;
}

/* =============================================================
   Header behavior — driven by body class set in customizer.php.
   These override whatever position is baked into the template,
   so Forme Settings is always the single source of truth.
   ============================================================= */

/*
 * position: sticky on the INNER .forme-header div doesn't work because its
 * parent <header class="wp-block-template-part"> is only as tall as the header
 * itself — sticky needs the parent to be taller than the sticky element.
 *
 * Solution: make the <header> wrapper itself sticky/fixed. It is a direct child
 * of .wp-site-blocks (the page scroll container), so sticky works correctly.
 */

/* ── Default header background (from settings) ───────────────────────── */
header.wp-block-template-part:has( .forme-header ) .forme-header {
	background:       var( --forme-header-bg, #0A0A0A );
	backdrop-filter:  none;
	-webkit-backdrop-filter: none;
	transition:
		background       0.35s var( --wp--custom--animation--easing--out, ease ),
		backdrop-filter  0.35s var( --wp--custom--animation--easing--out, ease ),
		padding-top      0.35s var( --wp--custom--animation--easing--spring, cubic-bezier( 0.16, 1, 0.3, 1 ) ),
		padding-bottom   0.35s var( --wp--custom--animation--easing--spring, cubic-bezier( 0.16, 1, 0.3, 1 ) );
}

/* ── Scrolled state: glass / opacity change ──────────────────────────── */
header.wp-block-template-part:has( .forme-header ).forme-header--page-scrolled .forme-header {
	background:              var( --forme-header-scrolled-bg, rgba(10,10,10,0.8) );
	backdrop-filter:         blur( var( --forme-header-scrolled-blur, 0px ) ) saturate( 1.5 );
	-webkit-backdrop-filter: blur( var( --forme-header-scrolled-blur, 0px ) ) saturate( 1.5 );
}

body.forme-header-behavior--sticky header.wp-block-template-part:has( .forme-header ) {
	position: sticky;
	top:      0;
	z-index:  200;
}

body.forme-header-behavior--fixed header.wp-block-template-part:has( .forme-header ) {
	position: fixed;
	top:      0;
	left:     0;
	right:    0;
	z-index:  200;
}

body.forme-header-behavior--static header.wp-block-template-part:has( .forme-header ) {
	position: static;
}

/* scroll-away: fixed wrapper + JS toggles .forme-header--hidden on the inner div */
body.forme-header-behavior--scroll-away header.wp-block-template-part:has( .forme-header ) {
	position: fixed;
	top:      0;
	left:     0;
	right:    0;
	z-index:  200;
}
body.forme-header-behavior--scroll-away .forme-header {
	transition: transform 0.35s var( --wp--custom--animation--easing--spring, cubic-bezier( 0.16, 1, 0.3, 1 ) );
}

/* Fixed / scroll-away: push content down so it isn't hidden under the header */
body.forme-header-behavior--fixed .wp-site-blocks > :not( header ),
body.forme-header-behavior--scroll-away .wp-site-blocks > :not( header ) {
	/* JS sets exact padding-top via setHeaderOffset() */
}

/* =============================================================
   Compact logo on scroll
   Enabled by setting --forme-logo-compact (px value) via
   Forme Settings. The JS adds .forme-header--compact after 80px.
   ============================================================= */

/* Smooth transitions on the header shell and logo */
.forme-header {
	transition:
		padding-top    0.35s var( --wp--custom--animation--easing--spring, cubic-bezier( 0.16, 1, 0.3, 1 ) ),
		padding-bottom 0.35s var( --wp--custom--animation--easing--spring, cubic-bezier( 0.16, 1, 0.3, 1 ) );
}

.forme-header .wp-block-site-logo,
.forme-header .wp-block-site-logo a,
.forme-header .wp-block-site-logo img {
	transition:
		width     0.35s var( --wp--custom--animation--easing--spring, cubic-bezier( 0.16, 1, 0.3, 1 ) ),
		max-width 0.35s var( --wp--custom--animation--easing--spring, cubic-bezier( 0.16, 1, 0.3, 1 ) );
}

/* Text logo fallback (no image set) */
.forme-header .wp-block-site-title a,
.forme-header .wp-block-site-title {
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rich-black);
	text-decoration: none;
	white-space: nowrap;
}

/* Compact state */
.forme-header--compact {
	padding-top:    8px !important;
	padding-bottom: 8px !important;
}

.forme-header--compact .wp-block-site-logo img {
	width:     var( --forme-logo-compact, 60px ) !important;
	max-width: var( --forme-logo-compact, 60px ) !important;
}

/* =============================================================
   Centered header — 3-column true-center layout
   Left and right columns are equal width (flex:1) so the
   logo column (flex:0 auto) is always visually centred.
   ============================================================= */

/* The inner row must be a flat 3-child flex container */
/*
 * 3-column header layout — works with both wp:group (legacy) and
 * forme/container (current). forme/container inserts a .forme-container__inner
 * wrapper inside each block, so flex must be on that inner div too.
 */

/* Inner row: the direct flex container (wp:group case) */
.forme-header__inner {
	display:         flex !important;
	flex-wrap:       nowrap;
	align-items:     center;
	justify-content: space-between;
	width:           100%;
	gap:             0;
}
/* Inner row: forme/container adds an extra .forme-container__inner div */
.forme-header__inner > .forme-container__inner {
	display:         flex !important;
	flex-wrap:       nowrap;
	align-items:     center;
	justify-content: space-between;
	width:           100%;
	gap:             0;
}

/* Left column — flex item, aligns children left */
.forme-header__left {
	flex:            1 1 0%;
	display:         flex;
	align-items:     center;
	justify-content: flex-start;
	min-width:       0;
}
.forme-header__left > .forme-container__inner {
	display:         flex;
	align-items:     center;
	justify-content: flex-start;
	width:           100%;
}

/* Centre column — shrinks to content */
.forme-header__center {
	flex:            0 0 auto;
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         0 24px;
}
.forme-header__center > .forme-container__inner {
	display:         flex;
	align-items:     center;
	justify-content: center;
}

/* Right column — flex item, aligns children right */
.forme-header__right {
	flex:            1 1 0%;
	display:         flex;
	align-items:     center;
	justify-content: flex-end;
	gap:             4px;
	min-width:       0;
}
.forme-header__right > .forme-container__inner {
	display:         flex;
	align-items:     center;
	justify-content: flex-end;
	gap:             4px;
	width:           100%;
}

/* Mobile */
@media ( max-width: 767px ) {
	.forme-header__center { padding: 0 12px; }
}

/* =============================================================
   Header scroll behaviours
   ============================================================= */

/* Transparent header — start invisible, reveal on scroll */
.forme-header--transparent {
	position:         fixed !important;
	top:              0;
	left:             0;
	right:            0;
	z-index:          100;
	background:       transparent !important;
	border-bottom:    1px solid transparent !important;
	backdrop-filter:  none !important;
	-webkit-backdrop-filter: none !important;
	transition:
		background      0.4s var( --wp--custom--animation--easing--out ),
		border-color    0.4s var( --wp--custom--animation--easing--out ),
		backdrop-filter 0.4s var( --wp--custom--animation--easing--out );
}
.forme-header--transparent.forme-header--scrolled {
	background:              rgba( 10, 10, 10, 0.72 ) !important;
	backdrop-filter:         blur( 20px ) saturate( 1.4 ) !important;
	-webkit-backdrop-filter: blur( 20px ) saturate( 1.4 ) !important;
	border-bottom:           1px solid var( --wp--preset--color--border, rgba( 255,255,255,.08 ) ) !important;
}

/* Light mode: transparent header gets a lighter fill */
html[ data-forme-scheme="light" ] .forme-header--transparent.forme-header--scrolled {
	background: rgba( 242, 240, 236, 0.85 ) !important;
}

/* Scroll-away header */
.forme-header--hidden {
	transform:  translateY( -110% );
	transition: transform 0.35s var( --wp--custom--animation--easing--in, cubic-bezier( 0.4, 0, 1, 1 ) );
}
.forme-header:not( .forme-header--hidden ) {
	transition: transform 0.4s var( --wp--custom--animation--easing--spring, cubic-bezier( 0.16, 1, 0.3, 1 ) );
}

/* =============================================================
   Footer column variants — layout helpers
   ============================================================= */

.forme-footer-cols {
	display:               grid;
	grid-template-columns: repeat( var( --forme-footer-cols, 2 ), 1fr );
	gap:                   var( --wp--custom--spacing--2xl, 64px );
}
@media ( max-width: 767px ) {
	.forme-footer-cols { grid-template-columns: 1fr; }
}

/* View transitions — page-level crossfade */
@view-transition {
	navigation: auto;
}

::view-transition-old( root ) {
	animation: forme-fade-out var( --wp--custom--animation--duration--fast ) var( --wp--custom--animation--easing--out ) forwards;
}

::view-transition-new( root ) {
	animation: forme-fade-in var( --wp--custom--animation--duration--base ) var( --wp--custom--animation--easing--spring ) forwards;
}

@keyframes forme-fade-out {
	to { opacity: 0; }
}

@keyframes forme-fade-in {
	from { opacity: 0; }
}

/* ================================================================
   Attic Place — front-page layout
   ================================================================ */

/* ── Equal-height columns: make forme/container fill its parent column ── */
.forme-column > .forme-container {
	height: 100%;
	min-height: 100%;
}

/* ── Column background image helper ─────────────────────────────────────
   Usage: forme/container with backgroundType:"image" + className:"col-bg"
   inside a forme/column. Content is pushed to the bottom-left by default.
   ─────────────────────────────────────────────────────────────────────── */
.col-bg { height: 100% !important; min-height: 100% !important; }
.col-bg .forme-container__inner {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
}

/* Hero */
.attic-hero h1 em { font-style: italic; color: var(--wp--preset--color--primary-accent); }
.attic-hero__stats { border-top: 1px solid rgba(58,46,32,0.1); padding-top: 2rem; margin-top: 3.5rem; }

/* Category cards */
.attic-cat-card { overflow: hidden; cursor: pointer; aspect-ratio: 4/5; border-bottom-right-radius: 12px; }
.attic-cat-card .wp-block-cover__image-background {
	transition: transform 0.8s cubic-bezier(0.22,1,0.36,1);
}
.attic-cat-card:hover .wp-block-cover__image-background { transform: scale(1.07); }
.attic-cat-card .wp-block-cover__inner-container {
	display: flex; align-items: flex-end; justify-content: flex-start; width: 100%;
}
.attic-cat-card .wp-block-cover__inner-container .wp-block-group { width: 100%; }
.attic-categories h2 em { color: var(--wp--preset--color--gold-mid); font-style: italic; }

/* Product strip */
.attic-product-strip .wc-block-grid__product {
	background: var(--wp--preset--color--off-white);
	border-radius: 0 0 10px 0;
	overflow: hidden;
	box-shadow: var(--wp--preset--shadow--sm);
	transition: box-shadow 0.3s, transform 0.3s;
}
.attic-product-strip .wc-block-grid__product:hover {
	box-shadow: var(--wp--preset--shadow--md);
	transform: translateY(-3px);
}

/* Promise band */
.attic-promise-band { gap: 5rem; }
.attic-promise-band .attic-promise-item { min-width: 160px; flex: 1; max-width: 200px; }

/* Editorial */
.attic-editorial .wp-block-columns { align-items: stretch; }
.attic-editorial .wp-block-cover { height: 100%; }
.attic-editorial h2 em { color: var(--wp--preset--color--primary-accent); font-style: italic; }

/* Newsletter */
.attic-newsletter h2 em { color: var(--wp--preset--color--primary-accent); font-style: italic; }
.attic-newsletter .wp-block-search__inside-wrapper {
	border: 1px solid rgba(58,46,32,0.2);
	border-radius: 0 0 8px 0;
	overflow: hidden;
}
.attic-newsletter .wp-block-search__input {
	border: none;
	background: var(--wp--preset--color--off-white);
}
.attic-newsletter .wp-block-search__button {
	background: var(--wp--preset--color--rich-black);
	color: var(--wp--preset--color--gold-pale);
	border: none;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border-radius: 0 0 8px 0;
}

/* Footer — hardcoded so light-mode CSS var overrides can't change it */
.forme-footer--4col { background-color: #2A1F0F !important; }

/* ── Remove ALL inter-block gaps on the page content wrapper ── */
.wp-block-post-content {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
	padding: 0 !important;
}
.wp-block-post-content .forme-container--full,
.wp-block-post-content > [class*="wp-block-"],
.entry-content .forme-container--full {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Strip gap between post-content and footer template-part */
.wp-site-blocks > .wp-block-template-part[class*="footer"],
.wp-site-blocks > footer,
.wp-site-blocks > * + * {
	margin-block-start: 0 !important;
}


/* ── Global section padding via theme setting ── */
.forme-section {
	--forme-container-pl: var(--forme-section-pad-x, 96px) !important;
	--forme-container-pr: var(--forme-section-pad-x, 96px) !important;
	padding-inline-start: var(--forme-section-pad-x, 96px) !important;
	padding-inline-end:   var(--forme-section-pad-x, 96px) !important;
}

/* ================================================================
   Attic Place — mock-2 visual polish
   ================================================================ */

/* ── Eyebrow gold line (matches mock-2 .sec-eyebrow::before) ── */
.attic-eyebrow {
	display: flex !important;
	align-items: center !important;
	gap: 0.75rem !important;
}
.attic-eyebrow::before {
	content: '';
	display: inline-block;
	width: 24px;
	height: 1px;
	background: currentColor;
	flex-shrink: 0;
}

/* ── Section headers ── */
.attic-section-header { margin-bottom: 2rem; }
.attic-section-header .attic-eyebrow { margin-bottom: 0.75rem !important; }
/* Right "view all" column: shrink to content, don't grow */
.attic-section-header > .forme-column:last-child { flex: 0 0 auto !important; }

/* ── Category cards ── */
.attic-categories .forme-row { gap: 16px !important; }
.attic-cat-card { border-radius: 4px; overflow: hidden; }
.attic-cat-card .wp-block-cover__inner-container,
.attic-cat-card .attic-cat-card__inner {
    display: flex !important; flex-direction: column !important;
    justify-content: flex-end !important; align-items: flex-start !important;
    padding: 1.75rem !important; height: 100% !important; gap: 0 !important;
}
.attic-cat-card .wp-block-heading { margin-top: 0.4rem !important; margin-bottom: 0.75rem !important; }

/* ── Product grid: gap between cards ── */
.attic-product-strip .wc-block-grid__products { gap: 16px !important; }
.attic-product-strip .wc-block-grid__product { margin: 0 !important; }

/* ── Promise band: center column content ── */
.attic-promise-band .forme-column { text-align: center; }
.attic-promise-band .forme-icon { display: flex; justify-content: center; margin-bottom: 0.75rem; width: 100%; }

/* ── Newsletter: centered layout ── */
.attic-newsletter .forme-container__inner { max-width: 600px; text-align: center; }
.attic-newsletter__eyebrow.attic-eyebrow { justify-content: center; }
.attic-newsletter__form.wp-block-search { margin-inline: auto; }
.attic-newsletter__form .wp-block-search__inside-wrapper { width: 100%; }

/* ── Buttons — asymmetric radius matching mock-2 ── */
.wp-element-button,
.wp-block-button__link {
	border-radius: 0 0 10px 0 !important;
}

/* ── Hero left panel — ensure padding resolves correctly ── */
/* Fallback in case --wp--custom--spacing--3xl alias hasn't loaded yet */
.forme-column > .forme-container {
	height: 100%;
	min-height: 100%;
}

/* ── Category cards — gradient overlay from mock-2 ── */
.attic-cat-card .wp-block-cover__background {
	background: linear-gradient(to top, rgba(42,31,15,0.85) 0%, rgba(42,31,15,0.1) 50%, transparent 100%) !important;
}

/* ── Eyebrow line on section headings ── */
.attic-categories .wp-block-heading em,
.attic-newsletter .wp-block-heading em,
.attic-editorial .wp-block-heading em {
	font-style: italic;
	color: var(--wp--preset--color--primary-accent);
}

/* ── Product strip — circular Add to Cart button matching mock-2 ── */
.attic-product-strip .wc-block-grid__product-add-to-cart .wp-block-button__link {
	width: 32px !important;
	height: 32px !important;
	border-radius: 50% !important;
	background: var(--wp--preset--color--rich-black) !important;
	padding: 0 !important;
	font-size: 0 !important;
	min-width: unset !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border: none !important;
	position: relative !important;
	transition: background 0.2s !important;
}
.attic-product-strip .wc-block-grid__product-add-to-cart .wp-block-button__link:hover {
	background: var(--wp--preset--color--gold-mid) !important;
}
/* CSS + cross icon */
.attic-product-strip .wc-block-grid__product-add-to-cart .wp-block-button__link::before,
.attic-product-strip .wc-block-grid__product-add-to-cart .wp-block-button__link::after {
	content: '';
	position: absolute;
	background: var(--wp--preset--color--gold-pale);
}
.attic-product-strip .wc-block-grid__product-add-to-cart .wp-block-button__link::before {
	width: 1.5px;
	height: 11px;
}
.attic-product-strip .wc-block-grid__product-add-to-cart .wp-block-button__link::after {
	width: 11px;
	height: 1.5px;
}

/* ── Category cards — shop link arrow nudge on hover ── */
.attic-cat-card .attic-cat-link {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.attic-cat-card .attic-cat-link::after {
	content: '→';
	transition: margin-left 0.2s;
}
.attic-cat-card:hover .attic-cat-link::after {
	margin-left: 4px;
}

/* Store notice colors are set via Appearance → Forme Settings → WooCommerce */

/* ── FAQ page ─────────────────────────────────────────────────────────────── */
.attic-faq-hero .forme-heading {
	color: var(--wp--preset--color--off-white);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(2rem, 4vw, 3.5rem);
	line-height: 1.15;
}
.attic-faq-label {
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
.attic-faq-section-label {
	color: var(--wp--preset--color--gold-mid);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin-bottom: 1.25rem;
}
.attic-faq-body .forme-accordion-item__trigger {
	padding-top: 1.1rem;
	padding-bottom: 1.1rem;
}

/* =============================================================
   Inner page hero (dark band at top of informational pages)
   ============================================================= */

.attic-page-hero {
	text-align: center;
}
.attic-page-hero .forme-heading,
.attic-page-hero__title {
	color: var(--wp--preset--color--gold-pale, #EAD89A);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.75rem, 3.5vw, 3rem);
	line-height: 1.2;
	margin-bottom: 0.75rem;
}
.attic-page-hero__sub {
	color: rgba(253, 250, 244, 0.65);
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	max-width: 48ch;
	margin-inline: auto;
}

/* =============================================================
   Newsletter section
   ============================================================= */

.attic-newsletter .forme-container__inner {
	max-width: 640px;
	text-align: left;
}
.attic-newsletter__eyebrow {
	text-align: left !important;
}
.attic-newsletter__form.wp-block-search {
	display: flex;
	gap: 0;
	max-width: 520px;
	margin-inline: auto;
}
.attic-newsletter__form .wp-block-search__input {
	flex: 1 1 auto;
	background-color: #FDFAF4 !important;
	color: #2A1F0F !important;
	border: 1px solid rgba(42,31,15,0.25) !important;
	border-right: none !important;
	border-radius: 0 !important;
	padding: 0.85rem 1.1rem !important;
	font-size: 0.88rem !important;
	outline: none !important;
}
.attic-newsletter__form .wp-block-search__input::placeholder {
	color: rgba(42,31,15,0.4) !important;
}
.attic-newsletter__form .wp-block-search__button {
	background-color: #2A1F0F !important;
	color: #EAD89A !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0.85rem 1.6rem !important;
	font-size: 0.65rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
	white-space: nowrap !important;
}
.attic-newsletter__form .wp-block-search__button:hover {
	background-color: #3D2E18 !important;
}

/* ── Hero badge overlay ───────────────────────────────────────────────────── */
.attic-hero-badge {
	position: absolute;
	bottom: 1.75rem;
	left: 1.75rem;
	background: rgba(42, 31, 15, 0.82);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(234, 216, 154, 0.3);
	padding: 0.9rem 1.25rem;
	min-width: 200px;
}
.attic-hero-badge__label {
	font-size: 0.55rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #EAD89A;
	margin: 0 0 0.35rem;
}
.attic-hero-badge__title {
	font-size: 0.88rem;
	color: rgba(253, 250, 244, 0.9);
	margin: 0;
	font-style: italic;
}
/* Make cover position:relative so badge positions correctly */
.attic-hero .wp-block-cover {
	position: relative;
}

/* ── Product Slider Cards ─────────────────────────────────────────────────── */
.attic-product-strip .forme-slider {
	padding-bottom: 0.5rem;
}
.attic-product-strip .forme-slider__viewport {
	overflow: hidden;
}
.attic-product-strip .forme-slide {
	width: 280px;
	flex-shrink: 0;
}
.attic-product-card {
	width: 280px;
	background: #fff;
	border: 1px solid rgba(42, 31, 15, 0.08);
	overflow: hidden;
}
.attic-product-card__media {
	display: block;
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}
.attic-product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
	display: block;
}
.attic-product-card:hover .attic-product-card__media img {
	transform: scale(1.04);
}
.attic-product-card__badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	background: #B8962E;
	color: #fff;
	font-size: 0.5rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 0.25rem 0.6rem;
}
.attic-product-card__body {
	padding: 1rem 1.1rem 1.1rem;
}
.attic-product-card__brand {
	font-size: 0.55rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #B8962E;
	margin: 0 0 0.3rem;
}
.attic-product-card__name {
	font-size: 0.8rem;
	font-weight: 400;
	color: #2A1F0F;
	margin: 0 0 0.85rem;
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.attic-product-card__name a {
	color: inherit;
	text-decoration: none;
}
.attic-product-card__name a:hover { text-decoration: underline; }
.attic-product-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}
.attic-product-card__price {
	font-size: 0.82rem;
	color: #2A1F0F;
	margin: 0;
}
.attic-product-card__price--reg {
	color: rgba(42, 31, 15, 0.45);
	font-size: 0.75rem;
	margin-right: 0.35rem;
}
.attic-product-card__price--sale {
	color: #B8962E;
	font-weight: 600;
}
.attic-product-card__add {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: #2A1F0F;
	color: #EAD89A;
	font-size: 1.2rem;
	font-weight: 300;
	line-height: 1;
	text-decoration: none;
	flex-shrink: 0;
	transition: background 0.2s;
}
.attic-product-card__add:hover { background: #3D2E18; }

/* Slider arrows styling for product strip */
.attic-product-strip .forme-slider__controls {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.5rem;
	padding-top: 1.25rem;
}
.attic-product-strip .forme-slider__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: #2A1F0F;
	color: #EAD89A;
	border: none;
	cursor: pointer;
	transition: background 0.2s;
}
.attic-product-strip .forme-slider__arrow:hover { background: #3D2E18; }
.attic-product-strip .forme-slider__dots { display: none; }

/* ── Editorial section ────────────────────────────────────────────────────── */
.attic-editorial .wp-block-cover {
	height: 100%;
}
.attic-editorial__content {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.attic-expert-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.55rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #2A1F0F;
	background: rgba(234, 216, 154, 0.35);
	border: 1px solid rgba(184, 150, 46, 0.4);
	padding: 0.4rem 0.85rem;
}
.attic-expert-dot {
	color: #B8962E;
	font-size: 0.6rem;
}

/* ── Slider: remove outline on arrows ────────────────────────────────────── */
.forme-slider__arrow:focus { outline: none; }

/* ── Editorial section ── image cover fills column height ────────────────── */
.attic-editorial > .wp-block-forme-row { min-height: 580px; }

/* Left column: flex so cover can grow to fill full height */
.attic-editorial .forme-column:first-child {
	display: flex !important;
	flex-direction: column !important;
	align-self: stretch !important;
	padding: 0 !important;
}
.attic-editorial .forme-column:first-child .wp-block-cover {
	flex: 1 1 auto !important;
	min-height: 500px !important;
}

/* Right column: also stretch to fill row height */
.attic-editorial .forme-column:last-child {
	align-self: stretch !important;
	display: flex !important;
	flex-direction: column !important;
}
.attic-editorial .forme-column:last-child > .forme-container {
	flex: 1 1 auto;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
}
.attic-editorial__content.forme-container {
	background-color: #FDFAF4 !important;
}

/* Caption: inner container fills cover, caption flows to bottom */
.attic-editorial .wp-block-cover__inner-container {
	position: absolute !important;
	inset: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-end !important;
	align-items: flex-start !important;
	padding: 0 !important;
	width: auto !important;
}
.attic-editorial__caption {
	position: static !important;
	width: 100%;
	padding: 2rem;
	background: linear-gradient(to top, rgba(10,5,0,0.85) 0%, rgba(10,5,0,0.3) 50%, transparent 100%);
}
.attic-editorial__caption-label {
	font-size: 0.5rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #EAD89A;
	margin: 0 0 0.4rem;
}
.attic-editorial__caption-text {
	font-size: 1.05rem;
	font-style: italic;
	font-weight: 400;
	color: rgba(253, 250, 244, 0.92);
	margin: 0;
	line-height: 1.4;
}

/* ── Hero left column: pattern fills entire column ──────────────────────── */
/* Target only the direct first column of the outer hero row, not nested stat columns */
.attic-hero > .forme-container__inner > .forme-row > .forme-column:first-child {
	background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23B8962E' fill-opacity='0.07'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	background-repeat: repeat;
}
/* Stats sub-columns must stay transparent so parent pattern shows through */
.attic-hero__stats .forme-column {
	background-image: none !important;
}
/* ── Hero stats row ────────────────────────────────────────────────────────── */
.attic-hero__stats {
	margin-top: 2.5rem;
	padding: 1.75rem 0;
	border-top: 1px solid rgba(184, 150, 46, 0.18);
}
/* Stat separators: hide the hr, use column border-right instead */
.attic-hero__stats .wp-block-separator {
	display: none !important;
}
.attic-hero__stats .forme-column:not(:last-child) {
	border-right: 1px solid rgba(184, 150, 46, 0.22);
	padding-right: 2rem;
	margin-right: 0.5rem;
}

/* ── Hero row: cap total height ──────────────────────────────────────────── */
.attic-hero .forme-row {
	max-height: min(88vh, 820px);
}

/* ── Hero: right column fills full hero row height ────────────────────────── */
.attic-hero .forme-column:last-child {
	display: flex !important;
	flex-direction: column !important;
	align-self: stretch !important;
	padding: 0 !important;
}
.attic-hero .forme-column:last-child .wp-block-cover {
	flex: 1 1 auto !important;
	min-height: 0 !important;
	max-height: none !important;
	overflow: hidden;
}
/* Badge: bottom-left of the cover (inner container fills cover height) */
.attic-hero .wp-block-cover__inner-container {
	position: absolute !important;
	inset: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-end !important;
	align-items: flex-start !important;
	padding: 0 !important;
	width: auto !important;
}
.attic-hero-badge {
	position: static !important;
	margin: 1.75rem;
}


/* ═══════════════════════════════════════════════════════════════════════════
   MEGA MENU
   ═══════════════════════════════════════════════════════════════════════════ */

.attic-mega {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s ease;
}
.attic-mega.is-open {
	opacity: 1;
	pointer-events: all;
}

/* Backdrop */
.attic-mega__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(42, 31, 15, 0.35);
	backdrop-filter: blur(2px);
}

/* Panel — sits below the header */
.attic-mega__panel {
	position: absolute;
	top: var(--attic-header-h, 130px);
	left: 0;
	right: 0;
	background: #FDFAF4;
	border-top: 2px solid #B8962E;
	box-shadow: 0 12px 40px rgba(42, 31, 15, 0.14);
	transform: translateY(-8px);
	transition: transform 0.22s ease;
}
.attic-mega.is-open .attic-mega__panel {
	transform: translateY(0);
}

/* Inner: 4 link cols + 2 featured product cols */
.attic-mega__inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr) 200px 200px;
	gap: 0;
	max-width: 1280px;
	margin: 0 auto;
	padding: 2.5rem 2rem 2rem;
}

/* Link columns */
.attic-mega__col {
	padding: 0 1.5rem 1rem 0;
}
.attic-mega__col:not(:last-of-type) {
	border-right: 1px solid rgba(184, 150, 46, 0.15);
	margin-right: 1.5rem;
}
.attic-mega__heading {
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #B8962E;
	margin: 0 0 1rem;
}
.attic-mega__links {
	list-style: none;
	margin: 0;
	padding: 0;
}
.attic-mega__links li {
	margin-bottom: 0.55rem;
}
.attic-mega__links a {
	font-size: 0.82rem;
	color: #3D2E18;
	text-decoration: none;
	transition: color 0.15s;
}
.attic-mega__links a:hover { color: #B8962E; }
.attic-mega__see-all {
	font-size: 0.7rem !important;
	color: #B8962E !important;
	font-weight: 600;
	margin-top: 0.5rem;
	display: inline-block;
}

/* Featured product columns */
.attic-mega__featured {
	padding-left: 1.25rem;
	border-left: 1px solid rgba(184, 150, 46, 0.15);
}
.attic-mega__featured + .attic-mega__featured {
	margin-left: 1rem;
}
.attic-mega__featured-img {
	display: block;
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #E8E2D8;
}
.attic-mega__featured-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
	display: block;
}
.attic-mega__featured:hover .attic-mega__featured-img img { transform: scale(1.05); }
.attic-mega__featured-tag {
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	background: #B8962E;
	color: #fff;
	font-size: 0.48rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 0.2rem 0.5rem;
}
.attic-mega__featured-body {
	padding: 0.7rem 0 0;
}
.attic-mega__featured-brand {
	font-size: 0.52rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #B8962E;
	margin: 0 0 0.2rem;
}
.attic-mega__featured-name {
	font-size: 0.75rem;
	color: #2A1F0F;
	margin: 0 0 0.3rem;
	line-height: 1.35;
}
.attic-mega__featured-price {
	font-size: 0.75rem;
	color: #2A1F0F;
	margin: 0 0 0.5rem;
}
.attic-mega__featured-price s { color: rgba(42,31,15,0.4); margin-right: 0.3rem; }
.attic-mega__featured-price strong { color: #B8962E; }
.attic-mega__featured-cta {
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #2A1F0F;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
}
.attic-mega__featured-cta:hover { color: #B8962E; }

/* Bottom bar */
.attic-mega__bar {
	border-top: 1px solid rgba(184, 150, 46, 0.15);
	background: #F7F3EA;
	display: flex;
	gap: 0;
	padding: 0 2rem;
	max-width: 100%;
}
.attic-mega__bar-link {
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #5C4A32;
	text-decoration: none;
	padding: 0.85rem 2rem;
	border-right: 1px solid rgba(184, 150, 46, 0.12);
	transition: color 0.15s, background 0.15s;
}
.attic-mega__bar-link:first-child { border-left: 1px solid rgba(184, 150, 46, 0.12); }
.attic-mega__bar-link:hover { color: #B8962E; background: rgba(184,150,46,0.05); }

/* Highlight the Shop nav item when mega is open */
.attic-nav-shop-trigger > a,
.wp-block-navigation-item.attic-nav-shop-trigger > .wp-block-navigation-item__content {
	position: relative;
}
.attic-mega.is-open ~ * .attic-nav-shop-trigger > a,
.attic-nav-shop-trigger > a:after {
	content: '';
}

/* Detect header height and set CSS var */

/* ── Hero slider: fill full column height, overlay arrows ────────────────── */
.attic-hero .forme-column:last-child {
	position: relative;
}
.attic-hero .forme-column:last-child .forme-slider {
	flex: 1 1 auto !important;
	height: 100% !important;
	min-height: 0 !important;
	display: flex !important;
	flex-direction: column !important;
}
.attic-hero .forme-column:last-child .forme-slider__viewport {
	flex: 1 1 auto;
	height: 100%;
	min-height: 0;
	overflow: hidden;
}
.attic-hero .forme-column:last-child .forme-slider__container {
	height: 100%;
}
.attic-hero .forme-column:last-child .forme-slide {
	height: 100%;
}
.attic-hero-slide-link {
	display: block;
	height: 100%;
	width: 100%;
	line-height: 0;
}
.attic-hero-slide-link img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Hero slider arrows: overlay on image sides */
.attic-hero .forme-slider__controls {
	position: absolute !important;
	bottom: 1.5rem !important;
	right: 1.5rem !important;
	display: flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
}
.attic-hero .forme-slider__arrow {
	width: 36px !important;
	height: 36px !important;
	background: rgba(42, 31, 15, 0.7) !important;
	border: 1px solid rgba(234, 216, 154, 0.35) !important;
	color: #EAD89A !important;
	border-radius: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	transition: background 0.2s !important;
	backdrop-filter: blur(4px);
}
.attic-hero .forme-slider__arrow:hover {
	background: rgba(42, 31, 15, 0.92) !important;
}
.attic-hero .forme-slider__dots {
	display: none !important;
}

/* Hero badge: anchored to bottom-left of slider column */
.attic-hero .forme-column:last-child .attic-hero-badge {
	position: absolute !important;
	bottom: 1.75rem !important;
	left: 1.75rem !important;
	margin: 0 !important;
	z-index: 10;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SINGLE PRODUCT — ACCORDION TABS
   Converts WooCommerce product tabs into a clean brand-styled accordion
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hide the default tab navigation list */
.wp-block-woocommerce-product-details .woocommerce-tabs ul.tabs.wc-tabs,
.woocommerce-tabs ul.tabs.wc-tabs {
	display: none !important;
}

/* Container */
.wp-block-woocommerce-product-details .woocommerce-tabs,
.woocommerce-tabs.wc-tabs-wrapper {
	border: none !important;
	background: none !important;
	margin-top: 1.5rem !important;
}

/* Each tab panel = one accordion item */
.wp-block-woocommerce-product-details .wc-tab,
.woocommerce-tabs .wc-tab {
	display: block !important;
	padding: 0 !important;
	border: none !important;
	border-top: 1px solid rgba(42, 31, 15, 0.12) !important;
	background: transparent !important;
}
.wp-block-woocommerce-product-details .wc-tab:last-child,
.woocommerce-tabs .wc-tab:last-child {
	border-bottom: 1px solid rgba(42, 31, 15, 0.12) !important;
}

/* Injected accordion header (by JS below) */
.attic-accordion-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.1rem 0;
	cursor: pointer;
	user-select: none;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #2A1F0F;
	background: none;
	border: none;
	width: 100%;
	text-align: left;
	transition: color 0.2s;
}
.attic-accordion-header:hover { color: #B8962E; }
.attic-accordion-header.is-open { color: #B8962E; }

/* Plus / minus icon */
.attic-accordion-icon {
	display: inline-block;
	width: 16px;
	height: 16px;
	position: relative;
	flex-shrink: 0;
	margin-left: 1rem;
}
.attic-accordion-icon::before,
.attic-accordion-icon::after {
	content: '';
	position: absolute;
	background: currentColor;
	border-radius: 1px;
	transition: transform 0.25s ease, opacity 0.2s;
}
.attic-accordion-icon::before {
	width: 12px;
	height: 1.5px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.attic-accordion-icon::after {
	width: 1.5px;
	height: 12px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
/* Minus state when open */
.attic-accordion-header.is-open .attic-accordion-icon::after {
	transform: translate(-50%, -50%) scaleY(0);
	opacity: 0;
}

/* Accordion body */
.attic-accordion-body {
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.35s ease, padding 0.25s ease;
	padding-bottom: 0;
}
.attic-accordion-body.is-open {
	max-height: 2000px;
	padding-bottom: 1.5rem;
}

/* Style content inside panels */
.attic-accordion-body table.shop_attributes {
	width: 100%;
	border-collapse: collapse;
}
.attic-accordion-body table.shop_attributes th,
.attic-accordion-body table.shop_attributes td {
	padding: 0.6rem 0;
	font-size: 0.82rem;
	border-top: 1px solid rgba(42, 31, 15, 0.07);
	color: #3D2E18;
	vertical-align: top;
}
.attic-accordion-body table.shop_attributes th {
	font-weight: 600;
	color: #2A1F0F;
	width: 38%;
}
.attic-accordion-body p {
	font-size: 0.88rem;
	line-height: 1.75;
	color: #3D2E18;
	margin: 0 0 0.75rem;
}
.attic-accordion-body p:last-child { margin-bottom: 0; }

/* First tab (Description) open by default */
.wc-tab:first-of-type .attic-accordion-header { color: #B8962E; }

/* ═══════════════════════════════════════════════════════════════════════════
   SHOP PAGE — PAGINATION SPACING
   ═══════════════════════════════════════════════════════════════════════════ */

.woocommerce-pagination,
.wc-block-pagination,
nav.woocommerce-pagination {
	margin-top: 3rem !important;
	margin-bottom: 4rem !important;
	padding-bottom: 2rem !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SINGLE PRODUCT PAGE — TYPOGRAPHY & LAYOUT
   ═══════════════════════════════════════════════════════════════════════════ */

/* Product title — Fraunces, large and readable */
.single-product .wp-block-post-title,
.woocommerce div.product .product_title,
.woocommerce div.product h1.product_title {
	font-family: 'Fraunces', Georgia, serif !important;
	font-size: clamp(1.6rem, 3vw, 2.4rem) !important;
	font-weight: 400 !important;
	font-style: italic !important;
	line-height: 1.2 !important;
	color: #2A1F0F !important;
	margin-bottom: 1rem !important;
}

/* Price — prominent gold */
.woocommerce div.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: 'Fraunces', Georgia, serif !important;
	font-size: 1.6rem !important;
	font-weight: 600 !important;
	color: #2A1F0F !important;
	margin-bottom: 1.25rem !important;
}
.woocommerce div.product .price del {
	font-size: 1rem !important;
	color: #9A8872 !important;
	opacity: 0.7 !important;
}
.woocommerce div.product .price ins {
	text-decoration: none !important;
}

/* Description excerpt */
.woocommerce div.product .woocommerce-product-details__short-description,
.woocommerce div.product div.summary .woocommerce-product-details__short-description p,
.wp-block-woocommerce-product-summary p {
	font-family: 'Fraunces', Georgia, serif !important;
	font-size: 0.92rem !important;
	line-height: 1.75 !important;
	color: #5C4A32 !important;
	margin-bottom: 1.5rem !important;
}

/* SKU & meta */
.woocommerce div.product .product_meta,
.woocommerce div.product .sku_wrapper,
.woocommerce div.product .woocommerce-product-attributes {
	font-size: 0.78rem !important;
	color: #9A8872 !important;
	letter-spacing: 0.04em !important;
}

/* Add to Cart button */
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce #respond input#submit,
.wc-block-components-product-add-to-cart button {
	background: #2A1F0F !important;
	color: #EAD89A !important;
	border: none !important;
	border-radius: 0 !important;
	font-family: inherit !important;
	font-size: 0.72rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	padding: 0.85rem 2.5rem !important;
	cursor: pointer !important;
	transition: background 0.2s !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover {
	background: #B8962E !important;
}

/* Breadcrumbs */
.woocommerce .woocommerce-breadcrumb {
	font-size: 0.72rem !important;
	color: #9A8872 !important;
	letter-spacing: 0.06em !important;
	margin-bottom: 1.5rem !important;
}
.woocommerce .woocommerce-breadcrumb a { color: #9A8872 !important; }
.woocommerce .woocommerce-breadcrumb a:hover { color: #B8962E !important; }

/* ── Related products: bottom row, evenly spaced ──────────────────────── */
.woocommerce div.product section.related.products,
.wp-block-woocommerce-related-products,
.wc-block-related-products {
	margin-top: 5rem !important;
	padding-top: 3rem !important;
	border-top: 1px solid rgba(42, 31, 15, 0.1) !important;
	clear: both !important;
}
.woocommerce div.product .related h2,
.wp-block-woocommerce-related-products h2 {
	font-family: 'Fraunces', Georgia, serif !important;
	font-size: 1rem !important;
	font-weight: 400 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	color: #2A1F0F !important;
	margin-bottom: 2rem !important;
}
.woocommerce ul.products,
.woocommerce .related ul.products {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
	gap: 2rem !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
.woocommerce ul.products li.product {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: 'Fraunces', Georgia, serif !important;
	font-size: 0.88rem !important;
	font-weight: 400 !important;
	color: #2A1F0F !important;
	line-height: 1.4 !important;
}
.woocommerce ul.products li.product .price {
	color: #B8962E !important;
	font-size: 0.9rem !important;
	font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER — faint bottom border to separate from page content
   ═══════════════════════════════════════════════════════════════════════════ */

header.wp-block-template-part:has(.forme-header) {
	border-bottom: 1px solid rgba(42, 31, 15, 0.1) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RELATED PRODUCTS — large image cards, evenly spaced (override previous)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Section heading */
.woocommerce div.product .related > h2,
.woocommerce .related > h2 {
	font-family: 'Fraunces', Georgia, serif !important;
	font-size: clamp(1.4rem, 2.5vw, 1.9rem) !important;
	font-weight: 400 !important;
	font-style: italic !important;
	color: #2A1F0F !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	margin-bottom: 2rem !important;
}

/* 4-column grid */
.woocommerce .related ul.products,
.woocommerce ul.products.columns-4 {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 2rem !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Individual product card */
.woocommerce .related ul.products li.product,
.woocommerce ul.products li.product {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
}

/* Product image — square crop, full width */
.woocommerce ul.products li.product a img {
	width: 100% !important;
	aspect-ratio: 3 / 4 !important;
	object-fit: cover !important;
	display: block !important;
	margin-bottom: 0.85rem !important;
}

/* Product title */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: 'Fraunces', Georgia, serif !important;
	font-size: 0.88rem !important;
	font-weight: 400 !important;
	font-style: italic !important;
	color: #2A1F0F !important;
	line-height: 1.35 !important;
	margin-bottom: 0.35rem !important;
}

/* Price */
.woocommerce ul.products li.product .price {
	font-family: inherit !important;
	font-size: 0.82rem !important;
	color: #5C4A32 !important;
	font-weight: 500 !important;
}
.woocommerce ul.products li.product .price del {
	color: #9A8872 !important;
	opacity: 0.8 !important;
}
.woocommerce ul.products li.product .price ins {
	text-decoration: none !important;
	color: #B8962E !important;
}

/* Add to cart link on cards */
.woocommerce ul.products li.product .button {
	display: none !important;
}

/* ── Hero pattern: make inner container transparent so column pattern shows ── */
.attic-hero > .forme-container__inner > .forme-row > .forme-column:first-child > .forme-container {
	background-color: transparent !important;
}

/* ── Sticky header: also apply to WC's outer div wrapper ────────────────── */
body.forme-header-behavior--sticky div.wp-block-template-part:has(.forme-header) {
	position: sticky !important;
	top: 0 !important;
	z-index: 200 !important;
}

/* ── Product page: breadcrumb spacing below header ──────────────────────── */
.woocommerce .woocommerce-breadcrumb,
.woocommerce-breadcrumb,
.wp-block-woocommerce-breadcrumbs {
	padding-top: 1.5rem !important;
	padding-bottom: 0.5rem !important;
}

/* ── Product details accordion: inside summary column ───────────────────── */
.wp-block-column .wp-block-woocommerce-product-details {
	margin-top: 1.75rem !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRE-FOOTER INSTALMENT BAR
   ═══════════════════════════════════════════════════════════════════════════ */

.attic-prefooter {
	background: #EDEAE4;
	border-top: 1px solid rgba(42, 31, 15, 0.08);
	border-bottom: 1px solid rgba(42, 31, 15, 0.08);
}
.attic-prefooter__inner {
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
	max-width: var(--wp--style--global--content-size, 1200px);
	margin: 0 auto;
	padding: 1.25rem var(--wp--custom--spacing--xl, 2rem);
}
.attic-prefooter__icon {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	color: #2A1F0F;
	opacity: 0.5;
	margin-top: 2px;
}
.attic-prefooter__text {
	font-size: 0.82rem;
	line-height: 1.65;
	color: #5C4A32;
	margin: 0;
}
.attic-prefooter__text strong {
	color: #2A1F0F;
	font-weight: 600;
}

/* ── Related products: hide WC's own heading, use our "You May Also Like" ── */
.attic-related-products .woocommerce-loop-product__title + *,
.attic-related-products h2:not(.attic-related-title) {
	display: none !important;
}
/* Hide WC's related products section heading (rendered inside pattern) */
.woocommerce div.product .related > h2:not(.attic-related-title),
.wp-block-woocommerce-related-products h2:not(.attic-related-title) {
	display: none !important;
}
/* Border separator above related section */
.attic-related-products {
	border-top: 1px solid rgba(42, 31, 15, 0.1) !important;
}

/* ── Footer: white logo + SVG social icon sizing ────────────────────────── */
.attic-footer .wp-block-site-logo img,
.attic-footer-logo img {
	filter: brightness(0) invert(1) !important;
}
.attic-footer__social-icon svg {
	display: block;
	width: 15px;
	height: 15px;
}

/* ── Shop: toolbar ────────────────────────────────────────────────────────── */
.attic-shop-toolbar {
	border-bottom: 1px solid rgba(42, 31, 15, 0.08);
}
.attic-filter-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	background: transparent;
	border: 1px solid rgba(42, 31, 15, 0.2);
	border-radius: 2px;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: #2A1F0F;
	cursor: pointer;
	transition: border-color 0.2s, color 0.2s;
}
.attic-filter-toggle:hover,
.attic-filter-toggle[aria-expanded="true"] {
	border-color: #B8962E;
	color: #B8962E;
}
.woocommerce-result-count {
	font-size: 0.72rem !important;
	color: rgba(42, 31, 15, 0.5) !important;
	margin: 0 !important;
}

/* ── Shop: sidebar + products layout ────────────────────────────────────── */
.attic-shop-layout {
	align-items: flex-start !important;
}
.attic-shop-sidebar {
	flex-shrink: 0;
	transition: opacity 0.25s ease, max-width 0.3s ease, margin 0.3s ease;
	overflow: hidden;
}
/* Collapsed state: zero width, invisible */
.attic-shop-layout.sidebar-collapsed .attic-shop-sidebar {
	max-width: 0 !important;
	flex-basis: 0 !important;
	opacity: 0;
	pointer-events: none;
	margin-right: 0 !important;
}
.attic-shop-layout.sidebar-collapsed .attic-shop-products {
	flex-basis: 100% !important;
	max-width: 100%;
}

/* ── Sidebar inner ───────────────────────────────────────────────────────── */
.attic-sidebar-inner {
	padding-right: 2rem;
	border-right: 1px solid rgba(42, 31, 15, 0.08);
	min-width: 200px;
}
.attic-sidebar-close-row {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 1.5rem;
	display: none; /* hidden on desktop, shown on mobile */
}
.attic-sidebar-close {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: none;
	border: none;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(42, 31, 15, 0.5);
	cursor: pointer;
}

/* ── FacetWP facet groups ────────────────────────────────────────────────── */
.attic-facet-group {
	margin-bottom: 2rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid rgba(42, 31, 15, 0.08);
}
.attic-facet-label {
	font-size: 0.6rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	color: #2A1F0F !important;
	margin: 0 0 0.85rem !important;
}
/* FacetWP checkboxes */
.facetwp-checkbox {
	font-size: 0.78rem !important;
	color: #5C4A32 !important;
	padding: 0.3rem 0 !important;
}
.facetwp-checkbox.checked {
	color: #B8962E !important;
	font-weight: 600 !important;
}
/* FacetWP slider / range */
.facetwp-slider-reset { color: #B8962E !important; font-size: 0.72rem !important; }
/* FacetWP reset */
.attic-facet-reset { margin-top: 1.5rem; }
.facetwp-reset {
	font-size: 0.65rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	color: rgba(42, 31, 15, 0.45) !important;
	text-decoration: underline !important;
	cursor: pointer !important;
	background: none !important;
	border: none !important;
	padding: 0 !important;
}
.facetwp-reset:hover { color: #B8962E !important; }

/* ── Shop: product grid in sidebar layout ────────────────────────────────── */
.attic-shop-products .wp-block-woocommerce-product-collection {
	min-width: 0;
}

/* ── Mobile: full-screen filter drawer ──────────────────────────────────── */
@media (max-width: 768px) {
	.attic-shop-layout {
		display: block !important;
	}
	.attic-shop-sidebar {
		position: fixed !important;
		top: 0; left: 0;
		width: 85vw !important;
		max-width: 320px !important;
		height: 100dvh;
		background: #FDFAF4;
		z-index: 500;
		overflow-y: auto;
		padding: 1.5rem;
		box-shadow: 4px 0 24px rgba(0,0,0,0.12);
		transform: translateX(-100%);
		transition: transform 0.3s ease;
		border-right: none;
	}
	.attic-shop-sidebar.is-open {
		transform: translateX(0);
	}
	/* Backdrop */
	.attic-shop-sidebar::before {
		content: '';
		position: fixed;
		inset: 0;
		background: rgba(0,0,0,0.35);
		z-index: -1;
		opacity: 0;
		transition: opacity 0.3s;
		pointer-events: none;
	}
	.attic-shop-sidebar.is-open::before { opacity: 1; pointer-events: auto; }

	.attic-shop-layout.sidebar-collapsed .attic-shop-sidebar {
		max-width: 320px !important;
		flex-basis: unset !important;
		opacity: 1;
		pointer-events: auto;
		transform: translateX(-100%);
	}
	.attic-shop-products { width: 100% !important; flex-basis: 100% !important; }
	.attic-sidebar-inner {
		padding-right: 0;
		border-right: none;
		min-width: unset;
	}
	.attic-sidebar-close-row { display: flex; }
}