/*
Theme Name: Gladwick — Brand Storefront
Author: Gladwick
Description: Brand storefront theme for the Gladwick website (Track A).
  Consumer-facing, warm, editorial, mobile-first. Built on WooCommerce.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: digital-gift
Tags: e-commerce, custom-menu, custom-logo, featured-images, translation-ready
*/

/* ---------------------------------------------------------------------------
   1. Design tokens
--------------------------------------------------------------------------- */
:root {
	/* A4.8.5 Soft Cream calibration (owner-reviewed candidate, not yet final):
	   --bg        #fbf7f1 → #f6f0e5   (main page background)
	   --bg-soft   #f4ede3 → #efe6d7   (kept one step deeper than --bg,
	                                    same relative layering as before)
	   The header bar's literal rgba(251,247,241,.94) and the band's cream
	   text #f4ede3 were synced in the same pass. Original palette recorded in
	   docs/WEBSITE-OPTIMIZATION-BACKLOG.md (UX-PALETTE-001). */
	--bg: #f6f0e5;
	--bg-soft: #efe6d7;
	--card: #ffffff;
	--ink: #26211c;
	--ink-soft: #5c554d;
	--accent: #b4552d;
	--accent-deep: #8f3f1f;
	--accent-ink: #ffffff;
	--line: #e4d9cb;
	--line-strong: #d5c6b2;
	--error: #9c3b2e;
	--error-soft: #fbf1ee;
	--radius: 14px;
	--radius-sm: 8px;
	--wrap: 1160px;
	--font-display: Georgia, "Times New Roman", "Songti SC", serif;
	--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
	--shadow-soft: 0 1px 2px rgba(38, 33, 28, 0.06), 0 8px 24px rgba(38, 33, 28, 0.06);
}

/* ---------------------------------------------------------------------------
   2. Base
--------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 16.5px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

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

a { color: var(--accent-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 600;
	line-height: 1.15;
	margin: 0 0 0.6em;
	letter-spacing: -0.01em;
}

h1 { font-size: clamp(2rem, 5.2vw, 3.3rem); }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); }
h3 { font-size: 1.22rem; }

p { margin: 0 0 1em; }

.wrap {
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: clamp(18px, 4vw, 32px);
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--ink);
	color: #fff;
	padding: 10px 16px;
	z-index: 100;
	border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; color: #fff; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   3. Buttons
--------------------------------------------------------------------------- */
.btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wp-block-button__link {
	display: inline-block;
	background: var(--accent);
	color: var(--accent-ink) !important;
	border: 1px solid var(--accent);
	border-radius: 999px;
	padding: 0.72em 1.5em;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background: var(--accent-deep);
	border-color: var(--accent-deep);
	color: #fff !important;
	transform: translateY(-1px);
}
.btn--ghost {
	background: transparent;
	color: var(--ink) !important;
	border-color: var(--line-strong);
}
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: #fff !important; }
.btn--on-dark {
	background: #fff;
	border-color: #fff;
	color: var(--ink) !important;
}
.btn--on-dark:hover { background: var(--bg-soft); border-color: var(--bg-soft); color: var(--ink) !important; }

/* ---------------------------------------------------------------------------
   4. Header
--------------------------------------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	/* Synced with --bg (A4.8.5): rgba(246, 240, 229, 0.94). */
	background: rgba(246, 240, 229, 0.94);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--line);
}
.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	min-height: 68px;
}
.brand {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	text-decoration: none;
	color: var(--ink);
	flex: 0 0 auto;
}
.brand-name {
	font-family: var(--font-display);
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

/*
 * Custom Logo — the owner-confirmed Gladwick mark (Media Library #274, 2.5:1).
 * WordPress prints the image at its full intrinsic size, so the header sizes
 * it here. `height` + `width:auto` keep the original proportions exactly —
 * nothing is cropped, stretched or recoloured.
 */
.site-header .custom-logo {
	height: 56px;
	width: auto;
	max-width: 224px;
}
@media (max-width: 760px) {
	.site-header .custom-logo {
		height: 48px;
		max-width: 180px;
	}
}
/*
 * The tagline is the first thing to give way when the header row gets tight: it
 * is the only element up here whose absence costs a shopper nothing. On this
 * site it is not shown in the header at all — the measurements at the end of
 * this section explain why, and what would have to change to bring it back.
 * The tagline still renders in the footer under the brand name.
 */
.brand-tag {
	display: none;
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-soft);
	white-space: nowrap;
}

