/* =====================================================================
   SELENITE STORE — Main Stylesheet
   A quiet, editorial luxury system: deep black, warm gold, ivory.
   Display serif (Cormorant Garamond) + clean sans (Manrope).
   ===================================================================== */

/* ---------- Design tokens ---------- */
:root{
	--se-black: #0B0B0B;
	--se-charcoal: #151515;
	--se-gold: #C9A45C;
	--se-gold-soft: rgba(201,164,92,0.14);
	--se-ivory: #F5F1E8;
	--se-white: #FFFFFF;
	--se-line: rgba(255,255,255,0.12);
	--se-line-dark: rgba(11,11,11,0.10);
	--se-text-muted: #6b6660;

	--font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	--container: 1220px;
	--radius: 2px;
	--ease: cubic-bezier(.4,0,.2,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust:100%; }
body{
	margin:0;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.65;
	color: var(--se-black);
	background: var(--se-white);
	-webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; height:auto; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; cursor:pointer; }
input,select,textarea{ font-family: inherit; }

@media (prefers-reduced-motion: reduce){
	*{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

:focus-visible{ outline: 2px solid var(--se-gold); outline-offset: 3px; }

.screen-reader-text{
	position:absolute !important; clip:rect(1px,1px,1px,1px); width:1px; height:1px; overflow:hidden;
}
.skip-link{ position:absolute; left:-9999px; top:0; z-index:999; background:var(--se-black); color:var(--se-white); padding:10px 16px; }
.skip-link:focus{ left:10px; top:10px; }

.container{ max-width: var(--container); margin: 0 auto; padding: 0 24px; }

/* ---------- Typography ---------- */
h1,h2,h3,h4{
	font-family: var(--font-display);
	font-weight: 500;
	letter-spacing: 0.01em;
	line-height: 1.15;
	margin: 0 0 0.5em;
	color: var(--se-black);
}
p{ margin: 0 0 1em; }
.eyebrow{
	display:inline-block;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--se-gold);
	margin-bottom: 14px;
}
.eyebrow--light{ color: var(--se-gold); }

/* ---------- Buttons ---------- */
.btn{
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
	font-family: var(--font-body); font-weight:600; font-size:13px;
	letter-spacing:0.09em; text-transform:uppercase;
	padding: 15px 30px;
	border: 1px solid transparent;
	border-radius: var(--radius);
	transition: all .25s var(--ease);
	white-space: nowrap;
}
.btn--gold{ background: var(--se-gold); color: var(--se-black); }
.btn--gold:hover{ background:#b8924c; transform: translateY(-1px); }
.btn--outline{ background:transparent; border-color: var(--se-black); color: var(--se-black); }
.btn--outline:hover{ background: var(--se-black); color:#fff; }
.btn--outline-light{ background:transparent; border-color: rgba(255,255,255,.6); color:#fff; }
.btn--outline-light:hover{ background: rgba(255,255,255,.12); border-color:#fff; }
.btn--ghost{ background:transparent; border-color: var(--se-line-dark); color: var(--se-black); }
.btn--ghost:hover{ border-color: var(--se-black); }
.btn--whatsapp{ background:#151515; color:#fff; }
.btn--whatsapp:hover{ background:#25D366; color:#0B0B0B; }
.btn--header{ padding:10px 18px; font-size:12px; }
.btn--small{ padding:10px 16px; font-size:11px; flex:1; }
.btn--large{ padding:18px 36px; font-size:13px; }
.btn__icon{ flex-shrink:0; }

/* ---------- Header ---------- */
.site-header{
	position: sticky; top:0; z-index:100;
	background: rgba(255,255,255,0.92);
	backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--se-line-dark);
}
.site-header__inner{
	display:flex; align-items:center; justify-content:space-between;
	height: 88px;
}
.site-branding__text-logo .site-branding__name{
	font-family: var(--font-display); font-size: 26px; font-weight:600; letter-spacing:0.03em;
}
.custom-logo{ max-height: 56px; width:auto; }
.main-navigation .nav-menu{ display:flex; gap:36px; }
.main-navigation .nav-menu a{
	font-size: 13px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
	position:relative; padding: 6px 0;
}
.main-navigation .nav-menu a::after{
	content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--se-gold);
	transform: scaleX(0); transition: transform .25s var(--ease);
}
.main-navigation .nav-menu a:hover::after,
.main-navigation .nav-menu a:focus-visible::after{ transform: scaleX(1); }

.site-header__actions{ display:flex; align-items:center; gap:14px; }
.menu-toggle{
	display:none; flex-direction:column; gap:5px; background:none; border:none; padding:8px;
}
.menu-toggle__bar{ width:22px; height:1.5px; background: var(--se-black); display:block; }

.mobile-menu{
	display:none; position:fixed; inset:0 0 0 auto; width:min(340px,86vw); height:100vh;
	background: var(--se-black); color:#fff; padding: 100px 32px 32px;
	transform: translateX(100%); transition: transform .3s var(--ease); z-index:99;
	overflow-y:auto;
}
.mobile-menu.is-open{ transform: translateX(0); }
.mobile-menu .nav-menu--mobile{ display:flex; flex-direction:column; gap:22px; }
.mobile-menu .nav-menu--mobile a{ font-size:20px; font-family: var(--font-display); }
.mobile-menu__cta{ margin-top:40px; }

@media (max-width: 900px){
	.main-navigation{ display:none; }
	.menu-toggle{ display:flex; }
	.site-header__actions .btn--header{ display:none; }
	@media (min-width: 601px){ .site-header__actions .btn--header{ display:inline-flex; } }
}

/* ---------- Hero ---------- */
.hero{ position:relative; min-height: 88vh; display:flex; align-items:center; color:#fff; overflow:hidden; }
.hero__media{ position:absolute; inset:0; background-size:cover; background-position:center; }
.hero__media--placeholder{
	background: radial-gradient(ellipse at 60% 30%, #1c1a16 0%, var(--se-black) 65%);
	display:flex; align-items:center; justify-content:center;
}
.hero__media--placeholder .moon-motif{ width:min(70vw,760px); opacity:.9; }
.hero__overlay{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(11,11,11,.35) 0%, rgba(11,11,11,.65) 100%); }
.hero--has-image .hero__overlay{ background: linear-gradient(180deg, rgba(11,11,11,.25) 0%, rgba(11,11,11,.72) 100%); }
.hero__content{ position:relative; z-index:2; max-width: 760px; padding-top:60px; padding-bottom:60px; }
.hero__title{ color:#fff; font-size: clamp(2.4rem, 5vw, 4rem); margin-bottom:22px; }
.hero__subtitle{ font-size: 18px; color: rgba(255,255,255,.86); max-width: 560px; margin-bottom: 36px; }
.hero__actions{ display:flex; gap:16px; flex-wrap:wrap; }

/* ---------- Sections ---------- */
.section{ padding: 96px 0; }
.section__head{ text-align:center; max-width:640px; margin:0 auto 56px; }
.section__title{ font-size: clamp(1.8rem, 3vw, 2.6rem); }
.section__subtitle{ color: var(--se-text-muted); font-size:16px; }
.section__cta{ text-align:center; margin-top: 48px; }

/* ---------- Product grid & cards ---------- */
.product-grid{
	display:grid; grid-template-columns: repeat(3, 1fr); gap: 40px 32px;
}
@media (max-width: 980px){ .product-grid{ grid-template-columns: repeat(2,1fr); gap:32px 20px; } }
@media (max-width: 600px){ .product-grid{ grid-template-columns: 1fr; } }

.product-card{ display:flex; flex-direction:column; }
.product-card__media{ position:relative; display:block; aspect-ratio: 4/5; overflow:hidden; background: var(--se-ivory); margin-bottom:20px; }
.product-card__image{ width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.product-card:hover .product-card__image{ transform: scale(1.045); }
.product-card__badge{
	position:absolute; top:14px; left:14px; background: rgba(11,11,11,.85); color:#fff;
	font-size:10px; letter-spacing:.12em; text-transform:uppercase; padding:6px 10px; font-weight:700;
}
.badge--made-to-order{ background: rgba(201,164,92,.92); color:#0B0B0B; }
.badge--limited{ background: rgba(201,164,92,.92); color:#0B0B0B; }
.badge--sold-out{ background: rgba(11,11,11,.6); }
.product-card__title{ font-size:20px; margin-bottom:8px; }
.product-card__title a:hover{ color: var(--se-gold); }
.product-card__excerpt{ font-size:14px; color: var(--se-text-muted); margin-bottom:12px; }
.product-card__meta{ margin-bottom:16px; }
.product-price{ font-family: var(--font-display); font-size:19px; font-weight:600; }
.product-price--on-request{ font-family: var(--font-body); font-size:13px; color: var(--se-text-muted); text-transform:uppercase; letter-spacing:.05em; }
.product-card__actions{ display:flex; gap:10px; margin-top:auto; }

/* Elegant placeholder used when a product has no image yet */
.product-placeholder{
	width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
	background: linear-gradient(160deg, var(--se-charcoal) 0%, #0B0B0B 100%);
	color: var(--se-gold); text-align:center; gap:10px;
}
.product-placeholder__mark{ font-family: var(--font-display); font-size:34px; letter-spacing:.1em; border:1px solid var(--se-gold); border-radius:50%; width:64px; height:64px; display:flex; align-items:center; justify-content:center; }
.product-placeholder__label{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; color: rgba(245,241,232,.65); }

/* ---------- Discover Selenite ---------- */
.discover-selenite{ background: var(--se-ivory); }
.discover-selenite__grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items:center; }
.discover-selenite__media .moon-motif{ width:100%; max-width:420px; margin:0 auto; display:block; }
@media (max-width: 860px){ .discover-selenite__grid{ grid-template-columns:1fr; gap:32px; text-align:center; } .discover-selenite__media .moon-motif{ max-width:260px; } }

/* ---------- Why Selenite ---------- */
.feature-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 28px; }
@media (max-width: 980px){ .feature-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .feature-grid{ grid-template-columns: 1fr; } }
.feature-card{ padding: 34px 26px; border: 1px solid var(--se-line-dark); text-align:center; }
.feature-card h3{ font-size:19px; margin-bottom:10px; }
.feature-card p{ font-size:14px; color: var(--se-text-muted); margin:0; }

/* ---------- CTA band ---------- */
.cta-band{ background: var(--se-black); color:#fff; padding: 72px 0; }
.cta-band__inner{ display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.cta-band h2{ color:#fff; font-size:28px; margin-bottom:6px; }
.cta-band p{ color: rgba(255,255,255,.75); margin:0; }

/* ---------- Empty states ---------- */
.empty-state{ text-align:center; padding: 60px 20px; max-width:520px; margin:0 auto; }
.empty-state p{ color: var(--se-text-muted); font-size:17px; margin-bottom:24px; }

/* ---------- Page header (interior pages) ---------- */
.page-header{ padding: 80px 0 40px; text-align:center; background: var(--se-ivory); }
.page-header__title{ font-size: clamp(2rem,4vw,3rem); }
.page-header__subtitle{ color: var(--se-text-muted); max-width:600px; margin: 0 auto; }

/* ---------- Archive: toolbar, filters, layout ---------- */
.archive-toolbar{ display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:48px; flex-wrap:wrap; }
.archive-search{ display:flex; align-items:center; border:1px solid var(--se-line-dark); max-width:340px; flex:1; }
.archive-search input{ border:none; padding:12px 16px; flex:1; font-size:14px; background:transparent; }
.archive-search input:focus{ outline:none; }
.archive-search button{ background:none; border:none; padding:0 14px; color: var(--se-black); }
.archive-sort{ display:flex; align-items:center; gap:10px; font-size:13px; }
.archive-sort select{ border:1px solid var(--se-line-dark); padding:10px 14px; background:#fff; }

.archive-layout{ display:grid; grid-template-columns: 220px 1fr; gap: 48px; }
@media (max-width: 860px){ .archive-layout{ grid-template-columns: 1fr; } }
.archive-filters__title{ font-size:14px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:18px; }
.archive-filters ul{ display:flex; flex-direction:column; gap:12px; }
.archive-filters a{ font-size:14px; color: var(--se-text-muted); }
.archive-filters li.is-active a,
.archive-filters a:hover{ color: var(--se-black); font-weight:600; }
.archive-filters span{ color: var(--se-text-muted); font-size:12px; }

.pagination{ display:flex; justify-content:center; gap:16px; margin-top:56px; font-size:14px; }
.pagination .page-numbers{ padding:8px 4px; }
.pagination .current{ color: var(--se-gold); font-weight:700; }

/* ---------- Single product ---------- */
.breadcrumbs{ padding: 20px 24px; font-size:13px; color: var(--se-text-muted); display:flex; gap:10px; }
.breadcrumbs a:hover{ color: var(--se-black); }

.product-single{ display:grid; grid-template-columns: 1.1fr 1fr; gap: 64px; padding: 20px 24px 40px; }
@media (max-width: 900px){ .product-single{ grid-template-columns:1fr; gap:32px; } }

.product-single__main-image{ position:relative; aspect-ratio: 4/5; background: var(--se-ivory); overflow:hidden; margin-bottom:16px; }
.product-single__main-image img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition: opacity .35s var(--ease); }
.product-single__main-image img.active{ opacity:1; position:relative; }
.product-single__placeholder{ position:absolute; inset:0; }
.product-single__thumbs{ display:flex; gap:10px; flex-wrap:wrap; }
.thumb{ width:74px; height:74px; padding:0; border:1px solid var(--se-line-dark); background:none; overflow:hidden; opacity:.6; transition: opacity .2s; }
.thumb img{ width:100%; height:100%; object-fit:cover; }
.thumb.is-active,.thumb:hover{ opacity:1; border-color: var(--se-gold); }

.product-single__title{ font-size: clamp(1.9rem,3vw,2.6rem); }
.product-single__excerpt{ font-size:16px; color: var(--se-text-muted); }
.product-single__price-row{ display:flex; align-items:center; gap:16px; margin: 18px 0 28px; }
.product-single__price-row .product-price{ font-size:26px; }
.availability-badge{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:6px 12px; background: var(--se-gold-soft); color:#8a6a2c; font-weight:700; }
.badge--in-stock{ background: rgba(74,124,89,.12); color:#3f6b4c; }
.badge--sold-out{ background: rgba(11,11,11,.08); color:#555; }

.product-specs{ width:100%; border-collapse:collapse; margin: 24px 0; }
.product-specs th,.product-specs td{ text-align:left; padding: 12px 0; border-bottom:1px solid var(--se-line-dark); font-size:14px; }
.product-specs th{ width:160px; color: var(--se-text-muted); font-weight:600; }
.product-single__note{ font-size:13px; color: var(--se-text-muted); font-style:italic; margin-top:10px; }

.product-description{ padding: 40px 24px 20px; border-top:1px solid var(--se-line-dark); }
.product-description__grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 48px; }
@media (max-width: 860px){ .product-description__grid{ grid-template-columns:1fr; } }
.product-description__content{ color: #3a3a3a; }

.related-products{ background: var(--se-ivory); }

/* ---------- About & Contact ---------- */
.about-content__grid{ display:grid; grid-template-columns: 1fr 1.3fr; gap:64px; align-items:center; }
@media (max-width: 860px){ .about-content__grid{ grid-template-columns:1fr; text-align:center; } }
.about-content__media .moon-motif{ width:100%; max-width:320px; margin:0 auto; }
.about-content__text{ font-size:17px; color:#333; }

.contact-content__grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap:28px; margin-bottom:40px; }
.contact-card{ border:1px solid var(--se-line-dark); padding:40px 32px; text-align:center; }
.contact-card h2{ font-size:22px; }
.contact-card__value{ font-family: var(--font-display); font-size:20px; margin: 14px 0 22px; }

.standard-content{ font-size:17px; color:#333; max-width: 760px; margin:0 auto; }
.standard-content img{ margin: 24px 0; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--se-black); color: rgba(255,255,255,.8); }
.site-footer a{ color: rgba(255,255,255,.7); }
.site-footer a:hover{ color: var(--se-gold); }
.site-footer__top{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:40px; padding: 80px 24px 48px; }
@media (max-width: 860px){ .site-footer__top{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .site-footer__top{ grid-template-columns: 1fr; } }
.footer-brand{ font-family: var(--font-display); font-size:24px; color:#fff; display:block; margin-bottom:10px; }
.footer-tagline{ font-size:14px; }
.footer-social{ display:flex; gap:16px; margin-top:16px; font-size:13px; }
.footer-col__title{ color:#fff; font-size:13px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:18px; }
.footer-col ul{ display:flex; flex-direction:column; gap:12px; font-size:14px; }
.site-footer__note{ padding: 0 24px 32px; font-size:13px; color: rgba(255,255,255,.55); }
.site-footer__bottom{ border-top:1px solid rgba(255,255,255,.1); padding: 24px; text-align:center; font-size:13px; color: rgba(255,255,255,.5); }

/* ---------- Floating WhatsApp button ---------- */
.whatsapp-float{
	position: fixed; bottom: 26px; right: 26px; z-index: 200;
	width: 58px; height: 58px; border-radius: 50%;
	background: #25D366; color:#fff; display:flex; align-items:center; justify-content:center;
	box-shadow: 0 8px 24px rgba(0,0,0,.25);
	transition: transform .2s var(--ease);
}
.whatsapp-float:hover{ transform: scale(1.08); }
@media (max-width: 600px){ .whatsapp-float{ bottom:18px; right:18px; width:52px; height:52px; } }

/* ---------- Misc ---------- */
.error-404{ min-height: 50vh; display:flex; align-items:center; }