/* MoodTag product page restyle (pilot 26 Oct 2026, PLAN-pdp-restyle.md): a look-only layer on top of Kadence's
   WooCommerce single-product page. Printed as a <link> at the end of <head> (wp_head 999) on the products in
   MTD_PDP, with body class mtd-pdp. Rules:
   - Nothing is hidden that a script reads, nothing reordered (no `order`), no markup changed: EPO, the live preview,
     the swatches, Final Quality Check, the timer and tracking work exactly as before.
   - The snippets print their own <style> blocks, mostly INSIDE the page body (after this file). Selectors here start
     with body.mtd-pdp #wrapper so they win on specificity; `!important` only where a snippet's rule already uses it.
   - Brand: greens only (no blue UI), engraving light, readable focus states. */

body.mtd-pdp #wrapper {
  --sand: #f4f1ea; --sand-2: #e8e3d8; --cream: #fbf9f4; --ink: #1a202c; --ink-2: #2d3748; --muted: #5f6a64;
  --terra: #2fa66a; --terra-ink: #1f7a4c; --olive: #13612e; --olive-soft: #dff3e7; --honey: #f5a524; --rust: #b42318;
  --grad-card: linear-gradient(135deg, #2fa66a 0%, #1f7a4c 18%, #13612e 70%);
  --serif: "Fraunces", Georgia, serif; --sans: "Jakarta", system-ui, sans-serif;
  --r: 24px;
  background: var(--sand);
  color: var(--ink-2);
  font-family: var(--sans);
}
body.mtd-pdp #wrapper { background: var(--sand); }
body.mtd-pdp #wrapper #inner-wrap, body.mtd-pdp #wrapper .content-area, body.mtd-pdp #wrapper .site-main, body.mtd-pdp #wrapper div.product.type-product.content-bg { background: transparent; }

/* ---------- layout: gallery left (sticky on desktop while the long form scrolls), summary right ---------- */
body.mtd-pdp #wrapper .content-container.site-container { max-width: 1200px; }
body.mtd-pdp #wrapper .product-title.product-above { margin: 20px 0 16px; }
body.mtd-pdp #wrapper div.product.type-product { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: clamp(32px, 4.5vw, 64px); align-items: start; background: transparent; padding: 0; box-shadow: none; }
body.mtd-pdp #wrapper div.product.type-product::before, body.mtd-pdp #wrapper div.product.type-product::after { display: none; } /* Kadence's float clearfix would take a grid cell */
body.mtd-pdp #wrapper div.product.type-product > * { grid-column: 1 / -1; min-width: 0; }
/* No sticky gallery: a sticky element can be drawn over the sections below it (Wilson's 26 Oct screenshot at ~2000px),
   so the gallery stays in its column like the live page. */
body.mtd-pdp #wrapper div.product.type-product > .woocommerce-product-gallery { grid-column: 1; width: auto; float: none; margin: 0; position: relative; top: auto; }
body.mtd-pdp #wrapper div.product.type-product > .summary { grid-column: 2; width: auto; float: none; margin: 0; padding: 0; }

/* ---------- breadcrumbs, title, rating, price ---------- */
body.mtd-pdp #wrapper .kadence-breadcrumbs { font-size: 13px; color: var(--muted); }
body.mtd-pdp #wrapper .kadence-breadcrumbs a { color: var(--terra-ink); text-decoration: none; }
body.mtd-pdp #wrapper .kadence-breadcrumbs a:hover, body.mtd-pdp #wrapper .kadence-breadcrumbs a:focus-visible { text-decoration: underline; }
body.mtd-pdp #wrapper .summary h1.product_title { margin: 0 0 6px; font: 800 clamp(30px, 3.4vw, 44px)/1.05 var(--serif); letter-spacing: -.01em; text-transform: none; color: var(--ink); }
body.mtd-pdp #wrapper .summary .mt-hero-rating { margin: 6px 0 14px !important; }
body.mtd-pdp #wrapper .summary .mt-stars { color: var(--honey) !important; }
body.mtd-pdp #wrapper .summary .mt-rating-text, body.mtd-pdp #wrapper .summary .mt-rating-link { color: var(--terra-ink) !important; font-weight: 700; }
body.mtd-pdp #wrapper .summary > p.price, body.mtd-pdp #wrapper .summary .price { color: var(--ink) !important; font: 800 24px/1.2 var(--sans) !important; }

/* ---------- gallery ---------- */
body.mtd-pdp #wrapper .woocommerce-product-gallery .flex-viewport, body.mtd-pdp #wrapper .woocommerce-product-gallery__wrapper { border-radius: var(--r); overflow: hidden; background: #fff; }
body.mtd-pdp #wrapper .woocommerce-product-gallery { border-radius: var(--r); }
body.mtd-pdp #wrapper .woocommerce-product-gallery .flex-viewport { box-shadow: 0 40px 80px -48px rgba(43, 36, 32, .5); }
/* Thumbnail strip GEOMETRY changes on desktop only. On phones the gallery sits above the summary and the theme reserves
   its height before the slider script builds the strip; a different strip size there made the summary jump late
   (CLS 0.001 -> 0.008 on the v0.9.2 preview). So phones keep the live sizes and get the cosmetic changes only. */
