/*
Theme Name:  3F Video
Theme URI:   https://3fvideo.no
Description: Purpose-built theme for 3F Video — dark, poster-led catalogue and
             WooCommerce shop. Replaces Typehardcore/Typecore.
Author:      Fjelstad
Version:     1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: 3fvideo
Tags:        e-commerce, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   1. Tokens
   Contrast-checked against WCAG AA. The deep red is for fills and display
   type only (3.28:1 — passes the 3:1 large-text bar); --accent-text is the
   lighter tint used wherever red appears at body size (5.13:1).
   ========================================================================== */
:root {
  --ink:        #0A0A0B;
  --ink-2:      #0E0E10;
  --card:       #131315;
  --card-2:     #17171A;
  --rule:       #232326;
  --rule-soft:  #1E1E21;
  --control:    #6B6B71;   /* form + control borders, 3.7:1 */
  --text:       #E9E6E2;
  --text-2:     #B5B1AC;
  --text-3:     #86827D;   /* labels, 5.19:1 */
  --text-4:     #847F78;   /* helper + legal, 4.98:1 */
  --accent:     #C4161C;
  --accent-text:#E8474D;
  --vipps:      #FF5B24;
  --in-stock:   #4DE0A0;

  --pad:        56px;
  --pad-m:      16px;
  --maxw:       1440px;

  --f-disp: Anton, Impact, "Arial Narrow Bold", sans-serif;
  --f-body: Archivo, "Helvetica Neue", Arial, sans-serif;
}

/* ==========================================================================
   2. Reset + base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--text); text-decoration: none; }
a:hover { color: var(--accent-text); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }

h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0 0 15px; }
ul, ol { margin: 0 0 15px; }

.disp { font-family: var(--f-disp); font-weight: 400; text-transform: uppercase; }
.lbl  { font-size: 12px; letter-spacing: .17em; text-transform: uppercase; color: var(--text-3); }

.screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px,1px,1px,1px); white-space: nowrap;
}
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
  left: 8px; top: 8px; z-index: 100; background: var(--accent); color: #fff;
  padding: 12px 18px; font-family: var(--f-disp); letter-spacing: .1em;
}

/* Every still and poster carries the same scanline texture */
.scan {
  background-image: repeating-linear-gradient(to bottom,
    rgba(0,0,0,.28) 0px, rgba(0,0,0,.28) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 3px);
}

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; }
.pad  { padding-left: var(--pad); padding-right: var(--pad); }

/* ==========================================================================
   3. Header
   ========================================================================== */
.marquee {
  background: var(--accent); color: #fff; height: 30px;
  display: flex; align-items: center; justify-content: center;
  gap: 44px; overflow: hidden;
}
.marquee span { font-size: 13px; letter-spacing: .22em; }
.marquee span:nth-child(even) { opacity: .58; }

.site-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--pad); border-bottom: 1px solid var(--rule);
}
.site-logo img { width: 156px; }

.nav-main { display: flex; align-items: center; gap: 30px; }
.nav-main a {
  font-family: var(--f-disp); text-transform: uppercase;
  font-size: 15px; letter-spacing: .1em; padding: 11px 0; display: inline-block;
}
.nav-main .current-menu-item > a,
.nav-main .current_page_item > a,
.nav-main .current-menu-parent > a { color: var(--accent-text); }

.cart-link {
  display: flex; align-items: center; gap: 9px;
  background: #1A1A1D; border: 1px solid var(--control); padding: 10px 16px;
}
.cart-link span { font-family: var(--f-disp); font-size: 14px; letter-spacing: .08em; }

.nav-toggle { display: none; background: none; border: 0; padding: 0; cursor: pointer;
              width: 44px; height: 44px; align-items: center; justify-content: center; }

/* ==========================================================================
   4. Breadcrumb + page head
   ========================================================================== */
/* Wraps because deep pages produce long trails — "Forside / Langfilmer /
   Bunker / Bunker: Bortklipt" overflowed a 371px viewport by 14px. */
.crumb { display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
         padding: 18px var(--pad); border-bottom: 1px solid #17171A; }
.crumb .here { min-width: 0; }
.crumb a, .crumb span { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.crumb a { color: var(--text-4); padding: 6px 0; display: inline-block; }
.crumb .sep { color: var(--text-4); }
.crumb .here { color: var(--text); }

.page-head { display: flex; align-items: flex-end; justify-content: space-between;
             gap: 40px; padding: 46px var(--pad) 30px; }
.page-head h1 { font-family: var(--f-disp); text-transform: uppercase;
                font-size: 58px; line-height: .95; letter-spacing: -.005em; }
.page-head p  { max-width: 640px; font-size: 16px; line-height: 1.6;
                color: var(--text-2); text-wrap: pretty; margin: 12px 0 0; }

.section { padding: 58px var(--pad) 66px; border-top: 1px solid var(--rule); }
.section--alt { background: var(--ink-2); }
.section-head { display: flex; align-items: baseline; justify-content: space-between;
                gap: 20px; margin-bottom: 26px; }
.section-head h2 { font-family: var(--f-disp); text-transform: uppercase;
                   font-size: 34px; letter-spacing: .04em; }

/* ==========================================================================
   5. Buttons — white on red (6.04:1). Black on this red fails AA.
   ========================================================================== */
.btn {
  font-family: var(--f-disp); text-transform: uppercase;
  display: inline-block; padding: 14px 24px; font-size: 15px; letter-spacing: .1em;
  border: 0; cursor: pointer; text-align: center;
}
.btn--lg    { padding: 17px 32px; font-size: 17px; }
.btn--solid { background: var(--accent); color: #fff; }
.btn--solid:hover { background: #A91318; color: #fff; }
.btn--ghost { border: 1px solid var(--control); color: var(--text); }
.btn--ghost:hover { border-color: var(--text); color: var(--text); }
.btn--dark  { background: #1F1F23; color: var(--text); }
.btn--block { display: block; width: 100%; }

/* Vipps is a supplied brand asset: fixed size, fixed radius, never restyled.
   It is deliberately the only rounded element in the design. */
.vipps-btn {
  box-sizing: border-box; background: var(--vipps); color: #fff;
  width: 253px; height: 48px; border-radius: 24px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 24px; font-family: var(--f-body); font-weight: 700; font-size: 16px;
  letter-spacing: -.01em; white-space: nowrap;
}
.vipps-btn:hover { color: #fff; opacity: .92; }
.vipps-btn--rect { width: 250px; height: 44px; border-radius: 5px; }
.vipps-wrap { display: flex; justify-content: center; }

.chip {
  font-family: var(--f-disp); text-transform: uppercase;
  font-size: 14px; letter-spacing: .1em; padding: 9px 18px;
  border: 1px solid var(--control); color: var(--text-2); display: inline-block;
}
.chip.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }

.badge {
  background: var(--accent); color: #fff; padding: 5px 11px;
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}

/* ==========================================================================
   6. Cards
   ========================================================================== */
.grid { display: grid; gap: 20px; }
.grid--5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; }
.grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 26px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }

.poster { display: flex; flex-direction: column; gap: 11px; }
.poster__img { position: relative; aspect-ratio: 2/3; overflow: hidden;
               background: var(--card-2); border: 1px solid var(--rule); }
.poster__img img { width: 100%; height: 100%; object-fit: cover; }
.poster__img .scan { position: absolute; inset: 0; opacity: .55; }
.poster__nr { position: absolute; top: 0; left: 0; background: var(--accent); color: #fff;
              font-family: var(--f-disp); font-size: 13px; letter-spacing: .06em; padding: 4px 9px; }
.poster h3 { font-family: var(--f-disp); text-transform: uppercase;
             font-size: 19px; line-height: 1.08; }

.pcard { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--rule); }
.pcard__img { position: relative; aspect-ratio: 3/4; overflow: hidden; background: var(--card-2); }
.pcard__img img { width: 100%; height: 100%; object-fit: cover; }
.pcard__body { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 10px; flex-grow: 1; }
.pcard h3 { font-family: var(--f-disp); text-transform: uppercase;
            font-size: 20px; line-height: 1.1; flex-grow: 1; }
.pcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 4px; }
.pcard .price { font-family: var(--f-disp); font-size: 24px; }

.stock { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-2); }
.stock::before { content: ""; width: 8px; height: 8px; background: var(--in-stock); display: block; }

