/* ==========================================================================
   ZIPP TOOL — shared page design system
   Applies to every page whose content carries the `zt-page` marker. The
   mu-plugin zipptool-page-design.php adds body.zt-redesigned for those pages,
   so one scope covers all of them instead of one body.page-id-N per page.
   Tokens (--zt-*) are declared with the homepage rules and reused here.
   ========================================================================== */

body.zt-redesigned { background: var(--zt-bg); color: var(--zt-ink); font-family: var(--zt-body); }
body.zt-redesigned h1, body.zt-redesigned h2, body.zt-redesigned h3, body.zt-redesigned h4 { font-family: var(--zt-display); font-weight: 600; letter-spacing: -0.005em; line-height: 1.1; text-wrap: balance; }
body.zt-redesigned p { line-height: 1.6; }
/* Flatsome prints the page title above the content; every redesigned page carries its own H1 */
body.zt-redesigned .page-title, body.zt-redesigned .page-title-inner, body.zt-redesigned .entry-header { display: none; }
/* Flatsome centres page content on this template; the redesign is left-aligned */
body.zt-redesigned .zt-section, body.zt-redesigned .zt-section .col, body.zt-redesigned .zt-section .col-inner { text-align: left; }
/* The cya11y widget can inject a centring rule with !important; outweigh it */
html:not(#cya11y-container):not(#cya11y-x):not(#cya11y-y) body.zt-redesigned .zt-section :is(h1, h2, h3, h4, p, li, dt, dd, div, span, a, strong, em, address, th, td, label, figcaption),
html:not(#cya11y-container):not(#cya11y-x):not(#cya11y-y) body.zt-redesigned .zt-section { text-align: left !important; }

/* Buttons */
body.zt-redesigned .button { border-radius: var(--zt-radius); font-family: var(--zt-body); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
body.zt-redesigned .button.primary { background-color: var(--zt-accent); border-color: var(--zt-accent); color: #fff; }
body.zt-redesigned .button.primary:hover { background-color: var(--zt-accent-hover); border-color: var(--zt-accent-hover); }
body.zt-redesigned .button.is-outline, body.zt-redesigned .button.primary.is-outline { background-color: transparent; color: var(--zt-ink); border-color: var(--zt-line); }
body.zt-redesigned .button.is-outline:hover, body.zt-redesigned .button.primary.is-outline:hover { background-color: transparent; color: var(--zt-ink); border-color: var(--zt-ink); }
body.zt-redesigned .dark .button.is-outline { color: var(--zt-graphite-ink); border-color: var(--zt-graphite-line); }
body.zt-redesigned .dark .button.is-outline:hover { color: var(--zt-graphite-ink); border-color: var(--zt-graphite-ink); }

/* ---------- Page hero ---------- */
.zt-phero { background: var(--zt-surface); border-bottom: 1px solid var(--zt-line); }
.zt-phero .zt-h1 { max-width: 20ch; }
.zt-phero .zt-lede { max-width: 60ch; font-size: 18px; }
.zt-crumb { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--zt-muted); margin: 0 0 8px; }
.zt-crumb a { color: var(--zt-muted); border-bottom: 1px solid transparent; }
.zt-crumb a:hover { color: var(--zt-ink); border-bottom-color: currentColor; }
.zt-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.zt-ctas .button { margin: 0; }
.zt-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, max-content)); gap: 28px 48px; margin: 40px 0 0; padding-top: 24px; border-top: 1px solid var(--zt-line); }
.zt-facts div { display: flex; flex-direction: column; gap: 4px; }
.zt-facts strong { font-family: var(--zt-display); font-size: 30px; font-weight: 600; line-height: 1; }
.zt-facts span { font-size: 12px; color: var(--zt-muted); letter-spacing: 0.06em; text-transform: uppercase; }

/* ---------- Long-form prose (legal, compliance, company copy) ---------- */
.zt-prose { max-width: 74ch; }
.zt-prose > * { margin-left: 0; margin-right: 0; }
.zt-prose h2 { font-size: clamp(24px, 2.4vw, 32px); margin: 48px 0 12px; padding-top: 24px; border-top: 1px solid var(--zt-line); }
.zt-prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.zt-prose h3 { font-size: 20px; font-family: var(--zt-body); font-weight: 600; margin: 28px 0 8px; }
.zt-prose h4 { font-size: 16px; font-family: var(--zt-body); font-weight: 600; margin: 20px 0 6px; }
.zt-prose p { margin: 0 0 16px; color: var(--zt-ink); }
.zt-prose ul, .zt-prose ol { margin: 0 0 20px; padding-left: 20px; }
.zt-prose li { margin-bottom: 8px; line-height: 1.6; }
.zt-prose a { color: var(--zt-ink); border-bottom: 1px solid var(--zt-line); }
.zt-prose a:hover { border-bottom-color: var(--zt-accent); color: var(--zt-accent); }
.zt-prose strong { font-weight: 600; }
.zt-prose hr { border: 0; border-top: 1px solid var(--zt-line); margin: 32px 0; }
.zt-prose blockquote { margin: 24px 0; padding: 4px 0 4px 20px; border-left: 2px solid var(--zt-accent); color: var(--zt-muted); font-style: normal; }

