/*
Theme Name: Verena Jewellery
Theme URI: https://verenajewellery.com
Author: Verena Jewellery
Description: Custom theme for Verena Jewellery — fine gold jewellery and custom design, Jakarta (est. 1999). WhatsApp-first sales funnel, gold-price ticker, custom design inquiry. Pairs with the Verena Jewellery Tools plugin.
Version: 2.0.6
Requires PHP: 7.4
Text Domain: verena-jewellery
*/

/* Fonts are enqueued via functions.php (wp_enqueue_style) — see verena_enqueue_assets(). */

/* ------------------------------------------------------------------ */
/* Design tokens — forest / gold / champagne (2024 handoff)            */
/* ------------------------------------------------------------------ */
:root {
	/* Brand core */
	--forest: #24281C;          /* primary dark bg: header, footer, hero, dropdowns — matched to the logo art's baked-in background so the stacked logo blends seamlessly */
	--forest-dark: #162016;     /* gold ticker bar */
	--gold: #C9A24B;            /* CTAs, eyebrows, links, section labels */
	--gold-bright: #D4AF37;     /* hover state for gold accents */
	--gold-ink: #A08B4A;        /* eyebrow/label on light backgrounds */
	--champagne: #F2E9CC;       /* headings / nav text on dark; light section bg */
	--champagne-dim: #D8D2BC;   /* body text on dark bg */
	--sand: #C9C7B8;            /* footer body text */
	--olive: #8B9086;           /* fine print, disclaimers on dark */
	--olive-2: #9AA093;

	/* Light content surfaces */
	--ivory: #FBF7EA;           /* page base */
	--cream: #FFFDF5;           /* raised cards on light */
	--ink: #1E2A1E;             /* body text on light */
	--ink-muted: #5B5A4C;       /* muted body text on light */
	--line-light: #E4D8AF;      /* borders on light */
	--line-light-strong: #D8CDA0;

	/* Semantic aliases (kept so legacy templates stay coherent) */
	--bg: var(--ivory);
	--bg-alt: #EFE7D0;
	--surface: var(--cream);
	--surface-raised: #FFFFFF;
	--text: #453f30;
	--text-muted: var(--ink-muted);
	--heading: var(--forest);
	--border: rgba(30, 42, 30, 0.10);
	--border-strong: rgba(30, 42, 30, 0.18);
	--success: #2f7d4f;
	--danger: #b4472f;

	--verena-gold: var(--gold);
	--verena-gold-light: var(--gold-bright);
	--verena-gold-dark: var(--gold-ink);

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

	--radius: 3px;
	--radius-lg: 6px;
	--wrap: 1280px;
	--wrap-content: 1200px;

	--space-1: 0.5rem;
	--space-2: 1rem;
	--space-3: 1.75rem;
	--space-4: 3rem;
	--space-5: 5.5rem;

	--shadow-sm: 0 1px 3px rgba(30, 42, 30, 0.08);
	--shadow-md: 0 12px 28px rgba(30, 42, 30, 0.12);
	--shadow-drop: 0 12px 28px rgba(0, 0, 0, 0.3);
}

/* ------------------------------------------------------------------ */
/* Reset / base                                                        */
/* ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--text);
	background: var(--ivory);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
svg { display: block; }

a:focus-visible, button:focus-visible, .filter-pill:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
	border-radius: 2px;
}

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 500;
	line-height: 1.12;
	margin: 0 0 var(--space-2);
	color: var(--heading);
	letter-spacing: 0;
}
h1 { font-style: italic; font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.08; }
h2 { font-style: italic; font-size: clamp(1.9rem, 3.6vw, 2.75rem); }
h3 { font-size: 1.4rem; }
p { margin: 0 0 var(--space-2); }

.container {
	max-width: var(--wrap-content);
	margin: 0 auto;
	padding: 0 var(--space-3);
}
.section { padding: var(--space-5) 0; }
/* Phone only — more breathing room below the sticky header on every page; desktop/tablet untouched. */
@media (max-width: 600px) {
	.section { padding-top: calc(var(--space-5) + 32px); }
	/* ...except pages with a .page-header band right above — that band
	   already has its own bottom padding (60px), so the boost above just
	   double-stacks into an oversized gap (e.g. About, Contact). */
	.page-header + .section { padding-top: 28px; }
}
.section-alt { background: var(--bg-alt); }
.section-narrow { max-width: 720px; margin: 0 auto; }
.section-heading { max-width: 640px; margin: 0 auto var(--space-4); }

.eyebrow {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-family: var(--font-body);
	font-size: 0.75rem;
	color: var(--gold-ink);
	font-weight: 700;
	margin-bottom: 0.9rem;
}
.text-muted { color: var(--text-muted); }
.text-center { text-align: center; }
/* Phone only — page description text matches the homepage hero body size; desktop/tablet untouched. Inline font-size overrides (fine-print captions etc.) still win. */
@media (max-width: 600px) {
	.text-muted, .stack p, .jual-emas-why__list { font-size: 14px; line-height: 1.6; }
}