/* ==========================================================================
   7. Forms
   ========================================================================== */
.fld, input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=search], input[type=number], textarea, select {
  box-sizing: border-box; background: var(--card); border: 1px solid var(--control);
  color: var(--text); font-family: var(--f-body); font-size: 15px;
  padding: 14px 15px; width: 100%; border-radius: 0;
}
textarea { min-height: 128px; }
::placeholder { color: #8A857E; opacity: 1; }
label { display: block; }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }

/* ==========================================================================
   8. Footer
   ========================================================================== */
.site-footer { background: var(--ink-2); border-top: 1px solid var(--rule);
               padding: 46px var(--pad) 34px; display: flex; flex-direction: column; gap: 34px; }
.footer-cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.footer-col h3 { font-family: var(--f-disp); text-transform: uppercase;
                 font-size: 15px; letter-spacing: .1em; margin-bottom: 11px; }
.footer-col a { font-size: 14px; color: var(--text-3); padding: 6px 0; display: inline-block; }
.footer-about p { max-width: 320px; font-size: 14px; line-height: 1.65; color: var(--text-3); }
.footer-legal { max-width: 320px; font-size: 13px; line-height: 1.7; color: var(--text-4); }
.footer-bar { display: flex; align-items: center; justify-content: space-between;
              border-top: 1px solid var(--rule); padding-top: 22px; }
.footer-bar span { font-size: 13px; color: var(--text-4); }
.paymark { border: 1px solid var(--control); color: var(--text-2); font-size: 12px;
           font-weight: 600; letter-spacing: .08em; padding: 6px 11px; }

/* ==========================================================================
   9. Editorial content (pages, posts, terms)
   ========================================================================== */
.prose { max-width: 820px; font-size: 15px; line-height: 1.75; color: var(--text-2); }
.prose h2 { font-family: var(--f-disp); text-transform: uppercase; font-size: 28px;
            letter-spacing: .04em; padding-bottom: 12px; border-bottom: 1px solid var(--accent);
            margin: 34px 0 14px; }
.prose h3 { font-family: var(--f-disp); text-transform: uppercase; font-size: 20px;
            margin: 26px 0 10px; }
.prose a { color: var(--accent-text); }
.prose img { margin: 18px 0; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose blockquote { border-left: 2px solid var(--accent); padding-left: 20px; margin: 20px 0;
                    font-style: italic; color: var(--text); }

/* ==========================================================================
   10. Mobile — 390px reference. Footer is deliberately compact here: the
   desktop three-column footer stacks to 962px on a phone.
   ========================================================================== */
@media (max-width: 900px) {
  :root { --pad: var(--pad-m); }

  .nav-toggle { display: flex; }
  .nav-main { display: none; }
  .site-header { padding: 12px var(--pad-m); }
  .site-logo img { width: 112px; }

  .marquee { height: 26px; gap: 0; }
  .marquee span { font-size: 11px; letter-spacing: .2em; }
  .marquee span:not(:first-child) { display: none; }

  .page-head { flex-direction: column; align-items: flex-start; gap: 10px;
               padding: 26px var(--pad-m) 18px; }
  .page-head h1 { font-size: 38px; }
  .section { padding: 24px var(--pad-m) 28px; }
  .section-head h2 { font-size: 24px; }

  .grid--5, .grid--4, .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .poster h3 { font-size: 17px; }
  .pcard h3 { font-size: 16px; }
  .pcard .price { font-size: 19px; }
  /* .btn goes width:100% below, which cannot share a nowrap flex row with the
     price inside a ~130px card — the button kept its min-content width and spilled
     past the viewport. Stack them instead. */
  .pcard__foot { flex-direction: column; align-items: stretch; gap: 8px; }

  .btn { display: block; width: 100%; padding: 17px; font-size: 16px; }
  .btn--lg { padding: 17px; font-size: 16px; }

  .site-footer { padding: 22px var(--pad-m) 20px; gap: 16px; }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 0;
                 border-top: 1px solid var(--rule); padding-top: 4px; }
  .footer-col { display: contents; }
  .footer-col h3 { display: none; }
  .footer-col a { min-height: 40px; display: flex; align-items: center; font-size: 15px; padding: 0; }
  .footer-about { grid-column: 1 / -1; }
  .footer-bar { flex-direction: column; align-items: flex-start; gap: 12px; }
}

@media (max-width: 560px) {
  .grid--5, .grid--4, .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   11. Front page — hero and brand band
   ========================================================================== */
.hero { display: grid; grid-template-columns: 1fr 640px; align-items: stretch; }
.hero__text { padding: 74px 62px 68px var(--pad); display: flex; flex-direction: column;
              justify-content: center; gap: 26px; }
.hero__text h1 { font-size: 82px; line-height: .92; letter-spacing: -.01em; text-wrap: balance; }
.hero__text > p { max-width: 600px; font-size: 18px; line-height: 1.55; color: var(--text-2);
                  text-wrap: pretty; margin: 0; }
.hero__cta { display: flex; align-items: center; gap: 14px; padding-top: 6px; }
.hero__img { position: relative; background: var(--card); }
.hero__img img { width: 100%; height: 100%; object-fit: cover; }
.hero__img .scan { position: absolute; inset: 0; }
.hero__fade { position: absolute; inset: 0;
              background: linear-gradient(90deg, var(--ink) 0%, rgba(10,10,11,0) 34%); }

.band { position: relative; height: 430px; overflow: hidden; }
.band__img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%;
             filter: grayscale(.7) contrast(1.15) brightness(.42); }
.band__fade { position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--ink) 0%, rgba(10,10,11,.5) 32%, rgba(10,10,11,.86) 100%); }
.band .scan { position: absolute; inset: 0; }
.band__text { position: absolute; inset: 0; display: flex; flex-direction: column;
              align-items: center; justify-content: center; gap: 20px;
              padding: 0 200px; text-align: center; }
.band__text h2 { font-size: 108px; line-height: .88; letter-spacing: -.015em;
                 text-shadow: 0 4px 40px rgba(0,0,0,.6); }
.band__text h2 span { color: var(--accent); }
.band__text p { max-width: 640px; font-size: 17px; line-height: 1.6; color: #C6C2BD;
                text-wrap: pretty; margin: 0; }

/* ==========================================================================
   12. Catalogue + film page
   ========================================================================== */
.film-row { display: grid; grid-template-columns: 300px 1fr; gap: 36px;
            background: var(--ink-2); border: 1px solid var(--rule); padding: 28px; }
.film-row__img { position: relative; aspect-ratio: 2/3; overflow: hidden;
                 background: var(--card-2); display: block; }