/* In-page nav beside prose. Not sticky: it has siblings below it in the same
   column, and a sticky element would sit on top of them as the page scrolls. */
.zt-toc { border-left: 1px solid var(--zt-line); padding-left: 20px; }
.zt-toc p { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--zt-muted); margin: 0 0 12px; }
.zt-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.zt-toc a { font-size: 14px; color: var(--zt-muted); }
.zt-toc a:hover { color: var(--zt-ink); }
@media (max-width: 849px) { .zt-toc { border-left: 0; border-top: 1px solid var(--zt-line); padding: 20px 0 0; margin-bottom: 32px; } }

/* ---------- Cards ---------- */
.zt-card { background: var(--zt-surface); border: 1px solid var(--zt-line); border-radius: var(--zt-radius); padding: 28px; height: 100%; display: flex; flex-direction: column; gap: 10px; }
.zt-card h3 { font-size: 22px; margin: 0; }
.zt-card p { color: var(--zt-muted); font-size: 14px; margin: 0; }
.zt-card .zt-link { margin-top: auto; padding-top: 12px; align-self: flex-start; }
.zt-card-num { font-family: var(--zt-mono); font-size: 12px; color: var(--zt-accent); letter-spacing: 0.08em; }
.zt-cardrow .col { display: flex; }