/*
 * The navigation NEVER wraps.
 *
 * A second row of links is not a layout accident to tolerate at some widths —
 * it is the one thing this header is not allowed to do. So the row is a hard
 * `nowrap`, and when the whole menu can no longer sit on it the header switches
 * to its condensed Menu form instead. That switch is a deliberate breakpoint at
 * the end of this section, set above the width where the row would start to
 * tighten — never a fallback triggered by text wrapping.
 */
.primary-nav {
	min-width: 0;
}
.primary-nav .menu {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	justify-content: flex-end;
	gap: clamp(10px, 2vw, 22px);
	list-style: none;
	margin: 0;
	padding: 0;
}
.primary-nav a {
	color: var(--ink);
	text-decoration: none;
	font-size: 0.95rem;
	font-weight: 500;
	padding: 6px 2px;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}
.primary-nav a:hover,
.primary-nav .current-menu-item > a {
	color: var(--accent-deep);
	border-bottom-color: var(--accent);
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: 0 0 auto;
}
.header-link {
	color: var(--ink);
	text-decoration: none;
	font-size: 0.92rem;
	font-weight: 600;
}
.header-link:hover { color: var(--accent-deep); }
.cart-count {
	display: inline-block;
	min-width: 1.4em;
	padding: 0 0.35em;
	border-radius: 999px;
	background: var(--accent);
	color: #fff;
	font-size: 0.78rem;
	text-align: center;
	line-height: 1.5;
}

.nav-toggle {
	display: none;
	background: none;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	padding: 7px 14px;
	font: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--ink);
	cursor: pointer;
}

/*
 * Why the tagline is not shown beside the navigation.
 *
 * Measured in the browser at the widest the row ever gets (--wrap is 1160px, so
 * the header row cannot gain any more room above ~1224px of viewport):
 *
 *   logo                      120px
 *   brand gap + tagline       360px   (50 characters, uppercase, letterspaced)
 *   the 8 nav links           489px
 *   the gaps between them     154px   (7 x 22px)
 *   row gaps + Cart            86px   (2 x 18px, then Cart 50px)
 *   ───────────────────────────────
 *   needed                   1209px   ·   available  1096px   → 113px short
 *
 * So on this site the tagline and the full navigation cannot share one row, and
 * per the agreed priority the tagline is the element that gives way — the
 * navigation must never wrap, and the header stays aligned with the page
 * column rather than being widened to make room.
 *
 * The tagline is not lost: it still renders in the footer under the brand name.
 * To show it up here again, one of these has to change first:
 *   - a much shorter tagline (roughly 20 characters, not 50), or
 *   - a wider header row — the row would need ~1209px, i.e. ~57px past the
 *     content column on each side, which visibly breaks the left edge shared
 *     with the page below, or
 *   - one or two fewer primary nav items.
 */

/*
 * Condensed header — logo | Cart | Menu.
 *
 * This breakpoint is deliberately set ABOVE the width at which the full row
 * would start to run out of space, so the Menu appears because the design
 * decided to, never because the links ran out of room and wrapped. Measured
 * need for logo + the whole menu + Cart is about 830px of row; the row has that
 * from roughly 900px of viewport, so 1023px leaves a wide safety margin for a
 * longer nav item, a wider font fallback or a larger cart count.
 */
