/* Encore Stone Studio redesign: header (and later title banner / footer).
   Ported from the encorestonestudio.com redesign (Astro site). Loaded after Global.css in index.aspx. */

:root {
	--body: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
	--display: "Playfair Display", Georgia, Cambria, "Times New Roman", Times, serif;
	--ink: #000;
	--paper: #fff;
	--oxblood: #5c0000;
	--accent: #c00013;
	--sand: #e1d9d2;
	--sand-ink: #3d3633;
	--sand-rule: #b6aea9;
	--sand-muted: #a8a19b;
	--caption: #faeedc;
	--lh-display: 1.12;
	--space-banner: clamp(158px, 18vw, 268px);
	--banner-pad: clamp(26px, 3.3vw, 48px);
	--space-subsection: clamp(45px, 6vw, 89px);
	--space-edge: clamp(20px, 6vw, 88px);
	--space-gutter: clamp(12px, 2vw, 21px);
}

/* Page content sits below the fixed header; --hdr-h is measured by the header script. */
.site-main { margin-top: var(--hdr-h, 72px); }

/* ---------- Wordmark ---------- */
.wm { line-height: 0; display: inline-block; }
.wm img { width: 100%; height: auto; display: block; }
.wm--sm { width: clamp(190px, 42vw, 310px); }

/* ---------- Header ---------- */
.hdr {
	position: fixed; top: 0; left: 0; right: 0; z-index: 1030;
	background: var(--paper);
	border-bottom: 1px solid #ededed;
	font-family: var(--body);
	color: var(--ink);
	line-height: 1.6;
	transition: transform .25s, box-shadow .25s;
}
.hdr.is-hidden { transform: translateY(-100%); }
.hdr.is-stuck { box-shadow: 0 1px 12px #0000000f; }
@media (prefers-reduced-motion: reduce) { .hdr { transition: none; } }

.hdr__bar {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--space-gutter);
	padding: .85rem var(--space-edge);
}
/* index.aspx renders in quirks mode (output before the doctype), which drops the line-box space
   under the inline-block logo that the parent site has. Add it back so the header heights match. */
.hdr__brand { text-decoration: none; flex: none; display: block; padding-bottom: .41em; }
.hdr__nav { margin-left: auto; }

.hdr__toggle { cursor: pointer; background: 0 0; border: 0; padding: .4rem; display: inline-flex; }
.hdr__toggle-box { gap: 4px; display: grid; }
.hdr__toggle-box span { background: var(--ink); width: 22px; height: 2px; display: block; }

.hdr__list { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.hdr__item { position: relative; }
.hdr__item + .hdr__item:before {
	content: ""; background: #d9d9d9; width: 1px; height: 2.2em;
	position: absolute; top: 50%; left: 0; transform: translateY(-50%);
}
.hdr__link {
	display: block; padding: .35rem 1.05rem;
	color: var(--ink); text-transform: uppercase; letter-spacing: .1em; white-space: nowrap;
	font-size: .84rem; text-decoration: none;
}
.hdr__link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; }
.hdr__item--cta .hdr__link, .hdr__item--cta .hdr__link:hover { color: var(--accent); }
.hdr__subtoggle { display: none; }