.film-row__img img { width: 100%; height: 100%; object-fit: cover; }
.film-row__img .scan { position: absolute; inset: 0; opacity: .5; }
.film-row__body { display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.film-row__body h2 { font-family: var(--f-disp); text-transform: uppercase;
                     font-size: 46px; line-height: .98; }
.film-row__tag { max-width: 720px; font-size: 19px; line-height: 1.45; color: var(--text);
                 text-wrap: pretty; margin: 0; }
.film-row__meta { display: flex; align-items: center; gap: 12px; }

.film-hero { display: grid; grid-template-columns: 1fr 400px; gap: 40px;
             padding: 40px var(--pad) 52px; align-items: start; }
.film-hero iframe { max-width: 100%; }
.film-title { font-family: var(--f-disp); text-transform: uppercase; font-size: 72px; line-height: .92; }
.rail { background: var(--card); border: 1px solid var(--rule); padding: 22px;
        display: flex; flex-direction: column; gap: 16px; }
.rail__row { display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center; }
.rail__row img { border: 1px solid var(--rule); width: 100%; }

/* "Mer ekstrastoff" — the sibling list that used to be a sidebar widget.
   Rows are 44px tall so they stay comfortable tap targets on mobile. */
.rail-list { list-style: none; margin: 0; padding: 0;
             display: flex; flex-direction: column; }
.rail-list li + li { border-top: 1px solid var(--rule-soft); }
.rail-list a { display: flex; align-items: center; min-height: 44px; padding: 6px 0;
               font-size: 15px; line-height: 1.4; color: var(--text-2); }
.rail-list a:hover { color: var(--accent-text); }
.spec { display: flex; justify-content: space-between; gap: 14px; font-size: 13px; }
.spec dt { color: var(--text-4); }
.spec dd { color: var(--text-2); text-align: right; margin: 0; }

.extras { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
.extra { border: 1px solid var(--rule); background: var(--card); display: block; }
.extra__img { position: relative; aspect-ratio: 16/9; overflow: hidden; display: block; }
.extra__img img { width: 100%; height: 100%; object-fit: cover; }
.extra__img .scan { position: absolute; inset: 0; opacity: .5; display: block; }
.extra h3 { padding: 12px 13px 14px; font-family: var(--f-body); font-size: 14px;
            font-weight: 600; line-height: 1.3; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero__img { order: -1; aspect-ratio: 4/3; }
  .hero__fade { background: linear-gradient(180deg, rgba(10,10,11,.15) 40%, var(--ink) 100%); }
  /* The -18px tucks the text under the image's fade. .hero__img is
     position:relative, so without a stacking context of its own the text
     lost its top 18px behind the image — on a phone that sliced the "Nytt"
     badge and the date row clean in half. */
  .hero__text { padding: 0 var(--pad-m) 26px; margin-top: -18px; gap: 13px;
                position: relative; z-index: 1; }
  .hero__text h1 { font-size: 40px; }
  .hero__cta { flex-direction: column; align-items: stretch; }

  .band { height: 300px; }
  .band__text { padding: 0 var(--pad-m); gap: 14px; }
  .band__text h2 { font-size: 46px; }
  .band__text p { font-size: 14px; }

  .film-row { grid-template-columns: 1fr; gap: 13px; padding: 14px; }
  .film-row__body h2 { font-size: 32px; }
  .film-hero { grid-template-columns: 1fr; gap: 22px; padding: 0 var(--pad-m) 26px; }
  .film-title { font-size: 48px; }
  .extras { grid-template-columns: 1fr; }
  .extra { display: grid; grid-template-columns: 130px 1fr; align-items: center; padding: 8px; gap: 13px; }
  .extra h3 { padding: 0; }
}

/* Menu markup — WordPress emits <ul><li>, so strip the list chrome. */
.nav-list, .footer-list { list-style: none; margin: 0; padding: 0; }
.nav-list { display: flex; align-items: center; gap: 30px; }
.footer-list { display: flex; flex-direction: column; }
.footer-list a { font-size: 14px; color: var(--text-3); padding: 6px 0; display: inline-block; }

@media (max-width: 900px) {
  /* Full-screen panel, matching screen 2 of the mobile design. */
  .nav-main { display: none; }
  .nav-main.is-open {
    display: block; position: fixed; inset: 0; z-index: 60;
    background: var(--ink); padding: 76px var(--pad-m) 24px; overflow-y: auto;
  }
  body.nav-open { overflow: hidden; }
  .nav-main.is-open .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-main.is-open .nav-list a {
    font-size: 30px; line-height: 1; padding: 17px 0;
    border-bottom: 1px solid var(--rule-soft); display: block;
  }
  .footer-list a { min-height: 40px; display: flex; align-items: center; font-size: 15px; padding: 0; }
}

/* ==========================================================================
   13. WooCommerce
   Cart and checkout are deliberately NOT template-overridden — Vipps, PayPal
   and the delivery-notes plugin all expect WooCommerce's own markup. They are
   styled here instead, which gets the design without touching the money path.
   ========================================================================== */

.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  list-style: none; margin: 0 0 20px; padding: 16px 18px;
  background: var(--card); border-top: 3px solid var(--accent); color: var(--text-2);
  font-size: 15px; line-height: 1.6;
}
/* A deeper green than --in-stock: the mint reads as stock status on a product,
   but as a 3px rule across a full-width notice it shouted like system chrome. */
.woocommerce-message { border-top-color: #2F8F63; }
/* WooCommerce paints a webfont tick absolutely at `left: 1.5em` inside notices.
   The theme reserves no room for it, so it landed on top of the message text. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { content: none; display: none; }
.woocommerce-message a, .woocommerce-info a, .woocommerce-error a { color: var(--accent-text); }
.woocommerce-message .button, .woocommerce-info .button { float: right; }

/* --- shop archive controls ------------------------------------------------ */
/* WooCommerce floats both of these, so they take no vertical space and land on
   top of the product grid. The count duplicates the "N varer" in the page head,
   so it goes; the ordering select stays but has to stop floating. */
/* Selectors match WooCommerce's own specificity (0,2,0) — a bare
   .woocommerce-ordering loses to `.woocommerce .woocommerce-ordering`. */
.woocommerce .woocommerce-result-count,
.woocommerce-page .woocommerce-result-count { display: none; }
.woocommerce .woocommerce-ordering,
.woocommerce-page .woocommerce-ordering {
	float: none; display: flex; justify-content: flex-end; margin: 0 0 22px;
}
.woocommerce-ordering select { width: auto; min-width: 220px; }
.shop-grid { margin-bottom: 30px; }

.woocommerce-pagination ul { list-style: none; display: flex; gap: 8px; padding: 0; margin: 30px 0 0; }
.woocommerce-pagination a, .woocommerce-pagination span {
  display: flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--control); font-family: var(--f-disp); font-size: 15px;
}
.woocommerce-pagination .current { background: var(--accent); color: #fff; border-color: var(--accent); }

/* --- single product ------------------------------------------------------- */
/* Three columns: poster, editorial, buy. The old two-column layout left the
   gallery column half empty and pushed the buy action ~1500px down the page,
   below the whole synopsis. Price and add-to-cart now sit above the fold. */
.product-page {
  display: grid; grid-template-columns: 460px minmax(0, 1fr) 360px; gap: 44px;
  padding: 40px var(--pad) 52px; align-items: start;
}
.product-head { grid-column: 1 / -1; }
.product-head .product_title {
  font-family: var(--f-disp); text-transform: uppercase;
  font-size: 58px; line-height: .95; letter-spacing: -.005em; margin: 0;
  max-width: 22ch;
}
.product-gallery { position: relative; }
/* woocommerce-layout.css sets `.woocommerce-product-gallery { width: 48%
   !important; float: left }` — sized for WooCommerce's own two-column product
   page, not a poster column, so a 500px cover rendered at 221px inside 460px.
   The !important is theirs; matching it is the only way out. */
.product-gallery .woocommerce-product-gallery { width: 100% !important; float: none !important; margin: 0; }
/* Stacked gallery (no flexslider): cover full width, any extra stills as a row
   beneath it. */
.product-gallery .woocommerce-product-gallery__wrapper {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px; margin: 0; width: 100%;
}
.product-gallery .woocommerce-product-gallery__image { width: auto !important; float: none !important; margin: 0; }
.product-gallery .woocommerce-product-gallery__image:first-child { grid-column: 1 / -1; }
.product-gallery .woocommerce-product-gallery__image img { width: 100%; height: auto; border: 1px solid var(--rule); }
.product-gallery .woocommerce-product-gallery__image img { border: 1px solid var(--rule); }
.product-gallery .flex-control-thumbs {
  list-style: none; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; padding: 0; margin: 12px 0 0;
}
.product-gallery .flex-control-thumbs img { border: 1px solid var(--rule); cursor: pointer; }
.product-gallery .flex-control-thumbs .flex-active { border-color: var(--accent); }
.product-gallery .onsale {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: var(--accent); color: #fff; padding: 5px 11px;
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}

/* The wrapper keeps WooCommerce's `summary entry-summary` classes so plugins
   that look for them still work — which also drags in
   `div.summary { width: 48% !important; float: right }` from
   woocommerce-layout.css. In a 501px grid track that rendered the whole
   editorial column at 240px. Same trap as the gallery above. */
.product-page .summary { width: 100% !important; float: none !important; }
.product-summary { display: flex; flex-direction: column; gap: 20px; }
.product-summary .product_title {
  font-family: var(--f-disp); text-transform: uppercase;
  font-size: 52px; line-height: .96; letter-spacing: -.005em; margin: 0;
}
.product-summary .price {
  font-family: var(--f-disp); font-size: 46px; color: var(--text);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 20px 0; margin: 0; display: block;
}
.product-summary .price del { color: var(--text-4); font-size: .6em; margin-right: 10px; }
.product-summary .price ins { text-decoration: none; }

/* Buy column. Sticky so the price and the button stay reachable while the
   reader works down a long synopsis and spec table. */
.product-buy {
  border: 1px solid var(--rule); background: var(--card); padding: 24px;
  display: flex; flex-direction: column; gap: 14px;
  position: sticky; top: 20px;
}
.product-buy .price {
  font-family: var(--f-disp); font-size: 44px; line-height: 1;
  color: var(--text); margin: 0; display: block;
}
.product-buy .price del { color: var(--text-4); font-size: .55em; margin-right: 10px; }
.product-buy .price ins { text-decoration: none; }
.buy-ship  { margin: -8px 0 0; font-size: 13px; color: var(--text-4); }
.buy-stock {
  margin: 0; display: flex; align-items: center; gap: 9px;
  font-size: 14px; color: var(--text-2);
  border-top: 1px solid var(--rule); padding-top: 14px;
}
.buy-stock span {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--in-stock); flex-shrink: 0;
}
.buy-note {
  margin: 0; font-size: 13px; line-height: 1.65; color: var(--text-4);
  border-top: 1px solid var(--rule); padding-top: 14px;
}
.product-buy .product_meta { font-size: 13px; color: var(--text-4); }
.product-buy .product_meta > span { display: block; margin-bottom: 4px; }

/* Spec table — see inc/product-specs.php for where the data is read from. */
.spec-block { border-top: 1px solid var(--rule); padding-top: 20px; }
.spec-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 40px; margin: 12px 0 0;
}
.spec-grid .spec {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 9px 0; border-bottom: 1px solid var(--rule-soft); font-size: 14px;
}
.spec-grid .spec dt { color: var(--text-4); }
.spec-grid .spec dd { margin: 0; color: var(--text); text-align: right; }
.spec-age { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.spec-age .disp {
  border: 1px solid var(--control); color: var(--text);
  font-size: 14px; padding: 3px 9px; letter-spacing: .06em;
}
.spec-age > span:last-child { font-size: 13px; color: var(--text-4); }

/* WooCommerce 11 ships `.woocommerce:where(body:not(…)) div.product p.price`.
   `:where()` adds no specificity, but the rest still scores (0,3,2) — which
   outranks `.product-summary .price` (0,2,0) and `.pcard .price` (0,2,0), so
   every price on the site rendered olive (#958E09). Match their shape and add
   one class to win. `body.` is required: their `.woocommerce` matches body. */
body.woocommerce div.product p.price,
body.woocommerce div.product span.price,
body.woocommerce-page div.product p.price,
body.woocommerce-page div.product span.price { color: var(--text); }
body.woocommerce div.product .price del,
body.woocommerce-page div.product .price del { color: var(--text-4); }
.product-summary .woocommerce-product-details__short-description {
  font-size: 18px; line-height: 1.55; color: var(--text-2); text-wrap: pretty;
}

/* Quantity and button share one row of equal height; the button was padded wide
   enough to wrap onto its own line inside a 312px card. */
.product-buy form.cart {
  display: flex; align-items: stretch; gap: 10px; flex-wrap: nowrap; margin: 0;
}
.product-buy form.cart .quantity {
  display: flex; align-items: center; flex: 0 0 72px;
  border: 1px solid var(--control); background: var(--card-2);
}
.product-buy form.cart .quantity input {
  width: 100%; height: 52px; border: 0; background: none; text-align: center;
  font-family: var(--f-disp); font-size: 19px; padding: 0; color: var(--text);
  /* The native spinner renders as a pale double-arrow that reads as a rendering
     fault on a dark control. Quantity is still typeable, and the cart page has
     its own stepper. */
  -moz-appearance: textfield; appearance: textfield;
}
.product-buy form.cart .quantity input::-webkit-outer-spin-button,
.product-buy form.cart .quantity input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.product-buy form.cart .single_add_to_cart_button {
  flex: 1 1 auto; min-width: 0; height: 52px;
  font-family: var(--f-disp); text-transform: uppercase; background: var(--accent); color: #fff;
  border: 0; padding: 0 18px; font-size: 16px; letter-spacing: .09em; cursor: pointer;
  white-space: nowrap;
}
.product-buy form.cart .single_add_to_cart_button:hover { background: #A91318; }
.product-summary .variations select { min-width: 220px; }
.product-summary .product_meta { font-size: 13px; color: var(--text-4); }
.product-summary .product_meta a { color: var(--text-2); }

.product-note { border-top: 1px solid var(--rule); padding-top: 18px; }
.product-note p { font-size: 13px; line-height: 1.7; color: var(--text-4); }
.product-note .stock { color: var(--text-2); font-size: 14px; margin-bottom: 10px; }

/* --- tabs ----------------------------------------------------------------- */
.woocommerce-tabs { padding: 0 var(--pad) 40px; }
.woocommerce-tabs .tabs {
  list-style: none; display: flex; gap: 0; padding: 0; margin: 0;
  border-bottom: 1px solid var(--rule); flex-wrap: wrap;
}
.woocommerce-tabs .tabs li a {
  display: block; font-family: var(--f-disp); text-transform: uppercase;
  font-size: 15px; letter-spacing: .1em; padding: 14px 22px; color: var(--text-4);
}
.woocommerce-tabs .tabs li.active a { color: var(--text); border-bottom: 2px solid var(--accent); }
.woocommerce-tabs .panel { padding: 24px 0 0; max-width: 820px; font-size: 15px;
                           line-height: 1.75; color: var(--text-2); }
.woocommerce-tabs .panel h2 { display: none; }
.woocommerce-tabs .panel table td, .woocommerce-tabs .panel table th {
  padding: 10px 14px 10px 0; border-bottom: 1px solid var(--rule-soft); text-align: left;
}

.related.products, .up-sells.products { padding: 46px var(--pad) 60px;
  background: var(--ink-2); border-top: 1px solid var(--rule); }
.related.products > h2, .up-sells.products > h2 {
  font-family: var(--f-disp); text-transform: uppercase; font-size: 34px;
  letter-spacing: .04em; margin-bottom: 26px;
}
.related.products ul.products, .up-sells.products ul.products {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px;
}
/* WooCommerce ships a float clearfix — `ul.products::before/::after
   { content:" "; display:table }`. In a grid container those pseudo-elements
   become GRID ITEMS: ::before takes cell 1 and shunts every product one cell
   right, which is the empty left column on the product page. */
.related.products ul.products::before,
.related.products ul.products::after,
.up-sells.products ul.products::before,
.up-sells.products ul.products::after { content: none; display: none; }

/* --- cart ----------------------------------------------------------------- */
.woocommerce-cart-form { margin-bottom: 30px; }
.shop_table { width: 100%; border-collapse: collapse; }
.shop_table th {
  text-align: left; font-family: var(--f-disp); text-transform: uppercase;
  font-size: 12px; letter-spacing: .17em; color: var(--text-3); font-weight: 400;
  padding: 0 14px 12px 0; border-bottom: 1px solid var(--accent);
}
.shop_table td { padding: 20px 14px 20px 0; border-bottom: 1px solid var(--rule-soft); vertical-align: middle; }
.shop_table .product-thumbnail img { width: 92px; border: 1px solid var(--rule); }
.shop_table .product-name a { font-family: var(--f-disp); text-transform: uppercase; font-size: 20px; }
.shop_table .product-price, .shop_table .product-subtotal, .shop_table .product-total {
  font-family: var(--f-disp); font-size: 21px;
}
.shop_table .quantity { display: flex; align-items: center; border: 1px solid var(--control);
                        background: var(--card); width: fit-content; }
.shop_table .quantity input { width: 66px; border: 0; background: none; text-align: center;
                              font-family: var(--f-disp); font-size: 16px; padding: 12px 4px; }
.shop_table .product-remove a {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; color: var(--text-2); font-size: 22px; line-height: 1;
}
.shop_table .product-remove a:hover { color: var(--accent-text); }
.shop_table .actions { padding-top: 24px; border-bottom: 0; }
.shop_table .coupon { display: flex; gap: 10px; flex-wrap: wrap; }
.shop_table .coupon input[type=text] { width: 220px; }
.shop_table .button, .wc-proceed-to-checkout .button, .woocommerce .button {
  font-family: var(--f-disp); text-transform: uppercase; background: var(--accent);
  color: #fff; border: 0; padding: 14px 24px; font-size: 15px; letter-spacing: .1em; cursor: pointer;
}
.shop_table .button:hover, .woocommerce .button:hover { background: #A91318; color: #fff; }
.shop_table .button[name=update_cart] { background: #1F1F23; }
.shop_table .button:disabled { opacity: .45; cursor: default; }

/* WooCommerce 11 outranks the three rules above on the cart page:
     .woocommerce-cart table.cart img            (0,2,2) beat the 92px thumbnail
     .woocommerce table.cart td.actions .input-text (0,4,2) beat the 220px coupon
     a `:where()`-wrapped default button rule    beat the red .button styling
   These deliberately carry a `body.` prefix to win, and must stay ahead of
   WooCommerce's defaults if that plugin's CSS is ever restyled again. */
body.woocommerce .shop_table td.product-thumbnail img,
body.woocommerce-page .shop_table td.product-thumbnail img { width: 92px; max-width: none; }

body.woocommerce .shop_table td.actions .coupon input[type="text"],
body.woocommerce-page .shop_table td.actions .coupon input[type="text"] { width: 220px; }

body.woocommerce .woocommerce-message .button,
body.woocommerce-page .woocommerce-message .button,
body.woocommerce .shop_table td.actions .button,
body.woocommerce-page .shop_table td.actions .button {
	font-family: var(--f-disp); text-transform: uppercase; background: var(--accent);
	color: #fff; border: 0; padding: 14px 24px; font-size: 15px; letter-spacing: .1em; cursor: pointer;
}
body.woocommerce .shop_table td.actions .button[name="update_cart"],
body.woocommerce-page .shop_table td.actions .button[name="update_cart"] { background: #1F1F23; }

.cart-collaterals { display: flex; justify-content: flex-end; }
.cart_totals { background: var(--card); border: 1px solid var(--rule); padding: 26px; width: 400px; max-width: 100%; }
.cart_totals h2 { font-family: var(--f-disp); text-transform: uppercase; font-size: 24px;
                  letter-spacing: .04em; margin-bottom: 16px; }
.cart_totals table { width: 100%; border-collapse: collapse; }
.cart_totals th { text-align: left; font-weight: 400; color: var(--text-3); font-size: 15px; padding: 8px 0; }
.cart_totals td { text-align: right; color: var(--text); font-size: 15px; padding: 8px 0; }
.cart_totals .order-total th, .cart_totals .order-total td {
  border-top: 1px solid var(--rule); padding-top: 16px;
  font-family: var(--f-disp); font-size: 20px; color: var(--text);
}
.cart_totals .order-total td { font-size: 32px; }
.wc-proceed-to-checkout { margin-top: 16px; }
.wc-proceed-to-checkout .button { display: block; width: 100%; text-align: center; padding: 18px; font-size: 17px; }

/* --- checkout ------------------------------------------------------------- */
.woocommerce-checkout .site-main > form.checkout {
  display: grid; grid-template-columns: 1fr 420px; gap: 44px;
  padding: 8px var(--pad) 64px; align-items: start;
}
.woocommerce-checkout h3 {
  font-family: var(--f-disp); text-transform: uppercase; font-size: 24px;
  letter-spacing: .04em; padding-bottom: 12px; border-bottom: 1px solid var(--rule); margin-bottom: 18px;
}
#customer_details .col-1, #customer_details .col-2 { margin-bottom: 26px; }
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-row { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.form-row-wide, .form-row.notes { grid-column: 1 / -1; }
.form-row label { font-size: 12px; letter-spacing: .17em; text-transform: uppercase; color: var(--text-3); }
.form-row .required { color: var(--accent-text); text-decoration: none; }
.select2-container--default .select2-selection--single {
  background: var(--card); border: 1px solid var(--control); border-radius: 0; height: auto; padding: 10px 12px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--text); line-height: 1.6; }
.select2-dropdown { background: var(--card); border-color: var(--control); }

#order_review_heading { padding: 0 var(--pad); }
.woocommerce-checkout-review-order {
  background: var(--card); border: 1px solid var(--rule); padding: 26px; position: sticky; top: 20px;
}
.woocommerce-checkout-review-order .shop_table th { border-bottom-color: var(--rule); }
.woocommerce-checkout-review-order .shop_table td { padding: 12px 0; font-size: 15px; }
.woocommerce-checkout-review-order .order-total td { font-family: var(--f-disp); font-size: 28px; }

#payment { background: none; }
#payment ul.payment_methods { list-style: none; padding: 0; margin: 0 0 18px; border: 0; }
#payment ul.payment_methods li {
  border: 1px solid var(--control); background: var(--card); padding: 16px 18px; margin-bottom: 10px;
}
#payment ul.payment_methods li label { font-family: var(--f-disp); text-transform: uppercase;
  font-size: 17px; letter-spacing: .08em; display: inline; }
#payment ul.payment_methods li img { float: right; max-height: 28px; width: auto; }
#payment .payment_box { background: none; padding: 10px 0 0; font-size: 14px; color: var(--text-3); }
#payment .payment_box::before { display: none; }
#payment .place-order { padding: 0; }
#payment #place_order {
  width: 100%; padding: 18px; font-size: 17px; font-family: var(--f-disp);
  text-transform: uppercase; letter-spacing: .1em; background: var(--accent); color: #fff; border: 0; cursor: pointer;
}
#payment #place_order:hover { background: #A91318; }
.woocommerce-terms-and-conditions-wrapper { font-size: 13px; color: var(--text-3); margin-bottom: 14px; }
.woocommerce-terms-and-conditions-wrapper a { color: var(--accent-text); }

/* Vipps express buttons — supplied assets, never restyled beyond centring. */
.vipps-express-checkout, .vipps-buy-now { display: block; margin: 10px auto 0; }
.widget_shopping_cart .vipps-express-checkout { margin-top: 12px; }

/* --- order received ------------------------------------------------------- */
.woocommerce-order { padding: 0 var(--pad) 60px; }
.woocommerce-thankyou-order-received {
  font-family: var(--f-disp); text-transform: uppercase; font-size: 40px;
  line-height: 1; margin-bottom: 24px;
}
.woocommerce-order-overview {
  list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 30px;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 22px 0; margin-bottom: 26px;
}
.woocommerce-order-overview li { font-size: 12px; letter-spacing: .17em;
  text-transform: uppercase; color: var(--text-3); }
.woocommerce-order-overview li strong { display: block; font-family: var(--f-disp);
  font-size: 20px; letter-spacing: 0; color: var(--text); margin-top: 6px; }

@media (max-width: 900px) {
  /* Stacked order: title, poster, buy, then the reading matter — so price and
     the button are reachable without scrolling past the synopsis and specs. */
  .product-page { grid-template-columns: 1fr; gap: 22px; padding: 14px var(--pad-m) 26px; }
  .product-head    { order: 1; }
  .product-gallery { order: 2; }
  .product-buy     { order: 3; position: static; }
  .product-summary { order: 4; }
  .product-head .product_title { font-size: 34px; max-width: none; }
  .spec-grid { grid-template-columns: 1fr; }
  .product-summary .product_title { font-size: 38px; }
  .product-summary .price { font-size: 34px; padding: 14px 0; }
  .product-buy form.cart { flex-direction: column; }
  .product-buy form.cart .quantity { width: fit-content; }
  .product-buy form.cart .single_add_to_cart_button { width: 100%; padding: 17px; }

  .woocommerce-tabs { padding: 0 var(--pad-m) 26px; }
  .woocommerce-tabs .tabs li a { padding: 14px 16px; font-size: 14px; }
  .related.products, .up-sells.products { padding: 24px var(--pad-m) 30px; }
  .related.products ul.products, .up-sells.products ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

  /* Cart table becomes stacked rows on a phone. */
  .shop_table thead { display: none; }
  .shop_table tr { display: grid; grid-template-columns: 76px 1fr; gap: 13px;
                   padding: 16px 0; border-bottom: 1px solid var(--rule-soft); }
  .shop_table td { display: block; border: 0; padding: 0; }
  .shop_table .product-thumbnail { grid-row: span 4; }
  .shop_table .product-thumbnail img { width: 100%; }
  .shop_table .product-remove { position: absolute; right: var(--pad-m); }
  .shop_table .actions { display: block; grid-column: 1 / -1; }
  .shop_table .coupon input[type=text] { width: 100%; }

  .cart-collaterals { display: block; }
  .cart_totals { width: 100%; padding: 18px; }
  .woocommerce-checkout .site-main > form.checkout { grid-template-columns: 1fr; gap: 24px; padding: 0 var(--pad-m) 30px; }
  .woocommerce-billing-fields__field-wrapper,
  .woocommerce-shipping-fields__field-wrapper { grid-template-columns: 1fr; }
  .woocommerce-checkout-review-order { position: static; padding: 18px; }
  #order_review_heading { padding: 0; }
}

/* --- Om-siden -------------------------------------------------------------- */
.om-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
            border-bottom: 1px solid var(--rule); }
.om-stats > div { padding: 30px 28px; display: flex; flex-direction: column; gap: 7px;
                  border-left: 1px solid var(--rule); }
.om-stats > div:first-child { border-left: 0; }
.om-stats .disp { font-size: 40px; line-height: 1; color: var(--accent); }

.om-body { display: grid; grid-template-columns: 1fr 400px; gap: 52px;
           padding: 52px var(--pad) 56px; align-items: start; }
.om-body > div:first-child { max-width: 820px; }

.filmografi > div { display: grid; grid-template-columns: 110px 1fr 110px; gap: 20px;
                    align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--rule-soft); }

