/* ===== shop.css ===== */
/* ==========================================================================
VAPORS DUBAI — SHOP PAGE (/shop/, Elementor page #7)
--------------------------------------------------------------------------
Scoped by the .vd-shop-* classes, which only exist on the shop page, so
nothing here can leak onto the homepage or single-product page.
The product grid itself is the WooCommerce [products] shortcode and is
styled by homepage.css (.vd-products), so the cards are visually identical
to the homepage shop cards. This file only dresses the shop-only blocks:
hero banner, category filter pills, confidence band and the SEO text.
========================================================================== */
/* ---- 0. Hide Astra's plain page title ------------------------------------
Astra renders its own unstyled Shop
above the
Elementor hero. Our hero already carries the (styled) page heading, so the
stock title is a visual duplicate — hide it, scoped to the shop page only. */
.page-id-7 .entry-header,
.elementor-page-7 .entry-header { display: none !important; }
/* ---- 1. Hero banner ------------------------------------------------------ */
.vd-shop-hero {
position: relative;
overflow: hidden; /* safe here: no dropdowns live in this band */
background: linear-gradient(135deg, #f4f0fe 0%, #eef1ff 55%, #f8f6ff 100%) !important;
}
/* soft violet glow, top-right, purely decorative */
.vd-shop-hero::after {
content: "";
position: absolute;
top: -130px; right: -90px;
width: 360px; height: 360px;
border-radius: 50%;
background: radial-gradient(circle, rgba(124, 58, 237, .16), transparent 68%);
pointer-events: none;
}
.vd-shop-hero .elementor-widget-wrap { position: relative; z-index: 1; }
.vd-shop-hero .elementor-widget-text-editor { max-width: 640px; margin-inline: auto; }
/* Vertical breathing room. The section carried 66px top / 40px bottom, and the
decorative dash below the copy then left a further ~50px of empty band under
it — the hero read as a near-empty panel with the text floating in the
middle. Halve both pads and pull the dash up; the copy keeps its space from
the widgets' own margins. */
.vd-shop-hero {
padding-top: 40px !important;
padding-bottom: 26px !important;
}
.vd-shop-hero .elementor-widget-divider { margin-bottom: 0 !important; }
.vd-shop-hero .elementor-widget-heading:last-of-type,
.vd-shop-hero .elementor-widget-text-editor { margin-bottom: 10px !important; }
@media (max-width: 767px) {
.vd-shop-hero { padding-top: 30px !important; padding-bottom: 20px !important; }
}
/* ---- 2. Category filter pills -------------------------------------------- */
/* The pill row is a wrapping flex line. The container is targeted by BOTH the
`.elementor-column-wrap` shape and the plain `.elementor-widget-wrap` that
actually wraps these widgets in this template's markup — the first selector
never matched, so the row had no `gap` and no `justify-content` at all. Pills
then sat shoulder to shoulder on one line and wrapped raggedly at every
width below 1200px, and on a phone only one fitted per row. */
.vd-shop-cats .elementor-column.vd-shop-pills > .elementor-column-wrap > .elementor-widget-wrap,
.vd-shop-cats .elementor-column.vd-shop-pills > .elementor-widget-wrap {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 12px;
}
/* Small uppercase violet eyebrow above the pills — mirrors the hero eyebrow. */
.vd-shop-pills-label { flex: 1 1 100%; text-align: center; margin: 0 0 12px !important; }
/* The heading becomes a centred flex row so a fading violet dash can flank
each side of the eyebrow, capped at 460px so the dashes stay short. */
.vd-shop-pills-label .elementor-heading-title {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
max-width: 460px;
margin: 0 auto;
font-family: var(--vd-hdr-font, "Sora", sans-serif) !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: .18em;
text-transform: uppercase;
color: #6C4DF6 !important;
}
.vd-shop-pills-label .elementor-heading-title::before,
.vd-shop-pills-label .elementor-heading-title::after {
content: "";
flex: 1 1 auto;
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, rgba(124, 58, 237, 0), rgba(124, 58, 237, .55));
}
.vd-shop-pills-label .elementor-heading-title::after {
background: linear-gradient(90deg, rgba(124, 58, 237, .55), rgba(124, 58, 237, 0));
}
/* Force each pill widget to its own content width — without this Elementor's
widget resolves to full container width and the pills stack one-per-row.
`flex: 0 1 auto` (not `0 0 auto`) lets a pill SHRINK when a narrow phone
cannot fit the natural widths, so two still share a row instead of one
spilling to its own line. */
.vd-shop-pill {
flex: 0 1 auto !important;
width: max-content !important;
max-width: 100% !important;
margin: 0 !important;
}
/* Restyle Elementor's button into a crisp pill. !important beats the widget's
own generated base styles (which can't do gradients or multi-facet hovers). */
.vd-shop-pill .elementor-button {
font-family: var(--vd-hdr-font, "Sora", sans-serif) !important;
font-size: 14px !important;
font-weight: 600 !important;
letter-spacing: .01em;
line-height: 1;
display: inline-flex;
align-items: center;
background: #fff !important;
color: var(--vd-hdr-ink, #0B0D12) !important;
border: 1.5px solid var(--vd-line, #E7E9EF) !important;
border-radius: 999px;
padding: 12px 22px !important;
box-shadow: 0 1px 2px rgba(11, 13, 18, .04), 0 6px 16px -8px rgba(11, 13, 18, .12);
/* colour is deliberately NOT transitioned: a fading text colour passes
through a muddy olive while it blends across the purple gradient.
It now flips to white instantly; everything else eases smoothly. */
transition: transform .18s ease, box-shadow .22s ease, background .25s ease, border-color .25s ease;
}
/* Pill sizing per breakpoint. The six labels total ~1050px at the desktop
values, so below ~1200px they cannot all share one line at full size — the
row has to get denser rather than taller. Each step shrinks type, padding
and the row gap together, which keeps 3-up at tablet and 2-up on a phone
instead of the ragged 5-row column a phone was showing. */
@media (max-width: 1200px) {
.vd-shop-cats .elementor-column.vd-shop-pills > .elementor-widget-wrap,
.vd-shop-cats .elementor-column.vd-shop-pills > .elementor-column-wrap > .elementor-widget-wrap {
gap: 10px !important;
}
.vd-shop-pill .elementor-button {
font-size: 13px !important;
padding: 10px 16px !important;
}
.vd-shop-pill .elementor-button .vd-pill-count {
min-width: 20px;
height: 18px;
margin-left: 7px;
font-size: 11px;
}
}
@media (max-width: 820px) {
.vd-shop-cats .elementor-column.vd-shop-pills > .elementor-widget-wrap,
.vd-shop-cats .elementor-column.vd-shop-pills > .elementor-column-wrap > .elementor-widget-wrap {
gap: 8px !important;
}
.vd-shop-pill .elementor-button {
font-size: 12.5px !important;
padding: 9px 14px !important;
}
.vd-shop-pill .elementor-button::after { display: none; }
}
@media (max-width: 560px) {
.vd-shop-cats .elementor-column.vd-shop-pills > .elementor-widget-wrap,
.vd-shop-cats .elementor-column.vd-shop-pills > .elementor-column-wrap > .elementor-widget-wrap {
gap: 8px !important;
}
.vd-shop-pill .elementor-button {
font-size: 12.5px !important;
padding: 9px 13px !important;
gap: 0;
}
/* two even columns: each pill takes half the row minus the gap.
min-width:0 for the same reason as the archive pills — without it the
flex item refuses to shrink and each pill takes its own row. */
.vd-shop-pill {
flex: 1 1 calc(50% - 4px) !important;
width: auto !important;
min-width: 0 !important;
max-width: 100% !important;
}
.vd-shop-pill .elementor-button {
width: 100%;
justify-content: center;
min-width: 0;
}
.vd-shop-pill .elementor-button .elementor-button-text {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.vd-shop-pill .elementor-button .vd-pill-count { flex: 0 0 auto; }
}
/* A small violet arrow after the label. Its width is reserved while hidden so
the pill never changes size when the arrow appears on hover. */
.vd-shop-pill .elementor-button::after {
content: "\2192";
margin-left: 8px;
font-size: 13px;
line-height: 1;
color: #7C3AED;
opacity: 0;
transform: translateX(-4px);
transition: opacity .2s ease, transform .2s ease, color .2s ease;
}
.vd-shop-pill .elementor-button:hover,
.vd-shop-pill .elementor-button:focus {
background: linear-gradient(180deg, #7C3AED, #6D28D9) !important;
color: #fff !important;
border-color: transparent !important;
box-shadow: 0 10px 24px -6px rgba(124, 58, 237, .45), 0 2px 6px rgba(124, 58, 237, .20);
transform: translateY(-2px);
}
.vd-shop-pill .elementor-button:hover::after,
.vd-shop-pill .elementor-button:focus::after {
color: #fff;
opacity: 1;
transform: translateX(0);
}
.vd-shop-pill .elementor-button:active {
transform: translateY(0) scale(.98);
box-shadow: 0 4px 10px rgba(124, 58, 237, .30);
}
/* Live product count on each category pill. The number is printed by
vd_pill_count() in functions.php into a .vd-pill-count span, so it stays
correct as products are added or recategorised.
It is a tinted chip rather than plain text so it reads as metadata and not as
part of the name — "Vape Kits 3" would otherwise look like one label. The
chip inverts on hover along with the rest of the pill. */
.vd-shop-pill .elementor-button .vd-pill-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 20px;
margin-left: 8px;
padding: 0 7px;
border-radius: 999px;
background: #F1EEFE;
color: #6D28D9;
font-family: var(--vd-font-h, "Sora", sans-serif);
font-size: 11.5px;
font-weight: 700;
line-height: 1;
font-variant-numeric: tabular-nums;
transition: background .2s ease, color .2s ease;
}
.vd-shop-pill .elementor-button:hover .vd-pill-count,
.vd-shop-pill .elementor-button:focus .vd-pill-count {
background: rgba(255, 255, 255, .22);
color: #fff;
}
/* ---- 3. Product grid ------------------------------------------------------
The cards come from homepage.css (.vd-products). Here the shop cards are
aligned with the RELATED-PRODUCTS treatment on the single-product page:
the sale price turns red (--vd-sale, one sale color for the whole site)
and the whole text block gets breathing room (Astra only padded the title,
leaving the category / price / button flush to the card edge). */
/* Sale price → red (--vd-sale, the homepage's #FF3B5C — one sale color for
the whole site). */
.vd-shop-grid ul.products li.product .price ins {
color: var(--vd-sale, #FF3B5C) !important;
font-weight: 800;
text-decoration: none;
}
.vd-shop-grid ul.products li.product .price del {
color: var(--vd-muted, #94a3b8);
font-size: .82em;
font-weight: 500;
margin-right: 6px;
}
/* Sale badge → PINK BUBBLE. Astra renders the flag as span.ast-onsale-card
(white chip, top-left of the image) on every product loop — style it once
here, globally: rose-gradient bubble, white Sora label, soft glow. */
span.ast-on-card-button.ast-onsale-card {
background: linear-gradient(180deg, #FB7185, #E11D48) !important;
color: #fff !important;
border: 0 !important;
border-radius: 999px !important;
padding: 7px 15px !important;
font-family: var(--vd-font-h, "Sora", sans-serif);
font-size: 12px !important;
font-weight: 800 !important;
letter-spacing: .08em;
text-transform: uppercase;
line-height: 1.2;
box-shadow: 0 8px 18px rgba(225, 29, 72, .35) !important;
}
/* Classic WC badge (dormant locally — Astra replaces it — but kept in sync
so the same pink bubble shows wherever classic badges are enabled). */
.vd-shop-grid span.onsale {
background: linear-gradient(180deg, #FB7185, #E11D48) !important;
color: #fff !important;
box-shadow: 0 8px 18px rgba(225, 29, 72, .35) !important;
}
/* Pad the summary wrapper — it contains the category, title, price AND button,
so one inset gives the entire text block uniform breathing room. */
.vd-shop-grid ul.products li.product .astra-shop-summary-wrap {
box-sizing: border-box;
padding: 6px 16px 0;
}
/* Drop the title's own side padding so it doesn't double-indent against the
wrapper's new inset. */
.vd-shop-grid ul.products li.product .woocommerce-loop-product__title {
padding: 0;
margin-bottom: 8px;
}
/* Tighten vertical rhythm now that everything is padded. */
.vd-shop-grid ul.products li.product .price { margin-bottom: 15px; }
.vd-shop-grid ul.products li.product .button { margin-top: 0; }
/* Add-to-cart → violet gradient pill (the design's primary action, same as the
homepage cards and the single product's main button). Covers shop, category
archives and search results in one rule. */
.vd-shop-grid ul.products li.product a.button,
.vd-shop-grid ul.products li.product button.button {
background: linear-gradient(180deg, #7C3AED, #6D28D9) !important;
color: #fff !important;
border: 0;
border-radius: 999px;
box-shadow: 0 8px 18px rgba(109, 40, 217, .28);
padding: 10px 22px;
font-size: 13.5px;
font-weight: 700;
letter-spacing: .02em;
transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.vd-shop-grid ul.products li.product a.button:hover,
.vd-shop-grid ul.products li.product a.button:focus {
background: linear-gradient(180deg, #8B5CF6, #7C3AED) !important;
color: #fff !important;
box-shadow: 0 12px 26px rgba(109, 40, 217, .38);
transform: translateY(-2px);
}
.vd-shop-grid .elementor-widget-shortcode { margin-top: 4px; }
/* ---- 3b. Results + sort toolbar above the grid --------------------------
WooCommerce already prints both inside the [products] loop: the result count
and the "Sort by" form. They were being hidden by `.vd-products
.woocommerce-ordering { display: none }` above, and the count sat unstyled.
The toolbar is one row — count left, sort right — matching the reference.
The reference shows the toolbar inside a bordered white card, so it is given
the same treatment as a product card. */
.vd-shop-grid .woocommerce-result-count,
.vd-shop-grid .woocommerce-ordering {
display: block;
margin: 0;
}
.vd-shop-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
background: #fff;
border: 1px solid var(--vd-line, #E7E9EF);
border-radius: 16px;
padding: 14px 18px;
margin-bottom: 24px;
}
.vd-shop-grid .woocommerce-result-count {
font-size: 14.5px;
font-weight: 600;
color: #475569;
}
.vd-shop-grid .woocommerce-ordering { margin: 0; }
.vd-shop-grid .woocommerce-ordering select {
min-width: 210px;
padding: 11px 38px 11px 16px;
border: 1px solid var(--vd-line, #E7E9EF);
border-radius: 12px;
background: #fff;
font-family: var(--vd-font-b, "Inter", sans-serif);
font-size: 14px;
font-weight: 500;
color: #1E293B;
cursor: pointer;
}
@media (max-width: 600px) {
.vd-shop-toolbar { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px; }
.vd-shop-grid .woocommerce-ordering select { width: 100%; min-width: 0; }
}
/* ---- 4. Shop-with-confidence band ---------------------------------------- */
/* The band is col-100 (heading) + four col-25 cards inside ONE section, but
Elementor's container is display:flex and only wraps at <=1024px. Above
that all five columns sat on a single nowrap row and shrank to ~200px
each, so the card titles wrapped every two words. Let the container wrap
at every width - the heading then owns row 1 and the cards fill row 2 -
and step the card width down per breakpoint, because Elementor keeps
col-25 at 25% at all widths. */
.vd-shop-info .elementor-container { flex-wrap: wrap; }
.vd-shop-info .elementor-col-25 { width: 50% !important; }
@media (min-width: 1025px) {
.vd-shop-info .elementor-col-25 { width: 25% !important; }
}
@media (max-width: 600px) {
.vd-shop-info .elementor-col-25 { width: 100% !important; }
}
.vd-shop-info-card { height: 100%; }
.vd-shop-info-card .elementor-icon-box-wrapper {
height: 100%;
background: #fff;
border: 1px solid var(--vd-line);
border-radius: var(--vd-radius);
padding: 24px 22px;
box-shadow: 0 4px 18px rgba(11, 13, 18, .05);
transition: transform .2s ease, box-shadow .2s ease;
}
.vd-shop-info-card .elementor-icon-box-wrapper:hover {
transform: translateY(-3px);
box-shadow: 0 14px 34px rgba(11, 13, 18, .1);
}
.vd-shop-info-card .elementor-icon { background: #f3ecff !important; border-radius: 12px; }
.vd-shop-info-card .elementor-icon-box-title { margin-bottom: 6px; }
.vd-shop-info-card .elementor-icon-box-description { font-size: 14.5px; line-height: 1.6; }
/* ---- 5. SEO / bottom text ------------------------------------------------ */
.vd-shop-seo .elementor-widget-text-editor {
max-width: 820px;
margin-inline: auto;
text-align: center;
}
/* Font properties go on the inner (where the text lives) so they beat
Astra/Elementor's default paragraph font-size & colour. */
.vd-shop-seo .elementor-widget-text-editor p {
margin: 0 0 14px;
font-size: 15.5px;
line-height: 1.8;
color: #475569;
}
.vd-shop-seo .elementor-widget-text-editor strong { color: #0B0D12; font-weight: 700; }
/* ---- 6. PRODUCT CATEGORY ARCHIVES (/product-category/...) ----------------
The native WooCommerce category pages get the shop page's design: the
same violet hero band (brand eyebrow + Sora H1 + purple dash + corner
glow), the same "Browse by category" pills (printed by functions.php),
and the same card grid - functions.php wraps the loop in
.vd-products.vd-shop-grid so every card rule above applies unchanged.
body.tax-product_cat keeps all of it scoped to category archives. */
body.tax-product_cat .woocommerce-products-header {
position: relative;
overflow: hidden;
text-align: center;
background: linear-gradient(135deg, #f4f0fe 0%, #eef1ff 55%, #f8f6ff 100%) !important;
border: 0 !important;
padding: clamp(44px, 6vw, 66px) 24px clamp(38px, 5vw, 50px);
margin-bottom: 30px;
}
/* soft violet glow, top-right - same as .vd-shop-hero */
body.tax-product_cat .woocommerce-products-header::after {
content: "";
position: absolute;
top: -130px; right: -90px;
width: 360px; height: 360px;
border-radius: 50%;
background: radial-gradient(circle, rgba(124, 58, 237, .16), transparent 68%);
pointer-events: none;
}
/* brand eyebrow above the term title (mirrors vd_head_block's eyebrow) */
body.tax-product_cat .woocommerce-products-header::before {
content: "The Vapors Dubai Store";
position: relative;
z-index: 1;
display: block;
font-family: var(--vd-hdr-font, "Sora", sans-serif);
font-size: 12.5px;
font-weight: 700;
color: #6C4DF6;
margin-bottom: 10px;
}
body.tax-product_cat .woocommerce-products-header__title {
position: relative;
z-index: 1;
font-family: var(--vd-hdr-font, "Sora", sans-serif) !important;
font-size: clamp(28px, 3.4vw, 34px) !important;
font-weight: 700 !important;
line-height: 1.18;
color: var(--vd-hdr-ink, #0B0D12) !important;
margin: 0;
}
/* purple dash under the title (the Elementor divider from the shop hero) */
body.tax-product_cat .woocommerce-products-header__title::after {
content: "";
display: block;
width: 56px;
height: 4px;
border-radius: 2px;
background: #6C4DF6;
margin: 18px auto 0;
}
/* Breadcrumbs sit above the hero band (Astra/WC default position) - give
them the shop's typography instead of the stock gray left-aligned bar:
centred, Sora, violet links. */
body.tax-product_cat .woocommerce-breadcrumb {
text-align: center;
font-family: var(--vd-hdr-font, "Sora", sans-serif);
font-size: 13px;
color: var(--vd-muted, #94A3B8);
margin: 0 0 14px;
}
body.tax-product_cat .woocommerce-breadcrumb a {
color: #6C4DF6;
text-decoration: none;
}
body.tax-product_cat .woocommerce-breadcrumb a:hover { text-decoration: underline; }
body.tax-product_cat .woocommerce-breadcrumb .breadcrumb-divider,
body.tax-product_cat .woocommerce-breadcrumb .separator { color: #CBD5E1; }
/* "Browse by category" pills - the shop pill design, static-link edition */
.vd-arch-cats { text-align: center; margin: -6px 0 30px; }
.vd-arch-cats-label {
display: block;
font-family: var(--vd-hdr-font, "Sora", sans-serif);
font-size: 12px;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: #6C4DF6;
margin-bottom: 12px;
}
.vd-arch-cats-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
}
.vd-arch-pill {
display: inline-flex;
align-items: center;
font-family: var(--vd-hdr-font, "Sora", sans-serif);
font-size: 14px;
font-weight: 600;
letter-spacing: .01em;
line-height: 1;
padding: 12px 22px;
border-radius: 999px;
border: 1.5px solid var(--vd-line, #E7E9EF);
background: #fff;
color: var(--vd-hdr-ink, #0B0D12);
text-decoration: none;
box-shadow: 0 1px 2px rgba(11, 13, 18, .04), 0 6px 16px -8px rgba(11, 13, 18, .12);
transition: transform .18s ease, box-shadow .22s ease, background .25s ease, border-color .25s ease;
}
/* same sliding arrow as the shop pills; width reserved so pills don't grow */
.vd-arch-pill::after {
content: "\2192";
margin-left: 8px;
font-size: 13px;
line-height: 1;
color: #7C3AED;
opacity: 0;
transform: translateX(-4px);
transition: opacity .2s ease, transform .2s ease, color .2s ease;
}
/* colour flips instantly on purpose - see section 2 (no muddy mid-fade) */
.vd-arch-pill:hover,
.vd-arch-pill:focus,
.vd-arch-pill.is-active {
background: linear-gradient(180deg, #7C3AED, #6D28D9) !important;
color: #fff !important;
border-color: transparent !important;
box-shadow: 0 10px 24px -6px rgba(124, 58, 237, .45), 0 2px 6px rgba(124, 58, 237, .20);
transform: translateY(-2px);
}
.vd-arch-pill:hover::after,
.vd-arch-pill:focus::after,
.vd-arch-pill.is-active::after {
color: #fff;
opacity: 1;
transform: translateX(0);
}
.vd-arch-pill:active { transform: translateY(0) scale(.98); }
/* Live product count chip — same treatment as the shop page's pills, so a
category reads identically in both places. */
.vd-arch-pill .vd-pill-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 20px;
margin-left: 8px;
padding: 0 7px;
border-radius: 999px;
background: #F1EEFE;
color: #6D28D9;
font-family: var(--vd-font-h, "Sora", sans-serif);
font-size: 11.5px;
font-weight: 700;
line-height: 1;
font-variant-numeric: tabular-nums;
transition: background .2s ease, color .2s ease;
}
.vd-arch-pill:hover .vd-pill-count,
.vd-arch-pill:focus .vd-pill-count,
.vd-arch-pill.is-active .vd-pill-count {
background: rgba(255, 255, 255, .22);
color: #fff;
}
/* Archive pills step down with the viewport, the same way the shop page's
Elementor pills do: density instead of height, so a phone gets an even
two-column grid rather than a tall ragged column. */
@media (max-width: 1200px) {
.vd-arch-cats-row { gap: 10px; }
.vd-arch-pill { font-size: 13px; padding: 10px 16px; }
.vd-arch-pill .vd-pill-count { min-width: 20px; height: 18px; margin-left: 7px; font-size: 11px; }
}
@media (max-width: 820px) {
.vd-arch-cats-row { gap: 8px; }
.vd-arch-pill { font-size: 12.5px; padding: 9px 14px; }
.vd-arch-pill::after { display: none; }
}
@media (max-width: 560px) {
.vd-arch-cats-row { gap: 8px; }
.vd-arch-pill {
flex: 1 1 calc(50% - 4px);
justify-content: center;
font-size: 12.5px;
padding: 9px 13px;
/* Flex items default to min-width:auto, which refuses to shrink below their
content and pushed each pill onto its own row — one per line on a phone.
min-width:0 lets the 50% basis actually apply; max-width stops a very
long category name spilling past the column. */
min-width: 0;
max-width: 100%;
}
.vd-arch-pill .vd-arch-pill-name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.vd-arch-pill .vd-pill-count { flex: 0 0 auto; }
}
/* Loop chrome: the sort control and result count are SHOWN on both the shop
page and the product category archives — the toolbar in 3b styles them.
Search results keep them hidden: that page has its own layout. */
body.search .vd-products .woocommerce-ordering,
body.woocommerce-search .vd-products .woocommerce-ordering { display: none; }
/* pagination as centred violet pills */
.vd-products .woocommerce-pagination { text-align: center; margin-top: 34px; }
.vd-products .woocommerce-pagination ul.page-numbers {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
list-style: none;
margin: 0;
padding: 0;
}
.vd-products .woocommerce-pagination ul.page-numbers li { margin: 0; }
/* WooCommerce prints `page-numbers` on the
as well as on each item, so the
pill rule below was also landing on the LIST itself: a 1180px-wide bordered
capsule spanning the page. Scope the pill styling to the items —
`> li > .page-numbers` — and take the li's `list-style` back to none.
The dot in front of each number is NOT a list marker (`list-style` already
computed to `none` on the li). It is a `::before` Elementor injects into
every list item it manages — a 7px empty block that the li's `display: flex`
then lays out as a flex child, sitting beside the pill like a stray bullet.
Suppressing it here is scoped to the pagination's own - s, so Elementor's
`::before` still works everywhere else on the site. */
.vd-products .woocommerce-pagination ul.page-numbers > li {
display: flex;
list-style: none;
margin: 0;
/* The square frame was on the LI, not the pill inside it: WooCommerce's reset
leaves `border: 0.667px solid rgb(4,107,210)` with `border-radius: 0` on
every
- , so each page number wore a sharp-cornered blue box one pixel
proud of the round pill. Clearing the earlier attempt only reached
`.page-numbers` and left this visible. */
border: 0 !important;
outline: 0 !important;
background: none !important;
box-shadow: none !important;
}
.vd-products .woocommerce-pagination ul.page-numbers > li::before {
content: none !important;
display: none !important;
}
.vd-products .woocommerce-pagination ul.page-numbers > li > .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 12px;
/* No border at all. Two unrelated rules were painting one: this file's own
`border: 1.5px solid var(--vd-line)`, and — the one actually visible as a
square frame in the screenshot — `blog.css`'s `.entry-content a {
border-bottom: 1px solid ... }`, which every link inside the post content
inherits. `text-decoration: none` alone does not stop a border, and the
violet underline sat on top of the pill's own edge. Kill the border and the
outline explicitly, and keep the hover cue as a colour change only. */
border: 0 !important;
outline: 0 !important;
border-radius: 999px;
background: #fff;
color: var(--vd-hdr-ink, #0B0D12);
font-family: var(--vd-hdr-font, "Sora", sans-serif);
font-size: 14px;
font-weight: 600;
text-decoration: none;
box-shadow: none;
}
/* Unselected pages: a soft violet-tinted pill, so the row reads as a set of
brand-coloured controls rather than three white circles, while the current
page stays distinguishable as the solid violet one. `!important` because
`.entry-content a` in blog.css paints a violet colour and an underline on
every link in the post content — these pills sit inside it. */
.vd-products .woocommerce-pagination ul.page-numbers > li > .page-numbers {
background: #F4F0FF;
color: #5B21B6;
}
.vd-products .woocommerce-pagination ul.page-numbers > li > .page-numbers.current {
background: linear-gradient(180deg, #7C3AED, #6D28D9);
color: #fff;
}
/* Hover deepens the tint a step; the fill stays clearly lighter than the
current page's solid violet so the two states never read the same. */
.vd-products .woocommerce-pagination ul.page-numbers > li > .page-numbers:hover:not(.current) {
background: #E9E2FF;
color: #5B21B6;
}
@media (max-width: 600px) {
body.tax-product_cat .woocommerce-products-header::after { display: none; }
}
/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 600px) {
.vd-shop-hero::after { display: none; }
.vd-shop-info-card .elementor-icon-box-wrapper { padding: 20px 18px; }
}