/* ========================================
MODSHOP - WooCommerce Complete Styles
File: assets/css/woocommerce.css
Version: 2.2.0
Focus: Cart + Account + Global WooCommerce
Note: Checkout styles moved to checkout.css
======================================== */
/* ========================================
📄 WOOCOMMERCE PAGE CONTAINERS
======================================== */
.woocommerce-cart .woocommerce,
.woocommerce-account .woocommerce,
.woocommerce-page .woocommerce {
padding: var(--spacing-xl) 0 !important;
max-width: 1400px !important;
margin: 0 auto !important;
}
.woocommerce-cart .entry-content,
.woocommerce-account .entry-content,
.woocommerce-page .entry-content {
padding: 0 var(--spacing-md) !important;
}
/* ========================================
📝 PAGE TITLES - Centered with Proper Spacing
======================================== */
.woocommerce-cart h1,
.woocommerce-account h1,
.woocommerce-page h1,
.woocommerce-cart .entry-title,
.woocommerce-account .entry-title,
.woocommerce-page .entry-title {
text-align: center !important;
font-size: 2.25rem !important;
font-weight: 700 !important;
color: var(--primary-color) !important;
margin: 0 0 var(--spacing-xl) 0 !important;
padding: var(--spacing-md) var(--spacing-lg) !important;
width: 100% !important;
line-height: 1.3 !important;
}
/* Breadcrumb - Centered */
.woocommerce-cart .woocommerce-breadcrumb,
.woocommerce-account .woocommerce-breadcrumb {
display: block !important;
margin: 0 auto var(--spacing-lg) auto !important;
padding: var(--spacing-sm) 0 !important;
font-size: 0.9rem !important;
color: var(--secondary-color) !important;
text-align: center !important;
max-width: 1400px !important;
}
.woocommerce-cart .woocommerce-breadcrumb a,
.woocommerce-account .woocommerce-breadcrumb a {
color: var(--secondary-color) !important;
text-decoration: none !important;
transition: color 0.2s ease !important;
}
.woocommerce-cart .woocommerce-breadcrumb a:hover,
.woocommerce-account .woocommerce-breadcrumb a:hover {
color: var(--accent-color) !important;
}
/* ========================================
🛒 CART PAGE - Table & Layout
======================================== */
.woocommerce-cart table.cart {
width: 100% !important;
border-collapse: separate !important;
border-spacing: 0 !important;
border: 1px solid var(--border-color) !important;
border-radius: 8px !important;
overflow: hidden !important;
margin: 0 auto var(--spacing-xl) auto !important;
background: var(--background-color) !important;
}
.woocommerce-cart table.cart thead {
background: var(--light-gray) !important;
}
.woocommerce-cart table.cart th {
padding: var(--spacing-md) var(--spacing-lg) !important;
font-weight: 600 !important;
color: var(--primary-color) !important;
border: none !important;
text-align: left !important;
font-size: 0.85rem !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
}
.woocommerce-cart table.cart tbody tr {
border-bottom: 1px solid var(--border-color) !important;
transition: background 0.2s ease !important;
}
.woocommerce-cart table.cart tbody tr:last-child {
border-bottom: none !important;
}
.woocommerce-cart table.cart tbody tr:hover {
background: rgba(253, 185, 71, 0.1) !important; /* Light Orange tint */
}
.woocommerce-cart table.cart td {
padding: var(--spacing-md) var(--spacing-lg) !important;
vertical-align: middle !important;
border: none !important;
color: var(--primary-color) !important;
}
.woocommerce-cart table.cart td.product-thumbnail {
width: 110px !important;
padding: var(--spacing-md) !important;
}
.woocommerce-cart table.cart td.product-thumbnail img {
width: 80px !important;
height: auto !important;
border-radius: 6px !important;
display: block !important;
margin: 0 auto !important;
}
.woocommerce-cart table.cart td.product-name {
font-weight: 500 !important;
padding-left: 0 !important;
}
.woocommerce-cart table.cart td.product-name a {
color: var(--primary-color) !important;
text-decoration: none !important;
font-size: 1rem !important;
transition: color 0.2s ease !important;
display: block !important;
margin-bottom: 0.25rem !important;
}
.woocommerce-cart table.cart td.product-name a:hover {
color: var(--accent-color) !important;
}
.woocommerce-cart table.cart td.product-price,
.woocommerce-cart table.cart td.product-subtotal {
font-weight: 600 !important;
color: var(--primary-color) !important;
font-size: 1rem !important;
text-align: right !important;
}
.woocommerce-cart table.cart td.product-quantity .quantity {
display: inline-flex !important;
align-items: center !important;
border: 1px solid var(--border-color) !important;
border-radius: 6px !important;
overflow: hidden !important;
background: var(--background-color) !important;
}
.woocommerce-cart table.cart td.product-quantity input.qty {
width: 50px !important;
padding: 0.5rem 0 !important;
border: none !important;
text-align: center !important;
font-size: 0.95rem !important;
font-family: var(--font-primary) !important;
background: transparent !important;
color: var(--primary-color) !important;
}
.woocommerce-cart table.cart td.product-quantity input.qty:focus {
outline: none !important;
}
.woocommerce-cart table.cart td.product-remove a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 28px !important;
height: 28px !important;
border-radius: 50% !important;
background: var(--light-gray) !important;
color: var(--secondary-color) !important;
text-decoration: none !important;
font-size: 1.2rem !important;
font-weight: 300 !important;
transition: all 0.2s ease !important;
}
.woocommerce-cart table.cart td.product-remove a:hover {
background: var(--accent-color) !important;
color: var(--deep-mocha) !important; /* Dark text for contrast */
}
/* Coupon Form */
.woocommerce-cart table.cart td.actions {
padding: var(--spacing-lg) !important;
background: var(--light-gray) !important;
border-top: 1px solid var(--border-color) !important;
}
.woocommerce-cart table.cart td.actions .coupon {
display: flex !important;
align-items: center !important;
gap: var(--spacing-sm) !important;
flex-wrap: wrap !important;
margin: 0 !important;
float: left !important;
width: auto !important;
}
.woocommerce-cart table.cart td.actions .coupon input[type="text"] {
padding: 0.85rem 1rem !important;
border: 1px solid var(--border-color) !important;
border-radius: 6px !important;
font-family: var(--font-primary) !important;
font-size: 0.95rem !important;
min-width: 220px !important;
background: var(--background-color) !important;
color: var(--primary-color) !important;
transition: border-color 0.2s ease !important;
}
.woocommerce-cart table.cart td.actions .coupon input[type="text"]:focus {
outline: none !important;
border-color: var(--accent-color) !important;
}
.woocommerce-cart table.cart td.actions .coupon button[type="submit"],
.woocommerce-cart table.cart td.actions .coupon input[type="submit"] {
padding: 0.85rem 1.5rem !important;
background: var(--primary-color) !important;
color: var(--white) !important;
border: none !important;
border-radius: 6px !important;
cursor: pointer !important;
font-weight: 600 !important;
font-size: 0.95rem !important;
font-family: var(--font-primary) !important;
transition: background 0.2s ease !important;
white-space: nowrap !important;
}
.woocommerce-cart table.cart td.actions .coupon button[type="submit"]:hover,
.woocommerce-cart table.cart td.actions .coupon input[type="submit"]:hover {
background: var(--accent-color) !important;
color: var(--deep-mocha) !important; /* Dark text for contrast */
}
.woocommerce-cart table.cart td.actions button[name="update_cart"],
.woocommerce-cart table.cart td.actions input[name="update_cart"] {
padding: 0.85rem 1.5rem !important;
background: var(--background-color) !important;
color: var(--primary-color) !important;
border: 1px solid var(--border-color) !important;
border-radius: 6px !important;
cursor: pointer !important;
font-weight: 600 !important;
font-size: 0.95rem !important;
font-family: var(--font-primary) !important;
transition: all 0.2s ease !important;
float: right !important;
}
.woocommerce-cart table.cart td.actions button[name="update_cart"]:hover,
.woocommerce-cart table.cart td.actions input[name="update_cart"]:hover {
background: var(--light-gray) !important;
border-color: var(--primary-color) !important;
}
.woocommerce-cart table.cart td.actions::after {
content: "" !important;
display: table !important;
clear: both !important;
}
/* ========================================
🧾 CART TOTALS - Complete Redesign
======================================== */
.woocommerce-cart .cart_totals {
background: var(--background-color) !important;
padding: var(--spacing-lg) !important;
border-radius: 8px !important;
border: 1px solid var(--border-color) !important;
margin: 0 auto !important;
max-width: 550px !important;
width: 100% !important;
box-shadow: 0 4px 15px rgba(84, 55, 44, 0.05) !important; /* Mocha shadow */
}
.woocommerce-cart .cart_totals h2 {
font-size: 1.4rem !important;
font-weight: 700 !important;
margin: 0 0 var(--spacing-md) 0 !important;
color: var(--primary-color) !important;
padding-bottom: var(--spacing-sm) !important;
border-bottom: 2px solid var(--border-color) !important;
text-align: left !important;
}
.woocommerce-cart .cart_totals table {
width: 100% !important;
border-collapse: collapse !important;
margin: 0 !important;
}
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
padding: var(--spacing-sm) 0 !important;
border: none !important;
border-bottom: 1px solid var(--border-color) !important;
vertical-align: top !important;
font-size: 0.95rem !important;
}
.woocommerce-cart .cart_totals table th {
font-weight: 500 !important;
color: var(--secondary-color) !important;
text-align: left !important;
width: 60% !important;
padding-right: var(--spacing-md) !important;
}
.woocommerce-cart .cart_totals table td {
text-align: right !important;
font-weight: 600 !important;
color: var(--primary-color) !important;
}
.woocommerce-cart .cart_totals table tr:last-child th,
.woocommerce-cart .cart_totals table tr:last-child td {
border-bottom: none !important;
}
.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
border-top: 2px solid var(--border-color) !important;
border-bottom: none !important;
padding-top: var(--spacing-md) !important;
font-size: 1.25rem !important;
}
.woocommerce-cart .cart_totals .order-total td {
color: var(--accent-color) !important;
font-weight: 700 !important;
}
.woocommerce-cart .cart_totals .wc-proceed-to-checkout {
margin-top: var(--spacing-md) !important;
padding-top: var(--spacing-md) !important;
border-top: 1px solid var(--border-color) !important;
}
.woocommerce-cart .cart_totals .wc-proceed-to-checkout a {
display: block !important;
width: 100% !important;
text-align: center !important;
padding: 1rem 2rem !important;
background: var(--accent-color) !important;
color: var(--deep-mocha) !important; /* Dark text for contrast */
text-decoration: none !important;
border-radius: 6px !important;
font-weight: 600 !important;
font-size: 1rem !important;
transition: background 0.2s ease !important;
box-sizing: border-box !important;
}
.woocommerce-cart .cart_totals .wc-proceed-to-checkout a:hover {
background: var(--deep-mocha) !important;
color: var(--white) !important;
}
/* ========================================
🚚 SHIPPING CALCULATOR - Styled Form
======================================== */
.woocommerce-cart .cart_totals .shipping_calculator {
margin-top: var(--spacing-lg) !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
}
.woocommerce-cart .cart_totals .shipping_calculator > a {
display: inline-flex !important;
align-items: center !important;
gap: var(--spacing-xs) !important;
font-size: 0.95rem !important;
font-weight: 500 !important;
color: var(--accent-color) !important;
text-decoration: none !important;
padding: var(--spacing-xs) 0 !important;
cursor: pointer !important;
transition: color 0.2s ease !important;
}
.woocommerce-cart .cart_totals .shipping_calculator > a:hover {
color: var(--primary-color) !important;
text-decoration: underline !important;
}
.woocommerce-cart .cart_totals .shipping_calculator .shipping-calculator-form {
display: block !important;
margin-top: var(--spacing-md) !important;
padding: var(--spacing-lg) !important;
background: var(--light-gray) !important;
border-radius: 8px !important;
border: 1px solid var(--border-color) !important;
}
.woocommerce-cart .cart_totals .shipping_calculator .shipping-destination {
display: block !important;
margin-bottom: var(--spacing-md) !important;
padding: var(--spacing-sm) var(--spacing-md) !important;
background: var(--background-color) !important;
border-radius: 6px !important;
border: 1px dashed var(--border-color) !important;
font-size: 0.9rem !important;
color: var(--secondary-color) !important;
line-height: 1.6 !important;
}
.woocommerce-cart .cart_totals .shipping_calculator .shipping-destination strong {
color: var(--primary-color) !important;
font-weight: 600 !important;
}
.woocommerce-cart .cart_totals .shipping_calculator .shipping-destination a {
color: var(--accent-color) !important;
text-decoration: none !important;
font-weight: 500 !important;
margin-left: var(--spacing-xs) !important;
}
.woocommerce-cart .cart_totals .shipping_calculator .shipping-destination a:hover {
text-decoration: underline !important;
}
.woocommerce-cart .cart_totals .shipping_calculator .shipping-calculator-form p {
margin-bottom: var(--spacing-md) !important;
padding: 0 !important;
}
.woocommerce-cart .cart_totals .shipping_calculator .shipping-calculator-form p:last-child {
margin-bottom: 0 !important;
}
.woocommerce-cart .cart_totals .shipping_calculator .shipping-calculator-form label {
display: block !important;
margin-bottom: var(--spacing-xs) !important;
font-weight: 600 !important;
color: var(--primary-color) !important;
font-size: 0.9rem !important;
}
.woocommerce-cart .cart_totals .shipping_calculator .shipping-calculator-form label .required {
color: var(--accent-color) !important;
font-weight: 700 !important;
margin-left: 2px !important;
}
.woocommerce-cart .cart_totals .shipping_calculator .shipping-calculator-form select,
.woocommerce-cart .cart_totals .shipping_calculator .shipping-calculator-form input[type="text"],
.woocommerce-cart .cart_totals .shipping_calculator .shipping-calculator-form input[type="state"],
.woocommerce-cart .cart_totals .shipping_calculator .shipping-calculator-form input[type="number"] {
width: 100% !important;
padding: 0.85rem 1rem !important;
border: 1px solid var(--border-color) !important;
border-radius: 6px !important;
font-family: var(--font-primary) !important;
font-size: 0.95rem !important;
background: var(--background-color) !important;
color: var(--primary-color) !important;
box-sizing: border-box !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.woocommerce-cart .cart_totals .shipping_calculator .shipping-calculator-form select:focus,
.woocommerce-cart .cart_totals .shipping_calculator .shipping-calculator-form input:focus {
outline: none !important;
border-color: var(--accent-color) !important;
box-shadow: 0 0 0 3px rgba(215, 136, 62, 0.1) !important; /* Bronze shadow */
}
.woocommerce-cart .cart_totals .shipping_calculator .shipping-calculator-form button[type="submit"],
.woocommerce-cart .cart_totals .shipping_calculator .shipping-calculator-form input[type="submit"] {
display: inline-block !important;
width: 100% !important;
padding: 0.85rem 1.5rem !important;
background: var(--primary-color) !important;
color: var(--white) !important;
border: none !important;
border-radius: 6px !important;
cursor: pointer !important;
font-weight: 600 !important;
font-size: 0.95rem !important;
font-family: var(--font-primary) !important;
transition: background 0.2s ease, transform 0.2s ease !important;
margin-top: var(--spacing-sm) !important;
}
.woocommerce-cart .cart_totals .shipping_calculator .shipping-calculator-form button[type="submit"]:hover,
.woocommerce-cart .cart_totals .shipping_calculator .shipping-calculator-form input[type="submit"]:hover {
background: var(--accent-color) !important;
color: var(--deep-mocha) !important; /* Dark text for contrast */
transform: translateY(-2px) !important;
}
/* ========================================
👤 MY ACCOUNT PAGE
======================================== */
.woocommerce-account .woocommerce-MyAccount-navigation {
background: var(--light-gray) !important;
padding: var(--spacing-lg) !important;
border-radius: 8px !important;
border: 1px solid var(--border-color) !important;
margin-bottom: var(--spacing-xl) !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation li {
margin-bottom: var(--spacing-xs) !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation a {
display: block !important;
padding: var(--spacing-sm) var(--spacing-md) !important;
color: var(--primary-color) !important;
text-decoration: none !important;
border-radius: 6px !important;
transition: all 0.2s ease !important;
font-weight: 500 !important;
font-size: 0.95rem !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation .is-active a {
background: var(--accent-color) !important;
color: var(--deep-mocha) !important; /* Dark text for contrast */
}
.woocommerce-account .woocommerce-MyAccount-content h2 {
font-size: 1.5rem !important;
font-weight: 700 !important;
margin: 0 0 var(--spacing-lg) 0 !important;
color: var(--primary-color) !important;
text-align: center !important;
}
.woocommerce-account .woocommerce-MyAccount-content table {
width: 100% !important;
border-collapse: collapse !important;
margin-bottom: var(--spacing-lg) !important;
}
.woocommerce-account .woocommerce-MyAccount-content table th,
.woocommerce-account .woocommerce-MyAccount-content table td {
padding: var(--spacing-sm) var(--spacing-md) !important;
border: 1px solid var(--border-color) !important;
text-align: left !important;
font-size: 0.95rem !important;
}
.woocommerce-account .woocommerce-MyAccount-content table th {
background: var(--light-gray) !important;
font-weight: 600 !important;
}
.woocommerce-account .woocommerce-MyAccount-content .button {
display: inline-block !important;
padding: 0.75rem 1.5rem !important;
background: var(--primary-color) !important;
color: var(--white) !important;
border: none !important;
border-radius: 6px !important;
text-decoration: none !important;
font-weight: 600 !important;
transition: background 0.2s ease !important;
cursor: pointer !important;
font-family: var(--font-primary) !important;
font-size: 0.95rem !important;
}
.woocommerce-account .woocommerce-MyAccount-content .button:hover {
background: var(--accent-color) !important;
color: var(--deep-mocha) !important; /* Dark text for contrast */
}
/* ========================================
👤 MY ACCOUNT PAGE - Login Form Styles
======================================== */
.woocommerce-account .woocommerce-notices-wrapper,
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-error {
max-width: 500px !important;
margin: 0 auto var(--spacing-lg) auto !important;
}
.woocommerce-account .woocommerce-form-login {
background: var(--background-color) !important;
padding: var(--spacing-xl) !important;
border-radius: 8px !important;
border: 1px solid var(--border-color) !important;
max-width: 500px !important;
margin: 0 auto !important;
box-shadow: 0 4px 20px rgba(84, 55, 44, 0.05) !important; /* Mocha shadow */
}
.woocommerce-account .woocommerce-form-login .woocommerce-form-login__title {
font-size: 1.5rem !important;
font-weight: 700 !important;
color: var(--primary-color) !important;
margin: 0 0 var(--spacing-md) 0 !important;
text-align: center !important;
padding-bottom: var(--spacing-sm) !important;
border-bottom: 1px solid var(--border-color) !important;
}
.woocommerce-account .woocommerce-form-login .form-row {
margin-bottom: var(--spacing-md) !important;
padding: 0 !important;
width: 100% !important;
float: none !important;
}
.woocommerce-account .woocommerce-form-login label {
display: block !important;
margin-bottom: var(--spacing-xs) !important;
font-weight: 600 !important;
color: var(--primary-color) !important;
font-size: 0.9rem !important;
text-align: center !important;
}
.woocommerce-account .woocommerce-form-login label .required {
color: var(--accent-color) !important;
font-weight: 700 !important;
margin-left: 2px !important;
}
.woocommerce-account .woocommerce-form-login input[type="text"],
.woocommerce-account .woocommerce-form-login input[type="password"],
.woocommerce-account .woocommerce-form-login input[type="email"] {
width: 100% !important;
max-width: 400px !important;
padding: 0.85rem 1rem !important;
border: 1px solid var(--border-color) !important;
border-radius: 6px !important;
font-family: var(--font-primary) !important;
font-size: 0.95rem !important;
background: var(--background-color) !important;
color: var(--primary-color) !important;
box-sizing: border-box !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
margin: 0 auto !important;
display: block !important;
text-align: center !important;
}
.woocommerce-account .woocommerce-form-login input:focus {
outline: none !important;
border-color: var(--accent-color) !important;
box-shadow: 0 0 0 3px rgba(215, 136, 62, 0.1) !important; /* Bronze shadow */
}
.woocommerce-account .woocommerce-form-login .rememberme {
display: flex !important;
align-items: center !important;
gap: var(--spacing-xs) !important;
margin: var(--spacing-md) auto !important;
justify-content: center !important;
}
.woocommerce-account .woocommerce-form-login .rememberme input {
width: auto !important;
margin: 0 !important;
accent-color: var(--accent-color) !important;
}
.woocommerce-account .woocommerce-form-login .rememberme label {
margin: 0 !important;
font-weight: 400 !important;
font-size: 0.9rem !important;
}
.woocommerce-account .woocommerce-form-login .button,
.woocommerce-account .woocommerce-form-login input[type="submit"] {
width: 100% !important;
max-width: 400px !important;
padding: 1rem 2rem !important;
background: var(--accent-color) !important;
color: var(--deep-mocha) !important; /* Dark text for contrast */
border: none !important;
border-radius: 6px !important;
cursor: pointer !important;
font-weight: 600 !important;
font-size: 1rem !important;
font-family: var(--font-primary) !important;
transition: background 0.2s ease, transform 0.2s ease !important;
margin: 0 auto !important;
display: block !important;
}
.woocommerce-account .woocommerce-form-login .button:hover,
.woocommerce-account .woocommerce-form-login input[type="submit"]:hover {
background: var(--deep-mocha) !important;
color: var(--white) !important;
transform: translateY(-2px) !important;
}
.woocommerce-account .woocommerce-LostPassword {
display: block !important;
text-align: center !important;
margin-top: var(--spacing-md) !important;
color: var(--accent-color) !important;
text-decoration: none !important;
font-size: 0.9rem !important;
font-weight: 500 !important;
transition: color 0.2s ease !important;
}
.woocommerce-account .woocommerce-LostPassword:hover {
color: var(--primary-color) !important;
text-decoration: underline !important;
}
.woocommerce-account .woocommerce-form-register {
background: var(--background-color) !important;
padding: var(--spacing-xl) !important;
border-radius: 8px !important;
border: 1px solid var(--border-color) !important;
max-width: 500px !important;
margin: var(--spacing-xl) auto 0 auto !important;
box-shadow: 0 4px 20px rgba(84, 55, 44, 0.05) !important; /* Mocha shadow */
}
.woocommerce-account .woocommerce-form-register .woocommerce-form-register__title {
font-size: 1.5rem !important;
font-weight: 700 !important;
color: var(--primary-color) !important;
margin: 0 0 var(--spacing-md) 0 !important;
text-align: center !important;
padding-bottom: var(--spacing-sm) !important;
border-bottom: 1px solid var(--border-color) !important;
}
.woocommerce-account .woocommerce-form-register .form-row {
margin-bottom: var(--spacing-md) !important;
}
.woocommerce-account .woocommerce-privacy-policy-text {
font-size: 0.85rem !important;
color: var(--secondary-color) !important;
margin: var(--spacing-sm) 0 !important;
text-align: center !important;
}
.woocommerce-account .woocommerce-privacy-policy-text a {
color: var(--accent-color) !important;
text-decoration: none !important;
}
.woocommerce-account .woocommerce-privacy-policy-text a:hover {
text-decoration: underline !important;
}
/* ========================================
⚠️ 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;
text-align: center !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;
}
/* ========================================
🔧 UTILITY FIXES
======================================== */
.woocommerce a.remove {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 24px !important;
height: 24px !important;
border-radius: 50% !important;
background: var(--light-gray) !important;
color: var(--secondary-color) !important;
text-decoration: none !important;
font-size: 1rem !important;
font-weight: 300 !important;
transition: all 0.2s ease !important;
}
.woocommerce a.remove:hover {
background: var(--accent-color) !important;
color: var(--deep-mocha) !important; /* Dark text for contrast */
}
.woocommerce .input-text,
.woocommerce select,
.woocommerce textarea {
font-family: var(--font-primary) !important;
}
.woocommerce button,
.woocommerce input[type="button"],
.woocommerce input[type="submit"] {
font-family: var(--font-primary) !important;
}
.woocommerce .processing {
opacity: 0.7 !important;
pointer-events: none !important;
}
.woocommerce .blockUI {
opacity: 0.7 !important;
cursor: wait !important;
}
/* ========================================
📱 RESPONSIVE BREAKPOINTS
======================================== */
@media (max-width: 1024px) {
.woocommerce-cart .cart_totals {
margin: var(--spacing-xl) auto 0 auto !important;
max-width: 100% !important;
}
.woocommerce-cart table.cart td.product-thumbnail {
    display: none !important;
}
}
@media (max-width: 768px) {
.woocommerce-cart table.cart thead {
display: none !important;
}
.woocommerce-cart table.cart tbody,
.woocommerce-cart table.cart tr,
.woocommerce-cart table.cart td {
    display: block !important;
    width: 100% !important;
}

.woocommerce-ca rt table.cart tr {
    margin-bottom: var(--spacing-md) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    padding: var(--spac ing-md) !important;
    background: var(--background-color) !important;
}

.woocommerce-cart table.cart td {
    padding: var(--spacing-xs) 0 !important;
    border: none !importan t;
    text-align: right !important;
    position: relative !important;
    padding-left: 50% !important;
}

.woocommerce-cart table.cart td::before {
    content: attr(data-title)  !important;
    position: absolute !important;
    left: var(--spacing-md) !important;
    top: var(--spacing-xs) !important;
    font-weight: 600 !important;
    color: var(--sec ondary-color) !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    text-align: left !important;
}

.woocommerce-cart table.cart td.product-n ame {
    text-align: left !important;
    padding-left: var(--spacing-md) !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding-bottom: var(--spacin g-sm) !important;
    margin-bottom: var(--spacing-sm) !important;
}

.woocommerce-cart table.cart td.product-name::before {
    display: none !important;
}

.woocommerce-cart tabl e.cart td.actions .coupon {
    float: none !important;
    width: 100% !important;
    margin-bottom: var(--spacing-sm) !important;
}

.woocommerce-cart table.cart td.actions .cou pon input[type= "text "] {
    min-width: 100% !important;
    width: 100% !important;
}

.woocommerce-cart table.cart td.actions button[name= "update_cart "],
.woocommerce-cart table.cart td.actions input[name= "update_cart "] {
    float: none !important;
    width: 100% !important;
}

.woocommerce-cart .cart_totals {
    padding: var(--spacing-md) !important;
}

.woocommerce-cart .cart_totals table  th,
.woocommerce-cart .cart_totals table td {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    padding: var(--spacing-xs) 0 !importan t;
}

.woocommerce-cart .cart_totals table td {
    text-align: left !important;
    font-weight: 500 !important;
    padding-left: 0 !important;
}

.woocommerce-account .woocommer ce-MyAccount-navigation {
    margin-bottom: var(--spacing-md) !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    display: flex !important;
    flex-wra p: wrap !important;
    gap: var(--spacing-xs) !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
    margin: 0 !important;
}

.woocommerce-account .woocomm erce-MyAccount-navigation a {
    padding: var(--spacing-xs) var(--spacing-sm) !important;
    font-size: 0.85rem !important;
}
}
@media (max-width: 480px) {
.woocommerce-cart .woocommerce,
.woocommerce-account .woocommerce,
.woocommerce-page .woocommerce {
padding: var(--spacing-lg) 0 !important;
}
.woocommerce-cart h1,
.woocommerce-account h1,
.woocommerce-page h1 {
    font-size: 1.5rem !important;
    padding: var(--spacing-sm) var(--spacing-md) !important;
}

.woocommerce-cart .cart_totals .shipping_calculator .shipping-calculator-form {
    padding: var(--spacing-sm) !important;
}

.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
    padding: var(--spacing-md) !important;
}

.woocommerce-account .woocommerce-form-login input[type="text"],
.woocommerce-account .woocommerce-form-login input[type="password"],
.woocommerce-account .woocommerce-form-register input {
    padding: 0.75rem 0.85rem !important;
    font-size: 0.9rem !important;
}
}
/* ========================================
📋 NOTE: Checkout Styles Moved
======================================== /
/ All checkout-specific styles have been moved to:
/assets/css/checkout.css
This ensures checkout.css loads last and overrides
all checkout styles independently without conflicts.
Checkout styles removed from this file:
.woocommerce-checkout containers
.woocommerce-checkout form fields
.woocommerce-checkout payment methods
.woocommerce-checkout place order button
.woocommerce-checkout terms & conditions
.woocommerce-checkout coupon toggle
.woocommerce-checkout shipping methods
*/
/* ========================================
🛍️ SINGLE PRODUCT PAGE
======================================== */
.woocommerce-single-product-wrapper {
padding: var(--spacing-xl) 2rem !important;
width: 100% !important;
}
/* Main product layout: image left, summary right */
.woocommerce div.product {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: var(--spacing-xl) !important;
align-items: start !important;
margin: 0 0 var(--spacing-xl) 0 !important;
padding: 0 !important;
width: 100% !important;
}
/* Images column */
.woocommerce div.product div.images {
width: 100% !important;
float: none !important;
margin: 0 !important;
}
.woocommerce div.product div.images img {
width: 100% !important;
height: auto !important;
border-radius: 8px !important;
display: block !important;
border: 1px solid var(--border-color) !important;
}
.woocommerce div.product div.images .flex-viewport {
border-radius: 8px !important;
overflow: hidden !important;
border: 1px solid var(--border-color) !important;
}
.woocommerce div.product div.images .flex-control-thumbs {
display: flex !important;
gap: 0.5rem !important;
margin-top: var(--spacing-sm) !important;
padding: 0 !important;
list-style: none !important;
flex-wrap: wrap !important;
}
.woocommerce div.product div.images .flex-control-thumbs li {
width: calc(25% - 0.375rem) !important;
margin: 0 !important;
}
.woocommerce div.product div.images .flex-control-thumbs li img {
border-radius: 4px !important;
cursor: pointer !important;
opacity: 0.7 !important;
transition: opacity 0.2s ease !important;
border: 2px solid transparent !important;
}
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs li img:hover {
opacity: 1 !important;
border-color: var(--accent-color) !important;
}
/* Summary column */
.woocommerce div.product div.summary {
width: 100% !important;
float: none !important;
margin: 0 !important;
padding: 0 !important;
clear: none !important;
}
/* Product title */
.woocommerce div.product .product_title {
font-size: 2rem !important;
font-weight: 700 !important;
color: var(--primary-color) !important;
margin: 0 0 var(--spacing-sm) 0 !important;
line-height: 1.3 !important;
}
/* Star rating */
.woocommerce div.product .woocommerce-product-rating {
display: flex !important;
align-items: center !important;
gap: var(--spacing-sm) !important;
margin-bottom: var(--spacing-md) !important;
}
.woocommerce div.product .star-rating {
color: var(--orange) !important;
font-size: 1rem !important;
}
.woocommerce div.product .woocommerce-review-link {
color: var(--secondary-color) !important;
font-size: 0.9rem !important;
text-decoration: none !important;
}
.woocommerce div.product .woocommerce-review-link:hover {
color: var(--accent-color) !important;
}
/* Price */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
font-size: 1.75rem !important;
font-weight: 700 !important;
color: var(--accent-color) !important;
margin: 0 0 var(--spacing-md) 0 !important;
display: block !important;
}
.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
color: var(--secondary-color) !important;
font-weight: 400 !important;
font-size: 1.2rem !important;
margin-right: 0.5rem !important;
}
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
text-decoration: none !important;
}
/* Short description */
.woocommerce div.product .woocommerce-product-details__short-description {
color: var(--secondary-color) !important;
font-size: 0.95rem !important;
line-height: 1.7 !important;
margin-bottom: var(--spacing-lg) !important;
padding-bottom: var(--spacing-lg) !important;
border-bottom: 1px solid var(--border-color) !important;
}
/* Add to cart form */
.woocommerce div.product form.cart {
display: flex !important;
align-items: center !important;
gap: var(--spacing-sm) !important;
margin-bottom: var(--spacing-lg) !important;
flex-wrap: wrap !important;
}
.woocommerce div.product form.cart .quantity {
display: flex !important;
align-items: center !important;
border: 1px solid var(--border-color) !important;
border-radius: 6px !important;
overflow: hidden !important;
}
.woocommerce div.product form.cart .quantity input.qty {
width: 60px !important;
padding: 0.75rem 0.5rem !important;
border: none !important;
text-align: center !important;
font-size: 1rem !important;
font-family: var(--font-primary) !important;
background: transparent !important;
color: var(--primary-color) !important;
}
.woocommerce div.product form.cart .quantity input.qty:focus {
outline: none !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button {
flex: 1 !important;
padding: 0.85rem 2rem !important;
background: var(--accent-color) !important;
color: var(--deep-mocha) !important; /* Dark text for contrast */
border: none !important;
border-radius: 6px !important;
font-size: 1rem !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: background 0.2s ease, transform 0.2s ease !important;
font-family: var(--font-primary) !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
white-space: nowrap !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover {
background: var(--deep-mocha) !important;
color: var(--white) !important;
transform: translateY(-2px) !important;
}
/* Product meta (SKU, categories, tags) */
.woocommerce div.product .product_meta {
font-size: 0.875rem !important;
color: var(--secondary-color) !important;
border-top: 1px solid var(--border-color) !important;
padding-top: var(--spacing-md) !important;
margin-top: var(--spacing-md) !important;
display: flex !important;
flex-direction: column !important;
gap: 0.4rem !important;
}
.woocommerce div.product .product_meta span {
display: block !important;
}
.woocommerce div.product .product_meta a {
color: var(--accent-color) !important;
text-decoration: none !important;
}
.woocommerce div.product .product_meta a:hover {
text-decoration: underline !important;
}
/* Sale badge on single product */
.woocommerce div.product span.onsale {
position: absolute !important;
top: 12px !important;
left: 12px !important;
background: var(--accent-color) !important;
color: var(--deep-mocha) !important; /* Dark text for contrast */
padding: 0.25rem 0.75rem !important;
font-size: 0.8rem !important;
font-weight: 700 !important;
border-radius: 4px !important;
text-transform: uppercase !important;
z-index: 10 !important;
margin: 0 !important;
min-height: auto !important;
min-width: auto !important;
line-height: 1.5 !important;
}
/* ========================================
📝 PRODUCT TABS (Description / Reviews)
======================================== */
.woocommerce div.product .woocommerce-tabs {
grid-column: 1 / -1 !important;
clear: both !important;
margin-top: var(--spacing-xl) !important;
border-top: 2px solid var(--border-color) !important;
padding-top: var(--spacing-lg) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
display: flex !important;
gap: 0 !important;
list-style: none !important;
padding: 0 !important;
margin: 0 0 var(--spacing-lg) 0 !important;
border-bottom: 2px solid var(--border-color) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
margin: 0 !important;
padding: 0 !important;
border: none !important;
background: none !important;
border-radius: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
display: block !important;
padding: 0.75rem 1.5rem !important;
color: var(--secondary-color) !important;
font-weight: 600 !important;
text-decoration: none !important;
border-bottom: 2px solid transparent !important;
margin-bottom: -2px !important;
transition: color 0.2s ease, border-color 0.2s ease !important;
font-size: 0.95rem !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
color: var(--accent-color) !important;
border-bottom-color: var(--accent-color) !important;
}
.woocommerce div.product .woocommerce-tabs .panel {
padding: 0 !important;
background: transparent !important;
border: none !important;
margin: 0 !important;
}
.woocommerce div.product .woocommerce-tabs .panel h2 {
display: none !important;
}
.woocommerce div.product .woocommerce-tabs .panel p,
.woocommerce div.product .woocommerce-tabs .panel li {
color: var(--secondary-color) !important;
line-height: 1.8 !important;
font-size: 0.95rem !important;
}
/* ========================================
🔁 RELATED PRODUCTS
======================================== */
.woocommerce div.product .related.products,
.woocommerce div.product .upsells.products {
grid-column: 1 / -1 !important;
clear: both !important;
margin-top: var(--spacing-xl) !important;
padding-top: var(--spacing-xl) !important;
border-top: 2px solid var(--border-color) !important;
width: 100% !important;
}
.woocommerce div.product .related.products > h2,
.woocommerce div.product .upsells.products > h2 {
font-size: 1.5rem !important;
font-weight: 700 !important;
color: var(--primary-color) !important;
margin: 0 0 var(--spacing-lg) 0 !important;
}
/* ========================================
📱 SINGLE PRODUCT RESPONSIVE
======================================== */
@media (max-width: 768px) {
.woocommerce div.product {
grid-template-columns: 1fr !important;
gap: var(--spacing-lg) !important;
}
.woocommerce div.product .product_title {
    font-size: 1.5rem !important;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
    font-size: 1.4rem !important;
}

.woocommerce div.product form.cart {
    flex-direction: column !important;
    align-items: stretch !important;
}

.woocommerce div.product form.cart .single_add_to_cart_button {
    width: 100% !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
    overflow-x: auto !important;
    white-space: nowrap !important;
}
}
@media (max-width: 480px) {
.woocommerce-single-product-wrapper {
padding: var(--spacing-lg) 1rem !important;
}
.woocommerce div.product .product_title {
    font-size: 1.25rem !important;
}
}