/*
Theme Name: MODSHOP
Theme URI: https://modshop.com
Author: MODSHOP Team
Author URI: https://modshop.com
Description: A modern e-commerce WordPress theme for fashion and accessories
Version: 2.2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: modshop
Tags: e-commerce, woocommerce, responsive, modern
This theme, like WordPress, is licensed under the GPL.
*/
/* ========================================
⚠️ NOTE: Checkout-specific styles are in:
/assets/css/checkout.css
This prevents CSS conflicts and ensures
checkout.css overrides independently.
======================================== */
/* ========================================
🎨 CSS Variables & Reset
======================================== */
:root {
/* 🎨 XITAKE BRAND PALETTE */
--bronze: #D7883E;
--orange: #FDB147;
--white: #FFFFFF;
--deep-mocha: #54372C;
--black: #000000;

/* 🗺️ SEMANTIC MAPPING */
--primary-color: var(--deep-mocha);
--secondary-color: #8C7365; /* Lighter Mocha for secondary text */
--accent-color: var(--bronze);
--accent-hover: var(--deep-mocha); /* Darker hover for contrast */
--background-color: var(--white);
--light-gray: #FDFBF9; /* Warm white tint */
--border-color: #E8E0DB; /* Warm border */
--success-color: #27ae60;
--font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--spacing-xs: 0.5rem;
--spacing-sm: 1rem;
--spacing-md: 1.5rem;
--spacing-lg: 2rem;
--spacing-xl: 3rem;

/* modified */
--spacingx-sm: 0.25rem;     
--spacingx-md: 0.75rem;    
}
/* ✅ FIXED: Only reset box-sizing, NOT margins/padding */
*,
*::before,
*::after {
box-sizing: border-box !important;
}
/* Reset HTML elements only (not everything) */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption, footer,
header, hgroup, menu, nav, output, ruby, section,
summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
html {
font-size: 16px !important;
scroll-behavior: smooth !important;
}
body {
font-family: var(--font-primary) !important;
color: var(--primary-color) !important;
background-color: var(--background-color) !important;
line-height: 1.6 !important;
overflow-x: hidden !important;
}
/* ========================================
🌍 Global Container
======================================== */
.container {
width: 100% !important;
max-width: 1400px !important;
margin: 0 auto !important;
padding: 0 2rem !important;
box-sizing: border-box !important;
}
/* Ensure sections have proper spacing */
.hero-section,
.features-section,
.featured-products,
.sale-products,
.categories-section,
.newsletter-section {
padding: var(--spacing-xl) 0 !important;
width: 100% !important;
}
/* ========================================
📱 Header & Navigation
======================================== */
.site-header {
background: var(--background-color) !important;
border-bottom: 1px solid var(--border-color) !important;
position: sticky !important;
top: 0 !important;
z-index: 1000 !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
.header-container {
max-width: 1400px !important;
margin: 0 auto !important;
padding: var(--spacing-sm) var(--spacing-md) !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 1rem !important;
}
.site-branding {
display: flex !important;
align-items: center !important;
}
.site-logo,
.custom-logo-link {
font-size: 0 !important;
font-weight: 700 !important;
text-decoration: none !important;
color: var(--primary-color) !important;
display: inline-block !important;
}
.site-logo span {
color: var(--accent-color) !important;
}
.custom-logo {
height: auto !important;
max-height: 50px !important;
width: auto !important;
}
/* Desktop Navigation - hidden, replaced by header search */
.main-navigation {
display: none !important;
}
/* ========================================
🔍 Header Inline Search Bar
======================================== */
.header-search {
flex: 1 !important;
max-width: 600px !important;
margin: 0 var(--spacing-md) !important;
}
.header-search-form {
display: flex !important;
align-items: center !important;
background: var(--light-gray) !important;
border: 1px solid var(--border-color) !important;
border-radius: 50px !important;
padding: 0.5rem 1rem !important;
gap: 0.5rem !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.header-search-form:focus-within {
border-color: var(--primary-color) !important;
box-shadow: 0 0 0 3px rgba(84, 55, 44, 0.08) !important; /* Mocha shadow */
background: var(--background-color) !important;
}
.header-search-icon {
flex-shrink: 0 !important;
color: #8C7365 !important; /* Lighter Mocha */
}
.header-search-field {
flex: 1 !important;
border: none !important;
background: transparent !important;
outline: none !important;
font-size: 0.95rem !important;
color: var(--primary-color) !important;
font-family: inherit !important;
padding: 0 !important;
box-shadow: none !important;
min-width: 0 !important;
}
.header-search-field::placeholder {
color: #aaa !important;
}
/* ========================================
🔍 Header Actions
======================================== */
.header-actions {
display: flex !important;
align-items: center !important;
gap: var(--spacing-md) !important;
}
.search-toggle {
display: none !important;
}
.mobile-menu-toggle {
background: none !important;
border: none !important;
cursor: pointer !important;
padding: 0.5rem !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: var(--primary-color) !important;
transition: color 0.3s ease !important;
}
.search-toggle:hover,
.mobile-menu-toggle:hover {
color: var(--accent-color) !important;
}
.account-link,
.wishlist-link,
.cart-icon {
text-decoration: none !important;
color: var(--primary-color) !important;
display: flex !important;
align-items: center !important;
gap: 0.25rem !important;
position: relative !important;
transition: color 0.3s ease !important;
}
.account-link:hover,
.wishlist-link:hover,
.cart-icon:hover {
color: var(--accent-color) !important;
}
.account-text {
display: none !important;
}
@media (min-width: 1024px) {
.account-text {
display: inline !important;
}
}
.cart-count {
position: absolute !important;
top: -8px !important;
right: -8px !important;
background: var(--accent-color) !important;
color: var(--white) !important;
font-size: 0.75rem !important;
min-width: 20px !important;
height: 20px !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-weight: 600 !important;
padding: 0 0.25rem !important;
}
/* ========================================
🔎 Search Overlay
======================================== */
.search-overlay {
display: none !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background: rgba(0, 0, 0, 0.9) !important;
z-index: 9999 !important;
align-items: center !important;
justify-content: center !important;
opacity: 0 !important;
transition: opacity 0.3s ease !important;
}
.search-overlay.active {
display: flex !important;
opacity: 1 !important;
}
.search-overlay .search-form {
display: flex !important;
gap: 1rem !important;
max-width: 600px !important;
width: 90% !important;
}
.search-overlay .search-field {
flex: 1 !important;
padding: 1rem !important;
font-size: 1.25rem !important;
border: none !important;
border-radius: 4px !important;
font-family: var(--font-primary) !important;
}
.search-overlay .search-submit {
padding: 1rem 2rem !important;
background: var(--accent-color) !important;
color: var(--white) !important;
border: none !important;
border-radius: 4px !important;
cursor: pointer !important;
font-weight: 600 !important;
font-family: var(--font-primary) !important;
transition: background 0.3s ease !important;
}
.search-overlay .search-submit:hover {
background: var(--deep-mocha) !important;
}
.search-close {
position: absolute !important;
top: 2rem !important;
right: 2rem !important;
background: none !important;
border: none !important;
color: var(--white) !important;
font-size: 2rem !important;
cursor: pointer !important;
padding: 0.5rem !important;
line-height: 1 !important;
transition: color 0.3s ease !important;
}
.search-close:hover {
color: var(--accent-color) !important;
}
/* ========================================
📱 Mobile Menu
======================================== */
.mobile-menu-toggle {
display: none !important;
}
.mobile-menu {
display: none !important;
position: fixed !important;
top: 70px !important;
left: 0 !important;
width: 100% !important;
max-width: 300px !important;
height: calc(100vh - 70px) !important;
background: var(--background-color) !important;
border-right: 1px solid var(--border-color) !important;
padding: var(--spacing-lg) !important;
z-index: 999 !important;
overflow-y: auto !important;
box-shadow: 2px 0 20px rgba(0, 0, 0, 0.1) !important;
transform: translateX(-100%) !important;
transition: transform 0.3s ease !important;
}
.mobile-menu.active {
display: block !important;
transform: translateX(0) !important;
}
.mobile-menu-overlay {
display: none !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background: rgba(0, 0, 0, 0.5) !important;
z-index: 998 !important;
opacity: 0 !important;
transition: opacity 0.3s ease !important;
}
.mobile-menu-overlay.active {
display: block !important;
opacity: 1 !important;
}
.mobile-menu-close {
position: absolute !important;
top: var(--spacing-md) !important;
right: var(--spacing-md) !important;
background: none !important;
border: none !important;
font-size: 2rem !important;
color: var(--primary-color) !important;
cursor: pointer !important;
padding: 0.5rem !important;
line-height: 1 !important;
}
.mobile-menu-close:hover {
color: var(--accent-color) !important;
}
.mobile-menu-header {
margin-bottom: var(--spacing-lg) !important;
padding-bottom: var(--spacing-md) !important;
border-bottom: 1px solid var(--border-color) !important;
}
.mobile-menu-title {
font-size: 1.25rem !important;
font-weight: 700 !important;
color: var(--primary-color) !important;
margin: 0 !important;
}
.mobile-menu-list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.mobile-menu-list li {
margin: 0 !important;
border-bottom: 1px solid var(--border-color) !important;
}
.mobile-menu-list a {
display: block !important;
padding: var(--spacing-md) 0 !important;
text-decoration: none !important;
color: var(--primary-color) !important;
font-weight: 500 !important;
font-size: 1rem !important;
transition: color 0.3s ease, padding-left 0.3s ease !important;
}
.mobile-menu-list a:hover {
color: var(--accent-color) !important;
padding-left: 10px !important;
}
.mobile-menu-footer {
margin-top: var(--spacing-lg) !important;
padding-top: var(--spacing-md) !important;
border-top: 1px solid var(--border-color) !important;
}
.mobile-menu-link {
display: flex !important;
align-items: center !important;
gap: 0.5rem !important;
padding: var(--spacing-sm) 0 !important;
text-decoration: none !important;
color: var(--primary-color) !important;
font-weight: 500 !important;
}
.mobile-cart-count {
background: var(--accent-color) !important;
color: var(--white) !important;
font-size: 0.75rem !important;
padding: 0.25rem 0.5rem !important;
border-radius: 4px !important;
margin-left: auto !important;
}
.mobile-menu-list .sub-menu {
display: none !important;
list-style: none !important;
padding-left: var(--spacing-md) !important;
margin: 0 !important;
background: var(--light-gray) !important;
border-radius: 4px !important;
margin-top: var(--spacing-xs) !important;
}
.mobile-menu-list .sub-menu.active {
display: block !important;
}
.mobile-menu-list .sub-menu a {
font-size: 0.9rem !important;
color: var(--secondary-color) !important;
padding: var(--spacing-sm) 0 !important;
}
@media (max-width: 768px) {
.mobile-menu-toggle {
display: flex !important;
}
.main-navigation {
display: none !important;
}
}
/* ========================================
📄 Main Content Area
======================================== */
.site-main {
min-height: 60vh !important;
width: 100% !important;
}
/* ========================================
🎯 Hero Section
======================================== */
.hero-section {
padding: 4rem 0 !important;
background: var(--light-gray) !important;
width: 100% !important;
}
.hero-container {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: var(--spacing-xl) !important;
align-items: center !important;
}
.hero-content {
text-align: left !important;
}
.hero-badge {
display: inline-block !important;
background: var(--accent-color) !important;
color: var(--deep-mocha) !important; /* Dark text for contrast on Bronze */
padding: 0.5rem 1rem !important;
font-size: 0.875rem !important;
border-radius: 4px !important;
margin-bottom: var(--spacing-sm) !important;
text-transform: uppercase !important;
font-weight: 600 !important;
}
.hero-title {
font-size: 3rem !important;
font-weight: 700 !important;
margin: var(--spacing-sm) 0 !important;
color: var(--primary-color) !important;
line-height: 1.2 !important;
}
.hero-subtitle {
font-size: 1.25rem !important;
color: var(--secondary-color) !important;
margin-bottom: var(--spacing-md) !important;
}
.hero-btn {
display: inline-block !important;
padding: 1rem 2rem !important;
background: var(--primary-color) !important;
color: var(--white) !important;
text-decoration: none !important;
border-radius: 4px !important;
font-weight: 600 !important;
transition: background 0.3s ease !important;
}
.hero-btn:hover {
background: var(--accent-color) !important;
color: var(--deep-mocha) !important; /* Dark text for contrast on Bronze */
}
.hero-image {
width: 100% !important;
border-radius: 8px !important;
overflow: hidden !important;
}
.hero-image img {
width: 100% !important;
height: auto !important;
display: block !important;
object-fit: cover !important;
}
/* ========================================
✨ Features Section
======================================== */
.features-section {
padding: var(--spacing-xl) 0 !important;
}
.features-container {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: var(--spacing-lg) !important;
}
.feature-item {
text-align: center !important;
padding: var(--spacing-md) !important;
}
.feature-item svg {
margin: 0 auto var(--spacing-sm) !important;
color: var(--primary-color) !important;
}
.feature-item h3 {
font-size: 1.125rem !important;
font-weight: 600 !important;
margin-bottom: var(--spacing-xs) !important;
}
.feature-item p {
color: var(--secondary-color) !important;
font-size: 0.875rem !important;
}
/* ========================================
🛍️ Product Sections
======================================== */
.featured-products,
.sale-products {
padding: var(--spacing-xl) 0 !important;
}
.sale-products {
background: var(--light-gray) !important;
}
.section-header {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
margin-bottom: var(--spacing-lg) !important;
flex-wrap: wrap !important;
gap: 1rem !important;
}
.section-title {
font-size: 2rem !important;
font-weight: 700 !important;
color: var(--primary-color) !important;
margin: 0 !important;
}
.view-all-link,
.view-all-btn {
color: var(--accent-color) !important;
text-decoration: none !important;
font-weight: 600 !important;
transition: color 0.3s ease !important;
}
.view-all-link:hover,
.view-all-btn:hover {
color: var(--primary-color) !important;
}
.section-footer {
text-align: center !important;
margin-top: var(--spacing-lg) !important;
}
.product-grid-wrapper {
width: 100% !important;
}
/* ========================================
📦 WooCommerce Product Grid
======================================== */
.woocommerce ul.products,
ul.products.product-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: var(--spacing-md) !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
}
.woocommerce ul.products li.product,
.product-grid .product-item {
width: 100% !important;
float: none !important;
clear: none !important;
margin: 0 !important;
padding: 0 !important;
border: 1px solid var(--border-color) !important;
border-radius: 8px !important;
overflow: hidden !important;
transition: transform 0.3s ease, box-shadow 0.3s ease !important;
background: var(--background-color) !important;
box-sizing: border-box !important;
display: block !important;
position: relative !important;
}
.woocommerce ul.products li.product.clear,
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last {
clear: none !important;
float: none !important;
margin-left: 0 !important;
}
.woocommerce ul.products li.product:nth-child(4n+1) {
clear: none !important;
margin-left: 0 !important;
}
.woocommerce ul.products li.product:hover {
transform: translateY(-5px) !important;
box-shadow: 0 10px 30px rgba(84, 55, 44, 0.1) !important; /* Mocha shadow */
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
.product-inner {
padding: 0 !important;
text-decoration: none !important;
display: block !important;
width: 100% !important;
}
.woocommerce ul.products li.product img,
.product-image img {
width: 100% !important;
height: auto !important;
display: block !important;
aspect-ratio: 1 / 1 !important;
object-fit: cover !important;
margin: 0 !important;
padding: 0 !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.product-title {
font-size: 0.95rem !important;
font-weight: 600 !important;
margin: var(--spacing-sm) !important;
color: var(--primary-color) !important;
line-height: 1.4 !important;
padding: 0 0.5rem !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title a,
.product-title a {
text-decoration: none !important;
color: var(--primary-color) !important;
}
.woocommerce ul.products li.product .price,
.product-price {
color: var(--accent-color) !important;
font-weight: 700 !important;
margin: 0 var(--spacing-sm) var(--spacing-sm) !important;
display: block !important;
font-size: 1rem !important;
padding: 0 0.5rem !important;
}
.woocommerce ul.products li.product .price del,
.product-price del {
color: var(--secondary-color) !important;
font-weight: 400 !important;
margin-right: 0.5rem !important;
font-size: 0.85rem !important;
}
.woocommerce ul.products li.product .price ins,
.product-price ins {
text-decoration: none !important;
}
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button,
.product-action .button,
.add-to-cart-btn {
background: var(--primary-color) !important;
color: var(--white) !important;
border: none !important;
border-radius: 4px !important;
padding: 0.65rem 1.25rem !important;
margin: 0 var(--spacing-sm) var(--spacing-sm) !important;
cursor: pointer !important;
text-decoration: none !important;
display: inline-block !important;
font-weight: 600 !important;
transition: background 0.3s ease !important;
width: calc(100% - 2rem) !important;
text-align: center !important;
font-size: 0.9rem !important;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover,
.product-action .button:hover,
.add-to-cart-btn:hover {
background: var(--accent-color) !important;
color: var(--deep-mocha) !important; /* Dark text for contrast on Bronze */
}
.woocommerce ul.products li.product .onsale,
.sale-badge {
position: absolute !important;
top: 10px !important;
left: 10px !important;
background: var(--accent-color) !important;
color: var(--deep-mocha) !important; /* Dark text for contrast on Bronze */
padding: 0.25rem 0.75rem !important;
font-size: 0.75rem !important;
border-radius: 4px !important;
text-transform: uppercase !important;
font-weight: 600 !important;
z-index: 10 !important;
}
.woocommerce ul.products li.product .star-rating {
margin: 0 var(--spacing-sm) !important;
color: var(--orange) !important;
padding: 0 0.5rem !important;
}
/* ========================================
📂 Categories Section
======================================== */
.categories-section {
padding: var(--spacing-xl) 0 !important;
}
.categories-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: var(--spacing-lg) !important;
margin-top: var(--spacing-lg) !important;
}
.category-card,
.category-item {
text-decoration: none !important;
color: var(--primary-color) !important;
border: 1px solid var(--border-color) !important;
border-radius: 8px !important;
overflow: hidden !important;
transition: transform 0.3s ease !important;
display: block !important;
}
.category-card:hover,
.category-item:hover {
transform: translateY(-5px) !important;
}
.category-image {
width: 100% !important;
padding-top: 75% !important;
position: relative !important;
}
.category-image img {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.category-info,
.category-content {
padding: var(--spacing-md) !important;
text-align: center !important;
}
.category-info h3,
.category-content h3 {
margin: 0 !important;
font-size: 1.125rem !important;
font-weight: 600 !important;
}
.category-count {
color: var(--secondary-color) !important;
font-size: 0.875rem !important;
}
/* ========================================
📧 Newsletter Section
======================================== */
.newsletter-section {
padding: var(--spacing-xl) 0 !important;
background: var(--primary-color) !important; /* Deep Mocha */
color: var(--white) !important;
text-align: center !important;
}
.newsletter-container {
max-width: 600px !important;
margin: 0 auto !important;
}
.newsletter-section h2 {
font-size: 2rem !important;
margin-bottom: var(--spacing-sm) !important;
}
.newsletter-section p {
margin-bottom: var(--spacing-md) !important;
opacity: 0.9 !important;
}
.newsletter-form {
display: flex !important;
gap: var(--spacing-sm) !important;
justify-content: center !important;
flex-wrap: wrap !important;
}
.newsletter-form input {
padding: 1rem !important;
border: none !important;
border-radius: 4px !important;
min-width: 300px !important;
font-family: var(--font-primary) !important;
}
.newsletter-btn {
padding: 1rem 2rem !important;
background: var(--accent-color) !important;
color: var(--deep-mocha) !important; /* Dark text for contrast on Bronze */
border: none !important;
border-radius: 4px !important;
cursor: pointer !important;
font-weight: 600 !important;
transition: background 0.3s ease !important;
}
.newsletter-btn:hover {
background: var(--white) !important;
color: var(--deep-mocha) !important;
}
/* ========================================
🦶 Footer
======================================== */
.site-footer {
background: var(--light-gray) !important;
padding: var(--spacing-xl) 0 !important;
margin-top: var(--spacing-xl) !important;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.footer-container {
max-width: 1400px !important;
margin: 0 auto !important;
padding: 0 2rem !important;
}
.footer-widgets {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: var(--spacing-xl) !important;
margin-bottom: var(--spacing-lg) !important;
}
.footer-widget-area {
padding: 0 !important;
}
.footer-widget {
padding: 0 !important;
}
.footer-widget-title {
font-size: 1.125rem !important;
font-weight: 600 !important;
margin-bottom: var(--spacing-md) !important;
color: var(--primary-color) !important;
}
.footer-widget ul {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.footer-widget li {
margin-bottom: var(--spacing-xs) !important;
}
.footer-widget a {
color: var(--secondary-color) !important;
text-decoration: none !important;
transition: color 0.3s ease !important;
}
.footer-widget a:hover {
color: var(--accent-color) !important;
}
.footer-bottom {
border-top: 1px solid var(--border-color) !important;
padding-top: var(--spacing-lg) !important;
text-align: center !important;
}
.footer-bottom-content {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: var(--spacing-sm) !important;
}
.copyright {
color: var(--secondary-color) !important;
font-size: 0.875rem !important;
}
/* ========================================
🔧 Utility Classes
======================================== */
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-left { text-align: left !important; }
.mt-1 { margin-top: var(--spacing-sm) !important; }
.mt-2 { margin-top: var(--spacing-md) !important; }
.mt-3 { margin-top: var(--spacing-lg) !important; }
.mb-1 { margin-bottom: var(--spacing-sm) !important; }
.mb-2 { margin-bottom: var(--spacing-md) !important; }
.mb-3 { margin-bottom: var(--spacing-lg) !important; }
.hidden { display: none !important; }
.visible { display: block !important; }
/* ========================================
🛒 WooCommerce Global Overrides
======================================== */
.woocommerce-page .entry-title {
display: none !important;
}
.woocommerce-breadcrumb {
display: none !important;
}
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
background-color: var(--primary-color) !important;
color: var(--white) !important;
border-radius: 4px !important;
padding: 0.75rem 1.5rem !important;
border: none !important;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
background-color: var(--accent-color) !important;
color: var(--deep-mocha) !important; /* Dark text for contrast on Bronze */
}
/* ========================================
⚠️ WooCommerce Notices (Global)
======================================== */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
padding: var(--spacing-md) var(--spacing-lg) !important;
margin: 0 auto var(--spacing-lg) auto !important;
border-radius: 6px !important;
border-left: 4px solid var(--accent-color) !important;
background: var(--background-color) !important;
font-size: 0.95rem !important;
max-width: 1400px !important;
}
.woocommerce-message {
border-left-color: var(--success-color) !important;
}
.woocommerce-error {
border-left-color: var(--deep-mocha) !important; /* Mocha instead of red */
}
.woocommerce-message a,
.woocommerce-error a,
.woocommerce-info a {
color: var(--accent-color) !important;
text-decoration: none !important;
font-weight: 500 !important;
}
.woocommerce-message a:hover,
.woocommerce-error a:hover,
.woocommerce-info a:hover {
text-decoration: underline !important;
}
/* ========================================
📱 Responsive Breakpoints
======================================== */
@media (max-width: 1024px) {
.hero-container {
grid-template-columns: 1fr !important;
text-align: center !important;
}
.hero-content {
text-align: center !important;
}
.features-container {
grid-template-columns: repeat(2, 1fr) !important;
}
.woocommerce ul.products,
ul.products.product-grid {
grid-template-columns: repeat(3, 1fr) !important;
}
.categories-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
.footer-widgets {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 768px) {
.header-container {
flex-direction: column !important;
gap: var(--spacing-sm) !important;
}
.main-navigation {
display: none !important;
}
.mobile-menu-toggle {
display: flex !important;
}
.hero-title {
font-size: 2rem !important;
}
.features-container {
grid-template-columns: 1fr !important;
}
.woocommerce ul.products,
ul.products.product-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
.categories-grid {
grid-template-columns: 1fr !important;
}
.footer-widgets {
grid-template-columns: 1fr !important;
}
.newsletter-form {
flex-direction: column !important;
align-items: center !important;
}
.newsletter-form input {
min-width: 100% !important;
}
.section-header {
flex-direction: column !important;
align-items: flex-start !important;
}
}
@media (max-width: 480px) {
.woocommerce ul.products,
ul.products.product-grid {
grid-template-columns: 1fr !important;
}
.hero-title {
font-size: 1.5rem !important;
}
.section-title {
font-size: 1.5rem !important;
}
}
/* ========================================
⏳ Loading States & Animations
======================================== */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.site-header,
.hero-section,
.features-section,
.featured-products,
.sale-products,
.categories-section,
.newsletter-section,
.site-footer {
animation: fadeIn 0.5s ease !important;
}
/* ========================================
🖨️ Print Styles
======================================== */
@media print {
.site-header,
.site-footer,
.newsletter-section,
.header-actions {
display: none !important;
}
body {
font-size: 12pt !important;
color: var(--black) !important;
background: var(--white) !important;
}
}
/* ========================================
🔧 RELATED PRODUCTS GRID FIX
The section.related sits inside div.product (a 2-col grid).
Although grid-column:1/-1 makes the section full-width,
the ul.products inside picks up the 3-col override from the
1024px breakpoint. Force it back to 4 cols at all sizes.
======================================== */
.woocommerce div.product .related.products ul.products,
.woocommerce div.product .upsells.products ul.products {
grid-template-columns: repeat(4, 1fr) !important;
}
@media (max-width: 768px) {
.woocommerce div.product .related.products ul.products,
.woocommerce div.product .upsells.products ul.products {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 480px) {
.woocommerce div.product .related.products ul.products,
.woocommerce div.product .upsells.products ul.products {
grid-template-columns: 1fr !important;
}
}
/* ========================================
📱 HEADER SEARCH - RESPONSIVE
======================================== */
@media (max-width: 768px) {
.header-search {
order: 3 !important;
max-width: 100% !important;
width: 100% !important;
margin: 0 !important;
padding: 0 0 var(--spacing-sm) 0 !important;
}
.header-container {
flex-wrap: wrap !important;
}
}
/* ========================================
🔍 SEARCH RESULTS PAGE
======================================== */
.search-results-wrapper {
max-width: 1400px !important;
margin: 0 auto !important;
padding: var(--spacing-xl) 2rem !important;
box-sizing: border-box !important;
}
.search-results-header {
margin-bottom: var(--spacing-xl) !important;
padding-bottom: var(--spacing-md) !important;
border-bottom: 2px solid var(--border-color) !important;
}
.search-results-title {
font-size: 1.75rem !important;
font-weight: 700 !important;
color: var(--primary-color) !important;
margin: 0 0 0.5rem 0 !important;
}
.search-results-title span {
color: var(--accent-color) !important;
}
.search-results-count {
color: #888 !important;
font-size: 0.95rem !important;
margin: 0 !important;
}
ul.search-products {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: var(--spacing-md) !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.no-results {
text-align: center !important;
padding: var(--spacing-xl) 0 !important;
}
.no-results p {
font-size: 1.1rem !important;
color: #666 !important;
margin-bottom: var(--spacing-lg) !important;
}
.no-results .search-form {
display: flex !important;
justify-content: center !important;
gap: 0.5rem !important;
max-width: 500px !important;
margin: 0 auto !important;
}
.no-results .search-field {
flex: 1 !important;
padding: 0.75rem 1rem !important;
border: 1px solid var(--border-color) !important;
border-radius: 4px !important;
font-size: 1rem !important;
}
.no-results .search-submit {
padding: 0.75rem 1.5rem !important;
background: var(--primary-color) !important;
color: var(--white) !important;
border: none !important;
border-radius: 4px !important;
cursor: pointer !important;
font-size: 1rem !important;
}
@media (max-width: 1024px) {
ul.search-products {
grid-template-columns: repeat(3, 1fr) !important;
}
}
@media (max-width: 768px) {
.search-results-wrapper {
padding: var(--spacing-lg) 1rem !important;
}
ul.search-products {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 480px) {
ul.search-products {
grid-template-columns: 1fr !important;
}
}