/* ========================================================================= RA Genbrug — design system & components Refined heritage refinery: cream canvas · forest "vault" · gold accent ========================================================================= */ /* ------------------------------------------------------------------------- 1. Design tokens ---------------------------------------------------------------------- */ :root { /* Greens */ --rag-forest-950: #061410; --rag-forest-900: #0b2419; --rag-forest-800: #0f3324; --rag-forest-700: #155234; --rag-forest-600: #1c6b43; --rag-leaf-500: #2f9e62; --rag-leaf-400: #57bb86; /* Gold */ --rag-gold-700: #9c6f22; --rag-gold-600: #b98a2e; --rag-gold-500: #c9a24b; --rag-gold-400: #dabd77; --rag-champagne-300: #ecddb4; /* Neutrals */ --rag-cream-50: #faf6ee; --rag-cream-100: #f3ecdd; --rag-sand-200: #e5d9c2; --rag-ink-900: #13201a; --rag-ink-700: #34433b; --rag-ink-500: #5e6b62; --rag-white: #ffffff; --rag-trash: url('data:image/svg+xml;utf8,'); --rag-pin: url('data:image/svg+xml;utf8,'); /* Semantic */ --rag-bg: var(--rag-cream-50); --rag-surface: var(--rag-white); --rag-text: var(--rag-ink-900); --rag-muted: var(--rag-ink-500); --rag-border: color-mix(in srgb, var(--rag-ink-900) 12%, transparent); --rag-border-strong: color-mix(in srgb, var(--rag-ink-900) 22%, transparent); --rag-on-dark: #eef3ec; --rag-on-dark-muted: color-mix(in srgb, #eef3ec 64%, transparent); /* Type */ --rag-font-display: "Fraunces", Georgia, "Times New Roman", serif; --rag-font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; --rag-step--1: clamp(0.82rem, 0.79rem + 0.12vw, 0.9rem); --rag-step-0: clamp(1rem, 0.97rem + 0.16vw, 1.0625rem); --rag-step-1: clamp(1.12rem, 1.05rem + 0.35vw, 1.32rem); --rag-step-2: clamp(1.4rem, 1.24rem + 0.72vw, 1.9rem); --rag-step-3: clamp(1.7rem, 1.43rem + 1.25vw, 2.55rem); --rag-step-4: clamp(2.1rem, 1.6rem + 2.4vw, 3.4rem); --rag-step-5: clamp(2.55rem, 1.75rem + 3.9vw, 5rem); /* Spacing */ --rag-space-1: 0.5rem; --rag-space-2: 1rem; --rag-space-3: 1.5rem; --rag-space-4: 2.5rem; --rag-space-5: 4rem; --rag-space-6: 6rem; --rag-space-7: 8.5rem; /* Radius */ --rag-radius-sm: 9px; --rag-radius: 16px; --rag-radius-lg: 24px; --rag-radius-pill: 999px; /* Shadow */ --rag-shadow-sm: 0 1px 2px rgba(11, 36, 25, 0.06), 0 3px 10px rgba(11, 36, 25, 0.05); --rag-shadow: 0 14px 34px -16px rgba(11, 36, 25, 0.22); --rag-shadow-lg: 0 34px 64px -26px rgba(11, 36, 25, 0.34); --rag-shadow-gold: 0 16px 36px -14px rgba(155, 111, 34, 0.5); /* Layout */ --rag-container: 1180px; --rag-container-wide: 1400px; --rag-gutter: clamp(1.1rem, 4vw, 2.5rem); /* Motion */ --rag-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --rag-foil: linear-gradient(100deg, #9c6f22 0%, #ecddb4 38%, #c9a24b 60%, #b98a2e 82%, #ecddb4 100%); --rag-header-h: 78px; } /* ------------------------------------------------------------------------- 2. Reset & base ---------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--rag-font-body); font-size: var(--rag-step-0); line-height: 1.6; color: var(--rag-text); background: var(--rag-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } img, picture, svg, video { display: block; max-width: 100%; height: auto; } svg { fill: none; } a { color: var(--rag-forest-700); text-decoration: none; transition: color 0.2s var(--rag-ease); } a:hover { color: var(--rag-gold-600); } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; } ul, ol { list-style: none; padding: 0; } :focus-visible { outline: 2.5px solid var(--rag-gold-600); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--rag-gold-300, #ecddb4); color: var(--rag-forest-900); } /* ------------------------------------------------------------------------- 3. Typography ---------------------------------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--rag-font-display); font-weight: 430; line-height: 1.08; letter-spacing: -0.012em; color: var(--rag-forest-900); text-wrap: balance; } h1 { font-size: var(--rag-step-4); } h2 { font-size: var(--rag-step-3); } h3 { font-size: var(--rag-step-2); } p { text-wrap: pretty; } strong { font-weight: 600; } .rag-eyebrow { display: inline-flex; align-items: center; gap: 0.5em; font-size: var(--rag-step--1); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rag-forest-600); margin-bottom: 0.9rem; } .rag-eyebrow--gold { color: var(--rag-gold-600); } .rag-section--dark .rag-eyebrow { color: var(--rag-gold-400); } .rag-eyebrow .rag-icon { color: currentColor; } .rag-foil { background: var(--rag-foil); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; font-style: italic; animation: rag-foil-shift 8s linear infinite; } @keyframes rag-foil-shift { to { background-position: 220% 0; } } /* ------------------------------------------------------------------------- 4. Layout primitives ---------------------------------------------------------------------- */ .rag-container { width: min(100% - (var(--rag-gutter) * 2), var(--rag-container)); margin-inline: auto; } .rag-section--dark { position: relative; background: linear-gradient(165deg, var(--rag-forest-800), var(--rag-forest-900) 58%, var(--rag-forest-950)); color: var(--rag-on-dark); isolation: isolate; } .rag-section--dark h1, .rag-section--dark h2, .rag-section--dark h3 { color: var(--rag-white); } .rag-skip-link { position: absolute; left: 1rem; top: -100px; z-index: 999; background: var(--rag-forest-900); color: #fff; padding: 0.7rem 1.2rem; border-radius: var(--rag-radius-sm); transition: top 0.2s var(--rag-ease); } .rag-skip-link:focus { top: 1rem; color: #fff; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ------------------------------------------------------------------------- 5. Buttons & links ---------------------------------------------------------------------- */ .rag-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55em; padding: 0.85em 1.5em; font-weight: 600; font-size: var(--rag-step-0); line-height: 1; border-radius: var(--rag-radius-pill); border: 1.5px solid transparent; transition: transform 0.25s var(--rag-ease), box-shadow 0.25s var(--rag-ease), background 0.25s var(--rag-ease), color 0.2s var(--rag-ease); white-space: nowrap; } .rag-btn:active { transform: translateY(1px); } .rag-btn .rag-icon { transition: transform 0.25s var(--rag-ease); } .rag-btn:hover .rag-icon { transform: translateX(3px); } .rag-btn--gold { background: linear-gradient(115deg, var(--rag-gold-500), var(--rag-gold-600)); color: var(--rag-forest-950); box-shadow: var(--rag-shadow-gold); } .rag-btn--gold:hover { color: var(--rag-forest-950); transform: translateY(-2px); box-shadow: 0 20px 40px -14px rgba(155, 111, 34, 0.6); } .rag-btn--ghost { border-color: var(--rag-border-strong); color: var(--rag-forest-800); background: transparent; } .rag-btn--ghost:hover { border-color: var(--rag-forest-700); background: color-mix(in srgb, var(--rag-forest-700) 6%, transparent); color: var(--rag-forest-800); } .rag-btn--ghost-light { border-color: color-mix(in srgb, #fff 32%, transparent); color: #fff; background: color-mix(in srgb, #fff 6%, transparent); backdrop-filter: blur(4px); } .rag-btn--ghost-light:hover { border-color: var(--rag-gold-400); color: var(--rag-gold-300, #ecddb4); } .rag-btn--lg { padding: 1.05em 1.9em; font-size: var(--rag-step-1); } .rag-btn--block { width: 100%; } .rag-link-arrow { display: inline-flex; align-items: center; gap: 0.5em; font-weight: 600; color: var(--rag-forest-700); width: fit-content; } .rag-link-arrow .rag-icon { transition: transform 0.25s var(--rag-ease); } .rag-link-arrow:hover .rag-icon { transform: translate(3px, -3px); } .rag-section--dark .rag-link-arrow, .rag-section--dark a.rag-link-arrow { color: var(--rag-gold-400); } .rag-iconbtn { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--rag-radius-pill); color: var(--rag-forest-800); border: 1.5px solid var(--rag-border); transition: background 0.2s, border-color 0.2s, color 0.2s; } .rag-iconbtn:hover { border-color: var(--rag-forest-700); color: var(--rag-forest-700); background: color-mix(in srgb, var(--rag-forest-700) 5%, transparent); } /* ------------------------------------------------------------------------- 6. Section heads ---------------------------------------------------------------------- */ .rag-sectionhead { max-width: 46rem; margin-bottom: var(--rag-space-4); } .rag-sectionhead__title { font-size: var(--rag-step-3); } .rag-sectionhead__lead { margin-top: 0.9rem; font-size: var(--rag-step-1); color: var(--rag-muted); } .rag-sectionhead--light .rag-sectionhead__lead { color: var(--rag-on-dark-muted); } .rag-sectionhead--split { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; max-width: none; flex-wrap: wrap; } .rag-sectionhead--split .rag-link-arrow { flex-shrink: 0; padding-bottom: 0.4rem; } /* ------------------------------------------------------------------------- 7. Top bar + ticker ---------------------------------------------------------------------- */ .rag-topbar { background: var(--rag-forest-950); color: var(--rag-on-dark); font-size: 0.82rem; border-bottom: 1px solid color-mix(in srgb, var(--rag-gold-500) 22%, transparent); } .rag-topbar__inner { display: flex; align-items: center; gap: 1.5rem; min-height: 42px; } .rag-topbar__msg { display: inline-flex; align-items: center; gap: 0.5em; color: var(--rag-on-dark-muted); } .rag-topbar__msg .rag-icon { color: var(--rag-gold-400); } .rag-topbar__phone { margin-left: auto; display: inline-flex; align-items: center; gap: 0.45em; color: var(--rag-on-dark); font-weight: 600; } .rag-topbar__phone:hover { color: var(--rag-gold-400); } .rag-topbar__phone .rag-icon { color: var(--rag-gold-400); } /* Spot ticker (from plugin) */ .rag-ticker { display: flex; align-items: center; gap: 1.4rem; overflow: hidden; flex: 1; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .rag-ticker__track { display: inline-flex; align-items: center; gap: 1.6rem; white-space: nowrap; animation: rag-ticker-scroll 36s linear infinite; } .rag-ticker:hover .rag-ticker__track { animation-play-state: paused; } .rag-ticker__item { display: inline-flex; align-items: center; gap: 0.5em; color: var(--rag-on-dark-muted); } .rag-ticker__metal { font-weight: 600; color: var(--rag-on-dark); letter-spacing: 0.02em; } .rag-ticker__price { font-variant-numeric: tabular-nums; color: var(--rag-gold-400); font-weight: 600; } .rag-ticker__delta { font-variant-numeric: tabular-nums; font-size: 0.78rem; } .rag-ticker__delta--up { color: var(--rag-leaf-400); } .rag-ticker__delta--down { color: #e08a7a; } .rag-ticker__sep { width: 4px; height: 4px; border-radius: 50%; background: color-mix(in srgb, var(--rag-gold-500) 60%, transparent); } @keyframes rag-ticker-scroll { to { transform: translateX(-50%); } } /* ------------------------------------------------------------------------- 8. Header & navigation ---------------------------------------------------------------------- */ .rag-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--rag-cream-50) 86%, transparent); backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid transparent; transition: border-color 0.3s, box-shadow 0.3s, background 0.3s; } .rag-header.is-stuck { border-bottom-color: var(--rag-border); box-shadow: 0 10px 30px -18px rgba(11, 36, 25, 0.22); background: color-mix(in srgb, var(--rag-cream-50) 94%, transparent); } .rag-header__inner { display: flex; align-items: center; gap: 1.5rem; min-height: var(--rag-header-h); } .rag-header__brand { margin-right: auto; } .rag-nav { display: flex; } .rag-nav__list { display: flex; align-items: center; gap: 0.35rem; } .rag-nav__list a { display: inline-block; padding: 0.55rem 0.95rem; font-weight: 500; color: var(--rag-ink-700); border-radius: var(--rag-radius-pill); position: relative; } .rag-nav__list a::after { content: ""; position: absolute; left: 0.95rem; right: 0.95rem; bottom: 0.32rem; height: 2px; background: var(--rag-gold-500); transform: scaleX(0); transform-origin: left; transition: transform 0.28s var(--rag-ease); border-radius: 2px; } .rag-nav__list a:hover, .rag-nav__list .current-menu-item > a, .rag-nav__list .current_page_item > a { color: var(--rag-forest-800); } .rag-nav__list a:hover::after, .rag-nav__list .current-menu-item > a::after, .rag-nav__list .current_page_item > a::after { transform: scaleX(1); } /* Dropdown submenus (desktop nav) */ .rag-nav__list .menu-item-has-children { position: relative; } .rag-nav__list > .menu-item-has-children > a { padding-right: 2rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334433b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.65rem center; background-size: 13px; } .rag-nav__list .sub-menu { list-style: none; margin: 0; padding: 0.5rem; position: absolute; top: calc(100% + 4px); left: 0; min-width: 232px; background: var(--rag-surface); border: 1px solid var(--rag-border); border-radius: var(--rag-radius); box-shadow: var(--rag-shadow-lg); display: grid; gap: 0.1rem; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.22s var(--rag-ease), transform 0.22s var(--rag-ease), visibility 0.22s; z-index: 60; } .rag-nav__list .menu-item-has-children:hover > .sub-menu, .rag-nav__list .menu-item-has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; } .rag-nav__list .sub-menu a { display: block; padding: 0.55rem 0.9rem; border-radius: var(--rag-radius-sm); white-space: nowrap; font-weight: 500; color: var(--rag-ink-700); } .rag-nav__list .sub-menu a::after { content: none; } .rag-nav__list .sub-menu a:hover, .rag-nav__list .sub-menu .current-menu-item > a { background: color-mix(in srgb, var(--rag-forest-700) 8%, transparent); color: var(--rag-forest-800); } /* Submenus inside the mobile panel (indented, always visible) */ .rag-mobile-nav__list .sub-menu { list-style: none; margin: 0 0 0.6rem; padding: 0; display: flex; flex-direction: column; } .rag-mobile-nav__list .sub-menu a { font-family: var(--rag-font-body); font-size: 1.02rem; padding: 0.6rem 0.4rem 0.6rem 1.4rem; color: var(--rag-on-dark-muted); border-bottom: 1px solid color-mix(in srgb, #fff 7%, transparent); } .rag-mobile-nav__list .sub-menu a:hover { color: var(--rag-gold-400); } .rag-header__actions { display: flex; align-items: center; gap: 0.7rem; } .rag-cart-link { color: var(--rag-forest-800); } .rag-cart-count { position: absolute; top: -3px; right: -3px; min-width: 19px; height: 19px; padding: 0 5px; display: grid; place-items: center; font-size: 0.66rem; font-weight: 700; background: var(--rag-gold-500); color: var(--rag-forest-950); border-radius: var(--rag-radius-pill); border: 2px solid var(--rag-cream-50); } .rag-navtoggle { display: none; width: 46px; height: 46px; border-radius: var(--rag-radius-pill); border: 1.5px solid var(--rag-border); place-items: center; } .rag-navtoggle__bars, .rag-navtoggle__bars::before, .rag-navtoggle__bars::after { content: ""; display: block; width: 20px; height: 2px; background: var(--rag-forest-900); border-radius: 2px; transition: transform 0.3s var(--rag-ease), opacity 0.2s; } .rag-navtoggle__bars { position: relative; } .rag-navtoggle__bars::before { position: absolute; top: -6px; } .rag-navtoggle__bars::after { position: absolute; top: 6px; } .rag-navtoggle[aria-expanded="true"] .rag-navtoggle__bars { background: transparent; } .rag-navtoggle[aria-expanded="true"] .rag-navtoggle__bars::before { transform: translateY(6px) rotate(45deg); } .rag-navtoggle[aria-expanded="true"] .rag-navtoggle__bars::after { transform: translateY(-6px) rotate(-45deg); } /* Mobile nav panel */ .rag-mobile-nav { position: fixed; inset: 0; z-index: 95; background: linear-gradient(170deg, var(--rag-forest-800), var(--rag-forest-950)); /* Maalt naar panelet aabnes; tallet bagefter er kun en nødplan. */ padding: calc(var(--rag-navtop, calc(var(--rag-header-h) + 60px)) + 1.2rem) var(--rag-gutter) 3rem; opacity: 0; transform: translateY(-12px); transition: opacity 0.32s var(--rag-ease), transform 0.32s var(--rag-ease); overflow-y: auto; } .rag-mobile-nav.is-open { opacity: 1; transform: none; } .rag-mobile-nav__list { display: flex; flex-direction: column; gap: 0.4rem; } .rag-mobile-nav__list a { display: block; padding: 0.85rem 0.4rem; font-family: var(--rag-font-display); font-size: var(--rag-step-2); color: var(--rag-on-dark); border-bottom: 1px solid color-mix(in srgb, #fff 10%, transparent); } .rag-mobile-nav__list a:hover { color: var(--rag-gold-400); } .rag-mobile-nav__actions { margin-top: 2rem; display: flex; flex-direction: column; gap: 1rem; } .rag-mobile-nav__phone { display: inline-flex; align-items: center; gap: 0.5em; color: var(--rag-gold-400); font-weight: 600; justify-content: center; } /* ------------------------------------------------------------------------- 9. Brand mark ---------------------------------------------------------------------- */ .rag-brand { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--rag-forest-900); } .rag-brand:hover { color: var(--rag-forest-900); } .rag-brand__mark { flex-shrink: 0; transition: transform 0.4s var(--rag-ease); } .rag-brand:hover .rag-brand__mark { transform: rotate(-8deg); } .rag-brand__word { font-family: var(--rag-font-display); font-size: 1.4rem; font-weight: 480; letter-spacing: -0.01em; line-height: 1; } .rag-brand__ra { color: var(--rag-forest-700); font-weight: 560; } .rag-brand--footer { color: var(--rag-on-dark); } .rag-brand--footer .rag-brand__word { color: var(--rag-white); } .rag-brand--footer .rag-brand__ra { color: var(--rag-gold-400); } /* Custom logo (their real logo image, used in the header) */ .custom-logo-link { display: inline-flex; align-items: center; } .rag-header .custom-logo, img.custom-logo { display: block; height: 46px !important; width: auto !important; max-width: 260px; } @media (max-width: 960px) { .rag-header .custom-logo, img.custom-logo { height: 38px !important; } } /* Initials avatar (dummy person portraits) + team cards */ .rag-avatar { display: inline-grid; place-items: center; border-radius: 50%; background: linear-gradient(150deg, var(--rag-forest-700), var(--rag-forest-950)); color: var(--rag-champagne-300, #ecddb4); font-family: var(--rag-font-display); font-weight: 500; line-height: 1; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rag-gold-500) 45%, transparent); flex-shrink: 0; } .rag-team { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; margin: var(--rag-space-3) 0 0; padding: 0; } .rag-team--lg { max-width: 46rem; } .rag-team__member { display: flex; align-items: center; gap: 1rem; background: var(--rag-surface); border: 1px solid var(--rag-border); border-radius: var(--rag-radius); padding: 1.1rem 1.2rem; } .rag-team__info { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; } .rag-team__name { font-family: var(--rag-font-display); font-size: 1.2rem; color: var(--rag-forest-900); line-height: 1.15; } .rag-team__role { font-size: 0.82rem; color: var(--rag-muted); } .rag-team__phone { color: var(--rag-forest-700); font-weight: 600; margin-top: 0.25rem; } .rag-team__phone:hover { color: var(--rag-gold-700); } @media (max-width: 560px) { .rag-team { grid-template-columns: 1fr; } } /* ------------------------------------------------------------------------- 10. Hero ---------------------------------------------------------------------- */ .rag-hero { position: relative; background: linear-gradient(165deg, var(--rag-forest-800) 0%, var(--rag-forest-900) 55%, var(--rag-forest-950) 100%); color: var(--rag-on-dark); padding: clamp(3.5rem, 7vw, 7rem) 0 clamp(3.5rem, 7vw, 6.5rem); overflow: hidden; isolation: isolate; } .rag-hero__bg { position: absolute; inset: 0; z-index: -1; } .rag-hero__glow { position: absolute; width: 60vw; height: 60vw; max-width: 720px; max-height: 720px; top: -18%; right: -10%; background: radial-gradient(circle, color-mix(in srgb, var(--rag-gold-500) 32%, transparent), transparent 62%); filter: blur(20px); } .rag-hero__bg::after { content: ""; position: absolute; left: -12%; bottom: -22%; width: 50vw; height: 50vw; max-width: 560px; max-height: 560px; background: radial-gradient(circle, color-mix(in srgb, var(--rag-leaf-500) 24%, transparent), transparent 64%); filter: blur(22px); } .rag-hero__grain, .rag-section--dark .rag-hero__grain { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: 0.05; mix-blend-mode: overlay; pointer-events: none; } .rag-hero__inner { display: grid; grid-template-columns: 1.25fr 0.9fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .rag-hero__title { font-size: var(--rag-step-5); color: #fff; font-weight: 420; line-height: 1.02; } .rag-hero__lead { margin-top: 1.4rem; font-size: var(--rag-step-1); max-width: 34rem; color: var(--rag-on-dark-muted); } .rag-hero__actions { margin-top: 2.1rem; display: flex; flex-wrap: wrap; gap: 0.9rem; } .rag-hero__chips { margin-top: 2.3rem; display: flex; flex-wrap: wrap; gap: 1.4rem; } .rag-hero__chips li { display: inline-flex; align-items: center; gap: 0.5em; font-size: 0.9rem; color: var(--rag-on-dark-muted); } .rag-hero__chips .rag-icon { color: var(--rag-gold-400); } /* ------------------------------------------------------------------------- 11. Price cards / table (plugin output) ---------------------------------------------------------------------- */ .rag-prices { background: color-mix(in srgb, #fff 6%, transparent); border: 1px solid color-mix(in srgb, var(--rag-gold-500) 26%, transparent); border-radius: var(--rag-radius-lg); padding: 1.6rem; backdrop-filter: blur(8px); box-shadow: var(--rag-shadow-lg); } .rag-prices__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; } .rag-prices__title { font-family: var(--rag-font-display); font-size: var(--rag-step-1); color: #fff; } .rag-prices__live { display: inline-flex; align-items: center; gap: 0.45em; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--rag-leaf-400); font-weight: 600; } .rag-prices__live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rag-leaf-400); box-shadow: 0 0 0 0 color-mix(in srgb, var(--rag-leaf-400) 70%, transparent); animation: rag-pulse 2.2s infinite; } @keyframes rag-pulse { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } .rag-prices__list { display: flex; flex-direction: column; } .rag-prices__group { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--rag-gold-400); margin: 1rem 0 0.1rem; } .rag-prices__group:first-child { margin-top: 0; } .rag-prices--full .rag-prices__group, .rag-prices--aside .rag-prices__group { color: var(--rag-gold-700); } .rag-price { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid color-mix(in srgb, #fff 10%, transparent); } .rag-price:last-child { border-bottom: 0; } .rag-price__label { display: flex; flex-direction: column; gap: 0.1rem; } .rag-price__metal { font-weight: 600; color: var(--rag-on-dark); } .rag-price__karat { font-size: 0.78rem; color: var(--rag-on-dark-muted); } .rag-price__value { font-variant-numeric: tabular-nums; font-weight: 700; font-size: var(--rag-step-1); color: var(--rag-gold-400); white-space: nowrap; } .rag-price__unit { font-size: 0.78rem; font-weight: 500; color: var(--rag-on-dark-muted); } .rag-prices__note { margin-top: 1.1rem; font-size: 0.74rem; color: var(--rag-on-dark-muted); line-height: 1.5; } .rag-prices__note a { color: var(--rag-gold-400); } /* Price disclaimer. Styled here (not only in the plugin) because the theme renders the price panel directly — the plugin's stylesheet is only loaded on pages that use its shortcodes, so this would otherwise be unstyled. */ .rag-disclaimer { margin-top: 0.55rem; font-size: 0.7rem; line-height: 1.45; color: var(--rag-on-dark-muted); opacity: 0.75; font-weight: 400; } /* Pletsølv / kobber / tin sit above the karat rows, separated by a rule. */ .rag-prices__block--extras { padding-bottom: 0.5rem; margin-bottom: 0.3rem; border-bottom: 1px solid color-mix(in srgb, #fff 12%, transparent); } .rag-price__value--contact { font-size: 0.86rem; font-weight: 600; letter-spacing: 0.01em; } .rag-prices--full .rag-prices__block--extras, .rag-prices--aside .rag-prices__block--extras { border-bottom-color: var(--rag-border); } /* Light variants for the sell page / cream sections */ .rag-prices--full, .rag-prices--aside { background: var(--rag-surface); border-color: var(--rag-border); color: var(--rag-text); box-shadow: var(--rag-shadow); backdrop-filter: none; } .rag-prices--full .rag-prices__title, .rag-prices--aside .rag-prices__title { color: var(--rag-forest-900); } .rag-prices--full .rag-price, .rag-prices--aside .rag-price { border-bottom-color: var(--rag-border); padding: 0.6rem 0; } .rag-prices--full .rag-price__metal, .rag-prices--aside .rag-price__metal { color: var(--rag-forest-900); } .rag-prices--full .rag-price__karat, .rag-prices--aside .rag-price__karat { color: var(--rag-muted); } .rag-prices--full .rag-price__value, .rag-prices--aside .rag-price__value { color: var(--rag-gold-700); } .rag-prices--full .rag-price__unit, .rag-prices--aside .rag-price__unit { color: var(--rag-muted); } /* Two-column full table: a hairline between the metal columns + comfortable gutters */ .rag-prices--full .rag-prices__list { column-gap: 0; } .rag-prices--full .rag-prices__block { padding: 0.1rem 0; } .rag-prices--full .rag-prices__block:first-child { padding-right: 2.2rem; border-right: 1px solid var(--rag-border); } .rag-prices--full .rag-prices__block:last-child { padding-left: 2.2rem; } @media (max-width: 600px) { .rag-prices--full .rag-prices__block:first-child { padding-right: 0; border-right: 0; } .rag-prices--full .rag-prices__block:last-child { padding-left: 0; } } .rag-prices--full .rag-price__metal, .rag-prices--aside .rag-price__metal { color: var(--rag-forest-900); } .rag-prices--full .rag-price__karat, .rag-prices--aside .rag-price__karat, .rag-prices--full .rag-prices__note, .rag-prices--aside .rag-prices__note { color: var(--rag-muted); } .rag-prices--full .rag-disclaimer, .rag-prices--aside .rag-disclaimer { color: var(--rag-muted); } .rag-prices--full .rag-price__value, .rag-prices--aside .rag-price__value { color: var(--rag-gold-700); } .rag-prices--full .rag-prices__note a, .rag-prices--aside .rag-prices__note a { color: var(--rag-forest-700); } .rag-prices--aside.is-sticky { position: sticky; top: calc(var(--rag-header-h) + 16px); } .rag-prices--full { max-width: 560px; } .rag-sell__prices { margin-top: var(--rag-space-4); display: flex; justify-content: center; } .rag-pricecard--placeholder { background: color-mix(in srgb, #fff 6%, transparent); border: 1px dashed color-mix(in srgb, var(--rag-gold-500) 40%, transparent); border-radius: var(--rag-radius-lg); padding: 2rem; text-align: center; } .rag-pricecard__title { font-family: var(--rag-font-display); font-size: var(--rag-step-1); color: #fff; margin-bottom: 0.5rem; } .rag-pricecard__hint { color: var(--rag-on-dark-muted); font-size: 0.9rem; } /* ------------------------------------------------------------------------- 12. USP strip ---------------------------------------------------------------------- */ .rag-usps { padding: clamp(2.5rem, 5vw, 4rem) 0; background: var(--rag-cream-100); border-bottom: 1px solid var(--rag-border); } .rag-usps__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; } .rag-usp { background: var(--rag-surface); border: 1px solid var(--rag-border); border-radius: var(--rag-radius); padding: 1.6rem; transition: transform 0.3s var(--rag-ease), box-shadow 0.3s var(--rag-ease); } .rag-usp:hover { transform: translateY(-4px); box-shadow: var(--rag-shadow); } .rag-usp__icon { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: var(--rag-radius-sm); background: linear-gradient(135deg, color-mix(in srgb, var(--rag-leaf-500) 16%, transparent), color-mix(in srgb, var(--rag-gold-500) 16%, transparent)); color: var(--rag-forest-700); margin-bottom: 1rem; } .rag-usp__title { font-size: var(--rag-step-1); margin-bottom: 0.35rem; } .rag-usp__text { color: var(--rag-muted); font-size: 0.95rem; } /* ------------------------------------------------------------------------- 13. Sell section + steps ---------------------------------------------------------------------- */ .rag-sell { padding: var(--rag-space-6) 0; } .rag-sell__inner { position: relative; z-index: 1; } .rag-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .rag-step { position: relative; padding: 2rem 1.6rem; border: 1px solid color-mix(in srgb, var(--rag-gold-500) 24%, transparent); border-radius: var(--rag-radius-lg); background: color-mix(in srgb, #fff 4%, transparent); } .rag-step__num { font-family: var(--rag-font-display); font-size: 2.4rem; font-style: italic; background: var(--rag-foil); -webkit-background-clip: text; background-clip: text; color: transparent; display: block; margin-bottom: 0.6rem; } .rag-step__title { font-size: var(--rag-step-1); color: #fff; margin-bottom: 0.5rem; } .rag-step__text { color: var(--rag-on-dark-muted); } .rag-sell__cta { margin-top: var(--rag-space-4); text-align: center; } /* ------------------------------------------------------------------------- 14. Shop teaser & WooCommerce product grid ---------------------------------------------------------------------- */ .rag-shopteaser { padding: var(--rag-space-6) 0; } /* Shop category navigation (pills) */ .rag-shopnav { margin-bottom: 1.6rem; } .rag-shopnav__list { display: flex; flex-wrap: wrap; gap: 0.6rem; } .rag-shopnav__pill { display: inline-flex; align-items: center; gap: 0.45em; padding: 0.5em 1.1em; border-radius: var(--rag-radius-pill); border: 1.5px solid var(--rag-border); background: var(--rag-surface); color: var(--rag-ink-700); font-weight: 600; font-size: 0.92rem; transition: border-color 0.2s, color 0.2s, background 0.2s; } .rag-shopnav__pill:hover { border-color: var(--rag-gold-500); color: var(--rag-forest-800); } .rag-shopnav__pill.is-active { background: var(--rag-forest-700); border-color: var(--rag-forest-700); color: #fff; } .rag-shopnav__count { font-size: 0.78rem; opacity: 0.7; font-variant-numeric: tabular-nums; } .rag-shopnav__pill.is-active .rag-shopnav__count { color: var(--rag-gold-400); opacity: 1; } /* Shop layout with left filter sidebar */ .rag-shop--has-sidebar { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: clamp(1.4rem, 3vw, 2.8rem); align-items: start; padding-top: var(--rag-space-4); } .rag-shop--has-sidebar > main { min-width: 0; } /* Klaeber, men ruller selv, naar den er hoejere end skaermen. Uden max-height kunne de nederste filtre (laengde, sten) ikke naas paa en computer, foer man var rullet forbi alle varerne - sidebaren var ~1.600 px hoej (11. okt. 2026). */ .rag-shop__sidebar { position: sticky; top: calc(var(--rag-header-h) + 14px); max-height: calc(100vh - var(--rag-header-h) - 28px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-right: 4px; } .rag-shop__filters-toggle { display: none; } .rag-filter { padding-bottom: 1.4rem; margin-bottom: 1.4rem; border-bottom: 1px solid var(--rag-border); } .rag-filter:last-child { border-bottom: 0; } .rag-filter__title { font-family: var(--rag-font-body); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--rag-forest-700); margin-bottom: 0.9rem; } .rag-filter__list { display: flex; flex-direction: column; gap: 0.15rem; } .rag-filter__cat { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0.7rem; border-radius: var(--rag-radius-sm); color: var(--rag-ink-700); font-weight: 500; transition: background 0.2s, color 0.2s; } .rag-filter__cat:hover { background: color-mix(in srgb, var(--rag-forest-700) 7%, transparent); color: var(--rag-forest-800); } .rag-filter__cat.is-active { background: var(--rag-forest-700); color: #fff; } .rag-filter__count { font-size: 0.78rem; color: var(--rag-muted); font-variant-numeric: tabular-nums; } .rag-filter__cat.is-active .rag-filter__count { color: var(--rag-gold-400); } .rag-filter__price { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.8rem; } .rag-filter__price input { width: 100%; padding: 0.55rem 0.6rem; border: 1.5px solid var(--rag-border-strong); border-radius: var(--rag-radius-sm); background: var(--rag-surface); font-variant-numeric: tabular-nums; } .rag-filter__price input:focus { outline: none; border-color: var(--rag-gold-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rag-gold-500) 16%, transparent); } .rag-filter__dash { color: var(--rag-muted); } /* Intervalfiltre (pris, ringstoerrelse, laengde): slider med to haandtag og to felter paa én linje under. Uden JavaScript skjules slideren, og felterne + knappen goer arbejdet (html.js saettes i ). */ .rag-range { display: grid; gap: 0.7rem; } .rag-range__value { font-weight: 700; font-size: 1rem; color: var(--rag-forest-800); font-variant-numeric: tabular-nums; } html:not(.js) .rag-range__value, html:not(.js) .rag-range__slider { display: none; } .rag-range__slider { position: relative; height: 28px; margin: 0 11px; } .rag-range__track { position: absolute; left: 0; right: 0; top: 50%; height: 4px; transform: translateY(-50%); border-radius: 999px; background: color-mix(in srgb, var(--rag-ink-900) 14%, transparent); } .rag-range__fill { position: absolute; top: 0; bottom: 0; left: var(--rag-fra, 0%); right: calc(100% - var(--rag-til, 100%)); border-radius: inherit; background: var(--rag-forest-700); } /* To native range-felter oven paa hinanden: sporet er usynligt og klikker igennem, kun knapperne tager imod musen. */ .rag-range__thumb { position: absolute; left: -11px; width: calc(100% + 22px); top: 0; height: 28px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; } .rag-range__thumb::-webkit-slider-runnable-track { background: none; height: 28px; } .rag-range__thumb::-moz-range-track { background: none; height: 28px; } .rag-range__thumb::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 22px; height: 22px; margin-top: 3px; border-radius: 50%; background: #fff; border: 2px solid var(--rag-forest-700); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); cursor: grab; } .rag-range__thumb::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--rag-forest-700); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); cursor: grab; } .rag-range__thumb:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.08); } .rag-range__thumb:focus { outline: none; } .rag-range__thumb:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--rag-gold-500) 45%, transparent); } .rag-range__thumb:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--rag-gold-500) 45%, transparent); } /* Det haandtag, man sidst rørte, ligger oeverst - ellers kan to haandtag, der staar paa samme sted, ikke skilles ad igen. */ .rag-range__thumb.is-top { z-index: 2; } .rag-range__fields { display: flex; align-items: center; gap: 0.45rem; } .rag-range__fields label { flex: 1 1 0; min-width: 0; } .rag-range__fields input { width: 100%; min-height: 40px; padding: 0.45rem 0.55rem; border: 1.5px solid var(--rag-border-strong); border-radius: var(--rag-radius-sm); background: var(--rag-surface); font: inherit; font-size: 0.92rem; font-variant-numeric: tabular-nums; -moz-appearance: textfield; } .rag-range__fields input::-webkit-outer-spin-button, .rag-range__fields input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .rag-range__fields input:focus { outline: none; border-color: var(--rag-gold-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rag-gold-500) 16%, transparent); } .rag-range__unit { flex: 0 0 auto; font-size: 0.85rem; color: var(--rag-muted); } .rag-range__actions { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; } .rag-range__actions:empty { display: none; } html.js .rag-range__submit { display: none; } .rag-range__submit { flex: 1 1 auto; } .rag-filter__clear { font-size: 0.85rem; font-weight: 600; color: var(--rag-forest-700); text-decoration: underline; text-underline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .rag-range__thumb:active::-webkit-slider-thumb { transform: none; } } .rag-filter__check { display: flex; align-items: center; gap: 0.6rem; color: var(--rag-ink-700); font-weight: 500; } .rag-filter__check:hover { color: var(--rag-forest-800); } .rag-filter__box { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1.5px solid var(--rag-border-strong); border-radius: 5px; color: #fff; flex-shrink: 0; } .rag-filter__check.is-active .rag-filter__box { background: var(--rag-forest-700); border-color: var(--rag-forest-700); } /* Equal-height, aligned product cards */ ul.products li.product { display: flex; flex-direction: column; } ul.products li.product > a.woocommerce-LoopProduct-link { display: flex; flex-direction: column; flex: 1 1 auto; } li.product .woocommerce-loop-product__title { min-height: 2.7em; } li.product a.woocommerce-LoopProduct-link .price { margin-top: auto; padding-top: 0.6rem; } li.product .button, li.product .added_to_cart { margin-top: 0.5rem; } @media (max-width: 900px) { .rag-shop--has-sidebar { grid-template-columns: 1fr; } .rag-shop__sidebar { position: static; max-height: none; overflow: visible; padding-right: 0; } .rag-shop__filters-toggle { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.7em 1.2em; border: 1.5px solid var(--rag-border-strong); border-radius: var(--rag-radius-pill); font-weight: 600; margin-bottom: 1rem; color: var(--rag-forest-800); } .rag-shop__filters { display: none; padding: 1.3rem; border: 1px solid var(--rag-border); border-radius: var(--rag-radius); margin-bottom: 1.3rem; background: var(--rag-surface); } .rag-shop__filters.is-open { display: block; } } /* Homepage category cards */ .rag-cats { padding: var(--rag-space-6) 0 var(--rag-space-4); } .rag-cats__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } .rag-cat { position: relative; display: block; border-radius: var(--rag-radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--rag-forest-800); box-shadow: var(--rag-shadow-sm); } .rag-cat__media { position: absolute; inset: 0; } .rag-cat__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.55s var(--rag-ease); } .rag-cat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6, 20, 16, 0.88) 6%, rgba(6, 20, 16, 0.2) 58%, transparent); } .rag-cat:hover .rag-cat__media img { transform: scale(1.06); } .rag-cat__body { position: absolute; left: 1.3rem; right: 1.3rem; bottom: 1.2rem; z-index: 1; display: flex; flex-direction: column; gap: 0.15rem; } .rag-cat__name { font-family: var(--rag-font-display); font-size: 1.5rem; color: #fff; line-height: 1.05; } .rag-cat__count { font-size: 0.85rem; color: var(--rag-gold-400); font-weight: 600; } @media (max-width: 860px) { .rag-cats__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .rag-cats__grid { grid-template-columns: 1fr; } } ul.products { display: grid !important; grid-template-columns: repeat(var(--rag-cols, 4), 1fr); gap: clamp(1rem, 2vw, 1.6rem); margin: 0 !important; } ul.products::before, ul.products::after { content: none !important; } ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; display: flex; flex-direction: column; } .rag-shop ul.products { --rag-cols: 3; } li.product, .rag-product-card { background: var(--rag-surface); border: 1px solid var(--rag-border); border-radius: var(--rag-radius); overflow: hidden; transition: transform 0.3s var(--rag-ease), box-shadow 0.3s var(--rag-ease), border-color 0.3s; position: relative; } li.product:hover { transform: translateY(-5px); box-shadow: var(--rag-shadow-lg); border-color: color-mix(in srgb, var(--rag-gold-500) 40%, transparent); } li.product a.woocommerce-LoopProduct-link { display: block; } li.product .attachment-woocommerce_thumbnail, li.product img { aspect-ratio: 1; object-fit: cover; width: 100%; background: var(--rag-cream-100); transition: transform 0.55s var(--rag-ease); } li.product:hover img { transform: scale(1.05); } li.product .woocommerce-loop-product__title { font-family: var(--rag-font-display); font-size: 1.1rem; font-weight: 480; line-height: 1.25; color: var(--rag-forest-900); padding: 1rem 1.4rem 0.2rem; } li.product .price { display: block; padding: 0 1.4rem; color: var(--rag-gold-700); font-weight: 600; font-variant-numeric: tabular-nums; } li.product .price del { color: var(--rag-muted); font-weight: 400; margin-right: 0.4em; } li.product .price ins { text-decoration: none; color: var(--rag-gold-700); } li.product .star-rating { margin: 0.4rem 1.4rem 0; font-size: 0.8rem; color: var(--rag-gold-500); } li.product .button, li.product .added_to_cart { margin: 0.9rem 1.4rem 1.3rem; } .rag-badge { position: absolute; z-index: 3; top: 0.85rem; left: 0.85rem; padding: 0.34em 0.8em; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border-radius: var(--rag-radius-pill); } /* Refined sale tag — overrides WooCommerce's default circular badge. */ .woocommerce ul.products li.product .onsale, .woocommerce span.onsale, span.onsale { position: absolute !important; z-index: 3; top: 0.85rem !important; left: 0.85rem !important; right: auto !important; margin: 0 !important; min-width: 0 !important; min-height: 0 !important; width: auto !important; height: auto !important; padding: 0.36em 0.85em !important; border-radius: var(--rag-radius-pill) !important; background: linear-gradient(115deg, var(--rag-gold-400), var(--rag-gold-600)) !important; color: var(--rag-forest-950) !important; font-size: 0.7rem !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; line-height: 1.5 !important; box-shadow: 0 6px 16px -6px rgba(155, 111, 34, 0.55) !important; } /* WooCommerce buttons → brand buttons */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce .button { background: var(--rag-forest-700); color: #fff; border-radius: var(--rag-radius-pill); font-weight: 600; padding: 0.8em 1.4em; transition: background 0.25s var(--rag-ease), transform 0.2s; border: 0; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce .button:hover, .woocommerce #respond input#submit:hover { background: var(--rag-forest-800); color: #fff; transform: translateY(-2px); } .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce .single_add_to_cart_button { background: linear-gradient(115deg, var(--rag-gold-500), var(--rag-gold-600)) !important; color: var(--rag-forest-950) !important; box-shadow: var(--rag-shadow-gold); } .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { transform: translateY(-2px); } .woocommerce .added_to_cart { background: transparent; color: var(--rag-forest-700); padding: 0.4em 0; text-decoration: underline; } /* Catalog "Læs mere" link (replaces add-to-cart in the product loop). */ li.product .rag-loop-more { display: block; text-align: center; } /* ---- Moms: fortjenstmargenordning ---- */ /* Asterisk marking a zero-rated (margin-scheme) line. */ .rag-vat-mark { border: 0; text-decoration: none; cursor: help; color: var(--rag-gold-700); font-weight: 700; margin-left: 0.15em; } /* Footnote explaining the scheme. */ .rag-vat-note { margin: 0.9rem 0 0; font-size: 0.82rem; line-height: 1.5; color: var(--rag-muted); } .rag-vat-note__mark { color: var(--rag-gold-700); font-weight: 700; } .rag-vat-note-row td { border: 0 !important; padding-top: 0.4rem !important; } /* VAT breakdown rows in the totals table. */ .woocommerce .rag-vat-group th, .woocommerce .rag-vat-group td { color: var(--rag-muted); font-weight: 500; } .woocommerce .rag-vat-amount th, .woocommerce .rag-vat-amount td { color: var(--rag-ink-700); font-weight: 600; } /* Order-received / checkout detail lists sit inside .rag-prose — neutralise the gold prose bullet that was overlapping the bank-details and order text. */ .rag-prose .wc-bacs-bank-details-account-list li::before, .rag-prose ul.wc-bacs-bank-details-account-list li::before, .rag-prose .woocommerce-order-overview li::before, .rag-prose ul.order_details li::before, .rag-prose .woocommerce-customer-details ul li::before, .rag-prose .woocommerce-order ul li::before { content: none; } .rag-prose .wc-bacs-bank-details-account-list, .rag-prose ul.order_details, .rag-prose .woocommerce-customer-details ul { padding-left: 0; } .rag-prose .wc-bacs-bank-details-account-list li, .rag-prose ul.order_details li, .rag-prose .woocommerce-customer-details ul li { padding-left: 0; } /* ------------------------------------------------------------------------- 15. About section ---------------------------------------------------------------------- */ .rag-about { padding: var(--rag-space-6) 0; } .rag-about__inner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; } .rag-about__visual { position: relative; aspect-ratio: 4 / 5; border-radius: var(--rag-radius-lg); background: linear-gradient(165deg, var(--rag-forest-700), var(--rag-forest-900)); display: grid; place-items: center; overflow: hidden; box-shadow: var(--rag-shadow-lg); } .rag-about__visual::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 70% 20%, color-mix(in srgb, var(--rag-gold-500) 30%, transparent), transparent 55%); } .rag-about__emblem { width: 46%; filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.3)); } .rag-about__emblem svg { width: 100%; height: auto; } .rag-about__stats { position: absolute; bottom: 1.4rem; left: 1.4rem; right: 1.4rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; } .rag-stat { background: color-mix(in srgb, #fff 10%, transparent); backdrop-filter: blur(6px); border: 1px solid color-mix(in srgb, #fff 16%, transparent); border-radius: var(--rag-radius-sm); padding: 0.8rem; text-align: center; } .rag-stat__num { display: block; font-family: var(--rag-font-display); font-size: 1.5rem; color: var(--rag-gold-400); line-height: 1; } .rag-stat__label { font-size: 0.72rem; color: var(--rag-on-dark-muted); } .rag-about__content > p { margin-top: 1.1rem; color: var(--rag-ink-700); font-size: var(--rag-step-1); } .rag-about__content .rag-link-arrow { margin-top: 1.6rem; } /* ------------------------------------------------------------------------- 16. Footer ---------------------------------------------------------------------- */ .rag-footer { background: var(--rag-forest-950); color: var(--rag-on-dark); } .rag-footer-cta { position: relative; padding: clamp(3rem, 6vw, 5rem) 0; background: linear-gradient(120deg, var(--rag-forest-700), var(--rag-forest-900)); overflow: hidden; isolation: isolate; } .rag-footer-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 85% 30%, color-mix(in srgb, var(--rag-gold-500) 26%, transparent), transparent 50%); } .rag-footer-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 2.5rem; flex-wrap: wrap; } .rag-footer-cta__title { font-size: var(--rag-step-3); color: #fff; max-width: 18ch; } .rag-footer-cta__lead { margin-top: 0.8rem; color: var(--rag-on-dark-muted); max-width: 42ch; } .rag-footer-cta__actions { display: flex; gap: 0.9rem; flex-wrap: wrap; } .rag-footer__main { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 2.5rem; padding: var(--rag-space-5) 0 var(--rag-space-4); } .rag-footer__tagline { margin-top: 1.1rem; color: var(--rag-on-dark-muted); max-width: 30ch; } /* Juridisk navn + CVR under logoet. Daempet, men laesbart: det er en oplysningspligt, ikke en salgstekst. Bryder til to linjer paa smalle skaerme, saa CVR-nummeret ikke bliver delt midt over. */ .rag-footer__company { margin-top: .55rem; display: flex; flex-wrap: wrap; gap: .15rem .6rem; font-size: .85rem; line-height: 1.5; color: var(--rag-on-dark-muted); } .rag-footer__company-name { font-weight: 600; } .rag-footer__company-cvr { white-space: nowrap; } .rag-footer__social { margin-top: 1.4rem; display: flex; gap: 0.6rem; } .rag-footer__social .rag-iconbtn { color: var(--rag-on-dark); border-color: color-mix(in srgb, #fff 16%, transparent); } .rag-footer__social .rag-iconbtn:hover { color: var(--rag-gold-400); border-color: var(--rag-gold-400); background: color-mix(in srgb, var(--rag-gold-500) 10%, transparent); } .rag-footer__heading { font-family: var(--rag-font-body); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--rag-gold-400); margin-bottom: 1.1rem; } .rag-footer__list { display: flex; flex-direction: column; gap: 0.7rem; } .rag-footer__list a { color: var(--rag-on-dark-muted); } .rag-footer__list a:hover { color: var(--rag-gold-400); } .rag-footer__list--contact li { display: flex; gap: 0.7rem; align-items: flex-start; color: var(--rag-on-dark-muted); } .rag-footer__list--contact .rag-icon { color: var(--rag-gold-400); flex-shrink: 0; margin-top: 2px; } .rag-footer__contact { font-style: normal; } .rag-footer__bottom { border-top: 1px solid color-mix(in srgb, #fff 9%, transparent); } .rag-footer__bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1.5rem 0; font-size: 0.85rem; color: var(--rag-on-dark-muted); } .rag-footer__legal { display: flex; gap: 1.3rem; flex-wrap: wrap; } .rag-footer__legal a { color: var(--rag-on-dark-muted); } .rag-footer__legal a:hover { color: var(--rag-gold-400); } .rag-dot { opacity: 0.5; margin: 0 0.3em; } /* ------------------------------------------------------------------------- 17. Page hero, body, prose ---------------------------------------------------------------------- */ .rag-pagehero { padding: clamp(2.4rem, 5vw, 4rem) 0 clamp(1.5rem, 3vw, 2.4rem); } .rag-pagehero.rag-section--dark { padding: clamp(3rem, 6vw, 5rem) 0; } .rag-pagehero__title { font-size: var(--rag-step-4); max-width: 22ch; } .rag-pagehero__lead { margin-top: 1rem; font-size: var(--rag-step-1); color: var(--rag-muted); max-width: 52ch; } .rag-section--dark .rag-pagehero__lead { color: var(--rag-on-dark-muted); } .rag-pagebody { padding: 0 0 var(--rag-space-6); } .rag-pagehero + .rag-pagebody { padding-top: var(--rag-space-3); } .rag-prose { max-width: 70ch; } .rag-prose > * + * { margin-top: 1.15em; } .rag-prose h2 { font-size: var(--rag-step-2); margin-top: 2.2em; } .rag-prose h3 { font-size: var(--rag-step-1); margin-top: 1.8em; } .rag-prose p, .rag-prose li { color: var(--rag-ink-700); font-size: var(--rag-step-1); line-height: 1.7; } .rag-prose ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; } .rag-prose ul li { position: relative; padding-left: 1.7rem; } .rag-prose ul li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 9px; height: 9px; border-radius: 50%; background: var(--rag-gold-500); } .rag-prose ol { padding-left: 1.3rem; list-style: decimal; } .rag-prose a { color: var(--rag-forest-700); text-decoration: underline; text-decoration-color: var(--rag-gold-400); text-underline-offset: 3px; } .rag-prose blockquote { border-left: 3px solid var(--rag-gold-500); padding-left: 1.4rem; font-family: var(--rag-font-display); font-style: italic; font-size: var(--rag-step-2); color: var(--rag-forest-800); } /* Plugin notes must stay small inside prose — `.rag-prose p` would otherwise scale them up to body size (same trap as the gold list bullets). */ .rag-prose p.rag-disclaimer { font-size: 0.7rem; line-height: 1.45; color: var(--rag-muted); } .rag-prose p.rag-visit { font-size: 0.82rem; line-height: 1.5; color: var(--rag-muted); } .rag-prose p.rag-calc__note, .rag-prose p.rag-prices__note, .rag-prose p.rag-sellform__items-note, .rag-prose p.rag-extras__note { font-size: 0.8rem; line-height: 1.5; color: var(--rag-muted); } .rag-prose img { border-radius: var(--rag-radius); } /* ------------------------------------------------------------------------- 18. Breadcrumbs ---------------------------------------------------------------------- */ .rag-breadcrumbs { margin-bottom: 1.1rem; } .rag-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem; font-size: 0.85rem; color: var(--rag-muted); } .rag-breadcrumbs li { display: inline-flex; align-items: center; gap: 0.2rem; } .rag-breadcrumbs a { color: var(--rag-muted); } .rag-breadcrumbs a:hover { color: var(--rag-forest-700); } .rag-breadcrumbs [aria-current="page"] { color: var(--rag-forest-800); font-weight: 600; } .rag-breadcrumbs__sep { display: inline-flex; opacity: 0.5; } .rag-section--dark .rag-breadcrumbs ol, .rag-section--dark .rag-breadcrumbs a { color: var(--rag-on-dark-muted); } .rag-section--dark .rag-breadcrumbs [aria-current="page"] { color: var(--rag-gold-400); } /* ------------------------------------------------------------------------- 19. Blog grid ---------------------------------------------------------------------- */ .rag-postgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; } .rag-postcard { background: var(--rag-surface); border: 1px solid var(--rag-border); border-radius: var(--rag-radius); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.3s var(--rag-ease), box-shadow 0.3s var(--rag-ease); } .rag-postcard:hover { transform: translateY(-5px); box-shadow: var(--rag-shadow-lg); } .rag-postcard__media { aspect-ratio: 16 / 11; background: var(--rag-cream-100); overflow: hidden; } .rag-postcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--rag-ease); } .rag-postcard:hover .rag-postcard__media img { transform: scale(1.05); } .rag-postcard__placeholder { display: grid; place-items: center; height: 100%; color: var(--rag-leaf-400); background: linear-gradient(135deg, var(--rag-cream-100), var(--rag-sand-200)); } .rag-postcard__body { padding: 1.4rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; } .rag-postcard__meta { font-size: 0.8rem; color: var(--rag-muted); text-transform: uppercase; letter-spacing: 0.08em; } .rag-postcard__title { font-size: var(--rag-step-1); } .rag-postcard__title a { color: var(--rag-forest-900); } .rag-postcard__title a:hover { color: var(--rag-gold-700); } .rag-postcard__excerpt { color: var(--rag-muted); font-size: 0.95rem; } .rag-postcard__body .rag-link-arrow { margin-top: auto; font-size: 0.9rem; } .rag-empty { color: var(--rag-muted); font-size: var(--rag-step-1); } /* Pagination (WP + Woo) */ .pagination .nav-links, .woocommerce-pagination ul { display: flex; gap: 0.45rem; justify-content: center; align-items: center; margin-top: var(--rag-space-4); flex-wrap: wrap; list-style: none; padding: 0; } .page-numbers { display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding: 0 0.7rem; border-radius: var(--rag-radius-pill); border: 1px solid var(--rag-border); color: var(--rag-forest-800); font-weight: 600; background: var(--rag-surface); font-variant-numeric: tabular-nums; transition: transform .15s ease, border-color .15s ease, background-color .15s ease, color .15s ease; } .woocommerce-pagination ul li { border: 0 !important; margin: 0 !important; } .page-numbers.current { background: var(--rag-forest-700) !important; color: #fff !important; border-color: var(--rag-forest-700) !important; box-shadow: 0 10px 22px -12px rgba(21, 82, 52, 0.65); } .page-numbers:hover:not(.current) { border-color: var(--rag-gold-500); color: var(--rag-gold-700); background: color-mix(in srgb, var(--rag-gold-500) 9%, var(--rag-surface)); transform: translateY(-1px); } .page-numbers.dots { border-color: transparent; background: transparent; box-shadow: none; } .page-numbers.next, .page-numbers.prev { padding: 0 0.95rem; } /* ------------------------------------------------------------------------- 20. Single post ---------------------------------------------------------------------- */ .rag-single__meta { margin-top: 0.8rem; color: var(--rag-muted); font-size: 0.9rem; } .rag-single__cover { margin: var(--rag-space-3) auto var(--rag-space-4); } .rag-single__cover img { width: 100%; border-radius: var(--rag-radius-lg); aspect-ratio: 16 / 9; object-fit: cover; } .rag-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--rag-space-3); } .rag-tags a { display: inline-block; padding: 0.4em 0.9em; border-radius: var(--rag-radius-pill); background: var(--rag-cream-100); font-size: 0.85rem; color: var(--rag-forest-700); } .rag-postnav { display: flex; justify-content: space-between; gap: 1rem; padding: var(--rag-space-4) var(--rag-gutter); border-top: 1px solid var(--rag-border); margin-top: var(--rag-space-4); } .rag-postnav a { font-weight: 600; } /* ------------------------------------------------------------------------- 21. 404 ---------------------------------------------------------------------- */ .rag-404__inner { max-width: 44rem; } .rag-404__search { margin: 2rem 0 1.5rem; max-width: 28rem; } .rag-404__links { display: flex; flex-wrap: wrap; gap: 0.8rem; } /* ------------------------------------------------------------------------- 22. Search form ---------------------------------------------------------------------- */ .rag-searchform { position: relative; display: flex; align-items: center; gap: 0.5rem; } .rag-searchform__icon { position: absolute; left: 1rem; color: var(--rag-muted); pointer-events: none; display: inline-flex; } .rag-searchform__input { flex: 1; padding: 0.85rem 1rem 0.85rem 2.9rem; border-radius: var(--rag-radius-pill); border: 1.5px solid var(--rag-border-strong); background: var(--rag-surface); color: var(--rag-text); transition: border-color 0.2s, box-shadow 0.2s; } .rag-searchform__input:focus { outline: none; border-color: var(--rag-gold-500); box-shadow: 0 0 0 4px color-mix(in srgb, var(--rag-gold-500) 18%, transparent); } .rag-section--dark .rag-searchform__input { background: color-mix(in srgb, #fff 8%, transparent); border-color: color-mix(in srgb, #fff 22%, transparent); color: #fff; } /* ------------------------------------------------------------------------- 23. Sell page ---------------------------------------------------------------------- */ .rag-sellpage__body { padding: var(--rag-space-5) 0 var(--rag-space-6); } .rag-sellpage__content { max-width: 62rem; margin-inline: auto; } .rag-sellpage__content.rag-prose { max-width: 62rem; } .rag-sellpage__content > * + * { margin-top: 1.5rem; } .rag-sellpage__content .rag-calc, .rag-sellpage__content .rag-sellform { margin-top: 2.2rem; } /* Contact page */ .rag-contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 3.5rem); align-items: start; } .rag-contact__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.6rem; } .rag-contact__card { background: var(--rag-surface); border: 1px solid var(--rag-border); border-radius: var(--rag-radius); padding: 1.3rem; display: flex; flex-direction: column; gap: 0.3rem; } .rag-contact__card--hours { grid-column: 1 / -1; } .rag-contact__icon { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: var(--rag-radius-sm); background: linear-gradient(135deg, color-mix(in srgb, var(--rag-leaf-500) 16%, transparent), color-mix(in srgb, var(--rag-gold-500) 16%, transparent)); color: var(--rag-forest-700); margin-bottom: 0.4rem; } .rag-contact__label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--rag-muted); } .rag-contact__value { font-family: var(--rag-font-display); font-size: 1.2rem; color: var(--rag-forest-800); } .rag-contact__value:hover { color: var(--rag-gold-700); } .rag-contact__people { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; margin-top: 0.2rem; } .rag-contact__people li { display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem; } .rag-contact__person-name { color: var(--rag-ink-700); font-weight: 500; } .rag-contact__people .rag-contact__value { font-size: 1.05rem; } .rag-contact__hours { display: flex; flex-direction: column; margin-top: 0.3rem; width: 100%; } .rag-contact__hours li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; border-bottom: 1px solid var(--rag-border); } .rag-contact__hours li:last-child { border-bottom: 0; } .rag-contact__cta { display: flex; gap: 0.8rem; margin-top: 1.7rem; flex-wrap: wrap; } .rag-contact__map { border-radius: var(--rag-radius-lg); overflow: hidden; box-shadow: var(--rag-shadow); border: 1px solid var(--rag-border); min-height: 460px; height: 100%; } .rag-contact__map iframe { width: 100%; height: 100%; min-height: 460px; border: 0; display: block; filter: grayscale(0.2) contrast(1.02); } @media (max-width: 900px) { .rag-contact__grid { grid-template-columns: 1fr; } .rag-contact__map { min-height: 320px; } } @media (max-width: 520px) { .rag-contact__cards { grid-template-columns: 1fr; } } /* ------------------------------------------------------------------------- 24. WooCommerce general (cart, checkout, account, single, notices) ---------------------------------------------------------------------- */ .woocommerce .rag-shop, .woocommerce-page .rag-shop { padding-top: var(--rag-space-4); } .woocommerce-products-header { padding-top: var(--rag-space-4); } .woocommerce-products-header__title.page-title { font-size: var(--rag-step-4); margin-bottom: 0.5rem; } .term-description, .woocommerce-products-header .term-description { color: var(--rag-muted); max-width: 60ch; margin-bottom: 1.5rem; } .woocommerce-result-count { color: var(--rag-muted); font-size: 0.9rem; } .woocommerce .woocommerce-ordering select, .rag-shop select { padding: 0.6em 2.4em 0.6em 1em; border-radius: var(--rag-radius-pill); border: 1.5px solid var(--rag-border-strong); background-color: var(--rag-surface); } .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews { border-radius: var(--rag-radius); border: 1px solid var(--rag-border); border-top: 3px solid var(--rag-forest-700); background: var(--rag-surface); padding: 1rem 1.3rem; box-shadow: var(--rag-shadow-sm); list-style: none; } .woocommerce-message { border-top-color: var(--rag-leaf-500); } .woocommerce-error { border-top-color: #c0573f; } .woocommerce-info { border-top-color: var(--rag-gold-500); } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .rag-field input, .rag-field textarea, .rag-field select { padding: 0.8rem 1rem; border-radius: var(--rag-radius-sm); border: 1.5px solid var(--rag-border-strong); background: var(--rag-surface); width: 100%; transition: border-color 0.2s, box-shadow 0.2s; } .woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus, .rag-field input:focus, .rag-field textarea:focus { outline: none; border-color: var(--rag-gold-500); box-shadow: 0 0 0 4px color-mix(in srgb, var(--rag-gold-500) 16%, transparent); } /* Single product */ .single-product div.product { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; } .single-product div.product .woocommerce-product-gallery { margin: 0; } .single-product div.product .woocommerce-product-gallery__image img { border-radius: var(--rag-radius-lg); } .single-product div.product .product_title { font-size: var(--rag-step-3); } .single-product div.product p.price, .single-product div.product .price { color: var(--rag-gold-700); font-size: var(--rag-step-2); font-weight: 600; font-variant-numeric: tabular-nums; } .single-product .woocommerce-tabs { grid-column: 1 / -1; margin-top: var(--rag-space-4); } .single-product .related.products, .single-product .upsells.products { grid-column: 1 / -1; margin-top: var(--rag-space-5); } /* Beskrivelsen paa varesiden. Den globale nulstilling (`* { margin: 0 }`) rammer ogsaa afsnittene her, og uden luft imellem loeber en lang beskrivelse sammen til én grå blok. Samtidig spaender fanen over hele gitteret, saa linjerne blev over 150 tegn lange - oejet mister linjen paa vej tilbage. Maalet er sat efter laeselig linjelaengde, ikke efter spaltens bredde. */ /* Beskrivelsen fylder bredden. En laengdegraense paa 68 tegn er god raadgivning for loebende brodtekst, men her staar teksten i sin egen faneblad-boks under varen, hvor den halve bredde blot efterlader et tomt felt til hoejre. */ .woocommerce-Tabs-panel--description { max-width: none; } .woocommerce-Tabs-panel--description > h2 { margin-bottom: 0.9rem; } .woocommerce-Tabs-panel--description p { margin-bottom: 1.05em; line-height: 1.7; } .woocommerce-Tabs-panel--description p:last-child { margin-bottom: 0; } .woocommerce-Tabs-panel--description ul, .woocommerce-Tabs-panel--description ol { margin: 0 0 1.05em 1.2rem; display: block; } .woocommerce-Tabs-panel--description li { margin-bottom: 0.35em; } .woocommerce-Tabs-panel--description h3, .woocommerce-Tabs-panel--description h4 { margin: 1.6em 0 0.5em; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom-color: var(--rag-gold-500); } .stock.in-stock { color: var(--rag-leaf-500); font-weight: 600; } /* WooCommerce Blocks buttons (cart / checkout) — brand them with clear contrast */ .wc-block-components-button:not(.is-link), .wp-block-woocommerce-proceed-to-checkout-block a.wc-block-cart__submit-button, .wc-block-cart__submit-button { background: linear-gradient(115deg, var(--rag-gold-500), var(--rag-gold-600)) !important; color: var(--rag-forest-950) !important; border: 0 !important; border-radius: var(--rag-radius-pill) !important; font-weight: 700 !important; box-shadow: var(--rag-shadow-gold); transition: transform 0.2s var(--rag-ease), box-shadow 0.2s var(--rag-ease); } .wc-block-components-button:not(.is-link):hover { transform: translateY(-2px); } .wc-block-components-button:not(.is-link) .wc-block-components-button__text { color: var(--rag-forest-950) !important; } .rag-cart-count.is-empty { display: none; } /* Single product refinements */ .single-product div.product .product_title { font-size: var(--rag-step-2); line-height: 1.12; } .single-product div.product .summary > * { margin-bottom: 1rem; } .single-product div.product .woocommerce-product-details__short-description { color: var(--rag-ink-700); font-size: var(--rag-step-1); } .single-product div.product .quantity input.qty { padding: 0.7rem 0.5rem; border: 1.5px solid var(--rag-border-strong); border-radius: var(--rag-radius-sm); width: 4.6rem; } .single-product div.product .product_meta { font-size: 0.9rem; color: var(--rag-muted); border-top: 1px solid var(--rag-border); padding-top: 1.1rem; } .single-product div.product .product_meta > span { display: block; margin-bottom: 0.3rem; } .rag-product-trust { display: flex; flex-direction: column; gap: 0.7rem; padding: 1.1rem 1.2rem; background: var(--rag-cream-100); border-radius: var(--rag-radius); margin: 0.4rem 0 1.2rem; } .rag-product-trust li { display: flex; align-items: center; gap: 0.7rem; font-weight: 500; color: var(--rag-ink-700); } .rag-product-trust .rag-icon { color: var(--rag-forest-600); flex-shrink: 0; } .rag-product-sell { display: flex; gap: 0.9rem; align-items: flex-start; padding: 1.1rem 1.2rem; border: 1px solid color-mix(in srgb, var(--rag-gold-500) 40%, transparent); border-radius: var(--rag-radius); background: color-mix(in srgb, var(--rag-gold-500) 7%, transparent); } .rag-product-sell__icon { color: var(--rag-gold-700); margin-top: 2px; } .rag-product-sell strong { font-family: var(--rag-font-display); font-size: 1.15rem; color: var(--rag-forest-900); display: block; } .rag-product-sell p { color: var(--rag-ink-700); font-size: 0.92rem; margin: 0.15rem 0 0.5rem; } .woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0 0 0.6rem; display: flex; flex-wrap: wrap; gap: 0.5rem; } .woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; } .woocommerce div.product .woocommerce-tabs ul.tabs li { border-radius: var(--rag-radius-pill); background: var(--rag-cream-100); border: 1px solid var(--rag-border); margin: 0; padding: 0; } .woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--rag-surface); border-color: var(--rag-gold-500); } .woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--rag-ink-700); font-weight: 600; padding: 0.5rem 1.1rem; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--rag-forest-800); } .single-product .related.products > h2, .single-product .upsells.products > h2 { font-size: var(--rag-step-2); margin-bottom: 1.2rem; } /* ------------------------------------------------------------------------- 25. Reveal animation & utilities ---------------------------------------------------------------------- */ html.js .rag-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--rag-ease), transform 0.7s var(--rag-ease); } html.js .rag-reveal.is-visible { opacity: 1; transform: none; } /* ------------------------------------------------------------------------- 26. Responsive ---------------------------------------------------------------------- */ @media (max-width: 1080px) { .rag-footer__main { grid-template-columns: 1fr 1fr; gap: 2rem; } .rag-footer__brand { grid-column: 1 / -1; } } @media (max-width: 960px) { :root { --rag-header-h: 66px; } .rag-nav { display: none; } .rag-navtoggle { display: grid; } .rag-header__cta span { display: none; } .rag-header__cta { padding: 0.7em; } .rag-hero__inner { grid-template-columns: 1fr; } .rag-hero__panel { max-width: 460px; } .rag-usps__grid { grid-template-columns: repeat(2, 1fr); } .rag-steps { grid-template-columns: 1fr; } .rag-about__inner { grid-template-columns: 1fr; } .rag-about__visual { max-width: 460px; aspect-ratio: 16 / 12; } .rag-sellpage__grid { grid-template-columns: 1fr; } .rag-prices--aside.is-sticky { position: static; } .rag-shop ul.products { --rag-cols: 2; } .rag-postgrid { grid-template-columns: repeat(2, 1fr); } .single-product div.product { grid-template-columns: 1fr; } /* In one column a sticky gallery pins itself over the title, price and add-to-cart as you scroll — only keep it sticky beside the summary. */ .single-product div.product .woocommerce-product-gallery, .single-product div.product div.images { position: static !important; top: auto !important; } } @media (max-width: 760px) { .rag-topbar__msg { display: none; } .rag-topbar__phone { margin-left: 0; } .rag-sectionhead--split { flex-direction: column; align-items: flex-start; gap: 1rem; } } @media (max-width: 560px) { ul.products { --rag-cols: 2 !important; } .rag-shop ul.products, ul.products { grid-template-columns: repeat(2, 1fr); } .rag-usps__grid { grid-template-columns: 1fr; } .rag-postgrid { grid-template-columns: 1fr; } .rag-header__cta { display: none; } .rag-hero__chips { gap: 0.8rem 1.2rem; } } /* ------------------------------------------------------------------------- 27. Reduced motion ---------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } html.js .rag-reveal { opacity: 1; transform: none; } .rag-ticker__track { animation: none; } } /* ------------------------------------------------------------------------- 28. People photos, both-phone display, price columns, product page ---------------------------------------------------------------------- */ /* Real portrait variant of the avatar */ .rag-avatar--photo { display: block; object-fit: cover; box-shadow: none; border: 2px solid color-mix(in srgb, var(--rag-gold-500) 55%, transparent); background: var(--rag-cream-100); } /* Contact "people" heading + Om os team section */ .rag-contact__people-title { font-family: var(--rag-font-display); color: var(--rag-forest-900); font-size: var(--rag-step-1); margin: 1.6rem 0 0.4rem; } .rag-team-section { margin-top: var(--rag-space-5); } .rag-team-section__title { font-family: var(--rag-font-display); color: var(--rag-forest-900); font-size: var(--rag-step-2); margin: 0.25rem 0 0; } /* Kontakt: contact people shown in the column where the map used to be */ .rag-contact__people-col .rag-contact__people-title { margin-top: 0; } .rag-contact__people-col .rag-team { grid-template-columns: 1fr; margin-top: 1rem; } .rag-contact__people-col .rag-team__member { padding: 1.2rem 1.3rem; } /* Both phone numbers, wherever a phone is shown */ .rag-phones { display: inline-flex; } .rag-phones__item { display: inline-flex; align-items: center; gap: 0.4rem; color: inherit; } .rag-phones__item:hover { color: var(--rag-gold-700); } .rag-phones--inline { flex-direction: row; align-items: center; gap: 0.55rem; flex-wrap: wrap; } .rag-phones--inline .rag-phones__item:not(:first-child)::before { content: "\00B7"; margin-right: 0.55rem; opacity: 0.55; } .rag-phones--stack { flex-direction: column; align-items: flex-start; gap: 0.5rem; } .rag-phones--stack .rag-phones__name { font-weight: 600; } .rag-phones--stack .rag-phones__num { opacity: 0.88; margin-left: 0.1rem; } /* Footer: name above number per person so nothing wraps mid-word on mobile */ .rag-footer__phones { gap: 0.7rem; } .rag-footer__phones .rag-phones__item { flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.3; } .rag-footer__phones .rag-phones__name, .rag-footer__phones .rag-phones__num { white-space: nowrap; margin-left: 0; } /* ------------------------------------------------------------------------- 29. Cookie consent banner ---------------------------------------------------------------------- */ .rag-cookiebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200; padding: 0.9rem; } .rag-cookiebar[hidden] { display: none; } .rag-cookiebar [hidden] { display: none !important; } .rag-cookiebar__inner { max-width: 1080px; margin: 0 auto; background: var(--rag-surface); border: 1px solid var(--rag-border); border-radius: var(--rag-radius-lg); box-shadow: 0 26px 60px -26px rgba(11, 36, 25, 0.55); padding: 1.3rem 1.5rem; display: grid; grid-template-columns: 1fr auto; gap: 1rem 1.8rem; align-items: center; } .rag-cookiebar__title { font-family: var(--rag-font-display); font-size: 1.2rem; color: var(--rag-forest-900); margin: 0 0 0.3rem; } .rag-cookiebar__text { margin: 0; color: var(--rag-ink-700); font-size: 0.92rem; line-height: 1.55; } .rag-cookiebar__text a { color: var(--rag-forest-700); font-weight: 600; } .rag-cookiebar__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: flex-end; } .rag-cookiebar__actions .rag-btn { white-space: nowrap; } .rag-cookiebar__options { grid-column: 1 / -1; display: grid; gap: 0.8rem; margin-top: 0.4rem; padding-top: 1rem; border-top: 1px solid var(--rag-border); } .rag-cookiebar__option { display: flex; gap: 0.7rem; align-items: flex-start; } .rag-cookiebar__option input { margin-top: 0.2rem; width: 18px; height: 18px; accent-color: var(--rag-forest-700); flex-shrink: 0; } .rag-cookiebar__option strong { display: block; color: var(--rag-forest-900); } .rag-cookiebar__option-desc { font-size: 0.85rem; color: var(--rag-muted); } .rag-footer__cookie { margin-left: 0.2rem; } /* Footer brand: the header logo rendered as a light (white) version on the dark footer */ .rag-footer__logo { display: inline-block; line-height: 0; } .rag-footer__logo .custom-logo-link { display: inline-flex; } .rag-footer__logo .custom-logo { filter: brightness(0) invert(1); opacity: 0.92; } /* ------------------------------------------------------------------------- 30. About page — editorial layout ---------------------------------------------------------------------- */ .rag-aboutpage__hero { position: relative; overflow: hidden; padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(2.6rem, 5vw, 4.5rem); } .rag-aboutpage__hero-inner { position: relative; z-index: 1; max-width: 54rem; } .rag-aboutpage__hero .rag-breadcrumbs { margin-bottom: 1.3rem; } .rag-aboutpage__hero .rag-breadcrumbs, .rag-aboutpage__hero .rag-breadcrumbs a { color: rgba(255, 255, 255, 0.72); } .rag-aboutpage__hero .rag-breadcrumbs a:hover { color: var(--rag-gold-400); } .rag-aboutpage__hero .rag-breadcrumbs [aria-current="page"] { color: #fff; } .rag-aboutpage__title { font-family: var(--rag-font-display); color: #fff; font-size: clamp(2.6rem, 1.8rem + 3.4vw, 4.4rem); line-height: 1.04; margin: 0.6rem 0 0; } .rag-aboutpage__lead { color: rgba(255, 255, 255, 0.82); font-size: var(--rag-step-1); line-height: 1.6; margin: 1.2rem 0 0; max-width: 42rem; } .rag-aboutpage__body { padding: clamp(2.8rem, 6vw, 5rem) 0; } .rag-prose--about { max-width: 64ch; margin-inline: auto; counter-reset: rag-sec; } .rag-prose--about > p:first-of-type { font-size: clamp(1.18rem, 1rem + 0.6vw, 1.45rem); line-height: 1.65; color: var(--rag-forest-900); } .rag-prose--about h2 { counter-increment: rag-sec; margin-top: 2.8rem; padding-top: 2rem; border-top: 1px solid var(--rag-border); } .rag-prose--about h2::before { content: "0" counter(rag-sec); display: block; font-family: var(--rag-font-display); font-size: 1rem; letter-spacing: 0.18em; color: var(--rag-gold-600); margin-bottom: 0.5rem; } .rag-aboutpage__stats { position: relative; overflow: hidden; padding: clamp(2.6rem, 5vw, 4rem) 0; } .rag-aboutpage__stats-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; max-width: 58rem; margin: 0 auto; list-style: none; padding: 0; text-align: center; } .rag-aboutpage__stat-num { display: block; font-family: var(--rag-font-display); font-size: clamp(2.2rem, 1.5rem + 2vw, 3.1rem); color: var(--rag-gold-400); line-height: 1.05; } .rag-aboutpage__stat-label { display: block; margin-top: 0.45rem; color: rgba(255, 255, 255, 0.82); font-size: 0.98rem; letter-spacing: 0.01em; } .rag-aboutpage__team { padding: clamp(2.8rem, 6vw, 5rem) 0; } .rag-aboutpage__team-head { max-width: 42rem; } .rag-aboutpage__team-title { font-family: var(--rag-font-display); color: var(--rag-forest-900); font-size: var(--rag-step-2); margin: 0.3rem 0 0.5rem; } .rag-aboutpage__team-lead { color: var(--rag-muted); line-height: 1.6; } .rag-aboutpage__team .rag-team { max-width: 46rem; margin-top: var(--rag-space-4); } @media (max-width: 680px) { .rag-aboutpage__stats-grid { grid-template-columns: 1fr; gap: 1.6rem; } } .rag-cookiebar-reopen { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .rag-cookiebar-reopen:hover { color: var(--rag-gold-600); } @media (max-width: 720px) { .rag-cookiebar__inner { grid-template-columns: 1fr; padding: 1.1rem 1.2rem; } .rag-cookiebar__actions { justify-content: stretch; } .rag-cookiebar__actions .rag-btn { flex: 1 1 auto; justify-content: center; } } /* Prices laid out in columns (one block per metal) */ .rag-prices--full { max-width: 840px !important; margin-left: auto; margin-right: auto; } .rag-prices--full .rag-prices__list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.2rem 2.6rem; align-items: start; } /* The extras row sits above both metal columns, not inside one of them. */ .rag-prices--full .rag-prices__block--extras { grid-column: 1 / -1; padding-right: 0 !important; border-right: 0 !important; padding-left: 0 !important; margin-bottom: 0.8rem; } .rag-prices__block { break-inside: avoid; } .rag-prices--full .rag-prices__block .rag-prices__group { margin-top: 0.4rem; } @media (max-width: 600px) { .rag-prices--full .rag-prices__list { grid-template-columns: 1fr; } } /* Single product: fill the gallery column, frame it, keep it in view */ .single-product div.product .woocommerce-product-gallery, .single-product div.product div.images { width: 100% !important; float: none !important; margin: 0 !important; position: sticky; top: 92px; } .single-product div.product .summary, .single-product div.product .entry-summary { width: 100% !important; float: none !important; } .single-product .woocommerce-product-gallery { border: 1px solid var(--rag-border); border-radius: calc(var(--rag-radius-lg) + 8px); padding: 14px; background: var(--rag-surface); box-shadow: 0 24px 60px -34px rgba(21, 82, 52, 0.5); } /* Hovedbilledet i et fast kvadrat. Brugte smykker fotograferes i alle mulige formater - et hoejt vedhaeng gjorde spalten dobbelt saa lang som teksten ved siden af, og et bredt armbaand efterlod et halvtomt felt. Et kvadrat med contain viser hele varen uden at beskaere den, og siden staar roligt uanset hvad der bliver lagt op. */ .single-product .woocommerce-product-gallery__image { display: block; } .single-product .woocommerce-product-gallery__image img { width: 100% !important; aspect-ratio: 1; height: auto; object-fit: contain; display: block; border-radius: var(--rag-radius-lg); background: var(--rag-cream-100); } /* Miniaturerne som et gitter, ikke en raekke. Fire billeder paa en raekke blev smalle og skaeve; et gitter giver dem samme stoerrelse og bryder paent. */ .single-product .flex-control-thumbs { display: grid; /* Store nok til at man kan se hvad man vaelger. Paa en telefon giver 96 px tre paa raekken og omkring hundrede pixels hver - et smykke er til at kende fra et andet i den stoerrelse. 68 px var teknisk set tappbart, men man kunne ikke se forskel paa to vedhaeng. */ grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 0.55rem; margin: 0.9rem 0 0; padding: 0; list-style: none; } /* Paa desktop er spalten smallere end skaermen, og der er raad til flere. */ @media (min-width: 861px) { .single-product .flex-control-thumbs { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); } } /* ol OG ul. Flexslider bygger miniaturelisten som et
    , og en selektor paa ul rammer derfor ingenting - det var derfor miniaturerne blev 24 px og ikke de 72 der stod her foer. Woos egen regel ".woocommerce div.product div.images .flex-control-thumbs li { width: 25% }" har fire klasser, saa formen matches for at vinde uden et !important. */ .single-product div.product div.images ol.flex-control-thumbs li, .single-product div.product div.images ul.flex-control-thumbs li { width: auto; float: none; margin: 0; } .single-product div.product div.images ol.flex-control-thumbs li img, .single-product div.product div.images ul.flex-control-thumbs li img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--rag-cream-100); border-radius: var(--rag-radius-sm); cursor: pointer; opacity: 0.55; transition: opacity .15s ease, box-shadow .15s ease; } .single-product div.product div.images ol.flex-control-thumbs li img.flex-active, .single-product div.product div.images ol.flex-control-thumbs li img:hover, .single-product div.product div.images ul.flex-control-thumbs li img.flex-active, .single-product div.product div.images ul.flex-control-thumbs li img:hover { opacity: 1; /* Indvendig ramme frem for outline: en outline lagde sig uden om miniaturen og skubbede naboen, saa raekken hoppede ved klik. */ box-shadow: inset 0 0 0 2px var(--rag-gold-500); } @media (max-width: 860px) { .single-product div.product .woocommerce-product-gallery, .single-product div.product div.images { position: static; } } /* ------------------------------------------------------------------------- 27. Kurv & kasse Kurven bruger temaets egne skabeloner (woocommerce/cart/), fordi WooCommerces standard er en tabel med seks kolonner. En tabel tvinger hver linje ned i det samme stive gitter, og en celle der spænder over kolonner kan ikke samtidig være flex — det var derfor layoutet knækkede. ---------------------------------------------------------------------- */ /* ---- Ud af prosa ---- */ .woocommerce-cart .rag-prose, .woocommerce-checkout .rag-prose, .woocommerce-account .rag-prose { max-width: none; } .woocommerce-cart .rag-prose p, .woocommerce-cart .rag-prose li, .woocommerce-checkout .rag-prose p, .woocommerce-checkout .rag-prose li, .woocommerce-account .rag-prose p, .woocommerce-account .rag-prose li { font-size: var(--rag-step-0); line-height: 1.6; } .woocommerce-cart .rag-prose ul li::before, .woocommerce-checkout .rag-prose ul li::before, .woocommerce-account .rag-prose ul li::before { content: none; } .woocommerce-cart .rag-prose ul, .woocommerce-checkout .rag-prose ul, .woocommerce-account .rag-prose ul { padding-left: 0; list-style: none; margin: 0; } .woocommerce-cart .rag-prose ul li, .woocommerce-checkout .rag-prose ul li, .woocommerce-account .rag-prose ul li { padding-left: 0; } .woocommerce-cart .rag-pagehero__title, .woocommerce-checkout .rag-pagehero__title { font-size: var(--rag-step-3); } .woocommerce-cart .rag-pagehero, .woocommerce-checkout .rag-pagehero { padding-bottom: 0.4rem; } /* ---- Kurvens to spalter ---- */ .woocommerce-cart .woocommerce { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.4rem 2rem; } .woocommerce-cart .woocommerce-notices-wrapper { flex: 1 1 100%; } /* Varelisten vil gerne have 30rem, opsummeringen 20rem. Er der ikke plads til begge, ombryder opsummeringen af sig selv - uden et pixeltal der skal gaettes rigtigt. */ .woocommerce-cart form.rag-cart { flex: 1 1 30rem; min-width: 0; } .woocommerce-cart .rag-cart__back { flex: 1 1 100%; order: 3; } .woocommerce-cart .cart-collaterals { flex: 1 1 20rem; min-width: 0; max-width: 24rem; } /* Klaeber kun naar der faktisk er en spalte at klaebe i. */ @media (min-width: 62rem) { .woocommerce-cart .cart-collaterals { position: sticky; top: calc(var(--rag-header-h) + 16px); } } /* ---- Varelisten ---- */ .rag-cart { background: var(--rag-surface); border: 1px solid var(--rag-border); border-radius: var(--rag-radius-lg); overflow: hidden; } .rag-cart__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.4rem; border-bottom: 1px solid var(--rag-border); } .rag-cart__title { font-size: 1.15rem; margin: 0; } .rag-cart__count { font-size: 0.85rem; color: var(--rag-muted); font-variant-numeric: tabular-nums; } .rag-cart__items { margin: 0; padding: 0; list-style: none; } .rag-cart__item { display: grid; align-items: center; gap: 0.5rem 1rem; grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-areas: "billede info fjern" "billede antal beloeb"; padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--rag-border); } .rag-cart__items li:last-child .rag-cart__item, .rag-cart__item:last-child { border-bottom: 0; } .rag-cart__media { grid-area: billede; } .rag-cart__media img { width: 72px; height: 72px; object-fit: cover; display: block; border-radius: var(--rag-radius-sm); background: var(--rag-cream-100); } .rag-cart__info { grid-area: info; min-width: 0; } .rag-cart__name { font-weight: 600; line-height: 1.35; } .rag-cart__name a { color: var(--rag-forest-900); } .rag-cart__name a:hover { color: var(--rag-gold-700); } .rag-cart__unit { font-size: 0.85rem; color: var(--rag-muted); margin-top: 0.2rem; font-variant-numeric: tabular-nums; } .rag-cart__unit span { opacity: 0.75; } .rag-cart__qty { grid-area: antal; } .rag-cart__qty .quantity { display: inline-flex; } .rag-cart__qty input.qty { width: 4.2rem; padding: 0.5rem 0.4rem; text-align: center; font-variant-numeric: tabular-nums; border: 1.5px solid var(--rag-border-strong); border-radius: var(--rag-radius-pill); background: var(--rag-surface); } .rag-cart__line { grid-area: beloeb; text-align: right; font-weight: 700; color: var(--rag-gold-700); font-variant-numeric: tabular-nums; white-space: nowrap; } .rag-cart__remove { grid-area: fjern; text-align: right; } .rag-cart__remove a.remove { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--rag-muted) !important; background: transparent; font-size: 1.15rem; line-height: 1; transition: background 0.2s, color 0.2s; } .rag-cart__remove a.remove:hover { background: #c0573f; color: #fff !important; } /* Kupon og opdatér */ .rag-cart__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; padding: 1.1rem 1.4rem; background: var(--rag-cream-100); } /* Raekken bliver ALTID en raekke - den bryder selv naar der ikke er plads. Skiftede vi til kolonne paa smalle skaerme, ville flex-basis nedenfor pludselig betyde hoejde i stedet for bredde, og felterne ville vokse til kaempe ovaler. align-items: center holder dem paa deres egen hoejde. */ .rag-cart__coupon { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; flex: 1 1 16rem; min-width: 0; } .rag-cart__coupon input.input-text { flex: 1 1 9rem; min-width: 0; padding: 0.65rem 0.95rem; background: var(--rag-surface); border: 1.5px solid var(--rag-border-strong); border-radius: var(--rag-radius-pill); } .woocommerce .rag-cart__coupon-btn { flex: 0 1 auto; align-self: stretch; background: var(--rag-forest-700); color: #fff; border-radius: var(--rag-radius-pill); padding: 0.65em 1.3em; white-space: nowrap; } .rag-cart__update { margin-left: auto; background: none; border: 0; padding: 0.5rem 0.2rem; color: var(--rag-ink-700); font-weight: 600; font-size: 0.9rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .rag-cart__update:disabled { opacity: 0.4; cursor: default; text-decoration: none; } .rag-cart__update:not(:disabled):hover { color: var(--rag-forest-800); } .rag-cart__back { display: inline-block; margin-top: 0.9rem; font-weight: 600; color: var(--rag-forest-700); } .rag-cart__back:hover { color: var(--rag-gold-700); } /* ---- Opsummering (kurv og kasse) ---- */ .woocommerce .cart_totals, .woocommerce-checkout #order_review { background: var(--rag-surface); border: 1px solid var(--rag-border); border-radius: var(--rag-radius-lg); padding: 1.3rem 1.4rem; box-shadow: var(--rag-shadow-sm); } .woocommerce .cart_totals > h2 { font-size: 1.15rem; margin: 0 0 0.9rem; } .woocommerce .cart_totals table.shop_table, .woocommerce-checkout #order_review table.shop_table { width: 100%; border: 0; background: none; border-collapse: collapse; margin: 0; } .woocommerce .cart_totals table.shop_table th, .woocommerce .cart_totals table.shop_table td, .woocommerce-checkout #order_review table.shop_table th, .woocommerce-checkout #order_review table.shop_table td { background: none; padding: 0.65rem 0; border: 0; border-bottom: 1px solid var(--rag-border); font-size: var(--rag-step-0); font-weight: 500; color: var(--rag-ink-700); text-transform: none; letter-spacing: 0; vertical-align: top; text-align: left; } .woocommerce .cart_totals table.shop_table td, .woocommerce-checkout #order_review table.shop_table td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .woocommerce-checkout #order_review table.shop_table thead th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--rag-forest-700); font-weight: 700; } .woocommerce-checkout #order_review table.shop_table td.product-name { text-align: left; white-space: normal; } .woocommerce tr.order-total th, .woocommerce tr.order-total td { border-bottom: 0 !important; padding-top: 0.9rem !important; font-size: 1.1rem !important; font-weight: 700 !important; } .woocommerce tr.order-total th { color: var(--rag-forest-900); } .woocommerce tr.order-total td, .woocommerce tr.order-total td .amount { color: var(--rag-gold-700); } .woocommerce tr.order-total td .amount { color: var(--rag-gold-700); } /* Fragtrækken fylder hele bredden og stabler label over valgene. */ .woocommerce tr.rag-shipping td { text-align: left !important; white-space: normal !important; } .rag-shipping__label { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--rag-forest-700); margin-bottom: 0.5rem; } .rag-shipping__list { display: flex; flex-direction: column; gap: 0.1rem; margin: 0; padding: 0; list-style: none; } .rag-shipping__option { /* wrap, saa pakkeshop-panelet kan laegge sig under radioknap og etiket i stedet for at maase sig ind som et tredje element paa samme linje. */ display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.6rem; padding: 0.4rem 0; margin: 0; } .rag-shipping__option input { margin: 0.2rem 0 0; flex: 0 0 auto; accent-color: var(--rag-forest-700); } .rag-shipping__option label { margin: 0; cursor: pointer; line-height: 1.4; } .rag-shipping__option .amount { font-weight: 600; color: var(--rag-gold-700); } .rag-shipping__dest, .rag-shipping__note, .rag-shipping__details { font-size: 0.82rem; color: var(--rag-muted); margin: 0.6rem 0 0; } /* WooCommerces mobil-stylesheet stabler totaltabellen: hvert skjules, og labelen skrives i stedet fra td[data-title] via ::before. Fragtraekken er én celle med sin egen label og har ingen data-title, saa den arvede bare et loesrevet ": " plus hoejrestilling og nowrap - derfor stod overskriften i hoejre side og adressen blev klippet. Selektoren skal naevne table.shop_table_responsive for at veje tungere end WooCommerces egen. Gaelder baade kurv og kassens ordreoversigt. */ .woocommerce table.shop_table_responsive tr.rag-shipping td::before, .woocommerce-page table.shop_table_responsive tr.rag-shipping td::before { content: none !important; display: none !important; } .woocommerce table.shop_table_responsive tr.rag-shipping td, .woocommerce-page table.shop_table_responsive tr.rag-shipping td { text-align: left !important; white-space: normal !important; } .woocommerce .wc-proceed-to-checkout { padding: 1.1rem 0 0; margin: 0; } .woocommerce .wc-proceed-to-checkout a.checkout-button { display: block; width: 100%; text-align: center; margin: 0; } /* ---- Kasse ---- */ .woocommerce-checkout form.checkout.woocommerce-checkout { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.6rem 2rem; } .woocommerce-checkout #customer_details { flex: 1 1 28rem; min-width: 0; } /* Fejlbeskeder ved validering. Formularen er en flex-raekke, og WooCommerce haenger sin fejlgruppe ind som et almindeligt barn af den. Uden det her bliver beskeden et flex-element paa linje med kolonnerne: den lagde beslag paa den foerste plads, formularen blev maset sammen, og "Din ordre" endte som en smal strimmel ude i siden. Beskeden skal ligge over det hele - den handler om hele formularen. */ .woocommerce-checkout form.checkout > .woocommerce-NoticeGroup, .woocommerce-checkout form.checkout > .woocommerce-error, .woocommerce-checkout form.checkout > .woocommerce-message, .woocommerce-checkout form.checkout > .woocommerce-info { flex: 1 1 100%; order: -1; width: 100%; margin: 0; } .woocommerce-checkout #order_review_heading { flex: 1 1 100%; order: 2; } .woocommerce-checkout #order_review { flex: 1 1 20rem; min-width: 0; max-width: 24rem; order: 3; } .woocommerce-checkout #customer_details { display: flex; flex-direction: column; gap: 1.4rem; } .woocommerce-checkout #customer_details .col-1, .woocommerce-checkout #customer_details .col-2 { float: none; width: auto; } .woocommerce-checkout h3 { font-size: 1.15rem; margin: 0 0 1rem; } .woocommerce-checkout #order_review_heading { font-size: 1.15rem; margin: 0 0 0.9rem; } .woocommerce-checkout .woocommerce-billing-fields, .woocommerce-checkout .woocommerce-additional-fields, .woocommerce-checkout .woocommerce-shipping-fields { background: var(--rag-surface); border: 1px solid var(--rag-border); border-radius: var(--rag-radius-lg); padding: 1.3rem 1.4rem; } .woocommerce-checkout .woocommerce-billing-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; } .woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row { grid-column: 1 / -1; } .woocommerce-checkout .woocommerce-billing-fields__field-wrapper > #billing_first_name_field { grid-column: 1; } .woocommerce-checkout .woocommerce-billing-fields__field-wrapper > #billing_last_name_field { grid-column: 2; } .woocommerce-checkout .form-row { margin: 0 0 0.9rem; padding: 0; } .woocommerce-checkout .form-row label { display: block; font-size: 0.84rem; font-weight: 600; color: var(--rag-ink-700); margin-bottom: 0.3rem; } .woocommerce-checkout .form-row .required { color: #c0573f; text-decoration: none; } .woocommerce-checkout .select2-container--default .select2-selection--single { height: auto; padding: 0.5rem 0.5rem; border: 1.5px solid var(--rag-border-strong); border-radius: var(--rag-radius-sm); background: var(--rag-surface); } .woocommerce-checkout #payment { background: none; border-radius: 0; } .woocommerce-checkout #payment ul.payment_methods { padding: 0.4rem 0 0; border: 0; margin: 0; } .woocommerce-checkout #payment ul.payment_methods li { padding: 0.65rem 0; border-bottom: 1px solid var(--rag-border); list-style: none; } .woocommerce-checkout #payment ul.payment_methods li:last-child { border-bottom: 0; } .woocommerce-checkout #payment ul.payment_methods label { font-weight: 600; cursor: pointer; } .woocommerce-checkout #payment ul.payment_methods input[type="radio"] { accent-color: var(--rag-forest-700); margin-right: 0.5rem; } .woocommerce-checkout #payment div.payment_box { background: var(--rag-cream-100); border-radius: var(--rag-radius-sm); padding: 0.85rem 1rem; margin: 0.5rem 0 0; font-size: 0.88rem; color: var(--rag-ink-700); } .woocommerce-checkout #payment div.payment_box::before { display: none; } .woocommerce-checkout #place_order { width: 100%; margin-top: 1rem; } .woocommerce-checkout .woocommerce-privacy-policy-text { font-size: 0.82rem; color: var(--rag-muted); } /* Klaeber kun naar ordrekortet faktisk staar i sin egen spalte. */ @media (min-width: 62rem) { .woocommerce-checkout #order_review { position: sticky; top: calc(var(--rag-header-h) + 16px); } .woocommerce-checkout #order_review_heading { flex: 0 1 auto; order: 2; } } /* ---- Beskeder ---- */ .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; border: 1px solid var(--rag-border); border-top: 1px solid var(--rag-border); border-radius: var(--rag-radius); background: var(--rag-surface); padding: 0.9rem 1.2rem; box-shadow: none; } .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { position: static; top: auto; left: auto; margin: 0; flex: 0 0 auto; font-size: 1.05rem; line-height: 1; } .woocommerce-message::before { color: var(--rag-leaf-500); } .woocommerce-info::before { color: var(--rag-gold-700); } .woocommerce-error::before { color: #c0573f; } /* Knappen i en besked er sekundær — den må ikke konkurrere med "Tilføj til kurv". */ .woocommerce .woocommerce-message a.button, .woocommerce .woocommerce-info a.button, .woocommerce .woocommerce-error a.button { margin: 0 0 0 auto; background: transparent; color: var(--rag-forest-800); border: 1.5px solid var(--rag-border-strong); box-shadow: none; padding: 0.55em 1.2em; } .woocommerce .woocommerce-message a.button:hover, .woocommerce .woocommerce-info a.button:hover, .woocommerce .woocommerce-error a.button:hover { background: color-mix(in srgb, var(--rag-forest-700) 7%, transparent); border-color: var(--rag-forest-700); color: var(--rag-forest-800); transform: none; } /* ---- Varesiden ---- */ .single-product div.product .woocommerce-product-details__short-description { font-size: var(--rag-step-0); line-height: 1.65; } .single-product div.product .woocommerce-product-details__short-description p { margin-bottom: 0.7rem; } .single-product div.product .woocommerce-product-details__short-description p:last-child { margin-bottom: 0; } .single-product div.product .summary > * { margin-bottom: 0.85rem; } .single-product div.product form.cart { margin-bottom: 1.1rem; } /* ---- Mobil ---- */ @media (max-width: 560px) { .rag-cart__item { grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "billede info fjern" "billede antal beloeb"; padding: 1rem; } .rag-cart__media img { width: 64px; height: 64px; } .rag-cart__head, .rag-cart__foot { padding: 1rem; } .woocommerce-checkout .woocommerce-billing-fields__field-wrapper { grid-template-columns: 1fr; } .woocommerce-checkout .woocommerce-billing-fields__field-wrapper > #billing_first_name_field, .woocommerce-checkout .woocommerce-billing-fields__field-wrapper > #billing_last_name_field { grid-column: 1; } } /* ------------------------------------------------------------------------- 28. Topbarens roterende budskaber Budskaberne ligger oven paa hinanden i samme spor, saa baren ikke skifter hoejde eller bredde naar teksten udskiftes. Sporet er lige saa bredt som det laengste budskab, og hvert budskab er begraenset i laengde ved indtastning. ---------------------------------------------------------------------- */ .rag-usprotate__track { position: relative; display: inline-grid; min-height: 1.4em; align-items: center; } .rag-usprotate__item { grid-area: 1 / 1; white-space: nowrap; opacity: 0; visibility: hidden; transform: translateY(0.35em); transition: opacity 0.45s var(--rag-ease), transform 0.45s var(--rag-ease), visibility 0.45s; } .rag-usprotate__item.is-active { opacity: 1; visibility: visible; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .rag-usprotate__item { transition: none; transform: none; } } /* WooCommerce floater totalkortet til hoejre i halv bredde (.woocommerce .cart-collaterals .cart_totals { float: right; width: 48% }). Vi laegger det selv i en grid-kolonne, saa floatet skal vaek - ellers bliver kortet 48% af sin egen kolonne og indholdet klemmes ud til hoejre. */ .woocommerce .cart-collaterals, .woocommerce-page .cart-collaterals { width: 100%; } .woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals { float: none; width: 100%; } .woocommerce .cart-collaterals .cross-sells, .woocommerce-page .cart-collaterals .cross-sells { float: none; width: 100%; } /* ---- Ingen prosaprikker på nogen liste i købsflowet ---- Prikken tegnes af .rag-prose ul li::before. Købsflowet har lister som WooCommerce selv genererer med skiftende klassenavne (wc_payment_methods, payment_methods, shipping_method), så her slås den fra på tværs i stedet for at jagte hvert enkelt navn. */ .woocommerce-cart .rag-prose li::before, .woocommerce-checkout .rag-prose li::before, .woocommerce-account .rag-prose li::before, .woocommerce ul li::before, ul.wc_payment_methods li::before, ul.payment_methods li::before, ul#shipping_method li::before, .rag-cart__items li::before { content: none !important; display: none !important; } .woocommerce-cart .rag-prose li, .woocommerce-checkout .rag-prose li, .woocommerce-account .rag-prose li { position: static; } /* ---- Rytme i ordrekortet ---- WooCommerce lægger persondatatekst, betingelser og knap inde i #payment uden indbyrdes afstand, så de klumpede sammen under betalingsmetoderne. */ .woocommerce-checkout #payment .place-order { padding: 0; margin: 1.1rem 0 0; } .woocommerce-checkout .woocommerce-privacy-policy-text { margin: 1rem 0 0; line-height: 1.55; } .woocommerce-checkout .woocommerce-privacy-policy-text p { margin: 0; font-size: 0.82rem; } .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { margin: 0.9rem 0 0; } .woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text { font-size: 0.86rem; line-height: 1.5; } .woocommerce-checkout .form-row.validate-required.woocommerce-validated, .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row { margin: 0; } .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox { display: flex; align-items: flex-start; gap: 0.55rem; font-weight: 500; } .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper input[type="checkbox"] { margin: 0.2rem 0 0; flex: 0 0 auto; accent-color: var(--rag-forest-700); } /* ---- Venstre spalte: kortene skal have samme rytme ---- "Send til anden adresse?" er kun en afkrydsning. Som fuldt kort med ramme og polstring fyldte den lige så meget som et helt felt-sæt. */ .woocommerce-checkout .woocommerce-shipping-fields { background: none; border: 0; padding: 0; margin: 0; } .woocommerce-checkout .woocommerce-shipping-fields h3 { font-size: var(--rag-step-0); font-weight: 600; margin: 0; } .woocommerce-checkout .woocommerce-shipping-fields h3 label { display: flex; align-items: center; gap: 0.55rem; cursor: pointer; margin: 0; } .woocommerce-checkout .woocommerce-shipping-fields h3 input[type="checkbox"] { margin: 0; accent-color: var(--rag-forest-700); } .woocommerce-checkout .woocommerce-shipping-fields .shipping_address { padding-top: 1rem; } .woocommerce-checkout .woocommerce-additional-fields h3 { font-size: var(--rag-step-0); font-weight: 600; } .woocommerce-checkout .woocommerce-additional-fields .form-row:last-child { margin-bottom: 0; } .woocommerce-checkout .woocommerce-billing-fields .form-row:last-child { margin-bottom: 0; } /* ---- Kun lyst tema ---- Uden denne erklæring mørklægger Chrome på Android siden automatisk ("Auto dark theme"). Den vender cremefarven til næsten sort, gør logoet gråt og ødelægger kontrasten i hele købsflowet. Vi har kun ét tema, så det siger vi eksplicit. "light" alene er ikke nok: Chrome mørklægger kun ikke, når der står "only light" (set på en kundes telefon 17. okt. 2026, hvor kassen var mørk og guldknappen brun). Meta-tagget i header.php siger det samme, før CSS'en er hentet. */ :root { color-scheme: only light; } /* Lange varenavne må bryde frem for at presse kolonnen bredere. */ .rag-cart__name, .rag-cart__name a { overflow-wrap: anywhere; } /* Sidste værn: intet i købsflowet må skabe vandret rul. */ .woocommerce-cart .rag-pagebody, .woocommerce-checkout .rag-pagebody { overflow-x: clip; } /* ---- Én farve til priser ---- Beloeb stod i tre farver: forest-700 i shoppens liste, forest-900 i kurven og gold-700 paa varesiden. Gylden er husets prisfarve, saa den gaelder nu alle beloeb paa lys baggrund. Paa moerk baggrund bliver gold-700 ulaeselig, saa tickeren og prispanelet beholder gold-400. */ /* Beloebskolonnen farves, ikke indpakningen. Vores egne momsraekker skriver tallet uden WooCommerces .amount-element, saa de faldt tidligere udenfor og stod moerkegroenne midt i en kolonne af gyldne tal. */ .woocommerce .cart_totals table.shop_table td, .woocommerce .cart_totals table.shop_table td .amount, .woocommerce-checkout #order_review table.shop_table td.product-total, .woocommerce-checkout #order_review table.shop_table td.product-total .amount, .woocommerce-checkout #order_review table.shop_table tr.cart-subtotal td, .woocommerce-checkout #order_review table.shop_table tr.order-total td, .woocommerce-checkout #order_review table.shop_table tr.rag-vat-group td, .woocommerce-checkout #order_review table.shop_table tr.rag-vat-amount td, .woocommerce-checkout #order_review .amount, .rag-cart__line, .rag-cart__line .amount, .rag-cart__unit { color: var(--rag-gold-700); } /* Fragtraekken er en label med valg, ikke en beloebskolonne. */ .woocommerce .cart_totals table.shop_table tr.rag-shipping td { color: var(--rag-ink-700); } /* "pr. stk." og gennemstregede foer-priser er ord og historik, ikke prisen. */ .rag-cart__unit .amount { color: var(--rag-gold-700); } .rag-cart__unit > span:last-child { color: var(--rag-muted); } .woocommerce del, .woocommerce del .amount { color: var(--rag-muted); font-weight: 400; } /* Pletsoelv blev tidligere fremhaevet med gylden tekst. Metalnavnene skal staa ens, saa fremhaevningen er fjernet - raekken skiller sig nu kun ud ved sin placering oeverst i tabellen. */ /* ------------------------------------------------------------------------- Roterende budskaber i topbaren Budskaberne ligger i samme gitterfelt oven på hinanden. Sporet bliver dermed så bredt som det længste budskab, og bredden ændrer sig ikke når der skiftes — ellers ville prisbåndet ved siden af hoppe hver femte sekund. visibility følger opacity, så skjulte budskaber heller ikke læses op af en skærmlæser. ---------------------------------------------------------------------- */ .rag-usprotate { min-width: 0; } .rag-usprotate__track { display: grid; min-width: 0; } .rag-usprotate__item { grid-area: 1 / 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; visibility: hidden; transform: translateY(0.35em); transition: opacity 0.45s var(--rag-ease), transform 0.45s var(--rag-ease), visibility 0.45s; } .rag-usprotate__item.is-active { opacity: 1; visibility: visible; transform: none; } @media (prefers-reduced-motion: reduce) { .rag-usprotate__item { transition: opacity 0.01s, visibility 0.01s; transform: none; } } /* ------------------------------------------------------------------------- 29. Rabatkode, fragtnote og solgte varer ---------------------------------------------------------------------- */ /* ---- Rabatkode ligger foldet sammen ---- Et aabent felt der spoerger efter en kode faar mest af alt resten til at spekulere paa hvad de gaar glip af.
    klarer det uden en linje JavaScript, og feltet bliver i DOM'en, saa WooCommerces kurv-script stadig finder det. */ .rag-coupon { flex: 1 1 auto; min-width: 0; } .rag-coupon__toggle { display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer; padding: 0.3rem 0; list-style: none; font-size: 0.88rem; font-weight: 600; color: var(--rag-ink-700); } .rag-coupon__toggle::-webkit-details-marker { display: none; } .rag-coupon__toggle::before { content: "+"; display: inline-grid; place-items: center; width: 1.2rem; height: 1.2rem; border: 1.5px solid var(--rag-border-strong); border-radius: 50%; font-size: 0.9rem; line-height: 1; color: var(--rag-muted); } .rag-coupon[open] .rag-coupon__toggle::before { content: "\2212"; } .rag-coupon__toggle:hover { color: var(--rag-forest-700); } .rag-coupon__toggle:focus-visible { outline: 2px solid var(--rag-forest-700); outline-offset: 3px; border-radius: var(--rag-radius-sm); } .rag-coupon[open] .rag-cart__coupon { margin-top: 0.65rem; } .rag-cart__coupon input.input-text { max-width: 15rem; } /* Knappen er sekundaer nu - den maa ikke konkurrere med "Gaa til kassen". */ .woocommerce .rag-cart__coupon-btn { background: transparent; color: var(--rag-forest-700); border: 1.5px solid var(--rag-border-strong); } .woocommerce .rag-cart__coupon-btn:hover { background: var(--rag-forest-700); color: #fff; border-color: var(--rag-forest-700); } /* Fragten er flyttet til kassen - sig det, saa totalen ikke overrasker. */ .rag-summary__note { margin: 0.7rem 0 0; text-align: center; font-size: 0.82rem; color: var(--rag-muted); } /* ---- Solgte varer ---- De er ude af kataloget, men linket lever videre i en mail, et bogmaerke, et soegeresultat. Maerket ligger over billedet paa samme absolutte plads som WooCommerces udsalgsmaerke, og billedet daempes, saa svaret staar klart foer man laeser noget som helst. */ .single-product div.product { position: relative; } .rag-sold-badge { position: absolute; top: 0.9rem; left: 0.9rem; z-index: 3; padding: 0.45em 1em; border-radius: var(--rag-radius-pill); background: var(--rag-forest-900); color: var(--rag-cream-100); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; } /* Daempningen ligger paa billedet, ikke paa galleriet: WooCommerces eget script saetter inline opacity paa .woocommerce-product-gallery, og en inline-stil vinder over ethvert stylesheet. */ .single-product div.product.rag-is-sold .woocommerce-product-gallery img { filter: grayscale(0.4); opacity: 0.72; } .rag-sold { margin: 0 0 1rem; padding: 1.15rem 1.25rem; background: var(--rag-cream-100); border: 1px solid var(--rag-border); border-radius: var(--rag-radius); } .rag-sold__title { margin: 0 0 0.35rem; font-family: var(--rag-font-display); font-size: 1.2rem; line-height: 1.25; color: var(--rag-forest-900); } .rag-sold__text { margin: 0 0 1rem; font-size: 0.95rem; line-height: 1.55; color: var(--rag-ink-700); } .rag-sold__cta { display: inline-flex; } /* ------------------------------------------------------------------------- 30. Kategori uden varer Naas kun ved direkte link - menuer og filtre udelader dem. Samme hoeflighed som en solgt vare: sig det ligeud, og peg videre. ---------------------------------------------------------------------- */ .rag-emptycat { max-width: 44rem; margin: 1rem 0 2rem; padding: clamp(1.4rem, 4vw, 2.2rem); border: 1px solid var(--rag-border); border-radius: var(--rag-radius); background: var(--rag-cream-100); text-align: center; } .rag-emptycat__title { margin: 0 0 0.4rem; font-family: var(--rag-font-display); font-size: clamp(1.15rem, 1rem + 1vw, 1.5rem); color: var(--rag-forest-900); } .rag-emptycat__text { margin: 0 0 1.2rem; color: var(--rag-ink-700); } /* ------------------------------------------------------------------------- 31. Kategorimenu Bygget af kategorierne selv, ikke af menuredigeringen: shoppen fyldes og tømmes, og ingen skal huske at tilføje et menupunkt naar en kategori faar sin foerste ring - eller fjerne det naar den bliver solgt. ---------------------------------------------------------------------- */ /* Det oprindelige undermenupunkt er erstattet - af panelet paa desktop og af overkategorierne paa mobil. Uden det sidste stod "Alle varer" to gange. */ .rag-nav__list .rag-has-mega > .sub-menu, .rag-mobile-nav__list .rag-has-mega > .sub-menu:not(.rag-mobile-cats) { display: none; } .rag-mega { position: absolute; top: calc(100% + 4px); left: 50%; transform: translate(-50%, 8px); width: min(56rem, calc(100vw - 2 * var(--rag-gutter))); background: var(--rag-surface); border: 1px solid var(--rag-border); border-radius: var(--rag-radius); box-shadow: var(--rag-shadow-lg); opacity: 0; visibility: hidden; transition: opacity 0.22s var(--rag-ease), transform 0.22s var(--rag-ease), visibility 0.22s; z-index: 60; } .rag-nav__list .rag-has-mega:hover > .rag-mega, .rag-nav__list .rag-has-mega:focus-within > .rag-mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .rag-mega__inner { padding: 1.4rem 1.6rem 1.1rem; } .rag-mega__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1.2rem 2rem; } .rag-mega__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; padding: 0 0 0.5rem; margin-bottom: 0.5rem; border-bottom: 1px solid var(--rag-border); font-family: var(--rag-font-display); font-size: 1.05rem; color: var(--rag-forest-900); white-space: nowrap; } .rag-mega__head::after { content: none; } .rag-mega__head:hover { color: var(--rag-gold-700); } .rag-mega__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; } .rag-mega__list a { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; padding: 0.4rem 0.5rem; border-radius: var(--rag-radius-sm); font-weight: 500; font-size: 0.95rem; color: var(--rag-ink-700); white-space: nowrap; } .rag-mega__list a::after { content: none; } .rag-mega__list a:hover { background: color-mix(in srgb, var(--rag-forest-700) 8%, transparent); color: var(--rag-forest-800); } .rag-mega__count { flex: 0 0 auto; font-family: var(--rag-font-body); font-size: 0.72rem; font-variant-numeric: tabular-nums; color: var(--rag-muted); } .rag-mega__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1.5rem; margin-top: 1.2rem; padding-top: 0.9rem; border-top: 1px solid var(--rag-border); } .rag-mega__all { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; color: var(--rag-forest-700); } .rag-mega__all::after { content: none; } .rag-mega__all:hover { color: var(--rag-gold-700); } .rag-mega__all:hover .rag-icon { transform: translateX(3px); } .rag-mega__all .rag-icon { transition: transform 0.25s var(--rag-ease); } .rag-mega__note { margin: 0; font-size: 0.82rem; color: var(--rag-muted); } /* Paa en telefon er megamenuen ikke med; der staar kun overkategorierne. */ .rag-mobile-nav .rag-mega { display: none; } .rag-mobile-cats .rag-mega__count { margin-left: 0.4rem; color: var(--rag-on-dark-muted); } /* Overkategorien staar over sine egne underkategorier, ikke midt imellem dem i alfabetisk orden - saa overskriften kom under det, den overskriver. */ .rag-filter__cat.is-parent { font-weight: 600; color: var(--rag-forest-900); } .rag-filter__cat.is-child { padding-left: 1.6rem; font-size: 0.95rem; } .rag-filter__cat.is-child > span:first-child::before { content: ""; display: inline-block; width: 0.5rem; height: 1px; margin: 0 0.5rem 0 -1rem; vertical-align: middle; background: var(--rag-border-strong); } /* ------------------------------------------------------------------------- 32. Kategorioversigt En shopforside der aabner paa tre hundrede ringe fortaeller ingen noget. Det her er den anden vej ind: hvilke slags findes der, og hvor mange. Bemaerk foerst reglerne der slaar prosastilen fra. Siden er indhold, saa temaet tegner en gylden prik foran hvert punkt og understreger hvert link - hvilket faar en raekke trykflader til at ligne en litteraturliste. ---------------------------------------------------------------------- */ .rag-cathub a { text-decoration: none; } .rag-cathub li::before, .rag-cathub li::marker { content: none; } .rag-cathub { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: clamp(1rem, 2.5vw, 1.6rem); margin: 0; padding: 0; list-style: none; } .rag-cathub__card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--rag-border); border-radius: var(--rag-radius); background: var(--rag-surface); box-shadow: var(--rag-shadow); transition: transform 0.25s var(--rag-ease), box-shadow 0.25s var(--rag-ease); } .rag-cathub__card:hover { transform: translateY(-3px); box-shadow: var(--rag-shadow-lg); } /* Baandet baerer kategoriens eget foto naar der er sat et, ellers den dybgroenne flade. Teksten staar hvid i begge tilfaelde, saa der ligger et maerkbart moerkt lag over billedet - en hvid overskrift oven paa et lyst smykkefoto er ulaeselig, og det er den slags man foerst opdager naar nogen har sat det forkerte billede paa. */ .rag-cathub__band { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.15rem; min-height: 8.5rem; padding: 1.1rem 1.3rem; background: linear-gradient(160deg, var(--rag-forest-800), var(--rag-forest-950)); background-size: cover; background-position: center; color: #fff; isolation: isolate; } .rag-cathub__card.has-image .rag-cathub__band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11, 36, 25, 0.35), rgba(11, 36, 25, 0.85)); } .rag-cathub__title { font-family: var(--rag-font-display); font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem); line-height: 1.15; color: #fff; } .rag-cathub__sum { font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rag-gold-400); font-variant-numeric: tabular-nums; } .rag-cathub__band:hover .rag-cathub__title { color: var(--rag-gold-300, #ecddb4); } .rag-cathub__row { display: flex; flex-wrap: wrap; gap: 0.45rem; padding: 1rem 1.1rem 1.2rem; } .rag-cathub__pill { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 40px; padding: 0.35rem 0.85rem; border: 1.5px solid var(--rag-border); border-radius: var(--rag-radius-pill); color: var(--rag-ink-700); font-size: 0.92rem; font-weight: 500; transition: border-color 0.15s, background 0.15s, color 0.15s; } .rag-cathub__pill span { font-size: 0.75rem; color: var(--rag-muted); font-variant-numeric: tabular-nums; } .rag-cathub__pill:hover { border-color: var(--rag-forest-700); background: var(--rag-forest-700); color: #fff; } .rag-cathub__pill:hover span { color: var(--rag-gold-400); } /* ------------------------------------------------------------------------- 33. Egenskabsfiltre og tragten ind i en kategori ---------------------------------------------------------------------- */ .rag-filter__pills { display: flex; flex-wrap: wrap; gap: 0.4rem; } .rag-filter__pill { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 36px; padding: 0.3rem 0.75rem; border: 1.5px solid var(--rag-border); border-radius: var(--rag-radius-pill); font-size: 0.88rem; color: var(--rag-ink-700); transition: border-color 0.15s, background 0.15s, color 0.15s; } .rag-filter__pill span { font-size: 0.72rem; color: var(--rag-muted); font-variant-numeric: tabular-nums; } .rag-filter__pill:hover { border-color: var(--rag-forest-700); color: var(--rag-forest-800); } .rag-filter__pill.is-active { border-color: var(--rag-forest-700); background: var(--rag-forest-700); color: #fff; } .rag-filter__pill.is-active span { color: var(--rag-gold-400); } /* Tragten staar foerst paa kategorisiden - underkategorien er det naeste valg, ikke noget man skal rulle ned til. */ .rag-funnel { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.6rem; padding: 0 0 1.3rem; border-bottom: 1px solid var(--rag-border); } .rag-funnel__pill { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0.45rem 1.05rem; border: 1.5px solid var(--rag-border-strong); border-radius: var(--rag-radius-pill); background: var(--rag-surface); color: var(--rag-ink-700); font-weight: 500; font-size: 0.95rem; transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.15s; } .rag-funnel__pill span { font-size: 0.75rem; color: var(--rag-muted); font-variant-numeric: tabular-nums; } .rag-funnel__pill:hover { border-color: var(--rag-gold); transform: translateY(-1px); } .rag-funnel__pill.is-active { border-color: var(--rag-forest-700); background: var(--rag-forest-700); color: #fff; } .rag-funnel__pill.is-active span { color: var(--rag-gold-400); } /* ------------------------------------------------------------------------- 34. Kategorilisten foldes sammen Femten kategorier under hinanden er en rulleliste. Kun den man staar i er foldet ud; resten kan aabnes.
    klarer det uden JavaScript. ---------------------------------------------------------------------- */ .rag-cattree { display: grid; gap: 0.15rem; } .rag-cattree__group { border: 0; } .rag-cattree__summary { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.8rem; border-radius: var(--rag-radius-sm); cursor: pointer; list-style: none; font-weight: 600; color: var(--rag-forest-900); } .rag-cattree__summary::-webkit-details-marker { display: none; } .rag-cattree__summary:hover { background: color-mix(in srgb, var(--rag-forest-700) 6%, transparent); } .rag-cattree__summary::after { content: ""; flex: 0 0 auto; width: 9px; height: 9px; margin-left: auto; border-right: 2px solid var(--rag-muted); border-bottom: 2px solid var(--rag-muted); transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.2s var(--rag-ease); } .rag-cattree__group[open] > .rag-cattree__summary::after { transform: rotate(-135deg) translate(-2px, -2px); } .rag-cattree__name { flex: 1 1 auto; } .rag-cattree__count { font-size: 0.78rem; color: var(--rag-muted); font-variant-numeric: tabular-nums; } .rag-cattree__group.is-current > .rag-cattree__summary { background: var(--rag-forest-700); color: #fff; } .rag-cattree__group.is-current > .rag-cattree__summary .rag-cattree__count { color: var(--rag-gold-400); } .rag-cattree__group.is-current > .rag-cattree__summary::after { border-color: rgba(255,255,255,0.7); } .rag-cattree__kids { display: grid; gap: 0.1rem; padding: 0.25rem 0 0.5rem 0.55rem; } .rag-cattree__kid { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.8rem; border-radius: var(--rag-radius-sm); font-size: 0.95rem; color: var(--rag-ink-700); } .rag-cattree__kid:hover { background: color-mix(in srgb, var(--rag-forest-700) 6%, transparent); color: var(--rag-forest-800); } .rag-cattree__kid.is-active { background: var(--rag-forest-700); color: #fff; font-weight: 600; } .rag-cattree__kid.is-active .rag-cattree__count { color: var(--rag-gold-400); } .rag-cattree__solo { text-decoration: none; } .rag-cattree__solo.is-current { background: var(--rag-forest-700); color: #fff; } .rag-cattree__solo::after { content: none; } /* ------------------------------------------------------------------------- 35. Dagens priser i to spalter Treogtyve raekker under hinanden goer panelet naesten en meter hoejt. To spalter halverer det, men kraever bredde: ved siden af overskriften har panelet 464 px, og to spalter blev 187 px hver - "Guld 24 karat (999) 894 kr / g" kan ikke staa der uden at braekke over tre linjer. Derfor rykker panelet ned under teksten paa desktop og faar hele indholdsbredden. Overskriften beholder sin, og priserne staar ved siden af hinanden med plads til at blive laest. ---------------------------------------------------------------------- */ @media (min-width: 62rem) { .rag-hero__inner { grid-template-columns: minmax(0, 1fr); } .rag-hero__panel { max-width: none; } .rag-prices--hero .rag-prices__list, .rag-prices--full .rag-prices__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.6rem, 4vw, 3.5rem); align-items: start; } /* En gruppeoverskrift hoerer til begge spalter; staar den kun i den ene, forsvinder sammenhaengen mellem overskriften og halvdelen af raekkerne. */ .rag-prices--hero .rag-prices__list > .rag-prices__group, .rag-prices--full .rag-prices__list > .rag-prices__group, .rag-prices--hero .rag-prices__list > .rag-prices__note, .rag-prices--full .rag-prices__list > .rag-prices__note { grid-column: 1 / -1; } /* Ekstra-materialerne er deres egen blok; den deles ogsaa i to. */ .rag-prices--hero .rag-prices__block--extras, .rag-prices--full .rag-prices__block--extras { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.6rem, 4vw, 3.5rem); } /* Etiketten maa gerne bryde; beloebet maa ikke. */ .rag-prices--hero .rag-price__label, .rag-prices--full .rag-price__label { min-width: 0; } .rag-prices--hero .rag-price__value, .rag-prices--full .rag-price__value { white-space: nowrap; } } /* ------------------------------------------------------------------------- 36. Tom kurv WooCommerce viser en advarselspille, som er den samme der bruges naar noget gaar galt. Der er ikke gaaet noget galt - man er bare ikke begyndt. ---------------------------------------------------------------------- */ .rag-emptycart { max-width: 34rem; margin: 1rem auto 3rem; padding: clamp(2rem, 6vw, 3.2rem) clamp(1.4rem, 4vw, 2.4rem); border: 1px solid var(--rag-border); border-radius: var(--rag-radius-lg); background: var(--rag-surface); box-shadow: var(--rag-shadow); text-align: center; } .rag-emptycart__mark { display: inline-grid; place-items: center; width: 64px; height: 64px; margin-bottom: 1.1rem; border-radius: 50%; background: var(--rag-cream-100); color: var(--rag-forest-700); } .rag-emptycart__title { margin: 0 0 0.6rem; font-family: var(--rag-font-display); font-size: clamp(1.4rem, 1.1rem + 1.4vw, 1.9rem); line-height: 1.2; color: var(--rag-forest-900); } .rag-emptycart__text { max-width: 30ch; margin: 0 auto 1.6rem; color: var(--rag-ink-700); line-height: 1.6; } .rag-emptycart__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; } .rag-emptycart__aside { margin: 1.6rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--rag-border); font-size: 0.92rem; color: var(--rag-muted); } .rag-emptycart__aside a { font-weight: 600; color: var(--rag-forest-700); } .rag-emptycart__aside a:hover { color: var(--rag-gold-700); } /* Woo tegner sin egen "kurven er tom"-besked lige over vores. */ .woocommerce-cart .cart-empty.woocommerce-info { display: none; } /* Vejen fra heroens fem priser til hele tabellen. */ .rag-prices__more { display: inline-flex; align-items: center; margin-top: 1rem; font-size: 0.9rem; font-weight: 600; color: var(--rag-gold-400); } .rag-prices__more:hover { color: #fff; } .rag-prices--full .rag-prices__more, .rag-prices--aside .rag-prices__more { color: var(--rag-forest-700); } /* Etiketten paa sin egen linje, saa tal og tekst aldrig loeber sammen. */ .rag-stat__label { display: block; } /* ------------------------------------------------------------------------- 37. Betingelserne i kassen WooCommerce satte panelet til 200 px med scroll i begge retninger og skrev det inline, hvor ingen stylesheet naar det. Maalt paa mobil: 200 px viste 9 linjer og skjulte 1407 px tekst - 12 % af betingelserne, gennem en brevsprakke, med en scrollbar i hver retning. Foerste forsoeg her var et hoejere loft. Det var stadig forkert: ved 60vh laa der 1120 px skjult, altsaa fortsat en rulleflade inde i en rulleflade. Paa en telefon kan man ikke rulle siden, mens fingeren staar i kassen, og saa sidder man fast midt i de betingelser man skal acceptere. Derfor ingen indvendig scroll overhovedet. Panelet er foldet sammen til at begynde med, og folder man det ud, ruller siden som alt muligt andet. Bliver teksten en dag lang, er den vej ud den samme: luk panelet igen. ---------------------------------------------------------------------- */ .woocommerce-checkout .rag-terms { margin: 0.85rem 0 1.05rem; padding: 1.05rem 1.15rem; background: var(--rag-cream-50); border: 1px solid var(--rag-sand-200); border-radius: 14px; color: var(--rag-ink-700); font-size: 0.84rem; line-height: 1.62; /* Den vandrette scrollbar var den anden halvdel af fejlen. Der var intet at se ude til siden - kun et ord der ikke kunne brydes. */ overflow-wrap: break-word; } .woocommerce-checkout .rag-terms > *:first-child { margin-top: 0; } .woocommerce-checkout .rag-terms > *:last-child { margin-bottom: 0; } .woocommerce-checkout .rag-terms p { margin: 0 0 0.7rem; font-size: inherit; line-height: inherit; } .woocommerce-checkout .rag-terms h2, .woocommerce-checkout .rag-terms h3, .woocommerce-checkout .rag-terms h4 { margin: 1.15rem 0 0.35rem; font-size: 0.85rem; font-weight: 700; line-height: 1.35; letter-spacing: 0.01em; color: var(--rag-forest-800); } .woocommerce-checkout .rag-terms ul, .woocommerce-checkout .rag-terms ol { margin: 0 0 0.7rem; padding-left: 1.1rem; } .woocommerce-checkout .rag-terms li { margin: 0 0 0.25rem; position: static; } .woocommerce-checkout .rag-terms li::before { content: none; } .woocommerce-checkout .rag-terms a { color: var(--rag-forest-700); } /* Vejen ud, for den der hellere vil laese betingelserne i fred - eller gemme dem. Kassen bliver staaende i sin egen fane. */ .woocommerce-checkout .rag-terms__full { margin: 1rem 0 0; padding-top: 0.75rem; border-top: 1px solid var(--rag-sand-200); font-size: 0.8rem; } /* Linket er en kontakt, ikke en henvisning - saa det skal vise sin tilstand. */ .woocommerce-checkout .woocommerce-terms-and-conditions-link::after { content: ""; display: inline-block; width: 0.4em; height: 0.4em; margin-left: 0.42em; vertical-align: 0.12em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 0.18s ease; } .woocommerce-checkout .woocommerce-terms-and-conditions-link--open::after { transform: rotate(-135deg); } /* Afkrydsningen: stjernen hoerer til saetningen, ikke til en linje for sig. */ .woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text { display: inline; } .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper abbr.required { border: 0; text-decoration: none; color: var(--rag-gold-700); } @media (prefers-reduced-motion: reduce) { .woocommerce-checkout .woocommerce-terms-and-conditions-link::after { transition: none; } } /* ------------------------------------------------------------------------- 38. Pakkeshop i kassen Valget af pakkeshop er et krav - uden det kan ordren ikke afgives - men det saa ud som en ustylet browserknap med en graa kasse under, hvor der stod "Selected Pickup Location:" paa engelsk. Den kasse laver GLS-plugin- nets JavaScript med sine farver inline, saa den styles ikke; den skjules, og PHP tegner panelet i stedet (se ragenbrug_gls_pickup_panel). ---------------------------------------------------------------------- */ /* GLS' egen kasse. Engelsk, inline-stylet, og vaek ved foerste opdatering. */ .woocommerce-checkout .pickup-label-display { display: none !important; } /* Og pluginnets sorte toast nede i hjoernet: "Pickup required: Please select a pickup location to complete checkout." Den fyrer i det sekund pakkeshop er valgt og der endnu ikke er valgt et sted - altsaa med det samme man lander i kassen, paa engelsk, foer kunden har gjort noget som helst forkert. Vores eget panel siger det samme roligt, paa dansk, det rigtige sted. Knappen "Godkend ordre" bliver stadig slaaet fra af pluginnet, saa kravet staar. */ .GLSDk-toast { display: none !important; } /* Knappen. Den aabner kortet og er den eneste vej videre, saa den skal se ud som noget man trykker paa - ikke som noget der er gaaet galt. */ /* Pluginnets egen knapraekke nederst i totaltabellen. Klassen saettes af vores JavaScript, foerst naar vores egen knap staar oppe ved forsendelsen - saa en JavaScript-fejl efterlader pluginnets knap synlig frem for ingen knap. */ .woocommerce-checkout tr.rag-pickup-row-hidden { display: none; } /* Vores egen knap ved forsendelsen. Den sender klikket videre til pluginnets, som bliver liggende hvor pluginnet forventer at finde den. */ .woocommerce-checkout .rag-pickup__change { flex: 0 0 100%; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; margin: 0.6rem 0 0; padding: 0.72rem 1.05rem; background: var(--rag-forest-700); color: #fff; border: 0; border-radius: 999px; font-family: inherit; font-size: 0.88rem; font-weight: 600; line-height: 1.2; cursor: pointer; transition: background 0.16s ease; } .woocommerce-checkout .rag-pickup__change::before { content: ""; width: 18px; height: 18px; flex: 0 0 auto; background: currentColor; -webkit-mask: var(--rag-pin) center / contain no-repeat; mask: var(--rag-pin) center / contain no-repeat; } .woocommerce-checkout .rag-pickup__change:hover { background: var(--rag-forest-600); } .woocommerce-checkout .rag-pickup__change:focus-visible { outline: 2px solid var(--rag-gold-600); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .woocommerce-checkout .rag-pickup__change { transition: none; } } /* Pluginnets egen checkout.css skriver .button.button.alt.GLSDk-pick-location - fire klasser, blaa - saa den skal mødes med mindst det samme. Derfor den lange raekke her; det er ikke pynt. */ .woocommerce-checkout .button.button.alt.GLSDk-pick-location, .woocommerce-cart .button.button.alt.GLSDk-pick-location, .woocommerce-checkout .GLSDk-pick-location.GLSDk-pick-location.GLSDk-pick-location, .woocommerce-cart .GLSDk-pick-location.GLSDk-pick-location.GLSDk-pick-location { display: inline-flex; align-items: center; gap: 0.5rem; width: 100%; margin: 0.65rem 0 0; padding: 0.72rem 1.05rem; /* Temaets egen .button.alt-regel bruger !important paa baggrund og farve (linje ~678). Over for !important er specificitet ligegyldig, saa den maa moedes med det samme - ikke af magelighed, men fordi alternativet er at rive .alt af knappen bag om pluginnets ryg, hver gang den gentegnes. */ background: var(--rag-forest-700) !important; color: #fff !important; border: 0; border-radius: 999px; font-family: inherit; font-size: 0.88rem; font-weight: 600; line-height: 1.2; text-align: center; justify-content: center; cursor: pointer; transition: background 0.16s ease, transform 0.16s ease; } .woocommerce-checkout .GLSDk-pick-location.GLSDk-pick-location::before, .woocommerce-cart .GLSDk-pick-location.GLSDk-pick-location::before { content: ""; width: 18px; height: 18px; flex: 0 0 auto; background: currentColor; -webkit-mask: var(--rag-pin) center / contain no-repeat; mask: var(--rag-pin) center / contain no-repeat; } .woocommerce-checkout .button.button.alt.GLSDk-pick-location:hover, .woocommerce-cart .button.button.alt.GLSDk-pick-location:hover { background: var(--rag-forest-600) !important; } .woocommerce-checkout .GLSDk-pick-location:active { transform: translateY(1px); } .woocommerce-checkout .GLSDk-pick-location:focus-visible { outline: 2px solid var(--rag-gold-600); outline-offset: 2px; } /* Panelet. To tilstande: enten er der valgt en shop, eller ogsaa mangler der en - og det sidste skal ikke kunne overses. */ .woocommerce-checkout .rag-pickup { /* Raekken er en flex-linje med radioknap og etiket. Uden det her bliver panelet et tredje element paa samme linje, og paa en telefon knaekker adressen saa midt i et ord. Det skal ligge under, i fuld bredde. */ flex: 0 0 100%; width: 100%; display: flex; align-items: flex-start; gap: 0.65rem; margin: 0.7rem 0 0; padding: 0.8rem 0.9rem; border-radius: 12px; font-size: 0.84rem; line-height: 1.5; } .woocommerce-checkout .rag-pickup__icon { flex: 0 0 auto; display: flex; margin-top: 0.05rem; } .woocommerce-checkout .rag-pickup__body { min-width: 0; } .woocommerce-checkout .rag-pickup__title { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .woocommerce-checkout .rag-pickup__address, .woocommerce-checkout .rag-pickup__text { margin: 0.2rem 0 0; font-size: 0.86rem; line-height: 1.45; overflow-wrap: break-word; } .woocommerce-checkout .rag-pickup__address { font-weight: 600; } .woocommerce-checkout .rag-pickup--chosen { background: color-mix(in srgb, var(--rag-leaf-500) 10%, var(--rag-cream-50)); border: 1px solid color-mix(in srgb, var(--rag-leaf-500) 34%, transparent); color: var(--rag-forest-800); } .woocommerce-checkout .rag-pickup--chosen .rag-pickup__title { color: var(--rag-forest-600); } /* Mangler der en shop, staar ordren stille. Guld frem for roedt: det er ikke en fejl kunden har begaaet, det er et skridt der mangler. */ .woocommerce-checkout .rag-pickup--empty { background: color-mix(in srgb, var(--rag-gold-500) 14%, var(--rag-cream-50)); border: 1px solid color-mix(in srgb, var(--rag-gold-600) 45%, transparent); color: var(--rag-ink-900); } .woocommerce-checkout .rag-pickup--empty .rag-pickup__icon { color: var(--rag-gold-700); } .woocommerce-checkout .rag-pickup--empty .rag-pickup__title { color: var(--rag-gold-700); } /* De naermeste pakkeshops (RA Genbrug-pluginnet, parcelshops.js). De ligger i fragtmetodens egen raekke - en flex-linje med radioknap og etiket - og skal ligesom panelet have hele bredden. .rag-prose ul { display: flex } og .woocommerce-checkout .rag-prose ul li rammer ogsaa listen her; derfor de lange selektorer. */ .woocommerce-checkout .rag-pshops { flex: 0 0 100%; width: 100%; margin: 0.75rem 0 0; } .woocommerce-checkout .rag-pshops ul.rag-pshops__liste { display: grid; gap: 0.5rem; margin: 0; padding: 0; } .woocommerce-checkout .rag-pshops ul.rag-pshops__liste li { padding: 0; margin: 0; } .woocommerce-checkout .rag-pshops .rag-pshops__titel { margin: 0 0 0.5rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rag-forest-600); } .woocommerce-checkout .rag-pshops .rag-pshop { border-radius: 12px; font-size: 0.86rem; line-height: 1.4; color: var(--rag-ink-900); } .woocommerce-checkout .rag-pshops .rag-pshop.is-valgt { border-color: var(--rag-forest-700); background: color-mix(in srgb, var(--rag-leaf-500) 10%, var(--rag-cream-50)); } .woocommerce-checkout .rag-pshops .rag-pshops__besked { margin: 0; font-size: 0.86rem; color: var(--rag-ink-700); opacity: 1; } /* Er den valgte shop et af kortene, siger kortet det selv ("✓ Valgt"). Panelet "Pakken afleveres her" over det ville sige det samme to gange. Det bliver staaende, naar shoppen er valgt paa kortet og ikke er blandt de tre. */ .woocommerce-checkout li.rag-pshops--valgt-i-listen .rag-pickup--chosen { display: none; } /* Uden adresse kan GLS' kort ikke soege - det svarer med en popup om at udfylde adressen. Saa er knappen kun en omvej. */ .woocommerce-checkout li.rag-pshops--uden-adresse .rag-pickup__change { display: none; } /* Med listen fremme er kortet et alternativ, ikke hovedvejen. */ .woocommerce-checkout li.rag-pshops-aktiv .rag-pickup__change { background: transparent; color: var(--rag-forest-700); box-shadow: inset 0 0 0 1.5px currentColor; } .woocommerce-checkout li.rag-pshops-aktiv .rag-pickup__change:hover { background: color-mix(in srgb, var(--rag-forest-700) 8%, transparent); } @media (prefers-reduced-motion: reduce) { .woocommerce-checkout .GLSDk-pick-location { transition: none; } } /* Fragtlinjen i kurven: navn til venstre, beloeb til hoejre som de oevrige totaler - ellers ligner den ikke en total, men en bemaerkning. */ .woocommerce-cart .rag-shipping__flat { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } .woocommerce-cart .rag-shipping__flat-price { font-weight: 600; white-space: nowrap; } /* Momssatsen med sin hjemmel under sig. Kun nulsatsen baerer noten - en 25 %-linje er almindelig moms med almindeligt fradrag. */ .rag-vat-note { display: block; margin-top: 0.1rem; font-size: 0.72rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--rag-muted); } /* Et felt der ikke kan bruges til noget. Skjult, ikke fjernet - vaerdien skal stadig med, naar formularen sendes. !important fordi WooCommerce' egne scripts viser og skjuler adresseraekker med jQuery .show(), og det skriver display: block direkte paa elementet. En klasse taber til inline uanset hvor specifik den er. */ .woocommerce-checkout .form-row.rag-field-hidden, .woocommerce-cart .form-row.rag-field-hidden { display: none !important; } /* Fjern-krydset i kurven var et "x". En skraldespand siger hvad der sker, uden at man skal gaette paa et tegn. */ .woocommerce-cart .rag-cart__remove a.remove, .woocommerce-cart td.product-remove a.remove { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; font-size: 0; line-height: 0; color: var(--rag-ink-500); background: transparent; transition: background 0.16s ease, color 0.16s ease; } .woocommerce-cart .rag-cart__remove a.remove::before, .woocommerce-cart td.product-remove a.remove::before { content: ""; width: 17px; height: 17px; background: currentColor; -webkit-mask: var(--rag-trash) center / contain no-repeat; mask: var(--rag-trash) center / contain no-repeat; } .woocommerce-cart .rag-cart__remove a.remove:hover, .woocommerce-cart td.product-remove a.remove:hover { background: color-mix(in srgb, #c0573f 12%, transparent); color: #c0573f; } .woocommerce-cart .rag-cart__remove a.remove:focus-visible, .woocommerce-cart td.product-remove a.remove:focus-visible { outline: 2px solid var(--rag-gold-600); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .woocommerce-cart td.product-remove a.remove { transition: none; } } /* ------------------------------------------------------------------------- 39. Pakkebordet En side man staar ved, ikke en man laeser. Store maal, faa ting, og scannerfeltet stort nok til at ramme med en handske paa. ---------------------------------------------------------------------- */ .rag-pack { display: grid; gap: 1.6rem; max-width: 46rem; } .rag-pack__block { background: var(--rag-surface); border: 1px solid var(--rag-border); border-radius: var(--rag-radius-lg); padding: 1.5rem 1.6rem; } .rag-pack__title { font-size: 1.1rem; margin: 0 0 0.6rem; } .rag-pack__count { margin: 0 0 1rem; color: var(--rag-muted); } .rag-pack__list { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: 0.1rem; } .rag-pack .rag-pack__list li { display: grid; grid-template-columns: 4.5rem 1fr auto; gap: 0.8rem; align-items: baseline; padding: 0.5rem 0; border-bottom: 1px solid var(--rag-border); font-size: 0.9rem; } /* Temaet tegner en gylden prik paa .rag-prose ul li::before - én klasse og tre elementer. Et enkelt klassenavn taber til det, saa der skal to til. */ .rag-pack .rag-pack__list li::before { content: none; } .rag-pack__nr { font-weight: 700; font-variant-numeric: tabular-nums; } .rag-pack__who { min-width: 0; overflow-wrap: break-word; } .rag-pack__how { color: var(--rag-muted); font-size: 0.82rem; text-align: right; } .rag-pack__go, .rag-pack__done { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 0.95rem 1.4rem; border: 0; border-radius: 999px; background: var(--rag-forest-700); color: #fff; font-family: inherit; font-size: 1rem; font-weight: 700; cursor: pointer; transition: background 0.16s ease; } .rag-pack__go:hover, .rag-pack__done:hover { background: var(--rag-forest-600); } .rag-pack__go:focus-visible, .rag-pack__done:focus-visible { outline: 2px solid var(--rag-gold-600); outline-offset: 2px; } .rag-pack__fine { margin: 0.8rem 0 0; font-size: 0.8rem; color: var(--rag-muted); line-height: 1.5; } /* Scannerfeltet. Stort, roligt, og det eneste paa siden der har fokus. */ .rag-pack__scan { display: grid; gap: 0.8rem; } .rag-pack__input { width: 100%; padding: 1rem 1.1rem; font-family: inherit; font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; text-align: center; border: 2px solid var(--rag-border-strong); border-radius: 12px; background: var(--rag-cream-50); color: var(--rag-ink-900); } .rag-pack__input::placeholder { font-size: 0.95rem; font-weight: 400; letter-spacing: 0; color: var(--rag-muted); } .rag-pack__input:focus { outline: none; border-color: var(--rag-forest-600); background: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--rag-leaf-500) 18%, transparent); } /* Svaret skal kunne laeses paa en armslaengdes afstand. */ .rag-pack__msg { padding: 1.1rem 1.2rem; border-radius: 12px; border: 1px solid transparent; font-size: 1rem; } .rag-pack__msg-text { margin: 0 0 0.35rem; font-weight: 600; } .rag-pack__msg-text:last-child { margin-bottom: 0; } .rag-pack__msg--ok { background: color-mix(in srgb, var(--rag-leaf-500) 12%, var(--rag-cream-50)); border-color: color-mix(in srgb, var(--rag-leaf-500) 36%, transparent); color: var(--rag-forest-800); } .rag-pack__msg--igen { background: color-mix(in srgb, var(--rag-gold-500) 14%, var(--rag-cream-50)); border-color: color-mix(in srgb, var(--rag-gold-600) 42%, transparent); color: var(--rag-ink-900); } .rag-pack__msg--fejl { background: color-mix(in srgb, #c0573f 10%, var(--rag-cream-50)); border-color: color-mix(in srgb, #c0573f 38%, transparent); color: #7d2f1c; } .rag-pack__problems { margin: 0.6rem 0 0; padding-left: 1.1rem; font-size: 0.88rem; font-weight: 400; } .rag-pack__problems li { margin: 0 0 0.2rem; position: static; } .rag-pack .rag-pack__problems li::before { content: none; } .rag-pack__pdf { display: inline-block; margin-top: 0.4rem; font-weight: 700; color: var(--rag-forest-700); } .rag-pack--locked { color: var(--rag-muted); } @media (prefers-reduced-motion: reduce) { .rag-pack__go, .rag-pack__done { transition: none; } } /* Medarbejdersiden: to kort, ikke en menu. */ .rag-staff__hello { margin: 0 0 1.1rem; color: var(--rag-muted); } /* Store fliser, flere ved siden af hinanden paa en tablet - siden bruges med en finger (kundens oenske 23. okt.). Teksten bliver ikke bredere end en flise. */ .rag-prose:has(> .rag-staff) { max-width: none; } .rag-staff ul.rag-staff__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 1rem; } .rag-staff .rag-staff__list li::before { content: none; } .rag-staff .rag-staff__list li { position: static; padding: 0; } /* To klassenavne, ellers vinder temaets egen understregning af links, og hele kortet - overskrift og broedtekst - staar med streg under. */ .rag-staff .rag-staff__card { display: block; text-decoration: none; padding: 1.2rem 1.3rem; background: var(--rag-surface); border: 1px solid var(--rag-border); border-radius: var(--rag-radius-lg); text-decoration: none; color: inherit; transition: border-color 0.16s ease, transform 0.16s ease; display: flex; flex-direction: column; gap: 0.35rem; height: 100%; box-sizing: border-box; min-height: 11rem; border: 2px solid var(--rag-forest-700); border-radius: 14px; } .rag-staff .rag-staff__card:focus-visible { outline: 3px solid var(--rag-gold-500, #c9a227); outline-offset: 3px; } .rag-staff .rag-staff__card:active { transform: scale(0.98); } .rag-staff__icon { width: 2.5rem; height: 2.5rem; margin-bottom: 0.4rem; color: var(--rag-forest-700); flex: none; } .rag-staff .rag-staff__card:hover { border-color: var(--rag-forest-600); transform: translateY(-1px); text-decoration: none; } .rag-staff .rag-staff__card:hover .rag-staff__label { color: var(--rag-forest-600); } .rag-staff__label { display: block; font-size: 1.3rem; line-height: 1.2; color: var(--rag-forest-800); } .rag-staff__text { display: block; margin-top: 0.25rem; font-size: 0.95rem; color: var(--rag-muted); line-height: 1.5; } @media (prefers-reduced-motion: reduce) { .rag-staff__card { transition: none; } } /* Mens der bestilles labels. Uden det her ser siden doed ud i tyve sekunder, og saa trykker man igen - hvilket er praecis det der ikke maa ske. */ .rag-pack__working { display: flex; align-items: center; gap: 0.65rem; margin: 0.9rem 0 0; } .rag-pack__working[hidden] { display: none; } .rag-pack__working-text { font-size: 0.88rem; color: var(--rag-ink-700); line-height: 1.45; } .rag-pack__spinner { flex: 0 0 auto; width: 18px; height: 18px; border: 2px solid color-mix(in srgb, var(--rag-forest-700) 25%, transparent); border-top-color: var(--rag-forest-700); border-radius: 50%; animation: rag-spin 0.8s linear infinite; } @keyframes rag-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .rag-pack__spinner { animation-duration: 2.4s; } } /* ------------------------------------------------------------------------- 40. Kortet til pakkeshops Pluginnets lukkeknap er 0 x 0 pixels: den findes i DOM'en, men har hverken tekst eller stoerrelse, saa der er intet at trykke paa. Aabner man kortet paa en adresse GLS ikke kan finde, staar man i et graat rum uden vej ud. ---------------------------------------------------------------------- */ /* Kortets markup hoerer til kurv og kasse - ingen andre steder. GLS udskriver den paa wp_footer paa HVER side (maalt 23. okt. 2026, 4.1.4: class-GLSDk-shipping.php linje 49), men indlaeser kun sin egen CSS i kurv og kasse. Det er den CSS, der skjuler blokken med .GLSDk-pickup { display: none }. Alle andre steder var der nul GLS-stylesheets paa siden, saa blokken stod aaben - og vores egen styling herunder (position: fixed) satte et groent kryds oeverst til hoejre paa forsiden, varesider og alt andet. Knappen var oven i koebet doed: dens onclick kalder GLSDk.hideMap(), og window.GLSDk findes ikke uden deres script. Et tryk gav en fejl i konsollen og ellers ingenting. Derfor skjuler vi blokken selv dér, hvor den ikke hoerer hjemme. I kurv og kasse roerer vi den ikke: dér sorterer pluginnets egen CSS det. */ body:not(.woocommerce-cart):not(.woocommerce-checkout) .GLSDk-pickup { display: none !important; } .GLSDk-pickup__close { position: fixed !important; top: 1rem !important; right: 1rem !important; left: auto !important; display: inline-flex !important; align-items: center; justify-content: center; width: 2.75rem !important; height: 2.75rem !important; padding: 0 !important; border-radius: 50%; background: var(--rag-forest-800, #0f3324); color: #fff !important; font-size: 0; line-height: 0; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); z-index: 100000 !important; } .GLSDk-pickup__close::before { content: "\00d7"; font-family: inherit; font-size: 1.6rem; line-height: 1; font-weight: 400; } /* Udgave 4 af pluginnet tegner et andet kort (#sw) - se main.js, "GLS' kort, som pluginnet bygger det i dag". Det laa som en hvid side oven paa butikken, med GLS-blaa knapper, uden overskrift og uden vej ud, og paa en telefon var den nederste halvdel tom. Her bliver det et vindue i butikkens farver, der fylder skaermen paa en telefon. */ #sw.open #sw__overlay { background: rgba(9, 30, 21, 0.55); } #sw.open #sw__container { position: fixed; inset: 2rem; left: 50%; width: min(60rem, calc(100% - 4rem)); transform: translateX(-50%); min-height: 0; overflow: auto; overscroll-behavior: contain; background: var(--rag-cream-50, #fbf8f1); border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); color: var(--rag-ink-900, #13201a); font-family: inherit; font-size: 0.95rem; } @media (max-width: 640px) { #sw.open #sw__container { inset: 0; left: 0; width: 100%; transform: none; border-radius: 0; } } .rag-sw-top { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem 0.75rem 1.25rem; background: var(--rag-cream-50, #fbf8f1); border-bottom: 1px solid rgba(0, 0, 0, 0.08); } .rag-sw-top__titel { margin: 0; font-family: var(--rag-font-display, inherit); font-size: 1.25rem; line-height: 1.2; color: var(--rag-forest-800, #0f3324); } .rag-sw-top__luk { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; padding: 0 1rem; border: 0; border-radius: 999px; background: var(--rag-forest-700, #155234); color: #fff; font: inherit; font-weight: 600; cursor: pointer; } .rag-sw-top__luk::before { content: "\00d7"; font-size: 1.3rem; line-height: 1; font-weight: 400; } .rag-sw-top__luk:hover { background: var(--rag-forest-600, #1d6a45); } .rag-sw-top__luk:focus-visible { outline: 2px solid var(--rag-gold-600, #a8842f); outline-offset: 2px; } #sw #sw-search, #sw #sw-query-results { background: transparent; } #sw #sw-query-wrapper { gap: 0.5rem; padding: 0.75rem 1rem 0; } #sw #sw-query { flex: 1 1 auto; min-height: 44px; padding: 0 0.9rem; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 10px; background: #fff; font: inherit; font-size: 1rem; /* under 16 px zoomer iOS ind, naar feltet faar fokus */ } #sw #sw-query-btn { min-height: 44px; padding: 0 1.1rem; border: 0; border-radius: 10px; background: var(--rag-forest-700, #155234); color: #fff; font: inherit; font-weight: 600; cursor: pointer; } #sw #sw-display-options { padding: 0.75rem 1rem 0; gap: 0.5rem; } #sw .sw-display-option { flex: 1 1 0; min-height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 999px; border: 1.5px solid var(--rag-forest-700, #155234); color: var(--rag-forest-700, #155234); font-size: 0.95rem; font-weight: 600; cursor: pointer; } #sw .sw-display-option.selected { background: var(--rag-forest-700, #155234); color: #fff; border-color: var(--rag-forest-700, #155234); } #sw .sw-tab { padding: 0 1rem 1rem; } #sw .sw-query-results-description { padding: 0.75rem 0 0.25rem; font-size: 0.85rem; color: var(--rag-ink-700, #33443b); } /* Kortet var 100vw hoejt paa en telefon og 670 px paa en computer - begge dele mere end skaermen. */ #sw #sw-map { height: min(60vh, 32rem); border-radius: 12px; } #sw #sw-list-points { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0.75rem; } #sw .sw-point-info { float: none; width: auto; min-height: 0; margin: 0; padding: 0.9rem 1rem 3.6rem; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 12px; box-shadow: none; background: #fff; } #sw .sw-point-info-name { margin: 0 0 0.25rem; font-family: inherit; font-size: 1rem; font-weight: 700; } #sw .sw-point-info-addr { margin: 0 0 0.25rem; font-size: 0.9rem; } #sw .sw-point-info-distance { margin: 0 0 0.4rem; font-size: 0.85rem; color: var(--rag-ink-700, #33443b); } #sw .sw-point-info-open { min-height: 0; font-size: 0.85rem; } /* Pluginnet saetter margin-bottom: -10px inline paa hver dag, saa linjerne laa oven i hinanden. */ #sw .sw-point-info-day { margin: 0 !important; } #sw .sw-point-info-day label { margin: 0; color: var(--rag-ink-700, #33443b); } #sw .sw-point-info-btn, #sw .sw-point-info-btn:hover, #sw .sw-point-info-btn.selected { right: 1rem; bottom: 0.9rem; min-height: 44px; padding: 0 1.25rem; border: 0; border-radius: 999px; background: var(--rag-forest-700, #155234); color: #fff; font: inherit; font-weight: 600; } #sw .sw-point-info-btn:hover { background: var(--rag-forest-600, #1d6a45); } .GLSDk-pickup__close:hover { background: var(--rag-forest-700, #155234); } .GLSDk-pickup__close:focus-visible { outline: 2px solid var(--rag-gold-400, #dabd77); outline-offset: 3px; } /* Beskeden om at der ingen afhentningspunkter er, skal ikke ligne en fejl i siden, men et svar - og den skal have selskab af en vej videre. */ .GLSDk-pickup__error, .GLSDk-pickup__options { color: var(--rag-ink-900, #13201a); } /* Beskeden naar GLS ikke fandt nogen pakkeshops. Guld frem for roedt: det er ikke en fejl kunden har begaaet, det er en adresse der skal ses efter. */ .woocommerce-checkout .rag-pickup__none { flex: 0 0 100%; width: 100%; margin: 0.7rem 0 0; padding: 0.8rem 0.9rem; border-radius: 12px; background: color-mix(in srgb, var(--rag-gold-500) 14%, var(--rag-cream-50)); border: 1px solid color-mix(in srgb, var(--rag-gold-600) 45%, transparent); color: var(--rag-ink-900); font-size: 0.86rem; line-height: 1.5; } /* ------------------------------------------------------------------------- 41. Adresseforslag Hjaelp, ikke kontrol. Listen laegger sig under feltet og forsvinder igen; feltet er et almindeligt tekstfelt hele tiden, og kunden kan skrive og sende hvad som helst. ---------------------------------------------------------------------- */ .rag-adresse { position: relative; } /* To klassenavne, fordi temaet selv saetter .rag-prose ul { display: flex }. Den regel har én klasse og ét element og slaar dermed et enkelt klassenavn - og resultatet var at forslagene blev lagt op paa en raekke i en tynd hvid stribe. Det saa ud som om soegningen ikke virkede; den virkede fint, den var bare ulaeselig. Tredje gang i dette projekt at netop den regel bider. */ .rag-adresse .rag-adresse__liste { display: none; flex-direction: column; gap: 0; position: absolute; top: 0.25rem; left: 0; right: 0; z-index: 40; max-height: 16rem; overflow-y: auto; margin: 0; padding: 0.3rem; list-style: none; background: var(--rag-surface); border: 1px solid var(--rag-border-strong); border-radius: 12px; box-shadow: 0 10px 26px rgba(19, 32, 26, 0.14); } .rag-adresse.is-open .rag-adresse__liste { display: block; } /* Mens der spoerges. Uden det ser feltet doedt ud, og man taster videre eller giver op - listen kommer jo foerst naar svaret er der. */ .rag-adresse__snurre { position: absolute; top: -2.2rem; right: 0.85rem; width: 16px; height: 16px; border: 2px solid color-mix(in srgb, var(--rag-forest-700) 22%, transparent); border-top-color: var(--rag-forest-700); border-radius: 50%; /* Synligheden saettes fra JavaScript. Klassevejen virkede ikke: reglen laa i browserens stilark, elementet matchede den, og den slog alligevel ikke igennem. Frem for at lede videre efter hvorfor, styres den ét sted hvor der ikke er noget at tage fejl af. */ opacity: 0; pointer-events: none; transition: opacity 0.12s ease; animation: rag-spin 0.8s linear infinite; } @media (prefers-reduced-motion: reduce) { .rag-adresse__snurre { animation-duration: 2.4s; } } .rag-adresse .rag-adresse__punkt { margin: 0; padding: 0.55rem 0.7rem; border-radius: 8px; font-size: 0.9rem; line-height: 1.35; color: var(--rag-ink-900); cursor: pointer; position: static; } .rag-adresse .rag-adresse__punkt::before { content: none; } .rag-adresse__punkt:hover, .rag-adresse__punkt.is-active { background: color-mix(in srgb, var(--rag-leaf-500) 14%, var(--rag-cream-50)); color: var(--rag-forest-800); } /* ------------------------------------------------------------------------- 42. Pakkekoerslen, ordre for ordre Foerste udgave sendte hele bunken afsted i ét kald og stod saa og snurrede i tavshed, mens den doede undervejs. Her staar der hvad der sker med hver enkelt ordre - og hvilken der arbejdes paa lige nu. ---------------------------------------------------------------------- */ .rag-pack__modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(6, 20, 16, 0.55); backdrop-filter: blur(2px); } .rag-pack__modal[hidden] { display: none; } .rag-pack__modal-kort { width: min(34rem, 100%); max-height: 88vh; overflow-y: auto; padding: 1.5rem 1.6rem; background: var(--rag-surface); border-radius: var(--rag-radius-lg); box-shadow: 0 18px 50px rgba(6, 20, 16, 0.35); } .rag-pack__modal-titel { margin: 0 0 0.4rem; font-size: 1.15rem; } .rag-pack__modal-tal { margin: 0 0 0.9rem; font-weight: 600; color: var(--rag-ink-700); } .rag-pack__bar { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--rag-forest-700) 14%, transparent); overflow: hidden; margin-bottom: 1rem; } .rag-pack__bar-fyld { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--rag-forest-700); transition: width 0.25s ease; } .rag-pack__koe { list-style: none; margin: 0 0 1rem; padding: 0; } .rag-pack .rag-pack__koe-punkt::before { content: none; } .rag-pack .rag-pack__koe-punkt { position: static; display: grid; grid-template-columns: 4.2rem 1fr auto; gap: 0.7rem; align-items: baseline; padding: 0.45rem 0; border-bottom: 1px solid var(--rag-border); font-size: 0.86rem; } .rag-pack__koe-nr { font-weight: 700; font-variant-numeric: tabular-nums; } .rag-pack__koe-navn { min-width: 0; overflow-wrap: break-word; color: var(--rag-ink-700); } .rag-pack__koe-stand { text-align: right; font-size: 0.78rem; color: var(--rag-muted); } .rag-pack__koe-punkt.is-arbejder { background: color-mix(in srgb, var(--rag-gold-500) 10%, transparent); } .rag-pack__koe-punkt.is-arbejder .rag-pack__koe-stand { color: var(--rag-gold-700); font-weight: 600; } .rag-pack__koe-punkt.is-klar .rag-pack__koe-stand { color: var(--rag-forest-600); font-weight: 600; } .rag-pack__koe-punkt.is-fejl .rag-pack__koe-stand { color: #c0573f; font-weight: 600; } .rag-pack__modal-fine { margin: 0; font-size: 0.8rem; color: var(--rag-muted); line-height: 1.5; } .rag-pack__modal-slut { display: flex; align-items: center; gap: 1rem; margin-top: 1.1rem; } .rag-pack__modal-slut[hidden] { display: none; } .rag-pack__modal-luk { margin-left: auto; padding: 0.6rem 1.2rem; border: 1px solid var(--rag-border-strong); border-radius: 999px; background: transparent; font-family: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; } /* Kameraet som stregkodelaeser. */ .rag-pack__camera { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; padding: 0.8rem 1.2rem; border: 1px solid var(--rag-border-strong); border-radius: 999px; background: transparent; font-family: inherit; font-size: 0.92rem; font-weight: 600; color: var(--rag-forest-800); cursor: pointer; } .rag-pack__camera[hidden] { display: none; } .rag-pack__camera:hover { border-color: var(--rag-forest-600); } .rag-pack__lens { margin-top: 0.9rem; } .rag-pack__lens[hidden] { display: none; } .rag-pack__video { width: 100%; max-height: 46vh; border-radius: 12px; background: #000; object-fit: cover; } .rag-pack__lens-hint { margin: 0.5rem 0; font-size: 0.84rem; color: var(--rag-muted); } .rag-pack__lens-close { width: 100%; padding: 0.7rem 1.2rem; border: 1px solid var(--rag-border-strong); border-radius: 999px; background: transparent; font-family: inherit; font-weight: 600; cursor: pointer; } /* Tidligere bunker. Et hentelink kan gaa tabt - vinduet lukkes, browseren blokerer det - og saa skal man ikke koere hele bestillingen igen. */ .rag-pack__historik { list-style: none; margin: 0; padding: 0; } .rag-pack .rag-pack__historik li::before { content: none; } .rag-pack .rag-pack__historik li { position: static; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--rag-border); font-size: 0.88rem; } .rag-pack .rag-pack__historik a { font-weight: 600; color: var(--rag-forest-700); } .rag-pack__historik-stoerrelse { color: var(--rag-muted); font-size: 0.8rem; white-space: nowrap; } /* Svaret ved scannerfeltet skal kunne laeses paa en armslaengdes afstand, med en telefon i den anden haand. */ .rag-pack__block--scan .rag-pack__msg { margin-bottom: 1rem; font-size: 1.05rem; } .rag-pack__block--scan .rag-pack__msg-text { font-size: 1.05rem; } /* Advarslen om at vaelge pakkeshop giver ingen mening, foer kunden har skrevet hvor de bor: der er ingen shops at vaelge imellem endnu, og beskeden laeses som en fejl, man ikke kan rette. Scriptet fjerner klassen, naar adressen er udfyldt. */ /* Samme form som reglen den skal slaa: ".woocommerce-checkout .rag-pickup" har baade en klasse mere og staar foerst - en kort selektor her ville tabe og advarslen blive staaende. */ .woocommerce-checkout .rag-pickup.rag-pickup--afventer { display: none; } /* ------------------------------------------------------------------------- "Lagt i kurven"-dialogen (main.js, ragenbrug_kurv_signal()). ---------------------------------------------------------------------- */ .rag-kurvmodal { /* Temaets nulstilling (margin: 0) slaar browserens centrering af ud - saa stod den i oeverste venstre hjoerne. */ position: fixed; inset: 0; margin: auto; height: fit-content; width: min(28rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 1.6rem 1.5rem 1.4rem; border: 0; border-radius: 20px; background: var(--rag-surface, #fff); color: var(--rag-ink-900); box-shadow: 0 30px 80px -20px rgba(9, 30, 21, 0.45); overflow: auto; } .rag-kurvmodal::backdrop { background: rgba(9, 30, 21, 0.5); backdrop-filter: blur(2px); } .rag-kurvmodal[open] { animation: rag-kurvmodal-ind 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2); } .rag-kurvmodal[open]::backdrop { animation: rag-kurvmodal-bag 0.22s ease; } .rag-kurvmodal.is-lukker { animation: rag-kurvmodal-ud 0.16s ease forwards; } @keyframes rag-kurvmodal-ind { from { opacity: 0; transform: translateY(12px) scale(0.97); } } @keyframes rag-kurvmodal-ud { to { opacity: 0; transform: translateY(8px) scale(0.98); } } @keyframes rag-kurvmodal-bag { from { opacity: 0; } } .rag-kurvmodal__luk { position: absolute; top: 0.7rem; right: 0.7rem; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--rag-ink-700); cursor: pointer; } .rag-kurvmodal__luk:hover { background: color-mix(in srgb, var(--rag-forest-700) 8%, transparent); color: var(--rag-forest-800); } .rag-kurvmodal__luk:focus-visible { outline: 2px solid var(--rag-gold-500); outline-offset: 2px; } .rag-kurvmodal__status { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0 2.6rem 1.1rem 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rag-forest-700); } .rag-kurvmodal__status svg { flex: 0 0 auto; padding: 3px; border-radius: 50%; background: var(--rag-forest-700); color: #fff; width: 22px; height: 22px; } .rag-kurvmodal__vare { display: flex; align-items: center; gap: 1rem; } .rag-kurvmodal__billede { flex: 0 0 auto; width: 88px; height: 88px; object-fit: contain; border-radius: 12px; background: color-mix(in srgb, var(--rag-gold-500) 12%, var(--rag-cream-50, #fbf8f1)); } .rag-kurvmodal__tekst { min-width: 0; } .rag-kurvmodal__navn { margin: 0; font-family: var(--rag-font-display, inherit); font-size: 1.15rem; line-height: 1.3; color: var(--rag-forest-900, var(--rag-ink-900)); overflow-wrap: anywhere; } .rag-kurvmodal__pris { margin: 0.3rem 0 0; font-weight: 700; color: var(--rag-gold-700); font-variant-numeric: tabular-nums; } .rag-kurvmodal__note { margin: 1.1rem 0 0; font-size: 0.9rem; line-height: 1.5; color: var(--rag-ink-700); } .rag-kurvmodal__knapper { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.4rem; } .rag-kurvmodal__knapper .rag-btn { width: 100%; justify-content: center; min-height: 48px; } .rag-kurvmodal__kurv { font-size: 1.02rem; } /* Paa en telefon: et ark nedefra, med knapperne under tommelfingeren. */ @media (max-width: 600px) { .rag-kurvmodal { margin: auto 0 0; width: 100%; max-width: none; border-radius: 20px 20px 0 0; padding-bottom: calc(1.4rem + env(safe-area-inset-bottom, 0px)); } .rag-kurvmodal[open] { animation-name: rag-kurvmodal-op; } .rag-kurvmodal.is-lukker { animation-name: rag-kurvmodal-ned; } } @keyframes rag-kurvmodal-op { from { transform: translateY(100%); } } @keyframes rag-kurvmodal-ned { to { transform: translateY(100%); } } @media (prefers-reduced-motion: reduce) { .rag-kurvmodal[open], .rag-kurvmodal[open]::backdrop, .rag-kurvmodal.is-lukker { animation: none; } } /* ------------------------------------------------------------------------- Kortbetaling i kassen (ragenbrug_kortlogoer()). Én betalingsmaade: et kort med navnet til venstre og kortene til hoejre, og "Sikkert og gebyrfrit." som en stille linje med en haengelaas under. ---------------------------------------------------------------------- */ .woocommerce-checkout #payment ul.payment_methods li.payment_method_reepay_checkout { padding: 0.95rem 1rem; border: 1.5px solid color-mix(in srgb, var(--rag-forest-700) 55%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--rag-leaf-500, #3f8f5f) 6%, var(--rag-surface, #fff)); } .woocommerce-checkout #payment ul.payment_methods li.payment_method_reepay_checkout > label { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 0.8rem; margin: 0; font-size: 1rem; color: var(--rag-forest-800); } .rag-kortlogoer { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; } .rag-kortlogoer img.rag-kortlogo { display: block; width: auto; height: 24px; max-width: none; padding: 3px 5px; box-sizing: content-box; background: #fff; border: 1px solid var(--rag-border); border-radius: 5px; } .woocommerce-checkout #payment li.payment_method_reepay_checkout div.payment_box { margin: 0.45rem 0 0; padding: 0; background: none; font-size: 0.86rem; color: var(--rag-ink-700); } .woocommerce-checkout #payment li.payment_method_reepay_checkout div.payment_box p { display: flex; align-items: center; gap: 0.4rem; margin: 0; } .woocommerce-checkout #payment li.payment_method_reepay_checkout div.payment_box p::before { content: ""; flex: 0 0 auto; width: 15px; height: 15px; background: var(--rag-forest-700); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat; } /* ------------------------------------------------------------------------- Kurven: CSS-faelden fra .rag-prose (11. okt. 2026). Kurven staar inde i sideindholdet, og .rag-prose h2 / ul li / p vandt over kurvens egne regler: 61 px tom luft og 28 px skrift over "Din kurv", varelinjen uden venstre polstring (billedet klistret til kanten) og momsfodnoten i broedtekstens 17 px. Hoejere specificitet her. ---------------------------------------------------------------------- */ .rag-prose .rag-cart__head { align-items: center; } .rag-prose h2.rag-cart__title { margin: 0; font-size: 1.3rem; line-height: 1.2; } .woocommerce-cart .rag-prose li.rag-cart__item { padding: 1.1rem 1.4rem; } .rag-prose p.rag-vat-note { margin: 0.9rem 0 0; font-size: 0.8rem; line-height: 1.5; color: var(--rag-muted); text-align: left; } .rag-prose p.rag-vat-note .rag-vat-note__mark { color: var(--rag-gold-700); } /* Alle varer findes i ét eksemplar - der er intet antal at rette, og knappen stod altid graa. Bliver den slaaet til (et antal aendres), kommer den frem. */ .rag-cart__update:disabled { display: none; } @media (max-width: 560px) { .woocommerce-cart .rag-prose li.rag-cart__item { padding: 1rem; } } /* Ordreoversigten paa en telefon: WooCommerce skriver etiketten som "Subtotal: " i fed, og prisfarven (guld) smittede af paa den. Samme udtryk som paa computeren: etiket i broedtekst til venstre, beloeb i guld til hoejre. */ @media (max-width: 768px) { .woocommerce .cart_totals table.shop_table_responsive tr td::before, .woocommerce-page .cart_totals table.shop_table_responsive tr td::before { content: attr(data-title); font-weight: 500; color: var(--rag-ink-900); } .woocommerce .cart_totals table.shop_table_responsive tr.order-total td::before, .woocommerce-page .cart_totals table.shop_table_responsive tr.order-total td::before { font-weight: 700; } } @media (max-width: 768px) { .woocommerce .cart_totals table.shop_table_responsive tr:nth-child(2n) td, .woocommerce-page .cart_totals table.shop_table_responsive tr:nth-child(2n) td { background-color: transparent; } } /* ------------------------------------------------------------------------- Tak-siden (woocommerce/checkout/thankyou.php). ---------------------------------------------------------------------- */ .rag-tak { display: grid; gap: 1.4rem; } .rag-tak__hero { display: flex; align-items: center; gap: 1.1rem; padding: 1.5rem 1.6rem; border-radius: var(--rag-radius-lg, 20px); background: color-mix(in srgb, var(--rag-leaf-500, #3f8f5f) 9%, var(--rag-surface, #fff)); border: 1px solid color-mix(in srgb, var(--rag-leaf-500, #3f8f5f) 28%, transparent); } .rag-tak__hero--fejl { display: block; background: color-mix(in srgb, #c0573f 7%, var(--rag-surface, #fff)); border-color: color-mix(in srgb, #c0573f 30%, transparent); } .rag-tak__ikon { flex: 0 0 auto; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--rag-forest-700); color: #fff; box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--rag-forest-700) 70%, transparent); } .rag-prose .rag-tak p.rag-tak__lead { margin: 0; font-family: var(--rag-font-display, inherit); font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.25; color: var(--rag-forest-900, var(--rag-ink-900)); } .rag-prose .rag-tak p.rag-tak__tekst { margin: 0.35rem 0 0; font-size: 0.95rem; color: var(--rag-ink-700); } .rag-prose .rag-tak p.rag-tak__knapper { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1rem 0 0; } /* Fire fakta paa én raekke - to og to paa en telefon. */ .rag-tak__fakta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; border: 1px solid var(--rag-border); border-radius: var(--rag-radius-lg, 20px); background: var(--rag-surface, #fff); overflow: hidden; } .rag-tak__fakt { padding: 1rem 1.2rem; border-left: 1px solid var(--rag-border); min-width: 0; } .rag-tak__fakt:first-child { border-left: 0; } .rag-tak__fakt dt { margin: 0 0 0.25rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rag-muted); } .rag-tak__fakt dd { margin: 0; font-weight: 600; color: var(--rag-ink-900); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; } .rag-tak__fakt dd.rag-tak__beloeb { color: var(--rag-gold-700); } .rag-tak__nu { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; } .rag-tak__levering, .rag-tak__trin { padding: 1.1rem 1.25rem; border-radius: var(--rag-radius-lg, 20px); background: var(--rag-surface, #fff); border: 1px solid var(--rag-border); } .rag-tak__levering { display: flex; gap: 0.8rem; align-items: flex-start; } .rag-tak__levering-ikon { flex: 0 0 auto; color: var(--rag-forest-700); margin-top: 0.1rem; } .rag-prose .rag-tak p.rag-tak__levering-titel, .rag-prose .rag-tak p.rag-tak__trin-titel { margin: 0 0 0.3rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rag-forest-700); } .rag-prose .rag-tak p.rag-tak__levering-tekst { margin: 0; font-weight: 600; color: var(--rag-ink-900); line-height: 1.45; } .rag-prose .rag-tak .rag-tak__trin ol { margin: 0; padding: 0; list-style: none; counter-reset: rag-trin; display: grid; gap: 0.45rem; } .rag-prose .rag-tak .rag-tak__trin ol li { position: relative; padding-left: 1.9rem; font-size: 0.93rem; line-height: 1.45; color: var(--rag-ink-700); counter-increment: rag-trin; } .rag-prose .rag-tak .rag-tak__trin ol li::before { content: counter(rag-trin); position: absolute; left: 0; top: 0.05rem; display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: color-mix(in srgb, var(--rag-gold-500) 22%, transparent); color: var(--rag-gold-700); font-size: 0.75rem; font-weight: 700; } /* WooCommerce' ordredetaljer og adresser - samme kort som kurven. */ .rag-tak .woocommerce-order-details, .rag-tak .woocommerce-customer-details, .rag-tak .woocommerce-bacs-bank-details { margin: 0; padding: 1.3rem 1.4rem; border: 1px solid var(--rag-border); border-radius: var(--rag-radius-lg, 20px); background: var(--rag-surface, #fff); } .rag-prose .rag-tak h2.woocommerce-order-details__title, .rag-prose .rag-tak h2.woocommerce-column__title, .rag-prose .rag-tak h2.wc-bacs-bank-details-heading { margin: 0 0 0.8rem; font-size: 1.2rem; line-height: 1.25; } .rag-tak table.woocommerce-table--order-details { margin: 0; border: 0; border-collapse: collapse; width: 100%; } .rag-tak table.woocommerce-table--order-details th, .rag-tak table.woocommerce-table--order-details td { padding: 0.7rem 0; border: 0; border-top: 1px solid var(--rag-border); background: none; font-weight: 500; vertical-align: top; } .rag-tak table.woocommerce-table--order-details thead th { border-top: 0; padding-top: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rag-muted); } .rag-tak table.woocommerce-table--order-details td:last-child, .rag-tak table.woocommerce-table--order-details th:last-child { text-align: right; } .rag-tak table.woocommerce-table--order-details tfoot tr:last-child th, .rag-tak table.woocommerce-table--order-details tfoot tr:last-child td { font-weight: 500; } .rag-tak table.woocommerce-table--order-details tfoot tr.order-total th, .rag-tak table.woocommerce-table--order-details tfoot tr.order-total td { font-weight: 700; font-size: 1.05rem; } .rag-tak .woocommerce-customer-details .woocommerce-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.2rem; } .rag-tak .woocommerce-customer-details .woocommerce-column { width: auto; float: none; padding: 0; margin: 0; } .rag-tak .woocommerce-customer-details address { margin: 0; padding: 0; border: 0; font-style: normal; line-height: 1.6; color: var(--rag-ink-700); } .rag-prose .rag-tak p.rag-tak__videre { margin: 0.4rem 0 0; } @media (max-width: 720px) { .rag-tak__hero { align-items: flex-start; padding: 1.2rem; } .rag-tak__ikon { width: 46px; height: 46px; } .rag-tak__fakta { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rag-tak__fakt:nth-child(odd) { border-left: 0; } .rag-tak__fakt:nth-child(n+3) { border-top: 1px solid var(--rag-border); } .rag-tak__nu { grid-template-columns: minmax(0, 1fr); } .rag-tak .woocommerce-order-details, .rag-tak .woocommerce-customer-details { padding: 1.1rem; } .rag-tak .woocommerce-customer-details .woocommerce-columns { grid-template-columns: minmax(0, 1fr); } } /* Tak-siden, rettelser efter foerste kig: - tallene i "Det sker nu" staar i markuppen: købsflowets globale regel fjerner alle li::before (se "Ingen prosaprikker paa nogen liste"). - .woocommerce-columns har clearfix-pseudoelementer, der i et gitter tog hver sin celle - adresserne stod skaevt. - bankboksens prikkede streg kom fra WooCommerce' liste-stil. */ .rag-prose .rag-tak .rag-tak__trin ol li { padding-left: 2rem; } .rag-tak__nr { position: absolute; left: 0; top: 0.05rem; display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: color-mix(in srgb, var(--rag-gold-500) 22%, transparent); color: var(--rag-gold-700); font-size: 0.75rem; font-weight: 700; line-height: 1; } .rag-tak .woocommerce-customer-details .woocommerce-columns::before, .rag-tak .woocommerce-customer-details .woocommerce-columns::after { content: none; display: none; } .rag-tak ul.wc-bacs-bank-details li, .rag-tak ul.wc-bacs-bank-details { border: 0; } /* ------------------------------------------------------------------------- Tom side efter et filter (ragenbrug_ingen_varer()). ---------------------------------------------------------------------- */ .rag-tomt { display: grid; justify-items: center; gap: 0.6rem; padding: clamp(2rem, 5vw, 3.2rem) 1.5rem; text-align: center; border: 1px dashed color-mix(in srgb, var(--rag-forest-700) 30%, transparent); border-radius: var(--rag-radius-lg, 20px); background: var(--rag-surface, #fff); } .rag-tomt__ikon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: color-mix(in srgb, var(--rag-gold-500) 16%, transparent); color: var(--rag-gold-700); margin-bottom: 0.3rem; } .rag-prose p.rag-tomt__titel, p.rag-tomt__titel { margin: 0; font-family: var(--rag-font-display, inherit); font-size: clamp(1.2rem, 2.2vw, 1.5rem); line-height: 1.25; color: var(--rag-forest-900, var(--rag-ink-900)); } .rag-prose p.rag-tomt__tekst, p.rag-tomt__tekst { margin: 0; max-width: 32rem; color: var(--rag-ink-700); font-size: 0.95rem; } ul.rag-tomt__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 0.6rem 0 0; padding: 0; list-style: none; } ul.rag-tomt__chips li { margin: 0; padding: 0; } ul.rag-tomt__chips li::before { content: none !important; } a.rag-tomt__chip { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 40px; padding: 0.4rem 0.6rem 0.4rem 0.95rem; border: 1.5px solid var(--rag-border-strong); border-radius: 999px; background: var(--rag-surface, #fff); color: var(--rag-ink-900); font-weight: 600; font-size: 0.9rem; text-decoration: none; } a.rag-tomt__chip:hover { border-color: #c0573f; color: #c0573f; } .rag-tomt__x { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--rag-ink-900) 8%, transparent); font-size: 1rem; line-height: 1; } a.rag-tomt__chip:hover .rag-tomt__x { background: #c0573f; color: #fff; } .rag-prose p.rag-tomt__knapper, p.rag-tomt__knapper { margin: 0.9rem 0 0; } /* ------------------------------------------------------------------------- Kassen i én kolonne (11. okt. 2026). Baymard: en formular i én kolonne giver faerre oversprungne felter og faerre fejl end flere kolonner - oejet skal kun én vej. Raekkefoelgen er den, man tager stilling i: dine oplysninger, levering og pakkeshop, ordren, betaling og til sidst knappen. ---------------------------------------------------------------------- */ /* Ikke tak-siden: den har sit eget, bredere layout. */ body.woocommerce-checkout:not(.woocommerce-order-received) .rag-prose > .woocommerce { max-width: 42rem; margin-inline: auto; } .woocommerce-checkout form.checkout.woocommerce-checkout { display: block; } .woocommerce-checkout #customer_details { margin-bottom: 2rem; } .woocommerce-checkout #order_review_heading { margin: 0 0 0.9rem; } .woocommerce-checkout #order_review { max-width: none; position: static; } @media (min-width: 62rem) { .woocommerce-checkout #order_review { position: static; } } body.woocommerce-checkout:not(.woocommerce-order-received) .rag-pagehero .rag-container { width: min(100% - (var(--rag-gutter) * 2), 42rem); } /* Betal-knappen: sidens eneste guldflade i kassen, stor nok til en tommel. */ .woocommerce-checkout #place_order { display: flex; align-items: center; justify-content: center; gap: 0.55rem; width: 100%; min-height: 58px; margin-top: 1.1rem; font-size: 1.12rem; font-weight: 700; letter-spacing: 0.01em; } .woocommerce-checkout #place_order::before { content: ""; flex: 0 0 auto; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat; } /* Fast bjaelke i bunden paa en telefon (main.js): total + betal, saa knappen altid er inden for raekkevidde. Den forsvinder, naar den rigtige knap er paa skaermen. */ .rag-betalbar { display: none; } @media (max-width: 768px) { .rag-betalbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: flex; align-items: center; gap: 0.9rem; padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom, 0px)); background: var(--rag-surface, #fff); border-top: 1px solid var(--rag-border); box-shadow: 0 -10px 30px -12px rgba(9, 30, 21, 0.3); transform: translateY(110%); transition: transform 0.22s ease; } .rag-betalbar.is-synlig { transform: none; } .rag-betalbar__total { flex: 0 1 auto; min-width: 0; display: grid; line-height: 1.15; } .rag-betalbar__total span { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rag-muted); } .rag-betalbar__total strong { font-size: 1.12rem; color: var(--rag-gold-700); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rag-betalbar__knap { flex: 1 1 auto; min-width: 7.5rem; min-height: 52px; justify-content: center; font-size: 1.05rem; font-weight: 700; } .rag-betalbar__knap.is-spaerret { filter: grayscale(0.6); opacity: 0.75; } body.rag-har-betalbar { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); } .woocommerce-checkout #place_order { min-height: 62px; font-size: 1.18rem; } } @media (prefers-reduced-motion: reduce) { .rag-betalbar { transition: none; } } /* Vilkaar-fluebenet, naar bjaelken har sendt kunden derhen. */ .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper.rag-mangler { border-radius: 10px; outline: 2px solid #c0573f; outline-offset: 6px; } .rag-vilkaar-besked { margin: 0.5rem 0 0; font-size: 0.86rem; font-weight: 600; color: #b3261e; } /* Fornavn/efternavn: WooCommerce' form-row-first/-last har width: 47% (til float-layoutet). I gitteret blev det 47 % af cellen - felterne var halvt saa brede som deres kolonne. */ .woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row, .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row { width: auto; float: none; } .woocommerce-checkout .woocommerce-input-wrapper { display: block; } /* Ordretabellen i kassen maa aldrig blive bredere end kortet. Paa en telefon (17. okt. 2026) skubbede "Total 489,00 kr. (inkluderer 7,80 kr. Moms)" tabellen 20 px ud, saa alle beloeb blev skaaret over. Momsteksten er fjernet (ragenbrug_total_uden_momstekst), og skulle en anden tekst dukke op, bryder den i stedet for at sprede tabellen. */ .woocommerce-checkout-review-order-table th, .woocommerce-checkout-review-order-table td { overflow-wrap: anywhere; } .woocommerce-checkout-review-order-table .includes_tax, .cart_totals .includes_tax { display: block; font-size: 0.8em; white-space: normal; } /* Adressens note ("Ingen butik. Aflevering og afhentning efter aftale.") og telefontiden i footeren - saa adressen ikke laeses som en butik. */ .rag-footer__note { display: block; margin-top: 0.25rem; font-size: 0.86em; line-height: 1.4; color: var(--rag-gold-400); } .rag-footer__hint { font-size: 0.78em; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rag-on-dark-muted); } .rag-contact__note { font-size: 0.95rem; line-height: 1.45; color: var(--rag-muted); } span.rag-contact__value:hover { color: var(--rag-forest-800); } /* Hero: webshoppens tryghed - gratis fragt og kort/MobilePay (front-page.php). Lys tekst og hvide logo-brikker paa det moerkegroenne, saa det ses med det samme, men stadig under knapperne i rang. */ .rag-hero__trust { margin: 1.6rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.75rem; } .rag-hero__trust-item { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.6rem 0.75rem; padding: 0.7rem 1rem; border: 1px solid color-mix(in srgb, var(--rag-gold-500) 38%, transparent); border-radius: 14px; background: color-mix(in srgb, #fff 7%, transparent); color: #fff; font-weight: 600; font-size: 0.98rem; line-height: 1.3; } .rag-hero__trust-ikon { display: inline-flex; color: var(--rag-gold-400); } .rag-hero__logoer { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; } .rag-hero__logoer img.rag-kortlogo { display: block; width: auto; height: 22px; max-width: none; padding: 3px 5px; box-sizing: content-box; background: #fff; border-radius: 5px; } @media (max-width: 600px) { .rag-hero__trust { flex-direction: column; align-items: stretch; } .rag-hero__trust-item { justify-content: flex-start; } }