/* Jeanettemai v2 — extras NOT in the design handoff source.
Shoptimizer chrome reskin + mobile hybrid bottom bar + WC integration tweaks.
Scoped to body.jm-v2 (body class set by the jm child theme). */
/* =========================================================================
SHOPTIMIZER HEADER RESKIN (ported from fabricly v2 header blocks, 2026-07-02;
palette translated to jm tokens: peach = CTA/fill, pink = accent)
========================================================================= */
/* --- Page background: near-white surface everywhere --- */
body.jm-v2 {
background: var(--cream, #FDFDFC);
color: var(--text, #333E48);
}
/* --- Header: keep Shoptimizer DOM, swap palette + typography --- */
body.jm-v2 #masthead,
body.jm-v2 .site-header,
body.jm-v2 #site-navigation {
background: var(--cream, #FDFDFC) !important;
border-bottom: 1px dashed var(--border, #ECEAE6) !important;
box-shadow: none !important;
}
body.jm-v2 #masthead a,
body.jm-v2 .site-header a,
body.jm-v2 #site-navigation a {
color: var(--text, #333E48);
font-family: 'Nunito', sans-serif;
font-weight: 700;
}
body.jm-v2 .site-branding .site-title,
body.jm-v2 .site-branding a {
font-family: 'Nunito', sans-serif;
font-weight: 900;
letter-spacing: -0.02em;
}
body.jm-v2 #site-navigation a:hover,
body.jm-v2 .main-navigation a:hover {
color: var(--jm-pink, #E27297);
}
/* Footer reskin — preserves all original columns + links, just paints them. */
body.jm-v2 .site-footer,
body.jm-v2 #colophon,
body.jm-v2 .footer-widgets {
background: var(--cream, #FDFDFC) !important;
color: var(--text, #333E48) !important;
border-top: 1px dashed var(--border, #ECEAE6) !important;
}
body.jm-v2 .site-footer a,
body.jm-v2 #colophon a {
color: var(--text, #333E48);
font-family: 'Nunito', sans-serif;
}
body.jm-v2 .site-footer a:hover,
body.jm-v2 #colophon a:hover {
color: var(--jm-pink, #E27297);
}
body.jm-v2 .site-footer h2,
body.jm-v2 .site-footer h3,
body.jm-v2 .site-footer h4,
body.jm-v2 #colophon h2,
body.jm-v2 #colophon h3,
body.jm-v2 #colophon h4 {
font-family: 'Nunito', sans-serif !important;
font-weight: 900 !important;
color: var(--text, #333E48) !important;
}
/* Search field reskin — only the input gets the visible border, not the
wrapper. Painting both produces a double-border look. */
body.jm-v2 .site-search {
background: transparent;
border: 0;
padding: 0;
}
body.jm-v2 .site-search .woocommerce-product-search,
body.jm-v2 .site-search .search-form {
position: relative;
display: flex;
align-items: stretch;
background: #fff;
border: 1.5px solid var(--border, #ECEAE6);
border-radius: 999px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(60, 50, 30, 0.05);
}
body.jm-v2 .site-search input[type="search"],
body.jm-v2 .site-search .search-field {
flex: 1;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 10px 18px !important;
font-family: 'Poppins', sans-serif !important;
font-size: 14px !important;
color: var(--text, #333E48) !important;
outline: none !important;
border-radius: 0 !important;
}
body.jm-v2 .site-search button[type="submit"] {
flex-shrink: 0;
background: var(--jm-yellow, #C75B80) !important;
color: #fff !important;
border: 0 !important;
padding: 0 18px !important;
font-family: 'Nunito', sans-serif !important;
font-weight: 800 !important;
font-size: 13px !important;
letter-spacing: 0.04em !important;
cursor: pointer;
border-radius: 0 !important;
}
body.jm-v2 .site-search button[type="submit"]:hover {
background: var(--jm-yellow-dark, #B14A6F) !important;
}
/* Shoptimizer renders TWO product searches — one in the main header and one in
the secondary nav bar (.shoptimizer-primary-navigation). Hide the secondary
one in v2 so we don't get a phantom white bar next to the categories.
Desktop-only — at ≤992 .col-full-nav becomes Shoptimizer's slide-out
drawer and this .site-search is the drawer's search field (keep it there). */
@media (min-width: 993px) {
body.jm-v2 .shoptimizer-primary-navigation > .site-search,
body.jm-v2 .col-full-nav .site-search {
display: none !important;
}
}
/* Shoptimizer paints a magnifier icon via .woocommerce-product-search::before
that overlaps our placeholder text (left-anchored). The yellow submit button
already provides the search affordance — kill the parent-theme icon. */
body.jm-v2 .woocommerce-product-search::before,
body.jm-v2 .widget_search::before,
body.jm-v2 form.search-form::before,
body.jm-v2 .wp-block-search__inside-wrapper::before {
display: none !important;
content: none !important;
}
/* MOB-R2 FIX-1 ────────────────────────────────────────────────────────────
The whole nav-row reskin below is DESKTOP-ONLY. Shoptimizer switches nav at
992/993: at ≤992 it does NOT hide .col-full-nav — it converts it into the
off-canvas hamburger drawer (position:fixed; left:-300px; width:300px;
min-height:100vh; z-index:102; opened by body.mobile-toggled → left:0).
An unscoped `position:relative !important` destroys that panel: the 100vh
box renders IN FLOW at the top of every page and overlaps the header. */
@media (min-width: 993px) {
/* The secondary nav row (.col-full-nav / .shoptimizer-primary-navigation) had
a white background. With the duplicate search hidden, that left a wide white
strip beside the menu items. Blend the row with the page background. */
body.jm-v2 .col-full-nav,
body.jm-v2 .shoptimizer-primary-navigation {
background: var(--cream, #FDFDFC) !important;
border-top: 1px dashed var(--border, #ECEAE6) !important;
border-bottom: 1px dashed var(--border, #ECEAE6) !important;
}
/* Center the primary nav VISUALLY in the row.
.shoptimizer-primary-navigation IS the .col-full element (same div), so a
`> .col-full` rule matches nothing. The row contains: hidden search +
#site-navigation + cart. Use flex with nav as flex:1 so it expands to fill
the row, then center menu items inside the ul. This keeps the menu ul
at full width — critical because the mega menu anchors to that ul
(`.main-navigation > div > ul { position: relative }`). Absolute-positioning
the nav shrinks it to content-width and breaks mega-menu width. */
body.jm-v2 .col-full-nav {
position: relative !important;
z-index: 100 !important;
}
body.jm-v2 .shoptimizer-primary-navigation {
position: relative !important;
z-index: 100 !important;
display: flex !important;
align-items: center !important;
flex-wrap: nowrap !important;
}
body.jm-v2 .shoptimizer-primary-navigation > #site-navigation,
body.jm-v2 .shoptimizer-primary-navigation > nav.main-navigation {
flex: 1 1 auto !important;
margin: 0 !important;
width: auto !important;
}
body.jm-v2 .shoptimizer-primary-navigation > .site-header-cart,
body.jm-v2 .shoptimizer-primary-navigation > nav.site-header-cart {
flex: 0 0 auto !important;
margin-left: auto !important;
}
body.jm-v2 .shoptimizer-primary-navigation .primary-navigation {
margin: 0 !important;
}
}
/* MOB-R2 FIX-2b — mobile hamburger drawer assist (≤992, matches Shoptimizer's
own switch point). Real open-state structure (from parent main.css/js):
body.mobile-toggled → .col-full-nav slides in (z 102), .mobile-overlay dims
(z 101), .mobile-menu.close-drawer is the X (z 999). Our fixed v2 UI sits at
.fab-mbar z 1000 / #jm-btt z 999, both potentially ABOVE the parent drawer —
so lift the drawer stack over them and hide the bar + back-to-top while the
menu is open (mirrors the cart drawer-open pattern). */
@media (max-width: 992px) {
body.jm-v2 .col-full-nav {
background: #fff !important; /* solid panel — otherwise reads transparent */
}
body.jm-v2 .col-full-nav a {
pointer-events: auto !important;
}
body.jm-v2.mobile-toggled .col-full-nav { z-index: 100001 !important; }
body.jm-v2.mobile-toggled .mobile-overlay { z-index: 100000 !important; }
body.jm-v2.mobile-toggled .mobile-menu.close-drawer { z-index: 100002 !important; }
body.jm-v2.mobile-toggled .fab-mbar,
body.jm-v2.mobile-toggled #jm-btt { display: none !important; }
}
/* ===== Header scrapbook personality =====
Yellow cart pill, nav pill chips with rotation-on-hover, account icon hover —
so the header reads as part of the v2 page rather than stranded above it. */
/* Cart icon → quiet outline glyph, third pass (Marc 2026-08-05: den fyldte
rosa pille "ser stadig ud til at stå oven på noget" — den var det ENESTE
massive element i en header af tynde streg-ikoner: hamburger, line-art-logo,
muted konto-ikon, og mbar'ens outline-faner har allerede en KURV. Integreret
= samme dæmpede blæk som konto-ikonet 20px væk; antallet som lille pink
prik-badge i stedet for en hel pille om det hele).
CSS-only on purpose: the Shoptimizer markup (.amount + .count) stays
untouched so the wc-ajax cart fragment keeps refreshing the count — the
bag glyph is drawn via ::before. */
body.jm-v2 #masthead .shoptimizer-cart .cart-contents {
position: relative;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
/* Parent sets height/line-height 55px + 1px #eee border on .cart-contents;
left alone it bloats into a 55px gray-edged oval on the ~60px
mobile header. Normalize: */
height: auto !important;
line-height: 1 !important;
border: 0 !important;
background: transparent !important;
color: var(--text-mid, #5D7184) !important;
padding: 10px !important;
min-width: 44px;
min-height: 44px;
box-sizing: border-box;
border-radius: 12px !important;
text-decoration: none !important;
transition: color 200ms ease-out !important;
box-shadow: none;
}
/* White bag glyph. Marc 2026-07-29 called the mobile cart "unclear": the old
path was a bare trapezoid (M6 2l-2 6v14h16V8l-2-6z) with no handle, which at
16px reads as an anonymous box rather than a shopping bag. Body + handle,
rounded joins, 18px — the handle is what makes it legible at a glance. */
/* Glyffen tegnes som MASK med currentColor-fyld (før: baked-in hvid stroke i
en background-image, som ingen hover kunne farve). Nu følger den elementets
color — muted i ro, pink på hover, præcis som konto-ikonet. */
body.jm-v2 #masthead .shoptimizer-cart .cart-contents::before {
content: "";
flex: 0 0 auto;
width: 22px;
height: 22px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 8h13l-1.1 11.4a1.5 1.5 0 0 1-1.5 1.35H8.1a1.5 1.5 0 0 1-1.5-1.35z'/%3E%3Cpath d='M9 8V6.2a3 3 0 0 1 6 0V8'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 8h13l-1.1 11.4a1.5 1.5 0 0 1-1.5 1.35H8.1a1.5 1.5 0 0 1-1.5-1.35z'/%3E%3Cpath d='M9 8V6.2a3 3 0 0 1 6 0V8'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.jm-v2 #masthead .shoptimizer-cart .cart-contents:hover {
background: transparent !important;
color: var(--jm-pink, #E27297) !important;
transform: none;
box-shadow: none;
}
/* Price text hidden — the scrapbook pill is glyph + count only. The element
stays in the DOM (display:none, no markup change) so WC fragments still
update it. */
body.jm-v2 #masthead .shoptimizer-cart .cart-contents .amount {
display: none !important;
}
/* Count badge. The parent theme (shoptimizer/src/css/components/header-cart.css
:33) draws the count AS a shopping bag: a 28px-tall #dc9814-bordered body with
a ::after arc for the handle. The v2 pill already has its own glyph, so all
three of those work against it — and #dc9814 is in no v2 palette. Measured
before this fix: 21.9 x 28 under border-radius:999px, i.e. an egg, ringed in
gold, with a gold squiggle floating above it. Marc 2026-07-29: "too heigh,
unclear and doesn't align with the theme". Height/border/margin are the three
parent declarations the old block never overrode. */
body.jm-v2 #masthead .shoptimizer-cart .cart-contents .count {
position: absolute; /* prik-badge på glyffens hjørne, som mbar'ens
fab-mbar__menu-dot — ikke et pille-element */
top: 3px; right: 3px;
height: 16px !important; /* parent's 28px is what made it an egg */
min-width: 16px;
box-sizing: border-box;
border: 1.5px solid #fff !important; /* hvid ring løfter den fra glyffen */
margin-left: 0 !important;
background: var(--jm-pink-dark, #C75B80);
color: #fff;
border-radius: 999px;
padding: 0 4px;
font-size: 10px;
line-height: 13px; /* 16px boks − 2×1.5px border (border-box) */
text-align: center;
font-weight: 800;
font-family: 'Nunito', sans-serif;
}
/* Parent's bag-handle arc — meaningless once the badge is a badge and not a bag */
body.jm-v2 #masthead .shoptimizer-cart .cart-contents .count::after {
content: none !important;
}
/* The DESKTOP cart sits in .col-full-nav, outside #masthead, so every rule above
misses it and it still renders the parent's raw gold bag: #dc9814 border,
#dc9814 digits, gold handle arc. Same off-palette colour Marc flagged on
mobile, 20px away. Colour only — the parent's bag layout is left intact,
because on desktop it sits next to the price and reads correctly there. */
body.jm-v2 .shoptimizer-cart a.cart-contents .count,
body.jm-v2 .shoptimizer-cart a.cart-contents .count:after {
border-color: var(--jm-pink-dark, #C75B80);
color: var(--jm-pink-dark, #C75B80);
}
body.jm-v2 .shoptimizer-cart a.cart-contents:hover .count {
background-color: var(--jm-pink-dark, #C75B80);
}
/* (≤639-kompaktblokken er væk: 44px tap-boksen ligger nu i hovedreglen,
fordi ikonet er ens på alle bredder — der er ingen pille at komprimere.) */
/* GLB-5: style.css's ≤768 header layer absolutely positions account at
right:56px + cart at right:12px — sized for v1's bare cart icon. The v2
yellow pill is ~64-72px wide, so its left edge would overlap the account
icon's tap zone by ~8-16px. Shift the account icon left of the pill and
give it + the hamburger a 44px tap box. 768px (not 899) on purpose:
this block pairs with style.css's `@media (max-width: 768px)` layer. */
/* GLB-5 v2 (2026-08-05): den gamle blok satte KUN `right: 88px` — men aldrig
`position`, og right er virkningsløs på et statisk element (style.css-laget
den kommenterede imod findes ikke længere; grep = 0 match). Målt: ≤768 er
kurven absolut (Shoptimizer-forælderen) og lå BOGSTAVELIGT oven på det
statisk flydende konto-ikon (x=331 vs 334) — den gamle massive pille skjulte
kollisionen, det nye transparente ikon afslørede den. Ved 800px overlapper
de også (12px, via kurv-wrapperen). Én deterministisk regel for hele
Shoptimizer-mobilbåndet ≤992: pin kontoen absolut, venstre for kurvens
faste slot (right:12 + 44 bred + 8px luft = 64). .main-header er
position:relative (målt), så det er konteksten. */
@media (max-width: 992px) {
/* Marc 2026-08-06: konto+kurv i headeren er dubletter af bundbarens faste
KONTO/KURV — VÆK på mobil. Pladsen går til søge-ikonet (eneste synlige
søgeindgang udenfor skuffen; søgende kunder konverterer bedst). */
body.jm-v2 .site-header .jm-header-account,
body.jm-v2 #masthead .shoptimizer-cart {
display: none !important;
}
body.jm-v2 .site-header .jm-header-search {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
color: var(--text-mid, #5D7184);
text-decoration: none;
transition: color 200ms ease-out;
}
body.jm-v2 .site-header .jm-header-search:hover {
color: var(--jm-pink, #E27297);
}
body.jm-v2 .site-header .site-branding .menu-toggle {
min-width: 44px;
min-height: 44px;
}
}
/* Desktop har søgebaren — ikonet er mobilens. */
@media (min-width: 993px) {
body.jm-v2 .site-header .jm-header-search { display: none; }
}
/* GLB-5: at phone widths the logo fills the whole branding box, so widen
the right padding past the relocated account icon (left edge ≈132px
from the viewport right) to keep logo and icon from colliding @360px. */
@media (max-width: 639px) {
body.jm-v2 .site-header .site-branding {
padding-left: 88px !important;
padding-right: 140px !important;
}
}
/* Account icon → muted by default, pink on hover */
body.jm-v2 #masthead .jm-header-account {
color: var(--text-mid, #5D7184) !important;
transition: color 200ms ease-out !important;
}
body.jm-v2 #masthead .jm-header-account:hover {
color: var(--jm-pink, #E27297) !important;
}
/* Primary nav links → scrapbook pills with playful tilt hover.
Direct child combinator (> a) ensures the mega-menu sub-items keep
their existing Shoptimizer dropdown styling untouched. */
body.jm-v2 #site-navigation .menu-primary-menu-container > ul.menu {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
align-items: center !important;
gap: 10px !important;
padding: 0 !important;
margin: 0 auto !important;
list-style: none !important;
width: 100%;
}
body.jm-v2 #site-navigation .menu-primary-menu-container > ul.menu > li.menu-item {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
body.jm-v2 #site-navigation .menu-primary-menu-container > ul.menu > li.menu-item > a {
font-family: 'Nunito', sans-serif !important;
font-weight: 800 !important;
font-size: 16px !important;
letter-spacing: 0.01em !important;
color: var(--text, #333E48) !important;
padding: 10px 18px !important;
border-radius: 10px !important;
text-decoration: none !important;
transition: all 200ms ease-out !important;
line-height: 1.2 !important;
display: inline-flex !important;
align-items: center;
gap: 6px;
}
body.jm-v2 #site-navigation .menu-primary-menu-container > ul.menu > li.menu-item > a:hover {
background: var(--jm-yellow-light, #FAEDF2) !important;
color: var(--jm-yellow-dark, #B14A6F) !important;
transform: rotate(-1deg);
}
body.jm-v2 #site-navigation .menu-primary-menu-container > ul.menu > li.menu-item:nth-child(even) > a:hover {
transform: rotate(1deg);
}
body.jm-v2 #site-navigation .menu-primary-menu-container > ul.menu > li.menu-item:nth-child(3n) > a:hover {
transform: rotate(-1.5deg);
}
/* Caret next to mega-menu parent items (Metervarer, Sytilbehør) */
body.jm-v2 #site-navigation .menu-primary-menu-container > ul.menu > li.menu-item > .caret {
display: inline-block;
font-size: 10px;
color: var(--text-muted, #888);
margin-left: 2px;
}
/* Announcement strip → muted cream-dark instead of yellow so it sits
inside the scrapbook palette rather than fighting it. */
body.jm-v2 .fabricly-announcement {
background: var(--cream-dark) !important;
border-bottom: 1px dashed var(--border) !important;
color: var(--text-mid) !important;
}
body.jm-v2 .fabricly-announcement-inner span {
font-family: 'Nunito', sans-serif !important;
font-weight: 700 !important;
font-size: 12px !important;
letter-spacing: 0.08em !important;
text-transform: uppercase;
color: var(--text-mid) !important;
}
body.jm-v2 .fabricly-announcement-close {
color: var(--text-muted) !important;
}
/* Hide the global "Vertrag widerrufen" floating button (fabricly-widerrufsbutton mu-plugin)
only inside v2. The legal-recall content stays at /widerruf/ and in the footer. */
body.jm-v2 .fab-widerruf-fab,
body.jm-v2 a.fab-widerruf-fab,
body.jm-v2 #fabricly-widerrufsbutton,
body.jm-v2 .fabricly-widerrufsbutton {
display: none !important;
}
/* Standalone utility strip emitted at wp_body_open (before Shoptimizer's #masthead).
Three columns of equal width so the middle "ISSUE 01 · FRÜHLING '26" tag is
geometrically centered regardless of the left and right text length. */
body.jm-v2 .sb-util--standalone {
display: grid !important;
grid-template-columns: 1fr 1fr 1fr;
align-items: center;
width: 100%;
box-sizing: border-box;
text-transform: uppercase;
z-index: 5;
position: relative;
}
body.jm-v2 .sb-util--standalone > span:nth-child(1) { text-align: left; }
body.jm-v2 .sb-util--standalone > span:nth-child(2) { text-align: center; }
body.jm-v2 .sb-util--standalone > span:nth-child(3) { text-align: right; }
@media (max-width: 767px) {
body.jm-v2 .sb-util--standalone {
grid-template-columns: 1fr auto;
padding: 8px 18px;
font-size: 9px;
gap: 8px;
}
body.jm-v2 .sb-util--standalone > span:nth-child(1) { text-align: left; }
body.jm-v2 .sb-util--standalone > span:nth-child(2) { display: none; }
body.jm-v2 .sb-util--standalone > span:nth-child(3) { text-align: right; }
}
/* WP page wrappers from the parent theme can over-constrain v2 templates;
let v2 templates breathe full-width but still inside Shoptimizer chrome. */
body.jm-v2 #content,
body.jm-v2 #primary,
body.jm-v2 .site-content {
background: transparent !important;
}
body.jm-v2 #content > .col-full,
body.jm-v2 .site-content > .col-full {
max-width: none !important;
padding: 0 !important;
}
/* ===== Mobile hybrid bottom bar ===== */
/* Three context variants:
- .fab-mbar--pdp → hamburger + heart + ATC pill (product pages)
- .fab-mbar--cta → hamburger + big CTA (cart, checkout)
- .fab-mbar--tabs → 5-tab nav (Start / Shop / Liste / Konto / Korb) */
.fab-mbar {
position: fixed;
left: 0; right: 0; bottom: 0;
display: none;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: #fff;
border-top: 1px solid var(--border);
box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.06);
z-index: 1000;
box-sizing: border-box;
}
.fab-mbar--tabs {
gap: 0;
padding: 6px 4px 8px;
}
.fab-mbar__menu {
position: relative;
flex-shrink: 0;
width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
border-radius: 12px;
background: var(--cream);
color: var(--text);
text-decoration: none;
}
.fab-mbar__menu-dot {
position: absolute;
top: 6px; right: 6px;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--jm-yellow);
border: 1.5px solid #fff;
}
.fab-mbar__heart {
flex-shrink: 0;
width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
border-radius: 12px;
background: var(--cream);
color: var(--text);
text-decoration: none;
border: 1px solid var(--border);
}
.fab-mbar__heart:hover { color: var(--jm-yellow); }
.fab-mbar__cta {
flex: 1;
justify-content: center;
padding: 14px 18px !important;
font-size: 15px !important;
text-align: center;
text-decoration: none;
}
.fab-mbar__tab {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
padding: 6px 4px;
font-family: 'Nunito', sans-serif;
font-weight: 700;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-mid);
text-decoration: none;
position: relative;
transition: color 0.15s ease;
}
.fab-mbar__tab svg {
width: 22px; height: 22px;
stroke-width: 1.75;
}
.fab-mbar__tab:hover { color: var(--text); }
.fab-mbar__tab.is-active {
color: var(--jm-yellow);
}
.fab-mbar__tab.is-active::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 24px; height: 2px;
background: var(--jm-yellow);
border-radius: 0 0 2px 2px;
}
.fab-mbar__badge {
position: absolute;
top: 2px;
right: calc(50% - 18px);
background: var(--jm-yellow);
color: #fff;
font-size: 10px;
font-weight: 800;
min-width: 16px; height: 16px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 4px;
border: 1.5px solid #fff;
}
.fab-mbar-spacer { height: 0; }
@media (max-width: 767px) {
.fab-mbar { display: flex; }
.fab-mbar-spacer { height: 76px; }
}
/* ===== Preview banner ===== */
.fab-v2-banner {
background: var(--jm-pink-dark);
color: #fff;
text-align: center;
padding: 12px 16px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.06em;
}
.fab-v2-banner a { color: #fff; text-decoration: underline; margin-left: 6px; }
/* ===== WooCommerce form integration in v2 chrome ===== */
/* WC's quantity input + ATC button styling on PDP */
.pdp__qty-steps .qty,
.pdp__qty-steps input[type="number"] {
font-family: 'Nunito', sans-serif;
font-weight: 800;
font-size: 18px;
width: 60px;
text-align: center;
border: 0;
background: transparent;
-moz-appearance: textfield;
}
.pdp__qty-steps input::-webkit-outer-spin-button,
.pdp__qty-steps input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Hide native cart/checkout headings — we provide our own eyebrow + h1 */
.jm-v2 .woocommerce > h2:first-child,
.jm-v2 .woocommerce-cart h2:first-child { display: none; }
/* WooCommerce buttons inside v2 → use coral primary look */
.jm-v2 .woocommerce #respond input#submit,
.jm-v2 .woocommerce a.button.alt,
.jm-v2 .woocommerce button.button.alt,
.jm-v2 .woocommerce input.button.alt,
.jm-v2 .woocommerce a.button,
.jm-v2 .woocommerce button.button,
.jm-v2 .woocommerce input.button {
background: var(--jm-yellow) !important;
color: #fff !important;
border: none !important;
border-radius: 14px !important;
padding: 14px 24px !important;
font-family: 'Nunito', sans-serif !important;
font-weight: 800 !important;
box-shadow: var(--shadow-cta) !important;
transition: all 200ms ease-out !important;
}
.jm-v2 .woocommerce a.button:hover,
.jm-v2 .woocommerce button.button:hover {
background: var(--jm-yellow-dark) !important;
transform: translateY(-2px);
box-shadow: var(--shadow-cta-hover) !important;
}
/* Form fields adopt cream + rounded look inside v2 cart/checkout */
.jm-v2 .woocommerce form .form-row input.input-text,
.jm-v2 .woocommerce form .form-row textarea,
.jm-v2 .woocommerce-checkout #payment ul.payment_methods,
.jm-v2 .select2-container--default .select2-selection--single {
border-radius: 12px !important;
border: 2px solid var(--border) !important;
background: #fff !important;
font-family: 'Poppins', sans-serif !important;
}
.jm-v2 .woocommerce form .form-row input.input-text:focus,
.jm-v2 .woocommerce form .form-row textarea:focus {
border-color: var(--jm-pink) !important;
outline: none !important;
}
/* Checkout grid lives further down the file — keyed off body.jm-v2.woocommerce-checkout */
/* Cart layout polish */
.jm-v2 .woocommerce-cart .cart-collaterals { margin-top: 40px; }
.jm-v2 .cart_totals h2 {
font-family: 'Nunito', sans-serif;
font-weight: 900;
font-size: 28px;
}
/* Scrapbook chrome around WC content */
.fab-v2-chrome {
padding: 60px 80px 80px;
max-width: 1280px;
margin: 0 auto;
}
.fab-v2-chrome__head {
margin-bottom: 36px;
}
.fab-v2-chrome__eyebrow {
font-family: 'Nunito', sans-serif;
font-weight: 800;
font-size: 13px;
letter-spacing: 0.22em;
color: var(--jm-yellow);
text-transform: uppercase;
margin-bottom: 14px;
}
.fab-v2-chrome__h1 {
font-family: 'Nunito', sans-serif;
font-weight: 900;
font-size: 56px;
line-height: 1.02;
letter-spacing: -1.2px;
margin: 0 0 14px;
}
.fab-v2-chrome__sub {
font-family: 'Caveat', cursive;
font-size: 22px;
color: var(--text-mid);
font-style: italic;
margin-bottom: 20px;
}
@media (max-width: 767px) {
.fab-v2-chrome { padding: 32px 18px 60px; }
.fab-v2-chrome__h1 { font-size: 36px; }
/* 2026-07-22: the old pre-pass pdp__main/pdp__info/plp__grid/plp__facets
!important patch was PRUNED here — fabricly deleted it upstream when the
consolidated PDP/PLP mobile sections took over; those now arrive via
mobile-sync.css (incl. Bug 7's single-column guarantee). Leaving the
patch would beat the new layer on !important. See mobile-sync-report. */
.plp__banner {
grid-template-columns: 1fr !important;
gap: 0 !important;
padding: 28px 22px 24px !important;
margin: 24px 14px 28px !important;
text-align: left !important;
}
.plp__banner-h1 { font-size: 34px !important; line-height: 1.05 !important; }
.plp__banner-sub { font-size: 15px !important; max-width: none !important; }
.plp__banner-count {
text-align: left !important;
font-size: 14px !important;
color: var(--jm-pink, #E27297) !important;
margin-top: 16px !important;
padding-top: 14px !important;
border-top: 1px dashed rgba(0, 0, 0, 0.14) !important;
display: flex !important;
align-items: baseline !important;
gap: 8px !important;
}
.plp__banner-count strong {
display: inline !important;
font-size: 24px !important;
line-height: 1 !important;
letter-spacing: -0.5px !important;
}
.pdp__related-grid { grid-template-columns: 1fr 1fr !important; }
.pdp__story {
grid-template-columns: 1fr !important;
padding: 32px 20px !important;
margin: 0 14px 40px !important;
gap: 28px !important;
}
.pdp__story-portrait { width: 160px !important; margin: 0 auto; }
.pdp__story-h { font-size: 26px !important; }
}
@media (min-width: 768px) and (max-width: 1100px) {
.pdp__story {
grid-template-columns: 180px 1fr !important;
padding: 48px 36px !important;
margin: 0 32px 60px !important;
gap: 36px !important;
}
}
/* ===== Phase 4: Flyout cart (Shoptimizer drawer reskin) ===== */
body.jm-v2 .shoptimizer-mini-cart-wrap {
background: var(--cream, #FAF6EE) !important;
border-left: 1px dashed rgba(0, 0, 0, 0.18) !important;
box-shadow: -16px 0 40px rgba(0, 0, 0, 0.08) !important;
padding: 22px 22px 28px !important;
display: flex;
flex-direction: column;
}
/* Drawer slides in on every viewport — desktop AND mobile.
Mobile note: Shoptimizer's source has this rule too but WP Rocket's Used CSS
sometimes prunes it. Repeating here guarantees the Korb tap on /shop/ opens. */
body.jm-v2.drawer-open .shoptimizer-mini-cart-wrap { right: 0 !important; z-index: 100002 !important; }
body.jm-v2.drawer-open .fab-mbar { display: none !important; }
@media (min-width: 768px) {
/* Bump drawer a bit wider so item names + prices breathe */
body.jm-v2 .shoptimizer-mini-cart-wrap {
width: 460px !important;
right: -460px !important;
}
}
body.jm-v2 .shoptimizer-mini-cart-wrap::before {
/* tape strip — masking tape with subtle vertical fibres */
content: "";
position: absolute;
top: -8px; left: 28px;
width: 110px; height: 24px;
background:
linear-gradient(90deg, transparent 0, rgba(255,255,255,0.35) 30%, transparent 60%),
repeating-linear-gradient(90deg, rgba(255,255,255,0.18) 0 1px, transparent 1px 6px),
rgba(255, 207, 99, 0.65);
border: 1px dashed rgba(0, 0, 0, 0.18);
transform: rotate(-2.5deg);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
pointer-events: none;
z-index: 5;
}
/* Shoptimizer drawer heading — replaced by .fab-flycart-header rendered inside
.widget_shopping_cart_content via woocommerce_before_mini_cart so the count
updates via cart-fragments AJAX. */
body.jm-v2 .shoptimizer-mini-cart-wrap .cart-drawer-heading {
display: none !important;
}
/* New summary header (eyebrow + count + total meters) */
body.jm-v2 .shoptimizer-mini-cart-wrap .fab-flycart-header {
margin: 0 0 16px;
padding: 0 0 14px;
border-bottom: 1px dashed rgba(0, 0, 0, 0.12);
}
body.jm-v2 .shoptimizer-mini-cart-wrap .fab-flycart-header__eyebrow {
font-family: 'Nunito', sans-serif;
font-weight: 800;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--jm-yellow, #E76A5C);
margin: 0 0 4px;
}
body.jm-v2 .shoptimizer-mini-cart-wrap .fab-flycart-header__summary {
font-family: 'Nunito', sans-serif;
font-weight: 700;
font-size: 22px;
line-height: 1.2;
color: var(--text, #2A2A2A);
letter-spacing: -0.01em;
}
body.jm-v2 .shoptimizer-mini-cart-wrap .fab-flycart-header__summary strong {
font-weight: 900;
}
/* Breathing room above the progress bar / first item card */
body.jm-v2 .shoptimizer-mini-cart-wrap .widget_shopping_cart_content {
padding-top: 14px !important;
}
body.jm-v2 .shoptimizer-mini-cart-wrap .close-drawer {
top: 16px !important;
right: 16px !important;
color: var(--text, #2A2A2A) !important;
}
/* Mini cart item rows */
body.jm-v2 .shoptimizer-mini-cart-wrap .woocommerce-mini-cart {
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
}
/* Actual mini-cart DOM (verified via wp_eval render):
li.mini_cart_item
├── a.remove (×)
├── a (img + span.fab-mc-title + div.fab-mc-meta[hidden])
├── dl.variation [hidden]
├── div.fabricly-mc-stepper (the −1,0m+ pill)
└── div.fabricly-mc-price (the price)
Stepper + price are TOP-LEVEL siblings, not wrapped in .quantity.
Layout: 2-col grid — title (col 1, spans both rows) + stepper-over-price (col 2). */
body.jm-v2 .shoptimizer-mini-cart-wrap .mini_cart_item {
position: relative;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 12px;
padding: 10px 32px 10px 10px !important;
margin-bottom: 8px !important;
display: grid !important;
grid-template-columns: 1fr auto !important;
grid-template-rows: auto auto !important;
column-gap: 12px !important;
row-gap: 4px !important;
align-items: center !important;
box-sizing: border-box !important;
overflow: visible !important;
}
body.jm-v2 .shoptimizer-mini-cart-wrap .mini_cart_item a:not(.remove):not(.fabricly-mc-find-match) {
grid-column: 1 / 2 !important;
grid-row: 1 / 3 !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
min-width: 0 !important;
font-family: 'Nunito', sans-serif !important;
font-weight: 700 !important;
font-size: 13px !important;
line-height: 1.3 !important;
color: var(--text, #2A2A2A) !important;
text-decoration: none !important;
}
body.jm-v2 .shoptimizer-mini-cart-wrap .mini_cart_item .fab-mc-title {
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
word-break: break-word !important;
flex: 1 1 auto !important;
min-width: 0 !important;
}
body.jm-v2 .shoptimizer-mini-cart-wrap .mini_cart_item img {
width: 52px !important;
height: 52px !important;
border-radius: 8px;
object-fit: cover;
margin: 0 !important;
flex-shrink: 0;
}
/* Free-ship progress strip — re-skin fabricly-psychology's .fabricly-shipping-progress
in the scrapbook white-card style. The bar is rendered (and AJAX-updated) by
fabricly-psychology.php on woocommerce_widget_shopping_cart_before_buttons. */
body.jm-v2 .shoptimizer-mini-cart-wrap .fabricly-shipping-progress {
background: #fff !important;
border: 1px solid rgba(0, 0, 0, 0.08) !important;
border-radius: 12px !important;
padding: 12px 14px !important;
margin: 0 0 14px !important;
box-shadow: none !important;
}
body.jm-v2 .shoptimizer-mini-cart-wrap .fabricly-shipping-progress__content {
display: flex !important;
align-items: center !important;
gap: 8px !important;
margin-bottom: 8px !important;
}
body.jm-v2 .shoptimizer-mini-cart-wrap .fabricly-shipping-msg {
font-family: 'Nunito', sans-serif !important;
font-size: 13px !important;
line-height: 1.4 !important;
color: var(--text-mid, #5A5A5A) !important;
margin: 0 !important;
}
body.jm-v2 .shoptimizer-mini-cart-wrap .fabricly-shipping-remaining {
color: var(--jm-yellow, #E76A5C) !important;
font-weight: 900 !important;
}
body.jm-v2 .shoptimizer-mini-cart-wrap .fabricly-shipping-msg.fabricly-shipping-free {
color: #1F8A4C !important;
font-weight: 800 !important;
}
body.jm-v2 .shoptimizer-mini-cart-wrap .fabricly-ship-icon {
color: var(--jm-pink, #2F6F6E);
flex-shrink: 0;
}
body.jm-v2 .shoptimizer-mini-cart-wrap .fabricly-progress-bar {
background: rgba(0, 0, 0, 0.06) !important;
height: 6px !important;
border-radius: 3px !important;
overflow: hidden !important;
}
body.jm-v2 .shoptimizer-mini-cart-wrap .fabricly-progress-fill {
height: 100% !important;
background: linear-gradient(90deg, var(--jm-yellow, #E76A5C), #F8B05A) !important;
border-radius: 3px !important;
transition: width 0.4s ease !important;
}
/* Hide the legacy .fab-flycart-progress class if it shows up from a stale
localStorage cart fragment — only psychology's bar should be visible on v2. */
body.jm-v2 .shoptimizer-mini-cart-wrap .fab-flycart-progress {
display: none !important;
}
/* Delivery date pill — prominent, sits directly above the checkout button.
Soft mint/teal so it reads as a positive logistics confirmation. */
.fab-flycart-delivery {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
background: rgba(226, 114, 151, 0.10);
border: 1px solid rgba(226, 114, 151, 0.30);
border-radius: 12px;
font-family: 'Nunito', sans-serif;
font-size: 13px;
line-height: 1.35;
color: var(--text, #2A2A2A);
margin: 0 0 14px;
}
.fab-flycart-delivery strong {
color: var(--text, #2A2A2A);
font-weight: 800;
white-space: nowrap;
}
.fab-flycart-delivery__icon {
display: inline-flex;
color: var(--jm-pink, #E27297);
flex-shrink: 0;
}
/* Trust strip below buttons */
.fab-flycart-trust {
display: flex;
justify-content: space-between;
gap: 8px;
padding: 10px 0 4px;
margin-top: 12px;
border-top: 1px dashed rgba(0, 0, 0, 0.12);
font-family: 'Nunito', sans-serif;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-mid, #5A5A5A);
}
.fab-flycart-trust span {
display: inline-flex;
align-items: center;
gap: 4px;
}
.fab-flycart-trust svg {
color: var(--jm-pink, #2F6F6E);
flex-shrink: 0;
}
/* Recommendations strip */
.fab-flycart-recs {
margin-top: 18px;
padding-top: 14px;
border-top: 1px dashed rgba(0, 0, 0, 0.12);
}
.fab-flycart-recs__eyebrow {
font-family: 'Nunito', sans-serif;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-mid, #5A5A5A);
display: block;
margin-bottom: 10px;
}
.fab-flycart-recs__strip {
display: flex;
flex-direction: column;
gap: 8px;
}
.fab-flycart-rec {
display: flex;
align-items: center;
gap: 10px;
padding: 8px;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 10px;
text-decoration: none;
color: inherit;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.fab-flycart-rec:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
color: inherit;
}
.fab-flycart-rec__img {
width: 44px; height: 44px;
border-radius: 6px;
object-fit: cover;
flex-shrink: 0;
}
.fab-flycart-rec__body { flex: 1; min-width: 0; }
.fab-flycart-rec__title {
font-family: 'Nunito', sans-serif;
font-weight: 700;
font-size: 13px;
color: var(--text, #2A2A2A);
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fab-flycart-rec__price {
font-family: 'Nunito', sans-serif;
font-size: 12px;
color: var(--jm-yellow, #E76A5C);
font-weight: 800;
margin-top: 2px;
}
.fab-flycart-rec__price del {
color: var(--text-muted, #888);
font-weight: 500;
margin-right: 4px;
}
/* Buttons inside the drawer — strip default styling (Shoptimizer adds a white
card background on .woocommerce-mini-cart__buttons, which makes the text-link
"Warenkorb ansehen" sit inside a visible box). */
body.jm-v2 .shoptimizer-mini-cart-wrap .woocommerce-mini-cart__buttons {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
margin: 12px 0 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
body.jm-v2 .shoptimizer-mini-cart-wrap .woocommerce-mini-cart__buttons a.button {
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
width: 100% !important;
max-width: 100% !important;
min-height: 48px !important;
margin: 0 !important;
text-align: center !important;
border-radius: 999px !important;
padding: 12px 18px !important;
font-family: 'Nunito', sans-serif !important;
font-weight: 800 !important;
font-size: 14px !important;
letter-spacing: 0.01em !important;
text-transform: none !important;
text-decoration: none !important;
text-indent: 0 !important;
visibility: visible !important;
opacity: 1 !important;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
background: #fff !important;
color: var(--text, #2A2A2A) !important;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* Shoptimizer adds a ::before lock icon on a.checkout — make sure it sits inline
with the label and the pair is centered as a unit (gap is on the flex parent above). */
body.jm-v2 .shoptimizer-mini-cart-wrap .woocommerce-mini-cart__buttons a.checkout::before {
position: static !important;
margin: 0 !important;
transform: none !important;
}
body.jm-v2 .shoptimizer-mini-cart-wrap .woocommerce-mini-cart__buttons a.checkout {
order: 1;
background: var(--jm-yellow, #E76A5C) !important;
color: #fff !important;
border-color: var(--jm-yellow, #E76A5C) !important;
min-height: 54px !important;
font-size: 16px !important;
}
/* Defensive: force text colour to win over any inherited transparent / 0-color rules */
body.jm-v2 .shoptimizer-mini-cart-wrap .woocommerce-mini-cart__buttons a.checkout,
body.jm-v2 .shoptimizer-mini-cart-wrap .woocommerce-mini-cart__buttons a.checkout * {
color: #fff !important;
-webkit-text-fill-color: #fff !important;
}
/* "Warenkorb ansehen" — small text link below the primary checkout button */
body.jm-v2 .shoptimizer-mini-cart-wrap .woocommerce-mini-cart__buttons a.button:not(.checkout) {
order: 2;
background: transparent !important;
border: none !important;
min-height: 0 !important;
padding: 4px 8px !important;
color: var(--text-mid, #5A5A5A) !important;
font-size: 13px !important;
font-weight: 700 !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
text-decoration-thickness: 1px !important;
text-decoration-color: rgba(0, 0, 0, 0.2) !important;
border-radius: 0 !important;
}
body.jm-v2 .shoptimizer-mini-cart-wrap .woocommerce-mini-cart__buttons a.button:not(.checkout):hover {
color: var(--jm-yellow, #E76A5C) !important;
text-decoration-color: var(--jm-yellow, #E76A5C) !important;
background: transparent !important;
border: none !important;
}
/* Default WC subtotal action is removed in PHP for v2, so the
wrapper only
contains our custom .fab-flycart-totals. Strip the
's default text styling
so it doesn't add extra padding/border around our card. */
body.jm-v2 .shoptimizer-mini-cart-wrap .woocommerce-mini-cart__total {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
text-align: left !important;
font-size: inherit !important;
font-weight: normal !important;
}
/* Custom totals breakdown: subtotal, savings (green), shipping note, total (coral).
Matches the screenshot ref: dark Zwischensumme, green discount, small grey
shipping note, big coral Gesamt (both label + value coral). */
body.jm-v2 .shoptimizer-mini-cart-wrap .fab-flycart-totals {
margin: 14px 0 0;
padding: 0;
background: transparent;
border: 0;
font-family: 'Nunito', sans-serif;
}
body.jm-v2 .shoptimizer-mini-cart-wrap .fab-flycart-totals__row {
display: flex !important;
justify-content: space-between !important;
align-items: baseline !important;
gap: 12px !important;
font-size: 15px !important;
line-height: 1.4 !important;
margin: 0 0 10px !important;
color: var(--text, #2A2A2A) !important;
}
body.jm-v2 .shoptimizer-mini-cart-wrap .fab-flycart-totals__row:last-child {
margin-bottom: 0 !important;
}
body.jm-v2 .shoptimizer-mini-cart-wrap .fab-flycart-totals__label {
font-weight: 700 !important;
color: var(--text, #2A2A2A) !important;
}
body.jm-v2 .shoptimizer-mini-cart-wrap .fab-flycart-totals__value,
body.jm-v2 .shoptimizer-mini-cart-wrap .fab-flycart-totals__value .amount,
body.jm-v2 .shoptimizer-mini-cart-wrap .fab-flycart-totals__value bdi {
font-weight: 800 !important;
color: var(--text, #2A2A2A) !important;
white-space: nowrap !important;
}
body.jm-v2 .shoptimizer-mini-cart-wrap .fab-flycart-totals__row--save .fab-flycart-totals__label,
body.jm-v2 .shoptimizer-mini-cart-wrap .fab-flycart-totals__row--save .fab-flycart-totals__value,
body.jm-v2 .shoptimizer-mini-cart-wrap .fab-flycart-totals__row--save .fab-flycart-totals__value .amount,
body.jm-v2 .shoptimizer-mini-cart-wrap .fab-flycart-totals__row--save .fab-flycart-totals__value bdi {
color: #1F8A4C !important;
font-weight: 800 !important;
}
body.jm-v2 .shoptimizer-mini-cart-wrap .fab-flycart-totals__row--note {
font-size: 13px !important;
margin-bottom: 14px !important;
padding-bottom: 14px !important;
border-bottom: 1px dashed rgba(0, 0, 0, 0.15) !important;
}
body.jm-v2 .shoptimizer-mini-cart-wrap .fab-flycart-totals__row--note .fab-flycart-totals__label,
body.jm-v2 .shoptimizer-mini-cart-wrap .fab-flycart-totals__row--note .fab-flycart-totals__value {
color: var(--text-mid, #5A5A5A) !important;
font-weight: 600 !important;
font-size: 13px !important;
}
body.jm-v2 .shoptimizer-mini-cart-wrap .fab-flycart-totals__row--total {
align-items: center !important;
margin-top: 4px !important;
margin-bottom: 14px !important;
}
body.jm-v2 .shoptimizer-mini-cart-wrap .fab-flycart-totals__row--total .fab-flycart-totals__label {
font-family: 'Nunito', sans-serif !important;
font-weight: 900 !important;
font-size: 28px !important;
line-height: 1.1 !important;
color: var(--jm-yellow, #E76A5C) !important;
letter-spacing: -0.01em !important;
}
body.jm-v2 .shoptimizer-mini-cart-wrap .fab-flycart-totals__row--total .fab-flycart-totals__value,
body.jm-v2 .shoptimizer-mini-cart-wrap .fab-flycart-totals__row--total .fab-flycart-totals__value .amount,
body.jm-v2 .shoptimizer-mini-cart-wrap .fab-flycart-totals__row--total .fab-flycart-totals__value bdi {
font-family: 'Nunito', sans-serif !important;
font-weight: 900 !important;
font-size: 24px !important;
line-height: 1.1 !important;
color: var(--jm-yellow, #E76A5C) !important;
}
/* Drawer wrap: cap to viewport and scroll internally. Without explicit height,
the flex-column container auto-grows past the viewport and content (especially
the recs strip + bundle CTAs) ends up below the fold — items are at the top
but the drawer's render position pushes them out of sight. */
body.jm-v2 .shoptimizer-mini-cart-wrap {
height: 100vh !important;
height: 100dvh !important;
max-height: 100vh !important;
max-height: 100dvh !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
/* Parent Shoptimizer CSS sets .product_list_widget { flex:1; overflow-y:auto }
which collapses the items list to height 0 whenever our header + totals +
delivery pill + buttons + trust + recs sum past the viewport — that's the
"items invisible at 100% zoom" bug. Force intrinsic sizing and let the OUTER
wrap handle scrolling instead. */
body.jm-v2 .shoptimizer-mini-cart-wrap .widget_shopping_cart {
display: block !important;
height: auto !important;
overflow: visible !important;
margin-top: 50px !important;
/* Parent theme pads the widget 20px each side ON TOP of the drawer's own
22px gutter — 42px dead rails. Span the drawer's full inner width
(fabricly fix 2026-07-22, their v2-extras 2.9.99 ~L1534; handoff §7.4). */
padding-left: 0 !important;
padding-right: 0 !important;
width: 100% !important;
}
body.jm-v2 .shoptimizer-mini-cart-wrap .widget_shopping_cart_content {
display: block !important;
}
body.jm-v2 .shoptimizer-mini-cart-wrap .product_list_widget,
body.jm-v2 .shoptimizer-mini-cart-wrap ul.cart_list {
flex: 0 0 auto !important;
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
padding-right: 0 !important;
display: block !important;
}
body.jm-v2 .shoptimizer-mini-cart-wrap .woocommerce-mini-cart.cart_list:before {
display: none !important;
}
body.jm-v2 .shoptimizer-mini-cart-wrap::-webkit-scrollbar { width: 6px; }
body.jm-v2 .shoptimizer-mini-cart-wrap::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.12);
border-radius: 3px;
}
/* Stepper and price live in column 2 of the grid (top + bottom rows, right-aligned).
.quantity (the WC default wrapper) doesn't render in this theme — these classes do. */
body.jm-v2 .shoptimizer-mini-cart-wrap .mini_cart_item .fabricly-mc-stepper {
grid-column: 2 !important;
grid-row: 1 !important;
justify-self: end !important;
align-self: end !important;
margin: 0 !important;
}
body.jm-v2 .shoptimizer-mini-cart-wrap .mini_cart_item .fabricly-mc-price {
grid-column: 2 !important;
grid-row: 2 !important;
justify-self: end !important;
align-self: start !important;
margin: 0 !important;
font-size: 13px !important;
font-weight: 800 !important;
color: var(--text, #2A2A2A) !important;
white-space: nowrap;
}
body.jm-v2 .shoptimizer-mini-cart-wrap .mini_cart_item .fabricly-mc-find-match {
grid-column: 1 / -1 !important;
grid-row: 3 !important;
margin: 4px 0 0 !important;
padding: 6px 10px !important;
background: rgba(226, 114, 151, 0.08) !important;
border-radius: 8px !important;
font-size: 12px !important;
font-weight: 600 !important;
color: var(--jm-pink, #4CA4A5) !important;
text-decoration: none !important;
text-align: center !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* Hide the per-item meta caption ("Bündchen", "Uni-…", etc.) — stepper is enough */
body.jm-v2 .shoptimizer-mini-cart-wrap .mini_cart_item .fab-mc-meta {
display: none !important;
}
/* Hide the "Länge: X,Xm" data row — same value already shown in the stepper */
body.jm-v2 .shoptimizer-mini-cart-wrap .mini_cart_item dl.variation,
body.jm-v2 .shoptimizer-mini-cart-wrap .mini_cart_item .variation,
body.jm-v2 .shoptimizer-mini-cart-wrap .mini_cart_item .wc-item-meta {
display: none !important;
}
/* Stepper: single unified pill. Buttons sit borderless inside so the whole
thing reads as one rounded element instead of three floating circles.
Outer pill carries the cream bg + border; inner buttons are transparent
until hover, when they pick up a subtle coral tint. */
body.jm-v2 .shoptimizer-mini-cart-wrap .mini_cart_item .fabricly-mc-stepper {
display: inline-flex !important;
align-items: center !important;
gap: 0 !important;
margin: 0 !important;
padding: 2px 4px !important;
background: var(--cream, #FBF6EE) !important;
border: 1px solid rgba(0,0,0,0.08) !important;
border-radius: 999px !important;
}
body.jm-v2 .shoptimizer-mini-cart-wrap .fabricly-mc-stepper__btn {
width: 24px !important;
height: 24px !important;
border-radius: 50% !important;
border: none !important;
background: transparent !important;
color: var(--text-mid, #5A5A5A) !important;
font-weight: 700 !important;
font-size: 15px !important;
line-height: 1 !important;
padding: 0 !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
transition: background 150ms ease, color 150ms ease !important;
}
body.jm-v2 .shoptimizer-mini-cart-wrap .fabricly-mc-stepper__btn:hover {
background: var(--jm-yellow, #E76A5C) !important;
color: #fff !important;
}
body.jm-v2 .shoptimizer-mini-cart-wrap .fabricly-mc-stepper__val {
min-width: 36px !important;
text-align: center !important;
font-family: 'Nunito', sans-serif !important;
font-weight: 800 !important;
font-size: 12px !important;
color: var(--text, #2A2A2A) !important;
padding: 0 2px !important;
}
/* Remove (×) button — top-right of each row, sitting on top of image.
Shoptimizer parent CSS positions .remove absolute top:0 left:0 by default,
which lands behind the product image. Force top-right + z-index. */
body.jm-v2 .shoptimizer-mini-cart-wrap .mini_cart_item a.remove,
body.jm-v2 .shoptimizer-mini-cart-wrap .woocommerce-mini-cart-item a.remove {
position: absolute !important;
z-index: 3 !important;
top: 8px !important;
right: 8px !important;
left: auto !important;
bottom: auto !important;
width: 22px !important;
height: 22px !important;
line-height: 20px !important;
border-radius: 50% !important;
background: rgba(0,0,0,0.04) !important;
color: var(--text-mid, #5A5A5A) !important;
font-size: 14px !important;
font-weight: 600 !important;
text-align: center !important;
transition: background 0.15s ease, color 0.15s ease;
}
body.jm-v2 .shoptimizer-mini-cart-wrap .mini_cart_item a.remove:hover {
background: var(--jm-yellow, #E76A5C) !important;
color: #fff !important;
}
/* Recs head wrapper — already has eyebrow, just give it spacing */
.fab-flycart-recs__head {
margin: 0 0 10px;
}
/* ===== Empty drawer state ===== */
.fab-flycart-empty {
text-align: center;
padding: 32px 20px 12px;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.fab-flycart-empty__illu {
margin-bottom: 4px;
}
.fab-flycart-empty__head {
font-family: 'Nunito', sans-serif;
font-weight: 900;
font-size: 22px;
color: var(--text, #2A2A2A);
letter-spacing: -0.01em;
}
.fab-flycart-empty__sub {
font-family: 'Caveat', cursive;
font-size: 20px;
color: var(--text-mid, #5A5A5A);
line-height: 1.3;
max-width: 280px;
}
.fab-flycart-empty__cta {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 8px;
padding: 12px 22px;
background: var(--jm-yellow, #E76A5C);
color: #fff !important;
border-radius: 999px;
font-family: 'Nunito', sans-serif;
font-weight: 800;
font-size: 14px;
text-decoration: none !important;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.fab-flycart-empty__cta:hover {
transform: translateY(-1px);
box-shadow: 0 6px 14px rgba(231, 106, 92, 0.28);
color: #fff !important;
}
/* When cart is empty, suppress the progress strip + delivery pill (no point showing them) */
body.jm-v2 .shoptimizer-mini-cart-wrap .woocommerce-mini-cart__empty-message ~ .fab-flycart-progress,
body.jm-v2 .shoptimizer-mini-cart-wrap .woocommerce-mini-cart__empty-message ~ .fab-flycart-delivery {
display: none;
}
/* ===== Phase 5: PLP rebuild ===== */
body.jm-v2 .plp__breadcrumb {
padding: 14px 80px 0;
font-family: 'Nunito', sans-serif;
font-weight: 600;
font-size: 13px;
color: var(--text-muted, #888);
}
body.jm-v2 .plp__breadcrumb a {
color: var(--jm-pink, #2F6F6E);
text-decoration: none;
}
body.jm-v2 .plp__breadcrumb strong { color: var(--text, #2A2A2A); }
/* 4-col grid override */
body.jm-v2 .plp__grid {
grid-template-columns: repeat(4, 1fr) !important;
gap: 36px 24px !important;
padding: 0 80px 60px !important;
position: relative;
}
/* Decorative ruler — left edge of the grid */
body.jm-v2 .plp__grid::before {
content: "";
position: absolute;
left: 32px;
top: 0; bottom: 60px;
width: 18px;
background: repeating-linear-gradient(
to bottom,
rgba(0,0,0,0.18) 0,
rgba(0,0,0,0.18) 1px,
transparent 1px,
transparent 16px
);
border-left: 1px solid rgba(0, 0, 0, 0.18);
border-right: 1px dashed rgba(0, 0, 0, 0.12);
pointer-events: none;
opacity: 0.55;
}
/* Editorial pull-quote — full-row break injected mid-grid by v2-plp-grid.php (after card 8).
Acts as a zine column-break: tape strip, eyebrow, handwritten quote, signature. */
body.jm-v2 .plp__divider {
grid-column: 1 / -1;
position: relative;
background: var(--cream-warm, #F2EBDD);
border: 1px dashed rgba(0, 0, 0, 0.18);
padding: 36px 32px 30px;
margin: 12px 0;
text-align: center;
transform: rotate(-0.3deg);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}
body.jm-v2 .plp__divider-tape {
position: absolute;
top: -10px; left: 50%;
transform: translateX(-50%) rotate(-2deg);
width: 96px; height: 22px;
background: repeating-linear-gradient(
90deg,
rgba(212, 196, 162, 0.92) 0,
rgba(212, 196, 162, 0.92) 6px,
rgba(195, 178, 142, 0.92) 6px,
rgba(195, 178, 142, 0.92) 9px
);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
body.jm-v2 .plp__divider-eyebrow {
display: block;
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--jm-pink, #2F6F6E);
margin-bottom: 14px;
}
body.jm-v2 .plp__divider-quote {
font-family: var(--serif, 'Fraunces', Georgia, serif);
font-size: 22px;
line-height: 1.35;
color: var(--text, #2A2A2A);
margin: 0 auto 12px;
max-width: 540px;
font-style: italic;
}
body.jm-v2 .plp__divider-sig {
display: block;
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 12px;
color: rgba(42, 42, 42, 0.6);
letter-spacing: 0.06em;
}
@media (max-width: 767px) {
body.jm-v2 .plp__divider {
padding: 28px 18px 22px;
margin: 8px 14px;
}
body.jm-v2 .plp__divider-quote { font-size: 18px; }
}
/* Facet rail */
body.jm-v2 .plp__facets {
margin: 24px 80px 28px !important;
padding: 24px 30px !important;
background: #fff !important;
border-radius: 14px !important;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04) !important;
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
align-items: start !important;
column-gap: 36px !important;
row-gap: 22px !important;
}
body.jm-v2 .plp__facet h4 {
font-family: 'Nunito', sans-serif;
font-weight: 800;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--text-dark, #333);
margin: 0 0 10px;
padding-bottom: 6px;
border-bottom: 1px solid rgba(40, 30, 30, 0.08);
}
.plp__facet-chips {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.plp__facet-chip {
display: inline-block;
padding: 5px 11px;
background: var(--cream, #FAF6EE);
color: var(--text-mid, #5A5A5A);
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 999px;
font-family: 'Nunito', sans-serif;
font-weight: 700;
font-size: 11.5px;
text-decoration: none;
transition: all 0.15s ease;
}
.plp__facet-chip:hover {
border-color: var(--jm-pink, #2F6F6E);
color: var(--jm-pink, #2F6F6E);
}
.plp__facet-chip.is-active {
background: var(--jm-pink, #2F6F6E);
color: #fff;
border-color: var(--jm-pink, #2F6F6E);
}
.plp__facet-swatches {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.plp__facet-swatch {
width: 30px; height: 30px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(0, 0, 0, 0.1);
background: #fff;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.plp__facet-swatch-dot {
width: 22px; height: 22px;
border-radius: 50%;
display: block;
border: 1px solid rgba(0, 0, 0, 0.06);
}
.plp__facet-swatch:hover {
transform: scale(1.1);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.plp__facet-swatch.is-active {
box-shadow: 0 0 0 2px var(--jm-yellow, #E76A5C), 0 0 0 4px #fff;
}
/* Toolbar polish + clear-filter chip */
body.jm-v2 .plp__toolbar {
padding: 0 80px 18px !important;
align-items: center;
}
.plp__chip--clear {
background: transparent !important;
color: var(--jm-yellow, #E76A5C) !important;
border-color: rgba(231, 106, 92, 0.4) !important;
text-decoration: none;
}
.plp__chip--clear:hover {
background: var(--jm-yellow, #E76A5C) !important;
color: #fff !important;
}
/* Empty state */
.plp__empty {
grid-column: 1 / -1;
text-align: center;
padding: 80px 20px;
font-family: 'Caveat', cursive;
font-size: 28px;
color: var(--text-muted, #888);
}
/* Pagination — scrapbook polish */
.plp__pagination {
padding: 24px 80px 60px;
display: flex;
justify-content: center;
}
.plp__pagination ul,
.plp__pagination .page-numbers {
list-style: none;
margin: 0; padding: 0;
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
}
.plp__pagination li { list-style: none; }
.plp__pagination a.page-numbers,
.plp__pagination span.page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px; height: 40px;
padding: 0 14px;
border-radius: 999px;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.1);
font-family: 'Nunito', sans-serif;
font-weight: 700;
font-size: 14px;
color: var(--text, #2A2A2A);
text-decoration: none;
transition: all 0.15s ease;
}
.plp__pagination a.page-numbers:hover {
border-color: var(--jm-pink, #2F6F6E);
color: var(--jm-pink, #2F6F6E);
transform: translateY(-1px);
}
.plp__pagination span.page-numbers.current {
background: var(--jm-yellow, #E76A5C);
color: #fff;
border-color: var(--jm-yellow, #E76A5C);
}
.plp__pagination .prev,
.plp__pagination .next {
background: var(--cream, #FAF6EE);
padding: 0 18px;
}
.plp__pagination .dots {
border: 0;
background: transparent;
color: var(--text-muted, #888);
}
/* Category description (moved to bottom) */
.plp__about {
margin: 0 80px 80px;
padding: 0;
}
.plp__about-inner {
background: #fff;
border-radius: 14px;
padding: 32px 36px 28px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
position: relative;
max-width: 880px;
}
.plp__about-eyebrow {
color: var(--jm-yellow, #E76A5C);
margin-bottom: 8px;
}
.plp__about-h2 {
font-size: 28px;
margin: 0 0 14px;
line-height: 1.15;
}
.plp__about-text {
color: var(--text-mid, #5A5A5A);
font-family: 'Nunito', sans-serif;
font-size: 15px;
line-height: 1.6;
}
.plp__about-text p { margin: 0 0 10px; }
/* Tablet: 3-col grid + 2-col facets */
@media (max-width: 1100px) {
body.jm-v2 .plp__grid {
grid-template-columns: repeat(3, 1fr) !important;
padding: 0 32px 60px !important;
}
body.jm-v2 .plp__grid::before { display: none; }
body.jm-v2 .plp__facets {
grid-template-columns: repeat(2, 1fr) !important;
margin: 24px 32px 28px !important;
}
body.jm-v2 .plp__breadcrumb,
body.jm-v2 .plp__toolbar,
.plp__pagination,
.plp__about { padding-left: 32px !important; padding-right: 32px !important; }
.plp__about { margin-left: 0; margin-right: 0; }
}
/* Mobile: 2-col grid, hide facets (mobile gets the existing m-plp facet drawer) */
@media (max-width: 767px) {
body.jm-v2 .plp__grid {
grid-template-columns: 1fr 1fr !important;
gap: 18px !important;
padding: 0 14px 40px !important;
}
body.jm-v2 .plp__facets { display: none !important; }
body.jm-v2 .plp__breadcrumb,
body.jm-v2 .plp__toolbar,
.plp__pagination,
.plp__about { padding-left: 14px !important; padding-right: 14px !important; }
}
/* ===== Phase 6: PDP additions ===== */
/* Stoffprobe sample box */
.pdp__sample {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 18px;
background: linear-gradient(135deg, rgba(255, 207, 99, 0.18), rgba(231, 106, 92, 0.10));
border: 1px dashed rgba(231, 106, 92, 0.4);
border-radius: 14px;
margin: 18px 0 14px;
}
.pdp__sample-icon {
flex-shrink: 0;
width: 44px; height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #fff;
color: var(--jm-yellow, #E76A5C);
}
.pdp__sample-body {
flex: 1; min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
font-family: 'Nunito', sans-serif;
}
.pdp__sample-body strong {
font-size: 14px;
font-weight: 800;
color: var(--text, #2A2A2A);
}
.pdp__sample-body span {
font-size: 12px;
color: var(--text-mid, #5A5A5A);
line-height: 1.4;
}
.pdp__sample-cta {
flex-shrink: 0;
padding: 8px 16px;
background: var(--jm-yellow, #E76A5C);
color: #fff;
font-family: 'Nunito', sans-serif;
font-weight: 800;
font-size: 13px;
border-radius: 999px;
text-decoration: none;
white-space: nowrap;
transition: transform 0.15s ease;
}
.pdp__sample-cta:hover {
transform: translateY(-1px);
color: #fff;
}
/* Accordion */
.pdp__accordion {
margin-top: 24px;
border-top: 1px dashed rgba(0, 0, 0, 0.12);
}
.pdp__acc-item {
border-bottom: 1px dashed rgba(0, 0, 0, 0.12);
}
.pdp__acc-summary {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 4px;
cursor: pointer;
font-family: 'Nunito', sans-serif;
font-weight: 800;
font-size: 15px;
color: var(--text, #2A2A2A);
list-style: none;
user-select: none;
}
.pdp__acc-summary::-webkit-details-marker { display: none; }
.pdp__acc-num {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--text-muted, #888);
background: var(--cream, #FAF6EE);
padding: 4px 8px;
border-radius: 4px;
flex-shrink: 0;
}
.pdp__acc-icon {
margin-left: auto;
width: 28px; height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--cream, #FAF6EE);
color: var(--jm-yellow, #E76A5C);
font-size: 18px;
font-weight: 700;
transition: transform 0.2s ease;
}
.pdp__acc-item[open] .pdp__acc-icon {
transform: rotate(45deg);
background: var(--jm-yellow, #E76A5C);
color: #fff;
}
.pdp__acc-body {
padding: 4px 4px 18px 48px;
color: var(--text-mid, #5A5A5A);
font-family: 'Nunito', sans-serif;
font-size: 14px;
line-height: 1.6;
}
.pdp__acc-body p { margin: 0 0 10px; }
/* Tip-linjen. Fabricly giver sit "Tipp:" sin egen linje, og hele grunden til at
flytte tørretumbler-advarslen ud af afsnittet var, at den blev læst forbi som
sætning nummer to — så den skal se anderledes ud end afsnittene, ikke bare
stå et andet sted. Venstrekant i pink frem for en fuld farvet boks: teksten
ligger allerede indrykket 48px under accordion-nummeret, og en boks mere
inde i en foldet blok inde i et kort er tre rammer om samme sætning.
--jm-pink-light som bund, så mærket læses som en del af v2-paletten og ikke
som en advarsel (det er et tip, ikke en fejl). */
.pdp__acc-body .pdp__acc-tip {
margin: 14px 0 0;
padding: 10px 14px;
border-left: 3px solid var(--jm-pink, #E27297);
border-radius: 0 8px 8px 0;
background: var(--jm-pink-light, #FAEDF2);
color: var(--text, #333E48);
}
.pdp__acc-body .pdp__acc-tip strong {
color: var(--jm-pink-dark, #C75B80);
font-weight: 700;
}
/* ── PRODUKTBESKRIVELSE (post_content) ──────────────────────────────────
Fuld bredde over specs/accordion-parret, med et læsemål på 68ch. Ligger
i .pdp__info-pair's grid, så den arver parrets 32px row-gap.
Indholdet er redaktionel WP-editor-tekst: afsnit, punktopstillinger,
links, enkelte
og på 4 produkter en TablePress-tabel — alt det skal
have styling her, ellers er det arvet brødtekst uden markerede links. */
.pdp__desc { grid-column: 1 / -1; }
.pdp__desc-body {
margin-top: 10px;
max-width: 68ch;
color: var(--text-mid, #5A5A5A);
font-family: 'Nunito', sans-serif;
font-size: 15px;
line-height: 1.75;
}
/* Jeanette-signatur under beskrivelsen. Samme rolle som Camilla på Fabriclys
PDP: et ansigt på teksten. Bredden følger .pdp__desc-body's 68ch, så
signaturen står under teksten og ikke under hele arkets bredde — ellers
hænger den løsrevet ude til højre på desktop.
Portrættet er kvadratisk beskåret i en cirkel: originalen er et stående
illustreret portræt, og i det roterede polaroid-format fra .pdp__story ville
det stjæle beskrivelsen. En cirkel på 56px læser som en forfatter-byline,
hvilket er præcis den rolle den har her. */
.pdp__desc-sig {
display: flex;
align-items: center;
gap: 12px;
max-width: 68ch;
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid var(--jm-border, #ECEAE6);
}
.pdp__desc-sig-img {
flex: 0 0 auto;
width: 56px;
height: 56px;
border-radius: 50%;
/* Kilden (jeanette-byline.jpg) er allerede kvadratisk 480×480 og beskåret til
hoved og skuldre, så cirklen kræver ingen object-position-justering.
object-fit står som værn: skifter nogen filen til et ikke-kvadratisk
billede, beskæres det i stedet for at blive trykket sammen. */
object-fit: cover;
background: var(--cream-dark, #F7F6F3);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.pdp__desc-sig-txt { display: flex; flex-direction: column; line-height: 1.3; }
.pdp__desc-sig-name {
color: var(--jm-pink-dark, #C75B80);
font-size: 20px;
}
.pdp__desc-sig-role {
color: var(--text-muted, #888);
font-family: 'Nunito', sans-serif;
font-size: 13px;
}
.pdp__desc-body > :first-child { margin-top: 0; }
.pdp__desc-body > :last-child { margin-bottom: 0; }
.pdp__desc-body p { margin: 0 0 12px; }
.pdp__desc-body h1,
.pdp__desc-body h2,
.pdp__desc-body h3,
.pdp__desc-body h4 {
font-family: 'Nunito', sans-serif;
font-weight: 800;
font-size: 16px;
color: var(--text, #2A2A2A);
margin: 20px 0 8px;
}
.pdp__desc-body ul,
.pdp__desc-body ol { margin: 0 0 12px; padding-left: 20px; }
.pdp__desc-body li { margin: 0 0 5px; }
.pdp__desc-body li > ul,
.pdp__desc-body li > ol { margin: 5px 0 0; }
/* Gamle editor-runder efterlod ul > li > ul-indpakninger i teksten (fx
#2608). Den ydre li har intet indhold — kun den indre liste — så dens
bullet stod alene foran første punkt. Rettet i CSS, ikke i 4.159
produktbeskrivelser. */
.pdp__desc-body li:has(> ul:first-child),
.pdp__desc-body li:has(> ol:first-child) { list-style: none; }
.pdp__desc-body a {
color: var(--jm-pink, #D96B8A);
text-decoration: underline;
text-underline-offset: 2px;
}
.pdp__desc-body a:hover { text-decoration-thickness: 2px; }
.pdp__desc-body strong, .pdp__desc-body b { font-weight: 800; color: var(--text, #2A2A2A); }
.pdp__desc-body img { max-width: 100%; height: auto; }
/* De 4 [table…]-produkter: TablePress' tabel må ikke skubbe siden vandret. */
.pdp__desc-body table { max-width: 100%; }
@media (max-width: 767px) {
.pdp__desc-body { font-size: 15px; line-height: 1.7; }
.pdp__desc-body table { display: block; overflow-x: auto; }
}
/* PDP ruler — decorative dashed strip on the left edge of the main */
body.jm-v2 .pdp__main {
position: relative;
}
body.jm-v2 .pdp__main::before {
content: "";
position: absolute;
left: 36px;
top: 30px; bottom: 60px;
width: 12px;
background: repeating-linear-gradient(
to bottom,
rgba(0,0,0,0.18) 0,
rgba(0,0,0,0.18) 1px,
transparent 1px,
transparent 14px
);
border-left: 1px solid rgba(0, 0, 0, 0.16);
pointer-events: none;
opacity: 0.5;
}
@media (max-width: 1100px) {
body.jm-v2 .pdp__main::before { display: none; }
}
/* Stoffprobe nudge — scroll-triggered polaroid, dismissable for good */
.pdp-probe-nudge {
position: fixed;
right: 24px;
bottom: 24px;
width: 200px;
background: #fff;
border-radius: 6px;
padding: 14px 14px 12px;
box-shadow: 0 18px 44px rgba(40,30,30,0.18), 0 4px 10px rgba(40,30,30,0.08);
z-index: 100;
transform: translateY(24px) rotate(-3deg);
opacity: 0;
pointer-events: none;
transition: opacity 280ms ease, transform 320ms cubic-bezier(.2,.7,.3,1);
font-family: 'Nunito', sans-serif;
}
.pdp-probe-nudge.is-visible {
transform: translateY(0) rotate(-3deg);
opacity: 1;
pointer-events: auto;
}
.pdp-probe-nudge:hover {
transform: translateY(-4px) rotate(-1deg);
}
.pdp-probe-nudge__tape {
top: -10px; left: 50%;
width: 70px; height: 18px;
transform: translateX(-50%) rotate(-2deg);
background: rgba(226, 138, 87, 0.55);
z-index: 1;
}
.pdp-probe-nudge__close {
position: absolute;
top: 4px; right: 4px;
width: 24px; height: 24px;
border: none; background: transparent;
border-radius: 50%;
font-size: 18px; line-height: 1; color: var(--text-muted, #888);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
z-index: 2;
}
.pdp-probe-nudge__close:hover { background: var(--cream, #FAF6EE); color: var(--text, #2A2A2A); }
.pdp-probe-nudge__link {
display: block; text-decoration: none; color: inherit;
}
.pdp-probe-nudge__swatch {
width: 100%;
aspect-ratio: 1/1;
background: var(--cream-dark, #F0E8D8);
border-radius: 3px;
overflow: hidden;
margin-bottom: 10px;
}
.pdp-probe-nudge__swatch img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.pdp-probe-nudge__cap {
text-align: center;
}
.pdp-probe-nudge__title {
display: block;
font-size: 18px;
color: var(--jm-yellow, #E76A5C);
margin-bottom: 2px;
}
.pdp-probe-nudge__cap strong {
display: block;
font-weight: 800; font-size: 13px;
color: var(--text, #2A2A2A);
line-height: 1.2;
}
.pdp-probe-nudge__price {
display: block;
font-size: 11px;
color: var(--text-muted, #888);
margin-top: 2px;
line-height: 1.3;
}
.pdp-probe-nudge__never {
display: block;
width: 100%;
margin-top: 10px;
padding: 6px 0 0;
border: none;
border-top: 1px dashed var(--border-subtle, rgba(0,0,0,0.08));
background: transparent;
font-family: 'Nunito', sans-serif;
font-size: 11px;
color: var(--text-muted, #888);
cursor: pointer;
letter-spacing: 0.02em;
}
.pdp-probe-nudge__never:hover { color: var(--text, #2A2A2A); }
@media (max-width: 768px) {
.pdp-probe-nudge {
right: 12px; left: 12px; bottom: 88px;
width: auto;
padding: 10px 40px 10px 10px;
transform: translateY(24px) rotate(0);
}
.pdp-probe-nudge.is-visible { transform: translateY(0) rotate(0); }
.pdp-probe-nudge:hover { transform: translateY(0) rotate(0); }
.pdp-probe-nudge__tape { display: none; }
.pdp-probe-nudge__link {
display: grid;
grid-template-columns: 56px 1fr;
gap: 12px;
align-items: center;
}
.pdp-probe-nudge__swatch { aspect-ratio: 1/1; margin-bottom: 0; }
.pdp-probe-nudge__cap { text-align: left; }
.pdp-probe-nudge__title { font-size: 16px; }
.pdp-probe-nudge__never {
position: absolute;
right: 8px; bottom: 4px;
width: auto;
margin: 0; padding: 4px 6px;
border: none;
font-size: 10px;
}
.pdp-probe-nudge__close { top: 2px; right: 2px; }
}
/* ===== PDP Lightbox — full-size image viewer ===== */
.pdp-lightbox {
position: fixed; inset: 0;
background: rgba(20, 20, 24, 0.92);
z-index: 100000;
display: flex; align-items: center; justify-content: center;
opacity: 0; visibility: hidden;
transition: opacity 200ms ease, visibility 200ms ease;
padding: 24px;
}
.pdp-lightbox.is-open { opacity: 1; visibility: visible; }
.pdp-lightbox__stage {
max-width: min(90vw, 1400px);
max-height: 88vh;
display: flex; align-items: center; justify-content: center;
}
.pdp-lightbox__img {
max-width: 100%;
max-height: 88vh;
width: auto; height: auto;
object-fit: contain;
border-radius: 6px;
box-shadow: 0 20px 60px rgba(0,0,0,0.4);
user-select: none;
-webkit-user-drag: none;
}
.pdp-lightbox__close {
position: absolute; top: 16px; right: 16px;
width: 44px; height: 44px;
border-radius: 999px;
background: rgba(255,255,255,0.95);
border: 0;
font-size: 28px; line-height: 1; color: #222;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: transform 150ms;
}
.pdp-lightbox__close:hover { transform: scale(1.08); }
.pdp-lightbox__nav {
position: absolute; top: 50%; transform: translateY(-50%);
width: 52px; height: 52px;
border-radius: 999px;
background: rgba(255,255,255,0.92);
border: 0;
font-size: 32px; line-height: 1; color: #222;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
padding-bottom: 4px;
transition: transform 150ms, background 150ms;
}
.pdp-lightbox__nav:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.pdp-lightbox__nav--prev { left: 20px; }
.pdp-lightbox__nav--next { right: 20px; }
.pdp-lightbox__counter {
position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
background: rgba(0,0,0,0.5);
color: #fff;
padding: 6px 14px;
border-radius: 999px;
font-size: 13px;
font-family: 'Nunito', sans-serif;
letter-spacing: 0.04em;
}
@media (max-width: 768px) {
.pdp-lightbox { padding: 12px; }
.pdp-lightbox__nav { width: 40px; height: 40px; font-size: 24px; }
.pdp-lightbox__nav--prev { left: 8px; }
.pdp-lightbox__nav--next { right: 8px; }
.pdp-lightbox__close { top: 8px; right: 8px; width: 38px; height: 38px; font-size: 22px; }
}
/* ===== Phase 7: Checkout ===== */
/* 4-step stepper */
.fab-stepper {
list-style: none;
margin: 0 0 32px;
padding: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0;
counter-reset: step;
}
.fab-stepper__item {
list-style: none;
display: flex;
align-items: center;
gap: 8px;
color: var(--text-muted, #888);
font-family: 'Nunito', sans-serif;
font-weight: 700;
font-size: 14px;
white-space: nowrap;
}
.fab-stepper__item a {
display: inline-flex;
align-items: center;
gap: 8px;
color: inherit;
text-decoration: none;
}
.fab-stepper__item + .fab-stepper__item::before {
content: "";
width: 32px;
height: 1px;
background: rgba(0, 0, 0, 0.2);
margin: 0 12px;
}
.fab-stepper__dot {
width: 30px; height: 30px;
border-radius: 50%;
background: var(--cream, #FAF6EE);
color: var(--text-muted, #888);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 800;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.fab-stepper__item.is-done {
color: var(--text, #2A2A2A);
}
.fab-stepper__item.is-done .fab-stepper__dot {
background: var(--jm-pink, #2F6F6E);
color: #fff;
border-color: var(--jm-pink, #2F6F6E);
}
.fab-stepper__item.is-current {
color: var(--text, #2A2A2A);
}
.fab-stepper__item.is-current .fab-stepper__dot {
background: var(--jm-yellow, #E76A5C);
color: #fff;
border-color: var(--jm-yellow, #E76A5C);
box-shadow: 0 0 0 4px rgba(231, 106, 92, 0.18);
}
/* Two-column checkout: form left, sticky summary right.
Shoptimizer's cart-checkout.css forces #order_review { float:right; width:41.17%; }
at min-width:993px AND applies responsive `display:block` to table cells which can
leak into desktop. Override aggressively with !important so the grid + native table
layout both win. */
/* Cap form width on big viewports so the grid never overflows. */
body.jm-v2.woocommerce-checkout form.checkout {
max-width: 1240px !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
width: 100% !important;
}
/* Mobil (én kolonne): DOM-ordenen er felter → betaling → oversigt (v2-checkout.js
monterer #fab-payment-relocated lige efter #customer_details). Kunden skal se
ordreoversigten FØR "Godkend ordre" — flex-order bytter de to. Marc 2026-08-07. */
@media (max-width: 991.98px) {
body.jm-v2.woocommerce-checkout form.checkout {
display: flex !important;
flex-direction: column !important;
}
body.jm-v2.woocommerce-checkout form.checkout > #customer_details { order: 1 !important; }
body.jm-v2.woocommerce-checkout form.checkout > h3#order_review_heading,
body.jm-v2.woocommerce-checkout form.checkout > .jm-cofold--summary,
body.jm-v2.woocommerce-checkout form.checkout > #order_review { order: 2 !important; }
body.jm-v2.woocommerce-checkout form.checkout > #fab-payment-relocated { order: 3 !important; }
}
/* ── Mobil-kassen kompakteres: fold-bjælker i taped-note-stil (Marc 2026-08-07).
Skjul er nøglet til .jm-cofolds-ready (JS-sat) — fragt-lektionen: intet
forsvinder for kunder, før bjælken der erstatter det, faktisk findes. ── */
body.jm-v2.woocommerce-checkout .jm-cofold { display: none; }
@media (max-width: 991.98px) {
body.jm-v2.woocommerce-checkout form.checkout.jm-cofolds-ready .jm-cofold {
display: flex; align-items: center; gap: 10px; width: 100%;
position: relative; background: #fff;
border: 1px dashed var(--border, #ECEAE6); border-radius: 10px;
padding: 14px 16px; margin: 14px 0 0;
font-family: 'JetBrains Mono', monospace; font-size: 12px;
letter-spacing: .06em; text-transform: uppercase;
color: var(--text-muted, #6B6660);
appearance: none; -webkit-appearance: none; cursor: pointer;
text-align: left; transform: rotate(-.3deg);
}
body.jm-v2.woocommerce-checkout .jm-cofold::before {
content: ''; position: absolute; top: -9px; left: 22px;
width: 56px; height: 18px; background: rgba(240, 200, 175, .6);
transform: rotate(-2deg); border-radius: 2px;
}
body.jm-v2.woocommerce-checkout .jm-cofold__total {
margin-left: auto; font-family: 'Caveat', cursive; font-size: 21px;
letter-spacing: 0; text-transform: none;
color: var(--jm-pink, #C96F85); white-space: nowrap;
}
body.jm-v2.woocommerce-checkout .jm-cofold__hint {
margin-left: auto; text-transform: none; letter-spacing: 0; font-size: 11px;
}
body.jm-v2.woocommerce-checkout .jm-cofold__chev { transition: transform .2s; }
body.jm-v2.woocommerce-checkout form.checkout.jm-summary-open .jm-cofold--summary .jm-cofold__chev,
body.jm-v2.woocommerce-checkout form.checkout.jm-notes-open .jm-cofold--notes .jm-cofold__chev {
transform: rotate(180deg);
}
/* Lukket som udgangspunkt — men KUN når bjælkerne findes */
body.jm-v2.woocommerce-checkout form.checkout.jm-cofolds-ready:not(.jm-summary-open) > #order_review,
body.jm-v2.woocommerce-checkout form.checkout.jm-cofolds-ready:not(.jm-summary-open) > h3#order_review_heading {
display: none !important;
}
body.jm-v2.woocommerce-checkout form.checkout.jm-cofolds-ready:not(.jm-notes-open) .woocommerce-additional-fields {
display: none !important;
}
/* Trust-grid → én dæmpet linje under Godkend-knappen */
body.jm-v2.woocommerce-checkout .jm-co-trust { display: none !important; }
body.jm-v2.woocommerce-checkout #payment .place-order::after {
content: '🔒 SSL-krypteret betaling · 14 dages fortrydelsesret';
display: block; text-align: center; margin-top: 10px;
font-size: 12px; color: var(--text-muted, #6B6660);
}
/* Betalingsmetoder strammes */
body.jm-v2.woocommerce-checkout #payment ul.payment_methods li { padding: 10px 12px !important; }
body.jm-v2.woocommerce-checkout #payment ul.payment_methods img { max-height: 18px !important; width: auto !important; }
/* Hero slankes */
body.jm-v2.woocommerce-checkout .fab-v2-chrome__h1 { font-size: 26px !important; margin: 4px 0 !important; }
body.jm-v2.woocommerce-checkout .fab-v2-chrome__head { margin-bottom: 10px !important; }
body.jm-v2.woocommerce-checkout .fab-v2-chrome__sub { font-size: 13px !important; }
/* Kupon/login-linjer i samme dæmpede kort-sprog */
body.jm-v2.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info,
body.jm-v2.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info {
background: none; border: 1px dashed var(--border, #ECEAE6);
border-radius: 10px; padding: 10px 14px; font-size: 13px;
}
/* Luft-stramning (Marcs screenshots 2026-08-07 21:22): margin-stakkene i
flex-kolonnen kollapser ikke, så de skal skæres eksplicit på mobil. */
body.jm-v2.woocommerce-checkout .fab-checkout-back-link { margin: 6px 0 !important; display: inline-block; }
body.jm-v2.woocommerce-checkout form.checkout { padding-top: 4px !important; }
body.jm-v2.woocommerce-checkout .woocommerce-billing-fields > h3 { margin-top: 8px !important; }
body.jm-v2.woocommerce-checkout #fab-payment-relocated { padding-top: 10px !important; margin-top: 4px !important; }
body.jm-v2.woocommerce-checkout #payment .wc_payment_methods::before { margin: 8px 0 12px !important; }
body.jm-v2.woocommerce-checkout #payment { margin-bottom: 8px !important; }
/* Reepay-logolinjer: LI-kortene fyldte (52px) om 20px-billeder */
body.jm-v2.woocommerce-checkout #payment ul.reepay-logos {
gap: 6px !important; margin: 0 !important; padding: 0 !important;
}
body.jm-v2.woocommerce-checkout #payment li.reepay-logo {
width: 36px !important; height: 24px !important; padding: 2px !important;
display: inline-flex !important; align-items: center; justify-content: center;
}
body.jm-v2.woocommerce-checkout #payment li.reepay-logo img { max-height: 14px !important; }
}
@media (min-width: 992px) {
/* Row 1: Rechnungsdaten (left, ~2/3) + Deine Bestellung (right, ~1/3), equal heights.
Row 2: Zahlung — full width, spanning both columns + gap. */
body.jm-v2.woocommerce-checkout form.checkout {
display: grid !important;
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) !important;
grid-template-rows: auto auto !important;
column-gap: 32px !important;
row-gap: 28px !important;
align-items: stretch !important;
}
/* LEFT col, row 1: address fields */
body.jm-v2.woocommerce-checkout form.checkout > #customer_details {
grid-column: 1 / 2 !important;
grid-row: 1 !important;
display: block !important;
width: auto !important;
max-width: 100% !important;
min-width: 0 !important;
overflow: visible !important;
float: none !important;
clear: none !important;
margin: 0 !important;
align-self: stretch !important;
}
/* RIGHT col, row 1: order summary — equal height with customer_details */
body.jm-v2.woocommerce-checkout form.checkout > #order_review {
grid-column: 2 / 3 !important;
grid-row: 1 !important;
display: flex !important;
flex-direction: column !important;
width: auto !important;
max-width: none !important;
float: none !important;
margin: 0 !important;
clear: none !important;
align-self: stretch !important;
background: #fff;
border-radius: 14px;
padding: 32px 28px 28px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
border: 1px dashed rgba(0, 0, 0, 0.08);
position: relative;
overflow: visible;
}
/* Push the totals to the bottom of #order_review so the card looks
balanced when its height is stretched to match the taller left column. */
body.jm-v2.woocommerce-checkout form.checkout > #order_review .shop_table {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
}
body.jm-v2.woocommerce-checkout form.checkout > #order_review .shop_table tfoot {
margin-top: auto !important;
}
/* FULL WIDTH, row 2: payment block (moved here by v2-checkout.js) */
body.jm-v2.woocommerce-checkout form.checkout > #fab-payment-relocated {
grid-column: 1 / 3 !important;
grid-row: 2 !important;
display: block !important;
width: auto !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
}
/* Heading lives INSIDE #order_review now (relocated by JS) */
body.jm-v2.woocommerce-checkout form.checkout > h3#order_review_heading,
body.jm-v2.woocommerce-checkout #order_review > h3#order_review_heading {
display: block !important;
position: static;
background: transparent;
padding-top: 0 !important;
padding-bottom: 12px !important;
margin: 0 0 14px !important;
font-family: 'Nunito', sans-serif;
font-weight: 900;
font-size: 22px;
border-bottom: 1px dashed rgba(0, 0, 0, 0.12);
float: none !important;
clear: none !important;
max-width: none !important;
width: auto !important;
}
/* Hide the now-empty heading slot if JS hasn't moved it yet (fallback) */
body.jm-v2.woocommerce-checkout form.checkout > h3#order_review_heading:empty {
display: none !important;
}
/* Customer-details inner col2-set: stack billing/shipping vertically inside the left track. */
body.jm-v2.woocommerce-checkout #customer_details.col2-set,
body.jm-v2.woocommerce-checkout #customer_details > .col-1,
body.jm-v2.woocommerce-checkout #customer_details > .col-2 {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
float: none !important;
clear: none !important;
box-sizing: border-box !important;
}
}
/* Prevent any field, select, textarea, or fieldset from pushing the left
grid track wider than its budget (long select-option text was forcing
horizontal overflow → right column clipped past viewport). */
body.jm-v2.woocommerce-checkout #customer_details,
body.jm-v2.woocommerce-checkout #customer_details *,
body.jm-v2.woocommerce-checkout .woocommerce-billing-fields,
body.jm-v2.woocommerce-checkout .woocommerce-shipping-fields,
body.jm-v2.woocommerce-checkout .woocommerce-additional-fields {
box-sizing: border-box;
}
body.jm-v2.woocommerce-checkout #customer_details .form-row,
body.jm-v2.woocommerce-checkout #customer_details fieldset,
body.jm-v2.woocommerce-checkout #customer_details .woocommerce-billing-fields__field-wrapper,
body.jm-v2.woocommerce-checkout #customer_details .woocommerce-shipping-fields__field-wrapper,
body.jm-v2.woocommerce-checkout #customer_details .woocommerce-additional-fields__field-wrapper {
max-width: 100% !important;
min-width: 0 !important;
}
body.jm-v2.woocommerce-checkout #customer_details input[type="text"],
body.jm-v2.woocommerce-checkout #customer_details input[type="email"],
body.jm-v2.woocommerce-checkout #customer_details input[type="tel"],
body.jm-v2.woocommerce-checkout #customer_details input[type="number"],
body.jm-v2.woocommerce-checkout #customer_details select,
body.jm-v2.woocommerce-checkout #customer_details textarea,
body.jm-v2.woocommerce-checkout #customer_details .select2,
body.jm-v2.woocommerce-checkout #customer_details .select2-container {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
/* Order-review children must also not exceed their column. Mollie payment
iframe and other embeds are common culprits. */
body.jm-v2.woocommerce-checkout #order_review,
body.jm-v2.woocommerce-checkout #order_review * {
max-width: 100%;
box-sizing: border-box;
}
body.jm-v2.woocommerce-checkout #order_review iframe,
body.jm-v2.woocommerce-checkout #payment iframe {
max-width: 100% !important;
width: 100% !important;
}
/* ============================================================
Order summary card-list restyle.
We abandon native table rendering entirely: every row becomes a
flex container so we can layer the design (thumb · name · price)
without fighting Shoptimizer's responsive table CSS.
============================================================ */
body.jm-v2.woocommerce-checkout #order_review .shop_table,
body.jm-v2.woocommerce-checkout #order_review table.woocommerce-checkout-review-order-table {
display: block !important;
width: 100% !important;
border: 0 !important;
margin: 0 !important;
background: transparent !important;
}
body.jm-v2.woocommerce-checkout #order_review .shop_table thead {
display: none !important;
}
body.jm-v2.woocommerce-checkout #order_review .shop_table tbody,
body.jm-v2.woocommerce-checkout #order_review .shop_table tfoot {
display: block !important;
width: 100% !important;
}
/* ----- Cart item rows (compact) ----- */
body.jm-v2.woocommerce-checkout #order_review .shop_table tbody tr.cart_item {
display: flex !important;
align-items: flex-start;
gap: 10px;
padding: 9px 0 !important;
margin: 0 !important;
border: 0 !important;
border-bottom: 1px dashed rgba(0, 0, 0, 0.08) !important;
background: transparent !important;
}
body.jm-v2.woocommerce-checkout #order_review .shop_table tbody tr.cart_item:first-child {
padding-top: 0 !important;
}
body.jm-v2.woocommerce-checkout #order_review .shop_table tbody tr.cart_item:last-child {
border-bottom: 0 !important;
padding-bottom: 4px !important;
}
body.jm-v2.woocommerce-checkout #order_review tbody td.product-name {
display: flex !important;
flex: 1 1 auto;
min-width: 0;
align-items: flex-start;
flex-wrap: wrap;
gap: 10px;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
font-size: 13px;
line-height: 1.35;
color: var(--text, #2A2A2A);
}
body.jm-v2.woocommerce-checkout #order_review tbody td.product-total {
display: block !important;
flex: 0 0 auto;
text-align: right !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
font-weight: 700;
color: var(--text, #2A2A2A);
white-space: nowrap;
align-self: flex-start;
margin-top: 2px;
}
body.jm-v2.woocommerce-checkout #order_review tbody td.product-total .woocommerce-Price-amount {
font-size: 14px;
}
/* Thumbnail (compact) */
body.jm-v2.woocommerce-checkout #order_review td.product-name img.product-item-thumbnail,
body.jm-v2.woocommerce-checkout #order_review td.product-name > img:first-child {
width: 48px !important;
height: 48px !important;
object-fit: cover;
border-radius: 6px;
flex: 0 0 48px;
margin: 0 !important;
}
/* Title + meta wrapper (Shoptimizer's div) */
body.jm-v2.woocommerce-checkout #order_review td.product-name .cg-checkout-table-product-name {
flex: 1 1 calc(100% - 70px);
min-width: 0;
margin: 0;
padding: 0;
display: block;
}
body.jm-v2.woocommerce-checkout #order_review td.product-name .cg-checkout-table-product-name a {
text-decoration: none;
color: inherit;
}
body.jm-v2.woocommerce-checkout #order_review .fab-mc-title {
display: block;
font-weight: 600;
font-size: 13px;
line-height: 1.3;
color: var(--text, #2A2A2A);
}
body.jm-v2.woocommerce-checkout #order_review .fab-mc-meta {
display: block;
margin-top: 2px;
font-size: 11px;
color: var(--text-muted, #888);
line-height: 1.3;
}
/* Meta wrapper — JS-injected container holding both variation + quantity pills.
Carries the 58px left indent (under the thumb) so individual pills sit
naturally side by side via gap. */
body.jm-v2.woocommerce-checkout #order_review td.product-name .fab-cart-meta {
display: inline-flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 6px !important;
margin: 4px 0 0 58px !important;
width: auto !important;
}
/* Variation (Länge) — compact pill, side-by-side with quantity via wrapper gap. */
body.jm-v2.woocommerce-checkout #order_review td.product-name .fab-cart-meta .variation,
body.jm-v2.woocommerce-checkout #order_review td.product-name .fab-cart-meta dl.variation {
display: inline-flex !important;
flex: 0 0 auto !important;
width: auto !important;
margin: 0 !important;
padding: 2px 8px !important;
background: rgba(0, 0, 0, 0.05) !important;
border-radius: 4px !important;
border: 0 !important;
font-size: 11px !important;
font-weight: 400 !important;
color: var(--text-mid, #5A5A5A) !important;
line-height: 1.4 !important;
align-items: center;
}
body.jm-v2.woocommerce-checkout #order_review td.product-name .fab-cart-meta .variation dt,
body.jm-v2.woocommerce-checkout #order_review td.product-name .fab-cart-meta .variation dd,
body.jm-v2.woocommerce-checkout #order_review td.product-name .fab-cart-meta .variation dd p {
display: inline !important;
margin: 0 !important;
padding: 0 !important;
font-weight: 500 !important;
color: inherit !important;
background: transparent !important;
font-size: inherit !important;
line-height: inherit !important;
}
body.jm-v2.woocommerce-checkout #order_review td.product-name .fab-cart-meta .variation dt::after {
content: " ";
}
/* Quantity (× N) — small coral pill right next to the variation pill. */
body.jm-v2.woocommerce-checkout #order_review td.product-name .fab-cart-meta .product-quantity,
body.jm-v2.woocommerce-checkout #order_review td.product-name .fab-cart-meta strong.product-quantity {
display: inline-flex !important;
flex: 0 0 auto !important;
width: auto !important;
margin: 0 !important;
padding: 2px 8px !important;
background: rgba(231, 106, 92, 0.1) !important;
border-radius: 4px !important;
border: 0 !important;
font-size: 11px !important;
font-weight: 600 !important;
color: var(--jm-yellow, #E76A5C) !important;
line-height: 1.4 !important;
text-align: left !important;
align-items: center;
}
/* ----- Totals (tfoot rows) ----- */
body.jm-v2.woocommerce-checkout #order_review .shop_table tfoot tr {
display: flex !important;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding: 8px 0 !important;
margin: 0 !important;
border: 0 !important;
background: transparent !important;
}
body.jm-v2.woocommerce-checkout #order_review .shop_table tfoot tr th,
body.jm-v2.woocommerce-checkout #order_review .shop_table tfoot tr td {
display: block !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
font-weight: 400;
color: var(--text, #2A2A2A);
}
body.jm-v2.woocommerce-checkout #order_review .shop_table tfoot tr th {
flex: 1 1 auto;
text-align: left !important;
font-size: 14px;
}
body.jm-v2.woocommerce-checkout #order_review .shop_table tfoot tr td {
flex: 0 0 auto;
text-align: right !important;
font-size: 14px;
white-space: nowrap;
}
/* Shipping td needs to span full row (radio list inside), and its
labels must allow wrapping so long method names don't overflow the
narrower right column. */
body.jm-v2.woocommerce-checkout #order_review .shop_table tfoot tr.shipping td {
white-space: normal !important;
}
/* ----- Hierarchy: subtotal/fee/shipping/tax all 13px text-mid; order-total hero ----- */
/* Intermediate totals row: medium small, lighter color */
body.jm-v2.woocommerce-checkout #order_review .shop_table tfoot tr.cart-subtotal th,
body.jm-v2.woocommerce-checkout #order_review .shop_table tfoot tr.cart-subtotal td,
body.jm-v2.woocommerce-checkout #order_review .shop_table tfoot tr.fee th,
body.jm-v2.woocommerce-checkout #order_review .shop_table tfoot tr.fee td,
body.jm-v2.woocommerce-checkout #order_review .shop_table tfoot tr.shipping th {
font-size: 13px !important;
color: var(--text-mid, #5A5A5A) !important;
font-weight: 500;
}
/* Subtotal — divider above totals stack */
body.jm-v2.woocommerce-checkout #order_review .shop_table tfoot tr.cart-subtotal {
border-top: 1px dashed rgba(0, 0, 0, 0.12) !important;
padding-top: 14px !important;
margin-top: 10px !important;
}
/* Discount fee in green */
body.jm-v2.woocommerce-checkout #order_review .shop_table tfoot tr.fee th,
body.jm-v2.woocommerce-checkout #order_review .shop_table tfoot tr.fee td,
body.jm-v2.woocommerce-checkout #order_review .shop_table tfoot tr.fee td .woocommerce-Price-amount {
color: #2A8B5E !important;
font-weight: 600 !important;
}
/* Tax dimmed/small */
body.jm-v2.woocommerce-checkout #order_review .shop_table tfoot tr.tax-rate th,
body.jm-v2.woocommerce-checkout #order_review .shop_table tfoot tr.tax-rate td {
font-size: 11px !important;
color: var(--text-muted, #888) !important;
font-weight: 400;
}
/* Order total — hero row. Label + value sit on ONE line with the price
right-aligned. Sized so "Gesamtsumme + €XX,XX" fits the ~300px card width. */
body.jm-v2.woocommerce-checkout #order_review .shop_table tfoot tr.order-total {
align-items: baseline !important;
border-top: 2px solid var(--jm-yellow, #E76A5C) !important;
padding-top: 16px !important;
margin-top: 14px !important;
flex-wrap: wrap !important;
justify-content: space-between !important;
column-gap: 12px !important;
row-gap: 4px !important;
background: transparent !important;
}
body.jm-v2.woocommerce-checkout #order_review .shop_table tfoot tr.order-total th {
font-family: 'Nunito', sans-serif !important;
font-weight: 900 !important;
font-size: 19px !important;
text-transform: none !important;
letter-spacing: 0 !important;
line-height: 1.15 !important;
color: var(--text, #2A2A2A) !important;
flex: 0 1 auto !important;
min-width: 0 !important;
background: transparent !important;
padding: 0 !important;
white-space: nowrap !important;
}
/* Direct-child price (the order total amount) — coral. Use child selector
so we DON'T match the nested .woocommerce-Price-amount inside below. */
body.jm-v2.woocommerce-checkout #order_review .shop_table tfoot tr.order-total > td,
body.jm-v2.woocommerce-checkout #order_review .shop_table tfoot tr.order-total > td > strong,
body.jm-v2.woocommerce-checkout #order_review .shop_table tfoot tr.order-total > td > .woocommerce-Price-amount,
body.jm-v2.woocommerce-checkout #order_review .shop_table tfoot tr.order-total > td > strong > .woocommerce-Price-amount,
body.jm-v2.woocommerce-checkout #order_review .shop_table tfoot tr.order-total > td > .woocommerce-Price-amount bdi,
body.jm-v2.woocommerce-checkout #order_review .shop_table tfoot tr.order-total > td > strong > .woocommerce-Price-amount bdi {
font-family: 'Nunito', sans-serif !important;
font-weight: 900 !important;
font-size: 22px !important;
line-height: 1.15 !important;
color: var(--jm-yellow, #E76A5C) !important;
white-space: nowrap !important;
text-align: right !important;
}
body.jm-v2.woocommerce-checkout #order_review .shop_table tfoot tr.order-total > td {
flex: 0 1 auto !important;
padding: 0 !important;
background: transparent !important;
}
/* "(inkl. €X,XX MwSt.)" caption — small, on its own line, right-aligned.
Override price-inside-small so it doesn't inherit the 26px coral above. */
body.jm-v2.woocommerce-checkout #order_review .shop_table tfoot tr.order-total small.includes_tax {
display: block;
flex-basis: 100%;
font-family: 'JetBrains Mono', monospace !important;
font-weight: 400 !important;
font-size: 11px !important;
text-transform: none;
letter-spacing: 0;
color: var(--text-muted, #888) !important;
margin-top: 4px !important;
text-align: right;
}
body.jm-v2.woocommerce-checkout #order_review .shop_table tfoot tr.order-total small.includes_tax .woocommerce-Price-amount,
body.jm-v2.woocommerce-checkout #order_review .shop_table tfoot tr.order-total small.includes_tax .woocommerce-Price-amount bdi {
font-family: 'JetBrains Mono', monospace !important;
font-weight: 400 !important;
font-size: 11px !important;
color: var(--text-muted, #888) !important;
}
/* Shipping options — vertical stack of radio cards */
body.jm-v2.woocommerce-checkout #order_review .shop_table tfoot tr.shipping {
flex-direction: column;
align-items: stretch;
gap: 8px;
padding: 12px 0 !important;
}
body.jm-v2.woocommerce-checkout #order_review .shop_table tfoot tr.shipping th {
font-size: 13px;
font-weight: 600;
color: var(--text-muted, #888);
}
body.jm-v2.woocommerce-checkout #order_review .shop_table tfoot tr.shipping td {
width: 100%;
text-align: left !important;
}
body.jm-v2.woocommerce-checkout #order_review tfoot tr.shipping ul#shipping_method {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
body.jm-v2.woocommerce-checkout #order_review tfoot tr.shipping ul#shipping_method li {
margin: 0;
padding: 8px 10px;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 8px;
font-size: 13px;
background: #fff;
transition: border-color 120ms ease, box-shadow 120ms ease;
}
body.jm-v2.woocommerce-checkout #order_review tfoot tr.shipping ul#shipping_method li:has(input:checked) {
border-color: var(--jm-yellow, #E76A5C);
box-shadow: 0 0 0 2px rgba(231, 106, 92, 0.12);
}
/* Locked column grid: [icon 56px | text 1fr | price auto].
Radio sits outside the label as li > input. The label is a 3-col grid so
icon, text, and price always line up across rows regardless of which
carrier filter (GLS svg / UPS img / 🎉 emoji / nothing) injected the icon.
The itself uses a 2-column grid: [radio | label]. Anything else inside
(Shipmondo's "Please enter shipping address" notice, etc.) drops to
row 2 spanning both columns — instead of competing horizontally with the
label and squeezing its 1fr text column to char-width. */
body.jm-v2.woocommerce-checkout #order_review tfoot tr.shipping ul#shipping_method li {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
column-gap: 10px;
row-gap: 6px;
}
body.jm-v2.woocommerce-checkout #order_review tfoot tr.shipping ul#shipping_method li > input[type="radio"] {
grid-column: 1;
grid-row: 1;
}
body.jm-v2.woocommerce-checkout #order_review tfoot tr.shipping ul#shipping_method li > label {
grid-column: 2;
grid-row: 1;
}
/* Carrier-injected notices (Shipmondo PaketShop hint, plugin status text):
span the full width on a second row, styled as supplementary info. */
body.jm-v2.woocommerce-checkout #order_review tfoot tr.shipping ul#shipping_method li > *:not(input):not(label) {
grid-column: 1 / -1;
grid-row: 2;
font-size: 12px;
color: var(--text-muted, #888);
line-height: 1.4;
padding-left: 26px;
margin: 0;
}
body.jm-v2.woocommerce-checkout #order_review tfoot tr.shipping ul#shipping_method li input[type="radio"] {
flex: 0 0 auto;
margin: 0;
accent-color: var(--jm-yellow, #E76A5C);
}
body.jm-v2.woocommerce-checkout #order_review tfoot tr.shipping ul#shipping_method li label {
flex: 1 1 auto;
min-width: 0;
margin: 0;
cursor: pointer;
line-height: 1.35;
display: grid;
grid-template-columns: 56px 1fr auto;
align-items: center;
column-gap: 12px;
font-size: 13px;
}
/* Icon column — fixed width slot, content centered. Empty slot still reserves space. */
body.jm-v2.woocommerce-checkout #order_review tfoot tr.shipping ul#shipping_method li label .fab-ship-icon {
width: 56px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
body.jm-v2.woocommerce-checkout #order_review tfoot tr.shipping ul#shipping_method li label .fab-ship-icon img,
body.jm-v2.woocommerce-checkout #order_review tfoot tr.shipping ul#shipping_method li label .fab-ship-icon svg {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
margin: 0 !important;
vertical-align: middle;
}
/* Strip stray inline margin/padding that filters bake into the icon spans. */
body.jm-v2.woocommerce-checkout #order_review tfoot tr.shipping ul#shipping_method li label .fab-ship-icon > * {
margin: 0 !important;
padding: 0 !important;
}
/* Method name column — wraps cleanly inside its slot. */
body.jm-v2.woocommerce-checkout #order_review tfoot tr.shipping ul#shipping_method li label .fab-ship-text {
min-width: 0;
word-break: break-word;
color: var(--text, #2A2A2A);
}
/* Price column — compact, right-aligned, never wraps. */
body.jm-v2.woocommerce-checkout #order_review tfoot tr.shipping ul#shipping_method li label .woocommerce-Price-amount {
white-space: nowrap;
font-weight: 600;
color: var(--text, #2A2A2A);
text-align: right;
}
/* ----- Submit button ----- */
body.jm-v2.woocommerce-checkout #order_review #place_order {
width: 100% !important;
display: block !important;
padding: 16px 24px !important;
background: var(--jm-yellow, #E76A5C) !important;
color: #fff !important;
border: 0 !important;
border-radius: 12px !important;
font-family: 'Nunito', sans-serif !important;
font-weight: 800 !important;
font-size: 16px !important;
margin-top: 16px !important;
transition: transform 120ms ease, box-shadow 120ms ease;
cursor: pointer;
text-transform: none !important;
letter-spacing: 0;
box-shadow: 0 6px 14px rgba(231, 106, 92, 0.18);
}
body.jm-v2.woocommerce-checkout #order_review #place_order:hover {
transform: translateY(-1px);
box-shadow: 0 10px 22px rgba(231, 106, 92, 0.32);
}
body.jm-v2.woocommerce-checkout #order_review #place_order:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
/* Numbered section headings — overlay 01/02 prefix on WC labels */
body.jm-v2.woocommerce-checkout .woocommerce-billing-fields > h3,
body.jm-v2.woocommerce-checkout .woocommerce-shipping-fields > h3,
body.jm-v2.woocommerce-checkout .woocommerce-additional-fields > h3 {
display: flex;
align-items: center;
gap: 12px;
font-family: 'Nunito', sans-serif !important;
font-weight: 900 !important;
font-size: 22px !important;
margin: 28px 0 16px !important;
padding-bottom: 12px;
border-bottom: 1px dashed rgba(0, 0, 0, 0.12);
}
body.jm-v2.woocommerce-checkout .woocommerce-billing-fields > h3::before,
body.jm-v2.woocommerce-checkout .woocommerce-shipping-fields > h3::before,
body.jm-v2.woocommerce-checkout .woocommerce-additional-fields > h3::before {
font-family: 'JetBrains Mono', monospace;
font-size: 13px;
color: var(--jm-yellow, #E76A5C);
background: var(--cream, #FAF6EE);
padding: 5px 10px;
border-radius: 6px;
flex-shrink: 0;
}
body.jm-v2.woocommerce-checkout .woocommerce-billing-fields > h3::before { content: "01"; }
body.jm-v2.woocommerce-checkout .woocommerce-shipping-fields > h3::before { content: "02"; }
body.jm-v2.woocommerce-checkout .woocommerce-additional-fields > h3::before { content: "03"; }
body.jm-v2.woocommerce-checkout #payment .wc_payment_methods::before {
content: "04 · Betaling"; /* aldrig em-dash i kundevendt tekst (Marc-regel) */
display: block;
font-family: 'Nunito', sans-serif;
font-weight: 900;
font-size: 22px;
margin: 28px 0 16px;
padding-bottom: 12px;
border-bottom: 1px dashed rgba(0, 0, 0, 0.12);
color: var(--text, #2A2A2A);
}
/* Kill any duplicate stepper rendered by plugins */
body.jm-v2.woocommerce-checkout .checkout-progress,
body.jm-v2.woocommerce-checkout .wc-progress-steps,
body.jm-v2.woocommerce-checkout .checkout-step-progress {
display: none !important;
}
@media (max-width: 991px) {
.fab-stepper { gap: 4px; }
.fab-stepper__item + .fab-stepper__item::before { width: 12px; margin: 0 4px; }
.fab-stepper__label { display: none; }
.fab-stepper__item.is-current .fab-stepper__label { display: inline; }
}
/* ===== Phase 8: Stoffkunde polish ===== */
.fab-stk-week {
margin: 0 0 48px;
padding: 0;
}
.fab-stk-week__head {
margin-bottom: 18px;
}
.fab-stk-week__grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 24px;
align-items: stretch;
}
.fab-stk-week__feat {
background: #fff;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 220px 1fr;
}
.fab-stk-week__img {
background-size: cover;
background-position: center;
}
.fab-stk-week__body {
padding: 22px 24px 24px;
display: flex;
flex-direction: column;
gap: 8px;
}
.fab-stk-week__body h3 {
font-size: 22px;
line-height: 1.2;
margin: 4px 0 6px;
color: var(--text, #2A2A2A);
}
.fab-stk-week__body p {
color: var(--text-mid, #5A5A5A);
margin: 0;
line-height: 1.5;
}
.fab-stk-week__cta {
align-self: flex-start;
margin-top: 12px;
}
.fab-stk-week__list {
list-style: none;
margin: 0;
padding: 0;
background: #fff;
border-radius: 14px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
display: flex;
flex-direction: column;
}
.fab-stk-week__list li {
list-style: none;
display: flex;
align-items: flex-start;
gap: 14px;
padding: 18px 22px;
border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: background 0.15s ease;
}
.fab-stk-week__list li:last-child { border-bottom: 0; }
.fab-stk-week__list li:hover { background: var(--cream, #FAF6EE); }
.fab-stk-week__num {
font-family: 'JetBrains Mono', monospace;
font-size: 13px;
color: var(--jm-yellow, #E76A5C);
background: var(--cream, #FAF6EE);
padding: 6px 10px;
border-radius: 6px;
flex-shrink: 0;
font-weight: 700;
}
.fab-stk-week__list li > div { display: flex; flex-direction: column; gap: 2px; }
.fab-stk-week__list strong {
font-family: 'Nunito', sans-serif;
font-weight: 800;
font-size: 15px;
color: var(--text, #2A2A2A);
}
.fab-stk-week__list span {
font-size: 12px;
color: var(--text-muted, #888);
}
@media (max-width: 900px) {
.fab-stk-week__grid { grid-template-columns: 1fr; }
.fab-stk-week__feat { grid-template-rows: 200px 1fr; }
}
/* Topic grid — monochrome icons */
.fab-stk-topics {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 20px;
margin-bottom: 64px;
}
.fab-stk-topic {
background: #fff;
border-radius: 14px;
padding: 28px 24px 22px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
text-decoration: none;
color: inherit;
transition: transform 200ms ease, box-shadow 200ms ease;
display: block;
border: 1px solid rgba(0, 0, 0, 0.04);
}
.fab-stk-topic:hover {
transform: rotate(0deg) translateY(-3px) !important;
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
color: inherit;
}
.fab-stk-topic__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px; height: 46px;
border-radius: 12px;
background: var(--cream, #FAF6EE);
color: var(--jm-pink, #2F6F6E);
margin-bottom: 14px;
}
.fab-stk-topic__icon svg {
width: 24px; height: 24px;
}
/* Newsletter — dark teal */
.fab-stk-newsletter {
background: linear-gradient(135deg, #1F4F4E, #2F6F6E);
color: #fff;
border-radius: 14px;
padding: 48px 40px;
text-align: center;
position: relative;
box-shadow: 0 14px 40px rgba(31, 79, 78, 0.25);
}
.fab-stk-newsletter__inner {
max-width: 540px;
margin: 0 auto;
}
.fab-stk-newsletter__h {
font-size: 36px !important;
color: #fff !important;
margin: 0 0 8px !important;
line-height: 1.1;
}
.fab-stk-newsletter__sub {
font-size: 24px;
margin: 0 0 24px;
color: var(--jm-yellow, #C75B80);
}
.fab-stk-newsletter__form {
display: flex;
gap: 8px;
max-width: 480px;
margin: 0 auto;
flex-wrap: wrap;
}
.fab-stk-newsletter__form input {
flex: 1;
min-width: 200px;
padding: 14px 18px;
border-radius: 10px;
border: 0;
font-family: 'Nunito', sans-serif;
font-size: 15px;
color: var(--text, #2A2A2A);
background: #fff;
}
.fab-stk-newsletter__form button {
padding: 14px 28px;
border-radius: 10px;
border: 0;
background: var(--jm-yellow, #C75B80);
color: #1F4F4E;
font-family: 'Nunito', sans-serif;
font-weight: 800;
font-size: 15px;
cursor: pointer;
transition: transform 0.15s ease;
}
.fab-stk-newsletter__form button:hover {
transform: translateY(-1px);
background: #fff;
}
.fab-stk-newsletter__small {
margin-top: 14px;
font-size: 13px;
opacity: 0.8;
}
/* ============================================================
PHASE 9 — Homepage additions: Reviews, Personal, Journal
============================================================ */
/* Reviews carousel */
body.jm-v2 .sb-reviews {
max-width: 1200px;
margin: 80px auto;
padding: 0 24px;
}
body.jm-v2 .sb-reviews__head {
text-align: center;
margin-bottom: 48px;
}
body.jm-v2 .sb-reviews__h2 {
font-size: clamp(28px, 4vw, 42px);
margin: 0;
}
body.jm-v2 .sb-reviews__row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
body.jm-v2 .sb-review {
position: relative;
background: #fff;
border-radius: 6px;
padding: 32px 26px 26px;
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
transform: rotate(-0.6deg);
margin: 0;
}
body.jm-v2 .sb-review--mid {
transform: rotate(0.5deg) translateY(-8px);
background: #FFFBEC;
}
body.jm-v2 .sb-tape--rev {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%) rotate(-3deg);
width: 90px;
height: 22px;
background: rgba(226,114,151,0.45);
border-radius: 2px;
}
body.jm-v2 .sb-tape--rev2 {
background: rgba(232,127,116,0.45);
transform: translateX(-50%) rotate(2deg);
}
body.jm-v2 .sb-review__stars {
color: var(--jm-yellow, #C75B80);
font-size: 18px;
letter-spacing: 2px;
margin-bottom: 14px;
}
body.jm-v2 .sb-review__quote {
font-size: 19px;
line-height: 1.5;
color: var(--text, #2A2A2A);
margin: 0 0 18px;
font-style: italic;
}
body.jm-v2 .sb-review__by {
display: flex;
flex-direction: column;
gap: 2px;
border-top: 1px dashed rgba(0,0,0,0.12);
padding-top: 14px;
}
body.jm-v2 .sb-review__name {
font-family: 'Nunito', sans-serif;
font-weight: 700;
font-size: 15px;
}
body.jm-v2 .sb-review__where {
font-size: 13px;
color: var(--text-muted, #6B6B6B);
}
body.jm-v2 .sb-reviews__foot {
text-align: center;
margin-top: 36px;
font-family: 'Nunito', sans-serif;
}
body.jm-v2 .sb-reviews__rating {
font-weight: 800;
color: var(--jm-yellow);
font-size: 22px;
}
body.jm-v2 .sb-reviews__count {
color: var(--text-muted, #6B6B6B);
font-size: 15px;
margin-left: 6px;
}
@media (max-width: 880px) {
body.jm-v2 .sb-reviews__row { grid-template-columns: 1fr; gap: 20px; }
body.jm-v2 .sb-review--mid { transform: rotate(0.5deg); }
}
/* Personal picks */
body.jm-v2 .sb-personal {
max-width: 1200px;
margin: 90px auto;
padding: 0 24px;
}
body.jm-v2 .sb-personal__head {
text-align: center;
margin-bottom: 40px;
}
body.jm-v2 .sb-personal__h2 {
font-size: clamp(28px, 4vw, 42px);
margin: 0 0 10px;
}
body.jm-v2 .sb-personal__sub {
font-size: 18px;
color: var(--text-muted, #6B6B6B);
}
body.jm-v2 .sb-personal__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
body.jm-v2 .sb-personal__card {
text-decoration: none;
color: inherit;
display: block;
transition: transform 0.2s ease;
}
body.jm-v2 .sb-personal__card:hover { transform: translateY(-4px); }
body.jm-v2 .sb-personal__img-wrap {
position: relative;
aspect-ratio: 1 / 1;
border-radius: 8px;
overflow: hidden;
margin-bottom: 12px;
background: var(--cream, #F7F1E2);
}
body.jm-v2 .sb-personal__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
body.jm-v2 .sb-personal__badge {
position: absolute;
top: 10px;
left: 10px;
background: #fff;
color: var(--jm-yellow);
font-family: 'Nunito', sans-serif;
font-weight: 800;
font-size: 12px;
padding: 4px 8px;
border-radius: 4px;
letter-spacing: 0.5px;
}
body.jm-v2 .sb-personal__name {
font-family: 'Nunito', sans-serif;
font-weight: 700;
font-size: 15px;
line-height: 1.3;
margin-bottom: 4px;
}
body.jm-v2 .sb-personal__price {
font-family: 'Nunito', sans-serif;
font-weight: 800;
color: var(--jm-pink);
font-size: 16px;
}
@media (max-width: 1024px) {
body.jm-v2 .sb-personal__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
body.jm-v2 .sb-personal__grid { grid-template-columns: 1fr; }
}
/* Werkstatt-Tagebuch journal */
body.jm-v2 .sb-journal {
max-width: 1200px;
margin: 90px auto;
padding: 0 24px;
}
body.jm-v2 .sb-journal__head {
text-align: center;
margin-bottom: 48px;
}
body.jm-v2 .sb-journal__h2 {
font-size: clamp(28px, 4vw, 42px);
margin: 0;
}
body.jm-v2 .sb-journal__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
body.jm-v2 .sb-journal__card {
text-decoration: none;
color: inherit;
background: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 6px 20px rgba(0,0,0,0.06);
transition: transform 0.2s ease, box-shadow 0.2s ease;
display: flex;
flex-direction: column;
}
body.jm-v2 .sb-journal__card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(0,0,0,0.1);
}
body.jm-v2 .sb-journal__img {
aspect-ratio: 16 / 10;
background-size: cover;
background-position: center;
background-color: var(--cream, #F7F1E2);
}
body.jm-v2 .sb-journal__body {
padding: 22px 24px 26px;
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}
body.jm-v2 .sb-journal__meta {
display: flex;
gap: 12px;
align-items: center;
margin-bottom: 4px;
}
body.jm-v2 .sb-journal__num {
background: var(--jm-yellow);
color: #fff;
font-family: 'Nunito', sans-serif;
font-weight: 800;
font-size: 11px;
padding: 3px 8px;
border-radius: 3px;
letter-spacing: 0.5px;
}
body.jm-v2 .sb-journal__date {
font-size: 13px;
color: var(--text-muted, #6B6B6B);
font-family: 'Nunito', sans-serif;
}
body.jm-v2 .sb-journal__title {
font-size: 20px;
line-height: 1.3;
margin: 4px 0 6px;
color: var(--text, #2A2A2A);
}
body.jm-v2 .sb-journal__excerpt {
font-size: 15px;
line-height: 1.5;
color: var(--text-muted, #6B6B6B);
margin: 0 0 14px;
flex: 1;
}
body.jm-v2 .sb-journal__cta {
color: var(--jm-pink);
font-size: 16px;
margin-top: auto;
}
@media (max-width: 880px) {
body.jm-v2 .sb-journal__grid { grid-template-columns: 1fr; gap: 20px; }
}
/* ===========================================================
PLP layout fixes — Shoptimizer wraps our v2 main in
.shoptimizer-archive > .archive-header + .col-full, which
- duplicates the breadcrumb
- constrains width to ~1190px
- reserves space for an empty left sidebar (body.left-woocommerce-sidebar)
Neutralize all of that on v2.
=========================================================== */
body.jm-v2 .archive-header { display: none !important; }
body.jm-v2 .shoptimizer-archive {
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
}
body.jm-v2 .shoptimizer-archive > .col-full,
body.jm-v2 .shoptimizer-archive .col-full {
max-width: none !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
float: none !important;
display: block !important;
}
/* Shoptimizer's left/right sidebar variants reserve column space via
#primary width / margin. Force full-width on v2 templates. */
body.jm-v2.left-woocommerce-sidebar #primary,
body.jm-v2.right-woocommerce-sidebar #primary,
body.jm-v2 #primary,
body.jm-v2 #main {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
}
body.jm-v2 #secondary,
body.jm-v2 .sidebar.widget-area,
body.jm-v2 .secondary-sidebar { display: none !important; }
/* v2 PLP container: centered + breathing room, beats Shoptimizer's width clamp. */
body.jm-v2 #jm-plp-v2 {
max-width: var(--container-max, 1480px); /* Bug 1 (ported fra fabricly b315db8): harmoniseret med den fælles bredde-cap */
margin: 0 auto;
padding: 24px 0 80px;
box-sizing: border-box;
}
/* PLP card ATC pill — visual cue, the whole card already links to the PDP. */
body.jm-v2 .sb-sku__atc {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 12px;
padding: 8px 14px;
background: var(--jm-yellow, #E76A5C);
color: #fff !important;
font-family: 'Nunito', sans-serif;
font-weight: 800;
font-size: 12px;
letter-spacing: 0.04em;
text-transform: uppercase;
border-radius: 999px;
transition: transform .15s ease, box-shadow .15s ease;
}
body.jm-v2 .sb-sku:hover .sb-sku__atc {
transform: translateY(-1px);
box-shadow: 0 6px 14px rgba(231, 106, 92, 0.28);
}
body.jm-v2 .sb-sku__atc--row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 14px;
}
@media (max-width: 880px) {
body.jm-v2 #jm-plp-v2 { padding: 16px 0 56px; }
body.jm-v2 .sb-sku__atc { font-size: 11px; padding: 7px 12px; }
}
/* Quality overlay (Stoffart) — top-left of card image, mirrors cert badge
bottom-left. Distinct white/teal treatment so it reads as info, not promo. */
body.jm-v2 .sb-sku__quality {
position: absolute;
top: 12px;
left: 12px;
background: rgba(255, 255, 255, 0.96);
color: var(--jm-pink, #2F6F6E);
font-family: 'Nunito', sans-serif;
font-weight: 800;
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 5px 10px;
border-radius: 4px;
box-shadow: 0 2px 6px rgba(40, 30, 30, 0.10);
z-index: 2;
line-height: 1;
}
@media (max-width: 600px) {
body.jm-v2 .sb-sku__quality {
font-size: 9px;
padding: 4px 8px;
letter-spacing: 0.08em;
}
}
/* Hero polaroid — chunkier white frame + smaller image area so the fabric
pattern reads as PATTERN (multiple repeats visible), not as one over-zoomed
close-up. The base scrapbook.css uses padding 14/14/36; we bump it for v2
and constrain the background to the inner content-box. */
body.jm-v2 .sb-polaroid {
padding: 22px 22px 64px !important;
background-clip: content-box;
background-origin: content-box;
background-size: cover;
background-position: center;
}
body.jm-v2 .sb-polaroid::after {
/* Caption hint inside the white bottom strip — uses [data-name] from PHP. */
content: attr(data-name);
position: absolute;
left: 22px; right: 22px; bottom: 16px;
font-family: 'Caveat', cursive;
font-size: 14px;
color: var(--text-muted, #6e6453);
text-align: center;
pointer-events: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 880px) {
body.jm-v2 .sb-polaroid {
padding: 16px 16px 48px !important;
}
body.jm-v2 .sb-polaroid::after { font-size: 12px; left: 16px; right: 16px; bottom: 12px; }
}
/* Camilla's signature — sits below the Werkstatt-Versprechen body.
"Camilla" rendered in Caveat (already loaded) with italic + slight rotation,
then a small flourish underline, then the caption. Uses coral so it reads
as a real signature against the cream surroundings. */
body.jm-v2 .sb-signature {
margin-top: 32px;
display: flex;
flex-direction: column;
align-items: flex-start;
}
body.jm-v2 .sb-signature__name {
font-family: 'Caveat', cursive;
font-weight: 700;
font-style: italic;
font-size: 64px;
line-height: 0.9;
letter-spacing: -0.5px;
color: var(--jm-yellow, #e87b6e);
transform: rotate(-4deg);
transform-origin: left center;
margin-left: 4px;
}
body.jm-v2 .sb-signature__flourish {
width: 220px;
height: 22px;
margin-top: -2px;
margin-left: -8px;
color: var(--jm-yellow, #e87b6e);
transform: rotate(-2deg);
transform-origin: left center;
}
body.jm-v2 .sb-signature__caption {
margin-top: 10px;
font-family: 'Poppins', sans-serif;
font-size: 14px;
color: var(--text-muted, #6e6453);
letter-spacing: 0.01em;
}
@media (max-width: 880px) {
body.jm-v2 .sb-signature__name { font-size: 52px; }
body.jm-v2 .sb-signature__flourish { width: 180px; }
}
/* ============================================================
v2 checkout — Phase 2: card-wrap left column + relocated payment
Pairs with assets/v2-checkout.js which moves #payment out of
#order_review into #fab-payment-relocated, and the heading INTO
#order_review.
============================================================ */
/* Zurück zum Shop link, injected by v2-checkout.js above form.checkout */
body.jm-v2.woocommerce-checkout .fab-checkout-back-link {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0 0 18px;
padding: 6px 0;
font-family: 'JetBrains Mono', monospace;
font-size: 13px;
letter-spacing: 0.04em;
color: var(--text-mid, #5A5A5A);
text-decoration: none;
transition: color 0.15s ease;
}
body.jm-v2.woocommerce-checkout .fab-checkout-back-link:hover {
color: var(--jm-yellow, #E76A5C);
}
@media (min-width: 992px) {
/* Card-wrap address fields */
body.jm-v2.woocommerce-checkout #customer_details {
background: #fff;
border-radius: 14px;
padding: 32px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
border: 1px dashed rgba(0, 0, 0, 0.08);
box-sizing: border-box;
position: relative;
overflow: visible;
}
/* Card-wrap relocated payment block */
body.jm-v2.woocommerce-checkout #fab-payment-relocated {
background: #fff;
border-radius: 14px;
padding: 32px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
border: 1px dashed rgba(0, 0, 0, 0.08);
box-sizing: border-box;
position: relative;
overflow: visible;
}
/* When #payment lives inside the relocated wrapper, strip its own card
chrome (background, border, padding) so we don't double-card. */
body.jm-v2.woocommerce-checkout #fab-payment-relocated > #payment {
background: transparent !important;
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;
}
}
/* Form input polish: cream BG + uppercase letter-spaced labels */
body.jm-v2.woocommerce-checkout #customer_details .form-row label {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-mid, #5A5A5A);
margin-bottom: 6px;
display: block;
}
body.jm-v2.woocommerce-checkout #customer_details input[type="text"],
body.jm-v2.woocommerce-checkout #customer_details input[type="email"],
body.jm-v2.woocommerce-checkout #customer_details input[type="tel"],
body.jm-v2.woocommerce-checkout #customer_details input[type="number"],
body.jm-v2.woocommerce-checkout #customer_details input[type="password"],
body.jm-v2.woocommerce-checkout #customer_details select,
body.jm-v2.woocommerce-checkout #customer_details .select2-selection,
body.jm-v2.woocommerce-checkout #customer_details .select2-selection--single {
background: var(--cream, #FAF6EE) !important;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
border-radius: 10px !important;
height: 50px !important;
line-height: 24px !important;
padding: 13px 16px !important;
font-size: 14px !important;
color: var(--text, #2A2A2A) !important;
box-sizing: border-box !important;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body.jm-v2.woocommerce-checkout #customer_details textarea {
background: var(--cream, #FAF6EE) !important;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
border-radius: 10px !important;
line-height: 24px !important;
padding: 13px 16px !important;
font-size: 14px !important;
color: var(--text, #2A2A2A) !important;
min-height: 110px;
box-sizing: border-box !important;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* Select2 inner rendered text — vertical-align center inside the 50px box. */
body.jm-v2.woocommerce-checkout #customer_details .select2-selection--single .select2-selection__rendered {
line-height: 24px !important;
padding: 0 !important;
color: var(--text, #2A2A2A) !important;
}
body.jm-v2.woocommerce-checkout #customer_details .select2-selection--single .select2-selection__arrow {
height: 48px !important;
top: 0 !important;
right: 8px !important;
}
/* Field row vertical rhythm */
body.jm-v2.woocommerce-checkout #customer_details .form-row {
margin-bottom: 14px !important;
}
/* Placeholder color and weight */
body.jm-v2.woocommerce-checkout #customer_details input::placeholder,
body.jm-v2.woocommerce-checkout #customer_details textarea::placeholder,
body.jm-v2.woocommerce-checkout #customer_details .select2-selection__placeholder {
color: rgba(42, 42, 42, 0.4) !important;
font-weight: 400;
opacity: 1;
}
body.jm-v2.woocommerce-checkout #customer_details input:focus,
body.jm-v2.woocommerce-checkout #customer_details textarea:focus,
body.jm-v2.woocommerce-checkout #customer_details select:focus,
body.jm-v2.woocommerce-checkout #customer_details .select2-selection:focus,
body.jm-v2.woocommerce-checkout #customer_details .select2-container--focus .select2-selection {
border-color: var(--jm-yellow, #E76A5C) !important;
box-shadow: 0 0 0 3px rgba(231, 106, 92, 0.15) !important;
outline: none !important;
}
/* Section H3 inside customer_details: uppercased coral with numbered chip */
body.jm-v2.woocommerce-checkout #customer_details > .col-1 h3,
body.jm-v2.woocommerce-checkout #customer_details > .col-2 h3,
body.jm-v2.woocommerce-checkout .woocommerce-additional-fields h3 {
margin-top: 0;
margin-bottom: 18px;
}
/* Payment radios as bordered cards */
body.jm-v2.woocommerce-checkout #payment ul.payment_methods {
background: transparent !important;
border: 0 !important;
padding: 0 !important;
margin: 0 0 18px !important;
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
}
body.jm-v2.woocommerce-checkout #payment ul.payment_methods > li {
background: var(--cream, #FAF6EE);
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 10px;
padding: 14px 16px;
margin: 0 !important;
list-style: none;
transition: border-color 0.15s ease, background 0.15s ease;
}
body.jm-v2.woocommerce-checkout #payment ul.payment_methods > li::before,
body.jm-v2.woocommerce-checkout #payment ul.payment_methods > li::after {
display: none !important;
}
body.jm-v2.woocommerce-checkout #payment ul.payment_methods > li:hover {
border-color: rgba(231, 106, 92, 0.4);
}
body.jm-v2.woocommerce-checkout #payment ul.payment_methods > li > input[type="radio"]:checked + label,
body.jm-v2.woocommerce-checkout #payment ul.payment_methods > li.active,
body.jm-v2.woocommerce-checkout #payment ul.payment_methods > li:has(input[type="radio"]:checked) {
border-color: var(--jm-yellow, #E76A5C);
background: #fff;
}
body.jm-v2.woocommerce-checkout #payment ul.payment_methods > li label {
font-family: 'Nunito', sans-serif;
font-weight: 700;
font-size: 15px;
color: var(--text, #2A2A2A);
display: inline-flex;
align-items: center;
gap: 10px;
cursor: pointer;
margin: 0;
}
body.jm-v2.woocommerce-checkout #payment ul.payment_methods > li label img {
max-height: 22px;
width: auto;
margin-left: auto;
}
body.jm-v2.woocommerce-checkout #payment ul.payment_methods .payment_box {
background: transparent !important;
border: 0 !important;
padding: 12px 0 4px !important;
margin: 8px 0 0 !important;
font-size: 13px;
color: var(--text-mid, #5A5A5A);
}
body.jm-v2.woocommerce-checkout #payment ul.payment_methods .payment_box::before {
display: none !important;
}
/* Place-order button inside relocated payment */
body.jm-v2.woocommerce-checkout #fab-payment-relocated #place_order,
body.jm-v2.woocommerce-checkout #payment #place_order {
width: 100%;
background: var(--jm-yellow, #E76A5C);
color: #fff;
font-family: 'Nunito', sans-serif;
font-weight: 900;
font-size: 16px;
padding: 14px 18px;
border-radius: 10px;
border: 0;
box-shadow: 0 8px 18px rgba(231, 106, 92, 0.25);
transition: transform 0.1s ease, box-shadow 0.15s ease;
}
body.jm-v2.woocommerce-checkout #fab-payment-relocated #place_order:hover,
body.jm-v2.woocommerce-checkout #payment #place_order:hover {
transform: translateY(-1px);
box-shadow: 0 10px 22px rgba(231, 106, 92, 0.32);
}
/* Mobile: collapse cards back to flat layout */
@media (max-width: 991px) {
body.jm-v2.woocommerce-checkout #customer_details,
body.jm-v2.woocommerce-checkout #fab-payment-relocated {
background: transparent;
border: 0;
padding: 0;
box-shadow: none;
margin-bottom: 24px;
}
body.jm-v2.woocommerce-checkout #fab-payment-relocated {
margin-top: 24px;
}
}
/* ============================================================
v2 checkout — Phase 3: scrapbook accents + visible coupon
============================================================ */
/* Cards must be positioned for the absolute ::before tape to anchor correctly,
regardless of breakpoint. (The @media block also sets these but we want the
tape rule itself to be self-sufficient.) */
body.jm-v2.woocommerce-checkout #customer_details,
body.jm-v2.woocommerce-checkout #order_review,
body.jm-v2.woocommerce-checkout #fab-payment-relocated {
position: relative;
}
/* Scrapbook tape strip on each card.
Same masking-tape recipe as the cart drawer (lines 478-493). Different
tints: customer = yellow, order = blue, payment = coral. */
body.jm-v2.woocommerce-checkout #customer_details::before,
body.jm-v2.woocommerce-checkout #order_review::before,
body.jm-v2.woocommerce-checkout #fab-payment-relocated::before {
content: "";
position: absolute;
top: -10px;
left: 32px;
width: 110px;
height: 22px;
background:
linear-gradient(90deg, transparent 0, rgba(255, 255, 255, 0.35) 30%, transparent 60%),
repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 1px, transparent 1px 6px),
rgba(255, 207, 99, 0.65);
border: 1px dashed rgba(0, 0, 0, 0.18);
transform: rotate(-2.5deg);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
pointer-events: none;
z-index: 5;
}
body.jm-v2.woocommerce-checkout #order_review::before {
background:
linear-gradient(90deg, transparent 0, rgba(255, 255, 255, 0.35) 30%, transparent 60%),
repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 1px, transparent 1px 6px),
rgba(184, 220, 224, 0.75);
transform: rotate(-1.5deg);
left: 24px;
width: 96px;
}
body.jm-v2.woocommerce-checkout #fab-payment-relocated::before {
background:
linear-gradient(90deg, transparent 0, rgba(255, 255, 255, 0.35) 30%, transparent 60%),
repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 1px, transparent 1px 6px),
rgba(244, 201, 192, 0.7);
transform: rotate(-3deg);
left: 40px;
width: 120px;
}
/* Order review heading — flex row with bullet ○ + label + Bearbeiten link */
body.jm-v2.woocommerce-checkout #order_review > h3#order_review_heading {
display: flex !important;
align-items: center !important;
gap: 8px !important;
justify-content: flex-start;
}
body.jm-v2.woocommerce-checkout #order_review > h3#order_review_heading::before {
content: "○";
font-size: 16px;
line-height: 1;
color: var(--text-mid, #5A5A5A);
font-weight: 400;
margin-right: 2px;
}
body.jm-v2.woocommerce-checkout #order_review > h3#order_review_heading .fab-edit-link {
margin-left: auto;
font-family: 'JetBrains Mono', monospace;
font-size: 13px;
font-weight: 500;
color: var(--jm-yellow, #E76A5C);
text-decoration: underline;
text-underline-offset: 3px;
letter-spacing: 0;
text-transform: none;
}
body.jm-v2.woocommerce-checkout #order_review > h3#order_review_heading .fab-edit-link:hover {
text-decoration: none;
}
/* Hide any remaining Shoptimizer coupon-wrapper relics in the after-form
slot. Our PHP renders the always-visible coupon row inside #order_review. */
body.jm-v2.woocommerce-checkout .coupon-wrapper,
body.jm-v2.woocommerce-checkout .woocommerce-form-coupon-toggle {
display: none !important;
}
/* Coupon row rendered by PHP via woocommerce_review_order_after_cart_contents
— sits as a inside the review table tbody, after cart items. */
body.jm-v2.woocommerce-checkout #order_review .shop_table tr.fab-coupon-row {
display: block !important;
padding: 14px 0 !important;
margin: 6px 0 !important;
border-top: 1px dashed rgba(0, 0, 0, 0.12) !important;
border-bottom: 1px dashed rgba(0, 0, 0, 0.12) !important;
background: transparent !important;
}
body.jm-v2.woocommerce-checkout #order_review .shop_table tr.fab-coupon-row > td {
display: block !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
}
body.jm-v2.woocommerce-checkout #order_review form.checkout_coupon {
display: flex !important;
flex-direction: row !important;
align-items: stretch !important;
flex-wrap: nowrap !important;
gap: 10px !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
}
body.jm-v2.woocommerce-checkout #order_review form.checkout_coupon p {
margin: 0 !important;
padding: 0 !important;
}
body.jm-v2.woocommerce-checkout #order_review form.checkout_coupon .form-row-first {
flex: 1 1 0% !important;
min-width: 0 !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
}
body.jm-v2.woocommerce-checkout #order_review form.checkout_coupon .form-row-last {
flex: 0 0 auto !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
}
body.jm-v2.woocommerce-checkout #order_review form.checkout_coupon .clear {
display: none !important;
}
body.jm-v2.woocommerce-checkout #order_review form.checkout_coupon input[type="text"],
body.jm-v2.woocommerce-checkout #order_review form.checkout_coupon input.input-text {
background: var(--cream, #FAF6EE) !important;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
border-radius: 8px !important;
height: 44px !important;
line-height: 22px !important;
padding: 11px 14px !important;
font-size: 14px !important;
width: 100% !important;
box-sizing: border-box !important;
color: var(--text, #2A2A2A) !important;
}
body.jm-v2.woocommerce-checkout #order_review form.checkout_coupon input[type="text"]::placeholder {
color: rgba(42, 42, 42, 0.4) !important;
}
body.jm-v2.woocommerce-checkout #order_review form.checkout_coupon button[type="submit"] {
background: #fff !important;
border: 1.5px solid var(--text, #2A2A2A) !important;
border-radius: 8px !important;
height: 44px !important;
padding: 0 22px !important;
font-family: 'Nunito', sans-serif !important;
font-weight: 800 !important;
font-size: 14px !important;
color: var(--text, #2A2A2A) !important;
cursor: pointer !important;
box-shadow: none !important;
transition: background 0.15s ease, color 0.15s ease;
text-transform: none !important;
letter-spacing: 0;
}
body.jm-v2.woocommerce-checkout #order_review form.checkout_coupon button[type="submit"]:hover {
background: var(--text, #2A2A2A) !important;
color: #fff !important;
}
/* Payment section row spacing + cream-style fields + coral focus ring.
Mollie Components renders some fields as iframes (Kartennummer, CVC) where
we cannot reach inside, but Name auf der Karte and similar are real native
inputs that we CAN style. Tightens the vertical gaps so the section
doesn't feel half-empty. */
body.jm-v2.woocommerce-checkout #payment .payment_box {
padding: 14px 0 4px !important;
margin: 8px 0 0 !important;
}
body.jm-v2.woocommerce-checkout #payment .payment_box p,
body.jm-v2.woocommerce-checkout #payment .payment_box .form-row {
margin: 0 0 14px !important;
padding: 0 !important;
}
body.jm-v2.woocommerce-checkout #payment .payment_box label,
body.jm-v2.woocommerce-checkout #payment .payment_box .mollie-component-label,
body.jm-v2.woocommerce-checkout #payment .payment_box [class*="label"] {
font-family: 'JetBrains Mono', monospace !important;
font-size: 11px !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
color: var(--text-mid, #5A5A5A) !important;
margin: 0 0 6px !important;
display: block !important;
font-weight: 500 !important;
}
body.jm-v2.woocommerce-checkout #payment .payment_box input[type="text"],
body.jm-v2.woocommerce-checkout #payment .payment_box input[type="email"],
body.jm-v2.woocommerce-checkout #payment .payment_box input[type="tel"],
body.jm-v2.woocommerce-checkout #payment .payment_box input[type="number"],
body.jm-v2.woocommerce-checkout #payment .payment_box select,
body.jm-v2.woocommerce-checkout #payment .payment_box textarea {
background: var(--cream, #FAF6EE) !important;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
border-radius: 10px !important;
height: 50px !important;
line-height: 24px !important;
padding: 13px 16px !important;
font-size: 14px !important;
width: 100% !important;
box-sizing: border-box !important;
color: var(--text, #2A2A2A) !important;
}
body.jm-v2.woocommerce-checkout #payment .payment_box input:focus,
body.jm-v2.woocommerce-checkout #payment .payment_box select:focus,
body.jm-v2.woocommerce-checkout #payment .payment_box textarea:focus {
outline: none !important;
border-color: var(--jm-yellow, #E76A5C) !important;
box-shadow: 0 0 0 3px rgba(231, 106, 92, 0.15) !important;
}
/* Mollie Components iframe wrappers — full match to customer_details inputs.
Cream BG is safe because Mollie's iframe is launched with all `styles` set
to null (see live HTML on Karte fields), so the iframe content background
is transparent and inherits this cream — no nested-box doubling. */
body.jm-v2.woocommerce-checkout #payment .payment_box .mollie-component,
body.jm-v2.woocommerce-checkout #payment .payment_box .mollie-components-controller-card {
background: var(--cream, #FAF6EE) !important;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
border-radius: 10px !important;
height: 50px !important;
min-height: 50px !important;
padding: 13px 16px !important;
box-sizing: border-box !important;
overflow: hidden;
display: flex !important;
align-items: center !important;
}
body.jm-v2.woocommerce-checkout #payment .payment_box .mollie-component iframe,
body.jm-v2.woocommerce-checkout #payment .payment_box .mollie-components-controller-card iframe {
background: transparent !important;
width: 100% !important;
height: 24px !important;
vertical-align: middle !important;
}
body.jm-v2.woocommerce-checkout #payment .payment_box .mollie-component.is-focused,
body.jm-v2.woocommerce-checkout #payment .payment_box .mollie-components-controller-card.is-focused {
border-color: var(--jm-yellow, #E76A5C) !important;
box-shadow: 0 0 0 3px rgba(231, 106, 92, 0.15) !important;
}
/* Tighten the gap between fields so the section doesn't feel half-empty. */
body.jm-v2.woocommerce-checkout #payment .payment_box .form-row,
body.jm-v2.woocommerce-checkout #payment .payment_box p {
margin: 0 0 16px !important;
}
/* Mollie footer badge — small + muted */
body.jm-v2.woocommerce-checkout #payment .payment_box .mollie-secured-by,
body.jm-v2.woocommerce-checkout #payment .payment_box .mollie-components-secured-by {
font-size: 11px !important;
color: var(--text-muted, #888) !important;
margin-top: 8px !important;
}
/* Mobile: hide tape on small screens (cards lose their card chrome anyway) */
@media (max-width: 991px) {
body.jm-v2.woocommerce-checkout #customer_details::before,
body.jm-v2.woocommerce-checkout #order_review::before,
body.jm-v2.woocommerce-checkout #fab-payment-relocated::before {
display: none !important;
}
}
/* Delivery-estimate pill inside #order_review — keep the date range on one
line and let the label wrap to the next line when the column is narrow. */
body.jm-v2.woocommerce-checkout #order_review .fabricly-delivery-estimate,
body.jm-v2.woocommerce-checkout #fab-payment-relocated .fabricly-delivery-estimate {
flex-wrap: wrap;
row-gap: 2px;
line-height: 1.35;
padding: 12px 14px;
}
body.jm-v2.woocommerce-checkout #order_review .fabricly-delivery-estimate strong,
body.jm-v2.woocommerce-checkout #fab-payment-relocated .fabricly-delivery-estimate strong {
white-space: nowrap;
}
/* ============================================================
v2 checkout — unified checkbox styling
Targets: newsletter opt-in, "Ein Konto erstellen?", marketing
channel checkboxes, and any payment-side checkboxes (Klarna,
Mollie consent, etc). Overrides default browser appearance and
any plugin styles so all boxes look the same.
============================================================ */
body.jm-v2.woocommerce-checkout form.checkout input[type="checkbox"],
body.jm-v2.woocommerce-checkout #customer_details input[type="checkbox"],
body.jm-v2.woocommerce-checkout #fab-payment-relocated input[type="checkbox"] {
appearance: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
margin: 0 10px 0 0 !important;
padding: 0 !important;
border: 1.5px solid rgba(0, 0, 0, 0.45) !important;
border-radius: 4px !important;
background: #fff !important;
cursor: pointer !important;
position: relative !important;
flex-shrink: 0 !important;
vertical-align: -3px !important;
box-shadow: none !important;
transition: background 0.12s ease, border-color 0.12s ease;
}
body.jm-v2.woocommerce-checkout form.checkout input[type="checkbox"]:hover,
body.jm-v2.woocommerce-checkout #customer_details input[type="checkbox"]:hover,
body.jm-v2.woocommerce-checkout #fab-payment-relocated input[type="checkbox"]:hover {
border-color: var(--jm-yellow, #E76A5C) !important;
}
body.jm-v2.woocommerce-checkout form.checkout input[type="checkbox"]:checked,
body.jm-v2.woocommerce-checkout #customer_details input[type="checkbox"]:checked,
body.jm-v2.woocommerce-checkout #fab-payment-relocated input[type="checkbox"]:checked {
background: var(--jm-yellow, #E76A5C) !important;
border-color: var(--jm-yellow, #E76A5C) !important;
}
body.jm-v2.woocommerce-checkout form.checkout input[type="checkbox"]:checked::after,
body.jm-v2.woocommerce-checkout #customer_details input[type="checkbox"]:checked::after,
body.jm-v2.woocommerce-checkout #fab-payment-relocated input[type="checkbox"]:checked::after {
content: "" !important;
position: absolute !important;
left: 5px !important;
top: 1px !important;
width: 5px !important;
height: 10px !important;
border: solid #fff !important;
border-width: 0 2px 2px 0 !important;
transform: rotate(45deg) !important;
background: transparent !important;
}
body.jm-v2.woocommerce-checkout form.checkout input[type="checkbox"]:focus,
body.jm-v2.woocommerce-checkout #customer_details input[type="checkbox"]:focus,
body.jm-v2.woocommerce-checkout #fab-payment-relocated input[type="checkbox"]:focus {
outline: none !important;
box-shadow: 0 0 0 3px rgba(231, 106, 92, 0.18) !important;
}
/* Checkbox labels — single unified rule. ANY