/* PHASE-R1 — showcase design foundation (D1, D2, D3, D4, D5, D8, D15).
*
* Everything in this file is scoped under `.vk-showcase`, the wrapper class every showcase
* view carries on its page container. No bare element or Bootstrap-class selector is defined
* here so the UBold theme keeps working unchanged on every other page, including `/store`.
* Every color is `var(--color-*)` from `app-colors.css`, or the plain `white` keyword for the
* PRD's Card Background role (D1 — "no token needed"); zero hex literals, zero new variables.
*
* The two exceptions to the `.vk-showcase` nesting — the overlay scrim/panel and the body
* scroll-lock class — are marked below and explained where they appear: an overlay is meant
* to render above and outside the normal page flow, so it cannot be a CSS descendant of the
* page wrapper. Their class names still carry the `vk-showcase-` prefix.
*
* R1 defines these primitives; R2–R5 apply most of them to real markup (catalog card
* rebuild, filter drawer, Quick View, cart drawer). The exception is the small set already
* wired into the showcase fork's existing views as part of TR1.6's hardcoded-value cleanup
* (product media, thumbnails, the skeleton grid and the quantity stepper) — those render
* exactly as before the cleanup.
*/
.vk-showcase { /* --- D1 role-token layer: PRD's 8 roles mapped onto existing Vitakee tokens only --- */
--vk-role-cta: var(--color-primary); /* PRD Primary Accent (CTAs) */
--vk-role-cta-contrast: white;
--vk-role-accent: var(--color-accent); /* PRD Secondary Accent */
--vk-role-accent-contrast: var(--color-primary-dark);
--vk-role-dark: var(--color-primary-dark); /* PRD Dark Background / Text */
--vk-role-canvas: var(--color-background); /* PRD Light Background (canvas) */
--vk-role-card-bg: white; /* PRD Card Background — no token needed */
--vk-role-star: var(--color-accent-alt); /* Rating stars (unified with review star color) */
--vk-role-muted: var(--color-secondary); /* PRD Text Muted — D3 correction, never gray */
/* D5 typography stack. Declared as a variable so no rule below has to repeat it; not
applied to the wrapper itself, so no page-wide font change ships in this phase. */
--vk-font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* Mockup alignment — catalog container capped at 80rem (1280px) and centered on desktop.
Scoped to the exact `container-fluid.vk-showcase` combo on purpose: `.vk-showcase` alone is
also carried by the quick-view panel, which must keep full width. Bootstrap's fluid
horizontal gutter padding is untouched; the sticky filter toolbar stays inside this width. */
.container-fluid.vk-showcase {
max-width: 80rem;
margin-inline: auto;
margin-bottom: 1.25rem;
border-radius: 20px;
padding: 2rem;
border: 1px solid var(--color-gray-light);
background: white;
}
/* ==========================================================================
Showcase page shell + footer (layouts/showcase.php)
UBold's `.footer` is `position: absolute; bottom: 0`, so on long pages it
floats OVER the end of the content and on mobile (long disclaimer) it
overflows the row. The showcase shell switches to a flex column and drops
the footer back into normal flow: the content area flexes and the footer
always sits after it — never on top of it. The disclaimer gets
`overflow-wrap: anywhere` so a long line wraps inside its column instead of
escaping the container. Scoped under `.vk-showcase-layout` because
`showcase.css` is loaded on every page (head.php) and sibling layouts
(main, public) rely on UBold's absolute footer.
========================================================================== */
.vk-showcase-layout {
position: relative;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.vk-showcase-layout .content {
flex: 1 1 auto;
width: 100%;
display: flex;
flex-direction: column;
}
.vk-showcase-layout .footer {
position: static;
padding: 1.5rem 0 2rem;
border-top: 1px solid var(--color-gray-lightest);
background: transparent;
height: auto;
color: var(--color-gray-dark);
}
.vk-showcase-layout .footer .container-fluid {
padding-inline: 1.25rem;
}
.vk-showcase-layout .footer small {
display: block;
margin-top: .35rem;
max-width: 65ch;
line-height: 1.55;
overflow-wrap: anywhere;
word-break: break-word;
}
@media (min-width: 768px) {
.vk-showcase-layout .footer small {
margin-top: 0;
margin-left: auto;
}
}
/* ==========================================================================
Topbar — Showcase-specific nav elements (store link, account btn, divider)
Scoped to .navbar-custom so UBold's topbar background and layout stay intact;
only the showcase-owned elements inside it are restyled here.
========================================================================== */
/* Thin vertical separator between logo-box and store link */
.navbar-custom .vk-topbar-divider {
display: inline-block !important;
width: 1px !important;
height: 20px !important;
background: rgba(255, 255, 255, .25) !important;
border-radius: 1px !important;
flex-shrink: 0 !important;
}
/* Store / catalog link — pill-style, sits right beside the logo. `line-height`
1.15 keeps the text in a compact box (UBold's .topbar line-height is much
taller), so icon and label share the same visual center in the flex row. */
.navbar-custom .vk-topbar-store-link {
display: inline-flex !important;
align-items: center !important;
gap: .35rem !important;
padding: .3rem .75rem !important;
border-radius: 20px !important;
background: rgba(255, 255, 255, .12) !important;
color: white !important;
font-size: .82rem !important;
font-weight: 600 !important;
line-height: 1.15 !important;
text-decoration: none !important;
transition: background .18s ease !important;
white-space: nowrap !important;
}
.navbar-custom .vk-topbar-store-link:hover {
background: rgba(255, 255, 255, .22) !important;
color: white !important;
}
.navbar-custom .vk-topbar-store-link .mdi {
font-size: 1rem !important;
line-height: 1 !important;
}
/* Premium account / login button */
.navbar-custom .vk-topbar-account-btn {
display: inline-flex !important;
align-items: center !important;
gap: .4rem !important;
padding: .25rem .65rem !important;
border-radius: 20px !important;
background: rgba(255, 255, 255, .15) !important;
color: white !important;
font-size: .82rem !important;
font-weight: 600 !important;
line-height: 1.15 !important;
text-decoration: none !important;
transition: background .18s ease !important;
border: 1px solid rgba(255, 255, 255, .2) !important;
}
.navbar-custom .vk-topbar-account-btn:hover {
color: white !important;
}
/* Avatar circle for logged-in state; when an `); without `!important` here the global rule would win
and render every showcase title in the wrong gray instead of `--color-primary-dark`. */
.vk-showcase .vk-showcase-title {
font-family: var(--vk-font-stack);
font-weight: 700;
color: var(--vk-role-cta) !important;
}
/* UBold h4.page-title (catalog + PDP) — same CTA title color as the rest. */
.container-fluid.vk-showcase h4.page-title {
color: var(--vk-role-cta);
}
.vk-showcase .vk-showcase-price {
font-family: var(--vk-font-stack);
font-size: 1.8rem;
font-weight: 700;
color: var(--color-plan-essential);
font-variant-numeric: tabular-nums;
}
.vk-showcase .vk-showcase-price-previous {
font-family: var(--vk-font-stack);
font-size: .8rem;
font-weight: 500;
color: var(--color-plan-essential);
opacity: .65;
text-decoration: line-through;
font-variant-numeric: tabular-nums;
}
/* Override Bootstrap's .text-muted (#868686) which fails WCAG AA on white (~3.5:1).
Enforces D3: muted text must use --vk-role-muted / --color-secondary (~8.9:1). */
.vk-showcase .text-muted,
.vk-showcase-overlay-panel .text-muted,
.vk-showcase-quickview-panel .text-muted {
color: var(--vk-role-muted) !important;
}
/* Generic numeric utility: quantities and any counter that must not jitter the layout when
digit width changes (e.g. 9 -> 10). Applied now to the quantity stepper input (TR1.6). */
.vk-showcase .vk-showcase-num {
font-variant-numeric: tabular-nums;
}
/* ==========================================================================
Geometry & elevation (D4, TR1.3)
========================================================================== */
.vk-showcase .vk-showcase-card {
background: var(--vk-role-card-bg);
border: 1px solid var(--color-gray-light);
border-radius: 16px;
box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
transition: transform .18s ease, box-shadow .18s ease;
}
/* Hover lift only where hover actually means something — never on touch (D4). */
@media (hover: hover) {
.vk-showcase .vk-showcase-card:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
transform: translateY(-3px);
}
}
/* Reduced motion drops the transform but keeps the elevation cue (D4). */
@media (hover: hover) and (prefers-reduced-motion: reduce) {
.vk-showcase .vk-showcase-card:hover {
transform: none;
}
}
.vk-showcase .vk-showcase-pill {
border-radius: 999px;
}
/* ==========================================================================
Badges (D2, D4, TR1.4) — urgency is weight + size + --color-accent, never red.
The clinical "biomarker result is deficient" token pair is intentionally never used here:
reusing it for stock/urgency would teach two contradictory meanings for one color (D2).
========================================================================== */
.vk-showcase .vk-showcase-badge {
display: inline-flex;
align-items: center;
gap: .25rem;
border-radius: 999px;
font-family: var(--vk-font-stack);
font-weight: 600;
font-size: .75rem;
line-height: 1.2;
padding: .25rem .625rem;
}
/* Discount badge — --color-accent fill, --color-primary-dark text, weight 800 (D2). */
.vk-showcase .vk-showcase-badge-discount {
background: var(--color-plan-essential);
color: white;
}
/* Featured badge — --color-primary fill, white text (D2, D7: honest substitute for "Top
Selling", sourced from the real `is_featured` column). */
.vk-showcase .vk-showcase-badge-featured {
background: var(--color-sky-bright);
color: white;
}
.vk-showcase .vk-showcase-badge-stock-in {
background: var(--color-gray-lightest) !important;
color: var(--vk-role-muted) !important;
font-weight: 600 !important;
}
/* Low-stock label — --color-primary-dark text, weight 700, .75rem (D2's exact mechanism);
no accent fill here so the low-stock *bar* (R2) keeps sole ownership of the accent fill. */
.vk-showcase .vk-showcase-badge-stock-low {
background: var(--vk-role-canvas);
color: var(--vk-role-dark);
font-weight: 600;
}
.vk-showcase .vk-showcase-badge-stock-unavailable {
background: var(--color-gray-lightest);
color: var(--vk-role-muted);
}
/* ==========================================================================
Pill buttons (D4, TR1.4) — the CTA shape used by every showcase button.
========================================================================== */
/* PHASE-R2 fix: `app-colors.css` has a sitewide, unscoped `button { border-radius: 3px
!important; color: var(--color-white-light) !important; }` (Buttons (General) section).
Since `!important` always wins over a non-important rule regardless of specificity, every
`` using this class — starting with R2's add-to-cart CTA — would otherwise render as a
3px-radius rectangle with forced white-light text instead of the pill shape D4 specifies. The
two properties that rule marks `!important` are matched here so this primitive (shared by every
showcase overlay's CTA in R3–R5, not just this button) actually renders as designed. */
.vk-showcase .vk-showcase-pill-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .375rem;
border: none;
border-radius: 999px !important;
font-family: var(--vk-font-stack);
font-weight: 600;
padding: .5rem 1.25rem;
transition: transform .18s ease, box-shadow .18s ease;
}
/* Disabled CTA (e.g. out-of-stock/discontinued add-to-cart) keeps its 44px target but drops the
hover affordances (TR2.9). */
.vk-showcase .vk-showcase-pill-btn:disabled {
opacity: .55;
cursor: not-allowed;
box-shadow: none;
transform: none;
}
@media (hover: hover) {
.vk-showcase .vk-showcase-pill-btn:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
transform: translateY(-3px);
}
}
@media (hover: hover) and (prefers-reduced-motion: reduce) {
.vk-showcase .vk-showcase-pill-btn:hover {
transform: none;
}
}
.vk-showcase .vk-showcase-pill-btn-accent {
background: var(--vk-role-accent);
color: var(--vk-role-accent-contrast) !important;
}
.vk-showcase .vk-showcase-pill-btn-success,
.vk-showcase .vk-showcase-card-cta .vk-showcase-pill-btn.vk-showcase-pill-btn-success {
background: var(--color-success-dark) !important;
color: white !important;
transform: scale(0.96);
}
.vk-showcase .vk-showcase-pill-btn-outline {
background: transparent;
color: var(--vk-role-cta) !important;
border: 1px solid var(--vk-role-cta);
}
/* ==========================================================================
Overlay primitives (D10, D15, TR1.5)
Shared by the filter drawer (R3), Quick View (R4) and the cart drawer (R5), driven by
`showcase/overlay.js`. One DOM node, one open/close class, CSS-only presentation switch at
the 768px breakpoint (D10) — modal / right slide-over above it, full-screen sheet below it.
NOT nested under `.vk-showcase`: the scrim and panel are expected to sit above the normal
page flow (and may be appended to `` by a feature module), so they cannot be CSS
descendants of the page wrapper. The `vk-showcase-` name prefix is what keeps them scoped
to this fork instead of structural nesting.
========================================================================== */
.vk-showcase-overlay-scrim {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .5);
opacity: 0;
pointer-events: none;
transition: opacity .18s ease;
/* Kept below SweetAlert2's container (z-index: 1060, sweetalert2.min.css) so an add/remove
toast fired while a drawer is open — R5's cart drawer — always renders above it. */
z-index: 1040;
}
.vk-showcase-overlay-scrim.vk-showcase-overlay-open {
opacity: 1;
pointer-events: auto;
}
/* Desktop / tablet: right-hand slide-over. Drawer radius per D4 — 0 on the screen edge
(right), 12px on the inner edge (left). */
.vk-showcase-overlay-panel {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: min(420px, 100%);
background: white;
display: flex;
flex-direction: column;
border-radius: 12px 0 0 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
transform: translateX(100%);
transition: transform .18s ease;
z-index: 1045;
}
.vk-showcase-overlay-panel.vk-showcase-overlay-open {
transform: translateX(0);
}
.vk-showcase-overlay-panel[hidden],
.vk-showcase-quickview-panel[hidden] {
display: none;
}
/* Mobile: full-width bottom sheet, same DOM node, no JS presentation branch (D10). Drawer
radius flips — 0 on the screen edge (bottom), 12px on the inner edge (top). */
@media (max-width: 767px) {
.content:has(.vk-showcase) {
padding: 0;
padding-top: 0 !important;
}
.vk-showcase-overlay-panel {
top: auto;
left: 0;
right: 0;
bottom: 0;
width: 100%;
max-height: 90vh;
border-radius: 12px 12px 0 0;
transform: translateY(100%);
}
.vk-showcase-overlay-panel.vk-showcase-overlay-open {
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
.vk-showcase-overlay-panel {
transition: none;
}
.vk-showcase-overlay-scrim {
transition: none;
}
}
/* Body scroll lock, toggled by showcase/overlay.js while any overlay is open (D15). Applied
to , which is always an ancestor of `.vk-showcase`, never a descendant of it. */
.vk-showcase-scroll-locked {
overflow: hidden;
}
/* ==========================================================================
TR1.6 cleanup — classes replacing the inline geometry/hex the fork inherited verbatim
from the store originals in product_detail.php, _skeleton_grid.php, _quantity_stepper.php,
_product_card.php and templates.js. Values are carried over unchanged except the two hex
colors, which map to the closest existing token so both screens render identically.
========================================================================== */
.vk-showcase .vk-showcase-product-video {
max-height: 400px;
}
.vk-showcase .vk-showcase-thumb-video {
height: 60px;
background: var(--color-gray-lightest);
border-radius: 4px;
}
.vk-showcase .vk-showcase-thumb-video-icon {
font-size: 24px;
color: var(--color-primary-dark);
}
.vk-showcase .vk-showcase-thumb-img {
max-height: 60px;
}
/* PHASE-R2 (TR2.7) reshaped this from a fixed 160px height to the same 4:5 ratio as
`.vk-showcase-card-media` so the skeleton tile is the exact silhouette of the card that
replaces it — no reflow at swap time. Top corners mirror the card's 16px radius. */
.vk-showcase .vk-showcase-skeleton-media {
width: 100%;
aspect-ratio: 4 / 5;
border-radius: 16px 16px 0 0;
}
/* PDP quantity stepper — mockup look (pdp-showcase.html): gray container
(rounded-xl, 1px border, 4px padding) with two WHITE square buttons (32px,
subtle shadow) and a bold centered value. Scoped to .vk-showcase-qty-group
because the shared .btn-cancel (navy, from app-colors.css) and the unscoped
global `button` rule (radius 3px, color white-light — app-colors.css:1338-1341)
must never win inside the group: every radius/color/background/border override
below carries !important for that reason. */
.vk-showcase .vk-showcase-qty-group {
width: 128px;
max-width: 100%;
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 2px;
padding: 4px;
margin-left: 1rem;
border: 1px solid var(--color-gray-light) !important;
border-radius: 24px !important
}
.vk-showcase .vk-showcase-qty-group .btn {
background: white !important;
color: var(--color-primary-dark) !important;
border: 0 !important;
width: 32px;
height: 32px;
min-width: 32px;
min-height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px !important;
font-size: 1rem;
font-weight: 600;
box-shadow: 0 1px 2px rgba(0,0,0,0.06);
transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.vk-showcase .vk-showcase-qty-group .btn:hover:not(:disabled) {
background: var(--color-white-blue) !important;
}
.vk-showcase .vk-showcase-qty-group .btn:active:not(:disabled) {
background: var(--color-gray-light) !important;
transform: scale(0.94);
}
.vk-showcase .vk-showcase-qty-group .btn:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: -2px;
}
/* Value reads as bold text (mockup's ) while the input keeps its borderless
look and productDetail.js clamp behavior. Scoped to the PDP group so the cart
drawer's readonly input (same .vk-showcase-num class) stays untouched. */
.vk-showcase .vk-showcase-qty-group .vk-showcase-num {
border: 0 !important;
background: transparent;
color: var(--color-primary-dark) !important;
font-weight: 600;
font-size: 0.9rem;
height: auto !important;
padding: 0 4px !important;
text-align: center;
}
.vk-showcase .vk-showcase-qty-group .vk-showcase-num:focus {
box-shadow: none !important;
}
@media (hover: hover) and (prefers-reduced-motion: reduce) {
.vk-showcase .vk-showcase-qty-group .btn:active:not(:disabled) {
transform: none;
}
}
.vk-showcase .vk-showcase-qty-group input[type=number]::-webkit-outer-spin-button,
.vk-showcase .vk-showcase-qty-group input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.vk-showcase .vk-showcase-qty-group input[type=number] {
-moz-appearance: textfield;
}
.vk-showcase .vk-showcase-card-video {
object-fit: cover;
}
/* ==========================================================================
PHASE-R2 — catalog grid & product card (TR2.1–TR2.9)
`productCard()` in showcase/templates.js and its PHP mirror
`showcase/partials/_product_card.php` share every class below so the two stay visually
identical (TR2.8). `_skeleton_grid.php` reuses `.vk-showcase-card-title` and the media/CTA
height rules so the skeleton silhouette matches the real card exactly (TR2.7).
========================================================================== */
/* TR2.1 — responsive gutter (10px / 16px / 20px) via this theme's own row gutter variables
(`--ct-gutter-x` / `--ct-gutter-y` — this UBold build renames Bootstrap's standard
`--bs-gutter-*` pair, confirmed in bootstrap.min.css's compiled `.row`/`.g-3` rules), so the
existing `.row` + `col-*` grid keeps working unchanged; only the gap scale is ours. */
.vk-showcase .vk-showcase-grid {
--ct-gutter-x: 10px;
--ct-gutter-y: 10px;
}
@media (min-width: 768px) {
.vk-showcase .vk-showcase-grid {
--ct-gutter-x: 16px;
--ct-gutter-y: 16px;
}
}
@media (min-width: 1200px) {
.vk-showcase .vk-showcase-grid {
--ct-gutter-x: 20px;
--ct-gutter-y: 20px;
}
}
/* TR2.2 — card media: 4:5 aspect ratio, cropped never stretched, and the positioning context for
the badge overlays (TR2.3) and the hover overlay (TR6.x). Top corners share the card's 16px
radius; the card's own radius handles the bottom, so no `overflow: hidden` is needed on
`.vk-showcase-card` itself — that class is a shared primitive other, non-media cards (future
overlays) also use. */
.vk-showcase .vk-showcase-card-media {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
border-radius: 16px 16px 0 0;
background: var(--color-gray-lightest);
}
.vk-showcase .vk-showcase-card-media img,
.vk-showcase .vk-showcase-card-media video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
/* Mockup-aligned media zoom: 1.05 on card hover (transition only where hover exists). */
transition: transform .5s ease;
}
/* TR6.2 — hover affordance on the card media: scrim + centered eye glyph. Pure decoration:
`pointer-events: none` keeps the existing quick-view trigger (the media/title anchor) as the
only interactive path, and `aria-hidden` keeps the overlay out of the accessibility tree —
keyboard users drive the same affordance through the anchor's own focus, revealed here via
`:focus-within` so the visual cue is identical for mouse and keyboard. */
.vk-showcase .vk-showcase-card-hover {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, .2);
opacity: 0;
pointer-events: none;
transition: opacity .18s ease;
}
.vk-showcase .vk-showcase-card-hover-eye {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 999px;
background: white;
color: var(--color-primary-dark);
font-size: 1.15rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}
/* Zoom + overlay reveal are hover-only (never on touch, D4); reduced motion drops the zoom
while keeping the overlay cue. */
@media (hover: hover) {
.vk-showcase .vk-showcase-card:hover .vk-showcase-card-hover,
.vk-showcase .vk-showcase-card:focus-within .vk-showcase-card-hover {
opacity: 1;
}
.vk-showcase .vk-showcase-card:hover .vk-showcase-card-media img,
.vk-showcase .vk-showcase-card:hover .vk-showcase-card-media video {
transform: scale(1.05);
}
}
@media (hover: hover) and (prefers-reduced-motion: reduce) {
.vk-showcase .vk-showcase-card:hover .vk-showcase-card-media img,
.vk-showcase .vk-showcase-card:hover .vk-showcase-card-media video {
transform: none;
}
}
/* Quick view affordance is mobile-only: on desktop the card click navigates to the product
details page, so the eye/scrim overlay is hidden. */
@media (min-width: 768px) {
.vk-showcase .vk-showcase-card-hover { display: none; }
}
/* TR2.3 — badge overlays. Opposite corners so a product that is both discounted and featured
never collides at 360px; each wrapper is only emitted when it has a real badge inside it. */
.vk-showcase .vk-showcase-card-badges-left,
.vk-showcase .vk-showcase-card-badges-right {
position: absolute;
top: .5rem;
display: flex;
flex-direction: column;
gap: .25rem;
z-index: 1;
/* Decorative overlays only — never intercept the click on the media link beneath them. */
pointer-events: none;
}
.vk-showcase .vk-showcase-card-badges-left {
left: .5rem;
align-items: flex-start;
}
.vk-showcase .vk-showcase-card-badges-right {
right: .5rem;
align-items: flex-end;
}
.vk-showcase .vk-showcase-card-body {
gap: .5rem;
padding: .875rem;
}
/* TR2.4 — title clamped to exactly 2 lines; `min-height` reserves the same box whether the name
is one word or four, so the price block below never shifts (also mirrored by the skeleton's
title placeholder, TR2.7). */
.vk-showcase .vk-showcase-card-title {
font-size: .95rem;
line-height: 1.35;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: calc(1.35em * 2);
}
.vk-showcase .vk-showcase-card-title a {
color: inherit;
text-decoration: none;
}
/* TR6.1 — social-proof row between the title and the price block. REAL data only: `avg_rating`
(store_product_reviews) and `sold_count` (paid store_order_items) come in the product payload
and are null when absent — the row is then not emitted at all, so there is no empty-state
markup to hide (templates.js / _product_card.php). Star glyph uses --vk-role-star
(--color-yellow-text, ~4.6:1 on white); the count and the sold label use the D3 muted pair. */
.vk-showcase .vk-showcase-card-social-proof {
display: flex;
align-items: center;
gap: .5rem;
font-size: .8rem;
line-height: 1;
}
.vk-showcase .vk-showcase-card-rating {
display: inline-flex;
align-items: center;
gap: .25rem;
font-weight: 600;
color: var(--vk-role-dark);
font-variant-numeric: tabular-nums;
line-height: 1;
}
.vk-showcase .vk-showcase-card-rating-star {
color: var(--vk-role-star);
font-size: .85rem;
line-height: 1;
}
.vk-showcase .vk-showcase-card-sold {
color: var(--vk-role-muted);
font-weight: 600;
font-variant-numeric: tabular-nums;
line-height: 1;
}
/* Pipe separator between the rating and the sold count. The pipe only renders when BOTH are
present (rating is the first child and sold follows); a lone rating or lone sold shows no
separator. line-height: 1 keeps the pipe vertically centered with the text. */
.vk-showcase .vk-showcase-card-social-proof > .vk-showcase-card-rating:first-child:not(:only-child) + .vk-showcase-card-sold::before {
content: '|';
margin-right: .5rem;
color: var(--color-gray-light);
font-weight: 400;
}
.vk-showcase .vk-showcase-card-price {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: .5rem;
}
.vk-showcase .vk-showcase-card-signals {
display: flex;
flex-direction: column;
gap: .375rem;
}
.vk-showcase .vk-showcase-card-panels {
display: flex;
flex-wrap: wrap;
gap: .25rem;
}
.vk-showcase .vk-showcase-panel-chip {
display: inline-flex;
align-items: center;
gap: .25rem;
border-radius: 999px;
background: var(--color-ice);
color: var(--color-navy-light) !important;
font-family: var(--vk-font-stack);
font-size: .75rem;
font-weight: 600;
line-height: 1.2;
padding: .25rem .625rem;
margin-right: .25rem;
margin-bottom: .25rem;
text-decoration: none;
transition: background-color .18s ease, color .18s ease;
}
@media (hover: hover) {
a.vk-showcase-panel-chip:hover {
background: var(--color-gray-lightest);
color: var(--color-primary) !important;
}
}
/* TR2.5 — low-stock bar (D2): `--color-accent` fill on a `--color-background` track, never red.
The fill is a fixed visual cue (not a computed fraction — see the comment on `stockBar()` in
templates.js for why) so it never claims a precision the API doesn't provide. */
.vk-showcase .vk-showcase-stock-bar {
width: 100%;
height: 6px;
border-radius: 999px;
background: var(--vk-role-canvas);
overflow: hidden;
}
.vk-showcase .vk-showcase-stock-bar-fill {
height: 100%;
width: 30%;
border-radius: 999px;
background: var(--vk-role-accent);
}
.vk-showcase .vk-showcase-card-cta {
margin-top: auto;
padding-top: .25rem;
/* Same 36px footprint as the JS card's button, so the PHP mirror's behaviour-less CTA
placeholder (and the skeleton band) keep the exact silhouette (TR2.8 / TR2.7). */
min-height: 36px;
}
/* Mockup-aligned CTA geometry and quiet gray treatment for the card's full-width add-to-cart
button only; the shared pill-btn primitive keeps its 999px primary/accent shape everywhere
else (drawers, overlay footers, quick view). Light-gray fill (`--color-gray-lightest`), dark
navy text (`--color-primary-dark`, 9.26:1), weight 700 and reduced padding per the mockup
(~8px vertical); hover darkens the fill to `--color-gray-lightest-hover` only — never blue/red.
The background needs `!important`: the button also carries `vk-showcase-pill-btn-primary`
(templates.js card CTA), whose checkout-funnel rule (`.vk-showcase .vk-showcase-pill-btn-primary`,
bottom of this file) paints `--vk-role-cta` with `!important`. This selector wins on
specificity (0,3,0) only when BOTH are `!important`; the added state
(`.vk-showcase-pill-btn-success`, 0,4,0) still beats it and turns the button green. */
.vk-showcase .vk-showcase-card-cta .vk-showcase-pill-btn {
border-radius: 24px !important;
background: var(--color-gray-lightest) !important;
color: var(--color-navy) !important;
font-weight: 600;
font-size: .8rem;
min-height: 36px;
padding: .375rem .75rem;
}
@media (hover: hover) {
.vk-showcase .vk-showcase-card-cta .vk-showcase-pill-btn:hover:not(:disabled) {
background: var(--color-gray-lightest-hover) !important;
}
}
/* Hover for the "added to cart" state: the plain card hover (0,3,2) loses to the success
base rule (0,4,0), so the green button had no hover feedback at all. This selector
(0,4,2, both !important) wins over the success base and darkens to the deeper teal
token (`--color-success-2`, white text ~7:1) instead of flipping gray. */
@media (hover: hover) {
.vk-showcase .vk-showcase-card-cta .vk-showcase-pill-btn.vk-showcase-pill-btn-success:hover:not(:disabled) {
background: var(--color-success-2) !important;
color: white !important;
}
}
@media (hover: hover) and (prefers-reduced-motion: reduce) {
.vk-showcase .vk-showcase-card-cta .vk-showcase-pill-btn:hover:not(:disabled) {
transform: none;
}
}
/* Disabled card CTA (out-of-stock / discontinued) — muted but clearly visible: near-white fill
with muted navy text (`--color-secondary`, 8.24:1), no opacity wash, no hover affordances.
Overrides the shared pill-btn `:disabled` opacity (.55) so the label stays legible. */
.vk-showcase .vk-showcase-card-cta .vk-showcase-pill-btn:disabled {
background: var(--color-gray-lightest) !important;
color: var(--color-secondary) !important;
opacity: 1;
box-shadow: none;
transform: none;
}
/* TR2.7 — skeleton bands sized to approximate the real price/CTA rows so the tile that
replaces the skeleton doesn't reflow. The title placeholder reuses `.vk-showcase-card-title`
itself (exact match) rather than a separate approximation. */
.vk-showcase .vk-showcase-skeleton-price {
height: 1.1rem;
margin-top: .25rem;
}
/* TR6.1 — skeleton band for the social-proof row (same 1rem height as the real row), emitted
only when the row can render real data (payload carries avg_rating or sold_count). */
.vk-showcase .vk-showcase-skeleton-social-proof {
height: 1rem;
}
/* TR2.5 — skeleton band for the panels signal row (cards keep the real panel chips after the
stock-signal removal; same 1.25rem height as the panels row so the swap does not reflow). */
.vk-showcase .vk-showcase-skeleton-signal {
height: 1.25rem;
}
.vk-showcase .vk-showcase-skeleton-cta {
height: 36px;
border-radius: 12px;
margin-top: auto;
}
/* ==========================================================================
R3: Filter drawer (TR3.1-TR3.7)
Off-canvas trigger, badge, drawer shell, category facet list and applied-filter chips.
The drawer panel/scrim reuse the shared overlay primitives above (`.vk-showcase-overlay-panel`,
`.vk-showcase-overlay-scrim`, D15) driven by `showcase/overlay.js`; `.vk-showcase-filter-drawer`
only narrows the shared panel's default width for this one instance so Quick View (R4) and the
cart drawer (R5) keep their own width unaffected.
========================================================================== */
/* Utility: visually hidden but still focusable-by-script and readable by fillSelect()/
buildQuery() in catalog.js — not `hidden` or `display:none`, so its `.value` keeps working
exactly like any other form control the fork's JS reads. Not scoped to `.vk-showcase` on
purpose: it is a generic accessibility utility, reused verbatim from the common
sr-only pattern, and carries the `vk-showcase-` prefix only to stay namespaced to the fork. */
.vk-showcase-visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* TR3.1 — 320-360px right slide-over on desktop; the shared panel's mobile full-screen-sheet
rule (showcase.css :269-284) already applies unchanged below 768px (D10, no JS branch). */
.vk-showcase-filter-drawer {
width: min(360px, 100%);
}
@media (max-width: 767px) {
.vk-showcase-filter-drawer {
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
height: 100dvh;
max-height: none;
border-radius: 0;
}
}
.vk-showcase .vk-showcase-filter-drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--color-gray-lightest);
}
.vk-showcase .vk-showcase-filter-drawer-title {
font-family: var(--vk-font-stack);
font-weight: 800;
font-size: 1.1rem;
color: var(--vk-role-dark);
margin: 0;
}
.vk-showcase .vk-showcase-filter-drawer-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50% !important;
border: none;
color: var(--color-gray-lightest);
background: var(--vk-role-dark) !important;
}
.vk-showcase .vk-showcase-filter-drawer-body {
flex: 1 1 auto;
overflow-y: auto;
padding: 1rem 1.25rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.vk-showcase .vk-showcase-filter-section-title {
font-family: var(--vk-font-stack);
font-weight: 700;
font-size: .875rem;
color: var(--vk-role-dark);
margin: 0 0 .5rem;
display: block;
}
/* TR3.5 — single-select facet list, radio semantics via `role="radio"`/`aria-checked` on each
row (never `type="checkbox"`, see the inline note in `_filter_drawer.php`). */
.vk-showcase .vk-showcase-facet-list {
display: flex;
flex-direction: column;
gap: .25rem;
}
.vk-showcase .vk-showcase-facet-row {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: .5rem !important;
width: 100% !important;
text-align: left !important;
border: 1px solid var(--color-gray-lightest) !important;
border-color: var(--vk-role-cta) !important;
background: white !important;
border-radius: 24px !important;
padding: .4rem .75rem !important;
font-family: var(--vk-font-stack) !important;
font-size: .875rem !important;
color: var(--vk-role-dark) !important;
transition: background-color .18s ease, border-color .18s ease !important;
}
@media (hover: hover) {
.vk-showcase .vk-showcase-facet-row:hover:not(.vk-showcase-facet-row-selected) {
background: var(--color-gray-lightest) !important;
border-color: var(--color-gray-light) !important;
}
}
/* TR3.4 — facet count from `product_count` (StoreCategoryModel.php:26). Muted per D3 (never
`--color-gray-dark`, insufficient contrast on white). */
.vk-showcase .vk-showcase-facet-count {
color: var(--vk-role-muted);
font-weight: 500;
}
.vk-showcase .vk-showcase-facet-row-selected {
border-color: var(--vk-role-cta) !important;
background: var(--color-white-blue) !important;
}
.vk-showcase .vk-showcase-facet-row-selected .vk-showcase-facet-name {
font-weight: 600;
}
.vk-showcase .vk-showcase-filter-price-row {
display: flex;
align-items: center;
gap: .5rem;
}
/* Numeric filter inputs: the `number` class marks form-control inputs that must stay
numeric — spinner-less, tabular figures (same pattern as the PDP quantity stepper). */
.vk-showcase .vk-showcase-filter-price-row .number {
-moz-appearance: textfield;
font-variant-numeric: tabular-nums;
}
.vk-showcase .vk-showcase-filter-price-row .number::-webkit-outer-spin-button,
.vk-showcase .vk-showcase-filter-price-row .number::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.vk-showcase .vk-showcase-filter-price-sep {
color: var(--vk-role-muted);
}
/* TR6.5 — quick-set price presets (mockup semantics: Hasta $20 / $20 a $50 / $50+). Each sets
the min/max inputs and applies immediately (filterDrawer.js). `!important` on radius/color
defends the app-colors.css unscoped `button` rule (same mechanism as `.vk-showcase-pill-btn`). */
.vk-showcase .vk-showcase-price-presets {
display: flex;
gap: .5rem;
margin-top: .625rem;
flex-wrap: wrap;
}
.vk-showcase .vk-showcase-price-preset {
flex: 1 1 auto !important;
padding: .3rem .5rem !important;
border: 1px solid var(--color-plan-essential) !important;
border-radius: 24px !important;
background: white !important;
color: var(--color-plan-essential) !important;
font-family: var(--vk-font-stack) !important;
font-size: .8rem !important;
font-weight: 600 !important;
white-space: nowrap !important;
transition: background-color .18s ease, border-color .18s ease !important;
}
@media (hover: hover) {
.vk-showcase .vk-showcase-price-preset:hover {
border-color: var(--vk-role-cta);
background: var(--color-white-blue);
}
}
.vk-showcase .vk-showcase-filter-drawer-footer {
display: flex;
flex-direction: column;
gap: .5rem;
padding: 1rem 1.25rem;
border-top: 1px solid var(--color-gray-lightest);
background: white !important;
}
/* Apply button inside drawer footer — explicit colors since .vk-showcase-pill-btn-primary
was removed from the global scope to prevent conflicts. !important needed to win over
the unscoped UBold `button` rule that sets a background on any button element. */
.vk-showcase .vk-showcase-filter-drawer-footer .vk-showcase-pill-btn[type="submit"] {
background: var(--color-navy-deep) !important;
color: var(--vk-role-cta-contrast) !important;
font-weight: 600 !important;
}
@media (hover: hover) {
.vk-showcase .vk-showcase-filter-drawer-footer .vk-showcase-pill-btn[type="submit"]:hover:not(:disabled) {
background: var(--color-primary-dark) !important;
}
}
/* Clear / outline button inside footer */
.vk-showcase .vk-showcase-filter-drawer-footer .vk-showcase-pill-btn-outline {
background: transparent !important;
color: var(--vk-role-cta) !important;
border: 1px solid var(--vk-role-cta) !important;
}
/* TR3.2 — always-visible toolbar row above the grid: search stays reachable outside the
drawer, the trigger is `position: sticky` so it stays reachable while scrolling a long
result page (TR3.2's 360px check). */
.vk-showcase .vk-showcase-filter-toolbar {
display: flex;
gap: .75rem;
flex-wrap: wrap;
position: sticky;
top: 0;
z-index: 10;
padding: .35rem 0;
}
.vk-showcase .vk-showcase-filter-toolbar-search {
flex: 1 1 220px;
min-width: 0;
}
.vk-showcase .vk-showcase-filter-trigger {
position: relative;
flex: 0 0 auto;
min-height: auto !important;
border-radius: 6px !important;
padding: .25rem .6rem !important;
font-size: .85rem;
}
/* Badge absent at zero active filters (`hidden` attribute, TR3.2) — never a "0" pill.
Redesigned as an inline count pill rather than an absolute-positioned dot. */
.vk-showcase .vk-showcase-filter-trigger-badge {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: var(--vk-role-cta) !important;
color: white !important;
font-size: .65rem !important;
font-weight: 600 !important;
line-height: 1 !important;
min-width: 16px !important;
height: 16px !important;
padding: 0 4px !important;
border-radius: 8px !important;
vertical-align: middle !important;
margin-left: .2rem !important;
}
/* The `hidden` attribute must win over the pill's `display: inline-flex !important`
(higher specificity) so the badge disappears when zero filters are active (TR3.2). */
.vk-showcase .vk-showcase-filter-trigger-badge[hidden] {
display: none !important;
}
/* TR3.6 — one removable chip per active filter, above the grid. */
.vk-showcase .vk-showcase-filter-chips {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin-top: .5rem;
}
.vk-showcase .vk-showcase-filter-chips:empty {
margin-top: 0;
}
/* TR6.4 — category chips row above the filter toolbar (mockup geometry: pill chips with an MDI
icon prefix, first chip "Todos", horizontal scroll on narrow screens, active chip in the dark
primary style). Populated by filterDrawer.js from the real categories endpoint; the active
state mirrors `#store-category`, so drawer facets and chips can never disagree.
`!important` on radius/color defends the app-colors.css unscoped `button` rule. */
.vk-showcase .vk-showcase-category-chips {
display: flex;
align-items: center;
gap: .5rem;
overflow-x: auto;
padding: .25rem 0 .5rem;
scrollbar-width: none;
}
.vk-showcase .vk-showcase-category-chips::-webkit-scrollbar {
display: none;
}
.vk-showcase .vk-showcase-category-chip {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: .375rem;
padding: .25rem .6rem;
border: 1px solid var(--color-gray-lightest);
border-radius: 6px !important;
background: white;
color: var(--vk-role-dark) !important;
font-family: var(--vk-font-stack);
font-size: .85rem;
font-weight: 600;
white-space: nowrap;
transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
@media (hover: hover) {
.vk-showcase .vk-showcase-category-chip:hover {
border-color: var(--vk-role-cta);
background: var(--color-white-blue);
}
}
.vk-showcase .vk-showcase-category-chip-active,
.vk-showcase .vk-showcase-category-chip[aria-pressed="true"] {
border-color: var(--vk-role-cta);
background: var(--vk-role-cta);
color: white !important;
}
.vk-showcase .vk-showcase-filter-chip {
display: inline-flex;
align-items: center;
gap: .375rem;
border-radius: 6px;
background: var(--color-white-blue);
color: var(--vk-role-dark);
font-family: var(--vk-font-stack);
font-size: .8rem;
font-weight: 600;
padding: .2rem .3rem .2rem .5rem;
}
.vk-showcase .vk-showcase-filter-chip-remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border: none;
border-radius: 4px;
background: transparent;
color: var(--vk-role-dark) !important;
font-size: .75rem;
}
/* ===== R4: Quick View =====
* PHASE-R4 (TR4.1, TR4.3, TR4.4) — the Quick View overlay opened from the catalog card.
* `.vk-showcase-quickview-panel` is a sibling of the R1 drawer panel, not a reuse of it: D10
* asks for a *centered modal* at >=768px here, where the drawer primitive is a right slide-over
* at that width, so this needed its own geometry. It still shares the drawer's backdrop
* (`.vk-showcase-overlay-scrim`, no changes needed) and its open/close state class
* (`.vk-showcase-overlay-open`, toggled by the one shared `showcase/overlay.js`, D15).
*
* The panel carries `vk-showcase` (in addition to its own class) so that everything rendered
* inside it — `.vk-showcase-price`, `.vk-showcase-badge-stock-*`, `.vk-showcase-pill-btn`,
* `.vk-showcase-qty-group`, the skeleton classes above — resolves through their existing
* `.vk-showcase .x` descendant selectors without a single one being redefined here. Like the
* scrim/panel primitives above, this section's own selectors are bare (not `.vk-showcase`-
* prefixed) for the same reason: the node sits outside the normal page flow.
*/
.vk-showcase-quickview-panel {
position: fixed;
top: 50%;
left: 50%;
width: min(512px, calc(100% - 32px));
max-height: 85vh;
background: white !important;
display: flex;
flex-direction: column;
border-radius: 24px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
opacity: 0;
pointer-events: none;
transform: translate(-50%, -50%) scale(.95);
transition: transform .3s ease, opacity .3s ease;
z-index: 1045;
overflow: hidden;
}
.vk-showcase-quickview-panel.vk-showcase-overlay-open {
opacity: 1;
pointer-events: auto;
transform: translate(-50%, -50%) scale(1);
}
/* Bottom sheet below 768px (D10) — same DOM node, no JS presentation branch. */
@media (max-width: 767px) {
.vk-showcase-quickview-panel {
top: auto;
left: 0;
right: 0;
bottom: 0;
width: 100%;
max-height: 90vh;
border-radius: 12px 12px 0 0;
transform: translateY(100%);
}
.vk-showcase-quickview-panel.vk-showcase-overlay-open {
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
.vk-showcase-quickview-panel {
transition: none;
}
}
.vk-showcase-quickview-header {
/* Close button removed from header flex flow and absolutely positioned over image */
}
.vk-showcase-quickview-close {
position: absolute;
top: .75rem;
right: .75rem;
z-index: 10;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: none;
border-radius: 999px;
background: color-mix(in srgb, var(--vk-role-dark) 50%, transparent) !important;
color: white !important;
font-size: 1rem;
backdrop-filter: blur(12px);
}
.vk-showcase-quickview-close:hover {
background: var(--vk-role-dark) !important;
}
.vk-showcase-quickview-body {
flex: 1 1 auto;
overflow-y: auto;
padding: 0;
}
.vk-showcase-quickview-gallery {
position: relative;
}
.vk-showcase-quickview-gallery-main {
aspect-ratio: 1 / 1;
background: var(--color-gray-lightest) !important;
border-radius: 0;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.vk-showcase-quickview-gallery-main img,
.vk-showcase-quickview-gallery-main video {
width: 100%;
height: 100%;
object-fit: cover;
}
.vk-showcase-quickview-info {
padding: 1.25rem;
display: flex;
flex-direction: column;
gap: .5rem;
}
.vk-showcase-quickview-thumbs {
display: flex;
gap: .5rem;
overflow-x: auto;
padding: 0.5rem 1.25rem 0;
}
.vk-showcase-quickview-thumb {
flex: 0 0 auto;
width: 56px;
height: 56px;
padding: 0;
border: 2px solid transparent !important;
border-radius: 6px;
background: none !important;
overflow: hidden;
cursor: pointer;
}
.vk-showcase-quickview-thumb[aria-current="true"] {
border-color: var(--vk-role-cta) !important;
}
.vk-showcase-quickview-signals {
display: flex;
flex-direction: column;
gap: .375rem;
}
.vk-showcase-quickview-info .vk-showcase-card-social-proof {
margin: 0;
}
.vk-showcase-quickview-meta {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.25rem;
}
.vk-showcase-quickview-desc {
font-size: 0.75rem;
color: var(--vk-role-muted) !important;
line-height: 1.6;
margin: 0;
}
/* TR4.4 — sticky CTA bar. It is the last flex child of the panel, outside
`.vk-showcase-quickview-body`'s own scroll container, so it stays pinned while the body
scrolls without any `position: sticky` + scroll-parent bookkeeping. */
.vk-showcase-quickview-cta {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.75rem;
padding: 1rem 1.25rem;
border-top: 1px solid var(--color-gray-lightest) !important;
background: white !important;
}
.vk-showcase-quickview-cta-actions {
display: flex;
align-items: center;
gap: 0.5rem;
flex: 0 0 auto;
}
/* Price block moved into the product info area (above the CTA bar) so the bottom
actions get full width; mirrors the PDP hierarchy: title -> price -> panels. */
.vk-showcase-quickview-price-wrap {
display: flex;
align-items: baseline;
gap: 0.5rem;
margin: .25rem 0 .5rem;
}
.vk-showcase-quickview-price-wrap .vk-showcase-price {
font-size: 1.5rem;
font-weight: 900 !important;
color: var(--vk-role-cta) !important;
}
.vk-showcase-quickview-price-wrap .vk-showcase-price-previous {
font-size: 0.75rem;
color: var(--color-gray) !important;
text-decoration: line-through;
}
/* Share icon-only button */
.vk-showcase-pill-btn-icon {
width: 2.25rem !important;
height: 2.25rem !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 50% !important;
background: var(--color-gray-lightest) !important;
color: var(--color-gray-dark, #555) !important;
border: none !important;
font-size: 1rem;
transition: background 0.2s ease, color 0.2s ease;
flex-shrink: 0;
}
.vk-showcase-pill-btn-icon:hover {
background: var(--color-gray-light) !important;
color: var(--vk-role-cta) !important;
}
.vk-showcase-pill-btn-icon.vk-showcase-pill-btn-success {
background: var(--color-success, #10b981) !important;
color: #fff !important;
}
/* Scoped pill-btn overrides inside the CTA actions */
.vk-showcase-quickview-cta-actions .vk-showcase-pill-btn-outline {
padding: 0.6rem 1rem !important;
font-weight: 600 !important;
font-size: 0.7rem !important;
border-radius: 12px !important;
border: 1.5px solid var(--vk-role-cta) !important;
color: var(--vk-role-cta) !important;
background: transparent !important;
white-space: nowrap;
transition: all 0.2s ease;
text-decoration: none !important;
display: inline-flex;
align-items: center;
}
.vk-showcase-quickview-cta-actions .vk-showcase-pill-btn-outline:hover {
background: var(--vk-role-cta) !important;
color: #fff !important;
}
.vk-showcase-quickview-cta-actions .vk-showcase-pill-btn-primary {
padding: 0.6rem 1.25rem !important;
background: var(--vk-role-cta) !important;
color: white !important;
font-weight: 600 !important;
font-size: 0.7rem !important;
border-radius: 12px !important;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
white-space: nowrap;
border: none !important;
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.vk-showcase-quickview-cta-actions .vk-showcase-pill-btn-primary:hover {
opacity: 0.9;
}
/* Legacy fallback: keep old selector working for the primary btn outside actions */
.vk-showcase-quickview-cta > .vk-showcase-pill-btn {
padding: 0.75rem 1.5rem;
background: var(--vk-role-cta) !important;
color: white !important;
font-weight: 600 !important;
font-size: 0.75rem;
border-radius: 12px !important;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.vk-showcase-quickview-cta > .vk-showcase-pill-btn:hover {
opacity: 0.9;
}
.vk-showcase-quickview-skeleton-media {
aspect-ratio: 1 / 1;
width: 100%;
border-radius: 12px;
}
.vk-showcase-quickview-skeleton-title {
height: 1.4rem;
margin-top: .875rem;
}
.vk-showcase-quickview-error {
padding: 2rem 0;
text-align: center;
}
/* ========================================================================
PHASE-R5 — cart drawer (TR5.1)
The panel keeps one DOM node across breakpoints. Its list is the only scroll container;
the footer remains pinned by the shared overlay panel flex layout.
======================================================================== */
.vk-showcase-cart-drawer {
width: min(480px, 100%);
}
.vk-showcase-cart-header {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--color-gray-lightest) !important;
background: white !important;
}
.vk-showcase-cart-title {
margin: 0;
color: var(--color-primary-dark) !important;
font-family: var(--vk-font-stack);
font-size: 1.25rem;
font-weight: 500 !important;
}
.vk-showcase-cart-close,
.vk-showcase-cart-remove {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
border: 0;
border-radius: 999px;
background: transparent !important;
color: var(--color-primary-dark) !important;
}
/* Light close button: hairline border on white, soft blue fill on hover
(--color-white-blue), matching the integrated header instead of the old
dark-bar circle. Kept separate from `.vk-showcase-cart-remove`, which stays
borderless inside the list. */
.vk-showcase-cart-close {
border: 1px solid var(--color-gray-light) !important;
transition: background-color .15s ease;
}
.vk-showcase-cart-close:hover {
background: var(--color-white-blue) !important;
}
.vk-showcase-cart-body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding: 1rem 1.25rem;
}
.vk-showcase-cart-list {
display: flex;
flex-direction: column;
gap: .75rem;
margin: 0;
padding: 0;
list-style: none;
}
.vk-showcase-cart-row {
display: grid;
grid-template-columns: 70px minmax(0, 1fr);
gap: .75rem;
padding-bottom: .75rem;
border-bottom: 1px solid var(--color-gray-lightest) !important;
}
.vk-showcase-cart-row:last-child {
border-bottom: 0;
}
.vk-showcase-cart-row-busy {
opacity: .6;
}
.vk-showcase-cart-image {
width: 70px;
height: 70px;
object-fit: contain;
border-radius: 8px;
background: var(--color-gray-lightest) !important;
}
.vk-showcase-cart-item-details {
min-width: 0;
display: flex;
flex-direction: column;
gap: .2rem;
}
.vk-showcase-cart-item-name {
color: var(--color-primary-dark) !important;
font-family: var(--vk-font-stack);
font-weight: 600 !important;
overflow-wrap: anywhere;
}
.vk-showcase-cart-item-price,
.vk-showcase-cart-item-total {
color: var(--color-secondary) !important;
font-size: .85rem;
font-variant-numeric: tabular-nums;
}
.vk-showcase-cart-item-total {
color: var(--color-primary-dark) !important;
font-weight: 600 !important;
}
.vk-showcase-cart-item-actions {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
}
.vk-showcase-cart-stepper {
display: inline-flex;
align-items: center;
border: 1px solid var(--color-gray-light) !important;
border-radius: 999px;
overflow: hidden;
}
.vk-showcase-cart-stepper-button {
min-width: 44px;
min-height: 44px;
border: 0;
background: transparent !important;
color: var(--color-primary-dark) !important;
font-size: 1.1rem;
transition: background-color .15s ease, color .15s ease;
}
.vk-showcase-cart-stepper-button:disabled {
color: var(--color-gray) !important;
cursor: not-allowed;
}
/* Hover/active fills must be !important: the base `background: transparent !important` would
otherwise beat a non-important hover background regardless of specificity. */
.vk-showcase-cart-stepper-button:hover:not(:disabled) {
background: var(--color-white-blue) !important;
}
.vk-showcase-cart-stepper-button:active:not(:disabled) {
background: var(--color-gray-lightest) !important;
}
.vk-showcase-cart-stepper-button:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: -2px;
}
.vk-showcase-cart-quantity {
width: 3rem;
min-height: 44px;
padding: .25rem;
border: 0;
color: var(--color-primary-dark) !important;
text-align: center;
}
.vk-showcase-cart-quantity:focus {
box-shadow: none;
}
.vk-showcase-cart-remove {
background: transparent !important;
color: var(--color-primary-dark) !important;
}
.vk-showcase-cart-footer {
flex: 0 0 auto;
padding: 1rem 1.25rem;
border-top: 1px solid var(--color-gray-lightest) !important;
background: white !important;
}
.vk-showcase-cart-subtotal {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
color: var(--color-primary-dark) !important;
font-weight: 600 !important;
font-variant-numeric: tabular-nums;
}
.vk-showcase-cart-note {
margin: .5rem 0 1rem;
color: var(--color-secondary) !important;
font-size: .85rem;
}
.vk-showcase-cart-state {
padding: 2rem .5rem;
color: var(--color-secondary) !important;
text-align: center;
}
.vk-showcase-cart-state-title {
margin-bottom: .5rem;
color: var(--color-primary-dark) !important;
font-family: var(--vk-font-stack);
font-weight: 800 !important;
}
.vk-showcase-cart-state .vk-showcase-pill-btn {
width: 100%;
margin-top: .5rem;
}
.vk-showcase-cart-guest-count {
margin-bottom: .35rem;
color: var(--color-primary-dark) !important;
font-weight: 600 !important;
font-variant-numeric: tabular-nums;
}
.vk-showcase-cart-guest-actions {
display: grid;
gap: .5rem;
margin-top: 1rem;
}
.vk-showcase-visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
@media (max-width: 767px) {
.vk-showcase-cart-drawer {
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
max-height: none;
border-radius: 0;
transform: translateY(100%);
}
.vk-showcase-cart-drawer.vk-showcase-overlay-open {
transform: translateY(0);
}
}
.vk-showcase-cart-drawer[hidden] {
display: none;
}
.vk-showcase-cart-drawer .vk-showcase-pill-btn-primary {
background: var(--vk-role-cta) !important;
color: var(--vk-role-cta-contrast) !important;
font-weight: 600 !important;
}
@media (hover: hover) {
.vk-showcase-cart-drawer .vk-showcase-pill-btn-primary:hover:not(:disabled) {
background: var(--color-primary-dark) !important;
}
}
/* ======================== PDP REDESIGN ======================== */
.vk-showcase .vk-pdp-product-title {
font-size: 1.6rem !important;
font-weight: 900 !important;
line-height: 1.25 !important;
color: var(--vk-role-cta) !important;
}
/* Scoped to .vk-pdp-price so it never bleeds into the catalog cards (which use the generic
.vk-showcase-price at 1.1rem/.85rem in the mobile MQ). No !important: PDP specificity (0,2,0)
already wins over the base card-price rule, and the MQ media query at the bottom of this file
still applies cleanly to the cards because they no longer match this selector. */
.vk-showcase .vk-pdp-price {
font-family: var(--vk-font-stack);
font-variant-numeric: tabular-nums;
color: var(--color-plan-essential);
font-size: 2rem;
font-weight: 600;
}
/* Add-to-cart: outline CTA. 1px border + subtle hover lift (small, per design request).
Hover swaps the white fill for --color-white-blue and the border to --color-primary-dark
(contrast: --color-white-blue bg + --vk-role-cta text ~9.8:1 — passes AA). Text stays CTA. */
.vk-showcase .vk-pdp-btn-add-cart {
border: 1px solid var(--vk-role-cta) !important;
background: white !important;
color: var(--vk-role-cta) !important;
padding: 14px 24px !important;
border-radius: 14px !important;
font-weight: 600 !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}
.vk-showcase .vk-pdp-btn-add-cart:hover:not(:disabled) {
background: var(--color-white-blue) !important;
border-color: var(--color-primary-dark) !important;
box-shadow: 0 6px 14px rgba(0,0,0,0.10) !important;
transform: translateY(-1px);
}
.vk-showcase .vk-pdp-btn-buy-now {
background: var(--vk-role-cta) !important;
color: white !important;
padding: 14px 24px !important;
border-radius: 14px !important;
font-weight: 600 !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important;
border: 2px solid var(--vk-role-cta) !important;
transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}
/* Buy-now hover darkens to --color-primary-dark (white text ~15:1 — passes AA). */
.vk-showcase .vk-pdp-btn-buy-now:hover:not(:disabled) {
background: var(--color-primary-dark) !important;
border-color: var(--color-primary-dark) !important;
box-shadow: 0 6px 14px rgba(0,0,0,0.16) !important;
transform: translateY(-1px);
}
/* Press-down feel for both PDP CTAs (resets the hover lift). Must follow the hover rules
in source order so it wins the equal-specificity match. */
.vk-showcase .vk-pdp-btn-add-cart:active:not(:disabled),
.vk-showcase .vk-pdp-btn-buy-now:active:not(:disabled) {
transform: translateY(0);
}
/* Reduced motion drops the hover lift, keeps the color/elevation cue (file-wide pattern). */
@media (hover: hover) and (prefers-reduced-motion: reduce) {
.vk-showcase .vk-pdp-btn-add-cart:hover:not(:disabled),
.vk-showcase .vk-pdp-btn-buy-now:hover:not(:disabled) {
transform: none;
}
}
.vk-showcase .vk-pdp-gallery {
display: flex;
flex-direction: column;
gap: 12px;
}
.vk-showcase .vk-pdp-gallery-main-wrap {
position: relative;
border-radius: 16px;
overflow: hidden;
background: var(--color-gray-lightest);
}
.vk-showcase .vk-pdp-gallery-zoom {
position: absolute;
top: 12px;
right: 12px;
z-index: 10;
background: rgba(255,255,255,0.8);
border: none;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
color: var(--color-primary-dark) !important;
}
.vk-showcase .vk-pdp-thumbs {
display: flex;
gap: 8px;
overflow-x: auto;
padding-bottom: 4px;
}
.vk-showcase .vk-pdp-thumb-btn {
border: 2px solid transparent;
background: transparent;
padding: 0;
border-radius: 8px;
overflow: hidden;
width: 60px;
height: 60px;
flex-shrink: 0;
opacity: 0.6;
transition: all 0.2s;
}
.vk-showcase .vk-pdp-thumb-btn.active {
border-color: var(--vk-role-cta);
opacity: 1;
}
.vk-pdp-media-modal {
position: fixed;
inset: 0;
z-index: 1050;
display: flex;
align-items: center;
justify-content: center;
}
.vk-pdp-media-modal[hidden] {
display: none !important;
}
.vk-pdp-media-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.9);
}
.vk-pdp-media-modal-content {
position: relative;
z-index: 1051;
max-width: 90vw;
max-height: 90vh;
}
.vk-pdp-media-modal-content img,
.vk-pdp-media-modal-content video {
max-width: 100%;
max-height: 90vh;
object-fit: contain;
}
.vk-pdp-media-modal-close {
position: absolute;
top: -40px;
right: 0;
background: transparent;
border: none;
color: white;
font-size: 24px;
cursor: pointer;
}
.vk-showcase .vk-pdp-trust-bar {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
flex-wrap: wrap !important;
gap: 10px !important;
background: transparent !important;
padding: 0 !important;
border-radius: 0 !important;
}
.vk-showcase .vk-pdp-trust-item {
display: flex !important;
align-items: center !important;
gap: 7px !important;
font-size: 0.78rem !important;
font-weight: 600 !important;
color: var(--color-primary-dark) !important;
border-radius: 10px !important;
padding: 7px 0px !important;
}
.vk-showcase .vk-pdp-trust-item i {
color: var(--vk-role-cta) !important;
font-size: 1rem !important;
flex-shrink: 0 !important;
}
.vk-showcase .vk-pdp-share-row {
padding-top: 8px;
}
.vk-showcase .vk-pdp-tabs-card {
background: white;
border-radius: 16px;
overflow: hidden;
}
.vk-showcase .vk-pdp-tab-nav {
display: flex;
border-bottom: 1px solid var(--color-gray-light);
overflow-x: auto;
}
.vk-showcase .vk-pdp-tab-btn {
background: transparent;
border: none;
padding: 16px 24px;
font-weight: 600;
color: var(--vk-role-muted);
white-space: nowrap;
border-bottom: 3px solid transparent;
}
.vk-showcase .vk-pdp-tab-btn.active {
color: var(--color-navy) !important;
background: white;
}
.vk-showcase .vk-pdp-tab-panel {
padding: 24px;
}
.vk-showcase .vk-pdp-reviews-card {
background: white !important;
border: 1px solid var(--color-gray-light) !important;
border-radius: 16px;
padding: 24px;
}
/* Reviews header: title, divider, verified note below the line. */
.vk-showcase .vk-pdp-reviews-header {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 20px;
}
.vk-showcase .vk-pdp-reviews-title {
font-size: 1.25rem;
font-weight: 800;
color: var(--color-navy-title) !important;
margin-bottom: 0;
}
.vk-showcase .vk-pdp-reviews-divider {
border-top: 1px solid var(--color-gray-light);
margin: .5rem 0;
}
.vk-showcase .vk-pdp-reviews-note {
font-size: 0.8rem;
color: var(--vk-role-muted) !important;
}
/* Summary box: score block stacked, distribution bars full width below. */
.vk-showcase .vk-pdp-reviews-summary {
display: flex;
flex-direction: column;
gap: 16px;
}
/* Desktop (xl and up): score block on the left, distribution bars on the right —
bars keep a readable 200px minimum. Below xl the summary stays stacked because
the col-md-4 column (~230-290px at md/lg) cannot fit score + 200px bars + gap;
forcing the row there overflows the column and overlaps the review list next
to it. flex-wrap is a safety net for any wider score content. */
@media (min-width: 1200px) {
.vk-showcase .vk-pdp-reviews-summary {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 20px;
}
.vk-showcase .vk-pdp-reviews-bars {
min-width: 200px;
flex: 1 1 auto;
}
}
.vk-showcase .vk-pdp-reviews-score {
text-align: center;
}
.vk-showcase .vk-pdp-reviews-score-number {
font-size: 3rem;
font-weight: 900;
line-height: 1;
color: var(--color-navy-title) !important;
}
.vk-showcase .vk-pdp-reviews-stars {
color: var(--color-sky-bright) !important;
font-size: 1.2rem;
letter-spacing: 2px;
}
.vk-showcase .vk-pdp-reviews-count {
font-size: 0.8rem;
color: var(--vk-role-muted) !important;
}
.vk-showcase .vk-pdp-reviews-bars {
display: flex;
flex-direction: column;
gap: 6px;
}
.vk-showcase .vk-pdp-reviews-bar-row {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.75rem;
color: var(--vk-role-muted) !important;
}
.vk-showcase .vk-pdp-reviews-bar-label {
min-width: 24px;
}
.vk-showcase .vk-pdp-bar {
flex: 1 1 auto;
height: 8px;
background: var(--color-gray-light) !important;
border-radius: 999px;
overflow: hidden;
}
.vk-showcase .vk-pdp-bar-fill {
height: 100%;
background: var(--color-sky-bright) !important;
border-radius: 999px;
}
.vk-showcase .vk-pdp-reviews-bar-pct {
min-width: 34px;
text-align: right;
font-variant-numeric: tabular-nums;
}
.vk-showcase .vk-pdp-reviews-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.vk-showcase .vk-pdp-review-card {
padding: 16px;
background: white !important;
border-radius: 12px;
}
.vk-showcase .vk-pdp-review-meta {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 8px;
}
.vk-showcase .vk-pdp-review-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--color-gray) !important;
color: white !important;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 0.85rem;
overflow: hidden;
flex-shrink: 0;
}
.vk-showcase .vk-pdp-review-avatar-img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
display: block;
}
.vk-showcase .vk-pdp-review-author {
display: block;
color: var(--color-navy-title) !important;
}
.vk-showcase .vk-pdp-review-meta-line {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
font-size: 0.72rem;
color: var(--vk-role-muted) !important;
}
.vk-showcase .vk-pdp-review-meta-sep {
color: var(--color-gray) !important;
}
.vk-showcase .vk-pdp-review-verified {
font-weight: 600;
}
.vk-showcase .vk-pdp-review-stars {
color: var(--color-sky-bright) !important;
font-size: 0.9rem;
}
.vk-showcase .vk-pdp-review-body {
color: var(--vk-role-dark) !important;
margin: 0;
font-size: 0.9rem;
}
/* PR4 — PDP social-proof badge under the title. REAL data only: `avg_rating`/`review_count`
(live store_product_reviews) and `sold_count` (paid store_order_items), each half omitted
when null/zero. Star glyph uses --vk-role-star; the counts use the D3 muted pair. */
.vk-showcase .vk-pdp-social-proof {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .75rem;
font-size: .85rem;
}
.vk-showcase .vk-pdp-rating {
display: inline-flex;
align-items: center;
gap: .5rem;
}
.vk-showcase .vk-pdp-rating-value {
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--vk-role-dark) !important;
}
.vk-showcase .vk-pdp-rating-stars {
display: inline-flex;
gap: 1px;
color: var(--color-accent-alt) !important;
font-size: .9rem;
}
.vk-showcase .vk-pdp-rating-link {
color: var(--vk-role-muted) !important;
font-weight: 600;
text-decoration: none;
}
.vk-showcase .vk-pdp-rating-link:hover {
text-decoration: underline;
}
.vk-showcase .vk-pdp-rating-sep {
color: var(--vk-role-muted) !important;
}
.vk-showcase .vk-pdp-sold {
display: inline-flex;
align-items: center;
gap: .3rem;
color: var(--vk-role-muted) !important;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
/* PR4 — empty/error states for the review list (SSR and client-rendered share this). */
.vk-showcase .vk-pdp-reviews-empty {
padding: 12px 0;
color: var(--vk-role-dark) !important;
}
/* Load-more: outline pill, mirrors the share-button pattern (outline plan-essential). */
.vk-showcase .vk-pdp-reviews-more {
margin-top: 20px;
display: flex;
justify-content: center;
}
.vk-showcase .vk-pdp-reviews-more-btn {
display: inline-flex !important;
align-items: center !important;
border: 1px solid var(--color-plan-essential) !important;
border-radius: 24px !important;
background: transparent !important;
color: var(--color-plan-essential) !important;
font-weight: 600 !important;
padding: .45rem 1.4rem;
transition: background-color .18s ease, color .18s ease;
}
.vk-showcase .vk-pdp-reviews-more-btn:hover:not(:disabled) {
background: var(--color-plan-essential) !important;
color: white !important;
}
.vk-showcase .vk-pdp-reviews-more-btn:focus-visible {
outline: 2px solid var(--color-plan-essential);
outline-offset: 2px;
}
.vk-showcase .vk-pdp-reviews-more-btn:disabled {
opacity: .6;
cursor: default;
}
/* PR4 — client-rendered review card bits (reviewsSection.js). */
.vk-showcase .vk-pdp-review-card-title {
font-size: .9rem;
font-weight: 700;
color: var(--vk-role-dark) !important;
margin-bottom: 4px;
}
.vk-showcase .vk-pdp-review-stars {
display: inline-flex;
align-items: center;
gap: 1px;
}
.vk-showcase .vk-pdp-review-stars .mdi-star-outline {
color: var(--vk-role-muted) !important;
}
/* Long words (URLs, emails) must wrap inside review cards instead of overflowing. */
.vk-showcase .vk-pdp-review-body,
.vk-showcase .vk-pdp-review-card-title {
overflow-wrap: break-word;
}
/* ==========================================================================
MOBILE DENSITY (catalog + PDP container, topbar, cards) — tokens only.
========================================================================== */
@media (max-width: 575.98px) {
/* Issue 2 �?" container: edge-to-edge on phones. Padding, border and radius go away so the
catalog reads as a clean sheet; the white card box only makes sense on desktop. */
.container-fluid.vk-showcase {
padding: .5rem;
border: 0;
border-radius: 0;
margin-bottom: .5rem;
background: white;
}
/* Home header trims: page-title-box is the Ubold h4 block above the toolbar. */
.container-fluid.vk-showcase h4.page-title {
font-size: 1.15rem;
}
/* Toolbar: tighter padding on phones; sticky row keeps full-bleed width. */
.vk-showcase .vk-showcase-filter-toolbar {
padding: .35rem 0;
}
.vk-showcase .vk-showcase-filter-trigger {
font-size: .8rem;
padding: .2rem .5rem !important;
}
/* Issue 1 — topbar trims (scoped to .navbar-custom so sibling topbars stay untouched). */
.navbar-custom .topbar { padding: 0 .5rem; }
.navbar-custom .vk-topbar-divider { display: none !important; }
.navbar-custom .vk-topbar-store-link { padding: .25rem .5rem; }
.navbar-custom .topbar .nav-link { padding: 0 .35rem; }
.navbar-custom .topbar .nav-link .mdi { font-size: 1.15rem; }
.navbar-custom .topbar li .nav-link img { height: 16px; }
.navbar-custom .vk-topbar-account-avatar { width: 22px; height: 22px; font-size: .8rem; }
.navbar-custom .vk-topbar-account-btn { padding: .2rem; }
}
/* Issue 3 — card density on mobile (2-column grid gets ~135-145px per card). */
@media (max-width: 575.98px) {
.vk-showcase .vk-showcase-card { border: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, .06); }
.vk-showcase .vk-showcase-card-body { gap: .375rem; padding: .625rem; }
.vk-showcase .vk-showcase-card-title { font-size: .8rem; }
.vk-showcase .vk-showcase-card-social-proof { font-size: .68rem; gap: .35rem; }
.vk-showcase .vk-showcase-card-rating-star { font-size: .7rem; }
.vk-showcase .vk-showcase-price { font-size: .85rem; }
.vk-showcase .vk-showcase-price-previous { font-size: .62rem; }
.vk-showcase .vk-showcase-badge { font-size: .6rem; padding: .2rem .45rem; }
.vk-showcase .vk-showcase-card-badges-left,
.vk-showcase .vk-showcase-card-badges-right { top: .35rem; }
.vk-showcase .vk-showcase-card-badges-left { left: .35rem; }
.vk-showcase .vk-showcase-card-badges-right { right: .35rem; }
.vk-showcase .vk-showcase-panel-chip { font-size: .6rem; padding: .2rem .5rem; }
.vk-showcase .vk-showcase-card-cta,
.vk-showcase .vk-showcase-card-cta .vk-showcase-pill-btn { min-height: 30px; }
.vk-showcase .vk-showcase-card-cta .vk-showcase-pill-btn { font-size: .68rem; padding: .28rem .45rem; }
.vk-showcase .vk-showcase-skeleton-cta { height: 30px; }
}
/* Smallest screens: keep the REAL rating visible, drop only the sold-count label. */
@media (max-width: 374.98px) {
.vk-showcase .vk-showcase-card-sold { display: none; }
}
/* Quick view CTA on mobile: buttons stretch full width below the product info
(the price now lives in the info block above, not in this bar). */
@media (max-width: 575.98px) {
.vk-showcase-quickview-cta {
gap: .5rem;
padding: .75rem 1rem;
}
.vk-showcase-quickview-price-wrap .vk-showcase-price { font-size: 1.3rem; }
.vk-showcase-quickview-cta-actions {
width: 100%;
}
.vk-showcase-quickview-cta-actions .vk-showcase-pill-btn {
flex: 1 1 auto;
justify-content: center;
min-height: auto;
}
}
/* ==========================================================================
Checkout funnel (checkout.php, order_success.php, order_cancel.php)
The primary pill was removed from the global scope (see the filter-drawer
footer note) to prevent conflicts, so it is re-scoped here for the checkout
CTA. Tokens only: --vk-role-cta is --color-primary, its contrast token is
white (~9.7:1). .vk-checkout-thumb keeps item media at a compact 56px square.
========================================================================== */
.vk-showcase.vk-checkout .vk-checkout-summary,
.vk-showcase.vk-checkout .vk-checkout-shipping {
margin-bottom: 1.5rem;
}
.vk-showcase.vk-checkout .vk-checkout-form .form-label {
display: block;
margin-bottom: .4rem;
color: var(--vk-role-muted);
font-weight: 400;
}
.vk-showcase.vk-checkout .vk-checkout-form .form-control,
.vk-showcase.vk-checkout .vk-checkout-form .form-select {
min-height: 2.375rem;
border-color: var(--color-gray-light);
border-radius: 999px;
background-color: var(--vk-role-card-bg);
}
.vk-showcase.vk-checkout .vk-checkout-form .form-control:disabled,
.vk-showcase.vk-checkout .vk-checkout-form .form-select:disabled {
background-color: var(--color-gray-lightest);
}
.vk-showcase.vk-checkout .vk-checkout-form .form-control.is-invalid,
.vk-showcase.vk-checkout .vk-checkout-form .form-select.is-invalid {
border-color: var(--color-deficiency-text);
}
.vk-showcase.vk-checkout .vk-checkout-form textarea.form-control {
min-height: 2.375rem;
border-radius: 999px;
resize: vertical;
}
.vk-showcase.vk-checkout .vk-checkout-form .form-control:not(.is-invalid):focus,
.vk-showcase.vk-checkout .vk-checkout-form .form-select:not(.is-invalid):focus {
border-color: var(--color-accent-dark);
}
/* Select2 mirrors the native geo selects while keeping the checkout cascade intact. */
.vk-showcase.vk-checkout .vk-checkout-form .select2-container--default .select2-selection--single {
height: 2.375rem;
border: 1px solid var(--color-gray-light);
border-radius: 999px;
background-color: var(--vk-role-card-bg);
}
.vk-showcase.vk-checkout .vk-checkout-form .select2-container--disabled .select2-selection--single {
background-color: var(--color-gray-lightest);
}
.vk-showcase.vk-checkout .vk-checkout-form .select2-container--focus .select2-selection--single:not(.is-invalid) {
border-color: var(--color-accent-dark);
}
.vk-showcase.vk-checkout .vk-checkout-form .select2-selection--single.is-invalid {
border-color: var(--color-deficiency-text);
}
.vk-showcase.vk-checkout .vk-checkout-form .select2-selection--single .select2-selection__rendered {
padding-left: .875rem;
color: var(--vk-role-dark);
line-height: 2.25rem;
}
.vk-showcase.vk-checkout .vk-checkout-form .select2-selection--single .select2-selection__arrow {
height: 100%;
right: .5rem;
}
.vk-showcase .vk-showcase-pill-btn-primary {
background: var(--vk-role-cta) !important;
color: var(--vk-role-cta-contrast) !important;
font-weight: 600 !important;
}
@media (hover: hover) {
.vk-showcase .vk-showcase-pill-btn-primary:hover:not(:disabled) {
background: var(--color-primary-dark) !important;
}
}
.vk-showcase.vk-checkout .vk-checkout-redirect-note {
margin-bottom: .75rem !important;
color: var(--vk-role-muted) !important;
font-style: italic;
line-height: 1.5;
}
.vk-showcase.vk-checkout .vk-checkout-actions {
display: flex;
justify-content: flex-end;
}
.vk-showcase.vk-checkout .vk-checkout-actions .vk-showcase-pill-btn {
width: auto;
min-width: 13.75rem;
min-height: 2.375rem;
padding-block: .375rem;
}
.vk-showcase.vk-checkout .vk-checkout-thumb {
flex: 0 0 3.5rem;
width: 3.5rem;
height: 3.5rem;
aspect-ratio: 1;
object-fit: cover;
border-radius: .75rem !important;
}
/* PDP CTAs on phones: full-width 1fr/1fr grid, but compact — the desktop 14px/24px padding
renders too tall on a ~375px screen. !important needed to beat the base rules above. */
@media (max-width: 575.98px) {
.vk-showcase .vk-pdp-btn-add-cart,
.vk-showcase .vk-pdp-btn-buy-now {
padding: 10px 16px !important;
border-radius: 12px !important;
font-size: .8rem !important;
}
}
/* Max-per-order hint: neutral dark gray, per design request. */
.vk-showcase .vk-pdp-max-hint {
color: var(--color-gray-dark);
}
/* Share row: label in gray, buttons unified (outline sky-bright pill, same radius/color). */
.vk-share-label {
color: var(--color-gray-dark);
}
.vk-share-label .mdi{
color: var(--color-navy) !important;
}
.vk-share-btn {
display: inline-flex !important;
align-items: center !important;
border: 1px solid var(--color-plan-essential) !important;
border-radius: 24px !important;
background: transparent !important;
color: var(--color-plan-essential) !important;
font-weight: 600 !important;
transition: background-color .18s ease, color .18s ease, box-shadow .18s ease !important;
}
.vk-share-btn:hover {
background: var(--color-plan-essential) !important;
color: white !important;
}
.vk-share-btn:focus-visible {
outline: 2px solid var(--color-plan-essential);
outline-offset: 2px;
}
/* ========================================================================
Showcase orders surface
Loaded after store-orders.css: keep the legacy selectors for shared order
screens, while the active showcase list gets the reference layout. */
.store-orders-page .store-orders-tabs {
gap: .75rem;
margin-bottom: 2rem;
border-bottom: 0;
}
.store-orders-page .store-orders-tab {
margin-bottom: 0;
padding: .55rem 1rem;
border: 1px solid var(--color-primary) !important;
border-radius: 999px !important;
background: transparent;
color: var(--color-primary);
}
.store-orders-page .store-orders-tab:hover,
.store-orders-page .store-orders-tab:focus-visible {
border-color: var(--color-primary-dark) !important;
background: var(--color-white-blue);
color: var(--color-primary-dark);
}
.store-orders-page .store-orders-tab.is-active {
border-color: var(--color-primary-dark) !important;
background: var(--color-primary-dark) !important;
color: white !important;
}
.store-orders-page .store-orders__action {
border-radius: 999px !important;
}
.store-orders-page .store-orders__action--outline {
border-color: var(--color-primary) !important;
background: transparent !important;
color: var(--color-primary) !important;
}
.store-orders-page .store-orders__action--outline:hover,
.store-orders-page .store-orders__action--outline:focus-visible {
border-color: var(--color-primary-dark) !important;
background: var(--color-primary-dark) !important;
color: white !important;
}
.store-orders-page .store-order-list {
gap: 0;
}
.store-orders-page .store-order-card {
overflow: visible;
padding: 1.5rem 0 2rem;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.store-orders-page .store-order-card__header {
display: grid;
grid-template-columns: minmax(0, 1.35fr) repeat(4, minmax(0, 1fr));
align-items: start;
gap: 1rem;
padding: 0 0 1.25rem;
border-bottom: 1px solid var(--color-gray-light) !important;
background: transparent !important;
}
.store-orders-page .store-order-card__ship-to,
.store-orders-page .store-order-card__fact,
.store-orders-page .store-order-card__status-row {
min-width: 0;
}
.store-orders-page .store-order-card__fact {
text-align: left;
}
.store-orders-page .store-order-card__fact-value,
.store-orders-page .store-order-card__number {
display: block;
overflow-wrap: anywhere;
}
.store-orders-page .store-order-card__status-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .35rem;
padding: 0;
border: 0;
background: transparent;
}
.store-orders-page .store-order-card__status-row .store-order-meta__label {
flex-basis: 100%;
margin-bottom: .1rem;
}
.store-orders-page .store-order-card__status-row .mdi {
font-size: 1.15rem;
}
.store-orders-page .store-order-card__items {
background: transparent;
}
.store-orders-page .store-order-item-row {
padding: 1rem 0;
gap: 1rem;
}
.store-orders-page .store-order-item-row__actions {
align-items: flex-end;
}
.store-orders-page .store-order-card__footer {
padding: 1rem 0 0;
border-top: 1px solid var(--color-gray-light) !important;
background: transparent !important;
}
.store-orders-page .store-order-card__footer--review {
border-top-color: var(--color-gray-light) !important;
background: transparent !important;
}
@media (max-width: 991.98px) {
.store-orders-page .store-order-card__header {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 767.98px) {
.store-orders-page .store-order-card {
padding-block: 1.25rem 1.5rem;
}
.store-orders-page .store-order-card__header {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.store-orders-page .store-order-card__ship-to {
grid-column: 1 / -1;
}
.store-orders-page .store-order-item-row {
grid-template-columns: 5rem minmax(0, 1fr);
}
.store-orders-page .store-order-item-row__actions {
grid-column: 2;
justify-self: end;
}
}
@media (max-width: 575.98px) {
.store-orders-page .store-orders-tabs {
gap: .5rem;
margin-bottom: 1.5rem;
}
.store-orders-page .store-orders-tab {
padding-inline: .75rem;
}
.store-orders-page .store-order-item-row {
grid-template-columns: 4.5rem minmax(0, 1fr);
}
.store-orders-page .store-order-item-row__actions {
grid-column: 1 / -1;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
}
}
/* ==========================================================================
Flat-page primitives — shared surface for showcase views (orders, reviews).
Replaces the floating-card shell (.store-orders-shell) with a flat white
page: surface lives on the modifier (.vk-showcase-page), content is
centered through the __shell, and divider-based sections use __section.
Per-view modifiers (vk-showcase-orders, vk-showcase-review-form, ...) adjust
width/padding without affecting other views. Loaded after store-orders.css.
========================================================================== */
.vk-showcase-page {
flex: 1 1 auto;
width: 100%;
min-height: 100%;
color: var(--color-primary-dark);
background: white;
}
.vk-showcase-page__shell {
max-width: 1180px;
margin-inline: auto;
padding: 2.5rem 1rem 4rem;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
}
/* Main store pages (catalog, PDP) used the page container itself as the white
card. On a flat page the card look is dropped: the surface lives on the
(.vk-showcase-page) and the inner container keeps its centering,
max-width and gutters. Product cards / PDP panels remain cards. */
.vk-showcase-page .container-fluid.vk-showcase {
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
}
.vk-showcase-section {
padding-block: 1.5rem;
border-bottom: 1px solid var(--color-neutral-light);
}
/* Review form keeps its narrower centered column (previously 860px via
.store-review-form-page .store-orders-shell). */
.vk-showcase-review-form .vk-showcase-page__shell {
max-width: 860px;
}
@media (max-width: 575.98px) {
.vk-showcase-page__shell {
padding: 1.5rem 1rem 3rem;
}
}