/*
* WooCommerce Product Styles for FungusHead Theme
* Styles for product listing and single product pages
*/
/* Breadcrumb styling */
.woocommerce-breadcrumb {
font-family: 'Inter', sans-serif;
margin-bottom: 20px !important;
font-size: 14px;
color: #777;
}
.woocommerce-breadcrumb a {
color: #ff69b4;
text-decoration: none;
}
.woocommerce-breadcrumb a:hover {
text-decoration: underline;
}
/* Single Product Page Styles */
.fh-container {
max-width: 1585px;
margin: 0 auto;
padding: 0 15px;
}
.product-single-wrapper {
margin: 40px 0;
}
/* Main Product Layout */
.product-main-content {
display: flex;
flex-wrap: wrap;
margin-bottom: 40px;
}
.product-gallery-col {
flex: 0 0 100%;
max-width: 100%;
position: relative;
}
.product-summary-col {
flex: 0 0 100%;
max-width: 100%;
padding: 0;
}
/* Enhanced Product Gallery */
.woocommerce-product-gallery {
margin-bottom: 30px;
position: relative;
}
.woocommerce-product-gallery__wrapper {
margin: 0;
position: relative;
overflow: hidden;
}
.woocommerce-product-gallery__image {
margin-bottom: 0;
border-radius: 0;
position: relative;
}
.woocommerce-product-gallery__image img {
border-radius: 6px;
width: 100%;
height: auto;
display: block;
border: 4px solid #000;
box-shadow: 6px 6px 0px 0px rgba(0,0,0,1) !important;
}
/* Main Image */
.woocommerce-product-gallery .flex-viewport {
margin-bottom: 15px;
border-radius: 6px;
overflow: hidden;
border: 4px solid #000;
box-shadow: 6px 6px 0px 0px rgba(0,0,0,1) !important;
}
/* Thumbnails */
.woocommerce-product-gallery ol.flex-control-nav {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: flex-start;
}
.woocommerce-product-gallery ol.flex-control-nav li {
width: calc((100% - 30px) / 4); /* Default: Four thumbnails per row with gap */
min-width: 60px;
max-width: 120px;
margin: 0;
overflow: hidden;
border-radius: 4px;
border: none;
cursor: pointer;
position: relative;
aspect-ratio: 1/1; /* Force square thumbnails */
}
/* Fallback for when JavaScript hasn't run yet - hide overflow */
.woocommerce-product-gallery ol.flex-control-nav {
overflow: hidden;
}
.woocommerce-product-gallery ol.flex-control-nav li img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 4px;
cursor: pointer;
opacity: 0.6;
transition: opacity 0.2s ease;
border: 3px solid #000;
box-shadow: 3px 3px 0px 0px rgba(0,0,0,1) !important;
display: block;
}
.woocommerce-product-gallery ol.flex-control-nav li img.flex-active,
.woocommerce-product-gallery ol.flex-control-nav li img:hover {
opacity: 1;
box-shadow: 4px 4px 0px 0px rgba(255,105,180,1) !important;
}
/* Dynamic thumbnail sizing based on count */
/* 1-3 thumbnails: Larger size */
.woocommerce-product-gallery.thumbs-1 ol.flex-control-nav li,
.woocommerce-product-gallery.thumbs-2 ol.flex-control-nav li,
.woocommerce-product-gallery.thumbs-3 ol.flex-control-nav li {
width: calc((100% - 20px) / 3) !important;
max-width: 120px !important;
}
/* 4 thumbnails: Medium size */
.woocommerce-product-gallery.thumbs-4 ol.flex-control-nav li {
width: calc((100% - 30px) / 4) !important;
max-width: 100px !important;
}
/* 5+ thumbnails: Smaller size to fit more */
.woocommerce-product-gallery.thumbs-5 ol.flex-control-nav li,
.woocommerce-product-gallery.thumbs-6 ol.flex-control-nav li,
.woocommerce-product-gallery.thumbs-7 ol.flex-control-nav li,
.woocommerce-product-gallery.thumbs-8 ol.flex-control-nav li,
.woocommerce-product-gallery.thumbs-many ol.flex-control-nav li {
width: calc((100% - 40px) / 5) !important;
max-width: 80px !important;
}
/* Mobile responsive overrides */
@media (max-width: 480px) {
/* ENABLE HORIZONTAL SCROLLING FOR MOBILE THUMBNAILS */
.woocommerce-product-gallery ol.flex-control-nav {
overflow-x: auto !important;
overflow-y: hidden !important;
flex-wrap: nowrap !important;
gap: 8px !important;
padding: 10px 0 !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important; /* Firefox */
-ms-overflow-style: none !important; /* IE/Edge */
}
/* Hide scrollbar for webkit browsers */
.woocommerce-product-gallery ol.flex-control-nav::-webkit-scrollbar {
display: none !important;
}
/* Make thumbnails flex but don't shrink - maintain size for scrolling */
.woocommerce-product-gallery ol.flex-control-nav li {
flex: 0 0 auto !important;
width: 80px !important;
min-width: 80px !important;
max-width: 80px !important;
height: 80px !important;
margin: 0 !important;
}
/* Ensure thumbnail images maintain aspect ratio */
.woocommerce-product-gallery ol.flex-control-nav li img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
}
/* Tablet responsive overrides */
@media (min-width: 481px) and (max-width: 768px) {
/* 1-3 thumbnails: 3 per row */
.woocommerce-product-gallery.thumbs-1 ol.flex-control-nav li,
.woocommerce-product-gallery.thumbs-2 ol.flex-control-nav li,
.woocommerce-product-gallery.thumbs-3 ol.flex-control-nav li {
width: calc((100% - 20px) / 3) !important;
max-width: 140px !important;
}
/* 4 thumbnails: 4 per row */
.woocommerce-product-gallery.thumbs-4 ol.flex-control-nav li {
width: calc((100% - 30px) / 4) !important;
max-width: 110px !important;
}
/* 5+ thumbnails: 5 per row */
.woocommerce-product-gallery.thumbs-5 ol.flex-control-nav li,
.woocommerce-product-gallery.thumbs-6 ol.flex-control-nav li,
.woocommerce-product-gallery.thumbs-7 ol.flex-control-nav li,
.woocommerce-product-gallery.thumbs-8 ol.flex-control-nav li,
.woocommerce-product-gallery.thumbs-many ol.flex-control-nav li {
width: calc((100% - 40px) / 5) !important;
max-width: 90px !important;
}
}
/* Ensure all thumbnail containers display properly */
.woocommerce-product-gallery__thumbnails,
.woocommerce-product-gallery ol.flex-control-nav {
width: 100% !important;
display: flex !important;
flex-wrap: wrap !important;
}
/* Override flex-wrap for mobile to enable horizontal scrolling */
@media (max-width: 480px) {
.woocommerce-product-gallery ol.flex-control-nav {
flex-wrap: nowrap !important;
}
}
/* Fix any potential conflicts with WooCommerce default styles */
.woocommerce-product-gallery__thumbnails .woocommerce-product-gallery__image,
.woocommerce-product-gallery ol.flex-control-nav li {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Ensure thumbnail images always load and display */
.woocommerce-product-gallery__thumbnails .woocommerce-product-gallery__image img,
.woocommerce-product-gallery ol.flex-control-nav li img {
display: block !important;
visibility: visible !important;
max-width: 100% !important;
height: auto !important;
object-fit: cover !important;
}
/* FORCE PROPER GALLERY DISPLAY - Override FlexSlider's 800% width bullshit */
.woocommerce-product-gallery .flex-viewport {
width: 100% !important;
max-width: 100% !important;
overflow: hidden !important;
}
.woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
width: 100% !important;
max-width: 100% !important;
display: flex !important;
transform: none !important;
transition: none !important;
}
.woocommerce-product-gallery .woocommerce-product-gallery__image {
width: 100% !important;
max-width: 100% !important;
flex-shrink: 0 !important;
display: none !important;
}
.woocommerce-product-gallery .woocommerce-product-gallery__image.flex-active-slide {
display: block !important;
}
.woocommerce-product-gallery .woocommerce-product-gallery__image img {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
display: block !important;
}
/* Override any inline styles applied by JavaScript/WooCommerce */
.woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs li img {
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: cover !important;
border-radius: 4px !important;
border: 3px solid #000 !important;
box-shadow: 3px 3px 0px 0px rgba(0,0,0,1) !important;
opacity: 0.6 !important;
transition: opacity 0.2s ease !important;
cursor: pointer !important;
}
.woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs li img.flex-active,
.woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs li img:hover {
opacity: 1 !important;
box-shadow: 4px 4px 0px 0px rgba(255,105,180,1) !important;
}
/* Force thumbnail container dimensions */
.woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs li {
width: calc((100% - 30px) / 4) !important;
min-width: 60px !important;
max-width: 120px !important;
height: auto !important;
aspect-ratio: 1/1 !important;
overflow: hidden !important;
border-radius: 4px !important;
position: relative !important;
}
/* Neo-Brutalist Zoom Icon - Single Instance */
.woocommerce-product-gallery .woocommerce-product-gallery__trigger {
position: absolute;
top: 15px;
right: 15px;
z-index: 10;
width: 40px;
height: 40px;
background: #fff;
border: 4px solid #000;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: #000;
transition: none;
box-shadow: 4px 4px 0px 0px rgba(0,0,0,1);
cursor: pointer;
}
.woocommerce-product-gallery .woocommerce-product-gallery__trigger:hover {
background: #000;
color: #fff;
box-shadow: 6px 6px 0px 0px rgba(0,0,0,1);
transform: translate(-2px, -2px);
}
/* Neo-brutalist magnifying glass icon */
.woocommerce-product-gallery .woocommerce-product-gallery__trigger::before {
content: '';
width: 18px;
height: 18px;
border: 4px solid currentColor;
border-radius: 50%;
position: relative;
display: block;
}
.woocommerce-product-gallery .woocommerce-product-gallery__trigger::after {
content: '';
position: absolute;
width: 3px;
height: 8px;
background: currentColor;
transform: rotate(45deg);
top: 26px;
right: 8px;
}
/* Hide any duplicate zoom elements */
.woocommerce-product-gallery .woocommerce-product-gallery__trigger img,
.woocommerce-product-gallery .woocommerce-product-gallery__trigger span {
display: none !important;
}
/* Ensure only one zoom trigger shows */
.woocommerce-product-gallery .woocommerce-product-gallery__trigger:not(:first-of-type) {
display: none !important;
}
/* Product Title Section */
.product-title-section {
margin-bottom: 20px;
}
.product-title-section .product_title {
font-size: 36px;
line-height: 1.2;
margin: 0 0 10px;
font-weight: 700;
color: #000 !important;
text-transform: uppercase;
}
/* Ensure all product title variations use pure black */
.product_title,
.entry-title,
h1.product_title,
.woocommerce div.product .product_title,
.woocommerce div.product h1.product_title {
color: #000 !important;
}
/* Product Tags and Rating Container */
.product-tags-and-rating {
margin: 8px 0 15px 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
flex-wrap: wrap;
}
/* Product Tags under title */
.product-tags {
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
flex: 1;
}
.product-tag {
display: inline-block;
background-color: #fff;
color: #000;
font-size: 12px;
font-weight: 600;
padding: 6px 12px;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: 0.5px;
border: 4px solid #000;
box-shadow: 3px 3px 0px 0px rgba(0,0,0,0.8);
transition: all 0.2s ease;
}
.product-tag:hover {
transform: translateY(-1px);
box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.8);
}
.product-scientific-name {
font-size: 16px;
font-style: italic;
color: #000;
margin: 0 0 15px;
}
.product-category-pill {
display: inline-block;
background-color: #000;
color: #fff;
font-size: 14px;
font-weight: 600;
padding: 8px 15px;
border-radius: 4px;
margin-top: 5px;
border: 4px solid #000;
box-shadow: 3px 3px 0px 0px rgba(0,0,0,0.8);
}
/* This section is now handled by individual media queries above */
/* DESKTOP: Show prices normally */
@media (min-width: 769px) {
.single-product .woocommerce-variation-price,
.single-product .single_variation .price,
.single-product .variations_form .price,
.single-product .price {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: static !important;
left: auto !important;
height: auto !important;
overflow: visible !important;
}
}
/* Price and Stock Section - DESKTOP DISPLAY */
.product-price-stock {
display: flex;
align-items: center;
justify-content: space-between;
margin: 30px 0px;
gap: 20px;
}
/* MOBILE ONLY: Hide price and stock section */
@media (max-width: 768px) {
.product-price-stock {
position: absolute !important;
left: -9999px !important;
opacity: 0 !important;
/* But keep functional for JS */
display: flex !important;
}
}
/* DESKTOP ONLY: Hide mobile quantity selector */
@media (min-width: 769px) {
.mobile-quantity-selector-simple {
display: none !important;
}
}
/* MOBILE ONLY: Hide desktop quantity selector for simple products */
@media (max-width: 768px) {
.quantity-selector-wrapper {
display: none !important;
}
/* MOBILE: Hide mobile simple product quantity selector for variable products */
.woocommerce-product-type-variable .mobile-quantity-selector-simple {
display: none !important;
}
}
.product-price-large {
font-size: 36px !important;
font-weight: 600 !important;
color: #000000 !important;
text-decoration: none !important;
line-height: 1.2;
margin: 0;
}
/* MOBILE ONLY: Hide custom price displays */
@media (max-width: 768px) {
.product-price-large {
position: absolute !important;
left: -9999px !important;
opacity: 0 !important;
}
}
.product-price-large .woocommerce-Price-amount {
font-size: 36px !important;
font-weight: 600 !important;
color: #000000 !important;
text-decoration: none !important;
}
/* Remove underlines from all price elements */
.product-price-large,
.product-price-large *,
.product-price-large ins,
.product-price-large .woocommerce-Price-amount,
.woocommerce-variation-price,
.woocommerce-variation-price *,
.woocommerce-variation-price ins,
.woocommerce-variation-price .woocommerce-Price-amount,
.price,
.price *,
.price ins,
.price .woocommerce-Price-amount {
text-decoration: none !important;
}
/* Custom Sale Price Layout - Exact Match to Design */
.woocommerce div.product .custom-price-layout,
.product-price-large .custom-price-layout,
.woocommerce-variation-price .custom-price-layout,
.product-card .custom-price-layout,
.custom-price-layout {
display: flex !important;
align-items: baseline !important;
gap: 12px !important;
flex-wrap: wrap !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
/* Sale Price - Main large price ($72.20) */
.woocommerce div.product .sale-price-main,
.product-price-large .sale-price-main,
.woocommerce-variation-price .sale-price-main,
.sale-price-main {
font-size: 36px !important;
font-weight: 600 !important;
color: #000000 !important;
text-decoration: none !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1.2 !important;
display: inline-block !important;
}
/* Product Card Sale Price - Smaller size for cards */
.product-card .sale-price-main {
font-size: 24px !important;
font-weight: 600 !important;
}
/* Product Card Layout - Tighter spacing for cards */
.product-card .custom-price-layout {
gap: 8px !important;
flex-wrap: wrap !important;
align-items: center !important;
}
.woocommerce div.product .sale-price-main .woocommerce-Price-amount,
.woocommerce div.product .sale-price-main .amount,
.sale-price-main .woocommerce-Price-amount,
.sale-price-main .amount {
font-size: 36px !important;
font-weight: 600 !important;
color: #000000 !important;
text-decoration: none !important;
}
/* Original Price - Crossed out ($76.00) */
.woocommerce div.product .original-price-crossed,
.product-price-large .original-price-crossed,
.woocommerce-variation-price .original-price-crossed,
.original-price-crossed {
font-size: 18px !important;
font-weight: 400 !important;
color: #888888 !important;
text-decoration: line-through !important;
margin: 0 !important;
padding: 0 !important;
opacity: 0.8 !important;
display: inline-block !important;
}
/* Product Card Original Price - Smaller size for cards */
.product-card .original-price-crossed {
font-size: 14px !important;
}
.woocommerce div.product .original-price-crossed .woocommerce-Price-amount,
.woocommerce div.product .original-price-crossed .amount,
.original-price-crossed .woocommerce-Price-amount,
.original-price-crossed .amount {
font-size: 18px !important;
font-weight: 400 !important;
color: #888888 !important;
text-decoration: line-through !important;
}
/* Savings Badge - Green (Save $3.80) */
.woocommerce div.product .savings-badge,
.product-price-large .savings-badge,
.woocommerce-variation-price .savings-badge,
.savings-badge {
font-size: 14px !important;
font-weight: 500 !important;
color: #000 !important;
background-color: #e8f5e8 !important;
padding: 4px 8px !important;
border-radius: 4px !important;
margin: 0 !important;
text-decoration: none !important;
border: none !important;
display: inline-block !important;
}
/* Product Card Savings Badge - Compact size for cards */
.product-card .savings-badge {
font-size: 12px !important;
padding: 3px 6px !important;
}
.woocommerce div.product .savings-badge .woocommerce-Price-amount,
.woocommerce div.product .savings-badge .amount,
.savings-badge .woocommerce-Price-amount,
.savings-badge .amount {
font-size: 14px !important;
font-weight: 500 !important;
color: #000 !important;
text-decoration: none !important;
}
/* Apply to variation prices as well */
.woocommerce-variation-price .custom-price-layout {
display: flex !important;
align-items: baseline !important;
gap: 12px !important;
flex-wrap: wrap !important;
}
/* Override any conflicting styles */
.product-price-large .custom-price-layout,
.woocommerce-variation-price .custom-price-layout {
font-size: inherit !important;
color: inherit !important;
}
/* Ensure custom price layout fits within existing containers */
.product-price-large .custom-price-layout {
width: 100% !important;
}
.woocommerce-variation-price .custom-price-layout {
width: 100% !important;
}
/* For regular prices (non-sale) - maintain existing styling */
.product-price-large .price:not(.custom-price-layout) {
font-size: 36px !important;
font-weight: 600 !important;
color: #000000 !important;
text-decoration: none !important;
line-height: 1.2;
margin: 0;
}
.product-price-large .price:not(.custom-price-layout) .woocommerce-Price-amount {
font-size: 36px !important;
font-weight: 600 !important;
color: #000000 !important;
text-decoration: none !important;
}
/* Stock styling within price-stock container */
.product-price-stock .stock {
font-size: 18px !important;
font-weight: 700 !important;
padding: 6px 12px !important;
margin: 0 !important;
white-space: nowrap;
flex-shrink: 0;
}
.product-price-stock .stock.in-stock {
background-color: #e3f3e4 !important;
color: #27ae60 !important;
border: 4px solid #000 !important;
box-shadow: 3px 3px 0px 0px rgba(0,0,0,0.8) !important;
}
.product-price-stock .stock.out-of-stock {
background-color: #ffecec !important;
color: #e74c3c !important;
border: 4px solid #000 !important;
box-shadow: 3px 3px 0px 0px rgba(0,0,0,0.8) !important;
}
/* Variable Product Variation Price and Stock Layout */
.woocommerce-variation.single_variation {
display: flex !important;
align-items: center !important;
gap: 20px !important;
margin-bottom: 20px !important;
}
.woocommerce-variation-description {
display: none; /* Hide empty description */
}
.woocommerce-variation-price {
flex: 0 0 auto !important;
margin: 0 !important;
}
.woocommerce-variation-price .price {
font-size: 36px !important;
font-weight: 600 !important;
color: #000000 !important;
text-decoration: none !important;
margin: 0 !important;
transition: none !important;
animation: none !important;
}
.woocommerce-variation-price .woocommerce-Price-amount {
font-size: 36px !important;
font-weight: 600 !important;
color: #000000 !important;
text-decoration: none !important;
transition: none !important;
animation: none !important;
}
.woocommerce-variation-availability {
flex: 0 0 auto !important;
margin: 0 !important;
margin-left: auto !important; /* Push to the right */
}
.woocommerce-variation-availability .stock {
font-size: 18px !important;
font-weight: 700 !important;
padding: 6px 12px !important;
margin: 0 !important;
white-space: nowrap !important;
border-radius: 4px !important;
}
.woocommerce-variation-availability .stock.in-stock {
background-color: #e3f3e4 !important;
color: #27ae60 !important;
border: 4px solid #000 !important;
box-shadow: 3px 3px 0px 0px rgba(0,0,0,0.8) !important;
}
.woocommerce-variation-availability .stock.out-of-stock {
background-color: #ffecec !important;
color: #e74c3c !important;
border: 4px solid #000 !important;
box-shadow: 3px 3px 0px 0px rgba(0,0,0,0.8) !important;
}
/* REMOVE ALL PRICE ANIMATIONS - INSTANT PRICE CHANGES */
.woocommerce-variation.single_variation,
.woocommerce-variation-price,
.woocommerce-variation-availability,
.woocommerce-variation-add-to-cart,
.single_variation_wrap,
.price,
.woocommerce-Price-amount,
.amount,
.stock,
.single_add_to_cart_button,
.variations_button,
.woocommerce-variation-add-to-cart-enabled {
transition: none !important;
animation: none !important;
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
}
/* Override any WooCommerce default fade/slide animations */
.woocommerce .single_variation_wrap .single_variation {
animation: none !important;
transition: none !important;
}
.woocommerce .variations_form .variations_button {
transition: none !important;
animation: none !important;
}
/* COMPLETELY DISABLE ALL WOOCOMMERCE VARIATION ANIMATIONS */
.wc-no-animations *,
.wc-no-animations *:before,
.wc-no-animations *:after {
transition: none !important;
animation: none !important;
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
-webkit-animation: none !important;
-moz-animation: none !important;
-ms-animation: none !important;
-o-animation: none !important;
}
/* Force instant visibility changes - no fading */
.wc-no-animations .woocommerce-variation.single_variation {
opacity: 1 !important;
visibility: visible !important;
display: flex !important;
}
.wc-no-animations .woocommerce-variation-price,
.wc-no-animations .woocommerce-variation-availability {
opacity: 1 !important;
visibility: visible !important;
}
/* GLOBAL OVERRIDE - NO VARIATION EFFECTS EVER */
.variations_form .single_variation_wrap {
transition: none !important;
animation: none !important;
}
.variations_form .single_variation_wrap .single_variation {
transition: none !important;
animation: none !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Disable WooCommerce's slideDown/slideUp effects */
.variations_form .woocommerce-variation-add-to-cart {
transition: none !important;
animation: none !important;
}
/* Override any jQuery slideDown/fadeIn effects */
.single_variation_wrap[style*="display"] {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Product Rating Summary (replacing SKU) */
.product-rating-summary {
margin: 0;
padding: 0;
border: none;
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
.product-rating-summary .rating-stars {
display: flex;
align-items: center;
gap: 2px;
}
.product-rating-summary .star {
font-size: 20px;
color: #000;
transition: none !important;
}
.product-rating-summary .star.filled {
color: #ff69b4;
}
.product-rating-summary .star.half {
position: relative;
color: #000;
}
.product-rating-summary .star.half:after {
content: '★';
position: absolute;
left: 0;
top: 0;
width: 50%;
overflow: hidden;
color: #ff69b4;
}
.product-rating-summary .rating-text {
font-size: 14px;
color: #000;
font-weight: 500;
}
.stock {
display: inline-block;
padding: 4px 10px;
border-radius: 4px;
font-size: 14px;
font-weight: 600;
margin-right: 15px;
}
.stock.in-stock {
background-color: #e3f3e4;
color: #27ae60;
}
.stock.out-of-stock {
background-color: #ffecec;
color: #e74c3c;
}
.product-rating {
display: flex;
align-items: center;
}
.woocommerce-product-rating {
display: flex;
align-items: center;
line-height: 1;
}
.star-rating {
color: #ff69b4 !important;
margin-right: 5px !important;
font-size: 1em !important;
}
.rating-value {
font-weight: 700;
margin-right: 5px;
}
.rating-count {
color: #777;
}
.read-reviews {
color: #ff69b4;
text-decoration: none;
margin-left: 8px;
font-weight: 500;
}
.read-reviews:hover {
text-decoration: underline;
}
/* Price Section */
.product-price-wrapper {
margin-bottom: 20px;
}
.price-wrapper {
font-size: 32px;
font-weight: 700;
color: #222;
}
.price-wrapper del {
font-size: 24px;
color: #000;
font-weight: 400;
margin-right: 10px;
}
.price-wrapper ins {
text-decoration: none;
color: #ff69b4;
}
/* Quantity Selector */
.quantity-selector-wrapper {
margin-bottom: 25px;
border: 4px solid #000;
border-radius: 0;
padding: 16px;
box-shadow: 6px 6px 0px 0px rgba(0,0,0,0.8);
background-color: #fff;
}
.quantity-selector-wrapper fieldset {
border: none;
padding: 0;
margin: 0;
}
.select-quantity {
font-size: 14px;
font-weight: 700;
margin-bottom: 15px;
color: #000;
text-transform: uppercase;
display: block;
}
.quantity-options {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.quantity-option-container {
position: relative;
}
.qty-radio {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.quantity-option {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 4px solid #000;
border-radius: 0;
padding: 8px;
text-align: center;
cursor: pointer;
transition: none;
background-color: #fff;
height: 70px;
box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.8);
}
.qty-radio:checked + .quantity-option {
box-shadow: 4px 4px 0px 0px rgba(255,105,180,0.8);
}
.qty-radio:focus + .quantity-option {
outline: 2px solid #ff69b4;
outline-offset: 2px;
}
.quantity-option:hover {
background-color: #f9f9f9;
}
.quantity-number {
font-size: 18px;
font-weight: 700;
line-height: 1;
margin-bottom: 5px;
}
.quantity-discount {
font-size: 12px;
color: #27ae60;
margin-top: 5px;
font-weight: 500;
}
/* Most Popular Label */
.most-popular-label {
font-size: 10px;
font-weight: 700;
color: #ff69b4;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 2px;
display: block;
}
/* Best Value Label */
.best-value-label {
font-size: 10px;
font-weight: 700;
color: #27ae60;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 2px;
display: block;
}
/* Cart Form */
.entry-summary form.cart {
margin-bottom: 30px;
}
/* Quantity Input */
.entry-summary .quantity {
display: none; /* Hide the default quantity input */
}
/* Stock and Quantity Row Layout */
.stock-quantity-row {
display: flex;
justify-content: space-between;
align-items: center;
margin: 10px 0 20px;
gap: 15px;
}
/* Hide mobile-only stock status on desktop */
.mobile-stock-status {
display: none;
}
/* Stock status styling with neo-brutalist design */
.stock-quantity-row .product-stock-status .stock {
background: #fff;
color: #000;
border: 4px solid #000;
padding: 15px 24px;
font-family: "Bebas Neue", sans-serif;
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 3px 3px 0px 0px rgba(0,0,0,0.8);
border-radius: 0;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
margin: 0px;
}
/* Override specific colors for in-stock vs out-of-stock */
.stock-quantity-row .product-stock-status .stock.in-stock {
background: #e3f3e4;
color: #27ae60;
}
.stock-quantity-row .product-stock-status .stock.out-of-stock {
background: #ffecec;
color: #e74c3c;
}
/* Simple product quantity UI under price - Neo-Brutalist Style */
.simple-qty-under-price {
display: flex;
align-items: center;
gap: 0;
margin: 0;
}
.simple-qty-under-price .simple-qty-label {
font-family: "Bebas Neue", sans-serif;
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
background: #fff;
color: #000;
padding: 15px 24px;
border: 4px solid #000;
border-right: none;
box-shadow: 3px 3px 0px 0px rgba(0,0,0,0.8);
border-radius: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.simple-qty-under-price .simple-qty-controls {
display: flex;
align-items: center;
gap: 0;
}
.simple-qty-under-price .simple-qty-select {
min-width: 80px;
text-align: center;
padding: 15px 24px;
border: 4px solid #000;
border-left: none;
background: #fff;
font-family: "Bebas Neue", sans-serif;
font-size: 23px;
font-weight: 700;
border-radius: 0;
box-shadow: 3px 3px 0px 0px rgba(0,0,0,0.8);
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='black' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center right 12px;
cursor: pointer;
}
/* Add to Cart Button */
.single_add_to_cart_button {
width: 100%;
background-color: #ff69b4 !important;
color: #fff !important;
padding: 15px 24px !important;
font-size: 16px !important;
font-weight: 600 !important;
border: 4px solid #000 !important;
border-radius: 0 !important;
cursor: pointer !important;
transition: none !important;
animation: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: 6px 6px 0px 0px rgba(0,0,0,0.8);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-top: 5px;
}
.single_add_to_cart_button:before {
content: '\1F6D2'; /* Shopping cart emoji */
margin-right: 10px;
}
.single_add_to_cart_button:hover {
background-color: #e5509e !important;
}
/* Highlights Section */
.product-highlights {
margin-top: 25px;
margin-bottom: 30px;
padding: 20px;
border: 4px solid #000;
border-radius: 0;
background-color: #fff;
box-shadow: 6px 6px 0px 0px rgba(0,0,0,0.8);
}
.highlights-title {
font-size: 14px;
font-weight: 700;
margin-bottom: 15px;
color: #000;
text-transform: uppercase;
}
.highlights-list {
list-style: none;
padding: 0;
margin: 0 0 15px 0;
}
.highlight-item {
margin-bottom: 10px;
display: flex;
align-items: flex-start;
color: #000;
font-size: 15px;
line-height: 1.4;
}
.highlight-item .checkmark {
color: #ff69b4;
margin-right: 8px;
font-weight: bold;
font-size: 16px;
}
.highlight-item .medium,
.highlight-item .easy {
font-weight: 700;
}
.highlights-description {
font-style: italic;
color: #555;
margin: 0;
font-size: 14px;
line-height: 1.5;
}
/* Benefits Section */
.product-benefits {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-top: 30px;
margin-bottom: 30px;
}
.benefit {
flex: 1;
min-width: 150px;
display: flex;
align-items: center;
padding: 15px;
border: 4px solid #000;
border-radius: 8px;
}
.benefit-icon {
width: 40px;
height: 40px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
margin-right: 15px;
}
.shipping-icon {
background-image: url('data:image/svg+xml;utf8,');
}
.guarantee-icon {
background-image: url('data:image/svg+xml;utf8,');
}
.dispatch-icon {
background-image: url('data:image/svg+xml;utf8,');
}
.benefit-details h4 {
margin: 0 0 3px 0;
font-size: 14px;
font-weight: 700;
}
.benefit-details p {
margin: 0;
font-size: 12px;
color: #777;
}
/* Product Meta */
.product_meta {
font-size: 14px;
color: #777;
margin-top: 20px;
padding-top: 0;
border-top: none;
}
.product_meta > span {
display: block;
margin-bottom: 8px;
border-top: none;
border-bottom: none;
}
.product_meta a {
color: #ff69b4;
text-decoration: none;
}
.product_meta a:hover {
text-decoration: underline;
}
/* Product Tabs */
.woocommerce-tabs {
margin-bottom: 40px;
}
.woocommerce-tabs ul.tabs {
list-style: none;
padding: 0;
margin: 0 0 20px;
border-bottom: 4px solid #000;
display: flex;
overflow-x: auto;
}
.woocommerce-tabs ul.tabs li {
margin: 0;
padding: 0;
}
.woocommerce-tabs ul.tabs li a {
display: block;
padding: 12px 20px;
color: #777;
font-weight: 600;
text-decoration: none;
border-bottom: 3px solid transparent;
transition: none;
background-color: #f5f5f5;
border: 4px solid #000;
margin: 0 5px 0 0;
box-shadow: 2px 2px 0px 0px rgba(0,0,0,0.8);
border-radius: 4px 4px 0 0;
}
.woocommerce-tabs ul.tabs li.active a {
color: #ff69b4;
border-bottom-color: #ff69b4;
background-color: #fff;
border: 4px solid #000;
border-bottom: 4px solid #ff69b4;
box-shadow: 3px 3px 0px 0px rgba(0,0,0,0.8);
border-radius: 4px 4px 0 0;
}
.woocommerce-tabs .panel {
padding: 20px 0;
}
.woocommerce-tabs .panel h2:first-of-type {
font-size: 24px;
margin-bottom: 16px;
}
/* Related Products - Use Shop Card Styling */
.related.products {
margin-top: 40px;
}
.related.products > h2,
.related.products .related-heading {
font-size: 4em;
margin-bottom: 20px;
position: relative;
padding-bottom: 10px;
}
.related.products > h2:after,
.related.products .related-heading:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 3px;
background-color: #ff69b4;
}
/* Related Products Grid - Use Shop Layout */
.related.products ul.products,
.related.products .products-grid {
display: grid !important;
grid-template-columns: repeat(1, 1fr) !important;
gap: 24px !important;
margin-top: 20px !important;
padding: 0 !important;
list-style: none !important;
}
/* Related Products - Match Shop Card Styling Exactly */
.related.products ul.products li.product-card,
.related.products .product-card {
border: 3px solid #000 !important;
overflow: hidden !important;
background-color: white !important;
box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.8) !important;
transition: all 0.3s ease !important;
position: relative !important;
display: flex !important;
flex-direction: column !important;
border-radius: 0 !important;
min-height: 420px !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
width: auto !important;
float: none !important;
}
.related.products ul.products li.product-card:hover,
.related.products .product-card:hover {
transform: translateY(-3px) !important;
box-shadow: 8px 8px 0 rgba(255, 105, 180, 0.8) !important;
}
/* Related Products - Product Image */
.related.products .product-card .product-image {
position: relative !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
padding-bottom: 100% !important; /* Makes container square */
}
.related.products .product-card .product-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
display: block !important;
transition: transform 0.3s ease !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
}
.related.products .product-card:hover .product-image img {
transform: scale(1.05) !important;
}
/* Related Products - Best Seller Badge */
.related.products .product-card .product-image .best-seller {
position: absolute !important;
top: 8px !important;
right: 8px !important;
background-color: #ff69b4 !important;
color: white !important;
font-size: 10px !important;
font-weight: bold !important;
padding: 3px 8px !important;
border-radius: 0 !important;
border: 2px solid #000 !important;
text-transform: uppercase !important;
line-height: 1 !important;
z-index: 2 !important;
display: inline-block !important;
width: auto !important;
max-width: none !important;
white-space: nowrap !important;
}
/* Related Products - Product Info Container */
.related.products .product-card .product-info {
padding: 15px !important;
display: flex !important;
flex-direction: column !important;
flex-grow: 1 !important;
text-align: left !important;
}
/* Related Products - Product Title */
.related.products .product-card .product-info .product-title,
.related.products .product-card .product-info .product-title a {
font-size: 26px !important;
font-weight: bold !important;
text-transform: uppercase !important;
color: #000 !important;
margin: 0 0 8px 0 !important;
padding: 0 !important;
line-height: 1.2 !important;
font-family: "bebas-neue", sans-serif !important;
text-decoration: none !important;
text-align: left !important;
height: 93px !important; /* Fixed height for 3 lines */
overflow: hidden !important;
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
}
.related.products .product-card .product-info .product-title a:hover {
color: #ff69b4 !important;
}
/* Related Products - Category and Stock Container */
.related.products .product-card .product-info .product-category-stock {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
margin: 0 0 10px 0 !important;
gap: 10px !important;
}
/* Related Products - Product Category */
.related.products .product-card .product-info .product-category-stock .product-category {
font-size: 12px !important;
color: #555 !important;
margin: 0 !important;
padding: 0 !important;
font-family: sans-serif !important;
text-transform: none !important;
font-weight: normal !important;
line-height: 1.4 !important;
text-align: left !important;
flex-grow: 1 !important;
}
/* Related Products - Stock Status */
.related.products .product-card .product-info .product-category-stock .stock {
font-size: 11px !important;
background-color: #e7f7e7 !important;
color: #2a7d2a !important;
padding: 3px 8px !important;
border-radius: 0 !important;
margin: 0 !important;
font-family: sans-serif !important;
text-transform: none !important;
font-weight: normal !important;
text-align: center !important;
flex-shrink: 0 !important;
}
.related.products .product-card .product-info .product-category-stock .stock.out-of-stock {
background-color: #fde8e8 !important;
color: #b91c1c !important;
}
/* Related Products - Add to Cart Button */
.related.products .product-card .product-info .add-to-cart,
.related.products .product-card .product-info .button {
width: 100% !important;
background-color: #000 !important;
color: white !important;
border: 2px solid #000 !important;
padding: 10px !important;
font-weight: bold !important;
font-size: 14px !important;
cursor: pointer !important;
text-align: center !important;
text-decoration: none !important;
display: block !important;
margin-top: auto !important;
border-radius: 0 !important;
text-transform: none !important;
line-height: 1.2 !important;
transition: all 0.2s ease !important;
font-family: sans-serif !important;
}
.related.products .product-card .product-info .add-to-cart:hover,
.related.products .product-card .product-info .button:hover {
background-color: rgba(0, 0, 0, 0.9) !important;
transform: translateY(-2px) !important;
box-shadow: 3px 3px 0 rgba(255, 105, 180, 0.8) !important;
}
/* Related Products Responsive Grid */
@media (min-width: 576px) {
.related.products ul.products,
.related.products .products-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (min-width: 992px) {
.related.products ul.products,
.related.products .products-grid {
grid-template-columns: repeat(3, 1fr) !important;
}
}
/* Mobile Only - Increase Padding */
@media (max-width: 575px) {
.related.products .product-card .product-info {
padding: 20px !important;
}
}
/* Responsive Styles */
@media (min-width: 768px) {
.product-gallery-col {
flex: 0 0 48%;
max-width: 48%;
}
.product-summary-col {
flex: 0 0 48%;
max-width: 48%;
padding-left: 4%;
}
}
/* Pink Sale Badge - Neo-Brutalist Style */
.onsale,
.best-seller,
.woocommerce span.onsale,
.woocommerce .onsale {
position: absolute !important;
top: 8px !important;
right: 8px !important;
z-index: 10 !important;
background-color: #ff69b4 !important;
color: #fff !important;
padding: 3px 8px !important;
font-size: 10px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
border: 2px solid #000 !important;
box-shadow: 4px 4px 0px 0px rgba(0,0,0,1) !important;
min-height: auto !important;
min-width: auto !important;
max-width: fit-content !important;
width: fit-content !important;
line-height: 1 !important;
border-radius: 0 !important;
display: inline-block !important;
white-space: nowrap !important;
}
/* Gallery Navigation */
.custom-gallery-nav {
position: absolute;
top: 50%;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
z-index: 10;
pointer-events: none;
}
.gallery-prev,
.gallery-next {
background-color: rgba(255, 255, 255, 1);
border: 4px solid #000;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 18px;
color: #000;
transition: none;
pointer-events: auto;
margin: 0 10px;
box-shadow: 4px 4px 0px 0px rgba(0,0,0,1) !important;
}
.gallery-prev:hover,
.gallery-next:hover {
background-color: rgba(255, 255, 255, 1);
color: #ff69b4;
box-shadow: 5px 5px 0px 0px rgba(255,105,180,1) !important;
}
.gallery-prev {
margin-left: 10px;
}
.gallery-next {
margin-right: 10px;
}
/* Hide Flexslider navigation arrows but keep the functionality */
.flex-direction-nav {
display: none !important;
}
/* --- Product Benefit Boxes (Customizer) --- */
.product-benefits.customizer-benefits {
display: flex;
justify-content: space-between;
gap: 20px; /* Adjust gap between boxes */
margin-top: 30px; /* Space above the boxes */
margin-bottom: 30px; /* Space below the boxes */
clear: both; /* Ensure it clears floats */
padding-top: 20px; /* Optional padding above */
}
.customizer-benefits .benefit {
flex: 1; /* Each box takes equal space */
border: 4px solid #000; /* Black border */
border-radius: 0; /* CHANGED: Removed rounded corners */
padding: 20px 15px; /* Padding inside boxes */
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
background-color: #fff; /* White background */
}
.customizer-benefits .benefit-icon {
width: 50px; /* Adjust size as needed */
height: 50px; /* Adjust size as needed */
margin-bottom: 15px; /* Space below icon */
background-size: contain;
background-repeat: no-repeat;
background-position: center;
/* Add specific background images below */
}
/* --- REMOVED Specific Icons Background Images --- */
/*
.customizer-benefits .benefit-icon-shipping {
background-image: url('../images/icon-shipping.png');
}
.customizer-benefits .benefit-icon-guarantee {
background-image: url('../images/icon-guarantee.png');
}
.customizer-benefits .benefit-icon-dispatch {
background-image: url('../images/icon-dispatch.png');
}
.customizer-benefits .benefit-icon-checkmark {
background-image: url('../images/icon-checkmark.png');
}
*/
/* Add rules for custom1, custom2 etc. if you use them */
.customizer-benefits .benefit-details h4 {
font-size: 1.1em; /* Adjust as needed */
margin-bottom: 5px;
font-weight: 600; /* Adjust as needed */
color: #000;
}
.customizer-benefits .benefit-details p {
font-size: 0.9em; /* Adjust as needed */
color: #000;
margin: 0;
}
/* Responsive Adjustments (Optional) */
@media (max-width: 991px) {
.product-benefits.customizer-benefits {
flex-direction: column; /* Stack vertically on smaller screens */
}
/* Price and Stock responsive */
.product-price-stock {
flex-direction: column !important;
align-items: flex-start !important;
gap: 15px !important;
}
/* Force variation price and stock to stack vertically on mobile */
.woocommerce-variation.single_variation {
flex-direction: column !important;
align-items: flex-start !important;
gap: 15px !important;
}
.woocommerce-variation-availability {
margin-left: 0 !important;
}
/* Handled by separate mobile media query above */
/* Quantity selector: single row on mobile */
.custom-quantity-options {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 6px !important;
}
}
/* Customer Reviews Section Styles */
.product-reviews-section {
margin: 50px 0;
padding: 30px;
border: 4px solid #000;
border-radius: 0;
box-shadow: 6px 6px 0px 0px rgba(0,0,0,0.8);
background-color: #fff;
}
.reviews-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
}
.customer-reviews-title {
margin: 0;
font-size: 24px;
font-weight: 700;
color: #000;
}
.write-review-btn {
display: inline-block;
background-color: #ff69b4;
color: #fff;
padding: 10px 20px;
font-size: 16px;
font-weight: 600;
text-decoration: none;
border-radius: 0;
text-transform: uppercase;
transition: background-color 0.3s;
border: 4px solid #000;
box-shadow: 3px 3px 0px 0px rgba(0,0,0,0.8);
}
.write-review-btn:hover {
background-color: #e5509e;
}
.reviews-container {
display: flex;
flex-direction: column;
}
/* Reviews Summary (Left Column) */
.reviews-summary {
margin-bottom: 30px;
padding: 20px;
background-color: #f9f9f9;
border: 4px solid #000;
}
.avg-rating {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.rating-star {
font-size: 24px;
color: #000;
margin-right: 2px;
}
.rating-star.filled {
color: #ff69b4;
}
.rating-star.half {
position: relative;
color: #000;
}
.rating-star.half:after {
content: '★';
position: absolute;
left: 0;
top: 0;
width: 50%;
overflow: hidden;
color: #ff69b4;
}
.rating-number {
font-size: 24px;
font-weight: 700;
margin-left: 10px;
}
.reviews-count {
font-size: 14px;
color: #000;
margin-bottom: 20px;
}
.rating-distribution {
margin-top: 15px;
}
.rating-row {
display: flex;
align-items: center;
margin-bottom: 8px;
}
.star-level {
width: 40px;
font-size: 14px;
font-weight: 600;
}
.rating-bar-container {
flex-grow: 1;
height: 12px;
background-color: #eee;
margin: 0 10px;
border-radius: 6px;
overflow: hidden;
}
.rating-bar {
height: 100%;
background-color: #ff69b4;
border-radius: 6px;
}
.rating-percentage {
width: 40px;
font-size: 14px;
text-align: right;
}
/* Reviews List (Right Column) */
.reviews-list {
margin-top: 20px;
}
.review-card {
padding: 20px;
margin-bottom: 20px;
border: 4px solid #000;
background-color: #fff;
}
.review-header {
margin-bottom: 15px;
}
.review-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.review-rating {
display: flex;
}
.review-rating .rating-star {
font-size: 18px;
}
.review-date {
font-size: 14px;
color: #000;
}
.reviewer-name {
font-size: 18px;
font-weight: 700;
margin: 0 0 5px;
text-transform: uppercase;
}
.verified-badge {
display: inline-block;
font-size: 14px;
color: #27ae60;
margin: 0;
}
.review-content {
font-size: 15px;
line-height: 1.6;
color: #444;
}
/* Review Images */
.review-images {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 15px;
}
.review-image {
width: 80px;
height: 80px;
border: 4px solid #000;
border-radius: 4px;
overflow: hidden;
transition: transform 0.2s ease;
position: relative;
aspect-ratio: 1/1;
}
.review-image:hover {
transform: scale(1.05);
}
.review-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* View All Reviews Button */
.view-all-reviews {
text-align: center;
margin-top: 20px;
}
.view-all-btn {
display: inline-block;
background-color: #f5f5f5;
color: #000;
border: 4px solid #000;
padding: 10px 20px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
border-radius: 0;
transition: background-color 0.3s;
text-transform: uppercase;
}
.view-all-btn:hover {
background-color: #eee;
}
.no-reviews {
font-style: italic;
color: #000;
}
/* Write Review Form */
.write-review-form {
padding: 30px;
border: 4px solid #000;
background-color: #f9f9f9;
margin-top: 40px;
}
.write-review-title {
margin-top: 0;
margin-bottom: 20px;
font-size: 20px;
font-weight: 700;
text-transform: uppercase;
}
#review-form .form-row {
margin-bottom: 20px;
}
#review-form label {
display: block;
margin-bottom: 8px;
font-weight: 600;
font-size: 16px;
}
#review-form input[type="text"] {
width: 100%;
padding: 10px;
border: 4px solid #000;
border-radius: 0;
font-size: 16px;
}
#review-form textarea {
width: 100%;
padding: 10px;
border: 4px solid #000;
border-radius: 0;
font-size: 16px;
resize: vertical;
}
.review-guidelines {
font-size: 14px;
color: #000;
margin-top: 5px;
font-style: italic;
}
.review-rating-input {
display: flex;
margin-bottom: 10px;
}
.review-rating-input .rating-star {
font-size: 30px;
color: #000;
margin-right: 5px;
cursor: pointer;
transition: color 0.2s;
}
.review-rating-input .rating-star:hover,
.review-rating-input .rating-star.filled {
color: #ff69b4;
}
.submit-review-btn {
background-color: #ff69b4;
color: #fff;
border: 4px solid #000;
box-shadow: 3px 3px 0px 0px rgba(0,0,0,0.8);
padding: 12px 25px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s;
text-transform: uppercase;
border-radius: 0;
}
.submit-review-btn:hover {
background-color: #e5509e;
}
.review-success-message {
background-color: #e3f3e4;
border: 4px solid #27ae60;
padding: 15px;
border-radius: 5px;
margin-bottom: 20px;
text-align: center;
}
.review-success-message p {
color: #27ae60;
font-weight: 600;
margin: 0;
}
/* Responsive Styles */
@media (min-width: 768px) {
.reviews-container {
flex-direction: row;
}
.reviews-summary {
flex: 0 0 40%;
margin-right: 30px;
margin-bottom: 0;
}
.reviews-list {
flex: 1;
margin-top: 0;
}
}
/* Remove all rounded corners from product page sections */
.product-single .quantity-selector-wrapper,
.product-single .single_add_to_cart_button,
.product-single .product-highlights,
.product-single .savings-badge,
.product-single .product-benefits .benefit,
.product-single .stock,
.product-single .woocommerce-product-gallery__image img,
.product-single .woocommerce-product-gallery .flex-viewport,
.product-single .woocommerce-product-gallery ol.flex-control-nav li img,
.product-single .product-category-pill,
.product-single .related-product-card,
.product-single .info-box,
.product-single .tab-content,
.product-single .woocommerce-tabs ul.tabs li a,
.product-single .product-details-sections,
.product-single .product-reviews-section,
.product-single .review-card,
.product-single .write-review-btn,
.product-single .benefit-icon,
.product-single .quantity-option,
.product-single .pro-tip-notice,
.product-single .product-notice,
.product-single .notice-content,
.product-single .review-image,
.product-single .rating-bar-container,
.product-single .rating-bar,
.product-single .review-success-message,
.product-single .woocommerce-product-gallery__trigger,
.woocommerce .product-single input,
.woocommerce .product-single button,
.woocommerce .product-single .button,
.woocommerce .product-single select,
.woocommerce .product-single textarea {
border-radius: 0;
}
/* Ensure all black borders are consistently 4px solid */
.product-single [style*="border: 1px solid #000"],
.product-single [style*="border: 2px solid #000"],
.product-single [style*="border: 3px solid #000"] {
border-width: 4px !important;
}
/* Force quantity selector borders to be 4px - Maximum Specificity */
.product-single .quantity-selector-wrapper,
.product-single .quantity-option,
.woocommerce .quantity-selector-wrapper,
.woocommerce .quantity-option,
body .quantity-selector-wrapper,
body .quantity-option,
.entry-summary .quantity-selector-wrapper,
.entry-summary .quantity-option,
.quantity-option-container .quantity-option {
border: 4px solid #000 !important;
border-width: 4px !important;
border-style: solid !important;
border-color: #000 !important;
}
/* Nuclear option - override everything for quantity selectors */
[class*="quantity"] {
border-width: 4px !important;
}
.quantity-selector-wrapper * {
border-width: 4px !important;
}
@media (max-width: 768px) {
/* Mobile Reorder: Move Quantity Selector Above Highlights */
.product-summary-col {
display: flex;
flex-direction: column;
}
.mobile-quantity-selector-simple {
order: 1; /* Show first */
}
.product-highlights {
order: 2; /* Show second */
}
/* All other elements get default order (0), so they appear after highlights */
/* Mobile: Center quantity selector */
.stock-quantity-row {
justify-content: center !important;
gap: 10px !important;
position: static !important;
left: auto !important;
opacity: 1 !important;
visibility: visible !important;
height: auto !important;
overflow: visible !important;
display: flex !important;
}
.simple-qty-under-price {
width: 100% !important;
flex: none !important;
}
.simple-qty-under-price .simple-qty-label,
.simple-qty-under-price .simple-qty-select {
flex: 1 !important;
}
/* Hide both stock status elements on mobile */
.product-stock-status,
.mobile-stock-status {
display: none !important;
}
.woocommerce-breadcrumb,
.breadcrumbs,
.product-category,
.product-tags,
.product-tag,
.product-benefits,
.customizer-benefits {
display: none !important;
}
/* MOBILE ONLY: HIDE ALL VISIBLE PRICE DISPLAYS BUT KEEP FUNCTIONAL */
.woocommerce-variation-price,
.single_variation .price,
.variations_form .price,
.price,
.woocommerce-Price-amount,
.amount,
.summary .price,
.product-summary-col .price {
position: absolute !important;
left: -9999px !important;
opacity: 0 !important;
visibility: hidden !important;
height: 0 !important;
overflow: hidden !important;
/* But keep them functional for JS */
display: block !important;
}
/* HIDE ONLY CUSTOM PRICE DISPLAYS - KEEP WOOCOMMERCE FUNCTIONAL */
.product-price-large,
.product-price-stock {
position: absolute !important;
left: -9999px !important;
opacity: 0 !important;
}
/* HIDE ABOUT THIS PRODUCT AND ORIGIN & HISTORY SECTIONS ON MOBILE */
#tab-description .product-section:nth-child(1),
#tab-description .product-section:nth-child(2) {
display: none !important;
}
/* HIDE PRODUCT NOTICE ON MOBILE EXCEPT WHEN MOBILE-VISIBLE */
.product-notice:not(.mobile-visible) {
display: none !important;
}
/* ENSURE MOBILE-VISIBLE PRODUCT NOTICE IS SHOWN */
.product-notice.mobile-visible {
display: block !important;
margin: 20px 0 !important;
padding: 15px !important;
background-color: #fff8e1 !important;
border: none !important;
border-radius: 0 !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}
/* Mobile-specific notice styling */
.product-notice.mobile-visible .notice-content {
display: flex !important;
align-items: flex-start !important;
}
.product-notice.mobile-visible .notice-icon {
font-size: 18px !important;
color: #f57c00 !important;
margin-right: 12px !important;
flex-shrink: 0 !important;
}
.product-notice.mobile-visible .notice-text {
font-size: 14px !important;
line-height: 1.4 !important;
color: #000 !important;
}
/* REMOVE PADDING FROM TAB CONTENT ON MOBILE */
.tab-content {
padding: 0 !important;
}
/* CENTER PRODUCT TITLE AND SECTION HEADINGS ON MOBILE */
.product_title,
.entry-title {
text-align: center !important;
}
/* Center subsection headings like "RESEARCH APPLICATIONS" */
.mobile-section-content h3,
.mobile-section-content .info-box h3,
.mobile-section-content .section-title {
text-align: center !important;
font-weight: bold !important;
text-transform: uppercase !important;
margin-bottom: 15px !important;
}
/* INCREASE STAR RATING SIZE BY 44% ON MOBILE (1.2em + 20%) */
.star-rating,
.woocommerce-product-rating .star-rating {
font-size: 1.44em !important;
margin-right: 8px !important;
}
/* INCREASE OVERALL RATING SECTION SIZE ON MOBILE */
.woocommerce-product-rating {
font-size: 1.2em !important;
}
/* INCREASE PRODUCT RATING SUMMARY STARS BY 30% ON MOBILE (decreased by 10%) */
.product-rating-summary .star {
font-size: 1.3em !important;
}
/* INCREASE PRODUCT RATING SUMMARY SECTION ON MOBILE */
.product-rating-summary {
font-size: 1.2em !important;
}
.product-rating-summary .rating-text {
font-size: 1.1em !important;
}
/* HIDE QUANTITY LABEL ON MOBILE */
.select-quantity {
display: none !important;
}
/* ADD SMALL X TO QUANTITY NUMBERS ON MOBILE */
.quantity-number:after {
content: 'x' !important;
font-size: 0.7em !important;
margin-left: 2px !important;
vertical-align: middle !important;
opacity: 0.8 !important;
}
/* REMOVE BACKGROUND & MARGIN-TOP, SET 5PX SPACING ON MOBILE */
.quantity-selector-wrapper {
margin-top: 0 !important;
margin-bottom: 5px !important;
background-color: transparent !important;
border: none !important;
padding: 0 !important;
box-shadow: none !important;
}
.quantity-option {
background-color: #000 !important;
color: #fff !important;
border: 4px solid #000 !important;
box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.8) !important;
}
.quantity-option:hover {
background-color: #333 !important;
color: #fff !important;
}
.qty-radio:checked + .quantity-option {
background-color: #fff !important;
color: #000 !important;
box-shadow: 4px 4px 0px 0px rgba(255,105,180,0.8) !important;
}
/* SET ALL ELEMENTS TO 5PX SPACING ON MOBILE */
.product-rating-summary {
margin-bottom: 5px !important;
margin-top: 5px !important;
}
.product_title {
margin-bottom: 5px !important;
margin-top: 5px !important;
}
.mobile-collapsible-sections {
margin-top: -40px !important;
}
.mobile-collapsible-section {
margin-bottom: 5px !important;
}
/* INCREASE SALE BADGE SIZE ON MOBILE */
.onsale,
.best-seller,
.woocommerce span.onsale,
.woocommerce .onsale {
font-size: 16px !important;
padding: 8px 12px !important;
border: 3px solid #000 !important;
box-shadow: 5px 5px 0px 0px rgba(0,0,0,1) !important;
top: 12px !important;
right: 12px !important;
}
/* Remove all spacing from containers on mobile only */
.container,
.single-product-container,
.product-single-wrapper,
.product-main-content,
.fh-container,
main,
.site-main,
.content-area {
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
margin-top: 0 !important;
padding-top: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
width: 100% !important;
}
/* Target the specific container class shown in your screenshot */
.container {
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* BREAKOUT: Make product image completely full width, edge-to-edge */
.woocommerce-product-gallery {
width: 100vw !important;
margin-left: calc(-50vw + 50%) !important;
margin-right: calc(-50vw + 50%) !important;
margin-top: 0 !important;
margin-bottom: 5px !important;
padding: 0 !important;
position: relative !important;
overflow: hidden !important;
}
/* MOBILE: Override FlexSlider's 800% width BS */
.woocommerce-product-gallery .flex-viewport {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
overflow: hidden !important;
}
.woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
transform: none !important;
transition: none !important;
}
.woocommerce-product-gallery .woocommerce-product-gallery__image {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
border: none !important;
display: none !important;
float: none !important;
}
.woocommerce-product-gallery .woocommerce-product-gallery__image.flex-active-slide {
display: block !important;
}
.woocommerce-product-gallery .woocommerce-product-gallery__image img {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
border: none !important;
display: block !important;
}
/* Thumbnails stay within container */
.woocommerce-product-gallery__thumbnails {
width: calc(100% - 40px) !important;
margin: 15px 20px !important;
padding: 0 !important;
display: flex !important;
justify-content: center !important;
gap: 8px !important;
flex-wrap: wrap !important;
}
.woocommerce-product-gallery__thumbnails .woocommerce-product-gallery__image {
width: calc((100% - 16px) / 3) !important;
height: auto !important;
max-width: 100px !important;
margin: 0 !important;
flex: 0 0 auto !important;
aspect-ratio: 1/1 !important;
overflow: hidden !important;
}
.woocommerce-product-gallery__thumbnails .woocommerce-product-gallery__image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: 4px !important;
border: 3px solid #000 !important;
box-shadow: 3px 3px 0px 0px rgba(0,0,0,1) !important;
opacity: 0.7 !important;
transition: opacity 0.2s ease !important;
}
.woocommerce-product-gallery__thumbnails .woocommerce-product-gallery__image.flex-active-slide img,
.woocommerce-product-gallery__thumbnails .woocommerce-product-gallery__image img:hover {
opacity: 1 !important;
box-shadow: 4px 4px 0px 0px rgba(255,105,180,1) !important;
}
/* Mobile specific fixes for flex-control-thumbs */
.woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs {
display: flex !important;
justify-content: center !important;
gap: 8px !important;
padding: 0 !important;
margin: 15px 20px !important;
width: calc(100% - 40px) !important;
}
.woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs li {
width: calc((100% - 16px) / 3) !important;
max-width: 100px !important;
height: auto !important;
aspect-ratio: 1/1 !important;
flex: 0 0 auto !important;
}
.woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs li img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border: 3px solid #000 !important;
box-shadow: 3px 3px 0px 0px rgba(0,0,0,1) !important;
opacity: 0.7 !important;
cursor: pointer !important;
pointer-events: auto !important;
touch-action: manipulation !important;
}
/* Ensure thumbnail containers are clickable on mobile */
.woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs li {
cursor: pointer !important;
pointer-events: auto !important;
touch-action: manipulation !important;
-webkit-tap-highlight-color: rgba(255, 105, 180, 0.3) !important;
user-select: none !important;
}
/* Active state for better mobile feedback */
.woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs li:active,
.woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs li img:active {
opacity: 1 !important;
transform: scale(0.95) !important;
transition: transform 0.1s ease !important;
}
/* Convert tabs to dropdown on mobile - High specificity */
.single-product .product-tabs .tabs-nav,
.product-tabs .tabs-nav,
body .product-tabs .tabs-nav,
.single-product .woocommerce-tabs ul.tabs,
.woocommerce .woocommerce-tabs ul.tabs,
body .woocommerce-tabs ul.tabs,
.woocommerce-tabs ul.tabs {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
height: 0 !important;
overflow: hidden !important;
}
/* MOBILE COLLAPSIBLE SECTIONS */
.mobile-collapsible-sections {
display: block !important;
width: 100% !important;
}
.mobile-collapsible-section {
margin-bottom: 10px !important;
border: 4px solid #000 !important;
background-color: #fff !important;
border-radius: 0 !important;
}
.mobile-section-header {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
padding: 20px !important;
cursor: pointer !important;
background-color: #fff !important;
border-bottom: 1px solid #eee !important;
transition: background-color 0.3s ease !important;
}
.mobile-section-header:hover {
background-color: #f8f9fa !important;
}
.mobile-collapsible-section.active .mobile-section-header {
background-color: #f8f9fa !important;
border-bottom: 2px solid #000 !important;
}
.section-title {
font-size: 32px !important;
font-weight: bold !important;
text-transform: uppercase !important;
color: #000 !important;
margin: 0 !important;
text-align: center !important;
}
.section-arrow {
font-size: 24px !important;
color: #000 !important;
transition: transform 0.3s ease !important;
font-weight: bold !important;
}
.mobile-section-content {
padding: 20px !important;
border-top: none !important;
background-color: #fff !important;
animation: slideDown 0.3s ease !important;
text-align: left !important;
}
.mobile-section-content p,
.mobile-section-content ul,
.mobile-section-content ol,
.mobile-section-content div,
.mobile-section-content li {
margin-bottom: 15px !important;
line-height: 1.6 !important;
color: #333 !important;
text-align: left !important;
}
/* Body text headings (h2, h4) are left-aligned, h3 overridden above for centering */
.mobile-section-content h2,
.mobile-section-content h4 {
margin-bottom: 15px !important;
line-height: 1.6 !important;
color: #333 !important;
text-align: left !important;
}
.mobile-section-content p:last-child {
margin-bottom: 0 !important;
}
@keyframes slideDown {
from {
opacity: 0;
max-height: 0;
}
to {
opacity: 1;
max-height: 1000px;
}
}
/* REMOVE MOBILE QUANTITY DROPDOWNS BUT KEEP DESKTOP QUANTITY BOXES */
.quantity-selector-wrapper,
.mobile-quantity-selector,
.mobile-quantity-dropdown,
.selected-quantity-display,
.quantity-options,
.quantity-option,
.qty-radio {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
height: 0 !important;
overflow: hidden !important;
}
/* SHOW DESKTOP QUANTITY BOXES ON MOBILE UNDER TITLE */
.custom-quantity-selector-wrapper {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
overflow: visible !important;
/* IMPORTANT: Break it out of sticky form positioning */
position: static !important;
/* Position under title */
order: 2 !important;
padding: 15px !important;
background: #fff !important;
border: 3px solid #000 !important;
box-shadow: 4px 4px 0px 0px rgba(0,0,0,1) !important;
/* Ensure it's not part of the sticky area */
z-index: 1 !important;
}
.custom-quantity-selector-label {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
overflow: visible !important;
font-size: 18px !important;
font-weight: bold !important;
text-transform: uppercase !important;
text-align: center !important;
margin-bottom: 15px !important;
color: #000 !important;
}
.custom-quantity-options {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
overflow: visible !important;
gap: 8px !important;
justify-content: center !important;
flex-wrap: wrap !important;
}
.custom-quantity-option {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
overflow: visible !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
min-width: 70px !important;
min-height: 80px !important;
padding: 10px 8px !important;
background: #fff !important;
border: 3px solid #000 !important;
box-shadow: 3px 3px 0px 0px rgba(0,0,0,1) !important;
cursor: pointer !important;
text-align: center !important;
flex: 0 0 calc(25% - 6px) !important;
max-width: calc(25% - 6px) !important;
touch-action: manipulation !important;
-webkit-tap-highlight-color: rgba(255, 105, 180, 0.3) !important;
}
/* Override max-width constraint for grid layout on mobile/tablet */
.custom-quantity-options {
display: grid !important;
grid-template-columns: 1fr 1fr 1fr 1fr !important;
grid-template-rows: 1fr !important;
gap: 6px !important;
}
.custom-quantity-options .custom-quantity-option {
flex: none !important;
max-width: none !important;
width: 100% !important;
height: 100% !important;
box-sizing: border-box !important;
}
.custom-quantity-option.selected {
background: #000 !important;
color: #fff !important;
box-shadow: 3px 3px 0px 0px rgba(255,105,180,1) !important;
}
.custom-quantity-option .starter-label,
.custom-quantity-option .most-popular-label,
.custom-quantity-option .good-deal-label,
.custom-quantity-option .best-value-label {
font-size: 10px !important;
font-weight: bold !important;
text-transform: uppercase !important;
margin-bottom: 5px !important;
line-height: 1 !important;
}
.custom-quantity-option .quantity-number {
font-size: 24px !important;
font-weight: bold !important;
margin-bottom: 3px !important;
}
.custom-quantity-option .quantity-discount {
font-size: 9px !important;
font-weight: bold !important;
color: #28a745 !important;
line-height: 1 !important;
}
.custom-quantity-option.selected .quantity-discount {
color: #90ee90 !important;
}
/* MAKE THE WHOLE SUMMARY SECTION FLEXBOX TO POSITION QUANTITY BOXES */
.summary.entry-summary {
display: flex !important;
flex-direction: column !important;
}
/* ORDER: Title first */
.product_title {
order: 0 !important;
margin-bottom: 10px !important;
}
/* ORDER: Rating second */
.woocommerce-product-rating {
order: 1 !important;
margin-bottom: 10px !important;
}
/* ORDER: Quantity boxes third (between rating and description) */
.custom-quantity-selector-wrapper {
order: 2 !important;
margin-bottom: 15px !important;
}
/* ORDER: Everything else comes after quantity boxes */
/* ORDER: Everything else comes after quantity boxes */
.product-price-large,
.product-price-stock,
.woocommerce-variation,
.single_variation_wrap,
.woocommerce-variation-add-to-cart,
.variations_form,
form.cart,
.mobile-collapsible-sections {
order: 3 !important;
}
/* Hide price sections visually but keep functional */
.product-price-large,
.product-price-stock {
position: absolute !important;
left: -9999px !important;
opacity: 0 !important;
}
/* MOBILE QUANTITY SELECTOR FOR VARIABLE PRODUCTS WITH MULTIPLE ATTRIBUTE */
.mobile-quantity-selector-simple {
display: none; /* Hidden by default, only shown for variable products with multiple attribute */
margin: 20px 0 !important;
order: 2 !important;
}
/* Show only for variable products with quantity selector */
.product.product-type-variable .mobile-quantity-selector-simple {
display: block !important;
}
.mobile-quantity-selector-simple fieldset {
border: none !important;
margin: 0 !important;
padding: 0 !important;
}
.mobile-quantity-selector-simple legend {
font-family: "Bebas Neue", sans-serif !important;
font-size: 18px !important;
font-weight: bold !important;
text-transform: uppercase !important;
margin-bottom: 15px !important;
color: #000 !important;
text-align: center !important;
width: 100% !important;
padding: 0 !important;
}
.mobile-quantity-options {
display: grid !important;
grid-template-columns: 1fr 1fr 1fr 1fr !important;
grid-template-rows: 1fr !important;
gap: 6px !important;
width: 100% !important;
height: auto !important;
}
.mobile-qty-btn {
min-height: 90px !important;
height: 100% !important;
width: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
text-align: center !important;
padding: 8px 10px !important;
box-sizing: border-box !important;
}
.mobile-qty-btn {
background: #ffffff !important;
border: 3px solid #000000 !important;
padding: 15px 10px !important;
text-align: center !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
font-family: "Bebas Neue", sans-serif !important;
font-weight: bold !important;
position: relative !important;
box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 0.3) !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
min-height: 80px !important;
}
.mobile-qty-btn:hover {
background: #f0f0f0 !important;
transform: translateY(-1px) !important;
box-shadow: 3px 3px 0px 0px rgba(0, 0, 0, 0.3) !important;
}
.mobile-qty-btn.selected {
background: #ff69b4 !important;
color: #ffffff !important;
border-color: #000000 !important;
}
.mobile-qty-btn .qty-number {
font-size: 28px !important;
line-height: 1 !important;
color: inherit !important;
margin-bottom: 2px !important;
}
.mobile-qty-btn .qty-label {
font-size: 12px !important;
text-transform: uppercase !important;
color: inherit !important;
line-height: 1 !important;
}
.mobile-qty-btn .qty-discount {
font-size: 11px !important;
color: #2ecc71 !important;
font-weight: normal !important;
margin-top: 2px !important;
}
.mobile-qty-btn.selected .qty-discount {
color: #ffffff !important;
}
/* STICKY ADD TO CART BUTTON AT BOTTOM - PINK ROUNDED BUTTON IN BOX */
.single_add_to_cart_button {
position: fixed !important;
bottom: 10px !important;
left: 10px !important;
right: 10px !important;
width: calc(100% - 20px) !important;
max-width: calc(100% - 20px) !important;
z-index: 9997 !important;
margin: 0 !important;
border-radius: 15px !important;
padding: 18px 25px !important;
font-size: 18px !important;
font-weight: bold !important;
text-transform: uppercase !important;
background-color: #ff69b4 !important;
color: #fff !important;
border: 3px solid #000 !important;
box-shadow: 0 6px 0px 0px rgba(0,0,0,1) !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
letter-spacing: 0.5px !important;
text-align: center !important;
min-height: 60px !important;
transition: all 0.2s ease !important;
transform: translateY(0) !important;
}
.single_add_to_cart_button:hover {
background-color: #ff1493 !important;
color: #fff !important;
transform: translateY(-2px) !important;
box-shadow: 0 8px 0px 0px rgba(0,0,0,1) !important;
}
.single_add_to_cart_button:active {
background-color: #e6006b !important;
color: #fff !important;
transform: translateY(2px) !important;
box-shadow: 0 2px 0px 0px rgba(0,0,0,1) !important;
}
/* Touch-friendly feedback for mobile */
.single_add_to_cart_button {
-webkit-tap-highlight-color: rgba(255, 105, 180, 0.2) !important;
user-select: none !important;
touch-action: manipulation !important;
}
/* Prevent double-tap zoom on mobile */
.single_add_to_cart_button:focus {
outline: none !important;
}
/* Style for when price is in the button text - keep centered */
.single_add_to_cart_button[data-has-price="true"] {
justify-content: center !important;
gap: 8px !important;
}
/* Add bottom padding to body to prevent content being hidden behind sticky button */
body.single-product {
padding-bottom: 85px !important;
}
/* FORCE curved border-radius with maximum specificity to override any conflicting rules */
body.single-product .woocommerce div.product form.cart .single_add_to_cart_button,
body.single-product .woocommerce .single_add_to_cart_button,
.single-product .single_add_to_cart_button,
button.single_add_to_cart_button.single_add_to_cart_button,
.single_add_to_cart_button.single_add_to_cart_button {
border-radius: 15px !important;
-webkit-border-radius: 15px !important;
-moz-border-radius: 15px !important;
}
/* Custom class for guaranteed curved corners */
.fungashead-curved-button {
border-radius: 15px !important;
-webkit-border-radius: 15px !important;
-moz-border-radius: 15px !important;
}
/* Hide the regular add to cart form area on mobile */
.woocommerce-variation-add-to-cart,
.variations_form .woocommerce-variation-add-to-cart,
form.cart .variations_button {
position: fixed !important;
bottom: 5px !important;
left: 0 !important;
right: 0 !important;
z-index: 9997 !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
}
/* Ensure variation form buttons also get the pink curved design with black box */
.woocommerce-variation-add-to-cart .single_add_to_cart_button,
.variations_form .single_add_to_cart_button,
form.cart .single_add_to_cart_button {
background-color: #ff69b4 !important;
color: #fff !important;
border: 3px solid #000 !important;
border-radius: 0px !important;
box-shadow: 0 6px 0px 0px rgba(0,0,0,1) !important;
transition: all 0.2s ease !important;
transform: translateY(0) !important;
}
.woocommerce-variation-add-to-cart .single_add_to_cart_button:hover,
.variations_form .single_add_to_cart_button:hover,
form.cart .single_add_to_cart_button:hover {
background-color: #ff1493 !important;
color: #fff !important;
transform: translateY(-2px) !important;
box-shadow: 0 8px 0px 0px rgba(0,0,0,1) !important;
}
.woocommerce-variation-add-to-cart .single_add_to_cart_button:active,
.variations_form .single_add_to_cart_button:active,
form.cart .single_add_to_cart_button:active {
background-color: #e6006b !important;
color: #fff !important;
transform: translateY(2px) !important;
box-shadow: 0 2px 0px 0px rgba(0,0,0,1) !important;
}
/* CRITICAL: Keep quantity selector OUT of sticky form area */
.woocommerce-variation-add-to-cart .custom-quantity-selector-wrapper,
.variations_form .custom-quantity-selector-wrapper,
form.cart .custom-quantity-selector-wrapper {
position: static !important;
bottom: auto !important;
left: auto !important;
right: auto !important;
z-index: 1 !important;
margin: 15px 20px !important;
padding: 15px !important;
background: #fff !important;
border: 3px solid #000 !important;
width: auto !important;
}
}
/* ===== GIFT CARD PRODUCT SUPPORT ===== */
/* Ensure gift card products display properly with theme styling */
/* Target any product that might be a gift card by data attributes or classes */
.gift-card-product .product-single,
.single-product .product-single,
[data-product-type*="gift"] .product-single,
body.single-product .product-single {
/* Inherit all standard product styling */
}
/* Force gift card styling even if classes aren't applied correctly */
.single-product .product-main-content {
display: flex !important;
flex-wrap: wrap !important;
margin-bottom: 40px !important;
}
/* Universal fallback for ALL single product pages */
.single-product .product-gallery-col,
.single-product .product-summary-col {
flex: 0 0 100% !important;
max-width: 100% !important;
}
.single-product .product-price-stock {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
margin-bottom: 20px !important;
}
.single-product .product-price-large {
font-size: 24px !important;
font-weight: 700 !important;
color: #333 !important;
}
/* Universal responsive for ALL single products */
@media (min-width: 769px) {
.single-product .product-gallery-col {
flex: 0 0 60% !important;
max-width: 60% !important;
padding-right: 40px !important;
}
.single-product .product-summary-col {
flex: 0 0 40% !important;
max-width: 40% !important;
}
}
.gift-card-product .product-main-content {
/* Use same layout as simple products */
display: flex;
flex-wrap: wrap;
margin-bottom: 40px;
}
.gift-card-product .product-gallery-col,
.gift-card-product .product-summary-col {
/* Same responsive behavior as simple products */
flex: 0 0 100%;
max-width: 100%;
}
.gift-card-product .product-price-stock {
/* Ensure price displays correctly for gift cards */
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.gift-card-product .product-price-large {
/* Price styling for gift cards */
font-size: 24px;
font-weight: 700;
color: #333;
}
.gift-card-product .single_add_to_cart_button {
/* Ensure add to cart button works for gift cards */
width: 100%;
padding: 15px;
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
background-color: #ff69b4;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.gift-card-product .single_add_to_cart_button:hover {
background-color: #e55a9f;
}
/* Mobile responsive for gift cards */
@media (min-width: 769px) {
.gift-card-product .product-gallery-col {
flex: 0 0 60%;
max-width: 60%;
padding-right: 40px;
}
.gift-card-product .product-summary-col {
flex: 0 0 40%;
max-width: 40%;
}
}
/* End Gift Card Product Support */