/* ========================================================================== KS Deals Dropdown v1.1.4 — Frontend CSS v1.1.4: TWO alignment fixes (same class of bug as the KS Produkt Single top-bar case — wrong anchor -> doesn't line up + doesn't follow container-width changes): 1) Trigger now aligns its RIGHT edge with the cart above it. The wrap's right inset went 16px -> 37px. 37px is the cart's own structural inset from the 1500 container edge (measured live: cartInset_from_midContainer = 37), and the nav-row + mid-header share the same right edge (both 1500, centered), so a fixed 37px inset keeps the trigger under the cart at ANY container width (1300/1500/1800). Vertical was already correct (trigger text mid-Y == menu link text mid-Y). 2) Dropdown panel is no longer full-viewport-width. It is now a centered 1500px box (max-width:1500px), so it lines up 1:1 with the top-bar/menu/cart content AND leaves free space on both sides. That free space is what lets the mouse leave the panel sideways to close it — previously the 100vw panel was hover- active edge to edge, so the only way to close it was to move the mouse UP. The mega-menu already worked this way (bounded width). translateY open/close animation is folded into the translateX(-50%) centering transform. v1.1.2: No CSS changes from v1.1.1. The actual fix in v1.1.2 was a JS wiring fix — the dropdown's z-index values below only have effect once setupWrap() actually runs and portals the dropdown to . See ksdd-frontend.js + class-ksdd-frontend.php v1.1.2. v1.1.1: Dropdown is now portaled to by JS at init. That means the dropdown's stacking context no longer depends on the trigger-wrap, so we can lower the trigger-wrap back to a passive z-index (50) and give the dropdown its own high z-index (100000) for when it's open. This makes the mini-cart dropdown (z-index 9999) win over the passive trigger badge, while our open dropdown still wins over the mega-menu (also 9999). v1.0.5: Switch to position:absolute placement on the trigger-wrap. This bypasses flex-alignment entirely and gives us pixel-perfect control that works regardless of which parent the JS injects into. v1.0.4: Trigger injected INSIDE .os-nav-col-right (sharing menu's vertical zone) v1.0.3: align-self:center on trigger-wrap (didn't work — sibling-of-menu). v1.0.2: Trigger now injected directly into nav-row flex container via JS. ========================================================================== */ /* ===== Trigger wrap — absolute positioning relative to nav-row ===== */ /* Make .os-nav-row a positioning context so absolute trigger anchors to it */ .os-nav-row { position: relative !important; } body .ksdd-trigger-wrap, body .ksdd-injected-direct { position: absolute !important; /* anchor to .os-nav-row */ top: 0 !important; /* match menu zone top */ right: 37px !important; /* v1.1.4: was 16px. 37px = the cart's own structural inset from the 1500 container's right edge, so the trigger's right edge lines up with the cart above it (verified live: trigger right == cart right, gap 0). nav-row and mid-header share the same right edge (both 1500, centered), so this holds at any container width. */ height: 50px !important; /* match menu-link height */ display: flex !important; align-items: center !important; /* center the badge vertically */ z-index: 50; /* v1.1.1: back to passive low value. The dropdown is portaled to by JS so it no longer needs to inherit our stacking context, and the mini-cart dropdown (z-index 9999) must be able to win over this badge when open. */ margin: 0 !important; padding: 0 !important; list-style: none !important; } body .ksdd-trigger-wrap::before, body .ksdd-trigger-wrap::marker { content: none !important; display: none !important; } /* ===== The trigger itself — small flat badge, frachtbedarf.de-sized ===== */ body .ksdd-trigger, body a.ksdd-trigger { display: inline-flex !important; align-items: center; padding: 4px 8px !important; /* compact, like frachtbedarf */ border-radius: 4px !important; font-size: 11px !important; /* small, like frachtbedarf */ font-weight: 700 !important; line-height: 1 !important; text-decoration: none !important; text-transform: none !important; letter-spacing: 0 !important; white-space: nowrap !important; position: relative; cursor: pointer; transition: filter 0.2s ease, transform 0.15s ease !important; border: none !important; height: auto !important; /* color and background come from dynamic CSS body-prefixed selectors */ } body .ksdd-trigger:hover, body a.ksdd-trigger:hover { filter: brightness(1.08); transform: translateY(-1px); text-decoration: none !important; } body .ksdd-trigger:focus, body a.ksdd-trigger:focus { outline: 2px solid currentColor; outline-offset: 2px; } body .ksdd-trigger .ksdd-trigger-text { line-height: 1 !important; font-size: inherit !important; } /* ===== Dropdown — centered bounded panel (v1.1.4) ===== v1.1.4: was a full-viewport band (left:0; right:0; width:100vw). Now a centered 1500px box so it lines up with the site content (top-bar/menu/ cart) AND leaves free space on both sides so the mouse can leave the panel sideways to close it. Centering uses left:50% + translateX(-50%); the open/close translateY is folded INTO that transform (closed pushes down 10px, open sits at 0). z-index 100000: the dropdown is portaled to by JS at init, so it lives outside the trigger-wrap's stacking context and wins over the mega-menu (9999) and mini-cart (9999) when open. When closed it's pointer-events:none + visibility:hidden so the high z-index is moot. */ .ksdd-dropdown { position: fixed; left: 50%; width: 100%; max-width: 1500px; top: var(--ksdd-top, 90px); background: #fff; box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.12), 0 4px 10px -4px rgba(0, 0, 0, 0.1); border: 1px solid #e5e7eb; border-radius: 0 0 12px 12px; opacity: 0; visibility: hidden; transform: translate(-50%, -10px); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s; pointer-events: none; z-index: 100000; box-sizing: border-box; overflow: hidden; } .ksdd-trigger-wrap:hover .ksdd-dropdown, .ksdd-dropdown:hover, .ksdd-dropdown.ksdd-is-open { opacity: 1; visibility: visible; transform: translate(-50%, 0); pointer-events: auto; transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s; } /* ===== Dropdown inner ===== */ .ksdd-inner { max-width: 1500px; margin: 0 auto; padding: 32px 24px 24px; box-sizing: border-box; } /* ===== Header ===== */ .ksdd-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; } .ksdd-header-left { flex: 1; min-width: 200px; } .ksdd-title { font-size: 22px; font-weight: 700; color: #1a1a1a; display: flex; align-items: center; gap: 10px; margin: 0; line-height: 1.2; } .ksdd-title-icon { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; } .ksdd-title-icon svg { width: 24px; height: 24px; display: block; } .ksdd-subtitle { color: #666; font-size: 14px; margin-top: 4px; } .ksdd-cta { text-decoration: none; font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; transition: transform 0.2s ease; white-space: nowrap; } .ksdd-cta:hover { transform: translateX(3px); } /* ===== Grid ===== */ .ksdd-grid { display: grid; gap: 16px; width: 100%; } /* ===== Cards (fallback renderer) ===== */ .ksdd-card { background: #fff; border: 1px solid #ececec; border-radius: 8px; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; text-decoration: none !important; display: flex; flex-direction: column; color: #1a1a1a; position: relative; min-width: 0; } .ksdd-card:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); } .ksdd-card-image { aspect-ratio: 1 / 1; background: #fafafa; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; } .ksdd-card-image img, .ksdd-card-img { max-width: 90% !important; max-height: 90% !important; width: auto !important; height: auto !important; object-fit: contain !important; } .ksdd-card-badge { position: absolute; top: 8px; left: 8px; color: #fff; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 4px; z-index: 2; } .ksdd-card-body { padding: 12px; flex: 1; display: flex; flex-direction: column; } .ksdd-card-title { font-size: 14px; font-weight: 500; color: #1a1a1a; line-height: 1.3; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ksdd-card-price { margin-top: auto; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .ksdd-card-price del { color: #999; font-size: 12px; text-decoration: line-through; } .ksdd-card-price ins { text-decoration: none; font-size: 16px; font-weight: 700; } .ksdd-card-price .woocommerce-Price-amount { font-size: 16px; font-weight: 700; } /* ===== Footer ===== */ .ksdd-footer { border-top: 1px solid #e5e7eb; padding: 16px 0 0; margin-top: 20px; text-align: center; } .ksdd-footer-link { text-decoration: none; font-weight: 600; font-size: 14px; } .ksdd-footer-link:hover { text-decoration: underline; } /* ===== Empty state ===== */ .ksdd-empty { padding: 40px 20px; text-align: center; color: #999; font-size: 14px; } /* ===== Mobile ===== */ @media (max-width: 768px) { body .ksdd-trigger, body a.ksdd-trigger { padding: 3px 6px !important; font-size: 10px !important; } .ksdd-inner { padding: 20px 16px 16px; } .ksdd-title { font-size: 18px; } .ksdd-header { flex-direction: column; align-items: flex-start; } .ksdd-cta { align-self: flex-end; } } /* ===== Force-open class ===== */ .ksdd-dropdown.ksdd-is-open { opacity: 1 !important; visibility: visible !important; transform: translate(-50%, 0) !important; pointer-events: auto !important; } /* =========================================================================== v1.1.0 — Kombi-tilbud cards + all-deals page styling =========================================================================== Combo cards reuse .ksdd-card structure so they line up with product cards in the same grid (1 cell wide each). They override only the inner content: two thumbnails side-by-side with a plus overlay, KOMBI-TILBUD badge, title, and CTA. The combos section is rendered ABOVE or BELOW the products section based on ksdd_combos_position setting. Both share the .ksdd-grid container. =========================================================================== */ /* ===== Combos section inside dropdown ===== */ .ksdd-combos-section { margin-bottom: 16px; } .ksdd-combos-section:last-child { margin-bottom: 0; margin-top: 16px; } /* ===== Combo card ===== */ .ksdd-combo-card { /* Inherits .ksdd-card layout (display, border-radius, hover) so the grid stays aligned. Just tweak the visual identity below. v1.1.1: Use the SAME grey outline as .ksdd-card (1px #ececec) in the default state so the combo card visually matches product cards. On hover it transitions to the brand red border just like product cards. */ position: relative; border: 1px solid #ececec; background: linear-gradient(135deg, #fff5f7 0%, #ffe4ec 100%); overflow: hidden; } .ksdd-combo-card:hover { border-color: var(--ksdd-card-hover-border, #d63031); } .ksdd-combo-card-image { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #fff; } /* "KOMBI-TILBUD" corner badge */ .ksdd-combo-card-badge { position: absolute; top: 8px; left: 8px; z-index: 2; background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: #fff; font-size: 9px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; padding: 4px 8px; border-radius: 4px; box-shadow: 0 2px 6px rgba(217, 119, 6, 0.35); line-height: 1; } /* Two thumbnails side-by-side with plus overlay */ .ksdd-combo-card-thumbs { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; align-items: center; justify-items: center; padding: 12px; gap: 8px; } .ksdd-combo-card-thumb { width: 100%; height: 100%; background-size: contain; background-position: center; background-repeat: no-repeat; border-radius: 6px; } .ksdd-combo-card-thumb--placeholder { background: #f3f4f6; } /* Plus icon between thumbnails, absolutely positioned to overlap */ .ksdd-combo-card-plus { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 28px; height: 28px; border-radius: 50%; background: #fff; color: #d63031; font-size: 18px; font-weight: 800; line-height: 28px; text-align: center; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); z-index: 3; } /* Combo card CTA — inherits .ksdd-card body styling but adds emphasis */ .ksdd-combo-card-cta { color: var(--ksdd-card-hover-border, #d63031); font-weight: 700; font-size: 13px; margin-top: 4px; } /* ===== "Alle tilbud" page sections (rendered by [ksdd_all_deals]) ===== */ .ksdd-all-deals { max-width: 1280px; margin: 0 auto; padding: 0 16px; } .ksdd-all-deals-section { margin-bottom: 48px; } .ksdd-all-deals-section:last-child { margin-bottom: 0; } .ksdd-all-deals-section-title { font-size: 28px; font-weight: 700; margin: 0 0 24px 0; color: #1f2937; } .ksdd-all-deals-combos .ksdd-grid { /* Inherit the same grid layout. Combo cards in this context get a bit more breathing room since they're the focal point on this page. */ gap: 20px; } /* ===== Mobile tweaks for combo cards ===== */ @media (max-width: 768px) { .ksdd-combo-card-badge { font-size: 8px; padding: 3px 6px; } .ksdd-combo-card-plus { width: 24px; height: 24px; line-height: 24px; font-size: 16px; } .ksdd-all-deals-section-title { font-size: 22px; } } /* ========================================================================= VARIANT B - Tilbudskort (kun i foldout + /alle-tilbud/) ========================================================================= Scoped to .ksdd-products-via-ksps so it ONLY restyles the ks-product-showcase cards rendered inside the dropdown and the all-deals page. KSPS used anywhere else (forside etc.) is untouched. KSPS sets some properties via #ksps-N id-selectors (specificity 0,1,1,0). To win the cascade without editing KSPS, we raise specificity by chaining .ksdd-products-via-ksps with the element class, and use !important only on the handful of properties KSPS sets inline-dynamically. (See CSS-CASCADE-OG-LAYOUT-NOTER.md: win on specificity, not load order.) Brand colors (hentet live fra offshoreudstyr.dk): brandrød #d63031 kortramme #ececec titel #1a1a1a ========================================================================= */ /* --- Align the KSPS product grid with the combo card + section header --- */ /* KSPS wraps its grid in .ksps-container, which adds 15px horizontal padding (and a max-width with margin:auto). That pushed the product row ~15px to the right of the kombi-tilbud card and the "Aktuelle tilbud" header — both of which sit at the dropdown's true left edge. Zero the horizontal padding and let the container span the full width so all three left edges line up. Vertical (section) padding is preserved. */ body .ksdd-products-via-ksps .ksps-container { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } /* --- Card shell --------------------------------------------------------- */ .ksdd-products-via-ksps .ksps-product-card { position: relative; background: #ffffff !important; /* v1.1.9: border darkened from #ececec to #dcdcdc. The combo card shows a visible 1px #ececec outline only because it sits on a pink-tinted background; the product cards are white-on-white, so #ececec was invisible. #dcdcdc gives the same thin hairline but with enough contrast to read against the white dropdown. Hover still goes brand-red. */ border: 1px solid #dcdcdc !important; border-radius: 12px !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; overflow: hidden; } .ksdd-products-via-ksps .ksps-product-card:hover { transform: translateY(-4px); border-color: #d63031 !important; box-shadow: 0 10px 26px rgba(214, 48, 49, 0.16); background: #ffffff !important; } /* --- Image area --------------------------------------------------------- */ .ksdd-products-via-ksps .ksps-product-image-wrap { position: relative; aspect-ratio: 1 / 1 !important; background: #fafafa !important; border: 0 !important; border-radius: 0 !important; overflow: hidden; } .ksdd-products-via-ksps .ksps-product-image, .ksdd-products-via-ksps .ksps-product-image-wrap img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; /* blends product white bg into the light card bg */ } /* --- Diagonal sale ribbon ---------------------------------------------- */ /* Re-style KSPS' own badge (.ksps-sale-badge) AND the JS-injected fallback (.ksdd-sale-ribbon) identically into a diagonal corner ribbon. Both share the same rules so they look the same regardless of source. */ .ksdd-products-via-ksps .ksps-sale-badge, .ksdd-products-via-ksps .ksdd-sale-ribbon { position: absolute; top: 16px; right: -34px; z-index: 3; width: 130px; margin: 0; padding: 5px 0; transform: rotate(45deg); background: #d63031 !important; color: #ffffff !important; font-size: 12px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; text-align: center; text-transform: uppercase; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18); pointer-events: none; } /* --- Title (2-line clamp, fixed min-height so cards align) -------------- */ .ksdd-products-via-ksps .ksps-product-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; color: #1a1a1a !important; line-height: 1.3; } /* --- Price: muted struck-through old price, bold brand-red sale price --- */ .ksdd-products-via-ksps .ksps-price-amount del, .ksdd-products-via-ksps .ksps-price-amount del .woocommerce-Price-amount { color: #9aa0a6 !important; font-weight: 400 !important; font-size: 0.85em; text-decoration: line-through; } .ksdd-products-via-ksps .ksps-price-amount ins, .ksdd-products-via-ksps .ksps-price-amount ins .woocommerce-Price-amount, .ksdd-products-via-ksps .ksps-price-amount > .woocommerce-Price-amount { color: #d63031 !important; font-weight: 700 !important; text-decoration: none; } /* --- Outline button: fills brand-red on hover -------------------------- */ /* Applies to BOTH the simple