/* ==========================================================================
CUSTOM DESIGN AESTHETICS FOR FLATSOME & WOOCOMMERCE
Target Domain: kitpety.com
========================================================================== */
/* 1. IMPORT GOOGLE FONT: INTER (Clean, modern sans-serif like KP) */
/* Inter font loaded via preconnect in wp_head */
/* 2. DESIGN TOKENS & ROOT VARIABLES */
:root {
--kp-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
/* Color Palette */
--kp-green: #1E5929; /* KP Forest Green */
--kp-green-dark: #13381A; /* Dark Green for hover */
--kp-red: #E02B27; /* Classic Red for Sale/Discounts */
--kp-black: #000000; /* Absolute Black for titles/standard prices */
--kp-text-dark: #1A1A1A; /* Off-black for body text */
--kp-text-muted: #666666; /* Muted Gray for subtexts, labels */
--kp-border: #E5E5E5; /* Soft border gray */
--kp-bg-light: #F5F5F5; /* Light gray background */
/* Layout Border Radius (KP uses sharp or very slightly rounded UI) */
--kp-radius-button: 4px; /* Sharp-ish buttons */
--kp-radius-input: 4px;
--kp-radius-card: 0px; /* Clean, flat card layout (no radius) */
--kp-radius-badge: 3px; /* Clean rectangular badges */
/* Transitions */
--kp-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 3. TYPOGRAPHY OVERRIDES (Main Content & Global Typography) */
body,
p,
span,
a,
li,
input,
textarea,
select,
.product-title,
.price,
.banner-text,
h1, h2, h3, h4, h5, h6,
.widget-title {
font-family: var(--kp-font) !important;
}
/* Page titles and main headings inside content body */
#main h1, #main h2, #main h3, #main h4, #main h5, #main h6,
.entry-title {
font-weight: 800 !important;
color: var(--kp-black) !important;
letter-spacing: -0.01em !important;
}
/* Dynamic Category Page Title Styling like KP */
.page-title-div h1.page-title,
.archive-title,
.woocommerce-products-header__title {
font-size: 24px !important;
font-weight: 900 !important;
text-transform: uppercase !important;
color: var(--kp-black) !important;
margin-top: 15px !important;
margin-bottom: 25px !important;
}
/* 4. PRODUCT CATALOG GRID AESTHETICS (DESKTOP BODY) - ONLY ON ARCHIVE/CATEGORY PAGES & CUSTOM PAGES */
@media (min-width: 850px) {
/* Borderless, Shadowless Clean Grid */
.archive .products.row .col,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) .products.row .col {
padding: 0 10px 20px 10px !important;
}
.archive .product-small,
.archive .product-small.box,
.archive .product-box,
.archive .product-box .box,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) .product-small,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) .product-small.box,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) .product-box,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) .product-box .box {
border: none !important;
border-radius: var(--kp-radius-card) !important;
box-shadow: none !important;
background-color: transparent !important;
overflow: visible !important;
transition: transform var(--kp-transition) !important;
}
/* Image Container Style */
.archive .product-small .box-image,
.archive .product-box .box-image,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) .product-small .box-image,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) .product-box .box-image {
border: none !important;
border-radius: var(--kp-radius-card) !important;
background-color: #FFFFFF !important;
margin-bottom: 12px !important;
overflow: hidden;
}
/* Gentle scale on hover */
.archive .product-small:hover .box-image img,
.archive .product-box:hover .box-image img,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) .product-small:hover .box-image img,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) .product-box:hover .box-image img {
transform: scale(1.04) !important;
}
/* Text details layout */
.archive .product-small .box-text,
.archive .product-box .box-text,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) .product-small .box-text,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) .product-box .box-text {
padding: 5px 0 !important;
background: transparent !important;
border: none !important;
text-align: center !important;
}
/* Product names on desktop: normal-case, bold, centered */
.archive .product-small .name,
.archive .product-box .name,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) .product-small .name,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) .product-box .name {
font-size: 15px !important;
font-weight: 700 !important;
line-height: 1.35 !important;
text-transform: none !important;
height: auto !important;
margin-bottom: 6px !important;
}
.archive .product-small .name a,
.archive .product-box .name a,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) .product-small .name a,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) .product-box .name a {
color: var(--kp-black) !important;
transition: color var(--kp-transition);
}
.archive .product-small:hover .name a,
.archive .product-box:hover .name a,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) .product-small:hover .name a,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) .product-box:hover .name a {
color: var(--kp-green) !important;
text-decoration: underline !important;
}
}
/* 5. CUSTOM MOBILE LAYOUT OVERRIDES (Custom Design List View in Body) - ONLY ON ARCHIVE/CATEGORY PAGES & CUSTOM PAGES */
@media (max-width: 849px) {
/* Force grid columns to be full width (1-column list) with high ID specificity */
.archive #main .products.row,
.archive #main .products.row-small,
.archive #main .row.small-columns-2,
.archive #main .row.small-columns-1,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) #main .products.row,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) #main .products.row-small,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) #main .row.small-columns-2,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) #main .row.small-columns-1 {
display: block !important;
margin-left: 0 !important;
margin-right: 0 !important;
width: 100% !important;
}
.archive #main .products.row .col,
.archive #main .products.row-small .col,
.archive #main .row.small-columns-2 .col,
.archive #main .row.small-columns-1 .col,
.archive #main .products .col,
.archive #main .products-grid .col,
.archive #main .row-small .col,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) #main .products.row .col,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) #main .products.row-small .col,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) #main .row.small-columns-2 .col,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) #main .row.small-columns-1 .col,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) #main .products .col,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) #main .products-grid .col,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) #main .row-small .col {
width: 100% !important;
max-width: 100% !important;
flex-basis: 100% !important;
padding: 0 !important;
margin-bottom: 0 !important;
}
/* Transform product container box into a horizontal flex container.
Prefixing with #main ID selector ensures this beats Flatsome's class specificity rules. */
.archive #main .product-small,
.archive #main .product-small.box,
.archive #main .product-small .box,
.archive #main .product-small.box-vertical,
.archive #main .product-small .box-vertical,
.archive #main .product-small.box-normal,
.archive #main .product-small .box-normal,
.archive #main .product-small.box-hover,
.archive #main .product-small .box-hover,
.archive #main .product-box,
.archive #main .product-box.box,
.archive #main .product-box .box,
.archive #main .product-box.box-vertical,
.archive #main .product-box .box-vertical,
.archive #main .product-box.box-normal,
.archive #main .product-box .box-normal,
.archive #main .product-box.box-hover,
.archive #main .product-box .box-hover,
.archive #main .box-vertical,
.archive #main .box-normal,
.archive #main .box-hover,
.archive #main .products .box,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) #main .product-small,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) #main .product-small.box,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) #main .product-small .box,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) #main .product-small.box-vertical,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) #main .product-small .box-vertical,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) #main .product-small.box-normal,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) #main .product-small .box-normal,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) #main .product-small.box-hover,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) #main .product-small .box-hover,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) #main .product-box,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) #main .product-box.box,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) #main .product-box .box,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) #main .product-box.box-vertical,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) #main .product-box .box-vertical,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) #main .product-box.box-normal,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) #main .product-box .box-normal,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) #main .product-box.box-hover,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) #main .product-box .box-hover,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) #main .box-vertical,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) #main .box-normal,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) #main .box-hover,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) #main .products .box {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: flex-start !important;
background-color: #FFFFFF !important;
border: none !important;
border-bottom: 1px solid var(--kp-border) !important; /* Divider lines */
border-radius: 0 !important;
box-shadow: none !important;
padding: 12px 15px !important;
margin: 0 !important;
transform: none !important;
overflow: hidden !important;
width: 100% !important;
min-height: auto !important;
}
/* Left Column: Product Image Container with high specificity ID prefix */
.archive #main .product-small .box-image,
.archive #main .product-box .box-image,
.archive #main .box-image,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) #main .product-small .box-image,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) #main .product-box .box-image,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) #main .box-image {
width: 35% !important;
max-width: 110px !important;
flex-shrink: 0 !important;
border: none !important;
border-radius: 0 !important;
background-color: transparent !important;
margin: 0 !important;
padding: 0 !important;
position: relative !important;
}
/* Force a square layout ratio inside the flex item */
.archive #main .product-small .box-image a,
.archive #main .product-box .box-image a,
.archive #main .box-image a,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) #main .product-small .box-image a,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) #main .product-box .box-image a,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) #main .box-image a {
display: block !important;
width: 100% !important;
position: relative !important;
padding-bottom: 100% !important;
height: 0 !important;
}
/* Position image absolutely to fit the square padding-bottom container */
.archive #main .product-small .box-image img,
.archive #main .product-box .box-image img,
.archive #main .box-image img,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) #main .product-small .box-image img,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) #main .product-box .box-image img,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) #main .box-image img {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
}
/* Right Column: Details Container with high specificity ID prefix */
.archive #main .product-small .box-text,
.archive #main .product-box .box-text,
.archive #main .box-text,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) #main .product-small .box-text,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) #main .product-box .box-text,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) #main .box-text {
width: 65% !important;
padding: 0 0 0 16px !important;
margin: 0 !important;
text-align: left !important;
border: none !important;
background: transparent !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: center !important;
}
/* Product names on mobile: Uppercase, Left-aligned, Bold */
.archive #main .product-small .name,
.archive #main .product-box .name,
.archive #main .name,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) #main .product-small .name,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) #main .product-box .name,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) #main .name {
font-size: 13px !important;
font-weight: 700 !important;
line-height: 1.35 !important;
text-transform: uppercase !important;
margin-bottom: 4px !important;
height: auto !important;
display: block !important;
-webkit-line-clamp: unset !important;
overflow: visible !important;
text-align: left !important;
}
.archive #main .product-small .name a,
.archive #main .product-box .name a,
.archive #main .name a,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) #main .product-small .name a,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) #main .product-box .name a,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) #main .name a {
color: var(--kp-black) !important;
}
/* Custom metadata on mobile */
.archive #main .product-small .box-text .prodcat,
.archive #main .product-box .box-text .prodcat,
.archive #main .box-text .prodcat,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) #main .product-small .box-text .prodcat,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) #main .product-box .box-text .prodcat,
.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout) #main .box-text .prodcat {
font-size: 11px !important;
color: var(--kp-text-muted) !important;
margin-top: 2px !important;
text-transform: capitalize;
text-align: left !important;
}
}
/* 6. WOOCOMMERCE PRICING TYPOGRAPHY */
.price {
font-weight: 800 !important;
font-size: 15px !important;
color: var(--kp-black) !important;
}
/* Centering details on desktop vs left-aligning on mobile */
@media (min-width: 850px) {
.price {
justify-content: center !important;
display: flex !important;
margin-top: 5px !important;
}
}
@media (max-width: 849px) {
.price {
justify-content: flex-start !important;
display: flex !important;
margin-top: 6px !important;
}
}
/* Discount / Sale pricing colors */
.price del,
.price del span {
color: var(--kp-text-muted) !important;
font-weight: 400 !important;
font-size: 0.85em !important;
text-decoration: line-through !important;
margin-right: 6px !important;
}
.price ins,
.price ins span {
color: var(--kp-red) !important;
background: none !important;
text-decoration: none !important;
font-weight: 800 !important;
}
/* 7. SALE BADGES (KP Flat Red Pill Badges in Body) */
.badge-container {
top: 8px !important;
left: 8px !important;
}
.badge-container .badge-circle,
.badge-container .badge-inner {
border-radius: 0 !important;
width: auto !important;
height: auto !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
display: block !important;
}
.badge-container .onsale {
display: inline-block !important;
background-color: var(--kp-red) !important;
color: #FFFFFF !important;
font-family: var(--kp-font) !important;
font-weight: 700 !important;
font-size: 0 !important;
padding: 2px 4px !important;
border-radius: 2px !important;
line-height: 1.1 !important;
letter-spacing: 0.02em !important;
box-shadow: none !important;
height: auto !important;
width: auto !important;
}
.badge-container .onsale::after {
content: "SALE OFF" !important;
font-size: 7px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
color: #FFFFFF !important;
display: inline-block !important;
line-height: 1 !important;
}
@media (min-width: 768px) {
.badge-container .onsale {
padding: 3px 6px !important;
}
.badge-container .onsale::after {
font-size: 9px !important;
}
}
/* Hide out of stock text inside image, make standard badge */
.out-of-stock-label {
background-color: #777777 !important;
color: #FFFFFF !important;
font-weight: 700 !important;
font-size: 10px !important;
padding: 3px 6px !important;
border-radius: var(--kp-radius-badge) !important;
}
/* 8. SHARP BUTTONS (Custom Style in Body) */
#main .button,
#main button,
#main input[type="submit"],
#main input[type="button"],
.add_to_cart_button,
.single_add_to_cart_button {
font-family: var(--kp-font) !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
border-radius: var(--kp-radius-button) !important;
padding: 10px 24px !important;
height: auto !important;
min-height: 40px;
background-color: var(--kp-green) !important;
color: #FFFFFF !important;
border: 1px solid var(--kp-green) !important;
transition: all var(--kp-transition) !important;
box-shadow: none !important;
display: inline-flex;
align-items: center;
justify-content: center;
}
#main .button:hover,
#main button:hover,
#main input[type="submit"]:hover,
.add_to_cart_button:hover,
.single_add_to_cart_button:hover {
background-color: var(--kp-green-dark) !important;
border-color: var(--kp-green-dark) !important;
color: #FFFFFF !important;
}
/* Secondary Button styling */
#main .button.alt,
#main .button.secondary {
background-color: var(--kp-bg-light) !important;
color: var(--kp-black) !important;
border-color: var(--kp-border) !important;
}
#main .button.alt:hover,
#main .button.secondary:hover {
background-color: var(--kp-black) !important;
color: #FFFFFF !important;
border-color: var(--kp-black) !important;
}
/* 9. INPUT FIELDS & QUANTITY SELECTORS IN BODY */
#main input[type="text"],
#main input[type="email"],
#main input[type="password"],
#main input[type="search"],
#main input[type="number"],
#main input[type="tel"],
#main select,
#main textarea {
border-radius: var(--kp-radius-input) !important;
border: 1px solid var(--kp-border) !important;
padding: 8px 12px !important;
background-color: #FFFFFF !important;
color: var(--kp-black) !important;
font-family: var(--kp-font) !important;
font-size: 14px !important;
transition: border-color var(--kp-transition), box-shadow var(--kp-transition) !important;
}
#main input:focus,
#main select:focus,
#main textarea:focus {
border-color: var(--kp-green) !important;
box-shadow: 0 0 0 2px rgba(30, 89, 41, 0.15) !important;
outline: none !important;
}
/* Quantity input styling */
.quantity {
display: inline-flex !important;
border-radius: var(--kp-radius-input) !important;
overflow: hidden;
border: 1px solid var(--kp-border) !important;
}
.quantity input[type="number"] {
border: none !important;
border-radius: 0 !important;
text-align: center !important;
padding: 8px 5px !important;
width: 40px !important;
}
.quantity .plus,
.quantity .minus {
background-color: var(--kp-bg-light) !important;
border: none !important;
color: var(--kp-black) !important;
padding: 8px 12px !important;
font-weight: 700 !important;
cursor: pointer;
}
.quantity .plus:hover,
.quantity .minus:hover {
background-color: var(--kp-border) !important;
}
/* 10. BREADCRUMBS & META */
.woocommerce-breadcrumb {
font-size: 12px !important;
color: var(--kp-text-muted) !important;
padding: 10px 0 !important;
text-transform: uppercase;
}
.woocommerce-breadcrumb a {
color: var(--kp-text-muted) !important;
}
.woocommerce-breadcrumb a:hover {
color: var(--kp-green) !important;
}
/* 11. COLLAPSIBLE SEO CATEGORY DESCRIPTION IN BODY (Like KP) */
.category-description {
position: relative;
overflow: hidden;
margin-bottom: 20px;
}
.category-description.collapsed {
max-height: 48px;
}
.category-description.collapsed::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 20px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}
.kp-read-more-btn {
display: inline-block;
font-size: 11px;
color: var(--kp-green);
font-weight: 700;
text-transform: uppercase;
cursor: pointer;
margin-top: 5px;
text-decoration: underline;
}
/* ==========================================================================
SINGLE PRODUCT PAGE OVERRIDES (CFS STYLE & FLAT DETAILS)
========================================================================== */
/* Breadcrumbs on single product page */
.woocommerce-breadcrumb {
font-family: var(--kp-font) !important;
font-size: 11px !important;
font-weight: 500 !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
color: var(--kp-text-muted) !important;
margin-bottom: 20px !important;
padding: 10px 0 !important;
border: none !important;
}
.woocommerce-breadcrumb a {
color: var(--kp-text-muted) !important;
}
.woocommerce-breadcrumb a:hover {
color: var(--kp-green) !important;
text-decoration: underline !important;
}
/* Product Title */
.product-info h1.product_title,
.product-summary h1.product_title,
.summary.entry-summary h1.product-title,
.summary.entry-summary h1.product_title {
font-family: var(--kp-font) !important;
font-size: 26px !important;
font-weight: 900 !important;
text-transform: uppercase !important;
letter-spacing: -0.02em !important;
color: var(--kp-black) !important;
margin-top: 0 !important;
margin-bottom: 12px !important;
line-height: 1.2 !important;
}
@media (max-width: 549px) {
.product-info h1.product_title,
.product-summary h1.product_title,
.summary.entry-summary h1.product-title,
.summary.entry-summary h1.product_title {
font-size: 20px !important;
}
}
/* Price */
.product-info .price,
.product-summary .price,
.summary.entry-summary .price {
font-family: var(--kp-font) !important;
font-size: 28px !important;
font-weight: 900 !important;
color: var(--kp-black) !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
margin-bottom: 20px !important;
line-height: 1 !important;
}
.product-info .price del,
.product-summary .price del,
.summary.entry-summary .price del {
color: var(--kp-text-muted) !important;
font-weight: 400 !important;
font-size: 20px !important;
text-decoration: line-through !important;
margin-right: 12px !important;
}
.product-info .price ins,
.product-summary .price ins,
.summary.entry-summary .price ins {
color: var(--kp-red) !important;
text-decoration: none !important;
font-weight: 900 !important;
background: transparent !important;
}
.product-info .price .amount,
.product-summary .price .amount,
.summary.entry-summary .price .amount {
color: inherit !important;
font-weight: inherit !important;
}
/* Stock status and meta row */
.woocommerce-variation-availability,
.product-summary .stock,
.summary.entry-summary .stock {
font-family: var(--kp-font) !important;
font-size: 13px !important;
font-weight: 700 !important;
text-transform: none !important;
letter-spacing: 0 !important;
margin-bottom: 15px !important;
}
.product-summary .stock.in-stock::before,
.summary.entry-summary .stock.in-stock::before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
background-color: #10B981;
border-radius: 50%;
margin-right: 8px;
vertical-align: middle;
}
.product-summary .stock.in-stock,
.summary.entry-summary .stock.in-stock {
color: var(--kp-black) !important;
}
.product-summary .stock.out-of-stock,
.summary.entry-summary .stock.out-of-stock {
color: var(--kp-red) !important;
}
/* Product Description / Short Description */
.woocommerce-product-details__short-description {
font-family: var(--kp-font) !important;
font-size: 14px !important;
line-height: 1.6 !important;
color: var(--kp-text-dark) !important;
margin-bottom: 25px !important;
}
/* Reset Variations and Extra Options Table Layout to match CFS */
html body.single-product table.variations,
html body.single-product table.variations tbody,
html body.single-product table.thwepo-extra-options,
html body.single-product table.thwepo-extra-options tbody {
display: block !important;
border: none !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
width: 100% !important;
}
html body.single-product table.variations tr,
html body.single-product table.variations td,
html body.single-product table.thwepo-extra-options tr,
html body.single-product table.thwepo-extra-options td {
border: none !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
}
/* Target rows for spacing with high specificity */
html body.single-product .variations tbody tr,
html body.single-product table.thwepo-extra-options tbody tr,
html body.single-product .product-addon,
html body.single-product .wc-pao-addon,
html body.single-product .yith-wapo-addon,
html body.single-product .yith-wapo-block,
html body.single-product form.cart .product-addon,
html body.single-product form.cart .wc-pao-addon {
margin-top: 0 !important;
margin-bottom: 24px !important; /* Perfect uniform gap between rows */
display: flex !important;
flex-direction: row !important;
align-items: center !important;
width: 100% !important;
flex-wrap: nowrap !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
box-shadow: none !important;
}
/* Reset top spacing for the variation cart wrappers and thwepo table */
html body.single-product div.product form.cart .single_variation_wrap,
html body.single-product div.product form.variations_form .single_variation_wrap,
html body.single-product form.cart .single_variation_wrap,
html body.single-product .variations_form .single_variation_wrap,
html body.single-product .single_variation_wrap,
html body.single-product div.product form.cart .woocommerce-variation-add-to-cart,
html body.single-product div.product form.variations_form .woocommerce-variation-add-to-cart,
html body.single-product form.cart .woocommerce-variation-add-to-cart,
html body.single-product .variations_form .woocommerce-variation-add-to-cart,
html body.single-product .woocommerce-variation-add-to-cart {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
border: none !important;
border-top: none !important;
border-bottom: none !important;
background: transparent !important;
box-shadow: none !important;
}
html body.single-product div.product form.cart .woocommerce-variation,
html body.single-product div.product form.variations_form .woocommerce-variation,
html body.single-product form.cart .woocommerce-variation,
html body.single-product .variations_form .woocommerce-variation,
html body.single-product .woocommerce-variation {
margin-top: 0 !important;
margin-bottom: 24px !important; /* Spacing below price/stock when visible */
padding-top: 0 !important;
padding-bottom: 0 !important;
border: none !important;
border-top: none !important;
border-bottom: none !important;
background: transparent !important;
box-shadow: none !important;
}
html body.single-product .woocommerce-variation:empty {
display: none !important;
margin: 0 !important;
padding: 0 !important;
height: 0 !important;
}
/* Strip default boxed/bordered styling from WooCommerce Product Addons */
html body.single-product .wc-pao-addons-container,
html body.single-product .wc-pao-addon-container,
html body.single-product .wc-pao-addons,
html body.single-product .yith-wapo-container,
html body.single-product form.cart .wc-pao-addons-container,
html body.single-product form.cart .wc-pao-addon-container,
html body.single-product form.cart .yith-wapo-container,
html body.single-product .product-addons {
border: none !important;
border-top: none !important;
border-bottom: none !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;
}
/* Prevent double-spacing and nested margins on inner wraps */
html body.single-product .wc-pao-addons-container .wc-pao-addon-wrap,
html body.single-product .wc-pao-addons-container .form-row,
html body.single-product .product-addon .wc-pao-addon-wrap,
html body.single-product .product-addon .form-row,
html body.single-product form.cart .wc-pao-addon-wrap,
html body.single-product form.cart .form-row {
margin: 0 !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
box-shadow: none !important;
display: block !important;
width: 100% !important;
}
/* Hide the empty/redundant personalisations heading to match CFS design and remove extra white space */
html body.single-product .product-addon-personalize-with-your-own-name-and-number,
html body.single-product .product-addon-personalise-with-your-own-name-and-number {
display: none !important;
margin: 0 !important;
padding: 0 !important;
height: 0 !important;
}
/* Uniform Label Styling */
html body.single-product .variations td.label,
html body.single-product table.thwepo-extra-options td.label,
html body.single-product table.thwepo-extra-options td.label label,
.wc-pao-addon label,
.wc-pao-addon-name,
.product-addon > label,
.product-addon .addon-name,
.yith-wapo-addon > label,
.yith-wapo-block > label {
width: 150px !important;
min-width: 150px !important;
max-width: 150px !important;
flex-shrink: 0 !important;
font-family: var(--kp-font) !important;
font-weight: 700 !important;
font-size: 13px !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
color: var(--kp-text-muted) !important;
background-color: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
text-align: left !important;
display: inline-flex !important;
align-items: center !important;
height: auto !important;
line-height: 1.2 !important;
}
/* Value cell alignment */
html body.single-product .variations td.value,
html body.single-product table.thwepo-extra-options td.value,
.wc-pao-addon-wrap > div,
.product-addon > div,
.yith-wapo-addon > div,
.yith-wapo-block > div {
flex-grow: 1 !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
width: auto !important;
}
/* Styling Select and Input elements */
html body.single-product .variations td.value select,
html body.single-product table.thwepo-extra-options td.value input[type="text"],
html body.single-product table.thwepo-extra-options td.value input[type="number"],
html body.single-product table.thwepo-extra-options td.value select,
.wc-pao-addon input[type="text"],
.wc-pao-addon select,
.product-addon input[type="text"],
.product-addon select,
.yith-wapo-addon input[type="text"],
.yith-wapo-addon select,
.yith-wapo-block input[type="text"] {
width: 100% !important;
max-width: 320px !important; /* Consistent box width */
height: 42px !important;
border: 1px solid var(--kp-border) !important;
border-radius: var(--kp-radius-input) !important;
background-color: #FFFFFF !important;
font-family: var(--kp-font) !important;
font-size: 14px !important;
padding: 8px 12px !important;
box-sizing: border-box !important;
margin: 0 !important;
transition: border-color var(--kp-transition) !important;
}
html body.single-product .variations td.value select:focus,
html body.single-product table.thwepo-extra-options td.value input[type="text"]:focus,
html body.single-product table.thwepo-extra-options td.value input[type="number"]:focus,
html body.single-product table.thwepo-extra-options td.value select:focus,
.wc-pao-addon input[type="text"]:focus,
.wc-pao-addon select:focus,
.product-addon input[type="text"]:focus,
.product-addon select:focus {
border-color: var(--kp-green) !important;
outline: none !important;
}
/* Flatsome variation swatches overrides & Custom swatches */
.ux-swatches,
.kp-custom-swatches,
.variable-items-wrapper,
.swatches,
.swatch-wrapper {
display: flex !important;
gap: 10px !important;
flex-wrap: wrap !important;
margin-top: 5px !important;
margin-bottom: 5px !important;
padding: 0 !important;
list-style: none !important;
}
.ux-swatch,
.kp-swatch-item,
.variable-item,
.swatch,
.swatch-item,
.vi-wpvs-option {
min-width: 44px !important;
height: 44px !important;
padding: 0 12px !important;
border: 1.5px solid var(--kp-green) !important; /* Solid dark green border */
color: var(--kp-green) !important; /* Dark green text */
background-color: #FFFFFF !important;
border-radius: var(--kp-radius-input) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-weight: 700 !important;
font-size: 14px !important;
cursor: pointer !important;
transition: all var(--kp-transition) !important;
box-sizing: border-box !important;
margin: 0 !important;
}
.ux-swatch:hover,
.kp-swatch-item:hover,
.variable-item:hover,
.swatch:hover {
background-color: var(--kp-bg-light) !important;
opacity: 0.9;
}
/* Flatsome variation swatches overrides & Custom swatches with ultra-high specificity */
.kp-swatch-item.selected,
.kp-custom-swatches .kp-swatch-item.selected,
html body.single-product .ux-swatch.selected,
html body.single-product .ux-swatch.active,
html body.single-product .kp-swatch-item.selected,
html body.single-product .variable-item.selected,
html body.single-product .variable-item.active,
html body.single-product .swatch.selected,
html body.single-product .swatch.active,
html body.single-product .ux-swatches .ux-swatch.selected,
html body.single-product .ux-swatches .ux-swatch.active,
html body.single-product .kp-custom-swatches .kp-swatch-item.selected,
html body.single-product .variable-items-wrapper .variable-item.selected,
html body.single-product .variable-items-wrapper .variable-item.active {
border: 1.5px solid var(--kp-green) !important;
color: #FFFFFF !important;
background-color: var(--kp-green) !important;
background: var(--kp-green) !important;
font-weight: 800 !important;
}
/* Force text/span color inside selected swatches to be white */
.kp-swatch-item.selected *,
html body.single-product .ux-swatch.selected *,
html body.single-product .ux-swatch.active *,
html body.single-product .kp-swatch-item.selected *,
html body.single-product .variable-item.selected *,
html body.single-product .variable-item.active *,
html body.single-product .swatch.selected *,
html body.single-product .swatch.active * {
color: #FFFFFF !important;
font-weight: 800 !important;
}
.kp-swatch-item.selected:hover,
.kp-custom-swatches .kp-swatch-item.selected:hover,
html body.single-product .ux-swatch.selected:hover,
html body.single-product .ux-swatch.active:hover,
html body.single-product .kp-swatch-item.selected:hover,
html body.single-product .variable-item.selected:hover,
html body.single-product .variable-item.active:hover,
html body.single-product .swatch.selected:hover,
html body.single-product .swatch.active:hover,
html body.single-product .ux-swatches .ux-swatch.selected:hover,
html body.single-product .ux-swatches .ux-swatch.active:hover,
html body.single-product .kp-custom-swatches .kp-swatch-item.selected:hover,
html body.single-product .variable-items-wrapper .variable-item.selected:hover,
html body.single-product .variable-items-wrapper .variable-item.active:hover {
background-color: var(--kp-green) !important;
background: var(--kp-green) !important;
color: #FFFFFF !important;
opacity: 1 !important;
}
.kp-swatch-item.selected:hover *,
html body.single-product .ux-swatch.selected:hover *,
html body.single-product .ux-swatch.active:hover *,
html body.single-product .kp-swatch-item.selected:hover *,
html body.single-product .variable-item.selected:hover *,
html body.single-product .swatch.selected:hover * {
color: #FFFFFF !important;
}
/* Spacing between variations / select values on Mobile with high specificity */
@media (max-width: 549px) {
html body.single-product .variations tbody tr,
html body.single-product table.thwepo-extra-options tbody tr,
html body.single-product .product-addon,
html body.single-product .wc-pao-addon,
html body.single-product .yith-wapo-addon,
html body.single-product .yith-wapo-block {
flex-direction: column !important;
align-items: flex-start !important;
margin-bottom: 24px !important; /* Uniform 24px gap on mobile too */
}
html body.single-product .variations td.label,
html body.single-product table.thwepo-extra-options td.label,
html body.single-product .wc-pao-addon label,
html body.single-product .wc-pao-addon-name,
html body.single-product .product-addon > label,
html body.single-product .product-addon .addon-name,
html body.single-product .yith-wapo-addon > label,
html body.single-product .yith-wapo-block > label {
width: 100% !important;
max-width: 100% !important;
margin-bottom: 8px !important;
}
html body.single-product .variations td.value,
html body.single-product table.thwepo-extra-options td.value,
html body.single-product .wc-pao-addon-wrap > div,
html body.single-product .product-addon > div,
html body.single-product .yith-wapo-addon > div,
html body.single-product .yith-wapo-block > div {
width: 100% !important;
max-width: 100% !important;
}
.variations td.value select,
.wc-pao-addon input[type="text"],
.wc-pao-addon select,
.product-addon input[type="text"],
.product-addon select,
.yith-wapo-addon input[type="text"],
.yith-wapo-addon select,
.yith-wapo-block input[type="text"] {
max-width: 100% !important;
}
}
/* Size guide link */
.size-guide-link,
.size-chart-link,
.size-guide-btn,
a[href*="size-guide"],
a[href*="size-chart"],
.kp-size-guide-trigger {
color: var(--kp-green) !important;
font-weight: 700 !important;
text-decoration: underline !important;
font-size: 14px !important;
display: inline-block !important;
float: right !important;
margin-bottom: 10px !important;
}
/* Quantity input on single product */
.summary.entry-summary .quantity,
.product-info .quantity {
display: inline-flex !important;
border: 1px solid var(--kp-border) !important;
border-radius: var(--kp-radius-input) !important;
overflow: hidden !important;
height: 48px !important;
margin-right: 15px !important;
vertical-align: middle !important;
}
.summary.entry-summary .quantity input[type="number"],
.product-info .quantity input[type="number"] {
width: 50px !important;
height: 100% !important;
border: none !important;
border-radius: 0 !important;
text-align: center !important;
font-family: var(--kp-font) !important;
font-size: 15px !important;
font-weight: 700 !important;
color: var(--kp-black) !important;
padding: 0 !important;
background-color: #FFFFFF !important;
}
.summary.entry-summary .quantity .plus,
.summary.entry-summary .quantity .minus,
.product-info .quantity .plus,
.product-info .quantity .minus {
width: 35px !important;
height: 100% !important;
background-color: var(--kp-bg-light) !important;
border: none !important;
color: var(--kp-black) !important;
font-weight: 700 !important;
font-size: 16px !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: background-color var(--kp-transition) !important;
}
.summary.entry-summary .quantity .plus:hover,
.summary.entry-summary .quantity .minus:hover,
.product-info .quantity .plus:hover,
.product-info .quantity .minus:hover {
background-color: var(--kp-border) !important;
}
/* Buy / Add to cart buttons */
.single_add_to_cart_button {
font-family: var(--kp-font) !important;
font-size: 15px !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
height: 48px !important;
width: 100% !important;
max-width: 100% !important;
background-color: var(--kp-green) !important;
border: 1px solid var(--kp-green) !important;
color: #FFFFFF !important;
border-radius: var(--kp-radius-button) !important;
cursor: pointer !important;
transition: all var(--kp-transition) !important;
margin-top: 10px !important;
}
.single_add_to_cart_button:hover {
background-color: var(--kp-green-dark) !important;
border-color: var(--kp-green-dark) !important;
color: #FFFFFF !important;
}
.woocommerce-variation-add-to-cart {
display: flex !important;
align-items: center !important;
margin-top: 0 !important;
flex-wrap: wrap !important;
gap: 10px !important;
width: 100% !important;
}
/* Product Meta (SKU, Categories, Tags) */
.product_meta {
font-family: var(--kp-font) !important;
font-size: 11px !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
color: var(--kp-text-muted) !important;
border-top: 1px solid var(--kp-border) !important;
padding-top: 20px !important;
margin-top: 30px !important;
line-height: 2.0 !important;
}
.product_meta span {
display: block !important;
}
.product_meta a {
color: var(--kp-black) !important;
font-weight: 700 !important;
text-decoration: none !important;
}
.product_meta a:hover {
color: var(--kp-green) !important;
text-decoration: underline !important;
}
/* Dynamic Badges styling */
.kp-product-badges .kp-badge {
transition: opacity var(--kp-transition);
}
.kp-product-badges .kp-badge:hover {
opacity: 0.85;
}
/* Tabs Flattening & Block Layout Styling */
.woocommerce-tabs,
.tabbed-content {
border: none !important;
box-shadow: none !important;
margin-top: 40px !important;
}
/* Hide standard tab controls */
.woocommerce-tabs ul.nav,
.woocommerce-tabs ul.tabs,
.woocommerce-tabs ul.wc-tabs,
.woocommerce-tabs .nav-line-bottom {
display: none !important;
}
/* Force all panels to display block sequentially */
.woocommerce-tabs .tab-panels,
.woocommerce-tabs .tab-panels > .panel,
.woocommerce-tabs .panel.wc-tab,
.woocommerce-tabs .woocommerce-Tabs-panel,
.kp-flat-product-details .kp-flat-section {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: relative !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
width: 100% !important;
height: auto !important;
margin-bottom: 40px !important;
padding-bottom: 30px !important;
border-bottom: 1px solid var(--kp-border) !important;
box-shadow: none !important;
background: transparent !important;
}
.woocommerce-tabs .tab-panels > .panel:last-child,
.woocommerce-tabs .panel.wc-tab:last-child,
.woocommerce-tabs .woocommerce-Tabs-panel:last-child,
.kp-flat-product-details .kp-flat-section:last-child {
border-bottom: none !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* Make panel headings look like CFS section titles */
.woocommerce-tabs .panel h2,
.woocommerce-tabs .panel .fusion-woocommerce-tab-title,
.woocommerce-tabs .panel .woocommerce-Reviews-title,
.woocommerce-tabs .panel .woocommerce-tabs-title,
.woocommerce-tabs .woocommerce-Tabs-panel h2,
.kp-flat-product-details .kp-flat-section-title {
font-family: var(--kp-font) !important;
font-size: 20px !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: -0.01em !important;
color: var(--kp-black) !important;
border-bottom: 2px solid var(--kp-black) !important;
padding-bottom: 8px !important;
margin-top: 0 !important;
margin-bottom: 20px !important;
display: inline-block !important;
text-align: left !important;
}
/* Tables & Specifications */
.product-info table,
.woocommerce-tabs table,
.kp-flat-product-details table,
table.shop_attributes {
width: 100% !important;
border-collapse: collapse !important;
margin: 15px 0 !important;
font-size: 14px !important;
font-family: var(--kp-font) !important;
}
.product-info table th,
.product-info table td,
.woocommerce-tabs table th,
.woocommerce-tabs table td,
.kp-flat-product-details table th,
.kp-flat-product-details table td,
table.shop_attributes th,
table.shop_attributes td {
padding: 10px 12px !important;
text-align: left !important;
border-bottom: 1px solid var(--kp-border) !important;
background: transparent !important;
}
.product-info table th,
.woocommerce-tabs table th,
.kp-flat-product-details table th,
table.shop_attributes th {
font-weight: 700 !important;
text-transform: uppercase !important;
color: var(--kp-black) !important;
background-color: var(--kp-bg-light) !important;
border-bottom: 2px solid var(--kp-border) !important;
}
table.shop_attributes th {
width: 150px !important;
}
/* User Reviews List */
.star-rating {
color: var(--kp-green) !important;
font-size: 13px !important;
}
.star-rating::before {
color: var(--kp-border) !important;
}
.comment-text {
border: 1px solid var(--kp-border) !important;
border-radius: var(--kp-radius-input) !important;
padding: 15px !important;
margin-left: 0 !important;
margin-top: 10px !important;
background-color: #FFFFFF !important;
}
ol.commentlist li.review {
margin-bottom: 20px !important;
list-style: none !important;
}
ol.commentlist li.review img.avatar {
border-radius: 50% !important;
border: 1px solid var(--kp-border) !important;
padding: 2px !important;
}
/* Related and Upsell Products on Single Product Page */
.related.products,
.upsells.products {
border-top: 1px solid var(--kp-border) !important;
padding-top: 30px !important;
margin-top: 40px !important;
}
.related.products h2,
.upsells.products h2 {
font-family: var(--kp-font) !important;
font-size: 20px !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: -0.01em !important;
color: var(--kp-black) !important;
margin-bottom: 25px !important;
border-bottom: 2px solid var(--kp-black) !important;
padding-bottom: 8px !important;
display: inline-block !important;
}
/* LATE CSS FOOTER INJECTIONS FOR FLATSOME & ADDONS SPECIFICITY */
html body.single-product table.variations,
html body.single-product table.variations tbody {
display: block !important;
border: none !important;
border-bottom: none !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
width: 100% !important;
}
html body.single-product table.variations tr,
html body.single-product table.variations td {
border: none !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
}
html body.single-product .variations tbody tr,
html body.single-product .product-addon,
html body.single-product .wc-pao-addon,
html body.single-product .yith-wapo-addon,
html body.single-product .yith-wapo-block,
html body.single-product form.cart .product-addon,
html body.single-product form.cart .wc-pao-addon {
margin-top: 0 !important;
margin-bottom: 24px !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
width: 100% !important;
flex-wrap: nowrap !important;
padding: 0 !important;
border: none !important;
border-top: none !important;
border-bottom: none !important;
background: transparent !important;
box-shadow: none !important;
}
html body.single-product .wc-pao-addons-container,
html body.single-product .wc-pao-addon-container,
html body.single-product .wc-pao-addons,
html body.single-product .yith-wapo-container,
html body.single-product form.cart .wc-pao-addons-container,
html body.single-product form.cart .wc-pao-addon-container,
html body.single-product form.cart .yith-wapo-container,
html body.single-product .product-addons {
border: none !important;
border-top: none !important;
border-bottom: none !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;
}
html body.single-product .wc-pao-addons-container .wc-pao-addon-wrap,
html body.single-product .wc-pao-addons-container .form-row,
html body.single-product .product-addon .wc-pao-addon-wrap,
html body.single-product .product-addon .form-row,
html body.single-product form.cart .wc-pao-addon-wrap,
html body.single-product form.cart .form-row {
margin: 0 !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
box-shadow: none !important;
display: block !important;
width: 100% !important;
}
html body.single-product .product-addon-personalize-with-your-own-name-and-number,
html body.single-product .product-addon-personalise-with-your-own-name-and-number {
display: none !important;
margin: 0 !important;
padding: 0 !important;
height: 0 !important;
}
html body.single-product .ux-swatch.selected,
html body.single-product .ux-swatch.active,
html body.single-product .kp-swatch-item.selected,
html body.single-product .kp-swatch-item.active,
html body.single-product .variable-item.selected,
html body.single-product .variable-item.active,
html body.single-product .swatch.selected,
html body.single-product .swatch.active,
html body.single-product .swatch-item.selected,
html body.single-product .swatch-item.active,
html body.single-product .vi-wpvs-option-selected,
html body.single-product .vi-wpvs-option-wrap-selected,
html body.single-product .vi-wpvs-option.selected,
html body.single-product .vi-wpvs-option.active,
html body.single-product .yith-wccl-value.selected,
html body.single-product .yith-wccl-value.active,
html body.single-product .ux-swatches .ux-swatch.selected,
html body.single-product .ux-swatches .ux-swatch.active,
html body.single-product .kp-custom-swatches .kp-swatch-item.selected,
html body.single-product .variable-items-wrapper .variable-item.selected,
html body.single-product .variable-items-wrapper .variable-item.active {
border: 1.5px solid var(--kp-green) !important;
color: #FFFFFF !important;
background-color: var(--kp-green) !important;
background: var(--kp-green) !important;
font-weight: 800 !important;
}
html body.single-product .ux-swatch.selected *,
html body.single-product .ux-swatch.active *,
html body.single-product .kp-swatch-item.selected *,
html body.single-product .variable-item.selected *,
html body.single-product .variable-item.active *,
html body.single-product .swatch.selected *,
html body.single-product .swatch.active *,
html body.single-product .vi-wpvs-option-selected *,
html body.single-product .vi-wpvs-option-wrap-selected *,
html body.single-product .yith-wccl-value.selected * {
color: #FFFFFF !important;
font-weight: 800 !important;
}
html body.single-product .ux-swatch.selected:hover,
html body.single-product .ux-swatch.active:hover,
html body.single-product .kp-swatch-item.selected:hover,
html body.single-product .variable-item.selected:hover,
html body.single-product .variable-item.active:hover,
html body.single-product .swatch.selected:hover,
html body.single-product .swatch.active:hover,
html body.single-product .vi-wpvs-option-selected:hover,
html body.single-product .vi-wpvs-option.selected:hover,
html body.single-product .yith-wccl-value.selected:hover {
background-color: var(--kp-green) !important;
background: var(--kp-green) !important;
color: #FFFFFF !important;
opacity: 1 !important;
}
html body.single-product .ux-swatch.selected:hover *,
html body.single-product .ux-swatch.active:hover *,
html body.single-product .kp-swatch-item.selected:hover *,
html body.single-product .variable-item.selected:hover *,
html body.single-product .swatch.selected:hover * {
color: #FFFFFF !important;
}
@media (max-width: 549px) {
html body.single-product .variations tbody tr,
html body.single-product .product-addon,
html body.single-product .wc-pao-addon,
html body.single-product .yith-wapo-addon,
html body.single-product .yith-wapo-block {
flex-direction: column !important;
align-items: flex-start !important;
margin-bottom: 24px !important;
}
html body.single-product .variations td.label,
html body.single-product .wc-pao-addon label,
html body.single-product .wc-pao-addon-name,
html body.single-product .product-addon > label,
html body.single-product .product-addon .addon-name,
html body.single-product .yith-wapo-addon > label,
html body.single-product .yith-wapo-block > label {
width: 100% !important;
max-width: 100% !important;
margin-bottom: 8px !important;
}
html body.single-product .variations td.value,
html body.single-product .wc-pao-addon-wrap > div,
html body.single-product .product-addon > div,
html body.single-product .yith-wapo-addon > div,
html body.single-product .yith-wapo-block > div {
width: 100% !important;
max-width: 100% !important;
}
}
/* ==========================================================================
CART & CHECKOUT PAGES STYLING (CFS STYLE)
========================================================================= */
/* Disable Flatsome floating labels and position them cleanly above inputs */
.woocommerce-checkout .form-row,
html body.woocommerce-checkout .form-row {
position: relative !important;
margin-bottom: 20px !important;
}
.woocommerce-checkout .form-row label,
html body.woocommerce-checkout .form-row label {
position: static !important;
display: block !important;
width: 100% !important;
margin-bottom: 6px !important;
font-family: var(--kp-font) !important;
font-size: 13px !important;
font-weight: 700 !important;
text-transform: none !important;
color: var(--kp-black) !important;
letter-spacing: 0 !important;
pointer-events: auto !important;
opacity: 1 !important;
transform: none !important;
}
/* Style checkout inputs to be clean, bordered boxes, matching CFS */
.woocommerce-checkout .form-row input[type="text"],
.woocommerce-checkout .form-row input[type="email"],
.woocommerce-checkout .form-row input[type="tel"],
.woocommerce-checkout .form-row input[type="number"],
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .select2-container--default .select2-selection--single,
html body.woocommerce-checkout .form-row input[type="text"],
html body.woocommerce-checkout .form-row input[type="email"],
html body.woocommerce-checkout .form-row input[type="tel"],
html body.woocommerce-checkout .form-row input[type="number"],
html body.woocommerce-checkout .form-row select,
html body.woocommerce-checkout .form-row textarea,
html body.woocommerce-checkout .select2-container--default .select2-selection--single {
width: 100% !important;
height: 46px !important;
padding: 10px 15px !important;
border: 1px solid var(--kp-border) !important;
border-radius: var(--kp-radius-input) !important;
background-color: #FFFFFF !important;
color: var(--kp-black) !important;
font-family: var(--kp-font) !important;
font-size: 14px !important;
box-sizing: border-box !important;
margin: 0 !important;
line-height: normal !important;
}
.woocommerce-checkout .form-row textarea,
html body.woocommerce-checkout .form-row textarea {
height: 100px !important;
}
.woocommerce-checkout .select2-container--default .select2-selection--single,
html body.woocommerce-checkout .select2-container--default .select2-selection--single {
display: flex !important;
align-items: center !important;
height: 46px !important;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered,
html body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
padding: 0 !important;
line-height: 46px !important;
color: var(--kp-black) !important;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow,
html body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 46px !important;
}
/* Proceed to Checkout button on Cart page */
.woocommerce-cart .checkout-button,
.woocommerce-cart .checkout-button.button,
.woocommerce-cart .checkout-button.button.alt,
.woocommerce-cart a.checkout-button,
html body.woocommerce-cart .checkout-button,
html body.woocommerce-cart .checkout-button.button,
html body.woocommerce-cart .checkout-button.button.alt,
html body.woocommerce-cart a.checkout-button {
background-color: var(--kp-green) !important;
border-color: var(--kp-green) !important;
color: #FFFFFF !important;
font-family: var(--kp-font) !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
border-radius: var(--kp-radius-button) !important;
height: 48px !important;
line-height: 48px !important;
font-size: 15px !important;
text-align: center !important;
display: block !important;
width: 100% !important;
transition: all var(--kp-transition) !important;
}
.woocommerce-cart .checkout-button:hover,
.woocommerce-cart .checkout-button.button:hover,
.woocommerce-cart .checkout-button.button.alt:hover,
.woocommerce-cart a.checkout-button:hover,
html body.woocommerce-cart .checkout-button:hover,
html body.woocommerce-cart .checkout-button.button:hover,
html body.woocommerce-cart .checkout-button.button.alt:hover,
html body.woocommerce-cart a.checkout-button:hover {
background-color: var(--kp-green-dark) !important;
border-color: var(--kp-green-dark) !important;
color: #FFFFFF !important;
}
/* Checkout Place Order Button */
.woocommerce-checkout #place_order,
.woocommerce-checkout button[name="woocommerce_checkout_place_order"],
html body.woocommerce-checkout #place_order,
html body.woocommerce-checkout button[name="woocommerce_checkout_place_order"] {
background-color: var(--kp-green) !important;
border-color: var(--kp-green) !important;
color: #FFFFFF !important;
font-family: var(--kp-font) !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
border-radius: var(--kp-radius-button) !important;
height: 48px !important;
font-size: 15px !important;
cursor: pointer !important;
transition: all var(--kp-transition) !important;
width: 100% !important;
display: block !important;
}
.woocommerce-checkout #place_order:hover,
.woocommerce-checkout button[name="woocommerce_checkout_place_order"]:hover,
html body.woocommerce-checkout #place_order:hover,
html body.woocommerce-checkout button[name="woocommerce_checkout_place_order"]:hover {
background-color: var(--kp-green-dark) !important;
border-color: var(--kp-green-dark) !important;
color: #FFFFFF !important;
}
/* Coupon apply button */
.woocommerce-cart button[name="apply_coupon"],
.woocommerce-cart .coupon button.button,
html body.woocommerce-cart button[name="apply_coupon"],
html body.woocommerce-cart .coupon button.button {
background-color: var(--kp-green) !important;
border-color: var(--kp-green) !important;
color: #FFFFFF !important;
font-family: var(--kp-font) !important;
font-weight: 700 !important;
text-transform: uppercase !important;
border-radius: var(--kp-radius-button) !important;
height: 42px !important;
line-height: 42px !important;
padding: 0 20px !important;
transition: all var(--kp-transition) !important;
}
.woocommerce-cart button[name="apply_coupon"]:hover,
.woocommerce-cart .coupon button.button:hover,
html body.woocommerce-cart button[name="apply_coupon"]:hover,
html body.woocommerce-cart .coupon button.button:hover {
background-color: var(--kp-green-dark) !important;
border-color: var(--kp-green-dark) !important;
}
.woocommerce-cart button[name="update_cart"],
.woocommerce-cart input[name="update_cart"],
html body.woocommerce-cart button[name="update_cart"],
html body.woocommerce-cart input[name="update_cart"] {
background-color: #FFFFFF !important;
border: 1px solid var(--kp-border) !important;
color: var(--kp-text-dark) !important;
font-family: var(--kp-font) !important;
font-weight: 700 !important;
text-transform: uppercase !important;
border-radius: var(--kp-radius-button) !important;
height: 42px !important;
line-height: 42px !important;
padding: 0 20px !important;
transition: all var(--kp-transition) !important;
cursor: pointer !important;
}
.woocommerce-cart button[name="update_cart"]:hover,
.woocommerce-cart input[name="update_cart"]:hover,
html body.woocommerce-cart button[name="update_cart"]:hover,
html body.woocommerce-cart input[name="update_cart"]:hover {
background-color: var(--kp-bg-light) !important;
border-color: var(--kp-text-muted) !important;
color: var(--kp-black) !important;
}
/* Disabled state for update cart button */
.woocommerce-cart button[name="update_cart"]:disabled,
.woocommerce-cart button[name="update_cart"][disabled],
html body.woocommerce-cart button[name="update_cart"]:disabled,
html body.woocommerce-cart button[name="update_cart"][disabled] {
opacity: 0.5 !important;
background-color: #f3f4f6 !important;
border-color: #d1d5db !important;
color: #9ca3af !important;
cursor: not-allowed !important;
}
/* Quantity selector inside Cart form */
.woocommerce-cart-form .quantity,
html body.woocommerce-cart-form .quantity {
display: inline-flex !important;
border-radius: var(--kp-radius-input) !important;
overflow: hidden;
border: 1px solid var(--kp-border) !important;
height: 38px !important;
background-color: #FFFFFF !important;
}
.woocommerce-cart-form .quantity input[type="number"],
html body.woocommerce-cart-form .quantity input[type="number"] {
width: 45px !important;
height: 36px !important;
border: none !important;
text-align: center !important;
padding: 0 !important;
background-color: #FFFFFF !important;
font-family: var(--kp-font) !important;
font-size: 14px !important;
color: var(--kp-black) !important;
}
.woocommerce-cart-form .quantity input.button,
.woocommerce-cart-form .quantity .ux-quantity__button,
html body.woocommerce-cart-form .quantity input.button,
html body.woocommerce-cart-form .quantity .ux-quantity__button {
background-color: var(--kp-bg-light) !important;
border: none !important;
color: var(--kp-black) !important;
font-size: 16px !important;
font-weight: 700 !important;
cursor: pointer !important;
width: 36px !important;
height: 36px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
transition: background-color var(--kp-transition) !important;
}
.woocommerce-cart-form .quantity input.button:hover,
.woocommerce-cart-form .quantity .ux-quantity__button:hover,
html body.woocommerce-cart-form .quantity input.button:hover,
html body.woocommerce-cart-form .quantity .ux-quantity__button:hover {
background-color: var(--kp-border) !important;
}
/* Cart Table Styling */
.woocommerce-cart-form table.cart,
html body.woocommerce-cart-form table.cart {
border: none !important;
border-collapse: collapse !important;
}
.woocommerce-cart-form table.cart th,
html body.woocommerce-cart-form table.cart th {
font-family: var(--kp-font) !important;
font-weight: 700 !important;
font-size: 13px !important;
text-transform: uppercase !important;
color: var(--kp-black) !important;
border-bottom: 2px solid var(--kp-black) !important;
padding: 12px 15px !important;
letter-spacing: 0.05em !important;
background-color: transparent !important;
}
.woocommerce-cart-form table.cart td,
html body.woocommerce-cart-form table.cart td {
padding: 20px 15px !important;
border-bottom: 1px solid var(--kp-border) !important;
vertical-align: middle !important;
}
/* Headings on Cart and Checkout */
.woocommerce-checkout h3,
.woocommerce-checkout #ship-to-different-address span,
html body.woocommerce-checkout h3,
html body.woocommerce-checkout #ship-to-different-address span {
font-family: var(--kp-font) !important;
font-size: 16px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
color: var(--kp-black) !important;
margin-top: 25px !important;
margin-bottom: 15px !important;
border-bottom: 2px solid var(--kp-black) !important;
padding-bottom: 8px !important;
display: block !important;
}
/* Order Summary Box checkout */
.woocommerce-checkout #order_review,
html body.woocommerce-checkout #order_review {
background-color: #FFFFFF !important;
border: 1px solid var(--kp-border) !important;
border-radius: var(--kp-radius-input) !important;
padding: 25px !important;
}
.woocommerce-checkout #order_review_heading,
html body.woocommerce-checkout #order_review_heading {
font-family: var(--kp-font) !important;
font-size: 18px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
color: var(--kp-black) !important;
margin-top: 0 !important;
margin-bottom: 20px !important;
border-bottom: 2px solid var(--kp-black) !important;
padding-bottom: 10px !important;
}
/* Shipping Options checkout style */
.woocommerce-checkout ul#shipping_method,
html body.woocommerce-checkout ul#shipping_method {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.woocommerce-checkout ul#shipping_method li,
html body.woocommerce-checkout ul#shipping_method li {
padding: 12px 15px !important;
border: 1px solid var(--kp-border) !important;
border-radius: var(--kp-radius-input) !important;
margin-bottom: 10px !important;
background-color: #FFFFFF !important;
display: flex !important;
align-items: center !important;
}
.woocommerce-checkout ul#shipping_method li label,
html body.woocommerce-checkout ul#shipping_method li label {
font-weight: 700 !important;
font-size: 14px !important;
color: var(--kp-black) !important;
margin: 0 !important;
}
/* Payment Methods List checkout */
.woocommerce-checkout #payment ul.payment_methods,
html body.woocommerce-checkout #payment ul.payment_methods {
border: 1px solid var(--kp-border) !important;
border-radius: var(--kp-radius-input) !important;
padding: 15px !important;
background-color: var(--kp-bg-light) !important;
list-style: none !important;
margin-bottom: 20px !important;
}
.woocommerce-checkout #payment ul.payment_methods li,
html body.woocommerce-checkout #payment ul.payment_methods li {
padding: 10px 0 !important;
border-bottom: 1px solid var(--kp-border) !important;
}
.woocommerce-checkout #payment ul.payment_methods li label,
html body.woocommerce-checkout #payment ul.payment_methods li label {
font-weight: 700 !important;
font-size: 14px !important;
color: var(--kp-black) !important;
display: inline-block !important;
margin-left: 8px !important;
}
.woocommerce-checkout #payment .payment_box,
html body.woocommerce-checkout #payment .payment_box {
background-color: #FFFFFF !important;
border: 1px solid var(--kp-border) !important;
padding: 12px 15px !important;
border-radius: var(--kp-radius-input) !important;
margin-top: 8px !important;
font-size: 13px !important;
color: var(--kp-text-dark) !important;
line-height: 1.5 !important;
}
/* ==========================================================================
WOOCOMMERCE BLOCKS CHECKOUT - OVERLAPPING LABEL FIX
========================================================================== */
.wc-block-components-text-input,
.wc-blocks-components-select__container {
display: flex !important;
flex-direction: column !important;
position: relative !important;
margin-top: 15px !important;
margin-bottom: 15px !important;
height: auto !important;
padding: 0 !important;
}
/* Force text inputs to position labels at the top using flex order */
.wc-block-components-text-input label {
order: 1 !important;
position: static !important;
display: block !important;
transform: none !important;
font-size: 13px !important;
font-weight: 700 !important;
color: var(--kp-black, #000000) !important;
margin-bottom: 6px !important;
padding: 0 !important;
opacity: 1 !important;
pointer-events: auto !important;
height: auto !important;
line-height: 1.4 !important;
}
.wc-block-components-text-input input {
order: 2 !important;
position: relative !important;
display: block !important;
width: 100% !important;
height: 44px !important;
padding: 10px 15px !important;
font-size: 14px !important;
border: 1px solid var(--kp-border, #E5E5E5) !important;
border-radius: var(--kp-radius-input, 4px) !important;
background-color: #FFFFFF !important;
color: var(--kp-black, #000000) !important;
margin: 0 !important;
box-shadow: none !important;
transform: none !important;
padding-top: 10px !important;
}
/* Force selects to position labels at the top */
.wc-blocks-components-select__container .wc-blocks-components-select__label {
position: static !important;
display: block !important;
transform: none !important;
font-size: 13px !important;
font-weight: 700 !important;
color: var(--kp-black, #000000) !important;
margin-bottom: 6px !important;
padding: 0 !important;
opacity: 1 !important;
height: auto !important;
line-height: 1.4 !important;
}
.wc-blocks-components-select__container .wc-blocks-components-select__select {
position: relative !important;
display: block !important;
width: 100% !important;
height: 44px !important;
padding: 10px 15px !important;
font-size: 14px !important;
border: 1px solid var(--kp-border, #E5E5E5) !important;
border-radius: var(--kp-radius-input, 4px) !important;
background-color: #FFFFFF !important;
color: var(--kp-black, #000000) !important;
margin: 0 !important;
box-shadow: none !important;
transform: none !important;
}
/* Override any focus/active floating label animations/transforms entirely */
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input:focus-within label,
.wc-blocks-components-select__container.is-active label {
transform: none !important;
font-size: 13px !important;
font-weight: 700 !important;
color: var(--kp-black, #000000) !important;
padding-top: 0 !important;
}
.wc-block-components-text-input.is-active input,
.wc-block-components-text-input:focus-within input {
padding-top: 10px !important;
transform: none !important;
}
/* Focus styles for inputs and selects */
.wc-block-components-text-input input:focus,
.wc-blocks-components-select__container select:focus {
border-color: var(--kp-green, #1E5929) !important;
outline: none !important;
}
/* Correct expand SVG placement for WooCommerce Select Blocks when display is flex */
.wc-blocks-components-select__container .wc-blocks-components-select__expand {
position: absolute !important;
top: auto !important;
bottom: 10px !important;
right: 12px !important;
transform: none !important;
pointer-events: none !important;
}
/* ==========================================================================
KP SIZE CHART & MODAL POPUP STYLES
========================================================================== */
/* Bricolage Grotesque loaded via preconnect in wp_head */
/* Style specifically for the Size row on single product pages */
html body.single-product .variations tbody tr.kp-size-row {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
width: 100% !important;
margin-bottom: 8px !important; /* Pull closer to badges section */
}
/* Make the label cell span 100% and layout text + button side-by-side */
html body.single-product .variations tr.kp-size-row td.label {
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
margin-bottom: 10px !important;
padding: 0 !important;
}
/* Make the value cell (containing swatches) span 100% */
html body.single-product .variations tr.kp-size-row td.value {
width: 100% !important;
display: block !important;
padding: 0 !important;
margin: 0 !important;
}
/* Size chart button link style */
.kp-size-chart-link {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 13px !important;
font-weight: 700 !important;
color: var(--kp-green, #1E5929) !important;
text-transform: none !important;
letter-spacing: 0 !important;
text-decoration: none !important;
padding: 6px 12px !important;
border: 1.5px solid var(--kp-green, #1E5929) !important;
border-radius: var(--kp-radius-input, 4px) !important;
background-color: transparent !important;
cursor: pointer !important;
transition: all var(--kp-transition) !important;
line-height: 1 !important;
}
.kp-size-chart-link:hover {
background-color: var(--kp-green, #1E5929) !important;
color: #FFFFFF !important;
}
.kp-size-chart-link svg {
margin-left: 6px !important;
fill: currentColor !important;
width: 14px !important;
height: 14px !important;
transition: fill var(--kp-transition) !important;
}
/* Premium Modal Styles for Size Chart */
.kp-modal {
display: none; /* Hidden by default */
position: fixed;
z-index: 999999 !important; /* Stay on top of header, admin bar, everything */
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto; /* Enable scroll if needed */
background-color: rgba(0, 0, 0, 0.6); /* Black background with opacity */
backdrop-filter: blur(4px); /* Modern blur effect */
transition: opacity 0.3s ease;
align-items: center;
justify-content: center;
}
.kp-modal.is-open {
display: flex !important;
}
.kp-modal-content {
background-color: #FFFFFF !important;
margin: auto;
padding: 30px !important;
border-radius: 8px !important;
width: 90% !important;
max-width: 860px !important;
max-height: 85vh !important;
overflow-y: auto !important;
position: relative !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
animation: kpModalFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-sizing: border-box !important;
}
@keyframes kpModalFadeIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.kp-modal-close {
color: var(--kp-text-muted, #666666) !important;
position: absolute !important;
top: 15px !important;
right: 20px !important;
font-size: 28px !important;
font-weight: bold !important;
cursor: pointer !important;
transition: color 0.2s ease !important;
line-height: 1 !important;
}
.kp-modal-close:hover,
.kp-modal-close:focus {
color: var(--kp-black, #000000) !important;
text-decoration: none !important;
}
/* Scrollbar styling for modal content */
.kp-modal-content::-webkit-scrollbar {
width: 6px;
}
.kp-modal-content::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
}
.kp-modal-content::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 3px;
}
.kp-modal-content::-webkit-scrollbar-thumb:hover {
background: #aaa;
}
/* User's custom size chart CSS overrides */
.sz-page { max-width: 860px; padding: 0; font-family: 'Bricolage Grotesque', sans-serif; }
.sz-headline { font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #fff; background: var(--kp-green, #1E5929) !important; padding: 10px 16px; border-radius: 4px; display: inline-block; margin-bottom: 24px; }
.sz-section { margin-bottom: 36px; }
.sz-title { font-size: 16px; font-weight: 800; color: var(--kp-green, #1E5929) !important; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.sz-title::after { content: ''; flex: 1; height: 2px; background: var(--kp-green, #1E5929) !important; opacity: 0.15; }
.sz-overflow { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sz-table { width: 100%; border-collapse: collapse; min-width: 480px; }
.sz-table th { background: #111; color: #fff; padding: 11px 14px; font-size: 13px; font-weight: 700; text-align: center; }
.sz-table th:first-child { background: var(--kp-green, #1E5929) !important; text-align: left; min-width: 130px; }
.sz-table td { padding: 11px 14px; font-size: 14px; font-weight: 700; text-align: center; color: #111; border-bottom: 1px solid #eee; }
.sz-table td:first-child { background: var(--kp-green, #1E5929) !important; color: #fff; font-size: 13px; font-weight: 700; text-align: left; }
.sz-table tbody tr:nth-child(even) td:not(:first-child) { background: #f9f9f9; }
.sz-table tbody tr:hover td:not(:first-child) { background: rgba(30, 89, 41, 0.08) !important; }
.sz-highlight { background: #fff8e1; border-left: 4px solid #f9a825; padding: 10px 14px; border-radius: 4px; font-size: 13px; color: #5d4037; margin-top: 12px; line-height: 1.6; }
.sz-highlight strong { color: var(--kp-green, #1E5929) !important; }
.sz-note { font-size: 12px; color: #aaa; margin-top: 8px; }
/* ==========================================================================
HOMEPAGE TRUST BUILDING & UX OVERRIDES
========================================================================== */
/* 1. Hide out-of-stock products ONLY on the homepage to keep it fresh and actionable */
.home .products .outofstock {
display: none !important;
}
/* 2. Trust Bar Styles (Injected below Slider) */
.kp-trust-bar {
background-color: var(--kp-black, #000000) !important;
color: #FFFFFF !important;
padding: 14px 0 !important;
width: 100% !important;
box-sizing: border-box !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.kp-trust-bar-container {
max-width: 1200px !important;
margin: 0 auto !important;
display: flex !important;
flex-direction: row !important;
justify-content: space-around !important;
align-items: center !important;
flex-wrap: wrap !important;
padding: 0 15px !important;
gap: 15px !important;
}
.kp-trust-item {
display: flex !important;
align-items: center !important;
gap: 12px !important;
font-family: var(--kp-font) !important;
}
.kp-trust-icon {
font-size: 22px !important;
line-height: 1 !important;
}
.kp-trust-text {
display: flex !important;
flex-direction: column !important;
text-align: left !important;
}
.kp-trust-text strong {
font-size: 12px !important;
font-weight: 700 !important;
color: #FFFFFF !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
line-height: 1.2 !important;
}
.kp-trust-text span {
font-size: 10px !important;
color: #AAAAAA !important;
line-height: 1.2 !important;
margin-top: 2px !important;
}
/* Mobile Layout for Trust Bar (Grid layout for neatness) */
@media (max-width: 767px) {
.kp-trust-bar-container {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 12px 15px !important;
justify-items: start !important;
}
.kp-trust-item {
width: 100% !important;
}
}
/* 3. Optimize homepage Hero Slider text and button overlay for high-readability */
.home .slider .text-box {
background-color: rgba(0, 0, 0, 0.35) !important; /* Soft overlay to increase contrast */
padding: 24px 30px !important;
border-radius: var(--kp-radius-input, 4px) !important;
backdrop-filter: blur(2px);
}
.home .slider .text-box h2,
.home .slider .text-box h3,
.home .slider .text-box p {
text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7) !important;
}
.home .slider .text-box .button {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}
/* 4. Fix main menu overlapping search results by bringing search results to the front */
.live-search-results,
.autocomplete-suggestions {
z-index: 99999 !important;
}
/* 5. Checkout Details Page: Interactive Cart Controls */
.kp-checkout-item-controls {
display: flex !important;
align-items: center !important;
gap: 15px !important;
margin-top: 10px !important;
padding-top: 8px !important;
border-top: 1px dashed #e5e5e5 !important;
width: 100% !important;
}
.kp-checkout-qty-selector {
display: inline-flex !important;
align-items: center !important;
background-color: #f5f5f5 !important;
border-radius: 4px !important;
padding: 2px !important;
border: 1px solid #e0e0e0 !important;
}
.kp-checkout-qty-btn {
background: none !important;
border: none !important;
color: #333 !important;
font-size: 16px !important;
font-weight: bold !important;
width: 26px !important;
height: 26px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 3px !important;
transition: background-color 0.2s, color 0.2s !important;
}
.kp-checkout-qty-btn:hover {
background-color: #e0e0e0 !important;
color: #000 !important;
}
.kp-checkout-qty-btn:active {
background-color: #ccc !important;
}
.kp-checkout-qty-val {
font-size: 13px !important;
font-weight: 600 !important;
color: #333 !important;
min-width: 22px !important;
text-align: center !important;
display: inline-block !important;
}
.kp-checkout-remove-btn {
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
font-size: 12px !important;
color: #777 !important;
text-decoration: none !important;
transition: color 0.2s !important;
font-weight: 500 !important;
}
.kp-checkout-remove-btn:hover {
color: #e31523 !important; /* Premium brand red */
text-decoration: none !important;
}
.kp-checkout-remove-btn svg {
display: inline-block !important;
vertical-align: middle !important;
}
/* Loading overlay for checkout review order block */
.woocommerce-checkout-review-order.kp-loading {
position: relative !important;
pointer-events: none !important;
}
.woocommerce-checkout-review-order.kp-loading::after {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background: rgba(255, 255, 255, 0.7) !important;
z-index: 99 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 4px !important;
}
.woocommerce-checkout-review-order.kp-loading::before {
content: "" !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
width: 30px !important;
height: 30px !important;
margin-top: -15px !important;
margin-left: -15px !important;
border: 3px solid rgba(0, 0, 0, 0.1) !important;
border-top-color: #e31523 !important;
border-radius: 50% !important;
animation: kp-spin 0.8s linear infinite !important;
z-index: 100 !important;
}
@keyframes kp-spin {
to { transform: rotate(360deg); }
}
/* 6. Single Product Page: Trust Badges Card */
.kp-promo-container {
width: 100% !important;
margin-top: 15px !important;
margin-bottom: 20px !important;
}
.kp-qty-discount-notice {
margin-bottom: 15px !important;
}
.kp-trust-badges-card {
background-color: #eaf2eb !important; /* Premium light mint background */
border: 1px solid #d0ebd6 !important;
border-radius: 8px !important;
padding: 1.25rem !important;
box-sizing: border-box !important;
width: 100% !important;
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 20px !important;
}
.kp-trust-badge-item {
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
/* Desktop default: 4 columns, centered wrapping */
flex: 0 0 calc(25% - 15px) !important;
max-width: calc(25% - 15px) !important;
}
.kp-trust-svg {
width: 22px !important;
height: 22px !important;
display: inline-block !important;
stroke: #1E5929 !important; /* Brand main green */
stroke-width: 2 !important;
fill: none !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
margin: 0 auto !important;
}
.kp-trust-svg * {
fill: none !important;
stroke: #1E5929 !important;
stroke-width: 2 !important;
}
.kp-trust-title {
font-size: 13px !important;
font-weight: 600 !important;
margin: 6px 0 2px 0 !important;
color: #111111 !important;
line-height: 1.3 !important;
font-family: inherit !important;
}
.kp-trust-desc {
font-size: 12px !important;
color: #444444 !important;
margin: 0 !important;
line-height: 1.4 !important;
font-family: inherit !important;
}
/* Tablet & Mobile: 3 columns (exactly 2 rows) */
@media (max-width: 991px) {
.kp-trust-badges-card {
gap: 15px 8px !important;
padding: 1rem 0.5rem !important;
}
.kp-trust-badge-item {
flex: 0 0 calc(33.33% - 6px) !important;
max-width: calc(33.33% - 6px) !important;
}
.kp-trust-svg {
width: 20px !important;
height: 20px !important;
}
.kp-trust-title {
font-size: 11px !important;
margin: 4px 0 1px 0 !important;
}
.kp-trust-desc {
font-size: 9.5px !important;
line-height: 1.3 !important;
}
}
/* 7. Mobile Bottom Nav Styling & Scroll Optimization */
@media (max-width: 849px) {
.header-bottom {
padding: 0 !important;
min-height: auto !important;
overflow: visible !important; /* Allow dropdowns to overflow vertically */
max-width: 100vw !important;
width: 100% !important;
position: relative !important;
}
.header-bottom-nav.mobile-nav {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
overflow-x: auto !important; /* Enable horizontal scrolling */
-webkit-overflow-scrolling: touch !important;
gap: 6px !important;
padding: 8px 10px !important;
margin: 0 !important;
list-style: none !important;
width: 100% !important;
box-sizing: border-box !important;
scrollbar-width: none !important; /* Hide scrollbar Firefox */
}
.header-bottom-nav.mobile-nav::-webkit-scrollbar {
display: none !important; /* Hide scrollbar Chrome/Safari */
}
.header-bottom-nav.mobile-nav > li {
flex: 0 0 auto !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
position: relative !important;
overflow: visible !important;
}
.header-bottom-nav.mobile-nav > li > a {
font-size: 11px !important;
font-weight: 800 !important;
color: #143d18 !important;
padding: 6px 8px !important;
display: inline-block !important;
line-height: 1.4 !important;
white-space: nowrap !important;
text-transform: uppercase !important;
}
/* World Cup 2026 Mobile Highlight Pill */
.header-bottom-nav.mobile-nav > li.menu-item-wc2026-mobile > a.wc2026-link-mobile,
.header-bottom-nav.mobile-nav > li.menu-item-wc2026 > a.wc2026-link {
background-color: #E02B27 !important;
color: #FFFFFF !important;
font-weight: 800 !important;
border-radius: var(--kp-radius-button, 4px) !important;
padding: 6px 12px !important;
box-shadow: 0 2px 5px rgba(224, 43, 39, 0.2) !important;
}
/* Dropdown Containers on Mobile */
.header-bottom-nav.mobile-nav > li > .nav-dropdown,
.header-bottom-nav.mobile-nav > li > .mega-dropdown-container {
display: none !important;
position: fixed !important; /* Fixed viewport positioning so it's always centered on screen */
top: 115px !important; /* Position just below the mobile header bottom bar */
left: 5% !important;
width: 90% !important;
max-width: 90% !important;
background-color: #FFFFFF !important;
border: 1px solid #E5E5E5 !important;
border-top: 3px solid #143d18 !important;
box-shadow: 0 10px 30px rgba(0,0,0,0.18) !important;
z-index: 999999 !important;
box-sizing: border-box !important;
padding: 16px !important;
margin: 0 !important;
border-radius: 8px !important;
}
/* Show when active-dropdown class is on parent li */
.header-bottom-nav.mobile-nav > li.active-dropdown > .nav-dropdown,
.header-bottom-nav.mobile-nav > li.active-dropdown > .mega-dropdown-container {
display: block !important;
}
/* Style National Teams 2-column list on mobile */
.header-bottom-nav.mobile-nav > li.active-dropdown > .nav-dropdown-grid {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 8px 16px !important;
}
.header-bottom-nav.mobile-nav > li.active-dropdown > .nav-dropdown-grid li {
margin: 0 !important;
padding: 0 !important;
}
.header-bottom-nav.mobile-nav > li.active-dropdown > .nav-dropdown-grid li a {
font-size: 13px !important;
color: #333333 !important;
font-weight: 600 !important;
padding: 4px 0 !important;
display: block !important;
}
.header-bottom-nav.mobile-nav > li.active-dropdown > .nav-dropdown-grid li.view-all-col {
grid-column: span 2 !important;
border-top: 1px solid #EEEEEE !important;
margin-top: 4px !important;
padding-top: 8px !important;
}
.header-bottom-nav.mobile-nav > li.active-dropdown > .nav-dropdown-grid li.view-all-col a {
text-align: center !important;
font-weight: 800 !important;
color: #143d18 !important;
text-transform: uppercase !important;
}
/* Style Club Teams dropdown list on mobile */
.header-bottom-nav.mobile-nav > li.active-dropdown > .mega-dropdown-container {
max-height: 60vh !important;
overflow-y: auto !important;
}
.header-bottom-nav.mobile-nav > li.active-dropdown > .mega-dropdown-container .mega-dropdown-grid {
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
}
.header-bottom-nav.mobile-nav > li.active-dropdown > .mega-dropdown-container .mega-col-title {
font-size: 12px !important;
font-weight: 800 !important;
color: #143d18 !important;
border-bottom: 1px solid #E5E5E5 !important;
padding-bottom: 4px !important;
margin-bottom: 6px !important;
text-transform: uppercase !important;
}
.header-bottom-nav.mobile-nav > li.active-dropdown > .mega-dropdown-container .mega-col-list {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important; /* 2-column clubs for compact mobile view */
gap: 4px 12px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.header-bottom-nav.mobile-nav > li.active-dropdown > .mega-dropdown-container .mega-col-list li a {
font-size: 13px !important;
color: #555555 !important;
font-weight: 600 !important;
display: block !important;
padding: 3px 0 !important;
}
.header-bottom-nav.mobile-nav > li.active-dropdown > .mega-dropdown-container .mega-col-action {
margin-top: 10px !important;
}
.header-bottom-nav.mobile-nav > li.active-dropdown > .mega-dropdown-container .mega-all-products-btn {
display: block !important;
text-align: center !important;
background-color: #143d18 !important;
color: #FFFFFF !important;
font-size: 12px !important;
font-weight: 800 !important;
text-transform: uppercase !important;
padding: 8px 12px !important;
border-radius: 4px !important;
}
}
/* Global Mobile Layout Reset to Prevent Horizontal Overflow */
@media (max-width: 767px) {
html, body {
overflow-x: hidden !important;
max-width: 100vw !important;
width: 100% !important;
}
#wrapper {
overflow-x: hidden !important;
max-width: 100vw !important;
width: 100% !important;
}
.row, .container, .section {
max-width: 100% !important;
box-sizing: border-box !important;
}
.archive #main .product-small .box-text,
.archive #main .product-box .box-text,
.archive #main .box-text {
box-sizing: border-box !important;
}
.archive #main .product-small .box-image,
.archive #main .product-box .box-image,
.archive #main .box-image {
box-sizing: border-box !important;
}
}
/* Fix main menu overlapping search results by bringing search results to the front */
.live-search-results,
.autocomplete-suggestions {
z-index: 99999 !important;
}
/* ==========================================================================
CUSTOM SALE BADGE & WISHLIST ICON SYNCHRONIZATION FOR ARCHIVES (TAG & CAT)
========================================================================== */
/* 1. Reset thuộc tính hình tròn mặc định của Flatsome trên trang Archive */
.archive .badge-container .badge-circle,
.archive .badge-container .badge-inner {
border-radius: 0 !important;
width: auto !important;
height: auto !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
display: block !important;
}
/* 2. Thiết kế nhãn .onsale thành hình chữ nhật màu đỏ */
.archive .badge-container .onsale {
display: inline-block !important; /* Buộc hiển thị nhãn */
background-color: #E02B27 !important; /* Màu đỏ chủ đạo */
color: #FFFFFF !important;
font-family: 'Inter', sans-serif !important;
font-weight: 700 !important;
font-size: 0 !important; /* Ẩn chữ "Sale!" mặc định */
padding: 2px 4px !important;
border-radius: 2px !important;
line-height: 1.1 !important;
letter-spacing: 0.02em !important;
box-shadow: none !important;
height: auto !important;
width: auto !important;
}
/* 3. Thay đổi chữ hiển thị thành "SALE OFF" */
.archive .badge-container .onsale::after {
content: "SALE OFF" !important;
font-size: 7px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
color: #FFFFFF !important;
display: inline-block !important;
line-height: 1 !important;
}
@media (min-width: 768px) {
.archive .badge-container .onsale {
padding: 3px 6px !important;
}
.archive .badge-container .onsale::after {
font-size: 9px !important;
}
}
/* 4. Định vị nhãn đè khớp góc trái của ảnh sản phẩm trên di động & máy tính */
@media (min-width: 850px) {
.archive .badge-container {
top: 10px !important;
left: 10px !important;
bottom: auto !important;
right: auto !important;
}
}
@media (max-width: 849px) {
.archive .badge-container {
top: 16px !important;
left: 20px !important;
bottom: auto !important;
right: auto !important;
}
}
/* 5. Ẩn hoàn toàn icon trái tim (Wishlist) và text Add to wishlist trên toàn bộ website (Trang chủ, Category, Tag, Single Product, Mobile & Desktop) */
.wishlist-icon,
.wishlist-button,
.wishlist-popup,
.yith-wcwl-add-to-wishlist,
.yith-wcwl-add-button,
.image-tools .wishlist-icon,
.product-small .wishlist-icon,
.product-small .yith-wcwl-add-to-wishlist,
.box-image .wishlist-icon,
.box-image .yith-wcwl-add-to-wishlist,
.archive .wishlist-icon,
.archive .yith-wcwl-add-to-wishlist,
.home .wishlist-icon,
.home .yith-wcwl-add-to-wishlist {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* ==========================================
* L. SINGLE PRODUCT MOBILE OVERHAUL
* ========================================== */
@media (max-width: 767px) {
/* Hide breadcrumbs container to remove empty space on mobile single product pages */
.single-product .page-title.shop-page-title.product-page-title {
display: none !important;
}
/* Hide default product title in summary column */
.single-product .summary.entry-summary h1.product-title {
display: none !important;
}
/* Premium mobile title & badge placement */
.kp-mobile-product-header {
padding: 0 15px !important;
margin-top: 15px !important;
margin-bottom: 15px !important;
text-align: left !important;
}
.kp-mobile-product-title {
font-size: 20px !important;
font-weight: 800 !important;
line-height: 1.3 !important;
color: #1f2937 !important;
margin: 0 0 10px 0 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
}
.kp-mobile-product-meta {
font-size: 13px !important;
color: #4b5563 !important; /* Gray-600 */
line-height: 1.5 !important;
margin-top: 8px !important;
margin-bottom: 12px !important;
}
.kp-mobile-product-meta .kp-meta-item {
display: inline !important;
}
.kp-mobile-product-meta .kp-meta-separator {
margin: 0 8px !important;
color: #d1d5db !important; /* Gray-300 */
}
.kp-mobile-product-meta a.kp-product-meta-link {
color: #1E5929 !important; /* Header Green */
text-decoration: underline !important;
font-weight: 600 !important;
background: none !important;
border: none !important;
padding: 0 !important;
border-radius: 0 !important;
display: inline !important;
}
.kp-mobile-product-meta a.kp-product-meta-link:hover {
color: #153e1d !important;
text-decoration: none !important;
}
}
@media (min-width: 768px) {
.kp-mobile-product-header {
display: none !important;
}
}
/* ==========================================
* M. MOBILE STICKY CART BAR & MINI-CART DRAWER OVERRIDES
* ========================================== */
@media (max-width: 767px) {
/* Push currency switcher above the sticky cart bar when active */
body.kp-has-sticky-cart .kp-currency-switcher {
bottom: 76px !important;
}
.kp-currency-switcher {
left: auto !important;
right: 20px !important;
z-index: 1001 !important; /* Above sticky bar but below Magnific Popup (1040+) */
transition: bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* Make cart off-canvas drawer full screen on mobile */
.off-canvas .mfp-content.off-canvas-cart,
.off-canvas-cart.mfp-content {
width: 100% !important;
max-width: 100% !important;
--drawer-width: 100% !important;
}
}
/* Style the Checkout button in mini-cart drawer */
.kp-mini-cart-checkout-btn {
display: block !important;
width: 100% !important;
background-color: #1E5929 !important; /* Brand Main Green */
color: #ffffff !important;
border: none !important;
border-radius: 8px !important;
padding: 14px 20px !important;
font-size: 15px !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
text-align: center !important;
margin-bottom: 15px !important;
box-shadow: 0 4px 12px rgba(30, 89, 41, 0.2) !important;
transition: all 0.2s ease !important;
}
.kp-mini-cart-checkout-btn:hover {
background-color: #153e1d !important;
color: #ffffff !important;
}
.kp-mini-cart-checkout-btn:active {
transform: scale(0.98) !important;
}
/* Style the View and Edit Cart link in mini-cart drawer */
.kp-mini-cart-view-cart-wrap {
text-align: center !important;
font-size: 14px !important;
color: #666666 !important;
margin-top: 15px !important;
margin-bottom: 10px !important;
font-family: inherit !important;
}
.kp-mini-cart-view-cart-link {
color: #111111 !important;
text-decoration: underline !important;
font-weight: 600 !important;
transition: color 0.2s ease !important;
}
.kp-mini-cart-view-cart-link:hover {
color: #1E5929 !important;
}
/* Custom Mobile Price Block & Default Price Hiding */
@media (max-width: 767px) {
/* Hide default WooCommerce price in summary column on mobile */
.single-product .summary.entry-summary .price,
.single-product .summary.entry-summary p.price {
display: none !important;
}
/* Style for prominent mobile price block above discount notice */
.kp-promo-price-block {
display: flex !important;
align-items: baseline !important;
gap: 12px !important;
margin-top: 10px !important;
margin-bottom: 12px !important;
padding: 0 15px !important; /* Align with mobile title */
font-family: inherit !important;
}
.kp-promo-price-block .kp-price-sale {
font-size: 26px !important;
font-weight: 800 !important;
color: #C4301C !important; /* Bold Red for sale price */
}
.kp-promo-price-block .kp-price-original {
font-size: 16px !important;
color: #888888 !important;
font-weight: 500 !important;
}
.kp-promo-price-block .kp-price-badge {
background-color: #C4301C !important;
color: #ffffff !important;
font-size: 11px !important;
font-weight: 700 !important;
padding: 3px 8px !important;
border-radius: 4px !important;
text-transform: uppercase !important;
align-self: center !important;
}
}
@media (min-width: 768px) {
/* Hide custom price block on desktop (since default summary price is used) */
.kp-promo-price-block {
display: none !important;
}
}
/* Category/Archive Loop Product Price Overrides */
.product-small .price del,
.products .price del,
.archive .price del {
font-size: 13px !important; /* 2px smaller than sale price */
color: #000000 !important; /* Pure Black */
text-decoration: line-through !important;
font-weight: 500 !important;
opacity: 1 !important; /* Bypass Flatsome opacity fade */
}
.product-small .price ins,
.products .price ins,
.archive .price ins {
color: #C4301C !important; /* Bold Red for sale price */
text-decoration: none !important;
font-weight: 800 !important;
font-size: 15px !important;
}
/* ==========================================
* N. WOOCOMMERCE CART PAGE OPTIMIZATION (GLOBAL & MOBILE)
* ========================================== */
/* Clean plus/minus button text alignment */
.quantity input.minus,
.quantity input.plus,
.quantity .minus,
.quantity .plus,
.woocommerce-cart-form .quantity input.button,
.woocommerce-cart-form .quantity .ux-quantity__button {
-webkit-appearance: none !important;
appearance: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
text-align: center !important;
padding: 0 !important;
margin: 0 !important;
font-family: inherit !important;
}
/* Global Cart Page Table & Grid overrides (Desktop + Mobile) */
.woocommerce-cart-form table.cart,
html body.woocommerce-cart-form table.cart {
display: block !important;
width: 100% !important;
border: none !important;
background: transparent !important;
}
.woocommerce-cart-form table.cart thead {
display: none !important; /* Hide column headers */
}
.woocommerce-cart-form table.cart tbody {
display: block !important;
width: 100% !important;
}
/* Cart item rows styled as clean product cards */
.woocommerce-cart-form table.cart tr.cart_item {
display: grid !important;
grid-template-columns: 80px 1fr auto !important;
grid-template-rows: auto auto !important;
grid-template-areas:
"thumb name name"
"thumb qty price" !important;
gap: 12px 15px !important;
padding: 20px 0 !important;
border-bottom: 1px solid #e5e7eb !important;
position: relative !important;
width: 100% !important;
box-sizing: border-box !important;
background: transparent !important;
}
/* Hide default label column indicators (e.g. data-title) */
.woocommerce-cart-form table.cart tr.cart_item td::before {
display: none !important;
}
/* Force table cells to behaves as grid blocks */
.woocommerce-cart-form table.cart tr.cart_item td {
display: none !important; /* Hide unused columns by default */
padding: 0 !important;
margin: 0 !important;
border: none !important;
width: auto !important;
text-align: left !important;
background: transparent !important;
}
/* Explicitly display and map only needed columns */
.woocommerce-cart-form table.cart tr.cart_item td.product-remove,
.woocommerce-cart-form table.cart tr.cart_item td.product-thumbnail,
.woocommerce-cart-form table.cart tr.cart_item td.product-name,
.woocommerce-cart-form table.cart tr.cart_item td.product-quantity,
.woocommerce-cart-form table.cart tr.cart_item td.product-subtotal {
display: block !important;
}
/* Remove / Delete Button (Positioned top-right of the card) */
.woocommerce-cart-form table.cart tr.cart_item td.product-remove {
position: absolute !important;
top: 15px !important;
right: 0 !important;
z-index: 10 !important;
}
.woocommerce-cart-form table.cart tr.cart_item td.product-remove a.remove {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 24px !important;
height: 24px !important;
font-size: 18px !important;
font-weight: 300 !important;
color: #9ca3af !important; /* Light slate gray */
border: 1px solid #e5e7eb !important;
border-radius: 50% !important;
line-height: 1 !important;
text-decoration: none !important;
background-color: #ffffff !important;
transition: all 0.2s ease !important;
}
.woocommerce-cart-form table.cart tr.cart_item td.product-remove a.remove:hover {
color: #ef4444 !important;
border-color: #fca5a5 !important;
background-color: #fef2f2 !important;
}
/* Thumbnail Area */
.woocommerce-cart-form table.cart tr.cart_item td.product-thumbnail {
grid-area: thumb !important;
}
.woocommerce-cart-form table.cart tr.cart_item td.product-thumbnail a {
display: block !important;
width: 80px !important;
height: 80px !important;
}
.woocommerce-cart-form table.cart tr.cart_item td.product-thumbnail img {
width: 80px !important;
height: 80px !important;
object-fit: cover !important;
border-radius: 8px !important;
border: 1px solid #f3f4f6 !important;
}
/* Product Name & Variations Area (Occupies top-right) */
.woocommerce-cart-form table.cart tr.cart_item td.product-name {
grid-area: name !important;
padding-right: 32px !important; /* Avoid overlap with absolute remove button */
}
.woocommerce-cart-form table.cart tr.cart_item td.product-name a {
font-size: 14px !important;
font-weight: 600 !important;
color: #111827 !important;
line-height: 1.4 !important;
display: block !important;
margin-bottom: 4px !important;
}
/* Product Meta (Size, Personalise, Badges) */
.woocommerce-cart-form table.cart tr.cart_item td.product-name .variation,
.woocommerce-cart-form table.cart tr.cart_item td.product-name .wc-item-meta {
margin-top: 6px !important;
padding: 0 !important;
list-style: none !important;
display: flex !important;
flex-direction: column !important;
gap: 3px !important;
}
.woocommerce-cart-form table.cart tr.cart_item td.product-name .variation dt,
.woocommerce-cart-form table.cart tr.cart_item td.product-name .wc-item-meta dt,
.woocommerce-cart-form table.cart tr.cart_item td.product-name .wc-item-meta li strong {
font-weight: 600 !important;
color: #4b5563 !important; /* dark grey label */
display: inline !important;
}
.woocommerce-cart-form table.cart tr.cart_item td.product-name .variation dd,
.woocommerce-cart-form table.cart tr.cart_item td.product-name .wc-item-meta dd,
.woocommerce-cart-form table.cart tr.cart_item td.product-name .wc-item-meta li {
font-weight: 400 !important;
color: #6b7280 !important; /* lighter grey value */
display: inline !important;
margin: 0 !important;
}
.woocommerce-cart-form table.cart tr.cart_item td.product-name .variation dd::after {
content: "\A";
white-space: pre;
}
/* Quantity Selector Area (Occupies bottom-left, under thumbnail) */
.woocommerce-cart-form table.cart tr.cart_item td.product-quantity {
grid-area: qty !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
}
/* Price Subtotal Area (Occupies bottom-right, under product-name) */
.woocommerce-cart-form table.cart tr.cart_item td.product-subtotal {
grid-area: price !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
font-size: 16px !important;
font-weight: 700 !important;
color: #111827 !important;
text-align: right !important;
}
@media (max-width: 767px) {
/* Make sure coupon and action buttons row displays nicely on mobile */
.woocommerce-cart-form table.cart td.actions {
display: block !important;
width: 100% !important;
padding: 20px 0 !important;
border: none !important;
}
.woocommerce-cart-form table.cart td.actions .coupon {
display: flex !important;
width: 100% !important;
gap: 10px !important;
margin-bottom: 15px !important;
}
.woocommerce-cart-form table.cart td.actions .coupon input#coupon_code {
flex-grow: 1 !important;
width: auto !important;
margin: 0 !important;
}
.woocommerce-cart-form table.cart td.actions > button[name="update_cart"] {
display: block !important;
width: 100% !important;
margin: 0 !important;
}
}