/* ============================================================================= ds-buy-panel.css — redesigned PDP top panel. dermastore.se only. Loaded from catalog/controller/product/product.php, inside the $ds_buy_panel gate, so it only ever reaches a product page on a gated host. That is why the two un-namespaced rules at the bottom of this file (body .NWA_popover and the mobile body padding) are safe: they cannot reach any other page. SPECIFICITY, NOT ORDER. common/header is a child controller, rendered AFTER the product controller body, so everything this file adds lands BEFORE wossy_stylesheet.css in the . Every rule here therefore carries .dsbp as an ancestor or compound — two-class selectors (0,2,0) beat the theme's single-class rules (0,1,0) regardless of source order. Never add a bare element selector to this file; it will lose. The panel deliberately avoids .product-info, .top_product_panel, .gallery-product and .price. Those are the hooks the legacy float layout (wossy_responsive.css:119-126, :297-306) and the old fixed mobile price bar (wossy_responsive_upgrades.css:173-182) hang off. Not using the names is what keeps them from matching. Type: Madera (the brand UI face, already loaded for this host via wossy-dark/template/common/header.tpl:361-375) for everything except the display role — title, price, tagline — which uses Bodoni Moda below. ========================================================================== */ /* PATHS MUST BE RELATIVE, NOT ABSOLUTE. Nitro combines this file into /assets/style/.css and rewrites url()s by prefixing this stylesheet's own directory. It does that to absolute paths too — it strips the leading slash — so url('/fonts/x.woff2') becomes catalog/view/wossy_root/stylesheet/fonts/x.woff2 and 404s. Relative paths survive the rewrite intact. Verified against the live combined bundle. From here, ../../../../ is the web root and ../../ is catalog/view/. */ @font-face { font-family: 'Bodoni Moda DS'; src: url('../../../../fonts/ds-buy-panel/bodoni-moda-500-latin.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Bodoni Moda DS'; src: url('../../../../fonts/ds-buy-panel/bodoni-moda-500-latin-ext.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } .dsbp { /* Warm neutrals */ --dsbp-paper: #faf7f2; --dsbp-surface: #fffdfa; --dsbp-ink: #241e18; --dsbp-ink-soft: #4a4038; --dsbp-muted: #7a6e62; --dsbp-rule: #f3f9f6; --dsbp-chip: #fcfefcb0; /* The green, warmed to sit on bone paper */ --dsbp-green: #21b393; /* radiant: CTA hover shadow only */ --dsbp-green-dark: #17876f; /* stars, selected size, text on tints */ --dsbp-green-tint: #fcfefcb0; /* delivery, sample */ --dsbp-green-muted: #f9fafa; /* unselected selectors, quantity */ --dsbp-green-line: #cfdcd5; --dsbp-cta: #241e18; /* the only high-contrast fill */ --dsbp-cta-text: #faf7f2; /* Brand link — dermastore / swedishface purple. you.se overrides these in you_extras.css to --h1-gradient-from / --h1-gradient-to. */ --dsbp-brand-from: #534089; --dsbp-brand-to: #597cef; --dsbp-amber: #8a5210; --dsbp-amber-dot: #c08420; --dsbp-mark-h: 20px; --dsbp-cell-justify: center; --dsbp-cell-justify-first: flex-start; --dsbp-cell-justify-last: flex-end; --dsbp-cell-pad: 13px; --dsbp-display: 'Bodoni Moda DS', Georgia, 'Times New Roman', serif; } /* Corner radius 0 everywhere, no shadows except the CTA hover. */ .dsbp, .dsbp * { box-sizing: border-box; border-radius: 0; } .dsbp { display: grid; grid-template-columns: minmax(0, 1fr) clamp(400px, 60%, 700px); gap: 20px; align-items: start; background: none; color: var(--dsbp-ink); font-family: inherit; font-size: 14px; line-height: 1.45; letter-spacing: -0.015em; font-feature-settings: "tnum" 1; -webkit-font-smoothing: antialiased; padding: 32px 28px 40px; margin: 0 0 28px; /* The theme's layout is float-based; a grid child of a float parent needs this or it inherits the old width collapse. */ float: none; width: 100%; clear: both; } .dsbp a { text-decoration: none; } .dsbp :focus-visible { outline: 2px solid var(--dsbp-green-dark); outline-offset: 2px; } .dsbp-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .dsbp .dsbp-label { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--dsbp-muted); margin-bottom: 8px; } .dsbp .dsbp-icon { height: var(--dsbp-mark-h); width: var(--dsbp-mark-h); flex: 0 0 auto; display: block; fill: none; stroke: var(--dsbp-ink-soft); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } .dsbp .dsbp-icon.is-ok { stroke: var(--dsbp-green-dark); } .dsbp .dsbp-vdiv { flex: 0 0 1px; width: 1px; align-self: stretch; background: var(--dsbp-rule); } /* ---------------------------------------------------------------- gallery */ .dsbp .dsbp-gallery { position: sticky; top: 28px; min-width: 0; } .dsbp .dsbp-stage { position: relative; aspect-ratio: 1 / 1; background: none; overflow: hidden; display: grid; place-items: center; border: 0; border-top: none; box-shadow: none; } .dsbp .dsbp-stage #main-image-wrapper { width: 100%; height: 100%; border: 0; border-top: none; } .dsbp .dsbp-stage img.iiz, .dsbp .dsbp-stage .iiz__img { width: 100%; height: 100%; object-fit: contain; display: block; border: 0; border-top: none; box-shadow: none; } .dsbp .dsbp-stage .iiz { width: 100%; height: 100%; border: 0; border-top: none; } /* The theme styles the save badge and the zoom icon as `.gallery-product .image .icon_save` / `.icon_mini` / `.zoom_static` (wossy_stylesheet.css:1255-1265, dermastore_extras.css:68). Dropping .gallery-product is what keeps the legacy float layout away, but it also drops these, so they are restated here against .dsbp-stage. Background paths are relative to this stylesheet's own directory, the same as the originals. */ .dsbp .dsbp-stage .icon_save { position: absolute; top: 10px; right: 10px; z-index: 50; width: 69px; height: 70px; /* .svg on dermastore (dermastore_extras.css:68), .png everywhere else. */ background: url('../../image/savebadge.png') no-repeat left top; background-image: url('../../image/savebadge.svg'); background-size: contain; line-height: 15px; color: #fff; font-size: 12px; text-align: center; padding: 12px 0 0 2px; } .dsbp .dsbp-stage .save_badge_num { line-height: 40px; margin: -5px 0 0; font-size: 28px; letter-spacing: -1px; } .dsbp .dsbp-stage .save_per { font-size: 22px; } .dsbp .dsbp-zoom { position: absolute; bottom: 10px; right: 10px; z-index: 10; } .dsbp .dsbp-stage .icon_mini { position: absolute; bottom: 10px; width: 24px; height: 24px; background-color: transparent; background-repeat: no-repeat; background-position: center center; } .dsbp .dsbp-stage .zoom_static { background-image: url('img/icon/zoom_static.png'); right: 10px; z-index: 1000; cursor: pointer; } .dsbp .dsbp-thumbs { margin-top: 6px; } .dsbp .dsbp-thumbs ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; } .dsbp .dsbp-thumbs li { margin: 0; padding: 0; list-style: none; float: none; } .dsbp .dsbp-thumbs a { display: block; background: #f2ede5; padding: 3px; line-height: 0; border: 0; } .dsbp .dsbp-thumbs a img { width: 56px; height: 56px; object-fit: contain; display: block; } .dsbp .dsbp-thumbs a.is-active, .dsbp .dsbp-thumbs a:hover { background: var(--dsbp-green-tint); } /* The theme hides these above 766px; the aspect-ratio stage needs them centred. */ .dsbp .gallery-nav { display: none; } /* ------------------------------------------------------------------ panel */ .dsbp .dsbp-panel { min-width: 0; } .dsbp .dsbp-brandline { display: block; margin: 0 0 7px; font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } .dsbp .dsbp-brandline a { background: -webkit-gradient(linear, left top, right top, from(var(--dsbp-brand-from)), to(var(--dsbp-brand-to))); background: linear-gradient(90deg, var(--dsbp-brand-from), var(--dsbp-brand-to)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .dsbp .dsbp-brandline a:hover { filter: brightness(.88); } .dsbp h1.dsbp-title { font-family: var(--dsbp-display); font-size: 36px !important; font-weight: 500; line-height: 1.08; letter-spacing: -0.005em; margin: 0 0 12px !important; padding: 0; text-align: left; color: var(--dsbp-ink); } /* "Eau de parfum · 100 ml" — the spec line lifted out of the product name. Its own

under the title, not part of the

. Bodoni Moda: display face like the title, not UI text. */ .dsbp p.dsbp-variant { display: block; font-family: var(--dsbp-display); font-size: 16px; font-weight: 400; color: var(--dsbp-muted); margin: -6px 0 12px; padding: 0; letter-spacing: 0; line-height: 1.4; } /* Accord chips: keep the theme's per-accord colour rules (wossy_stylesheet.css:2254-2452, keyed on the English slug) and override only the geometry, so the palette stays in sync with the rest of the site. */ .dsbp .dsbp-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 12px; } .dsbp .dsbp-tags .accord-chip { padding: 5px 8px 4px; font-size: 9px; font-weight: 700; letter-spacing: .02em; line-height: 1; text-transform: uppercase; white-space: nowrap; border: 0; margin: 0; } .dsbp .dsbp-subtitle { font-size: 17px; font-weight: 400; color: var(--dsbp-ink-soft); margin: 0 0 14px; letter-spacing: 0; line-height: 1.35; } .dsbp .dsbp-rating { display: flex; align-items: center; margin-bottom: 22px; } .dsbp .dsbp-rating a { display: inline-flex; align-items: center; gap: 7px; color: var(--dsbp-ink); } .dsbp .dsbp-stars { display: inline-flex; gap: 1px; flex: 0 0 auto; } .dsbp .dsbp-stars svg { width: 14px; height: 14px; } .dsbp .dsbp-stars svg.is-on { fill: var(--dsbp-green-dark); } .dsbp .dsbp-stars svg.is-off { fill: #cfe3db; } .dsbp .dsbp-rating b { font-weight: 700; font-size: 13.5px; } .dsbp .dsbp-rating-n { color: var(--dsbp-muted); font-size: 12.5px; } .dsbp .dsbp-rating a:hover .dsbp-rating-n { color: var(--dsbp-ink); } /* ------------------------------------------------------------------ price */ .dsbp .dsbp-offer { display: block; } .dsbp .dsbp-price-row { display: flex; align-items: flex-start; gap: 22px; } .dsbp .dsbp-price-main { min-width: 0; } .dsbp .dsbp-amount { display: block; font-family: var(--dsbp-display); font-size: 36px; font-weight: 600; line-height: 1.05; letter-spacing: -0.01em; color: var(--dsbp-ink); } .dsbp .dsbp-perml { display: block; color: var(--dsbp-muted); font-size: 12.5px; margin-top: 5px; } .dsbp .dsbp-price-ref { padding: 4px 0 0 22px; border-left: 1px solid var(--dsbp-rule); align-self: stretch; display: flex; flex-direction: column; gap: 2px; overflow: visible; } .dsbp .dsbp-rrp { font-size: 13px; font-weight: 700; white-space: nowrap; } .dsbp .dsbp-rrp s { color: var(--dsbp-muted); font-weight: 400; } .dsbp .dsbp-low { font-size: 12px; color: var(--dsbp-muted); white-space: nowrap; } .dsbp .dsbp-low.dsbp-info { display: inline-block; max-width: 100%; } .dsbp .dsbp-low .dsbp-info-trigger { color: inherit; white-space: nowrap; border-bottom: 1px dotted currentColor; } .dsbp .dsbp-pop-chart, .dsbp .dsbp-pop-chart p { white-space: normal; overflow-wrap: break-word; } .dsbp .dsbp-chart { display: block; width: 100%; height: auto; } .dsbp .dsbp-chart-legend { display: flex; align-items: center; gap: 7px; margin: 8px 0 6px; font-size: 11px; font-weight: 700; color: var(--dsbp-ink); } .dsbp .dsbp-chart-swatch { display: block; width: 18px; height: 3px; flex: 0 0 auto; background: linear-gradient(90deg, #ca6681 0%, #efb182 100%); } .dsbp .dsbp-tax { display: block; font-size: 12px; color: var(--dsbp-muted); margin-top: 6px; } .dsbp .dsbp-discounts { margin-top: 8px; font-size: 12.5px; color: var(--dsbp-green-dark); } .dsbp .dsbp-discounts span { display: block; } /* ------------------------------------------------- sizes: fill, no borders */ .dsbp .dsbp-sizes-cluster { margin-top: 12px; display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: start; } @media (max-width: 767px) { .dsbp .dsbp-sizes-cluster { grid-template-columns: 1fr; gap: 6px; } } .dsbp .dsbp-sizes { margin-top: 0; } .dsbp .dsbp-size-opts { display: flex; flex-wrap: wrap; gap: 4px; } .dsbp .dsbp-duration { min-width: 200px; } .dsbp .dsbp-size-opts > .dsbp-size { /* Size to the longest unwrapped line, then grow to fill leftover space. Shorter chips shrink first so a long head/per-ml line does not wrap — the row wraps whole chips instead. */ flex: 1 1 auto; width: max-content; max-width: 100%; } .dsbp .dsbp-size { display: block; text-align: left; padding: 6px 11px; margin: 0; background: var(--dsbp-chip); color: var(--dsbp-ink); border: 1px solid var(--dsbp-rule); border-radius: 12px; font: inherit; cursor: pointer; transition: background .12s, color .12s; } .dsbp a.dsbp-size:hover, .dsbp button.dsbp-size:hover { background: var(--dsbp-green-tint); color: var(--dsbp-ink); } .dsbp .dsbp-size-head { display: block; font-size: 13px; line-height: 1.3; white-space: nowrap; } .dsbp .dsbp-size.is-format .dsbp-size-head { white-space: normal; } .dsbp .dsbp-size-head b { font-weight: 800; } .dsbp .dsbp-size-kr { font-size: 11.5px; font-weight: 500; color: var(--dsbp-ink-soft); white-space: nowrap; } .dsbp .dsbp-size-perml { display: block; font-size: 11px; line-height: 1.3; color: var(--dsbp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dsbp .dsbp-size-perml i { font-style: normal; color: var(--dsbp-green-dark); font-weight: 700; } /* Selection is carried by the fill, never by an outline. */ .dsbp .dsbp-size[aria-current="true"] { background: var(--dsbp-green-dark); color: #fff; cursor: default; } .dsbp .dsbp-size[aria-current="true"] .dsbp-size-kr, .dsbp .dsbp-size[aria-current="true"] .dsbp-size-perml { color: rgba(255,255,255,.82); } .dsbp .dsbp-size[aria-current="true"] .dsbp-size-perml i { color: #fff; } .dsbp .dsbp-size.is-oos { opacity: .48; } .dsbp .dsbp-size.is-oos .dsbp-size-perml { color: var(--dsbp-amber); } .dsbp .dsbp-size.is-outlet { display: flex; align-items: center; gap: 8px; border-style: dashed; border-color: var(--dsbp-amber-dot); background: #fbf6ee; } .dsbp .dsbp-size.has-thumb { display: flex; align-items: center; gap: 8px; padding: 4px 11px 4px 4px; } .dsbp .dsbp-size-thumb { width: 32px; height: 32px; flex: 0 0 auto; object-fit: contain; border-radius: 8px; background: #fff; } .dsbp .dsbp-size[aria-current="true"] .dsbp-size-thumb { background: rgba(255,255,255,.12); } .dsbp .dsbp-size.has-thumb .dsbp-size-copy, .dsbp .dsbp-size.is-outlet .dsbp-size-copy { min-width: 0; flex: 1 1 auto; } .dsbp .dsbp-size.is-outlet .dsbp-size-perml { color: var(--dsbp-amber); font-weight: 700; } .dsbp .dsbp-outlet-mark { width: var(--dsbp-mark-h); height: var(--dsbp-mark-h); flex: 0 0 auto; display: block; fill: none; stroke: var(--dsbp-amber); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } .dsbp .dsbp-size[aria-current="true"].is-outlet { background: var(--dsbp-green-dark); border-color: transparent; } .dsbp .dsbp-size[aria-current="true"] .dsbp-outlet-mark { stroke: #fff; } .dsbp .dsbp-size-tool .dsbp-size-head { display: flex; align-items: center; gap: 6px; } .dsbp .dsbp-size-tool .dsbp-size-head svg { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: var(--dsbp-green-dark); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } /* sprays-calculator.css styles this trigger as a white/black-bordered button; inside the panel it is a chip like any other. */ .dsbp .dermastore-sprays-trigger.dsbp-size { background: var(--dsbp-chip); border: 1px dashed var(--dsbp-green-line); color: var(--dsbp-ink); box-shadow: none; text-transform: none; letter-spacing: 0; width: auto; height: auto; } .dsbp .dermastore-sprays-trigger.dsbp-size:hover { background: var(--dsbp-green-tint); box-shadow: none; } .dsbp .dermastore-sprays-trigger .dermastore-sprays-trigger-icon { display: none; } /* ---------------------------------------------------------------- options */ .dsbp .dsbp-options { margin-top: 20px; } .dsbp .dsbp-opt { margin-bottom: 12px; } .dsbp .dsbp-opt > p { margin: 0 0 5px; font-size: 12.5px; font-weight: 700; color: var(--dsbp-ink-soft); } .dsbp .dsbp-opt .required { color: #c0392b; } .dsbp .dsbp-opt label { display: block; font-size: 13px; margin: 0 0 4px; cursor: pointer; } .dsbp .dsbp-opt input[type="radio"], .dsbp .dsbp-opt input[type="checkbox"] { margin-right: 6px; vertical-align: middle; } .dsbp .dsbp-opt select, .dsbp .dsbp-opt input[type="text"], .dsbp .dsbp-opt textarea { font: inherit; font-size: 13px; width: 100%; max-width: 320px; padding: 8px 10px; border: 0; background: var(--dsbp-green-muted); color: var(--dsbp-ink); /* Same defence as the quantity box — the theme styles form controls with bare element selectors this file cannot outrank by name. */ min-width: 0; box-shadow: none; border-radius: 0; } .dsbp .dsbp-options .error, .dsbp .dsbp-opt + .error { display: block; color: #c0392b; font-size: 12px; margin: 4px 0 0; } /* -------------------------------------------------------------------- CTA */ .dsbp .dsbp-buy { display: flex; align-items: stretch; gap: 6px; margin-top: 16px; } /* NOTE ON BARE-ELEMENT THEME RULES. Namespacing beats the theme's class selectors, but it cannot beat its bare element ones — `button` (0,0,1) and `input[type="number"]` (0,1,1) apply no matter what this file is called. The only defence is to set the same properties explicitly. The two that actually bite: button { padding: 10px 15px } -> squashes the CTA label input[type="number"] { min-width: 170px; border-radius: 6px; box-shadow: ... } -> min-width outranks width, so the qty box ate the row If you add an element to this panel, re-run the audit: list every rule whose selector has no class and no id that matches inside .dsbp, and answer it here. */ .dsbp .dsbp-btn-buy { flex: 1 1 auto; height: 52px; border: 0; margin: 0; padding: 0 18px; background: var(--dsbp-cta); color: var(--dsbp-cta-text); cursor: pointer; font-family: inherit; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-transform: none; text-shadow: none; width: auto; transition: transform .1s ease, box-shadow .1s ease, background .12s ease; } .dsbp .dsbp-btn-buy .dsbp-cart-icon { width: 19px; height: 19px; flex: 0 0 auto; fill: none; stroke: var(--dsbp-cta-text); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .dsbp .dsbp-btn-buy:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--dsbp-green); background: var(--dsbp-cta); } .dsbp .dsbp-btn-buy:active { transform: none; box-shadow: none; } .dsbp .dsbp-btn-buy.button-cart-nostock { background: var(--dsbp-muted); } /* --------------------------------------------------------------------------- THE #button-cart OVERRIDE. The theme styles this button by ID (wossy_stylesheet.css): a blue linear-gradient at 300% background-size, a five-layer text-shadow, an inset box-shadow, border-radius 5px/20px, padding 10px 25px, font-size 20px, width calc(100% - 90px), a fontello cart glyph on ::before, and mix-blend-mode: hard-light on its span. An id is (1,0,0) and beats `.dsbp .dsbp-btn-buy` (0,2,0), so every one of those lands on the panel's CTA. The id cannot be renamed — initAddToCart() at product.tpl:1964 binds it — so the override is qualified WITH the id to win at (1,2,0). Keep the #button-cart qualifier on all of these. --------------------------------------------------------------------------- */ .dsbp .dsbp-btn-buy#button-cart { background-image: none; background-color: var(--dsbp-cta); background-size: auto; background-position: 0 0; background-repeat: no-repeat; text-shadow: none; box-shadow: none; border: 0; border-radius: 0; padding: 0 18px; margin: 0; width: auto; font-size: 16px; font-weight: 800; color: var(--dsbp-cta-text); } /* The theme's fontello cart glyph — the panel draws its own SVG cart. */ .dsbp .dsbp-btn-buy#button-cart::before { content: none; display: none; } .dsbp .dsbp-btn-buy#button-cart span { mix-blend-mode: normal; } .dsbp .dsbp-btn-buy#button-cart:hover { background-image: none; background-color: var(--dsbp-cta); background-position: 0 0; transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--dsbp-green); } .dsbp .dsbp-btn-buy#button-cart:active { padding: 0 18px; transform: none; box-shadow: none; } .dsbp .dsbp-btn-buy#button-cart:focus-visible { outline: 2px solid var(--dsbp-green-dark); outline-offset: 2px; } .dsbp .dsbp-btn-buy#button-cart.button-cart-nostock { background-color: var(--dsbp-muted); } .dsbp .dsbp-qty { flex: 0 0 auto; display: block; } .dsbp .dsbp-qty input[type="number"] { height: 52px; width: 64px; padding: 0 8px; margin: 0; /* min-width/max-width/box-shadow/border-radius are answering the theme's input[type="number"] rule, not styling choices — see the note above. */ min-width: 0; max-width: none; box-shadow: none; border-radius: 0; font: inherit; font-size: 15px; text-align: center; color: var(--dsbp-ink); background: var(--dsbp-green-muted); border: 0; } .dsbp .dsbp-nwa { margin: 8px 0 0; } .dsbp .dsbp-nwa .button { width: 100%; } /* ----------------------------------------- sample: tint + one dashed edge */ .dsbp .dsbp-sample { display: flex; align-items: center; gap: 11px; margin-top: 8px; padding: 10px 12px; border: 1px dashed var(--dsbp-green-line); background: var(--dsbp-chip); border-radius: 12px; } .dsbp .dsbp-sample .dsbp-icon { stroke: var(--dsbp-green-dark); } /* LINE BOXES IN THE TINT BARS. The mockup's 1.4-1.45 line-height was tuned for Figtree. Madera has a taller ascent, so the glyphs sit low in a line box that size and the row reads as having a too-large gap above the text. These bars are short, tightly padded and mostly one or two lines, so they run at 1.3 and the text centres. */ .dsbp .dsbp-sample p { margin: 0; font-size: 12.5px; line-height: 1.3; flex: 1 1 auto; } .dsbp .dsbp-sample p b { display: block; font-weight: 800; line-height: 1.3; } .dsbp .dsbp-sample p em { display: block; font-style: normal; color: var(--dsbp-ink-soft); line-height: 1.3; } .dsbp .dsbp-sample-add { flex: 0 0 auto; font: inherit; font-size: 12.5px; font-weight: 800; padding: 7px 0; margin: 0; cursor: pointer; border: 0; background: transparent; color: var(--dsbp-green-dark); white-space: nowrap; text-transform: none; } .dsbp .dsbp-sample-add:hover { color: var(--dsbp-ink); } .dsbp .dsbp-sample-add[disabled] { opacity: .5; cursor: default; } .dsbp .dsbp-delivery { display: flex; align-items: center; gap: 11px; margin-top: 8px; padding: 9px 13px; background: var(--dsbp-green-tint); font-size: 13px; line-height: 1.3; color: var(--dsbp-green-dark); border: 1px solid var(--dsbp-rule); border-radius: 12px; } .dsbp .dsbp-delivery .dsbp-icon { stroke: var(--dsbp-green-dark); } .dsbp .dsbp-delivery .dsbp-vdiv { background: var(--dsbp-green-line); } .dsbp .dsbp-lead { flex: 1 1 auto; } .dsbp .dsbp-lead b { font-weight: 800; } .dsbp .dsbp-stock { display: flex; align-items: center; gap: 7px; font-weight: 700; white-space: nowrap; color: var(--dsbp-ink); } .dsbp .dsbp-dot { width: 7px; height: 7px; background: var(--dsbp-green-dark); flex: 0 0 auto; } /* Amber, and no exclamation mark — see the template. */ .dsbp .dsbp-stock.is-low { color: var(--dsbp-amber); } .dsbp .dsbp-stock.is-low .dsbp-dot { background: var(--dsbp-amber-dot); } .dsbp .dsbp-delivery.is-oos { background: #f6f1ea; color: var(--dsbp-ink-soft); } .dsbp .dsbp-stock.is-oos { color: var(--dsbp-amber); font-weight: 700; } .dsbp .dsbp-stock.is-oos .dsbp-dot { background: var(--dsbp-amber-dot); } /* -------------------------------------------------------- trust cluster */ .dsbp .dsbp-cluster { margin-top: 13px; border-bottom: 1px solid var(--dsbp-rule); } .dsbp .dsbp-row { padding: 11px 0; border-top: 1px solid var(--dsbp-rule); display: flex; align-items: center; justify-content: center; gap: 4px; } .dsbp .dsbp-cell { flex: 1 1 0; display: flex; align-items: center; justify-content: var(--dsbp-cell-justify); gap: 8px; min-width: 0; } .dsbp .dsbp-cell:first-child { justify-content: var(--dsbp-cell-justify-first); padding-left: var(--dsbp-cell-pad); } .dsbp .dsbp-cell:last-child { justify-content: var(--dsbp-cell-justify-last); padding-right: var(--dsbp-cell-pad); } .dsbp .dsbp-cell > .dsbp-info { font-size: 12.5px; min-width: 0; } .dsbp .dsbp-info { position: relative; display: inline-block; } .dsbp .dsbp-info-trigger { font: inherit; font-size: inherit; color: inherit; text-align: left; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-transform: none; letter-spacing: inherit; } .dsbp .dsbp-caret { display: none; } .dsbp .dsbp-pop p { margin: 0 0 6px; } .dsbp .dsbp-pop p:last-child { margin-bottom: 0; } /* MARK HEIGHTS. Payment icons are a fixed 12px. Trust marks still use --dsbp-mark-h. */ .dsbp .dsbp-pay-pair { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 12px; border-top: 1px solid var(--dsbp-rule); } .dsbp .dsbp-pay-pair > .dsbp-row { border-top: 0; flex: 0 0 auto; width: max-content; max-width: 100%; } .dsbp .dsbp-pay, .dsbp .dsbp-pay-note { flex-wrap: nowrap; justify-content: flex-start; padding: 9px 13px; } .dsbp .dsbp-pay .dsbp-label { margin: 0 4px 0 0; } .dsbp .dsbp-pay-marks { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .dsbp .dsbp-pm { height: 12px; width: auto; display: block; object-fit: contain; } .dsbp .dsbp-pm--card, .dsbp .dsbp-pm--icon, .dsbp .dsbp-pm--swish { height: 12px; } .dsbp .dsbp-pm--visa { height: 10px; } .dsbp .dsbp-pm--swish { height: 14px; } .dsbp .dsbp-pm--apple { height: 14px; margin-top: -2px; } .dsbp .dsbp-pm--vmp { height: 12px; } /* Stand-ins until the official Apple Pay / Google Pay / Trustly marks land. */ .dsbp .dsbp-pm-text { display: inline-flex; align-items: center; height: var(--dsbp-mark-h); font-size: 11px; font-weight: 700; letter-spacing: -0.01em; color: var(--dsbp-ink-soft); white-space: nowrap; } .dsbp .dsbp-pay-note { border-top: 0; margin-top: 0; font-size: 11.5px; color: var(--dsbp-muted); white-space: nowrap; } .dsbp .dsbp-pay-note .dsbp-pm--trustly { height: 11px; width: auto; display: inline-block; vertical-align: -1px; object-fit: contain; } .dsbp .dsbp-pay-note .dsbp-pm--svea { height: 12px; width: auto; display: inline-block; margin-top: 2px; object-fit: contain; } .dsbp .dsbp-trust .dsbp-cell { gap: 7px; } .dsbp .dsbp-trust a { display: flex; align-items: center; gap: 7px; color: var(--dsbp-ink); white-space: nowrap; } /* Same height as the payment marks — the trust row is the same kind of row. */ .dsbp .dsbp-mark { height: var(--dsbp-mark-h); width: auto; object-fit: contain; display: block; } .dsbp .dsbp-mark--trustpilot { height: 12px; } .dsbp .dsbp-mark--prisjakt { height: 16px; } .dsbp .dsbp-mark--trygg { height: 19px; } .dsbp .dsbp-trust a:hover .dsbp-mark { filter: brightness(.92); } .dsbp .dsbp-score { font-size: 12.5px; font-weight: 700; } .dsbp .dsbp-n { font-size: 12px; color: var(--dsbp-muted); white-space: nowrap; } /* ------------------------------------------------------------------ store */ .dsbp .dsbp-store { margin-top: 12px; display: flex; align-items: flex-start; gap: 9px; } .dsbp .dsbp-store .dsbp-cell { align-items: flex-start; } .dsbp .dsbp-store b { display: block; font-size: 12.5px; font-weight: 800; } .dsbp .dsbp-store em { display: block; font-style: normal; color: var(--dsbp-muted); font-size: 11.5px; } .dsbp .dsbp-showroom-test { color: var(--dsbp-green-dark); font-weight: 700; } /* -------------------------------------------------------------- commodity */ .dsbp .dsbp-commodity { margin: 18px 0 0; padding: 10px 0 0; border-top: 1px solid var(--dsbp-rule); } .dsbp .dsbp-commodity summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--dsbp-ink-soft); } .dsbp .dsbp-commodity-intro { font-size: 12px; color: var(--dsbp-muted); margin: 8px 0 10px; } .dsbp .dsbp-commodity table { width: 100%; font-size: 12.5px; border-collapse: collapse; } .dsbp .dsbp-commodity td { padding: 5px 6px; border-top: 1px solid var(--dsbp-rule); } .dsbp .dsbp-commodity td + td { text-align: right; font-variant-numeric: tabular-nums; } .dsbp .dsbp-commodity tr.is-this td { font-weight: 800; color: var(--dsbp-green-dark); border-top-width: 2px; border-top-color: var(--dsbp-green-dark); } /* ============================ tooltips: desktop ========================== */ @media (min-width: 701px) { .dsbp .dsbp-pop { position: absolute; z-index: 30; bottom: calc(100% + 9px); left: -10px; width: min(280px, calc(100vw - 32px)); padding: 11px 13px; background: var(--dsbp-surface); color: var(--dsbp-ink); border: 0; box-shadow: 0 10px 30px rgba(36, 30, 24, .16); font-size: 12px; line-height: 1.5; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .13s ease, transform .13s ease, visibility .13s; } .dsbp .dsbp-pop.is-end { left: auto; right: -10px; } .dsbp .dsbp-pop.dsbp-pop-chart { width: min(340px, calc(100vw - 24px)); box-sizing: border-box; z-index: 40; } .dsbp .dsbp-pop::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 12px; } .dsbp .dsbp-info:hover .dsbp-pop, .dsbp .dsbp-info-trigger[aria-expanded="true"] + .dsbp-pop, .dsbp .dsbp-info-trigger:focus-visible + .dsbp-pop { opacity: 1; visibility: visible; transform: translateY(0); } } /* ====================== tooltips: mobile accordions ====================== */ /* Keyed off viewport width, not hover capability — a touch laptop should still get the desktop tooltip, and a narrow desktop window should still get the accordion. Both presentations are pure CSS off aria-expanded. */ @media (max-width: 700px) { .dsbp .dsbp-info { display: block; width: 100%; } .dsbp .dsbp-info-trigger { display: flex; align-items: center; gap: 6px; width: 100%; } .dsbp .dsbp-caret { display: block; width: 8px; height: 8px; flex: 0 0 auto; border-right: 1.5px solid var(--dsbp-muted); border-bottom: 1.5px solid var(--dsbp-muted); transform: translateY(-2px) rotate(45deg); transition: transform .18s ease; } .dsbp .dsbp-info-trigger[aria-expanded="true"] .dsbp-caret { transform: translateY(1px) rotate(-135deg); } .dsbp .dsbp-pop { display: block; overflow: hidden; max-height: 0; padding: 0 12px; margin: 0; background: var(--dsbp-green-muted); font-size: 12px; line-height: 1.5; color: var(--dsbp-ink); transition: max-height .2s ease, padding .2s ease, margin .2s ease; } .dsbp .dsbp-info-trigger[aria-expanded="true"] + .dsbp-pop { max-height: 340px; padding: 10px 12px; margin: 8px 0 2px; } .dsbp .dsbp-info-trigger[aria-expanded="true"] + .dsbp-pop-chart { max-height: 520px; } .dsbp .dsbp-low { white-space: normal; } .dsbp .dsbp-low .dsbp-info-trigger { white-space: normal; border-bottom: 0; } .dsbp .dsbp-pop-chart { width: auto; } } /* ============================== responsive ============================== */ @media (max-width: 767px) { .dsbp { grid-template-columns: 1fr; gap: 28px; padding: 24px 18px 32px; } .dsbp .dsbp-gallery { position: static; max-width: 520px; margin: 0 auto; width: 100%; } } @media (max-width: 700px) { .dsbp { padding: 20px 0 28px; margin-bottom: 20px; } .dsbp h1.dsbp-title { font-size: 29px !important; } .dsbp .dsbp-amount { font-size: 31px; } .dsbp .dsbp-price-row { flex-wrap: wrap; gap: 14px; } .dsbp .dsbp-price-ref { padding-left: 0; border-left: 0; } .dsbp .dsbp-pay-pair > .dsbp-row { flex-basis: 100%; width: auto; } .dsbp .dsbp-pay-note { margin-top: -9px; white-space: normal; flex-wrap: wrap; } .dsbp .dsbp-row:not(.dsbp-trust) { flex-wrap: wrap; row-gap: 12px; } .dsbp .dsbp-row:not(.dsbp-trust) .dsbp-vdiv { display: none; } .dsbp .dsbp-row:not(.dsbp-trust) .dsbp-cell { flex: 1 1 100%; } .dsbp .dsbp-usps .dsbp-cell, .dsbp .dsbp-usps .dsbp-cell:first-child, .dsbp .dsbp-usps .dsbp-cell:last-child { justify-content: flex-start; padding-left: var(--dsbp-cell-pad); } /* Trust keeps the desktop flex row (equal cells, dividers, first/last padding). Marks shrink a notch so three fit on a 390px screen; JS adds .is-stack only when a mark would still clip or wrap. */ .dsbp .dsbp-trust { flex-wrap: nowrap; align-items: center; } .dsbp .dsbp-trust .dsbp-cell { flex: 1 1 0; min-width: 0; overflow: hidden; } .dsbp .dsbp-trust:not(.is-stack) a { gap: 5px; } .dsbp .dsbp-trust:not(.is-stack) .dsbp-score { font-size: 11px; } .dsbp .dsbp-trust:not(.is-stack) .dsbp-n { font-size: 10.5px; } .dsbp .dsbp-trust:not(.is-stack) .dsbp-mark--trustpilot { height: 10px; } .dsbp .dsbp-trust:not(.is-stack) .dsbp-mark--prisjakt { height: 14px; } .dsbp .dsbp-trust:not(.is-stack) .dsbp-mark--trygg { height: 16px; } .dsbp .dsbp-trust.is-stack { flex-wrap: wrap; row-gap: 12px; align-items: flex-start; } .dsbp .dsbp-trust.is-stack .dsbp-vdiv { display: none; } .dsbp .dsbp-trust.is-stack .dsbp-cell, .dsbp .dsbp-trust.is-stack .dsbp-cell:first-child, .dsbp .dsbp-trust.is-stack .dsbp-cell:last-child { flex: 1 1 100%; justify-content: flex-start; padding-left: var(--dsbp-cell-pad); } .dsbp .dsbp-delivery { flex-wrap: wrap; row-gap: 8px; } .dsbp .dsbp-delivery .dsbp-vdiv { display: none; } .dsbp .dsbp-store { flex-wrap: wrap; row-gap: 14px; } .dsbp .dsbp-store .dsbp-vdiv { display: none; } /* The theme's own mobile gallery arrows, restored inside the square stage. */ .dsbp .gallery-nav { display: block; position: absolute; top: 50%; transform: translateY(-50%); z-index: 8; border: 0; background: rgba(250,247,242,.82); color: var(--dsbp-ink); font-size: 18px; line-height: 1; padding: 10px 12px; cursor: pointer; } .dsbp .gallery-nav.prev-btn { left: 0; } .dsbp .gallery-nav.next-btn { right: 0; } } /* ========================== sticky mobile CTA =========================== */ /* Replaces the old bar, which pinned .product-info .price to the viewport bottom (wossy_responsive_upgrades.css:173-182) and so showed a price with no button. This one carries both, and .dsbp-sticky-btn proxies the real #button-cart rather than duplicating the add-to-cart logic. */ .dsbp-sticky { display: none; } @media (max-width: 766px) { .dsbp-sticky { display: flex; align-items: center; gap: 10px; position: fixed; left: 0; bottom: 0; width: 100%; z-index: 99999; padding: 8px 12px; background: rgba(250, 247, 242, .94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-top: 1px solid var(--dsbp-rule, #f3f9f6); font-family: 'Madera', Helvetica, Arial, sans-serif; transform: translateY(110%); transition: transform .18s ease; } .dsbp-sticky.is-visible { transform: translateY(0); } .dsbp-sticky[aria-hidden="true"] { pointer-events: none; } .dsbp-sticky.is-visible[aria-hidden="false"] { pointer-events: auto; } .dsbp-sticky .dsbp-sticky-price { flex: 0 0 auto; font-family: 'Bodoni Moda DS', Georgia, serif; font-size: 21px; font-weight: 600; color: #241e18; white-space: nowrap; } .dsbp-sticky .dsbp-sticky-btn { flex: 1 1 auto; height: 46px; border: 0; margin: 0; padding: 0 16px; background: #241e18; color: #faf7f2; cursor: pointer; font: inherit; font-size: 15px; font-weight: 800; text-transform: none; } /* The old bar overlapped the end of the page because nothing compensated for its height. Un-namespaced on purpose: this file only loads on a gated product page, so it cannot reach anything else. */ body { padding-bottom: 64px; } /* Same reason the 97px offset existed — it was clearing the old price bar, which no longer exists. Re-point it at the new one. body .NWA_popover (0,1,1) beats .NWA_popover !important (0,1,0). */ body .NWA_popover { bottom: 72px !important; } } @media (min-width: 767px) { body .NWA_popover { bottom: 20px !important; } } @media (prefers-reduced-motion: reduce) { .dsbp *, .dsbp-sticky { transition: none !important; } .dsbp .dsbp-btn-buy:hover { transform: none; } }