@media (max-width: 900px) {
  .om-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .om-stats > div { padding: 18px var(--pad-m); }
  .om-stats > div:nth-child(odd) { border-left: 0; }
  .om-stats > div:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .om-stats .disp { font-size: 30px; }
  .om-body { grid-template-columns: 1fr; gap: 24px; padding: 24px var(--pad-m) 30px; }
  .filmografi > div { grid-template-columns: 84px 1fr; gap: 12px; }
  .filmografi > div span:last-child { display: none; }
}

/* --- Frakt & retur --------------------------------------------------------- */
.rate-card { background: var(--card); border: 1px solid var(--rule); padding: 26px;
             display: flex; flex-direction: column; gap: 12px; }
.rate-card > .disp { font-size: 46px; line-height: 1; color: var(--accent-text); }
.rate-card h3 { font-size: 20px; letter-spacing: .04em; }
.rate-card p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--text-3); text-wrap: pretty; }

.retur-grid { display: grid; grid-template-columns: 1fr 340px; gap: 44px; align-items: start; }

@media (max-width: 900px) {
  .rate-card { padding: 18px; }
  .rate-card > .disp { font-size: 36px; }
  .retur-grid { grid-template-columns: 1fr; gap: 18px; }
  .section .prose[style*="column-count"] { column-count: 1 !important; }
}

