/* Theme Name: ExitLogic Theme URI: https://exitlogic.io Author: ExitLogic Team Description: ExitLogic digital audit marketplace theme with WooCommerce support Version: 1.5.6 Requires at least: 6.0 Tested up to: 6.7 Requires PHP: 8.0 License: GPL v2 or later WC requires at least: 7.0 WC tested up to: 9.0 Text Domain: exitlogic Tags: woocommerce, e-commerce, custom-menu, custom-logo */ /* ========================================================= GLOBAL OVERFLOW & BOX RESET — prevents horizontal scroll that causes content to appear shifted left on mobile IMPORTANT: overflow-x:hidden is on BODY only, NOT html. Setting it on html creates a new scroll root that causes absolutely-positioned overlays (select2 country/state dropdowns) to clip behind other elements. ========================================================= */ html { /* NO overflow-x:hidden here — breaks select2 z-index stacking */ max-width: 100%; } body { overflow-x: hidden; max-width: 100%; } *, *::before, *::after { box-sizing: border-box; /* max-width:100% NOT set universally — it breaks WC Blocks floating labels and select2 dropdown widths */ } img, video, iframe, embed, object { max-width: 100%; height: auto; } /* ========================================================= SELECT2 / WOOCOMMERCE DROPDOWN FIX Country & State dropdowns are absolutely-positioned overlays appended to . They need: 1. No max-width constraint 2. High z-index to appear above ALL form fields 3. Visible overflow so the list isn't clipped ========================================================= */ .select2-container { max-width: none !important; } .select2-dropdown, .select2-container--open .select2-dropdown { z-index: 999999 !important; max-width: none !important; overflow: hidden !important; /* clip contents to the box — no spill-out */ position: absolute !important; border: 1px solid #d1d5db !important; border-radius: 8px !important; box-shadow: 0 8px 24px rgba(0,0,0,.12) !important; background: #fff !important; } /* The scrollable results list — capped height with scroll */ .select2-results { max-width: none !important; overflow: hidden !important; } .select2-results__options { max-height: 240px !important; overflow-y: auto !important; /* ← scroll INSIDE the box */ overflow-x: hidden !important; max-width: none !important; } /* Search box inside dropdown */ .select2-search--dropdown { max-width: none !important; padding: 8px !important; border-bottom: 1px solid #e2e8f0 !important; } .select2-search--dropdown input { width: 100% !important; padding: 6px 10px !important; border: 1px solid #d1d5db !important; border-radius: 6px !important; font-size: .875rem !important; outline: none !important; } /* Individual options */ .select2-results__option { padding: 8px 14px !important; font-size: .875rem !important; color: #374151 !important; cursor: pointer !important; } .select2-results__option--highlighted { background: #e8f3f4 !important; color: #0d1822 !important; } /* Ensure the form fields themselves don't create stacking contexts that rise above the dropdown */ .woocommerce-checkout #customer_details, .woocommerce form .form-row { position: relative; z-index: 1; } /* The open dropdown must be above everything */ body .select2-container--open { z-index: 999999 !important; } /* ========================================================= DESIGN SYSTEM — VARIABLES ========================================================= */ :root { /* Brand */ --teal: #348993; --teal-bright: #4dbdcc; --teal-600: #2c757e; --teal-700: #256068; --teal-50: #e8f3f4; --teal-100: #d0e7e9; --navy: #0d1822; --navy-mid: #0c2f3a; --navy-800: #0d1822; --navy-700: #0c2f3a; --ink: #0f172a; /* Slate palette */ --slate-900: #0f172a; --slate-800: #1e293b; --slate-700: #334155; --slate-600: #475569; --slate-500: #64748b; --slate-400: #94a3b8; --slate-300: #cbd5e1; --slate-200: #e2e8f0; --slate-100: #f1f5f9; --slate-50: #f8fafc; /* Utility */ --white: #ffffff; --bg: #fafbfc; --amber: #f59e0b; --green: #10b981; --rose: #e11d48; /* Shadows */ --shadow-xs: 0 1px 2px rgba(15,23,42,.06); --shadow-sm: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04); --shadow-md: 0 4px 6px -1px rgba(15,23,42,.08), 0 2px 4px -2px rgba(15,23,42,.04); --shadow-lg: 0 10px 15px -3px rgba(15,23,42,.08), 0 4px 6px -4px rgba(15,23,42,.04); --shadow-xl: 0 20px 25px -5px rgba(15,23,42,.10), 0 8px 10px -6px rgba(15,23,42,.04); /* Radii */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; /* Container */ --container: 1200px; --container-tight: 800px; --container-wide: 1400px; /* Transitions */ --transition: 180ms ease; } /* ========================================================= RESET & BASE ========================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 1rem; line-height: 1.6; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; } a { color: var(--teal); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--teal-600); } ul, ol { list-style: none; } button { font-family: inherit; cursor: pointer; } input, select, textarea { font-family: inherit; } /* ========================================================= TYPOGRAPHY ========================================================= */ h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.2; color: var(--ink); } h1 { font-size: clamp(2rem, 4vw, 3.25rem); } h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); } h3 { font-size: clamp(1.125rem, 2vw, 1.5rem); } h4 { font-size: 1.125rem; } h5 { font-size: 1rem; } h6 { font-size: 0.875rem; } p { color: var(--slate-700); line-height: 1.7; } /* ========================================================= CONTAINER & LAYOUT ========================================================= */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 24px; } .container--tight { max-width: var(--container-tight); } .container--wide { max-width: var(--container-wide); } /* ========================================================= NAVIGATION ========================================================= */ .nav { position: sticky; top: 0; z-index: 100; width: 100%; height: 64px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,.08); transition: background var(--transition), box-shadow var(--transition); } .nav--dark { background: #0d1822; } .nav--light { background: rgba(255,255,255,.92); border-bottom: 1px solid var(--slate-200); } .nav__inner { display: flex; align-items: center; gap: 32px; height: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 24px; } .nav__links { display: flex; align-items: center; gap: 8px; } .nav--dark .nav__links a { font-size: 0.9rem; font-weight: 500; color: rgba(255,255,255,.8); padding: 6px 12px; border-radius: var(--radius-sm); transition: color var(--transition), background var(--transition); } .nav--dark .nav__links a:hover { color: #fff; background: rgba(255,255,255,.08); } .nav--light .nav__links a { font-size: 0.9rem; font-weight: 500; color: var(--slate-600); padding: 6px 12px; border-radius: var(--radius-sm); transition: color var(--transition), background var(--transition); } .nav--light .nav__links a:hover { color: var(--ink); background: var(--slate-100); } .nav__spacer { flex: 1; } .nav__cta { display: flex; align-items: center; gap: 8px; } /* Logo */ .logo { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.1rem; color: #fff; white-space: nowrap; flex-shrink: 0; } .logo__mark { display: grid; place-items: center; width: 30px; height: 30px; background: var(--teal); color: #fff; font-weight: 900; font-size: 0.875rem; border-radius: 7px; } /* Mobile nav */ .nav__mobile { display: none; position: absolute; top: 64px; left: 0; right: 0; background: #0d1822; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 3px solid #348993; padding: 16px 24px 24px; flex-direction: column; gap: 4px; z-index: 9999; box-shadow: 0 8px 32px rgba(0,0,0,.4); } .nav__mobile.open { display: flex; } .nav__mobile a { color: rgba(255,255,255,.8); font-size: 0.95rem; font-weight: 500; padding: 10px 12px; border-radius: var(--radius-sm); transition: background var(--transition), color var(--transition); } .nav__mobile a:hover { background: rgba(255,255,255,.08); color: #fff; } .nav__mobile .nav__mobile-cta { display: flex; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.1); } @media (max-width: 900px) { .nav__links { display: none; } .nav__cta { display: none; } .nav__hamburger { display: block !important; } } /* ========================================================= BUTTONS ========================================================= */ .btn { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 600; line-height: 1; padding: 11px 20px; border-radius: var(--radius-md); border: 1.5px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition); font-family: inherit; } .btn:active { transform: translateY(1px); } /* Primary */ .btn--primary { background: var(--teal); color: #fff; border-color: var(--teal); } .btn--primary:hover { background: var(--teal-600); border-color: var(--teal-600); color: #fff; box-shadow: 0 4px 12px rgba(52,137,147,.35); } /* Secondary */ .btn--secondary { background: var(--teal-50); color: var(--teal-700); border-color: var(--teal-100); } .btn--secondary:hover { background: var(--teal-100); color: var(--teal-700); } /* Ghost */ .btn--ghost { background: transparent; color: var(--slate-700); border-color: var(--slate-300); } .btn--ghost:hover { background: var(--slate-100); color: var(--ink); } /* Dark ghost (on dark backgrounds) */ .btn--dark-ghost { background: rgba(255,255,255,.1); color: rgba(255,255,255,.9); border-color: rgba(255,255,255,.2); } .btn--dark-ghost:hover { background: rgba(255,255,255,.18); color: #fff; } /* Danger */ .btn--danger { background: var(--rose); color: #fff; border-color: var(--rose); } .btn--danger:hover { background: #be1337; border-color: #be1337; color: #fff; } /* Sizes */ .btn--xs { font-size: 0.75rem; padding: 6px 12px; border-radius: var(--radius-sm); } .btn--sm { font-size: 0.825rem; padding: 8px 16px; } .btn--lg { font-size: 1rem; padding: 14px 28px; border-radius: var(--radius-lg); } .btn--xl { font-size: 1.0625rem; padding: 16px 36px; border-radius: var(--radius-lg); } .btn--full { width: 100%; justify-content: center; } /* ========================================================= PILLS / BADGES ========================================================= */ .pill { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-full); white-space: nowrap; letter-spacing: .02em; text-transform: uppercase; } .pill--teal { background: var(--teal-50); color: var(--teal-700); } .pill--navy { background: rgba(255,255,255,.12); color: rgba(255,255,255,.9); border: 1px solid rgba(255,255,255,.18); } .pill--amber { background: #fef3c7; color: #92400e; } .pill--green { background: #d1fae5; color: #065f46; } .pill--rose { background: #ffe4e6; color: #9f1239; } .pill--slate { background: var(--slate-100); color: var(--slate-600); } /* ========================================================= CATEGORY CARDS ========================================================= */ .cat-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px; background: var(--white); border: 1px solid var(--slate-200); border-radius: var(--radius-lg); text-decoration: none; color: inherit; transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); cursor: pointer; } .cat-card:hover { border-color: var(--teal-100); box-shadow: var(--shadow-md); transform: translateY(-2px); color: inherit; } .cat-card__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-md); font-size: 1.25rem; flex-shrink: 0; } .cat-card__name { font-size: 0.9rem; font-weight: 600; color: var(--ink); line-height: 1.3; } .cat-card__count { font-size: 0.75rem; color: var(--slate-500); margin-top: 2px; } .cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; } /* ========================================================= PRODUCT CARDS ========================================================= */ .product-card { background: var(--white); border: 1px solid var(--slate-200); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); } .product-card:hover { border-color: var(--teal-100); box-shadow: var(--shadow-lg); transform: translateY(-3px); } .product-card a { color: inherit; text-decoration: none; } .product__thumb { /* Square on every screen size */ position: relative; width: 100%; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; overflow: hidden; } .product__body { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .product__cat { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--teal); } .product__title { font-size: 1rem; font-weight: 700; color: var(--ink); line-height: 1.3; } .product__desc { font-size: 0.825rem; color: var(--slate-600); line-height: 1.5; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .product__footer { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--slate-100); } .product__price { font-size: 1.0625rem; font-weight: 800; color: var(--ink); } .product__price .was { font-size: 0.8rem; font-weight: 400; color: var(--slate-400); text-decoration: line-through; margin-left: 4px; } .product__rating { display: flex; align-items: center; gap: 4px; font-size: 0.75rem; color: var(--slate-500); } .stars { display: inline-flex; gap: 1px; color: var(--amber); font-size: 0.8rem; } /* ========================================================= PAGE HERO ========================================================= */ .page-hero { background: linear-gradient(160deg, #091c28 0%, #0c2f3a 55%, #091c28 100%); padding: 64px 0 56px; position: relative; overflow: hidden; } .page-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 80% at 30% 50%, rgba(52,137,147,.28) 0%, transparent 65%); pointer-events: none; } .page-hero__inner { position: relative; z-index: 1; text-align: center; } .page-hero__title { font-size: clamp(1.75rem, 3.5vw, 2.75rem); font-weight: 800; color: #fff; margin-bottom: 12px; } .page-hero__sub { font-size: 1.0625rem; color: rgba(255,255,255,.7); max-width: 600px; margin-inline: auto; } /* ========================================================= SECTION CHROME ========================================================= */ .section { padding: 80px 0; } .section--sm { padding: 48px 0; } .section--lg { padding: 120px 0; } .section--dark { background: var(--navy); color: #fff; } .section--slate { background: var(--slate-50); } .section--teal-light { background: var(--teal-50); } .section__header { text-align: center; max-width: 600px; margin-inline: auto; margin-bottom: 56px; } .section__eyebrow { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--teal); margin-bottom: 12px; } .section--dark .section__eyebrow { color: var(--teal-100); } .section__title { margin-bottom: 16px; } .section--dark .section__title { color: #fff; } .section__lead { color: var(--slate-500); font-size: 1.0625rem; } .section--dark .section__lead { color: rgba(255,255,255,.65); } /* ========================================================= HERO (HOMEPAGE) ========================================================= */ .hero { background: var(--navy); padding: 100px 0 80px; position: relative; overflow: hidden; min-height: 600px; display: flex; align-items: center; } .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 60% at 70% 50%, rgba(52,137,147,.25) 0%, transparent 60%), radial-gradient(ellipse 40% 60% at 20% 80%, rgba(21,42,77,.6) 0%, transparent 60%); pointer-events: none; } /* Grid overlay */ .hero::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; } .hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .hero__content { } .hero__badge { margin-bottom: 24px; } .hero__title { font-size: clamp(2.25rem, 4.5vw, 3.5rem); font-weight: 900; color: #fff; line-height: 1.1; margin-bottom: 20px; letter-spacing: -.02em; } .hero__title span { color: var(--teal); } .hero__lede { font-size: 1.125rem; color: rgba(255,255,255,.7); line-height: 1.7; margin-bottom: 36px; max-width: 480px; } .hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 48px; } .hero__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.1); } .hero__stat-val { font-size: 1.5rem; font-weight: 800; color: #fff; line-height: 1; margin-bottom: 4px; } .hero__stat-lbl { font-size: 0.775rem; color: rgba(255,255,255,.55); font-weight: 500; } /* Floating review badges */ .hero__right { position: relative; display: flex; align-items: center; justify-content: center; } .hero__card-stack { position: relative; width: 100%; max-width: 420px; } .hero__main-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-xl); padding: 28px; backdrop-filter: blur(10px); } .review-badge { position: absolute; background: var(--white); border-radius: var(--radius-md); padding: 10px 14px; box-shadow: var(--shadow-xl); font-size: 0.8rem; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; white-space: nowrap; animation: float 4s ease-in-out infinite; } .review-badge--1 { top: -16px; right: -24px; animation-delay: 0s; } .review-badge--2 { bottom: -16px; left: -24px; animation-delay: 2s; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } /* ========================================================= LOGOS STRIP ========================================================= */ .logos-strip { padding: 40px 0; background: var(--white); border-bottom: 1px solid var(--slate-100); } .logos-strip__label { text-align: center; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--slate-400); margin-bottom: 24px; } .logos-strip__row { display: flex; align-items: center; justify-content: center; gap: 40px; flex-wrap: wrap; } .logos-strip__logo { font-size: 0.875rem; font-weight: 700; color: var(--slate-400); letter-spacing: .03em; } /* ========================================================= HOW IT WORKS ========================================================= */ .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; position: relative; } .steps-grid::before { content: ''; position: absolute; top: 28px; left: calc(16.666% + 28px); right: calc(16.666% + 28px); height: 2px; background: linear-gradient(90deg, var(--teal) 0%, var(--teal-600) 100%); opacity: .3; } .step-card { text-align: center; padding: 32px 24px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-xl); } .step-card__number { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius-full); background: var(--teal); color: #fff; font-size: 1.25rem; font-weight: 800; margin-bottom: 20px; } .step-card__title { font-size: 1.125rem; font-weight: 700; color: #fff; margin-bottom: 12px; } .step-card__body { font-size: 0.9rem; color: rgba(255,255,255,.6); line-height: 1.6; } /* ========================================================= BENEFIT CARDS ========================================================= */ .benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .benefit-card { padding: 28px; background: var(--white); border: 1px solid var(--slate-200); border-radius: var(--radius-xl); transition: box-shadow var(--transition), transform var(--transition); } .benefit-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); } .benefit-card__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--teal-50); color: var(--teal); font-size: 1.4rem; margin-bottom: 18px; } .benefit-card__title { font-size: 1.0625rem; font-weight: 700; color: var(--ink); margin-bottom: 10px; } .benefit-card__body { font-size: 0.875rem; color: var(--slate-500); line-height: 1.6; } /* ========================================================= NEWSLETTER CTA ========================================================= */ .newsletter { background: linear-gradient(135deg, #0d1822 0%, #0c2f3a 100%); padding: 72px 0; text-align: center; position: relative; overflow: hidden; } .newsletter::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 50% 100%, rgba(52,137,147,.2) 0%, transparent 70%); pointer-events: none; } .newsletter__inner { position: relative; z-index: 1; max-width: 540px; margin-inline: auto; } .newsletter__title { font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 800; color: #fff; margin-bottom: 12px; } .newsletter__sub { font-size: 1rem; color: rgba(255,255,255,.65); margin-bottom: 32px; } .newsletter__form { display: flex; gap: 8px; max-width: 440px; margin-inline: auto; } .newsletter__form input { flex: 1; height: 46px; padding: 0 16px; border: 1.5px solid rgba(255,255,255,.2); border-radius: var(--radius-md); background: rgba(255,255,255,.08); color: #fff; font-size: 0.9rem; outline: none; transition: border-color var(--transition); } .newsletter__form input::placeholder { color: rgba(255,255,255,.45); } .newsletter__form input:focus { border-color: var(--teal); } /* ========================================================= FOOTER — v18 clean ========================================================= */ .footer { background: #0d1822; padding: 64px 0 0; color: rgba(255,255,255,.65); } /* ── Main grid ────────────────────────────────────────────── */ .footer__grid { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 56px; } /* Brand column */ .footer__col--brand { padding-right: 16px; } .footer__logo { display: inline-block; line-height: 0; margin-bottom: 18px; text-decoration: none; } .footer__tagline { font-size: 0.875rem; color: rgba(255,255,255,.72); line-height: 1.65; margin: 0 0 22px; max-width: 230px; } .footer__socials { display: flex; flex-direction: row; align-items: center; gap: 8px; margin-bottom: 22px; } .footer__social-link { width: 34px; height: 34px; border-radius: 8px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18); display: inline-flex; align-items: center; justify-content: center; color: rgba(255,255,255,.75); text-decoration: none; flex-shrink: 0; transition: background 0.18s, color 0.18s, border-color 0.18s; } .footer__social-link:hover { background: rgba(77,189,204,.15); border-color: rgba(77,189,204,.3); color: #4dbdcc; } .footer__badge { display: inline-flex; align-items: center; gap: 7px; font-size: 0.775rem; font-weight: 600; color: rgba(255,255,255,.72); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 100px; padding: 6px 12px 6px 10px; line-height: 1; } .footer__badge svg { stroke: #4dbdcc; flex-shrink: 0; } /* Link columns */ .footer__col-title { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.60); margin: 0 0 20px; line-height: 1; } .footer__col nav { display: flex; flex-direction: column; } .footer__col nav a { font-size: 0.9rem; font-weight: 500; color: rgba(255,255,255,.78); text-decoration: none; padding: 5px 0; line-height: 1.5; transition: color 0.15s; } .footer__col nav a:hover { color: #fff; } /* ── Bottom bar ───────────────────────────────────────────── */ .footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.07); } .footer__copyright { font-size: 0.825rem; color: rgba(255,255,255,.58); margin: 0; line-height: 1.5; } .footer__legal-links { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .footer__legal-links a { font-size: 0.825rem; color: rgba(255,255,255,.60); text-decoration: none; transition: color 0.15s; white-space: nowrap; } .footer__legal-links a:hover { color: rgba(255,255,255,.9); } .footer__legal-sep { color: rgba(255,255,255,.35); font-size: 0.8rem; } /* ── Responsive ───────────────────────────────────────────── */ @media (max-width: 1024px) { .footer__grid { grid-template-columns: 1fr 1fr 1fr; gap: 36px; } .footer__col--brand { grid-column: 1 / -1; display: flex; flex-direction: row; align-items: flex-start; gap: 40px; padding-right: 0; } .footer__col--brand > * { flex-shrink: 0; } .footer__tagline { max-width: 300px; flex-shrink: 1 !important; } } @media (max-width: 768px) { .footer { padding: 48px 0 0; } .footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; padding-bottom: 40px; } .footer__col--brand { grid-column: 1 / -1; flex-direction: column; gap: 0; } .footer__tagline { max-width: 100%; } } @media (max-width: 480px) { .footer { padding: 40px 0 0; } .footer__grid { grid-template-columns: 1fr 1fr; gap: 24px 20px; padding-bottom: 32px; } .footer__bottom { flex-direction: column; align-items: flex-start; gap: 10px; } .footer__legal-links { gap: 12px; } } @media (max-width: 360px) { .footer__grid { grid-template-columns: 1fr; } } /* ========================================================= FORMS / INPUTS ========================================================= */ .field { margin-bottom: 18px; } .field label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; } .input { width: 100%; height: 42px; padding: 0 14px; border: 1.5px solid var(--slate-300); border-radius: var(--radius-md); background: var(--white); color: var(--ink); font-size: 0.9rem; outline: none; transition: border-color var(--transition), box-shadow var(--transition); font-family: inherit; } .input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(52,137,147,.15); } .input::placeholder { color: var(--slate-400); } .input--lg { height: 48px; font-size: 0.95rem; padding: 0 16px; } textarea.input { height: auto; padding: 12px 14px; resize: vertical; } select.input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; } /* Search bar */ .search-bar { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.15); border-radius: var(--radius-lg); padding: 6px 6px 6px 16px; transition: border-color var(--transition); } .search-bar:focus-within { border-color: var(--teal); } .search-bar input { flex: 1; background: none; border: none; outline: none; color: #fff; font-size: 0.9rem; font-family: inherit; } .search-bar input::placeholder { color: rgba(255,255,255,.45); } .search-bar--light { background: var(--white); border-color: var(--slate-300); } .search-bar--light input { color: var(--ink); } .search-bar--light input::placeholder { color: var(--slate-400); } /* ========================================================= UTILITIES ========================================================= */ .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .text-teal { color: var(--teal); } .text-white { color: #fff; } .text-muted { color: var(--slate-500); } .text-sm { font-size: 0.875rem; } .text-xs { font-size: 0.75rem; } .fw-bold { font-weight: 700; } .fw-semibold { font-weight: 600; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .mt-auto { margin-top: auto; } .d-flex { display: flex; } .align-center { align-items: center; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ========================================================= WOOCOMMERCE — PRODUCT ARCHIVE ========================================================= */ .woo-layout { display: grid; grid-template-columns: 260px 1fr; gap: 32px; align-items: start; } /* ─── Mobile filter drawer ──────────────────────────────────── */ /* Overlay */ .filter-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 9998; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .filter-overlay.open { display: block; } /* Drawer header — hidden on desktop */ .sidebar-drawer-header { display: none; } /* Filter toggle button — hidden on desktop */ .filter-toggle-btn { display: none; } /* Toolbar right-side wrapper */ .woo-toolbar__right { display: flex; align-items: center; gap: 10px; } @media (max-width: 768px) { /* Collapse sidebar column — full width for content */ .woo-layout { grid-template-columns: 1fr; } /* Transform sidebar into a slide-in drawer */ .woo-sidebar { position: fixed !important; top: 0 !important; left: -110% !important; width: 300px !important; max-width: 85vw !important; height: 100vh !important; height: 100dvh !important; /* dynamic viewport height for mobile browsers */ overflow-y: auto !important; overflow-x: hidden !important; z-index: 9999 !important; border-radius: 0 !important; border: none !important; border-right: 1px solid rgba(52,137,147,.15) !important; box-shadow: 4px 0 40px rgba(0,0,0,.28) !important; padding: 0 !important; transition: left 0.3s cubic-bezier(.4,0,.2,1) !important; } .woo-sidebar.drawer-open { left: 0 !important; } /* Drawer header */ .sidebar-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--slate-200); background: #fff; position: sticky; top: 0; z-index: 1; } .sidebar-drawer-title { display: flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 800; color: var(--ink); } .sidebar-drawer-close { width: 32px; height: 32px; border: none; background: var(--slate-100); border-radius: 8px; display: grid; place-items: center; cursor: pointer; color: var(--ink); transition: background .15s; } .sidebar-drawer-close:hover { background: var(--slate-200); } /* Sidebar sections get extra padding when in drawer */ .woo-sidebar .woo-sidebar__section { padding: 20px 20px 0; } .woo-sidebar .woo-sidebar__section:last-child { padding-bottom: 24px; } /* Show filter toggle button */ .filter-toggle-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1.5px solid var(--slate-300); border-radius: var(--radius-md); background: #fff; color: var(--ink); font-size: .825rem; font-weight: 700; font-family: inherit; cursor: pointer; transition: border-color .15s, background .15s; position: relative; } .filter-toggle-btn:hover { border-color: var(--teal); color: var(--teal); } .filter-toggle-badge { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; background: var(--teal); color: #fff; border-radius: 50%; font-size: .65rem; font-weight: 800; line-height: 1; } /* Mobile product cards — center aligned */ .product-card .product__body { text-align: center; } .product-card .product__cat { justify-content: center; } .product-card .product__footer { justify-content: center; gap: 10px; flex-wrap: wrap; } /* Tighter card padding on mobile */ .product-card .product__body { padding: 14px 12px 16px; gap: 6px; } .product-card .product__body .product__desc { font-size: .78rem; -webkit-line-clamp: 2; } .product-card .product__body > div:last-child { margin-top: 10px; } } .woo-sidebar { position: sticky; top: 80px; background: var(--white); border: 1px solid var(--slate-200); border-radius: var(--radius-xl); padding: 24px; } .woo-sidebar__section { margin-bottom: 28px; } .woo-sidebar__section:last-child { margin-bottom: 0; } .woo-sidebar__title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--slate-400); margin-bottom: 12px; } .cat-filter-list { display: flex; flex-direction: column; gap: 4px; } .cat-filter-list a { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 0.875rem; color: var(--slate-600); transition: background var(--transition), color var(--transition); } .cat-filter-list a:hover { background: var(--teal-50); color: var(--teal-700); } .cat-filter-list a.active { background: var(--teal-50); color: var(--teal-700); font-weight: 600; } .cat-filter-list a span { font-size: 0.75rem; color: var(--slate-400); } .price-chips { display: flex; flex-wrap: wrap; gap: 6px; } .price-chip { padding: 5px 12px; border: 1.5px solid var(--slate-300); border-radius: var(--radius-full); font-size: 0.8rem; font-weight: 600; color: var(--slate-600); cursor: pointer; transition: border-color var(--transition), color var(--transition), background var(--transition); } .price-chip:hover, .price-chip.active { border-color: var(--teal); color: var(--teal-700); background: var(--teal-50); } .woo-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--slate-200); flex-wrap: wrap; gap: 12px; } .woo-toolbar__count { font-size: 0.875rem; color: var(--slate-500); } .woo-toolbar__sort { } .products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 1100px) { .products-grid { grid-template-columns: repeat(2, 1fr); } } /* Mobile: always 2 columns */ @media (max-width: 768px) { .products-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } } @media (max-width: 360px) { .products-grid { grid-template-columns: 1fr; } } /* ========================================================= WOOCOMMERCE — SINGLE PRODUCT ========================================================= */ /* ── Single product — 3-area grid layout ─────────────── */ .sp-layout { display: grid; grid-template-columns: 1fr 380px; grid-template-rows: auto 1fr; grid-template-areas: "gallery purchase" "content purchase"; gap: 40px 48px; align-items: start; } .sp-gallery { grid-area: gallery; } .sp-purchase { grid-area: purchase; } .sp-content { grid-area: content; } /* Gallery */ .sp-gallery__main { width: 100%; aspect-ratio: 16 / 10; border-radius: var(--radius-xl); overflow: hidden; background: var(--slate-100); border: 1px solid var(--slate-200); } .sp-gallery__placeholder { width: 100%; aspect-ratio: 16 / 10; border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center; } .sp-gallery__thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .sp-gallery__thumb { width: 72px; height: 56px; border-radius: var(--radius-sm); overflow: hidden; border: 2px solid var(--slate-200); cursor: pointer; padding: 0; background: none; transition: border-color .18s; } .sp-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .sp-gallery__thumb:hover, .sp-gallery__thumb.active { border-color: var(--teal); } /* Specialist card */ .sp-specialist-card { background: var(--white); border: 1px solid var(--slate-200); border-radius: var(--radius-xl); padding: 22px; margin-top: 16px; text-align: center; } .sp-specialist-card__avatar { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--teal), var(--teal-700)); display: grid; place-items: center; margin: 0 auto 12px; font-size: 1.4rem; } .sp-specialist-card__name { font-size: .875rem; font-weight: 700; color: var(--ink); margin-bottom: 4px; } .sp-specialist-card__sub { font-size: .8rem; color: var(--slate-400); margin-bottom: 14px; } .sp-specialist-card__stats { display: flex; justify-content: center; gap: 20px; } .sp-specialist-card__val { font-size: 1.1rem; font-weight: 800; color: var(--ink); } .sp-specialist-card__lbl { font-size: .7rem; color: var(--slate-400); margin-top: 2px; } /* Quantity +/- buttons */ .woocommerce .quantity { display: flex !important; align-items: center !important; gap: 0 !important; border: 1.5px solid var(--slate-300) !important; border-radius: var(--radius-md) !important; overflow: hidden !important; background: var(--white) !important; width: 100% !important; margin-bottom: 12px !important; } .qty-btn { width: 44px; height: 46px; border: none; background: var(--slate-50); color: var(--ink); font-size: 1.25rem; font-weight: 700; cursor: pointer; display: grid; place-items: center; flex-shrink: 0; transition: background .15s, color .15s; font-family: inherit; line-height: 1; } .qty-btn:hover { background: var(--teal-50); color: var(--teal); } .qty-btn--minus { border-right: 1px solid var(--slate-200); } .qty-btn--plus { border-left: 1px solid var(--slate-200); } .woocommerce .quantity input.qty { flex: 1 !important; width: 100% !important; height: 46px !important; border: none !important; border-radius: 0 !important; text-align: center !important; font-size: 1rem !important; font-weight: 700 !important; color: var(--ink) !important; background: transparent !important; box-shadow: none !important; outline: none !important; padding: 0 !important; -moz-appearance: textfield !important; } .woocommerce .quantity input.qty::-webkit-inner-spin-button, .woocommerce .quantity input.qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } /* ── Comment & Review forms — sitewide ──────────────── */ .comment-respond, .woocommerce-Reviews { max-width: 100%; } .comment-respond h3, .comments-title, .woocommerce-Reviews-title { font-size: 1.25rem !important; font-weight: 800 !important; color: var(--ink) !important; margin-bottom: 20px !important; letter-spacing: -.02em; } .comment-form, .review form { display: flex; flex-direction: column; gap: 16px; } .comment-form p, .review form p { margin: 0; } .comment-form label, .review form label { display: block; font-size: .82rem; font-weight: 700; color: var(--ink); margin-bottom: 7px; } .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea, .review form textarea { width: 100% !important; padding: 11px 14px !important; border: 1.5px solid var(--slate-300) !important; border-radius: var(--radius-md) !important; font-family: inherit !important; font-size: .9rem !important; color: var(--ink) !important; background: var(--white) !important; outline: none !important; transition: border-color .18s, box-shadow .18s !important; box-sizing: border-box !important; } .comment-form input:focus, .comment-form textarea:focus, .review form textarea:focus { border-color: var(--teal) !important; box-shadow: 0 0 0 3px rgba(52,137,147,.12) !important; } .comment-form textarea, .review form textarea { resize: vertical; min-height: 120px; } .comment-form .form-submit, .review form .form-submit { margin: 0; } .comment-form .submit, .review form input[type="submit"], .woocommerce-Reviews .submit { background: var(--teal) !important; color: #fff !important; border: none !important; border-radius: var(--radius-md) !important; padding: 13px 32px !important; font-size: .9rem !important; font-weight: 700 !important; cursor: pointer !important; font-family: inherit !important; width: 100% !important; transition: background .18s !important; } .comment-form .submit:hover, .review form input[type="submit"]:hover { background: var(--teal-600) !important; } /* Comment list */ .comment-list { list-style: none; padding: 0; margin: 0 0 32px; } .comment-list .comment { margin-bottom: 16px; } .comment-body { padding: 20px; background: var(--white); border: 1px solid var(--slate-200); border-radius: var(--radius-lg); } .comment-author .fn { font-weight: 700; color: var(--ink); font-style: normal; } .comment-metadata { font-size: .78rem; color: var(--slate-400); margin: 4px 0 10px; } .comment-metadata a { color: var(--slate-400); text-decoration: none; } .comment-content p { font-size: .9rem; color: var(--slate-600); margin: 0; line-height: 1.65; } /* WooCommerce review star selector */ .woocommerce-product-rating, .stars a { color: var(--amber) !important; } p.stars { margin-bottom: 12px; } p.stars a { font-size: 1.25rem; margin-right: 2px; text-decoration: none; } /* Reply link */ .comment-reply-link { display: inline-block; margin-top: 10px; font-size: .78rem; color: var(--teal); font-weight: 600; text-decoration: none; } /* ── Mobile single product ───────────────────────────── */ @media (max-width: 900px) { .sp-layout { display: flex; flex-direction: column; } .sp-gallery { order: 1; } /* 1st: product image */ .sp-purchase { order: 2; position: static; } /* 2nd: buy box */ .sp-content { order: 3; } /* 3rd: description */ } @media (max-width: 580px) { .sp-gallery__main, .sp-gallery__placeholder { aspect-ratio: 4/3; border-radius: var(--radius-lg); } .sp-specialist-card__stats { gap: 14px; } } /* Keep old class for any residual references */ .single-product-layout { display: block; } .product-content h2 { font-size: 1.25rem; margin: 32px 0 12px; color: var(--ink); } .product-content p { color: var(--slate-600); line-height: 1.7; margin-bottom: 16px; } .product-content ul { list-style: disc; padding-left: 20px; color: var(--slate-600); margin-bottom: 16px; } .product-content ul li { margin-bottom: 8px; } .purchase-box { position: sticky; top: 80px; background: var(--white); border: 1px solid var(--slate-200); border-radius: var(--radius-xl); padding: 28px; box-shadow: var(--shadow-lg); } .purchase-box__price { font-size: 2rem; font-weight: 900; color: var(--ink); margin-bottom: 4px; } .purchase-box__price .was { font-size: 1rem; color: var(--slate-400); text-decoration: line-through; margin-left: 8px; font-weight: 400; } .purchase-box__rating { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; font-size: 0.875rem; color: var(--slate-500); } .trust-signals { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--slate-100); } .trust-item { display: flex; align-items: center; gap: 10px; font-size: 0.825rem; color: var(--slate-600); margin-bottom: 10px; } .trust-item__icon { color: var(--green); font-size: 1rem; flex-shrink: 0; } /* WooCommerce add to cart */ .woocommerce form.cart { margin-top: 0; } .woocommerce form.cart .single_add_to_cart_button, .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button { background: var(--teal) !important; color: #fff !important; border-radius: var(--radius-md) !important; font-weight: 600 !important; font-family: inherit !important; padding: 12px 24px !important; font-size: 0.95rem !important; border: none !important; width: 100%; transition: background var(--transition) !important; } .woocommerce form.cart .single_add_to_cart_button:hover, .woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { background: var(--teal-600) !important; color: #fff !important; } .woocommerce form.cart .qty { border: 1.5px solid var(--slate-300) !important; border-radius: var(--radius-md) !important; padding: 8px 12px !important; font-size: 1rem !important; font-family: inherit !important; } /* ========================================================= WOOCOMMERCE — CART ========================================================= */ .cart-section { padding: 56px 0; min-height: 60vh; } .cart-layout { display: grid; grid-template-columns: 1fr 340px; gap: 32px; align-items: start; } .cart-items { background: var(--white); border: 1px solid var(--slate-200); border-radius: var(--radius-xl); overflow: hidden; } .cart-items__header { padding: 16px 24px; border-bottom: 1px solid var(--slate-200); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--slate-400); display: grid; grid-template-columns: 1fr auto auto auto; gap: 16px; } .cart-item { padding: 20px 24px; border-bottom: 1px solid var(--slate-100); display: grid; grid-template-columns: 60px 1fr auto auto auto; gap: 16px; align-items: center; } .cart-item:last-child { border-bottom: none; } .cart-item__thumb { width: 60px; height: 60px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; } .cart-item__name { font-size: 0.9rem; font-weight: 600; color: var(--ink); } .cart-item__cat { font-size: 0.75rem; color: var(--slate-400); margin-top: 2px; } .cart-summary { background: var(--white); border: 1px solid var(--slate-200); border-radius: var(--radius-xl); padding: 24px; position: sticky; top: 80px; } .cart-summary__title { font-size: 1rem; font-weight: 700; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--slate-200); } .cart-summary__row { display: flex; justify-content: space-between; font-size: 0.875rem; margin-bottom: 10px; color: var(--slate-600); } .cart-summary__total { display: flex; justify-content: space-between; font-size: 1.125rem; font-weight: 800; color: var(--ink); margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--slate-200); } /* WooCommerce cart table override */ .woocommerce table.cart { border-collapse: collapse; width: 100%; } .woocommerce table.cart td, .woocommerce table.cart th { padding: 12px 16px !important; border-bottom: 1px solid var(--slate-200) !important; vertical-align: middle !important; } .woocommerce table.cart .product-thumbnail img { border-radius: var(--radius-md); width: 60px !important; height: 60px !important; object-fit: cover; } .woocommerce .cart-collaterals .cart_totals { float: none; width: 100%; } .woocommerce .cart_totals table { border-collapse: collapse; width: 100%; } .woocommerce .cart_totals table td, .woocommerce .cart_totals table th { padding: 10px 0 !important; border-bottom: 1px solid var(--slate-100) !important; } .woocommerce .wc-proceed-to-checkout a.checkout-button { background: var(--teal) !important; color: #fff !important; border-radius: var(--radius-md) !important; font-family: inherit !important; font-weight: 600 !important; padding: 14px 24px !important; font-size: 1rem !important; display: block; text-align: center; } .woocommerce .wc-proceed-to-checkout a.checkout-button:hover { background: var(--teal-600) !important; } /* ========================================================= WOOCOMMERCE — NOTICES ========================================================= */ .woocommerce-message, .woocommerce-info, .woocommerce-error { border-radius: var(--radius-md) !important; margin-bottom: 20px !important; font-family: inherit !important; font-size: 0.9rem !important; } .woocommerce-message { border-top-color: var(--green) !important; } .woocommerce-info { border-top-color: var(--teal) !important; } .woocommerce-error { border-top-color: var(--rose) !important; } /* ========================================================= WOOCOMMERCE — MY ACCOUNT ========================================================= */ /* Login/register page: block layout so notices sit ABOVE the form cards */ .woocommerce-account .woocommerce { display: block; } /* Notices must be full-width, never floated */ .woocommerce-account .woocommerce-notices-wrapper, .woocommerce-account .woocommerce > .woocommerce-error, .woocommerce-account .woocommerce > .woocommerce-message, .woocommerce-account .woocommerce > .woocommerce-info { float: none !important; clear: both !important; width: 100% !important; display: block !important; box-sizing: border-box; } /* Dashboard (logged-in): nav + content side by side via flex on a wrapper */ .woocommerce-MyAccount-navigation + .woocommerce-MyAccount-content { /* handled by the outer .woocommerce flex below */ } .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) { display: flex; align-items: flex-start; gap: 28px; } .woocommerce-MyAccount-navigation { background: var(--white); border: 1px solid var(--slate-200); border-radius: var(--radius-xl); padding: 16px; position: sticky; top: 80px; height: fit-content; } .woocommerce-MyAccount-navigation ul { display: flex; flex-direction: column; gap: 2px; } .woocommerce-MyAccount-navigation ul li a { display: block; padding: 9px 14px; border-radius: var(--radius-md); font-size: 0.875rem; font-weight: 500; color: var(--slate-600); transition: background var(--transition), color var(--transition); } .woocommerce-MyAccount-navigation ul li a:hover { background: var(--teal-50); color: var(--teal-700); } .woocommerce-MyAccount-navigation ul li.is-active a { background: var(--teal-50); color: var(--teal-700); font-weight: 600; } .woocommerce-MyAccount-content { background: var(--white); border: 1px solid var(--slate-200); border-radius: var(--radius-xl); padding: 28px; } /* ========================================================= WP ADMIN BAR OFFSET ========================================================= */ .admin-bar .nav { top: 32px; } @media (max-width: 782px) { .admin-bar .nav { top: 46px; } } /* ========================================================= RESPONSIVE BREAKPOINTS ========================================================= */ @media (max-width: 1100px) { .woo-layout { grid-template-columns: 220px 1fr; } .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; } .benefits-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .hero__inner { grid-template-columns: 1fr; } .hero__right { display: none; } .hero__stats { grid-template-columns: repeat(2, 1fr); } .steps-grid { grid-template-columns: 1fr; } .steps-grid::before { display: none; } .woo-layout { grid-template-columns: 1fr; } .woo-sidebar { position: static; } .single-product-layout { grid-template-columns: 1fr; } .purchase-box { position: static; } .cart-layout { grid-template-columns: 1fr; } .woocommerce-account .woocommerce { grid-template-columns: 1fr; } } @media (max-width: 700px) { .newsletter__form { flex-direction: column; } } /* ========================================================= CART — MOBILE RESPONSIVE ========================================================= */ @media (max-width: 640px) { /* Collapse 5-column grid to simpler layout */ .cart-items__header { display: none; /* hide column headers — implied by layout */ } .cart-item { grid-template-columns: 52px 1fr !important; grid-template-rows: auto auto !important; gap: 8px 12px !important; padding: 16px !important; } /* Unit price, qty, row total — stack under the name cell */ .cart-item > div:nth-child(3), .cart-item > div:nth-child(4), .cart-item > div:nth-child(5) { grid-column: 2 !important; text-align: left !important; font-size: .82rem !important; display: inline-block; } /* Coupon row: stack vertically, full-width input */ .cart-coupon-row { flex-direction: column !important; align-items: stretch !important; } .cart-coupon-row > div { width: 100% !important; } .cart-coupon-row input[name="coupon_code"] { width: 100% !important; max-width: 100% !important; flex: 1 !important; } } /* 480px hero actions — overridden by comprehensive block at bottom */ /* ========================================================= WOOCOMMERCE — AJAX ADD TO CART BUTTON (product cards) The .add_to_cart_button and .ajax_add_to_cart classes are required by WC's JavaScript. Style them to match our design. ========================================================= */ a.add_to_cart_button, a.ajax_add_to_cart { display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; padding: 10px 18px; background: var(--teal); color: #fff !important; border-radius: var(--radius-md); font-size: 0.875rem; font-weight: 600; font-family: inherit; border: none; width: 100%; text-align: center; transition: background var(--transition); } a.add_to_cart_button:hover, a.ajax_add_to_cart:hover { background: var(--teal-600); color: #fff !important; } /* "Added" state */ a.add_to_cart_button.added { background: var(--green); } a.add_to_cart_button.loading { opacity: 0.75; pointer-events: none; } /* ========================================================= WOOCOMMERCE — PRODUCT THUMB GRADIENTS ========================================================= */ .product__thumb { aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; font-size: 2.5rem; } .product__thumb::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 24px 24px; pointer-events: none; } /* Product card base (used in both archive and featured) */ .product-card { background: var(--white); border: 1px solid var(--slate-200); border-radius: var(--radius-xl); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--slate-300); } /* ========================================================= WOOCOMMERCE — CHECKOUT PAGE ========================================================= */ .woocommerce-checkout .woocommerce { max-width: 100%; } .woocommerce form .form-row label { font-size: 0.85rem; font-weight: 600; color: var(--ink); margin-bottom: 5px; display: block; } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select { width: 100%; padding: 11px 14px !important; border: 1.5px solid var(--slate-300) !important; border-radius: var(--radius-md) !important; font-family: inherit !important; font-size: 0.9rem !important; color: var(--ink) !important; background: var(--white) !important; transition: border-color var(--transition) !important; } .woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus, .woocommerce form .form-row select:focus { border-color: var(--teal) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(52,137,147,.12) !important; } /* Checkout order review table */ .woocommerce-checkout-review-order-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .woocommerce-checkout-review-order-table th, .woocommerce-checkout-review-order-table td { padding: 10px 0 !important; border-bottom: 1px solid var(--slate-100) !important; } /* Place order button */ #place_order { background: var(--teal) !important; color: #fff !important; border: none !important; border-radius: var(--radius-md) !important; font-size: 1.0625rem !important; font-weight: 700 !important; font-family: inherit !important; padding: 16px 32px !important; width: 100%; cursor: pointer; transition: background var(--transition) !important; } #place_order:hover { background: var(--teal-600) !important; } /* ========================================================= WOOCOMMERCE — PAGINATION ========================================================= */ .woocommerce-pagination ul { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; list-style: none; padding: 0; } .woocommerce-pagination ul li a, .woocommerce-pagination ul li span { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1.5px solid var(--slate-200); border-radius: var(--radius-md); font-size: 0.875rem; font-weight: 600; color: var(--ink); transition: background var(--transition), border-color var(--transition), color var(--transition); } .woocommerce-pagination ul li a:hover { background: var(--teal-50); border-color: var(--teal); color: var(--teal-700); } .woocommerce-pagination ul li span.current { background: var(--teal); border-color: var(--teal); color: #fff; } /* ========================================================= WC ORDERING SELECT RESET ========================================================= */ .woocommerce-ordering select { padding: 8px 36px 8px 12px !important; border: 1.5px solid var(--slate-200) !important; border-radius: var(--radius-md) !important; font-family: inherit !important; font-size: 0.875rem !important; font-weight: 600 !important; color: var(--ink) !important; background: var(--white) !important; appearance: none; cursor: pointer; } /* ========================================================= MOBILE NAV ========================================================= */ @media (max-width: 900px) { .nav__hamburger { display: flex !important; } .nav__links { display: none !important; } .nav__mobile { position: absolute; top: 64px; left: 0; right: 0; background: #0d1822; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 3px solid #348993; box-shadow: 0 8px 32px rgba(0,0,0,.45); z-index: 9999; flex-direction: column; padding: 16px 24px 24px; gap: 4px; display: none; } .nav__mobile.open { display: flex; } .nav__mobile a { color: rgba(255,255,255,.8); font-size: 1rem; font-weight: 600; padding: 12px 12px; border-bottom: 1px solid rgba(255,255,255,.06); border-radius: 6px; } .nav__mobile a:hover { color: #fff; background: rgba(255,255,255,.07); } } /* ========================================================= GLOBAL MOBILE PADDING — brand-consistent spacing ========================================================= */ @media (max-width: 768px) { /* nav layout — handled in nav section */ .hero__inner { grid-template-columns: 1fr; gap: 24px; } .hero__right { display: none; } .newsletter { padding: 36px 0; } } /* 480px footer — handled by comprehensive mobile block at bottom */ /* ========================================================= SINGLE POST LAYOUT — responsive 2-col → 1-col ========================================================= */ .post-layout { display: grid; grid-template-columns: 1fr 280px; gap: 48px; align-items: start; } .post-sidebar { position: sticky; top: 88px; } @media (max-width: 960px) { .post-layout { grid-template-columns: 1fr; } .post-sidebar { position: static; } /* Move sidebar below article on mobile */ .post-layout article { order: 1; } .post-sidebar { order: 2; } } /* ========================================================= WOOCOMMERCE STAR RATING — review form stars (visual) ========================================================= */ .woocommerce p.stars, .stars-wrapper { margin-bottom: 12px; } /* Hide raw link text, show star glyphs */ .woocommerce p.stars a { display: inline-block; width: 1.4rem; height: 1.4rem; line-height: 1; text-indent: -9999px; overflow: hidden; position: relative; font-size: 0; cursor: pointer; } .woocommerce p.stars a::before { content: "★"; font-size: 1.4rem; text-indent: 0; position: absolute; left: 0; top: 0; color: #d1d5db; /* unselected grey */ transition: color .15s; } /* Stars up to hovered star turn gold */ .woocommerce p.stars a:hover::before, .woocommerce p.stars a:hover ~ a::before { color: #d1d5db; } .woocommerce p.stars:hover .star-1::before { color: #f59e0b; } .woocommerce p.stars:hover .star-2 ~ .star-1::before { color: #d1d5db; } .woocommerce p.stars:hover .star-1::before, .woocommerce p.stars:hover .star-2::before { color: #f59e0b; } /* Simpler blanket rule — hover turns all gold up to cursor */ .woocommerce p.stars .star-1:hover::before, .woocommerce p.stars .star-1:hover ~ a::before { color: #d1d5db; } .woocommerce p.stars:hover a::before { color: #f59e0b; } .woocommerce p.stars .star-1:hover ~ a::before, .woocommerce p.stars .star-2:hover ~ a::before, .woocommerce p.stars .star-3:hover ~ a::before, .woocommerce p.stars .star-4:hover ~ a::before { color: #d1d5db; } /* Selected state */ .woocommerce p.stars.selected .star-1::before { color: #f59e0b; } .woocommerce p.stars.selected .star-2::before { color: #f59e0b; } .woocommerce p.stars.selected .star-3::before { color: #f59e0b; } .woocommerce p.stars.selected .star-4::before { color: #f59e0b; } .woocommerce p.stars.selected .star-5::before { color: #f59e0b; } .woocommerce p.stars.selected a.active::before { color: #f59e0b; } .woocommerce p.stars.selected a.active ~ a::before { color: #d1d5db; } /* ========================================================= SP-PURCHASE — scrolls naturally with the page ========================================================= */ .sp-purchase { position: static !important; } /* ========================================================= SPECIALIST STRIP — full content width, above reviews ========================================================= */ .sp-specialist-strip { display: flex; align-items: center; gap: 32px; background: linear-gradient(135deg, #0d1822 0%, #0c2f3a 100%); border-radius: var(--radius-xl); padding: 28px 32px; margin-top: 36px; flex-wrap: wrap; } .sp-specialist-strip__left { display: flex; align-items: center; gap: 16px; flex-shrink: 0; } .sp-specialist-strip__avatar { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #348993, #4dbdcc); display: grid; place-items: center; color: #fff; flex-shrink: 0; } .sp-specialist-strip__name { font-size: 1rem; font-weight: 800; color: #fff; margin-bottom: 5px; } .sp-specialist-strip__badge { display: inline-flex; align-items: center; gap: 5px; font-size: .75rem; font-weight: 700; color: #4dbdcc; } .sp-specialist-strip__badge svg { stroke: #4dbdcc; } .sp-specialist-strip__divider { width: 1px; height: 48px; background: rgba(255,255,255,.12); flex-shrink: 0; } .sp-specialist-strip__stats { display: flex; align-items: center; gap: 36px; flex: 1; flex-wrap: wrap; } .sp-specialist-strip__stat { display: flex; flex-direction: column; gap: 3px; } .sp-specialist-strip__val { font-size: 1.25rem; font-weight: 900; color: #fff; letter-spacing: -.03em; line-height: 1; } .sp-specialist-strip__lbl { font-size: .72rem; color: rgba(255,255,255,.45); font-weight: 500; } @media (max-width: 600px) { .sp-specialist-strip { padding: 22px 20px; gap: 20px; } .sp-specialist-strip__divider { display: none; } .sp-specialist-strip__stats { gap: 20px; } } /* ========================================================= NAV CART BUTTON ========================================================= */ .nav-cart-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.85); text-decoration: none; flex-shrink: 0; transition: background .18s, color .18s; } .nav-cart-btn:hover { background: rgba(255,255,255,.16); color: #fff; } .cart-count { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px; background: #348993; color: #fff; font-size: .65rem; font-weight: 800; border-radius: 100px; display: none; align-items: center; justify-content: center; line-height: 1; } .cart-count.visible { display: inline-flex; } /* ========================================================= CART DRAWER ========================================================= */ .cart-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 9998; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .cart-overlay.open { display: block; } .cart-drawer { position: fixed; top: 0; right: -420px; width: 380px; max-width: 100vw; height: 100vh; height: 100dvh; background: #fff; z-index: 9999; display: flex; flex-direction: column; box-shadow: -8px 0 48px rgba(0,0,0,.18); transition: right 0.32s cubic-bezier(.4,0,.2,1); } .cart-drawer.open { right: 0; } /* Header */ .cart-drawer__header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid #e2e8f0; flex-shrink: 0; } .cart-drawer__header-left { display: flex; align-items: center; gap: 10px; color: #0d1822; } .cart-drawer__header-left h3 { font-size: 1rem; font-weight: 800; color: #0d1822; margin: 0; } .cart-drawer__close { width: 32px; height: 32px; border: none; background: #f1f5f9; border-radius: 8px; display: grid; place-items: center; cursor: pointer; color: #64748b; transition: background .15s, color .15s; flex-shrink: 0; } .cart-drawer__close:hover { background: #e2e8f0; color: #0d1822; } /* Body — scrollable list */ .cart-drawer__body { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; scrollbar-width: thin; scrollbar-color: #e2e8f0 transparent; } /* Empty state */ .cart-drawer__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 48px 20px; flex: 1; } /* Cart item */ .cart-drawer__item { display: flex; align-items: center; gap: 12px; padding: 12px; background: #f8fafc; border: 1px solid #e8edf3; border-radius: 12px; } .cart-drawer__item-img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: #e8f3f4; } .cart-drawer__item-img--placeholder { display: flex; align-items: center; justify-content: center; font-size: 1.5rem; background: #e8f3f4; } .cart-drawer__item-info { flex: 1; min-width: 0; } .cart-drawer__item-name { font-size: .85rem; font-weight: 700; color: #0d1822; margin: 0 0 4px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cart-drawer__item-meta { font-size: .78rem; color: #64748b; margin: 0; } .cart-drawer__item-remove { width: 26px; height: 26px; border-radius: 6px; background: #fee2e2; display: grid; place-items: center; color: #dc2626; text-decoration: none; flex-shrink: 0; transition: background .15s; } .cart-drawer__item-remove:hover { background: #fca5a5; color: #dc2626; } /* Footer — subtotal + buttons */ .cart-drawer__footer-wrap { padding: 16px 20px 20px; border-top: 1px solid #e2e8f0; flex-shrink: 0; background: #fff; } .cart-drawer__subtotal { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; font-size: .9rem; color: #64748b; } .cart-drawer__subtotal-val { font-size: 1.1rem; font-weight: 800; color: #0d1822; } /* ========================================================= SPECIALIST STRIP — inline-safe version ========================================================= */ .sp-specialist-strip { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 24px; background: linear-gradient(135deg,#0d1822 0%,#0c2f3a 100%) !important; border-radius: 16px; padding: 24px 28px; margin-top: 36px; flex-wrap: wrap; } .sp-specialist-strip__left { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 14px; flex-shrink: 0; } .sp-specialist-strip__avatar { width: 52px !important; height: 52px !important; border-radius: 50% !important; background: linear-gradient(135deg,#348993,#4dbdcc) !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #fff !important; flex-shrink: 0; } .sp-specialist-strip__name { font-size: .95rem; font-weight: 800; color: #fff !important; margin-bottom: 4px; } .sp-specialist-strip__badge { display: flex !important; align-items: center !important; gap: 5px; font-size: .72rem; font-weight: 700; color: #4dbdcc !important; } .sp-specialist-strip__divider { width: 1px; height: 44px; background: rgba(255,255,255,.15); flex-shrink: 0; } .sp-specialist-strip__stats { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 28px; flex: 1; flex-wrap: wrap; } .sp-specialist-strip__stat { display: flex !important; flex-direction: column; gap: 2px; } .sp-specialist-strip__val { font-size: 1.15rem !important; font-weight: 900 !important; color: #fff !important; letter-spacing: -.02em; line-height: 1; } .sp-specialist-strip__lbl { font-size: .7rem !important; color: rgba(255,255,255,.45) !important; } @media(max-width:600px){ .sp-specialist-strip { padding: 20px 18px; gap: 16px; } .sp-specialist-strip__divider { display: none; } .sp-specialist-strip__stats { gap: 16px; } } /* ========================================================= CART DRAWER — fixes (v29+) ========================================================= */ /* Fix drawer not overflowing on narrow screens */ .cart-drawer { width: 380px !important; max-width: 100vw !important; right: -100vw !important; } .cart-drawer.open { right: 0 !important; } /* Checkout button — readable on white bg */ .cart-drawer__footer-wrap .btn--dark-ghost { background: transparent !important; color: #348993 !important; border: 1.5px solid #348993 !important; } .cart-drawer__footer-wrap .btn--dark-ghost:hover { background: #e8f3f4 !important; color: #256068 !important; } /* Cart drawer qty controls */ .cart-drawer__qty { display: inline-flex; align-items: center; gap: 0; border: 1.5px solid #e2e8f0; border-radius: 8px; overflow: hidden; margin-top: 8px; height: 30px; } .cq-btn { width: 28px; height: 28px; border: none; background: #f8fafc; color: #0d1822; font-size: .95rem; font-weight: 700; cursor: pointer; display: grid; place-items: center; transition: background .15s, color .15s; font-family: inherit; flex-shrink: 0; line-height: 1; } .cq-minus { border-right: 1px solid #e2e8f0; } .cq-plus { border-left: 1px solid #e2e8f0; } .cq-btn:hover { background: #e8f3f4; color: #348993; } .cq-val { min-width: 28px; text-align: center; font-size: .82rem; font-weight: 700; color: #0d1822; line-height: 1; } /* Cart item price line */ .cart-drawer__item-price { font-size: .82rem; font-weight: 700; color: #0d1822; margin: 2px 0 0; } /* Suppress WC notices globally (drawer handles feedback) */ .woocommerce-notices-wrapper:empty, .woocommerce-message { display: none !important; } /* ========================================================= CART DRAWER — admin bar + width fix ========================================================= */ /* Account for WP admin bar when logged in (desktop: 32px, mobile: 46px) */ .admin-bar .cart-drawer { top: 32px !important; height: calc(100vh - 32px) !important; height: calc(100dvh - 32px) !important; } @media screen and (max-width: 782px) { .admin-bar .cart-drawer { top: 46px !important; height: calc(100vh - 46px) !important; height: calc(100dvh - 46px) !important; } } /* Never wider than the viewport, leave 16px gap so overlay shows */ .cart-drawer { width: min(380px, calc(100vw - 16px)) !important; } /* ========================================================= WOOCOMMERCE BLOCK CART — cart totals styling ========================================================= */ /* Center-align the entire order summary / cart totals block */ .wp-block-woocommerce-cart-order-summary-block, .wc-block-cart__sidebar, .wc-block-components-totals-wrapper { text-align: center !important; } .wc-block-components-totals-wrapper .wc-block-components-totals-item, .wc-block-components-totals-wrapper .wc-block-components-totals-item__label, .wc-block-components-totals-wrapper .wc-block-components-totals-item__value, .wc-block-components-totals-footer-item, .wc-block-components-totals-footer-item__label, .wc-block-components-totals-footer-item .price { text-align: center !important; justify-content: center !important; } /* Keep label/value pairs balanced */ .wc-block-components-totals-item { display: flex !important; justify-content: space-between !important; } /* Coupon Apply button — teal background */ .wc-block-components-totals-coupon__button, .wc-block-components-totals-coupon button[type="submit"], .wc-block-components-button.wc-block-components-totals-coupon__button { background: #348993 !important; color: #fff !important; border: none !important; border-radius: 8px !important; padding: 11px 18px !important; font-weight: 700 !important; font-size: .875rem !important; cursor: pointer !important; transition: background .18s !important; } .wc-block-components-totals-coupon__button:hover, .wc-block-components-button.wc-block-components-totals-coupon__button:hover { background: #2c757e !important; color: #fff !important; } /* ── WC Blocks: Coupon input & ALL floating-label fields ────────────── Problem: The Blocks "floating label" sits centered inside the input and is supposed to animate upward when the user types. If the CSS animation doesn't fire (JS class not added, transform overridden, etc.) the label stays in the middle and overlaps the typed value. Fix: We pin the label permanently to the top-left in small text, and give the input enough top-padding so the typed value sits below it. This is visually identical to the "filled" floating-label state, just always on — no overlap ever possible. ──────────────────────────────────────────────────────────────────── */ /* Wrapper — must be relative so label is positioned inside it */ .wc-block-components-text-input { position: relative !important; } /* Pin label to the top — small, subdued, always visible above the value */ .wc-block-components-text-input label { position: absolute !important; top: 6px !important; left: 14px !important; font-size: 0.68rem !important; font-weight: 600 !important; color: #94a3b8 !important; letter-spacing: .04em !important; text-transform: uppercase !important; line-height: 1 !important; pointer-events: none !important; z-index: 2 !important; transform: none !important; /* cancel any Blocks transform */ transition: none !important; max-width: calc(100% - 28px) !important; white-space: nowrap !important; overflow: hidden !important; } /* Input — push the value text down below the pinned label */ .wc-block-components-text-input input, .wc-block-components-text-input select { padding-top: 22px !important; padding-bottom: 8px !important; padding-left: 14px !important; padding-right: 14px !important; height: auto !important; line-height: 1.4 !important; font-size: .9rem !important; border: 1.5px solid #e2e8f0 !important; border-radius: 8px !important; outline: none !important; width: 100% !important; background: #fff !important; transition: border-color .18s !important; } .wc-block-components-text-input input:focus, .wc-block-components-text-input select:focus { border-color: #348993 !important; box-shadow: 0 0 0 3px rgba(52,137,147,.12) !important; } /* "Proceed to Checkout" button — full-width teal */ .wc-block-cart__submit-button, .wp-block-woocommerce-proceed-to-checkout-block a, .wc-block-cart__submit a, a.wc-block-cart__submit-button { display: block !important; width: 100% !important; background: #348993 !important; color: #fff !important; border: none !important; border-radius: 10px !important; padding: 15px 24px !important; font-size: 1rem !important; font-weight: 700 !important; text-align: center !important; text-decoration: none !important; cursor: pointer !important; transition: background .18s, transform .18s !important; font-family: inherit !important; } .wc-block-cart__submit-button:hover, .wp-block-woocommerce-proceed-to-checkout-block a:hover { background: #2c757e !important; color: #fff !important; transform: translateY(-1px) !important; } /* ========================================================= WOOCOMMERCE CHECKOUT — full redesign ========================================================= */ /* Page wrapper */ .woocommerce-checkout .woocommerce, .woocommerce-page.woocommerce-checkout .woocommerce { max-width: 1100px; margin: 0 auto; padding: 48px 24px 80px; } /* Coupon notice at top */ .woocommerce-info.woocommerce-checkout-coupon { background: #f0f8f9 !important; border: 1.5px solid rgba(52,137,147,.2) !important; border-left: 4px solid #348993 !important; color: #0d1822 !important; border-radius: 10px !important; padding: 14px 18px !important; margin-bottom: 32px !important; font-size: .9rem !important; } .woocommerce-info a { color: #348993 !important; font-weight: 600; } .checkout_coupon { margin-top: 16px !important; padding: 20px !important; border: 1.5px solid #e2e8f0 !important; border-radius: 12px !important; background: #fff !important; } .checkout_coupon .form-row { margin-bottom: 0 !important; } .checkout_coupon input[name="coupon_code"] { height: 44px !important; } .checkout_coupon .button { background: #348993 !important; color: #fff !important; border: none !important; border-radius: 8px !important; padding: 11px 20px !important; font-weight: 700 !important; } /* Two-column layout */ .woocommerce-checkout #customer_details { float: none !important; width: 100% !important; } .woocommerce-checkout .col2-set { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 32px !important; margin-bottom: 0 !important; float: none !important; width: 100% !important; } .woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2 { float: none !important; width: 100% !important; } /* Main checkout grid: form | order summary */ .woocommerce-checkout form.checkout { display: grid !important; grid-template-columns: 1fr 400px !important; gap: 48px !important; align-items: start !important; } .woocommerce-checkout form.checkout #customer_details { order: 1; } .woocommerce-checkout form.checkout #order_review_heading, .woocommerce-checkout form.checkout #order_review { order: 2; } /* Section headings */ .woocommerce-billing-fields h3, .woocommerce-shipping-fields h3, .woocommerce-additional-fields h3, #order_review_heading { font-size: 1.15rem !important; font-weight: 800 !important; color: #0d1822 !important; margin: 0 0 20px !important; padding-bottom: 12px !important; border-bottom: 2px solid #e2e8f0 !important; letter-spacing: -.02em; } #order_review_heading { margin-top: 0 !important; } /* Form rows */ .woocommerce-checkout .form-row { margin: 0 0 18px !important; padding: 0 !important; float: none !important; clear: none !important; width: 100% !important; } .woocommerce-checkout .form-row-first, .woocommerce-checkout .form-row-last { display: inline-block !important; width: calc(50% - 8px) !important; } .woocommerce-checkout .form-row-first { margin-right: 16px !important; } .woocommerce-checkout .form-row label { display: block !important; font-size: .82rem !important; font-weight: 700 !important; color: #0d1822 !important; margin-bottom: 7px !important; line-height: 1.4 !important; } .woocommerce-checkout .form-row label abbr { color: #e11d48 !important; text-decoration: none !important; margin-left: 2px; } /* All inputs, selects, textareas */ .woocommerce-checkout .form-row input.input-text, .woocommerce-checkout .form-row select, .woocommerce-checkout .form-row textarea { width: 100% !important; height: 44px !important; padding: 0 14px !important; border: 1.5px solid #e2e8f0 !important; border-radius: 10px !important; font-size: .9rem !important; color: #0d1822 !important; background: #fff !important; font-family: inherit !important; outline: none !important; box-shadow: none !important; transition: border-color .18s, box-shadow .18s !important; -webkit-appearance: none !important; appearance: none !important; } .woocommerce-checkout .form-row textarea { height: 100px !important; padding: 12px 14px !important; resize: vertical !important; } .woocommerce-checkout .form-row input.input-text:focus, .woocommerce-checkout .form-row select:focus, .woocommerce-checkout .form-row textarea:focus { border-color: #348993 !important; box-shadow: 0 0 0 3px rgba(52,137,147,.12) !important; } .woocommerce-checkout .form-row input::placeholder, .woocommerce-checkout .form-row textarea::placeholder { color: #94a3b8 !important; } /* Select arrow */ .woocommerce-checkout .form-row select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; padding-right: 36px !important; } /* Section spacing */ .woocommerce-billing-fields, .woocommerce-shipping-fields, .woocommerce-additional-fields { margin-bottom: 32px !important; } .woocommerce-shipping-fields { margin-top: 28px !important; } /* Order review box */ #order_review { background: #fff !important; border: 1.5px solid #e2e8f0 !important; border-radius: 16px !important; overflow: hidden !important; position: sticky !important; top: 88px !important; } .woocommerce-checkout-review-order-table { width: 100% !important; border-collapse: collapse !important; font-size: .9rem !important; } .woocommerce-checkout-review-order-table thead th { background: #f8fafc !important; padding: 14px 20px !important; font-size: .72rem !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: .08em !important; color: #94a3b8 !important; text-align: left !important; border-bottom: 1px solid #e2e8f0 !important; } .woocommerce-checkout-review-order-table thead th:last-child { text-align: right !important; } .woocommerce-checkout-review-order-table tbody td { padding: 14px 20px !important; border-bottom: 1px solid #f1f5f9 !important; color: #0d1822 !important; vertical-align: top !important; } .woocommerce-checkout-review-order-table tbody td:last-child { text-align: right !important; } .woocommerce-checkout-review-order-table tfoot tr td, .woocommerce-checkout-review-order-table tfoot tr th { padding: 12px 20px !important; border-top: 1px solid #e2e8f0 !important; font-size: .875rem !important; color: #64748b !important; } .woocommerce-checkout-review-order-table tfoot .order-total td, .woocommerce-checkout-review-order-table tfoot .order-total th { font-size: 1rem !important; font-weight: 800 !important; color: #0d1822 !important; border-top: 2px solid #e2e8f0 !important; padding: 16px 20px !important; } /* Payment methods */ #payment { padding: 20px !important; background: #f8fafc !important; } #payment .wc_payment_methods { list-style: none !important; padding: 0 !important; margin: 0 0 20px !important; } #payment .wc_payment_methods li { padding: 12px 16px !important; background: #fff !important; border: 1.5px solid #e2e8f0 !important; border-radius: 10px !important; margin-bottom: 10px !important; } #payment .wc_payment_methods li label { font-size: .9rem !important; font-weight: 600 !important; color: #0d1822 !important; cursor: pointer !important; display: flex !important; align-items: center !important; gap: 10px !important; margin: 0 !important; } #payment .wc_payment_methods li input[type="radio"] { accent-color: #348993 !important; width: 16px !important; height: 16px !important; flex-shrink: 0 !important; } #payment .payment_box { margin-top: 12px !important; padding: 12px 16px !important; background: #f0f8f9 !important; border-radius: 8px !important; font-size: .85rem !important; color: #64748b !important; line-height: 1.6 !important; } #payment .woocommerce-privacy-policy-text { font-size: .8rem !important; color: #94a3b8 !important; margin: 12px 0 !important; line-height: 1.55 !important; } #payment .woocommerce-privacy-policy-text a { color: #348993 !important; } /* Place Order button */ #place_order, .woocommerce-checkout #place_order { display: block !important; width: 100% !important; background: #348993 !important; color: #fff !important; border: none !important; border-radius: 10px !important; padding: 16px 28px !important; font-size: 1rem !important; font-weight: 800 !important; font-family: inherit !important; cursor: pointer !important; transition: background .18s, transform .18s !important; text-align: center !important; letter-spacing: -.01em !important; margin-top: 4px !important; } #place_order:hover { background: #2c757e !important; transform: translateY(-1px) !important; } /* Validation errors */ .woocommerce-checkout .form-row.woocommerce-invalid input, .woocommerce-checkout .form-row.woocommerce-invalid select { border-color: #e11d48 !important; } .woocommerce-checkout .form-row.woocommerce-invalid label { color: #e11d48 !important; } .woocommerce-checkout .woocommerce-error { background: #fef2f2 !important; border: 1.5px solid #fca5a5 !important; border-left: 4px solid #e11d48 !important; border-radius: 10px !important; padding: 14px 18px !important; margin-bottom: 24px !important; list-style: none !important; font-size: .875rem !important; color: #9f1239 !important; } /* Responsive */ @media (max-width: 900px) { .woocommerce-checkout form.checkout { grid-template-columns: 1fr !important; } #order_review { position: static !important; } .woocommerce-checkout .col2-set { grid-template-columns: 1fr !important; } .woocommerce-checkout .form-row-first, .woocommerce-checkout .form-row-last { display: block !important; width: 100% !important; margin-right: 0 !important; } } @media (max-width: 480px) { .woocommerce-checkout .woocommerce { padding: 28px 16px 60px !important; } } /* ========================================================= CHECKOUT DESKTOP LAYOUT FIX ========================================================= */ /* Outer form: 2-column grid with explicit placement */ .woocommerce-checkout form.checkout { display: grid !important; grid-template-columns: 1fr 380px !important; grid-template-areas: "details heading" "details review" !important; gap: 0 48px !important; align-items: start !important; } .woocommerce-checkout form.checkout #customer_details { grid-area: details !important; } .woocommerce-checkout form.checkout #order_review_heading { grid-area: heading !important; margin-top: 0 !important; padding: 20px 20px 16px !important; } .woocommerce-checkout form.checkout #order_review { grid-area: review !important; } /* Inner col2-set: SINGLE column — billing then additional stacked */ .woocommerce-checkout .col2-set { display: flex !important; flex-direction: column !important; gap: 0 !important; width: 100% !important; float: none !important; } .woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2 { width: 100% !important; float: none !important; padding: 0 !important; margin-bottom: 28px !important; } /* Order review box — no top border-radius since heading sits above */ .woocommerce-checkout #order_review_heading { background: #fff !important; border: 1.5px solid #e2e8f0 !important; border-bottom: none !important; border-radius: 16px 16px 0 0 !important; font-size: 1rem !important; font-weight: 800 !important; color: #0d1822 !important; margin-bottom: 0 !important; padding-bottom: 16px !important; border-bottom: 1px solid #e2e8f0 !important; padding: 20px 20px 16px !important; } .woocommerce-checkout #order_review { border-radius: 0 0 16px 16px !important; border-top: none !important; } /* Mobile: single column */ @media (max-width: 900px) { .woocommerce-checkout form.checkout { grid-template-columns: 1fr !important; grid-template-areas: "details" "heading" "review" !important; gap: 0 !important; } .woocommerce-checkout form.checkout #order_review_heading { margin-top: 28px !important; border-radius: 16px 16px 0 0 !important; } } /* ========================================================= CHECKOUT — remove gap under "Your order" ========================================================= */ /* Simpler 2-col grid: customer_details | order_review only */ .woocommerce-checkout form.checkout { grid-template-areas: none !important; grid-template-rows: auto !important; } /* Hide the standalone heading — recreate it via ::before on the review box */ .woocommerce-checkout form.checkout #order_review_heading { display: none !important; } /* order_review goes to col 2, row 1 — same row as customer_details */ .woocommerce-checkout form.checkout #order_review { grid-column: 2 !important; grid-row: 1 !important; border-radius: 16px !important; border: 1.5px solid #e2e8f0 !important; border-top: 1.5px solid #e2e8f0 !important; overflow: hidden !important; } /* customer_details col 1, row 1 */ .woocommerce-checkout form.checkout #customer_details { grid-column: 1 !important; grid-row: 1 !important; } /* "Your order" title via pseudo-element — no extra DOM node needed */ .woocommerce-checkout #order_review::before { content: "Your order"; display: block !important; font-size: 1rem !important; font-weight: 800 !important; color: #0d1822 !important; padding: 20px 20px 16px !important; border-bottom: 1px solid #e2e8f0 !important; background: #fff !important; letter-spacing: -.01em; } /* Mobile — keep single column, review after details */ @media (max-width: 900px) { .woocommerce-checkout form.checkout #order_review { grid-column: 1 !important; grid-row: 2 !important; } .woocommerce-checkout form.checkout #customer_details { grid-row: 1 !important; } } /*Jazib Custom*/ /* ============================================================ exitlogic.io — Shop Page Changes Add this to: style.css (bottom of file) ============================================================ */ /* ── CHANGE #1: Sorting dropdown arrow ─────────────────────── */ .woocommerce-ordering { position: relative; } .woocommerce-ordering select { appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; padding-right: 38px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23348993' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 18px !important; cursor: pointer !important; border: 1.5px solid #348993 !important; border-radius: 8px !important; font-weight: 500 !important; min-width: 200px; } .woocommerce-ordering select:focus { outline: none !important; border-color: #4dbdcc !important; box-shadow: 0 0 0 3px rgba(77,189,204,0.15) !important; } /* ── CHANGE #2: Price Range Slider ──────────────────────────── */ .price-slider-wrap { padding: 4px 2px 0; } /* Track container */ .price-slider-track { position: relative; height: 5px; background: #e5e7eb; border-radius: 3px; margin: 18px 0 20px; } /* Green fill between the two handles */ .price-slider-fill { position: absolute; top: 0; height: 100%; background: var(--teal, #348993); border-radius: 3px; pointer-events: none; z-index: 1; } /* The two overlapping range inputs */ .price-range-input { position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 100%; height: 5px; background: transparent; -webkit-appearance: none; appearance: none; pointer-events: none; margin: 0; padding: 0; z-index: 2; } /* Thumb — WebKit */ .price-range-input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; background: var(--teal, #348993); border: 2.5px solid #fff; border-radius: 50%; box-shadow: 0 1px 5px rgba(0,0,0,0.22); cursor: pointer; pointer-events: all; position: relative; z-index: 3; transition: transform .15s, box-shadow .15s; } .price-range-input::-webkit-slider-thumb:hover, .price-range-input:focus::-webkit-slider-thumb { transform: scale(1.15); box-shadow: 0 0 0 4px rgba(52,137,147,0.18), 0 1px 5px rgba(0,0,0,0.22); } /* Thumb — Firefox */ .price-range-input::-moz-range-thumb { width: 18px; height: 18px; background: var(--teal, #348993); border: 2.5px solid #fff; border-radius: 50%; box-shadow: 0 1px 5px rgba(0,0,0,0.22); cursor: pointer; pointer-events: all; } /* Track — WebKit (transparent so our .price-slider-fill shows) */ .price-range-input::-webkit-slider-runnable-track { background: transparent; } .price-range-input::-moz-range-track { background: transparent; } /* Price labels row */ .price-slider-labels { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #374151; } .price-slider-text { font-weight: 500; } .price-slider-box { display: inline-block; padding: 4px 9px; border: 1.5px solid #d1d5db; border-radius: 6px; font-size: 12px; font-weight: 600; color: #0d1822; background: #fff; min-width: 56px; text-align: center; } .price-slider-sep { color: #9ca3af; font-weight: 400; } /* Clear link */ .price-clear-link { display: inline-block; margin-top: 10px; font-size: 11px; color: var(--rose, #e11d48); text-decoration: none; font-weight: 600; } .price-clear-link:hover { text-decoration: underline; } /* ── CHANGE #3: Add to cart button states ───────────────────── */ /* Theme uses a.btn.add_to_cart_button — NOT WooCommerce's default .button class */ /* Loading state (during AJAX) — charcoal */ a.btn.add_to_cart_button.loading { background: #374151 !important; color: #fff !important; pointer-events: none !important; } a.btn.add_to_cart_button.loading::after { border-color: #fff transparent !important; } /* Added state (after AJAX success) — charcoal/matte */ a.btn.add_to_cart_button.added { background: #374151 !important; color: #fff !important; border: none !important; opacity: 1 !important; pointer-events: auto !important; } a.btn.add_to_cart_button.added:hover { background: #1f2937 !important; color: #fff !important; } /* Hide the WooCommerce-injected "View cart" link that appears after add-to-cart */ a.added_to_cart.wc-forward, .product__footer a.added_to_cart, p > a.added_to_cart { display: none !important; } /* ── CHANGE #3: Badge on product card image ─────────────────── */ .product__badge { position: absolute; top: 10px; left: 10px; padding: 5px 11px; border-radius: 20px; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; z-index: 2; box-shadow: 0 2px 8px rgba(0,0,0,0.25); white-space: nowrap; } .badge--hot { background: linear-gradient(135deg, #ef4444, #dc2626); } .badge--deal { background: linear-gradient(135deg, #f59e0b, #d97706); } .badge--super { background: linear-gradient(135deg, #8b5cf6, #7c3aed); } .badge--sold { background: linear-gradient(135deg, #3b82f6, #2563eb); } .badge--flash { background: linear-gradient(135deg, #f97316, #ea580c); } .badge--rated { background: linear-gradient(135deg, #22c55e, #16a34a); } .badge--delivery { background: linear-gradient(135deg, #0d9488, #0f766e); } /* ============================================================= MOBILE-FIRST OVERRIDES — comprehensive spacing + typography All rules here intentionally override earlier declarations to ensure mobile feels tight, readable, and polished. ============================================================= */ /* ── 768px and below ─────────────────────────────────────── */ @media (max-width: 768px) { /* Container — tighter side padding */ .container { padding-inline: 16px; } /* Sections — reduce vertical breathing room */ .section { padding: 36px 0; } .section--lg { padding: 48px 0; } .section--sm { padding: 22px 0; } /* Page hero — tighter, bigger headline */ .page-hero { padding: 28px 0 24px; } .page-hero__title { font-size: 1.65rem !important; font-weight: 800; line-height: 1.2; margin-bottom: 10px; } .page-hero__sub { font-size: 1rem !important; color: rgba(255,255,255,.85) !important; line-height: 1.55; } /* Main hero */ .hero { padding: 40px 0 32px; min-height: auto; } /* Global heading scale for mobile — bold, clear hierarchy */ h1 { font-size: 1.9rem !important; font-weight: 900 !important; line-height: 1.15; } h2 { font-size: 1.55rem !important; font-weight: 800 !important; line-height: 1.2; } h3 { font-size: 1.2rem !important; font-weight: 700 !important; line-height: 1.28; } h4 { font-size: 1.05rem !important; font-weight: 700 !important; } h5 { font-size: 0.95rem !important; font-weight: 600 !important; } /* Section titles specifically — extra prominence */ .section__title, .hp-section__title { font-size: 1.6rem !important; font-weight: 900 !important; line-height: 1.18 !important; letter-spacing: -.03em !important; } /* Eyebrow labels — keep small but visible */ .eyebrow, .section__eyebrow, .section__label, .hp-eyebrow { font-size: 0.7rem !important; letter-spacing: .1em !important; } /* Body copy — ensure readability */ p { font-size: 0.9375rem; line-height: 1.65; color: var(--slate-700); } /* Legal layout — stack sidebar above content, prevent overflow */ .legal-layout { grid-template-columns: 1fr !important; gap: 24px !important; } .legal-toc { position: static !important; } .legal-content h2 { font-size: 1.15rem !important; } .legal-body { padding: 36px 0 !important; } /* Section label / eyebrow above headings */ .section__label { font-size: 0.7rem; letter-spacing: .08em; } /* Product grid — 2 columns, tighter gap */ .products-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } .product__body { padding: 12px; gap: 6px; } .product__title { font-size: 0.875rem; line-height: 1.3; } .product__desc { font-size: 0.775rem; } .product__price { font-size: 0.975rem; } /* Category cards — 2-col grid */ .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .cat-card { padding: 14px; gap: 10px; } .cat-card__icon { width: 36px; height: 36px; font-size: 1.1rem; } .cat-card__name { font-size: 0.825rem; } .cat-card__count { font-size: 0.7rem; } /* Shop toolbar */ .woo-toolbar { gap: 8px; } .woo-toolbar__count { font-size: 0.825rem; } /* Price slider */ .price-slider-labels { font-size: 12px; } /* Shop sidebar — horizontal scroll chips on mobile */ .woo-sidebar__section { margin-bottom: 16px; } .woo-sidebar__title { font-size: 0.65rem; margin-bottom: 10px; } .cat-filter-list a { font-size: 0.85rem; padding: 7px 10px; } /* Footer — tighter, more readable */ .footer { padding: 36px 0 0; } .footer__grid { grid-template-columns: 1fr; gap: 28px; padding-bottom: 36px; } .footer__col--brand { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding-right: 0; } .footer__tagline { font-size: 0.9rem; max-width: 100%; margin-bottom: 18px; } .footer__col-title { font-size: 0.68rem; margin-bottom: 14px; } .footer__col nav a { font-size: 0.9rem; padding: 6px 0; } .footer__bottom { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 0; } .footer__copyright { font-size: 0.8rem; } .footer__legal-links { gap: 14px; } .footer__legal-links a { font-size: 0.8rem; } /* Benefits grid — single column */ .benefits-grid { grid-template-columns: 1fr; gap: 14px; } /* Stats bar in hero */ .hero__stats { grid-template-columns: repeat(2, 1fr); gap: 12px; } /* Buttons — slightly larger tap targets */ .btn { padding: 11px 20px; font-size: 0.9rem; min-height: 44px; } .btn--sm { padding: 9px 16px; font-size: 0.85rem; min-height: 40px; } /* Single product */ .single-product-layout { gap: 24px; } .purchase-box { padding: 20px; } /* Search bar */ .search-bar { padding: 6px 6px 6px 14px; } .search-bar input { font-size: 0.875rem; } /* WooCommerce ordering */ .woocommerce-ordering select { min-width: 160px; font-size: 0.875rem; } /* Pagination */ .woocommerce-pagination .page-numbers { font-size: 0.85rem; } } /* ── 480px and below ─────────────────────────────────────── */ @media (max-width: 480px) { .container { padding-inline: 14px; } /* Even tighter sections on very small screens */ .section { padding: 24px 0; } .section--sm { padding: 16px 0; } .page-hero { padding: 22px 0 18px; } /* Heading sizes on very small screens */ h1 { font-size: 1.65rem !important; } h2 { font-size: 1.35rem !important; } h3 { font-size: 1.1rem !important; } .section__title { font-size: 1.4rem !important; } /* Tighten legal/about/hiw sections on small phones */ .legal-hero { padding: 40px 0 32px !important; } .legal-body { padding: 28px 0 !important; } .about-hero { padding: 40px 0 32px !important; } .tstep { padding: 24px 20px !important; } /* Full-width CTA buttons */ .hero__actions { flex-direction: column; gap: 10px; } .hero__actions .btn { width: 100%; justify-content: center; } /* Product grid — 1 column on very small phones */ .products-grid { grid-template-columns: 1fr !important; } /* Footer */ .footer__grid { gap: 22px; } .footer__bottom { gap: 8px; } /* Woo toolbar — stack on tiny screens */ .woo-toolbar { flex-wrap: wrap; gap: 10px; } .woo-toolbar__right { flex-wrap: wrap; gap: 8px; } } /* ── WooCommerce Thank-You / Order Details Table ───────────── */ .woocommerce-order-details, .woocommerce-customer-details { margin-top: 40px; } .woocommerce-order-details h2, .woocommerce-customer-details h2 { font-size: 1.25rem; font-weight: 800; color: var(--ink); margin-bottom: 16px; padding-bottom: 10px; border-bottom: 2px solid var(--slate-100); } .woocommerce-table--order-details { width: 100%; border-collapse: collapse; font-size: 0.9rem; background: #fff; border: 1.5px solid var(--slate-100); border-radius: 12px; overflow: hidden; } .woocommerce-table--order-details thead th { background: var(--slate-50); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate-500); padding: 12px 18px; text-align: left; border-bottom: 1.5px solid var(--slate-100); } .woocommerce-table--order-details thead th:last-child { text-align: right; } .woocommerce-table--order-details tbody td { padding: 14px 18px; border-bottom: 1px solid var(--slate-100); vertical-align: middle; color: var(--slate-600); line-height: 1.5; } .woocommerce-table--order-details tbody td:last-child { text-align: right; } .woocommerce-table--order-details tbody tr:last-child td { border-bottom: none; } .woocommerce-table--order-details tfoot tr td, .woocommerce-table--order-details tfoot tr th { padding: 10px 18px; border-top: 1.5px solid var(--slate-100); font-size: 0.875rem; color: var(--slate-600); } .woocommerce-table--order-details tfoot tr:last-child td, .woocommerce-table--order-details tfoot tr:last-child th { font-size: 1rem; font-weight: 800; color: var(--ink); } .woocommerce-table--order-details tfoot tr th { text-align: left; } .woocommerce-table--order-details tfoot tr td { text-align: right; } /* Hide Actions row (Pay / Cancel) from order details table — not needed on thank-you page */ .woocommerce-order-actions, .woocommerce-table--order-details tr:has(td a.button.pay), .woocommerce-table--order-details tr:has(td a.button.cancel), .woocommerce-table--order-details tr:has(td.woocommerce-order-item__actions), .woocommerce-table--order-details td a.button.pay, .woocommerce-table--order-details td a.button.cancel { display: none !important; } /* Billing address card */ .woocommerce-customer-details address { font-style: normal; background: var(--slate-50); border: 1.5px solid var(--slate-100); border-radius: 12px; padding: 20px 24px; line-height: 1.9; color: var(--slate-600); font-size: 0.9rem; } .woocommerce-customer-details address p { margin: 0; color: var(--slate-600); font-size: 0.9rem; } /* Name on first line — make it stand out */ .woocommerce-customer-details address strong, .woocommerce-column__billing-address address .woocommerce-Name { display: block; font-weight: 800; font-size: 1rem; color: var(--ink); margin-bottom: 4px; } /* Order received page layout */ .woocommerce-order { max-width: 720px; margin: 0 auto; padding: 40px 0 60px; } .woocommerce-thankyou-order-received { font-size: 1.05rem; color: var(--slate-600); margin-bottom: 32px; line-height: 1.6; } ul.woocommerce-order-overview { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; padding: 0; margin: 0 0 32px; background: var(--slate-50); border: 1.5px solid var(--slate-100); border-radius: 12px; padding: 16px 20px; } ul.woocommerce-order-overview li { font-size: 0.85rem; color: var(--slate-500); padding-right: 20px; border-right: 1px solid var(--slate-200); } ul.woocommerce-order-overview li:last-child { border-right: none; padding-right: 0; } ul.woocommerce-order-overview li strong { display: block; font-size: 0.95rem; color: var(--ink); margin-top: 2px; } @media (max-width: 600px) { .woocommerce-table--order-details { font-size: 0.825rem; } .woocommerce-table--order-details tbody td, .woocommerce-table--order-details thead th { padding: 10px 12px; } ul.woocommerce-order-overview { flex-direction: column; gap: 8px; } ul.woocommerce-order-overview li { border-right: none; padding-right: 0; border-bottom: 1px solid var(--slate-100); padding-bottom: 8px; } ul.woocommerce-order-overview li:last-child { border-bottom: none; padding-bottom: 0; } } /* ========================================================= BACK TO TOP BUTTON — sitewide ========================================================= */ .back-to-top { position: fixed; bottom: 28px; right: 28px; width: 44px; height: 44px; border-radius: 50%; background: #348993; color: #fff; border: none; cursor: pointer; display: grid; place-items: center; box-shadow: 0 4px 16px rgba(52,137,147,.4); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .25s, visibility .25s, transform .25s, background .18s; z-index: 9990; } .back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:hover { background: #3fa3b0; } @media(max-width:480px){ .back-to-top { bottom: 18px; right: 16px; width: 40px; height: 40px; } } /* ========================================================= CATEGORIES PAGE — Alphabet A–Z navigation bar ========================================================= */ .cats-alpha-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 auto 40px; max-width: 680px; } .cats-alpha-btn { width: 34px; height: 34px; border-radius: 8px; font-size: .8rem; font-weight: 800; display: grid; place-items: center; text-decoration: none; transition: background .18s, border-color .18s, color .18s, transform .12s; line-height: 1; border: 1.5px solid #e2e8f0; color: #94a3b8; background: #fff; cursor: default; user-select: none; } .cats-alpha-btn.active { border-color: #348993; color: #348993; background: rgba(52,137,147,.06); cursor: pointer; } .cats-alpha-btn.active:hover { background: #348993; color: #fff; border-color: #348993; transform: translateY(-2px); } .cats-alpha-btn.current { background: #348993; color: #fff; border-color: #348993; } @media(max-width:480px){ .cats-alpha-nav { gap: 5px; } .cats-alpha-btn { width: 30px; height: 30px; font-size: .75rem; border-radius: 6px; } } /* ========================================================= BLOG POST — el- Custom Components (shared across posts) ========================================================= */ .el-stat-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:14px; margin:1.8em 0; } .el-stat-card { background:linear-gradient(135deg,#091c28,#0c2f3a); border-radius:12px; padding:20px 16px; text-align:center; } .el-stat-num { display:block; font-size:1.9rem; font-weight:900; color:#4dbdcc; line-height:1; letter-spacing:-.03em; } .el-stat-label{ display:block; font-size:.72rem; color:rgba(255,255,255,.5); margin-top:6px; line-height:1.4; } .el-takeaways { background:#f0f8f9; border:1.5px solid rgba(52,137,147,.2); border-radius:14px; overflow:hidden; margin:1.8em 0; } .el-takeaways-header { background:linear-gradient(135deg,#348993,#4dbdcc); padding:12px 20px; font-size:.75rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#fff; } .el-takeaways-list { padding:16px 20px; margin:0; display:flex; flex-direction:column; gap:10px; list-style:none; } .el-takeaways-list li{ font-size:.95rem; color:#256068; font-weight:500; display:flex; align-items:flex-start; gap:8px; padding-left:0; } .el-takeaways-list li::before{ display:none; } .el-kt-dot { width:8px; height:8px; border-radius:50%; background:#348993; flex-shrink:0; margin-top:.45em; } .el-callout { background:#f0f8f9; border:1.5px solid rgba(52,137,147,.2); border-radius:14px; padding:20px 22px; margin:1.8em 0; display:flex; gap:14px; align-items:flex-start; } .el-callout-icon { font-size:1.4rem; flex-shrink:0; line-height:1.3; } @media(max-width:600px){ .el-stat-row { grid-template-columns:1fr 1fr; } .el-stat-num { font-size:1.5rem; } } /* ========================================================= MY ACCOUNT PAGE — Login / Register / Dashboard ========================================================= */ /* Break out of the 800px tight container — give My Account the full width */ .woocommerce-account .container--tight { max-width: var(--container); /* 1200px */ } /* Page wrapper */ .woocommerce-account .woocommerce { max-width: 960px; margin: 0 auto; padding: 56px 24px 80px; } /* ── Custom login/register form cards (form-login.php template) ── */ .myaccount-forms { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 900px; margin: 0 auto 48px; } .myaccount-card { background: #fff; border: 1.5px solid #e8edf3; border-radius: 18px; padding: 36px 32px; box-shadow: 0 2px 20px rgba(0,0,0,.05); } .myaccount-card h2 { font-size: 1.15rem; font-weight: 900; color: #0d1822; margin: 0 0 24px; letter-spacing: -.025em; display: flex; align-items: center; gap: 10px; } .myaccount-card h2 .h2-icon { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg,#348993,#4dbdcc); display: grid; place-items: center; flex-shrink: 0; } .myaccount-card .woocommerce-form-row, .myaccount-card p.form-row { margin-bottom: 16px; } .myaccount-card label { display: block; font-size: .82rem; font-weight: 700; color: #334155; margin-bottom: 6px; } .myaccount-card input.input-text, .myaccount-card input[type="email"], .myaccount-card input[type="text"], .myaccount-card input[type="password"] { width: 100%; padding: 10px 14px; border: 1.5px solid #e2e8f0; border-radius: 10px; font-size: .9rem; color: #0d1822; background: #f8fafc; font-family: inherit; transition: border-color .18s, box-shadow .18s, background .18s; outline: none; box-sizing: border-box; } .myaccount-card input.input-text:focus, .myaccount-card input[type="email"]:focus, .myaccount-card input[type="text"]:focus, .myaccount-card input[type="password"]:focus { border-color: #348993; background: #fff; box-shadow: 0 0 0 3px rgba(52,137,147,.12); } .myaccount-card .woocommerce-form__label-for-checkbox { display: flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 500; color: #64748b; cursor: pointer; margin: 4px 0 16px; } .myaccount-card input[type="checkbox"] { accent-color: #348993; cursor: pointer; } .myaccount-card button[type="submit"], .myaccount-card .woocommerce-Button { display: block; width: 100%; padding: 12px 24px; background: #348993; color: #fff !important; font-size: .95rem; font-weight: 800; border: none; border-radius: 10px; cursor: pointer; font-family: inherit; transition: background .18s, transform .15s; letter-spacing: -.01em; margin-top: 8px; text-align: center; } .myaccount-card button[type="submit"]:hover, .myaccount-card .woocommerce-Button:hover { background: #3fa3b0; transform: translateY(-1px); } .myaccount-card .woocommerce-LostPassword, .myaccount-card .lost_password { margin-top: 14px; text-align: center; } .myaccount-card .woocommerce-LostPassword a, .myaccount-card .lost_password a { font-size: .82rem; color: #348993; text-decoration: none; font-weight: 600; } .myaccount-card .woocommerce-LostPassword a:hover { text-decoration: underline; } .myaccount-card .woocommerce-privacy-policy-text { font-size: .78rem; color: #94a3b8; line-height: 1.65; margin: 12px 0 16px; } .myaccount-card .woocommerce-privacy-policy-text a { color: #348993; } @media (max-width: 700px) { .myaccount-forms { grid-template-columns: 1fr; gap: 20px; } .myaccount-card { padding: 24px 20px; } } @media (max-width: 480px) { .myaccount-card { padding: 20px 16px; border-radius: 14px; } } /* ── Two-column Login + Register layout ── */ .woocommerce-account #customer_login.col2-set, .woocommerce-account .col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; } .woocommerce-account .col2-set .u-column1, .woocommerce-account .col2-set .u-column2, .woocommerce-account .col2-set .col-1, .woocommerce-account .col2-set .col-2 { background: #fff; border: 1.5px solid #e8edf3; border-radius: 16px; padding: 36px 32px; box-shadow: 0 2px 20px rgba(0,0,0,.05); } /* Section headings */ .woocommerce-account h2 { font-size: 1.35rem; font-weight: 900; color: #0d1822; margin: 0 0 24px; letter-spacing: -.025em; } /* Form rows */ .woocommerce-account .woocommerce-form-row, .woocommerce-account p.form-row { margin-bottom: 18px; } /* Labels */ .woocommerce-account .woocommerce-form__label, .woocommerce-account label { display: block; font-size: .85rem; font-weight: 700; color: #334155; margin-bottom: 6px; } /* Inputs */ .woocommerce-account input.input-text, .woocommerce-account input[type="text"], .woocommerce-account input[type="email"], .woocommerce-account input[type="password"], .woocommerce-account input[type="tel"], .woocommerce-account textarea, .woocommerce-account select { width: 100%; padding: 10px 14px; border: 1.5px solid #e2e8f0; border-radius: 10px; font-size: .925rem; color: #0d1822; background: #f8fafc; font-family: inherit; transition: border-color .18s, box-shadow .18s, background .18s; outline: none; appearance: none; -webkit-appearance: none; box-sizing: border-box; } .woocommerce-account input.input-text:focus, .woocommerce-account input[type="text"]:focus, .woocommerce-account input[type="email"]:focus, .woocommerce-account input[type="password"]:focus { border-color: #348993; background: #fff; box-shadow: 0 0 0 3px rgba(52,137,147,.12); } /* Remember me checkbox row */ .woocommerce-account .woocommerce-form__label-for-checkbox { display: flex; align-items: center; gap: 8px; font-size: .875rem; font-weight: 500; color: #64748b; cursor: pointer; } .woocommerce-account .woocommerce-form-login__rememberme { margin: 8px 0 20px; } .woocommerce-account input[type="checkbox"] { width: 16px; height: 16px; accent-color: #348993; cursor: pointer; } /* Buttons */ .woocommerce-account .woocommerce-button, .woocommerce-account .woocommerce-Button, .woocommerce-account button[type="submit"], .woocommerce-account input[type="submit"], .woocommerce-account .button { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 12px 24px; background: #348993; color: #fff !important; font-size: .95rem; font-weight: 800; border: none; border-radius: 10px; cursor: pointer; font-family: inherit; text-decoration: none; transition: background .18s, transform .15s; letter-spacing: -.01em; margin-top: 4px; } .woocommerce-account .woocommerce-button:hover, .woocommerce-account .woocommerce-Button:hover, .woocommerce-account button[type="submit"]:hover, .woocommerce-account input[type="submit"]:hover, .woocommerce-account .button:hover { background: #3fa3b0; transform: translateY(-1px); color: #fff !important; text-decoration: none; } /* Lost password link */ .woocommerce-account .woocommerce-LostPassword a, .woocommerce-account a.woocommerce-form-login__lost-password, .woocommerce-account .lost_password a { font-size: .85rem; color: #348993; text-decoration: none; font-weight: 600; } .woocommerce-account .woocommerce-LostPassword a:hover, .woocommerce-account .lost_password a:hover { text-decoration: underline; } /* Privacy policy notice */ .woocommerce-account .woocommerce-privacy-policy-text { font-size: .8rem; color: #94a3b8; line-height: 1.6; margin: 14px 0 18px; } .woocommerce-account .woocommerce-privacy-policy-text a { color: #348993; } /* Notices / errors — full-width, above the form cards, never floated */ .woocommerce-account .woocommerce-error, .woocommerce-account .woocommerce-message, .woocommerce-account .woocommerce-info { float: none !important; clear: both !important; width: 100% !important; display: block !important; box-sizing: border-box; border-left: 4px solid #348993; background: #f0f8f9; color: #256068; padding: 14px 18px 14px 20px; border-radius: 0 10px 10px 0; font-size: .875rem; margin: 0 0 24px !important; list-style: none; } .woocommerce-account .woocommerce-error, .woocommerce-account .woocommerce-error li { border-left-color: #ef4444; background: #fef2f2; color: #b91c1c; list-style: none; } .woocommerce-account .woocommerce-error::before, .woocommerce-account .woocommerce-message::before { display: none !important; } /* ── Dashboard (logged-in) ───────────────────────── */ .woocommerce-account .woocommerce-MyAccount-navigation { background: #fff; border: 1.5px solid #e8edf3; border-radius: 14px; overflow: hidden; padding: 8px; } .woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; } .woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: 10px 16px; font-size: .875rem; font-weight: 600; color: #475569; text-decoration: none; border-radius: 8px; transition: background .15s, color .15s; } .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a, .woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: rgba(52,137,147,.1); color: #348993; } .woocommerce-account .woocommerce-MyAccount-content { background: #fff; border: 1.5px solid #e8edf3; border-radius: 14px; padding: 32px; } .woocommerce-account .woocommerce-MyAccount-content h2, .woocommerce-account .woocommerce-MyAccount-content h3 { font-weight: 800; color: #0d1822; margin-top: 0; } /* Orders table */ .woocommerce-account table.woocommerce-orders-table, .woocommerce-account table.shop_table { width: 100%; border-collapse: collapse; font-size: .875rem; } .woocommerce-account table.woocommerce-orders-table th, .woocommerce-account table.shop_table th { background: #f8fafc; padding: 10px 14px; text-align: left; font-weight: 700; color: #475569; border-bottom: 1.5px solid #e8edf3; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; } .woocommerce-account table.woocommerce-orders-table td, .woocommerce-account table.shop_table td { padding: 12px 14px; border-bottom: 1px solid #f1f5f9; color: #334155; vertical-align: middle; } .woocommerce-account table.woocommerce-orders-table tr:last-child td, .woocommerce-account table.shop_table tr:last-child td { border-bottom: none; } /* Order status badges */ .woocommerce-account mark.order-status { background: #e8f5e9; color: #2e7d32; padding: 3px 10px; border-radius: 100px; font-size: .75rem; font-weight: 700; text-transform: capitalize; } /* View order button in table */ .woocommerce-account .woocommerce-button.button, .woocommerce-account td .button { width: auto; padding: 6px 14px; font-size: .8rem; border-radius: 8px; margin-top: 0; } /* ── Mobile — login/register ── */ @media(max-width:768px){ .woocommerce-account .woocommerce { padding: 36px 16px 56px; } .woocommerce-account #customer_login.col2-set, .woocommerce-account .col2-set { grid-template-columns: 1fr; gap: 20px; } .woocommerce-account .col2-set .u-column1, .woocommerce-account .col2-set .u-column2, .woocommerce-account .col2-set .col-1, .woocommerce-account .col2-set .col-2 { padding: 24px 20px; } } @media(max-width:480px){ .woocommerce-account h2 { font-size: 1.15rem; } .woocommerce-account .woocommerce { padding: 24px 14px 48px; } } /* ── Mobile — logged-in DASHBOARD layout ── */ @media(max-width:768px){ /* Stack nav above content — no more side-by-side squish */ .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) { flex-direction: column !important; gap: 16px !important; padding: 24px 16px 56px !important; } /* Nav: full-width horizontal scrollable tab strip */ .woocommerce-MyAccount-navigation { width: 100% !important; position: static !important; padding: 8px 12px !important; border-radius: 12px !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .woocommerce-MyAccount-navigation::-webkit-scrollbar { display: none; } .woocommerce-MyAccount-navigation ul { flex-direction: row !important; gap: 4px !important; flex-wrap: nowrap !important; min-width: max-content; } .woocommerce-MyAccount-navigation ul li { flex-shrink: 0; } .woocommerce-MyAccount-navigation ul li a { white-space: nowrap; padding: 8px 14px !important; font-size: .8rem !important; font-weight: 600; border-radius: 8px !important; } .woocommerce-MyAccount-navigation ul li.is-active a, .woocommerce-MyAccount-navigation ul li a:hover { background: rgba(52,137,147,.12) !important; color: #348993 !important; } /* Content: full-width card */ .woocommerce-MyAccount-content { width: 100% !important; box-sizing: border-box; padding: 24px 20px !important; border-radius: 14px !important; font-size: .9rem; line-height: 1.7; } /* Dashboard welcome text */ .woocommerce-MyAccount-content p { font-size: .9rem !important; line-height: 1.7; } .woocommerce-MyAccount-content a { color: #348993; word-break: break-word; } /* Orders table — make it scroll horizontally */ .woocommerce-account .woocommerce-orders-table-wrapper, .woocommerce-account table.woocommerce-orders-table, .woocommerce-account table.shop_table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; } /* Address & account forms: full-width fields */ .woocommerce-account .woocommerce-address-fields .form-row, .woocommerce-account .woocommerce-EditAccountForm .form-row { width: 100% !important; float: none !important; clear: both; } } @media(max-width:480px){ .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) { padding: 16px 12px 48px !important; } .woocommerce-MyAccount-content { padding: 18px 16px !important; border-radius: 12px !important; } .woocommerce-MyAccount-navigation ul li a { font-size: .75rem !important; padding: 7px 11px !important; } .woocommerce-account table.woocommerce-orders-table th, .woocommerce-account table.shop_table th, .woocommerce-account table.woocommerce-orders-table td, .woocommerce-account table.shop_table td { padding: 10px 10px !important; font-size: .8rem !important; } } /* ========================================================= WORDPRESS ERROR PAGE — override WP's #error-page body styles that fire when a PHP fatal occurs and inject a second document. Prevents max-width:700px / margin-top:50px from breaking the page layout after any PHP error is resolved. ========================================================= */ body#error-page { max-width: none !important; margin-top: 0 !important; padding: 0 !important; background: transparent !important; } /* ========================================================= STAR RATING — Unicode fix WooCommerce's default star font (\73\73\73\73\73) can fail to load and shows as "sssss" / "SSSSS". Override with real ★ characters that always render regardless of font loading. ========================================================= */ .star-rating { overflow: hidden; position: relative; display: inline-block; width: 5.4em; height: 1.1em; font-size: .875rem; vertical-align: middle; line-height: 1; } .star-rating::before { font-family: inherit !important; content: "★★★★★" !important; color: #d1d5db; letter-spacing: 2px; position: absolute; top: 0; left: 0; font-size: inherit; } .star-rating span { overflow: hidden; position: absolute; top: 0; left: 0; white-space: nowrap; } .star-rating span::before { font-family: inherit !important; content: "★★★★★" !important; color: #f59e0b; letter-spacing: 2px; font-size: inherit; } /* Hide the text inside the span (the rating number / "out of 5") */ .star-rating span strong.rating { display: none; }