:root {
--color-primary: #1b5159;
--color-accent: #111111;
--color-discounted-price: #C62828;
--color-success: 190, 251, 224;
--color-alert-bg: 253, 164, 175;
--color-alert: 142, 44, 45;
--color-text: #111111;
--color-foreground: #111111;
--color-background: #ffffff;
--text-footer: #ffffff;
--bg-body: #ffffff;
--bg-header: #ffffff;
--bg-card: #ffffff;
--bg-footer: #111111;
--bg-overlay: 146, 146, 146;
--gap: 1rem;
--button-py: calc(1rem * 1);
--button-px: calc(2rem * 1);
--button-rounding: 0.25rem;
--button-text: var(--color-text);
--button-text-primary: #ffffff;
--input-bg: #ffffff;
--input-border: 1px solid rgb(209 213 219);
--input-color: var(--color-text);
--input-rounding: 0.25rem;
--input-px: 1rem;
--input-py: 0.75rem;
/* Swiper */
--swiper-navigation-color: var(--color-text);
--swiper-pagination-color: var(--color-accent);
--swiper-navigation-size: 2rem;
--swiper-theme-color: var(--color-primary);
}
body {
font-family: 'Inter',sans-serif !important;
}
@media (min-width: 768px) {
body { overflow: overlay; }
}
.font-body {
font-family: 'Inter',sans-serif;
}
h1, h2, h3, h4, h5, h6, .font-heading, button, .qs-cart-submit {
font-family: 'Montserrat',
sans-serif;
font-weight: bold;
line-height: 120%;
}
/**
* Colors
*/
.bg-card {
background-color: var(--bg-card);
}
/**
* Primary color
*/
.text-primary {
color: var(--color-primary);
}
.hover\:text-primary:hover {
color: var(--color-primary);
}
.ring-primary,
.ring-primary:focus {
--tw-ring-color: var(--color-primary);
}
.bg-primary {
background-color: var(--color-primary) !important;
}
.hover\:bg-primary:hover {
background-color: var(--color-primary);
}
.border-primary {
border-color: var(--color-primary);
}
/**
* Secondary color
*/
.text-secondary {
color: var(--color-accent);
}
.hover\:text-secondary:hover {
color: var(--color-accent);
}
.ring-secondary {
--tw-ring-color: var(--color-accent);
}
.bg-secondary {
background-color: var(--color-accent);
}
.hover\:bg-secondary:hover {
background-color: var(--color-accent);
}
.border-secondary,
.focus\:border-secondary:focus {
border-color: var(--color-accent);
}
/**
* Accent color
*/
.text-accent {
color: var(--color-accent);
}
.hover\:text-accent:hover {
color: var(--color-accent);
}
.ring-accent {
--tw-ring-color: var(--color-accent);
}
.bg-accent {
background-color: var(--color-accent) !important;
}
.hover\:bg-accent:hover {
background-color: var(--color-accent);
}
/**
* Discounted price color
*/
.text-discounted-price {
color: var(--color-discounted-price, var(--color-accent));
}
/**
* Foreground color
*/
.text-body {
color: var(--color-text);
}
.text-inverted {
color: var(--color-background);
}
.hover\:text-body:hover {
color: var(--color-text);
}
.divide-foreground>:not([hidden])~:not([hidden]),
.border-foreground {
border-color: var(--color-foreground);
}
.hover\:border-foreground:hover {
border-color: var(--color-foreground);
}
.bg-foreground {
background-color: var(--color-foreground) !important;
}
.hover\:bg-foreground:hover {
background-color: var(--color-foreground);
}
.bg-success {
background: rgba(var(--color-success), .2);
}
.text-alert {
color: rgb(var(--color-alert));
}
.bg-alert {
background-color: rgba(var(--color-alert-bg), .2)
}
.bg-body {
background-color: var(--bg-body);
}
.to-body {
--tw-gradient-to: var(--bg-body) var(--tw-gradient-to-position) !important;
}
.bg-header {
background-color: var(--bg-header);
}
.border-header {
border-color: var(--bg-header);
}
.bg-footer {
background-color: var(--bg-footer);
}
.text-footer {
color: var(--text-footer);
}
.bg-overlay {
background-color: rgba(var(--bg-overlay), var(--tw-bg-opacity));
}
.border-highlight {
border-color: var(--color-accent) !important;
}
.gap-default {
gap: var(--gap);
}
.gap-default-2 {
gap: calc(var(--gap) * 2);
}
.button-py {
padding-top: var(--button-py);
padding-bottom: var(--button-py);
}
.button-px {
padding-left: var(--button-px);
padding-right: var(--button-px);
}
.button-rounding {
border-radius: var(--button-rounding);
}
.button-text-primary {
color: var(--button-text-primary);
}
.input-bg {
background-color: var(--input-bg);
}
.input-border {
border: var(--input-border);
}
.input-rounding {
border-radius: 0.25rem;
}
.input-py {
padding-top: var(--input-py);
padding-bottom: var(--input-py);
}
.input-px {
padding-left: var(--input-px);
padding-right: var(--input-px);
}
.input-text {
color: var(--color-text);
}
/**
* Transition duration
*/
.duration-default {
transition-duration: 200ms !important;
}
/**
* Cart bubble tweaks
*/
.cart-bubble.text-xs {
font-size: 0.6rem;
line-height: 1;
}
/**
* Disable spinner arrows on number inputs
*/
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
}
/**
* Tailwind
*/
[multiple]:focus, [type=date]:focus, [type=datetime-local]:focus, [type=email]:focus, [type=month]:focus, [type=number]:focus, [type=password]:focus, [type=search]:focus, [type=tel]:focus, [type=text]:focus, [type=time]:focus, [type=url]:focus, [type=week]:focus, select:focus, textarea:focus {
--tw-ring-color: var(--color-primary) !important;
outline: none;
border-color: var(--color-primary) !important;
}
/**
* PhotoSwipe
*/
.pswp {
--pswp-icon-color-secondary: var(--color-text);
--pswp-icon-color: var(--color-text);
--pswp-bg: var(--bg-body);
--pswp-icon-stroke-color: var(--pswp-bg);
}
.pswp img {
max-width: none;
object-fit: contain;
}
.pswp__img--placeholder {
display: none !important;
}
.pswp__counter {
font-weight: bold;
text-shadow: 0 0 2px var(--pswp-bg)
}
/**
* Swiper
*/
/** Fix for pinch zoom on main product image */
.swiper.swiper-horizontal {
touch-action: auto;
}
.swiper-button-next,
.swiper-button-prev {
width: auto;
}
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
display: none
}
.swiper-button-next:after,
.swiper-button-prev:after {
content: '';
}
.products-swiper-main {
min-height: 200px; /* fallback before Swiper/Imgix init */
}
@media (min-width: 768px) {
.products-swiper-main {
min-height: 300px;
}
}
/**
* Hero Slider
*/
.hero-slider {
transition: height 0.3s ease;
min-height: 500px;
}
@media (min-width: 768px) {
.hero-slider {
min-height: 700px;
}
}
.hero-slider .swiper-slide {
height: 100%;
}
.hero-slider .swiper-button-next,
.hero-slider .swiper-button-prev {
color: white;
width: 44px;
height: 44px;
background: rgba(0, 0, 0, 0.5);
border-radius: 50%;
transition: all 0.3s ease;
cursor: pointer;
}
.hero-slider .swiper-button-next:hover,
.hero-slider .swiper-button-prev:hover {
background: rgba(0, 0, 0, 0.8);
}
/* Remove Swiper's default arrow pseudo-elements */
.hero-slider .swiper-button-next:after,
.hero-slider .swiper-button-prev:after {
content: none;
}
/* Style the SVG icons inside the arrow buttons */
.hero-slider .swiper-button-next svg,
.hero-slider .swiper-button-prev svg {
stroke: white;
stroke-width: 2.5;
}
.hero-slider .swiper-pagination {
bottom: 20px;
}
.hero-slider .swiper-pagination-bullet {
width: 12px;
height: 12px;
background: white;
opacity: 0.7;
transition: all 0.3s ease;
}
.hero-slider .swiper-pagination-bullet-active {
opacity: 1;
background: white;
width: 32px;
border-radius: 6px;
}
.product-slider .swiper-pagination {
margin-top: 2rem;
position: relative;
}
.bg-dark-overlay {
background: rgba(0, 0, 0, 0.4);
}
.bg-light-overlay {
background: rgba(255, 255, 255, 0.4);
}
.products-swiper-thumbs {
--swiper-navigation-size: 30px;
}
/* Stamped badge: pill with ★ rating (count) — overlaid on the product image */
.stamped-main-badge {
display: inline-flex !important;
align-items: center;
gap: 0.3125rem;
background-color: rgba(255, 255, 255, 0.55);
backdrop-filter: blur(12px) saturate(1.2);
-webkit-backdrop-filter: blur(12px) saturate(1.2);
border-radius: 9999px;
padding: 0.3125rem 0.6875rem;
line-height: 1;
border: 1px solid rgba(255, 255, 255, 0.6);
box-shadow: 0 6px 20px -10px rgba(14, 15, 16, 0.35);
}
/* Stamped's own gold 5-star icon row (.stamped-badge-starrating) is hidden — we
render a single star via ::before below instead */
.stamped-badge-starrating {
display: none !important;
}
/* Star lives on the outer wrapper (not the caption) so it can be sized
independently of the rating/count text — the ★ glyph reads visually
smaller than bold digits at matching font-size, so it's bumped up a touch */
.stamped-main-badge::before {
content: '\2605' !important;
font-size: 0.9375rem;
line-height: 1;
color: #F2C41B;
}
.stamped-badge-caption {
font-size: 0 !important;
}
.stamped-badge-caption::before {
content: attr(data-rating) !important;
font-size: 0.8125rem;
font-weight: 700;
color: var(--color-ink);
}
/* Stamped's widget.min.css ships
.stamped-badge-caption[data-reviews][data-label][data-version="2"]::after { content: '' !important }
loaded async after our stylesheet, with higher specificity than a plain
.stamped-badge-caption::after. The repeated class below raises our
specificity past theirs so our count still renders. */
.stamped-main-badge .stamped-badge-caption.stamped-badge-caption.stamped-badge-caption.stamped-badge-caption::after {
content: ' (' attr(data-reviews) ')' !important;
font-size: 0.75rem;
font-weight: 400;
text-decoration: none !important;
color: var(--color-ink-soft);
margin-left: 0.25rem;
}
.stamped-main-badge:has(.stamped-badge-caption[data-reviews="0"]),
.stamped-main-badge:not(:has(.stamped-badge-caption)) {
display: none !important;
}
/* Card badge: quiet inline "★ 4.6 (12)" under the product title.
Reuses the same ::before/::after technique as the main badge; the amber
star fill is the one sanctioned non-brand hue (see DESIGN.md). */
.stamped-card-badge {
display: inline-flex !important;
align-items: center;
gap: 0.25rem;
margin-top: 0.375rem;
line-height: 1;
}
.stamped-card-badge::before {
content: '\2605';
font-size: 0.8125rem;
line-height: 1;
color: #F2C41B;
}
.stamped-card-badge .stamped-badge-caption::before {
content: attr(data-rating) !important;
font-size: 0.75rem;
font-weight: 600;
color: var(--color-ink);
}
/* Same specificity bump as the main badge — Stamped's async CSS blanks
the version-2 caption ::after, ours must outrank it */
.stamped-card-badge .stamped-badge-caption.stamped-badge-caption.stamped-badge-caption.stamped-badge-caption::after {
content: ' (' attr(data-reviews) ')' !important;
font-size: 0.75rem;
font-weight: 400;
text-decoration: none;
color: var(--color-ink-soft);
margin-left: 0.25rem;
}
.stamped-card-badge:has(.stamped-badge-caption[data-reviews="0"]),
.stamped-card-badge:not(:has(.stamped-badge-caption)) {
display: none !important;
}
/* ==========================================================================
STAMPED CAROUSEL → 3-UP GRID / MOBILE SWIPE RAIL (product page, datafield_2)
Reskins the same #stamped-reviews-widget[data-widget-type="carousel"] DOM
used everywhere else — no new Stamped widget type, just this wrapper class
on the container the widget snippet already sits in. DESIGN.md's Cards and
Testimonials specs govern below: 4px radius, Light Grey fill, no shadow,
Montserrat name/title, Inter quote, amber star.
≥1024px: three cards in one row. Below: a native scroll-snap rail
(same pattern as .nh2-rail) — no Swiper instance, Stamped's markup is
async and rebuilt by its own JS, so CSS-only survives its re-renders.
Stamped's own stylesheet loads async (its lands in after
ours) and its carousel JS inline-styles `left` on .scroll-wrapper and
`width`/`height` on each .block for the horizontal scroll/autoplay. Every
selector below matches Stamped's own #stamped-reviews-widget[...] prefix
so it wins on specificity regardless of load order, and the handful of
properties fighting those inline styles carry !important — same technique
as the badge override above.
The "Läs alla recensioner" link has no Stamped equivalent and ships
`display:none` inline in the datafield HTML, so a theme with no matching
CSS (i.e. simple-87, which reads the same datafield_2) renders exactly as
it does today; only this stylesheet reveals it. The per-product overlap
photo ships the same way but stays hidden here. */
/* One centred 72rem column; link and widget share its single cell so the
link pins to the grid's right edge, not the (wider) container's. The
datafield ships an inline margin-bottom:-10px that pulled the next
section up over the last card row — cancelled here. */
.nh-review-stack {
position: relative;
display: grid;
grid-template-columns: min(100%, 72rem);
justify-content: center;
padding-top: 3rem;
padding-bottom: 3.5rem;
margin-bottom: 0 !important;
}
/* min-width:0 — otherwise the rail's max-content width becomes the grid
item's minimum and the page scrolls sideways on tablet. */
.nh-review-stack > * {
grid-area: 1 / 1;
min-width: 0;
}
.nh-review-stack .nh-review-readall {
display: block !important;
justify-self: end;
align-self: start;
z-index: 1;
margin-top: 0.5rem;
font-family: 'Inter',sans-serif;
font-size: 0.875rem;
font-weight: 500;
color: var(--color-brand);
text-decoration: underline;
text-underline-offset: 3px;
}
.nh-review-stack .nh-review-readall:hover {
color: var(--color-brand-hover);
}
/* overflow:visible so the mobile rail can bleed to the container edge */
.nh-review-stack #stamped-reviews-widget[data-widget-type="carousel"] {
width: 100%;
overflow: visible !important;
}
.nh-review-stack #stamped-reviews-widget[data-widget-type="carousel"] .stamped-carousel-title {
float: none;
max-width: calc(100% - 11rem);
font-family: 'Montserrat',
sans-serif;
font-size: 1.75rem;
font-weight: 700;
color: var(--color-ink) !important;
}
.nh-review-stack #stamped-reviews-widget[data-widget-type="carousel"] .stamped-carousel-buttons {
display: none !important;
}
.nh-review-stack #stamped-reviews-widget[data-widget-type="carousel"] .stamped-carousel-subtitle {
float: none;
max-width: calc(100% - 11rem);
margin: 0.5rem 0 2rem;
display: flex;
align-items: center;
gap: 0.5rem;
font-family: 'Inter',sans-serif;
color: var(--color-ink-soft);
}
.nh-review-stack #stamped-reviews-widget[data-widget-type="carousel"] .stamped-carousel-subtitle .fa-star::before {
font-size: 1rem;
}
@media (max-width: 640px) {
.nh-review-stack > * {
grid-area: auto;
}
/* below the rail, left-aligned — reads as the rail's footer */
.nh-review-stack .nh-review-readall {
order: 1;
justify-self: start;
margin-top: 1.25rem;
}
.nh-review-stack #stamped-reviews-widget[data-widget-type="carousel"] .stamped-carousel-title,
.nh-review-stack #stamped-reviews-widget[data-widget-type="carousel"] .stamped-carousel-subtitle {
max-width: 100%;
}
.nh-review-stack #stamped-reviews-widget[data-widget-type="carousel"] .stamped-carousel-title {
font-size: 1.5rem;
}
}
/* Cards. .scroll-wrapper's `left` and each .block's `width`/`height` are
inline-styled by Stamped's carousel JS on a timer — !important pins the
layout regardless. Default (<1024px) is the swipe rail: it bleeds into
the container's side padding so cards scroll edge to edge, and the next
card peeks in to signal there's more. */
.nh-review-stack #stamped-reviews-widget[data-widget-type="carousel"] .stamped-carousel-scroll {
height: auto !important;
overflow: visible !important;
float: none;
}
.nh-review-stack #stamped-reviews-widget[data-widget-type="carousel"] .stamped-carousel-scroll::before {
display: none;
}
.nh-review-stack #stamped-reviews-widget[data-widget-type="carousel"] .stamped-carousel-scroll-wrapper {
position: static !important;
left: 0 !important;
width: auto !important;
display: flex;
gap: 0.75rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
margin-left: calc(-1 * var(--nh-rv-bleed, 1rem));
margin-right: calc(-1 * var(--nh-rv-bleed, 1rem));
padding: 0 var(--nh-rv-bleed, 1rem) 0.25rem;
scroll-padding-left: var(--nh-rv-bleed, 1rem);
scroll-padding-right: var(--nh-rv-bleed, 1rem);
scrollbar-width: none;
-ms-overflow-style: none;
overscroll-behavior-x: contain;
}
.nh-review-stack #stamped-reviews-widget[data-widget-type="carousel"] .stamped-carousel-scroll-wrapper::-webkit-scrollbar {
display: none;
}
/* Flex column so every card in a row is the same height and the author
line sits on the card's bottom edge however long the quote runs. */
.nh-review-stack #stamped-reviews-widget[data-widget-type="carousel"] .stamped-carousel-scroll .block {
display: flex !important;
flex-direction: column;
flex: 0 0 85%;
width: auto !important;
height: auto !important;
scroll-snap-align: start;
background: var(--bg-mist);
border-radius: var(--radius-base);
padding: 1.5rem;
white-space: normal;
color: var(--color-body);
font-family: 'Inter',sans-serif;
font-size: 0.9375rem;
}
/* Stamped renders a full page (~30) of reviews for its own pagination;
the rail keeps 8, the desktop row 3. */
.nh-review-stack #stamped-reviews-widget[data-widget-type="carousel"] .stamped-carousel-scroll .block:nth-of-type(n+9) {
display: none !important;
}
@media (min-width: 640px) {
.nh-review-stack #stamped-reviews-widget[data-widget-type="carousel"] .stamped-carousel-scroll .block {
flex-basis: 46%;
}
}
@media (min-width: 1024px) {
.nh-review-stack #stamped-reviews-widget[data-widget-type="carousel"] .stamped-carousel-scroll-wrapper {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.5rem;
overflow-x: visible;
scroll-snap-type: none;
margin-left: 0;
margin-right: 0;
padding: 0;
}
.nh-review-stack #stamped-reviews-widget[data-widget-type="carousel"] .stamped-carousel-scroll .block:nth-of-type(n+4) {
display: none !important;
}
}
/* Date. Stamped renders it above the card's content; js/nhReviews.js moves
it into .nh-rv-head beside the stars. Until that runs (or if it can't),
it stays hidden rather than float loose at the top of the card. */
.nh-review-stack #stamped-reviews-widget[data-widget-type="carousel"] .stamped-reviews-date {
display: none;
}
.nh-review-stack #stamped-reviews-widget[data-widget-type="carousel"] .nh-rv-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.625rem;
}
.nh-review-stack #stamped-reviews-widget[data-widget-type="carousel"] .nh-rv-head .stamped-reviews-rating {
margin-bottom: 0;
}
.nh-review-stack #stamped-reviews-widget[data-widget-type="carousel"] .nh-rv-head .stamped-reviews-date {
display: block;
float: none;
margin: 0;
padding: 0;
font-family: 'Inter',sans-serif;
font-size: 0.75rem;
line-height: 1;
color: var(--color-ink-soft);
white-space: nowrap;
}
/* No photo per card in this layout — the title runs straight into the
quote instead, so the thumbnail Stamped renders is dropped entirely. */
.nh-review-stack #stamped-reviews-widget[data-widget-type="carousel"] .stamped-reviews-image {
display: none !important;
}
.nh-review-stack #stamped-reviews-widget[data-widget-type="carousel"] .stamped-ratings-wrapper {
display: flex !important;
flex-direction: column;
flex: 1 1 auto;
float: none !important;
width: auto !important;
margin: 0 !important;
padding: 0;
}
.nh-review-stack #stamped-reviews-widget[data-widget-type="carousel"] .stamped-reviews-rating {
margin-bottom: 0.625rem;
}
.nh-review-stack #stamped-reviews-widget[data-widget-type="carousel"] .stamped-carousel-scroll .stamped-reviews-rating,
.nh-review-stack #stamped-reviews-widget[data-widget-type="carousel"] .stamped-carousel-scroll .fa-star::before,
.nh-review-stack #stamped-reviews-widget[data-widget-type="carousel"] .stamped-carousel-scroll .fa-star-half-o::before,
.nh-review-stack #stamped-reviews-widget[data-widget-type="carousel"] .stamped-carousel-scroll .fa-star-o::before {
font-size: 1rem;
}
/* Stamped's own async stylesheet floats the title (its default is a 2-col
title/photo layout) with a fixed width and link-blue color. Grid used to
neutralize that for free — grid items can't float — but .block is normal
flow now, so every one of those has to be cancelled explicitly.
Title and quote each get their own line rather than flowing as one
inline paragraph: at this card's real width (up to ~555px, half of the
72rem-capped widget) a short quote never wraps, so an inline lead-in just
strands a bold word on the left with a wall of empty space next to it —
only the mockup's much narrower card made the inline version read as
prose. Stacked reads the same regardless of card width or quote length. */
.nh-review-stack #stamped-reviews-widget[data-widget-type="carousel"] .stamped-reviews-title {
display: block !important;
float: none !important;
width: auto !important;
max-width: none !important;
margin-bottom: 0.375rem;
font-family: 'Montserrat',
sans-serif;
font-weight: 700;
line-height: 1.4;
color: var(--color-ink) !important;
}
/* The title text is Stamped's own permalink — that inner anchor carries its own float
(Stamped's default title/photo 2-col layout) and its link color (from
data-style-color-link in the datafield HTML), neither of which the div
override above reaches. */
.nh-review-stack #stamped-reviews-widget[data-widget-type="carousel"] .stamped-reviews-title a {
display: inline !important;
float: none !important;
width: auto !important;
color: var(--color-ink) !important;
text-decoration: none !important;
pointer-events: none;
}
/* `.stamped-carousel-scroll` in these three selectors is load-bearing:
Stamped's ≤690px stylesheet re-adds margin-left:100px !important on the
message and author with an equal-specificity selector that loads after
ours, so we need one more class to win. */
.nh-review-stack #stamped-reviews-widget[data-widget-type="carousel"] .stamped-carousel-scroll .stamped-reviews-message,
.nh-review-stack #stamped-reviews-widget[data-widget-type="carousel"] .stamped-carousel-scroll .stamped-reviews-message-block {
display: block !important;
float: none !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
.nh-review-stack #stamped-reviews-widget[data-widget-type="carousel"] .stamped-carousel-scroll .stamped-reviews-message-block {
font-style: normal !important;
font-family: 'Inter',sans-serif !important;
-webkit-font-smoothing: auto;
line-height: 1.5;
color: var(--color-body);
}
.nh-review-stack #stamped-reviews-widget[data-widget-type="carousel"] .stamped-carousel-scroll .stamped-reviews-author {
display: block !important;
float: none !important;
width: auto !important;
/* Stamped's own CSS reserves margin-left:100px for an avatar we don't
render — that's what pushed the name off the card's left edge. auto
top margin pins the line to the card bottom (wrapper is flex column). */
margin: auto 0 0 !important;
padding-top: 1rem;
font-family: 'Montserrat',
sans-serif;
font-weight: 700;
font-size: 0.875rem;
color: var(--color-ink) !important;
}
/* "Verifierad köpare" — Stamped exposes verification only as a data
attribute on the card, no text node; render it via ::after, floated
against the reviewer name on the same line. */
.nh-review-stack #stamped-reviews-widget[data-widget-type="carousel"] .block[data-verified-type="2"] .stamped-reviews-author::after {
content: "Verifierad köpare";
float: right;
font-family: 'Inter',sans-serif;
font-weight: 400;
font-size: 0.75rem;
color: var(--color-ink-soft);
}
/* Nested inside .stamped-reviews-image, which is hidden above — dropped
rather than restructured; the mockup doesn't surface it either. */
.nh-review-stack #stamped-reviews-widget[data-widget-type="carousel"] .stamped-reviews-product-title {
display: none;
}
/* ==========================================================================
CHIP SHAPE — "rak vänster, snedskuren höger"
Every merchandising tag in the theme carries the logotype's cut: the left
edge stays flat and the whole right edge runs on the symbol's backslash
diagonal, so the tag points forward in the reading direction. The cut is
expressed in `em` — 0.5em lands at roughly 30% of a tag's height at the
padding these tags use — so one value holds from the 9px mobile ribbon up
to the 12px discount badge.
Two consequences of clip-path here are deliberate, not oversights:
· a clipped box has no radius, so these tags are the one exception to the
4px One Radius Rule — the diagonal IS the corner treatment;
· clip-path cuts borders and box-shadows off along the diagonal, so a
clipped tag carries its own fill instead of a hairline and uses
`filter: drop-shadow()` where it needs depth.
The extra right padding keeps the label clear of the cut; without it the
last glyph sits on the diagonal. */
.nh-chip {
--nh-cut: 0.5em;
display: inline-flex;
align-items: center;
clip-path: polygon(0 0, calc(100% - var(--nh-cut)) 0, 100% 100%, 0 100%);
border-radius: 0;
}
/* Auto discount badge and shoefinder feature tag — both flush top-left on
the card now, both keep .nh-chip's default shape: flush square edge on
the left (where they anchor to the corner), diagonal slope on the right,
trailing into the photo. Horizontal padding lives here rather than as
Tailwind utilities in the markup because the right side has to clear the
diagonal. Also used inline on the product page (price row). */
.nh-chip--discount {
padding-left: 8px;
padding-right: calc(8px + var(--nh-cut));
}
/* Shoefinder feature tag — same shape/padding as the discount chip above,
in brand color (see the badge markup in list.mustache). When a card also
has the auto discount badge, JS adds .nh-shoefinder-badge--stacked so it
drops below the discount chip instead of overlapping it. */
.nh-chip--feature {
padding-left: 8px;
padding-right: calc(8px + var(--nh-cut));
}
.nh-shoefinder-badge--stacked {
top: 1.75rem;
}
/* Ribbon app → brand tag on product cards.
The Ribbons app injects an absolutely-positioned stack (top-right by
default) with inline styles. On cards we move it flush into the top-left
corner — same shape/slope-right treatment as the two chips above — as a
square tag. The stack is forced to a vertical column so multiple ribbons
stack downward along the left edge.
Heads up: with the discount badge and shoefinder tag now also flush
top-left, a card carrying all three at once will stack three deep —
revisit if that combination turns out to be common.
Inline styles from the app force !important here. */
[data-qb-selector="product-item"] [data-qb-ribbon-stack] {
top: 0 !important;
left: 0 !important;
right: auto !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 4px !important;
}
[data-qb-selector="product-item"] [data-qb-ribbon] {
--nh-cut: 0.5em;
padding: 0.25rem 0.5rem !important;
padding-right: calc(0.5rem + var(--nh-cut)) !important;
border-radius: 0 !important;
clip-path: polygon(0 0, calc(100% - var(--nh-cut)) 0, 100% 100%, 0 100%);
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
[data-qb-selector="product-item"] [data-qb-ribbon] span {
font-size: 0.75rem !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
}
/* Ribbon app on the PRODUCT PAGE → "version 3" split solid pills, overlaid on
the image top-left (the container is absolutely placed there in
product_images.mustache). The app's stack is pulled into normal flow as a
left-aligned row; the marketing flag (.new-product-ribbon) fills teal, every
other ribbon fills ink. */
[data-qb-selector="product-apps-ribbon"] [data-qb-ribbon-stack] {
position: static !important;
flex-direction: row !important;
align-items: center !important;
flex-wrap: wrap !important;
justify-content: flex-start !important;
gap: 6px !important;
}
[data-qb-selector="product-apps-ribbon"] [data-qb-ribbon] {
--nh-cut: 0.5em;
padding: 0.25rem 0.5625rem !important;
padding-right: calc(0.5625rem + var(--nh-cut)) !important;
border-radius: 0 !important;
clip-path: polygon(0 0, calc(100% - var(--nh-cut)) 0, 100% 100%, 0 100%);
/* tinted glass — see-through frosted fill; feature default = ink.
The clip cuts a border off along the diagonal, so the rim highlight is
gone and the fill carries the separation from the photo on its own —
hence the darker alpha than the bordered version had. */
background-color: rgba(14, 15, 16, 0.42) !important;
border: 0 !important;
backdrop-filter: blur(14px) saturate(1.4) !important;
-webkit-backdrop-filter: blur(14px) saturate(1.4) !important;
/* drop-shadow, not box-shadow: a filter follows the clipped silhouette,
a box-shadow would trace the uncut rectangle. */
box-shadow: none !important;
filter: drop-shadow(0 4px 10px rgba(14, 15, 16, 0.3));
}
/* the marketing flag → teal-tinted glass */
[data-qb-selector="product-apps-ribbon"] .new-product-ribbon {
background-color: rgba(10, 115, 150, 0.34) !important;
border-color: rgba(79, 209, 197, 0.55) !important;
}
[data-qb-selector="product-apps-ribbon"] [data-qb-ribbon] span {
font-size: 0.625rem !important;
font-weight: 700 !important;
letter-spacing: 0.05em !important;
text-transform: uppercase !important;
color: #fff !important;
/* keep white type legible where the see-through glass sits over light image areas */
text-shadow: 0 1px 3px rgba(14, 15, 16, 0.4) !important;
}
@media (max-width: 767px) {
[data-qb-selector="product-apps-ribbon"] [data-qb-ribbon] {
padding: 0.1875rem 0.5rem !important;
}
[data-qb-selector="product-apps-ribbon"] [data-qb-ribbon] span {
font-size: 0.5625rem !important;
}
}
/* The "Nyhet" ribbon is a brand-positive signal → Signal Teal fill, wherever
it appears (cards + product page). Other ribbons keep their admin-chosen
colour, so apply the `new-product-ribbon` CSS class only to the Nyhet ribbon. */
.new-product-ribbon {
background-color: var(--color-brand) !important;
}
/* Product gallery.
MOBILE: main slider + a vertical thumbnail rail on the right whose height
follows the main image (JS-set) so thumbnails scroll within it. */
.products-swiper-thumbs {
height: 100%;
overflow: hidden;
}
/* DESKTOP: editorial mosaic — two large images on top, three smaller below,
the rest reachable via "Visa alla bilder". A 6-col grid lets row 1 span
3 cols each and row 2 span 2 cols each; images past the fifth are hidden
from the grid (still in the lightbox). */
.pdp-mosaic {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 8px;
}
.pdp-mosaic > .fullscreen-mosaic {
display: block;
overflow: hidden;
background: var(--bg-mist);
cursor: zoom-in;
}
.pdp-mosaic > .fullscreen-mosaic img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.pdp-mosaic > .fullscreen-mosaic:nth-child(1),
.pdp-mosaic > .fullscreen-mosaic:nth-child(2) {
grid-column: span 3;
aspect-ratio: 4 / 5;
}
.pdp-mosaic > .fullscreen-mosaic:nth-child(3),
.pdp-mosaic > .fullscreen-mosaic:nth-child(4),
.pdp-mosaic > .fullscreen-mosaic:nth-child(5) {
grid-column: span 2;
aspect-ratio: 3 / 4;
}
.pdp-mosaic > .fullscreen-mosaic:nth-child(n+6) {
display: none;
}
/* Single-image product → full-width hero rather than a half-width tile */
.pdp-mosaic > .fullscreen-mosaic:only-child {
grid-column: span 6;
aspect-ratio: 4 / 5;
}
.visa-alla-bilder {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
margin-top: 20px;
padding: 8px;
font-family: inherit;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--color-ink);
background: transparent;
border: 0;
cursor: pointer;
}
.visa-alla-bilder svg {
width: 18px;
height: 18px;
transition: transform 200ms ease;
}
.visa-alla-bilder:hover svg {
transform: translateX(3px);
}
/* Fullscreen lightbox thumbnail strip (desktop + tablet), pinned to the base
of the PhotoSwipe viewport over its white background. */
.pswp-thumbstrip {
position: absolute;
left: 50%;
bottom: 20px;
transform: translateX(-50%);
display: flex;
gap: 6px;
padding: 6px 10px;
max-width: min(92vw, 900px);
overflow-x: auto;
z-index: 100;
scrollbar-width: none;
}
.pswp-thumbstrip::-webkit-scrollbar { display: none; }
.pswp-thumb {
flex: 0 0 auto;
width: 52px;
height: 66px;
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
cursor: pointer;
background: var(--bg-mist);
opacity: 0.5;
transition: opacity 180ms ease;
}
.pswp-thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.pswp-thumb:hover { opacity: 0.85; }
.pswp-thumb.is-active {
opacity: 1;
outline: 2px solid var(--color-ink);
outline-offset: -2px;
}
/* No strip on phones — the fullscreen there is arrows + swipe only. */
@media (max-width: 767px) {
.pswp-thumbstrip { display: none; }
}
@media (max-width: 767px) {
/* No container padding on mobile, so no negative-margin break-out needed */
.products-image-wrapper {
width: 100%;
margin-left: 0;
overflow-x: clip;
}
/* Trim 14% off the frame height — 7% top, 7% bottom — so the gallery eats
less of the first screen. Source photos are 1049×1479 with generous studio
whitespace, so 1479 × 0.86 = 1272 crops air, not product. The definite
slide height also lets the img's h-full resolve, hence object-cover here
overriding the markup's object-contain. */
.products-swiper-main .swiper-slide {
aspect-ratio: 1049 / 1272;
overflow: hidden;
}
.products-swiper-main .swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* Thumbnail slides: square tiles at the rail width, image centre-cropped */
.products-swiper-thumbs .swiper-slide {
width: 100% !important;
height: auto !important;
aspect-ratio: 1 / 1;
background: var(--bg-mist);
}
.products-swiper-thumbs .swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
@media (min-width: 768px) and (max-width: 1279px) {
.products-swiper-main .swiper-slide img {
max-height: 700px;
}
}
@media (min-width: 1280px) {
.products-swiper-main .swiper-slide img {
max-height: 800px;
}
}
/**
* Tailwind
*/
.aspect-1\/1 {
aspect-ratio: 1 / 1;
}
.aspect-4\/3 {
aspect-ratio: 4 / 3;
}
.aspect-3\/2 {
aspect-ratio: 3 / 2;
}
.aspect-5\/3 {
aspect-ratio: 5 / 3;
}
.aspect-3\/4 {
aspect-ratio: 3 / 4;
}
.cursor-zoom-in {
cursor: zoom-in;
}
.scale-75 {
transform: scaleX(0.75) scaleY(0.75);
}
@media (min-width: 768px) {
.md\:scale-100 {
transform: scaleX(1) scaleY(1);
}
}
@media (min-width: 1280px) {
.container {
max-width: 1280px;
}
}
@media (min-width: 1480px) {
.container {
max-width: 1480px;
}
}
select:not([size]) {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
background-position: right 0.5rem center;
background-repeat: no-repeat;
background-size: 1.5em 1.5em;
padding-right: 2.5rem;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.focus\:outline-none:focus {
--tw-ring-color: transparent;
}
/**
* Fix for modal max-height in desktop
*/
@media (min-width: 640px) {
div[modal='search'] {
max-height: 80vh;
}
}
.hidden-empty:empty {
display: none;
}
/**
* Browser scrollbar (Webkit)
*/
body::-webkit-scrollbar {
width: 4px;
height: 4px;
background-color: transparent;
}
body::-webkit-scrollbar-thumb {
width: 4px;
height: 4px;
background-color: var(--color-primary);
border-radius: 0.5rem;
}
/**
* Wishlist
*/
.wishlist-alert {
background: rgba(var(--color-success), .2);
font-size: 1rem !important;
padding: 1rem;
margin-bottom: 1rem;
}
.wishlist-alert i {
display: none;
}
.wishlist-alert .wishlist-addok {
background: #f00;
}
.product [data-qb-selector="product-item"] > a {
height: inherit !important;
width: inherit !important;
}
.wishlist-form-save {
margin-top: 2rem;
}
.wishlist-form-save .btn-primary {
}
.wishlist-sharebox {
max-width: 100% !important;
background: rgba(0,0,0,0.1) !important;
border: none !important;
}
.wishlist-sharebox hr {
margin: 1rem 0 1.5rem 0;
}
.wishlist-sharebox label {
display: block;
margin: 1rem 0 0.2rem 0;
}
.wishlist-sharebox input {
margin-bottom: 0.5rem;
}
.wishlist-sharebox .share-facebook {
border-radius: var(--button-rounding);
}
/**
* Form elements
*/
button.btn {
background: transparen;
color: var(--color-text);
padding: var(--button-py) var(--button-px);
border-radius: var(--button-rounding);
}
button.btn-primary {
color: var(--button-text-primary);
background: var(--color-primary);
}
input.form-control {
display: block;
width: 100%;
padding: var(--input-py) var(--input-px);
background: var(--input-bg);
border: var(--input-border);
border-radius: var(--input-rounding);
color: var(--color-text);
}
label + input.form-control {
margin-bottom: 1rem;
}
/**
* Rating
*/
.reviews-total svg {
width: 2rem;
height: 2rem;
}
/**
* Login
*/
.login,
.register {
max-width: 24rem;
margin: 0 auto;
padding: 0 1rem;
}
.login div,
.register div {
width: 100% !important;
}
.login form,
.register form {
margin-top: 3rem;
text-align: left;
}
.login label,
.register label {
display: block;
margin-bottom: 0.5rem;
text-align: left;
font-size: 0.875rem;
}
.login label.cursor,
.register label.cursor {
padding: 1rem 0;
}
.login label.cursor + label.cursor,
.register label.cursor + label.cursor {
margin-left: 1rem;
}
.login label.cursor,
.register label.cursor,
.login label.cursor > input[type="radio"],
.register label.cursor > input[type="radio"] {
display: inline-block;
width: auto;
cursor: pointer;
}
.login label.cursor > input[type="radio"],
.register label.cursor > input[type="radio"] {
margin-right: .5rem;
width: 1.5rem;
height: 1.5rem;
color: var(--color-primary);
--tw-ring-color: var(--color-primary);
}
.login input[type="text"],
.login input[type="email"],
.login input[type="password"],
.register input[type="text"],
.register input[type="email"],
.register input[type="password"] {
margin-bottom: 1rem;
}
.login .btn-inverse,
.register .btn-inverse,
.register hr + div > a[href] {
margin: 1rem 0 2rem 0;
background-color: var(--color-primary);
color: #ffffff;
font-weight: 600;
padding: var(--input-py) var(--input-px);
border: none;
cursor: pointer;
border-radius: var(--button-rounding);
width: 100%;
}
.register hr + div a[href] {
padding: 0.75rem 2rem;
}
.login .btn-inverse :hover,
.register .btn-inverse :hover {
background-color: var(--color-text);
}
.login br,
.register br {
display: none;
}
.login .btn-inverse:hover,
.register .btn-inverse:hover {
background-color: var(--color-text);
}
.login hr,
.register hr {
margin-bottom: 2rem;
}
.login hr + div,
.register hr + div {
display: block;
}
.login hr + div > a,
.register hr + div > a[href] {
display: block;
margin-bottom: 1rem;
font-size: 1rem !important;
color: var(--color-primary);
}
.login hr + div > a:hover,
.register hr + div > a:hover {
color: var(--color-text);
}
.login hr + div a.btn,
.register hr + div a[href] {
display: block;
background: transparent;
font-size: 1rem !important;
color: var(--color-primary);
border: 1px solid var(--color-primary);
border-radius: var(--button-rounding);
}
.login hr + div a.btn:hover,
.register hr + div a:hover {
background: transparent;
color: var(--color-text);
border-color: var(--color-text);
}
.customerarea_login_message {
margin-bottom: 2rem !important;
}
/**
* Bugfix for theme previewer events
*/
.selected-content .pointer-events-none {
pointer-events: auto;
}
/**
* Hide number input spinners on qty selector
*/
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] { -moz-appearance: textfield; }
/**
* Nordhaus brand overrides — Lättare steg (see DESIGN.md)
* Values from Nordhaus grafisk profil och typografi 2026.
*/
:root {
--color-brand: #1B5159; /* Primary Brand — acts: CTA, active states, links */
--color-brand-hover: #144046; /* flat darken of Primary Brand; house-defined */
--color-brand-deep: #0E3B4D; /* Deep Brand — holds: large dark B2B/storytelling surfaces */
--color-ink: #111111; /* Black — headings, primary text, footer, badges */
--color-body: #3F3F3F; /* Body Text */
--color-ink-soft: #5F5F5F; /* Secondary Text — metadata, microcopy */
--bg-mist: #F6F6F6; /* Light Grey — cards, secondary sections, fields */
--line-hair: rgba(17, 17, 17, 0.12);
--radius-base: 4px; /* The One Radius Rule — 4px or square */
--warm-accent: #A68C86; /* sparing: highlights and details only */
--restep-green: #5F7158;
--restep-green-deep: #434C40;
}
.qs-cart-submit,
.btn-brand {
background-color: var(--color-brand) !important;
color: #ffffff !important;
}
.text-brand {
color: var(--color-brand);
}
.qs-cart-submit:hover,
.btn-brand:hover {
background-color: var(--color-brand-hover) !important;
}
.bg-mist {
background-color: var(--bg-mist);
}
.text-ink-soft {
color: var(--color-ink-soft);
}
.rounded-soft {
border-radius: var(--radius-base);
}
.rounded-t-soft {
border-top-left-radius: var(--radius-base);
border-top-right-radius: var(--radius-base);
}
/* PDP variant swatches (sizes). A flex-wrap row leaves a ragged tail —
13 sizes broke 6/6/1 with dead space on the right. An auto-filling grid
packs each full row flush to the column edge instead.
auto-fill, NOT auto-fit: auto-fit collapses the empty tracks, so a product
with three sizes would stretch into three oversized circles. auto-fill keeps
the tracks, so swatches hold their size no matter how many exist. */
.nh-size-grid {
display: grid;
/* Tracks span the full column width and divide it evenly, so the picker is
as wide as the content around it instead of an arbitrary fixed block.
The minimum sets the track count and so the swatch size: the narrower the
minimum, the more tracks fit. Track counts are whole numbers, so at some
widths a track jumps a long way (343px goes 36px at 8 tracks, 42px at 7);
the max-width on the swatch below absorbs that jump and holds the range
to 36–40px. */
grid-template-columns: repeat(auto-fill, minmax(2.25rem, 1fr));
gap: 0.5rem;
}
.nh-size-grid > * {
min-width: 0;
}
.nh-size-swatch {
width: 100%;
/* Ceiling for the widths where a track overshoots; keeps the swatch from
drifting back up toward its original 44px. */
max-width: 2.5rem;
margin-inline: auto;
aspect-ratio: 1 / 1;
}
/* Header: translucent paper over content, hairline base — no shadow.
The blur MUST live on the inner