/* Viken Profil 6.36.0 · site quality hardening
   Shared final overrides for responsive layout, footer alignment and keyboard usability. */
html{max-width:100%}
body{max-width:100%;min-width:0}
img,video,svg,canvas{max-width:100%}
input,select,textarea,button{max-width:100%}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid currentColor;
  outline-offset:3px;
}

/* Keep the legal/footer row aligned the same way on every public page. */
.vp-global-footer{display:block!important}
.vp-global-footer .vp-bottom{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:12px 24px!important;
}
.vp-global-footer .vp-bottomlinks{
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:flex-end!important;
  align-items:center!important;
  gap:8px 18px!important;
  margin:0!important;
}
.vp-global-footer .vp-bottomlinks a{white-space:nowrap}
.vp-global-footer>.vp-footer-social{
  max-width:1400px;
  margin:12px auto 0!important;
}

/* 6.30.8 desktop sizing must not leak into the compact webshop toolbar. */
@media(max-width:760px){
  .shophead{min-width:0!important}
  .shophead>:first-child,
  .shophead .tools{
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
  }
  .shophead .tools,
  .vp-os-live-tools{overflow:visible}
  .vp-global-footer .vp-bottom{
    grid-template-columns:1fr!important;
    align-items:start!important;
  }
  .vp-global-footer .vp-bottomlinks{
    justify-content:flex-start!important;
    margin:0!important;
    gap:8px 14px!important;
  }
  .vp-global-footer>.vp-footer-social{margin-top:10px!important}
}

/* Long Norwegian legal headings must never force the page wider than the phone. */
body.vp-legal-page .hero h1{
  overflow-wrap:anywhere;
  word-break:normal;
}
body.vp-legal-page .content,
body.vp-legal-page .contact,
body.vp-legal-page .contact>div{min-width:0}
@media(max-width:700px){
  body.vp-legal-page .hero h1{
    font-size:clamp(32px,10.2vw,42px)!important;
    line-height:1!important;
    letter-spacing:-.045em!important;
  }
  body.vp-legal-page .content h2{overflow-wrap:anywhere}
}

/* Skilt/dekor has service cards with real text and forms; forcing two tiny columns on
   very narrow screens made headings and inputs overflow. Keep the compact two-column
   presentation on tablets, but one clear column on phones. */
@media(max-width:520px){
  body[data-vp-site-section="skilt-dekor"] .grid,
  body[data-vp-site-section="skilt-dekor"] .product-grid,
  body[data-vp-site-section="skilt-dekor"] .stadium,
  body[data-vp-site-section="skilt-dekor"] .options{
    grid-template-columns:1fr!important;
  }
  body[data-vp-site-section="skilt-dekor"] .grid{padding-left:16px!important;padding-right:16px!important}
  body[data-vp-site-section="skilt-dekor"] .card,
  body[data-vp-site-section="skilt-dekor"] .pbody,
  body[data-vp-site-section="skilt-dekor"] .stadium-body{min-width:0}
  body[data-vp-site-section="skilt-dekor"] h2,
  body[data-vp-site-section="skilt-dekor"] h3{overflow-wrap:anywhere}
  body[data-vp-site-section="skilt-dekor"] .calc-grid{grid-template-columns:1fr 1fr!important}
  body[data-vp-site-section="skilt-dekor"] .calc-grid>*:last-child:nth-child(odd){grid-column:1/-1}
  body[data-vp-site-section="skilt-dekor"] .stadium-visual{min-height:210px}
}

/* Tiny phones: controls remain readable and tappable without creating horizontal scroll. */
@media(max-width:360px){
  .vp-global-footer .vp-bottomlinks{gap:7px 11px!important}
  .vp-global-footer .vp-bottomlinks a{font-size:10px!important}
  .tools .vp-filter-toolbar-control,
  .tools #sortProducts,
  .vp-os-live-tools .vp-filter-toolbar-control,
  .vp-os-live-tools #vpLiveSort{font-size:12px!important}
}


/* 6.36.1 – equal card actions + no floating contact bar. */
.vp-contact-fab{display:none!important}
.section .grid>.card,
.vp-illus-card-row>.card,
.vp-illus-card-row>.pcard{
  display:flex!important;
  flex-direction:column!important;
  height:100%;
}
.section .grid>.card>.body,
.vp-illus-card-row>.card>.body,
.vp-illus-card-row>.pcard>.pbody{
  display:flex!important;
  flex-direction:column!important;
  flex:1 1 auto!important;
  min-height:0;
}
.section .grid>.card>.body>.go,
.vp-illus-card-row>.card>.body>.go,
.vp-illus-card-row>.pcard>.pbody>.go{
  margin-top:auto!important;
}