/* Sub-items are for the mobile panel only; the desktop bar stays one level. */
.nav-list .sub-menu { display: none; }

@media (max-width: 900px) {
  .nav-main.is-open .nav-list .sub-menu {
    display: flex; flex-direction: column; list-style: none;
    margin: 0 0 8px; padding: 0 0 0 16px; border-left: 1px solid var(--rule);
  }
  .nav-main.is-open .nav-list .sub-menu a {
    font-family: var(--f-body); text-transform: none; font-size: 17px;
    color: var(--text-2); padding: 11px 0; border-bottom: 0; min-height: 44px;
    display: flex; align-items: center;
  }
}

/* Section "see all" links are real navigation, so give them a real target. */
.section-head a.lbl,
.page-head a.lbl { min-height: 24px; display: inline-flex; align-items: center; padding: 6px 0; }

/* --- ekstrastoff-sider ---------------------------------------------------- */
/* Sibling navigation, rebuilt from the old "Mer ekstrastoff:" sidebar widget. */
.rail__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rail__list li + li { border-top: 1px solid var(--rule-soft); }
.rail__list a { display: block; padding: 11px 0; font-size: 15px; line-height: 1.4; color: var(--text-2); }
.rail__list a:hover { color: var(--accent-text); }

/* --- sticky buy bar (product page) ---------------------------------------- */
/* Appears when the real add-to-cart scrolls out of view; main.js unhides it so
   a no-JS visitor never sees a bar that cannot act. */