@media (max-width: 1023px) {
	.nav-toggle { display: inline-block; padding: 11px 16px; }
	.primary-nav {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		background: var(--bg);
		border-bottom: 1px solid var(--line);
		box-shadow: var(--shadow-soft);
		padding: 10px 0 16px;
	}
	.header-nav-open .primary-nav { display: block; }
	.primary-nav .menu {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
		padding: 0 clamp(18px, 4vw, 32px);
	}
	.primary-nav a { display: block; padding: 12px 0; font-size: 1.02rem; }
	.header-inner { gap: 12px; }
	.header-actions { gap: 10px; }
	.brand-name { font-size: 1.2rem; }
}

/* ---------------------------------------------------------------------------
   5. Sections
--------------------------------------------------------------------------- */
.section { padding: clamp(48px, 8vw, 88px) 0; }
.section--soft { background: var(--bg-soft); }
.section--tight { padding: clamp(36px, 5vw, 56px) 0; }

.section-head { max-width: 640px; margin-bottom: clamp(26px, 4vw, 44px); }
.section-head--center { margin-inline: auto; text-align: center; }
.eyebrow,
.dg-eyebrow {
	display: inline-block;
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent-deep);
	margin-bottom: 10px;
}
.section-head p { color: var(--ink-soft); margin-bottom: 0; }

/* Home section blocks (edited on the Home page — see Content Ownership doc) */
.hero-copy .dg-eyebrow { margin-bottom: 12px; }
.hero-copy .wp-block-buttons { margin-top: 26px; }
.section-head .wp-block-buttons { margin-top: 18px; }
.hero-copy .is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--ink) !important;
	border-color: var(--line-strong);
}
.hero-copy .is-style-outline .wp-block-button__link:hover {
	background: var(--ink);
	border-color: var(--ink);
	color: #fff !important;
}

/* "Why us" columns render as cards (theme frames the block output) */
#why .wp-block-columns {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 2.6vw, 26px);
	margin: 0;
}
@media (max-width: 760px) {
	#why .wp-block-columns { grid-template-columns: 1fr; }
}
#why .wp-block-column {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 26px 24px;
	margin: 0 !important;
}
#why .wp-block-column h3 { margin-bottom: 8px; }
#why .wp-block-column p { color: var(--ink-soft); margin-bottom: 0; }

/* Dark band frames block content */
.band .wp-block-buttons { margin-top: 22px; }
.band .wp-block-button__link {
	background: #fff;
	border-color: #fff;
	color: var(--ink) !important;
}
.band .wp-block-button__link:hover {
	background: var(--bg-soft);
	border-color: var(--bg-soft);
	color: var(--ink) !important;
}

/* Stories teaser cards */
.dg-stories-teaser {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(16px, 2.6vw, 26px);
	text-align: left;
}
@media (max-width: 760px) {
	.dg-stories-teaser { grid-template-columns: 1fr; }
}
.dg-story-card {
	display: block;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 24px 22px;
	text-decoration: none;
	color: var(--ink);
	transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.dg-story-card:hover {
	border-color: var(--line-strong);
	transform: translateY(-2px);
	box-shadow: var(--shadow-soft);
	color: var(--ink);
}
.dg-story-date {
	display: block;
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-soft);
	margin-bottom: 8px;
}
.dg-story-title {
	display: block;
	font-family: var(--font-display);
	font-size: 1.15rem;
	font-weight: 600;
	margin-bottom: 8px;
}
.dg-story-excerpt { display: block; color: var(--ink-soft); font-size: 0.95rem; }
.dg-stories-cta { text-align: center; margin: 24px 0 0; }

/*
 * A4.2 — the Stories index as an editorial page.
 *
 * The list is uniform no longer: the newest story leads as a featured story and
 * the rest follow as cards. Everything here is driven by the standard Posts
 * fields, so a published story with a Featured image and a Category forms the
 * full layout on its own — nothing has to be arranged by hand.
 */
/* This page is a grid of cards, not a column of prose: undo the reading-measure
   cap (.entry > *) so the featured story and the cards use the content column. */
.dg-stories-index > .wrap { max-width: var(--wrap); }

.dg-story-tags {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 10px;
}
.dg-story-tags .dg-story-date { margin-bottom: 0; }
.dg-story-cat {
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent-deep);
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	padding: 3px 10px;
}