/* ------------------------------------------------------------------ */
/* Gold price ticker                                                   */
/* ------------------------------------------------------------------ */
.gold-ticker {
	position: sticky;
	top: var(--header-h, 84px);
	z-index: 40;
	width: 100%;
	background: var(--forest-dark);
	border-bottom: 1px solid rgba(201, 162, 75, 0.25);
	box-sizing: border-box;
}
.gold-ticker__inner {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 9px 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
}
.gold-ticker__label {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gold);
	white-space: nowrap;
}
.gold-ticker__rates { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; }
.gold-ticker__rate { font-size: 12.5px; color: var(--champagne-dim); white-space: nowrap; }
.gold-ticker__rate strong { color: var(--champagne); font-weight: 700; }
.gold-ticker__note { font-size: 12px; color: var(--olive-2); margin: 0; text-align: center; }
.gold-ticker__link { color: var(--gold); text-decoration: underline; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.gold-ticker__link:hover { color: var(--gold-bright); }
/* Phone only — shorter ticker bar; desktop/tablet untouched. */
@media (max-width: 600px) {
	.gold-ticker__inner { padding: 4px 16px; row-gap: 4px; }
	.gold-ticker__rates { row-gap: 4px; }
}

/* ------------------------------------------------------------------ */
/* Header / navigation                                                 */
/* ------------------------------------------------------------------ */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	width: 100%;
	background: var(--forest);
	box-sizing: border-box;
}
.site-header__inner {
	max-width: var(--wrap);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 24px;
	gap: 16px;
}
.site-logo, .custom-logo-link { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* Cap BOTH the theme's bundled logo and any logo set in Customize → Site
   Identity (.custom-logo), so a huge source image can never blow up the header. */
.site-logo img,
.site-header .custom-logo {
	height: 56px !important;
	width: auto !important;
	max-width: 240px;
	object-fit: contain;
	display: block;
}
/* Phone only — shorter header bar; desktop/tablet untouched. */
@media (max-width: 600px) {
	.site-header__inner { padding: 8px 16px; }
	.site-logo img,
	.site-header .custom-logo {
		height: 40px !important;
	}
}
.site-logo__text { font-family: var(--font-display); font-style: italic; font-size: 1.6rem; color: var(--champagne); }

.primary-nav { align-items: center; gap: 32px; position: relative; display: none; }
@media (min-width: 900px) { .primary-nav { display: flex; } }

.navlink {
	position: relative;
	color: var(--champagne);
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.navlink::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: -6px;
	height: 1px;
	background: var(--gold-bright);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
}
.navlink:hover::after, .navlink:focus-visible::after { transform: scaleX(1); }
.navlink svg { transition: transform 0.2s ease; }

.header-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.header-wa {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--gold);
	color: var(--forest);
	padding: 10px 18px;
	border-radius: 3px;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.03em;
	white-space: nowrap;
	transition: background 0.2s ease;
}
.header-wa:hover { background: var(--gold-bright); }
.header-wa svg path { fill: var(--forest); }

.nav-toggle {
	background: transparent;
	border: 1px solid rgba(242, 233, 204, 0.35);
	border-radius: 3px;
	padding: 8px 10px;
	cursor: pointer;
	display: flex;
	align-items: center;
}
@media (min-width: 900px) { .nav-toggle { display: none; } }

/* Mobile menu */
.mobile-nav {
	display: none;
	flex-direction: column;
	padding: 4px 24px 20px;
	gap: 4px;
	border-top: 1px solid rgba(242, 233, 204, 0.12);
	background: var(--forest);
}
.mobile-nav.is-open { display: flex; }
.mobile-nav a {
	color: var(--champagne);
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 500;
	padding: 10px 0;
}
.mobile-nav a:hover { color: var(--gold-bright); }
@media (min-width: 900px) { .mobile-nav { display: none !important; } }

/* ------------------------------------------------------------------ */
/* Buttons                                                             */
/* ------------------------------------------------------------------ */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: 16px 28px;
	border-radius: var(--radius);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.9rem;
	letter-spacing: 0.03em;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	line-height: 1.2;
}
.btn svg { flex-shrink: 0; }
.btn-gold, .btn-primary, .btn-whatsapp {
	background: var(--gold);
	color: var(--forest);
}
.btn-gold:hover, .btn-primary:hover, .btn-whatsapp:hover { background: var(--gold-bright); color: var(--forest); }
.btn-gold svg path, .btn-whatsapp svg path { fill: var(--forest); }
.btn-outline {
	background: transparent;
	border-color: var(--border-strong);
	color: var(--ink);
}
.btn-outline:hover { border-color: var(--gold); color: var(--gold-ink); background: rgba(201, 162, 75, 0.06); }
.btn-outline-light {
	background: transparent;
	border-color: rgba(242, 233, 204, 0.4);
	color: var(--champagne);
}
.btn-outline-light:hover { border-color: var(--champagne); }
.btn-gold-outline {
	background: rgba(201, 162, 75, 0.08);
	border-color: var(--gold);
	color: var(--gold-ink);
}
.btn-gold-outline:hover { background: var(--gold); color: var(--forest); }
.btn-block { width: 100%; }
.btn-sm { padding: 10px 18px; font-size: 0.8rem; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ------------------------------------------------------------------ */
/* Hero (homepage)                                                     */
/* ------------------------------------------------------------------ */
.hero {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-sizing: border-box;
}
@media (min-width: 900px) { .hero { flex-direction: row; min-height: 88vh; } }
.hero__panel { position: relative; width: 100%; }
.hero__panel--text { min-height: 480px; display: flex; align-items: flex-end; background: var(--forest); }
.hero__panel--image { aspect-ratio: 3 / 2; overflow: hidden; }
@media (min-width: 900px) {
	.hero__panel { width: 50%; }
	.hero__panel--text { min-height: auto; }
}
.hero__panel-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__slide-track { display: flex; width: 100%; height: 100%; transition: transform 0.8s ease; }
.hero__slide { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; }
@media (prefers-reduced-motion: reduce) { .hero__slide-track { transition: none; } }
.hero__panel--image { touch-action: pan-y; }
.hero__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: none;
	background: rgba(22, 32, 22, 0.4);
	color: var(--champagne);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, background 0.2s ease;
}
.hero__panel--image:hover .hero__arrow,
.hero__panel--image:focus-within .hero__arrow {
	opacity: 1;
	pointer-events: auto;
}
.hero__arrow:hover { background: rgba(22, 32, 22, 0.65); }
.hero__arrow--prev { left: 14px; }
.hero__arrow--next { right: 14px; }
/* No hover on touch devices — arrows would be permanently invisible and
   unreachable, so hide them there in favor of the finger-swipe gesture. */
@media (hover: none) {
	.hero__arrow { display: none; }
}
.hero__panel-overlay { position: absolute; inset: 0; background: var(--forest); opacity: 0.6; }
.hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	box-sizing: border-box;
	padding: 60px 24px 72px;
}
.hero__content { max-width: 620px; }
.hero .eyebrow { color: var(--gold); letter-spacing: 0.18em; font-size: 12px; margin-bottom: 20px; }
.hero h1 { color: var(--champagne); margin: 0 0 24px; font-size: clamp(40px, 6vw, 68px); }
.hero__body { font-size: 17px; line-height: 1.7; color: var(--champagne-dim); margin: 0 0 36px; max-width: 480px; }
.hero__actions { display: flex; flex-direction: column; gap: 8px; }
.hero__actions-row { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 420px) {
	.hero__actions-row { flex-direction: column; gap: 14px; }
}
/* Phone only — scale the whole hero text block down; desktop/tablet untouched. */
@media (max-width: 600px) {
	.hero__inner { padding: 40px 20px 32px; }
	.hero .eyebrow { font-size: 10.5px; margin-bottom: 14px; }
	.hero h1 { font-size: clamp(26px, 8vw, 34px); margin: 0 0 14px; }
	.hero__body { font-size: 14px; line-height: 1.6; margin: 0 0 22px; }
	.hero__actions { gap: 6px; }
	.hero__actions-row { gap: 6px; }
	.hero__actions .btn { padding: 12px 18px; font-size: 0.78rem; }
}