.buy-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--card); border-top: 1px solid var(--rule);
  transform: translateY(100%); transition: transform .22s ease;
  box-shadow: 0 -14px 40px rgba(0, 0, 0, .5);
}
.buy-bar.is-on { transform: translateY(0); }
.buy-bar__in {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; gap: 16px;
  padding: 10px var(--pad);
}
.buy-bar__img { flex-shrink: 0; width: 44px; }
.buy-bar__img img { width: 100%; height: auto; border: 1px solid var(--rule); }
.buy-bar__title {
  font-size: 17px; letter-spacing: .02em; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.buy-bar__price {
  font-family: var(--f-disp); font-size: 24px; color: var(--text);
  margin-left: auto; flex-shrink: 0; white-space: nowrap;
}
.buy-bar__price del { display: none; }
.buy-bar__price ins { text-decoration: none; }
.buy-bar__btn {
  flex-shrink: 0; background: var(--accent); color: #fff; border: 0; cursor: pointer;
  height: 48px; padding: 0 26px; font-size: 15px; letter-spacing: .1em;
}
.buy-bar__btn:hover { background: #A91318; }

@media (max-width: 900px) {
  .buy-bar__in { padding: 8px var(--pad-m); gap: 12px; }
  .buy-bar__img, .buy-bar__title { display: none; }
  .buy-bar__price { margin-left: 0; font-size: 22px; }
  .buy-bar__btn { flex: 1; padding: 0 16px; font-size: 14px; }
}

/* Inline links in body copy sat at 16px tall — under WCAG 2.5.8's 24px floor.
   Worst on Kjøpsvilkår, whose table of contents is a run of jump links inside
   paragraphs (20 of them), so they read as prose but behave as navigation.
   Block padding grows the hit area without reflowing the paragraph. */
@media (max-width: 900px) {
  .prose a, .rail a, .buy-note a, .product-summary a { padding-block: 5px; }
}

/* --- Anton is a single-weight face -------------------------------------- */
/* WooCommerce sets `font-weight: 700` on its buttons. Anton ships only 400, so
   the browser SYNTHESISES a bold — it thickens and smears the strokes, which is
   why white-on-red button text read as muddy. Every element in the display face
   is pinned to 400 so no faux bold can be generated. */
.disp, .btn, .button,
.single_add_to_cart_button, .checkout-button, .buy-bar__btn, .buy-bar__title,
.product-buy .price, .product-head .product_title,
.shop_table th, .shop_table .product-name a, .cart_totals h2,
h1, h2, h3, .page-head h1, .section-head h2 { font-weight: 400; }

/* --- cart / checkout / account: full measure ------------------------------ */
.shop-page { max-width: none; }
.shop-page .shop_table { width: 100%; }

/* Same native-spinner treatment as the product page. */
.shop_table .quantity input {
  -moz-appearance: textfield; appearance: textfield; color: var(--text);
}
.shop_table .quantity input::-webkit-outer-spin-button,
.shop_table .quantity input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Vipps sits full width under the add-to-cart rather than centred at its own
   intrinsic width, which left it visibly offset against the red button. */
.product-buy .vipps-buy-now,
.product-buy .vipps-express-checkout { display: block; width: 100%; margin: 4px 0 0; }

/* Vipps injects its button INSIDE form.cart (it hooks
   woocommerce_after_add_to_cart_button), so the form has three flex children,
   not two. A nowrap row squeezed the add-to-cart button to 36px. Let it wrap
   and give Vipps a row of its own, full width under the red button. */
.product-buy form.cart { flex-wrap: wrap; }
.product-buy form.cart .quantity { flex: 0 0 72px; }
.product-buy form.cart .single_add_to_cart_button { flex: 1 1 150px; }
.product-buy form.cart .vipps_buy_now_wrapper { flex: 1 0 100%; margin: 0; }
.product-buy form.cart .vipps_buy_now_wrapper .vipps-buy-now,
.product-buy form.cart .vipps-buy-now { width: 100%; margin: 0; }

/* The faux-bold fix needs WooCommerce's own specificity — a bare `.button`
   loses to their `:where()`-wrapped rule, so Anton kept being synthesised bold. */
body.woocommerce .button, body.woocommerce-page .button,
body.woocommerce button.button, body.woocommerce-page button.button,
body.woocommerce a.button, body.woocommerce-page a.button,
body.woocommerce input.button, body.woocommerce-page input.button,
body.woocommerce .single_add_to_cart_button, body.woocommerce-page .single_add_to_cart_button,
body.woocommerce .checkout-button, body.woocommerce-page .checkout-button {
  font-weight: 400;
}

/* 820px (prose) squeezed the cart into half the window; full width let the
   product column sprawl to 548px. 1180 keeps the table readable on a wide
   screen without stranding the totals off on their own. */
.shop-page { max-width: 1180px; }
.shop-page .shop_table .product-thumbnail { width: 116px; }
.shop-page .shop_table .product-name { width: 42%; }

/* The global "stretched" setting is right on the product page, where Vipps sits
   under a full-width button — in the cart it made a 1383px orange bar. */
.woocommerce-cart .vipps-express-checkout,
.woocommerce-cart .vipps-buy-now { max-width: 320px; margin-left: auto; margin-right: 0; }

/* --- cart: list + summary ------------------------------------------------- */
.cart-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 44px; align-items: start;
}
.cart-row {
  display: grid; grid-template-columns: 88px minmax(0, 1fr) auto;
  gap: 20px; align-items: center; padding: 20px 0; border-top: 1px solid var(--rule);
}
.cart-row__img img { width: 100%; border: 1px solid var(--rule); }
.cart-row__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cart-row__body h3 { font-size: 20px; line-height: 1.1; }
.cart-row__unit { font-size: 13px; color: var(--text-4); }
.cart-row__controls { display: flex; align-items: center; gap: 26px; }
.cart-row__sum { font-size: 26px; min-width: 96px; text-align: right; }
.cart-row .quantity { display: flex; align-items: center; border: 1px solid var(--control); height: 44px; }
.cart-row .quantity input {
  width: 62px; height: 42px; border: 0; background: none; text-align: center;
  font-family: var(--f-disp); font-size: 17px; color: var(--text); padding: 0;
  -moz-appearance: textfield; appearance: textfield;
}
.cart-row .quantity input::-webkit-outer-spin-button,
.cart-row .quantity input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cart-row .remove {
  color: var(--text-4); font-size: 22px; line-height: 1; width: 24px; text-align: center;
}
.cart-row .remove:hover { color: var(--accent-text); }
.cart-items__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  border-top: 1px solid var(--rule); padding-top: 22px;
}
.cart-back { color: var(--accent-text); }

