/* ========================================================================== Bloomazz — Product Detail Page ========================================================================== */ /* Breadcrumb sat with zero space above it, flush against the site header — single-product.css only ever loads on is_product() (see inc/single-product.php), so this is scoped to the PDP without a body class needed. Selector has to be `.woocommerce .woocommerce-breadcrumb`, not just `.woocommerce-breadcrumb` — WooCommerce's own woocommerce.css sets `.woocommerce .woocommerce-breadcrumb { padding: 0 }`, and itself carries a plain "woocommerce" class on every WC page, so that rule's specificity (two classes) beat a bare one-class selector here regardless of which stylesheet loaded last. */ .woocommerce .woocommerce-breadcrumb { padding: 1.5rem 20px 0; font-size: 0.82rem; color: #8a8694; } .woocommerce-breadcrumb a { color: #8a8694; transition: color 0.15s ease; } .woocommerce-breadcrumb a:hover { color: var(--bz-lavender-deep); } /* ========================================================================== Gallery + summary layout ========================================================================== */ .bz-product-hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 4vw, 4rem); max-width: var(--bz-container); margin: 0 auto; padding: 2.5rem 20px 0; align-items: flex-start; } .bz-product .onsale { background: var(--bz-blush) !important; color: var(--bz-ink) !important; font-family: var(--bz-font-body); font-size: 0.72rem !important; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; min-height: 48px; min-width: 48px; } .bz-product-gallery-wrap { position: relative; min-width: 0; margin-bottom: 0; } .bz-product-style-tag { position: absolute; top: 16px; left: 16px; } /* WooCommerce's classic (non-grid) CSS floats these at 48% width by default — this theme's layout is grid-based, so both need to fill their actual grid column instead. */ .woocommerce-product-gallery, .bz-product .summary.entry-summary { width: 100% !important; float: none !important; } .woocommerce-product-gallery { position: relative; } .woocommerce-product-gallery__wrapper { margin: 0; min-width: 0; border: 1px solid var(--bz-border); } .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image { aspect-ratio: 4 / 5; overflow: hidden; } .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image img { width: 100%; height: 100%; object-fit: cover; /* zoom.js is active on this image (wc-product-gallery-zoom support) — make that obvious with the native zoom cursor. */ cursor: zoom-in !important; } /* Thumbnails: a small, compact strip. Below the image by default (also the mobile layout); moved beside it on desktop below. */ .flex-control-thumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0 0; padding: 0; list-style: none; } .flex-control-thumbs li, .woocommerce div.product div.images .flex-control-thumbs li { width: 96px !important; } .flex-control-thumbs img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; cursor: pointer; border: 2px solid var(--bz-border); opacity: 0.9; transition: opacity 0.2s ease, border-color 0.2s ease; } .flex-control-thumbs img.flex-active, .flex-control-thumbs img:hover { opacity: 1; border-color: var(--bz-lavender); } /* Thumbnail scroll cue (up/down buttons + fade) — desktop-only, since the thumbnail column it overlays doesn't exist below 781px (that's the mobile dots above instead). Every other rule for this lives inside the @media (min-width: 781px) block further down, so without this base display:none it rendered as a plain, fully visible, unstyled pair of buttons on mobile — nothing there was hiding it, the "hidden until desktop" behaviour only existed once that media query's own display:block took over. */ .bz-gallery-thumb-nav { display: none; } /* Mobile-only slide dots — hidden until the ≤780px breakpoint below swaps them in for the thumbnail strip. */ .bz-gallery-dots { display: none; align-items: center; gap: 6px; position: absolute; left: 50%; bottom: 14px; z-index: 2; padding: 7px 10px; border-radius: 999px; background: rgba(33, 31, 46, 0.32); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transform: translateX(-50%); } .bz-gallery-dot { width: 6px; height: 6px; padding: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.55); transition: width 0.25s ease, background-color 0.25s ease; } .bz-gallery-dot.is-active { width: 18px; background: var(--bz-white); } @media (prefers-reduced-motion: reduce) { .bz-gallery-dot { transition: none; } } /* Desktop: thumbnails move to a small column on the left of the image. */ @media (min-width: 781px) { .woocommerce-product-gallery { display: flex; flex-direction: row-reverse; align-items: flex-start; gap: 0.75rem; } .woocommerce-product-gallery__wrapper { flex: 1; } /* WooCommerce's own default CSS sets its own, far more specific `.woocommerce div.product div.images .flex-control-thumbs { overflow: hidden }` (woocommerce.css) — beats a plain `.flex-control-thumbs` selector regardless of load order, so overflow-y: auto below was silently never taking effect. With 7-9 gallery images that meant everything past the ~5 that fit in 640px was simply clipped, with no scrollbar and no way to reach the rest. Matching the same selector prefix here (same fix already applied to the li rule just below) is what actually wins the cascade. */ .flex-control-thumbs, .woocommerce div.product div.images .flex-control-thumbs { flex: 0 0 96px; flex-direction: column; flex-wrap: nowrap; margin: 0; max-height: 640px; overflow-y: auto; /* The scrollbar this now needs is its own bit of clutter next to a 96px-wide thumbnail strip — .bz-gallery-thumb-nav below gives the same "there's more" cue without it. */ scrollbar-width: none; /* Firefox */ } .flex-control-thumbs::-webkit-scrollbar, .woocommerce div.product div.images .flex-control-thumbs::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ } .flex-control-thumbs li, .woocommerce div.product div.images .flex-control-thumbs li { width: 100% !important; } /* The swing tag anchors to the whole gallery wrap; shift it clear of the new thumbnail column so it still sits on the photo's corner. */ .bz-product-style-tag { left: calc(96px + 0.75rem + 16px); } /* Thumbnail scroll cue — sits directly over the thumbnail column (same 96px width/position, top-aligned with .bz-product-gallery-wrap, the nearest position:relative ancestor). A fade at whichever edge still has more photos past it, .can-scroll-up/down toggled by assets/js/product.js from the thumbnail strip's own scroll position; a plain overflow gallery has neither class, so both stay invisible and out of the way. */ .bz-gallery-thumb-nav { display: block; position: absolute; top: 0; left: 0; width: 96px; height: 640px; pointer-events: none; z-index: 3; } .bz-gallery-thumb-nav::before, .bz-gallery-thumb-nav::after { content: ""; position: absolute; left: 0; right: 0; height: 40px; opacity: 0; transition: opacity 0.2s ease; } .bz-gallery-thumb-nav::before { top: 0; background: linear-gradient(to bottom, var(--bz-white), transparent); } .bz-gallery-thumb-nav::after { bottom: 0; background: linear-gradient(to top, var(--bz-white), transparent); } .bz-gallery-thumb-nav.can-scroll-up::before, .bz-gallery-thumb-nav.can-scroll-down::after { opacity: 1; } .bz-gallery-thumb-nav-btn { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--bz-white); color: var(--bz-ink); box-shadow: 0 2px 10px rgba(33, 31, 46, 0.18); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s ease, background-color 0.15s ease, color 0.15s ease; } .bz-gallery-thumb-nav-btn--up { top: 6px; } .bz-gallery-thumb-nav-btn--down { bottom: 6px; } .bz-gallery-thumb-nav.can-scroll-up .bz-gallery-thumb-nav-btn--up, .bz-gallery-thumb-nav.can-scroll-down .bz-gallery-thumb-nav-btn--down { opacity: 1; visibility: visible; pointer-events: auto; } .bz-gallery-thumb-nav-btn:hover { background: var(--bz-lavender); color: var(--bz-white); } } @media (prefers-reduced-motion: reduce) { .bz-gallery-thumb-nav::before, .bz-gallery-thumb-nav::after, .bz-gallery-thumb-nav-btn { transition: none; } } /* ========================================================================== Summary column ========================================================================== */ .bz-product .summary { min-width: 0; padding-top: 0.5rem; /* WooCommerce's own .summary{margin-bottom:2em} default was adding space below this column on top of the hero's own bottom padding — between the two, the gap before the trust strip/tabs below was huge. */ margin-bottom: 0; } .bz-product .summary > .woocommerce-product-details__short-description, .bz-product .summary > p { color: #504c5e; line-height: 1.7; } .product_title.entry-title { font-family: var(--bz-font-display); font-size: clamp(1.9rem, 3vw, 2.5rem); font-weight: 500; margin: 0 0 0.6rem; line-height: 1.15; } .bz-pdp-urgency { display: flex; align-items: center; gap: 0.4em; color: var(--bz-blush); background: color-mix(in srgb, var(--bz-blush) 12%, transparent); font-size: 0.8rem; font-weight: 700; padding: 0.4em 0.8em; border-radius: 999px; width: fit-content; margin: 0 0 0.75rem; } .bz-pdp-meta-row { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; font-size: 0.82rem; color: #6f6b7a; margin-bottom: 0.85rem; } .bz-pdp-meta-row strong { color: var(--bz-ink); font-weight: 700; } /* WooCommerce's own per-variation stock line ("10 in stock") — not shown; out-of-stock sizes are already communicated by the disabled swatch below. */ .woocommerce-variation-availability { display: none; } .bz-pdp-rating, .woocommerce div.product .woocommerce-product-rating.bz-pdp-rating { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.35rem !important; } .bz-pdp-rating-link { font-size: 0.82rem; font-weight: 600; color: var(--bz-lavender-deep); border-bottom: 1px solid transparent; } .bz-pdp-rating-link:hover { border-color: currentColor; } .bz-pdp-rating-link--empty { color: #8a8694; } .bz-product p.price { font-family: var(--bz-font-body); font-size: 1.6rem; font-weight: 700; color: var(--bz-ink); margin: 0 0 1.1rem; } .bz-product p.price del { color: #a39fae; font-weight: 500; font-size: 0.75em; margin-right: 0.5em; } .bz-product p.price ins { text-decoration: none; color: var(--bz-blush); } .woocommerce-product-details__short-description { max-width: 48ch; margin-bottom: 1.25rem; } .woocommerce-product-details__short-description p:last-child { margin-bottom: 0; } /* Feature chips */ .bz-feature-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; margin: 0 0 1.5rem; padding: 0; } .bz-feature-chips li { background: var(--bz-linen); color: var(--bz-ink); font-size: 0.78rem; padding: 0.5em 0.9em; border-radius: 999px; } .bz-feature-chips li strong { font-weight: 700; } /* Size chart trigger */ .bz-size-chart-trigger { display: inline-flex; align-items: center; gap: 0.4em; background: none; border: 0; border-bottom: 1px solid var(--bz-ink); color: var(--bz-ink); font-family: var(--bz-font-body); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.03em; padding: 0 0 2px; margin: 0; flex-shrink: 0; cursor: pointer; } .bz-size-chart-trigger:hover { color: var(--bz-lavender-deep); border-color: var(--bz-lavender-deep); } /* Add to cart form — stacked, left-aligned: "Size: M" label on its own line, swatches directly below (not WooCommerce's default two-column label/value table layout). */ .bz-product .variations, .bz-product .variations tbody, .bz-product .variations tr { display: block; width: 100%; } .bz-product .variations { margin-bottom: 1.25rem; } .bz-product .variations td.value { display: block; width: 100%; text-align: left; padding: 0; vertical-align: top; } .bz-product .variations th.label { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; text-align: left; padding: 0; vertical-align: top; margin-bottom: 0.6rem; } .bz-product .variations th.label label { font-size: 0.82rem; font-weight: 700; text-transform: none; letter-spacing: normal; color: var(--bz-ink); } .bz-size-selected-value { font-weight: 400; } .bz-product .variations select { width: 100%; max-width: 280px; padding: 0.7em 1em; border: 1px solid var(--bz-border); border-radius: var(--bz-radius); font-family: var(--bz-font-body); background: var(--bz-white); } .woocommerce-variation-price .price { font-size: 1.3rem !important; } /* Size swatch buttons — progressively enhance the variation