/* ---------- Claim list (checkmarks) ---------- */
.zt-claims { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.zt-claims li { display: flex; gap: 12px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--zt-line); font-size: 16px; }
.zt-claims li::before { content: ""; flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: var(--zt-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat; }
@media (max-width: 849px) { .zt-claims { grid-template-columns: 1fr; } }

/* ---------- Data / spec tables ---------- */
.zt-table { width: 100%; border-collapse: collapse; background: var(--zt-surface); border: 1px solid var(--zt-line); border-radius: var(--zt-radius); overflow: hidden; margin: 0 0 24px; font-size: 15px; }
.zt-table caption { caption-side: top; text-align: left; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--zt-muted); padding: 0 0 10px; }
.zt-table th, .zt-table td { padding: 12px 16px; border-bottom: 1px solid var(--zt-line); text-align: left; vertical-align: top; }
.zt-table thead th { background: var(--zt-surface-2); font-family: var(--zt-body); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--zt-muted); }
.zt-table tbody tr:last-child th, .zt-table tbody tr:last-child td { border-bottom: 0; }
.zt-table td.zt-num { font-family: var(--zt-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.zt-tablewrap { overflow-x: auto; }

/* ---------- Download rows ---------- */
.zt-downloads { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--zt-line); }
.zt-downloads li { border-bottom: 1px solid var(--zt-line); }
.zt-downloads a { display: flex; align-items: center; gap: 16px; padding: 18px 4px; color: var(--zt-ink); }
.zt-downloads a:hover { background: var(--zt-surface); }
.zt-downloads .zt-dl-icon { flex: 0 0 auto; width: 36px; height: 36px; border: 1px solid var(--zt-line); border-radius: var(--zt-radius); background: var(--zt-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c41e2b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0 4-4m-4 4-4-4M4 19h16'/%3E%3C/svg%3E") center/18px no-repeat; }
.zt-downloads .zt-dl-text { display: flex; flex-direction: column; gap: 2px; }
.zt-downloads .zt-dl-text strong { font-family: var(--zt-body); font-weight: 600; font-size: 16px; }
.zt-downloads .zt-dl-text span { font-size: 13px; color: var(--zt-muted); }

/* ---------- Embedded tool / media wells ---------- */
.zt-well { background: var(--zt-surface); border: 1px solid var(--zt-line); border-radius: var(--zt-radius); padding: 28px; }
.zt-well-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin: 0 0 20px; padding-bottom: 16px; border-bottom: 1px solid var(--zt-line); }
.zt-well-head h2 { font-size: 24px; margin: 0; }
.zt-well-head p { margin: 0; font-size: 14px; color: var(--zt-muted); }
.zt-well .ux-video, .zt-well iframe { border-radius: var(--zt-radius); }
.zt-media { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.zt-media figure { margin: 0; background: var(--zt-surface); border: 1px solid var(--zt-line); border-radius: var(--zt-radius); overflow: hidden; }
.zt-media figcaption { padding: 12px 16px; border-top: 1px solid var(--zt-line); font-size: 14px; color: var(--zt-muted); }
@media (max-width: 549px) { .zt-well { padding: 20px; } .zt-well-head { flex-direction: column; gap: 8px; } }

/* Unit converter plugin inherits the token palette */
body.zt-redesigned .zt-well input[type="text"], body.zt-redesigned .zt-well input[type="number"], body.zt-redesigned .zt-well select {
	min-height: 42px; padding: 8px 12px; border: 1px solid var(--zt-line); border-radius: var(--zt-radius); background: var(--zt-surface); color: var(--zt-ink); font-family: var(--zt-body); font-size: 15px; box-shadow: none; }
body.zt-redesigned .zt-well input:focus, body.zt-redesigned .zt-well select:focus { border-color: var(--zt-ink); box-shadow: 0 0 0 3px rgba(20, 23, 27, 0.12); outline: none; }
body.zt-redesigned .zt-well table { border-collapse: collapse; }
body.zt-redesigned .zt-well table th, body.zt-redesigned .zt-well table td { border-color: var(--zt-line); }

/* ---------- Region grid (distributor coverage) ---------- */
.zt-regions { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0; border: 1px solid var(--zt-line); border-radius: var(--zt-radius); background: var(--zt-surface); overflow: hidden; }
.zt-region { padding: 24px 28px; border-left: 1px solid var(--zt-line); border-top: 1px solid var(--zt-line); display: flex; flex-direction: column; gap: 8px; }
.zt-region h3 { font-size: 20px; margin: 0; }
.zt-region p { margin: 0; font-size: 14px; color: var(--zt-muted); }
.zt-region .zt-mono { font-size: 12px; color: var(--zt-accent); letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------- Dark CTA band ---------- */
.zt-cta-band { background: var(--zt-graphite); color: var(--zt-graphite-ink); }
.zt-cta-band h2 { color: var(--zt-graphite-ink); font-size: clamp(26px, 3vw, 36px); margin: 0 0 12px; }
.zt-cta-band p { color: var(--zt-graphite-muted); max-width: 56ch; margin: 0; }
html:not(#cya11y-container):not(#cya11y-x):not(#cya11y-y) body.zt-redesigned .zt-cta-band :is(h2, p, span, div, a) { text-align: left !important; }

/* ==========================================================================
   WooCommerce system pages — account, wishlist, enquiry cart, shop archive.
   These render from plugin shortcodes, so they are styled rather than rebuilt.
   ========================================================================== */
body.woocommerce-account, body.page-id-6, body.page-id-7424, body.post-type-archive-product, body.tax-product_cat {
	background: var(--zt-bg); color: var(--zt-ink); }
body.woocommerce-account, body.page-id-6, body.page-id-7424 { font-family: var(--zt-body); }
body.woocommerce-account h1, body.page-id-6 h1, body.page-id-7424 h1,
body.woocommerce-account h2, body.page-id-6 h2, body.page-id-7424 h2,
body.woocommerce-account h3, body.page-id-6 h3, body.page-id-7424 h3 { font-family: var(--zt-display); font-weight: 600; letter-spacing: -0.005em; }

/* Page title band shared by the system pages */
body.woocommerce-account .page-title, body.page-id-6 .page-title, body.page-id-7424 .page-title { background: var(--zt-surface); border-bottom: 1px solid var(--zt-line); }

/* Account: nav + forms */
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--zt-line); border-radius: var(--zt-radius); background: var(--zt-surface); overflow: hidden; }
.woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--zt-line); }
.woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; }
.woocommerce-MyAccount-navigation li a { display: block; padding: 14px 18px; color: var(--zt-ink); font-size: 14px; font-weight: 500; }
.woocommerce-MyAccount-navigation li a:hover { background: var(--zt-bg); }
.woocommerce-MyAccount-navigation li.is-active a { border-left: 2px solid var(--zt-accent); background: var(--zt-bg); font-weight: 600; }
.woocommerce-MyAccount-content { background: var(--zt-surface); border: 1px solid var(--zt-line); border-radius: var(--zt-radius); padding: 28px; }
body.woocommerce-account form input[type="text"], body.woocommerce-account form input[type="email"],
body.woocommerce-account form input[type="password"], body.woocommerce-account form input[type="tel"],
body.woocommerce-account form select, body.woocommerce-account form textarea {
	min-height: 44px; padding: 10px 12px; border: 1px solid var(--zt-line); border-radius: var(--zt-radius); background: var(--zt-surface); color: var(--zt-ink); font-family: var(--zt-body); font-size: 16px; box-shadow: none; }
