/* Skomaskiner colours (loaded last, after type.css). The theme is shared with Rent & Trygt, where the "signature" colour
   (variable --green) is a light green with dark text. Here it is the logo blue (#0067b0) with WHITE text, so this file
   sets the text colour on everything that uses it. Navy (#103d6f, --ink) is text and the top bar; Skomaskiner's own
   green (#06b67a, --success) marks "På lager" and confirmations. */

/* Top bar: navy with white text, as on the old site. */
html body .announcement {background:var(--ink);color:#fff;}

/* Buttons and badges on the logo blue: white text. */
html body :is(
 .woocommerce .rt-cart-layout .wc-proceed-to-checkout a.checkout-button, .rt-mobile-checkout > a,
 .rt-drawer-undo button, .rt-drawer a.rt-mini-primary, .rt-pay-box #place_order,
 .rt-checkout #payment #place_order, .rt-checkout .rt-preview-pay, .rt-checkout .rt-next,
 a.rt-btn-primary, .pp-sticky-button, .campaign-purchase a.button, .campaign-price,
 .rt-cart-count
) {color:#fff !important;}
html body.woocommerce .product-page div.product form.cart .single_add_to_cart_button {color:#fff !important;}
html body.woocommerce .product-page div.product form.cart .single_add_to_cart_button:hover {background:#005694;border-color:#005694;}
html body .lh .lh-search-toggle {color:#fff;}
html body .lh .lh-search-toggle:hover {background:#005694;}
/* Add-to-cart states (2026-11-08: white text on light blue was hard to read). "Legger til …" stays the logo blue
   with white text and a white spinner, so the button doesn't flash; "Lagt til" turns the success green, white text.
   (product.css paints both light blue for Rent & Trygt's dark-text buttons.) */
html body.purchase-feedback-ready :is(.single_add_to_cart_button.loading, button[data-purchase-state=loading]),
html body.purchase-feedback-ready.woocommerce .product-page div.product form.cart .single_add_to_cart_button:is(.loading,[data-purchase-state=loading]) {background:var(--green) !important;border-color:var(--green) !important;color:#fff !important;}
html body.purchase-feedback-ready button[data-purchase-state=success],
html body.purchase-feedback-ready.woocommerce .product-page div.product form.cart .single_add_to_cart_button[data-purchase-state=success] {background:var(--success) !important;border-color:var(--success) !important;color:#fff !important;}
html body.purchase-feedback-ready .purchase-spinner {border-color:rgba(255,255,255,.35);border-top-color:#fff;}

/* Green for "in stock" and confirmations. */
html body :is(.product-card span.stock, .site-header .search-result-stock)::before {background:var(--success) !important;}
html body .product-page .product-availability.is-in-stock::before {background:var(--success) !important;}
html body .rt-rec-free::before {background:var(--success);}
html body .catalog-saving {background:var(--success) !important;color:#fff !important;}
html body .rt-free-shipping svg circle {fill:var(--success);}

/* Front-page hero: the price badge in the logo blue with white text; "ekskl. mva" under the price. */
html body .fh-price {background:var(--green);color:#fff;}
html body .fh-price em {font-style:normal;font-size:14px;font-weight:600;opacity:.9;margin-top:-2px;}
html body .fh-price--long strong {font-size:clamp(50px,4.4vw,64px);}
@media (max-width:700px) {html body .fh-price--long strong {font-size:38px;} html body .fh-price em {font-size:12px;}}
html body .home-main a.fh-button:hover {background:#e6eef6;}
/* The machine slide: show the top of the machine (handle) when wide screens crop the photo. */
/* Machine hero (2026-11-09, side view, hero/v2/machine-desktop-h.png): crop a little below the middle so both shoes and the handle stay in view on wide screens. */
@media (min-width:701px) {html body .fh-theme-maskin .fh-image {object-position:50% 52%;}}

/* ---------- Text colour (8 Nov 2026) ----------
   Text and headings in a near-neutral dark grey with a hint of blue (--ink), instead of the saturated logo navy:
   design systems (Material, Carbon, Apple HIG) keep body text neutral and the brand colours for brand surfaces and
   actions. Navy (--navy) stays for the brand surfaces: top bar, footer and the dark sections; the logo blue (--green)
   for buttons and links. Contrast of #1f2933 on white: about 14.6:1. */
:root {--ink:#1f2933;--navy:#103d6f;}
html body .announcement, html body .site-footer, html body .sk-demo {background:var(--navy);}
/* Muted text: a matching neutral grey. */
html body :is(.rt-mini-variant, .sk-bundle-contents, .rt-order .rt-item-detail, .rt-order .rt-item-detail .amount, .rt-cart-variant, .rt-page-meta, .rt-article-card-meta, .sk-download-text span, .rt-pay-terms) {color:#5b6675 !important;}
/* Text links that are actions: the logo blue. */
html body :is(.sk-machine-link, a.sk-text-link, .rt-prose a, .pp-more) {color:var(--green) !important;}

/* Logo: the wordmark is wide and low (5.5:1), so it needs more width than Rent & Trygt's to read at the same weight
   (2026-11-08: "feels kind of tiny"). Desktop 212px (~38px tall), small laptops 184px, phones 160px (four icons share the bar, so that is what fits with air either side). */
.lh .brand-logo {width:212px;}
@media (min-width:1001px) and (max-width:1240px) {.lh .brand-logo {width:160px;}} /* 184px pushed "Refleks" under the search button at ~1024px. */
@media (max-width:1000px) {.lh .brand-logo {width:160px;max-width:100%;}}

/* Log in (Min side): the primary action in the logo blue, like "Send bestilling" and the other buttons. */
body .rt-auth-submit {background:var(--green);}
@media (hover:hover) {body .rt-auth-submit:hover {background:#00589a;}}

/* B2B: sums in the drawer and the cart say they are ex. VAT (VAT is added on the invoice). */
.sk-ex-vat {font-size:13px;font-weight:400;color:#5b6876;margin-left:4px;}

/* Order confirmation: the tick in white on the success green; dark ("ink") buttons in the logo blue. */
.rt-ty-icon circle {fill:var(--success);}
.rt-ty-icon path {stroke:#fff;}
body :is(.rt-acct,.rt-ty) .rt-btn--ink, body .rt-btn--ink {background:var(--green);border-color:var(--green);color:#fff;}
@media (hover:hover) {body :is(.rt-acct,.rt-ty) .rt-btn--ink:hover, body .rt-btn--ink:hover {background:#00589a;border-color:#00589a;color:#fff;}}

/* No zoom on hover for images (categories, product carousels, article cards): calmer, as on the machine cards. */
body .category-card:hover img, body .product-carousel .product-image:hover img, body a.rt-article-card:hover .rt-article-card-image img {transform:none;}

/* Top bar in the logo blue (2026-11-08); the footer and the dark sections stay navy. White text: 5.3:1 contrast. */
html body .announcement {background:var(--green);color:#fff;}

/* Search field's submit button in the logo blue, like the search icon in the header. */
html body .lh-search .site-search button {background:var(--green);color:#fff;}
@media (hover:hover) {html body .lh-search .site-search button:hover {background:#00589a;}}

/* Top bar: more air around the dot between the two messages (the second is hidden on phones, header-light.css). */
.announcement .ann-dot {font-style:normal;margin:0 3px;}

/* Tablet and phone: the search button is a grey circle drawn by ::before (header-light.css); with the white icon here
   grey with a dark icon, as on Rent & Trygt (2026-11-09); desktop keeps the blue. */
@media (max-width:1000px) {
 html body .lh .lh-search-toggle::before {background:#ebebeb;}
 html body .lh .lh-search-toggle {color:var(--ink);}
}
@media (max-width:1000px) and (hover:hover) {html body .lh .lh-search-toggle:hover::before {background:#e0e0e0;}}

/* Bundle contents in the cart drawer, cart, checkout, order pages: one line per item (bundles.php). */
.sk-bundle-line {display:block;}

/* Complianz: after a choice it pins an "Administrer samtykke" tab to the bottom corner on every page, which pops in
   on each load. The choice can be changed from "Informasjonskapsler" in the footer instead (footer.php). */
html body #cmplz-manage-consent .cmplz-manage-consent {display:none !important;}

/* Cookie dialog (Complianz): its heavy solid arrows replaced by the site's thin chevron (as on "Sorter" and "Pris"),
   centred in the row; Complianz still turns the icon when a category opens. */
html body .cmplz-cookiebanner .cmplz-category-header {align-items:center;}
html body .cmplz-cookiebanner .cmplz-category-toggle {display:grid;place-items:center;width:28px;height:28px;padding:0;margin:0;border:0;background:none;box-shadow:none;cursor:pointer;}
html body .cmplz-cookiebanner .cmplz-category-toggle .cmplz-icon {display:block;width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231f2933' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E") center/18px no-repeat;}
html body .cmplz-cookiebanner .cmplz-category-toggle .cmplz-icon svg {display:none;}
/* 1001–1120px: five categories, logo and three icons only just fit; tighter logo and link spacing. */
@media (min-width:1001px) and (max-width:1120px) {.lh .brand-logo {width:140px;} html body .lh-nav.primary-nav {gap:14px;} html body .lh-bar {gap:20px;}}
@media (min-width:1001px) and (max-width:1080px) {html body .lh-nav.primary-nav {gap:10px;} html body .lh-nav.primary-nav a {font-size:13.5px !important;}}