.hdr__sub {
	position: absolute; top: 100%; left: 0; min-width: 15rem;
	margin: 0; padding: .5rem 0; list-style: none;
	background: var(--paper); box-shadow: 0 6px 24px #0000001a;
	opacity: 0; visibility: hidden; transition: opacity .15s;
}
.hdr__item--has-sub:hover > .hdr__sub,
.hdr__item--has-sub:focus-within > .hdr__sub { opacity: 1; visibility: visible; }
.hdr__sub a {
	display: block; padding: .45rem 1.05rem;
	color: var(--ink); text-transform: uppercase; letter-spacing: .09em;
	font-size: .8rem; text-decoration: none;
}
.hdr__sub a:hover { background: #f6f4f0; color: var(--ink); }
.hdr__sub2 { border-left: 1px solid #e6e2dc; margin: 0 0 .35rem 1.05rem; padding: 0 0 0 .1rem; list-style: none; }
.hdr__sub .hdr__sub2 a { letter-spacing: .08em; padding: .34rem .9rem; font-size: .74rem; }

/* Account + cart icons */
.hdr__util { display: flex; align-items: center; gap: .25rem; margin: 0; padding: 0 0 0 .5rem; list-style: none; flex: none; }
.hdr__utillink {
	display: flex; align-items: center; gap: .3rem; padding: .35rem .5rem;
	color: var(--ink); font-size: .84rem; text-transform: uppercase; letter-spacing: .1em;
	text-decoration: none; cursor: pointer; position: relative;
}
.hdr__utillink:hover { color: var(--accent); }
.hdr__utillink [class^="sps-"] { font-size: 1.05rem; }
.hdr__count {
	min-width: 1.1rem; height: 1.1rem; padding: 0 .25rem; border-radius: 1rem;
	background: var(--accent); color: #fff; font-size: .65rem; line-height: 1.1rem; text-align: center; letter-spacing: 0;
}

@media (max-width: 900px) {
	.hdr__nav {
		position: fixed; left: 0; right: 0; top: var(--hdr-h, 66px);
		max-height: calc(100dvh - var(--hdr-h, 66px)); overflow-y: auto;
		overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
		background: var(--paper); box-shadow: 0 8px 24px #0000001a;
		display: none;
	}
	.hdr.is-open .hdr__nav { display: block; }
	.hdr__list { flex-direction: column; align-items: stretch; padding: .4rem 0 .9rem; }
	.hdr__item + .hdr__item:before { display: none; }
	.hdr__item { display: flex; flex-wrap: wrap; align-items: center; }
	.hdr__link { flex: auto; padding: .75rem var(--space-edge); }
	.hdr__subtoggle {
		display: inline-flex; align-items: center; justify-content: center; align-self: stretch; flex: none;
		min-width: 44px; padding: 0 var(--space-edge) 0 .5rem;
		color: var(--ink); background: 0 0; border: 0; cursor: pointer;
	}
	.hdr__chev { transition: transform .2s; }
	.hdr__item.is-sub-open > .hdr__subtoggle .hdr__chev { transform: rotate(180deg); }
	.hdr__sub {
		position: static; flex: 0 0 100%; display: none;
		padding: 0 0 .35rem var(--space-edge);
		opacity: 1; visibility: visible; box-shadow: none;
	}
	.hdr__item.is-sub-open > .hdr__sub { display: block; }
	.hdr__util { margin-left: auto; }
	.hdr__utiltext { display: none; }
}
@media (min-width: 901px) {
	.hdr__toggle { display: none; }
	.hdr__item:nth-last-child(-n+2) > .hdr__sub { left: auto; right: 0; }
}
@media (min-width: 901px) and (max-width: 1100px) {
	.hdr__link { letter-spacing: .06em; padding-inline: .6rem; }
}
html.nav-open { overflow: hidden; }

/* Global.css forces `a { color:#000 !important; text-decoration:none !important }` - override where the design differs */
.hdr__link:hover { text-decoration: underline !important; }
.hdr__item--cta .hdr__link,
.hdr__utillink:hover { color: var(--accent) !important; }
/* Global.css styles #btnoffcanvasCart as the old red button - reset it to a plain header icon */
.hdr #btnoffcanvasCart {
	background: none; margin: 0; padding: .35rem .5rem; border-radius: 0;
	font-size: .84rem; line-height: inherit; color: var(--ink) !important;
}
.hdr #btnoffcanvasCart:hover { color: var(--accent) !important; }

/* Desktop: icon-only account/cart, inside the header's side padding (the menu shifts left to make room) */
@media (min-width: 901px) {
	.hdr__util { padding: 0; gap: 0; }
	.hdr__utillink, .hdr #btnoffcanvasCart { padding: .3rem .25rem; }
	.hdr__utiltext { display: none; }
}

/* ---------- Footer ---------- */
.wm--lg { width: clamp(260px, 92vw, 840px); }

.ftr { background: var(--sand); color: var(--sand-ink); font-family: var(--body); line-height: 1.6; }
.ftr__inner { padding: var(--space-subsection) var(--space-edge); }
.ftr__label {
	display: flex; align-items: center; gap: var(--space-gutter);
	margin: var(--space-subsection) 0 .9rem;
	letter-spacing: .34em; text-transform: uppercase; color: var(--sand-ink); font-size: .68rem;
}
.ftr__label:first-child { margin-top: 0; }
.ftr__label:after { content: ""; background: var(--sand-rule); flex: 1; height: 1px; }
.ftr__brand { margin-bottom: calc(var(--space-subsection) / 2); padding-bottom: .41em; } /* quirks-mode line gap, see .hdr__brand */
.ftr__brandlink { text-decoration: none; display: inline-block; }
.ftr__brandlink:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 4px; }