/* 6.36.2 – category cards: equal row height and bottom-aligned actions. */
#produkter .grid{align-items:stretch!important;grid-auto-rows:1fr}
#produkter .grid>.card{display:flex!important;flex-direction:column!important;height:100%!important;min-height:100%!important}
#produkter .grid>.card>.body{display:flex!important;flex-direction:column!important;flex:1 1 auto!important;height:100%!important}
#produkter .grid>.card>.body>.go{margin-top:auto!important}
body[data-vp-site-section="giveaways"] #produkter .grid>.card>.body p,
body[data-vp-site-section="messe-event"] #produkter .grid>.card>.body p{min-height:0!important}

/* 6.48.1 – production-ready rhythm and control alignment across the public journey. */
:root{--vp-control-height:46px;--vp-ui-radius:3px;--vp-ui-line:#d8d8d2;--vp-ui-shadow:0 14px 38px rgba(0,0,0,.06)}
body :where(button,.btn,.primary,.secondary,.go,.add,.cta,.checkout-btn){min-height:var(--vp-control-height);display:inline-flex;align-items:center;justify-content:center;line-height:1.15;border-radius:var(--vp-ui-radius);font-weight:750;text-decoration:none;transition:background-color .15s,color .15s,border-color .15s,transform .15s,box-shadow .15s}
body :where(button,.btn,.primary,.secondary,.go,.add,.cta,.checkout-btn):not(:disabled):active{transform:translateY(1px)}
body :where(button,.btn,.primary,.secondary,.go,.add,.cta,.checkout-btn):disabled{opacity:.48;cursor:not-allowed}
body :where(input,select,textarea){border-radius:var(--vp-ui-radius)}
body :where(input,select,textarea,button,a):focus-visible{outline:3px solid #111;outline-offset:3px}
.vp-global-header{border-bottom-color:var(--vp-ui-line)!important}
.vp-global-header :where(a,button){align-items:center}
main :where(.card,.pcard,.product,.product-card,.panel,.summary,.checkout-card){border-color:var(--vp-ui-line)}
.section{scroll-margin-top:90px}
.section>.section-head,.section>.head{align-items:flex-end}
.grid,.product-grid,.products{align-items:stretch}
:where(.grid,.product-grid,.products)>:where(.card,.pcard,.product,.product-card){height:100%;min-width:0}
:where(.card,.pcard,.product,.product-card) :where(.body,.pbody,.product-body){min-width:0}
:where(.card,.pcard,.product,.product-card) :where(.go,.add,.btn,.cta){margin-top:auto}
.shophead{align-items:flex-end!important}
.shophead .tools,.vp-os-live-tools{align-items:stretch!important;gap:8px!important}
.shophead .tools>* ,.vp-os-live-tools>*{min-height:var(--vp-control-height)!important;margin:0!important}
.shophead :where(input,select){background:#fff;border:1px solid var(--vp-ui-line)}
.product-grid :where(.card,.pcard,.product,.product-card):hover{box-shadow:var(--vp-ui-shadow);transform:translateY(-2px)}
.product-grid :where(.card,.pcard,.product,.product-card){transition:transform .16s,box-shadow .16s}
.product-grid img{object-fit:contain}
.cart-row,.checkout-row,.summary-row{align-items:center}
.checkout-grid,.cart-layout,.product-layout{align-items:start}
.checkout-grid :where(input,select,textarea),.cart-layout :where(input,select,textarea),.product-layout :where(input,select,textarea){width:100%}
.qty,.quantity,.size-qty{align-items:end}
.price-summary,.order-summary,.cart-summary{position:sticky;top:92px}

@media(max-width:760px){
  :root{--vp-control-height:44px}
  .section{scroll-margin-top:70px}
  .shophead{align-items:stretch!important}
  .shophead .tools,.vp-os-live-tools{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;width:100%!important}
  .shophead .tools :where(.search,input),.vp-os-live-tools :where(.search,input){grid-column:1/-1;width:100%!important;min-width:0!important}
  .shophead .tools :where(select,.vp-filter-toolbar-control),.vp-os-live-tools :where(select,.vp-filter-toolbar-control){width:100%!important;min-width:0!important}
  .product-grid :where(.card,.pcard,.product,.product-card):hover{transform:none;box-shadow:none}
  .price-summary,.order-summary,.cart-summary{position:static}
  .checkout-grid,.cart-layout,.product-layout{min-width:0}
  .checkout-grid :where(.actions,.buttons),.cart-layout :where(.actions,.buttons),.product-layout :where(.actions,.buttons){display:grid;grid-template-columns:1fr;gap:8px}
  .checkout-grid :where(.actions,.buttons)>*,.cart-layout :where(.actions,.buttons)>*,.product-layout :where(.actions,.buttons)>*{width:100%;margin:0}
}