@media (min-width: 861px) {
  /* a left-aligned grid inside the gallery width (Kadence centred the last row) */
  body.mtd-pdp #wrapper .woocommerce-product-gallery .flex-control-thumbs { display: grid !important; grid-template-columns: repeat(auto-fill, 64px); justify-content: start !important; gap: 8px; width: 100% !important; max-width: 100%; margin: 12px 0 0; padding: 0; position: relative !important; left: auto !important; transform: none !important; } /* the theme centres the strip with left:50% + translateX(-50%) */
  body.mtd-pdp #wrapper .woocommerce-product-gallery .flex-control-thumbs li { width: 64px !important; float: none !important; margin: 0 !important; padding: 0 !important; }
  body.mtd-pdp #wrapper .woocommerce-product-gallery .flex-control-thumbs img { border: 2px solid transparent !important; }
}
/* 0.10.3: before the slider builds the strip (the gallery is still invisible), the theme lays the other photos out as
   135x65 boxes, three to a row: a different height from the strip above, so the page below moved when the strip came
   in (seen on the accessory pages, where related products sit right under the gallery). Same geometry as the strip:
   64px squares, 8px apart, 12px under the main photo, as many to a row as fit, and one more square because the strip repeats the main photo. Desktop only. */
@media (min-width: 861px) {
  body.mtd-pdp #wrapper .woocommerce-product-gallery:not(:has(.flex-control-thumbs)) .woocommerce-product-gallery__wrapper { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
  body.mtd-pdp #wrapper .woocommerce-product-gallery:not(:has(.flex-control-thumbs)) .woocommerce-product-gallery__image:first-child { flex: 0 0 100%; margin-bottom: 4px; order: -1; }
  /* the strip also shows the main photo as its first thumbnail: one more 64px square */
  body.mtd-pdp #wrapper .woocommerce-product-gallery:not(:has(.flex-control-thumbs)) .woocommerce-product-gallery__wrapper::before { content: ""; flex: 0 0 64px; height: 64px; }
  body.mtd-pdp #wrapper .woocommerce-product-gallery:not(:has(.flex-control-thumbs)) .woocommerce-product-gallery__image:nth-child(n+2) { flex: 0 0 64px; width: 64px !important; height: 64px; margin: 0 !important; overflow: hidden; }
}
/* no white tiles behind the thumbnails (colour only, so the phone geometry stays as live) */
body.mtd-pdp #wrapper .woocommerce-product-gallery .flex-control-thumbs, body.mtd-pdp #wrapper .woocommerce-product-gallery .flex-control-thumbs li { background: transparent !important; box-shadow: none !important; border-color: transparent !important; }
body.mtd-pdp #wrapper .woocommerce-product-gallery .flex-control-thumbs img { border-radius: 14px !important; border-color: transparent !important; opacity: .75 !important; transition: opacity .2s ease, border-color .2s ease; }
body.mtd-pdp #wrapper .woocommerce-product-gallery .flex-control-thumbs img.flex-active, body.mtd-pdp #wrapper .woocommerce-product-gallery .flex-control-thumbs img:hover { opacity: 1 !important; border-color: var(--terra) !important; }
body.mtd-pdp #wrapper .woocommerce-product-gallery__trigger { background: #fff !important; color: var(--ink) !important; box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .35); }

/* ---------- summary card (snippet "Never-Fall summary card V3") ---------- */
body.mtd-pdp #wrapper .summary .mt-nf-summary-card { border-radius: var(--r); border: 1px solid var(--sand-2); background: var(--cream); box-shadow: none; overflow: hidden; }
body.mtd-pdp #wrapper .summary .mt-nf-summary-head { background: #fff; border-bottom: 1px solid var(--sand-2); }
body.mtd-pdp #wrapper .summary .mt-nf-summary-head h2, body.mtd-pdp #wrapper .summary .mt-nf-summary-head h3, body.mtd-pdp #wrapper .summary .mt-nf-summary-head p:not(.mt-nf-summary-badges) { font-family: var(--serif); color: var(--ink); }
body.mtd-pdp #wrapper .summary .mt-nf-summary-badge { border-radius: 999px; background: var(--olive-soft); color: var(--olive); border-color: transparent; }
body.mtd-pdp #wrapper .summary .mt-nf-summary-badge:first-child { background: var(--olive); color: #fff; }
body.mtd-pdp #wrapper .summary .mt-nf-accordion-item { border-radius: 18px; border: 1px solid var(--sand-2); background: #fff; box-shadow: none; }
body.mtd-pdp #wrapper .summary .mt-nf-accordion-item[open] { border-color: rgba(47, 166, 106, .45); }
body.mtd-pdp #wrapper .summary .mt-nf-accordion-icon, body.mtd-pdp #wrapper .summary .mt-nf-feature-icon { background: var(--olive-soft); color: var(--olive); }
body.mtd-pdp #wrapper .summary .mt-nf-accordion-toggle { background: var(--olive-soft); color: var(--olive); font-family: var(--sans); }
body.mtd-pdp #wrapper .summary .mt-nf-feature { border-radius: 14px; border-color: var(--sand-2); background: var(--cream); }
body.mtd-pdp #wrapper .summary .mt-nf-setup-line { border-radius: 14px; background: var(--grad-card); color: #fff; }
body.mtd-pdp #wrapper .summary .mt-nf-setup-line * { color: inherit; }