.ftr__cities, .ftr__stones {
	display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none;
	font-family: var(--display); text-transform: uppercase; letter-spacing: .1em;
	color: var(--oxblood); font-size: clamp(.9rem, 1.5vw, 1.15rem);
}
.ftr__cities { gap: .4rem clamp(16px, 2.6vw, 44px); }
.ftr__stones { gap: .6rem clamp(14px, 2.2vw, 36px); }
.ftr__heading {
	font-family: var(--body); text-transform: uppercase; letter-spacing: .05em;
	margin: 0 0 calc(var(--space-subsection) / 2);
	font-size: clamp(1.25rem, 2.6vw, 1.8rem); font-weight: 400; line-height: var(--lh-display); color: inherit;
}

.ftr__news { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: .5rem clamp(.4rem, 1vw, .7rem); }
.ftr__field { display: flex; flex: 0 10rem; align-items: center; min-width: 0; margin: 0; }
.ftr__field label { clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; width: 1px; height: 1px; position: absolute; overflow: hidden; }
.ftr__field input, .ftr__field select {
	background: var(--paper); color: var(--sand-ink); font: inherit; font-size: .82rem;
	border: 0; border-radius: 0; width: 100%; min-width: 0; padding: .4rem .6rem;
}
.ftr__field ::placeholder { color: var(--sand-muted); opacity: 1; font-style: italic; }
.ftr__field select[data-ph]:not([data-chosen]) { color: var(--sand-muted); font-style: italic; }
.ftr__field select option { color: var(--sand-ink); font-style: normal; }
.ftr__field select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--sand-ink) 50%), linear-gradient(135deg, var(--sand-ink) 50%, transparent 50%);
	background-position: calc(100% - 14px) 55%, calc(100% - 9px) 55%;
	background-repeat: no-repeat; background-size: 5px 5px, 5px 5px; padding-right: 1.9rem;
}
.ftr__field input:focus-visible, .ftr__field select:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 1px; }
.ftr__join {
	flex: none; padding: .45rem 1.4rem; background: 0 0; border: 1px solid var(--sand-ink); border-radius: 0;
	color: var(--sand-ink); font: inherit; font-size: .7rem; text-transform: uppercase; letter-spacing: .16em; cursor: pointer;
}
.ftr__join:hover { background: var(--sand-ink); color: var(--sand); }
.ftr__join[disabled] { opacity: .5; cursor: default; }
.ftr__status { text-align: left; width: 100%; margin: 0; font-size: .78rem; }
.ftr__status[data-state=error] { color: var(--accent); }
.ftr__legal { margin: var(--space-subsection) 0 0; text-align: center; color: var(--sand-muted); font-size: .7rem; }

@media (max-width: 700px) {
	.ftr__cities, .ftr__stones { gap: .5rem clamp(14px, 4vw, 28px); }
}