/* ------------------------------------------------------------------ */
/* Interior page header (forest band under the nav)                    */
/* ------------------------------------------------------------------ */
.page-header {
	background: var(--forest);
	padding: 72px 24px 60px;
	text-align: center;
}
.page-header .eyebrow { color: var(--gold); }
.page-header h1 { color: var(--champagne); margin: 0 0 16px; }
.page-header h1 em { font-style: normal; color: var(--gold); }
.page-header p { color: var(--champagne-dim); max-width: 620px; margin: 0 auto; }

/* ------------------------------------------------------------------ */
/* Light content bands                                                 */
/* ------------------------------------------------------------------ */
.band { width: 100%; box-sizing: border-box; padding: 88px 24px; }
.band--champagne { background: var(--champagne); }
.band--forest { background: var(--forest); }
.band__inner { max-width: 1240px; margin: 0 auto; }
.band__head { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 48px; }
.band__head .eyebrow { color: var(--gold-ink); letter-spacing: 0.16em; margin-bottom: 14px; }
.band__head h2 { color: var(--ink); margin: 0 0 16px; }
.band__head p { font-size: 15px; color: var(--ink-muted); max-width: 520px; margin: 0; }
.band--forest .band__head .eyebrow { color: var(--gold); }
.band--forest .band__head h2 { color: var(--champagne); }
.band--forest .band__head p { color: var(--champagne-dim); }
.delivery-journey { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.delivery-journey__icon {
	width: 72px; height: 72px; border-radius: 50%;
	border: 1px solid rgba(201, 162, 75, 0.4);
	display: flex; align-items: center; justify-content: center;
}
.delivery-journey__line { width: 36px; height: 1px; background: rgba(201, 162, 75, 0.4); }
.verena-logo-icon { width: 48px; height: 48px; }
/* Phone only — smaller delivery icon row; shared by the homepage and Jual Emas page, so both stay in sync. Desktop/tablet untouched. */
@media (max-width: 600px) {
	.delivery-journey { gap: 8px; margin-bottom: 18px; }
	.delivery-journey__icon { width: 52px; height: 52px; }
	.delivery-journey__icon svg { width: 24px; height: 24px; }
	.delivery-journey__line { width: 20px; }
	.verena-logo-icon { width: 34px; height: 34px; }
}
.icon-mask {
	display: inline-block;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center; mask-position: center;
	-webkit-mask-size: contain; mask-size: contain;
}
.pickup-partner {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.calc-edu.pickup-partner {
	padding: 24px 20px;
}
.pickup-partner::before {
	content: '';
	position: absolute;
	inset: -40%;
	background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(255,236,214,0.45) 30%, transparent 60%);
	animation: pickup-light-sweep 7s ease-in-out infinite;
	pointer-events: none;
	z-index: 0;
}
.pickup-partner > * { position: relative; z-index: 1; }
@keyframes pickup-light-sweep {
	0%   { transform: translate(-35%, -25%) scale(1); }
	50%  { transform: translate(35%, 25%) scale(1.15); }
	100% { transform: translate(-35%, -25%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.pickup-partner::before { animation: none; }
}
.delivery-stats {
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: 16px;
	margin: 32px 0 4px;
}
.delivery-stat {
	display: flex; flex-direction: column; align-items: center;
	min-width: 160px;
	padding: 26px 20px;
	background: rgba(201, 162, 75, 0.09);
	border: 1px solid rgba(201, 162, 75, 0.35);
	border-radius: 12px;
}
.delivery-stat svg { margin-bottom: 12px; }
.delivery-stat strong { font-family: var(--font-body); font-weight: 700; font-size: 1.4rem; line-height: 1.2; color: var(--gold-bright); text-align: center; }
.delivery-stat span { font-family: var(--font-body); font-size: 12.5px; font-weight: 600; letter-spacing: 0.03em; color: var(--champagne); margin-top: 10px; }
/* Phone only — smaller delivery-stat cards; desktop/tablet untouched. */
@media (max-width: 600px) {
	.delivery-stats { gap: 10px; margin: 22px 0 4px; }
	.delivery-stat { min-width: 130px; padding: 16px 14px; border-radius: 10px; }
	.delivery-stat svg { width: 17px; height: 17px; margin-bottom: 6px; }
	.delivery-stat strong { font-size: 1.1rem; }
	.delivery-stat span { font-size: 11px; margin-top: 6px; }
}

/* ------------------------------------------------------------------ */
/* Product grid + card                                                 */
/* ------------------------------------------------------------------ */
.grid, .product-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}
@media (min-width: 720px) { .grid, .product-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
@media (min-width: 1080px) { .grid, .product-grid { grid-template-columns: repeat(4, 1fr); } }

.card {
	display: flex;
	flex-direction: column;
	background: var(--champagne);
	border-radius: 4px;
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.card__image {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: repeating-linear-gradient(45deg, #E4D8AF 0px, #E4D8AF 10px, #DDCFA0 10px, #DDCFA0 20px);
	display: flex;
	align-items: center;
	justify-content: center;
}
.card__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card__image-note {
	font-family: var(--font-body);
	font-size: 11px;
	letter-spacing: 0.05em;
	color: #7A6E45;
	background: rgba(242, 233, 204, 0.85);
	padding: 4px 10px;
	border-radius: 2px;
}
.card__body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.card__cat { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-ink); }
.card__title { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 22px; color: var(--ink); margin: 0; }
.card__meta { font-family: var(--font-body); font-size: 13px; color: var(--ink-muted); margin: 0; }
.card__excerpt {
	font-family: var(--font-body);
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--ink-muted);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.card__price { font-family: var(--font-display); font-weight: 600; color: var(--forest); font-size: 1.15rem; margin: 0; }
.card__cta {
	display: flex; align-items: center; gap: 8px; margin-top: 10px;
	color: var(--forest); font-family: var(--font-body); font-size: 13px; font-weight: 700;
}
.card__cta svg path { fill: var(--forest); }

.showcase-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (min-width: 720px) { .showcase-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; } }
.showcase-video {
	position: relative;
	aspect-ratio: 9 / 16;
	border-radius: 4px;
	overflow: hidden;
	background: repeating-linear-gradient(45deg, #E4D8AF 0px, #E4D8AF 10px, #DDCFA0 10px, #DDCFA0 20px);
	display: flex;
	align-items: center;
	justify-content: center;
}
.showcase-video video, .showcase-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.showcase-video__placeholder {
	font-family: var(--font-body);
	font-size: 12px;
	text-align: center;
	letter-spacing: 0.03em;
	color: #7A6E45;
	background: rgba(242, 233, 204, 0.85);
	padding: 8px 14px;
	border-radius: 2px;
	max-width: 80%;
}
.showcase-cta-line { font-family: var(--font-body); font-size: 15px; color: var(--ink-muted); margin: 32px 0 20px; }

/* Service cards (homepage "what we offer") */
.service-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.service-card {
	background: var(--cream);
	border: 1px solid var(--line-light);
	border-radius: var(--radius-lg);
	padding: 32px 28px;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.service-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.service-card h3 { font-style: italic; color: var(--forest); }
.service-card p { color: var(--ink-muted); }
.service-card--dark { background: var(--forest); border-color: transparent; }
.service-card--dark h3 { color: var(--champagne); }
.service-card--dark p { color: var(--champagne-dim); }
.repairs-intro { margin-bottom: var(--space-4); }
.repairs-form { margin-top: var(--space-4); }
/* Phone only — less gap above the Servis form, more room below it before the footer; desktop/tablet untouched. */
@media (max-width: 600px) {
	.repairs-intro { margin-bottom: 20px; margin-top: 24px; }
	.repairs-form { margin-top: 20px; margin-bottom: 40px; }
}
/* Phone only — a little extra clearance below the header, same fix as the bullion checkout pages' back link. Desktop/tablet untouched. */
@media (max-width: 600px) {
	.lm-intro { margin-top: 24px; }
	.jual-emas-intro { margin-top: 24px; }
}
/* Phone only — Custom Design's first section (.band) uses a fixed 88px top
   padding sitewide (no phone override), which reads as too much empty
   space right below the header on this page specifically (it's the very
   first thing here, unlike other .band usages that follow other content).
   Cut down to match the ~24px clearance the other intro pages now use.
   Desktop/tablet, and every other .band on the site, untouched. */
@media (max-width: 600px) {
	.custom-design-band { padding-top: 24px; }
}
/* Phone only — more room below the About page's contact card, before the footer; desktop/tablet untouched. */
@media (max-width: 600px) {
	.about-contact-card { margin-bottom: 40px; }
}

/* ------------------------------------------------------------------ */
/* Testimonials                                                        */
/* ------------------------------------------------------------------ */
.testi-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 780px) { .testi-grid { grid-template-columns: repeat(3, 1fr); } }
.testi-card {
	background: rgba(242, 233, 204, 0.05);
	border: 1px solid rgba(242, 233, 204, 0.12);
	border-radius: 4px;
	padding: 20px 18px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.testi-stars svg { width: 13px; height: 13px; }
.testi-stars { display: flex; gap: 3px; }
.testi-quote { font-family: var(--font-display); font-style: italic; font-size: 15.5px; line-height: 1.5; color: var(--champagne); margin: 0; }
.testi-name { font-family: var(--font-body); font-size: 13.5px; font-weight: 600; color: var(--champagne); margin: 0; }
.testi-loc { font-family: var(--font-body); font-size: 12.5px; color: var(--olive-2); margin: 2px 0 0; }

/* ------------------------------------------------------------------ */
/* Instagram feed                                                      */
/* ------------------------------------------------------------------ */
.ig-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 32px; }
.ig-head .eyebrow { display: block; margin-bottom: 14px; }
.ig-head h2 { color: var(--ink); margin: 0; }
.ig-more { font-family: var(--font-body); font-size: 13.5px; font-weight: 600; color: var(--forest); border-bottom: 1px solid var(--forest); padding-bottom: 2px; white-space: nowrap; }
.ig-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
@media (min-width: 700px) { .ig-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1080px) { .ig-grid { grid-template-columns: repeat(6, 1fr); } }
.ig-item {
	display: block; position: relative; width: 100%; aspect-ratio: 1/1;
	background: repeating-linear-gradient(45deg, #E4D8AF 0px, #E4D8AF 10px, #DDCFA0 10px, #DDCFA0 20px);
	overflow: hidden;
}
.ig-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ig-item__cap { position: absolute; left: 8px; bottom: 8px; font-family: var(--font-body); font-size: 10px; color: #7A6E45; background: rgba(242,233,204,0.85); padding: 2px 6px; border-radius: 2px; }
.ig-item__likes { position: absolute; right: 8px; top: 8px; display: flex; align-items: center; gap: 4px; font-family: var(--font-body); font-size: 10.5px; color: var(--champagne); background: rgba(30,42,30,0.55); padding: 3px 7px; border-radius: 10px; }

/* ------------------------------------------------------------------ */
/* Status badges                                                       */
/* ------------------------------------------------------------------ */
.status-badge {
	display: inline-block;
	padding: 0.22rem 0.7rem;
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.status-available { background: #dcecdc; color: #2f7d4f; }
.status-reserved { background: #f4ead0; color: var(--gold-ink); }
.status-sold { background: #f3ddd6; color: var(--danger); }

/* ------------------------------------------------------------------ */
/* Category filters                                                    */
/* ------------------------------------------------------------------ */
.filter-bar { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; margin-bottom: var(--space-4); }
.filter-pill {
	padding: 0.5rem 1.15rem;
	border: 1px solid var(--line-light-strong);
	border-radius: 999px;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--ink);
	background: var(--cream);
	transition: all 0.15s ease;
}
.filter-pill:hover { border-color: var(--gold); color: var(--gold-ink); }
.filter-pill.is-active { background: var(--gold); color: var(--forest); border-color: transparent; }

/* ------------------------------------------------------------------ */
/* Product detail                                                      */
/* ------------------------------------------------------------------ */
.product-detail { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-4); align-items: start; }
@media (max-width: 780px) { .product-detail { grid-template-columns: 1fr; } }
.product-detail__gallery { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.product-detail__meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: var(--space-2);
	margin: var(--space-3) 0;
	padding: var(--space-3) 0;
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}
.product-detail__meta dt { font-size: 0.78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.product-detail__meta dd { margin: 0.2rem 0 0; font-weight: 700; color: var(--forest); }
.product-price-big { font-family: var(--font-display); font-size: 2.5rem; color: var(--forest); font-weight: 600; }

/* ------------------------------------------------------------------ */
/* Tables (bullion pricing)                                            */
/* ------------------------------------------------------------------ */
.price-table-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
/* Phone only — always stack the Beli LM button(s) below the brand title, for all three brands consistently (Antam already wrapped this way just from having two buttons; Emasku/UBS only have one, so they'd otherwise stay beside the title). Desktop/tablet untouched. */
@media (max-width: 600px) {
	.price-table-head { flex-direction: column; align-items: flex-start; }
}
.table-scroll { overflow-x: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--line-light); }
.price-table { width: 100%; border-collapse: collapse; background: var(--cream); }
.price-table th, .price-table td { padding: 1rem 1.15rem; text-align: left; }
.price-table th {
	background: var(--forest);
	color: var(--champagne);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 700;
}
.price-table tbody tr:nth-child(even) { background: var(--bg-alt); }
.price-table tbody tr:hover { background: rgba(201, 162, 75, 0.14); }
/* Phone only — tighter table padding, smaller price text; desktop/tablet untouched. */
@media (max-width: 600px) {
	.price-table th, .price-table td { padding: 0.75rem 0.6rem; }
	.price-table td { font-size: 0.85rem; }
}

/* Combined 3-brand table on the Logam Mulia overview page — one sell-price
   column per brand, centred, with a divider (.price-table--group-start)
   between brands so the columns read clearly at a glance. */
.price-table--combined th, .price-table--combined td { padding: 0.75rem 0.85rem; text-align: center; white-space: nowrap; }
.price-table--combined th:first-child, .price-table--combined td:first-child { text-align: left; }
.price-table--combined .price-table--group-start { border-left: 1px solid var(--line-light); }
.price-table--combined thead .price-table--group-start { border-left-color: rgba(242, 233, 204, 0.25); }
@media (max-width: 600px) {
	.price-table--combined th, .price-table--combined td { padding: 0.6rem 0.5rem; font-size: 0.78rem; }
}

/* Logam Mulia brand strip — three equal-width badges spanning the full container, so the middle one sits at page-center. */
.brand-strip { display: grid; grid-template-columns: 1fr; gap: 16px; margin: var(--space-2) 0 var(--space-3); }
@media (min-width: 720px) { .brand-strip { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.brand-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0.5rem 2rem;
	background: #FFFFFF;
	border: 1px solid var(--line-light);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	cursor: pointer;
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.brand-badge:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--gold); }
.brand-badge img { height: 88px; width: auto; max-width: 100%; object-fit: contain; display: block; }
/* UBS/Emasku read visually "heavier" than Antam at the same pixel height
   (denser marks, less internal whitespace), so they're sized down slightly
   to match Antam's visual weight rather than its exact pixel height. */
.brand-badge img[src*="ubs-logo"], .brand-badge img[src*="emasku-logo"] { height: 75px; }

/* Brand detail pages (Antam/UBS/Emasku) show this same badge as a static
   logo, not a link — no hover/pointer affordance, sized to match the photo's
   width below it (both scaled to 2/3 of their original full-width size). */
.bullion-detail__media .brand-badge { cursor: default; width: 66.67%; height: 80px; }
.bullion-detail__media .brand-badge:hover { box-shadow: var(--shadow-sm); transform: none; border-color: var(--line-light); }
.bullion-detail__media .brand-badge img { height: 73px; }
.bullion-detail__media .brand-badge img[src*="ubs-logo"], .bullion-detail__media .brand-badge img[src*="emasku-logo"] { height: 63px; }
/* Phone only — smaller brand badges, more breathing room on the sides; desktop/tablet untouched. */
@media (max-width: 600px) {
	.container { padding: 0 32px; }
	.brand-strip { gap: 10px; }
	.brand-badge { padding: 0.4rem 1.5rem; }
	.brand-badge img { height: 56px; }
	.brand-badge img[src*="ubs-logo"], .brand-badge img[src*="emasku-logo"] { height: 46px; }
}

/* ------------------------------------------------------------------ */
/* Homepage "Logam Mulia Emas Referensi" cards                         */
/* ------------------------------------------------------------------ */
/* Section-level spacing is much tighter than the site's other homepage
   bands (see .gold-ref-section below) — the card content is sized up to
   compensate so it doesn't read as cramped inside that smaller shell. */
.gold-ref-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 720px) { .gold-ref-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
.gold-ref-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 19px 14px;
	background: #FFFFFF;
	border: 1px solid var(--line-light);
	border-radius: var(--radius-md, 8px);
	box-shadow: var(--shadow-sm);
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.gold-ref-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--gold); }
.gold-ref-card__logo { height: 31px; width: auto; max-width: 100%; object-fit: contain; margin-bottom: 10px; }
.gold-ref-card__label { font-family: var(--font-body); font-weight: 700; font-size: 1.02rem; color: var(--ink); margin-bottom: 10px; }
.gold-ref-card__price { font-family: var(--font-body); font-weight: 700; font-size: 1.26rem; color: var(--ink); margin: 0; }
.gold-ref-card__unit { font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-muted); margin-top: 5px; }
/* Phone only — smaller cards; desktop/tablet untouched. */
@media (max-width: 600px) {
	.gold-ref-grid { gap: 7px; }
	.gold-ref-card { padding: 14px 10px; }
	.gold-ref-card__logo { height: 24px; margin-bottom: 7px; }
	.gold-ref-card__price { font-size: 1.08rem; }
}

/* Homepage referensi section shell — half the vertical padding/head spacing
   of the site's other bands (.band's shared 88px / .band__head's shared
   48px), since this section's own card content already carries plenty of
   visual weight without that much surrounding whitespace. */
/* This section and Custom Showcase right below it are both champagne — with
   no divider they read as one unbroken field, which is what made the gap
   between them look like it had "no end". A hairline in the brand's gold
   accent (same tint the gold-ticker's own border uses) closes it off. */
.gold-ref-section { padding: 44px 24px; border-bottom: 1px solid rgba(201, 162, 75, 0.35); }
.gold-ref-section .band__head { margin-bottom: 24px; }

/* Bullion brand detail page (e.g. Antam) — photo + gram/tahun/harga picker. */
/* Phone only — back link to the Logam Mulia overview, top-left of every bullion checkout page; hidden on desktop/tablet. */
.bullion-back-link { display: none; }
@media (max-width: 600px) {
	.bullion-back-link {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		font-size: 15px;
		font-weight: 600;
		color: var(--gold-ink);
		margin: 10px 0 16px;
	}
}
.bullion-back-link:hover { color: var(--gold-bright); }
.bullion-detail { display: grid; grid-template-columns: 1fr; gap: var(--space-4); align-items: start; }
@media (min-width: 720px) { .bullion-detail { grid-template-columns: 1fr 1fr; } }
.bullion-detail__photo { width: 66.67%; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); display: block; }
.bullion-detail__price { font-size: 1.5rem; font-weight: 700; color: var(--forest); margin: 0; }

/* ------------------------------------------------------------------ */
/* Forms (calculator / estimator / custom design)                     */
/* ------------------------------------------------------------------ */
.form-card {
	background: var(--cream);
	border: 1px solid var(--line-light);
	border-radius: var(--radius-lg);
	padding: 36px 28px;
	display: flex;
	flex-direction: column;
	gap: 22px;
}
.form-field { margin-bottom: var(--space-2); }
.form-field label, .field-label {
	display: block;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 8px;
	color: var(--forest);
}
.form-field input, .form-field select, .form-field textarea, .vj-field {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1px solid var(--line-light-strong);
	border-radius: var(--radius);
	font-size: 14px;
	font-family: var(--font-body);
	background: #FBF7EA;
	color: var(--ink);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-field input::placeholder, .vj-field::placeholder { color: #9a9078; }
.form-field select:disabled { background: #EFEADA; color: #9a9078; cursor: not-allowed; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus, .vj-field:focus {
	outline: none;
	border-color: var(--gold);
	box-shadow: 0 0 0 3px rgba(201, 162, 75, 0.18);
}
/* Phone only — mobile browsers render a native <select> popup that doesn't
   reliably inherit the field's own font-size, so its option list can look
   noticeably smaller than the closed field's text; setting it explicitly on
   <option> fixes that. Also nudges selects to 16px, which avoids iOS Safari
   auto-zooming the page on focus for fields under that size. Desktop/tablet
   untouched (their native dropdown rendering doesn't have this issue). */
@media (max-width: 600px) {
	.form-field select, .vj-field select, select { font-size: 16px; }
	option { font-size: 16px; }
}
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
	cursor: pointer;
	user-select: none;
	font-family: var(--font-body);
	font-size: 13px;
	padding: 8px 16px;
	border-radius: 20px;
	border: 1px solid var(--line-light-strong);
	color: var(--ink);
	background: transparent;
	transition: all 0.15s ease;
}
.chip:hover { border-color: var(--gold); }
.chip.is-active { background: var(--gold); color: var(--forest); border-color: var(--gold); }
.form-note {
	display: flex; align-items: center; gap: 8px;
	padding: 2px 0 2px 12px; border-left: 2px solid var(--gold);
	font-family: var(--font-body); font-size: 13px; font-style: italic; color: #7A6E45;
}
.form-note svg { flex-shrink: 0; }
.form-note__label { text-decoration: underline; font-style: normal; }
.required-mark { color: var(--danger); }
.field-optional { font-weight: 400; font-size: 12px; color: #9a9078; }
.btn.is-disabled { opacity: 0.6; cursor: not-allowed; }
.form-error { color: var(--danger); font-size: 13px; margin: -10px 0 0; }
.form-hint { font-size: 13px; color: #9a9078; margin: -10px 0 0; }
.honeypot-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
[x-cloak] { display: none !important; }

/* ------------------------------------------------------------------ */
/* Calculator                                                          */
/* ------------------------------------------------------------------ */
.calc-item-row {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr auto;
	gap: var(--space-2);
	align-items: end;
	padding: var(--space-2);
	background: var(--cream);
	border: 1px solid var(--line-light);
	border-radius: var(--radius-lg);
	margin-bottom: var(--space-2);
}
@media (max-width: 700px) { .calc-item-row { grid-template-columns: 1fr 1fr; } }
.calc-remove-btn { background: none; border: none; color: var(--danger); cursor: pointer; font-size: 1.3rem; line-height: 1; padding: 0.5rem; transition: transform 0.15s ease; }
.calc-remove-btn:hover { transform: scale(1.15); }
.calc-total-bar {
	background: var(--forest);
	border: 1px solid var(--forest);
	color: var(--champagne);
	border-radius: var(--radius-lg);
	padding: var(--space-3);
	display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-2);
	margin: var(--space-3) 0;
}
.calc-total-bar__value { font-family: var(--font-display); font-size: 2.1rem; color: var(--gold-bright); font-weight: 600; }
.disclaimer {
	font-size: 0.82rem; color: var(--ink-muted);
	background: var(--bg-alt); border-radius: var(--radius);
	padding: var(--space-2); border-left: 3px solid var(--gold);
}
.share-link-box {
	background: rgba(201, 162, 75, 0.08);
	border: 1px dashed var(--gold);
	border-radius: var(--radius-lg);
	padding: var(--space-2) var(--space-3);
	display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-2);
}
.share-link-box code { color: var(--gold-ink); }

/* ------------------------------------------------------------------ */
/* Gold net-worth calculator (multi-item, two-category)                */
/* ------------------------------------------------------------------ */
.calc-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-3); align-items: start; }
@media (min-width: 900px) { .calc-layout { grid-template-columns: 1.7fr 1fr; } }

.calc-item {
	background: var(--cream);
	border: 1px solid var(--line-light);
	border-radius: var(--radius-lg);
	padding: 16px 18px;
	margin-bottom: 16px;
}
.calc-item__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.calc-cat { display: inline-flex; gap: 3px; background: var(--bg-alt); border-radius: 999px; padding: 3px; }
.calc-cat button { border: none; background: none; padding: 7px 16px; border-radius: 999px; font-family: var(--font-body); font-size: 13px; font-weight: 600; cursor: pointer; color: var(--ink-muted); transition: background 0.15s ease, color 0.15s ease; }
.calc-cat button.is-active { background: var(--gold); color: var(--forest); }
.calc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .calc-fields { grid-template-columns: 1fr; } }
.calc-fields--triple { grid-template-columns: 1.4fr 1fr 1fr; }
@media (max-width: 520px) { .calc-fields--triple { grid-template-columns: 1fr; } }
.calc-hint { font-size: 12px; color: var(--ink-muted); margin: 6px 0 0; line-height: 1.5; }
.calc-item__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-light); }
.calc-item__foot-label { font-size: 12px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.calc-item__value { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; color: var(--forest); }
.calc-remove { background: none; border: none; color: var(--danger); cursor: pointer; font-size: 1.4rem; line-height: 1; padding: 2px 6px; }
.calc-remove:hover { transform: scale(1.15); }
.calc-add { margin-bottom: var(--space-3); }

.calc-summary { position: static; }
@media (min-width: 900px) { .calc-summary { position: sticky; top: 96px; } }
.calc-summary-card { background: var(--forest); color: var(--champagne); border-radius: var(--radius-lg); padding: 26px 24px; }
.calc-summary-card h3 { color: var(--champagne); font-style: italic; font-size: calc(1.55rem + 2px); margin: 0 0 4px; }
.calc-summary-card .calc-sub { font-size: 14.5px; color: var(--champagne-dim); margin: 0 0 16px; }
.calc-total-big { font-family: var(--font-display); font-size: clamp(1.45rem, 3.6vw, 1.85rem); color: var(--gold-bright); font-weight: 600; line-height: 1.15; white-space: nowrap; }
.calc-subtotals { font-size: 13.5px; color: var(--champagne-dim); margin: 8px 0 18px; }
.calc-subtotals strong { color: var(--champagne); }
.calc-summary-card .btn-gold { font-size: 1rem; padding: 15px 20px; }
/* Phone only — more room below the "Estimasi Nilai Emas Anda" card, before the footer; desktop/tablet untouched. */
@media (max-width: 600px) {
	.calc-summary-card { margin-bottom: 40px; }
}
.calc-disclaimer { font-size: 12.5px; line-height: 1.6; color: var(--olive-2); margin: 16px 0 0; }

/* Calculator — how-to steps + karat education */
.calc-howto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0 0 20px; }
@media (max-width: 640px) { .calc-howto { grid-template-columns: 1fr; } }
.calc-howto__step { background: var(--cream); border: 1px solid var(--line-light); border-radius: var(--radius-lg); padding: 16px 18px; }
.calc-howto__num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--gold); color: var(--forest); font-family: var(--font-body); font-weight: 700; font-size: 14px; margin-bottom: 10px; }
.calc-howto__step p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-muted); }
.calc-howto__step strong { color: var(--forest); }