/* ---------- step headers (snippets "EPO step guide" + "Customisation Bridge Hook") ---------- */
body.mtd-pdp #wrapper .summary .mt-step-header { gap: 12px; align-items: center; }
body.mtd-pdp #wrapper .summary .mt-step-header h3 { margin: 0 !important; font: 800 clamp(22px, 2.2vw, 28px)/1.15 var(--serif) !important; color: var(--ink) !important; letter-spacing: -.005em; }
body.mtd-pdp #wrapper .summary .mt-step-badge { border-radius: 999px !important; background: var(--olive) !important; color: #fff !important; font: 800 11px/1 var(--sans) !important; letter-spacing: .08em !important; padding: 7px 11px !important; }
body.mtd-pdp #wrapper .summary .mt-custom-bridge { background: transparent !important; border: 0 !important; padding: 0 !important; margin: 28px 0 12px !important; }
body.mtd-pdp #wrapper .summary .mt-custom-bridge p { color: var(--ink-2); font-size: 15px; }
body.mtd-pdp #wrapper .summary .mt-dynamic-step-container, body.mtd-pdp #wrapper .summary .mt-epo-step-container { width: 100% !important; max-width: none !important; border-top: 1px solid var(--sand-2) !important; padding-top: 24px !important; margin-top: 24px !important; }

/* ---------- variations as pills (snippet "Visual Attribute Swatches") ---------- */
body.mtd-pdp #wrapper .summary table.variations { margin: 8px 0 4px; border: 0; }
body.mtd-pdp #wrapper .summary table.variations th.label { padding: 14px 0 6px; vertical-align: top; }
body.mtd-pdp #wrapper .summary table.variations th.label label { font: 800 11px/1.3 var(--sans) !important; letter-spacing: .1em; text-transform: uppercase; color: var(--terra-ink); }
body.mtd-pdp #wrapper .summary table.variations td.value { padding: 8px 0; }
/* fixed label column: when the text font finishes loading, a label sized to its text would nudge the pills sideways (CLS) */
body.mtd-pdp #wrapper .summary table.variations { table-layout: fixed; width: 100%; }
body.mtd-pdp #wrapper .summary table.variations th.label { width: 88px; }
body.mtd-pdp #wrapper .summary .mt-swatch-container { gap: 8px !important; }
body.mtd-pdp #wrapper .summary .mt-pill { min-height: 44px; display: inline-flex !important; align-items: center; padding: 0 18px !important; border-radius: 999px !important; border: 1.5px solid var(--sand-2) !important; background: #fff !important; color: var(--ink) !important; font: 700 14px/1 var(--sans) !important; box-shadow: none !important; transition: border-color .15s ease, background-color .15s ease; }
body.mtd-pdp #wrapper .summary .mt-pill:hover { border-color: var(--terra) !important; }
body.mtd-pdp #wrapper .summary .mt-pill.active { background: var(--terra-ink) !important; border-color: var(--terra-ink) !important; color: #fff !important; }
body.mtd-pdp #wrapper .summary .mt-pill.mt-disabled { background: var(--sand) !important; color: #9aa39e !important; text-decoration: line-through; border-style: dashed !important; }
body.mtd-pdp #wrapper .summary .reset_variations { color: var(--terra-ink); font-size: 13px; font-weight: 700; }
/* colour row (0.9.4): round finish swatches with the name under them, all colours on one row on phones. Layout is CSS
   only (the row is found by its select), so nothing moves when pdp.js paints the finishes (--sw). Same .mt-pill
   elements and text, so the swatch snippets keep working. */
body.mtd-pdp #wrapper .summary table.variations tr:has(select[name*="colo" i]) .mt-swatch-container { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(max(52px, 4.5em), 76px)); gap: 6px !important; font-size: 12px; } /* columns grow with the phone's text size, so a bigger text setting wraps to a second row instead of breaking a name */
body.mtd-pdp #wrapper .summary table.variations tr:has(select[name*="colo" i]) .mt-pill { flex-direction: column; justify-content: flex-start; gap: 6px; min-height: 44px; min-width: 0; padding: 6px 2px 8px !important; border: 1.5px solid transparent !important; border-radius: 16px !important; background: transparent !important; color: var(--ink-2) !important; font: 600 1em/1.2 var(--sans) !important; text-align: center; white-space: normal; overflow-wrap: break-word; cursor: pointer; }
body.mtd-pdp #wrapper .summary table.variations tr:has(select[name*="colo" i]) .mt-pill::before { content: ""; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--sw, var(--sand-2)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14), 0 0 0 3px #fff, 0 0 0 4.5px var(--sand-2); transition: box-shadow .15s ease; }
body.mtd-pdp #wrapper .summary table.variations tr:has(select[name*="colo" i]) .mt-pill:hover::before { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14), 0 0 0 3px #fff, 0 0 0 4.5px var(--terra); }
body.mtd-pdp #wrapper .summary table.variations tr:has(select[name*="colo" i]) .mt-pill.active { background: var(--olive-soft) !important; border-color: var(--terra-ink) !important; color: var(--olive) !important; font-weight: 800 !important; }
body.mtd-pdp #wrapper .summary table.variations tr:has(select[name*="colo" i]) .mt-pill.active::before { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14), 0 0 0 3px #fff, 0 0 0 5px var(--terra-ink); }
body.mtd-pdp #wrapper .summary table.variations tr:has(select[name*="colo" i]) .mt-pill.mt-disabled { background: transparent !important; color: #8a948f !important; border-style: dashed !important; border-color: var(--sand-2) !important; }
body.mtd-pdp #wrapper .summary table.variations tr:has(select[name*="colo" i]) .mt-pill.mt-disabled::before { opacity: .45; }
/* 0.10.2 (Wilson 27 Oct, via SAGE): the swatch snippet's script sits after the form, so a browser that paints while the
   page is still arriving first shows the plain dropdowns (54px rows), then the pills and swatches (taller), and
   everything below jumps. Until a row has its pills (.mt-swatch-container), it keeps the height the pills will take,
   by its option count. Once the pills are in, these rules no longer match and the row is its natural height. */