body.woocommerce-account form input:focus, body.woocommerce-account form select:focus, body.woocommerce-account form textarea:focus { border-color: var(--zt-ink); box-shadow: 0 0 0 3px rgba(20, 23, 27, 0.12); outline: none; }
body.woocommerce-account .button, body.page-id-6 .button, body.page-id-7424 .button { border-radius: var(--zt-radius); font-family: var(--zt-body); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
body.woocommerce-account .button.primary, body.page-id-6 .button.primary, body.page-id-7424 .button.primary { background-color: var(--zt-accent); border-color: var(--zt-accent); color: #fff; }

/* Wishlist + enquiry cart tables */
body.page-id-6 table.shop_table, body.page-id-7424 table.shop_table, body.page-id-7424 table {
	border: 1px solid var(--zt-line); border-radius: var(--zt-radius); border-collapse: separate; border-spacing: 0; background: var(--zt-surface); overflow: hidden; }
body.page-id-6 table.shop_table th, body.page-id-7424 table th {
	background: var(--zt-surface-2); font-family: var(--zt-body); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--zt-muted); padding: 12px 16px; border-bottom: 1px solid var(--zt-line); }
body.page-id-6 table.shop_table td, body.page-id-7424 table td { padding: 16px; border-bottom: 1px solid var(--zt-line); }

/* Empty-state message on the account, wishlist and enquiry-cart pages */
body.woocommerce-account .woocommerce-info, body.page-id-6 .woocommerce-info, body.page-id-7424 .woocommerce-info,
body.woocommerce-account .woocommerce-message, body.page-id-7424 .woocommerce-message {
	background: var(--zt-surface); border: 1px solid var(--zt-line); border-left: 2px solid var(--zt-accent); border-radius: var(--zt-radius); color: var(--zt-ink); padding: 16px 20px; }

/* Shop archive + product category archives */
body.post-type-archive-product .shop-page-title, body.tax-product_cat .shop-page-title { background: var(--zt-surface); border-bottom: 1px solid var(--zt-line); }
body.post-type-archive-product .products .product-small .box, body.tax-product_cat .products .product-small .box {
	background: var(--zt-surface); border: 1px solid var(--zt-line); border-radius: var(--zt-radius); overflow: hidden; transition: border-color 150ms ease-out, box-shadow 150ms ease-out; }
body.post-type-archive-product .products .product-small .box:hover, body.tax-product_cat .products .product-small .box:hover { border-color: var(--zt-ink); box-shadow: var(--zt-shadow); }
/* Flatsome adds has-equal-box-heights to the product grid and expects its own
   JS to measure the tallest card in a row and set an explicit pixel height on
   every .box-image; when that JS doesn't run (slow load, a script error
   elsewhere on the page, whatever) .box-image is left at height:auto while
   Flatsome's own CSS makes the <img> inside it position:absolute - an
   absolutely positioned child can't contribute to an auto-height parent, so
   the box collapses to just its padding and the photo appears clipped down
   to a sliver. A fixed aspect-ratio means the box always has real height on
   its own, independent of whether that JS ever runs. All product thumbnails
   here are WooCommerce's square 1200x1200 crop, so 1/1 is the true ratio, not
   a guess. */
body.post-type-archive-product .products .box-image, body.tax-product_cat .products .box-image { background: #fff; padding: 12px; aspect-ratio: 1 / 1; box-sizing: border-box; }
body.post-type-archive-product .products .box-text, body.tax-product_cat .products .box-text { padding: 12px 16px 16px; border-top: 1px solid var(--zt-line); text-align: left; }
body.post-type-archive-product .products .name a, body.tax-product_cat .products .name a { font-family: var(--zt-body); font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--zt-ink); }
body.post-type-archive-product .products .button, body.tax-product_cat .products .button { border-radius: var(--zt-radius); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
body.tax-product_cat .term-description { max-width: 74ch; color: var(--zt-muted); line-height: 1.6; }

/* Tables that arrive inside preserved legal / compliance copy get the same
   treatment as .zt-table without needing the class added to the markup. */
.zt-prose table { width: 100%; border-collapse: collapse; background: var(--zt-surface); border: 1px solid var(--zt-line); border-radius: var(--zt-radius); margin: 0 0 24px; font-size: 15px; }
.zt-prose table th, .zt-prose table td { padding: 12px 16px; border-bottom: 1px solid var(--zt-line); text-align: left; vertical-align: top; }
.zt-prose table thead th, .zt-prose table tr:first-child th { background: var(--zt-surface-2); font-family: var(--zt-body); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--zt-muted); }
.zt-prose table tr:last-child th, .zt-prose table tr:last-child td { border-bottom: 0; }
.zt-prose img { border-radius: var(--zt-radius); }
.zt-prose > table { display: block; overflow-x: auto; }

/* ==========================================================================
   Shared shop sidebar widgets - used by the shop archive, category archives
   and single product pages (#shop-sidebar and #product-sidebar render the
   same widget markup under different ids).
   ========================================================================== */
#shop-sidebar .widget, #product-sidebar .widget {
	background: var(--zt-surface); border: 1px solid var(--zt-line); border-radius: var(--zt-radius);
	padding: 20px; margin: 0 0 20px; }
