/* ========================================================================== pymees OVERRIDE — Aggressive stylistic reset (loads LAST in ) Beats Smartstore / Bootstrap legacy with !important where needed. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800;900&display=swap'); :root { --sprylo-navy: #0E2368 !important; --sprylo-primary: #0059C1 !important; --sprylo-accent: #FF8C00 !important; --sprylo-accent-hover: #E07B00 !important; --sprylo-gold: #FFB700 !important; --sprylo-muted: #5C7298 !important; --sprylo-bg: #F4F6FC !important; --sprylo-surface: #FFFFFF !important; --sprylo-border: #E2E8F0 !important; --sprylo-radius: 24px !important; --sprylo-font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important; } html, body { font-family: var(--sprylo-font) !important; background: var(--sprylo-bg) !important; color: var(--sprylo-navy) !important; -webkit-font-smoothing: antialiased !important; } body#page, body .page-main, #content-wrapper, #content, #page { background: var(--sprylo-bg) !important; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--sprylo-font) !important; color: var(--sprylo-navy) !important; font-weight: 800 !important; letter-spacing: -0.02em !important; } a { color: var(--sprylo-primary) !important; } a:hover { color: #00479A !important; } /* -------------------------------------------------------------------------- Clean header: full-bleed topbar + white surface (no heavy capsule) -------------------------------------------------------------------------- */ .menubar-section, #header .menubar-section, .menubar-inverse, .menubar-light, .pymes-topbar { display: block !important; background: linear-gradient(90deg, #0E2368 0%, #0059C1 100%) !important; color: #fff !important; border: 0 !important; box-shadow: none !important; padding: 0.4rem 0 !important; position: relative !important; overflow: visible !important; margin: 0 !important; border-radius: 0 !important; } .menubar-section::before { display: none !important; } .pymes-topbar .menubar-container, .menubar-section .menubar-container { max-width: 1200px !important; width: 100% !important; padding-inline: 1rem !important; margin-inline: auto !important; position: relative !important; z-index: 1 !important; } .pymes-topbar .menubar, .menubar-section .menubar, .menubar-section .navbar { background: transparent !important; min-height: 34px !important; } /* Only top-level toggles are white — NOT dropdown items */ .menubar-section .menubar-link, .menubar-section .menubar > .nav-item > .nav-link, .menubar-section .dropdown > .dropdown-toggle, .menubar-section .mf-dropdown > a, .menubar-section #currency-selector, .menubar-section #language-selector { color: #fff !important; font-weight: 600 !important; font-size: 0.8125rem !important; font-family: var(--sprylo-font) !important; } .menubar-section .menubar-link:hover, .menubar-section .dropdown > .menubar-link:hover, .menubar-section #currency-selector:hover, .menubar-section #language-selector:hover, .menubar-section a.menubar-link:hover { color: #FFB700 !important; opacity: 1 !important; } /* Icons MUST keep Font Awesome font (never inherit body/Jakarta) */ .menubar-section .menubar-icon, .menubar-section .menubar-link .fa, .menubar-section .menubar-link .fas, .menubar-section .menubar-link .far, .menubar-section .menubar-link .fal, .menubar-section .menubar-caret { color: #fff !important; font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free" !important; font-weight: 900 !important; font-style: normal !important; font-size: 0.875rem !important; line-height: 1 !important; display: inline-block !important; -webkit-font-smoothing: antialiased !important; } .menubar-section .menubar-link:hover .fa, .menubar-section .menubar-link:hover .fas, .menubar-section .menubar-link:hover .menubar-icon, .menubar-section .menubar-link:hover .menubar-caret { color: #FFB700 !important; } /* Glass pill for ALL topbar actions — same size/alignment */ .menubar-section .menubar-group { display: inline-flex !important; align-items: center !important; gap: 0.45rem !important; } .menubar-section .menubar-link, .menubar-section #currency-selector, .menubar-section #language-selector, .menubar-section .dropdown > .menubar-link, .menubar-section .mf-dropdown > a.menubar-link, .menubar-section a.menubar-link { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.35rem !important; background: rgba(255, 255, 255, 0.16) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; border: 1px solid rgba(255, 255, 255, 0.35) !important; border-radius: 999px !important; padding: 0.35rem 0.85rem !important; min-height: 2rem !important; line-height: 1 !important; margin: 0 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25) !important; vertical-align: middle !important; } /* Contact Us stays plain white (no accidental gold) */ .menubar-section a.menubar-link { color: #fff !important; } /* CRITICAL: dropdown menus must NOT inherit white text */ .menubar-section .dropdown-menu, #header .dropdown-menu, .dropdown-menu { background: rgba(255, 255, 255, 0.92) !important; backdrop-filter: blur(18px) saturate(1.2) !important; -webkit-backdrop-filter: blur(18px) saturate(1.2) !important; border: 1px solid rgba(226, 232, 240, 0.9) !important; border-radius: 16px !important; box-shadow: 0 18px 40px rgba(14, 35, 104, 0.16) !important; padding: 0.45rem !important; min-width: 11rem !important; z-index: 2000 !important; } .menubar-section .dropdown-menu a, .menubar-section .dropdown-item, #header .dropdown-menu a, #header .dropdown-item, .dropdown-menu .dropdown-item, .dropdown-menu a.dropdown-item { color: #0E2368 !important; background: transparent !important; border-radius: 10px !important; font-weight: 600 !important; font-size: 0.875rem !important; padding: 0.55rem 0.85rem !important; opacity: 1 !important; } .menubar-section .dropdown-menu a:hover, .menubar-section .dropdown-item:hover, .menubar-section .dropdown-item:focus, #header .dropdown-item:hover, .dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus { background: linear-gradient(105deg, rgba(0, 89, 193, 0.1), rgba(255, 140, 0, 0.08)) !important; color: #0059C1 !important; } .menubar-section .dropdown-item.disabled, .menubar-section .dropdown-item[aria-selected="true"], .dropdown-menu .dropdown-item.disabled { color: #0059C1 !important; background: rgba(0, 89, 193, 0.08) !important; opacity: 1 !important; } /* Account: mobile only in shopbar; admin stays on desktop */ #shopbar-user { display: flex !important; } @media (min-width: 992px) { #shopbar-user { display: none !important; } } #shopbar-admin { display: flex !important; } #shopbar-user .pymes-account-btn, #shopbar-admin .pymes-admin-btn { color: #0E2368 !important; border-radius: 999px !important; padding: 0.45rem 0.85rem !important; background: #F4F6FC !important; border: 1px solid #E2E8F0 !important; } #shopbar-user .pymes-account-btn:hover { background: rgba(0, 89, 193, 0.08) !important; border-color: #0059C1 !important; color: #0059C1 !important; } #shopbar-user .shopbar-button-icon, #shopbar-user .shopbar-button-label, #shopbar-user .shopbar-button-label-sm, #shopbar-user .icm, #shopbar-admin .shopbar-button-icon, #shopbar-admin .shopbar-button-label-sm, #shopbar-admin .icm { color: inherit !important; } /* -------------------------------------------------------------------------- Header surface (logo/search + nav) — clean white sticky block -------------------------------------------------------------------------- */ #header.pymes-header, #header { position: sticky !important; top: 0 !important; z-index: 1040 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; } .pymes-header__wrap, .pymes-header__shell { max-width: none !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } .pymes-header__surface { background: #fff !important; border-bottom: 1px solid #E8EEF6 !important; box-shadow: 0 8px 24px rgba(14, 35, 104, 0.06) !important; } .shopbar-section, #header .shopbar-section, .shopbar-inverse, .shopbar-light, .pymes-header__main { background: transparent !important; padding: 0 !important; margin: 0 !important; color: var(--sprylo-navy) !important; border: 0 !important; box-shadow: none !important; } .shopbar-container { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0.85rem 1rem !important; max-width: 1200px !important; width: 100% !important; margin-inline: auto !important; } .shopbar, .shopbar-inverse, .shopbar-light { color: var(--sprylo-navy) !important; margin: 0 !important; align-items: center !important; } .shopbar .shopbar-button, .shopbar .shopbar-button-label, .shopbar .shopbar-button-label-sm, .shopbar .shopbar-button-icon, .shopbar .icm { color: var(--sprylo-navy) !important; } .megamenu-section, .pymes-header__nav { background: transparent !important; padding: 0 !important; margin: 0 !important; border-top: 1px solid #EEF2F8 !important; } .megamenu-section .navbar, .navbar-inverse, .navbar-light { background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important; min-height: 0 !important; } .megamenu-container { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0.15rem 1rem 0.45rem !important; max-width: 1200px !important; width: 100% !important; margin-inline: auto !important; } .megamenu-section .nav-link { color: #0E2368 !important; font-weight: 600 !important; font-family: var(--sprylo-font) !important; border-radius: 0 !important; padding: 0.7rem 0.85rem !important; position: relative !important; } .megamenu-section .nav-link:hover, .megamenu-section .nav-link:focus { background: transparent !important; color: #0059C1 !important; } .megamenu-section .nav-item.active > .nav-link, .megamenu-section .nav-link.active { color: #0059C1 !important; background: transparent !important; box-shadow: inset 0 -2px 0 #FF8C00 !important; } @media (max-width: 991.98px) { .shopbar-container { padding: 0.7rem 1rem !important; } } /* -------------------------------------------------------------------------- Brand: official isotype image + wordmark (must stay visible) -------------------------------------------------------------------------- */ .shop-logo { opacity: 1 !important; transform: none !important; margin-inline-start: 0 !important; min-width: 160px !important; flex-shrink: 0 !important; } .search-focused .shop-logo { opacity: 1 !important; transform: none !important; } .pymes-brand { display: inline-flex !important; align-items: center !important; gap: 0.65rem !important; text-decoration: none !important; border: 0 !important; border-bottom: 0 !important; box-shadow: none !important; line-height: 1.05 !important; visibility: visible !important; opacity: 1 !important; } /* Kill ugly underlines from parent */ a.brand, a.brand.pymes-shop-brand, a.brand.textual, .shop-logo a, .shop-logo .brand, .shop-logo .brand *, .pymes-shop-brand, .pymes-shop-brand *, .pymes-brand, .pymes-brand *, .pymes-brand__name, .pymes-brand__name-py, .pymes-brand__name-mes, .pymes-brand__tagline, .pymes-brand__wordmark { text-decoration: none !important; text-decoration-line: none !important; border-bottom: 0 !important; box-shadow: none !important; -webkit-text-decoration-line: none !important; } .pymes-brand__mark { display: none !important; } .pymes-brand__isotype { display: block !important; width: 56px !important; height: auto !important; max-height: 58px !important; object-fit: contain !important; flex-shrink: 0 !important; visibility: visible !important; opacity: 1 !important; } .pymes-brand__logo-text { display: none !important; } .pymes-brand__wordmark { display: flex !important; flex-direction: column !important; gap: 0.2rem !important; text-decoration: none !important; } .pymes-brand__name { display: block !important; font-size: 1.35rem !important; font-weight: 900 !important; font-family: var(--sprylo-font) !important; letter-spacing: -0.03em !important; line-height: 1.05 !important; text-decoration: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important; } .pymes-brand__name-py { color: #111111 !important; } .pymes-brand__name-mes { background: linear-gradient(110deg, #0059C1 0%, #3B82F6 45%, #0E2368 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important; } .pymes-brand__tagline { display: block !important; color: #5C7298 !important; font-size: 0.62rem !important; font-weight: 700 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; margin-top: 0 !important; text-decoration: none !important; border: 0 !important; padding: 0 !important; } .shop-logo .brand, .shop-logo .brand.textual, .pymes-shop-brand { display: inline-flex !important; width: auto !important; max-width: none !important; max-height: none !important; min-height: 52px !important; text-align: start !important; color: inherit !important; font-size: inherit !important; background: transparent !important; } /* -------------------------------------------------------------------------- Search pill — icon left, text padded (no overlap) -------------------------------------------------------------------------- */ .instasearch-form { --search-padding-start: 2.85rem !important; --search-padding-end: 1.25rem !important; } .instasearch-form .instasearch-term { border-radius: 999px !important; min-height: 3rem !important; background: #F4F6FC !important; border: 1px solid #E2E8F0 !important; color: #0E2368 !important; font-family: var(--sprylo-font) !important; font-weight: 600 !important; box-shadow: none !important; padding-inline-start: 2.85rem !important; padding-inline-end: 1.25rem !important; } .instasearch-form .instasearch-term:focus, .instasearch-form .instasearch-term.active { background: #fff !important; border-color: #0059C1 !important; box-shadow: 0 0 0 4px rgba(0, 89, 193, 0.14) !important; outline: none !important; } .instasearch-icon { inset-inline-start: 12px !important; inset-inline-end: auto !important; opacity: 1 !important; color: #0059C1 !important; z-index: 2 !important; } .instasearch-icon .fa, .instasearch-submit { color: #0059C1 !important; } /* Topbar icons: force solid FA (avoid broken fal glyphs) */ .menubar-section .menubar-icon::before, .menubar-section .fas::before, .menubar-section .fa::before { font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free" !important; font-weight: 900 !important; } /* -------------------------------------------------------------------------- Product detail tabs — fix broken vertical alignment -------------------------------------------------------------------------- */ .pd-tabs .nav-tabs .nav-link, #pd-tabs .nav-tabs .nav-link, .nav-tabs-line .nav-link { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 2.75rem !important; padding: 0.7rem 1.15rem !important; line-height: 1.25 !important; border-radius: 999px !important; vertical-align: middle !important; } .pd-tabs .nav-tabs .nav-link.active, #pd-tabs .nav-tabs .nav-link.active, .nav-tabs-line .nav-link.active { background: rgba(0, 89, 193, 0.1) !important; color: #0059C1 !important; font-weight: 700 !important; box-shadow: none !important; } .pd-tabs .nav-tabs, #pd-tabs .nav-tabs { border-bottom: 2px solid #E2E8F0 !important; gap: 0.35rem !important; align-items: center !important; } .pd-tabs .nav-tabs .nav-link.active::after, .nav-tabs-line .nav-link.active::after { background: #FF8C00 !important; } /* -------------------------------------------------------------------------- Cart pill (orange floating CTA) -------------------------------------------------------------------------- */ #shopbar-cart .shopbar-button, .pymes-cart-pill { background: #FF8C00 !important; color: #fff !important; border-radius: 999px !important; padding: 0.65rem 1.15rem !important; box-shadow: 0 10px 24px rgba(255, 140, 0, 0.35) !important; min-width: auto !important; display: inline-flex !important; align-items: center !important; gap: 0.5rem !important; text-decoration: none !important; transition: transform 0.15s ease, background 0.2s ease !important; } #shopbar-cart .shopbar-button:hover, .pymes-cart-pill:hover { background: #E07B00 !important; transform: translateY(-1px) !important; color: #fff !important; } #shopbar-cart .shopbar-button-icon, #shopbar-cart .shopbar-button-label, #shopbar-cart .shopbar-button-label-sm, #shopbar-cart .shopbar-button-label strong, #shopbar-cart .icm { color: #fff !important; } #shopbar-cart .badge, #shopbar-cart .badge-counter { background: #fff !important; color: #FF8C00 !important; font-weight: 800 !important; border: 0 !important; } #shopbar-cart .shopbar-button-label { display: none !important; } #shopbar-cart .shopbar-button-label-sm { display: inline !important; font-weight: 800 !important; font-size: 0.85rem !important; text-transform: none !important; } @media (min-width: 992px) { #shopbar-cart .shopbar-button-label-sm { display: inline !important; } } /* -------------------------------------------------------------------------- Product cards — Sprylo clean white cards -------------------------------------------------------------------------- */ .artlist { --art-border-radius: 24px !important; --art-box-shadow: 0 4px 24px rgba(14, 35, 104, 0.06) !important; --art-active-bg-color: #fff !important; --art-active-border-color: transparent !important; --art-gutter: 1rem !important; } .artlist-grid > .art, .artlist-boxed > .art, .art, .pymes-product-card { background: #fff !important; border: 1px solid #E2E8F0 !important; border-radius: 24px !important; box-shadow: 0 4px 24px rgba(14, 35, 104, 0.06) !important; padding: 1.15rem !important; margin: 0.6rem !important; overflow: hidden !important; transition: transform 0.25s ease, box-shadow 0.25s ease !important; } .artlist-grid > .art:hover, .artlist-boxed > .art:hover, .art:hover, .art.active, .pymes-product-card:hover { transform: translateY(-6px) !important; box-shadow: 0 18px 40px rgba(14, 35, 104, 0.14) !important; border-color: #E2E8F0 !important; border-radius: 24px !important; } .art-picture-block { background: #F4F6FC !important; border-radius: 18px !important; overflow: hidden !important; margin-bottom: 1rem !important; } .art-name, .art-name-link, .art-name-link span { color: #0E2368 !important; font-weight: 800 !important; font-family: var(--sprylo-font) !important; text-decoration: none !important; } .art-finalprice, .art-price-value, .art-price .art-finalprice, .pymes-product-card__price { color: #0059C1 !important; font-weight: 900 !important; font-size: 1.2rem !important; font-family: var(--sprylo-font) !important; } .art-compareprice-value, .art-price .price-old { color: #5C7298 !important; text-decoration: line-through !important; } .art-badge, .badge { border-radius: 999px !important; font-weight: 800 !important; border: 0 !important; } .art-badge.badge-warning, .art-badge.badge-dark, .art-badge.badge-danger, .badge-warning, .badge-dark { background: #FF8C00 !important; color: #fff !important; } .art-badge.badge-info, .art-badge.badge-primary, .badge-info, .badge-primary { background: #FFB700 !important; color: #0E2368 !important; } /* Always-visible orange add-to-cart */ .add-to-cart-button, .btn-add-to-cart, .pymes-add-btn, .art-btn-group .add-to-cart-button, .btn.btn-warning.add-to-cart-button { background: #FF8C00 !important; border-color: #FF8C00 !important; color: #fff !important; border-radius: 999px !important; font-weight: 800 !important; font-family: var(--sprylo-font) !important; box-shadow: 0 8px 20px rgba(255, 140, 0, 0.28) !important; min-height: 2.75rem !important; } .add-to-cart-button:hover, .pymes-add-btn:hover, .btn-warning.add-to-cart-button:hover { background: #E07B00 !important; border-color: #E07B00 !important; color: #fff !important; } .btn-primary { background: #0059C1 !important; border-color: #0059C1 !important; border-radius: 999px !important; font-weight: 700 !important; } .btn, .btn-secondary, .btn-light, .btn-gray { border-radius: 999px !important; font-family: var(--sprylo-font) !important; } /* Show product actions without hover-drop on desktop */ .art-drop { position: static !important; opacity: 1 !important; visibility: visible !important; transform: none !important; box-shadow: none !important; background: transparent !important; padding: 0.75rem 0 0 !important; border: 0 !important; height: auto !important; overflow: visible !important; } .sr-toggle { display: none !important; } .art-btn-group { display: flex !important; gap: 0.4rem !important; margin-top: 0.75rem !important; } .art-btn-group .add-to-cart-button { flex: 1.6 1 auto !important; } .art-btn-group .add-to-cart-button span { display: inline !important; } /* -------------------------------------------------------------------------- Surfaces / footer / forms -------------------------------------------------------------------------- */ .card, .block, .facet-group, .artlist-actions { background: #fff !important; border: 1px solid #E2E8F0 !important; border-radius: 20px !important; box-shadow: 0 4px 20px rgba(14, 35, 104, 0.05) !important; } /* Unified footer — gradient ONLY on #footer root (never on nested .footer-main) */ #footer { background-color: #0E2368 !important; background-image: linear-gradient(160deg, #0E2368 0%, #0E2368 40%, #0059C1 100%) !important; color: rgba(255, 255, 255, 0.92) !important; position: relative !important; overflow: hidden !important; border-top: 0 !important; --footer-bg: transparent !important; --footer-color: #fff !important; --footer-title-color: #fff !important; --footer-link-color: rgba(255, 255, 255, 0.85) !important; --footer-link-hover-color: #FFB700 !important; --footer-social-bg: rgba(255, 255, 255, 0.12) !important; --footer-social-color: #fff !important; --footer-bottom-bg: rgba(0, 0, 0, 0.18) !important; --footer-bottom-color: rgba(255, 255, 255, 0.75) !important; --footer-line-color: rgba(255, 255, 255, 0.15) !important; --link-color: rgba(255, 255, 255, 0.85) !important; --link-hover-color: #FFB700 !important; } #footer::before, .footer::before { display: none !important; } #footer .footer-social-wrapper, #footer .footer-main-wrapper, #footer .footer-main, #footer .footer-bottom-wrapper, #footer .footer-bottom, #footer .container, #footer .row, #footer [class*="col-"] { background: transparent !important; background-image: none !important; box-shadow: none !important; } #footer .footer-social-wrapper { padding-block: 1.75rem !important; } #footer .footer-main-wrapper { padding-top: 0.5rem !important; padding-bottom: 1.5rem !important; } #footer .footer-main { padding-top: 0.5rem !important; } #footer .footer-bottom-wrapper { background: rgba(0, 0, 0, 0.18) !important; border-top: 1px solid rgba(255, 255, 255, 0.12) !important; } #footer .footer-bottom { padding: 1.1rem 0 !important; } #footer .footer-bottom a, #footer .footer-bottom-wrapper a { color: rgba(255, 255, 255, 0.85) !important; text-decoration: none !important; border-bottom: 0 !important; } #footer .footer-bottom a:hover { color: #FFB700 !important; text-decoration: none !important; } /* Fix broken design: titles were navy-on-navy */ #footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6, #footer .h1, #footer .h2, #footer .h3, #footer .h4, #footer .h5, #footer .h6, #footer .footer-title, #footer .block-title, #footer .card-title, #footer label, #footer .form-check-label, #footer legend { color: #fff !important; -webkit-text-fill-color: #fff !important; opacity: 1 !important; font-weight: 800 !important; margin-bottom: 1rem !important; } #footer a, #footer .footer-links a { color: rgba(255, 255, 255, 0.88) !important; text-decoration: none !important; } #footer a:hover, #footer .footer-links a:hover { color: #FFB700 !important; text-decoration: none !important; } #footer .footer-links { display: flex !important; flex-direction: column !important; gap: 0.55rem !important; } /* Newsletter — aligned pill input + button, no light panel */ #footer #newsletter-form .input-group, #footer .footer-newsletter .input-group { background: rgba(255, 255, 255, 0.12) !important; border: 1px solid rgba(255, 255, 255, 0.28) !important; border-radius: 999px !important; box-shadow: none !important; align-items: center !important; padding: 0.25rem 0.25rem 0.25rem 0.35rem !important; gap: 0.35rem !important; min-height: 3rem !important; position: relative !important; } #footer #newsletter-email, #footer .footer-newsletter .form-control, #footer #newsletter-form .input-group.has-icon > .form-control { background: transparent !important; border: 0 !important; box-shadow: none !important; color: #fff !important; min-height: 2.4rem !important; /* Room for absolute envelope icon — was overlapping "Email" */ padding-inline-start: 2.75rem !important; padding-inline-end: 0.5rem !important; padding-block: 0.45rem !important; } #footer #newsletter-email::placeholder { color: rgba(255, 255, 255, 0.55) !important; } #footer .footer-newsletter .input-group-icon, #footer #newsletter-form .input-group-icon { position: absolute !important; inset-inline-start: 0.85rem !important; left: 0.85rem !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 2 !important; width: 1.25rem !important; height: 1.25rem !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; pointer-events: none !important; margin: 0 !important; } #footer .footer-newsletter .input-group-icon .fa, #footer .footer-newsletter .input-group-icon .far, #footer #newsletter-form .input-group-icon .fa, #footer #newsletter-form .input-group-icon .far { color: rgba(255, 255, 255, 0.75) !important; font-size: 1rem !important; line-height: 1 !important; } #footer .input-group-append, #footer .input-group-inline-addon { background: transparent !important; border: 0 !important; display: flex !important; align-items: center !important; padding: 0 !important; margin: 0 !important; } #footer #newsletter-subscribe-button, #footer .newsletter-subscribe-button, #footer .btn-primary { background: linear-gradient(135deg, #FFB700, #FF8C00) !important; border: 0 !important; color: #0E2368 !important; border-radius: 999px !important; font-weight: 800 !important; min-height: 2.4rem !important; padding: 0.45rem 1.15rem !important; display: inline-flex !important; align-items: center !important; box-shadow: none !important; } #footer .form-select, #footer select, #footer .theme-selector, #footer #store-theme-selector, #footer [aria-labelledby="theme-selector-heading"] { display: none !important; } /* Social icons — equal glass pills, no odd glow */ #footer .social-icons a, #footer .social a, #footer .footer-social .btn-social, .footer-social a, .social-buttons a { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 2.5rem !important; height: 2.5rem !important; border-radius: 999px !important; background: rgba(255, 255, 255, 0.12) !important; border: 1px solid rgba(255, 255, 255, 0.28) !important; color: #fff !important; margin: 0 0.3rem !important; box-shadow: none !important; filter: none !important; text-decoration: none !important; } #footer .footer-social .btn-social:hover, #footer .social-icons a:hover { background: rgba(255, 140, 0, 0.9) !important; color: #fff !important; transform: translateY(-2px) !important; box-shadow: none !important; } .form-control, .form-select, select.form-control, .qty-dropdown, .custom-select { border-radius: 14px !important; border: 1.5px solid #CBD5E1 !important; font-family: var(--sprylo-font) !important; color: #0E2368 !important; background: #fff !important; font-weight: 600 !important; min-height: 2.5rem !important; } .form-control:focus, .form-select:focus, select.form-control:focus { border-color: #0059C1 !important; box-shadow: 0 0 0 4px rgba(0, 89, 193, 0.14) !important; } /* Offcanvas cart glass + footer */ .offcanvas, .offcanvas-cart, #offcanvas-cart { background: rgba(244, 246, 252, 0.92) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border-left: 1px solid rgba(226, 232, 240, 0.8) !important; } #offcanvas-cart .offcanvas-cart-footer, .offcanvas .offcanvas-cart-footer { background: linear-gradient(105deg, #0E2368 0%, #0059C1 55%, #1670D4 100%) !important; color: #fff !important; border: 0 !important; box-shadow: 0 -12px 32px rgba(14, 35, 104, 0.2) !important; padding: 1rem 1.15rem !important; } #offcanvas-cart .offcanvas-cart-footer, #offcanvas-cart .offcanvas-cart-footer *, .offcanvas .offcanvas-cart-footer a, .offcanvas .offcanvas-cart-footer .btn-link, .offcanvas .offcanvas-cart-footer .btn-clear { color: #fff !important; } #offcanvas-cart .offcanvas-cart-footer .btn-action, #offcanvas-cart .offcanvas-cart-footer .btn-success, #offcanvas-cart .offcanvas-cart-footer a.btn { background: linear-gradient(135deg, #FFB700, #FF8C00) !important; border: 0 !important; color: #0E2368 !important; font-weight: 800 !important; border-radius: 999px !important; box-shadow: 0 8px 20px rgba(255, 140, 0, 0.35) !important; padding: 0.55rem 1.1rem !important; } #offcanvas-cart .offcanvas-cart-item, .offcanvas .offcanvas-cart-item { background: rgba(255, 255, 255, 0.78) !important; backdrop-filter: blur(8px) !important; border-radius: 16px !important; border: 1px solid rgba(226, 232, 240, 0.9) !important; margin-bottom: 0.65rem !important; padding: 0.85rem !important; } #offcanvas-cart .nav-tabs .nav-link, .offcanvas .nav-tabs .nav-link { color: #5C7298 !important; } #offcanvas-cart .nav-tabs .nav-link.active, .offcanvas .nav-tabs .nav-link.active { color: #0059C1 !important; background: rgba(0, 89, 193, 0.08) !important; border-radius: 999px !important; } /* Qty selects in cart / offcanvas — high contrast */ #offcanvas-cart .qty-input .mf-dropdown > .btn, #offcanvas-cart .qty-input-dropdown .btn, .offcanvas .qty-input .btn, .cart-row .qty-input .btn, .cart-item .qty-input .btn, .offcanvas-cart-item .qty-input .btn { display: inline-flex !important; align-items: center !important; width: auto !important; min-width: 7.5rem !important; min-height: 2.45rem !important; padding: 0.45rem 0.85rem !important; border-radius: 12px !important; border: 2px solid #0059C1 !important; background: linear-gradient(180deg, #FFFFFF 0%, #EEF4FC 100%) !important; color: #0E2368 !important; font-weight: 700 !important; box-shadow: 0 4px 12px rgba(0, 89, 193, 0.12) !important; opacity: 1 !important; font-size: 0.875rem !important; } #offcanvas-cart .qty-input .mf-dropdown > .btn .fwn, #offcanvas-cart .qty-input .mf-dropdown > .btn [data-bind="value"], #offcanvas-cart .qty-input .mf-dropdown > .btn .fa, #offcanvas-cart .qty-input .mf-dropdown > .btn .fas, .offcanvas .qty-input .btn * { color: #0E2368 !important; opacity: 1 !important; } #offcanvas-cart .qty-input .mf-dropdown > .btn:hover, .offcanvas .qty-input .btn:hover { border-color: #FF8C00 !important; background: linear-gradient(180deg, #FFF8F0 0%, #FFE8CC 100%) !important; color: #0E2368 !important; } .qty-input select.qty-dropdown, .qty-input .qty-dropdown { color: #0E2368 !important; border-color: #0059C1 !important; background: #fff !important; } .text-muted, .art-description { color: #5C7298 !important; } .pymes-product-card__actions { display: flex !important; align-items: center !important; gap: 0.5rem !important; margin-top: 1rem !important; } .pymes-product-card__actions .pymes-add-btn { flex: 1 1 auto !important; } .pymes-product-card__actions .pymes-wish-btn { width: 2.75rem !important; height: 2.75rem !important; padding: 0 !important; border: 1px solid #E2E8F0 !important; background: #fff !important; color: #0E2368 !important; } .pymes-product-card__body { display: flex !important; flex-direction: column !important; gap: 0.35rem !important; } /* -------------------------------------------------------------------------- Welcome bento showcase (homepage) -------------------------------------------------------------------------- */ .pymes-welcome { margin: 1.5rem 0 2.25rem !important; } .pymes-welcome__header { margin-bottom: 1.35rem !important; max-width: 40rem; } .pymes-welcome__title { font-size: clamp(1.75rem, 2.6vw, 2.35rem) !important; font-weight: 900 !important; letter-spacing: -0.03em !important; color: #0E2368 !important; margin: 0 0 0.55rem !important; line-height: 1.15 !important; } .pymes-welcome__title-accent { background: linear-gradient(110deg, #0059C1 0%, #FF8C00 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; position: relative !important; } .pymes-welcome__lead { margin: 0 !important; color: #5C7298 !important; font-size: 1.05rem !important; line-height: 1.55 !important; font-weight: 500 !important; } .pymes-bento { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-template-rows: minmax(190px, 1fr) minmax(190px, 1fr) minmax(210px, 1fr) !important; gap: 1rem !important; } .pymes-bento__card { position: relative !important; display: flex !important; overflow: hidden !important; border-radius: 28px !important; padding: 1.35rem 1.4rem !important; text-decoration: none !important; color: #fff !important; min-height: 0 !important; box-shadow: 0 18px 40px rgba(14, 35, 104, 0.12) !important; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease !important; isolation: isolate !important; } .pymes-bento__card::before { content: "" !important; position: absolute !important; inset: 0 !important; background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, transparent 50%) !important; pointer-events: none !important; z-index: 3 !important; } .pymes-bento__card::after { display: none !important; } .pymes-bento__card:hover { transform: translateY(-4px) scale(1.01) !important; box-shadow: 0 24px 48px rgba(0, 89, 193, 0.22), 0 0 0 1px rgba(255, 140, 0, 0.25) !important; color: #fff !important; text-decoration: none !important; } .pymes-bento__card--hero { grid-column: 1 / 3 !important; grid-row: 1 / 3 !important; padding: 1.75rem 1.85rem !important; align-items: stretch !important; } .pymes-bento__card--mid { grid-column: 3 / 4 !important; } .pymes-bento__card--mid:nth-of-type(2) { grid-row: 1 / 2 !important; } .pymes-bento__card--mid:nth-of-type(3) { grid-row: 2 / 3 !important; } .pymes-bento__card--sm:nth-of-type(4) { grid-column: 1 / 2 !important; grid-row: 3 / 4 !important; } .pymes-bento__card--sm:nth-of-type(5) { grid-column: 2 / 3 !important; grid-row: 3 / 4 !important; } .pymes-bento__card--sm:nth-of-type(6) { grid-column: 3 / 4 !important; grid-row: 3 / 4 !important; } .pymes-bento__card--blue { background: linear-gradient(135deg, #3B82F6 0%, #0059C1 50%, #0E2368 100%) !important; } .pymes-bento__card--indigo { background: linear-gradient(145deg, #6366F1 0%, #4338CA 55%, #0E2368 100%) !important; } .pymes-bento__card--teal { background: linear-gradient(145deg, #2DD4BF 0%, #0D9488 50%, #115E59 100%) !important; } .pymes-bento__card--dark { background: linear-gradient(145deg, #334155 0%, #1E293B 55%, #0F172A 100%) !important; } .pymes-bento__card--green { background: linear-gradient(145deg, #4ADE80 0%, #16A34A 50%, #14532D 100%) !important; } .pymes-bento__card--orange { background: linear-gradient(145deg, #FFB700 0%, #FF8C00 48%, #C2410C 100%) !important; } .pymes-bento__content { position: relative !important; z-index: 4 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 0.55rem !important; max-width: 58% !important; pointer-events: none !important; } .pymes-bento__card--hero .pymes-bento__content { max-width: 52% !important; justify-content: center !important; } .pymes-bento__eyebrow { font-size: 0.7rem !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; opacity: 0.88 !important; color: #fff !important; } .pymes-bento__heading { margin: 0 !important; font-size: clamp(1.15rem, 1.7vw, 1.65rem) !important; font-weight: 800 !important; line-height: 1.2 !important; letter-spacing: -0.02em !important; color: #fff !important; } .pymes-bento__card--hero .pymes-bento__heading { font-size: clamp(1.6rem, 2.4vw, 2.35rem) !important; } .pymes-bento__copy { margin: 0.15rem 0 0.35rem !important; font-size: 0.95rem !important; line-height: 1.5 !important; color: rgba(255, 255, 255, 0.9) !important; font-weight: 500 !important; max-width: 28rem !important; } .pymes-bento__cta { display: inline-flex !important; align-items: center !important; gap: 0.45rem !important; margin-top: auto !important; font-size: 0.92rem !important; font-weight: 700 !important; color: #fff !important; border-bottom: 1.5px solid rgba(255, 255, 255, 0.75) !important; padding-bottom: 1px !important; transition: gap 0.25s ease !important; } .pymes-bento__cta--pill { border: 0 !important; border-bottom: 0 !important; background: #fff !important; color: #0E2368 !important; padding: 0.65rem 1.15rem !important; border-radius: 999px !important; box-shadow: 0 10px 24px rgba(14, 35, 104, 0.18) !important; } .pymes-bento__cta--pill .fa { color: #0E2368 !important; } .pymes-bento__card:hover .pymes-bento__cta { gap: 0.7rem !important; } .pymes-bento__dots { display: flex !important; gap: 0.35rem !important; margin-top: 0.85rem !important; } .pymes-bento__dots span { width: 1.35rem !important; height: 3px !important; border-radius: 99px !important; background: rgba(255, 255, 255, 0.35) !important; } .pymes-bento__dots span.is-active { background: #fff !important; width: 1.75rem !important; } .pymes-bento__media { position: absolute !important; right: -2% !important; bottom: -6% !important; width: min(46%, 280px) !important; height: auto !important; object-fit: contain !important; z-index: 2 !important; /* Subtle soften only — products stay recognizable */ filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.22)) !important; opacity: 1 !important; mask-image: none !important; -webkit-mask-image: none !important; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) !important; pointer-events: none !important; } .pymes-bento__card--hero .pymes-bento__media { width: min(48%, 420px) !important; right: 2% !important; bottom: -4% !important; filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.24)) !important; opacity: 1 !important; } .pymes-bento__card:hover .pymes-bento__media { transform: translateY(-6px) scale(1.03) !important; } @media (max-width: 991.98px) { .pymes-bento { grid-template-columns: 1fr 1fr !important; grid-template-rows: none !important; } .pymes-bento__card--hero { grid-column: 1 / -1 !important; grid-row: auto !important; min-height: 280px !important; } .pymes-bento__card--mid, .pymes-bento__card--sm, .pymes-bento__card--mid:nth-of-type(2), .pymes-bento__card--mid:nth-of-type(3), .pymes-bento__card--sm:nth-of-type(4), .pymes-bento__card--sm:nth-of-type(5), .pymes-bento__card--sm:nth-of-type(6) { grid-column: auto !important; grid-row: auto !important; min-height: 200px !important; } } @media (max-width: 575.98px) { .pymes-bento { grid-template-columns: 1fr !important; } .pymes-bento__content { max-width: 62% !important; } .pymes-bento__card--hero .pymes-bento__content { max-width: 70% !important; } .pymes-bento__copy { display: none !important; } } /* -------------------------------------------------------------------------- Spacing / alignment polish (qty vs price, cart rows, art cards) -------------------------------------------------------------------------- */ #offcanvas-cart .offcanvas-cart-item > .row.flex-wrap, #offcanvas-cart .offcanvas-cart-item > .row.align-items-center { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; gap: 0.75rem !important; margin-left: 0 !important; margin-right: 0 !important; } #offcanvas-cart .offcanvas-cart-item > .row.flex-wrap > [class*="col"], #offcanvas-cart .offcanvas-cart-item > .row.align-items-center > [class*="col"] { padding-left: 0 !important; padding-right: 0 !important; } #offcanvas-cart .offcanvas-cart-item .col.col-alpha, #offcanvas-cart .offcanvas-cart-item .col-alpha { flex: 0 0 140px !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: 140px !important; width: 140px !important; min-width: 140px !important; max-width: 140px !important; } #offcanvas-cart .offcanvas-cart-item > .row.flex-wrap > .col:not(.col-auto):not(.col-alpha):not(.col-image), #offcanvas-cart .offcanvas-cart-item > .row.align-items-center > .col:not(.col-auto):not(.col-alpha):not(.col-image) { flex: 1 1 0 !important; width: auto !important; max-width: none !important; min-width: 0 !important; } #offcanvas-cart .offcanvas-cart-item .col-auto { flex: 0 0 auto !important; width: auto !important; } #offcanvas-cart .qty-input, .offcanvas-cart-item .qty-input { margin: 0 !important; width: auto !important; max-width: 8.5rem !important; } #offcanvas-cart .qty-input .btn { width: auto !important; min-width: 6.5rem !important; max-width: 8.5rem !important; } #offcanvas-cart .unit-price, .offcanvas-cart-item .unit-price { display: inline-block !important; margin: 0 !important; white-space: nowrap !important; } /* Product detail qty + add-to-cart row */ .pd-offer .add-to-cart, .pd-offer .pd-offer-actions, .add-to-cart { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 0.75rem !important; } .pd-offer .qty-input, .add-to-cart .qty-input { margin: 0 !important; } .menubar-section .menubar, .menubar-section .navbar { display: flex !important; align-items: center !important; gap: 0.5rem !important; flex-wrap: wrap !important; }