/* ==========================================================================
Cart plugin - public pages: one merged stylesheet.
Consolidated 2026-09-02 from 8 per-page files (main + cart, shop,
product, orders, order-confirmation, order-lookup, wishlist). See
docs/PLUGIN_CSS_CONSOLIDATION_PLAN.md.
Layer 0 --cart-* tokens (the 7 old prefixes reconciled to one set),
on every page wrapper. --cart-card-bg / -card-border /
-card-border-soft / -card-radius, plus --cart-accent (was
var(--bs-primary)) and --cart-meta-color (was
var(--bs-secondary-color)) are designer inputs; defaults =
the previous values. PLUGIN_THEMING_API.md.
Layer 1 main.css - shared base, every public page
Layer 2 per-page sections, each scoped to the wrapper(s) of the
page(s) that used to that file
Layer 3 @media, grouped by page
========================================================================== */
/* -- Layer 0 - tokens ---------------------------------------------------- */
.cart-page, .cart-shop-page, .cart-pdp-page, .cart-orders-page, .cart-confirmation-page, .cart-lookup-page, .cart-wishlist-page {
--cart-card-bg: color-mix(in srgb, var(--bs-body-bg) 97%, var(--bs-tertiary-bg));
--cart-card-border: color-mix(in srgb, var(--bs-body-color) 16%, transparent);
--cart-card-border-soft: color-mix(in srgb, var(--bs-body-color) 9%, transparent);
/* internal - resolved from the inputs above / canonical values */
--cart-surface: color-mix(in srgb, var(--bs-tertiary-bg) 78%, var(--bs-body-bg));
--cart-surface-raised: color-mix(in srgb, var(--bs-tertiary-bg) 91%, var(--bs-body-bg));
--cart-muted-panel: color-mix(in srgb, var(--bs-tertiary-bg) 82%, var(--bs-body-bg));
--cart-control: color-mix(in srgb, var(--bs-body-bg) 94%, var(--bs-tertiary-bg));
--cart-media-bg: color-mix(in srgb, var(--bs-tertiary-bg) 88%, var(--bs-body-bg));
--cart-focus: rgba(var(--bs-primary-rgb), 0.13);
}
/* -- Layer 1 - main.css (shared base) --------------------------------- */
/* =========================================================
Cart plugin - public storefront
========================================================= */
/* --- cart_products/cart_product/product_categories widgets (content
blocks embedded on arbitrary CMS pages, frontend/src/plugins/cart/
widget/main.js) - deliberately left unstyled at first (matching how
these three widget classes had zero dedicated CSS from the start,
riding on Bootstrap's own bare .card/.card-img-top defaults), but a
REAL uploaded photo (not the small icon placeholder every test product
used) exposed why that doesn't actually work: .card-img-top has no
aspect-ratio/height cap of its own, so a real large source image
renders at its full natural size - confirmed live on the storefront
landing page's own "Shop by Category" tile, where one real category
photo blew out to several times the height of the rest of the page.
Fixed here for all three widget types at once (not just the one that
happened to expose it), matching .cart-shop-card-image's own existing
aspect-ratio/object-fit treatment above. */
/* cart hero
========================================================= */
.cart-hero {
position: relative;
overflow: hidden;
color: var(--bs-body-color);
background:
radial-gradient(
circle at 85% 15%,
rgba(var(--bs-primary-rgb), 0.16),
transparent 22rem
),
linear-gradient(
135deg,
rgba(var(--bs-primary-rgb), 0.08),
rgba(var(--bs-primary-rgb), 0.015)
);
border-bottom: 1px solid var(--bs-border-color);
}
.cart-widget-product-card .card-img-top,
.cart-widget-product-image-empty {
aspect-ratio: 1 / 1;
object-fit: cover;
width: 100%;
}
.cart-widget-category-tile {
display: block;
}
/* Corner radius/icon size tokenized (Phase 3, docs/BLOCK_TYPE_STYLING_PLAN.md)
- see docs/BLOCK_TYPE_DESIGN_TOKENS.md. aspect-ratio/object-fit/width
stay literals (structural square-tile layout, not a "look" default),
matching the same distinction already drawn for gallery/portfolio_grid. */
.cart-widget-category-image,
.cart-widget-category-image-empty {
aspect-ratio: 1 / 1;
object-fit: cover;
width: 100%;
border-radius: var(--cms-block-product-categories-tile-radius, 0.5rem);
}
.cart-widget-category-image-empty {
display: flex;
align-items: center;
justify-content: center;
background: var(--bs-tertiary-bg);
color: var(--cart-meta-color, var(--bs-secondary-color));
font-size: var(--cms-block-product-categories-icon-size, 2rem);
}
.cart-widget-category-name {
font-weight: 600;
}
/* --- Wishlist heart (Phase 8) --- */
.cart-shop-card-wishlist {
position: absolute;
top: 0.5rem;
right: 0.5rem;
z-index: 2;
border-radius: 50%;
width: 2rem;
height: 2rem;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background: var(--bs-body-bg);
}
.cart-wishlist-heart.active {
color: #dc3545;
border-color: #dc3545;
}
/* --- Wishlist page --- */
.cart-wishlist-grid .cart-shop-card-wishlist {
background: var(--bs-body-bg);
}
.cart-nav-count {
font-size: 0.7rem;
vertical-align: top;
}
/* --- PDP --- */
/* :not(.cart-pdp-thumb) is load-bearing, not defensive styling - a real,
confirmed-live bug without it. This selector's specificity (class +
element = 0,1,1) is HIGHER than a bare `.cart-pdp-thumb` class selector
(0,1,0) REGARDLESS of source order or which comes later in the file -
unlike the earlier same-specificity/media-query cascade bug documented
further down this file, a plain specificity difference can't be fixed
by reordering rules at all. Without this exclusion, this rule's
`width: 100%` always won over .cart-pdp-thumb's own explicit width, and
on mobile (where nothing constrains the thumbnail column's own width to
match the intended fixed size) that stretched each thumbnail to nearly
the full viewport width instead of a small square - confirmed live via
getBoundingClientRect (`width: 456px` at a 480px viewport, vs. the
intended 64px/4rem) and screenshot. It happened to look correct on
desktop only by coincidence: `.cart-pdp-thumbs-wrap`'s own `flex: 0 0
7rem` there constrains the CONTAINER to exactly 112px, so `width: 100%`
(of that already-112px container) computed to the same 112px the
intended fixed width would have produced anyway - a false negative that
masked the underlying specificity bug during desktop-only verification. */
.cart-pdp-gallery img:not(.cart-pdp-thumb) {
width: 100%;
border-radius: 0.5rem;
}
/* Mobile-first base: a plain column stack (main image, then thumbs below).
The desktop override (thumbnail rail to the LEFT of the main image, plus
the vertical scroll arrows) lives further down this file, deliberately
positioned AFTER every rule it overrides - see that block's own comment
for why the ordering itself is load-bearing here, not just tidiness. */
.cart-pdp-gallery {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.cart-pdp-gallery-empty {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1 / 1;
background: var(--bs-tertiary-bg);
color: var(--cart-meta-color, var(--bs-secondary-color));
font-size: 3rem;
border-radius: 0.5rem;
}
/* .cart-pdp-thumbs-wrap is the outer flex column (scroll-up arrow / the
scrollable thumb strip itself / scroll-down arrow) - a real, separate
element from .cart-pdp-thumbs (the scrollable region alone) specifically
so the two arrow buttons can sit OUTSIDE the scrollable area rather than
inside it, where they'd otherwise scroll out of view along with the
thumbnails they're meant to control. On mobile .cart-pdp-thumbs has no
height cap at all (see the base .cart-pdp-thumbs rule below - it just
wraps to more rows), so scrollHeight never exceeds clientHeight there
and the arrows stay correctly hidden via the has-overflow gate without
needing a separate mobile-specific override. */
.cart-pdp-thumbs-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.3rem;
}
.cart-pdp-thumbs {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
/* Plain chevron glyphs, no button chrome (background/border) - matches
the reference cafepress gallery's own thumbnail-scroll arrows, which
are deliberately a lighter-weight affordance than the main image's own
circular Prev/Next buttons. Hidden by default and shown only once JS
(cartPdp gallery init) confirms the thumbnail column actually overflows
its max-height - a product with few enough photos to fit the whole
column has nothing to scroll, so no arrows to show. */
.cart-pdp-thumbs-scroll-btn {
display: none;
align-items: center;
justify-content: center;
width: 100%;
height: 1.1rem;
padding: 0;
border: 0;
background: transparent;
color: var(--cart-meta-color, var(--bs-secondary-color));
font-size: 1rem;
line-height: 1;
cursor: pointer;
flex: 0 0 auto;
}
.cart-pdp-thumbs-scroll-btn:hover {
color: var(--bs-body-color);
}
.cart-pdp-thumbs-scroll-btn:disabled {
opacity: 0.25;
cursor: default;
pointer-events: none;
}
.cart-pdp-thumbs-wrap.has-overflow .cart-pdp-thumbs-scroll-btn {
display: flex;
}
.cart-pdp-thumb {
/* Base (mobile) size only - kept compact so several still wrap per row
below the main image on a narrow viewport, matching this layout's own
original mobile behavior. The larger, cafepress-reference-matching
size (7rem) is scoped to the md+ desktop left-rail layout instead, in
the media query below - a first attempt applied 7rem unconditionally
and, confirmed live via screenshot, that made a thumbnail nearly fill
an entire 480px-wide mobile viewport on its own (barely more than one
per row), a real usability regression from the pre-existing compact
multi-per-row mobile strip that the desktop-only ask never intended. */
width: 4rem;
height: 4rem;
/* Without this, a flex item's default flex-shrink:1 lets the browser
squish these below their own explicit width/height to fit inside
.cart-pdp-thumbs' constrained max-height (vertical rail, md+) rather
than actually overflowing it - confirmed live: with flex-shrink left
at its default, 6 thumbnails inside a 150px-tall test column shrank to
~23px each with scrollHeight staying equal to clientHeight the whole
time, so the has-overflow scroll-arrow gate never fired at all. */
flex-shrink: 0;
object-fit: cover;
border-radius: 0.5rem;
cursor: pointer;
border: 2px solid var(--bs-border-color);
transition: border-color 0.15s ease;
}
.cart-pdp-thumb.active,
.cart-pdp-thumb:hover {
border-color: var(--cart-accent, var(--bs-primary));
}
/* stacks thumbnails in a vertical rail to the LEFT
of the main image on desktop, not below it - reported live against a
real screenshot after the first Prev/Next/counter pass (which kept the
pre-existing below-image thumbnail strip untouched, since that part
already matched the reference at the time). Deliberately done with CSS
`order` on `.cart-pdp-thumbs-wrap` rather than reordering product.html's
markup: keeps the main product image first in DOM/source order (the
primary content, arguably better for a screen reader's default reading
order and for paint priority) while still rendering it visually second
on desktop; the underlying flex-column-then-row breakpoint swap is what
drops it back below the image on narrow viewports, matching the
original mobile layout, not the desktop left-rail one - a narrow
fixed-width column competing for horizontal space next to the main
image would leave little room for either on a small screen.
This block is deliberately placed AFTER every base (mobile-first)
.cart-pdp-gallery/-thumbs-wrap/-thumbs rule above, not immediately next
to .cart-pdp-gallery's own base rule where it originally lived - a real,
confirmed-live bug: a later base rule at equal specificity always wins a
cascade tie over an earlier @media-wrapped rule, REGARDLESS of whether
the media condition matches - @media only gates *whether* a rule
applies, not its position in source-order cascade resolution. With the
media query positioned before the base .cart-pdp-thumbs rule, this
desktop override's own `flex-wrap: nowrap` was being silently beaten by
the later base rule's `flex-wrap: wrap` at EVERY viewport width,
including desktop - confirmed directly via getBoundingClientRect: 6
thumbnails inside a height-constrained column wrapped into 3 short
columns of 2 rows each instead of overflowing into one scrollable
column, so .cart-pdp-thumbs-wrap's `has-overflow` gate for the new
scroll arrows below never fired. Fixed by moving the whole media query
here, after everything it overrides - the standard mobile-first
ordering convention (base rules first, breakpoint overrides last) exists
precisely to avoid this class of same-specificity/different-position
bug, not just as a style preference. */
/* Phase 12 - the main image is wrapped in a real
(see product.html) so it opens a real zoom/carousel across every image;
cursor: zoom-in signals that without needing any extra overlay markup. */
.cart-pdp-main-link {
display: block;
cursor: zoom-in;
position: relative;
}
/* Cafepress-style gallery chrome (raised at the user's own request,
referencing a real cafepress.com product page as the model): Prev/Next
arrows and a "N / Total" position counter overlaid on the main image,
plus a visible zoom-icon hint instead of relying on cursor:zoom-in
alone (invisible until you're already hovering, easy to miss as an
affordance). .cart-pdp-main-frame is a dedicated position:relative
wrapper *around* the link, not the link itself, since a link with
position:relative would put the zoom-hint icon (already position-
absolute against the link, unchanged from before this addition) and
Prev/Next in the same stacking context - keeping them as siblings under
one shared frame avoids fighting over z-index/click-target overlap. */
.cart-pdp-main-frame {
position: relative;
}
.cart-pdp-zoom-hint {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 2.25rem;
height: 2.25rem;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.55);
color: #fff;
border-radius: 50%;
font-size: 1.1rem;
opacity: 0;
transition: opacity 0.15s ease;
pointer-events: none;
}
.cart-pdp-main-link:hover .cart-pdp-zoom-hint {
opacity: 1;
}
.cart-pdp-nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 2.5rem;
height: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.85);
color: var(--bs-body-color);
border: 1px solid var(--bs-border-color);
border-radius: 50%;
font-size: 1.1rem;
opacity: 0;
transition: opacity 0.15s ease, background-color 0.15s ease;
z-index: 2;
}
.cart-pdp-main-frame:hover .cart-pdp-nav-btn {
opacity: 1;
}
.cart-pdp-nav-btn:hover {
background: #fff;
}
.cart-pdp-nav-prev {
left: 0.6rem;
}
.cart-pdp-nav-next {
right: 0.6rem;
}
.cart-pdp-counter {
position: absolute;
bottom: 0.75rem;
right: 0.75rem;
padding: 0.15rem 0.6rem;
background: rgba(0, 0, 0, 0.55);
color: #fff;
border-radius: 1rem;
font-size: 0.75rem;
z-index: 2;
}
/* Dark theme: the semi-transparent-black overlays above already read
fine against a light background; against the app's own dark theme the
nav buttons' near-white fill would look out of place next to the rest
of the chrome, so they get the same dark-glass treatment as the
zoom-hint/counter instead. */
[data-bs-theme="dark"] .cart-pdp-nav-btn {
background: rgba(0, 0, 0, 0.55);
color: #fff;
border-color: rgba(255, 255, 255, 0.25);
}
[data-bs-theme="dark"] .cart-pdp-nav-btn:hover {
background: rgba(0, 0, 0, 0.75);
}
.cart-pdp-price {
color: var(--cart-accent, var(--bs-primary));
}
/* --- Cart page --- */
.cart-items-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.cart-item-row {
display: grid;
grid-template-columns: 4rem 1fr auto auto auto;
align-items: center;
gap: 0.85rem;
padding: 0.75rem;
border: 1px solid var(--bs-border-color);
border-radius: 0.6rem;
background: var(--bs-body-bg);
}
.cart-item-image {
width: 4rem;
height: 4rem;
object-fit: cover;
border-radius: 0.4rem;
}
.cart-item-image-empty {
display: flex;
align-items: center;
justify-content: center;
background: var(--bs-tertiary-bg);
color: var(--cart-meta-color, var(--bs-secondary-color));
}
.cart-item-name {
font-weight: 600;
text-decoration: none;
color: var(--bs-body-color);
}
.cart-item-name:hover {
color: var(--cart-accent, var(--bs-primary));
}
.cart-item-qty-input {
width: 4.5rem;
}
.cart-item-price {
font-weight: 600;
min-width: 5rem;
}
.cart-item-save-for-later-btn {
margin-top: 0.25rem;
}
.cart-saved-item-row {
opacity: 0.9;
}
.cart-saved-for-later-list .cart-item-row {
background: var(--bs-tertiary-bg);
}
.cart-summary-card {
position: sticky;
top: 1rem;
}
.cart-summary-lines dt {
font-weight: 400;
color: var(--cart-meta-color, var(--bs-secondary-color));
}
.cart-summary-lines dd {
margin: 0;
}
.cart-page {
width: min(100%, 88rem);
padding: clamp(1rem, 3vw, 2rem);
}
.cart-page-header { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; margin-bottom: 1.25rem; padding-bottom: 1.15rem; border-bottom: 1px solid var(--cart-card-border-soft); }
.cart-page-heading { display: flex; align-items: center; min-width: 0; gap: .8rem; }
.cart-page-icon, .cart-section-icon { display: grid; flex: 0 0 auto; place-items: center; border: 1px solid rgba(var(--bs-primary-rgb), .28); background: rgba(var(--bs-primary-rgb), .1); color: var(--cart-accent, var(--bs-primary)); }
.cart-page-icon { width: 3rem; height: 3rem; border-radius: .78rem; font-size: 1.2rem; }
.cart-page-eyebrow, .cart-section-label { display: block; color: var(--cart-accent, var(--bs-primary)); font-size: .6rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.cart-page-header h1 { margin: .1rem 0 .12rem; font-size: clamp(1.55rem, 3vw, 2rem); letter-spacing: -.035em; }
.cart-page-header p { margin: 0; color: var(--cart-meta-color, var(--bs-secondary-color)); font-size: .68rem; }
.cart-page-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: .45rem; }
.cart-page .btn-sm { border-radius: .55rem; font-size: .65rem; }
.cart-loading-state { display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: 15rem; color: var(--cart-meta-color, var(--bs-secondary-color)); font-size: .68rem; }
.cart-state-card { display: flex; align-items: center; flex-direction: column; width: min(100%, 36rem); margin: 3rem auto; padding: 2.5rem 1.25rem; border: 1px solid var(--cart-card-border); border-radius: .95rem; background: var(--cart-surface); text-align: center; }
.cart-state-icon { display: grid; width: 3.25rem; height: 3.25rem; place-items: center; border: 1px solid var(--cart-card-border); border-radius: .8rem; background: var(--cart-surface-raised); color: var(--cart-meta-color, var(--bs-secondary-color)); font-size: 1.35rem; }
.cart-state-card h2 { margin: .8rem 0 .2rem; font-size: .9rem; }.cart-state-card p { margin: 0 0 1rem; color: var(--cart-meta-color, var(--bs-secondary-color)); font-size: .65rem; }
.cart-page-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(18rem, .75fr); align-items: start; gap: 1rem; }
.cart-page-main { display: grid; min-width: 0; gap: 1rem; }
.cart-page-sidebar { min-width: 0; }
.cart-section-card { min-width: 0; overflow: hidden; border: 1px solid var(--cart-card-border); border-radius: .9rem; background: var(--bs-body-bg); box-shadow: 0 .7rem 2.1rem rgba(0, 0, 0, .07); }
.cart-section-header { display: flex; align-items: center; gap: .7rem; min-height: 4.6rem; padding: .82rem 1rem; border-bottom: 1px solid var(--cart-card-border); background: linear-gradient(105deg, rgba(var(--bs-primary-rgb), .055), transparent 52%), var(--cart-surface); }
.cart-section-icon { width: 2.2rem; height: 2.2rem; border-radius: .62rem; font-size: .9rem; }
.cart-section-header h2 { margin: .08rem 0 0; font-size: .85rem; letter-spacing: -.015em; }.cart-section-header p { margin: .1rem 0 0; color: var(--cart-meta-color, var(--bs-secondary-color)); font-size: .58rem; }
.cart-section-body { padding: 1rem; }
.cart-items-list { min-width: 0; }
.cart-items-list:empty { display: none; }
.cart-items-list > :is(.cart-item, .cart-item-row, .cart-item-card, [data-cart-item-id], [data-item-id]) { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; min-width: 0; padding: .85rem 1rem; border-bottom: 1px solid var(--cart-card-border-soft); }
.cart-items-list > :is(.cart-item, .cart-item-row, .cart-item-card, [data-cart-item-id], [data-item-id]):last-child { border-bottom: 0; }
.cart-items-list :is(.cart-item-image, .cart-product-image, img) { width: 4.25rem; height: 4.25rem; border-radius: .62rem; background: var(--cart-surface); object-fit: cover; }
.cart-items-list :is(.cart-item-details, .cart-item-info, .cart-product-details) { min-width: 0; }
.cart-items-list :is(.cart-item-title, .cart-product-name, h3, h4) { margin: 0 0 .18rem; overflow: hidden; font-size: .72rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.cart-items-list :is(.cart-item-variant, .cart-item-meta, .cart-product-meta) { color: var(--cart-meta-color, var(--bs-secondary-color)); font-size: .58rem; }
.cart-items-list :is(.cart-item-price, .cart-line-total) { font-size: .7rem; font-weight: 800; white-space: nowrap; }
.cart-items-list :is(.cart-item-actions, .cart-item-controls) { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .38rem; }
.cart-items-list :is(.btn, button) { border-radius: .5rem; font-size: .6rem; }
.cart-items-list :is(input[type="number"], .cart-quantity-input) { width: 3.5rem; min-height: 2rem; padding: .25rem .4rem; border: 1px solid var(--cart-card-border); border-radius: .48rem; background: var(--cart-control); color: var(--bs-body-color); font-size: .62rem; text-align: center; }
.cart-saved-for-later-list { opacity: .9; }
.cart-saved-for-later-list > :is(.cart-item, .cart-item-row, .cart-item-card, [data-cart-item-id], [data-item-id]) { background: color-mix(in srgb, var(--cart-surface) 45%, transparent); }
.cart-inline-alert { display: flex; align-items: flex-start; gap: .55rem; margin: 0; border-radius: .65rem; font-size: .63rem; line-height: 1.45; }
.cart-checkout-account-prompt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .65rem; margin-bottom: 1rem; padding: .75rem; border: 1px solid rgba(var(--bs-primary-rgb), .2); border-radius: .65rem; background: rgba(var(--bs-primary-rgb), .045); }
.cart-account-icon { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: .55rem; background: rgba(var(--bs-primary-rgb), .1); color: var(--cart-accent, var(--bs-primary)); }
.cart-checkout-account-prompt strong { display: block; font-size: .66rem; }.cart-checkout-account-prompt p { margin: .08rem 0 0; color: var(--cart-meta-color, var(--bs-secondary-color)); font-size: .56rem; }.cart-account-actions { display: flex; gap: .38rem; }
.cart-checkout-form { display: grid; gap: 1rem; }
.cart-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.cart-field { min-width: 0; }.cart-field-full { grid-column: 1 / -1; }
.cart-field .form-label, .cart-coupon-field .form-label { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .32rem; font-size: .63rem; font-weight: 700; }
/* .cart-required uses a darker-than-(--bs-danger) red so this ~8px uppercase marker clears WCAG AA (4.5:1) on light page backgrounds — E156. */
.cart-required, .cart-optional { font-size: .5rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }.cart-required { color: #b02a37; }.cart-optional { color: var(--cart-meta-color, var(--bs-secondary-color)); }
.cart-page :is(.form-control, .form-select) { min-height: 2.5rem; border-color: var(--cart-card-border); border-radius: .58rem; background-color: var(--cart-control); font-size: .67rem; }
.cart-page :is(.form-control, .form-select):focus { border-color: rgba(var(--bs-primary-rgb), .68); box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .1); }
.cart-shipping-section { display: grid; gap: .85rem; padding-top: 1rem; border-top: 1px solid var(--cart-card-border-soft); }
.cart-subsection-header { display: flex; align-items: center; gap: .55rem; }.cart-subsection-header > span { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border-radius: .5rem; background: var(--cart-surface); color: var(--cart-accent, var(--bs-primary)); font-size: .75rem; }.cart-subsection-header h3 { margin: 0; font-size: .72rem; }.cart-subsection-header p { margin: .08rem 0 0; color: var(--cart-meta-color, var(--bs-secondary-color)); font-size: .54rem; }
.cart-save-address { display: flex; align-items: center; gap: .42rem; margin: 0; padding: .65rem; border: 1px solid var(--cart-card-border); border-radius: .58rem; background: var(--cart-surface); font-size: .61rem; }.cart-save-address .form-check-input { float: none; width: 1rem; height: 1rem; margin: 0; }
.cart-place-order-btn { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; min-height: 2.75rem; border-radius: .62rem; font-size: .7rem; font-weight: 800; }
.cart-secure-note { margin: -.5rem 0 0; color: var(--cart-meta-color, var(--bs-secondary-color)); font-size: .53rem; text-align: center; }
.cart-summary-card { position: sticky; top: 1rem; }
.cart-coupon-field { padding-bottom: .9rem; border-bottom: 1px solid var(--cart-card-border-soft); }
.cart-coupon-field .input-group .form-control { border-radius: .58rem 0 0 .58rem; }.cart-coupon-field .input-group .btn { border-radius: 0 .58rem .58rem 0; font-size: .62rem; }.cart-coupon-field .form-text { min-height: .8rem; font-size: .54rem; }
.cart-summary-lines { margin: .9rem 0 0; }
.cart-summary-lines > div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .38rem 0; }
.cart-summary-lines dt { color: var(--cart-meta-color, var(--bs-secondary-color)); font-size: .62rem; font-weight: 600; }.cart-summary-lines dd { margin: 0; font-size: .64rem; font-weight: 700; }
.cart-summary-total { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .65rem; padding-top: .8rem; border-top: 1px solid var(--cart-card-border); }.cart-summary-total span { font-size: .68rem; font-weight: 750; }.cart-summary-total strong { font-size: 1.05rem; letter-spacing: -.02em; }
.cart-summary-trust { display: flex; justify-content: space-between; gap: .5rem; margin-top: 1rem; color: var(--cart-meta-color, var(--bs-secondary-color)); font-size: .5rem; }.cart-summary-trust span { display: inline-flex; align-items: center; gap: .25rem; }.cart-summary-trust i { color: var(--cart-accent, var(--bs-primary)); }
/* Public product directory -------------------------------------------------
Kept separate from .cart-page so the shop and checkout can share this
stylesheet without leaking layout rules into one another. */
.cart-shop-page {
width: min(100%, 92rem);
padding: clamp(1rem, 3vw, 2rem);
}
.cart-shop-page > .d-flex:first-child {
align-items: center !important;
margin-bottom: 1.15rem !important;
padding-bottom: 1rem;
border-bottom: 1px solid var(--cart-card-border-soft);
}
.cart-shop-page > .d-flex:first-child h1 {
margin: 0 !important;
font-size: clamp(1.55rem, 3vw, 2rem);
letter-spacing: -.035em;
}
.cart-shop-page > .d-flex:first-child h1::before {
display: block;
margin-bottom: .12rem;
color: var(--cart-accent, var(--bs-primary));
content: "Storefront";
font-size: .59rem;
font-weight: 800;
letter-spacing: .11em;
text-transform: uppercase;
}
.cart-shop-page > .d-flex:first-child > a {
min-height: 2.4rem;
padding: .5rem .75rem;
border-radius: .58rem;
font-size: .67rem;
font-weight: 700;
}
.cart-shop-page > .row { --bs-gutter-x: 1rem; }
.cart-shop-page aside .list-group {
position: sticky;
top: 1rem;
overflow: hidden;
border: 1px solid var(--cart-card-border);
border-radius: .75rem;
background: var(--bs-body-bg);
box-shadow: 0 .65rem 1.8rem rgba(0, 0, 0, .055);
}
.cart-shop-page aside .list-group::before {
display: block;
padding: .72rem .82rem .55rem;
border-bottom: 1px solid var(--cart-card-border-soft);
background: var(--cart-surface);
color: var(--cart-meta-color, var(--bs-secondary-color));
content: "Categories";
font-size: .57rem;
font-weight: 800;
letter-spacing: .09em;
text-transform: uppercase;
}
.cart-shop-page aside .list-group-item {
min-height: 2.55rem;
padding: .62rem .8rem;
border: 0;
border-bottom: 1px solid var(--cart-card-border-soft);
background: transparent;
color: var(--cart-meta-color, var(--bs-secondary-color));
font-size: .65rem;
font-weight: 650;
}
.cart-shop-page aside .list-group-item:first-child {
border-top-left-radius: 0 !important;
border-top-right-radius: inherit;
}
.cart-shop-page aside .list-group-item:last-child { border-bottom: 0; }
.cart-shop-page aside .list-group-item:hover { background: rgba(var(--bs-primary-rgb), .045); color: var(--bs-body-color); }
.cart-shop-page aside .list-group-item.active {
box-shadow: inset .18rem 0 0 var(--cart-accent, var(--bs-primary));
background: rgba(var(--bs-primary-rgb), .095);
color: var(--cart-accent, var(--bs-primary));
}
/* NOTE: #cartShopFilterForm is now the outer catalog layout container
(class .cart-shop-layout, wrapping