/* ========================================================================== Fisk På Krogen — CRO-redesign · TOKEN-/OVERRIDE-LAG Indlæses EFTER global.css (via header.tpl) så det vinder. Modul-drevet indhold (megamenu, homeslider, layered filter, homepagetext); dette lag står for den visuelle styling. ========================================================================== */ :root { --fpk-petroleum: #0f5d6b; --fpk-petroleum-dark: #0a4751; --fpk-petroleum-tint: #e9f2f3; --fpk-petroleum-tint-bd:#d7e3e4; --fpk-ink: #15181a; --fpk-gray-600: #485156; --fpk-gray-500: #6c7378; --fpk-gray-400: #9aa0a4; --fpk-gray-400b: #8a9095; --fpk-border: #e2e5e7; --fpk-border-dk: #d4d8db; --fpk-surface: #f6f7f8; --fpk-nav: #1d2226; --fpk-sale: #b4332a; --fpk-radius: 3px; --fpk-shadow-card: 0 1px 3px rgba(15,23,25,.10), 0 14px 40px -22px rgba(15,23,25,.22); --fpk-focus-ring: 0 0 0 3px rgba(15,93,107,.14); --fpk-font-ui: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; --fpk-font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; } /* --- 0) Layout: container-bredde som design (1264px indhold / 48px gutter) --- */ @media (min-width: 1200px) { .container { width: 1280px; max-width: 100%; } } /* Logo — tving 46px højde som design (warehouse skalerer ellers til kolonne) */ #header_logo img.logo, #header_logo img, .logo.img-responsive { height: 46px !important; width: auto !important; max-width: none !important; max-height: 46px !important; } /* Full-bleed: baggrund i fuld viewport-bredde, indhold centreret i .container */ .fpk-hero, .fpk-uspbar, .fpk-guides, .fpk-trust { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } /* --- 1) Typografi (ikon-fonts på span/i/a urørt) --- */ body, .form-control, input, select, textarea, button, .btn, .button, h1, h2, h3, h4, h5, h6, .page-heading, .page-subheading, .product-name, .product-title, .cart_block, .header_user_info { font-family: var(--fpk-font-ui) !important; } body { color: var(--fpk-ink); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { color: var(--fpk-ink); letter-spacing: -.01em; } h1 { font-weight: 700; } h2 { font-weight: 700; } h3 { font-weight: 600; } .fpk-mono { font-family: var(--fpk-font-mono); letter-spacing: .04em; } /* --- 2) Links --- */ a { color: var(--fpk-petroleum); } a:hover, a:focus { color: var(--fpk-petroleum-dark); } /* --- 3) Knapper (primær = temaets .button-varianter → petroleum) --- */ .button.button-small, .button.button-medium, .button.button-large, .button.ajax_add_to_cart_button, .button.lnk_view, .button.standard-checkout, .box-info-product .exclusive, .btn-primary, .btn.btn-primary { background: var(--fpk-petroleum) !important; border: 1px solid var(--fpk-petroleum) !important; color: #fff !important; border-radius: var(--fpk-radius) !important; font-weight: 600 !important; text-shadow: none !important; box-shadow: none !important; transition: background-color .15s ease, border-color .15s ease; } .button.button-small:hover, .button.button-small:focus, .button.button-medium:hover, .button.button-medium:focus, .button.button-large:hover, .button.button-large:focus, .button.ajax_add_to_cart_button:hover, .button.ajax_add_to_cart_button:focus, .button.lnk_view:hover, .button.standard-checkout:hover, .box-info-product .exclusive:hover, .btn-primary:hover, .btn-primary:focus, .btn.btn-primary:hover { background: var(--fpk-petroleum-dark) !important; border-color: var(--fpk-petroleum-dark) !important; color: #fff !important; } /* Neutral / sekundær */ .btn-default:not(.button) { background: #fff; border: 1px solid var(--fpk-border-dk); color: var(--fpk-ink); border-radius: var(--fpk-radius); font-weight: 500; } .btn-default:not(.button):hover, .btn-default:not(.button):focus { background: var(--fpk-surface); border-color: var(--fpk-gray-400); color: var(--fpk-ink); } .btn, .button { border-radius: var(--fpk-radius); } /* --- 4) Inputs --- */ input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"], input[type="url"], select, textarea, .form-control { border: 1px solid var(--fpk-border-dk); border-radius: var(--fpk-radius); color: var(--fpk-ink); box-shadow: none; font-family: var(--fpk-font-ui); } input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"], input[type="url"], select, .form-control { height: 48px; padding: 0 14px; } textarea, textarea.form-control { padding: 12px 14px; min-height: 96px; } input::placeholder, textarea::placeholder { color: var(--fpk-gray-400); } input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="number"]:focus, input[type="url"]:focus, select:focus, textarea:focus, .form-control:focus { border: 1.5px solid var(--fpk-petroleum); box-shadow: var(--fpk-focus-ring); outline: none; } /* --- 5) Priser / tilbud --- */ .price, .product-price, .our_price_display, .price-display, .special-price, .old-price, .product_price, #our_price_display, .price_comparison, .total_price, .price-percent-reduction { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } .sale-label, .price-percent-reduction, #reduction_percent, #reduction_amount { background: var(--fpk-sale) !important; color: #fff !important; } .special-price, .price.special-price, .price.special, .our_price_display .special-price, .price_reduction { color: var(--fpk-sale) !important; } /* --- 6) Flader/kort/billeder --- */ .product-container, .product_img_link img, .thumbnail, .block .block_content, .page-product-box, img.img-responsive { border-radius: var(--fpk-radius); } hr { border-top-color: var(--fpk-border); } /* ========================================================================== HEADER ========================================================================== */ .fpk-ico { width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em; flex: none; } .fpk-topbar { background: var(--fpk-surface); border-bottom: 1px solid #e7e9eb; font-size: 13px; color: var(--fpk-gray-600); } .fpk-topbar-inner { display: flex; align-items: center; justify-content: space-between; height: 38px; } .fpk-topbar .fpk-usp { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 22px; } .fpk-topbar .fpk-usp li { display: inline-flex; align-items: center; gap: 7px; } .fpk-topbar .fpk-usp .fpk-ico { font-size: 16px; color: var(--fpk-petroleum); } .fpk-topbar-right { display: flex; align-items: center; gap: 20px; } .fpk-topbar-phone { display: inline-flex; align-items: center; gap: 7px; color: var(--fpk-gray-600) !important; font-weight: 600; } .fpk-topbar-phone:hover { color: var(--fpk-petroleum) !important; } .fpk-topbar .fpk-link { color: var(--fpk-gray-600) !important; } .fpk-topbar .fpk-link:hover { color: var(--fpk-petroleum) !important; } @media (max-width: 767px) { .fpk-topbar { display: none; } } /* Mega-nav: sort → ren hvid */ #iqitmegamenu-horizontal.iqitmegamenu, #iqitmegamenu-horizontal { background: #fff !important; border-top: 1px solid var(--fpk-border); border-bottom: 1px solid var(--fpk-border); } #iqitmegamenu-horizontal .cbp-hrmenu-tab > a { color: var(--fpk-nav) !important; font-weight: 600; font-size: 15px; background: transparent !important; } #iqitmegamenu-horizontal .cbp-hrmenu-tab > a:hover, #iqitmegamenu-horizontal .cbp-hrmenu-tab.cbp-hropen > a, #iqitmegamenu-horizontal .cbp-hrmenu-tab > a:focus { color: var(--fpk-petroleum) !important; background: transparent !important; } #iqitmegamenu-horizontal .cbp-hrmenu-tab.cbp-onlyicon > a:hover { background: var(--fpk-petroleum-tint) !important; color: var(--fpk-petroleum) !important; } #iqitmegamenu-shower { background: #fff !important; color: var(--fpk-nav) !important; } /* Modulets `.cbp-hrmenu` (