/** * UMA — Ultimate Magical Aromas * Main stylesheet — extends Woostify * * Structure: * 1. Design tokens (colors, spacing, typography) * 2. Base + typography * 3. Layout fixes (top padding, container widths) * 4. Product page — new sections (scent story, notes, ritual, care) * 5. Trust badges * 6. Buy Now button * 7. Sticky ATC restyle * 8. Review form */ /* ============================================================ 1. DESIGN TOKENS ============================================================ */ :root { /* Brand */ --uma-green: #013220; --uma-green-hover: #024B2E; --uma-gold: #B8860B; --uma-gold-hover: #D4A017; /* Neutrals */ --uma-cream: #F8F4EC; --uma-off-white: #FFFDF8; --uma-text: #1A1A1A; --uma-text-muted: #6B6B6B; --uma-border: #E5E0D8; --uma-sale: #8B2E20; /* Typography */ --uma-font-serif: "Fraunces", Georgia, "Times New Roman", serif; --uma-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Spacing scale (multiples of 8) */ --uma-space-1: 8px; --uma-space-2: 16px; --uma-space-3: 24px; --uma-space-4: 32px; --uma-space-5: 48px; --uma-space-6: 64px; --uma-space-7: 96px; /* Motion */ --uma-ease: cubic-bezier(0.4, 0.0, 0.2, 1); --uma-fast: 180ms; --uma-med: 320ms; } /* ============================================================ 2. BASE + TYPOGRAPHY ============================================================ */ body, body.woocommerce, body.woocommerce-page { font-family: var(--uma-font-sans); color: var(--uma-text); background: var(--uma-cream); font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6, .woocommerce div.product .product_title, .woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--uma-font-serif); color: var(--uma-text); font-weight: 500; letter-spacing: -0.01em; } .uma-eyebrow { font-family: var(--uma-font-sans); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--uma-gold); font-weight: 600; margin-bottom: var(--uma-space-1); } /* ============================================================ 3. LAYOUT FIXES ============================================================ */ /* --- Header logo sizing. Target by attachment class (wp-image-1687) + wrapper class. The header uses Woostify's
, NOT Elementor's location wrapper — so previous selectors missed. */ /* Logo sizing — new 800x540 SVG scales cleanly. Explicit height forces scale (either up or down) with width:auto for proportional width. */ body img.wp-image-1689, /* current: transparent 800x540 SVG */ body img.wp-image-1688, /* legacy: same design, non-transparent */ body img.wp-image-1687, /* legacy: 300x300 original */ body .elementor-widget-image img[src*="UMA-Logo-Design"], body .elementor-widget-image img.attachment-large, body .site-branding img, body img.custom-logo, body #masthead .elementor-widget-image img { height: 120px !important; width: auto !important; max-width: none !important; object-fit: contain; display: block; } @media (max-width: 1024px) { body img.wp-image-1689, body img.wp-image-1688, body img.wp-image-1687, body .elementor-widget-image img[src*="UMA-Logo-Design"], body .elementor-widget-image img.attachment-large, body .site-branding img, body img.custom-logo, body #masthead .elementor-widget-image img { height: 88px !important; } } @media (max-width: 480px) { body img.wp-image-1689, body img.wp-image-1688, body img.wp-image-1687, body .elementor-widget-image img[src*="UMA-Logo-Design"], body .elementor-widget-image img.attachment-large, body .site-branding img, body img.custom-logo, body #masthead .elementor-widget-image img { height: 64px !important; } } /* --- Center column: "ULTIMATE MAGICAL AROMAS" wordmark ABOVE nav --- */ #masthead .elementor-element-33f807e > .elementor-widget-wrap { flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 1px; /* space between brand text and nav row */ padding-top: 14px !important; /* pushes brand text down from top */ padding-bottom: 0 !important; } #masthead .elementor-element-33f807e > .elementor-widget-wrap::before { content: "ULTIMATE MAGICAL AROMAS"; display: block; text-align: center; font-family: var(--uma-font-serif); font-size: 30px; letter-spacing: 0.06em; color: var(--uma-green); font-weight: 500; line-height: 1; width: 100%; } @media (max-width: 1200px) { #masthead .elementor-element-33f807e > .elementor-widget-wrap::before { font-size: 24px; } } @media (max-width: 1024px) { #masthead .elementor-element-33f807e > .elementor-widget-wrap::before { font-size: 18px; } } @media (max-width: 768px) { #masthead .elementor-element-33f807e > .elementor-widget-wrap::before { display: none; /* mobile: rely on logo alone, save vertical space */ } } /* --- Nav items styling: UMA typography + colors + animated underline --- */ /* Force the nav UL to flex + gap so item spacing is predictable (overrides HFE's per-item margin approach) */ #masthead .elementor-element-33f807e .hfe-nav-menu, #masthead .elementor-element-33f807e .hfe-nav-menu__layout-horizontal .hfe-nav-menu { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; column-gap: 36px !important; row-gap: 12px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } /* Kill HFE's per-item margin so gap is the sole spacer */ #masthead .elementor-element-33f807e .hfe-nav-menu > li.menu-item, #masthead .elementor-element-33f807e .hfe-nav-menu > li.menu-item:not(:last-child) { margin: 0 !important; padding: 0 !important; } /* The hugs its text — no horizontal padding, so underline = text width */ #masthead .elementor-element-33f807e a.hfe-menu-item { font-family: var(--uma-font-sans) !important; font-size: 14px !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; font-weight: 500 !important; color: var(--uma-text) !important; transition: color var(--uma-fast) var(--uma-ease); padding: 2px 0 !important; line-height: 1.2 !important; position: relative; background: transparent !important; display: inline-block !important; white-space: nowrap; } /* Animated underline: hugs the text, expands from left→right */ #masthead .elementor-element-33f807e a.hfe-menu-item::after { content: "" !important; display: block !important; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px; background: var(--uma-green); transform: scaleX(0); transform-origin: left center; transition: transform 500ms cubic-bezier(0.65, 0, 0.35, 1); pointer-events: none; } /* Only hover triggers the underline. Active/current NO LONGER auto-underlined — was confusing (HOME always underlined on homepage even without hover). */ #masthead .elementor-element-33f807e a.hfe-menu-item:hover::after { transform: scaleX(1); } #masthead .elementor-element-33f807e a.hfe-menu-item:hover { color: var(--uma-green) !important; } /* Kill any before pseudo */ #masthead .elementor-element-33f807e a.hfe-menu-item::before { display: none !important; } /* Submenu chevron: hide the (broken) FA icon and render our own small caret */ #masthead .elementor-element-33f807e .hfe-menu-toggle, #masthead .elementor-element-33f807e .hfe-menu-toggle i { display: none !important; } #masthead .elementor-element-33f807e li.menu-item-has-children > .hfe-has-submenu-container > a.hfe-menu-item::before { content: "" !important; display: none !important; } #masthead .elementor-element-33f807e li.menu-item-has-children > .hfe-has-submenu-container > a.hfe-menu-item { padding-right: 14px !important; } #masthead .elementor-element-33f807e li.menu-item-has-children > .hfe-has-submenu-container::after { content: ""; position: absolute; right: -4px; top: 50%; width: 6px; height: 6px; border-right: 1.5px solid var(--uma-text); border-bottom: 1.5px solid var(--uma-text); transform: translateY(-70%) rotate(45deg); pointer-events: none; } #masthead .elementor-element-33f807e li.menu-item-has-children > .hfe-has-submenu-container { position: relative; display: inline-flex; align-items: center; } /* Spacing between items */ #masthead .elementor-element-33f807e .hfe-nav-menu li.menu-item { margin: 0 !important; } @media (max-width: 1024px) { #masthead .elementor-element-33f807e a.hfe-menu-item { font-size: 12px !important; padding: 8px 14px !important; } #masthead .elementor-element-33f807e a.hfe-menu-item::after { left: 14px; right: 14px; } } /* --- Tight vertical padding on the header — breathing but compact */ #masthead .elementor-section, #masthead .e-con, #masthead .elementor-container { padding-top: 0 !important; padding-bottom: 0 !important; min-height: 0 !important; } #masthead .elementor-widget-wrap, #masthead .elementor-element-populated, #masthead .elementor-widget-image, #masthead .elementor-widget-image .elementor-widget-container, #masthead .elementor-widget, #masthead .elementor-widget .elementor-widget-container, #masthead .elementor-widget-nav-menu { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } #masthead .elementor-column > .elementor-widget-wrap { padding-top: 0 !important; padding-bottom: 0 !important; } /* Small breathing room on the outer header wrapper */ #masthead, .site-header, .site-header-inner { padding-top: 6px !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } /* --- Full-width header (edge-to-edge on any viewport). Logo hugs left, icons hug right (tighter right padding to bring them closer to edge). */ #masthead .elementor-container, #masthead .elementor-section > .elementor-container { max-width: 100% !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: var(--uma-space-5) !important; /* 48px desktop left */ padding-right: var(--uma-space-3) !important; /* 24px desktop right — tighter */ box-sizing: border-box; } @media (max-width: 1024px) { #masthead .elementor-container, #masthead .elementor-section > .elementor-container { padding-left: var(--uma-space-3) !important; /* 24px tablet */ padding-right: var(--uma-space-2) !important; } } @media (max-width: 768px) { #masthead .elementor-container, #masthead .elementor-section > .elementor-container { padding-left: var(--uma-space-2) !important; padding-right: var(--uma-space-2) !important; } } /* --- Left-align the DESKTOP logo column so logo hugs the left edge --- */ #masthead .elementor-element-cc4ad52 > .elementor-widget-wrap, #masthead .elementor-element-cc4ad52 > .elementor-element-populated { justify-content: flex-start !important; align-items: center !important; text-align: left !important; padding-left: 0 !important; } /* --- MOBILE section (d3364ed): hamburger left, logo center, icons right --- */ @media (max-width: 1024px) { /* Mobile logo column — center the logo */ #masthead .elementor-element-fe2f3e9 > .elementor-widget-wrap, #masthead .elementor-element-fe2f3e9 > .elementor-element-populated { justify-content: center !important; align-items: center !important; text-align: center !important; } #masthead .elementor-element-fe2f3e9 .elementor-widget-image { text-align: center !important; width: 100% !important; } #masthead .elementor-element-fe2f3e9 .elementor-widget-image img { margin-left: auto !important; margin-right: auto !important; } /* Hamburger column: flex-start (left) */ #masthead .elementor-element-66429e0 > .elementor-widget-wrap { justify-content: flex-start !important; } /* Mobile search + cart columns: shrink to content, right-align */ #masthead .elementor-element-8adeda4, #masthead .elementor-element-6fb0657 { width: auto !important; max-width: none !important; flex: 0 0 auto !important; padding: 0 !important; } #masthead .elementor-element-8adeda4 > .elementor-widget-wrap, #masthead .elementor-element-6fb0657 > .elementor-widget-wrap { justify-content: flex-end !important; padding: 0 !important; } } #masthead .elementor-element-cc4ad52 .elementor-widget-image { text-align: left !important; width: 100% !important; max-width: 100% !important; } #masthead .elementor-element-cc4ad52 .elementor-widget-image > .elementor-widget-container { text-align: left !important; padding-left: 0 !important; margin-left: 0 !important; } #masthead .elementor-element-cc4ad52 .elementor-widget-image a, #masthead .elementor-element-cc4ad52 .elementor-widget-image img { margin-left: 0 !important; margin-right: auto !important; display: inline-block !important; } /* Widget itself needs width:auto override — Elementor sets initial-width */ #masthead .elementor-element-cc4ad52 .elementor-widget-image.elementor-widget__width-initial { width: auto !important; align-self: flex-start !important; } /* Nav column: center menu items horizontally within its column */ #masthead .elementor-element-33f807e > .elementor-widget-wrap { justify-content: center !important; } #masthead .elementor-element-33f807e .hfe-nav-menu, #masthead .elementor-element-33f807e nav { justify-content: center !important; } /* Cart/search columns: right-align */ #masthead .elementor-element-d978c5e > .elementor-widget-wrap, #masthead .elementor-element-1fdef40 > .elementor-widget-wrap { justify-content: flex-end !important; } /* Wishlist widget in header — user wants it gone. Icon becomes search. */ /* (Handled via Elementor widget change below — this space intentional.) */ /* --- Subtle visible boundary under the header so cream-on-cream feels intentional */ body .site-header, body header.site-header, body .ehf-template-woostify [data-elementor-type="header"], body [data-elementor-type="header"] > .elementor-section-wrap, body #hfe-site-header-inner { border-bottom: 1px solid var(--uma-border); box-shadow: 0 1px 0 rgba(184, 134, 11, 0.06); } /* --- Modest breathing room between header and product content. Padding-top only — no bg override here (that leaks into header on Woostify because header nests inside site-content). */ body.single-product .site-content, body.single-product .content-area, body.single-product main.site-main { padding-top: var(--uma-space-3); /* 24px desktop */ } @media (max-width: 768px) { body.single-product .site-content, body.single-product .content-area, body.single-product main.site-main { padding-top: var(--uma-space-2); /* 16px mobile */ } } /* Reset any inner padding the theme might add on top of ours */ .woocommerce div.product, .woocommerce-page div.product { padding-top: 0; } /* --- Single-product background scheme: Body bg = gray (paints under the product hero/image/buy area). Header wrappers = cream (explicitly overridden so they don't inherit gray). Long-form sections wrapper = cream (editorial feel for story/notes/ritual). */ body.single-product { background: #f3f3f3; } /* Force header + its Elementor wrappers to stay cream */ body.single-product header#masthead, body.single-product .site-header, body.single-product .site-header-inner, body.single-product [data-elementor-type="header"], body.single-product .elementor-location-header, body.single-product #hfe-site-header-inner { background: var(--uma-cream) !important; } /* The long-form sections BELOW the hero get cream bg (warmer, editorial) */ body.single-product .uma-product-long { background: var(--uma-cream); } /* Full-bleed cream band behind uma-product-long (extends past its 780px max-width) */ body.single-product .uma-product-long-wrap { background: var(--uma-cream); padding: var(--uma-space-5) 0; } /* Tighten gap between price and short description */ .woocommerce div.product p.price, .woocommerce div.product span.price { margin-top: 0 !important; margin-bottom: var(--uma-space-2) !important; } .woocommerce div.product .woocommerce-product-details__short-description { margin-top: 0 !important; padding-top: 0 !important; } .woocommerce div.product .summary > * + * { margin-top: var(--uma-space-2); } /* ============================================================ 4. PRODUCT PAGE — NEW SECTIONS ============================================================ */ /* --- Scent teaser inline in summary (below price, above ATC) --- */ .uma-scent-teaser { font-family: var(--uma-font-serif); font-size: 18px; line-height: 1.55; color: var(--uma-text); padding: var(--uma-space-2) 0; margin: 0; border-top: 1px solid var(--uma-border); font-weight: 400; } @media (max-width: 768px) { .uma-scent-teaser { font-size: 16px; } } /* --- Scent profile chip row (FLORAL · WARM · GROUNDING) --- */ .uma-scent-profile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--uma-space-1); padding: 0 0 var(--uma-space-2); margin: 0 0 var(--uma-space-2); border-bottom: 1px solid var(--uma-border); } .uma-scent-profile__chip { font-family: var(--uma-font-sans); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--uma-gold); font-weight: 600; } .uma-scent-profile__sep { color: var(--uma-border); font-size: 14px; line-height: 1; } /* When scent-profile is missing, close the border gap on the teaser */ .uma-scent-teaser:last-of-type { border-bottom: 1px solid var(--uma-border); margin-bottom: var(--uma-space-2); } /* --- Hide Woostify's own tabbed-accordion block. Content lives in .uma-product-long now, no need to duplicate. */ .woocommerce div.product .woocommerce-tabs, .woocommerce div.product .woocommerce-tabs.layout-accordion, .woocommerce div.product .wc-tabs-wrapper { display: none !important; } /* --- Long-form sections below the hero --- */ .uma-product-long { max-width: 780px; margin: var(--uma-space-6) auto var(--uma-space-5); padding: 0 var(--uma-space-3); display: flex; flex-direction: column; gap: var(--uma-space-5); } @media (max-width: 768px) { .uma-product-long { margin: var(--uma-space-5) auto var(--uma-space-4); gap: var(--uma-space-4); } } .uma-product-blocks { display: flex; flex-direction: column; gap: var(--uma-space-5); margin: var(--uma-space-6) 0 var(--uma-space-5); max-width: 780px; } .uma-block { padding-bottom: var(--uma-space-5); border-bottom: 1px solid var(--uma-border); } .uma-block:last-child { border-bottom: none; padding-bottom: 0; } .uma-block__title { font-family: var(--uma-font-sans); font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--uma-green); font-weight: 600; margin: 0 0 var(--uma-space-3); } .uma-product-long .uma-block__title { font-size: 14px; /* slightly larger for long-form sections */ } .uma-block__body { font-family: var(--uma-font-serif); font-size: 19px; line-height: 1.55; color: var(--uma-text); font-weight: 400; } /* Notes list — top / middle / base */ .uma-notes { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--uma-space-2); } .uma-notes__row { display: grid; grid-template-columns: 100px 1fr; gap: var(--uma-space-3); align-items: baseline; padding: var(--uma-space-1) 0; } .uma-notes__label { font-family: var(--uma-font-sans); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--uma-text-muted); font-weight: 600; } .uma-notes__values { font-family: var(--uma-font-serif); font-size: 18px; color: var(--uma-text); font-style: italic; } /* Details grid (burn time / weight / dimensions) */ .uma-details-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--uma-space-3); margin-bottom: var(--uma-space-3); } .uma-detail { padding: var(--uma-space-2) 0; } .uma-detail__label { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--uma-text-muted); font-weight: 600; margin-bottom: 4px; } .uma-detail__value { font-family: var(--uma-font-serif); font-size: 20px; color: var(--uma-text); } /* Care list */ .uma-care { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--uma-space-1); } .uma-care li { position: relative; padding-left: var(--uma-space-3); font-size: 15px; color: var(--uma-text); line-height: 1.6; } .uma-care li::before { content: ""; position: absolute; left: 0; top: 12px; width: 8px; height: 1px; background: var(--uma-gold); } /* ============================================================ 5. TRUST BADGES — always 4 in a row on desktop, 2×2 on mobile ============================================================ */ .uma-trust-badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--uma-space-2); margin: var(--uma-space-3) 0; padding: var(--uma-space-3) 0; border-top: 1px solid var(--uma-border); border-bottom: 1px solid var(--uma-border); width: 100%; box-sizing: border-box; } .uma-badge { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: var(--uma-space-1); min-width: 0; } .uma-badge__icon { color: var(--uma-green); width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .uma-badge__icon svg { width: 100%; height: 100%; stroke: var(--uma-green); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .uma-badge__label { font-size: 11.5px; color: var(--uma-text); line-height: 1.3; letter-spacing: 0.01em; } @media (max-width: 768px) { .uma-trust-badges { grid-template-columns: repeat(2, 1fr); gap: var(--uma-space-3); } .uma-badge__label { font-size: 12px; } } /* ============================================================ 6. ADD TO CART — single dominant full-width button (Memory Box style) ============================================================ */ /* Hide qty selector on product page — adjust in cart */ .woocommerce div.product form.cart .quantity { display: none !important; } /* Cart form: single-column flow */ .woocommerce div.product form.cart { display: flex; flex-direction: column; gap: var(--uma-space-2); margin-bottom: var(--uma-space-3); } /* One dominant button */ .woocommerce div.product form.cart .button.single_add_to_cart_button { width: 100%; height: 56px; min-height: 56px; line-height: 1; padding: 0 var(--uma-space-3); font-family: var(--uma-font-sans); font-size: 14px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; border-radius: 2px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; box-sizing: border-box; background: var(--uma-green); color: #FFFDF8; border: 1px solid var(--uma-green); transition: background var(--uma-fast) var(--uma-ease), transform var(--uma-fast) var(--uma-ease); margin: 0; } .woocommerce div.product form.cart .button.single_add_to_cart_button:hover { background: var(--uma-green-hover); color: #FFFDF8; transform: translateY(-1px); } /* Hide the WooCommerce inline "View cart" link (side-cart popup handles it) */ .woocommerce .single_add_to_cart_button + .added_to_cart, .woocommerce a.added_to_cart, .woocommerce-message .button.wc-forward, .summary .added_to_cart { display: none !important; } @media (max-width: 480px) { .woocommerce div.product form.cart .button.single_add_to_cart_button { height: 52px; min-height: 52px; font-size: 13px; } } /* Price styling */ .woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--uma-gold); font-family: var(--uma-font-serif); font-size: 32px; font-weight: 500; } /* Price styling */ .woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--uma-gold); font-family: var(--uma-font-serif); font-size: 32px; font-weight: 500; } /* ============================================================ 7. STICKY ATC — restyle existing plugin bar (Do NOT target wishlist buttons here — those are separate.) ============================================================ */ #saoc-sticky-add-to-cart, .saoc-container, .sticky-add-to-cart-container, .tm-sticky-cart { background: var(--uma-green) !important; border-top: 1px solid var(--uma-gold) !important; } /* Wishlist plugin removed — CSS deleted. */ /* --- Homepage hero: reserve height so heading+button don't jump into the header area on first paint before the image carousel loads. The carousel widget has zero height until Swiper initializes; without this, the "ULTIMATE MAGICAL AROMAS" heading overlays the header on mobile for the first ~200ms. */ .elementor-element-8f814f7 .elementor-widget-image-carousel, .elementor-element-8f814f7 .swiper, .elementor-element-8f814f7 .swiper-container { min-height: 500px; } @media (max-width: 768px) { .elementor-element-8f814f7 .elementor-widget-image-carousel, .elementor-element-8f814f7 .swiper, .elementor-element-8f814f7 .swiper-container { min-height: 90vw; /* roughly matches the final square-ish image height */ } } /* --- Sticky header (option b): #masthead sticks at top:0 on scroll. Announcement bar sits BELOW header (moved there by uma.js), so it scrolls away naturally while the header stays pinned. */ #masthead { position: sticky !important; top: 0; z-index: 100; background: var(--uma-cream); transition: box-shadow var(--uma-fast) var(--uma-ease); } /* Subtle shadow appears only when header is stuck (scrolled past top). Uses a small trick: shadow attached to a sentinel via scroll — but since we're pure CSS, show shadow always when sticky. Cheap + clean. */ #masthead::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px; pointer-events: none; background: linear-gradient(to bottom, rgba(1,50,32,0.08), transparent); } /* --- Stable header layout. Flex row with absolute-positioned center (brand+nav). Logo hugs left, search+cart hug right (side by side in flex flow), brand+nav is absolutely positioned to viewport center so it's truly aligned with the announcement bar center regardless of logo or icons widths. No row-break risk. */ #masthead .elementor-element-c16e9e6 > .elementor-container { position: relative !important; display: flex !important; flex-wrap: nowrap !important; align-items: center !important; } #masthead .elementor-element-cc4ad52 { flex: 0 0 auto !important; width: auto !important; max-width: none !important; margin-right: auto !important; /* pushes everything else to the right edge */ } #masthead .elementor-element-33f807e { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } #masthead .elementor-element-d978c5e, #masthead .elementor-element-1fdef40 { flex: 0 0 auto !important; width: auto !important; max-width: none !important; padding: 0 !important; } #masthead .elementor-element-d978c5e { margin-right: 24px !important; /* gap between search and cart */ } #masthead .elementor-element-1fdef40 { margin-left: 0 !important; margin-right: 32px !important; /* breathing room from viewport right edge */ } /* --- Mobile (≤768px): unwind desktop absolute-center so brand+nav flow normally under logo. Prevents overlap on narrow viewports. */ @media (max-width: 768px) { #masthead .elementor-element-c16e9e6 > .elementor-container { flex-wrap: wrap !important; } #masthead .elementor-element-cc4ad52 { margin-right: 0 !important; order: 1; } #masthead .elementor-element-33f807e { position: static !important; transform: none !important; order: 3; flex: 1 1 100% !important; text-align: center; } #masthead .elementor-element-33f807e > .elementor-widget-wrap, #masthead .elementor-element-33f807e .hfe-nav-menu, #masthead .elementor-element-33f807e nav { justify-content: center !important; } #masthead .elementor-element-d978c5e, #masthead .elementor-element-1fdef40 { order: 2; } #masthead .elementor-element-1fdef40 { margin-right: 16px !important; } } #masthead .elementor-element-d978c5e > .elementor-widget-wrap, #masthead .elementor-element-1fdef40 > .elementor-widget-wrap { padding: 0 !important; justify-content: center !important; align-items: center !important; align-content: center !important; display: flex !important; min-height: 44px; } /* Force both icon widgets to same box height + vertical center */ #masthead .elementor-element-9065a06, #masthead .elementor-element-c451913 { display: inline-flex !important; align-items: center !important; height: 44px; line-height: 1; } #masthead .elementor-element-9065a06 .elementor-icon, #masthead .elementor-element-c451913 .xoo-wsc-cart-trigger { display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1; } /* Kill the negative margin Elementor set on the cart widget container */ #masthead .elementor-element-c451913 > .elementor-widget-container, #masthead .elementor-element-4ecd088 > .elementor-widget-container { margin-left: 0 !important; } /* --- Header search: simple icon link to search page (no plugin overlay). Widget is an Elementor icon widget with fas fa-search linking to /?s=&post_type=product. Brand color + softer weight to match cart. */ #masthead .elementor-widget-icon .elementor-icon { color: var(--uma-green) !important; fill: var(--uma-green) !important; font-size: 20px !important; transition: color var(--uma-fast) var(--uma-ease); /* FA solid icons render heavy vs cart's outline SVG. Slight de-boldening: */ font-weight: 400 !important; opacity: 0.85; } #masthead .elementor-widget-icon .elementor-icon:hover { opacity: 1; } #masthead .elementor-widget-icon .elementor-icon:hover, #masthead .elementor-widget-icon .elementor-icon:hover i, #masthead .elementor-widget-icon .elementor-icon:hover svg { color: var(--uma-gold) !important; fill: var(--uma-gold) !important; } /* Hide any leftover FiboSearch injections in the header (plugin still loads its assets, but we're not using its widget) */ #masthead .dgwt-wcas-search-wrapp { display: none !important; } /* --- Search results hero: prominent search bar on /?s= page --- */ .uma-search-hero { background: var(--uma-cream); padding: var(--uma-space-3) var(--uma-space-3); border-bottom: 1px solid var(--uma-border); margin-bottom: var(--uma-space-3); } .uma-search-hero__inner { max-width: 720px; margin: 0 auto; text-align: center; } .uma-search-hero__title { font-family: var(--uma-font-serif); font-size: clamp(20px, 2.6vw, 28px); color: var(--uma-green); font-weight: 500; margin: 0 0 var(--uma-space-2); letter-spacing: 0.02em; } .uma-search-hero__bar .dgwt-wcas-search-wrapp { display: block !important; /* override the header-hide rule */ max-width: 100% !important; width: 100% !important; background: transparent !important; } .uma-search-hero__bar .dgwt-wcas-search-form { width: 100%; border: 1.5px solid var(--uma-green); border-radius: 999px; background: #FFFDF8; overflow: hidden; box-shadow: 0 2px 12px rgba(1, 50, 32, 0.06); } .uma-search-hero__bar .dgwt-wcas-sf-wrapp { display: flex !important; align-items: stretch; width: 100%; position: relative; } .uma-search-hero__bar .dgwt-wcas-search-input { border: none !important; background: transparent !important; background-image: none !important; outline: none !important; box-shadow: none !important; padding: 16px 24px !important; font-family: var(--uma-font-sans) !important; font-size: 16px !important; color: var(--uma-text) !important; flex: 1 1 auto; min-width: 0; width: 100%; height: auto !important; -webkit-appearance: none !important; appearance: none !important; } /* Kill browser's default type=search decorations (magnifying glass on left, X on right in some browsers) */ .uma-search-hero__bar input[type="search"]::-webkit-search-decoration, .uma-search-hero__bar input[type="search"]::-webkit-search-cancel-button, .uma-search-hero__bar input[type="search"]::-webkit-search-results-button, .uma-search-hero__bar input[type="search"]::-webkit-search-results-decoration { -webkit-appearance: none !important; appearance: none !important; display: none !important; } .uma-search-hero__bar .dgwt-wcas-search-input::placeholder { color: var(--uma-text-muted); opacity: 1; } /* Submit button hidden — Enter key still submits the form */ .uma-search-hero__bar .dgwt-wcas-search-submit { display: none !important; } /* Submit button + all its content: hidden completely. Enter submits. */ /* Kill non-input UI FiboSearch adds inside sf-wrapp (preloader spinner, voice-search mic, close button) */ .uma-search-hero__bar .dgwt-wcas-preloader, .uma-search-hero__bar .dgwt-wcas-voice-search, .uma-search-hero__bar .dgwt-wcas-close { display: none !important; } /* Kill any pseudo-element bg on wrapper (FiboSearch injects a background-image SVG) */ .uma-search-hero__bar .dgwt-wcas-sf-wrapp::before, .uma-search-hero__bar .dgwt-wcas-sf-wrapp::after { display: none !important; background: none !important; content: none !important; } .uma-search-hero__bar .dgwt-wcas-sf-wrapp { background: transparent !important; background-image: none !important; } /* Cart icon (xoo-wsc Side Cart plugin) */ #masthead .xoo-wsc-cart-trigger, .xoo-wsc-container .xoo-wsc-cart-trigger { background: transparent !important; border: none !important; color: var(--uma-green) !important; } #masthead .xoo-wsc-cart-trigger svg, #masthead .xoo-wsc-cart-trigger i, #masthead .xoo-wsc-icon, #masthead .xoo-wsc-cart-trigger .xoo-wsc-icon { color: var(--uma-green) !important; fill: var(--uma-green) !important; font-size: 22px !important; transition: color var(--uma-fast) var(--uma-ease), fill var(--uma-fast) var(--uma-ease); } #masthead .xoo-wsc-cart-trigger:hover svg, #masthead .xoo-wsc-cart-trigger:hover i, #masthead .xoo-wsc-cart-trigger:hover .xoo-wsc-icon { color: var(--uma-gold) !important; fill: var(--uma-gold) !important; } /* Cart count badge: gold background, cream text */ #masthead .xoo-wsc-cart-trigger .xoo-wsc-basket-tcount, .xoo-wsc-container .xoo-wsc-basket-tcount { background: var(--uma-gold) !important; color: var(--uma-cream) !important; border: none !important; } #saoc-sticky-add-to-cart *, .saoc-container * { font-family: var(--uma-font-sans) !important; } #saoc-sticky-add-to-cart .saoc-product-title, .saoc-container .saoc-product-title { color: #FFFDF8 !important; font-family: var(--uma-font-serif) !important; font-size: 16px !important; letter-spacing: 0 !important; } #saoc-sticky-add-to-cart .saoc-product-price, .saoc-container .saoc-product-price, #saoc-sticky-add-to-cart .price, .saoc-container .price { color: var(--uma-gold) !important; font-family: var(--uma-font-serif) !important; font-size: 18px !important; } #saoc-sticky-add-to-cart .saoc-add-to-cart-button, .saoc-container button, .saoc-container .button { background: var(--uma-gold) !important; color: var(--uma-green) !important; border: none !important; font-weight: 600 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; border-radius: 2px !important; transition: background var(--uma-fast) var(--uma-ease) !important; } #saoc-sticky-add-to-cart .saoc-add-to-cart-button:hover, .saoc-container button:hover, .saoc-container .button:hover { background: var(--uma-gold-hover) !important; } /* ============================================================ 8. REVIEW FORM — clean look (ports snippet #6) ============================================================ */ .comment-form-email, .comment-notes, .comment-form-cookies-consent { display: none !important; } #respond .comment-form-comment textarea { height: 80px !important; min-height: 80px !important; border: 1px solid var(--uma-border); padding: var(--uma-space-2); font-family: var(--uma-font-sans); border-radius: 2px; } #respond .comment-form { display: flex !important; flex-direction: column !important; gap: var(--uma-space-2); } .comment-form-rating { order: 1 !important; } .comment-form-author { order: 2 !important; } .comment-form-comment { order: 3 !important; } .form-submit { order: 4 !important; } .comment-respond { border-top: 1px solid var(--uma-border) !important; margin-top: var(--uma-space-4) !important; padding-top: var(--uma-space-4) !important; } #respond .form-submit input[type="submit"] { background: var(--uma-green); color: #FFFDF8; border: none; padding: 12px 28px; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; border-radius: 2px; cursor: pointer; align-self: flex-start; } #respond .form-submit input[type="submit"]:hover { background: var(--uma-green-hover); } /* ============================================================ 9. PRODUCT GALLERY — slider arrows cleanup ============================================================ */ /* Remove opaque circles behind prev/next arrows on the product image. Match any of the common patterns Woostify / slick / flexslider inject. */ .woocommerce div.product .woostify-woocommerce-product-gallery__prev, .woocommerce div.product .woostify-woocommerce-product-gallery__next, .woocommerce div.product .woostify-woocommerce-product-gallery__nav, .woocommerce div.product .flex-direction-nav a, .woocommerce div.product .slick-prev, .woocommerce div.product .slick-next, .woocommerce div.product .wgs-nav, .woocommerce div.product .wgs-btn-prev, .woocommerce div.product .wgs-btn-next, .woocommerce div.product .swiper-button-prev, .woocommerce div.product .swiper-button-next, .woocommerce div.product [class*="gallery"] [class*="prev"], .woocommerce div.product [class*="gallery"] [class*="next"] { background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; border: none !important; color: var(--uma-green) !important; opacity: 0.6; transition: opacity var(--uma-fast) var(--uma-ease), background var(--uma-fast) var(--uma-ease); } .woocommerce div.product .woostify-woocommerce-product-gallery__prev:hover, .woocommerce div.product .woostify-woocommerce-product-gallery__next:hover, .woocommerce div.product .woostify-woocommerce-product-gallery__nav:hover, .woocommerce div.product .flex-direction-nav a:hover, .woocommerce div.product .slick-prev:hover, .woocommerce div.product .slick-next:hover, .woocommerce div.product .wgs-nav:hover, .woocommerce div.product .wgs-btn-prev:hover, .woocommerce div.product .wgs-btn-next:hover, .woocommerce div.product .swiper-button-prev:hover, .woocommerce div.product .swiper-button-next:hover, .woocommerce div.product [class*="gallery"] [class*="prev"]:hover, .woocommerce div.product [class*="gallery"] [class*="next"]:hover { background: rgba(255, 253, 248, 0.75) !important; opacity: 1; } .woocommerce div.product [class*="gallery"] [class*="prev"] svg, .woocommerce div.product [class*="gallery"] [class*="next"] svg, .woocommerce div.product .flex-direction-nav a svg, .woocommerce div.product .slick-prev svg, .woocommerce div.product .slick-next svg { stroke: var(--uma-green) !important; fill: none !important; } /* ============================================================ 10. ANNOUNCEMENT BAR Rendered by PHP at wp_body_open, then JS moves it directly after the site header. Hide before JS moves to avoid flash-at-top. ============================================================ */ [data-uma-move-after-header] { visibility: hidden; } .uma-announcement { background: var(--uma-green); color: #FFFDF8; text-align: center; padding: 10px var(--uma-space-2); font-family: var(--uma-font-sans); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.2; } .uma-announcement__text { color: #FFFDF8; } @media (max-width: 480px) { .uma-announcement { font-size: 10.5px; padding: 8px var(--uma-space-2); letter-spacing: 0.12em; } } /* ============================================================ 11. SHIPPING & RETURNS ACCORDION (native
) ============================================================ */ .uma-accordion { margin: var(--uma-space-2) 0; border-top: 1px solid var(--uma-border); border-bottom: 1px solid var(--uma-border); padding: 0; } .uma-accordion__title { display: flex; align-items: center; justify-content: space-between; padding: var(--uma-space-2) 0; cursor: pointer; list-style: none; font-family: var(--uma-font-sans); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--uma-green); font-weight: 600; } .uma-accordion__title::-webkit-details-marker { display: none; } .uma-accordion__title::marker { content: ""; } .uma-accordion__chevron { color: var(--uma-green); transition: transform var(--uma-med) var(--uma-ease); flex-shrink: 0; } .uma-accordion[open] .uma-accordion__chevron { transform: rotate(180deg); } .uma-accordion__body { padding: 0 0 var(--uma-space-3); font-family: var(--uma-font-serif); font-size: 15px; line-height: 1.55; color: var(--uma-text); } .uma-accordion__body p { margin: 0 0 var(--uma-space-2); } .uma-accordion__body p:last-child { margin-bottom: 0; } /* Reviews accordion — hide WooCommerce's own "Reviews" heading (duplicate) */ .uma-accordion--reviews .uma-accordion__body #reviews > h2:first-child, .uma-accordion--reviews .uma-accordion__body .woocommerce-Reviews-title { display: none; } /* ============================================================ 12. SHARE BUTTONS ============================================================ */ .uma-share { display: flex; gap: var(--uma-space-3); align-items: center; padding: var(--uma-space-2) 0; margin: 0; flex-wrap: wrap; } .uma-share__link, .uma-share__link--copy { display: inline-flex; align-items: center; gap: 6px; color: var(--uma-text-muted); font-family: var(--uma-font-sans); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; transition: color var(--uma-fast) var(--uma-ease); min-height: 32px; /* Button reset (copy link is a