/**
* Phase P3.13 / P3.13.1 - Product-card presentation, applied consistently
* across every customer-facing standard-card product grid: Shop,
* Disposable Vapes category archive, Fumot brand archive, On Sale,
* Homepage Best Sellers (reopened for this presentation update only -
* heading, query, item count and section position are untouched), and
* the single-product Related Products slider.
*
* Structural reference: DashVapes disposable-vape listing page, per the
* owner's own reference screenshots and real-browser measurements
* (2026-09-18). Reproduces observed proportions/rhythm only - no
* DashVapes markup, CSS, wording or assets are copied.
*
* P3.13.1 changes vs P3.13 (owner-reported real-browser gaps):
* - Shop/category/brand/On Sale: the permanently-visible blog
* Archives/Categories sidebar (generic WP widgets, unrelated to
* product filtering - the FUMOT filter bar and sort dropdown live in
* the content column, not the sidebar) is hidden and its column
* reclaimed to full width, so 4 columns actually get 4 columns'
* worth of space instead of computing against a 75%-wide content
* column.
* - Tightened grid gutter (16px) on both the Bootstrap archive grid and
* the Homepage Elementor grid (was 30px on each, via two different
* mechanisms) so card width and rhythm read consistently between the
* two grid engines.
* - Reduced card/thumb/text padding and margins throughout to hit the
* owner's measured target ratios (card ~1:1.6, image-stage ~52-58% of
* card height, image ~68-75% of usable card width on desktop).
* - Add to Cart is now a compact, centered, ~65% width button instead
* of full width, and is no longer hidden on tablet/mobile (previously
* hidden-md/hidden-sm/hidden-xs with no replacement action - owner
* confirmed this was not intentional and asked for a consistent
* compact action at every breakpoint).
* - Mobile (<576px): larger image proportion, smaller type/spacing,
* 2-column grid unchanged.
*
* Targets the shared card partial by its own class names (content-product3
* is the only active layout on this site), so this naturally covers every
* context that includes that partial. Does not touch any other layout
* variant or a "specialised" widget rendering a different partial.
*/
/* =========================================================================
SHOP / CATEGORY / BRAND / ON SALE - reclaim the sidebar's width
========================================================================= */
body.vpn-clean-archive .bwp-sidebar.sidebar-product {
display: none;
}
body.vpn-clean-archive .main-archive-product > .col-xl-9.col-lg-9 {
flex: 0 0 100%;
max-width: 100%;
}
/* Tighter gutter (applies to both the tablet and desktop tiers below -
spacing only, does not change column count). */
@media (min-width: 768px) {
body.vpn-clean-archive .products-list.grid {
margin-left: -8px;
margin-right: -8px;
}
body.vpn-clean-archive .products-list.grid > li {
padding-left: 8px;
padding-right: 8px;
}
}
/* P3.13.2 FIX: the 4-column override must only apply at the true desktop
tier (>=1200px). It previously started at >=992px, which also matches
the 1024px tablet breakpoint Bootstrap's own "lg" tier covers, so a
1024px viewport was incorrectly getting 4 columns instead of 3.
Desktop card width/gutter/column-count are otherwise unchanged. */
@media (min-width: 1200px) {
body.vpn-clean-archive .products-list.grid > li.col-lg-4 {
flex: 0 0 25%;
max-width: 25%;
}
}
/* Explicit tablet tier: 768-1199px (both Bootstrap's md and lg ranges
unified into one 3-column band, matching the approved desktop
4 / tablet 3 / mobile 2 responsive spec). Bootstrap's own col-md-4 and
col-lg-4 already default to 33.33% (3 columns) here - stated explicitly
so this tier's column count no longer depends on nothing else
overriding it. */
@media (min-width: 768px) and (max-width: 1199px) {
body.vpn-clean-archive .products-list.grid > li.col-lg-4,
body.vpn-clean-archive .products-list.grid > li.col-md-4 {
flex: 0 0 33.33333%;
max-width: 33.33333%;
}
}
@media (min-width: 576px) and (max-width: 767px) {
.products-list.grid > li.col-sm-4 {
flex: 0 0 50%;
max-width: 50%;
}
/* P3.13.3: at this tier (measured by the owner at ~744px) the Shop
content column had no outer breathing room beyond the theme's
default 15px container padding and no gutter tightening (the
>=768px gutter rule above does not reach down here), producing
~343px cards against a ~304px DashVapes reference at the same
width. Widening the container's own side padding to 48px and
tightening the gutter to 16px (8px each column side) brings the
card to ~308px - responsive padding, not fixed positioning, and
does not change the 2-column count. */
body.vpn-clean-archive .shop-layout-boxed > .container {
padding-left: 48px;
padding-right: 48px;
}
body.vpn-clean-archive .products-list.grid {
margin-left: -8px;
margin-right: -8px;
}
body.vpn-clean-archive .products-list.grid > li {
padding-left: 8px;
padding-right: 8px;
}
}
/* =========================================================================
HOMEPAGE BEST SELLERS - match the Shop grid's gutter
========================================================================= */
.elementor-element-97a2fc2 {
--grid-column-gap: 16px;
--grid-row-gap: 24px;
}
/* P3.13.2 FIX: this tablet-column override (2->3) was dropped by mistake
during the P3.13.1 rewrite and never re-added - restoring it now so the
Homepage widget matches the same desktop 4 / tablet 3 / mobile 2 policy
as the Shop grid. Desktop (elementor-grid-4) and mobile
(elementor-grid-mobile-2) are untouched. */
@media (max-width: 1024px) and (min-width: 768px) {
.elementor-element-97a2fc2.elementor-grid-tablet-2 .elementor-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* =========================================================================
LISTING-CARD SALE BADGE - removed (owner request): the red "-17%" style
.onsale badge inside .products-thumb > .product-lable is hidden on the
Homepage Best Sellers cards and on Shop / category / brand / On Sale
listings. Sale pricing (crossed-out regular price + sale price) is not
touched, and no WooCommerce data changes. Scoped by body class so it
cannot reach the single-product page (whose main badge is a different
element, .discount > .onsale, and whose body is .single-product); .product-lable
is position:absolute, so hiding the badge leaves no empty space.
========================================================================= */
body.vpn-clean-archive .products-thumb .product-lable .onsale,
body.home .products-thumb .product-lable .onsale {
display: none !important;
}
/* =========================================================================
CARD SHELL - border, radius, equal height, tightened padding
========================================================================= */
.products-list .product-wapper.content-product3 {
background: #fff;
/* P3.13.8: #e6e6e6 -> #e5e5e5, aligning to the approved commerce-page
border color now that the surrounding page background is gray. */
border: 1px solid #e5e5e5;
border-radius: 10px;
/* P3.13.4: 14px -> 8px. The card's own outer padding was consuming
width that would otherwise go to a bigger square image stage; the
6px freed on each side (12px total) grows the stage by the same
12px it saves from the card's own vertical padding, so total card
height is unaffected (see the image-stage comment below for the
full before/after numbers). Card OUTER width is unchanged - it is
set by the grid column math, not this internal padding. */
padding: 8px;
width: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.products-list.grid > li,
.elementor-grid-item.item-product {
display: flex;
margin-bottom: 16px;
}
.swiper-slide .product-wapper.content-product3 {
height: 100%;
}
/* =========================================================================
IMAGE STAGE - fixed square proportion, no crop.
P3.13.2: the FUMOT product photos themselves have built-in whitespace
around the device/box (measured via ImageMagick -trim -fuzz 5%: the
visible artwork fills ~82-91% of its own 1254x1254 canvas, ~87% on
average).
P3.13.4: at the measured ~744px tier (card width ~310px), 8% stage
padding plus the card's own 14px padding was still only producing
~210px of visible artwork height (~66% of card width) against a
~254-263px / 82-85% target. The stage's available width is capped by
the card's own outer padding, so this refinement removes BOTH: card
padding 14px->8px (previous edit above) and this stage padding
8%->0%. Combined effect at ~310px card width: stage content box grows
from ~280px(card interior) x 0.84(84% after old 8% padding)=235px to
~292px x 1.0(no stage padding)=292px; visible artwork
292 x ~0.87 average fill =~254px height / ~256px width (~82.6% of
310px card width) - inside the requested 250-260px / 82-85% ranges.
The card's own 14px->8px reduction (12px total vertical) is offset by
the stage growing by the same ~12px, so total card height is not
expected to increase. Object-fit:contain and the source aspect ratio
are unchanged; no image file or attachment is touched; centering is
unchanged (still flex align-items/justify-content:center).
========================================================================= */
/* P3.13.10 image breathing room: real-browser comparison showed the
FUMOT artwork touching the card edges (VAPNORY stage 255x255 at a 273px
card; the source photos fill ~92% (12K) / ~82% (50K) of their canvas
width, measured with ImageMagick -trim -fuzz 5% on 9 sample images).
Stage size, aspect ratio, card width/height and all image files are
unchanged - only the image inside the stage is scaled to 90% via 5%
stage padding (12.75px at a 255px stage -> ~229.5px image, inside the
requested 225-232px; scales proportionally at wider tiers). This is the
same 5% value the <576px mobile block below already used, so all
breakpoints now share one value. Absolutely-positioned sale badges
position from the padding box and are unaffected. */
.products-list .product-wapper.content-product3 .products-thumb {
width: 100%;
aspect-ratio: 1 / 1;
margin: 0 0 3px;
/* 5% -> 7.5% (owner request): image area 90% -> 85% of the stage,
~5.6% smaller than before. The <576px block below repeats the same
value so no breakpoint rule overrides it. */
padding: 0; /* 2026-10-04: the normalised pictures carry their own 7.5% free space (device = 85% of the square) */
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
}
.products-list .product-wapper.content-product3 .products-thumb .product-thumb-img,
.products-list .product-wapper.content-product3 .products-thumb .product-thumb-hover {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.products-list .product-wapper.content-product3 .products-thumb img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
/* =========================================================================
CONTENT COLUMN - image -> label -> title -> divider -> price -> action
========================================================================= */
.products-list .product-wapper.content-product3 .products-content {
flex: 1;
display: flex;
min-height: 0;
}
.products-list .product-wapper.content-product3 .products-content .contents {
flex: 1;
display: flex;
flex-direction: column;
width: 100%;
text-align: left; /* 2026-10-03: all card text left (a one-line name sat left, a two-line name centred) */
}
.products-list .product-wapper.content-product3 .vpn-card-label {
font-size: 11px;
line-height: 1.3;
color: #8a8a8a;
text-transform: uppercase;
letter-spacing: .04em;
margin: 0 0 3px;
min-height: 1.3em;
}
.products-list .product-wapper.content-product3 .product-title {
margin: 0 0 6px;
font-size: 14px;
line-height: 1.3;
min-height: 2.6em;
max-height: 2.6em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-word;
}
.products-list .product-wapper.content-product3 .vpn-card-divider {
width: 32px;
height: 1px;
background: #e3e3e3;
margin: 0 0 8px;
flex: none;
}
.products-list .product-wapper.content-product3 .cat-price {
margin-top: auto;
}
.products-list .product-wapper.content-product3 .cat-price .price {
display: block;
font-size: 14.5px;
margin-bottom: 6px;
}
.products-list .product-wapper.content-product3 .cat-price .price del {
color: #9a9a9a;
font-weight: 400;
margin-right: 6px;
font-size: .85em;
}
.products-list .product-wapper.content-product3 .cat-price .price ins {
text-decoration: none;
font-weight: 700;
}
/* =========================================================================
ADD TO CART - P3.13.5: removed from listing cards per owner approval
(visually inconsistent; customers open the card/title/image to view
the product and select a variation there instead). Hidden via CSS
only - the markup, the woocommerce_after_shop_loop_item_title hook
wiring and vapeoza_woocommerce_template_loop_add_to_cart() itself are
all untouched, and single-product Add to Cart (a completely separate
template/selector, confirmed by grep - no single-product file
references .btn-atc) is unaffected. margin-top:0 removes the now-empty
space so the card ends shortly below the price, and display:none
(not visibility:hidden) drops it from layout entirely so it does not
leave blank space in equal-height cards.
========================================================================= */
.products-list .product-wapper.content-product3 .btn-atc {
display: none !important;
margin-top: 0 !important;
}
.products-list .product-wapper.content-product3 .btn-atc a.button,
.products-list .product-wapper.content-product3 .btn-atc .type_variation {
width: 65%;
}
.products-list .product-wapper.content-product3 .btn-atc a.button {
display: block;
box-sizing: border-box;
padding: 8px 10px;
font-size: 12.5px;
line-height: 1.3;
border-radius: 6px;
text-align: center;
min-width: 96px;
}
.products-list .product-wapper.content-product3 .woocommerce-product-rating:empty,
.products-list .product-wapper.content-product3 .product-attribute:empty {
display: none;
}
/* =========================================================================
MOBILE (<576px) - larger image relative to card, tighter spacing,
compact type. 2 columns unchanged (.col-6 = 50%).
========================================================================= */
@media (max-width: 575px) {
.products-list.grid {
margin-left: -5px;
margin-right: -5px;
}
.products-list.grid > li {
padding-left: 5px;
padding-right: 5px;
}
.products-list .product-wapper.content-product3 {
padding: 8px;
}
.products-list .product-wapper.content-product3 .products-thumb {
/* P3.13.2: 5% stage padding (90% nominal) x ~0.87 real content
fill ~= 78% visible product width - larger than desktop's 72%
target, per the explicit "increase image relative to card
width on mobile" instruction. */
padding: 0; /* 2026-10-04: the normalised pictures carry their own 7.5% free space (device = 85% of the square) */
margin-bottom: 3px;
}
.products-list .product-wapper.content-product3 .vpn-card-label {
font-size: 10px;
margin-bottom: 2px;
}
.products-list .product-wapper.content-product3 .product-title {
font-size: 12.5px;
line-height: 1.25;
min-height: 2.5em;
max-height: 2.5em;
margin-bottom: 4px;
}
.products-list .product-wapper.content-product3 .vpn-card-divider {
width: 26px;
margin: 0 0 4px;
}
.products-list .product-wapper.content-product3 .cat-price .price {
font-size: 13px;
margin-bottom: 4px;
}
.products-list .product-wapper.content-product3 .btn-atc {
margin-top: 4px;
}
.products-list .product-wapper.content-product3 .btn-atc a.button,
.products-list .product-wapper.content-product3 .btn-atc .type_variation {
width: 72%;
}
.products-list .product-wapper.content-product3 .btn-atc a.button {
padding: 6px 8px;
font-size: 11.5px;
min-width: 0;
}
}
/* =========================================================================
MOBILE ROW GAP (<=767px, two-column tiers) - 61px -> 20px.
Measured from the cascade (no gap/row-gap is set on the grid): the space
between card rows was the SUM of two independent bottom margins -
1) theme template.css: .products-list.grid .product-wapper { margin: 0 0 45px }
2) this file: .products-list.grid > li { margin-bottom: 16px }
= 61px. Fixed by zeroing the card's own margin and letting the be the
single spacer (20px), so the two are no longer stacked. Column widths,
the 10px/16px horizontal gutter (li side padding), card padding, image,
title/price positions and equal card heights are untouched (li stays
display:flex and the card still stretches to the row's tallest card).
Scoped to body.vpn-clean-archive (Shop, category, brand, On Sale): the
Homepage grid is a different structure (theme sets .product-wapper
margin:0 there and Elementor supplies its own row gap) and is not
affected. Desktop/tablet (>=768px) spacing is intentionally unchanged.
========================================================================= */
@media (max-width: 767px) {
body.vpn-clean-archive .products-list.grid > li {
margin-bottom: 20px;
}
body.vpn-clean-archive .products-list.grid > li > .product-wapper.content-product3 {
margin-bottom: 0;
}
}
/* =========================================================================
TABLET + DESKTOP ROW GAP (>=768px) - 61px -> 20px (was 24px until the
Canvape-matched white-canvas change; 20px now at every width).
Same single-spacer model as the <=767px block above: the theme's
.products-list.grid .product-wapper { margin: 0 0 45px } is zeroed and the
margin-bottom (was 16px, stacked = 61px) is the only spacer, now 20px.
Column counts (3 tablet / 4 desktop), card widths/heights, the 16px
horizontal gutter, image stage, card padding, title/price/wishlist
positions, the page background colour and the Homepage grid are untouched.
Scoped to body.vpn-clean-archive (Shop, category, brand, On Sale) and the
real card structure li > .product-wapper.content-product3.
========================================================================= */
@media (min-width: 768px) {
body.vpn-clean-archive .products-list.grid > li {
margin-bottom: 20px;
}
body.vpn-clean-archive .products-list.grid > li > .product-wapper.content-product3 {
margin-bottom: 0;
}
}
/* =========================================================================
2026-09-30 - JNR cards: tall device images inside the square stage.
The image link () inside .product-thumb-img has no height of its own, so
"height:100%" on the image resolved to auto and a tall (about 1:2) image ran
past the square stage and was cut off at the bottom (square FUMOT images never
showed this). For JNR cards only (link points to /product/jnr-...), the link is
made to fill the stage (same 7.5% inset as the stage padding) so
object-fit:contain can fit the whole device. FUMOT cards are untouched.
========================================================================= */
.products-list .product-wapper.content-product3 .products-thumb:has(> .product-thumb-img > a[href*="/product/jnr-"]) {
position: relative;
}
.products-list .product-wapper.content-product3 .products-thumb > .product-thumb-img > a[href*="/product/jnr-"] {
position: absolute;
inset: 0; /* 2026-10-04: see above - the picture itself has the free space */
display: flex;
align-items: center;
justify-content: center;
}
.products-list .product-wapper.content-product3 .products-thumb > .product-thumb-img > a[href*="/product/jnr-"] img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
/* 2026-10-03 - "Dual flavour" mark on the FUMOT 50K 2-in-1 cards (two flavours in one device), bottom-left of the picture. */
.products-list .product-wapper .products-thumb {
position: relative;
}
.products-list .product-wapper .vpn-card-dual {
position: absolute;
left: 8px;
bottom: 8px;
z-index: 3;
padding: 3px 9px;
border: 1px solid #dfe5ea;
border-radius: 999px;
background: #fff;
font-size: 10.5px;
font-weight: 700;
line-height: 1.3;
letter-spacing: .02em;
color: #14284b;
pointer-events: none;
}
/* 2026-10-04 - the picture link fills the square stage in EVERY card (before: only the JNR rule above did; a FUMOT link shrank to the file's own width) */
.products-list .product-wapper.content-product3 .products-thumb > .product-thumb-img > a {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}