/* 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 ---------- Offers inside the LS Cart slide-out (400px). One card per row, the photo beside the text like the line items above it, the Add button on the right. Scoped on the placement so the same card template needs no drawer variant. */ .lscart .lsups-grid[data-placement="drawer"] { margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--lsups-border); } .lscart .lsups-grid[data-placement="drawer"] .lsups__heading { font-size: var(--ls-h4, 20px); margin-bottom: 12px; line-height: var(--ls-leading-h4, 1.25); } .lscart .lsups-grid[data-placement="drawer"] .lsups-grid__row { grid-template-columns: 1fr; gap: 10px; } .lscart .lsups-grid[data-placement="drawer"] .lsups-card { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 8px; align-items: center; padding: 10px; min-height: 0; } .lscart .lsups-grid[data-placement="drawer"] .lsups-card__media { grid-column: 1; grid-row: 1; } .lscart .lsups-grid[data-placement="drawer"] .lsups-card__body { grid-column: 2; grid-row: 1; gap: 3px; } .lscart .lsups-grid[data-placement="drawer"] .lsups-card__action { grid-column: 3; grid-row: 1; margin-top: 0; } .lscart .lsups-grid[data-placement="drawer"] .lsups-card__options { grid-column: 2 / -1; grid-row: 2; } .lscart .lsups-grid[data-placement="drawer"] .lsups-card__title { font-size: var(--ls-h4, 20px); line-height: var(--ls-leading-h4, 1.25); 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__brand, .lscart .lsups-grid[data-placement="drawer"] .lsups-card__rating, .lscart .lsups-grid[data-placement="drawer"] .lsups-card__variations { display: none; } .lscart .lsups-grid[data-placement="drawer"] .lsups-btn { width: auto; min-width: 64px; padding: 10px 14px; }