/* Featured story — the newest one, when the archive is not empty. */
.dg-story-featured {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	align-items: stretch;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	margin-bottom: clamp(30px, 4vw, 52px);
}
.dg-story-featured--text { grid-template-columns: minmax(0, 1fr); }
.dg-story-featured-media { min-height: 260px; }
.dg-story-featured-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.dg-story-featured-body {
	align-self: center;
	padding: clamp(22px, 3.4vw, 40px);
}
.dg-story-featured-title {
	font-family: var(--font-display);
	font-size: clamp(1.4rem, 2.6vw, 2rem);
	line-height: 1.2;
	margin: 0 0 12px;
}
.dg-story-featured-title a { color: var(--ink); text-decoration: none; }
.dg-story-featured-title a:hover { color: var(--accent-deep); }
.dg-story-featured-body .dg-story-excerpt { font-size: 1.02rem; margin-bottom: 20px; }

.dg-stories-heading {
	font-family: var(--font-display);
	font-size: 1.3rem;
	margin: 0 0 clamp(16px, 2.4vw, 24px);
}
.dg-stories-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 2.6vw, 26px);
}
@media (max-width: 980px) {
	.dg-stories-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
	.dg-stories-grid { grid-template-columns: 1fr; }
}

/* Card thumbnail — bleeds to the card's edges when the story has an image. */
.dg-story-thumb {
	display: block;
	margin: -24px -22px 16px;
	overflow: hidden;
	border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}
.dg-story-thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

@media (max-width: 860px) {
	.dg-story-featured { grid-template-columns: minmax(0, 1fr); }
	.dg-story-featured-media { min-height: 0; aspect-ratio: 16 / 10; }
}

