/* LS Upsell — matches the product page tokens: #111 sections, #1a1a1a cards, 1px #2a2a2a borders, 10px radius, #e0e0e0 text, Inter. */ /* Declared on :root as well as .lsups so blocks that render outside the wrapper — the kit strip, the promo strip — still resolve their colours. The plugin also writes the merchant's values to :root as inline CSS. */ :root, .lsups { --lsups-accent: #ff0044; --lsups-fill: var(--ls-red-btn, #e00038); --lsups-fill-hover: var(--ls-red-btn-hover, #b8002e); --lsups-surface: #1a1a1a; --lsups-border: #2a2a2a; --lsups-text: #e0e0e0; --lsups-muted: #9a9a9a; --lsups-radius: 10px; } /* 2026-09-08: the block's own font, colour, margin and box-sizing used to sit in the rule above. With :root in that selector list they applied to itself, so `margin: 32px 0` put a 32px band above the header and below the footer on EVERY page of the site. Only the custom properties belong on :root; everything that paints belongs to .lsups. */ .lsups { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--lsups-text); margin: 32px 0; box-sizing: border-box; } .lsups *, .lsups *::before, .lsups *::after { box-sizing: inherit; } /* Section heading for every block the plugin renders. It was 18px in the body face — smaller than the 20px "Cart totals" beside it on the cart and half the 36px cross-sells heading below it, so it read as a caption rather than the title of the section. Barlow Condensed at 28px is the site's heading voice at the size a section this wide asks for. */ .lsups__heading { font-family: var(--ls-font-display, "Barlow Condensed", Helvetica, Arial, sans-serif); font-size: var(--ls-h3, 26px); line-height: var(--ls-leading-h3, 1.2); font-weight: 700; letter-spacing: 0; margin: 0 0 18px; padding: 0; color: #fff; text-transform: none; } /* ---------- card ---------- */ .lsups-card { position: relative; display: flex; flex-direction: column; gap: 10px; background: var(--lsups-surface); border: 1px solid var(--lsups-border); border-radius: var(--lsups-radius); padding: 14px; min-height: 100%; transition: border-color .18s ease, transform .18s ease; } .lsups-card:hover { border-color: var(--lsups-accent); } /* The whole card is the checkbox in the frequently-bought-together set. */ .lsups-card.is-toggle { cursor: pointer; } .lsups-card.is-toggle .lsups-card__title { cursor: pointer; } .lsups-card.is-toggle a.lsups-card__title { cursor: pointer; text-decoration: none; } .lsups-card.is-toggle a.lsups-card__title:hover { color: var(--lsups-accent); text-decoration: underline; } .lsups-card.is-selected { border-color: var(--lsups-accent); } .lsups-card.is-toggle:has(.lsups-check:focus-visible) { outline: 2px solid #fff; outline-offset: 2px; } /* Its own controls stay their own controls. */ .lsups-card.is-toggle select, .lsups-card.is-toggle button, .lsups-card.is-toggle a { cursor: auto; } .lsups-card.is-toggle select { cursor: pointer; } .lsups-card__media { display: block; aspect-ratio: 1 / 1; /* reserved before the image loads: no layout shift */ border-radius: calc(var(--lsups-radius) - 4px); overflow: hidden; background: #141414; } .lsups-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .lsups-card__body { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; } .lsups-card__brand { font-size: var(--ls-micro, 12px); letter-spacing: var(--ls-tracking-eyebrow, .12em); text-transform: uppercase; color: var(--lsups-muted); font-family: var(--ls-font-body, Inter, Helvetica, Arial, sans-serif); font-weight: 600; line-height: 1.3; } /* Untruncated by design — no line-clamp, no ellipsis. */ .lsups-card__title { font-size: var(--ls-h4, 20px); line-height: var(--ls-leading-h4, 1.25); font-weight: 600; color: #fff; text-decoration: none; overflow-wrap: anywhere; font-family: var(--ls-font-display, "Barlow Condensed", Helvetica, Arial, sans-serif); } .lsups-card__title:hover { color: var(--lsups-accent); } .lsups-card__rating { display: flex; align-items: center; gap: 6px; font-size: var(--ls-small, 14px); color: var(--lsups-muted); } .lsups-stars { display: inline-flex; gap: 2px; } .lsups-star { width: 12px; height: 12px; display: inline-block; background: #3a3a3a; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); } .lsups-star.is-full { background: var(--lsups-accent); } .lsups-star.is-half { background: linear-gradient(90deg, var(--lsups-accent) 50%, #3a3a3a 50%); } .lsups-card__variations, .lsups-card__fitment { font-size: var(--ls-caption, 12px); color: var(--lsups-muted); } .lsups-card__fitment { display: flex; align-items: center; gap: 6px; color: #7ac47a; } .lsups-tick { width: 12px; height: 12px; flex: none; position: relative; display: inline-block; } .lsups-tick::before { content: ""; position: absolute; left: 3px; top: 0; width: 5px; height: 9px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); } .lsups-card__options { display: block; } .lsups-card__options select { width: 100%; padding: 7px 9px; background: #0f0f0f; color: var(--lsups-text); border: 1px solid var(--lsups-border); border-radius: 5px; font: inherit; font-size: var(--ls-body, 16px); line-height: 1.3; } .lsups-card__options select:focus-visible { outline: 2px solid var(--lsups-accent); outline-offset: 1px; } .lsups-card__price { font-size: var(--ls-price-card, 16px); font-weight: 700; color: #fff; margin-top: auto; font-family: var(--ls-font-body, Inter, Helvetica, Arial, sans-serif); line-height: 1.2; } .lsups-card__price del { color: var(--lsups-muted); font-weight: 400; font-size: var(--ls-small, 14px); margin-right: 6px; } .lsups-card__price ins { text-decoration: none; } /* Woo wraps a variation's price_html in , which the theme styles at 1.75rem in the accent colour - so a variable product's card price came out twice the size and a different colour from a simple product's. */ .lsups .lsups-card .lsups-card__price .price { display: inline; margin: 0; padding: 0; font-family: var(--ls-font-body, Inter, Helvetica, Arial, sans-serif); font-size: var(--ls-price-card, 16px); font-weight: 700; line-height: 1.2; color: #fff; } .lsups-card__action { margin-top: 2px; } /* checkbox */ .lsups-card__check { position: absolute; top: 10px; left: 10px; z-index: 2; cursor: pointer; } .lsups-card__check input { position: absolute; opacity: 0; width: 0; height: 0; } .lsups-card__box { display: block; width: 20px; height: 20px; border: 2px solid #4a4a4a; border-radius: 4px; background: rgba(0,0,0,.6); transition: background .15s ease, border-color .15s ease; } .lsups-card__check input:checked + .lsups-card__box { background: var(--lsups-accent); border-color: var(--lsups-accent); } .lsups-card__check input:checked + .lsups-card__box::after { content: ""; display: block; margin: 2px 0 0 6px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .lsups-card__check input:focus-visible + .lsups-card__box { outline: 2px solid #fff; outline-offset: 2px; } .lsups-card__check input:disabled + .lsups-card__box { opacity: .4; cursor: not-allowed; } /* ---------- buttons ---------- */ .lsups-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 10px 14px; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 6px; background: rgba(255, 255, 255, 0.08); color: #fff; font: inherit; font-size: var(--ls-btn-font-sm, 14px); font-weight: 700; letter-spacing: var(--ls-tracking-button, .12em); text-decoration: none; cursor: pointer; transition: background .18s ease, border-color .18s ease, color .18s ease; font-family: var(--ls-font-display, "Barlow Condensed", Helvetica, Arial, sans-serif); text-transform: uppercase; } .lsups-btn:hover { background: var(--lsups-fill); border-color: var(--lsups-fill); color: #fff; } .lsups-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .lsups-btn[disabled] { opacity: .5; cursor: not-allowed; } .lsups-btn--primary { background: var(--lsups-fill); border-color: var(--lsups-fill); width: auto; padding: 12px 22px; } .lsups-btn--primary:hover { background: var(--lsups-fill-hover); border-color: var(--lsups-fill-hover); } .lsups-btn--ghost { background: transparent; } .lsups-btn.is-done { background: #1f3d1f; border-color: #2f5f2f; } /* ---------- grid ---------- */ .lsups-grid__row { display: grid; grid-template-columns: repeat(var(--lsups-cols, 3), minmax(0, 1fr)); gap: 14px; } /* ---------- frequently bought together ---------- */ .lsups-fbt { background: #111; border: 1px solid var(--lsups-border); border-radius: var(--lsups-radius); padding: 20px; } .lsups-fbt__row { display: flex; align-items: stretch; gap: 14px; /* matches .lsups-grid__row — the two blocks sit under each other */ flex-wrap: wrap; } .lsups-fbt__item { flex: 1 1 180px; min-width: 160px; position: relative; } .lsups-fbt__item .lsups-card { height: 100%; } .lsups-fbt__plus { display: flex; align-items: center; font-size: 22px; font-weight: 300; color: var(--lsups-muted); flex: 0 0 auto; } /* Marks the product the page is already about. As a caption under the card it collided with the footer rule on desktop, and once the set stacked on a phone it read as a heading for the card below. On the card it does neither. */ .lsups-fbt__thisitem { position: absolute; top: 8px; right: 8px; z-index: 2; padding: 3px 7px; background: rgba(0, 0, 0, .72); border: 1px solid var(--lsups-border); border-radius: 4px; font-size: var(--ls-caption, 12px); line-height: 1.2; letter-spacing: var(--ls-tracking-eyebrow, .12em); text-transform: uppercase; color: var(--lsups-muted); } .lsups-fbt__footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--lsups-border); } .lsups-fbt__total { font-size: var(--ls-body, 16px); } .lsups-fbt__total-label { color: var(--lsups-muted); margin-right: 8px; } .lsups-fbt__total-value { font-size: var(--ls-price-total, 24px); font-weight: 700; color: #fff; line-height: 1.2; } .lsups-fbt__msg:not(:empty) { margin-top: 12px; font-size: var(--ls-small, 14px); color: var(--lsups-muted); } .lsups-grid__msg:not(:empty) { margin-top: 10px; font-size: var(--ls-small, 14px); color: var(--lsups-muted); } /* ---------- complete kit ---------- */ .lsups-kit { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: #0d0d0d; border: 1px solid var(--lsups-accent); border-radius: var(--lsups-radius); padding: 14px; margin-bottom: 20px; } .lsups-kit__media { flex: 0 0 72px; width: 72px; } .lsups-kit__media img { width: 100%; height: auto; border-radius: 6px; display: block; } .lsups-kit__body { flex: 1 1 200px; display: flex; flex-direction: column; gap: 4px; } .lsups-kit__eyebrow { font-size: var(--ls-micro, 12px); letter-spacing: var(--ls-tracking-eyebrow, .12em); text-transform: uppercase; color: var(--lsups-accent); font-weight: 600; font-family: var(--ls-font-body, Inter, Helvetica, Arial, sans-serif); line-height: 1.3; } .lsups-kit__title { font-size: var(--ls-h4, 20px); font-weight: 600; color: #fff; text-decoration: none; font-family: var(--ls-font-display, "Barlow Condensed", Helvetica, Arial, sans-serif); line-height: var(--ls-leading-h4, 1.25); } .lsups-kit__title:hover { color: var(--lsups-accent); } .lsups-kit__price { font-size: var(--ls-price-card, 16px); font-weight: 700; color: #fff; font-family: var(--ls-font-body, Inter, Helvetica, Arial, sans-serif); } .lsups-kit__action { flex: 0 0 auto; } .lsups-kit__action .lsups-btn { width: auto; padding: 10px 20px; } /* ---------- progress ---------- */ .lsups-progress { background: #111; border: 1px solid var(--lsups-border); border-radius: var(--lsups-radius); padding: 16px 18px; } .lsups-progress__head { margin-bottom: 10px; } .lsups-progress__label { font-size: var(--ls-body, 16px); font-weight: 600; color: #fff; display: inline-flex; align-items: center; gap: 8px; } .lsups-progress__label.is-done { color: #7ac47a; } .lsups-progress__track { height: 6px; background: #262626; border-radius: 999px; overflow: hidden; } .lsups-progress__fill { display: block; height: 100%; background: var(--lsups-accent); border-radius: 999px; transition: width .4s ease; } .lsups-progress.is-qualified .lsups-progress__fill { background: #7ac47a; } .lsups-progress__closers { margin-top: 16px; } .lsups-progress__closers-label { font-size: var(--ls-caption, 12px); color: var(--lsups-muted); margin-bottom: 10px; } /* ---------- promo strip ---------- */ .lsups-promo { position: relative; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--lsups-surface); border: 1px solid var(--lsups-border); border-radius: var(--lsups-radius); padding: 12px 44px 12px 12px; } .lsups-promo__media { flex: 0 0 56px; width: 56px; } .lsups-promo__media img { width: 100%; height: auto; border-radius: 6px; display: block; } .lsups-promo__body { flex: 1 1 200px; display: flex; flex-direction: column; gap: 2px; } .lsups-promo__eyebrow { font-size: var(--ls-micro, 12px); letter-spacing: var(--ls-tracking-eyebrow, .12em); text-transform: uppercase; color: var(--lsups-accent); font-family: var(--ls-font-body, Inter, Helvetica, Arial, sans-serif); font-weight: 600; line-height: 1.3; } .lsups-promo__title { font-size: var(--ls-body, 16px); font-weight: 600; color: #fff; text-decoration: none; } .lsups-promo__title:hover { color: var(--lsups-accent); } .lsups-promo__price { font-size: var(--ls-small, 14px); color: var(--lsups-muted); } .lsups-promo__action { flex: 0 0 auto; } .lsups-promo__action .lsups-btn { width: auto; padding: 9px 18px; } .lsups-promo__dismiss { position: absolute; top: 8px; right: 10px; background: none; border: 0; color: var(--lsups-muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 4px; } .lsups-promo__dismiss:hover { color: #fff; } /* ---------- responsive ---------- */ @media (max-width: 782px) { .lsups-grid__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lsups-fbt__plus { display: none; } .lsups-fbt__footer { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 16px; } .lsups-btn--primary { width: 100%; } /* Every product-page row is 90% wide with its own 20px gutter now, so the block inherits the same edges as the tabs above it. No gutter of our own or the block reads narrower than everything else on the page. */ .lsups-fbt { padding: 16px; } .lsups-kit { margin-bottom: 16px; } } @media (max-width: 480px) { /* 28px is right over a three-across grid; over one card it is a shout. */ .lsups__heading { font-size: var(--ls-h3, 26px); margin-bottom: 14px; font-family: var(--ls-font-display, "Barlow Condensed", Helvetica, Arial, sans-serif); line-height: var(--ls-leading-h3, 1.2); letter-spacing: 0; } .lsups-card__title { font-size: var(--ls-h4, 20px); font-family: var(--ls-font-display, "Barlow Condensed", Helvetica, Arial, sans-serif); font-weight: 600; line-height: var(--ls-leading-h4, 1.25); } .lsups-grid__row { grid-template-columns: 1fr; } .lsups-fbt__item { flex-basis: 100%; } /* One card per row: a full-bleed square photo made every card taller than the screen, so four suggestions took five screens of scrolling to read. The image sits beside the text instead - the standard mobile list row. */ .lsups-card { display: grid; /* 104px of a 237px content row is 44% of the width given to a thumbnail, and it left the title 119px to wrap in — six lines for a product name. 88px still reads as a photo and hands the text column 22 more px. */ grid-template-columns: 88px minmax(0, 1fr); column-gap: 12px; row-gap: 10px; align-items: start; } .lsups-card__media { grid-column: 1; grid-row: 1; } .lsups-card__body { grid-column: 2; grid-row: 1; } .lsups-card__action { grid-column: 1 / -1; grid-row: 2; margin-top: 0; } .lsups-card__price { margin-top: 4px; } .lsups-card__check { top: 8px; left: 8px; } .lsups-kit { gap: 12px; } .lsups-kit__media { flex: 0 0 56px; width: 56px; } .lsups-kit__action { flex: 1 1 100%; } .lsups-kit__action .lsups-btn { width: 100%; } .lsups-promo__action { flex: 1 1 100%; } .lsups-promo__action .lsups-btn { width: 100%; } } @media (prefers-reduced-motion: reduce) { .lsups-card, .lsups-btn, .lsups-progress__fill { transition: none; } } /* ---------- fallback placement ---------- Used when the blocks are appended after a Divi Theme Builder body layout rather than after a module inside it: there is no row to inherit a width from, so the wrapper carries the site's own measure and the section rhythm. */ .lsups-fallback { width: 90%; max-width: 1200px; margin: 0 auto 60px; } .lsups-fallback > .lsups:first-child { margin-top: 0; } .lsups-fallback > .lsups:last-child { margin-bottom: 0; } /* ---------- anchored placement ---------- The blocks sit on one side of an anchor module or shortcode. Placed before it they are the first thing in their container, and the .lsups top margin would stack on whatever padding the section above already carries. */ .lsups-anchored--before > .lsups:first-child { margin-top: 0; } .lsups-anchored--after > .lsups:last-child { margin-bottom: 0; } /* ---------- cart drawer: offer slider (2026-09-11) ---------- Offers inside the LS Cart slide-out. They used to stack one per row under the cart lines, each 90px tall, which pushed the lines themselves out of view once two or three were showing. Now: one row of compact cards that scrolls sideways (snap, swipe on a phone, arrow buttons for a mouse), pinned to the bottom of the drawer body just above the totals, with the next card peeking in from the right so the row reads as scrollable. Cards are wide and short (thumbnail beside the text). Type stays on the site scale: caps label (Barlow 16 uppercase), card title Inter 14/600, price Inter 16/700, button Barlow 14 caps. */ .lscart .lsups-grid[data-placement="drawer"] { margin: auto 0 0; /* the body is a flex column: this pins it low */ padding: 16px 0 0; border-top: 1px solid var(--lsups-border); } .lscart .lsups-slider__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; } .lscart .lsups-grid[data-placement="drawer"] .lsups__heading { margin: 0; font-family: var(--ls-font-display, "Barlow Condensed", Helvetica, Arial, sans-serif); font-size: var(--ls-h5, 16px); font-weight: 700; line-height: 1.2; letter-spacing: var(--ls-tracking-caps, .06em); text-transform: uppercase; color: #fff; } .lscart .lsups-slider__nav { display: flex; gap: 8px; flex: 0 0 auto; } .lscart .lsups-slider__btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 50%; background: transparent; color: #fff; cursor: pointer; transition: border-color .18s ease, background .18s ease, opacity .18s ease; } .lscart .lsups-slider__btn svg { width: 16px; height: 16px; } .lscart .lsups-slider__btn:hover:not(:disabled) { border-color: #fff; background: rgba(255, 255, 255, 0.08); } .lscart .lsups-slider__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .lscart .lsups-slider__btn:disabled { opacity: .3; cursor: default; } /* Hide the arrows when every card already fits (lsups.js sets the flag). */ .lscart .lsups-slider.is-static .lsups-slider__nav { display: none; } .lscart .lsups-grid[data-placement="drawer"] .lsups-grid__row { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; scrollbar-width: none; /* Bleed to the drawer's edges (its body has 20px side padding) so a card scrolls out under the edge rather than being cut at the gutter. */ margin: 0 -20px; padding: 0 20px 2px; } .lscart .lsups-grid[data-placement="drawer"] .lsups-grid__row::-webkit-scrollbar { display: none; } .lscart .lsups-grid[data-placement="drawer"] .lsups-card { /* A wide, short card — thumbnail beside the name and price, the Add button across the bottom — so a full row costs ~150px of drawer height, not the ~300px a stacked product card needs. */ flex: 0 0 248px; display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 12px; row-gap: 8px; align-items: start; min-height: 0; padding: 8px; scroll-snap-align: start; } .lscart .lsups-grid[data-placement="drawer"] .lsups-card__media { grid-column: 1; grid-row: 1; width: 64px; } .lscart .lsups-grid[data-placement="drawer"] .lsups-card__body { grid-column: 2; grid-row: 1; gap: 4px; } .lscart .lsups-grid[data-placement="drawer"] .lsups-card__action { grid-column: 1 / -1; grid-row: 2; align-self: end; } .lscart .lsups-grid[data-placement="drawer"] .lsups-card__title { font-family: var(--ls-font-body, Inter, Helvetica, Arial, sans-serif); font-size: var(--ls-small, 14px); font-weight: 600; line-height: 1.35; padding: 0; } .lscart .lsups-grid[data-placement="drawer"] .lsups-card__price { font-size: var(--ls-price-card, 16px); margin-top: 0; } .lscart .lsups-grid[data-placement="drawer"] .lsups-card__price del { font-size: var(--ls-small, 14px); } .lscart .lsups-grid[data-placement="drawer"] .lsups-card__brand, .lscart .lsups-grid[data-placement="drawer"] .lsups-card__rating, .lscart .lsups-grid[data-placement="drawer"] .lsups-card__variations, .lscart .lsups-grid[data-placement="drawer"] .lsups-card__fitment { display: none; } .lscart .lsups-grid[data-placement="drawer"] .lsups-card__options select { height: 40px; min-height: 40px; padding: 0 8px; font-size: var(--ls-body, 16px); /* 16px or iOS zooms the page on focus */ } .lscart .lsups-grid[data-placement="drawer"] .lsups-card__action { margin-top: 0; } /* The theme's button standard (components.css) forces 48px, 0 26px padding and the 16px button size with !important on every .lsups-btn; the drawer card takes the small button instead: 40px, 14px caps. */ .lscart .lsups-grid[data-placement="drawer"] .lsups-card .lsups-btn { width: 100% !important; height: 40px !important; min-height: 40px !important; padding: 0 10px !important; font-size: var(--ls-btn-font-sm, 14px) !important; line-height: 1 !important; } /* Outline, not solid red: the drawer's one red button is Checkout, and six solid red Adds in a row competed with it. Red on hover/press. */ .lscart .lsups-grid[data-placement="drawer"] .lsups-card .lsups-btn { background-color: transparent !important; border-color: rgba(255, 255, 255, 0.28) !important; color: #fff !important; } .lscart .lsups-grid[data-placement="drawer"] .lsups-card .lsups-btn:hover, .lscart .lsups-grid[data-placement="drawer"] .lsups-card .lsups-btn:active { background-color: var(--lsups-fill) !important; border-color: var(--lsups-fill) !important; } .lscart .lsups-grid[data-placement="drawer"] .lsups-card .lsups-btn.is-done { background-color: #1f3d1f !important; border-color: #2f5f2f !important; } @media (max-width: 980px) { /* The site's 44px tap floor on touch screens. */ .lscart .lsups-grid[data-placement="drawer"] .lsups-card .lsups-btn { height: 44px !important; min-height: 44px !important; } } .lscart .lsups-grid[data-placement="drawer"] .lsups-grid__msg:not(:empty) { margin-top: 8px; }