html .first-bg,
aside .block h4,
.pagination ul .active a,
button.button span,
.button.btn-checkout,
.iview-prevNav,
a.iview-nextNav,
.dl-menuwrapper button,
.dl-menuwrapper .dl-menu,
.i-tab li.active {
background-color: #1F3D2B;
}
html .first-bg-hover:hover,
.pagination ul a:hover {
background-color: #1F3D2B;
}
html .first-color,
.price,
.btn-icon i {
color: #1F3D2B;
}
html .first-brd,
.pagination ul .active a,
.sf-menu>li>a:after {
border-color: #1F3D2B;
}
/* Global Container Fix */
.container_9 {
max-width: 80%;
margin: 0 auto;
padding: 0 20px;
width: 100%;
box-sizing: border-box;
}
html .second-bg,
.sf-menu ul {
background: #1F3D2B;
}
html .second-color {
color: #1F3D2B;
}
html .second-brd {
border-color: #1F3D2B;
}
html .third-bg {
background: #fff;
}
html .third-color {
color: #fff;
}
html .third-brd {
border-color: #fff;
}
html .fourth-bg,
.cart-table .btn-update span,
.opc .active .step-title {
background-color: #424242;
}
html .fourth-color {
color: #424242;
}
html .fourth-brd {
border-color: #424242;
}
html .fifth-bg,
.cart .discount h2,
.cart .shipping h2,
.cart .totals th {
background-color: #212224;
}
html .fifth-color {
color: #212224;
}
html .fifth-brd {
border-color: #212224;
}
/* WooCommerce Custom Styles */
.woocommerce .breadcrumb-container {
margin-bottom: 30px;
width: 100%;
display: inline-block;
}
.woocommerce span.onsale {
background-color: #EB340A !important;
border-radius: 0;
min-height: 32px;
line-height: 32px;
padding: 0 12px;
}
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order,
.woocommerce .cart .button,
.woocommerce .cart input.button {
background-color: #1F3D2B !important;
color: #fff !important;
padding: 12px 25px !important;
font-family: 'Open Sans', sans-serif !important;
text-transform: uppercase !important;
font-weight: 600 !important;
border-radius: 0 !important;
border: none !important;
transition: all 0.3s ease !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
background-color: #1a3324 !important;
text-decoration: none !important;
}
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
color: #1F3D2B !important;
font-size: 1.25em;
font-weight: 700;
}
.woocommerce table.shop_table thead {
background-color: #212224 !important;
color: #fff !important;
}
.woocommerce table.shop_table thead th {
padding: 15px !important;
text-transform: uppercase;
}
.woocommerce-info,
.woocommerce-message {
border-top-color: #1F3D2B !important;
}
.woocommerce-info::before,
.woocommerce-message::before {
color: #1F3D2B !important;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
background: #1F3D2B !important;
color: #fff !important;
}
/* Single Product Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs {
border-bottom: 2px solid #1F3D2B !important;
padding-left: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
background: #f5f5f5 !important;
border: none !important;
border-radius: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
background: #1F3D2B !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
color: #fff !important;
text-shadow: none !important;
}
/* Related Products */
.woocommerce section.related.products h2 {
font-family: 'Open Sans', sans-serif;
text-transform: uppercase;
border-bottom: 1px solid #ddd;
padding-bottom: 10px;
margin-bottom: 20px;
}
/* ==========================================================================
CLEAN & BEAUTIFUL PRODUCT GRID
========================================================================== */
/* Grid Layout */
.woocommerce ul.products {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 30px !important;
/* Increased gap for luxurious breathing room between cards */
padding: 0 !important;
margin-bottom: 60px !important;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after {
display: none !important;
}
/* The Card */
.woocommerce ul.products li.product {
background: #fff !important;
border: none !important;
border-radius: 12px !important;
padding: 15px !important;
margin: 0 !important;
float: none !important;
width: 100% !important;
transition: 0.3s !important;
text-align: left !important;
display: flex !important;
flex-direction: column !important;
position: relative !important;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08) !important;
}
.woocommerce ul.products li.product:hover {
transform: translateY(-10px) scale(1.03) !important;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
}
/* Image */
.woocommerce ul.products li.product img {
aspect-ratio: 1 / 1 !important;
height: auto !important;
width: 100% !important;
object-fit: cover !important;
object-position: center !important;
/* aspect-ratio (not a fixed px height) keeps the SAME crop of a photo at any card
width, so mobile (1-col) and desktop (4-col) grids frame it identically. */
mix-blend-mode: normal !important;
border-radius: 8px !important;
margin-bottom: 15px !important;
background: #f7f5f2 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* Typography */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-size: 15px !important;
font-weight: 600 !important;
color: #333 !important;
margin-bottom: 5px !important;
padding: 0 !important;
line-height: 1.4 !important;
}
.woocommerce ul.products li.product .price {
font-size: 16px !important;
color: #b12704 !important;
/* Match template new price red */
font-weight: 700 !important;
margin-bottom: 15px !important;
display: block !important;
}
/* Push button to bottom */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price {
flex-grow: 0 !important;
}
.woocommerce ul.products li.product>a:first-child {
flex-grow: 1 !important;
display: flex !important;
flex-direction: column !important;
}
.woocommerce ul.products li.product .price del {
color: #999 !important;
font-weight: 400 !important;
font-size: 13px !important;
margin-right: 5px;
}
/* Mobile Responsiveness for Grid */
@media (max-width: 1200px) {
.woocommerce ul.products {
grid-template-columns: repeat(3, 1fr) !important;
gap: 20px !important;
}
}
@media (max-width: 768px) {
.woocommerce ul.products {
grid-template-columns: repeat(2, 1fr) !important;
gap: 15px !important;
}
}
@media (max-width: 480px) {
.woocommerce ul.products {
grid-template-columns: 1fr !important;
gap: 15px !important;
}
}
/* Deactivate Compare Globally */
.compare,
.link-compare,
.yith-woocompare-button,
.yith-woocompare-widget,
.woocommerce .compare,
.woocommerce-page .compare,
a.compare,
button.compare {
display: none !important;
visibility: hidden !important;
max-height: 0 !important;
overflow: hidden !important;
}
/* Add to Cart - Clean & Simple at the bottom */
.woocommerce ul.products li.product .button {
display: block !important;
width: 100% !important;
text-align: center !important;
padding: 12px 0 !important;
border-radius: 4px !important;
font-size: 13px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
margin: 0 !important;
border: none !important;
cursor: pointer !important;
background: #1F3D2B !important;
color: #fff !important;
transition: 0.2s;
}
.woocommerce ul.products li.product .button:hover {
background: #152a1d !important;
}
/* Sale Badge - Premium Pill on Top Right */
.woocommerce ul.products li.product .onsale {
position: absolute !important;
top: 10px !important;
left: 10px !important;
right: auto !important;
background: red !important;
color: #fff !important;
font-size: 12px !important;
padding: 5px 8px !important;
border-radius: 5px !important;
text-transform: none !important;
letter-spacing: normal !important;
font-weight: normal !important;
line-height: 1 !important;
min-height: auto !important;
box-shadow: none !important;
}
/* ==========================================================================
PRIMARY MENU REFINEMENTS (Supplemental)
========================================================================== */
.sf-contener {
border-top: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.sf-menu>li {
float: none !important;
display: inline-block !important;
}
.sf-menu>li:last-child>a {
border-right: none !important;
}
.sf-menu>li>a:hover {
background: rgba(0, 0, 0, 0.1) !important;
color: #fff !important;
}
/* Fix for standard WordPress menu classes */
.menu-item a {
text-transform: uppercase !important;
}
/* ==========================================================================
WISHLIST BUTTON REFINEMENTS - AGGRESSIVE FIX
========================================================================== */
/* Target exactly what shows in the image with high specificity */
.woocommerce .yith-wcwl-add-to-wishlist .add_to_wishlist,
.woocommerce .yith-wcwl-add-to-wishlist .yith-wcwl-add-button>a {
width: 40px !important;
height: 40px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 50% !important;
background: #fff !important;
border: 1px solid #ddd !important;
color: #333 !important;
font-size: 0 !important;
/* Hides the text */
text-indent: 0 !important;
/* Reset indent if it caused issues */
position: relative !important;
padding: 0 !important;
margin: 0 !important;
transition: 0.3s all ease !important;
text-decoration: none !important;
}
/* Hide any span tags that might contain the text */
.woocommerce .yith-wcwl-add-to-wishlist .add_to_wishlist span,
.woocommerce .yith-wcwl-add-to-wishlist .yith-wcwl-add-button>a span {
display: none !important;
}
/* Ensure Heart Icon stays visible and centered */
.woocommerce .yith-wcwl-add-to-wishlist .add_to_wishlist:before,
.woocommerce .yith-wcwl-add-to-wishlist .yith-wcwl-add-button>a:before,
.woocommerce .yith-wcwl-add-to-wishlist .add_to_wishlist i,
.woocommerce .yith-wcwl-add-to-wishlist .yith-wcwl-add-button>a i {
content: "\f004" !important;
/* Heart Icon */
font-family: "FontAwesome" !important;
font-size: 18px !important;
line-height: 1 !important;
display: block !important;
margin: 0 !important;
color: #333 !important;
}
/* Hover effect */
.woocommerce .yith-wcwl-add-to-wishlist .add_to_wishlist:hover,
.woocommerce .yith-wcwl-add-to-wishlist .yith-wcwl-add-button>a:hover {
background: #1F3D2B !important;
color: #fff !important;
border-color: #1F3D2B !important;
}
.woocommerce .yith-wcwl-add-to-wishlist .add_to_wishlist:hover:before,
.woocommerce .yith-wcwl-add-to-wishlist .yith-wcwl-add-button>a:hover:before {
color: #fff !important;
}
/* ==========================================================================
HEADER PERFECT ALIGNMENT (MATCHING DESIGN)
========================================================================== */
/* Top Links Bar */
.navbar.navbar-static {
width: 100% !important;
float: none !important;
display: block !important;
}
.top-links {
padding: 0 !important;
background-color: #1F3D2B !important;
color: #fff !important;
font-size: 13px !important;
float: none !important;
display: block !important;
width: 100% !important;
height: auto !important;
}
.top-links .navbar-inner {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
padding: 8px 20px !important;
max-width: 80% !important;
margin: 0 auto !important;
width: 100% !important;
box-sizing: border-box !important;
}
.top-links .navbar-inner::before,
.top-links .navbar-inner::after {
display: none !important;
content: none !important;
}
.top-links ul.nav {
display: flex !important;
gap: 25px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
float: none !important;
}
.top-links ul.nav.pull-left {
float: none !important;
}
.top-links ul.nav.pull-right {
float: none !important;
}
.top-links ul.nav li {
display: flex !important;
align-items: center !important;
gap: 8px !important;
float: none !important;
}
.top-links ul.nav a {
color: #fff !important;
text-decoration: none !important;
}
.top-links i {
margin: 0 !important;
font-size: 15px !important;
}
/* Main Header Section */
header#header {
display: block !important;
width: 100% !important;
}
/* Middle Header Content */
.header-content {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
padding: 5px 0 !important;
max-width: 80% !important;
margin: 0 auto !important;
width: 100% !important;
box-sizing: border-box !important;
padding-left: 20px !important;
padding-right: 20px !important;
}
.header-content .logo {
margin-right: auto !important;
padding: 0 !important;
float: none !important;
}
/* Search Box Styling & Reordering */
#searchbox {
margin: 0 15px 0 0 !important;
order: 2 !important;
float: none !important;
position: relative !important; /* anchor for the live-search suggestions dropdown */
}
#searchbox p {
margin: 0 !important;
display: flex !important;
align-items: center !important;
border: 1px solid #e5e0d8 !important;
border-radius: 24px !important;
background: #faf9f7 !important;
padding: 0 !important;
}
#searchbox input {
border: none !important;
outline: none !important;
background: transparent !important;
padding: 10px 15px !important;
margin: 0 !important;
box-shadow: none !important;
width: 220px !important;
height: auto !important;
font-size: 13px !important;
color: #666 !important;
/* Strip the native OS input bezel/shadow some mobile browsers (notably
iOS Safari) render by default regardless of border/box-shadow:none. */
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
}
#searchbox p::after {
content: "\f002" !important;
font-family: "FontAwesome" !important;
margin-right: 15px !important;
color: #333 !important;
}
/* Quick Access (Cart & Exchange Boxes) */
.quick-access {
order: 3 !important;
float: none !important;
margin: 0 !important;
}
.quick-access ul {
display: flex !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
gap: 10px !important;
}
.quick-access li {
display: flex !important;
align-items: center !important;
float: none !important;
margin: 0 !important;
}
.quick-access .cart-btn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 40px !important;
height: 40px !important;
color: #1F3D2B !important;
background-color: transparent !important;
background-image: none !important;
/* override any default gradient */
border: 1px solid #1F3D2B !important;
border-radius: 50% !important;
font-size: 16px !important;
text-decoration: none !important;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}
.quick-access .cart-btn:hover {
background-color: #1F3D2B !important;
color: #fff !important;
transform: scale(1.08) !important;
animation: icon-pulse 1.2s infinite !important;
}
.quick-access .cart-btn i {
margin: 0 !important;
color: #1F3D2B !important;
transition: color 0.3s ease !important;
}
.quick-access .cart-btn:hover i {
color: #fff !important;
}
@keyframes icon-pulse {
0% {
box-shadow: 0 0 0 0 rgba(31, 61, 43, 0.4);
}
70% {
box-shadow: 0 0 0 8px rgba(31, 61, 43, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(31, 61, 43, 0);
}
}
.quick-access span {
margin-left: 12px !important;
font-size: 13px !important;
color: #333 !important;
font-weight: 600 !important;
white-space: nowrap !important;
}
/* Navigation Bar Container */
.sf-contener {
clear: both !important;
width: 100% !important;
}
.nav-wrap {
max-width: 80% !important;
margin: 0 auto !important;
padding: 0 20px !important;
box-sizing: border-box !important;
}
.sf-menu {
display: flex !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
border-left: none !important;
}
.sf-menu::before,
.sf-menu::after {
display: none !important;
content: none !important;
}
.sf-menu>li>a {
font-family: 'bebas_neueregular', sans-serif !important;
font-size: 24px !important;
padding: 21px 18px !important;
border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
color: #fff !important;
line-height: 1.22 !important;
text-transform: uppercase !important;
text-decoration: none !important;
height: auto !important;
}
.sf-menu>li:first-child>a {
border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
}
/* ==========================================================================
FOOTER PERFECT ALIGNMENT (MATCHING DESIGN)
========================================================================== */
/* Footer Banner */
.footer-info {
text-align: center;
padding: 30px 0;
}
#footer {
position: relative !important;
background-color: #1F3D2B !important;
color: #fff !important;
margin-top: 50px !important;
}
.footer-wrap {
background-image: url('../images/map-overlay.png') !important;
background-repeat: no-repeat !important;
background-position: center center !important;
padding-top: 50px !important;
padding-bottom: 0 !important;
overflow: visible !important;
max-width: 80% !important;
margin: 0 auto !important;
width: 100% !important;
box-sizing: border-box !important;
padding-left: 20px !important;
padding-right: 20px !important;
}
.footer-set {
display: flex !important;
justify-content: space-between !important;
margin-bottom: 40px !important;
padding: 0 !important;
gap: 30px !important;
}
.footer-set .block {
flex: 1 1 0% !important;
padding-right: 0 !important;
margin-right: 0 !important;
display: inline-block !important;
float: none !important;
width: auto !important;
vertical-align: top !important;
}
.footer-set .block.last {
margin-right: 0 !important;
}
.footer-set .block h4 {
font-size: 16px !important;
color: #fff !important;
margin-bottom: 20px !important;
text-transform: uppercase !important;
font-weight: 600 !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
padding-bottom: 15px !important;
background: transparent !important;
font-family: 'Open Sans', sans-serif !important;
}
.footer-set .block_content ul {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.footer-set .block_content li {
margin-bottom: 10px !important;
padding: 0 !important;
}
.footer-set .block_content a {
color: rgba(255, 255, 255, 0.75) !important;
text-decoration: none !important;
font-size: 14px !important;
line-height: 1.6 !important;
transition: 0.2s ease !important;
display: inline !important;
}
.footer-set .block_content p {
color: rgba(255, 255, 255, 0.75) !important;
text-decoration: none !important;
font-size: 14px !important;
line-height: 1.6 !important;
transition: 0.2s ease !important;
display: block !important;
margin: 0 !important;
}
.footer-set .block_content a:hover {
color: #fff !important;
text-decoration: underline !important;
}
.footer-set .block_content .menu-item a {
text-transform: none !important;
}
/* Footer Bottom Section (Copyright & Socials) */
#footer-absolute {
position: relative !important;
border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
border-bottom: none !important;
padding: 25px 0 30px !important;
margin-bottom: 0 !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
}
/* Override the absolute positioning from global.css */
#footer-absolute .copy {
position: static !important;
bottom: auto !important;
left: auto !important;
}
#footer-absolute .copy p {
margin: 0 !important;
font-size: 13px !important;
color: rgba(255, 255, 255, 0.8) !important;
}
/* Social Icons - Override absolute positioning from global.css */
#footer-absolute .social {
position: static !important;
bottom: auto !important;
right: auto !important;
}
#footer-absolute .social p {
display: flex !important;
gap: 18px !important;
margin: 0 !important;
align-items: center !important;
}
#footer-absolute .social a {
color: #fff !important;
font-size: 18px !important;
text-decoration: none !important;
transition: 0.2s ease !important;
}
#footer-absolute .social a:hover {
opacity: 0.7 !important;
}
#footer-absolute .social a em {
font-style: normal !important;
margin-left: 0 !important;
}
#footer-absolute .social a span {
display: none !important;
}
#footer-absolute .social a svg {
display: inline-block !important;
width: 20px !important;
height: 20px !important;
vertical-align: middle !important;
fill: currentColor !important;
}
#footer-absolute .social a.avc-social-instagram svg {
fill: none !important;
stroke: currentColor !important;
}
/* Scroll to Top Button Centered Over Border */
.go-top {
position: absolute !important;
top: -28px !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 50px !important;
height: 50px !important;
background-color: #2b4f39 !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border: 5px solid #1F3D2B !important;
box-sizing: content-box !important;
text-decoration: none !important;
z-index: 10 !important;
transition: all 0.3s ease !important;
}
.go-top:hover {
border-radius: 0px !important;
opacity: 0.8 !important;
background-color: #1F3D2B !important;
}
.go-top img {
display: block !important;
margin: 0 auto !important;
}
/* ==========================================================================
ABOUT US PAGE STYLES (MATCHING PREMIUM DESIGN)
========================================================================== */
.about-us-page {
font-family: 'Open Sans', sans-serif;
color: #333;
background-color: #fafafa;
padding: 0 0 60px 0;
}
.about-us-page section {
margin-bottom: 80px;
}
.about-us-page section:last-child {
margin-bottom: 0;
}
.about-us-page .section-heading {
font-family: 'bebas_neueregular', 'Bebas Neue', sans-serif;
font-size: 38px;
color: #1F3D2B;
margin-bottom: 30px;
text-transform: uppercase;
position: relative;
display: inline-block;
border-bottom: none !important;
}
.about-us-page .section-heading::after {
content: "";
position: absolute;
bottom: -8px;
left: 0;
width: 60px;
height: 3px;
background-color: #1F3D2B;
}
.about-us-page .section-heading.centered {
display: block;
text-align: center;
margin-bottom: 45px;
}
.about-us-page .section-heading.centered::after {
left: 50%;
transform: translateX(-50%);
}
/* Hero Section */
.about-hero {
margin-top: 0;
margin-bottom: 80px;
width: 100%;
}
.about-hero-banner picture {
display: block; /* is inline by default, which leaves a baseline gap under the image */
}
.about-hero-banner img {
width: 100%;
height: auto;
border-radius: 0;
box-shadow: none;
display: block;
}
/* Founder Section */
.about-founder-inner {
display: flex;
align-items: center;
gap: 50px;
background: #fff;
padding: 40px;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
.founder-text-col {
flex: 1;
}
.founder-badge {
font-size: 12px;
font-weight: 800;
letter-spacing: 2px;
color: #888;
display: block;
margin-bottom: 5px;
}
.founder-name {
font-family: 'bebas_neueregular', 'Bebas Neue', sans-serif;
font-size: 40px;
color: #1F3D2B;
margin: 0 0 5px 0;
}
.founder-title {
font-size: 16px;
color: #666;
margin: 0 0 20px 0;
font-weight: 600;
}
.founder-bio {
font-size: 15px;
line-height: 1.7;
color: #555;
}
.diamond-bullet {
color: #1F3D2B;
margin-right: 5px;
font-size: 18px;
vertical-align: middle;
}
/* Journey Section */
.journey-box {
background-color: #1F3D2B;
color: #fff;
border-radius: 16px;
padding: 50px 40px;
display: flex;
justify-content: space-between;
gap: 25px;
box-shadow: 0 15px 40px rgba(31, 61, 43, 0.25);
position: relative;
}
@media (min-width: 992px) {
.journey-box::before {
content: "";
position: absolute;
top: 75px;
/* Aligned with center of icons (50px padding + 25px half icon height) */
left: 10%;
right: 10%;
height: 1px;
border-top: 2px dashed rgba(255, 255, 255, 0.25);
z-index: 1;
}
}
.journey-col {
flex: 1;
position: relative;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
@media (min-width: 992px) {
.journey-col:not(:last-child)::after {
content: "";
position: absolute;
top: 25%;
right: -12.5px;
/* Halfway in the 25px gap */
width: 1px;
height: 50%;
border-right: 1.5px dashed rgba(255, 255, 255, 0.2);
}
}
.journey-icon {
width: 50px;
height: 50px;
background-color: #fff;
color: #1F3D2B;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 25px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
z-index: 2;
position: relative;
transition: transform 0.3s ease;
}
.journey-icon:hover {
transform: scale(1.1);
}
.journey-icon svg {
width: 22px;
height: 22px;
color: #1F3D2B;
display: block;
}
.journey-col h3 {
font-size: 16px;
font-weight: 700;
line-height: 1.4;
margin-bottom: 15px;
text-transform: uppercase;
}
.journey-col p {
font-size: 13px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.85);
margin: 0;
}
/* Stats Section */
.about-stats {
padding: 35px 0;
border-top: 1px solid rgba(31, 61, 43, 0.12);
border-bottom: 1px solid rgba(31, 61, 43, 0.12);
}
.stats-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 30px;
}
.stat-item {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
position: relative;
}
@media (min-width: 992px) {
.stat-item:not(:last-child)::after {
content: "";
position: absolute;
right: -15px;
/* Spaced perfectly in the gap */
top: 10%;
height: 80%;
width: 1px;
border-right: 1.5px dashed rgba(31, 61, 43, 0.2);
}
}
.stat-icon svg {
width: 40px;
height: 40px;
color: #1F3D2B;
display: block;
}
.stat-text {
display: flex;
flex-direction: column;
}
.stat-text .number {
font-size: 28px;
font-weight: 700;
color: #1F3D2B;
line-height: 1.15;
margin-bottom: 4px;
}
.stat-text .label {
font-size: 12px;
color: #1F3D2B;
font-weight: 600;
line-height: 1.35;
}
/* Why Choose & Facility Section */
.facility-inner {
display: flex;
gap: 50px;
align-items: center;
}
.why-choose-col {
flex: 1;
}
.why-list {
list-style: none;
padding: 0;
margin: 0;
}
.why-list li {
font-size: 15px;
line-height: 1.6;
color: #555;
margin-bottom: 18px;
display: flex;
align-items: center;
gap: 12px;
}
.check-icon {
color: #fff;
background-color: #1F3D2B;
width: 22px;
height: 22px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.check-icon svg {
width: 11px;
height: 11px;
color: #fff;
display: block;
}
.facility-image-col {
flex: 1.2;
}
.facility-img-wrapper {
position: relative;
display: flex;
}
.facility-img-wrapper img {
width: 100%;
height: auto;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
.facility-card {
position: absolute;
right: -100px;
top: 60%;
transform: translateY(-50%);
background-color: #1F3D2B;
color: #fff;
padding: 25px;
border-radius: 12px;
width: 220px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
z-index: 10;
}
.facility-card-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 15px;
}
.facility-card-header svg {
width: 20px;
height: 20px;
color: #fff;
display: block;
}
.facility-card-header h3 {
font-size: 16px;
font-weight: 700;
margin: 0;
text-transform: uppercase;
}
.facility-address {
font-size: 12px;
line-height: 1.5;
opacity: 0.9;
margin-bottom: 15px;
}
.facility-divider {
height: 1px;
border-top: 1px dashed rgba(255, 255, 255, 0.25);
margin-bottom: 15px;
}
.facility-size {
font-size: 12px;
line-height: 1.4;
margin: 0;
}
/* Certifications Section */
.certs-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
background: #fff;
padding: 30px;
border-radius: 12px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04);
}
.cert-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
@media (min-width: 992px) {
.cert-item:not(:last-child) {
border-right: 1px dashed #eee;
}
}
.cert-logo {
height: 60px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
}
.cert-label {
font-size: 11px;
font-weight: 700;
color: #666;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Certification Logos Custom Styling */
.text-sedex {
font-family: 'Open Sans', sans-serif;
font-weight: 800;
font-size: 32px;
color: #AF137B;
letter-spacing: -1.5px;
}
/* Responsiveness */
@media (max-width: 991px) {
.about-founder-inner {
flex-direction: column;
text-align: center;
padding: 30px 20px;
}
.journey-box {
flex-direction: column;
gap: 40px;
padding: 40px 20px;
}
.journey-col {
padding-right: 0;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.journey-col::after {
display: none !important;
}
.stats-row {
flex-direction: column;
gap: 30px;
}
.stat-item {
width: 100%;
justify-content: center;
padding-right: 0 !important;
}
.stat-item::after {
display: none !important;
}
.facility-inner {
flex-direction: column;
}
.facility-card {
position: relative;
right: auto;
top: auto;
transform: none;
width: 100%;
margin-top: 20px;
box-sizing: border-box;
}
.certs-row {
flex-direction: column;
gap: 35px;
padding: 30px 20px;
}
.cert-item {
width: 100%;
}
}
/* ==========================================================================
AVFURN CART PAGE — Modern Custom Styles (Mockup Aligned)
========================================================================== */
/* Fix container constraints to match the theme header/navigation (1200px max-width) */
body.woocommerce-cart #page > .container,
body.woocommerce-cart .container {
max-width: 1200px !important;
width: 100% !important;
padding-left: 20px !important;
padding-right: 20px !important;
margin: 0 auto !important;
box-sizing: border-box !important;
}
/* Kill WooCommerce's default tabular rendering, force a modular block layout */
body.woocommerce-cart table.shop_table.cart,
body.woocommerce-cart table.woocommerce-cart-form__contents {
display: block !important;
border: none !important;
background: transparent !important;
width: 100% !important;
}
body.woocommerce-cart table.shop_table.cart thead,
body.woocommerce-cart table.woocommerce-cart-form__contents thead {
display: none !important;
}
body.woocommerce-cart table.shop_table.cart tbody,
body.woocommerce-cart table.woocommerce-cart-form__contents tbody {
display: block !important;
}
body.woocommerce-cart table.shop_table.cart tr,
body.woocommerce-cart table.woocommerce-cart-form__contents tr {
display: block !important;
}
body.woocommerce-cart table.shop_table.cart td {
display: block !important;
border: none !important;
padding: 0 !important;
}
body.woocommerce-cart .cart-collaterals {
float: none !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
body.woocommerce-cart .cart-collaterals .col2-set {
float: none !important;
width: 100% !important;
}
body.woocommerce-cart .cart_totals,
body.woocommerce-cart .woocommerce .cart-collaterals .cart_totals,
body.woocommerce-cart .woocommerce-page .cart-collaterals .cart_totals {
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;
float: none !important;
width: 100% !important;
}
/* Main page wrapper */
body.woocommerce-cart .avc-cart-page {
font-family: 'Open Sans', sans-serif;
color: #191A19;
padding: 40px 0 80px;
width: 100%;
background: transparent;
}
/* Modern Header (Clean Title & Breadcrumbs on White Background) */
body.woocommerce-cart .avc-cart-header-clean {
margin-bottom: 30px;
}
body.woocommerce-cart .avc-cart-title-clean {
font-family: 'Open Sans', sans-serif;
font-size: 32px;
font-weight: 700;
color: #1F3D2B;
margin: 0 0 6px;
line-height: 1.2;
}
body.woocommerce-cart .avc-breadcrumb-clean {
font-size: 13px;
color: #888;
}
body.woocommerce-cart .avc-breadcrumb-clean a {
color: #888;
text-decoration: none;
transition: color 0.2s;
}
body.woocommerce-cart .avc-breadcrumb-clean a:hover {
color: #1F3D2B;
}
body.woocommerce-cart .avc-breadcrumb-sep {
margin: 0 4px;
color: #bbb;
}
/* Empty cart state — rehauled */
body.woocommerce-cart .avc-cart-empty {
text-align: center;
max-width: 560px;
margin: 50px auto;
padding: 60px 40px;
background: #fff;
border: 1px solid #f0ece6;
border-radius: 18px;
box-shadow: 0 14px 40px rgba(31, 61, 43, 0.06);
}
body.woocommerce-cart .avc-cart-empty__icon {
width: 96px;
height: 96px;
margin: 0 auto 24px;
display: flex;
align-items: center;
justify-content: center;
background: #f4f7f5;
color: #1F3D2B;
border-radius: 50%;
}
body.woocommerce-cart .avc-cart-empty h2 {
font-size: 26px;
font-weight: 700;
color: #1F3D2B;
margin: 0 0 12px;
}
body.woocommerce-cart .avc-cart-empty p {
font-size: 15px;
color: #777;
line-height: 1.6;
margin: 0 0 28px;
}
body.woocommerce-cart .avc-cart-empty__cta {
display: inline-block;
background: #1F3D2B;
color: #fff;
padding: 14px 34px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
text-decoration: none;
transition: background 0.2s ease, transform 0.2s ease;
}
body.woocommerce-cart .avc-cart-empty__cta:hover { background: #2b4f39; transform: translateY(-2px); }
/* Two-column layout */
body.woocommerce-cart .avc-cart-layout {
display: grid !important;
grid-template-columns: 1fr 400px !important;
gap: 32px !important;
align-items: start !important;
}
body.woocommerce-cart .avc-cart-left {
min-width: 0;
}
body.woocommerce-cart .avc-cart-right {
position: sticky;
top: 30px;
}
/* LEFT COLUMN CARD */
body.woocommerce-cart .avc-cart-card {
background: #ffffff;
border: 1px solid #eaeaea;
border-radius: 10px;
padding: 24px;
}
/* Desktop Grid Headers */
body.woocommerce-cart .avc-cart-headers {
display: grid !important;
grid-template-columns: 100px 1fr 100px 120px 100px !important;
align-items: center !important;
gap: 16px !important;
border-bottom: 1px solid #eaeaea !important;
padding-bottom: 14px !important;
margin-bottom: 10px !important;
}
body.woocommerce-cart .avc-cart-headers span {
font-size: 12px !important;
font-weight: 700 !important;
color: #888 !important;
letter-spacing: 0.05em !important;
text-transform: uppercase !important;
}
body.woocommerce-cart .avc-h-price,
body.woocommerce-cart .avc-h-qty {
text-align: center !important;
}
body.woocommerce-cart .avc-h-subtotal {
text-align: right !important;
}
/* Grid Item Row */
body.woocommerce-cart .avc-cart-item {
display: grid !important;
grid-template-columns: 100px 1fr 100px 120px 100px !important;
align-items: center !important;
gap: 16px !important;
padding: 20px 0 !important;
border-bottom: 1px solid #eaeaea !important;
background: transparent !important;
border-top: none !important;
border-left: none !important;
border-right: none !important;
border-radius: 0 !important;
margin-bottom: 0 !important;
box-shadow: none !important;
}
/* Product image */
body.woocommerce-cart .avc-item-image {
width: 80px !important;
min-width: 80px !important;
height: 80px !important;
flex-shrink: 0 !important;
background: #ffffff !important;
border: 1px solid #eaeaea !important;
border-radius: 8px !important;
overflow: hidden !important;
aspect-ratio: 1/1;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
body.woocommerce-cart .avc-item-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
padding: 0 !important;
box-sizing: border-box !important;
}
body.woocommerce-cart .avc-item-image a {
display: block;
width: 100%;
height: 100%;
}
/* Name & remove link col */
body.woocommerce-cart .avc-item-meta-col {
min-width: 0;
}
body.woocommerce-cart .avc-item-name {
margin-bottom: 2px;
}
body.woocommerce-cart .avc-item-name a {
font-size: 15px !important;
font-weight: 700 !important;
color: #111 !important;
text-decoration: none !important;
line-height: 1.3 !important;
transition: color 0.2s !important;
}
body.woocommerce-cart .avc-item-name a:hover {
color: #1F3D2B !important;
}
body.woocommerce-cart .avc-item-attrs {
font-size: 12px !important;
color: #777 !important;
margin-bottom: 4px !important;
}
body.woocommerce-cart .avc-item-attrs dl {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
gap: 2px 10px;
}
body.woocommerce-cart .avc-item-attrs dt,
body.woocommerce-cart .avc-item-attrs dd {
margin: 0;
font-size: 12px;
}
body.woocommerce-cart a.avc-remove-text {
display: inline-block !important;
width: auto !important;
height: auto !important;
min-width: 0 !important;
padding: 0 !important;
margin-top: 6px !important;
font-size: 13px !important;
font-weight: 500 !important;
line-height: 1.4 !important;
color: #999 !important;
background: none !important;
border: 0 !important;
border-radius: 0 !important;
text-decoration: none !important;
transition: color 0.2s !important;
}
body.woocommerce-cart a.avc-remove-text:hover {
color: #d32f2f !important;
background: none !important;
text-decoration: underline !important;
}
/* Kill the default WooCommerce "×" / red-circle that was colliding with the text */
body.woocommerce-cart a.avc-remove-text::before,
body.woocommerce-cart a.avc-remove-text::after {
content: none !important;
display: none !important;
}
/* Price Column */
body.woocommerce-cart .avc-item-price-col {
font-size: 14px !important;
font-weight: 600 !important;
color: #333 !important;
text-align: center !important;
}
body.woocommerce-cart .avc-item-price-col .amount {
font-weight: 600 !important;
}
/* Qty Column */
body.woocommerce-cart .avc-item-qty-col {
display: flex !important;
justify-content: center !important;
}
body.woocommerce-cart .avc-item-qty-col .quantity {
display: flex !important;
align-items: center !important;
border: 1px solid #ddd !important;
border-radius: 6px !important;
overflow: hidden !important;
height: 38px !important;
width: 104px !important;
margin: 0 !important;
background: #fff !important;
}
body.woocommerce-cart .avc-item-qty-col .quantity .minus,
body.woocommerce-cart .avc-item-qty-col .quantity .plus {
width: 32px !important;
height: 100% !important;
background: #fdfdfd !important;
border: none !important;
cursor: pointer !important;
font-size: 16px !important;
line-height: 1 !important;
color: #666 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
transition: all 0.2s !important;
}
body.woocommerce-cart .avc-item-qty-col .quantity .minus:hover,
body.woocommerce-cart .avc-item-qty-col .quantity .plus:hover {
color: #1F3D2B !important;
background: #f0f5f1 !important;
}
body.woocommerce-cart .avc-item-qty-col .quantity input.qty {
width: 40px !important;
height: 100% !important;
border: none !important;
border-left: 1px solid #ddd !important;
border-right: 1px solid #ddd !important;
text-align: center !important;
font-size: 14px !important;
font-weight: 700 !important;
color: #333 !important;
padding: 0 !important;
background: transparent !important;
-moz-appearance: textfield !important;
appearance: textfield !important;
}
body.woocommerce-cart .avc-item-qty-col .quantity input.qty::-webkit-outer-spin-button,
body.woocommerce-cart .avc-item-qty-col .quantity input.qty::-webkit-inner-spin-button {
-webkit-appearance: none !important;
}
/* Subtotal Column */
body.woocommerce-cart .avc-item-subtotal-col {
font-size: 15px !important;
font-weight: 700 !important;
color: #111 !important;
text-align: right !important;
}
body.woocommerce-cart .avc-item-subtotal-col .amount {
font-weight: 700 !important;
}
/* Actions Row (Coupon + Update) */
body.woocommerce-cart .avc-cart-actions-row {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
padding-top: 20px !important;
border-top: 1px solid #eaeaea !important;
margin-top: 10px !important;
}
body.woocommerce-cart .avc-coupon-box {
display: flex !important;
gap: 10px !important;
}
body.woocommerce-cart .avc-coupon-box input.input-text {
border: 1px solid #ddd !important;
padding: 10px 14px !important;
border-radius: 6px !important;
font-size: 13px !important;
color: #333 !important;
background: #FFF !important;
width: 180px !important;
outline: none !important;
height: 42px !important;
box-sizing: border-box !important;
transition: all 0.2s;
}
body.woocommerce-cart .avc-coupon-box input.input-text:focus {
border-color: #1F3D2B !important;
box-shadow: 0 0 0 2px rgba(31,61,43,0.1) !important;
}
body.woocommerce-cart .avc-coupon-box button.button {
background: #1F3D2B !important;
color: #fff !important;
font-size: 13px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
border-radius: 6px !important;
padding: 0 24px !important;
height: 42px !important;
border: none !important;
cursor: pointer !important;
transition: background 0.2s !important;
box-sizing: border-box !important;
}
body.woocommerce-cart .avc-coupon-box button.button:hover {
background: #162d1f !important;
}
body.woocommerce-cart button.avc-update-cart-btn {
background: #ffffff !important;
color: #1F3D2B !important;
border: 1px solid #1F3D2B !important;
font-size: 13px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
border-radius: 6px !important;
padding: 0 24px !important;
height: 42px !important;
cursor: pointer !important;
transition: all 0.2s !important;
box-sizing: border-box !important;
}
body.woocommerce-cart button.avc-update-cart-btn:hover {
background: #f0f5f1 !important;
}
/* RIGHT COLUMN: Order Summary Card */
body.woocommerce-cart .avc-order-summary {
background: #FFFFFF !important;
border: 1px solid #eaeaea !important;
border-radius: 10px !important;
padding: 24px !important;
box-shadow: none !important;
}
body.woocommerce-cart .avc-summary-title {
font-family: 'Open Sans', sans-serif !important;
font-size: 15px !important;
font-weight: 700 !important;
color: #222 !important;
letter-spacing: 0.05em !important;
margin: 0 0 20px !important;
padding-bottom: 14px !important;
border-bottom: 1px solid #eaeaea !important;
text-transform: uppercase !important;
}
body.woocommerce-cart .avc-summary-row {
display: flex !important;
justify-content: space-between !important;
align-items: flex-start !important;
margin-bottom: 16px !important;
font-size: 14px !important;
background: transparent !important;
border: none !important;
padding: 0 !important;
}
body.woocommerce-cart .avc-s-label {
display: block !important;
padding: 0 !important;
font-size: 14px !important;
font-weight: normal !important;
line-height: 1.4 !important;
background: transparent !important;
color: #666 !important;
}
body.woocommerce-cart .avc-s-sub {
display: block;
font-size: 11px;
color: #999;
font-weight: normal;
margin-top: 2px;
line-height: 1.3;
}
body.woocommerce-cart .avc-s-value {
font-weight: 600;
color: #111;
text-align: right;
white-space: nowrap;
display: block !important;
padding: 0 !important;
background: transparent !important;
font-size: 14px !important;
}
body.woocommerce-cart .avc-free {
color: #2e7d32 !important;
font-weight: 700 !important;
}
body.woocommerce-cart .avc-disc-value {
color: #2e7d32 !important;
}
body.woocommerce-cart .avc-coupon-row {
display: none !important; /* Managed inline inside discount row */
}
/* Coupon delete trigger inside total list */
body.woocommerce-cart .woocommerce-remove-coupon {
color: #aaa;
text-decoration: none;
font-size: 16px;
margin-left: 6px;
font-weight: normal;
}
body.woocommerce-cart .woocommerce-remove-coupon:hover {
color: #d32f2f;
}
body.woocommerce-cart .avc-summary-divider {
border: none !important;
border-top: 1px solid #eaeaea !important;
margin: 16px 0 !important;
}
body.woocommerce-cart .avc-row-total .avc-s-label {
font-size: 15px !important;
font-weight: 700 !important;
color: #222 !important;
}
body.woocommerce-cart .avc-row-total .avc-s-value {
font-size: 20px !important;
font-weight: 700 !important;
color: #1F3D2B !important;
}
body.woocommerce-cart .avc-tax-note {
font-size: 11px;
color: #999;
margin: -4px 0 20px;
text-align: right;
}
/* Checkout Button */
body.woocommerce-cart .wc-proceed-to-checkout {
margin: 0 !important;
}
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
body.woocommerce-cart .wc-proceed-to-checkout .button {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
background: #1F3D2B !important;
color: #fff !important;
text-align: center !important;
padding: 16px !important;
border-radius: 8px !important;
font-size: 14px !important;
font-weight: 700 !important;
text-decoration: none !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
transition: background 0.2s ease !important;
border: none !important;
cursor: pointer !important;
box-sizing: border-box !important;
line-height: 1.4 !important;
}
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
body.woocommerce-cart .wc-proceed-to-checkout .button:hover {
background: #162d1f !important;
}
/* Trust Badges inside Summary Card */
body.woocommerce-cart .avc-trust-items {
margin-top: 24px !important;
padding-top: 20px !important;
border-top: 1px solid #eaeaea !important;
}
body.woocommerce-cart .avc-trust-item {
display: flex !important;
align-items: center !important;
gap: 14px !important;
margin-bottom: 18px !important;
}
body.woocommerce-cart .avc-trust-item:last-child {
margin-bottom: 0 !important;
}
body.woocommerce-cart .avc-trust-icon {
width: 36px !important;
height: 36px !important;
background: #f0f5f1 !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
color: #1F3D2B !important;
}
body.woocommerce-cart .avc-trust-icon svg {
stroke: currentColor;
}
body.woocommerce-cart .avc-trust-item h5 {
font-size: 13px !important;
font-weight: 700 !important;
color: #222 !important;
margin: 0 0 2px !important;
line-height: 1.2 !important;
}
body.woocommerce-cart .avc-trust-item p {
font-size: 11px !important;
color: #777 !important;
margin: 0 !important;
line-height: 1.3 !important;
}
/* Bottom Customizable Banner */
body.woocommerce-cart .avc-cart-banner {
position: relative !important;
background: #f4f0eb !important;
border-radius: 10px !important;
border: 1px solid #eaeaea !important;
margin-top: 40px !important;
overflow: hidden !important;
min-height: 240px !important;
padding: 0 !important;
display: block !important;
}
body.woocommerce-cart .avc-banner-bg {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
z-index: 1 !important;
}
body.woocommerce-cart .avc-banner-overlay {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background: linear-gradient(90deg, rgba(244, 240, 235, 0.95) 0%, rgba(244, 240, 235, 0.6) 60%, rgba(244, 240, 235, 0) 100%) !important; /* Premium light gradient overlay to blend with beige theme and make green text pop */
z-index: 2 !important;
pointer-events: none !important;
}
body.woocommerce-cart .avc-banner-content {
position: relative !important;
z-index: 3 !important;
width: 100% !important;
max-width: 600px !important;
padding: 40px 50px !important;
min-height: 240px !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: center !important;
box-sizing: border-box !important;
text-align: left !important;
}
body.woocommerce-cart .avc-banner-content h2 {
font-family: 'Open Sans', sans-serif !important;
font-size: 26px !important;
font-weight: 700 !important;
color: #1F3D2B !important; /* Site Theme Green Color */
margin: 0 0 10px 0 !important;
line-height: 1.3 !important;
}
body.woocommerce-cart .avc-banner-content p {
font-size: 14px !important;
color: #1F3D2B !important; /* Site Theme Green Color */
margin: 0 0 20px 0 !important;
line-height: 1.5 !important;
font-weight: 600 !important;
opacity: 0.95 !important;
}
body.woocommerce-cart .avc-banner-btn {
background: #1F3D2B !important; /* Site Theme Green Color Background */
color: #ffffff !important; /* White text for contrast */
font-size: 13px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
border-radius: 6px !important;
padding: 12px 24px !important;
text-decoration: none !important;
display: inline-block !important;
transition: all 0.2s ease !important;
}
body.woocommerce-cart .avc-banner-btn:hover {
background: #152a1d !important; /* Darker green on hover */
color: #ffffff !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}
/* Cross-Sells Section */
body.woocommerce-cart .cross-sells {
margin-top: 60px;
padding-top: 40px;
border-top: 1px solid #EAEAEA;
}
body.woocommerce-cart .cross-sells > h2 {
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: 700;
color: #111;
margin: 0 0 30px;
display: flex;
align-items: center;
gap: 20px;
}
body.woocommerce-cart .cross-sells > h2::before,
body.woocommerce-cart .cross-sells > h2::after {
content: '';
flex: 1;
height: 1px;
background: #EAEAEA;
}
body.woocommerce-cart .cross-sells ul.products {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 24px !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
body.woocommerce-cart .cross-sells ul.products li.product {
background: #fff !important;
border: 1px solid #EBEBEB !important;
border-radius: 12px !important;
padding: 16px !important;
margin: 0 !important;
float: none !important;
width: 100% !important;
transition: box-shadow 0.25s ease !important;
}
body.woocommerce-cart .cross-sells ul.products li.product:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
}
body.woocommerce-cart .cross-sells ul.products li.product img {
width: 100% !important;
height: 180px !important;
object-fit: cover !important;
object-position: center !important;
border-radius: 8px !important;
background: #f8f8f6 !important;
padding: 0 !important;
box-sizing: border-box !important;
margin-bottom: 14px !important;
display: block !important;
}
body.woocommerce-cart .cross-sells .woocommerce-loop-product__title {
font-size: 14px !important;
font-weight: 600 !important;
color: #111 !important;
margin: 0 0 8px !important;
padding: 0 !important;
}
body.woocommerce-cart .cross-sells .price {
font-size: 15px !important;
font-weight: 700 !important;
color: #1F3D2B !important;
margin-bottom: 14px !important;
display: block !important;
}
body.woocommerce-cart .cross-sells .button {
display: block !important;
width: 100% !important;
text-align: center !important;
background: #1F3D2B !important;
color: #fff !important;
padding: 10px !important;
border-radius: 6px !important;
font-size: 13px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
border: none !important;
cursor: pointer !important;
text-decoration: none !important;
transition: background 0.2s !important;
box-sizing: border-box !important;
}
body.woocommerce-cart .cross-sells .button:hover {
background: #162d1f !important;
}
/* General button */
body.woocommerce-cart .avc-btn-primary {
display: inline-block;
background: #1F3D2B;
color: #fff;
padding: 12px 28px;
border-radius: 6px;
font-size: 14px;
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.04em;
transition: background 0.2s;
}
body.woocommerce-cart .avc-btn-primary:hover {
background: #162d1f;
}
/* Notices */
body.woocommerce-cart .woocommerce-message {
border-top-color: #1F3D2B !important;
background: #F4F7F5 !important;
border-radius: 6px !important;
margin-bottom: 24px !important;
}
body.woocommerce-cart .woocommerce-message::before {
color: #1F3D2B !important;
}
/* Responsive Breakpoints */
@media (max-width: 1024px) {
body.woocommerce-cart .avc-cart-layout {
grid-template-columns: 1fr 320px !important;
gap: 24px !important;
}
}
@media (max-width: 900px) {
body.woocommerce-cart .avc-cart-layout {
grid-template-columns: 1fr !important;
gap: 32px !important;
}
body.woocommerce-cart .avc-cart-right {
position: static;
}
body.woocommerce-cart .cross-sells ul.products {
grid-template-columns: repeat(2, 1fr) !important;
}
body.woocommerce-cart .avc-banner-content {
width: 100% !important;
padding: 30px !important;
min-height: 240px !important;
}
}
@media (max-width: 600px) {
body.woocommerce-cart .avc-cart-headers {
display: none !important;
}
body.woocommerce-cart .avc-cart-card {
padding: 20px !important;
}
body.woocommerce-cart .avc-cart-item {
display: grid !important;
grid-template-columns: 80px 1fr !important;
grid-template-rows: auto auto auto !important;
gap: 12px 16px !important;
padding: 20px 0 !important;
}
body.woocommerce-cart .avc-item-image {
grid-column: 1 !important;
grid-row: 1 / span 3 !important;
width: 80px !important;
min-width: 80px !important;
height: 80px !important;
}
body.woocommerce-cart .avc-item-meta-col {
grid-column: 2 !important;
grid-row: 1 !important;
}
body.woocommerce-cart .avc-item-qty-col {
grid-column: 2 !important;
grid-row: 2 !important;
justify-content: flex-start !important;
}
body.woocommerce-cart .avc-item-price-col {
display: none !important;
}
body.woocommerce-cart .avc-item-subtotal-col {
grid-column: 2 !important;
grid-row: 3 !important;
text-align: left !important;
font-size: 16px !important;
}
body.woocommerce-cart .avc-cart-actions-row {
flex-direction: column !important;
align-items: stretch !important;
gap: 16px !important;
}
body.woocommerce-cart .avc-coupon-box {
flex-direction: column !important;
}
body.woocommerce-cart .avc-coupon-box input.input-text {
width: 100% !important;
}
body.woocommerce-cart button.avc-update-cart-btn {
width: 100% !important;
}
}
/* ==========================================================================
AVFURN CHECKOUT PAGE — Full Shopify-Style Redesign
Aligned with mockup: steps, sections, sticky sidebar, trust badges
========================================================================== */
/* ─── Wrapper & Container ────────────────────────────────────────── */
body.woocommerce-checkout .avc-co-wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 30px 20px 80px;
font-family: 'Open Sans', sans-serif;
}
/* ─── Page Header ────────────────────────────────────────────────── */
.avc-co-breadcrumb {
font-size: 13px;
color: #888;
margin-bottom: 10px;
}
.avc-co-breadcrumb a {
color: #888;
text-decoration: none;
}
.avc-co-breadcrumb a:hover { color: #1F3D2B; }
.avc-co-sep { margin: 0 6px; color: #ccc; }
.avc-co-title {
font-size: 28px !important;
font-weight: 700 !important;
color: #1F3D2B !important;
margin: 0 0 4px !important;
line-height: 1.2 !important;
}
.avc-co-subtitle {
font-size: 13px;
color: #777;
margin: 0 0 24px;
}
/* ─── Step Indicator ─────────────────────────────────────────────── */
.avc-co-steps {
display: flex;
align-items: center;
gap: 0;
margin-bottom: 36px;
padding: 20px 24px;
background: #fff;
border: 1px solid #eaeaea;
border-radius: 10px;
}
.avc-co-step {
display: flex;
align-items: center;
gap: 12px;
opacity: 0.45;
}
.avc-co-step--active { opacity: 1; }
.avc-co-step__circle {
width: 34px;
height: 34px;
border-radius: 50%;
background: #eaeaea;
color: #777;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 700;
flex-shrink: 0;
}
.avc-co-step--active .avc-co-step__circle {
background: #1F3D2B;
color: #fff;
}
.avc-co-step__info {
display: flex;
flex-direction: column;
}
.avc-co-step__label {
font-size: 13px;
font-weight: 600;
color: #333;
line-height: 1;
}
.avc-co-step__sub {
font-size: 11px;
color: #999;
margin-top: 2px;
}
.avc-co-step__line {
flex: 1;
height: 1px;
background: #ddd;
margin: 0 16px;
}
/* ─── Main 2-Column Layout ───────────────────────────────────────── */
.avc-co-layout {
display: grid;
grid-template-columns: 1fr 400px;
gap: 32px;
align-items: start;
}
.avc-co-left { min-width: 0; }
.avc-co-right {
position: sticky;
top: 24px;
}
/* ─── Sections (left column cards) ───────────────────────────────── */
.avc-co-section {
background: #fff;
border: 1px solid #eaeaea;
border-radius: 10px;
margin-bottom: 24px;
overflow: hidden;
}
.avc-co-section__heading {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 20px 24px;
border-bottom: 1px solid #eaeaea;
}
.avc-co-section__icon {
width: 40px;
height: 40px;
background: #f0f5f1;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #1F3D2B;
}
.avc-co-section__heading h3 {
font-size: 15px !important;
font-weight: 700 !important;
color: #1F3D2B !important;
margin: 0 0 2px !important;
line-height: 1.2 !important;
}
.avc-co-section__heading p {
font-size: 12px;
color: #888;
margin: 0;
}
.avc-co-section__body {
padding: 24px;
}
/* ─── WooCommerce Form Fields (Mockup Aligned Grid) ──────────────── */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper {
display: grid !important;
grid-template-columns: repeat(6, 1fr) !important;
gap: 16px !important;
}
.avc-co-form .woocommerce-billing-fields h3,
.avc-co-form .woocommerce-shipping-fields h3,
.avc-co-form .woocommerce-additional-fields h3 {
font-size: 13px !important;
font-weight: 700 !important;
color: #555 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
margin: 0 0 16px !important;
border-bottom: 1px solid #f0f0f0;
padding-bottom: 10px;
}
.avc-co-form .form-row {
margin-bottom: 0 !important; /* Managed by grid gap */
width: 100% !important;
float: none !important;
}
.avc-co-form .form-row label {
font-size: 12px !important;
font-weight: 600 !important;
color: #555 !important;
margin-bottom: 5px !important;
display: block !important;
}
.avc-co-form .form-row label .required {
color: #d32f2f;
text-decoration: none;
}
.avc-co-form .form-row input.input-text,
.avc-co-form .form-row textarea {
width: 100% !important;
border: 1px solid #ddd !important;
border-radius: 8px !important;
padding: 12px 14px !important;
font-size: 14px !important;
color: #333 !important;
background: #fff !important;
box-shadow: none !important;
transition: border-color 0.2s ease !important;
box-sizing: border-box !important;
height: 46px !important;
}
.avc-co-form .form-row select {
width: 100% !important;
border: 1px solid #ddd !important;
border-radius: 8px !important;
padding: 12px 14px !important;
font-size: 14px !important;
color: #333 !important;
background: #fff !important;
box-shadow: none !important;
transition: border-color 0.2s ease !important;
box-sizing: border-box !important;
height: 46px !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 14px center !important;
padding-right: 32px !important;
}
.avc-co-form .form-row textarea {
height: 100px !important;
}
.avc-co-form .form-row input.input-text:focus,
.avc-co-form .form-row textarea:focus,
.avc-co-form .form-row select:focus {
border-color: #1F3D2B !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(31,61,43,0.08) !important;
}
.avc-co-form .form-row input.input-text::placeholder {
color: #aaa;
font-size: 13px;
}
/* City dropdown: disabled until a state is chosen */
#billing_city:disabled,
#shipping_city:disabled {
background-color: #f5f5f5 !important;
color: #bbb !important;
cursor: not-allowed !important;
border-color: #e5e5e5 !important;
opacity: 0.7 !important;
}
/* Grid Column Spans */
#billing_first_name_field, #shipping_first_name_field { grid-column: span 3 !important; }
#billing_phone_field { grid-column: span 3 !important; }
#billing_email_field { grid-column: span 3 !important; }
#billing_postcode_field, #shipping_postcode_field { grid-column: span 3 !important; }
#billing_address_1_field, #shipping_address_1_field { grid-column: span 6 !important; }
#billing_address_2_field, #shipping_address_2_field { grid-column: span 6 !important; }
#billing_company_field, #shipping_company_field { grid-column: span 2 !important; } /* Landmark */
#billing_city_field, #shipping_city_field { grid-column: span 2 !important; }
#billing_state_field, #shipping_state_field { grid-column: span 2 !important; }
/* Custom field layout wrappers */
.avc-phone-container {
display: flex !important;
align-items: center !important;
border: 1px solid #ddd !important;
border-radius: 8px !important;
background: #fff !important;
overflow: hidden !important;
transition: border-color 0.2s, box-shadow 0.2s !important;
height: 46px !important;
}
.avc-phone-prefix {
flex-shrink: 0 !important;
height: 100% !important;
}
.avc-phone-prefix select {
border: none !important;
border-right: 1px solid #ddd !important;
border-radius: 0 !important;
background: #f8f8f8 !important;
padding: 0 12px !important;
font-size: 14px !important;
font-weight: 600 !important;
color: #333 !important;
height: 100% !important;
cursor: pointer !important;
outline: none !important;
box-shadow: none !important;
-webkit-appearance: none !important;
appearance: none !important;
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 10px center !important;
padding-right: 28px !important;
}
.avc-phone-container input {
border: none !important;
flex: 1 !important;
height: 100% !important;
padding: 0 14px !important;
font-size: 14px !important;
color: #333 !important;
background: transparent !important;
}
.avc-phone-container input:focus {
outline: none !important;
box-shadow: none !important;
}
.avc-phone-container:focus-within {
border-color: #1F3D2B !important;
box-shadow: 0 0 0 3px rgba(31,61,43,0.08) !important;
}
.avc-pincode-container,
.avc-shipping-pincode-container {
display: flex !important;
gap: 10px !important;
align-items: center !important;
}
.avc-pincode-container input,
.avc-shipping-pincode-container input {
flex: 1 !important;
height: 46px !important;
}
.avc-pincode-verify-btn {
background: #1F3D2B !important;
color: #fff !important;
border: 1px solid #1F3D2B !important;
border-radius: 8px !important;
padding: 0 20px !important;
font-size: 13px !important;
font-weight: 600 !important;
cursor: pointer !important;
white-space: nowrap !important;
transition: all 0.2s ease !important;
height: 46px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.avc-pincode-verify-btn:hover {
background: #162d1f !important;
border-color: #162d1f !important;
}
/* Hide unneeded fields */
.avc-hidden-field,
#billing_last_name_field,
#shipping_last_name_field,
#billing_country_field,
#shipping_country_field {
display: none !important;
}
/* Ensure details card is full width and stacked */
.avc-co-form #customer_details.col2-set {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
float: none !important;
margin: 0 !important;
}
.avc-co-form #customer_details.col2-set .col-1,
.avc-co-form #customer_details.col2-set .col-2 {
width: 100% !important;
float: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* Ship to different address checkbox formatting */
#ship-to-different-address {
border: none !important;
padding: 0 !important;
margin: 20px 0 0 !important;
text-transform: none !important;
font-size: 14px !important;
font-weight: 600 !important;
color: #191A19 !important;
}
#ship-to-different-address label {
display: flex !important;
align-items: center !important;
gap: 8px !important;
cursor: pointer !important;
}
#ship-to-different-address-checkbox {
position: static !important;
left: auto !important;
width: 18px !important;
height: 18px !important;
accent-color: #1F3D2B !important;
margin: 0 !important;
cursor: pointer !important;
}
/* Select2 overrides to match custom styles */
.select2-container--default .select2-selection--single {
height: 46px !important;
border: 1px solid #ddd !important;
border-radius: 8px !important;
background: #fff !important;
display: flex !important;
align-items: center !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
color: #333 !important;
padding-left: 14px !important;
font-size: 14px !important;
font-weight: normal !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
height: 44px !important;
right: 14px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
border-color: #333 transparent transparent transparent !important;
border-width: 5px 4px 0 4px !important;
}
/* ─── Delivery / Shipping Options radio cards ────────────────────── */
#avc-delivery-section .avc-co-section__body {
padding: 24px !important;
}
#avc-delivery-section table.shop_table {
width: 100% !important;
border: none !important;
margin: 0 !important;
display: block !important;
}
#avc-delivery-section table.shop_table tbody,
#avc-delivery-section table.shop_table tr,
#avc-delivery-section table.shop_table td {
display: block !important;
width: 100% !important;
border: none !important;
padding: 0 !important;
background: transparent !important;
}
#avc-delivery-section table.shop_table tr.shipping th {
display: none !important;
}
#avc-delivery-section ul#shipping_method {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
}
#avc-delivery-section ul#shipping_method li {
border: 1.5px solid #eaeaea !important;
border-radius: 10px !important;
padding: 18px 20px !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
gap: 16px !important;
transition: all 0.2s ease !important;
background: #fff !important;
cursor: pointer !important;
position: relative !important;
}
#avc-delivery-section ul#shipping_method li:has(input:checked) {
border-color: #1F3D2B !important;
background: #f0f5f1 !important;
}
#avc-delivery-section ul#shipping_method input[type="radio"] {
accent-color: #1F3D2B !important;
transform: scale(1.3) !important;
margin: 0 !important;
flex-shrink: 0 !important;
cursor: pointer !important;
}
#avc-delivery-section ul#shipping_method label {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
margin: 0 !important;
cursor: pointer !important;
gap: 16px !important;
}
.avc-delivery-label-content {
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
text-align: left !important;
}
.avc-delivery-title {
font-size: 14px !important;
font-weight: 700 !important;
color: #222 !important;
}
.avc-delivery-desc {
font-size: 12px !important;
color: #666 !important;
font-weight: 400 !important;
}
.avc-delivery-price {
font-size: 14px !important;
font-weight: 700 !important;
color: #1F3D2B !important;
white-space: nowrap !important;
}
/* Hide Shipping Calculator */
#avc-delivery-section .woocommerce-shipping-calculator {
display: none !important;
}
/* ─── Payment Section Split-Grid Layout ──────────────────────────── */
#avc-payment-section .avc-co-section__body {
padding: 24px !important;
}
#payment {
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
}
#payment ul.payment_methods {
display: block !important;
list-style: none !important;
border: none !important;
background: transparent !important;
margin: 0 !important;
padding: 0 !important;
min-height: 0 !important;
overflow: visible !important;
}
/* Each gateway = a selectable card */
#payment ul.payment_methods li.wc_payment_method {
display: block !important;
border: 1.5px solid #e7e7e2 !important;
border-radius: 14px !important;
background: #fff !important;
margin: 0 0 14px !important;
padding: 0 !important;
overflow: hidden !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
#payment ul.payment_methods li.wc_payment_method:last-child { margin-bottom: 0 !important; }
#payment ul.payment_methods li.wc_payment_method:hover { border-color: #c9b79f !important; }
#payment ul.payment_methods li.wc_payment_method:has(input:checked) {
border-color: #1F3D2B !important;
box-shadow: 0 8px 24px rgba(31, 61, 43, 0.08) !important;
}
#payment ul.payment_methods input[type="radio"] {
display: none !important; /* Hide native radio, style label */
}
/* Label row: custom radio + title + logo */
#payment ul.payment_methods li.wc_payment_method > label {
display: flex !important;
align-items: center !important;
gap: 14px !important;
padding: 18px 22px !important;
margin: 0 !important;
cursor: pointer !important;
font-size: 15px !important;
font-weight: 600 !important;
color: #2a2a2a !important;
line-height: 1.35 !important;
flex-wrap: wrap !important;
transition: color 0.2s ease, background 0.2s ease !important;
}
#payment ul.payment_methods li.wc_payment_method > label::before {
content: "" !important;
width: 20px !important;
height: 20px !important;
border: 2px solid #cfcfca !important;
border-radius: 50% !important;
flex-shrink: 0 !important;
box-sizing: border-box !important;
transition: all 0.2s ease !important;
}
#payment ul.payment_methods input[type="radio"]:checked + label {
color: #1F3D2B !important;
background: #f4f7f5 !important;
}
#payment ul.payment_methods input[type="radio"]:checked + label::before {
border-color: #1F3D2B !important;
box-shadow: inset 0 0 0 4px #1F3D2B !important;
background: #fff !important;
}
/* Gateway logo pushed to the far right of the row */
#payment ul.payment_methods li.wc_payment_method > label img {
max-height: 26px !important;
max-width: 92px !important;
width: auto !important;
margin-left: auto !important;
flex-shrink: 0 !important;
}
/* Description panel below the label (WooCommerce toggles its display) */
#payment div.payment_box {
border: none !important;
border-top: 1px solid #e4ede8 !important;
background: #f7faf8 !important;
padding: 16px 22px 18px 56px !important;
margin: 0 !important;
font-size: 13.5px !important;
color: #5a6b62 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
#payment div.payment_box::before {
display: none !important;
}
#payment div.payment_box p {
margin: 0 0 12px !important;
line-height: 1.5 !important;
}
#payment div.payment_box input[type="text"] {
width: 100% !important;
border: 1px solid #ddd !important;
border-radius: 6px !important;
padding: 10px 12px !important;
font-size: 13px !important;
margin-top: 8px !important;
}
/* Hide WooCommerce Place Order under payment */
#payment .place-order {
display: none !important;
}
/* Privacy Text */
#payment .woocommerce-privacy-policy-text {
font-size: 12px;
color: #888;
margin-top: 16px;
}
/* ─── Feature Bar ─────────────────────────────────────────────────── */
.avc-co-feature-bar {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border: 1px solid #eaeaea;
border-radius: 10px;
background: #fff;
margin-bottom: 24px;
overflow: hidden;
}
.avc-co-feature {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 18px;
border-right: 1px solid #eaeaea;
}
.avc-co-feature:last-child { border-right: none; }
.avc-co-feature svg {
color: #1F3D2B;
flex-shrink: 0;
}
.avc-co-feature strong {
display: block;
font-size: 12px;
font-weight: 700;
color: #222;
line-height: 1.2;
}
.avc-co-feature span {
display: block;
font-size: 11px;
color: #888;
margin-top: 2px;
}
/* ─── Footer Row (Terms & Place Order) ───────────────────────────── */
.avc-co-footer-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
margin-top: 4px;
}
/* NOTE: this label must NOT be display:flex. Its contents are a checkbox
plus a run of text with an inline ("I agree to the [Terms &
Conditions] and Privacy Policy"). Flex turns each text node and the
into separate flex items, so on narrow screens the sentence breaks into
three cramped columns that each wrap internally. Block + inline flow
keeps it as one naturally-wrapping sentence. */
.avc-co-terms-label {
display: block;
font-size: 13px;
line-height: 1.6;
color: #555;
cursor: pointer;
}
.avc-co-terms-check {
position: static !important;
left: auto !important;
accent-color: #1F3D2B !important;
transform: scale(1.2) !important;
flex-shrink: 0 !important;
margin: 0 8px 0 0 !important;
vertical-align: middle !important;
cursor: pointer !important;
}
.avc-co-terms-label a {
color: #1F3D2B;
text-decoration: underline;
}
.avc-co-place-order-container {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
}
.avc-co-place-order {
display: inline-flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
background: #1F3D2B !important;
color: #fff !important;
border: none !important;
border-radius: 8px !important;
height: 52px !important;
padding: 0 40px !important;
font-size: 15px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 1.2px !important;
cursor: pointer !important;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
text-align: center !important;
min-width: 260px;
box-shadow: 0 4px 12px rgba(31, 61, 43, 0.15) !important;
outline: none !important;
}
.avc-co-place-order:hover {
background: #162d1f !important;
transform: translateY(-2px) !important;
box-shadow: 0 6px 18px rgba(31, 61, 43, 0.25) !important;
}
.avc-co-place-order:active {
transform: translateY(0) !important;
box-shadow: 0 4px 10px rgba(31, 61, 43, 0.15) !important;
}
.avc-co-place-order svg {
margin-bottom: 0 !important;
margin-right: 10px !important;
display: inline-block !important;
stroke: #fff !important;
stroke-width: 2 !important;
}
.avc-co-place-order-sub {
font-size: 10px !important;
font-weight: 600 !important;
letter-spacing: 0.6px !important;
color: #888;
margin-top: 2px !important;
text-transform: uppercase !important;
display: block !important;
text-align: right;
}
/* ─── Right Column: Summary Card ─────────────────────────────────── */
.avc-co-summary-card {
background: #fff;
border: 1px solid #eaeaea;
border-radius: 10px;
overflow: hidden;
}
.avc-co-summary-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 20px;
border-bottom: 1px solid #eaeaea;
}
.avc-co-summary-head h3 {
font-size: 15px !important;
font-weight: 700 !important;
color: #222 !important;
margin: 0 !important;
}
.avc-co-edit-cart {
display: flex;
align-items: center;
gap: 5px;
font-size: 12px;
color: #1F3D2B;
text-decoration: none;
font-weight: 600;
}
.avc-co-edit-cart:hover { text-decoration: underline; }
/* Product List scrollable wrapper */
.avc-co-product-list-scroll {
max-height: 380px !important;
overflow-y: auto !important;
padding: 0 20px !important;
}
.avc-co-product-list-scroll::-webkit-scrollbar {
width: 6px;
}
.avc-co-product-list-scroll::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.avc-co-product-list-scroll::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 10px;
}
.avc-co-product-list-scroll::-webkit-scrollbar-thumb:hover {
background: #999;
}
.avc-co-product {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 0;
border-bottom: 1px solid #f0f0f0;
}
.avc-co-product:last-child { border-bottom: none; }
.avc-co-product__thumb {
position: relative;
width: 72px;
height: 72px;
border: 1px solid #eaeaea;
border-radius: 8px;
background: #f8f8f8;
overflow: hidden;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.avc-co-product__thumb img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
display: block !important;
}
.avc-co-product__qty {
position: absolute;
top: -6px;
right: -6px;
background: rgba(80, 80, 80, 0.9);
color: #fff;
font-size: 11px;
font-weight: 700;
width: 20px;
height: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.avc-co-product__info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.avc-co-product__name {
font-size: 13px;
font-weight: 600;
color: #222;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.avc-co-product__unit {
font-size: 11px;
color: #888;
}
.avc-co-product__price {
font-size: 14px;
font-weight: 700;
color: #1F3D2B;
white-space: nowrap;
}
/* Totals AJAX updated */
.avc-co-totals {
padding: 16px 20px 0;
border-top: 1px solid #eaeaea;
}
.avc-co-total-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
color: #555;
padding: 6px 0;
}
.avc-co-free {
color: #2e7d32 !important;
font-weight: 700 !important;
font-size: 13px;
}
.avc-co-discount span:last-child {
color: #2e7d32;
font-weight: 600;
}
.avc-co-total-divider {
border: none;
border-top: 1px solid #eaeaea;
margin: 10px 0;
}
.avc-co-grand-total {
font-size: 15px !important;
font-weight: 700 !important;
color: #222 !important;
padding-top: 10px !important;
}
.avc-co-grand-total small {
font-size: 11px;
font-weight: 400;
color: #888;
display: block;
margin-top: 2px;
}
.avc-co-grand-total .woocommerce-Price-amount {
font-size: 20px !important;
font-weight: 700 !important;
color: #1F3D2B !important;
}
/* Coupon */
.avc-co-coupon {
border-top: 1px solid #eaeaea;
padding: 14px 20px;
}
.avc-co-coupon-toggle {
font-size: 13px;
color: #1F3D2B;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
user-select: none;
}
.avc-co-coupon-toggle svg {
transition: transform 0.2s;
}
.avc-co-coupon-toggle--open svg {
transform: rotate(90deg);
}
.avc-co-coupon-form {
margin-top: 14px;
}
.avc-co-coupon-form form.checkout_coupon {
display: flex !important;
gap: 8px !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
}
.avc-co-coupon-form form.checkout_coupon p {
margin: 0 !important;
}
.avc-co-coupon-form .input-text {
flex: 1 !important;
border: 1px solid #ddd !important;
border-radius: 6px !important;
padding: 10px 12px !important;
font-size: 13px !important;
box-sizing: border-box !important;
width: auto !important;
float: none !important;
height: 40px !important;
}
.avc-co-coupon-form .input-text:focus {
border-color: #1F3D2B !important;
outline: none !important;
}
.avc-co-coupon-form .button {
background: #1F3D2B !important;
color: #fff !important;
border: none !important;
border-radius: 6px !important;
padding: 10px 20px !important;
font-size: 13px !important;
font-weight: 700 !important;
cursor: pointer !important;
white-space: nowrap !important;
float: none !important;
height: 40px !important;
}
.avc-co-coupon-form .button:hover { background: #162d1f !important; }
/* Trust Badges */
.avc-co-trust {
border-top: 1px solid #eaeaea;
padding: 16px 20px;
display: flex;
flex-direction: column;
gap: 14px;
}
.avc-co-trust-item {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 12px;
}
.avc-co-trust-item svg {
color: #1F3D2B;
flex-shrink: 0;
margin-top: 2px;
}
.avc-co-trust-item strong {
font-size: 13px;
font-weight: 700;
color: #222;
display: block;
margin-bottom: 2px;
}
.avc-co-trust-item span {
color: #888;
font-size: 11px;
}
/* ─── WooCommerce Notices ─────────────────────────────────────────── */
body.woocommerce-checkout .woocommerce-error,
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-message {
border-radius: 8px !important;
margin-bottom: 20px !important;
}
/* ─── Responsive Breakdown ───────────────────────────────────────── */
@media screen and (max-width: 1024px) {
.avc-co-layout {
grid-template-columns: 1fr 360px;
gap: 24px;
}
.avc-co-feature-bar {
grid-template-columns: repeat(2, 1fr);
}
.avc-co-feature:nth-child(2) { border-right: none; }
.avc-co-feature:nth-child(3) { border-right: 1px solid #eaeaea; }
.avc-co-feature:nth-child(1),
.avc-co-feature:nth-child(2) { border-bottom: 1px solid #eaeaea; }
}
@media screen and (max-width: 820px) {
.avc-co-layout {
grid-template-columns: 1fr;
}
.avc-co-right {
position: static;
order: -1; /* summary above details */
}
.avc-co-feature-bar {
grid-template-columns: repeat(2, 1fr);
}
.avc-co-footer-row {
flex-direction: column;
align-items: stretch;
}
.avc-co-place-order-container {
width: 100% !important;
align-items: center !important;
}
.avc-co-place-order {
width: 100% !important;
}
.avc-co-place-order-sub {
text-align: center !important;
}
.avc-co-steps {
flex-wrap: wrap;
gap: 8px;
}
.avc-co-step__line { display: none; }
#payment ul.payment_methods {
grid-template-columns: 1fr !important;
}
#payment ul.payment_methods li.wc_payment_method > label {
border-right: none !important;
}
#payment div.payment_box {
grid-column: 1 !important;
grid-row: auto !important;
border-left: none !important;
border-top: 1px solid #eaeaea !important;
}
}
@media screen and (max-width: 480px) {
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
#billing_first_name_field, #shipping_first_name_field,
#billing_phone_field, #billing_email_field,
#billing_postcode_field, #shipping_postcode_field,
#billing_address_1_field, #shipping_address_1_field,
#billing_address_2_field, #shipping_address_2_field,
#billing_company_field, #shipping_company_field,
#billing_city_field, #shipping_city_field,
#billing_state_field, #shipping_state_field {
grid-column: span 1 !important;
}
.avc-co-feature-bar {
grid-template-columns: 1fr;
}
.avc-co-feature { border-right: none !important; border-bottom: 1px solid #eaeaea; }
.avc-co-feature:last-child { border-bottom: none; }
}
/* ==========================================================================
UNIFIED LEGAL & POLICY TEMPLATE STYLES
========================================================================== */
.avc-legal-page {
margin-top: 40px !important;
margin-bottom: 60px !important;
font-family: 'Open Sans', sans-serif !important;
}
.avc-legal-header {
margin-bottom: 40px !important;
border-bottom: 1px solid #eaeaea !important;
padding-bottom: 25px !important;
}
.avc-legal-header .avc-breadcrumb {
display: flex !important;
align-items: center !important;
gap: 8px !important;
font-size: 13px !important;
color: #666 !important;
margin-bottom: 15px !important;
}
.avc-legal-header .avc-breadcrumb a {
color: #666 !important;
text-decoration: none !important;
transition: color 0.2s ease !important;
}
.avc-legal-header .avc-breadcrumb a:hover {
color: #1F3D2B !important;
}
.avc-legal-header .avc-breadcrumb-sep {
color: #ccc !important;
}
.avc-legal-title {
font-size: 38px !important;
font-weight: 300 !important;
color: #111 !important;
margin: 0 0 10px 0 !important;
line-height: 1.2 !important;
letter-spacing: -0.5px !important;
}
.avc-legal-subtitle {
font-size: 13px !important;
color: #888 !important;
margin: 0 !important;
}
.avc-legal-layout {
display: flex !important;
gap: 50px !important;
align-items: flex-start !important;
}
/* Sidebar Styling */
.avc-legal-sidebar {
flex: 0 0 280px !important;
position: sticky !important;
top: 100px !important;
background: #ffffff !important;
border: 1px solid #eaeaea !important;
border-radius: 12px !important;
padding: 24px !important;
box-shadow: 0 4px 20px rgba(0,0,0,0.03) !important;
box-sizing: border-box !important;
}
.avc-legal-nav-title {
font-size: 12px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
color: #999 !important;
margin-bottom: 20px !important;
}
.avc-legal-nav-list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
}
.avc-legal-nav-list li {
margin: 0 !important;
padding: 0 !important;
}
.avc-legal-nav-link {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
padding: 12px 18px !important;
font-size: 14px !important;
font-weight: 600 !important;
color: #555 !important;
background: transparent !important;
border-radius: 8px !important;
text-decoration: none !important;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
box-sizing: border-box !important;
}
.avc-legal-nav-link svg.arrow {
opacity: 0 !important;
transform: translateX(-5px) !important;
transition: all 0.3s ease !important;
color: #1F3D2B !important;
}
.avc-legal-nav-link:hover {
color: #1F3D2B !important;
background: #f5f8f6 !important;
}
.avc-legal-nav-link:hover svg.arrow {
opacity: 1 !important;
transform: translateX(0) !important;
}
.avc-legal-nav-link.active {
color: #ffffff !important;
background: #1F3D2B !important;
box-shadow: 0 4px 15px rgba(31, 61, 43, 0.2) !important;
}
.avc-legal-nav-link.active svg.arrow {
opacity: 1 !important;
transform: translateX(0) !important;
color: #ffffff !important;
}
/* Content Area Styling */
.avc-legal-content {
flex: 1 1 0% !important;
min-width: 0 !important;
}
.avc-legal-card {
background: #ffffff !important;
border: 1px solid #eaeaea !important;
border-radius: 12px !important;
padding: 50px !important;
box-shadow: 0 4px 25px rgba(0,0,0,0.02) !important;
box-sizing: border-box !important;
}
/* Policy Typography & Elements */
.avc-policy-section h2,
.avc-faq-section h2 {
font-size: 26px !important;
font-weight: 700 !important;
color: #111 !important;
margin: 0 0 15px 0 !important;
}
.avc-policy-section .last-updated {
font-size: 12px !important;
color: #888 !important;
margin: 0 0 30px 0 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
}
.avc-policy-section h3 {
font-size: 18px !important;
font-weight: 700 !important;
color: #1F3D2B !important;
margin: 35px 0 15px 0 !important;
border-left: 3px solid #1F3D2B !important;
padding-left: 12px !important;
line-height: 1.3 !important;
}
.avc-policy-section p {
font-size: 15px !important;
color: #444 !important;
line-height: 1.7 !important;
margin: 0 0 20px 0 !important;
}
.avc-policy-section ul {
list-style: none !important;
padding-left: 0 !important;
margin: 0 0 25px 0 !important;
}
.avc-policy-section ul li {
font-size: 15px !important;
color: #444 !important;
line-height: 1.7 !important;
margin-bottom: 12px !important;
padding-left: 24px !important;
position: relative !important;
}
.avc-policy-section ul li::before {
content: "♦" !important;
color: #1F3D2B !important;
position: absolute !important;
left: 4px !important;
font-size: 12px !important;
}
.avc-alert-box {
border-radius: 8px !important;
padding: 20px 24px !important;
font-size: 14px !important;
line-height: 1.6 !important;
margin: 25px 0 !important;
}
.avc-alert-box.info {
background: #f7f9f7 !important;
border-left: 4px solid #1F3D2B !important;
color: #1F3D2B !important;
}
.avc-alert-box.info strong {
font-weight: 700 !important;
display: block !important;
margin-bottom: 5px !important;
}
.avc-legal-badge {
background: #f8f6f3 !important;
border: 1px solid #e5e0d8 !important;
border-radius: 8px !important;
padding: 24px !important;
font-size: 14px !important;
line-height: 1.8 !important;
color: #444 !important;
margin-top: 25px !important;
}
.avc-legal-badge a {
color: #1F3D2B !important;
font-weight: 600 !important;
text-decoration: none !important;
border-bottom: 1px solid rgba(31, 61, 43, 0.2) !important;
}
.avc-legal-badge a:hover {
border-bottom-color: #1F3D2B !important;
}
/* FAQ Accordion Styling */
.avc-faq-section .section-intro {
font-size: 15px !important;
color: #666 !important;
line-height: 1.6 !important;
margin-bottom: 35px !important;
}
.avc-accordion-wrapper {
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
}
.avc-details {
background: #ffffff !important;
border: 1px solid #eaeaea !important;
border-radius: 10px !important;
overflow: hidden !important;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}
.avc-details[open] {
border-color: #1F3D2B !important;
box-shadow: 0 4px 15px rgba(31, 61, 43, 0.05) !important;
}
.avc-summary {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
padding: 20px 24px !important;
font-size: 16px !important;
font-weight: 700 !important;
color: #111 !important;
cursor: pointer !important;
list-style: none !important;
transition: color 0.2s ease !important;
}
.avc-summary::-webkit-details-marker {
display: none !important;
}
.avc-summary:hover {
color: #1F3D2B !important;
}
.avc-summary .faq-icon {
position: relative !important;
width: 20px !important;
height: 20px !important;
flex-shrink: 0 !important;
}
.avc-summary .faq-icon::before,
.avc-summary .faq-icon::after {
content: "" !important;
position: absolute !important;
background-color: #999 !important;
transition: all 0.25s ease !important;
}
/* Horizontal line */
.avc-summary .faq-icon::before {
top: 9px !important;
left: 4px !important;
width: 12px !important;
height: 2px !important;
}
/* Vertical line */
.avc-summary .faq-icon::after {
top: 4px !important;
left: 9px !important;
width: 2px !important;
height: 12px !important;
}
.avc-details[open] .avc-summary {
color: #1F3D2B !important;
border-bottom: 1px solid #f2f2f2 !important;
}
.avc-details[open] .avc-summary .faq-icon::before {
background-color: #1F3D2B !important;
}
/* Rotate vertical line to form minus sign */
.avc-details[open] .avc-summary .faq-icon::after {
transform: rotate(90deg) !important;
opacity: 0 !important;
background-color: #1F3D2B !important;
}
.faq-answer {
padding: 24px !important;
background: #fafafa !important;
}
.faq-answer p {
font-size: 15px !important;
color: #444 !important;
line-height: 1.7 !important;
margin: 0 !important;
}
/* RESPONSIVE LAYOUT OVERRIDES */
@media (max-width: 992px) {
.avc-legal-layout {
gap: 30px !important;
}
.avc-legal-sidebar {
flex: 0 0 240px !important;
}
}
@media (max-width: 820px) {
.avc-legal-layout {
flex-direction: column !important;
gap: 35px !important;
}
.avc-legal-sidebar {
flex: 1 1 100% !important;
width: 100% !important;
position: static !important;
padding: 16px !important;
}
.avc-legal-nav-title {
display: none !important;
}
.avc-legal-nav-list {
flex-direction: row !important;
flex-wrap: wrap !important;
gap: 8px !important;
}
.avc-legal-nav-list li {
flex: 1 1 auto !important;
}
.avc-legal-nav-link {
justify-content: center !important;
font-size: 13px !important;
padding: 10px 14px !important;
text-align: center !important;
}
.avc-legal-nav-link svg.arrow {
display: none !important;
}
.avc-legal-card {
padding: 30px !important;
}
}
@media (max-width: 480px) {
.avc-legal-title {
font-size: 30px !important;
}
.avc-legal-nav-list {
flex-direction: column !important;
}
.avc-legal-nav-list li {
width: 100% !important;
}
.avc-legal-card {
padding: 24px 16px !important;
}
.avc-policy-section h3 {
font-size: 16px !important;
}
.avc-summary {
font-size: 14px !important;
padding: 16px !important;
}
.faq-answer {
padding: 16px !important;
}
}
/* Global Override for Countdown Timer Label backgrounds (e.g. HRS, MINS, SECS) */
.timer-box .label {
background: transparent !important;
background-color: transparent !important;
color: #ffffff !important;
opacity: 1 !important;
box-shadow: none !important;
padding: 0 !important;
border: none !important;
}
/* ==========================================================================
CONTACT US PAGE STYLES (PREMIUM & CUSTOMIZABLE)
========================================================================== */
.avc-contact-page {
margin-top: 40px !important;
margin-bottom: 60px !important;
font-family: 'Open Sans', sans-serif !important;
}
.avc-contact-header {
margin-bottom: 40px !important;
border-bottom: 1px solid #eaeaea !important;
padding-bottom: 25px !important;
}
.avc-contact-header .avc-breadcrumb {
display: flex !important;
align-items: center !important;
gap: 8px !important;
font-size: 13px !important;
color: #666 !important;
margin-bottom: 15px !important;
}
.avc-contact-header .avc-breadcrumb a {
color: #666 !important;
text-decoration: none !important;
transition: color 0.2s ease !important;
}
.avc-contact-header .avc-breadcrumb a:hover {
color: #1F3D2B !important;
}
.avc-contact-header .avc-breadcrumb-sep {
color: #ccc !important;
}
.avc-contact-title {
font-size: 38px !important;
font-weight: 300 !important;
color: #111 !important;
margin: 0 0 10px 0 !important;
line-height: 1.2 !important;
letter-spacing: -0.5px !important;
}
.avc-contact-subtitle {
font-size: 13px !important;
color: #888 !important;
margin: 0 !important;
}
.avc-contact-layout {
display: flex !important;
gap: 40px !important;
align-items: stretch !important;
margin-bottom: 50px !important;
}
/* Left Form Column */
.avc-contact-form-container {
flex: 1 1 60% !important;
background: #ffffff !important;
border: 1px solid #eaeaea !important;
border-radius: 12px !important;
padding: 40px !important;
box-shadow: 0 4px 25px rgba(0,0,0,0.02) !important;
box-sizing: border-box !important;
}
.avc-contact-form-container h2 {
font-size: 26px !important;
font-weight: 700 !important;
color: #111 !important;
margin: 0 0 10px 0 !important;
}
.avc-contact-form-container .form-intro {
font-size: 14px !important;
color: #666 !important;
margin-bottom: 30px !important;
line-height: 1.5 !important;
}
.avc-contact-form {
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
}
.avc-form-row {
display: flex !important;
gap: 20px !important;
}
.avc-form-group {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
min-width: 0 !important;
}
.avc-form-group label {
font-size: 13px !important;
font-weight: 700 !important;
color: #444 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
}
.avc-form-group label .required {
color: #EB340A !important;
}
.avc-form-group input[type="text"],
.avc-form-group input[type="email"],
.avc-form-group input[type="tel"],
.avc-form-group textarea {
width: 100% !important;
padding: 12px 16px !important;
border: 1px solid #eaeaea !important;
border-radius: 8px !important;
background: #ffffff !important;
font-size: 14px !important;
color: #333 !important;
font-family: inherit !important;
box-sizing: border-box !important;
transition: all 0.3s ease !important;
box-shadow: none !important;
outline: none !important;
}
.avc-form-group input:focus,
.avc-form-group textarea:focus {
border-color: #1F3D2B !important;
box-shadow: 0 0 0 3px rgba(31, 61, 43, 0.08) !important;
}
/* Submit Button & Loader */
.avc-contact-submit-btn {
align-self: flex-start !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
background: #1F3D2B !important;
color: #ffffff !important;
font-size: 13px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
padding: 14px 35px !important;
border: none !important;
border-radius: 6px !important;
cursor: pointer !important;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
box-sizing: border-box !important;
}
.avc-contact-submit-btn:hover {
background: #152a1d !important;
transform: translateY(-2px) !important;
box-shadow: 0 5px 15px rgba(31, 61, 43, 0.15) !important;
}
.avc-contact-submit-btn.loading {
pointer-events: none !important;
opacity: 0.8 !important;
}
.avc-contact-submit-btn .spinner-loader {
display: none;
width: 16px;
height: 16px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top-color: #ffffff;
animation: spin-loader 0.8s linear infinite;
}
.avc-contact-submit-btn.loading .spinner-loader {
display: inline-block !important;
}
@keyframes spin-loader {
to { transform: rotate(360deg); }
}
/* Built-in Alert Boxes */
.avc-form-alert {
border-radius: 8px !important;
padding: 16px 20px !important;
font-size: 14px !important;
line-height: 1.5 !important;
margin-bottom: 20px !important;
}
.avc-alert-success {
background: #f0f7f1 !important;
border-left: 4px solid #1F3D2B !important;
color: #1F3D2B !important;
}
.avc-alert-error {
background: #fdf2f2 !important;
border-left: 4px solid #EB340A !important;
color: #EB340A !important;
}
/* Right Details Column */
.avc-contact-info-container {
flex: 0 0 35% !important;
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
box-sizing: border-box !important;
}
.avc-contact-card {
background: #F8F6F3 !important;
border: 1px solid #eaeaea !important;
border-radius: 12px !important;
padding: 24px 30px !important;
display: flex !important;
gap: 20px !important;
align-items: flex-start !important;
box-sizing: border-box !important;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}
.avc-contact-card:hover {
transform: translateY(-5px) !important;
border-color: #1F3D2B !important;
box-shadow: 0 8px 25px rgba(31, 61, 43, 0.08) !important;
}
.avc-contact-card .card-icon {
width: 44px !important;
height: 44px !important;
background: #F0F5F1 !important;
color: #1F3D2B !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
}
.avc-contact-card .card-icon svg {
width: 20px !important;
height: 20px !important;
}
.avc-contact-card .card-text {
flex: 1 !important;
min-width: 0 !important;
}
.avc-contact-card .card-text h3 {
font-size: 15px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
color: #1F3D2B !important;
margin: 0 0 8px 0 !important;
}
.avc-contact-card .card-text .main-val {
font-size: 15px !important;
font-weight: 600 !important;
color: #111 !important;
margin: 0 0 4px 0 !important;
line-height: 1.5 !important;
word-break: break-word !important;
}
.avc-contact-card .card-text .main-val a {
color: inherit !important;
text-decoration: none !important;
border-bottom: 1px solid rgba(0,0,0,0.1) !important;
transition: all 0.2s ease !important;
}
.avc-contact-card .card-text .main-val a:hover {
color: #1F3D2B !important;
border-bottom-color: #1F3D2B !important;
}
.avc-contact-card .card-text .sub-val {
font-size: 13px !important;
color: #666 !important;
margin: 0 !important;
line-height: 1.4 !important;
}
/* Google Map Embed Container */
.avc-contact-map-container {
width: 100% !important;
border: 1px solid #eaeaea !important;
border-radius: 12px !important;
overflow: hidden !important;
box-shadow: 0 4px 25px rgba(0,0,0,0.02) !important;
box-sizing: border-box !important;
}
.avc-contact-map-container iframe {
display: block !important;
}
/* RESPONSIVE LAYOUT OVERRIDES */
@media (max-width: 992px) {
.avc-contact-layout {
gap: 30px !important;
}
.avc-contact-info-container {
flex: 0 0 40% !important;
}
}
@media (max-width: 820px) {
.avc-contact-layout {
flex-direction: column !important;
gap: 35px !important;
}
.avc-contact-info-container {
flex: 1 1 100% !important;
width: 100% !important;
}
.avc-contact-form-container {
flex: 1 1 100% !important;
padding: 30px !important;
}
.avc-contact-card {
padding: 20px 24px !important;
}
.avc-contact-title {
font-size: 30px !important;
}
}
@media (max-width: 480px) {
.avc-form-row {
flex-direction: column !important;
gap: 20px !important;
}
.avc-contact-form-container {
padding: 24px 16px !important;
}
.avc-contact-card {
padding: 16px 20px !important;
}
.avc-contact-submit-btn {
width: 100% !important;
align-self: stretch !important;
}
}
/* ==========================================================================
PREMIUM MOBILE NAVIGATION (DL-MENU)
========================================================================== */
/* Toggle trigger hidden on desktop */
.dl-menuwrapper {
display: none;
position: relative;
float: right;
z-index: 1000;
}
/* Base structural styles for DLMenu */
.dl-menuwrapper button {
background: #1F3D2B;
border: none;
width: 44px;
height: 44px;
text-indent: -9000px;
overflow: hidden;
position: relative;
cursor: pointer;
border-radius: 6px;
outline: none !important;
transition: all 0.3s ease;
}
.dl-menuwrapper button:hover,
.dl-menuwrapper button.dl-active {
background: #152a1d;
}
/* Three-bar Hamburger menu icon using pure CSS */
.dl-menuwrapper button::after {
content: '';
position: absolute;
width: 20px;
height: 2px;
background: #fff;
top: 50%;
left: 50%;
margin-top: -1px;
margin-left: -10px;
box-shadow:
0 -6px 0 #fff,
0 6px 0 #fff;
transition: all 0.3s ease;
}
.dl-menuwrapper button.dl-active::after {
background: transparent;
box-shadow: none;
}
/* The sliding drawer container */
.dl-menuwrapper .dl-menu {
margin: 5px 0 0 0;
position: absolute;
right: 0;
width: 280px;
background: #1F3D2B;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
opacity: 0;
pointer-events: none;
transform: translateY(15px) scale(0.95);
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
list-style: none !important;
padding: 10px 0 !important;
z-index: 1000;
}
.dl-menuwrapper .dl-menu.dl-menuopen {
opacity: 1;
pointer-events: auto;
transform: translateY(0) scale(1);
}
/* Menu list items styling */
.dl-menuwrapper .dl-menu li {
position: relative;
display: block;
margin: 0 !important;
padding: 0 !important;
}
.dl-menuwrapper .dl-menu li a {
display: block;
position: relative;
padding: 12px 20px;
font-size: 15px;
font-weight: 600;
color: rgba(255, 255, 255, 0.85) !important;
text-transform: uppercase;
text-decoration: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
transition: background 0.2s ease, color 0.2s ease;
}
.dl-menuwrapper .dl-menu li:last-child a {
border-bottom: none;
}
.dl-menuwrapper .dl-menu li a:hover {
background: rgba(255, 255, 255, 0.08);
color: #fff !important;
}
/* Utility links (Account/Wishlist/Checkout/About Us) folded into mobile drawer.
Hidden by default; only shown ≤480px where .top-links has no visibility (see @media 480px below). */
.dl-menuwrapper .dl-menu li.dl-utility-divider,
.dl-menuwrapper .dl-menu li.dl-utility-item {
display: none;
}
.dl-menuwrapper .dl-menu li.dl-utility-divider {
padding: 10px 20px 6px !important;
background: rgba(0, 0, 0, 0.15);
}
.dl-menuwrapper .dl-menu li.dl-utility-divider span {
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
}
/* Icon + label were stacking vertically because the generic
`.dl-menu li a` rule sets display:block on the link, dropping it onto
its own line below the inline icon. Making the itself a flex row
puts the icon and link side by side and vertically centered. */
.dl-menuwrapper .dl-menu li.dl-utility-item {
align-items: center !important;
padding-left: 20px !important;
}
.dl-menuwrapper .dl-menu li.dl-utility-item i {
width: 18px;
flex-shrink: 0;
text-align: center;
margin-right: 10px;
color: rgba(255, 255, 255, 0.6);
}
.dl-menuwrapper .dl-menu li.dl-utility-item a {
padding-left: 0 !important;
flex: 1;
}
/* Submenu trigger indicators (carets) */
.dl-menuwrapper .dl-menu li > a:not(:only-child)::after {
content: "\f105"; /* FontAwesome Angle Right */
font-family: "FontAwesome";
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
color: rgba(255, 255, 255, 0.5);
}
/* The Submenus */
.dl-menuwrapper .dl-submenu {
display: none;
}
/* Submenus behavior driven by JS: when clicked, slide sub-view */
.dl-menu.dl-subview li,
.dl-menu.dl-subview li.dl-subviewopen > a,
.dl-menu.dl-subview li.dl-subview > a {
display: none;
}
.dl-menu.dl-subview li.dl-subviewopen,
.dl-menu.dl-subview li.dl-subviewopen > .dl-submenu,
.dl-menu.dl-subview li.dl-subviewopen > .dl-submenu > li {
display: block;
}
/* Back Button Item */
.dl-menuwrapper .dl-menu li.dl-back {
background: rgba(0, 0, 0, 0.15);
}
.dl-menuwrapper .dl-menu li.dl-back a {
padding-left: 40px;
font-weight: 700;
color: #fff !important;
}
.dl-menuwrapper .dl-menu li.dl-back a::before {
content: "\f104"; /* FontAwesome Angle Left */
font-family: "FontAwesome";
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
color: #fff;
}
/* Transitions for subviews */
.dl-menu.dl-animate-out-2 {
animation: MenuAnimOut2 0.3s ease-in-out forwards;
}
.dl-menu.dl-animate-in-2 {
animation: MenuAnimIn2 0.3s ease-in-out forwards;
}
@keyframes MenuAnimOut2 {
0% { }
100% { transform: translateX(-100%); opacity: 0; }
}
@keyframes MenuAnimIn2 {
0% { transform: translateX(100%); opacity: 0; }
100% { transform: translateX(0); opacity: 1; }
}
.dl-submenu.dl-animate-out-2 {
animation: SubMenuAnimOut2 0.3s ease-in-out forwards;
}
.dl-submenu.dl-animate-in-2 {
animation: SubMenuAnimIn2 0.3s ease-in-out forwards;
}
@keyframes SubMenuAnimOut2 {
0% { transform: translateX(0); opacity: 1; }
100% { transform: translateX(100%); opacity: 0; }
}
@keyframes SubMenuAnimIn2 {
0% { transform: translateX(-100%); opacity: 0; }
100% { transform: translateX(0); opacity: 1; }
}
/* Responsive View Adjustments */
@media (max-width: 768px) {
/* Hide desktop menu bar */
.sf-contener {
display: none !important;
}
/* Reveal and position the mobile menu trigger on the header content flex */
.dl-menuwrapper {
display: block !important;
order: 4 !important; /* Positions it nicely relative to search and logo */
margin-left: 15px;
}
/* Adjust header elements flex ordering and alignments */
.header-content {
flex-wrap: wrap !important;
gap: 15px !important;
justify-content: space-between !important;
}
#searchbox {
width: 100% !important;
order: 5 !important;
margin: 10px 0 0 0 !important;
}
#searchbox p {
width: 100% !important;
}
#searchbox input {
width: 100% !important;
}
.quick-access {
order: 3 !important;
}
}
/* ==========================================================================
FALLBACK RESPONSIVENESS FOR CUSTOM ELEMENTOR WIDGETS
========================================================================== */
@media (max-width: 991px) {
.category-grid {
grid-template-columns: repeat(4, 1fr) !important;
gap: 15px !important;
}
.articles-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 20px !important;
}
}
@media (max-width: 767px) {
.category-grid {
grid-template-columns: repeat(3, 1fr) !important;
gap: 10px !important;
}
.articles-grid {
grid-template-columns: 1fr !important;
gap: 20px !important;
}
.section-title {
font-size: 26px !important;
margin-bottom: 35px !important;
}
}
@media (max-width: 480px) {
.category-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
.cat-card img {
height: 110px !important;
}
}
/* Big Discount Section Fallbacks */
@media (max-width: 768px) {
.big-discount-wrapper .products {
grid-template-columns: repeat(2, 1fr) !important;
gap: 15px !important;
}
}
@media (max-width: 480px) {
.big-discount-wrapper .products {
grid-template-columns: 1fr !important;
}
}
/* ==========================================================================
ELEGANT RESPONSIVE HEADER & FOOTER OVERHAULS
========================================================================== */
/* Top Utility links scaling */
@media (max-width: 768px) {
.top-links .navbar-inner {
flex-direction: column !important;
gap: 8px !important;
padding: 10px !important;
max-width: 100% !important;
}
.top-links ul.nav {
justify-content: center !important;
gap: 15px !important;
}
}
@media (max-width: 480px) {
.top-links {
display: none !important; /* Hide small utility bar on mobile portrait to maximize space */
}
/* Utility links hidden above (via .top-links) are folded into the
hamburger drawer here so Account/Wishlist/Checkout/About Us stay reachable. */
.dl-menuwrapper .dl-menu li.dl-utility-divider {
display: block;
}
.dl-menuwrapper .dl-menu li.dl-utility-item {
display: flex;
}
}
/* Premium Header Alignment for Mobile views */
@media (max-width: 768px) {
.header-content {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 15px 20px !important;
max-width: 100% !important;
}
.header-content .logo {
margin: 0 !important;
max-width: 120px !important;
}
.header-content .logo img {
max-height: 40px !important;
width: auto !important;
object-fit: contain !important;
}
.quick-access {
margin: 0 !important;
}
.quick-access span {
display: none !important; /* Hide text detail so cart icon looks minimal and beautiful */
}
#searchbox {
width: 100% !important;
margin: 10px 0 5px 0 !important;
}
#searchbox p {
border-radius: 30px !important; /* Clean rounded search bar */
border: none !important; /* was 1px solid #eaeaea — duplicate/conflicting block, see the other #searchbox p rule which already sets border:none */
background: transparent !important;
transition: all 0.3s ease;
}
#searchbox p:focus-within {
box-shadow: none !important;
}
#searchbox input {
padding: 10px 20px !important;
}
}
/* Premium Footer Column wrap & spacing */
@media (max-width: 991px) {
.footer-set {
flex-wrap: wrap !important;
gap: 40px !important;
}
.footer-set .block {
flex: 1 1 calc(50% - 20px) !important; /* 2 Columns on Tablet */
}
}
@media (max-width: 768px) {
.footer-wrap {
max-width: 100% !important;
padding-left: 30px !important;
padding-right: 30px !important;
}
}
@media (max-width: 560px) {
.footer-set {
flex-direction: column !important;
gap: 30px !important;
}
.footer-set .block {
flex: 1 1 100% !important; /* Single column on phones */
}
#footer-absolute {
flex-direction: column-reverse !important; /* Social icons on top, copyright at bottom */
gap: 20px !important;
text-align: center !important;
padding: 30px 0 !important;
}
#footer-absolute .social p {
justify-content: center !important;
}
}
/* ==========================================================================
ELEGANT RESPONSIVE CHECKOUT OVERRIDES
========================================================================== */
@media (max-width: 991px) {
.avc-co-layout {
grid-template-columns: 1fr !important; /* Stack checkout columns vertically */
gap: 24px !important;
}
.avc-co-right {
position: static !important; /* Disable sticky summary sidebar on tablets/mobile */
top: auto !important;
}
}
@media (max-width: 768px) {
.avc-co-wrapper {
max-width: 100% !important;
padding: 0 15px !important;
}
/* Trust Feature Bar grid wrapping */
.avc-co-feature-bar {
grid-template-columns: repeat(2, 1fr) !important;
}
.avc-co-feature {
border-right: 1px solid #eaeaea !important;
border-bottom: 1px solid #eaeaea !important;
}
.avc-co-feature:nth-child(2n) {
border-right: none !important;
}
.avc-co-feature:nth-child(3),
.avc-co-feature:nth-child(4) {
border-bottom: none !important;
}
/* Footer and order submission block */
.avc-co-footer-row {
flex-direction: column !important;
align-items: stretch !important;
gap: 20px !important;
}
.avc-co-terms-label {
justify-content: center !important;
text-align: center !important;
}
.avc-co-place-order-container {
align-items: center !important;
}
.avc-co-place-order {
width: 100% !important;
}
.avc-co-place-order-sub {
text-align: center !important;
}
}
@media (max-width: 560px) {
/* Step indicators optimization for mobile portrait */
.avc-co-steps {
padding: 15px 10px !important;
gap: 5px !important;
}
.avc-co-step__info {
display: none !important; /* Hide labels on tiny screens to avoid squishing */
}
.avc-co-step__line {
margin: 0 8px !important;
}
/* Trust Feature Bar single column for small phones */
.avc-co-feature-bar {
grid-template-columns: 1fr !important;
}
.avc-co-feature {
border-right: none !important;
border-bottom: 1px solid #eaeaea !important;
}
.avc-co-feature:last-child {
border-bottom: none !important;
}
}
/* ==========================================================================
MOBILE VIEWPORT AND OVERFLOW PREVENTER
Clips horizontal scrolling, stabilizes screen panning, and preserves
layout proportions across all mobile and tablet resolutions.
========================================================================== */
@media (max-width: 991px) {
html, body {
overflow-x: hidden !important;
width: 100% !important;
max-width: 100% !important;
position: relative !important;
}
#page {
overflow-x: hidden !important;
width: 100% !important;
max-width: 100% !important;
position: relative !important;
}
/* Stabilize and optimize global container sizes for mobile comfort */
.container_9 {
max-width: 100% !important;
width: 100% !important;
padding-left: 15px !important;
padding-right: 15px !important;
box-sizing: border-box !important;
}
/* Lock elements that might overflow due to rigid bootstrap float offsets */
.row, .row-fluid, [class*="span"], #header, #footer, #columns, .footer-wrap {
max-width: 100% !important;
box-sizing: border-box !important;
}
}
/* ==========================================================================
PREMIUM MOBILE HEADER REDESIGN (STICKY, SYMMETRIC, SEARCH PILL)
========================================================================== */
@media (max-width: 768px) {
/* 1. Make Mobile Header Sticky & Premium */
#header {
position: sticky !important;
top: 0 !important;
z-index: 2000 !important;
background: #ffffff !important;
box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
border-bottom: 1px solid #eaeaea !important;
padding: 12px 15px !important;
box-sizing: border-box !important;
width: 100% !important;
}
/* 2. Re-arrange Header Content via Clean Flex Column Layout */
.header-content {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
width: 100% !important;
padding-right: 105px !important; /* Leave exact space for absolute symmetric buttons */
box-sizing: border-box !important;
margin: 0 !important;
}
/* Left: Logo Alignment */
.logo {
align-self: flex-start !important;
margin: 0 !important;
max-width: 125px !important;
}
.logo img {
max-height: 38px !important;
width: auto !important;
object-fit: contain !important;
display: block !important;
}
/* Right Side: Symmetrical Absolute Buttons (Aligned Pixel-Perfectly at top: 12px) */
.quick-access {
position: absolute !important;
top: 12px !important;
right: 67px !important; /* Hamburger (15px) + Button (42px) + Gap (10px) = 67px! */
z-index: 2100 !important;
margin: 0 !important;
}
.quick-access ul {
display: flex !important;
gap: 8px !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.quick-access li:has(.icon-exchange) {
display: none !important; /* Hide redundant compare button on mobile header */
}
.quick-access .cart-btn {
width: 42px !important;
height: 42px !important;
border-radius: 50% !important;
background: #f4f6f5 !important;
border: 1px solid #eaeaea !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: #1F3D2B !important;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
text-decoration: none !important;
}
.quick-access .cart-btn:hover,
.quick-access .cart-btn:active {
background: #1F3D2B !important;
color: #ffffff !important;
border-color: #1F3D2B !important;
}
.quick-access .cart-btn i {
font-size: 16px !important;
margin: 0 !important;
}
.quick-access span {
display: none !important; /* Hide secondary text details so layout stays minimal */
}
/* Far Right: Circular Symmetrical Mobile Trigger (DLMenu Wrapper) */
.dl-menuwrapper {
display: block !important;
position: absolute !important;
top: 12px !important;
right: 15px !important;
z-index: 2100 !important;
margin: 0 !important;
}
.dl-menuwrapper button {
width: 42px !important;
height: 42px !important;
border-radius: 50% !important;
background: #1F3D2B !important;
border: none !important;
box-shadow: 0 4px 10px rgba(31,61,43,0.15) !important;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}
.dl-menuwrapper button:hover,
.dl-menuwrapper button.dl-active {
background: #152a1d !important;
transform: scale(1.05) !important;
}
.dl-menuwrapper button::after {
width: 18px !important;
height: 2px !important;
margin-left: -9px !important;
box-shadow:
0 -5px 0 #fff,
0 5px 0 #fff !important;
}
/* Row 2: Premium Full-Width Rounded Search Pill */
#searchbox {
width: 100% !important;
margin: 0 !important;
box-sizing: border-box !important;
}
#searchbox p {
position: relative !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
border: none !important; /* remove the base rectangular wrapper border */
background: transparent !important; /* the rounded pill is the only visible field */
box-shadow: none !important;
}
#searchbox p::before {
content: "\f002" !important; /* FontAwesome Magnifying Glass Search Icon */
font-family: "FontAwesome" !important;
position: absolute !important;
left: 16px !important;
top: 50% !important;
transform: translateY(-50%) !important;
font-size: 13px !important;
color: #1F3D2B !important;
opacity: 0.7 !important;
pointer-events: none !important;
z-index: 5 !important;
}
#searchbox input[type="text"] {
width: 100% !important;
height: 38px !important;
border-radius: 24px !important;
border: none !important;
background: #f4f6f5 !important;
padding: 0 15px 0 40px !important;
font-size: 13px !important;
color: #333 !important;
box-sizing: border-box !important;
outline: none !important;
transition: all 0.3s ease !important;
/* Strip the native OS input bezel/shadow some mobile browsers
(notably iOS Safari) render by default regardless of border:none. */
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
}
#searchbox input[type="text"]:focus {
background: #ffffff !important;
border: 1px solid #1F3D2B !important;
box-shadow: 0 4px 12px rgba(31,61,43,0.06) !important;
padding-left: 39px !important; /* Keep icon space neat */
}
/* Submenus positioning adjust */
.dl-menuwrapper .dl-menu {
top: 48px !important;
right: 0 !important;
width: 260px !important;
}
}
/* ==========================================================================
PREMIUM MOBILE FOOTER ACCORDION REDESIGN
========================================================================== */
@media (max-width: 768px) {
#footer {
padding: 35px 15px 25px !important;
background-color: #1F3D2B !important;
box-sizing: border-box !important;
}
.footer-wrap {
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
box-sizing: border-box !important;
}
.footer-set {
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
width: 100% !important;
}
#footer .block {
flex: 1 1 100% !important;
width: 100% !important;
margin: 0 0 10px 0 !important;
padding-bottom: 0 !important; /* RESET DESKTOP 30PX PADDING */
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
/* Reset all active widget wrappers, divs, asides, and lists inside the block on mobile */
#footer .block .widget,
#footer .block > div,
#footer .block > aside,
#footer .block > ul,
#footer .block > ol,
#footer .block > p {
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
#footer .block:last-child {
border-bottom: none !important;
}
/* Interactive Title Headers (Using Specific ID Selector to Override Desktop) */
#footer h4 {
position: relative !important;
color: #ffffff !important;
font-size: 13px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
padding: 16px 0 !important;
margin: 0 !important; /* RESET DESKTOP MARGIN-BOTTOM */
border-bottom: none !important; /* RESET DESKTOP SOLID GREY BORDER */
cursor: pointer !important;
user-select: none !important;
transition: color 0.3s ease !important;
}
#footer h4:hover {
color: #a8d5b8 !important;
}
/* Interactive Chevrons using FontAwesome.
Also neutralise the desktop tan accent-bar ::after (`.footer-set .block h4::after`)
whose left/width/height/background/bottom leak onto this same pseudo-element on
mobile and render as a stray orange line across the heading text. */
#footer h4::after {
content: "\f107" !important; /* FontAwesome Angle Down */
font-family: "FontAwesome" !important;
position: absolute !important;
right: 5px !important;
left: auto !important;
top: 50% !important;
bottom: auto !important;
width: auto !important;
height: auto !important;
background: transparent !important;
transform: translateY(-50%) !important;
font-size: 15px !important;
color: rgba(255, 255, 255, 0.5) !important;
transition: transform 0.3s ease, color 0.3s ease !important;
}
#footer .block.active h4 {
color: #ffffff !important;
}
#footer .block.active h4::after {
transform: translateY(-50%) rotate(180deg) !important;
color: #ffffff !important;
}
/* Collapsible Content Area */
#footer .block .block_content {
display: none; /* JS slideToggle will drive this */
padding: 5px 15px 20px 15px !important;
background: rgba(0, 0, 0, 0.12) !important;
border-radius: 8px !important;
margin-bottom: 15px !important;
box-sizing: border-box !important;
}
.footer-set .block .block_content ul {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
}
.footer-set .block .block_content ul li {
margin: 0 !important;
padding: 0 !important;
}
.footer-set .block .block_content ul li a {
color: rgba(255, 255, 255, 0.75) !important;
font-size: 13px !important;
text-decoration: none !important;
display: block !important;
padding: 4px 0 !important;
transition: all 0.25s ease !important;
}
.footer-set .block .block_content ul li a:hover {
color: #ffffff !important;
transform: translateX(3px) !important;
}
/* Statically style contact block paragraphs inside collapsed content */
.footer-set .block .block_content p {
color: rgba(255, 255, 255, 0.75) !important;
font-size: 13px !important;
line-height: 1.6 !important;
margin: 0 !important;
}
.footer-set .block .block_content p a {
color: #ffffff !important;
font-weight: 600 !important;
text-decoration: none !important;
border-bottom: 1px solid rgba(255,255,255,0.2) !important;
transition: border-color 0.25s ease !important;
}
.footer-set .block .block_content p a:hover {
border-bottom-color: #ffffff !important;
}
/* Absolute Bottom Footer Centering */
#footer-absolute {
margin-top: 30px !important;
padding: 20px 0 0 0 !important;
border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
flex-direction: column-reverse !important;
gap: 15px !important;
align-items: center !important;
text-align: center !important;
}
}
/* ─── WooCommerce My Account Redesign ───────────────────────────── */
/* Page Background & Spacing */
.woocommerce-account {
background-color: #f7f9f8 !important; /* Soft premium grey-green background */
}
.woocommerce-account .container {
padding-top: 20px !important;
padding-bottom: 60px !important;
}
@media (max-width: 768px) {
/* 60px was tuned for desktop; on a short phone viewport it reads as a large
empty gap between the login card and the footer. Tighten it up. */
.woocommerce-account .container {
padding-top: 16px !important;
padding-bottom: 24px !important;
}
/* #footer has a SITE-WIDE `margin-top: 50px` (see the base #footer rule).
On most pages that's fine, but here it stacks on top of this page's own
container padding AND the login card's own padding, adding up to a much
bigger gap than intended. Zero it out just for this page. */
body.woocommerce-account #footer {
margin-top: 0 !important;
}
}
/* 2-Column Grid Layout */
#customer_login.col2-set {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 40px !important;
max-width: 1000px !important;
margin: 20px auto 0 !important;
float: none !important;
width: 100% !important;
/* Without this, the mobile rule's 20px left+right padding (below) gets
ADDED on top of width:100% instead of eating into it — a 40px overflow
that pushes the card's right edge past the viewport while the left
20px inset stays visible, i.e. exactly a card flush right / gapped left. */
box-sizing: border-box !important;
}
#customer_login.col2-set::before,
#customer_login.col2-set::after {
display: none !important; /* Remove float clearers */
}
/* Forms Card Layout */
#customer_login .col-1,
#customer_login .col-2 {
width: 100% !important;
float: none !important;
background: #ffffff !important;
border: 1px solid #eaeaea !important;
border-radius: 12px !important;
padding: 40px !important;
box-shadow: 0 4px 25px rgba(0, 0, 0, 0.02) !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
}
/* Form Titles */
#customer_login h2 {
font-size: 24px !important;
color: #1f3d2b !important;
font-weight: 700 !important;
margin-top: 0 !important;
margin-bottom: 25px !important;
text-transform: capitalize !important;
border-bottom: 2px solid #f0f3f1 !important;
padding-bottom: 15px !important;
letter-spacing: -0.3px !important;
}
/* Forms Content & Spacing */
.woocommerce-form-login,
.woocommerce-form-register {
margin: 0 !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
}
.woocommerce-form-row {
margin-bottom: 20px !important;
}
/* Form Labels */
.woocommerce-form-row label {
display: block !important;
font-weight: 600 !important;
font-size: 14px !important;
color: #2c3e35 !important;
margin-bottom: 8px !important;
}
.woocommerce-form-row label .required {
color: #e05252 !important;
text-decoration: none !important;
}
/* Inputs fields */
.woocommerce-form-row input.input-text {
width: 100% !important;
background-color: #fcfcfc !important;
border: 1px solid #dcdcdc !important;
border-radius: 8px !important;
padding: 12px 16px !important;
font-size: 15px !important;
color: #333333 !important;
box-sizing: border-box !important;
transition: all 0.25s ease-in-out !important;
}
.woocommerce-form-row input.input-text:focus {
background-color: #ffffff !important;
border-color: #1f3d2b !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(31, 61, 43, 0.1) !important;
}
/* Password Visibility Wrapper */
.woocommerce-form-row .password-input {
position: relative !important;
display: block !important;
}
.woocommerce-form-row .password-input input {
padding-right: 45px !important;
}
.woocommerce-form-row .password-input .show-password-input {
position: absolute !important;
right: 15px !important;
top: 50% !important;
transform: translateY(-50%) !important;
cursor: pointer !important;
color: #666666 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Remember me & Forgot Password Row */
.woocommerce-form-login .form-row:nth-child(3) {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
margin-bottom: 25px !important;
flex-wrap: wrap !important;
gap: 10px !important;
}
.woocommerce-form-login-rememberme {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
margin: 0 !important;
cursor: pointer !important;
}
.woocommerce-form-login-rememberme input[type="checkbox"] {
width: 16px !important;
height: 16px !important;
accent-color: #1f3d2b !important;
cursor: pointer !important;
margin: 0 !important;
}
.woocommerce-form-login-rememberme span {
font-size: 14px !important;
color: #666666 !important;
font-weight: 500 !important;
user-select: none !important;
}
.woocommerce-LostPassword {
margin: 0 !important;
}
.woocommerce-LostPassword a {
font-size: 14px !important;
color: #1f3d2b !important;
font-weight: 500 !important;
text-decoration: none !important;
transition: color 0.2s !important;
}
.woocommerce-LostPassword a:hover {
color: #15291d !important;
text-decoration: underline !important;
}
/* CTA Buttons */
#customer_login button.button {
background-color: #1f3d2b !important;
color: #ffffff !important;
border: none !important;
border-radius: 8px !important;
padding: 14px 28px !important;
font-size: 15px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
cursor: pointer !important;
transition: all 0.25s ease !important;
width: 100% !important;
display: block !important;
margin-top: 10px !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}
#customer_login button.button:hover {
background-color: #15291d !important;
transform: translateY(-1px) !important;
box-shadow: 0 4px 12px rgba(31, 61, 43, 0.15) !important;
}
#customer_login button.button:active {
transform: translateY(0) !important;
}
/* Disclaimers & Info Boxes */
.woocommerce-privacy-policy-text,
.woocommerce-form-register p:not([class]) {
font-size: 13px !important;
line-height: 1.6 !important;
color: #666666 !important;
margin-top: 15px !important;
margin-bottom: 15px !important;
}
.woocommerce-privacy-policy-text a {
color: #1f3d2b !important;
text-decoration: none !important;
}
.woocommerce-privacy-policy-text a:hover {
text-decoration: underline !important;
}
/* Responsive Scaling */
@media (max-width: 768px) {
#customer_login.col2-set {
grid-template-columns: 1fr !important;
gap: 30px !important;
padding-left: 20px !important;
padding-right: 20px !important;
}
#customer_login .col-1,
#customer_login .col-2 {
padding: 30px !important;
}
}
/* WooCommerce Alert Notices */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
list-style: none !important;
margin: 0 auto 30px !important;
padding: 16px 24px !important;
border-radius: 8px !important;
font-size: 14px !important;
font-weight: 500 !important;
max-width: 1000px !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
}
/* Hide WooCommerce default pseudo-element notice icons globally to prevent layout overlapping */
.woocommerce-error::before,
.woocommerce-message::before,
.woocommerce-info::before {
display: none !important;
}
.woocommerce-error li,
.woocommerce-message li,
.woocommerce-info li {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
/* Error Notice Styling (Red/Rose) */
.woocommerce-error {
background-color: #fff5f5 !important;
border: 1px solid #ffdbdb !important;
border-left: 4px solid #e05252 !important;
color: #a82e2e !important;
}
/* Success Message Styling (Green/Emerald) */
.woocommerce-message {
background-color: #f3faf6 !important;
border: 1px solid #def0e5 !important;
border-left: 4px solid #1f3d2b !important;
color: #1a422b !important;
}
/* Info Message Styling (Blue) */
.woocommerce-info {
background-color: #f4f9fc !important;
border: 1px solid #e2f0f7 !important;
border-left: 4px solid #2f80ed !important;
color: #1e5396 !important;
}
/* Centered Single-Column Form View Override */
#customer_login.col2-set.avc-login-view-login,
#customer_login.col2-set.avc-login-view-register {
grid-template-columns: 1fr !important;
max-width: 500px !important;
margin: 20px auto 0 !important;
}
/* Switch Prompts at the bottom of forms */
.avc-login-switch-prompt {
text-align: center !important;
margin-top: 25px !important;
border-top: 1px solid #f0f3f1 !important;
padding-top: 20px !important;
}
.avc-login-switch-prompt p {
margin: 0 !important;
font-size: 14px !important;
color: #666666 !important;
}
.avc-login-switch-prompt a {
color: #1f3d2b !important;
font-weight: 600 !important;
text-decoration: none !important;
transition: color 0.2s !important;
}
.avc-login-switch-prompt a:hover {
color: #15291d !important;
text-decoration: underline !important;
}
/* ==========================================
WOOCOMMERCE LOGGED-IN DASHBOARD DESIGN
========================================== */
/* Main Grid Layout for Logged-In WooCommerce Page */
.logged-in.woocommerce-account .woocommerce {
display: grid !important;
grid-template-columns: 280px 1fr !important;
gap: 30px !important;
max-width: 1200px !important;
margin: 10px auto !important;
align-items: start !important;
padding: 0 20px !important;
box-sizing: border-box !important;
}
/* Ensure notices and notice wrappers span both grid columns */
.woocommerce-notices-wrapper,
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-info {
grid-column: 1 / -1 !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Sidebar Navigation - Specific selector overrides to prevent overlapping/width errors */
.logged-in.woocommerce-account .woocommerce-MyAccount-navigation {
grid-column: 1 !important;
float: none !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important; /* Prevent any negative margins from pushing it */
position: relative !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
background: #ffffff !important;
border: 1px solid #eaeaea !important;
border-radius: 12px !important;
padding: 24px !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
box-sizing: border-box !important;
}
.logged-in.woocommerce-account .woocommerce-MyAccount-navigation ul {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.logged-in.woocommerce-account .woocommerce-MyAccount-navigation li {
list-style: none !important;
margin: 0 0 8px 0 !important;
padding: 0 !important;
}
.logged-in.woocommerce-account .woocommerce-MyAccount-navigation li:last-child {
margin-bottom: 0 !important;
}
.logged-in.woocommerce-account .woocommerce-MyAccount-navigation li a {
display: block !important;
padding: 12px 16px !important;
color: #4a5568 !important;
font-weight: 600 !important;
font-size: 15px !important;
text-decoration: none !important;
border-radius: 8px !important;
transition: all 0.2s ease-in-out !important;
}
/* Sidebar Navigation - Hover State */
.logged-in.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
color: #1f3d2b !important;
background-color: #f3faf6 !important;
padding-left: 20px !important;
}
/* Sidebar Navigation - Active State */
.logged-in.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
color: #ffffff !important;
background-color: #1f3d2b !important;
box-shadow: 0 4px 12px rgba(31, 61, 43, 0.15) !important;
}
/* Dashboard Content Panel - Specific selector overrides to prevent overlapping/width errors */
.logged-in.woocommerce-account .woocommerce-MyAccount-content {
grid-column: 2 !important;
float: none !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important; /* Prevent any negative margins from pushing it */
position: relative !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
background: #ffffff !important;
border: 1px solid #eaeaea !important;
border-radius: 12px !important;
padding: 40px !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
color: #2d3748 !important;
line-height: 1.6 !important;
box-sizing: border-box !important;
}
/* Welcome Dashboard Paragraphs & Typography */
.woocommerce-MyAccount-content p {
font-size: 15px !important;
margin-bottom: 20px !important;
color: #4a5568 !important;
line-height: 1.7 !important;
}
.woocommerce-MyAccount-content p:last-child {
margin-bottom: 0 !important;
}
.woocommerce-MyAccount-content p a {
color: #1f3d2b !important;
font-weight: 600 !important;
text-decoration: none !important;
border-bottom: 1px dashed #1f3d2b !important;
transition: all 0.2s ease !important;
}
.woocommerce-MyAccount-content p a:hover {
color: #15291d !important;
border-bottom-style: solid !important;
}
.woocommerce-MyAccount-content mark {
background: none !important;
color: #1f3d2b !important;
font-weight: 600 !important;
}
/* Data Tables Styling (Orders, Downloads) */
.woocommerce-MyAccount-content table.shop_table {
width: 100% !important;
border-collapse: separate !important;
border-spacing: 0 !important;
margin: 25px 0 !important;
border: 1px solid #eaeaea !important;
border-radius: 10px !important;
overflow: hidden !important;
}
.woocommerce-MyAccount-content table.shop_table th {
background-color: #f8faf9 !important;
color: #1f3d2b !important;
font-weight: 700 !important;
text-transform: uppercase !important;
font-size: 12px !important;
letter-spacing: 0.8px !important;
padding: 16px 20px !important;
border-bottom: 1px solid #eaeaea !important;
text-align: left !important;
}
.woocommerce-MyAccount-content table.shop_table td {
padding: 16px 20px !important;
border-bottom: 1px solid #eaeaea !important;
color: #4a5568 !important;
font-size: 14.5px !important;
vertical-align: middle !important;
background-color: #ffffff !important;
}
.woocommerce-MyAccount-content table.shop_table tr:last-child td {
border-bottom: none !important;
}
.woocommerce-MyAccount-content table.shop_table tr:hover td {
background-color: #fbfdfc !important;
}
/* Buttons inside Dashboard Content */
.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content .woocommerce-Button {
background-color: #1f3d2b !important;
color: #ffffff !important;
border: none !important;
border-radius: 6px !important;
padding: 10px 18px !important;
font-size: 13.5px !important;
font-weight: 600 !important;
text-decoration: none !important;
display: inline-block !important;
cursor: pointer !important;
transition: all 0.25s ease !important;
text-align: center !important;
border-bottom: none !important;
}
.woocommerce-MyAccount-content .button:hover,
.woocommerce-MyAccount-content .woocommerce-Button:hover {
background-color: #15291d !important;
color: #ffffff !important;
box-shadow: 0 4px 12px rgba(31, 61, 43, 0.15) !important;
transform: translateY(-1px) !important;
}
/* Edit Addresses Layout */
.woocommerce-Addresses {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 25px !important;
margin-top: 30px !important;
}
.woocommerce-Address {
background: #fcfdfc !important;
border: 1px solid #e2ece7 !important;
border-radius: 10px !important;
padding: 24px !important;
box-sizing: border-box !important;
transition: all 0.25s ease !important;
}
.woocommerce-Address:hover {
border-color: #c8ddd2 !important;
box-shadow: 0 4px 15px rgba(31, 61, 43, 0.03) !important;
}
.woocommerce-Address-title {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
margin-bottom: 15px !important;
border-bottom: 1px solid #e9efeb !important;
padding-bottom: 12px !important;
}
.woocommerce-Address-title h3 {
font-size: 18px !important;
color: #1f3d2b !important;
margin: 0 !important;
font-weight: 700 !important;
}
.woocommerce-Address-title .edit {
font-size: 13.5px !important;
color: #1f3d2b !important;
font-weight: 600 !important;
text-decoration: none !important;
border-bottom: 1px dashed #1f3d2b !important;
transition: all 0.2s ease !important;
}
.woocommerce-Address-title .edit:hover {
color: #15291d !important;
border-bottom-style: solid !important;
}
.woocommerce-Address address {
font-style: normal !important;
color: #5a6578 !important;
line-height: 1.7 !important;
font-size: 14px !important;
}
/* Profile Form Fields (Edit Profile / Add Address) */
.woocommerce-MyAccount-content form .form-row {
margin-bottom: 20px !important;
width: 100% !important;
float: none !important;
display: flex !important;
flex-direction: column !important;
}
.woocommerce-MyAccount-content form .form-row-first,
.woocommerce-MyAccount-content form .form-row-last {
width: 48% !important;
display: inline-flex !important;
}
.woocommerce-MyAccount-content form .form-row-first {
float: left !important;
}
.woocommerce-MyAccount-content form .form-row-last {
float: right !important;
}
.woocommerce-MyAccount-content form label {
display: block !important;
font-weight: 600 !important;
font-size: 14px !important;
color: #2c3e35 !important;
margin-bottom: 8px !important;
}
.woocommerce-MyAccount-content form input.input-text,
.woocommerce-MyAccount-content form select,
.woocommerce-MyAccount-content form textarea {
width: 100% !important;
background-color: #fcfcfc !important;
border: 1px solid #dcdcdc !important;
border-radius: 8px !important;
padding: 12px 16px !important;
font-size: 14.5px !important;
color: #333333 !important;
box-sizing: border-box !important;
transition: all 0.25s ease !important;
}
.woocommerce-MyAccount-content form input.input-text:focus,
.woocommerce-MyAccount-content form select:focus,
.woocommerce-MyAccount-content form textarea:focus {
background-color: #ffffff !important;
border-color: #1f3d2b !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(31, 61, 43, 0.1) !important;
}
.woocommerce-MyAccount-content form fieldset {
border: 1px solid #eaeaea !important;
border-radius: 10px !important;
padding: 24px !important;
margin: 25px 0 !important;
}
.woocommerce-MyAccount-content form fieldset legend {
font-weight: 700 !important;
font-size: 16px !important;
color: #1f3d2b !important;
padding: 0 10px !important;
}
/* Clearfixes for floated forms */
.woocommerce-MyAccount-content form::after {
content: "" !important;
display: table !important;
clear: both !important;
}
/* Responsive / Mobile Adaptations */
@media (max-width: 991px) {
.logged-in.woocommerce-account .woocommerce {
grid-template-columns: 1fr !important;
gap: 30px !important;
margin: 20px auto !important;
}
.logged-in.woocommerce-account .woocommerce-MyAccount-navigation,
.logged-in.woocommerce-account .woocommerce-MyAccount-content {
grid-column: 1 !important;
width: 100% !important;
max-width: 100% !important;
float: none !important;
margin: 0 0 20px 0 !important;
}
.logged-in.woocommerce-account .woocommerce-MyAccount-content {
margin-bottom: 0 !important;
}
}
@media (max-width: 768px) {
.woocommerce-MyAccount-content {
padding: 24px !important;
}
.woocommerce-Addresses {
grid-template-columns: 1fr !important;
gap: 20px !important;
}
.woocommerce-MyAccount-content form .form-row-first,
.woocommerce-MyAccount-content form .form-row-last {
width: 100% !important;
float: none !important;
}
}
/* Overrides for product heading lines and shop container background */
.category-header-clean .page-title,
.woocommerce-loop-product__title,
.product_title,
.page-title {
border: none !important;
background: transparent !important;
text-decoration: none !important;
box-shadow: none !important;
}
.category-header-clean .page-title::before,
.category-header-clean .page-title::after,
.woocommerce-loop-product__title::before,
.woocommerce-loop-product__title::after,
.product_title::before,
.product_title::after,
.page-title::before,
.page-title::after {
display: none !important;
content: none !important;
width: 0 !important;
height: 0 !important;
}
/* Remove greyish card background overlay from shop container */
.shop-container,
.woocommerce .shop-container,
.archive.woocommerce .shop-container {
background-color: #ffffff !important;
background: #ffffff !important;
}
/* ==========================================================================
AVFURN PREMIUM VARIATION SWATCHES
========================================================================== */
.avfurn-swatches-wrapper {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin: 12px 0 18px 0;
}
.avfurn-swatch-item {
width: 44px;
height: 44px;
border-radius: 8px;
border: 1px solid #ddd;
cursor: pointer;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
transition: all 0.22s cubic-bezier(0.25, 0.8, 0.25, 1);
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
}
.avfurn-swatch-item:hover {
border-color: #888;
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}
.avfurn-swatch-item.is-selected {
border-color: #1F3D2B !important;
border-width: 2px !important;
box-shadow: 0 4px 12px rgba(31, 61, 43, 0.18) !important;
transform: scale(1.05);
}
/* Color & Image Swatches specific styling */
.avfurn-swatch-item.has-color,
.avfurn-swatch-item.has-image {
font-size: 0;
text-indent: -9999px;
overflow: hidden;
}
/* Text Swatches specific styling (e.g. Sizes) */
.avfurn-swatch-item.has-text {
font-size: 13px;
font-weight: 600;
color: #333;
padding: 0 16px;
width: auto; /* auto width based on content */
min-width: 44px;
background-color: #fbfbfb;
border-radius: 6px;
}
.avfurn-swatch-item.has-text.is-selected {
color: #ffffff;
background-color: #1F3D2B !important;
}
/* Out of Stock / Disabled Swatches styling (Cross-out line) */
.avfurn-swatch-item.is-disabled {
opacity: 0.45;
cursor: not-allowed !important;
}
.avfurn-swatch-item.is-disabled::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top right, transparent 47%, #e05252 48%, #e05252 52%, transparent 53%),
linear-gradient(to bottom right, transparent 47%, #e05252 48%, #e05252 52%, transparent 53%);
pointer-events: none;
border-radius: 6px;
}
/* Label Refinement */
.avfurn-swatch-label-wrap {
font-weight: 700;
color: #2c3e35;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.8px;
display: inline-block;
margin-bottom: 5px;
}
.avfurn-swatch-label-wrap .selected-term-name {
font-weight: 600;
color: #777;
text-transform: capitalize;
margin-left: 3px;
}
/* Align Variations Table neatly */
.woocommerce div.product form.cart .variations {
width: 100% !important;
margin-bottom: 25px !important;
border: none !important;
background: transparent !important;
}
.woocommerce div.product form.cart .variations td {
padding: 10px 0 !important;
border: none !important;
background: transparent !important;
display: block !important;
width: 100% !important;
}
.woocommerce div.product form.cart .variations td.label {
padding-bottom: 0 !important;
text-align: left !important;
}
.woocommerce div.product form.cart .variations td.value {
padding-top: 0 !important;
}
.woocommerce div.product form.cart .variations select {
display: none !important;
}
/* ========================================================
AVFURN PREMIUM VARIATION SWATCHES — FRONTEND
======================================================== */
/* Wrapper that holds all swatches for one attribute row */
.avfurn-swatches-wrapper {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
padding: 4px 0 2px;
}
/* ---- BASE SWATCH CHIP ---- */
.avfurn-swatch-item {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 6px;
border: 2px solid transparent;
transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
overflow: hidden;
flex-shrink: 0;
user-select: none;
}
/* ---- COLOR SWATCH (small square with colour fill) ---- */
.avfurn-swatch-item.has-color {
width: 36px;
height: 36px;
border-radius: 50%; /* circle for colour */
border: 2px solid rgba(0,0,0,.12);
box-shadow: inset 0 0 0 2px rgba(255,255,255,.35);
}
.avfurn-swatch-item.has-color:hover {
transform: scale(1.12);
border-color: #1f3d2b;
box-shadow: 0 0 0 3px rgba(31,61,43,.2);
}
.avfurn-swatch-item.has-color.is-selected {
border: 3px solid #1f3d2b;
box-shadow: 0 0 0 4px rgba(31,61,43,.18), inset 0 0 0 2px rgba(255,255,255,.5);
transform: scale(1.08);
}
/* ---- IMAGE / TEXTURE SWATCH ---- */
.avfurn-swatch-item.has-image {
width: 48px;
height: 48px;
border-radius: 8px;
background-size: cover;
background-position: center;
border: 2px solid rgba(0,0,0,.1);
}
.avfurn-swatch-item.has-image:hover {
transform: scale(1.08);
border-color: #1f3d2b;
box-shadow: 0 3px 10px rgba(31,61,43,.25);
}
.avfurn-swatch-item.has-image.is-selected {
border: 2.5px solid #1f3d2b;
box-shadow: 0 0 0 3px rgba(31,61,43,.2);
transform: scale(1.05);
}
/* ---- TEXT LABEL SWATCH (pill) ---- */
.avfurn-swatch-item.has-text {
height: 36px;
padding: 0 14px;
background: #f4f7f5;
color: #1f3d2b;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
white-space: nowrap;
border-radius: 30px;
border: 1.5px solid #d0ddd6;
}
.avfurn-swatch-item.has-text:hover {
background: #e7f0ea;
border-color: #1f3d2b;
box-shadow: 0 2px 8px rgba(31,61,43,.14);
}
.avfurn-swatch-item.has-text.is-selected {
background: #1f3d2b;
color: #ffffff;
border-color: #1f3d2b;
box-shadow: 0 4px 12px rgba(31,61,43,.30);
}
/* ---- DISABLED STATE (stock-out cross-through) ---- */
.avfurn-swatch-item.is-disabled {
opacity: .45;
cursor: not-allowed;
pointer-events: none;
position: relative;
}
.avfurn-swatch-item.is-disabled::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
135deg,
transparent 42%,
rgba(0,0,0,.55) 44%,
rgba(0,0,0,.55) 56%,
transparent 58%
);
border-radius: inherit;
}
/* ---- SELECTED TERM NAME in label row ---- */
.avfurn-swatch-label-wrap {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 13px;
font-weight: 600;
color: #374151;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.avfurn-swatch-label-wrap .selected-term-name {
font-weight: 400;
text-transform: none;
letter-spacing: 0;
color: #1f3d2b;
font-style: italic;
}
/* ---- Variation row cleanup ---- */
.woocommerce div.product form.cart .variations {
margin-bottom: 20px !important;
border: none !important;
background: transparent !important;
}
.woocommerce div.product form.cart .variations tr {
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
margin-bottom: 16px !important;
padding-bottom: 16px !important;
border-bottom: 1px solid #edf2ef !important;
}
.woocommerce div.product form.cart .variations tr:last-child {
border-bottom: none !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.woocommerce div.product form.cart .variations td {
padding: 0 !important;
border: none !important;
background: transparent !important;
display: block !important;
width: 100% !important;
}
.woocommerce div.product form.cart .variations td.label {
padding-bottom: 0 !important;
text-align: left !important;
}
.woocommerce div.product form.cart .variations td.value {
padding-top: 0 !important;
}
/* ============================================================
Trust / assurance card — fixed size, pinned a uniform 32px below the
thumbnails, full gallery width, 22px inner padding. Lives in
custom-style.css (cache-busted via filemtime) with !important so it
reliably overrides the inline rule in single-product.php.
============================================================ */
.single-product-luxury .product-main-row { align-items: flex-start !important; }
.single-product-luxury .product-images-col { display: block !important; }
.single-product-luxury .avf-gallery-wrap { width: 100% !important; }
.single-product-luxury .avf-assurance-card {
margin: 32px 0 0 0 !important;
width: 100% !important;
padding: 22px !important;
box-sizing: border-box !important;
}
/* ============================================================
Remove the fixed Image Height (200px) from the product carousels —
Featured Products, Recent Products & Deal of the Day all use the
product-carousel widget (.product-image img). Let the images keep
their natural height instead of being cropped to 200px. Overrides the
per-widget height Elementor generates from its "Image Height" control.
============================================================ */
.product-image img { height: auto !important; }
/* ============================================================
FOOTER BEAUTIFY — brand-tan accents, link hover slide, circular
social buttons, refined scroll-to-top. Appended last so it layers
cleanly over the existing footer styles. (Cache-busted via filemtime.)
============================================================ */
/* Column headings: short tan accent bar under each title + tighter tracking */
.footer-set .block h4 {
position: relative !important;
letter-spacing: 0.06em !important;
}
.footer-set .block h4::after {
content: "" !important;
position: absolute !important;
left: 0 !important;
bottom: -1px !important;
width: 38px !important;
height: 2px !important;
background: #d4a373 !important;
}
/* Links: warm tan on hover with a gentle slide (no underline) */
.footer-set .block_content a { transition: color 0.2s ease, transform 0.2s ease !important; }
.footer-set .block_content a:hover { color: #d4a373 !important; text-decoration: none !important; }
.footer-set .block_content ul li a { display: inline-block !important; }
.footer-set .block_content ul li a:hover { transform: translateX(3px) !important; }
/* Social icons: circular bordered buttons that fill tan on hover */
#footer-absolute .social a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 38px !important;
height: 38px !important;
border: 1px solid rgba(255,255,255,0.25) !important;
border-radius: 50% !important;
color: rgba(255,255,255,0.85) !important;
transition: all 0.25s ease !important;
}
#footer-absolute .social a:hover {
opacity: 1 !important;
background: #d4a373 !important;
border-color: #d4a373 !important;
color: #1F3D2B !important;
transform: translateY(-2px) !important;
}
/* Scroll-to-top: keep it round on hover (was turning square), lift gently */
.go-top:hover {
border-radius: 50% !important;
opacity: 1 !important;
background-color: #356048 !important;
border-color: #1F3D2B !important;
transform: translateX(-50%) translateY(-3px) !important;
}
/* (Payment gateway logo sizing is now handled by the selectable-card layout above.) */
/* ============================================================
Checkout PIN-code "Verify" button + status (India Post lookup)
============================================================ */
.avfurn-pin-wrap { display: flex; gap: 8px; align-items: stretch; }
.avfurn-pin-wrap > input { flex: 1 1 auto; }
.avfurn-pin-verify {
flex: 0 0 auto;
padding: 0 18px;
background: #1F3D2B;
color: #fff;
border: none;
border-radius: 6px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.03em;
cursor: pointer;
transition: background 0.2s ease;
white-space: nowrap;
}
.avfurn-pin-verify:hover { background: #2b4f39; }
.avfurn-pin-status { font-size: 12.5px; font-weight: 600; margin-top: 6px; }
.avfurn-pin-status.is-ok { color: #1f7a3d; }
.avfurn-pin-status.is-error { color: #d32f2f; }
.avfurn-pin-status.is-warn { color: #b5760a; }
.avfurn-pin-status.is-loading { color: #888; }
/* Checkout: highlight the Terms & Conditions checkbox when it's not accepted */
.avc-co-terms-label.avc-terms-error { color: #d32f2f !important; }
.avc-co-terms-label.avc-terms-error .avc-co-terms-check { outline: 2px solid #d32f2f; outline-offset: 2px; }
/* ============================================================
ORDER RECEIVED / THANK YOU PAGE (also styles My Account → View order)
============================================================ */
.woocommerce-order {
max-width: 940px;
margin: 40px auto 60px;
padding: 0 20px;
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
}
/* Success banner */
.woocommerce-order p.woocommerce-notice--success,
.woocommerce-order p.woocommerce-thankyou-order-received {
position: relative;
background: #f4f7f5;
border: 1px solid #d9e6df;
border-left: 4px solid #1F3D2B;
border-radius: 12px;
padding: 22px 24px 22px 60px;
margin: 0 0 30px;
font-size: 15.5px;
line-height: 1.55;
font-weight: 600;
color: #1F3D2B;
}
.woocommerce-order p.woocommerce-thankyou-order-received::before {
content: "\2713";
position: absolute; left: 20px; top: 22px;
width: 26px; height: 26px;
background: #1F3D2B; color: #fff; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 14px; font-weight: 700;
}
/* Order overview row (order #, date, email, total, payment) */
ul.woocommerce-order-overview {
list-style: none;
margin: 0 0 36px;
padding: 22px 26px;
display: flex;
flex-wrap: wrap;
gap: 18px 34px;
background: #fff;
border: 1px solid #eee7df;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(31,61,43,0.05);
}
ul.woocommerce-order-overview li {
border: none !important;
margin: 0; padding: 0;
font-size: 11.5px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #9a9a93;
font-weight: 600;
}
ul.woocommerce-order-overview li strong {
display: block;
margin-top: 6px;
font-size: 15px;
text-transform: none;
letter-spacing: 0;
color: #1F3D2B;
font-weight: 700;
}
/* Section titles */
.woocommerce-order h2 { font-size: 20px; color: #111; font-weight: 700; margin: 0 0 16px; }
/* Order details table — branded header, rounded card */
.woocommerce-order table.shop_table {
width: 100%;
border-collapse: separate !important;
border-spacing: 0 !important;
border: 1px solid #eee7df !important;
border-radius: 12px;
overflow: hidden;
margin: 0 0 36px;
box-shadow: 0 8px 24px rgba(31,61,43,0.05);
}
.woocommerce-order table.shop_table thead th {
background: #1F3D2B !important;
color: #fff !important;
padding: 14px 18px !important;
text-align: left;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.05em;
border: none !important;
}
.woocommerce-order table.shop_table td,
.woocommerce-order table.shop_table tbody th,
.woocommerce-order table.shop_table tfoot th,
.woocommerce-order table.shop_table tfoot td {
padding: 14px 18px !important;
border: 0 !important;
border-top: 1px solid #f0ece6 !important;
font-size: 14px;
color: #333;
text-align: left;
}
.woocommerce-order table.shop_table tfoot th { font-weight: 600; color: #555; }
.woocommerce-order table.shop_table tfoot tr:last-child th,
.woocommerce-order table.shop_table tfoot tr:last-child td {
font-size: 16px; font-weight: 700; color: #1F3D2B;
}
.woocommerce-order table.shop_table a { color: #1F3D2B; text-decoration: none; }
.woocommerce-order table.shop_table a:hover { color: #d4a373; }
/* Customer details / addresses → cards */
.woocommerce-order .woocommerce-customer-details .woocommerce-columns--addresses {
display: flex; flex-wrap: wrap; gap: 24px; margin: 0;
}
.woocommerce-order .woocommerce-customer-details .woocommerce-column { flex: 1 1 280px; margin: 0; }
.woocommerce-order .woocommerce-customer-details .woocommerce-column__title {
font-size: 16px; color: #111; font-weight: 700; margin: 0 0 12px;
}
.woocommerce-order .woocommerce-customer-details address {
background: #fff;
border: 1px solid #eee7df;
border-radius: 12px;
padding: 18px 20px;
font-style: normal;
font-size: 14px;
line-height: 1.7;
color: #444;
box-shadow: 0 6px 18px rgba(31,61,43,0.04);
}
.woocommerce-order .woocommerce-customer-details address p,
.woocommerce-order .woocommerce-customer-details address .woocommerce-customer-details--phone,
.woocommerce-order .woocommerce-customer-details address .woocommerce-customer-details--email {
margin: 8px 0 0; color: #1F3D2B;
}
@media (max-width: 600px) {
ul.woocommerce-order-overview { flex-direction: column; gap: 14px; }
}
/* ============================================================
HEADER SEARCH — real submit button (replaces decorative magnifier)
============================================================ */
#searchbox p::after { content: none !important; display: none !important; }
.avfurn-search-btn {
display: flex !important;
align-items: center;
justify-content: center;
background: transparent;
border: none;
padding: 0 14px 0 4px;
margin: 0;
color: #333;
cursor: pointer;
transition: color 0.2s ease;
flex-shrink: 0;
}
.avfurn-search-btn:hover { color: #1F3D2B; }
.avfurn-search-btn svg { display: block; }
/* ============================================================
WISHLIST PAGE — full CARD-GRID rehaul (YITH table -> product cards).
Completely replaces the old table look. Targets standard YITH classes;
if the installed YITH version emits different markup, selectors are
refined after a live screenshot.
============================================================ */
/* Page title */
.wishlist-title h2,
.wishlist-title-container h2,
.woocommerce table.wishlist_table caption {
color: #1F3D2B !important;
font-size: 26px !important;
font-weight: 700 !important;
text-align: left !important;
margin: 0 0 22px !important;
}
/* Table -> grid of cards */
.woocommerce table.wishlist_table {
display: block !important;
width: 100% !important;
border: none !important;
background: transparent !important;
box-shadow: none !important;
margin: 0 0 30px !important;
}
.woocommerce table.wishlist_table thead { display: none !important; }
.woocommerce table.wishlist_table tbody {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
gap: 24px !important;
}
.woocommerce table.wishlist_table tbody tr {
display: flex !important;
flex-direction: column !important;
position: relative !important;
background: #fff !important;
border: 1px solid #f0ece6 !important;
border-radius: 16px !important;
padding: 16px !important;
box-shadow: 0 8px 24px rgba(31, 61, 43, 0.05) !important;
transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.woocommerce table.wishlist_table tbody tr:hover {
transform: translateY(-4px) !important;
box-shadow: 0 16px 36px rgba(31, 61, 43, 0.10) !important;
}
.woocommerce table.wishlist_table tbody td {
display: block !important;
border: none !important;
padding: 0 !important;
text-align: left !important;
background: transparent !important;
width: auto !important;
}
/* Thumbnail on top */
.woocommerce table.wishlist_table td.product-thumbnail { order: 1; margin: 0 0 14px !important; }
.woocommerce table.wishlist_table td.product-thumbnail a { display: block; }
.woocommerce table.wishlist_table td.product-thumbnail img {
width: 100% !important;
height: auto !important;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 12px !important;
display: block;
background: #faf9f7;
}
/* Name */
.woocommerce table.wishlist_table td.product-name { order: 2; margin: 0 0 6px !important; }
.woocommerce table.wishlist_table td.product-name a {
color: #1F3D2B !important;
font-weight: 600 !important;
font-size: 15px !important;
text-decoration: none !important;
line-height: 1.35;
}
.woocommerce table.wishlist_table td.product-name a:hover { color: #d4a373 !important; }
/* Price */
.woocommerce table.wishlist_table td.product-price { order: 3; margin: 0 0 4px !important; }
.woocommerce table.wishlist_table td.product-price,
.woocommerce table.wishlist_table td.product-price .amount { color: #111 !important; font-weight: 700 !important; font-size: 16px !important; }
/* Stock status */
.woocommerce table.wishlist_table td.product-stock-status { order: 4; margin: 0 0 12px !important; font-size: 12px; }
.woocommerce table.wishlist_table td.wishlist-in-stock { color: #1f7a3d !important; }
.woocommerce table.wishlist_table td.wishlist-out-of-stock { color: #d32f2f !important; }
/* Add to cart -> full-width primary button, pinned to card bottom */
.woocommerce table.wishlist_table td.product-add-to-cart { order: 5; margin-top: auto !important; }
.woocommerce table.wishlist_table td.product-add-to-cart a.button,
.woocommerce table.wishlist_table td.product-add-to-cart .button {
display: block !important;
width: 100% !important;
text-align: center !important;
background: #1F3D2B !important;
color: #fff !important;
border: none !important;
border-radius: 8px !important;
padding: 12px 14px !important;
font-size: 13px !important;
font-weight: 600 !important;
text-transform: uppercase;
letter-spacing: 0.04em;
margin: 0 !important;
}
.woocommerce table.wishlist_table td.product-add-to-cart a.button:hover,
.woocommerce table.wishlist_table td.product-add-to-cart .button:hover { background: #2b4f39 !important; }
/* Remove (x) -> floating circular button, top-right of card */
.woocommerce table.wishlist_table td.product-remove {
position: absolute !important;
top: 22px;
right: 22px;
z-index: 2;
margin: 0 !important;
}
.woocommerce table.wishlist_table td.product-remove a,
.woocommerce table.wishlist_table a.remove_from_wishlist {
display: flex !important;
align-items: center;
justify-content: center;
width: 30px !important;
height: 30px !important;
background: rgba(255, 255, 255, 0.94) !important;
color: #d32f2f !important;
border: 1px solid #f0d9d9 !important;
border-radius: 50% !important;
font-size: 16px !important;
line-height: 1 !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
text-decoration: none !important;
}
.woocommerce table.wishlist_table td.product-remove a:hover { background: #d32f2f !important; color: #fff !important; }
/* Hide table-only / clutter cells in the card view */
.woocommerce table.wishlist_table td.product-checkbox,
.woocommerce table.wishlist_table th.product-checkbox { display: none !important; }
/* Empty-wishlist message: span the full grid width, centered */
.woocommerce table.wishlist_table tr td.wishlist-empty {
grid-column: 1 / -1;
text-align: center !important;
padding: 40px 20px !important;
color: #666;
font-size: 15px;
}
/* Share row */
.yith-wcwl-share { margin-top: 24px; }
.yith-wcwl-share .yith-wcwl-share-title { font-weight: 700; color: #1F3D2B; margin-bottom: 12px; font-size: 15px; }
.yith-wcwl-share ul { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; }
.yith-wcwl-share ul li a {
width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
border: 1px solid #e4ded5; border-radius: 50%; color: #1F3D2B; transition: 0.2s;
}
.yith-wcwl-share ul li a:hover { background: #1F3D2B; color: #fff; border-color: #1F3D2B; }
/* Return-to-shop / add-all buttons */
.woocommerce .return-to-shop .button,
.woocommerce .hidden-title-form .button,
.woocommerce .wishlist_table .wishlist_to_cart .button {
background: #1F3D2B !important; color: #fff !important;
border-radius: 8px !important; padding: 12px 24px !important; font-weight: 600 !important;
}
@media (max-width: 480px) {
.woocommerce table.wishlist_table tbody { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
.woocommerce table.wishlist_table tbody tr { padding: 10px !important; }
.woocommerce table.wishlist_table td.product-add-to-cart a.button { padding: 10px 6px !important; font-size: 11px !important; letter-spacing: 0; }
.woocommerce table.wishlist_table td.product-remove { top: 16px; right: 16px; }
}
/* ============================================================
CART / CHECKOUT — responsive & UX polish
============================================================ */
.avc-co-coupon-toggle { cursor: pointer; }
.avc-co-coupon-toggle:hover { color: #1F3D2B; }
@media (max-width: 600px) {
.avc-cart-empty { padding: 48px 16px !important; }
}
@media (max-width: 1100px) and (min-width: 821px) {
#payment ul.payment_methods { grid-template-columns: 200px 1fr !important; }
}
/* ============================================================
MY ACCOUNT — gap-fill for view-order / addresses (does not rebuild existing rules)
============================================================ */
.woocommerce-MyAccount-content .woocommerce-columns--addresses { display: flex !important; flex-wrap: wrap; gap: 20px; }
.woocommerce-MyAccount-content .woocommerce-column { flex: 1 1 260px; margin: 0; }
.woocommerce-MyAccount-content .woocommerce-column__title,
.woocommerce-MyAccount-content .woocommerce-order-details__title { color: #111 !important; font-weight: 700 !important; margin: 0 0 12px; }
.woocommerce-MyAccount-content address {
background: #fff; border: 1px solid #eee7df; border-radius: 10px;
padding: 16px 18px; font-style: normal; line-height: 1.7; color: #444;
}
/* ============================================================
PROFESSIONAL EMPTY STATE (shared) — used by empty cart;
the empty-wishlist panel below reuses the same look.
============================================================ */
.avc-empty-state {
text-align: center;
max-width: 720px;
margin: 44px auto 64px;
padding: 72px 40px;
background:
radial-gradient(circle at 50% 0%, rgba(31, 61, 43, 0.07), transparent 62%),
linear-gradient(180deg, #f6faf8 0%, #ffffff 100%);
border: 1px solid #eef2f0;
border-radius: 22px;
box-shadow: 0 18px 50px rgba(31, 61, 43, 0.06);
}
.avc-empty-state__icon {
width: 110px;
height: 110px;
margin: 0 auto 26px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
color: #1F3D2B;
border-radius: 50%;
box-shadow: 0 10px 30px rgba(31, 61, 43, 0.10);
}
.avc-empty-state h2 { font-size: 30px; font-weight: 700; color: #1F3D2B; margin: 0 0 14px; }
.avc-empty-state p { font-size: 16px; color: #6b7770; line-height: 1.65; margin: 0 0 32px; }
.avc-empty-state__cta {
display: inline-block;
background: #1F3D2B;
color: #fff;
padding: 16px 40px;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
text-decoration: none;
transition: background 0.2s ease, transform 0.2s ease;
}
.avc-empty-state__cta:hover { background: #2b4f39; transform: translateY(-2px); color: #fff; }
@media (max-width: 600px) {
.avc-empty-state { padding: 48px 22px; margin: 24px 14px; }
.avc-empty-state h2 { font-size: 24px; }
}
/* ============================================================
WISHLIST v2 — container padding, robust add-to-cart button,
card polish, and a professional empty-wishlist panel.
============================================================ */
/* Give the page real left/right breathing room (was flush to viewport edge) */
.woocommerce .wishlist-title,
.woocommerce .wishlist-title-container,
.woocommerce table.wishlist_table,
.woocommerce .yith-wcwl-share,
.woocommerce .hidden-title-form {
max-width: 1200px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 24px !important;
padding-right: 24px !important;
box-sizing: border-box !important;
}
.woocommerce .wishlist-title, .woocommerce .wishlist-title-container { padding-top: 30px !important; }
/* Card polish */
.woocommerce table.wishlist_table tbody tr { padding: 18px !important; }
.woocommerce table.wishlist_table td.product-name { margin: 0 0 8px !important; }
/* Robust Add-to-cart -> full-width green button (catches any YITH markup) */
.woocommerce table.wishlist_table tbody tr td.product-add-to-cart,
.woocommerce table.wishlist_table tbody tr td[class*="add-to-cart"] {
order: 5 !important;
margin-top: auto !important;
width: 100% !important;
padding-top: 12px !important;
}
.woocommerce table.wishlist_table tbody tr td.product-add-to-cart a,
.woocommerce table.wishlist_table tbody tr td[class*="add-to-cart"] a,
.woocommerce table.wishlist_table tbody tr a.add_to_cart_button,
.woocommerce table.wishlist_table tbody tr .add_to_cart_button {
display: block !important;
width: 100% !important;
text-align: center !important;
background: #1F3D2B !important;
color: #fff !important;
border: none !important;
border-radius: 8px !important;
padding: 12px 14px !important;
font-size: 13px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
margin: 0 !important;
box-shadow: none !important;
}
.woocommerce table.wishlist_table tbody tr td.product-add-to-cart a:hover,
.woocommerce table.wishlist_table tbody tr td[class*="add-to-cart"] a:hover,
.woocommerce table.wishlist_table tbody tr a.add_to_cart_button:hover { background: #2b4f39 !important; }
/* Professional EMPTY-WISHLIST panel (no products) */
.woocommerce table.wishlist_table tbody tr:has(td.wishlist-empty) {
grid-column: 1 / -1 !important;
display: block !important;
max-width: 720px !important;
margin: 14px auto !important;
padding: 64px 40px !important;
text-align: center !important;
background:
radial-gradient(circle at 50% 0%, rgba(31, 61, 43, 0.07), transparent 62%),
linear-gradient(180deg, #f6faf8 0%, #ffffff 100%) !important;
border: 1px solid #eef2f0 !important;
border-radius: 22px !important;
box-shadow: 0 18px 50px rgba(31, 61, 43, 0.06) !important;
}
.woocommerce table.wishlist_table tbody tr:hover:has(td.wishlist-empty) { transform: none !important; box-shadow: 0 18px 50px rgba(31, 61, 43, 0.06) !important; }
.woocommerce table.wishlist_table td.wishlist-empty {
order: 0 !important;
text-align: center !important;
color: #1F3D2B !important;
font-size: 19px !important;
font-weight: 600 !important;
}
.woocommerce table.wishlist_table td.wishlist-empty::before {
content: "";
display: block;
width: 96px; height: 96px;
margin: 0 auto 24px;
background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 24 24' fill='none' stroke='%231F3D2B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E") center / 42px no-repeat;
border-radius: 50%;
box-shadow: 0 10px 30px rgba(31, 61, 43, 0.10);
}
.woocommerce table.wishlist_table td.wishlist-empty::after {
content: "Tap the \2661 on any product to save your favourites here.";
display: block;
margin-top: 10px;
font-size: 15px;
font-weight: 400;
color: #6b7770;
}
/* ---- Fixes: white CTA text + hide YITH "Edit title" button ---- */
.avc-empty-state .avc-empty-state__cta,
.avc-empty-state .avc-empty-state__cta:visited,
.avc-empty-state .avc-empty-state__cta:hover {
color: #ffffff !important;
}
.woocommerce .show-title-form,
.woocommerce a.show-title-form,
.woocommerce .wishlist-title .show-title-form,
.woocommerce .wishlist-title-container .show-title-form,
.woocommerce .edit-title-button {
display: none !important;
}
/* ============================================================
ORDER-RECEIVED page — robust polish (covers success AND failed/pending,
body-scoped so it applies even when the Razorpay error short-circuits
the normal thank-you wrapper).
============================================================ */
body.woocommerce-order-received .woocommerce {
max-width: 940px;
margin: 40px auto 60px;
padding: 0 20px;
box-sizing: border-box;
}
/* Order overview -> clean card */
body.woocommerce-order-received ul.woocommerce-order-overview {
list-style: none !important;
display: flex !important;
flex-wrap: wrap !important;
gap: 18px 34px !important;
padding: 22px 26px !important;
margin: 0 0 28px !important;
background: #fff !important;
border: 1px solid #eee7df !important;
border-radius: 12px !important;
box-shadow: 0 8px 24px rgba(31, 61, 43, 0.05) !important;
}
body.woocommerce-order-received ul.woocommerce-order-overview li {
border: none !important;
margin: 0 !important;
padding: 0 !important;
font-size: 11.5px !important;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #9a9a93 !important;
font-weight: 600 !important;
}
body.woocommerce-order-received ul.woocommerce-order-overview li strong {
display: block !important;
margin-top: 6px !important;
font-size: 15px !important;
text-transform: none;
letter-spacing: 0;
color: #1F3D2B !important;
font-weight: 700 !important;
}
/* Any error/notice on this page -> friendly red card (e.g. a failed payment) */
body.woocommerce-order-received .woocommerce-error,
body.woocommerce-order-received ul.woocommerce-error,
body.woocommerce-order-received .woocommerce-notice--error {
list-style: none !important;
background: #fdf3f3 !important;
border: 1px solid #f1cccc !important;
border-left: 4px solid #d32f2f !important;
border-radius: 12px !important;
padding: 18px 22px !important;
margin: 0 0 26px !important;
color: #b3261e !important;
font-size: 14px !important;
box-shadow: none !important;
}
body.woocommerce-order-received .woocommerce-error::before,
body.woocommerce-order-received .woocommerce-error li::before { display: none !important; }
/* ============================================================
FOOTER COOL REFRESH v2 — badge-style trust bar, brand mark moved
to a standalone strip at the very bottom, icon contact rows,
layered gradient depth. Appended last so it layers cleanly over
earlier footer blocks. (Cache-busted via filemtime.)
============================================================ */
/* Depth: subtle gradient instead of flat green + soft tan top edge */
#footer {
background: linear-gradient(180deg, #1F3D2B 0%, #16301F 100%) !important;
box-shadow: inset 0 1px 0 rgba(212, 163, 115, 0.35) !important;
}
/* Trust bar — circular icon badges (tan fill on hover) in a bordered 4-up row */
.avc-footer-trust-bar {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 0 !important;
margin: 0 0 40px !important;
padding: 28px 0 !important;
border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.avc-footer-trust-item {
display: flex !important;
align-items: center !important;
gap: 14px !important;
padding: 0 22px !important;
border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
transition: transform 0.25s ease !important;
}
.avc-footer-trust-item:last-child {
border-right: none !important;
}
.avc-footer-trust-item:hover {
transform: translateY(-3px) !important;
}
.avc-footer-trust-icon {
position: relative !important; /* anchor for the absolutely-centered icon below */
display: inline-block !important;
width: 48px !important;
height: 48px !important;
flex-shrink: 0 !important;
border-radius: 50% !important;
background: rgba(212, 163, 115, 0.12) !important;
border: 1px solid rgba(212, 163, 115, 0.35) !important;
transition: background 0.25s ease, border-color 0.25s ease !important;
line-height: 0 !important;
font-size: 0 !important;
}
.avc-footer-trust-item:hover .avc-footer-trust-icon {
background: #d4a373 !important;
border-color: #d4a373 !important;
}
.avc-footer-trust-icon svg {
/* Absolute + transform centering: exact dead-center regardless of inline-SVG
baseline quirks, so it can't drift off-center in the badge circle. */
display: block !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
margin: 0 !important;
color: #d4a373 !important;
transition: color 0.25s ease !important;
}
.avc-footer-trust-item:hover .avc-footer-trust-icon svg {
color: #1F3D2B !important;
}
.avc-footer-trust-item strong {
display: block !important;
font-size: 13.5px !important;
color: #fff !important;
font-weight: 700 !important;
letter-spacing: 0.01em !important;
}
.avc-footer-trust-item span {
display: block !important;
font-size: 11.5px !important;
color: rgba(255, 255, 255, 0.55) !important;
margin-top: 2px !important;
}
/* Brand mark — standalone centered strip at the very bottom of the footer body.
Desktop/PC: hidden. Re-shown on mobile at the same breakpoint the footer
already switches to its accordion layout (see @media 768px below). */
.avc-footer-bottom-brand {
display: none !important;
text-align: center !important;
padding: 30px 20px 36px !important;
border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
@media (max-width: 768px) {
.avc-footer-bottom-brand {
display: block !important;
}
}
.avc-footer-bottom-brand .avc-footer-logo {
display: inline-block !important;
background: #fff !important;
padding: 10px 16px !important;
border-radius: 10px !important;
margin-bottom: 14px !important;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
}
.avc-footer-bottom-brand .avc-footer-logo img {
max-height: 32px !important;
width: auto !important;
display: block !important;
margin: 0 auto !important;
}
.avc-footer-bottom-brand .avc-footer-tagline {
color: rgba(255, 255, 255, 0.6) !important;
font-size: 13px !important;
line-height: 1.6 !important;
max-width: 320px !important;
margin: 0 auto !important;
}
/* Contact column: icon-prefixed rows instead of a plain text block */
.avc-footer-contact-row {
display: flex !important;
align-items: flex-start !important;
gap: 10px !important;
margin-bottom: 14px !important;
}
.avc-footer-contact-row:last-child {
margin-bottom: 0 !important;
}
.avc-footer-contact-row svg {
color: #d4a373 !important;
flex-shrink: 0 !important;
margin-top: 2px !important;
}
.avc-footer-contact-row a,
.avc-footer-contact-row span {
color: rgba(255, 255, 255, 0.75) !important;
font-size: 14px !important;
line-height: 1.5 !important;
}
.avc-footer-contact-row a:hover {
color: #d4a373 !important;
}
/* Responsive: trust bar wraps to 2-up then 1-up at the footer's existing breakpoints */
@media (max-width: 768px) {
.avc-footer-trust-bar {
grid-template-columns: repeat(2, 1fr) !important;
row-gap: 24px !important;
}
.avc-footer-trust-item:nth-child(2) {
border-right: none !important;
}
.avc-footer-trust-item:nth-child(1),
.avc-footer-trust-item:nth-child(2) {
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
padding-bottom: 20px !important;
}
.avc-footer-trust-item:nth-child(3),
.avc-footer-trust-item:nth-child(4) {
padding-top: 20px !important;
}
}
@media (max-width: 560px) {
.avc-footer-trust-bar {
grid-template-columns: 1fr !important;
}
.avc-footer-trust-item {
border-right: none !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
padding-top: 20px !important;
padding-bottom: 20px !important;
justify-content: flex-start !important;
/* Fixed-width block centered as a group, content left-aligned inside it — this
keeps every row's icon (and every text line) starting at the SAME x position,
forming a straight vertical line instead of each row centering independently
(which shifted the icon left/right per row based on each label's text width). */
max-width: 260px !important;
margin: 0 auto !important;
}
.avc-footer-trust-item:last-child {
border-bottom: none !important;
}
.avc-footer-contact-row {
justify-content: center !important;
}
}
/* ============================================================
Elementor "Product Carousel" widget image: intentionally NOT overridden
here. The widget's own "Image Height" control (object-fit: cover) governs
the image so the browser render matches the Elementor editor exactly. A
previous `contain` + plate override made the frontend look different from
the editor, so it was removed.
============================================================ */
/* ============================================================
PRODUCT CAROUSEL — ROOT-CAUSE FIX (verified against the live DOM).
The Home Slider widget's inline