/* Hero */
.hero { padding: clamp(56px, 9vw, 110px) 0 clamp(44px, 7vw, 84px); }
.hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(26px, 5vw, 64px);
	align-items: center;
}
.hero-copy p { color: var(--ink-soft); font-size: 1.08rem; max-width: 46ch; }
.hero-media {
	aspect-ratio: 4 / 3.4;
	border-radius: var(--radius);
	background:
		radial-gradient(120% 90% at 20% 15%, #f7e7d6 0%, rgba(247, 231, 214, 0) 55%),
		radial-gradient(110% 100% at 85% 80%, #f0dcc6 0%, rgba(240, 220, 198, 0) 60%),
		linear-gradient(160deg, #f6ead9, #ecd9c2);
	border: 1px solid var(--line);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ink-soft);
	font-size: 0.86rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
/* Owner-supplied hero image (Page Sections → Hero Banner desktop/mobile
   image fields; legacy: the Home page Featured image) fills the slot. */
.hero-media--image { background: none; overflow: hidden; }
/* A4.8.3: the fit and focal point are chosen per image slot in 页面板块 →
   首页主视觉 and arrive as CSS custom properties; the mobile values take
   over under the same 820px breakpoint the layout stacks at. */
.hero-media--image img {
	width: 100%;
	height: 100%;
	object-fit: var(--dg-fit, cover);
	object-position: var(--dg-pos, 50% 50%);
	display: block;
}
@media (max-width: 820px) {
	.hero-grid { grid-template-columns: 1fr; }
	.hero-media { aspect-ratio: 4 / 2.6; }
	.hero-media--image img {
		object-fit: var(--dg-fit-m, var(--dg-fit, cover));
		object-position: var(--dg-pos-m, var(--dg-pos, 50% 50%));
	}
}

/* Card grids */
.grid { display: grid; gap: clamp(16px, 2.6vw, 26px); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 26px 24px;
}
.card h3 { margin-bottom: 8px; }
.card p { color: var(--ink-soft); margin-bottom: 0; }

.moment-card {
	display: block;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 30px 24px 26px;
	text-decoration: none;
	color: var(--ink);
	transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.moment-card:hover {
	border-color: var(--line-strong);
	transform: translateY(-2px);
	box-shadow: var(--shadow-soft);
	color: var(--ink);
}
.moment-card .moment-title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; display: block; margin-bottom: 6px; }
.moment-card .moment-note { color: var(--ink-soft); font-size: 0.92rem; }

/* Keepsake band */
.band {
	background: var(--ink);
	color: #f6f0e5;
	border-radius: var(--radius);
	padding: clamp(30px, 5vw, 56px);
	max-width: 100%;
}
.band h2 { color: #fff; }
.band p { color: #cdc2b4; max-width: 62ch; }
.band .eyebrow,
.band .dg-eyebrow { color: #e8b08e; }

/* Placeholder note (structural content, marked honestly) */
.placeholder-note {
	border: 1px dashed var(--line-strong);
	background: var(--card);
	border-radius: var(--radius-sm);
	padding: 14px 18px;
	color: var(--ink-soft);
	font-size: 0.92rem;
}

/* ---------------------------------------------------------------------------
   A4.3 — Wholesale inquiry form
   Presentation only; the rules behind it live in the site plugin.
--------------------------------------------------------------------------- */
.dg-inquiry {
	margin-top: clamp(28px, 4vw, 44px);
	padding: clamp(22px, 3.2vw, 32px);
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}
.dg-inquiry-title {
	font-family: var(--font-display);
	font-size: 1.3rem;
	margin: 0 0 10px;
}
.dg-inquiry-lede { color: var(--ink-soft); margin: 0 0 22px; }

.dg-inquiry-notice {
	margin: 0;
	padding: 14px 18px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-sm);
	background: var(--bg-soft);
	color: var(--ink-soft);
}
.dg-inquiry-notice--ok { border-color: var(--accent); color: var(--ink); }
.dg-inquiry-notice--error {
	border-color: var(--error);
	background: var(--error-soft);
	color: var(--error);
}

.dg-inquiry-field { margin: 0 0 16px; }
.dg-inquiry-field label {
	display: block;
	margin-bottom: 6px;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--ink);
}
.dg-inquiry-required { color: var(--accent-deep); margin-left: 2px; }

.dg-inquiry-field input[type="text"],
.dg-inquiry-field input[type="email"],
.dg-inquiry-field textarea {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	padding: 0.7em 0.85em;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-sm);
	background: #fff;
	color: var(--ink);
	font: inherit;
	font-size: 1rem;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.dg-inquiry-field textarea { min-height: 120px; resize: vertical; }
.dg-inquiry-field input:focus,
.dg-inquiry-field textarea:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(180, 85, 45, 0.16);
}
.dg-inquiry-field--invalid input,
.dg-inquiry-field--invalid textarea { border-color: var(--error); }
.dg-inquiry-field-error {
	display: block;
	margin-top: 6px;
	font-size: 0.85rem;
	color: var(--error);
}

.dg-inquiry-submit { margin: 22px 0 0; }
.dg-inquiry-privacy {
	margin: 18px 0 0;
	font-size: 0.85rem;
	color: var(--ink-soft);
}

/*
 * Honeypot row: parked off-canvas so it occupies no space and is never
 * focusable or announced. Not `display: none` — a hidden field a bot skips is
 * not a trap.
 */
.dg-inquiry-trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Page / article */
.page-head { padding: clamp(40px, 6vw, 72px) 0 8px; }
.page-head p.lede,
.page-head .lede,
.page-head .lede p { color: var(--ink-soft); font-size: 1.06rem; max-width: 60ch; }
.entry { padding: clamp(20px, 3vw, 36px) 0 clamp(48px, 7vw, 80px); }
.entry > * { max-width: 72ch; }

/* ---------------------------------------------------------------------------
   6. Footer
--------------------------------------------------------------------------- */
.site-footer {
	background: var(--ink);
	color: #cfc4b6;
	margin-top: clamp(40px, 6vw, 72px);
}
.footer-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
	gap: clamp(22px, 4vw, 44px);
	padding: clamp(40px, 6vw, 64px) 0 34px;
}
.footer-brand .brand-name { color: #fff; }
.footer-brand p { color: #b3a698; font-size: 0.94rem; max-width: 34ch; }
.footer-col h4 {
	font-family: var(--font-body);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #9c8e7e;
	margin-bottom: 14px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-col a { color: #e6ddd1; text-decoration: none; font-size: 0.94rem; }
.footer-col a:hover { color: #fff; text-decoration: underline; }
.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding: 18px 0 26px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	justify-content: space-between;
	font-size: 0.84rem;
	color: #9c8e7e;
}
@media (max-width: 880px) {
	.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.footer-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   7. WooCommerce overrides (classic templates + block pages)
--------------------------------------------------------------------------- */
.woocommerce .woocommerce-breadcrumb { color: var(--ink-soft); font-size: 0.88rem; }
.woocommerce .woocommerce-result-count { color: var(--ink-soft); }
.woocommerce ul.products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.6vw, 26px); margin: 0 0 24px; }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.woocommerce ul.products li.product a img { border-radius: var(--radius-sm); margin: 0 0 10px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--font-display); font-size: 1.06rem; padding: 0; }
.woocommerce ul.products li.product .price { color: var(--ink); font-weight: 700; }
.woocommerce ul.products li.product .button { margin-top: 10px; align-self: flex-start; }
@media (max-width: 860px) { .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .woocommerce ul.products { grid-template-columns: 1fr; } }

.woocommerce span.onsale {
	background: var(--accent);
	border-radius: var(--radius-sm);
	min-height: auto;
	min-width: auto;
	padding: 4px 10px;
	line-height: 1.4;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price { color: var(--ink); font-weight: 700; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top-color: var(--accent);
	background: var(--card);
	border-radius: var(--radius-sm);
	padding: 14px 18px;
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--accent); }
.woocommerce .woocommerce-message .button { float: right; }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text {
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-sm);
	padding: 10px 12px;
	background: #fff;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.woocommerce table.shop_table { border: 1px solid var(--line); border-radius: var(--radius-sm); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.woocommerce table.shop_table th { background: var(--bg-soft); }

.woocommerce .cart-collaterals .cart_totals { width: 100%; }
.woocommerce #payment, .woocommerce-checkout #payment { background: var(--bg-soft); border-radius: var(--radius-sm); }

/* Block cart/checkout minor alignment inside content width */
.wc-block-cart, .wc-block-checkout { max-width: 100%; }
.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout { margin-block: 24px; }

/* ---------------------------------------------------------------------------
   7b. A2.1 — catalogue, product page, media
--------------------------------------------------------------------------- */

/* Shop category strip (data = WooCommerce product categories) */
.shop-cats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	margin: 6px 0 8px;
}
.shop-cat {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 14px;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	background: var(--card);
	color: var(--ink);
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 600;
}
.shop-cat:hover { border-color: var(--accent); color: var(--accent-deep); }
.shop-cat .count {
	font-size: 0.75rem;
	font-weight: 700;
	background: var(--bg-soft);
	border-radius: 999px;
	padding: 1px 8px;
	color: var(--ink-soft);
}

/* Sale pricing */
.woocommerce del, .woocommerce del .amount { color: var(--ink-soft); opacity: 0.75; }
.woocommerce ins, .woocommerce ins .amount { text-decoration: none; color: var(--accent-deep); font-weight: 700; }

/* Stock feedback */
.woocommerce .stock.in-stock { color: #3e7a3a; font-weight: 600; }
.woocommerce .stock.out-of-stock { color: var(--accent-deep); font-weight: 700; }
.woocommerce ul.products li.product .stock.out-of-stock {
	display: inline-block;
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Product page: purchase area */
.woocommerce div.product .woocommerce-product-gallery { border-radius: var(--radius); overflow: hidden; }
.woocommerce div.product .woocommerce-product-gallery img { border-radius: var(--radius-sm); }
.woocommerce div.product form.cart .variations { border-collapse: separate; border-spacing: 0 10px; }
.woocommerce div.product form.cart .variations th { text-align: left; font-weight: 600; padding-right: 14px; }
.woocommerce div.product form.cart .variations select {
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-sm);
	padding: 9px 12px;
	background: #fff;
	min-width: 200px;
}
.woocommerce div.product form.cart .quantity input {
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-sm);
	padding: 10px 12px;
}
.woocommerce .woocommerce-variation-price .price { font-weight: 700; font-size: 1.15rem; }
.woocommerce div.product p.price { font-size: 1.35rem; }
.dg-shipping-note { margin: 10px 0 0; font-size: 0.92rem; }
.dg-shipping-note a { color: var(--ink-soft); }

/* Product page: info tabs + attributes */
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin: 0 0 8px; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: var(--bg-soft);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--card); }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { font-weight: 600; }
.woocommerce table.shop_attributes th { width: 220px; }

/* ---------------------------------------------------------------------------
   8. Review bar (internal Review Mode only — never rendered in public mode)
--------------------------------------------------------------------------- */
.dg-review-bar {
	background: #211c17;
	color: #f1e7d8;
	font-size: 0.82rem;
	line-height: 1.5;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.dg-review-bar-inner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 18px;
	min-height: 40px;
	padding-block: 6px;
}
.dg-review-brand {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #fff;
}
.dg-review-dot {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: #e0a173;
	box-shadow: 0 0 0 3px rgba(224, 161, 115, 0.25);
}
.dg-review-lang a {
	color: #cfc2b0;
	text-decoration: none;
	padding: 2px 8px;
	border-radius: 999px;
}
.dg-review-lang a:hover { color: #fff; }
.dg-review-lang a.is-active {
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	font-weight: 700;
}
.dg-review-lang a + a { margin-left: 4px; }
.dg-review-ui-label { color: #9c8e7e; font-weight: 700; margin-right: 2px; }
.dg-review-content {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 10px;
	color: #e9dcc9;
}
.dg-review-content-label { color: #9c8e7e; }
.dg-review-content-human { font-weight: 600; }
.dg-review-content-tech {
	color: #8d8172;
	font-size: 0.78rem;
	letter-spacing: 0.03em;
}
.dg-review-actions {
	margin-left: auto;
	display: inline-flex;
	gap: 14px;
}
.dg-review-actions a {
	color: #f1e7d8;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.dg-review-actions a:hover { color: #fff; }
@media (max-width: 700px) {
	.dg-review-actions { margin-left: 0; }
}

/* Shop archive description (editable Shop page content) */
.page-head .page-description,
.page-head .term-description p,
.page-head .woocommerce-product-details__short-description p {
	color: var(--ink-soft);
	font-size: 1.06rem;
	max-width: 60ch;
	margin: 0;
}
/* Paragraphs inside the intro keep the base `p` bottom margin, so multi-
   paragraph Shop copy breathes the same way the Stories lede does. */
.page-head .page-description p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   8b. A3.1 — Brand launch front end
--------------------------------------------------------------------------- */

/* Home: value proposition strip (list block on the Home page, rendered as a
   compact three-column row — structure fixed by the theme, copy owner-editable) */
.dg-section-value ul.dg-value-list,
.dg-section-value ul {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(14px, 2.4vw, 28px);
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * On a phone the three-across row stops being a strip and becomes a squeeze:
 * each column lands around 110-120px and every heading breaks across three or
 * four lines. Below this width the strip stacks into one column, keeping the
 * rule above each item and the reading column full width. Nothing is hidden and
 * nothing scrolls sideways — only the axis changes.
 */
@media (max-width: 640px) {
	.dg-section-value ul.dg-value-list,
	.dg-section-value ul {
		grid-template-columns: 1fr;
		gap: clamp(18px, 5vw, 26px);
	}
}
.dg-section-value li {
	border-top: 2px solid var(--line-strong);
	padding-top: 14px;
	color: var(--ink-soft);
	font-size: 0.98rem;
	line-height: 1.6;
}
.dg-section-value li strong {
	display: block;
	color: var(--ink);
	font-family: var(--font-display);
	font-size: 1.05rem;
	font-weight: 600;
	margin-bottom: 4px;
}
@media (max-width: 760px) {
	.dg-section-value ul { grid-template-columns: 1fr; }
}

/* Story detail (single.php): readable article layout */
.dg-story-meta {
	color: var(--ink-soft);
	font-size: 0.9rem;
	letter-spacing: 0.04em;
	margin-top: 6px;
}
.dg-story-body > .wrap { max-width: var(--wrap); } /* undo .entry's 72ch cap: title/body left edges align */
.dg-story-body .wrap > * { max-width: 68ch; }
.dg-story-body p,
.dg-story-body ul,
.dg-story-body ol {
	font-size: 1.06rem;
	line-height: 1.75;
}
.dg-story-body > .wrap > p:first-child { font-size: 1.14rem; color: var(--ink-soft); }
.dg-story-body img { border-radius: var(--radius-sm); height: auto; }
.dg-story-body h2 { margin-top: 1.6em; }
.dg-story-foot { padding: 0 0 clamp(40px, 6vw, 72px); }

/* Footer link groups render as WordPress menus (or theme fallback lists) */
.footer-menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

/* ---------------------------------------------------------------------------
   8c. A3.4 — real merchandise publishing: PDP layout
--------------------------------------------------------------------------- */

/* Commerce pages use the full content width — the 72ch article measure
   belongs to prose pages (this was silently squeezing Shop / PDP into a
   640px column and collapsing long titles into a vertical tower) */
.dg-woocommerce .entry > .wrap { max-width: var(--wrap); }

/* PDP: balanced two-column layout — media ~55-60%, purchase info ~40-45% */
.dg-woocommerce div.product {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	column-gap: clamp(26px, 4vw, 64px);
	align-items: start;
}
/* Children must FILL their grid track — WooCommerce's legacy `width: 48%`
   float rules have equal specificity and load later, so override explicitly. */
.dg-woocommerce div.product div.images,
.dg-woocommerce div.product div.summary {
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
	min-width: 0;
}
.dg-woocommerce div.product .woocommerce-tabs,
.dg-woocommerce div.product .related,
.dg-woocommerce div.product .upsells,
.dg-woocommerce div.product .dg-highlights { grid-column: 1 / -1; }
.dg-woocommerce div.product .woocommerce-tabs,
.dg-woocommerce div.product .related,
.dg-woocommerce div.product .upsells { margin-top: clamp(24px, 4vw, 48px); }

/* Long marketplace-style titles must not tower over the purchase column */
.dg-woocommerce div.product .product_title {
	font-size: clamp(1.55rem, 1.15rem + 1.5vw, 2.35rem);
	line-height: 1.18;
	overflow-wrap: break-word;
	margin-bottom: 0.55em;
}

/* Media column fills its grid track */
.dg-woocommerce div.product .woocommerce-product-gallery { width: 100%; }

@media (max-width: 820px) {
	.dg-woocommerce div.product { grid-template-columns: minmax(0, 1fr); }
}

/* Key Highlights block (structured field — hidden when empty) */
.dg-highlights { margin: 10px 0 0; }
.dg-highlights h2 { font-size: 1.2rem; }
.dg-highlights ul { margin: 0; padding-left: 1.15em; color: var(--ink-soft); }
.dg-highlights li { margin: 5px 0; }

/* ---------------------------------------------------------------------------
   9. Misc
--------------------------------------------------------------------------- */
.screen-reader-shortcut:focus { left: 6px; top: 6px; }
::selection { background: #ecc9ae; color: var(--ink); }

/* ---------------------------------------------------------------------------
   10. Catalogue mode (Brand Launch)
   The transaction is closed on the server; this only removes the controls a
   visitor has no use for. The variations form itself stays visible — it is how
   a visitor looks through the styles.
--------------------------------------------------------------------------- */
.dg-catalog-mode .single_add_to_cart_button,
.dg-catalog-mode .quantity { display: none !important; }

.dg-catalog-note {
	color: var(--ink-soft);
	font-size: 0.95rem;
	margin: 0.75rem 0 0;
}