/* ══════════════════════════════════════════════════════════════ 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 { 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-primary { background: var(--color-white); color: var(--color-primary-700); font-weight: 600; } .cta-buttons .btn-primary:hover { background: var(--color-primary-50); 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.4); } .cta-buttons .btn-outline-light:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.7); } /* 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 { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; } .product-add-to-cart .quantity, .quantity { display: 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); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 24. SMALL MOBILE ADJUSTMENTS (<480px) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ @media (max-width: 479px) { .carousel-slide { padding: var(--space-8) 0; } .slide-title { font-size: var(--text-2xl); } .slide-subtitle { font-size: var(--text-sm); } .slide-buttons { flex-direction: column; } .slide-buttons .btn { width: 100%; } .categories-grid { grid-template-columns: repeat(2, 1fr); } .products-grid { grid-template-columns: repeat(2, 1fr); } .news-grid { grid-template-columns: 1fr; } .promotions-grid { grid-template-columns: 1fr; } .shop-layout { grid-template-columns: 1fr; } }