@media (min-width: 861px) {
  body.mtd-pdp #wrapper .summary table.variations tr:not(:has(.mt-swatch-container)) > td.value { box-sizing: border-box; height: 61px; }
  body.mtd-pdp #wrapper .summary table.variations tr:not(:has(.mt-swatch-container)):has(select option:nth-of-type(4)) > td.value { height: 113px; }
  body.mtd-pdp #wrapper .summary table.variations tr:not(:has(.mt-swatch-container)):has(select[name*="colo" i] option) > td.value { height: 87px; }
}
@media (max-width: 860px) {
  body.mtd-pdp #wrapper .summary table.variations tr:not(:has(.mt-swatch-container)) > td.value { box-sizing: border-box; min-height: 50px; }
  body.mtd-pdp #wrapper .summary table.variations tr:not(:has(.mt-swatch-container)):has(select option:nth-of-type(4)) > td.value { min-height: 102px; }
  body.mtd-pdp #wrapper .summary table.variations tr:not(:has(.mt-swatch-container)):has(select[name*="colo" i] option) > td.value { min-height: 91px; }
}
/* 0.10.3: "Read More" for long descriptions (pdp-more.php). The rest of the text sits in .mtd-more-body, shown when the
   checkbox is ticked; the label is the card's soft pill. Whole paragraphs only, so no line is cut. */
body.mtd-pdp #wrapper .summary .mtd-more { position: relative; margin: 0 0 6px; }
body.mtd-pdp #wrapper .summary .mtd-more-cb { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
body.mtd-pdp #wrapper .summary .mtd-more-body { display: none; }
body.mtd-pdp #wrapper .summary .mtd-more-cb:checked ~ .mtd-more-body { display: block; }
body.mtd-pdp #wrapper .summary .mtd-more-btn { display: inline-flex; align-items: center; min-height: 36px; margin: 2px 0 0; padding: 0 16px; border-radius: 999px; background: var(--olive-soft); color: var(--olive); font: 800 13px/1 var(--sans); cursor: pointer; user-select: none; transition: background-color .15s ease; }
body.mtd-pdp #wrapper .summary .mtd-more-btn:hover { background: #cdebd9; }
body.mtd-pdp #wrapper .summary .mtd-more-cb:focus-visible ~ .mtd-more-btn { outline: 3px solid rgba(47, 166, 106, .45); outline-offset: 2px; }
body.mtd-pdp #wrapper .summary .mtd-more-close, body.mtd-pdp #wrapper .summary .mtd-more-cb:checked ~ .mtd-more-btn .mtd-more-open { display: none; }
body.mtd-pdp #wrapper .summary .mtd-more-cb:checked ~ .mtd-more-btn .mtd-more-close { display: inline; }

/* 0.10.3: on simple products the add-on plugin (EPO) fills an empty "Total $x" box under add-to-cart after load (132px),
   which pushed the dispatch timer and everything below down (seen on the accessory pages, where it is on the first
   screen). The form keeps that space until the box has content; then the box takes it. */
body.mtd-pdp #wrapper .summary form.cart:has(.tc-epo-totals[data-type="simple"]:empty) { padding-bottom: 132px; }

/* 0.10.3: on phones the dispatch timer box is 92px tall as served ("Order in the next --h --m --s ...") and 64px once its
   script has written the time on two lines (it then gets a -mode class). Until then it keeps the final height. */
@media (max-width: 860px) {
  body.mtd-pdp #wrapper .summary .mt-action-zone:has(.mt-pdp-timer:not(.mt-timer-after-mode):not(.mt-timer-before-mode)) { box-sizing: border-box; height: 64px; overflow: hidden; }
}

/* 0.10.3: stock lines (the accessory pages show them; a sold-out product had the theme's pure red) */
body.mtd-pdp #wrapper .summary p.stock { font: 700 15px/1.4 var(--sans); }
body.mtd-pdp #wrapper .summary p.stock.in-stock { color: var(--terra-ink); }
body.mtd-pdp #wrapper .summary p.stock.out-of-stock { color: var(--rust); }