#shop-sidebar .widget-title, #product-sidebar .widget-title {
	font-family: var(--zt-body); font-size: 12px; font-weight: 600; letter-spacing: 0.1em;
	text-transform: uppercase; color: var(--zt-muted); text-align: left !important; }
#shop-sidebar .is-divider, #product-sidebar .is-divider { display: none; }
#shop-sidebar .searchform .search-field, #product-sidebar .searchform .search-field {
	border: 1px solid var(--zt-line); border-radius: var(--zt-radius); background: var(--zt-bg);
	min-height: 40px; font-family: var(--zt-body); }
#shop-sidebar .searchform .search-field:focus, #product-sidebar .searchform .search-field:focus {
	border-color: var(--zt-ink); outline: none; }
#shop-sidebar .ux-search-submit, #product-sidebar .ux-search-submit {
	background: var(--zt-accent); border-color: var(--zt-accent); border-radius: var(--zt-radius); color: #fff; }
#shop-sidebar .widget_product_categories ul, #product-sidebar .widget_product_categories ul {
	list-style: none; margin: 0; padding: 0; }
#shop-sidebar .widget_product_categories > ul > li, #product-sidebar .widget_product_categories > ul > li {
	border-bottom: 1px solid var(--zt-line); }
#shop-sidebar .widget_product_categories > ul > li:last-child, #product-sidebar .widget_product_categories > ul > li:last-child { border-bottom: 0; }
#shop-sidebar .widget_product_categories a, #product-sidebar .widget_product_categories a {
	color: var(--zt-ink); font-size: 14px; padding: 10px 0; }
#shop-sidebar .widget_product_categories .current-cat > a, #product-sidebar .widget_product_categories .current-cat > a {
	color: var(--zt-accent); font-weight: 600; }
#shop-sidebar .widget_product_categories ul.children, #product-sidebar .widget_product_categories ul.children {
	border-top: 1px solid var(--zt-line); margin: 0 0 8px; padding-left: 4px; }

/* ==========================================================================
   Shop / category archive toolbar - breadcrumb, filter button, sort dropdown.
   ========================================================================== */
body.post-type-archive-product .shop-page-title, body.tax-product_cat .shop-page-title {
	padding: 18px 0; }
.rank-math-breadcrumb.breadcrumbs { font-size: 12px; letter-spacing: 0.04em; color: var(--zt-muted); }
.rank-math-breadcrumb.breadcrumbs a { color: var(--zt-muted); }
.rank-math-breadcrumb.breadcrumbs a:hover { color: var(--zt-ink); }
.rank-math-breadcrumb.breadcrumbs .last { color: var(--zt-ink); font-weight: 500; }
body.post-type-archive-product .filter-button, body.tax-product_cat .filter-button,
body.post-type-archive-product .woocommerce-ordering select, body.tax-product_cat .woocommerce-ordering select {
	border: 1px solid var(--zt-line); border-radius: var(--zt-radius); color: var(--zt-ink); font-family: var(--zt-body); }

/* ==========================================================================
   Single product page.
   ========================================================================== */
body.single-product { background: var(--zt-bg); }
body.single-product .product-main { background: var(--zt-surface); padding-top: 40px; }
body.single-product .product-gallery-default,
body.single-product .woocommerce-product-gallery__wrapper {
	background: var(--zt-surface-2); border: 1px solid var(--zt-line); border-radius: var(--zt-radius); overflow: hidden; }
/* The gallery has no fixed size of its own: the main image's width is capped
   by the column, and height just follows that image's own aspect ratio. That
   works fine for the square (1200x1200) photos nearly every product uses, but
   a handful of products only have a landscape source photo (e.g. 1536x1024),
   and for those the whole gallery collapses to a short strip that reads as a
   too-small product photo next to the much taller text column beside it.
   Pinning the slide to a square box and letting the image contain within it
   makes every product page the same size regardless of the source photo's
   own aspect ratio - portrait and landscape photos included. */
body.single-product .woocommerce-product-gallery__image { aspect-ratio: 1 / 1; }
body.single-product .woocommerce-product-gallery__image > a { display: block; width: 100%; height: 100%; }
body.single-product .woocommerce-product-gallery__image img {
	width: 100%; height: 100%; object-fit: contain; object-position: center; }
body.single-product .flex-control-thumbs { margin-top: 12px; }
body.single-product .flex-control-thumbs li img {
	border: 1px solid var(--zt-line); border-radius: var(--zt-radius); }
body.single-product .flex-control-thumbs li img.flex-active { border-color: var(--zt-ink); }

body.single-product .product-title.product_title {
	font-family: var(--zt-display); font-weight: 600; letter-spacing: -0.005em; line-height: 1.1;
	font-size: clamp(26px, 2.6vw, 34px); text-wrap: balance; }
body.single-product .product-short-description { color: var(--zt-muted); font-size: 15px; line-height: 1.6; }
body.single-product .product-short-description p { margin: 0; }

body.single-product #enquiryButton {
	background: var(--zt-accent); border: 1px solid var(--zt-accent); color: #fff; border-radius: var(--zt-radius);
	font-family: var(--zt-body); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
body.single-product #enquiryButton:hover { background: var(--zt-accent-hover); border-color: var(--zt-accent-hover); }

body.single-product .product_meta {
	font-size: 13px; color: var(--zt-muted); margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--zt-line); }
body.single-product .product_meta > span { display: block; padding: 6px 0; border-top: 1px dotted var(--zt-line); }
body.single-product .product_meta > span:first-child { border-top: 0; padding-top: 0; }
body.single-product .product_meta a { color: var(--zt-ink); border-bottom: 1px solid var(--zt-line); }
body.single-product .product_meta a:hover { border-bottom-color: var(--zt-accent); color: var(--zt-accent); }

/* Tabs - description, parts list, etc. */
body.single-product .product-footer { margin-top: 48px; }
body.single-product .woocommerce-tabs.wc-tabs-wrapper { border-top: 1px solid var(--zt-line); padding-top: 8px; }
body.single-product ul.tabs.wc-tabs {
	border-bottom: 1px solid var(--zt-line); list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; }
body.single-product ul.tabs.wc-tabs li { margin: 0; }
body.single-product ul.tabs.wc-tabs li a {
	display: block; padding: 16px 4px; font-family: var(--zt-body); font-weight: 600; font-size: 13px;
	letter-spacing: 0.06em; text-transform: uppercase; color: var(--zt-muted); border-bottom: 2px solid transparent; }
body.single-product ul.tabs.wc-tabs li.active a, body.single-product ul.tabs.wc-tabs li a[aria-selected="true"] {
	color: var(--zt-ink); border-bottom-color: var(--zt-accent); }
body.single-product .tab-panels { padding-top: 28px; }
body.single-product .woocommerce-Tabs-panel { max-width: 74ch; }
body.single-product .woocommerce-Tabs-panel h2 {
	font-family: var(--zt-display); font-weight: 600; font-size: 24px; margin: 0 0 16px; }
body.single-product .woocommerce-Tabs-panel h3 {
	font-family: var(--zt-body); font-weight: 600; font-size: 18px; margin: 28px 0 8px; }
body.single-product .woocommerce-Tabs-panel h3:first-child { margin-top: 0; }
body.single-product .woocommerce-Tabs-panel p { line-height: 1.6; margin: 0 0 14px; color: var(--zt-ink); }
body.single-product .woocommerce-Tabs-panel p:empty { display: none; }
body.single-product .woocommerce-Tabs-panel ul { padding-left: 20px; margin: 0 0 16px; }
body.single-product .woocommerce-Tabs-panel li { margin-bottom: 8px; line-height: 1.6; }
body.single-product .woocommerce-Tabs-panel strong { font-weight: 600; }
body.single-product .woocommerce-Tabs-panel table {
	width: 100%; border-collapse: collapse; background: var(--zt-surface); border: 1px solid var(--zt-line);
	border-radius: var(--zt-radius); margin: 0 0 20px; font-size: 14px; }
body.single-product .woocommerce-Tabs-panel table th, body.single-product .woocommerce-Tabs-panel table td {
	padding: 10px 14px; border-bottom: 1px solid var(--zt-line); text-align: left; }

/* Related / up-sell products, where the catalog shows them */
body.single-product .related.products, body.single-product .upsells.products {
	margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--zt-line); }
body.single-product .related.products > h2, body.single-product .upsells.products > h2 {
	font-family: var(--zt-display); font-weight: 600; font-size: 24px; margin: 0 0 24px; }
body.single-product .related.products .product-small .box, body.single-product .upsells.products .product-small .box {
	background: var(--zt-surface); border: 1px solid var(--zt-line); border-radius: var(--zt-radius); overflow: hidden; }
body.single-product .related.products .box-image, body.single-product .upsells.products .box-image { background: #fff; padding: 12px; aspect-ratio: 1 / 1; box-sizing: border-box; }

/* ==========================================================================
   Blog: archive list and single post.
   ========================================================================== */
/* body.category and body.tag are the blog's own category/tag archives (WordPress
   core taxonomies on posts) - not to be confused with WooCommerce's
   tax-product_cat/tax-product_tag on products, styled separately below. They
   render through the exact same Flatsome loop partials as the main blog list
   (same .post/.entry-title/.entry-category/.entry-meta markup), so every
   selector below is simply repeated across all five archive/single classes. */
body.blog, body.category, body.tag, body.single-post, body.search-results { background: var(--zt-bg); color: var(--zt-ink); }
body.blog #content.blog-wrapper, body.category #content.blog-wrapper, body.tag #content.blog-wrapper, body.search-results #content.blog-wrapper { padding-top: 40px; padding-bottom: 40px; }
body.blog .archive-page-header, body.category .archive-page-header, body.tag .archive-page-header, body.search-results .archive-page-header {
	background: var(--zt-surface); border-bottom: 1px solid var(--zt-line); padding: 32px 0; margin-bottom: 8px; }
body.blog .archive-page-header .page-title, body.category .archive-page-header .page-title, body.tag .archive-page-header .page-title, body.search-results .archive-page-header .page-title {
	font-family: var(--zt-display); font-weight: 600; text-transform: none; letter-spacing: -0.005em; }
body.blog .archive-page-header .page-title span, body.category .archive-page-header .page-title span, body.tag .archive-page-header .page-title span, body.search-results .archive-page-header .page-title span { color: var(--zt-accent); }

body.blog article.post, body.category article.post, body.tag article.post, body.search-results article.post, body.search-results article.product,
body.blog #post-list article, body.category #post-list article, body.tag #post-list article, body.search-results #post-list article {
	background: var(--zt-surface); border: 1px solid var(--zt-line); border-radius: var(--zt-radius);
	padding: 28px; margin-bottom: 20px; }
body.blog .entry-category, body.category .entry-category, body.tag .entry-category, body.search-results .entry-category {
	font-family: var(--zt-body); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--zt-accent); }
body.blog .entry-category a, body.category .entry-category a, body.tag .entry-category a, body.search-results .entry-category a { color: inherit; }
body.blog .entry-title, body.category .entry-title, body.tag .entry-title, body.search-results .entry-title {
	font-family: var(--zt-display); font-weight: 600; letter-spacing: -0.005em; line-height: 1.2; margin: 6px 0 10px; }
body.blog .entry-title a, body.category .entry-title a, body.tag .entry-title a, body.search-results .entry-title a { color: var(--zt-ink); }
body.blog .entry-title a:hover, body.category .entry-title a:hover, body.tag .entry-title a:hover, body.search-results .entry-title a:hover { color: var(--zt-accent); }
body.blog .entry-divider, body.category .entry-divider, body.tag .entry-divider, body.search-results .entry-divider { display: none; }
body.blog .entry-meta, body.category .entry-meta, body.tag .entry-meta, body.search-results .entry-meta {
	font-size: 12px; color: var(--zt-muted); letter-spacing: 0.04em; text-transform: none; margin-bottom: 12px; }