.calc-edu { background: var(--cream); border: 1px solid var(--line-light); border-radius: var(--radius-lg); padding: 0 20px; margin: 0 0 28px; }
.calc-edu summary { cursor: pointer; padding: 15px 0; font-family: var(--font-body); font-weight: 700; font-size: 15px; color: var(--forest); list-style: none; display: flex; align-items: center; gap: 10px; }
.calc-edu summary::-webkit-details-marker { display: none; }
.calc-edu summary svg { flex-shrink: 0; }
.calc-edu[open] summary { border-bottom: 1px solid var(--line-light); }
.calc-edu__body { padding: 16px 0 20px; font-size: 14px; line-height: 1.7; color: var(--ink-muted); }
.calc-edu__body p { margin: 0 0 12px; }
.calc-edu__body strong { color: var(--forest); }
/* Phone only — smaller howto/FAQ/pickup boxes; desktop/tablet untouched. */
@media (max-width: 600px) {
	.calc-howto { gap: 10px; margin-bottom: 14px; }
	.calc-howto__step { padding: 12px 14px; }
	.calc-howto__num { width: 22px; height: 22px; font-size: 12px; margin-bottom: 6px; }
	.calc-howto__step p { font-size: 13px; }
	.calc-edu { padding: 0 14px; margin-bottom: 18px; }
	.calc-edu summary { padding: 12px 0; font-size: 13.5px; gap: 8px; }
	.calc-edu__body { padding: 10px 0 14px; font-size: 13px; }
	.calc-edu.pickup-partner { padding: 16px 14px; }
}

