/*
Theme Name: BeavaV2
Theme URI: https://beava.se
Author: Beava Team
Description: Modern WordPress theme for Beava - Built step by step
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: beavav2
*/
/* Product single meta padding to avoid header overlap (moved from inline) */
.product-single-meta {
padding-top: 4.5rem;
}
@media (max-width: 768px) {
.product-single-meta {
padding-top: 3rem;
}
}
/* ========================================
CSS Variables - Design Specification
======================================== */
/* ========================================
CSS Variables - Design Specification
======================================== */
:root {
/* Colors from Design Spec */
--color-primary: #F58E9F; /* Pink */
--color-secondary: #F5F08E; /* Yellow */
--color-accent-blue: #8ED6F5; /* Blue */
--color-accent-gray: #8E9AA0; /* Gray */
--color-black: #000000;
--color-white: #FFFFFF;
--color-background: #FFFFFF;
--color-text-dark: #000000;
/* Typography - Jost font from Google Fonts */
--font-primary: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* Font Sizes - Based on Design Spec */
--font-size-h1: 80px; /* Jost Bold 80pt */
--font-size-h2: 40px; /* Jost Bold 40pt */
--font-size-h3: 24px; /* Jost Bold 24pt */
--font-size-body: 18px; /* Jost Regular 18pt - Body text */
--font-size-small: 16px; /* Small text */
/* Font Weights - CRITICAL: Ensure bold is truly bold */
--font-weight-bold: 700; /* Bold - MUST use real Jost Bold, not synthesized */
--font-weight-regular: 400; /* Regular */
/* Spacing */
--spacing-xs: 0.5rem;
--spacing-sm: 1rem;
--spacing-md: 2rem;
--spacing-lg: 3rem;
--spacing-xl: 4rem;
/* Border Radius */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-full: 50px;
/* Standard product card width - matches category grid cards */
--beava-product-card-width: 280px;
}
/* Product single tweaks */
.product-price--pink { color: var(--color-primary); font-size: 1.5rem; font-weight: 600; margin: 0.5rem 0; }
.product-badge { display: inline-block; background: rgba(245,142,159,0.12); color: var(--color-primary); padding: 0.35rem 0.6rem; border-radius: 6px; margin-bottom: 0.75rem; }
.product-swatches { display:flex; gap:0.5rem; margin: 1rem 0; align-items:center; }
.color-thumb { border:1px solid #eee; background:#fff; padding:4px; border-radius:6px; width:48px; height:48px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.color-thumb img.color-thumb-img { max-width:100%; max-height:100%; display:block; }
.color-thumb:focus, .color-thumb.is-active { outline:2px solid var(--color-accent-blue); }
.size-pills-wrap { margin: 1rem 0; }
.size-pills-label { font-size: 0.75rem; color: #666; margin-bottom: 0.5rem; }
.size-pills { display:flex; gap:0.5rem; flex-wrap:wrap; }
.beavav2-size-button { border:1px solid #ddd; background:#fff; padding:0.5rem 1rem; border-radius:22px; cursor:pointer; min-width:48px; text-align:center; }
.beavav2-size-button[aria-pressed="true"], .beavav2-size-button.is-active { background:var(--color-accent-gray); color:#fff; border-color:transparent; }
.product-quantity { margin: 1rem 0; display:flex; gap:0.5rem; align-items:center; }
.product-quantity label { font-size:0.9rem; color:#444; }
.product-quantity input.qty { width:80px; padding:0.4rem 0.6rem; border:1px solid #ddd; border-radius:6px; }
/* Hide the long, specific variations form selector requested (non-destructive) */
@media screen {
html body.wp-singular.product-template-default.single.single-product.postid-166.logged-in.admin-bar.wp-custom-logo.wp-theme-beavav2.theme-beavav2.woocommerce.woocommerce-page.woocommerce-js.customize-support div.product-single-page div.product-single-container div.product-meta-wrap.product-single-meta form.variations_form.cart {
display: none !important;
visibility: hidden !important;
height: 0 !important;
overflow: hidden !important;
}
}
/* ========================================
Reset & Base Styles
======================================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Apply Europa font to EVERYTHING */
*,
*::before,
*::after {
font-family: var(--font-primary) !important;
}
html {
overflow-x: hidden;
width: 100%;
max-width: 100%;
}
body {
font-family: var(--font-primary);
font-size: var(--font-size-body);
font-weight: var(--font-weight-regular);
line-height: 1.6;
color: var(--color-text-dark);
background-color: var(--color-background);
overflow-x: hidden;
overflow-y: scroll;
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
}
/* Prevent any child from causing horizontal overflow on mobile */
body > * {
max-width: 100%;
overflow-x: hidden;
}
/* ========================================
Typography - Europa Font (Bold 80pt & Regular 40pt/24pt)
======================================== */
h1, .h1 {
font-family: var(--font-primary);
font-size: var(--font-size-h1);
/* Heading weight set to 500 (Medium) */
font-weight: 500;
font-synthesis: none; /* prevent browser from faking bold/italic */
letter-spacing: -0.01em; /* tighten slightly to match style tile feel */
line-height: 1.2;
margin-bottom: 1rem;
}
h2, .h2 {
font-family: var(--font-primary);
font-size: var(--font-size-h2);
font-weight: 500;
line-height: 1.3;
margin-bottom: 0.75rem;
}
h3, .h3 {
font-family: var(--font-primary);
font-size: var(--font-size-h3);
font-weight: 500;
line-height: 1.4;
margin-bottom: 0.5rem;
}
h4, .h4 {
font-family: var(--font-primary);
font-size: var(--font-size-small);
font-weight: 500;
line-height: 1.4;
margin-bottom: 0.5rem;
}
p {
font-family: var(--font-primary);
font-size: var(--font-size-body);
font-weight: var(--font-weight-regular);
line-height: 1.8;
margin-bottom: 1rem;
}
a {
color: var(--color-text-dark);
text-decoration: none;
transition: opacity 0.3s ease;
}
a:hover {
opacity: 0.7;
}
/* ========================================
Responsive Typography for Mobile
======================================== */
@media (max-width: 768px) {
:root {
--font-size-h1: 48px; /* Smaller on mobile */
--font-size-h2: 32px;
--font-size-h3: 20px;
--font-size-body: 16px;
--font-size-small: 14px;
}
}
/* ========================================
Buttons - From Design Spec UI/NAPIT
======================================== */
.btn,
.wp-block-button__link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 1rem 2.5rem;
font-family: var(--font-primary);
font-size: var(--font-size-small);
font-weight: var(--font-weight-bold);
text-decoration: none;
border: none;
border-radius: var(--radius-full);
cursor: pointer;
transition: all 0.3s ease;
}
/* White button (from design spec) */
.btn-primary,
.wp-block-button.is-style-fill .wp-block-button__link {
background-color: var(--color-white);
color: var(--color-black);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* Hide WooCommerce SKU markup (theme design chooses not to show SKUs) */
.product_meta .sku_wrapper,
.product_meta .sku {
display: none !important;
visibility: hidden !important;
height: 0 !important;
overflow: hidden !important;
}
/* Black button (from design spec) */
.btn-secondary {
background-color: var(--color-black);
color: var(--color-white);
}
.btn-secondary:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
/* ------------------------------
Product Collection / Carousel
------------------------------ */
/* Match side padding used by other content blocks (use --spacing-lg = 3rem) */
.beava-product-carousel-section .wp-block-woocommerce-product-collection.alignwide,
.wp-block-woocommerce-product-collection.alignwide,
.wp-block-woocommerce-product-collection.alignfull {
padding-left: var(--spacing-lg);
padding-right: var(--spacing-lg);
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
/* Legacy ACF-driven product carousel section used on the frontpage */
.product-carousel-section,
.product-carousel-wrapper {
max-width: 1400px;
margin: 0 auto !important;
padding: 0 var(--spacing-lg) !important;
}
/* Carousel control bar (top-left category select, top-right nav) */
.product-carousel-controls {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
/* Pin the control bar to the top of the carousel and keep it visually separated */
.product-carousel-section .product-carousel-controls {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.product-carousel-section .product-carousel-controls-left,
.product-carousel-section .product-carousel-controls-right {
background: rgba(255,255,255,0.95);
padding: 8px 12px;
border-radius: 999px;
display: flex;
align-items: center;
}
.product-carousel-section .product-carousel-controls-right { margin-left: auto; }
.product-carousel-controls-left {
display: flex;
align-items: center;
}
/* Style for the 'Se alla' link (see-all) - visually appears to the right next to nav */
.product-carousel-see-all {
margin-right: 12px;
color: var(--color-black);
text-decoration: underline;
font-weight: 500;
white-space: nowrap;
font-size: 16px;
line-height: 1;
}
.product-carousel-category-select {
padding: 0.6rem 1rem;
border-radius: 28px;
border: 1px solid rgba(0,0,0,0.08);
background: white;
}
.product-carousel-controls-right {
display: flex;
align-items: center;
gap: 0.75rem;
}
/* Ensure server-rendered right controls are grouped to the far right and have extra spacing */
.product-carousel-section .product-carousel-controls-right {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 1.5rem; /* slightly larger gap between see-all and nav */
padding-right: 0.5rem;
}
.product-carousel-section .product-carousel-see-all {
margin-right: 24px; /* ensure visible gap between link and nav */
z-index: 1;
}
.product-carousel-controls-right .swiper-button-prev,
.product-carousel-controls-right .swiper-button-next {
width: 44px;
height: 44px;
border-radius: 50%;
background: #ffffff;
border: 1px solid rgba(0,0,0,0.06);
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 24px rgba(0,0,0,0.10);
transition: transform 0.12s ease, box-shadow 0.12s ease;
}
/* Move the control bar to the top corner visually when inside the carousel section */
.product-carousel-section .product-carousel-controls {
margin-bottom: 1rem;
align-items: center;
}
/* Align see-all and nav on right side of the control bar */
.product-carousel-section .product-carousel-controls-left {
order: 1;
}
.product-carousel-section .product-carousel-controls-right {
order: 2;
}
/* Ensure controls sit above the carousel content and are not overlapping slides */
.product-carousel-section .product-carousel {
position: relative;
}
/* On wider screens, float the see-all and pager to the right inside the right controls */
.product-carousel-section .product-carousel-controls-right {
display: flex;
align-items: center;
gap: 0.75rem;
}
.product-carousel .product-carousel-see-all {
margin: 0 8px 0 0;
font-weight: 600;
}
/* Prevent controls overlapping the first row of slides by reserving vertical space */
.product-carousel.swiper {
padding-top: 20px; /* small padding since controls now sit above the carousel */
}
/* Slightly larger reserve on small screens */
@media (max-width: 640px) {
.product-carousel.swiper { padding-top: 84px; }
.product-carousel .product-carousel-controls { top: 10px; }
.product-carousel .product-carousel-controls > .product-carousel-controls-left,
.product-carousel .product-carousel-controls > .product-carousel-controls-right { padding: 8px 10px; }
}
/* Bottom pagination bar centered below slides */
.product-carousel-bottom {
display: flex;
justify-content: center;
padding-top: 18px;
padding-bottom: 6px;
}
.product-carousel-bottom .swiper-pagination {
position: static !important;
margin: 0;
z-index: 90;
}
/* Ensure the control pill sits above slides and right-controls are positioned to the right */
.product-carousel .product-carousel-controls { display: flex; justify-content: space-between; }
.product-carousel .product-carousel-controls-right { margin-left: auto; }
/* Make sure nav buttons are visually separated from content and not overlapping */
.product-carousel .product-carousel-controls-right .swiper-button-prev,
.product-carousel .product-carousel-controls-right .swiper-button-next {
margin-left: 8px;
}
/* Replace default Swiper arrow text with simple chevrons */
.product-carousel .swiper-button-prev::after,
.product-carousel .swiper-button-next::after,
.product-carousel-section .swiper-button-prev::after,
.product-carousel-section .swiper-button-next::after {
display: none !important; /* hide default label text */
content: '' !important;
}
.product-carousel .swiper-button-prev,
.product-carousel .swiper-button-next,
.product-carousel-section .swiper-button-prev,
.product-carousel-section .swiper-button-next {
font-size: 0 !important; /* hide any inline text */
position: relative;
}
/* Draw a compact chevron using borders, centered inside the circular nav */
.product-carousel .swiper-button-prev::before,
.product-carousel .swiper-button-next::before,
.product-carousel-section .swiper-button-prev::before,
.product-carousel-section .swiper-button-next::before {
content: '';
display: block;
width: 10px;
height: 10px;
border-style: solid;
border-width: 0 2px 2px 0; /* right and bottom borders create a chevron when rotated */
border-color: rgba(0,0,0,0.65);
transform-origin: center;
margin: auto;
}
/* Use explicit '<' and '>' chars for arrows so they appear as simple angles */
.product-carousel .swiper-button-prev::before,
.product-carousel-section .swiper-button-prev::before,
.product-carousel .swiper-button-next::before,
.product-carousel-section .swiper-button-next::before {
content: '' !important; /* no text content, use background SVG */
}
/* Use inline SVG backgrounds for crisp, correctly oriented arrows */
.product-carousel .swiper-button-prev,
.product-carousel-section .swiper-button-prev {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 16px 16px;
}
.product-carousel .swiper-button-next,
.product-carousel-section .swiper-button-next {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 16px 16px;
}
/* Remove any residual pseudo-element content to avoid overlapping glyphs */
.product-carousel .swiper-button-prev::after,
.product-carousel .swiper-button-next::after,
.product-carousel-section .swiper-button-prev::after,
.product-carousel-section .swiper-button-next::after {
display: none !important;
content: '' !important;
}
/* Ensure no residual pseudo-elements or text glyphs are rendered inside nav buttons */
.product-carousel .swiper-button-prev::before,
.product-carousel .swiper-button-next::before,
.product-carousel-section .swiper-button-prev::before,
.product-carousel-section .swiper-button-next::before,
.product-carousel .swiper-button-prev::after,
.product-carousel .swiper-button-next::after,
.product-carousel-section .swiper-button-prev::after,
.product-carousel-section .swiper-button-next::after {
display: none !important;
content: none !important;
}
/* Ensure the button element itself doesn't display accidental text */
.product-carousel .swiper-button-prev,
.product-carousel .swiper-button-next,
.product-carousel-section .swiper-button-prev,
.product-carousel-section .swiper-button-next {
color: transparent !important;
}
/* Slight spacing between nav buttons to avoid visual merging */
.product-carousel-section .product-carousel-controls-right .swiper-button-prev { margin-right: 12px; }
.product-carousel .product-carousel-controls-right .swiper-button-prev { margin-right: 12px; }
/* ensure next button is slightly separated as well (symmetric spacing) */
.product-carousel-section .product-carousel-controls-right .swiper-button-next { margin-left: 12px; }
.product-carousel .product-carousel-controls-right .swiper-button-next { margin-left: 12px; }
/* Ensure nav circles are large enough and clearly separated from content */
.product-carousel .product-carousel-controls-right .swiper-button-prev,
.product-carousel .product-carousel-controls-right .swiper-button-next {
width: 48px;
height: 48px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Replace heavy shadow with a thinner, slightly darker 1px ring */
.product-carousel-controls-right .swiper-button-prev,
.product-carousel-controls-right .swiper-button-next,
.product-carousel .product-carousel-controls-right .swiper-button-prev,
.product-carousel .product-carousel-controls-right .swiper-button-next,
.product-carousel-section .swiper-button-prev,
.product-carousel-section .swiper-button-next {
/* thin dark ring, no large drop shadow */
box-shadow: 0 0 0 1px rgba(0,0,0,0.18);
transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.product-carousel-controls-right .swiper-button-prev:hover,
.product-carousel-controls-right .swiper-button-next:hover,
.product-carousel .product-carousel-controls-right .swiper-button-prev:hover,
.product-carousel .product-carousel-controls-right .swiper-button-next:hover,
.product-carousel-section .swiper-button-prev:hover,
.product-carousel-section .swiper-button-next:hover {
box-shadow: 0 0 0 1px rgba(0,0,0,0.26);
}
/* Small screens: stack controls for better touch targets */
@media (max-width: 640px) {
.product-carousel-controls { flex-direction: column; align-items: stretch; gap: 0.5rem; }
.product-carousel-controls-left, .product-carousel-controls-right { justify-content: space-between; }
}
.product-carousel-controls-right .swiper-button-prev:hover,
.product-carousel-controls-right .swiper-button-next:hover {
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(0,0,0,0.12);
}
.product-carousel-controls-right .swiper-button-prev::after,
.product-carousel-controls-right .swiper-button-next::after {
font-size: 18px;
color: rgba(0,0,0,0.55);
}
/* Ensure the controls block sits flush to the top-right visually */
.product-carousel-section .product-carousel-controls {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
/* Slightly increase spacing between see-all and nav buttons */
.product-carousel-section .product-carousel-controls-right {
gap: 0.75rem;
}
/* Make the select visually a pill and a little smaller to match design */
.product-carousel-category-select {
padding: 0.5rem 0.9rem;
border-radius: 999px;
font-size: 15px;
}
/* Fallback caret for native select (visible when JS enhancement not active) */
.product-carousel-category-select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding-right: 2.6rem; /* room for caret */
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 14px 14px;
}
/* Custom dropdown enhancement (JS will hide native select and show this custom control)
Appearance: pill button with rounded panel containing large checkboxes and labels */
.beava-cat-faux {
display: inline-block;
position: relative;
}
.beava-cat-faux .beava-cat-button {
display: inline-flex;
align-items: center;
gap: 0.5rem;
justify-content: space-between;
padding: 0.6rem 1.1rem;
border-radius: 28px;
border: 1px solid rgba(0,0,0,0.08);
background: #fff;
cursor: pointer;
min-width: 220px;
}
.beava-cat-faux .beava-cat-button .label { font-size: 18px; color: #333; flex: 1; text-align: left; }
.beava-cat-panel {
position: absolute;
top: calc(100% + 10px);
left: 0;
background: #fff;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
padding: 12px 16px;
min-width: 220px;
z-index: 200;
}
.beava-cat-panel .cat-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 8px;
}
.beava-cat-panel .cat-item input[type=checkbox] {
width: 26px; height: 26px; border-radius: 8px; accent-color: var(--color-primary);
border: 1px solid rgba(0,0,0,0.12);
}
.beava-cat-panel .cat-item label { font-size: 18px; color: #333; }
/* Hide the native select when JS enhancement is active (class added by JS) */
.beava-cat-enhanced .product-carousel-category-select { display: none !important; }
.beava-cat-enhanced .beava-cat-faux { display: inline-block; }
/* Accessibility focus styles */
.beava-cat-button:focus { outline: 3px solid rgba(0,0,0,0.06); }
.beava-cat-panel .cat-item input:focus { outline: 2px solid rgba(0,0,0,0.08); }
/* Responsive: on small screens make the faux button and panel full width */
@media (max-width: 640px) {
.beava-cat-faux { display: block; width: 100%; }
.beava-cat-faux .beava-cat-button { width: 100%; justify-content: space-between; }
.beava-cat-faux .beava-cat-button .label { font-size: 16px; }
.beava-cat-panel {
position: absolute;
left: 0;
right: 0;
width: calc(100% - 0px);
min-width: 0;
margin: 0;
box-shadow: 0 14px 40px rgba(0,0,0,0.12);
border-radius: 12px;
padding: 14px;
}
.beava-cat-panel .cat-item { padding: 12px 6px; }
.beava-cat-panel .cat-item label { font-size: 16px; }
}
/* Caret icons: down when closed, up when open (use SVG for crisp rendering) */
.beava-cat-button .caret {
width: 18px;
height: 18px;
display: inline-block;
flex-shrink: 0;
}
/* Ensure the product-carousel container matches normal content width on smaller screens */
.product-carousel.swiper {
max-width: 1400px;
margin-left: auto;
margin-right: auto;
padding-left: var(--spacing-md);
padding-right: var(--spacing-md);
}
/* Ensure the internal carousel container doesn't expand slides full-bleed */
.product-carousel-section .product-carousel,
.product-carousel-wrapper .product-carousel {
width: 100%;
box-sizing: border-box;
}
/* Standard product card width used across product pages - ensure consistent with root variable */
/* value intentionally kept in :root near the top; do not redefine here */
/* Make carousel/swiper slides match product card width */
.product-carousel .swiper-wrapper {
display: flex;
align-items: flex-start;
gap: 0.4rem; /* reduce spacing between slides so more cards fit */
}
.product-carousel .swiper-slide,
.product-carousel .product-card,
.product-carousel-section .product-card {
flex: 0 0 var(--beava-product-card-width);
width: var(--beava-product-card-width);
max-width: var(--beava-product-card-width);
box-sizing: border-box;
}
/* Mobile: carousel slides fill available width, one at a time */
@media (max-width: 767px) {
.product-carousel .swiper-slide,
.product-carousel .product-card,
.product-carousel-section .product-card {
flex: 0 0 100%;
width: 100%;
max-width: 100%;
}
.product-carousel.swiper {
padding-left: 1rem;
padding-right: 1rem;
}
.product-carousel-section,
.product-carousel-wrapper {
padding: 0 1rem !important;
}
}
/* Ensure carousel images use the same size as category grid */
.product-carousel .product-card img,
.product-carousel-section .product-card img {
width: 100%;
height: 280px;
object-fit: contain;
background: #f8f8f8;
}
/* Also ensure block-based product collections render the same card width when possible */
.wp-block-woocommerce-product-collection .wc-block-grid__product {
max-width: var(--beava-product-card-width);
}
/* Slightly smaller cards: reduce inner content (gives visual breathing room) */
.wp-block-woocommerce-product-collection .wp-block-woocommerce-product-template {
padding: 0.5rem 0.4rem; /* tighter to reduce card spacing */
}
/* Ensure the product title and price have comfortable spacing */
.wp-block-woocommerce-product-collection .wc-block-grid__product-title {
margin-top: 0.75rem;
margin-bottom: 0.5rem;
}
/* Hint styling in the block pattern */
.beava-hint {
color: rgba(0,0,0,0.7);
font-size: 0.95rem;
}
/* ========================================
Layout & Container
======================================== */
.site {
overflow-x: hidden;
width: 100%;
max-width: 100%;
}
.container {
max-width: 100%;
margin: 0;
padding: 0 var(--spacing-md);
}
.content-area {
width: 100%;
max-width: 100%;
margin: 0;
}
.site-main {
width: 100%;
max-width: 100%;
padding: 0;
overflow-x: hidden; /* Prevent horizontal scroll from full-width blocks */
}
/* Default content wrapper for blocks (not full-width) */
/* Exclude hero-section, video-content-block, and full-width elements */
.site-main > *:not(.alignfull):not(.alignwide):not(.is-style-beava-full-width):not(.hero-section):not(.video-content-block):not(.product-carousel-section),
.product-category-archive > *:not(.alignfull):not(.alignwide):not(.is-style-beava-full-width):not(.beava-shop-header):not(.block-pattern-header):not(.beava-product-carousel-section):not(.product-custom-print-banner):not(.beavav2-grid-wrap) {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: 2rem;
padding-right: 2rem;
}
/* ========================================
Product Listing - Card / Swatches
======================================== */
.product-card {
padding: 0;
display: flex;
flex-direction: column;
gap: 0;
background: #fff;
}
/* When product-cards are rendered inside WooCommerce block grids, ensure they fit their grid cell */
.wc-block-grid__product .product-card,
.wc-block-grid__product > .product-card {
width: 100%;
max-width: 100%;
padding: 1rem;
}
/* Thumbnail & card alignment - natural size, no cropping */
.product-card .attachment-woocommerce_thumbnail,
.product-card img.wp-post-image {
width: auto;
height: auto;
max-width: 100%;
max-height: 230px;
object-fit: contain;
display: block;
margin: 0 auto;
}
.product-card .woocommerce-LoopProduct-link {
display: flex;
align-items: center;
justify-content: center;
min-height: 230px;
background: #f8f8f8;
}
.product-meta {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.product-category-label {
font-size: 13px;
color: #999;
text-transform: none;
margin-bottom: 2px;
font-weight: 400;
letter-spacing: 0;
}
.product-title {
margin: 0 0 2px;
font-size: 16px;
line-height: 1.3;
font-weight: 400; /* regular weight for cleaner look */
}
.product-title a {
color: #1d2327;
text-decoration: underline;
}
.product-title a:hover {
color: #1d2327;
text-decoration: underline;
}
.product-color-preview {
display: flex;
gap: 0.5rem;
align-items: center;
}
.product-color-preview .swatch {
width: 18px;
height: 18px;
border-radius: 50%;
display: inline-block;
box-shadow: 0 1px 0 rgba(0,0,0,0.06) inset;
border: 2px solid rgba(255,255,255,0.9);
cursor: pointer;
position: relative;
z-index: 1;
}
/* When swatches appear inside the narrower product-carousel cards, scale them down slightly */
.product-carousel .product-color-preview .swatch,
.product-carousel-section .product-color-preview .swatch,
.wp-block-woocommerce-product-collection .product-color-preview .swatch {
width: 18px;
height: 18px;
border-width: 1.5px;
}
@media (max-width: 768px) {
.product-carousel .product-color-preview .swatch,
.wp-block-woocommerce-product-collection .product-color-preview .swatch {
width: 14px;
height: 14px;
}
}
/* Swatch tooltip: simple hover effect (native title used for accessible tooltip). Add subtle focus outline for keyboard users */
.product-color-preview .swatch:focus,
.product-color-preview .swatch:hover {
outline: 3px solid rgba(0,0,0,0.06);
transform: scale(1.04);
}
/* Selected swatch visual indicator and keyboard focus */
.product-color-preview .swatch.selected,
.product-color-preview .swatch[aria-pressed="true"] {
box-shadow: 0 0 0 3px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.08);
transform: translateY(-1px);
}
.product-color-preview .swatch:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(66,153,225,0.35);
}
.product-color-count {
font-size: 14px;
color: #7a7a7a;
margin-top: 0.5rem;
}
/* make swatches larger on desktop */
@media (min-width: 769px) {
.product-color-preview .swatch { width: 22px; height: 22px; }
.product-title { font-size: 17px; font-weight: 500; }
}
/* Page content (non-hero sections) get padding */
.page-content {
padding: var(--spacing-md);
max-width: 100%;
margin: 0;
}
/* ========================================
Utility Classes - Background Colors
======================================== */
.bg-pink {
background-color: var(--color-primary);
}
.bg-yellow {
background-color: var(--color-secondary);
}
.bg-blue {
background-color: var(--color-accent-blue);
}
.bg-gray {
background-color: var(--color-accent-gray);
}
.bg-black {
background-color: var(--color-black);
color: var(--color-white);
}
.bg-white {
background-color: var(--color-white);
}
/* ========================================
Hero - Pink (block template styles)
======================================== */
.beava-hero-pink {
background-color: var(--color-primary);
color: var(--color-black);
display: flex;
align-items: center;
justify-content: center;
min-height: 320px; /* shorter hero to match design */
/* Allow inline style background-color to take precedence */
background-size: cover;
background-position: center center;
}
/* Make the hero cover extend full viewport width (true full-bleed) */
.wp-block-cover.alignfull.beava-hero-pink,
.wp-block-cover.alignfull.beava-hero-pink .wp-block-cover__inner-container {
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
/* Ensure there is no gap above the full-width hero */
margin-top: 0 !important;
padding-top: 0 !important;
position: relative !important;
top: 0 !important;
}
/* Cover background span - keep default behavior so editor overlay and dimming work */
.beava-hero-pink .wp-block-cover__background,
.beava-hero-pink .wp-block-cover__background.has-background-dim {
/* revert to default - allow cover overlay/dim to function */
background: initial !important;
display: block !important;
}
/* Force the cover background element to fill the full-bleed area so
the hero color sits flush with the top of the viewport (behind
the absolute-positioned header). This prevents a white band at the top. */
.beava-hero-pink .wp-block-cover__background {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background-color: var(--color-primary) !important;
z-index: 0 !important;
}
.beava-hero-pink {
/* place the hero behind the header (header keeps a higher z-index) */
position: relative;
z-index: 0;
}
/* Ensure inner container uses the hero padding and no extra borders */
.beava-hero-pink .wp-block-cover__inner-container {
padding: 2.25rem 2rem; /* original inner container padding */
}
.beava-hero-pink .wp-block-cover__inner-container {
width: 100%;
}
.beava-hero-inner {
max-width: 1200px;
margin: 0;
padding: 2.25rem 2rem; /* reduce vertical padding */
text-align: center;
}
.beava-hero-pink h1,
.beava-hero-pink .wp-block-heading {
color: var(--color-black); /* heading in black */
font-size: clamp(32px, 6vw, 80px);
line-height: 1.05;
margin-bottom: 0.5rem;
font-weight: 500; /* medium weight */
text-align: center;
}
.beava-hero-pink p,
.beava-hero-pink .wp-block-paragraph {
color: rgba(0,0,0,0.85); /* paragraph in dark/black */
font-size: clamp(16px, 2.2vw, 20px);
margin-bottom: 1rem;
}
.beava-hero-pink .wp-block-buttons {
display: flex;
justify-content: center;
}
.beava-hero-pink .wp-block-button__link {
background-color: var(--color-white);
color: var(--color-black);
padding: 0.9rem 2.4rem;
border-radius: var(--radius-full);
font-weight: 500;
}
/* Ensure cover video/image backgrounds stretch full bleed */
.beava-hero-pink .wp-block-cover__video-background,
.beava-hero-pink .wp-block-cover__image-background {
object-fit: cover;
}
@media (max-width: 768px) {
.beava-hero-inner {
padding: 3.5rem 1.25rem;
}
.beava-hero-pink h1,
.beava-hero-pink .wp-block-heading {
font-size: clamp(24px, 8vw, 48px);
}
.beava-hero-pink p,
.beava-hero-pink .wp-block-paragraph {
font-size: 16px;
}
}
/* Strong override for hero headings so all hero patterns use the same weight */
.wp-block-cover.beava-hero-pink .wp-block-heading,
.beava-video-block .wp-block-heading,
.beava-text-block .wp-block-heading,
.beava-side-by-side .wp-block-heading,
.hero-title,
.beava-hero-pink .wp-block-heading,
.block-editor-block-list__block .beava-hero-pink .wp-block-heading {
font-weight: 500 !important;
}
/* Make sure large hero headings don't get synthesized bold by browsers */
.wp-block-cover.beava-hero-pink .wp-block-heading,
.beava-video-block .wp-block-heading {
font-synthesis: none;
}
/* ========================================
Responsive Typography
======================================== */
@media (max-width: 768px) {
h1, .h1 {
font-size: clamp(28px, 8vw, 40px);
}
h2, .h2 {
font-size: clamp(20px, 5vw, 28px);
}
h3, .h3 {
font-size: clamp(16px, 4vw, 20px);
}
p {
font-size: clamp(14px, 3.5vw, 16px);
}
}
@media (min-width: 769px) and (max-width: 1024px) {
h1, .h1 {
font-size: clamp(36px, 6vw, 60px);
}
h2, .h2 {
font-size: clamp(24px, 4vw, 36px);
}
}
/* ========================================
Header Styles
======================================== */
.site-header {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 10001; /* Above overlay so it stays visible */
background: transparent;
}
.header-inner {
display: flex;
align-items: stretch;
justify-content: space-between;
max-width: 100%;
margin: 0;
}
/* Logo - Extra padding as specified */
.site-branding {
flex-shrink: 0;
background: transparent;
padding: 1.5rem 3rem 1.5rem 3rem;
display: flex;
align-items: center;
}
.site-branding img {
max-height: 140px;
width: auto;
display: block;
}
.site-branding a {
display: block;
line-height: 0;
}
.site-title {
display: flex;
align-items: baseline;
gap: 0.5rem;
font-size: 1.5rem;
font-weight: 500;
color: var(--color-text-dark);
text-decoration: none;
}
.logo-text {
font-size: 1.5rem;
font-style: italic;
font-weight: 500;
}
.logo-tagline {
font-size: 0.65rem;
font-weight: 400;
line-height: 1.2;
}
/* Header Actions - Language, Cart, Menu */
.header-actions {
display: flex;
align-items: center;
gap: 2.5rem;
background: transparent;
padding: 1.5rem 3rem;
}
/* Language Switcher */
.language-switcher {
display: flex;
gap: 1rem;
}
.lang-link {
font-weight: 500;
font-size: 1rem;
color: var(--color-text-dark);
text-decoration: none;
transition: opacity 0.3s ease;
}
.lang-link.active {
text-decoration: underline;
}
.lang-link:hover {
opacity: 0.7;
}
/* Cart Icon */
.cart-icon {
position: relative;
display: flex;
align-items: center;
padding: 0.5rem;
color: var(--color-text-dark);
transition: transform 0.3s ease;
}
.cart-icon:hover {
transform: scale(1.1);
}
.cart-count {
position: absolute;
top: -5px;
right: -5px;
background: var(--color-accent-blue);
color: #000;
font-size: 0.75rem;
font-weight: 600;
width: 20px;
height: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
/* Desktop Navigation Menu - Hidden, only shown in mobile overlay */
.main-navigation {
display: none;
}
/* Menu Toggle Button */
.mobile-menu-toggle {
display: flex;
align-items: center;
gap: 0.5rem;
background: transparent;
border: none;
cursor: pointer;
padding: 0;
font-weight: 500;
font-size: 1rem;
color: var(--color-text-dark);
transition: opacity 0.3s ease;
}
.mobile-menu-toggle:hover {
opacity: 0.7;
}
.menu-label {
display: inline;
font-weight: 500;
}
.menu-icon {
display: flex;
align-items: center;
justify-content: center;
background: var(--color-white);
padding: 0.5rem;
border-radius: var(--radius-sm);
width: 40px;
height: 40px;
}
.menu-icon svg {
stroke: var(--color-black);
}
/* Menu icon when menu is open - becomes X with black background */
.menu-icon.close-icon {
background: var(--color-black);
}
.menu-icon.close-icon svg {
stroke: var(--color-white);
}
/* ========================================
Mobile Menu Overlay
======================================== */
.mobile-menu-overlay {
position: fixed;
top: 0;
right: -100%;
width: 100%;
max-width: 500px;
height: 100%;
background: var(--color-white);
box-shadow: -5px 0 30px rgba(0, 0, 0, 0.2);
transition: right 0.3s ease;
z-index: 10000; /* Above header */
overflow-y: auto;
}
/* Mobile: full width menu */
@media (max-width: 900px) {
.mobile-menu-overlay {
max-width: 100%;
}
}
.mobile-menu-overlay.active {
right: 0;
/* Keep z-index at 10000 so header stays on top for close button */
}
.mobile-menu-inner {
position: relative;
height: 100%;
display: flex;
flex-direction: column;
}
/* Menu Overlay Header - Not used, header stays in main position */
.menu-overlay-header {
display: none;
}
.menu-overlay-header .language-switcher {
display: flex;
gap: 1rem;
}
.menu-overlay-header .cart-icon {
display: flex;
align-items: center;
color: var(--color-text-dark);
text-decoration: none;
}
.menu-overlay-header .lang-link {
color: var(--color-text-dark);
text-decoration: none;
}
.menu-overlay-header .lang-link.active {
text-decoration: underline;
}
/* Menu Close Button - Not used, toggle button handles open/close */
.mobile-menu-close {
display: none;
}
.mobile-menu-close .menu-label {
color: var(--color-text-dark);
font-weight: 500;
}
.mobile-menu-close .menu-icon {
display: flex;
align-items: center;
justify-content: center;
background: var(--color-black);
padding: 0.5rem;
border-radius: var(--radius-sm);
width: 40px;
height: 40px;
}
.mobile-menu-close .menu-icon svg {
stroke: var(--color-white);
}
/* Menu Content */
.mobile-menu-content {
padding: 14rem 2.5rem 3rem; /* Desktop: more top padding for spacing below header */
flex: 1;
overflow-y: auto;
background: var(--color-white);
margin-top: 0;
position: relative;
}
/* Mobile: more top padding/margin to clear the logo */
@media (max-width: 900px) {
.mobile-menu-content {
padding-top: 4rem;
margin-top: 12rem; /* Push content below the header/logo area on mobile */
}
}
.mobile-menu-section {
margin-bottom: 2.5rem;
}
.mobile-menu-title {
display: block;
font-size: 2.5rem;
font-weight: 500;
margin-bottom: 1rem;
margin-top: 0;
color: var(--color-text-dark);
text-decoration: none;
cursor: pointer;
}
.mobile-menu-title:hover {
text-decoration: underline;
text-underline-offset: 4px;
}
.mobile-menu-subtitle {
font-size: 2.5rem;
font-weight: 500;
margin-top: 0;
margin-bottom: 1rem;
color: var(--color-text-dark);
}
.mobile-menu-list {
list-style: none;
padding: 0;
margin: 0;
}
.mobile-menu-list li {
margin-bottom: 0;
}
.mobile-menu-list li a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 0;
font-size: 1.125rem;
color: var(--color-text-dark);
text-decoration: none;
transition: opacity 0.3s ease;
}
.mobile-menu-list li a:hover {
text-decoration: underline;
text-underline-offset: 4px;
}
/* Active/Current menu item styling */
.mobile-menu-title.active,
.mobile-menu-list li.active > a,
.mobile-menu-list li.current-menu-item > a,
.mobile-menu-list li.current_page_item > a,
.mobile-menu-list li.current-cat > a,
.mobile-menu-list li.current-menu-ancestor > a,
.mobile-menu-list li.current-product-ancestor > a {
text-decoration: underline;
text-underline-offset: 4px;
font-weight: 600;
}
/* Menu Contact Section */
.mobile-menu-contact {
margin: 0;
width: 100%;
padding-top: 2rem;
border-top: 2px solid rgba(0, 0, 0, 0.1);
}
.mobile-menu-contact .contact-title {
font-size: 2.5rem;
font-weight: 500;
margin-bottom: 1.5rem;
margin-top: 0;
}
.mobile-menu-contact .contact-person {
margin-bottom: 2rem;
}
.mobile-menu-contact .contact-name {
font-weight: 500;
font-size: 1.125rem;
margin-bottom: 0.25rem;
}
.mobile-menu-contact .contact-phone,
.mobile-menu-contact .contact-email {
margin: 0.25rem 0;
font-size: 1rem;
}
.mobile-menu-contact .contact-phone a,
.mobile-menu-contact .contact-email a {
color: var(--color-text-dark);
text-decoration: none;
transition: opacity 0.3s ease;
}
.mobile-menu-contact .contact-phone a:hover,
.mobile-menu-contact .contact-email a:hover {
opacity: 0.7;
}
/* Mobile Menu Company Info */
.mobile-menu-company {
margin: 0;
width: 100%;
padding-top: 2rem;
border-top: 2px solid rgba(0, 0, 0, 0.1);
}
.mobile-menu-company .company-title {
font-size: 2.5rem;
font-weight: 500;
margin-bottom: 1rem;
margin-top: 0;
}
.mobile-menu-company p {
margin: 0.25rem 0;
font-size: 1rem;
color: var(--color-text-dark);
}
/* ========================================
Header Responsive Styles
======================================== */
@media (max-width: 900px) {
/* Add padding-top to header on mobile so it doesn't clash with logo */
.site-header {
padding-top: 1.5rem;
}
/* Hide language switcher on mobile header (but keep in mobile menu) */
.header-actions .language-switcher {
display: none;
}
/* Larger logo on mobile for better visibility */
.site-branding {
padding: 1rem 1rem;
}
.site-branding img {
max-height: 100px; /* Larger on mobile */
}
/* Header actions on mobile - white background box for menu button only */
.header-actions {
gap: 2rem;
padding: 1.5rem 1.5rem;
background: transparent;
}
/* White background only for the menu toggle button */
.mobile-menu-toggle {
background: var(--color-white);
padding: 0.75rem 1rem;
border-radius: var(--radius-md);
}
/* Larger cart icon on mobile - no background */
.header-actions .cart-icon {
padding: 0;
background: transparent;
}
.header-actions .cart-icon svg {
width: 36px;
height: 36px;
}
/* Hide menu label text on mobile - show only icon */
.mobile-menu-toggle .menu-label {
display: none;
}
/* Hamburger icon on mobile - larger size */
.mobile-menu-toggle .menu-icon {
background: transparent;
padding: 0;
width: auto;
height: auto;
}
/* Black background when it's the close icon (X) */
.mobile-menu-toggle .menu-icon.close-icon {
background: var(--color-black);
padding: 0.5rem;
width: 48px;
height: 48px;
border-radius: var(--radius-sm);
}
.mobile-menu-toggle .menu-icon svg {
width: 36px;
height: 36px;
}
/* Mobile menu adjustments */
.mobile-menu-overlay {
max-width: 100%;
}
.mobile-menu-content {
padding: 8rem 1.5rem 2rem; /* Adjusted for mobile header height with extra spacing */
}
.mobile-menu-title {
font-size: 1.75rem;
}
.mobile-menu-subtitle {
font-size: 1.25rem;
}
}
/* Tablet and Desktop - Show menu label */
@media (min-width: 769px) {
.mobile-menu-toggle .menu-label {
display: inline;
}
}
/* Tablet - Medium logo size (progressive scaling) */
@media (min-width: 769px) and (max-width: 1024px) {
.site-branding img {
max-height: 120px; /* Slightly larger on tablet */
}
.site-branding {
padding: 1.5rem 2.5rem;
}
.header-actions {
padding: 1.5rem 2.5rem;
gap: 2rem;
}
}
/* Small tablets/large phones - Progressive increase */
@media (max-width: 768px) and (min-width: 481px) {
.site-branding img {
max-height: 110px;
}
}
/* Small phones - Largest relative size */
@media (max-width: 480px) {
.site-branding img {
max-height: 120px; /* Even larger on smallest screens */
}
.site-branding {
padding: 2rem 1.5rem;
}
.header-actions .cart-icon svg,
.mobile-menu-toggle .menu-icon svg {
width: 40px; /* Extra large icons on small phones */
height: 40px;
}
}
/* ========================================
Footer Styles
======================================== */
.site-footer {
background-color: #E8E8E8; /* Light grey background */
width: 100%;
padding: var(--spacing-xl) 0 var(--spacing-md);
margin-top: 0;
}
.footer-container {
max-width: 100%;
margin: 0;
padding: 0 5rem;
}
.footer-content {
display: flex;
justify-content: flex-start;
gap: 3rem;
margin-bottom: var(--spacing-lg);
}
.footer-content > .footer-column {
flex: 1 1 0;
}
.footer-content > .footer-logo {
flex: 0 0 auto;
}
/* Footer Logo Column */
.footer-logo {
display: flex;
align-items: flex-start;
flex-shrink: 0;
}
.footer-logo img {
max-width: 180px;
height: auto;
}
.footer-site-title {
display: flex;
align-items: baseline;
gap: 0.5rem;
font-size: 1.5rem;
font-weight: 500;
color: var(--color-text-dark);
text-decoration: none;
}
.footer-site-title .logo-text {
font-size: 1.5rem;
font-style: italic;
font-weight: 500;
}
.footer-site-title .logo-tagline {
font-size: 0.65rem;
font-weight: 400;
line-height: 1.2;
}
/* Footer Menu Columns */
.footer-menu {
display: flex;
flex-direction: column;
}
.footer-nav-menu {
list-style: none;
padding: 0;
margin: 0;
}
.footer-nav-menu li {
margin-bottom: 0.75rem;
}
.footer-nav-menu li.menu-title {
font-weight: 500;
font-size: 1rem;
letter-spacing: 0.5px;
margin-bottom: 1rem;
}
.footer-nav-menu li a {
color: var(--color-text-dark);
text-decoration: none;
font-size: 1rem;
transition: opacity 0.3s ease;
}
.footer-nav-menu li a:hover {
opacity: 0.7;
}
/* Footer Category Columns */
.footer-category {
display: flex;
flex-direction: column;
}
.footer-category-title {
font-weight: 500;
font-size: 1rem;
letter-spacing: 0.5px;
margin-bottom: 1rem;
margin-top: 0;
text-transform: uppercase;
}
.footer-category-title a {
color: var(--color-text-dark);
text-decoration: none;
transition: opacity 0.3s ease;
}
.footer-category-title a:hover {
opacity: 0.7;
}
.footer-category-menu {
list-style: none;
padding: 0;
margin: 0;
}
.footer-category-menu li {
margin-bottom: 0.75rem;
}
.footer-category-menu li a {
color: var(--color-text-dark);
text-decoration: none;
font-size: 1rem;
transition: opacity 0.3s ease;
}
.footer-category-menu li a:hover {
opacity: 0.7;
}
/* Footer Contact Column */
.footer-contact {
display: flex;
flex-direction: column;
}
.footer-widget-title,
.footer-contact h2,
.footer-contact h3 {
font-weight: 500;
font-size: 1rem;
letter-spacing: 0.5px;
margin-bottom: 1rem;
margin-top: 0;
text-transform: uppercase;
}
.contact-person {
margin-bottom: 1.5rem;
}
.contact-name {
font-weight: 500;
font-size: 1rem;
margin-bottom: 0.25rem;
}
.contact-phone,
.contact-email {
margin: 0.25rem 0;
font-size: 1rem;
}
.contact-email a,
.contact-phone a {
color: var(--color-text-dark);
text-decoration: none;
transition: opacity 0.3s ease;
}
.contact-email a:hover,
.contact-phone a:hover {
opacity: 0.7;
}
/* Footer Company Column */
.footer-company {
display: flex;
flex-direction: column;
}
.footer-company h2 {
font-weight: 500;
font-size: 1rem;
letter-spacing: 0.5px;
margin-bottom: 1rem;
margin-top: 0;
text-transform: uppercase;
}
.footer-company p {
margin: 0.25rem 0;
font-size: 1rem;
color: var(--color-text-dark);
}
.footer-company-promo {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.footer-promo-logo {
max-width: 120px;
height: auto;
margin-bottom: 0.75rem;
}
.footer-company .footer-promo-text {
margin: 0.25rem 0;
font-size: 1.5rem;
color: var(--color-text-dark);
line-height: 1.5;
font-weight: 400;
}
.footer-promo-link {
margin: 0.25rem 0;
}
.footer-company .footer-promo-link a {
font-size: 1.5rem;
color: var(--color-text-dark);
text-decoration: underline;
font-weight: 500;
}
.footer-promo-link a:hover {
color: var(--color-primary);
}
/* Footer Bottom - Copyright */
.footer-bottom {
padding-top: var(--spacing-md);
border-top: 1px solid rgba(0, 0, 0, 0.1);
text-align: center;
}
.footer-bottom p {
margin: 0;
font-size: 0.875rem;
color: var(--color-text-dark);
opacity: 0.7;
}
/* Footer Language Column */
.footer-language {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.footer-language .language-switcher {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.footer-language .lang-link {
font-size: 1rem;
font-weight: 400;
color: var(--color-text-dark);
text-decoration: none;
transition: opacity 0.2s ease;
}
.footer-language .lang-link:hover {
opacity: 0.7;
}
.footer-language .lang-link.active {
text-decoration: underline;
}
/* ========================================
Footer Responsive Styles
======================================== */
/* Tablet */
@media (max-width: 1024px) {
.footer-container {
padding: 0 3rem;
}
.footer-content {
flex-wrap: wrap;
gap: 2rem 3rem;
}
.footer-logo {
width: 100%;
margin-bottom: var(--spacing-sm);
}
.footer-column {
flex: 1 1 auto;
min-width: 140px;
}
}
/* Mobile */
@media (max-width: 768px) {
.site-footer {
padding: var(--spacing-lg) 0 var(--spacing-md);
}
.footer-container {
padding: 0 1.5rem;
}
.footer-content {
flex-direction: column;
gap: 2rem;
}
.footer-logo {
width: 100%;
margin-bottom: var(--spacing-sm);
}
.footer-logo img {
max-width: 160px;
}
.footer-column {
width: 100%;
}
.footer-nav-menu li.menu-title {
font-size: 1.125rem;
margin-bottom: 0.75rem;
}
.footer-widget-title,
.footer-contact h2,
.footer-contact h3 {
font-size: 1.125rem;
}
.footer-language .language-switcher {
flex-direction: row;
gap: 1rem;
}
}
/* ========================================
Hero Section - 50/50 Split Background
======================================== */
.hero-section {
position: relative;
width: 100%;
min-height: 600px;
display: flex;
align-items: stretch;
justify-content: center;
overflow: visible;
margin: 0;
padding: 0;
}
/* Two-column layout - centered with max-width */
.hero-columns {
display: flex;
width: 100%;
max-width: 1800px; /* Maximum width before background fills */
margin: 0 auto;
padding: 0;
gap: 0;
align-items: stretch;
}
.hero-column {
flex: 1 1 50%;
min-height: 600px;
display: flex;
align-items: center;
justify-content: center;
padding: 6rem 4rem 4rem;
position: relative;
width: 50%;
}
/* Left column - Image background (color set via ACF) */
.hero-column-left {
/* Background color is set inline via ACF field */
padding: 0 !important;
overflow: visible;
position: relative;
z-index: 1;
}
/* Extend left column background to fill screen on extra wide displays */
.hero-column-left::before {
content: '';
position: absolute;
top: 0;
right: 100%;
bottom: 0;
width: 50vw;
background-color: inherit;
z-index: -1;
}
@media (max-width: 768px) {
.hero-column-left::before { display: none; }
}
/* Right column - Pink Background (for text) */
.hero-column-right {
background-color: var(--color-primary) !important;
position: relative;
}
/* Extend right column background to fill screen on extra wide displays */
.hero-column-right::after {
content: '';
position: absolute;
top: 0;
left: 100%;
bottom: 0;
width: 50vw;
background-color: var(--color-primary);
z-index: -1;
}
@media (max-width: 768px) {
.hero-column-right::after { display: none; }
}
/* Block content should be transparent to show background */
.hero-column-left .hero-picture-container,
.hero-column-right .hero-text-content {
background: transparent !important;
width: 100%;
max-width: 600px;
}
/* Hero picture block - fills height from top to bottom */
.hero-column-left .hero-picture-container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
max-width: none;
overflow: hidden;
position: relative;
z-index: 2;
}
.hero-column-left .hero-picture-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
/* Apply custom positioning from block attributes */
.hero-picture-container[data-horizontal] .hero-picture-image {
object-position: calc(var(--hero-h-pos, 50) * 1%) calc(var(--hero-v-pos, 50) * 1%);
}
.hero-picture-container[data-scale] .hero-picture-image {
transform: scale(calc(var(--hero-scale, 100) / 100));
}
/* Hero content */
.hero-content {
max-width: 500px;
width: 100%;
z-index: 2;
}
.hero-image {
max-width: 400px;
width: 100%;
z-index: 2;
}
.hero-image img {
width: 100%;
height: auto;
display: block;
}
.hero-title {
font-family: var(--font-primary);
font-size: var(--font-size-h1);
font-weight: 500 !important;
line-height: 1.1;
margin-bottom: 1.5rem;
color: var(--color-white);
}
.hero-slogan {
font-family: var(--font-primary);
font-size: var(--font-size-h2);
font-weight: 500;
line-height: 1.2;
margin-top: -0.5rem;
margin-bottom: 1.5rem;
}
.hero-subtitle {
font-family: var(--font-primary);
font-size: var(--font-size-body);
font-weight: var(--font-weight-regular);
line-height: 1.6;
margin-bottom: 2rem;
color: var(--color-text-dark);
}
.hero-button {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 1rem 2.5rem;
background: var(--color-white);
color: var(--color-text-dark);
font-family: var(--font-primary);
font-size: var(--font-size-small);
font-weight: var(--font-weight-bold);
text-decoration: none;
border-radius: var(--radius-full);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hero-button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* Hero Section Responsive Styles */
@media (max-width: 1024px) {
.hero-section {
min-height: 500px;
}
.hero-column {
min-height: 500px;
padding: 8rem 3rem 4rem; /* Increased top padding to avoid header */
}
.hero-title {
font-size: clamp(32px, 6vw, 48px);
}
}
@media (max-width: 768px) {
.hero-section {
min-height: auto;
margin-top: -200px; /* Pull hero up behind header */
padding-top: 200px; /* Compensate with padding */
background-color: var(--hero-bg-color, #E8E8E8);
}
.hero-columns {
flex-direction: column;
}
.hero-column {
width: 100%;
min-height: 400px;
padding: 2rem 2rem 3rem; /* Reduced top padding since section handles it */
}
.hero-column-left {
order: 1; /* Image first on mobile */
min-height: 350px;
padding-top: 0 !important;
position: relative;
}
/* Hide the desktop pseudo-element on mobile */
.hero-column-left::before {
display: none;
}
.hero-column-right {
order: 2; /* Text below on mobile */
padding-top: 2rem;
}
/* Only remove right column pseudo-element on mobile */
.hero-column-right::after {
display: none;
}
.hero-title {
font-size: clamp(28px, 8vw, 40px);
margin-bottom: 1rem;
}
.hero-slogan {
font-size: clamp(20px, 5vw, 28px);
margin-top: -0.25rem;
margin-bottom: 1rem;
}
.hero-subtitle {
font-size: 16px;
margin-bottom: 1.5rem;
}
.hero-text-content {
max-width: 100%;
}
}
/* ========================================
Video Content Block
======================================== */
.video-content-block {
position: relative;
width: 100%;
margin: 0;
padding: 0;
}
/* Remove any spacing between video block and following blocks */
.video-content-block + *,
.beava-video-block + * {
margin-top: 0 !important;
}
/* Remove any spacing between side-by-side blocks and following video blocks */
.beava-side-by-side + .video-content-block,
.beava-side-by-side + .beava-video-block {
margin-top: 0 !important;
}
/* Product carousel block wrapper: ensure no min-height interference */
.wp-block-beavav2-product-carousel {
min-height: auto !important;
margin: 0 !important;
padding: 0 !important;
}
/* Ensure no white space above hero section on front page */
.home .site-main {
margin-top: 0 !important;
padding-top: 0 !important;
}
.home .hero-section {
margin-top: 0 !important;
}
.video-content-wrapper {
position: relative;
max-width: 100%;
margin: 0;
padding: 0 2rem;
}
.video-background {
position: relative;
width: 100%;
height: 500px;
border-radius: 12px;
overflow: hidden;
}
.video-player {
width: 100%;
height: 100%;
object-fit: cover;
}
.video-overlay {
position: absolute;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
pointer-events: none;
}
.video-text-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 2;
width: 90%;
max-width: 800px;
}
.video-heading {
font-family: var(--font-primary);
font-size: var(--font-size-h2);
font-weight: var(--font-weight-bold);
margin: 0 0 1rem;
color: #ffffff;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.video-subheading {
font-family: var(--font-primary);
font-size: var(--font-size-body);
font-weight: var(--font-weight-regular);
margin: 0;
color: #ffffff;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
/* ========================================
Block Layout Styles - Full Width vs Centered
======================================== */
/* WordPress Native Alignment - Wide */
.alignwide {
max-width: 100%;
margin-left: auto;
margin-right: auto;
width: 100%;
}
/* WordPress Native Alignment - Full Width */
.alignfull {
max-width: 100%;
width: 100%;
margin-left: 0;
margin-right: 0;
}
/* Custom Full Width Style */
.is-style-beava-full-width {
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Custom Centered Style with Padding */
.is-style-beava-centered {
max-width: 1200px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 2rem !important;
padding-right: 2rem !important;
}
/* ========================================
Product single - meta column styles
======================================== */
.product-single-meta {
/* keep existing padding-top to avoid header overlap */
display: flex;
flex-direction: column;
gap: 1.25rem;
align-items: flex-start;
}
.product-single-meta .product-category {
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: #666;
}
.product-single-meta .product_title,
.product-single-meta h1.product_title {
font-size: 3.25rem; /* ~52px */
line-height: 1.05;
font-weight: 500;
color: #111;
margin: 0;
}
.product-single-meta .product-badge {
display: inline-block;
background: #f7c6cd;
color: #222;
padding: 0.45rem 0.85rem;
border-radius: 6px;
font-weight: 500;
}
.product-single-meta .price {
color: var(--color-primary);
font-size: 1.5rem;
font-weight: 500;
}
.product-single-meta .woocommerce-product-details__short-description {
color: #333;
font-size: 1rem;
}
.product-single-meta .product-swatches { display:flex; gap:0.5rem; margin:0.5rem 0 1rem; }
.product-single-meta .product-swatches button,
.product-single-meta .product-thumbs .thumb {
width:56px; height:56px; padding:6px; border:1px solid #eee; background:#fff; display:inline-flex; align-items:center; justify-content:center; border-radius:6px; cursor:pointer;
}
.product-single-meta .product-swatches button:focus,
.product-single-meta .product-swatches button:hover { outline:2px solid var(--color-primary); outline-offset:2px; border-color:var(--color-primary); }
.product-single-meta .size-pills { display:flex; gap:0.75rem; align-items:center; margin-bottom:1rem; }
.product-single-meta .size-pills button { min-width:56px; height:44px; border-radius:999px; border:1px solid #ccc; background:#fff; padding:0 1rem; font-weight:700; cursor:pointer; }
.product-single-meta .size-pills button[aria-pressed="true"], .product-single-meta .size-pills button.is-active { background:#7c8790; color:#fff; border-color:#7c8790; }
.product-single-meta button:focus { box-shadow:0 0 0 4px rgba(245,142,159,0.12); outline:none; }
.product-single-meta .cart-row { display:flex; gap:1rem; align-items:center; margin-top:0.5rem; }
.product-single-meta .quantity input[type="number"] { width:86px; height:44px; padding:0 0.75rem; border:1px solid #ddd; border-radius:6px; }
.product-single-meta .single_add_to_cart_button { background:#000; color:#fff; border-radius:999px; padding:0.9rem 2.25rem; font-size:1.125rem; font-weight:800; border:none; box-shadow:0 6px 18px rgba(0,0,0,0.12); }
/* Ensure our CTA label text and background match design */
.product-meta-wrap .single_add_to_cart_button, .product-single-meta .single_add_to_cart_button { background: #000 !important; color: #fff !important; border-radius: 999px !important; }
/* Color thumbnail styles */
.product-swatches { display:flex; gap:0.75rem; align-items:center; margin:0.75rem 0; flex:1; overflow-x:auto; }
.product-swatches .color-thumb { display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; padding:4px; border-radius:8px; border:1px solid #eee; background:#fff; cursor:pointer; flex-shrink:0; }
.product-swatches .color-thumb img { max-width:100%; max-height:100%; display:block; }
.product-swatches .color-thumb .color-label { font-size:0.8rem; }
/* Swatches wrapper with navigation buttons on sides */
.product-swatches-wrapper {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0.75rem 0;
}
.product-swatches-wrapper .product-swatches {
margin: 0;
flex: 1;
overflow-x: auto;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge */
}
.product-swatches-wrapper .product-swatches::-webkit-scrollbar {
display: none; /* Chrome/Safari */
}
.product-swatches-wrapper .swatches-nav {
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: 8px;
border: 1px solid #ddd;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s, border-color 0.2s;
}
.product-swatches-wrapper .swatches-nav:hover {
background: #f5f5f5;
border-color: #ccc;
}
.product-swatches-wrapper .swatches-nav:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.product-swatches-wrapper .swatches-nav svg {
color: #333;
}
@media (max-width: 900px) {
.product-single-meta .product_title { font-size: 2rem; }
.product-single-meta { padding-top: 5rem; }
.product-single-meta .single_add_to_cart_button { width:100%; text-align:center; }
}
@media (max-width: 640px) {
.product-single-meta { padding-top: 3rem; }
.product-single-meta .product_title { font-size: 1.5rem; }
.product-single-meta .size-pills { gap: 0.5rem; }
.product-single-meta .product-swatches { gap: 0.375rem; }
}
/* High-specificity override: ensure top padding is preserved and not overridden by plugin CSS */
.product-single-page .product-single-container .product-single-meta {
padding-top: 8rem !important;
}
@media (max-width: 1024px) {
.product-single-page .product-single-container .product-single-meta { padding-top: 5rem !important; }
}
@media (max-width: 640px) {
.product-single-page .product-single-container .product-single-meta { padding-top: 3rem !important; }
}
/* Fallback for default WooCommerce markup when our product-single-meta wrapper isn't present */
.single-product .summary.entry-summary,
.single-product .product .summary,
body.single-product .summary.entry-summary {
padding-top: 8rem !important;
}
@media (max-width: 1024px) {
.single-product .summary.entry-summary,
.single-product .product .summary,
body.single-product .summary.entry-summary { padding-top: 5rem !important; }
}
@media (max-width: 640px) {
.single-product .summary.entry-summary,
.single-product .product .summary,
body.single-product .summary.entry-summary { padding-top: 3rem !important; }
}
@media (max-width: 768px) {
.is-style-beava-centered {
padding-left: 1rem !important;
padding-right: 1rem !important;
}
}
/* ========================================
Side by Side Content Blocks (WordPress Patterns)
Perfect Squares Side by Side
======================================== */
.beava-side-by-side {
margin: 0 auto !important;
padding: 0 2rem !important;
gap: 0 !important;
max-width: 1400px !important;
width: 100% !important;
display: flex !important;
flex-wrap: nowrap !important;
}
/* Force columns to be exactly 50% and create square container */
.beava-side-by-side .wp-block-column {
margin: 0 !important;
padding: 0 !important;
flex: 0 0 50% !important;
width: 50% !important;
position: relative !important;
}
/* Create perfect square using padding-bottom on pseudo-element */
.beava-side-by-side .wp-block-column::before {
content: '' !important;
display: block !important;
padding-bottom: 100% !important;
}
/* Position ALL content absolutely to fill the square */
.beava-side-by-side .wp-block-column > * {
position: absolute !important;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0 !important;
width: 100% !important;
height: 100% !important;
}
/* Text column fills entire square with background */
.beava-side-by-side .beava-text-column {
background-color: #E8E8E8 !important;
}
.beava-side-by-side .beava-text-column > .wp-block-group,
.beava-side-by-side .beava-text-column > .beava-text-content {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
padding: 2rem 3rem !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: flex-start !important;
text-align: left !important;
box-sizing: border-box !important;
width: 100% !important;
height: 100% !important;
}
/* Image fills the square completely */
.beava-side-by-side .wp-block-image {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
height: 100% !important;
}
.beava-side-by-side .wp-block-image figure {
margin: 0 !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
.beava-side-by-side .wp-block-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
}
/* Typography inside text blocks - fully editable in WordPress */
.beava-side-by-side .wp-block-heading {
margin-top: 0;
margin-bottom: 1.5rem;
}
.beava-side-by-side .wp-block-paragraph {
margin-bottom: 1.5rem;
line-height: 1.8;
}
.beava-side-by-side .wp-block-paragraph:last-of-type {
margin-bottom: 2rem;
}
.beava-side-by-side .wp-block-buttons {
margin-top: 1rem;
}
.beava-side-by-side .wp-block-button__link {
padding: 1rem 2.5rem;
border-radius: 50px;
font-weight: 500;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.beava-side-by-side .wp-block-button__link:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
/* Mobile Responsive for Side by Side Blocks */
@media (max-width: 1024px) {
.beava-side-by-side {
flex-wrap: wrap !important;
max-width: 100% !important;
padding: 0 !important;
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Override .alignfull behavior on mobile for side-by-side blocks */
.beava-side-by-side.alignfull {
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.beava-side-by-side .wp-block-column {
flex: 0 0 100% !important;
width: 100% !important;
}
/* Remove the ::before pseudo-element on tablet */
.beava-side-by-side .wp-block-column::before {
display: none !important;
}
/* Remove absolute positioning on tablet so content can flow naturally */
.beava-side-by-side .wp-block-column > * {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
height: auto !important;
}
.beava-side-by-side .wp-block-column {
min-height: auto !important;
}
/* Adjust text content padding for tablet to prevent button cutoff */
.beava-side-by-side .beava-text-column > .wp-block-group,
.beava-side-by-side .beava-text-column > .beava-text-content {
padding: 3rem 2rem !important;
position: relative !important;
height: auto !important;
}
/* Ensure grey background is visible on mobile */
.beava-side-by-side .beava-text-column {
background-color: #E8E8E8 !important;
min-height: 300px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
}
/* Alternate stacking order: odd images first, even images second */
/* First block: Image (order 1), Text (order 2) */
.beava-side-by-side:nth-of-type(odd) .beava-image-column {
order: 1 !important;
}
.beava-side-by-side:nth-of-type(odd) .beava-text-column {
order: 2 !important;
}
/* Second block: Text (order 1), Image (order 2) - This creates Picture, Text, Picture, Text pattern */
.beava-side-by-side:nth-of-type(even) .beava-image-column {
order: 2 !important;
}
.beava-side-by-side:nth-of-type(even) .beava-text-column {
order: 1 !important;
}
/* Ensure images maintain aspect ratio on mobile */
.beava-side-by-side .wp-block-image {
min-height: 300px !important;
}
.beava-side-by-side .wp-block-image img {
min-height: 300px !important;
}
}
/* Extra mobile styles for smaller screens */
@media (max-width: 768px) {
.beava-side-by-side {
padding: 0 !important;
margin: 0 !important;
}
.beava-side-by-side .beava-text-column > .wp-block-group,
.beava-side-by-side .beava-text-column > .beava-text-content {
padding: 2rem 1.5rem !important;
}
.beava-side-by-side .wp-block-heading {
font-size: 2rem !important;
margin-bottom: 1rem !important;
}
.beava-side-by-side .wp-block-paragraph {
font-size: 1rem !important;
margin-bottom: 1rem !important;
}
.beava-side-by-side .wp-block-button__link {
padding: 0.875rem 2rem !important;
font-size: 0.95rem !important;
}
}
/* ========================================
Three Column Icon Strip Block
======================================== */
.beava-icon-strip {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 4rem 2rem !important;
}
.beava-icon-strip .beava-icon-columns {
max-width: 1200px !important;
margin: 0 auto !important;
gap: 3rem !important;
}
.beava-icon-strip .wp-block-column {
text-align: center !important;
}
.beava-icon-strip .beava-icon {
margin-bottom: 1.5rem !important;
}
.beava-icon-strip .beava-icon img {
display: inline-block !important;
}
.beava-icon-strip h3 {
font-size: 1.125rem !important;
font-weight: 400 !important;
margin: 0 !important;
line-height: 1.4 !important;
}
/* Mobile Responsive for Icon Strip */
@media (max-width: 768px) {
.beava-icon-strip {
padding: 2rem 1.5rem !important;
}
.beava-icon-strip .beava-icon-columns {
gap: 2rem !important;
flex-direction: column !important;
}
.beava-icon-strip .beava-icon-columns .wp-block-column {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
width: 100% !important;
}
.beava-icon-strip .beava-icon-columns .wp-block-group {
justify-content: center !important;
}
.beava-icon-strip .beava-icon-columns p {
text-align: center !important;
}
.beava-icon-strip .beava-icon {
margin-bottom: 1rem !important;
}
/* Cap heading sizes on mobile inside icon strip blocks */
.beava-icon-strip h1,
.beava-icon-strip h2 {
font-size: clamp(20px, 5vw, 28px) !important;
line-height: 1.3 !important;
word-break: break-word !important;
}
}
/* Collapse empty paragraphs in block editor content */
.site-main > p:empty,
.site-main > .wp-block-paragraph:empty {
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
font-size: 0 !important;
}
/* ========================================
Three Column Text Block (Testimonials/Reviews)
======================================== */
.beava-text-block {
width: 100% !important;
max-width: 100% !important;
position: relative !important;
}
/* Ensure background image appears on top of background color */
.beava-text-block .wp-block-cover__image-background,
.beava-text-block .wp-block-cover__video-background {
z-index: 1 !important;
}
/* Keep the color overlay below the image */
.beava-text-block .wp-block-cover__background {
z-index: 0 !important;
}
/* Ensure content appears above both background layers */
.beava-text-block .wp-block-cover__inner-container {
max-width: 1200px !important;
margin: 0 auto !important;
padding: 4rem 2rem !important;
position: relative !important;
z-index: 2 !important;
}
.beava-text-block .beava-text-columns {
gap: 3rem !important;
}
.beava-text-block .wp-block-column {
padding: 2rem !important;
}
.beava-text-block h2 {
font-size: 2.5rem !important;
font-weight: 500 !important;
margin-bottom: 4rem !important;
}
.beava-text-block h4 {
font-size: 1.125rem !important;
font-weight: 500 !important;
margin-bottom: 0.5rem !important;
}
.beava-text-block p {
line-height: 1.8 !important;
}
/* Mobile Responsive for Text Block */
@media (max-width: 768px) {
.beava-text-block .wp-block-cover__inner-container {
padding: 3rem 1.5rem !important;
}
.beava-text-block .beava-text-columns {
gap: 2rem !important;
}
.beava-text-block .wp-block-column {
padding: 1.5rem !important;
}
.beava-text-block h2 {
font-size: 2rem !important;
margin-bottom: 2rem !important;
}
}
/* Mobile Responsive for Block Patterns */
@media (max-width: 768px) {
.beava-side-by-side {
grid-template-columns: 1fr !important;
padding: 0 1rem !important;
}
/* Remove the ::before pseudo-element on mobile */
.beava-side-by-side .wp-block-column::before {
display: none !important;
}
/* Remove absolute positioning on mobile so content flows naturally */
.beava-side-by-side .wp-block-column > * {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
height: auto !important;
}
.beava-side-by-side .wp-block-column {
aspect-ratio: auto !important;
min-height: auto !important;
}
/* Allow image column to be taller on mobile to show full image */
.beava-side-by-side .beava-image-column {
min-height: 350px !important;
}
.beava-side-by-side .beava-text-column {
aspect-ratio: auto !important;
min-height: auto !important;
}
.beava-side-by-side .beava-text-column > .wp-block-group,
.beava-side-by-side .beava-text-column > .beava-text-content {
padding: 3rem 2rem !important;
}
/* Ensure images fit properly on mobile */
.beava-side-by-side .wp-block-image img {
object-fit: contain !important;
width: 100% !important;
height: auto !important;
}
}
/* ========================================
OLD Side by Side Blocks (Legacy ACF)
======================================== */
.side-by-side-block {
width: 100%;
margin: 0;
padding: 0;
}
.sbs-container {
display: flex;
flex-direction: row;
min-height: 500px;
width: 100%;
}
.sbs-image-column,
.sbs-text-column {
flex: 1;
min-height: 500px;
}
.sbs-image-column {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: #8ED6F5; /* Blue background as default */
}
.sbs-image-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.sbs-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.sbs-text-column {
display: flex;
align-items: center;
justify-content: center;
padding-top: 10rem !important;
padding-right: 5rem !important;
padding-bottom: 15rem !important;
padding-left: 5rem !important;
background-color: #E8E8E8; /* Default gray background */
}
.sbs-text-content {
max-width: 600px;
width: 100%;
}
.sbs-heading {
font-family: var(--font-primary);
font-size: var(--font-size-h2);
font-weight: var(--font-weight-bold);
line-height: 1.2;
margin: 0 0 1.5rem;
color: #1a1a1a;
}
.sbs-description {
font-family: var(--font-primary);
font-size: var(--font-size-body);
font-weight: var(--font-weight-regular);
line-height: 1.6;
margin: 0 0 2rem;
color: #333333;
white-space: pre-line;
}
.sbs-button-wrapper {
margin: 0;
width: 100%;
}
.sbs-button {
display: inline-block;
padding: 1rem 2.5rem;
background-color: #1a1a1a;
color: #ffffff;
font-family: var(--font-primary);
font-size: var(--font-size-small);
font-weight: var(--font-weight-bold);
text-decoration: none;
border-radius: 50px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.sbs-button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
/* Reversed layout (image on right) */
.side-by-side-block.reversed .sbs-container {
flex-direction: row-reverse;
}
/* ========================================
Hero Section - Responsive
======================================== */
@media (max-width: 768px) {
.hero-section {
min-height: auto;
}
.hero-columns {
flex-direction: column;
max-width: 100%;
}
.hero-column {
min-height: 400px;
padding: 4rem 2rem 3rem;
max-width: 100%;
width: 100%;
}
.hero-column-left {
padding: 0 !important;
}
/* Disable background extensions on mobile */
.hero-column-left::before,
.hero-column-right::after {
display: none;
}
.hero-content,
.hero-image {
max-width: 100%;
}
.hero-title {
font-size: clamp(32px, 8vw, 48px);
}
.hero-subtitle {
font-size: clamp(14px, 4vw, 18px);
}
.video-content-block {
margin: 2rem 0 0 0;
}
.video-background {
height: 300px;
}
/* Side by Side - Mobile */
.sbs-container {
flex-direction: column !important;
min-height: auto;
}
.sbs-image-column,
.sbs-text-column {
min-height: 350px;
}
.sbs-text-column {
padding-top: 10rem !important;
padding-right: 5rem !important;
padding-bottom: 15rem !important;
padding-left: 5rem !important;
}
.sbs-heading {
font-size: 32px !important;
}
.sbs-description {
font-size: 16px !important;
}
}
/* ========================================
WordPress Block Patterns - Video & Products
======================================== */
/* Video Content Block */
.beava-video-block {
margin: 6rem 0 0 0 !important; /* Top margin only, no bottom margin */
}
.beava-video-block .wp-block-cover__video-background {
border-radius: 12px;
}
.beava-video-block h2 {
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
/* Product Carousel Section */
.beava-product-carousel-section {
padding: 4rem 2rem;
}
.beava-product-carousel-section h2 {
margin-bottom: 2rem;
}
.beava-product-carousel-section .wp-block-woocommerce-product-collection {
margin-top: 3rem;
}
/* Product Card Styling */
.wc-block-product-template {
gap: 2rem !important;
}
.wc-block-grid__product {
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
/* Ensure products don't expand to full width: set flexible basis and max-width */
flex: 1 1 300px;
max-width: 340px;
box-sizing: border-box;
}
.wc-block-grid__product:hover {
transform: translateY(-4px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.wc-block-grid__product img {
border-radius: 8px;
width: 100%;
height: auto;
max-width: 300px;
max-height: 300px;
object-fit: cover;
}
/* Grid container: default to 3 columns on desktop, responsive below */
.wc-block-grid {
display: flex;
flex-wrap: wrap;
gap: 1rem; /* tighten grid gaps */
justify-content: center;
}
@media (min-width: 1024px) {
.wc-block-grid__product { flex-basis: calc(33.333% - 1rem); max-width: calc(33.333% - 1rem); }
}
@media (max-width: 1023px) and (min-width: 769px) {
.wc-block-grid__product { flex-basis: calc(50% - 1rem); max-width: calc(50% - 1rem); }
}
@media (max-width: 768px) {
.wc-block-grid__product { flex-basis: 100%; max-width: 100%; }
}
.wc-block-grid__product .wp-block-post-title {
font-size: 18px !important;
font-weight: 500 !important;
margin: 1rem 0 0.5rem !important;
}
.wc-block-grid__product .wc-block-components-product-price {
font-size: 16px !important;
font-weight: 700 !important;
}
/* Pagination */
.wp-block-query-pagination {
margin-top: 3rem;
gap: 1rem;
}
.wp-block-query-pagination-numbers {
gap: 0.5rem;
}
/* Legacy WooCommerce product list (ul.products) should match block grid sizing */
ul.products {
display: flex;
flex-wrap: wrap;
gap: 1rem;
list-style: none;
padding: 0;
margin: 0;
justify-content: center;
}
ul.products li.product {
flex: 0 0 var(--beava-product-card-width);
width: var(--beava-product-card-width);
max-width: var(--beava-product-card-width);
box-sizing: border-box;
}
/* When product collections render as a grid, ensure consistent spacing */
.wp-block-woocommerce-product-collection .wc-block-grid__products,
.wc-block-grid {
display: flex;
flex-wrap: wrap;
/* row-gap column-gap: keep vertical spacing, tighten horizontal spacing */
gap: 1rem 0.6rem;
justify-content: center;
}
.wp-block-woocommerce-product-collection .wc-block-grid__product,
.wc-block-grid__product {
flex: 0 0 var(--beava-product-card-width);
width: var(--beava-product-card-width);
max-width: var(--beava-product-card-width);
box-sizing: border-box;
}
/* ========================================
Beava server-rendered Category Grid
Use CSS Grid here so the number of columns is reliable
and not dependent on the global fixed card width variable.
This targets grids that are rendered by the theme and marked
with data-beava-preserve-grid="1" (so we intentionally preserve them).
======================================== */
.beavav2-grid-wrap .beavav2-category-grid[data-beava-preserve-grid="1"],
ul.beavav2-category-grid.products[data-beava-preserve-grid="1"],
ul.products.beavav2-category-grid.columns-4[data-beava-preserve-grid="1"],
.product-category-archive ul.beavav2-category-grid[data-beava-preserve-grid="1"] {
display: grid !important;
/* Flexible 4 columns that fill available space */
grid-template-columns: repeat(4, 1fr) !important;
gap: 16px !important;
align-items: start !important;
justify-content: start !important;
justify-items: stretch !important;
width: 100% !important;
max-width: 100% !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
/* Override WooCommerce flexbox defaults */
flex-wrap: unset !important;
}
/* Override WooCommerce default product widths in our grid */
ul.products.beavav2-category-grid[data-beava-preserve-grid="1"] li.product,
.beavav2-category-grid.columns-4[data-beava-preserve-grid="1"] li.product {
width: 100% !important;
float: none !important;
clear: none !important;
margin: 0 !important;
}
.beavav2-category-grid-item {
display: block; /* grid cell wrapper */
}
.beavav2-category-grid[data-beava-preserve-grid="1"] .product-card,
.beavav2-category-grid[data-beava-preserve-grid="1"] > li .product-card {
/* Flexible card dimensions */
width: 100% !important;
max-width: 100% !important;
min-height: auto !important;
flex: none !important;
box-sizing: border-box !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
overflow: visible !important;
}
/* Visual styling for preserved server-rendered grids to match design mock */
.beavav2-category-grid {
list-style: none;
margin: 0;
padding: 0;
}
.beavav2-category-grid .product,
.beavav2-category-grid[data-beava-preserve-grid="1"] > li,
.beavav2-category-grid[data-beava-preserve-grid="1"] > li.product {
/* Remove grey background for a cleaner card look and tighten padding */
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
/* Grid items should not have fixed width - grid controls that */
flex: none !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
list-style: none !important;
}
/* Image container inside each grid item */
.beavav2-category-grid .product .product-image-large {
display: flex;
align-items: center;
justify-content: center;
background: #f8f8f8;
width: 100%;
height: 230px;
margin: 0 auto 0.25rem;
overflow: hidden;
}
.beavav2-grid-wrap .beavav2-category-grid[data-beava-preserve-grid="1"] .product .product-image-large img.product-grid-large,
.beavav2-grid-wrap .beavav2-category-grid[data-beava-preserve-grid="1"] .product .product-image-large img.attachment-woocommerce_thumbnail {
width: auto !important;
height: auto !important;
max-height: 100% !important;
max-width: 100% !important;
object-fit: contain !important;
display: block !important;
}
.beavav2-category-grid .product .product-meta {
padding-top: 0.5rem;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.beavav2-category-grid .product {
display: flex;
flex-direction: column;
align-items: center;
}
.beavav2-category-grid .product .product-meta {
align-items: center;
text-align: center;
}
.beavav2-category-grid .product .product-title a {
display: inline-block;
text-align: center;
}
.beavav2-category-grid .product .product-title {
font-size: 16px;
line-height: 1.2;
margin-bottom: 0.5rem;
}
/* Product images in grid cells - natural size, no cropping */
.beavav2-category-grid-item .product-card img,
.beavav2-category-grid-item img.attachment-woocommerce_thumbnail {
width: auto !important;
height: auto !important;
max-width: 100% !important;
max-height: 230px !important;
object-fit: contain !important;
margin: 0 auto !important;
}
/* Responsive breakpoints: 3 on large tablets, 2 on small tablets, 1 on phones */
@media (max-width: 1024px) {
.beavav2-grid-wrap .beavav2-category-grid[data-beava-preserve-grid="1"],
ul.beavav2-category-grid.products[data-beava-preserve-grid="1"],
.product-category-archive ul.beavav2-category-grid[data-beava-preserve-grid="1"] {
grid-template-columns: repeat(3, 1fr) !important;
max-width: 100% !important;
width: 100% !important;
}
}
@media (max-width: 768px) {
.beavav2-grid-wrap .beavav2-category-grid[data-beava-preserve-grid="1"],
ul.beavav2-category-grid.products[data-beava-preserve-grid="1"],
.product-category-archive ul.beavav2-category-grid[data-beava-preserve-grid="1"] {
grid-template-columns: repeat(2, 1fr) !important;
max-width: 100% !important;
width: 100% !important;
}
}
@media (max-width: 480px) {
.beavav2-grid-wrap .beavav2-category-grid[data-beava-preserve-grid="1"],
ul.beavav2-category-grid.products[data-beava-preserve-grid="1"],
.product-category-archive ul.beavav2-category-grid[data-beava-preserve-grid="1"] {
grid-template-columns: 1fr !important;
max-width: 100% !important;
width: 100% !important;
margin: 0 !important;
}
.beavav2-category-grid[data-beava-preserve-grid="1"] li.product,
.beavav2-category-grid[data-beava-preserve-grid="1"] > li {
width: 100% !important;
max-width: 100% !important;
}
.beavav2-category-grid[data-beava-preserve-grid="1"] li.product .product-card {
width: 100% !important;
max-width: 100% !important;
}
}
/* Strong overrides to prevent other rules overriding grid/card sizing */
/* Exclude beavav2-category-grid which uses CSS Grid */
.site-main ul.products:not(.beavav2-category-grid),
.site-main .wc-block-grid__products,
.site-main .wc-block-grid {
display: flex !important;
flex-wrap: wrap !important;
/* tighten horizontal spacing while keeping row spacing */
gap: 1rem 0.6rem !important;
justify-content: center !important;
}
/* Ensure beavav2-category-grid uses CSS Grid, not flexbox */
.site-main ul.products.beavav2-category-grid[data-beava-preserve-grid="1"] {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 16px !important;
justify-content: start !important;
justify-items: stretch !important;
max-width: 100% !important;
margin: 0 !important;
}
.site-main ul.products:not(.beavav2-category-grid) li.product,
.site-main .wc-block-grid__product,
.site-main .wc-block-grid__product .product-card {
flex: 0 0 var(--beava-product-card-width) !important;
width: var(--beava-product-card-width) !important;
max-width: var(--beava-product-card-width) !important;
box-sizing: border-box !important;
margin: 0 !important;
}
/* Product images - natural size, no cropping, centered with gray background */
.site-main ul.products li.product img,
.site-main .wc-block-grid__product img,
.site-main .product-card img,
.site-main img.attachment-woocommerce_thumbnail,
.site-main img.woocommerce-placeholder,
.site-main .wp-block-woocommerce-product-collection img {
display: block !important;
width: auto !important;
height: auto !important;
max-width: 100% !important;
max-height: 230px !important;
object-fit: contain !important;
margin: 0 auto !important;
}
/* More specific rule for server-rendered grids - natural size, no cropping */
.beavav2-grid-wrap .beavav2-category-grid[data-beava-preserve-grid="1"] .product .product-image-large img {
height: auto !important;
width: auto !important;
max-height: 100% !important;
max-width: 100% !important;
object-fit: contain !important;
}
/* Ensure product meta doesn't force extra width */
.site-main .product-meta {
width: 100% !important;
box-sizing: border-box !important;
}
/* ========================================
Strong override: Force hero full-bleed to top
This block uses higher specificity and !important to
neutralize legacy or plugin styles that may add a white band
above full-width cover blocks. Keep it last so it loads after
the rest of theme rules.
======================================== */
body .wp-block-cover.alignfull.beava-hero-pink,
body .wp-block-cover.alignfull.beava-hero-pink .wp-block-cover__inner-container,
.site-header + .wp-block-cover.alignfull.beava-hero-pink,
.site-header + .wp-block-cover.alignfull.beava-hero-pink .wp-block-cover__inner-container {
margin-top: 0 !important;
padding-top: 0 !important;
position: relative !important;
top: 0 !important;
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Ensure the cover background itself is pinned behind the header and fills the viewport area */
.site-header + .wp-block-cover.alignfull.beava-hero-pink .wp-block-cover__background,
body .wp-block-cover.alignfull.beava-hero-pink .wp-block-cover__background {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background-color: var(--color-primary) !important;
z-index: 0 !important;
}
/* Make sure the cover inner container doesn't introduce vertical spacing */
.site-header + .wp-block-cover.alignfull.beava-hero-pink .wp-block-cover__inner-container,
body .wp-block-cover.alignfull.beava-hero-pink .wp-block-cover__inner-container {
padding-top: 0 !important;
margin-top: 0 !important;
}
/* Target shop header group inserted by block patterns or editor content
Some patterns output inline padding (e.g. style="padding-top:3rem;...")
— override that so the hero sits flush under the header. */
.beava-shop-header .wp-block-group__inner-container.is-layout-flow,
.beava-shop-header .wp-block-group__inner-container,
.block-pattern-header .wp-block-group__inner-container.is-layout-flow,
.block-pattern-header .wp-block-group__inner-container {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* Extra specific rule: when the inline-style is on the parent group use child selector */
.beava-shop-header[style] > .wp-block-group__inner-container,
.block-pattern-header[style] > .wp-block-group__inner-container {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* Extremely targeted overrides for the exact markup seen in the inspector
The following rules look for a group inner container that contains a heading
with the pink background color and force its padding to zero. This should
override inline padding styles produced by the block markup. */
.wp-block-group__inner-container.is-layout-flow:has(> h1.wp-block-heading.has-background[style*="background-color:#fcdde2"]),
.wp-block-group__inner-container:has(> h1.wp-block-heading.has-background[style*="background-color:#fcdde2"]) {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* Fallback for browsers that do not support :has(): target by matching the
inline-style on the heading's parent wrapper (less elegant but effective). */
.wp-block-group__inner-container.is-layout-flow h1.wp-block-heading.has-background[style*="background-color:#fcdde2"] {
/* Fallback: if :has() isn't supported, reduce the heading margins so the ancestor
inner container visually appears to have zero padding. This avoids empty rulesets
and keeps the visual effect across browsers. */
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Ultimate fallback: zero padding for any group inner container that contains
an h1 with the exact inline style. Apply a compact heading style to avoid creating
an empty ruleset while preserving visual layout. */
h1.wp-block-heading.has-background[style*="background-color:#fcdde2"] {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Direct override for groups that include inline 'padding-top:3rem' on the parent
Matches patterns that output inline styles from PHP/Block Editor and forces
the inner container to have no top padding. */
.wp-block-group[style*="padding-top:3rem"] > .wp-block-group__inner-container,
.wp-block-group[style*="padding-top: 3rem"] > .wp-block-group__inner-container {
padding-top: 0 !important;
}
/* ========================================
Single Product Page - Theme Styles
======================================== */
.product-single-page .product-single-container {
display: grid;
grid-template-columns: 1fr 1fr; /* two equal columns */
gap: 0; /* remove inner gutter so each column can be full-bleed if desired */
align-items: start;
padding: 0; /* container is full-bleed; top spacing handled per column */
width: 100%;
margin: 0;
}
.product-gallery-wrap {
background: #f3f3f3; /* light gray gallery background matching design */
padding: 4rem; /* breathing space around gallery */
padding-top: 10rem; /* extra top padding to accommodate fixed header */
display: flex;
align-items: center;
justify-content: center;
}
/* Gallery: allow the main image to use the available column space and cap height for viewport
This prefers delivering the 'woocommerce_single' image and avoids upscaling small thumbnails. */
.product-gallery { width: 100%; max-width: 720px; margin: 0; }
.product-gallery .product-main {
/* Make the main image container a stable frame so different image aspect ratios
don't change overall layout. Use a responsive max-height and keep images
centered with object-fit: contain. */
display: block;
position: relative;
width: 100%;
max-width: 720px;
/* Reserve a consistent visual area (responsive) */
max-height: 78vh;
height: min(78vh, 720px);
overflow: hidden;
background: transparent;
}
.product-gallery .product-main img.product-main-image {
/* Absolutely position the image so it can be centered inside the reserved frame
and won't grow the container when the image has different intrinsic sizes. */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
max-width: none;
max-height: none;
object-fit: contain;
display: block;
}
/* Ensure high-quality rendering: prefer the natural image size and avoid pixelated upscaling */
.product-gallery img.product-main-image { image-rendering: auto; -webkit-interpolation-mode: bicubic; }
/* Keep product meta top padding consolidated on .product-single-meta (moved from inline) */
.product-thumbnails { display:flex; gap:0.6rem; justify-content:center; margin-top:1rem; }
.product-thumb-btn { background: #fff; border: 1px solid rgba(0,0,0,0.06); padding:6px; border-radius:6px; cursor:pointer; }
.product-thumb-btn img { display:block; width:64px; height:64px; object-fit:contain; }
/* Product Gallery Navigation Buttons */
.product-gallery {
position: relative;
}
.gallery-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border: 1px solid #999;
border-radius: 50%;
background-color: #fff;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
padding: 0;
}
.gallery-nav svg {
width: 18px;
height: 18px;
color: #666;
transition: color 0.3s ease;
}
.gallery-nav-prev {
left: -22px;
}
.gallery-nav-next {
right: -22px;
}
.gallery-nav:hover {
border-color: #666;
background-color: #f5f5f5;
transform: translateY(-50%) scale(1.02);
}
.gallery-nav:hover svg {
color: #333;
}
.gallery-nav:disabled {
opacity: 0.35;
cursor: not-allowed;
pointer-events: none;
}
/* Mobile gallery nav adjustments */
@media (max-width: 768px) {
.gallery-nav {
width: 36px;
height: 36px;
}
.gallery-nav svg {
width: 16px;
height: 16px;
}
.gallery-nav-prev {
left: 10px;
}
.gallery-nav-next {
right: 10px;
}
}
/* Defensive: if a small thumbnail ends up nested inside the main image container
(some gallery scripts may accidentally inject nodes), hide it so it doesn't
appear as a tiny image on top of the main product image. */
.product-gallery .product-main .product-thumb,
.product-gallery .product-main .product-thumb-btn,
.product-gallery .product-main .product-thumb-placeholder,
.product-gallery .product-main .product-thumb-img {
display: none !important;
}
/* Provide an explicit aspect-ratio fallback for browsers that support it so the
main image area remains stable even if JS hasn't yet swapped the image. */
.product-gallery .product-main {
aspect-ratio: 4 / 3;
}
/* Remove magnifying glass cursor and add pointer cursor for clickable image */
.product-gallery .product-main {
cursor: pointer;
}
.product-gallery .product-main img.product-main-image {
cursor: pointer;
}
/* Hide any magnifying glass icons or zoom indicators on main image */
.product-gallery .product-main::before,
.product-gallery .product-main::after,
.product-gallery .product-main figure::before,
.product-gallery .product-main figure::after,
.product-gallery .product-main-image::before,
.product-gallery .product-main-image::after {
display: none !important;
content: none !important;
}
/* Hide WooCommerce zoom icon if present */
.woocommerce-product-gallery__trigger,
.product-gallery .woocommerce-product-gallery__trigger {
display: none !important;
}
/* GLightbox customization - remove zoom cursor, style close button */
.glightbox-clean .gslide-image img,
.glightbox-container .gslide-image img {
cursor: default !important;
}
/* Style close button for all GLightbox themes */
.gclose,
.glightbox-clean .gclose,
.glightbox-container .gclose {
cursor: pointer !important;
opacity: 1 !important;
width: 44px !important;
height: 44px !important;
background: rgba(0, 0, 0, 0.8) !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: all 0.2s ease !important;
position: fixed !important;
top: 20px !important;
right: 20px !important;
z-index: 999999 !important;
border: 2px solid rgba(255, 255, 255, 0.3) !important;
}
.gclose:hover,
.glightbox-clean .gclose:hover,
.glightbox-container .gclose:hover {
background: rgba(0, 0, 0, 0.95) !important;
border-color: rgba(255, 255, 255, 0.6) !important;
transform: scale(1.05) !important;
}
.gclose svg,
.glightbox-clean .gclose svg,
.glightbox-container .gclose svg {
width: 24px !important;
height: 24px !important;
stroke: #ffffff !important;
stroke-width: 2.5 !important;
}
/* Remove any zoom icons from lightbox */
.glightbox-clean .gslide-image::after,
.glightbox-clean .gslide-image::before,
.glightbox-container .gslide-image::after,
.glightbox-container .gslide-image::before {
display: none !important;
content: none !important;
}
/* Ensure toolbar/controls are visible */
.glightbox-container .gslide-description,
.glightbox-container .gdesc-inner {
display: none !important;
}
/* Make sure close button is always visible and on top */
.glightbox-container .gclose {
visibility: visible !important;
pointer-events: all !important;
}
/* .product-single-right spacing is handled by .product-single-meta */
.product-meta-wrap { display:flex; flex-direction:column; gap:1rem; padding:6rem 4rem; }
/* Responsive: Stack product page layout on mobile/tablet */
@media (max-width: 1024px) {
.product-single-page .product-single-container {
grid-template-columns: 1fr !important;
}
.product-gallery-wrap {
padding: 2rem;
padding-top: 10rem; /* accommodate fixed header on tablets/mobile */
}
.product-meta-wrap {
padding: 3rem 2rem;
}
}
@media (max-width: 640px) {
.product-gallery-wrap {
padding: 1rem;
padding-top: 10rem; /* preserve header clearance on mobile */
}
.product-meta-wrap {
padding: 2rem 1.5rem;
}
}
/* Mobile: ensure product gallery scales properly and doesn't overflow */
@media (max-width: 768px) {
.product-single-page {
overflow-x: hidden;
max-width: 100%;
}
.product-single-page .product-single-container {
max-width: 100%;
overflow-x: hidden;
}
.product-gallery-wrap {
max-width: 100%;
overflow: hidden;
padding: 1rem;
padding-top: 10rem; /* accommodate mobile header - push gallery below header */
}
.product-gallery {
max-width: 100%;
width: 100%;
}
.product-gallery .product-main {
max-width: 100%;
width: 100%;
height: auto;
max-height: 60vh;
aspect-ratio: 1 / 1;
}
.product-gallery .product-main img.product-main-image {
position: relative;
top: auto;
left: auto;
transform: none;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.product-thumbnails {
flex-wrap: wrap;
justify-content: center;
}
}
.product-category-label { font-size:13px; color: #666; text-transform: uppercase; letter-spacing: 0.04em; }
.product-single-right .product-title { font-size: 34px; line-height: 1.05; margin: 0 0 0.5rem; }
.product-stock-status { font-size: 15px; color: #333; }
.product-excerpt { color: rgba(0,0,0,0.78); font-size: 18px; margin-top: 0.5rem; }
.product-thumbnails-colors { margin-top: 1rem; display:flex; gap:0.6rem; align-items:center; }
.product-color-swatches { display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 1rem 0; }
.product-color-swatch { width:54px; height:54px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; background:#fff; border:1px solid rgba(0,0,0,0.06); cursor:pointer; font-size: 0; line-height: 0; }
.product-color-swatch img { width:44px; height:44px; object-fit:contain; }
.product-variation-controls { margin-top: 1rem; }
.size-pills-wrap { margin: 1rem 0; }
.size-pills-label { font-size: 0.75rem; font-weight: 600; color: #666; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.5px; }
.size-pills { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.pattern-pills-wrap { margin: 1rem 0; }
.pattern-pills-label { font-size: 0.75rem; font-weight: 600; color: #666; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.5px; }
.pattern-pills { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.product-quantity-inline { margin: 1rem 0; display: flex; gap: 0.5rem; align-items: center; }
.product-quantity-inline label { font-size: 0.9rem; font-weight: 600; color: #666; }
.product-quantity-inline input[type="number"] { width: 80px; padding: 0.5rem; border: 1px solid rgba(0,0,0,0.08); border-radius: 6px; }
.product-variation-controls .size-selector { display:flex; gap:0.75rem; align-items:center; }
.product-variation-controls .size-selector button { padding:0.6rem 1rem; border-radius:999px; border:1px solid rgba(0,0,0,0.08); background:#fff; cursor:pointer; font-weight:600; }
.product-variation-controls .size-selector button.active { background:#7b8386; color:#fff; border-color:transparent; }
.product-quantity-cta { display:flex; gap:1rem; align-items:center; margin-top:1rem; }
.product-quantity-cta input[type="number"] { width:96px; padding:0.6rem 0.8rem; border:1px solid rgba(0,0,0,0.08); border-radius:6px; }
.single_add_to_cart_button { background:#000; color:#fff; padding:1rem 2rem; border-radius:999px; font-weight:700; border:none; box-shadow:none; }
.single_add_to_cart_button:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
/* Style WooCommerce variation selects as pill-like fallback */
.variations label { display:block; font-weight:700; margin-bottom:0.25rem; font-size:0.9rem; }
.variations select { appearance:none; -webkit-appearance:none; -moz-appearance:none; padding:0.6rem 1rem; border-radius:999px; border:1px solid rgba(0,0,0,0.08); background:#fff; min-width:220px; }
.variations select:focus { outline:none; box-shadow:0 0 0 4px rgba(245,142,159,0.12); }
.variations .value { margin-bottom: 0.75rem; }
/* Swatch active state */
.product-color-swatch.is-active,
.product-color-swatch.selected,
.color-thumb.selected,
.product-color-swatch[aria-pressed="true"],
.color-thumb[aria-pressed="true"] {
outline: 3px solid #f58e9f;
outline-offset: 2px;
border-color: #f58e9f;
transform: translateY(-2px);
}
/* Color circle swatches */
.swatch-color-circle {
display: inline-block;
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid rgba(0,0,0,0.1);
flex-shrink: 0;
}
.swatch-color-circle.is-dual {
/* Dual-tone colors use linear-gradient set inline */
border: 1px solid rgba(0,0,0,0.15);
}
/* When swatch has both color circle and image, stack them */
.product-color-swatch {
flex-direction: column;
gap: 2px;
position: relative;
}
/* If only color circle (no image), center it */
.product-color-swatch .swatch-color-circle:only-child {
width: 40px;
height: 40px;
}
/* When image is present alongside color circle, show circle as overlay badge */
.product-color-swatch:has(.product-swatch-thumb) .swatch-color-circle {
position: absolute;
bottom: 2px;
right: 2px;
width: 18px;
height: 18px;
border: 2px solid #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
/* Make CTA and quantity vertically stacked on small screens */
@media (max-width: 640px) {
.product-quantity-cta { flex-direction: column; align-items: stretch; }
.product-quantity-cta .single_add_to_cart_button { width:100%; }
}
/* Hide native WooCommerce select elements on single product and prefer pill UI */
body.single-product .variations select { display:none !important; }
body.single-product .variations .value { display:none !important; }
/* Size button styling (clickable pills) */
.beavav2-size-button { display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; min-width:56px; height:44px; border-radius:999px; border:1px solid rgba(0,0,0,0.08); background:#fff; padding:0 1rem; font-weight:700; cursor:pointer; }
.beavav2-size-button[aria-pressed="true"], .beavav2-size-button.is-active { background:#7c8790; color:#fff; border-color:#7c8790; }
.beavav2-size-button:focus { box-shadow:0 0 0 4px rgba(245,142,159,0.12); outline:none; }
.beavav2-pattern-button { display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; min-width:56px; height:44px; border-radius:999px; border:1px solid rgba(0,0,0,0.08); background:#fff; padding:0 1rem; font-weight:700; cursor:pointer; }
.beavav2-pattern-button[aria-pressed="true"], .beavav2-pattern-button.is-active { background:#7c8790; color:#fff; border-color:#7c8790; }
.beavav2-pattern-button:focus { box-shadow:0 0 0 4px rgba(245,142,159,0.12); outline:none; }
.product-full-description { margin-top:1.25rem; color: rgba(0,0,0,0.9); }
/* Custom Print Banner - Pink background with white text */
.product-custom-print-banner {
background-color: var(--color-primary, #F58E9F);
padding: 2rem 2rem;
text-align: center;
margin: 0;
}
.product-custom-print-banner p {
max-width: 100%;
margin: 0 auto;
padding: 0 2rem;
font-size: 1.25rem;
line-height: 1.6;
color: #fff;
}
@media (max-width: 768px) {
.product-custom-print-banner {
padding: 1.5rem 1.5rem;
}
.product-custom-print-banner p {
font-size: 1.125rem;
}
}
/* Product Information Section (Produktinformation) */
.product-information-section {
margin-top: 0;
margin-left: -4rem; /* Extend to the left - match product-meta-wrap padding */
margin-right: -4rem; /* Extend to the right - match product-meta-wrap padding */
padding: 3rem 4rem;
background: #F5F5F5; /* Grey background */
border-radius: 0; /* Remove border radius for full width effect */
}
.product-information-section .container {
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
text-align: left;
}
@media (max-width: 1024px) {
.product-information-section {
margin-left: -2rem;
margin-right: -2rem;
padding: 2.5rem 2rem;
}
}
@media (max-width: 640px) {
.product-information-section {
margin-left: -1.5rem;
margin-right: -1.5rem;
padding: 2rem 1.5rem;
}
}
.product-information-section h2 {
font-family: var(--font-primary);
font-size: clamp(28px, 5vw, 48px);
font-weight: 500;
margin-bottom: 1.5rem;
color: var(--color-text-dark);
text-align: left;
}
.product-information-section .product-full-description {
font-size: var(--font-size-body);
line-height: 1.6;
color: var(--color-text-dark);
}
.product-information-section .product-full-description h1 {
font-family: var(--font-primary);
font-size: clamp(22px, 3.5vw, 32px);
font-weight: 600;
margin-top: 2rem;
margin-bottom: 0.75rem;
color: var(--color-text-dark);
}
.product-information-section .product-full-description h2 {
font-family: var(--font-primary);
font-size: clamp(20px, 3vw, 28px);
font-weight: 600;
margin-top: 2rem;
margin-bottom: 0.75rem;
color: var(--color-text-dark);
}
.product-information-section .product-full-description h3 {
font-family: var(--font-primary);
font-size: clamp(18px, 2.5vw, 24px);
font-weight: 600;
margin-top: 1.5rem;
margin-bottom: 0.5rem;
color: var(--color-text-dark);
}
.product-information-section .product-full-description h4 {
font-family: var(--font-primary);
font-size: clamp(16px, 2vw, 20px);
font-weight: 600;
margin-top: 1.5rem;
margin-bottom: 0.5rem;
color: var(--color-text-dark);
}
.product-information-section .product-full-description ul,
.product-information-section .product-full-description ol {
margin-left: 1.5rem;
margin-bottom: 1rem;
}
.product-information-section .product-full-description li {
margin-bottom: 0.5rem;
}
/* Tables in product description */
.product-information-section .product-full-description table {
width: 100%;
border-collapse: collapse;
margin: 1.5rem 0;
font-size: 0.95rem;
}
.product-information-section .product-full-description table th,
.product-information-section .product-full-description table td {
padding: 12px 16px;
text-align: left;
border: 1px solid rgba(0,0,0,0.1);
}
.product-information-section .product-full-description table th {
background-color: rgba(0,0,0,0.05);
font-weight: 600;
text-transform: uppercase;
font-size: 0.85rem;
letter-spacing: 0.5px;
}
.product-information-section .product-full-description table tr:nth-child(even) {
background-color: rgba(255,255,255,0.5);
}
.product-information-section .product-full-description table tr:hover {
background-color: rgba(245,142,159,0.1);
}
@media (max-width: 640px) {
.product-information-section .product-full-description table {
font-size: 0.85rem;
}
.product-information-section .product-full-description table th,
.product-information-section .product-full-description table td {
padding: 8px 10px;
}
}
/* ==========================================================================
Similar Products Carousel Section (Single Product Page)
========================================================================== */
.similar-products-section {
margin-top: 5rem;
margin-bottom: 3rem;
padding: 0 20px;
max-width: 1400px;
margin-left: auto;
margin-right: auto;
}
/* Header with centered title and nav buttons next to it */
.similar-products-controls {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 2rem;
gap: 1.5rem;
}
.similar-products-controls .product-carousel-controls-right {
display: flex;
gap: 0.5rem;
flex-shrink: 0;
}
.similar-products-heading {
font-family: var(--font-primary);
font-size: clamp(28px, 5vw, 48px);
font-weight: 500;
color: var(--color-text-dark);
margin: 0;
text-align: center;
}
/* Similar Products Nav - dark grey buttons with SVG arrows */
.similar-products-nav .swiper-button-prev,
.similar-products-nav .swiper-button-next {
position: relative !important;
width: 44px !important;
height: 44px !important;
border: 2px solid #888 !important;
border-radius: 50% !important;
background-color: #fff !important;
cursor: pointer;
transition: all 0.3s ease;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
top: auto !important;
left: auto !important;
right: auto !important;
box-shadow: none !important;
}
/* Dark grey SVG arrows for similar products nav */
.similar-products-nav .swiper-button-prev {
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 16px 16px !important;
}
.similar-products-nav .swiper-button-next {
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 16px 16px !important;
}
/* Hide ::after content for similar products nav */
.similar-products-nav .swiper-button-prev::after,
.similar-products-nav .swiper-button-next::after {
display: none !important;
content: none !important;
}
.similar-products-nav .swiper-button-prev:hover,
.similar-products-nav .swiper-button-next:hover {
border-color: #666 !important;
transform: scale(1.05);
}
.similar-products-section .swiper-button-disabled {
opacity: 0.35;
cursor: not-allowed;
pointer-events: none;
}
/* Pagination bullets */
.similar-products-section .swiper-pagination {
margin-top: 1.5rem;
position: relative;
bottom: auto;
}
.similar-products-section .swiper-pagination-bullet {
width: 10px;
height: 10px;
background-color: #ccc;
opacity: 1;
transition: all 0.3s ease;
}
.similar-products-section .swiper-pagination-bullet-active {
background-color: var(--color-text-dark, #1a1a1a);
transform: scale(1.2);
}
/* Mobile responsive */
@media (max-width: 768px) {
.similar-products-section {
margin-top: 3rem;
margin-bottom: 2rem;
padding: 0 15px;
}
.similar-products-controls {
flex-wrap: nowrap;
gap: 0.5rem;
}
.similar-products-heading {
font-size: clamp(24px, 6vw, 32px);
}
.similar-products-section .swiper-button-prev,
.similar-products-section .swiper-button-next {
width: 36px;
height: 36px;
}
.similar-products-section .swiper-button-prev::after,
.similar-products-section .swiper-button-next::after {
font-size: 12px;
}
}
@media (max-width: 480px) {
.similar-products-heading {
font-size: 22px;
}
.similar-products-section .swiper-button-prev,
.similar-products-section .swiper-button-next {
width: 32px;
height: 32px;
}
}
/* Product Contact Form Section */
.product-contact-form-section {
margin-top: 0;
margin-left: 0; /* No negative margins on blocks */
margin-right: 0;
padding: 3rem 4rem;
border-radius: 0;
position: relative;
overflow: hidden;
/* Background color and image come from inline styles via Customizer */
/* Default pink background if Customizer value not set */
background-color: #f4c2c2;
}
/* Only apply negative margins on single product pages */
.single-product .product-contact-form-section {
margin-left: -4rem;
margin-right: -4rem;
}
@media (max-width: 1024px) {
.product-contact-form-section {
margin-left: 0;
margin-right: 0;
padding: 2.5rem 2rem;
}
}
@media (max-width: 640px) {
.product-contact-form-section {
margin-left: 0;
margin-right: 0;
padding: 2rem 1.5rem;
}
}
.product-contact-form-section.has-background-image {
color: #fff;
}
.product-contact-form-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 1;
}
.product-contact-form-inner {
position: relative;
z-index: 2;
text-align: center;
}
.product-contact-form-section h2 {
font-size: 2rem;
font-weight: 600;
margin-bottom: 1rem;
color: #000000;
}
.product-contact-form-section > p,
.product-contact-form-inner > p {
font-size: var(--font-size-body);
color: #000000;
margin-bottom: 2.5rem;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.product-contact-form-wrapper {
max-width: 900px;
margin: 0 auto;
}
/* Make wrapper divs transparent to layout */
.product-contact-form-wrapper > div,
.product-contact-form-wrapper .wp-block-contact-form-7-contact-form-selector,
.product-contact-form-wrapper .wpcf7 {
display: contents !important;
}
/* Apply grid to form - force it everywhere */
.product-contact-form-section form.wpcf7-form,
.product-contact-form-wrapper form.wpcf7-form,
.product-contact-form-wrapper .beava-contact-form,
form.wpcf7-form {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 1.5rem !important;
width: 100% !important;
}
/* Ensure form children are direct grid items */
.product-contact-form-wrapper .wpcf7-form > *,
.product-contact-form-wrapper .beava-contact-form > * {
min-width: 0;
}
/* Form row - two columns side by side (using fieldset since CF7 strips divs) */
.product-contact-form-wrapper .wpcf7-form .form-row,
.product-contact-form-section .wpcf7-form .form-row,
.wpcf7-form fieldset.form-row {
grid-column: 1 / -1 !important;
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 1.5rem !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
min-inline-size: auto !important;
}
/* Full-width fields span both columns */
.product-contact-form-wrapper .wpcf7-form .full-width-field,
.product-contact-form-wrapper .wpcf7-form .message-field,
.product-contact-form-wrapper .wpcf7-form .captcha-field,
.product-contact-form-section .wpcf7-form .full-width-field,
.product-contact-form-section .wpcf7-form .message-field,
.product-contact-form-section .wpcf7-form .captcha-field,
.product-contact-form-wrapper .wpcf7-form > p:last-of-type,
.product-contact-form-section .wpcf7-form > p:last-of-type {
grid-column: 1 / -1 !important;
}
/* Labels styling */
.product-contact-form-wrapper .wpcf7-form label,
.product-contact-form-wrapper .beava-contact-form label {
display: block;
font-size: 14px;
font-weight: 500;
margin-bottom: 0.5rem;
color: #000000;
text-transform: uppercase;
letter-spacing: 0.02em;
}
/* Input fields */
.product-contact-form-wrapper .wpcf7-form input[type="text"],
.product-contact-form-wrapper .wpcf7-form input[type="email"],
.product-contact-form-wrapper .wpcf7-form input[type="tel"],
.product-contact-form-wrapper .wpcf7-form textarea,
.product-contact-form-wrapper .beava-contact-form input[type="text"],
.product-contact-form-wrapper .beava-contact-form input[type="email"],
.product-contact-form-wrapper .beava-contact-form input[type="tel"],
.product-contact-form-wrapper .beava-contact-form textarea {
width: 100%;
padding: 1rem 1.25rem;
border: none;
border-radius: 8px;
font-size: 16px;
font-family: inherit;
color: #000000;
background: #ffffff;
min-height: 56px;
box-sizing: border-box;
}
.product-contact-form-wrapper .wpcf7-form input[type="text"]::placeholder,
.product-contact-form-wrapper .wpcf7-form input[type="email"]::placeholder,
.product-contact-form-wrapper .wpcf7-form input[type="tel"]::placeholder,
.product-contact-form-wrapper .wpcf7-form textarea::placeholder,
.product-contact-form-wrapper .beava-contact-form input[type="text"]::placeholder,
.product-contact-form-wrapper .beava-contact-form input[type="email"]::placeholder,
.product-contact-form-wrapper .beava-contact-form input[type="tel"]::placeholder,
.product-contact-form-wrapper .beava-contact-form textarea::placeholder {
color: #999999;
}
/* Form row wrappers */
.product-contact-form-wrapper .wpcf7-form p,
.product-contact-form-wrapper .wpcf7-form .wpcf7-form-control-wrap,
.product-contact-form-wrapper .beava-contact-form p {
margin: 0;
}
.product-contact-form-wrapper .wpcf7-form > p,
.product-contact-form-wrapper .beava-contact-form > p {
display: flex;
flex-direction: column;
}
/* Textarea spanning full width */
.product-contact-form-wrapper .wpcf7-form textarea,
.product-contact-form-wrapper .beava-contact-form textarea {
min-height: 160px;
resize: vertical;
}
/* Make textarea container span both columns */
.product-contact-form-wrapper .wpcf7-form p:has(textarea),
.product-contact-form-wrapper .beava-contact-form p:has(textarea) {
grid-column: 1 / -1;
}
/* Submit button */
.product-contact-form-wrapper .wpcf7-form input[type="submit"],
.product-contact-form-wrapper .beava-contact-form input[type="submit"] {
grid-column: 1 / -1;
background: #000000;
color: #ffffff;
padding: 1rem 3rem;
border: none;
border-radius: 50px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
width: auto;
justify-self: center;
margin-top: 1rem;
min-width: 200px;
}
.product-contact-form-wrapper .wpcf7-form input[type="submit"]:hover,
.product-contact-form-wrapper .beava-contact-form input[type="submit"]:hover {
background: #333333;
transform: translateY(-2px);
}
/* Responsive */
@media (max-width: 768px) {
.product-contact-form-wrapper .wpcf7-form,
.product-contact-form-wrapper .beava-contact-form {
grid-template-columns: 1fr;
gap: 1.25rem;
}
.product-contact-form-wrapper .wpcf7-form p:has(textarea),
.product-contact-form-wrapper .beava-contact-form p:has(textarea) {
grid-column: 1;
}
}
/* Price style (pink) */
.product-price { color: var(--color-primary); font-size: 22px; font-weight:700; margin-top:0.25rem; }
/* Align gallery arrows visual (if JS adds them) */
.product-single-left .swiper-button-prev,
.product-single-left .swiper-button-next { position: absolute; top: 50%; transform: translateY(-50%); }
/* Responsive: stack on mobile */
@media (max-width: 900px) {
.product-single-page .product-single-container { grid-template-columns: 1fr; }
.product-gallery-wrap, .product-meta-wrap { padding: 2rem; }
.product-gallery-wrap { order: 1; padding-top: 10rem; } /* extra top padding for mobile header */
.product-meta-wrap { order: 2; }
.product-gallery { max-width: 100%; }
.product-meta-wrap .product_title { font-size: 28px; }
}
@media (max-width: 1024px) {
.product-single-meta { padding-top: 5rem; }
}
@media (max-width: 640px) {
.product-single-meta { padding-top: 3rem; }
/* Page-level overflow control */
.product-single-page,
.product-single-container {
overflow-x: hidden !important;
max-width: 100% !important;
width: 100% !important;
}
/* Fix mobile overflow for product page - main container */
.product-meta-wrap,
.product-single-meta,
.product-meta-column {
padding: 1.5rem 1rem !important;
overflow-x: hidden !important;
max-width: 100% !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Product title mobile */
.product-meta-wrap .product_title,
.product-single-meta .product_title,
.product-single-meta h1.product_title,
h1.product_title {
font-size: 1.75rem !important;
line-height: 1.2 !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
hyphens: auto !important;
max-width: 100% !important;
}
/* Short description mobile */
.product-meta-wrap .woocommerce-product-details__short-description,
.product-excerpt,
.product-single-meta .woocommerce-product-details__short-description {
font-size: 0.9rem !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
max-width: 100% !important;
}
/* Swatches wrapper container - constrain width */
.product-swatches-wrapper {
max-width: 100% !important;
overflow: hidden !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Color swatches mobile - horizontal scroll */
.product-color-swatches,
.product-swatches,
.beavav2-color-swatches {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
gap: 0.5rem !important;
padding-bottom: 0.5rem !important;
max-width: 100% !important;
scrollbar-width: none;
}
.product-swatches::-webkit-scrollbar {
display: none;
}
/* Individual color swatches */
.product-color-swatch,
.beavav2-color-swatch,
.color-thumb {
flex-shrink: 0 !important;
width: 48px !important;
height: 48px !important;
min-width: 48px !important;
}
.product-color-swatch img,
.beavav2-color-swatch img,
.color-thumb img {
width: 38px !important;
height: 38px !important;
max-width: 100% !important;
}
/* Size buttons mobile */
.beavav2-size-buttons,
.size-pills,
.product-sizes {
display: flex !important;
flex-wrap: wrap !important;
gap: 0.5rem !important;
max-width: 100% !important;
}
.beavav2-size-button,
.size-pill {
min-width: 48px !important;
height: 40px !important;
padding: 0 0.75rem !important;
font-size: 0.875rem !important;
flex-shrink: 0 !important;
}
/* Pattern buttons mobile */
.pattern-pills {
display: flex !important;
flex-wrap: wrap !important;
gap: 0.5rem !important;
max-width: 100% !important;
}
.beavav2-pattern-button {
min-width: 48px !important;
height: 40px !important;
padding: 0 0.75rem !important;
font-size: 0.875rem !important;
flex-shrink: 0 !important;
}
/* Add to cart button mobile */
.single_add_to_cart_button {
width: 100% !important;
padding: 1rem !important;
font-size: 1rem !important;
max-width: 100% !important;
}
/* Quantity and CTA row */
.product-quantity-cta {
flex-direction: column !important;
gap: 0.75rem !important;
max-width: 100% !important;
}
/* Product information section mobile */
.product-information-section {
margin-left: -1rem !important;
margin-right: -1rem !important;
padding: 2rem 1rem !important;
max-width: calc(100% + 2rem) !important;
}
/* Custom print banner mobile */
.product-custom-print-banner {
padding: 1.25rem 1rem;
max-width: 100% !important;
}
.product-custom-print-banner p {
padding: 0;
max-width: 100% !important;
}
/* Form fields mobile */
.variations,
.variations_form {
max-width: 100% !important;
overflow: hidden !important;
}
}
/* ========================================
NEW PRODUCT SINGLE PAGE LAYOUT
Two-column: Left (Gallery) | Right (Meta/Form)
======================================== */
.product-single-page-new {
max-width: 100%;
margin: 0;
padding: 0;
}
/* Two-column grid */
.product-single-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
max-height: 1000px;
height: auto;
width: 100%;
max-width: 1800px;
margin: 0 auto;
overflow: visible;
}
/* LEFT COLUMN: Product Gallery */
.product-gallery-column {
background: #f2f2f2;
padding: 4rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 2rem;
max-height: 1000px;
overflow-y: auto;
position: relative;
}
/* Extend background to left edge */
.product-gallery-column::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 100%;
width: 50vw;
background: #f2f2f2;
z-index: -1;
}
@media (max-width: 768px) {
.product-gallery-column::before { display: none; }
}
.product-gallery-container {
width: 100%;
max-width: 600px;
}
.product-gallery-container img {
cursor: pointer;
transition: opacity 0.2s ease;
}
.product-gallery-container img:hover {
opacity: 0.9;
}
/* Product Thumbnail Grid */
.product-thumbnail-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
gap: 0.75rem;
margin-top: 1rem;
max-width: 600px;
width: 100%;
}
.product-thumb {
width: 100%;
aspect-ratio: 1;
border: 2px solid #E5E5E5;
border-radius: var(--radius-sm);
background: var(--color-white);
cursor: pointer;
padding: 4px;
transition: all 0.2s ease;
overflow: hidden;
}
.product-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--radius-xs);
}
.product-thumb:hover {
border-color: var(--color-accent-blue);
transform: translateY(-2px);
}
.product-thumb[aria-pressed="true"] {
border-color: var(--color-black);
border-width: 3px;
}
/* Lightbox */
.product-lightbox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
animation: fadeIn 0.2s ease;
}
.lightbox-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
cursor: pointer;
}
.lightbox-content {
position: relative;
max-width: 90vw;
max-height: 90vh;
z-index: 10000;
}
.lightbox-content img {
max-width: 100%;
max-height: 90vh;
object-fit: contain;
}
.lightbox-close {
position: absolute;
top: -50px;
right: 0;
width: 40px;
height: 40px;
background: var(--color-white);
border: none;
border-radius: 50%;
font-size: 24px;
line-height: 1;
cursor: pointer;
transition: all 0.2s ease;
color: var(--color-black);
display: flex;
align-items: center;
justify-content: center;
}
.lightbox-close:hover {
background: var(--color-primary);
color: var(--color-white);
transform: rotate(90deg);
}
body.lightbox-active {
overflow: hidden;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* RIGHT COLUMN: Product Meta + Form */
.product-meta-column {
max-width: 100%;
width: 100%;
margin-left: auto;
margin-right: auto;
padding: 6rem 4rem 4rem 4rem; /* Added extra top padding to avoid menu overlap */
background: var(--color-white);
display: flex;
flex-direction: column;
gap: 1.5rem;
}
/* Product Category */
.product-category {
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--color-accent-gray);
font-weight: 500;
}
/* Product Title (H1) */
.product-title {
font-family: var(--font-primary);
font-size: var(--font-size-h1);
font-weight: 500;
line-height: 1.2;
margin: 0;
color: var(--color-black);
}
/* Stock Notice - Pink Background */
.product-stock-notice {
background: #FFE5EA;
padding: 0.75rem 1.25rem;
border-radius: var(--radius-sm);
display: inline-block;
align-self: flex-start;
}
.product-stock-notice span {
color: var(--color-text-dark);
font-size: var(--font-size-small);
font-weight: 500;
}
/* Price */
.product-price-display {
font-size: 32px;
font-weight: var(--font-weight-bold);
color: var(--color-primary);
margin: 0.5rem 0 1rem 0;
}
/* Short Description */
.product-short-description {
font-size: var(--font-size-body);
line-height: 1.6;
color: var(--color-text-dark);
margin-bottom: 1.5rem;
}
/* Form Container */
.product-variations-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
margin-top: 1rem;
}
/* Color Thumbnails */
.product-color-thumbnails {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
.color-thumbnail {
width: 100px;
height: 100px;
border: 2px solid #E5E5E5;
border-radius: var(--radius-md);
background: var(--color-white);
cursor: pointer;
padding: 4px;
transition: all 0.2s ease;
overflow: hidden;
}
.color-thumbnail:hover {
border-color: var(--color-accent-blue);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.color-thumbnail.selected,
.color-thumbnail[aria-pressed="true"] {
border-color: var(--color-black);
border-width: 3px;
padding: 3px;
}
.color-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 4px;
}
/* Size + Quantity Row */
.product-controls-row {
display: flex;
gap: 2rem;
align-items: flex-start;
flex-wrap: wrap;
}
/* Size Selector */
.product-size-selector {
flex: 1;
min-width: 200px;
}
.size-label {
font-size: 14px;
font-weight: 600;
letter-spacing: 1px;
color: var(--color-black);
margin-bottom: 0.75rem;
}
.size-pills {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.size-pill {
background: var(--color-white);
border: 2px solid #E5E5E5;
border-radius: var(--radius-full);
padding: 0.65rem 1.5rem;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
min-width: 70px;
text-align: center;
}
.size-pill:hover {
border-color: var(--color-accent-blue);
background: #F0F9FF;
}
.size-pill[aria-pressed="true"],
.size-pill.is-active {
background: var(--color-accent-gray);
border-color: var(--color-accent-gray);
color: var(--color-white);
}
/* Quantity Selector */
.product-quantity-selector {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.product-quantity-selector label {
font-size: 14px;
font-weight: 600;
letter-spacing: 1px;
color: var(--color-black);
}
.product-quantity-selector input.qty {
width: 100px;
padding: 0.65rem 1rem;
border: 2px solid #E5E5E5;
border-radius: var(--radius-md);
font-size: 16px;
font-weight: 600;
text-align: center;
}
/* CTA Button */
.product-cta-container {
margin-top: 1.5rem;
}
.product-cta-container .theme-add-to-cart {
background: var(--color-black);
color: var(--color-white);
border: none;
border-radius: var(--radius-full);
padding: 1.25rem 3rem;
font-size: 18px;
font-weight: 500;
text-transform: lowercase;
cursor: pointer;
transition: all 0.3s ease;
width: 100%;
max-width: 400px;
}
.product-cta-container .theme-add-to-cart:hover {
background: var(--color-accent-gray);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
.product-cta-container .theme-add-to-cart:disabled,
.product-cta-container .theme-add-to-cart.disabled {
background: #CCCCCC;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
/* LEFT COLUMN: Product Gallery */
.product-gallery-column {
background: #F5F5F5;
padding: 4rem;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.product-gallery-container {
max-width: 600px;
width: 100%;
}
.product-gallery-container img {
width: 100%;
height: auto;
display: block;
border-radius: var(--radius-md);
}
/* PRODUCT INFORMATION BLOCK */
.product-information-block {
background: #f2f2f2;
padding: 4rem;
margin: 0;
width: 100%;
}
.product-information-block h2 {
font-family: var(--font-primary);
font-size: var(--font-size-h2);
font-weight: 500;
margin-bottom: 2rem;
color: var(--color-black);
}
.product-information-content {
max-width: 900px;
font-size: var(--font-size-body);
line-height: 1.8;
color: var(--color-text-dark);
}
.product-information-content h3 {
font-size: var(--font-size-h3);
font-weight: var(--font-weight-bold);
margin: 2rem 0 1rem 0;
}
.product-information-content p {
margin-bottom: 1rem;
}
.product-information-content ul,
.product-information-content ol {
margin-left: 1.5rem;
margin-bottom: 1rem;
}
/* RELATED PRODUCTS CAROUSEL */
.related-products-block {
padding: 4rem;
background: var(--color-white);
}
.related-products-block h2 {
font-family: var(--font-primary);
font-size: var(--font-size-h2);
font-weight: 500;
margin: 0;
color: var(--color-black);
}
/* CONTACT FORM BLOCK */
.contact-form-block {
background: var(--color-primary);
background-size: cover;
background-position: center;
padding: 4rem;
position: relative;
min-height: 600px;
display: flex;
align-items: center;
justify-content: center;
}
.contact-form-block::before {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
background: rgba(245, 240, 142, 0.85);
z-index: 1;
}
.contact-form-container {
position: relative;
z-index: 2;
max-width: 700px;
width: 100%;
background: var(--color-white);
padding: 3rem;
border-radius: var(--radius-lg);
box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}
.contact-form-container h2 {
font-family: var(--font-primary);
font-size: var(--font-size-h2);
font-weight: var(--font-weight-bold);
margin-bottom: 2rem;
text-align: center;
color: var(--color-black);
}
.beava-contact-form .form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
margin-bottom: 1.5rem;
}
.beava-contact-form .form-field {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.beava-contact-form .form-field.full-width {
grid-column: 1 / -1;
}
.beava-contact-form label {
font-size: 14px;
font-weight: 600;
letter-spacing: 1px;
color: var(--color-black);
}
.beava-contact-form input[type="text"],
.beava-contact-form input[type="email"],
.beava-contact-form input[type="tel"],
.beava-contact-form textarea {
padding: 0.875rem 1rem;
border: 2px solid #E5E5E5;
border-radius: var(--radius-md);
font-size: 16px;
font-family: var(--font-primary);
transition: border-color 0.2s ease;
}
.beava-contact-form input:focus,
.beava-contact-form textarea:focus {
outline: none;
border-color: var(--color-accent-blue);
}
.beava-contact-form .contact-submit-btn {
background: var(--color-black);
color: var(--color-white);
border: none;
border-radius: var(--radius-full);
padding: 1rem 3rem;
font-size: 18px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 1rem;
width: 100%;
}
.beava-contact-form .contact-submit-btn:hover {
background: var(--color-accent-gray);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
/* PRODUCT PAGE CONTACT FORM SECTION */
.contact-form-section {
background-color: #F8F8F8;
padding: 4rem 2rem;
position: relative;
overflow: hidden;
}
.contact-form-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.contact-form-section .wpcf7-form {
display: flex;
flex-direction: column;
gap: 0;
}
/* Form row layout - two columns */
.contact-form-section .wpcf7-form .form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
margin-bottom: 1.5rem;
}
.contact-form-section .wpcf7-form .half-width-field {
margin: 0;
display: flex;
flex-direction: column;
}
.contact-form-section .wpcf7-form .full-width-field {
grid-column: 1 / -1;
margin: 0;
display: flex;
flex-direction: column;
}
.contact-form-section .wpcf7-form .message-field {
margin-bottom: 1.5rem;
}
.contact-form-section .wpcf7-form p {
margin: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.contact-form-section .wpcf7-form label {
font-size: 14px;
font-weight: 600;
color: #1a1a1a;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 0.5rem;
}
.contact-form-section .wpcf7-form input[type="text"],
.contact-form-section .wpcf7-form input[type="email"],
.contact-form-section .wpcf7-form input[type="tel"],
.contact-form-section .wpcf7-form textarea {
padding: 1rem;
border: 2px solid #E5E5E5;
border-radius: 8px;
font-size: 16px;
font-family: inherit;
transition: border-color 0.2s ease;
width: 100%;
background: #ffffff;
}
.contact-form-section .wpcf7-form input:focus,
.contact-form-section .wpcf7-form textarea:focus {
outline: none;
border-color: #1a1a1a;
}
.contact-form-section .wpcf7-form textarea {
min-height: 150px;
resize: vertical;
}
.contact-form-section .wpcf7-form input[type="submit"] {
background: #1a1a1a;
color: #ffffff;
border: none;
border-radius: 50px;
padding: 1rem 3rem;
font-size: 16px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
transition: all 0.3s ease;
width: 100%;
max-width: 300px;
margin: 1rem auto 0;
display: block;
}
.contact-form-section .wpcf7-form input[type="submit"]:hover {
background: #333333;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
.contact-form-section .wpcf7-response-output {
margin: 1rem 0 0;
padding: 1rem;
border-radius: 8px;
text-align: center;
}
.contact-form-section .wpcf7-not-valid-tip {
font-size: 12px;
color: #d32f2f;
margin-top: 0.25rem;
}
.contact-form-section .wpcf7-validation-errors,
.contact-form-section .wpcf7-acceptance-missing {
border: 2px solid #d32f2f;
background: #ffebee;
color: #d32f2f;
}
.contact-form-section .wpcf7-mail-sent-ok {
border: 2px solid #4caf50;
background: #e8f5e9;
color: #2e7d32;
}
/* Responsive form layout */
@media (max-width: 768px) {
.contact-form-section .wpcf7-form .form-row {
grid-template-columns: 1fr;
gap: 1rem;
}
}
/* RESPONSIVE DESIGN */
/* Intermediate screens - reduce sizes to prevent overflow */
@media (max-width: 1400px) {
.product-meta-column {
padding: 4rem 3rem 3rem 3rem;
}
.product-gallery-column {
padding: 3rem;
}
.product-title {
font-size: 52px;
}
.product-price-display {
font-size: 28px;
}
.color-thumbnail {
width: 85px;
height: 85px;
}
}
@media (max-width: 1200px) {
.product-meta-column {
padding: 3.5rem 2.5rem 2.5rem 2.5rem;
}
.product-gallery-column {
padding: 2.5rem;
}
.product-title {
font-size: 48px;
}
.product-price-display {
font-size: 26px;
}
.color-thumbnail {
width: 75px;
height: 75px;
}
.product-gallery-container {
max-width: 500px;
}
}
@media (max-width: 1024px) {
.product-single-grid {
grid-template-columns: 1fr;
max-height: none;
height: auto;
}
.product-gallery-column {
position: relative;
height: auto;
max-height: 600px;
min-height: 400px;
order: 2;
}
.product-meta-column {
max-width: 100%;
width: 100%;
margin-left: auto;
margin-right: auto;
order: 1;
padding: 3rem 2rem;
}
.product-title {
font-size: 48px;
}
}
@media (max-width: 768px) {
.product-meta-column,
.product-gallery-column,
.product-information-block,
.related-products-block,
.contact-form-block {
padding: 2rem 1.5rem;
}
.product-title {
font-size: 36px;
}
.product-price-display {
font-size: 24px;
}
.product-controls-row {
flex-direction: column;
gap: 1.5rem;
}
.product-size-selector {
width: 100%;
}
.beava-contact-form .form-row {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.product-title {
font-size: 28px;
}
.product-color-thumbnails {
gap: 0.5rem;
}
.color-thumbnail {
width: 60px;
height: 60px;
}
.size-pill {
padding: 0.5rem 1rem;
min-width: 60px;
font-size: 14px;
}
}
/* ==========================================================================
WooCommerce Product Grid - Match Carousel Design
========================================================================== */
/* Main product grid container */
ul.products,
.woocommerce ul.products,
.wp-block-woocommerce-product-collection .wc-block-grid__products {
display: grid;
grid-template-columns: repeat(4, minmax(220px, 1fr));
gap: 16px;
list-style: none;
margin: 0 auto;
padding: 0;
justify-content: center;
max-width: 1200px;
}
/* Individual product list items */
ul.products li.product,
.woocommerce ul.products li.product,
.wp-block-woocommerce-product-collection .wc-block-grid__product {
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
/* Product card within li - flexible dimensions */
ul.products li.product .product-card,
.woocommerce ul.products li.product .product-card {
width: 100%;
max-width: 100%;
min-height: auto;
background: transparent;
border: none;
box-shadow: none;
overflow: visible;
}
/* Product image container - flexible */
ul.products .product-card .product-thumb,
.woocommerce ul.products .product-card .product-thumb {
width: 100%;
height: 300px;
padding: 0;
margin: 0;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: #f8f8f8;
}
/* Product images - show at natural size, centered with gray background visible */
ul.products .product-card .product-thumb img,
ul.products .product-card .product-card-image,
.woocommerce ul.products .product-card .product-thumb img,
.woocommerce ul.products .product-card .product-card-image {
width: auto !important;
height: auto !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important;
object-position: center !important;
display: block;
}
/* Product meta container */
ul.products .product-card .product-meta,
.woocommerce ul.products .product-card .product-meta {
padding: 16px 0;
width: 100%;
display: flex;
flex-direction: column;
gap: 6px;
text-align: left !important;
align-items: flex-start !important;
}
/* Product title */
ul.products .product-card .product-title,
.woocommerce ul.products .product-card .product-title {
font-size: 18px !important;
font-weight: 600;
margin: 0 0 4px;
line-height: 1.3;
text-align: left !important;
width: 100%;
}
ul.products .product-card .product-title a,
.woocommerce ul.products .product-card .product-title a {
text-align: left !important;
display: block;
width: 100%;
}
/* Category label */
ul.products .product-card .product-category-label,
.woocommerce ul.products .product-card .product-category-label {
font-size: 13px !important;
color: #999;
margin: 0 0 6px;
text-align: left !important;
width: 100%;
}
/* Color count */
ul.products .product-card .product-color-count,
.woocommerce ul.products .product-card .product-color-count {
font-size: 14px !important;
color: #999;
text-align: left !important;
width: 100%;
}
ul.products .product-card .product-color-info,
.woocommerce ul.products .product-card .product-color-info {
width: 100%;
text-align: left !important;
}
/* Color swatches */
ul.products .product-card-swatches,
.woocommerce ul.products .product-card-swatches {
display: flex;
gap: 8px;
padding: 0;
margin-top: 8px;
width: 100%;
flex-wrap: wrap;
}
ul.products .product-card-swatch,
.woocommerce ul.products .product-card-swatch {
width: 24px;
height: 24px;
border: 2px solid rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 0;
cursor: pointer;
transition: all 0.25s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
ul.products .product-card-swatch:hover,
.woocommerce ul.products .product-card-swatch:hover {
transform: scale(1.2);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
/* Tablet: 3 columns (exclude beavav2-category-grid which has its own responsive rules) */
@media (max-width: 1024px) {
ul.products:not(.beavav2-category-grid),
.woocommerce ul.products:not(.beavav2-category-grid),
.wp-block-woocommerce-product-collection .wc-block-grid__products {
grid-template-columns: repeat(3, minmax(180px, 1fr));
max-width: 100%;
}
}
/* Small tablet: 2 columns */
@media (max-width: 768px) {
ul.products:not(.beavav2-category-grid),
.woocommerce ul.products:not(.beavav2-category-grid),
.wp-block-woocommerce-product-collection .wc-block-grid__products {
grid-template-columns: repeat(2, minmax(150px, 1fr));
max-width: 100%;
}
}
/* Mobile: 1 column */
@media (max-width: 480px) {
ul.products:not(.beavav2-category-grid),
.woocommerce ul.products:not(.beavav2-category-grid),
.wp-block-woocommerce-product-collection .wc-block-grid__products {
grid-template-columns: 1fr;
max-width: 100%;
justify-content: start;
}
}
/* Responsive grid for beavav2-category-grid */
@media (max-width: 1024px) {
.beavav2-grid-wrap .beavav2-category-grid[data-beava-preserve-grid="1"],
.site-main ul.products.beavav2-category-grid[data-beava-preserve-grid="1"] {
grid-template-columns: repeat(3, 1fr) !important;
max-width: 100% !important;
width: 100% !important;
}
}
@media (max-width: 768px) {
.beavav2-grid-wrap .beavav2-category-grid[data-beava-preserve-grid="1"],
.site-main ul.products.beavav2-category-grid[data-beava-preserve-grid="1"] {
grid-template-columns: repeat(2, 1fr) !important;
max-width: 100% !important;
width: 100% !important;
}
}
@media (max-width: 480px) {
.beavav2-grid-wrap .beavav2-category-grid[data-beava-preserve-grid="1"],
.beavav2-category-grid.products[data-beava-preserve-grid="1"],
.site-main ul.products.beavav2-category-grid[data-beava-preserve-grid="1"] {
display: grid !important;
grid-template-columns: 1fr !important;
justify-content: start !important;
gap: 1.5rem !important;
max-width: 100% !important;
width: 100% !important;
margin: 0 !important;
}
/* Full-width cards on mobile */
.beavav2-category-grid[data-beava-preserve-grid="1"] .product-card,
.beavav2-category-grid[data-beava-preserve-grid="1"] > li .product-card,
.beavav2-category-grid[data-beava-preserve-grid="1"] li.product .product-card {
width: 100% !important;
max-width: 100% !important;
}
/* Product items full width */
.beavav2-category-grid[data-beava-preserve-grid="1"] > li,
.beavav2-category-grid[data-beava-preserve-grid="1"] li.product {
width: 100% !important;
max-width: 100% !important;
}
}
/* ============================================
Fixed-Size Product Cards - Consistent Layout
============================================ */
/* Image container for all product cards */
.product-card .product-link,
.product-card > a:first-child,
ul.products .product-card .product-link,
.wc-block-grid__product .product-card .product-link {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 300px;
background: #f8f8f8;
}
/* Images at natural size, centered with gray background */
/* Excludes carousel cards which use their own 100%/100% sizing */
.product-card .product-link img,
.product-card > a:first-child img,
ul.products .product-card .product-link img,
.wc-block-grid__product .product-card .product-link img,
.product-card .product-image img,
.product-card .product-image-large img {
width: auto !important;
height: auto !important;
max-width: 100% !important;
max-height: 300px !important;
display: block;
margin: 0 auto;
}
/* Carousel cards: override the above so images fill the container */
.product-carousel .product-card .product-link img,
.product-carousel .product-card > a:first-child img,
.product-carousel-section .product-card .product-link img,
.product-carousel-section .product-card > a:first-child img {
width: 100% !important;
height: 100% !important;
max-height: none !important;
margin: 0 !important;
}
/* Product meta - use CSS Grid for fixed-position fields */
.product-card .product-meta,
.product-carousel .product-card .product-meta,
.product-carousel-section .product-card .product-meta {
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
flex: 0 0 auto !important;
padding: 12px 8px !important;
align-items: start;
background: #fff !important;
}
/* Product title - row 1 */
.product-card .product-meta .product-title {
margin: 0 !important;
min-height: auto;
}
.product-card .product-meta .product-category-label {
margin: 0 !important;
}
.product-card .product-meta .product-category-label:empty,
.product-card .product-meta .product-category-placeholder {
display: none;
}
.product-card .product-meta .product-color-count {
margin: 0 !important;
}
.product-card .product-meta .product-color-count:empty,
.product-card .product-meta .product-color-placeholder {
display: none;
}
.product-card .product-meta .product-color-preview {
margin: 0 !important;
flex-wrap: wrap;
gap: 5px;
}
.product-card .product-meta .product-color-preview:empty,
.product-card .product-meta .product-swatches-placeholder {
display: none;
}
.product-card .product-meta .price,
.product-card .product-meta .woocommerce-Price-amount {
margin: 0 !important;
}
.product-card .product-meta > .price ~ .price {
display: none;
}
/* ============================================
Checkout & Cart Page Styling
============================================ */
/* Checkout page background */
.woocommerce-checkout,
.woocommerce-cart {
background-color: #ffffff;
min-height: 100vh;
}
/* Page header styling */
.woocommerce-checkout .entry-header,
.woocommerce-cart .entry-header {
background-color: #ffffff;
padding: 3rem 0 2rem;
text-align: center;
}
.woocommerce-checkout .entry-title,
.woocommerce-cart .entry-title {
font-size: clamp(2rem, 4vw, 2.5rem);
font-weight: 500;
color: #1d2327;
margin: 0;
}
/* Main checkout form container */
.woocommerce-checkout .woocommerce,
.woocommerce-cart .woocommerce {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem 4rem;
}
/* Checkout columns layout */
.woocommerce-checkout #customer_details {
background: #ffffff;
border-radius: 8px;
padding: 2rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review {
background: #ffffff;
border-radius: 8px;
padding: 2rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
margin-top: 2rem;
}
/* Form fields */
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce-cart .form-row input.input-text {
border: 1px solid #ddd;
border-radius: 4px;
padding: 0.75rem 1rem;
font-size: 1rem;
width: 100%;
background: #ffffff;
}
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus {
border-color: #1d2327;
outline: none;
}
/* Labels */
.woocommerce-checkout label,
.woocommerce-cart label {
font-weight: 500;
color: #1d2327;
margin-bottom: 0.5rem;
display: block;
}
/* Order summary */
.woocommerce-checkout-review-order {
background: #f8f8f8;
border-radius: 8px;
padding: 1.5rem;
}
.woocommerce-checkout-review-order-table {
width: 100%;
border-collapse: collapse;
}
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
padding: 1rem 0;
border-bottom: 1px solid #e8e8e8;
}
.woocommerce-checkout-review-order-table .cart-subtotal th,
.woocommerce-checkout-review-order-table .cart-subtotal td,
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
font-weight: 500;
}
.woocommerce-checkout-review-order-table .order-total {
font-size: 1.25rem;
border-top: 2px solid #1d2327;
}
/* Product thumbnails in order summary */
.woocommerce-checkout-review-order-table .product-thumbnail {
width: 60px;
height: 60px;
object-fit: cover;
border-radius: 4px;
}
/* Cart table */
.woocommerce-cart-form {
background: #ffffff;
border-radius: 8px;
padding: 2rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
margin-bottom: 2rem;
}
.woocommerce-cart-form__contents {
width: 100%;
border-collapse: collapse;
}
.woocommerce-cart-form__contents th,
.woocommerce-cart-form__contents td {
padding: 1.5rem 1rem;
border-bottom: 1px solid #e8e8e8;
text-align: left;
}
.woocommerce-cart-form__contents thead th {
font-weight: 500;
color: #1d2327;
border-bottom: 2px solid #1d2327;
}
.woocommerce-cart-form__contents .product-thumbnail {
width: 84px;
min-height: 118px;
display: flex;
align-items: center;
justify-content: center;
}
.woocommerce-cart-form__contents .product-thumbnail img {
width: 100%;
height: auto;
max-height: 118px;
object-fit: contain;
border-radius: 4px;
}
/* WooCommerce Blocks cart and checkout thumbnail styles - Force consistent sizing */
/* Only target cart and checkout pages - Ultra specific selectors */
.woocommerce-cart table.wc-block-cart-items tbody tr.wc-block-cart-items__row td.wc-block-cart-item__image,
.woocommerce-checkout table.wc-block-cart-items tbody tr.wc-block-cart-items__row td.wc-block-cart-item__image,
body.woocommerce-cart td.wc-block-cart-item__image,
body.woocommerce-checkout td.wc-block-cart-item__image {
width: 84px !important;
min-width: 84px !important;
max-width: 84px !important;
height: 118px !important;
min-height: 118px !important;
max-height: 118px !important;
display: table-cell !important;
vertical-align: middle !important;
text-align: center !important;
overflow: hidden !important;
flex-shrink: 0 !important;
aspect-ratio: unset !important;
padding: 8px !important;
box-sizing: border-box !important;
}
.woocommerce-cart table.wc-block-cart-items tbody tr.wc-block-cart-items__row td.wc-block-cart-item__image a,
.woocommerce-checkout table.wc-block-cart-items tbody tr.wc-block-cart-items__row td.wc-block-cart-item__image a,
body.woocommerce-cart td.wc-block-cart-item__image a,
body.woocommerce-checkout td.wc-block-cart-item__image a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
max-height: 102px !important;
}
.woocommerce-cart table.wc-block-cart-items tbody tr.wc-block-cart-items__row td.wc-block-cart-item__image img,
.woocommerce-checkout table.wc-block-cart-items tbody tr.wc-block-cart-items__row td.wc-block-cart-item__image img,
body.woocommerce-cart td.wc-block-cart-item__image img,
body.woocommerce-checkout td.wc-block-cart-item__image img {
width: auto !important;
height: auto !important;
max-width: 68px !important;
max-height: 102px !important;
min-height: unset !important;
min-width: unset !important;
aspect-ratio: unset !important;
object-fit: contain !important;
border-radius: 4px !important;
}
.woocommerce-cart-form__contents .product-name a {
color: #1d2327;
text-decoration: none;
font-weight: 500;
}
.woocommerce-cart-form__contents .product-name a:hover {
text-decoration: underline;
}
/* Quantity input */
.woocommerce-cart-form__contents .quantity input.qty {
width: 80px;
padding: 0.5rem;
border: 1px solid #ddd;
border-radius: 4px;
text-align: center;
}
/* Remove button */
.woocommerce-cart-form__contents .product-remove a {
color: #dc3232;
text-decoration: none;
font-size: 1.5rem;
font-weight: bold;
}
.woocommerce-cart-form__contents .product-remove a:hover {
color: #a00;
}
/* Update cart button */
.woocommerce-cart-form button[name="update_cart"] {
background: #1d2327;
color: #ffffff;
padding: 0.75rem 2rem;
border: none;
border-radius: 50px;
cursor: pointer;
font-size: 1rem;
font-weight: 500;
transition: all 0.3s ease;
}
.woocommerce-cart-form button[name="update_cart"]:hover {
background: #000000;
transform: translateY(-2px);
}
/* Cart totals */
.cart-collaterals {
background: #ffffff;
border-radius: 8px;
padding: 2rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.cart-collaterals .cart_totals h2 {
font-size: 1.5rem;
font-weight: 500;
margin-bottom: 1.5rem;
}
.cart-collaterals .shop_table {
width: 100%;
border-collapse: collapse;
}
.cart-collaterals .shop_table th,
.cart-collaterals .shop_table td {
padding: 1rem 0;
border-bottom: 1px solid #e8e8e8;
}
.cart-collaterals .order-total {
font-size: 1.25rem;
font-weight: 500;
border-top: 2px solid #1d2327;
}
/* Proceed to checkout button */
.wc-proceed-to-checkout .checkout-button {
display: block;
width: 100%;
background: #1d2327;
color: #ffffff;
padding: 1rem 2rem;
border: none;
border-radius: 50px;
cursor: pointer;
font-size: 1.125rem;
font-weight: 500;
text-align: center;
text-decoration: none;
transition: all 0.3s ease;
margin-top: 1.5rem;
}
.wc-proceed-to-checkout .checkout-button:hover {
background: #000000;
transform: translateY(-2px);
}
/* Place order button */
.woocommerce-checkout #place_order {
display: block;
width: 100%;
background: #1d2327;
color: #ffffff;
padding: 1rem 2rem;
border: none;
border-radius: 50px;
cursor: pointer;
font-size: 1.125rem;
font-weight: 500;
text-align: center;
transition: all 0.3s ease;
margin-top: 1.5rem;
}
.woocommerce-checkout #place_order:hover {
background: #000000;
transform: translateY(-2px);
}
/* Payment methods */
.woocommerce-checkout-payment {
background: #f8f8f8;
border-radius: 8px;
padding: 1.5rem;
margin-top: 2rem;
}
.woocommerce-checkout-payment ul.payment_methods {
list-style: none;
padding: 0;
margin: 0;
}
.woocommerce-checkout-payment ul.payment_methods li {
margin-bottom: 1rem;
}
.woocommerce-checkout-payment ul.payment_methods input[type="radio"] {
margin-right: 0.5rem;
}
.woocommerce-checkout-payment ul.payment_methods label {
font-weight: 500;
cursor: pointer;
}
/* Mobile responsive */
@media (max-width: 768px) {
.woocommerce-checkout .woocommerce,
.woocommerce-cart .woocommerce {
padding: 0 1rem 2rem;
}
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review,
.woocommerce-cart-form,
.cart-collaterals {
padding: 1.5rem;
}
.woocommerce-cart-form__contents th,
.woocommerce-cart-form__contents td {
padding: 1rem 0.5rem;
font-size: 0.9rem;
}
.woocommerce-cart-form__contents .product-thumbnail {
width: 60px;
min-height: 84px;
}
.woocommerce-cart-form__contents .product-thumbnail img {
width: 100%;
max-height: 84px;
}
/* Stack cart table on mobile */
.woocommerce-cart-form__contents thead {
display: none;
}
.woocommerce-cart-form__contents tbody tr {
display: block;
margin-bottom: 2rem;
border: 1px solid #e8e8e8;
border-radius: 8px;
padding: 1rem;
}
.woocommerce-cart-form__contents tbody td {
display: block;
text-align: left;
border: none;
padding: 0.5rem 0;
}
.woocommerce-cart-form__contents tbody td::before {
content: attr(data-title);
font-weight: 500;
display: inline-block;
margin-right: 0.5rem;
}
}
/* ========================================
FINAL OVERRIDE: Beava Category Grid
This section MUST remain at the end of the stylesheet.
It resets any conflicting WooCommerce flex/float styles
to ensure the CSS Grid displays correctly.
======================================== */
/* Grid wrapper - ensure it's wide enough for 4 x 280px cards + gaps */
.beavav2-grid-wrap {
width: 100% !important;
max-width: 1400px !important;
margin: 0 auto !important;
padding: 0 1rem !important;
box-sizing: border-box !important;
}
ul.products.beavav2-category-grid[data-beava-preserve-grid="1"],
.beavav2-grid-wrap ul.beavav2-category-grid[data-beava-preserve-grid="1"],
.product-category-archive ul.beavav2-category-grid[data-beava-preserve-grid="1"],
/* Add .woocommerce and .woocommerce-page body class for higher specificity */
.woocommerce ul.products.beavav2-category-grid[data-beava-preserve-grid="1"],
.woocommerce-page ul.products.beavav2-category-grid[data-beava-preserve-grid="1"] {
display: grid !important;
/* Use flexible columns: 4 columns that fill available space */
grid-template-columns: repeat(4, 1fr) !important;
gap: 16px !important;
justify-content: start !important;
justify-items: stretch !important;
align-items: start !important;
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
/* Nullify any flex properties */
flex-wrap: unset !important;
flex-direction: unset !important;
}
/* Reset ALL product items including nth-child WooCommerce clearfixes */
ul.products.beavav2-category-grid[data-beava-preserve-grid="1"] > li,
ul.products.beavav2-category-grid[data-beava-preserve-grid="1"] > li.product,
ul.products.beavav2-category-grid[data-beava-preserve-grid="1"] li.product:nth-child(n),
.beavav2-grid-wrap ul.beavav2-category-grid[data-beava-preserve-grid="1"] > li.product,
/* Override WooCommerce columns-4 specific styles */
ul.products.columns-4.beavav2-category-grid[data-beava-preserve-grid="1"] li.product,
ul.products.columns-4.beavav2-category-grid[data-beava-preserve-grid="1"] li.product:nth-child(4n+1),
ul.products.columns-4.beavav2-category-grid[data-beava-preserve-grid="1"] li.product:nth-child(4n),
ul.products.columns-4.beavav2-category-grid li.product,
/* Override WooCommerce .first and .last classes that use clear:both and margin-right:0 */
.woocommerce ul.products.beavav2-category-grid li.first,
.woocommerce ul.products.beavav2-category-grid li.last,
.woocommerce-page ul.products.beavav2-category-grid li.first,
.woocommerce-page ul.products.beavav2-category-grid li.last,
ul.products.beavav2-category-grid li.product.first,
ul.products.beavav2-category-grid li.product.last,
/* Main WooCommerce li.product override with body class for maximum specificity */
.woocommerce ul.products.beavav2-category-grid li.product,
.woocommerce-page ul.products.beavav2-category-grid li.product {
/* Reset all sizing - let CSS Grid control placement */
width: auto !important;
max-width: none !important;
min-width: 0 !important;
flex: none !important;
float: none !important;
clear: none !important;
margin: 0 !important;
margin-right: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
list-style: none !important;
}
/* Responsive overrides - must also be at end */
@media (max-width: 1024px) {
ul.products.beavav2-category-grid[data-beava-preserve-grid="1"],
.beavav2-grid-wrap ul.beavav2-category-grid[data-beava-preserve-grid="1"],
.product-category-archive ul.beavav2-category-grid[data-beava-preserve-grid="1"] {
grid-template-columns: repeat(3, 1fr) !important;
max-width: 100% !important;
width: 100% !important;
}
}
@media (max-width: 768px) {
ul.products.beavav2-category-grid[data-beava-preserve-grid="1"],
.beavav2-grid-wrap ul.beavav2-category-grid[data-beava-preserve-grid="1"],
.product-category-archive ul.beavav2-category-grid[data-beava-preserve-grid="1"] {
grid-template-columns: repeat(2, 1fr) !important;
max-width: 100% !important;
width: 100% !important;
}
}
@media (max-width: 480px) {
ul.products.beavav2-category-grid[data-beava-preserve-grid="1"],
.beavav2-grid-wrap ul.beavav2-category-grid[data-beava-preserve-grid="1"],
.product-category-archive ul.beavav2-category-grid[data-beava-preserve-grid="1"] {
grid-template-columns: 1fr !important;
max-width: 100% !important;
width: 100% !important;
margin: 0 !important;
}
}
/* ========================================
WooCommerce Page Header Banner
Pink background with centered h1 title
Used on Cart, Checkout, Thank You pages
======================================== */
.wc-page-header {
background-color: #fcdde2;
width: 100%;
margin-left: 0;
margin-right: 0;
margin-top: -6rem;
padding: 12rem 2rem 4rem;
margin-bottom: 3rem;
text-align: center;
}
.wc-page-title {
font-family: var(--font-primary);
font-size: var(--font-size-h1);
font-weight: 500;
color: var(--color-text-dark);
margin: 0;
line-height: 1.1;
}
/* Hide duplicate WooCommerce page titles (cart/checkout only, NOT single product) */
/* Hide entry-header on cart/checkout pages when pink banner is present */
.wc-page-header + .site-main .entry-header,
.wc-page-header ~ .site-main .entry-header,
body.woocommerce-cart .entry-header,
body.woocommerce-checkout .entry-header,
body.woocommerce-js .entry-header,
.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart > h1,
.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart > h2,
.woocommerce-checkout .wp-block-woocommerce-checkout > h1,
.woocommerce-checkout .wp-block-woocommerce-checkout > h2,
.woocommerce-cart .entry-title:not(.product_title),
.woocommerce-checkout .entry-title:not(.product_title),
body.woocommerce-cart .site-main h1.entry-title,
body.woocommerce-checkout .site-main h1.entry-title {
display: none !important;
}
/* WooCommerce buttons - black pillbox style */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-button.wp-element-button,
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button {
background-color: var(--color-black, #000000) !important;
color: var(--color-white, #ffffff) !important;
border: none !important;
border-radius: var(--radius-full, 50px) !important;
padding: 1rem 2.5rem !important;
font-family: var(--font-primary) !important;
font-size: 1rem !important;
font-weight: 500 !important;
text-transform: none !important;
cursor: pointer !important;
transition: opacity 0.2s ease !important;
text-decoration: none !important;
display: inline-block !important;
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-button.wp-element-button:hover,
.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover {
background-color: var(--color-black, #000000) !important;
color: var(--color-white, #ffffff) !important;
opacity: 0.85 !important;
}
/* Tablet responsive */
@media (max-width: 1024px) {
.wc-page-header {
margin-top: -1.5rem;
padding: 10rem 2rem 3rem;
margin-bottom: 2.5rem;
}
.wc-page-title {
font-size: 56px;
}
}
/* Mobile responsive - ensure logo doesn't overlap with page title */
@media (max-width: 768px) {
.wc-page-header {
margin-top: 0;
padding: 12rem 1.5rem 2rem;
margin-bottom: 2rem;
}
.wc-page-title {
font-size: 36px;
}
/* Ensure header is positioned correctly on cart/checkout */
body.woocommerce-cart .site-header,
body.woocommerce-checkout .site-header {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 10001;
background: transparent;
}
/* Make site branding smaller on cart/checkout mobile */
body.woocommerce-cart .site-branding,
body.woocommerce-checkout .site-branding {
padding: 1rem;
max-width: 120px;
}
body.woocommerce-cart .site-branding img,
body.woocommerce-checkout .site-branding img {
max-height: 60px;
width: auto;
}
/* Constrain text logo on mobile cart/checkout */
body.woocommerce-cart .site-branding .site-title,
body.woocommerce-checkout .site-branding .site-title {
flex-direction: column;
align-items: flex-start;
gap: 0;
}
body.woocommerce-cart .site-branding .logo-text,
body.woocommerce-checkout .site-branding .logo-text {
font-size: 1.2rem;
}
body.woocommerce-cart .site-branding .logo-tagline,
body.woocommerce-checkout .site-branding .logo-tagline {
font-size: 0.5rem;
line-height: 1.1;
}
/* Adjust header actions on mobile */
body.woocommerce-cart .header-actions,
body.woocommerce-checkout .header-actions {
padding: 1rem;
gap: 1rem;
}
}
/* Hide coupon field from the bottom order summary on mobile checkout (keep summary, hide input fields) */
@media (max-width: 782px) {
/* Hide coupon in the main/bottom order summary (keep it only in sidebar/top) */
body.woocommerce-checkout .wc-block-checkout__main .wc-block-components-totals-coupon {
display: none !important;
}
}
/* Hide WooCommerce customer details phone/email icons (classic + blocks) */
.woocommerce .woocommerce-customer-details address p.woocommerce-customer-details__phone::before,
.woocommerce-customer-details address p.woocommerce-customer-details__phone::before,
body p.woocommerce-customer-details__phone::before,
p.woocommerce-customer-details__phone::before,
.woocommerce .woocommerce-customer-details address p.woocommerce-customer-details__email::before,
.woocommerce-customer-details address p.woocommerce-customer-details__email::before,
body p.woocommerce-customer-details__email::before,
p.woocommerce-customer-details__email::before,
.wc-block-order-confirmation-billing-address .wc-block-components-address-address-wrapper p::before,
.wc-block-order-confirmation-shipping-address .wc-block-components-address-address-wrapper p::before {
content: none !important;
display: none !important;
background: none !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* Hide SVG icons in WooCommerce Blocks order confirmation address sections */
.wc-block-order-confirmation-billing-address svg,
.wc-block-order-confirmation-shipping-address svg,
.wc-block-order-confirmation-billing-address .wc-block-components-address-address-wrapper svg,
.wc-block-order-confirmation-shipping-address .wc-block-components-address-address-wrapper svg,
.woocommerce-order-received .woocommerce-customer-details svg,
.woocommerce-customer-details address svg,
.woocommerce-customer-details .woocommerce-column svg {
display: none !important;
}
/* Small mobile */
@media (max-width: 480px) {
.wc-page-header {
margin-top: 0;
padding: 11rem 1rem 1.5rem;
margin-bottom: 1.5rem;
}
.wc-page-title {
font-size: 28px;
}
/* Even smaller logo on very small screens */
body.woocommerce-cart .site-branding,
body.woocommerce-checkout .site-branding {
padding: 0.75rem;
max-width: 100px;
}
body.woocommerce-cart .site-branding .logo-text,
body.woocommerce-checkout .site-branding .logo-text {
font-size: 1rem;
}
}
/* ============================================
CONTACT FORM 7 - Success/Error Messages
============================================ */
/* Success message - black text for visibility */
.wpcf7-response-output.wpcf7-mail-sent-ok,
.wpcf7 form.sent .wpcf7-response-output {
background-color: rgba(255, 255, 255, 0.95) !important;
border: 2px solid #000 !important;
color: #000 !important;
font-weight: 600 !important;
padding: 16px 20px !important;
border-radius: 8px !important;
text-align: center;
}
/* Product page form success message */
.product-contact-form-section .wpcf7-response-output.wpcf7-mail-sent-ok,
.product-contact-form-section .wpcf7 form.sent .wpcf7-response-output {
background-color: rgba(255, 255, 255, 0.95) !important;
border: 2px solid #000 !important;
color: #000 !important;
font-weight: 600 !important;
}
/* ============================================
SPACING BETWEEN HERO AND CONTENT SECTIONS
Adds breathing room after hero blocks
============================================ */
/* Add bottom margin to hero section for spacing */
.hero-section {
margin-bottom: 60px;
}
/* Also target cover hero blocks */
.wp-block-cover.beava-hero-pink,
.wp-block-cover.alignfull.beava-hero-pink {
margin-bottom: 60px;
}
/* General spacing for product carousel sections */
.product-carousel-section {
margin-top: 40px;
margin-bottom: 20px;
}
/* Mobile adjustments */
@media (max-width: 768px) {
.hero-section {
margin-bottom: 40px;
}
.wp-block-cover.beava-hero-pink,
.wp-block-cover.alignfull.beava-hero-pink {
margin-bottom: 40px;
}
.product-carousel-section {
margin-top: 30px;
margin-bottom: 10px;
}
}
/* ============================================
PRODUCT IMAGE OVERRIDE - No cropping
High specificity rule to ensure images display
at natural size with gray background
============================================ */
body .product-card img,
body .product-image img,
body .product-image-large img,
body ul.products li.product img,
body .woocommerce ul.products li.product img,
body .beavav2-category-grid .product img {
width: auto !important;
height: auto !important;
max-width: 100% !important;
max-height: 230px !important;
object-fit: contain !important;
margin: 0 auto !important;
display: block !important;
}
body .product-card .product-link,
body .product-card .woocommerce-LoopProduct-link,
body .product-card > a:first-child,
body .product-image,
body .product-image-large {
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 230px !important;
background: #f8f8f8 !important;
}
/* Remove grey background for carousel product cards - border lives on .product-thumb only */
.product-carousel .product-card > a:first-child,
.product-carousel .product-card .woocommerce-LoopProduct-link,
.product-carousel .product-image,
.product-carousel .product-image-large,
.product-carousel-section .product-card > a:first-child,
.product-carousel-section .product-card .woocommerce-LoopProduct-link,
.product-carousel-section .product-image,
.product-carousel-section .product-image-large {
background: transparent !important;
border: none !important;
min-height: unset !important;
}
/* ============================================
CART LOGO UPLOAD SECTION
Allows customers to upload logo files
============================================ */
.beavav2-logo-upload-section {
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 1.5rem;
margin-bottom: 1.5rem;
}
.logo-upload-title {
font-size: 1.1rem;
font-weight: 600;
margin: 0 0 0.5rem;
color: #333;
}
.logo-upload-description {
font-size: 0.9rem;
color: #666;
margin: 0 0 1rem;
}
/* Dropzone */
.logo-upload-dropzone {
border: 2px dashed #ccc;
border-radius: 8px;
padding: 2rem;
text-align: center;
cursor: pointer;
transition: all 0.2s ease;
background: #fafafa;
}
.logo-upload-dropzone:hover,
.logo-upload-dropzone.is-dragover {
border-color: var(--beava-primary, #e91e8c);
background: #fef5fa;
}
.logo-upload-dropzone.is-dragover {
transform: scale(1.01);
}
.dropzone-content svg {
color: #999;
margin-bottom: 0.75rem;
}
.logo-upload-dropzone:hover .dropzone-content svg,
.logo-upload-dropzone.is-dragover .dropzone-content svg {
color: var(--beava-primary, #e91e8c);
}
.dropzone-text {
font-size: 0.95rem;
color: #555;
margin: 0 0 0.25rem;
}
.dropzone-hint {
font-size: 0.8rem;
color: #999;
margin: 0;
}
/* Upload progress */
.upload-progress {
padding: 1rem 0;
}
.progress-bar {
width: 100%;
height: 8px;
background: #e0e0e0;
border-radius: 4px;
overflow: hidden;
margin-bottom: 0.5rem;
}
.progress-fill {
height: 100%;
background: var(--beava-primary, #e91e8c);
border-radius: 4px;
transition: width 0.2s ease;
}
.progress-text {
font-size: 0.85rem;
color: #666;
}
/* Uploaded logos list */
.uploaded-logos-container {
margin-top: 1rem;
}
.uploaded-logo-item {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1rem;
background: #f8f8f8;
border-radius: 6px;
margin-bottom: 0.75rem;
position: relative;
}
.uploaded-logo-item:last-child {
margin-bottom: 0;
}
.logo-preview {
width: 60px;
height: 60px;
flex-shrink: 0;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.logo-preview img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.logo-info {
flex: 1;
min-width: 0;
}
.logo-filename {
display: block;
font-size: 0.9rem;
font-weight: 500;
color: #333;
word-break: break-all;
margin-bottom: 0.5rem;
}
.logo-products {
font-size: 0.85rem;
margin-top: 0.5rem;
}
.logo-products-label {
display: block;
color: #666;
margin-bottom: 0.4rem;
font-size: 0.85rem;
}
.logo-product-checkboxes {
list-style: none;
margin: 0;
padding: 0;
border: 1px solid #ccc;
border-radius: 4px;
background: #fff;
max-height: 140px;
overflow-y: auto;
}
.logo-product-checkboxes li {
border-bottom: 1px solid #eee;
}
.logo-product-checkboxes li:last-child {
border-bottom: none;
}
.logo-product-checkboxes li label {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.6rem;
cursor: pointer;
font-size: 0.85rem;
color: #333;
transition: background 0.15s;
}
.logo-product-checkboxes li label:hover {
background: #f5f5f5;
}
.logo-product-checkboxes li label input[type="checkbox"] {
width: auto;
margin: 0;
flex-shrink: 0;
cursor: pointer;
}
.logo-product-checkboxes li label input[type="checkbox"]:checked + span {
font-weight: 600;
color: #1a1a1a;
}
.logo-remove-btn {
position: absolute;
top: 0.5rem;
right: 0.5rem;
background: transparent;
border: none;
padding: 0.25rem;
cursor: pointer;
color: #999;
transition: color 0.2s ease;
line-height: 1;
}
.logo-remove-btn:hover {
color: #e91e8c;
}
/* Error message */
.logo-upload-error {
background: #fee;
border: 1px solid #fcc;
color: #c00;
padding: 0.75rem 1rem;
border-radius: 4px;
margin-top: 0.75rem;
font-size: 0.9rem;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.beavav2-logo-upload-section {
padding: 1rem;
}
.logo-upload-dropzone {
padding: 1.5rem 1rem;
}
.uploaded-logo-item {
flex-wrap: wrap;
}
.logo-info {
flex-basis: calc(100% - 76px);
}
.logo-remove-btn {
top: 0.75rem;
right: 0.75rem;
}
}
/* ============================================
CHECKOUT LOGO INDICATOR
Shows uploaded logos on checkout page
============================================ */
.beavav2-checkout-logo-indicator {
display: flex;
align-items: flex-start;
gap: 12px;
background: linear-gradient(135deg, #fef5fa 0%, #fff5f9 100%);
border: 1px solid #f8d7e8;
border-radius: 8px;
padding: 14px 16px;
margin-top: 16px;
}
.checkout-logo-icon {
flex-shrink: 0;
width: 40px;
height: 40px;
background: var(--beava-primary, #e91e8c);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.checkout-logo-icon svg {
color: #fff;
width: 20px;
height: 20px;
}
.checkout-logo-text {
flex: 1;
min-width: 0;
}
.checkout-logo-title {
display: block;
font-weight: 600;
font-size: 0.95rem;
color: #333;
margin-bottom: 2px;
}
.checkout-logo-subtitle {
display: block;
font-size: 0.8rem;
color: #666;
}
.checkout-logo-thumbs {
display: flex;
gap: 6px;
flex-shrink: 0;
}
.checkout-logo-thumb {
width: 40px;
height: 40px;
object-fit: cover;
border-radius: 4px;
border: 1px solid #e0e0e0;
background: #fff;
}
@media (max-width: 480px) {
.beavav2-checkout-logo-indicator {
flex-wrap: wrap;
}
.checkout-logo-thumbs {
width: 100%;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid #f0d0e0;
}
}
/* ========================================
Static Page Styles (Privacy Policy, etc.)
======================================== */
/*
* Static page styling (Privacy Policy, Terms, etc.)
* Uses page template class to target only specific pages
*/
/* Pages using the Privacy Policy template */
body.page-template-privacy-policy .site-header {
position: relative;
background: var(--color-primary);
}
body.page-template-privacy-policy .site-header .main-navigation a,
body.page-template-privacy-policy .site-header .cart-icon,
body.page-template-privacy-policy .site-header .language-switcher a {
color: #000;
}
body.page-template-privacy-policy .site-header .site-branding img {
filter: none;
}
/* Page content styling for Privacy Policy template */
body.page-template-privacy-policy .site-main {
padding-top: 3rem;
padding-bottom: 4rem;
}
body.page-template-privacy-policy .entry-header {
max-width: 800px;
margin: 0 auto 2rem;
padding: 0 2rem;
}
body.page-template-privacy-policy .entry-title {
font-size: 2.5rem;
font-weight: 700;
color: var(--color-text-dark);
margin-bottom: 1rem;
}
body.page-template-privacy-policy .entry-content {
max-width: 800px;
margin: 0 auto;
padding: 0 2rem;
font-size: 1rem;
line-height: 1.8;
color: #333;
}
body.page-template-privacy-policy .entry-content h1 {
font-size: 2rem;
font-weight: 700;
margin: 2rem 0 1rem;
color: var(--color-text-dark);
}
body.page-template-privacy-policy .entry-content h2 {
font-size: 1.5rem;
font-weight: 700;
margin: 2rem 0 1rem;
color: var(--color-text-dark);
border-bottom: 2px solid var(--color-primary);
padding-bottom: 0.5rem;
}
body.page-template-privacy-policy .entry-content h3 {
font-size: 1.25rem;
font-weight: 600;
margin: 1.5rem 0 0.75rem;
color: var(--color-text-dark);
}
body.page-template-privacy-policy .entry-content p {
margin-bottom: 1rem;
}
body.page-template-privacy-policy .entry-content ul,
body.page-template-privacy-policy .entry-content ol {
margin: 1rem 0 1.5rem 1.5rem;
padding: 0;
}
body.page-template-privacy-policy .entry-content li {
margin-bottom: 0.5rem;
}
body.page-template-privacy-policy .entry-content strong {
font-weight: 600;
color: var(--color-text-dark);
}
body.page-template-privacy-policy .entry-content a {
color: var(--color-primary);
text-decoration: underline;
}
body.page-template-privacy-policy .entry-content a:hover {
color: #d4707f;
}
body.page-template-privacy-policy .entry-content hr {
border: none;
border-top: 2px solid var(--color-primary);
margin: 3rem 0;
}
body.page-template-privacy-policy .entry-content em {
color: #666;
}
/* Mobile adjustments for static pages */
@media (max-width: 768px) {
body.page-template-privacy-policy .entry-title {
font-size: 1.75rem;
}
body.page-template-privacy-policy .entry-content h2 {
font-size: 1.25rem;
}
body.page-template-privacy-policy .entry-content {
padding: 0 1rem;
}
body.page-template-privacy-policy .entry-header {
padding: 0 1rem;
}
}
/* FINAL OVERRIDE: Hide WooCommerce customer details phone/email icons (all methods) */
body.woocommerce-order-received .woocommerce .woocommerce-customer-details address p.woocommerce-customer-details__phone::before,
body .woocommerce .woocommerce-customer-details address p.woocommerce-customer-details__phone::before,
p.woocommerce-customer-details__phone::before,
body.woocommerce-order-received .woocommerce .woocommerce-customer-details address p.woocommerce-customer-details__email::before,
body .woocommerce .woocommerce-customer-details address p.woocommerce-customer-details__email::before,
p.woocommerce-customer-details__email::before {
content: none !important;
display: none !important;
background: none !important;
background-image: none !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* Hide all SVG/img icons near phone & email in order confirmation */
body.woocommerce-order-received .woocommerce-customer-details svg,
body.woocommerce-order-received .woocommerce-customer-details img.icon,
body.woocommerce-order-received .wc-block-order-confirmation-billing-address svg,
body.woocommerce-order-received .wc-block-order-confirmation-shipping-address svg {
display: none !important;
}
/* ==========================================================================
Page Loading Optimizations
========================================================================== */
/* Prevent layout shift during initial load */
body {
opacity: 0;
transition: opacity 0.3s ease-in;
}
body.loaded {
opacity: 1;
}
/* Fade in images as they load */
img {
opacity: 0;
transition: opacity 0.4s ease-in;
}
img.loaded,
img[src] {
opacity: 1;
}
/* Hero section loading state */
.wp-block-cover,
.hero-section {
min-height: 500px;
background-color: #f8f8f8;
}
/* Product cards skeleton during load */
.product-card {
min-height: 400px;
}
/* Smooth fade-in for blocks */
.wp-block-group,
.wp-block-columns,
section {
opacity: 0;
animation: fadeIn 0.5s ease-in forwards;
animation-delay: 0.1s;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Loading spinner for lazy-loaded content */
.loading-spinner {
display: inline-block;
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid var(--color-primary, #f4a6b3);
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 2rem auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* ===================================================================
WordPress Query Loop / Post Grid Block
Constrained width with flex layout and mobile responsive
=================================================================== */
.wp-block-query {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: var(--spacing-md);
padding-right: var(--spacing-md);
}
.wp-block-post-template {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
justify-content: center;
list-style: none;
padding: 0;
margin: 0;
}
/* 3 columns on desktop */
.wp-block-post-template > .wp-block-post {
flex: 0 0 calc(33.333% - 1rem);
max-width: calc(33.333% - 1rem);
box-sizing: border-box;
}
/* 2 columns on tablet */
@media (max-width: 1024px) {
.wp-block-post-template > .wp-block-post {
flex: 0 0 calc(50% - 0.75rem);
max-width: calc(50% - 0.75rem);
}
}
/* 1 column on mobile */
@media (max-width: 600px) {
.wp-block-post-template > .wp-block-post {
flex: 0 0 100%;
max-width: 100%;
}
.wp-block-query {
padding-left: var(--spacing-sm);
padding-right: var(--spacing-sm);
}
}
/* ===================================================================
CRITICAL OVERRIDE: WooCommerce Blocks Cart Thumbnails
Must be at END of stylesheet to override WC Blocks styles
=================================================================== */
body.woocommerce-cart table.wc-block-cart-items.wp-block-woocommerce-cart-line-items-block tbody tr.wc-block-cart-items__row td.wc-block-cart-item__image,
body.woocommerce-checkout table.wc-block-cart-items tbody tr.wc-block-cart-items__row td.wc-block-cart-item__image {
width: 84px !important;
min-width: 84px !important;
max-width: 84px !important;
height: 118px !important;
min-height: 118px !important;
max-height: 118px !important;
padding: 8px !important;
box-sizing: border-box !important;
vertical-align: middle !important;
text-align: center !important;
}
body.woocommerce-cart table.wc-block-cart-items tbody tr.wc-block-cart-items__row td.wc-block-cart-item__image a,
body.woocommerce-checkout table.wc-block-cart-items tbody tr.wc-block-cart-items__row td.wc-block-cart-item__image a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
}
body.woocommerce-cart table.wc-block-cart-items tbody tr.wc-block-cart-items__row td.wc-block-cart-item__image img,
body.woocommerce-checkout table.wc-block-cart-items tbody tr.wc-block-cart-items__row td.wc-block-cart-item__image img {
width: auto !important;
height: auto !important;
max-width: 68px !important;
max-height: 102px !important;
object-fit: contain !important;
border-radius: 4px !important;
}
/* Hide redundant cart totals heading (VARUKORG TOTALBELOPP / OSTOSKORI YHTEENSÄ)
— full breakdown is already shown via Alustava loppusumma below */
.wc-block-cart-totals__title,
.wp-block-woocommerce-cart-totals-block h2:first-child {
display: none !important;
}
/* Hide broken WooCommerce icon font glyphs on order received / customer details */
.woocommerce-customer-details--phone::before,
.woocommerce-customer-details--email::before {
display: none !important;
}
.woocommerce-customer-details--phone,
.woocommerce-customer-details--email {
padding-left: 0 !important;
}
/* Fix add-to-cart button loading spinner
WooCommerce injects a ::after pseudo-element using the WooCommerce icon font (\e01c)
which renders as a broken character when the font is unavailable or the button lacks
position:relative. Replace it with a clean CSS border spinner. */
.add_to_cart_button.loading,
.single_add_to_cart_button.loading {
position: relative;
padding-right: 3rem !important;
opacity: 1 !important;
}
.add_to_cart_button.loading::after,
.single_add_to_cart_button.loading::after {
font-family: inherit !important;
content: "" !important;
position: absolute;
top: 50%;
right: 1rem;
width: 1em;
height: 1em;
margin-top: -0.5em;
border: 2px solid rgba(255, 255, 255, 0.4);
border-top-color: #fff;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}