/* Floating social links */
.soc { z-index: 40; position: fixed; bottom: 14vh; right: .55rem; }
.soc ul { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.soc a {
	display: grid; place-items: center; width: 2.35rem; height: 2.35rem; border-radius: 50%;
	background: #00000057; backdrop-filter: blur(2px); text-decoration: none;
	transition: background .2s, transform .2s;
}
.soc a:hover, .soc a:focus-visible { background: var(--oxblood); transform: translateY(-1px); }
.soc svg { width: 1.15rem; height: 1.15rem; display: block; }
@media (prefers-reduced-motion: reduce) { .soc a { transition: none; } }
@media (max-width: 640px) {
	.soc { bottom: 9vh; }
	.soc a { width: 2.05rem; height: 2.05rem; }
}
@media print { .soc { display: none; } }

/* Global.css link overrides for the footer */
.ftr__cities a, .ftr__stones a { color: inherit !important; }
.ftr__cities a:hover, .ftr__stones a:hover { text-decoration: underline !important; text-underline-offset: 5px; }
.ftr__legal a { color: var(--sand-muted) !important; text-decoration: underline !important; }
.soc a { color: #fff !important; }

/* ---------- Product list title banner (spsProducts.html) ----------
   Layout from the Canva mockup (blurred colour band with text, then two photos side by side);
   band height and text styles from the preview site banners.
   Photos ~37vw tall, split 38/62 as in the mockup. */
.sphero { color: #fff; font-family: var(--body); line-height: 1.6; margin-bottom: clamp(1.5rem, 4vw, 3.5rem); }
.sphero__band {
	display: flex; align-items: center;
	min-height: var(--space-banner);
	background: #1d1d1d center / cover no-repeat;
}
.sphero--inventory .sphero__band { background-image: url("hero/inventory-band-2000.webp"); }
.sphero--water .sphero__band { background-image: url("hero/water-band-2000.webp"); }
@media (max-width: 1000px) {
	.sphero--inventory .sphero__band { background-image: url("hero/inventory-band-1000.webp"); }
	.sphero--water .sphero__band { background-image: url("hero/water-band-1000.webp"); }
}
/* Text styles match the preview site page banners (.phero__* on encorestonestudio.com) */
.sphero__inner { width: 100%; padding: var(--banner-pad) var(--space-edge); }
.sphero__label {
	display: flex; align-items: center; gap: var(--space-gutter);
	margin: 0 0 .9rem; letter-spacing: .38em; text-transform: uppercase; font-size: .7rem;
}
.sphero__label:after { content: ""; background: #ffffff80; flex: 1; height: 1px; }
.sphero__title {
	margin: 0; font-family: var(--display); font-weight: 400; text-transform: uppercase;
	letter-spacing: .03em; line-height: var(--lh-display);
	font-size: clamp(1.8rem, 5.2vw, 3.6rem); text-shadow: 0 1px 18px #00000073; color: #fff;
}
.sphero__rule { display: block; width: clamp(70px, 9vw, 128px); height: 1px; margin: 1.1rem 0 0; background: #ffffffbf; }
.sphero__tagline { margin: 1.4rem 0 0; font-size: clamp(.85rem, 1.35vw, 1.02rem); }
.sphero__caption {
	margin: .55rem 0 0; color: var(--caption); font-style: italic; text-transform: capitalize;
	letter-spacing: .22em; font-size: clamp(.7rem, 1.1vw, .82rem);
}

.sphero__media { display: flex; height: clamp(210px, 37.3vw, 700px); background: #1d1d1d; }
.sphero__panel { flex: 38 1 0; min-width: 0; overflow: hidden; }
.sphero__panel--wide { flex-grow: 62; }
.sphero__panel img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 700px) {
	.sphero__media { height: 52vw; }
}

/* 901-1000px: logo + menu + icons don't fit at full size, so tighten slightly */
@media (min-width: 901px) and (max-width: 1000px) {
	.wm--sm { width: 240px; }
	.hdr__link { padding-inline: .45rem; letter-spacing: .05em; }
}

/* ---------- Product detail bar (spsProductDetail.html #DetailNav) ----------
   Sticks directly under the header; slides to the very top while the header is hidden on scroll down
   (html.hdr-hidden is set by the header script). Overrides the old fixed 92px/112px offsets. */
html section#DetailNav { top: var(--hdr-h, 72px); transition: top .25s; }
html.hdr-hidden section#DetailNav { top: 0; }
@media (prefers-reduced-motion: reduce) { html section#DetailNav { transition: none; } }