/* =============================================================================
* AIEO DMM Side Cart — Rey-theme-inspired styling.
*
* Two-column panel (left: "You might like" recommendations, right: main cart).
* Scrim overlay, floating trigger, tabs, progress bar, items, carousel, footer.
*
* Namespace .aieo-sc-* so nothing collides with om-free-shipping's .om-sc-*.
* ========================================================================== */
/* -------- Floating trigger ---------------------------------------------- */
/* `aieo-sc-root` is the JS hook + scrim/panel/trigger parent, but it does NOT
* need to take any layout space itself. Previously this had `position: fixed;
* inset: 0` to act as a viewport-sized overlay — but every interactive child
* (.aieo-sc-trigger, .aieo-sc-scrim, .aieo-sc-panel) is independently
* `position: fixed` already, so the root being fixed served no purpose.
*
* Worse, `position: fixed; inset: 0` on the root was being miscomputed when an
* ancestor establishes a new containing block (transform, filter, contain,
* etc., as introduced by some themes / mega-menu plugins) — the root ended up
* sized to the ancestor's box, which on mobile inflated past the viewport.
* That extra width then propagated to the floating trigger via `right: 20px`,
* pushing it off-canvas and forcing the document to grow.
*
* `display: contents` removes the wrapper from the layout tree entirely
* (children render as if their styles applied directly to the body) — no
* box, no width contribution, no containing-block issues. JS still finds
* `#aieo-sc-root` as a delegation target. Closed-panel layout removal is
* handled separately by `[hidden]` on .aieo-sc-panel. */
.aieo-sc-root {
display: contents;
}
/* -------- Floating shell (desktop = single round button; mobile = bar) -- */
/* Desktop: the shell only exists to host the trigger as a single child.
* The trigger keeps its own `position: fixed` (below) so existing layouts
* stay byte-identical. The burger + search children are hidden on desktop
* — without this, the shell's `display: contents` lets them render in
* body's natural flow (= bottom of the page, near the footer), which
* shows up as a stray FiboSearch input below the copyright line. */
.aieo-sc-floating-shell { display: contents; }
.aieo-sc-bar-burger,
.aieo-sc-bar-search,
.aieo-sc-bar-chat { display: none; }
/* -------- Desktop AI Chat launcher (symmetric to cart trigger) ---------
* Same 56×56 circle, same shadow, same z-index as .aieo-sc-trigger.
* Position mode selected by `data-position-mode` attribute on the
* element (admin setting `side_cart_chat_desktop_position`):
* left → bottom-left, mirror image of the cart on the bottom-right
* above → stacked above the cart on the same right edge, gap = 20px
* (so the two circles + the gap occupy 132px of vertical
* space: 20 bottom + 56 cart + 20 gap + 56 chat).
*
* Hidden on mobile — chat lives in the bar there. */
.aieo-sc-chat-desktop {
position: fixed;
width: 56px; height: 56px;
border-radius: 50%;
border: 0;
background: #0e0e0e;
color: #fff;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
cursor: pointer;
pointer-events: auto;
display: flex; align-items: center; justify-content: center;
transition: transform 0.18s ease, background 0.18s ease;
z-index: 999996;
}
.aieo-sc-chat-desktop:hover { transform: translateY(-2px); background: #1a1a1a; }
.aieo-sc-chat-desktop[data-position-mode="left"] { left: 20px; bottom: 20px; right: auto; }
.aieo-sc-chat-desktop[data-position-mode="above"] { right: 20px; bottom: 96px; left: auto; }
/* Defensive — if at any point the search modal is left visible on
* desktop (orphaned state from an open/close mid-deploy), force it
* hidden so it can't paint the FiboSearch form into the page flow. */
@media (min-width: 721px) {
.aieo-search-modal { display: none !important; }
}
/* -------- Hide the chat addon's native floating UI ----------------------
*
* When our chat slot is enabled we force-enable the addon's
* `aieo_chat_floating_enabled` option so its enqueue + popup HTML
* (#aieo-floating-chat-window) lands in the page. We then drive that
* popup from our own bar / desktop launcher via clicks on
* #aieo-floating-chat-trigger / #aieo-chat-close. The addon's own
* trigger button + welcome bubble would visually conflict with our
* launcher, so we hide them here.
*
* NOTE: this rule is a no-op on sites that don't have our chat slot
* enabled — the addon's elements simply aren't in the DOM. */
#aieo-floating-chat-trigger,
#aieo-floating-welcome-bubble {
display: none !important;
}
.aieo-sc-trigger {
position: fixed;
right: 20px;
bottom: 20px;
width: 56px; height: 56px;
border-radius: 50%;
border: 0;
background: #0e0e0e;
color: #fff;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
cursor: pointer;
pointer-events: auto;
display: flex; align-items: center; justify-content: center;
transition: transform 0.18s ease, background 0.18s ease;
/* Lower z-index than the scrim + panel so when the side cart
* opens, the panel naturally covers the floating trigger. When
* closed, scrim is opacity:0 / pointer-events:none and the panel
* is translated off-screen, so the trigger is fully reachable. */
z-index: 999996;
}
.aieo-sc-trigger:hover { transform: translateY(-2px); background: #1a1a1a; }
.aieo-sc-trigger-icon { display: flex; }
.aieo-sc-trigger-count {
position: absolute;
top: -4px; right: -4px;
min-width: 20px; height: 20px;
padding: 0 5px;
background: #c0a37b;
color: #fff;
border-radius: 10px;
/* Flex-centred + tabular numerals — `line-height: 20px` looked
* symmetric in metrics but most fonts render numerals on a
* baseline that sits visually below the cap-height, so the digit
* drifted down ~1-2px inside the circle. Flex aligns to optical
* centre. */
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 600;
line-height: 1;
letter-spacing: 0;
/* Force tabular + lining figures so the badge width stays
* constant whether the count is 1, 2, or 11 — no horizontal
* shift, and digits sit on the cap-line (mathematically centred). */
font-variant-numeric: tabular-nums lining-nums;
font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.aieo-sc-trigger-count:empty,
.aieo-sc-trigger-count[data-count="0"] { display: none; }
/* -------- Fullscreen search modal (mobile FiboSearch host) -------------- */
.aieo-search-modal[hidden] { display: none; }
.aieo-search-modal {
position: fixed;
inset: 0;
z-index: 1000000; /* above the navigator (100000) + bar (999996) */
display: flex;
flex-direction: column;
}
.aieo-search-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(20, 20, 20, 0.45);
}
.aieo-search-modal__panel {
position: relative;
margin: env(safe-area-inset-top, 0px) auto auto;
width: min(640px, 100%);
background: var(--wp--preset--color--bg, #ffffff);
padding: 56px 20px 24px; /* top space leaves room for the × button */
border-bottom-left-radius: 18px;
border-bottom-right-radius: 18px;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}
.aieo-search-modal__close {
position: absolute;
top: 10px; right: 10px;
width: 36px; height: 36px;
background: transparent;
border: 0;
font-size: 28px;
line-height: 1;
cursor: pointer;
color: var(--wp--preset--color--fg, #1f2937);
}
.aieo-search-modal__slot {
/* The FiboSearch wrapper docks here on open. The plugin manages
* its own input width / dropdown positioning relative to itself,
* so we just give it a clean column to occupy. */
width: 100%;
}
/* Make the FiboSearch input look at home in the modal — desktop-tier
* styling (centered placeholder, normal weight) carries over. */
.aieo-search-modal__slot .dgwt-wcas-search-wrapp,
.aieo-search-modal__slot .dgwt-wcas-search-form,
.aieo-search-modal__slot .dgwt-wcas-sf-wrapp {
width: 100%;
margin: 0;
padding: 0;
}
/* (Chat modal removed — we drive the chat addon's own floating popup
* #aieo-floating-chat-window now, see the dispatch JS in side-cart.) */
/* -------- Side cart panel containment (overflow safety) ----------------- */
/* The panel is `position: fixed` but during its slide-in/out animation
* the browser still lays it out at full width and walks `transform`
* keyframes — on Safari/iOS that can briefly contribute to
* `document.scrollWidth` during the 280ms transition window, manifesting
* as a horizontal-scroll flicker just after a close click. `contain: paint`
* tells the engine the panel's effects don't escape its own box, removing
* the contribution; `overflow: hidden` on the panel + descending media
* blocks the broken-image leak path the merchant flagged (a missing
* product thumbnail in YOU MAY ALSO LIKE renders at intrinsic dimensions
* and pushes the panel rightward). */
.aieo-sc-panel {
contain: paint;
overflow-x: hidden; /* horizontal-only — vertical scroll inside the
panel still works via inner overflow regions */
}
.aieo-sc-panel img,
.aieo-sc-panel video,
.aieo-sc-panel picture {
max-width: 100%;
height: auto;
}
/* -------- Mobile: shell becomes a full-width sticky bar ----------------- */
@media (max-width: 720px) {
/* The whole shell becomes the bar, fixed to the viewport bottom.
* Burger on the left, search in the middle, trigger (flattened) on
* the right. Same DOM, different layout — no JS reparenting, no
* race with the desktop fixed-circle paint.
*
* Background = the FF brand accent (#F46767, also exposed via
* --wp--preset--color--accent). Icons paint white (--bg) for
* contrast on the saturated red. */
.aieo-sc-floating-shell {
display: flex !important;
position: fixed !important;
left: 0; right: 0; bottom: 0;
z-index: 999996;
align-items: center;
justify-content: space-between;
padding: 8px 16px calc(env(safe-area-inset-bottom, 0px) + 8px);
background: var(--wp--preset--color--accent, #F46767);
border-top: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.10);
box-sizing: border-box;
color: var(--wp--preset--color--bg, #ffffff);
}
/* All slot buttons (burger / search / chat / future) share the same
* shape — no chrome, 44×44 minimum touch target, white icon. */
.aieo-sc-bar-burger,
.aieo-sc-bar-search,
.aieo-sc-bar-chat {
display: inline-flex !important;
align-items: center; justify-content: center;
background: transparent;
border: 0;
padding: 8px;
min-width: 44px; min-height: 44px;
color: var(--wp--preset--color--bg, #ffffff);
cursor: pointer;
}
.aieo-sc-bar-burger:active,
.aieo-sc-bar-search:active,
.aieo-sc-bar-chat:active { transform: scale(0.96); }
/* The desktop chat-launcher floating circle is hidden on mobile —
* chat lives in the bar there, so two surfaces would conflict. */
.aieo-sc-chat-desktop { display: none !important; }
/* Trigger flattens — drops the desktop "fixed black circle" so it
* sits as the bar's right slot. Same SVG, same count badge, same
* click handler — only the box presentation changes. */
.aieo-sc-trigger {
position: static !important;
width: auto !important; height: auto !important;
min-width: 44px; min-height: 44px;
right: auto !important; bottom: auto !important;
background: transparent !important;
color: var(--wp--preset--color--bg, #ffffff) !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 8px !important;
z-index: auto;
}
.aieo-sc-trigger:hover { transform: none; background: transparent !important; }
/* Count badge re-anchored against the smaller flat icon. */
.aieo-sc-trigger-count {
top: 2px; right: 2px;
background: var(--wp--preset--color--fg, #1f2937);
color: var(--wp--preset--color--bg, #ffffff);
}
/* Reserve room at the bottom of every page so content scrolling
* to the end isn't permanently obscured by the bar. Matches the
* bar's hard-coded height (58px — Material 3 Bottom Navigation
* spec, balances 48dp WCAG touch target + 4-5dp padding each
* side). Kept static (no env(safe-area) in the math) so iOS
* Safari can't change body height during URL-bar transitions,
* which was making the bar appear to grow on scroll. */
body { padding-bottom: 58px; }
}
/* -------- Scrim --------------------------------------------------------- */
.aieo-sc-scrim {
position: fixed;
inset: 0;
background: rgba(20, 20, 20, 0.35);
opacity: 0; pointer-events: none;
transition: opacity 0.24s ease;
z-index: 999997;
}
.aieo-sc-root.is-open .aieo-sc-scrim { opacity: 1; pointer-events: auto; }
/* -------- Panel --------------------------------------------------------- */
/* `[hidden]` means the panel is taken out of layout when closed. Some themes
* override the global [hidden] selector, so we restate it explicitly with high
* specificity. JS coordinates the transition (sets hidden→present before adding
* .is-open, then re-applies hidden after the close transitionend). */
.aieo-sc-panel[hidden] { display: none !important; }
.aieo-sc-panel {
position: fixed;
top: 0; right: 0; bottom: 0;
width: 720px; max-width: 96vw;
display: grid;
grid-template-columns: 190px minmax(0, 1fr);
/* Transparent panel — each column owns its own background. The
* left "you might like" column applies an Apple-glass blur, so the
* panel itself can't be opaque (would block the blur from seeing
* the page below). The right main column stays solid white. */
background: transparent;
box-shadow: -12px 0 32px rgba(0, 0, 0, 0.12);
transform: translateX(100%);
transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: auto;
z-index: 999998;
overflow: hidden;
}
/* Defensive box-sizing — themes often set it in unpredictable ways and a
* single element with extra padding can force a horizontal scrollbar on the
* whole panel. Border-box everywhere under the root, no exceptions. */
.aieo-sc-root,
.aieo-sc-root *,
.aieo-sc-root *::before,
.aieo-sc-root *::after { box-sizing: border-box; }
.aieo-sc-root.is-open .aieo-sc-panel { transform: translateX(0); }
/* Animate the column-template change when the reco-col is toggled —
* modern browsers (Chrome 111+, Safari 17.4+, Firefox 116+) interpolate
* grid-template-columns; older browsers snap immediately, which is
* still a clean state change. */
.aieo-sc-panel {
transition:
transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
grid-template-columns 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Rey-style "collapse the recommendations sidebar" toggle. Pinned
* to the seam between the two columns; slides to the panel's left
* edge when the sidebar is collapsed. State stored in sessionStorage
* (per-session) under `aieo_sc_reco_collapsed`. */
.aieo-sc-reco-toggle {
position: absolute;
top: 50%;
left: 178px; /* 190px column - 12px (half of 24px button) */
transform: translateY(-50%);
width: 24px;
height: 24px;
border-radius: 50%;
background: #ffffff;
border: 1px solid #d8d8d8;
color: #5a5a5a;
cursor: pointer;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1),
color 0.15s ease,
border-color 0.15s ease,
background 0.15s ease;
}
.aieo-sc-reco-toggle:hover { color: #1a1a1a; border-color: #1a1a1a; }
.aieo-sc-reco-toggle-icon {
width: 7px;
height: 11px;
transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Collapsed state: shrink the reco column to 0, slide the toggle to
* the panel's left edge, mirror the chevron to point right (open). */
.aieo-sc-root.is-reco-collapsed .aieo-sc-panel {
grid-template-columns: 0 minmax(0, 1fr);
}
.aieo-sc-root.is-reco-collapsed .aieo-sc-reco-col {
overflow: hidden;
padding: 0;
border-right: 0;
box-shadow: none;
}
.aieo-sc-root.is-reco-collapsed .aieo-sc-reco-toggle {
/* Sit fully inside the panel's left edge so neither the icon
* nor the box-shadow gets clipped by the panel boundary. */
left: 6px;
}
/* Sidebar open (aria-expanded="true") → chevron `>` (click to close,
* pushes the sidebar away).
* Sidebar closed (aria-expanded="false") → chevron `<` (click to open,
* pulls the sidebar back). */
.aieo-sc-reco-toggle[aria-expanded="true"] .aieo-sc-reco-toggle-icon {
transform: scaleX(1);
}
.aieo-sc-reco-toggle[aria-expanded="false"] .aieo-sc-reco-toggle-icon {
transform: scaleX(-1);
}
/* Hide the toggle on mobile — the reco column is already hidden
* there (panel goes single-column), so toggling it is a no-op. */
@media (max-width: 720px) {
.aieo-sc-reco-toggle { display: none; }
}
/* -------- Left column: recommendations ---------------------------------- */
/* Apple-style "liquid glass" panel — translucent white with a heavy
* backdrop blur so the page beneath shows through softly. Subtle inner
* highlight on the right edge replaces the old hard `1px solid #eee`. */
.aieo-sc-reco-col {
background: rgba(255, 255, 255, 0.55);
-webkit-backdrop-filter: blur(24px) saturate(180%);
backdrop-filter: blur(24px) saturate(180%);
border-right: 1px solid rgba(255, 255, 255, 0.35);
box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.04);
padding: 22px 14px;
overflow-y: auto;
}
/* "You might like.." — bumped to a properly legible 18px / 700, brand
* gold and uppercase. Reads as a peer-level navigation label without
* being so small the eye misses it. */
.aieo-sc-reco-title {
font-size: 18px;
font-weight: 700;
letter-spacing: 0.6px;
text-transform: uppercase;
color: #c0a37b;
margin-bottom: 18px;
line-height: 1.4;
}
.aieo-sc-reco-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 22px;
}
.aieo-sc-reco-item {
text-align: left;
font-family: inherit;
}
/* ---- 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.
* --------------------------------------------------------------------- */
.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;
}
/* -------- Right column: main cart --------------------------------------- */
.aieo-sc-main-col {
display: flex;
flex-direction: column;
min-width: 0;
max-width: 100%;
overflow: hidden;
background: #fff;
height: 100%;
}
/* Tab bodies wrapper — owns the desktop scroll area so the shared
* footer below stays pinned. `min-height: 0` is critical so the flex
* child can shrink below its intrinsic content height (otherwise the
* scroll never engages). */
.aieo-sc-tab-bodies {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* Header with tabs + close */
.aieo-sc-header {
display: flex;
align-items: center;
padding: 20px 26px 0;
border-bottom: 1px solid #eee;
}
.aieo-sc-tabs { flex: 1; display: flex; gap: 14px; flex-wrap: nowrap; }
.aieo-sc-tab {
background: transparent;
border: 0;
padding: 0 0 14px;
font-size: 9px;
font-weight: 500;
letter-spacing: 0.6px;
color: #c9c9c9;
cursor: pointer;
border-bottom: 2px solid transparent;
position: relative;
display: flex;
align-items: baseline;
gap: 3px;
transition: color 0.15s ease, border-bottom-color 0.15s ease;
white-space: nowrap;
}
.aieo-sc-tab:hover {
color: #1a1a1a;
border-bottom-color: #d8d8d8;
}
.aieo-sc-tab.is-active {
color: #1a1a1a;
border-bottom-color: #c0a37b;
}
.aieo-sc-tab.is-active:hover {
border-bottom-color: #c0a37b; /* keep gold on the active tab */
}
.aieo-sc-tab-count {
font-size: 8px;
font-weight: 400;
letter-spacing: 0;
color: inherit;
opacity: 0.75;
}
.aieo-sc-close {
background: transparent;
border: 0;
font-size: 24px;
line-height: 1;
color: #6a6a6a;
cursor: pointer;
padding: 0 0 14px 20px;
}
.aieo-sc-close:hover { color: #1a1a1a; }
/* ─────────────────────────────────────────────────────────────────
* Favourites sub-tabs (Products / Articles / Brands / Categories /
* Needs). Rendered client-side in aieo-side-cart.js (renderFavShell)
* inside the `data-aieo-sc-body="favorites"` panel.
*
* Styled to mirror the OUTER tabs (.aieo-sc-tab) so the visual
* language stays consistent across both tab levels:
* default → muted gray text, transparent underline
* hover → near-black text, light-gray underline
* active → near-black text, gold underline (#c0a37b)
*
* Sub-tabs use a slightly larger font + tighter letter-spacing than
* the outer tabs (the outer ones are ALL-CAPS at 9px / 0.6px, which
* reads as a primary nav; the inner row is regular case at 11px /
* 0.3px so it doesn't compete visually).
* ───────────────────────────────────────────────────────────────── */
.aieo-sc-fav-subtabs {
display: flex;
flex-wrap: wrap;
gap: 18px;
margin: 4px 0 18px;
padding: 0 0 1px;
border-bottom: 1px solid #eee;
}
.aieo-sc-fav-subtab {
background: transparent;
border: 0;
padding: 0 0 10px;
font-family: inherit;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.3px;
text-transform: uppercase;
color: #c9c9c9;
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px; /* overlap the parent's bottom border so the
active underline replaces it cleanly */
display: inline-flex;
align-items: baseline;
gap: 4px;
transition: color 0.15s ease, border-bottom-color 0.15s ease;
white-space: nowrap;
}
.aieo-sc-fav-subtab:hover {
color: #1a1a1a;
border-bottom-color: #d8d8d8;
}
.aieo-sc-fav-subtab.is-active,
.aieo-sc-fav-subtab[aria-selected="true"] {
color: #1a1a1a;
border-bottom-color: #c0a37b;
}
.aieo-sc-fav-subtab.is-active:hover,
.aieo-sc-fav-subtab[aria-selected="true"]:hover {
border-bottom-color: #c0a37b; /* keep gold on the active sub-tab */
}
.aieo-sc-fav-subtab:focus-visible {
outline: 2px solid #c0a37b;
outline-offset: 2px;
border-radius: 1px;
}
.aieo-sc-fav-subtab__badge {
font-size: 9px;
font-weight: 400;
letter-spacing: 0;
color: inherit;
opacity: 0.75;
padding: 0 4px;
line-height: 1.4;
border-radius: 8px;
}
/* Body — one body is shown at a time inside .aieo-sc-tab-bodies. The
* visible one fills the wrapper (flex: 1) and scrolls internally on
* desktop. Mobile collapses the wrapper into the page scroll (see
* the responsive block at the bottom of this file).
*
* Big bottom padding (40px) gives the carousel — which sits at the
* end of the bag body — enough breathing room above the persistent
* footer's visual edge. Without it the last slide sits flush against
* the footer's top border and the ADD TO BAG link can read as cut.
*
* Display block (not flex-column) so the scrollbar's max-scroll
* calculation reliably matches the natural sum of children heights —
* a flex-column body sometimes under-reports its scroll height when
* the last child has min-content sizing. */
.aieo-sc-body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
/* No bottom padding — body scrolls naturally past the carousel
* since `display: block` reports the correct scroll height
* (no flex-column quirks). */
padding: 20px 26px 0;
display: block;
}
.aieo-sc-body[hidden] { display: none; }
/* Free-shipping bar */
.aieo-sc-fs { margin: 4px 0 20px; }
.aieo-sc-fs-msg {
margin: 0 0 8px;
font-size: 13px;
font-weight: 600;
color: #1a1a1a;
text-align: center;
}
.aieo-sc-fs-bar {
height: 6px;
background: #e9e9e9;
border-radius: 3px;
overflow: hidden;
}
.aieo-sc-fs-bar > span {
display: block;
height: 100%;
background: #c0a37b;
transition: width 0.24s ease;
width: 0;
}
/* -------- Cart items (WC-canonical shell, neutral interactive parts) -------
* Outer wrapper classes (`.woocommerce-mini-cart`, `.mini_cart_item`) match
* what WC emits so themes that target those at the CONTAINER level still
* see them. For the interactive stepper we use OUR OWN classes
* (`.aieo-qty-wrap`, `.aieo-qty-btn`, `.aieo-qty-input`) because themes
* style `.quantity` as big pill-borders around static cart text and that
* fights our compact stepper every time. */
/* Neutralize any theme-level styling that targets our side-cart items
* descended from `.mini_cart_item` — reset borders/padding/display so our
* grid layout below is predictable. Scoped to .aieo-sc-root so we only
* touch our own side-cart DOM, never the theme's own mini-cart widget. */
.aieo-sc-root .aieo-mini-cart,
.aieo-sc-root .aieo-mini-cart .mini_cart_item,
.aieo-sc-root .aieo-mini-cart .mini_cart_item * {
box-sizing: border-box;
}
.aieo-sc-root .aieo-mini-cart .mini_cart_item .quantity,
.aieo-sc-root .aieo-mini-cart .mini_cart_item .aieo-qty-wrap,
.aieo-sc-root .aieo-mini-cart .mini_cart_item .aieo-qty-btn,
.aieo-sc-root .aieo-mini-cart .mini_cart_item .aieo-qty-input,
.aieo-sc-root .aieo-mini-cart .mini_cart_item .aieo-unit-price,
.aieo-sc-root .aieo-mini-cart .mini_cart_item .aieo-line-total {
/* Prevent theme's Botiga/Rey `.mini_cart_item .quantity { border: 2px
* solid, border-radius: 24px, padding: 12px 18px }` from styling our
* layout. */
border: 0;
border-radius: 0;
background: transparent;
padding: 0;
margin: 0;
}
.aieo-mini-cart {
list-style: none;
margin: 0;
padding: 0;
}
.aieo-mini-cart .mini_cart_item {
display: grid;
/* thumb | qty stepper | unit price | line total
* Unit price column is `auto` so it sits flush against the stepper;
* the spacer between unit and total comes from the third column being
* `minmax(0,1fr)` — actually the grid is built right-to-left:
* col1 thumb (60px)
* col2 qty (auto)
* col3 unit (auto)
* col4 total (auto, anchored to the right via 1fr filler row above) */
grid-template-columns: 60px auto auto 1fr auto;
grid-template-rows: auto auto;
column-gap: 10px;
row-gap: 4px;
align-items: start;
padding: 12px 0;
border-bottom: 1px solid #f0f0f0;
position: relative;
}
.aieo-mini-cart .mini_cart_item.is-gift {
background: #fafaf3;
margin: 0 -8px;
padding: 12px 8px;
border-radius: 6px;
}
/* Thumb/title link: display:contents flattens the so its children
* participate directly in the parent grid. */
.aieo-mini-cart-thumb-title {
display: contents;
color: inherit;
text-decoration: none;
}
.aieo-mini-cart-img {
grid-column: 1;
grid-row: 1 / 3;
width: 60px;
}
.aieo-mini-cart-img img {
display: block;
width: 60px;
height: auto;
border-radius: 4px;
}
.aieo-mini-cart-name {
grid-column: 2 / 6;
grid-row: 1;
font-size: 13px;
font-weight: 600;
color: #1a1a1a;
line-height: 1.3;
word-break: break-word;
padding-right: 28px; /* leave space for the × button in the top-right */
}
/* Rey-style stepper: thin pill border around `[− N +]`, FLAT inside —
* no button hover backgrounds, no input border, the glyphs in a quiet
* grey. The pill itself is the only visual containment. */
.aieo-qty-wrap {
grid-column: 2;
grid-row: 2;
display: inline-flex !important;
align-items: center !important;
gap: 0 !important;
border: 1px solid #d8d8d8 !important;
border-radius: 16px !important;
padding: 0 4px !important;
background: #ffffff !important;
width: fit-content;
align-self: center;
height: 26px !important;
box-sizing: border-box !important;
}
.aieo-sc-root .aieo-qty-btn,
.aieo-sc-root button.aieo-qty-btn {
background: transparent !important;
border: 0 !important;
width: 22px;
height: 24px;
border-radius: 0 !important;
font-size: 14px;
font-weight: 300;
line-height: 1;
color: #9a9a9a;
cursor: pointer;
padding: 0 !important;
margin: 0 !important;
display: inline-flex;
align-items: center;
justify-content: center;
transition: color 0.15s ease;
/* Theme rules apply backdrop-filter / box-shadow / text-shadow to
* generic `button:hover` selectors — kill all of them so the qty
* stepper stays flat. */
box-shadow: none !important;
text-shadow: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
.aieo-sc-root .aieo-qty-btn:hover,
.aieo-sc-root .aieo-qty-btn:focus,
.aieo-sc-root .aieo-qty-btn:active,
.aieo-sc-root button.aieo-qty-btn:hover,
.aieo-sc-root button.aieo-qty-btn:focus,
.aieo-sc-root button.aieo-qty-btn:active {
background: transparent !important;
color: #1a1a1a;
box-shadow: none !important;
text-shadow: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
outline: 0 !important;
}
.aieo-sc-root .aieo-qty-input,
.aieo-sc-root input.aieo-qty-input {
width: 22px !important;
min-width: 22px !important;
max-width: 22px !important;
height: 22px !important;
text-align: center;
color: #1a1a1a !important;
font-size: 12px !important;
font-weight: 500 !important;
line-height: 22px !important;
border: 0 !important;
background: transparent !important;
background-color: transparent !important;
-moz-appearance: textfield;
appearance: textfield;
box-shadow: none !important;
padding: 0 !important;
/* Theme ships a global `input[type="text"] { -webkit-backdrop-filter:
* blur(...) }` that renders as a soft halo around the qty number.
* Force it off scoped to the side cart. */
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
text-shadow: none !important;
}
/* :hover / :focus / :active / :focus-visible all need the same kill
* list — themes target each interaction state independently with
* backdrop-filter, box-shadow, border-color, etc. The dgwt-wcas search
* stylesheet in particular re-applies the blur on hover. */
.aieo-sc-root .aieo-qty-input:hover,
.aieo-sc-root .aieo-qty-input:focus,
.aieo-sc-root .aieo-qty-input:focus-visible,
.aieo-sc-root .aieo-qty-input:active,
.aieo-sc-root input.aieo-qty-input:hover,
.aieo-sc-root input.aieo-qty-input:focus,
.aieo-sc-root input.aieo-qty-input:focus-visible,
.aieo-sc-root input.aieo-qty-input:active {
background: transparent !important;
background-color: transparent !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
text-shadow: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
color: #1a1a1a !important;
filter: none !important;
}
/* The wrapper itself can also catch a hover glow from theme rules
* targeting the parent of inputs. Lock down on hover too. */
.aieo-sc-root .aieo-qty-wrap:hover,
.aieo-sc-root .aieo-qty-wrap:focus-within {
box-shadow: none !important;
-webkit-box-shadow: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
.aieo-qty-input::-webkit-outer-spin-button,
.aieo-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Unit price sits flush against the qty stepper. Sale items keep WC's
* standard `regular sale` markup — the regular
* fades out and strikes through, the sale weights up beside it. */
.aieo-unit-price {
grid-column: 3;
grid-row: 2;
align-self: center;
font-size: 12px;
color: #1a1a1a;
line-height: 1.3;
white-space: nowrap;
}
.aieo-unit-price del {
color: #b8b8b8;
text-decoration: line-through;
margin-right: 6px;
font-weight: 400;
}
.aieo-unit-price ins {
text-decoration: none;
font-weight: 600;
color: #1a1a1a;
}
.aieo-line-total {
grid-column: 5;
grid-row: 2;
align-self: center;
justify-self: end;
font-weight: 600;
color: #1a1a1a;
font-size: 13px;
white-space: nowrap;
}
.aieo-gift-qty {
grid-column: 2 / 4;
grid-row: 2;
font-size: 11px;
letter-spacing: 1px;
font-weight: 700;
color: #c0a37b;
text-transform: uppercase;
}
/* Remove button — top-right corner of the item row. The anchor no longer
* carries WC's `remove_from_cart_button` class (dropped to suppress WC core's
* onRemoveFromCart delegate from firing a parallel wc-ajax:remove_from_cart);
* we style off `.aieo-remove` directly. */
.aieo-sc-root .aieo-mini-cart .aieo-remove {
position: absolute;
top: 12px;
right: 0;
width: 22px;
height: 22px;
border-radius: 50%;
border: 1px solid #e0e0e0;
color: #6a6a6a;
font-size: 14px;
line-height: 20px;
text-align: center;
text-decoration: none;
background: #fff;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.aieo-sc-root .aieo-mini-cart .aieo-remove:hover { color: #1a1a1a; }
.aieo-sc-root .aieo-mini-cart .aieo-remove svg,
.aieo-sc-root .aieo-mini-cart .aieo-remove img { display: none; }
.woocommerce-mini-cart__empty-message {
padding: 48px 0;
text-align: center;
color: #6a6a6a;
font-size: 14px;
margin: 0;
}
/* Continue shopping */
.aieo-sc-continue {
display: inline-block;
margin: 14px 0 24px;
font-size: 12px;
letter-spacing: 2px;
font-weight: 600;
color: #1a1a1a;
text-decoration: underline;
text-underline-offset: 3px;
}
/* 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 {
display: flex;
gap: 8px;
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) {
.aieo-sc-actions {
margin-bottom: 24px; /* extra room for mobile gesture areas */
}
}
.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: #e9e6e2 !important;
color: #1a1a1a !important;
text-decoration: none !important;
}
.aieo-sc-btn-cart:hover,
.aieo-sc-btn-cart:focus,
.aieo-sc-btn-cart:visited { background: #dfdbd4 !important; color: #1a1a1a !important; text-decoration: none !important; }
/* Themes often force link color on — override with !important so the
* CHECKOUT button text stays white regardless of the active palette. */
.aieo-sc-btn-checkout,
.aieo-sc-btn-checkout:visited {
background: #c0a37b !important;
color: #ffffff !important;
text-decoration: none !important;
}
.aieo-sc-btn-checkout:hover,
.aieo-sc-btn-checkout:focus { background: #a88a63 !important; color: #ffffff !important; text-decoration: none !important; }
/* ===== 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