/* Theme Name: Woodmart Child - Fimed Theme URI: https://fimed.ir Description: Child theme for Woodmart, customized for Fimed medical wear store. Author: Fimed Template: woodmart Version: 1.0.0 Text Domain: woodmart-child */ /* * Design tokens for the Fimed visual identity. * Contract: design/DESIGN.md in the project repo, saved on the site as the * active design "fimed-scrub-teal". * * Why "html:root" and not ":root": Woodmart writes its own token block from * Theme Settings into wp-content/uploads/.../xts-theme_settings_default-*.css, * and WordPress enqueues that file AFTER this stylesheet. A plain ":root" here * loses to it on source order alone, which is why the site kept rendering the * theme-settings font (IRansansX) and radius. "html:root" carries one more * element in the selector, so it wins on specificity no matter the load order. */ html:root { /* Brand color: deep scrub teal, the colour of the garments themselves */ --wd-primary-color: #0F5E63; /* Typography: single variable family (Vazirmatn) across all roles, since pairing two different Persian fonts usually looks mismatched. Hierarchy comes from weight/size instead. Loaded via Google Fonts in functions.php (fimed_child_enqueue_styles). */ --wd-text-font: 'Vazirmatn', Tahoma, sans-serif; --wd-title-font: 'Vazirmatn', Tahoma, sans-serif; --wd-entities-title-font: 'Vazirmatn', Tahoma, sans-serif; --wd-alternative-font: 'Vazirmatn', Tahoma, sans-serif; --wd-widget-title-font: 'Vazirmatn', Tahoma, sans-serif; --wd-header-el-font: 'Vazirmatn', Tahoma, sans-serif; /* Corner radius: moderate/soft instead of Woodmart's near-sharp default (.001px), for a calmer, more modern feel without going full pill-everywhere. */ --wd-brd-radius: 12px; /* Palette roles from DESIGN.md that Woodmart has no token for. */ --fimed-ink: #0E1F22; --fimed-surface: #EEF5F4; --fimed-line: #D5E3E1; /* Soft coral is a ground, never text. Sanctioned use is the sale badge only, with ink text on top. */ --fimed-badge: #F4D4C6; /* Phase L (Apple/HIG polish): structural tokens, mirroring the ERP panel's canvas/separator/fill roles. Colours stay on the teal palette. */ --fimed-canvas: #F5F8F7; --fimed-separator: rgba(14, 31, 34, .12); --fimed-fill: rgba(14, 31, 34, .06); --fimed-blur: saturate(180%) blur(20px); --fimed-ease: cubic-bezier(.2, .8, .2, 1); --fimed-dur: .2s; } /* * Desktop main menu (header-bottom, menu 17). * * Theme Settings gives header elements 13px + uppercase, which reads as * too small for primary navigation and uppercase does nothing in Persian. * The variables are scoped to the main nav only, so cart/account labels * in the header keep their compact size. */ .whb-header .wd-nav-main { --wd-header-el-font-size: 15px; --wd-header-el-font-weight: 600; --wd-header-el-transform: none; } /* * Hero call to action. * * Woodmart sizes its own button classes from Theme Settings (13px text, * 5px radius, tight padding), which is too small for a hero and off the * radius scale. The widget carries the class "fimed-cta", and these rules * put it back on the design tokens: 16px/600 text, 12px radius, generous * hit area. Specificity beats the theme's single-class button rule, so * load order does not matter here either. */ .fimed-cta .btn { padding: 16px 32px; font-family: 'Vazirmatn', Tahoma, sans-serif; font-size: 16px; font-weight: 600; line-height: 1.2; border-radius: 12px; box-shadow: none; } /* * Hero overlap fix (elementor-13 / section 23b77e4d). * * post-13.css sets margin-top:-126px and padding-top:168px on this section, * a leftover from an old overlay-style hero design. Without a breakpoint, * the negative pull is only offset by the hero's own 80px bottom padding on * desktop; on mobile the hero's bottom padding is 32px, so this section * still slides up and buries the CTA button underneath it. * * elementor-mcp/elementor-edit-element cannot write this directly: it has a * hard-coded widget-registration check that misreads plain elType:"section" * elements (no widgetType) as an unregistered widget named "section" and * aborts before touching settings. This override reaches the same visual * result from the child theme instead. The wrong values stay stored inside * Elementor itself — this is acknowledged technical debt (see * quirky-growing-moth plan, Step 1 fallback). */ .elementor-13 .elementor-element.elementor-element-23b77e4d { margin-top: 0; padding-top: 64px; } @media (max-width: 767px) { .elementor-13 .elementor-element.elementor-element-23b77e4d { padding-top: 32px; } } /* * Hero image radius/shadow fix (elementor-13 / hero carousel fimedhero1). * * Originally scoped to the single hero image widget (2c7d701), replaced * 2026-09-16 by an image-carousel widget (fimedhero1) with the same 4-image * slider request; selector/id updated to match, same fix still applies since * the carousel widget renders plain tags per slide. * * Theme Settings' generated stylesheet * (wp-content/uploads/2026/07/xts-theme_settings_default-1785399256.css) forces * every Elementor image widget to a 20px radius plus a two-layer drop shadow, * both with !important: * * .elementor-widget-image img { * border-radius: 20px !important; * box-shadow: 0 20px 25px -5px rgba(15,23,42,.08), 0 8px 10px -6px rgba(15,23,42,.04) !important; * } * * That overrides the 12px radius post-13.css sets on this widget, and adds an * elevation the design contract says should be nearly absent. That generated * stylesheet lives in the database (Theme Settings), not the repo, so instead * of editing it directly (out of scope — it also carries unrelated teal * button/product-card rules, see quirky-growing-moth plan's "خارج از دامنه" * section), this scopes a higher-specificity !important override to just this * widget. */ .elementor-13 .elementor-element.elementor-element-fimedhero1 img { border-radius: 12px !important; box-shadow: none !important; } /* * Site-wide Elementor button color fix. * * The same theme-settings stylesheet hard-codes a teal (#0d9488, hover * #0f766e) background on every Elementor button, unrelated to the brand * teal (--wd-primary-color: #0F5E63) set above: * * .elementor-button-wrapper a.elementor-button { background-color: #0d9488 !important; ... } * .elementor-button-wrapper a.elementor-button:hover { background-color: #0f766e !important; ... } * .elementor-element .elementor-button { background-color: #0d9488 !important; ... } * * These are plain class selectors (no page scope), loaded after this * stylesheet, so an equal-specificity rule here would still lose on source * order. Prefixing with "body" adds one type selector to win the tie-break * without touching the generated file (also out of scope, see hero image * fix above). Hover uses --fimed-ink (#0E1F22), the near-black teal ink * already in the palette, instead of introducing a new color. */ body .elementor-button-wrapper a.elementor-button, body .elementor-element .elementor-button { background-color: #0F5E63 !important; box-shadow: none !important; } body .elementor-button-wrapper a.elementor-button:hover { background-color: #0E1F22 !important; box-shadow: none !important; transform: translateY(-3px); } /* * Product card radius fix (product-grid-item / wd-product). * * Same generated stylesheet sets border-radius: 16px !important on product * cards, one step off the design contract's 12px card radius (DESIGN.md: * 12px for buttons/cards/images, 20px reserved for large bento sections). * The drop shadows themselves are neutral (rgba(0,0,0,...)), not off-brand, * so only the radius needs correcting here. */ body .product-grid-item, body .wd-product { border-radius: 12px !important; } /* * Same stylesheet also sets overflow: hidden !important on the card, which * clips Woodmart's hover overlay (.content-product-imagin grows ~50px below * the card to reveal add-to-cart/quickview). Let it overflow; keep the round * corners on the image and the overlay instead. */ body .products .product-grid-item.wd-product { overflow: visible !important; } body .wd-product .product-element-top, body .wd-product .content-product-imagin { border-radius: 12px; overflow: hidden; } /* * Legacy text/title/link color remnants. * * Theme Settings' generated stylesheet still carries an older, lower-specificity * ":root" block (not "html:root") with its own text/title/link colors that never * matched DESIGN.md's ink/secondary tokens: --wd-text-color:#777777, * --wd-title-color:#242424, --wd-entities-title-color:#333333, * --wd-widget-title-color:#333, --wd-link-color:#333333. Our "html:root" block * above only ever redefined font/radius/brand-color tokens, so these legacy * values kept rendering untouched. Brought in line with DESIGN.md here: * --fimed-ink (#0E1F22) for titles/links, a new secondary gray (#4E6668) for * body text, matching the contract's "متن #0E1F22، ثانویه #4E6668". */ html:root { --wd-text-color: #4E6668; --wd-title-color: #0E1F22; --wd-entities-title-color: #0E1F22; --wd-widget-title-color: #0E1F22; --wd-link-color: #0E1F22; --wd-link-color-hover: #0F5E63; } /* * Global Elementor image radius/shadow fix. * * The hero-image override above (elementor-element-fimedhero1) only scopes to * that one widget. The same theme-settings rule it fights * (".elementor-widget-image img { border-radius:20px !important; box-shadow: ... !important; }") * is unscoped and hits every other Elementor image on the site (category * thumbnails, blog thumbnails, etc.), leaving them at the off-brand 20px radius * and double drop-shadow. This applies the same 12px/no-shadow correction * site-wide instead of widget-by-widget. */ body .elementor-widget-image img { border-radius: 12px !important; box-shadow: none !important; } /* * Hero CTA hover color off palette (elementor-13 / button 5c9e8be). * * This button is a Woodmart button widget (wd-button), not a plain Elementor * button, so it isn't covered by the site-wide ".elementor-button" fix above. * Its default state uses the brand accent (Theme Settings "btns_shop_bg"), * but its hover state was hand-set to #2A3E63, * a one-off shade that isn't part of the DESIGN.md palette. Replaced with * --fimed-ink (#0E1F22), the same ink used for every other button's * hover state, for a consistent hover language across the site. */ body .elementor-13 .elementor-element.elementor-element-5c9e8be .wd-button-wrapper:hover a { background-color: #0E1F22 !important; border-color: #0E1F22 !important; } /* * Hero full-width restructure (elementor-13 / containers 65a3131, 5e93e3f, * 446bc07, carousel fimedhero1). * * User feedback: the hero carousel looked small compared to typical * full-bleed hero sliders. Root cause was structural, not just image * resolution — the hero was a 46%/54% two-column split (text | image), so * even a landscape/high-res photo would only ever fill the narrow 54% * column. User picked "full-width structure" (تمام‌عرض) over enlarging the * column or waiting for new images. * * This stacks the two containers (text on top, image band below, same DOM * order on every breakpoint — no more column-reverse on mobile) and lets the * image container break out of Elementor's boxed content width to the full * viewport edge, per the design skill's "images that break their frame" * signature move. These are containers (elType, no widgetType) so per the * structural-element rule this is a CSS-only override, never * elementor-edit-element. * * Caveat carried forward, not fixed here: the 4 carousel images (media * 222-225) are native 180x320px portrait scans, quite low-res. object-fit: * cover on a wide band crops most of the frame width-wise and will look * soft when upscaled. Flagged to the user; needs proper landscape/high-res * photography later, not something CSS can fix. */ .elementor-13 .elementor-element.elementor-element-23b77e4d { overflow-x: hidden; } .elementor-13 .elementor-element.elementor-element-65a3131 { flex-direction: column !important; gap: 32px !important; } .elementor-13 .elementor-element.elementor-element-5e93e3f { width: 100% !important; max-width: 640px; margin: 0 auto; text-align: center; } .elementor-13 .elementor-element.elementor-element-5e93e3f .elementor-heading-title, .elementor-13 .elementor-element.elementor-element-5e93e3f .elementor-widget-text-editor { text-align: center; } /* * Hero text card (elementor-13 / container 5e93e3f). * * After the full-width restructure above, the heading + paragraph sat * directly on the page's white background with nothing to anchor them — * no card, no ground. DESIGN.md's bento tiles use the #EEF5F4 surface as * their own ground instead of a border, and reserve the 20px radius step * for large sections like this one (12px is the card/button/image scale). * Structural container (elType, no widgetType), so per the structural- * element rule this is a CSS override, not elementor-edit-element. */ .elementor-13 .elementor-element.elementor-element-5e93e3f { background-color: #EEF5F4; border-radius: 20px; padding: 48px 56px !important; } @media (max-width: 767px) { .elementor-13 .elementor-element.elementor-element-5e93e3f { padding: 28px 20px !important; } } /* * Hero image band (elementor-13 / container 446bc07) — full-bleed to the * physical LEFT edge only. * * Note on the rule above: `flex-direction: column` on 65a3131 is a no-op. * 65a3131 is an `e-con-boxed` container, so the real flex container is its * `.e-con-inner` child, which stays `row`. The hero therefore lays out * side-by-side on desktop (text card right, image band left, RTL), and only * stacks on mobile via Elementor's own breakpoint. * * Bleeding on BOTH sides broke that row. Flex sizes an item by its OUTER * box, so the two negative margins (2 x -(50vw - 50%)) let the border box * grow far wider than the space the item actually occupies — the painted * image ran back underneath the text card. The overlap scaled with the * viewport (26px at 1440, 206px at 1800, 306px at 2000), which is why it * only became obvious when zooming the browser out below 100%. * * Fix: bleed only on the side facing the viewport edge. This is RTL, so the * image sits on the physical left and `margin-right` is the side facing the * text — it must stay 0 so flex keeps the gap honest. Below Elementor's * 768px breakpoint the children stack, so both sides bleed again there. */ .elementor-13 .elementor-element.elementor-element-446bc07 { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; } @media (min-width: 768px) { .elementor-13 .elementor-element.elementor-element-446bc07 { margin-right: 0 !important; } } .elementor-13 .elementor-element.elementor-element-446bc07 .elementor-image-carousel, .elementor-13 .elementor-element.elementor-element-446bc07 .swiper, .elementor-13 .elementor-element.elementor-element-446bc07 .swiper-wrapper, .elementor-13 .elementor-element.elementor-element-446bc07 .swiper-slide { height: 460px; } .elementor-13 .elementor-element.elementor-element-fimedhero1 img { width: 100%; height: 460px !important; object-fit: cover; object-position: center; border-radius: 12px !important; } @media (max-width: 1024px) { .elementor-13 .elementor-element.elementor-element-446bc07 .elementor-image-carousel, .elementor-13 .elementor-element.elementor-element-446bc07 .swiper, .elementor-13 .elementor-element.elementor-element-446bc07 .swiper-wrapper, .elementor-13 .elementor-element.elementor-element-446bc07 .swiper-slide { height: 380px; } .elementor-13 .elementor-element.elementor-element-fimedhero1 img { height: 380px !important; } } @media (max-width: 767px) { .elementor-13 .elementor-element.elementor-element-446bc07 .elementor-image-carousel, .elementor-13 .elementor-element.elementor-element-446bc07 .swiper, .elementor-13 .elementor-element.elementor-element-446bc07 .swiper-wrapper, .elementor-13 .elementor-element.elementor-element-446bc07 .swiper-slide { height: 300px; } .elementor-13 .elementor-element.elementor-element-fimedhero1 img { height: 300px !important; } } /* * Footer link-list color fix (elementor-77 / widgets 3cccdb2, 5494670). * * These two text-editor widgets ("لینک‌های مفید" and "دسترسی سریع") set * text_color:#FFFFFF via Elementor, which only writes * ".elementor-element- { color: #FFFFFF }" on the widget container. The * theme's base stylesheet has "a { color: var(--wd-link-color) }" — a rule * that targets the element directly, so it wins over the ancestor's * inherited color no matter how much more specific the ancestor selector is * (an explicit rule on the element beats inheritance from a parent). Since * --wd-link-color resolves to the ink token, the tags inside these * lists stayed dark ink on the teal footer background instead of turning * white. This targets the anchors themselves. */ .elementor-77 .elementor-element.elementor-element-3cccdb2 a, .elementor-77 .elementor-element.elementor-element-5494670 a { color: #FFFFFF; } /* * Whole-card click affordance (elementor-13 product cards). * * Woodmart's "tiled" hover style only makes the image itself a link * (a.product-image-link); the rest of the card (title/price/padding) is a * plain div. js/whole-card-click.js makes the full card surface navigate, * matching the ibolak product-card mechanic the user asked to adopt. This * just adds the pointer cursor over that now-clickable extra area so it * reads as clickable, without touching existing interactive elements' * own cursor styles. */ .elementor-13 .wd-product { cursor: pointer; } .elementor-13 .wd-product a, .elementor-13 .wd-product button { cursor: pointer; } /* * Mobile header top gap (.whb-main-header). * * Woodmart's header wrapper carries a symmetric 10px top/bottom padding * (Theme Settings default, not something this stylesheet set). The bottom * 10px is invisible — it sits between the white general-header row and the * white body background. The top 10px is not: it shows as a white sliver * of body background above the teal top-bar row (.whb-top-bar, * background #0F172A), which reads as a rendering glitch rather than * design intent. Scoped to mobile since that's where it was flagged; * bottom padding is left untouched since it isn't visible. * * The generated Theme Settings stylesheet sets this with * "padding: 10px 0 !important" (same file as the button/image-radius fixes * above), so a plain padding-top here — even scoped to mobile — always lost * to it regardless of source order. Needs the same "body" specificity bump * plus !important used elsewhere in this file to actually win. */ @media (max-width: 767px) { body .whb-main-header { padding-top: 0 !important; } } /** * Featured Products section (77cbcc6e, post_id 13) had an off-brand dark * gradient background (#121111, 350deg) plus a decorative "about-pattern.png" * overlay left over from the Woodmart demo — neither is in the active design * tokens (flat #FFFFFF/#EEF5F4 surfaces only, no gradients/textures). * Structural section element (elType: section, no widgetType), so per the * known elementor-edit-element bug this must be a CSS override, not an * edit-element call. */ .elementor-13 .elementor-element.elementor-element-77cbcc6e { background: #EEF5F4 !important; } .elementor-13 .elementor-element.elementor-element-77cbcc6e > .elementor-background-overlay { display: none !important; } /** * Homepage product grids (568721e5 "sale" products, 12af491b "newest" tabs) * reserve a fixed track count (grid-columns-4 / grid-columns-5, from each * widget's Elementor "columns" control) regardless of how many products the * underlying query actually returns. Both currently return 1 product, so * 3-4 tracks render empty, leaving a large blank gap at 1440px. * * Not fixed by lowering "columns" in Elementor: that control is a static * number, and these are dynamic queries (on-sale items, per-tab category * listings) whose result count changes over time — a hardcoded value would * just move the same bug to a different product count later. * "auto-fit" is the CSS-native version of the same idea: it sizes as many * tracks as there are items (up to minmax's cap) and collapses the rest to * 0 width, so the grid always matches actual content instead of a fixed * number carried over from Theme Settings/widget defaults. */ .elementor-13 .elementor-element-568721e5 .products.wd-products, .elementor-13 .elementor-element-12af491b .products.wd-products { grid-template-columns: repeat(auto-fit, minmax(240px, 300px)) !important; justify-content: start !important; } /** * Mobile header cart count bubble (.wd-cart-number) sat ON TOP of the bag * glyph instead of at its corner, so at 390px roughly half the icon was * hidden behind the solid teal circle. * * Nothing is clipped here — the whole cart cluster is inside the viewport * (document scrollWidth == 390, every ancestor overflow: visible). The * bubble is absolutely positioned against .wd-tools-icon (a 20x20 relative * box) at left:-9px / right:14px, and since this is an RTL document the * `right` value wins — landing the 15x15 circle at x 10.7..25.7 over an icon * spanning 19.7..39.7. * * Moving it further left is not an option: .whb-mobile-right carries * margin-left:-10px, so the cart link already starts at x 9.7 with the * container's 15px gutter as the only slack. Instead the bubble goes to the * top-PHYSICAL-right corner, where the link box (ends at x 49.7) has room — * the standard badge position, clearing the bag body entirely. * * Scoped to the Header Builder rows and the mobile breakpoint so the * bottom-toolbar cart (.wd-toolbar-shop), which is laid out differently, * keeps its own badge placement. */ @media (max-width: 767px) { body .whb-header .wd-header-cart .wd-cart-number { inset-inline-start: auto !important; inset-inline-end: auto !important; left: auto !important; right: -8px !important; top: -8px !important; } } /* * Brands section (elementor-13 / container fimedbrands): [fimed_brands] * renders nothing until a real (active, non-test) brand exists, which would * leave an empty 64px padded container. Hide it until the shortcode outputs. */ .elementor-13 .elementor-element.elementor-element-fimedbrands:not(:has(.fimed-brands)) { display: none !important; } /* * Category tiles (elementor-13 / html widget f539b6f in section 23b77e4d). * The widget holds markup only; styling lives here. 5 tiles: * mobile 2+2+1 (last tile spans both columns), desktop 3+2 on a 6-col grid. * Photo tiles for categories with photography; token-colored icon tiles * (crocs, caps) until real photos exist. Tokens: design/DESIGN.md. */ .fimed-cats { background: #EEF5F4; border-radius: 20px; padding: 32px 16px; direction: rtl; } .fimed-cats__title { margin: 0 0 4px !important; font-size: 26px !important; font-weight: 800 !important; line-height: 1.2 !important; color: #0E1F22 !important; } .fimed-cats__sub { margin: 0 0 20px; font-size: 15px; color: #4E6668; } .fimed-cats__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .fimed-cats__grid > li { margin: 0; min-width: 0; } .fimed-cat { display: flex; flex-direction: column; height: 100%; background: #FFFFFF; border: 1px solid #D5E3E1; border-radius: 12px; overflow: hidden; text-decoration: none !important; color: #0E1F22; transition: border-color .15s; } .fimed-cat:hover, .fimed-cat:focus-visible { border-color: #0F5E63; } .fimed-cat:focus-visible { outline: 2px solid #0F5E63; outline-offset: 2px; } .fimed-cat__media { display: grid; place-items: center; aspect-ratio: 3 / 4; background: #FFFFFF; color: #0F5E63; } .fimed-cat__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; } .fimed-cat--soon .fimed-cat__media { background: #EEF5F4; } /* Mobile only: a lone last tile spans the row as a wide banner (2+2+1). */ @media (max-width: 767px) { .fimed-cats__grid > li:last-child:nth-child(odd) { grid-column: 1 / -1; } .fimed-cats__grid > li:last-child:nth-child(odd) .fimed-cat__media { aspect-ratio: 2 / 1; } } .fimed-cat__name { display: block; padding: 12px; font-size: 15px; font-weight: 700; line-height: 1.4; text-align: center; } @media (min-width: 768px) { .fimed-cats { padding: 40px; } .fimed-cats__title { font-size: 34px !important; } .fimed-cats__sub { margin-bottom: 28px; font-size: 17px; } .fimed-cats__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; } .fimed-cats__grid > li { grid-column: span 2; } /* Desktop: 4:5 instead of 3:4 so the 3-up row doesn't fill the viewport. */ .fimed-cat__media { aspect-ratio: 4 / 5; } .fimed-cats__grid > li:nth-child(n+4) { grid-column: span 3; } .fimed-cats__grid > li:nth-child(n+4) .fimed-cat__media { aspect-ratio: 2 / 1; } } @media (prefers-reduced-motion: reduce) { .fimed-cat { transition: none; } } /* Phase D: hide "newest" product tabs (wd_products_tabs 12af491b); with ~1 product it duplicates "featured". TODO: restore when products > ~8 */ .elementor-13 .elementor-element.elementor-element-12af491b { display: none !important; } /* * Sale badge (phase G, Scrub Teal). * * Woodmart paints ".product-label.onsale" with --wd-primary-color and white * text, which would make the sale badge a second teal button. DESIGN.md * rations the soft coral to this one element: coral ground, ink text, 8px * radius. "body" wins the tie with the theme's two-class rule. */ body .product-label.onsale { background-color: var(--fimed-badge); color: var(--fimed-ink); border-radius: 8px; } /* * Phase G step 3.4 audit fixes (items 10-15). * * The flat Scrub Teal cards use a 1px line instead of Woodmart's soft grey * shadows; H2s share one size so the homepage reads as one system; the * struck-out price and header tools move off the theme's #BBB/#333 greys onto * tokens; radii snap to the 8px input / 12px button scale. */ body .wd-product, body .product-wrapper, body .wd-post-inner.article-inner { box-shadow: none !important; } body .wd-post-inner.article-inner { border: 1px solid var(--fimed-line); border-radius: 12px; overflow: hidden; } body .wd-post-date.wd-style-with-bg { box-shadow: none !important; } body .fimed-assistant__title, body .fimed-brands__title, body .fimed-cats__title, .elementor-13 .elementor-element-21cbaf65 .elementor-heading-title, .elementor-13 .elementor-element-2266e3a8 .woodmart-title-container { font-size: 26px !important; font-weight: 800 !important; line-height: 1.2 !important; color: var(--fimed-ink) !important; } @media (min-width: 768px) { body .fimed-assistant__title, body .fimed-brands__title, body .fimed-cats__title, .elementor-13 .elementor-element-21cbaf65 .elementor-heading-title, .elementor-13 .elementor-element-2266e3a8 .woodmart-title-container { font-size: 34px !important; } } body del, body del .amount, body del .woocommerce-Price-amount { color: #4E6668 !important; } body .whb-header .wd-tools-element > a, body .whb-header .wd-tools-text, body .whb-header .wd-tools-icon, body .whb-header .wd-cart-subtotal, body .whb-header .wd-cart-subtotal .amount { color: var(--fimed-ink) !important; } body input.s, body .searchform input[type="text"], body .login input.input-text, body .woocommerce-form-login input.input-text, body .fimed-assistant__input { border-radius: 8px !important; } body .login .button, body .woocommerce-form-login .button, body .btn.wc-backward, body .wd-replies-count { border-radius: 12px !important; } /* ---- Phase G step 3.4 batch 2 (items 3, 4) ---- */ /* Item 3: featured products hidden — only 1 published product. Remove this rule once there are >= 4. */ body .elementor-13 .elementor-element.elementor-element-77cbcc6e { display: none !important; } /* Item 4: tighter gap under header (Woodmart adds 40px content padding) */ body.home main.wd-content-layout { padding-top: 0 !important; } body .elementor-13 .elementor-element.elementor-element-65a3131 { padding-top: 32px !important; } /* Slider bleeds to the viewport edge: no radius on the edge side */ @media (min-width: 768px) { body .elementor-13 .elementor-element.elementor-element-446bc07 .fimedhero1 img, body .elementor-13 .elementor-element.elementor-element-446bc07 img { border-radius: 0 12px 12px 0 !important; } } @media (max-width: 767px) { body .elementor-13 .elementor-element.elementor-element-65a3131 { padding-top: 16px !important; } body .elementor-13 .elementor-element.elementor-element-446bc07 img { border-radius: 0 !important; } } /* Product hover action pill: flat, token radius */ body .wd-buttons.wd-pos-r-t { box-shadow: none !important; border: 1px solid var(--fimed-line, #D5E3E1); border-radius: 12px !important; } /* Elementor repeats the container padding on the boxed inner wrapper */ body .elementor-13 .elementor-element.elementor-element-65a3131 > .e-con-inner { padding-top: 0 !important; } /* ---- Phase G step 3.4 items 8, 9: hide placeholder content until real content exists ---- */ /* Item 8: "coming soon" category tiles (Crocs, caps) have no photos. Remove once they get images. */ body .fimed-cats__grid > li:has(> .fimed-cat--soon) { display: none !important; } @media (max-width: 767px) { /* Lone 3rd tile (lab coat): same 3:4 size as the others, centred in its row */ body .fimed-cats__grid > li:nth-child(3) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 6px); } body .fimed-cats__grid > li:nth-child(3) .fimed-cat__media { aspect-ratio: 3 / 4; } } /* Item 9: blog section only shows the default WP post. Remove once real posts exist. */ body .elementor-13 .elementor-element.elementor-element-3e482bd5 { display: none !important; } /* * Themed alert modal (js/styled-alert.js replaces window.alert on product * pages). Tokens from DESIGN.md: 20px large radius, ink/accent/line. */ .fimed-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(14, 31, 34, 0.5); } .fimed-modal[hidden] { display: none; } html.fimed-modal-open { overflow: hidden; } .fimed-modal__box { width: 100%; max-width: 400px; padding: 32px 24px 24px; text-align: center; background: #fff; border: 1px solid var(--fimed-line); border-radius: 20px; box-shadow: 0 16px 48px rgba(14, 31, 34, 0.18); animation: fimed-modal-in 0.18s ease-out; } .fimed-modal__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 16px; font-size: 24px; font-weight: 800; color: #0F5E63; background: var(--fimed-surface); border-radius: 50%; } .fimed-modal__msg { margin: 0 0 24px; font-size: 16px; line-height: 1.65; color: var(--fimed-ink); } .fimed-modal__btn { min-width: 140px; padding: 12px 24px; font-family: inherit; font-size: 15px; font-weight: 700; color: #fff; cursor: pointer; background: var(--fimed-ink); border: 0; border-radius: 12px; transition: background-color 0.15s; } .fimed-modal__btn:hover, .fimed-modal__btn:focus-visible { background: #0F5E63; } @keyframes fimed-modal-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .fimed-modal__box { animation: none; } } /* * Phase L step 2: glass sticky header (.whb-general-header). * * Header Builder row "general-header" is now sticky (was whb-not-sticky-row, * so nothing stuck before) and the global sticky_shadow switch is off. Woodmart * adds .whb-sticked to the row once it sticks; at rest the row keeps its normal * white ground. The glass only appears while stuck, so the page top is unchanged. * Solid white fallback for browsers without backdrop-filter. No dark-mode rules: * product photos sit on studio white. */ body .whb-general-header.whb-sticked, body .whb-sticked .whb-general-header { background-color: #fff; box-shadow: none; border-bottom: 1px solid var(--fimed-separator); } @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) { body .whb-general-header.whb-sticked, body .whb-sticked .whb-general-header { background-color: rgba(255, 255, 255, .72); -webkit-backdrop-filter: var(--fimed-blur); backdrop-filter: var(--fimed-blur); } } /* * Phase L step 3: buttons and inputs (HIG feel, teal palette). * * Touch target 44px, radius per DESIGN.md (12px buttons, 8px inputs), a soft * 4px teal focus halo instead of the theme's default outline, and a pressed * scale. Scoped to real form controls and Woodmart/WooCommerce button classes * so icon buttons, qty steppers and swatches keep their own sizing. */ body .btn, body .button, body .single_add_to_cart_button, body button[type="submit"], body input[type="submit"] { min-height: 44px; border-radius: 12px; box-shadow: none; transition: transform var(--fimed-dur) var(--fimed-ease), background-color var(--fimed-dur) var(--fimed-ease), border-color var(--fimed-dur) var(--fimed-ease), box-shadow var(--fimed-dur) var(--fimed-ease); } body .btn:active, body .button:active, body .single_add_to_cart_button:active, body button[type="submit"]:active, body input[type="submit"]:active { transform: scale(.98); } body input[type="text"], body input[type="email"], body input[type="tel"], body input[type="password"], body input[type="number"]:not(.qty), body input[type="search"], body textarea, body select { min-height: 44px; border-radius: 8px; border: 1px solid var(--fimed-separator); transition: border-color var(--fimed-dur) var(--fimed-ease), box-shadow var(--fimed-dur) var(--fimed-ease); } body input[type="text"]:focus, body input[type="email"]:focus, body input[type="tel"]:focus, body input[type="password"]:focus, body input[type="number"]:not(.qty):focus, body input[type="search"]:focus, body textarea:focus, body select:focus { outline: 0; border-color: #0F5E63; box-shadow: 0 0 0 4px rgba(15, 94, 99, .25); } body .btn:focus-visible, body .button:focus-visible, body .single_add_to_cart_button:focus-visible, body button[type="submit"]:focus-visible { outline: 0; box-shadow: 0 0 0 4px rgba(15, 94, 99, .25); } @media (prefers-reduced-motion: reduce) { body .btn, body .button, body .single_add_to_cart_button, body button[type="submit"], body input[type="submit"] { transition: none; } body .btn:active, body .button:active, body .single_add_to_cart_button:active, body button[type="submit"]:active, body input[type="submit"]:active { transform: none; } } /* Phase L step 4: segmented size picker (js/size-segmented.js). Track = fill with 4px padding, selected item = white pill with soft teal-tinted shadow. The source