.calc-title-divider { display: flex; align-items: center; gap: 16px; margin: 32px 0 20px; }
.calc-title-divider__line { flex: 1; height: 1px; background: var(--line-light-strong); }
.calc-title-divider h3 { margin: 0; font-size: calc(1.15rem + 2px); font-weight: 700; font-style: italic; white-space: nowrap; }
.jual-emas-why { max-width: 480px; margin: 0 auto; text-align: left; }
.jual-emas-why h3 { text-align: center; font-style: italic; margin: 0 0 14px; }
.jual-emas-why__list { margin: 0; padding-left: 22px; color: var(--ink-muted); font-size: 15px; line-height: 1.6; }
.jual-emas-why__list li { margin-bottom: 8px; }
.jual-emas-why__list li:last-child { margin-bottom: 0; }
.jual-emas-why__list strong {
	background: linear-gradient(90deg, var(--gold-ink) 0%, var(--gold-bright) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
/* Phone only — jump-link button to the calculator below; hidden on desktop/tablet. */
.jual-emas-jump-links { display: none; }
@media (max-width: 600px) {
	.jual-emas-jump-links { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 18px; }
	#jual-emas-calculator { scroll-margin-top: 90px; }
}
/* Phone only — "Hitung Total Nilai Emas Anda" title moves above the howto
   steps; its usual spot right above the calculator is hidden there instead.
   Desktop/tablet: the reverse (unchanged from before). */
.calc-title-divider--mobile { display: none; }
@media (max-width: 600px) {
	.calc-title-divider--mobile { display: flex; }
	.calc-title-divider--desktop { display: none; }
}
/* Phone only — bullion/Kadar tables move to right below the intro, ahead of
   the howto/FAQ/pickup boxes and the calculator; their normal spot in the
   calculator's right column is hidden there instead. Desktop/tablet: the
   reverse (unchanged from before). */
.lm-tables-mobile-top { display: none; }
@media (max-width: 600px) {
	.lm-tables-mobile-top { display: block; margin: 0 0 var(--space-4); }
	.lm-tables-desktop { display: none; }
}
.karat-ref { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 13.5px; }
.karat-ref th, .karat-ref td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line-light); }
.karat-ref th { color: var(--gold-ink); font-family: var(--font-body); text-transform: uppercase; font-size: 11px; letter-spacing: 0.08em; font-weight: 700; }
.karat-ref td:first-child { font-weight: 600; color: var(--forest); }
.calc-save { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(242,233,204,0.14); }
.calc-save h4 { color: var(--champagne); font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; margin: 0 0 10px; }
.calc-save input { margin-bottom: 8px; }
.calc-save .share-link-box { background: rgba(242,233,204,0.06); border-color: rgba(242,233,204,0.3); }
.calc-save .share-link-box code { color: var(--gold-bright); }

