/** Shopify CDN: Minification failed Line 1055:0 Unexpected "}" **/ /* ========================================================================== sim-hb-pdp.css — Home B skin for PRODUCT pages (Claude Design "PDP B"), 2026-09-26. Loaded by layout/theme.liquid only on product pages and only while the theme setting hb_site_style is on; EVERY rule is scoped under body.hb-site, so switching the setting off restores today's page. Re-skin, not rebuild: the live sections/snippets (sim-pdp-*, main-product, Dawn gallery) keep their markup and logic; the few gated Liquid additions are listed in each section's comments. Layout (owner rule: FULL WIDTH, max 1920 + 32px gutters): the design grid is minmax(0,1.45fr) minmax(0,1fr) 300px, gap 40 (>=1080) on a 1200px page. On our wider page the buy box grows gently (300px at <=1440, clamp to 380px at 1920) and the gallery keeps the 1.45:1 ratio but stops at 760px so the photo never gets taller than the screen; the middle column takes the rest. Below 1080px: one column. Tokens: cream #FBF6EE, sand #F1E5D3, clay #E9D6BE, line #E6D9C6, line-2 #D9CBB6, ink #1B221F, navy #0F1E3C, soft #5C5249, muted #7A6E62 (#685C51 for small text on sand/clay), terracotta #C4522B, terra-deep #A4522F (buttons), hover #C4522B, green #1B6B3A, red tag #D9302A. ========================================================================== */ /* ---------- 0. Page frame --------------------------------------------------- */ body.hb-site main .page-width { padding-inline: 32px; } @media screen and (max-width: 749px) { body.hb-site main .page-width { padding-inline: 16px; } } body.hb-site product-info[id^="MainProduct-"] { background: #FBF6EE; } body.hb-site .sim-pdpd, body.hb-site .sim-pdpp, body.hb-site .sim-pdpt, body.hb-site .sim-pdpr { border-top: 0; color: #1B221F; } /* Section headings: Bricolage 800 -.025em (design 26-30px) */ body.hb-site :is(.sim-pdpd__h, .sim-pdpp__h, .sim-pdpr__h, .hb-pdpt-h, .related-products__heading) { font-family: 'Bricolage Grotesque', 'Albert Sans', system-ui, sans-serif; font-weight: 800; letter-spacing: -.025em; color: #1B221F; font-size: 26px; line-height: 1.15; } @media screen and (max-width: 749px) { body.hb-site :is(.sim-pdpd__h, .sim-pdpp__h, .sim-pdpr__h, .hb-pdpt-h, .related-products__heading) { font-size: 23px; } } /* ---------- 1. Breadcrumbs ---------------------------------------------------- */ body.hb-site .sim-pdp-crumbs { margin: 0 0 18px; font-size: 13px; color: #7A6E62; } body.hb-site .sim-pdp-crumbs li + li::before { margin: 0 8px; color: #7A6E62; } body.hb-site .sim-pdp-crumbs a { color: #7A6E62; } body.hb-site .sim-pdp-crumbs a:hover { color: #C4522B; } body.hb-site .sim-pdp-crumbs [aria-current] { color: #1B221F; } @media screen and (max-width: 749px) { body.hb-site .sim-pdp-crumbs { font-size: 13px; margin-bottom: 10px; } } /* ---------- 2. Three-column buy area (>=1080px) ------------------------------ */ @media screen and (min-width: 1080px) { body.hb-site .product.product:has(.sim-pdp-split):not(.product--no-media) { --hb-bw: clamp(300px, 20.8vw, 380px); display: grid; grid-template-columns: min(calc((100% - 80px - var(--hb-bw)) * .5918), 760px) minmax(0, 1fr) var(--hb-bw); column-gap: 40px; row-gap: 0; align-items: start; } body.hb-site .product:has(.sim-pdp-split) > .product__info-wrapper, body.hb-site .product:has(.sim-pdp-split) .product__info-container, body.hb-site .product:has(.sim-pdp-split) .sim-pdp-split { display: contents; } body.hb-site .product:has(.sim-pdp-split) .product__info-container > * { grid-column: 1 / -1; grid-row: 1; order: -1; } body.hb-site .product.product:has(.sim-pdp-split) > .product__media-wrapper { grid-column: 1; grid-row: 2; width: auto; max-width: none; padding: 0; margin: 0; align-self: stretch; } body.hb-site .product:has(.sim-pdp-split) .sim-pdp-split__a { grid-column: 2; grid-row: 2; min-width: 0; } body.hb-site .product:has(.sim-pdp-split) .sim-pdp-split__b { grid-column: 3; grid-row: 2; min-width: 0; margin: 0; position: sticky; top: 96px; align-self: start; display: flex; flex-direction: column; gap: 14px; } body.hb-site.sim-pdpn-on .product:has(.sim-pdp-split) .sim-pdp-split__b { top: calc(var(--sim-pdpn-h, 57px) + 16px); } body.hb-site .product:has(.sim-pdp-split) .sim-pdp-split__b > .sim-simi { margin-top: 0; } body.hb-site .product:has(.sim-pdp-split) .product__info-container > a.link { display: none; } /* gallery column sticks too (design: both side columns sticky, top 96) */ body.hb-site .product:has(.sim-pdp-split) > .product__media-wrapper media-gallery { position: sticky; top: 96px; } body.hb-site.sim-pdpn-on .product:has(.sim-pdp-split) > .product__media-wrapper media-gallery { top: calc(var(--sim-pdpn-h, 57px) + 16px); } } /* ---------- 2b. One column (750-1079px): same order as phones --------------- (title, gallery, options, buy box, Highlights, Ask Simi — the owner's phone order from 2026-09-24; the split-open snippet already does this <=749px). */ @media screen and (min-width: 750px) and (max-width: 1079px) { body.hb-site .product.product:has(.sim-pdp-split) { display: flex; flex-direction: column; flex-wrap: nowrap; } body.hb-site .product:has(.sim-pdp-split) > .product__info-wrapper, body.hb-site .product:has(.sim-pdp-split) .product__info-container, body.hb-site .product:has(.sim-pdp-split) .sim-pdp-split, body.hb-site .product:has(.sim-pdp-split) .sim-pdp-split__a, body.hb-site .product:has(.sim-pdp-split) .sim-pdp-split__b { display: contents; } body.hb-site .product.product:has(.sim-pdp-split) > .product__media-wrapper { order: 0; width: 100%; max-width: 640px; padding: 0; margin: 14px 0 0; } body.hb-site .product:has(.sim-pdp-split) .product__info-container > * { order: 3; width: 100%; } body.hb-site .product:has(.sim-pdp-split) .product__info-container > .sim-pdp-crumbs { order: -2; } body.hb-site product-info[id^="MainProduct-"] .product:has(.sim-pdp-split) .sim-pdp-split__a > * { order: 1; width: 100%; } body.hb-site product-info[id^="MainProduct-"] .product:has(.sim-pdp-split) .sim-pdp-split__a > :is(.sim-pdp-eyebrow, .product__title, .sim-pdp-subtitle, .shopify-block, .sim-pdp-rule) { order: -1; } body.hb-site product-info[id^="MainProduct-"] .product:has(.sim-pdp-split) .sim-pdp-split__a > variant-selects { margin-top: 20px; } body.hb-site .product:has(.sim-pdp-split) .sim-pdp-split__b > .sim-pdp-card { order: 2; width: 100%; max-width: 640px; margin-top: 14px; } body.hb-site product-info[id^="MainProduct-"] .product:has(.sim-pdp-split) .sim-pdp-split__a > .sim-pdp-hl { order: 3; margin-top: 20px; max-width: 640px; } body.hb-site .product:has(.sim-pdp-split) .sim-pdp-split__b > .sim-simi { order: 4; width: 100%; max-width: 640px; margin-top: 14px; } } /* ---------- 3. Gallery (Dawn media-gallery + sim-hb-pdp-gallery) ------------- */ body.hb-site .product__media-wrapper media-gallery { display: flex; flex-direction: column; gap: 12px; } body.hb-site .product__media-wrapper [id^="GalleryViewer"] { position: relative; border-radius: 22px; overflow: hidden; background: #FFFFFF; border: 1px solid #E6D9C6; } body.hb-site .product__media-wrapper [id^="GalleryViewer"] .product__media-list { margin: 0; } body.hb-site .product__media-wrapper .product-media-container, body.hb-site .product__media-wrapper .product__media-item .media, body.hb-site .product__media-wrapper .global-media-settings { border: 0; border-radius: 0; background: #FFFFFF; box-shadow: none; } @media screen and (min-width: 750px) { /* 1:1 photo box as in the design; the photo is contained inside it */ body.hb-site .product__media-wrapper [id^="GalleryViewer"] { aspect-ratio: 1 / 1; } body.hb-site .product__media-wrapper [id^="GalleryViewer"] .product__media-list, body.hb-site .product__media-wrapper [id^="GalleryViewer"] .product__media-item.is-active, body.hb-site .product__media-wrapper [id^="GalleryViewer"] .product__media-item.is-active .product-media-container { height: 100%; } body.hb-site .product__media-wrapper [id^="GalleryViewer"] .product-media-container.constrain-height { --viewport-offset: 0px !important; --constrained-min-height: 0px !important; max-height: none; } body.hb-site .product__media-wrapper [id^="GalleryViewer"] .product-media-container.constrain-height .media { padding-top: 100% !important; } body.hb-site .product__media-wrapper [id^="GalleryViewer"] .product-media-container.media-fit-contain { width: 100%; } } /* zoom (top-left) and share (top-right): 40px white circles */ body.hb-site .product__media-wrapper .product__modal-opener--image .product__media-icon--lightbox { opacity: 1; top: 14px; left: 14px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .92); border: 0; color: #0F1E3C; box-shadow: 0 2px 8px rgba(60, 35, 20, .15); pointer-events: none; } body.hb-site .product__media-wrapper .product__modal-opener--image:hover .product__media-icon--lightbox { background: #A4522F; color: #FFFFFF; transform: none; box-shadow: 0 2px 8px rgba(60, 35, 20, .15); } body.hb-site .product__media-wrapper .product__media-icon--lightbox .icon { width: 18px; height: 18px; } body.hb-site .sim-share { top: 14px; right: 14px; } body.hb-site .sim-share__btn { width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #0F1E3C; box-shadow: 0 2px 8px rgba(60, 35, 20, .15); } body.hb-site .sim-share__btn:hover { background: #A4522F; color: #FFFFFF; transform: none; } body.hb-site .sim-share__btn svg { color: currentColor; } body.hb-site .sim-share__menu { border: 1px solid #E6D9C6; border-radius: 14px; box-shadow: 0 10px 30px rgba(60, 35, 20, .14); background: #FFFFFF; } body.hb-site .sim-share__menu [role="menuitem"]:hover, body.hb-site .sim-share__menu [role="menuitem"]:focus-visible { background: #F1E5D3; } /* prev / next arrows (added by sim-hb-pdp-gallery) */ body.hb-site .hb-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: rgba(255, 255, 255, .92); color: #0F1E3C; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(60, 35, 20, .15); } body.hb-site .hb-arrow--prev { left: 12px; } body.hb-site .hb-arrow--next { right: 12px; } body.hb-site .hb-arrow:hover { background: #A4522F; color: #FFFFFF; } body.hb-site .hb-arrow:focus-visible { outline: 2px solid #A4522F; outline-offset: 2px; } @media screen and (max-width: 749px) { body.hb-site .hb-arrow { display: none; } } /* "2 / 7" counter: white pill bottom-right (phones keep it bottom-left, clear of the chat bubble) */ body.hb-site .sim-gx-count { right: 16px; bottom: 16px; background: #FFFFFF; color: #0F1E3C; border: 1px solid #E6D9C6; padding: 6px 12px; font-size: 12px; font-weight: 800; letter-spacing: 0; box-shadow: none; } @media screen and (max-width: 749px) { body.hb-site .sim-gx-count { right: auto; left: 62px; bottom: 16px; } } /* autoplay pause button */ body.hb-site .sim-gap-btn { left: 16px; bottom: 16px; border: 1px solid #E6D9C6; background: rgba(255, 255, 255, .92); color: #0F1E3C; box-shadow: none; } body.hb-site .sim-gap-btn:focus-visible { outline-color: #A4522F; } /* thumbnails: 4-up grid of sand tiles, radius 14, 3px terracotta ring */ body.hb-site .product__media-wrapper [id^="GalleryThumbnails"] { position: relative; } body.hb-site .product__media-wrapper [id^="GalleryThumbnails"] .slider-button { display: none; } body.hb-site .product__media-wrapper .thumbnail-list.slider { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; overflow: visible; scroll-snap-type: none; } body.hb-site .product__media-wrapper .thumbnail-list.slider .thumbnail-list__item.slider__slide { width: auto; max-width: none; margin: 0; padding: 0; } body.hb-site .product__media-wrapper .thumbnail-list.slider .thumbnail-list__item::before { display: none; content: none; } body.hb-site .product__media-wrapper .thumbnail-list__item.hb-tx { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden; clip-path: inset(50%); pointer-events: none; } body.hb-site .product__media-wrapper .thumbnail { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; height: auto; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: #F1E5D3; cursor: pointer; box-shadow: none; } body.hb-site .product__media-wrapper .thumbnail img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; border-radius: 0; } body.hb-site .product__media-wrapper .thumbnail::after { content: ""; position: absolute; inset: 0; border-radius: 14px; pointer-events: none; box-shadow: inset 0 0 0 3px transparent; z-index: 2; transition: box-shadow .12s ease; } body.hb-site .product__media-wrapper .thumbnail[aria-current]::after, body.hb-site .product__media-wrapper .hb-cur-more .hb-more-li .thumbnail::after { box-shadow: inset 0 0 0 3px #A4522F; } body.hb-site .product__media-wrapper .thumbnail:hover::after { box-shadow: inset 0 0 0 3px #D9CBB6; } body.hb-site .product__media-wrapper .thumbnail[aria-current]:hover::after { box-shadow: inset 0 0 0 3px #A4522F; } body.hb-site .product__media-wrapper .thumbnail:focus-visible { outline: 2px solid #0F1E3C; outline-offset: 2px; } body.hb-site .hb-more { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: #A4522F; color: #FFFFFF; font-size: 18px; font-weight: 800; line-height: 1.1; pointer-events: none; } body.hb-site .hb-more > span { font-size: 11px; font-weight: 600; color: #F6E9DA; } /* quick facts (first 4 short rows of simlakhola.specs) */ body.hb-site .hb-qf { display: grid; grid-template-columns: repeat(var(--hb-qf-n, 4), minmax(0, 1fr)); margin: 0; border: 1px solid #E6D9C6; border-radius: 22px; overflow: hidden; background: #FFFFFF; } body.hb-site .hb-qf__c { padding: 12px 10px; display: flex; flex-direction: column; gap: 3px; min-width: 0; border-left: 1px solid #E6D9C6; } body.hb-site .hb-qf__c:first-child { border-left: 0; } body.hb-site .hb-qf dt { margin: 0; font-size: 11px; font-weight: 600; color: #7A6E62; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.hb-site .hb-qf dd { margin: 0; font-size: 13px; font-weight: 800; color: #0F1E3C; line-height: 1.25; overflow-wrap: anywhere; } /* info-column copy before the script moves it (and when JS is off) */ body.hb-site .product__info-container .hb-qf { margin-top: 16px; } @media screen and (max-width: 749px) { body.hb-site .product__media-wrapper media-gallery { gap: 10px; } body.hb-site .product__media-wrapper [id^="GalleryViewer"] { border-radius: 22px; } /* Dawn's phone gallery bleeds into the page gutter and peeks the next photo; the design's rounded photo box sits inside the 16px gutter, one photo at a time */ body.hb-site .product__media-wrapper .slider-mobile-gutter { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } body.hb-site .product__media-wrapper [id^="GalleryViewer"] .product__media-list.slider--mobile { margin: 0; padding: 0; gap: 0; scroll-padding-left: 0; } body.hb-site .product__media-wrapper [id^="GalleryViewer"] .product__media-list .product__media-item.slider__slide { width: 100%; max-width: 100%; margin: 0; padding: 0; } body.hb-site .product__media-wrapper [id^="GalleryThumbnails"] .thumbnail-list.slider--mobile { margin: 0; padding: 0; } body.hb-site .product__media-wrapper .thumbnail-list.slider { gap: 8px; } body.hb-site .hb-qf { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.hb-site .hb-qf__c:nth-child(odd) { border-left: 0; } body.hb-site .hb-qf__c:nth-child(n+3) { border-top: 1px solid #E6D9C6; } } /* Dawn zoom modal: cream, not grey */ body.hb-site product-modal .product-media-modal__dialog, body.hb-site .product-media-modal { background: #FBF6EE; } body.hb-site .product-media-modal__toggle { background: #FFFFFF; border-color: #E6D9C6; color: #0F1E3C; border-radius: 50%; } /* ---------- 4. Middle column: eyebrow, title, subtitle, options ------------- */ body.hb-site .sim-pdp-eyebrow { gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .12em; color: #A4522F; } body.hb-site .sim-pdp-eyebrow__dot { width: 4px; height: 4px; background: #C4522B; } body.hb-site product-info[id^="MainProduct-"] .product .product__title h1, body.hb-site product-info[id^="MainProduct-"] .product:has(.sim-pdp-split) .sim-pdp-split__a > .product__title h1 { font-family: 'Bricolage Grotesque', 'Albert Sans', system-ui, sans-serif; font-size: 21px; line-height: 1.3; font-weight: 800; letter-spacing: -.015em; color: #0F1E3C; text-wrap: pretty; } body.hb-site product-info[id^="MainProduct-"] .product:has(.sim-pdp-split) .sim-pdp-split__a > .product__title { margin: 10px 0 0; } body.hb-site p.sim-pdp-subtitle, body.hb-site product-info p.sim-pdp-subtitle { margin-top: 10px !important; font-size: 14px; line-height: 1.5; color: #5C5249; letter-spacing: 0; text-wrap: pretty; } body.hb-site .sim-pdp-rule { border-top-color: #E6D9C6; } body.hb-site product-info[id^="MainProduct-"] .product:has(.sim-pdp-split) .sim-pdp-split__a > .sim-pdp-rule { margin-top: 20px; } body.hb-site product-info[id^="MainProduct-"] .product:has(.sim-pdp-split) .sim-pdp-split__a > .sim-pdp-rule + * { margin-top: 20px; } /* options: label 14/700 + value 600 soft; choices = 2px #D9CBB6 tiles r12, selected terracotta */ body.hb-site product-info[id^="MainProduct-"] variant-selects .product-form__input { margin: 0 0 18px; padding: 0; border: 0; } body.hb-site product-info[id^="MainProduct-"] variant-selects .product-form__input .form__label { font-size: 14px; font-weight: 700; color: #1B221F; margin: 0 0 8px; letter-spacing: 0; } body.hb-site product-info[id^="MainProduct-"] variant-selects .sim-lg-val { font-weight: 600; color: #5C5249; } body.hb-site product-info[id^="MainProduct-"] variant-selects .product-form__input--pill input[type='radio'] + label { border: 2px solid #D9CBB6; border-radius: 12px; background: #FFFFFF; color: #1B221F; padding: 9px 14px; margin: 0 8px 8px 0; font-size: 13px; font-weight: 800; letter-spacing: 0; line-height: 1.3; } body.hb-site product-info[id^="MainProduct-"] variant-selects .product-form__input--pill input[type='radio'] + label::before { display: none; } body.hb-site product-info[id^="MainProduct-"] variant-selects .product-form__input--pill input[type='radio'] + label:hover { border-color: #A4522F; } body.hb-site product-info[id^="MainProduct-"] variant-selects .product-form__input--pill input[type='radio']:checked + label { background: #A4522F; border-color: #A4522F; color: #FFFFFF; } body.hb-site product-info[id^="MainProduct-"] variant-selects .product-form__input--pill input[type='radio']:focus-visible + label { outline: 2px solid #0F1E3C; outline-offset: 2px; } body.hb-site product-info[id^="MainProduct-"] variant-selects .product-form__input--pill input[type='radio'].disabled + label, body.hb-site product-info[id^="MainProduct-"] variant-selects .product-form__input--pill input[type='radio']:disabled + label { color: #7A6E62; border-style: dashed; } body.hb-site product-info[id^="MainProduct-"] variant-selects .product-form__input--dropdown .select__select { border-radius: 12px; } /* size guide (sim-size-chart) */ body.hb-site .sim-size-chart { border: 1px solid #E6D9C6; border-radius: 14px; background: #FFFFFF; margin: 0 0 18px; overflow: hidden; } body.hb-site .sim-size-chart summary { padding: 11px 14px; font-size: 13px; font-weight: 700; color: #0F1E3C; cursor: pointer; } body.hb-site .sim-size-chart summary span { color: #7A6E62; font-weight: 600; } body.hb-site .sim-size-chart__body { padding: 0 14px 12px; font-size: 13px; color: #5C5249; } body.hb-site .sim-size-chart table { width: 100%; border-collapse: collapse; } body.hb-site .sim-size-chart :is(th, td) { padding: 8px 0; border: 0; border-bottom: 1px solid #EAE0D0; text-align: left; background: none; } body.hb-site .sim-size-chart thead th { color: #7A6E62; font-weight: 600; } /* ---------- 5. "Why you'll love it" highlights card ------------------------- */ body.hb-site .sim-pdp-hl { margin: 0; border: 1px solid #E6D9C6; border-radius: 22px; background: #FFFFFF; overflow: hidden; } body.hb-site product-info[id^="MainProduct-"] .product:has(.sim-pdp-split) .sim-pdp-split__a > .sim-pdp-hl { margin-top: 20px; } body.hb-site .sim-pdp-hl__bar { position: relative; overflow: hidden; min-height: 0; padding: 12px 18px; align-items: baseline; background: #F1E5D3; } body.hb-site .sim-pdp-hl__bar::after { content: ""; position: absolute; right: -30px; top: -40px; width: 110px; height: 110px; border-radius: 50%; background: rgba(164, 82, 47, .14); pointer-events: none; } body.hb-site .sim-pdp-hl__title { position: relative; font-size: 12px; font-weight: 800; letter-spacing: .14em; color: #A4522F; } body.hb-site .sim-pdp-hl__tag { position: relative; padding: 0; border-radius: 0; background: none; align-self: baseline; font-size: 11px; font-weight: 700; letter-spacing: 0; color: #685C51; } body.hb-site .sim-pdp-hl__list { padding: 16px 18px; gap: 10px; } body.hb-site .sim-pdp-hl__item { gap: 12px; font-size: 13px; line-height: 1.4; font-weight: 700; color: #0F1E3C; } body.hb-site .sim-pdp-hl__tick { flex: 0 0 24px; width: 24px; height: 24px; padding: 6px; background: #C4522B; color: #FFFFFF; stroke-width: 3; } /* ---------- 6. Buy box card ("Your pick") ----------------------------------- */ body.hb-site .sim-pdp-card { border: 1px solid #E6D9C6; border-radius: 22px; background: #FFFFFF; overflow: hidden; box-shadow: 0 10px 30px rgba(60, 35, 20, .10); } body.hb-site .sim-pdp-card__head { background: #E9D6BE; color: #0F1E3C; padding: 20px 22px 18px; } body.hb-site .sim-pdp-card__tag { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: #685C51; } body.hb-site .sim-pdp-card__pick { margin: 6px 0 0; font-size: 14px; font-weight: 700; line-height: 1.35; color: #1B221F; } body.hb-site .sim-pdp-card__head .sim-pdp-offer { margin: 12px 0 0; color: #0F1E3C; } body.hb-site .sim-pdp-card__head :is(.sim-price, .sim-price__now, .sim-deal__price) { color: #0F1E3C; } body.hb-site .sim-pdp-card__head .sim-price__top { gap: 6px 12px; align-items: flex-start; } body.hb-site .sim-pdp-card__head .sim-price__now, body.hb-site .sim-pdp-card__head .sim-deal__price { font-family: 'Bricolage Grotesque', 'Albert Sans', system-ui, sans-serif; font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1; } /* Design shows plain "$109.99" (no raised cents) at 34px */ body.hb-site .sim-pdp-card__head .sim-price__now .sim-sup sup, body.hb-site .sim-pdp-card__head .sim-deal__price .sim-sup sup { font-size: 1em; align-self: baseline; margin: 0; position: static; line-height: 1; } body.hb-site .sim-pdp-card__head .sim-price__now .sim-sup sup:last-child::before, body.hb-site .sim-pdp-card__head .sim-deal__price .sim-sup sup:last-child::before { content: "."; } /* red notched % OFF tag + "You save" pill */ body.hb-site .sim-pdp-off { margin-top: -2px; padding: 4px 9px 4px 12px; background: #D9302A; color: #FFFFFF; font-size: 12px; font-weight: 800; letter-spacing: 0; line-height: 1.3; border-radius: 0 5px 5px 0; clip-path: polygon(7px 0, 100% 0, 100% 100%, 7px 100%, 0 50%); } body.hb-site .sim-pdp-card__head .sim-price__sub { margin-top: 8px; gap: 6px 10px; font-size: 13px; } body.hb-site .sim-pdp-card__head .sim-price__was { color: #685C51; } body.hb-site .sim-pdp-save { padding: 3px 9px; border-radius: 6px; background: #C4522B; color: #FFFFFF; font-size: 13px; font-weight: 800; } /* code deal (sim-promo-badge) on clay */ body.hb-site .sim-pdp-card__head .sim-deal__tag { background: #A4522F; color: #FFFFFF; border-radius: 999px; } body.hb-site .sim-pdp-card__head .sim-deal { color: #0F1E3C; } body.hb-site .sim-pdp-card__head .sim-deal__row { gap: 6px 12px; } body.hb-site .sim-pdp-card__head .sim-deal__list { margin-top: 8px; font-size: 13px; } body.hb-site .sim-pdp-card__head :is(.sim-deal__was, .sim-deal__was s) { color: #685C51; } body.hb-site .sim-pdp-card__head .sim-deal__code { color: #1B221F; } body.hb-site .sim-pdp-card__head .sim-deal__copy { background: #0F1E3C; color: #FFFFFF; } body.hb-site .sim-pdp-card__head .sim-deal__copy:hover { background: #A4522F; color: #FFFFFF; } body.hb-site .sim-pdp-card__head .sim-deal__copy:focus-visible { outline-color: #0F1E3C; } body.hb-site .sim-pdp-card__head .sim-deal__copy[data-copied="true"] { background: #1B6B3A; color: #FFFFFF; } body.hb-site .sim-pdp-card__head .sim-deal__with { color: #1B221F; font-size: 13px; } body.hb-site .sim-pdp-card__head .sim-deal__chip { background: #FFFFFF; border: 1px dashed #A4522F; color: #A4522F; border-radius: 8px; } body.hb-site .sim-pdp-card__head .sim-deal__copy { border-radius: 999px; } body.hb-site .sim-pdp-card__head .sim-deal__note { color: #1B221F; } /* Shop Pay line */ body.hb-site .sim-pdp-card__head .sim-pdp-pay4--chip { margin: 10px 0 0; font-size: 13px; color: #5C5249; column-gap: 8px; } body.hb-site .sim-pdp-card__head .sim-pdp-pay4__chip { padding: 3px 7px; margin: 0; border-radius: 5px; background: #5A31F4; color: #FFFFFF; font-size: 11px; font-weight: 800; } body.hb-site .sim-pdp-card__head .sim-pdp-pay4--chip .sim-pdp-pay4__amt { color: #0F1E3C; font-size: 13px; font-weight: 800; } body.hb-site .sim-pdp-card__head :is(.sim-pdp-pay4__info, .sim-pdp-pay4__more) { color: #685C51; } body.hb-site .sim-pdp-card__head :is(.sim-pdp-pay4__info, .sim-pdp-pay4__more):hover { color: #0F1E3C; } body.hb-site .sim-pdp-card__head :is(.sim-pdp-pay4__info, .sim-pdp-pay4__more):focus-visible { outline-color: #0F1E3C; } body.hb-site .sim-pdp-card__head .sim-pdp-pay4 { color: #5C5249; font-size: 13px; } body.hb-site .sim-pdp-card__head .sim-pdp-pay4__hl { background: rgba(255, 255, 255, .6); color: #0F1E3C; } body.hb-site .sim-pdp-card__head .sim-pdp-pay4__plans { color: #0F1E3C; } body.hb-site .sim-pdp-card__head :is(.sim-pdp-paymo, .sim-pdp-ptsrc) { color: #5C5249; font-size: 13px; } body.hb-site .sim-pdp-card__head :is(.sim-pdp-paymo strong, .sim-pdp-paymo__cta) { color: #0F1E3C; } /* delivery / promo line (only renders from real data or the free-shipping promo) */ body.hb-site .sim-pdp-card__head .sim-pdp-delivery { margin: 14px 0 0; padding: 9px 12px; gap: 10px; border-radius: 14px; background: rgba(255, 255, 255, .55); color: #1B221F; } body.hb-site .sim-pdp-card__head .sim-pdp-delivery__ic { width: 30px; height: 30px; background: #FFFFFF; color: #1B6B3A; } body.hb-site .sim-pdp-card__head .sim-pdp-delivery__ic svg { width: 18px; height: 18px; } body.hb-site .sim-pdp-card__head .sim-pdp-delivery__main { color: #1B221F; font-size: 13px; font-weight: 600; line-height: 1.4; } body.hb-site .sim-pdp-card__head .sim-pdp-delivery__main strong { color: #1B6B3A; font-weight: 800; } /* body: qty pill, 52px Add to cart, Buy with Shop */ body.hb-site .sim-pdp-card__body { padding: 18px 22px 20px; } body.hb-site .sim-pdp-card__body > * + * { margin-top: 12px; } body.hb-site .sim-pdp-card .sim-buy__row { gap: 12px; } body.hb-site product-info[id^="MainProduct-"] .sim-pdp-card .sim-buy__qty .quantity, body.hb-site product-info[id^="MainProduct-"] .quantity { min-height: 46px; border: 1.5px solid #D9CBB6; border-radius: 999px; background: #FFFFFF; padding: 0 4px; } body.hb-site product-info[id^="MainProduct-"] .sim-pdp-card .sim-buy__qty .quantity { width: 100%; min-height: 48px; } body.hb-site product-info[id^="MainProduct-"] .sim-pdp-card .sim-buy__qty .quantity__button, body.hb-site product-info[id^="MainProduct-"] .quantity__button { width: 44px; color: #1B221F; } body.hb-site product-info[id^="MainProduct-"] .quantity__input { font-size: 14px; font-weight: 700; color: #1B221F; } body.hb-site product-info[id^="MainProduct-"] .quantity__button:focus-visible { box-shadow: 0 0 0 2px #A4522F; } body.hb-site product-info[id^="MainProduct-"] .product-form__submit.button, body.hb-site product-info[id^="MainProduct-"] .sim-pdp-card .sim-buy__row .product-form__submit.button { min-height: 52px; border-radius: 999px; background: #A4522F; color: #FFFFFF; font-size: 16px; font-weight: 800; letter-spacing: 0; box-shadow: none; } body.hb-site product-info[id^="MainProduct-"] .product-form__submit.button:hover:not([disabled]), body.hb-site product-info[id^="MainProduct-"] .sim-pdp-card .sim-buy__row .product-form__submit.button:hover:not([disabled]) { background: #C4522B; box-shadow: none; transform: none; } body.hb-site product-info[id^="MainProduct-"] .product-form__submit.button[disabled], body.hb-site product-info[id^="MainProduct-"] .sim-pdp-card .sim-buy__row .product-form__submit.button[disabled] { background: #E6D9C6; color: #5C5249; } body.hb-site product-info[id^="MainProduct-"] .product-form__submit.button:focus-visible { outline: 3px solid #0F1E3C; outline-offset: 3px; } body.hb-site product-info[id^="MainProduct-"] .sim-pdp-card .sim-buy__row .product-form__submit.button { font-size: 16px; } body.hb-site product-info[id^="MainProduct-"] :is(.shopify-payment-button, shopify-accelerated-checkout) { --shopify-accelerated-checkout-button-block-size: 52px !important; --shopify-accelerated-checkout-button-border-radius: 999px !important; } body.hb-site product-info[id^="MainProduct-"] .shopify-payment-button__button { min-height: 52px; border-radius: 999px; } /* trust list inside the card: rule above, 18px navy icons, 13.5px soft text */ body.hb-site .sim-pdp-card .sim-pdp-trust { margin: 6px 0 0; padding: 14px 0 0; border-top: 1px solid #E6D9C6; display: flex; flex-direction: column; gap: 10px; } body.hb-site .sim-pdp-card .sim-pdp-trust__card { border: 0; background: none; } body.hb-site .sim-pdp-card .sim-pdp-trust__in { grid-template-columns: 18px minmax(0, 1fr); column-gap: 10px; padding: 0; align-items: center; } body.hb-site .sim-pdp-card .sim-pdp-trust svg { width: 18px; height: 18px; color: #0F1E3C; stroke-width: 2; } body.hb-site .sim-pdp-card .sim-pdp-trust strong { font-size: 13.5px; font-weight: 700; color: #1B221F; line-height: 1.35; } body.hb-site .sim-pdp-card .sim-pdp-trust span { margin: 0; font-size: 12.5px; line-height: 1.35; color: #5C5249; } body.hb-site .sim-pdp-card a.sim-pdp-trust__in:hover strong { color: #C4522B; text-decoration: underline; text-underline-offset: 3px; } /* Trust + facts outside the card (ball-launcher / generic templates) */ body.hb-site .sim-pdp-facts { font-size: 14px; color: #1B221F; } body.hb-site .sim-pdp-facts dt { color: #7A6E62; } body.hb-site .sim-pdp-facts a { color: #0F1E3C; text-decoration-color: rgba(15, 30, 60, .35); } body.hb-site .sim-pdp-facts a:hover { color: #C4522B; } body.hb-site .product:not(:has(.sim-pdp-card)) .sim-pdp-trust__card { border: 1px solid #E6D9C6; border-radius: 22px; background: #FFFFFF; } body.hb-site .product:not(:has(.sim-pdp-card)) .sim-pdp-trust svg { color: #1B6B3A; } body.hb-site .product:not(:has(.sim-pdp-card)) .sim-pdp-trust strong { color: #0F1E3C; font-size: 13px; } body.hb-site .product:not(:has(.sim-pdp-card)) .sim-pdp-trust span { color: #5C5249; } /* ---------- 7. Ask Simi card (clay) ----------------------------------------- */ body.hb-site .sim-simi, body.hb-site .sim-pdp-simi { border: 1px solid #E6D9C6; border-radius: 22px; background: #E9D6BE; padding: 14px 16px; gap: 14px; color: #1B221F; } body.hb-site .sim-simi:hover, body.hb-site .sim-pdp-simi:hover { background: #E9D6BE; border-color: #0F1E3C; } body.hb-site .sim-simi:focus-visible, body.hb-site .sim-pdp-simi:focus-visible { outline: 2px solid #0F1E3C; outline-offset: 2px; } body.hb-site .sim-simi__av > svg circle[fill="#c2552a"] { fill: #C4522B; } body.hb-site .sim-simi__av > svg circle[fill="#0a1930"] { fill: #C4522B; } body.hb-site .sim-simi__badge { width: 22px; height: 22px; background: #0F1E3C; border: 2px solid #E9D6BE; } body.hb-site :is(.sim-simi__txt, .sim-pdp-simi__txt) { font-size: 15px; line-height: 1.45; letter-spacing: 0; text-wrap: pretty; } body.hb-site :is(.sim-simi__txt, .sim-pdp-simi__txt) strong { font-weight: 800; color: #0F1E3C; text-decoration-color: currentColor; } body.hb-site .sim-pdp-simi__av { background: #C4522B; } /* ---------- 8. Ball-launcher / generic template buy column ------------------- */ body.hb-site .product:not(:has(.sim-pdp-split)) .sim-pdp-offer .sim-price__now { font-family: 'Bricolage Grotesque', 'Albert Sans', system-ui, sans-serif; font-size: 34px; font-weight: 800; letter-spacing: -.03em; color: #0F1E3C; } body.hb-site .product:not(:has(.sim-pdp-split)) .sim-pdp-delivery { border-radius: 14px; background: #F1E5D3; } body.hb-site .product:not(:has(.sim-pdp-split)) .sim-price__now .sim-sup sup { font-size: 1em; align-self: baseline; margin: 0; position: static; line-height: 1; } body.hb-site .product:not(:has(.sim-pdp-split)) .sim-price__now .sim-sup sup:last-child::before { content: "."; } body.hb-site .product:not(:has(.sim-pdp-split)) .sim-pdp-delivery__ic { color: #1B6B3A; } body.hb-site .product:not(:has(.sim-pdp-split)) .sim-pdp-pay4__chip { background: #5A31F4; } body.hb-site .product:not(:has(.sim-pdp-split)) .sim-pdp-pay4__hl { background: #F1E5D3; } body.hb-site .product:not(:has(.sim-pdp-split)) .sim-pdp-pay4__plans { color: #0F1E3C; } @media screen and (min-width: 1080px) { body.hb-site .product.product--large:not(:has(.sim-pdp-split)):not(.product--no-media) { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); column-gap: 40px; align-items: start; } body.hb-site .product:not(:has(.sim-pdp-split)) > :is(.product__media-wrapper, .product__info-wrapper) { width: auto; max-width: none; padding: 0; } body.hb-site .product:not(:has(.sim-pdp-split)) > .product__media-wrapper media-gallery { max-width: 760px; } } /* ---------- 9. Sticky top buy bar (sim-pdp-subnav) + phone bottom bar ------- */ body.hb-site .sim-pdpn { background: #FBF6EE; border-bottom: 1px solid #E6D9C6; box-shadow: 0 8px 30px rgba(60, 35, 20, .10); } body.hb-site .sim-pdpn__in { min-height: 70px; gap: 16px; } body.hb-site .sim-pdpn__links a { font-size: 14px; font-weight: 700; color: #5C5249; } body.hb-site .sim-pdpn__links a:hover { color: #1B221F; } body.hb-site .sim-pdpn__links a[aria-current="true"] { color: #0F1E3C; border-bottom-color: #C4522B; } body.hb-site .sim-pdpn__links a:focus-visible { outline-color: #A4522F; } body.hb-site .sim-pdpn__thumb { border: 1px solid #E6D9C6; border-radius: 10px; background: #F1E5D3; mix-blend-mode: multiply; } body.hb-site .sim-pdpn__meta { max-width: 340px; } body.hb-site .sim-pdpn__title { font-size: 14px; font-weight: 700; color: #1B221F; } body.hb-site .sim-pdpn__price { font-size: 13px; font-weight: 700; color: #0F1E3C; } body.hb-site .sim-pdpn__var { font-size: 13px; font-weight: 600; color: #7A6E62; } body.hb-site .sim-pdpn__atc, body.hb-site:has(.sim-pdp-split) .sim-pdpn__atc { min-height: 46px; padding: 0 24px; border-radius: 999px; background: #A4522F; color: #FFFFFF; font-size: 15px; font-weight: 700; box-shadow: none; } body.hb-site .sim-pdpn__atc:hover, body.hb-site:has(.sim-pdp-split) .sim-pdpn__atc:hover { background: #C4522B; } body.hb-site .sim-pdpn__atc:focus-visible { outline: 2px solid #0F1E3C; outline-offset: 2px; } @media screen and (max-width: 749px) { body.hb-site .sim-buybar { background: #FBF6EE; border-top: 1px solid #E6D9C6; box-shadow: 0 -8px 30px rgba(60, 35, 20, .10); } body.hb-site .sim-buybar__btn, body.hb-site:has(.sim-pdp-split) .sim-buybar__btn, body.hb-site.sim-bb-v2 .sim-bb2__btns > .sim-buybar__btn { background: #A4522F; color: #FFFFFF; border-radius: 999px; box-shadow: none; font-weight: 800; } body.hb-site .sim-buybar__btn:hover { background: #C4522B; } body.hb-site.sim-bb-v2 .sim-bb2__buy { background: #5A31F4; border-radius: 999px; } body.hb-site.sim-bb-v2 .sim-bb2__sel { color: #5C5249; } body.hb-site.sim-bb-v2 .sim-bb2__price { color: #0F1E3C; font-family: 'Bricolage Grotesque', 'Albert Sans', system-ui, sans-serif; font-weight: 800; } body.hb-site.sim-bb-v2 .sim-bb2__btns > [disabled], body.hb-site.sim-bb-v2 .sim-bb2__btns > [aria-disabled="true"] { background: #E6D9C6; color: #5C5249; } } /* ---------- 10. Trust strip (4-up, gated markup in sim-pdp-details) --------- */ body.hb-site .hb-pdp-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 40px; } body.hb-site .hb-pdp-trust__i { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid #E6D9C6; border-radius: 22px; background: #FFFFFF; font-size: 13px; font-weight: 700; color: #0F1E3C; line-height: 1.3; } body.hb-site .hb-pdp-trust__i svg { flex: none; color: #1B6B3A; } @media screen and (max-width: 749px) { body.hb-site .hb-pdp-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 28px; } body.hb-site .hb-pdp-trust__i { padding: 12px; gap: 10px; } } /* ---------- 11. Summary = benefit cards, specs, description, who / box ------ */ body.hb-site .sim-pdpd { padding-block: 72px 0; } body.hb-site .sim-pdpd--summary { padding-top: 64px; } body.hb-site .sim-pdpd__wrap { gap: 28px; } body.hb-site .sim-pdpd--summary .sim-pdpd__sumcol > .sim-pdpd__h { font-size: 30px; } @media screen and (max-width: 749px) { body.hb-site .sim-pdpd--summary .sim-pdpd__sumcol > .sim-pdpd__h { font-size: 24px; } } /* Summary highlights (simlakhola.highlights): white cards r22, icon, title, text */ body.hb-site .sim-pdpd--summary .sim-pdpd__hl, body.hb-site .sim-pdpd__sumrow--specs .sim-pdpd__hl { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; max-width: none; margin-top: 12px; border: 0; font-size: 14px; } body.hb-site .sim-pdpd--summary .sim-pdpd__hl li { display: flex; flex-direction: column; gap: 10px; padding: 24px; margin: 0; background: #FFFFFF; border: 1px solid #E6D9C6; border-radius: 22px; } body.hb-site .sim-pdpd--summary .sim-pdpd__hi { width: 44px; height: 44px; border-radius: 14px; background: #F1E5D3; color: #A4522F; box-shadow: none; } body.hb-site .sim-pdpd--summary .sim-pdpd__hi svg { width: 22px; height: 22px; } body.hb-site .sim-pdpd--summary .sim-pdpd__hx { padding: 0; font-size: 14px; line-height: 1.5; color: #5C5249; letter-spacing: 0; text-wrap: pretty; } body.hb-site .sim-pdpd--summary .sim-pdpd__ht { display: block; margin-bottom: 6px; font-size: 16px; font-weight: 700; line-height: 1.3; color: #1B221F; } /* specs beside the summary: design's dl rows */ body.hb-site .sim-pdpd__specs { background: #FFFFFF; border: 1px solid #E6D9C6; border-radius: 22px; padding: 22px 24px 10px; } body.hb-site .sim-pdpd__specs .sim-pdpd__h { font-size: 22px; margin-bottom: 6px; } body.hb-site .sim-pdpd__spectable { border-top: 0; font-size: 14.5px; line-height: 1.45; } body.hb-site .sim-pdpd__spectable :is(th, td) { padding: 12px 0; border-bottom: 1px solid #EAE0D0; } body.hb-site .sim-pdpd__spectable tr:last-child :is(th, td) { border-bottom: 0; } body.hb-site .sim-pdpd__spectable th { width: 40%; padding-right: 24px; color: #7A6E62; font-weight: 600; } body.hb-site .sim-pdpd__spectable td { color: #1B221F; font-weight: 600; } @media screen and (min-width: 1100px) { body.hb-site .sim-pdpd__sumrow--specs { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); column-gap: 32px; } body.hb-site .sim-pdpd__sumrow--specs .sim-pdpd__hl { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } } /* product description */ body.hb-site .sim-pdpd__desc { gap: 14px; } body.hb-site .sim-pdpd__rte { max-width: 800px; font-size: 15px; line-height: 1.65; color: #5C5249; letter-spacing: 0; } body.hb-site .sim-pdpd__rte :is(strong, h2, h3, h4) { color: #1B221F; } body.hb-site .sim-pdpd__rte li::marker { color: #C4522B; } body.hb-site .sim-pdpd__rte a { color: #0F1E3C; } /* who it's for / what's in the box */ body.hb-site .sim-pdpd__card { border: 1px solid #E6D9C6; border-radius: 22px; padding: 22px 24px 24px; background: #FFFFFF; overflow: hidden; } body.hb-site .sim-pdpd__sh { margin: -22px -24px 16px; padding: 12px 24px; background: #F1E5D3; font-family: 'Albert Sans', system-ui, sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #A4522F; } body.hb-site .sim-pdpd__fitline { color: #0F1E3C; } body.hb-site .sim-pdpd__yes, body.hb-site .sim-pdpd__no { padding: 0; background: none; border-radius: 0; gap: 10px; } body.hb-site .sim-pdpd__who-cols--one .sim-pdpd__yes { padding: 0; } body.hb-site :is(.sim-pdpd__yes, .sim-pdpd__no) li { gap: 12px; font-size: 14px; line-height: 1.45; color: #1B221F; align-items: flex-start; } body.hb-site :is(.sim-pdpd__yes, .sim-pdpd__no) svg { flex: 0 0 24px; width: 24px; height: 24px; margin: -1px 0 0; padding: 6px; border-radius: 50%; stroke-width: 3; color: #FFFFFF; box-sizing: border-box; } body.hb-site .sim-pdpd__yes svg { background: #C4522B; } body.hb-site .sim-pdpd__no svg { background: #7A6E62; } body.hb-site .sim-pdpd__box li { font-size: 14px; color: #1B221F; } body.hb-site .sim-pdpd__bx { width: 42px; height: 42px; border-radius: 14px; background: #F1E5D3; color: #A4522F; } /* ---------- 12. Pairs well with --------------------------------------------- */ body.hb-site .sim-pdpp { padding-block: 72px 0; } body.hb-site .sim-pdpp__h { margin: 0 0 20px; } body.hb-site .sim-pdpp__sub { margin: -12px 0 20px; font-size: 14px; color: #5C5249; } body.hb-site .sim-pdpp__body { display: flex; flex-direction: column; align-items: stretch; gap: 20px; max-width: 1480px; } body.hb-site .sim-pdpp__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 340px)); gap: 16px; } body.hb-site .sim-pdpp__plus { display: none; } body.hb-site .sim-pdpp__row { position: relative; display: flex; flex-direction: column; max-width: none; min-width: 0; background: #FFFFFF; border: 1px solid #E6D9C6; border-radius: 22px; overflow: hidden; } body.hb-site .sim-pdpp__row.is-checked { border-color: #A4522F; } body.hb-site .sim-pdpp__row.is-current { border-color: #E6D9C6; } body.hb-site .sim-pdpp__row.is-current.is-checked { border-color: #A4522F; } body.hb-site .sim-pdpp__label { flex: 1; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; } /* checkbox pill top-left: "This item" / "Add" */ body.hb-site .sim-pdpp__row::before { content: "Add"; position: absolute; top: 12px; left: 12px; z-index: 1; pointer-events: none; padding: 6px 12px 6px 32px; border: 1px solid #E6D9C6; border-radius: 999px; background: #FFFFFF; font-size: 12px; font-weight: 700; line-height: 16px; color: #1B221F; } body.hb-site .sim-pdpp__row.is-current::before { content: "This item"; } body.hb-site .sim-pdpp__cb { position: absolute; top: 19px; left: 21px; z-index: 2; width: 16px; height: 16px; margin: 0; accent-color: #A4522F; } body.hb-site .sim-pdpp__tag { display: none; } body.hb-site .sim-pdpp__img { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 0; background: #F1E5D3; display: flex; align-items: center; justify-content: center; overflow: hidden; } body.hb-site .sim-pdpp__img img { width: 82%; height: 82%; object-fit: contain; mix-blend-mode: multiply; } body.hb-site .sim-pdpp__info { padding: 16px 16px 4px; gap: 6px; } body.hb-site .sim-pdpp__title { font-size: 15px; font-weight: 700; line-height: 1.3; color: #1B221F; } body.hb-site .sim-pdpp__var { font-size: 12.5px; color: #7A6E62; } body.hb-site .sim-pdpp__price { font-size: 15px; font-weight: 800; color: #0F1E3C; } body.hb-site .sim-pdpp__why { color: #5C5249; } body.hb-site .sim-pdpp__row:not(.is-checked) :is(.sim-pdpp__img, .sim-pdpp__info) { opacity: 1; } body.hb-site .sim-pdpp__row:not(.is-checked) .sim-pdpp__img img { opacity: .75; } body.hb-site .sim-pdpp__view { position: static; display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px 12px; font-size: 13px; font-weight: 700; color: #0F1E3C; } body.hb-site .sim-pdpp__view:hover { color: #C4522B; } body.hb-site .sim-pdpp__row.is-current { padding-bottom: 12px; } /* bundle total bar (design: white bar, total left, pill button right; note below) */ body.hb-site .sim-pdpp__body > .sim-pdpp__sum { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin: 0; padding: 18px 24px; border: 1px solid #E6D9C6; border-radius: 22px; background: #FFFFFF; } body.hb-site .sim-pdpp__total { display: flex; flex-direction: column; margin: 0; min-width: 0; font-size: 13px; line-height: 1.4; color: #7A6E62; } body.hb-site .sim-pdpp__total b { display: block; font-family: 'Bricolage Grotesque', 'Albert Sans', system-ui, sans-serif; font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: #0F1E3C; line-height: 1.2; } body.hb-site .sim-pdpp__sum > .sim-pdpp__btn { flex: none; width: auto; height: 50px; min-height: 50px; margin: 0; padding: 0 28px; border: 0; border-radius: 999px; background: #A4522F; color: #FFFFFF; font-size: 15px; font-weight: 700; line-height: 1; white-space: nowrap; } body.hb-site .sim-pdpp__sum > .sim-pdpp__btn:hover { background: #C4522B; } body.hb-site .sim-pdpp__sum > .sim-pdpp__btn:focus-visible { outline: 2px solid #0F1E3C; outline-offset: 2px; } body.hb-site .sim-pdpp__sum > .sim-pdpp__btn[disabled] { background: #E6D9C6; color: #5C5249; opacity: 1; } body.hb-site .sim-pdpp__err { flex-basis: 100%; margin: 0; color: #D9302A; } body.hb-site .sim-pdpp__err[hidden] { display: none; } body.hb-site .sim-pdpp__body > .sim-pdpp__note { margin: -10px 0 0; font-size: 13px; color: #7A6E62; } body.hb-site .sim-pdpp__sum > .sim-pdpp__note { flex-basis: 100%; margin: 0; font-size: 13px; color: #7A6E62; } @media screen and (max-width: 749px) { body.hb-site .sim-pdpp { padding-top: 56px; } body.hb-site .sim-pdpp__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } body.hb-site .sim-pdpp__row::before { top: 8px; left: 8px; padding: 5px 10px 5px 28px; font-size: 11px; } body.hb-site .sim-pdpp__cb { top: 14px; left: 15px; } body.hb-site .sim-pdpp__info { padding: 12px 12px 2px; } body.hb-site .sim-pdpp__title { font-size: 13.5px; } body.hb-site .sim-pdpp__view { padding: 0 12px 10px; } body.hb-site .sim-pdpp__body > .sim-pdpp__sum { padding: 16px; } body.hb-site .sim-pdpp__sum > .sim-pdpp__btn { flex: 1 1 100%; width: 100%; } } /* ---------- 13. Tabs as the design's accordion (sim-pdp-tabs) --------------- */ body.hb-site .sim-pdpt { padding-block: 72px 0; scroll-margin-top: 120px; } body.hb-site .sim-pdpt > .page-width { display: flex; flex-direction: column; } body.hb-site .sim-pdpt .hb-pdpt-h { order: 0; margin: 0 0 20px; } body.hb-site .sim-pdpt__bar, body.hb-site .sim-pdpt__list { display: contents; } body.hb-site .sim-pdpt__list [role="tab"] { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; max-width: 1100px; padding: 18px 0; margin: 0; border: 0; border-bottom: 1px solid #D9CBB6; border-radius: 0; background: none; text-align: left; white-space: normal; font-size: 17px; font-weight: 700; color: #1B221F; } body.hb-site .sim-pdpt__list [role="tab"]::after { content: "+"; flex: none; font-size: 22px; font-weight: 400; line-height: 1; color: #0F1E3C; } body.hb-site .sim-pdpt__list [role="tab"][aria-selected="true"] { color: #1B221F; border-bottom-color: transparent; } body.hb-site .sim-pdpt__list [role="tab"][aria-selected="true"]::after { content: "\2212"; } body.hb-site .sim-pdpt__list [role="tab"]:hover { color: #C4522B; } body.hb-site .sim-pdpt__list [role="tab"]:focus-visible { outline: 2px solid #A4522F; outline-offset: 2px; border-radius: 4px; } body.hb-site .sim-pdpt__lbl { display: inline; } body.hb-site .sim-pdpt__lbl-s { display: none; } body.hb-site #tab-questions { order: 1; border-top: 1px solid #D9CBB6; } body.hb-site #panel-questions { order: 2; } body.hb-site #tab-specs { order: 3; } body.hb-site #panel-specs { order: 4; } body.hb-site #tab-shipping { order: 5; } body.hb-site #panel-shipping { order: 6; } body.hb-site:has(#sim-pdp-specs-side) #tab-specs { display: none !important; } body.hb-site .sim-pdpt__panel { width: 100%; max-width: 1100px; padding: 0 0 22px; border-bottom: 1px solid #D9CBB6; font-size: 15px; color: #5C5249; } body.hb-site .sim-pdpt__panel[hidden] { display: none; } body.hb-site .sim-pdpt__panel:focus-visible { outline-offset: 2px; outline-color: #A4522F; } body.hb-site .sim-pdpt__ph { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; } body.hb-site .sim-pdpt__sh { font-size: 15px; font-weight: 800; color: #1B221F; } /* specs panel: design dl rows */ body.hb-site .sim-pdpt__spec { font-size: 14.5px; } body.hb-site .sim-pdpt__spec tr:nth-child(odd), body.hb-site .sim-pdpt__spec--chart tbody tr:nth-child(odd) { background: none; } body.hb-site .sim-pdpt__spec :is(th, td) { padding: 12px 0; border-bottom: 1px solid #EAE0D0; } body.hb-site .sim-pdpt__spec th { width: 180px; padding-right: 24px; color: #7A6E62; font-weight: 600; } body.hb-site .sim-pdpt__spec td { color: #1B221F; font-weight: 600; } body.hb-site .sim-pdpt__spec--chart thead th { background: none; border-bottom: 1px solid #D9CBB6; padding: 10px 0; } body.hb-site .sim-pdpt__box li { margin-bottom: 8px; color: #1B221F; } body.hb-site .sim-pdpt__box li::marker { color: #C4522B; } /* shipping & returns panel */ body.hb-site .sim-pdpt__sr { gap: 16px; } body.hb-site .sim-pdpt__card { border: 1px solid #E6D9C6; border-radius: 22px; background: #FFFFFF; padding: 20px 22px; } body.hb-site .sim-pdpt__ch { font-size: 15px; font-weight: 800; color: #1B221F; margin: 0 0 8px; } body.hb-site .sim-pdpt__facts { color: #5C5249; } body.hb-site .sim-pdpt__facts li::marker { color: #C4522B; } body.hb-site .sim-pdpt__facts strong, body.hb-site .sim-pdpt__facts .sim-pdpt__note { color: #1B221F; } body.hb-site :is(.sim-pdpt__more, .sim-pdpt__facts a, .sim-pdpt__link) { color: #0F1E3C; font-weight: 700; } body.hb-site :is(.sim-pdpt__more, .sim-pdpt__facts a):hover { color: #C4522B; } body.hb-site .sim-pdpt__callout { background: #F1E5D3; border-left-color: #C4522B; border-radius: 14px; } /* questions: search pill + FAQ accordion with #D9CBB6 rules */ body.hb-site .sim-pdpt__ask { border: 1.5px solid #D9CBB6; background: #FFFFFF; } body.hb-site .sim-pdpt__ask:focus-within { border-color: #A4522F; box-shadow: 0 0 0 3px rgba(164, 82, 47, .16); } body.hb-site .sim-pdpt__ask svg { color: #7A6E62; } body.hb-site .sim-pdpt__input { color: #1B221F; } body.hb-site .sim-pdpt__input::placeholder { color: #7A6E62; } body.hb-site .sim-pdpt__askbtn { background: #A4522F; font-weight: 700; } body.hb-site .sim-pdpt__askbtn:hover { background: #C4522B; } body.hb-site .sim-pdpt__askhint { color: #7A6E62; } body.hb-site .sim-pdpt__askhint strong { color: #A4522F; } body.hb-site .sim-pdpt__qs { border-top: 1px solid #D9CBB6; } body.hb-site .sim-pdpt__q { border-bottom: 1px solid #D9CBB6; } body.hb-site .sim-pdpt__q:last-of-type { border-bottom: 0; } body.hb-site .sim-pdpt__q summary { padding: 18px 0; gap: 16px; } body.hb-site .sim-pdpt__q summary h3 { font-family: 'Albert Sans', system-ui, sans-serif; font-size: 16px; font-weight: 700; letter-spacing: 0; color: #1B221F; } body.hb-site .sim-pdpt__q summary:hover h3 { color: #C4522B; text-decoration: none; } body.hb-site .sim-pdpt__chev { width: auto; height: auto; border: 0; transform: none; transition: none; } body.hb-site .sim-pdpt__chev::before { content: "+"; font-size: 22px; font-weight: 400; line-height: 1; color: #0F1E3C; } body.hb-site .sim-pdpt__q[open] .sim-pdpt__chev { transform: none; } body.hb-site .sim-pdpt__q[open] .sim-pdpt__chev::before { content: "\2212"; } body.hb-site .sim-pdpt__a { padding: 0 40px 18px 0; font-size: 15px; color: #5C5249; text-wrap: pretty; } body.hb-site .sim-pdpt__empty { color: #7A6E62; } @media screen and (max-width: 749px) { body.hb-site .sim-pdpt { padding-top: 56px; } body.hb-site .sim-pdpt__list [role="tab"] { font-size: 16px; padding: 16px 0; } body.hb-site .sim-pdpt__spec th { width: 42%; } body.hb-site .sim-pdpt__a { padding-right: 8px; } } /* stand-alone Most asked questions section (sim-most-asked-questions) */ body.hb-site .sim-maq, body.hb-site [class*="sim-maq"] { color: #1B221F; } /* ---------- 14. How to use = navy "fit walkthrough" band; care list ---------- */ body.hb-site .sim-pdpd--usage { padding-top: 72px; } body.hb-site .sim-pdpd__how { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; align-items: center; background: #0F1E3C; color: #FFFFFF; border-radius: 28px; overflow: hidden; } body.hb-site .sim-pdpd__how:not(:has(.hb-fit__media)) { grid-template-columns: minmax(0, 1fr); } /* design: two equal columns on a 1136px page (photo ~556px); on the wider page the photo keeps that size (5/12) and the steps get the extra width */ @media screen and (min-width: 990px) { body.hb-site .sim-pdpd__how:has(.hb-fit__media) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } } body.hb-site .hb-fit__media { position: relative; align-self: stretch; min-height: 100%; aspect-ratio: 1 / 1; background: #FFFFFF; } body.hb-site .hb-fit__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } body.hb-site .hb-fit__body { padding: 40px 44px 40px 20px; display: flex; flex-direction: column; gap: 18px; min-width: 0; } body.hb-site .sim-pdpd__how:not(:has(.hb-fit__media)) .hb-fit__body { padding: 40px 44px; } body.hb-site .sim-pdpd__how .sim-pdpd__h { color: #FFFFFF; font-size: 28px; } body.hb-site .sim-pdpd__how .sim-pdpd__hl { display: flex; flex-direction: column; gap: 14px; border: 0; max-width: none; margin: 0; } body.hb-site .sim-pdpd__how .sim-pdpd__hl li { display: flex; gap: 14px; align-items: flex-start; padding: 0; border: 0; } body.hb-site .sim-pdpd__how .sim-pdpd__hi--num { width: 26px; height: 26px; border-radius: 50%; background: #C4522B; color: #FFFFFF; font-size: 13px; font-weight: 800; box-shadow: none; } body.hb-site .sim-pdpd__how .sim-pdpd__hx { padding: 0; font-size: 15px; line-height: 1.5; color: #F6E9DA; letter-spacing: 0; } body.hb-site .sim-pdpd__how .sim-pdpd__ht { color: #FFFFFF; } body.hb-site .sim-pdpd__how .sim-pdpd__notes { background: none; padding: 0; border-radius: 0; } body.hb-site .sim-pdpd__how .sim-pdpd__notes h3 { color: #C9B69C; font-size: 12px; letter-spacing: .12em; } body.hb-site .sim-pdpd__how .sim-pdpd__notes ul { color: #C9B69C; font-size: 13px; } @media screen and (min-width: 1100px) { body.hb-site .sim-pdpd--usage .sim-pdpd__how .sim-pdpd__hl { display: flex; } } @media screen and (max-width: 749px) { body.hb-site .sim-pdpd__how { grid-template-columns: minmax(0, 1fr); gap: 0; border-radius: 22px; } body.hb-site .hb-fit__media { aspect-ratio: 4 / 3; } body.hb-site .hb-fit__body, body.hb-site .sim-pdpd__how:not(:has(.hb-fit__media)) .hb-fit__body { padding: 24px 20px 28px; } body.hb-site .sim-pdpd__how .sim-pdpd__h { font-size: 23px; } } /* care: white card, sand header strip, accordion-style rules */ body.hb-site .sim-pdpd__care { margin-top: 40px; gap: 0; background: #FFFFFF; border: 1px solid #E6D9C6; border-radius: 22px; overflow: hidden; max-width: 1100px; } body.hb-site .sim-pdpd__care > .sim-pdpd__h { margin: 0; padding: 12px 24px; background: #F1E5D3; font-family: 'Albert Sans', system-ui, sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #A4522F; line-height: 1.4; } body.hb-site .sim-pdpd__care .sim-pdpd__hl { display: block; max-width: none; border: 0; padding: 4px 24px; } body.hb-site .sim-pdpd__care .sim-pdpd__hl li { padding: 14px 0; border-bottom: 1px solid #EAE0D0; gap: 14px; } body.hb-site .sim-pdpd__care .sim-pdpd__hl li:last-child { border-bottom: 0; } body.hb-site .sim-pdpd__care .sim-pdpd__hi { width: 24px; height: 24px; border-radius: 50%; background: #C4522B; box-shadow: none; } body.hb-site .sim-pdpd__care .sim-pdpd__hi svg { width: 13px; height: 13px; } body.hb-site .sim-pdpd__care .sim-pdpd__hx { padding: 0; font-size: 15px; line-height: 1.5; color: #5C5249; letter-spacing: 0; } body.hb-site .sim-pdpd__care .sim-pdpd__ht { color: #1B221F; } /* ---------- 15. "What to expect when you order" sand band ------------------- */ body.hb-site .hb-expect { margin-top: 72px; } body.hb-site .hb-expect__panel { background: #F1E5D3; border-radius: 28px; padding: 24px 28px; display: flex; flex-direction: column; gap: 18px; } body.hb-site .hb-expect__h { margin: 0; font-family: 'Albert Sans', system-ui, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #0F1E3C; line-height: 1.4; } body.hb-site .hb-expect__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } body.hb-site .hb-expect__list li { display: flex; gap: 12px; align-items: flex-start; margin: 0; } body.hb-site .hb-expect__n { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #A4522F; color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; } body.hb-site .hb-expect__t { display: flex; flex-direction: column; gap: 2px; } body.hb-site .hb-expect__t strong { font-size: 15px; font-weight: 800; color: #0F1E3C; } body.hb-site .hb-expect__t span { font-size: 13px; line-height: 1.45; color: #685C51; text-wrap: pretty; } @media screen and (max-width: 989px) { body.hb-site .hb-expect__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media screen and (max-width: 749px) { body.hb-site .hb-expect { margin-top: 48px; } body.hb-site .hb-expect__panel { padding: 22px 20px; border-radius: 22px; } body.hb-site .hb-expect__list { grid-template-columns: minmax(0, 1fr); gap: 16px; } } /* ---------- 16. Reviews (Judge.me) ------------------------------------------ */ body.hb-site .sim-pdpr { padding-block: 72px 0; } body.hb-site .sim-pdpr .jdgm-widget, body.hb-site .sim-pdpr .jdgm-rev-widg { font-family: 'Albert Sans', system-ui, sans-serif; color: #1B221F; } body.hb-site .sim-pdpr .jdgm-rev-widg { background: #FFFFFF !important; border: 1px solid #E6D9C6 !important; border-radius: 22px; padding: 24px !important; } body.hb-site .sim-pdpr .jdgm-rev-widg__title { font-family: 'Bricolage Grotesque', 'Albert Sans', system-ui, sans-serif !important; font-weight: 800 !important; letter-spacing: -.025em; color: #1B221F !important; font-size: 26px !important; text-align: left !important; } body.hb-site .sim-pdpr :is(.jdgm-rev, .jdgm-rev-widg__header, .jdgm-rev-widg__summary, .jdgm-histogram) { border-color: #E6D9C6 !important; } body.hb-site .sim-pdpr :is(.jdgm-rev__body, .jdgm-rev__content, .jdgm-rev__timestamp) { color: #5C5249 !important; } body.hb-site .sim-pdpr :is(.jdgm-rev__author, .jdgm-rev__title) { color: #1B221F !important; } body.hb-site .sim-pdpr :is(.jdgm-star, .jdgm-histogram__star) { color: #C4522B !important; } body.hb-site .sim-pdpr .jdgm-histogram__frequency, body.hb-site .sim-pdpr .jdgm-histogram__bar { background: #F1E5D3 !important; border-radius: 999px; } body.hb-site .sim-pdpr .jdgm-histogram__bar-content { background: #C4522B !important; border-radius: 999px; } body.hb-site .sim-pdpr :is(.jdgm-write-rev-link, .jdgm-ask-question-btn, .jdgm-btn, .jdgm-paginate__page.jdgm-curt) { background: #A4522F !important; border-color: #A4522F !important; color: #FFFFFF !important; border-radius: 999px !important; } body.hb-site .sim-pdpr :is(.jdgm-write-rev-link, .jdgm-btn):hover { background: #C4522B !important; border-color: #C4522B !important; } body.hb-site .sim-pdpr :is(.jdgm-form input, .jdgm-form textarea) { border-color: #D9CBB6 !important; border-radius: 12px !important; background: #FFFFFF !important; } body.hb-site .sim-pdpr .jdgm-rev__pics img, body.hb-site .sim-pdpr .jdgm-rev__pic-img { border-radius: 14px; } /* Judge.me's current widget ("jm-" components) sets its colours as inline custom properties on the widget element; !important here outranks those (not the data). */ body.hb-site [style*="--jm-"] { --jm-review-widget-star-and-histogram-color: #C4522B !important; --jm-review-widget-button-color: #A4522F !important; --jm-review-widget-button-text-color: #FFFFFF !important; --jm-widget-primary-color: #A4522F !important; --jm-review-widget-text-color: #1B221F !important; --jm-review-widget-lighter-text-color: #7A6E62 !important; --jm-review-widget-form-button-color: #A4522F !important; --jm-review-widget-form-text-color: #1B221F !important; --jm-review-widget-form-field-background-color: #FFFFFF !important; } body.hb-site #sim-pdp-reviews .jdgm-widget { max-width: none !important; } body.hb-site #sim-pdp-reviews .jm-review-widget { font-family: 'Albert Sans', system-ui, sans-serif; color: #1B221F; } body.hb-site #sim-pdp-reviews .jm-review-widget p.jm-text[class*="minimal-header"] { font-family: 'Bricolage Grotesque', 'Albert Sans', system-ui, sans-serif; font-weight: 800; letter-spacing: -.025em; font-size: 26px; line-height: 1.15; color: #1B221F; } body.hb-site #sim-pdp-reviews .jm-button { border-radius: 999px; font-weight: 700; } body.hb-site #sim-pdp-reviews .jm-button--secondary { border-color: #D9CBB6; background: #FFFFFF; color: #1B221F; } body.hb-site #sim-pdp-reviews [class*="jm-review-widget__review"], body.hb-site #sim-pdp-reviews hr { border-color: #E6D9C6; } body.hb-site #sim-pdp-reviews img { border-radius: 14px; } /* Judge.me star badge under the title */ body.hb-site .jdgm-prev-badge { color: #5C5249; } body.hb-site .jdgm-prev-badge .jdgm-star { color: #C4522B !important; } /* ---------- 17. Related products ("You may also like", Dawn) ---------------- */ body.hb-site .related-products { padding-top: 72px; } body.hb-site .related-products .related-products__heading { margin-bottom: 20px; } body.hb-site .related-products .card__heading { font-family: 'Albert Sans', system-ui, sans-serif; letter-spacing: 0; } body.hb-site .related-products .price { font-size: 15px; letter-spacing: 0; } body.hb-site .related-products .card__information { gap: 6px; } body.hb-site .related-products .card-wrapper .card { background: #FFFFFF; border: 1px solid #E6D9C6; border-radius: 22px; overflow: hidden; } body.hb-site .related-products .card-wrapper .card .card__inner { background: #F1E5D3; border-radius: 0; } body.hb-site .related-products .card-wrapper .card .card__inner .media { background: #F1E5D3; } body.hb-site .related-products .card-wrapper .card .card__inner img { mix-blend-mode: multiply; object-fit: contain; } body.hb-site .related-products .card-wrapper .card .card__content { padding: 12px 14px 14px; } body.hb-site .related-products .card__heading, body.hb-site .related-products .card__heading a { font-size: 14px; font-weight: 700; color: #1B221F; line-height: 1.35; text-decoration: none; } body.hb-site .related-products .card__heading a:hover { color: #C4522B; } body.hb-site .related-products .price, body.hb-site .related-products .price-item { color: #0F1E3C; font-weight: 800; } body.hb-site .related-products .card .badge { border-radius: 999px; } /* ---------- 18. Legacy PDP bits (badges, spec strip) in the new look ------- */ body.hb-site .sim-pdp-badges__pill { background: #FFFFFF; color: #0F1E3C; border: 1px solid #E6D9C6; border-radius: 999px; } body.hb-site .sim-pdp-specstrip { border: 1px solid #E6D9C6; border-radius: 22px; background: #FFFFFF; overflow: hidden; } body.hb-site .sim-pdp-specstrip__col { border-color: #E6D9C6; } body.hb-site .sim-pdp-specstrip dt { font-size: 11px; font-weight: 600; color: #7A6E62; } body.hb-site .sim-pdp-specstrip dd { font-size: 13px; font-weight: 800; color: #0F1E3C; } /* ---------- 19. Rhythm: sections below the buy area ------------------------- */ body.hb-site .sim-pdp-details-section, body.hb-site .sim-pdp-pairs-section, body.hb-site .sim-pdp-tabs-section { margin-top: 0; } body.hb-site main#MainContent > .shopify-section:last-child { padding-bottom: 96px; } @media screen and (max-width: 749px) { body.hb-site .sim-pdpd { padding-top: 56px; } body.hb-site .sim-pdpd--summary { padding-top: 48px; } body.hb-site .sim-pdpd--summary .sim-pdpd__hl { gap: 10px; } body.hb-site .sim-pdpd--summary .sim-pdpd__hl li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; padding: 16px; } body.hb-site .sim-pdpd--summary .sim-pdpd__hi { width: 40px; height: 40px; border-radius: 12px; } body.hb-site .sim-pdpd--summary .sim-pdpd__ht { font-size: 15px; margin-bottom: 4px; } body.hb-site .sim-pdpd__specs { padding: 18px 18px 6px; } body.hb-site .sim-pdpd__card { padding: 18px 18px 20px; } body.hb-site .sim-pdpd__sh { margin: -18px -18px 14px; padding: 11px 18px; } body.hb-site .sim-pdpd__care .sim-pdpd__hl { padding: 2px 18px; } body.hb-site .sim-pdpd__care > .sim-pdpd__h { padding: 11px 18px; } body.hb-site main#MainContent > .shopify-section:last-child { padding-bottom: 64px; } } /* ===== 2026-10-08 mobile first screen (from the Exact-Fixes review; rating placeholder, delivery-date script and title shortening deliberately NOT adopted) ===== */ /* ===================================================================== simlakhola.com, mobile product page "first screen" patch Where: Online Store > Themes > (live theme) > ... > Edit code > assets/sim-hb-pdp.css -> paste at the very END of the file (or put it in a new asset, e.g. assets/sim-pdp-mobile-fix.css, and load it from sections/main-product.liquid with {{ 'sim-pdp-mobile-fix.css' | asset_url | stylesheet_tag }} ). Scope: phones only (<=749px), main product section only. Tested 2026-10-08 ET on iPhone 13 (390x664) against Dawn 15.4.1 + the sim-pdp-split layout (vest, tactical, Kolossus templates). Result: gallery -> title -> rating -> price + delivery + Add to cart, all inside the first 664px. Variant pickers follow right below. ===================================================================== */ @media screen and (max-width: 749px) { /* 0. Section top padding 27px -> 8px (theme section setting "Top padding"; this overrides it on phones only) */ body product-info[id^="MainProduct-"] { padding-top: 8px !important; } /* 1. Remove low-value rows above the fold (breadcrumb, brand eyebrow, rule). The breadcrumb stays in the page for SEO only if you keep BreadcrumbList JSON-LD; visually it is 38px of dead space and three tiny tap targets. */ body product-info[id^="MainProduct-"] .sim-pdp-crumbs, body product-info[id^="MainProduct-"] .sim-pdp-eyebrow, body product-info[id^="MainProduct-"] .sim-pdp-rule { display: none !important; } /* 2. New mobile order of the flex items inside .product (the info column uses display:contents, so every block is a flex item). */ body product-info[id^="MainProduct-"] .product > .product__media-wrapper { order: -10 !important; } /* 2026-10-13 (owner): title back ABOVE the photo, as before the 10/8 reorder (was order -9, below the media). */ body product-info[id^="MainProduct-"] .product .product__title { order: -11 !important; } body product-info[id^="MainProduct-"] .product [id$="__judgeme_preview_badge"] { order: -8 !important; } body product-info[id^="MainProduct-"] .product .sim-pdp-card { order: -7 !important; } body product-info[id^="MainProduct-"] .product variant-selects { order: -6 !important; } body product-info[id^="MainProduct-"] .product .sim-pdp-subtitle { order: -5 !important; } /* 3. Gallery: swipe + "1 / 15" counter already exist, so the 84px thumbnail strip ("+11 more photos") is dropped on phones. */ body product-info[id^="MainProduct-"] .product__media-wrapper .thumbnail-slider { display: none !important; } body product-info[id^="MainProduct-"] .product__media-wrapper { margin-bottom: 0 !important; } /* 4. Title: smaller type on phones, and the FULL title is always shown (owner 2026-10-08: no 2-line trim). */ body product-info[id^="MainProduct-"] .product__title { margin: 0 0 12px !important; width: 100%; } body product-info[id^="MainProduct-"] .product__title h1 { font-size: 1.25rem !important; font-weight: 700 !important; line-height: 1.3 !important; margin: 0 !important; overflow-wrap: anywhere; } /* 5. Rating row: Judge.me preview badge when there are real reviews (hidden while there are none). */ body product-info[id^="MainProduct-"] [id$="__judgeme_preview_badge"] { width: 100%; margin: 4px 0 0; } /* 6. Buy card: compact. Price + "Camo · S" on one line, delivery line, then quantity stepper and Add to cart side by side. */ body product-info[id^="MainProduct-"] .sim-pdp-card { margin-top: 8px !important; padding: 0 !important; width: 100%; } body product-info[id^="MainProduct-"] .sim-pdp-card__head { padding: 10px 14px 0 !important; display: grid !important; grid-template-columns: 1fr auto; align-items: center; column-gap: 10px; row-gap: 4px; } body product-info[id^="MainProduct-"] .sim-pdp-card__tag { display: none !important; } body product-info[id^="MainProduct-"] .sim-pdp-offer { grid-column: 1; grid-row: 1; margin: 0 !important; } body product-info[id^="MainProduct-"] .sim-pdp-card__pick { grid-column: 2; grid-row: 1; align-self: start; margin: 10px 0 0 !important; font-size: 13px; font-weight: 600; color: #5b6072; max-width: 42vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* long size names ("Large (20"-22" from collar...") */ } body product-info[id^="MainProduct-"] .sim-pdp-offer { min-width: 0; } body product-info[id^="MainProduct-"] .sim-pdp-delivery { grid-column: 1 / -1; margin: 0 !important; padding: 6px 0 0 !important; min-height: 0 !important; } body product-info[id^="MainProduct-"] .sim-pdp-delivery__ic { display: none !important; } body product-info[id^="MainProduct-"] .sim-pdp-delivery__main { font-size: 13px !important; line-height: 1.35 !important; margin: 0 !important; } body product-info[id^="MainProduct-"] .sim-pdp-card__body { padding: 10px 14px 14px !important; margin-top: 0 !important; } body product-info[id^="MainProduct-"] .sim-pdp-delivery .sim-eta-sub { display: none !important; } /* "Ships in 1-2 business days" stays on desktop */ body product-info[id^="MainProduct-"] .sim-pdp-card .sim-buy__row { display: grid !important; grid-template-columns: 116px 1fr; gap: 8px; align-items: stretch; } body product-info[id^="MainProduct-"] .sim-pdp-card .sim-buy__qty { margin: 0 !important; width: auto !important; } body product-info[id^="MainProduct-"] .sim-pdp-card .sim-buy__qty .quantity { width: 116px !important; min-height: 48px; } body product-info[id^="MainProduct-"] .sim-pdp-card .sim-buy__qty .quantity__button { width: 34px !important; } body product-info[id^="MainProduct-"] .sim-pdp-card .product-form__submit { margin: 0 !important; min-height: 48px; } body product-info[id^="MainProduct-"] .sim-pdp-card .shopify-payment-button { margin-top: 8px !important; } /* trust list: 3 compact columns instead of 3 stacked rows (140px -> ~52px) */ body product-info[id^="MainProduct-"] .sim-pdp-card .sim-pdp-trust { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px !important; padding: 0 !important; } body product-info[id^="MainProduct-"] .sim-pdp-card .sim-pdp-trust__card { padding: 0 !important; margin: 0 !important; border: 0 !important; } body product-info[id^="MainProduct-"] .sim-pdp-card .sim-pdp-trust__in { display: block !important; text-align: center; font-size: 11.5px; line-height: 1.3; } body product-info[id^="MainProduct-"] .sim-pdp-card .sim-pdp-trust__in svg { display: block; margin: 0 auto 2px; } body product-info[id^="MainProduct-"] .sim-pdp-card .sim-pdp-trust__in span { display: none !important; } /* 7. "Pay over time ... over $35" banner: hidden whenever the selected price is under $35 (class set by pdp-mobile.js; the Liquid fix in exact-fixes.md removes it server-side instead). Applies at every width. */ } /* 8. Sold-out / unavailable sizes and colours: make them unmistakable (all widths). The theme rule (sim-hb-pdp.css:737) only greys the text and dashes the border. */ body.hb-site product-info[id^="MainProduct-"] variant-selects .product-form__input--pill input[type=radio].disabled + label, body.hb-site product-info[id^="MainProduct-"] variant-selects .product-form__input--pill input[type=radio]:disabled + label { color: #9a9087 !important; background: #f4f1ec !important; border-style: dashed !important; text-decoration: line-through; text-decoration-thickness: 1.5px; opacity: .75; } body.hb-site product-info[id^="MainProduct-"] variant-selects .product-form__input--pill input[type=radio].disabled + label::after, body.hb-site product-info[id^="MainProduct-"] variant-selects .product-form__input--pill input[type=radio]:disabled + label::after { content: "Sold out"; display: inline-block; width: 100%; /* inline-block: not struck through by the label's line-through */ font-size: 10.5px; font-weight: 700; letter-spacing: .02em; text-decoration: none; color: #a4522f; margin-top: 1px; } /* ===================================================================== 2026-10-13 MOBILE BUY AREA REDESIGN (Claude Design "PDP Mobile Buy Area", option 2b) Phones only. Active only while html.sim-pk-ready is set (snippets/sim-pdp-split-open.liquid + assets/sim-pdp-pickers.js). To roll back: delete the two lines in sim-pdp-split-open.liquid, or this block. Flow: title > photo > price group (price + N% OFF tag, list price + You save $X, pay-in-4, shipping) > compact option buttons > qty + Add to cart > Buy with Shop > delivery estimate > trust. One left edge, 8/12/16/24px spacing, 12px radius on everything in the buy area. ===================================================================== */ @media screen and (max-width: 749px) { /* The card dissolves: each piece becomes its own flat item of .product (ordered below). */ html.sim-pk-ready body product-info[id^="MainProduct-"] :is(.sim-pdp-card, .sim-pdp-card__head, .sim-pdp-card__body) { display: contents !important; } html.sim-pk-ready body product-info[id^="MainProduct-"] :is(.sim-pdp-card__tag, .sim-pdp-card__pick, .sim-pdp-simi) { display: none !important; } /* Order (all inside .product): title, photo, price group, shipping, rating, options, buy, estimate, trust */ html.sim-pk-ready body product-info[id^="MainProduct-"] .product .product__title { order: -20 !important; } html.sim-pk-ready body product-info[id^="MainProduct-"] .product > .product__media-wrapper { order: -19 !important; } html.sim-pk-ready body product-info[id^="MainProduct-"] .product .sim-pdp-offer { order: -18 !important; } html.sim-pk-ready body product-info[id^="MainProduct-"] .product .sim-pdp-delivery { order: -17 !important; } html.sim-pk-ready body product-info[id^="MainProduct-"] .product [id$="__judgeme_preview_badge"] { order: -16 !important; } html.sim-pk-ready body product-info[id^="MainProduct-"] .product variant-selects { order: -15 !important; } html.sim-pk-ready body product-info[id^="MainProduct-"] .product .sim-pdp-card__body > div { order: -14 !important; } html.sim-pk-ready body product-info[id^="MainProduct-"] .product .sim-eta { order: -13 !important; } html.sim-pk-ready body product-info[id^="MainProduct-"] .product .sim-pdp-trust { order: -12 !important; } html.sim-pk-ready body product-info[id^="MainProduct-"] .product .sim-pdp-subtitle { order: -11 !important; } html.sim-pk-ready body product-info[id^="MainProduct-"] .product :is(.sim-pdp-offer, .sim-pdp-delivery, variant-selects, .sim-eta, .sim-pdp-trust, .sim-pdp-card__body > div) { width: 100% !important; flex: 0 0 auto; min-width: 0; } /* Photo: a calmer height so the whole buy area fits the first screen; the whole picture still shows (contain). */ html.sim-pk-ready body product-info[id^="MainProduct-"] .product__media-wrapper .product-media-container { height: clamp(200px, calc(100svh - 600px), 330px) !important; max-height: none !important; } html.sim-pk-ready body product-info[id^="MainProduct-"] .product__media-wrapper .product-media-container :is(modal-opener, .product__media) { height: 100% !important; padding: 0 !important; } html.sim-pk-ready body product-info[id^="MainProduct-"] .product__media-wrapper .product-media-container img { object-fit: contain !important; } /* Title: closer to the header, tidy gap to the photo. */ html.sim-pk-ready body product-info[id^="MainProduct-"] .product__title { margin: 0 0 12px !important; } /* Price group: flat on the page, one left edge. */ html.sim-pk-ready body product-info[id^="MainProduct-"] .sim-pdp-offer { margin: 14px 0 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; } /* Shop Pay installments: [shop] 4 interest-free payments of $X (i) -- always ONE line */ html.sim-pk-ready body product-info[id^="MainProduct-"] .sim-pdp-pay4--chip { display: flex !important; flex-wrap: nowrap !important; align-items: center; gap: 8px !important; margin: 10px 0 0 !important; padding: 0; font-size: 13.5px !important; line-height: 1.3; color: #5C5249; white-space: nowrap; } html.sim-pk-ready body product-info[id^="MainProduct-"] .sim-pdp-pay4--chip .sim-pdp-pay4__chip { display: inline-flex !important; flex: none; align-items: center; padding: 2px 8px; border-radius: 6px; background: #5A31F4; color: #FFFFFF; font-size: 12px; font-weight: 800; letter-spacing: .01em; line-height: 1.4; } html.sim-pk-ready body product-info[id^="MainProduct-"] .sim-pdp-pay4--chip .sim-pdp-pay4__rest { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } html.sim-pk-ready body product-info[id^="MainProduct-"] .sim-pdp-pay4--chip .sim-pdp-pay4__amt { flex: none; color: #0F1E3C; font-weight: 800; } html.sim-pk-ready body product-info[id^="MainProduct-"] .sim-pdp-pay4--chip > button, html.sim-pk-ready body product-info[id^="MainProduct-"] .sim-pdp-pay4--chip > a { flex: none; margin: 0; } /* Shipping: ONE strip in two states, same size / corners / left edge, so switching variants never shifts the layout. Free = green strip (styled in the buy-box snippet): cream check circle, "FREE shipping on this item", then the delivery line. Not free = white strip with a sand border (white stands out on the cream page): GREEN truck circle, bold "Delivers in N business days" FIRST, then "$3.99 shipping . free over $Y" (Y = the threshold setting). */ html.sim-pk-ready body product-info[id^="MainProduct-"] .sim-pdp-delivery { position: relative; display: flex !important; align-items: center; gap: 12px; box-sizing: border-box; height: 58px; margin: 12px 0 0 !important; padding: 10px 12px !important; border-radius: 12px !important; overflow: hidden; } html.sim-pk-ready body product-info[id^="MainProduct-"] .sim-pdp-delivery.sim-pdp-delivery--free { border: 1px solid transparent !important; } html.sim-pk-ready body product-info[id^="MainProduct-"] .sim-pdp-delivery:not(.sim-pdp-delivery--free) { background: #FFFFFF !important; border: 1px solid #E0D1B8 !important; } html.sim-pk-ready body product-info[id^="MainProduct-"] .sim-pdp-delivery:not(.sim-pdp-delivery--free) .sim-pdp-delivery__ic { display: flex !important; flex: none; align-items: center; justify-content: center; width: 32px !important; height: 32px !important; margin: 0 !important; border-radius: 999px; background: #1B6B3A !important; color: #FBF6EE !important; } html.sim-pk-ready body product-info[id^="MainProduct-"] .sim-pdp-delivery:not(.sim-pdp-delivery--free) .sim-pdp-delivery__ic svg { width: 18px !important; height: 18px !important; } html.sim-pk-ready body product-info[id^="MainProduct-"] .sim-pdp-delivery:not(.sim-pdp-delivery--free) .sim-pdp-delivery__body { display: flex; flex-direction: column; min-width: 0; } html.sim-pk-ready body product-info[id^="MainProduct-"] .sim-pdp-delivery:not(.sim-pdp-delivery--free) .sim-pdp-delivery__main { order: -1; margin: 0 !important; font-size: clamp(10.5px, calc((100vw - 102px) / 23.5), 13px) !important; font-weight: 500 !important; line-height: 1.3 !important; color: #3F4650 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html.sim-pk-ready body product-info[id^="MainProduct-"] .sim-pdp-delivery:not(.sim-pdp-delivery--free) .sim-pdp-delivery__main strong { font-size: 1.08em; font-weight: 800 !important; color: #0F1E3C !important; } html.sim-pk-ready body product-info[id^="MainProduct-"] .sim-pdp-delivery:not(.sim-pdp-delivery--free) .sim-pdp-delivery__conf { order: 1; margin: 2px 0 0 !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1.3 !important; color: #5C5249 !important; } html.sim-pk-ready body product-info[id^="MainProduct-"] .sim-pdp-delivery:not(.sim-pdp-delivery--free) .sim-pdp-delivery__conf :is(strong, b) { font-weight: 700 !important; color: #0F1E3C !important; } /* Option rows (built by sim-pdp-pickers.js): Size chips, then Color chips. Each = legend line + one scrolling chip row. */ html.sim-pk-ready body product-info[id^="MainProduct-"] variant-selects { display: flex !important; flex-direction: column; gap: 12px; margin: 14px 0 0 !important; padding: 0 !important; } /* Shopify swaps the options by inserting the new set and hiding the old one with an inline display:none for 0.5s. Our flex layout above must not override that, or the old and new color/size rows show together during the swap. */ html.sim-pk-ready body product-info[id^="MainProduct-"] variant-selects[style*="display: none"], html.sim-pk-ready body product-info[id^="MainProduct-"] variant-selects[style*="display:none"] { display: none !important; } html.sim-pk-ready body product-info[id^="MainProduct-"] variant-selects fieldset.sim-pk-fs { display: block !important; flex: 0 0 auto !important; width: 100%; min-width: 0; margin: 0 !important; padding: 0 !important; border: 0 !important; } html.sim-pk-ready body product-info[id^="MainProduct-"] variant-selects fieldset.sim-pk-fs legend { float: none; display: flex; align-items: baseline; width: 100%; box-sizing: border-box; margin: 0; padding: 0 0 8px; font-size: 14.5px; font-weight: 800; color: #0F1E3C; line-height: 1.2; } html.sim-pk-ready body product-info[id^="MainProduct-"] variant-selects fieldset.sim-pk-fs legend .sim-lg-val { display: none; } html.sim-pk-ready body product-info[id^="MainProduct-"] variant-selects fieldset.sim-pk-fs legend .sim-pk-cur { flex: 1 1 0; font-weight: 500; color: #3F4650; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.sim-pk-ready body product-info[id^="MainProduct-"] variant-selects fieldset.sim-pk-fs legend .sim-sclink { position: static !important; float: none !important; margin: 0 0 0 auto !important; padding-left: 12px; font-size: 13px; font-weight: 800; white-space: nowrap; flex: none; } html.sim-pk-ready body product-info[id^="MainProduct-"] variant-selects fieldset.sim-pk-sizefs { order: -1; } html.sim-pk-ready body product-info[id^="MainProduct-"] variant-selects fieldset.sim-pk-fs legend .sim-pk-cur { order: 1; } html.sim-pk-ready body product-info[id^="MainProduct-"] variant-selects fieldset.sim-pk-fs legend .sim-sclink { order: 2; } html.sim-pk-ready .sim-pk-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 4px; margin: 0 -2px; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } html.sim-pk-ready .sim-pk-chips::-webkit-scrollbar { display: none; } html.sim-pk-ready .sim-pk-chips--more { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); } html.sim-pk-ready body product-info[id^="MainProduct-"] .sim-pk-chips label { flex: 0 0 auto; display: flex !important; flex-direction: column; align-items: center; justify-content: center; min-width: 84px; max-width: 78vw; min-height: 48px; margin: 0 !important; padding: 7px 14px !important; border: 1.5px solid #D9CBB6 !important; border-radius: 12px !important; background: #FFFFFF !important; color: #0F1E3C !important; font-size: 15px; font-weight: 800; line-height: 1.2; scroll-snap-align: start; text-align: center; } html.sim-pk-ready body product-info[id^="MainProduct-"] .sim-pk-chips label small { margin: 1px 0 0; color: #5C5249 !important; font-size: 11.5px; font-weight: 500; white-space: nowrap; } html.sim-pk-ready body product-info[id^="MainProduct-"] .sim-pk-chips input:checked + label { background: #0F1E3C !important; border-color: #0F1E3C !important; color: #FFFFFF !important; } html.sim-pk-ready body product-info[id^="MainProduct-"] .sim-pk-chips input:checked + label small { color: #D6DCE8 !important; } html.sim-pk-ready body product-info[id^="MainProduct-"] .sim-pk-chips input:focus-visible + label { outline: 3px solid #0F1E3C; outline-offset: 2px; } /* Color chips: one line, round dot + name. */ html.sim-pk-ready body product-info[id^="MainProduct-"] .sim-pk-color .sim-pk-chips label { flex-direction: row; gap: 8px; min-width: 0; min-height: 44px; padding: 6px 14px !important; white-space: nowrap; } html.sim-pk-ready .sim-pk-dot { flex: none; width: 18px; height: 18px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgba(15, 30, 60, .28); } html.sim-pk-ready body product-info[id^="MainProduct-"] .sim-pk-chips input:checked + label .sim-pk-dot { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7); } /* Quantity + Add to cart: one 52px row, 12px radius. */ html.sim-pk-ready body product-info[id^="MainProduct-"] .sim-pdp-card__body > div { margin: 14px 0 0 !important; padding: 0 !important; border: 0 !important; } html.sim-pk-ready body product-info[id^="MainProduct-"] .sim-pdp-card .sim-buy__qty .quantity { border-radius: 12px !important; min-height: 52px !important; } html.sim-pk-ready body product-info[id^="MainProduct-"] .sim-pdp-card .product-form__submit { border-radius: 12px !important; min-height: 52px !important; } html.sim-pk-ready body product-info[id^="MainProduct-"] product-form { --shopify-accelerated-checkout-button-border-radius: 12px; --shopify-accelerated-checkout-button-block-size: 52px; } } } /* 2026-10-13 No photo flicker when a size/color is picked. Shopify swaps in NEW gallery slides on every variant change, and each new slide carried the theme's scroll-in fade (opacity .01 -> 1 over .6s), so the photo vanished and faded back every time. The gallery slides are always visible and never animate in. */ body.hb-site .product__media-wrapper .product__media-item, body.hb-site .product__media-wrapper .product__media-item.scroll-trigger, body.hb-site .product__media-wrapper .product__media-item.animate--fade-in, body.hb-site .product__media-wrapper .product__media-item.scroll-trigger--offscreen { animation: none !important; opacity: 1 !important; transform: none !important; transition: none !important; } /* ===================================================================== 2026-10-13 PHONE: delivery estimate + trust row = ONE confined card (Claude Design "PDP Mobile Buy Area" > "Delivery + trust in one card", option 4a). Sand card with ESTIMATED DELIVERY label, headline, 3-icon timeline (navy cart > terracotta box > green house), white 3-column trust footer joined to the card, 24px above / 40px below. Phones only, only while html.sim-pk-ready. ===================================================================== */ @media screen and (max-width: 749px) { html.sim-pk-ready body product-info[id^="MainProduct-"] .sim-pdp-card__body > div product-form { margin-bottom: 0 !important; } html.sim-pk-ready body product-info[id^="MainProduct-"] .sim-eta { margin: 24px 0 0 !important; padding: 20px 20px 22px !important; border: 1px solid #E0D1B8 !important; border-radius: 12px 12px 0 0 !important; background: #F3E8D6 !important; box-shadow: none !important; } html.sim-pk-ready body product-info[id^="MainProduct-"] .sim-eta:not(:has(~ .sim-pdp-trust)) { border-radius: 12px !important; margin-bottom: 30px !important; } html.sim-pk-ready body product-info[id^="MainProduct-"] .sim-eta__head { display: block !important; } html.sim-pk-ready body product-info[id^="MainProduct-"] .sim-eta__ic { display: none !important; } html.sim-pk-ready body product-info[id^="MainProduct-"] .sim-eta__k { font-size: 12px !important; font-weight: 800 !important; letter-spacing: .1em !important; color: #7A6E62 !important; } html.sim-pk-ready body product-info[id^="MainProduct-"] .sim-eta__track { position: relative; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; margin: 18px 0 0 !important; } html.sim-pk-ready body product-info[id^="MainProduct-"] .sim-eta__track::before { content: "" !important; position: absolute !important; top: 12px !important; height: 3px !important; border-radius: 2px !important; left: 38px !important; right: calc(50% + 38px) !important; background: linear-gradient(90deg, #0F1E3C, #C4522B) !important; } html.sim-pk-ready body product-info[id^="MainProduct-"] .sim-eta__track::after { content: ""; position: absolute; top: 12px; height: 3px; border-radius: 2px; left: calc(50% + 38px); right: 38px; background: linear-gradient(90deg, #C4522B, #1B6B3A); } html.sim-pk-ready body product-info[id^="MainProduct-"] .sim-eta__step { display: flex !important; flex-direction: column; align-items: center; text-align: center; min-width: 0; font-size: 14px !important; } html.sim-pk-ready body product-info[id^="MainProduct-"] .sim-eta__step:first-child { align-items: flex-start; text-align: left; } html.sim-pk-ready body product-info[id^="MainProduct-"] .sim-eta__step--end { align-items: flex-end; text-align: right; } html.sim-pk-ready body product-info[id^="MainProduct-"] .sim-eta__step i { width: 28px !important; height: 28px !important; margin: 0 0 10px !important; border: 0 !important; border-radius: 50% !important; background-color: #C4522B !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 15px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8l-9-5-9 5v8l9 5 9-5V8z'/%3E%3Cpath d='M3 8l9 5 9-5M12 13v8'/%3E%3C/svg%3E") !important; } html.sim-pk-ready body product-info[id^="MainProduct-"] .sim-eta__step--on i { background-color: #0F1E3C !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.3'/%3E%3Ccircle cx='18' cy='20' r='1.3'/%3E%3Cpath d='M2 3h3l2.4 11.2a2 2 0 0 0 2 1.6h8.2a2 2 0 0 0 2-1.5L21 8H6'/%3E%3C/svg%3E") !important; } html.sim-pk-ready body product-info[id^="MainProduct-"] .sim-eta__step--end i { background-color: #1B6B3A !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-8 9 8'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3C/svg%3E") !important; } html.sim-pk-ready body product-info[id^="MainProduct-"] .sim-eta__step b { font-size: 13.5px !important; font-weight: 700 !important; color: #C4522B !important; } html.sim-pk-ready body product-info[id^="MainProduct-"] .sim-eta__step--on b { color: #0F1E3C !important; } html.sim-pk-ready body product-info[id^="MainProduct-"] .sim-eta__step--end b { color: #1B6B3A !important; } html.sim-pk-ready body product-info[id^="MainProduct-"] .sim-eta__step span { margin-top: 2px; font-size: 14px !important; font-weight: 800 !important; color: #0F1E3C !important; white-space: nowrap; } /* Trust strip: white footer joined to the card (or a standalone bordered strip when there is no estimate). */ html.sim-pk-ready body product-info[id^="MainProduct-"] .sim-pdp-trust { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; margin: 24px 0 30px !important; padding: 0 !important; border: 1px solid #E3D6C0 !important; border-radius: 12px !important; background: #FFFFFF !important; overflow: hidden; list-style: none; } html.sim-pk-ready body product-info[id^="MainProduct-"] .sim-eta ~ .sim-pdp-trust { margin-top: 0 !important; border-top: 0 !important; border-radius: 0 0 12px 12px !important; } html.sim-pk-ready body product-info[id^="MainProduct-"] .sim-pdp-trust__card { margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; } html.sim-pk-ready body product-info[id^="MainProduct-"] .sim-pdp-trust__card + .sim-pdp-trust__card { border-left: 1px solid #EBE0CD !important; } html.sim-pk-ready body product-info[id^="MainProduct-"] .sim-pdp-trust__in { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 100%; padding: 14px 6px !important; text-align: center; color: #0F1E3C; text-decoration: none; } html.sim-pk-ready body product-info[id^="MainProduct-"] .sim-pdp-trust__in svg { width: 22px !important; height: 22px !important; margin: 0 !important; } html.sim-pk-ready body product-info[id^="MainProduct-"] .sim-pdp-trust__in strong { margin: 0 !important; font-size: 12.5px !important; font-weight: 700 !important; line-height: 1.2 !important; color: #0F1E3C; } html.sim-pk-ready body product-info[id^="MainProduct-"] .sim-pdp-trust__in span { display: none !important; } }