:root { --boss-blue: #1877f2; --boss-navy: #0d1859; --boss-text: #111827; --boss-muted: #64748b; --boss-line: #e5e7eb; interpolate-size: allow-keywords; } /* Public pages are assembled from several legacy templates. Keep every page pinned to the usable viewport while allowing intentional table/carousel scrollers to handle their own horizontal content. Chromium can still expose clipped descendant width on the root canvas, so use hidden on the document and keep horizontal scrolling on the component that owns it. */ html, body { width: 100%; max-width: 100%; overflow-x: hidden; } /* These rules used to be inserted by ps-client.js at the end of . That changed root scrollbar geometry after the document had already painted and could make Chrome on iOS visibly move the new page while its browser toolbar and visual viewport were settling. Declaring the same final geometry in the blocking head stylesheet keeps first paint and settled paint identical. */ html { scrollbar-gutter: stable; } /* Settle navigation and fragment positions immediately. Controls that need smooth movement can request it explicitly without animating every page. */ html.scroll-smooth { scroll-behavior: auto; } html.boss-scroll-locked { overflow-y: scroll; overscroll-behavior: none; } #mobile-menu-drawer { transition: transform .4s cubic-bezier(.32,.72,0,1) !important; will-change: transform; -webkit-transform: translate3d(100%,0,0) !important; transform: translate3d(100%,0,0) !important; } #mobile-menu-drawer.open { -webkit-transform: translate3d(0,0,0) !important; transform: translate3d(0,0,0) !important; } img, picture, video, canvas, svg { max-width: 100%; } /* Conversion controls use semantic selectors so their production colours do not depend on Tailwind discovering classes added later by JavaScript or the server-side HTML enhancement pass. */ .boss-home-advice { min-height: 44px; border: 1px solid #0f66d6 !important; color: #fff !important; background: #0f66d6 !important; text-decoration: none; } .boss-home-advice:hover { border-color: #0d56b5 !important; background: #0d56b5 !important; } /* Review markup is injected by the server after the Tailwind bundle is built. Semantic fallbacks keep every control polished even when a utility class was not present during the static CSS build. */ .boss-product-reviews [data-product-review-form] { display: grid; gap: 20px; } .boss-product-reviews [data-product-review-form] fieldset { min-width: 0; margin: 0; padding: 0; border: 0; } .boss-product-reviews [data-product-review-form] input:not([type="radio"]):not([type="hidden"]):not([name="website"]), .boss-product-reviews [data-product-review-form] textarea { width: 100%; min-height: 48px; padding: 11px 14px; border: 1px solid #cbd5e1; border-radius: 12px; color: #111827; background: #f8fafc; font: inherit; font-weight: 400; outline: none; transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease; } .boss-product-reviews [data-product-review-form] input[name="website"] { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; } .boss-product-reviews [data-product-review-form] textarea { min-height: 144px; resize: vertical; } .boss-product-reviews [data-product-review-form] input:focus, .boss-product-reviews [data-product-review-form] textarea:focus { border-color: #1877f2; background: #fff; box-shadow: 0 0 0 3px rgba(24,119,242,.13); } /* Consistent five-star system used in product headers, review summaries, individual reviews and the review form. Decimal averages fill a partial fifth star while whole-number ratings show exactly that many gold stars. */ .boss-rating-stars { --boss-rating: 0%; --boss-star-size: 16px; position: relative; display: inline-block; width: max-content; color: #d7dde5; font-size: var(--boss-star-size); font-weight: 700; letter-spacing: .08em; line-height: 1; white-space: nowrap; } .boss-rating-stars::before { content: '★★★★★'; } .boss-rating-stars::after { content: '★★★★★'; position: absolute; inset: 0 auto 0 0; width: var(--boss-rating); overflow: hidden; color: #f5b301; white-space: nowrap; } .boss-rating-stars--product-anchor { --boss-star-size: 17px; } .boss-rating-stars--summary { --boss-star-size: 20px; } .boss-rating-stars--review-card { --boss-star-size: 16px; } .boss-rating-stars--compact { --boss-star-size: 12px; } /* Overall ratings stay as gold stars; quality/value/appearance use a quieter five-segment meter to reduce visual clutter. */ .boss-rating-bar { display: grid; width: min(250px, 100%); height: 14px; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; } .boss-rating-bar__segment { --boss-segment-fill: 0%; position: relative; min-width: 0; overflow: hidden; border-radius: 2px; background: #e8edf3; } .boss-rating-bar__segment::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--boss-segment-fill); background: #f5a300; } .boss-rating-bar--compact { width: min(150px, 100%); height: 10px; } .boss-product-review-anchor { display: inline-flex; min-height: 42px; margin-top: 8px; align-items: center; gap: 9px; color: #475569; font-size: 14px; font-weight: 500; line-height: 1.35; text-decoration: none; } .boss-product-review-anchor:hover { color: #0f66d6; } .boss-product-review-anchor:focus-visible { outline: 2px solid #1877f2; outline-offset: 3px; border-radius: 6px; } .boss-review-primary-rating legend, .boss-review-detail-fieldset legend { margin-bottom: 8px; color: #334155; font-size: 13px; font-weight: 650; } .boss-review-primary-rating legend { font-size: 14px; } .boss-review-star-picker { display: inline-flex; align-items: center; gap: 3px; border-radius: 10px; } .boss-product-review-star { position: relative; display: inline-grid; width: 34px; height: 38px; place-items: center; border-radius: 8px; cursor: pointer; } .boss-product-review-star input { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none; } .boss-product-review-star span { color: #cbd5e1; font-size: 27px; font-weight: 700; line-height: 1; text-shadow: 0 1px 0 rgba(255,255,255,.65); transition: color .14s ease, transform .14s ease, filter .14s ease; } .boss-review-star-picker--primary .boss-product-review-star { width: 39px; height: 42px; } .boss-review-star-picker--primary .boss-product-review-star span { font-size: 31px; } .boss-product-review-star.is-active span { color: #f5b301; filter: drop-shadow(0 1px 1px rgba(183,126,0,.18)); } .boss-product-review-star:hover span { transform: translateY(-1px) scale(1.06); } .boss-product-review-star:has(input:focus-visible) { outline: 3px solid rgba(24,119,242,.24); outline-offset: 1px; } .boss-product-reviews [data-product-review-form] button[type="submit"] { min-height: 48px; padding: 12px 24px; border: 1px solid #0f66d6; border-radius: 12px; color: #fff; background: #0f66d6; font-size: 14px; font-weight: 700; cursor: pointer; transition: background-color .18s ease, border-color .18s ease, transform .18s ease; } .boss-product-reviews [data-product-review-form] button[type="submit"]:hover { border-color: #0d56b5; background: #0d56b5; transform: translateY(-1px); } .boss-product-reviews [data-product-review-form] button[type="submit"]:disabled { opacity: .62; cursor: wait; transform: none; } .boss-review-detail-inputs { display: grid; gap: 16px; border: 1px solid #dbe7f5; border-radius: 16px; padding: 18px; background: #f8fbff; } .boss-review-detail-inputs > h3, .boss-review-average > h3 { margin: 0; color: #111827; font-size: 15px; font-weight: 650; } .boss-review-detail-inputs { align-items: start; } .boss-review-detail-fieldset { min-width: 0; } .boss-review-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 11px 16px; border: 1px solid #e2e8f0; border-radius: 16px; padding: 16px 18px; background: #fff; } .boss-review-summary > strong { color: #111827; font-size: 28px; font-weight: 650; line-height: 1; } .boss-review-summary > span:last-child { color: #64748b; font-size: 13px; font-weight: 500; } .boss-review-average { border: 1px solid #e2e8f0; border-radius: 16px; padding: 18px 20px; background: #fff; } .boss-review-average__grid { display: grid; max-width: 560px; gap: 18px; margin-top: 16px; } .boss-review-average-row { display: grid; gap: 7px; } .boss-review-average-row__heading { color: #334155; font-size: 13px; font-weight: 600; } .boss-review-average-row__metric { display: flex; min-width: 0; align-items: center; gap: 12px; } .boss-review-average-row__value { min-width: 34px; color: #111827; font-size: 14px; font-weight: 600; line-height: 1; } .boss-review-average-row__value.is-empty { min-width: 88px; color: #64748b; font-size: 12px; font-weight: 500; } .boss-review-card { display: flex; height: 100%; min-width: 0; flex-direction: column; } .boss-review-card__body { min-width: 0; } .boss-review-card__lower { margin-top: auto; padding-top: 18px; } .boss-review-card__lower > .boss-review-detail-ratings:first-child, .boss-review-card__lower > .boss-review-media:first-child { margin-top: 0; } .boss-review-card__identity { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 14px; min-width: 0; margin-top: 16px; } .boss-review-card__person { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 5px 0; } .boss-review-card__badges { display: inline-flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; white-space: nowrap; } .boss-review-language-note { width: fit-content; margin: 10px 0 0; padding: 4px 8px; border: 1px solid #dbeafe; border-radius: 999px; background: #eff6ff; color: #1d4ed8; font-size: 11px; font-weight: 600; line-height: 1.35; } .boss-review-identity-grid { display: grid; gap: 18px; align-items: start; } .boss-review-field { display: grid; min-width: 0; grid-template-rows: auto 48px auto; gap: 7px; color: #334155; font-size: 14px; font-weight: 650; } .boss-review-field__label { min-height: 20px; display: flex; align-items: center; } .boss-review-field__hint { min-height: 34px; color: #64748b; font-size: 12px; font-weight: 400; line-height: 1.4; } .boss-review-detail-ratings { display: grid; gap: 10px; margin-top: 16px; color: #526174; font-size: 12px; line-height: 1.35; } .boss-review-detail-rating-item { display: grid; min-width: 0; gap: 5px; } .boss-review-detail-rating-item > strong { color: #475569; font-size: 11px; font-weight: 600; } .boss-review-detail-rating-line { display: flex; min-width: 0; align-items: center; gap: 8px; } .boss-review-detail-rating-value { min-width: 25px; color: #334155; font-size: 11px; font-weight: 600; } .boss-review-location::before { content: '•'; margin-right: 7px; color: #94a3b8; } .boss-review-media { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 15px; } .boss-review-media img, .boss-review-media video { width: 100%; aspect-ratio: 4 / 3; border: 1px solid #e2e8f0; border-radius: 12px; background: #f8fafc; object-fit: cover; } .boss-review-media-input input[type="file"] { width: 100%; min-width: 0; max-width: 100%; min-height: 52px; box-sizing: border-box; padding: 8px; background: #fff; cursor: pointer; } .boss-review-media-input input[type="file"]::file-selector-button { min-height: 36px; margin-right: 10px; border: 0; border-radius: 9px; padding: 8px 12px; color: #0f5fb8; background: #eaf3ff; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; } .boss-review-media-preview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .boss-review-media-preview:empty { display: none; } .boss-review-media-preview__item { position: relative; min-width: 0; overflow: hidden; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); } .boss-review-media-preview__item img, .boss-review-media-preview__item video { display: block; width: 100%; aspect-ratio: 4 / 3; background: #f8fafc; object-fit: cover; } .boss-review-media-preview__name { display: block; overflow: hidden; padding: 7px 9px; color: #64748b; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; } .boss-review-media-preview__remove { position: absolute; z-index: 2; top: 7px; right: 7px; display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border: 1px solid rgba(148, 163, 184, 0.55); border-radius: 999px; color: #334155; background: rgba(255, 255, 255, 0.94); box-shadow: 0 2px 7px rgba(15, 23, 42, 0.12); font-size: 19px; font-weight: 400; line-height: 1; cursor: pointer; backdrop-filter: blur(4px); } .boss-review-media-preview__remove:hover { border-color: #94a3b8; color: #0f172a; background: #fff; } .boss-review-media-preview__remove:focus-visible { outline: 2px solid #1877F2; outline-offset: 2px; } .boss-review-media-preview__error { grid-column: 1 / -1; margin: 0; border-radius: 10px; padding: 10px 12px; color: #991b1b; background: #fef2f2; font-size: 12px; } .boss-review-gallery { border: 1px solid #dbeafe; border-radius: 16px; padding: 14px; background: #f8fbff; } .boss-review-gallery__heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 11px; } .boss-review-gallery__heading h3 { margin: 0; color: #172033; font-size: 14px; font-weight: 650; } .boss-review-gallery__heading span { color: #64748b; font-size: 11px; font-weight: 500; } .boss-review-gallery__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; } .boss-review-gallery__item { display: block; min-width: 0; overflow: hidden; border: 1px solid #dbe3ee; border-radius: 10px; background: #fff; transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease; } .boss-review-gallery__item:hover { border-color: #93c5fd; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08); transform: translateY(-1px); } .boss-review-gallery__item:focus-visible { outline: 2px solid #1877F2; outline-offset: 2px; } .boss-review-gallery__item img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; } @media (min-width: 720px) { .boss-review-detail-inputs { grid-template-columns: repeat(3, minmax(0, 1fr)); } .boss-review-identity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .boss-review-detail-inputs > h3 { grid-column: 1 / -1; } } @media (min-width: 640px) { .boss-review-detail-ratings { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 720px) { .boss-review-gallery__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 520px) { .boss-review-media, .boss-review-media-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); } .boss-review-gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .boss-review-card__identity { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } .boss-review-card__badges { align-self: start; justify-self: end; } } @media (max-width: 360px) { .boss-review-card__identity { grid-template-columns: 1fr; } .boss-review-card__badges { justify-self: end; } } .boss-hero-advice { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; color: #d9eaff; font-size: 14px; font-weight: 600; text-decoration: none; } .boss-hero-advice:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; } .boss-whatsapp-button { min-height: 44px; border: 1px solid #a7e8bd !important; color: #08783e !important; background: #e9fbef !important; box-shadow: 0 8px 20px rgba(37,211,102,.12); text-decoration: none; } .boss-whatsapp-button i { color: #25d366 !important; } .boss-whatsapp-button:hover { border-color: #75d99a !important; color: #066834 !important; background: #dcf8e6 !important; } .boss-home-call { min-height: 44px; border: 1px solid #cbd5e1; color: #334155; background: #fff; text-decoration: none; } .boss-home-call:hover { border-color: #94a3b8; color: #0f3f73; background: #f8fafc; } .boss-i18n-fr { display: none; } html[lang^="fr"] .boss-i18n-en { display: none; } html[lang^="fr"] .boss-i18n-fr { display: inline; } /* One storefront Add-to-Cart control everywhere. Product templates, French product pages and regional comparison cards all use the same dimensions, typography and interaction treatment; page-specific CSS may only control surrounding layout/spacing. */ button[data-boss-add-to-cart] { display: inline-flex !important; width: 100% !important; min-width: 0 !important; min-height: 50px !important; align-items: center !important; justify-content: center !important; border: 1px solid #1877f2 !important; border-radius: 11px !important; margin-top: 20px !important; padding: 12px 18px !important; font-family: inherit !important; font-size: 15px !important; font-weight: 800 !important; line-height: 1.15 !important; letter-spacing: .01em !important; text-align: center !important; text-transform: uppercase; white-space: nowrap !important; box-shadow: 0 7px 18px rgba(24,119,242,.18) !important; cursor: pointer; transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease !important; } button[data-boss-add-to-cart]:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 9px 22px rgba(24,119,242,.23) !important; } button[data-boss-add-to-cart]:focus-visible { outline: 2px solid #1877f2 !important; outline-offset: 3px !important; } button[data-boss-add-to-cart]:not(:disabled), #boss-mobile-buy-button:not(:disabled), .boss-add-to-cart--available { border-color: #1877f2 !important; color: #fff !important; background: #1877f2 !important; } button[data-boss-add-to-cart]:not(:disabled):hover, #boss-mobile-buy-button:not(:disabled):hover, .boss-add-to-cart--available:hover { background: #0f66d6 !important; } button[data-boss-add-to-cart]:disabled, #boss-mobile-buy-button:disabled, .boss-add-to-cart--unavailable { border-color: #94a3b8 !important; color: #fff !important; background: #94a3b8 !important; } /* A single JS height animation enhances native details; answer grid rows remain static so a second transition cannot make the content flicker. */ #buying-faq details > summary, .home-faq-list details > summary, .faq-list details > summary, .faq-item > summary { touch-action: manipulation; transition: color .12s ease; } details.faq-item > .faq-answer { display: block; transition: none; } details.faq-item > summary::after { transition: color .12s ease; } .faq-list details > summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; list-style: none; } .faq-list details > summary::-webkit-details-marker { display: none; } .faq-list details > summary::marker { content: ""; } .faq-list details > summary::after { content: "+"; display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border: 1px solid #dce4ef; border-radius: 50%; color: #176bd1; background: #fff; font: 400 20px/1 sans-serif; } .faq-list details[open] > summary::after { content: "−"; } .faq-item[open] summary { color: var(--boss-blue); } .faq-item[open] summary::after { content: "−"; color: var(--boss-blue); transform: none; } /* One shared article sidebar for current and legacy buying guides. */ .boss-blog-sidebar { flex: 0 0 30%; width: 30%; min-width: 0; align-self: stretch; color: #111827; } .article-layout > .boss-blog-sidebar { width: auto; } .boss-blog-sidebar__eyebrow { margin: 0 0 10px; color: var(--boss-blue); font-size: 11px; font-weight: 800; letter-spacing: .16em; line-height: 1.4; text-transform: uppercase; } .boss-blog-sidebar h2 { margin: 0 0 8px; color: #111827; font-size: 24px; font-weight: 750; letter-spacing: -.02em; line-height: 1.2; } .boss-blog-recent-list { display: grid; } .boss-blog-recent { display: grid; gap: 6px; padding: 16px 0; border-top: 1px solid #e5e7eb; color: #111827; text-decoration: none; } .boss-blog-recent strong { font-size: 15px; font-weight: 720; line-height: 1.42; transition: color .2s ease; } .boss-blog-recent time { color: #64748b; font-size: 12px; } .boss-blog-recent:hover strong, .boss-blog-recent:focus-visible strong { color: var(--boss-blue); } .boss-blog-help { display: grid; gap: 9px; margin-top: 18px; border-radius: 14px; padding: 20px; background: #f4f8ff; } .article-layout > .boss-blog-help--wide { grid-column: 1 / -1; width: 100%; margin-top: 0; } .boss-blog-help h3 { margin: 0; color: #111827; font-size: 19px; font-weight: 750; } .boss-blog-help p:not(.boss-blog-sidebar__eyebrow) { margin: 0 0 2px; color: #526174; font-size: 13px; line-height: 1.55; } .boss-blog-help a { overflow-wrap: anywhere; color: #0d1859; font-size: 13px; font-weight: 700; text-decoration: none; } .boss-blog-help .boss-blog-compare { display: inline-flex; justify-content: center; margin-top: 5px; border-radius: 10px; padding: 11px 14px; background: var(--boss-blue); color: #fff; text-align: center; } .article-editorial-note { max-width: 820px; margin: 0 0 30px; border: 1px solid #d8e7fb; border-left: 4px solid var(--boss-blue); border-radius: 0 13px 13px 0; padding: 17px 20px; background: #f7faff; color: #526174; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 13px; line-height: 1.62; } .article-editorial-note strong { display: block; margin-bottom: 5px; color: #111827; font-size: 14px; } .article-editorial-note p { margin: 0 !important; } .article-editorial-note a, [data-article-byline] a { color: var(--boss-blue); font-weight: 700; } @media (max-width: 1023px) { .boss-blog-sidebar { flex-basis: auto; width: 100%; margin-top: 42px; } .article-layout > .boss-blog-sidebar { margin-top: 0; } } .boss-global-header, .boss-global-footer { box-sizing: border-box; color: var(--boss-text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .boss-global-header *, .boss-global-footer * { box-sizing: border-box; } /* Sticky-header images should remain in the normal paint layer. `will-change` on tiny header graphics can cause Chromium/Edge to discard and re-raster the layer while scrolling, which looks like the logo/photo briefly reloads. */ .boss-global-header img { will-change: auto !important; backface-visibility: visible; } .boss-global-header { position: sticky; top: 0; z-index: 100; width: 100%; border-bottom: 1px solid #edf0f4; background: #fff; box-shadow: 0 1px 8px rgba(15,23,42,.05); } /* Keep the product title/anchor bar physically attached to the global header. Its legacy 70px offset left a visible gap on phones and overlapped the desktop header. These values match the header height at each breakpoint. */ .boss-product-subnav { top: 76px !important; } .boss-global-header__inner { position: relative; width: min(1400px, calc(100% - 48px)); min-height: 76px; margin: 0 auto; display: grid; grid-template-columns: 170px minmax(470px,1fr) auto; align-items: center; gap: 30px; } @media (min-width: 1121px) { .boss-global-nav { position: absolute; left: 50%; transform: translateX(-50%); } } .boss-brand-crop { position: relative; display: block; flex: 0 0 122px; width: 122px; height: 46px; overflow: hidden; border-radius: 2px; } .boss-brand-crop img { position: absolute; top: -39px; left: -2px; width: 122px !important; max-width: none !important; height: 122px !important; object-fit: contain; transform: none !important; } .boss-global-nav { display: flex; align-items: stretch; justify-content: center; gap: 10px; min-height: 76px; justify-self: center; } .boss-nav-dropdown { position: relative; } .boss-nav-dropdown > summary, .boss-global-nav > a { min-height: 76px; padding: 0 15px; display: flex; align-items: center; gap: 7px; list-style: none; color: #4b5563; font-size: 14px; font-weight: 620; text-decoration: none; cursor: pointer; white-space: nowrap; } .boss-nav-dropdown > summary::-webkit-details-marker { display: none; } .boss-nav-dropdown > summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid #9ca3af; border-bottom: 1.5px solid #9ca3af; transform: rotate(45deg) translateY(-2px); transition: transform .2s ease; } .boss-nav-dropdown[open] > summary, .boss-nav-dropdown:focus-within > summary, .boss-global-nav > a:hover { color: var(--boss-blue); } .boss-nav-dropdown[open] > summary::after { transform: rotate(225deg) translate(-1px,-1px); } .boss-global-nav > a.boss-nav-demo { align-self: center; min-height: 40px; margin-left: 4px; padding: 0 14px; border: 1px solid #c9ddf7; border-radius: 999px; color: #0b5fb3; background: #f0f7ff; font-size: 13px; font-weight: 760; } .boss-global-nav > a.boss-nav-demo:hover, .boss-global-nav > a.boss-nav-demo:focus-visible { border-color: #9fc2ed; color: #084b8d; background: #e5f1ff; } .boss-nav-dropdown__menu { position: absolute; top: 70px; left: 0; width: 310px; padding: 8px; border: 1px solid var(--boss-line); border-top: 2px solid var(--boss-blue); border-radius: 0 0 14px 14px; background: #fff; box-shadow: 0 20px 46px rgba(15,23,42,.14); } .boss-nav-dropdown__menu a { display: block; padding: 11px 12px; border-radius: 9px; color: #374151; font-size: 13px; font-weight: 620; line-height: 1.35; text-decoration: none; } .boss-nav-dropdown__menu a:hover { color: var(--boss-blue); background: #f4f8ff; } .boss-nav-dropdown__menu--products a:not(.boss-nav-view-all) { display: flex; align-items: center; gap: 11px; min-height: 62px; } .boss-nav-dropdown__menu--products a img { flex: 0 0 46px; width: 46px !important; height: 46px !important; padding: 3px; border: 1px solid #edf0f4; border-radius: 9px; background: #fff; object-fit: contain; } .boss-nav-dropdown__menu--products a span { min-width: 0; } .boss-nav-dropdown__menu--products a strong { display: block; color: #374151; font-size: 13px; font-weight: 650; line-height: 1.35; } .boss-nav-dropdown__menu--products a small { display: block; margin-top: 2px; color: #778196; font-size: 10px; font-weight: 550; } .boss-nav-dropdown__menu--products .boss-nav-view-all { margin-top: 5px; border-top: 1px solid #edf0f4; border-radius: 0 0 9px 9px; color: var(--boss-blue); font-weight: 750; } .boss-header-actions { display: flex; align-items: center; gap: 9px; justify-self: end; } .boss-header-icon, .boss-language-link, .boss-mobile-menu > summary { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 9px; color: #202a3b; background: transparent; text-decoration: none; cursor: pointer; } .boss-header-icon:hover, .boss-language-link:hover, .boss-mobile-menu > summary:hover { color: var(--boss-blue); background: #f3f7fd; } .boss-header-icon svg { display: block; width: 20px; height: 20px; flex: 0 0 20px; } .boss-auth-hidden, [data-auth-logout][hidden] { display: none !important; } .boss-header-logout { color: #5f6b7c; } .boss-header-logout:hover { color: #b42318; background: #fff1f0; } .boss-language-link { min-width: auto; padding: 0 10px; font-size: 13px; font-weight: 720; white-space: nowrap; } .boss-header-icon .boss-market-flag { display: block; width: 24px; height: 12px; flex: 0 0 24px; } .boss-mobile-menu { display: none; position: relative; } .boss-mobile-menu > summary { list-style: none; } .boss-mobile-menu > summary::-webkit-details-marker { display: none; } .boss-mobile-menu__panel { position: absolute; top: 48px; right: 0; width: min(330px, calc(100vw - 28px)); max-height: calc(100vh - 92px); overflow: auto; padding: 10px; border: 1px solid var(--boss-line); border-radius: 14px; background: #fff; box-shadow: 0 22px 50px rgba(15,23,42,.2); } .boss-mobile-menu__panel a, .boss-mobile-menu__auth { display: block; width: 100%; padding: 12px; border: 0; border-radius: 9px; color: #283449; background: transparent; font-size: 14px; font-weight: 620; line-height: 1.4; text-align: left; text-decoration: none; cursor: pointer; } .boss-mobile-menu__panel a:hover, .boss-mobile-menu__auth:hover { color: var(--boss-blue); background: #f4f8ff; } .boss-mobile-menu__label { padding: 10px 12px 4px; color: #94a3b8; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .boss-mobile-menu__panel a.boss-mobile-menu__demo { margin-bottom: 5px; padding: 13px 14px; border: 1px solid #c9ddf7; color: #0b5fb3; background: #f0f7ff; } .boss-mobile-menu__demo strong, .boss-mobile-menu__demo small { display: block; } .boss-mobile-menu__demo strong { font-size: 14px; font-weight: 780; } .boss-mobile-menu__demo small { margin-top: 3px; color: #55708f; font-size: 11px; font-weight: 560; line-height: 1.4; } .boss-mobile-menu__panel a.boss-mobile-menu__demo:hover, .boss-mobile-menu__panel a.boss-mobile-menu__demo:focus-visible { border-color: #9fc2ed; color: #084b8d; background: #e5f1ff; } .boss-global-footer { position: relative; z-index: 1; isolation: isolate; width: 100%; margin-top: auto; padding: 68px clamp(40px, 6vw, 96px) 28px; border-top: 1px solid #edf0f4; color-scheme: light; background-color: #fff !important; background-image: none !important; opacity: 1; } .boss-global-footer__inner { width: min(1320px, 100%); margin: 0 auto; } .boss-global-footer__grid { display: grid; grid-template-columns: minmax(270px,1.6fr) repeat(3,minmax(150px,1fr)); gap: 44px; padding-bottom: 46px; } .boss-footer-brand { width: 158px; height: 58px; margin-bottom: 18px; } .boss-footer-brand img { width: 158px !important; height: 158px !important; top: -51px; } .boss-global-footer p { max-width: 430px; margin: 0 0 17px; color: var(--boss-muted); font-size: 14px; line-height: 1.7; } .boss-global-footer address { color: #4b5563; font-size: 13px; font-style: normal; line-height: 1.65; } .boss-global-footer address a { color: inherit; text-decoration: none; } .boss-global-footer address a:hover { color: var(--boss-blue); } .boss-global-footer .boss-footer-hours { margin: 7px 0 0; color: #4b5563; font-size: 13px; line-height: 1.65; } .boss-footer-demo { display: inline-block; margin: 12px 0 14px; color: var(--boss-blue) !important; font-size: 13px; font-weight: 750; text-decoration: none; } .boss-footer-demo:hover { text-decoration: underline; } .boss-global-footer h2 { margin: 5px 0 18px; color: #111827; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .boss-global-footer nav { display: grid; gap: 10px; } .boss-global-footer nav a, .boss-global-footer__contact a { color: #64748b; font-size: 13px; line-height: 1.5; text-decoration: none; } .boss-global-footer nav a:hover, .boss-global-footer__contact a:hover { color: var(--boss-blue); } .boss-global-footer__contact { display: grid; gap: 7px; margin-top: 2px; text-align: left; } .boss-footer-social { margin-top: 18px; } .boss-global-footer .boss-footer-social__label { display: block; margin-bottom: 9px; color: #475569; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .boss-global-footer .boss-footer-social__links { display: flex; flex-wrap: wrap; gap: 8px; } .boss-global-footer .boss-footer-social__links a { display: inline-flex; width: 38px; min-width: 38px; height: 38px; min-height: 38px; align-items: center; justify-content: center; padding: 0; border: 1px solid #dbe3ee; border-radius: 50%; background: #fff; line-height: 1; transition: border-color .18s ease, background-color .18s ease, transform .18s ease; } .boss-global-footer .boss-footer-social__links a:hover { border-color: currentColor; background: #f8fafc; transform: translateY(-1px); } .boss-global-footer .boss-footer-social__links a:focus-visible { outline: 3px solid rgba(24, 119, 242, .25); outline-offset: 2px; } .boss-footer-social__icon { width: 20px; height: 20px; fill: currentColor; } .boss-footer-social__link--facebook { color: #1877f2 !important; } .boss-footer-social__link--instagram { color: #e4405f !important; } .boss-footer-social__link--tiktok { color: #111827 !important; } .boss-footer-social__link--youtube { color: #ff0000 !important; } .boss-footer-social__link--whatsapp { color: #25d366 !important; } .boss-delivery-logos { display: flex !important; min-height: 34px !important; height: auto !important; align-items: center !important; flex-wrap: wrap !important; gap: 10px 18px !important; overflow: hidden !important; } .boss-delivery-logos img { width: auto !important; max-width: 86px !important; height: 24px !important; object-fit: contain !important; } .boss-delivery-logos img[alt="UPS"] { max-width: 32px !important; height: 26px !important; } .boss-delivery-logos img[alt="Canada Post"] { max-width: 92px !important; height: 26px !important; } .boss-delivery-logos .boss-fedex-wordmark { height: 26px !important; padding: 0 !important; font-size: 18px !important; line-height: 26px !important; } .boss-global-footer__bottom { padding-top: 25px; border-top: 1px solid #edf0f4; display: flex; align-items: center; justify-content: space-between; gap: 24px; color: #94a3b8; font-size: 12px; } .boss-global-footer__badges { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 18px; } .boss-global-footer__badges span { color: #64748b; white-space: nowrap; } .boss-cart-shell-backdrop { position: fixed; inset: 0; z-index: 998; display: none; opacity: 0; pointer-events: none; background: rgba(15, 23, 42, .52); transition: opacity .28s ease; } .boss-cart-shell-backdrop.show, #cart-backdrop.show { display: block; opacity: 1 !important; pointer-events: auto; } .boss-cart-shell-drawer { position: fixed; z-index: 999; top: 0; right: -440px; bottom: 0; width: min(440px, 100vw); max-width: 100vw; display: flex; flex-direction: column; overflow: hidden; color: #111827; background: #fff; box-shadow: -18px 0 54px rgba(15, 23, 42, .18); transform: none !important; -webkit-transform: none !important; will-change: auto !important; transition: right .30s cubic-bezier(.32,.72,0,1); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: 16px; line-height: 1.5; } .boss-cart-shell-drawer.open { right: 0; transform: none !important; -webkit-transform: none !important; will-change: auto !important; } .boss-cart-shell-header { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 86px; padding: 22px 24px; border-bottom: 1px solid #edf0f4; background: #fff; } .boss-cart-shell-header h2 { display: flex; align-items: center; gap: 12px; margin: 0; color: #111827; font-size: 24px; font-weight: 600; line-height: 1.15; letter-spacing: -.015em; } .boss-cart-count { display: inline-grid; place-items: center; width: 36px; min-width: 36px; height: 36px; padding: 0; border-radius: 999px; color: #fff; background: #1877f2; font-size: 15px; font-weight: 600; line-height: 1; } .boss-cart-close { display: grid; place-items: center; width: 42px; min-width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; color: #9ca3af; background: transparent; cursor: pointer; transition: color .18s ease, background-color .18s ease; } .boss-cart-close:hover { color: #111827; background: #f3f4f6; } .boss-cart-close:focus-visible, .boss-cart-shell-actions button:focus-visible, .boss-cart-qty button:focus-visible, .boss-cart-remove:focus-visible, .boss-cart-email:focus-visible { outline: 3px solid rgba(24,119,242,.24); outline-offset: 2px; } .boss-cart-close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; } .boss-cart-shell-items { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 24px; background: #fff; scrollbar-gutter: stable; } .boss-cart-item { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 14px; width: 100%; margin: 0 0 14px; padding: 16px; border: 1px solid #e7ebf0; border-radius: 18px; background: #fff; box-shadow: 0 2px 8px rgba(15,23,42,.05); } .boss-cart-item:last-child { margin-bottom: 0; } .boss-cart-item__media { display: grid; place-items: center; width: 78px; height: 78px; overflow: hidden; border-radius: 12px; background: #f8fafc; } .boss-cart-item__media img { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; padding: 7px; object-fit: contain; } .boss-cart-item__content { min-width: 0; } .boss-cart-item__name { margin: 0; overflow: hidden; color: #273244; font-size: 15px; font-weight: 620; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; } .boss-cart-item__price { margin-top: 5px; color: #176dcc; font-size: 15px; font-weight: 670; line-height: 1.25; } .boss-cart-bundle { margin: 8px 0 0; color: #64748b; font-size: 11px; font-weight: 520; line-height: 1.45; white-space: normal; } .boss-cart-item__controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; } .boss-cart-qty { display: inline-grid; grid-template-columns: 32px minmax(28px, auto) 32px; align-items: center; overflow: hidden; border: 1px solid #e1e5ea; border-radius: 10px; background: #f5f6f8; } .boss-cart-qty button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; color: #4b5563; background: transparent; font: inherit; font-size: 16px; font-weight: 800; cursor: pointer; } .boss-cart-qty button:hover { background: #e9edf2; } .boss-cart-qty span { min-width: 28px; color: #111827; font-size: 13px; font-weight: 800; text-align: center; } .boss-cart-remove { display: grid; place-items: center; width: 34px; min-width: 34px; height: 34px; padding: 0; border: 0; border-radius: 9px; color: #fb5d66; background: transparent; cursor: pointer; transition: color .18s ease, background-color .18s ease; } .boss-cart-remove:hover { color: #dc2626; background: #fff1f2; } .boss-cart-remove svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .boss-cart-shell-footer { flex: 0 0 auto; padding: 22px 24px 24px; border-top: 1px solid #edf0f4; background: #fff; } .boss-cart-email { box-sizing: border-box; width: 100%; min-height: 52px; margin: 0 0 18px; padding: 0 16px; border: 1px solid #cbd5e1; border-radius: 13px; color: #111827; background: #fff; font: inherit; font-size: 14px; line-height: 1.3; outline: none; } .boss-cart-email::placeholder { color: #9ca3af; opacity: 1; } .boss-cart-email:focus { border-color: #1877f2; } .boss-cart-email--readonly { color: #6b7280; background: #f3f4f6; cursor: not-allowed; } .boss-cart-shell-total { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0; line-height: 1.2; } .boss-cart-shell-total span { color: #667085; font-size: 14px; font-weight: 500; line-height: 1.2; } .boss-cart-shell-total strong, .boss-cart-shell-total #cart-total-amount { color: #1f2937; font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -.015em; white-space: nowrap; } .boss-cart-shipping-note { margin: 14px 0 20px; color: #7c8aa0; font-size: 12px; line-height: 1.5; } .boss-cart-shell-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 12px; } .boss-cart-shell-actions button { min-height: 50px; padding: 0 16px; border: 1px solid #cbd5e1; border-radius: 12px; color: #374151; background: #fff; font: inherit; font-size: 14px; font-weight: 800; line-height: 1.2; cursor: pointer; transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease; } .boss-cart-shell-actions button:hover { background: #f8fafc; } .boss-cart-shell-actions .boss-cart-checkout-button { border-color: #1877f2; color: #fff; background: #1877f2; box-shadow: 0 8px 18px rgba(24,119,242,.18); } .boss-cart-shell-actions .boss-cart-checkout-button:hover { background: #1469d8; box-shadow: 0 10px 22px rgba(24,119,242,.22); } .boss-cart-shell-actions .boss-cart-checkout-button:disabled { opacity: .62; cursor: wait; } @media (max-width: 767px) { .boss-cart-shell-drawer { width: 100vw; right: -100vw; } .boss-cart-shell-drawer.open { right: 0; } .boss-cart-shell-header { min-height: 98px; padding: 26px 36px; } .boss-cart-shell-header h2 { font-size: 29px; } .boss-cart-shell-items { padding: 34px 36px; } .boss-cart-item { grid-template-columns: 96px minmax(0,1fr); gap: 18px; padding: 18px; border-radius: 18px; } .boss-cart-item__media { width: 96px; height: 96px; } .boss-cart-item__name { font-size: 17px; } .boss-cart-item__price { font-size: 18px; } .boss-cart-bundle { font-size: 12px; } .boss-cart-shell-footer { padding: 28px 36px 34px; } .boss-cart-email { min-height: 64px; border-radius: 16px; font-size: 16px; } .boss-cart-shell-total span { font-size: 16px; } .boss-cart-shell-total strong, .boss-cart-shell-total #cart-total-amount { font-size: 30px; } .boss-cart-shipping-note { font-size: 14px; } .boss-cart-shell-actions button { min-height: 68px; border-radius: 16px; font-size: 17px; } } @media (max-width: 479px) { .boss-cart-shell-header { min-height: 78px; padding: 18px 18px; } .boss-cart-shell-header h2 { gap: 9px; font-size: 22px; } .boss-cart-count { width: 31px; min-width: 31px; height: 31px; font-size: 13px; } .boss-cart-close { width: 38px; min-width: 38px; height: 38px; } .boss-cart-shell-items { padding: 20px 18px; } .boss-cart-item { grid-template-columns: 74px minmax(0,1fr); gap: 12px; padding: 14px; border-radius: 16px; } .boss-cart-item__media { width: 74px; height: 74px; } .boss-cart-item__name { font-size: 14px; } .boss-cart-item__price { font-size: 15px; } .boss-cart-bundle { font-size: 10px; } .boss-cart-qty { grid-template-columns: 30px minmax(24px,auto) 30px; } .boss-cart-qty button { width: 30px; height: 30px; } .boss-cart-shell-footer { padding: 20px 18px 22px; } .boss-cart-email { min-height: 54px; margin-bottom: 16px; padding: 0 14px; border-radius: 13px; font-size: 14px; } .boss-cart-shell-total span { font-size: 14px; } .boss-cart-shell-total strong, .boss-cart-shell-total #cart-total-amount { font-size: 23px; } .boss-cart-shipping-note { margin: 12px 0 16px; font-size: 12px; } .boss-cart-shell-actions { gap: 10px; } .boss-cart-shell-actions button { min-height: 52px; border-radius: 13px; font-size: 14px; } } /* Premium empty-cart state shared by legacy product drawers and the global shell. */ #cart-drawer.boss-cart-is-empty #cart-items-container { display: flex; align-items: center; justify-content: center; padding: clamp(28px, 7vh, 72px) 24px; background: linear-gradient(180deg, #fff 0%, #fbfbfd 100%); } #cart-drawer.boss-cart-is-empty #cart-items-container + div { display: none !important; } #cart-drawer.boss-cart-is-empty #cart-badge-count { display: none !important; } .boss-cart-empty-state { width: min(100%, 348px); margin: auto; color: #1d1d1f; text-align: center; } .boss-cart-empty-icon { display: grid; place-items: center; width: 92px; height: 92px; margin: 0 auto 26px; border: 1px solid #e5e5e7; border-radius: 28px; color: #1d1d1f; background: linear-gradient(145deg, #fff, #f2f2f5); box-shadow: 0 18px 45px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.9); } .boss-cart-empty-icon svg { width: 54px; height: 54px; } .boss-cart-empty-eyebrow { margin: 0 0 9px; color: #6e6e73; font-size: 11px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; } .boss-cart-empty-state h3 { margin: 0; color: #1d1d1f; font-size: clamp(25px, 7vw, 32px); font-weight: 700; letter-spacing: -.035em; line-height: 1.08; } .boss-cart-empty-copy { max-width: 310px; margin: 15px auto 26px; color: #6e6e73; font-size: 15px; line-height: 1.55; } .boss-cart-empty-actions { display: grid; gap: 10px; } .boss-cart-empty-actions a { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 11px 18px; border-radius: 999px; font-size: 14px; font-weight: 700; text-decoration: none; transition: transform .18s ease, background-color .18s ease, border-color .18s ease; } .boss-cart-empty-actions a:hover { transform: translateY(-1px); } .boss-cart-empty-primary { border: 1px solid #0071e3; color: #fff !important; background: #0071e3; } .boss-cart-empty-primary:hover { background: #0077ed; } .boss-cart-empty-secondary { border: 1px solid #d2d2d7; color: #1d1d1f !important; background: #fff; } .boss-cart-empty-secondary:hover { border-color: #a1a1a6; background: #f5f5f7; } .boss-cart-empty-assurances { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px 13px; margin-top: 26px; color: #86868b; font-size: 11px; line-height: 1.35; } .boss-cart-empty-assurances span::before { content: '\2713'; margin-right: 5px; color: #248a3d; font-weight: 800; } /* Merchant Center direct-checkout landing page. */ .boss-direct-checkout { min-height: 72vh; padding: clamp(46px, 8vw, 92px) 20px; color: #1d1d1f; background: #f5f5f7; } .boss-direct-checkout__shell { width: min(100%, 980px); margin: 0 auto; } .boss-direct-checkout__eyebrow { margin: 0 0 10px; color: #6e6e73; font-size: 12px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; } .boss-direct-checkout h1 { max-width: 720px; margin: 0; font-size: clamp(36px, 7vw, 64px); font-weight: 720; letter-spacing: -.05em; line-height: 1.02; } .boss-direct-checkout__intro { max-width: 650px; margin: 18px 0 36px; color: #6e6e73; font-size: clamp(16px, 2vw, 19px); line-height: 1.55; } .boss-direct-checkout__card { display: grid; grid-template-columns: minmax(240px, .82fr) minmax(0, 1.18fr); overflow: hidden; border: 1px solid #e5e5e7; border-radius: 28px; background: #fff; box-shadow: 0 24px 70px rgba(0,0,0,.09); } .boss-direct-checkout__media { display: grid; place-items: center; min-height: 390px; padding: 38px; background: linear-gradient(145deg, #fff, #f2f2f5); } .boss-direct-checkout__media img { width: 100%; max-width: 340px; max-height: 300px; object-fit: contain; } .boss-direct-checkout__details { display: flex; flex-direction: column; justify-content: center; padding: clamp(30px, 6vw, 58px); } .boss-direct-checkout__status { width: fit-content; margin-bottom: 16px; padding: 6px 10px; border-radius: 999px; color: #248a3d; background: #edf8ef; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .boss-direct-checkout__status--out { color: #a12622; background: #fff0ef; } .boss-direct-checkout__details h2 { margin: 0; font-size: clamp(25px, 4vw, 38px); letter-spacing: -.035em; line-height: 1.12; } .boss-direct-checkout__sku { margin: 9px 0 25px; color: #86868b; font-size: 12px; } .boss-direct-checkout__price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 20px 0; border-top: 1px solid #e5e5e7; border-bottom: 1px solid #e5e5e7; } .boss-direct-checkout__price-row span:first-child { color: #6e6e73; font-size: 14px; } .boss-direct-checkout__price { color: #1d1d1f; font-size: 24px; font-weight: 750; } .boss-direct-checkout__button { width: 100%; min-height: 52px; margin-top: 24px; border: 0; border-radius: 999px; color: #fff; background: #0071e3; font-size: 15px; font-weight: 750; cursor: pointer; } .boss-direct-checkout__button:hover { background: #0077ed; } .boss-direct-checkout__button:disabled { color: #86868b; background: #e8e8ed; cursor: not-allowed; } .boss-direct-checkout__product-link { display: block; margin-top: 15px; color: #0066cc; font-size: 13px; text-align: center; text-decoration: none; } .boss-direct-checkout__assurances { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 22px; color: #6e6e73; font-size: 12px; line-height: 1.4; } .boss-direct-checkout__assurances span { padding-top: 14px; border-top: 1px solid #e5e5e7; } .boss-direct-checkout__assurances strong { display: block; margin-bottom: 3px; color: #1d1d1f; } .boss-direct-checkout-page .boss-header-actions > [data-action="toggle-cart"], .boss-direct-checkout-page #cart-backdrop, .boss-direct-checkout-page #cart-drawer { display: none !important; } @media (max-width: 720px) { .boss-direct-checkout__card { grid-template-columns: 1fr; border-radius: 22px; } .boss-direct-checkout__media { min-height: 250px; padding: 28px; } .boss-direct-checkout__media img { max-height: 210px; } .boss-direct-checkout__assurances { grid-template-columns: 1fr; } .boss-direct-checkout__assurances span { padding-top: 11px; } } .boss-site-notice { position: fixed; left: 0; right: 0; z-index: 10001; min-height: 46px; margin: 0; padding: 11px clamp(16px,4vw,34px); display: flex; align-items: center; justify-content: center; gap: 18px; color: #fff; background: #b42318; box-shadow: 0 8px 24px rgba(15,23,42,.18); font-size: 14px; font-weight: 650; line-height: 1.4; text-align: center; } .boss-site-notice--success { background: #067647; } .boss-site-notice button { flex: 0 0 auto; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; color: inherit; background: rgba(255,255,255,.16); font-size: 20px; line-height: 1; cursor: pointer; } /* Checkout processing state: the legacy templates use viewport-width utility classes that can spill horizontally on narrow phones. This shared override keeps the whole status group centered inside the usable/safe viewport. */ #screen-lock { box-sizing: border-box !important; inset: 0 !important; width: 100% !important; max-width: 100% !important; height: 100% !important; min-height: 100vh; min-height: 100svh; padding: max(24px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); align-items: center !important; justify-content: center !important; text-align: center !important; overflow: hidden !important; } /* A hidden checkout overlay should not keep a full-viewport blur layer alive while visitors scroll the storefront. Checkout removes opacity-0 before it displays this overlay. */ #screen-lock.hidden, #screen-lock.opacity-0 { display: none !important; } #screen-lock:not(.hidden):not(.opacity-0) { display: flex !important; } #screen-lock.opacity-0 { opacity: 0 !important; pointer-events: none !important; } #screen-lock.opacity-100 { opacity: 1 !important; pointer-events: auto !important; } #screen-lock > i { flex: 0 0 auto; margin: 0 0 clamp(16px, 4vh, 24px) !important; font-size: clamp(2.75rem, 13vw, 4rem) !important; line-height: 1 !important; } #screen-lock > h2 { width: 100%; max-width: 34rem; margin: 0 0 10px !important; font-size: clamp(1.2rem, 6.5vw, 1.875rem) !important; line-height: 1.18 !important; letter-spacing: clamp(.06em, 1vw, .16em) !important; text-align: center !important; overflow-wrap: anywhere; } #screen-lock > p { width: 100%; max-width: 32rem; margin: 0 !important; font-size: clamp(.875rem, 3.8vw, 1rem) !important; line-height: 1.5 !important; text-align: center !important; overflow-wrap: anywhere; } @media (max-width: 1120px) { .boss-global-header__inner { grid-template-columns: 135px minmax(430px,1fr) auto; gap: 18px; } .boss-global-nav { gap: 0; } .boss-nav-dropdown > summary, .boss-global-nav > a { padding-inline: 10px; } } @media (min-width: 901px) and (max-width: 1120px) { .boss-language-link { width: 40px; min-width: 40px; padding: 0; font-size: 0; } .boss-language-link::before { content: attr(data-short-label); font-size: 12px; } } @media (max-width: 900px) { .boss-global-header__inner { width: min(100% - 28px,1400px); min-height: 68px; display: flex; } .boss-product-subnav { top: 68px !important; } .boss-global-nav { display: none; } .boss-header-actions { margin-left: auto; } .boss-header-logout { display: none !important; } .boss-language-link { display: inline-flex; } .boss-mobile-menu { display: block; } .boss-global-footer { padding-inline: 28px; } .boss-global-footer__inner { width: 100%; } .boss-global-footer__grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 36px 28px; } } @media (max-width: 560px) { .boss-site-notice { min-height: 48px; padding: 10px 12px; justify-content: space-between; font-size: 13px; text-align: left; } .boss-global-header__inner { min-height: 64px; gap: 8px; } .boss-product-subnav { top: 64px !important; } .boss-brand-crop { flex-basis: 106px; width: 106px; height: 42px; } .boss-brand-crop img { width: 108px !important; height: 108px !important; top: -34px; } .boss-header-icon { min-width: 36px; min-height: 36px; } .boss-market-icon { display: none; } .boss-language-link { padding-inline: 7px; font-size: 12px; } .boss-global-footer { padding: 50px 22px 24px; } .boss-global-footer__grid { grid-template-columns: 1fr; } .boss-global-footer__bottom { align-items: flex-start; flex-direction: column; } .boss-global-footer__badges { justify-content: flex-start; } } @media (max-width: 375px) { /* Keep cart, account and menu fully inside the narrowest phone header. The same language destination remains available inside the menu. */ .boss-language-link { display: none; } } /* Buying-help prompt: a compact support card that may introduce itself once per browsing session. The callback form opens separately as a centered modal. */ .boss-buying-help, .boss-callback-overlay, .boss-buying-help *, .boss-callback-overlay * { box-sizing: border-box; } .boss-buying-help { position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 95; width: auto; max-width: calc(100vw - 36px); color: #111827; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; pointer-events: none; } .boss-buying-help > * { pointer-events: auto; } .boss-buying-help--with-buy-bar { bottom: calc(var(--boss-mobile-buy-bar-height, 84px) + 24px); } .boss-buying-help__pill { position: relative; isolation: isolate; display: flex; align-items: center; gap: 11px; min-height: 58px; margin-left: auto; border: 1px solid #9fc8f5; border-radius: 18px; padding: 9px 10px 9px 16px; color: #123f70; background: linear-gradient(135deg, #fff 0%, #eef7ff 100%); box-shadow: 0 12px 30px rgba(15,102,214,.18), 0 2px 8px rgba(15,23,42,.08); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; animation: boss-helper-arrive .36s cubic-bezier(.22,.75,.25,1) both; transition: transform .24s cubic-bezier(.22,.75,.25,1), border-color .2s ease, box-shadow .24s ease, background .2s ease; } .boss-buying-help__wave { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border: 1px solid #cfe3fb; border-radius: 11px; background: #fff; font-size: 18px; line-height: 1; transform-origin: 70% 70%; animation: boss-friendly-wave 1.25s ease .45s 1 both; } .boss-buying-help__pill:hover { border-color: #75b4f5; color: #123f70; background: linear-gradient(135deg, #fff 0%, #e4f2ff 100%); box-shadow: 0 16px 34px rgba(15,102,214,.22), 0 4px 10px rgba(15,23,42,.08); transform: translateY(-2px); } .boss-buying-help__pill:hover .boss-buying-help__wave { animation: boss-friendly-wave .8s ease 1; } .boss-buying-help__copy { display: grid; gap: 1px; text-align: left; } .boss-buying-help__label { color: #123f70; font-size: 13.5px; font-weight: 750; line-height: 1.2; } .boss-buying-help__meta { color: #5d7897; font-size: 10.5px; font-weight: 600; letter-spacing: .01em; line-height: 1.2; } .boss-buying-help__arrow { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 11px; color: #fff; background: #1877f2; font-size: 17px; transition: transform .24s cubic-bezier(.22,.75,.25,1), background .2s ease; } .boss-buying-help__pill:hover .boss-buying-help__arrow { background: #0f66d6; transform: translateX(2px); } .boss-buying-help__mobile-label { display: none; } .boss-buying-help__pill:focus-visible, .boss-buying-help button:focus-visible, .boss-buying-help a:focus-visible, .boss-callback-overlay button:focus-visible, .boss-callback-overlay a:focus-visible, .boss-callback-overlay input:focus-visible, .boss-callback-overlay select:focus-visible { outline: 2px solid #9ac3e9; outline-offset: 2px; } .boss-buying-help--expanded .boss-buying-help__pill { display: none; } .boss-buying-help__card { position: relative; width: min(340px, calc(100vw - 36px)); overflow: hidden; border: 1px solid #e1e8f0; border-radius: 15px; padding: 18px; background: #fff; box-shadow: 0 16px 42px rgba(15,23,42,.15); } .boss-buying-help__card[hidden], .boss-callback-overlay[hidden], .boss-callback-dialog [hidden] { display: none !important; } .boss-buying-help--dialog-open .boss-buying-help__card { visibility: hidden; } .boss-buying-help__close, .boss-callback-dialog__close { position: absolute; top: 5px; right: 5px; display: grid; width: 44px; height: 44px; place-items: center; border: 0; border-radius: 50%; padding: 0; color: #475569; background: transparent; font-size: 23px; line-height: 1; cursor: pointer; } .boss-buying-help__close:hover, .boss-callback-dialog__close:hover { color: #111827; background: #f1f5f9; } .boss-buying-help__eyebrow { margin: 0 40px 5px 0 !important; color: #64748b !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .01em; line-height: 1.4 !important; text-transform: none; } .boss-buying-help__card h2, .boss-callback-dialog h2 { margin: 0; color: #111827; font-size: 18px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; } .boss-buying-help__card > p:not(.boss-buying-help__eyebrow) { margin: 7px 0 14px; color: #526174; font-size: 13px; line-height: 1.5; } .boss-buying-help__actions { display: grid; gap: 8px; } .boss-buying-help__actions > a, .boss-buying-help__actions > button, .boss-callback-dialog__submit, .boss-callback-dialog__success a { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border: 1px solid #0f66d6; border-radius: 9px; padding: 9px 12px; color: #0f66d6; background: #fff; font: inherit; font-size: 13px; font-weight: 600; line-height: 1.25; text-align: center; text-decoration: none; cursor: pointer; } .boss-callback-dialog__submit, .boss-callback-dialog__success a { border-color: #1877f2; color: #fff; background: #1877f2; } .boss-buying-help__actions .boss-buying-help__action--callback { border-color: #1877f2; color: #fff; background: #1877f2; } .boss-buying-help__actions .boss-buying-help__action--callback:hover { border-color: #0f66d6; color: #fff; background: #0f66d6; } .boss-buying-help__actions .boss-buying-help__action--whatsapp { border-color: #a7e8bd; color: #08783e; background: #e9fbef; } .boss-buying-help__action--phone { flex-direction: column; gap: 1px; border-color: #cbd5e1 !important; color: #334155 !important; } .boss-buying-help__action--phone span { font-size: 12px; font-weight: 700; } .boss-buying-help__action--phone small { margin: 0; color: #64748b; font-size: 10px; font-weight: 600; } .boss-buying-help__actions > a:hover { background: #f1f7ff; } .boss-buying-help__actions .boss-buying-help__action--whatsapp:hover { border-color: #75d99a; color: #066834; background: #dcf8e6; } .boss-buying-help__actions .boss-buying-help__action--phone:hover { border-color: #94a3b8 !important; color: #0f3f73 !important; background: #f8fafc; } .boss-callback-dialog__submit:hover, .boss-callback-dialog__success a:hover { border-color: #0f66d6; background: #0f66d6; } .boss-buying-help__card > small { display: block; margin-top: 11px; color: #64748b; font-size: 11px; line-height: 1.4; text-align: center; } .boss-buying-help__card .boss-buying-help__hours { display: flex; align-items: center; justify-content: center; gap: 6px; } .boss-buying-help__availability { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #94a3b8; } .boss-buying-help__availability.is-open { background: #16a34a; } .boss-callback-overlay { position: fixed; inset: 0; z-index: 10020; display: grid; place-items: center; overflow-y: auto; padding: max(24px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); background: rgba(15,23,42,.52); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; animation: boss-overlay-in .2s ease both; } body.boss-callback-modal-open { overflow: hidden; } .boss-callback-dialog { position: relative; width: min(100%, 500px); max-height: calc(100svh - 48px); overflow-y: auto; border: 1px solid rgba(226,232,240,.95); border-radius: 24px; padding: 34px; color: #111827; background: #fff; box-shadow: 0 34px 95px rgba(15,23,42,.30); animation: boss-dialog-in .28s cubic-bezier(.22,.75,.25,1) both; } .boss-callback-dialog__status { display: inline-flex; min-height: 28px; align-items: center; gap: 8px; margin: 0 44px 12px 0; border-radius: 999px; padding: 5px 10px; color: #526174; background: #f8fafc; font-size: 11.5px; font-weight: 700; line-height: 1.2; } .boss-callback-dialog__status > span { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #94a3b8; } .boss-callback-dialog__status.is-open { color: #116534; background: #eefbf3; } .boss-callback-dialog__status.is-open > span { background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.12); } .boss-callback-dialog h2 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.035em; line-height: 1.12; } .boss-callback-dialog__intro { margin: 10px 28px 20px 0; color: #526174; font-size: 14.5px; line-height: 1.55; } .boss-callback-dialog__product { margin: 0 0 17px; border-radius: 10px; padding: 10px 12px; color: #334155; background: #f1f7ff; font-size: 12px; line-height: 1.45; } .boss-callback-dialog form { display: grid; gap: 15px; } .boss-callback-dialog label:not(.boss-callback-honeypot) { display: grid; gap: 6px; color: #334155; font-size: 13px; font-weight: 500; } .boss-callback-dialog input, .boss-callback-dialog select { width: 100%; min-height: 50px; border: 1px solid #cbd5e1; border-radius: 12px; padding: 11px 13px; color: #111827; background: #fff; font: inherit; font-size: 16px; font-weight: 400; } .boss-callback-dialog input:hover, .boss-callback-dialog select:hover { border-color: #94a3b8; } .boss-callback-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; } .boss-callback-dialog__privacy { margin: 0; color: #64748b; font-size: 11px; line-height: 1.55; } .boss-callback-dialog__privacy a { color: #0d63d4; font-weight: 700; } .boss-callback-dialog__error { margin: 0; border-radius: 9px; padding: 10px 12px; color: #991b1b; background: #fef2f2; font-size: 12px; line-height: 1.45; } .boss-callback-dialog__submit { width: 100%; min-height: 52px; border: 0; border-radius: 12px; font-size: 15px; font-weight: 700; } .boss-callback-dialog__submit:disabled { opacity: .65; cursor: wait; } .boss-callback-dialog__success { padding: 16px 4px 5px; text-align: center; } .boss-callback-dialog__success > span { display: grid; width: 54px; height: 54px; margin: 0 auto 16px; place-items: center; border-radius: 50%; color: #fff; background: #15803d; font-size: 27px; font-weight: 800; } .boss-callback-dialog__success p { margin: 10px auto 20px; color: #526174; font-size: 14px; line-height: 1.55; } .boss-callback-dialog__success a { width: 100%; text-decoration: none; } .boss-callback-dialog__done { width: 100%; min-height: 48px; border: 0; border-radius: 10px; padding: 10px 14px; color: #fff; background: #0f66d6; font: inherit; font-size: 14px; font-weight: 650; cursor: pointer; } .boss-callback-dialog__done:hover { background: #0d56b5; } /* Callback modal polish: light, calm, and action-first. Avoid the heavy dark treatment and keep business-hours detail out of the main visual hierarchy. */ .boss-callback-overlay { background: rgba(42, 73, 104, .28); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); } .boss-callback-dialog { width: min(100%, 468px); border-color: #dce8f2; border-radius: 22px; padding: 32px; color: #28445f; background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%); box-shadow: 0 28px 74px rgba(46, 78, 107, .20), 0 8px 22px rgba(46, 78, 107, .08); } .boss-callback-dialog__close { top: 9px; right: 9px; color: #7890a5; } .boss-callback-dialog__close:hover { color: #36566f; background: #f2f7fb; } .boss-callback-dialog__status { min-height: 27px; margin: 0 44px 13px 0; border: 1px solid #dbe8f2; padding: 5px 10px; color: #587189; background: #f6fafe; font-size: 11px; font-weight: 700; letter-spacing: .01em; } .boss-callback-dialog__status.is-open { border-color: #c8ead5; color: #19713f; background: #f0faf4; } .boss-callback-dialog__status.is-closed { border-color: #d9e6f1; color: #5a7187; background: #f7fafc; } .boss-callback-dialog h2 { color: #1d3f5d; font-size: 27px; font-weight: 700; letter-spacing: -.035em; } .boss-callback-dialog__intro { margin: 9px 24px 21px 0; color: #667d92; font-size: 14.5px; line-height: 1.5; } .boss-callback-dialog form { gap: 14px; } .boss-callback-dialog label:not(.boss-callback-honeypot) { color: #405d76; font-size: 12.5px; font-weight: 650; } .boss-callback-dialog input, .boss-callback-dialog select { min-height: 51px; border-color: #cad9e6; color: #294760; background: #fff; box-shadow: 0 1px 0 rgba(55, 91, 123, .02); } .boss-callback-dialog input::placeholder { color: #9cafbf; } .boss-callback-dialog input:hover, .boss-callback-dialog select:hover { border-color: #a9bfd2; } .boss-callback-dialog input:focus, .boss-callback-dialog select:focus { border-color: #7caee0; outline: none; box-shadow: 0 0 0 3px rgba(77, 145, 211, .12); } .boss-callback-dialog__privacy { color: #7a8fa2; font-size: 10.5px; line-height: 1.5; } .boss-callback-dialog__privacy a { color: #3978b8; } .boss-callback-dialog__submit { min-height: 53px; border-radius: 13px; background: #1877f2; box-shadow: 0 8px 20px rgba(24, 119, 242, .18); font-size: 15px; font-weight: 750; } .boss-callback-dialog__submit:hover { background: #0f66d6; } .boss-callback-dialog__success h2 { color: #1d3f5d; } .boss-callback-dialog__success p { color: #667d92; } /* Legacy compact-form selectors remain for older cached markup, but the live callback form is rendered in .boss-callback-dialog above. */ .boss-buying-help__card [hidden] { display: none !important; } .boss-buying-help__secondary-actions { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 2px 0 1px; color: #94a3b8; font-size: 12px; } .boss-buying-help__secondary-actions a { color: #526174; font-weight: 550; text-decoration: none; } .boss-buying-help__secondary-actions a:hover { color: #0f66d6; text-decoration: underline; text-underline-offset: 3px; } .boss-buying-help__form-view { position: relative; } .boss-buying-help__back { margin: -2px 42px 10px 0; border: 0; padding: 0; color: #64748b; background: transparent; font: inherit; font-size: 12px; font-weight: 550; cursor: pointer; } .boss-buying-help__back:hover { color: #0f66d6; } .boss-buying-help__form-intro { margin: 7px 0 13px !important; color: #526174 !important; font-size: 12.5px !important; line-height: 1.5 !important; } .boss-buying-help__form-view form { display: grid; gap: 11px; } .boss-buying-help__form-view label:not(.boss-callback-honeypot) { display: grid; gap: 5px; color: #334155; font-size: 12.5px; font-weight: 550; } .boss-buying-help__form-view input { width: 100%; min-height: 44px; border: 1px solid #cbd5e1; border-radius: 9px; padding: 9px 11px; color: #111827; background: #fff; font: inherit; font-size: 16px; font-weight: 400; } .boss-buying-help__form-view input:hover { border-color: #94a3b8; } .boss-buying-help__form-view .boss-callback-dialog__submit { display: inline-flex; width: 100%; min-height: 46px; align-items: center; justify-content: center; border: 0; border-radius: 9px; padding: 10px 12px; color: #fff; background: #1877f2; font: inherit; font-size: 13.5px; font-weight: 620; cursor: pointer; } .boss-buying-help__form-view .boss-callback-dialog__submit:hover { background: #0f66d6; } .boss-buying-help__success { padding: 16px 2px 4px; text-align: center; } .boss-buying-help__success-mark { display: grid; width: 46px; height: 46px; margin: 0 auto 13px; place-items: center; border-radius: 50%; color: #fff; background: #15803d; font-size: 22px; font-weight: 700; } .boss-buying-help__success p { margin: 8px auto 16px; color: #526174; font-size: 12.5px; line-height: 1.55; } .boss-buying-help__success button { min-height: 42px; width: 100%; border: 1px solid #cbd5e1; border-radius: 9px; color: #334155; background: #fff; font: inherit; font-size: 12.5px; font-weight: 580; cursor: pointer; } .boss-buying-help__success button:hover { border-color: #94a3b8; background: #f8fafc; } @media (max-width: 767px) { .boss-buying-help { right: 12px; bottom: max(14px, env(safe-area-inset-bottom)); width: auto; max-width: calc(100vw - 24px); } .boss-buying-help__pill { justify-content: center; width: auto; min-width: 110px; min-height: 46px; border-radius: 15px; padding: 6px 7px 6px 12px; box-shadow: 0 9px 24px rgba(15,102,214,.18); } .boss-buying-help__copy { display: none; } .boss-buying-help__mobile-label { display: inline; } .boss-buying-help__wave { width: 30px; height: 30px; flex-basis: 30px; border-radius: 9px; font-size: 16px; } .boss-buying-help__arrow { display: none; } .boss-buying-help__card { width: min(338px, calc(100vw - 24px)); max-height: min(62svh, 500px); overflow-y: auto; padding: 18px; } .boss-callback-overlay { place-items: center; padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom)); } .boss-callback-dialog { width: min(100%, 500px); max-height: calc(100svh - 28px); border-radius: 20px; padding: 26px 20px; } .boss-callback-dialog h2 { font-size: 23px; } .boss-callback-dialog__intro { margin-right: 8px; } } @media (max-width: 1023.98px) { .boss-buying-help--with-buy-bar { bottom: calc(var(--boss-mobile-buy-bar-height, 84px) + 14px); } } #boss-mobile-buy-bar { display: block; box-sizing: border-box; position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; margin: 0 !important; border-radius: 0 !important; padding: 10px max(16px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)) !important; background: #fff !important; background-image: none !important; opacity: 1 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; transform: none !important; -webkit-transform: none !important; will-change: auto !important; box-shadow: 0 -8px 24px rgba(15,23,42,.10); } body.boss-mobile-buy-bar-active { padding-bottom: calc(var(--boss-mobile-buy-bar-height, 82px) + 10px) !important; } .boss-sticky-buy-inner { display: flex; width: min(1180px, 100%); min-width: 0; margin: 0 auto; align-items: center; gap: 18px; } .boss-mobile-buy-summary { display: flex; min-width: 0; flex: 1 1 auto; align-items: center; gap: 11px; } .boss-sticky-buy-thumb { display: grid; width: 54px; height: 54px; flex: 0 0 54px; place-items: center; overflow: hidden; border: 1px solid #e2e8f0; border-radius: 11px; background: #f8fafc; } .boss-sticky-buy-thumb img { width: 100%; height: 100%; padding: 4px; object-fit: contain; } .boss-sticky-buy-copy { display: grid; min-width: 0; gap: 3px; } .boss-mobile-buy-product { display: block; min-width: 0; overflow: hidden; color: #1f2937; font-size: 13px; font-weight: 600; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } .boss-sticky-buy-offer { display: block; min-width: 0; overflow: hidden; color: #1264c7; font-size: 10.5px; font-weight: 600; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; } .boss-sticky-buy-rating { display: flex; min-width: 0; align-items: center; gap: 6px; color: #64748b; font-size: 11px; font-weight: 500; line-height: 1.2; white-space: nowrap; } .boss-sticky-buy-price-group { display: grid; flex: 0 0 auto; justify-items: end; gap: 1px; } #boss-mobile-buy-original-price { color: #94a3b8; font-size: 11px; font-weight: 400; line-height: 1.1; } #boss-mobile-buy-price { color: #111827; font-size: 17px; font-weight: 700; line-height: 1.15; letter-spacing: -.012em; } .boss-mobile-buy-actions { display: grid; min-width: 330px; flex: 0 0 auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } #boss-mobile-buy-bar #boss-mobile-buy-button, #boss-mobile-buy-bar #boss-mobile-buy-now-button { width: 100%; min-width: 0; min-height: 46px; border-radius: 11px; padding: 10px 14px; font: inherit; font-size: 13px; font-weight: 700; line-height: 1.15; white-space: nowrap; cursor: pointer; transition: background-color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease; } #boss-mobile-buy-bar #boss-mobile-buy-button { border: 1px solid #1877f2; color: #fff; background: #1877f2; box-shadow: 0 5px 14px rgba(24,119,242,.18); } #boss-mobile-buy-bar #boss-mobile-buy-button:hover { background: #0f66d6; border-color: #0f66d6; } #boss-mobile-buy-bar #boss-mobile-buy-now-button { border: 1px solid #1877f2 !important; color: #1264c7 !important; background: #fff !important; box-shadow: 0 3px 10px rgba(24,119,242,.08); } #boss-mobile-buy-bar #boss-mobile-buy-now-button:hover { border-color: #0f66d6 !important; color: #0f5fb8 !important; background: #f2f7ff !important; } #boss-mobile-buy-bar #boss-mobile-buy-button:active, #boss-mobile-buy-bar #boss-mobile-buy-now-button:active { transform: translateY(1px); } #boss-mobile-buy-bar #boss-mobile-buy-button:focus-visible, #boss-mobile-buy-bar #boss-mobile-buy-now-button:focus-visible { outline: 2px solid #1877f2; outline-offset: 2px; } #boss-mobile-buy-bar button:disabled { cursor: not-allowed; box-shadow: none; transform: none; opacity: .62; } #boss-mobile-buy-bar.is-out-of-stock .boss-mobile-buy-actions { grid-template-columns: 1fr; } #boss-mobile-buy-bar.is-out-of-stock #boss-mobile-buy-now-button { display: none; } @media (max-width: 767px) { #boss-mobile-buy-bar { padding-top: 9px !important; } .boss-sticky-buy-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; } .boss-mobile-buy-summary { grid-column: 1; } .boss-sticky-buy-thumb { display: none; } .boss-mobile-buy-product { font-size: 12px; font-weight: 600; } .boss-sticky-buy-offer { font-size: 9.5px; } .boss-sticky-buy-rating { gap: 5px; font-size: 10px; } .boss-rating-stars--compact { --boss-star-size: 10px; } .boss-sticky-buy-price-group { grid-column: 2; grid-row: 1; } #boss-mobile-buy-price { font-size: 15px; } #boss-mobile-buy-original-price { font-size: 10px; } .boss-mobile-buy-actions { grid-column: 1 / -1; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); } #boss-mobile-buy-bar #boss-mobile-buy-button, #boss-mobile-buy-bar #boss-mobile-buy-now-button { min-height: 44px; padding-inline: 8px; font-size: 12.5px; } } @media (max-width: 320px) { #boss-mobile-buy-bar { padding-inline: max(10px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-right)) !important; } .boss-sticky-buy-inner { gap: 7px 8px; } .boss-mobile-buy-product { font-size: 11px; } .boss-sticky-buy-offer { font-size: 8.8px; } .boss-sticky-buy-rating { font-size: 9px; } #boss-mobile-buy-price { font-size: 14px; } #boss-mobile-buy-bar #boss-mobile-buy-button, #boss-mobile-buy-bar #boss-mobile-buy-now-button { font-size: 11.5px; letter-spacing: -.01em; } } @media (min-width: 768px) and (max-width: 1023.98px) { .boss-sticky-buy-inner { gap: 12px; } .boss-sticky-buy-thumb { width: 48px; height: 48px; flex-basis: 48px; } .boss-mobile-buy-actions { min-width: 290px; } } @media (prefers-reduced-motion: reduce) { .boss-buying-help__pill, .boss-buying-help__wave, .boss-callback-overlay, .boss-callback-dialog { animation: none !important; } .boss-buying-help__pill:hover { transform: none; } } @keyframes boss-helper-arrive { from { opacity: 0; transform: translate3d(0,10px,0) scale(.97); } to { opacity: 1; transform: translate3d(0,0,0) scale(1); } } @keyframes boss-friendly-wave { 0%, 100% { transform: rotate(0deg); } 20% { transform: rotate(13deg); } 40% { transform: rotate(-8deg); } 60% { transform: rotate(11deg); } 80% { transform: rotate(-4deg); } } @keyframes boss-overlay-in { from { opacity: 0; } to { opacity: 1; } } @keyframes boss-dialog-in { from { opacity: 0; transform: translate3d(0,14px,0) scale(.985); } to { opacity: 1; transform: translate3d(0,0,0) scale(1); } } @media (max-width: 320px) { button[data-boss-add-to-cart] { padding-inline: 10px !important; font-size: 13px !important; letter-spacing: 0 !important; white-space: nowrap !important; } } @media (max-width: 255px) { button[data-boss-add-to-cart] { padding-inline: 8px !important; font-size: 12px !important; } } /* Desktop callback modal: keep the card itself scrollbar-free. */ @media (min-width: 1024px) { .boss-callback-dialog { max-height: none; overflow-y: visible; } }