/* aieo-side-cart-contents.css — DRAWER CONTENTS (Phase-CSS split 2026-06-13).
Lazy companion to aieo-side-cart.css. Styles ONLY nodes injected after the
drawer first opens: reco 'you might like' cards, RV + Favorites card lists,
the 'you may also like' carousel, role-pricing badge on cards, and quick-view.
Injected as a by aieo-side-cart.js the first time the cart opens, in
parallel with the reco AJAX hydration. NOT loaded on page render. */
/* ---- Compact .aieo-card skin scoped to the side-cart -----------------
* Same DTO-rendered markup as the product page (.aieo-recommendations
* .aieo-card), styled here as a stacked thumb + name + price block that
* fits a 220px-wide left column or the bottom carousel slide.
* --------------------------------------------------------------------- */
/* ===== Side-cart OWN button tokens (shadow the global :root leak) ======
* Tools → Button Styles prints --aieo-btn-* on the GLOBAL :root for every
* storefront page (class-aieo-dmm-button-styles.php). The side-cart action
* buttons below read those SAME vars, so the generic site button colour
* leaked in and the per-rule fallbacks (#c0a37b etc.) were dead. Re-assert
* the cart's OWN defaults here, scoped to .aieo-sc-root — an ancestor of
* every .aieo-sc-btn-* — so within the cart the global :root values are
* shadowed. These are var DEFAULTS only; build_action_button_css() still
* emits the operator's saved per-cart colours as .aieo-sc-btn-*{..!important}
* inline AFTER this file, so configured side-cart colours keep winning. */
.aieo-sc-root {
--aieo-btn-bg: #c0a37b;
--aieo-btn-fg: #ffffff;
--aieo-btn-bg-hover: #a88a63;
--aieo-btn-secondary-bg: #e9e6e2;
--aieo-btn-secondary-fg: #1a1a1a;
--aieo-btn-secondary-bg-hover: #dfdbd4;
}
.aieo-sc-root .aieo-card {
display: block;
color: inherit;
text-decoration: none;
font-family: inherit;
}
.aieo-sc-root .aieo-card-img-wrap {
position: relative;
background: #f3f3f3;
margin: 0 auto 8px;
overflow: hidden;
aspect-ratio: 1 / 1;
}
.aieo-sc-root .aieo-card-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.aieo-sc-root .aieo-card-onsale {
position: absolute;
top: 0;
left: 0;
z-index: 3;
background: #c82d52;
color: #fff;
font-size: 9px;
font-weight: 600;
letter-spacing: .04em;
padding: 3px 7px;
border-radius: 0;
text-transform: uppercase;
}
.aieo-sc-root .aieo-card-name {
font-size: 13px;
font-weight: 700;
color: #1a1a1a;
line-height: 1.3;
margin: 0 0 4px;
/* Two-line clamp keeps card height predictable in vertical lists. */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.aieo-sc-root .aieo-card-price {
font-size: 13px;
line-height: 1.2;
color: #1a1a1a;
}
.aieo-sc-root .aieo-card-price del {
color: #9a9a9a;
margin-right: 6px;
}
.aieo-sc-root .aieo-card-price ins {
text-decoration: none;
font-weight: 600;
}
.aieo-sc-root .aieo-card:hover .aieo-card-name {
text-decoration: underline;
text-underline-offset: 2px;
}
.aieo-sc-root .aieo-card.is-out-of-stock { opacity: .55; }
/* Left "you might like" column — each item is a flat all-white card
* with a single hairline border around the WHOLE card. No internal
* borders or rounded corners. White-background product photos blend
* into the card surface seamlessly. */
.aieo-sc-reco-col .aieo-sc-reco-list { gap: 12px; }
.aieo-sc-reco-col .aieo-sc-reco-item {
background: #ffffff;
/* Border + colours are admin-configurable via CSS variables emitted
* on .aieo-sc-root. Defaults to a 1px #d8d8d8 hairline that darkens
* to #1a1a1a on hover. Setting --aieo-card-border-width: 0 hides
* the border entirely (admin "card border" toggle off). */
border: var(--aieo-card-border-width, 1px) solid var(--aieo-card-border-color, #d8d8d8);
border-radius: 0;
padding: 12px;
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
position: relative;
}
.aieo-sc-reco-col .aieo-sc-reco-item:hover {
border-color: var(--aieo-card-border-hover, #1a1a1a);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
/* Image area is part of the same white surface — no separate border,
* radius or shadow. Position relative so the on-image PRO badge
* anchors against the image, not the surrounding card. */
.aieo-sc-reco-col .aieo-card-img-wrap {
max-width: 140px;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
position: relative;
}
/* Force dark, readable typography on the "you might like" cards.
* The card is wrapped in so the theme paints anchor descendants
* pink — !important wins. Sized to match the SHOPPING BAG row name
* (13px / 600) so the text is reliably legible against white. */
.aieo-sc-root .aieo-sc-reco-col .aieo-card,
.aieo-sc-root .aieo-sc-reco-col .aieo-card:hover,
.aieo-sc-root .aieo-sc-reco-col .aieo-card:visited,
.aieo-sc-root .aieo-sc-reco-col .aieo-card:focus {
color: #1a1a1a !important;
text-decoration: none !important;
}
.aieo-sc-root .aieo-sc-reco-col .aieo-card-name {
font-size: 13px !important;
font-weight: 600 !important;
color: #1a1a1a !important;
line-height: 1.35 !important;
text-decoration: none !important;
margin: 10px 0 4px !important;
}
.aieo-sc-root .aieo-sc-reco-col .aieo-card-price {
font-size: 13px !important;
font-weight: 400 !important;
color: #1a1a1a !important;
line-height: 1.3 !important;
margin: 0 !important;
}
.aieo-sc-root .aieo-sc-reco-col .aieo-card-price del {
color: #b8b8b8 !important;
text-decoration: line-through !important;
margin-right: 6px !important;
}
.aieo-sc-root .aieo-sc-reco-col .aieo-card-price ins {
color: #1a1a1a !important;
font-weight: 600 !important;
text-decoration: none !important;
}
/* RV + Favorites tabs — shared 1-col list (desktop) / 2-col grid
* (mobile) with a heart toggle and an ADD TO BAG action under each
* card. The .aieo-sc-product-grid class is the common hook; rv-list
* and fav-list provide list-specific tweaks. */
.aieo-sc-product-grid {
padding: 8px 0 0;
margin: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 18px;
}
.aieo-sc-product-grid .aieo-sc-reco-item {
margin: 0;
padding: 0 0 18px;
border-bottom: 1px solid #f0f0f0;
position: relative;
}
.aieo-sc-product-grid .aieo-sc-reco-item:last-child { border-bottom: 0; padding-bottom: 0; }
.aieo-sc-product-grid .aieo-card {
display: grid;
grid-template-columns: 64px minmax(0, 1fr);
gap: 14px;
align-items: center;
}
/* Match the SHOPPING BAG row's typography exactly. The card is wrapped
* in an , and themes (Botiga / Rey) paint anchor descendants pink
* by default — !important wins over those inherited rules so the
* title + price always read as dark grey/black like in the bag. */
.aieo-sc-root .aieo-sc-product-grid .aieo-card,
.aieo-sc-root .aieo-sc-product-grid .aieo-card:hover,
.aieo-sc-root .aieo-sc-product-grid .aieo-card:visited,
.aieo-sc-root .aieo-sc-product-grid .aieo-card:focus {
color: #1a1a1a !important;
text-decoration: none !important;
}
.aieo-sc-root .aieo-sc-product-grid .aieo-card-img-wrap {
width: 64px;
margin: 0;
aspect-ratio: 1 / 1;
position: relative;
}
.aieo-sc-root .aieo-sc-product-grid .aieo-card-name {
font-size: 13px !important;
font-weight: 600 !important;
line-height: 1.3 !important;
margin: 0 0 4px !important;
color: #1a1a1a !important;
text-decoration: none !important;
-webkit-line-clamp: 2;
}
.aieo-sc-root .aieo-sc-product-grid .aieo-card-price {
font-size: 13px !important;
color: #1a1a1a !important;
font-weight: 400 !important;
line-height: 1.3 !important;
margin: 0 !important;
}
.aieo-sc-root .aieo-sc-product-grid .aieo-card-price del {
color: #b8b8b8 !important;
margin-right: 6px !important;
text-decoration: line-through !important;
}
.aieo-sc-root .aieo-sc-product-grid .aieo-card-price ins {
color: #1a1a1a !important;
font-weight: 600 !important;
text-decoration: none !important;
}
/* Heart toggle — top-right of each card. Outline by default; filled
* when the product is in the favorites store. Generous touch target
* on mobile. */
.aieo-sc-root .aieo-sc-fav-toggle {
position: absolute;
top: 4px;
right: 4px;
z-index: 4;
background: transparent !important;
border: 0 !important;
padding: 4px;
margin: 0;
cursor: pointer;
line-height: 0;
color: #9a9a9a;
transition: color 0.15s ease, transform 0.12s ease;
box-shadow: none !important;
}
.aieo-sc-root .aieo-sc-fav-toggle:hover { color: #1a1a1a; transform: scale(1.08); }
.aieo-sc-root .aieo-sc-fav-toggle.is-favorited { color: #c8336e; }
.aieo-sc-root .aieo-sc-fav-toggle svg { display: block; }
/* ADD TO BAG action under each RV/Favorites card — text link with a
* Rey-style painted underline that grows from left → right on hover.
* The default state shows the bare label; the underline is rendered
* by an ::after pseudo-element so we can animate width without
* affecting layout. */
.aieo-sc-root .aieo-sc-rv-add {
grid-column: 2;
justify-self: start;
align-self: start;
background: transparent !important;
border: 0 !important;
padding: 4px 0 2px !important;
margin: 6px 0 0;
cursor: pointer;
color: #1a1a1a;
font-size: 11px;
font-weight: 600;
letter-spacing: 1.2px;
text-transform: uppercase;
text-decoration: none !important;
box-shadow: none !important;
position: relative;
display: inline-block;
line-height: 1.2;
transition: color 0.15s ease;
}
.aieo-sc-root .aieo-sc-rv-add::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
height: 1px;
width: 0;
background: currentColor;
transition: width 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.aieo-sc-root .aieo-sc-rv-add:hover,
.aieo-sc-root .aieo-sc-rv-add:focus { color: #c8336e; outline: 0; }
.aieo-sc-root .aieo-sc-rv-add:hover::after,
.aieo-sc-root .aieo-sc-rv-add:focus::after { width: 100%; }
.aieo-sc-root .aieo-sc-rv-add.is-loading {
opacity: 0.6;
cursor: wait !important;
}
.aieo-sc-root .aieo-sc-rv-add.is-loading::after { width: 100%; }
/* Already-in-bag state — softer colour + persistent underline so
* the shopper sees at a glance that the product is in the cart and
* the click would re-add (or, for now, treat as a no-op visually). */
.aieo-sc-root .aieo-sc-rv-add.is-in-cart,
.aieo-sc-root .aieo-sc-rv-add.is-in-cart:hover,
.aieo-sc-root .aieo-sc-rv-add.is-in-cart:focus {
color: #1a8a3a;
cursor: default;
}
.aieo-sc-root .aieo-sc-rv-add.is-in-cart::after {
width: 100%;
background: #1a8a3a;
}
/* Mobile (≤600px viewport): RV + Favorites lay out as a 2-column
* grid. Cards become small portraits — image stacks above name + price
* + ATC, heart pinned top-right of each. */
@media (max-width: 600px) {
.aieo-sc-product-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.aieo-sc-product-grid .aieo-sc-reco-item {
padding: 0 0 14px;
}
.aieo-sc-product-grid .aieo-card {
display: flex;
flex-direction: column;
gap: 8px;
}
.aieo-sc-product-grid .aieo-card-img-wrap {
width: 100%;
max-width: none;
aspect-ratio: 1 / 1;
}
.aieo-sc-product-grid .aieo-sc-rv-add {
grid-column: auto;
justify-self: stretch;
text-align: center;
margin-top: 4px;
}
}
.aieo-sc-rv-empty {
color: #6a6a6a;
text-align: center;
padding: 32px 0;
margin: 0;
}
/* YOU MAY ALSO LIKE carousel */
.aieo-sc-maylike {
/* Sits at the end of the bag body's scroll, before the persistent
* footer. Plain top margin so the body's overflow-y: auto can
* actually compute the carousel's full height (margin-top: auto
* had been hiding the bottom of the slide from the scrollbar).
* `flex-shrink: 0` keeps the section at its natural height in the
* flex-column body — without it, a long item list squashes the
* carousel down to almost nothing. */
margin: 24px 0 0;
border-top: 1px solid #eee;
padding: 18px 0 16px;
overflow: hidden; /* carousel sliding needs both-axis clipping */
max-width: 100%;
min-width: 0;
flex-shrink: 0;
}
.aieo-sc-maylike-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.aieo-sc-maylike-title {
font-size: 12px;
letter-spacing: 2px;
font-weight: 700;
color: #1a1a1a;
}
.aieo-sc-maylike-nav {
display: inline-flex;
align-items: center;
gap: 8px;
}
.aieo-sc-maylike-dots { display: inline-flex; gap: 5px; }
.aieo-sc-maylike-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: #dcdcdc;
border: 0;
padding: 0;
cursor: pointer;
}
.aieo-sc-maylike-dot.is-active { background: #1a1a1a; }
/* Prev/next arrows — desktop primary input. The dots are too small to
* target with a cursor, so on screens >600px we show the arrows and
* hide the dots; on touch we keep the dots and hide the arrows. */
.aieo-sc-maylike-arrow {
display: none;
width: 26px;
height: 26px;
border: 1px solid #d8d8d8;
background: #fff;
border-radius: 50%;
padding: 0;
cursor: pointer;
font-size: 16px;
line-height: 1;
color: #1a1a1a;
align-items: center;
justify-content: center;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.aieo-sc-maylike-arrow:hover {
background: #1a1a1a;
color: #fff;
border-color: #1a1a1a;
}
.aieo-sc-maylike-arrow:disabled {
opacity: 0.35;
cursor: default;
}
.aieo-sc-maylike-arrow:disabled:hover {
background: #fff;
color: #1a1a1a;
border-color: #d8d8d8;
}
@media (min-width: 601px) {
.aieo-sc-maylike-arrow { display: inline-flex; }
.aieo-sc-maylike-dots { display: none; }
}
/* The track is a horizontal strip of slides that gets translated by JS
* (`data-aieo-sc-maylike-track` + dot clicks). overflow is on the parent.
* `min-height: 140px` reserves enough vertical space to fit the full
* slide (80px image row + ADD TO BAG link below) so the carousel
* parent's `overflow: hidden` doesn't chop the action link. */
.aieo-sc-maylike-track {
display: flex;
gap: 16px;
min-height: 140px;
width: 100%;
max-width: 100%;
min-width: 0;
transition: transform 0.24s ease;
will-change: transform;
}
.aieo-sc-maylike-slide {
/* Each slide is exactly the width of the parent; the track's transform
* slides between them. The slide stacks the .aieo-card (img + body
* inside, laid out side-by-side here) with the ADD TO BAG link below. */
flex: 0 0 100%;
min-width: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
/* Inside the carousel, force the card into a horizontal layout so the
* 80px thumb sits beside the name + price block. The two-line clamp on
* `.aieo-card-name` from the global side-cart skin still applies. */
.aieo-sc-root .aieo-sc-maylike-slide .aieo-card,
.aieo-sc-root .aieo-sc-maylike-slide .aieo-card:hover,
.aieo-sc-root .aieo-sc-maylike-slide .aieo-card:visited,
.aieo-sc-root .aieo-sc-maylike-slide .aieo-card:focus {
display: grid;
grid-template-columns: 80px minmax(0, 1fr);
gap: 14px;
align-items: center;
/* Theme paints anchor descendants pink — force dark text so the
* name + price are readable against the white panel background. */
color: #1a1a1a !important;
text-decoration: none !important;
}
.aieo-sc-root .aieo-sc-maylike-slide .aieo-card-img-wrap {
width: 80px;
margin: 0;
}
.aieo-sc-root .aieo-sc-maylike-slide .aieo-card-name {
font-size: 13px !important;
font-weight: 600 !important;
color: #1a1a1a !important;
line-height: 1.3 !important;
text-decoration: none !important;
margin: 0 0 4px !important;
}
.aieo-sc-root .aieo-sc-maylike-slide .aieo-card-price {
font-size: 13px !important;
color: #1a1a1a !important;
font-weight: 400 !important;
line-height: 1.3 !important;
margin: 0 !important;
}
.aieo-sc-root .aieo-sc-maylike-slide .aieo-card-price del {
color: #b8b8b8 !important;
text-decoration: line-through !important;
margin-right: 6px !important;
}
.aieo-sc-root .aieo-sc-maylike-slide .aieo-card-price ins {
color: #1a1a1a !important;
font-weight: 600 !important;
text-decoration: none !important;
}
/* Carousel ADD TO BAG — Rey-style painted underline that grows from
* left → right on hover. Same treatment as `.aieo-sc-rv-add` so the
* two action links read consistently. */
.aieo-sc-root .aieo-sc-maylike-add {
font-size: 11px;
letter-spacing: 1.2px;
font-weight: 600;
color: #1a1a1a;
text-decoration: none !important;
text-transform: uppercase;
background: transparent !important;
border: 0 !important;
padding: 4px 0 2px !important;
margin: 0;
cursor: pointer;
position: relative;
display: inline-block;
line-height: 1.2;
align-self: start;
transition: color 0.15s ease;
}
.aieo-sc-root .aieo-sc-maylike-add::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
height: 1px;
width: 0;
background: currentColor;
transition: width 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.aieo-sc-root .aieo-sc-maylike-add:hover,
.aieo-sc-root .aieo-sc-maylike-add:focus { color: #c8336e; outline: 0; }
.aieo-sc-root .aieo-sc-maylike-add:hover::after,
.aieo-sc-root .aieo-sc-maylike-add:focus::after { width: 100%; }
/* Footer — shared across BAG / RECENTLY VIEWED / FAVORITES / QUICK
* VIEW. Lives outside the tab bodies as a direct flex sibling of the
* main column so it's pinned to the bottom on desktop regardless of
* the active tab or how many items it contains. Mobile (≤720px)
* overrides this to make the whole panel scroll, so the footer comes
* at the natural end of the list — see the responsive block. */
.aieo-sc-footer {
border-top: 1px solid #eee;
padding: 16px 26px 20px;
background: #fff;
width: 100%;
max-width: 100%;
min-width: 0;
flex: 0 0 auto;
z-index: 5;
box-sizing: border-box;
}
.aieo-sc-subtotal-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 4px 0 6px;
font-size: 12px;
letter-spacing: 2px;
font-weight: 700;
color: #1a1a1a;
}
.aieo-sc-subtotal-val { font-size: 14px; letter-spacing: 0; }
/* Rey-style coupon zone — restrained: subtle toggle, soft input border,
* pale-grey APPLY button. The toggle gets a small `×` prefix only when
* the form is open (controlled by JS toggling `.is-open`). */
.aieo-sc-coupon-toggle {
background: transparent;
border: 0;
padding: 0;
font-size: 12px;
color: #4a4a4a;
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
margin-bottom: 14px;
display: inline-flex;
align-items: baseline;
gap: 6px;
transition: color 0.15s ease;
}
.aieo-sc-coupon-toggle:hover { color: #1a1a1a; }
.aieo-sc-coupon-toggle::before {
content: '×';
font-size: 14px;
line-height: 1;
color: #9a9a9a;
/* Hidden until the form is open — keep no width so the underline
* on the label text doesn't shift between toggle states. */
display: inline-block;
width: 0;
overflow: hidden;
transition: width 0.15s ease;
text-decoration: none;
}
.aieo-sc-coupon-toggle.is-open::before {
width: 12px;
}
.aieo-sc-root .aieo-sc-coupon-form {
/* Match .aieo-sc-actions' grid (1fr 1.2fr, gap 10px) so the coupon
* input + APPLY button line up exactly with ΑΠΟΘΗΚΕΥΣΗ / ΤΑΜΕΙΟ below
* (same footer padding + same columns = aligned edges). Previously a
* flex row let the input grow wider than the buttons underneath. */
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 10px;
margin-bottom: 16px;
align-items: stretch;
height: 38px; /* forces row height regardless of theme line-height */
}
/* Coupon input — themes routinely force min-height, drop shadows and
* 1.6x line-height on ; lock everything down so the input lives
* inside our 38px row at the size we choose. !important is justified
* here because the theme rules are equally specific (often `input` or
* `.woocommerce input`) and use !important themselves. */
.aieo-sc-root .aieo-sc-coupon-form input[type="text"],
.aieo-sc-root .aieo-sc-coupon-form input {
flex: 1 1 auto !important;
width: auto !important;
min-width: 0 !important;
height: 38px !important;
min-height: 38px !important;
max-height: 38px !important;
padding: 0 14px !important;
margin: 0 !important;
border: 1px solid #ececec !important;
border-radius: 4px !important;
font-size: 13px !important;
line-height: 38px !important;
background: #fff !important;
color: #1a1a1a !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
outline: none !important;
text-transform: none !important;
box-sizing: border-box !important;
/* Same theme backdrop-filter override as the qty input. */
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
.aieo-sc-root .aieo-sc-coupon-form input::placeholder { color: #b8b8b8 !important; opacity: 1 !important; }
.aieo-sc-root .aieo-sc-coupon-form input:focus {
border-color: #c8c8c8 !important;
box-shadow: none !important;
outline: 0 !important;
}
/* APPLY button — same row height, neutralised typography. */
.aieo-sc-root .aieo-sc-coupon-form button {
flex: 0 0 auto !important;
height: 38px !important;
min-height: 38px !important;
line-height: 38px !important;
padding: 0 18px !important;
margin: 0 !important;
font-size: 12px !important;
letter-spacing: 1.5px !important;
font-weight: 600 !important;
background: #f1f1f1 !important;
color: #5a5a5a !important;
border: 0 !important;
border-radius: 4px !important;
cursor: pointer;
box-shadow: none !important;
text-shadow: none !important;
text-transform: uppercase !important;
transition: background 0.15s ease, color 0.15s ease;
box-sizing: border-box !important;
}
.aieo-sc-root .aieo-sc-coupon-form button:hover {
background: #e6e6e6 !important;
color: #1a1a1a !important;
}
.aieo-sc-actions {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 10px;
/* Breathing room below CART / CHECKOUT so they don't kiss the
* panel edge — particularly important on mobile where the OS
* gesture bar / browser chrome sits flush at the bottom. */
margin-bottom: 12px;
}
@media (max-width: 720px) {
/* The footer is now pinned just above the 58px bottom bar, so the old
* "extra room for gesture areas" is redundant dead space — tighten the
* whole footer on mobile (less wasted height below CART / CHECKOUT). */
.aieo-sc-footer {
padding: 12px 18px 12px;
}
.aieo-sc-coupon-toggle {
margin-bottom: 10px;
}
.aieo-sc-actions {
margin-bottom: 0;
}
}
.aieo-sc-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
height: 48px;
font-size: 13px;
letter-spacing: 2px;
font-weight: 700;
text-decoration: none;
border-radius: 24px;
transition: background 0.15s ease;
}
.aieo-sc-btn-cart {
background: var(--aieo-btn-secondary-bg, #e9e6e2) !important;
color: var(--aieo-btn-secondary-fg, #1a1a1a) !important;
text-decoration: none !important;
}
.aieo-sc-btn-cart:hover,
.aieo-sc-btn-cart:focus,
.aieo-sc-btn-cart:visited { background: var(--aieo-btn-secondary-bg-hover, #dfdbd4) !important; color: var(--aieo-btn-secondary-fg, #1a1a1a) !important; text-decoration: none !important; }
/* Colours come from the master Button Styles tokens (Tools → Button Styles);
* the brand gold remains the fallback. A saved per-button Side-Cart colour
* still overrides (its inline CSS is emitted later). Themes often force link
* colour on — !important keeps the CHECKOUT text colour regardless. */
.aieo-sc-btn-checkout,
.aieo-sc-btn-checkout:visited {
background: var(--aieo-btn-bg, #c0a37b) !important;
color: var(--aieo-btn-fg, #ffffff) !important;
text-decoration: none !important;
}
.aieo-sc-btn-checkout:hover,
.aieo-sc-btn-checkout:focus { background: var(--aieo-btn-bg-hover, #a88a63) !important; color: var(--aieo-btn-fg, #ffffff) !important; text-decoration: none !important; }
/* Font: follow the storefront face (Aeonik on FF), NOT a bold button font.
* The cart is scoped under .aieo-sc-root (inside ) so `inherit`
* resolves to the theme body font. Weight 500 = brand Medium: a CTA, but
* explicitly not the old bold 700. The .aieo-sc-root scope outranks the
* unscoped .aieo-sc-btn base rule (no !important needed); a saved per-cart
* override from build_action_button_css() is emitted later and still wins. */
.aieo-sc-root .aieo-sc-btn,
.aieo-sc-root .aieo-sc-btn-cart,
.aieo-sc-root .aieo-sc-btn-checkout {
font-family: inherit;
font-weight: 500;
letter-spacing: normal; /* drop the 2px tracking — match the storefront */
}
/* ===== Role-pricing badge ===============================================
* PRO badge pinned to the top-left corner of each card's image (same
* slot SALE used to occupy). Renders for both anonymous AND logged-in
* shoppers when the product has role pricing. Anonymous shoppers also
* get a tooltip with the login nudge on hover/tap.
*
* Position is set inline by the renderer (so it works even if this
* file is cached stale); these rules govern colour, padding, etc. */
.aieo-card-img-wrap { position: relative; }
.aieo-sc-root .aieo-card-role-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 9px;
/* Frosted dark glass — translucent black with backdrop blur. Sits
* gently on top of any product image (light or dark) without the
* stark feel of a solid-fill SALE-style chip. */
background: rgba(20, 20, 20, 0.42);
-webkit-backdrop-filter: blur(10px) saturate(180%);
backdrop-filter: blur(10px) saturate(180%);
color: rgba(255, 255, 255, 0.96);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 4px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.6px;
line-height: 1.4;
cursor: help;
user-select: none;
text-transform: uppercase;
transition: background 0.15s ease, border-color 0.15s ease;
}
.aieo-sc-root .aieo-card-role-badge:hover {
background: rgba(20, 20, 20, 0.62);
border-color: rgba(255, 255, 255, 0.3);
}
.aieo-sc-root .aieo-card-role-badge-icon { font-size: 11px; line-height: 1; }
.aieo-sc-root .aieo-card-role-badge-text { line-height: 1; }
.aieo-sc-root .aieo-card-role-badge-tip {
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background: #1a1a1a;
color: #fff;
padding: 8px 10px;
border-radius: 4px;
font-size: 11px;
font-weight: 400;
letter-spacing: 0;
line-height: 1.4;
text-transform: none;
text-align: left;
white-space: normal;
width: 220px;
max-width: 70vw;
z-index: 100;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.15s ease, visibility 0.15s ease;
}
.aieo-sc-root .aieo-card-role-badge-tip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: #1a1a1a;
}
.aieo-sc-root .aieo-card-role-badge-tip a {
color: #ffffff !important;
text-decoration: underline !important;
}
.aieo-sc-root .aieo-card-role-badge:hover .aieo-card-role-badge-tip,
.aieo-sc-root .aieo-card-role-badge:focus .aieo-card-role-badge-tip,
.aieo-sc-root .aieo-card-role-badge.is-tap-open .aieo-card-role-badge-tip {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* ===== Quick view (Discover it) =========================================
* Triggered from shop-archive product cards. The body is populated client-
* side from the card's own DOM (no AJAX for image/title/price). All rules
* scoped to `.aieo-sc-root` so they can never bleed onto the rest of the
* archive page itself.
* ======================================================================= */
/* Archive trigger button — sits below each shop-loop product card. */
.aieo-quick-view-trigger {
display: inline-block;
width: auto;
margin: 8px 0 0;
padding: 7px 14px;
background: transparent;
border: 1px solid #1a1a1a;
color: #1a1a1a;
font-size: 11px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
line-height: 1.2;
cursor: pointer;
border-radius: 0;
transition: background 0.15s ease, color 0.15s ease;
}
.aieo-quick-view-trigger:hover {
background: #1a1a1a;
color: #ffffff;
}
/* Quick-view tab — only visible after the shopper activates a
* "Discover it". Carries a leading `↩` glyph so its purpose
* (return to the last quick view) reads at a glance. The JS sets
* the inner label to the product name, truncated to ~28 chars. */
.aieo-sc-tab-qv .aieo-sc-qv-tab-label {
text-transform: uppercase;
font-weight: 700;
letter-spacing: 1.5px;
}
.aieo-sc-tab-qv::before {
content: '↩';
margin-right: 4px;
font-size: 11px;
line-height: 1;
opacity: 0.6;
}
.aieo-sc-tab-qv.is-active::before { opacity: 1; }
@media (max-width: 720px) {
/* Mobile is tight — drop the glyph to save space. */
.aieo-sc-tab-qv::before { display: none; }
}
/* Quick view body layout */
.aieo-sc-root [data-aieo-sc-body="quickview"] {
/* Override the default body padding for a more spacious quick-view feel. */
padding: 24px 26px 24px;
}
.aieo-sc-qv {
display: flex;
flex-direction: column;
gap: 16px;
}
.aieo-sc-qv-image {
width: 100%;
aspect-ratio: 1 / 1;
background: #f5f5f5;
overflow: hidden;
border-radius: 4px;
}
.aieo-sc-qv-image img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.aieo-sc-qv-title {
font-size: 18px;
font-weight: 600;
margin: 0;
color: #1a1a1a;
line-height: 1.3;
}
.aieo-sc-qv-title a {
color: inherit;
text-decoration: none;
}
.aieo-sc-qv-title a:hover { text-decoration: underline; }
.aieo-sc-qv-price {
font-size: 16px;
color: #1a1a1a;
line-height: 1.3;
}
.aieo-sc-qv-price del {
color: #b8b8b8;
text-decoration: line-through;
margin-right: 8px;
font-weight: 400;
}
.aieo-sc-qv-price ins {
text-decoration: none;
font-weight: 600;
color: #1a1a1a;
}
.aieo-sc-qv-description {
font-size: 13px;
line-height: 1.5;
color: #4a4a4a;
}
.aieo-sc-qv-description:empty { display: none; }
.aieo-sc-qv-description p { margin: 0 0 8px; }
.aieo-sc-qv-description p:last-child { margin-bottom: 0; }
/* Variation selectors — one pill-shaped