/* ------------------------------------------------------------------ */
/* Trust strip (homepage)                                              */
/* ------------------------------------------------------------------ */
.trust-strip { padding-bottom: 0; }
.trust-strip__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--space-3);
	background: var(--cream);
	border: 1px solid var(--line-light);
	border-radius: var(--radius-lg);
	padding: var(--space-4) var(--space-3);
	box-shadow: var(--shadow-sm);
}
.trust-strip__item { text-align: center; }
.trust-strip__item h3 { color: var(--forest); font-style: italic; font-size: 1.3rem; margin-bottom: 0.35rem; }
.trust-strip__item p { color: var(--ink-muted); }
.trust-strip__item a { color: var(--gold-ink); }
.trust-strip__item a:hover { text-decoration: underline; }
.trust-strip__note { text-align: center; font-size: 0.82rem; color: var(--ink-muted); margin: var(--space-2) auto 0; max-width: 640px; }
.icon-badge {
	width: 52px; height: 52px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: rgba(201, 162, 75, 0.1); border: 1px solid var(--gold);
	color: var(--gold-ink); margin-bottom: var(--space-2);
}
.icon-badge svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.icon-badge--dark { background: var(--gold); border-color: transparent; color: var(--forest); }

/* ------------------------------------------------------------------ */
/* Footer                                                              */
/* ------------------------------------------------------------------ */
.site-footer {
	width: 100%;
	background: var(--forest);
	box-sizing: border-box;
	padding: 64px 24px 32px;
	margin-top: 0;
}
.site-footer__inner { max-width: var(--wrap-content); margin: 0 auto; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 860px) { .footer-grid { grid-template-columns: 1.1fr 1fr 1fr; gap: 48px; } }
.footer-logo { height: 104px; width: auto; object-fit: contain; margin-bottom: 18px; display: block; }
.footer-blurb { font-family: var(--font-body); font-size: 14px; line-height: 1.7; color: var(--sand); max-width: 320px; margin: 0; }
.footer-socials { display: flex; gap: 14px; margin-top: 20px; }
.footer-social {
	display: flex; align-items: center; justify-content: center;
	width: 38px; height: 38px;
	border: 1px solid rgba(237, 227, 192, 0.3);
	border-radius: 50%;
	color: var(--sand);
	transition: color 0.2s ease, border-color 0.2s ease;
}
.footer-social:hover { color: var(--champagne); border-color: var(--champagne); }
.footer-social svg { fill: currentColor; }
.footer-col h3 {
	font-family: var(--font-body);
	font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--gold); margin: 0 0 18px;
}
.footer-col p { font-family: var(--font-body); font-size: 14px; line-height: 1.8; color: var(--sand); margin: 0 0 14px; }
.footer-link { color: var(--sand); font-size: 14px; font-weight: 500; transition: color 0.2s ease; }
.footer-link:hover { color: var(--champagne); }
.footer-map { width: 100%; aspect-ratio: 4/3; border-radius: 4px; overflow: hidden; border: 1px solid rgba(237, 227, 192, 0.15); }
.footer-map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(0.3) sepia(0.15); }
.footer-bottom {
	margin-top: 56px; padding-top: 24px;
	border-top: 1px solid rgba(237, 227, 192, 0.12);
	display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center;
}
.footer-bottom p { font-family: var(--font-body); font-size: 12px; color: var(--olive); margin: 0; }
.footer-bottom__links { display: flex; gap: 20px; }
.footer-bottom__links a { color: var(--sand); font-size: 12px; }
.footer-bottom__links a:hover { color: var(--champagne); }

