/*
Theme Name: Femme Mod
Description: Warm Earth, structured boutique theme for WooCommerce. Dropship catalog plus an admin-run Private Sale.
Version: 0.3.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: femmemod
*/

/* 8px spacing scale: 8 16 24 32 48 64 96. 12-column grid. Everything aligns to one left edge. */
:root {
	--bg: #f1e6d8; --panel: #e6d5c0; --ink: #36271f; --muted: #76594a; --line: #cfb89f;
	--trust: #2f4858; --accent: #b0644a;
	--serif: "Playfair Display", Georgia, serif; --sans: "DM Sans", Arial, sans-serif; --script: "Pinyon Script", cursive;
	--s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s6: 48px; --s8: 64px; --s12: 96px;
	--max: 1200px; --gut: clamp(16px, 4vw, 32px);
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 300 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--s3); }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

.label { font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.h-xl { font: 400 clamp(36px, 5vw, 56px)/1.1 var(--serif); text-transform: uppercase; letter-spacing: .02em; }
.h-lg { font: 400 28px/1.2 var(--serif); text-transform: uppercase; letter-spacing: .02em; }
.script { font: 400 30px/1.2 var(--script); color: var(--muted); }
.link { font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; border-bottom: 1px solid var(--ink); padding-bottom: 4px; }

/* Buttons (theme + WooCommerce) */
.btn, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit,
.woocommerce a.button.alt, .woocommerce button.button.alt {
	display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 var(--s4);
	font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
	background: var(--trust); color: #f6efe6; border: 1px solid var(--trust); border-radius: 0; cursor: pointer; transition: .2s;
}
.btn:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background: transparent; color: var(--trust); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--bg); }
.btn--block { width: 100%; }

/* Trust bar + header */
.trustbar { background: var(--trust); color: #efe6da; }
.trustbar .wrap { display: flex; justify-content: space-between; gap: var(--s2); height: 40px; align-items: center; font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.trustbar span:not(:first-child) { display: none; }
@media (min-width: 700px) { .trustbar span:not(:first-child) { display: inline; } }
.header .wrap { display: flex; justify-content: space-between; align-items: center; height: 80px; }
.logo { font: 400 24px/1 var(--serif); letter-spacing: .18em; text-transform: uppercase; }
.nav ul { display: flex; gap: var(--s4); }
.nav a { font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.nav a:hover { border-bottom: 1px solid var(--ink); }

/* Hero */
.hero { padding: var(--s8) 0 var(--s12); }
.hero .grid { align-items: start; row-gap: var(--s6); }
.hero__copy { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: var(--s3); }
.hero__copy .lead { color: var(--muted); max-width: 36ch; }
.hero__cta { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s1); }
.hero__img { grid-column: 7 / span 6; aspect-ratio: 4 / 5; background: var(--panel); overflow: hidden; display: grid; place-items: center; color: var(--muted); font: 400 28px var(--script); }
.hero__img img { width: 100%; height: 100%; object-fit: cover; }

/* At a glance */
.glance { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.glance .wrap { display: grid; grid-template-columns: repeat(3, 1fr); }
.glance__item { padding: var(--s4) var(--s3) var(--s4) 0; display: flex; flex-direction: column; gap: var(--s1); }
.glance__item + .glance__item { padding-left: var(--s3); border-left: 1px solid var(--line); }
.glance__item .n { font: 400 14px/1 var(--serif); color: var(--accent); }
.glance__item h3 { font: 500 12px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.glance__item p { color: var(--muted); font-size: 15px; }

/* Sections */
.section { padding: var(--s8) 0 var(--s4); }
.shead { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s2); padding-bottom: var(--s2); border-bottom: 1px solid var(--line); margin-bottom: var(--s4); }
.shead .label { display: block; margin-bottom: var(--s1); }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s4); }
.chips { display: flex; gap: var(--s1); flex-wrap: wrap; }
.chip { height: 36px; display: inline-flex; align-items: center; padding: 0 var(--s2); border: 1px solid var(--line); font: 500 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.chip.on, .chip:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.count { font-size: 13px; color: var(--muted); }
.note { font-size: 12px; color: var(--muted); margin-top: var(--s3); }

/* Product grid (WooCommerce loop): every card has the same structure so rows align */
ul.products::before, ul.products::after { display: none !important; }
body ul.products.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s6) var(--s3); margin: 0; padding: 0; }
body ul.products.products li.product { width: auto; float: none; margin: 0; position: relative; display: flex; flex-direction: column; }
body ul.products.products li.product a.woocommerce-LoopProduct-link { display: grid; grid-template-columns: 1fr auto; column-gap: var(--s1); align-content: start; flex: 1; }
body ul.products.products li.product img { grid-column: 1 / -1; grid-row: 1; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--panel); margin: 0 0 var(--s2); }
body ul.products.products li.product .woocommerce-loop-product__title { grid-column: 1; grid-row: 2; font: 500 12px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; padding: 0; margin: 0; }
body ul.products.products li.product .price { grid-column: 2; grid-row: 2; align-self: baseline; font-size: 15px; color: var(--ink); white-space: nowrap; }
body ul.products.products li.product .price del { color: var(--muted); margin-right: 6px; font-size: 13px; opacity: 1; }
body ul.products.products li.product .price ins { text-decoration: none; background: none; }
body ul.products.products li.product .star-rating { grid-column: 1 / -1; grid-row: 3; color: var(--accent); font-size: 12px; margin: 4px 0 0; }
body ul.products.products li.product .fm-condition { grid-column: 1 / -1; grid-row: 4; font-size: 13px; color: var(--muted); margin-top: 4px; }
body ul.products.products li.product .button { display: inline-flex; align-items: center; justify-content: center; margin-top: var(--s2); width: 100%; height: 44px; padding: 0; line-height: 1; text-align: center; }
.onsale { display: none !important; }

