/* Shared storefront layout corrections. Functional form names and IDs stay intact. */
body { line-height: 1.6; }
#cs-main-content { min-width: 0; min-height: 45vh; }
.cs-skiplink { position: fixed; z-index: 99999; top: 12px; left: 12px; padding: 12px 20px; background: var(--cs-blue); color: white; border-radius: 8px; transform: translateY(-160%); }
.cs-skiplink:focus { transform: translateY(0); color: white; }
:is(a,button,input,select,textarea):focus-visible { outline: 3px solid #4477d4; outline-offset: 4px; }
:is(.btn,.button,.cs-btn,.cs-empty__cta,.okbtn,.member-cart-notice__cta) {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  min-height: 46px;
  height: auto !important;
  line-height: 1.25 !important;
  padding: 12px 22px !important;
  text-align: center !important;
  vertical-align: middle;
  white-space: normal;
}
/* The rule above must not resurrect buttons the page hides inline (cart "Lagre": the shipping choice saves by
   itself; select_club "Continue": clicked by script). jQuery .show()/.hide() edit this inline style. */
:is(.btn,.button,.cs-btn,.cs-empty__cta,.okbtn,.member-cart-notice__cta):is([style*="display:none"],[style*="display: none"]) { display: none !important; }
input[type=submit], input[type=button] { line-height: 1.25 !important; }
.btn.btn-sm, .button.small { min-height: 38px; padding: 8px 14px !important; }
.btn:disabled, .button:disabled { cursor: not-allowed; }
.cs-btn, .cs-empty__cta { font-size: 14px; }
.cs-header__actions a, .cs-header__search { min-height: 44px; }
.cs-header__actions { align-items: center; }
.cs-header__search input { min-width: 0; }
.cs-page-heading { margin: 0 0 28px; }
.cs-page-heading h1 { margin: 0 0 10px !important; font-size: clamp(28px,3vw,42px) !important; line-height: 1.15 !important; text-transform: none; }
.cs-page-heading p { margin: 0; color: var(--cs-text-soft); max-width: 65ch; }
.cs-eyebrow { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: var(--cs-blue); margin-bottom: 10px !important; }
.cs-section { padding-top: clamp(40px,5vw,72px); padding-bottom: clamp(40px,5vw,72px); }
.cs-section__head { align-items: end; }
.cs-hero__inner { padding-top: 52px; padding-bottom: 60px; gap: 40px; }
.cs-hero__title { font-size: clamp(38px,5vw,66px) !important; line-height: 1.05 !important; }
.cs-hero__img { height: auto; aspect-ratio: 610/450; object-fit: contain; }
.cs-hero__media { min-height: 0; }
.cs-hero__badge { left: 16px; right: 16px; bottom: 16px; width: auto; }
.cs-tiles { gap: 24px; }
.cs-mosaic { gap: 18px; }
.cs-mosaic__item { min-height: 0; }
.cs-mosaic__item img { min-height: 0; height: 100%; object-fit: contain; background: #f4f5f2; }
.cs-member { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 48px; }
.cs-member__form { min-width: 0; }
.cs-footer__inner { gap: 32px; }
#footer2.cs-footer h4 { display: block; color: #fff !important; font-size: 13px !important; margin: 0 0 16px !important; line-height: 1.4; }
#footer2.cs-footer p { color: rgba(255,255,255,.75) !important; font-size: 14px !important; line-height: 1.7 !important; }
#footer2.cs-footer .cs-footer__pay { flex-wrap: wrap; }

/* Listings: one heading, useful club context, aligned card actions. */
.cs-listing-head__inner { padding-top: 28px; padding-bottom: 28px; }
.cs-listing-head h1 { text-transform: none; font-size: clamp(28px,3.2vw,42px) !important; line-height: 1.15 !important; }
.cs-listing-context { margin: 24px auto !important; padding-top: 0 !important; padding-bottom: 0 !important; }
.cs-listing-context__card { display: flex; align-items: center; gap: 18px; padding: 20px 24px; border: 1px solid var(--cs-border); border-radius: 14px; background: #fafbf9; }
.cs-listing-context__logo { width: 60px; height: 60px; flex: 0 0 60px; object-fit: contain; padding: 6px; background: white; border-radius: 12px; }
.cs-listing-context__card .cs-cat-desc { padding: 0; margin: 0; min-width: 0; border: 0; font-size: 15px; }
.cs-listing-context__card .cs-cat-desc p { margin: 0; line-height: 1.65; }
body.cs-page-products #cat { padding-top: 0 !important; }
body.cs-page-products #cat #content { padding: 0 !important; }
body.cs-page-products #cat #content > .container-fluid { padding: 0; }
ul.categorie > li { padding: 0 !important; }
ul.categorie { gap: 24px !important; grid-template-columns: repeat(auto-fill,minmax(210px,1fr)) !important; }
ul.categorie .cs-empty-wrap { grid-column: 1/-1; }
ul.categorie .pro-info { text-align: left !important; padding-bottom: 18px !important; box-shadow: 0 2px 8px rgba(19,26,38,.025); }
ul.categorie .pro-info .sold_out > a { display: block; border: 0 !important; line-height: 0; }
ul.categorie .pro-info .img-wrap { width: 100% !important; margin: 0 !important; }
ul.categorie .pro-info .img-wrap img { width: 100% !important; max-width: 100%; object-fit: contain !important; margin: 0 !important; }
ul.categorie .pro-info > a.btn { border: 0 !important; }
ul.categorie .pro-info h6 { min-height: 58px !important; font-size: 15px !important; line-height: 1.45 !important; padding: 16px 18px 0 !important; }
ul.categorie .pro-info h6, ul.categorie .pro-info h6 span { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; width: auto !important; max-width: none !important; }
ul.categorie .pro-info h4 { margin: 10px 0 14px !important; padding: 0 18px !important; font-size: 19px !important; }
ul.categorie .pro-info .btn, ul.categorie .pro-info .button { margin: auto 18px 0 !important; width: calc(100% - 36px) !important; min-height: 44px; padding: 11px 16px !important; font-size: 13px !important; line-height: 1.25 !important; }
ul.categorie .pro-info img.img-fluid { height: 245px !important; padding: 18px; }
.filters-sidebar { min-width: 0; }
.price-filter-card__slider { touch-action: pan-y; }

/* Product: an unclipped gallery, a separate thumbnail rail and readable description. */
body.cs-page-product-single #cs-main-content > .container { padding-top: 28px; padding-bottom: 0; }
body.cs-page-product-single .breadcrumbs { padding: 0 0 20px !important; background: none !important; font-size: 13px !important; color: var(--cs-text-soft); line-height: 1.65; }
body.cs-page-product-single .breadcrumbs .container-fluid { padding: 0; }
body.cs-page-product-single .big-img { background: transparent; border: 0; overflow: visible !important; height: auto !important; padding: 0 18px 0 0; }
body.cs-page-product-single .big-img .show { height: clamp(360px,40vw,520px) !important; border: 1px solid var(--cs-border); border-radius: 18px; overflow: hidden; background: #f4f5f2; }
body.cs-page-product-single .big-img .show #show-img { padding: 26px; }
body.cs-page-product-single .small-img { position: static !important; height: auto !important; padding: 0 !important; margin: 16px 0 24px !important; }
body.cs-page-product-single .small-container { position: static !important; width: 100% !important; height: auto !important; margin: 0 !important; overflow: visible !important; }
body.cs-page-product-single #small-img-roll { position: static !important; width: 100% !important; left: auto !important; display: flex !important; flex-wrap: wrap; gap: 12px !important; }
body.cs-page-product-single .show-small-img { width: 78px !important; height: 78px !important; flex: 0 0 78px; border-radius: 12px !important; cursor: pointer; }
body.cs-page-product-single #prod_name { font-size: clamp(26px,2.8vw,38px) !important; font-weight: 800 !important; letter-spacing: -.025em; line-height: 1.15 !important; margin: 0 0 12px !important; }
body.cs-page-product-single .model { font-size: 13px !important; color: var(--cs-text-soft); }
body.cs-page-product-single .size-label { margin-bottom: 8px !important; display: block; text-transform: none; letter-spacing: 0; font-size: 14px !important; }
body.cs-page-product-single .form-control { min-height: 46px; }
body.cs-page-product-single .pricenumber { line-height: 1.6; }
body.cs-page-product-single .add_to_cart { min-height: 50px; min-width: 230px; font-size: 14px !important; }
.cs-product-desc { width: calc(100% - 40px) !important; max-width: 1216px; margin: 28px auto 56px; padding: 28px 32px; border: 1px solid var(--cs-border); border-radius: 16px; background: #fafbf9; }
.cs-product-desc h2 { margin: 0 0 18px !important; font-size: 21px !important; text-transform: none !important; line-height: 1.4 !important; }
.cs-product-desc__body { max-width: 82ch; font-size: 16px; line-height: 1.8; color: var(--cs-text-soft); overflow-wrap: anywhere; }
.cs-product-desc .tabs-3 { margin: 0 !important; }
.cs-product-desc .nav-tabs { margin: 0 0 20px !important; border: 0 !important; }
.cs-product-desc .nav-tabs a { padding: 0 !important; border: 0 !important; text-transform: none; font-size: 19px !important; font-weight: 800; color: var(--cs-text) !important; background: none !important; }
.cs-product-desc .tab-content { padding: 0 !important; max-width: 82ch; font-size: 16px; line-height: 1.8; color: var(--cs-text-soft); overflow-wrap: anywhere; }
.cs-product-desc p { line-height: 1.8; margin-bottom: 16px; }
.cs-product-desc hr { display: none; }

/* Cart and checkout: clear section rhythm, labels above every field. */
body.cs-cart-page #cs-main-content > section { padding-top: 28px !important; }
body.cs-cart-page .cart-box { padding: 24px !important; border-radius: 16px; box-shadow: 0 2px 10px rgba(19,26,38,.025); }
body.cs-cart-page .cart-box h4 { font-size: 19px !important; text-transform: none !important; letter-spacing: 0 !important; margin: 0 0 18px !important; line-height: 1.4 !important; }
body.cs-cart-page .dropcap2 { width: 32px; height: 32px; line-height: 32px !important; font-size: 13px !important; border-radius: 9px !important; flex-shrink: 0; margin-right: 12px; }
body.cs-cart-page .cart-box hr { margin: 0 0 22px; }
.cs-checkout-fields, .cs-profile-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px 24px; }
.cs-checkout-field, .cs-profile-field { display: flex; flex-direction: column; min-width: 0; gap: 8px; }
.cs-checkout-field--wide, .cs-profile-field--wide { grid-column: 1/-1; }
body.cs-cart-page .cs-checkout-field label.zip, .cs-profile-field label { display: block !important; margin: 0 !important; padding: 0 !important; font-size: 14px !important; letter-spacing: 0 !important; font-weight: 700 !important; text-transform: none !important; line-height: 1.5; }
body.cs-cart-page .cs-checkout-field .giftinput, .cs-profile-field .form-control { width: 100% !important; min-height: 48px; margin: 0 !important; padding: 12px 14px !important; box-sizing: border-box; }
body.cs-cart-page textarea#id_address { height: 84px !important; min-height: 84px; resize: vertical; }
.cs-payment-option { padding: 0 !important; }
.cs-checkout-actions { padding-left: 0; padding-right: 0; }
.cs-checkout-actions button:first-child { min-width: 180px !important; }
.cs-checkout-actions .gray { background: #f1f3f6 !important; }
body.cs-cart-page .cs-empty { max-width: 920px; margin: 8px auto 40px; padding: 52px 24px; background: #f7f8f5; gap: 14px; }
.cs-empty__mark { border: 0; width: 64px; height: 64px; border-radius: 18px; color: var(--cs-blue); background: #e9eef9; display: grid; place-items: center; }
.cs-empty__mark svg { width: 32px; height: 32px; }
.cs-empty__mark:empty { position: relative; }
.cs-empty__mark:empty::before { content: ""; width: 22px; height: 22px; border: 2px solid currentColor; border-radius: 50%; }
.cs-empty__mark:empty::after { content: ""; position: absolute; width: 12px; height: 2px; background: currentColor; transform: rotate(45deg); top: 43px; left: 42px; }
.cs-empty__signin { margin-top: 8px !important; font-size: 14px; }
.cs-empty__signin a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.member-cart-notice { max-width: none !important; margin: 22px 0 0 !important; padding: 20px !important; display: flex; align-items: center; justify-content: space-between; gap: 18px; background: #f5f7fc !important; border: 1px solid #dce3f2 !important; box-shadow: none !important; }
.member-cart-notice__body { margin: 0 !important; font-size: 15px !important; line-height: 1.6 !important; }
.member-cart-notice__cta { flex-shrink: 0; box-shadow: none !important; }

/* Account and authentication use the same form language. */
.cs-account-page { padding-top: 36px; padding-bottom: 56px; }
.cs-account-layout { gap: 32px; grid-template-columns: 220px minmax(0,1fr); }
.cs-profile-form { padding: 28px; border: 1px solid var(--cs-border); border-radius: 16px; background: #fff; }
.cs-profile-form__head { display: flex; justify-content: space-between; align-items: start; gap: 18px; padding-bottom: 22px; margin-bottom: 24px; border-bottom: 1px solid var(--cs-border); }
.cs-profile-form__head h2 { font-size: 21px !important; margin: 0 !important; text-transform: none; line-height: 1.4; }
.cs-profile-form__head a { font-size: 14px !important; padding: 0 !important; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.cs-profile-form__actions { margin-top: 28px; }
body[class*="cs-page-auth-"] #cs-main-content > .container { max-width: 1060px; margin: 36px auto 56px; padding: 0 28px; }
body[class*="cs-page-auth-"] #cs-main-content > .breadcrumbs { display: none; }
body[class*="cs-page-auth-"] #cs-main-content h1 { font-size: clamp(26px,3vw,36px) !important; line-height: 1.2 !important; text-transform: none; margin: 0 0 26px !important; }
body[class*="cs-page-auth-"] #cs-main-content label { display: block; font-size: 14px; font-weight: 700; margin: 0 0 8px; }
body[class*="cs-page-auth-"] #cs-main-content :is(input[type=text],input[type=email],input[type=password],input[type=tel]) { width: 100% !important; max-width: 100%; min-height: 48px; padding: 12px 14px !important; box-sizing: border-box; border: 1px solid var(--cs-border-input); border-radius: 10px; margin: 0 0 8px; font: 16px var(--cs-font); background: #fff; }
body[class*="cs-page-auth-"] #cs-main-content .form-group { margin-bottom: 18px; }
body[class*="cs-page-auth-"] #cs-main-content .row > [class*=col-md-6] { padding: 24px; }
body[class*="cs-page-auth-"] #cs-main-content img { width: 100%; border-radius: 16px; object-fit: cover; }
body[class*="cs-page-auth-"] #cs-main-content input[type=submit] { min-height: 46px; margin-top: 18px; padding: 12px 22px; border: 0; border-radius: 999px; background: var(--cs-blue); color: #fff; font: 700 15px var(--cs-font); }
body.cs-page-auth-change-password-form #cs-main-content form { max-width: 560px; }
body.cs-page-auth-change-password-form #cs-main-content .col-md-8 { width: 100%; padding: 24px; }
body.cs-page-auth-change-password-form #cs-main-content .mb-6 { margin-bottom: 18px; }

/* Information pages: comfortable line length and restrained headings. */
body:is(.cs-page-about,.cs-page-terms) #cs-main-content > .container { max-width: 1000px; padding: 36px 28px 56px; }
body:is(.cs-page-about,.cs-page-terms) #cs-main-content > .breadcrumbs { display: none; }
body:is(.cs-page-about,.cs-page-terms) #cs-main-content .heading h3 { text-transform: none !important; letter-spacing: -.8px !important; }
body:is(.cs-page-about,.cs-page-terms) #cs-main-content .col-md-9 { width: 100%; }
body:is(.cs-page-about,.cs-page-terms) #cs-main-content .heading h3 { font-size: clamp(28px,3vw,40px); line-height: 1.2; margin-bottom: 24px; color: var(--cs-text); }
body:is(.cs-page-about,.cs-page-terms) #cs-main-content p { font-size: 16px; color: var(--cs-text-soft); line-height: 1.85; margin-bottom: 20px; }
body:is(.cs-page-about,.cs-page-terms) #cs-main-content h4 { font-size: 20px; display: block; margin: 28px 0 12px; }
body:is(.cs-page-about,.cs-page-terms) #cs-main-content img { max-width: 100%; height: auto; }
body.cs-page-russprodukter #cs-main-content { padding: 28px 0 48px; }
body.cs-page-russprodukter #cs-main-content h1 { font-size: clamp(32px,5vw,58px) !important; line-height: 1.1 !important; margin: 12px 0 28px !important; }
body.cs-page-russprodukter #cs-main-content h3 { font-size: clamp(23px,2.8vw,32px) !important; line-height: 1.2 !important; margin: 20px 0 16px; }
body.cs-page-russprodukter #cs-main-content .card { border: 1px solid var(--cs-border); border-radius: 14px; overflow: hidden; }
body.cs-page-russprodukter #cs-main-content .card img { object-fit: contain; padding: 20px; background: #f7f8f5; }
body.cs-page-russprodukter #cs-main-content .row.justify-content-center { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; margin-bottom: 20px; }
body.cs-page-russprodukter #cs-main-content .row.justify-content-center::before, body.cs-page-russprodukter #cs-main-content .row.justify-content-center::after { display: none; }
body.cs-page-russprodukter #cs-main-content .row.justify-content-center > .col-md-8 { grid-column: 1/-1; width: 100%; padding: 0; }
body.cs-page-russprodukter #cs-main-content .card img { height: 300px; width: 100%; }
body.cs-page-russprodukter #cs-main-content h3 { letter-spacing: 0 !important; font-family: var(--cs-font) !important; }
body.cs-page-russprodukter #cs-main-content .row.justify-content-center > .col-md-3 { width: 100%; padding: 0; }
body.cs-page-russprodukter #cs-main-content .row.justify-content-center > .text-center { grid-column: 1/-1; }

@media(min-width:1000px) {
  .cs-cart-page .container { max-width: 1160px; }
}
@media(max-width:991px) {
  .cs-store { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .cs-header__inner { position: relative; }
  .cs-header__actions { order: 2; flex: 1 1 100%; justify-content: flex-end; }
  .cs-header__inner .menu-btn-respons-container { position: absolute; right: 12px; top: 12px; }
  .cs-header__inner .navbar-toggle { position: static !important; float: none !important; margin: 0 !important; min-width: 44px; min-height: 44px; display: grid; place-items: center; }
  .cs-account-layout { grid-template-columns: minmax(0,1fr); }
  .cs-member { grid-template-columns: minmax(0,1fr); gap: 28px; }
  body.cs-page-product-single .big-img { padding-right: 0; margin-bottom: 16px; }
  body.cs-page-product-single .big-img .show { height: 400px !important; }
  body.cs-page-product-single #content > .container-fluid > .row { display: flex; flex-direction: column; }
  body.cs-page-product-single #content > .container-fluid > .row > .col-md-6 { width: 100%; }
  .cs-product-desc { margin-left: 20px; margin-right: 20px; padding: 24px; }
}
@media(max-width:600px) {
  .cs-services { grid-template-columns: minmax(0,1fr); }
  .cs-member__text .cs-h2 { overflow-wrap: anywhere; hyphens: auto; }
  .cs-usp-bar__items { gap: 8px !important; }
  .cs-usp-bar__items > span { min-width: 0; font-size: 11px !important; line-height: 1.5; gap: 6px; }
  .cs-hero__inner { padding: 32px 20px 40px; gap: 28px; }
  .cs-hero__badge { left: 10px; right: 10px; bottom: 10px; padding: 12px; }
  .cs-hero__badge-title { font-size: 13px; }
  .cs-hero__badge-sub { font-size: 12px; }
  .cs-tiles { gap: 18px; }
  .cs-listing-context__card { padding: 16px; gap: 12px; }
  .cs-listing-context__logo { width: 46px; height: 46px; flex-basis: 46px; }
  ul.categorie { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 12px !important; }
  ul.categorie .pro-info img.img-fluid { height: 175px !important; padding: 10px; }
  ul.categorie .pro-info h6 { font-size: 13px !important; min-height: 58px !important; padding: 12px 12px 0 !important; }
  ul.categorie .pro-info h4 { font-size: 16px !important; padding: 0 12px !important; }
  ul.categorie .pro-info .btn, ul.categorie .pro-info .button { margin-left: 12px !important; margin-right: 12px !important; width: calc(100% - 24px) !important; font-size: 12px !important; padding: 10px 8px !important; }
  .product-card-label-row { left: 8px; top: 8px; }
  .label-badge { font-size: 9px !important; padding: 4px 8px !important; }
  body.cs-page-product-single .big-img .show { height: 330px !important; }
  body.cs-page-product-single .big-img .show #show-img { padding: 18px; }
  body.cs-page-product-single .show-small-img { width: 64px !important; height: 64px !important; flex-basis: 64px; }
  body.cs-page-product-single .add_to_cart { width: 100%; min-width: 0; }
  .cs-product-desc { width: calc(100% - 32px) !important; padding: 22px 18px; margin: 20px 16px 36px; }
  .cs-checkout-fields, .cs-profile-fields { grid-template-columns: minmax(0,1fr); gap: 18px; }
  body.cs-cart-page .cart-box { padding: 18px !important; }
  body.cs-cart-page .cs-empty { padding: 36px 20px; }
  .member-cart-notice { flex-direction: column; align-items: start; padding: 18px !important; }
  .cs-profile-form { padding: 20px; }
  .cs-profile-form__head { flex-direction: column; gap: 12px; }
  body[class*="cs-page-auth-"] #cs-main-content > .container { padding: 0 20px; margin: 24px auto 36px; }
  body[class*="cs-page-auth-"] #cs-main-content .row > [class*=col-md-6] { padding: 18px 0; }
  body:is(.cs-page-about,.cs-page-terms) #cs-main-content > .container { padding: 28px 20px 36px; }
}
@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Order information should read like a receipt, including on narrow screens. */
body:is(.cs-page-my-orders,.cs-page-my-order-detail) :is(.page-title,.page-title-detail) { font-size: clamp(28px,3vw,36px); text-transform: none; letter-spacing: -.8px; line-height: 1.2; }
body.cs-page-my-order-detail .info-card-header { text-transform: none; letter-spacing: 0; font-size: 18px; }
body.cs-page-my-order-detail .info-label { min-width: 128px; font-size: 13px; }
body.cs-page-my-order-detail .info-value { font-size: 14px; overflow-wrap: anywhere; }
body.cs-page-my-order-detail .order-table th { text-transform: none; letter-spacing: 0; }
body.cs-page-my-order-detail .order-table .product-image { object-fit: contain; background: #f8f9f6; }
body.cs-page-my-orders .order-total { font-variant-numeric: tabular-nums; }
body.cs-page-my-orders .order-card .product-name { border: 0 !important; }
@media(max-width:600px) {
  .cs-account-nav { flex-wrap: wrap; overflow: visible; }
  body.cs-page-russprodukter #cs-main-content .row.justify-content-center { grid-template-columns: minmax(0,1fr); }
  body.cs-page-my-order-detail .order-table-container { overflow: visible; }
  body.cs-page-my-order-detail .order-table, body.cs-page-my-order-detail .order-table tbody { display: block; }
  body.cs-page-my-order-detail .order-table thead { display: none; }
  body.cs-page-my-order-detail .order-table tr:is(.product-row,.addon-row) { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border: 1px solid var(--cs-border); border-radius: 12px; padding: 14px; gap: 12px; margin-bottom: 16px; }
  body.cs-page-my-order-detail .order-table tr:is(.product-row,.addon-row) td { display: block; border: 0; padding: 0; text-align: left; overflow-wrap: anywhere; }
  body.cs-page-my-order-detail .order-table td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 700; color: var(--cs-text-soft); margin-bottom: 4px; }
  body.cs-page-my-order-detail .order-table td[data-label="Produkt"] { grid-column: 1/-1; font-size: 15px; }
  body.cs-page-my-order-detail .order-table tr:is(.total-row,.final-total-row) { display: flex; align-items: center; justify-content: space-between; padding: 12px; border-radius: 10px; margin-bottom: 10px; }
  body.cs-page-my-order-detail .order-table tr:is(.total-row,.final-total-row) td { display: block; padding: 0; border: 0; font-size: 16px !important; }
  body.cs-page-my-order-detail .order-table tr:is(.total-row,.final-total-row) td:empty { display: none; }
}

/* ==========================================================================
   Product media frame (handoff "Produktbilder bakgrunn", 2026-10-10).
   Supplier images carry a white (#FFF) or light-grey (#F6F6F6) background;
   the frame is #F4F5F2, so every image drew its own box. One rule for every
   product image: tinted frame + mix-blend-mode:darken on the <img>. Anything
   lighter than the frame melts into it. Images the admin tags as photography
   (.cs-media--photo) render cover without blending. .cs-mosaic is untouched.
   ========================================================================== */
.cs-media {
  background: #F4F5F2;
  border: 1px solid var(--cs-border);   /* #ECEDE9 */
  isolation: isolate;                    /* keeps the blend inside the frame */
  overflow: hidden;
  position: relative;
}
.cs-media img {
  object-fit: contain;
  mix-blend-mode: darken;
}
.cs-media--photo img {                   /* lifestyle photography, admin-tagged */
  object-fit: cover;
  mix-blend-mode: normal;
}

/* The frames the skin already draws get the same behaviour without new markup. */
body.cs-page-product-single .big-img .show,
ul.categorie .pro-info .sold_out,
ul.categorie .pro-info .img-wrap,
.cs-product-card__media { isolation: isolate; }
body.cs-page-product-single .big-img .show #show-img,
ul.categorie .pro-info img.img-fluid,
.cs-product-card__media img { mix-blend-mode: darken; }

/* Product single: gallery frame keeps its own border and padding; photos fill it. */
body.cs-page-product-single .big-img .show.cs-media--photo #show-img { object-fit: cover !important; mix-blend-mode: normal; padding: 0; }
/* Product single: thumbnails are 78x78 tiles, 2px border, padding 6, active = blue. */
body.cs-page-product-single .cs-thumb { width: 78px; height: 78px; flex: 0 0 78px; border: 2px solid var(--cs-border); border-radius: 12px; padding: 6px; box-sizing: border-box; cursor: pointer; }
body.cs-page-product-single .cs-thumb .show-small-img { width: 100% !important; height: 100% !important; flex: none; display: block; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; opacity: 1 !important; }
body.cs-page-product-single .cs-thumb.is-active,
body.cs-page-product-single .cs-thumb:hover,
body.cs-page-product-single .cs-thumb:has(> .show-small-img.active) { border-color: var(--cs-blue); }
body.cs-page-product-single .cs-thumb.cs-media--photo .show-small-img { object-fit: cover !important; }

/* Listing, search and category cards: the card border is the frame border. */
ul.categorie .pro-info .sold_out.cs-media { border: 0; }
ul.categorie .pro-info .sold_out.cs-media--photo img.img-fluid { object-fit: cover !important; mix-blend-mode: normal; padding: 0 !important; }

/* Home featured cards: media 240px on #F4F5F2, padding 12. */
.cs-product-card__media.cs-media { border: 0; }
.cs-product-card__media img { padding: 12px; box-sizing: border-box; }
.cs-product-card__media.cs-media--photo img { object-fit: cover; mix-blend-mode: normal; padding: 0; }

/* Cart line: 92x92 tile, radius 12, padding 8 (was a bare 70px image). */
.cs-cart-media { width: 92px; height: 92px; flex: 0 0 92px; border-radius: 12px; padding: 8px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; vertical-align: top; margin-right: 12px; }
.productlis-cart .pname .cs-cart-media img { width: 100%; height: 100%; margin: 0; padding: 0; border-radius: 0; background: transparent; display: block; }

/* Order detail: 72x72 tile, radius 10, padding 6 around the existing .product-image. */
.cs-order-media { width: 72px; height: 72px; border-radius: 10px; padding: 6px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
body.cs-page-my-order-detail .order-table .cs-order-media .product-image { width: 100%; height: 100%; border: 0; border-radius: 0; background: transparent; object-fit: contain; display: block; }
body.cs-page-my-order-detail .order-table .cs-order-media.cs-media--photo .product-image { object-fit: cover; }

/* Global frame choice (admin: "Slik vises bildene i butikken"). White only looks right with
   transparent files, so grey stays the default; the body class comes from settings.product_frame. */
/* White and match mode: tiles default to white without !important, so a per-image inline colour wins. */
body:is(.cs-frame-white, .cs-frame-match) :is(.cs-media, .big-img .show, ul.categorie .pro-info .sold_out, ul.categorie .pro-info .img-wrap, .cs-product-card__media) { background-color: #fff; }

@media(max-width:600px) {
  body.cs-page-product-single .cs-thumb { width: 64px; height: 64px; flex-basis: 64px; padding: 4px; }
  .cs-cart-media { width: 72px; height: 72px; flex-basis: 72px; padding: 6px; margin-right: 10px; }
  .cs-order-media { width: 64px; height: 64px; }
}

/* Homepage slots (hero, category tiles, campaign mosaic): admin uploads arrive in any size, so the
   whole image stays visible and a blurred copy of it fills the rest of the slot instead of grey
   bars or a crop. Uploads with a white / grey background get the product frame treatment instead:
   flat tinted ground + darken blend. Classes come from cs_fill_attrs() in cs_image_helper.php. */
.cs-fill { position: relative; overflow: hidden; isolation: isolate; background: var(--cs-bg-soft); }
.cs-fill { contain: paint; }
.cs-fill::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--cs-fill) center / cover no-repeat; filter: blur(14px) saturate(1.15); opacity: .85; transform: scale(1.12); will-change: transform; }
.cs-fill--cutout { background: #F4F5F2; }
.cs-fill--cutout::before { display: none; }
.cs-fill > a { display: block; width: 100%; height: 100%; }
.cs-fill > img, .cs-fill > a > img { position: relative; z-index: 1; width: 100%; height: 100%; min-height: 0; object-fit: contain !important; object-position: center; background: transparent; }
.cs-fill--cutout > img, .cs-fill--cutout > a > img { mix-blend-mode: darken; padding: 6%; box-sizing: border-box; }
.cs-fill > .cs-mosaic__caption, .cs-fill > .cs-tile__badge { z-index: 2; }
.cs-tile.cs-fill { height: auto; aspect-ratio: 2 / 3; }  /* the 600x900 banners admins upload today fit exactly */
.cs-tile.cs-fill img { height: 100%; }
.cs-mosaic__item.cs-fill { aspect-ratio: 3 / 2; }
.cs-hero__frame { position: relative; width: 92%; aspect-ratio: 610 / 450; border-radius: 16px; box-shadow: 0 32px 64px rgba(16,26,46,.22); }
.cs-hero__frame .cs-hero__img { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
@media (max-width: 900px) { .cs-hero__frame { width: 100%; } }
/* Transparent files (background removed, or uploaded without one) need no blend; the blend
   would otherwise turn white product parts (a white sock, a white sole) into the tile colour. */
.cs-media--clear img, body.cs-page-product-single .big-img .show.cs-media--clear #show-img,
.cs-media--plain img, body.cs-page-product-single .big-img .show.cs-media--plain #show-img { mix-blend-mode: normal !important; }

/* Photography in cards keeps faces: crop from the top, not the middle. */
ul.categorie .pro-info .sold_out.cs-media--photo img.img-fluid, .cs-product-card__media.cs-media--photo img { object-position: top center; }

/* Dropdowns: the browser's own arrow sat tiny in the far corner. Draw one chevron at a fixed size and
   distance from the edge, and keep the text clear of it. `background: #fff !important` in comet-redesign.css
   resets background-image, so the image is set again here with !important. */
select.form-control:not([multiple]):not([size]),
select.giftinput:not([multiple]):not([size]),
.cs-auth select:not([multiple]),
.cs-form-grid select:not([multiple]),
body.cs-cart-page select#shipping_and_pickup {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23131A26' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 18px center !important;
  background-size: 18px 18px !important;
  padding-right: 50px !important;
  cursor: pointer;
}
select.form-control:disabled, select.giftinput:disabled { cursor: not-allowed; opacity: .6; }
select::-ms-expand { display: none; }

/* Product page: add-on rows, quantity, price line and button were stacked with no breathing room, and the
   price line ran numbers into "Kr." ("232Kr. + 145.00Kr."). Give the add-ons a gap after the checkbox, and
   show the price line as a small summary panel: breakdown left, total right. jQuery .show() clears the inline
   display:none, so the panel's own display comes from here. */
body.cs-page-product-single label:has(> input.print_logo_name),
body.cs-page-product-single label:has(> input.print_back_logo_name),
body.cs-page-product-single label:has(> input.print_club_name) {
  display: block;
  position: relative;
  padding-left: 28px;
  margin: 6px 0 10px;
  line-height: 1.45;
}
body.cs-page-product-single label > input.print_logo_name,
body.cs-page-product-single label > input.print_back_logo_name,
body.cs-page-product-single label > input.print_club_name {
  position: absolute;
  left: 0;
  top: 3px;
  margin: 0 !important;
}
#dv_sm_price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 18px;
  width: 100% !important;
  max-width: 440px;
  margin: 20px 0 6px !important;
  padding: 14px 18px;
  background: #F6F7F9;
  border: 1px solid var(--cs-border);
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
}
#dv_sm_price::before, #dv_sm_price::after { display: none !important; } /* Bootstrap .row clearfix would become flex items */
#dv_sm_price > div { margin: 0 !important; padding: 0 !important; text-align: left; }
#dv_sm_price .hidPricenumber { flex: 1 1 auto; font-size: 15px; font-weight: 600; color: var(--cs-text-mid); }
#dv_sm_price .hidPricenumber small { font-size: 13px; font-weight: 600; }
#dv_sm_price .number.pricenumber { margin-left: auto !important; font-size: 22px; font-weight: 900; white-space: nowrap; }
#spProdPrice_1::after, #spAddonPrice_1::after, #sp2ProdPrice_1::after, #sp2AddonPrice_1::after { content: " "; }
body.cs-page-product-single #add_only { margin-top: 10px; }

/* Cart step 02 "Sende eller hente?": label above the choice, choice at a readable width (was label squeezed
   beside a full-width select). */
body.cs-cart-page #frm_shipping label.zip { display: block !important; margin: 4px 0 8px !important; }
body.cs-cart-page select#shipping_and_pickup { display: block; width: 100% !important; max-width: 440px; }

/* Cart payment choice: logos came in different shapes (Vipps wide, Kustom a 256px square), so the tiles had
   different heights and an empty right half, and nothing showed the tile was selectable. Each tile is now one
   row: radio ring on the left, name + note, and the logo in the same rounded 112x44 box on the right. The
   selected tile fills the ring (the old dot after the logo is dropped). */
#payment-form .cs-payment-option .form-check-label {
  position: relative;
  display: flex !important;
  align-items: center;
  gap: 16px;
  min-height: 78px;
  max-width: 520px;
  padding: 14px 18px 14px 54px !important;
}
#payment-form .cs-payment-option .form-check-label::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  border-radius: 999px;
  border: 2px solid #C5CAD3;
  background: #fff;
  box-sizing: border-box;
  transition: border-color .15s ease, background-color .15s ease;
}
#payment-form .cs-payment-option .form-check-label:hover::before { border-color: var(--cs-blue); }
#payment-form .cs-payment-option .form-check-input:checked + .form-check-label::before,
#payment-form .cs-payment-option .form-check-label.is-selected::before {
  border-color: var(--cs-blue);
  background: var(--cs-blue);
  box-shadow: inset 0 0 0 4px #fff;
}
#payment-form .cs-payment-option .form-check-label.is-selected::after { display: none !important; }
#payment-form .cs-payment-option .cs-payment-name { flex: 1 1 auto; font-size: 16px; line-height: 1.3; }
#payment-form .cs-payment-option .cs-payment-name small { margin-top: 3px; font-size: 13px; color: var(--cs-text-soft); }
#payment-form .cs-payment-option .form-check-label img {
  flex: none;
  width: 112px !important;
  max-width: 112px !important;
  height: 44px !important;
  padding: 0 !important;
  margin: 0 0 0 auto !important;
  object-fit: cover;
  border-radius: 10px !important;
}
.cs-checkout-actions { max-width: 550px; }

/* Listing filters (desktop): the panel is sticky, and products.php moves its `top` with the scroll so a panel
   taller than the screen follows the page until its last filter is visible (and its first one when scrolling
   back up) instead of cutting the lower filters off. */