/* ------------------------------------------------------------------ */
/* Utility                                                             */
/* ------------------------------------------------------------------ */
.stack { display: flex; flex-direction: column; gap: var(--space-2); }
.row { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.mt-4 { margin-top: var(--space-4); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-0 { margin-bottom: 0; }
.empty-state { text-align: center; padding: var(--space-5) var(--space-2); color: var(--text-muted); }

.price-history { margin-bottom: var(--space-4); }
.price-history__canvas-wrap { position: relative; height: 320px; width: 100%; }
@media (max-width: 600px) {
	.price-history__canvas-wrap { height: 240px; }
}

.pagination { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; margin-top: var(--space-4); }
.pagination .page-numbers {
	display: flex; align-items: center; justify-content: center;
	min-width: 38px; height: 38px; padding: 0 10px;
	font-family: var(--font-body); font-size: 13px; font-weight: 600;
	color: var(--ink); background: var(--champagne);
	border: 1px solid var(--line-light); border-radius: var(--radius-md, 8px);
	text-decoration: none;
	transition: border-color 0.2s ease, color 0.2s ease;
}
.pagination .page-numbers:hover { border-color: var(--gold); color: var(--gold-ink); }
.pagination .page-numbers.current { background: var(--gold); color: var(--forest); border-color: transparent; }
.pagination .page-numbers.dots { border: none; background: none; }