/* ===== EuroDerm — "Girouard" component layer (v2, 2026-09-21) ===== */ :root{ --ed-clay:#8C5A33; --ed-clay-dk:#6E4527; --ed-deep:#2A211B; --ed-muted:#5E5147; --ed-line:#E3DACE; --ed-line2:#D8CCBC; --ed-oat:#F7F2EA; } .wp-block-button__link,.wp-element-button{ border-radius:3px!important;letter-spacing:.015em;text-transform:none!important} .wp-block-button.is-style-outline .wp-block-button__link{ background:transparent;color:var(--ed-clay-dk);border:1.5px solid var(--ed-line2)} /* ---- TREATMENT GRID ---- Kadence wraps group children in .wp-block-group__inner-container, so the grid goes on THAT, not on .ed-tgrid itself. */ .ed-tgrid{display:block;max-width:none!important;margin-top:32px} .ed-tgrid>.wp-block-group__inner-container{display:block} .ed-tgrid>.wp-block-group__inner-container>*{max-width:none!important} @media(min-width:1000px){ .ed-tgrid>.wp-block-group__inner-container{ display:grid!important;grid-template-columns:repeat(3,1fr);gap:44px 28px;align-items:stretch} } @media(min-width:620px) and (max-width:999px){ .ed-tgrid>.wp-block-group__inner-container{ display:grid!important;grid-template-columns:repeat(2,1fr);gap:40px 24px;align-items:stretch} } .ed-tcard{margin:0!important;padding:0;height:100%;max-width:none!important} .ed-tcard>.wp-block-group__inner-container{ display:flex;flex-direction:column;height:100%} .ed-tcard>.wp-block-group__inner-container>*{max-width:none!important;margin-left:0;margin-right:0} .ed-tcard figure.wp-block-image{margin:0 0 14px!important} .ed-tcard figure.wp-block-image img{ width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:3px;display:block;background:var(--ed-oat)} .ed-tcard h3{font-size:20px!important;line-height:1.22!important;margin:0 0 6px!important; hyphens:none;overflow-wrap:break-word} .ed-tcard h3 a{color:var(--ed-deep);text-decoration:none} .ed-tcard h3 a:hover{color:var(--ed-clay-dk)} .ed-tcard p{font-size:14.5px;line-height:1.55;color:var(--ed-muted);margin:0 0 12px!important} .ed-tcard p:first-of-type{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .ed-tcard p:last-of-type{ margin-top:auto!important;border-top:1px solid var(--ed-line);padding-top:12px; font-size:14px;color:var(--ed-muted)} .ed-tcard p:last-of-type strong{color:var(--ed-deep);font-weight:600} .ed-tcard .wp-block-buttons{margin:0!important} .ed-tcard .wp-block-button__link{padding:10px 20px;font-size:14px} /* mobile: compact horizontal rows, not 21 tall stacked cards */ @media(max-width:619px){ .ed-tcard{border-bottom:1px solid var(--ed-line);padding:18px 0!important} .ed-tcard>.wp-block-group__inner-container{ display:grid;grid-template-columns:92px 1fr;grid-template-rows:auto auto auto auto; column-gap:14px;row-gap:0;align-items:start} .ed-tcard figure.wp-block-image{grid-column:1;grid-row:1/span 4;margin:0!important} .ed-tcard figure.wp-block-image img{aspect-ratio:1;border-radius:2px} .ed-tcard h3{grid-column:2;font-size:17px!important;margin:0 0 4px!important} .ed-tcard p:first-of-type{grid-column:2;font-size:13.5px;margin:0 0 8px!important} .ed-tcard p:last-of-type{grid-column:2;border-top:none;padding-top:0;margin:0 0 8px!important;font-size:13px} .ed-tcard .wp-block-buttons{grid-column:2} .ed-tcard .wp-block-button__link{padding:8px 16px;font-size:13.5px} } /* ---- SHOP ---- */ .woocommerce ul.products li.product{ border:1px solid var(--ed-line);border-radius:3px;padding:16px;background:#fff} .woocommerce ul.products li.product .woocommerce-loop-product__title{ font-family:Inter,system-ui,sans-serif!important;font-size:15px!important;font-weight:500; line-height:1.35;color:var(--ed-deep)} .woocommerce ul.products li.product .price{font-size:15px;font-weight:600;color:var(--ed-deep)} .woocommerce ul.products li.product .button{width:100%;text-align:center; background:transparent;color:var(--ed-clay-dk);border:1.5px solid var(--ed-line2)} /* ---- BOOKING PANEL ---- */ .amelia-app-booking,.amelia-container{ background:var(--ed-oat);border:1px solid var(--ed-line2);border-radius:3px;padding:24px} @media(max-width:619px){.amelia-app-booking,.amelia-container{padding:16px}} /* ---- STICKY MOBILE BOOK BAR ---- */ @media(max-width:799px){ .page .amelia-book-trigger{ position:fixed;left:0;right:0;bottom:0;z-index:99;margin:0!important; background:#fff;border-top:1px solid var(--ed-line2); padding:10px 16px;box-shadow:0 -6px 20px rgba(42,33,27,.10)} .page .amelia-book-trigger .wp-block-button{width:100%} .page .amelia-book-trigger .wp-block-button__link{display:block;width:100%;text-align:center} .site-footer-wrap{padding-bottom:76px} } /* ---- RHYTHM & TYPE ---- */ .entry-content h2{margin-top:56px;margin-bottom:10px} .entry-content>p{max-width:720px} .entry-content>p:first-of-type{font-size:19px;line-height:1.6;color:var(--ed-muted)} @media(max-width:619px){ .entry-content>p:first-of-type{font-size:17px} .entry-content h2{margin-top:40px}} /* ---- HERO eyebrow + review proof (added 2026-09-21) ---- */ .entry-content p.ed-eyebrow{ font-size:12px!important;letter-spacing:.14em;text-transform:uppercase; color:var(--ed-muted)!important;font-weight:600;margin:0 0 14px!important;max-width:none} .entry-content p.ed-proof{ border-top:1px solid var(--ed-line);padding-top:18px;margin-top:26px!important; font-size:14.5px!important;line-height:1.55;color:var(--ed-muted)!important;max-width:620px} .entry-content p.ed-proof strong{color:var(--ed-deep);font-weight:600;letter-spacing:.01em} @media(max-width:619px){ .entry-content p.ed-proof{font-size:13.5px!important;margin-top:22px!important;padding-top:16px}} /* ---------- Nocturne dark tokens (not Kadence palette slots — Phase 1 already set slots 1–9; these three are extra, used only inside dark sections) ---------- */ :root{ --noct-dark-bg:#16151A; --noct-dark-text:#F3EEE6; --noct-dark-muted:#B8B0A3; } /* ============================================================ PART A — HEADER & FOOTER (dark bookends) Live selectors confirmed 2026-09-23: #masthead.site-header, #colophon.site-footer, #primary-menu, .site-title, .footer-html ============================================================ */ /* Header */ #masthead.site-header{ background:var(--noct-dark-bg) !important; border-bottom:1px solid rgba(255,255,255,0.12); } #masthead .site-title, #masthead .site-title a{ font-family:'DM Serif Display', Georgia, serif; color:var(--noct-dark-text) !important; letter-spacing:0.02em; } #masthead #primary-menu > li > a{ font-family:'Figtree','Helvetica Neue',Arial,sans-serif; font-size:15px; font-weight:500; color:var(--noct-dark-muted) !important; border-bottom:2px solid transparent; padding:6px 0; } #masthead #primary-menu > li.current-menu-item > a, #masthead #primary-menu > li > a:hover{ color:var(--noct-dark-text) !important; border-bottom-color:#D8B98A; } /* Header CTA button, if/when a Kadence header button block is added (mirrors the "Book a treatment" pill from the artboard header) */ #masthead .kadence-header-html-button a, #masthead .header-button a{ display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:10px 18px; background:#D8B98A;color:#16151A; border:1.5px solid #D8B98A;border-radius:999px; font-family:'Figtree','Helvetica Neue',Arial,sans-serif; font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap; } /* WPML language switcher — inherits currentColor per the carried-in design requirement; on the dark header this reads light automatically */ #masthead .wpml-ls-menu-item > a, #masthead .wpml-ls-menu-item > a *{ color:var(--noct-dark-muted) !important; } #masthead .wpml-ls-current-language > a{ color:var(--noct-dark-text) !important; } /* Footer — current live footer is a single info row (#colophon .footer-html); this styles it dark now. A full 4-column footer (Explore / Visit / Help, per the artboard) needs Kadence's Footer Builder to add widget columns first — that's a Customizer step, not CSS, and is flagged as a Phase 2 open item below. */ #colophon.site-footer{ background:var(--noct-dark-bg) !important; color:var(--noct-dark-text); } #colophon .footer-html, #colophon .footer-html a, #colophon .footer-html p{ font-family:'Figtree','Helvetica Neue',Arial,sans-serif; font-size:13px; color:var(--noct-dark-muted) !important; } #colophon .footer-html strong{ color:var(--noct-dark-text); } /* ============================================================ PART B — COMPONENT CLASSES (wired up by Phase 3 content pass) ============================================================ */ /* ---- Treatment card grid (.ed-card) — B_Home lines 78–167. NOTE: border alone (D8CFC0 on EDE6DB) measures under 1.3:1 — too subtle to rely on for definition by itself (WCAG 1.4.11). Added a soft shadow so the card boundary reads even where the colour delta doesn't — same palette, no colour changed from the artboard, written here per the "no deviation without a reason" rule. */ .ed-card{display:flex;flex-direction:column;background:#EDE6DB;border-radius:6px;overflow:hidden;border:1px solid #D8CFC0;box-shadow:0 1px 3px rgba(27,26,31,0.06);} .ed-card__img{width:100%;height:260px;object-fit:cover;} .ed-card__body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px;flex-grow:1;} .ed-card h3{margin:0;font-family:'DM Serif Display', Georgia, serif;font-size:24px;line-height:1.15;font-weight:400;letter-spacing:-0.005em;color:#1B1A1F;} .ed-card p{margin:0;font-family:'Figtree','Helvetica Neue',Arial,sans-serif;font-size:15px;line-height:1.6;color:#5A5661;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .ed-card__meta{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:12px;border-top:1px solid #D8CFC0;} .ed-card__price{display:flex;align-items:center;gap:14px;font-family:'Figtree','Helvetica Neue',Arial,sans-serif;font-size:14px;color:#5A5661;} .ed-card__price strong{font-weight:700;color:#1B1A1F;font-size:15px;} .ed-btn-small, .ed-card a.ed-btn-small{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:10px 18px;background:#D8B98A;color:#16151A;border:1.5px solid #D8B98A;border-radius:999px;font-family:'Figtree','Helvetica Neue',Arial,sans-serif;font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap;} .ed-btn-outline-dark{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 26px;background:transparent;color:#1B1A1F;border:1.5px solid #1B1A1F;border-radius:999px;font-family:'Figtree','Helvetica Neue',Arial,sans-serif;font-size:15px;font-weight:600;text-decoration:none;white-space:nowrap;} /* ---- HydraFacial tier ladder (.ed-tiers) — B_Home lines 168–238 ---- */ .ed-tiers{padding:64px;background:var(--noct-dark-bg);} .ed-tiers__grid{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:20px;} .ed-tier{position:relative;display:flex;flex-direction:column;gap:16px;padding:32px 28px 28px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.14);border-radius:6px;} .ed-tier.is-popular{border:2px solid #D8B98A;background:rgba(255,255,255,0.14);} .ed-tier__badge{position:absolute;top:-14px;left:24px;background:#D8B98A;color:#16151A;font-family:'Figtree','Helvetica Neue',Arial,sans-serif;font-size:12px;font-weight:700;letter-spacing:0.08em;padding:5px 12px;border-radius:999px;} .ed-tier h3{margin:0;font-family:'DM Serif Display', Georgia, serif;font-size:28px;line-height:1.08;font-weight:400;letter-spacing:-0.005em;color:var(--noct-dark-text);} .ed-tier__price{display:flex;align-items:baseline;gap:10px;} .ed-tier__price strong{font-family:'DM Serif Display', Georgia, serif;font-size:40px;color:var(--noct-dark-text);} .ed-tier__price span{font-family:'Figtree','Helvetica Neue',Arial,sans-serif;font-size:14px;color:var(--noct-dark-muted);} .ed-tier ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;} .ed-tier li{display:flex;gap:10px;align-items:center;font-family:'Figtree','Helvetica Neue',Arial,sans-serif;font-size:15px;color:var(--noct-dark-muted);} .ed-tier li .check{color:#D8B98A;} .ed-tier__cta{margin-top:auto;padding-top:8px;} .ed-tier__cta a{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 26px;border-radius:999px;font-family:'Figtree','Helvetica Neue',Arial,sans-serif;font-size:15px;font-weight:600;text-decoration:none;white-space:nowrap;width:100%;box-sizing:border-box;background:transparent;color:var(--noct-dark-text);border:1.5px solid var(--noct-dark-text);} .ed-tier.is-popular .ed-tier__cta a{background:#D8B98A;color:#16151A;border-color:#D8B98A;} /* ---- Booking panel (.ed-book-panel) — B_Treatment lines 101–177 ---- */ .ed-book-panel{display:flex;flex-direction:column;gap:20px;padding:28px;background:#EDE6DB;border:1px solid #D8CFC0;border-radius:6px;} .ed-book-panel__eyebrow{font-family:'Figtree','Helvetica Neue',Arial,sans-serif;letter-spacing:0.02em;font-size:13px;font-weight:700;color:#8A6A3A;} .ed-book-panel h2{margin:0;font-family:'DM Serif Display', Georgia, serif;font-size:26px;line-height:1.08;font-weight:400;letter-spacing:-0.005em;color:#1B1A1F;} .ed-book-panel__price{display:flex;align-items:baseline;gap:12px;} .ed-book-panel__price strong{font-family:'DM Serif Display', Georgia, serif;font-size:44px;color:#1B1A1F;} .ed-book-panel__price span{font-family:'Figtree','Helvetica Neue',Arial,sans-serif;font-size:14px;color:#5A5661;} .ed-book-panel__steps{display:flex;gap:8px;align-items:center;font-family:'Figtree','Helvetica Neue',Arial,sans-serif;font-size:12px;color:#5A5661;} .ed-book-panel__steps .step-active{padding:4px 10px;border-radius:999px;background:#1B1A1F;color:#F6F1EA;font-weight:700;} .ed-book-panel .day-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 0;border-radius:10px;border:1.5px solid #D8CFC0;background:#FFFFFF;color:#1B1A1F;font-family:'Figtree','Helvetica Neue',Arial,sans-serif;font-size:12px;font-weight:600;cursor:pointer;} .ed-book-panel .day-btn.is-selected{border-color:#1B1A1F;background:#1B1A1F;color:#F6F1EA;} .ed-book-panel .time-btn{padding:12px 0;border-radius:999px;border:1.5px solid #D8CFC0;background:#FFFFFF;color:#1B1A1F;font-family:'Figtree','Helvetica Neue',Arial,sans-serif;font-size:14px;font-weight:600;cursor:pointer;} .ed-book-panel .time-btn.is-selected{border-color:#D8B98A;background:#D8B98A;color:#16151A;} .ed-book-panel input[type="tel"]{padding:14px 16px;border:1.5px solid #D8CFC0;border-radius:10px;font-family:'Figtree','Helvetica Neue',Arial,sans-serif;font-size:15px;background:#FFFFFF;color:#1B1A1F;} .ed-book-panel__confirm{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:18px 34px;background:#D8B98A;color:#16151A;border:1.5px solid #D8B98A;border-radius:999px;font-family:'Figtree','Helvetica Neue',Arial,sans-serif;font-size:17px;font-weight:600;text-decoration:none;white-space:nowrap;width:100%;box-sizing:border-box;} .ed-book-panel__note{margin:0;font-family:'Figtree','Helvetica Neue',Arial,sans-serif;font-size:13px;line-height:1.6;color:#5A5661;} .ed-book-panel__trust{display:flex;justify-content:space-between;border-top:1px solid #D8CFC0;padding-top:14px;} /* ---- Sticky mobile booking bar (.ed-sticky) — B_Mobile lines 177–181. Fixed, not sticky, in the artboard (position:absolute within a fixed-height mock frame) — translated to position:fixed for a real page, only inside the max-width:600px breakpoint. */ .ed-sticky{display:none;} @media (max-width:600px){ .ed-sticky{ display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40; height:76px;box-sizing:border-box;padding:12px 18px; background:#F6F1EA;border-top:1px solid #D8CFC0; align-items:center;justify-content:space-between;gap:12px; box-shadow:0 -8px 24px rgba(0,0,0,0.08); } .ed-sticky__meta{display:flex;flex-direction:column;} .ed-sticky__meta .label{font-family:'Figtree','Helvetica Neue',Arial,sans-serif;font-size:12px;color:#5A5661;} .ed-sticky__meta .value{font-family:'Figtree','Helvetica Neue',Arial,sans-serif;font-size:14px;font-weight:700;color:#1B1A1F;} .ed-sticky a{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 26px;background:#D8B98A;color:#16151A;border:1.5px solid #D8B98A;border-radius:999px;font-family:'Figtree','Helvetica Neue',Arial,sans-serif;font-size:15px;font-weight:600;text-decoration:none;white-space:nowrap;} /* keep content clear of the fixed bar */ body.has-ed-sticky{padding-bottom:76px;} } /* ---- Aftercare block (.ed-aftercare) and shop product cards (.ed-shop-card) — same visual pattern, B_Treatment 233–277 / B_Home 312–356 / B_Shop 55–128 ---- */ .ed-aftercare, .ed-shop-grid{padding:64px;background:#F6F1EA;} .ed-shop-card{display:flex;flex-direction:column;gap:12px;background:#FFFFFF;border:1px solid #D8CFC0;border-radius:6px;padding:18px;box-shadow:0 1px 3px rgba(27,26,31,0.05);} .ed-shop-card__img{display:flex;align-items:center;justify-content:center;height:220px;background:#FFFFFF;} .ed-shop-card__img img{max-width:100%;max-height:100%;object-fit:contain;} .ed-shop-card__cat{font-family:'Figtree','Helvetica Neue',Arial,sans-serif;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:#5A5661;font-weight:700;} .ed-shop-card__name{font-family:'Figtree','Helvetica Neue',Arial,sans-serif;font-size:16px;font-weight:600;color:#1B1A1F;line-height:1.3;} .ed-shop-card__row{display:flex;align-items:center;justify-content:space-between;margin-top:4px;} .ed-shop-card__price{font-family:'Figtree','Helvetica Neue',Arial,sans-serif;font-size:17px;font-weight:700;color:#1B1A1F;} .ed-btn-outline{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:10px 18px;background:transparent;color:#1B1A1F;border:1.5px solid #1B1A1F;border-radius:999px;font-family:'Figtree','Helvetica Neue',Arial,sans-serif;font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap;} /* ---- Consultation banner (champagne block) — B_Home 357–377 ---- */ .ed-consult-banner{display:flex;flex-direction:column;justify-content:center;gap:16px;padding:40px;background:#D8B98A;color:#16151A;border-radius:6px;} .ed-consult-banner__eyebrow{font-family:'Figtree','Helvetica Neue',Arial,sans-serif;letter-spacing:0.02em;font-size:13px;font-weight:700;color:#16151A;} .ed-consult-banner h2{margin:0;font-family:'DM Serif Display', Georgia, serif;font-size:40px;line-height:1.08;font-weight:400;letter-spacing:-0.005em;color:#16151A;} .ed-consult-banner p{margin:0;font-family:'Figtree','Helvetica Neue',Arial,sans-serif;font-size:16px;line-height:1.6;color:#16151A;} .ed-consult-banner .ed-btn-dark-on-champagne{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 26px;background:#1B1A1F;color:#F6F1EA;border:1.5px solid #1B1A1F;border-radius:999px;font-family:'Figtree','Helvetica Neue',Arial,sans-serif;font-size:15px;font-weight:600;text-decoration:none;white-space:nowrap;} /* Nocturne Phase 3 — home page: the Kadence page-title/hero section duplicates the new .ed-hero, hide it on the home page only (no per-page override exists on this free-tier theme; scoped by body.page-id-253) */ body.page-id-253 .entry-hero{display:none;} /* ---- SHOP GRID FIX (2026-09-23) ---- WooCommerce/Kadence markup carries a 'grid-ss-col-2' class on the product grid (ul.products) intended to give 2 columns between 400px and 575px, matching the existing .grid-sm-col-3 (min-width:576px) and .grid-lg-col-4 (min-width:1025px) rules already shipped in this theme's CSS bundle -- but no .grid-ss-col-2 rule is actually present anywhere in the loaded stylesheets (confirmed by reading the live CSSOM), so the grid falls back to the unqualified base .grid-cols rule (1 column) for the entire 0-575px range. This restores the missing breakpoint only; nothing else is touched. */ @media (max-width:575.98px){ .woocommerce ul.products.grid-cols{grid-template-columns:repeat(2,minmax(0,1fr))!important} } /* ---- SHOP CARD MOBILE REDESIGN (2026-09-23) ---- Found via Timur's own phone: (1) the theme's decorative beige "content-bg" box behind the title/price could render shorter than its content on some devices (larger system font size), leaving the Add to Cart button sitting below/outside the box instead of inside it; (2) title, price and button all rendered in the same size, weight and color, with no visual hierarchy, and the button looked like plain text rather than a tappable control. Fix, mobile only (<=575.98px), shop archive grid only: - Drop the beige box entirely so there is nothing for content to spill past (title/price/button now sit directly on the card's own white background, which already sizes itself to its content). - Give price its own bolder/larger treatment, distinct from the title. - Turn the Add to Cart control into an actual filled button (Nocturne champagne fill / dark text, pill radius) matching the button style used elsewhere on the site, instead of plain underline-free text. */ @media (max-width:575.98px){ .woocommerce ul.products li.product .entry-content-wrap{ background:transparent!important; padding:0.75rem 0 0!important; margin:0!important; border-radius:0!important; } .woocommerce ul.products li.product .woocommerce-loop-product__title{ font-size:14px!important; font-weight:600!important; line-height:1.3!important; padding:0!important; margin:0 0 0.35em!important; } .woocommerce ul.products li.product .price{ display:block!important; font-size:16px!important; font-weight:700!important; color:var(--ed-clay-dk)!important; margin:0 0 0.75em!important; } .woocommerce ul.products li.product .product-action-wrap{ margin-top:0!important; } .woocommerce ul.products li.product .product-action-wrap .button{ display:block!important; width:100%!important; box-sizing:border-box!important; white-space:nowrap!important; background:var(--global-palette1)!important; color:var(--global-palette3)!important; border:none!important; border-radius:999px!important; font-weight:700!important; padding:0.65em 0.5em!important; text-align:center!important; } } /* ---- SHOP GRID SPACING + ICON-ONLY ADD-TO-CART (2026-09-23 v2) ---- Found via Timur's own phone (real Chrome, visible tabs/status bar): (1) the 2-col mobile shop grid still used the theme's desktop 40px gap on both axes and 16px card padding, wasting space on a 360px screen; (2) he asked to drop the arrow icon and shrink "ADD TO CART" text down to a pictogram-only button to reclaim even more room. The arrow SVG was also the cause of a small glyph spilling past the card edge on some titles (fixed text + 27px-wide icon didn't fit the ~104px button at 100% width). Fix, mobile only (<=575.98px), shop archive grid only: - Tighten the grid gap and card padding. - Replace the "Add to cart" text + arrow icon with a single cart pictogram (same path as the header cart icon, so it matches the rest of the site's icon language) in a compact round button. */ @media (max-width:575.98px){ .woocommerce ul.products.grid-cols{ gap:14px 10px!important; } .woocommerce ul.products li.product{ padding:10px!important; } .woocommerce ul.products li.product .product-action-wrap{ margin-top:0.5em!important; } .woocommerce ul.products li.product .product-action-wrap .button{ display:inline-flex!important; align-items:center!important; justify-content:center!important; width:40px!important; height:40px!important; min-width:0!important; padding:0!important; border-radius:50%!important; font-size:0!important; line-height:0!important; white-space:nowrap!important; overflow:visible!important; } .woocommerce ul.products li.product .product-action-wrap .button::before{ content:""; display:inline-block; width:18px; height:18px; background-color:var(--global-palette3)!important; -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M19%205h-14l1.5-2h11zM21.794%205.392l-2.994-3.992c-0.196-0.261-0.494-0.399-0.8-0.4h-12c-0.326%200-0.616%200.156-0.8%200.4l-2.994%203.992c-0.043%200.056-0.081%200.117-0.111%200.182-0.065%200.137-0.096%200.283-0.095%200.426v14c0%200.828%200.337%201.58%200.879%202.121s1.293%200.879%202.121%200.879h14c0.828%200%201.58-0.337%202.121-0.879s0.879-1.293%200.879-2.121v-14c0-0.219-0.071-0.422-0.189-0.585-0.004-0.005-0.007-0.010-0.011-0.015zM4%207h16v13c0%200.276-0.111%200.525-0.293%200.707s-0.431%200.293-0.707%200.293h-14c-0.276%200-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707zM15%2010c0%200.829-0.335%201.577-0.879%202.121s-1.292%200.879-2.121%200.879-1.577-0.335-2.121-0.879-0.879-1.292-0.879-2.121c0-0.552-0.448-1-1-1s-1%200.448-1%201c0%201.38%200.561%202.632%201.464%203.536s2.156%201.464%203.536%201.464%202.632-0.561%203.536-1.464%201.464-2.156%201.464-3.536c0-0.552-0.448-1-1-1s-1%200.448-1%201z'%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M19%205h-14l1.5-2h11zM21.794%205.392l-2.994-3.992c-0.196-0.261-0.494-0.399-0.8-0.4h-12c-0.326%200-0.616%200.156-0.8%200.4l-2.994%203.992c-0.043%200.056-0.081%200.117-0.111%200.182-0.065%200.137-0.096%200.283-0.095%200.426v14c0%200.828%200.337%201.58%200.879%202.121s1.293%200.879%202.121%200.879h14c0.828%200%201.58-0.337%202.121-0.879s0.879-1.293%200.879-2.121v-14c0-0.219-0.071-0.422-0.189-0.585-0.004-0.005-0.007-0.010-0.011-0.015zM4%207h16v13c0%200.276-0.111%200.525-0.293%200.707s-0.431%200.293-0.707%200.293h-14c-0.276%200-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707zM15%2010c0%200.829-0.335%201.577-0.879%202.121s-1.292%200.879-2.121%200.879-1.577-0.335-2.121-0.879-0.879-1.292-0.879-2.121c0-0.552-0.448-1-1-1s-1%200.448-1%201c0%201.38%200.561%202.632%201.464%203.536s2.156%201.464%203.536%201.464%202.632-0.561%203.536-1.464%201.464-2.156%201.464-3.536c0-0.552-0.448-1-1-1s-1%200.448-1%201z'%2F%3E%3C%2Fsvg%3E"); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; } .woocommerce ul.products li.product .product-action-wrap .button .kadence-arrow-right-alt-svg{ display:none!important; } } /* ---- SHOP CARD ROW ALIGNMENT (2026-09-23 v3) ---- Found via Timur's own phone: "Add to card icons should be in the same level, price on the same level. The same category information should start on the same level." Measured live: product titles already START at an identical y-position within a row (image heights match), but product-name LENGTH varies (1-4 lines across the 99 products, most commonly 2), so a 3-line title's card grows taller than its 2-line neighbour, pushing that card's price and Add to Cart icon down out of alignment with the shorter card next to it. Fix: reserve a fixed 3-line box for the title (covers 98 of 99 live product names with no truncation; only the single 4-line outlier loses its last word to an ellipsis) so price and the Add to Cart icon start at the same y-position in every card, every row. */ @media (max-width:575.98px){ .woocommerce ul.products li.product .woocommerce-loop-product__title{ min-height:54.6px!important; display:-webkit-box!important; -webkit-line-clamp:3!important; -webkit-box-orient:vertical!important; overflow:hidden!important; } } /* === UX AUDIT P0-1 (2026-09-24): readable outline buttons on light backgrounds. Previous: champagne text/border (1.66:1). Links now use palette2 via Customizer link colour. === */ .entry-content .wp-block-button.is-style-outline>.wp-block-button__link:not(.has-text-color){color:var(--global-palette2)!important;border-color:var(--global-palette2)!important;background:transparent!important} .entry-content .wp-block-button.is-style-outline>.wp-block-button__link:not(.has-text-color):hover,.entry-content .wp-block-button.is-style-outline>.wp-block-button__link:not(.has-text-color):focus{background:var(--global-palette2)!important;color:var(--global-palette9)!important} a:focus-visible,button:focus-visible,.wp-block-button__link:focus-visible{outline:2px solid var(--global-palette2);outline-offset:2px} .woocommerce div.product .woocommerce-tabs ul.tabs li a{color:var(--global-palette4)!important;opacity:1!important} /* === UX AUDIT P1 (2026-09-24) — phase 2 quick wins. Rollback: delete from this marker to the end. === */ /* #12 product-card titles: drop the leftover Inter rule (Inter is not loaded), inherit Figtree */ .woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:inherit!important} /* #11 mobile: compact title area, same ground as the content, 16 px gutter, no card inset */ @media (max-width:767px){ .entry-hero .entry-hero-container-inner{background:#F6F1EA!important} .entry-hero .entry-hero-container-inner .entry-header{min-height:0!important;padding:14px 0 6px!important;text-align:left!important;align-items:flex-start!important;justify-content:flex-start!important} .entry-hero .entry-header h1{font-size:30px!important;line-height:1.15!important;text-align:left!important;margin:0!important} .entry-hero .kadence-breadcrumbs{margin:0 0 6px!important;font-size:13px!important;text-align:left!important} .entry-hero .archive-description{text-align:left!important} .entry-hero ~ #primary.content-area,.entry-hero + .content-area{margin-top:0!important} .entry-hero .site-container,.content-container.site-container{padding-left:16px!important;padding-right:16px!important} article.entry.single-entry{margin-left:-16px!important;margin-right:-16px!important;border-radius:0!important;box-shadow:none!important} article.entry.single-entry > .entry-content-wrap{padding:8px 16px 24px!important} } /* #49 breadcrumbs: readable, tappable */ .kadence-breadcrumbs a{text-decoration:underline;text-underline-offset:2px} .kadence-breadcrumbs .bc-delimiter{margin:0 4px} /* #17 cart and checkout lines: name, price, quantity only */ .wc-block-cart-item__product .wc-block-components-product-metadata__description, .wc-block-components-order-summary-item .wc-block-components-product-metadata__description{display:none!important} /* #16 order confirmation: no "Back to Cart" there; pickup note shows only there */ body.woocommerce-order-received .entry-content .wp-block-buttons:has(a[href$="/cart/"]), body.woocommerce-order-received .entry-content .wp-block-buttons:has(a[href$="/panier/"]){display:none!important} .ed-pickup-note{display:none} body.woocommerce-order-received .ed-pickup-note{display:block} /* #13 product page: clearer price */ .single-product div.product .summary p.price,.single-product div.product .summary span.price{font-size:22px!important;font-weight:700!important;color:var(--global-palette3)!important} .single-product div.product .product_meta{font-size:13px;color:var(--global-palette6)} /* #13 reassurance under Add to cart (facts from the live shipping zones) */ .single-product div.product .summary form.cart::after{content:"✓ Free pickup at the clinic, 4310 av. Girouard (NDG)\A✓ Delivery in Canada: $15, free from $300";white-space:pre-line;display:block;flex-basis:100%;width:100%;margin-top:12px;font-size:14px;line-height:1.6;color:var(--global-palette4)} html[lang^="fr"] .single-product div.product .summary form.cart::after{content:"✓ Cueillette gratuite à la clinique, 4310 av. Girouard (NDG)\A✓ Livraison au Canada : 15 $, gratuite dès 300 $"} /* #45 desktop menu: space between items */ @media (min-width:1025px){#primary-menu > li > a{padding-left:10px!important;padding-right:10px!important}} /* #46 desktop and tablet product cards on the mobile card spec */ @media (min-width:576px){ .woocommerce ul.products li.product .entry-content-wrap{background:transparent!important;padding:12px 0 0!important;margin:0!important;border-radius:0!important} .woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:16px!important;font-weight:600!important;line-height:1.3!important;color:var(--global-palette3)!important;margin:0 0 6px!important;padding:0!important} .woocommerce ul.products li.product .price{display:block!important;font-size:17px!important;font-weight:700!important;color:var(--ed-clay-dk)!important;margin:0 0 12px!important} .woocommerce ul.products li.product .product-action-wrap .button{display:block!important;width:100%!important;box-sizing:border-box!important;background:var(--global-palette1)!important;color:var(--global-palette3)!important;border:none!important;border-radius:999px!important;font-size:14px!important;font-weight:700!important;letter-spacing:0!important;text-transform:none!important;padding:10px 12px!important;text-align:center!important} .woocommerce ul.products li.product .product-action-wrap .button .kadence-arrow-right-alt-svg{display:none!important} } /* === UX AUDIT P1b (2026-09-24): booking confirmation + coupon + desktop card alignment. Rollback: delete from this marker to the end. === */ /* #20 hide the coupon box on the last booking step (no coupons exist) */ .amelia-v2-booking #amelia-container .am-fs__coupon{display:none!important} /* #20 confirmation: hide the internal appointment ID; labels never split ("Locatio / n") */ .amelia-v2-booking #amelia-container .am-fs__congrats-main>span{display:none!important} .amelia-v2-booking #amelia-container .am-fs__congrats-info-customer>div>span:first-child{flex-shrink:0!important;white-space:nowrap!important;margin-right:12px!important;word-break:normal!important} .amelia-v2-booking #amelia-container .am-fs__congrats-info-customer>div>span:last-child{text-align:right} /* #46 desktop cards: price and button line up across a row */ @media (min-width:576px){.woocommerce ul.products li.product .woocommerce-loop-product__title{min-height:2.6em!important}} /* UX AUDIT P1c (2026-09-24): phone numbers never break across lines */ a[href^="tel:"]{white-space:nowrap} /* === HEADER BRAND (2026-09-24, Timur approved): gold face mark + "Clinique" over "EuroDerm", cream text. Rollback: delete from this marker to the end + restore Customizer logo/header values. === */ #masthead .site-branding .site-title{width:min-content!important;font-size:20px!important;line-height:1.05!important;margin:0!important;letter-spacing:.01em!important;white-space:normal!important} #masthead .site-branding .site-title::first-line{font-size:13px;letter-spacing:.05em} #masthead .site-branding a.brand{gap:10px} #masthead .site-branding .custom-logo{margin-right:10px} @media (min-width:1025px){#masthead .site-branding .site-title{font-size:24px!important}#masthead .site-branding .site-title::first-line{font-size:14px}} #masthead .site-branding .site-title{width:5em!important;min-width:5em!important;flex-shrink:0!important} /* HEADER BRAND b (2026-09-24): desktop menu fits on one line in FR (10 items) until the 5-item menu (P2 #23); gap after the brand */ @media (min-width:1025px){#primary-menu > li > a{padding-left:6px!important;padding-right:6px!important}} @media (min-width:1025px) and (max-width:1279px){#masthead #primary-menu > li > a{font-size:13.5px!important;padding-left:4px!important;padding-right:4px!important}} @media (min-width:1025px) and (max-width:1099px){#masthead #primary-menu > li > a{font-size:13px!important;padding-left:3px!important;padding-right:3px!important}} #masthead #main-header .site-branding{margin-right:16px} /* === HEADER ACTIONS #23 (2026-09-24): Book button, call button, EN|FR switch in the header; Book online item hidden in the menu. Rollback: delete from this marker to the end + restore header items/HTML in the Customizer. === */ html[lang^="fr"] .ed-en,html:not([lang^="fr"]) .ed-fr{display:none!important} .ed-hactions{display:flex;align-items:center;gap:6px} .ed-hbtn{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:999px;background:#D8B98A;color:#16151A!important;font-family:'Figtree',Arial,sans-serif;font-weight:700;font-size:14px;text-decoration:none!important;white-space:nowrap} .ed-hbtn:hover,.ed-hbtn:focus{background:#F3EEE6} .ed-hcall{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;color:#F3EEE6!important} .ed-hcall:hover{color:#D8B98A!important} .ed-lang .wpml-ls{padding:0;border:0} .ed-lang .wpml-ls ul{display:flex;gap:2px;margin:0;padding:0;list-style:none} .ed-lang .wpml-ls-item a{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 4px;color:#B8B2BC!important;font-family:'Figtree',Arial,sans-serif;font-size:13px;font-weight:600;text-decoration:none} .ed-lang .wpml-ls-item a .wpml-ls-native{display:none} .ed-lang .wpml-ls-item-en-ca a::after{content:"EN"} .ed-lang .wpml-ls-item-fr a::after{content:"FR"} .ed-lang .wpml-ls-current-language a{color:#F3EEE6!important;text-decoration:underline;text-underline-offset:4px} .ed-lang .wpml-ls-item-en-ca::after{content:"|";color:#5A5661;margin-left:2px} #main-header #primary-menu .wpml-ls-menu-item{display:none!important} @media (max-width:1024px){.ed-hactions--m{gap:2px}.ed-hactions--m .ed-hbtn{height:34px;padding:0 12px;font-size:13px}.ed-hactions--m .ed-hcall{width:38px;height:40px}} /* HEADER ACTIONS #23b (2026-09-24): fit on 360-390 px phones; hamburger header up to 1365 px (8-item FR menu + buttons need 1366 px); wider desktop header. */ @media (max-width:1365px){#mobile-header .site-container{padding-left:16px!important;padding-right:12px!important}#mobile-header .site-branding .site-title{font-size:18px!important}#mobile-header .site-branding .site-title::first-line{font-size:12px}#mobile-header .site-branding .custom-logo{margin-right:8px}.ed-hactions--m .ed-hbtn{padding:0 10px!important}.ed-hactions--m .ed-hcall{width:36px!important}} @media (max-width:380px){#mobile-header .site-branding .site-title{font-size:16px!important}#mobile-header .site-branding .site-title::first-line{font-size:11px}#mobile-header .site-branding .custom-logo{max-width:30px}.ed-hactions--m .ed-hbtn{padding:0 8px!important;font-size:12.5px!important}} @media (min-width:1025px) and (max-width:1365px){#main-header{display:none!important}#mobile-header{display:block!important}} @media (min-width:1366px){#main-header .site-container{max-width:none!important;padding-left:32px!important;padding-right:32px!important}} /* #23c: call icon drawn in CSS (the header HTML element strips inline SVG) */ .ed-hcall::before{content:"";display:block;width:20px;height:20px;background-color:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M22%2016.9v3a2%202%200%200%201-2.2%202%2019.8%2019.8%200%200%201-8.6-3.1%2019.5%2019.5%200%200%201-6-6A19.8%2019.8%200%200%201%202.1%204.2%202%202%200%200%201%204.1%202h3a2%202%200%200%201%202%201.7c.1.9.4%201.8.7%202.7a2%202%200%200%201-.5%202.1L8%209.8a16%2016%200%200%200%206%206l1.3-1.3a2%202%200%200%201%202.1-.4c.9.3%201.8.6%202.7.7a2%202%200%200%201%201.7%202z'%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M22%2016.9v3a2%202%200%200%201-2.2%202%2019.8%2019.8%200%200%201-8.6-3.1%2019.5%2019.5%200%200%201-6-6A19.8%2019.8%200%200%201%202.1%204.2%202%202%200%200%201%204.1%202h3a2%202%200%200%201%202%201.7c.1.9.4%201.8.7%202.7a2%202%200%200%201-.5%202.1L8%209.8a16%2016%200%200%200%206%206l1.3-1.3a2%202%200%200%201%202.1-.4c.9.3%201.8.6%202.7.7a2%202%200%200%201%201.7%202z'%2F%3E%3C%2Fsvg%3E") center/contain no-repeat} /* === FOOTER #24 (2026-09-24): 4 blocks (address + directions, getting here, hours, explore), EN/FR. Rollback: delete from this marker to the end + restore footer_html_content. === */ .ed-foot{display:grid;grid-template-columns:1.2fr 1.4fr 1fr 1fr;gap:28px;text-align:left;padding:8px 0 4px} .ed-foot p{margin:0 0 10px;font-size:14px;line-height:1.55;color:#D9D3CA} .ed-foot .ed-foot__h{font-family:'DM Serif Display',Georgia,serif;font-size:18px;color:#F3EEE6;margin-bottom:10px} .ed-foot a{color:#D8B98A!important;text-decoration:underline;text-underline-offset:3px} .ed-foot a[href^="tel:"]{white-space:nowrap} .ed-foot__links{list-style:none;margin:0;padding:0} .ed-foot__links li{margin:0 0 6px} .ed-foot__links a{font-size:14px;text-decoration:none!important} .ed-foot__links a:hover{text-decoration:underline!important} .ed-foot a.ed-foot__dir{display:inline-flex;align-items:center;min-height:40px;padding:0 18px;border-radius:999px;background:#D8B98A;color:#16151A!important;font-weight:700;font-size:14px;text-decoration:none!important} .ed-foot__copy{margin:18px 0 0!important;padding-top:14px;border-top:1px solid rgba(255,255,255,.12);font-size:12px!important;color:#B8B2BC!important;text-align:left} @media (max-width:1024px){.ed-foot{grid-template-columns:1fr 1fr;gap:22px}} @media (max-width:600px){.ed-foot{grid-template-columns:1fr;gap:18px}} .entry-content .ed-directions .wp-block-button__link{background:#D8B98A;color:#16151A} /* ADDRESS FORMAT (2026-09-24, Timur): EN "Ave. Girouard", FR "4310, av. Girouard" in the product-page lines */ .single-product div.product .summary form.cart::after{content:"✓ Free pickup at the clinic, 4310 Ave. Girouard (NDG)\A✓ Delivery in Canada: $15, free from $300"} html[lang^="fr"] .single-product div.product .summary form.cart::after{content:"✓ Cueillette gratuite à la clinique, 4310, av. Girouard (NDG)\A✓ Livraison au Canada : 15 $, gratuite dès 300 $"} /* FOOTER #24b: beat the footer's ID-level rules (button text was champagne on champagne; headings unstyled) */ #colophon .ed-foot .ed-foot__h{font-family:'DM Serif Display',Georgia,serif!important;font-size:18px!important;color:#F3EEE6!important} #colophon .ed-foot a.ed-foot__dir,#colophon .ed-foot a.ed-foot__dir:hover{color:#16151A!important;background:#D8B98A;text-decoration:none!important} #colophon .ed-foot a.ed-foot__dir:hover{background:#F3EEE6} #colophon .ed-foot .ed-foot__links a{color:#D8B98A!important} /* === TREATMENT IMAGE SIZE (2026-09-24) — stops text jumping while the first photo loads (CLS). Each photo keeps its own size and shape. Rollback: delete from this marker to the end. === */ :is(.parent-pageid-255,.parent-pageid-256) .entry-content figure.wp-block-image img{height:auto;max-width:100%} :is(.parent-pageid-255,.parent-pageid-256) .entry-content figure.wp-block-image img[src*="5b1e0010-271f-440b-ae05-54eda2b74a5e"]{width:881px;aspect-ratio:auto 881/900} :is(.parent-pageid-255,.parent-pageid-256) .entry-content figure.wp-block-image img[src*="d8c8be75-9d82-4621-9976-c8249a4c4226"]{width:900px;aspect-ratio:auto 900/600} :is(.parent-pageid-255,.parent-pageid-256) .entry-content figure.wp-block-image img[src*="b118fa65-033d-47ab-b540-4b86d0c62506"]{width:587px;aspect-ratio:auto 587/900} :is(.parent-pageid-255,.parent-pageid-256) .entry-content figure.wp-block-image img[src*="ef1b985a-0214-4620-b56e-24958f70e90d"]{width:474px;aspect-ratio:auto 474/711} :is(.parent-pageid-255,.parent-pageid-256) .entry-content figure.wp-block-image img[src*="f23b6056-b170-4895-a406-455a87230aba"]{width:900px;aspect-ratio:auto 900/600} :is(.parent-pageid-255,.parent-pageid-256) .entry-content figure.wp-block-image img[src*="3c1017fa-c299-4d8e-b7b1-109c7e17354d"]{width:900px;aspect-ratio:auto 900/546} :is(.parent-pageid-255,.parent-pageid-256) .entry-content figure.wp-block-image img[src*="6f9d6d63-84da-4a83-af14-40c004179692"]{width:526px;aspect-ratio:auto 526/526} :is(.parent-pageid-255,.parent-pageid-256) .entry-content figure.wp-block-image img[src*="a4679d9e-d625-4456-a546-7f324d2a7469"]{width:900px;aspect-ratio:auto 900/600} :is(.parent-pageid-255,.parent-pageid-256) .entry-content figure.wp-block-image img[src*="05f74970-6c30-411c-9c03-0ecd8b3b0601"]{width:500px;aspect-ratio:auto 500/305} :is(.parent-pageid-255,.parent-pageid-256) .entry-content figure.wp-block-image img[src*="f842a413-cd3f-49b6-8431-2712cdf74fc2"]{width:506px;aspect-ratio:auto 506/900} :is(.parent-pageid-255,.parent-pageid-256) .entry-content figure.wp-block-image img[src*="d1d24fa8-8c1e-423d-8345-5b37d95520e3"]{width:900px;aspect-ratio:auto 900/505} :is(.parent-pageid-255,.parent-pageid-256) .entry-content figure.wp-block-image img[src*="a65425e1-0f6b-4745-af2d-4846e8dc8b60"]{width:900px;aspect-ratio:auto 900/900} :is(.parent-pageid-255,.parent-pageid-256) .entry-content figure.wp-block-image img[src*="1d7647e9-04e3-49db-bb0f-a6b444799ecb"]{width:563px;aspect-ratio:auto 563/684} :is(.parent-pageid-255,.parent-pageid-256) .entry-content figure.wp-block-image img[src*="1e847510-6a13-4533-b3b1-cd71d3f52054"]{width:640px;aspect-ratio:auto 640/640} :is(.parent-pageid-255,.parent-pageid-256) .entry-content figure.wp-block-image img[src*="ebb236fe-1363-48c6-a106-d6012524f9e0"]{width:900px;aspect-ratio:auto 900/900} :is(.parent-pageid-255,.parent-pageid-256) .entry-content figure.wp-block-image img[src*="cc09cc48-c76c-4cd9-8cb7-fcbc151d1986"]{width:850px;aspect-ratio:auto 850/839} :is(.parent-pageid-255,.parent-pageid-256) .entry-content figure.wp-block-image img[src*="89f3f4c2-eb22-48f4-a064-359525986267"]{width:900px;aspect-ratio:auto 900/599} :is(.parent-pageid-255,.parent-pageid-256) .entry-content figure.wp-block-image img[src*="01892e0b-d8c8-4696-8f02-b21e4ab57c88"]{width:900px;aspect-ratio:auto 900/506} :is(.parent-pageid-255,.parent-pageid-256) .entry-content figure.wp-block-image img[src*="baac3735-a17a-4f0a-bd66-6b9d9282686c"]{width:562px;aspect-ratio:auto 562/562} :is(.parent-pageid-255,.parent-pageid-256) .entry-content figure.wp-block-image img[src*="e8ae564e-1801-4795-939b-e5e4440c4e23"]{width:599px;aspect-ratio:auto 599/900} :is(.parent-pageid-255,.parent-pageid-256) .entry-content figure.wp-block-image img[src*="27a42987-3ca6-4d70-9ca7-b43d18f16ce2"]{width:900px;aspect-ratio:auto 900/600} /* === HEADER MOBILE v2 (2026-09-25): directions pin, 44 px targets, empty cart hidden, cart count as badge on the menu icon, smaller wordmark, "Clinique" dropped under 340 px. Timur: "go". Sticky + shrink set in Customizer (mobile header). Rollback: delete from this marker to the end + restore mobile_html_content and the sticky settings (values in register Part 6). === */ .ed-hdir{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:#F3EEE6!important} .ed-hdir:hover{color:#D8B98A!important} .ed-hdir::before{content:"";display:block;width:22px;height:22px;background-color:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2022s7-6.2%207-12a7%207%200%201%200-14%200c0%205.8%207%2012%207%2012z%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2710%27%20r%3D%272.6%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2022s7-6.2%207-12a7%207%200%201%200-14%200c0%205.8%207%2012%207%2012z%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2710%27%20r%3D%272.6%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat} @media (max-width:1365px){ .ed-hactions--m{gap:0!important} .ed-hactions--m .ed-hcall::before{width:22px;height:22px} #mobile-header .site-header-item{margin-right:0} #mobile-header .site-branding .site-title{font-size:16px!important} #mobile-header .site-branding .site-title::first-line{font-size:10.5px} } @media (max-width:340px){ #mobile-header .site-branding .site-title-wrap{display:none} #mobile-header .site-branding a.brand::after{content:"EuroDerm";font-family:"DM Serif Display",Georgia,serif;font-size:14.5px;line-height:1;color:#F3EEE6;white-space:nowrap} #mobile-header .site-branding .custom-logo{max-width:24px;margin-right:6px} #mobile-header .site-container{padding-left:10px!important;padding-right:6px!important} } /* HEADER MOBILE v2b (2026-09-25): keep the dark background when the mobile header is sticky (Kadence paints the fixed row white). */ #mobile-header .site-header-row-container-inner{background:#16151A!important} #mobile-header .site-main-header-wrap.item-is-fixed .site-header-row-container-inner{border-bottom:1px solid rgba(255,255,255,.12);box-shadow:0 2px 10px rgba(0,0,0,.25)} /* === BOOK BUTTONS MATCH HEADER (2026-09-25) — Timur: in-page Book buttons use the header Book style (champagne pill); "Learn more" = pill outline. Rollback: delete from this marker to the end of this block. === */ .entry-content .wp-block-button[class*="amelia-book-trigger"]>a.wp-block-button__link{background:#D8B98A!important;color:#16151A!important;border:0!important;border-radius:999px!important;font-weight:700!important;min-height:44px;padding:10px 22px!important;display:inline-flex!important;align-items:center;justify-content:center;line-height:1.2!important;text-decoration:none!important} .entry-content .wp-block-button[class*="amelia-book-trigger"]>a.wp-block-button__link:hover,.entry-content .wp-block-button[class*="amelia-book-trigger"]>a.wp-block-button__link:focus-visible{background:#C9A56F!important;color:#16151A!important} .entry-content .wp-block-button.is-style-outline>a.wp-block-button__link{background:transparent!important;color:#75562B!important;border:1.5px solid #75562B!important;border-radius:999px!important;font-weight:600!important;min-height:44px;padding:10px 20px!important;display:inline-flex!important;align-items:center;justify-content:center;line-height:1.2!important} .entry-content .wp-block-button.is-style-outline>a.wp-block-button__link:hover,.entry-content .wp-block-button.is-style-outline>a.wp-block-button__link:focus-visible{background:#75562B!important;color:#FFFFFF!important} /* === END BOOK BUTTONS MATCH HEADER (2026-09-25) === */ /* === PHONE HEADER, MENU LANGUAGE, COMPACT BUTTONS (2026-09-25) — Timur: "Clinique" dropped on all phones (desktop and tablets keep it); EN/FR switch at the top of the phone menu (option C); Book + Learn more stay side by side on narrow phones. Rollback: delete from this marker to the END marker. === */ @media (max-width:767px){ #mobile-header .site-branding .site-title-wrap{display:none} #mobile-header .site-branding a.brand::after{content:"EuroDerm";font-family:"DM Serif Display",Georgia,serif;font-size:17px;line-height:1;color:#F3EEE6;white-space:nowrap} } @media (max-width:340px){ #mobile-header .site-branding a.brand::after{font-size:14.5px} } #mobile-menu{display:flex;flex-direction:column} #mobile-menu>li.wpml-ls-menu-item{order:-1;padding:6px 0 14px;border-bottom:1px solid rgba(255,255,255,.1)} #mobile-menu>li.wpml-ls-menu-item>a{display:inline-flex!important;align-items:center;gap:8px;min-height:44px;box-sizing:border-box;padding:8px 18px!important;border:1.5px solid rgba(243,238,230,.55)!important;border-radius:999px;width:auto!important;color:#F3EEE6!important;font-weight:700;text-decoration:none} #mobile-menu>li.wpml-ls-menu-item>a::before{content:"";display:block;width:18px;height:18px;flex:0 0 18px;background-color:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27M3%2012h18%27%2F%3E%3Cpath%20d%3D%27M12%203a14%2014%200%200%201%200%2018a14%2014%200%200%201%200-18z%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27M3%2012h18%27%2F%3E%3Cpath%20d%3D%27M12%203a14%2014%200%200%201%200%2018a14%2014%200%200%201%200-18z%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat} #mobile-menu>li.wpml-ls-menu-item>a:hover,#mobile-menu>li.wpml-ls-menu-item>a:focus-visible{background:#F3EEE6;color:#16151A!important} @media (max-width:420px){ .entry-content .wp-block-buttons:has(>.wp-block-button[class*="amelia-book-trigger"]){flex-wrap:nowrap!important;gap:6px!important} .entry-content .wp-block-buttons:has(>.wp-block-button[class*="amelia-book-trigger"])>.wp-block-button>a.wp-block-button__link{padding:8px 10px!important;font-size:13.5px!important;white-space:nowrap} } /* === END PHONE HEADER, MENU LANGUAGE, COMPACT BUTTONS (2026-09-25) === */ /* HEADER MOBILE LANG (2026-09-25) */ #mobile-header .site-title-wrap{display:none} #mobile-header .site-branding a.brand::after{content:none!important;display:none!important} #mobile-header .ed-hactions--m{gap:2px} #mobile-header .ed-hlang .wpml-ls{padding:0;border:0;margin:0} #mobile-header .ed-hlang .wpml-ls-current-language{display:none} #mobile-header .ed-hlang .wpml-ls-item a{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:44px;height:44px;border:1.5px solid #D8B98A;border-radius:50%;color:#D8B98A!important;font-family:'Figtree',Arial,sans-serif;font-weight:700;font-size:13px;letter-spacing:.04em;text-decoration:none!important} #mobile-header .ed-hlang .wpml-ls-native{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} #mobile-header .ed-hlang .wpml-ls-item-fr a::before{content:"FR"} #mobile-header .ed-hlang .wpml-ls-item-en-ca a::before{content:"EN"} #mobile-header .ed-hlang .wpml-ls-item a:focus-visible{outline:2px solid #F3EEE6;outline-offset:2px} @media (max-width:340px){#mobile-header .ed-hactions--m{gap:0}} /* HEADER MOBILE LANG fix b (2026-09-25): hide WPML's "(French)"/"(Anglais)" label inside the round button */ #mobile-header .ed-hlang .wpml-ls-display,#mobile-header .ed-hlang .wpml-ls-flag{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} #mobile-header .ed-hlang .wpml-ls-item a{white-space:nowrap;overflow:hidden} /* AFTERCARE ROW (2026-09-26) */ .ed-aftercare{margin-block:32px} .ed-aftercare .ed-ac-eb{font-size:13px;font-weight:600;color:#75562B;letter-spacing:.02em;margin:0 0 2px} .ed-aftercare .ed-ac-h{font-size:24px;margin:0 0 6px} @media (min-width:768px){.ed-aftercare .ed-ac-h{font-size:28px}} .ed-aftercare .ed-ac-lede{color:#6A6470;margin:0 0 12px} .ed-aftercare ul.products{margin:0 0 8px} @media (max-width:767px){ .ed-aftercare{padding-inline:0!important} .ed-aftercare .wp-block-group__inner-container{padding-inline:0!important;max-width:none!important;width:auto!important} .ed-aftercare div.woocommerce{padding-inline:0!important;max-width:none!important;width:auto!important} .ed-aftercare ul.products{display:flex!important;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-inline:0!important;padding-bottom:8px;margin-inline:0!important;width:auto!important;max-width:none!important;-ms-overflow-style:none;scrollbar-width:none} .ed-aftercare ul.products::-webkit-scrollbar{display:none} .ed-aftercare ul.products li.product{flex:0 0 44%;scroll-snap-align:start;max-width:none;width:auto;position:relative;display:flex;flex-direction:column} .ed-aftercare li.product .woocommerce-loop-product__title{font-size:15px!important;word-break:normal!important;overflow-wrap:normal!important;hyphens:none!important} .ed-aftercare li.product .price{white-space:nowrap!important;font-size:14px} .ed-aftercare li.product img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#FBF9F5;border-radius:12px;border:0;padding:0} .ed-aftercare li.product .product-action-wrap{display:none!important} .ed-aftercare li.product a.woocommerce-LoopProduct-link::after{display:none!important;content:none!important} .ed-aftercare li.product .woocommerce-LoopProduct-link-title{position:static;display:block} .ed-aftercare li.product .woocommerce-LoopProduct-link-title::before{content:"";position:absolute;inset:0;z-index:1} .ed-aftercare li.product .product-details{display:flex;flex-direction:column;flex:1 1 auto} .ed-aftercare li.product .product-details::after{content:"View";display:block;margin-top:auto;min-height:40px;line-height:37px;text-align:center;width:100%;border:1.5px solid #1B1A1C;border-radius:999px;font-size:14px;font-weight:600;box-sizing:border-box;pointer-events:none;position:relative;z-index:0} html[lang^="fr"] .ed-aftercare li.product .product-details::after{content:"Voir"} } @media (min-width:768px){ .ed-aftercare ul.products{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .ed-aftercare ul.products li.product{width:auto;max-width:none} } .ed-aftercare li.product{background:#fff;border:1px solid #E4DDD2;border-radius:16px;padding:10px} .ed-aftercare li.product img{aspect-ratio:1/1;object-fit:contain;background:#FBF9F5;border-radius:12px;width:100%;height:auto} .ed-aftercare ul.products li.product .product-action-wrap .button,.ed-aftercare ul.products li.product .product-action-wrap .added_to_cart{display:none!important} .ed-aftercare li.product .onsale,.ed-aftercare li.product .star-rating{display:none!important} .ed-aftercare a.woocommerce-LoopProduct-link{position:relative;display:block} .ed-aftercare a.woocommerce-LoopProduct-link::after{content:"View";display:inline-block;margin-top:8px;min-height:44px;line-height:41px;text-align:center;width:100%;border:1.5px solid #1B1A1C;border-radius:999px;font-size:15px;font-weight:600;box-sizing:border-box} html[lang^="fr"] .ed-aftercare a.woocommerce-LoopProduct-link::after{content:"Voir"} .ed-aftercare li.product.outofstock .price::after{content:" •Out of stock";font-size:13px;color:#6A6470;font-weight:400} html[lang^="fr"] .ed-aftercare li.product.outofstock .price::after{content:" •En rupture de stock"} .ed-ac-all a{color:#75562B;font-weight:600} /* END AFTERCARE ROW */ /* CHECKOUT MOBILE WIDTH (2026-09-26) - cart/checkout blocks overflowed 8px each side on phones (Kadence -24px alignwide margin vs our 16px mobile padding) */ @media (max-width:767px){ .content-style-boxed .wp-site-blocks .entry-content .wp-block-woocommerce-checkout.alignwide, .content-style-boxed .wp-site-blocks .entry-content .wp-block-woocommerce-cart.alignwide{margin-left:0;margin-right:0} } /* END CHECKOUT MOBILE WIDTH */ /* CHECKOUT TEXT FIX (2026-09-26) - shipping names no longer squeezed by WooCommerce's 50/50 name/price split; Edit/Modifier link on one line; small summary text readable. body-prefixed to beat WooCommerce's later-loaded rules */ body .wc-block-components-radio-control .wc-block-components-radio-control__option .wc-block-components-radio-control__label-group{display:flex;justify-content:space-between;align-items:flex-start;gap:12px} body .wc-block-components-radio-control .wc-block-components-radio-control__option .wc-block-components-radio-control__label-group .wc-block-components-radio-control__label{flex:1 1 auto;min-width:0;word-break:normal;overflow-wrap:break-word} body .wc-block-components-radio-control .wc-block-components-radio-control__option .wc-block-components-radio-control__label-group .wc-block-components-radio-control__secondary-label{flex:0 0 auto;white-space:nowrap;text-align:right} body .wc-block-components-address-card .wc-block-components-address-card__edit{flex:0 0 auto;white-space:nowrap;word-break:normal} body .wc-block-components-totals-shipping .wc-block-components-totals-shipping__via{font-size:13px;line-height:1.4} body .wc-block-components-order-summary .wc-block-components-product-badge,body .wc-block-components-product-badge.wc-block-components-product-backorder-badge{font-size:12.5px} /* END CHECKOUT TEXT FIX */ /* MOBILE REDESIGN 2026-09-26 */ /* MOBILE REDESIGN 2026-09-26 (A) — v2, reworked against approved mocks v6.html / final_v4.html */ /* ---- 1a/1d. Cream band: hero + tabs + "Our treatments" heading + intro + cards, one continuous background, no white break (decision items 1a, 1d/§1.12). Custom HTML/CSS reason: Kadence has no "section background" control that spans across several blocks without wrapping them in one Group, and a Group's own background-colour picker only accepts theme palette swatches, not our exact --ed-oat token, so the colour is set here instead of in the block inspector. */ .ed-cream-band{background:var(--ed-oat)} /* v3 fix: the band was still constrained inside the normal 16px content padding (WordPress has no wrapper "inner-container" div for a plain constrained Group on this WP version, so the v2 rule above never matched anything — dead CSS, left in for reference of what was tried). Break the band out to the true viewport edges, edge-to-edge like the mock, then re-add the same 16px as padding so its own children (hero text, tabs) line up with the rest of the page's content edge. */ .ed-cream-band{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)} /* v2 fix: kill the theme's default ~2em block-gap between the hero, tabs and heading groups (an artifact of wrapping them in one constrained Group) and the theme's default top offset above the content area, which together produced the "extra beige band" + oversized gaps the diff review flagged. Both are scoped to the home pages only. */ body.page-id-253 .content-area,body.page-id-254 .content-area{margin-top:0!important} body.page-id-253 .entry-content-wrap,body.page-id-254 .entry-content-wrap{padding-top:0!important} /* v3 fix: v2's selector for this reset never matched (see note above) — the theme's default 32px margin-bottom on every top-level block (.single-content > * essentially) was still firing, which is what produced the ~80px/~40px gaps the coordinator measured. Reset directly on the band's actual children this time, then set each intentional gap explicitly below. */ .ed-cream-band>*{margin-top:0!important;margin-bottom:0!important} /* ---- 1a. Hero rebuilt as core blocks (Group > Columns > eyebrow/heading/claim/lede + Image, rating duplicated mobile/desktop so it can sit under the photo on mobile and under the lede on desktop — see the two ed-hero2__rating rules below). Reason for CSS instead of block-inspector settings only: font sizes below 13px/22px/etc. and the exact colour tokens (#75562B, #6E4527, --ed-oat) are not in the theme's preset type/colour scale, so a class + CSS rule is used rather than inline block-level styles, keeping the raw sizes in one place a maintainer can find by searching "ed-hero2". */ .ed-hero2{max-width:1200px;margin:0 auto;padding:24px 0 0} .ed-hero2__text{padding:0 18px} /* v3: the band is now full-bleed 100vw (see .ed-cream-band above), so the elements that used to sit inside the page's normal ~16px content padding need it added back explicitly. The hero text/tabs already carry their own 18px (matching the approved mock's own padding value); these three didn't have any of their own, since they used to inherit the page's padding for free. */ .ed-h-cormorant,.ed-h-cormorant+p,.ed-tgrid{padding-left:18px;padding-right:18px;box-sizing:border-box} /* the theme only enqueues the core Columns block's flex CSS when a Columns block already existed on the page, so this rebuild states its own flex layout rather than depend on core block CSS that may not be loaded once the old markup is gone. */ .ed-hero2__row{display:flex;flex-wrap:wrap;align-items:center;gap:0} .ed-hero2__row>.wp-block-column{flex:1 1 0;min-width:0} .ed-hero2__eyebrow{font-family:'Figtree','Helvetica Neue',Arial,sans-serif;letter-spacing:.02em;font-size:13px;font-weight:700;color:#6E4527;margin:0 0 10px} .ed-hero2__h1{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:32px;line-height:1.05;margin:0;color:#2A211B;text-wrap:balance} .ed-hero2__claim{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:500;font-size:24px;line-height:1.1;margin:2px 0 0;color:#6E4527;text-wrap:balance} .ed-hero2__lede{font-family:'Figtree','Helvetica Neue',Arial,sans-serif;font-size:16px;line-height:1.6;color:#5E5147;margin:16px 0 0;max-width:520px} /* rating: mobile copy is a sibling AFTER the columns (so it lands under the photo when the row stacks); desktop copy sits in the text column under the lede. Duplicated on purpose — see DIFF_A.md. */ .ed-hero2__rating{font-family:'Figtree','Helvetica Neue',Arial,sans-serif;font-size:13px;color:#5E5147;margin:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap} .ed-hero2__rating .stars{color:#6E4527} .ed-hero2__rating .rating-num{color:#2A211B;font-weight:700} .ed-hero2__rating--mobile{padding:14px 18px 0;margin-bottom:0!important} .ed-hero2__rating--desktop{display:none;margin-top:14px} /* photo: full-bleed edge-to-edge on mobile (negative margin cancels the text column's own 18px padding), 4:3, cropped, no border-radius, per the approved mock (final_v4.html / v6.html .ed-hero__photo) */ .ed-hero2__img{margin:16px -18px 0} .ed-hero2__img img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:0} .ed-hide-mobile{display:none} @media(max-width:1024px){ .ed-hero2__row{flex-direction:column!important} .ed-hero2__row>.wp-block-column{flex-basis:100%!important;width:100%!important} } @media(min-width:1025px){ .ed-hero2{padding:52px 40px 40px;max-width:1200px} .ed-hero2__text{padding:0} .ed-hero2__row{gap:48px} .ed-hero2__h1{font-size:56px} .ed-hero2__claim{font-size:28px} .ed-hide-mobile{display:block} .ed-hero2__rating--mobile{display:none} .ed-hero2__rating--desktop{display:flex} .ed-hero2__img{margin:0} .ed-hero2__img img{border-radius:12px;aspect-ratio:auto} } /* FR hero type sizes (decision item 11: FR headline 25px/claim 20px one line at 360/390, 22/17 one line at <=340px; EN 32/24 one line at all mobile widths). white-space:nowrap forces the one-line requirement exactly as the approved mock does (v6.html .heroC.frS / .frM use the same technique). */ .ed-hero2__h1,.ed-hero2__claim{white-space:nowrap} html[lang^="fr"] .ed-hero2__h1{font-size:25px} html[lang^="fr"] .ed-hero2__claim{font-size:20px} @media(min-width:1025px){ html[lang^="fr"] .ed-hero2__h1{font-size:48px;white-space:normal} html[lang^="fr"] .ed-hero2__claim{font-size:24px;white-space:normal} html[lang="en"] .ed-hero2__h1,html[lang="en"] .ed-hero2__claim,html[lang="en-CA"] .ed-hero2__h1,html[lang="en-CA"] .ed-hero2__claim{white-space:normal} } @media(max-width:340px){ html[lang^="fr"] .ed-hero2__h1{font-size:22px} html[lang^="fr"] .ed-hero2__claim{font-size:17px} } /* ---- 1b. Concern tabs row (replaces the white "What would you like to improve?" choice card). Full-bleed one row, horizontal scroll, gold underline on the first tab only — matches the approved T1 tabs styling (v6.html .ed-tabs/.ed-tab) reused here for the Home concern links. Custom HTML/CSS reason: no core block gives full-bleed edge-to-edge horizontal scroll with a hidden scrollbar. */ /* v3 fix: the theme's own ".single-content ul{margin:0 0 var(--global-md-spacing)}" rule (class + element selector) has HIGHER specificity than a single ".ed-tabs__scroll" class, so it was winning over the plain "margin:0" below despite loading later — that ~32px leftover UL margin, on top of the ~32px default block-gap already reset above, is what produced the ~80px rating-to-tabs gap and the ~40px tabs-to-"Still not sure" gap the coordinator measured. Both are now pinned with !important, and the two gaps are set to the exact target values (16px, 12px). */ .ed-tabs{margin:16px 0 0!important;padding:0} .ed-tabs__scroll{display:flex;flex-wrap:nowrap;gap:22px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 18px 2px;margin:0!important;list-style:none} .ed-tabs__scroll::-webkit-scrollbar{display:none} .ed-tabs__scroll li{flex:0 0 auto} .ed-tabs__scroll a{display:flex;align-items:center;min-height:44px;padding:0 2px;font-family:'Figtree','Helvetica Neue',Arial,sans-serif;font-size:15px;color:#5E5147;text-decoration:none;white-space:nowrap;border-bottom:2.5px solid transparent} .ed-tabs__scroll li:first-child a{color:#2A211B;font-weight:600;border-bottom-color:#D8B98A} .ed-tabs__scroll a:hover,.ed-tabs__scroll a:focus-visible{color:#2A211B} .ed-tabs__extra{margin:12px 18px 0!important;font-family:'Figtree','Helvetica Neue',Arial,sans-serif;font-size:13.5px;color:#5E5147;text-align:center} .ed-tabs__extra a{color:#75562B;font-weight:600;text-decoration:underline} /* ---- 1d. "Our treatments" / "Nos soins" heading in Cormorant Garamond 500 (decision §1.12). Reason for a CSS class instead of the theme's global Heading font setting: the global setting would change every H2 sitewide (nav labels inside widgets, footer headings, etc.); this class targets only the one heading named in the decision, on Home (and, when T1 lands, Treatments). */ .ed-h-cormorant{font-family:'Cormorant Garamond',Georgia,serif!important;font-weight:500!important;margin-top:28px!important} .ed-h-cormorant+p{margin-top:8px!important} /* ---- 1c. "Shop homecare" link sits next to "See all treatments" under the cards; no CSS needed beyond making sure two buttons in the flex row keep their existing gap — already handled by the core Buttons block's own gap setting, so nothing added here. */ /* ================================================================ */ /* 2. MOBILE HEADER — cream background, solid-gold Book/Réserver, restored bag icon with its badge, new sizes (decision §1.14/15). v2 fix: Book/Réserver is SOLID (decided, not outline); border-bottom reduced to a single 1px hairline in both static and sticky states (the render showed a heavier line because the OLD sticky-state box-shadow/border rule was still winning in one state — both states are now set explicitly here, after the old rules, so there is only one border to see). */ /* Reason for CSS: Kadence's Header Customizer controls set ONE colour per element type sitewide; it cannot make the MOBILE row cream while the desktop row (unchanged, still dark) stays as-is — every rule below is scoped under max-width:1365px (Kadence's own "hamburger header" breakpoint on this site) so the desktop header is untouched. */ @media(max-width:1365px){ /* v3 fix: the "heavy dark double line" under the header was #masthead itself — a base theme rule (#masthead.site-header{background:var(--noct-dark-bg)!important;border-bottom:1px solid rgba(255,255,255,.12)}) that is NOT scoped to desktop only, so the outer header element stayed dark with its own light hairline while only the INNER row got recoloured cream; a 1px height mismatch between the two let a sliver of that dark background + its own border show right next to the new cream border, reading as two lines. Overriding #masthead itself removes the sliver, so only the single intended #D8CCBC line remains. */ #masthead.site-header{background:#F7F2EA!important;border-bottom:0!important} #mobile-header .site-header-row-container-inner{background:#F7F2EA!important;border-bottom:1px solid #D8CCBC!important;box-shadow:none!important} #mobile-header .site-main-header-wrap.item-is-fixed .site-header-row-container-inner{background:#F7F2EA!important;border-bottom:1px solid #D8CCBC!important;box-shadow:none!important} /* Book/Réserver: SOLID gold pill, dark text (decided) */ .ed-hactions--m .ed-hbtn{color:#16151A!important;background:#D8B98A!important;border:0!important} .ed-hactions--m .ed-hcall,.ed-hdir,#mobile-toggle{color:#1B1A1F!important} .ed-hdir:hover{color:#6E4527!important} /* sizes: phone/pin/lang/bag/menu 40px wide x 44px tall, 2px gaps, logo 28px, Book/Réserver text 12.5px with 0 10px padding (decision §1.15) */ .ed-hactions--m{gap:2px!important} .ed-hactions--m .ed-hbtn{height:44px!important;padding:0 10px!important;font-size:12.5px!important;margin-right:0} .ed-hactions--m .ed-hcall{width:40px!important;height:44px!important} .ed-hdir{width:40px!important;height:44px!important} #mobile-toggle{width:40px!important;height:44px!important} #mobile-header .site-branding .custom-logo{max-width:28px;margin-right:6px} /* restore the bag icon (Kadence mobile cart element), badge moved onto the bag itself. The old rule hid this element whenever the cart was empty (:has(.header-cart-is-empty-true)); v2 fix: override it explicitly, since the new design shows the bag icon at all times, empty or not (the badge itself only reads meaningfully when count > 0, same as the approved mock). */ #mobile-header .site-header-item[data-section="kadence_customizer_mobile_cart"]:has(.header-cart-is-empty-true){display:flex!important} #mobile-header .site-header-item[data-section="kadence_customizer_mobile_cart"]{width:40px;height:44px;display:flex;align-items:center;justify-content:center;position:relative} /* v2 fix: the old rule hid the bag SVG itself (kadence-svg-iconset{display:none}) as part of the hamburger-badge hack; restore it so the bag shape is visible again, not just its badge. */ #mobile-header .header-mobile-cart-wrap .kadence-svg-iconset{display:inline-flex!important} #mobile-header .header-mobile-cart-wrap .header-cart-button{position:relative;width:22px;height:22px;color:#1B1A1F!important} #mobile-header .header-mobile-cart-wrap .header-cart-button svg{width:22px;height:22px} #mobile-header .header-mobile-cart-wrap .header-cart-total{position:absolute;top:-6px;right:-8px;min-width:16px;height:16px;padding:0 3px;border-radius:8px;background:#6E4527!important;color:#FFFFFF!important;font-size:10.5px!important;font-weight:700;line-height:16px;margin:0} /* hide the "0" badge when the cart is genuinely empty; shows again the moment an item is added */ #mobile-header .header-cart-is-empty-true~.header-cart-inner-wrap .header-cart-total{display:none} } /* language circle colour -> #6E4527 border/text on cream (decision §1.14) */ @media(max-width:1365px){ #mobile-header .ed-hlang .wpml-ls-item a{border-color:#6E4527!important;color:#6E4527!important} #mobile-header .ed-hlang .wpml-ls-item a:focus-visible{outline-color:#6E4527!important} } @media(max-width:340px){ .ed-hactions--m .ed-hbtn{padding:0 8px!important;font-size:12.5px!important} .ed-hactions--m .ed-hcall{width:38px!important} .ed-hdir{width:38px!important} #mobile-toggle{width:38px!important} #mobile-header .site-header-item[data-section="kadence_customizer_mobile_cart"]{width:38px} } /* END MOBILE REDESIGN 2026-09-26 (A) */ /* MOBILE REDESIGN 2026-09-26 (B) */ /* .ed-tabs is a GENERIC modifier class: put it on any existing "chip list" nav (the treatments-page concern filter here, and 2A's home-page concern tabs) to turn filled pill chips into underlined tabs, without touching the filter/JS logic that already targets .ed-chip / .ed-cf__chip--X. Add class "ed-tabs" to the