/* =========================================================================
* Instant Add to Cart & Side Cart — frontend styles
* CSS custom properties are injected inline in (see Frontend::print_css_vars).
* ===================================================================== */
:root {
--iac-accent: #1677ff;
--iac-accent-contrast: #fff;
--iac-radius: 10px;
--iac-width: 420px;
--iac-anim: 260ms;
--iac-bg: #fff;
--iac-fg: #1f1f1f;
--iac-muted: #8c8c8c;
--iac-border: #f0f0f0;
--iac-line: #f5f5f5;
/* Skeleton shimmer needs real contrast against the drawer bg, or it reads as
an empty drawer while the cart loads. These are deliberately darker than
--iac-line so the loading bars are clearly visible. */
--iac-skel-base: #e4e4e7;
--iac-skel-shine: #f4f4f5;
--iac-danger: #ff4d4f;
--iac-success: #52c41a;
--iac-shadow: 0 8px 40px rgba(0, 0, 0, .16);
}
/* The side cart is intentionally always LIGHT (white panel) on every device — it
no longer follows the OS `prefers-color-scheme: dark`, which used to flip it
dark on phones with system dark mode on. Removing the auto-dark block keeps the
panel white regardless of device or theme. */
html.iac-locked { overflow: hidden; }
/* ---- Overlay -------------------------------------------------------- */
.iac-overlay {
position: fixed; inset: 0; z-index: 99998;
background: rgba(0, 0, 0, .45);
opacity: 0; transition: opacity var(--iac-anim) ease;
backdrop-filter: blur(1px);
}
.iac-overlay.is-visible { opacity: 1; }
/* ---- Drawer --------------------------------------------------------- */
.iac-drawer {
position: fixed; top: 0; bottom: 0; z-index: 99999;
width: min(var(--iac-width), 92vw);
display: flex; flex-direction: column;
background: var(--iac-bg); color: var(--iac-fg);
/* Force light rendering of native controls (the qty number input, scrollbars)
even when the device/OS is in dark mode — otherwise they render dark inside
the white panel on phones. */
color-scheme: light;
box-shadow: var(--iac-shadow);
font-size: calc(14px * (var(--iac-font-scale, 100%) / 100%));
transition: transform var(--iac-anim) cubic-bezier(.4, 0, .2, 1);
-webkit-font-smoothing: antialiased;
}
.iac-drawer--right { right: 0; transform: translateX(105%); }
.iac-drawer--left { left: 0; transform: translateX(-105%); }
.iac-drawer.is-open { transform: translateX(0); }
.iac-drawer__head {
display: flex; align-items: center; justify-content: space-between;
padding: 18px 20px; border-bottom: 1px solid var(--iac-border);
}
.iac-drawer__title { margin: 0; font-size: 1.15em; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.iac-drawer__count {
min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px;
background: var(--iac-accent); color: var(--iac-accent-contrast);
font-size: .72em; display: inline-flex; align-items: center; justify-content: center; font-weight: 600;
}
.iac-drawer__close {
border: 0; background: transparent; font-size: 28px; line-height: 1;
color: var(--iac-muted); cursor: pointer; padding: 0 4px; transition: color var(--iac-anim);
}
.iac-drawer__close:hover { color: var(--iac-fg); }
.iac-drawer__body { flex: 1 1 auto; overflow-y: auto; padding: 8px 20px; }
.iac-drawer__body.is-empty { display: flex; align-items: center; justify-content: center; }
/* ---- Free shipping bar --------------------------------------------- */
.iac-freeship { padding: 12px 20px; border-bottom: 1px solid var(--iac-border); }
.iac-freeship__msg { font-size: .85em; margin-bottom: 8px; color: var(--iac-fg); }
.iac-freeship__track { height: 6px; border-radius: 3px; background: var(--iac-line); overflow: hidden; }
.iac-freeship__fill {
height: 100%; width: 0; border-radius: 3px;
background: var(--iac-accent); transition: width 500ms cubic-bezier(.4, 0, .2, 1);
}
.iac-freeship.is-qualified .iac-freeship__fill { background: var(--iac-success); }
.iac-freeship.is-qualified .iac-freeship__msg { color: var(--iac-success); font-weight: 600; }
/* ---- Cart item ------------------------------------------------------ */
.iac-item {
display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: start;
padding: 13px 0; border-bottom: 1px solid var(--iac-line);
opacity: 0; transform: translateY(6px);
transition: opacity var(--iac-anim), transform var(--iac-anim), background var(--iac-anim);
}
.iac-item.is-in { opacity: 1; transform: none; }
/* Waiting on the (possibly slow) /remove REST call: keep the row VISIBLE with a
clear "Removing…" veil instead of instantly hiding it. */
.iac-item.is-removing { pointer-events: none; }
/* Exit AFTER the server confirms: slide out to the right and fade. */
.iac-item.is-removed { opacity: 0; transform: translateX(40px); }
.iac-item--ghost { opacity: .85; }
.iac-item--ghost.is-in { opacity: 1; }
.iac-item--error { background: rgba(255, 77, 79, .08); }
/* Thumbnail (with the trash control anchored to its corner). */
.iac-item__thumb {
position: relative; width: 64px; height: 64px; border-radius: var(--iac-radius);
overflow: visible; background: var(--iac-line); flex: 0 0 64px;
}
.iac-item__thumb img,
.iac-item__thumb-ph {
width: 100%; height: 100%; object-fit: cover; display: block;
border-radius: var(--iac-radius); background: var(--iac-line);
}
.iac-item__thumb-ph {
background: linear-gradient(90deg, var(--iac-line) 25%, var(--iac-border) 37%, var(--iac-line) 63%);
background-size: 400% 100%; animation: iac-shimmer 1.4s ease infinite;
}
.iac-item__remove {
position: absolute; bottom: -7px; left: -7px; z-index: 2;
width: 24px; height: 24px; border-radius: 50%; padding: 0;
display: flex; align-items: center; justify-content: center;
background: var(--iac-bg); color: var(--iac-muted); cursor: pointer;
border: 1px solid var(--iac-border); box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
transition: background var(--iac-anim), color var(--iac-anim), border-color var(--iac-anim), transform var(--iac-anim);
}
.iac-item__remove:hover {
background: rgba(255, 77, 79, .12); color: var(--iac-danger);
border-color: var(--iac-danger); transform: scale(1.08);
}
.iac-item__remove svg { display: block; }
.iac-item__main { min-width: 0; display: flex; flex-direction: column; }
.iac-item__name {
font-weight: 600; font-size: 13.5px; color: var(--iac-fg); text-decoration: none; line-height: 1.32;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.iac-item__name:hover { color: var(--iac-accent); }
/* Non-linked name (admin turned the link off): plain text, no hover/cursor. */
.iac-item__name--plain { cursor: default; }
.iac-item__name--plain:hover { color: var(--iac-fg); }
/* Social-proof pill row, right-aligned ABOVE the title. */
.iac-item__proof-row { display: flex; justify-content: flex-end; margin: 0 0 3px; }
/* Inline badge row under the title (only the "You save" badge when placed inline). */
.iac-item__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 5px 0 0; }
/* "+X bought this" social-proof pill. */
.iac-item__proof {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 7px; border-radius: 999px;
font-size: 10px; font-weight: 600; line-height: 1.3;
color: var(--iac-accent);
background: rgba(22, 119, 255, .1); /* fallback */
background: color-mix(in srgb, var(--iac-accent) 12%, transparent);
}
.iac-item__proof svg { flex: 0 0 10px; }
/* "You save …" inline pill (sits in the badge row). */
.iac-item__save-badge {
display: inline-flex; align-items: center;
padding: 2px 7px; border-radius: 999px;
font-size: 10px; font-weight: 700; line-height: 1.3;
color: var(--iac-success);
background: rgba(82, 196, 26, .12);
}
/* Bottom row: qty (or ghost status) on the left, price inline on the right. */
.iac-item__bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; }
/* Read-only "Qty x N" label. */
.iac-item__qtylabel { font-size: 12.5px; font-weight: 500; color: var(--iac-muted); }
/* Ghost "Adding…" status badge. */
.iac-item__adding {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12px; font-weight: 600; color: var(--iac-muted);
}
/* Inline "Removing…" label in the bottom row (between qty and price) while the
/remove request is in flight — red text + spinner, mirrors the ghost "Adding…". */
.iac-item__removing-inline {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12px; font-weight: 600; color: var(--iac-danger);
white-space: nowrap;
}
/* Price block, inline on the right of the bottom row. */
.iac-item__price { display: flex; align-items: baseline; justify-content: flex-end; flex-wrap: wrap; column-gap: 6px; row-gap: 1px; text-align: right; white-space: nowrap; flex: 1 1 auto; min-width: 0; }
.iac-item__regular { color: var(--iac-muted); font-size: .82em; font-weight: 400; text-decoration: line-through; }
.iac-item__unit { font-weight: 700; font-size: 14px; color: var(--iac-fg); }
/* "You save …" under the price: its own full-width line inside .iac-item__price,
pill pushed to the right. Vertical spacing comes from the price's 1px row-gap. */
.iac-item__save {
flex-basis: 100%; margin: 0;
display: flex; justify-content: flex-end;
}
.iac-item__save-pill {
display: inline-flex; align-items: center;
padding: 2px 7px; border-radius: 999px;
font-size: 10px; font-weight: 700; line-height: 1.3;
color: var(--iac-success);
background: rgba(82, 196, 26, .12);
}
/* Server-rendered strike markup (EPO + dynamic-pricing was now). */
.iac-item__price--rendered { line-height: 1.25; column-gap: 6px; row-gap: 1px; }
.iac-item__price--rendered del,
.iac-item__price--rendered del .woocommerce-Price-amount {
color: var(--iac-muted); font-size: .82em; font-weight: 400; text-decoration: line-through;
}
.iac-item__price--rendered ins,
.iac-item__price--rendered ins .woocommerce-Price-amount {
text-decoration: none; font-weight: 700; font-size: 14px; color: var(--iac-fg);
}
.iac-item__price--rendered .woocommerce-Price-amount { white-space: nowrap; }
/* While a qty change is recalculating, shimmer JUST the price (no row reflow). */
.iac-item.is-updating .iac-item__price { position: relative; color: transparent; }
.iac-item.is-updating .iac-item__price * { visibility: hidden; }
.iac-item.is-updating .iac-item__price::after {
content: ''; position: absolute; inset: 0; border-radius: 6px; visibility: visible;
background: linear-gradient(90deg, var(--iac-line) 25%, var(--iac-border) 37%, var(--iac-line) 63%);
background-size: 400% 100%; animation: iac-shimmer 1.2s ease infinite;
}
/* ---- Meta unfold ---------------------------------------------------- */
/* When positioned at the bottom, the details span the full item width below
the thumbnail + main columns. */
.iac-item { position: relative; }
.iac-item__meta-wrap { grid-column: 1 / -1; margin-top: 4px; }
.iac-item__meta { margin: 6px 0 2px; }
.iac-meta__toggle {
display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent;
color: var(--iac-muted); font-size: .76em; cursor: pointer; padding: 2px 0;
text-decoration: underline; text-underline-offset: 2px;
}
.iac-meta__toggle:hover { color: var(--iac-fg); }
.iac-meta__toggle svg { transition: transform var(--iac-anim); }
.iac-item__meta.is-open .iac-meta__toggle svg { transform: rotate(180deg); }
.iac-meta__list {
list-style: none; margin: 0; padding: 0; max-height: 0; overflow: hidden;
transition: max-height var(--iac-anim) ease, margin var(--iac-anim) ease;
}
.iac-item__meta.is-open .iac-meta__list {
max-height: 600px; margin-top: 6px; padding: 8px 10px;
background: var(--iac-line); border-radius: var(--iac-radius);
}
.iac-meta__row { display: flex; gap: 5px; font-size: .76em; padding: 1.5px 0; color: var(--iac-muted); align-items: baseline; line-height: 1.4; }
.iac-meta__k { font-weight: 600; color: var(--iac-fg); flex: 0 0 auto; }
.iac-meta__k::after { content: ':'; }
.iac-meta__v { flex: 1 1 auto; min-width: 0; word-break: break-word; }
/* Add-on / EPO rows lean slightly lighter than variation attributes. */
.iac-meta__row--addon .iac-meta__k { font-weight: 500; }
/* ---- Quantity control (pill) --------------------------------------- */
.iac-qty { display: inline-flex; align-items: center; border: 1px solid var(--iac-border); border-radius: 999px; overflow: hidden; height: 28px; background: var(--iac-bg); }
.iac-qty__btn {
width: 28px; height: 28px; border: 0; background: transparent; color: var(--iac-fg);
font-size: 15px; font-weight: 700; line-height: 1; cursor: pointer; transition: background var(--iac-anim);
}
.iac-qty__btn:hover:not(:disabled) { background: var(--iac-line); }
.iac-qty__btn:disabled { opacity: .4; cursor: not-allowed; }
.iac-qty__input {
width: 34px; height: 28px; border: 0; text-align: center; background: transparent;
color: var(--iac-fg); font-size: .88em; font-weight: 600; -moz-appearance: textfield;
}
.iac-qty__input::-webkit-outer-spin-button,
.iac-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* ---- Skeleton preloader -------------------------------------------- */
/* Skeletons reuse .iac-item for layout, but .iac-item starts at opacity:0 and
only becomes visible once JS adds .is-in (which real items/ghosts get but
skeletons don't). Force skeletons fully visible so the cart-loading state
never renders as a blank drawer. */
.iac-item.iac-skel { opacity: 1; transform: none; }
.iac-skel { align-items: center; }
.iac-skel__thumb { flex: 0 0 64px; width: 64px; height: 64px; border-radius: var(--iac-radius); }
.iac-skel__lines { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; }
.iac-skel__line { height: 12px; border-radius: 6px; }
.iac-skel__line--lg { width: 80%; }
.iac-skel__line--md { width: 55%; }
.iac-skel__line--sm { width: 35%; }
.iac-skel__thumb, .iac-skel__line {
background: linear-gradient(90deg, var(--iac-skel-base) 25%, var(--iac-skel-shine) 37%, var(--iac-skel-base) 63%);
background-size: 400% 100%;
}
/* Shimmer */
.iac-skel--shimmer .iac-skel__thumb,
.iac-skel--shimmer .iac-skel__line { animation: iac-shimmer 1.4s ease infinite; }
@keyframes iac-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
/* Pulse */
.iac-skel--pulse .iac-skel__thumb,
.iac-skel--pulse .iac-skel__line { animation: iac-pulse 1.2s ease-in-out infinite; }
@keyframes iac-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
/* Wave */
.iac-skel--wave .iac-skel__thumb,
.iac-skel--wave .iac-skel__line { animation: iac-shimmer 1.8s linear infinite; }
/* ---- Empty state ---------------------------------------------------- */
.iac-empty { text-align: center; color: var(--iac-muted); padding: 40px 20px; }
.iac-empty svg { color: var(--iac-border); margin-bottom: 12px; }
.iac-empty p { margin: 0 0 16px; }
/* ---- Cross-sells ---------------------------------------------------- */
.iac-crosssells { padding: 14px 20px; border-top: 1px solid var(--iac-border); }
.iac-crosssells__title { margin: 0 0 10px; font-size: .9em; font-weight: 600; }
.iac-xsell { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.iac-xsell img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; }
.iac-xsell__info { flex: 1 1 auto; font-size: .8em; }
.iac-xsell__info a { color: var(--iac-fg); text-decoration: none; display: block; }
.iac-xsell__add {
flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--iac-accent);
background: transparent; color: var(--iac-accent); font-size: 16px; cursor: pointer;
transition: background var(--iac-anim), color var(--iac-anim);
}
.iac-xsell__add:hover { background: var(--iac-accent); color: var(--iac-accent-contrast); }
/* ---- Footer --------------------------------------------------------- */
.iac-drawer__foot { padding: 16px 20px; border-top: 1px solid var(--iac-border); background: var(--iac-bg); }
.iac-drawer__foot.is-sticky { position: sticky; bottom: 0; }
.iac-trust { margin-bottom: 14px; }
.iac-trust__badges { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 10px; padding: 0; justify-content: center; }
.iac-trust__badge { display: flex; align-items: center; gap: 5px; font-size: .74em; color: var(--iac-muted); }
.iac-trust__badge svg { color: var(--iac-accent); }
.iac-trust__secure { text-align: center; font-size: .76em; color: var(--iac-muted); margin: 6px 0; }
.iac-trust__pay { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 6px; }
.iac-pay {
font-size: .62em; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
padding: 3px 7px; border-radius: 5px; border: 1px solid var(--iac-border); color: var(--iac-muted);
}
.iac-subtotal { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.iac-subtotal__label { font-size: .95em; }
.iac-subtotal__value { font-size: 1.25em; font-weight: 700; }
.iac-shipping { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; font-size: .95em; }
.iac-shipping__value { font-weight: 600; }
.iac-savings { text-align: right; font-size: .78em; color: var(--iac-success); font-weight: 600; margin-bottom: 12px; }
.iac-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; padding-top: 12px; border-top: 1px dashed #d0d0d0; }
.iac-total__label { font-size: 1.05em; font-weight: 700; }
.iac-total__value { font-size: 1.3em; font-weight: 800; }
.iac-actions { display: flex; flex-direction: column; gap: 8px; }
/* ---- Buttons -------------------------------------------------------- */
.iac-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
padding: 12px 18px; border-radius: var(--iac-radius); font-weight: 600; font-size: .95em;
text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: all var(--iac-anim);
}
.iac-btn--primary { background: var(--iac-accent); color: var(--iac-accent-contrast); }
.iac-btn--primary:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(22, 119, 255, .28); }
.iac-btn--ghost { background: transparent; border-color: var(--iac-border); color: var(--iac-fg); }
.iac-btn--ghost:hover { border-color: var(--iac-accent); color: var(--iac-accent); }
.iac-btn--link { background: transparent; color: var(--iac-muted); padding: 6px; }
.iac-btn--link:hover { color: var(--iac-accent); }
/* ---- Floating bubble ----------------------------------------------- */
.iac-bubble {
position: fixed; bottom: 24px; z-index: 99990; right: 24px;
width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
background: var(--iac-minicart-bg, var(--iac-accent)); color: var(--iac-minicart-icon, var(--iac-accent-contrast));
display: flex; align-items: center; justify-content: center;
box-shadow: 0 6px 24px rgba(0, 0, 0, .22); transition: transform var(--iac-anim);
}
.iac-bubble:hover { transform: scale(1.06); }
.iac-bubble.is-bump { animation: iac-bump 420ms ease; }
@keyframes iac-bump { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.18); } 60% { transform: scale(.94); } }
.iac-bubble__count {
position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 6px;
background: var(--iac-danger); color: #fff; border-radius: 10px; font-size: 11px; font-weight: 700;
display: flex; align-items: center; justify-content: center;
}
/* ---- Inline mini-cart ([iac_mini_cart] shortcode) ------------------- */
.iac-minicart {
display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
border: 0; background: transparent; color: inherit; padding: 4px 6px; line-height: 1;
font: inherit; transition: opacity var(--iac-anim);
}
.iac-minicart:hover { opacity: .75; }
.iac-minicart__icon { position: relative; display: inline-flex; color: var(--iac-minicart-bg, var(--iac-accent)); }
.iac-minicart__icon > svg { display: block; }
.iac-minicart__count {
position: absolute; top: -8px; right: -10px; min-width: 18px; height: 18px; padding: 0 5px;
background: var(--iac-accent); color: var(--iac-accent-contrast); border-radius: 9px;
font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.iac-minicart__count[hidden] { display: none; }
.iac-minicart__label { font-weight: 500; }
.iac-minicart__total { font-weight: 600; }
/* ---- Spinner + count preloader (cache-friendly) -------------------- */
.iac-spinner {
display: inline-block; width: 13px; height: 13px; flex: 0 0 13px;
border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
animation: iac-spin .65s linear infinite;
}
.iac-count-spinner {
display: none; width: 11px; height: 11px;
border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
animation: iac-spin .65s linear infinite;
}
/* While the live cart count is unknown (e.g. cached page): show the spinner,
hide the number. The count badge stays visible so layout doesn't jump. */
.iac-count-loading [data-iac-count] { display: inline-flex; align-items: center; justify-content: center; }
.iac-count-loading [data-iac-count] .iac-count-num { display: none; }
.iac-count-loading [data-iac-count] .iac-count-spinner { display: inline-block; }
/* Bubble badge while loading: force-show even at zero so the spinner is visible. */
.iac-bubble.iac-count-loading .iac-bubble__count { display: flex; }
/* ---- Add-to-cart button states ------------------------------------- */
.iac-loading { position: relative; pointer-events: none; opacity: .8; }
.iac-loading::after {
content: ''; position: absolute; right: 10px; top: 50%; width: 14px; height: 14px;
margin-top: -7px; border: 2px solid currentColor; border-right-color: transparent;
border-radius: 50%; animation: iac-spin .6s linear infinite;
}
@keyframes iac-spin { to { transform: rotate(360deg); } }
.iac-added { background: var(--iac-success) !important; border-color: var(--iac-success) !important; color: #fff !important; }
/* ---- Toast ---------------------------------------------------------- */
.iac-toast {
position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 80px); z-index: 100000;
background: #1f1f1f; color: #fff; padding: 12px 20px; border-radius: var(--iac-radius);
font-size: .85em; box-shadow: var(--iac-shadow); opacity: 0; transition: all var(--iac-anim);
max-width: 90vw;
}
.iac-toast.is-show { transform: translate(-50%, 0); opacity: 1; }
/* ---- Reduced motion ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
* { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}