/* ========================================================================== Elementor Page 959 — Figma-accurate overrides Source: Figma Dev Mode + /home/zubair/woo-import/home-page/ screenshots Brand colors: J & P Workstyles Identity Style Sheet Purple #6A4972 · Dark Blue #1F2641 · Nude #E2D9CA · Blue Gray #4A94A8 Fonts: Header = Space Grotesk · Body = Inter · Script = Black Signature Loads after post-959.css to win specificity wars with WoodMart + Elementor. ========================================================================== */ /* -------------------------------------------------------------------------- Page shell — consistent 48px gutters, kill WoodMart layout bleed -------------------------------------------------------------------------- */ .elementor-959 { /* Align with header inset (Figma ~53px @ 1920) */ --wds-gutter: 53px; --wds-font-heading: 'Space Grotesk', sans-serif; --wds-font-body: 'Inter', sans-serif; --wd-text-font: 'Inter', sans-serif; --wd-title-font: 'Space Grotesk', sans-serif; --wd-entities-title-font: 'Space Grotesk', sans-serif; --wd-main-bgcolor: #FFFFFF; font-family: var(--wds-font-body, 'Inter', sans-serif); background-color: #FFFFFF !important; } /* Global homepage type roles — beat Elementor + WoodMart Jost */ .elementor-959 h1, .elementor-959 h2, .elementor-959 h3, .elementor-959 h4, .elementor-959 h5, .elementor-959 h6, .elementor-959 .elementor-heading-title { font-family: var(--wds-font-heading, 'Space Grotesk', sans-serif) !important; } .elementor-959 p, .elementor-959 .elementor-widget-text-editor, .elementor-959 .elementor-widget-text-editor p { font-family: var(--wds-font-body, 'Inter', sans-serif) !important; } /* -------------------------------------------------------------------------- Page shell — pure white (beats WoodMart theme rgb(250,250,250)) Intentionally colored sections (hero, why cards, specialty tiles, navy bars, quality strip) keep their own backgrounds below. -------------------------------------------------------------------------- */ body.home, body.home.page, body.home .wd-page-wrapper, body.home .main-page-wrapper, body.home .wd-page-content, body.home .wd-content-area, body.home .site-content, body.home .entry-content, body.home main.wd-content-layout, body.home .whb-header, body.home .whb-general-header, body.home .whb-main-header, body.home .whb-top-bar, body.home .page :is(.wd-page-content, .whb-header) { background-color: #FFFFFF !important; background-image: none !important; } body.home .elementor-959 > .e-con.e-parent:not([data-settings*="background"]), body.home .elementor-959 > .elementor-element.e-con.e-parent { background-color: transparent; } @media (max-width: 1199px) { .elementor-959 { --wds-gutter: clamp(18px, 2.5vw, 48px); } } /* Kill WoodMart negative-gap bleed on Elementor containers */ .elementor-959 .wd-negative-gap { margin-inline: 0 !important; padding-inline: 0 !important; width: 100% !important; max-width: none !important; } .elementor-959 .e-con.e-parent>.e-con-inner { max-width: none; width: 100%; } .elementor-959 .e-con-boxed>.e-con-inner { max-width: none; padding-inline: var(--wds-gutter); } /* Remove WoodMart / theme page title area if present */ .elementor-959 .page-title, .elementor-959 .wd-page-title { display: none !important; } /* Hide empty HTML widgets used only for inline flex hacks */ .elementor-959 .elementor-widget-html:empty, .elementor-959 .elementor-widget-html .elementor-widget-container:empty { display: none !important; } /* -------------------------------------------------------------------------- HERO — element 5dbbe4c Figma: 720px tall and full bleed; inner content uses 48px gutters. -------------------------------------------------------------------------- */ .elementor-959 .elementor-element-5dbbe4c { width: calc(100% - (var(--wds-gutter) * 2)) !important; max-width: none !important; min-height: clamp(520px, 43vw, 720px) !important; margin: 0 auto !important; /* Elementor's compiled CSS contains a localhost absolute URL. A root-relative * asset works from both localhost and the public ngrok preview. */ background-image: url('/wp-content/uploads/homepage/hero-scrub-professional.jpg') !important; background-position: center 50% !important; background-size: cover !important; border-radius: 0 !important; overflow: hidden !important; } .elementor-959 .elementor-element-5dbbe4c>.e-con-inner { min-height: inherit; justify-content: space-between !important; padding: 0 !important; } .elementor-959 .elementor-element-4cda37e { align-self: stretch !important; padding: clamp(36px, 4vw, 78px) var(--wds-gutter) 0 !important; } .elementor-959 .elementor-element-4cda37e>.e-con-inner { align-items: flex-end !important; padding: 0 !important; } .elementor-959 .elementor-element-b5b119a { padding: 0 var(--wds-gutter) clamp(48px, 5.2vw, 84px) !important; } .elementor-959 .elementor-element-b5b119a>.e-con-inner { align-items: center !important; padding: 0 !important; } .elementor-959 .elementor-element-7783312 .elementor-heading-title { font-family: var(--wds-font-heading, 'Space Grotesk', sans-serif) !important; font-size: 48px !important; font-weight: 500 !important; line-height: 1 !important; color: #FFFFFF !important; margin: 0 0 18px !important; } .elementor-959 .elementor-element-7783312, .elementor-959 .elementor-element-155732c { transform: none; } .elementor-959 .elementor-element-7783312 { transform: translateY(68px); } .elementor-959 .elementor-element-155732c { transform: translateY(45px); } .elementor-959 .elementor-element-155732c, .elementor-959 .elementor-element-155732c p { font-family: var(--wds-font-body, 'Inter', sans-serif) !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1 !important; color: #FFFFFF !important; text-align: center !important; max-width: 696px !important; margin: 0 auto 34px !important; } .elementor-959 .elementor-element-2f47802>.e-con-inner { justify-content: center !important; gap: 24px !important; padding: 0 !important; transform: none; } .elementor-959 .elementor-element-962fa11 .elementor-button { background: transparent !important; border: 1px solid #FFFFFF !important; border-radius: 0 !important; min-height: 38px !important; padding: 0 22px !important; font-family: var(--wds-font-heading, 'Space Grotesk', sans-serif) !important; font-size: 14px !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0.02em !important; color: #FFFFFF !important; transform: none; } .elementor-959 .elementor-element-962fa11 .elementor-button:hover { background: #FFFFFF !important; color: #1F2641 !important; } .elementor-959 .elementor-element-8a99311 .elementor-button { background: transparent !important; border: none !important; min-width: 0 !important; padding: 0 !important; font-family: var(--wds-font-heading, 'Space Grotesk', sans-serif) !important; font-size: 14px !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: 0 !important; color: #FFFFFF !important; } .elementor-959 .elementor-element-8a99311 .elementor-button-content-wrapper { gap: 6px !important; } @media (min-width: 1025px) { .elementor-959 .elementor-element-5dbbe4c { position: relative; width: calc(100% - (var(--wds-gutter) * 2)) !important; margin: 0 var(--wds-gutter) !important; min-height: 742px !important; } .elementor-959 .elementor-element-4cda37e, .elementor-959 .elementor-element-4cda37e > .e-con-inner, .elementor-959 .elementor-element-b5b119a, .elementor-959 .elementor-element-b5b119a > .e-con-inner { position: static !important; } .elementor-959 .elementor-element-079eab0 { position: absolute; top: 78.06px; left: 1328.55px; width: 413px; height: 127px; transform: translateY(11.25px); } .elementor-959 .elementor-element-0ad8552 { position: absolute; top: 181.06px; left: 1558.25px; width: 196px; height: 62px; margin: 0 !important; transform: none !important; } .elementor-959 .elementor-element-7783312 { position: absolute; top: 466.78px; left: 556.41px; width: 712px; height: 61px; margin: 0 !important; transform: none !important; } .elementor-959 .elementor-element-7783312 .elementor-heading-title { margin: 0 !important; } .elementor-959 .elementor-element-155732c { position: absolute; top: 554.35px; left: 564.41px; width: 696px; height: 19px; margin: 0 !important; transform: none !important; } .elementor-959 .elementor-element-155732c, .elementor-959 .elementor-element-155732c p { margin: 0 !important; color: #FFFFFF !important; opacity: 1 !important; } .elementor-959 .elementor-element.elementor-element-2f47802.e-con-boxed { position: absolute; top: 625.38px; left: 722.91px; width: 379px !important; max-width: 379px !important; min-width: 379px !important; flex-basis: 379px !important; height: 51.54px; margin: 0 !important; padding: 0 !important; } .elementor-959 .elementor-element-2f47802 > .e-con-inner { gap: 28px !important; } .elementor-959 .elementor-element-962fa11 { width: 169px !important; flex: 0 0 169px !important; } .elementor-959 .elementor-element-962fa11 .elementor-button { box-sizing: border-box; width: 169px; height: 51.54px; min-height: 51.54px !important; padding: 15px 30px !important; font-family: var(--wds-font-body, 'Inter', sans-serif) !important; font-size: 18px !important; font-weight: 400 !important; line-height: 1 !important; letter-spacing: 0 !important; white-space: nowrap; transform: none; } .elementor-959 .elementor-element-8a99311 { width: 184px !important; flex: 0 0 184px !important; } .elementor-959 .elementor-element-8a99311 .elementor-button { box-sizing: border-box; width: 184px; height: 51.54px; min-height: 51.54px !important; padding: 15px 30px !important; font-family: var(--wds-font-body, 'Inter', sans-serif) !important; font-size: 18px !important; font-weight: 400 !important; line-height: 1 !important; letter-spacing: 0 !important; } .elementor-959 .elementor-element-8a99311 .elementor-button-content-wrapper { gap: 10px !important; } } /* Final mobile CTA sizing: this must follow the broader 48px accessibility * fallback above so the intended compact hero controls win in the cascade. */ @media (max-width: 767px) { body.home .elementor-959 .elementor-element-962fa11 { width: 180px !important; margin-inline: auto !important; } body.home .elementor-959 .elementor-element-962fa11 .elementor-button { width: 180px !important; min-height: 40px !important; height: 40px !important; max-height: 40px !important; padding: 11px 21px !important; font-size: 13px !important; background: rgba(31, 38, 65, 0.28) !important; border: 1px solid rgba(255, 255, 255, 0.94) !important; border-radius: 0 !important; color: #FFFFFF !important; text-decoration: none !important; text-shadow: none !important; box-shadow: none !important; -webkit-tap-highlight-color: transparent !important; } body.home .elementor-959 .elementor-element-962fa11 .elementor-button:hover, body.home .elementor-959 .elementor-element-962fa11 .elementor-button:focus { background: rgba(31, 38, 65, 0.42) !important; color: #FFFFFF !important; text-decoration: none !important; } body.home .elementor-959 .elementor-element-962fa11 .elementor-button-content-wrapper, body.home .elementor-959 .elementor-element-962fa11 .elementor-button-text { text-decoration: none !important; line-height: 1 !important; } body.home .elementor-959 .elementor-element-8a99311 .elementor-button { min-height: 32px !important; height: 32px !important; max-height: 32px !important; font-size: 13px !important; } } /* WoodMart adds a desktop content inset to main; remove that empty strip * between the mobile header and the homepage hero. */ @media (max-width: 767px) { body.home main.wd-content-layout.content-layout-wrapper { padding-top: 0 !important; } } /* Mobile hero: one clear primary action and a deliberately quieter secondary * action. Both retain a generous 48px target without looking like duplicates. */ @media (max-width: 767px) { body.home .elementor-959 .elementor-element-7783312 .elementor-heading-title { font-size: clamp(24px, 6.7vw, 28px) !important; line-height: 1.05 !important; } body.home .elementor-959 .elementor-element-155732c, body.home .elementor-959 .elementor-element-155732c p { max-width: 290px !important; font-size: 14px !important; line-height: 1.35 !important; } body.home .elementor-959 .elementor-element-962fa11, body.home .elementor-959 .elementor-element-962fa11 .elementor-button { width: min(100%, 280px) !important; } body.home .elementor-959 .elementor-element-962fa11 { margin-inline: auto !important; } body.home .elementor-959 .elementor-element-962fa11 .elementor-button { min-height: 44px !important; height: 44px !important; max-height: 44px !important; padding-inline: 20px !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1 !important; background: rgba(31, 38, 65, 0.24) !important; border-width: 1px !important; } body.home .elementor-959 .elementor-element-8a99311, body.home .elementor-959 .elementor-element-8a99311 .elementor-button { width: auto !important; } body.home .elementor-959 .elementor-element-8a99311 { margin-inline: auto !important; } body.home .elementor-959 .elementor-element-8a99311 .elementor-button { min-height: 36px !important; height: 36px !important; max-height: 36px !important; padding: 0 12px !important; font-size: 15px !important; font-weight: 500 !important; } } /* -------------------------------------------------------------------------- LOGO STRIP — element 17ac6c8 Figma: title left + logos right; inner row Hug 1782.88 × 73.62 Order: Barco → Cherokee → maevn → IRG · logo optical H ~31px Equal pad above/below the hug row; gutters align with category grid. -------------------------------------------------------------------------- */ .elementor-959 .elementor-element-17ac6c8>.e-con-inner { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; gap: 48px !important; /* Hug content (~74px) + even vertical air — not a forced 160px band */ min-height: 0 !important; height: auto !important; padding: 48px var(--wds-gutter) !important; box-sizing: border-box !important; } .elementor-959 .elementor-element-17ac6c8 { padding-block: 0 !important; padding-inline: 0 !important; width: 100% !important; max-width: none !important; margin: 0 !important; background: #FFFFFF !important; } .elementor-959 .elementor-element-a5f05d6 { flex: 0 1 auto !important; width: auto !important; max-width: 280px !important; } .elementor-959 .elementor-element-a5f05d6 .elementor-heading-title { font-family: var(--wds-font-heading, 'Space Grotesk', sans-serif) !important; font-size: 24px !important; font-weight: 500 !important; line-height: 1.15 !important; /* ~2 lines ≈ 55px inside 73.62 hug */ color: #000000 !important; width: auto !important; max-width: 280px !important; margin: 0 !important; transform: none !important; } .elementor-959 .elementor-element-d6286fb { width: auto !important; flex: 0 1 auto !important; max-width: none !important; transform: none !important; margin-left: auto !important; /* Figma hug row height for the logo cluster */ min-height: 73.62px !important; display: flex !important; align-items: center !important; } .elementor-959 .elementor-element-d6286fb>.e-con-inner { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; gap: 48px !important; /* even logo rhythm, not stretched space-between */ padding: 0 !important; width: auto !important; min-height: 73.62px !important; } .elementor-959 .elementor-element-d6286fb .elementor-widget-image { flex: 0 0 auto !important; min-width: 0 !important; margin: 0 !important; overflow: hidden !important; } /* * DOM ids → assets: * 3a0cbbb barco | 51777af cherokee | a5d9081 irg | 8846ed9 maevn * Figma display order: Barco → Cherokee → maevn → IRG */ .elementor-959 .elementor-element-3a0cbbb { order: 1; width: 150px !important; height: 32px !important; /* Figma logo ~30.97 */ } .elementor-959 .elementor-element-51777af { order: 2; width: 160px !important; height: 32px !important; } .elementor-959 .elementor-element-8846ed9 { order: 3; /* maevn — was wrongly last */ width: 150px !important; height: 32px !important; } .elementor-959 .elementor-element-a5d9081 { order: 4; /* IRG — was wrongly before maevn */ width: 88px !important; height: 32px !important; } .elementor-959 .elementor-element-d6286fb .elementor-widget-image .elementor-widget-container, .elementor-959 .elementor-element-d6286fb .elementor-widget-image .elementor-widget-container a { width: 100% !important; height: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; } .elementor-959 .elementor-element-d6286fb img { display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: contain !important; object-position: center center !important; filter: grayscale(1) !important; opacity: 1 !important; transform: none !important; } /* Barco: square canvas, art centered mid-frame — cover to optical 32px */ .elementor-959 .elementor-element-3a0cbbb img { object-fit: cover !important; object-position: center 50% !important; } /* Cherokee: full-bleed wordmark */ .elementor-959 .elementor-element-51777af img { object-fit: contain !important; filter: grayscale(1) contrast(1.25) !important; } /* maevn: tall canvas with lotus+wordmark mid-frame */ .elementor-959 .elementor-element-8846ed9 img { object-fit: cover !important; object-position: center 48% !important; } /* IRG: dark badge, left-weighted on wide canvas — keep brand black */ .elementor-959 .elementor-element-a5d9081 img { object-fit: cover !important; object-position: left center !important; filter: none !important; } /* -------------------------------------------------------------------------- CATEGORY GRID — element 88ae346 Figma: 4 equal cards, gutter 8px, aspect 441.56 / 588.89 Same side gutters as logo strip (space-between edges). -------------------------------------------------------------------------- */ .elementor-959 .elementor-element-88ae346>.e-con-inner { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; justify-content: space-between !important; align-items: stretch !important; column-gap: 8px !important; row-gap: 8px !important; gap: 8px !important; padding-top: 0 !important; padding-bottom: 48px !important; padding-inline: var(--wds-gutter) !important; box-sizing: border-box !important; } .elementor-959 .elementor-element-88ae346 { margin-top: 0 !important; margin-bottom: 0 !important; } .elementor-959 .elementor-element-82c83ef, .elementor-959 .elementor-element-c7ebc75, .elementor-959 .elementor-element-9e3a664, .elementor-959 .elementor-element-d231719 { --overlay-opacity: 1 !important; --overlay-mix-blend-mode: normal !important; --background-overlay: none !important; min-height: 0 !important; aspect-ratio: 441.56 / 588.89 !important; justify-content: flex-end !important; padding: 0 24px 28px !important; overflow: hidden !important; position: relative !important; isolation: isolate !important; cursor: pointer !important; opacity: 1 !important; filter: none !important; background-color: #111111 !important; background-image: none !important; --wds-hover-ease: cubic-bezier(0.22, 1, 0.36, 1); --wds-hover-dur: 0.7s; } /* Kill Elementor motion-layer bg duplicates */ .elementor-959 .elementor-element-82c83ef > .elementor-motion-effects-container > .elementor-motion-effects-layer, .elementor-959 .elementor-element-c7ebc75 > .elementor-motion-effects-container > .elementor-motion-effects-layer, .elementor-959 .elementor-element-9e3a664 > .elementor-motion-effects-container > .elementor-motion-effects-layer, .elementor-959 .elementor-element-d231719 > .elementor-motion-effects-container > .elementor-motion-effects-layer { background-image: none !important; opacity: 1 !important; } /* * Photo on ::before. * CRITICAL: Elementor sets opacity: var(--overlay-opacity) on .e-con::before (0.5 here). * Without opacity:1 !important the photo washes out and labels look grey. */ .elementor-959 .elementor-element-82c83ef::before, .elementor-959 .elementor-element-c7ebc75::before, .elementor-959 .elementor-element-9e3a664::before, .elementor-959 .elementor-element-d231719::before { content: '' !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; display: block !important; opacity: 1 !important; mix-blend-mode: normal !important; filter: none !important; background-color: #111111 !important; background-position: center center !important; background-size: cover !important; background-repeat: no-repeat !important; transform: scale(1.001); transform-origin: center center; transition: transform var(--wds-hover-dur) var(--wds-hover-ease); will-change: transform; pointer-events: none !important; } .elementor-959 .elementor-element-82c83ef::before { background-image: url('/wp-content/uploads/homepage/category-scrub-top.jpg') !important; } .elementor-959 .elementor-element-c7ebc75::before { background-image: url('/wp-content/uploads/homepage/category-scrub-pant.png') !important; } .elementor-959 .elementor-element-9e3a664::before { background-image: url('/wp-content/uploads/homepage/category-jackets.png') !important; } .elementor-959 .elementor-element-d231719::before { background-image: url('/wp-content/uploads/homepage/category-shoes.png') !important; } /* Full-card hit target → product category pages */ .elementor-959 .wds-cat-card-link { position: absolute !important; inset: 0 !important; z-index: 5 !important; display: block !important; text-indent: -9999px !important; overflow: hidden !important; background: transparent !important; } /* Light editorial veil — same for every card, never changes on hover */ .elementor-959 .elementor-element-82c83ef::after, .elementor-959 .elementor-element-c7ebc75::after, .elementor-959 .elementor-element-9e3a664::after, .elementor-959 .elementor-element-d231719::after { content: '' !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; pointer-events: none !important; opacity: 1 !important; mix-blend-mode: normal !important; background: linear-gradient( 180deg, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.35) 72%, rgba(0, 0, 0, 0.72) 100% ) !important; transition: none !important; } .elementor-959 .elementor-element-82c83ef > .e-con-inner, .elementor-959 .elementor-element-c7ebc75 > .e-con-inner, .elementor-959 .elementor-element-9e3a664 > .e-con-inner, .elementor-959 .elementor-element-d231719 > .e-con-inner { position: relative !important; z-index: 3 !important; justify-content: flex-end !important; padding: 0 !important; height: 100% !important; opacity: 1 !important; filter: none !important; transition: transform var(--wds-hover-dur) var(--wds-hover-ease); } .elementor-959 .elementor-element-d1cdf34, .elementor-959 .elementor-element-43b6be9, .elementor-959 .elementor-element-d1b6d38, .elementor-959 .elementor-element-966e994 { position: relative !important; z-index: 3 !important; opacity: 1 !important; filter: none !important; } .elementor-959 .elementor-element-82c83ef .elementor-heading-title, .elementor-959 .elementor-element-c7ebc75 .elementor-heading-title, .elementor-959 .elementor-element-9e3a664 .elementor-heading-title, .elementor-959 .elementor-element-d231719 .elementor-heading-title, .elementor-959 .elementor-element-d1cdf34 .elementor-heading-title, .elementor-959 .elementor-element-43b6be9 .elementor-heading-title, .elementor-959 .elementor-element-d1b6d38 .elementor-heading-title, .elementor-959 .elementor-element-966e994 .elementor-heading-title { font-family: var(--wds-font-heading, 'Space Grotesk', sans-serif) !important; font-size: 24px !important; font-weight: 500 !important; line-height: 1 !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; opacity: 1 !important; filter: none !important; mix-blend-mode: normal !important; margin: 0 !important; text-align: left !important; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45); transition: transform var(--wds-hover-dur) var(--wds-hover-ease); } /* Hover: ken-burns zoom + 8px label rise. No opacity games. */ @media (hover: hover) and (pointer: fine) { .elementor-959 .elementor-element-82c83ef:hover::before, .elementor-959 .elementor-element-c7ebc75:hover::before, .elementor-959 .elementor-element-9e3a664:hover::before, .elementor-959 .elementor-element-d231719:hover::before, .elementor-959 .elementor-element-82c83ef:focus-within::before, .elementor-959 .elementor-element-c7ebc75:focus-within::before, .elementor-959 .elementor-element-9e3a664:focus-within::before, .elementor-959 .elementor-element-d231719:focus-within::before { transform: scale(1.06); } .elementor-959 .elementor-element-82c83ef:hover > .e-con-inner, .elementor-959 .elementor-element-c7ebc75:hover > .e-con-inner, .elementor-959 .elementor-element-9e3a664:hover > .e-con-inner, .elementor-959 .elementor-element-d231719:hover > .e-con-inner, .elementor-959 .elementor-element-82c83ef:focus-within > .e-con-inner, .elementor-959 .elementor-element-c7ebc75:focus-within > .e-con-inner, .elementor-959 .elementor-element-9e3a664:focus-within > .e-con-inner, .elementor-959 .elementor-element-d231719:focus-within > .e-con-inner { transform: translateY(-8px); } } @media (prefers-reduced-motion: reduce) { .elementor-959 .elementor-element-82c83ef::before, .elementor-959 .elementor-element-c7ebc75::before, .elementor-959 .elementor-element-9e3a664::before, .elementor-959 .elementor-element-d231719::before, .elementor-959 .elementor-element-82c83ef > .e-con-inner, .elementor-959 .elementor-element-c7ebc75 > .e-con-inner, .elementor-959 .elementor-element-9e3a664 > .e-con-inner, .elementor-959 .elementor-element-d231719 > .e-con-inner, .elementor-959 .elementor-element-82c83ef .elementor-heading-title, .elementor-959 .elementor-element-c7ebc75 .elementor-heading-title, .elementor-959 .elementor-element-9e3a664 .elementor-heading-title, .elementor-959 .elementor-element-d231719 .elementor-heading-title { transition: none !important; transform: none !important; } } /* -------------------------------------------------------------------------- WHY PROFESSIONAL LOVE — elements d79913e + 9dc119f -------------------------------------------------------------------------- */ :is(.elementor-959, .elementor-963) .elementor-element-d79913e>.e-con-inner{ display: flex !important; flex-wrap: nowrap !important; align-items: flex-end !important; justify-content: space-between !important; gap: 40px !important; padding: 24px 0 !important; } :is(.elementor-959, .elementor-963) .elementor-element-43971b2{ flex: 0 1 auto !important; max-width: 52% !important; display: block !important; } :is(.elementor-959, .elementor-963) .elementor-element-43971b2>.e-con-inner{ display: flex !important; flex-wrap: wrap !important; align-items: baseline !important; gap: 10px 12px !important; padding: 0 !important; } :is(.elementor-959, .elementor-963) .elementor-element-e289deb{ flex: 0 1 674px !important; max-width: 674px !important; } :is(.elementor-959, .elementor-963) .elementor-element-19877f0 .elementor-heading-title{ font-family: var(--wds-font-heading, 'Space Grotesk', sans-serif) !important; font-size: 32px !important; font-weight: 500 !important; line-height: 1 !important; color: #000000 !important; margin: 0 !important; } :is(.elementor-959, .elementor-963) .elementor-element-945b6b2 .elementor-heading-title{ display: inline !important; font-family: var(--wds-font-script, 'Black Signature', cursive) !important; font-size: 54px !important; font-weight: 400 !important; line-height: 1.1 !important; color: #6A4972 !important; margin: 0 !important; } :is(.elementor-959, .elementor-963) .elementor-element-e289deb, :is(.elementor-959, .elementor-963) .elementor-element-e289deb p{ font-family: var(--wds-font-body, 'Inter', sans-serif) !important; font-size: 24px !important; font-weight: 500 !important; line-height: 1 !important; color: #3A3A3A !important; text-align: right !important; max-width: 674px !important; margin: 0 !important; } :is(.elementor-959, .elementor-963) .elementor-element-9dc119f{ padding-inline: 0 !important; margin-bottom: 41px !important; } :is(.elementor-959, .elementor-963) .elementor-element-e7df9ed{ margin-bottom: 0 !important; } :is(.elementor-959, .elementor-963) .elementor-element-9dc119f>.e-con-inner{ display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 0 !important; padding: 0 !important; } :is(.elementor-959, .elementor-963) .elementor-element-7bb60b6, :is(.elementor-959, .elementor-963) .elementor-element-032bdcf, :is(.elementor-959, .elementor-963) .elementor-element-02e5c3e{ --overlay-opacity: 1 !important; --overlay-mix-blend-mode: normal !important; --background-overlay: none !important; /* Beat Elementor container padding CSS variables */ --padding-top: 0px !important; --padding-right: 28px !important; --padding-bottom: 56px !important; --padding-left: 34px !important; --padding-block-start: 0px !important; --padding-block-end: 56px !important; --padding-inline-start: 34px !important; --padding-inline-end: 28px !important; position: relative !important; min-height: 0 !important; aspect-ratio: 604.28 / 680.19 !important; justify-content: flex-end !important; /* Generous inset so overlay copy never clips the card edge */ padding: 0 28px 56px 34px !important; border-radius: 0 !important; overflow: hidden !important; isolation: isolate !important; opacity: 1 !important; filter: none !important; background-image: none !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; cursor: default; --wds-hover-ease: cubic-bezier(0.22, 1, 0.36, 1); --wds-hover-dur: 0.7s; box-sizing: border-box !important; } :is(.elementor-959, .elementor-963) .elementor-element-7bb60b6{ background-color: #C9C6E8 !important; } :is(.elementor-959, .elementor-963) .elementor-element-032bdcf{ background-color: #5B2A6E !important; } :is(.elementor-959, .elementor-963) .elementor-element-02e5c3e{ background-color: #92BDC9 !important; } /* Image on ::before for smooth editorial ken-burns zoom */ :is(.elementor-959, .elementor-963) .elementor-element-7bb60b6::before, :is(.elementor-959, .elementor-963) .elementor-element-032bdcf::before, :is(.elementor-959, .elementor-963) .elementor-element-02e5c3e::before, :is(.elementor-959, .elementor-963) .elementor-element-7bb60b6:not(.elementor-motion-effects-element-type-background)::before, :is(.elementor-959, .elementor-963) .elementor-element-032bdcf:not(.elementor-motion-effects-element-type-background)::before, :is(.elementor-959, .elementor-963) .elementor-element-02e5c3e:not(.elementor-motion-effects-element-type-background)::before{ content: '' !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; display: block !important; opacity: 1 !important; mix-blend-mode: normal !important; filter: none !important; background-color: transparent !important; background-position: center center !important; background-size: cover !important; background-repeat: no-repeat !important; transform: scale(1.001); transform-origin: center 40%; transition: transform var(--wds-hover-dur) var(--wds-hover-ease); will-change: transform; pointer-events: none !important; } :is(.elementor-959, .elementor-963) .elementor-element-7bb60b6::before{ background-image: url('/wp-content/uploads/2026/07/why-1.png') !important; } :is(.elementor-959, .elementor-963) .elementor-element-032bdcf::before{ background-image: url('/wp-content/uploads/2026/07/why-2.png') !important; } :is(.elementor-959, .elementor-963) .elementor-element-02e5c3e::before{ background-image: url('/wp-content/uploads/2026/07/why-3.png') !important; } :is(.elementor-959, .elementor-963) .elementor-element-7bb60b6 > .elementor-motion-effects-container > .elementor-motion-effects-layer, :is(.elementor-959, .elementor-963) .elementor-element-032bdcf > .elementor-motion-effects-container > .elementor-motion-effects-layer, :is(.elementor-959, .elementor-963) .elementor-element-02e5c3e > .elementor-motion-effects-container > .elementor-motion-effects-layer{ background-image: none !important; } :is(.elementor-959, .elementor-963) .elementor-element-7bb60b6::after, :is(.elementor-959, .elementor-963) .elementor-element-032bdcf::after, :is(.elementor-959, .elementor-963) .elementor-element-02e5c3e::after{ content: ''; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.28) 68%, rgba(0, 0, 0, 0.62) 100% ); pointer-events: none; z-index: 1; opacity: 1 !important; } :is(.elementor-959, .elementor-963) .elementor-element-7bb60b6>.e-con-inner, :is(.elementor-959, .elementor-963) .elementor-element-032bdcf>.e-con-inner, :is(.elementor-959, .elementor-963) .elementor-element-02e5c3e>.e-con-inner{ position: relative !important; z-index: 2 !important; display: flex !important; flex-direction: column !important; justify-content: flex-end !important; align-items: flex-start !important; gap: 0 !important; /* Horizontal inset lives here — Elementor zeros container padding-inline */ --padding-top: 0px !important; --padding-right: 28px !important; --padding-bottom: 0px !important; --padding-left: 34px !important; --padding-block-start: 0px !important; --padding-block-end: 0px !important; --padding-inline-start: 34px !important; --padding-inline-end: 28px !important; padding: 0 28px 0 34px !important; margin: 0 !important; height: 100% !important; width: 100% !important; max-width: none !important; overflow: visible !important; box-sizing: border-box !important; transition: transform var(--wds-hover-dur) var(--wds-hover-ease); } :is(.elementor-959, .elementor-963) .elementor-element-7bb60b6 .elementor-widget, :is(.elementor-959, .elementor-963) .elementor-element-032bdcf .elementor-widget, :is(.elementor-959, .elementor-963) .elementor-element-02e5c3e .elementor-widget, :is(.elementor-959, .elementor-963) .elementor-element-7bb60b6 .elementor-widget-container, :is(.elementor-959, .elementor-963) .elementor-element-032bdcf .elementor-widget-container, :is(.elementor-959, .elementor-963) .elementor-element-02e5c3e .elementor-widget-container{ width: 100% !important; max-width: none !important; overflow: visible !important; margin: 0 !important; } :is(.elementor-959, .elementor-963) .elementor-element-8541e01 .elementor-heading-title, :is(.elementor-959, .elementor-963) .elementor-element-00f80d1 .elementor-heading-title, :is(.elementor-959, .elementor-963) .elementor-element-ac33a36 .elementor-heading-title{ font-family: var(--wds-font-heading, 'Space Grotesk', sans-serif) !important; font-size: clamp(22px, 1.55vw, 28px) !important; font-weight: 600 !important; line-height: 1.15 !important; letter-spacing: -0.015em !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; margin: 0 0 10px !important; padding: 0 !important; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.28); transition: transform var(--wds-hover-dur) var(--wds-hover-ease), letter-spacing var(--wds-hover-dur) var(--wds-hover-ease); } :is(.elementor-959, .elementor-963) .elementor-element-a964c71, :is(.elementor-959, .elementor-963) .elementor-element-a964c71 p, :is(.elementor-959, .elementor-963) .elementor-element-5f3084f, :is(.elementor-959, .elementor-963) .elementor-element-5f3084f p, :is(.elementor-959, .elementor-963) .elementor-element-60bdc75, :is(.elementor-959, .elementor-963) .elementor-element-60bdc75 p{ font-family: var(--wds-font-body, 'Inter', sans-serif) !important; font-size: clamp(14px, 1.05vw, 16px) !important; font-weight: 400 !important; line-height: 1.45 !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; opacity: 1 !important; margin: 0 !important; padding: 0 !important; max-width: 22.5em !important; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.22); transition: transform var(--wds-hover-dur) var(--wds-hover-ease); } @media (hover: hover) and (pointer: fine) { :is(.elementor-959, .elementor-963) .elementor-element-7bb60b6:hover::before, :is(.elementor-959, .elementor-963) .elementor-element-032bdcf:hover::before, :is(.elementor-959, .elementor-963) .elementor-element-02e5c3e:hover::before{ transform: scale(1.055); } :is(.elementor-959, .elementor-963) .elementor-element-7bb60b6:hover > .e-con-inner, :is(.elementor-959, .elementor-963) .elementor-element-032bdcf:hover > .e-con-inner, :is(.elementor-959, .elementor-963) .elementor-element-02e5c3e:hover > .e-con-inner{ transform: translateY(-5px); } :is(.elementor-959, .elementor-963) .elementor-element-9dc119f .elementor-heading-title, :is(.elementor-959, .elementor-963) .elementor-element-9dc119f:hover .elementor-heading-title, :is(.elementor-959, .elementor-963) .elementor-element-9dc119f .elementor-widget-text-editor, :is(.elementor-959, .elementor-963) .elementor-element-9dc119f .elementor-widget-text-editor p{ color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; opacity: 1 !important; } } @media (prefers-reduced-motion: reduce) { :is(.elementor-959, .elementor-963) .elementor-element-7bb60b6::before, :is(.elementor-959, .elementor-963) .elementor-element-032bdcf::before, :is(.elementor-959, .elementor-963) .elementor-element-02e5c3e::before, :is(.elementor-959, .elementor-963) .elementor-element-7bb60b6::after, :is(.elementor-959, .elementor-963) .elementor-element-032bdcf::after, :is(.elementor-959, .elementor-963) .elementor-element-02e5c3e::after, :is(.elementor-959, .elementor-963) .elementor-element-7bb60b6 > .e-con-inner, :is(.elementor-959, .elementor-963) .elementor-element-032bdcf > .e-con-inner, :is(.elementor-959, .elementor-963) .elementor-element-02e5c3e > .e-con-inner, :is(.elementor-959, .elementor-963) .elementor-element-8541e01 .elementor-heading-title, :is(.elementor-959, .elementor-963) .elementor-element-00f80d1 .elementor-heading-title, :is(.elementor-959, .elementor-963) .elementor-element-ac33a36 .elementor-heading-title, :is(.elementor-959, .elementor-963) .elementor-element-a964c71, :is(.elementor-959, .elementor-963) .elementor-element-a964c71 p, :is(.elementor-959, .elementor-963) .elementor-element-5f3084f, :is(.elementor-959, .elementor-963) .elementor-element-5f3084f p, :is(.elementor-959, .elementor-963) .elementor-element-60bdc75, :is(.elementor-959, .elementor-963) .elementor-element-60bdc75 p{ transition: none !important; } } /* Quality strip — Figma Rectangle 14: 1812.85 × 85.11, #EFEFFF, Inter 18/400 */ .elementor-959 .elementor-element-20a1500 { background-color: #EFEFFF !important; width: calc(100% - (var(--wds-gutter, 48px) * 2)) !important; max-width: none !important; margin-inline: var(--wds-gutter, 48px) !important; min-height: 85px !important; height: 85px !important; display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; } .elementor-959 .elementor-element-20a1500 > .e-con-inner { padding: 16px 8px !important; max-width: none !important; width: 100% !important; height: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; } .elementor-959 .elementor-element-5dcd9de, .elementor-959 .elementor-element-5dcd9de p { font-family: var(--wds-font-body, 'Inter', sans-serif) !important; font-size: 18px !important; font-weight: 400 !important; line-height: 1 !important; color: #2F3131 !important; text-align: center !important; margin: 0 !important; letter-spacing: 0 !important; } /* -------------------------------------------------------------------------- FIND YOUR STYLE — rebuilt section fysroot1 Figma: Style script overlaps “your”; link right; gap 30 -------------------------------------------------------------------------- */ .elementor-959 .elementor-element-fysroot1 { margin-top: 8px !important; width: 100% !important; max-width: none !important; } /* * Figma 2×2: * [ Find your Style ] [ Shop Scrubs by Fit & Color ] * [ Shop For Women|Men ] [ color swatches ] * Link aligns to bottom of title row so it sits tight above swatches * (not floating at the top with a large gap). */ .elementor-959 .elementor-element-fysroot1 > .e-con-inner { display: grid !important; grid-template-columns: 1fr auto !important; grid-template-areas: 'title link' 'shop swatches' 'grid grid' !important; column-gap: clamp(24px, 4vw, 64px) !important; row-gap: 10px !important; align-items: start !important; padding: 48px var(--wds-gutter, 48px) 56px !important; width: 100% !important; max-width: none !important; box-sizing: border-box !important; } /* Flatten hdr/filt wrappers so children join the root grid */ .elementor-959 .elementor-element-fyshdr01, .elementor-959 .elementor-element-fysfilt1 { display: contents !important; width: auto !important; max-width: none !important; margin: 0 !important; } .elementor-959 .elementor-element-fyshdr01 > .e-con-inner, .elementor-959 .elementor-element-fysfilt1 > .e-con-inner { display: contents !important; padding: 0 !important; } .elementor-959 .elementor-element-fysgrid1 { grid-area: grid !important; width: 100% !important; max-width: none !important; margin-inline: 0 !important; margin-top: 20px !important; } .elementor-959 .elementor-element-fyshdr01.e-con-boxed > .e-con-inner, .elementor-959 .elementor-element-fysfilt1.e-con-boxed > .e-con-inner, .elementor-959 .elementor-element-fysgrid1.e-con-boxed > .e-con-inner, .elementor-959 .elementor-element-fystitle.e-con-boxed > .e-con-inner, .elementor-959 .elementor-element-fysshop1.e-con-boxed > .e-con-inner { padding-inline: 0 !important; } .elementor-959 .elementor-element-fystitle { grid-area: title !important; position: relative !important; flex: none !important; min-width: 260px !important; min-height: 92px !important; padding-bottom: 0 !important; justify-self: start !important; } .elementor-959 .elementor-element-fystitle > .e-con-inner { position: relative !important; padding: 0 !important; display: block !important; } .elementor-959 .elementor-element-fysfind1 { position: relative !important; z-index: 2 !important; margin: 0 !important; } .elementor-959 .elementor-element-fysfind1 .elementor-heading-title { font-family: var(--wds-font-heading, 'Space Grotesk', sans-serif) !important; font-size: 32px !important; font-weight: 500 !important; line-height: 1 !important; color: #000000 !important; margin: 0 !important; } .elementor-959 .elementor-element-fyssty01 { position: absolute !important; left: 0 !important; top: 18px !important; z-index: 1 !important; margin: 0 !important; width: auto !important; pointer-events: none !important; } .elementor-959 .elementor-element-fyssty01 .elementor-heading-title { font-family: var(--wds-font-script, 'Black Signature', cursive) !important; font-size: 68px !important; font-weight: 400 !important; line-height: 0.9 !important; color: #6A4972 !important; margin: 0 !important; transform: none; display: block !important; white-space: nowrap !important; } /* Right column header — Figma: mid title-row, tight above swatches (not glued to bottom) */ .elementor-959 .elementor-element-fyslink1 { grid-area: link !important; justify-self: end !important; align-self: end !important; padding: 0 !important; margin: 0 !important; width: auto !important; /* Nudge up from row-bottom — matches Figma mid alignment with "Style" */ transform: translateY(-18px) !important; } .elementor-959 .elementor-element-fyslink1, .elementor-959 .elementor-element-fyslink1 p { font-family: var(--wds-font-heading, 'Space Grotesk', sans-serif) !important; font-size: 24px !important; font-weight: 500 !important; line-height: 1 !important; color: #454747 !important; text-align: right !important; white-space: nowrap !important; } .elementor-959 .elementor-element-fyslink1 p { margin: 0 !important; } .elementor-959 .elementor-element-fyslab01, .elementor-959 .elementor-element-fyslab01 p, .elementor-959 .elementor-element-fyslab01 .elementor-widget-container { font-family: var(--wds-font-body, 'Inter', sans-serif) !important; font-size: 18px !important; font-weight: 500 !important; color: #1F2641 !important; background: transparent !important; margin: 0 !important; padding: 0 !important; white-space: nowrap !important; border-radius: 0 !important; } .elementor-959 .elementor-element-fysshop1 > .e-con-inner, .elementor-959 .elementor-element-fysshop1 { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 16px !important; padding: 0 !important; background: transparent !important; width: auto !important; flex: 0 0 auto !important; grid-area: shop !important; justify-self: start !important; align-self: center !important; } /* Figma: sharp choras Women/Men — NOT pill toggle */ .elementor-959 .elementor-element-fyswom01 .elementor-button, .elementor-959 .elementor-element-fysmen01 .elementor-button, .elementor-959 .elementor-element-fyswom01 a.elementor-button, .elementor-959 .elementor-element-fysmen01 a.elementor-button { --btn-brd-radius: 0 !important; min-width: 120px !important; width: auto !important; height: 44px !important; min-height: 44px !important; padding: 0 28px !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; border-bottom-left-radius: 0 !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-family: 'Inter', sans-serif !important; font-size: 16px !important; font-weight: 500 !important; line-height: 1 !important; cursor: pointer !important; } .elementor-959 .elementor-element-fyswom01 .elementor-button { background: #6A4972 !important; color: #FFFFFF !important; } .elementor-959 .elementor-element-fysmen01 .elementor-button { background: #EFEFFF !important; color: #1F2641 !important; } /* Gender toggle active swap (JS adds .is-men on fystogl1) */ .elementor-959 .elementor-element-fystogl1.is-men .elementor-element-fyswom01 .elementor-button { background: #EFEFFF !important; color: #1F2641 !important; } .elementor-959 .elementor-element-fystogl1.is-men .elementor-element-fysmen01 .elementor-button { background: #6A4972 !important; color: #FFFFFF !important; } /* Kill pill chrome around the pair — Figma = two adjacent rectangles */ .elementor-959 .elementor-element-fystogl1, .elementor-959 .elementor-element-fystogl1 > .e-con-inner { background: transparent !important; background-color: transparent !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; gap: 0 !important; width: auto !important; flex: 0 0 auto !important; --padding-top: 0px !important; --padding-bottom: 0px !important; --padding-left: 0px !important; --padding-right: 0px !important; } .elementor-959 .elementor-element-fystogl1 > .e-con-inner, .elementor-959 .elementor-element-fystogl1 { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; } .elementor-959 .elementor-element-fyswom01, .elementor-959 .elementor-element-fysmen01 { width: auto !important; margin: 0 !important; } /* Swatches directly under “Shop Scrubs by Fit & Color”, right-aligned */ .elementor-959 .elementor-element-fyswat01 { grid-area: swatches !important; justify-self: end !important; align-self: center !important; margin: 0 !important; padding: 0 !important; flex: none !important; width: auto !important; } .elementor-959 .elementor-element-fysgrid1 { position: relative !important; overflow: visible !important; display: block !important; } .elementor-959 .elementor-element-fysgrid1 > .e-con-inner, .elementor-959 .elementor-element-fysgrid1 > .wds-fys-track { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 30px !important; /* Figma Frame 7 gap */ padding: 0 !important; overflow-x: auto !important; scrollbar-width: none; } .elementor-959 .elementor-element-fysgrid1 > .e-con-inner::-webkit-scrollbar, .elementor-959 .elementor-element-fysgrid1 > .wds-fys-track::-webkit-scrollbar { display: none; } .elementor-959 .elementor-element-fyscrd01, .elementor-959 .elementor-element-fyscrd02, .elementor-959 .elementor-element-fyscrd03, .elementor-959 .elementor-element-fyscrd04, .elementor-959 .elementor-element-fyscrd05 { flex: 0 0 calc((100% - 90px) / 4) !important; /* 3 × 30px gaps */ min-width: 0 !important; width: auto !important; max-width: none !important; } .elementor-959 .elementor-element-fyscrd01 > .e-con-inner, .elementor-959 .elementor-element-fyscrd02 > .e-con-inner, .elementor-959 .elementor-element-fyscrd03 > .e-con-inner, .elementor-959 .elementor-element-fyscrd04 > .e-con-inner, .elementor-959 .elementor-element-fyscrd05 > .e-con-inner { display: flex !important; flex-direction: column !important; gap: 12px !important; padding: 0 !important; } .elementor-959 .elementor-element-fysttl01 .elementor-heading-title, .elementor-959 .elementor-element-fysttl02 .elementor-heading-title, .elementor-959 .elementor-element-fysttl03 .elementor-heading-title, .elementor-959 .elementor-element-fysttl04 .elementor-heading-title, .elementor-959 .elementor-element-fysttl05 .elementor-heading-title { font-family: var(--wds-font-body, 'Inter', sans-serif) !important; font-size: 18px !important; font-weight: 400 !important; line-height: 1.25 !important; color: #1F2641 !important; margin: 0 !important; } .elementor-959 .elementor-element-fysprc01, .elementor-959 .elementor-element-fysprc01 p, .elementor-959 .elementor-element-fysprc02, .elementor-959 .elementor-element-fysprc02 p, .elementor-959 .elementor-element-fysprc03, .elementor-959 .elementor-element-fysprc03 p, .elementor-959 .elementor-element-fysprc04, .elementor-959 .elementor-element-fysprc04 p, .elementor-959 .elementor-element-fysprc05, .elementor-959 .elementor-element-fysprc05 p { font-family: var(--wds-font-body, 'Inter', sans-serif) !important; color: #6B6B6B !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1 !important; margin: 0 !important; } .elementor-959 .elementor-element-fysimgw1, .elementor-959 .elementor-element-fysimgw2, .elementor-959 .elementor-element-fysimgw3, .elementor-959 .elementor-element-fysimgw4, .elementor-959 .elementor-element-fysimgw5 { aspect-ratio: 441.56 / 502.32 !important; min-height: 0 !important; overflow: hidden !important; background: #FFFFFF !important; box-sizing: border-box !important; box-shadow: inset 0 0 0 0 transparent; transition: box-shadow 0.15s ease; } .elementor-959 .elementor-element-fysimg01 img, .elementor-959 .elementor-element-fysimg02 img, .elementor-959 .elementor-element-fysimg03 img, .elementor-959 .elementor-element-fysimg04 img, .elementor-959 .elementor-element-fysimg05 img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center top !important; mix-blend-mode: multiply; } /* Find Your Style — color filters (Figma squares, not circles) Idle 35.3 · Active hug × 53.82 · pad 2.73/27.31 · border 1.37 · gap 17.75 Fill comes from --wds-swatch (pa_color term meta via JS) */ .elementor-959 .wds-fys-swatches { display: flex; align-items: center; gap: 17.75px; padding: 0; min-height: 53.82px; } .elementor-959 .wds-fys-swatch { --wds-swatch: #000000; --wds-swatch-hover: #222222; --wds-swatch-border: #000000; appearance: none; -webkit-appearance: none; border: 1.37px solid transparent; padding: 0; margin: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 35.3px; height: 35.3px; flex: 0 0 35.3px; background-color: var(--wds-swatch); border-radius: 0; box-sizing: border-box; overflow: hidden; position: relative; box-shadow: none; transform: none; transition: background-color 0.18s ease, border-color 0.18s ease, width 0.18s ease, min-width 0.18s ease, height 0.18s ease, flex-basis 0.18s ease, padding 0.18s ease; } .elementor-959 .wds-fys-swatch:focus-visible { outline: 2px solid var(--wds-color-primary, #6A4972); outline-offset: 3px; } @media (hover: hover) { .elementor-959 .wds-fys-swatch:hover:not(:disabled) { background-color: var(--wds-swatch-hover); } } .elementor-959 .wds-fys-swatch__label { display: none; font-family: var(--wds-font-heading, 'Space Grotesk', sans-serif); font-size: 20px; font-weight: 500; line-height: 1; letter-spacing: 0; color: #FFFFFF; white-space: nowrap; pointer-events: none; } .elementor-959 .wds-fys-swatch.is-active { width: auto; min-width: 103.62px; height: 53.82px; flex: 0 0 auto; padding: 2.73px 27.31px; border-radius: 0; border-color: var(--wds-swatch-border); background-color: var(--wds-swatch); } .elementor-959 .wds-fys-swatch.is-active .wds-fys-swatch__label { display: inline; } /* Fallbacks before JS paints term HEX */ .elementor-959 .wds-fys-swatch--navy { --wds-swatch: #203F74; --wds-swatch-hover: #1A335E; --wds-swatch-border: #1E2353; } .elementor-959 .wds-fys-swatch--black { --wds-swatch: #000000; --wds-swatch-hover: #383838; --wds-swatch-border: #000000; } .elementor-959 .wds-fys-swatch--olive { --wds-swatch: #5D5946; --wds-swatch-hover: #4C4839; --wds-swatch-border: #4A4638; } .elementor-959 .wds-fys-swatch--blue { --wds-swatch: #305DDD; --wds-swatch-hover: #274CB5; --wds-swatch-border: #2448B8; } /* AJAX product cards — same footprint as Elementor fyscrd* */ .elementor-959 .wds-fys-card { flex: 0 0 calc((100% - 90px) / 4) !important; /* 3 × 30px gaps */ min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 12px !important; box-sizing: border-box !important; } .elementor-959 .wds-fys-card__media { display: block !important; aspect-ratio: 441.56 / 502.32 !important; overflow: hidden !important; background: #FFFFFF !important; text-decoration: none !important; box-sizing: border-box !important; /* Figma hover stroke sits on the image frame only (not title/price). Inset shadow stays visible inside overflow:auto carousel tracks. */ box-shadow: inset 0 0 0 0 transparent; transition: box-shadow 0.15s ease; } .elementor-959 .wds-fys-card:hover .wds-fys-card__media, .elementor-959 .wds-fys-card:focus-within .wds-fys-card__media { box-shadow: inset 0 0 0 1px #6A4972; } .elementor-959 .wds-fys-card__img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center top !important; mix-blend-mode: multiply; } .elementor-959 .wds-fys-card__title, .elementor-959 .wds-fys-card__title a { font-family: var(--wds-font-body, 'Inter', sans-serif) !important; font-size: 16px !important; font-weight: 500 !important; line-height: 1.25 !important; color: #000000 !important; margin: 0 !important; text-decoration: none !important; } .elementor-959 .wds-fys-card__price, .elementor-959 .wds-fys-card__price .amount, .elementor-959 .wds-fys-card__price bdi { font-family: var(--wds-font-body, 'Inter', sans-serif) !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.2 !important; color: #000000 !important; margin: 0 !important; } .elementor-959 .elementor-element-fysgrid1 > .e-con-inner.is-loading, .elementor-959 .elementor-element-fysgrid1 > .wds-fys-track.is-loading, .elementor-959 .elementor-element-fysgrid1.is-loading { opacity: 0.55; pointer-events: none; transition: opacity 0.15s ease; } .elementor-959 .wds-fys-empty { font-family: Inter, sans-serif; font-size: 14px; color: #6B6B6B; padding: 24px 8px; margin: 0; } .elementor-959 .elementor-element-fyscrd01:hover .elementor-element-fysimgw1, .elementor-959 .elementor-element-fyscrd02:hover .elementor-element-fysimgw2, .elementor-959 .elementor-element-fyscrd03:hover .elementor-element-fysimgw3, .elementor-959 .elementor-element-fyscrd04:hover .elementor-element-fysimgw4, .elementor-959 .elementor-element-fyscrd05:hover .elementor-element-fysimgw5, .elementor-959 .elementor-element-fyscrd01:focus-within .elementor-element-fysimgw1, .elementor-959 .elementor-element-fyscrd02:focus-within .elementor-element-fysimgw2, .elementor-959 .elementor-element-fyscrd03:focus-within .elementor-element-fysimgw3, .elementor-959 .elementor-element-fyscrd04:focus-within .elementor-element-fysimgw4, .elementor-959 .elementor-element-fyscrd05:focus-within .elementor-element-fysimgw5 { box-shadow: inset 0 0 0 1px #6A4972; } /* Elementor arrow widget stays in the scroll track — hide it. Prev/next are mounted on fysgrid1 so they stay sticky on the viewport. */ .elementor-959 .elementor-element-fysarr01 { position: absolute !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; pointer-events: none !important; opacity: 0 !important; visibility: hidden !important; z-index: -1 !important; } .elementor-959 .wds-fys-carousel-nav { position: absolute !important; top: 230px; z-index: 6; display: grid; width: 36px; height: 36px; place-items: center; padding: 0; border: none; border-radius: 2px; background: #FFFFFF; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15); color: #9CA3AF; font-size: 20px; line-height: 1; cursor: pointer; pointer-events: auto; -webkit-appearance: none; appearance: none; } .elementor-959 .wds-fys-carousel-prev { left: 8px; } .elementor-959 .wds-fys-carousel-next { right: 8px; } .elementor-959 .wds-fys-carousel-nav:hover:not(:disabled) { color: #1F2641; } .elementor-959 .wds-fys-carousel-nav:disabled, .elementor-959 .wds-fys-carousel-nav[aria-disabled='true'] { opacity: 0.35; cursor: default; pointer-events: none; } .elementor-959 .wds-fys-carousel-nav:focus { outline: none; } .elementor-959 .wds-fys-carousel-nav:focus-visible { outline: 2px solid #6A4972; outline-offset: 2px; } .elementor-959 .wds-fys-carousel-nav[hidden] { display: none !important; } @media (max-width: 1024px) { .elementor-959 .wds-fys-carousel-nav { top: 180px; } } @media (max-width: 767px) { .elementor-959 .wds-fys-carousel-nav { top: 140px; width: 32px; height: 32px; font-size: 18px; } .elementor-959 .wds-fys-carousel-prev { left: 4px; } .elementor-959 .wds-fys-carousel-next { right: 4px; } } /* -------------------------------------------------------------------------- BIGGER TEAM BANNER — element 9b70bc3 Figma Frame 38: 1834 × 385, bg #1F2641, headline 32px Space Grotesk -------------------------------------------------------------------------- */ .elementor-959 .elementor-element-9b70bc3 { margin-inline: var(--wds-gutter) !important; width: calc(100% - (var(--wds-gutter) * 2)) !important; max-width: none !important; background-color: #1F2641 !important; overflow: hidden !important; } .elementor-959 .elementor-element-9b70bc3 > .e-con-inner { display: grid !important; grid-template-columns: 1.05fr 0.95fr !important; padding: 0 !important; gap: 0 !important; min-height: 385px !important; height: 385px !important; } .elementor-959 .elementor-element-565c25d { background: #1F2641 !important; } .elementor-959 .elementor-element-565c25d > .e-con-inner { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: flex-start !important; gap: 16px !important; padding: 48px 64px 48px 56px !important; height: 100% !important; } .elementor-959 .elementor-element-039ec87 .elementor-heading-title { font-family: var(--wds-font-heading, 'Space Grotesk', sans-serif) !important; font-size: 32px !important; font-weight: 500 !important; line-height: 1 !important; letter-spacing: 0 !important; color: #FFFFFF !important; margin: 0 !important; width: 387px !important; max-width: 100% !important; } .elementor-959 .elementor-element-bc6859c, .elementor-959 .elementor-element-bc6859c p { font-family: var(--wds-font-body, 'Inter', sans-serif) !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.35 !important; color: #FFFFFF !important; margin: 0 !important; max-width: 420px !important; } .elementor-959 .elementor-element-42d25f8 { margin-top: 8px !important; } .elementor-959 .elementor-element-42d25f8 .elementor-button { background-color: #4A94A8 !important; border: none !important; border-radius: 0 !important; min-height: 51px !important; height: auto !important; padding: 16px 24px !important; font-family: var(--wds-font-body, 'Inter', sans-serif) !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1 !important; text-transform: none !important; letter-spacing: 0 !important; color: #FFFFFF !important; box-shadow: none !important; text-decoration: none !important; --wd-link-decor: none !important; --wd-link-decor-style: none !important; --wd-link-decor-hover: none !important; } .elementor-959 .elementor-element-42d25f8 .elementor-button:hover, .elementor-959 .elementor-element-42d25f8 .elementor-button:focus, .elementor-959 .elementor-element-42d25f8 .elementor-button:active, .elementor-959 .elementor-element-42d25f8 .elementor-button-text, .elementor-959 .elementor-element-42d25f8 a, .elementor-959 .elementor-element-42d25f8 a:hover, .elementor-959 .elementor-element-42d25f8 a:focus, .elementor-959 .elementor-element-42d25f8 a:visited { text-decoration: none !important; border-bottom: none !important; box-shadow: none !important; --wd-link-decor: none !important; --wd-link-decor-style: none !important; --wd-link-decor-hover: none !important; } .elementor-959 .elementor-element-fd2330a { overflow: hidden !important; position: relative !important; height: 100% !important; } .elementor-959 .elementor-element-fd2330a::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 42%; background: linear-gradient(90deg, #1F2641 0%, rgba(31, 38, 65, 0.55) 45%, rgba(31, 38, 65, 0) 100%); z-index: 1; pointer-events: none; } .elementor-959 .elementor-element-fd2330a > .e-con-inner { padding: 0 !important; height: 100% !important; } .elementor-959 .elementor-element-a1c7813, .elementor-959 .elementor-element-a1c7813 .elementor-widget-container, .elementor-959 .elementor-element-a1c7813 img { width: 100% !important; height: 100% !important; min-height: 385px !important; object-fit: cover !important; object-position: center center !important; display: block !important; } /* -------------------------------------------------------------------------- FIND YOUR FIT BY ROLE — element 1cb74dd Figma: 7 flush 1:1 squares · icon+label bottom-left · Space Grotesk 24 WoodMart parent — loaded via mu-plugin homepage-assets -------------------------------------------------------------------------- */ .elementor-959 .elementor-element-1cb74dd { margin-top: 48px !important; } .elementor-959 .elementor-element-86d2323 > .e-con-inner { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 9px !important; padding: 0 0 24px !important; } .elementor-959 .elementor-element-4d418a1 .elementor-heading-title { font-family: var(--wds-font-heading, 'Space Grotesk', sans-serif) !important; font-size: 32px !important; font-weight: 500 !important; line-height: 1 !important; color: #000000 !important; margin: 0 !important; } .elementor-959 .elementor-element-380dec0, .elementor-959 .elementor-element-380dec0 p { font-family: var(--wds-font-heading, 'Space Grotesk', sans-serif) !important; font-size: 24px !important; font-weight: 500 !important; line-height: 1 !important; color: #7E7C7C !important; margin: 0 !important; } /* Row: kill Elementor 8px gap — Figma tiles are flush */ .elementor-959 .elementor-element-d314683 { --gap: 0px !important; --row-gap: 0px !important; --column-gap: 0px !important; gap: 0 !important; row-gap: 0 !important; column-gap: 0 !important; } .elementor-959 .elementor-element-d314683 > .e-con-inner { display: grid !important; grid-template-columns: repeat(7, minmax(0, 1fr)) !important; gap: 0 !important; row-gap: 0 !important; column-gap: 0 !important; --gap: 0px !important; --row-gap: 0px !important; --column-gap: 0px !important; align-items: stretch !important; padding: 0 0 62px !important; width: 100% !important; } .elementor-959 .elementor-element-79b6574, .elementor-959 .elementor-element-5624e8c, .elementor-959 .elementor-element-edc261c, .elementor-959 .elementor-element-888c324, .elementor-959 .elementor-element-39d1548, .elementor-959 .elementor-element-369d3fd, .elementor-959 .elementor-element-ce7f9c3 { /* True squares — width from grid, height from aspect-ratio */ aspect-ratio: 1 / 1 !important; width: 100% !important; height: auto !important; min-height: 0 !important; --min-height: 0px !important; --padding-top: 0px !important; --padding-bottom: 0px !important; --padding-left: 0px !important; --padding-right: 0px !important; --gap: 0px !important; flex: none !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border: none !important; border-radius: 0 !important; overflow: hidden !important; box-shadow: none !important; align-self: stretch !important; } /* Icon + label as one cluster, bottom-left (Figma) — not space-between */ .elementor-959 .elementor-element-79b6574 > .e-con-inner, .elementor-959 .elementor-element-5624e8c > .e-con-inner, .elementor-959 .elementor-element-edc261c > .e-con-inner, .elementor-959 .elementor-element-888c324 > .e-con-inner, .elementor-959 .elementor-element-39d1548 > .e-con-inner, .elementor-959 .elementor-element-369d3fd > .e-con-inner, .elementor-959 .elementor-element-ce7f9c3 > .e-con-inner { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-end !important; gap: 16px !important; row-gap: 16px !important; column-gap: 16px !important; padding: 28px 24px !important; height: 100% !important; width: 100% !important; box-sizing: border-box !important; } .elementor-959 .elementor-element-79b6574 > .e-con-inner > .elementor-element, .elementor-959 .elementor-element-5624e8c > .e-con-inner > .elementor-element, .elementor-959 .elementor-element-edc261c > .e-con-inner > .elementor-element, .elementor-959 .elementor-element-888c324 > .e-con-inner > .elementor-element, .elementor-959 .elementor-element-39d1548 > .e-con-inner > .elementor-element, .elementor-959 .elementor-element-369d3fd > .e-con-inner > .elementor-element, .elementor-959 .elementor-element-ce7f9c3 > .e-con-inner > .elementor-element { flex: 0 0 auto !important; width: auto !important; max-width: 100% !important; margin: 0 !important; align-self: flex-start !important; } .elementor-959 .elementor-element-79b6574, .elementor-959 .elementor-element-79b6574:not(.elementor-motion-effects-element-type-background) { background-color: #EFEFFF !important; } .elementor-959 .elementor-element-5624e8c, .elementor-959 .elementor-element-5624e8c:not(.elementor-motion-effects-element-type-background) { background-color: #FFEBFE !important; } .elementor-959 .elementor-element-edc261c, .elementor-959 .elementor-element-edc261c:not(.elementor-motion-effects-element-type-background) { background-color: #E3F5FB !important; } .elementor-959 .elementor-element-888c324, .elementor-959 .elementor-element-888c324:not(.elementor-motion-effects-element-type-background) { background-color: #FBE9EA !important; } .elementor-959 .elementor-element-39d1548, .elementor-959 .elementor-element-39d1548:not(.elementor-motion-effects-element-type-background) { background-color: #E3F3F6 !important; } .elementor-959 .elementor-element-369d3fd, .elementor-959 .elementor-element-369d3fd:not(.elementor-motion-effects-element-type-background) { background-color: #F7E3F0 !important; } .elementor-959 .elementor-element-ce7f9c3, .elementor-959 .elementor-element-ce7f9c3:not(.elementor-motion-effects-element-type-background) { background-color: #ECEAFB !important; } .elementor-959 .elementor-element-d314683 .elementor-heading-title, .elementor-959 .elementor-element-d314683 .elementor-widget-heading .elementor-heading-title { font-family: var(--wds-font-heading, 'Space Grotesk', sans-serif) !important; font-size: 24px !important; font-weight: 500 !important; line-height: 1 !important; letter-spacing: 0 !important; color: #2F3131 !important; margin: 0 !important; text-align: left !important; } .elementor-959 .elementor-element-d314683 .elementor-widget-html, .elementor-959 .elementor-element-d314683 .elementor-widget-html .elementor-widget-container, .elementor-959 .elementor-element-d314683 .elementor-widget-heading, .elementor-959 .elementor-element-d314683 .elementor-widget-heading .elementor-widget-container { margin: 0 !important; padding: 0 !important; } .elementor-959 .elementor-element-d314683 .elementor-widget-html svg, .elementor-959 .elementor-element-d314683 .elementor-widget-html img { width: 24px !important; height: 24px !important; display: block !important; flex-shrink: 0 !important; } /* -------------------------------------------------------------------------- STORE LOCATOR — Prefer to Try It On First — element 8464ef4 Figma: header + 2 cards (photo lockup, address bar on photo, flush CTA) -------------------------------------------------------------------------- */ .elementor-959 .elementor-element-8464ef4 { margin-top: 24px !important; padding-inline: var(--wds-gutter) !important; width: 100% !important; max-width: none !important; box-sizing: border-box !important; } .elementor-959 .elementor-element-8464ef4 > .e-con-inner { display: flex !important; flex-direction: column !important; gap: 0 !important; padding: 0 !important; width: 100% !important; max-width: none !important; } .elementor-959 .elementor-element-c8453a7 { width: 100% !important; max-width: none !important; } .elementor-959 .elementor-element-c8453a7 > .e-con-inner { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; padding: 0 0 40px !important; } .elementor-959 .elementor-element-7a81971 .elementor-heading-title { font-family: var(--wds-font-heading, 'Space Grotesk', sans-serif) !important; font-size: 32px !important; font-weight: 500 !important; line-height: 1 !important; color: #000000 !important; margin: 0 !important; } .elementor-959 .elementor-element-df683a1, .elementor-959 .elementor-element-df683a1 p { font-family: var(--wds-font-heading, 'Space Grotesk', sans-serif) !important; font-size: 24px !important; font-weight: 500 !important; line-height: 1.2 !important; color: #7E7C7C !important; margin: 0 !important; } .elementor-959 .elementor-element-e642855 { width: 100% !important; max-width: none !important; } .elementor-959 .elementor-element-e642855 > .e-con-inner { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 24px !important; padding: 0 !important; background: transparent !important; margin-bottom: 64px !important; width: 100% !important; } .elementor-959 .elementor-element-16ce523, .elementor-959 .elementor-element-265a961 { width: 100% !important; --min-height: 0px !important; aspect-ratio: 915.32 / 610.45 !important; min-height: 0 !important; height: auto !important; max-height: none !important; justify-content: flex-end !important; overflow: hidden !important; position: relative !important; border-radius: 16px !important; border: 1px solid #EDE8F0 !important; isolation: isolate !important; background-color: #1a1a1a !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; box-shadow: none !important; transition: transform 0.35s ease, box-shadow 0.35s ease; } .elementor-959 .elementor-element-16ce523 { background-image: url('/wp-content/uploads/homepage/store-palmetto.png') !important; } .elementor-959 .elementor-element-265a961 { background-image: url('/wp-content/uploads/homepage/store-jackies.png') !important; } .elementor-959 .elementor-element-16ce523 > .e-con-inner, .elementor-959 .elementor-element-265a961 > .e-con-inner { justify-content: flex-end !important; height: 100% !important; min-height: 100% !important; padding: 0 !important; flex-direction: column !important; position: relative !important; z-index: 1 !important; gap: 0 !important; } .elementor-959 .elementor-element-16ce523::before, .elementor-959 .elementor-element-265a961::before { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 71px; background: linear-gradient( 180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.1) 42%, rgba(0, 0, 0, 0.28) 72%, rgba(0, 0, 0, 0.55) 100% ); pointer-events: none; z-index: 0; border-radius: 16px 16px 0 0; transition: background 0.35s ease; } .elementor-959 .elementor-element-16ce523:hover::before, .elementor-959 .elementor-element-265a961:hover::before { background: linear-gradient( 180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.08) 42%, rgba(0, 0, 0, 0.24) 72%, rgba(0, 0, 0, 0.5) 100% ); } .elementor-959 .elementor-element-c5e819e, .elementor-959 .elementor-element-10220a7 { flex: 1 1 auto !important; display: flex !important; align-items: center !important; justify-content: center !important; min-height: 0 !important; position: relative !important; z-index: 2 !important; padding: 32px 40px 16px !important; width: 100% !important; order: 0 !important; } .elementor-959 .elementor-element-c5e819e::after, .elementor-959 .elementor-element-10220a7::after { display: none !important; } .elementor-959 .wds-store-brand { position: relative; width: min(58%, 340px); max-width: 340px; aspect-ratio: 1142 / 508; margin: 0 auto; background-repeat: no-repeat; background-position: center center; background-size: contain; filter: drop-shadow(0 2px 18px rgba(0, 0, 0, 0.35)); } .elementor-959 .elementor-element-c5e819e .wds-store-brand { background-image: url('/wp-content/uploads/homepage/palmetto-workstyles-white.png'); } .elementor-959 .elementor-element-10220a7 .wds-store-brand { background-image: url('/wp-content/uploads/homepage/jackies-workstyles-white.png'); } .elementor-959 .wds-store-brand__name, .elementor-959 .wds-store-brand__script { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* Address strip — Figma dark translucent bar on the photo */ .elementor-959 .elementor-element-f5c2e96, .elementor-959 .elementor-element-2f771f2, .elementor-959 .elementor-element-f5c2e96.wd-negative-gap, .elementor-959 .elementor-element-2f771f2.wd-negative-gap { background: rgba(0, 0, 0, 0.48) !important; background-color: rgba(0, 0, 0, 0.48) !important; background-image: none !important; width: 100% !important; position: relative !important; left: auto !important; right: auto !important; bottom: auto !important; z-index: 2 !important; margin: 0 !important; margin-block: 0 !important; flex: 0 0 auto !important; order: 1 !important; transform: none !important; border: none !important; border-radius: 0 !important; } .elementor-959 .elementor-element-f5c2e96:not(.elementor-motion-effects-element-type-background), .elementor-959 .elementor-element-f5c2e96 > .elementor-motion-effects-container > .elementor-motion-effects-layer, .elementor-959 .elementor-element-2f771f2:not(.elementor-motion-effects-element-type-background), .elementor-959 .elementor-element-2f771f2 > .elementor-motion-effects-container > .elementor-motion-effects-layer { background: rgba(0, 0, 0, 0.48) !important; background-color: rgba(0, 0, 0, 0.48) !important; background-image: none !important; } .elementor-959 .elementor-element-f5c2e96 > .e-con-inner, .elementor-959 .elementor-element-2f771f2 > .e-con-inner { justify-content: center !important; align-items: center !important; padding: 12px 20px !important; min-height: 44px !important; background: transparent !important; } .elementor-959 .elementor-element-e4f852a, .elementor-959 .elementor-element-e4f852a p, .elementor-959 .elementor-element-2d7b02f, .elementor-959 .elementor-element-2d7b02f p { font-family: var(--wds-font-body, 'Inter', sans-serif) !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.35 !important; letter-spacing: 0.01em !important; color: #FFFFFF !important; text-align: center !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; text-shadow: none !important; } .elementor-959 .elementor-element-e4f852a::before, .elementor-959 .elementor-element-e4f852a p::before, .elementor-959 .elementor-element-2d7b02f::before, .elementor-959 .elementor-element-2d7b02f p::before { content: ''; flex: 0 0 14px; width: 14px; height: 14px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 21s7-7.58 7-12a7 7 0 1 0-14 0c0 4.42 7 12 7 12z' stroke='black' stroke-width='2'/%3E%3Ccircle cx='12' cy='9' r='2.5' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 21s7-7.58 7-12a7 7 0 1 0-14 0c0 4.42 7 12 7 12z' stroke='black' stroke-width='2'/%3E%3Ccircle cx='12' cy='9' r='2.5' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat; } .elementor-959 .elementor-element-e4f852a:has(p)::before, .elementor-959 .elementor-element-2d7b02f:has(p)::before { content: none; display: none; } .elementor-959 .elementor-element-6cf9c26, .elementor-959 .elementor-element-5496415 { width: 100% !important; position: relative !important; z-index: 3 !important; flex: 0 0 auto !important; margin: 0 !important; order: 2 !important; } .elementor-959 .elementor-element-6cf9c26 .elementor-widget-container, .elementor-959 .elementor-element-5496415 .elementor-widget-container { margin: 0 !important; } .elementor-959 .elementor-element-6cf9c26 .elementor-button, .elementor-959 .elementor-element-5496415 .elementor-button { width: 100% !important; border: none !important; border-radius: 0 !important; font-family: var(--wds-font-heading, 'Space Grotesk', sans-serif) !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0.02em !important; line-height: 1 !important; padding: 0 24px !important; min-height: 71px !important; height: 71px !important; color: #FFFFFF !important; text-align: center !important; justify-content: center !important; align-items: center !important; display: inline-flex !important; box-shadow: none !important; transition: filter 0.2s ease, background-color 0.2s ease; } .elementor-959 .elementor-element-6cf9c26 .elementor-button { background-color: #1F2641 !important; } .elementor-959 .elementor-element-5496415 .elementor-button { background-color: #6A4972 !important; } .elementor-959 .elementor-element-6cf9c26 .elementor-button:hover, .elementor-959 .elementor-element-5496415 .elementor-button:hover { filter: brightness(1.08); color: #FFFFFF !important; } @media (max-width: 1024px) { .elementor-959 .elementor-element-e642855 > .e-con-inner { gap: 20px !important; } .elementor-959 .elementor-element-16ce523, .elementor-959 .elementor-element-265a961 { aspect-ratio: 915.32 / 610.45 !important; min-height: 0 !important; height: auto !important; max-height: none !important; } .elementor-959 .elementor-element-16ce523::before, .elementor-959 .elementor-element-265a961::before { bottom: 56px; } .elementor-959 .wds-store-brand { width: min(64%, 280px); max-width: 280px; } .elementor-959 .elementor-element-6cf9c26 .elementor-button, .elementor-959 .elementor-element-5496415 .elementor-button { min-height: 56px !important; height: 56px !important; padding: 0 16px !important; font-size: 13px !important; } } @media (max-width: 767px) { .elementor-959 .elementor-element-8464ef4 { padding-inline: var(--wds-gutter) !important; } .elementor-959 .elementor-element-c8453a7 > .e-con-inner { padding-bottom: 28px !important; } .elementor-959 .elementor-element-7a81971 .elementor-heading-title { font-size: 26px !important; } .elementor-959 .elementor-element-df683a1, .elementor-959 .elementor-element-df683a1 p { font-size: 18px !important; } .elementor-959 .elementor-element-e642855 > .e-con-inner { grid-template-columns: 1fr !important; gap: 16px !important; margin-bottom: 40px !important; } .elementor-959 .elementor-element-16ce523, .elementor-959 .elementor-element-265a961 { aspect-ratio: 915.32 / 610.45 !important; min-height: 0 !important; height: auto !important; max-height: none !important; border-radius: 12px !important; } .elementor-959 .elementor-element-16ce523::before, .elementor-959 .elementor-element-265a961::before { bottom: 52px; border-radius: 12px 12px 0 0; } .elementor-959 .elementor-element-c5e819e, .elementor-959 .elementor-element-10220a7 { padding: 24px 20px 12px !important; } .elementor-959 .wds-store-brand { width: min(72%, 260px); max-width: 260px; } .elementor-959 .elementor-element-6cf9c26 .elementor-button, .elementor-959 .elementor-element-5496415 .elementor-button { min-height: 52px !important; height: 52px !important; } } /* -------------------------------------------------------------------------- THE PEOPLE BEHIND — element e51f9f6 Figma Frame 36: 1816×758, pad 16, gap 57; portraits 441.56×502.32 Role (dark sans) + script accent ON image; name/bio below -------------------------------------------------------------------------- */ :is(.elementor-959, .elementor-963) .elementor-element-e51f9f6{ margin-top: 8px !important; padding-inline: var(--wds-gutter, 53px) !important; width: 100% !important; max-width: none !important; box-sizing: border-box !important; } :is(.elementor-959, .elementor-963) .elementor-element-e51f9f6 > .e-con-inner{ display: flex !important; flex-direction: column !important; gap: 57px !important; padding: 16px 8px 0 !important; width: 100% !important; max-width: none !important; box-sizing: border-box !important; } /* Header row: title+script left, subtitle right */ :is(.elementor-959, .elementor-963) .elementor-element-d88e636{ width: 100% !important; max-width: none !important; } :is(.elementor-959, .elementor-963) .elementor-element-d88e636 > .e-con-inner{ display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: flex-end !important; justify-content: space-between !important; gap: 48px !important; padding: 0 !important; width: 100% !important; } :is(.elementor-959, .elementor-963) .elementor-element-be1a4bd{ width: auto !important; max-width: none !important; flex: 0 1 auto !important; } :is(.elementor-959, .elementor-963) .elementor-element-be1a4bd > .e-con-inner{ display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 0 !important; padding: 0 !important; } :is(.elementor-959, .elementor-963) .elementor-element-fd85a07 .elementor-heading-title{ font-family: var(--wds-font-heading, 'Space Grotesk', sans-serif) !important; font-size: 32px !important; font-weight: 500 !important; line-height: 1 !important; color: #000000 !important; margin: 0 !important; } :is(.elementor-959, .elementor-963) .elementor-element-81c5e2d .elementor-heading-title{ font-family: var(--wds-font-script, 'Black Signature', cursive) !important; font-size: 64px !important; font-weight: 400 !important; line-height: 0.85 !important; color: #6A4972 !important; margin: -18px 0 0 4px !important; } :is(.elementor-959, .elementor-963) .elementor-element-3717b69{ flex: 0 1 380px !important; max-width: 380px !important; margin-left: auto !important; } :is(.elementor-959, .elementor-963) .elementor-element-3717b69, :is(.elementor-959, .elementor-963) .elementor-element-3717b69 p{ font-family: var(--wds-font-body, 'Inter', sans-serif) !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.4 !important; color: #7E7C7C !important; margin: 0 !important; max-width: 380px !important; text-align: right !important; } :is(.elementor-959, .elementor-963) .elementor-element-1eb03a0{ width: 100% !important; max-width: none !important; } :is(.elementor-959, .elementor-963) .elementor-element-1eb03a0 > .e-con-inner{ display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 20px !important; padding: 0 0 48px !important; width: 100% !important; max-width: none !important; } /* Team card columns */ :is(.elementor-959, .elementor-963) .elementor-element-4f66682, :is(.elementor-959, .elementor-963) .elementor-element-3945047, :is(.elementor-959, .elementor-963) .elementor-element-bd624d1, :is(.elementor-959, .elementor-963) .elementor-element-267883e{ width: auto !important; min-width: 0 !important; max-width: none !important; overflow: visible !important; position: relative !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; flex: none !important; --width: auto !important; } :is(.elementor-959, .elementor-963) .elementor-element-4f66682 > .e-con-inner, :is(.elementor-959, .elementor-963) .elementor-element-3945047 > .e-con-inner, :is(.elementor-959, .elementor-963) .elementor-element-bd624d1 > .e-con-inner, :is(.elementor-959, .elementor-963) .elementor-element-267883e > .e-con-inner{ position: relative !important; display: flex !important; flex-direction: column !important; padding: 0 !important; gap: 0 !important; } /* Portrait frame — Figma: soft rounded corners ~16px */ :is(.elementor-959, .elementor-963) .elementor-element-44f82b5, :is(.elementor-959, .elementor-963) .elementor-element-0ca0760, :is(.elementor-959, .elementor-963) .elementor-element-6f64216, :is(.elementor-959, .elementor-963) .elementor-element-7667bec{ width: 100% !important; aspect-ratio: 441.56 / 502.32 !important; height: auto !important; min-height: 0 !important; max-height: none !important; background: #FFFFFF !important; overflow: hidden !important; margin: 0 !important; border-radius: 16px !important; position: relative !important; --height: auto !important; --min-height: 0px !important; } :is(.elementor-959, .elementor-963) .elementor-element-44f82b5 img, :is(.elementor-959, .elementor-963) .elementor-element-0ca0760 img, :is(.elementor-959, .elementor-963) .elementor-element-6f64216 img, :is(.elementor-959, .elementor-963) .elementor-element-7667bec img{ width: 100% !important; height: 100% !important; min-height: 100% !important; object-fit: cover !important; object-position: center top !important; border-radius: 16px !important; display: block !important; } :is(.elementor-959, .elementor-963) .elementor-element-44f82b5 .elementor-widget-container, :is(.elementor-959, .elementor-963) .elementor-element-0ca0760 .elementor-widget-container, :is(.elementor-959, .elementor-963) .elementor-element-6f64216 .elementor-widget-container, :is(.elementor-959, .elementor-963) .elementor-element-7667bec .elementor-widget-container, :is(.elementor-959, .elementor-963) .elementor-element-44f82b5 .elementor-image, :is(.elementor-959, .elementor-963) .elementor-element-0ca0760 .elementor-image, :is(.elementor-959, .elementor-963) .elementor-element-6f64216 .elementor-image, :is(.elementor-959, .elementor-963) .elementor-element-7667bec .elementor-image{ width: 100% !important; height: 100% !important; margin: 0 !important; } /* * Overlay covers portrait area (same aspect), content bottom-left aligned. * Meta stays in normal flow below the image. */ :is(.elementor-959, .elementor-963) .elementor-element-ovrlay1, :is(.elementor-959, .elementor-963) .elementor-element-ovrlay2, :is(.elementor-959, .elementor-963) .elementor-element-ovrlay3, :is(.elementor-959, .elementor-963) .elementor-element-ovrlay4{ position: absolute !important; left: 0 !important; right: 0 !important; top: 0 !important; width: 100% !important; aspect-ratio: 441.56 / 502.32 !important; height: auto !important; margin: 0 !important; padding: 0 18px 14px !important; box-sizing: border-box !important; pointer-events: none !important; display: flex !important; flex-direction: column !important; justify-content: flex-end !important; align-items: flex-start !important; background: none !important; z-index: 3 !important; overflow: visible !important; } :is(.elementor-959, .elementor-963) .elementor-element-ovrlay1 > .e-con-inner, :is(.elementor-959, .elementor-963) .elementor-element-ovrlay2 > .e-con-inner, :is(.elementor-959, .elementor-963) .elementor-element-ovrlay3 > .e-con-inner, :is(.elementor-959, .elementor-963) .elementor-element-ovrlay4 > .e-con-inner{ padding: 0 !important; gap: 0 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-end !important; width: 100% !important; height: 100% !important; } /* Role line — dark sans on sketch */ :is(.elementor-959, .elementor-963) .elementor-element.elementor-element-cd162db .elementor-heading-title, :is(.elementor-959, .elementor-963) .elementor-element.elementor-element-b6f5bfa .elementor-heading-title, :is(.elementor-959, .elementor-963) .elementor-element.elementor-element-8b82553 .elementor-heading-title, :is(.elementor-959, .elementor-963) .elementor-element.elementor-element-4d48dec .elementor-heading-title{ font-family: var(--wds-font-heading, 'Space Grotesk', sans-serif) !important; font-size: 15px !important; font-weight: 500 !important; line-height: 1.1 !important; color: #1F2641 !important; margin: 0 !important; text-shadow: none !important; } /* Accent script — slight spill past image bottom like Figma */ :is(.elementor-959, .elementor-963) .elementor-element.elementor-element-d2473ba .elementor-heading-title, :is(.elementor-959, .elementor-963) .elementor-element.elementor-element-ab4dd86 .elementor-heading-title, :is(.elementor-959, .elementor-963) .elementor-element.elementor-element-21a1159 .elementor-heading-title, :is(.elementor-959, .elementor-963) .elementor-element.elementor-element-c26c487 .elementor-heading-title{ font-family: var(--wds-font-script, 'Black Signature', cursive) !important; font-size: 48px !important; font-weight: 400 !important; line-height: 0.85 !important; color: #6A4972 !important; /* brand purple — was #8B6B96 */ margin: -8px 0 -12px !important; text-shadow: none !important; } /* Name + bio below portrait */ :is(.elementor-959, .elementor-963) .elementor-element-meta001, :is(.elementor-959, .elementor-963) .elementor-element-meta002, :is(.elementor-959, .elementor-963) .elementor-element-meta003, :is(.elementor-959, .elementor-963) .elementor-element-meta004{ margin-top: 18px !important; padding: 0 !important; position: relative !important; z-index: 1 !important; } :is(.elementor-959, .elementor-963) .elementor-element-meta001 > .e-con-inner, :is(.elementor-959, .elementor-963) .elementor-element-meta002 > .e-con-inner, :is(.elementor-959, .elementor-963) .elementor-element-meta003 > .e-con-inner, :is(.elementor-959, .elementor-963) .elementor-element-meta004 > .e-con-inner{ padding: 0 !important; gap: 6px !important; } :is(.elementor-959, .elementor-963) .elementor-element-6add4ba .elementor-heading-title, :is(.elementor-959, .elementor-963) .elementor-element-7aac504 .elementor-heading-title, :is(.elementor-959, .elementor-963) .elementor-element-b75003a .elementor-heading-title, :is(.elementor-959, .elementor-963) .elementor-element-462bf6b .elementor-heading-title{ font-family: var(--wds-font-heading, 'Space Grotesk', sans-serif) !important; font-size: 18px !important; font-weight: 500 !important; color: #1F2641 !important; margin: 0 !important; } :is(.elementor-959, .elementor-963) .elementor-element-a9f71e7, :is(.elementor-959, .elementor-963) .elementor-element-a9f71e7 p, :is(.elementor-959, .elementor-963) .elementor-element-e7cbf11, :is(.elementor-959, .elementor-963) .elementor-element-e7cbf11 p, :is(.elementor-959, .elementor-963) .elementor-element-53b07c9, :is(.elementor-959, .elementor-963) .elementor-element-53b07c9 p, :is(.elementor-959, .elementor-963) .elementor-element-78d00aa, :is(.elementor-959, .elementor-963) .elementor-element-78d00aa p{ font-family: var(--wds-font-body, 'Inter', sans-serif) !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.35 !important; color: #6B6B6B !important; margin: 0 !important; } /* -------------------------------------------------------------------------- BULK ORDER BANNER — element f5dcafa Figma Frame 37: ~1834px wide, hug height, pad 18px, space-between -------------------------------------------------------------------------- */ .elementor-959 .elementor-element-f5dcafa { background-color: #43254B !important; width: 100% !important; max-width: none !important; margin: 0 !important; min-height: 158px !important; /* Figma Frame 37 hug ~158 */ box-sizing: border-box !important; } .elementor-959 .elementor-element-f5dcafa > .e-con-inner { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; gap: 24px !important; padding: 18px var(--wds-gutter, 53px) !important; min-height: 158px !important; box-sizing: border-box !important; } .elementor-959 .elementor-element-f8ec36c { flex: 1 1 auto !important; min-width: 0 !important; } .elementor-959 .elementor-element-f8ec36c > .e-con-inner { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 6px !important; padding: 0 !important; } .elementor-959 .elementor-element-48d9db2, .elementor-959 .elementor-element-48d9db2 p { font-family: var(--wds-font-body, 'Inter', sans-serif) !important; font-size: 16px !important; font-weight: 500 !important; line-height: 1.2 !important; color: #FFFFFF !important; margin: 0 !important; } .elementor-959 .elementor-element-10cead3 { margin: 0 !important; } .elementor-959 .elementor-element-10cead3 .elementor-heading-title { font-family: var(--wds-font-heading, 'Space Grotesk', sans-serif) !important; font-size: 22px !important; font-weight: 500 !important; line-height: 1.15 !important; color: #FFFFFF !important; margin: 0 !important; } .elementor-959 .elementor-element-e9a019f { flex: 0 0 auto !important; align-self: center !important; margin: 0 !important; } .elementor-959 .elementor-element-e9a019f .elementor-button { background-color: #FFFFFF !important; color: #43254B !important; border-radius: 2px !important; min-height: 0 !important; height: auto !important; min-width: 0 !important; padding: 12px 24px !important; font-family: var(--wds-font-heading, 'Space Grotesk', sans-serif) !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1.2 !important; box-shadow: none !important; border: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; text-transform: none !important; letter-spacing: 0 !important; text-decoration: none !important; border-bottom: none !important; --wd-link-decor: none !important; --wd-link-decor-style: none !important; --wd-link-decor-hover: none !important; } .elementor-959 .elementor-element-e9a019f .elementor-button:hover, .elementor-959 .elementor-element-e9a019f .elementor-button:focus { background-color: #F8F0F8 !important; color: #43254B !important; } .elementor-959 .elementor-element-e9a019f .elementor-button:hover, .elementor-959 .elementor-element-e9a019f .elementor-button:focus, .elementor-959 .elementor-element-e9a019f .elementor-button:active, .elementor-959 .elementor-element-e9a019f .elementor-button-text, .elementor-959 .elementor-element-e9a019f a, .elementor-959 .elementor-element-e9a019f a:hover, .elementor-959 .elementor-element-e9a019f a:focus, .elementor-959 .elementor-element-e9a019f a:visited { text-decoration: none !important; border-bottom: none !important; box-shadow: none !important; --wd-link-decor: none !important; --wd-link-decor-style: none !important; --wd-link-decor-hover: none !important; } /* -------------------------------------------------------------------------- Responsive -------------------------------------------------------------------------- */ /* Homepage shell — remove WoodMart content padding + force white page */ body.home .wd-content-area, body.home .site-content, body.home .main-page-wrapper, body.home .page .entry-content, body.home .elementor-959 { padding: 0 !important; margin: 0 !important; max-width: none !important; background-color: #FFFFFF !important; } body.home .wd-page-content, body.home .page :is(.wd-page-content, .whb-header) { background-color: #FFFFFF !important; background-image: none !important; } body.home .container.main-wrapper, body.home .wd-content-layout { padding-inline: 0 !important; max-width: none !important; width: 100% !important; } body.home .wd-content-area>.container { max-width: none !important; width: 100% !important; padding: 0 !important; } @media (max-width: 1280px) { .elementor-959 .elementor-element-5dbbe4c { --wds-gutter: 24px; } .elementor-959 .elementor-element-7783312 .elementor-heading-title { font-size: 40px !important; } } @media (max-width: 1024px) { .elementor-959 .elementor-element-4cda37e { display: none !important; } .elementor-959 .elementor-element-88ae346>.e-con-inner { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } :is(.elementor-959, .elementor-963) .elementor-element-9dc119f>.e-con-inner{ grid-template-columns: 1fr !important; } .elementor-959 .elementor-element-4cc183b>.e-con-inner { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .elementor-959 .elementor-element-9b70bc3>.e-con-inner { grid-template-columns: 1fr !important; } .elementor-959 .elementor-element-d314683>.e-con-inner { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } :is(.elementor-959, .elementor-963) .elementor-element-1eb03a0>.e-con-inner{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } :is(.elementor-959, .elementor-963) .elementor-element-e289deb, :is(.elementor-959, .elementor-963) .elementor-element-e289deb p{ text-align: left !important; } .elementor-959 .elementor-element-77efd56 { position: static !important; } } @media (max-width: 768px) { .elementor-959 .elementor-element-5dbbe4c { --wds-gutter: 18px; width: 100% !important; min-height: 560px !important; margin: 0 !important; background-position: 47% center !important; justify-content: flex-end !important; } .elementor-959 .elementor-element-7783312 .elementor-heading-title { font-size: 27px !important; line-height: 1.08 !important; max-width: 300px; margin-inline: auto !important; } .elementor-959 .elementor-element-155732c, .elementor-959 .elementor-element-155732c p { max-width: 288px !important; font-size: 14px !important; line-height: 1.35 !important; } .elementor-959 .elementor-element-2f47802 { width: min(100%, 288px) !important; margin-inline: auto !important; } .elementor-959 .elementor-element-2f47802>.e-con-inner { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; } .elementor-959 .elementor-element-962fa11, .elementor-959 .elementor-element-8a99311, .elementor-959 .elementor-element-962fa11 .elementor-button, .elementor-959 .elementor-element-8a99311 .elementor-button { width: 100% !important; } .elementor-959 .elementor-element-e642855>.e-con-inner { grid-template-columns: 1fr !important; } .elementor-959 .elementor-element-d314683>.e-con-inner { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } :is(.elementor-959, .elementor-963) .elementor-element-1eb03a0>.e-con-inner{ grid-template-columns: 1fr !important; } } @media (max-width: 640px) { .elementor-959 .elementor-element-88ae346>.e-con-inner, .elementor-959 .elementor-element-4cc183b>.e-con-inner { grid-template-columns: 1fr !important; } } /* Hero and partner-logo responsive compositions. */ @media (min-width: 1200px) and (max-width: 1799px) { .elementor-959 .elementor-element-5dbbe4c { width: calc(100% - 96px) !important; margin: 0 48px !important; min-height: 560px !important; background-position: center 50% !important; } .elementor-959 .elementor-element-079eab0 { top: 40px; right: 48px; left: auto; width: auto; height: auto; transform: none; } .elementor-959 .elementor-element-079eab0 .elementor-heading-title { font-size: 72px !important; } .elementor-959 .elementor-element-0ad8552 { top: 116px; right: 48px; left: auto; width: 196px; height: auto; } .elementor-959 .elementor-element-7783312 { top: 48%; left: 50%; width: min(80%, 680px); height: auto; transform: translate(-50%, -50%) !important; } .elementor-959 .elementor-element-7783312 .elementor-heading-title { font-size: 44px !important; } .elementor-959 .elementor-element-155732c { top: calc(48% + 66px); left: 50%; width: min(80%, 640px); height: auto; transform: translateX(-50%) !important; } .elementor-959 .elementor-element.elementor-element-2f47802.e-con-boxed { top: calc(48% + 126px); left: 50%; transform: translateX(-50%); } } @media (min-width: 1025px) and (max-width: 1199px) { .elementor-959 .elementor-element-5dbbe4c { width: calc(100% - 80px) !important; margin: 0 40px !important; min-height: 520px !important; background-position: center 50% !important; } .elementor-959 .elementor-element-079eab0 { top: 32px; right: 40px; left: auto; width: auto; height: auto; transform: none; } .elementor-959 .elementor-element-079eab0 .elementor-heading-title { font-size: 64px !important; } .elementor-959 .elementor-element-0ad8552 { top: 96px; right: 40px; left: auto; width: 196px; height: auto; font-size: 18px !important; } .elementor-959 .elementor-element-7783312 { top: 48%; left: 50%; width: min(84%, 620px); height: auto; transform: translate(-50%, -50%) !important; } .elementor-959 .elementor-element-7783312 .elementor-heading-title { font-size: 38px !important; } .elementor-959 .elementor-element-155732c { top: calc(48% + 58px); left: 50%; width: min(84%, 570px); height: auto; transform: translateX(-50%) !important; } .elementor-959 .elementor-element.elementor-element-2f47802.e-con-boxed { top: calc(48% + 112px); left: 50%; transform: translateX(-50%); } } @media (max-width: 1199px) { .elementor-959 .elementor-element-17ac6c8 > .e-con-inner { flex-direction: column !important; align-items: flex-start !important; gap: 28px !important; min-height: 0 !important; padding: 40px 24px !important; } .elementor-959 .elementor-element-a5f05d6, .elementor-959 .elementor-element-a5f05d6 .elementor-heading-title { width: auto !important; max-width: none !important; transform: none; } .elementor-959 .elementor-element-d6286fb { width: 100% !important; transform: none; margin-left: 0 !important; min-height: 0 !important; } .elementor-959 .elementor-element-d6286fb > .e-con-inner { width: 100% !important; justify-content: space-between !important; gap: 24px !important; flex-wrap: nowrap !important; min-height: 0 !important; } .elementor-959 .elementor-element-3a0cbbb { width: 120px !important; height: 28px !important; } .elementor-959 .elementor-element-51777af { width: 130px !important; height: 28px !important; } .elementor-959 .elementor-element-8846ed9 { width: 120px !important; height: 28px !important; } .elementor-959 .elementor-element-a5d9081 { width: 72px !important; height: 28px !important; } } @media (min-width: 768px) and (max-width: 1024px) { .elementor-959 .elementor-element-5dbbe4c { width: calc(100% - 40px) !important; min-height: 445px !important; margin: 0 20px !important; background-position: center 50% !important; } .elementor-959 .elementor-element-b5b119a { padding: 0 24px 48px !important; } .elementor-959 .elementor-element-7783312 .elementor-heading-title { font-size: 32px !important; line-height: 1.08 !important; } .elementor-959 .elementor-element-155732c, .elementor-959 .elementor-element-155732c p { max-width: 560px !important; font-size: 15px !important; line-height: 1.35 !important; } } @media (max-width: 767px) { .elementor-959 .elementor-element-5dbbe4c { min-height: 480px !important; background-position: center 50% !important; } .elementor-959 .elementor-element-b5b119a { padding: 0 18px 32px !important; } .elementor-959 .elementor-element-17ac6c8 > .e-con-inner { padding: 32px 18px !important; gap: 24px !important; } .elementor-959 .elementor-element-a5f05d6 .elementor-heading-title { font-size: 22px !important; line-height: 1.15 !important; } .elementor-959 .elementor-element-d6286fb > .e-con-inner { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 24px 20px !important; justify-items: center; align-items: center !important; min-height: 0 !important; } .elementor-959 .elementor-element-3a0cbbb, .elementor-959 .elementor-element-51777af, .elementor-959 .elementor-element-8846ed9, .elementor-959 .elementor-element-a5d9081 { width: 120px !important; height: 28px !important; } } @media (min-width: 768px) and (max-width: 1024px) { :is(.elementor-959, .elementor-963) .elementor-element-d79913e > .e-con-inner{ flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; padding: 32px 24px !important; } :is(.elementor-959, .elementor-963) .elementor-element-43971b2, :is(.elementor-959, .elementor-963) .elementor-element-e289deb{ max-width: 100% !important; flex-basis: auto !important; } :is(.elementor-959, .elementor-963) .elementor-element-e289deb, :is(.elementor-959, .elementor-963) .elementor-element-e289deb p{ font-size: 20px !important; text-align: left !important; } :is(.elementor-959, .elementor-963) .elementor-element-9dc119f > .e-con-inner{ max-width: 604px; margin-inline: auto; } } @media (max-width: 767px) { :is(.elementor-959, .elementor-963) .elementor-element-d79913e > .e-con-inner{ flex-direction: column !important; align-items: flex-start !important; gap: 18px !important; padding: 28px 18px !important; } :is(.elementor-959, .elementor-963) .elementor-element-43971b2, :is(.elementor-959, .elementor-963) .elementor-element-e289deb{ max-width: 100% !important; flex-basis: auto !important; } :is(.elementor-959, .elementor-963) .elementor-element-19877f0 .elementor-heading-title{ font-size: 28px !important; } :is(.elementor-959, .elementor-963) .elementor-element-945b6b2 .elementor-heading-title{ font-size: 46px !important; } :is(.elementor-959, .elementor-963) .elementor-element-e289deb, :is(.elementor-959, .elementor-963) .elementor-element-e289deb p{ font-size: 18px !important; text-align: left !important; } :is(.elementor-959, .elementor-963) .elementor-element-7bb60b6, :is(.elementor-959, .elementor-963) .elementor-element-032bdcf, :is(.elementor-959, .elementor-963) .elementor-element-02e5c3e{ padding: 0 20px 28px !important; } } /* -------------------------------------------------------------------------- HERO — retain the Figma desktop composition on landscape tablet. Elementor's default tablet breakpoint previously removed the entire upper lockup, and the 560px copy cap forced the caption to two lines. -------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1024px) { .elementor-959 .elementor-element-4cda37e { display: flex !important; position: static !important; align-self: stretch !important; padding: 0 !important; } .elementor-959 .elementor-element-4cda37e > .e-con-inner { position: static !important; display: contents !important; } .elementor-959 .elementor-element-079eab0 { position: absolute !important; top: 34px !important; right: 42px !important; left: auto !important; width: auto !important; height: auto !important; margin: 0 !important; text-align: right !important; } .elementor-959 .elementor-element-079eab0 .elementor-heading-title { font-size: clamp(50px, 6.2vw, 64px) !important; line-height: .88 !important; white-space: nowrap !important; } .elementor-959 .elementor-element-0ad8552 { position: absolute !important; top: 91px !important; right: 42px !important; left: auto !important; width: 145px !important; height: auto !important; margin: 0 !important; font-size: 14px !important; line-height: 1.05 !important; text-align: right !important; } .elementor-959 .elementor-element-155732c, .elementor-959 .elementor-element-155732c p { width: min(92%, 720px) !important; max-width: none !important; font-size: 12px !important; line-height: 1.2 !important; white-space: nowrap !important; } } /* The Figma desktop caption is a single 696px line. Do not let Elementor * calculate a narrower text measure between its desktop and tablet layouts. */ @media (min-width: 768px) { .elementor-959 .elementor-element-155732c, .elementor-959 .elementor-element-155732c p { white-space: nowrap !important; width: auto !important; max-width: none !important; } } /* ========================================================================== FIGMA PARITY — keep the 1920 design hierarchy through landscape tablet. ========================================================================== */ @media (min-width: 768px) and (max-width: 1024px) { /* Figma keeps all seven roles on one desktop/tablet rail. */ .elementor-959 .elementor-element-d314683 > .e-con-inner { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; } } /* Figma product plates are neutral; multiplying images darkens the supplied * catalog photography and changes the intended colors. */ .elementor-959 .elementor-element-fysimg01 img, .elementor-959 .elementor-element-fysimg02 img, .elementor-959 .elementor-element-fysimg03 img, .elementor-959 .elementor-element-fysimg04 img, .elementor-959 .elementor-element-fysimg05 img { mix-blend-mode: normal !important; } /* Bulk order Frame 37 typography. */ .elementor-959 .elementor-element-48d9db2, .elementor-959 .elementor-element-48d9db2 p { font-family: var(--wds-font-heading, 'Space Grotesk', sans-serif) !important; font-size: 24px !important; font-weight: 500 !important; line-height: 1 !important; letter-spacing: 0 !important; } /* ========================================================================== HOMEPAGE RESPONSIVE FINISH This block is intentionally homepage-scoped and max-width-only: the approved desktop composition at 1025px+ is never overridden. ========================================================================== */ @media (max-width: 1024px) { body.home .elementor-959 { --wds-gutter: clamp(20px, 3.125vw, 32px); } /* Keep tablet sections aligned and prevent inherited fixed dimensions. */ body.home .elementor-959 .e-con, body.home .elementor-959 .elementor-widget, body.home .elementor-959 img { max-width: 100%; } :is(body.home, body.page-slug-about-us) :is(.elementor-959, .elementor-963) .elementor-element-9dc119f > .e-con-inner{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; max-width: none !important; } :is(body.home, body.page-slug-about-us) :is(.elementor-959, .elementor-963) .elementor-element-7bb60b6, :is(body.home, body.page-slug-about-us) :is(.elementor-959, .elementor-963) .elementor-element-032bdcf, :is(body.home, body.page-slug-about-us) :is(.elementor-959, .elementor-963) .elementor-element-02e5c3e{ --padding-right: 22px !important; --padding-bottom: 40px !important; --padding-left: 24px !important; --padding-inline-start: 24px !important; --padding-inline-end: 22px !important; --padding-block-end: 40px !important; padding: 0 22px 40px 24px !important; } body.home .elementor-959 .elementor-element-fysroot1 > .e-con-inner { padding-inline: var(--wds-gutter) !important; } body.home .elementor-959 .elementor-element-fyscrd01, body.home .elementor-959 .elementor-element-fyscrd02, body.home .elementor-959 .elementor-element-fyscrd03, body.home .elementor-959 .elementor-element-fyscrd04, body.home .elementor-959 .elementor-element-fyscrd05, body.home .elementor-959 .wds-fys-card { flex-basis: calc((100% - 32px) / 3) !important; } :is(body.home, body.page-slug-about-us) :is(.elementor-959, .elementor-963) .elementor-element-e51f9f6 > .e-con-inner{ gap: 36px !important; } :is(body.home, body.page-slug-about-us) :is(.elementor-959, .elementor-963) .elementor-element-1eb03a0 > .e-con-inner{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; } body.home .elementor-959 .elementor-element-f5dcafa > .e-con-inner { padding-inline: var(--wds-gutter) !important; } } @media (max-width: 767px) { body.home .elementor-959 { --wds-gutter: clamp(16px, 4.5vw, 20px); } /* Homepage-only header/announcement safety: preserve controls and tap room. */ body.home .whb-top-bar, body.home .whb-general-header, body.home .whb-mobile-header { max-width: 100vw; } body.home .whb-top-bar .container, body.home .whb-general-header .container, body.home .whb-mobile-header .container { padding-inline: var(--wds-gutter) !important; } /* Hero retains the image as a stable background while all content fits. */ body.home .elementor-959 .elementor-element-5dbbe4c { width: 100% !important; min-height: clamp(460px, 128vw, 540px) !important; margin: 0 !important; background-position: 48% center !important; } body.home .elementor-959 .elementor-element-b5b119a { padding: 0 var(--wds-gutter) 28px !important; } body.home .elementor-959 .elementor-element-7783312 .elementor-heading-title { max-width: min(100%, 340px) !important; font-size: clamp(26px, 7.2vw, 32px) !important; line-height: 1.05 !important; } body.home .elementor-959 .elementor-element-155732c, body.home .elementor-959 .elementor-element-155732c p { width: min(100%, 330px) !important; max-width: 330px !important; font-size: 14px !important; line-height: 1.35 !important; white-space: normal !important; } body.home .elementor-959 .elementor-element-2f47802 { width: min(100%, 320px) !important; } body.home .elementor-959 .elementor-element-962fa11 .elementor-button, body.home .elementor-959 .elementor-element-8a99311 .elementor-button { min-height: 48px !important; } /* Two compact category columns reduce unnecessary scroll without cropping media. */ body.home .elementor-959 .elementor-element-88ae346 > .e-con-inner { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; padding: 0 var(--wds-gutter) 32px !important; } body.home .elementor-959 .elementor-element-82c83ef, body.home .elementor-959 .elementor-element-c7ebc75, body.home .elementor-959 .elementor-element-9e3a664, body.home .elementor-959 .elementor-element-d231719 { aspect-ratio: 4 / 5 !important; padding: 0 14px 16px !important; } body.home .elementor-959 .elementor-element-d1cdf34 .elementor-heading-title, body.home .elementor-959 .elementor-element-43b6be9 .elementor-heading-title, body.home .elementor-959 .elementor-element-d1b6d38 .elementor-heading-title, body.home .elementor-959 .elementor-element-966e994 .elementor-heading-title { font-size: clamp(17px, 5vw, 20px) !important; } :is(body.home, body.page-slug-about-us) :is(.elementor-959, .elementor-963) .elementor-element-d79913e > .e-con-inner{ padding: 32px var(--wds-gutter) !important; } :is(body.home, body.page-slug-about-us) :is(.elementor-959, .elementor-963) .elementor-element-9dc119f > .e-con-inner{ grid-template-columns: 1fr !important; gap: 12px !important; } :is(body.home, body.page-slug-about-us) :is(.elementor-959, .elementor-963) .elementor-element-7bb60b6, :is(body.home, body.page-slug-about-us) :is(.elementor-959, .elementor-963) .elementor-element-032bdcf, :is(body.home, body.page-slug-about-us) :is(.elementor-959, .elementor-963) .elementor-element-02e5c3e{ min-height: 340px !important; aspect-ratio: 4 / 5 !important; --padding-right: 20px !important; --padding-bottom: 36px !important; --padding-left: 22px !important; --padding-inline-start: 22px !important; --padding-inline-end: 20px !important; --padding-block-end: 36px !important; padding: 0 20px 36px 22px !important; } /* Find Your Style becomes a clear stacked control bar with swipeable cards. */ body.home .elementor-959 .elementor-element-fysroot1 > .e-con-inner { grid-template-columns: 1fr !important; grid-template-areas: 'title' 'link' 'shop' 'swatches' 'grid' !important; row-gap: 18px !important; padding: 36px var(--wds-gutter) 40px !important; } body.home .elementor-959 .elementor-element-fystitle { min-width: 0 !important; /* Reserve a real second line for the script accent. The former * 76px box forced the two headings to occupy the same baseline. */ min-height: 102px !important; } body.home .elementor-959 .elementor-element-fysfind1 .elementor-heading-title { font-size: 28px !important; position: relative; z-index: 1; } body.home .elementor-959 .elementor-element-fyssty01 { top: 30px !important; } body.home .elementor-959 .elementor-element-fyssty01 .elementor-heading-title { font-size: clamp(54px, 17vw, 64px) !important; } body.home .elementor-959 .elementor-element-fyslink1 { justify-self: start !important; align-self: start !important; transform: none !important; } body.home .elementor-959 .elementor-element-fyslink1, body.home .elementor-959 .elementor-element-fyslink1 p { font-size: 18px !important; white-space: normal !important; text-align: left !important; } body.home .elementor-959 .elementor-element-fysshop1, body.home .elementor-959 .elementor-element-fysshop1 > .e-con-inner { width: 100% !important; } body.home .elementor-959 .elementor-element-fyswom01, body.home .elementor-959 .elementor-element-fysmen01, body.home .elementor-959 .elementor-element-fyswom01 .elementor-button, body.home .elementor-959 .elementor-element-fysmen01 .elementor-button { flex: 1 1 0 !important; min-width: 0 !important; } body.home .elementor-959 .elementor-element-fyswat01 { justify-self: start !important; width: 100% !important; overflow-x: auto !important; scrollbar-width: none; } body.home .elementor-959 .wds-fys-swatches { gap: 12px !important; min-width: max-content; } body.home .elementor-959 .wds-fys-swatch { width: 32px !important; height: 32px !important; flex-basis: 32px !important; } body.home .elementor-959 .wds-fys-swatch.is-active { min-width: 92px !important; height: 48px !important; padding-inline: 18px !important; } body.home .elementor-959 .elementor-element-fyscrd01, body.home .elementor-959 .elementor-element-fyscrd02, body.home .elementor-959 .elementor-element-fyscrd03, body.home .elementor-959 .elementor-element-fyscrd04, body.home .elementor-959 .elementor-element-fyscrd05, body.home .elementor-959 .wds-fys-card { flex: 0 0 min(78%, 280px) !important; } body.home .elementor-959 .elementor-element-fysgrid1 > .e-con-inner, body.home .elementor-959 .elementor-element-fysgrid1 > .wds-fys-track { gap: 16px !important; scroll-snap-type: x mandatory; scroll-padding-inline: 1px; } body.home .elementor-959 .wds-fys-card, body.home .elementor-959 .elementor-element-fyscrd01, body.home .elementor-959 .elementor-element-fyscrd02, body.home .elementor-959 .elementor-element-fyscrd03, body.home .elementor-959 .elementor-element-fyscrd04, body.home .elementor-959 .elementor-element-fyscrd05 { scroll-snap-align: start; } /* Role and team cards stay readable while avoiding a single-card long page. */ body.home .elementor-959 .elementor-element-d314683 > .e-con-inner { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; padding-bottom: 36px !important; } body.home .elementor-959 .elementor-element-d314683 .elementor-heading-title { font-size: clamp(16px, 4.3vw, 20px) !important; } body.home .elementor-959 .elementor-element-79b6574 > .e-con-inner, body.home .elementor-959 .elementor-element-5624e8c > .e-con-inner, body.home .elementor-959 .elementor-element-edc261c > .e-con-inner, body.home .elementor-959 .elementor-element-888c324 > .e-con-inner, body.home .elementor-959 .elementor-element-39d1548 > .e-con-inner, body.home .elementor-959 .elementor-element-369d3fd > .e-con-inner, body.home .elementor-959 .elementor-element-ce7f9c3 > .e-con-inner { gap: 10px !important; padding: 16px !important; } :is(body.home, body.page-slug-about-us) :is(.elementor-959, .elementor-963) .elementor-element-e51f9f6{ padding-inline: var(--wds-gutter) !important; } :is(body.home, body.page-slug-about-us) :is(.elementor-959, .elementor-963) .elementor-element-d88e636 > .e-con-inner{ flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; } /* On desktop this copy column uses a 380px flex basis. Once its parent * stacks, that basis becomes an empty 380px-tall block above the portraits. */ :is(body.home, body.page-slug-about-us) :is(.elementor-959, .elementor-963) .elementor-element-3717b69{ flex: 0 0 auto !important; height: auto !important; min-height: 0 !important; } :is(body.home, body.page-slug-about-us) :is(.elementor-959, .elementor-963) .elementor-element-3717b69, :is(body.home, body.page-slug-about-us) :is(.elementor-959, .elementor-963) .elementor-element-3717b69 p{ max-width: none !important; text-align: left !important; } /* Keep the handwritten accent below the section heading instead of cutting * through it on narrow screens. */ :is(body.home, body.page-slug-about-us) :is(.elementor-959, .elementor-963) .elementor-element-81c5e2d .elementor-heading-title{ margin: 8px 0 0 4px !important; } :is(body.home, body.page-slug-about-us) :is(.elementor-959, .elementor-963) .elementor-element-1eb03a0 > .e-con-inner{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; padding-bottom: 32px !important; } :is(body.home, body.page-slug-about-us) :is(.elementor-959, .elementor-963) .elementor-element-44f82b5, :is(body.home, body.page-slug-about-us) :is(.elementor-959, .elementor-963) .elementor-element-0ca0760, :is(body.home, body.page-slug-about-us) :is(.elementor-959, .elementor-963) .elementor-element-6f64216, :is(body.home, body.page-slug-about-us) :is(.elementor-959, .elementor-963) .elementor-element-7667bec, :is(body.home, body.page-slug-about-us) :is(.elementor-959, .elementor-963) .elementor-element-ovrlay1, :is(body.home, body.page-slug-about-us) :is(.elementor-959, .elementor-963) .elementor-element-ovrlay2, :is(body.home, body.page-slug-about-us) :is(.elementor-959, .elementor-963) .elementor-element-ovrlay3, :is(body.home, body.page-slug-about-us) :is(.elementor-959, .elementor-963) .elementor-element-ovrlay4{ aspect-ratio: 1 / 1.15 !important; } :is(body.home, body.page-slug-about-us) :is(.elementor-959, .elementor-963) .elementor-element-ovrlay1, :is(body.home, body.page-slug-about-us) :is(.elementor-959, .elementor-963) .elementor-element-ovrlay2, :is(body.home, body.page-slug-about-us) :is(.elementor-959, .elementor-963) .elementor-element-ovrlay3, :is(body.home, body.page-slug-about-us) :is(.elementor-959, .elementor-963) .elementor-element-ovrlay4{ padding: 0 12px 10px !important; } :is(body.home, body.page-slug-about-us) :is(.elementor-959, .elementor-963) .elementor-element.elementor-element-d2473ba .elementor-heading-title, :is(body.home, body.page-slug-about-us) :is(.elementor-959, .elementor-963) .elementor-element.elementor-element-ab4dd86 .elementor-heading-title, :is(body.home, body.page-slug-about-us) :is(.elementor-959, .elementor-963) .elementor-element.elementor-element-21a1159 .elementor-heading-title, :is(body.home, body.page-slug-about-us) :is(.elementor-959, .elementor-963) .elementor-element.elementor-element-c26c487 .elementor-heading-title{ font-size: clamp(34px, 10vw, 44px) !important; } body.home .elementor-959 .elementor-element-f5dcafa > .e-con-inner { flex-direction: column !important; align-items: flex-start !important; gap: 18px !important; min-height: 0 !important; padding: 28px var(--wds-gutter) !important; } body.home .elementor-959 .elementor-element-48d9db2, body.home .elementor-959 .elementor-element-48d9db2 p { font-size: clamp(20px, 6vw, 24px) !important; line-height: 1.15 !important; } body.home .elementor-959 .elementor-element-e9a019f, body.home .elementor-959 .elementor-element-e9a019f .elementor-button { width: 100% !important; } body.home .elementor-959 .elementor-element-e9a019f .elementor-button { min-height: 48px !important; } /* Bigger Team is a single mobile composition: content first, then a * deliberate portrait crop. This prevents the desktop split layout from * leaving a thin, accidental strip of image below the copy panel. */ body.home .elementor-959 .elementor-element-9b70bc3 > .e-con-inner { display: flex !important; flex-direction: column !important; height: auto !important; min-height: 0 !important; } body.home .elementor-959 .elementor-element-565c25d { min-height: 320px !important; } body.home .elementor-959 .elementor-element-565c25d > .e-con-inner { min-height: 320px !important; height: auto !important; padding: 40px 28px !important; } /* The Elementor media widget has no source at this breakpoint. Do not * reserve a fake image row; retain a balanced, self-contained CTA instead. */ body.home .elementor-959 .elementor-element-fd2330a { display: none !important; } } @media (max-width: 374px) { body.home .elementor-959 .elementor-element-5dbbe4c { min-height: 450px !important; } body.home .elementor-959 .elementor-element-7783312 .elementor-heading-title { font-size: 25px !important; } body.home .elementor-959 .elementor-element-17ac6c8 > .e-con-inner { padding-inline: var(--wds-gutter) !important; } body.home .elementor-959 .elementor-element-d6286fb > .e-con-inner { gap: 18px 12px !important; } body.home .elementor-959 .elementor-element-3a0cbbb, body.home .elementor-959 .elementor-element-51777af, body.home .elementor-959 .elementor-element-8846ed9, body.home .elementor-959 .elementor-element-a5d9081 { width: 104px !important; height: 24px !important; } } /* Tablet reference composition (768–1024px): Figma keeps the Find Your Style * module centered at a readable editorial width instead of stretching each * control across the viewport. */ @media (min-width: 768px) and (max-width: 1024px) { body.home .elementor-959 .elementor-element-fysroot1 > .e-con-inner { width: min(100%, 736px) !important; margin-inline: auto !important; padding: 36px 0 40px !important; column-gap: 48px !important; row-gap: 8px !important; } body.home .elementor-959 .elementor-element-fystitle { min-width: 150px !important; min-height: 58px !important; } body.home .elementor-959 .elementor-element-fysfind1 .elementor-heading-title { font-size: 16px !important; line-height: 1 !important; } body.home .elementor-959 .elementor-element-fyssty01 { /* A true second line: the script starts below, rather than through, * the compact “Find your” heading. */ top: 26px !important; } body.home .elementor-959 .elementor-element-fyssty01 .elementor-heading-title { font-size: 44px !important; line-height: 0.9 !important; } body.home .elementor-959 .elementor-element-fyslink1 { transform: translateY(-4px) !important; } body.home .elementor-959 .elementor-element-fyslink1, body.home .elementor-959 .elementor-element-fyslink1 p { font-size: 14px !important; } body.home .elementor-959 .elementor-element-fyslab01, body.home .elementor-959 .elementor-element-fyslab01 p, body.home .elementor-959 .elementor-element-fyslab01 .elementor-widget-container { font-size: 12px !important; } body.home .elementor-959 .elementor-element-fysshop1, body.home .elementor-959 .elementor-element-fysshop1 > .e-con-inner { gap: 10px !important; } body.home .elementor-959 .elementor-element-fyswom01 .elementor-button, body.home .elementor-959 .elementor-element-fysmen01 .elementor-button, body.home .elementor-959 .elementor-element-fyswom01 a.elementor-button, body.home .elementor-959 .elementor-element-fysmen01 a.elementor-button { min-width: 60px !important; height: 24px !important; min-height: 24px !important; padding: 0 12px !important; font-size: 10px !important; } body.home .elementor-959 .wds-fys-swatches { gap: 8px !important; min-height: 28px !important; } body.home .elementor-959 .wds-fys-swatch { width: 20px !important; height: 20px !important; flex-basis: 20px !important; } body.home .elementor-959 .wds-fys-swatch.is-active { min-width: 42px !important; height: 28px !important; padding-inline: 10px !important; } body.home .elementor-959 .wds-fys-swatch__label { font-size: 11px !important; } body.home .elementor-959 .elementor-element-fysgrid1 { margin-top: 10px !important; } body.home .elementor-959 .elementor-element-fysgrid1 > .e-con-inner, body.home .elementor-959 .elementor-element-fysgrid1 > .wds-fys-track { gap: 6px !important; } body.home .elementor-959 .elementor-element-fyscrd01, body.home .elementor-959 .elementor-element-fyscrd02, body.home .elementor-959 .elementor-element-fyscrd03, body.home .elementor-959 .elementor-element-fyscrd04, body.home .elementor-959 .elementor-element-fyscrd05, body.home .elementor-959 .wds-fys-card { flex-basis: calc((100% - 18px) / 4) !important; } } /* Find Your Style lockup — shared visual rule for the desktop composition. * The title and the handwritten word are intentionally two distinct lines, * matching the Figma reference instead of competing for one baseline. */ @media (min-width: 1025px) { body.home .elementor-959 .elementor-element-fystitle { min-width: 210px !important; min-height: 84px !important; } body.home .elementor-959 .elementor-element-fysfind1 .elementor-heading-title { font-size: 26px !important; line-height: 1 !important; } body.home .elementor-959 .elementor-element-fyssty01 { top: 30px !important; } body.home .elementor-959 .elementor-element-fyssty01 .elementor-heading-title { font-size: 56px !important; line-height: 0.9 !important; } } /* Keep the hero calls-to-action compact once all general mobile rules load. */ @media (max-width: 767px) { body.home .elementor-959 .elementor-element-962fa11 { width: 180px !important; margin-inline: auto !important; } body.home .elementor-959 .elementor-element-962fa11 .elementor-button { width: 180px !important; min-height: 40px !important; height: 40px !important; max-height: 40px !important; padding: 11px 21px !important; font-size: 13px !important; background: rgba(31, 38, 65, 0.28) !important; border: 1px solid rgba(255, 255, 255, 0.94) !important; border-radius: 0 !important; color: #FFFFFF !important; text-decoration: none !important; text-shadow: none !important; box-shadow: none !important; -webkit-tap-highlight-color: transparent !important; } body.home .elementor-959 .elementor-element-962fa11 .elementor-button:hover, body.home .elementor-959 .elementor-element-962fa11 .elementor-button:focus { background: rgba(31, 38, 65, 0.42) !important; color: #FFFFFF !important; text-decoration: none !important; } body.home .elementor-959 .elementor-element-962fa11 .elementor-button-content-wrapper, body.home .elementor-959 .elementor-element-962fa11 .elementor-button-text { text-decoration: none !important; line-height: 1 !important; } body.home .elementor-959 .elementor-element-8a99311 .elementor-button { min-height: 32px !important; height: 32px !important; max-height: 32px !important; font-size: 13px !important; } } /* -------------------------------------------------------------------------- SHOP BY JOBS — pastel strip (d314683 / wds-role-*) Local taxonomy links via .wds-cat-card-link; hover mirrors photo-card lift. -------------------------------------------------------------------------- */ .elementor-959 .elementor-element-d314683 > .e-con-inner { align-items: stretch !important; } .elementor-959 .wds-role-nursing, .elementor-959 .wds-role-veterinary, .elementor-959 .wds-role-dental, .elementor-959 .wds-role-pharmacy, .elementor-959 .wds-role-ophthalmology, .elementor-959 .wds-role-hospitality, .elementor-959 .wds-role-officesupport { --wds-hover-ease: cubic-bezier(0.22, 1, 0.36, 1); --wds-hover-dur: 0.45s; position: relative !important; overflow: hidden !important; cursor: pointer !important; isolation: isolate !important; transition: transform var(--wds-hover-dur) var(--wds-hover-ease), box-shadow var(--wds-hover-dur) var(--wds-hover-ease), filter var(--wds-hover-dur) var(--wds-hover-ease); will-change: transform; } .elementor-959 .wds-role-nursing > .e-con-inner, .elementor-959 .wds-role-veterinary > .e-con-inner, .elementor-959 .wds-role-dental > .e-con-inner, .elementor-959 .wds-role-pharmacy > .e-con-inner, .elementor-959 .wds-role-ophthalmology > .e-con-inner, .elementor-959 .wds-role-hospitality > .e-con-inner, .elementor-959 .wds-role-officesupport > .e-con-inner { position: relative !important; z-index: 2 !important; height: 100% !important; justify-content: flex-end !important; transition: transform var(--wds-hover-dur) var(--wds-hover-ease); } .elementor-959 .wds-role-nursing .elementor-heading-title, .elementor-959 .wds-role-veterinary .elementor-heading-title, .elementor-959 .wds-role-dental .elementor-heading-title, .elementor-959 .wds-role-pharmacy .elementor-heading-title, .elementor-959 .wds-role-ophthalmology .elementor-heading-title, .elementor-959 .wds-role-hospitality .elementor-heading-title, .elementor-959 .wds-role-officesupport .elementor-heading-title { font-family: var(--wds-font-body, 'Inter', sans-serif) !important; font-weight: 500 !important; color: #1F2641 !important; transition: transform var(--wds-hover-dur) var(--wds-hover-ease), color 0.25s ease; } /* Soft lift — same philosophy as photo category cards, lighter for pastels */ @media (hover: hover) and (pointer: fine) { .elementor-959 .wds-role-nursing:hover, .elementor-959 .wds-role-veterinary:hover, .elementor-959 .wds-role-dental:hover, .elementor-959 .wds-role-pharmacy:hover, .elementor-959 .wds-role-ophthalmology:hover, .elementor-959 .wds-role-hospitality:hover, .elementor-959 .wds-role-officesupport:hover, .elementor-959 .wds-role-nursing:focus-within, .elementor-959 .wds-role-veterinary:focus-within, .elementor-959 .wds-role-dental:focus-within, .elementor-959 .wds-role-pharmacy:focus-within, .elementor-959 .wds-role-ophthalmology:focus-within, .elementor-959 .wds-role-hospitality:focus-within, .elementor-959 .wds-role-officesupport:focus-within { transform: translateY(-6px); box-shadow: 0 14px 28px rgba(31, 38, 65, 0.12); filter: saturate(1.06) brightness(0.985); z-index: 2; } .elementor-959 .wds-role-nursing:hover > .e-con-inner, .elementor-959 .wds-role-veterinary:hover > .e-con-inner, .elementor-959 .wds-role-dental:hover > .e-con-inner, .elementor-959 .wds-role-pharmacy:hover > .e-con-inner, .elementor-959 .wds-role-ophthalmology:hover > .e-con-inner, .elementor-959 .wds-role-hospitality:hover > .e-con-inner, .elementor-959 .wds-role-officesupport:hover > .e-con-inner, .elementor-959 .wds-role-nursing:focus-within > .e-con-inner, .elementor-959 .wds-role-veterinary:focus-within > .e-con-inner, .elementor-959 .wds-role-dental:focus-within > .e-con-inner, .elementor-959 .wds-role-pharmacy:focus-within > .e-con-inner, .elementor-959 .wds-role-ophthalmology:focus-within > .e-con-inner, .elementor-959 .wds-role-hospitality:focus-within > .e-con-inner, .elementor-959 .wds-role-officesupport:focus-within > .e-con-inner { transform: translateY(-2px); } .elementor-959 .wds-role-nursing:hover .elementor-heading-title, .elementor-959 .wds-role-veterinary:hover .elementor-heading-title, .elementor-959 .wds-role-dental:hover .elementor-heading-title, .elementor-959 .wds-role-pharmacy:hover .elementor-heading-title, .elementor-959 .wds-role-ophthalmology:hover .elementor-heading-title, .elementor-959 .wds-role-hospitality:hover .elementor-heading-title, .elementor-959 .wds-role-officesupport:hover .elementor-heading-title { color: #6A4972 !important; } } @media (prefers-reduced-motion: reduce) { .elementor-959 .wds-role-nursing, .elementor-959 .wds-role-veterinary, .elementor-959 .wds-role-dental, .elementor-959 .wds-role-pharmacy, .elementor-959 .wds-role-ophthalmology, .elementor-959 .wds-role-hospitality, .elementor-959 .wds-role-officesupport, .elementor-959 .wds-role-nursing > .e-con-inner, .elementor-959 .wds-role-veterinary > .e-con-inner, .elementor-959 .wds-role-dental > .e-con-inner, .elementor-959 .wds-role-pharmacy > .e-con-inner, .elementor-959 .wds-role-ophthalmology > .e-con-inner, .elementor-959 .wds-role-hospitality > .e-con-inner, .elementor-959 .wds-role-officesupport > .e-con-inner { transition: none !important; } }