.elementor-kit-5{--e-global-color-primary:#12372A;--e-global-color-secondary:#B87333;--e-global-color-text:#1D2631;--e-global-color-accent:#B87333;--e-global-color-b5aeb33:#F7F3EA;--e-global-color-c58817e:#12372A;--e-global-color-5420d44:#B87333;--e-global-color-58be983:#ffffff;--e-global-color-09cc561:#1D2631;--e-global-color-a495fd4:#D9D4C7;--e-global-color-dff8941:#F4F7F9;--e-global-typography-primary-font-family:"Manrope";--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"Poppins";--e-global-typography-secondary-font-weight:500;--e-global-typography-text-font-family:"Poppins";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Manrope";--e-global-typography-accent-font-weight:600;--e-global-typography-5535e8e-font-family:"Manrope";--e-global-typography-5535e8e-font-size:3rem;--e-global-typography-5535e8e-font-weight:700;--e-global-typography-c83476d-font-family:"Manrope";--e-global-typography-c83476d-font-size:2.5rem;--e-global-typography-c83476d-font-weight:bold;--e-global-typography-ff8f921-font-family:"Manrope";--e-global-typography-ff8f921-font-size:2.3rem;--e-global-typography-ff8f921-font-weight:bold;--e-global-typography-887fca2-font-family:"Poppins";--e-global-typography-887fca2-font-size:1rem;--e-global-typography-887fca2-font-weight:400;--e-global-typography-2142591-font-family:"Poppins";--e-global-typography-2142591-font-size:1rem;--e-global-typography-2142591-font-weight:700;--e-global-typography-6e52843-font-family:"Poppins";--e-global-typography-6e52843-font-size:1rem;--e-global-typography-6e52843-font-weight:500;color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Arial;font-weight:var( --e-global-typography-text-font-weight );}.elementor-kit-5 button,.elementor-kit-5 input[type="button"],.elementor-kit-5 input[type="submit"],.elementor-kit-5 .elementor-button{background-color:#B87333;font-family:var( --e-global-typography-accent-font-family ), Arial;font-weight:var( --e-global-typography-accent-font-weight );text-shadow:0px 8px 18px rgba(18.000000000000007, 55, 42.00000000000002, 0.18);color:var( --e-global-color-58be983 );box-shadow:0px 8px 18px 0px rgba(18.000000000000007, 55, 42.00000000000002, 0.18);border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-5420d44 );border-radius:50px 50px 50px 50px;padding:014px 028px 014px 028px;}.elementor-kit-5 button:hover,.elementor-kit-5 button:focus,.elementor-kit-5 input[type="button"]:hover,.elementor-kit-5 input[type="button"]:focus,.elementor-kit-5 input[type="submit"]:hover,.elementor-kit-5 input[type="submit"]:focus,.elementor-kit-5 .elementor-button:hover,.elementor-kit-5 .elementor-button:focus{background-color:var( --e-global-color-c58817e );color:var( --e-global-color-58be983 );box-shadow:0px 5px 12px 0px rgba(18.000000000000007, 55, 42.00000000000002, 0.18);border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-c58817e );border-radius:50px 50px 50px 50px;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-kit-5 a{color:var( --e-global-color-primary );font-family:var( --e-global-typography-accent-font-family ), Arial;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-kit-5 a:hover{color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Arial;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-kit-5 h1{color:var( --e-global-color-primary );font-family:var( --e-global-typography-5535e8e-font-family ), Arial;font-size:var( --e-global-typography-5535e8e-font-size );font-weight:var( --e-global-typography-5535e8e-font-weight );}.elementor-kit-5 h2{color:var( --e-global-color-primary );font-family:var( --e-global-typography-c83476d-font-family ), Arial;font-size:var( --e-global-typography-c83476d-font-size );font-weight:var( --e-global-typography-c83476d-font-weight );}.elementor-kit-5 h3{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Arial;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-kit-5 h4{color:var( --e-global-color-text );font-family:var( --e-global-typography-primary-font-family ), Arial;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-kit-5 h5{color:var( --e-global-color-text );}.elementor-kit-5 h6{color:var( --e-global-color-text );font-family:var( --e-global-typography-accent-font-family ), Arial;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-kit-5 label{color:var( --e-global-color-text );font-family:var( --e-global-typography-2142591-font-family ), Arial;font-size:var( --e-global-typography-2142591-font-size );font-weight:var( --e-global-typography-2142591-font-weight );}.elementor-kit-5 input:not([type="button"]):not([type="submit"]),.elementor-kit-5 textarea,.elementor-kit-5 .elementor-field-textual{font-family:var( --e-global-typography-text-font-family ), Arial;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );accent-color:var( --e-global-color-accent );background-color:var( --e-global-color-58be983 );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-a495fd4 );border-radius:10px 10px 10px 10px;padding:014px 16px 014px 016px;}.elementor-kit-5 input:focus:not([type="button"]):not([type="submit"]),.elementor-kit-5 textarea:focus,.elementor-kit-5 .elementor-field-textual:focus{color:var( --e-global-color-text );accent-color:var( --e-global-color-5420d44 );background-color:var( --e-global-color-58be983 );box-shadow:0px 0px 0px 3px rgba(184, 114.99999999999991, 51.00000000000002, 0.15);border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-5420d44 );border-radius:10px 10px 10px 10px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}.entry-title, .wp-block-post-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-kit-5 h1{font-size:var( --e-global-typography-5535e8e-font-size );}.elementor-kit-5 h2{font-size:var( --e-global-typography-c83476d-font-size );}.elementor-kit-5 label{font-size:var( --e-global-typography-2142591-font-size );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-5{--e-global-typography-c83476d-font-size:1.9rem;--e-global-typography-ff8f921-font-size:1.9rem;}.elementor-kit-5 h1{font-size:var( --e-global-typography-5535e8e-font-size );}.elementor-kit-5 h2{font-size:var( --e-global-typography-c83476d-font-size );}.elementor-kit-5 label{font-size:var( --e-global-typography-2142591-font-size );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* =========================================================
CHAMPIONS FURNITURE — CLEAN CUSTOM CSS
Brand Green: #12372A
Copper: #B87333
Cream: #F7F3EA
Border: #D9D4C7
WhatsApp: #25D366
========================================================= */
/* === Brand tokens === */
:root {
--cf-green: #12372a;
--cf-copper: #b87333;
--cf-cream: #f7f3ea;
--cf-border: #d9d4c7;
--cf-body-text: #d9d4c7;
--cf-dark: #1d2631;
--cf-whatsapp: #25d366;
--cf-whatsapp-dk: #128c7e;
}
/* =========================================================
1. GLOBAL
========================================================= */
html,
body {
overflow-x: hidden;
}
a,
button,
.elementor-button,
textarea,
select {
transition: all 0.25s ease;
}
/* Exclude checkboxes and radios — transition:all on these causes dimension flicker */
input[type="checkbox"],
input[type="radio"] {
transition: none !important;
}
a {
text-decoration: none;
}
/* =========================================================
2. SCROLLBAR
========================================================= */
.elementor-popup-modal,
.elementor-popup-modal *,
.e-off-canvas,
.e-off-canvas *,
.elementor-location-header,
.elementor-location-header * {
scrollbar-width: thin;
scrollbar-color: #b87333 #f7f3ea;
}
.elementor-popup-modal::-webkit-scrollbar,
.elementor-popup-modal *::-webkit-scrollbar,
.e-off-canvas::-webkit-scrollbar,
.e-off-canvas *::-webkit-scrollbar,
.elementor-location-header::-webkit-scrollbar,
.elementor-location-header *::-webkit-scrollbar {
width: 8px;
}
.elementor-popup-modal::-webkit-scrollbar-track,
.elementor-popup-modal *::-webkit-scrollbar-track,
.e-off-canvas::-webkit-scrollbar-track,
.e-off-canvas *::-webkit-scrollbar-track,
.elementor-location-header::-webkit-scrollbar-track,
.elementor-location-header *::-webkit-scrollbar-track {
background: #f7f3ea;
border-radius: 20px;
}
.elementor-popup-modal::-webkit-scrollbar-thumb,
.elementor-popup-modal *::-webkit-scrollbar-thumb,
.e-off-canvas::-webkit-scrollbar-thumb,
.e-off-canvas *::-webkit-scrollbar-thumb,
.elementor-location-header::-webkit-scrollbar-thumb,
.elementor-location-header *::-webkit-scrollbar-thumb {
background: #b87333;
border-radius: 20px;
border: 2px solid #f7f3ea;
}
/* Darken thumb on hover */
.elementor-popup-modal::-webkit-scrollbar-thumb:hover,
.elementor-popup-modal *::-webkit-scrollbar-thumb:hover,
.e-off-canvas::-webkit-scrollbar-thumb:hover,
.e-off-canvas *::-webkit-scrollbar-thumb:hover,
.elementor-location-header::-webkit-scrollbar-thumb:hover,
.elementor-location-header *::-webkit-scrollbar-thumb:hover {
background: #12372a;
}
/* =========================================================
3. FOOTER
========================================================= */
.champions-footer {
background: #12372a !important;
color: #d9d4c7 !important;
overflow-x: hidden !important;
width: 100% !important;
}
/* Text */
.champions-footer,
.champions-footer p,
.champions-footer li,
.champions-footer span,
.champions-footer div,
.champions-footer .elementor-widget-text-editor,
.champions-footer .elementor-icon-list-text {
color: #d9d4c7 !important;
}
/* Headings */
.champions-footer h1,
.champions-footer h2,
.champions-footer h3,
.champions-footer h4,
.champions-footer h5,
.champions-footer h6,
.champions-footer .elementor-heading-title {
color: #ffffff !important;
font-weight: 700 !important;
line-height: 1.25 !important;
}
/* Links */
.champions-footer a,
.champions-footer a span,
.champions-footer .elementor-icon-list-item a,
.champions-footer .elementor-icon-list-item a span {
color: #d9d4c7 !important;
text-decoration: none !important;
overflow-wrap: anywhere;
}
.champions-footer a:hover,
.champions-footer a:hover span,
.champions-footer .elementor-icon-list-item a:hover,
.champions-footer .elementor-icon-list-item a:hover span {
color: #b87333 !important;
}
/* Bold labels */
.champions-footer strong,
.champions-footer b {
color: #ffffff !important;
font-weight: 700 !important;
}
/* Prevent text breaking */
.champions-footer p,
.champions-footer li,
.champions-footer span,
.champions-footer a,
.champions-footer strong,
.champions-footer .elementor-heading-title {
word-break: normal !important;
overflow-wrap: break-word !important;
white-space: normal !important;
hyphens: none !important;
}
/* Lists */
.champions-footer ul {
list-style: none !important;
padding-left: 0 !important;
margin-left: 0 !important;
}
.champions-footer li {
margin-bottom: 10px !important;
}
/* Divider */
.champions-footer .elementor-divider-separator {
border-color: rgba(255, 255, 255, 0.16) !important;
}
/* Logo */
.champions-footer img {
max-width: 280px !important;
height: auto !important;
}
/* Social icons */
.champions-footer .elementor-social-icon {
background-color: #b87333 !important;
color: #ffffff !important;
}
.champions-footer .elementor-social-icon:hover {
background-color: #ffffff !important;
color: #12372a !important;
}
/* Copyright bar */
.champions-footer .cf-footer-bottom,
.champions-footer .copyright,
.champions-footer .footer-bottom {
background: #b87333 !important;
color: #ffffff !important;
width: 100% !important;
padding: 14px 20px !important;
text-align: center !important;
margin-top: 28px !important;
}
.champions-footer .cf-footer-bottom p,
.champions-footer .copyright p,
.champions-footer .footer-bottom p,
.champions-footer .cf-footer-bottom span,
.champions-footer .copyright span,
.champions-footer .footer-bottom span {
color: #ffffff !important;
margin: 0 !important;
font-size: 14px !important;
font-weight: 600 !important;
text-align: center !important;
}
/* Tablet footer: 2 columns */
@media (max-width: 1024px) and (min-width: 768px) {
.champions-footer {
padding-left: 24px !important;
padding-right: 24px !important;
}
/* Section inner wrapper: stack main row + copyright vertically */
.champions-footer > .e-con-inner,
.champions-footer > .elementor-container {
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
width: 100% !important;
max-width: 100% !important;
gap: 0 !important;
}
/* Top-level containers (main row + copyright bar): full width */
.champions-footer > .e-con-inner > .e-con,
.champions-footer > .e-con-inner > .elementor-column {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
flex: none !important;
}
/* Main row container: keep horizontal, allow wrapping */
/* :not(:last-child) targets the content row but not the copyright bar */
.champions-footer > .e-con-inner > .e-con:not(:last-child) {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: start !important;
width: 100% !important;
max-width: 100% !important;
}
/* Main row's inner wrapper (contains the 4 columns): 2-col grid */
.champions-footer > .e-con-inner > .e-con:not(:last-child) > .e-con-inner {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 32px 24px !important;
align-items: start !important;
width: 100% !important;
max-width: 100% !important;
}
/* Column containers: fill their grid cell */
.champions-footer
> .e-con-inner
> .e-con:not(:last-child)
> .e-con-inner
> .e-con {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
flex: none !important;
}
/* cf-footer-row class: add this in Elementor → Advanced → CSS Classes
on the main row container for a guaranteed 2-column layout */
.champions-footer .cf-footer-row > .e-con-inner {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 32px 24px !important;
align-items: start !important;
width: 100% !important;
max-width: 100% !important;
}
.champions-footer .cf-footer-row > .e-con-inner > .e-con {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
flex: none !important;
}
}
/* Mobile footer */
@media (max-width: 767px) {
.champions-footer {
width: 100% !important;
max-width: 100% !important;
padding: 36px 22px 28px !important;
overflow-x: hidden !important;
}
.champions-footer,
.champions-footer > .e-con-inner,
.champions-footer > .elementor-container {
flex-direction: column !important;
flex-wrap: nowrap !important;
}
.champions-footer .cf-footer-row,
.champions-footer .cf-footer-row.e-con,
.champions-footer .cf-footer-row.e-flex {
--display: flex !important;
--flex-direction: column !important;
--flex-wrap: nowrap !important;
--justify-content: flex-start !important;
--align-items: stretch !important;
--gap: 30px !important;
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
justify-content: flex-start !important;
align-items: stretch !important;
gap: 30px !important;
width: 100% !important;
max-width: 100% !important;
}
.champions-footer .cf-footer-col,
.champions-footer .cf-footer-row > .e-con,
.champions-footer .cf-footer-row > .elementor-element,
.champions-footer .e-con,
.champions-footer .elementor-column {
--width: 100% !important;
--min-width: 0px !important;
--max-width: 100% !important;
--container-widget-width: 100% !important;
--container-widget-flex-grow: 0 !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
flex: 0 0 auto !important;
}
.champions-footer .cf-footer-col > *,
.champions-footer .cf-footer-row > .e-con > *,
.champions-footer .cf-footer-row > .elementor-element > * {
width: 100% !important;
max-width: 100% !important;
}
.champions-footer h1,
.champions-footer h2,
.champions-footer h3,
.champions-footer h4,
.champions-footer h5,
.champions-footer h6,
.champions-footer p,
.champions-footer li,
.champions-footer .elementor-heading-title {
text-align: left !important;
}
.champions-footer .elementor-heading-title {
font-size: 17px !important;
line-height: 1.3 !important;
}
.champions-footer p,
.champions-footer li,
.champions-footer a,
.champions-footer span {
font-size: 15px !important;
line-height: 1.6 !important;
}
.champions-footer img {
max-width: 220px !important;
height: auto !important;
}
.champions-footer .elementor-social-icons-wrapper {
display: flex !important;
flex-direction: row !important;
justify-content: flex-start !important;
gap: 12px !important;
}
.champions-footer .elementor-divider {
margin-top: 6px !important;
margin-bottom: 8px !important;
}
}
/* =========================================================
4. SINGLE PRODUCT ACTION BUTTONS
========================================================= */
.cf-product-actions {
display: flex;
gap: 14px;
align-items: center;
margin-top: 18px;
padding-top: 22px;
border-top: 1px solid #d9d4c7;
flex-wrap: wrap;
}
.cf-product-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 26px;
border-radius: 50px;
font-family: Manrope, Arial, Helvetica, sans-serif;
font-weight: 700;
font-size: 15px;
line-height: 1.2;
text-decoration: none !important;
white-space: nowrap;
cursor: pointer;
transition:
transform 0.2s ease,
background 0.2s ease,
box-shadow 0.2s ease;
}
.cf-product-btn:hover {
transform: translateY(-2px);
}
.cf-product-btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: currentColor;
flex: 0 0 auto;
}
.cf-product-btn svg {
display: block;
}
.cf-product-btn-whatsapp {
background: #25d366 !important;
color: #ffffff !important;
box-shadow: 0 6px 14px rgba(37, 211, 102, 0.18);
}
.cf-product-btn-whatsapp:hover {
background: #128c7e !important;
}
.cf-product-btn-call {
background: #b87333 !important;
color: #ffffff !important;
box-shadow: 0 6px 14px rgba(18, 55, 42, 0.14);
}
.cf-product-btn-call:hover {
background: #12372a !important;
}
@media (max-width: 1024px) {
.cf-product-actions {
flex-direction: column;
align-items: stretch;
gap: 10px;
margin-top: 14px;
padding-top: 18px;
}
.cf-product-btn {
width: 100%;
padding: 13px 18px;
font-size: 14px;
}
}
@media (max-width: 420px) {
.cf-product-btn {
padding: 12px 14px;
font-size: 13.5px;
}
}
/* =========================================================
5. PRODUCT CARD / LOOP ITEM
========================================================= */
.cf-product-card {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: flex-start !important;
width: 100% !important;
max-width: 100% !important;
min-height: 340px !important;
background: #ffffff !important;
border: 1px solid #d9d4c7 !important;
border-radius: 16px !important;
overflow: hidden !important;
box-shadow: 0 4px 18px rgba(18, 55, 42, 0.07) !important;
transition:
transform 0.25s ease,
box-shadow 0.25s ease !important;
}
.cf-product-card:hover {
transform: translateY(-5px) !important;
box-shadow: 0 18px 38px rgba(18, 55, 42, 0.13) !important;
}
.cf-product-card > .elementor-element,
.cf-product-card .elementor-widget {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 auto !important;
}
/* Image */
.cf-product-card .elementor-widget-theme-post-featured-image,
.cf-product-card .elementor-widget-theme-post-featured-image a {
width: 100% !important;
display: block !important;
}
.cf-product-card .elementor-widget-theme-post-featured-image {
min-height: 220px;
background: #f7f3ea;
border-radius: 16px 16px 0 0;
overflow: hidden;
}
.cf-product-card .elementor-widget-theme-post-featured-image img {
width: 100% !important;
height: 220px !important;
display: block !important;
object-fit: cover !important;
object-position: center center !important;
border-radius: 0 !important;
transition: transform 0.4s ease !important;
}
/* Image zoom on card hover */
.cf-product-card:hover .elementor-widget-theme-post-featured-image img {
transform: scale(1.06) !important;
}
/* Card inner spacing */
.cf-product-card .elementor-widget-woocommerce-product-title,
.cf-product-card .elementor-widget-heading,
.cf-product-card .elementor-widget-rating,
.cf-product-card .elementor-widget-woocommerce-product-price,
.cf-product-card .elementor-widget-shortcode,
.cf-product-card .elementor-widget-woocommerce-product-add-to-cart {
padding-left: 16px !important;
padding-right: 16px !important;
}
/* Title */
.cf-product-card .elementor-widget-woocommerce-product-title,
.cf-product-card .elementor-widget-heading {
margin-top: 14px !important;
margin-bottom: 6px !important;
}
.cf-product-card .elementor-widget-woocommerce-product-title a,
.cf-product-card .elementor-widget-heading a,
.cf-product-card h2,
.cf-product-card h3,
.cf-product-card .elementor-heading-title {
color: #12372a !important;
font-family: Manrope, Arial, Helvetica, sans-serif;
font-size: 15.5px !important;
line-height: 1.35 !important;
font-weight: 700 !important;
text-decoration: none !important;
writing-mode: horizontal-tb !important;
white-space: normal !important;
word-break: normal !important;
/* Clamp to 2 lines for grid uniformity */
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
min-height: calc(1.35em * 2) !important;
}
.cf-product-card .elementor-widget-woocommerce-product-title a:hover,
.cf-product-card .elementor-widget-heading a:hover {
color: #b87333 !important;
}
/* Hide rating for cleaner cards */
.cf-product-card .elementor-widget-rating {
display: none !important;
}
/* Price */
.cf-product-card .elementor-widget-woocommerce-product-price {
margin: 0 0 4px !important;
}
.cf-product-card .price,
.cf-product-card .woocommerce-Price-amount {
color: #b87333 !important;
font-family: Manrope, Arial, Helvetica, sans-serif;
font-size: 15px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
}
.cf-product-card .price del {
color: rgba(29, 38, 49, 0.45) !important;
font-size: 13px !important;
font-weight: 500 !important;
text-decoration-thickness: 1px;
}
.cf-product-card .price ins {
color: #b87333 !important;
text-decoration: none !important;
font-weight: 700 !important;
}
/* WhatsApp button — primary CTA */
.cf-card-whatsapp-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px;
width: 100% !important;
padding: 12px 14px !important;
border-radius: 50px !important;
background: #25d366 !important;
color: #ffffff !important;
font-family: Manrope, Arial, Helvetica, sans-serif;
font-size: 13.5px !important;
font-weight: 800 !important;
letter-spacing: 0.1px !important;
line-height: 1.2 !important;
text-decoration: none !important;
white-space: nowrap !important;
box-shadow: 0 4px 14px rgba(37, 211, 102, 0.28) !important;
cursor: pointer;
transition:
background 0.2s ease,
box-shadow 0.2s ease,
transform 0.2s ease !important;
}
.cf-card-whatsapp-btn:hover {
background: #128c7e !important;
box-shadow: 0 6px 18px rgba(18, 140, 126, 0.32) !important;
transform: translateY(-1px) !important;
}
.cf-card-whatsapp-icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: currentColor;
flex: 0 0 auto;
}
.cf-card-whatsapp-btn svg {
display: block;
}
/* Push the button group to the bottom of the card */
.cf-product-card .elementor-widget-shortcode {
margin-top: auto !important;
padding-top: 8px !important;
margin-bottom: 8px !important;
}
/* Add to Cart — secondary CTA (outline) */
.cf-product-card .elementor-widget-woocommerce-product-add-to-cart {
margin-top: 0 !important;
margin-bottom: 14px !important;
}
.cf-product-card .button,
.cf-product-card button,
.cf-product-card .add_to_cart_button {
width: 100% !important;
background: transparent !important;
color: #b87333 !important;
border: 1.5px solid #b87333 !important;
border-radius: 50px !important;
padding: 9px 14px !important;
font-family: Manrope, Arial, Helvetica, sans-serif;
font-size: 13px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
text-align: center !important;
text-decoration: none !important;
white-space: nowrap !important;
cursor: pointer;
transition:
background 0.2s ease,
color 0.2s ease,
border-color 0.2s ease !important;
}
.cf-product-card .button:hover,
.cf-product-card button:hover,
.cf-product-card .add_to_cart_button:hover {
background: #b87333 !important;
color: #ffffff !important;
border-color: #b87333 !important;
}
.cf-product-card .added_to_cart {
display: block;
margin-top: 8px;
color: #12372a !important;
font-size: 13px;
font-weight: 700;
text-align: center;
text-decoration: none !important;
}
.cf-product-card .added_to_cart:hover {
color: #b87333 !important;
}
/* =========================================================
6. SHOP HERO
========================================================= */
.cf-shop-hero {
max-width: 1440px;
margin: 0 auto 28px !important;
padding-left: 40px !important;
padding-right: 40px !important;
}
.cf-shop-hero .e-con-inner,
.cf-shop-hero .elementor-container {
padding-top: 34px !important;
padding-bottom: 34px !important;
}
/* =========================================================
7. SHOP ARCHIVE LAYOUT
========================================================= */
.cf-shop-content-wrap {
width: 100% !important;
max-width: 1500px !important;
margin: 0 auto !important;
padding: 28px 36px 80px !important;
outline: none !important;
}
.cf-shop-layout {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
display: grid !important;
grid-template-columns: 260px minmax(0, 1fr) !important;
gap: 28px !important;
align-items: start !important;
overflow: visible !important;
outline: none !important;
}
/* Prevent sticky breakage on ancestor containers */
.cf-shop-content-wrap,
.cf-shop-content-wrap .e-con,
.cf-shop-content-wrap .e-con-inner,
.cf-shop-layout,
.cf-shop-layout .e-con,
.cf-shop-layout .e-con-inner {
overflow: visible !important;
}
/* Filter sidebar */
.cf-shop-filter {
width: 260px !important;
max-width: 260px !important;
min-width: 260px !important;
flex: none !important;
background: #ffffff !important;
border: 1px solid #d9d4c7 !important;
border-radius: 16px !important;
padding: 20px 18px 24px !important;
box-shadow: 0 8px 20px rgba(18, 55, 42, 0.06) !important;
height: auto !important;
min-height: unset !important;
max-height: none !important;
overflow: visible !important;
box-sizing: border-box !important;
outline: none !important;
align-self: start !important;
}
/* Product area */
.cf-shop-products {
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
outline: none !important;
}
.cf-shop-products .elementor-widget-loop-grid,
.cf-shop-products .elementor-loop-container {
width: 100% !important;
max-width: none !important;
}
/* Filter title */
.cf-shop-filter h1,
.cf-shop-filter h2,
.cf-shop-filter h3,
.cf-shop-filter .elementor-heading-title,
.cf-shop-filter .wpc-filter-title {
font-size: 30px !important;
line-height: 1.1 !important;
margin: 0 0 18px !important;
color: #12372a !important;
font-weight: 800 !important;
}
/* Filter section labels */
.cf-shop-filter label,
.cf-shop-filter strong {
color: #12372a !important;
font-size: 15px !important;
font-weight: 800 !important;
line-height: 1.35 !important;
}
/* Filter text */
.cf-shop-filter .wpc-filter-label-wrapper,
.cf-shop-filter .wpc-filter-content,
.cf-shop-filter .wpc-term-item-content-wrapper {
color: #1d2631 !important;
font-size: 15px !important;
}
/* Disabled / empty */
.cf-shop-filter .wpc-term-disabled,
.cf-shop-filter .wpc-term-disabled label,
.cf-shop-filter .wpc-term-disabled a,
.cf-shop-filter .wpc-term-count-0,
.cf-shop-filter .wpc-term-count-0 * {
color: rgba(29, 38, 49, 0.32) !important;
}
/* Filter group spacing */
.cf-shop-filter .wpc-filter-layout-submit-button,
.cf-shop-filter .wpc-filter-layout-dropdown,
.cf-shop-filter .wpc-filter-layout-labels,
.cf-shop-filter .wpc-filter-layout-checkboxes,
.cf-shop-filter .wpc-filter-content,
.cf-shop-filter .wpc-filter-wrapper {
margin-bottom: 18px !important;
}
/* Text inputs */
.cf-shop-filter input[type="search"],
.cf-shop-filter input[type="text"] {
width: 100% !important;
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
border: 1px solid #d9d4c7 !important;
border-radius: 10px !important;
background: #ffffff !important;
padding: 0 14px !important;
font-size: 14px !important;
color: #12372a !important;
box-shadow: none !important;
}
.cf-shop-filter input[type="search"]:focus,
.cf-shop-filter input[type="text"]:focus {
outline: none !important;
border-color: #b87333 !important;
box-shadow: 0 0 0 3px rgba(184, 115, 51, 0.12) !important;
}
/* Price number fields */
.cf-shop-filter input[type="number"] {
width: 74px !important;
height: 40px !important;
min-height: 40px !important;
border: 1px solid #d9d4c7 !important;
border-radius: 9px !important;
background: #ffffff !important;
padding: 0 10px !important;
font-size: 13px !important;
color: #12372a !important;
box-shadow: none !important;
}
/* Price inputs row */
.cf-shop-filter .wpc-filters-range-wrapper,
.cf-shop-filter .wpc-filters-range-inputs {
display: flex !important;
justify-content: space-between !important;
gap: 12px !important;
margin-bottom: 12px !important;
}
/* Price slider track */
.cf-shop-filter .ui-slider,
.cf-shop-filter .wpc-range-slider {
height: 3px !important;
background: rgba(18, 55, 42, 0.18) !important;
border: none !important;
margin: 10px 8px 18px !important;
}
.cf-shop-filter .ui-slider-range,
.cf-shop-filter .wpc-range-slider .ui-slider-range {
height: 3px !important;
background: #12372a !important;
}
.cf-shop-filter .ui-slider-handle,
.cf-shop-filter .wpc-range-slider .ui-slider-handle {
width: 18px !important;
height: 18px !important;
top: -8px !important;
border-radius: 50% !important;
border: 1px solid #d9d4c7 !important;
background: #ffffff !important;
box-shadow: 0 4px 10px rgba(18, 55, 42, 0.15) !important;
}
/* Checkbox */
.cf-shop-filter input[type="checkbox"] {
width: 13px !important;
height: 13px !important;
margin: 0 !important;
accent-color: #b87333 !important;
}
/* Contain all filter content to card width */
.cf-shop-filter,
.cf-shop-filter *,
.cf-shop-filter .elementor-widget-container,
.cf-shop-filter .wpc-filters-main-wrap,
.cf-shop-filter .wpc-filters-widget-wrapper,
.cf-shop-filter .wpc-filter-content,
.cf-shop-filter .wpc-filters-section {
box-sizing: border-box !important;
max-width: 100% !important;
}
/* Category list */
.cf-shop-filter ul,
.cf-shop-filter .wpc-filters-ul-list {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
overflow: visible !important;
}
.cf-shop-filter li,
.cf-shop-filter .wpc-term-item {
width: 100% !important;
max-width: 100% !important;
display: block !important;
margin: 0 0 9px !important;
padding: 0 !important;
line-height: 1.35 !important;
overflow: visible !important;
}
/* Checkbox row */
.cf-shop-filter .wpc-term-item-content-wrapper,
.cf-shop-filter .wpc-filter-label-wrapper {
width: 100% !important;
max-width: 100% !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
overflow: hidden !important;
}
/* Category labels */
.cf-shop-filter .wpc-filter-label-wrapper a,
.cf-shop-filter .wpc-filter-label-wrapper label,
.cf-shop-filter .wpc-term-item-content-wrapper a,
.cf-shop-filter .wpc-term-item-content-wrapper label,
.cf-shop-filter .wpc-term-name {
color: #12372a !important;
font-size: 14px !important;
font-weight: 500 !important;
line-height: 1.35 !important;
min-width: 0 !important;
max-width: 100% !important;
overflow-wrap: break-word !important;
word-break: normal !important;
}
/* Product count */
.cf-shop-filter .wpc-term-count,
.cf-shop-filter .wpc-term-count-wrapper {
color: rgba(29, 38, 49, 0.35) !important;
font-size: 13px !important;
font-weight: 600 !important;
}
/* Remove Elementor height overrides inside filter */
.cf-shop-filter.e-con,
.cf-shop-filter .e-con,
.cf-shop-filter .elementor-element,
.cf-shop-filter .elementor-widget,
.cf-shop-filter .elementor-widget-container {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
}
/* Hide plugin UI clutter */
.cf-shop-filter .wpc-filter-set-title,
.cf-shop-filter .wpc-posts-found,
.cf-shop-filter .wpc-filter-chips-list-title,
.cf-shop-products .wpc-filter-chips-list-title,
.cf-shop-products .wpc-chip-title {
display: none !important;
}
.cf-shop-filter .wpc-edit-filter-set {
display: block !important;
margin-top: 18px !important;
}
/* =========================================================
FILTER EVERYTHING PLUGIN — fee-* classes
========================================================= */
/* Constrain the widget container */
.cf-shop-filter .filter-everything-widget,
.cf-shop-filter .fee-widget,
.cf-shop-filter .fee-form,
.cf-shop-filter [class*="fee-"] {
box-sizing: border-box !important;
max-width: 100% !important;
overflow-x: hidden !important;
}
/* Filter group (one per taxonomy) */
.cf-shop-filter .fee-filter-group,
.cf-shop-filter .filter-group {
margin-bottom: 20px !important;
}
/* Section heading ("Categories") */
.cf-shop-filter .fee-filter-title,
.cf-shop-filter .fee-group-title,
.cf-shop-filter .filter-group-title {
color: #12372a !important;
font-size: 16px !important;
font-weight: 800 !important;
line-height: 1.2 !important;
margin: 0 0 10px !important;
padding: 0 !important;
text-transform: none !important;
}
/* Item list */
.cf-shop-filter .fee-filter-items,
.cf-shop-filter .fee-items,
.cf-shop-filter .filter-items {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
/* Each list item row */
.cf-shop-filter .fee-filter-item,
.cf-shop-filter .fee-item,
.cf-shop-filter .filter-item {
width: 100% !important;
max-width: 100% !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
min-height: 30px !important;
margin: 0 0 5px !important;
padding: 0 !important;
list-style: none !important;
overflow: hidden !important;
}
/* Item label */
.cf-shop-filter .fee-filter-item label,
.cf-shop-filter .fee-item label,
.cf-shop-filter .filter-item label,
.cf-shop-filter .fee-label,
.cf-shop-filter .fee-item-name {
color: #12372a !important;
font-size: 13.5px !important;
font-weight: 500 !important;
line-height: 1.3 !important;
cursor: pointer !important;
flex: 1 1 auto !important;
min-width: 0 !important;
overflow-wrap: break-word !important;
word-break: break-word !important;
}
/* Count badge */
.cf-shop-filter .fee-count,
.cf-shop-filter .fee-item-count,
.cf-shop-filter .filter-count {
color: rgba(29, 38, 49, 0.4) !important;
font-size: 11.5px !important;
font-weight: 600 !important;
flex: 0 0 auto !important;
}
/* Checkboxes — stable size, no transition */
.cf-shop-filter input[type="checkbox"] {
width: 15px !important;
height: 15px !important;
min-width: 15px !important;
min-height: 15px !important;
max-width: 15px !important;
max-height: 15px !important;
flex: 0 0 15px !important;
margin: 0 !important;
cursor: pointer !important;
accent-color: #b87333 !important;
transition: none !important;
}
/* Edit filter set link (admin only — push to bottom, muted) */
.cf-shop-filter .fee-edit-filter,
.cf-shop-filter a[href*="edit"],
.cf-shop-filter .edit-filter-set-link {
display: block !important;
margin-top: 16px !important;
color: rgba(18, 55, 42, 0.45) !important;
font-size: 12px !important;
font-weight: 600 !important;
text-decoration: none !important;
}
/* =========================================================
8. LOOP GRID SAFETY
========================================================= */
.cf-shop-products .elementor-loop-container .e-loop-item {
min-width: 0 !important;
}
.cf-shop-products .e-loop-item .cf-product-card {
height: 100%;
}
/* =========================================================
9. PAGINATION
========================================================= */
.cf-shop-products .elementor-pagination {
margin-top: 36px;
display: flex;
gap: 8px;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.cf-shop-products .elementor-pagination a,
.cf-shop-products .elementor-pagination span {
min-width: 38px;
height: 38px;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #d9d4c7;
border-radius: 50px;
color: #12372a !important;
background: #ffffff;
font-weight: 700;
text-decoration: none !important;
transition:
background 0.2s ease,
border-color 0.2s ease,
color 0.2s ease;
}
.cf-shop-products .elementor-pagination a:hover {
background: #b87333 !important;
border-color: #b87333 !important;
color: #ffffff !important;
}
.cf-shop-products .elementor-pagination .current {
background: #b87333 !important;
border-color: #b87333 !important;
color: #ffffff !important;
}
/* =========================================================
10. RESPONSIVE SHOP
========================================================= */
/* Desktop: sticky filter with internal scroll */
@media (min-width: 1025px) {
.cf-shop-filter {
position: sticky !important;
top: 120px !important;
max-height: calc(100vh - 140px) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
}
}
/* Tablet */
@media (max-width: 1024px) {
.cf-shop-hero {
margin-bottom: 24px !important;
padding-left: 22px !important;
padding-right: 22px !important;
}
.cf-shop-hero .e-con-inner,
.cf-shop-hero .elementor-container {
padding-top: 28px !important;
padding-bottom: 28px !important;
}
.cf-shop-content-wrap {
max-width: 100% !important;
padding: 24px 22px 65px !important;
}
.cf-shop-layout {
display: flex !important;
flex-direction: column !important;
gap: 28px !important;
}
.cf-shop-filter,
.cf-shop-products {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
.cf-shop-filter {
position: static !important;
max-height: none !important;
overflow: visible !important;
}
}
/* Mobile */
@media (max-width: 767px) {
/* Hero */
.cf-shop-hero {
margin-bottom: 22px !important;
padding-left: 16px !important;
padding-right: 16px !important;
}
.cf-shop-hero .e-con-inner,
.cf-shop-hero .elementor-container {
padding-top: 24px !important;
padding-bottom: 24px !important;
}
/* Layout */
.cf-shop-content-wrap {
padding: 10px 8px 38px !important;
}
.cf-shop-layout {
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
}
/* Filter */
.cf-shop-filter {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
position: static !important;
max-height: none !important;
overflow: visible !important;
padding: 16px !important;
border-radius: 14px !important;
margin-bottom: 8px !important;
}
.cf-shop-filter h1,
.cf-shop-filter h2,
.cf-shop-filter h3,
.cf-shop-filter .elementor-heading-title {
font-size: 26px !important;
margin-bottom: 14px !important;
}
.cf-shop-filter input[type="search"],
.cf-shop-filter input[type="text"] {
height: 42px !important;
min-height: 42px !important;
font-size: 14px !important;
}
.cf-shop-filter input[type="number"] {
width: 70px !important;
height: 38px !important;
min-height: 38px !important;
}
.cf-shop-filter li,
.cf-shop-filter .wpc-term-item {
margin-bottom: 8px !important;
}
.cf-shop-filter .wpc-filter-label-wrapper a,
.cf-shop-filter .wpc-filter-label-wrapper label,
.cf-shop-filter .wpc-term-item-content-wrapper a,
.cf-shop-filter .wpc-term-item-content-wrapper label,
.cf-shop-filter .wpc-term-name {
font-size: 13.5px !important;
}
/* Product grid: compact 2-column */
.cf-shop-products .elementor-loop-container {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
align-items: start !important;
width: 100% !important;
}
.cf-shop-products .elementor-loop-container .e-loop-item {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
/* Card: flat compact style for density */
.cf-product-card {
width: 100% !important;
min-height: 0 !important;
height: auto !important;
max-height: none !important;
display: flex !important;
flex-direction: column !important;
background: #ffffff !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow: hidden !important;
padding: 0 !important;
}
.cf-product-card:hover {
transform: none !important;
box-shadow: none !important;
}
/* Remove Elementor height forcing */
.cf-product-card,
.cf-product-card > .elementor-element,
.cf-product-card .elementor-widget,
.cf-product-card .elementor-widget-container,
.cf-shop-products .e-loop-item,
.cf-shop-products .e-loop-item > .elementor,
.cf-shop-products .e-loop-item .e-con {
min-height: 0 !important;
height: auto !important;
}
/* Product image */
.cf-product-card .elementor-widget-theme-post-featured-image {
display: block !important;
height: 155px !important;
min-height: 155px !important;
max-height: 155px !important;
margin: 0 !important;
padding: 0 !important;
background: #f7f3ea !important;
border-radius: 0 !important;
overflow: hidden !important;
}
.cf-product-card .elementor-widget-theme-post-featured-image a {
display: block !important;
width: 100% !important;
height: 100% !important;
}
.cf-product-card .elementor-widget-theme-post-featured-image img {
width: 100% !important;
height: 155px !important;
display: block !important;
object-fit: cover !important;
object-position: center center !important;
border-radius: 0 !important;
}
/* Compact padding */
.cf-product-card .elementor-widget-woocommerce-product-title,
.cf-product-card .elementor-widget-heading,
.cf-product-card .elementor-widget-woocommerce-product-price,
.cf-product-card .elementor-widget-shortcode,
.cf-product-card .elementor-widget-woocommerce-product-add-to-cart {
padding-left: 6px !important;
padding-right: 6px !important;
}
/* Product title */
.cf-product-card .elementor-widget-woocommerce-product-title,
.cf-product-card .elementor-widget-heading {
margin: 8px 0 4px !important;
}
.cf-product-card .elementor-widget-woocommerce-product-title a,
.cf-product-card .elementor-widget-heading a,
.cf-product-card h2,
.cf-product-card h3,
.cf-product-card .elementor-heading-title {
color: #12372a !important;
font-size: 13.5px !important;
line-height: 1.25 !important;
font-weight: 700 !important;
text-align: center !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
min-height: 34px !important;
max-height: 34px !important;
word-break: normal !important;
overflow-wrap: break-word !important;
}
/* Price */
.cf-product-card .elementor-widget-woocommerce-product-price {
margin: 0 0 7px !important;
text-align: center !important;
}
.cf-product-card .price,
.cf-product-card .woocommerce-Price-amount {
color: #b87333 !important;
font-size: 13.5px !important;
line-height: 1.2 !important;
font-weight: 800 !important;
text-align: center !important;
}
/* Hide rating */
.cf-product-card .elementor-widget-rating {
display: none !important;
}
/* WhatsApp button — icon + "BUY ON WHATSAPP" label */
.cf-product-card .elementor-widget-shortcode {
margin: 0 0 6px !important;
}
.cf-card-whatsapp-btn {
width: 100% !important;
height: 38px !important;
min-height: 38px !important;
max-height: 38px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 7px !important;
padding: 0 8px !important;
border-radius: 0 !important;
background: #25d366 !important;
color: #ffffff !important;
font-size: 0 !important;
line-height: 1 !important;
font-weight: 800 !important;
text-align: center !important;
white-space: nowrap !important;
text-decoration: none !important;
box-shadow: none !important;
}
.cf-card-whatsapp-btn:hover {
background: #128c7e !important;
transform: none !important;
}
.cf-card-whatsapp-btn::after {
content: "BUY ON WHATSAPP";
font-size: 11.5px !important;
line-height: 1 !important;
font-weight: 800 !important;
letter-spacing: 0.2px !important;
}
.cf-card-whatsapp-icon svg {
width: 14px !important;
height: 14px !important;
}
/* Hide Add to Cart — drive WhatsApp conversions */
.cf-product-card .elementor-widget-woocommerce-product-add-to-cart {
display: none !important;
}
/* Remove empty widget gaps */
.cf-product-card .elementor-widget,
.cf-product-card .elementor-widget-container {
margin: 0 !important;
padding: 0 !important;
}
/* Button wrap on small screens */
.cf-card-whatsapp-btn,
.cf-product-card .button,
.cf-product-card button,
.cf-product-card .add_to_cart_button {
white-space: normal !important;
text-align: center !important;
}
}
/* Very small phones: 1 column */
@media (max-width: 360px) {
.cf-shop-products .elementor-loop-container {
grid-template-columns: 1fr !important;
}
.cf-product-card .elementor-widget-theme-post-featured-image img {
height: 190px !important;
}
}
/* =========================================================
CHAMPIONS FURNITURE - HEADER SEARCH FIX
========================================================= */
.cf-header-main {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
padding-left: clamp(24px, 4vw, 72px);
padding-right: clamp(24px, 4vw, 72px);
}
.cf-header-logo {
flex: 0 0 auto;
}
.cf-header-actions {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 22px;
min-width: 0;
}
/* Search wrapper */
.cf-nav-search {
flex: 0 1 430px;
width: 430px;
max-width: 430px;
min-width: 300px;
}
/* Search form */
.cf-nav-search-form {
width: 100%;
height: 48px;
display: flex;
align-items: center;
background: #ffffff;
border: 1px solid rgba(15, 61, 46, 0.16);
border-radius: 999px;
overflow: hidden;
box-shadow: none;
}
/* Input */
.cf-nav-search-input {
flex: 1 1 auto;
min-width: 0;
height: 100%;
border: 0 !important;
outline: 0 !important;
background: transparent !important;
color: #123d30;
font-size: 14px;
font-weight: 500;
padding: 0 16px 0 20px;
box-shadow: none !important;
}
/* Placeholder */
.cf-nav-search-input::placeholder {
color: rgba(18, 61, 48, 0.55);
opacity: 1;
}
/* Search button */
.cf-nav-search-submit {
flex: 0 0 56px;
width: 56px;
min-width: 56px;
height: 48px;
border: 0;
outline: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
background: #b8742a;
color: #ffffff;
border-radius: 999px;
padding: 0;
margin-right: 0;
}
.cf-nav-search-submit:hover,
.cf-nav-search-submit:focus {
background: #0f3d2e;
color: #ffffff;
}
.cf-nav-search-submit svg {
width: 18px;
height: 18px;
display: block;
color: currentColor;
}
/* Tablet */
@media (max-width: 1024px) {
.cf-header-main {
flex-wrap: wrap;
gap: 16px;
padding-left: 20px;
padding-right: 20px;
}
.cf-header-logo {
flex: 0 0 auto;
}
.cf-header-actions {
flex: 1 1 auto;
gap: 14px;
}
.cf-nav-search {
flex: 1 1 320px;
width: auto;
max-width: none;
min-width: 240px;
}
}
/* Mobile */
@media (max-width: 767px) {
.cf-header-main {
align-items: center;
}
.cf-header-actions {
width: 100%;
flex: 1 1 100%;
justify-content: space-between;
flex-wrap: wrap;
}
.cf-nav-search {
order: 10;
flex: 1 1 100%;
width: 100%;
max-width: 100%;
min-width: 0;
}
.cf-nav-search-form {
height: 44px;
border-radius: 14px;
}
.cf-nav-search-input {
font-size: 13px;
padding-left: 14px;
}
.cf-nav-search-submit {
flex-basis: 50px;
width: 50px;
min-width: 50px;
height: 44px;
border-radius: 14px;
}
}
/* =========================================================
SEARCH ICON VISIBILITY FIX
Uses pure CSS icon, so it works even if inline SVG is hidden
========================================================= */
.cf-nav-search-submit {
position: relative;
font-size: 0;
overflow: visible;
}
/* Hide broken/missing SVG if WordPress/Elementor is interfering */
.cf-nav-search-submit svg {
display: none !important;
}
/* Magnifying glass circle */
.cf-nav-search-submit::before {
content: "";
width: 15px;
height: 15px;
border: 2px solid #ffffff;
border-radius: 50%;
display: block;
position: absolute;
top: 13px;
left: 18px;
box-sizing: border-box;
}
/* Magnifying glass handle */
.cf-nav-search-submit::after {
content: "";
width: 8px;
height: 2px;
background: #ffffff;
border-radius: 999px;
display: block;
position: absolute;
top: 28px;
left: 31px;
transform: rotate(45deg);
transform-origin: left center;
}
/* Mobile alignment */
@media (max-width: 767px) {
.cf-nav-search-submit::before {
top: 12px;
left: 16px;
}
.cf-nav-search-submit::after {
top: 27px;
left: 29px;
}
}
/* =========================================================
SEARCH BAR LIGHT GLOW RESTORE
========================================================= */
.cf-nav-search-form {
box-shadow:
0 8px 22px rgba(0, 0, 0, 0.055),
0 0 22px rgba(184, 116, 42, 0.1);
transition:
border-color 0.2s ease,
box-shadow 0.2s ease,
transform 0.2s ease;
}
.cf-nav-search-form:hover {
box-shadow:
0 10px 26px rgba(0, 0, 0, 0.07),
0 0 28px rgba(184, 116, 42, 0.16);
}
.cf-nav-search-form:focus-within {
border-color: rgba(184, 116, 42, 0.55);
box-shadow:
0 12px 30px rgba(0, 0, 0, 0.08),
0 0 34px rgba(184, 116, 42, 0.24);
transform: translateY(-1px);
}
/* =========================================================
CHAMPIONS FURNITURE - FINAL CATEGORY NAV STRIP
Classes:
cf-category-strip
cf-category-strip-inner
cf-browse-categories
cf-category-menu
========================================================= */
/* Outer white strip */
.cf-category-strip,
.cf-category-strip.e-con {
--content-width: 100% !important;
--width: 100% !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: #ffffff !important;
border-top: 1px solid rgba(18, 55, 42, 0.08);
border-bottom: 1px solid rgba(18, 55, 42, 0.08);
position: relative;
z-index: 30;
}
/* Kill Elementor boxed inner constraint */
.cf-category-strip > .e-con-inner,
.cf-category-strip > .elementor-container {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* Actual flex row holding Browse + Menu */
.cf-category-strip-inner,
.cf-category-strip-inner.e-con,
.cf-category-strip-inner > .e-con-inner {
--content-width: 100% !important;
--width: 100% !important;
--display: flex !important;
--flex-direction: row !important;
--justify-content: flex-start !important;
--align-items: stretch !important;
--gap: 0px !important;
width: 100% !important;
max-width: 100% !important;
min-height: 56px !important;
margin: 0 !important;
padding: 0 30px !important;
display: flex !important;
flex-direction: row !important;
align-items: stretch !important;
justify-content: flex-start !important;
gap: 0 !important;
box-sizing: border-box !important;
}
/* HTML widget wrapper */
.cf-category-strip-inner .elementor-widget-html {
flex: 0 0 300px !important;
width: 300px !important;
max-width: 300px !important;
min-width: 300px !important;
margin: 0 !important;
padding: 0 !important;
}
/* Browse Categories block */
.cf-browse-categories {
position: relative;
width: 300px !important;
max-width: 300px !important;
min-width: 300px !important;
min-height: 56px !important;
margin: 0 !important;
padding: 0 !important;
background: #b87333 !important;
color: #111827 !important;
font-family: inherit;
border: 0 !important;
outline: 0 !important;
box-sizing: border-box !important;
z-index: 80;
}
.cf-browse-categories,
.cf-browse-categories * {
box-sizing: border-box !important;
}
/* Remove ugly native details/summary border */
.cf-browse-summary {
width: 100% !important;
min-height: 56px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 14px !important;
padding: 0 20px !important;
margin: 0 !important;
list-style: none !important;
cursor: pointer;
user-select: none;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
}
.cf-browse-summary::-webkit-details-marker {
display: none !important;
}
.cf-browse-summary:focus,
.cf-browse-summary:active {
outline: 0 !important;
border: 0 !important;
box-shadow: none !important;
}
.cf-browse-summary:focus-visible {
box-shadow: inset 0 0 0 2px rgba(18, 55, 42, 0.22) !important;
}
.cf-browse-left {
display: inline-flex !important;
align-items: center !important;
gap: 13px !important;
min-width: 0 !important;
}
.cf-browse-icon,
.cf-browse-caret {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
color: currentColor !important;
line-height: 1 !important;
flex: 0 0 auto !important;
}
.cf-browse-icon svg,
.cf-browse-caret svg {
display: block !important;
}
.cf-browse-label {
color: #111827 !important;
font-size: 15px !important;
font-weight: 800 !important;
line-height: 1 !important;
white-space: nowrap !important;
}
.cf-browse-caret {
transition: transform 0.2s ease;
}
.cf-browse-categories[open] .cf-browse-caret {
transform: rotate(180deg);
}
/* Dropdown */
.cf-browse-dropdown {
position: absolute;
top: 100%;
left: 0;
width: 300px;
background: #ffffff;
border: 1px solid rgba(18, 55, 42, 0.1);
box-shadow: 0 18px 38px rgba(0, 0, 0, 0.14);
padding: 8px 0;
margin: 0;
z-index: 9999;
}
.cf-browse-dropdown a {
min-height: 42px;
display: flex !important;
align-items: center !important;
padding: 0 18px !important;
color: #111827 !important;
font-size: 14px !important;
font-weight: 650 !important;
line-height: 1.2 !important;
text-decoration: none !important;
background: transparent !important;
transition:
background 0.18s ease,
color 0.18s ease,
padding-left 0.18s ease;
}
.cf-browse-dropdown a:hover,
.cf-browse-dropdown a:focus {
background: rgba(184, 115, 51, 0.1) !important;
color: #b87333 !important;
padding-left: 22px !important;
}
/* Menu widget area */
.cf-category-menu,
.cf-category-strip-inner .elementor-widget-nav-menu {
flex: 1 1 auto !important;
min-width: 0 !important;
min-height: 56px !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
margin: 0 !important;
padding: 0 !important;
background: #ffffff !important;
}
.cf-category-menu .elementor-widget-container,
.cf-category-strip-inner
.elementor-widget-nav-menu
.elementor-widget-container {
width: 100% !important;
min-height: 56px !important;
display: flex !important;
align-items: center !important;
}
/* Classic Elementor Nav Menu */
.cf-category-menu .elementor-nav-menu,
.cf-category-strip-inner .elementor-nav-menu {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
flex-wrap: nowrap !important;
gap: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.cf-category-menu .elementor-nav-menu > li,
.cf-category-strip-inner .elementor-nav-menu > li {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.cf-category-menu .elementor-nav-menu > li > a,
.cf-category-strip-inner .elementor-nav-menu > li > a {
min-height: 56px !important;
display: flex !important;
align-items: center !important;
padding: 0 16px !important;
color: #111827 !important;
font-size: 15px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
white-space: nowrap !important;
text-decoration: none !important;
background: transparent !important;
}
.cf-category-menu .elementor-nav-menu > li > a:hover,
.cf-category-menu .elementor-nav-menu > li.current-menu-item > a,
.cf-category-strip-inner .elementor-nav-menu > li > a:hover,
.cf-category-strip-inner .elementor-nav-menu > li.current-menu-item > a {
color: #b87333 !important;
background: rgba(184, 115, 51, 0.06) !important;
}
/* New Elementor Menu widget support */
.cf-category-menu .e-n-menu,
.cf-category-menu .e-n-menu-wrapper,
.cf-category-menu .e-n-menu-heading,
.cf-category-menu .e-n-menu-title-container {
min-height: 56px !important;
}
.cf-category-menu .e-n-menu-title {
min-height: 56px !important;
padding: 0 16px !important;
color: #111827 !important;
font-size: 15px !important;
font-weight: 700 !important;
white-space: nowrap !important;
}
.cf-category-menu .e-n-menu-title:hover {
color: #b87333 !important;
background: rgba(184, 115, 51, 0.06) !important;
}
/* Tablet */
@media (max-width: 1024px) {
.cf-category-strip-inner,
.cf-category-strip-inner.e-con,
.cf-category-strip-inner > .e-con-inner {
padding-left: 20px !important;
padding-right: 20px !important;
overflow-x: auto !important;
overflow-y: visible !important;
}
.cf-category-strip-inner .elementor-widget-html,
.cf-browse-categories {
flex-basis: 260px !important;
width: 260px !important;
max-width: 260px !important;
min-width: 260px !important;
}
.cf-browse-dropdown {
width: 260px !important;
}
.cf-browse-summary {
padding: 0 16px !important;
}
.cf-category-menu,
.cf-category-strip-inner .elementor-widget-nav-menu {
overflow-x: auto !important;
overflow-y: visible !important;
}
.cf-category-menu .elementor-nav-menu,
.cf-category-strip-inner .elementor-nav-menu {
width: max-content !important;
}
.cf-category-menu .elementor-nav-menu > li > a,
.cf-category-strip-inner .elementor-nav-menu > li > a,
.cf-category-menu .e-n-menu-title {
font-size: 14px !important;
padding: 0 13px !important;
}
}
/* Mobile */
@media (max-width: 767px) {
.cf-category-strip-inner,
.cf-category-strip-inner.e-con,
.cf-category-strip-inner > .e-con-inner {
flex-direction: column !important;
align-items: stretch !important;
padding: 10px 14px !important;
gap: 8px !important;
overflow: visible !important;
}
.cf-category-strip-inner .elementor-widget-html,
.cf-browse-categories {
flex: 0 0 auto !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
border-radius: 12px !important;
}
.cf-browse-summary {
min-height: 50px !important;
}
.cf-browse-dropdown {
position: static !important;
width: 100% !important;
border-radius: 0 0 12px 12px !important;
box-shadow: none !important;
border-top: 1px solid rgba(18, 55, 42, 0.1) !important;
}
.cf-category-menu,
.cf-category-strip-inner .elementor-widget-nav-menu {
width: 100% !important;
min-height: 46px !important;
overflow-x: auto !important;
overflow-y: visible !important;
border-radius: 12px !important;
}
.cf-category-menu .elementor-nav-menu,
.cf-category-strip-inner .elementor-nav-menu {
width: max-content !important;
flex-wrap: nowrap !important;
}
.cf-category-menu .elementor-nav-menu > li > a,
.cf-category-strip-inner .elementor-nav-menu > li > a,
.cf-category-menu .e-n-menu-title {
min-height: 46px !important;
font-size: 13px !important;
padding: 0 12px !important;
}
}
/* =========================================================
BROWSE CATEGORIES - ACTIVE PRIMARY STATE
========================================================= */
/* Default state remains copper */
.cf-browse-categories {
background: var(--cf-copper) !important;
color: #111827 !important;
}
/* Active / open state */
.cf-browse-categories[open] {
background: var(--cf-green) !important;
color: var(--cf-cream) !important;
}
/* Active text and icons */
.cf-browse-categories[open] .cf-browse-label,
.cf-browse-categories[open] .cf-browse-icon,
.cf-browse-categories[open] .cf-browse-caret {
color: var(--cf-cream) !important;
}
/* Optional: active focus ring should also feel premium */
.cf-browse-categories[open] .cf-browse-summary:focus-visible {
box-shadow: inset 0 0 0 2px rgba(247, 243, 234, 0.35) !important;
}
/* =========================================================
CATEGORY MENU - ACTIVE ITEM PRIMARY STATE
========================================================= */
.cf-category-menu .elementor-nav-menu > li.current-menu-item > a,
.cf-category-strip-inner .elementor-nav-menu > li.current-menu-item > a,
.cf-category-menu .elementor-nav-menu > li.current-menu-ancestor > a,
.cf-category-strip-inner .elementor-nav-menu > li.current-menu-ancestor > a {
background: var(--cf-green) !important;
color: var(--cf-cream) !important;
}
/* Hover can stay copper unless item is active */
.cf-category-menu .elementor-nav-menu > li.current-menu-item > a:hover,
.cf-category-strip-inner .elementor-nav-menu > li.current-menu-item > a:hover,
.cf-category-menu .elementor-nav-menu > li.current-menu-ancestor > a:hover,
.cf-category-strip-inner
.elementor-nav-menu
> li.current-menu-ancestor
> a:hover {
background: var(--cf-green) !important;
color: var(--cf-cream) !important;
}
/* =========================================================
BROWSE CATEGORIES - DEFAULT TEXT WHITE
========================================================= */
.cf-browse-categories,
.cf-browse-categories .cf-browse-summary,
.cf-browse-categories .cf-browse-label,
.cf-browse-categories .cf-browse-icon,
.cf-browse-categories .cf-browse-caret {
color: #ffffff !important;
}
/* Make SVG icons inherit the white color */
.cf-browse-categories svg,
.cf-browse-categories svg path {
color: #ffffff !important;
stroke: currentColor !important;
}
/* Keep open/active state white too */
.cf-browse-categories[open],
.cf-browse-categories[open] .cf-browse-label,
.cf-browse-categories[open] .cf-browse-icon,
.cf-browse-categories[open] .cf-browse-caret {
color: #ffffff !important;
}
/* =========================================================
CATEGORY STRIP - MOBILE/TABLET SEARCH MODE
Desktop: Browse + Menu visible, strip search hidden
Tablet/Mobile: Browse + Menu hidden, strip search visible
========================================================= */
/* Desktop / laptop */
@media (min-width: 1025px) {
.cf-category-mobile-search {
display: none !important;
}
.cf-category-strip {
display: block !important;
}
.cf-category-strip-inner {
display: flex !important;
align-items: stretch !important;
}
.cf-browse-categories,
.cf-category-menu {
display: flex !important;
}
}
/* Tablet and mobile */
@media (max-width: 1024px) {
.cf-category-strip {
display: block !important;
background: var(--cf-cream) !important;
border-top: 1px solid rgba(18, 55, 42, 0.08) !important;
border-bottom: 1px solid rgba(18, 55, 42, 0.08) !important;
padding: 10px 14px !important;
}
.cf-category-strip-inner,
.cf-category-strip-inner.e-con,
.cf-category-strip-inner > .e-con-inner {
width: 100% !important;
max-width: 100% !important;
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: center !important;
gap: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: visible !important;
}
/* Hide everything else in category strip */
.cf-category-strip .cf-browse-categories,
.cf-category-strip .cf-category-menu,
.cf-category-strip .elementor-widget-nav-menu,
.cf-category-strip .elementor-widget-html:not(.cf-category-mobile-search) {
display: none !important;
}
/* Show only the strip search */
.cf-category-mobile-search {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 auto !important;
padding: 0 !important;
}
.cf-category-mobile-search .elementor-widget-container {
width: 100% !important;
max-width: 100% !important;
}
.cf-category-mobile-search .cf-nav-search {
width: 100% !important;
max-width: 680px !important;
min-width: 0 !important;
margin: 0 auto !important;
flex: 1 1 auto !important;
}
.cf-category-mobile-search .cf-nav-search-form {
width: 100% !important;
height: 46px !important;
border-radius: 999px !important;
background: #ffffff !important;
border: 1px solid rgba(18, 55, 42, 0.14) !important;
box-shadow:
0 8px 20px rgba(0, 0, 0, 0.055),
0 0 20px rgba(184, 115, 51, 0.1) !important;
}
.cf-category-mobile-search .cf-nav-search-input {
height: 46px !important;
font-size: 14px !important;
padding-left: 18px !important;
}
.cf-category-mobile-search .cf-nav-search-submit {
width: 54px !important;
min-width: 54px !important;
height: 46px !important;
border-radius: 999px !important;
background: var(--cf-copper) !important;
}
.cf-category-mobile-search .cf-nav-search-submit:hover,
.cf-category-mobile-search .cf-nav-search-submit:focus {
background: var(--cf-green) !important;
}
.cf-category-mobile-search .cf-nav-search-submit::before {
top: 12px !important;
left: 18px !important;
}
.cf-category-mobile-search .cf-nav-search-submit::after {
top: 27px !important;
left: 31px !important;
}
}
/* Small mobile */
@media (max-width: 480px) {
.cf-category-strip {
padding: 8px 10px !important;
}
.cf-category-mobile-search .cf-nav-search-form {
height: 44px !important;
border-radius: 14px !important;
}
.cf-category-mobile-search .cf-nav-search-input {
height: 44px !important;
font-size: 13px !important;
padding-left: 14px !important;
}
.cf-category-mobile-search .cf-nav-search-submit {
width: 50px !important;
min-width: 50px !important;
height: 44px !important;
border-radius: 14px !important;
}
.cf-category-mobile-search .cf-nav-search-submit::before {
top: 12px !important;
left: 16px !important;
}
.cf-category-mobile-search .cf-nav-search-submit::after {
top: 27px !important;
left: 29px !important;
}
}
/* This code only targets mobile screens under 767px */
@media (max-width: 1024px) {
/* 1. Force the main header container to stay in a row */
.cf-main-header {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
flex-wrap: nowrap !important;
}
/* 2. Target the Cart and Menu widgets to group them */
.cf-mobile-cart,
.cf-mobile-menu {
display: inline-block !important;
width: auto !important; /* Prevents widgets from taking up 100% width on mobile */
}
/* 3. Shift the Cart leftward so it sits neatly next to the menu */
.cf-mobile-cart {
margin-left: auto !important; /* Pushes the cart all the way right next to the menu */
margin-right: 15px !important; /* Creates clear spacing between cart and menu */
}
}
/* =========================================================
CHAMPIONS FURNITURE - LIVE PRODUCT SEARCH DROPDOWN
========================================================= */
.cf-live-search {
position: relative !important;
z-index: 9999 !important;
}
.cf-live-search-panel {
position: absolute;
top: calc(100% + 10px);
left: 0;
right: 0;
width: 100%;
background: #ffffff;
border: 1px solid rgba(18, 55, 42, 0.12);
border-radius: 16px;
box-shadow:
0 18px 42px rgba(0, 0, 0, 0.14),
0 0 28px rgba(184, 115, 51, 0.1);
padding: 8px;
overflow: hidden;
z-index: 99999;
}
.cf-live-search-panel[hidden] {
display: none !important;
}
.cf-live-search-status {
padding: 13px 14px;
color: rgba(29, 38, 49, 0.72);
font-size: 13.5px;
font-weight: 600;
}
.cf-live-search-results {
display: grid;
gap: 4px;
}
.cf-live-search-item {
display: grid !important;
grid-template-columns: 54px minmax(0, 1fr);
align-items: center;
gap: 12px;
min-height: 66px;
padding: 8px;
border-radius: 12px;
color: var(--cf-dark) !important;
text-decoration: none !important;
background: transparent;
}
.cf-live-search-item:hover,
.cf-live-search-item:focus {
background: rgba(184, 115, 51, 0.09);
}
.cf-live-search-thumb {
width: 54px;
height: 54px;
display: block;
border-radius: 10px;
overflow: hidden;
background: var(--cf-cream);
border: 1px solid rgba(18, 55, 42, 0.08);
}
.cf-live-search-thumb img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.cf-live-search-info {
min-width: 0;
display: grid;
gap: 4px;
}
.cf-live-search-title {
color: var(--cf-green);
font-size: 14px;
font-weight: 800;
line-height: 1.25;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.cf-live-search-price {
color: var(--cf-copper);
font-size: 13px;
font-weight: 800;
line-height: 1.2;
}
.cf-live-search-view-all {
min-height: 42px;
margin-top: 6px;
padding: 0 14px;
display: flex !important;
align-items: center;
justify-content: center;
border-radius: 999px;
background: var(--cf-green);
color: #ffffff !important;
font-size: 13.5px;
font-weight: 800;
text-decoration: none !important;
}
.cf-live-search-view-all:hover {
background: var(--cf-copper);
color: #ffffff !important;
}
/* Keep live dropdown above hero/slider */
.elementor-location-header,
.cf-header-main,
.cf-category-strip,
.cf-category-strip-inner {
overflow: visible !important;
}
/* Tablet/mobile category-strip search */
@media (max-width: 1024px) {
.cf-category-mobile-search .cf-live-search-panel {
top: calc(100% + 8px);
border-radius: 14px;
}
}
/* Small mobile */
@media (max-width: 480px) {
.cf-live-search-panel {
top: calc(100% + 6px);
left: 0;
right: 0;
border-radius: 0 0 14px 14px;
padding: 6px;
}
.cf-live-search-item {
grid-template-columns: 48px minmax(0, 1fr);
min-height: 60px;
gap: 10px;
padding: 7px;
}
.cf-live-search-thumb {
width: 48px;
height: 48px;
}
.cf-live-search-title {
font-size: 13px;
}
.cf-live-search-price {
font-size: 12.5px;
}
.cf-live-search-view-all {
min-height: 40px;
font-size: 13px;
}
}
/* =========================================================
CATEGORY STRIP - WORDPRESS MENU POLISH
Target: WordPress Menu widget with class cf-category-menu
========================================================= */
@media (min-width: 1025px) {
.cf-category-menu,
.cf-category-menu .elementor-widget-container,
.cf-category-menu .widget_nav_menu,
.cf-category-menu .menu-main-menu-container,
.cf-category-menu .menu {
height: 56px !important;
min-height: 56px !important;
display: flex !important;
align-items: stretch !important;
margin: 0 !important;
padding: 0 !important;
}
.cf-category-menu {
flex: 1 1 auto !important;
width: auto !important;
min-width: 0 !important;
background: #ffffff !important;
}
.cf-category-menu ul,
.cf-category-menu li {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.cf-category-menu .menu {
gap: 0 !important;
flex-wrap: nowrap !important;
}
.cf-category-menu .menu > li {
position: relative !important;
display: flex !important;
align-items: stretch !important;
}
.cf-category-menu .menu > li > a {
min-height: 56px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 20px !important;
color: #111827 !important;
font-size: 15px !important;
font-weight: 800 !important;
line-height: 1 !important;
text-decoration: none !important;
white-space: nowrap !important;
background: #ffffff !important;
border-left: 1px solid rgba(18, 55, 42, 0.04) !important;
border-bottom: 3px solid transparent !important;
transition:
color 0.2s ease,
background 0.2s ease,
border-color 0.2s ease;
}
.cf-category-menu .menu > li > a:hover {
color: var(--cf-copper) !important;
background: rgba(184, 115, 51, 0.06) !important;
border-bottom-color: var(--cf-copper) !important;
}
.cf-category-menu .menu > li.current-menu-item > a,
.cf-category-menu .menu > li.current_page_item > a,
.cf-category-menu .menu > li.current-menu-ancestor > a,
.cf-category-menu .menu > li.current-menu-parent > a {
background: var(--cf-green) !important;
color: #ffffff !important;
border-bottom-color: var(--cf-copper) !important;
}
.cf-category-menu .menu > li.current-menu-item > a:hover,
.cf-category-menu .menu > li.current_page_item > a:hover,
.cf-category-menu .menu > li.current-menu-ancestor > a:hover,
.cf-category-menu .menu > li.current-menu-parent > a:hover {
background: var(--cf-green) !important;
color: #ffffff !important;
}
/* Dropdown parent arrow spacing */
.cf-category-menu .menu > li.menu-item-has-children > a {
gap: 8px !important;
padding-right: 22px !important;
}
/* If theme outputs arrow icon/span */
.cf-category-menu .menu > li.menu-item-has-children > a::after {
content: "";
width: 7px;
height: 7px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg) translateY(-2px);
margin-left: 8px;
display: inline-block;
}
/* Dropdown panel */
.cf-category-menu .menu > li > .sub-menu {
position: absolute !important;
top: 100% !important;
left: 0 !important;
width: 210px !important;
min-width: 210px !important;
display: block !important;
opacity: 0 !important;
visibility: hidden !important;
transform: translateY(10px) !important;
pointer-events: none !important;
background: #ffffff !important;
border: 1px solid rgba(18, 55, 42, 0.1) !important;
border-radius: 0 0 14px 14px !important;
box-shadow:
0 18px 38px rgba(0, 0, 0, 0.13),
0 0 22px rgba(184, 115, 51, 0.08) !important;
padding: 8px !important;
z-index: 99999 !important;
transition:
opacity 0.18s ease,
visibility 0.18s ease,
transform 0.18s ease;
}
.cf-category-menu .menu > li:hover > .sub-menu,
.cf-category-menu .menu > li:focus-within > .sub-menu {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0) !important;
pointer-events: auto !important;
}
.cf-category-menu .sub-menu li {
width: 100% !important;
display: block !important;
}
.cf-category-menu .sub-menu li a {
min-height: 42px !important;
display: flex !important;
align-items: center !important;
padding: 0 14px !important;
border-radius: 10px !important;
color: #111827 !important;
background: transparent !important;
font-size: 14px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
text-decoration: none !important;
white-space: nowrap !important;
}
.cf-category-menu .sub-menu li a:hover,
.cf-category-menu .sub-menu li.current-menu-item > a {
background: rgba(184, 115, 51, 0.1) !important;
color: var(--cf-copper) !important;
}
}
/* =========================================================
FINAL CATEGORY MENU DROPDOWN POLISH
For WordPress Menu widget: cf-category-menu
========================================================= */
@media (min-width: 1025px) {
.cf-category-strip,
.cf-category-strip-inner,
.cf-category-menu,
.cf-category-menu .elementor-widget-container,
.cf-category-menu .widget_nav_menu,
.cf-category-menu .menu {
overflow: visible !important;
}
.cf-category-menu .menu > li {
position: relative !important;
}
/* Parent item when dropdown is open */
.cf-category-menu .menu > li.menu-item-has-children:hover > a,
.cf-category-menu .menu > li.menu-item-has-children:focus-within > a {
color: var(--cf-copper) !important;
background: rgba(184, 115, 51, 0.07) !important;
border-bottom-color: var(--cf-copper) !important;
}
/* Dropdown panel */
.cf-category-menu .menu > li > .sub-menu {
position: absolute !important;
top: calc(100% + 0px) !important;
left: 0 !important;
width: 190px !important;
min-width: 190px !important;
display: block !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transform: translateY(10px) !important;
background: #ffffff !important;
border: 1px solid rgba(18, 55, 42, 0.1) !important;
border-top: 3px solid var(--cf-copper) !important;
border-radius: 0 0 14px 14px !important;
box-shadow:
0 18px 38px rgba(0, 0, 0, 0.14),
0 0 22px rgba(184, 115, 51, 0.08) !important;
padding: 8px !important;
margin: 0 !important;
z-index: 999999 !important;
transition:
opacity 0.18s ease,
visibility 0.18s ease,
transform 0.18s ease;
}
.cf-category-menu .menu > li:hover > .sub-menu,
.cf-category-menu .menu > li:focus-within > .sub-menu {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: translateY(0) !important;
}
/* Dropdown items */
.cf-category-menu .sub-menu li {
width: 100% !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.cf-category-menu .sub-menu li a {
width: 100% !important;
min-height: 42px !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
padding: 0 14px !important;
margin: 0 !important;
border-radius: 10px !important;
background: transparent !important;
color: #111827 !important;
font-size: 14px !important;
font-weight: 750 !important;
line-height: 1.2 !important;
text-decoration: none !important;
white-space: nowrap !important;
border: 0 !important;
transition:
background 0.18s ease,
color 0.18s ease,
padding-left 0.18s ease;
}
.cf-category-menu .sub-menu li a:hover,
.cf-category-menu .sub-menu li a:focus {
background: rgba(184, 115, 51, 0.1) !important;
color: var(--cf-copper) !important;
padding-left: 18px !important;
}
/* Active dropdown item */
.cf-category-menu .sub-menu li.current-menu-item > a,
.cf-category-menu .sub-menu li.current_page_item > a {
background: var(--cf-cream) !important;
color: var(--cf-copper) !important;
font-weight: 850 !important;
}
/* Keep parent active clean */
.cf-category-menu .menu > li.current-menu-parent > a,
.cf-category-menu .menu > li.current-menu-ancestor > a {
background: var(--cf-green) !important;
color: #ffffff !important;
border-bottom-color: var(--cf-copper) !important;
}
/* Dropdown caret */
.cf-category-menu .menu > li.menu-item-has-children > a::after {
content: "" !important;
width: 7px !important;
height: 7px !important;
border-right: 2px solid currentColor !important;
border-bottom: 2px solid currentColor !important;
transform: rotate(45deg) translateY(-2px) !important;
margin-left: 10px !important;
display: inline-block !important;
}
.cf-category-menu .menu > li.menu-item-has-children:hover > a::after,
.cf-category-menu .menu > li.menu-item-has-children:focus-within > a::after {
transform: rotate(225deg) translateY(-1px) !important;
}
}
/* =========================================================
FIX BROKEN CATEGORY MENU DROPDOWN
Restores hover reveal for WordPress Menu widget
========================================================= */
@media (min-width: 1025px) {
.cf-category-menu,
.cf-category-menu *,
.cf-category-strip,
.cf-category-strip-inner {
overflow: visible !important;
}
.cf-category-menu li.menu-item-has-children {
position: relative !important;
}
/* Keep submenu hidden by default */
.cf-category-menu li.menu-item-has-children > ul.sub-menu {
position: absolute !important;
top: 100% !important;
left: 50% !important;
transform: translateX(-50%) translateY(8px) !important;
width: 220px !important;
min-width: 220px !important;
display: block !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
margin: 0 !important;
padding: 10px !important;
background: #ffffff !important;
border: 1px solid rgba(18, 55, 42, 0.1) !important;
border-radius: 16px !important;
box-shadow:
0 22px 50px rgba(0, 0, 0, 0.18),
0 0 30px rgba(184, 115, 51, 0.1) !important;
z-index: 999999 !important;
transition:
opacity 0.18s ease,
visibility 0.18s ease,
transform 0.18s ease !important;
}
/* This is the important fix */
.cf-category-menu li.menu-item-has-children:hover > ul.sub-menu,
.cf-category-menu li.menu-item-has-children:focus-within > ul.sub-menu,
.cf-category-menu li.menu-item-has-children:focus > ul.sub-menu {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: translateX(-50%) translateY(0) !important;
}
/* Prevent hover gap from closing the menu */
.cf-category-menu li.menu-item-has-children > ul.sub-menu::before {
content: "" !important;
position: absolute !important;
top: -12px !important;
left: 0 !important;
width: 100% !important;
height: 12px !important;
background: transparent !important;
}
/* Dropdown item reset */
.cf-category-menu ul.sub-menu li {
width: 100% !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.cf-category-menu ul.sub-menu li a {
width: 100% !important;
min-height: 44px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 0 14px !important;
margin: 0 0 5px !important;
border-radius: 12px !important;
background: transparent !important;
color: var(--cf-green) !important;
font-size: 14px !important;
font-weight: 800 !important;
line-height: 1.2 !important;
text-decoration: none !important;
white-space: nowrap !important;
transition:
background 0.18s ease,
color 0.18s ease,
padding-left 0.18s ease !important;
}
.cf-category-menu ul.sub-menu li:last-child a {
margin-bottom: 0 !important;
}
.cf-category-menu ul.sub-menu li a:hover,
.cf-category-menu ul.sub-menu li a:focus {
background: var(--cf-cream) !important;
color: var(--cf-copper) !important;
padding-left: 18px !important;
}
.cf-category-menu ul.sub-menu li.current-menu-item > a,
.cf-category-menu ul.sub-menu li.current_page_item > a {
background: var(--cf-green) !important;
color: #ffffff !important;
}
}
/* =========================================================
PRODUCT CARD - FLOATING SALE BADGE USING SITE COLORS
========================================================= */
.cf-product-card {
position: relative !important;
overflow: visible !important;
}
/* Badge wrapper */
.cf-sale-badge {
position: absolute !important;
top: -10px !important;
left: 50% !important;
transform: translateX(-50%) !important;
z-index: 20 !important;
margin: 0 !important;
padding: 0 !important;
pointer-events: none !important;
width: auto !important;
max-width: calc(100% - 24px) !important;
}
/* Badge text */
.cf-sale-badge .elementor-heading-title,
.cf-sale-badge h1,
.cf-sale-badge h2,
.cf-sale-badge h3,
.cf-sale-badge h4,
.cf-sale-badge h5,
.cf-sale-badge h6 {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 32px !important;
padding: 7px 14px !important;
margin: 0 !important;
background: var(--cf-copper) !important;
color: #ffffff !important;
border: 1px solid rgba(255, 255, 255, 0.55) !important;
border-radius: 8px !important;
font-size: 13px !important;
font-weight: 800 !important;
line-height: 1 !important;
letter-spacing: 0.1px !important;
text-transform: none !important;
white-space: nowrap !important;
box-shadow:
0 8px 18px rgba(18, 55, 42, 0.18),
0 0 18px rgba(184, 115, 51, 0.18) !important;
}
/* Optional: custom text */
.cf-sale-badge .elementor-heading-title {
font-size: 0 !important;
}
.cf-sale-badge .elementor-heading-title::before {
content: "On Sale!";
color: #ffffff !important;
font-size: 13px !important;
font-weight: 800 !important;
line-height: 1 !important;
}
/* Hide empty badge */
.cf-sale-badge .elementor-heading-title:empty {
display: none !important;
}
/* Mobile */
@media (max-width: 767px) {
.cf-sale-badge {
top: -8px !important;
max-width: calc(100% - 16px) !important;
}
.cf-sale-badge .elementor-heading-title,
.cf-sale-badge h1,
.cf-sale-badge h2,
.cf-sale-badge h3,
.cf-sale-badge h4,
.cf-sale-badge h5,
.cf-sale-badge h6 {
min-height: 28px !important;
padding: 6px 11px !important;
border-radius: 7px !important;
}
.cf-sale-badge .elementor-heading-title::before {
font-size: 11.5px !important;
}
}
/* =========================================================
PRODUCT CARD - FINAL FLOATING SALE BADGE
========================================================= */
.cf-product-card {
position: relative !important;
overflow: visible !important;
}
/* Badge wrapper */
.cf-sale-badge {
position: absolute !important;
top: -12px !important;
left: 50% !important;
right: auto !important;
transform: translateX(-50%) !important;
z-index: 30 !important;
width: auto !important;
max-width: calc(100% - 28px) !important;
margin: 0 !important;
padding: 0 !important;
pointer-events: none !important;
}
/* Badge text */
.cf-sale-badge .elementor-heading-title {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 32px !important;
padding: 7px 15px !important;
margin: 0 !important;
background: var(--cf-copper) !important;
color: #ffffff !important;
border-radius: 8px !important;
border: 1px solid rgba(255, 255, 255, 0.55) !important;
font-size: 0 !important;
font-weight: 800 !important;
line-height: 1 !important;
white-space: nowrap !important;
box-shadow:
0 8px 18px rgba(18, 55, 42, 0.18),
0 0 18px rgba(184, 115, 51, 0.18) !important;
}
/* Custom visible text */
.cf-sale-badge .elementor-heading-title::before {
content: "On Sale!";
color: #ffffff !important;
font-size: 13px !important;
font-weight: 800 !important;
line-height: 1 !important;
}
/* Hide if Elementor outputs nothing */
.cf-sale-badge .elementor-heading-title:empty {
display: none !important;
}
/* Mobile */
@media (max-width: 767px) {
.cf-sale-badge {
top: -8px !important;
max-width: calc(100% - 16px) !important;
}
.cf-sale-badge .elementor-heading-title {
min-height: 26px !important;
padding: 5px 10px !important;
border-radius: 7px !important;
}
.cf-sale-badge .elementor-heading-title::before {
font-size: 11.5px !important;
}
}
/* =========================================================
PRODUCT CARD - FORCE CENTERED FLOATING SALE BADGE
========================================================= */
.cf-product-card {
position: relative !important;
overflow: visible !important;
}
/* Target the actual Elementor heading widget */
.cf-product-card .cf-sale-badge.elementor-widget,
.cf-product-card .cf-sale-badge {
position: absolute !important;
top: -12px !important;
left: 50% !important;
right: auto !important;
bottom: auto !important;
transform: translateX(-50%) !important;
margin: 0 !important;
padding: 0 !important;
width: auto !important;
max-width: calc(100% - 24px) !important;
z-index: 30 !important;
pointer-events: none !important;
}
/* Prevent Elementor inner container from stretching awkwardly */
.cf-product-card .cf-sale-badge > .elementor-widget-container {
display: flex !important;
justify-content: center !important;
align-items: center !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
}
/* Badge appearance */
.cf-product-card .cf-sale-badge .elementor-heading-title {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 32px !important;
padding: 7px 15px !important;
margin: 0 !important;
width: auto !important;
background: var(--cf-copper) !important;
color: #ffffff !important;
border: 1px solid rgba(255, 255, 255, 0.55) !important;
border-radius: 9px !important;
font-size: 0 !important;
font-weight: 800 !important;
line-height: 1 !important;
white-space: nowrap !important;
box-shadow:
0 8px 18px rgba(18, 55, 42, 0.18),
0 0 18px rgba(184, 115, 51, 0.18) !important;
}
.cf-product-card .cf-sale-badge .elementor-heading-title::before {
content: "On Sale!";
font-size: 13px !important;
font-weight: 800 !important;
line-height: 1 !important;
color: #ffffff !important;
}
/* Mobile */
@media (max-width: 767px) {
.cf-product-card .cf-sale-badge.elementor-widget,
.cf-product-card .cf-sale-badge {
top: -8px !important;
}
.cf-product-card .cf-sale-badge .elementor-heading-title {
min-height: 28px !important;
padding: 6px 12px !important;
}
.cf-product-card .cf-sale-badge .elementor-heading-title::before {
font-size: 12px !important;
}
}
/* =========================================================
SINGLE PRODUCT - FLOATING SALE BADGE
========================================================= */
.cf-single-product-media {
position: relative !important;
overflow: visible !important;
}
/* Badge widget */
.cf-single-sale-badge,
.cf-single-product-media .cf-single-sale-badge.elementor-widget {
position: absolute !important;
top: -12px !important;
left: 50% !important;
right: auto !important;
bottom: auto !important;
transform: translateX(-50%) !important;
z-index: 40 !important;
width: auto !important;
max-width: calc(100% - 32px) !important;
margin: 0 !important;
padding: 0 !important;
pointer-events: none !important;
}
/* Remove Elementor widget spacing */
.cf-single-sale-badge > .elementor-widget-container {
width: auto !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
justify-content: center !important;
}
/* Badge appearance */
.cf-single-sale-badge .elementor-heading-title {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 34px !important;
padding: 8px 16px !important;
margin: 0 !important;
background: var(--cf-copper) !important;
color: #ffffff !important;
border-radius: 9px !important;
border: 1px solid rgba(255, 255, 255, 0.55) !important;
font-size: 0 !important;
font-weight: 800 !important;
line-height: 1 !important;
white-space: nowrap !important;
box-shadow:
0 8px 18px rgba(18, 55, 42, 0.18),
0 0 18px rgba(184, 115, 51, 0.18) !important;
}
/* Custom visible text */
.cf-single-sale-badge .elementor-heading-title::before {
content: "On Sale!";
color: #ffffff !important;
font-size: 13px !important;
font-weight: 800 !important;
line-height: 1 !important;
}
/* Hide empty badge if product is not on sale */
.cf-single-sale-badge .elementor-heading-title:empty,
.cf-single-sale-badge:has(.elementor-heading-title:empty) {
display: none !important;
}
/* Mobile */
@media (max-width: 767px) {
.cf-single-sale-badge,
.cf-single-product-media .cf-single-sale-badge.elementor-widget {
top: -9px !important;
max-width: calc(100% - 20px) !important;
}
.cf-single-sale-badge .elementor-heading-title {
min-height: 28px !important;
padding: 6px 12px !important;
border-radius: 7px !important;
}
.cf-single-sale-badge .elementor-heading-title::before {
font-size: 12px !important;
}
}
/* =========================================================
CHAMPIONS FURNITURE - CART PAGE FINAL CLEAN VERSION
Works with Elementor Cart widget
========================================================= */
.cf-cart-page {
width: 100% !important;
background: #ffffff !important;
}
/* Hero */
.cf-cart-hero {
width: min(100% - 32px, 1440px) !important;
margin: 28px auto 26px !important;
padding: 36px 48px !important;
background: var(--cf-cream) !important;
border: 1px solid rgba(18, 55, 42, 0.06) !important;
border-radius: 18px !important;
}
.cf-cart-hero .elementor-heading-title {
color: var(--cf-green) !important;
font-size: clamp(32px, 3vw, 48px) !important;
font-weight: 850 !important;
line-height: 1.1 !important;
margin: 0 !important;
}
/* Page content wrapper */
.cf-cart-content-wrap {
width: min(100% - 32px, 1180px) !important;
margin: 0 auto !important;
padding: 0 0 80px !important;
}
/* Main cart shell */
.cf-cart-box {
width: 100% !important;
max-width: 100% !important;
margin: 0 auto !important;
padding: 30px !important;
background: #ffffff !important;
border: 1px solid var(--cf-border) !important;
border-radius: 22px !important;
box-shadow:
0 18px 45px rgba(18, 55, 42, 0.08),
0 0 28px rgba(184, 115, 51, 0.05) !important;
overflow: visible !important;
box-sizing: border-box !important;
}
/* Kill Elementor/Woo nested card effect */
.cf-cart-box .elementor-widget-container,
.cf-cart-box .cf-cart-widget,
.cf-cart-box .elementor-widget-woocommerce-cart,
.cf-cart-box .woocommerce,
.cf-cart-box .e-cart__container,
.cf-cart-box .e-cart__column,
.cf-cart-box .e-cart__column-inner,
.cf-cart-box .e-cart-section,
.cf-cart-box .woocommerce-cart-form,
.cf-cart-box .cart-collaterals,
.cf-cart-box .cart_totals {
box-sizing: border-box !important;
max-width: 100% !important;
}
/* Main Elementor Cart layout */
.cf-cart-box .e-cart__container {
width: 100% !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) 360px !important;
gap: 30px !important;
align-items: start !important;
}
/* Left and right columns */
.cf-cart-box .e-cart__column-start,
.cf-cart-box .e-cart__column-end {
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* Left cart card */
.cf-cart-box .e-cart__column-start {
background: #ffffff !important;
border: 1px solid rgba(18, 55, 42, 0.12) !important;
border-radius: 18px !important;
padding: 24px !important;
}
/* Remove extra internal card borders */
.cf-cart-box .e-cart-section,
.cf-cart-box .woocommerce-cart-form,
.cf-cart-box .e-shop-table,
.cf-cart-box .cart-collaterals {
border: 0 !important;
box-shadow: none !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
}
/* Cart table */
.cf-cart-box table.shop_table {
width: 100% !important;
border: 0 !important;
border-collapse: separate !important;
border-spacing: 0 !important;
table-layout: auto !important;
margin: 0 !important;
}
.cf-cart-box table.shop_table thead th {
background: var(--cf-green) !important;
color: #ffffff !important;
padding: 16px 14px !important;
border: 0 !important;
font-size: 13px !important;
font-weight: 850 !important;
text-transform: uppercase !important;
letter-spacing: 0.03em !important;
}
.cf-cart-box table.shop_table thead th:first-child {
border-radius: 14px 0 0 14px !important;
}
.cf-cart-box table.shop_table thead th:last-child {
border-radius: 0 14px 14px 0 !important;
}
.cf-cart-box table.shop_table tbody td {
padding: 18px 14px !important;
border: 0 !important;
border-bottom: 1px solid rgba(18, 55, 42, 0.1) !important;
vertical-align: middle !important;
color: var(--cf-dark) !important;
}
/* Product image */
.cf-cart-box .product-thumbnail {
width: 88px !important;
min-width: 88px !important;
}
.cf-cart-box .product-thumbnail a {
width: 72px !important;
height: 72px !important;
display: block !important;
overflow: hidden !important;
border-radius: 12px !important;
background: var(--cf-cream) !important;
border: 1px solid rgba(18, 55, 42, 0.08) !important;
}
.cf-cart-box .product-thumbnail img {
width: 72px !important;
height: 72px !important;
max-width: 72px !important;
object-fit: cover !important;
object-position: center !important;
border-radius: 12px !important;
}
/* Product name */
.cf-cart-box .product-name a {
color: var(--cf-green) !important;
font-size: 15px !important;
font-weight: 850 !important;
line-height: 1.3 !important;
text-decoration: none !important;
}
.cf-cart-box .product-name a:hover {
color: var(--cf-copper) !important;
}
/* Prices */
.cf-cart-box .product-price,
.cf-cart-box .product-subtotal,
.cf-cart-box .woocommerce-Price-amount {
color: var(--cf-copper) !important;
font-weight: 850 !important;
}
/* Quantity */
.cf-cart-box .quantity .qty {
width: 78px !important;
height: 36px !important;
min-height: 36px !important;
border-radius: 999px !important;
border: 1px solid rgba(184, 115, 51, 0.35) !important;
background: #ffffff !important;
color: var(--cf-green) !important;
font-weight: 850 !important;
text-align: center !important;
box-shadow: none !important;
}
/* Remove button */
.cf-cart-box .product-remove a.remove {
width: 32px !important;
height: 32px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 999px !important;
background: rgba(185, 28, 28, 0.08) !important;
color: #b91c1c !important;
font-size: 20px !important;
font-weight: 800 !important;
line-height: 1 !important;
}
.cf-cart-box .product-remove a.remove:hover {
background: #b91c1c !important;
color: #ffffff !important;
}
/* Update cart row */
.cf-cart-box table.cart td.actions {
padding-top: 22px !important;
border-bottom: 0 !important;
}
/* Coupon area */
.cf-cart-box .coupon {
width: 100% !important;
margin-top: 20px !important;
padding: 16px !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
flex-wrap: wrap !important;
background: #ffffff !important;
border: 1px solid rgba(18, 55, 42, 0.12) !important;
border-radius: 16px !important;
}
.cf-cart-box .coupon input.input-text {
width: 220px !important;
height: 44px !important;
border: 1px solid var(--cf-border) !important;
border-radius: 999px !important;
padding: 0 16px !important;
color: var(--cf-green) !important;
font-weight: 700 !important;
box-shadow: none !important;
}
/* Buttons */
.cf-cart-box .button,
.cf-cart-box button.button,
.cf-cart-box input.button,
.cf-cart-box .checkout-button {
min-height: 44px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 22px !important;
border-radius: 999px !important;
background: var(--cf-copper) !important;
color: #ffffff !important;
border: 1px solid var(--cf-copper) !important;
font-size: 14px !important;
font-weight: 850 !important;
line-height: 1 !important;
text-decoration: none !important;
opacity: 1 !important;
}
.cf-cart-box .button:hover,
.cf-cart-box button.button:hover,
.cf-cart-box input.button:hover,
.cf-cart-box .checkout-button:hover {
background: var(--cf-green) !important;
border-color: var(--cf-green) !important;
color: #ffffff !important;
}
/* Right totals card */
.cf-cart-box .e-cart__column-end {
background: transparent !important;
}
.cf-cart-box .cart_totals,
.cf-cart-box .e-cart__column-end .e-cart-section {
width: 100% !important;
padding: 26px !important;
background: var(--cf-cream) !important;
border: 1px solid rgba(18, 55, 42, 0.1) !important;
border-radius: 18px !important;
box-shadow: 0 12px 28px rgba(18, 55, 42, 0.06) !important;
}
.cf-cart-box .cart_totals h2,
.cf-cart-box .e-cart__column-end h2 {
color: var(--cf-green) !important;
font-size: 25px !important;
font-weight: 850 !important;
line-height: 1.2 !important;
margin: 0 0 22px !important;
}
/* Totals table */
.cf-cart-box .cart_totals table {
width: 100% !important;
background: #ffffff !important;
border-radius: 12px !important;
overflow: hidden !important;
margin-bottom: 20px !important;
}
.cf-cart-box .cart_totals th,
.cf-cart-box .cart_totals td {
padding: 16px 15px !important;
border: 0 !important;
border-bottom: 1px solid rgba(18, 55, 42, 0.1) !important;
color: var(--cf-dark) !important;
}
.cf-cart-box .cart_totals th {
color: var(--cf-green) !important;
font-weight: 850 !important;
}
.cf-cart-box .cart_totals .order-total th,
.cf-cart-box .cart_totals .order-total td,
.cf-cart-box .cart_totals .order-total .woocommerce-Price-amount {
color: var(--cf-copper) !important;
font-size: 18px !important;
font-weight: 900 !important;
}
.cf-cart-box .wc-proceed-to-checkout {
padding: 0 !important;
}
.cf-cart-box .wc-proceed-to-checkout .checkout-button {
width: 100% !important;
min-height: 54px !important;
}
/* Tablet */
@media (max-width: 1024px) {
.cf-cart-hero {
width: calc(100% - 28px) !important;
margin: 22px auto !important;
padding: 28px 24px !important;
}
.cf-cart-content-wrap {
width: calc(100% - 28px) !important;
padding-bottom: 60px !important;
}
.cf-cart-box {
padding: 22px !important;
}
.cf-cart-box .e-cart__container {
grid-template-columns: 1fr !important;
gap: 24px !important;
}
}
/* Mobile */
@media (max-width: 767px) {
.cf-cart-hero {
width: calc(100% - 20px) !important;
margin: 16px auto !important;
padding: 22px 18px !important;
border-radius: 14px !important;
}
.cf-cart-hero .elementor-heading-title {
font-size: 28px !important;
}
.cf-cart-content-wrap {
width: 100% !important;
padding: 0 8px 42px !important;
}
.cf-cart-box {
padding: 12px !important;
border-radius: 16px !important;
}
.cf-cart-box .e-cart__column-start {
padding: 14px !important;
border-radius: 14px !important;
}
.cf-cart-box table.shop_table thead {
display: none !important;
}
.cf-cart-box table.shop_table,
.cf-cart-box table.shop_table tbody,
.cf-cart-box table.shop_table tr,
.cf-cart-box table.shop_table td {
display: block !important;
width: 100% !important;
}
.cf-cart-box table.shop_table tr.cart_item {
position: relative !important;
margin-bottom: 14px !important;
padding: 14px !important;
border: 1px solid rgba(18, 55, 42, 0.1) !important;
border-radius: 14px !important;
background: #ffffff !important;
}
.cf-cart-box table.shop_table tbody td {
border: 0 !important;
padding: 8px 0 !important;
}
.cf-cart-box .product-remove {
position: absolute !important;
top: 10px !important;
right: 10px !important;
width: auto !important;
padding: 0 !important;
}
.cf-cart-box .product-thumbnail,
.cf-cart-box .product-thumbnail a {
width: 100% !important;
height: 190px !important;
}
.cf-cart-box .product-thumbnail img {
width: 100% !important;
max-width: 100% !important;
height: 190px !important;
}
.cf-cart-box .coupon {
display: grid !important;
grid-template-columns: 1fr !important;
padding: 14px !important;
}
.cf-cart-box .coupon input.input-text,
.cf-cart-box .coupon .button,
.cf-cart-box table.cart td.actions > .button {
width: 100% !important;
}
.cf-cart-box .cart_totals,
.cf-cart-box .e-cart__column-end .e-cart-section {
padding: 18px !important;
border-radius: 14px !important;
}
}
/* =========================================================
CART PAGE - TABLET/MOBILE PRODUCT CARD FIX
Keeps desktop layout intact, fixes stacked mobile cart rows
========================================================= */
@media (max-width: 1024px) {
/* Stack cart and totals */
.cf-cart-box .e-cart__container {
grid-template-columns: 1fr !important;
gap: 22px !important;
}
.cf-cart-box .e-cart__column-start,
.cf-cart-box .e-cart__column-end {
width: 100% !important;
max-width: 100% !important;
}
/* Remove the table header on tablet/mobile */
.cf-cart-box table.shop_table thead {
display: none !important;
}
.cf-cart-box table.shop_table,
.cf-cart-box table.shop_table tbody {
display: block !important;
width: 100% !important;
}
/* Each cart item becomes a clean product card */
.cf-cart-box table.shop_table tr.cart_item {
display: grid !important;
grid-template-columns: 92px minmax(0, 1fr) 34px !important;
grid-template-areas:
"thumb name remove"
"thumb price remove"
"thumb qty remove"
"thumb subtotal remove" !important;
gap: 8px 14px !important;
width: 100% !important;
margin: 0 0 14px !important;
padding: 14px !important;
background: #ffffff !important;
border: 1px solid rgba(18, 55, 42, 0.1) !important;
border-radius: 16px !important;
box-shadow: 0 8px 20px rgba(18, 55, 42, 0.045) !important;
}
.cf-cart-box table.shop_table tr.cart_item td {
display: flex !important;
width: auto !important;
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
vertical-align: middle !important;
text-align: left !important;
}
/* Kill WooCommerce's default mobile labels */
.cf-cart-box table.shop_table tr.cart_item td::before {
display: none !important;
content: none !important;
}
/* Thumbnail */
.cf-cart-box td.product-thumbnail {
grid-area: thumb !important;
align-self: start !important;
width: 92px !important;
min-width: 92px !important;
}
.cf-cart-box td.product-thumbnail a {
width: 92px !important;
height: 92px !important;
display: block !important;
border-radius: 14px !important;
overflow: hidden !important;
background: var(--cf-cream) !important;
border: 1px solid rgba(18, 55, 42, 0.08) !important;
}
.cf-cart-box td.product-thumbnail img {
width: 92px !important;
height: 92px !important;
max-width: 92px !important;
object-fit: cover !important;
object-position: center !important;
border-radius: 14px !important;
}
/* Product name */
.cf-cart-box td.product-name {
grid-area: name !important;
align-items: flex-start !important;
padding-right: 4px !important;
}
.cf-cart-box td.product-name a {
font-size: 15px !important;
line-height: 1.25 !important;
font-weight: 850 !important;
color: var(--cf-green) !important;
text-align: left !important;
}
/* Price row */
.cf-cart-box td.product-price {
grid-area: price !important;
justify-content: space-between !important;
align-items: center !important;
gap: 10px !important;
}
.cf-cart-box td.product-price::before {
content: "Price:" !important;
display: inline-block !important;
color: var(--cf-dark) !important;
font-weight: 850 !important;
font-size: 13px !important;
}
/* Quantity row */
.cf-cart-box td.product-quantity {
grid-area: qty !important;
justify-content: space-between !important;
align-items: center !important;
gap: 10px !important;
}
.cf-cart-box td.product-quantity::before {
content: "Quantity:" !important;
display: inline-block !important;
color: var(--cf-dark) !important;
font-weight: 850 !important;
font-size: 13px !important;
}
/* Subtotal row */
.cf-cart-box td.product-subtotal {
grid-area: subtotal !important;
justify-content: space-between !important;
align-items: center !important;
gap: 10px !important;
}
.cf-cart-box td.product-subtotal::before {
content: "Subtotal:" !important;
display: inline-block !important;
color: var(--cf-dark) !important;
font-weight: 850 !important;
font-size: 13px !important;
}
/* Remove button */
.cf-cart-box td.product-remove {
grid-area: remove !important;
justify-content: flex-end !important;
align-items: flex-start !important;
}
.cf-cart-box .product-remove a.remove {
position: static !important;
width: 30px !important;
height: 30px !important;
min-width: 30px !important;
margin: 0 !important;
}
/* Quantity input */
.cf-cart-box .quantity .qty {
width: 68px !important;
height: 34px !important;
min-height: 34px !important;
}
/* Coupon and update button */
.cf-cart-box table.cart td.actions {
display: block !important;
width: 100% !important;
padding-top: 12px !important;
}
.cf-cart-box .coupon {
margin-top: 14px !important;
}
/* Totals should be full-width below products */
.cf-cart-box .cart_totals,
.cf-cart-box .e-cart__column-end .e-cart-section {
width: 100% !important;
max-width: 100% !important;
}
}
/* Small mobile refinement */
@media (max-width: 480px) {
.cf-cart-box {
padding: 10px !important;
}
.cf-cart-box .e-cart__column-start {
padding: 12px !important;
}
.cf-cart-box table.shop_table tr.cart_item {
grid-template-columns: 84px minmax(0, 1fr) 30px !important;
gap: 7px 11px !important;
padding: 12px !important;
border-radius: 14px !important;
}
.cf-cart-box td.product-thumbnail,
.cf-cart-box td.product-thumbnail a,
.cf-cart-box td.product-thumbnail img {
width: 84px !important;
height: 84px !important;
max-width: 84px !important;
min-width: 84px !important;
}
.cf-cart-box td.product-name a {
font-size: 14px !important;
}
.cf-cart-box td.product-price::before,
.cf-cart-box td.product-quantity::before,
.cf-cart-box td.product-subtotal::before {
font-size: 12.5px !important;
}
.cf-cart-box .woocommerce-Price-amount {
font-size: 13px !important;
}
.cf-cart-box .coupon {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 10px !important;
}
.cf-cart-box .coupon input.input-text,
.cf-cart-box .coupon .button,
.cf-cart-box table.cart td.actions > .button {
width: 100% !important;
}
}
/* =========================================================
CART PAGE - WHATSAPP CHECKOUT BUTTON
========================================================= */
.cf-cart-whatsapp-checkout {
width: 100% !important;
min-height: 54px !important;
margin-top: 12px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 9px !important;
border-radius: 999px !important;
background: var(--cf-whatsapp, #25d366) !important;
color: #ffffff !important;
border: 1px solid var(--cf-whatsapp, #25d366) !important;
font-size: 15px !important;
font-weight: 900 !important;
line-height: 1 !important;
text-decoration: none !important;
box-shadow: 0 8px 20px rgba(37, 211, 102, 0.22) !important;
}
.cf-cart-whatsapp-checkout:hover,
.cf-cart-whatsapp-checkout:focus {
background: var(--cf-whatsapp-dk, #128c7e) !important;
border-color: var(--cf-whatsapp-dk, #128c7e) !important;
color: #ffffff !important;
transform: translateY(-1px);
}
.cf-cart-whatsapp-icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
color: currentColor !important;
}
.cf-cart-whatsapp-icon svg {
display: block !important;
}
/* =========================================================
CHAMPIONS FURNITURE - CLEAN CHECKOUT PAGE
Structure:
cf-checkout-page
├── cf-checkout-hero
│ └── cf-checkout-title
└── cf-checkout-wrap
└── cf-checkout-widget
========================================================= */
.cf-checkout-page {
width: 100% !important;
background: #ffffff !important;
}
/* Heading container */
.cf-checkout-hero {
width: min(100% - 32px, 1440px) !important;
margin: 28px auto 26px !important;
padding: 36px 48px !important;
background: var(--cf-cream) !important;
border: 1px solid rgba(18, 55, 42, 0.06) !important;
border-radius: 18px !important;
}
/* Heading widget */
.cf-checkout-title .elementor-heading-title,
.cf-checkout-hero .elementor-heading-title {
color: var(--cf-green) !important;
font-size: clamp(34px, 3.2vw, 52px) !important;
font-weight: 850 !important;
line-height: 1.1 !important;
margin: 0 !important;
}
/* Checkout container */
.cf-checkout-wrap {
width: min(100% - 32px, 1180px) !important;
margin: 0 auto 80px !important;
padding: 30px !important;
background: #ffffff !important;
border: 1px solid var(--cf-border) !important;
border-radius: 22px !important;
box-shadow:
0 18px 45px rgba(18, 55, 42, 0.08),
0 0 28px rgba(184, 115, 51, 0.05) !important;
box-sizing: border-box !important;
overflow: visible !important;
}
/* Checkout widget reset */
.cf-checkout-widget,
.cf-checkout-widget .elementor-widget-container,
.cf-checkout-widget .woocommerce,
.cf-checkout-widget form.checkout {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Let Elementor Checkout widget keep its own two-column layout */
.cf-checkout-widget form.checkout {
margin: 0 !important;
}
/* Billing + order cards */
.cf-checkout-widget .woocommerce-billing-fields,
.cf-checkout-widget .woocommerce-additional-fields,
.cf-checkout-widget #order_review {
border-radius: 18px !important;
}
/* Section headings */
.cf-checkout-widget h2,
.cf-checkout-widget h3,
.cf-checkout-widget #order_review_heading {
color: var(--cf-green) !important;
font-size: 24px !important;
font-weight: 850 !important;
line-height: 1.2 !important;
}
/* Labels */
.cf-checkout-widget label {
color: var(--cf-green) !important;
font-size: 14px !important;
font-weight: 800 !important;
}
/* Inputs */
.cf-checkout-widget input.input-text,
.cf-checkout-widget input[type="text"],
.cf-checkout-widget input[type="email"],
.cf-checkout-widget input[type="tel"],
.cf-checkout-widget textarea,
.cf-checkout-widget select,
.cf-checkout-widget .select2-selection {
min-height: 48px !important;
border: 1px solid var(--cf-border) !important;
border-radius: 12px !important;
background: #ffffff !important;
color: var(--cf-green) !important;
padding: 0 14px !important;
font-size: 14px !important;
font-weight: 600 !important;
box-shadow: none !important;
}
.cf-checkout-widget textarea {
min-height: 110px !important;
padding-top: 12px !important;
}
.cf-checkout-widget input:focus,
.cf-checkout-widget textarea:focus,
.cf-checkout-widget select:focus,
.cf-checkout-widget .select2-container--open .select2-selection {
outline: none !important;
border-color: var(--cf-copper) !important;
box-shadow: 0 0 0 3px rgba(184, 115, 51, 0.13) !important;
}
/* Order table */
.cf-checkout-widget table.shop_table {
border: 0 !important;
border-radius: 14px !important;
overflow: hidden !important;
}
.cf-checkout-widget table.shop_table th,
.cf-checkout-widget table.shop_table td {
border-color: rgba(18, 55, 42, 0.1) !important;
color: var(--cf-dark) !important;
font-size: 14px !important;
}
.cf-checkout-widget table.shop_table th,
.cf-checkout-widget table.shop_table .product-name {
color: var(--cf-green) !important;
font-weight: 850 !important;
}
.cf-checkout-widget table.shop_table .woocommerce-Price-amount {
color: var(--cf-copper) !important;
font-weight: 900 !important;
}
/* Payment box */
.cf-checkout-widget #payment {
background: #ffffff !important;
border: 1px solid rgba(18, 55, 42, 0.1) !important;
border-radius: 14px !important;
padding: 16px !important;
}
/* Place order button */
.cf-checkout-widget #place_order {
width: 100% !important;
min-height: 54px !important;
border-radius: 999px !important;
background: var(--cf-copper) !important;
color: #ffffff !important;
border: 1px solid var(--cf-copper) !important;
font-size: 15px !important;
font-weight: 900 !important;
}
.cf-checkout-widget #place_order:hover {
background: var(--cf-green) !important;
border-color: var(--cf-green) !important;
color: #ffffff !important;
}
/* Tablet */
@media (max-width: 1024px) {
.cf-checkout-hero {
width: calc(100% - 28px) !important;
margin: 22px auto !important;
padding: 28px 24px !important;
}
.cf-checkout-wrap {
width: calc(100% - 28px) !important;
padding: 22px !important;
margin-bottom: 60px !important;
}
}
/* Mobile */
@media (max-width: 767px) {
.cf-checkout-hero {
width: calc(100% - 20px) !important;
margin: 16px auto !important;
padding: 22px 18px !important;
border-radius: 14px !important;
}
.cf-checkout-title .elementor-heading-title,
.cf-checkout-hero .elementor-heading-title {
font-size: 30px !important;
}
.cf-checkout-wrap {
width: calc(100% - 16px) !important;
padding: 12px !important;
border-radius: 16px !important;
margin-bottom: 42px !important;
}
.cf-checkout-widget h2,
.cf-checkout-widget h3,
.cf-checkout-widget #order_review_heading {
font-size: 22px !important;
}
}
/* =========================================================
CHAMPIONS FURNITURE - CHECKOUT FORM FINAL POLISH
Add after the clean checkout CSS
========================================================= */
/* Main left and right cards */
.cf-checkout-widget .col2-set,
.cf-checkout-widget #order_review {
border: 1px solid rgba(18, 55, 42, 0.12) !important;
border-radius: 18px !important;
background: #ffffff !important;
box-shadow: 0 10px 28px rgba(18, 55, 42, 0.045) !important;
}
.cf-checkout-widget .col2-set {
padding: 34px 36px !important;
}
.cf-checkout-widget #order_review {
padding: 34px 36px !important;
background: var(--cf-cream) !important;
}
/* Section headings */
.cf-checkout-widget h3,
.cf-checkout-widget .woocommerce-billing-fields h3,
.cf-checkout-widget #order_review_heading {
color: var(--cf-green) !important;
font-size: 28px !important;
font-weight: 850 !important;
line-height: 1.15 !important;
margin: 0 0 28px !important;
letter-spacing: -0.02em !important;
}
/* Form row spacing */
.cf-checkout-widget .form-row {
margin-bottom: 18px !important;
}
/* Labels */
.cf-checkout-widget label {
display: block !important;
color: var(--cf-green) !important;
font-size: 14px !important;
font-weight: 850 !important;
line-height: 1.25 !important;
margin-bottom: 8px !important;
}
.cf-checkout-widget abbr.required,
.cf-checkout-widget .required {
color: #b91c1c !important;
text-decoration: none !important;
font-weight: 900 !important;
}
/* Inputs, select, textarea */
.cf-checkout-widget input.input-text,
.cf-checkout-widget input[type="text"],
.cf-checkout-widget input[type="email"],
.cf-checkout-widget input[type="tel"],
.cf-checkout-widget input[type="number"],
.cf-checkout-widget input[type="password"],
.cf-checkout-widget textarea,
.cf-checkout-widget select,
.cf-checkout-widget .select2-selection {
width: 100% !important;
min-height: 52px !important;
border: 1px solid rgba(18, 55, 42, 0.16) !important;
border-radius: 14px !important;
background: #ffffff !important;
color: var(--cf-green) !important;
padding: 0 16px !important;
font-size: 15px !important;
font-weight: 650 !important;
line-height: 1.2 !important;
box-shadow: none !important;
transition:
border-color 0.18s ease,
box-shadow 0.18s ease,
background 0.18s ease !important;
}
.cf-checkout-widget textarea {
min-height: 118px !important;
padding-top: 14px !important;
resize: vertical !important;
}
/* Placeholder */
.cf-checkout-widget input::placeholder,
.cf-checkout-widget textarea::placeholder {
color: rgba(18, 55, 42, 0.5) !important;
opacity: 1 !important;
}
/* Focus state */
.cf-checkout-widget input:focus,
.cf-checkout-widget textarea:focus,
.cf-checkout-widget select:focus,
.cf-checkout-widget .select2-container--open .select2-selection {
outline: none !important;
border-color: var(--cf-copper) !important;
background: #ffffff !important;
box-shadow:
0 0 0 3px rgba(184, 115, 51, 0.13),
0 8px 18px rgba(18, 55, 42, 0.055) !important;
}
/* Select2 alignment */
.cf-checkout-widget .select2-selection {
display: flex !important;
align-items: center !important;
}
.cf-checkout-widget .select2-selection__rendered {
color: var(--cf-green) !important;
line-height: 52px !important;
padding-left: 0 !important;
padding-right: 34px !important;
font-weight: 650 !important;
}
.cf-checkout-widget .select2-selection__arrow {
height: 52px !important;
right: 10px !important;
}
/* Order table card */
.cf-checkout-widget table.shop_table {
background: #ffffff !important;
border-radius: 16px !important;
overflow: hidden !important;
border: 1px solid rgba(18, 55, 42, 0.08) !important;
}
.cf-checkout-widget table.shop_table th,
.cf-checkout-widget table.shop_table td {
padding: 17px 16px !important;
border-bottom: 1px solid rgba(18, 55, 42, 0.09) !important;
vertical-align: top !important;
}
.cf-checkout-widget table.shop_table tr:last-child th,
.cf-checkout-widget table.shop_table tr:last-child td {
border-bottom: 0 !important;
}
.cf-checkout-widget table.shop_table th {
color: var(--cf-green) !important;
font-weight: 900 !important;
}
.cf-checkout-widget table.shop_table .product-name {
color: var(--cf-green) !important;
font-weight: 850 !important;
line-height: 1.35 !important;
}
.cf-checkout-widget table.shop_table .woocommerce-Price-amount {
color: var(--cf-copper) !important;
font-weight: 900 !important;
}
.cf-checkout-widget table.shop_table .order-total th,
.cf-checkout-widget table.shop_table .order-total td,
.cf-checkout-widget table.shop_table .order-total .woocommerce-Price-amount {
font-size: 18px !important;
font-weight: 950 !important;
}
/* Payment area */
.cf-checkout-widget #payment {
margin-top: 20px !important;
background: #ffffff !important;
border: 1px solid rgba(18, 55, 42, 0.1) !important;
border-radius: 16px !important;
padding: 18px !important;
}
.cf-checkout-widget #payment ul.payment_methods {
padding: 0 0 16px !important;
margin: 0 0 16px !important;
border-bottom: 1px solid rgba(18, 55, 42, 0.1) !important;
}
.cf-checkout-widget #payment ul.payment_methods li {
color: var(--cf-green) !important;
font-weight: 800 !important;
line-height: 1.5 !important;
}
.cf-checkout-widget #payment div.payment_box {
background: var(--cf-cream) !important;
color: var(--cf-dark) !important;
border-radius: 13px !important;
font-size: 14px !important;
line-height: 1.55 !important;
}
.cf-checkout-widget #payment div.payment_box::before {
border-bottom-color: var(--cf-cream) !important;
}
/* Terms text */
.cf-checkout-widget .woocommerce-terms-and-conditions-wrapper {
color: rgba(29, 38, 49, 0.76) !important;
font-size: 13.5px !important;
line-height: 1.55 !important;
}
.cf-checkout-widget .woocommerce-terms-and-conditions-wrapper a {
color: var(--cf-copper) !important;
font-weight: 850 !important;
}
/* Place order button */
.cf-checkout-widget #place_order {
width: 100% !important;
min-height: 56px !important;
margin-top: 14px !important;
border-radius: 999px !important;
background: var(--cf-copper) !important;
color: #ffffff !important;
border: 1px solid var(--cf-copper) !important;
font-size: 15px !important;
font-weight: 950 !important;
letter-spacing: -0.01em !important;
box-shadow: 0 10px 22px rgba(184, 115, 51, 0.2) !important;
transition:
background 0.18s ease,
border-color 0.18s ease,
transform 0.18s ease,
box-shadow 0.18s ease !important;
}
.cf-checkout-widget #place_order:hover,
.cf-checkout-widget #place_order:focus {
background: var(--cf-green) !important;
border-color: var(--cf-green) !important;
color: #ffffff !important;
transform: translateY(-1px);
box-shadow: 0 12px 26px rgba(18, 55, 42, 0.22) !important;
}
/* Notices */
.cf-checkout-widget .woocommerce-info,
.cf-checkout-widget .woocommerce-message {
background: var(--cf-cream) !important;
color: var(--cf-green) !important;
border-top-color: var(--cf-copper) !important;
border-radius: 14px !important;
font-weight: 700 !important;
}
.cf-checkout-widget .woocommerce-error {
border-radius: 14px !important;
}
/* Mobile refinement */
@media (max-width: 767px) {
.cf-checkout-widget .col2-set,
.cf-checkout-widget #order_review {
padding: 18px !important;
border-radius: 15px !important;
}
.cf-checkout-widget h3,
.cf-checkout-widget .woocommerce-billing-fields h3,
.cf-checkout-widget #order_review_heading {
font-size: 23px !important;
margin-bottom: 22px !important;
}
.cf-checkout-widget input.input-text,
.cf-checkout-widget input[type="text"],
.cf-checkout-widget input[type="email"],
.cf-checkout-widget input[type="tel"],
.cf-checkout-widget textarea,
.cf-checkout-widget select,
.cf-checkout-widget .select2-selection {
min-height: 48px !important;
border-radius: 12px !important;
font-size: 14px !important;
}
.cf-checkout-widget table.shop_table th,
.cf-checkout-widget table.shop_table td {
padding: 14px 12px !important;
font-size: 13.5px !important;
}
.cf-checkout-widget #place_order {
min-height: 52px !important;
}
}
/* =========================================================
CHECKOUT PAGE - COUPON + PAYMENT FINAL POLISH
Add after the clean checkout/form CSS
========================================================= */
/* Coupon notice box */
.cf-checkout-widget .woocommerce-form-coupon-toggle {
margin: 0 0 24px !important;
}
.cf-checkout-widget .woocommerce-form-coupon-toggle .woocommerce-info {
display: flex !important;
align-items: center !important;
gap: 6px !important;
min-height: 54px !important;
padding: 16px 20px !important;
background: var(--cf-cream) !important;
border: 1px solid rgba(18, 55, 42, 0.1) !important;
border-top: 0 !important;
border-radius: 14px !important;
color: rgba(29, 38, 49, 0.78) !important;
font-size: 15px !important;
font-weight: 650 !important;
line-height: 1.4 !important;
}
.cf-checkout-widget .woocommerce-form-coupon-toggle .woocommerce-info::before {
display: none !important;
}
.cf-checkout-widget .woocommerce-form-coupon-toggle .showcoupon {
color: var(--cf-copper) !important;
font-weight: 850 !important;
text-decoration: none !important;
}
.cf-checkout-widget .woocommerce-form-coupon-toggle .showcoupon:hover {
color: var(--cf-green) !important;
}
/* Coupon form card */
.cf-checkout-widget form.checkout_coupon,
.cf-checkout-widget .woocommerce-form-coupon {
margin: 0 0 26px !important;
padding: 22px !important;
background: #ffffff !important;
border: 1px solid rgba(18, 55, 42, 0.12) !important;
border-radius: 16px !important;
box-shadow: 0 10px 26px rgba(18, 55, 42, 0.045) !important;
}
.cf-checkout-widget form.checkout_coupon p:first-child {
margin: 0 0 14px !important;
color: var(--cf-green) !important;
font-size: 15px !important;
font-weight: 850 !important;
line-height: 1.4 !important;
}
/* Coupon form layout */
.cf-checkout-widget form.checkout_coupon .form-row {
margin: 0 !important;
padding: 0 !important;
}
.cf-checkout-widget form.checkout_coupon .form-row-first {
width: calc(100% - 150px) !important;
float: left !important;
padding-right: 12px !important;
}
.cf-checkout-widget form.checkout_coupon .form-row-last {
width: 150px !important;
float: right !important;
}
.cf-checkout-widget form.checkout_coupon::after {
content: "" !important;
display: block !important;
clear: both !important;
}
/* Coupon input */
.cf-checkout-widget form.checkout_coupon input.input-text {
width: 100% !important;
min-height: 50px !important;
border-radius: 999px !important;
border: 1px solid rgba(18, 55, 42, 0.16) !important;
background: #ffffff !important;
color: var(--cf-green) !important;
padding: 0 18px !important;
font-size: 15px !important;
font-weight: 700 !important;
}
/* Coupon button */
.cf-checkout-widget form.checkout_coupon button.button {
width: 100% !important;
min-height: 50px !important;
border-radius: 999px !important;
background: var(--cf-copper) !important;
border: 1px solid var(--cf-copper) !important;
color: #ffffff !important;
font-size: 14px !important;
font-weight: 900 !important;
}
.cf-checkout-widget form.checkout_coupon button.button:hover,
.cf-checkout-widget form.checkout_coupon button.button:focus {
background: var(--cf-green) !important;
border-color: var(--cf-green) !important;
color: #ffffff !important;
}
/* Remove ugly browser focus outline on coupon link, replace with brand focus */
.cf-checkout-widget .showcoupon:focus {
outline: none !important;
box-shadow: 0 0 0 3px rgba(184, 115, 51, 0.16) !important;
border-radius: 6px !important;
}
/* Payment method card */
.cf-checkout-widget #payment {
margin-top: 24px !important;
padding: 20px !important;
background: #ffffff !important;
border: 1px solid rgba(18, 55, 42, 0.12) !important;
border-radius: 18px !important;
box-shadow: 0 10px 26px rgba(18, 55, 42, 0.045) !important;
}
/* Payment methods list */
.cf-checkout-widget #payment ul.payment_methods {
padding: 0 0 16px !important;
margin: 0 0 18px !important;
border-bottom: 1px solid rgba(18, 55, 42, 0.1) !important;
}
.cf-checkout-widget #payment ul.payment_methods li {
margin: 0 !important;
padding: 0 !important;
color: var(--cf-green) !important;
font-size: 15px !important;
font-weight: 850 !important;
}
/* Radio button */
.cf-checkout-widget #payment input[type="radio"] {
accent-color: var(--cf-copper) !important;
margin-right: 8px !important;
}
/* Direct bank transfer description */
.cf-checkout-widget #payment div.payment_box {
margin: 14px 0 0 !important;
padding: 16px !important;
background: var(--cf-cream) !important;
border: 1px solid rgba(18, 55, 42, 0.08) !important;
border-radius: 14px !important;
color: rgba(29, 38, 49, 0.78) !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1.55 !important;
}
.cf-checkout-widget #payment div.payment_box::before {
border-bottom-color: var(--cf-cream) !important;
}
/* Place order spacing after payment details */
.cf-checkout-widget .place-order {
margin-top: 18px !important;
}
/* Mobile coupon/payment refinement */
@media (max-width: 767px) {
.cf-checkout-widget .woocommerce-form-coupon-toggle .woocommerce-info {
align-items: flex-start !important;
flex-direction: column !important;
padding: 15px 16px !important;
font-size: 14px !important;
}
.cf-checkout-widget form.checkout_coupon,
.cf-checkout-widget .woocommerce-form-coupon {
padding: 16px !important;
border-radius: 14px !important;
}
.cf-checkout-widget form.checkout_coupon .form-row-first,
.cf-checkout-widget form.checkout_coupon .form-row-last {
width: 100% !important;
float: none !important;
padding-right: 0 !important;
}
.cf-checkout-widget form.checkout_coupon .form-row-first {
margin-bottom: 10px !important;
}
.cf-checkout-widget form.checkout_coupon input.input-text,
.cf-checkout-widget form.checkout_coupon button.button {
min-height: 48px !important;
}
.cf-checkout-widget #payment {
padding: 16px !important;
border-radius: 14px !important;
}
.cf-checkout-widget #payment div.payment_box {
padding: 14px !important;
font-size: 13.5px !important;
}
}
/* =========================================================
CHECKOUT PAGE - MOBILE FINAL REFINEMENT
Keeps desktop layout intact, cleans iPhone/small mobile view
========================================================= */
@media (max-width: 767px) {
/* Page spacing */
.cf-checkout-page {
overflow-x: hidden !important;
}
/* Heading box */
.cf-checkout-hero {
width: calc(100% - 24px) !important;
margin: 14px auto 18px !important;
padding: 24px 22px !important;
border-radius: 14px !important;
}
.cf-checkout-title .elementor-heading-title,
.cf-checkout-hero .elementor-heading-title {
font-size: 34px !important;
line-height: 1.08 !important;
}
/* Main checkout wrapper: reduce nested-card feel on mobile */
.cf-checkout-wrap {
width: calc(100% - 20px) !important;
margin: 0 auto 42px !important;
padding: 10px !important;
border-radius: 16px !important;
box-shadow: 0 12px 30px rgba(18, 55, 42, 0.06) !important;
overflow: visible !important;
}
/* Billing/order cards */
.cf-checkout-widget .col2-set,
.cf-checkout-widget #order_review {
width: 100% !important;
padding: 20px !important;
border-radius: 15px !important;
}
/* Headings */
.cf-checkout-widget h2,
.cf-checkout-widget h3,
.cf-checkout-widget #order_review_heading,
.cf-checkout-widget .woocommerce-billing-fields h3 {
font-size: 24px !important;
line-height: 1.15 !important;
margin-bottom: 22px !important;
}
/* Form row spacing */
.cf-checkout-widget .form-row {
margin-bottom: 17px !important;
}
/* Labels */
.cf-checkout-widget label {
font-size: 13.5px !important;
line-height: 1.25 !important;
margin-bottom: 7px !important;
}
/* Inputs */
.cf-checkout-widget input.input-text,
.cf-checkout-widget input[type="text"],
.cf-checkout-widget input[type="email"],
.cf-checkout-widget input[type="tel"],
.cf-checkout-widget input[type="number"],
.cf-checkout-widget input[type="password"],
.cf-checkout-widget textarea,
.cf-checkout-widget select,
.cf-checkout-widget .select2-selection {
width: 100% !important;
max-width: 100% !important;
min-height: 50px !important;
border-radius: 13px !important;
padding-left: 16px !important;
padding-right: 16px !important;
font-size: 14px !important;
font-weight: 650 !important;
}
.cf-checkout-widget textarea {
min-height: 105px !important;
padding-top: 13px !important;
}
/* Prevent select2 from cutting text */
.cf-checkout-widget .select2-selection__rendered {
line-height: 50px !important;
padding-left: 0 !important;
padding-right: 34px !important;
font-size: 14px !important;
}
.cf-checkout-widget .select2-selection__arrow {
height: 50px !important;
right: 10px !important;
}
/* Coupon box on mobile */
.cf-checkout-widget .woocommerce-form-coupon-toggle .woocommerce-info {
width: 100% !important;
padding: 15px 16px !important;
border-radius: 14px !important;
font-size: 14px !important;
}
.cf-checkout-widget form.checkout_coupon {
padding: 16px !important;
border-radius: 14px !important;
}
.cf-checkout-widget form.checkout_coupon .form-row-first,
.cf-checkout-widget form.checkout_coupon .form-row-last {
width: 100% !important;
float: none !important;
padding-right: 0 !important;
}
.cf-checkout-widget form.checkout_coupon .form-row-first {
margin-bottom: 10px !important;
}
/* Order table */
.cf-checkout-widget table.shop_table {
border-radius: 14px !important;
}
.cf-checkout-widget table.shop_table th,
.cf-checkout-widget table.shop_table td {
padding: 14px 12px !important;
font-size: 13.5px !important;
line-height: 1.35 !important;
}
.cf-checkout-widget table.shop_table .order-total th,
.cf-checkout-widget table.shop_table .order-total td,
.cf-checkout-widget table.shop_table .order-total .woocommerce-Price-amount {
font-size: 16px !important;
}
/* Payment block */
.cf-checkout-widget #payment {
padding: 16px !important;
border-radius: 14px !important;
}
.cf-checkout-widget #payment div.payment_box {
padding: 14px !important;
font-size: 13.5px !important;
}
/* Place order button */
.cf-checkout-widget #place_order {
min-height: 52px !important;
font-size: 14px !important;
}
}
/* Extra-small phones */
@media (max-width: 380px) {
.cf-checkout-hero {
width: calc(100% - 18px) !important;
padding: 22px 18px !important;
}
.cf-checkout-wrap {
width: calc(100% - 14px) !important;
padding: 8px !important;
}
.cf-checkout-widget .col2-set,
.cf-checkout-widget #order_review {
padding: 16px !important;
}
.cf-checkout-title .elementor-heading-title,
.cf-checkout-hero .elementor-heading-title {
font-size: 31px !important;
}
.cf-checkout-widget h2,
.cf-checkout-widget h3,
.cf-checkout-widget #order_review_heading,
.cf-checkout-widget .woocommerce-billing-fields h3 {
font-size: 22px !important;
}
.cf-checkout-widget input.input-text,
.cf-checkout-widget input[type="text"],
.cf-checkout-widget input[type="email"],
.cf-checkout-widget input[type="tel"],
.cf-checkout-widget textarea,
.cf-checkout-widget select,
.cf-checkout-widget .select2-selection {
min-height: 48px !important;
font-size: 13.5px !important;
}
}
/* =========================================================
MY ACCOUNT PAGE
========================================================= */
/* Remove page / theme spacing */
body.woocommerce-account .site-main,
body.woocommerce-account .entry-content,
body.woocommerce-account .page-content {
margin: 0;
padding: 0;
}
/* ---------------------------------------------------------
Hero
--------------------------------------------------------- */
body.woocommerce-account .cf-account-hero {
background: #0f4a36;
padding: 44px max(18px, calc((100vw - 1180px) / 2));
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: center !important;
gap: 10px;
width: 100%;
}
body.woocommerce-account .cf-account-hero .elementor-heading-title {
color: #ffffff !important;
font-size: clamp(34px, 3.5vw, 52px);
font-weight: 900;
line-height: 1.05;
margin: 0;
white-space: normal;
}
body.woocommerce-account .cf-account-hero .elementor-widget-text-editor {
color: rgba(255, 255, 255, 0.7) !important;
font-size: 16px;
font-weight: 500;
line-height: 1.5;
max-width: 560px;
margin: 0;
}
body.woocommerce-account .cf-account-hero .elementor-widget-text-editor p {
color: inherit !important;
margin: 0;
}
/* ---------------------------------------------------------
Page wrapper
--------------------------------------------------------- */
body.woocommerce-account .cf-account-page {
background: #f7f3ed !important;
padding: 72px 18px 88px !important;
}
body.woocommerce-account .cf-account-shell {
width: 100% !important;
max-width: 1180px !important;
margin: 0 auto !important;
}
body.woocommerce-account .cf-account-shell,
body.woocommerce-account .cf-account-shell > .elementor-widget-container {
padding: 0;
}
body.woocommerce-account .cf-account-page .woocommerce {
width: 100%;
}
/* ---------------------------------------------------------
Logged-in: sidebar + content layout
--------------------------------------------------------- */
body.woocommerce-account .cf-account-page .woocommerce-MyAccount-navigation {
float: left !important;
width: 268px !important;
margin: 0 !important;
}
body.woocommerce-account .cf-account-page .woocommerce-MyAccount-content {
float: right !important;
width: calc(100% - 292px) !important;
min-height: 420px;
background: #ffffff !important;
border: 1px solid rgba(15, 74, 54, 0.12) !important;
border-radius: 22px !important;
padding: 38px !important;
box-shadow: 0 18px 42px rgba(25, 39, 32, 0.08) !important;
overflow: hidden;
}
body.woocommerce-account .cf-account-page .woocommerce::after {
content: "";
display: table;
clear: both;
}
/* ---------------------------------------------------------
Left navigation
--------------------------------------------------------- */
body.woocommerce-account .cf-account-page .woocommerce-MyAccount-navigation ul {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
background: #ffffff !important;
border: 1px solid rgba(15, 74, 54, 0.12) !important;
border-radius: 20px !important;
overflow: hidden !important;
box-shadow: 0 18px 42px rgba(25, 39, 32, 0.08) !important;
}
body.woocommerce-account .cf-account-page .woocommerce-MyAccount-navigation li {
margin: 0 !important;
padding: 0 !important;
border-bottom: 1px solid rgba(15, 74, 54, 0.08) !important;
}
body.woocommerce-account
.cf-account-page
.woocommerce-MyAccount-navigation
li:last-child {
border-bottom: 0 !important;
}
body.woocommerce-account
.cf-account-page
.woocommerce-MyAccount-navigation
li
a {
display: flex !important;
align-items: center !important;
min-height: 54px !important;
padding: 15px 22px !important;
border-radius: 0 !important;
background: transparent !important;
color: #0f4a36 !important;
font-size: 15.5px !important;
font-weight: 800 !important;
text-decoration: none !important;
transition:
background 0.2s ease,
color 0.2s ease !important;
}
body.woocommerce-account
.cf-account-page
.woocommerce-MyAccount-navigation
li
a:hover {
background: #f7f3ed !important;
}
body.woocommerce-account
.cf-account-page
.woocommerce-MyAccount-navigation
li.is-active
a {
background: #0f4a36 !important;
color: #ffffff !important;
}
body.woocommerce-account
.cf-account-page
.woocommerce-MyAccount-navigation-link--customer-logout
a {
color: #b87333 !important;
}
body.woocommerce-account
.cf-account-page
.woocommerce-MyAccount-navigation-link--customer-logout
a:hover {
background: rgba(184, 115, 51, 0.08) !important;
color: #9c4c25 !important;
}
/* ---------------------------------------------------------
Content area
--------------------------------------------------------- */
body.woocommerce-account .cf-account-page .woocommerce-MyAccount-content > p {
color: #4d5b68 !important;
font-size: 16px !important;
line-height: 1.8 !important;
margin: 0 0 20px !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
background: transparent !important;
}
body.woocommerce-account .cf-account-page .woocommerce-MyAccount-content h2,
body.woocommerce-account .cf-account-page .woocommerce-MyAccount-content h3,
body.woocommerce-account
.cf-account-page
.woocommerce-MyAccount-content
legend {
color: #103d2f !important;
font-size: 26px !important;
font-weight: 900 !important;
line-height: 1.2 !important;
margin: 0 0 18px !important;
}
body.woocommerce-account .cf-account-page .woocommerce-MyAccount-content a {
color: #b87333 !important;
font-weight: 900 !important;
text-decoration: none !important;
}
body.woocommerce-account
.cf-account-page
.woocommerce-MyAccount-content
a:hover {
color: #0f4a36 !important;
}
/* ---------------------------------------------------------
Orders table
--------------------------------------------------------- */
body.woocommerce-account
.cf-account-page
.woocommerce-MyAccount-content
table.woocommerce-orders-table,
body.woocommerce-account
.cf-account-page
.woocommerce-MyAccount-content
table.shop_table {
width: 100% !important;
border-collapse: separate !important;
border-spacing: 0 !important;
border: 1px solid rgba(15, 74, 54, 0.14) !important;
border-radius: 16px !important;
overflow: hidden !important;
background: #ffffff !important;
margin: 0 !important;
}
body.woocommerce-account
.cf-account-page
.woocommerce-MyAccount-content
table.woocommerce-orders-table
thead
th,
body.woocommerce-account
.cf-account-page
.woocommerce-MyAccount-content
table.shop_table
thead
th {
background: #0f4a36 !important;
color: #ffffff !important;
border: 0 !important;
padding: 17px 20px !important;
font-size: 14.5px !important;
font-weight: 900 !important;
text-align: left !important;
vertical-align: middle !important;
}
/* Body cells — th covers the WooCommerce order-number column which uses | not | */
body.woocommerce-account
.cf-account-page
.woocommerce-MyAccount-content
table.woocommerce-orders-table
tbody
td,
body.woocommerce-account
.cf-account-page
.woocommerce-MyAccount-content
table.woocommerce-orders-table
tbody
th,
body.woocommerce-account
.cf-account-page
.woocommerce-MyAccount-content
table.shop_table
tbody
td {
background: #ffffff !important;
color: #4d5b68 !important;
border: 0 !important;
border-bottom: 1px solid rgba(15, 74, 54, 0.08) !important;
padding: 18px 20px !important;
font-size: 15px !important;
font-weight: 500 !important;
line-height: 1.45 !important;
text-align: left !important;
vertical-align: middle !important;
}
body.woocommerce-account
.cf-account-page
.woocommerce-MyAccount-content
table.woocommerce-orders-table
tbody
tr:last-child
td,
body.woocommerce-account
.cf-account-page
.woocommerce-MyAccount-content
table.woocommerce-orders-table
tbody
tr:last-child
th,
body.woocommerce-account
.cf-account-page
.woocommerce-MyAccount-content
table.shop_table
tbody
tr:last-child
td {
border-bottom: 0 !important;
}
body.woocommerce-account
.cf-account-page
.woocommerce-MyAccount-content
table.woocommerce-orders-table
a,
body.woocommerce-account
.cf-account-page
.woocommerce-MyAccount-content
table.shop_table
a {
color: #0f4a36 !important;
font-weight: 900 !important;
text-decoration: none !important;
}
/* View order button */
body.woocommerce-account
.cf-account-page
.woocommerce-MyAccount-content
.woocommerce-orders-table__cell-order-actions
.button,
body.woocommerce-account
.cf-account-page
.woocommerce-MyAccount-content
table.shop_table
.button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
min-height: 42px !important;
padding: 11px 22px !important;
border: 0 !important;
border-radius: 999px !important;
background: #b87333 !important;
color: #ffffff !important;
font-size: 14px !important;
font-weight: 900 !important;
text-decoration: none !important;
box-shadow: 0 8px 18px rgba(184, 115, 51, 0.22) !important;
transition: background 0.2s ease !important;
}
body.woocommerce-account
.cf-account-page
.woocommerce-MyAccount-content
.woocommerce-orders-table__cell-order-actions
.button:hover,
body.woocommerce-account
.cf-account-page
.woocommerce-MyAccount-content
table.shop_table
.button:hover {
background: #9f5f28 !important;
}
/* ---------------------------------------------------------
Addresses
--------------------------------------------------------- */
body.woocommerce-account
.cf-account-page
.woocommerce-MyAccount-content
.woocommerce-Addresses {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 24px !important;
align-items: start !important;
width: 100% !important;
margin: 28px 0 0 !important;
padding: 0 !important;
}
body.woocommerce-account
.cf-account-page
.woocommerce-MyAccount-content
.woocommerce-Address {
float: none !important;
clear: none !important;
position: static !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
background: #ffffff !important;
border: 1px solid rgba(15, 74, 54, 0.14) !important;
border-radius: 18px !important;
overflow: hidden !important;
}
body.woocommerce-account
.cf-account-page
.woocommerce-MyAccount-content
.woocommerce-Address.u-column1,
body.woocommerce-account
.cf-account-page
.woocommerce-MyAccount-content
.woocommerce-Address.col-1 {
grid-column: 1 !important;
grid-row: 1 !important;
}
body.woocommerce-account
.cf-account-page
.woocommerce-MyAccount-content
.woocommerce-Address.u-column2,
body.woocommerce-account
.cf-account-page
.woocommerce-MyAccount-content
.woocommerce-Address.col-2 {
grid-column: 2 !important;
grid-row: 1 !important;
}
body.woocommerce-account
.cf-account-page
.woocommerce-MyAccount-content
.woocommerce-Address-title {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 14px !important;
background: #f7f3ed !important;
border-bottom: 1px solid rgba(15, 74, 54, 0.12) !important;
padding: 24px 26px !important;
margin: 0 !important;
}
body.woocommerce-account
.cf-account-page
.woocommerce-MyAccount-content
.woocommerce-Address-title
h2,
body.woocommerce-account
.cf-account-page
.woocommerce-MyAccount-content
.woocommerce-Address-title
h3 {
color: #103d2f !important;
font-size: 26px !important;
font-weight: 900 !important;
line-height: 1.15 !important;
margin: 0 !important;
float: none !important;
}
body.woocommerce-account
.cf-account-page
.woocommerce-MyAccount-content
.woocommerce-Address-title
a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 38px !important;
padding: 10px 18px !important;
border-radius: 999px !important;
background: #b87333 !important;
color: #ffffff !important;
font-size: 13px !important;
font-weight: 900 !important;
text-decoration: none !important;
float: none !important;
position: static !important;
}
body.woocommerce-account
.cf-account-page
.woocommerce-MyAccount-content
.woocommerce-Address
address {
display: block !important;
background: #ffffff !important;
padding: 26px !important;
margin: 0 !important;
color: #4d5b68 !important;
font-size: 15px !important;
font-weight: 500 !important;
line-height: 1.75 !important;
font-style: normal !important;
min-height: 180px !important;
}
/* ---------------------------------------------------------
Login / Register forms (logged-out state)
--------------------------------------------------------- */
body.woocommerce-account:not(.logged-in) .cf-account-page .woocommerce {
max-width: 900px !important;
margin: 0 auto !important;
}
body.woocommerce-account:not(.logged-in) .cf-account-page h2 {
color: #103d2f !important;
font-size: clamp(30px, 3.5vw, 44px) !important;
font-weight: 900 !important;
margin: 0 0 24px !important;
}
body.woocommerce-account .cf-account-page .u-columns {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 24px !important;
}
body.woocommerce-account .cf-account-page .u-column1,
body.woocommerce-account .cf-account-page .u-column2 {
float: none !important;
width: 100% !important;
}
body.woocommerce-account .cf-account-page form.login,
body.woocommerce-account .cf-account-page form.register,
body.woocommerce-account .cf-account-page form.woocommerce-EditAccountForm,
body.woocommerce-account .cf-account-page form.woocommerce-address-fields {
background: #ffffff !important;
border: 1px solid rgba(15, 74, 54, 0.12) !important;
border-radius: 22px !important;
padding: 34px !important;
margin: 0 !important;
box-shadow: 0 18px 42px rgba(25, 39, 32, 0.08) !important;
}
/* ---------------------------------------------------------
Form fields
--------------------------------------------------------- */
body.woocommerce-account .cf-account-page .form-row {
margin: 0 0 18px !important;
padding: 0 !important;
}
body.woocommerce-account .cf-account-page label {
display: block !important;
color: #2f3c48 !important;
font-size: 14px !important;
font-weight: 900 !important;
margin-bottom: 8px !important;
}
body.woocommerce-account .cf-account-page input.input-text,
body.woocommerce-account .cf-account-page input[type="text"],
body.woocommerce-account .cf-account-page input[type="email"],
body.woocommerce-account .cf-account-page input[type="password"],
body.woocommerce-account .cf-account-page input[type="tel"],
body.woocommerce-account .cf-account-page select,
body.woocommerce-account .cf-account-page textarea {
width: 100% !important;
min-height: 52px !important;
background: #fbf8f3 !important;
border: 1px solid rgba(15, 74, 54, 0.14) !important;
border-radius: 14px !important;
padding: 13px 15px !important;
color: #2f3c48 !important;
font-size: 15px !important;
font-weight: 600 !important;
outline: none !important;
box-shadow: none !important;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease !important;
}
body.woocommerce-account .cf-account-page input:focus,
body.woocommerce-account .cf-account-page select:focus,
body.woocommerce-account .cf-account-page textarea:focus {
background: #ffffff !important;
border-color: #0f4a36 !important;
box-shadow: 0 0 0 3px rgba(15, 74, 54, 0.1) !important;
}
body.woocommerce-account .cf-account-page .lost_password a {
color: #b87333 !important;
font-weight: 900 !important;
}
/* ---------------------------------------------------------
Buttons
--------------------------------------------------------- */
body.woocommerce-account .cf-account-page .button,
body.woocommerce-account .cf-account-page button.button,
body.woocommerce-account .cf-account-page input.button,
body.woocommerce-account .cf-account-page .woocommerce-button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 48px !important;
padding: 13px 26px !important;
border: 0 !important;
border-radius: 999px !important;
background: #0f4a36 !important;
color: #ffffff !important;
font-size: 15px !important;
font-weight: 900 !important;
line-height: 1 !important;
text-decoration: none !important;
box-shadow: 0 10px 22px rgba(15, 74, 54, 0.22) !important;
transition:
background 0.2s ease,
transform 0.2s ease !important;
}
body.woocommerce-account .cf-account-page .button:hover,
body.woocommerce-account .cf-account-page button.button:hover,
body.woocommerce-account .cf-account-page input.button:hover,
body.woocommerce-account .cf-account-page .woocommerce-button:hover {
background: #0b3829 !important;
transform: translateY(-2px) !important;
}
/* ---------------------------------------------------------
Notices
--------------------------------------------------------- */
body.woocommerce-account .cf-account-page .woocommerce-message,
body.woocommerce-account .cf-account-page .woocommerce-info,
body.woocommerce-account .cf-account-page .woocommerce-error {
background: #ffffff !important;
border: 1px solid rgba(15, 74, 54, 0.12) !important;
border-left: 5px solid #0f4a36 !important;
border-radius: 14px !important;
padding: 18px 20px !important;
margin: 0 0 22px !important;
color: #3b3028 !important;
font-size: 15px !important;
font-weight: 700 !important;
line-height: 1.6 !important;
list-style: none !important;
}
body.woocommerce-account .cf-account-page .woocommerce-error {
border-left-color: #b87333 !important;
}
body.woocommerce-account .cf-account-page .woocommerce-message::before,
body.woocommerce-account .cf-account-page .woocommerce-info::before,
body.woocommerce-account .cf-account-page .woocommerce-error::before {
display: none !important;
}
/* ---------------------------------------------------------
Tablet
--------------------------------------------------------- */
@media (max-width: 1024px) {
body.woocommerce-account .cf-account-hero {
padding: 36px 18px;
gap: 8px;
}
body.woocommerce-account .cf-account-hero .elementor-heading-title {
font-size: 38px;
}
body.woocommerce-account .cf-account-page {
padding: 52px 14px 64px !important;
}
body.woocommerce-account .cf-account-page .woocommerce-MyAccount-navigation,
body.woocommerce-account .cf-account-page .woocommerce-MyAccount-content {
float: none !important;
width: 100% !important;
}
body.woocommerce-account .cf-account-page .woocommerce-MyAccount-navigation {
margin-bottom: 22px !important;
}
body.woocommerce-account
.cf-account-page
.woocommerce-MyAccount-navigation
ul {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
body.woocommerce-account
.cf-account-page
.woocommerce-MyAccount-navigation
li {
border-bottom: 0 !important;
border-right: 1px solid rgba(15, 74, 54, 0.08) !important;
}
body.woocommerce-account
.cf-account-page
.woocommerce-MyAccount-navigation
li:last-child {
border-right: 0 !important;
}
body.woocommerce-account
.cf-account-page
.woocommerce-MyAccount-navigation
li
a {
justify-content: center !important;
text-align: center !important;
min-height: 50px !important;
padding: 12px 10px !important;
}
}
/* ---------------------------------------------------------
Mobile
--------------------------------------------------------- */
@media (max-width: 767px) {
body.woocommerce-account .cf-account-hero {
padding: 28px 14px;
}
body.woocommerce-account .cf-account-hero .elementor-heading-title {
font-size: 36px;
}
body.woocommerce-account .cf-account-hero .elementor-widget-text-editor {
font-size: 15px;
}
body.woocommerce-account .cf-account-page {
padding: 34px 12px 48px !important;
}
body.woocommerce-account
.cf-account-page
.woocommerce-MyAccount-navigation
ul {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
body.woocommerce-account
.cf-account-page
.woocommerce-MyAccount-navigation
li {
border-right: 0 !important;
border-bottom: 1px solid rgba(15, 74, 54, 0.08) !important;
}
body.woocommerce-account
.cf-account-page
.woocommerce-MyAccount-navigation
li:nth-child(odd) {
border-right: 1px solid rgba(15, 74, 54, 0.08) !important;
}
body.woocommerce-account
.cf-account-page
.woocommerce-MyAccount-navigation
li
a {
min-height: 46px !important;
font-size: 13px !important;
}
body.woocommerce-account .cf-account-page .woocommerce-MyAccount-content {
padding: 22px !important;
border-radius: 18px !important;
}
body.woocommerce-account .cf-account-page .u-columns,
body.woocommerce-account .cf-account-page .woocommerce-Addresses {
grid-template-columns: 1fr !important;
}
body.woocommerce-account .cf-account-page .woocommerce-Address.u-column1,
body.woocommerce-account .cf-account-page .woocommerce-Address.u-column2,
body.woocommerce-account .cf-account-page .woocommerce-Address.col-1,
body.woocommerce-account .cf-account-page .woocommerce-Address.col-2 {
grid-column: 1 !important;
grid-row: auto !important;
}
body.woocommerce-account .cf-account-page form.login,
body.woocommerce-account .cf-account-page form.register,
body.woocommerce-account .cf-account-page form.woocommerce-EditAccountForm,
body.woocommerce-account .cf-account-page form.woocommerce-address-fields {
padding: 22px !important;
border-radius: 18px !important;
}
body.woocommerce-account .cf-account-page table.shop_table,
body.woocommerce-account .cf-account-page table.woocommerce-orders-table {
display: block !important;
overflow-x: auto !important;
white-space: nowrap !important;
}
body.woocommerce-account .cf-account-page table.shop_table th,
body.woocommerce-account .cf-account-page table.woocommerce-orders-table th,
body.woocommerce-account .cf-account-page table.shop_table td,
body.woocommerce-account .cf-account-page table.woocommerce-orders-table td {
padding: 14px !important;
font-size: 13px !important;
}
body.woocommerce-account .cf-account-page .button,
body.woocommerce-account .cf-account-page button.button,
body.woocommerce-account .cf-account-page input.button,
body.woocommerce-account .cf-account-page .woocommerce-button {
width: 100% !important;
}
body.woocommerce-account:not(.logged-in) .cf-account-page .woocommerce {
max-width: 100% !important;
}
}
/* ================================
Champions Furniture Homepage Hero
================================ */
.cf-home-page {
width: 100%;
overflow-x: hidden;
background: #ffffff;
}
.cf-home-hero {
background: linear-gradient(135deg, #ffffff 0%, #f8f3ec 100%);
padding: 70px 24px 80px;
}
.cf-home-hero-inner {
width: min(1180px, 100%);
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(420px, 0.9fr);
gap: 48px;
align-items: center;
}
.cf-home-hero-content {
max-width: 650px;
}
.cf-home-hero-content h1,
.cf-home-hero-content .elementor-heading-title {
color: #0b3d2e;
font-size: clamp(42px, 5vw, 72px);
line-height: 0.98;
letter-spacing: -0.045em;
margin: 0 0 24px;
}
.cf-home-hero-content p,
.cf-home-hero-content .elementor-widget-text-editor {
color: #111827;
font-size: 19px;
line-height: 1.65;
max-width: 620px;
}
.cf-home-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-top: 34px;
}
.cf-home-btn .elementor-button,
.cf-home-btn.elementor-widget-button .elementor-button {
min-height: 58px;
padding: 0 34px;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
box-sizing: border-box;
border-radius: 999px;
font-weight: 700;
font-size: 17px;
line-height: 1;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12);
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
background-color 0.2s ease;
}
.cf-home-btn .elementor-button:hover {
transform: translateY(-2px);
box-shadow: 0 18px 34px rgba(0, 0, 0, 0.16);
}
.cf-home-btn-primary .elementor-button {
background: #bf762d;
color: #ffffff;
}
.cf-home-btn-secondary .elementor-button {
background: #0b3d2e;
color: #ffffff;
}
.cf-home-hero-media {
position: relative;
}
.cf-home-hero-media img {
width: 100%;
height: 520px;
object-fit: cover;
border-radius: 28px;
box-shadow: 0 24px 60px rgba(11, 61, 46, 0.18);
display: block;
}
.cf-home-hero-media::before {
content: "";
position: absolute;
inset: 24px -18px -18px 24px;
background: #bf762d;
border-radius: 28px;
z-index: -1;
opacity: 0.22;
}
/* Tablet */
@media (max-width: 1024px) {
.cf-home-hero {
padding: 55px 20px 65px;
}
.cf-home-hero-inner {
grid-template-columns: 1fr;
gap: 36px;
}
.cf-home-hero-content {
max-width: 760px;
}
.cf-home-hero-media img {
height: 430px;
}
}
/* Mobile */
@media (max-width: 767px) {
.cf-home-hero {
padding: 40px 16px 50px;
}
.cf-home-hero-content h1,
.cf-home-hero-content .elementor-heading-title {
font-size: clamp(36px, 11vw, 48px);
line-height: 1.02;
}
.cf-home-hero-content p,
.cf-home-hero-content .elementor-widget-text-editor {
font-size: 16px;
line-height: 1.55;
}
.cf-home-hero-actions {
flex-direction: column;
gap: 12px;
}
.cf-home-btn,
.cf-home-btn .elementor-button {
width: 100%;
}
.cf-home-btn .elementor-button {
justify-content: center;
}
.cf-home-hero-media img {
height: 300px;
border-radius: 20px;
}
.cf-home-hero-media::before {
display: none;
}
}
/* =========================================================
HOMEPAGE — EYEBROW + SECTION HEADERS
========================================================= */
/* Eyebrow label above H1 */
.cf-home-eyebrow .elementor-heading-title {
display: inline-block !important;
background: rgba(184, 115, 51, 0.12) !important;
color: #b87333 !important;
border: 1px solid rgba(184, 115, 51, 0.38) !important;
border-radius: 999px !important;
font-size: 12.5px !important;
font-weight: 800 !important;
letter-spacing: 1px !important;
text-transform: uppercase !important;
padding: 6px 16px !important;
margin: 0 0 16px !important;
line-height: 1 !important;
}
/* Section headings used in categories, why, cta etc. */
.cf-home-section-header {
gap: 10px;
margin-bottom: 40px !important;
max-width: 1180px;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 24px;
padding-right: 24px;
}
.cf-home-section-title .elementor-heading-title {
color: #12372a !important;
font-size: clamp(28px, 3vw, 40px) !important;
font-weight: 900 !important;
line-height: 1.1 !important;
margin: 0 !important;
}
.cf-home-section-text p,
.cf-home-section-text {
color: #6b7685 !important;
font-size: 16.5px !important;
line-height: 1.65 !important;
margin: 0 !important;
max-width: 560px;
}
/* =========================================================
HOMEPAGE — TRUST STRIP
========================================================= */
.cf-home-trust-strip {
background: #f7f3ea !important;
border-top: 1px solid #d9d4c7 !important;
border-bottom: 1px solid #d9d4c7 !important;
padding: 0 !important;
width: 100% !important;
}
.cf-home-trust-item {
padding: 44px 28px 26px !important;
border-right: 1px solid rgba(18, 55, 42, 0.1) !important;
gap: 6px !important;
position: relative !important;
}
.cf-home-trust-item:last-child {
border-right: 0 !important;
}
/* Copper accent bar — absolutely positioned to stay inside the flex container boundaries */
.cf-home-trust-item::before {
content: "";
position: absolute;
top: 26px;
left: 28px;
width: 28px;
height: 4px;
background: #b87333;
border-radius: 999px;
}
.cf-home-trust-title .elementor-heading-title {
color: #12372a !important;
font-size: 15.5px !important;
font-weight: 800 !important;
line-height: 1.2 !important;
margin: 0 !important;
}
.cf-home-trust-text p,
.cf-home-trust-text {
color: #6b7685 !important;
font-size: 13.5px !important;
line-height: 1.55 !important;
margin: 0 !important;
}
/* =========================================================
HOMEPAGE — CATEGORY CARDS
========================================================= */
.cf-home-categories-section {
background: #ffffff !important;
}
.cf-home-categories-grid {
gap: 18px !important;
width: min(1180px, calc(100% - 48px)) !important;
margin: 0 auto !important;
}
.cf-home-category-card {
border-radius: 20px !important;
overflow: hidden !important;
min-height: 340px !important;
position: relative !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-end !important;
cursor: pointer;
transition:
transform 0.3s ease,
box-shadow 0.3s ease !important;
background-size: cover !important;
background-position: center !important;
}
/* Gradient overlay so text is always readable on the photo */
.cf-home-category-card::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(9, 26, 18, 0.85) 0%,
rgba(9, 26, 18, 0.3) 45%,
transparent 100%
);
border-radius: inherit;
pointer-events: none;
z-index: 1;
}
.cf-home-category-card:hover {
transform: translateY(-5px) !important;
box-shadow: 0 24px 52px rgba(18, 55, 42, 0.22) !important;
}
.cf-home-category-card-content {
position: relative !important;
z-index: 2;
padding: 22px 20px !important;
gap: 12px !important;
justify-content: flex-end !important;
}
.cf-home-category-title .elementor-heading-title {
color: #ffffff !important;
font-size: 22px !important;
font-weight: 900 !important;
line-height: 1.1 !important;
margin: 0 !important;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.cf-home-category-link .elementor-button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 10px 20px !important;
border-radius: 999px !important;
background: #b87333 !important;
color: #ffffff !important;
font-size: 13.5px !important;
font-weight: 800 !important;
border: 0 !important;
text-decoration: none !important;
transition:
background 0.2s ease,
transform 0.2s ease !important;
align-self: flex-start !important;
box-shadow: 0 4px 14px rgba(184, 115, 51, 0.35) !important;
}
.cf-home-category-link .elementor-button:hover {
background: #9f5f28 !important;
transform: translateY(-1px) !important;
}
/* =========================================================
HOMEPAGE — FEATURED PRODUCTS
========================================================= */
.cf-home-featured-section {
background: #f7f3ea !important;
}
.cf-home-featured-header {
justify-content: space-between !important;
align-items: center !important;
flex-wrap: wrap;
gap: 16px !important;
width: min(1180px, calc(100% - 48px)) !important;
margin: 0 auto 32px !important;
}
.cf-home-featured-title-wrap {
gap: 6px;
}
.cf-home-featured-title-wrap .cf-home-section-title .elementor-heading-title {
font-size: clamp(24px, 2.5vw, 34px) !important;
}
.cf-home-products {
width: min(1180px, calc(100% - 48px)) !important;
margin: 0 auto !important;
}
/* View All button — outline style on cream bg */
.cf-home-btn-outline .elementor-button {
min-height: 48px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
background: transparent !important;
color: #12372a !important;
border: 2px solid #12372a !important;
padding: 0 24px !important;
border-radius: 999px !important;
font-size: 14px !important;
font-weight: 800 !important;
line-height: 1 !important;
transition:
background 0.2s ease,
color 0.2s ease !important;
}
.cf-home-btn-outline .elementor-button:hover {
background: #12372a !important;
color: #ffffff !important;
}
/* =========================================================
HOMEPAGE — PROMO BANNER
========================================================= */
.cf-home-promo-section {
background: #12372a !important;
}
.cf-home-promo-inner {
gap: 64px !important;
align-items: center !important;
width: min(1180px, calc(100% - 48px)) !important;
margin: 0 auto !important;
}
.cf-home-promo-content {
gap: 22px !important;
}
.cf-home-promo-title .elementor-heading-title {
color: #ffffff !important;
font-size: clamp(28px, 3.2vw, 46px) !important;
font-weight: 900 !important;
line-height: 1.1 !important;
margin: 0 !important;
}
.cf-home-promo-text p,
.cf-home-promo-text {
color: rgba(255, 255, 255, 0.78) !important;
font-size: 16.5px !important;
line-height: 1.7 !important;
margin: 0 !important;
}
/* Promo "Shop Deals" button — copper on dark green */
.cf-home-promo-content .cf-home-btn-primary .elementor-button {
background: #b87333 !important;
color: #ffffff !important;
border: 0 !important;
padding: 14px 30px !important;
border-radius: 999px !important;
font-size: 15px !important;
font-weight: 800 !important;
box-shadow: 0 8px 22px rgba(184, 115, 51, 0.35) !important;
transition:
background 0.2s ease,
transform 0.2s ease !important;
}
.cf-home-promo-content .cf-home-btn-primary .elementor-button:hover {
background: #9f5f28 !important;
transform: translateY(-2px) !important;
}
.cf-home-promo-media {
border-radius: 20px !important;
overflow: hidden !important;
}
.cf-home-promo-image img {
width: 100% !important;
height: 400px !important;
object-fit: cover !important;
border-radius: 18px !important;
display: block !important;
box-shadow: 0 24px 52px rgba(0, 0, 0, 0.28) !important;
}
/* =========================================================
HOMEPAGE — WHY CHOOSE US
========================================================= */
.cf-home-why-section {
background: #ffffff !important;
}
.cf-home-why-grid {
gap: 18px !important;
width: min(1180px, calc(100% - 48px)) !important;
margin: 0 auto !important;
}
.cf-home-why-card {
background: #f7f3ea !important;
border: 1px solid #d9d4c7 !important;
border-radius: 18px !important;
padding: 46px 26px 28px !important;
gap: 10px !important;
transition:
box-shadow 0.25s ease,
transform 0.25s ease,
background 0.25s ease !important;
position: relative !important;
}
/* Copper accent bar — absolutely positioned so curved card border never clips it */
.cf-home-why-card::before {
content: "";
position: absolute;
top: 28px;
left: 26px;
width: 32px;
height: 4px;
background: #b87333;
border-radius: 999px;
}
.cf-home-why-card:hover {
background: #ffffff !important;
box-shadow: 0 14px 32px rgba(18, 55, 42, 0.1) !important;
transform: translateY(-4px) !important;
}
.cf-home-why-title .elementor-heading-title {
color: #12372a !important;
font-size: 17px !important;
font-weight: 800 !important;
line-height: 1.25 !important;
margin: 0 !important;
}
.cf-home-why-text p,
.cf-home-why-text {
color: #6b7685 !important;
font-size: 14.5px !important;
line-height: 1.65 !important;
margin: 0 !important;
}
/* =========================================================
HOMEPAGE — FINAL CTA
========================================================= */
.cf-home-final-cta {
background: #f7f3ea !important;
}
.cf-home-final-cta-inner {
align-items: center !important;
text-align: center !important;
gap: 16px !important;
max-width: 720px !important;
margin: 0 auto !important;
padding: 0 24px !important;
}
.cf-home-final-title .elementor-heading-title {
color: #12372a !important;
font-size: clamp(26px, 3vw, 42px) !important;
font-weight: 900 !important;
line-height: 1.12 !important;
margin: 0 !important;
}
.cf-home-final-text p,
.cf-home-final-text {
color: #6b7685 !important;
font-size: 16.5px !important;
line-height: 1.65 !important;
margin: 0 !important;
}
.cf-home-final-actions {
justify-content: center !important;
gap: 14px !important;
flex-wrap: wrap !important;
margin-top: 8px !important;
}
/* WhatsApp = green primary, Call = outline secondary — equal height via min-height + box-sizing */
.cf-home-final-actions .cf-home-btn-primary .elementor-button,
.cf-home-final-actions .cf-home-btn-secondary .elementor-button {
min-height: 52px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
border-radius: 999px !important;
font-size: 15px !important;
font-weight: 800 !important;
line-height: 1 !important;
}
.cf-home-final-actions .cf-home-btn-primary .elementor-button {
background: #25d366 !important;
color: #ffffff !important;
border: 0 !important;
padding: 0 30px !important;
box-shadow: 0 8px 22px rgba(37, 211, 102, 0.3) !important;
transition:
background 0.2s ease,
transform 0.2s ease !important;
}
.cf-home-final-actions .cf-home-btn-primary .elementor-button:hover {
background: #128c7e !important;
transform: translateY(-2px) !important;
}
.cf-home-final-actions .cf-home-btn-secondary .elementor-button {
background: transparent !important;
color: #12372a !important;
border: 2px solid #12372a !important;
padding: 0 28px !important;
transition:
background 0.2s ease,
color 0.2s ease !important;
}
.cf-home-final-actions .cf-home-btn-secondary .elementor-button:hover {
background: #12372a !important;
color: #ffffff !important;
}
/* =========================================================
HOMEPAGE — RESPONSIVE
========================================================= */
@media (max-width: 1024px) {
/* Trust strip: 2×2 on tablet */
.cf-home-trust-strip {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
}
.cf-home-trust-item:nth-child(2) {
border-right: 0 !important;
}
.cf-home-trust-item:nth-child(1),
.cf-home-trust-item:nth-child(2) {
border-bottom: 1px solid rgba(18, 55, 42, 0.1) !important;
}
.cf-home-trust-item:nth-child(3),
.cf-home-trust-item:nth-child(4) {
border-bottom: 0 !important;
}
/* Categories: 2 columns */
.cf-home-categories-grid {
grid-template-columns: repeat(2, 1fr) !important;
width: calc(100% - 32px) !important;
}
/* Why grid: 2 columns */
.cf-home-why-grid {
grid-template-columns: repeat(2, 1fr) !important;
width: calc(100% - 32px) !important;
}
/* Promo: stack */
.cf-home-promo-inner {
grid-template-columns: 1fr !important;
gap: 36px !important;
width: calc(100% - 32px) !important;
}
.cf-home-promo-image img {
height: 320px !important;
}
.cf-home-featured-header {
width: calc(100% - 32px) !important;
}
.cf-home-products {
width: calc(100% - 32px) !important;
}
}
@media (max-width: 767px) {
/* Trust strip: single column */
.cf-home-trust-strip {
display: grid !important;
grid-template-columns: 1fr !important;
}
/* More top padding so the copper bar (::before) sits above the title, not over it */
.cf-home-trust-item {
border-right: 0 !important;
border-bottom: 1px solid rgba(18, 55, 42, 0.08) !important;
padding: 40px 20px 20px !important;
}
/* Reposition bar to fit within the tighter mobile padding */
.cf-home-trust-item::before {
top: 16px !important;
left: 20px !important;
}
.cf-home-trust-item:last-child {
border-bottom: 0 !important;
}
/* Categories: single column */
.cf-home-categories-grid {
grid-template-columns: 1fr !important;
width: calc(100% - 24px) !important;
gap: 14px !important;
}
.cf-home-category-card {
min-height: 240px !important;
}
/* Featured header: stack */
.cf-home-featured-header {
flex-direction: column !important;
align-items: flex-start !important;
width: calc(100% - 24px) !important;
}
.cf-home-products {
width: calc(100% - 24px) !important;
}
/* Why cards: single column */
.cf-home-why-grid {
grid-template-columns: 1fr !important;
width: calc(100% - 24px) !important;
gap: 12px !important;
}
/* Final CTA buttons: stacked full width */
.cf-home-final-actions {
flex-direction: column !important;
width: 100% !important;
}
.cf-home-final-actions .cf-home-btn-primary .elementor-button,
.cf-home-final-actions .cf-home-btn-secondary .elementor-button {
width: 100% !important;
}
.cf-home-promo-inner {
width: calc(100% - 24px) !important;
}
.cf-home-promo-image img {
height: 240px !important;
}
}
/* =========================================================
CHAMPIONS FURNITURE - ABOUT US PAGE
Template classes: hostinger-ai-* (Hostinger AI template)
========================================================= */
/* =========================================================
SECTION 1 - HERO: hostinger-ai-about-us-3
Outer container type: grid, 2 cols (image mosaic | text)
========================================================= */
.hostinger-ai-about-us-3 {
background: linear-gradient(
160deg,
#f8f3ec 0%,
#ffffff 55%,
#f0ece3 100%
) !important;
padding: 72px 24px 80px !important;
overflow: hidden !important;
}
/*
* Elementor grid DOM: .e-con[hostinger-ai-about-us-3] > .e-con-inner > [children]
* Set display:grid on > .e-con-inner so the 2 columns render correctly.
*/
.hostinger-ai-about-us-3 > .e-con-inner {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr) !important;
gap: 56px !important;
align-items: center !important;
width: min(1180px, 100%) !important;
margin: 0 auto !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* Left column inner grid: 2 portrait images side-by-side */
.hostinger-ai-about-us-3 > .e-con-inner > .e-con:first-child > .e-con-inner {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 14px !important;
align-items: start !important;
padding: 0 !important;
}
/* Hero images */
.hostinger-ai-about-us-3 .hostinger-ai-image img {
width: 100% !important;
height: 310px !important;
object-fit: cover !important;
border-radius: 18px !important;
display: block !important;
box-shadow: 0 14px 34px rgba(18, 55, 42, 0.13) !important;
}
/* Second image: stagger downward */
.hostinger-ai-about-us-3 .hostinger-index-5 img {
margin-top: 44px !important;
height: 370px !important;
}
/* Hero heading */
.hostinger-ai-about-us-3 .hostinger-ai-title .elementor-heading-title {
color: #0b3d2e !important;
font-size: clamp(34px, 4.5vw, 60px) !important;
font-weight: 900 !important;
line-height: 1.02 !important;
letter-spacing: -0.04em !important;
margin: 0 0 20px !important;
}
/* Hero description */
.hostinger-ai-about-us-3 .hostinger-ai-description p,
.hostinger-ai-about-us-3 .hostinger-ai-description {
color: #4d5b68 !important;
font-size: 17px !important;
line-height: 1.72 !important;
margin: 0 !important;
}
/* Hero CTA button */
.hostinger-ai-about-us-3 .hostinger-ai-cta-button .elementor-button,
.hostinger-ai-about-us-3 .hostinger-ai-cta-button a.elementor-button {
background: #b87333 !important;
color: #ffffff !important;
border: 0 !important;
border-radius: 999px !important;
min-height: 52px !important;
padding: 0 30px !important;
font-size: 15px !important;
font-weight: 800 !important;
box-shadow: 0 8px 22px rgba(184, 115, 51, 0.32) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin-top: 28px !important;
text-decoration: none !important;
transition:
background 0.2s ease,
transform 0.2s ease !important;
}
.hostinger-ai-about-us-3 .hostinger-ai-cta-button .elementor-button:hover,
.hostinger-ai-about-us-3 .hostinger-ai-cta-button a.elementor-button:hover {
background: #9f5f28 !important;
transform: translateY(-2px);
}
/* =========================================================
SECTION 2 - SERVICES: hostinger-ai-our-services-4
Deep green gradient bg, premium 2-col card grid
========================================================= */
.hostinger-ai-our-services-4 {
background: linear-gradient(
160deg,
#0a3628 0%,
#12372a 45%,
#0f4232 100%
) !important;
padding: 88px 24px !important;
position: relative !important;
overflow: hidden !important;
}
.hostinger-ai-our-services-4::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(
ellipse 90% 60% at 50% 0%,
rgba(184, 115, 51, 0.1) 0%,
transparent 70%
);
pointer-events: none;
z-index: 0;
}
.hostinger-ai-our-services-4 > .e-con-inner {
position: relative !important;
z-index: 1 !important;
}
/* Section header */
.hostinger-ai-our-services-4 .hostinger-ai-title .elementor-heading-title {
color: #ffffff !important;
font-size: clamp(28px, 3.5vw, 50px) !important;
font-weight: 900 !important;
line-height: 1.05 !important;
letter-spacing: -0.035em !important;
margin: 0 0 18px !important;
text-align: center !important;
}
.hostinger-ai-our-services-4 .hostinger-ai-description p,
.hostinger-ai-our-services-4 .hostinger-ai-description {
color: rgba(247, 243, 234, 0.72) !important;
font-size: 16.5px !important;
line-height: 1.7 !important;
text-align: center !important;
margin: 0 auto 56px !important;
max-width: 540px;
}
.hostinger-ai-our-services-4 .e-grid > .e-con-inner {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 28px !important;
width: min(1180px, 100%) !important;
margin: 0 auto !important;
padding: 0 !important;
}
/* Service card */
.hostinger-ai-our-services-4 .e-grid > .e-con-inner > .e-con {
background: #ffffff !important;
border-radius: 22px !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
box-shadow:
0 20px 52px rgba(0, 0, 0, 0.28),
0 0 0 1px rgba(255, 255, 255, 0.06) !important;
transition:
transform 0.3s ease,
box-shadow 0.3s ease !important;
position: relative !important;
}
.hostinger-ai-our-services-4 .e-grid > .e-con-inner > .e-con::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #b87333, #d4934a);
z-index: 2;
}
.hostinger-ai-our-services-4 .e-grid > .e-con-inner > .e-con:hover {
transform: translateY(-8px) !important;
box-shadow:
0 32px 68px rgba(0, 0, 0, 0.36),
0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}
/* Service image */
.hostinger-ai-our-services-4 .hostinger-ai-service-image {
overflow: hidden !important;
}
.hostinger-ai-our-services-4 .hostinger-ai-service-image img {
width: 100% !important;
height: 280px !important;
object-fit: cover !important;
border-radius: 0 !important;
display: block !important;
transition: transform 0.45s ease !important;
}
.hostinger-ai-our-services-4
.e-grid
> .e-con-inner
> .e-con:hover
.hostinger-ai-service-image
img {
transform: scale(1.07) !important;
}
/* Card content */
.hostinger-ai-our-services-4
.hostinger-ai-service-title
.elementor-heading-title,
.hostinger-ai-our-services-4 .hostinger-ai-service-title h2,
.hostinger-ai-our-services-4 .hostinger-ai-service-title h3 {
color: #0b3d2e !important;
font-size: 21px !important;
font-weight: 900 !important;
line-height: 1.2 !important;
margin: 0 !important;
padding: 24px 26px 6px !important;
text-align: left !important;
}
.hostinger-ai-our-services-4 .hostinger-ai-service-description p,
.hostinger-ai-our-services-4 .hostinger-ai-service-description {
color: #6b7685 !important;
font-size: 15px !important;
line-height: 1.68 !important;
padding: 8px 26px 30px !important;
margin: 0 !important;
text-align: left !important;
}
/* =========================================================
GALLERY HEADER (unnamed section after services)
"Our Gallery" heading + description
========================================================= */
.hostinger-ai-our-services-4 + .e-con {
background: #f7f3ea !important;
padding: 60px 24px 36px !important;
}
.hostinger-ai-our-services-4
+ .e-con
.hostinger-ai-title
.elementor-heading-title {
color: #12372a !important;
font-size: clamp(28px, 3vw, 42px) !important;
font-weight: 900 !important;
line-height: 1.1 !important;
margin: 0 0 10px !important;
}
.hostinger-ai-our-services-4 + .e-con .hostinger-ai-description,
.hostinger-ai-our-services-4 + .e-con .hostinger-ai-description p {
color: #6b7685 !important;
font-size: 16px !important;
line-height: 1.65 !important;
margin: 0 auto !important;
max-width: 580px;
}
/* =========================================================
SECTION 3 - GALLERY: hostinger-ai-about-us-1
Outer: grid wrapper; inner child: image-row grid (6 images)
========================================================= */
.hostinger-ai-about-us-1 {
background: #f7f3ea !important;
padding: 0 24px 72px !important;
}
/* Outer grid: constrain width, collapse to single column */
.hostinger-ai-about-us-1 > .e-con-inner {
display: grid !important;
grid-template-columns: 1fr !important;
width: min(1180px, 100%) !important;
margin: 0 auto !important;
padding: 0 !important;
}
/* image-row: 3-col grid for the 6 furniture images */
.image-row > .e-con-inner {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 16px !important;
padding: 0 !important;
align-items: start !important;
}
/* Gallery images */
.image-row .hostinger-ai-image img {
width: 100% !important;
height: 250px !important;
object-fit: cover !important;
border-radius: 14px !important;
display: block !important;
box-shadow: 0 8px 20px rgba(18, 55, 42, 0.1) !important;
transition: transform 0.3s ease !important;
}
.image-row .hostinger-ai-image img:hover {
transform: scale(1.04) !important;
}
/* =========================================================
LOCATION SECTION (unnamed section after gallery)
2-col grid: left = location info | right = Google Map
========================================================= */
.hostinger-ai-about-us-1 + .e-con {
background: #ffffff !important;
padding: 72px 24px !important;
}
/* Fix the location 2-col grid */
.hostinger-ai-about-us-1 + .e-con .e-grid > .e-con-inner {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
gap: 60px !important;
align-items: start !important;
width: min(1180px, 100%) !important;
margin: 0 auto !important;
padding: 0 !important;
}
/* Location section title ("Our Location") */
.hostinger-ai-about-us-1 + .e-con .hostinger-ai-title .elementor-heading-title {
color: #12372a !important;
font-size: clamp(26px, 3vw, 40px) !important;
font-weight: 900 !important;
line-height: 1.1 !important;
margin: 0 0 14px !important;
}
/* Address / hours body text */
.hostinger-ai-about-us-1 + .e-con .hostinger-ai-description p,
.hostinger-ai-about-us-1 + .e-con .hostinger-ai-description {
color: #6b7685 !important;
font-size: 15.5px !important;
line-height: 1.75 !important;
margin: 0 !important;
}
/* "Contact" and "Hours" subheadings */
.hostinger-ai-about-us-1
+ .e-con
.hostinger-ai-font-bold
.elementor-heading-title,
.hostinger-ai-about-us-1 + .e-con .hostinger-ai-font-bold h2,
.hostinger-ai-about-us-1 + .e-con .hostinger-ai-font-bold h3 {
color: #b87333 !important;
font-size: 15px !important;
font-weight: 800 !important;
margin: 20px 0 4px !important;
line-height: 1.3 !important;
}
/* Google Maps iframe */
.hostinger-ai-about-us-1 + .e-con iframe {
width: 100% !important;
min-height: 420px !important;
border-radius: 16px !important;
border: 0 !important;
display: block !important;
box-shadow: 0 12px 30px rgba(18, 55, 42, 0.1) !important;
}
/* =========================================================
SECTION 5 - CONTACT: hostinger-ai-contact-form-2
Cream bg, 2-col: left = intro text, right = form card
background-image: none overrides any Elementor bg image
========================================================= */
.hostinger-ai-contact-form-2 {
background-color: #f0ece3 !important;
background-image: none !important;
padding: 88px 24px !important;
--grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
overflow: visible !important;
}
.hostinger-ai-contact-form-2 > .e-con-inner {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
gap: 72px !important;
align-items: start !important;
width: min(1180px, 100%) !important;
margin: 0 auto !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* Left column: title */
.hostinger-ai-contact-form-2 .hostinger-ai-title .elementor-heading-title {
color: #0b3d2e !important;
font-size: clamp(30px, 3.8vw, 56px) !important;
font-weight: 900 !important;
line-height: 1.02 !important;
letter-spacing: -0.04em !important;
margin: 0 0 20px !important;
}
/* Left column: description */
.hostinger-ai-contact-form-2 .hostinger-ai-description p,
.hostinger-ai-contact-form-2 .hostinger-ai-description {
color: #4d5b68 !important;
font-size: 16.5px !important;
line-height: 1.72 !important;
margin: 0 0 28px !important;
}
/* Right column: white form card */
.hostinger-ai-contact-form-2 > .e-con-inner > .e-con:last-child,
.hostinger-ai-contact-form-2 > .e-con-inner > .e-con:nth-child(2) {
background: #ffffff !important;
border-radius: 24px !important;
padding: 44px !important;
box-shadow:
0 22px 52px rgba(18, 55, 42, 0.12),
0 0 32px rgba(184, 115, 51, 0.06) !important;
border: 1px solid rgba(18, 55, 42, 0.06) !important;
}
/* Form labels */
.hostinger-ai-contact-form-2 .elementor-field-label,
.hostinger-ai-contact-form-2 label {
color: #0b3d2e !important;
font-size: 12.5px !important;
font-weight: 850 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
margin-bottom: 8px !important;
display: block !important;
}
/* Form inputs */
.hostinger-ai-contact-form-2 .elementor-field-textual,
.hostinger-ai-contact-form-2 input[type="text"],
.hostinger-ai-contact-form-2 input[type="email"],
.hostinger-ai-contact-form-2 input[type="tel"],
.hostinger-ai-contact-form-2 input[type="number"],
.hostinger-ai-contact-form-2 textarea,
.hostinger-ai-contact-form-2 select {
width: 100% !important;
min-height: 54px !important;
border: 1.5px solid rgba(18, 55, 42, 0.14) !important;
border-radius: 14px !important;
background: #faf8f4 !important;
color: #0b3d2e !important;
padding: 0 18px !important;
font-size: 15px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
box-shadow: none !important;
outline: none !important;
box-sizing: border-box !important;
transition:
border-color 0.18s ease,
background 0.18s ease,
box-shadow 0.18s ease !important;
}
.hostinger-ai-contact-form-2 textarea.elementor-field-textual,
.hostinger-ai-contact-form-2 textarea {
min-height: 140px !important;
padding-top: 16px !important;
resize: vertical !important;
}
.hostinger-ai-contact-form-2 input:focus,
.hostinger-ai-contact-form-2 textarea:focus,
.hostinger-ai-contact-form-2 select:focus {
border-color: #b87333 !important;
background: #ffffff !important;
box-shadow: 0 0 0 3px rgba(184, 115, 51, 0.13) !important;
}
.hostinger-ai-contact-form-2 input::placeholder,
.hostinger-ai-contact-form-2 textarea::placeholder {
color: rgba(18, 55, 42, 0.4) !important;
opacity: 1 !important;
}
/* Submit button */
.hostinger-ai-contact-form-2 .elementor-button[type="submit"],
.hostinger-ai-contact-form-2 button[type="submit"],
.hostinger-ai-contact-form-2 .elementor-button,
.hostinger-ai-contact-form-2 .e-form__buttons .elementor-button {
width: 100% !important;
min-height: 56px !important;
border-radius: 999px !important;
background: #b87333 !important;
color: #ffffff !important;
border: 0 !important;
font-size: 15px !important;
font-weight: 900 !important;
letter-spacing: 0.01em !important;
box-shadow: 0 10px 26px rgba(184, 115, 51, 0.32) !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition:
background 0.2s ease,
transform 0.2s ease,
box-shadow 0.2s ease !important;
}
.hostinger-ai-contact-form-2 .elementor-button[type="submit"]:hover,
.hostinger-ai-contact-form-2 button[type="submit"]:hover,
.hostinger-ai-contact-form-2 .elementor-button:hover,
.hostinger-ai-contact-form-2 .e-form__buttons .elementor-button:hover {
background: #0b3d2e !important;
transform: translateY(-2px) !important;
box-shadow: 0 16px 34px rgba(18, 55, 42, 0.26) !important;
}
/* Field group spacing */
.hostinger-ai-contact-form-2 .elementor-field-group {
margin-bottom: 22px !important;
}
.hostinger-ai-contact-form-2 .elementor-field-group:last-child {
margin-bottom: 0 !important;
}
/* Success / error messages */
.hostinger-ai-contact-form-2 .elementor-message {
border-radius: 12px !important;
font-weight: 700 !important;
padding: 14px 18px !important;
}
/* =========================================================
FINAL IMAGE (hostinger-index-1, full-width hero image)
========================================================= */
.hostinger-index-1 img {
width: 100% !important;
height: 480px !important;
object-fit: cover !important;
border-radius: 0 !important;
display: block !important;
margin-top: 0 !important;
}
/* Ensure the container holding the final image has no negative margin */
.hostinger-index-1.hostinger-ai-image {
margin-top: 0 !important;
}
/* =========================================================
GLOBAL FALLBACK: brand colors for all hostinger-ai-* widgets
Catches any named sections not targeted above
========================================================= */
.hostinger-ai-title .elementor-heading-title,
.hostinger-ai-title h1,
.hostinger-ai-title h2,
.hostinger-ai-title h3,
.hostinger-ai-title h4,
.hostinger-ai-title p {
color: #12372a;
line-height: 1.1;
}
.hostinger-ai-description,
.hostinger-ai-description p {
color: #6b7685;
line-height: 1.7;
}
.hostinger-ai-font-bold .elementor-heading-title,
.hostinger-ai-font-bold h1,
.hostinger-ai-font-bold h2,
.hostinger-ai-font-bold h3 {
color: #b87333;
font-weight: 800;
}
/* =========================================================
RESPONSIVE - ABOUT US
========================================================= */
@media (max-width: 1024px) {
/* Hero: stack columns */
.hostinger-ai-about-us-3 > .e-con-inner {
grid-template-columns: 1fr !important;
gap: 40px !important;
}
.hostinger-ai-about-us-3 .hostinger-index-5 img {
margin-top: 0 !important;
height: 260px !important;
}
.hostinger-ai-about-us-3 .hostinger-ai-image img {
height: 240px !important;
}
/* Services: stack cards */
.hostinger-ai-our-services-4 .e-grid > .e-con-inner {
grid-template-columns: 1fr !important;
gap: 22px !important;
width: 100% !important;
}
.hostinger-ai-our-services-4 .hostinger-ai-service-image img {
height: 260px !important;
}
/* Gallery: 2 cols */
.image-row > .e-con-inner {
grid-template-columns: repeat(2, 1fr) !important;
}
/* Location: stack */
.hostinger-ai-about-us-1 + .e-con .e-grid > .e-con-inner {
grid-template-columns: 1fr !important;
gap: 36px !important;
}
/* Contact: stack */
.hostinger-ai-contact-form-2 {
padding: 64px 24px !important;
}
.hostinger-ai-contact-form-2 > .e-con-inner {
grid-template-columns: 1fr !important;
gap: 44px !important;
}
.hostinger-ai-contact-form-2 > .e-con-inner > .e-con:last-child,
.hostinger-ai-contact-form-2 > .e-con-inner > .e-con:nth-child(2) {
padding: 34px !important;
}
}
@media (max-width: 767px) {
.hostinger-ai-about-us-3 {
padding: 44px 16px 56px !important;
}
.hostinger-ai-about-us-3 > .e-con-inner {
gap: 28px !important;
}
.hostinger-ai-about-us-3 > .e-con-inner > .e-con:first-child > .e-con-inner {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
}
.hostinger-ai-about-us-3 .hostinger-ai-image img,
.hostinger-ai-about-us-3 .hostinger-index-5 img {
height: 165px !important;
margin-top: 0 !important;
}
.hostinger-ai-about-us-3 .hostinger-ai-cta-button .elementor-button,
.hostinger-ai-about-us-3 .hostinger-ai-cta-button a.elementor-button {
width: 100% !important;
margin-top: 20px !important;
}
.hostinger-ai-our-services-4 {
padding: 56px 16px !important;
}
.hostinger-ai-our-services-4 .hostinger-ai-service-image img {
height: 220px !important;
}
.hostinger-ai-our-services-4 + .e-con {
padding: 44px 16px 28px !important;
}
.hostinger-ai-about-us-1 {
padding: 0 16px 44px !important;
}
.image-row > .e-con-inner {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
}
.image-row .hostinger-ai-image img {
height: 155px !important;
}
.hostinger-ai-about-us-1 + .e-con {
padding: 44px 16px !important;
}
.hostinger-ai-about-us-1 + .e-con iframe {
min-height: 300px !important;
}
.hostinger-ai-contact-form-2 {
padding: 52px 16px !important;
}
.hostinger-ai-contact-form-2 > .e-con-inner {
grid-template-columns: 1fr !important;
gap: 32px !important;
}
.hostinger-ai-contact-form-2 > .e-con-inner > .e-con:last-child,
.hostinger-ai-contact-form-2 > .e-con-inner > .e-con:nth-child(2) {
padding: 26px !important;
border-radius: 18px !important;
}
.hostinger-index-1 img {
height: 260px !important;
}
}
/* =========================================================
SHOP PAGE - FILTER SIDEBAR + NO RESULTS FINAL FIX
Add at the very bottom of global CSS
========================================================= */
/* ================================
1. Desktop layout refinement
================================ */
.cf-shop-content-wrap {
width: 100% !important;
max-width: 1500px !important;
margin: 0 auto !important;
padding: 30px 36px 90px !important;
}
.cf-shop-layout {
display: grid !important;
grid-template-columns: 290px minmax(0, 1fr) !important;
gap: 34px !important;
align-items: start !important;
width: 100% !important;
max-width: 100% !important;
overflow: visible !important;
}
/* ================================
2. Filter card shell
================================ */
.cf-shop-filter {
width: 290px !important;
max-width: 290px !important;
min-width: 290px !important;
background: #ffffff !important;
border: 1px solid var(--cf-border, #d9d4c7) !important;
border-radius: 18px !important;
padding: 22px 18px 24px !important;
box-shadow:
0 14px 34px rgba(18, 55, 42, 0.08),
0 0 22px rgba(184, 115, 51, 0.05) !important;
box-sizing: border-box !important;
overflow: hidden !important;
align-self: start !important;
}
/* Sticky desktop filter with proper internal scrolling */
@media (min-width: 1025px) {
.cf-shop-filter {
position: sticky !important;
top: 122px !important;
max-height: calc(100vh - 145px) !important;
}
.cf-shop-filter .elementor-widget-container,
.cf-shop-filter .wpc-filters-main-wrap,
.cf-shop-filter .wpc-filters-widget-wrapper,
.cf-shop-filter .wpc-filter-content {
max-height: none !important;
}
.cf-shop-filter .elementor-widget-filter-everything-filters,
.cf-shop-filter .elementor-widget-container {
max-height: calc(100vh - 190px) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
padding-right: 6px !important;
}
.cf-shop-filter
.elementor-widget-filter-everything-filters::-webkit-scrollbar,
.cf-shop-filter .elementor-widget-container::-webkit-scrollbar {
width: 6px;
}
.cf-shop-filter
.elementor-widget-filter-everything-filters::-webkit-scrollbar-track,
.cf-shop-filter .elementor-widget-container::-webkit-scrollbar-track {
background: #f7f3ea;
border-radius: 999px;
}
.cf-shop-filter
.elementor-widget-filter-everything-filters::-webkit-scrollbar-thumb,
.cf-shop-filter .elementor-widget-container::-webkit-scrollbar-thumb {
background: #b87333;
border-radius: 999px;
}
}
/* ================================
3. Filter headings
================================ */
.cf-shop-filter h1,
.cf-shop-filter h2,
.cf-shop-filter h3,
.cf-shop-filter .elementor-heading-title,
.cf-shop-filter .wpc-filter-title,
.cf-shop-filter .wpc-filter-header,
.cf-shop-filter .wpc-filter-header button {
color: var(--cf-green, #12372a) !important;
font-family: Manrope, Arial, Helvetica, sans-serif !important;
font-weight: 900 !important;
line-height: 1.1 !important;
}
.cf-shop-filter
.elementor-widget-filter-everything-filters
> .elementor-widget-container
> h3,
.cf-shop-filter .elementor-widget-container > h3:first-child {
font-size: 31px !important;
margin: 0 0 22px !important;
}
.cf-shop-filter .wpc-filter-title,
.cf-shop-filter .wpc-filter-header,
.cf-shop-filter .wpc-filter-header button {
font-size: 26px !important;
margin: 26px 0 14px !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
}
/* ================================
4. Search input
================================ */
.cf-shop-filter input[type="search"],
.cf-shop-filter input[type="text"] {
width: 100% !important;
max-width: 100% !important;
height: 46px !important;
min-height: 46px !important;
border: 1px solid var(--cf-border, #d9d4c7) !important;
border-radius: 12px !important;
background: #ffffff !important;
color: var(--cf-green, #12372a) !important;
font-size: 14px !important;
font-weight: 650 !important;
padding: 0 14px !important;
box-shadow: none !important;
outline: none !important;
}
.cf-shop-filter input[type="search"]:focus,
.cf-shop-filter input[type="text"]:focus {
border-color: var(--cf-copper, #b87333) !important;
box-shadow: 0 0 0 3px rgba(184, 115, 51, 0.13) !important;
}
/* ================================
5. Price filter
================================ */
.cf-shop-filter .wpc-filters-range-wrapper,
.cf-shop-filter .wpc-filters-range-inputs {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 12px !important;
width: 100% !important;
margin: 0 0 18px !important;
}
.cf-shop-filter input[type="number"] {
width: 100% !important;
max-width: 100% !important;
height: 42px !important;
min-height: 42px !important;
border: 1px solid var(--cf-border, #d9d4c7) !important;
border-radius: 10px !important;
background: #ffffff !important;
color: var(--cf-green, #12372a) !important;
font-size: 13.5px !important;
font-weight: 700 !important;
padding: 0 10px !important;
box-shadow: none !important;
outline: none !important;
}
.cf-shop-filter .ui-slider,
.cf-shop-filter .wpc-range-slider {
height: 4px !important;
background: rgba(18, 55, 42, 0.18) !important;
border: 0 !important;
border-radius: 999px !important;
margin: 13px 8px 22px !important;
}
.cf-shop-filter .ui-slider-range,
.cf-shop-filter .wpc-range-slider .ui-slider-range {
height: 4px !important;
background: var(--cf-green, #12372a) !important;
border-radius: 999px !important;
}
.cf-shop-filter .ui-slider-handle,
.cf-shop-filter .wpc-range-slider .ui-slider-handle {
width: 18px !important;
height: 18px !important;
top: -7px !important;
border-radius: 999px !important;
border: 1px solid var(--cf-border, #d9d4c7) !important;
background: #ffffff !important;
box-shadow: 0 5px 12px rgba(18, 55, 42, 0.18) !important;
}
/* ================================
6. Category list containment
================================ */
.cf-shop-filter,
.cf-shop-filter *,
.cf-shop-filter .elementor-widget-container,
.cf-shop-filter .wpc-filters-main-wrap,
.cf-shop-filter .wpc-filters-widget-wrapper,
.cf-shop-filter .wpc-filter-content,
.cf-shop-filter .wpc-filters-section,
.cf-shop-filter .wpc-filters-ul-list {
box-sizing: border-box !important;
max-width: 100% !important;
}
.cf-shop-filter ul,
.cf-shop-filter .wpc-filters-ul-list {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.cf-shop-filter li,
.cf-shop-filter .wpc-term-item {
width: 100% !important;
max-width: 100% !important;
margin: 0 0 10px !important;
padding: 0 !important;
list-style: none !important;
overflow: visible !important;
}
/* Filter row */
.cf-shop-filter .wpc-term-item-content-wrapper,
.cf-shop-filter .wpc-filter-label-wrapper {
width: 100% !important;
max-width: 100% !important;
display: flex !important;
align-items: flex-start !important;
gap: 8px !important;
color: var(--cf-green, #12372a) !important;
overflow: visible !important;
}
/* Checkbox */
.cf-shop-filter input[type="checkbox"] {
width: 15px !important;
height: 15px !important;
min-width: 15px !important;
min-height: 15px !important;
max-width: 15px !important;
max-height: 15px !important;
flex: 0 0 15px !important;
margin: 2px 0 0 !important;
accent-color: var(--cf-copper, #b87333) !important;
cursor: pointer !important;
transition: none !important;
}
/* Label text */
.cf-shop-filter .wpc-filter-label-wrapper a,
.cf-shop-filter .wpc-filter-label-wrapper label,
.cf-shop-filter .wpc-term-item-content-wrapper a,
.cf-shop-filter .wpc-term-item-content-wrapper label,
.cf-shop-filter .wpc-term-name {
flex: 1 1 auto !important;
min-width: 0 !important;
max-width: 100% !important;
color: var(--cf-green, #12372a) !important;
font-size: 14px !important;
font-weight: 550 !important;
line-height: 1.35 !important;
white-space: normal !important;
overflow-wrap: anywhere !important;
word-break: normal !important;
text-decoration: none !important;
}
/* Product count */
.cf-shop-filter .wpc-term-count,
.cf-shop-filter .wpc-term-count-wrapper {
flex: 0 0 auto !important;
margin-left: auto !important;
padding-left: 6px !important;
color: rgba(29, 38, 49, 0.28) !important;
font-size: 12px !important;
font-weight: 700 !important;
line-height: 1.35 !important;
}
/* Disabled / empty category rows */
.cf-shop-filter .wpc-term-disabled,
.cf-shop-filter .wpc-term-disabled *,
.cf-shop-filter .wpc-term-count-0,
.cf-shop-filter .wpc-term-count-0 * {
color: rgba(29, 38, 49, 0.34) !important;
}
/* Hide plugin/admin clutter */
.cf-shop-filter .wpc-filter-set-title,
.cf-shop-filter .wpc-posts-found,
.cf-shop-filter .wpc-filter-chips-list-title,
.cf-shop-filter .wpc-edit-filter-set,
.cf-shop-filter .fee-edit-filter,
.cf-shop-filter .edit-filter-set-link,
.cf-shop-filter a[href*="wpc-filter"],
.cf-shop-filter a[href*="filter-everything"] {
display: none !important;
}
/* ================================
7. Products area correction
================================ */
.cf-shop-products {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
.cf-shop-products .elementor-widget-loop-grid,
.cf-shop-products .elementor-loop-container {
width: 100% !important;
max-width: 100% !important;
}
.cf-shop-products .elementor-loop-container {
align-items: stretch !important;
}
/* ================================
8. No-results state
================================ */
.cf-shop-products .e-loop-nothing-found-message,
.cf-shop-products .elementor-posts-nothing-found,
.cf-shop-products .woocommerce-info,
.cf-shop-products .woocommerce-no-products-found,
.cf-shop-products .no-results {
width: 100% !important;
min-height: 280px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
padding: 46px 34px !important;
margin: 0 !important;
background:
radial-gradient(
circle at top right,
rgba(184, 115, 51, 0.12),
transparent 34%
),
#fffaf3 !important;
border: 1px solid rgba(18, 55, 42, 0.12) !important;
border-radius: 22px !important;
box-shadow: 0 18px 42px rgba(18, 55, 42, 0.08) !important;
color: var(--cf-green, #12372a) !important;
text-align: center !important;
font-size: 18px !important;
font-weight: 850 !important;
line-height: 1.55 !important;
}
.cf-shop-products .e-loop-nothing-found-message::before,
.cf-shop-products .elementor-posts-nothing-found::before,
.cf-shop-products .woocommerce-info::before,
.cf-shop-products .woocommerce-no-products-found::before,
.cf-shop-products .no-results::before {
content: "No matching furniture found";
display: block;
color: var(--cf-green, #12372a);
font-size: clamp(28px, 3vw, 42px);
font-weight: 900;
line-height: 1.1;
letter-spacing: -0.035em;
margin-bottom: 12px;
}
.cf-shop-products .e-loop-nothing-found-message::after,
.cf-shop-products .elementor-posts-nothing-found::after,
.cf-shop-products .woocommerce-info::after,
.cf-shop-products .woocommerce-no-products-found::after,
.cf-shop-products .no-results::after {
content: "Try a different search term, clear the filters, or contact us on WhatsApp and we will help you find a suitable option.";
display: block;
max-width: 620px;
margin: 0 auto;
color: rgba(29, 38, 49, 0.72);
font-size: 16px;
font-weight: 600;
line-height: 1.65;
}
/* Fallback if Elementor outputs an empty loop container */
.cf-shop-products .elementor-loop-container:empty {
display: block !important;
}
.cf-shop-products .elementor-loop-container:empty::before {
content: "No matching furniture found";
width: 100%;
min-height: 280px;
display: flex;
align-items: center;
justify-content: center;
padding: 46px 34px;
background: #fffaf3;
border: 1px solid rgba(18, 55, 42, 0.12);
border-radius: 22px;
box-shadow: 0 18px 42px rgba(18, 55, 42, 0.08);
color: var(--cf-green, #12372a);
text-align: center;
font-size: clamp(26px, 3vw, 40px);
font-weight: 900;
line-height: 1.15;
}
/* ================================
9. Tablet
================================ */
@media (max-width: 1024px) {
.cf-shop-content-wrap {
padding: 24px 22px 70px !important;
}
.cf-shop-layout {
display: flex !important;
flex-direction: column !important;
gap: 28px !important;
}
.cf-shop-filter,
.cf-shop-products {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
.cf-shop-filter {
position: static !important;
max-height: none !important;
overflow: visible !important;
}
.cf-shop-filter .elementor-widget-filter-everything-filters,
.cf-shop-filter .elementor-widget-container {
max-height: none !important;
overflow: visible !important;
padding-right: 0 !important;
}
}
/* ================================
10. Mobile
================================ */
@media (max-width: 767px) {
.cf-shop-content-wrap {
padding: 14px 12px 46px !important;
}
.cf-shop-layout {
gap: 18px !important;
}
.cf-shop-filter {
padding: 18px 16px 20px !important;
border-radius: 16px !important;
}
.cf-shop-filter .elementor-widget-container > h3:first-child,
.cf-shop-filter h1,
.cf-shop-filter h2,
.cf-shop-filter h3,
.cf-shop-filter .elementor-heading-title {
font-size: 26px !important;
}
.cf-shop-filter .wpc-filter-title,
.cf-shop-filter .wpc-filter-header,
.cf-shop-filter .wpc-filter-header button {
font-size: 22px !important;
}
.cf-shop-products .e-loop-nothing-found-message,
.cf-shop-products .elementor-posts-nothing-found,
.cf-shop-products .woocommerce-info,
.cf-shop-products .woocommerce-no-products-found,
.cf-shop-products .no-results {
min-height: 240px !important;
padding: 34px 20px !important;
border-radius: 18px !important;
}
}
/* =========================================================
SHOP PAGE - Custom Empty State Injected by JS
========================================================= */
.cf-shop-empty-state {
width: 100%;
min-height: 320px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 48px 34px;
background:
radial-gradient(
circle at top right,
rgba(184, 115, 51, 0.12),
transparent 34%
),
#fffaf3;
border: 1px solid rgba(18, 55, 42, 0.12);
border-radius: 24px;
box-shadow: 0 18px 42px rgba(18, 55, 42, 0.08);
text-align: center;
}
.cf-shop-empty-icon {
width: 64px;
height: 64px;
margin-bottom: 18px;
display: grid;
place-items: center;
border-radius: 20px;
background: var(--cf-green, #12372a);
color: #ffffff;
font-size: 28px;
box-shadow: 0 14px 30px rgba(18, 55, 42, 0.16);
}
.cf-shop-empty-state h3 {
color: var(--cf-green, #12372a);
font-size: clamp(30px, 3vw, 44px);
font-weight: 900;
line-height: 1.08;
letter-spacing: -0.04em;
margin: 0 0 14px;
}
.cf-shop-empty-state p {
max-width: 620px;
color: rgba(29, 38, 49, 0.72);
font-size: 16px;
font-weight: 600;
line-height: 1.65;
margin: 0;
}
.cf-shop-empty-actions {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 12px;
margin-top: 26px;
}
.cf-shop-empty-btn {
min-height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 24px;
border-radius: 999px;
font-size: 14px;
font-weight: 850;
line-height: 1;
text-decoration: none !important;
}
.cf-shop-empty-btn-primary {
background: var(--cf-copper, #b87333);
color: #ffffff !important;
}
.cf-shop-empty-btn-primary:hover {
background: var(--cf-green, #12372a);
color: #ffffff !important;
}
.cf-shop-empty-btn-whatsapp {
background: var(--cf-whatsapp, #25d366);
color: #ffffff !important;
}
.cf-shop-empty-btn-whatsapp:hover {
background: var(--cf-whatsapp-dk, #128c7e);
color: #ffffff !important;
}
@media (max-width: 767px) {
.cf-shop-empty-state {
min-height: 260px;
padding: 36px 20px;
border-radius: 18px;
}
.cf-shop-empty-actions {
width: 100%;
flex-direction: column;
}
.cf-shop-empty-btn {
width: 100%;
}
}
/* =========================================================
SHOP FILTER - SEARCH ICON + PRICE VALUE HARD FIX
Add at the VERY BOTTOM of global CSS
========================================================= */
/* ================================
1. Force price numbers to display
================================ */
.cf-shop-filter input[type="number"],
.cf-shop-filter input[type="text"].wpc-number-field,
.cf-shop-filter input[type="text"].wpc-filter-range-input,
.cf-shop-filter .wpc-filters-range-inputs input,
.cf-shop-filter .wpc-filters-range-wrapper input,
.cf-shop-filter input[name*="min"],
.cf-shop-filter input[name*="max"],
.cf-shop-filter input[id*="min"],
.cf-shop-filter input[id*="max"] {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
height: 42px !important;
min-height: 42px !important;
max-height: 42px !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
color: #12372a !important;
-webkit-text-fill-color: #12372a !important;
background: #ffffff !important;
background-image: none !important;
border: 1px solid #d9d4c7 !important;
border-radius: 10px !important;
padding: 0 10px !important;
font-family: Manrope, Arial, Helvetica, sans-serif !important;
font-size: 14px !important;
font-weight: 700 !important;
line-height: 42px !important;
text-align: left !important;
box-shadow: none !important;
outline: none !important;
appearance: auto !important;
-webkit-appearance: auto !important;
}
/* Price input row should not squeeze fields */
.cf-shop-filter .wpc-filters-range-inputs,
.cf-shop-filter .wpc-filters-range-wrapper {
width: 100% !important;
max-width: 100% !important;
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
align-items: center !important;
justify-content: stretch !important;
margin: 0 0 16px !important;
padding: 0 !important;
}
/* Any inner wrapper around min/max fields */
.cf-shop-filter .wpc-filters-range-inputs > *,
.cf-shop-filter .wpc-filters-range-wrapper > * {
min-width: 0 !important;
max-width: 100% !important;
}
/* Number focus state */
.cf-shop-filter input[type="number"]:focus,
.cf-shop-filter .wpc-filters-range-inputs input:focus,
.cf-shop-filter .wpc-filters-range-wrapper input:focus {
border-color: #b87333 !important;
box-shadow: 0 0 0 3px rgba(184, 115, 51, 0.13) !important;
}
/* Remove number spinner if it visually interferes */
.cf-shop-filter input[type="number"]::-webkit-outer-spin-button,
.cf-shop-filter input[type="number"]::-webkit-inner-spin-button {
margin: 0 !important;
}
/* ================================
2. Remove search icon from filter input
================================ */
/* Remove background-image search icons */
.cf-shop-filter input[type="search"],
.cf-shop-filter input[type="text"],
.cf-shop-filter .wpc-search-field,
.cf-shop-filter .wpc-filter-search-field,
.cf-shop-filter input[name*="search"],
.cf-shop-filter input[id*="search"] {
background-image: none !important;
background-repeat: no-repeat !important;
background-position: unset !important;
background-size: 0 !important;
padding-left: 14px !important;
padding-right: 14px !important;
color: #12372a !important;
-webkit-text-fill-color: #12372a !important;
font-size: 14px !important;
font-weight: 650 !important;
line-height: 44px !important;
}
/* Hide plugin-generated icon elements */
.cf-shop-filter .wpc-search-icon,
.cf-shop-filter .wpc-filter-search-icon,
.cf-shop-filter .wpc-filter-search-wrapper svg,
.cf-shop-filter .wpc-filter-search-wrapper i,
.cf-shop-filter .wpc-filter-search-wrapper::before,
.cf-shop-filter .wpc-filter-search-wrapper::after,
.cf-shop-filter .wpc-search-wrapper::before,
.cf-shop-filter .wpc-search-wrapper::after,
.cf-shop-filter [class*="search-icon"],
.cf-shop-filter [class*="search_icon"] {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* If the icon is attached to a parent wrapper, remove its left offset */
.cf-shop-filter .wpc-filter-search-wrapper,
.cf-shop-filter .wpc-search-wrapper,
.cf-shop-filter .wpc-search-form,
.cf-shop-filter .wpc-filter-search-form {
position: relative !important;
}
.cf-shop-filter .wpc-filter-search-wrapper input,
.cf-shop-filter .wpc-search-wrapper input,
.cf-shop-filter .wpc-search-form input,
.cf-shop-filter .wpc-filter-search-form input {
padding-left: 14px !important;
}
/* Browser native search decorations */
.cf-shop-filter input[type="search"]::-webkit-search-decoration,
.cf-shop-filter input[type="search"]::-webkit-search-cancel-button,
.cf-shop-filter input[type="search"]::-webkit-search-results-button,
.cf-shop-filter input[type="search"]::-webkit-search-results-decoration {
display: none !important;
appearance: none !important;
-webkit-appearance: none !important;
}
/* ================================
3. Make price slider align cleanly
================================ */
.cf-shop-filter .ui-slider,
.cf-shop-filter .wpc-range-slider {
width: calc(100% - 16px) !important;
height: 4px !important;
margin: 14px 8px 24px !important;
background: rgba(18, 55, 42, 0.18) !important;
border: 0 !important;
border-radius: 999px !important;
}
.cf-shop-filter .ui-slider-range,
.cf-shop-filter .wpc-range-slider .ui-slider-range {
height: 4px !important;
background: #12372a !important;
border-radius: 999px !important;
}
.cf-shop-filter .ui-slider-handle,
.cf-shop-filter .wpc-range-slider .ui-slider-handle {
width: 18px !important;
height: 18px !important;
top: -7px !important;
border-radius: 999px !important;
border: 1px solid #d9d4c7 !important;
background: #ffffff !important;
box-shadow: 0 5px 12px rgba(18, 55, 42, 0.18) !important;
}
/* ================================
4. Mobile adjustment
================================ */
@media (max-width: 767px) {
.cf-shop-filter input[type="number"],
.cf-shop-filter .wpc-filters-range-inputs input,
.cf-shop-filter .wpc-filters-range-wrapper input {
height: 40px !important;
min-height: 40px !important;
line-height: 40px !important;
font-size: 13.5px !important;
}
.cf-shop-filter input[type="search"],
.cf-shop-filter input[type="text"],
.cf-shop-filter .wpc-search-field,
.cf-shop-filter .wpc-filter-search-field {
height: 44px !important;
min-height: 44px !important;
line-height: 44px !important;
}
}
/* =========================================================
LIVE SEARCH - CLEAN PRICE DISPLAY FIX
========================================================= */
.cf-live-search-panel {
max-height: min(72vh, 560px) !important;
overflow-y: auto !important;
}
.cf-live-search-item {
grid-template-columns: 58px minmax(0, 1fr) !important;
gap: 12px !important;
align-items: center !important;
}
.cf-live-search-title {
font-size: 14px !important;
font-weight: 850 !important;
line-height: 1.22 !important;
color: var(--cf-green) !important;
}
.cf-live-search-price {
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 4px 7px !important;
line-height: 1.2 !important;
}
.cf-live-price-wrap {
display: inline-flex !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 4px 7px !important;
}
.cf-live-search-price del {
color: rgba(18, 55, 42, 0.45) !important;
font-size: 12.5px !important;
font-weight: 750 !important;
text-decoration-thickness: 1.5px !important;
}
.cf-live-search-price ins {
color: var(--cf-copper) !important;
font-size: 13px !important;
font-weight: 900 !important;
text-decoration: none !important;
}
.cf-live-price-from {
color: rgba(18, 55, 42, 0.62) !important;
font-size: 12px !important;
font-weight: 800 !important;
}
@media (max-width: 480px) {
.cf-live-search-panel {
max-height: 68vh !important;
}
.cf-live-search-item {
grid-template-columns: 50px minmax(0, 1fr) !important;
}
.cf-live-search-title {
font-size: 13px !important;
}
.cf-live-search-price del,
.cf-live-search-price ins {
font-size: 12px !important;
}
}
/* =========================================================
LIVE SEARCH - FINAL DROPDOWN POLISH
========================================================= */
.cf-live-search-panel {
max-height: min(72vh, 560px) !important;
overflow-y: auto !important;
padding: 10px !important;
}
.cf-live-search-results {
display: grid !important;
gap: 6px !important;
}
.cf-live-search-item {
grid-template-columns: 58px minmax(0, 1fr) !important;
gap: 12px !important;
align-items: center !important;
padding: 9px !important;
border-radius: 13px !important;
}
.cf-live-search-item:hover {
background: rgba(184, 115, 51, 0.08) !important;
}
.cf-live-search-thumb {
width: 58px !important;
height: 58px !important;
border-radius: 11px !important;
}
.cf-live-search-title {
font-size: 14px !important;
font-weight: 850 !important;
line-height: 1.22 !important;
color: var(--cf-green) !important;
}
.cf-live-search-price {
color: var(--cf-copper) !important;
font-size: 13px !important;
font-weight: 850 !important;
line-height: 1.25 !important;
}
.cf-live-search-view-all {
margin-top: 10px !important;
min-height: 46px !important;
border-radius: 999px !important;
}
/* Mobile */
@media (max-width: 480px) {
.cf-live-search-panel {
max-height: 68vh !important;
padding: 8px !important;
}
.cf-live-search-item {
grid-template-columns: 50px minmax(0, 1fr) !important;
gap: 10px !important;
}
.cf-live-search-thumb {
width: 50px !important;
height: 50px !important;
}
.cf-live-search-title {
font-size: 13px !important;
}
.cf-live-search-price {
font-size: 12.5px !important;
}
}
/* =========================================================
LIVE SEARCH - SALE BADGE
========================================================= */
.cf-live-search-title-row {
display: flex !important;
align-items: center !important;
gap: 8px !important;
min-width: 0 !important;
}
.cf-live-search-title {
min-width: 0 !important;
}
.cf-live-sale-badge {
flex: 0 0 auto !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 20px !important;
padding: 4px 8px !important;
border-radius: 999px !important;
background: var(--cf-copper) !important;
color: #ffffff !important;
font-size: 10px !important;
font-weight: 900 !important;
line-height: 1 !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
}
.cf-live-search-price {
color: var(--cf-copper) !important;
font-size: 13px !important;
font-weight: 850 !important;
line-height: 1.25 !important;
}
@media (max-width: 480px) {
.cf-live-search-title-row {
gap: 6px !important;
}
.cf-live-sale-badge {
min-height: 18px !important;
padding: 3px 7px !important;
font-size: 9px !important;
}
.cf-live-search-price {
font-size: 12.5px !important;
}
}
/* =========================================================
LIVE SEARCH - FINAL PANEL + SCROLLBAR CLEANUP
========================================================= */
.cf-live-search {
position: relative !important;
z-index: 99999 !important;
}
.cf-live-search-panel {
width: 100% !important;
max-height: min(68vh, 520px) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
padding: 12px !important;
border-radius: 18px !important;
background: #ffffff !important;
border: 1px solid rgba(18, 55, 42, 0.1) !important;
box-shadow:
0 20px 45px rgba(0, 0, 0, 0.15),
0 0 28px rgba(184, 115, 51, 0.08) !important;
scrollbar-width: thin !important;
scrollbar-color: rgba(184, 115, 51, 0.55) transparent !important;
}
/* Chrome / Edge / Safari scrollbar */
.cf-live-search-panel::-webkit-scrollbar {
width: 6px !important;
}
.cf-live-search-panel::-webkit-scrollbar-track {
background: transparent !important;
}
.cf-live-search-panel::-webkit-scrollbar-thumb {
background: rgba(184, 115, 51, 0.45) !important;
border-radius: 999px !important;
}
.cf-live-search-panel::-webkit-scrollbar-thumb:hover {
background: rgba(184, 115, 51, 0.75) !important;
}
/* Result list */
.cf-live-search-results {
display: grid !important;
gap: 4px !important;
}
/* Individual result item */
.cf-live-search-item {
display: grid !important;
grid-template-columns: 58px minmax(0, 1fr) !important;
gap: 12px !important;
align-items: center !important;
padding: 9px 10px !important;
border-radius: 14px !important;
text-decoration: none !important;
transition:
background 0.18s ease,
transform 0.18s ease !important;
}
.cf-live-search-item:hover {
background: rgba(184, 115, 51, 0.08) !important;
transform: translateX(2px) !important;
}
/* Thumbnail */
.cf-live-search-thumb {
width: 58px !important;
height: 58px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 12px !important;
overflow: hidden !important;
background: var(--cf-cream) !important;
border: 1px solid rgba(18, 55, 42, 0.08) !important;
}
.cf-live-search-thumb img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
/* Text */
.cf-live-search-info {
min-width: 0 !important;
display: grid !important;
gap: 3px !important;
}
.cf-live-search-title {
color: var(--cf-green) !important;
font-size: 14px !important;
font-weight: 850 !important;
line-height: 1.22 !important;
}
.cf-live-search-price {
color: var(--cf-copper) !important;
font-size: 13px !important;
font-weight: 850 !important;
line-height: 1.2 !important;
}
/* View all button */
.cf-live-search-view-all {
position: sticky !important;
bottom: 0 !important;
z-index: 2 !important;
margin-top: 10px !important;
min-height: 46px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 999px !important;
background: var(--cf-green) !important;
color: #ffffff !important;
font-size: 14px !important;
font-weight: 850 !important;
text-decoration: none !important;
box-shadow:
0 -8px 18px rgba(255, 255, 255, 0.92),
0 8px 18px rgba(18, 55, 42, 0.18) !important;
}
.cf-live-search-view-all:hover {
background: var(--cf-copper) !important;
color: #ffffff !important;
}
/* Mobile */
@media (max-width: 480px) {
.cf-live-search-panel {
max-height: 66vh !important;
padding: 8px !important;
border-radius: 16px !important;
}
.cf-live-search-item {
grid-template-columns: 50px minmax(0, 1fr) !important;
gap: 10px !important;
padding: 8px !important;
}
.cf-live-search-thumb {
width: 50px !important;
height: 50px !important;
border-radius: 10px !important;
}
.cf-live-search-title {
font-size: 13px !important;
}
.cf-live-search-price {
font-size: 12.5px !important;
}
.cf-live-search-view-all {
min-height: 44px !important;
font-size: 13px !important;
}
}
/* =========================================================
LIVE SEARCH - FINAL SALE BADGE OVERRIDE
Matches updated functions.php output:
.cf-live-search-title-row + .cf-live-sale-badge
========================================================= */
.cf-live-search {
position: relative !important;
z-index: 99999 !important;
}
.cf-live-search-panel {
width: 100% !important;
max-height: min(68vh, 520px) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
padding: 12px !important;
border-radius: 18px !important;
background: #ffffff !important;
border: 1px solid rgba(18, 55, 42, 0.1) !important;
box-shadow:
0 20px 45px rgba(0, 0, 0, 0.15),
0 0 28px rgba(184, 115, 51, 0.08) !important;
scrollbar-width: thin !important;
scrollbar-color: rgba(184, 115, 51, 0.55) transparent !important;
}
.cf-live-search-panel::-webkit-scrollbar {
width: 6px !important;
}
.cf-live-search-panel::-webkit-scrollbar-track {
background: transparent !important;
}
.cf-live-search-panel::-webkit-scrollbar-thumb {
background: rgba(184, 115, 51, 0.45) !important;
border-radius: 999px !important;
}
.cf-live-search-panel::-webkit-scrollbar-thumb:hover {
background: rgba(184, 115, 51, 0.75) !important;
}
.cf-live-search-results {
display: grid !important;
gap: 4px !important;
}
.cf-live-search-item {
display: grid !important;
grid-template-columns: 58px minmax(0, 1fr) !important;
gap: 12px !important;
align-items: center !important;
min-height: 72px !important;
padding: 9px 10px !important;
border-radius: 14px !important;
color: var(--cf-dark) !important;
text-decoration: none !important;
background: transparent !important;
transition:
background 0.18s ease,
transform 0.18s ease !important;
}
.cf-live-search-item:hover,
.cf-live-search-item:focus {
background: rgba(184, 115, 51, 0.08) !important;
transform: translateX(2px) !important;
}
.cf-live-search-thumb {
width: 58px !important;
height: 58px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 12px !important;
overflow: hidden !important;
background: var(--cf-cream) !important;
border: 1px solid rgba(18, 55, 42, 0.08) !important;
}
.cf-live-search-thumb img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
.cf-live-search-info {
min-width: 0 !important;
display: grid !important;
gap: 4px !important;
}
.cf-live-search-title-row {
display: flex !important;
align-items: center !important;
gap: 8px !important;
min-width: 0 !important;
}
.cf-live-search-title {
min-width: 0 !important;
color: var(--cf-green) !important;
font-size: 14px !important;
font-weight: 850 !important;
line-height: 1.22 !important;
}
.cf-live-sale-badge {
flex: 0 0 auto !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 20px !important;
padding: 4px 8px !important;
border-radius: 999px !important;
background: var(--cf-copper) !important;
color: #ffffff !important;
font-size: 10px !important;
font-weight: 900 !important;
line-height: 1 !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
}
.cf-live-search-price {
color: var(--cf-copper) !important;
font-size: 13px !important;
font-weight: 850 !important;
line-height: 1.25 !important;
}
.cf-live-search-view-all {
position: sticky !important;
bottom: 0 !important;
z-index: 2 !important;
margin-top: 10px !important;
min-height: 46px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 999px !important;
background: var(--cf-green) !important;
color: #ffffff !important;
font-size: 14px !important;
font-weight: 850 !important;
text-decoration: none !important;
box-shadow:
0 -8px 18px rgba(255, 255, 255, 0.92),
0 8px 18px rgba(18, 55, 42, 0.18) !important;
}
.cf-live-search-view-all:hover {
background: var(--cf-copper) !important;
color: #ffffff !important;
}
@media (max-width: 480px) {
.cf-live-search-panel {
max-height: 66vh !important;
padding: 8px !important;
border-radius: 16px !important;
}
.cf-live-search-item {
grid-template-columns: 50px minmax(0, 1fr) !important;
min-height: 64px !important;
gap: 10px !important;
padding: 8px !important;
}
.cf-live-search-thumb {
width: 50px !important;
height: 50px !important;
border-radius: 10px !important;
}
.cf-live-search-title-row {
gap: 6px !important;
}
.cf-live-search-title {
font-size: 13px !important;
}
.cf-live-sale-badge {
min-height: 18px !important;
padding: 3px 7px !important;
font-size: 9px !important;
}
.cf-live-search-price {
font-size: 12.5px !important;
}
.cf-live-search-view-all {
min-height: 44px !important;
font-size: 13px !important;
}
}/* End custom CSS */ |