/* * Maxt Offroad — compare.css * * Product comparison UI: the per-card / PDP "Compare" toggle control and * the sitewide sticky bottom compare tray. Enqueued sitewide alongside the * tray shell (template-parts/compare-tray.php). Lean on purpose. * * Layering: the tray sits above page content but below the cart drawer / * garage modal overlays (--z-overlay 200, --z-modal 300), so those dialogs * always cover it. z-index 150. * * @package maxtoffroad */ /* ============================================================= * Opt-in gating — compare is OFF by default * * The per-card / PDP Compare controls and the sitewide tray are hidden * until the visitor flips the archive "Compare" switch ON. compare.js * persists that mode in localStorage (mxo_compare_mode) and reflects it by * toggling the `mxo-compare-on` class on on every page load. Gating * purely on the class (default hidden) means the buttons never flash before * JS runs. * ============================================================= */ .mxo-product-card__compare, .mxo-compare-pdp { display: none; } .mxo-compare-on .mxo-product-card__compare { display: block; } .mxo-compare-on .mxo-compare-pdp { display: block; } /* The tray also stays hidden unless mode is on (compare.js keeps its * `hidden` attribute set when off, but belt-and-suspenders on the class so * a stored selection can never surface the tray while compare is off). */ .mxo-compare-tray { display: none; } .mxo-compare-on .mxo-compare-tray { display: block; } .mxo-compare-on .mxo-compare-tray[hidden] { display: none; } /* ============================================================= * Archive "Compare" mode switch (shop-loop header row) * * inc/compare.php opens a flex wrapper (.mxo-shop-loop-header) around the * before-shop-loop trio at priority 19 and closes it at 31, so the result * count (20), this switch (25), and the ordering form (30) share one flex * row: count + switch on the left, ordering pushed to the right. * ============================================================= */ .mxo-shop-loop-header { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem 1rem; margin-block-end: 1rem; } /* Neutralize WooCommerce's default block/float margins inside the row. */ .mxo-shop-loop-header .woocommerce-result-count, .mxo-shop-loop-header .woocommerce-ordering { margin: 0; float: none; } /* Ordering form to the far right. */ .mxo-shop-loop-header .woocommerce-ordering { margin-inline-start: auto; } .mxo-compare-switch { display: inline-flex; align-items: center; flex: 0 0 auto; } .mxo-compare-switch__label { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; font-family: var(--font-body, inherit); font-size: 0.8125rem; font-weight: 600; line-height: 1; color: var(--muted-foreground, #555); user-select: none; } .mxo-compare-switch__label:hover { color: var(--foreground, #0b0b0b); } /* Visually-hidden native checkbox — keeps keyboard + AT semantics. */ .mxo-compare-switch__input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .mxo-compare-switch__track { position: relative; display: inline-block; flex: 0 0 auto; width: 2.25rem; height: 1.25rem; background: var(--border, #d7d7d7); border-radius: 999px; transition: background-color 0.15s ease; } .mxo-compare-switch__thumb { position: absolute; inset-block-start: 2px; inset-inline-start: 2px; width: 1rem; height: 1rem; background: #fff; border-radius: 999px; box-shadow: 0 1px 2px rgb(0 0 0 / 0.25); transition: transform 0.15s ease; } .mxo-compare-switch__input:checked + .mxo-compare-switch__track { background: var(--primary, #d23a15); } .mxo-compare-switch__input:checked + .mxo-compare-switch__track .mxo-compare-switch__thumb { transform: translateX(1rem); } .mxo-compare-switch__input:focus-visible + .mxo-compare-switch__track { outline: 2px solid var(--ring, var(--brand-orange, #f0532b)); outline-offset: 2px; } /* ============================================================= * Toggle control (product card + PDP) * ============================================================= */ .mxo-compare-toggle { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.625rem; font-family: var(--font-body, inherit); font-size: 0.8125rem; font-weight: 600; line-height: 1; color: var(--muted-foreground, #555); background: transparent; border: 1px solid var(--border, #d7d7d7); border-radius: var(--radius, 6px); cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease; } .mxo-compare-toggle:hover { color: var(--foreground, #0b0b0b); border-color: var(--muted-foreground, #999); } .mxo-compare-toggle:focus-visible { outline: 2px solid var(--ring, var(--brand-orange, #f0532b)); outline-offset: 2px; } .mxo-compare-toggle.is-active { color: var(--primary-foreground, #fff); background: var(--primary, #d23a15); border-color: var(--primary, #d23a15); } .mxo-compare-toggle__icon { flex: 0 0 auto; } /* Swap plus <-> check by state. */ .mxo-compare-toggle__icon-check { display: none; } .mxo-compare-toggle.is-active .mxo-compare-toggle__icon-add { display: none; } .mxo-compare-toggle.is-active .mxo-compare-toggle__icon-check { display: inline; } /* Card placement — full-width strip beneath the footer. Top padding gives * the Compare strip breathing room from the Add-to-Cart footer above it, * matching the card's internal rhythm (--card-pad). */ .mxo-product-card__compare { padding: var(--card-pad, 1rem) var(--card-pad, 1rem) var(--card-pad, 1rem); padding-block-start: 0.75rem; } .mxo-product-card__compare .mxo-compare-toggle { width: 100%; justify-content: center; } /* PDP placement — under the Add to Cart button. */ .mxo-compare-pdp { margin-top: 0.75rem; } /* ============================================================= * Sticky compare tray * ============================================================= */ .mxo-compare-tray { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 150; background: var(--foreground, #0b0b0b); color: #fff; box-shadow: var(--shadow-lg, 0 -4px 16px rgb(0 0 0 / 0.2)); border-block-start: 3px solid var(--brand-orange, #f0532b); } .mxo-compare-tray[hidden] { display: none; } .mxo-compare-tray__inner { display: flex; align-items: center; gap: 1rem; padding-block: 0.75rem; flex-wrap: wrap; } .mxo-compare-tray__lead { display: flex; align-items: center; flex: 0 0 auto; } .mxo-compare-tray__heading { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-display, inherit); font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; } .mxo-compare-tray__count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; padding: 0 0.375rem; font-size: 0.8125rem; font-weight: 700; color: #fff; background: var(--brand-orange, #f0532b); border-radius: 999px; } /* Thumbnails */ .mxo-compare-tray__thumbs { display: flex; align-items: center; gap: 0.5rem; margin: 0; padding: 0; list-style: none; flex: 1 1 auto; min-width: 0; overflow-x: auto; } .mxo-compare-tray__thumb { position: relative; flex: 0 0 auto; width: 48px; height: 48px; border-radius: var(--radius, 6px); background: #fff; overflow: hidden; } .mxo-compare-tray__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; } .mxo-compare-tray__thumb-fallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-family: var(--font-display, inherit); font-weight: 700; color: var(--foreground, #0b0b0b); text-transform: uppercase; } .mxo-compare-tray__thumb-remove { position: absolute; inset-block-start: -4px; inset-inline-end: -4px; display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; color: #fff; background: var(--destructive, #b91c1c); border: 1px solid #fff; border-radius: 999px; cursor: pointer; } .mxo-compare-tray__thumb-remove:focus-visible { outline: 2px solid #fff; outline-offset: 1px; } /* Actions */ .mxo-compare-tray__actions { display: flex; align-items: center; gap: 0.75rem; flex: 0 0 auto; margin-inline-start: auto; } .mxo-compare-tray__go.is-disabled { opacity: 0.5; pointer-events: none; } .mxo-compare-tray__clear { padding: 0.25rem 0.5rem; font-family: var(--font-body, inherit); font-size: 0.8125rem; font-weight: 600; color: #fff; background: transparent; border: 0; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .mxo-compare-tray__clear:hover { color: var(--brand-orange, #f0532b); } .mxo-compare-tray__clear:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* Hidden nudge region — visually hidden but announced. */ .mxo-compare-nudge { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Small screens: stack lead + actions, keep thumbs scrollable. */ @media (max-width: 560px) { .mxo-compare-tray__inner { gap: 0.5rem 0.75rem; } .mxo-compare-tray__heading { font-size: 0.875rem; } .mxo-compare-tray__actions { width: 100%; justify-content: space-between; margin-inline-start: 0; order: 3; } } @media (prefers-reduced-motion: reduce) { .mxo-compare-toggle { transition: none; } }