/*
Theme Name: Kadence Child
Theme URI: https://whiteoakvanity.com
Description: Custom Child Theme for White Oak Vanity
Author: White Oak Vanity
Template: kadence
Version: 1.0.1
Text Domain: kadence-child
*/
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Poppins:wght@300;400;500;600&display=swap');
:root {
--wov-primary: #1a1a1a;
--wov-secondary: #f7f5f0;
--wov-accent: #B5996A; /* Luxury Brass/Gold */
--wov-gold: #B5996A;
--wov-text: #4a4a4a;
--wov-text-light: #7a7a7a;
--wov-border: #e8e6e1;
--wov-white: #ffffff;
--wov-font-heading: 'Cormorant Garamond', serif;
--wov-font-body: 'Poppins', sans-serif;
--wov-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
/* ==========================================================================
GLOBAL UI
========================================================================== */
body {
font-family: var(--wov-font-body);
color: var(--wov-text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 14px;
line-height: 1.6;
background-color: var(--wov-white);
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--wov-font-heading);
color: var(--wov-primary);
font-weight: 500;
}
.wov-container {
max-width: 1440px;
margin: 0 auto;
padding: 0 40px;
}
/* Buttons */
.wov-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 28px;
background: var(--wov-primary);
color: var(--wov-white);
font-family: var(--wov-font-body);
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1.5px;
text-decoration: none;
border-radius: 0;
border: 1px solid var(--wov-primary);
transition: var(--wov-transition);
}
.wov-btn:hover {
background: var(--wov-white);
color: var(--wov-primary);
}
/* ==========================================================================
HEADER
========================================================================== */
.wov-site-header {
position: relative;
width: 100%;
z-index: 100;
background: var(--wov-white);
border-bottom: 1px solid var(--wov-border);
}
/* Top Bar */
.wov-top-bar {
background: var(--wov-primary);
color: var(--wov-white);
font-size: 12px;
letter-spacing: 0.5px;
padding: 8px 0;
}
.wov-top-bar-inner {
display: flex;
justify-content: space-between;
align-items: center;
}
.wov-top-contact a {
color: var(--wov-white);
text-decoration: none;
transition: var(--wov-transition);
}
.wov-top-contact a:hover {
color: var(--wov-accent);
}
.wov-separator {
margin: 0 10px;
opacity: 0.5;
}
.wov-top-notices {
font-style: italic;
color: var(--wov-accent);
}
/* Main Header */
.wov-main-header { padding: 10px 0; }
.wov-header-inner {
display: flex;
justify-content: space-between;
align-items: center;
}
/* Mobile Toggle */
.wov-mobile-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
color: var(--wov-primary);
padding: 5px;
}
/* Logo */
.wov-logo-container {
flex: 1;
text-align: left;
display: flex;
align-items: center;
}
.wov-logo-img {
max-height: 50px;
width: auto;
}
/* Navigation */
.wov-primary-nav {
flex: 2;
display: flex;
justify-content: center;
}
.wov-menu {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 22px;
}
.wov-menu li a {
color: var(--wov-primary);
text-decoration: none;
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: var(--wov-transition);
position: relative;
}
.wov-menu li a::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 1px;
background: var(--wov-accent);
transition: var(--wov-transition);
}
.wov-menu li a:hover::after,
.wov-menu li.current-menu-item a::after {
width: 100%;
}
/* Actions */
.wov-header-actions {
flex: 1;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 22px;
}
.wov-action-icon {
color: var(--wov-primary);
display: flex;
align-items: center;
text-decoration: none;
transition: var(--wov-transition);
position: relative;
}
.wov-action-icon:hover {
color: var(--wov-accent);
}
.wov-cart-icon .wov-cart-count {
position: absolute;
top: -8px;
right: -8px;
background: var(--wov-accent);
color: var(--wov-white);
font-size: 10px;
font-weight: bold;
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
/* Responsive */
.wov-mobile-toggle {
background: transparent !important;
border: none;
padding: 0;
color: var(--wov-primary);
cursor: pointer;
display: none; /* Hidden on desktop */
align-items: center;
justify-content: flex-start;
}
@media (max-width: 992px) {
.wov-hide-mobile {
display: none !important;
}
.wov-menu {
display: none; /* Mobile menu logic to be implemented */
}
.wov-mobile-toggle {
display: flex;
flex: 0 0 auto;
text-align: left;
margin-right: 20px;
}
.wov-logo-container {
flex: 1;
justify-content: flex-start;
padding-left: 0;
}
.wov-header-actions {
flex: 0 0 auto;
gap: 22px;
}
.wov-action-icon svg {
width: 28px !important; height: 28px !important;
}
.wov-btn-quote {
padding: 13px 18px;
font-size: 12px;
white-space: nowrap;
}
.wov-top-bar-inner {
justify-content: center;
}
.wov-top-contact {
text-align: center;
width: 100%;
}
.wov-top-notices {
display: none;
}
.wov-container {
padding: 0 15px;
}
.wov-newsletter-inner {
flex-direction: column;
text-align: center;
}
.wov-footer-grid {
grid-template-columns: 1fr 1fr;
}
}
/* ==========================================================================
FOOTER
========================================================================== */
.wov-site-footer {
background: var(--wov-primary);
color: #cccccc;
}
/* Newsletter Section */
.wov-newsletter-section {
background: var(--wov-secondary);
color: var(--wov-text);
padding: 60px 0;
border-bottom: 1px solid var(--wov-border);
}
.wov-newsletter-inner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 40px;
}
.wov-newsletter-text h3 {
margin: 0 0 10px 0;
font-size: 28px;
color: var(--wov-primary);
}
.wov-newsletter-text p {
margin: 0;
}
.wov-newsletter-form form {
display: flex;
}
.wov-newsletter-form input {
padding: 14px 20px;
border: 1px solid var(--wov-border);
border-right: none;
font-family: var(--wov-font-body);
font-size: 14px;
width: 300px;
outline: none;
}
.wov-newsletter-form button {
cursor: pointer;
}
/* Main Footer */
.wov-main-footer {
padding: 80px 0;
}
.wov-footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 60px;
}
.wov-footer-col h4 {
color: var(--wov-white);
font-family: var(--wov-font-body);
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
margin: 0 0 30px 0;
}
.wov-footer-col p {
font-size: 14px;
line-height: 1.8;
}
.wov-brand-col .wov-footer-logo {
max-height: 90px;
margin: 0 auto 25px auto;
display: block;
}
.wov-social-icons {
display: flex;
gap: 15px;
margin-top: 25px;
justify-content: center;
}
.wov-social-icons a {
color: #cccccc;
transition: var(--wov-transition);
}
.wov-social-icons a:hover {
color: var(--wov-accent);
}
/* Footer Menus */
.wov-footer-menu {
list-style: none;
padding: 0;
margin: 0;
}
.wov-footer-menu li {
margin-bottom: 15px;
}
.wov-footer-menu a {
color: #cccccc;
text-decoration: none;
font-size: 14px;
transition: var(--wov-transition);
}
.wov-footer-menu a:hover {
color: var(--wov-accent);
padding-left: 5px;
}
.wov-contact-col a {
color: var(--wov-accent);
text-decoration: none;
}
/* Bottom Bar */
.wov-bottom-bar {
background: #111111;
padding: 20px 0;
font-size: 12px;
}
.wov-bottom-inner {
display: flex;
justify-content: space-between;
align-items: center;
}
.wov-bottom-inner p {
margin: 0;
}
.wov-bottom-links {
display: flex;
gap: 22px;
}
.wov-bottom-links a {
color: #cccccc;
text-decoration: none;
transition: var(--wov-transition);
}
.wov-bottom-links a:hover {
color: var(--wov-accent);
}
.wov-design-credit-mobile, .wov-design-credit-desktop {
color: #cccccc;
}
.wov-design-credit-mobile a, .wov-design-credit-desktop a {
color: #cccccc;
text-decoration: none;
transition: var(--wov-transition);
}
.wov-design-credit-mobile a:hover, .wov-design-credit-desktop a:hover {
color: var(--wov-accent);
}
.wov-design-credit-mobile {
display: none;
margin: 15px 0 0 0;
text-align: center;
}
/* Responsive Footer */
@media (max-width: 992px) {
.wov-newsletter-inner {
flex-direction: column;
text-align: center;
}
.wov-footer-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 768px) {
.wov-footer-grid {
grid-template-columns: 1fr;
gap: 40px;
text-align: center;
}
.wov-brand-col .wov-footer-logo {
max-height: 90px;
margin: 0 auto 25px auto;
}
.wov-social-icons {
justify-content: center;
}
.wov-bottom-inner {
flex-direction: column;
gap: 10px;
text-align: center;
}
.wov-design-credit-desktop {
display: none;
}
.wov-design-credit-mobile {
display: block;
}
.wov-bottom-links {
justify-content: center;
}
}
/* ==========================================================================
MOBILE MENU FLYOUT
========================================================================== */
.wov-mobile-menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
z-index: 999;
opacity: 0;
visibility: hidden;
transition: var(--wov-transition);
}
.wov-mobile-menu-container {
position: fixed;
top: 0;
left: -300px;
width: 300px;
height: 100%;
background: var(--wov-white);
z-index: 1000;
box-shadow: 2px 0 10px rgba(0,0,0,0.1);
transition: var(--wov-transition);
overflow-y: auto;
padding: 40px 20px;
}
.wov-mobile-menu-open .wov-mobile-menu-overlay {
opacity: 1;
visibility: visible;
}
.wov-mobile-menu-open .wov-mobile-menu-container {
left: 0;
}
.wov-mobile-close {
position: absolute;
top: 20px;
right: 20px;
background: none;
border: none;
color: var(--wov-primary);
cursor: pointer;
}
.wov-mobile-menu {
list-style: none;
padding: 0;
margin: 0;
}
.wov-mobile-menu li {
margin-bottom: 15px;
border-bottom: 1px solid var(--wov-border);
padding-bottom: 15px;
}
.wov-mobile-menu a {
color: var(--wov-primary);
text-decoration: none;
font-size: 16px;
font-weight: 500;
text-transform: uppercase;
display: block;
}
/* ==========================================================================
AJAX SEARCH OVERLAY
========================================================================== */
button.wov-action-icon {
background: none;
border: none;
padding: 0;
cursor: pointer;
font-family: inherit;
}
.wov-search-overlay {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(26, 26, 26, 0.98);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
transition: var(--wov-transition);
}
.wov-search-overlay.active {
opacity: 1;
visibility: visible;
}
.wov-search-close {
position: absolute;
top: 40px; right: 40px;
background: transparent !important;
border: 0px solid transparent !important;
outline: none !important;
padding: 0 !important;
color: var(--wov-white);
cursor: pointer;
transition: var(--wov-transition);
}
.wov-search-close:hover {
color: var(--wov-accent);
transform: rotate(90deg);
}
.wov-search-inner {
width: 100%;
max-width: 800px;
padding: 0 20px;
}
.wov-search-form {
position: relative;
margin-bottom: 40px;
}
.wov-search-form input {
width: 100%;
background: transparent;
border: none;
border-bottom: 2px solid rgba(255,255,255,0.2);
padding: 15px 0;
font-size: 36px;
color: var(--wov-white);
font-family: var(--wov-font-heading);
outline: none;
transition: var(--wov-transition);
}
.wov-search-form input:focus {
border-bottom-color: var(--wov-accent);
}
.wov-search-spinner {
position: absolute;
right: 0; top: 50%;
transform: translateY(-50%);
width: 24px; height: 24px;
border: 3px solid rgba(255,255,255,0.2);
border-top-color: var(--wov-accent);
border-radius: 50%;
animation: wov-spin 1s linear infinite;
}
@keyframes wov-spin { to { transform: translateY(-50%) rotate(360deg); } }
.wov-search-results {
max-height: 50vh;
overflow-y: auto;
padding-right: 15px;
}
/* Scrollbar for results */
.wov-search-results::-webkit-scrollbar { width: 6px; }
.wov-search-results::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); }
.wov-search-results::-webkit-scrollbar-thumb { background: var(--wov-accent); border-radius: 3px; }
.wov-search-result-item {
display: flex;
align-items: center;
padding: 15px 0;
border-bottom: 1px solid rgba(255,255,255,0.1);
text-decoration: none;
transition: var(--wov-transition);
}
.wov-search-result-item:hover {
background: rgba(255,255,255,0.05);
padding-left: 10px;
}
.wov-search-result-img {
width: 80px; height: 80px;
object-fit: cover;
margin-right: 20px;
background: #fff;
border-radius: 4px;
}
.wov-search-result-info {
flex: 1;
}
.wov-search-result-title {
color: var(--wov-white);
font-size: 18px;
margin: 0 0 5px 0;
font-family: var(--wov-font-body);
}
.wov-search-result-price {
color: var(--wov-accent);
font-size: 14px;
font-weight: 500;
}
.wov-search-no-results {
color: #999;
font-size: 18px;
text-align: center;
padding: 40px 0;
}
@media (max-width: 768px) {
.wov-search-form input { font-size: 24px; }
.wov-search-close { top: 20px; right: 20px; }
}
/* ==========================================================================
404 PAGE
========================================================================== */
.wov-404-main {
padding: 120px 0;
text-align: center;
background-color: var(--wov-bg);
}
.wov-404-section {
max-width: 600px;
margin: 0 auto;
}
.wov-404-title {
font-size: 150px;
font-family: var(--wov-font-heading);
color: var(--wov-primary);
line-height: 1;
margin: 0 0 10px 0;
}
.wov-404-subtitle {
font-size: 32px;
font-family: var(--wov-font-heading);
color: var(--wov-text);
margin: 0 0 30px 0;
font-weight: 400;
}
.wov-404-section .page-content p {
font-size: 18px;
color: var(--wov-text);
margin-bottom: 40px;
}
.wov-404-actions {
display: flex;
justify-content: center;
gap: 22px;
}
.wov-btn-primary {
background: var(--wov-primary);
color: var(--wov-white);
padding: 15px 30px;
text-decoration: none;
font-family: var(--wov-font-body);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
transition: var(--wov-transition);
}
.wov-btn-primary:hover {
background: var(--wov-accent);
color: var(--wov-white);
}
.wov-btn-outline {
background: transparent;
color: var(--wov-primary);
border: 1px solid var(--wov-primary);
padding: 15px 30px;
text-decoration: none;
font-family: var(--wov-font-body);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
transition: var(--wov-transition);
}
.wov-btn-outline:hover {
background: var(--wov-primary);
color: var(--wov-white);
}
@media (max-width: 768px) {
.wov-404-title { font-size: 100px; }
.wov-404-subtitle { font-size: 24px; }
.wov-404-actions { flex-direction: column; gap: 15px; }
}
.wov-newsletter-msg {
margin-top: 10px;
font-size: 14px;
font-weight: 500;
display: none;
text-align: left;
}
.wov-newsletter-msg.error {
color: #e74c3c;
display: block;
}
.wov-newsletter-msg.success {
color: #2ecc71;
display: block;
}
/* ==========================================================================
QUOTE PAGE & CUSTOM FORMS
========================================================================== */
.wov-quote-page {
padding: 80px 0;
background-color: var(--wov-bg);
}
.wov-quote-header {
text-align: center;
max-width: 800px;
margin: 0 auto 50px;
}
.wov-quote-header .wov-subtitle {
font-size: 18px;
color: #666;
margin-top: 15px;
}
.wov-quote-form-container {
max-width: 700px;
margin: 0 auto;
background: #fff;
padding: 50px;
border-radius: 4px;
box-shadow: 0 10px 40px rgba(0,0,0,0.03);
}
.wov-custom-form {
display: flex;
flex-direction: column;
gap: 25px;
}
.wov-form-row {
display: flex;
gap: 25px;
}
.wov-form-row .wov-form-group {
flex: 1;
}
.wov-form-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.wov-form-group label {
font-family: var(--wov-font-secondary);
font-size: 14px;
font-weight: 500;
color: var(--wov-text);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.wov-form-group input,
.wov-form-group select,
.wov-form-group textarea {
width: 100%;
padding: 15px;
border: 1px solid #ddd;
background: #fdfdfd;
font-family: var(--wov-font-secondary);
font-size: 16px;
color: var(--wov-text);
transition: border-color 0.3s ease;
border-radius: 0;
}
.wov-form-group input:focus,
.wov-form-group select:focus,
.wov-form-group textarea:focus {
outline: none;
border-color: var(--wov-gold);
}
.wov-form-submit {
margin-top: 10px;
text-align: center;
}
.wov-btn-large {
padding: 16px 40px;
font-size: 16px;
width: 100%;
}
.wov-form-msg {
padding: 15px;
border-radius: 4px;
font-weight: 500;
text-align: center;
}
.wov-form-msg.success {
background-color: #f0fdf4;
color: #166534;
border: 1px solid #bbf7d0;
}
.wov-form-msg.error {
background-color: #fef2f2;
color: #991b1b;
border: 1px solid #fecaca;
}
@media (max-width: 768px) {
.wov-quote-form-container {
padding: 30px 20px;
}
.wov-form-row {
flex-direction: column;
gap: 25px;
}
}
/* ==========================================================================
ABOUT US PAGE
========================================================================== */
.wov-about-page {
background-color: var(--wov-bg);
}
.wov-about-hero {
padding: 100px 0;
text-align: center;
background-color: #f0ede6;
border-bottom: 1px solid #e5e0d8;
}
.wov-about-title {
font-size: 48px;
margin-bottom: 20px;
}
.wov-about-subtitle {
font-size: 20px;
color: #666;
max-width: 600px;
margin: 0 auto;
}
/* Sections */
.wov-about-story, .wov-about-material, .wov-about-values, .wov-about-cta {
padding: 80px 0;
}
/* Story Grid */
.wov-about-story {
display: flex;
align-items: center;
gap: 60px;
}
.wov-story-content, .wov-story-image {
flex: 1;
}
.wov-story-content p {
font-size: 17px;
line-height: 1.8;
color: #555;
margin-bottom: 20px;
}
/* Image Placeholders */
.wov-image-placeholder {
width: 100%;
min-height: 400px;
background-color: #e5e0d8;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
color: #b5996a;
font-size: 48px;
}
.wov-image-placeholder.dark {
background-color: var(--wov-primary);
}
/* Dividers */
.wov-divider-left {
height: 2px;
width: 60px;
background-color: var(--wov-gold);
margin: 15px 0 30px;
}
.wov-divider-center {
height: 2px;
width: 60px;
background-color: var(--wov-gold);
margin: 15px auto 40px;
}
/* Material Grid */
.wov-about-material {
background-color: #fff;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.wov-material-grid {
display: flex;
align-items: center;
gap: 60px;
}
.wov-material-image, .wov-material-content {
flex: 1;
}
.wov-material-content p {
font-size: 17px;
line-height: 1.8;
color: #555;
margin-bottom: 20px;
}
.wov-material-list {
list-style: none;
padding: 0;
margin-top: 30px;
}
.wov-material-list li {
font-size: 16px;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 15px;
color: var(--wov-primary);
}
.wov-material-list li i {
color: var(--wov-gold);
}
/* Values */
.wov-values-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
}
.wov-value-card {
background: #fff;
padding: 40px 30px;
text-align: center;
border-radius: 4px;
box-shadow: 0 5px 20px rgba(0,0,0,0.03);
transition: transform 0.3s ease;
}
.wov-value-card:hover {
transform: translateY(-5px);
}
.wov-value-icon {
font-size: 32px;
color: var(--wov-gold);
margin-bottom: 20px;
}
.wov-value-card h3 {
font-size: 24px;
margin-bottom: 15px;
}
.wov-value-card p {
color: #666;
line-height: 1.6;
}
/* CTA */
.wov-about-cta {
background-color: var(--wov-primary);
color: #fff;
text-align: center;
}
.wov-about-cta h2 {
color: #fff;
font-size: 36px;
margin-bottom: 15px;
}
.wov-about-cta p {
font-size: 18px;
color: #ccc;
margin-bottom: 30px;
}
/* Mobile Responsive */
@media (max-width: 768px) {
.wov-about-title { font-size: 36px; }
.wov-about-story, .wov-material-grid {
flex-direction: column;
gap: 40px;
}
.wov-material-grid {
flex-direction: column-reverse;
}
.wov-values-grid {
grid-template-columns: 1fr;
}
}
/* ==========================================================================
ABOUT US PAGE (UPDATED WITH IMAGES)
========================================================================== */
.wov-about-hero {
padding: 140px 0;
text-align: center;
background-color: #1a1a1a;
background-size: cover;
background-position: center;
color: #fff;
border-bottom: none;
}
.wov-about-hero .wov-about-title {
color: #fff;
}
.wov-about-hero .wov-about-subtitle {
color: #f7f5f0;
}
.wov-about-img {
width: 100%;
height: auto;
border-radius: 4px;
box-shadow: 0 15px 40px rgba(0,0,0,0.1);
display: block;
}
/* ==========================================================================
ABOUT US PAGE (EDITORIAL LAYOUT)
========================================================================== */
.wov-about-page {
background-color: #fcfbf9;
}
.wov-about-hero {
padding: 160px 0;
text-align: center;
background-color: #1a1a1a;
background-size: cover;
background-position: center;
background-attachment: fixed;
color: #fff;
border-bottom: none;
}
.wov-about-hero .wov-about-title {
color: #fff;
font-size: 54px;
letter-spacing: 1px;
text-transform: uppercase;
}
.wov-about-hero .wov-about-subtitle {
color: #e5e0d8;
font-size: 22px;
max-width: 700px;
}
/* Editorial Sections */
.wov-editorial-section {
padding: 100px 0;
overflow: hidden;
}
.wov-editorial-grid {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 0;
position: relative;
}
/* Image Column Constraint */
.wov-image-wrapper {
position: relative;
max-width: 500px;
margin: 0 auto;
}
.wov-editorial-img {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
box-shadow: 0 20px 50px rgba(0,0,0,0.15);
display: block;
}
/* The Overlapping Card */
.wov-editorial-card {
background: #fff;
padding: 60px;
box-shadow: 0 10px 40px rgba(0,0,0,0.05);
position: relative;
z-index: 2;
}
.wov-editorial-right .wov-editorial-card {
margin-left: -80px; /* Pulls text over the image */
}
.wov-editorial-left {
background-color: #fff;
}
.wov-editorial-left .wov-editorial-card {
margin-right: -80px; /* Pulls text over the image */
box-shadow: none;
background: transparent;
padding-left: 0;
}
.wov-editorial-left .wov-editorial-grid {
/* Reverse the order on desktop */
}
/* Typography inside card */
.wov-overline {
display: block;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--wov-gold);
margin-bottom: 10px;
}
.wov-editorial-card p {
font-size: 17px;
line-height: 1.8;
color: #555;
margin-bottom: 25px;
text-align: justify;
}
.wov-signature {
margin-top: 30px;
font-family: 'Playfair Display', serif;
font-style: italic;
color: #222;
font-size: 20px;
}
.wov-about-quote {
font-size: 22px;
line-height: 1.5;
color: var(--wov-primary);
font-family: 'Playfair Display', serif;
font-style: italic;
border-left: 3px solid var(--wov-gold);
padding-left: 20px;
margin: 30px 0;
}
/* Stats Section */
.wov-about-stats {
background-color: var(--wov-primary);
padding: 80px 0;
color: #fff;
}
.wov-stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
text-align: center;
gap: 40px;
}
.wov-stat-number {
display: block;
font-size: 64px;
font-weight: 300;
color: var(--wov-gold);
margin-bottom: 10px;
font-family: 'Playfair Display', serif;
}
.wov-stat-label {
font-size: 16px;
text-transform: uppercase;
letter-spacing: 2px;
}
/* Mobile Responsive Adjustments */
@media (max-width: 992px) {
.wov-editorial-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.wov-editorial-left .wov-editorial-grid {
display: flex;
flex-direction: column-reverse;
}
.wov-editorial-right .wov-editorial-card,
.wov-editorial-left .wov-editorial-card {
margin: 0; /* Remove overlap on mobile */
padding: 30px;
}
.wov-stats-grid {
grid-template-columns: 1fr;
}
}
.wov-about-cta a.wov-btn {
display: inline-block !important;
width: auto !important;
min-width: 250px;
margin: 0 auto;
border: 2px solid var(--wov-gold);
background: transparent;
color: #fff;
padding: 15px 30px;
text-transform: uppercase;
letter-spacing: 2px;
transition: all 0.3s ease;
}
.wov-about-cta a.wov-btn:hover {
background: var(--wov-gold);
color: #1a1a1a;
}
@media (max-width: 768px) {
.wov-about-hero .wov-about-title {
font-size: 32px !important;
line-height: 1.3;
margin-bottom: 15px;
}
.wov-about-hero {
padding: 100px 15px !important;
}
}
/* ==========================================================================
CONTACT US PAGE
========================================================================== */
.wov-contact-page {
background-color: var(--wov-bg);
}
.wov-contact-split {
padding: 80px 0;
}
.wov-contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
}
.wov-contact-form-wrapper {
background: #fff;
padding: 50px;
box-shadow: 0 10px 40px rgba(0,0,0,0.03);
border: 1px solid var(--wov-border);
}
.wov-contact-intro {
font-size: 16px;
color: var(--wov-text-light);
margin-bottom: 30px;
line-height: 1.6;
}
.wov-info-card {
background: #1a1a1a;
color: #fff;
padding: 50px;
height: 100%;
display: flex;
flex-direction: column;
}
.wov-info-card h3 {
color: var(--wov-gold);
font-family: var(--wov-font-heading);
font-size: 32px;
margin-bottom: 20px;
}
.wov-info-card p {
color: #ccc;
margin-bottom: 40px;
}
.wov-info-list {
display: flex;
flex-direction: column;
gap: 22px;
margin-bottom: 40px;
}
.wov-info-item {
display: flex;
align-items: flex-start;
gap: 22px;
}
.wov-info-item i {
color: var(--wov-gold);
font-size: 20px;
margin-top: 5px;
}
.wov-info-item strong {
display: block;
font-family: var(--wov-font-heading);
font-size: 20px;
color: #fff;
margin-bottom: 5px;
}
.wov-info-item span, .wov-info-item a {
color: #ccc;
font-size: 15px;
line-height: 1.5;
}
.wov-info-item a:hover {
color: var(--wov-gold);
}
.wov-contact-side-image {
flex-grow: 1;
min-height: 250px;
background-size: cover;
background-position: center;
border: 1px solid #333;
margin-top: auto;
}
@media (max-width: 992px) {
.wov-contact-grid {
grid-template-columns: 1fr;
}
.wov-contact-form-wrapper {
padding: 30px 20px;
}
.wov-info-card {
padding: 30px 20px;
}
}
/* ==========================================================================
Home Page Styles
========================================================================== */
.wov-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}
/* 1. Hero Section */
.wov-hero-section {
position: relative;
width: 100%;
min-height: 80vh;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
}
.wov-hero-overlay {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.15);
}
.wov-hero-inner {
position: relative;
z-index: 2;
text-align: center;
}
/* 2. Logos Strip */
.wov-logos-section {
background: #fff;
padding: 15px 0;
border-bottom: 1px solid #eee;
}
.wov-logos-container {
max-width: 100%;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 40px;
padding: 0 20px;
}
.wov-logo-item img {
max-height: 50px;
width: auto;
max-width: 100%;
object-fit: contain;
opacity: 0.8;
transition: opacity 0.3s ease;
mix-blend-mode: multiply;
}
.wov-logo-item img:hover {
opacity: 1;
}
/* 3. Styles Grid */
.wov-styles-section {
padding: 60px 0;
background: #fdfdfd;
}
.wov-styles-grid {
display: grid;
gap: 22px;
}
.wov-styles-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.wov-styles-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.wov-styles-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.wov-style-card {
text-decoration: none;
display: block;
color: #333;
transition: transform 0.3s ease;
}
.wov-style-card:hover {
transform: translateY(-5px);
}
.wov-style-card-inner {
text-align: center;
}
.wov-style-title {
font-family: 'Cinzel', serif;
font-size: 24px;
margin-bottom: 5px;
letter-spacing: 1px;
}
.wov-style-sub {
font-size: 14px;
text-transform: uppercase;
letter-spacing: 2px;
color: #666;
margin-bottom: 20px;
}
.wov-style-img-wrap {
width: 100%;
overflow: hidden;
position: relative;
border-radius: 3px;
position: relative;
padding-top: 45px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.wov-style-img-wrap img {
width: 100%;
height: auto;
display: block;
transition: transform 0.6s ease;
}
.wov-style-card:hover .wov-style-img-wrap img {
transform: scale(1.03);
}
/* 4. Matrix Image */
.wov-matrix-section {
padding: 40px 0;
background: #fdfdfd;
text-align: center;
}
.wov-matrix-img {
max-width: 100%;
height: auto;
border: 1px solid #eee;
}
/* 5. Why Choose Us */
.wov-why-section {
padding: 20px 0 0px 0;
margin-bottom: -60px; /* Pull footer up */
background: #fff;
}
.wov-why-intro {
max-width: 100%;
margin: 0 auto 60px auto;
font-size: 16px;
line-height: 1.8;
color: #444;
}
.wov-why-intro p {
margin-bottom: 15px;
text-align: justify;
}
.wov-why-intro strong {
color: #000;
}
.wov-why-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.wov-why-content h2 {
font-family: 'Cinzel', serif;
font-size: 32px;
margin-bottom: 30px;
}
.wov-why-content p {
font-size: 16px;
line-height: 1.8;
color: #555;
margin-bottom: 20px;
text-align: justify;
}
.wov-why-content .wov-btn {
display: inline-block;
background: #0b5fa5;
color: #fff;
padding: 15px 30px;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 1px;
text-decoration: none;
border-radius: 3px;
margin-top: 20px;
transition: background 0.3s ease;
}
.wov-why-content .wov-btn:hover {
background: #084375;
color: #fff;
}
.wov-why-image img {
width: 100%;
height: auto;
border-radius: 5px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
/* Mobile Responsiveness */
@media (max-width: 991px) {
.wov-styles-grid.cols-4,
.wov-styles-grid.cols-3 {
grid-template-columns: repeat(2, 1fr);
}
.wov-why-split {
grid-template-columns: 1fr;
gap: 40px;
}
}
@media (max-width: 767px) {
.wov-hero-section {
min-height: 60vh;
}
.wov-styles-grid.cols-4, .wov-styles-grid.cols-3, .wov-styles-grid.cols-2 { grid-template-columns: repeat(2, 1fr) !important; column-gap: 15px !important; row-gap: 10px !important; }
.wov-why-content h2 {
font-size: 28px;
}
}
/* ==========================================================================
Home Page Enhancements
========================================================================== */
/* Hero Text */
.wov-hero-sub {
text-align: left !important;
font-size: 11px !important;
line-height: 1.6 !important;
margin-top: -10px !important;
}
.wov-hero-title {
font-family: 'Cinzel', serif;
font-size: 60px;
margin: 10px 0;
color: #fff;
text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
}
.wov-hero-sub {
font-size: 20px;
letter-spacing: 4px;
text-transform: uppercase;
color: #fff;
margin: 0;
}
.wov-hero-desc {
font-size: 18px;
color: #eee;
max-width: 600px;
margin: 10px auto 0;
}
/* Hero Positioning */
.wov-hero-section {
position: relative;
/* Ensure child can position relative to this */
}
.wov-hero-inner {
/* Absolute positioning is applied via inline styles in front-page.php */
padding: 30px;
max-width: 800px;
}
/* If no positioning is set, fall back to center */
.wov-hero-inner[style*="top: auto"][style*="bottom: auto"] {
top: 50%;
transform: translateY(-50%);
}
.wov-hero-inner[style*="left: auto"][style*="right: auto"] {
left: 50%;
transform: translateX(-50%);
text-align: center;
}
/* Logos Marquee */
.wov-logos-container {
overflow: hidden;
white-space: nowrap;
display: flex;
gap: 40px;
}
.wov-logos-container.wov-marquee-active {
flex-wrap: nowrap;
animation: marquee 30s linear infinite;
max-width: none !important;
gap: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
.wov-logos-container.wov-marquee-active:hover {
animation-play-state: paused;
}
.wov-logos-container.wov-marquee-active .wov-logo-item {
flex: 0 0 auto;
}
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* WooCommerce Products Grid */
.wov-products-section {
padding: 60px 0;
background: #fff;
}
.wov-products-header {
text-align: center;
margin-bottom: 40px;
}
.wov-products-header h2 {
font-family: 'Cinzel', serif;
font-size: 32px;
}
.wov-products-section .woocommerce ul.products {
display: grid;
gap: 22px;
}
.wov-products-section .woocommerce ul.products.columns-4 { grid-template-columns: repeat(4, 1fr); }
.wov-products-section .woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); }
.wov-products-section .woocommerce ul.products.columns-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 991px) {
.wov-products-section .woocommerce ul.products.columns-4,
.wov-products-section .woocommerce ul.products.columns-3 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
.wov-products-section .woocommerce ul.products {
grid-template-columns: 1fr !important;
}
.wov-hero-sub {
text-align: left !important;
font-size: 11px !important;
line-height: 1.6 !important;
margin-top: -10px !important;
}
.wov-hero-title {
font-size: 40px;
}
.wov-hero-inner {
padding: 15px;
}
}
/* ==========================================================================
Hero Slider & Swiper Customization
========================================================================== */
.wov-hero-slider-section {
position: relative;
width: 100%;
}
.wov-hero-swiper {
width: 100%;
height: auto;
}
.wov-hero-slide {
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 600px;
}
@media (max-width: 767px) {
.wov-hero-slide {
min-height: 400px;
}
}
/* Ensure the inner content sits over the overlay */
.wov-hero-inner {
z-index: 10;
}
.wov-hero-overlay {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.2); /* Slight darkening for readability */
z-index: 1;
}
/* Hero Button */
.wov-hero-btn {
display: inline-block;
margin-top: 25px;
padding: 15px 40px;
background: #cba876; /* Accent Gold/Oak Color */
color: #fff;
font-family: 'Cinzel', serif;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 2px;
text-decoration: none;
border-radius: 4px;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.wov-hero-btn:hover {
background: #b5925e;
color: #fff;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
/* Swiper Controls Customization */
.swiper-pagination-bullet {
background: #fff !important;
opacity: 0.5 !important;
width: 12px !important;
height: 12px !important;
}
.swiper-pagination-bullet-active {
opacity: 1 !important;
background: #cba876 !important;
}
.swiper-button-next, .swiper-button-prev {
color: #fff !important;
opacity: 0.6;
transition: 0.3s ease;
}
.swiper-button-next:hover, .swiper-button-prev:hover {
opacity: 1;
}
/* Remove Theme Gap Above Hero */
.home .site-content,
.home .content-area,
.home #main,
.wov-home-content {
padding-top: 0 !important;
margin-top: 0 !important;
}
/* WooCommerce Product Grids Section */
.wov-woo-grid-section {
padding: 60px 0;
background: #fdfdfd;
}
.wov-woo-grid-title {
text-align: center;
font-family: 'Cinzel', serif;
font-size: 36px;
margin-bottom: 40px;
color: #222;
}
/* Custom Footer Brand Text Alignment */
.wov-brand-col p {
text-align: justify;
}
/* Fix Why Section Mobile Bottom Spacing */
@media (max-width: 768px) {
.wov-why-section {
margin-bottom: -10px !important;
padding-bottom: 15px !important;
}
}
/* Removed harmful global flex block */
.woocommerce ul.products li.product {
display: flex;
flex-direction: column;
flex-grow: 1;
height: 100%;
}
.woocommerce ul.products li.product .woocommerce-LoopProduct-link {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.woocommerce ul.products li.product .button {
margin-top: auto;
}
/* Force Uniform WooCommerce Cards for Kadence */
.woocommerce ul.products li.product {
display: flex !important;
/* flex-direction: column !important; */
flex-wrap: wrap !important;
flex-direction: row !important;
gap: 5px !important;
height: 100% !important;
}
.woocommerce ul.products li.product .woocommerce-loop-image-link {
display: block !important;
}
.woocommerce ul.products li.product .woocommerce-loop-image-link img {
width: 100% !important;
height: 250px !important;
object-fit: cover !important;
margin-bottom: 0 !important;
display: block !important;
}
.woocommerce ul.products li.product .price {
display: none !important;
}
.woocommerce ul.products li.product .product-action-wrap {
display: none !important;
}
.woocommerce ul.products li.product {
margin-bottom: 15px !important;
background: #fff !important;
border: 1px solid #d1d1d1 !important;
border-radius: 8px !important;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08) !important;
overflow: hidden !important;
transition: all 0.3s ease !important;
}
.woocommerce ul.products li.product:hover {
box-shadow: 0 5px 12px rgba(0, 0, 0, 0.12) !important;
transform: translateY(-10px) !important;
}
.woocommerce ul.products li.product .product-details {
height: 80px !important;
padding: 15px 10px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title a,
.woocommerce ul.products li.product .woocommerce-LoopProduct-link-title {
margin: 0 !important;
font-size: 16px !important;
font-weight: 700 !important;
line-height: 1.4 !important;
display: -webkit-box;
-webkit-line-clamp: 2; /* Force exactly 2 lines max */
-webkit-box-orient: vertical;
overflow: hidden;
text-align: center !important;
}
/* --- Single Product Overhaul --- */
.wov-custom-single-product {
max-width: 1400px;
margin: 40px auto;
padding: 0 20px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.wov-sp-layout {
display: flex;
flex-wrap: wrap;
gap: 60px;
}
.wov-sp-gallery-col {
flex: 1 1 50%;
min-width: 300px;
}
.wov-sp-details-col {
flex: 1 1 40%;
min-width: 300px;
position: sticky;
top: 40px;
align-self: flex-start;
}
/* Gallery */
.wov-sp-main-image img {
width: 100%;
border-radius: 16px;
object-fit: cover;
margin-bottom: 20px;
}
.wov-sp-thumbnails {
display: flex;
gap: 10px;
}
.wov-sp-thumb img {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 3px;
position: relative;
padding-top: 45px;
cursor: pointer;
border: 2px solid transparent;
}
.wov-sp-thumb:first-child img {
border-color: #333;
}
/* Typography & Headers */
.wov-sp-cat {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 2px;
color: #666;
margin-bottom: 10px;
display: block;
}
.wov-sp-title {
font-family: 'Playfair Display', serif;
font-size: 42px;
line-height: 1.1;
margin: 0 0 15px 0;
color: #222;
}
.wov-sp-badge {
display: inline-flex;
align-items: center;
background: #e6f3eb;
color: #2b7a4b;
font-size: 11px;
font-weight: 600;
padding: 4px 10px;
border-radius: 20px;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 15px;
}
.wov-sp-badge .wov-dot {
width: 6px;
height: 6px;
background: #2b7a4b;
border-radius: 50%;
margin-right: 6px;
}
.wov-sp-collection {
font-family: 'Playfair Display', serif;
font-style: italic;
font-size: 18px;
color: #666;
margin-bottom: 20px;
}
/* Price */
.wov-sp-price-wrap {
display: flex;
align-items: baseline;
gap: 15px;
margin-bottom: 25px;
}
.wov-sp-price {
font-size: 32px;
font-weight: 500;
color: #222;
}
.wov-sp-price .woocommerce-Price-amount {
font-size: 32px;
color: #222;
}
.wov-sp-lead-time {
font-size: 13px;
background: #f5f5f5;
padding: 4px 10px;
border-radius: 20px;
color: #555;
}
/* Trust Icons */
.wov-sp-trust {
display: flex;
gap: 15px;
margin-bottom: 25px;
flex-wrap: wrap;
}
.wov-sp-trust span {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12px;
color: #4a5c51;
}
/* Description */
.wov-sp-desc {
font-size: 14px;
line-height: 1.6;
color: #555;
margin-bottom: 30px;
}
.wov-sp-desc p {
margin-bottom: 15px;
}
/* Package Toggles */
.wov-sp-package-toggles {
display: flex;
gap: 10px;
margin-bottom: 10px;
background: #f5f5f5;
padding: 5px;
border-radius: 12px;
}
.wov-toggle-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 12px;
border-radius: 3px;
position: relative;
padding-top: 45px;
cursor: pointer;
background: transparent;
border: 1px solid transparent;
}
.wov-toggle-btn.active {
background: #222;
color: #fff;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.wov-toggle-btn:not(.active) {
background: #f5f5f5;
color: #444;
border: 1px solid #ddd;
}
.wov-toggle-btn strong {
display: block;
font-size: 14px;
}
.wov-toggle-btn span {
display: block;
font-size: 12px;
opacity: 0.8;
}
.wov-sp-package-note {
font-size: 12px;
color: #777;
margin-bottom: 30px;
}
/* Variations */
.wov-var-row {
margin-bottom: 25px;
}
.wov-var-header {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1px;
}
.wov-var-header strong {
color: #222;
}
.wov-var-header span {
color: #777;
text-transform: none;
letter-spacing: 0;
}
.wov-var-swatches {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.wov-swatch {
width: 32px;
height: 32px;
border-radius: 3px;
position: relative;
padding-top: 45px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.wov-swatch.active {
border: 2px solid #222;
transform: scale(1.1);
}
.wov-swatch.active svg {
opacity: 1;
}
/* Doors */
.wov-var-doors {
display: flex;
gap: 10px;
}
.wov-door-btn {
border: 1px solid #ddd;
border-radius: 30px;
padding: 5px 15px 5px 8px;
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
overflow: hidden;
}
.wov-door-btn.active {
border-color: #222;
}
.wov-door-img {
width: 36px;
height: 48px;
border-radius: 12px;
}
.wov-door-txt strong {
display: block;
font-size: 13px;
}
.wov-door-txt span {
display: block;
font-size: 11px;
color: #777;
}
/* Sizes */
.wov-var-sizes {
display: flex;
gap: 10px;
}
.wov-size-btn {
flex: 1;
text-align: center;
border: 1px solid #ddd;
border-radius: 30px;
padding: 10px;
cursor: pointer;
}
.wov-size-btn.active {
background: #222;
color: #fff;
border-color: #222;
}
.wov-size-btn strong {
display: block;
font-size: 15px;
}
.wov-size-btn span {
display: block;
font-size: 11px;
opacity: 0.7;
}
/* Add-ons */
.wov-addon {
background: #f9f9f9;
padding: 15px;
border-radius: 12px;
display: flex;
justify-content: space-between;
align-items: center;
}
.wov-addon-txt strong {
display: block;
font-size: 14px;
}
.wov-addon-txt span {
font-size: 12px;
color: #777;
}
.wov-toggle-pill {
width: 40px;
height: 24px;
background: #ddd;
border-radius: 12px;
position: relative;
cursor: pointer;
}
.wov-toggle-pill::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
background: #fff;
border-radius: 50%;
}
/* Add to cart default hidden stuff */
.wov-sp-add-to-cart form.cart {
display: flex;
gap: 10px;
margin-top: 20px;
align-items: center;
}
.wov-sp-add-to-cart button.single_add_to_cart_button {
background: #222 !important;
color: #fff !important;
border-radius: 30px !important;
height: 52px !important;
line-height: 52px !important;
padding: 0 30px !important;
flex: 1 !important;
font-size: 16px !important;
border: 0px solid transparent !important;
outline: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
}
.wov-sp-add-to-cart .quantity input.qty {
height: 52px !important;
border-radius: 8px !important;
border: 1px solid #bbb !important;
}
/* Hide default kadence product summary elements */
.content-area .wov-custom-single-product .product_title,
.content-area .wov-custom-single-product .price,
.content-area .wov-custom-single-product .woocommerce-product-details__short-description {
display: none !important;
}
/* Related Products */
.wov-sp-related-wrap {
margin-top: 40px;
border-top: 1px solid #eaeaea;
padding-top: 30px;
margin-bottom: 10px !important;
}
.wov-sp-related-wrap h2 {
font-family: 'Playfair Display', serif;
font-size: 32px;
margin-bottom: 5px;
}
.wov-sp-related-wrap > p {
color: #777;
margin-bottom: 30px;
}
/* Style the product cards to match home page exactly */
.wov-sp-related-wrap ul.products li.product {
margin-bottom: 15px !important;
background: #fff !important;
border: 1px solid #d1d1d1 !important;
border-radius: 8px !important;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08) !important;
overflow: hidden !important;
transition: all 0.3s ease !important;
display: flex !important;
/* flex-direction: column !important; */
flex-wrap: wrap !important;
flex-direction: row !important;
gap: 5px !important;
padding: 0 !important;
}
.wov-sp-related-wrap ul.products li.product:hover {
box-shadow: 0 5px 12px rgba(0, 0, 0, 0.12) !important;
transform: translateY(-10px) !important;
}
/* Images locked at 250px */
.wov-sp-related-wrap ul.products li.product img {
height: 250px !important;
width: 100% !important;
object-fit: cover !important;
margin: 0 !important;
border-radius: 0 !important;
}
/* Text box auto heights */
.wov-sp-related-wrap ul.products li.product .product-details {
height: auto !important;
min-height: 80px !important;
padding: 20px 15px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-grow: 1;
}
.wov-sp-related-wrap ul.products li.product .woocommerce-loop-product__title {
margin: 0 !important;
font-size: 18px !important;
font-weight: bold !important;
line-height: 1.4 !important;
text-align: center !important;
}
/* Nuke bottom spacing on single product */
.single-product .site-main,
.single-product .content-area {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
.single-product .related.products,
.wov-sp-related-wrap {
margin-bottom: 80px !important;
padding-bottom: 0 !important;
}
/* Hide price and add to cart */
.wov-sp-related-wrap ul.products li.product .price,
.wov-sp-related-wrap ul.products li.product .product-action-wrap {
display: none !important;
}
/* Hide Get Quote button globally */
.site-header-item-button,
.site-header-button,
.site-header-item[data-item="button"],
.site-header .wp-block-button {
display: none !important;
}
/* Hide all links to the quote page completely */
a[href*="quote"],
.site-header-item-button,
.header-button,
.wov-btn-quote {
display: none !important;
}
/* Force all product titles to 2 lines max */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wov-sp-related-wrap ul.products li.product .woocommerce-loop-product__title {
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
line-height: 1.5 !important;
height: 3em !important;
max-height: 3em !important;
white-space: normal !important;
padding: 0 !important;
}
/* =======================================
SHOP PAGE OVERRIDES (CLEAN & MINIMAL)
======================================= */
/* 1. Hide Title and Toolbar Completely */
body.post-type-archive-product .entry-hero-container-inner,
body.tax-product_cat .entry-hero-container-inner,
body.post-type-archive-product .kadence-woocommerce-archive-layout-header,
body.tax-product_cat .kadence-woocommerce-archive-layout-header,
body.post-type-archive-product header.product-archive-title,
body.tax-product_cat header.product-archive-title {
display: none !important;
}
/* Add some top padding so the grid isn't touching the main nav */
body.post-type-archive-product .site-main,
body.tax-product_cat .site-main {
padding-top: 40px !important;
}
/* 2. Force 4-Column Grid */
body.post-type-archive-product .site-main .woocommerce ul.products,
body.tax-product_cat .site-main .woocommerce ul.products,
body.woocommerce-shop .site-main .woocommerce ul.products {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 30px !important;
margin: 0 !important;
padding: 0 !important;
}
/* Mobile responsive grid */
@media (max-width: 1024px) {
body.post-type-archive-product .site-main .woocommerce ul.products,
body.tax-product_cat .site-main .woocommerce ul.products,
body.woocommerce-shop .site-main .woocommerce ul.products {
grid-template-columns: repeat(3, 1fr) !important;
}
}
@media (max-width: 768px) {
body.post-type-archive-product .site-main .woocommerce ul.products,
body.tax-product_cat .site-main .woocommerce ul.products,
body.woocommerce-shop .site-main .woocommerce ul.products {
grid-template-columns: repeat(2, 1fr) !important;
gap: 15px !important;
}
}
/* Ensure list items don't span 100% width if they have a flex-basis */
body.post-type-archive-product .site-main .woocommerce ul.products li.product,
body.woocommerce-shop .site-main .woocommerce ul.products li.product {
width: 100% !important;
max-width: 100% !important;
flex: none !important;
}
/* Fix Product Card Hover Shift/Overlap */
body.woocommerce-shop .woocommerce ul.products li.product .product-details,
body.post-type-archive-product .woocommerce ul.products li.product .product-details,
body.tax-product_cat .woocommerce ul.products li.product .product-details {
transform: none !important;
bottom: auto !important;
margin: 0 !important;
background: #fff !important;
box-shadow: none !important;
height: auto !important;
min-height: 80px !important;
}
body.woocommerce-shop .woocommerce ul.products li.product:hover .product-details,
body.post-type-archive-product .woocommerce ul.products li.product:hover .product-details,
body.tax-product_cat .woocommerce ul.products li.product:hover .product-details {
transform: none !important;
bottom: auto !important;
}
/* 2. Category Filter Styling */
.wov-category-filter {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 22px;
margin-bottom: 50px;
padding-bottom: 20px;
width: 100%;
}
.wov-cat-link {
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 2px;
color: #999;
text-decoration: none !important;
padding: 5px 0;
border-bottom: 2px solid transparent;
transition: all 0.3s ease;
}
.wov-cat-link:hover,
.wov-cat-link.active {
color: #111;
border-bottom: 2px solid #111;
}
/* 3. Pagination Styling */
.woocommerce nav.woocommerce-pagination ul {
border: 0px solid transparent !important;
outline: none !important;
margin-top: 50px !important;
display: flex !important;
justify-content: center !important;
gap: 10px !important;
}
.woocommerce nav.woocommerce-pagination ul li {
border: 0px solid transparent !important;
outline: none !important;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
border: 1px solid #eaeaea !important;
background: transparent !important;
color: #555 !important;
font-size: 14px !important;
font-weight: bold !important;
padding: 10px 18px !important;
border-radius: 4px !important;
transition: all 0.3s ease !important;
}
.woocommerce nav.woocommerce-pagination ul li a:focus,
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
background: #111 !important;
color: #fff !important;
border-color: #111 !important;
}
/* Nuke Sorting Toolbar and Toggles Globally */
form.woocommerce-ordering,
.kadence-woo-toggle,
.kadence-woocommerce-archive-layout-header,
.woocommerce-result-count,
.kadence-woo-result-count,
.kadence-shop-top-item {
display: none !important;
}
/* Restyle Categories as Elegant Pills */
.wov-category-filter {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
column-gap: 8px !important; row-gap: 5px !important;
margin-bottom: 10px !important;
border-bottom: none !important;
padding-bottom: 0 !important;
}
.wov-cat-link {
font-size: 12px !important;
font-weight: bold !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
color: #444 !important;
text-decoration: none !important;
padding: 10px 20px !important;
border: 1px solid #bbb !important;
border-radius: 50px !important;
background: transparent !important;
transition: all 0.3s ease !important;
text-align: center !important;
}
.wov-cat-link:hover,
.wov-cat-link.active {
color: #fff !important;
background: #111 !important;
border-color: #111 !important;
}
/* Reduce gap between header and category pills */
body.post-type-archive-product .site-main,
body.tax-product_cat .site-main,
body.woocommerce-shop .site-main,
.content-container.site-container {
padding-top: 20px !important;
margin-top: 0 !important;
}
body.post-type-archive-product .wov-category-filter,
body.tax-product_cat .wov-category-filter {
margin-top: 0 !important;
}
body.post-type-archive-product .hero-container, body.tax-product_cat .hero-container, body.woocommerce-shop .hero-container { display: none !important; margin: 0 !important; padding: 0 !important; }
body.post-type-archive-product .entry-hero, body.tax-product_cat .entry-hero, body.woocommerce-shop .entry-hero { display: none !important; margin: 0 !important; padding: 0 !important; }
/* Nuke ALL empty WooCommerce header and top row containers */
body.woocommerce-shop header.woocommerce-products-header,
body.tax-product_cat header.woocommerce-products-header,
body.post-type-archive-product header.woocommerce-products-header,
body.woocommerce-shop .kadence-shop-top-row,
body.tax-product_cat .kadence-shop-top-row,
body.post-type-archive-product .kadence-shop-top-row {
display: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* Force content-area and site-main to not have extra padding */
body.woocommerce-shop .content-area,
body.tax-product_cat .content-area,
body.post-type-archive-product .content-area {
padding-top: 0 !important;
margin-top: 0 !important;
}
body.woocommerce-shop .site-main,
body.tax-product_cat .site-main,
body.post-type-archive-product .site-main {
padding-top: 40px !important; /* ONLY 40px above category pills */
}
/* Mobile Dropdown Styling */
.wov-mobile-dropdown {
display: none !important;
}
@media (max-width: 768px) {
.wov-desktop-pills {
display: none !important;
}
.wov-mobile-dropdown {
display: block !important;
width: 100%;
max-width: 400px;
margin: 0 auto 30px auto !important;
}
.wov-custom-select {
position: relative;
width: 100%;
}
.wov-select-trigger {
padding: 14px 20px !important;
font-size: 12px !important;
font-weight: bold !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
color: #111 !important;
border: 1px solid #bbb !important;
background: #fff !important;
border-radius: 5px !important;
cursor: pointer !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
}
.wov-select-options {
position: absolute !important;
top: 100% !important;
left: 0 !important;
right: 0 !important;
background: #fff !important;
border: 1px solid #bbb !important;
border-top: none !important;
border-radius: 0 0 5px 5px !important;
box-shadow: 0 5px 15px rgba(0,0,0,0.05) !important;
z-index: 9999 !important;
display: none !important;
/* flex-direction: column !important; */
flex-wrap: wrap !important;
flex-direction: row !important;
gap: 5px !important;
}
.wov-custom-select.open .wov-select-options {
display: flex !important;
}
.wov-mobile-opt {
padding: 14px 20px !important;
font-size: 11px !important;
font-weight: bold !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
color: #555 !important;
border: 0px solid transparent !important;
outline: none !important;
border-bottom: 1px solid #eee !important;
border-radius: 0 !important;
text-align: left !important;
background: #fff !important;
width: 100% !important;
box-sizing: border-box !important;
}
.wov-mobile-opt:last-child {
border-bottom: none !important;
}
.wov-mobile-opt:hover, .wov-mobile-opt.active {
background: #f9f9f9 !important;
color: #111 !important;
}
}
/* =========================================================
WOOCOMMERCE CART, CHECKOUT, & MY ACCOUNT LUXURY STYLING
========================================================= */
/* Hide Kadence default hero banner on WC pages */
.woocommerce-cart .entry-hero,
.woocommerce-checkout .entry-hero,
.woocommerce-account .entry-hero {
display: none !important;
}
/* Adjust top padding since hero is gone */
.woocommerce-cart .content-area,
.woocommerce-checkout .content-area,
.woocommerce-account .content-area,
.woocommerce-cart .site-main,
.woocommerce-checkout .site-main,
.woocommerce-account .site-main {
padding-top: 20px !important;
padding-bottom: 15px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Empty Cart Message */
.woocommerce-cart .cart-empty {
font-size: 16px !important;
font-weight: bold !important;
text-transform: uppercase !important;
letter-spacing: 2px !important;
color: #111 !important;
text-align: center;
margin-bottom: 10px !important;
border: 0px solid transparent !important;
outline: none !important;
background: transparent !important;
padding: 0 !important;
}
.woocommerce-cart .cart-empty::before {
display: none !important; /* Hide default icon */
}
/* Return to Shop Button */
.woocommerce-cart .return-to-shop {
text-align: center;
}
.woocommerce-cart .return-to-shop .button.wc-backward,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
background-color: #111 !important;
color: #fff !important;
border: 1px solid #111 !important;
border-radius: 3px !important;
padding: 15px 35px !important;
font-size: 12px !important;
font-weight: bold !important;
text-transform: uppercase !important;
letter-spacing: 2px !important;
transition: all 0.3s ease !important;
box-shadow: none !important;
}
.woocommerce-cart .return-to-shop .button.wc-backward:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
background-color: #fff !important;
color: #111 !important;
}
/* Cart Table (When items exist) */
.woocommerce table.shop_table {
border: 0px solid transparent !important;
outline: none !important;
border-collapse: collapse !important;
width: 100% !important;
border-radius: 0 !important;
}
.woocommerce table.shop_table th {
background: #f9f7f5 !important;
border: none !important;
outline: none !important;
border-bottom: none !important;
font-size: 11px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 2px !important;
color: #555 !important;
padding: 16px 15px !important;
text-align: left !important;
font-family: 'Poppins', sans-serif !important;
}
.woocommerce table.shop_table td {
border: 0px solid transparent !important;
outline: none !important;
border-bottom: 1px solid #eee !important;
padding: 20px 10px !important;
vertical-align: middle !important;
text-align: left !important;
}
.woocommerce table.shop_table td.product-name a {
font-size: 15px !important;
font-weight: bold !important;
color: #111 !important;
text-decoration: none !important;
}
.woocommerce table.shop_table td.product-price,
.woocommerce table.shop_table td.product-subtotal {
font-size: 15px !important;
font-weight: bold !important;
color: #555 !important;
}
/* Cart Totals Box */
.woocommerce .cart-collaterals .cart_totals {
background: #fcfcfc !important;
border: 1px solid #eee !important;
padding: 30px !important;
border-radius: 5px !important;
}
.woocommerce .cart-collaterals .cart_totals h2 {
font-size: 16px !important;
font-weight: bold !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
color: #111 !important;
border-bottom: 2px solid #111 !important;
padding-bottom: 15px !important;
margin-bottom: 10px !important;
}
.woocommerce .cart-collaterals .cart_totals table th {
font-size: 13px !important;
font-weight: bold !important;
text-transform: uppercase !important;
color: #555 !important;
border-bottom: 1px solid #eee !important;
}
.woocommerce .cart-collaterals .cart_totals table td {
border-bottom: 1px solid #eee !important;
text-align: right !important;
}
.woocommerce .cart-collaterals .cart_totals table tr.order-total th,
.woocommerce .cart-collaterals .cart_totals table tr.order-total td {
border-bottom: none !important;
font-size: 18px !important;
font-weight: bold !important;
color: #111 !important;
}
/* Proceed to Checkout Button */
.woocommerce .cart-collaterals .cart_totals .wc-proceed-to-checkout a.checkout-button {
display: block !important;
width: 100% !important;
text-align: center !important;
margin-top: 20px !important;
background: #111 !important;
color: #fff !important;
padding: 18px 20px !important;
font-size: 14px !important;
}
.woocommerce .cart-collaterals .cart_totals .wc-proceed-to-checkout a.checkout-button:hover {
background: #fff !important;
color: #111 !important;
}
/* =========================================================
WOOCOMMERCE FORMS (Checkout, My Account, Cart)
========================================================= */
/* Inputs */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
border: 1px solid #ddd !important;
background: #fafafa !important;
padding: 12px 15px !important;
font-size: 14px !important;
color: #111 !important;
border-radius: 3px !important;
box-shadow: none !important;
transition: all 0.3s ease !important;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
border-color: #111 !important;
background: #fff !important;
outline: none !important;
}
.woocommerce form .form-row label {
font-size: 12px !important;
font-weight: bold !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
color: #555 !important;
margin-bottom: 5px !important;
display: block !important;
}
/* My Account Navigation */
.woocommerce-MyAccount-navigation ul {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
border: 1px solid #eee !important;
border-radius: 5px !important;
background: #fcfcfc !important;
}
.woocommerce-MyAccount-navigation ul li {
border-bottom: 1px solid #eee !important;
}
.woocommerce-MyAccount-navigation ul li:last-child {
border-bottom: none !important;
}
.woocommerce-MyAccount-navigation ul li a {
display: block !important;
padding: 15px 20px !important;
font-size: 13px !important;
font-weight: bold !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
color: #555 !important;
text-decoration: none !important;
transition: all 0.2s ease !important;
}
.woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-MyAccount-navigation ul li.is-active a {
background: #111 !important;
color: #fff !important;
}
/* =========================================================
MY ACCOUNT PAGE LUXURY OVERHAUL
========================================================= */
/* Hide Kadence Avatar Box and ANY user info in navigation */
body.woocommerce-account nav.woocommerce-MyAccount-navigation > *:not(ul),
body.woocommerce-account .kadence-my-account-user-wrap,
body.woocommerce-account .woocommerce-MyAccount-navigation .user-info,
body.woocommerce-account div[class*="account-user"],
body.woocommerce-account li[class*="user"],
body.woocommerce-account li:has(img.avatar),
body.woocommerce-account img.avatar {
display: none !important;
}
/* Force everything to stack vertically so nav is on top */
body.woocommerce-account div.woocommerce,
body.woocommerce-account .kadence-my-account-wrap,
body.woocommerce-account .woocommerce-account-wrap,
body.woocommerce-account div.woocommerce > div {
display: flex !important;
/* flex-direction: column !important; */
flex-wrap: wrap !important;
flex-direction: row !important;
gap: 5px !important;
width: 100% !important;
max-width: 100% !important;
}
/* Nav on Top */
body.woocommerce-account nav.woocommerce-MyAccount-navigation {
order: 1 !important;
width: 100% !important;
max-width: 100% !important;
margin-bottom: 10px !important;
flex: none !important;
align-self: center !important;
border: 0px solid transparent !important;
outline: none !important;
box-shadow: none !important;
}
/* Content on Bottom */
body.woocommerce-account div.woocommerce-MyAccount-content {
order: 2 !important;
width: 100% !important;
max-width: 800px !important;
margin: 0 auto !important;
padding: 0 !important;
flex: none !important;
}
/* Single Line Horizontal Tabs */
body.woocommerce-account nav.woocommerce-MyAccount-navigation ul {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
border: 0px solid transparent !important;
outline: none !important;
border-radius: 0 !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch !important;
width: 100% !important;
}
/* Desktop: center the tabs */
@media (min-width: 768px) {
body.woocommerce-account nav.woocommerce-MyAccount-navigation ul {
justify-content: center !important;
gap: 15px !important;
white-space: nowrap !important;
}
}
/* Mobile: left-align and allow proper scrolling */
@media (max-width: 767px) {
body.woocommerce-account nav.woocommerce-MyAccount-navigation ul {
justify-content: flex-start !important;
gap: 10px !important;
white-space: nowrap !important;
padding-left: 5px !important;
padding-right: 15px !important;
}
}
body.woocommerce-account nav.woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
display: none !important;
}
body.woocommerce-account nav.woocommerce-MyAccount-navigation ul li {
display: inline-block !important;
flex: 0 0 auto !important;
border: 0px solid transparent !important;
outline: none !important;
margin: 0 !important;
padding: 0 !important;
white-space: nowrap !important;
}
body.woocommerce-account nav.woocommerce-MyAccount-navigation ul li a {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
padding: 8px 22px !important;
font-size: 13px !important;
font-weight: bold !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
color: #666 !important;
text-decoration: none !important;
transition: all 0.3s ease !important;
border: none !important;
outline: none !important;
border-bottom: none !important;
background: transparent !important;
box-shadow: none !important;
border-radius: 50px !important;
white-space: nowrap !important;
}
body.woocommerce-account nav.woocommerce-MyAccount-navigation ul li.is-active a {
background-color: #000 !important;
color: #fff !important;
border-bottom: none !important;
border-radius: 50px !important;
padding: 8px 22px !important;
}
body.woocommerce-account nav.woocommerce-MyAccount-navigation ul li a:hover {
background-color: #000 !important;
color: #fff !important;
border-bottom: none !important;
border-radius: 50px !important;
padding: 8px 22px !important;
}
body.woocommerce-account nav.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
background-color: #e63946 !important;
color: #fff !important;
}
@media (max-width: 768px) {
body.woocommerce-account div.woocommerce-MyAccount-content {
padding: 0 15px !important;
}
}
/* =========================================================
CHECKOUT — Hide & center "Your order" + "Billing details" headings
========================================================= */
/* "Billing details" heading (h3) */
.woocommerce-checkout #customer_details h3,
.woocommerce-checkout .woocommerce-billing-fields h3 {
font-size: 0 !important;
text-align: center !important;
}
/* "Your order" heading (h3) */
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout .woocommerce-checkout-review-order > h3 {
font-size: 0 !important;
text-align: center !important;
}
/* ==================================================== */
/* AGY MASTER FIX BLOCK (RESTORED) */
/* ==================================================== */
/* 1. Mobile Order Details: Maximize title, shrink-wrap price */
@media screen and (max-width: 768px) {
table.woocommerce-table--order-details td.woocommerce-table__product-name {
width: 99% !important;
white-space: normal !important;
}
table.woocommerce-table--order-details td.woocommerce-table__product-total {
width: 1px !important;
white-space: nowrap !important;
text-align: right !important;
}
/* 2. Mobile View Order: Subtle Box Shadow for cards */
.woocommerce-order-details, .woocommerce-customer-details {
background: #fff !important;
border-radius: 12px !important;
padding: 20px !important;
box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
margin-bottom: 30px !important;
border: 0px solid transparent !important;
outline: none !important;
}
}
/* 3. Order Details: Bold Total Row (2nd from bottom usually) */
table.woocommerce-table--order-details tfoot tr:nth-last-child(2) th,
table.woocommerce-table--order-details tfoot tr:nth-last-child(2) td,
table.woocommerce-table--order-details tfoot tr:nth-last-child(2) td * {
font-weight: 700 !important;
}
/* 4. Cart & Checkout: Remove bottom shadow/border from content */
body.woocommerce-cart .content-area,
body.woocommerce-cart .entry-content-wrap,
body.woocommerce-cart .entry-content,
body.woocommerce-cart .site-main,
body.woocommerce-cart article.entry,
body.woocommerce-cart .content-container,
body.woocommerce-checkout .content-area,
body.woocommerce-checkout .entry-content-wrap,
body.woocommerce-checkout .entry-content,
body.woocommerce-checkout .site-main,
body.woocommerce-checkout article.entry,
body.woocommerce-checkout .content-container {
box-shadow: none !important;
border-bottom: none !important;
}
/* 5. Checkout Review Table: Top alignment & Hide Variations */
.woocommerce-checkout-review-order-table td,
.woocommerce-checkout-review-order-table th {
vertical-align: top !important;
}
.woocommerce-checkout-review-order-table dl.variation,
.woocommerce-checkout-review-order-table .wc-item-meta {
display: none !important;
}
/* 6. Checkout: Injected Product Thumbnail alignment */
.checkout-product-info {
display: flex !important;
align-items: center !important;
gap: 15px !important;
}
.checkout-product-img {
border-radius: 8px !important;
box-shadow: 0 4px 10px rgba(0,0,0,0.08) !important;
width: 65px !important;
height: 65px !important;
object-fit: cover !important;
flex-shrink: 0 !important;
}
.checkout-product-name-qty {
display: flex !important;
/* flex-direction: column !important; */
flex-wrap: wrap !important;
flex-direction: row !important;
gap: 5px !important;
justify-content: center !important;
}
/* 7. Unified Inputs and Select2 (Country/Province) */
html body .woocommerce-checkout form .form-row input.input-text,
html body .woocommerce-checkout form .form-row textarea,
html body .woocommerce-checkout form .form-row .select2-container .select2-selection--single,
html body .woocommerce-checkout .select2-container--default .select2-selection--single,
html body .woocommerce-checkout .select2-container--focus .select2-selection--single {
background-color: #fafafa !important;
border: 1px solid #e1e1e1 !important;
border-radius: 8px !important;
padding: 14px 16px !important;
font-size: 15px !important;
font-family: 'Poppins', sans-serif !important;
color: #111 !important;
box-shadow: none !important;
transition: all 0.3s ease !important;
height: 52px !important;
width: 100% !important;
display: flex !important;
align-items: center !important;
}
html body .woocommerce-checkout form .form-row textarea {
height: auto !important;
align-items: flex-start !important;
}
html body .woocommerce-checkout .select2-container .select2-selection--single .select2-selection__rendered,
html body .woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: normal !important;
padding-left: 0 !important;
color: #444 !important;
font-family: 'Poppins', sans-serif !important;
}
html body .woocommerce-checkout .select2-container .select2-selection--single .select2-selection__arrow,
html body .woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 100% !important;
right: 15px !important;
}
/* Hover/Focus states */
html body .woocommerce-checkout form .form-row input.input-text:focus,
html body .woocommerce-checkout form .form-row textarea:focus,
html body .woocommerce-checkout .select2-container--open .select2-selection--single,
html body .woocommerce-checkout .select2-container--focus .select2-selection--single {
background-color: #ffffff !important;
border: 1px solid #111 !important;
border-radius: 8px !important;
box-shadow: 0 0 0 1px #111 !important;
outline: none !important;
}
/* ==================================================== */
/* AGY VISUAL DESIGN RESTORATION */
/* ==================================================== */
/* 1. Labels should not be uppercase */
.woocommerce form .form-row label,
.woocommerce-checkout-review-order-table th,
table.shop_table th {
text-transform: none !important;
letter-spacing: normal !important;
font-size: 14px !important;
color: #111 !important;
}
/* 3. Checkout Table Borders (Remove thick black borders) */
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td,
.woocommerce-checkout-review-order-table tr {
border-top: none !important;
border-left: none !important;
border-right: none !important;
border-bottom: 1px solid #eaeaea !important;
}
.woocommerce-checkout-review-order-table tbody tr:last-child td,
.woocommerce-checkout-review-order-table tbody tr:last-child th {
border-bottom: none !important;
}
/* 4. Product Name Alignment Fix (from earlier) */
.checkout-product-info {
display: flex !important;
align-items: center !important;
gap: 15px !important;
}
.checkout-product-img {
border-radius: 8px !important;
box-shadow: 0 4px 10px rgba(0,0,0,0.08) !important;
width: 65px !important;
height: 65px !important;
object-fit: cover !important;
flex-shrink: 0 !important;
}
/* 2. WooCommerce Notices (Bubble Pop-up Toasts) */
.woocommerce-message, .woocommerce-error, .woocommerce-info {
position: fixed !important;
bottom: 30px !important;
right: 30px !important;
z-index: 2147483647 !important;
background-color: #111 !important;
color: #fff !important;
border: 0px solid transparent !important;
outline: none !important;
border-radius: 8px !important;
padding: 16px 24px !important;
box-shadow: 0 10px 40px rgba(0,0,0,0.3) !important;
font-family: 'Poppins', sans-serif !important;
max-width: 450px !important;
display: flex !important;
align-items: center !important;
animation: agy-toast-slide-up 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, agy-toast-fade-out 0.5s 5s forwards !important;
margin: 0 !important;
}
.woocommerce-message::before, .woocommerce-error::before, .woocommerce-info::before {
color: #B5996A !important;
top: auto !important;
left: auto !important;
margin-right: 15px !important;
font-size: 20px !important;
}
.woocommerce-message a.button, .woocommerce-error a.button, .woocommerce-info a.button {
background: transparent !important;
border: 1px solid #B5996A !important;
color: #B5996A !important;
padding: 6px 14px !important;
border-radius: 4px !important;
margin-left: auto !important;
font-size: 13px !important;
margin-right: 0 !important;
}
.woocommerce-message a.button:hover, .woocommerce-error a.button:hover, .woocommerce-info a.button:hover {
background: #B5996A !important;
color: #fff !important;
}
@keyframes agy-toast-slide-up {
0% { transform: translateY(100px); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}
@keyframes agy-toast-fade-out {
0% { transform: translateY(0); opacity: 1; }
100% { transform: translateY(20px); opacity: 0; visibility: hidden; }
}
@media screen and (max-width: 768px) {
.woocommerce-message, .woocommerce-error, .woocommerce-info {
bottom: 20px !important;
right: 15px !important;
left: 15px !important;
width: auto !important;
max-width: none !important;
}
}
/* Remove focus outline from WooCommerce notices when auto-focused by JS */
.woocommerce-message:focus, .woocommerce-error:focus, .woocommerce-info:focus,
.woocommerce-message:focus-visible, .woocommerce-error:focus-visible, .woocommerce-info:focus-visible {
outline: none !important;
border: 0px solid transparent !important;
}
/* Reduce space above and below the newsletter section */
.wov-newsletter-section {
padding: 30px 0 30px 0 !important;
}
/* Make homepage style titles fit on one line */
.wov-style-title {
font-size: 19px !important;
letter-spacing: 0.5px !important;
white-space: nowrap !important;
}
@media screen and (max-width: 1024px) {
.wov-style-title {
font-size: 16px !important;
white-space: normal !important;
}
}
@media screen and (max-width: 768px) {
.wov-style-title { font-size: 15px !important; font-weight: 700 !important; letter-spacing: 0.5px !important; white-space: normal !important; }
.wov-style-sub { font-size: 11px !important; font-weight: 600 !important; }
}
/* old center align */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .product-details {
text-align: center !important;
justify-content: center !important;
}
/* old center align 2 */
.woocommerce ul.products li.product .product-details,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-LoopProduct-link-title,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .button {
text-align: center !important;
justify-content: center !important;
align-items: center !important;
}
.woocommerce ul.products li.product .woocommerce-LoopProduct-link-title {
display: block !important;
width: 100% !important;
}
/* ULTIMATE CENTER ALIGNMENT FOR ALL PRODUCTS */
.woocommerce ul.products li.product,
.woocommerce ul.products li.product .product-details,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-loop-product__title a,
.woocommerce-LoopProduct-link-title {
text-align: center !important;
justify-content: center !important;
align-items: center !important;
}
.woocommerce-loop-product__title a {
display: block !important;
width: 100% !important;
text-align: center !important;
}
/* Reduce blank space between product grid and why section */
.wov-combined-section,
.wov-styles-grid {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.woocommerce ul.products {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.wov-why-section {
padding-top: 10px !important;
margin-top: 0 !important;
}
.wov-why-intro {
margin-top: 0 !important;
}
/* Add white space below the why section */
.wov-why-section {
padding-bottom: 15px !important;
margin-bottom: 0 !important;
}
/* Make newsletter form oval/pill shaped */
.wov-newsletter-form input {
border-radius: 50px 0 0 50px !important;
padding-left: 25px !important;
}
.wov-newsletter-form button {
border-radius: 0 50px 50px 0 !important;
padding-right: 30px !important;
padding-left: 25px !important;
}
/* Luxury styling for footer social icons */
.wov-social-icons {
gap: 20px !important;
margin-top: 35px !important;
}
.wov-social-icons a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 44px !important;
height: 44px !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
border-radius: 50% !important;
color: #fff !important;
transition: all 0.3s ease !important;
}
.wov-social-icons a:hover {
background-color: var(--wov-accent, #B5996A) !important;
border-color: var(--wov-accent, #B5996A) !important;
color: #fff !important;
transform: translateY(-10px) !important;
}
.wov-social-icons a svg {
width: 18px !important;
height: 18px !important;
}
/* Add left/right padding to newsletter form on mobile */
@media screen and (max-width: 768px) {
.wov-newsletter-form {
padding: 0 20px !important;
width: 100% !important;
box-sizing: border-box !important;
}
.wov-newsletter-form form {
width: 100% !important;
justify-content: center !important;
}
.wov-newsletter-form input {
width: 100% !important;
}
}
/* Force small gap for Kadence grids */
ul.products.grid-cols,
ul.products,
.woocommerce ul.products,
body.woocommerce-shop .site-main .woocommerce ul.products,
body.tax-product_cat .site-main .woocommerce ul.products {
gap: 22px !important;
row-gap: 22px !important;
column-gap: 22px !important;
}
.woocommerce ul.products li.product {
margin-bottom: 0 !important;
}
/* KILL ALL PRODUCT DETAILS HOVER ANIMATIONS */
.woocommerce ul.products li.product:hover .product-details,
.woocommerce-page ul.products li.product:hover .product-details,
body.woocommerce-shop .woocommerce ul.products li.product:hover .product-details,
body.tax-product_cat .woocommerce ul.products li.product:hover .product-details,
.wov-products-section ul.products li.product:hover .product-details {
transform: none !important;
bottom: 0 !important;
margin: 0 !important;
padding: 20px 15px !important;
top: auto !important;
}
/* Add bottom margin to products on homepage grid */
body.home .woocommerce ul.products li.product {
margin-bottom: 10px !important;
}
/* Add space below category filter */
.wov-category-filter { margin-bottom: 35px !important; }
.wov-form-group select {
appearance: none;
-webkit-appearance: none;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 15px center;
background-size: 16px;
padding-right: 40px;
cursor: pointer;
}
@media (max-width: 768px) {
.wov-about-subtitle {
font-size: 16px !important;
line-height: 1.4 !important;
}
}
@media (min-width: 769px) {
.wov-header-actions {
gap: 32px !important;
}
.wov-action-icon svg {
width: 28px !important;
height: 28px !important;
stroke-width: 1.5 !important;
}
}
/* Luxury Menu Font Override */
.wov-menu li a {
font-family: var(--wov-font-heading) !important;
font-size: 17px !important;
font-weight: bold !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
}
/* The true, unbreakable menu override */
html body #menu-main-menu > li > a,
html body .wov-menu > li > a,
html body header .menu-item > a {
font-family: var(--wov-font-heading) !important;
font-size: 17px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
text-shadow: 0 0 0.5px currentColor, 0 0 0.5px currentColor !important;
-webkit-text-stroke: 0.3px currentColor !important;
}
/* Increase spacing between menu items */
html body .wov-menu {
gap: 36px !important;
}
/* Brute force spacing between menu items */
html body #menu-main-menu > li,
html body .wov-menu > li,
html body header .menu-item {
margin-right: 30px !important;
}
html body #menu-main-menu > li:last-child,
html body .wov-menu > li:last-child,
html body header .menu-item:last-child {
margin-right: 0 !important;
}
/* Dashboard Action Cards - No Underlines */
.entry-content a.wov-action-card,
.entry-content a.wov-action-card:hover,
.entry-content p a.wov-action-card,
.entry-content p a.wov-action-card:hover,
body.woocommerce-account .entry-content a.wov-action-card,
body.woocommerce-account .entry-content a.wov-action-card:hover {
text-decoration: none !important;
text-align: center !important;
color: inherit !important;
background-image: none !important;
box-shadow: none !important;
}
.wov-action-card h3,
.wov-action-card p {
text-decoration: none !important;
text-align: center !important;
}
.wov-dashboard {
text-align: center !important;
}
/* CLIENT REQUEST: Minimalist Product Cards (Global) */
/* Strip borders, backgrounds, and padding from product cards */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
body.woocommerce-shop .woocommerce ul.products li.product,
body.tax-product_cat .woocommerce ul.products li.product,
body.home .woocommerce ul.products li.product {
background: transparent !important;
box-shadow: none !important;
border: none !important;
padding: 0 !important;
margin-bottom: 10px !important;
border-radius: 0 !important;
}
/* Force left alignment on all text */
.woocommerce ul.products li.product .product-details,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title a,
.woocommerce ul.products li.product .woocommerce-LoopProduct-link-title,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .button {
text-align: left !important;
justify-content: flex-start !important;
align-items: flex-start !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Adjust product details container */
.woocommerce ul.products li.product .product-details, body.woocommerce-shop .woocommerce ul.products li.product:hover .product-details, body.tax-product_cat .woocommerce ul.products li.product:hover .product-details {
padding-top: 5px !important;
padding-bottom: 0 !important;
background: transparent !important;
}
/* Typography adjustments strictly for mobile */
@media screen and (max-width: 768px) {
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title a {
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
margin-bottom: 5px !important;
}
}
.woocommerce ul.products li.product .price {
font-family: var(--wov-font-heading), 'Cinzel', serif !important;
font-size: 17px !important;
display: none !important;
flex-direction: row !important;
align-items: baseline !important;
justify-content: flex-start !important;
flex-wrap: wrap !important;
column-gap: 15px !important; row-gap: 10px !important;
width: 100% !important;
margin-top: 5px !important;
}
.woocommerce ul.products li.product .price del {
order: 2 !important;
color: #777 !important;
font-size: 13px !important;
font-weight: 400 !important;
font-family: 'Poppins', sans-serif !important;
}
.woocommerce ul.products li.product .price ins,
.woocommerce ul.products li.product .price > .amount {
order: 1 !important;
color: #8B0000 !important; /* Maroon color */
text-decoration: none !important;
font-weight: 600 !important;
}
.woocommerce ul.products li.product .product-details {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
}
/* Optional: Apply to category cards if needed */
.wov-style-card {
border: none !important;
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
}
.wov-style-card-inner {
text-align: center !important;
}
/* Max 2 lines with ellipsis on mobile */
@media screen and (max-width: 768px) {
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title a {
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
height: auto !important;
max-height: none !important;
text-overflow: ellipsis !important;
}
}
/* Hide price on mobile per user request */
@media screen and (max-width: 768px) {
.woocommerce ul.products li.product .price {
display: none !important;
}
}
/* CRITICAL: Force left alignment globally for all products */
.woocommerce ul.products li.product,
.woocommerce ul.products li.product .product-details,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title a,
.woocommerce-loop-product__title,
.woocommerce-loop-product__title a,
.woocommerce-LoopProduct-link-title {
text-align: left !important;
justify-content: flex-start !important;
align-items: flex-start !important;
}
/* Ensure no gap below the image if price is hidden */
.woocommerce ul.products li.product .product-details {
padding-top: 5px !important;
}
/* Kill all fixed minimum heights on product details so gaps shrink based on title length */
.woocommerce ul.products li.product .product-details,
body.woocommerce-shop .woocommerce ul.products li.product .product-details,
body.post-type-archive-product .woocommerce ul.products li.product .product-details,
body.tax-product_cat .woocommerce ul.products li.product .product-details {
min-height: 0 !important;
padding-bottom: 0 !important;
}
/* CRITICAL: Collapse all empty spaces in product cards globally */
.woocommerce ul.products li.product .product-details {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
min-height: 0 !important;
}
.woocommerce ul.products li.product .product-action-wrap {
display: none !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* Reduce desktop grid row gap */
@media screen and (min-width: 769px) {
ul.products.grid-cols,
ul.products,
.woocommerce ul.products,
body.woocommerce-shop .site-main .woocommerce ul.products,
body.tax-product_cat .site-main .woocommerce ul.products {
row-gap: 15px !important;
column-gap: 20px !important;
}
}
/* ULTRA AGGRESSIVE ROW SPACING FIX (GLOBAL) */
body.home .woocommerce ul.products li.product,
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
ul.products.grid-cols,
ul.products,
.woocommerce ul.products,
body.woocommerce-shop .site-main .woocommerce ul.products,
body.tax-product_cat .site-main .woocommerce ul.products {
row-gap: 30px !important; /* Adjusted gap */
}
/* Ensure the title itself has no hidden margins */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
line-height: 1.2 !important;
}
/* Ensure image has no hidden margins */
ul.products li.product img,
ul.products li.product .woocommerce-loop-image-link {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* Extra explicit mobile grid gap reduction */
@media screen and (max-width: 768px) {
ul.products.grid-cols,
ul.products,
.woocommerce ul.products,
body.woocommerce-shop .site-main .woocommerce ul.products,
body.tax-product_cat .site-main .woocommerce ul.products {
row-gap: 30px !important;
}
body.home .woocommerce ul.products {
row-gap: 15px !important;
}
}
/* ULTRA AGGRESSIVE SHOP PAGE MOBILE SPACING FIX */
@media screen and (max-width: 768px) {
/* Kill grid row gaps (ONLY shop/category pages) */
body.woocommerce-shop ul.products,
body.tax-product_cat ul.products {
row-gap: 30px !important;
column-gap: 5px !important;
margin-bottom: 0 !important;
}
/* Kill margin on product cards (ONLY shop/category pages) */
body.woocommerce-shop ul.products li.product,
body.tax-product_cat ul.products li.product {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* Kill margins inside details (ONLY shop/category pages) */
body.woocommerce-shop ul.products li.product .product-details,
body.woocommerce-shop ul.products li.product .woocommerce-loop-product__title,
body.woocommerce-shop ul.products li.product .woocommerce-loop-product__title a,
body.tax-product_cat ul.products li.product .product-details,
body.tax-product_cat ul.products li.product .woocommerce-loop-product__title,
body.tax-product_cat ul.products li.product .woocommerce-loop-product__title a {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* Ensure the wrapper doesn't have artificial height (ONLY shop/category pages) */
body.woocommerce-shop ul.products li.product .product-details,
body.tax-product_cat ul.products li.product .product-details {
min-height: 0 !important;
height: auto !important;
}
}
/* Shop Page specific mobile title typography */
@media screen and (max-width: 768px) {
body.woocommerce-shop ul.products li.product .woocommerce-loop-product__title,
body.woocommerce-shop ul.products li.product .woocommerce-loop-product__title a,
body.tax-product_cat ul.products li.product .woocommerce-loop-product__title,
body.tax-product_cat ul.products li.product .woocommerce-loop-product__title a {
font-size: 17px !important;
font-weight: 800 !important;
}
}
/* ULTRA AGGRESSIVE HEIGHT FIX (STRICTLY SHOP PAGE ONLY) */
body.woocommerce-shop ul.products li.product .product-details,
body.tax-product_cat ul.products li.product .product-details,
body.post-type-archive-product ul.products li.product .product-details {
height: auto !important;
min-height: 0 !important;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
body.woocommerce-shop ul.products li.product,
body.tax-product_cat ul.products li.product {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
min-height: 0 !important;
}
/* =======================================================
MY ACCOUNT PAGE - REDESIGN (LOGGED OUT) GLOBAL + MOBILE
======================================================= */
body.woocommerce-account:has(#customer_login) .entry-header {
display: none !important;
}
body.woocommerce-account:has(#customer_login) .woocommerce {
background: #ffffff;
border: 1px solid #f4f4f4;
border-radius: 12px;
padding: 60px 80px;
box-shadow: 0 10px 40px rgba(0,0,0,0.03);
max-width: 1000px;
margin: 60px auto 80px auto;
position: relative;
}
body.woocommerce-account:has(#customer_login) .woocommerce::before {
content: "My Account";
display: block;
width: 100% !important;
text-align: center !important;
font-family: var(--wov-font-heading), 'Cinzel', serif;
font-size: 40px;
color: #111;
margin-bottom: -15px !important;
font-weight: 500;
}
body.woocommerce-account:has(#customer_login) #customer_login::before {
content: "Sign in or create your account";
display: block;
width: 100%;
text-align: center;
font-family: 'Poppins', sans-serif;
font-size: 15px;
color: #666;
margin-bottom: 50px;
padding-top: 25px;
background-image: url('data:image/svg+xml;utf8,');
background-size: 100px 20px;
background-position: center top;
background-repeat: no-repeat;
}
body.woocommerce-account:has(#customer_login) #customer_login {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 40px;
}
body.woocommerce-account:has(#customer_login) .u-column1,
body.woocommerce-account:has(#customer_login) .u-column2 {
flex: 1;
min-width: 300px;
background: #ffffff;
border: 1px solid #eaeaea;
border-radius: 3px;
position: relative;
padding-top: 45px;
padding: 40px;
box-sizing: border-box;
width: 100%;
}
body.woocommerce-account:has(#customer_login) .u-column1 h2,
body.woocommerce-account:has(#customer_login) .u-column2 h2 {
font-family: var(--wov-font-heading), 'Cinzel', serif;
font-size: 28px;
font-weight: 500;
margin-top: 0;
margin-bottom: 30px;
color: #111;
}
body.woocommerce-account:has(#customer_login) .woocommerce-form-login input.input-text,
body.woocommerce-account:has(#customer_login) .woocommerce-form-register input.input-text {
background: #ffffff !important;
border: 1px solid #ddd !important;
border-radius: 4px !important;
padding: 14px 15px !important;
width: 100% !important;
box-shadow: none !important;
font-family: 'Poppins', sans-serif !important;
font-size: 14px !important;
}
body.woocommerce-account:has(#customer_login) input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 30px white inset !important;
}
body.woocommerce-account:has(#customer_login) .woocommerce-form-login input.input-text:focus,
body.woocommerce-account:has(#customer_login) .woocommerce-form-register input.input-text:focus {
border-color: #111 !important;
}
body.woocommerce-account:has(#customer_login) .woocommerce-form-login label,
body.woocommerce-account:has(#customer_login) .woocommerce-form-register label {
font-family: 'Poppins', sans-serif;
font-size: 13px;
font-weight: 600;
color: #111;
margin-bottom: 8px;
display: block;
}
body.woocommerce-account:has(#customer_login) .woocommerce-form-login label.woocommerce-form__label-for-checkbox {
display: inline-flex !important;
align-items: center !important;
font-weight: 400 !important;
cursor: pointer;
}
body.woocommerce-account:has(#customer_login) .woocommerce-form-login input[type="checkbox"] {
margin-right: 8px !important;
margin-top: 0 !important;
accent-color: #111;
}
body.woocommerce-account:has(#customer_login) .woocommerce-form-login button.button,
body.woocommerce-account:has(#customer_login) .woocommerce-form-register button.button {
background: #111 !important;
color: #fff !important;
width: 100% !important;
padding: 16px !important;
border-radius: 4px !important;
font-size: 14px !important;
font-weight: 600 !important;
letter-spacing: 1px !important;
text-transform: uppercase !important;
margin-top: 20px !important;
transition: 0.3s !important;
border: none !important;
}
body.woocommerce-account:has(#customer_login) .woocommerce-form-login button.button:hover,
body.woocommerce-account:has(#customer_login) .woocommerce-form-register button.button:hover {
background: #333 !important;
}
body.woocommerce-account:has(#customer_login) .woocommerce-form-register p {
font-size: 13px;
color: #666;
line-height: 1.6;
font-family: 'Poppins', sans-serif;
}
body.woocommerce-account:has(#customer_login) .woocommerce-privacy-policy-text {
border-top: 1px solid #f0f0f0;
padding-top: 20px;
margin-top: 20px;
}
body.woocommerce-account:has(#customer_login) .woocommerce-form-login .lost_password {
margin-top: 20px;
text-align: left;
}
body.woocommerce-account:has(#customer_login) .woocommerce-form-login .lost_password a {
color: #666 !important;
text-decoration: underline !important;
font-size: 13px;
font-family: 'Poppins', sans-serif;
}
/* ------------------- MOBILE OVERRIDES ------------------- */
@media screen and (max-width: 768px) {
body.woocommerce-account:has(#customer_login) .woocommerce {
padding: 30px 20px;
margin: 20px auto 40px auto;
border-radius: 3px;
position: relative;
padding-top: 45px;
}
body.woocommerce-account:has(#customer_login) .woocommerce::before {
font-size: 32px;
margin-bottom: -10px !important;
}
body.woocommerce-account:has(#customer_login) #customer_login::before {
font-size: 14px;
margin-bottom: 30px;
}
body.woocommerce-account:has(#customer_login) .u-column1,
body.woocommerce-account:has(#customer_login) .u-column2 {
padding: 25px 20px;
min-width: 100%; /* Force stacking */
}
body.woocommerce-account:has(#customer_login) #customer_login {
gap: 25px;
}
}
body.woocommerce-account nav.woocommerce-MyAccount-navigation ul li a svg,
body.woocommerce-account nav.woocommerce-MyAccount-navigation ul li a i {
margin: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
/* =======================================================
HIDE CART VARIATIONS / METADATA
======================================================= */
.woocommerce td.product-name dl.variation,
.woocommerce td.product-name .wc-item-meta,
.woocommerce-cart .product-name .variation,
.woocommerce-checkout .product-name .variation,
.woocommerce-mini-cart .variation {
display: none !important;
}
/* =======================================================
GO TO SHOP PILL BUTTON
======================================================= */
a.wov-pill-btn,
body.woocommerce-cart .woocommerce a.wov-pill-btn {
display: inline-flex !important;
align-items: center !important;
background-color: #111 !important;
color: #fff !important;
padding: 8px 20px !important;
border-radius: 50px !important;
font-family: 'Poppins', sans-serif !important;
font-size: 12px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
text-decoration: none !important;
transition: all 0.3s ease !important;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
margin-bottom: 25px !important;
}
a.wov-pill-btn svg {
margin-right: 10px !important;
transition: transform 0.3s ease !important;
}
a.wov-pill-btn:hover {
background-color: #333 !important;
color: #fff !important;
transform: translateY(-4px) !important;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important;
}
a.wov-pill-btn:hover svg {
transform: translateX(-3px) !important;
}
/* =======================================================
CART PAGE - COUPON & UPDATE CART ACTIONS
======================================================= */
.woocommerce-cart table.cart td.actions {
padding: 20px 0 10px 0 !important;
border-bottom: none !important;
}
.woocommerce-cart table.cart td.actions .coupon {
display: inline-flex !important;
align-items: stretch !important;
gap: 10px !important;
float: left !important;
margin: 0 !important;
}
.woocommerce-cart table.cart td.actions .coupon label {
display: none !important;
}
.woocommerce-cart table.cart td.actions .coupon .input-text {
width: 180px !important;
padding: 0 20px !important;
height: 44px !important;
border: 1px solid #ddd !important;
border-radius: 50px !important;
font-family: 'Poppins', sans-serif !important;
font-size: 13px !important;
color: #111 !important;
box-shadow: none !important;
margin: 0 !important;
}
.woocommerce-cart table.cart td.actions .coupon .input-text:focus {
border-color: #111 !important;
outline: none !important;
}
.woocommerce-cart table.cart td.actions .button {
font-family: 'Poppins', sans-serif !important;
font-size: 12px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
padding: 0 24px !important;
height: 44px !important;
border-radius: 50px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
transition: all 0.3s ease !important;
margin: 0 !important;
line-height: 1 !important;
border: 1px solid transparent !important;
white-space: nowrap !important;
cursor: pointer !important;
box-sizing: border-box !important;
}
.woocommerce-cart table.cart td.actions .coupon .button {
background-color: #111 !important;
color: #fff !important;
border-color: #111 !important;
}
.woocommerce-cart table.cart td.actions .coupon .button:hover {
background-color: #333 !important;
}
.woocommerce-cart table.cart td.actions > button[name="update_cart"] {
background-color: #f7f7f7 !important;
color: #111 !important;
border-color: #e0e0e0 !important;
float: right !important;
}
.woocommerce-cart table.cart td.actions > button[name="update_cart"]:hover {
background-color: #eaeaea !important;
}
@media (max-width: 768px) {
.woocommerce-cart table.cart td.actions .coupon {
float: none !important;
width: 100% !important;
margin-bottom: 10px !important;
}
.woocommerce-cart table.cart td.actions .coupon .input-text {
flex: 1 !important;
width: auto !important;
}
.woocommerce-cart table.cart td.actions > button[name="update_cart"] {
float: none !important;
width: 100% !important;
}
}
/* Checkout Button Oval */
.woocommerce .cart-collaterals .checkout-button,
.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
border-radius: 50px !important;
}
/* Cart table product text left align */
.woocommerce-cart table.cart th,
.woocommerce-cart table.cart td.product-name {
text-align: left !important;
}
/* Cart table header ornament */
.woocommerce-cart table.shop_table thead tr {
position: relative !important;
}
.woocommerce-cart table.shop_table thead::before {
content: "" !important;
display: table-caption !important;
width: 100% !important;
height: 40px !important;
background-position: center bottom 20px !important;
background-size: 80px 18px !important;
margin: 0 !important;
background-image: url('data:image/svg+xml;utf8,') !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: contain !important;
padding-bottom: 8px !important;
}
/* Cart Summary title spacing */
.woocommerce-cart .entry-header,
.woocommerce-cart .page-title {
margin-bottom: 30px !important;
padding-bottom: 20px !important;
border-bottom: 1px solid #eee !important;
}
/* Oval Quantity Buttons (Horizontal) */
.woocommerce .quantity {
display: inline-flex !important;
align-items: center !important;
justify-content: space-between !important;
flex-direction: row !important;
background: #fff !important;
border: 1px solid #ddd !important;
border-radius: 50px !important;
padding: 0 5px !important;
width: 120px !important;
height: 42px !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
.woocommerce .quantity::after,
.woocommerce .quantity::before {
display: none !important;
}
.woocommerce .quantity .minus,
.woocommerce .quantity .plus,
.woocommerce .quantity button.minus,
.woocommerce .quantity button.plus,
.woocommerce .quantity input.minus,
.woocommerce .quantity input.plus {
background: transparent !important;
border: none !important;
color: #111 !important;
font-size: 18px !important;
width: 35px !important;
height: 100% !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
box-shadow: none !important;
position: static !important;
transform: none !important;
}
.woocommerce .quantity .minus:hover,
.woocommerce .quantity .plus:hover {
background: #f9f7f5 !important;
}
.woocommerce .quantity input.qty {
border: none !important;
background: transparent !important;
text-align: center !important;
font-size: 15px !important;
font-weight: 600 !important;
color: #111 !important;
width: 40px !important;
height: 100% !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;
position: static !important;
-moz-appearance: textfield !important;
}
.woocommerce .quantity input.qty::-webkit-outer-spin-button,
.woocommerce .quantity input.qty::-webkit-inner-spin-button {
-webkit-appearance: none !important;
margin: 0 !important;
}
/* Right align Cart Totals and Checkout Totals values */
.woocommerce .cart-collaterals .cart_totals table.shop_table td,
.woocommerce .cart-collaterals .cart_totals table.shop_table td *,
.woocommerce-checkout .woocommerce-checkout-review-order-table td,
.woocommerce-checkout .woocommerce-checkout-review-order-table td * {
text-align: right !important;
justify-content: flex-end !important;
}
/* Ensure the TH (labels) stay left aligned */
.woocommerce .cart-collaterals .cart_totals table.shop_table th,
.woocommerce-checkout .woocommerce-checkout-review-order-table th {
text-align: left !important;
}
/* Fix shipping list alignment */
.woocommerce ul#shipping_method {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
text-align: right !important;
}
.woocommerce ul#shipping_method li {
text-align: right !important;
justify-content: flex-end !important;
}
/* Hide default cart updated notice on cart page (using custom toast instead) */
.woocommerce-cart .woocommerce-message {
display: none !important;
}
/* ---------------------------------------------------- */
/* SHIPPING CALCULATOR (CHANGE ADDRESS) RE-STYLING */
/* ---------------------------------------------------- */
/* Change address link */
.woocommerce-shipping-calculator .shipping-calculator-button {
font-size: 13px !important;
font-weight: 500 !important;
color: #111 !important;
text-decoration: underline !important;
text-underline-offset: 4px !important;
display: inline-block !important;
margin-top: 8px !important;
margin-bottom: 15px !important;
transition: all 0.3s ease !important;
}
.woocommerce-shipping-calculator .shipping-calculator-button:hover {
color: #888 !important;
}
/* Compact form layout */
.woocommerce-shipping-calculator .shipping-calculator-form {
margin-top: 10px !important;
}
.woocommerce-shipping-calculator .shipping-calculator-form .form-row {
margin-bottom: 10px !important;
padding: 0 !important;
}
/* Labels */
.woocommerce-shipping-calculator .shipping-calculator-form label {
font-size: 12px !important;
font-weight: 600 !important;
margin-bottom: 4px !important;
display: block !important;
color: #333 !important;
}
/* Oval Inputs & Selects (Compact) */
.woocommerce-shipping-calculator .shipping-calculator-form input.input-text,
.woocommerce-shipping-calculator .shipping-calculator-form select,
.woocommerce .cart-collaterals .cart_totals table.shop_table td .select2-container .select2-selection--single {
border-radius: 50px !important;
border: 1px solid #ddd !important;
padding: 6px 15px !important;
height: 36px !important;
font-size: 13px !important;
background: #fff !important;
box-shadow: none !important;
max-width: 220px !important;
margin-left: auto !important; /* Keep it right aligned */
}
/* Fix Select2 internal alignment */
.woocommerce .cart-collaterals .cart_totals table.shop_table td .select2-container .select2-selection--single .select2-selection__rendered {
padding: 0 15px 0 0 !important;
line-height: 22px !important;
color: #555 !important;
}
.woocommerce .cart-collaterals .cart_totals table.shop_table td .select2-container .select2-selection--single .select2-selection__arrow {
height: 34px !important;
right: 8px !important;
}
/* Oval Update Button */
.woocommerce-shipping-calculator .shipping-calculator-form button[name="calc_shipping"] {
border-radius: 50px !important;
padding: 0 20px !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
background: #111 !important;
color: #fff !important;
height: 36px !important;
line-height: 36px !important;
margin-top: 5px !important;
width: auto !important;
display: inline-block !important;
box-shadow: none !important;
transition: all 0.3s ease !important;
}
.woocommerce-shipping-calculator .shipping-calculator-form button[name="calc_shipping"]:hover {
background: #333 !important;
transform: translateY(-2px) !important;
}
/* Cart Table Product Image */
.woocommerce table.shop_table td.product-thumbnail img {
width: 85px !important;
max-width: 85px !important;
height: auto !important;
border-radius: 10px !important;
box-shadow: 0 4px 10px rgba(0,0,0,0.06) !important;
object-fit: cover !important;
transition: transform 0.3s ease !important;
}
.woocommerce table.shop_table td.product-thumbnail img:hover {
transform: scale(1.05) !important;
}
.woocommerce table.shop_table td.product-thumbnail {
width: 105px !important;
padding-left: 0 !important;
}
/* Cart Trash Button (Remove) */
.woocommerce table.shop_table a.remove {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 36px !important;
height: 36px !important;
border-radius: 50% !important;
color: #ff3333 !important;
background: transparent !important;
text-decoration: none !important;
transition: all 0.3s ease !important;
padding: 0 !important;
margin: 0 auto !important;
line-height: 1 !important;
}
.woocommerce table.shop_table a.remove:hover {
background: #ff3333 !important;
color: #ffffff !important;
}
/* If it uses an SVG icon inside */
.woocommerce table.shop_table a.remove svg {
width: 20px !important;
height: 20px !important;
fill: none !important;
stroke: currentColor !important;
stroke-width: 1.5 !important;
margin: 0 !important;
}
.woocommerce table.shop_table td.product-remove {
width: 60px !important;
text-align: center !important;
padding: 0 10px !important;
}
/* Mobile Responsive Cart Adjustments */
@media (max-width: 768px) {
/* Full width product image (slightly smaller, left aligned) */
.woocommerce table.shop_table_responsive tr td.product-thumbnail {
display: block !important;
width: 100% !important;
max-width: 100% !important;
text-align: left !important;
padding: 5px 0 15px 0 !important;
border-bottom: none !important;
}
.woocommerce table.shop_table_responsive tr td.product-thumbnail a {
display: block !important;
width: 100% !important;
}
.woocommerce table.shop_table_responsive tr td.product-thumbnail img {
width: 60% !important;
max-width: 220px !important;
height: auto !important;
margin: 0 !important;
border-radius: 12px !important;
}
/* Move Trash button strictly to top right */
.woocommerce table.shop_table_responsive tr td.product-remove {
display: block !important;
width: 100% !important;
text-align: right !important;
padding: 10px 15px 0 !important;
border-bottom: none !important;
}
.woocommerce table.shop_table_responsive tr td.product-remove a.remove {
margin: 0 0 0 auto !important;
float: right !important;
}
/* Clean up the product name row */
.woocommerce table.shop_table_responsive tr td.product-name {
padding-top: 5px !important;
clear: both !important;
/* Force values to the right and labels to the left on mobile cart */
.woocommerce table.shop_table_responsive tr td.product-name,
.woocommerce table.shop_table_responsive tr td.product-price,
.woocommerce table.shop_table_responsive tr td.product-quantity,
.woocommerce table.shop_table_responsive tr td.product-subtotal {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
text-align: right !important;
}
.woocommerce table.shop_table_responsive tr td::before {
float: none !important;
text-align: left !important;
margin-right: 15px !important;
font-weight: 600 !important;
}
/* Ensure the text/links inside take up the right side */
.woocommerce table.shop_table_responsive tr td a:not(.remove),
.woocommerce table.shop_table_responsive tr td span.amount {
text-align: right !important;
margin-left: auto !important;
}
.woocommerce table.shop_table_responsive tr td.product-quantity .quantity {
margin-left: auto !important;
margin-right: 0 !important;
}
}
}
/* Extra space below Cart Summary title */
.woocommerce-cart .cart-summary,
.woocommerce-cart .cart-summary h2 {
margin-bottom: 10px !important;
}
/* Reduce space between Go to shop pill and cart summary */
.woocommerce-cart .return-to-shop {
margin-bottom: 5px !important;
}
.woocommerce-cart .cart-summary {
margin-top: 5px !important;
}
/* Make cart product title slightly smaller */
.woocommerce table.shop_table td.product-name a {
font-size: 14px !important;
font-weight: 500 !important;
line-height: 1.4 !important;
}
/* Hide coupon bubble notification on checkout page */
.woocommerce-checkout .woocommerce-form-coupon-toggle {
display: none !important;
}
/* MOBILE CART RE-ALIGNMENT */
@media (max-width: 768px) {
.woocommerce table.shop_table_responsive tr td.product-name,
.woocommerce table.shop_table_responsive tr td.product-price,
.woocommerce table.shop_table_responsive tr td.product-quantity,
.woocommerce table.shop_table_responsive tr td.product-subtotal {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
text-align: right !important;
}
.woocommerce table.shop_table_responsive tr td::before {
float: none !important;
text-align: left !important;
margin-right: 15px !important;
font-weight: 600 !important;
}
.woocommerce table.shop_table_responsive tr td a:not(.remove),
.woocommerce table.shop_table_responsive tr td span.amount {
text-align: right !important;
margin-left: auto !important;
}
.woocommerce table.shop_table_responsive tr td.product-quantity .quantity {
margin-left: auto !important;
margin-right: 0 !important;
}
/* Fix Cart Totals alignment on mobile */
.woocommerce .cart-collaterals .cart_totals table.shop_table_responsive tr td {
display: block !important;
text-align: right !important;
width: 100% !important;
padding-bottom: 15px !important;
clear: both !important;
}
.woocommerce .cart-collaterals .cart_totals table.shop_table_responsive tr td::before {
float: left !important;
text-align: left !important;
font-weight: 600 !important;
margin-right: 15px !important;
display: block !important;
}
/* Ensure elements inside shipping td stack vertically and align right */
.woocommerce .cart-collaterals .cart_totals table.shop_table_responsive tr td ul#shipping_method,
.woocommerce .cart-collaterals .cart_totals table.shop_table_responsive tr td p.woocommerce-shipping-destination,
.woocommerce .cart-collaterals .cart_totals table.shop_table_responsive tr td .woocommerce-shipping-calculator {
display: block !important;
text-align: right !important;
width: 100% !important;
clear: right !important;
margin-top: 5px !important;
}}
}
/* Completely hide the WooCommerce info bubbles on checkout page */
body.woocommerce-checkout .woocommerce-info {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
}
/* NUKE the coupon bubble from orbit */
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .showcoupon {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
height: 0 !important;
width: 0 !important;
pointer-events: none !important;
position: absolute !important;
z-index: -9999 !important;
}
/* ========================================== */
/* WOV CHECKOUT REDESIGN (SHOPIFY STYLE) */
/* ========================================== */
/* 1. Overall Layout (Bulletproof CSS Grid) */
.woocommerce-checkout form.checkout {
display: grid !important;
grid-template-columns: 55% 40% !important;
justify-content: space-between !important;
align-items: start !important;
}
.woocommerce-checkout form.checkout::before,
.woocommerce-checkout form.checkout::after {
display: none !important;
}
.woocommerce-checkout #customer_details {
grid-column: 1 !important;
grid-row: 1 !important;
width: 100% !important;
max-width: 100% !important;
padding-right: 20px !important;
}
.woocommerce-checkout #order_review {
grid-column: 2 !important;
grid-row: 1 !important;
width: 100% !important;
max-width: 100% !important;
}
.woocommerce-checkout #order_review_heading {
display: none !important;
}
@media (max-width: 992px) {
.woocommerce-checkout form.checkout {
grid-template-columns: 1fr !important;
}
.woocommerce-checkout #customer_details {
grid-column: 1 !important;
grid-row: 1 !important;
padding-right: 0 !important;
}
.woocommerce-checkout #order_review {
grid-column: 1 !important;
grid-row: 2 !important;
padding-right: 0 !important;
margin-top: 40px !important;
margin-bottom: 0 !important;
}
}
/* Hide default WooCommerce Headings */
.woocommerce-checkout h3#order_review_heading,
.woocommerce-checkout .woocommerce-additional-fields h3 {
display: none !important;
}
/* 2. Left Column Header */
.wov-checkout-main-header {
margin-bottom: 30px;
}
.wov-checkout-main-header .wov-return-cart {
font-size: 13px;
color: #b49363;
text-decoration: none;
font-weight: 500;
margin-bottom: 10px;
display: inline-block;
}
.wov-checkout-main-header .wov-checkout-title {
font-size: 32px;
font-weight: 400;
margin: 0;
}
.woocommerce-checkout #customer_details h3 {
font-size: 16px;
font-weight: 600;
margin-top: 20px;
margin-bottom: 15px;
border: none;
}
/* Old floating label block removed */
/* Select2 Support */
.woocommerce-checkout .select2-container--default .select2-selection--single {
height: 54px !important;
padding: 24px 15px 8px 15px !important;
border-radius: 6px !important;
border: 1px solid #ddd !important;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: normal !important;
padding: 0 !important;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 54px !important;
}
/* 4. Place Order Button (Moved to left) */
.wov-moved-place-order {
margin-top: 30px !important;
}
.wov-moved-place-order button#place_order {
width: 100% !important;
background: #111 !important;
color: #fff !important;
height: 54px !important;
border-radius: 6px !important;
font-size: 15px !important;
font-weight: 500 !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
/* 5. Right Column Card */
.woocommerce-checkout #order_review {
border: 1px solid #eaeaea;
border-radius: 3px;
position: relative;
padding-top: 45px;
padding: 30px;
background: #fff;
box-shadow: 0 4px 25px rgba(0,0,0,0.03);
}
.wov-order-summary-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.wov-order-summary-header h2 {
font-size: 20px;
font-weight: 500;
margin: 0;
}
.wov-order-summary-header .wov-edit-cart-link {
font-size: 13px;
color: #b49363;
text-decoration: underline;
}
/* 6. Product List styling */
.woocommerce-checkout table.shop_table {
border: none !important;
margin-bottom: 0 !important;
}
.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td {
border-top: none !important;
border-bottom: 1px solid #f2f2f2 !important;
padding: 15px 0 !important;
background: transparent !important;
}
/* Product row (Using Kadence Native Classes) */
.woocommerce-checkout table.shop_table td.product-name {
display: table-cell !important;
}
.woocommerce-checkout .checkout-product-info {
display: flex !important;
align-items: center;
gap: 15px;
}
.woocommerce-checkout .checkout-product-img {
border-radius: 8px !important;
border: 1px solid #eee !important;
width: 90px !important;
height: 90px !important;
object-fit: cover !important;
}
.woocommerce-checkout .checkout-product-name-qty {
font-size: 13px !important;
font-weight: 500 !important;
line-height: 1.4 !important;
}
.woocommerce-checkout .checkout-product-name-qty strong.product-quantity {
display: block !important;
font-weight: normal !important;
color: #666 !important;
font-size: 12px !important;
margin-top: 4px !important;
}
/* 7. Totals Area */
.woocommerce-checkout table.shop_table tr.cart-subtotal th,
.woocommerce-checkout table.shop_table tr.shipping th,
.woocommerce-checkout table.shop_table tr.order-total th {
font-size: 13px;
font-weight: normal;
color: #333;
}
.woocommerce-checkout table.shop_table tr.order-total th,
.woocommerce-checkout table.shop_table tr.order-total td {
background: #faf8f5 !important;
padding: 20px 15px !important;
border-radius: 6px;
border: none !important;
}
.woocommerce-checkout table.shop_table tr.order-total th {
font-size: 16px;
font-weight: 600;
}
.woocommerce-checkout table.shop_table tr.order-total td {
font-size: 18px !important;
font-weight: 600 !important;
}
/* 8. Coupon Form inside card */
form.checkout_coupon.wov-moved-coupon {
display: flex !important;
margin-top: 20px !important;
padding-top: 20px !important;
border-top: 1px solid #eaeaea !important;
gap: 10px;
}
form.checkout_coupon.wov-moved-coupon .form-row-first {
flex: 1;
margin: 0 !important;
}
form.checkout_coupon.wov-moved-coupon .form-row-last {
margin: 0 !important;
}
form.checkout_coupon.wov-moved-coupon input.input-text {
height: 48px !important;
padding: 0 15px !important;
}
form.checkout_coupon.wov-moved-coupon button.button {
height: 48px !important;
padding: 0 30px !important;
background: #111 !important;
color: #fff !important;
border-radius: 6px !important;
font-weight: 500 !important;
}
/* 9. Payment Box */
#payment {
background: transparent !important;
padding: 0 !important;
margin-top: 20px !important;
}
#payment ul.payment_methods {
border: none !important;
padding: 0 !important;
}
#payment ul.payment_methods li {
background: #faf8f5 !important;
border: 1px solid #eaeaea !important;
border-radius: 6px !important;
padding: 15px !important;
margin-bottom: 10px !important;
}
/* 10. Trust Badges */
.wov-trust-badges {
display: flex;
justify-content: space-between;
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid #eaeaea;
}
.wov-trust-badges .badge {
text-align: center;
flex: 1;
}
.wov-trust-badges .badge svg {
margin-bottom: 10px;
}
.wov-trust-badges .badge h4 {
font-size: 11px;
font-weight: 600;
margin: 0 0 5px 0;
text-transform: none;
letter-spacing: 0;
}
.wov-trust-badges .badge p {
font-size: 10px;
color: #888;
margin: 0;
line-height: 1.3;
}
/* Standard Labels Above Inputs */
.woocommerce-checkout .form-row {
position: relative;
margin-bottom: 20px !important;
}
.woocommerce-checkout .form-row label {
position: relative !important;
display: block !important;
top: 0 !important;
left: 0 !important;
font-size: 13px !important;
font-weight: 500 !important;
color: #333 !important;
z-index: 1 !important;
pointer-events: auto !important;
background: transparent !important;
text-transform: none !important;
letter-spacing: 0 !important;
margin: 0 0 8px 0 !important;
padding: 0 !important;
line-height: normal !important;
}
.woocommerce-checkout .form-row .woocommerce-input-wrapper input,
.woocommerce-checkout .form-row input,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
padding: 0 15px !important;
height: 50px !important;
min-height: 50px !important;
line-height: 50px !important;
box-sizing: border-box !important;
display: block !important;
border-radius: 6px !important;
border: 1px solid #ddd !important;
background: #fff !important;
font-size: 14px !important;
font-weight: 500 !important;
color: #111 !important;
width: 100% !important;
box-shadow: none !important;
}
/* Fix Select2 padding */
.woocommerce-checkout .select2-container .select2-selection--single {
height: 50px !important;
padding: 0 15px !important;
border: 1px solid #ddd !important;
border-radius: 6px !important;
display: flex !important;
align-items: center !important;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: normal !important;
padding: 0 !important;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 50px !important;
}
/* Fix Select2 padding if it's active */
.woocommerce-checkout .select2-container .select2-selection--single {
height: 54px !important;
padding: 25px 15px 6px 15px !important;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 1.2 !important;
padding: 0 !important;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 54px !important;
}
/* Textarea Fix */
.woocommerce-checkout .form-row textarea {
padding: 15px !important;
height: 120px !important;
line-height: 1.5 !important;
}
/* Spacing Fixes for Checkout Top */
.woocommerce-checkout form.checkout {
margin-top: -30px !important; /* Pull everything up closer to nav */
}
.wov-checkout-main-header {
margin-bottom: 15px !important; /* Reduce space below Checkout text */
}
/* Align Order Summary card with Checkout heading */
@media (min-width: 993px) {
.woocommerce-checkout #order_review {
margin-top: 30px !important;
}
}
/* =============================================
CHECKOUT COUPON FORM (Moved via JS)
Kadence sets: .woocommerce form .form-row-first { width:47%; float:left }
We must override with equal or higher specificity.
============================================= */
.woocommerce form.checkout_coupon.wov-moved-coupon {
display: flex !important;
align-items: center !important;
gap: 12px !important;
width: 100% !important;
margin: 20px 0 0 0 !important;
padding: 20px 0 0 0 !important;
border: none !important;
border-top: 1px solid #eaeaea !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* Kill Kadence's width:47% and float:left */
.woocommerce form.checkout_coupon.wov-moved-coupon p.form-row.form-row-first {
flex: 1 1 0% !important;
width: auto !important;
max-width: none !important;
float: none !important;
margin: 0 !important;
padding: 0 !important;
}
.woocommerce form.checkout_coupon.wov-moved-coupon p.form-row.form-row-last {
flex: 0 0 auto !important;
width: auto !important;
float: none !important;
margin: 0 !important;
padding: 0 !important;
}
.woocommerce form.checkout_coupon.wov-moved-coupon input#coupon_code,
.woocommerce form.checkout_coupon.wov-moved-coupon .form-row-first .input-text {
width: 100% !important;
height: 48px !important;
padding: 0 20px !important;
border: 1px solid #ddd !important;
border-radius: 50px !important;
font-size: 14px !important;
font-weight: 400 !important;
color: #333 !important;
background: #fff !important;
box-sizing: border-box !important;
box-shadow: none !important;
}
.woocommerce form.checkout_coupon.wov-moved-coupon button.button,
.woocommerce form.checkout_coupon.wov-moved-coupon button[name="apply_coupon"] {
height: 48px !important;
padding: 0 28px !important;
background: #111 !important;
color: #fff !important;
border: none !important;
border-radius: 50px !important;
font-size: 14px !important;
font-weight: 500 !important;
text-transform: capitalize !important;
line-height: 48px !important;
white-space: nowrap !important;
cursor: pointer !important;
box-sizing: border-box !important;
}
/* Hide the .clear div inside the coupon form */
.woocommerce form.checkout_coupon.wov-moved-coupon .clear {
display: none !important;
}
/* =============================================
ORDER SUMMARY TABLE - Alignment
============================================= */
/* Product price column - right aligned */
.woocommerce-checkout #order_review table.shop_table td.product-total,
.woocommerce-checkout #order_review table.shop_table thead th.product-total {
text-align: right !important;
}
/* Footer value cells (amounts) - right aligned */
.woocommerce-checkout #order_review table.shop_table tfoot td {
text-align: right !important;
}
/* Footer label cells (SUBTOTAL, SHIPMENT, TOTAL text) - left aligned */
.woocommerce-checkout #order_review table.shop_table tfoot th {
text-align: left !important;
}
/* Product name - left aligned */
.woocommerce-checkout #order_review table.shop_table th.product-name,
.woocommerce-checkout #order_review table.shop_table td.product-name {
text-align: left !important;
}
/* Ship to different address checkbox label fix */
#ship-to-different-address label,
.woocommerce-checkout #ship-to-different-address label,
.woocommerce-checkout .form-row label.checkbox,
.woocommerce-checkout label[for="ship-to-different-address-checkbox"] {
display: inline !important;
position: static !important;
top: auto !important;
left: auto !important;
font-size: 25px !important;
font-weight: 500 !important;
color: #333 !important;
margin: 0 0 0 10px !important;
padding: 0 !important;
vertical-align: middle !important;
}
#ship-to-different-address {
display: flex !important;
align-items: center !important;
margin-bottom: 20px !important;
}
/* Space above Continue to Shipping button */
.woocommerce-checkout #place_order,
.woocommerce-checkout .wov-place-order-wrapper #place_order {
margin-top: 25px !important;
}
/* Checkout product row - center-align image with title+price */
.woocommerce-checkout table.shop_table .cart_item td.product-name {
padding: 12px 0 !important;
vertical-align: middle !important;
}
.woocommerce-checkout .checkout-product-info {
display: flex !important;
align-items: center !important;
gap: 12px !important;
}
.woocommerce-checkout .checkout-product-img {
width: 90px !important;
height: 90px !important;
object-fit: cover !important;
border-radius: 8px !important;
border: 1px solid #eee !important;
flex-shrink: 0 !important;
}
.woocommerce-checkout .checkout-product-name-qty {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
text-align: left !important;
align-items: flex-start !important;
font-size: 13px !important;
font-weight: 500 !important;
line-height: 1.4 !important;
}
/* Vertically center the price with the product row */
.woocommerce-checkout table.shop_table .cart_item td.product-total {
vertical-align: middle !important;
padding: 12px 0 !important;
}
/* Reduce space between product row and SUBTOTAL row */
.woocommerce-checkout table.shop_table tbody tr:last-child td {
padding-bottom: 8px !important;
}
.woocommerce-checkout table.shop_table tfoot tr:first-child th,
.woocommerce-checkout table.shop_table tfoot tr:first-child td {
padding-top: 8px !important;
}
/* Force product name text strictly left-aligned, no wrapping drift */
.woocommerce-checkout table.shop_table td.product-name,
.woocommerce-checkout table.shop_table td.product-name * {
text-align: left !important;
}
.woocommerce-checkout .wov-checkout-name,
.woocommerce-checkout span.wov-checkout-name {
text-align: left !important;
display: block !important;
}
/* Compact right column spacing */
/* Reduce space between TOTAL box and coupon form */
.woocommerce-checkout form.checkout_coupon.wov-moved-coupon {
margin-top: 10px !important;
padding-top: 12px !important;
}
/* Reduce space between coupon and payment section */
.woocommerce-checkout #payment {
margin-top: 10px !important;
}
.woocommerce-checkout #payment .woocommerce-checkout-payment {
margin-top: 0 !important;
}
/* Tighten payment method box padding */
.woocommerce-checkout #payment ul.payment_methods {
padding: 10px 0 0 0 !important;
}
.woocommerce-checkout #payment ul.payment_methods li {
padding: 8px 15px !important;
margin: 0 !important;
}
/* Reduce space above Place Order button */
.woocommerce-checkout #payment .place-order {
padding: 5px 0 0 0 !important;
margin: 0 !important;
}
/* Vertically center TOTAL text */
.woocommerce-checkout #order_review table.shop_table tr.order-total th,
.woocommerce-checkout #order_review table.shop_table tr.order-total td {
vertical-align: middle !important;
}
/* Increase pricing font sizes in order summary */
.woocommerce-checkout #order_review table.shop_table td.product-total,
.woocommerce-checkout #order_review table.shop_table tr.cart-subtotal td,
.woocommerce-checkout #order_review table.shop_table tr.shipping td {
font-size: 15px !important;
font-weight: 500 !important;
}
/* Vertically center SUBTOTAL and SHIPMENT text and prices */
.woocommerce-checkout #order_review table.shop_table tfoot tr.cart-subtotal th,
.woocommerce-checkout #order_review table.shop_table tfoot tr.cart-subtotal td,
.woocommerce-checkout #order_review table.shop_table tfoot tr.shipping th,
.woocommerce-checkout #order_review table.shop_table tfoot tr.shipping td {
vertical-align: middle !important;
}
/* Keep shipping method and price on one line */
.woocommerce-checkout #order_review table.shop_table tfoot tr.shipping td,
.woocommerce-checkout #order_review table.shop_table tfoot tr.shipping td ul#shipping_method li {
white-space: nowrap !important;
}
/* Reduce space above privacy policy text */
.woocommerce-checkout .woocommerce-privacy-policy-text {
margin-top: 15px !important;
margin-bottom: 5px !important;
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
margin-top: 10px !important;
}
/* Remove margin from p tag inside privacy policy */
.woocommerce-checkout .woocommerce-privacy-policy-text p {
margin-bottom: 0 !important;
}
/* Completely hide duplicate privacy text and place order buttons in the left column */
.woocommerce-checkout #customer_details .woocommerce-privacy-policy-text,
.woocommerce-checkout #customer_details .woocommerce-terms-and-conditions-wrapper,
.woocommerce-checkout #customer_details .place-order,
.woocommerce-checkout #customer_details #place_order {
display: none !important;
}
/* Reduce space around Ship to a different address */
.woocommerce-checkout #ship-to-different-address {
margin-top: 10px !important;
margin-bottom: 10px !important;
}
.woocommerce-checkout .woocommerce-additional-fields {
margin-top: 0 !important;
}
.woocommerce-checkout .woocommerce-additional-fields > h3 {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Force remove all margins surrounding the checkbox */
.woocommerce-checkout .woocommerce-billing-fields {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.woocommerce-checkout .woocommerce-shipping-fields {
margin-top: 0 !important;
padding-top: 0 !important;
}
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
margin-bottom: 0 !important;
}
.woocommerce-checkout .woocommerce-additional-fields {
margin-top: 0 !important;
}
.woocommerce-checkout h3#ship-to-different-address {
margin-top: 5px !important;
margin-bottom: 5px !important;
padding: 0 !important;
}
.woocommerce-checkout p#billing_email_field {
margin-bottom: 0 !important;
}
/* Force Poppins font for checkout input fields */
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__rendered {
font-family: 'Poppins', sans-serif !important;
}
/* Make all checkout inputs oval, white bg, with prominent borders */
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .select2-container .select2-selection--single {
background-color: #ffffff !important;
border: 1px solid #b3b3b3 !important;
border-radius: 50px !important;
padding: 0 20px !important;
box-shadow: none !important;
}
/* Fix height for Select2 dropdowns so they match inputs */
.woocommerce-checkout .select2-container .select2-selection--single {
height: 48px !important;
display: flex !important;
align-items: center !important;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
padding-left: 0 !important;
color: #333 !important;
}
/* Specific fix for textareas to look good with round borders */
.woocommerce-checkout .form-row textarea {
border-radius: 20px !important; /* textareas look weird completely oval */
padding: 15px 20px !important;
}
/* BRUTE FORCE: Make all checkout inputs oval, white bg, with prominent borders */
body.woocommerce-checkout form.checkout input[type="text"],
body.woocommerce-checkout form.checkout input[type="email"],
body.woocommerce-checkout form.checkout input[type="tel"],
body.woocommerce-checkout form.checkout input.input-text,
body.woocommerce-checkout form.checkout select,
body.woocommerce-checkout form.checkout textarea,
body.woocommerce-checkout span.select2-selection.select2-selection--single {
background-color: #ffffff !important;
background: #ffffff !important;
border: 1px solid #999999 !important;
border-radius: 50px !important;
box-shadow: none !important;
outline: none !important;
}
/* Fix padding for text inputs so text doesn't hit the curve */
body.woocommerce-checkout form.checkout input[type="text"],
body.woocommerce-checkout form.checkout input[type="email"],
body.woocommerce-checkout form.checkout input[type="tel"],
body.woocommerce-checkout form.checkout input.input-text {
padding: 0 20px !important;
height: 48px !important;
}
/* Fix textarea border radius so it doesn't look weird */
body.woocommerce-checkout form.checkout textarea {
border-radius: 20px !important;
padding: 15px 20px !important;
}
/* Make all input text and placeholders match the Select2 dropdown weight and color */
body.woocommerce-checkout form.checkout input[type="text"],
body.woocommerce-checkout form.checkout input[type="email"],
body.woocommerce-checkout form.checkout input[type="tel"],
body.woocommerce-checkout form.checkout input.input-text,
body.woocommerce-checkout form.checkout select,
body.woocommerce-checkout form.checkout textarea,
body.woocommerce-checkout span.select2-selection.select2-selection--single,
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
color: #444444 !important;
font-weight: 400 !important;
}
/* Placeholders */
body.woocommerce-checkout form.checkout input::placeholder,
body.woocommerce-checkout form.checkout textarea::placeholder {
color: #444444 !important;
font-weight: 400 !important;
opacity: 1 !important;
}
body.woocommerce-checkout form.checkout input::-webkit-input-placeholder,
body.woocommerce-checkout form.checkout textarea::-webkit-input-placeholder {
color: #444444 !important;
font-weight: 400 !important;
opacity: 1 !important;
}
body.woocommerce-checkout form.checkout input::-moz-placeholder,
body.woocommerce-checkout form.checkout textarea::-moz-placeholder {
color: #444444 !important;
font-weight: 400 !important;
opacity: 1 !important;
}
/* Fix Order Summary box alignment and padding on mobile */
@media (max-width: 768px) {
.woocommerce-checkout #order_review {
padding: 20px 15px !important;
margin-left: -15px !important;
margin-right: -15px !important;
margin-top: 30px !important;
width: calc(100% + 30px) !important;
max-width: none !important;
box-sizing: border-box !important;
}
}
/* Make pricing slightly smaller on mobile */
@media (max-width: 768px) {
.woocommerce-checkout #order_review table.shop_table td.product-total,
.woocommerce-checkout #order_review table.shop_table tr.cart-subtotal td,
.woocommerce-checkout #order_review table.shop_table tr.shipping td {
font-size: 13px !important;
}
.woocommerce-checkout table.shop_table tr.order-total td {
font-size: 16px !important;
}
}
/* Give product title more width on mobile to prevent aggressive wrapping */
@media (max-width: 768px) {
.woocommerce-checkout #order_review table.shop_table td.product-name,
.woocommerce-checkout #order_review table.shop_table th.product-name {
width: 75% !important;
}
.woocommerce-checkout #order_review table.shop_table td.product-total,
.woocommerce-checkout #order_review table.shop_table th.product-total {
width: 25% !important;
text-align: right !important;
}
.woocommerce-checkout #order_review table.shop_table .checkout-product-name-qty {
width: 100% !important;
}
}
/* Force table layout to respect widths on mobile */
@media (max-width: 768px) {
.woocommerce-checkout #order_review table.shop_table {
table-layout: fixed !important;
width: 100% !important;
}
.woocommerce-checkout #order_review table.shop_table td.product-name,
.woocommerce-checkout #order_review table.shop_table th.product-name {
width: 70% !important;
}
.woocommerce-checkout #order_review table.shop_table td.product-total,
.woocommerce-checkout #order_review table.shop_table th.product-total {
width: 30% !important;
text-align: right !important;
}
.woocommerce-checkout .checkout-product-info {
flex-wrap: nowrap !important;
}
.woocommerce-checkout .checkout-product-name-qty {
flex: 1 1 auto !important;
min-width: 0 !important; /* allows flex item to shrink below content size to wrap */
}
.woocommerce-checkout .checkout-product-img {
flex: 0 0 70px !important; /* Make image slightly smaller on mobile to save space */
width: 70px !important;
height: 70px !important;
}
}
/* Hide Return to Cart link completely */
.wov-return-cart {
display: none !important;
}
/* Reduce space above and below Checkout heading on mobile */
@media (max-width: 768px) {
.woocommerce-checkout .content-area {
padding-top: 10px !important;
}
.woocommerce-checkout .wov-checkout-title {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
}
.woocommerce-checkout .wov-checkout-main-header {
margin-bottom: 20px !important;
}
.woocommerce-checkout form.checkout {
margin-top: -30px !important;
}
}
/* More aggressive space removal */
@media (max-width: 768px) {
.woocommerce-checkout #customer_details {
padding-top: 0 !important;
margin-top: 0 !important;
}
.woocommerce-checkout .woocommerce-billing-fields h3 {
display: none !important; /* Hides default 'Billing details' if it's taking up invisible space */
}
.woocommerce-checkout .wov-checkout-main-header {
margin-top: -10px !important;
padding-bottom: 0 !important;
}
}
/* Reduce top and bottom padding of the main site header */
#masthead .site-primary-header-wrap,
#masthead .site-header-row-layout-builder,
#masthead .site-main-header-inner-wrap {
padding-top: 5px !important;
padding-bottom: 5px !important;
min-height: auto !important;
}
/* Put SINGLE SINK / DOUBLE SINK text in a black box */
.wov-style-sub {
background-color: #111 !important;
color: #fff !important;
display: inline-block !important;
padding: 5px 12px !important;
border-radius: 4px !important;
font-size: 11px !important;
letter-spacing: 1px !important;
margin-top: 5px !important;
margin-bottom: 12px !important;
font-weight: 600 !important;
}
/* Split hero section on mobile: Image on top, Black text box on bottom */
@media (max-width: 768px) {
.wov-hero-slide {
display: block !important;
min-height: auto !important;
background-position: center center !important;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: top center !important;
background-color: transparent !important;
background-image: url('assets/images/phone_slider.png') !important; /* Mobile specific image */
}
.wov-hero-inner {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
transform: none !important;
margin-top: 80vw !important; /* Matches exactly the 1402x1122 aspect ratio of phone_slider.png */
background-color: #111 !important; /* The black box */
width: 100% !important;
max-width: 100% !important;
padding: 40px 20px 50px 20px !important;
box-sizing: border-box !important;
text-align: left !important;
}
.wov-hero-overlay {
bottom: auto !important;
height: 80vw !important; /* Matches image height */
display: none !important; /* Actually, let's just hide the overlay on mobile so it looks clean */
}
.wov-hero-sub {
text-align: left !important;
font-size: 11px !important;
line-height: 1.6 !important;
margin-top: -10px !important;
}
.wov-hero-title {
font-size: 22px !important;
line-height: 1.3 !important;
margin-top: 10px !important;
text-align: left !important;
}
.wov-hero-desc {
font-size: 13px !important;
margin-top: 15px !important;
color: #ddd !important;
text-align: justify !important;
}
}
/* ==========================================================================
Reviews Page Styles
========================================================================== */
.wov-reviews-container {
max-width: 1200px;
margin: 20px auto 60px auto;
padding: 0 20px;
font-family: 'Poppins', sans-serif;
}
.wov-reviews-header {
text-align: center;
margin-bottom: 50px;
}
.wov-reviews-header h2 {
font-family: 'Cinzel', serif;
font-size: 36px;
margin-bottom: 10px;
color: #111;
}
.wov-leaf-divider {
display: none !important;
}
.wov-leaf-divider svg {
width: 24px;
height: 24px;
}
.wov-reviews-sub {
font-size: 14px;
color: #666;
margin-bottom: 10px;
}
.wov-reviews-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-bottom: 30px;
}
.wov-review-card {
background-color: #fff;
color: #333;
padding: 40px 30px;
border-radius: 8px;
border: 1px solid #eee;
box-shadow: 0 4px 15px rgba(0,0,0,0.02);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
transition: box-shadow 0.3s ease;
}
.wov-review-card:hover {
box-shadow: 0 8px 25px rgba(0,0,0,0.05);
}
.wov-quote-icon {
width: 40px;
height: 40px;
background: #fbf9f6;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Georgia', serif;
font-size: 30px;
color: #111;
margin-bottom: 15px;
line-height: 1;
padding-top: 10px; /* offset quote baseline */
}
.wov-stars {
color: #b08b5b; /* Gold star color */
font-size: 18px;
letter-spacing: 2px;
margin-bottom: 20px;
}
.wov-review-card p {
font-size: 14px;
line-height: 1.6;
font-weight: 300;
flex-grow: 1;
margin: 0;
color: #444;
}
.wov-divider {
border: 0;
border-top: 2px solid #eaddcf;
width: 40px;
margin: 25px auto;
}
.wov-reviewer-name {
font-size: 15px;
font-weight: 600;
color: #111;
margin-bottom: 5px;
}
.wov-reviewer-loc {
font-size: 13px;
color: #888;
display: flex;
align-items: center;
gap: 5px;
}
.wov-reviewer-loc svg, .wov-reviewer-loc img {
margin-bottom: 2px;
}
/* Footer Banner */
.wov-reviews-footer-banner {
background-color: #fbf9f6;
border-radius: 8px;
padding: 30px 40px;
display: flex;
align-items: center;
gap: 20px;
}
.wov-rf-icon {
width: 50px;
height: 50px;
background: #f0e9df;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.wov-rf-text {
flex-grow: 1;
}
.wov-rf-text h3 {
margin: 0 0 5px 0;
font-family: 'Cinzel', serif;
font-size: 22px;
color: #111;
}
.wov-rf-text p {
margin: 0;
font-size: 14px;
color: #555;
}
.wov-rf-btn .wov-write-btn {
background: #111;
color: #fff;
padding: 12px 25px;
border-radius: 4px;
text-decoration: none;
font-weight: 500;
font-size: 14px;
letter-spacing: 1px;
transition: background 0.3s;
white-space: nowrap;
}
.wov-rf-btn .wov-write-btn:hover {
background: #333;
}
/* Responsive adjustments */
@media (max-width: 991px) {
.wov-reviews-grid {
grid-template-columns: repeat(2, 1fr);
}
.wov-reviews-footer-banner {
flex-direction: column;
text-align: center;
}
}
@media (max-width: 767px) {
.wov-reviews-container {
margin: 40px auto;
}
.wov-reviews-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.wov-reviews-header h2 {
font-size: 28px;
}
.wov-review-card {
padding: 30px 20px;
}
}
/* Remove Kadence default page container shadow on Reviews page */
.page-id-10062 .entry-content,
.page-id-10062 .single-entry,
.page-id-10062 .content-container,
.page-id-10062 .content-wrap,
.page-id-10062 #inner-wrap {
box-shadow: none !important;
border: none !important;
}
/* Hide Kadence Page Title Hero on Reviews page */
.page-id-10062 .entry-hero {
display: none !important;
}
.page-id-10062 .content-container {
padding-top: 0 !important;
}
.wov-review-card::before {
content: '“';
position: absolute;
top: 5px;
left: 25px;
font-size: 70px;
font-family: 'Georgia', serif;
color: rgba(255, 255, 255, 0.3);
line-height: 1;
}
.page-id-10062 .site-main,
.page-id-10062 .entry-content,
.page-id-10062 .content-container,
.page-id-10062 .content-wrap {
padding-top: 0 !important;
margin-top: 0 !important;
}
/* BRUTE FORCE WHITESPACE REMOVAL FOR REVIEWS PAGE */
.page-id-10062 .site-content,
.page-id-10062 .content-area,
.page-id-10062 .site-main,
.page-id-10062 .content-container,
.page-id-10062 .content-wrap,
.page-id-10062 .entry-content,
.page-id-10062 .single-entry {
padding-top: 0 !important;
margin-top: 0 !important;
}
.page-id-10062 .wov-reviews-container {
margin-top: 20px !important; /* Just a tiny gap */
}
/* BRUTE FORCE BOTTOM WHITESPACE REMOVAL */
.page-id-10062 .site-content,
.page-id-10062 .content-area,
.page-id-10062 .site-main,
.page-id-10062 .content-container,
.page-id-10062 .content-wrap,
.page-id-10062 .entry-content,
.page-id-10062 .single-entry {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
.page-id-10062 .wov-reviews-container {
margin-bottom: 20px !important;
}
/* Swatch Styles for Product Page */
.wov-swatch-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 10px;
}
.wov-swatch-item {
cursor: pointer;
}
.wov-swatch-box {
border: 1px solid #ddd;
border-radius: 6px;
padding: 8px;
text-align: center;
background: #fff;
transition: all 0.2s ease;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.wov-swatch-box img {
max-width: 100%;
height: 50px;
object-fit: cover;
margin-bottom: 6px;
border-radius: 4px;
}
.wov-swatch-placeholder {
height: 50px;
background: #f5f5f5;
margin-bottom: 6px;
border-radius: 4px;
}
.wov-swatch-title {
font-size: 11px;
font-weight: 500;
color: #333;
display: block;
line-height: 1.2;
}
.wov-swatch-price {
display: block;
font-size: 10px;
color: #888;
margin-top: 2px;
}
.wov-swatch-item input:checked + .wov-swatch-box {
border-color: #111;
box-shadow: 0 0 0 1px #111;
background: #fafafa;
}
@media(max-width: 768px) {
.wov-swatch-grid {
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
}
}