/* ══════════════════════════════════════════════════════════════ TechMartSE v3 — WordPress Override Bridge Maps copper design system onto TechMartSE theme + WooCommerce. All selectors target ACTUAL class names found in the live theme. ══════════════════════════════════════════════════════════════ */ /* ────────────────────────────────────────────────────────────── 0. KILL OLD THEME LEFTOVERS v3 injects its own .topbar + .mobile-nav__lang. The old theme's .top-bar (announcement strip) and .lang-dropdown (Polylang switcher) would otherwise leak through and visually collide with v3. Hide them at the CSS layer to avoid touching theme templates. ────────────────────────────────────────────────────────────── */ .top-bar, .top-bar-inner, .lang-dropdown, .lang-current, .header-language, .header-currency, /* v3.0.9: hide leftover quick-view-modal from old theme / removed tmse-ui-boost plugin. Renders as empty 25px block at the bottom of with no CSS rules. */ #quick-view-modal { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; pointer-events: none !important; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 1. HIDE THEME HEADER / FOOTER ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ #masthead, .site-header, .main-navigation, #site-navigation, #colophon, .site-footer, .theme-header, .theme-footer, .nav-menu, .primary-menu, .header-widget-area, .footer-widget-area, .site-topbar, .top-header-bar, header[role="banner"]:not(.header), footer[role="contentinfo"]:not(.footer) { display: none !important; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 2. GLOBAL RESET & TYPOGRAPHY ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ body { background: var(--color-surface) !important; color: var(--color-gray-700); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding-top: 0 !important; margin: 0; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 600; color: var(--color-gray-800); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); margin-bottom: var(--space-4); } h1 { font-size: var(--text-3xl); } h2 { font-size: var(--text-2xl); } h3 { font-size: var(--text-xl); } h4 { font-size: var(--text-lg); } h5 { font-size: var(--text-base); } h6 { font-size: var(--text-sm); } p, li, td, th { font-size: var(--text-base); line-height: var(--leading-normal); color: var(--color-gray-600); } a { color: var(--color-primary-600); transition: color var(--duration-fast); text-decoration: none; } a:hover { color: var(--color-primary-500); } a:focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: 2px; border-radius: 2px; } img { max-width: 100%; height: auto; } /* Container (reuse theme's .container class) */ .container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-4); } @media (min-width: 1024px) { .container { padding: 0 var(--space-6); } } /* Override theme's .site-content / .site width constraints. Old theme restricts these to narrow fixed widths (e.g. 570px), which crushes grid layouts like .product-single into tiny columns. */ .site-content, .site-main, .site, #content, #primary { width: 100% !important; max-width: 100% !important; } /* Prevent body and main from becoming grid containers. .product-page class on and
can match grid rules, splitting the page into 2 columns and crushing inner content into narrow columns. We reset both to block, and never target .product-page in our grid rules (only .product-single). */ body.product-page, body.woocommerce-page, body.single-product { display: block !important; } /* Remove default WP admin bar offset */ .admin-bar .header { top: 32px; } @media screen and (max-width: 782px) { .admin-bar .header { top: 46px; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 3. HOMEPAGE — HERO (static dark text-first design) Reference (localhost:8080): deep navy background, centered text-only, orange "Explore Products" + outline "Request Quotation" buttons. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .hero-carousel { position: relative; overflow: hidden; margin-bottom: 0; background: var(--color-gray-800); /* #141413 deep navy */ padding: var(--space-20) 0; } /* Override theme's hero-image colored gradient: force solid dark */ .hero-image, .slide-image, .slide-bg, [style*="hero-image"] { display: none !important; } /* v3.0.8: KILL inline gradient on .carousel-slide (theme sets bg via inline style). Force every slide to be transparent so the dark hero shows through. */ .carousel-slide, .carousel-slide.active, .carousel-slide[style] { background: transparent !important; background-image: none !important; } .hero-carousel::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); z-index: 0; } .carousel-container, .carousel-track { position: relative; z-index: 1; } .carousel-slide { width: 100%; padding: 0; /* JS sets position:absolute and handles opacity/transform */ opacity: 0 !important; pointer-events: none; transition: opacity 0.5s ease, transform 0.5s ease; } .carousel-slide.active { opacity: 1 !important; pointer-events: auto; } .carousel-slide .container { position: relative; z-index: 1; } .slide-content { display: grid; gap: var(--space-8); align-items: center; text-align: center !important; max-width: 720px; margin: 0 auto; } @media (min-width: 1024px) { .slide-content { text-align: center !important; } } .slide-text { color: #ffffff; } .slide-eyebrow { display: inline-block; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-primary-400); margin-bottom: var(--space-4); } .slide-title { font-family: var(--font-heading); font-size: var(--text-4xl); font-weight: 700; color: #ffffff !important; margin-bottom: var(--space-4); line-height: var(--leading-tight); letter-spacing: -0.02em; } @media (min-width: 768px) { .slide-title { font-size: var(--text-5xl); } } @media (min-width: 1024px) { .slide-title { font-size: 3.5rem; } } .slide-subtitle { font-size: var(--text-lg); color: rgba(255,255,255,0.7) !important; margin-bottom: var(--space-8); line-height: var(--leading-relaxed); max-width: 560px; } .slide-buttons { display: flex; gap: var(--space-3); flex-wrap: wrap; } .slide-buttons .btn { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 500; padding: var(--space-3) var(--space-6); border-radius: var(--radius-md); text-decoration: none; transition: all var(--duration-fast) var(--ease-out-expo); min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } .slide-buttons .btn-primary, .slide-buttons a:has-text("Explore") { background: var(--color-primary-500); color: #fff; border: none; } .slide-buttons .btn-primary:hover, .slide-buttons a:hover { background: var(--color-primary-600); transform: translateY(-1px); box-shadow: var(--shadow-md); } .slide-buttons .btn-outline-light, .slide-buttons a[href*="contact"] { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.4); } .slide-buttons .btn-outline-light:hover, .slide-buttons a[href*="contact"]:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.7); } .slide-image { display: none; } /* Carousel controls */ .carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.15); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.2); color: #fff; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--duration-fast); } .carousel-btn:hover { background: rgba(255,255,255,0.3); } .carousel-prev { left: var(--space-4); } .carousel-next { right: var(--space-4); } .carousel-indicators { position: absolute; bottom: var(--space-4); left: 50%; transform: translateX(-50%); display: flex; gap: var(--space-2); z-index: 5; } .carousel-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.4); border: none; cursor: pointer; transition: all var(--duration-fast); padding: 0; } .carousel-dot.active { background: #fff; transform: scale(1.2); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 4. HOMEPAGE — TRUST BAR (icon + text row) Reference (localhost:8080): 4-column grid, icon+title+desc per item, white background, copper primary icons. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .trust-badges { background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: var(--radius-lg); padding: var(--space-8) var(--space-6); margin: var(--space-12) auto; max-width: var(--container-max); } .badges-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); } @media (min-width: 640px) { .badges-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .badges-grid { grid-template-columns: repeat(4, 1fr); } } .badge-item { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3); } .badge-item i { font-size: 28px; color: var(--color-primary-500); opacity: 0.9; } .badge-item img, .badge-item svg { width: 36px; height: 36px; flex-shrink: 0; color: var(--color-primary-500); opacity: 0.9; } .badge-item .badge-text { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 500; color: var(--color-gray-700) !important; line-height: var(--leading-snug); } .badge-text h4 { font-size: var(--text-sm); font-weight: 600; color: var(--color-gray-800) !important; margin-bottom: 2px; } .badge-text p { font-size: var(--text-xs); color: var(--color-gray-500) !important; margin: 0; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 5. HOMEPAGE — CATEGORY CARDS (4 large color blocks) Reference (localhost:8080): 4-column grid, each card has a large color block header (Cu/Au/Ni/Sn gradient) + body with badge/title/desc. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .categories-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); margin-bottom: var(--space-12); } @media (min-width: 640px) { .categories-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .categories-grid { grid-template-columns: repeat(4, 1fr); } } .category-card { background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: var(--radius-lg); overflow: hidden; text-align: left; transition: all var(--duration-normal) var(--ease-out-expo); box-shadow: var(--shadow-card); text-decoration: none; display: flex; flex-direction: column; color: inherit; } .category-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: var(--color-primary-300); } .category-image { /* Override inline style: force 4 metal-color gradients */ aspect-ratio: 1.4 / 1; display: flex !important; align-items: center !important; justify-content: center !important; font-family: var(--font-heading) !important; font-size: 3.5rem !important; font-weight: 700 !important; color: #fff !important; width: 100% !important; height: auto !important; margin: 0 !important; border-radius: 0 !important; background: linear-gradient(135deg, #e8b980, #c88a3e) !important; } .category-card:nth-child(2) .category-image { background: linear-gradient(135deg, #f5d065, #c9a030) !important; } .category-card:nth-child(3) .category-image { background: linear-gradient(135deg, #94a3b8, #64748b) !important; } .category-card:nth-child(4) .category-image { background: linear-gradient(135deg, #93c5fd, #3b82f6) !important; } .category-card .category-content { padding: var(--space-5) var(--space-4); flex: 1; display: flex; flex-direction: column; } .category-name { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 600; color: var(--color-gray-800); margin-bottom: var(--space-2); margin-top: var(--space-2); } .category-desc { font-size: var(--text-sm); color: var(--color-gray-500); line-height: var(--leading-relaxed); margin-bottom: var(--space-3); flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .category-count { font-size: var(--text-xs); color: var(--color-gray-400); font-weight: 500; } /* Product categories section wrapper */ .product-categories-section { padding: var(--space-12) 0 var(--space-16); background: var(--color-white); margin-bottom: 0; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 6. HOMEPAGE — OFFER CTA (single orange banner) Reference (localhost:8080): one full-width orange banner with "Bulk Orders. Better Pricing." title, desc, white button. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .promotions-section { padding: var(--space-12) 0; background: var(--color-white); margin-bottom: 0; } /* Hide the 3-card grid; render as single banner */ .promotions-grid { display: block !important; margin-bottom: 0; } .promo-card { position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: var(--space-12) var(--space-6); transition: all var(--duration-normal) var(--ease-out-expo); box-shadow: var(--shadow-md); background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-700)) !important; border: 1px solid rgba(255,255,255,0.1); text-align: center; color: var(--color-white); } .promo-card::before { content: ''; position: absolute; top: -50%; right: -30%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .promo-card .promo-content { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; } .promo-card .promo-title { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 700; color: var(--color-white) !important; margin-bottom: var(--space-3); letter-spacing: -0.01em; } @media (min-width: 768px) { .promo-card .promo-title { font-size: var(--text-4xl); } } .promo-card .promo-subtitle, .promo-card .promo-description { font-size: var(--text-lg); color: rgba(255,255,255,0.9) !important; font-weight: 400; margin-bottom: var(--space-6); line-height: var(--leading-relaxed); } .promo-card .promo-icon { display: none; /* hide small icon in banner mode */ } .promo-card .btn-light { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--color-white); color: var(--color-primary-700); border: none; padding: var(--space-3) var(--space-6); border-radius: var(--radius-md); font-size: var(--text-base); font-weight: 600; text-decoration: none; transition: all var(--duration-fast); min-height: 44px; font-family: var(--font-heading); } .promo-card .btn-light:hover { background: var(--color-primary-50); transform: translateY(-1px); box-shadow: var(--shadow-lg); } /* Hide additional promotion cards 2 and 3 */ .promo-card:nth-child(n+2) { display: none !important; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 7. HOMEPAGE — NEWS SECTION (BLOG PREVIEW) Classes: .news-section, .news-grid, .news-card ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .news-section { padding: var(--space-12) 0; background: var(--color-white); margin-bottom: var(--space-12); } .news-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } @media (min-width: 640px) { .news-grid { grid-template-columns: repeat(3, 1fr); } } .news-card { background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); transition: all var(--duration-normal) var(--ease-out-expo); } .news-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); } .news-image img { width: 100%; height: 200px; object-fit: cover; border-radius: 0; } .news-content { padding: var(--space-4); } .news-category { display: inline-block; font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600; color: var(--color-primary-600); background: var(--color-primary-50); padding: 2px 10px; border-radius: 20px; margin-bottom: var(--space-2); text-transform: uppercase; letter-spacing: 0.05em; } .news-title { font-family: var(--font-heading); font-size: var(--text-base); font-weight: 600; color: var(--color-gray-800); margin-bottom: var(--space-2); line-height: var(--leading-snug); } .news-excerpt { font-size: var(--text-sm); color: var(--color-gray-500); line-height: var(--leading-relaxed); margin-bottom: var(--space-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .news-meta { display: flex; gap: var(--space-3); font-size: var(--text-xs); color: var(--color-gray-400); } .news-date, .news-read-time { display: flex; align-items: center; gap: 4px; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 8. HOMEPAGE — BRANDS / CTA / SECTIONS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .section-header { text-align: center; margin-bottom: var(--space-12); } .section-title { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 700; color: var(--color-gray-800); margin-bottom: var(--space-3); letter-spacing: -0.02em; line-height: var(--leading-tight); } @media (min-width: 640px) { .section-title { font-size: var(--text-4xl); } } .section-eyebrow { display: inline-block; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-wide); color: var(--color-primary-500); text-transform: uppercase; margin-bottom: var(--space-3); } .section-subtitle { font-size: var(--text-lg); color: var(--color-gray-500); max-width: 640px; margin: 0 auto; line-height: var(--leading-relaxed); } .section-footer { text-align: center; margin-top: var(--space-10); } /* Brands carousel — HIDDEN (not in reference design) */ .brands-section { display: none !important; } /* CTA Section */ .cta-section { background: linear-gradient(135deg, var(--color-primary-700), var(--color-primary-800), var(--color-primary-900)); border-radius: var(--radius-lg); padding: var(--space-16) var(--space-6); margin-bottom: var(--space-12); text-align: center; position: relative; overflow: hidden; } .cta-section::before { content: ''; position: absolute; top: -30%; right: -10%; width: 300px; height: 300px; background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .cta-inner { max-width: 700px; margin: 0 auto; position: relative; z-index: 1; } .cta-content { color: #ffffff; } .cta-content h2, .cta-content h3, .cta-section .section-title { color: #ffffff !important; font-size: var(--text-3xl); margin-bottom: var(--space-4); } @media (min-width: 640px) { .cta-content h2 { font-size: var(--text-4xl); } } .cta-content p { color: rgba(255,255,255,0.8) !important; font-size: var(--text-lg); margin-bottom: var(--space-6); line-height: var(--leading-relaxed); } .cta-buttons { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; } .cta-buttons .btn { padding: var(--space-4) var(--space-8); min-height: 52px; font-size: var(--text-base); border-radius: var(--radius-md); font-weight: 600; line-height: 1; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; } .cta-buttons .btn-primary { background: var(--color-white); color: var(--color-primary-700); border: 2px solid var(--color-white); } .cta-buttons .btn-primary:hover { background: var(--color-primary-50); color: var(--color-primary-800); transform: translateY(-2px); box-shadow: var(--shadow-lg); } .cta-buttons .btn-outline-light { background: transparent; color: var(--color-white); border: 2px solid rgba(255,255,255,0.7); } .cta-buttons .btn-outline-light:hover { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.9); transform: translateY(-2px); box-shadow: var(--shadow-lg); } /* Newsletter Section — HIDDEN (not in reference design) */ .newsletter-section { display: none !important; } /* Section tabs */ .section-tabs { display: flex; gap: var(--space-1); justify-content: center; margin-bottom: var(--space-6); border-bottom: 2px solid var(--color-gray-100); padding-bottom: 0; } .tab-btn { padding: var(--space-2) var(--space-4); font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 500; color: var(--color-gray-400); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; cursor: pointer; transition: all var(--duration-fast); min-height: 44px; } .tab-btn.active, .tab-btn:hover { color: var(--color-primary-600); border-bottom-color: var(--color-primary-500); } /* Hot products section — dark bg like reference */ .hot-products-section { padding: var(--space-16) 0; background: var(--color-gray-800); color: var(--color-white); margin-bottom: 0; } .hot-products-section .section-title { color: var(--color-white) !important; } .hot-products-section .section-subtitle { color: var(--color-gray-400) !important; } .hot-products-section .products-grid { /* Inherits universal product grid, just override background tone */ } .hot-products-section .product-card { background: var(--color-white); color: var(--color-gray-800); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 9. PRODUCT CARDS — UNIVERSAL Used on: homepage, shop, category, search, related Classes: .product-card, .products-grid, .related-products ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .products-grid, .related-products .products, .related-products { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); padding: 0; margin: 0; list-style: none; } @media (min-width: 640px) { .products-grid, .related-products .products, .related-products { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .products-grid, .related-products .products, .related-products { grid-template-columns: repeat(4, 1fr); } } .product-card { background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: var(--radius-lg); overflow: hidden; transition: all var(--duration-normal) var(--ease-out-expo); box-shadow: var(--shadow-card); position: relative; } .product-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: var(--color-primary-300); } .product-image { position: relative; overflow: hidden; background: var(--color-gray-50); aspect-ratio: 1 / 1; } .product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out-expo); border-radius: 0; } .product-card:hover .product-image img { transform: scale(1.05); } .product-image-link { display: block; width: 100%; height: 100%; } /* v3.0.8: Always-visible action buttons with prominent "View" eye button */ .product-actions { position: absolute; top: var(--space-3); right: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); opacity: 1 !important; transform: translateX(0) !important; transition: all var(--duration-fast) var(--ease-out-expo); z-index: 2; } .product-card:hover .product-actions { transform: translateX(0) scale(1.05) !important; } /* Quick view (eye) button — always visible, copper accent */ .product-actions .quick-view, .product-actions .action-btn.quick-view { background: var(--color-primary-500) !important; color: var(--color-white) !important; border-color: var(--color-primary-500) !important; box-shadow: 0 2px 8px rgba(200, 138, 62, 0.4) !important; } .product-actions .quick-view:hover, .product-actions .action-btn.quick-view:hover { background: var(--color-primary-600) !important; color: var(--color-white) !important; transform: scale(1.1); } /* Other action buttons — white card with copper hover */ .product-actions .add-to-wishlist, .product-actions .add-to-cart-btn, .product-actions .action-btn.add-to-wishlist, .product-actions .action-btn.add-to-cart-btn { background: var(--color-white) !important; color: var(--color-gray-700) !important; border: 1px solid var(--color-gray-200) !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important; } .product-actions .add-to-wishlist:hover, .product-actions .add-to-cart-btn:hover, .product-actions .action-btn.add-to-wishlist:hover, .product-actions .action-btn.add-to-cart-btn:hover { background: var(--color-primary-500) !important; color: var(--color-white) !important; border-color: var(--color-primary-500) !important; } .action-btn { width: 40px; height: 40px; border-radius: var(--radius-md); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--duration-fast); box-shadow: var(--shadow-sm); } .action-btn:hover { background: var(--color-primary-500); color: var(--color-white); border-color: var(--color-primary-500); } /* Sale badge */ .product-card .onsale, .product-card .sale-badge { position: absolute; top: var(--space-3); left: var(--space-3); background: var(--color-error); color: #fff; font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600; padding: 2px 10px; border-radius: var(--radius-sm); z-index: 2; } /* Product info */ .product-info { padding: var(--space-3) var(--space-4) var(--space-4); } .product-title { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 600; color: var(--color-gray-800); margin-bottom: var(--space-1); line-height: var(--leading-snug); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .product-title a { color: inherit; text-decoration: none; } .product-title a:hover { color: var(--color-primary-600); } /* v3.0.8: Make title clickable feel + arrow on hover */ .product-title { position: relative; cursor: pointer; } .product-card .product-title a::after { content: " →"; display: inline-block; color: var(--color-primary-500); font-weight: 700; transition: transform var(--duration-fast) var(--ease-out-expo); } .product-card .product-title a:hover::after { transform: translateX(4px); color: var(--color-primary-600); } /* Price */ .product-price { font-family: var(--font-heading); font-size: var(--text-base); font-weight: 700; color: var(--color-primary-600); margin-bottom: var(--space-3); } .product-price .woocommerce-Price-amount { font-family: var(--font-heading); font-size: var(--text-base); font-weight: 700; color: var(--color-primary-600); } .product-price del .woocommerce-Price-amount { font-size: var(--text-sm); font-weight: 400; color: var(--color-gray-400); text-decoration: line-through; margin-right: var(--space-2); } .product-price ins { text-decoration: none; } /* Add to cart button */ .add-to-cart-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); width: 100%; padding: var(--space-2) var(--space-4); font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 500; color: var(--color-white); background: var(--color-primary-500); border: none; border-radius: var(--radius-md); cursor: pointer; transition: all var(--duration-fast) var(--ease-out-expo); min-height: 44px; text-decoration: none; line-height: 1; } .add-to-cart-btn:hover { background: var(--color-primary-600); transform: translateY(-1px); box-shadow: var(--shadow-md); color: var(--color-white); } .add-to-cart-btn:focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: 2px; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 10. STANDARD WOOCOMMERCE FALLBACKS For any WC standard classes that DO appear ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .woocommerce ul.products { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } @media (min-width: 640px) { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .woocommerce ul.products { grid-template-columns: repeat(4, 1fr); } } .woocommerce ul.products li.product { float: none !important; width: 100% !important; margin: 0 !important; background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-card); transition: all var(--duration-normal) var(--ease-out-expo); } .woocommerce ul.products li.product:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: var(--color-primary-300); } .woocommerce ul.products li.product img { border-radius: var(--radius-md); } .woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 600; color: var(--color-gray-800); } .woocommerce ul.products li.product .price { font-family: var(--font-heading); font-size: var(--text-base); font-weight: 700; color: var(--color-primary-600); } .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 500; padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); background: var(--color-primary-500) !important; color: var(--color-white) !important; border: none; min-height: 44px; transition: all var(--duration-fast); } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background: var(--color-primary-600) !important; transform: translateY(-1px); } .woocommerce span.onsale { background: var(--color-error) !important; border-radius: var(--radius-sm); font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600; padding: var(--space-1) var(--space-2); min-height: auto; line-height: 1.4; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 11. SHOP PAGE LAYOUT Classes: .shop-layout, .shop-main, .shop-sidebar ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* NOTE: Theme HTML has .shop-sidebar BEFORE .shop-main. Grid columns: sidebar first → narrow col, main second → wide col */ .shop-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-6); padding: var(--space-8) 0; } @media (min-width: 640px) { .shop-layout { grid-template-columns: 280px 1fr; } } @media (min-width: 1024px) { .shop-layout { grid-template-columns: 340px 1fr; } } .shop-header { margin-bottom: var(--space-6); } .shop-title { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 700; color: var(--color-gray-800); } .shop-toolbar { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) 0; margin-bottom: var(--space-4); border-bottom: 1px solid var(--color-gray-100); flex-wrap: wrap; gap: var(--space-3); } .toolbar-left { font-size: var(--text-sm); color: var(--color-gray-400); } .toolbar-right { display: flex; gap: var(--space-2); align-items: center; } .view-switcher { display: flex; gap: 2px; background: var(--color-gray-100); border-radius: var(--radius-md); padding: 2px; } .view-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; border-radius: var(--radius-sm); cursor: pointer; color: var(--color-gray-400); transition: all var(--duration-fast); } .view-btn.active, .view-btn:hover { background: var(--color-white); color: var(--color-gray-600); box-shadow: var(--shadow-sm); } /* Sort dropdown */ .woocommerce-ordering select, .orderby { font-family: var(--font-body); font-size: var(--text-sm); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-gray-200); border-radius: var(--radius-md); background: var(--color-white); color: var(--color-gray-600); min-height: 44px; cursor: pointer; } .woocommerce-ordering select:focus, .orderby:focus { outline: none; border-color: var(--color-primary-500); box-shadow: 0 0 0 3px rgb(200 138 62 / 0.15); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 12. SHOP SIDEBAR WIDGETS Classes: .shop-widget, .shop-sidebar ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .shop-sidebar { display: flex; flex-direction: column; gap: var(--space-4); } .shop-widget { background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: var(--radius-lg); padding: var(--space-4); } .shop-widget .widget-title { font-family: var(--font-heading); font-size: var(--text-base); font-weight: 600; color: var(--color-gray-800); margin-bottom: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-gray-100); } .product-cat-list { list-style: none; padding: 0; margin: 0; } .product-cat-list li { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-gray-50); font-size: var(--text-sm); } .product-cat-list li:last-child { border-bottom: none; } .product-cat-list li a { color: var(--color-gray-600); text-decoration: none; display: flex; justify-content: space-between; } .product-cat-list li a:hover { color: var(--color-primary-500); } .product-cat-list .count { color: var(--color-gray-400); font-size: var(--text-xs); background: var(--color-gray-50); padding: 1px 8px; border-radius: 10px; } /* Price filter */ .price-filter { display: flex; flex-direction: column; gap: var(--space-3); } .price-inputs { display: flex; align-items: center; gap: var(--space-2); } .price-inputs input { width: 100%; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-gray-200); border-radius: var(--radius-md); font-family: var(--font-body); font-size: var(--text-sm); min-height: 44px; } .price-inputs input:focus { outline: none; border-color: var(--color-primary-500); } .price-separator { color: var(--color-gray-400); font-weight: 500; } /* Rating filter */ .rating-filter { list-style: none; padding: 0; margin: 0; } .rating-filter li { padding: var(--space-1) 0; } .rating-option { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; font-size: var(--text-sm); color: var(--color-gray-600); } .rating-text { font-size: var(--text-xs); color: var(--color-gray-400); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 13. PRODUCT DETAIL PAGE Classes: .product-single, .product-gallery-* NOTE: .product-page class is used on +
as wrapper. We do NOT target .product-page — only .product-single gets grid. (body.product-page is reset to display:block in section 2.) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .product-single { display: grid; grid-template-columns: 1fr; gap: var(--space-8); padding: var(--space-8) 0; } @media (min-width: 640px) { .product-single { grid-template-columns: 1fr 1fr; gap: var(--space-12); } } .product-gallery-col { position: sticky; top: calc(var(--header-height) + var(--space-6)); align-self: start; } .product-gallery { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-white); border: 1px solid var(--color-gray-100); } .gallery-main img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); } .product-details-col { display: flex; flex-direction: column; gap: var(--space-4); } /* Product title */ .product-details-col .product-title, .product-details-col .product_title { font-family: var(--font-heading) !important; font-size: var(--text-2xl) !important; font-weight: 700; color: var(--color-gray-800); line-height: var(--leading-tight); margin-bottom: 0; } /* Product price wrapper */ .product-price-wrapper, .entry-summary .price { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 700; color: var(--color-primary-600); display: flex; align-items: baseline; gap: var(--space-2); } .product-price-wrapper .woocommerce-Price-amount, .entry-summary .price .woocommerce-Price-amount { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 700; color: var(--color-primary-600); } /* Short description */ .product-short-description { font-size: var(--text-base); color: var(--color-gray-500); line-height: var(--leading-relaxed); } /* Add to cart section */ .product-add-to-cart { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--color-gray-100); } /* v3.0.21: Form layout — SKU selector full width, qty+button in a row below */ .product-add-to-cart form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); } .product-add-to-cart form.cart > #tmse-sku-selector { flex: 0 0 100%; } /* v3.0.21: Separator between SKU selector and Add to Cart area */ .product-add-to-cart .tmse-sku-selector { margin-bottom: var(--space-2) !important; padding-bottom: var(--space-5); border-bottom: 1px solid var(--color-gray-100); } .product-add-to-cart .quantity, .quantity { display: inline-flex; align-items: center; border: 1px solid var(--color-gray-200); border-radius: var(--radius-md); overflow: hidden; } .quantity input.qty { width: 56px; text-align: center; border: none; padding: var(--space-2); font-family: var(--font-body); font-size: var(--text-base); font-weight: 600; min-height: 44px; -moz-appearance: textfield; } .quantity input.qty::-webkit-inner-spin-button, .quantity input.qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .single_add_to_cart_button { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 600; color: var(--color-white); background: var(--color-primary-500); border: none; border-radius: var(--radius-md); padding: var(--space-3) var(--space-8); cursor: pointer; min-height: 44px; transition: all var(--duration-fast); } .single_add_to_cart_button:hover { background: var(--color-primary-600); transform: translateY(-1px); box-shadow: var(--shadow-md); } /* Product meta info */ .product-meta-info { padding: var(--space-4) 0; border-top: 1px solid var(--color-gray-100); border-bottom: 1px solid var(--color-gray-100); font-size: var(--text-sm); color: var(--color-gray-500); } .product-sku { margin-bottom: var(--space-1); } .sku-label { font-weight: 600; color: var(--color-gray-600); margin-right: var(--space-2); } .sku-value { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-gray-400); } .product-categories { margin-bottom: var(--space-1); } .product-cat-links a { color: var(--color-primary-600); } /* Shipping info */ .product-shipping-info { display: flex; flex-direction: column; gap: var(--space-2); } .shipping-info-item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-gray-500); } /* Share section */ .product-share { display: flex; align-items: center; gap: var(--space-3); padding-top: var(--space-4); } .share-label { font-size: var(--text-sm); font-weight: 600; color: var(--color-gray-600); } .share-link { width: 36px; height: 36px; border-radius: 50%; background: var(--color-gray-50); border: 1px solid var(--color-gray-100); display: flex; align-items: center; justify-content: center; color: var(--color-gray-500); transition: all var(--duration-fast); text-decoration: none; } .share-link:hover { background: var(--color-primary-500); color: var(--color-white); border-color: var(--color-primary-500); } /* Product tabs */ .product-tabs-wrapper { grid-column: 1 / -1; margin-top: var(--space-12); padding-top: var(--space-8); border-top: 1px solid var(--color-gray-100); } .woocommerce-tabs ul.wc-tabs { display: flex !important; gap: 0; padding: 0 !important; margin: 0 0 var(--space-6) !important; border-bottom: 2px solid var(--color-gray-100); list-style: none; } .woocommerce-tabs ul.wc-tabs::before { display: none !important; } .woocommerce-tabs ul.wc-tabs li { border: none !important; background: none !important; margin: 0 !important; padding: 0 !important; } .woocommerce-tabs ul.wc-tabs li::before, .woocommerce-tabs ul.wc-tabs li::after { display: none !important; } .woocommerce-tabs ul.wc-tabs li a { display: block; padding: var(--space-3) var(--space-4); font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 500; color: var(--color-gray-400); border-bottom: 2px solid transparent; margin-bottom: -2px; text-decoration: none; transition: all var(--duration-fast); } .woocommerce-tabs ul.wc-tabs li.active a { color: var(--color-primary-600); border-bottom-color: var(--color-primary-500); } .woocommerce-Tabs-panel { padding: var(--space-4) 0; font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--color-gray-600); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 14. BLOG PAGE Classes: .content-area, .post-grid, .post-card ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .content-area.with-sidebar { display: grid; grid-template-columns: 1fr; gap: var(--space-8); padding: var(--space-8) 0; } @media (min-width: 640px) { .content-area.with-sidebar { grid-template-columns: 1fr 300px; } } @media (min-width: 1024px) { .content-area.with-sidebar { grid-template-columns: 1fr 340px; } } .content-main { display: flex; flex-direction: column; gap: var(--space-4); } .page-header { margin-bottom: var(--space-6); } .page-title { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 700; color: var(--color-gray-800); margin-bottom: var(--space-2); } /* Post grid — actual class from theme */ .post-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } @media (min-width: 640px) { .post-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .post-grid { grid-template-columns: repeat(3, 1fr); } } /* Post card */ .post-card { background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); transition: all var(--duration-normal) var(--ease-out-expo); } .post-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: var(--color-primary-300); } .post-thumbnail { overflow: hidden; } .post-thumbnail img { width: 100%; height: 200px; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out-expo); border-radius: 0; } .post-card:hover .post-thumbnail img { transform: scale(1.05); } .post-content { padding: var(--space-4); } /* Entry header / meta */ .entry-header { margin-bottom: var(--space-2); } .entry-title { font-family: var(--font-heading) !important; font-size: var(--text-lg) !important; font-weight: 600; color: var(--color-gray-800); line-height: var(--leading-snug); margin-bottom: var(--space-2); } .entry-title a { color: inherit; text-decoration: none; } .entry-title a:hover { color: var(--color-primary-600); } .post-category { display: inline-block; font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600; color: var(--color-primary-600); background: var(--color-primary-50); padding: 2px 10px; border-radius: 20px; margin-bottom: var(--space-2); text-transform: uppercase; letter-spacing: 0.05em; } .entry-meta { font-size: var(--text-xs); color: var(--color-gray-400); margin-bottom: var(--space-3); display: flex; gap: var(--space-3); flex-wrap: wrap; } .entry-meta a { color: var(--color-primary-600); } .posted-on, .posted-by { display: flex; align-items: center; gap: 4px; } .entry-excerpt { font-size: var(--text-sm); color: var(--color-gray-500); line-height: var(--leading-relaxed); margin-bottom: var(--space-3); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .read-more { display: inline-flex; align-items: center; font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 500; color: var(--color-primary-600); text-decoration: none; } .read-more:hover { color: var(--color-primary-500); } .entry-footer { font-size: var(--text-xs); color: var(--color-gray-400); } /* Posts navigation */ .posts-navigation { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--color-gray-100); } .nav-links { display: flex; justify-content: space-between; } .nav-previous a, .nav-next a { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 500; color: var(--color-primary-600); text-decoration: none; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 15. SINGLE POST (Blog Detail) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .single-post .entry-content, .type-post .entry-content { max-width: var(--container-narrow); margin: 0 auto; font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--color-gray-600); } .entry-content img { border-radius: var(--radius-md); max-width: 100%; height: auto; } .entry-content blockquote { border-left: 4px solid var(--color-primary-500); padding: var(--space-4) var(--space-5); margin: var(--space-6) 0; background: var(--color-primary-50); border-radius: 0 var(--radius-md) var(--radius-md) 0; color: var(--color-gray-600); font-style: italic; } .entry-content pre { background: var(--color-gray-800); color: var(--color-gray-100); padding: var(--space-4); border-radius: var(--radius-md); overflow-x: auto; font-family: var(--font-mono); font-size: var(--text-sm); } .entry-content code { background: var(--color-gray-100); padding: 2px 6px; border-radius: 4px; font-family: var(--font-mono); font-size: 0.9em; } .entry-content ul, .entry-content ol { padding-left: var(--space-6); margin: var(--space-4) 0; } .entry-content li { margin-bottom: var(--space-2); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 16. SIDEBAR WIDGETS (Blog, etc.) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .widget-area { display: flex; flex-direction: column; gap: var(--space-4); } /* Standard WP widgets */ .widget { background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: var(--radius-lg); padding: var(--space-4); } .widget-title { font-family: var(--font-heading); font-size: var(--text-base); font-weight: 600; color: var(--color-gray-800); margin-bottom: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-gray-100); } .widget ul { list-style: none; padding: 0; margin: 0; } .widget ul li { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-gray-50); font-size: var(--text-sm); } .widget ul li:last-child { border-bottom: none; } .widget ul li a { color: var(--color-gray-600); text-decoration: none; } .widget ul li a:hover { color: var(--color-primary-500); } /* Archive / Category / Latest Posts blocks */ .wp-block-archives, .wp-block-categories, .wp-block-latest-posts { list-style: none !important; padding: 0 !important; margin: 0 !important; } .wp-block-archives li, .wp-block-categories li, .wp-block-latest-posts__list li { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-gray-50); font-size: var(--text-sm); } .wp-block-archives li a, .wp-block-categories li a, .wp-block-latest-posts__post-title { color: var(--color-gray-600); text-decoration: none; } .wp-block-latest-posts__post-title { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-snug); } /* Search widget */ .wp-block-search__inside-wrapper { display: flex; gap: 0; } .wp-block-search__input { flex: 1; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-gray-200); border-right: none; border-radius: var(--radius-md) 0 0 var(--radius-md); font-family: var(--font-body); font-size: var(--text-sm); min-height: 44px; } .wp-block-search__input:focus { outline: none; border-color: var(--color-primary-500); } .wp-block-search__button { padding: var(--space-2) var(--space-4); background: var(--color-primary-500); color: var(--color-white); border: none; border-radius: 0 var(--radius-md) var(--radius-md) 0; font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 500; cursor: pointer; min-height: 44px; } .wp-block-search__button:hover { background: var(--color-primary-600); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 17. WOOCOMMERCE NOTICES ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .woocommerce-message, .woocommerce-info, .woocommerce-error { font-family: var(--font-body); font-size: var(--text-sm); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); margin-bottom: var(--space-4); border: none; border-left: 4px solid; } .woocommerce-message { background: #ECFDF5; border-color: var(--color-success); color: #065F46; } .woocommerce-info { background: #EFF6FF; border-color: var(--color-info); color: #1E40AF; } .woocommerce-error { background: #FEF2F2; border-color: var(--color-error); color: #991B1B; } /* WooCommerce breadcrumb */ .woocommerce-breadcrumb, .breadcrumb-nav { font-size: var(--text-sm); color: var(--color-gray-400); margin-bottom: var(--space-4); padding: var(--space-4) 0; } .woocommerce-breadcrumb a, .breadcrumb-nav a { color: var(--color-primary-600); } .breadcrumb-list { display: flex; list-style: none; padding: 0; margin: 0; gap: var(--space-1); flex-wrap: wrap; } .breadcrumb-item { font-size: var(--text-sm); } .breadcrumb-separator { margin: 0 var(--space-1); color: var(--color-gray-300); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 18. WOOCOMMERCE PAGINATION ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .woocommerce-pagination ul { display: flex; gap: var(--space-1); list-style: none; padding: 0; justify-content: center; margin: var(--space-8) 0; } .woocommerce-pagination ul li a, .woocommerce-pagination ul li span { display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 500; color: var(--color-gray-600); background: var(--color-white); border: 1px solid var(--color-gray-100); text-decoration: none; } .woocommerce-pagination ul li span.current { background: var(--color-primary-500); color: var(--color-white); border-color: var(--color-primary-500); } .woocommerce-pagination ul li a:hover { background: var(--color-primary-50); border-color: var(--color-primary-300); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 19. MY ACCOUNT / LOGIN / REGISTER ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .woocommerce-account .woocommerce { max-width: var(--container-max); margin: 0 auto; padding: var(--space-8) 0; } .woocommerce-MyAccount-navigation { background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: var(--radius-lg); padding: var(--space-3); margin-bottom: var(--space-4); } .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-1); } .woocommerce-MyAccount-navigation ul li a { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 500; color: var(--color-gray-600); text-decoration: none; transition: all var(--duration-fast); } .woocommerce-MyAccount-navigation ul li.is-active a { background: var(--color-primary-500); color: var(--color-white); } .woocommerce-MyAccount-navigation ul li a:hover { background: var(--color-gray-50); } .woocommerce-form-login, .woocommerce-form-register { max-width: 480px; margin: var(--space-8) auto; background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: var(--radius-lg); padding: var(--space-8); box-shadow: var(--shadow-card); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 20. SEARCH FORM ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .search-form { display: flex; gap: var(--space-2); } .search-form input[type="search"] { flex: 1; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-gray-200); border-radius: var(--radius-md); font-family: var(--font-body); font-size: var(--text-sm); min-height: 44px; } .search-form input[type="search"]:focus { outline: none; border-color: var(--color-primary-500); box-shadow: 0 0 0 3px rgb(200 138 62 / 0.15); } .search-form input[type="submit"] { padding: var(--space-2) var(--space-4); background: var(--color-primary-500); color: var(--color-white); border: none; border-radius: var(--radius-md); font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 500; cursor: pointer; min-height: 44px; } .search-form input[type="submit"]:hover { background: var(--color-primary-600); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 21. COMMENTS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .comments-area { max-width: var(--container-narrow); margin: var(--space-8) auto; } .comment-list { list-style: none; padding: 0; } .comment-body { background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-3); } .comment-author { font-size: var(--text-sm); font-weight: 600; } .comment-meta { font-size: var(--text-xs); color: var(--color-gray-400); } #respond input[type="text"], #respond input[type="email"], #respond textarea { width: 100%; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-gray-200); border-radius: var(--radius-md); font-family: var(--font-body); font-size: var(--text-sm); margin-bottom: var(--space-2); } #respond input[type="submit"] { padding: var(--space-2) var(--space-4); background: var(--color-primary-500) !important; color: var(--color-white); border: none; border-radius: var(--radius-md); font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 500; cursor: pointer; min-height: 44px; } #respond input[type="submit"]:hover { background: var(--color-primary-600); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 22. POLYLANG LANGUAGE SWITCHER ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .widget_polylang ul li, .lang-item { display: inline-block; margin-right: var(--space-1); } .widget_polylang ul li a, .lang-item a { padding: 2px 8px; border-radius: var(--radius-sm); font-size: var(--text-xs); color: var(--color-gray-600); text-decoration: none; } .widget_polylang ul li.current-lang a, .lang-item.current-lang a { background: var(--color-primary-500); color: var(--color-white); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 23. MISC UTILITY — STARTS / ANIMATIONS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .stars { color: #F59E0B; font-size: 14px; letter-spacing: 1px; } .tm-fade-in { opacity: 0; } .tm-visible { opacity: 1; transition: opacity var(--duration-normal); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 25. CONTACT PAGE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* Hero — theme uses .hero-content/.hero-title/.hero-subtitle names */ .page-hero { background: linear-gradient(180deg, var(--color-gray-800) 0%, var(--color-gray-900) 100%); color: var(--color-white); padding: var(--space-16) 0 var(--space-12); text-align: center; } .page-hero.contact-hero { margin-bottom: 0; } .page-hero .hero-content { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; padding: 0 var(--space-4); } .page-hero .hero-title { font-family: var(--font-heading); font-size: var(--text-4xl); font-weight: 700; color: var(--color-white) !important; margin-bottom: var(--space-4); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); } .page-hero .hero-subtitle { font-size: var(--text-lg); color: rgba(255,255,255,0.7) !important; line-height: var(--leading-relaxed); max-width: 560px; margin: 0 auto; } /* Contact layout: form + sidebar */ .contact-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-8); max-width: var(--container-max); margin: 0 auto; padding: var(--space-12) var(--space-4); } @media (min-width: 1024px) { .contact-layout { grid-template-columns: 1.2fr 0.8fr; gap: var(--space-10); } } /* Form card */ .contact-form-wrapper { background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-card); height: fit-content; } @media (min-width: 640px) { .contact-form-wrapper { padding: var(--space-8); } } .contact-form-wrapper h2 { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 700; color: var(--color-gray-800); margin-bottom: var(--space-6); } /* Form rows and groups */ .contact-form .form-row { display: grid; grid-template-columns: 1fr; gap: var(--space-5); margin-bottom: var(--space-5); } @media (min-width: 640px) { .contact-form .form-row { grid-template-columns: 1fr 1fr; } } .contact-form .form-row:last-child { margin-bottom: 0; } .contact-form .form-group { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: 0; } .contact-form .form-group label, .contact-form label { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 600; color: var(--color-gray-700); } /* Inputs, textareas, selects */ .contact-form .form-control, .contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"], .contact-form textarea, .contact-form select { width: 100%; padding: var(--space-3) var(--space-4); font-family: var(--font-body); font-size: var(--text-base); color: var(--color-gray-700); background: var(--color-white); border: 1.5px solid var(--color-gray-200); border-radius: var(--radius-md); transition: all var(--duration-fast) var(--ease-out-expo); min-height: 48px; } .contact-form .form-control::placeholder, .contact-form textarea::placeholder { color: var(--color-gray-300); } .contact-form .form-control:focus, .contact-form input[type="text"]:focus, .contact-form input[type="email"]:focus, .contact-form input[type="tel"]:focus, .contact-form textarea:focus, .contact-form select:focus { outline: none; border-color: var(--color-primary-500); box-shadow: 0 0 0 3px var(--color-primary-100); } .contact-form textarea.form-control, .contact-form textarea { min-height: 160px; resize: vertical; padding-top: var(--space-3); line-height: var(--leading-normal); } .contact-form select.form-control, .contact-form select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2364748B'%3E%3Cpath d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; cursor: pointer; } /* Consent checkbox */ .contact-form .form-consent { margin: var(--space-5) 0; } .contact-form .checkbox-label { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-gray-600); line-height: var(--leading-normal); cursor: pointer; } .contact-form .checkbox-label input[type="checkbox"] { width: 18px; height: 18px; min-width: 18px; margin-top: 2px; accent-color: var(--color-primary-500); cursor: pointer; } .contact-form .checkbox-label a { color: var(--color-primary-600); text-decoration: underline; text-underline-offset: 2px; } .contact-form .checkbox-label a:hover { color: var(--color-primary-500); } /* Submit button — theme uses Bootstrap .btn-primary */ .contact-form .btn-primary, .contact-form .btn.btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); background: var(--color-primary-500); color: var(--color-white); border: none; border-radius: var(--radius-md); padding: var(--space-3) var(--space-8); font-family: var(--font-heading); font-size: var(--text-base); font-weight: 600; min-height: 52px; cursor: pointer; transition: all var(--duration-fast) var(--ease-out-expo); text-decoration: none; line-height: 1; } .contact-form .btn-primary:hover, .contact-form .btn.btn-primary:hover { background: var(--color-primary-600); transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--color-white); } .contact-form .btn-primary:focus-visible, .contact-form .btn.btn-primary:focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: 2px; } /* Send icon fallback (theme iconfont may be broken) */ .contact-form .btn-primary .icon-send, .contact-form .btn.btn-primary .icon-send { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; position: relative; } .contact-form .btn-primary .icon-send::before, .contact-form .btn.btn-primary .icon-send::before { content: ''; position: absolute; width: 18px; height: 18px; background-size: contain; background-repeat: no-repeat; background-position: center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='22' y1='2' x2='11' y2='13'%3E%3C/line%3E%3Cpolygon points='22 2 15 22 11 13 2 9 22 2'%3E%3C/polygon%3E%3C/svg%3E"); } /* Contact info sidebar */ .contact-info { display: flex; flex-direction: column; gap: var(--space-4); height: fit-content; } .info-card { background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-card); transition: all var(--duration-fast) var(--ease-out-expo); } .info-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-primary-200); transform: translateY(-2px); } .info-card h3 { font-family: var(--font-heading); font-size: var(--text-base); font-weight: 600; color: var(--color-gray-800); margin-bottom: var(--space-3); } .info-card p { font-size: var(--text-sm); color: var(--color-gray-500); line-height: var(--leading-relaxed); margin-bottom: var(--space-2); } .info-card p:last-child { margin-bottom: 0; } .info-card a { color: var(--color-primary-600); text-decoration: none; transition: color var(--duration-fast); } .info-card a:hover { color: var(--color-primary-500); text-decoration: underline; } /* Icon container + fallback */ .info-card i[class*="icon-"] { position: relative; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--color-primary-50); color: var(--color-primary-500); margin-bottom: var(--space-4); font-size: 22px; } .info-card i[class*="icon-"]::before { content: ''; position: absolute; width: 24px; height: 24px; background-size: contain; background-repeat: no-repeat; background-position: center; } .info-card i.icon-location::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C88A3E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'%3E%3C/path%3E%3Ccircle cx='12' cy='10' r='3'%3E%3C/circle%3E%3C/svg%3E"); } .info-card i.icon-mail::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C88A3E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'%3E%3C/path%3E%3Cpolyline points='22 6 12 13 2 6'%3E%3C/polyline%3E%3C/svg%3E"); } .info-card i.icon-phone::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C88A3E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.56 12.56 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.56 12.56 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'%3E%3C/path%3E%3C/svg%3E"); } /* Map section — keep it but constrain height and round corners */ .contact-map { width: 100%; height: 360px; background: var(--color-gray-100); overflow: hidden; } .contact-map iframe, .contact-map img, .contact-map .map-container { width: 100%; height: 100%; border: none; display: block; } /* Form success/error message */ .contact-form .form-message { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 500; } .contact-form .form-message.success { background: var(--color-success-light); color: #065F46; border: 1px solid var(--color-success); } .contact-form .form-message.error { background: var(--color-error-light); color: #991B1B; border: 1px solid var(--color-error); } /* Mobile adjustments */ @media (max-width: 479px) { .contact-form-wrapper { padding: var(--space-5); } .contact-form .form-row { gap: var(--space-4); } .contact-form .btn-primary, .contact-form .btn.btn-primary { width: 100%; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 26. CART & CHECKOUT — Override Cart & Checkout plugin blue theme ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* ── Page title / hero ── */ .cart-page .page-header, .cart-page .entry-header, .cart-page .woocommerce-cart h1, .cart-page h1.page-title { background: var(--color-gray-800); color: var(--color-white); padding: var(--space-10) var(--space-8); margin: 0; text-align: center; } .cart-page .page-header h1, .cart-page .entry-header h1, .cart-page .woocommerce-cart h1, .cart-page h1.page-title { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 700; color: var(--color-white); margin: 0; } /* ── Cart table ── */ .cart-page .cart-table, .cart-page .woocommerce-cart-form__contents, .cart-page table.shop_table.cart { width: 100%; border-collapse: collapse; background: var(--color-white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); border: 1px solid var(--color-gray-100); } .cart-page .cart-table thead, .cart-page .woocommerce-cart-form__contents thead, .cart-page table.shop_table.cart thead { background: var(--color-primary-50); } .cart-page .cart-table th, .cart-page .woocommerce-cart-form__contents th, .cart-page table.shop_table.cart th { padding: var(--space-4) var(--space-5); font-size: var(--text-xs); font-weight: 600; color: var(--color-gray-600); text-transform: uppercase; letter-spacing: var(--tracking-wide); text-align: left; border-bottom: 2px solid var(--color-primary-100); } .cart-page .cart-table td, .cart-page .woocommerce-cart-form__contents td, .cart-page table.shop_table.cart td { padding: var(--space-5); border-bottom: 1px solid var(--color-gray-50); vertical-align: middle; } .cart-page .cart-table .product-remove a, .cart-page .woocommerce-cart-form__contents .product-remove a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--color-gray-400); font-size: var(--text-xl); border-radius: var(--radius-full); transition: all var(--duration-fast); text-decoration: none; } .cart-page .cart-table .product-remove a:hover, .cart-page .woocommerce-cart-form__contents .product-remove a:hover { color: var(--color-error); background: var(--color-error-light); } .cart-page .cart-table .product-thumbnail img, .cart-page .woocommerce-cart-form__contents .product-thumbnail img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--color-gray-100); background: var(--color-surface); } .cart-page .cart-table .product-name, .cart-page .woocommerce-cart-form__contents .product-name { font-size: var(--text-base); font-weight: 500; color: var(--color-gray-800); } .cart-page .cart-table .product-name a, .cart-page .woocommerce-cart-form__contents .product-name a { color: inherit; text-decoration: none; transition: color var(--duration-fast); } .cart-page .cart-table .product-name a:hover, .cart-page .woocommerce-cart-form__contents .product-name a:hover { color: var(--color-primary-500); } .cart-page .cart-table .product-price, .cart-page .cart-table .product-subtotal, .cart-page .woocommerce-cart-form__contents .product-price, .cart-page .woocommerce-cart-form__contents .product-subtotal { font-size: var(--text-base); font-weight: 600; color: var(--color-gray-800); } .cart-page .cart-table .product-quantity .qty, .cart-page .woocommerce-cart-form__contents .product-quantity .qty, .cart-page .woocommerce-cart-form__contents input.qty { width: 80px; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-gray-200); border-radius: var(--radius-md); text-align: center; font-size: var(--text-sm); font-weight: 500; color: var(--color-gray-700); transition: all var(--duration-fast); } .cart-page .cart-table .product-quantity .qty:focus, .cart-page .woocommerce-cart-form__contents .product-quantity .qty:focus, .cart-page .woocommerce-cart-form__contents input.qty:focus { border-color: var(--color-primary-400); box-shadow: 0 0 0 3px rgba(200, 138, 62, 0.12); outline: none; } /* ── Cart actions (coupon + update) ── */ /* v3.0.21: Added .page-cart selectors — body class is "page-cart" not "cart-page" */ .cart-page .cart-actions, .page-cart .cart-actions, .cart-page .cart-actions-left, .page-cart .cart-actions-left, .cart-page .cart-actions-right, .page-cart .cart-actions-right, .cart-page .coupon, .page-cart .coupon { display: flex; align-items: stretch; flex-wrap: wrap; gap: var(--space-3); } .cart-page .cart-actions, .page-cart .cart-actions { justify-content: space-between; margin-top: var(--space-10) !important; padding-top: var(--space-6); border-top: 1px solid var(--color-gray-100); } .cart-page .cart-actions-left, .page-cart .cart-actions-left, .cart-page .cart-actions-right, .page-cart .cart-actions-right { gap: var(--space-4); } .cart-page .coupon, .page-cart .coupon { align-items: stretch; } .cart-page .coupon .input-text, .cart-page .coupon input[type="text"], .cart-page .coupon input[type="text"].input-text, .woocommerce-cart-form .coupon .input-text, .woocommerce-cart-form .coupon input[type="text"] { width: 240px; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-gray-200); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 500; color: var(--color-gray-700); background: var(--color-white); transition: all var(--duration-fast); height: 48px; box-sizing: border-box; } .cart-page .coupon .input-text:focus, .cart-page .coupon input[type="text"]:focus, .woocommerce-cart-form .coupon .input-text:focus { border-color: var(--color-primary-400); box-shadow: 0 0 0 3px rgba(200, 138, 62, 0.12); outline: none; } .cart-page .coupon .input-text::placeholder, .cart-page .coupon input[type="text"]::placeholder { color: var(--color-gray-400); } /* Buttons: Apply Coupon, Update Cart, Proceed to Checkout, Return to Shop */ .cart-page .button, .cart-page .btn, .cart-page .btn-primary, .cart-page .coupon .button, .cart-page .coupon .button[name="apply_coupon"], .cart-page .actions .button, .cart-page .actions .button[name="update_cart"], .cart-page .wc-proceed-to-checkout .checkout-button, .cart-page .checkout-button, .cart-page .cart-collaterals .checkout-button, .cart-page .return-to-shop .button, .woocommerce-cart .wc-proceed-to-checkout .checkout-button, .woocommerce-cart .checkout-button, .cart-collaterals .checkout-button, .cart-collaterals .wc-proceed-to-checkout .checkout-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); min-height: 48px; border-radius: var(--radius-md); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: all var(--duration-fast) var(--ease-out-expo); box-shadow: var(--shadow-sm); box-sizing: border-box; } .cart-page .coupon .button[name="apply_coupon"], .cart-page .actions .button[name="update_cart"], .cart-page .button, .cart-page .btn-primary, .cart-page .checkout-button, .cart-collaterals .checkout-button, .woocommerce-cart .wc-proceed-to-checkout .checkout-button, .cart-page .return-to-shop .button { background: var(--color-primary-500); color: var(--color-white); border-color: var(--color-primary-500); } .cart-page .coupon .button[name="apply_coupon"]:hover, .cart-page .actions .button[name="update_cart"]:hover, .cart-page .button:hover:not(:disabled), .cart-page .btn-primary:hover:not(:disabled), .cart-page .checkout-button:hover:not(:disabled), .cart-collaterals .checkout-button:hover:not(:disabled), .woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover:not(:disabled), .cart-page .return-to-shop .button:hover:not(:disabled) { background: var(--color-primary-600); border-color: var(--color-primary-600); box-shadow: var(--shadow-md); transform: translateY(-1px); } .cart-page .button:disabled, .cart-page .button[disabled] { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; } /* Proceed to checkout should be full width and prominent */ .cart-page .wc-proceed-to-checkout .checkout-button, .cart-collaterals .wc-proceed-to-checkout .checkout-button, .cart-page .checkout-button { width: 100%; padding: var(--space-4) var(--space-6); min-height: 56px; font-size: var(--text-base); font-weight: 700; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } .cart-page .wc-proceed-to-checkout .checkout-button:hover, .cart-collaterals .wc-proceed-to-checkout .checkout-button:hover, .cart-page .checkout-button:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); } /* ── Cart totals ── */ .cart-page .cart-collaterals, .cart-page .cart-collaterals .cart_totals, .cart-collaterals .cart_totals { background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-card); } .cart-page .cart-collaterals .cart_totals h2, .cart-collaterals .cart_totals h2 { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700; color: var(--color-gray-800); margin: 0 0 var(--space-5); padding-bottom: var(--space-4); border-bottom: 2px solid var(--color-primary-50); } .cart-page .cart-collaterals .shop_table, .cart-collaterals .shop_table { width: 100%; border-collapse: collapse; } .cart-page .cart-collaterals .shop_table th, .cart-page .cart-collaterals .shop_table td, .cart-collaterals .shop_table th, .cart-collaterals .shop_table td { padding: var(--space-3) 0; font-size: var(--text-sm); border-bottom: 1px dashed var(--color-gray-100); } .cart-page .cart-collaterals .shop_table th, .cart-collaterals .shop_table th { text-align: left; font-weight: 500; color: var(--color-gray-500); } .cart-page .cart-collaterals .shop_table td, .cart-collaterals .shop_table td { text-align: right; font-weight: 600; color: var(--color-gray-700); } .cart-page .cart-collaterals .order-total th, .cart-page .cart-collaterals .order-total td, .cart-collaterals .order-total th, .cart-collaterals .order-total td { font-size: var(--text-lg); font-weight: 700; color: var(--color-gray-800); border-bottom: none; padding-top: var(--space-4); } .cart-page .cart-collaterals .order-total .amount, .cart-collaterals .order-total .amount { color: var(--color-primary-600); } .cart-page .cart-collaterals .wc-proceed-to-checkout, .cart-collaterals .wc-proceed-to-checkout { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--color-gray-100); } /* ── Empty cart ── */ .cart-page .cart-empty, .cart-page .wc-empty-cart-message, .cart-empty { text-align: center; padding: var(--space-12) var(--space-8); background: var(--color-white); border-radius: var(--radius-lg); border: 1px solid var(--color-gray-100); box-shadow: var(--shadow-card); } .cart-page .cart-empty p, .cart-empty p { color: var(--color-gray-500); font-size: var(--text-base); margin-bottom: var(--space-6); } .cart-page .return-to-shop .button, .return-to-shop .button { background: var(--color-primary-500); color: var(--color-white); border-color: var(--color-primary-500); padding: var(--space-3) var(--space-6); border-radius: var(--radius-md); font-weight: 600; } .cart-page .return-to-shop .button:hover, .return-to-shop .button:hover { background: var(--color-primary-600); border-color: var(--color-primary-600); } /* ── Checkout page ── */ .checkout-page .checkout-progress { margin-bottom: var(--space-8); padding: var(--space-6) 0; } .checkout-page .progress-step .step-number { width: 40px; height: 40px; border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: 700; background: var(--color-gray-100); color: var(--color-gray-400); transition: all var(--duration-fast); } .checkout-page .progress-step.completed .step-number, .checkout-page .progress-step.active .step-number { background: var(--color-primary-500); color: var(--color-white); box-shadow: 0 0 0 4px rgba(200, 138, 62, 0.15); } .checkout-page .progress-step.completed .step-label, .checkout-page .progress-step.active .step-label { color: var(--color-gray-800); font-weight: 600; } .checkout-page .progress-divider, .checkout-page .progress-divider.completed { background: var(--color-primary-200); } .checkout-page .progress-divider.completed { background: var(--color-primary-500); } .checkout-page .checkout-section { background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: var(--radius-lg); margin-bottom: var(--space-6); overflow: hidden; box-shadow: var(--shadow-card); } .checkout-page .checkout-section-header { padding: var(--space-5) var(--space-6); background: var(--color-primary-50); border-bottom: 1px solid var(--color-primary-100); } .checkout-page .checkout-section-header h3 { font-family: var(--font-heading); font-size: var(--text-base); font-weight: 700; color: var(--color-gray-800); } .checkout-page .checkout-section-body { padding: var(--space-6); } .checkout-page .woocommerce-checkout .form-row, .checkout-page .form-row { margin-bottom: var(--space-4); } .checkout-page .woocommerce-checkout .form-row label, .checkout-page .form-row label { display: block; margin-bottom: var(--space-1); font-size: var(--text-sm); font-weight: 500; color: var(--color-gray-600); } .checkout-page .woocommerce-checkout .form-row label .required, .checkout-page .form-row label .required { color: var(--color-error); } .checkout-page .woocommerce-checkout .input-text, .checkout-page .form-row .input-text, .checkout-page input[type="text"], .checkout-page input[type="email"], .checkout-page input[type="tel"], .checkout-page select, .checkout-page textarea { width: 100%; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-gray-200); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 500; color: var(--color-gray-700); background: var(--color-white); transition: all var(--duration-fast); box-sizing: border-box; } .checkout-page .woocommerce-checkout .input-text:focus, .checkout-page .form-row .input-text:focus, .checkout-page input:focus, .checkout-page select:focus, .checkout-page textarea:focus { border-color: var(--color-primary-400); box-shadow: 0 0 0 3px rgba(200, 138, 62, 0.12); outline: none; } .checkout-page select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%2364748B' d='M6 8l4 4 4-4'/%3E%3C/svg%3E"); background-position: right 12px center; background-repeat: no-repeat; background-size: 16px; padding-right: 40px; } .checkout-page textarea { min-height: 100px; resize: vertical; } .checkout-page .woocommerce-checkout-review-order-table thead th, .checkout-page .woocommerce-checkout-review-order-table tbody th, .checkout-page .woocommerce-checkout-review-order-table td { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-gray-50); } .checkout-page .woocommerce-checkout-review-order-table thead th { font-weight: 600; color: var(--color-gray-500); border-bottom: 2px solid var(--color-primary-100); } .checkout-page .woocommerce-checkout-review-order-table .order-total th, .checkout-page .woocommerce-checkout-review-order-table .order-total td { font-size: var(--text-lg); font-weight: 700; color: var(--color-gray-800); border-bottom: none; } .checkout-page .woocommerce-checkout-review-order-table .order-total .amount { color: var(--color-primary-600); } .checkout-page .woocommerce-checkout #payment, .checkout-page #payment { background: transparent; border-radius: 0; } .checkout-page .woocommerce-checkout #payment ul.payment_methods, .checkout-page #payment ul.payment_methods { border: 1px solid var(--color-gray-100); border-radius: var(--radius-md); padding: var(--space-4); background: var(--color-surface); } .checkout-page .woocommerce-checkout #payment ul.payment_methods li, .checkout-page #payment ul.payment_methods li { border-bottom: 1px solid var(--color-gray-100); padding: var(--space-3) 0; } .checkout-page .woocommerce-checkout #payment ul.payment_methods li label, .checkout-page #payment ul.payment_methods li label { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; font-size: var(--text-base); font-weight: 600; color: var(--color-gray-700); cursor: pointer; } .checkout-page .woocommerce-checkout #payment div.payment_box, .checkout-page #payment div.payment_box { background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: var(--radius-md); padding: var(--space-4); margin: var(--space-3) 0 var(--space-3) 32px; font-size: var(--text-sm); color: var(--color-gray-500); } .checkout-page .woocommerce-checkout #payment #place_order, .checkout-page #payment #place_order, .checkout-page .woocommerce-checkout #payment .button, .checkout-page #payment .button { display: block; width: 100%; padding: var(--space-4) var(--space-6); min-height: 56px; background: var(--color-primary-500); color: var(--color-white); border: 1px solid var(--color-primary-500); border-radius: var(--radius-lg); font-size: var(--text-base); font-weight: 700; cursor: pointer; transition: all var(--duration-fast) var(--ease-out-expo); box-shadow: var(--shadow-md); box-sizing: border-box; } .checkout-page .woocommerce-checkout #payment #place_order:hover, .checkout-page #payment #place_order:hover, .checkout-page .woocommerce-checkout #payment .button:hover, .checkout-page #payment .button:hover { background: var(--color-primary-600); border-color: var(--color-primary-600); box-shadow: var(--shadow-lg); transform: translateY(-2px); } .checkout-page .checkout-trust { background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: var(--radius-lg); padding: var(--space-6); margin-top: var(--space-6); box-shadow: var(--shadow-card); } .checkout-page .checkout-trust .trust-item { color: var(--color-gray-500); } .checkout-page .checkout-trust .trust-item svg { color: var(--color-success); } .checkout-page .checkout-trust .payment-icons { border-top: 1px solid var(--color-gray-100); } /* Mobile adjustments for cart/checkout */ @media (max-width: 768px) { .cart-page .cart-actions { flex-direction: column; align-items: stretch; } .cart-page .coupon .input-text, .cart-page .coupon input[type="text"], .woocommerce-cart-form .coupon .input-text { width: 100%; } .cart-page .cart-actions-left .coupon, .cart-page .coupon { flex-direction: column; } .cart-page .cart-actions-right { flex-direction: column; } .cart-page .button, .cart-page .checkout-button, .woocommerce-cart .wc-proceed-to-checkout .checkout-button { width: 100%; } .checkout-page .checkout-grid { grid-template-columns: 1fr; } .checkout-page .progress-divider { width: 2px; height: 16px; max-width: 2px; margin: 0; } .checkout-page .checkout-progress { flex-direction: column; gap: var(--space-2); } .checkout-page .woocommerce-checkout-review-order-table .order-total th, .checkout-page .woocommerce-checkout-review-order-table .order-total td { font-size: var(--text-base); } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 27. LOGIN PAGE — Auth card, form, social login ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* Page background and layout */ .page-login .site-main, .page-login .auth-page-wrapper, body.page-login .site-main { background: var(--color-surface); min-height: calc(100vh - var(--header-height) - var(--topbar-height)); } .page-login .auth-page-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--section-y) var(--section-x); } /* Header text above the card */ .page-login .auth-page-wrapper .auth-header { text-align: center; margin-bottom: var(--space-8); } .page-login .auth-page-wrapper h1, .page-login h1.entry-title, .page-login .auth-page-wrapper .auth-title { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 700; color: var(--color-gray-800); margin: 0 0 var(--space-3) 0; line-height: var(--leading-tight); } .page-login .auth-page-wrapper p, .page-login .auth-subtitle { font-size: var(--text-base); color: var(--color-gray-500); margin: 0; } /* Auth card */ .page-login .auth-form { width: 100%; max-width: 440px; background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: var(--radius-xl); padding: var(--space-8); box-shadow: var(--shadow-xl); } /* WooCommerce form override */ .page-login .woocommerce-form.woocommerce-form-login.login { border: none !important; background: transparent !important; padding: 0 !important; margin: 0 !important; } /* Form groups and labels */ .page-login .auth-form .form-group, .page-login .woocommerce-form .form-row { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); } .page-login .auth-form .form-group label, .page-login .woocommerce-form label { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 600; color: var(--color-gray-700); } .page-login .auth-form .form-group label .required, .page-login .woocommerce-form label .required { color: var(--color-error); } /* Inputs */ .page-login .auth-form .form-control, .page-login .woocommerce-form input[type="text"], .page-login .woocommerce-form input[type="password"], .page-login .woocommerce-form .input-text { width: 100%; padding: var(--space-3) var(--space-4); font-family: var(--font-body); font-size: var(--text-base); color: var(--color-gray-700); background: var(--color-white); border: 1.5px solid var(--color-gray-200); border-radius: var(--radius-md); transition: all var(--duration-fast) var(--ease-out-expo); min-height: 52px; } .page-login .auth-form .form-control::placeholder, .page-login .woocommerce-form input::placeholder { color: var(--color-gray-300); } .page-login .auth-form .form-control:focus, .page-login .woocommerce-form input[type="text"]:focus, .page-login .woocommerce-form input[type="password"]:focus, .page-login .woocommerce-form .input-text:focus { outline: none; border-color: var(--color-primary-500); box-shadow: 0 0 0 4px var(--color-primary-100); } /* Password input with toggle button */ .page-login .password-input-wrapper { position: relative; display: flex; align-items: center; } .page-login .password-input-wrapper .form-control, .page-login .password-input-wrapper input[type="password"] { padding-right: 48px; } .page-login .password-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; color: var(--color-gray-400); cursor: pointer; border-radius: var(--radius-md); transition: all var(--duration-fast); } .page-login .password-toggle:hover { color: var(--color-primary-600); background: var(--color-primary-50); } .page-login .password-toggle i.icon-eye::before { content: ''; display: inline-block; width: 20px; height: 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'%3E%3C/path%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; } /* Remember row */ .page-login .remember-row, .page-login .woocommerce-form .form-row.remember-row { display: flex; align-items: center; justify-content: space-between; flex-direction: row; gap: var(--space-4); margin-bottom: var(--space-6); } .page-login .checkbox-label { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-gray-600); cursor: pointer; } .page-login .checkbox-label input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--color-primary-500); cursor: pointer; } .page-login .forgot-password { font-size: var(--text-sm); font-weight: 600; color: var(--color-primary-600); text-decoration: none; transition: color var(--duration-fast); } .page-login .forgot-password:hover { color: var(--color-primary-500); text-decoration: underline; } /* Login button */ .page-login .auth-form .btn.btn-primary, .page-login .woocommerce-form button[type="submit"].btn-primary, .page-login .woocommerce-form button[name="login"] { width: 100%; min-height: 52px; padding: var(--space-3) var(--space-6); font-family: var(--font-heading); font-size: var(--text-base); font-weight: 600; color: var(--color-white); background: var(--color-primary-500); border: 2px solid var(--color-primary-500); border-radius: var(--radius-md); cursor: pointer; transition: all var(--duration-fast) var(--ease-out-expo); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); } .page-login .auth-form .btn.btn-primary:hover, .page-login .woocommerce-form button[type="submit"]:hover { background: var(--color-primary-600); border-color: var(--color-primary-600); transform: translateY(-1px); box-shadow: var(--shadow-md); } .page-login .auth-form .btn.btn-primary:focus-visible, .page-login .woocommerce-form button[type="submit"]:focus-visible { outline: 3px solid var(--color-primary-200); outline-offset: 2px; } /* Divider */ .page-login .auth-divider { display: flex; align-items: center; gap: var(--space-4); margin: var(--space-6) 0; color: var(--color-gray-400); font-size: var(--text-sm); } .page-login .auth-divider::before, .page-login .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--color-gray-200); } /* Social login */ .page-login .social-login { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-bottom: var(--space-6); } .page-login .social-login .btn.btn-outline, .page-login .social-login .social-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; padding: var(--space-2) var(--space-4); font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 600; color: var(--color-gray-700); background: var(--color-white); border: 1.5px solid var(--color-gray-200); border-radius: var(--radius-md); cursor: pointer; transition: all var(--duration-fast); } .page-login .social-login .btn.btn-outline:hover, .page-login .social-login .social-btn:hover { background: var(--color-gray-50); border-color: var(--color-gray-300); transform: translateY(-1px); } .page-login .social-login .social-btn i[class*="icon-"]::before { content: ''; display: inline-block; width: 20px; height: 20px; background-size: contain; background-repeat: no-repeat; background-position: center; vertical-align: middle; } .page-login .social-login .social-btn.google i.icon-google::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234285F4' d='M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z'/%3E%3Cpath fill='%2334A853' d='M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z'/%3E%3Cpath fill='%23FBBC05' d='M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z'/%3E%3Cpath fill='%23EA4335' d='M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z'/%3E%3C/svg%3E"); } .page-login .social-login .social-btn.facebook i.icon-facebook::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231877F2' d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'/%3E%3C/svg%3E"); } /* Auth footer / create account */ .page-login .auth-footer { text-align: center; font-size: var(--text-sm); color: var(--color-gray-500); margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--color-gray-100); } .page-login .auth-footer a { color: var(--color-primary-600); font-weight: 600; text-decoration: none; transition: color var(--duration-fast); } .page-login .auth-footer a:hover { color: var(--color-primary-500); text-decoration: underline; } /* WooCommerce notices on login page */ .page-login .woocommerce-notices-wrapper .woocommerce-message, .page-login .woocommerce-notices-wrapper .woocommerce-error, .page-login .woocommerce-notices-wrapper .woocommerce-info { max-width: 440px; margin: 0 auto var(--space-6) auto; border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); font-size: var(--text-sm); } .page-login .woocommerce-notices-wrapper .woocommerce-message { background: var(--color-success-light); color: #065F46; border: 1px solid var(--color-success); } .page-login .woocommerce-notices-wrapper .woocommerce-error { background: var(--color-error-light); color: #991B1B; border: 1px solid var(--color-error); } /* Mobile adjustments */ @media (max-width: 640px) { .page-login .auth-form { padding: var(--space-6) var(--space-5); max-width: 100%; } .page-login .social-login { grid-template-columns: 1fr; } .page-login .remember-row { flex-direction: column; align-items: flex-start; gap: var(--space-3); } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 28. 404 PAGE — FULL-SCREEN CENTERED ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .error404 .site-content { display: flex; flex-direction: column; min-height: calc(100vh - var(--header-height) - var(--topbar-height)); padding: 0; background: var(--color-surface); } .error404 .site-main { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: var(--space-12) var(--space-6); } .error404 .site-main > .container { width: 100%; max-width: 680px; text-align: center; } .error404 .error-404 { background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: var(--radius-2xl); padding: clamp(2.5rem, 6vw, 4rem); box-shadow: var(--shadow-xl); } .error404 .error-title { font-family: var(--font-heading); font-size: clamp(6rem, 15vw, 10rem); font-weight: 700; line-height: 1; color: var(--color-primary-500); margin: 0 0 var(--space-4); letter-spacing: var(--tracking-tight); text-shadow: 0 12px 40px rgba(200, 138, 62, 0.22); } .error404 .error-subtitle { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 600; color: var(--color-gray-800); margin: 0 0 var(--space-4); } .error404 .error-description { font-size: var(--text-lg); color: var(--color-gray-500); line-height: var(--leading-normal); margin: 0 auto var(--space-8); max-width: 480px; } .error404 .error-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); margin-bottom: var(--space-8); } .error404 .error-actions .btn, .error404 .error-actions .button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 52px; padding: var(--space-3) var(--space-8); border-radius: var(--radius-md); font-family: var(--font-heading); font-size: var(--text-base); font-weight: 600; text-decoration: none; transition: all var(--duration-fast) var(--ease-out-expo); cursor: pointer; border: 2px solid transparent; } .error404 .error-actions .btn-primary, .error404 .error-actions .button { color: var(--color-white); background: var(--color-primary-500); border-color: var(--color-primary-500); box-shadow: var(--shadow-md); } .error404 .error-actions .btn-primary:hover, .error404 .error-actions .button:hover { background: var(--color-primary-600); border-color: var(--color-primary-600); transform: translateY(-2px); box-shadow: var(--shadow-lg); } .error404 .error-actions .btn-outline { color: var(--color-gray-700); background: var(--color-white); border-color: var(--color-gray-200); } .error404 .error-actions .btn-outline:hover { color: var(--color-primary-600); border-color: var(--color-primary-500); background: var(--color-primary-50); transform: translateY(-2px); } .error404 .error-search { margin: 0 auto; max-width: 420px; } .error404 .error-search > p { font-size: var(--text-sm); color: var(--color-gray-400); margin-bottom: var(--space-3); } .error404 .search-form { position: relative; display: flex; align-items: center; } .error404 .search-field { width: 100%; height: 52px; padding: var(--space-3) var(--space-5); padding-right: 52px; font-family: var(--font-body); font-size: var(--text-base); color: var(--color-gray-700); background: var(--color-white); border: 1.5px solid var(--color-gray-200); border-radius: var(--radius-full); transition: all var(--duration-fast); box-shadow: var(--shadow-sm); } .error404 .search-field:focus { outline: none; border-color: var(--color-primary-500); box-shadow: 0 0 0 4px var(--color-primary-100); } .error404 .search-submit { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--color-primary-500); color: var(--color-white); border: none; border-radius: var(--radius-full); cursor: pointer; transition: all var(--duration-fast); } .error404 .search-submit:hover { background: var(--color-primary-600); transform: translateY(-50%) scale(1.05); } .error404 .search-submit i.icon-search::before { content: ''; display: inline-block; width: 18px; height: 18px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; vertical-align: middle; } /* Hide theme newsletter/footer widgets on 404 page to keep it clean & full-screen */ .error404 .newsletter-section, .error404 .footer-widgets, .error404 .site-footer { display: none !important; } /* Keep our injected v3 footer visible */ .error404 footer.footer[role="contentinfo"] { display: block !important; } /* Mobile 404 adjustments */ @media (max-width: 640px) { .error404 .error-404 { padding: var(--space-8) var(--space-5); border-radius: var(--radius-xl); } .error404 .error-actions { flex-direction: column; align-items: stretch; } .error404 .error-actions .btn, .error404 .error-actions .button { width: 100%; } .error404 .site-main { padding: var(--space-8) var(--space-4); } }