/* 0.10.5 item 52: free standard shipping line under the price (server-rendered, so nothing moves) */
body.mtd-pdp #wrapper .summary .mtd-shipline { margin: -4px 0 14px; font: 700 14px/1.4 var(--sans); }
body.mtd-pdp #wrapper .summary .mtd-shipline a { color: var(--terra-ink) !important; text-decoration: none !important; border: 0 !important; padding-bottom: 2px; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat; }
body.mtd-pdp #wrapper .summary .mtd-shipline a:hover { color: var(--olive); }
body.mtd-pdp #wrapper .summary .mtd-shipline a:focus-visible { outline: 3px solid rgba(47, 166, 106, .45); outline-offset: 2px; border-radius: 4px; }

/* 0.10.5 item 53: the ring video card (Lite/MAX), vertical video beside SAGE's text; the box is sized before the video
   loads (preload none), so nothing moves */
body.mtd-pdp #wrapper .mtd-vcard { clear: both; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: center; margin: clamp(40px, 5vw, 64px) 0 0; padding: clamp(18px, 3vw, 28px); border: 1px solid var(--sand-2); border-radius: var(--r); background: #fff; }
body.mtd-pdp #wrapper .mtd-vcard__video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 18px; background: var(--sand-2); object-fit: cover; }
body.mtd-pdp #wrapper .mtd-vcard__text h3 { margin: 0 0 10px; font: 800 clamp(24px, 2.6vw, 32px)/1.1 var(--serif); letter-spacing: -.01em; text-transform: none; color: var(--ink); }
body.mtd-pdp #wrapper .mtd-vcard__text p { max-width: 52ch; margin: 0; font: 500 16px/1.65 var(--sans); color: var(--ink-2); }
@media (max-width: 700px) {
  body.mtd-pdp #wrapper .mtd-vcard { grid-template-columns: 1fr; }
  body.mtd-pdp #wrapper .mtd-vcard__media { max-width: 280px; width: 100%; margin: 0 auto; }
}

/* screen-reader-only text (pdp.js puts the "Front: " / "Back: " label prefix in it) */
body.mtd-pdp #wrapper .mtd-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- EPO form (ThemeComplete Extra Product Options) ---------- */
body.mtd-pdp #wrapper .summary .tc-extra-product-options .tm-epo-element-label, body.mtd-pdp #wrapper .summary .tc-extra-product-options .tc-epo-label { font: 700 15px/1.3 var(--sans) !important; color: var(--ink) !important; }
body.mtd-pdp #wrapper .summary .tc-extra-product-options .tm-section-label { font: 800 11px/1.3 var(--sans) !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--terra-ink) !important; }
body.mtd-pdp #wrapper .summary .tm-epo-required, body.mtd-pdp #wrapper .summary .required { color: var(--rust) !important; }
body.mtd-pdp #wrapper .summary .tc-extra-product-options input.tmcp-textfield, body.mtd-pdp #wrapper .summary .tc-extra-product-options select, body.mtd-pdp #wrapper .summary .tc-extra-product-options textarea {
  min-height: 52px !important; padding: 12px 16px !important; border: 1.5px solid var(--sand-2) !important; border-radius: 14px !important; background: #fff !important; color: var(--ink) !important; font: 600 16px/1.3 var(--sans) !important; box-shadow: none !important; }
body.mtd-pdp #wrapper .summary .tc-extra-product-options input.tmcp-textfield:focus, body.mtd-pdp #wrapper .summary .tc-extra-product-options select:focus, body.mtd-pdp #wrapper .summary .tc-extra-product-options textarea:focus {
  border-color: var(--terra) !important; outline: 3px solid rgba(47, 166, 106, .25) !important; outline-offset: 0; }
body.mtd-pdp #wrapper .summary .tc-extra-product-options ::placeholder { color: #8a948f; opacity: 1; }
body.mtd-pdp #wrapper .summary .tc-chars { color: var(--muted) !important; font-size: 12px !important; }
/* radio choices shown as text buttons (Plus: No / Yes, add PLUS) */
body.mtd-pdp #wrapper .summary .tc-epo-text-wrapper .tc-epo-text-label-wrapper, body.mtd-pdp #wrapper .summary .tc-mode-text .tc-label-wrap { border-radius: 14px !important; }
body.mtd-pdp #wrapper .summary .tc-mode-text .tc-label-wrap { min-height: 48px; border: 1.5px solid var(--sand-2) !important; background: #fff !important; padding: 0 18px !important; display: inline-flex; align-items: center; font-weight: 700; color: var(--ink) !important; }
body.mtd-pdp #wrapper .summary .tc-mode-text input:checked + .tc-label, body.mtd-pdp #wrapper .summary .tc-mode-text .tcenabled:checked ~ .tc-label { color: #fff !important; }
body.mtd-pdp #wrapper .summary .tc-mode-text li:has(input:checked) .tc-label-wrap { background: var(--terra-ink) !important; border-color: var(--terra-ink) !important; color: #fff !important; }
body.mtd-pdp #wrapper .summary .tc-mode-text li:has(input:checked) .tc-label-text { color: #fff !important; }
/* EPO tooltips and help marks: green, never blue */
body.mtd-pdp #wrapper .summary .tc-extra-product-options .tc-tooltip, body.mtd-pdp #wrapper .summary .tc-extra-product-options .tm-tooltip, body.mtd-pdp #wrapper .summary .tc-extra-product-options [class*="tcfa-question"] { color: var(--terra-ink) !important; }
/* choice lists: one border per choice (the chip), not on the list item around it */
body.mtd-pdp #wrapper .summary .tc-mode-text, body.mtd-pdp #wrapper .summary .tc-mode-text .tmcp-field-wrap-inner, body.mtd-pdp #wrapper .summary .tc-mode-text .tm-epo-field-label, body.mtd-pdp #wrapper .summary .tc-mode-text .tc-epo-text-label-wrapper { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; }
body.mtd-pdp #wrapper .summary .mt-epo-plus-ul { display: flex !important; flex-wrap: wrap; gap: 10px; }
/* Front / Back tabs */
body.mtd-pdp #wrapper .summary .tc-tabs .tc-tab-headers { background: var(--cream) !important; border: 1px solid var(--sand-2) !important; border-radius: 999px !important; padding: 5px !important; box-shadow: none !important; }
body.mtd-pdp #wrapper .summary .tc-tabs .tc-tab-header .tab-header { border-radius: 999px !important; min-height: 46px; font: 700 15px/1 var(--sans) !important; color: var(--ink-2) !important; background: transparent !important; box-shadow: none !important; }
body.mtd-pdp #wrapper .summary .tc-tabs .tc-tab-header .tab-header.active, body.mtd-pdp #wrapper .summary .tc-tabs .tc-tab-header .tab-header.selected { background: var(--terra-ink) !important; color: #fff !important; }
body.mtd-pdp #wrapper .summary .tc-tabs .tc-tab-header .tab-header:focus-visible { outline: 3px solid rgba(47, 166, 106, .4) !important; outline-offset: 2px; }
body.mtd-pdp #wrapper .summary .tc-tabs .tc-tab-content { border: 1px solid var(--sand-2) !important; border-radius: var(--r) !important; background: #fff !important; box-shadow: none !important; }

/* ---------- live preview frame (snippet "Dual-Sided preview engine"): frame only, the drawing is untouched ---------- */
body.mtd-pdp #wrapper .summary .mt-epo-dual-stage { border-radius: var(--r) !important; box-shadow: 0 30px 60px -40px rgba(43, 36, 32, .5) !important; }
body.mtd-pdp #wrapper .summary .mt-epo-side-badge { background: #fff !important; color: var(--olive) !important; border-radius: 999px !important; } /* font untouched: nothing inside the preview changes font */
body.mtd-pdp #wrapper .summary .mt-epo-dual-note { color: var(--muted) !important; }

/* ---------- Final Quality Check (existing states kept: .is-checked, .is-error) ---------- */
body.mtd-pdp #wrapper .summary .mt-final-approval-box { border-radius: 18px !important; border: 1.5px solid var(--sand-2) !important; background: #fff !important; }
body.mtd-pdp #wrapper .summary .mt-final-approval-box.is-checked { border-color: var(--terra) !important; background: var(--olive-soft) !important; }
body.mtd-pdp #wrapper .summary .mt-final-approval-box.is-error { border-color: var(--rust) !important; background: #fdf1f0 !important; }
body.mtd-pdp #wrapper .summary .mt-approval-title { font: 800 11px/1.3 var(--sans) !important; letter-spacing: .1em; color: var(--terra-ink) !important; }
body.mtd-pdp #wrapper .summary .mt-approval-inner label { color: var(--ink) !important; font-weight: 600 !important; }
body.mtd-pdp #wrapper .summary .mt-approval-inner input[type="checkbox"] { accent-color: var(--terra-ink) !important; width: 20px !important; height: 20px !important; }

/* ---------- quantity, totals, add to cart ---------- */
body.mtd-pdp #wrapper .summary .quantity input.qty { min-height: 56px; border: 1.5px solid var(--sand-2); border-radius: 14px; background: #fff; color: var(--ink); font: 700 16px/1 var(--sans); }
body.mtd-pdp #wrapper .summary .single_add_to_cart_button { min-height: 56px; border-radius: 999px !important; background: var(--terra-ink) !important; color: #fff !important; font: 800 17px/1 var(--sans) !important; letter-spacing: 0; box-shadow: 0 14px 30px -16px rgba(31, 122, 76, .8) !important; border: 0 !important; transition: background-color .2s ease, transform .2s ease; }
body.mtd-pdp #wrapper .summary .single_add_to_cart_button:hover:not(.disabled) { background: var(--olive) !important; transform: translateY(-1px); }
body.mtd-pdp #wrapper .summary .single_add_to_cart_button:focus-visible { outline: 3px solid rgba(47, 166, 106, .45) !important; outline-offset: 3px; }
body.mtd-pdp #wrapper .summary .single_add_to_cart_button.disabled { background: #9ccbb2 !important; box-shadow: none !important; }
body.mtd-pdp #wrapper .summary .tc-epo-totals { color: var(--ink); }
body.mtd-pdp #wrapper .summary .tc-epo-totals .price, body.mtd-pdp #wrapper .summary .tc-epo-totals .amount { color: var(--ink) !important; font-weight: 800; }

/* ---------- dispatch timer (snippet) ---------- */
body.mtd-pdp #wrapper .summary .mt-pdp-timer { border-radius: 16px !important; border: 0 !important; background: var(--olive-soft) !important; box-shadow: none !important; }
body.mtd-pdp #wrapper .summary .mt-pdp-timer, body.mtd-pdp #wrapper .summary .mt-pdp-timer span:not(.mt-dynamic-time) { color: var(--olive) !important; }
body.mtd-pdp #wrapper .summary .mt-dynamic-time { background: var(--olive) !important; color: #fff !important; border-radius: 999px !important; }
body.mtd-pdp #wrapper .summary .product_meta { margin-top: 18px; font-size: 13px; color: var(--muted); }
body.mtd-pdp #wrapper .summary .product_meta a { color: var(--terra-ink); }

/* ---------- description tab + specs table ---------- */
body.mtd-pdp #wrapper .woocommerce-tabs { margin-top: clamp(48px, 6vw, 80px); }
body.mtd-pdp #wrapper .woocommerce-tabs ul.tabs { border: 0; justify-content: flex-start; }
body.mtd-pdp #wrapper .woocommerce-tabs ul.tabs::before { display: none; }
body.mtd-pdp #wrapper .woocommerce-tabs ul.tabs li { border: 0 !important; background: transparent !important; }
body.mtd-pdp #wrapper .woocommerce-tabs ul.tabs li a { font: 800 clamp(26px, 3vw, 36px)/1.1 var(--serif); color: var(--ink); padding: 0 0 12px; }
body.mtd-pdp #wrapper .woocommerce-tabs ul.tabs li.active a { border-bottom: 3px solid var(--terra); }
body.mtd-pdp #wrapper .woocommerce-tabs .panel { background: transparent; }
body.mtd-pdp #wrapper .mt-specs-table { border-collapse: separate; border-spacing: 0; width: 100%; border-radius: var(--r); overflow: hidden; background: var(--cream); border: 1px solid var(--sand-2); }
body.mtd-pdp #wrapper .mt-specs-table th, body.mtd-pdp #wrapper .mt-specs-table td { padding: 16px 20px !important; border: 0 !important; border-top: 1px solid var(--sand-2) !important; background: transparent !important; font-size: 15px; color: var(--ink-2); }
body.mtd-pdp #wrapper .mt-specs-table tr:first-child > * { border-top: 0 !important; }
body.mtd-pdp #wrapper .mt-specs-table tr > :first-child { font: 800 12px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--terra-ink); width: 34%; }

/* ---------- FAQ (snippets "Never-Fall FAQ" + "Global Product Page FAQ"): the info pages' details style ---------- */
body.mtd-pdp #wrapper .mt-pdp-faq-section { margin-top: clamp(48px, 6vw, 80px); padding: 0 !important; background: transparent !important; }
body.mtd-pdp #wrapper .mt-pdp-faq-head h2, body.mtd-pdp #wrapper .mt-pdp-faq-head h3 { font: 800 clamp(30px, 3.6vw, 44px)/1.05 var(--serif) !important; letter-spacing: -.01em !important; color: var(--ink) !important; }
body.mtd-pdp #wrapper .mt-pdp-faq-eyebrow { background: transparent !important; border: 0 !important; padding: 0 !important; font: 800 12px/1.3 var(--sans) !important; letter-spacing: .1em !important; color: var(--terra-ink) !important; }
body.mtd-pdp #wrapper .mt-pdp-faq-intro { color: var(--ink-2) !important; }
body.mtd-pdp #wrapper .mt-pdp-faq-group-label { color: var(--terra-ink) !important; }
body.mtd-pdp #wrapper .mt-pdp-faq-item { border-radius: 18px !important; border: 1px solid var(--sand-2) !important; background: #fff !important; box-shadow: none !important; }
body.mtd-pdp #wrapper .mt-pdp-faq-item[open] { border-color: rgba(47, 166, 106, .45) !important; }
body.mtd-pdp #wrapper .mt-pdp-faq-q { font: 700 16px/1.35 var(--sans) !important; color: var(--ink) !important; }
body.mtd-pdp #wrapper .mt-pdp-faq-toggle { background: var(--olive-soft) !important; color: var(--olive) !important; }
body.mtd-pdp #wrapper .mt-pdp-faq-a, body.mtd-pdp #wrapper .mt-pdp-faq-a p { color: var(--ink-2) !important; }
body.mtd-pdp #wrapper .mt-pdp-faq-a a, body.mtd-pdp #wrapper .mt-pdp-faq-link { color: var(--terra-ink) !important; }
body.mtd-pdp #wrapper .mt-pdp-faq-icon { background: var(--olive-soft) !important; }