.cart-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 20px; }
.cart-side .cart_totals {
  background: var(--card); border: 1px solid var(--rule); padding: 26px;
  display: flex; flex-direction: column; gap: 16px; width: auto;
}
.cart-side .cart_totals h2 { font-size: 24px; letter-spacing: .03em; margin: 0; }
/* A real table (wc_cart_totals_shipping_html echoes a <tr>), styled as a
   receipt: each row a flex line, label left, amount right. */
.totals-rows { width: 100%; border-collapse: collapse; display: block; }
.totals-rows tbody { display: block; }
.totals-rows tr {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--rule-soft); font-size: 15px;
}
.totals-rows tr th {
  font-family: var(--f-body); font-weight: 400; color: var(--text-4);
  text-align: left; padding: 0; border: 0; white-space: nowrap;
}
.totals-rows tr td { text-align: right; padding: 0; border: 0; color: var(--text); }
.totals-rows .order-total { border-bottom: 0; padding: 16px 0 0; }
.totals-rows .order-total th { font-family: var(--f-disp); text-transform: uppercase;
  font-size: 20px; letter-spacing: .03em; color: var(--text); }
.totals-rows .order-total td { font-family: var(--f-disp); font-size: 34px; line-height: 1; }
.totals-rows .woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; }
.totals-rows .woocommerce-shipping-destination { font-size: 12px; color: var(--text-4); margin: 6px 0 0; }
.totals-rows .shipping-calculator-button { color: var(--accent-text); font-size: 13px; }

.cart-side .wc-proceed-to-checkout { padding: 0; }
.cart-side .checkout-button {
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; height: 54px; font-family: var(--f-disp);
  font-weight: 400; text-transform: uppercase; font-size: 16px; letter-spacing: .1em; margin: 0;
}
.cart-side .checkout-button:hover { background: #A91318; color: #fff; }

.cart-coupon > summary { cursor: pointer; list-style: none; color: var(--text-2); }
.cart-coupon > summary::-webkit-details-marker { display: none; }
.cart-coupon .coupon { display: flex; gap: 8px; margin-top: 12px; }
.cart-coupon .coupon input[type=text] { flex: 1; min-width: 0; padding: 12px; }
.cart-coupon .coupon .btn { height: 44px; padding: 0 16px; font-size: 13px; }
.cart-side__note { margin: 0; font-size: 13px; line-height: 1.65; color: var(--text-4); }

@media (max-width: 900px) {
  .cart-layout { grid-template-columns: 1fr; gap: 26px; }
  .cart-side { position: static; }
  .cart-row { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; }
  .cart-row__body h3 { font-size: 17px; }
  /* Controls move under the title rather than beside it — at 390px the qty
     stepper, subtotal and remove cannot share a row with the name. */
  .cart-row__controls { grid-column: 2; justify-content: space-between; gap: 12px; }
  .cart-row__sum { font-size: 23px; min-width: 0; }
  .cart-items__foot { flex-direction: column; align-items: stretch; gap: 12px; }
}

/* --- contact ---------------------------------------------------------------
   The old form was Ninja Forms; its <input type="submit"> was styled by nothing
   at all, so the browser drew its own 47x21 bevelled system button. */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 44px; align-items: start; }
.contact-intro { margin-bottom: 30px; }
.contact-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.contact-form .field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.contact-form label span { color: var(--accent-text); }
.contact-form textarea { min-height: 170px; }
.contact-form__foot {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  border-top: 1px solid var(--rule); padding-top: 22px;
}
.contact-form__foot .btn { height: 52px; padding: 0 34px; font-size: 16px; }
.contact-form__foot > span { font-size: 13px; color: var(--text-4); }
.contact-form__foot .req { color: var(--accent-text); }

/* Honeypot: out of sight, out of the tab order, out of the a11y tree — but a
   bot filling every input still trips it. Never display:none; some bots skip
   hidden fields. */
.tref-hp {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

.form-note { border-top: 3px solid var(--accent); background: var(--card);
  padding: 16px 18px; margin-bottom: 24px; font-size: 15px; color: var(--text-2); }
.form-note--ok { border-top-color: #2F8F63; }
.form-note--ok strong { color: var(--text); display: block; margin-bottom: 2px; }
.form-note--err { border-top-color: var(--accent); }

.contact-side { display: flex; flex-direction: column; gap: 14px; }
.contact-mail { font-size: 22px; line-height: 1.15; word-break: break-all; color: var(--text); }
.contact-mail:hover { color: var(--accent-text); }
.contact-when { margin: 0; display: flex; align-items: center; gap: 9px; font-size: 14px;
  color: var(--text-2); border-top: 1px solid var(--rule); padding-top: 14px; }
.contact-when > span { width: 8px; height: 8px; border-radius: 50%; background: var(--in-stock); flex-shrink: 0; }
.contact-addr { font-size: 15px; line-height: 1.75; color: var(--text-2); }
.contact-fine { margin: 0; border-top: 1px solid var(--rule); padding-top: 14px;
  font-size: 13px; line-height: 1.7; color: var(--text-4); }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 26px; }
  .contact-form__row { grid-template-columns: 1fr; }
  .contact-form__foot .btn { width: 100%; }
  /* Direct address first on a phone — most people tapping Kontakt want the
     address, not to type a message on glass. */
  .contact-side { order: -1; }
}

