; both selectors handle this */ .mt-section-head .mt-eyebrow, .mt-section-head .mt-eyebrow p { display: block; margin-bottom: var(--space-2); color: var(--mt-slate); } /* --- Divi eyebrow text module helper --- */ .mt-divi-eyebrow p { font-family: var(--font-body); font-weight: var(--type-eyebrow-weight); font-size: var(--type-eyebrow-size); line-height: var(--type-eyebrow-lh); letter-spacing: var(--type-eyebrow-track); text-transform: uppercase; } /* --- Container --- */ .mt-container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); } @media (max-width: 900px) { .mt-container { padding: 0 24px; } } .mt-reading { max-width: var(--reading-max); } /* --- Lane chips (eyebrow with a coloured pip) --- */ .mt-lane { display: inline-flex; align-items: center; gap: 10px; } .mt-lane::before { content: ""; display: inline-block; width: 10px; height: 10px; background: currentColor; } .mt-lane--watch { color: var(--mt-sapphire); } .mt-lane--high-jewellery { color: var(--mt-ruby); } .mt-lane--single-stones { color: var(--mt-emerald); } /* ============================================================ Pattern motif — geometric time tessellation Two cuts: line (outline, for light/tinted fields) solid (filled, for dark editorial blocks) Both PNGs are transparent masters; tint via opacity/filter. ============================================================ */ /* Light — line cut (whisper of pattern on Natural backgrounds) */ .mt-motif-light { background-color: var(--mt-natural); position: relative; overflow: hidden; } .mt-motif-light::before { content: ""; position: absolute; inset: 0; background-image: url("assets/images/pattern-line-heavy.png"); background-repeat: repeat; background-size: 720px auto; opacity: 0.18; pointer-events: none; } /* Light — solid cut (bolder Natural backgrounds) */ .mt-motif-light--solid { background-color: var(--mt-natural); position: relative; overflow: hidden; } .mt-motif-light--solid::before { content: ""; position: absolute; inset: 0; background-image: url("assets/images/pattern-solid-heavy.png"); background-repeat: repeat; background-size: 720px auto; opacity: 0.10; pointer-events: none; } /* Dark — line cut, inverted. FIXED v1.1.0: opacity was 0.22, corrected to 0.10 per spec README (5–10% rule). The footer uses this class and must stay at 0.10. */ .mt-motif-dark { background-color: var(--mt-black); position: relative; overflow: hidden; color: var(--mt-natural); } .mt-motif-dark::before { content: ""; position: absolute; inset: 0; background-image: url("assets/images/pattern-line-heavy.png"); background-repeat: repeat; background-size: 720px auto; filter: invert(1); opacity: 0.10; /* FIX: was 0.22 */ pointer-events: none; } /* Dark — solid cut, inverted (section dividers, sapphire/ruby editorial blocks) */ .mt-motif-dark--solid { background-color: var(--mt-black); position: relative; overflow: hidden; color: var(--mt-natural); } .mt-motif-dark--solid::before { content: ""; position: absolute; inset: 0; background-image: url("assets/images/pattern-solid-heavy.png"); background-repeat: repeat; background-size: 720px auto; filter: invert(1); opacity: 0.12; pointer-events: none; } /* Inverted (dark) sections — utility class for non-motif dark panels */ .mt-inverted { background: var(--mt-black); color: var(--mt-natural); } .mt-inverted a { color: var(--mt-natural); } .mt-inverted .mt-eyebrow { color: var(--mt-stone-400); } /* ============================================================ Footer chrome — Section 9, v1.10 / v1.12 ============================================================ */ /* Breathing strip: 64px Natural gap between a light content section and the Black footer. Omit when a dark CTA panel sits directly above the footer — it flows straight in. */ .mt-footer-breathing-strip { height: 64px; background: var(--mt-natural); } /* Footer wrapper — ADDED v1.1.0: position:relative required so the ::before pattern overlay is clipped to the footer bounds. */ .mt-footer { position: relative; overflow: hidden; } /* Footer pattern overlay — the time motif on Black. Opacity 0.10 per spec. Child of .mt-footer must be position:relative to sit above this overlay (Divi adds this automatically on row/module). */ .mt-footer::before { content: ""; position: absolute; inset: 0; background-image: url("assets/images/pattern-line-heavy.png"); background-repeat: repeat; background-size: 720px auto; filter: invert(1); opacity: 0.10; pointer-events: none; } /* EST. 1987 — bottom-right footer chrome. Karla Medium, true small caps via font-variant-caps (not text-transform). +0.08em tracking per v1.12 F-5 unified footer letter-spacing rule. text-transform: none is required — it would override font-variant-caps. */ .mt-footer-est { font-family: var(--font-body); font-weight: 500; font-variant-caps: all-small-caps; text-transform: none; /* do not change — required for small caps to render */ font-size: 11px; letter-spacing: 0.08em; /* v1.12 F-5: unified footer micro-text tracking */ color: inherit; } /* Footer bottom row — copyright + legal links left, EST. 1987 right. All text: Karla Medium uppercase 11px +0.08em (v1.12 F-5). */ .mt-footer-bottom { font-family: var(--font-body); font-weight: 500; font-size: 11px; letter-spacing: 0.08em; /* v1.12 F-5 */ text-transform: uppercase; color: inherit; } .mt-footer-bottom__row { display: flex; justify-content: space-between; align-items: baseline; padding-top: 22px; } .mt-footer-bottom__legal { display: flex; align-items: baseline; } .mt-footer-bottom__sep { margin: 0 8px; opacity: 0.6; } /* Desktop only — mobile gets the stacked version below */ .mt-footer-bottom__mobile { display: none; } /* PRIVACY · TERMS hover: underline only, no colour change (v1.12 F-7) */ .mt-footer-legal-link { color: inherit; text-decoration: none; text-underline-offset: 3px; text-decoration-thickness: 1px; outline: 0; } .mt-footer-legal-link:hover { text-decoration: underline; } .mt-footer-legal-link:focus-visible { text-decoration: underline; outline: 2px solid var(--mt-natural); outline-offset: 3px; } /* Mobile footer bottom row — four centred lines at ≤375px (v1.12 F-6) */ @media (max-width: 375px) { .mt-footer-bottom__row { display: none; } .mt-footer-bottom__mobile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 22px; text-align: center; } .mt-footer-bottom__mobile .mt-footer-bottom__sep { margin: 0 6px; } } @media (max-width: 980px) { .no-burger-footer .et_pb_menu__menu { display: flex !important; } .no-burger-footer .et_mobile_nav_menu { display: none !important; } } /* ============================================================ Colour Masters surfaces — Section 16, v1.8 Stone 100 panel + time motif at 12–15% Olive opacity. No lane colour. Stone 100 + motif is the visual signal. ============================================================ */ /********** surface line**********/ .mt-cm-surface { background-color: var(--mt-stone-100); position: relative; overflow: hidden; } .mt-cm-surface::before { content: ""; position: absolute; inset: 0; background-image: url("assets/images/pattern-line-heavy.png"); background-repeat: repeat; background-size: 640px auto; /* Olive tint via CSS filter chain */ filter: invert(48%) sepia(15%) saturate(420%) hue-rotate(60deg) brightness(92%); opacity: 0.13; pointer-events: none; } .mt-cm-surface > * { position: relative; } /********** glyph line**********/ .mt-cm-glyph-time { background-color: var(--mt-stone-100); position: relative; overflow: hidden; } .mt-cm-glyph-time-col { background-color: var(--mt-stone-100); position: relative; } .mt-cm-glyph-time::before { content: ""; position: absolute; right: -4%; top: 50%; transform: translateY(-50%); width: 46%; aspect-ratio: 1 / 1; background-image: url("assets/images/glyph-time.png"); background-repeat: no-repeat; background-position: center center; background-size: contain; opacity: 0.08; /* Olive tint via CSS filter chain */ filter: brightness(0) saturate(100%) invert(38%) sepia(13%) saturate(746%) hue-rotate(31deg) brightness(94%) contrast(86%); opacity: 0.08; pointer-events: none; } .mt-cm-glyph-time-col::before { content: ""; position: absolute; inset: -10%; background-image: url("assets/images/glyph-time.png"); background-repeat: no-repeat; background-position: center center; background-size: contain; opacity: 0.13; /* Olive tint via CSS filter chain */ filter: brightness(0) saturate(100%) invert(38%) sepia(13%) saturate(746%) hue-rotate(31deg) brightness(94%) contrast(86%); opacity: 0.08; pointer-events: none; } .mt-cm-glyph-time > *, .mt-cm-glyph-time-col > * { position: relative; } /********** surface heavy**********/ .mt-cm-surface-heavy { background-color: var(--mt-stone-100); position: relative; overflow: hidden; } .mt-cm-surface-heavy::before { content:""; position: absolute; inset: 0px; background-image: url(assets/images/pattern-line-heavy.png); background-size: 900px; background-repeat: repeat; opacity: 0.08; filter: invert(1) sepia(0.4) saturate(0.6) hue-rotate(40deg) brightness(0.95); pointer-events: none; mix-blend-mode: normal; } .mt-cm-surface-heavy > * { position: relative; } /* Colour Matching lane panel eyebrow. +0.12em tracking per v1.12 CM-2 (matches system-wide non-footer eyebrow rule). */ .mt-cm-eyebrow { font-family: var(--font-body); font-weight: 500; font-size: 13px; line-height: 1.4; letter-spacing: 0.12em; /* v1.12 CM-2 — was 0.14em */ text-transform: uppercase; color: var(--mt-steel); } /* Image plate inside Colour Matching panels */ .mt-cm-plate { position: relative; background: var(--mt-natural); overflow: hidden; } .mt-cm-plate > img, .mt-cm-plate > .mt-cm-plate-image { display: block; width: 100%; height: 100%; object-fit: cover; } /* ── WooCommerce result count — spec: "Showing X stones" ── */ .woocommerce-result-count { font-family: var(--font-body) !important; font-size: 13px !important; font-weight: 400 !important; letter-spacing: 0.02em !important; color: var(--mt-slate) !important; margin: 0 !important; padding: 0 !important; } /* ── Result count + format tabs row ─────────────────────── */ .mt-results-row { display: flex; align-items: center; justify-content: space-between; } /* Caption positioner — bottom-left of any .mt-cm-plate. Pair with brand-mark for typography:
Colour mastered. Colour communicated.
FIXED v1.1.0: colour removed from here (now inherited via .mt-brand-mark--caption). Add .mt-brand-mark--caption--on-dark for dark plates. */ .mt-cm-caption { position: absolute; bottom: 16px; left: 16px; background: transparent; margin: 0; z-index: 2; } /* ============================================================ Trade pricing — Section 15, v1.7 ============================================================ */ /* TRADE PRICING eyebrow — +0.12em per v1.12 system-wide non-footer rule */ .mt-trade-eyebrow { font-family: var(--font-body); font-weight: 500; font-size: 11px; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mt-olive); margin: 0 0 6px 0; } /* Price display — Sentient Regular, negative tracking */ .mt-price { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.005em; color: var(--fg); margin: 0; } .mt-price-poa { font-style: italic; color: var(--mt-slate); } .mt-price--card { font-size: 19px; line-height: 1.2; } .mt-price--pdp { font-size: 24px; line-height: 1.2; } /* v1.12: 24px (not 32px) */ .mt-price-caption { font-family: var(--font-body); font-weight: 400; font-size: 13px; line-height: 1.5; color: var(--mt-slate); margin: 6px 0 0 0; } /* Locked price (pre-login state — same size, same font, just a different state) */ .mt-price-locked { font-family: var(--font-display); font-weight: 400; color: var(--fg); margin: 0; } .mt-price-locked--card { font-size: 19px; line-height: 1.2; } .mt-price-locked--pdp { font-size: 24px; line-height: 1.2; } .mt-trade-link { font-family: var(--font-body); font-weight: 500; font-size: 13px; letter-spacing: 0.04em; color: var(--mt-steel); text-decoration: underline; text-underline-offset: 3px; } .mt-trade-link:hover { color: var(--mt-black); } /* ============================================================ Process Steps — "How It Works" section Watch Stone Calibration page ============================================================ */ .mt-process { padding: 160px 64px; } /* The connecting line + dot markers */ .mt-process-track { position: relative; padding-top: 24px; } .mt-process-track::before { content: ""; position: absolute; top: 24px; left: 6.25%; right: 6.25%; height: 1px; background: var(--mt-stone-200); } /* 4-column grid sitting below the line */ .mt-process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding-top: 48px; } /* Individual step card */ .mt-process-step { position: relative; padding-right: 16px; } /* Ghost numeral — sits behind the heading */ .mt-process-step__num { position: absolute; top: -32px; left: -8px; font-family: var(--font-display); font-weight: 300; font-size: 84px; line-height: 1; color: var(--mt-black); opacity: 0.12; letter-spacing: -0.02em; pointer-events: none; user-select: none; } /* Content sits above the ghost numeral */ .mt-process-step__body { position: relative; padding-top: 24px; } .mt-process-step__heading { font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 1.3; color: var(--mt-black); margin: 0 0 14px; } .mt-process-step__text { font-family: var(--font-body); font-size: 15px; line-height: 1.7; color: var(--mt-slate); margin: 0; } /* Dot markers on the connecting line — one per step */ .mt-process-dots { position: absolute; top: 24px; left: 6.25%; right: 6.25%; height: 0; display: flex; justify-content: space-between; pointer-events: none; } .mt-process-dot { width: 9px; height: 9px; background: var(--mt-black); transform: translateY(-4px); flex-shrink: 0; } /* Footer note below the steps */ .mt-process-footnote { margin-top: 96px; padding-top: 32px; border-top: 1px solid var(--mt-stone-200); text-align: center; font-family: var(--font-body); font-weight: 500; font-style: italic; font-size: 15px; color: var(--mt-slate); letter-spacing: 0.02em; } /* Mobile */ @media (max-width: 768px) { .mt-process { padding: 88px 24px; } .mt-process-grid { grid-template-columns: 1fr; gap: 40px; padding-top: 0; } .mt-process-track::before { display: none; } .mt-process-dots { display: none; } .mt-process-step { padding-right: 0; padding-top: 16px; border-top: 1px solid var(--mt-stone-200); } .mt-process-step__num { top: 4px; left: auto; right: 0; font-size: 64px; } .mt-process-step__body { padding-top: 0; } .mt-process-footnote { margin-top: 56px; } } /* ============================================================ Process Steps — High Jewellery variant Inline numeral, full-width connecting line ============================================================ */ .mt-process-hj { position: relative; } /* Full-width connecting line sits behind the numerals */ .mt-process-hj::before { content: ""; position: absolute; top: 32px; /* aligns with vertical centre of 64px numeral */ left: 0; right: 0; height: 1px; background: var(--mt-stone-200); z-index: 0; } .mt-process-hj-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; position: relative; z-index: 1; /* sits above the connecting line */ } /* Numeral — inline, cuts through the line via background */ .mt-process-hj-num { font-family: var(--font-display); font-weight: 300; font-size: 64px; line-height: 1; color: rgba(35, 34, 30, 0.30); /* --mt-black at 30% */ margin-bottom: 16px; background: var(--mt-natural); /* punches through the connecting line */ display: inline-block; padding-right: 12px; } .mt-process-hj-heading { font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 1.3; margin: 0 0 12px; color: var(--mt-black); } .mt-process-hj-text { font-family: var(--font-body); font-size: 15px; line-height: 1.6; margin: 0; color: var(--mt-black); /* full black — different from Watch variant */ } @media (max-width: 768px) { .mt-process-hj::before { display: none; } .mt-process-hj-grid { grid-template-columns: 1fr; gap: 40px; } } /* ============================================================ Process Steps — Curated Stones variant 3-column, wider gap, numeral in reserved height box ============================================================ */ .mt-process-cs { position: relative; } /* Connecting line — inset 8.33% (1 col of a 12-col grid) */ .mt-process-cs::before { content: ""; position: absolute; top: 36px; /* aligns with numeral midpoint */ left: 8.33%; right: 8.33%; height: 1px; background: var(--mt-stone-200); z-index: 0; } .mt-process-cs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 64px; /* wider than 4-col variants */ position: relative; z-index: 1; } /* Reserved height box holds the numeral — line passes behind it */ .mt-process-cs-num-box { position: relative; height: 80px; margin-bottom: 24px; } .mt-process-cs-num { position: absolute; left: 0; top: 0; font-family: var(--font-display); font-weight: 300; font-size: 64px; line-height: 1; color: rgba(35, 34, 30, 0.30); } .mt-process-cs-heading { font-family: var(--font-display); font-weight: 400; font-size: 26px; /* larger than Watch/HJ — 3 cols have more room */ line-height: 1.3; margin: 0 0 16px; color: var(--mt-black); max-width: 320px; } .mt-process-cs-text { font-family: var(--font-body); font-width: 300; font-size: 16px; line-height: 1.6; color: var(--mt-black); margin: 0; max-width: 360px; } @media (max-width: 768px) { .mt-process-cs::before { display: none; } .mt-process-cs-grid { grid-template-columns: 1fr; gap: 40px; } } /* ============================================================ Traceability Levels Comparison Table StandardPage2 — Section 5 "At a glance" Desktop: 4-column grid table Mobile: stacked cards ============================================================ */ .mt-levels-table { background: var(--mt-natural); border: 1px solid var(--mt-stone-200); } /* Header row */ .mt-levels-table__head { display: grid; grid-template-columns: 120px 160px 1.4fr 1.2fr; gap: 24px; padding: 20px 32px; border-bottom: 1px solid var(--mt-stone-200); background: var(--mt-natural); } .mt-levels-table__col-label { font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mt-slate); margin: 0; } /* Data rows */ .mt-levels-table__row { display: grid; grid-template-columns: 120px 160px 1.4fr 1.2fr; gap: 24px; padding: 28px 32px; border-bottom: 1px solid var(--mt-stone-200); align-items: center; } .mt-levels-table__row:last-child { border-bottom: 0; } /* Alternating row backgrounds — odd rows Stone 100, even rows Natural */ .mt-levels-table__row:nth-child(odd) { background: var(--mt-natural); } .mt-levels-table__row:nth-child(even) { background: var(--mt-stone-100); } /* Level code — large Sentient Light */ .mt-levels-table__code { font-family: var(--font-display); font-weight: 300; font-size: 36px; line-height: 1; color: var(--mt-black); margin: 0; } /* Type badge — coloured pip + uppercase label */ .mt-levels-table__type { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mt-black); } .mt-levels-table__pip { display: inline-block; width: 12px; height: 12px; flex-shrink: 0; } .mt-levels-table__pip--proven { background: var(--mt-emerald); } .mt-levels-table__pip--declared { background: var(--mt-sapphire); } /* Documentation depth — Karla regular */ .mt-levels-table__doc { font-family: var(--font-body); font-size: 14px; line-height: 1.5; color: var(--mt-black); margin: 0; } /* Typical use case — Sentient Light Italic */ .mt-levels-table__use { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 17px; line-height: 1.4; color: var(--mt-black); margin: 0; } /* ---- Mobile — stacked cards ---- */ @media (max-width: 768px) { .mt-levels-table__head { display: none; } .mt-levels-table__row { grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; grid-template-areas: "code type" "code doc" "code use"; padding: 24px; gap: 8px 20px; } .mt-levels-table__code { grid-area: code; font-size: 40px; align-self: start; } .mt-levels-table__type { grid-area: type; } .mt-levels-table__doc { grid-area: doc; } .mt-levels-table__use { grid-area: use; font-size: 14px; } } /* Eyebrow label — "PHOTOGRAPH" */ .mt-plate-eyebrow { font-family: var(--font-body); font-weight: 500; font-size: 11px; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mt-slate); margin: 0 0 4px 0; } /* Caption line — italic Sentient */ .mt-plate-caption { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 16px; opacity: 0.85; line-height: 1.4; color: var(--mt-black); margin: 0; } /* On dark image plates — add .mt-plate-caption--light */ .mt-plate-caption--light, .mt-plate-eyebrow--light { color: var(--mt-stone-200); } /* ============================================================ Final CTA Cards — dark section, 3-column lane cards StandardPage3 Section 11 / shared across lane pages ============================================================ */ .mt-cta-cards { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; margin-bottom: 48px; } .mt-cta-card { display: inline-flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 36px; min-width: 240px; background: transparent; border: 1px solid var(--mt-stone-400); color: var(--mt-natural); text-decoration: none; cursor: pointer; /* transition covers bg, border, and color together */ transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); } /* Hover — entire card flips to Natural */ .mt-cta-card:hover { background: var(--mt-natural); border-color: var(--mt-natural); color: var(--mt-black); } /* Coloured pip — 8×8px square, lane colour */ .mt-cta-card__pip { display: block; width: 8px; height: 8px; flex-shrink: 0; } .mt-cta-card__pip--sapphire { background: var(--mt-sapphire); } .mt-cta-card__pip--ruby { background: var(--mt-ruby); } .mt-cta-card__pip--emerald { background: var(--mt-emerald); } /* Lane label — uppercase micro */ .mt-cta-card__lane { font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.7; color: inherit; /* inherits from card, flips on hover */ } /* CTA text — Sentient Regular */ .mt-cta-card__cta { font-family: var(--font-display); font-size: 20px; font-weight: 400; letter-spacing: 0; color: inherit; /* inherits from card, flips on hover */ } /* Mobile */ @media (max-width: 768px) { .mt-cta-cards { gap: 12px; } .mt-cta-card { padding: 20px 24px; min-width: 180px; } } .woocommerce ul.products::before { display: none; } /* ============================================================ Stone Card — WooCommerce product loop card content-product.php override styles Append these rules to your child theme style.css ============================================================ */ /* ── Grid ─────────────────────────────────────────────────── */ /* .woocommerce ul.products { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } */ /* ── Card wrapper ─────────────────────────────────────────── */ .mt-stone-card { margin: 0 !important; padding: 0 !important; float: none !important; width: auto !important; background: var(--mt-natural); border: 1px solid var(--mt-stone-200); border-radius: 0; transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); display: flex; flex-direction: column; } .mt-stone-card:hover { border-color: var(--mt-stone-400); transform: translateY(-1px); } /* css to fight the divi wocommerce width css for mobile */ .woocommerce-page ul.products li.product.mt-stone-card:nth-child(n) { width: auto !important; margin: 0 !important; float: none !important; clear: none !important; } .mt-stone-card__link { display: flex; flex-direction: column; text-decoration: none; flex: 1; } /* ── Image ────────────────────────────────────────────────── */ .mt-stone-card__image-wrap { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-bottom: 1px solid var(--mt-stone-200); background: var(--mt-stone-100); } .mt-stone-card__image-wrap img.mt-card__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); margin: 0 !important; } .mt-stone-card:hover .mt-stone-card__image-wrap img.mt-card__img { transform: scale(1.03); } /* Placeholder — shown when no product image is uploaded */ .mt-stone-card__placeholder { width: 100%; height: 100%; display: flex; align-items: flex-end; padding: 14px 16px; background: linear-gradient(135deg, #EFE9E2 0%, #E2DBD2 100%); } .mt-stone-card__placeholder-label { font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mt-slate); } /* ── Card body ────────────────────────────────────────────── */ .mt-stone-card__body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; } /* Title row — name left, SKU right */ .mt-stone-card__title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .mt-stone-card__name { font-family: var(--font-display) !important; font-weight: 400 !important; font-size: 19px !important; line-height: 1.25 !important; letter-spacing: 0 !important; color: var(--mt-black) !important; margin: 0 !important; } .mt-stone-card__sku { font-family: var(--font-body); font-size: 12px; font-weight: 400; letter-spacing: 0.04em; color: var(--mt-slate); white-space: nowrap; flex-shrink: 0; } /* Specs line */ .mt-stone-card__specs { font-family: var(--font-body); font-size: 13px; line-height: 1.5; color: var(--mt-slate); margin: 0 0 18px 0 !important; } /* ── Footer row ───────────────────────────────────────────── */ .mt-stone-card__footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-top: 16px; border-top: 1px solid var(--mt-stone-200); margin-top: auto; } /* Traceability badge */ .mt-stone-card__trace { display: inline-flex; align-items: center; gap: 8px; } .mt-trace-pip { display: inline-block; width: 12px; height: 12px; flex-shrink: 0; } /* Olive = Proven (P1, P2) */ .mt-trace-pip--proven { background: var(--mt-olive); } /* Violet = Declared (D1, D2, D3) */ .mt-trace-pip--declared { background: var(--mt-violet); } .mt-stone-card__trace-text { font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; color: var(--mt-black); } /* Level code in Sentient — sits before the label */ .mt-stone-card__trace-level { font-family: var(--font-display); font-weight: 400; letter-spacing: 0; margin-right: 6px; } /* Price block */ .mt-stone-card__price-wrap { text-align: right; flex-shrink: 0; display: inline-flex; flex-direction: column; } /* Trade pricing eyebrow — already in style.css as .mt-trade-eyebrow */ /* Price amount — already in style.css as .mt-price .mt-price--card */ /* Override WC default price styles inside card */ .mt-stone-card .price { font-family: var(--font-display) !important; font-weight: 400 !important; font-size: 19px !important; line-height: 1 !important; color: var(--mt-black) !important; letter-spacing: -0.005em !important; margin: 0 !important; } .mt-stone-card .price del, .mt-stone-card .price ins { display: none !important; /* hide sale price formatting */ } /* Hide WC elements that don't belong in spec card */ .mt-stone-card .star-rating, .mt-stone-card .button, .mt-stone-card .added_to_cart, .mt-stone-card .woocommerce-loop-product__link { display: none !important; } /* ── Mobile ───────────────────────────────────────────────── */ /* @media (max-width: 768px) { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; } .mt-stone-card__body { padding: 16px 16px 20px; } .mt-stone-card__name { font-size: 16px !important; } .mt-stone-card__title-row { flex-direction: column; align-items: flex-start; gap: 2px; } .mt-stone-card__sku { order: 2; } .mt-stone-card__footer { flex-direction: column; align-items: flex-start; gap: 10px; } .mt-stone-card__price-wrap { text-align: left; align-self: flex-start; } } @media (max-width: 375px) { .woocommerce ul.products { grid-template-columns: 1fr !important; } } */ /* ── Base (mobile-first) — 1 column ─────────────────────────── */ .woocommerce ul.products { display: grid !important; grid-template-columns: 1fr; gap: 16px; margin: 0 !important; padding: 0 !important; list-style: none !important; } /* ── Tablet: 481px+ — 2 columns ──────────────────────────────── */ @media (min-width: 481px) { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; } } /* ── Desktop: 981px+ — 3 columns ─────────────────────────────── */ @media (min-width: 981px) { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; } } /* ── Narrow desktop gap: 981–1079px ────────────────────────── 3-column grid is active here, but each card is too narrow for the footer's side-by-side trace-badge + price layout — text overlaps the card border. Stack it like the mobile footer. */ @media (min-width: 981px) and (max-width: 1079px) { .mt-stone-card__footer { flex-direction: column; align-items: flex-start; gap: 10px; } .mt-stone-card__price-wrap { text-align: left; align-self: flex-start; } } /* ── Card body/title/footer mobile styling — unchanged, stays max-width ── */ @media (max-width: 768px) { .mt-stone-card__body { padding: 16px 16px 20px; } .mt-stone-card__name { font-size: 16px !important; } .mt-stone-card__title-row { flex-direction: column; align-items: flex-start; gap: 2px; } .mt-stone-card__sku { order: 2; } .mt-stone-card__footer { flex-direction: column; align-items: flex-start; gap: 10px; } .mt-stone-card__price-wrap { text-align: left; align-self: flex-start; } } /* ── jc note: ovveride archive woocomerce ──────────────────────────────────────────── */ .archive .woocommerce ul.products { border-top: 1px solid var(--mt-stone-200); } /* ── WooCommerce sort dropdown — styled as filter pill ───── */ .woocommerce-ordering { margin: 0 !important; float: none !important; display: inline-flex !important; align-items: center !important; gap: 10px !important; } .woocommerce-ordering::before { content: "Sort"; font-family: var(--font-body) !important; font-size: 12px !important; letter-spacing: 0.04em !important; color: var(--mt-slate) !important; white-space: nowrap !important; } .woocommerce-ordering select { font-family: var(--font-body) !important; font-weight: 500 !important; font-size: 13px !important; letter-spacing: 0.04em !important; padding: 11px 32px 11px 16px !important; background: var(--mt-natural) !important; color: var(--mt-black) !important; border: 1px solid var(--mt-stone-200) !important; border-radius: 0 !important; cursor: pointer !important; appearance: none !important; -webkit-appearance: none !important; /* Custom chevron */ background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 9 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L4.5 5L8 1' stroke='%2323221E' stroke-width='1'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 8px !important; box-shadow: none !important; transition: border-color 200ms ease !important; min-width: 160px !important; } .woocommerce-ordering select:hover { border-color: var(--mt-stone-400) !important; } .woocommerce-ordering select:focus { outline: none !important; border-color: var(--mt-steel) !important; } /* ════════════════════════════════════════════════════════════ BASE — mobile first ════════════════════════════════════════════════════════════ */ /* ── Mobile bar ──────────────────────────────────────────── */ /* hamburger left · wordmark centre · search right */ #mt-header-container { z-index: 999; } .mt-mob-bar { display: flex; align-items: center; justify-content: space-between; padding: 0 10px; background: var(--mt-natural); position: sticky; top: 0; z-index: 99999; } /* Hamburger */ .mt-mob-bar__burger { background: transparent; border: 0; padding: 0; cursor: pointer; width: 22px; height: 16px; position: relative; flex-shrink: 0; } .mt-mob-bar__burger span { position: absolute; left: 0; right: 0; height: 1px; background: var(--mt-black); transition: transform 0.22s ease, opacity 0.22s ease; } .mt-mob-bar__burger span:nth-child(1) { top: 0; } .mt-mob-bar__burger span:nth-child(2) { top: 7px; } .mt-mob-bar__burger span:nth-child(3) { top: 14px; } /* Animate to × when open */ .mt-mob-bar__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .mt-mob-bar__burger.is-open span:nth-child(2) { opacity: 0; } .mt-mob-bar__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Wordmark */ .mt-mob-bar__wordmark { height: 13px; width: auto; display: block; } /* Search icon */ .mt-mob-bar__search { background: transparent; border: 0; padding: 0; cursor: pointer; color: var(--mt-black); display: inline-flex; flex-shrink: 0; } /* ── Mobile drawer ───────────────────────────────────────── */ .mt-drawer { position: fixed; inset: 0; z-index: 99999; pointer-events: none; /* isolation: auto — drawer is already fixed so it breaks out of Divi stacking contexts automatically */ } /* Overlay */ .mt-drawer__overlay { position: absolute; inset: 0; background: rgba(35, 34, 30, 0.5); opacity: 0; transition: opacity 0.25s ease; } /* Panel — slides in from left */ .mt-drawer__panel { position: absolute; top: 0; left: 0; bottom: 0; width: min(320px, 85vw); background: var(--mt-natural); transform: translateX(-100%); transition: transform 0.25s cubic-bezier(0.2, 0.6, 0.2, 1); overflow-y: auto; display: flex; flex-direction: column; } /* Open state */ .mt-drawer.is-open { pointer-events: auto; } .mt-drawer.is-open .mt-drawer__overlay { opacity: 1; } .mt-drawer.is-open .mt-drawer__panel { transform: translateX(0); } /* Drawer header */ .mt-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid var(--mt-stone-200); flex-shrink: 0; } .mt-drawer__head img { height: 14px; width: auto; } .mt-drawer__close { background: transparent; border: 0; padding: 4px; cursor: pointer; color: var(--mt-black); display: inline-flex; align-items: center; justify-content: center; } /* Drawer nav body */ .mt-drawer__nav { flex: 1; padding: 8px 0; } /* Plain links */ .mt-drawer__link { display: block; font-family: var(--font-body); font-weight: 500; font-size: 15px; letter-spacing: 0.02em; color: var(--mt-black); text-decoration: none; padding: 14px 24px; border-bottom: 1px solid var(--mt-stone-200); transition: background 0.12s ease; } .mt-drawer__link:hover { background: var(--mt-stone-100); } /* Curated stones — expandable trigger */ .mt-drawer__expander { display: flex; align-items: center; justify-content: space-between; width: 100%; font-family: var(--font-body); font-weight: 500; font-size: 15px; letter-spacing: 0.02em; color: var(--mt-black); background: transparent; border: 0; border-bottom: 1px solid var(--mt-stone-200); padding: 14px 24px; cursor: pointer; text-align: left; } /* Chevron */ .mt-drawer__chevron { width: 10px; height: 10px; border-right: 1.5px solid var(--mt-black); border-bottom: 1.5px solid var(--mt-black); transform: rotate(45deg) translateY(-2px); transition: transform 0.2s ease; flex-shrink: 0; } .mt-drawer__expander.is-open .mt-drawer__chevron { transform: rotate(-135deg) translateY(-2px); } /* Submenu */ .mt-drawer__sub { background: var(--mt-stone-100); border-bottom: 1px solid var(--mt-stone-200); display: none; } .mt-drawer__sub.is-open { display: block; } .mt-drawer__sub-head { font-family: var(--font-body); font-weight: 500; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mt-slate); padding: 16px 24px 8px; } .mt-drawer__sub a { display: block; font-family: var(--font-body); font-size: 14px; color: var(--mt-black); text-decoration: none; padding: 10px 24px; transition: background 0.12s ease; } .mt-drawer__sub a:hover { background: var(--mt-stone-200); } .mt-drawer__sub-rule { height: 1px; background: var(--mt-stone-200); margin: 6px 24px; } /* Drawer footer — lang + utility links */ .mt-drawer__foot { padding: 24px; border-top: 1px solid var(--mt-stone-200); flex-shrink: 0; } .mt-drawer__lang { display: flex; gap: 8px; font-family: var(--font-body); font-size: 13px; letter-spacing: 0.04em; color: var(--mt-slate); margin-bottom: 16px; } .mt-drawer__lang .is-active { color: var(--mt-black); font-weight: 500; } .mt-drawer__foot-links { display: flex; flex-direction: column; gap: 14px; } .mt-drawer__foot a { font-family: var(--font-body); font-size: 13px; letter-spacing: 0.04em; color: var(--mt-slate); text-decoration: none; transition: color 0.12s ease; } .mt-drawer__foot a:hover { color: var(--mt-black); } /* ── Desktop left nav — hidden on mobile ─────────────────── */ .mt-nav-left { display: none; position: relative; font-family: var(--font-body); font-weight: 500; font-size: 13px; letter-spacing: 0.04em; color: var(--mt-black); } .mt-nav-left a, .mt-nav-left button { font-family: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; color: inherit; background: transparent; border: 0; padding: 6px 0; position: relative; cursor: pointer; text-decoration: none; white-space: nowrap; display: inline-block; } /* Sliding underline — defined at base, activated at 769px */ .mt-nav-left a::after, .mt-nav-left button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--mt-black); transform: scaleX(0); transform-origin: left; transition: transform 0.18s ease; } /* Dropdown — defined at base, enabled at 769px */ /* Uses visibility+opacity instead of display:none so the CSS transition works correctly when .is-open is toggled. position: fixed breaks out of ALL Divi stacking contexts. */ .mt-nav-left__dd { visibility: hidden; position: fixed; top: 57px; /* match your nav bar height — adjust if needed */ left: 32px; background: var(--mt-natural); border: 1px solid var(--mt-stone-200); box-shadow: 0 24px 40px -28px rgba(35, 34, 30, 0.18); z-index: 99999; opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease; } .mt-nav-left__dd-inner { display: grid; } .mt-nav-left__dd-group { padding: 16px 20px; border-bottom: 1px solid var(--mt-stone-200); } .mt-nav-left__dd-group--full { grid-column: 1 / -1; border-left: 0; border-bottom: 0; } .mt-nav-left__dd-group h5 { font-family: var(--font-body); font-weight: 500; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mt-slate); margin: 0 0 10px; } .mt-nav-left__dd-group ul { list-style: none; margin: 0; padding: 0; } .mt-nav-left__dd-group ul li a { display: block; font-family: var(--font-body); font-size: 14px; line-height: 1.4; color: var(--mt-black); text-decoration: none; padding: 5px 6px; margin: 0 -6px; transition: background 0.12s ease; } .mt-nav-left__dd-group ul li a::after { display: none; } .mt-nav-left__dd-group ul li a:hover { background: var(--mt-stone-100); } /* ════════════════════════════════════════════════════════════ TABLET — min-width: 768px Hide mobile bar + drawer, show compact desktop left nav ════════════════════════════════════════════════════════════ */ @media (min-width: 768px) { /* Hide mobile elements */ .mt-mob-bar { display: none; } .mt-drawer { display: none; } /* Show left nav — compact for tablet */ .mt-nav-left { display: flex; align-items: center; gap: 16px; font-size: 12px; } /* No dropdown on tablet — keep visibility hidden */ .mt-nav-left__dd { visibility: hidden; opacity: 0; pointer-events: none !important; } } /* ════════════════════════════════════════════════════════════ DESKTOP — min-width: 769px Full gap, full font, hover underline, dropdown enabled ════════════════════════════════════════════════════════════ */ @media (min-width: 769px) { .mt-nav-left { gap: 28px; font-size: 13px; } /* Hover underline active */ .mt-nav-left a:hover::after, .mt-nav-left button:hover::after, .mt-nav-left button.is-open::after { transform: scaleX(1); } /* Dropdown enabled at desktop */ .mt-nav-left__dd { visibility: hidden; /* still hidden until is-open */ min-width: 560px; max-width: 640px; } .mt-nav-left.is-open .mt-nav-left__dd { visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0); } /* 2-column grid */ .mt-nav-left__dd-inner { grid-template-columns: 1fr 1fr; } .mt-nav-left__dd-group + .mt-nav-left__dd-group { border-left: 1px solid var(--mt-stone-200); } .mt-nav-left__dd-group { padding: 20px 28px; } .mt-nav-left__dd-group ul li a { font-size: 15px; padding: 6px 8px; margin: 0 -8px; } .mt-nav-left__dd-group h5 { margin: 0 0 12px; } } /* ============================================================ Product Detail Page — mt-pdp Append to child theme style.css ============================================================ */ /* ── Page wrapper ────────────────────────────────────────── */ .mt-pdp { width: 100%; max-width: 100%; margin: 0 auto; padding: 0 64px 0; overflow: visible; /* needed for related section 100vw breakout */ } /* ── Two-column inner layout ─────────────────────────────── */ .mt-pdp__inner { display: grid; grid-template-columns: 1fr; gap: 48px; max-width: var(--container-max); margin: 0 auto; } /* ════════════════════════════════════════════════════════════ GALLERY COLUMN ════════════════════════════════════════════════════════════ */ .mt-pdp__gallery-col { width: 100%; } .mt-pdp__gallery { width: 100%; } /* Main image */ .mt-pdp__main-img-wrap { position: relative; width: 100%; aspect-ratio: 1 / 1; background: var(--mt-stone-100); overflow: hidden; cursor: zoom-in; } .mt-pdp__main-img { display: block; width: 100%; height: 100% !important; object-fit: cover; transition: transform 300ms var(--ease); } .mt-pdp__main-img-wrap:hover .mt-pdp__main-img { transform: scale(1.04); } .mt-pdp__img-placeholder { width: 100%; height: 100%; display: flex; align-items: flex-end; padding: 16px; background: var(--mt-stone-100); } .mt-pdp__img-placeholder span { font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mt-slate); } .mt-pdp__zoom-hint { position: absolute; right: 14px; bottom: 14px; font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mt-slate); background: var(--mt-natural); border: 1px solid var(--mt-stone-200); padding: 5px 10px; pointer-events: none; } /* Caption */ .mt-pdp__img-caption { margin-top: 12px; font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mt-slate); } /* Thumbnails */ .mt-pdp__thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 16px; } .mt-pdp__thumb { padding: 0; background: var(--mt-stone-100); border: 1px solid var(--mt-stone-200); aspect-ratio: 1 / 1; overflow: hidden; cursor: pointer; opacity: 0.75; transition: opacity 0.15s ease, outline 0.15s ease; outline: 1px solid transparent; outline-offset: -1px; } .mt-pdp__thumb.is-active { opacity: 1; outline: 1px solid var(--mt-black); } .mt-pdp__thumb:hover { opacity: 1; } .mt-pdp__thumb-img { display: block; width: 100%; height: 100%; object-fit: cover; } /* 360° button */ .mt-pdp__360-btn { display: flex; align-items: center; width: 100%; margin-top: 16px; padding: 13px 16px; background: transparent; border: 1px solid var(--mt-stone-200); font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: 0.04em; color: var(--mt-black); gap: 10px; cursor: pointer; transition: background 0.15s ease; } .mt-pdp__360-btn:hover { background: var(--mt-stone-100); } .mt-pdp__360-label { font-family: var(--font-display); font-size: 15px; font-weight: 400; } .mt-pdp__360-dur { margin-left: auto; color: var(--mt-slate); font-size: 12px; } /* ════════════════════════════════════════════════════════════ INFO COLUMN ════════════════════════════════════════════════════════════ */ /* Name block */ .mt-pdp__name { font-family: var(--font-display) !important; font-weight: 300 !important; font-size: 38px !important; line-height: 1.05 !important; letter-spacing: -0.015em !important; color: var(--mt-black) !important; margin: 0 !important; } .mt-pdp__sku { font-family: var(--font-body); font-size: 13px; font-weight: 400; letter-spacing: 0.04em; color: var(--mt-slate); margin-top: 10px; } .mt-pdp__rule { height: 1px; background: var(--mt-stone-200); margin-top: 18px; } /* Key specs */ .mt-pdp__key-specs { display: flex; flex-wrap: wrap; align-items: center; margin-top: 16px; font-family: var(--font-body); font-size: 14px; color: var(--mt-slate); } .mt-pdp__key-spec { padding-right: 12px; } .mt-pdp__key-spec-sep { display: inline-block; width: 1px; height: 12px; background: var(--mt-stone-200); margin-right: 12px; vertical-align: middle; } /* Price block */ .mt-pdp__price-block { margin-top: 36px; } .mt-pdp__login-prompt { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--mt-stone-200); background: var(--mt-natural); font-family: var(--font-body); font-size: 14px; line-height: 1.55; color: var(--mt-black); } /* CTAs */ /* Hide WC quantity input — stones are single items */ .mt-pdp .quantity { display: none !important; } .mt-pdp__ctas { margin-top: 28px; } .mt-pdp__cta-row { display: flex; align-items: stretch; gap: 12px; } .woocommerce div.product .mt-pdp__inner form.cart, .woocommerce-page div.product .mt-pdp__inner form.cart { margin-top: 0; margin-bottom: 0; } .woocommerce .mt-pdp__inner button.button:not(.button-confirm):after, .woocommerce-page .mt-pdp__inner button.button:not(.button-confirm):after { display: none; } /* Override WC add to cart button to match spec */ .mt-pdp .single_add_to_cart_button { display: inline-flex !important; align-items: center !important; justify-content: center !important; font-family: var(--font-body) !important; font-weight: 500 !important; font-size: 15px !important; letter-spacing: 0.04em !important; padding: 16px 32px !important; border-radius: 0 !important; background: transparent !important; color: var(--mt-black) !important; border: 1px solid var(--mt-black) !important; transition: background var(--dur) var(--ease), color var(--dur) var(--ease) !important; text-decoration: none !important; } .mt-pdp .single_add_to_cart_button:hover { background: var(--mt-black) !important; color: var(--mt-natural) !important; } .mt-pdp__cta-note { margin-top: 14px; font-family: var(--font-body); font-size: 13px; line-height: 1.55; color: var(--mt-slate); max-width: 460px; } /* Traceability panel */ .mt-pdp__trace { margin-top: 40px; background: var(--mt-stone-100); padding: 28px; position: relative; overflow: hidden; } .mt-pdp__trace-eyebrow { font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mt-steel); margin-bottom: 16px; } .mt-pdp__trace-badge { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .mt-pdp__trace-pip { display: inline-block; width: 16px; height: 16px; flex-shrink: 0; } .mt-pdp__trace-level { font-family: var(--font-display); font-weight: 400; font-size: 22px; color: var(--mt-black); } .mt-pdp__trace-group { font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mt-slate); } .mt-pdp__trace-body { font-family: var(--font-body); font-size: 14px; line-height: 1.6; color: var(--mt-black); margin: 0 0 18px; max-width: 520px; } .mt-pdp__trace-link { font-family: var(--font-body); font-size: 13px; color: var(--mt-steel); letter-spacing: 0.02em; } .mt-pdp__trace-link:hover { color: var(--mt-black); } /* Specifications table */ .mt-pdp__specs { margin-top: 56px; } .mt-pdp__specs-eyebrow { font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mt-slate); margin-bottom: 20px; } .mt-pdp__spec-row { display: grid; grid-template-columns: 160px 1fr; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--mt-stone-200); font-family: var(--font-body); font-size: 14px; line-height: 1.5; } .mt-pdp__spec-label { color: var(--mt-slate); } .mt-pdp__spec-value { color: var(--mt-black); } .mt-pdp__spec-link { margin-left: 10px; font-size: 13px; color: var(--mt-steel); } .mt-pdp__spec-link:hover { color: var(--mt-black); } .mt-pdp__spec-note { margin-left: 10px; font-size: 12px; color: var(--mt-slate); } /* Certificate */ .mt-pdp__cert { margin-top: 20px; border: 1px solid var(--mt-stone-200); } .mt-pdp__cert-inner { display: grid; grid-template-columns: 80px 1fr; gap: 20px; align-items: center; padding: 22px 24px; } .mt-pdp__cert-thumb { width: 80px; aspect-ratio: 4 / 5; background: var(--mt-stone-100); border: 1px solid var(--mt-stone-200); overflow: hidden; } .mt-pdp__cert-img { width: 100%; height: 100% !important; object-fit: cover; } .mt-pdp__cert-eyebrow { font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mt-slate); margin-bottom: 6px; } .mt-pdp__cert-title { font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--mt-black); margin-bottom: 8px; } .mt-pdp__cert-link { font-family: var(--font-body); font-size: 13px; color: var(--mt-steel); } .mt-pdp__cert-link:hover { color: var(--mt-black); } /* Specialist contact */ .mt-pdp__specialist { margin-top: 56px; } .mt-pdp__specialist-eyebrow { font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mt-slate); margin-bottom: 10px; } .mt-pdp__specialist-intro { font-family: var(--font-body); font-size: 15px; line-height: 1.55; color: var(--mt-black); margin: 0 0 20px; max-width: 480px; } .mt-pdp__offices { display: grid; grid-template-columns: 1fr; gap: 0; } .mt-pdp__office { padding: 14px 0; border-bottom: 1px solid var(--mt-stone-200); } .mt-pdp__office-city { /* font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mt-slate); margin-bottom: 4px; */ font-family: var(--font-display); font-size: 18px; font-weight: 400; color: var(--mt-black); margin-bottom: 8px; } .mt-pdp__office-email { font-family: var(--font-body); font-size: 14px; color: var(--mt-steel); } .mt-pdp__office-email:hover { color: var(--mt-black); } /* ════════════════════════════════════════════════════════════ RELATED STONES ════════════════════════════════════════════════════════════ */ .mt-pdp__related { /* padding: 72px 0; border-top: 1px solid var(--mt-stone-200); */ position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; width: 100vw; background: var(--mt-stone-100); padding: 72px 64px; } .mt-pdp__related-inner { max-width: var(--container-max); margin: 0 auto; } .mt-pdp__related-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 32px; } .mt-pdp__related-eyebrow { font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mt-slate); } .mt-pdp__related-all { font-family: var(--font-body); font-size: 13px; color: var(--mt-steel); } .mt-pdp__related-all:hover { color: var(--mt-black); } .mt-pdp__related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .mt-pdp__related-card { text-decoration: none; background: var(--mt-natural); border: 1px solid var(--mt-stone-200); transition: border-color var(--dur) var(--ease); display:flex; flex-direction: column; } .mt-pdp__related-card:hover { border-color: var(--mt-stone-400); } .mt-pdp__related-img-wrap { width: 100%; aspect-ratio: 1 / 1; background: var(--mt-stone-100); overflow: hidden; border-bottom: 1px solid var(--mt-stone-200); display: flex; flex-direction: column; } .mt-pdp__related-img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); } .mt-pdp__related-card:hover .mt-pdp__related-img { transform: scale(1.03); } .mt-pdp__related-body { padding: 14px 16px 18px; display: flex; flex-direction: column; flex: 1; } .mt-pdp__related-name { font-family: var(--font-display) !important; font-weight: 400; font-size: 16px; line-height: 1.3; color: var(--mt-black); margin-bottom: 6px; } .mt-pdp__related-specs { font-family: var(--font-body); font-size: 12px; color: var(--mt-slate); margin-bottom: 12px; } .mt-pdp__related-footer { display: flex; align-items: flex-start; justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--mt-stone-200); flex-direction: column; margin-top: auto; } .mt-pdp__related-trace { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; color: var(--mt-black); } @media (min-width: 512px) { .mt-pdp__related-footer { align-items: left; flex-direction: row; } } @media (min-width: 768px) { .mt-pdp__related { padding: 88px 64px; } } @media (max-width: 600px) { .mt-pdp__related { padding: 56px 24px; margin-left: -50vw; margin-right: -50vw; } } /* ════════════════════════════════════════════════════════════ MOBILE STICKY BAR ════════════════════════════════════════════════════════════ */ .mt-pdp__sticky-bar { display: none; /* JS adds is-visible */ position: fixed; bottom: 0; left: 0; right: 0; background: var(--mt-natural); border-top: 1px solid var(--mt-stone-200); padding: 12px 20px; z-index: 9000; flex-direction: column; gap: 10px; } .mt-pdp__sticky-bar.is-visible { display: flex; } .mt-pdp__sticky-bar-info { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .mt-pdp__sticky-bar-name { font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--mt-black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mt-pdp__sticky-bar-price { font-family: var(--font-display); font-size: 16px; font-weight: 400; color: var(--mt-black); white-space: nowrap; } .mt-pdp__sticky-bar-ctas { display: flex; gap: 10px; } .mt-pdp__sticky-btn { flex: 1; text-align: center; padding: 14px 16px; font-size: 14px; } .et-db #et-boc .et-l.et-l--footer .et_builder_inner_content { z-index: 1 !important;} /* ════════════════════════════════════════════════════════════ RESPONSIVE ════════════════════════════════════════════════════════════ */ @media (min-width: 768px) { .mt-pdp__related-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; } .mt-pdp__offices { grid-template-columns: repeat(3, 1fr); gap: 24px; } .mt-pdp__office { padding: 20px; border: 1px solid var(--mt-stone-200); } .mt-pdp__sticky-bar { display: none !important; } } @media (min-width: 769px) { .mt-pdp__inner { grid-template-columns: minmax(320px, 1fr) 1.5fr; gap: 80px; padding-bottom: 128px; align-items: start; max-width: var(--container-max); margin: 0 auto; } .mt-pdp__gallery-col { position: sticky; top: 80px; /* below the sticky nav */ } .mt-pdp__name { font-size: 52px !important; } .mt-pdp__spec-row { grid-template-columns: 180px 1fr; } .mt-pdp__cta-row { flex-direction: row; } } @media (max-width: 900px) { .mt-pdp__inner { padding: 48px 24px 96px; } } @media (max-width: 600px) { .mt-pdp { padding: 0 20px; } .mt-pdp__inner { padding: 0; gap: 32px; } .mt-pdp__spec-row { grid-template-columns: 130px 1fr; gap: 12px; } .mt-pdp__cta-row { flex-direction: column; } .mt-pdp .single_add_to_cart_button { width: 100% !important; } } /* ── Zoom overlay ────────────────────────────────────────── */ .mt-zoom-overlay { display: none; position: fixed; inset: 0; z-index: 99999; background: rgba(35, 34, 30, 0.88); align-items: center; justify-content: center; padding: 40px; cursor: zoom-out; } .mt-zoom-overlay.is-open { display: flex; } .mt-zoom-overlay__img-wrap { /*width: min(80vw, 80vh); aspect-ratio: 1 / 1;*/ background: var(--mt-stone-100); overflow: hidden; position: relative; } .mt-zoom-overlay__img { display: block; width: 100%; height: 100% !important; object-fit: contain; /* contain so full stone is visible */ } .mt-zoom-overlay__close { position: absolute; top: 20px; right: 20px; background: transparent; border: 0; color: var(--mt-natural); cursor: pointer; padding: 8px; display: inline-flex; align-items: center; justify-content: center; opacity: 0.7; transition: opacity 0.15s ease; } .mt-zoom-overlay__close:hover { opacity: 1; } /* Disable zoom on mobile — spec says cursor:default on mobile */ @media (max-width: 767px) { .mt-pdp__main-img-wrap { cursor: default; } /* .mt-zoom-overlay { display: none !important; } */ } /* ── Request viewing modal ───────────────────────────────── */ .mt-request-overlay { display: none; position: fixed; inset: 0; z-index: 99999; background: rgba(35, 34, 30, 0.55); align-items: center; justify-content: center; padding: 20px; } .mt-request-overlay.is-open { display: flex; } .mt-request-panel { background: var(--mt-natural); max-width: 520px; width: 100%; padding: 40px; border: 1px solid var(--mt-stone-200); position: relative; } @media (max-width: 600px) { .mt-request-panel { padding: 28px 24px; } } .mt-request-close { position: absolute; top: 12px; right: 12px; background: transparent; border: 0; cursor: pointer; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; } .mt-request-eyebrow { font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mt-slate); margin-bottom: 14px; } .mt-request-name { font-family: var(--font-display) !important; font-weight: 400 !important; font-size: 24px !important; line-height: 1.2 !important; color: var(--mt-black) !important; margin: 0 0 8px !important; padding-bottom: 0; } .mt-request-meta { font-family: var(--font-body); font-size: 13px; color: var(--mt-slate); margin-bottom: 28px; } .mt-request-form { display: flex; flex-direction: column; gap: 18px; } .mt-request-field { display: flex; flex-direction: column; } .mt-request-label { font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: 0.04em; color: var(--mt-black); margin-bottom: 8px; display: block; } .mt-request-input, .mt-request-select { width: 100%; font-family: var(--font-body); font-size: 15px; border: 1px solid var(--mt-stone-200); color: var(--mt-black); background: var(--mt-natural) !important; border: 1px solid var(--mt-stone-200); border-radius: 0; padding: 12px 14px !important; outline: none; box-sizing: border-box; transition: border-color var(--dur) var(--ease); appearance: none; -webkit-appearance: none; } .mt-request-input:focus, .mt-request-select:focus { border-color: var(--mt-steel); border-width: 2px; padding: 11px 13px; } .mt-request-input::placeholder { color: var(--mt-slate); } .mt-request-submit { margin-top: 8px; } .mt-request-submit .mt-btn--primary { width: 100%; } /* Success message */ .mt-request-success { display: none; text-align: center; padding: 24px 0 8px; } .mt-request-success.is-visible { display: block; } .mt-request-success-title { font-family: var(--font-display); font-size: 22px; font-weight: 400; color: var(--mt-black); margin-bottom: 10px; } .mt-request-success-body { font-family: var(--font-body); font-size: 14px; line-height: 1.6; color: var(--mt-slate); } /* ── 360° video overlay ──────────────────────────────────── */ /* Same dark overlay pattern as zoom modal per spec */ .mt-video-overlay { display: none; position: fixed; inset: 0; z-index: 99999; background: rgba(35, 34, 30, 0.85); align-items: center; justify-content: center; padding: 40px; } .mt-video-overlay.is-open { display: flex; } /* Close button — top right, same as zoom */ .mt-video-overlay__close { position: fixed; top: 20px; right: 20px; background: transparent; border: 0; color: var(--mt-natural); cursor: pointer; padding: 8px; display: inline-flex; align-items: center; justify-content: center; opacity: 0.7; transition: opacity 0.15s ease; z-index: 1; } .mt-video-overlay__close:hover { opacity: 1; } /* Video container */ .mt-video-overlay__wrap { width: min(80vw, 80vh); display: flex; flex-direction: column; gap: 14px; } /* Video element */ .mt-video-overlay__video { display: block; width: 100%; aspect-ratio: 1 / 1; background: var(--mt-black); object-fit: contain; } /* Caption below video */ .mt-video-overlay__caption { display: flex; align-items: baseline; justify-content: space-between; } .mt-video-overlay__label { font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mt-stone-400); } .mt-video-overlay__name { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 14px; color: var(--mt-stone-200); } /* newsletter form */ .mt-newsletter-form { display: flex; flex-direction: row; gap: 0px; max-width: 480px; margin: 0px auto; } .mt-newsletter-form__input { flex: 1 1 0%; background: var(--mt-natural); padding: 14px 16px !important; border-top-color: ; border-top-style: ; border-top-width: ; border-right: 0px; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-left-color: ; border-left-style: ; border-left-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; font-family: var(--font-body); font-size: 15px; color: var(--mt-black); outline: none; transition: border-color var(--dur) var(--ease); } .mt-newsletter-form__input:focus { border: 2px solid var(--mt-steel); } .mt-newsletter-form__input::placeholder { color: var(--mt-slate); } /* newsletter form footer */ .mt-newsletter-form-footer { display: flex; flex-direction: row; gap: 0px; max-width: 480px; border-bottom: 1px solid var(--mt-stone-400); } .mt-newsletter-form-footer__input { flex: 1 1 0%; background: transparent !important; border: 0px !important; outline: 0px; color: var(--mt-natural) !important; padding: 8px 0px !important; font-family: var(--font-body); font-size: 14px; } .mt-newletter-form-footer__button { background: transparent; border: 0px; color: var(--mt-natural); cursor: pointer; font-family: var(--font-body); font-size: 13px; letter-spacing: 0.04em; } /* Message states */ .mt-newsletter-msg { display: none; font-family: var(--font-body); font-size: 14px; line-height: 1.5; margin-top: 12px; text-align: center; } .mt-newsletter-msg.is-success { display: block; color: var(--mt-emerald); } .mt-newsletter-msg.is-error { display: block; color: var(--mt-ruby); } /* Hide reCAPTCHA badge — legal note required below */ .grecaptcha-badge { visibility: hidden !important; } /* ============================================================ FiboFilters — MT spec override Targets FiboFilters native classes ============================================================ */ /* ── Filter bar container ────────────────────────────────── */ .fibofilters-horizontal-filters-container { position: sticky; top: 60px; /* match your nav height */ z-index: 20; background: var(--mt-natural); /* border-top: 1px solid var(--mt-stone-200); */ padding: 48px 0; } @media (max-width: 900px) { .fibofilters-horizontal-filters-container { padding: 12px 0; top: 52px; /* mobile nav height */ } } /* ── Pills row ───────────────────────────────────────────── */ .fibofilters-horizontal-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; padding-bottom: 0 !important; } .fibofilters-filter-button { border: 1px solid var(--mt-stone-200) !important; border-radius: 0 !important; background: var(--mt-natural) !important; color: var(--mt-black) !important; font-family: var(--font-body) !important; font-weight: 500 !important; font-size: 13px !important; letter-spacing: 0.04em !important; padding: 11px 16px !important; cursor: pointer !important; white-space: nowrap !important; line-height: 1 !important; transition: border-color 200ms ease, color 200ms ease !important; box-shadow: none !important; text-transform: none !important; } /* ── All filter buttons — base pill style ────────────────── */ .fibofilters-horizontal-filters-container .fibofilters-button { display: inline-flex; align-items: center !important; gap: 8px !important; font-family: var(--font-body) !important; font-weight: 500 !important; font-size: 13px !important; letter-spacing: 0.04em !important; padding: 11px 16px !important; background: var(--mt-natural) !important; color: var(--mt-black) !important; border: 1px solid var(--mt-stone-200) !important; border-radius: 0 !important; cursor: pointer !important; white-space: nowrap !important; line-height: 1 !important; transition: border-color 200ms ease, color 200ms ease !important; box-shadow: none !important; text-transform: none !important; justify-content: space-between; } .fibofilters-horizontal-filters-container .fibofilters-filter-button { margin-bottom: 0; margin-right: 0; flex: 1; justify-content; min-width: 120px; max-width: 220px; } .fibofilters-horizontal-filters-container .fibofilters-button:hover { border-color: var(--mt-stone-400) !important; background: var(--mt-natural) !important; color: var(--mt-black) !important; } /* ── Active / selected state ─────────────────────────────── */ .fibofilters-horizontal-filters-container .fibofilters-filter-button-selected, .fibofilters-horizontal-filters-container .fibofilters-button--active { color: var(--mt-steel) !important; border-color: var(--mt-steel) !important; background: var(--mt-natural) !important; } .fibofilters-horizontal-filters-container .fibofilters-filter-button-selected:hover, .fibofilters-horizontal-filters-container .fibofilters-button--active:hover { border-color: var(--mt-steel) !important; } .fibofilters-filter-button.fibofilters-filter-button-selected:before { background: var(--mt-stone-200); } /* ── "All filters" button — same pill style ──────────────── */ .fibofilters-horizontal-filters-container .js-fibofilters-filter-button-all-filters { color: var(--mt-slate) !important; border-color: var(--mt-stone-200) !important; } .fibofilters-horizontal-filters-container .js-fibofilters-filter-button-all-filters svg { display: none !important; /* hide default icon — spec has no icon on this button */ } .fibofilters-horizontal-filters-container .js-fibofilters-filter-button-all-filters:hover { color: var(--mt-black) !important; border-color: var(--mt-stone-400) !important; } /* ── Chevron — FiboFilters adds its own, style to match spec */ .fibofilters-horizontal-filters-container .fibofilters-button svg:not([aria-hidden]) { width: 9px !important; height: 6px !important; opacity: 0.6; } /* ── FiboFilters applied filters container ───────────────── */ .fibofilters-applied-filters-container { padding: 14px 96px !important; border-top: 1px solid var(--mt-stone-200) !important; background: var(--mt-natural) !important; } @media (max-width: 900px) { .fibofilters-applied-filters-container { padding: 12px 24px !important; } } .fibofilters-applied-filters { display: flex !important; align-items: center !important; gap: 10px !important; flex-wrap: wrap !important; box-shadow: none; margin: 0; padding-bottom: 0; } /* ── Individual chip — corrected ────────────────────────── */ .fibofilters-applied-filter { display: inline-flex !important; flex-direction: row !important; align-items: stretch !important; gap: 0 !important; font-family: var(--font-body) !important; box-shadow: none !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0.04em !important; background: var(--mt-stone-100) !important; color: var(--mt-black) !important; border-radius: 0 !important; padding: 0 !important; overflow: hidden !important; height: 30px !important; margin: 0 !important; } /* Label — order 1, sits LEFT */ .fibofilters-applied-filter span { order: 1 !important; display: flex !important; align-items: center !important; padding: 0 12px !important; line-height: 1 !important; } .fibofilters-applied-filter span strong { font-weight: 500 !important; font-family: var(--font-body) !important; font-size: 12px !important; letter-spacing: 0.04em !important; color: var(--mt-black) !important; } /* × button — order 2, sits RIGHT */ .fibofilters-applied-filter .fibofilters-applied-filter-icon { order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 30px !important; height: 30px !important; padding: 0 !important; background: transparent !important; margin-left: 0; border: 0 !important; border-radius: 0 !important; cursor: pointer !important; color: var(--mt-slate) !important; flex-shrink: 0 !important; transition: background 0.12s ease, color 0.12s ease !important; } .fibofilters-applied-filter .fibofilters-applied-filter-icon:hover { /*background: var(--mt-stone-200) !important; color: var(--mt-black) !important;*/ } .fibofilters-applied-filter .fibofilters-applied-filter-icon svg { width: 10px !important; height: 10px !important; pointer-events: none !important; } /* ── Applied filters container — reduce padding ──────────── */ .fibofilters-applied-filters-container { padding: 16px 0 !important; border-top: 1px solid var(--mt-stone-200) !important; background: var(--mt-natural) !important; height: auto !important; } @media (max-width: 900px) { .fibofilters-applied-filters-container { padding: 10px 24px !important; } } .fibofilters-filter-button::after { content: "" !important; display: inline-block !important; width: 8px !important; height: 5px !important; margin-left: 6px !important; flex-shrink: 0 !important; background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 9 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L4.5 5L8 1' stroke='%2323221E' stroke-width='1'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; opacity: 0.5; } .fibofilters-filter-button-selected::after { background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 9 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L4.5 5L8 1' stroke='%234C5C6C' stroke-width='1'/%3E%3C/svg%3E") !important; opacity: 1 !important; } .js-fibofilters-filter-button-all-filters::after { display: none !important; } .js-fibofilters-filter-button-all-filters { } /* ── "Active filters" label before chips ─────────────────── */ .fibofilters-applied-filters::before { content: "Active filters"; font-family: var(--font-body) !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0.04em !important; color: var(--mt-slate) !important; margin-right: 4px !important; white-space: nowrap !important; align-self: center !important; } /* Hide label when no chips present */ .fibofilters-applied-filters:not(:has(.fibofilters-applied-filter:not(.fibofilters-applied-filter--clear-all)))::before { display: none !important; } .fibofilters-applied-filters .fibofilters-applied-filter--clear-all { border: none; box-shadow: none; background: transparent !important; } .fibofilters-applied-filters .fibofilters-applied-filter--clear-all span { text-decoration: underline; text-underline-offset: 5px; } .fibofilters-applied-filters .fibofilters-applied-filter--clear-all:hover { box-shadow: none; } /* fibo mobile */ .fibofilters-mobile-filters-container { padding: 24px 0; } .fibofilters-mobile-overlay { background: var(--mt-natural); } .fibofilters-mobile-overlay__header { background: var(--mt-natural); } /* range tracks & graphs */ .fibofilters-slider-histogram__item, .fibofilters-range__track, .fibofilters-range__segment--active { background: var(--mt-stone-400); } .fibofilters-range__handle { border: 4px solid var(--mt-stone-400); } .mt-format-tabs { display: flex; align-items: center; gap: 20px; padding: 14px 64px; /* border-bottom: 1px solid var(--mt-stone-200); */ background: var(--mt-natural); } @media (max-width: 900px) { .mt-format-tabs { padding: 12px 24px; gap: 14px; } } .mt-format-tab { font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: 0.04em; color: var(--mt-slate); background: transparent; border: 0; padding: 4px 0; cursor: pointer; position: relative; transition: color 0.15s ease; text-decoration: none; } .mt-format-tab::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 1px; background: var(--mt-black); transform: scaleX(0); transform-origin: left; transition: transform 0.18s ease; } .mt-format-tab.is-active { color: var(--mt-black); } .mt-format-tab.is-active::after { transform: scaleX(1); } .mt-format-tab:hover { color: var(--mt-black); } /* Sort form inside filter bar */ .fibofilters-horizontal-filters form.woocommerce-ordering { margin-left: auto !important; margin-bottom: 0 !important; flex-shrink: 0 !important; display: inline-flex !important; align-items: center !important; gap: 10px !important; } /* Hide "All filters" button — all filters visible in horizontal bar */ .js-fibofilters-filter-button-all-filters { display: none !important; } .fibofilters-button--url-slug--format { display: none !important; } .woocommerce .fibofilters-input__wrapper input[type=number].fibofilters-input__element:focus { outline-color: none; outline-style: none; } @media (max-width: 450px) { .js-fibofilters-filter-button-all-filters { display: inline-block !important; } } /* ============================================================ Sets — coming soon + waitlist (inc/mt-sets-coming-soon.php) Replaces the WooCommerce empty-results bar on /pa/format/sets/ while no Sets products are published. ============================================================ */ .mt-sets-soon { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; margin: 96px 0 0; } .mt-sets-soon *, .mt-sets-soon *::before, .mt-sets-soon *::after { box-sizing: border-box; } .mt-sets-soon__eyebrow { font-family: var(--font-body); font-weight: var(--type-eyebrow-weight); font-size: var(--type-eyebrow-size); line-height: var(--type-eyebrow-lh); letter-spacing: var(--type-eyebrow-track); text-transform: uppercase; color: var(--fg-muted); margin: 0 0 var(--space-2); padding: 0; } .mt-sets-soon__title { font-family: var(--font-display); font-weight: var(--type-h2-weight); font-size: var(--type-h2-size); line-height: var(--type-h2-lh); letter-spacing: var(--type-h2-track); color: var(--fg); margin: 0 0 var(--space-3); padding: 0; } .mt-sets-soon__body { max-width: 34em; color: var(--fg); margin: 0; padding: 0; } .mt-sets-soon__panel { background: var(--mt-stone-100); padding: var(--space-5); } .mt-sets-soon__form { display: flex; flex-direction: column; gap: var(--space-3); } .mt-sets-soon__field { margin: 0; } .mt-sets-soon__submit { align-self: flex-start; } .mt-sets-soon__submit:disabled { opacity: 0.6; cursor: wait; } .mt-sets-soon__msg { display: none; margin: 0; padding: 0; } .mt-sets-soon__msg.is-visible { display: block; } .mt-sets-soon__msg--success { font-family: var(--font-display); font-size: var(--type-h3-size); line-height: var(--type-h3-lh); color: var(--fg); } .mt-sets-soon__msg--error { margin-top: var(--space-2); font-size: var(--type-body-sm-size); color: var(--mt-ruby); } .mt-sets-soon__legal { margin: var(--space-3) 0 0; padding: 0; font-size: 12px; line-height: 1.5; color: var(--fg-muted); } .mt-sets-soon__legal a { color: inherit; } @media (max-width: 900px) { .mt-sets-soon { grid-template-columns: 1fr; gap: var(--space-4); margin-bottom: var(--space-6); } .mt-sets-soon__title { font-size: 28px; } .mt-sets-soon__panel { padding: var(--space-3); } .mt-sets-soon__submit { align-self: stretch; } }