/* Private Sale: transparent PNGs sit on a soft studio backdrop */
body ul.products.products li.fm-channel-resale img { object-fit: contain !important; padding: 8%; background: radial-gradient(circle at 50% 40%, #f8efe3 0%, var(--panel) 75%) !important; }
body ul.products.products li.fm-status-gone img { opacity: .55; filter: grayscale(.5); }
body ul.products.products li.fm-status-gone .button { background: transparent; color: var(--muted); border-color: var(--line); pointer-events: none; }
.fm-badge { position: absolute; top: var(--s1); left: var(--s1); z-index: 2; height: 24px; display: inline-flex; align-items: center; padding: 0 var(--s1); font: 500 10px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #f6efe6; background: var(--ink); }
.fm-badge--sale { background: var(--accent); }
.fm-badge--clearance { background: #8a5a3c; }
.fm-badge--gone { background: var(--bg); color: var(--ink); border: 1px solid var(--ink); }

/* Confidence block */
.confidence { background: var(--panel); margin-top: var(--s8); padding: var(--s8) 0; }
.confidence .grid { row-gap: var(--s4); align-items: start; }
.confidence__lead { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: var(--s2); }
.confidence__list { grid-column: 7 / span 6; }
.confidence__list li { display: grid; grid-template-columns: 32px 1fr; gap: var(--s2); padding: var(--s2) 0; border-top: 1px solid var(--line); }
.confidence__list li:last-child { border-bottom: 1px solid var(--line); }
.confidence__list b { font: 400 14px/1.6 var(--serif); color: var(--accent); }
.confidence__list strong { display: block; font: 500 12px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.confidence__list span { color: var(--muted); font-size: 15px; }
.pay { display: flex; gap: var(--s1); flex-wrap: wrap; }
.pay span { height: 32px; display: inline-flex; align-items: center; padding: 0 var(--s2); border: 1px solid var(--line); background: var(--bg); font: 500 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* Inner pages (shop, product, cart, checkout, generic) */
.page-main { padding-top: var(--s8); padding-bottom: var(--s8); }
.page-main h1, .woocommerce-products-header__title, .product_title { font: 400 clamp(28px, 4vw, 40px)/1.15 var(--serif); text-transform: uppercase; margin-bottom: var(--s3); }
.woocommerce-breadcrumb { font-size: 12px; color: var(--muted); margin-bottom: var(--s3); }
.woocommerce-result-count, .woocommerce-ordering { margin-bottom: var(--s3); font-size: 13px; color: var(--muted); }
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number], textarea, select {
	font: 300 15px var(--sans); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 0; padding: 12px 14px; max-width: 100%;
}
.woocommerce div.product { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--s3); position: relative; }
.woocommerce div.product div.images { grid-column: 1 / span 6; float: none; width: auto; }
.woocommerce div.product div.summary { grid-column: 8 / span 5; float: none; width: auto; display: flex; flex-direction: column; gap: var(--s2); }
.woocommerce div.product .woocommerce-tabs, .woocommerce div.product .related, .woocommerce div.product .up-sells { grid-column: 1 / -1; margin-top: var(--s6); }
.woocommerce div.product p.price, .woocommerce div.product span.price { font-size: 20px; color: var(--ink); }
.woocommerce div.product p.price del { color: var(--muted); font-size: 16px; }
.woocommerce div.product p.price ins { text-decoration: none; }
.woocommerce-message, .woocommerce-info, .woocommerce-error { border-top: 2px solid var(--trust); background: var(--panel); padding: var(--s2) var(--s3); list-style: none; margin-bottom: var(--s3); }
.woocommerce table.shop_table { border: 1px solid var(--line); border-radius: 0; border-collapse: collapse; }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { border-top: 1px solid var(--line); padding: var(--s2); }
.woocommerce form .form-row label { font-size: 13px; color: var(--muted); }

/* Footer */
.footer { padding: var(--s8) 0 var(--s6); font-size: 14px; color: var(--muted); }
.footer .grid { row-gap: var(--s4); }
.footer .col { grid-column: span 3; }
.footer h4 { margin: 0 0 var(--s2); font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.footer li { padding: 4px 0; }
.footer a:hover { color: var(--ink); text-decoration: underline; }
.legal { border-top: 1px solid var(--line); margin-top: var(--s6); padding-top: var(--s3); font-size: 12px; }

@media (max-width: 900px) {
	.hero__copy, .hero__img, .confidence__lead, .confidence__list { grid-column: 1 / -1; }
	body ul.products.products { grid-template-columns: repeat(2, 1fr); }
	.glance .wrap { grid-template-columns: 1fr; }
	.glance__item, .glance__item + .glance__item { padding: var(--s3) 0; border-left: 0; }
	.glance__item + .glance__item { border-top: 1px solid var(--line); }
	.footer .col { grid-column: span 6; }
	.nav ul { gap: var(--s3); }
	.woocommerce div.product div.images, .woocommerce div.product div.summary { grid-column: 1 / -1; }
}


/* ===== v0.3 luxury pass ===== */
.btn { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn:hover { background: transparent; color: var(--ink); }
.btn--light { background: transparent; color: #efe6da; border-color: #efe6da; }
.btn--light:hover { background: #efe6da; color: var(--ink); }
.link-arrow { font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; border-bottom: 1px solid var(--ink); padding: 0 0 4px; align-self: center; }
.link-arrow::after { content: " \2192"; }

/* Announcement bar */
.announce { display: flex; justify-content: center; align-items: center; gap: var(--s1); height: 40px; background: var(--ink); color: #efe6da; font: 500 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; }
.announce:hover .announce__arrow { transform: translateX(4px); }
.announce__arrow { transition: transform .2s; }
.trustbar { display: none; }

/* Rhythm: more air between sections */
.hero { padding: var(--s12) 0 var(--s12); }
.section { padding: var(--s12) 0 var(--s4); }
.shead { margin-bottom: var(--s6); }
.h-lg { font-size: 32px; letter-spacing: .06em; }
.h-xl { font-size: clamp(44px, 6vw, 72px); line-height: 1.04; letter-spacing: .03em; }
.script { font-size: 34px; }
.hero__copy { gap: var(--s4); }
.hero__img { aspect-ratio: 4 / 5; }
@keyframes fm-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero__copy > * { animation: fm-rise .9s ease both; }
.hero__copy > *:nth-child(2) { animation-delay: .08s; }
.hero__copy > *:nth-child(3) { animation-delay: .16s; }
.hero__copy > *:nth-child(4) { animation-delay: .24s; }
.hero__copy > *:nth-child(5) { animation-delay: .32s; }
@media (prefers-reduced-motion: reduce) { .hero__copy > * { animation: none; } }

/* Category tiles */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.tile { position: relative; aspect-ratio: 4 / 5; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s1); padding: var(--s4); overflow: hidden; transition: filter .4s; }
.tile--a { background: linear-gradient(165deg, #ecdcc6, #d7bd9d); }
.tile--b { background: linear-gradient(165deg, #e4d3be, #c9ad8d); }
.tile--c { background: linear-gradient(165deg, #efe3d2, #dcc6a8); }
.tile::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, rgba(255,250,240,.45), transparent 60%); transition: opacity .4s; }
.tile:hover::before { opacity: .6; }
.tile__label { position: relative; font: 400 28px/1.1 var(--serif); letter-spacing: .06em; text-transform: uppercase; }
.tile__cta { position: relative; font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.tile:hover .tile__cta { color: var(--ink); }

/* Private Sale band */
.band { background: var(--ink); color: #efe6da; margin-top: var(--s12); padding: var(--s12) 0; }
.band .label { color: #bfa992; }
.band__copy { grid-column: 1 / span 7; display: flex; flex-direction: column; gap: var(--s3); }
.band .script { color: #d8bfa3; }
.band .lead { color: #d9cbbb; max-width: 48ch; }

/* The Private List */
.list { padding: var(--s12) 0 var(--s8); border-top: 1px solid var(--line); margin-top: var(--s8); }
.list .grid { align-items: center; row-gap: var(--s4); }
.list__copy { grid-column: 1 / span 6; display: flex; flex-direction: column; gap: var(--s2); }
.list__copy p { color: var(--muted); max-width: 40ch; }
.list__form { grid-column: 8 / span 5; }
.list__form form { display: flex; gap: var(--s1); flex-wrap: wrap; }
.list__form input[type=email], .list__form input[type=text] { flex: 1 1 200px; height: 48px; }
.list__form button, .list__form input[type=submit] { height: 48px; padding: 0 var(--s4); background: var(--ink); color: var(--bg); border: 1px solid var(--ink); font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; cursor: pointer; }

/* Good to know */
.good { background: var(--panel); padding: var(--s8) 0; }
.good .grid { row-gap: var(--s4); align-items: start; }
.good__lead { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: var(--s2); }
.good__list { grid-column: 7 / span 6; }
.good__list li { display: grid; grid-template-columns: 32px 1fr; gap: var(--s2); padding: var(--s2) 0; border-top: 1px solid var(--line); }
.good__list li:last-child { border-bottom: 1px solid var(--line); }
.good__list b { font: 400 14px/1.6 var(--serif); color: var(--accent); }
.good__list strong { display: block; font: 500 12px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.good__list span { color: var(--muted); font-size: 15px; }
.good__list .link { margin-left: var(--s1); white-space: nowrap; }

/* Product page reassurance */
.fm-assure { margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--line); display: grid; gap: var(--s1); font-size: 13px; color: var(--muted); }
.fm-assure li::before { content: "\2713"; color: var(--accent); margin-right: var(--s1); }
.fm-assure a { border-bottom: 1px solid var(--line); }

@media (max-width: 900px) {
	.tiles { grid-template-columns: 1fr; }
	.tile { aspect-ratio: 16 / 9; }
	.band__copy, .list__copy, .list__form, .good__lead, .good__list { grid-column: 1 / -1; }
}

/* Reach signup: match the square-edged system */
.list__form input, .list__form button, .list__form .wp-block-button__link, .list__form [type=submit] { border-radius: 0 !important; }
.list__form form { display: grid; grid-template-columns: 1fr; gap: var(--s2); }
.list__form label { font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }