/*
 * Page-specific layout (not shared components — those live in components.css).
 * Section by section, matching 07-页面框架.md.
 */

/* ---------- category / archive page ---------- */

.vt-category-page { max-width: 84rem; margin: 0 auto; padding: 0 clamp(1.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem); }

.vt-breadcrumb-nav { font-size: 0.78rem; color: var(--ink-faint); padding: 1.2rem 0 0; }
.vt-breadcrumb-nav a { color: var(--ink-soft); text-decoration: none; }
.vt-breadcrumb-nav a:hover { color: var(--ink); }

.vt-category-header { padding: 1.4rem 0 1.8rem; border-bottom: 1px solid var(--line-soft); }
.vt-category-header h1 { margin: 0; font-size: clamp(1.8rem, 3.2vw, 2.5rem); font-weight: 640; }
.vt-category-desc { margin-top: 0.6rem; max-width: 42rem; color: var(--ink-soft); font-size: 0.94rem; }
.vt-category-from-price { margin: 0.6rem 0 0; font-size: 0.92rem; color: var(--ink-soft); }
.vt-category-from-price strong { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }

.vt-category-toolbar { padding: 1.2rem 0; border-bottom: 1px solid var(--line-soft); }
.vt-filters { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.vt-filter { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.78rem; color: var(--ink-soft); }
.vt-filter select {
	font-family: var(--font-body); font-size: 0.86rem; color: var(--ink);
	background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: 0.4rem 0.6rem;
}
.vt-filter select:disabled { color: var(--ink-faint); cursor: not-allowed; }
.vt-filter-sort { margin-left: auto; }

.vt-product-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1.2rem, 2.5vw, 2rem);
	padding: clamp(1.8rem, 3.5vw, 2.6rem) 0;
}
@media (max-width: 1024px) { .vt-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .vt-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.vt-pagination { padding: 1rem 0 2rem; text-align: center; }
.vt-pagination .page-numbers { display: inline-flex; gap: 0.5rem; list-style: none; padding: 0; margin: 0; }
.vt-pagination a, .vt-pagination span { color: var(--ink-soft); text-decoration: none; font-size: 0.86rem; padding: 0.3rem 0.6rem; }
.vt-pagination .current { color: var(--ink); font-weight: 600; }

.woocommerce-info, .woocommerce-message { list-style: none; padding: 1rem; border: 1px solid var(--line); border-radius: 4px; margin: 1.5rem 0; font-size: 0.88rem; }

/* ---------- product detail page ---------- */

.vt-pdp { max-width: 84rem; margin: 0 auto; padding: 0 clamp(1.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem); }

.vt-pdp-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: clamp(2rem, 5vw, 4rem);
	padding: 1.4rem 0 clamp(2.5rem, 5vw, 3.5rem);
}
@media (max-width: 860px) { .vt-pdp-grid { grid-template-columns: minmax(0, 1fr); } }

/* Same legacy-float problem as the gallery override below, but here it hits the grid
 * item itself: content-single-product.php's summary column carries WooCommerce's own
 * "summary" class (`class="summary entry-summary vt-pdp-summary"`), so WC's unconditional
 * `.woocommerce div.product div.summary { float: right; width: 48% }` shrank it to 48%
 * of its own grid track — the price/configurator/add-to-cart column rendered at less
 * than half its allotted width, with dead space beside it, on every PDP. */
.vt-pdp-summary { float: none !important; width: 100% !important; }

/* WooCommerce's own woocommerce-layout.css carries a legacy, unconditional rule —
 * `.woocommerce div.product div.images { float: left; width: 48% }` — written for its
 * classic side-by-side float layout, where gallery and summary each float at 48% inside
 * a shared parent. We use CSS Grid for that split instead (.vt-pdp-grid), so this rule
 * now nests one level too deep: it shrinks the gallery to 48% of its own grid column
 * (already sized correctly by the grid), leaving the product photo filling under half
 * its column with dead space beside it — on every PDP, at every desktop width, not just
 * a specific breakpoint. Needs !important: `.woocommerce div.product div.images` outweighs
 * a plain `.vt-pdp-gallery .woocommerce-product-gallery` on specificity alone. */
.vt-pdp-gallery .woocommerce-product-gallery { float: none !important; width: 100% !important; }
.vt-pdp-gallery img { width: 100%; height: auto; display: block; background: var(--paper-raised); }
.vt-pdp-gallery .woocommerce-product-gallery__image + .woocommerce-product-gallery__image { margin-top: 0.6rem; }

.vt-pdp-summary .product_title { font-family: var(--font-display); font-weight: 640; font-size: clamp(1.6rem, 2.8vw, 2.1rem); margin: 0 0 0.6rem; }
.vt-pdp-summary .woocommerce-product-details__short-description { color: var(--ink-soft); font-size: 0.94rem; margin: 0.8rem 0; }
/* Without an explicit color, WooCommerce's own default CSS colors this element with its
 * --wc-highlight token (#958e09, olive-gold) — not a VANTYRE accent, just unthemed default
 * bleeding through, and it fails contrast (3.2:1 vs the 4.5:1 body-text floor). WC's own
 * rule (`.woocommerce div.product p.price`) outweighs a plain `.vt-pdp-summary .price`
 * on specificity alone, so this needs !important — same precedent as
 * `.wc-block-components-button` above. */
.vt-pdp-summary .price { font-family: var(--font-display); font-size: 1.3rem; color: var(--ink) !important; }

.vt-financing-note { font-size: 0.8rem; color: var(--ink-faint); margin: 0.6rem 0 0; }

/* .vt-trust (components.css) is a 4-column grid tuned for full page width (homepage band).
 * On the PDP it's reused inside .vt-pdp-summary, which is only ~half the page width on
 * desktop — 4 columns there squeezes each badge into ~100px and the title/body text
 * overlaps illegibly. The component's own max-width:860px viewport breakpoint doesn't
 * help because the viewport is still wide even though this element's own column is narrow. */
.vt-pdp-summary .vt-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: clamp(1.6rem, 3vw, 2rem); }
.vt-financing-note em { font-style: normal; border-bottom: 1px dotted var(--line); }

/* ---------- PDP tabs (Description / Reviews) ---------- */
/* Classes/markup are WooCommerce core (single-product/tabs/tabs.php,
   single-product-reviews.php), not VANTYRE-authored — theme has no override for either,
   this just themes the existing output. Tab switching JS is WooCommerce core's own
   wc-single-product script, auto-enqueued on any page with .woocommerce-tabs present. */
.vt-pdp-tabs { max-width: 84rem; margin: 0 auto; padding: clamp(2rem, 5vw, 3rem) clamp(1.5rem, 5vw, 4rem) 0; }
.woocommerce-tabs { max-width: 46rem; }
.woocommerce-tabs ul.tabs { display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.woocommerce-tabs ul.tabs li { margin: 0; }
.woocommerce-tabs ul.tabs li a { display: block; padding: 0 0 0.8rem; font-size: 0.85rem; color: var(--ink-soft); text-decoration: none; }
.woocommerce-tabs ul.tabs li.active a { color: var(--ink); font-weight: 600; border-bottom: 2px solid var(--accent-strong); margin-bottom: -1px; }
.woocommerce-tabs .wc-tab { padding: 1.6rem 0; color: var(--ink-soft); font-size: 0.94rem; line-height: 1.65; }
/* No default display:none here — WC core's single-product.js hides/shows panels itself via
   jQuery on document ready (relies on jQuery, same baseline every WC block/cart page here
   already assumes). Setting display:none in CSS would leave every tab permanently blank
   if that script ever failed to run, which is worse than the unstyled flash it prevents. */
.woocommerce-Reviews-title { font-family: var(--font-display); font-weight: 620; font-size: 1.2rem; color: var(--ink); margin: 0 0 1.2rem; }
.woocommerce-Reviews-title span { font-weight: inherit; }
.woocommerce-noreviews { color: var(--ink-faint); font-size: 0.9rem; }
#comments .commentlist { list-style: none; margin: 0 0 2rem; padding: 0; }
#comments .comment { border-top: 1px solid var(--line); padding: 1.2rem 0; }
#comments .comment_container { display: flex; gap: 1rem; }
#comments .avatar { border-radius: 50%; flex-shrink: 0; }
#comments .comment-text { flex: 1; }
#comments .woocommerce-review__author { font-weight: 600; color: var(--ink); font-size: 0.9rem; }
#comments .woocommerce-review__dash { color: var(--ink-faint); margin: 0 0.3rem; }
#comments .woocommerce-review__published-date { color: var(--ink-faint); font-size: 0.82rem; }
#comments .star-rating { color: var(--accent-strong); font-size: 0.85rem; margin: 0.3rem 0; }
#comments .description p { margin: 0.4rem 0 0; font-size: 0.9rem; color: var(--ink-soft); }
#review_form_wrapper #reply-title { font-family: var(--font-display); font-weight: 620; font-size: 1.05rem; color: var(--ink); display: block; margin-bottom: 1rem; }
.comment-form-rating label, .comment-form-comment label, .comment-form-author label, .comment-form-email label {
	display: block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); margin-bottom: 0.4rem;
}
.comment-form-rating select, .comment-form-comment textarea, .comment-form-author input, .comment-form-email input {
	width: 100%; max-width: 26rem; font-family: var(--font-body); font-size: 0.9rem; color: var(--ink);
	background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: 0.6rem 0.8rem;
}
.comment-form-comment textarea { max-width: none; width: 100%; }
#commentform p { margin: 0 0 1rem; }
#commentform .form-submit input {
	font-family: var(--font-body); font-weight: 600; font-size: 0.85rem; color: #fff;
	background: var(--ink); border: none; border-radius: 999px; padding: 0.7rem 1.6rem; cursor: pointer;
}
#commentform .form-submit input:hover { opacity: 0.85; }
.woocommerce-verification-required, .must-log-in { color: var(--ink-faint); font-size: 0.88rem; }
.must-log-in a { color: var(--ink); }

.vt-related { padding: clamp(2rem, 5vw, 3rem) 0; border-top: 1px solid var(--line-soft); }

/* ---------- homepage ---------- */

.vt-hero {
	position: relative;
	background: var(--paper);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
}
@media (max-width: 900px) { .vt-hero { grid-template-columns: minmax(0, 1fr); } }

.vt-hero-inner { display: grid; gap: 1.5rem; max-width: 34rem; padding: clamp(3rem, 8vw, 5rem) clamp(1.5rem, 5vw, 4rem); }
.vt-hero-h1 { margin: 0; font-size: clamp(2.5rem, 5.4vw, 4rem); line-height: 1.05; font-weight: 680; }
.vt-hero-lede { margin: 0; max-width: 30rem; font-size: 1.05rem; color: var(--ink-soft); }
.vt-price-anchor { margin: 0; font-size: 0.88rem; color: var(--ink-soft); }
.vt-price-anchor strong { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.vt-hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.5rem; }

.vt-hero-photo { position: relative; aspect-ratio: 4 / 5; background: var(--paper-raised); overflow: hidden; }
@media (max-width: 900px) { .vt-hero-photo { aspect-ratio: 16 / 10; } }
.vt-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vt-photo-caption {
	position: absolute; left: 1.2rem; bottom: 1.2rem; background: rgba(255,255,255,0.88);
	backdrop-filter: blur(4px); padding: 0.4rem 0.8rem; border-radius: 999px;
	font-size: 0.72rem; letter-spacing: 0.03em; color: var(--ink-soft);
}

.vt-collections { max-width: 84rem; margin: 0 auto; padding: clamp(3.2rem, 7vw, 5.5rem) clamp(1.5rem, 5vw, 4rem) 0; }
.vt-collection-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (max-width: 900px) { .vt-collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vt-collection-card { background: var(--paper); padding: clamp(2rem, 4vw, 2.5rem) 1.5rem; display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; text-decoration: none; color: var(--ink); transition: background 0.2s ease; }
.vt-collection-card:hover { background: var(--paper-raised); }
.vt-collection-card:hover .facet-icon path { stroke: var(--ink); }
.vt-collection-card .facet-icon { width: 2.4rem; height: 2.4rem; }
.vt-collection-card .facet-icon path { stroke: var(--ink-soft); transition: stroke 0.2s ease; }
.vt-collection-card h3 { margin: 0; font-family: var(--font-display); font-weight: 620; font-size: 1.1rem; }
.vt-collection-card p { margin: -0.75rem 0 0; font-size: 0.85rem; color: var(--ink-faint); }
.vt-collection-card .from-price { margin: 0; font-size: 0.8rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.vt-collection-card .from-price strong { color: var(--ink); font-weight: 600; }

.vt-builder-intro { max-width: 84rem; margin: 0 auto; padding: clamp(3.2rem, 7vw, 5.5rem) clamp(1.5rem, 5vw, 4rem) 0; }
.vt-builder-page { padding-bottom: clamp(1rem, 3vw, 2rem); }

.vt-metal-strip { max-width: 84rem; margin: clamp(2.4rem, 5vw, 3.5rem) auto 0; padding: 0 clamp(1.5rem, 5vw, 4rem); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (max-width: 700px) { .vt-metal-strip { grid-template-columns: minmax(0, 1fr); } }
.vt-metal-strip figure { margin: 0; position: relative; background: var(--paper); aspect-ratio: 16 / 10; overflow: hidden; }
.vt-metal-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vt-metal-strip figcaption { position: absolute; left: 1rem; bottom: 1rem; background: rgba(255,255,255,0.88); padding: 0.3rem 0.7rem; border-radius: 999px; font-size: 0.74rem; color: var(--ink-soft); }

.vt-configurator-preview {
	max-width: 84rem; margin: clamp(2.4rem, 5vw, 3.5rem) auto 0; padding: clamp(2rem, 5vw, 3.2rem) clamp(1.5rem, 5vw, 4rem);
	background: var(--paper-raised); border-top: 1px solid var(--paper-line); border-bottom: 1px solid var(--paper-line);
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
@media (max-width: 860px) { .vt-configurator-preview { grid-template-columns: minmax(0, 1fr); } }
.vt-configurator-preview h2 { margin: 0.4rem 0 0.9rem; font-size: clamp(1.6rem, 2.8vw, 2.2rem); }
.vt-config-card .vt-configurator { background: var(--paper); box-shadow: var(--shadow); }

.vt-from-home { max-width: 84rem; margin: 0 auto; padding: clamp(3.2rem, 7vw, 5.5rem) clamp(1.5rem, 5vw, 4rem) 0; }
.vt-from-home-page { padding-bottom: clamp(3rem, 6vw, 5rem); }
.vt-from-home-page > p.vt-static-body { max-width: 38rem; }
.vt-from-home-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.4rem, 3vw, 2rem); }
@media (max-width: 900px) { .vt-from-home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vt-from-home-card { border: 1px solid var(--line); border-radius: 6px; padding: 1.6rem; display: flex; flex-direction: column; gap: 0.9rem; }
.vt-from-home-card .icon { width: 1.8rem; height: 1.8rem; }
.vt-from-home-card .icon path { stroke: var(--ink); }
.vt-from-home-card h3 { margin: 0; font-family: var(--font-display); font-size: 1.02rem; font-weight: 620; }
.vt-from-home-card p { margin: 0; font-size: 0.85rem; color: var(--ink-soft); }
.vt-from-home-card .tag { align-self: flex-start; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); border: 1px solid var(--line); border-radius: 999px; padding: 0.2rem 0.6rem; margin-top: 0.2rem; }
.vt-from-home-card-link { text-decoration: none; color: var(--ink); transition: border-color 0.2s ease, background 0.2s ease; }
.vt-from-home-card-link:hover { border-color: var(--ink); background: var(--paper-raised); }

.vt-journal { max-width: 84rem; margin: 0 auto; padding: clamp(3.5rem, 7vw, 5.5rem) clamp(1.5rem, 5vw, 4rem); }
.vt-journal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.2rem); }
@media (max-width: 860px) { .vt-journal-grid { grid-template-columns: minmax(0, 1fr); } }
.vt-journal-card { text-decoration: none; color: var(--ink); border-top: 1px solid var(--line); padding-top: 1.2rem; }
.vt-journal-card h3 { font-family: var(--font-display); font-weight: 620; font-size: 1.12rem; line-height: 1.32; margin: 0 0 0.5rem; }
.vt-journal-card p { margin: 0; font-size: 0.87rem; color: var(--ink-soft); }

/* ---------- diamond education hub ---------- */

.vt-education-hub { max-width: 84rem; margin: 0 auto; padding: clamp(2rem, 5vw, 3rem) clamp(1.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem); }
.vt-education-hub .vt-hero-lede { max-width: 42rem; margin-top: -0.5rem; }
.vt-education-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 2rem; }
@media (max-width: 860px) { .vt-education-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .vt-education-grid { grid-template-columns: minmax(0, 1fr); } }
.vt-education-card { background: var(--paper); padding: clamp(1.8rem, 3.5vw, 2.2rem) 1.5rem; display: flex; flex-direction: column; gap: 0.7rem; text-decoration: none; color: var(--ink); transition: background 0.2s ease; }
.vt-education-card:hover { background: var(--paper-raised); }
.vt-education-card h3 { margin: 0; font-family: var(--font-display); font-weight: 620; font-size: 1.05rem; }
.vt-education-card p { margin: 0; font-size: 0.85rem; color: var(--ink-faint); line-height: 1.5; }
.vt-education-count { margin-top: 0.3rem; font-size: 0.78rem; color: var(--accent-strong); font-weight: 600; }

/* ---------- journal archive + article ---------- */

.vt-journal-archive { max-width: 84rem; margin: 0 auto; padding: clamp(2rem, 5vw, 3rem) clamp(1.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem); }
.vt-journal-filter { display: flex; flex-wrap: wrap; gap: 0.5rem 0.7rem; margin-top: 0.8rem; }
.vt-journal-filter-link { font-size: 0.82rem; color: var(--ink-soft); text-decoration: none; padding: 0.3rem 0; border-bottom: 2px solid transparent; }
.vt-journal-filter-link:hover { color: var(--ink); }
.vt-journal-filter-link.is-active { color: var(--ink); border-bottom-color: var(--accent-strong); font-weight: 600; }
.vt-journal-grid-archive { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.2rem); padding-top: 1.5rem; }
@media (max-width: 860px) { .vt-journal-grid-archive { grid-template-columns: minmax(0, 1fr); } }
.vt-journal-grid-archive .thumb { aspect-ratio: 4/3; overflow: hidden; background: var(--paper-raised); margin-bottom: 0.8rem; }
.vt-journal-grid-archive .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.vt-article { max-width: 84rem; margin: 0 auto; padding: 0 clamp(1.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem); }
.vt-article-title { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 1rem 0; }
.vt-article-hero img { width: 100%; height: auto; display: block; margin-bottom: 1.5rem; }
.vt-article-body { font-size: 1rem; line-height: 1.75; color: var(--ink); }
.vt-article-body h2 { font-family: var(--font-display); font-weight: 640; margin-top: 2.2rem; }
.vt-article-body h3 { font-family: var(--font-display); font-weight: 600; margin-top: 1.8rem; }
.vt-article-body img { max-width: 100%; height: auto; }
.vt-article-body a { color: var(--ink); text-decoration-color: var(--line); }

/* 49 of the 67 imported articles contain a real comparison/myth-vs-fact <table> (WP core
   wraps these in figure.wp-block-table) — there was no table CSS anywhere in the theme, so
   these rendered at browser table-auto defaults. overflow-x:auto is the safety net for any
   table wide enough to still not fit at 100% column width. */
.vt-article-body figure.wp-block-table { max-width: 100%; overflow-x: auto; margin: 1.6rem 0; }
.vt-article-body table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.vt-article-body th, .vt-article-body td { text-align: left; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.vt-article-body thead th { font-family: var(--font-display); font-weight: 620; color: var(--ink); background: var(--paper-raised); }

.vt-article-cta {
	margin: 3rem 0; padding: 2rem; text-align: center; background: var(--paper-raised);
	border-radius: 6px; display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.vt-article-cta p { margin: 0; font-size: 1.3rem; }

.vt-related-articles { border-top: 1px solid var(--line); padding-top: 2rem; }

/* ---------- static content pages ---------- */

.vt-static-page { max-width: 46rem; margin: 0 auto; padding: 0 clamp(1.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem); }
.vt-static-title { font-size: clamp(1.8rem, 3.6vw, 2.4rem); margin: 1rem 0 1.5rem; }
.vt-static-body { font-size: 0.98rem; line-height: 1.75; color: var(--ink); }
.vt-static-body h2 { font-family: var(--font-display); font-weight: 640; margin-top: 2rem; font-size: 1.3rem; }
.vt-static-body a { color: var(--ink); }
/* .vt-static-body a above (2 classes) otherwise beats .vt-btn-solid's own color (1 class),
 * making solid-button text the same color as its background whenever a button sits inside
 * static page copy (e.g. the 404 page's "Back to Home" button). */
.vt-static-body a.vt-btn-solid { color: var(--paper); }

/* Cart/Checkout: wide container (not .vt-static-page's 46rem reading width) so the
 * WooCommerce Blocks content (.wc-block-cart/.wc-block-checkout, own max-width:72rem)
 * has room to actually reach that width and lay out its two-column checkout grid. */
.vt-transaction-page { max-width: 84rem; margin: 0 auto; padding: 0 clamp(1.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem); }
.vt-transaction-page .vt-static-title { margin-bottom: 0; }

.vt-faq-list { display: flex; flex-direction: column; gap: 0.2rem; margin-top: 1rem; }
.vt-faq-item { border-bottom: 1px solid var(--line); padding: 1rem 0; }
.vt-faq-item summary {
	font-family: var(--font-display); font-weight: 600; font-size: 1.02rem;
	cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.vt-faq-item summary::-webkit-details-marker { display: none; }
.vt-faq-item summary::after { content: '+'; font-size: 1.3rem; color: var(--ink-faint); flex-shrink: 0; }
.vt-faq-item[open] summary::after { content: '\2212'; }
.vt-faq-answer { padding-top: 0.8rem; color: var(--ink-soft); font-size: 0.94rem; line-height: 1.7; }

/* ---------- about us page (page-about-us.php, full-bleed custom layout) ---------- */

.vantyre-about-eyebrow { font-family: var(--font-body); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-strong); margin: 0 0 0.6rem; }
.vantyre-about-section h2, .vantyre-about-dark h2, .vantyre-about-hero h1, .vantyre-about-cta h2 { font-family: var(--font-display); font-weight: 640; letter-spacing: -0.01em; margin: 0; }

.vantyre-about-hero {
	background: linear-gradient(rgba(32, 31, 29, 0.5), rgba(32, 31, 29, 0.5)), var(--vantyre-banner-image) var(--ink) center / cover no-repeat;
	color: var(--paper); text-align: center; padding: clamp(4rem, 12vw, 7rem) clamp(1.5rem, 5vw, 4rem);
}
.vantyre-about-hero .vantyre-about-eyebrow { color: rgba(255, 255, 255, 0.8); }
.vantyre-about-hero h1 { font-size: clamp(2rem, 4.4vw, 3rem); max-width: 44rem; margin: 0 auto; text-wrap: balance; }
.vantyre-about-hero > p { max-width: 34rem; margin: 1rem auto 0; color: rgba(255, 255, 255, 0.85); font-size: 1rem; line-height: 1.6; }

.vantyre-about-section { max-width: 84rem; margin: 0 auto; padding: clamp(3rem, 7vw, 5rem) clamp(1.5rem, 5vw, 4rem); }
.vantyre-about-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.vantyre-about-split h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); }
.vantyre-about-copy p { margin: 0 0 1rem; color: var(--ink-soft); line-height: 1.75; }
.vantyre-about-copy p:last-child { margin-bottom: 0; }
@media (max-width: 760px) { .vantyre-about-split { grid-template-columns: minmax(0, 1fr); } }

.vantyre-about-section-heading { text-align: center; max-width: 40rem; margin: 0 auto clamp(2rem, 4vw, 2.8rem); }
.vantyre-about-section-heading h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); }

.vantyre-about-card-grid { display: grid; gap: clamp(1.2rem, 2.5vw, 1.6rem); }
.vantyre-about-card-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vantyre-about-card-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .vantyre-about-card-grid--three, .vantyre-about-card-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .vantyre-about-card-grid--three, .vantyre-about-card-grid--four { grid-template-columns: minmax(0, 1fr); } }

.vantyre-about-card { border: 1px solid var(--line); border-radius: 4px; padding: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.vantyre-about-card h3 { font-family: var(--font-display); font-weight: 620; font-size: 1.05rem; margin: 0; }
.vantyre-about-card p { margin: 0; color: var(--ink-soft); font-size: 0.9rem; line-height: 1.6; }
.vantyre-about-card--image { padding: 0; overflow: hidden; }
.vantyre-about-card--image::before { content: ''; display: block; aspect-ratio: 4 / 3; background: var(--vantyre-about-card-image) var(--paper-raised) center / cover no-repeat; }
.vantyre-about-card--image h3, .vantyre-about-card--image p, .vantyre-about-card--image .vantyre-about-link { margin-left: 1.5rem; margin-right: 1.5rem; }
.vantyre-about-card--image h3 { margin-top: 1.2rem; }
.vantyre-about-card--image p { margin-bottom: 0.8rem; }
.vantyre-about-link { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--ink); font-size: 0.86rem; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 2px; width: fit-content; margin-bottom: 1.5rem; }
.vantyre-about-link::after { content: '\2192'; }
.vantyre-about-link:hover { opacity: 0.7; }

.vantyre-about-dark {
	background: var(--ink); color: var(--paper);
	display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center;
	max-width: 84rem; margin: 0 auto; padding: clamp(3rem, 7vw, 5rem) clamp(1.5rem, 5vw, 4rem);
}
.vantyre-about-dark .vantyre-about-eyebrow { color: rgba(255, 255, 255, 0.7); }
.vantyre-about-dark h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); margin-bottom: 1rem; }
.vantyre-about-dark p { color: rgba(255, 255, 255, 0.78); line-height: 1.75; margin: 0 0 1rem; }
.vantyre-about-dark p:last-child { margin-bottom: 0; }
.vantyre-about-points { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.vantyre-about-points span { border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px; padding: 0.5rem 1rem; font-size: 0.82rem; }
@media (max-width: 760px) { .vantyre-about-dark { grid-template-columns: minmax(0, 1fr); } }

.vantyre-about-checks { list-style: none; margin: 1.2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.vantyre-about-checks li { padding-left: 1.6rem; position: relative; color: var(--ink-soft); font-size: 0.94rem; }
.vantyre-about-checks li::before { content: '\2713'; position: absolute; left: 0; color: var(--accent-strong); font-weight: 700; }

.vantyre-about-cta {
	background: linear-gradient(rgba(32, 31, 29, 0.6), rgba(32, 31, 29, 0.6)), var(--vantyre-about-cta-bg) var(--ink) center / cover no-repeat;
	color: var(--paper); text-align: center; padding: clamp(3.5rem, 8vw, 5.5rem) clamp(1.5rem, 5vw, 4rem);
}
.vantyre-about-cta h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); max-width: 40rem; margin: 0 auto; text-wrap: balance; }
.vantyre-about-cta p { max-width: 32rem; margin: 0.8rem auto 0; color: rgba(255, 255, 255, 0.85); }
.vantyre-about-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; margin-top: 1.8rem; }
.vantyre-about-button { border: 1px solid rgba(255, 255, 255, 0.5); color: var(--paper); border-radius: 999px; padding: 0.75rem 1.6rem; font-size: 0.88rem; font-weight: 600; text-decoration: none; transition: opacity 0.2s ease; }
.vantyre-about-button:hover { opacity: 0.75; }
.vantyre-about-button--primary { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* ---------- contact page ---------- */

/* .vt-transaction-page is 84rem (see cart/checkout above); an even 1fr/1fr split at that
 * width would stretch the form inputs and WhatsApp/consultation cards absurdly wide, so
 * this caps the form column and lets the card column stay a fixed, readable width. */
.vt-contact-grid { display: grid; grid-template-columns: minmax(0, 34rem) minmax(0, 20rem); gap: clamp(2rem, 5vw, 3.5rem); margin-top: 1.5rem; }
@media (max-width: 760px) { .vt-contact-grid { grid-template-columns: minmax(0, 1fr); } }
.vt-contact-form { display: flex; flex-direction: column; gap: 1rem; }
.vt-contact-form label { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.82rem; color: var(--ink-soft); }
.vt-contact-form input, .vt-contact-form textarea {
	font-family: var(--font-body); font-size: 0.94rem; color: var(--ink);
	border: 1px solid var(--line); border-radius: 4px; padding: 0.7rem 0.8rem; background: var(--paper);
}
.vt-contact-form textarea { min-height: 8rem; resize: vertical; }
.vt-consultation-card { border: 1px solid var(--line); border-radius: 6px; padding: 1.6rem; background: var(--paper-raised); align-self: flex-start; }
.vt-consultation-card .tag { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); border: 1px solid var(--line); border-radius: 999px; padding: 0.2rem 0.6rem; }
.vt-consultation-card h3 { font-family: var(--font-display); margin: 0.8rem 0 0.5rem; }
.vt-consultation-card p { margin: 0; font-size: 0.88rem; color: var(--ink-soft); }
.vt-form-success { padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: 4px; background: var(--paper-raised); margin-bottom: 1rem; }
.vt-form-success:focus { outline: 2px solid var(--accent-soft); outline-offset: 2px; }
.vt-form-status-title { margin: 0 0 0.4rem; font-family: var(--font-display); font-size: 1rem; font-weight: 620; }

/* ---------- style gallery ---------- */

.vt-style-card { display: block; text-decoration: none; color: var(--ink); }
.vt-style-card .thumb { aspect-ratio: 1; border-radius: 4px; overflow: hidden; background: var(--paper-raised); }
.vt-style-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vt-style-card-placeholder { width: 100%; height: 100%; }
.vt-style-card h3 { margin: 0.7rem 0 0; font-size: 0.94rem; font-weight: 560; }

.vt-style-page { max-width: 64rem; margin: 0 auto; padding: 0 clamp(1.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem); }
.vt-style-media { margin-top: 1.5rem; }
.vt-style-media img, .vt-style-media video { max-width: 100%; height: auto; border-radius: 4px; }
.vt-style-media figure { margin: 0 0 1.2rem; }
.vt-style-media .wp-block-gallery { margin-bottom: 1.2rem; }
.vt-form-success p { margin: 0; font-size: 0.9rem; color: var(--ink-soft); }

.vt-order-track-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.vt-order-track-table td { padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
.vt-order-track-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.vt-order-track-total td { font-weight: 700; color: var(--ink); border-bottom: none; }

/* ---------- cart & checkout (WooCommerce Blocks — NOT classic templates) ---------- */
/* Cart/Checkout render client-side via the Store API; styled here by targeting WC Blocks'
 * documented class names. Correctness of price/line-item data verified via curl (server-
 * rendered hydration JSON) — but the VISUAL result of this CSS has NOT been checked in an
 * actual browser yet (curl can't execute the JS that paints the block). Needs a real
 * browser QA pass before considering Phase 5.4 visually done. */

.wc-block-cart, .wc-block-checkout {
	font-family: var(--font-body);
	color: var(--ink);
	max-width: 72rem;
	margin: 0 auto;
	padding: clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 5vw, 4rem);
}

.wc-block-components-panel__button,
.wc-block-cart-item__product-name,
.wc-block-components-product-name {
	font-family: var(--font-display);
	color: var(--ink);
}

.wc-block-cart__empty-cart__title { font-family: var(--font-display); font-weight: 640; }

/* Empty-cart "New in store" grid and filled-cart "You may be interested in" cross-sell
 * both render as default WooCommerce/Gutenberg blocks with default blue underlined
 * link styling — not caught by .vt-product-card since these use different block markup. */
.wc-block-grid__product-link,
.wc-block-grid__product-title,
.wp-block-woocommerce-product-collection a,
.wp-block-post-title a {
	color: var(--ink);
	text-decoration: none;
}
.wc-block-grid__product-link:hover,
.wp-block-woocommerce-product-collection a:hover,
.wp-block-post-title a:hover {
	text-decoration: underline;
}
.wc-block-grid__product-title { font-family: var(--font-display); font-weight: 620; font-size: 0.95rem; }

.wc-block-components-button, .wp-block-button__link {
	font-family: var(--font-body);
	font-weight: 600;
	border-radius: 999px !important;
	background: var(--ink) !important;
	color: var(--paper) !important;
	border: none !important;
}
.wc-block-components-button:hover, .wp-block-button__link:hover { opacity: 0.85; }

.wc-block-components-totals-item__value,
.woocommerce-Price-amount {
	font-variant-numeric: tabular-nums;
	color: var(--ink);
}

.wc-block-components-panel,
.wc-block-cart-items,
.wc-block-components-totals-wrapper {
	border-color: var(--line) !important;
}

/* Checkout stays deliberately plain — no upsell/recommendation blocks, no distracting nav emphasis. */
.wc-block-checkout__form { background: var(--paper); }
.wc-block-components-express-payment { margin-bottom: 1.5rem; }

/* ---------- My Account (classic WooCommerce templates, not Blocks) ---------- */
/* No custom theme template exists for My Account (login/register/dashboard/orders/addresses) —
 * it renders through page.php + the [woocommerce_my_account] shortcode, so it inherits the
 * page-level container width but none of the button/input/tab styling used everywhere else on
 * the site. Found via ui-ux-pro-max Style Selection audit: default WC markup (grey button,
 * unstyled inputs) next to the site's black-pill buttons read as a broken/unfinished page. */

.woocommerce-form-login, .woocommerce-form-register, .woocommerce-ResetPassword, .woocommerce-EditAccountForm, .woocommerce-address-fields {
	display: flex; flex-direction: column; gap: 1rem; max-width: 28rem;
	border: 1px solid var(--line); border-radius: 6px; padding: clamp(1.5rem, 4vw, 2rem); background: var(--paper-raised);
}
.woocommerce-address-fields { max-width: none; }
.woocommerce-form-row { display: flex; flex-direction: column; gap: 0.4rem; margin: 0; }
.woocommerce-form-login label, .woocommerce-form-register label, .woocommerce-ResetPassword label, .woocommerce-EditAccountForm label, .woocommerce-address-fields label {
	font-family: var(--font-body); font-size: 0.82rem; color: var(--ink-soft);
}
.woocommerce-form-login .input-text, .woocommerce-form-register .input-text, .woocommerce-ResetPassword .input-text, .woocommerce-EditAccountForm .input-text, .woocommerce-address-fields .input-text,
.woocommerce-form-login input[type="text"], .woocommerce-form-login input[type="email"], .woocommerce-form-login input[type="password"] {
	font-family: var(--font-body); font-size: 0.94rem; color: var(--ink);
	border: 1px solid var(--line); border-radius: 4px; padding: 0.7rem 0.8rem; background: var(--paper); width: 100%;
}
.woocommerce-form-login .show-password-input { top: 0.7rem; }
/* WooCommerce's own woocommerce.css ships `.woocommerce button.button { ... }` — specificity
 * (0,2,1) — which beats a plain `.woocommerce-form-login .button` (0,2,0) rule despite loading
 * first in source order. !important here matches the precedent already used above for
 * `.wc-block-components-button` against the same class of WC-default override problem. */
.woocommerce-form-login .button, .woocommerce-form-register .button, .woocommerce-ResetPassword .button, .woocommerce-EditAccountForm .button, .woocommerce-address-fields .button,
.woocommerce-MyAccount-content .button {
	display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 999px !important;
	padding: 0.85rem 1.6rem; font-family: var(--font-body); font-size: 0.86rem; font-weight: 600;
	background: var(--ink) !important; color: var(--paper) !important; border: 1px solid transparent; cursor: pointer;
	transition: opacity 0.2s ease, transform 0.15s ease;
}
.woocommerce-form-login .button:hover, .woocommerce-form-register .button:hover, .woocommerce-ResetPassword .button:hover, .woocommerce-EditAccountForm .button:hover, .woocommerce-MyAccount-content .button:hover { opacity: 0.82; }
.woocommerce-form-login .button:focus-visible, .woocommerce-form-register .button:focus-visible, .woocommerce-MyAccount-content .button:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 3px; }
.woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.86rem; color: var(--ink-soft); margin: 0; }
.woocommerce-LostPassword { font-size: 0.86rem; margin: 0; }
.woocommerce-LostPassword a, .u-column2 a { color: var(--ink); }

.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0 0 2rem; padding: 0; display: flex; gap: 0.4rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.woocommerce-MyAccount-navigation li { margin: 0; }
.woocommerce-MyAccount-navigation a {
	display: inline-block; padding: 0.7rem 1rem; font-size: 0.86rem; color: var(--ink-soft);
	text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.woocommerce-MyAccount-navigation a:hover { color: var(--ink); }
.woocommerce-MyAccount-navigation li.is-active a { color: var(--ink); font-weight: 620; border-bottom-color: var(--ink); }
.woocommerce-MyAccount-content { font-size: 0.94rem; line-height: 1.7; color: var(--ink); }
.woocommerce-MyAccount-content p:first-child { margin-top: 0; }

.woocommerce-orders-table, .woocommerce-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; margin: 1rem 0; }
.woocommerce-orders-table th, .woocommerce-table th { text-align: left; font-family: var(--font-body); font-weight: 620; padding: 0.7rem 0.8rem; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: 0.76rem; letter-spacing: 0.04em; text-transform: uppercase; }
.woocommerce-orders-table td, .woocommerce-table td { padding: 0.8rem; border-bottom: 1px solid var(--line-soft); }
.woocommerce-orders-table .button, .woocommerce-table .button { padding: 0.5rem 1rem; font-size: 0.78rem; }

/* ---------- loose diamond search ---------- */

.vt-diamond-filters { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 1.4rem; }
.vt-diamond-search-submit {
	align-self: flex-start; font-family: var(--font-body); font-size: 0.82rem; padding: 0.55rem 1.4rem;
	border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--paper); cursor: pointer;
}

.vt-diamond-attr-grid {
	display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 1.4rem 2.4rem;
}
@media ( max-width: 640px ) { .vt-diamond-attr-grid { grid-template-columns: 1fr; } }

.vt-diamond-more-filters { border-top: 1px solid var(--line-soft); padding-top: 1rem; }
.vt-diamond-more-filters summary {
	font-family: var(--font-body); font-size: 0.84rem; color: var(--ink); cursor: pointer; list-style: none;
	display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0;
}
.vt-diamond-more-filters summary::-webkit-details-marker { display: none; }
.vt-diamond-more-filters summary::after { content: '▾'; font-size: 0.7rem; transition: transform 0.15s ease; }
.vt-diamond-more-filters[open] summary::after { transform: rotate( 180deg ); }
.vt-diamond-more-filters .vt-diamond-attr-grid { margin-top: 1rem; }

/* Mobile: the panel floats over the page instead of pushing the Search button
   and results table down when opened — same pattern as the mobile nav dropdown. */
@media ( max-width: 640px ) {
	.vt-diamond-more-filters { position: relative; }
	.vt-diamond-more-filters[open] > .vt-diamond-attr-grid {
		position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
		background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
		box-shadow: 0 12px 32px rgba( 0, 0, 0, 0.14 );
		margin-top: 0.5rem; padding: 1rem; max-height: 70vh; overflow-y: auto;
	}
}

.vt-chip-options { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.vt-chip {
	display: inline-flex; align-items: center; padding: 0.35rem 0.8rem; border: 1px solid var(--line);
	border-radius: 999px; font-size: 0.78rem; color: var(--ink-soft); cursor: pointer;
}
.vt-chip:hover { border-color: var(--ink-soft); }
.vt-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.vt-chip:has( input:checked ) { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.vt-chip:has( input:focus-visible ) { outline: 2px solid var(--ink); outline-offset: 2px; }

.vt-carat-custom {
	display: flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem;
	font-size: 0.76rem; color: var(--ink-faint);
}
.vt-carat-custom input {
	width: 4rem; padding: 0.35rem 0.5rem; border: 1px solid var(--line);
	border-radius: 6px; font-family: var(--font-body); font-size: 0.8rem; color: var(--ink);
}

.vt-filter-certno input {
	width: 14rem; max-width: 100%; padding: 0.5rem 0.7rem; border: 1px solid var(--line);
	border-radius: 6px; font-family: var(--font-body); font-size: 0.86rem; color: var(--ink);
}

.vt-filter-shapes { gap: 0.6rem; }
.vt-shape-options {
	display: grid; grid-template-columns: repeat( auto-fit, minmax( 4.6rem, 1fr ) );
	gap: 0.5rem;
}

@media ( max-width: 640px ) {
	.vt-chip-options, .vt-shape-options {
		flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
		padding-bottom: 0.4rem; scroll-snap-type: x proximity;
	}
	.vt-shape-options { display: flex; }
	.vt-shape-option { flex: 0 0 4.6rem; scroll-snap-align: start; }
	.vt-chip { flex: 0 0 auto; scroll-snap-align: start; }
}
.vt-shape-option {
	display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.3rem;
	padding: 0.55rem 0.3rem; border: 1px solid var(--line); border-radius: 8px;
	cursor: pointer; text-align: center; min-height: 5.4rem;
}
.vt-shape-option:hover { border-color: var(--ink-soft); }
.vt-shape-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.vt-shape-icon { width: 28px; height: 28px; flex-shrink: 0; }
.vt-shape-icon img { width: 100%; height: 100%; object-fit: contain; }
.vt-shape-name { font-size: 0.68rem; line-height: 1.25; color: var(--ink-soft); }
.vt-shape-option:has( input:checked ) { border-color: var(--ink); background: var(--paper-shade, #f4f2ee); }
.vt-shape-option:has( input:checked ) .vt-shape-name { color: var(--ink); font-weight: 620; }
.vt-shape-option:has( input:focus-visible ) { outline: 2px solid var(--ink); outline-offset: 2px; }

.vt-shape-more { margin-top: 0.7rem; }
.vt-shape-more summary {
	font-size: 0.76rem; color: var(--ink-soft); cursor: pointer; list-style: none;
	display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0;
}
.vt-shape-more summary::-webkit-details-marker { display: none; }
.vt-shape-more summary::after { content: '▾'; font-size: 0.65rem; transition: transform 0.15s ease; }
.vt-shape-more[open] summary::after { transform: rotate(180deg); }
.vt-shape-more summary:hover { color: var(--ink); }
.vt-shape-more .vt-shape-options { margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px solid var(--line-soft); }

#vt-diamond-results { overflow-x: auto; padding: 1.6rem 0; }
.vt-diamond-table { width: 100%; min-width: 74rem; border-collapse: collapse; font-size: 0.86rem; }
.vt-diamond-table th {
	text-align: left; font-family: var(--font-body); font-weight: 620; padding: 0.7rem 0.8rem;
	border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: 0.72rem;
	letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
}
.vt-diamond-table td { padding: 0.7rem 0.8rem; border-bottom: 1px solid var(--line-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vt-diamond-table td.vt-diamond-price { font-weight: 620; color: var(--ink); }
.vt-diamond-table td a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 0.2em; }
.vt-diamond-table td a:hover { color: var(--ink); }
.vt-diamond-loading, .vt-diamond-empty { text-align: center; color: var(--ink-soft); padding: 2.4rem 0 !important; white-space: normal !important; }

.vt-diamond-pager { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 0 0 3rem; font-size: 0.84rem; color: var(--ink-soft); }
.vt-diamond-pager button {
	font-family: var(--font-body); font-size: 0.82rem; padding: 0.5rem 1.1rem;
	border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); cursor: pointer;
}
.vt-diamond-pager button:disabled { color: var(--ink-faint); cursor: not-allowed; }
.vt-diamond-cert-note { margin: 0.6rem 0 0; font-size: 0.78rem; color: var(--ink-faint); }

/* Import-duty disclosure at checkout (see vantyre_customs_notice() in functions.php) */
.vt-customs-inline {
	max-width: 72rem; margin: 0 auto 1.4rem; padding: 0.85rem 1.1rem;
	background: var(--paper-raised); border: 1px solid var(--paper-line);
	border-left: 3px solid var(--accent-strong);
	font-size: 0.88rem; line-height: 1.55; color: var(--ink-soft);
}
.vt-customs-inline strong { color: var(--ink); font-weight: 620; }
.vt-customs-inline a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; margin-left: 0.3rem; }

.vt-customs-dialog {
	max-width: 32rem; width: calc(100% - 2rem); padding: clamp(1.4rem, 4vw, 2rem);
	border: 1px solid var(--paper-line); border-radius: 2px;
	background: var(--paper); color: var(--ink); box-shadow: var(--shadow);
}
.vt-customs-dialog::backdrop { background: rgba(32, 31, 29, 0.45); }
.vt-customs-dialog h2 { font-family: var(--font-display); font-weight: 620; font-size: 1.3rem; margin: 0 0 0.9rem; }
.vt-customs-dialog p { margin: 0 0 0.85rem; font-size: 0.92rem; line-height: 1.6; color: var(--ink-soft); }
.vt-customs-dialog strong { color: var(--ink); font-weight: 620; }
.vt-customs-dialog form { margin: 1.2rem 0 0; display: flex; justify-content: flex-end; }
.vt-cancel-inline { border-left-color: var(--ink-soft); }

/* Delivery facts on the product page — the answers people otherwise dig for in policies */
.vt-delivery-facts { list-style: none; margin: 1.4rem 0 0; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.55rem;
	background: var(--paper-raised); border: 1px solid var(--paper-line); font-size: 0.86rem; line-height: 1.5; color: var(--ink-soft); }
.vt-delivery-facts strong { color: var(--ink); font-weight: 620; }
.vt-free-ship { max-width: 72rem; margin: 0 auto 1.2rem; padding: 0.7rem 1rem; background: var(--paper-raised);
	border: 1px solid var(--paper-line); border-left: 3px solid var(--accent-strong); font-size: 0.88rem; color: var(--ink-soft); }
.vt-free-ship.is-qualified { border-left-color: var(--ink); color: var(--ink); }