body.blog .entry-content, body.category .entry-content, body.tag .entry-content, body.search-results .entry-content { color: var(--zt-muted); font-size: 15px; line-height: 1.6; }
body.blog .entry-content a.more-link, body.category .entry-content a.more-link, body.tag .entry-content a.more-link, body.search-results .entry-content a.more-link {
	font-family: var(--zt-body); font-weight: 600; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase;
	color: var(--zt-ink); border-bottom: 1px solid var(--zt-line); }
/* Search results mix posts and products through the same loop; product
   thumbnails render at native size (often 1200px) with no size constraint. */
body.search-results .entry-image { background: var(--zt-surface-2); border-radius: var(--zt-radius); overflow: hidden; margin-bottom: 16px; }
body.search-results .entry-image img { display: block; width: 100%; max-height: 320px; object-fit: contain; }
body.search-results article.product .entry-header .entry-category:empty { display: none; }

/* Single post */
body.single-post .entry-header { background: var(--zt-surface); border-bottom: 1px solid var(--zt-line); padding: 40px 0; }
body.single-post .entry-header .entry-category { color: var(--zt-accent); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 12px; }
body.single-post .entry-title {
	font-family: var(--zt-display); font-weight: 600; letter-spacing: -0.005em; font-size: clamp(28px, 3.2vw, 42px); text-wrap: balance; }
body.single-post .entry-divider { display: none; }
body.single-post .entry-meta { color: var(--zt-muted); font-size: 13px; letter-spacing: 0.04em; text-transform: none; }
body.single-post .entry-content { max-width: 74ch; margin: 0 auto; padding-top: 32px; }
body.single-post .entry-content h2 {
	font-family: var(--zt-display); font-weight: 600; font-size: clamp(22px, 2.4vw, 30px); margin: 40px 0 12px; }
body.single-post .entry-content h2:first-child { margin-top: 0; }
body.single-post .entry-content h3 { font-family: var(--zt-body); font-weight: 600; font-size: 18px; margin: 28px 0 8px; }
body.single-post .entry-content p { line-height: 1.65; margin: 0 0 16px; }
body.single-post .entry-content ul, body.single-post .entry-content ol { padding-left: 20px; margin: 0 0 20px; }
body.single-post .entry-content li { margin-bottom: 8px; line-height: 1.6; }
body.single-post .entry-content a { color: var(--zt-ink); border-bottom: 1px solid var(--zt-line); }
body.single-post .entry-content a:hover { border-bottom-color: var(--zt-accent); color: var(--zt-accent); }
body.single-post .entry-content img { border-radius: var(--zt-radius); height: auto; max-width: 100%; }

/* ==========================================================================
   404 page.
   ========================================================================== */
body.error404 #primary.content-area { background: var(--zt-bg); padding-top: 64px; padding-bottom: 64px; }
body.error404 .error-404 .row { align-items: center; }
body.error404 .error-404 span.header-font {
	font-family: var(--zt-display) !important; color: var(--zt-line) !important; opacity: 1 !important; font-weight: 700 !important; }
body.error404 .page-title.page-title {
	font-family: var(--zt-display); font-weight: 600; font-size: clamp(26px, 3vw, 36px); text-transform: none;
	letter-spacing: -0.005em; margin: 0 0 12px; }
body.error404 .page-content { color: var(--zt-muted); font-size: 16px; margin-bottom: 24px; max-width: 48ch; }
body.error404 .searchform .search-field {
	border: 1px solid var(--zt-line); border-radius: var(--zt-radius); min-height: 46px; font-family: var(--zt-body); }
body.error404 .ux-search-submit { background: var(--zt-accent); border-color: var(--zt-accent); border-radius: var(--zt-radius); color: #fff; }

/* ==========================================================================
   FAQ block. The mu-plugin zipptool-schema.php reads this exact markup
   (.zt-faq > .zt-faq-item > .zt-faq-q / .zt-faq-a) from the rendered page and
   emits matching FAQPage JSON-LD from it, so the visible text and the
   structured data can never drift apart - there is only one copy of the copy.
   ========================================================================== */
.zt-faq { border-top: 1px solid var(--zt-line); }
.zt-faq-item { border-bottom: 1px solid var(--zt-line); padding: 22px 0; }
.zt-faq-q { font-family: var(--zt-body); font-weight: 600; font-size: 17px; margin: 0 0 8px; line-height: 1.4; }
.zt-faq-a { color: var(--zt-muted); font-size: 15px; line-height: 1.6; max-width: 68ch; }
.zt-faq-a p { margin: 0; }
.zt-faq-a p + p { margin-top: 10px; }