:root { /* Cart glyph (matches sw_icon('cart')) — used as a CSS mask on plugin-rendered buttons we can't inject an inline SVG into (e.g. the bundle add-to-cart). */ --sw-cart-icon: url('data:image/svg+xml;utf8,'); /* Accents — green default */ --accent: oklch(0.55 0.14 150); --accent-hover: oklch(0.48 0.15 150); --accent-soft: oklch(0.95 0.04 150); --accent-ink: oklch(0.28 0.08 150); /* Neutrals — warm */ --bg: oklch(0.985 0.004 90); --bg-2: oklch(0.965 0.006 85); --bg-3: oklch(0.94 0.008 85); --line: oklch(0.88 0.008 85); --line-2: oklch(0.92 0.006 85); --ink: oklch(0.22 0.01 80); --ink-2: oklch(0.38 0.012 80); --ink-3: oklch(0.48 0.014 80); --ink-4: oklch(0.6 0.012 80); /* Semantic */ --warn: oklch(0.72 0.14 70); --err: oklch(0.58 0.17 25); --ok: oklch(0.58 0.14 150); /* Type */ --display: "Instrument Serif", "Iowan Old Style", Georgia, serif; --ui: "Geist", "Inter", -apple-system, system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, Menlo, monospace; --radius: 10px; --radius-lg: 16px; --radius-sm: 6px; --shadow-sm: 0 1px 0 rgba(20,20,18,0.04), 0 1px 2px rgba(20,20,18,0.03); --shadow: 0 1px 0 rgba(20,20,18,0.04), 0 8px 24px -12px rgba(20,20,18,0.12); --shadow-lg: 0 1px 0 rgba(20,20,18,0.04), 0 24px 60px -20px rgba(20,20,18,0.18); --container: 1280px; } /* Accent variants */ [data-accent="green"] { --accent: oklch(0.55 0.14 150); --accent-hover: oklch(0.48 0.15 150); --accent-soft: oklch(0.95 0.04 150); --accent-ink: oklch(0.28 0.08 150); } [data-accent="forest"] { --accent: oklch(0.42 0.10 155); --accent-hover: oklch(0.36 0.10 155); --accent-soft: oklch(0.93 0.03 155); --accent-ink: oklch(0.22 0.07 155); } [data-accent="lime"] { --accent: oklch(0.72 0.17 135); --accent-hover: oklch(0.66 0.17 135); --accent-soft: oklch(0.96 0.05 135); --accent-ink: oklch(0.30 0.10 135); } [data-accent="teal"] { --accent: oklch(0.58 0.10 185); --accent-hover: oklch(0.50 0.11 185); --accent-soft: oklch(0.95 0.03 185); --accent-ink: oklch(0.28 0.07 185); } /* Font pairings */ [data-font="instrument-geist"] { --display: "Instrument Serif", Georgia, serif; --ui: "Geist", "Inter", system-ui, sans-serif; } [data-font="fraunces-geist"] { --display: "Fraunces", Georgia, serif; --ui: "Geist", "Inter", system-ui, sans-serif; } [data-font="bricolage-geist"] { --display: "Bricolage Grotesque", system-ui, sans-serif; --ui: "Geist", "Inter", system-ui, sans-serif; } [data-font="newsreader-geist"] { --display: "Newsreader", Georgia, serif; --ui: "Geist", "Inter", system-ui, sans-serif; } [data-font="fraunces-inter"] { --display: "Fraunces", Georgia, serif; --ui: "Inter", system-ui, sans-serif; } [data-font="dmserif-plex"] { --display: "DM Serif Display", Georgia, serif; --ui: "IBM Plex Sans", system-ui, sans-serif; } [data-font="all-geist"] { --display: "Geist", system-ui, sans-serif; --ui: "Geist", system-ui, sans-serif; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--ui); background: var(--bg); color: var(--ink); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } input, select, textarea { font-family: inherit; font-size: inherit; } /* Tap reliability on touch devices: `manipulation` removes the legacy ~300ms "wait for double-tap-to-zoom" delay browsers add before firing click on interactive elements, so taps register immediately and consistently. This is the modern, targeted fix — independent of the viewport zoom meta. */ a, button, [role="button"], input, select, textarea, label, summary, .chip, .pcard-cta { touch-action: manipulation; } h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; letter-spacing: -0.01em; margin: 0; line-height: 1.05; } /* One title scale site-wide — matches .sw-cart-title used on the cart, checkout, order-pay, and order-received headers, so every page header reads at the same size regardless of which template renders it. */ h1 { font-size: clamp(40px, 5vw, 64px); } h2 { font-size: clamp(28px, 3.4vw, 44px); } h3 { font-size: 22px; font-family: var(--ui); font-weight: 500; letter-spacing: -0.005em; } .mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-3); } .kicker { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); } .container { max-width: var(--container); margin: 0 auto; padding: 0 32px; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; height: 44px; border-radius: var(--radius); font-weight: 500; font-size: 14px; border: 1px solid transparent; transition: background .15s, border-color .15s, color .15s; white-space: nowrap; } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-hover); } .btn-secondary { background: var(--bg); border-color: var(--line); color: var(--ink); } .btn-secondary:hover { background: var(--bg-2); border-color: var(--ink-4); } .btn-ghost { background: transparent; color: var(--ink); } .btn-ghost:hover { background: var(--bg-3); } .btn-lg { height: 52px; padding: 0 24px; font-size: 15px; } .btn-sm { height: 34px; padding: 0 12px; font-size: 13px; border-radius: var(--radius-sm); } .btn-block { width: 100%; } /* Badges */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 500; letter-spacing: 0.02em; } .badge-new { background: var(--accent); color: #fff; } .badge-soft { background: var(--accent-soft); color: var(--accent-ink); } .badge-sale { background: oklch(0.95 0.04 25); color: oklch(0.38 0.14 25); } .badge-stock { background: var(--bg-3); color: var(--ink-2); } .badge-outline { background: transparent; border: 1px solid var(--line); color: var(--ink-2); } /* Card */ .card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); } /* Inputs */ .field { display: block; width: 100%; height: 44px; padding: 0 14px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); transition: border-color .15s, box-shadow .15s; } .field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .field-lg { height: 52px; } textarea.field { height: auto; padding: 12px 14px; resize: vertical; min-height: 88px; } /* type=search clear button: native (Chrome/Safari) renders a blue X. Replace with a theme-ink X via mask so it matches the rest of the UI. */ input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; height: 15px; width: 15px; margin-left: 8px; cursor: pointer; background-color: var(--ink-3); -webkit-mask: url('data:image/svg+xml;utf8,') center / contain no-repeat; mask: url('data:image/svg+xml;utf8,') center / contain no-repeat; } input[type="search"]::-webkit-search-cancel-button:hover { background-color: var(--ink); } .label { display: block; font-size: 13px; font-weight: 500; color: var(--ink-2); margin-bottom: 6px; } /* Placeholder imagery — striped SVG */ .ph { position: relative; display: block; width: 100%; aspect-ratio: 1/1; border-radius: var(--radius); overflow: hidden; background: var(--bg-2); border: 1px solid var(--line-2); isolation: isolate; } .ph::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, transparent 0 10px, rgba(20,20,18,0.035) 10px 11px); z-index: 1; } .ph:has(img)::before { display: none; } .ph-label { position: absolute; left: 10px; bottom: 10px; z-index: 2; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); background: rgba(255,255,255,0.7); backdrop-filter: blur(4px); padding: 3px 7px; border-radius: 4px; border: 1px solid var(--line-2); } .ph-glyph { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; color: var(--ink-4); } /* Divider */ .hr { height: 1px; background: var(--line); border: 0; margin: 0; } /* utility */ .flex { display: flex; } .between { display: flex; align-items: center; justify-content: space-between; } .row { display: flex; align-items: center; gap: 12px; } .grid { display: grid; } .spacer { flex: 1; } .price { font-variant-numeric: tabular-nums; font-weight: 600; } .price-old { color: var(--ink-4); text-decoration: line-through; font-weight: 400; margin-left: 8px; } /* Top nav */ .topbar { background: var(--ink); color: var(--bg); font-size: 12px; padding: 8px 0; } .topbar a:hover { color: #fff; } .topbar { background: var(--ink); color: #fff; font-size: 13px; } .topbar-inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px; min-height: 28px; padding: 4px 16px; text-align: center; } .topbar-inner span { display: inline-flex; align-items: center; gap: 6px; } .topbar-inner svg { opacity: 0.8; } .topbar-sep { opacity: 0.4; } .topbar.topbar-vacation { background: var(--warn); color: var(--ink); font-weight: 500; } .topbar.topbar-vacation svg { opacity: 0.9; } .topbar-notice strong { font-weight: 700; } .topbar-notice { text-align: center; } @media (max-width: 720px) { .topbar-inner span.topbar-notice { display: block; } /* wrap als gecentreerde tekst, geen inline-flex */ } @media (max-width: 560px) { .topbar { font-size: 12px; } .topbar-inner { gap: 8px; } .topbar-sep, .topbar-extra { display: none; } } .nav { position: sticky; top: 0; z-index: 50; background: color-mix(in oklch, var(--bg), transparent 8%); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--line); } .nav-inner { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; height: 68px; } .nav-bar { display: flex; align-items: center; height: 68px; gap: 6px; } .nav-logo { margin-right: 40px; display: inline-flex; align-items: center; } .nav-logo .site-logo { height: 42px; width: auto; max-width: none; display: block; } .nav-spacer { flex: 1; } .nav-search { position: relative; width: 260px; } .nav-search .nav-search-ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; display: flex; } .nav-search .field { padding-left: 36px; background: var(--bg-2); border-color: var(--line-2); } /* Hamburger toggle — hidden on desktop, shown on mobile. Needs the .nav prefix (0,2,0) to beat `.icon-btn { display:grid }`, since the button carries both classes — otherwise it shows at every width. */ .nav .nav-burger { display: none; } .nav-burger .nav-burger-close { display: none; } .nav.is-open .nav-burger .nav-burger-open { display: none; } .nav.is-open .nav-burger .nav-burger-close { display: flex; } /* Mobile drawer */ .nav-mobile { display: none; border-top: 1px solid var(--line); background: var(--bg); padding: 12px 32px 20px; } .nav-mobile-search { position: relative; margin-bottom: 8px; } .nav-mobile-search .nav-search-ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; display: flex; } .nav-mobile-search .field { padding-left: 36px; background: var(--bg-2); border-color: var(--line-2); } .nav-mobile a { display: flex; align-items: center; gap: 12px; padding: 12px 4px; font-family: var(--ui); font-size: 15px; color: var(--ink-2); border-bottom: 1px solid var(--line-2); } .nav-mobile a:last-child { border-bottom: 0; } .nav-mobile a.active { color: var(--ink); font-weight: 600; } .nav-mobile a svg { color: var(--ink-3); flex-shrink: 0; } .logo { font-family: var(--display); font-size: 34px; letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 0; } .logo-mark { width: 26px; height: 26px; border-radius: 7px; background: var(--accent); display: grid; place-items: center; color: #fff; font-family: var(--ui); font-weight: 600; font-size: 14px; } .nav-links { display: flex; gap: 4px; } .nav-links a { padding: 8px 12px; border-radius: 6px; font-size: 14px; color: var(--ink-2); } .nav-links a:hover { background: var(--bg-3); color: var(--ink); } .nav-links a.active { color: var(--ink); background: var(--bg-3); } .search-wrap { position: relative; flex: 1; max-width: 520px; } .search-wrap svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; } .search-wrap .field { padding-left: 40px; background: var(--bg-2); border-color: var(--line-2); } .search-wrap .kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: 10px; color: var(--ink-3); border: 1px solid var(--line); padding: 2px 6px; border-radius: 4px; background: var(--bg); } .icon-btn { width: 40px; height: 40px; border-radius: 8px; border: 1px solid transparent; background: transparent; display: grid; place-items: center; color: var(--ink-2); position: relative; } @media (hover: hover) { .icon-btn:hover { background: var(--bg-3); color: var(--ink); } } .icon-btn .dot { position: absolute; top: 8px; right: 8px; width: 16px; height: 16px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 600; display: grid; place-items: center; } /* Category strip */ .cat-strip { display: flex; gap: 6px; overflow-x: auto; padding: 10px 0 14px; border-bottom: 1px solid var(--line); } .cat-strip a { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); font-size: 13px; color: var(--ink-2); white-space: nowrap; } .cat-strip a.active { background: var(--ink); color: var(--bg); border-color: var(--ink); } .cat-strip a:hover:not(.active) { border-color: var(--ink-4); color: var(--ink); } /* HERO */ .hero { padding-top: 56px; padding-bottom: 32px; position: relative; } .hero-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 48px; align-items: center; } .hero h1 { max-width: 780px; font-size: clamp(32px, 4.2vw, 56px); } .hero .eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-size: 12px; font-weight: 500; margin-bottom: 20px; } .hero .eyebrow .dot { width: 6px; height: 6px; background: var(--accent); border-radius: 999px; } .hero-art { aspect-ratio: 3/2; border-radius: var(--radius-lg); position: relative; overflow: hidden; background: var(--bg-2); border: 1px solid var(--line-2); } .hero-meta { margin-top: 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; border-top: 1px solid var(--line); padding-top: 20px; } .hero-meta .k { font-size: 22px; font-family: var(--display); } .hero-meta .v { font-size: 12px; color: var(--ink-3); letter-spacing: 0.04em; text-transform: uppercase; margin-top: 4px; } /* Homepage product spotlight banner */ .hero-spotlight { padding-top: 28px; padding-bottom: 24px; } .spotlight { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 32px; align-items: center; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--radius-lg); padding: 24px; } .spotlight-info { min-width: 0; } .spotlight-info h1 { font-size: clamp(22px, 2.6vw, 34px); line-height: 1.08; margin-top: 8px; } .spotlight-info h1 a { color: inherit; text-decoration: none; } .spotlight-info h1 a:hover { color: var(--accent-ink); } .spotlight-pitch { color: var(--ink-3); font-size: 15px; line-height: 1.5; margin-top: 12px; max-width: 440px; } .spotlight-price { font-family: var(--display); font-size: 26px; color: var(--ink); margin: 16px 0 18px; } .spotlight-price del { color: var(--ink-4); font-size: 17px; margin-left: 10px; } .spotlight-usps { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 18px; color: var(--ink-3); font-size: 13px; } .spotlight-usps span { display: inline-flex; align-items: center; gap: 6px; } .spotlight-usps span svg { color: var(--accent); } .spotlight-art { display: block; aspect-ratio: 16 / 10; border-radius: var(--radius); background: #fff; position: relative; overflow: hidden; } .spotlight-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 20px; } @media (max-width: 860px) { .spotlight { grid-template-columns: 1fr; gap: 18px; padding: 18px; } .spotlight-art { order: -1; aspect-ratio: 16 / 9; } } /* Section header */ .sec-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin: 64px 0 20px; } .sec-head h2 { max-width: 560px; } .sec-head .right { display: flex; gap: 8px; } /* Product card */ .pcard { background: var(--bg); border-radius: var(--radius); position: relative; transition: transform .2s; color: var(--ink); } .pcard:link, .pcard:visited, .pcard:hover, .pcard:focus { color: var(--ink); text-decoration: none; } .pcard .price, .pcard .price * { color: var(--ink) !important; } @media (hover: hover) { .pcard:hover { transform: translateY(-2px); } } .pcard .ph { aspect-ratio: 1/1; } .pcard .pcard-body { padding: 6px 4px 6px; } .pcard .brand { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; display: inline-block; } .pcard .brand[role="link"] { cursor: pointer; padding: 7px 8px; margin: -7px -8px 0; min-height: 24px; } .pcard .brand[role="link"]:hover { color: var(--ink); } .pcard .title { font-size: 14px; font-weight: 500; color: var(--ink); margin-bottom: 8px; line-height: 1.35; } .pcard .meta { display: flex; align-items: center; justify-content: space-between; } .pcard .ecos { display: flex; gap: 4px; margin-top: 6px; } .pcard .ecos span { font-size: 10px; padding: 2px 6px; border-radius: 4px; background: var(--bg-3); color: var(--ink-2); } .pcard .quick { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; opacity: 0; transition: opacity .2s; } @media (hover: hover) { .pcard:hover .quick { opacity: 1; } } .pcard .quick button { width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,0.9); backdrop-filter: blur(6px); display: grid; place-items: center; color: var(--ink-2); } .pcard .quick button:hover { background: #fff; color: var(--ink); } .pcard .ribbon { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; z-index: 2; } /* Product grid */ .prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 24px; } .prod-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } /* Category tiles */ .cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .cat-grid--sm { grid-template-columns: repeat(5, 1fr); gap: 12px; } .cat-grid--sm .cat-tile { aspect-ratio: auto; padding: 14px; min-height: 110px; } .cat-grid--sm .cat-tile h3 { font-size: 22px; } .cat-grid--sm .cat-tile::after { width: 120px; height: 120px; right: -30px; top: -30px; } @media (max-width: 880px) { .cat-grid--sm { grid-template-columns: repeat(3, 1fr); } } .cat-tile { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-2); background: var(--bg-2); aspect-ratio: 3/2; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; transition: border-color .15s, transform .15s; } .cat-tile:hover { border-color: var(--ink-4); transform: translateY(-2px); } .cat-tile .cat-glyph { width: 32px; height: 32px; border-radius: 6px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; } .cat-tile h3 { font-family: var(--display); font-weight: 400; font-size: 26px; letter-spacing: -0.01em; line-height: 1.05; margin-bottom: 6px; } .cat-tile .count { font-family: var(--mono); font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; } .cat-tile::after { content: ""; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; border-radius: 999px; background: radial-gradient(circle at center, var(--accent-soft), transparent 70%); z-index: 0; } .cat-tile::before { content: "S"; position: absolute; right: -28px; bottom: -28px; width: 88px; height: 88px; border-radius: 50%; background: var(--ink); color: #fff; font-family: var(--display); font-size: 30px; line-height: 1; display: flex; align-items: flex-start; justify-content: flex-start; padding: 14px 0 0 14px; box-sizing: border-box; z-index: 1; pointer-events: none; } .cat-grid--sm .cat-tile::before { width: 64px; height: 64px; right: -22px; bottom: -22px; font-size: 22px; padding: 10px 0 0 10px; } /* Ecosystem tiles: replace the "S" quarter mark with a brand logo, and reposition the radial gradient so it sits behind the icon. */ .cat-tile--eco::before { display: none; } .cat-grid--sm .cat-tile--eco::after, .cat-tile--eco::after { right: -30px; bottom: -55px; top: auto; left: auto; width: 140px; height: 140px; } .cat-tile > :not(.cat-tile-brand) { position: relative; z-index: 2; } .cat-tile-brand { position: absolute !important; right: 14px; bottom: 14px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--ink); z-index: 2; pointer-events: none; opacity: 0.5; } .cat-tile-brand svg { display: block; width: 100%; height: 100%; } .cat-tile[data-tone="b"]::after { background: radial-gradient(circle at center, oklch(0.93 0.04 60), transparent 70%); } .cat-tile[data-tone="c"]::after { background: radial-gradient(circle at center, oklch(0.93 0.04 220), transparent 70%); } .cat-tile[data-tone="d"]::after { background: radial-gradient(circle at center, oklch(0.93 0.04 30), transparent 70%); } .cat-tile[data-tone="e"]::after { background: radial-gradient(circle at center, oklch(0.93 0.04 300), transparent 70%); } .cat-tile[data-tone="f"]::after { background: radial-gradient(circle at center, oklch(0.94 0.03 100), transparent 70%); } .cat-tile[data-tone="g"]::after { background: radial-gradient(circle at center, oklch(0.93 0.04 260), transparent 70%); } /* Editorial row */ .edit-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; } .edit-card { border-radius: var(--radius-lg); background: var(--ink); color: var(--bg); padding: 40px; position: relative; overflow: hidden; min-height: 320px; display: flex; flex-direction: column; justify-content: space-between; } .edit-card h2 { font-size: 40px; color: #fff; } .edit-card.light { background: var(--accent-soft); color: var(--accent-ink); } .edit-card.light h2 { color: var(--accent-ink); } /* USP row */ .usp-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 80px; } .usp { padding: 24px 24px 24px 0; display: flex; gap: 14px; align-items: flex-start; border-right: 1px solid var(--line); } .usp:last-child { border-right: 0; padding-right: 0; } .usp:not(:first-child) { padding-left: 24px; } .usp-icon { width: 36px; height: 36px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; flex-shrink: 0; } .usp h4 { font-family: var(--ui); font-size: 14px; font-weight: 600; margin: 0 0 2px; } .usp p { margin: 0; font-size: 13px; color: var(--ink-3); line-height: 1.4; } /* Footer */ .footer { margin-top: 96px; background: var(--ink); color: oklch(0.8 0.01 80); padding: 64px 0 32px; } .footer h4, .footer .footer-col-title { font-family: var(--ui); font-size: 13px; font-weight: 600; color: #fff; margin: 0 0 16px; letter-spacing: 0.04em; text-transform: uppercase; } .footer a { color: oklch(0.75 0.01 80); font-size: 14px; line-height: 2; } .footer a:hover { color: #fff; } .footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .footer-bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid oklch(0.32 0.01 80); display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: oklch(0.72 0.01 80); } /* Tap targets: give footer links a >=24px high hit area + spacing (Lighthouse target-size). */ .footer-bottom .row { gap: 8px 20px; } .footer-bottom a { display: inline-block; padding: 5px 0; line-height: 1.4; } .footer .footer-grid a { display: inline-block; padding: 3px 0; } /* PLP */ .plp-head { padding-top: 40px; padding-bottom: 24px; } .breadcrumb { font-size: 13px; color: var(--ink-3); margin-bottom: 12px; display: flex; gap: 6px; align-items: center; } .breadcrumb a:hover { color: var(--ink); } .plp-grid { display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: start; } .plp-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; } .plp-toolbar .chips { display: flex; gap: 8px; flex-wrap: wrap; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-size: 12px; font-weight: 500; text-decoration: none; transition: background 0.15s; } .chip-kind { font-weight: 400; opacity: 0.7; } .chip:hover { background: color-mix(in oklch, var(--accent-soft), var(--accent) 12%); } .chip svg { opacity: 0.65; } .chip:hover svg { opacity: 1; } .chip-clear { font-size: 12px; color: var(--ink-3); text-decoration: underline; padding: 5px 6px; align-self: center; } .chip-clear:hover { color: var(--ink); } .facet { border-bottom: 1px solid var(--line); padding: 20px 0; } .facet:first-child { padding-top: 0; } .facet h4 { font-family: var(--ui); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; margin: 0 0 12px; display: flex; align-items: center; gap: 6px; color: var(--ink); cursor: pointer; } .facet h4 > svg { margin-left: auto; transition: transform .15s; } .facet .count { font-weight: 400; color: var(--ink-3); font-size: 12px; } .facet.closed h4 { margin-bottom: 0; } .facet.closed { padding-bottom: 12px; padding-top: 12px; } .facet-list { display: flex; flex-direction: column; gap: 8px; } .facet-item { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); cursor: pointer; } .facet-item .box { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--line); background: var(--bg); display: grid; place-items: center; flex-shrink: 0; transition: .1s; } /* The check icon is always rendered (so JS can toggle state in the drawer without a reload) — only reveal it when the item is checked. */ .facet-item .box svg { opacity: 0; } .facet-item.checked .box { background: var(--accent); border-color: var(--accent); color: #fff; } .facet-item.checked .box svg { opacity: 1; } .facet-item:hover .box { border-color: var(--ink-4); } .facet-item .n { color: var(--ink-4); font-size: 12px; margin-left: auto; font-variant-numeric: tabular-nums; } .facet-item.checked { color: var(--ink); } .price-range { display: flex; align-items: center; gap: 8px; margin-top: 8px; } .price-range input { height: 32px; width: 72px; padding: 0 8px; font-size: 13px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); } .price-range .dash { color: var(--ink-4); } .price-slider { position: relative; height: 28px; margin-top: 14px; padding: 0 8px; } .price-slider-track { position: absolute; left: 8px; right: 8px; top: 13px; height: 2px; background: var(--line); border-radius: 2px; } .price-slider-fill { position: absolute; top: 13px; height: 2px; background: var(--accent); border-radius: 2px; pointer-events: none; } .price-slider input[type="range"] { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 28px; margin: 0; background: transparent; pointer-events: none; -webkit-appearance: none; appearance: none; } .price-slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); cursor: pointer; pointer-events: auto; box-shadow: 0 1px 2px rgba(0,0,0,0.08); } .price-slider input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); cursor: pointer; pointer-events: auto; box-shadow: 0 1px 2px rgba(0,0,0,0.08); } .price-slider input[type="range"]::-webkit-slider-runnable-track { background: transparent; border: 0; } .price-slider input[type="range"]::-moz-range-track { background: transparent; border: 0; } /* Mobile filter drawer chrome — hidden on desktop; the @media block below reveals it once the JS marks the grid as drawer-ready. */ .plp-filter-trigger, .plp-filter-head, .plp-filter-actions, .plp-filter-overlay { display: none; } /* Legal pages (algemene voorwaarden, privacy) */ .legal section { margin-bottom: 44px; } .legal section + section { padding-top: 32px; border-top: 1px solid var(--line-2); } .legal h2 { font-family: var(--ui); font-size: 20px; font-weight: 600; letter-spacing: -0.005em; color: var(--ink); margin: 0 0 14px; line-height: 1.3; } .legal p { font-size: 16px; color: var(--ink-2); line-height: 1.7; margin: 0 0 14px; } .legal ol, .legal ul { margin: 14px 0; padding-left: 22px; } .legal li { font-size: 16px; color: var(--ink-2); line-height: 1.7; margin-bottom: 8px; } .legal li::marker { color: var(--ink-3); } .legal a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; } .legal a:hover { color: var(--accent); } .legal strong { color: var(--ink); font-weight: 600; } /* My Account dashboard layout — welcome card, quick-action tiles, recent orders. */ .acc-welcome { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); margin-bottom: 24px; } .acc-welcome h2 { font-family: var(--ui); font-size: 24px; font-weight: 600; letter-spacing: -0.01em; margin: 0; } .acc-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; } .acc-tile { display: flex; align-items: center; gap: 14px; padding: 18px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; } .acc-tile:hover { border-color: var(--ink-4); transform: translateY(-1px); } .acc-tile-glyph { width: 40px; height: 40px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; flex-shrink: 0; } .acc-tile-body { flex: 1; min-width: 0; } .acc-tile-label { font-size: 15px; font-weight: 600; color: var(--ink); } .acc-tile-desc { font-size: 12px; color: var(--ink-3); margin-top: 2px; } .acc-tile svg:last-child { color: var(--ink-3); flex-shrink: 0; } /* Recent-orders rows (also used on the order-list page). */ .acc-orders { display: flex; flex-direction: column; gap: 10px; } .acc-order { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); text-decoration: none; color: inherit; transition: border-color .15s; } .acc-order:hover { border-color: var(--ink-4); } .acc-order--full { display: block; padding: 0; } .acc-order--full .acc-order-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 18px 20px; } .acc-order--full .acc-order-actions { display: flex; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line-2); background: var(--bg-2); border-radius: 0 0 var(--radius) var(--radius); flex-wrap: wrap; } .acc-order-status { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; background: var(--bg-3); color: var(--ink-2); } .acc-order-status[data-status="completed"] { background: var(--accent-soft); color: var(--accent-ink); } .acc-order-status[data-status="processing"] { background: #fef3c7; color: #92400e; } .acc-order-status[data-status="on-hold"] { background: #e0e7ff; color: #3730a3; } .acc-order-status[data-status="pending"] { background: var(--bg-3); color: var(--ink-3); } .acc-order-status[data-status="cancelled"], .acc-order-status[data-status="failed"] { background: #fee2e2; color: #991b1b; } .acc-order-status[data-status="refunded"] { background: var(--bg-3); color: var(--ink-3); } .acc-section { margin-top: 32px; } /* View-order hero (status + summary line). */ .acc-order-hero { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); margin-bottom: 24px; } /* View-order page: tidy the WC default shop_table so it reads as a card with thin row dividers instead of an admin grid. Drop the gray PRODUCT | TOTAAL header row, the alternating row backgrounds, and the heavy borders. */ .woocommerce-order-details { margin-bottom: 32px; } .woocommerce-order-details__title { font-family: var(--ui) !important; font-weight: 600 !important; font-size: 16px !important; color: var(--ink-3) !important; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 12px !important; } .woocommerce-order-details table.shop_table { width: 100%; border-collapse: collapse; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg); } .woocommerce-order-details table.shop_table thead { display: none; } .woocommerce-order-details table.shop_table tr { border: 0; } .woocommerce-order-details table.shop_table tbody tr { border-top: 0; } .woocommerce-order-details table.shop_table tbody tr td, .woocommerce-order-details table.shop_table tbody tr th, .woocommerce-order-details table.shop_table tfoot tr td, .woocommerce-order-details table.shop_table tfoot tr th { background: transparent !important; border: 0; padding: 14px 18px; font-size: 14px; color: var(--ink-2); } .woocommerce-order-details table.shop_table tbody tr + tr td, .woocommerce-order-details table.shop_table tbody tr + tr th, .woocommerce-order-details table.shop_table tfoot tr td, .woocommerce-order-details table.shop_table tfoot tr th { border-top: 1px solid var(--line-2); } .woocommerce-order-details table.shop_table th[scope="row"] { color: var(--ink-3); font-weight: 500; } .woocommerce-order-details table.shop_table tfoot tr:last-child td, .woocommerce-order-details table.shop_table tfoot tr:last-child th { color: var(--ink); font-weight: 600; font-size: 15px; } .woocommerce-order-details .product-name { color: var(--ink); font-weight: 500; } .woocommerce-order-details .product-name a { color: var(--ink); text-decoration: none; } .woocommerce-order-details .product-name .product-quantity { color: var(--ink-3); font-weight: 500; margin-left: 4px; } .woocommerce-order-details .product-total { white-space: nowrap; text-align: right; font-weight: 600; color: var(--ink); } /* Customer-details (Factuuradres / Verzendadres) — match the rest of the account section's compact card style instead of huge display headings. */ .woocommerce-customer-details { margin-top: 32px; } .woocommerce-customer-details > h2 { font-family: var(--ui) !important; font-weight: 600 !important; font-size: 16px !important; color: var(--ink-3) !important; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 12px !important; } .woocommerce-customer-details .woocommerce-columns { display: grid !important; grid-template-columns: 1fr 1fr; gap: 16px; } .woocommerce-customer-details .woocommerce-column { float: none !important; width: auto !important; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); } /* Same float-vs-grid issue as the MyAccount layout — WC swaps billing into col 2 and pushes shipping to a new row. Pin explicitly. */ .woocommerce-customer-details .woocommerce-column--1, .woocommerce-customer-details .woocommerce-column--billing-address { grid-column: 1 !important; grid-row: 1 !important; } .woocommerce-customer-details .woocommerce-column--2, .woocommerce-customer-details .woocommerce-column--shipping-address { grid-column: 2 !important; grid-row: 1 !important; } .woocommerce-customer-details .woocommerce-column h2, .woocommerce-customer-details .woocommerce-column h3 { font-family: var(--ui); font-weight: 600; font-size: 13px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 8px; } .woocommerce-customer-details address { font-style: normal; font-size: 14px; color: var(--ink-2); line-height: 1.6; border: 0 !important; border-radius: 0 !important; padding: 0 !important; background: transparent !important; } .woocommerce-customer-details .woocommerce-customer-details--phone, .woocommerce-customer-details .woocommerce-customer-details--email { font-size: 13px; color: var(--ink-3); margin: 8px 0 0; } /* Order pay page (form-pay.php) — themed table + payment box + CTA so it matches the rest of the account/checkout look. */ .sw-pay-page { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px 48px; align-items: start; } .sw-pay-page > .sw-pay-header { grid-column: 1 / -1; margin-bottom: 8px; } .sw-pay-page > .sw-pay-form { grid-column: 1 / 2; } .sw-pay-page > .sw-pay-trust { grid-column: 1 / 2; } .sw-pay-page > .sw-pay-summary { grid-column: 2 / 3; grid-row: 2 / span 99; } @media (max-width: 880px) { .sw-pay-page { grid-template-columns: 1fr; } .sw-pay-page > .sw-pay-summary { grid-column: 1 / -1; grid-row: auto; } } .sw-pay-intro { color: var(--ink-2); font-size: 14px; line-height: 1.5; margin: 0 0 24px; } .sw-pay-intro strong { color: var(--ink); font-weight: 600; } .sw-pay-step { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); background: var(--bg); } .sw-pay-step-num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 999px; background: var(--ink); color: #fff; font-family: var(--ui); font-size: 12px; font-weight: 600; } .sw-pay-step-title { font-family: var(--ui); font-weight: 600; font-size: 16px; margin: 0; color: var(--ink); letter-spacing: -0.005em; } .sw-pay-page #payment.woocommerce-checkout-payment { padding: 0; } /* Bump specificity to beat WC's `.woocommerce-checkout #payment div.form-row` (1,2,1) which sets padding: 1em — we want a tighter frame. Asymmetric top (10px) vs bottom (18px) padding because WC injects hidden s as the first children, which the flex layout still leaves a sliver of space for — visually pushes content ~10px below the row's content edge. */ .sw-pay-page #payment div.sw-pay-submit-row { padding: 10px 20px 18px !important; border-top: 1px solid var(--line); background: var(--bg-2); display: flex; flex-direction: column; gap: 10px; align-items: stretch; margin: 0; } /* Privacy text + terms checkbox group: collapse WC's default 12+20px margins around the wrapper and the 16px below the checkbox row. */ .sw-pay-page #payment .sw-pay-submit-row .woocommerce-terms-and-conditions-wrapper { margin: 0; } .sw-pay-page #payment .sw-pay-submit-row .woocommerce-privacy-policy-text { margin: 0 0 10px; font-size: 13px; color: var(--ink-3); line-height: 1.5; } .sw-pay-page #payment .sw-pay-submit-row .woocommerce-terms-and-conditions-wrapper > p.form-row { margin: 0 !important; padding: 0 !important; } .sw-pay-page #payment .sw-pay-submit-row .woocommerce-terms-and-conditions-wrapper label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); cursor: pointer; line-height: 1.4; } .sw-pay-page #payment .sw-pay-submit-row .woocommerce-terms-and-conditions-wrapper input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); flex-shrink: 0; } .sw-pay-page #place_order, .sw-pay-page #payment #place_order, .sw-pay-page form#order_review #place_order { width: 100%; justify-content: center; height: 48px; padding: 0 22px !important; background: var(--accent) !important; color: #fff !important; border: 0 !important; border-radius: var(--radius) !important; font-family: var(--ui) !important; font-size: 15px !important; font-weight: 600 !important; } .sw-pay-trust { display: flex; align-items: center; gap: 8px; margin: 12px 0 24px; color: var(--ink-3); font-size: 13px; } .sw-pay-trust svg { color: var(--accent); } /* Order summary sidebar */ .sw-pay-summary { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; position: sticky; top: 24px; } .sw-pay-summary-title { font-family: var(--ui); font-weight: 600; font-size: 16px; color: var(--ink); margin: 0 0 16px; letter-spacing: -0.005em; } .sw-pay-summary-items { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 14px; } .sw-pay-summary-item { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; } .sw-pay-summary-thumb { position: relative; width: 56px; height: 56px; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg); border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center; } .sw-pay-summary-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .sw-pay-summary-qty { position: absolute; top: -6px; left: -6px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--ink); color: #fff; font-family: var(--ui); font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; } .sw-pay-summary-name { font-family: var(--ui); font-size: 14px; color: var(--ink); line-height: 1.3; } .sw-pay-summary-price { font-family: var(--ui); font-size: 14px; font-weight: 500; color: var(--ink); white-space: nowrap; } .sw-pay-summary-totals { margin: 0 0 12px; padding: 16px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; } .sw-pay-summary-row { display: flex; justify-content: space-between; font-family: var(--ui); font-size: 14px; color: var(--ink-2); margin: 0; } .sw-pay-summary-row dt { font-weight: 400; margin: 0; } .sw-pay-summary-row dd { font-weight: 500; color: var(--ink); margin: 0; } .sw-pay-summary-total { display: flex; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--line); margin: 0; } .sw-pay-summary-total dt { font-family: var(--ui); font-weight: 600; font-size: 16px; color: var(--ink); margin: 0; } .sw-pay-summary-total dd { font-family: var(--ui); font-weight: 600; font-size: 16px; color: var(--ink); margin: 0; } .sw-pay-summary-tax { font-size: 12px; color: var(--ink-3); text-align: right; margin: 4px 0 0; } /* Override the generic order_review table reset since we no longer render the table on the order-pay page — but other templates may still use it. */ form#order_review { margin-top: 16px; } table.woocommerce-checkout-review-order-table.shop_table_responsive { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); border-collapse: separate; background: var(--bg); overflow: hidden; margin-bottom: 24px; } table.woocommerce-checkout-review-order-table thead th { background: var(--bg-2); border-bottom: 1px solid var(--line); padding: 12px 18px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); } table.woocommerce-checkout-review-order-table tbody tr td, table.woocommerce-checkout-review-order-table tfoot tr th, table.woocommerce-checkout-review-order-table tfoot tr td { padding: 14px 18px; border: 0; background: transparent !important; font-size: 14px; color: var(--ink-2); } table.woocommerce-checkout-review-order-table tbody tr + tr td, table.woocommerce-checkout-review-order-table tfoot tr td, table.woocommerce-checkout-review-order-table tfoot tr th { border-top: 1px solid var(--line-2); } table.woocommerce-checkout-review-order-table tfoot tr:last-child td, table.woocommerce-checkout-review-order-table tfoot tr:last-child th { color: var(--ink); font-weight: 600; font-size: 15px; } table.woocommerce-checkout-review-order-table .product-quantity { color: var(--ink-3); margin-left: 4px; } table.woocommerce-checkout-review-order-table .product-total, table.woocommerce-checkout-review-order-table td:last-child { text-align: right; white-space: nowrap; color: var(--ink); font-weight: 500; } table.woocommerce-checkout-review-order-table th[scope="row"] { color: var(--ink-3); font-weight: 500; } #payment.woocommerce-checkout-payment, .woocommerce-checkout #payment { background: transparent !important; border: 1px solid var(--line); border-radius: var(--radius); padding: 0; margin-bottom: 16px; overflow: hidden; } #payment ul.payment_methods { background: transparent !important; padding: 0 !important; margin: 0 !important; border: 0; list-style: none; display: flex !important; flex-direction: column; } /* Each method = one row in the payment-methods card. Matches WC Blocks .wc-block-components-radio-control__option styling (flex row with the radio on the left, label centered, gateway icon pushed to the right). */ #payment ul.payment_methods li.wc_payment_method { padding: 14px 18px !important; margin: 0 !important; border-radius: 0; background: transparent !important; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } #payment ul.payment_methods li.wc_payment_method > input[type="radio"] { flex: 0 0 auto; width: 18px; height: 18px; margin: 0 !important; accent-color: var(--ink); cursor: pointer; } #payment ul.payment_methods li.wc_payment_method > label { flex: 1 1 auto; min-width: 0; font-family: var(--ui); font-size: 14px; font-weight: 500; color: var(--ink); cursor: pointer; margin: 0; display: flex; align-items: center; gap: 10px; } /* Gateway icon (img) goes to the far right of the row */ #payment ul.payment_methods li.wc_payment_method > label img { margin-left: auto !important; max-height: 24px; width: auto; float: none !important; } #payment .form-row { background: transparent !important; } #payment div.payment_box { background: var(--bg-2) !important; } #payment ul.payment_methods li + li { border-top: 1px solid var(--line); border-radius: 0; } #payment ul.payment_methods label { font-family: var(--ui); font-size: 14px; font-weight: 500; color: var(--ink); } /* Selected method's expanded description renders in .payment_box as a full row below the option — give it some padding and a subtle bg so it doesn't look like a stray paragraph. */ #payment ul.payment_methods .payment_box { flex: 1 1 100%; background: transparent !important; padding: 6px 0 0 30px; margin: 0; font-size: 13px; color: var(--ink-3); line-height: 1.4; } #payment ul.payment_methods .payment_box::before { display: none !important; } #payment ul.payment_methods .payment_box p { margin: 0; } .woocommerce-terms-and-conditions-wrapper { margin: 12px 0 20px; font-size: 13px; color: var(--ink-3); } .woocommerce-terms-and-conditions-wrapper a { color: var(--accent-ink); } #payment #place_order, form#order_review #place_order { background: var(--accent) !important; color: #fff !important; border: 0 !important; border-radius: var(--radius) !important; padding: 14px 24px !important; font-family: var(--ui) !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: -0.005em !important; cursor: pointer; transition: background .15s; float: none !important; display: inline-flex !important; align-items: center; gap: 10px; } #payment #place_order:hover, form#order_review #place_order:hover { background: var(--accent-hover) !important; } form#order_review .form-row.place-order { text-align: right; margin: 0; padding: 0; clear: both; } /* Classic WC notice (woocommerce-info / -error / -message) — match our theme: thin border + soft bg + plain text. Used on order-pay, login, etc. */ .woocommerce-info, .woocommerce-message, .woocommerce-error, .woocommerce-notice, .woocommerce-noreviews { border: 1px solid var(--line) !important; border-radius: var(--radius) !important; background: var(--bg-2) !important; color: var(--ink-2) !important; padding: 14px 18px !important; margin: 0 0 16px !important; font-family: var(--ui) !important; font-size: 14px !important; list-style: none !important; box-shadow: none !important; } .woocommerce-error { border-color: color-mix(in oklch, var(--err) 30%, var(--line)) !important; background: color-mix(in oklch, var(--err) 6%, #fff) !important; color: var(--err) !important; } .woocommerce-info::before, .woocommerce-message::before, .woocommerce-error::before, .woocommerce-notice::before { display: none !important; } .woocommerce-info a, .woocommerce-message a, .woocommerce-error a { color: inherit !important; text-decoration: underline; } /* WC renders the error as
  • …
    • ; the inner
  • picks up its own pink border + bg from somewhere (WP core notices?), creating a double-line look. Flatten it. */ .woocommerce-error > li, .woocommerce-info > li, .woocommerce-message > li, .woocommerce-notice > li { border: 0 !important; background: transparent !important; padding: 0 !important; margin: 0 !important; list-style: none !important; color: inherit !important; } /* On standalone pages (login, lost-password, view-order behind login) WC drops the notice at page-level with no inner container, so it spans the full viewport — way too wide for a single sentence. Cap to the login form's max-width and center so error/notice aligns with the card below. */ body .woocommerce-notices-wrapper { max-width: 480px !important; margin-left: auto !important; margin-right: auto !important; } /* But cart/checkout/logged-in account dashboard already sit in their own sized container — let those span the column. The :has() guard ensures the override only fires when the My Account nav is present (i.e. user is logged in); the bare login screen on view-order still gets the 480px cap. */ body.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) > .woocommerce-notices-wrapper, body .wp-block-woocommerce-cart .woocommerce-notices-wrapper, body .wp-block-woocommerce-checkout .woocommerce-notices-wrapper { max-width: none !important; } /* WooCommerce My Account — restyle stock templates to match the theme. */ /* Only enable the two-column grid when the navigation element is present (i.e. logged-in). */ .woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) { display: grid; grid-template-columns: 240px 1fr; gap: 40px; align-items: start; } .woocommerce-account .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; } /* On narrow + medium screens the fixed 240px sidebar leaves too little room for the content (order tables and address cards need 600+px to breathe), pushing text into 3-line wraps. Stack the nav above the content earlier so single-column gets the full viewport width. Matches the checkout breakpoint so the whole logged-in area switches layouts at the same width. */ @media (max-width: 880px) { body.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) { grid-template-columns: minmax(0, 1fr); gap: 20px; } /* High specificity so these beat the base grid-row:1 placement defined later in the file — otherwise nav and content land in the same cell. */ body.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) .woocommerce-MyAccount-navigation { grid-column: 1 !important; grid-row: 1 !important; } body.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) .woocommerce-MyAccount-content { grid-column: 1 !important; grid-row: 2 !important; min-width: 0; } } @media (max-width: 680px) { .acc-tiles { grid-template-columns: minmax(0, 1fr); } .acc-welcome { flex-wrap: wrap; } } /* WC's bundled stylesheet floats the nav left and the content right (legacy layout). That kicks both children out of the grid flow, so the nav lands in column 2 and the content collapses into column 1 below it. Clear the floats and any width overrides + pin them to explicit grid cells so the grid actually controls the layout regardless of WC's media-query CSS. */ .woocommerce-account .woocommerce-MyAccount-navigation { float: none !important; width: auto !important; grid-column: 1 !important; grid-row: 1 !important; } .woocommerce-account .woocommerce-MyAccount-content { float: none !important; width: auto !important; grid-column: 2 !important; grid-row: 1 !important; } body.woocommerce-account .woocommerce-MyAccount-navigation { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; background: var(--bg); } body.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; border: 0; } body.woocommerce-account .woocommerce-MyAccount-navigation li { border: 0; margin: 0; padding: 0; background: transparent; } body.woocommerce-account .woocommerce-MyAccount-navigation li a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 14px; font-weight: 500; color: var(--ink-2); background: transparent; border: 0; border-radius: var(--radius-sm); text-decoration: none; transition: background .15s, color .15s; } body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: var(--bg-2); color: var(--ink); } body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a, body.woocommerce-account .woocommerce-MyAccount-navigation li[class*="is-active"] a { background: var(--ink); color: #fff; } body.woocommerce-account .woocommerce-MyAccount-navigation li a svg, body.woocommerce-account .woocommerce-MyAccount-navigation li a::before { color: inherit; stroke: currentColor; fill: currentColor; } body.woocommerce-account .woocommerce-MyAccount-content h1, body.woocommerce-account .woocommerce-MyAccount-content h2, body.woocommerce-account .woocommerce-MyAccount-content h3, body.woocommerce-account .woocommerce-Address-title h2, body.woocommerce-account .woocommerce-Address-title h3 { font-family: var(--ui); font-weight: 600; letter-spacing: -0.005em; margin: 0 0 16px; } .woocommerce-MyAccount-content p { color: var(--ink-2); line-height: 1.65; } .woocommerce-MyAccount-content > p:first-of-type { font-size: 15px; } .woocommerce-MyAccount-content a { color: var(--accent-ink); } /* Forms (login, edit account, edit address, etc.) */ .woocommerce form .form-row { display: block; margin-bottom: 16px; } .woocommerce form .form-row label { display: block; font-size: 13px; font-weight: 500; color: var(--ink-2); margin-bottom: 6px; } .woocommerce form .form-row .required { color: var(--err); } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .woocommerce-page form .form-row input.input-text, .woocommerce-page form .form-row textarea, .woocommerce-page form .form-row select { display: block; width: 100%; height: 44px; padding: 0 14px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); font: inherit; transition: border-color .15s, box-shadow .15s; } .woocommerce form .form-row textarea { height: auto; min-height: 120px; padding: 12px 14px; line-height: 1.5; } .woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus, .woocommerce form .form-row select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .woocommerce form .form-row-first, .woocommerce form .form-row-last { float: none; width: 100%; } .woocommerce form .form-row-wide { clear: both; } .woocommerce form::after { content: ""; display: table; clear: both; } .woocommerce form.login, .woocommerce form.register, .woocommerce form.woocommerce-form-login, .woocommerce form.woocommerce-form-register, .woocommerce form.lost_reset_password { border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; background: var(--bg); max-width: 480px; margin: 0 auto; } /* Lost-password form — strip WC's default 15px intro

    margin and 16px form-row margin-bottom so the card doesn't have a big empty bottom band. */ .woocommerce form.lost_reset_password > p:first-child { margin: 0 0 16px; font-size: 14px; color: var(--ink-2); line-height: 1.5; } .woocommerce form.lost_reset_password .form-row { padding: 0; margin-bottom: 14px; } .woocommerce form.lost_reset_password .form-row:last-of-type { margin-bottom: 0; } .woocommerce form.lost_reset_password label { display: block; font-family: var(--ui); font-size: 13px; font-weight: 500; color: var(--ink-2); margin: 0 0 6px; line-height: 1.3; } .woocommerce form.lost_reset_password input.input-text { width: 100%; height: 48px; padding: 0 14px; font-family: var(--ui); font-size: 15px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); box-sizing: border-box; } .woocommerce form.lost_reset_password input.input-text:focus { outline: 0; border-color: var(--ink); } .woocommerce form.lost_reset_password button[type="submit"] { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 48px; padding: 0 22px; background: var(--accent) !important; color: #fff !important; border: 0 !important; border-radius: var(--radius) !important; font-family: var(--ui) !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: -0.005em !important; cursor: pointer; transition: background .15s; float: none !important; } .woocommerce form.lost_reset_password button[type="submit"]:hover { background: var(--accent-hover) !important; } /* Login / register card — heading inside the card, tighter rows, accent CTA. */ .sw-login-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 920px; margin: 0 auto; } @media (max-width: 720px) { .sw-login-grid { grid-template-columns: 1fr; } } .sw-login-grid .u-column1, .sw-login-grid .u-column2 { width: auto !important; float: none !important; } .sw-login-grid .sw-login-card { max-width: none; margin: 0; } .sw-login-card-title { font-family: var(--ui); font-weight: 600; font-size: 20px; letter-spacing: -0.005em; color: var(--ink); margin: 0 0 18px; } .woocommerce form.sw-login-card .form-row { margin-bottom: 10px; padding: 0; } .woocommerce form.sw-login-card .form-row label { line-height: 1.3; } .woocommerce form.sw-login-card .sw-login-row-remember .woocommerce-form__label-for-checkbox { display: inline-flex; align-items: center; gap: 8px; margin: 0; line-height: 1; } .woocommerce form.sw-login-card .sw-login-row-remember .woocommerce-form__label-for-checkbox > span { line-height: 1; display: inline-block; } .woocommerce form.sw-login-card .sw-login-row-remember .woocommerce-form__input-checkbox { width: 16px; height: 16px; margin: 0; padding: 0; accent-color: var(--accent); flex-shrink: 0; } .woocommerce form.sw-login-card .form-row:has(+ .sw-login-row-remember) { margin-bottom: 0; } .woocommerce form.sw-login-card label { display: block; font-family: var(--ui); font-size: 13px; font-weight: 500; color: var(--ink-2); margin: 0 0 6px; } .woocommerce form.sw-login-card label .required { color: var(--err); margin-left: 2px; } .woocommerce form.sw-login-card input[type="text"], .woocommerce form.sw-login-card input[type="email"], .woocommerce form.sw-login-card input[type="password"] { width: 100%; height: 48px; padding: 0 14px; font-family: var(--ui); font-size: 15px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); box-sizing: border-box; transition: border-color .15s, box-shadow .15s; } .woocommerce form.sw-login-card input:focus { outline: 0; border-color: var(--ink); } .woocommerce form.sw-login-card .sw-login-row-remember { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 8px 0 10px !important; padding: 0 !important; } .sw-login-row-remember .woocommerce-form__label-for-checkbox { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ui); font-size: 13px; color: var(--ink-2); cursor: pointer; margin: 0; } .sw-login-row-remember .woocommerce-form__input-checkbox { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; } .sw-login-lost { font-family: var(--ui); font-size: 13px; color: var(--ink-2); text-decoration: none; } .sw-login-lost:hover { color: var(--ink); text-decoration: underline; } .sw-login-row-submit { margin: 0 !important; } .woocommerce form.sw-login-card .sw-login-row-lost { margin: 14px 0 0; text-align: center; } .woocommerce form.sw-login-card button[type="submit"] { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 48px; padding: 0 22px; background: var(--accent) !important; color: #fff !important; border: 0 !important; border-radius: var(--radius) !important; font-family: var(--ui) !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: -0.005em !important; cursor: pointer; transition: background .15s; float: none !important; } .woocommerce form.sw-login-card button[type="submit"]:hover { background: var(--accent-hover) !important; } .woocommerce form.edit-account, .woocommerce form.woocommerce-EditAccountForm, .woocommerce form.woocommerce-address-fields { border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; background: var(--bg); max-width: 720px; } /* Reset browser fieldset chrome inside WC forms (password change, etc). */ .woocommerce form fieldset { border: 1px solid var(--line-2); border-radius: var(--radius); padding: 22px 24px; margin: 28px 0 0; background: var(--bg-2); } .woocommerce form fieldset legend { padding: 0 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-2); } /* Inside the fieldset our grid form rule strips row margins to 0 — restore vertical spacing between the password fields (which are direct children of the fieldset, not the grid). */ .woocommerce-MyAccount-content form.edit-account > fieldset .form-row + .form-row { margin-top: 14px !important; } .woocommerce-MyAccount-content form.edit-account > fieldset .form-row { width: 100% !important; } /* Save-button row sits at the bottom of edit-account / address forms. */ .woocommerce form.edit-account p:has(button[type="submit"]), .woocommerce form.woocommerce-EditAccountForm p:has(button[type="submit"]), .woocommerce form.woocommerce-address-fields p:has(button[type="submit"]) { margin-top: 24px; margin-bottom: 0; } .woocommerce form.edit-account button[type="submit"], .woocommerce form.woocommerce-EditAccountForm button[type="submit"], .woocommerce form.woocommerce-address-fields button[type="submit"], .woocommerce form.edit-account input[type="submit"], .woocommerce form.woocommerce-EditAccountForm input[type="submit"], .woocommerce form.woocommerce-address-fields input[type="submit"] { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 20px; background: var(--ink); color: #fff; border: 0; border-radius: var(--radius); font-family: var(--ui); font-size: 14px; font-weight: 500; cursor: pointer; transition: background 0.15s; } .woocommerce form.edit-account button[type="submit"]:hover, .woocommerce form.woocommerce-EditAccountForm button[type="submit"]:hover { background: color-mix(in oklch, var(--ink), white 8%); } /* Helper text under display-name field, etc. */ .woocommerce form .form-row span.description, .woocommerce form .form-row em { display: block; margin-top: 4px; font-size: 12px; font-style: normal; color: var(--ink-3); } .woocommerce-account .woocommerce-MyAccount-content form.edit-account, .woocommerce-account .woocommerce-MyAccount-content form.woocommerce-address-fields { max-width: none; } /* ────────────────────────────────────────────────────────────── Classic WC forms (edit-address, edit-account) — match the look of the WC-blocks checkout: 2-column grid, label-above-input, our typography, 48px input height, green CTA. ────────────────────────────────────────────────────────────── */ .woocommerce-MyAccount-content > h3, .woocommerce-MyAccount-content form > h2, .woocommerce-MyAccount-content form > h3 { font-family: var(--ui) !important; font-weight: 600 !important; font-size: 22px !important; letter-spacing: -0.005em !important; margin: 0 0 20px !important; color: var(--ink) !important; } .woocommerce-MyAccount-content form .woocommerce-address-fields__field-wrapper, .woocommerce-MyAccount-content form.edit-account { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; row-gap: 14px; margin-bottom: 16px; } /* The outer .woocommerce-address-fields wraps the field-grid AND the submit row; keep it as a normal block so the button doesn't get sucked into the grid as a second column. */ .woocommerce-MyAccount-content form .woocommerce-address-fields { display: block; } /* Edit-account form has clearfix divs and a fieldset/submit as siblings of the form-rows. Hide the clearfix (irrelevant under grid), span the password fieldset across both columns, and span the submit row too. */ .woocommerce-MyAccount-content form.edit-account > .clear { display: none; } .woocommerce-MyAccount-content form.edit-account > fieldset, .woocommerce-MyAccount-content form.edit-account > p:last-of-type { grid-column: 1 / -1; } .woocommerce-MyAccount-content form .form-row { float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; clear: none !important; box-sizing: border-box; } .woocommerce-MyAccount-content form .form-row-first { grid-column: 1; } .woocommerce-MyAccount-content form .form-row-last { grid-column: 2; } .woocommerce-MyAccount-content form .form-row-wide, .woocommerce-MyAccount-content form .form-row.notes, .woocommerce-MyAccount-content form .form-row.create-account { grid-column: 1 / -1; } /* On narrow phones the 2-column grid squeezes each field to ~165px. Switch the wrapper to block so every field stacks full-width (grid-template-columns:1fr doesn't actually collapse this grid), and restore the row spacing the grid gap provided. */ @media (max-width: 600px) { .woocommerce-MyAccount-content form .woocommerce-address-fields__field-wrapper, .woocommerce-MyAccount-content form.edit-account { display: block !important; } .woocommerce-MyAccount-content form .form-row { margin-bottom: 14px !important; } } /* We only ship to Nederland (single allowed country in WC settings), so the country field is redundant on the classic edit-address forms — the form posts the country value via a hidden field WC injects automatically. */ .woocommerce-MyAccount-content form #billing_country_field, .woocommerce-MyAccount-content form #shipping_country_field { display: none !important; } /* Company ("Bedrijf") + BTW-nummer fields — only visible when the "Ik bestel als bedrijf" toggle is checked, mirroring the WC Blocks checkout. JS adds the .sw-show-company class on the form when the toggle is on. The BTW-field ID contains a "/" so CSS.escape its bracket form. */ .woocommerce-MyAccount-content form #billing_company_field, .woocommerce-MyAccount-content form #shipping_company_field, .woocommerce-MyAccount-content form [id$="slimwonen\/btw-nummer_field"], .woocommerce-MyAccount-content form [id$="\/btw-nummer_field"] { display: none; } .woocommerce-MyAccount-content form.sw-show-company #billing_company_field, .woocommerce-MyAccount-content form.sw-show-company #shipping_company_field, .woocommerce-MyAccount-content form.sw-show-company [id$="slimwonen\/btw-nummer_field"], .woocommerce-MyAccount-content form.sw-show-company [id$="\/btw-nummer_field"] { display: block; } /* Put Straat + huisnummer (address_1) and Toevoeging (address_2) on the same row, matching the WC Blocks checkout. WC ships them as form-row-wide; we override here so the grid places them side-by-side. Same for postcode+city and the B2B cluster (Bedrijf + BTW-nummer). */ .woocommerce-MyAccount-content form #billing_address_1_field, .woocommerce-MyAccount-content form #shipping_address_1_field, .woocommerce-MyAccount-content form #billing_postcode_field, .woocommerce-MyAccount-content form #shipping_postcode_field, .woocommerce-MyAccount-content form #billing_company_field, .woocommerce-MyAccount-content form #shipping_company_field { grid-column: 1; } .woocommerce-MyAccount-content form #billing_address_2_field, .woocommerce-MyAccount-content form #shipping_address_2_field, .woocommerce-MyAccount-content form #billing_city_field, .woocommerce-MyAccount-content form #shipping_city_field, .woocommerce-MyAccount-content form [id$="slimwonen\/btw-nummer_field"], .woocommerce-MyAccount-content form [id$="\/btw-nummer_field"] { grid-column: 2; } /* Label / input styling */ .woocommerce-MyAccount-content form label { display: block; font-family: var(--ui); font-size: 13px; font-weight: 500; color: var(--ink-2); margin: 0 0 6px; } .woocommerce-MyAccount-content form label .required { color: var(--err); margin-left: 2px; } .woocommerce-MyAccount-content form label .optional { display: none; } .woocommerce-MyAccount-content form input[type="text"], .woocommerce-MyAccount-content form input[type="email"], .woocommerce-MyAccount-content form input[type="tel"], .woocommerce-MyAccount-content form input[type="password"], .woocommerce-MyAccount-content form select, .woocommerce-MyAccount-content form textarea { width: 100%; font-family: var(--ui); font-size: 15px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); height: 48px; padding: 0 14px; box-sizing: border-box; transition: border-color .15s, box-shadow .15s; } .woocommerce-MyAccount-content form textarea { height: auto; padding: 12px 14px; min-height: 88px; } .woocommerce-MyAccount-content form input:focus, .woocommerce-MyAccount-content form select:focus, .woocommerce-MyAccount-content form textarea:focus { outline: 0; border-color: var(--ink); } .woocommerce-MyAccount-content form .input-checkbox { width: auto; height: auto; margin-right: 8px; } /* Static country line (when only one country allowed WC renders ) */ .woocommerce-MyAccount-content form .form-row strong { font-weight: 500; color: var(--ink); } /* Submit button — green primary, matching the rest of the site */ .woocommerce-MyAccount-content form .form-row .woocommerce-Button, .woocommerce-MyAccount-content form .form-row button[type="submit"], .woocommerce-MyAccount-content form button[name="save_address"], .woocommerce-MyAccount-content form button[name="save_account_details"] { background: var(--accent) !important; color: #fff !important; border: 0 !important; border-radius: var(--radius) !important; padding: 14px 24px !important; font-family: var(--ui) !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: -0.005em !important; cursor: pointer; transition: background .15s; float: none !important; display: inline-flex !important; align-items: center; min-height: 0; } .woocommerce-MyAccount-content form button[type="submit"]:hover, .woocommerce-MyAccount-content form button[name="save_address"]:hover, .woocommerce-MyAccount-content form button[name="save_account_details"]:hover { background: var(--accent-hover) !important; } /* Wrapper around the submit button — give it some breathing room above */ .woocommerce-MyAccount-content form p.form-row[class*="place-order"], .woocommerce-MyAccount-content form > p:last-of-type { margin-top: 8px !important; } .woocommerce-form__label-for-checkbox { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); cursor: pointer; } .woocommerce-form__input-checkbox { width: 16px; height: 16px; accent-color: var(--accent); } /* Buttons — reuse .btn visual language */ .woocommerce button.button, .woocommerce a.button, .woocommerce input.button, .woocommerce-page button.button, .woocommerce-page a.button, .woocommerce-page input.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; height: 44px; border-radius: var(--radius); font-weight: 500; font-size: 14px; border: 1px solid transparent; background: var(--accent); color: #fff; transition: background .15s, border-color .15s, color .15s; white-space: nowrap; text-decoration: none; cursor: pointer; } .woocommerce button.button:hover, .woocommerce a.button:hover, .woocommerce input.button:hover { background: var(--accent-hover); color: #fff; } .woocommerce a.button.wc-forward { background: var(--bg); border-color: var(--line); color: var(--ink); } .woocommerce a.button.wc-forward:hover { background: var(--bg-2); border-color: var(--ink-4); color: var(--ink); } /* Notices */ .woocommerce-notices-wrapper:empty { display: none; } .woocommerce-message, .woocommerce-info, .woocommerce-error { list-style: none; margin: 0 0 20px; padding: 14px 16px 14px 48px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg-2); color: var(--ink-2); font-size: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; position: relative; } .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { left: 16px; top: 50%; transform: translateY(-50%); color: inherit; } .woocommerce-message { border-color: var(--accent-soft); background: var(--accent-soft); color: var(--accent-ink); } .woocommerce-error { border-color: color-mix(in oklch, var(--err) 40%, var(--line)); background: color-mix(in oklch, var(--err) 8%, var(--bg)); color: var(--err); } .woocommerce-error li { list-style: none; } .woocommerce-message .button, .woocommerce-info .button { height: 36px; padding: 0 14px; font-size: 13px; } /* Tables (orders, downloads, addresses) */ .woocommerce table.shop_table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; font-size: 14px; } .woocommerce table.shop_table th, .woocommerce table.shop_table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line-2); } .woocommerce table.shop_table thead th { background: var(--bg-2); font-weight: 600; color: var(--ink-2); font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; } .woocommerce table.shop_table tbody tr:last-child td { border-bottom: 0; } .woocommerce table.shop_table tfoot th, .woocommerce table.shop_table tfoot td { background: var(--bg-2); font-weight: 500; } /* Dashboard addresses grid */ .woocommerce .woocommerce-Addresses { display: grid !important; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; } /* WC's bundled CSS floats the cards left/right with percent widths; same float-vs-grid swap as the My Account layout. Override + pin to cells. */ .woocommerce .woocommerce-Address { float: none !important; width: auto !important; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 20px 16px; background: var(--bg); } .woocommerce .woocommerce-Address.u-column1, .woocommerce .woocommerce-Address.col-1 { grid-column: 1 !important; grid-row: 1 !important; } .woocommerce .woocommerce-Address.u-column2, .woocommerce .woocommerce-Address.col-2 { grid-column: 2 !important; grid-row: 1 !important; } .woocommerce .woocommerce-Address-title { display: flex !important; flex-direction: row !important; align-items: baseline; gap: 0 !important; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line); } .woocommerce .woocommerce-Address-title h2, .woocommerce .woocommerce-Address-title h3 { margin: 0 !important; font-size: 16px; } /* WC's template has whitespace text nodes between the

    and the edit , which become anonymous flex items and break `justify-content: space-between`. Push the link to the right with auto margin — works regardless of how many stray text nodes sit between siblings. */ .woocommerce .woocommerce-Address-title .edit { margin-left: auto; font-size: 13px; color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; } .woocommerce .woocommerce-Address-title .edit:hover { color: var(--ink); } .woocommerce .woocommerce-Address address { font-style: normal; font-size: 14px; color: var(--ink-2); line-height: 1.65; border: 0 !important; padding: 0 !important; background: transparent !important; border-radius: 0 !important; } /* Downloads empty / no-orders states */ .woocommerce .woocommerce-info, .woocommerce .woocommerce-message { margin-top: 0; } /* Two-column login/register when registration is enabled */ .woocommerce #customer_login { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } .woocommerce #customer_login .u-column1, .woocommerce #customer_login .u-column2 { min-width: 0; } /* Order view */ .woocommerce-order h2, .woocommerce-order h3 { margin-top: 32px; margin-bottom: 12px; font-size: 18px; } .woocommerce-order ul.order_details { list-style: none; padding: 0; margin: 0 0 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; background: var(--bg); } .woocommerce-order ul.order_details li { font-size: 13px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; display: flex; flex-direction: column; gap: 4px; } .woocommerce-order ul.order_details li strong { font-size: 16px; color: var(--ink); text-transform: none; letter-spacing: 0; font-weight: 500; } @media (max-width: 768px) { .woocommerce-account .woocommerce { grid-template-columns: 1fr; gap: 24px; } /* The two address cards were cramped side by side. Switching the container to block (beats the base `display:grid !important`) makes each card stack full-width — grid-template-columns alone didn't budge it. */ body.woocommerce-account .woocommerce .woocommerce-Addresses { display: block !important; } body.woocommerce-account .woocommerce .woocommerce-Address + .woocommerce-Address { margin-top: 16px; } /* Same idea for the order-view (Bestelling) Factuuradres + Verzendadres cards — stack them on mobile instead of squeezing two next to each other. */ .woocommerce-customer-details .woocommerce-columns { grid-template-columns: 1fr !important; } .woocommerce-customer-details .woocommerce-column--1, .woocommerce-customer-details .woocommerce-column--billing-address, .woocommerce-customer-details .woocommerce-column--2, .woocommerce-customer-details .woocommerce-column--shipping-address { grid-column: 1 !important; grid-row: auto !important; } .woocommerce-customer-details .woocommerce-column + .woocommerce-column { margin-top: 16px; } .woocommerce #customer_login { grid-template-columns: 1fr; } .woocommerce form .form-row-first, .woocommerce form .form-row-last { float: none; width: 100%; } } /* Sort */ .sort { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); } .sort select { height: 36px; padding: 0 28px 0 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg) url("data:image/svg+xml;utf8,") no-repeat right 8px center; -webkit-appearance: none; appearance: none; color: var(--ink); } .view-toggle { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; } .view-toggle button { width: 40px; height: 40px; border: 0; background: var(--bg); display: grid; place-items: center; color: var(--ink-3); cursor: pointer; transition: background .15s, color .15s; } .view-toggle button:hover { color: var(--ink); } .view-toggle button.on { background: var(--ink); color: var(--bg); } /* Product card — list-view additions & shared extras */ .pcard-desc, .pcard-labels { display: none; } .pcard-cta { display: none; } .lbl { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-3); background: var(--bg); } .lbl-ok { color: var(--ok); border-color: color-mix(in oklch, var(--ok) 35%, var(--line)); background: color-mix(in oklch, var(--ok) 8%, var(--bg)); } .lbl-warn { color: var(--warn); border-color: color-mix(in oklch, var(--warn) 35%, var(--line)); background: color-mix(in oklch, var(--warn) 10%, var(--bg)); } .lbl-mute { color: var(--ink-3); } /* Grid (default) — keep 3 columns */ .prod-grid[data-view="grid"] { grid-template-columns: repeat(3, 1fr); } /* List view */ .prod-grid[data-view="list"] { display: flex; flex-direction: column; gap: 8px; } .prod-grid[data-view="list"] .pcard { position: relative; display: grid; grid-template-columns: 110px 1fr; gap: 20px; padding: 20px; padding-right: 210px; border: 1px solid var(--line); border-radius: var(--radius); align-items: center; } .prod-grid[data-view="list"] .pcard:hover { transform: none; background: var(--bg-2); } .prod-grid[data-view="list"] .pcard .ph { width: 110px; height: 110px; aspect-ratio: 1; grid-column: 1; } .prod-grid[data-view="list"] .pcard-body { padding: 0; grid-column: 2; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .prod-grid[data-view="list"] .pcard-body > .title { margin-bottom: 0; } .prod-grid[data-view="list"] .pcard-body > .meta { position: absolute; right: 20px; top: 20px; bottom: 20px; width: 170px; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 0 !important; text-align: right; } .prod-grid[data-view="list"] .pcard-desc { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; color: var(--ink-2); line-height: 1.5; margin: 4px 0 0; } .prod-grid[data-view="list"] .pcard-labels { display: none; } .prod-grid[data-view="list"] .pcard .price { font-size: 20px; font-weight: 600; } .prod-grid[data-view="list"] .pcard-cta { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; height: 36px; border-radius: var(--radius-sm); border: 1px solid var(--accent); background: var(--accent); color: #fff; font-size: 13px; font-weight: 500; font-family: inherit; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s; } .prod-grid[data-view="list"] .pcard-cta:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .prod-grid[data-view="list"] .quick { display: none; } /* Mobile list view — the absolute-positioned 170px meta column on the right eats too much horizontal space for product title + description to breathe. Drop the absolute positioning so price + CTA flow naturally below the body, stack them vertically, and make the button full-width so it has a proper tap target. */ @media (max-width: 600px) { .prod-grid[data-view="list"] .pcard { grid-template-columns: 88px 1fr; padding: 14px; padding-right: 14px; gap: 12px; } .prod-grid[data-view="list"] .pcard .ph { width: 88px; height: 88px; } .prod-grid[data-view="list"] .pcard-body > .meta { position: static; width: auto; flex-direction: column; align-items: stretch; text-align: left; margin-top: 10px !important; gap: 10px; } .prod-grid[data-view="list"] .pcard-body > .meta > .price { text-align: left; } .prod-grid[data-view="list"] .pcard-cta { width: 100%; justify-content: center; height: 40px; white-space: normal; } .prod-grid[data-view="list"] .pcard-desc { display: none; } } /* PDP */ .pdp { padding-top: 32px; padding-bottom: 64px; } .pdp-grid { display: grid; grid-template-columns: 1fr 440px; gap: 56px; align-items: start; } .pdp-gallery { display: grid; grid-template-columns: 80px 1fr; gap: 16px; } .pdp-thumbs { display: flex; flex-direction: column; gap: 10px; } .pdp-thumbs .ph { aspect-ratio: 1/1; cursor: pointer; border: 1px solid var(--line-2); } .pdp-thumbs .ph.on { border-color: var(--ink); } .pdp-main { aspect-ratio: 1/1; position: relative; } .pdp-main .ph { aspect-ratio: 1/1; } .pdp-thumbs .ph::before, .pdp-main .ph::before, .pcard .ph::before { display: none; } .pdp-right h1 { font-family: var(--display); font-size: 44px; margin: 8px 0 8px; } .pdp-price { display: flex; align-items: baseline; gap: 12px; margin: 16px 0 24px; } .pdp-price .p { font-size: 32px; font-weight: 600; font-variant-numeric: tabular-nums; } .pdp-price .was { color: var(--ink-4); text-decoration: line-through; font-size: 18px; } .pdp-price .pct { background: oklch(0.95 0.04 25); color: oklch(0.38 0.14 25); font-size: 12px; padding: 3px 8px; border-radius: 4px; font-weight: 600; } .variant-row { margin: 16px 0; } .variant-row .label-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-2); margin-bottom: 8px; } .swatches { display: flex; gap: 8px; flex-wrap: wrap; } .swatch { padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; background: var(--bg); } .swatch.on { border-color: var(--ink); background: var(--ink); color: var(--bg); } .swatch:hover:not(.on) { border-color: var(--ink-4); } .stock-line { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--accent-ink); margin: 8px 0 16px; } .stock-line .dot { width: 8px; height: 8px; background: var(--ok); border-radius: 999px; } .qty { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); align-items: center; height: 52px; } .qty button { width: 40px; height: 100%; background: transparent; border: 0; color: var(--ink-2); } .qty button:hover { color: var(--ink); } .qty input { width: 64px; height: 100%; text-align: center; border: 0; background: transparent; font-size: 15px; font-weight: 500; color: var(--ink); -moz-appearance: textfield; appearance: textfield; } .qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .pdp-cta { display: flex; gap: 10px; margin: 16px 0 24px; } .pdp-cta .btn { flex: 1; } .pdp-features { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); margin-top: 16px; } .pdp-features .f { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; } .pdp-features .f svg { color: var(--accent); flex-shrink: 0; margin-top: 2px; } .pdp-desc { margin-top: 40px; } .pdp-desc p { color: var(--ink-2); line-height: 1.7; font-size: 15px; max-width: 680px; margin: 0 0 16px; } .pdp-desc p + p { margin-top: 0; } .pdp-desc h2, .pdp-desc h3, .pdp-desc h4 { font-family: var(--ui); color: var(--ink); font-size: 20px; font-weight: 600; letter-spacing: -0.005em; margin: 32px 0 14px; max-width: 680px; } .pdp-desc h2 { font-size: 22px; } .pdp-desc ul, .pdp-desc ol { color: var(--ink-2); line-height: 1.7; font-size: 15px; max-width: 680px; padding-left: 20px; margin: 0 0 16px; } .pdp-desc ul li, .pdp-desc ol li { margin-bottom: 6px; } .pdp-desc strong { color: var(--ink); font-weight: 600; } .spec-table { width: 100%; border-collapse: collapse; margin-top: 16px; border: 0; } .spec-table tr { border-top: 0; border-right: 0; border-left: 0; border-bottom: 1px solid var(--line); } .spec-table tr:last-child { border-bottom: 0; } .spec-table td { padding: 12px 0; font-size: 14px; border: 0; } .spec-table td:first-child { color: var(--ink-3); width: 200px; } .pdp-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); margin-bottom: 24px; } .pdp-tabs button { background: transparent; border: 0; padding: 14px 20px 14px 0; margin-right: 24px; font-size: 15px; color: var(--ink-3); border-bottom: 2px solid transparent; transform: translateY(1px); } .pdp-tabs button.on { color: var(--ink); border-color: var(--ink); } /* Color/variant picker — links to sibling products in the same group */ .sw-color-chips { margin: 0 0 20px; } .sw-color-chips__label { font-size: 13px; color: var(--ink-3); margin-bottom: 8px; } .sw-color-chips__label strong { color: var(--ink); font-weight: 500; } .sw-color-chips__list { display: flex; flex-wrap: wrap; gap: 8px; } .sw-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; color: var(--ink-2); transition: border-color .15s, color .15s; } .sw-chip:hover { border-color: var(--ink-4); color: var(--ink); } .sw-chip.on { border-color: var(--ink); color: var(--ink); } .sw-chip__swatch { width: 26px; height: 26px; border-radius: 999px; background-size: cover; background-position: center; border: 1px solid var(--line-2); flex-shrink: 0; } .sw-chip__label { padding-right: 4px; } /* Order summary card (used on thankyou.php) */ .cart-summary { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; position: sticky; top: 92px; } .summary-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; color: var(--ink-2); } .summary-row.total { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 8px; font-size: 18px; font-weight: 600; color: var(--ink); } /* My-account → View order: keep order-action buttons (Pay, Cancel) from touching. WC outputs them inline inside a with no separator. */ .woocommerce-button.order-actions-button + .woocommerce-button.order-actions-button { margin-left: 8px; } /* WC notices (used across my-account, order-pay, order-received). */ .woocommerce-notices-wrapper:empty { display: none; } .woocommerce-info, .woocommerce-error, .woocommerce-message, ul.woocommerce-error { padding: 14px 16px; border-radius: var(--radius); font-size: 14px; line-height: 1.5; margin: 0 0 16px; list-style: none; display: block; } .woocommerce-info::before, .woocommerce-error::before, .woocommerce-message::before, ul.woocommerce-error li::before { content: none !important; display: none !important; } .woocommerce-info { background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-2); } .woocommerce-error, ul.woocommerce-error, ul.woocommerce-error li { background: #fef2f2; border-color: #fecaca; color: #991b1b; } ul.woocommerce-error { padding: 0; border: 0; background: transparent; } ul.woocommerce-error li { margin-bottom: 8px; padding: 14px 16px; border: 1px solid #fecaca; border-radius: var(--radius); } .woocommerce-message { background: var(--accent-soft); border: 1px solid var(--accent); color: var(--accent-ink); } .woocommerce-error a, .woocommerce-info a, .woocommerce-message a { color: inherit; text-decoration: underline; font-weight: 500; } .woocommerce-error a:hover, .woocommerce-info a:hover, .woocommerce-message a:hover { opacity: 0.8; } .field-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } /* Confirm */ .confirm-page { padding-top: 64px; padding-bottom: 64px; } .confirm-head { text-align: center; max-width: 640px; margin: 0 auto 48px; } .confirm-check { width: 72px; height: 72px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; margin: 0 auto 24px; } .confirm-head h1 { font-size: 48px; margin-bottom: 12px; } .confirm-head p { color: var(--ink-3); font-size: 16px; } .confirm-grid { display: grid; grid-template-columns: 1fr 400px; gap: 40px; align-items: start; max-width: 1040px; margin: 0 auto; } .info-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; } .info-card h4 { margin: 0 0 12px; font-family: var(--ui); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); } /* Tweaks panel */ .tweaks-panel { position: fixed; bottom: 24px; right: 24px; z-index: 100; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 320px; padding: 20px; display: none; } .tweaks-panel.on { display: block; } .tweaks-panel h4 { font-family: var(--ui); font-size: 14px; font-weight: 600; margin: 0 0 14px; display: flex; justify-content: space-between; align-items: center; } .tweaks-panel .tw-close { background: none; border: 0; color: var(--ink-3); padding: 2px; display: grid; place-items: center; } .tweak-row { margin-bottom: 18px; } .tweak-row:last-child { margin-bottom: 0; } .tweak-row .tlbl { font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; } .tweak-opts { display: flex; gap: 6px; flex-wrap: wrap; } .tw-opt { padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-2); font-size: 12px; cursor: pointer; } .tw-opt.on { border-color: var(--ink); background: var(--ink); color: var(--bg); } .tw-color { width: 26px; height: 26px; border-radius: 999px; border: 2px solid var(--bg); box-shadow: 0 0 0 1px var(--line); cursor: pointer; } .tw-color.on { box-shadow: 0 0 0 2px var(--ink); } /* responsive */ @media (max-width: 960px) { .nav-inner { grid-template-columns: auto 1fr auto; } .hero-grid { grid-template-columns: 1fr; } .prod-grid { grid-template-columns: repeat(2, 1fr); } /* The default-view shop grid uses an attribute selector (higher specificity), so it needs its own responsive override to drop from 3 → 2 columns. */ .prod-grid[data-view="grid"] { grid-template-columns: repeat(2, 1fr); } .cat-grid { grid-template-columns: repeat(2, 1fr); } .usp-row { grid-template-columns: repeat(2, 1fr); } /* minmax(0,1fr) lets the single column shrink below its content's min-width — without it, wide children (images, long SKU text) force the grid wider than the viewport and the whole page overflows. */ .plp-grid, .pdp-grid, .confirm-grid { grid-template-columns: minmax(0, 1fr); } .pdp-grid > *, .plp-grid > *, .confirm-grid > * { min-width: 0; } .edit-row { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } /* Stack the toolbar so active-filter chips sit above the sort/view row instead of overflowing it on narrow screens. */ .plp-toolbar { flex-direction: column; align-items: stretch; gap: 14px; } .plp-toolbar > .row { justify-content: space-between; } /* ── Filters as an off-canvas drawer (JS adds .sw-drawer-ready) ────────── */ .plp-grid.sw-drawer-ready > aside { position: fixed; top: 0; right: 0; z-index: 1100; width: min(360px, 88vw); height: 100%; display: flex; flex-direction: column; background: var(--bg); box-shadow: -10px 0 40px rgba(0, 0, 0, 0.18); padding: 0 20px 0; overflow-y: auto; transform: translateX(100%); transition: transform 0.25s ease; } .plp-grid.sw-drawer-ready > aside.is-open { transform: translateX(0); } .plp-grid.sw-drawer-ready .plp-filter-trigger { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 10px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); cursor: pointer; font-family: var(--ui); font-size: 14px; font-weight: 500; color: var(--ink); } .plp-filter-trigger svg { color: var(--ink-2); } .plp-filter-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 600; } .sw-drawer-ready .plp-filter-head { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 1; margin: 0 -20px 8px; padding: 16px 20px; background: var(--bg); border-bottom: 1px solid var(--line); font-family: var(--ui); font-weight: 600; font-size: 16px; } .plp-filter-close { display: grid; place-items: center; padding: 4px; border: 0; background: transparent; color: var(--ink-2); cursor: pointer; } .sw-drawer-ready .plp-filter-actions { display: flex; gap: 12px; align-items: center; position: sticky; bottom: 0; margin: auto -20px 0; padding: 14px 20px; background: var(--bg); border-top: 1px solid var(--line); } .sw-drawer-ready .plp-filter-actions .btn { flex: 1; } .plp-filter-clear { white-space: nowrap; font-size: 14px; color: var(--ink-3); text-decoration: underline; text-underline-offset: 2px; } .plp-filter-overlay { display: block; position: fixed; inset: 0; z-index: 1099; background: rgba(0, 0, 0, 0.45); opacity: 0; pointer-events: none; transition: opacity 0.25s; } .plp-filter-overlay.show { opacity: 1; pointer-events: auto; } /* Product gallery: stack the main image on top, thumbnails in a row below, instead of the desktop 80px rail + image layout (which overflowed). */ .pdp-gallery { grid-template-columns: minmax(0, 1fr); gap: 12px; } .pdp-gallery > * { min-width: 0; } .pdp-main { order: 1; } .pdp-thumbs { order: 2; flex-direction: row; flex-wrap: wrap; } .pdp-thumbs .ph { width: 64px; flex: 0 0 auto; } } /* Header collapses to a hamburger drawer below this width. */ @media (max-width: 860px) { .nav-links { display: none; } .nav-search { display: none; } .nav-account { display: none; } .nav-logo { margin-right: 0; } .nav .nav-burger { display: grid; } .nav.is-open .nav-mobile { display: block; } } /* Tighten container padding + grids on small phones. */ @media (max-width: 560px) { /* Horizontal-only so we don't clobber the vertical padding that page containers (.pdp, .plp, …) set — otherwise breadcrumbs/titles sit flush against the sticky header. */ .container { padding-left: 16px; padding-right: 16px; } .nav-mobile { padding-left: 16px; padding-right: 16px; } .cat-grid, .usp-row, .footer-grid { grid-template-columns: 1fr; } /* Footer: stacked grid leaves the Service column hard-right (inline text-align:right) detached from the left-aligned logo, and footer-bottom's space-between cramps the legal links ("Algemene voorwaarden" wraps). Left-align everything and stack the bottom row. */ .footer-grid { gap: 28px; align-items: start; } .footer-grid > div { text-align: left !important; } .footer-grid > div > div { align-items: flex-start !important; } .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 32px; } .footer-bottom .row { flex-wrap: wrap; gap: 6px 16px !important; } /* Keep all product grids (homepage featured + shop listing) at 2 columns on phones — single-column product cards waste space and feel sparse. */ .prod-grid, .prod-grid[data-view="grid"] { grid-template-columns: repeat(2, 1fr); } /* Add-to-cart row: qty box keeps its width, button wraps to a full-width line below it (the nowrap button can't shrink enough to share one row). */ .pdp-cta { flex-wrap: wrap; } .pdp-cta .btn { flex: 1 1 100%; } } /* Unified toast — fixed top-right card with icon, message, optional CTA link, and close button. Rendered server-side by slimwonen_nl_render_add_to_cart_toast() in functions.php for the add-to-cart confirmation, and client-side by window.swToast() in sw.js for in-page actions (cart update, item remove). */ .sw-toast { position: fixed; top: 88px; right: 24px; z-index: 1001; display: flex; flex-direction: column; gap: 10px; max-width: calc(100vw - 48px); animation: sw-toast-in 0.28s ease; } .sw-toast--out { animation: sw-toast-out 0.28s ease forwards; } @keyframes sw-toast-in { from { transform: translateX(16px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes sw-toast-out { to { transform: translateX(16px); opacity: 0; } } .sw-toast__item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; min-width: 320px; max-width: 380px; padding: 14px 14px 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 32px rgba(0,0,0,0.10); font-family: var(--ui); } .sw-toast__item > svg { color: var(--ok); flex-shrink: 0; } .sw-toast__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .sw-toast__lead { font-size: 13px; color: var(--ink); line-height: 1.35; } .sw-toast__cta { font-size: 13px; font-weight: 500; color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; } .sw-toast__cta:hover { color: var(--ink); } .sw-toast__close { width: 24px; height: 24px; border: 0; background: transparent; color: var(--ink-3); font-size: 22px; line-height: 1; cursor: pointer; padding: 0; border-radius: 6px; transition: color 0.15s, background 0.15s; } .sw-toast__close:hover { color: var(--ink); background: var(--bg-2); } /* Grouped product PDP — the Aqara Starterkit and similar bundles render a list of children with a qty per row and one single "Set toevoegen" CTA. */ .sw-grouped-form { margin: 24px 0 0; } .sw-grouped-list { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); overflow: hidden; } .sw-grouped-row { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); } .sw-grouped-row:last-child { border-bottom: 0; } .sw-grouped-thumb { width: 56px; height: 56px; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sw-grouped-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .sw-grouped-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .sw-grouped-name { font-family: var(--ui); font-size: 14px; font-weight: 500; color: var(--ink); text-decoration: none; line-height: 1.3; } .sw-grouped-name:hover { text-decoration: underline; text-underline-offset: 2px; } .sw-grouped-price { font-family: var(--ui); font-size: 13px; color: var(--ink-3); } .sw-grouped-qty input { width: 64px; height: 36px; padding: 0 8px; font-family: var(--ui); font-size: 14px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); text-align: center; box-sizing: border-box; } .sw-grouped-qty input:focus { outline: 0; border-color: var(--ink); } .sw-grouped-submit { width: 100%; margin-top: 16px; } /* Bundle product (WooCommerce Product Bundles) — the plugin renders its own add-to-cart form on our custom PDP. Restyle its button + qty to match our green primary button instead of WC's default purple. */ .sw-bundle-form { margin: 20px 0 0; } .sw-bundle-form .bundle_form .cart, .sw-bundle-form .bundle_form { margin: 0; } /* Put the bundle quantity + add-to-cart button on one row, matching the regular PDP's .pdp-cta layout (qty box left, green button fills the rest). */ .sw-bundle-form .bundle_button { display: flex; align-items: stretch; gap: 12px; } .sw-bundle-form .quantity { margin: 0; flex: 0 0 auto; } .sw-bundle-form .quantity input.qty { width: 72px; height: 52px; padding: 0 10px; font-family: var(--ui); font-size: 15px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); box-sizing: border-box; text-align: center; } .sw-bundle-form .single_add_to_cart_button, .sw-bundle-form button.bundle_add_to_cart_button { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; flex: 1 1 auto; height: 52px; padding: 0 24px; background: var(--accent) !important; color: #fff !important; border: 0 !important; border-radius: var(--radius) !important; font-family: var(--ui) !important; font-size: 15px !important; font-weight: 500 !important; letter-spacing: normal !important; cursor: pointer; transition: background .15s; float: none !important; } .sw-bundle-form .single_add_to_cart_button:hover, .sw-bundle-form button.bundle_add_to_cart_button:hover { background: var(--accent-hover) !important; } /* Cart glyph before the label, matching the sw_icon('cart') used on regular product pages. Rendered as a mask so it inherits the white button text colour. */ .sw-bundle-form .single_add_to_cart_button::before { content: ""; width: 16px; height: 16px; flex-shrink: 0; background: currentColor; -webkit-mask: var(--sw-cart-icon) center / contain no-repeat; mask: var(--sw-cart-icon) center / contain no-repeat; } .sw-bundle-form .single_add_to_cart_button.disabled, .sw-bundle-form .single_add_to_cart_button:disabled { opacity: .5; cursor: not-allowed; } /* The plugin's dynamic bundle price block above the button */ .sw-bundle-form .bundle_price .price { font-family: var(--ui); font-size: 20px; font-weight: 600; color: var(--ink); } /* Bundle item titles — the plugin inherits our serif h-styles; force the UI sans font so the included-product names match the rest of the PDP copy. */ .sw-bundle-form .bundled_product_title, .sw-bundle-form .bundled_product_title .item_title, .sw-bundle-form .bundled_product_title_inner, .sw-bundle-form .bundled_product_title a { font-family: var(--ui) !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: -0.005em !important; color: var(--ink) !important; } .sw-bundle-form .bundled_product_excerpt, .sw-bundle-form .bundled_product_description { font-family: var(--ui); font-size: 13px; color: var(--ink-3); line-height: 1.5; } /* Shop paginering — paginate_links( type => list ) levert een kale
      , dus die krijgt hier pas vorm. Los van .btn gehouden omdat het compacte, vierkante vlakjes zijn in plaats van volle knoppen. */ .page-numbers { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; } .page-numbers li { margin: 0; } .page-numbers li > .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 14px; font-variant-numeric: tabular-nums; color: var(--ink); text-decoration: none; transition: background .15s, border-color .15s, color .15s; } .page-numbers li > a.page-numbers:hover { background: var(--bg-3); border-color: var(--ink-4); } .page-numbers li > .page-numbers.current { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 500; } .page-numbers li > .page-numbers.dots { border-color: transparent; color: var(--ink-3); } @media (max-width: 600px) { .page-numbers li > .page-numbers { min-width: 32px; height: 32px; padding: 0 8px; font-size: 13px; } } /* Variant-chip prijs: alleen gerenderd als de varianten in prijs verschillen (bv. lengte). De wrapper is nodig omdat .sw-chip een flex-row is: zonder kolom komt de prijs naast het label te staan in plaats van eronder. */ .sw-chip__text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; padding-right: 4px; } .sw-chip__text .sw-chip__label { padding-right: 0; } .sw-chip__price { font-size: 12px; color: var(--ink-3); } .sw-chip.on .sw-chip__price { color: inherit; }