/* --- quantity stepper ------------------------------------------------------
   Replaces the native spinner, which is hidden because it renders as a pale
   double-arrow on a dark control. */
.quantity { display: inline-flex; align-items: stretch; border: 1px solid var(--control); background: var(--card-2); }
.quantity .qty-step {
  background: none; border: 0; color: var(--text-2); cursor: pointer;
  width: 40px; display: flex; align-items: center; justify-content: center; padding: 0;
}
.quantity .qty-step:hover { color: var(--text); background: #1F1F23; }
.quantity .qty-step:disabled { opacity: .35; cursor: default; }
.quantity input {
  border: 0; border-left: 1px solid var(--rule); border-right: 1px solid var(--rule);
  background: none; text-align: center; color: var(--text);
  font-family: var(--f-disp); font-weight: 400; font-size: 17px; padding: 0; width: 46px;
  -moz-appearance: textfield; appearance: textfield;
}
.quantity input::-webkit-outer-spin-button,
.quantity input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Both places size the control the same way. */
.product-buy form.cart .quantity { flex: 0 0 auto; height: 52px; }
.product-buy form.cart .quantity input { height: 50px; width: 46px; }
.cart-row .quantity { height: 44px; }
.cart-row .quantity input { height: 42px; width: 44px; }

@media (max-width: 900px) {
  /* 44px minimum on the buttons themselves. */
  .quantity .qty-step { width: 44px; }
}

/* --- news article ----------------------------------------------------------
   The posts are 126–1189 characters. The old template gave them a 62px headline
   and full page width, which is what read as empty. */
.article-grid {
  display: grid; grid-template-columns: minmax(0, 680px) 372px;
  gap: 64px; padding: 44px var(--pad) 20px; justify-content: start; align-items: start;
}
.article__meta { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.article__title {
  font-size: 44px; line-height: 1.0; letter-spacing: -.005em;
  margin: 0 0 20px; text-wrap: balance;
}
.article__img { position: relative; overflow: hidden; border: 1px solid var(--rule); margin: 0 0 26px; }
.article__img img { width: 100%; display: block; }
.article__img .scan { position: absolute; inset: 0; opacity: .5; }

/* Uncropped article image — see the revert note in single.php.
   `width: auto` is the crisp rule: a 500px original draws at 500px instead of
   being stretched to fill 680px and going soft. 13 of 23 featured images are
   narrower than the 1360px this column wants on a 2x screen. max-height keeps a
   2560x2560 square from swallowing the page. */
.article__img--free {
  display: flex; justify-content: center; background: var(--card-2);
}
.article__img--free img {
  width: auto; max-width: 100%; height: auto; max-height: 520px;
  image-rendering: auto;
}
.article__body { max-width: none; }
/* The opening paragraph carries the announcement; the rest is detail. */
.article__body > p:first-of-type { font-size: 19px; line-height: 1.55; color: var(--text); }
/* WordPress captions: keep the credit under the image instead of floating it. */
.article__body .wp-caption { max-width: 100% !important; margin: 0 0 26px; }
.article__body .wp-caption img { width: 100%; height: auto; border: 1px solid var(--rule); }
.article__body .wp-caption-text {
  font-size: 13px; line-height: 1.6; color: var(--text-4); margin: 10px 0 0;
}
.article__body .alignright, .article__body .alignleft {
  float: none; margin: 0 0 26px; max-width: 100%;
}
.article__tags { display: flex; gap: 10px; flex-wrap: wrap;
  border-top: 1px solid var(--rule); padding-top: 22px; margin-top: 30px; }
.article__tags a { border: 1px solid var(--rule); padding: 7px 12px; color: var(--text-3); }
.article__tags a:hover { border-color: var(--control); color: var(--text); }

.article-side { display: flex; flex-direction: column; gap: 14px; }
.article-side .rail__text { display: flex; flex-direction: column; gap: 5px; }
.article-side .rail__text h3 { font-size: 19px; line-height: 1.1; }
.article-side .btn { display: flex; align-items: center; justify-content: center; height: 46px; padding: 0 18px; font-size: 14px; }

.article-nav {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  background: var(--rule); border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule); margin-top: 24px;
}
.article-nav__item {
  background: var(--ink); padding: 26px var(--pad);
  display: flex; flex-direction: column; gap: 7px; min-height: 44px;
}
.article-nav__item .disp { font-size: 20px; line-height: 1.15; }
.article-nav__item:hover .disp { color: var(--accent-text); }
.article-nav__item--next { text-align: right; align-items: flex-end; }

@media (max-width: 900px) {
  .article-grid { grid-template-columns: 1fr; gap: 26px; padding: 22px var(--pad-m) 16px; }
  .article__title { font-size: 30px; }
  .article__body > p:first-of-type { font-size: 17px; }
  .article-nav { grid-template-columns: 1fr; }
  .article-nav__item { padding: 20px var(--pad-m); }
  .article-nav__item--next { text-align: left; align-items: flex-start; }
}

/* --- [products] i sideinnhold ------------------------------------------- */
/* WooCommerce's [products] shortcode wraps cards in <ul class="products">, but
   content-product.php emits a <div>, so the plugin's own grid rules never match
   and every card stretched the full column width. Grid the wrapper directly. */
.prose ul.products,
.entry-content ul.products {
	list-style: none; margin: 0 0 15px; padding: 0;
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px;
}
.prose ul.products > *,
.entry-content ul.products > * { margin: 0; width: auto; float: none; }

@media (max-width: 900px) {
	.prose ul.products,
	.entry-content ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}

/* Scanline texture removed at the client's request (Kjetil, 27 Aug). The markup
   is left in place so it can be switched back on by deleting this rule. */
.scan { display: none !important; }

/* `.prose a` (0,1,1) outranks `.btn--solid` (0,1,0), so add-to-cart buttons
   inside page content rendered red-on-red and were unreadable. */
.prose .btn--solid, .entry-content .btn--solid { color: #fff; }
.prose .btn--ghost, .entry-content .btn--ghost { color: var(--text); }
.prose .btn--solid:hover, .entry-content .btn--solid:hover { color: #fff; }

/* --- filmkreditering (gjenskapt fra den gamle sidepanel-widgeten) --------- */
.credits { display: flex; flex-direction: column; gap: 9px; margin: 0; }
.credits__row { display: grid; grid-template-columns: 132px 1fr; gap: 12px; align-items: baseline; }
/* "STREAMINGFORMAT" is the longest label and overran a narrower column. */
.credits__row dt { font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
                   color: var(--text-3); margin: 0; overflow-wrap: anywhere; }
.credits__row dd { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.credits__row dd a { color: var(--accent-text); }

.credits__links { display: flex; flex-wrap: wrap; gap: 14px;
                  border-top: 1px solid var(--rule); padding-top: 14px; }
.credits__links a { font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
                    font-family: var(--f-disp); color: var(--accent-text); }

.credits__badge { display: flex; align-items: center; gap: 12px;
                  border-top: 1px solid var(--rule); padding-top: 14px; }
.credits__badge img { width: 46px; height: auto; flex-shrink: 0; }

@media (max-width: 900px) {
  .credits__row { grid-template-columns: 104px 1fr; gap: 10px; }
}

/* --- film page on mobile: poster and credits above the fold ----------------
   The aside stacked after the prose — and Kjetil's film pages END with his own
   PRODUKTER grid, so the poster and the "Om filmen" credits (the very thing he
   said was missing) landed below the products, far past where anyone scrolls.
   `display: contents` lifts the aside's children into the grid so they can be
   ordered individually; the inline `display:flex` on the aside needs the
   !important to give way. */
@media (max-width: 900px) {
  .film-hero > aside { display: contents !important; }
  .film-hero .film-row__img { order: 1; max-width: 220px; margin: 0 auto; }
  .film-hero .buy-rail      { order: 2; }
  .film-hero .credits-rail  { order: 3; }
  .film-hero > div:first-child { order: 4; }
  .film-hero > aside > .rail:not(.credits-rail):not(.buy-rail) { order: 5; }
}