/* ---------- related products: the hub's shop cards ---------- */
body.mtd-pdp #wrapper section.related.products { margin-top: clamp(48px, 6vw, 80px); }
body.mtd-pdp #wrapper section.related.products > h2 { font: 800 clamp(28px, 3.2vw, 40px)/1.1 var(--serif); color: var(--ink); }
body.mtd-pdp #wrapper section.related ul.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
body.mtd-pdp #wrapper section.related ul.products::before, body.mtd-pdp #wrapper section.related ul.products::after { content: none; }
body.mtd-pdp #wrapper section.related ul.products > li.product { width: auto !important; float: none; margin: 0; border-radius: 22px; background: #fff; border: 1px solid var(--sand-2); overflow: hidden; }
body.mtd-pdp #wrapper section.related li.product .woocommerce-loop-product__title { font: 800 17px/1.25 var(--serif) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--ink) !important; }
body.mtd-pdp #wrapper section.related li.product .woocommerce-loop-product__title a { color: inherit; text-decoration: none; }
body.mtd-pdp #wrapper section.related li.product .price { color: var(--terra-ink); font-weight: 700; }
body.mtd-pdp #wrapper section.related li.product .product-excerpt { display: none; }
body.mtd-pdp #wrapper section.related li.product .button { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; max-width: 100%; border-radius: 999px; background: var(--terra-ink) !important; color: #fff !important; font: 700 14px/1.15 var(--sans) !important; text-transform: none !important; letter-spacing: 0 !important; padding: 12px 18px !important; white-space: nowrap; text-align: center; }
/* small cards: one centred pill, the arrow hidden (shop-card rule, as on the shop pages) */
@media (max-width: 480px) {
  body.mtd-pdp #wrapper section.related li.product .button { width: 100%; padding: 10px 10px !important; font-size: 13px !important; white-space: normal; border-radius: 22px; }
  body.mtd-pdp #wrapper section.related li.product .button .kadence-svg-iconset { display: none !important; }
}
body.mtd-pdp #wrapper section.related li.product .product-details { padding: 14px 16px 16px; }
body.mtd-pdp #wrapper section.related li.product .button:hover, body.mtd-pdp #wrapper section.related li.product .button:focus-visible { background: var(--olive); color: #fff; }

/* ---------- phones ---------- */
@media (max-width: 1024px) {
  body.mtd-pdp #wrapper section.related ul.products { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (max-width: 860px) {
  body.mtd-pdp #wrapper div.product.type-product { grid-template-columns: minmax(0, 1fr); }
  body.mtd-pdp #wrapper div.product.type-product > .woocommerce-product-gallery, body.mtd-pdp #wrapper div.product.type-product > .summary { grid-column: 1; position: static; }
  body.mtd-pdp #wrapper div.product.type-product > .summary { margin-top: 24px; }
  body.mtd-pdp #wrapper .summary .tc-extra-product-options input.tmcp-textfield, body.mtd-pdp #wrapper .summary .tc-extra-product-options select { font-size: 16px !important; } /* no iOS zoom on focus */
  body.mtd-pdp #wrapper .woocommerce-tabs ul.tabs { justify-content: flex-start; }
  body.mtd-pdp #wrapper .mt-specs-table tr > :first-child { width: 42%; }
  /* 0.9.4 (Wilson's phone feedback): the thumbnail strip sits under the photo, not 32px over it. Layout is left
     exactly as live (the theme's -32px, which its pre-slider placeholder also reserves) and the strip is drawn 42px
     lower with top, into 42px kept free under the gallery from the first paint. So nothing jumps when the slider
     builds the strip late (moving it with margin did: CLS 0.012 on the faithful test). */
  body.mtd-pdp #wrapper .woocommerce-product-gallery .flex-control-thumbs { position: relative !important; top: 42px !important; }
  body.mtd-pdp #wrapper div.product.type-product > .woocommerce-product-gallery.gallery-has-thumbnails { margin-bottom: 42px; }
  /* option labels above the options, so the pills get the full width */
  body.mtd-pdp #wrapper .summary table.variations, body.mtd-pdp #wrapper .summary table.variations tbody, body.mtd-pdp #wrapper .summary table.variations tr, body.mtd-pdp #wrapper .summary table.variations th.label, body.mtd-pdp #wrapper .summary table.variations td.value { display: block; width: 100%; }
  body.mtd-pdp #wrapper .summary table.variations th.label { padding: 12px 0 8px; }
  body.mtd-pdp #wrapper .summary table.variations td.value { padding: 0 0 6px; }
  body.mtd-pdp #wrapper .summary table.variations tr:has(select[name*="colo" i]) .mt-swatch-container { grid-template-columns: repeat(auto-fit, minmax(max(52px, 4.5em), 1fr)); }
  /* engraving form: tighter, labels semibold */
  body.mtd-pdp #wrapper .summary .tc-extra-product-options .tm-epo-element-label, body.mtd-pdp #wrapper .summary .tc-extra-product-options .tc-epo-label { font: 600 16px/1.3 var(--sans) !important; margin-bottom: 6px !important; }
  body.mtd-pdp #wrapper .summary .tc-tabs .cpf-element { margin-bottom: 14px !important; }
  body.mtd-pdp #wrapper .summary .tc-extra-product-options input.tmcp-textfield { min-height: 46px !important; padding: 10px 14px !important; font-weight: 500 !important; } /* text stays 16px: smaller makes iPhones zoom in on tap */
  body.mtd-pdp #wrapper .summary .tc-extra-product-options input.tmcp-textfield::placeholder { font-size: 15px; }
  body.mtd-pdp #wrapper .summary .tc-chars { display: block; margin-top: 4px; }
}