/* =====================================================================
 * pages.css — Content pages: cart, om-oss, kontakt, faq, legal,
 * account, empty states.
 *
 * Loaded conditionally for is_page() / is_cart() / is_account_page().
 * Owns layouts that don't fit the editorial homepage or shop archive.
 * ===================================================================== */

/* ---------- Generic editorial page (om-oss, legal, faq) ---------- */
.f3d-page-content {
  padding: var(--f3d-sp-12) var(--f3d-page-pad-x) var(--f3d-sp-20);
  max-width: var(--f3d-content-max);
  margin: 0 auto;
}

.f3d-page-content--prose {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--f3d-sp-16);
  max-width: 1100px;
}

.f3d-page-content__nav {
  position: sticky;
  top: 96px;
  align-self: start;
}
.f3d-page-content__nav .f3d-eyebrow { margin-bottom: var(--f3d-sp-4); }
.f3d-page-content__nav a {
  display: block;
  font-size: var(--f3d-fs-meta);
  color: var(--f3d-ink-muted);
  padding: var(--f3d-sp-2) 0;
  border-bottom: 1px solid var(--f3d-rule-soft);
}
.f3d-page-content__nav a:hover,
.f3d-page-content__nav a[aria-current] { color: var(--f3d-ink-primary); font-weight: var(--f3d-fw-medium); }

.f3d-prose {
  font-size: var(--f3d-fs-body-l);
  line-height: var(--f3d-lh-relaxed);
  color: var(--f3d-ink-body);
  max-width: 720px;
}
.f3d-prose h1 { font-size: var(--f3d-fs-display-l); margin: 0 0 var(--f3d-sp-7); }
.f3d-prose h2 { font-size: var(--f3d-fs-h-xl); margin: var(--f3d-sp-12) 0 var(--f3d-sp-5); }
.f3d-prose h3 { font-size: var(--f3d-fs-h-m); margin: var(--f3d-sp-10) 0 var(--f3d-sp-4); }
.f3d-prose p { margin: 0 0 var(--f3d-sp-5); }
.f3d-prose ul, .f3d-prose ol { padding-left: var(--f3d-sp-6); margin: 0 0 var(--f3d-sp-5); }
.f3d-prose li { margin-bottom: var(--f3d-sp-2); }
.f3d-prose a { color: var(--f3d-accent); text-decoration: underline; text-underline-offset: 3px; }
.f3d-prose blockquote {
  border-left: 3px solid var(--f3d-accent);
  padding: var(--f3d-sp-2) 0 var(--f3d-sp-2) var(--f3d-sp-6);
  font-style: italic;
  color: var(--f3d-ink-muted);
  margin: var(--f3d-sp-6) 0;
}

/* ---------- Cart page ---------- */
.woocommerce-cart .woocommerce {
  padding: var(--f3d-sp-12) var(--f3d-page-pad-x) var(--f3d-sp-16);
  max-width: var(--f3d-content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--f3d-sp-16);
  align-items: start;
}

.woocommerce-cart .cart-collaterals { width: 100%; float: none; }
.woocommerce-cart .woocommerce-cart-form { width: 100%; }

.woocommerce-cart h1 {
  grid-column: 1 / -1;
  font-size: var(--f3d-fs-display-l);
  margin: 0 0 var(--f3d-sp-3);
}

.woocommerce-cart table.cart {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  border: 0;
}

.woocommerce-cart table.cart thead { display: none; }

.woocommerce-cart table.cart tr.cart_item {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: var(--f3d-sp-4);
  padding: var(--f3d-sp-4) 0;
  border-bottom: 1px solid var(--f3d-rule-soft);
  align-items: center;
}

.woocommerce-cart table.cart td {
  padding: 0;
  border: 0;
  background: transparent;
}

.woocommerce-cart .product-thumbnail img {
  width: 80px; height: 80px;
  object-fit: cover;
  background: var(--f3d-bg-paper);
}

.woocommerce-cart .product-name a {
  font-family: var(--f3d-font-display);
  font-size: var(--f3d-fs-body);
  font-weight: var(--f3d-fw-medium);
  color: var(--f3d-ink-primary);
}

.woocommerce-cart .product-quantity .qty {
  width: 56px;
  padding: var(--f3d-sp-2);
  border: 1px solid var(--f3d-rule-strong);
  border-radius: var(--f3d-radius);
  font-family: var(--f3d-font-mono);
  text-align: center;
  font-size: var(--f3d-fs-meta);
}

.woocommerce-cart .product-subtotal {
  font-family: var(--f3d-font-display);
  font-size: var(--f3d-fs-body);
  font-weight: var(--f3d-fw-medium);
  text-align: right;
}

.woocommerce-cart .product-remove a {
  color: var(--f3d-ink-fainter);
  font-size: var(--f3d-fs-h-m);
  text-decoration: none;
}
.woocommerce-cart .product-remove a:hover { color: var(--f3d-error); }

/* Cart totals — sticky sidebar */
.woocommerce-cart .cart_totals {
  background: var(--f3d-bg-cream);
  padding: var(--f3d-sp-6) var(--f3d-sp-6);
  position: sticky;
  top: 96px;
}
.woocommerce-cart .cart_totals h2 {
  font-family: var(--f3d-font-mono);
  font-size: var(--f3d-fs-eye-s);
  text-transform: uppercase;
  letter-spacing: var(--f3d-ls-eye-loose);
  color: var(--f3d-ink-faint);
  margin: 0 0 var(--f3d-sp-4);
  font-weight: var(--f3d-fw-regular);
}
.woocommerce-cart .cart_totals table {
  width: 100%;
  border-collapse: collapse;
}
.woocommerce-cart .cart_totals th,
.woocommerce-cart .cart_totals td {
  padding: var(--f3d-sp-2) 0;
  font-size: var(--f3d-fs-meta);
  border: 0;
  background: transparent;
  text-align: left;
}
.woocommerce-cart .cart_totals .order-total {
  border-top: 1px solid var(--f3d-rule-strong);
  margin-top: var(--f3d-sp-2);
  padding-top: var(--f3d-sp-3);
}
.woocommerce-cart .cart_totals .order-total th { font-size: var(--f3d-fs-meta); }
.woocommerce-cart .cart_totals .order-total td {
  font-family: var(--f3d-font-display);
  font-size: var(--f3d-fs-h-s);
  font-weight: var(--f3d-fw-medium);
  text-align: right;
}

.woocommerce-cart .wc-proceed-to-checkout { padding: var(--f3d-sp-4) 0 0; }
.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
  display: block;
  width: 100%;
  background: var(--f3d-vipps);
  color: var(--f3d-vipps-ink);
  padding: var(--f3d-sp-4);
  font-size: var(--f3d-fs-body);
  font-weight: var(--f3d-fw-medium);
  text-align: center;
  border-radius: var(--f3d-radius);
  text-decoration: none;
}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover {
  background: oklch(from var(--f3d-vipps) calc(l - 0.05) c h);
}

/* Empty cart — rendered by the woocommerce_cart_is_empty action hook
   in mu-plugins/flavor3d-woocommerce-setup.php. The .f3d-empty-cart
   block is the single source of empty-state UI for both cart and
   wishlist modes. */
.f3d-empty-cart {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--f3d-sp-16) var(--f3d-page-pad-x) var(--f3d-sp-20);
  max-width: 520px;
  margin: 0 auto;
  gap: var(--f3d-sp-3);
}

.f3d-empty-cart__text {
  font-family: var(--f3d-font-display);
  font-size: var(--f3d-fs-display-m);
  font-weight: var(--f3d-fw-light);
  letter-spacing: var(--f3d-ls-display);
  line-height: var(--f3d-lh-tight);
  color: var(--f3d-ink-primary);
  margin: 0;
}

.f3d-empty-cart__sub {
  font-size: var(--f3d-fs-body-l);
  color: var(--f3d-ink-soft);
  margin: 0 0 var(--f3d-sp-5);
  max-width: 360px;
}

.f3d-empty-cart .button {
  display: inline-flex;
  align-items: center;
  gap: var(--f3d-sp-2);
  padding: var(--f3d-sp-3) var(--f3d-sp-7);
  background: var(--f3d-bg-dark);
  color: var(--f3d-ink-on-dark);
  font-family: var(--f3d-font-mono);
  font-size: var(--f3d-fs-meta);
  letter-spacing: var(--f3d-ls-eye);
  text-transform: uppercase;
  border-radius: var(--f3d-radius);
  border: 0;
  text-decoration: none;
  transition: background var(--f3d-dur) var(--f3d-easing);
}
.f3d-empty-cart .button:hover { background: var(--f3d-bg-darker); }
.f3d-empty-cart .button:focus-visible {
  outline: none;
  box-shadow: var(--f3d-focus-ring);
}

@media (max-width: 600px) {
  .f3d-empty-cart {
    padding: var(--f3d-sp-12) var(--f3d-page-pad-x-sm) var(--f3d-sp-16);
  }
  .f3d-empty-cart__text { font-size: var(--f3d-fs-display-s); }
}

/* ---------- Account ---------- */
/* Sidebar + content grid only applies on Woo sub-pages where the
   sidebar exists. On the dashboard root we strip the sidebar via a
   functions.php hook and use horizontal tabs instead, so the grid
   would leave the content squished into a 1fr track with an empty
   240px column. Scope the grid to "has the nav" via :has() — and
   never apply on logged-out (no nav, just the login form). */
body.logged-in.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--f3d-sp-16);
  padding: var(--f3d-sp-12) var(--f3d-page-pad-x) var(--f3d-sp-20);
  max-width: 1100px;
  margin: 0 auto;
  align-items: start;
}

.woocommerce-MyAccount-navigation { position: sticky; top: 96px; }
.woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--f3d-rule-soft);
}
.woocommerce-MyAccount-navigation li {
  border-bottom: 1px solid var(--f3d-rule-soft);
}
.woocommerce-MyAccount-navigation a {
  display: block;
  padding: var(--f3d-sp-3) 0;
  font-family: var(--f3d-font-mono);
  font-size: var(--f3d-fs-eye);
  letter-spacing: var(--f3d-ls-eye);
  text-transform: uppercase;
  color: var(--f3d-ink-muted);
  text-decoration: none;
  transition: color var(--f3d-dur-fast) var(--f3d-easing);
}
.woocommerce-MyAccount-navigation .is-active a,
.woocommerce-MyAccount-navigation a:hover {
  color: var(--f3d-ink-primary);
}

.woocommerce-MyAccount-content { min-width: 0; }
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 { margin-top: 0; }

@media (max-width: 900px) {
  .woocommerce-account .woocommerce {
    grid-template-columns: 1fr;
    gap: var(--f3d-sp-7);
    padding-inline: var(--f3d-page-pad-x-md);
    overflow-x: hidden;
  }
  /* Convert the WC vertical sidebar nav into a horizontal scrollable
     tabs strip on phones, matching the dashboard's .f3d-account__tabs
     look. Vertical list took too much real estate on a phone before
     the user could see any content. */
  .woocommerce-MyAccount-navigation {
    position: static;
    margin: 0 calc(var(--f3d-page-pad-x-md) * -1) var(--f3d-sp-6);
    padding: 0 var(--f3d-page-pad-x-md);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid var(--f3d-rule);
    scrollbar-width: none;
  }
  .woocommerce-MyAccount-navigation::-webkit-scrollbar { display: none; }
  .woocommerce-MyAccount-navigation ul {
    display: flex;
    gap: var(--f3d-sp-6);
    white-space: nowrap;
    border-top: none;
    padding: 0;
    margin: 0;
  }
  .woocommerce-MyAccount-navigation li {
    border-bottom: none;
    margin-bottom: -1px;
    flex-shrink: 0;
  }
  .woocommerce-MyAccount-navigation a {
    padding: 10px 0;
    border-bottom: 2px solid transparent;
  }
  .woocommerce-MyAccount-navigation .is-active a,
  .woocommerce-MyAccount-navigation a:hover {
    color: var(--f3d-ink-primary);
    border-bottom-color: var(--f3d-ink-primary);
  }
}

/* Login / register form — when standalone (not inside .f3d-account-auth) */
.woocommerce-form-login:not(.f3d-account-auth .woocommerce-form-login),
.woocommerce-form-register:not(.f3d-account-auth .woocommerce-form-register) {
  background: var(--f3d-bg-cream);
  padding: var(--f3d-sp-10);
  border-radius: var(--f3d-radius-md);
  max-width: 480px;
  margin: 0 auto;
}

/* Inside our editorial wrapper, drop the cream box and use clean fields */
.f3d-account-auth .woocommerce-form-login {
  background: transparent;
  padding: 0;
  border-radius: 0;
  max-width: none;
  margin: 0;
}
.f3d-account-auth .woocommerce-form-login p { margin: 0 0 var(--f3d-sp-5); }
.f3d-account-auth .woocommerce-form-login label {
  font-family: var(--f3d-font-mono);
  font-size: var(--f3d-fs-eye-s);
  text-transform: uppercase;
  letter-spacing: var(--f3d-ls-eye);
  color: var(--f3d-ink-faint);
  display: block;
  margin-bottom: var(--f3d-sp-2);
}
.f3d-account-auth .woocommerce-form-login input[type="text"],
.f3d-account-auth .woocommerce-form-login input[type="password"] {
  width: 100%;
  background: var(--f3d-bg-base);
  border: 1px solid var(--f3d-rule-strong);
  border-radius: var(--f3d-radius);
  padding: var(--f3d-sp-3) var(--f3d-sp-4);
  font-size: var(--f3d-fs-body);
}
.f3d-account-auth .woocommerce-form-login input[type="text"]:focus,
.f3d-account-auth .woocommerce-form-login input[type="password"]:focus {
  outline: 0;
  border-color: var(--f3d-accent);
  box-shadow: 0 0 0 3px oklch(from var(--f3d-accent) l c h / 0.18);
}
.f3d-account-auth .woocommerce-form-login__rememberme {
  display: inline-flex;
  align-items: center;
  gap: var(--f3d-sp-2);
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--f3d-font-body);
  font-size: var(--f3d-fs-meta);
  color: var(--f3d-ink-muted);
  margin-bottom: var(--f3d-sp-5);
}
.f3d-account-auth .woocommerce-form-login__submit {
  width: 100%;
  margin-bottom: var(--f3d-sp-3);
}
.f3d-account-auth .woocommerce-LostPassword {
  text-align: center;
  font-size: var(--f3d-fs-meta);
}
.f3d-account-auth .woocommerce-LostPassword a {
  color: var(--f3d-ink-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.f3d-account-auth .woocommerce-LostPassword a:hover { color: var(--f3d-ink-primary); }

/* Vipps slot — placeholder when plugin not installed */
.f3d-account-auth__vipps:empty::before {
  content: "Vipps-innlogging blir tilgjengelig snart.";
  display: block;
  text-align: center;
  font-size: var(--f3d-fs-meta);
  color: var(--f3d-ink-fainter);
  font-family: var(--f3d-font-mono);
  text-transform: uppercase;
  letter-spacing: var(--f3d-ls-eye);
  padding: var(--f3d-sp-4);
  border: 1px dashed var(--f3d-rule);
  border-radius: var(--f3d-radius);
}
.woocommerce-form-login p,
.woocommerce-form-register p { margin: 0 0 var(--f3d-sp-5); }
.woocommerce-form-login label,
.woocommerce-form-register label {
  font-family: var(--f3d-font-mono);
  font-size: var(--f3d-fs-eye-s);
  text-transform: uppercase;
  letter-spacing: var(--f3d-ls-eye);
  color: var(--f3d-ink-faint);
  display: block;
  margin-bottom: var(--f3d-sp-2);
}
.woocommerce-form-login input,
.woocommerce-form-register input {
  width: 100%;
  background: var(--f3d-bg-base);
  border: 1px solid var(--f3d-rule-strong);
  border-radius: var(--f3d-radius);
  padding: var(--f3d-sp-3) var(--f3d-sp-4);
  font-size: var(--f3d-fs-body);
}
.woocommerce-form-login button,
.woocommerce-form-register button {
  background: var(--f3d-bg-dark);
  color: var(--f3d-bg-base);
  padding: var(--f3d-sp-4) var(--f3d-sp-7);
  border-radius: var(--f3d-radius);
  font-size: var(--f3d-fs-body);
  font-weight: var(--f3d-fw-medium);
  width: 100%;
}

/* ---------- Contact page (two-col) ---------- */
.f3d-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--f3d-sp-16);
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--f3d-sp-16) var(--f3d-page-pad-x);
}
.f3d-contact__intro h1 { font-size: var(--f3d-fs-display-l); margin: 0 0 var(--f3d-sp-5); }
.f3d-contact__intro .f3d-lede { margin-bottom: var(--f3d-sp-10); }

.f3d-contact__meta {
  display: flex;
  flex-direction: column;
  gap: var(--f3d-sp-2);
  margin-top: var(--f3d-sp-7);
  padding-top: var(--f3d-sp-7);
  border-top: 1px solid var(--f3d-rule-soft);
  font-family: var(--f3d-font-mono);
  font-size: var(--f3d-fs-eye);
}
.f3d-contact__meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--f3d-sp-6);
  padding: var(--f3d-sp-1) 0;
}
.f3d-contact__meta-row dt {
  color: var(--f3d-ink-faint);
  text-transform: uppercase;
  letter-spacing: var(--f3d-ls-loose);
  margin: 0;
}
.f3d-contact__meta-row dd {
  color: var(--f3d-ink-primary);
  margin: 0;
  text-align: right;
}

.f3d-contact label {
  font-family: var(--f3d-font-mono);
  font-size: var(--f3d-fs-eye-s);
  text-transform: uppercase;
  letter-spacing: var(--f3d-ls-eye);
  color: var(--f3d-ink-faint);
  display: block;
  margin-bottom: var(--f3d-sp-2);
}

/* Contact form fields — base styling (was missing; inputs were
   browser-default before, unstyled and too small for touch). */
.f3d-contact-form__field input[type="text"],
.f3d-contact-form__field input[type="email"],
.f3d-contact-form__field input[type="tel"],
.f3d-contact-form__field textarea {
  width: 100%;
  height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--f3d-rule-strong);
  border-radius: var(--f3d-radius);
  background: var(--f3d-bg-base);
  color: var(--f3d-ink-primary);
  font-family: var(--f3d-font-body);
  font-size: var(--f3d-fs-body);
  box-sizing: border-box;
  transition: border-color var(--f3d-dur-fast) var(--f3d-easing);
}
.f3d-contact-form__field textarea {
  height: auto;
  min-height: 140px;
  padding: 12px 14px;
  line-height: 1.5;
  resize: vertical;
}
.f3d-contact-form__field input:focus,
.f3d-contact-form__field textarea:focus {
  outline: 0;
  border-color: var(--f3d-ink-primary);
  box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.08);
}
.f3d-contact-form button[type="submit"] {
  padding: 12px 24px;
  border-radius: 999px;
}

@media (max-width: 768px) {
  /* Full-width pill submit on phones for thumb-friendly tap. */
  .f3d-contact-form button[type="submit"] {
    width: 100%;
    padding: 14px 20px;
  }
  .f3d-contact-form__field input[type="text"],
  .f3d-contact-form__field input[type="email"],
  .f3d-contact-form__field input[type="tel"] {
    height: 48px;
  }
}

@media (max-width: 900px) {
  .f3d-contact {
    grid-template-columns: 1fr;
    gap: var(--f3d-sp-10);
    padding-inline: var(--f3d-page-pad-x-md);
  }
}
@media (max-width: 600px) {
  .f3d-contact { padding-inline: var(--f3d-page-pad-x-sm); }
}

/* ---------- FAQ page (two-col) ---------- */
.f3d-faq-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--f3d-sp-16) var(--f3d-page-pad-x);
}
.f3d-faq-page__header { margin-bottom: var(--f3d-sp-12); }
.f3d-faq-page__header h1 { font-size: var(--f3d-fs-display-l); margin: 0; }

.f3d-faq-page__body {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--f3d-sp-16);
  align-items: start;
}

.f3d-faq-page__nav {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: var(--f3d-sp-1);
}
.f3d-faq-page__nav .f3d-eyebrow { margin-bottom: var(--f3d-sp-4); }
.f3d-faq-page__nav a {
  font-size: var(--f3d-fs-meta);
  color: var(--f3d-ink-muted);
  padding: var(--f3d-sp-2) 0;
  border-bottom: 1px solid var(--f3d-rule-soft);
  text-decoration: none;
  transition: color var(--f3d-dur-fast) var(--f3d-easing);
}
.f3d-faq-page__nav a:hover { color: var(--f3d-ink-primary); }

.f3d-faq > section { margin-bottom: var(--f3d-sp-12); scroll-margin-top: 96px; }
.f3d-faq > section > .f3d-eyebrow {
  color: var(--f3d-accent);
  margin-bottom: var(--f3d-sp-4);
  display: block;
}

@media (max-width: 900px) {
  .f3d-faq-page { padding-inline: var(--f3d-page-pad-x-md); }
  .f3d-faq-page__body { grid-template-columns: 1fr; gap: var(--f3d-sp-10); }
  .f3d-faq-page__nav { position: static; }
}
@media (max-width: 600px) {
  .f3d-faq-page { padding-inline: var(--f3d-page-pad-x-sm); }
}

/* ---------- FAQ ---------- */
.f3d-faq__item {
  border-bottom: 1px solid var(--f3d-rule-soft);
}
.f3d-faq__q {
  width: 100%;
  text-align: left;
  padding: var(--f3d-sp-5) 0;
  font-size: var(--f3d-fs-body-l);
  font-weight: var(--f3d-fw-medium);
  color: var(--f3d-ink-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--f3d-sp-4);
}
.f3d-faq__q::after {
  content: "+";
  font-family: var(--f3d-font-mono);
  color: var(--f3d-ink-faint);
  font-size: var(--f3d-fs-h-m);
  transition: transform var(--f3d-dur) var(--f3d-easing);
}
.f3d-faq__item[open] .f3d-faq__q::after,
.f3d-faq__q[aria-expanded="true"]::after {
  content: "−";
}
.f3d-faq__a {
  padding: 0 0 var(--f3d-sp-6);
  font-size: var(--f3d-fs-body);
  color: var(--f3d-ink-soft);
  line-height: var(--f3d-lh-relaxed);
  max-width: 640px;
}

/* ---------- Empty / 404 / search-no-results states ---------- */
.f3d-empty {
  text-align: center;
  padding: var(--f3d-sp-20) var(--f3d-page-pad-x);
  max-width: 640px;
  margin: 0 auto;
}
.f3d-empty__eye {
  font-family: var(--f3d-font-mono);
  font-size: var(--f3d-fs-eye);
  letter-spacing: var(--f3d-ls-eye);
  text-transform: uppercase;
  color: var(--f3d-ink-faint);
  margin-bottom: var(--f3d-sp-5);
}
.f3d-empty h1 { font-size: var(--f3d-fs-display-l); margin: 0 0 var(--f3d-sp-4); }
.f3d-empty p { color: var(--f3d-ink-soft); margin: 0 0 var(--f3d-sp-7); }
.f3d-empty__actions {
  display: inline-flex;
  gap: var(--f3d-sp-3);
  flex-wrap: wrap;
  justify-content: center;
}

/* 404 — split layout variant */
.f3d-404-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--f3d-sp-12);
  padding: var(--f3d-sp-16) var(--f3d-page-pad-x);
  max-width: var(--f3d-content-max);
  margin: 0 auto;
  align-items: center;
}
.f3d-404-split__numerals {
  font-family: var(--f3d-font-display);
  font-size: 220px;
  font-weight: var(--f3d-fw-light);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--f3d-bg-paper);
}

/* ---------- Cookie banner (rendered globally; styled here so it
   ships with pages.css since the banner most often appears with
   non-product pages on first visit; can also be moved to base.css
   if you prefer global) ---------- */
.f3d-cookie {
  position: fixed;
  bottom: var(--f3d-sp-6);
  left: var(--f3d-sp-6);
  right: var(--f3d-sp-6);
  z-index: var(--f3d-z-cookie);
  background: var(--f3d-bg-base);
  border: 1px solid var(--f3d-rule);
  border-radius: var(--f3d-radius-md);
  box-shadow: var(--f3d-shadow);
  max-width: 1232px;
  margin: 0 auto;
  overflow: hidden;
}
.f3d-cookie__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--f3d-sp-8);
  padding: var(--f3d-sp-5) var(--f3d-sp-6);
  align-items: center;
}
.f3d-cookie__text {
  font-size: var(--f3d-fs-meta);
  color: var(--f3d-ink-muted);
  line-height: var(--f3d-lh-normal);
  margin: 0;
  max-width: 600px;
}
.f3d-cookie__actions {
  display: flex;
  gap: var(--f3d-sp-2);
  align-items: center;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .f3d-page-content,
  .f3d-contact,
  .woocommerce-cart .woocommerce,
  .woocommerce-account .woocommerce {
    padding-inline: var(--f3d-page-pad-x-md);
  }
  .f3d-page-content--prose { grid-template-columns: 180px 1fr; gap: var(--f3d-sp-8); }
  .woocommerce-cart .woocommerce { gap: var(--f3d-sp-10); }
  .woocommerce-account .woocommerce { gap: var(--f3d-sp-8); }
}

@media (max-width: 768px) {
  .f3d-page-content,
  .f3d-contact,
  .woocommerce-cart .woocommerce,
  .woocommerce-account .woocommerce {
    padding-inline: var(--f3d-page-pad-x-sm);
  }
  .f3d-page-content--prose,
  .woocommerce-cart .woocommerce,
  .woocommerce-account .woocommerce {
    grid-template-columns: 1fr;
  }
  .f3d-page-content__nav,
  .woocommerce-cart .cart_totals {
    position: static;
  }
  .woocommerce-MyAccount-navigation ul {
    display: flex; gap: var(--f3d-sp-2); flex-wrap: wrap;
    border-top: 0;
  }
  .woocommerce-MyAccount-navigation li {
    border: 1px solid var(--f3d-rule-soft);
    border-radius: var(--f3d-radius-pill);
  }
  .woocommerce-MyAccount-navigation a { padding: var(--f3d-sp-2) var(--f3d-sp-4); }

  .f3d-prose h1,
  .f3d-empty h1 { font-size: 32px; }

  .f3d-404-split {
    grid-template-columns: 1fr;
    padding-inline: var(--f3d-page-pad-x-sm);
  }
  .f3d-404-split__numerals { font-size: 120px; }

  .f3d-cookie {
    left: var(--f3d-sp-3);
    right: var(--f3d-sp-3);
    bottom: var(--f3d-sp-3);
  }
  .f3d-cookie__row {
    grid-template-columns: 1fr;
    gap: var(--f3d-sp-4);
  }
  .f3d-cookie__actions { flex-wrap: wrap; }

  .woocommerce-cart table.cart tr.cart_item {
    grid-template-columns: 60px 1fr;
    gap: var(--f3d-sp-3);
  }
  .woocommerce-cart .product-quantity,
  .woocommerce-cart .product-subtotal { grid-column: 2; }
  .woocommerce-cart .product-remove { position: absolute; right: 0; }
}

/* =====================================================================
 * Phase 3/4 additive styles — selectors introduced by template overrides
 * not present in the original spec bundles. Kept additive so the original
 * design intent in the section above remains untouched.
 * ===================================================================== */

/* Cart header */
.f3d-cart__header { margin-bottom: var(--f3d-sp-7); }
.f3d-cart__header h1 { margin: 0; font-size: var(--f3d-fs-display-l); }
.f3d-cart__count {
  font-family: var(--f3d-font-mono);
  font-size: var(--f3d-fs-eye);
  color: var(--f3d-ink-muted);
  text-transform: uppercase;
  letter-spacing: var(--f3d-ls-eye);
  margin: var(--f3d-sp-2) 0 0;
}

/* Order confirmation */
.f3d-confirm {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--f3d-sp-16) var(--f3d-page-pad-x) var(--f3d-sp-20);
  text-align: left;
}
.f3d-confirm__header { margin-bottom: var(--f3d-sp-10); }
.f3d-confirm__header h1 { font-size: var(--f3d-fs-display-l); margin: var(--f3d-sp-2) 0 var(--f3d-sp-5); }
.f3d-confirm__meta {
  font-family: var(--f3d-font-mono);
  font-size: var(--f3d-fs-meta);
  color: var(--f3d-ink-muted);
  margin: 0 0 var(--f3d-sp-5);
}
.f3d-confirm__lede { font-size: var(--f3d-fs-body-l); color: var(--f3d-ink-soft); }
.f3d-confirm__actions { display: flex; gap: var(--f3d-sp-5); align-items: center; margin-top: var(--f3d-sp-10); }

/* Shop archive header */
.f3d-shop {
  max-width: var(--f3d-content-max);
  margin: 0 auto;
  padding: var(--f3d-sp-16) var(--f3d-page-pad-x) var(--f3d-sp-20);
}
.f3d-shop__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--f3d-rule);
  padding-bottom: var(--f3d-sp-7);
  margin-bottom: var(--f3d-sp-10);
}
.f3d-shop__title { margin: 0; font-size: var(--f3d-fs-display-l); }
.f3d-shop__toolbar {
  display: flex;
  gap: var(--f3d-sp-5);
  align-items: center;
  margin-bottom: var(--f3d-sp-7);
  font-size: var(--f3d-fs-meta);
  color: var(--f3d-ink-muted);
}
.f3d-shop__empty {
  text-align: center;
  padding: var(--f3d-sp-20) 0;
}

/* Account dashboard (canvas: variations/account.jsx) — greeting hero
   on top, horizontal tabs row, full-width orders list (or empty
   state), 3-up hurtiglenker. Replaces the old .f3d-account-dash
   pattern. */
.f3d-account {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--f3d-page-pad-x) 96px;
}

.f3d-account__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  padding: 56px 0 28px;
  border-bottom: 1px solid var(--f3d-rule);
}
.f3d-account__eye {
  font-family: var(--f3d-font-mono);
  font-size: 11px;
  color: var(--f3d-ink-soft);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.f3d-account__h1 {
  font-family: var(--f3d-font-display);
  font-weight: 500;
  font-size: 36px;
  letter-spacing: -0.02em;
  margin: 0 0 8px 0;
  line-height: 1.05;
}
.f3d-account__lede {
  font-size: 14px;
  color: var(--f3d-ink-soft);
  margin: 0;
}
.f3d-account__head-cta {
  font-size: 14px;
  color: var(--f3d-ink-primary);
  text-decoration: none;
  white-space: nowrap;
}
.f3d-account__head-cta:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.f3d-account__tabs {
  display: flex;
  gap: 32px;
  padding: 16px 0 0;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--f3d-rule);
}
.f3d-account__tab {
  font-size: 14px;
  color: var(--f3d-ink-soft);
  text-decoration: none;
  padding: 8px 0 12px;
  cursor: pointer;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  transition: color var(--f3d-dur-fast) var(--f3d-easing);
}
.f3d-account__tab:hover { color: var(--f3d-ink-primary); }
.f3d-account__tab.is-active {
  color: var(--f3d-ink-primary);
  font-weight: 500;
  border-bottom-color: var(--f3d-ink-primary);
}

.f3d-account__section + .f3d-account__section { margin-top: 48px; }
.f3d-account__section .f3d-account__eye { margin-bottom: 18px; }

/* Orders list */
.f3d-account__order {
  display: grid;
  grid-template-columns: 180px 140px 100px 1fr 120px 24px;
  gap: 16px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--f3d-rule);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.f3d-account__order-id {
  font-family: var(--f3d-font-mono);
  font-size: 13px;
  color: var(--f3d-ink-primary);
}
.f3d-account__order-date {
  font-size: 13px;
  color: var(--f3d-ink-soft);
}
.f3d-account__order-status {
  font-family: var(--f3d-font-mono);
  font-size: 11px;
  padding: 4px 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  justify-self: start;
  border-radius: 3px;
}
.f3d-account__order-status--active { background: oklch(0.92 0.05 240); color: var(--f3d-accent); }
.f3d-account__order-status--done   { background: var(--f3d-bg-cream); color: var(--f3d-ink-soft); }
.f3d-account__order-items { font-size: 13px; color: var(--f3d-ink-soft); }
.f3d-account__order-total {
  font-family: var(--f3d-font-mono);
  font-size: 14px;
  font-weight: 500;
  text-align: right;
}
.f3d-account__order-arrow { color: var(--f3d-ink-faint); }

/* Empty state — full width, centered text, single pill CTA */
.f3d-account__empty {
  text-align: center;
  padding: 64px 0 48px;
  border: 1px dashed var(--f3d-rule);
  border-radius: var(--f3d-radius-card);
}
.f3d-account__empty-h {
  font-family: var(--f3d-font-display);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.015em;
  margin: 0 0 10px 0;
}
.f3d-account__empty-p {
  font-size: 14px;
  color: var(--f3d-ink-soft);
  margin: 0 auto 24px;
  max-width: 380px;
  line-height: 1.55;
}

/* Quick-link cards row */
.f3d-account__quick {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.f3d-account__quick-card {
  padding: 20px 22px;
  border: 1px solid var(--f3d-rule);
  border-radius: var(--f3d-radius-card);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color var(--f3d-dur-fast) var(--f3d-easing);
}
.f3d-account__quick-card:hover { border-color: var(--f3d-rule-strong); }
.f3d-account__quick-h {
  font-family: var(--f3d-font-display);
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 6px;
}
.f3d-account__quick-p {
  font-size: 13px;
  color: var(--f3d-ink-soft);
  margin: 0;
}

@media (max-width: 768px) {
  /* Lock the dashboard wrapper so the scrollable tabs row can't leak
     horizontal overflow to the page body (which would push the layout
     off-screen when a tab is tapped). */
  .f3d-account {
    padding: 0 var(--f3d-page-pad-x-sm) 64px;
    overflow-x: hidden;
    max-width: 100vw;
  }
  .f3d-account__head {
    flex-direction: column;
    align-items: flex-start;
    padding: 32px 0 20px;
  }
  .f3d-account__h1 { font-size: 28px; }
  .f3d-account__tabs {
    gap: 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    /* Constrain the scroll container to the viewport so its overflow
       can't bleed into ancestors. */
    max-width: 100%;
    /* Hide the native horizontal scrollbar on mobile (touch swipe still works). */
    scrollbar-width: none;
  }
  .f3d-account__tabs::-webkit-scrollbar { display: none; }
  .f3d-account__order {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "id     status"
      "date   total"
      "items  arrow";
    gap: 6px 16px;
  }
  .f3d-account__order-id     { grid-area: id; }
  .f3d-account__order-status { grid-area: status; justify-self: end; }
  .f3d-account__order-date   { grid-area: date; }
  .f3d-account__order-total  { grid-area: total; }
  .f3d-account__order-items  { grid-area: items; }
  .f3d-account__order-arrow  { grid-area: arrow; justify-self: end; }
  .f3d-account__quick        { grid-template-columns: 1fr; }
}

/* About / Om oss */
.f3d-timeline {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--f3d-sp-3) var(--f3d-sp-7);
  margin: var(--f3d-sp-7) 0 var(--f3d-sp-12);
}
.f3d-timeline dt {
  font-family: var(--f3d-font-mono);
  font-size: var(--f3d-fs-eye);
  color: var(--f3d-accent);
  letter-spacing: var(--f3d-ls-eye);
  padding-top: var(--f3d-sp-1);
}
.f3d-timeline dd {
  margin: 0;
  padding-bottom: var(--f3d-sp-4);
  border-bottom: 1px solid var(--f3d-rule-soft);
  color: var(--f3d-ink-body);
  line-height: var(--f3d-lh-relaxed);
}
.f3d-timeline dd:last-of-type { border-bottom: 0; }

.f3d-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--f3d-sp-7);
  margin: var(--f3d-sp-7) 0 var(--f3d-sp-12);
}
.f3d-value {
  padding: var(--f3d-sp-7);
  background: var(--f3d-bg-cream);
  border-radius: var(--f3d-radius-sm, 4px);
}
.f3d-value .f3d-eyebrow { color: var(--f3d-accent); margin-bottom: var(--f3d-sp-3); display: block; }
.f3d-value p { margin: 0; }

/* MakerWorld CTA panel (used on Om oss) */
.f3d-makerworld-cta {
  margin: var(--f3d-sp-12) 0 0;
  padding: var(--f3d-sp-12);
  background: var(--f3d-bg-cream);
  border-radius: var(--f3d-radius-sm, 4px);
  text-align: center;
}
.f3d-makerworld-cta h2 { font-size: var(--f3d-fs-h-xl); margin: 0 0 var(--f3d-sp-3); }
.f3d-makerworld-cta p { color: var(--f3d-ink-soft); max-width: 480px; margin: 0 auto var(--f3d-sp-7); }

/* Contact form (mu-plugin shortcode) */
.f3d-contact-form { display: flex; flex-direction: column; gap: var(--f3d-sp-5); margin-top: var(--f3d-sp-7); }
.f3d-contact-form__field { display: flex; flex-direction: column; gap: var(--f3d-sp-2); }
.f3d-contact-form__field label,
.f3d-contact-form__topics legend {
  display: block;
  margin-bottom: var(--f3d-sp-2);
}
.f3d-contact-form__topics { border: 0; padding: 0; margin: 0; }
.f3d-contact-form__radios {
  display: flex;
  flex-wrap: wrap;
  gap: var(--f3d-sp-3) var(--f3d-sp-5);
}
.f3d-contact-form__radio {
  display: inline-flex;
  align-items: center;
  gap: var(--f3d-sp-2);
  font-size: var(--f3d-fs-body);
  cursor: pointer;
}
.f3d-contact-form__bulk-note {
  background: var(--f3d-bg-cream);
  border-left: 2px solid var(--f3d-accent);
  padding: var(--f3d-sp-5) var(--f3d-sp-6);
  font-size: var(--f3d-fs-ui);
}
.f3d-contact-form__bulk-note strong { display: block; margin-bottom: var(--f3d-sp-2); }
.f3d-contact-form__bulk-note p { margin: 0; color: var(--f3d-ink-soft); }
.f3d-contact-form__privacy {
  font-size: var(--f3d-fs-meta);
  color: var(--f3d-ink-muted);
  margin: 0;
}
.f3d-contact-success {
  background: var(--f3d-bg-cream);
  border-left: 2px solid var(--f3d-success, #2a9d6f);
  padding: var(--f3d-sp-5) var(--f3d-sp-6);
  font-size: var(--f3d-fs-body-l);
}
.f3d-contact-success p { margin: 0; }
.f3d-contact-error {
  background: oklch(0.97 0.02 30);
  border-left: 2px solid var(--f3d-error, #d83a52);
  padding: var(--f3d-sp-4) var(--f3d-sp-6);
  font-size: var(--f3d-fs-body);
}
.f3d-contact-error p { margin: 0; color: var(--f3d-error, #d83a52); }

/* FAQ CTA card */
.f3d-faq__cta {
  margin-top: var(--f3d-sp-16);
  padding: var(--f3d-sp-10);
  background: var(--f3d-bg-cream);
  border-radius: var(--f3d-radius-sm, 4px);
  text-align: center;
}
.f3d-faq__cta h2 { margin: 0 0 var(--f3d-sp-3); font-size: var(--f3d-fs-h-l); }
.f3d-faq__cta p { color: var(--f3d-ink-soft); margin: 0 0 var(--f3d-sp-5); }

/* Search results / suggestions */
.f3d-empty__suggestions {
  list-style: none;
  padding: 0;
  margin: var(--f3d-sp-3) 0 var(--f3d-sp-10);
  display: flex;
  flex-direction: column;
  gap: var(--f3d-sp-2);
}
.f3d-search-results { list-style: none; padding: 0; margin: var(--f3d-sp-7) 0 0; }
.f3d-search-result { padding: var(--f3d-sp-5) 0; border-bottom: 1px solid var(--f3d-rule-soft); }
.f3d-search-result__link { display: block; text-decoration: none; }
.f3d-search-result h2 { margin: 0 0 var(--f3d-sp-2); font-size: var(--f3d-fs-h-m); }
.f3d-search-result p { margin: 0; color: var(--f3d-ink-soft); }

/* Last-updated footer on legal pages */
.f3d-prose__updated {
  margin-top: var(--f3d-sp-12);
  padding-top: var(--f3d-sp-5);
  border-top: 1px solid var(--f3d-rule-soft);
  font-family: var(--f3d-font-mono);
  font-size: var(--f3d-fs-meta);
  color: var(--f3d-ink-muted);
  letter-spacing: var(--f3d-ls-eye);
  text-transform: uppercase;
}

/* Responsive Phase 3/4 */
@media (max-width: 1024px) {
  .f3d-shop { padding-inline: var(--f3d-page-pad-x-md); }
  .f3d-confirm { padding-inline: var(--f3d-page-pad-x-md); }
  .f3d-values { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .f3d-shop { padding-inline: var(--f3d-page-pad-x-sm); }
  .f3d-confirm { padding-inline: var(--f3d-page-pad-x-sm); }
  .f3d-shop__header { flex-direction: column; gap: var(--f3d-sp-3); align-items: flex-start; }
  .f3d-account-dash__orders-head { flex-direction: column; gap: var(--f3d-sp-2); align-items: flex-start; }
  .f3d-confirm__actions { flex-direction: column; align-items: stretch; }
  .f3d-timeline { grid-template-columns: 1fr; gap: var(--f3d-sp-2); }
  .f3d-timeline dt { padding-top: 0; }
}

/* Account auth (login override) — two-col editorial layout.
 * Asymmetric 2:3 split (intro:form) so the intro reads as a narrow
 * text column hugging the left while the form column gets the wider
 * track it actually needs. align-items: start keeps both top-aligned
 * because the form is naturally taller than the intro and a vertical
 * centre would leave the intro floating mid-column. */
.f3d-account-auth {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: var(--f3d-sp-14);
  max-width: 980px;
  margin: 0 auto;
  padding: var(--f3d-sp-16) var(--f3d-page-pad-x);
  align-items: start;
}

.f3d-account-auth__intro h1 {
  font-size: var(--f3d-fs-display-l);
  font-weight: var(--f3d-fw-light);
  letter-spacing: var(--f3d-ls-display);
  margin: var(--f3d-sp-2) 0 var(--f3d-sp-3);
}
.f3d-account-auth__intro .f3d-lede { margin-bottom: var(--f3d-sp-10); max-width: 60ch; }

.f3d-account-auth__meta {
  display: flex;
  flex-direction: column;
  gap: var(--f3d-sp-2);
  margin-top: var(--f3d-sp-7);
  padding-top: var(--f3d-sp-7);
  border-top: 1px solid var(--f3d-rule-soft);
  font-family: var(--f3d-font-mono);
  font-size: var(--f3d-fs-eye);
}
.f3d-account-auth__meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--f3d-sp-6);
  padding: var(--f3d-sp-1) 0;
}
.f3d-account-auth__meta-row dt {
  color: var(--f3d-ink-faint);
  text-transform: uppercase;
  letter-spacing: var(--f3d-ls-loose);
  margin: 0;
}
.f3d-account-auth__meta-row dd {
  color: var(--f3d-ink-primary);
  margin: 0;
  text-align: right;
}
.f3d-account-auth__meta-row dd a {
  color: var(--f3d-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.f3d-account-auth__form-col { min-width: 0; }
.f3d-account-auth__vipps { margin-bottom: var(--f3d-sp-5); }

@media (max-width: 900px) {
  .f3d-account-auth {
    grid-template-columns: 1fr;
    gap: var(--f3d-sp-10);
    padding-inline: var(--f3d-page-pad-x-md);
  }
}
@media (max-width: 600px) {
  .f3d-account-auth { padding-inline: var(--f3d-page-pad-x-sm); }
}
.f3d-account-auth__divider {
  display: flex;
  align-items: center;
  margin: var(--f3d-sp-6) 0;
  font-family: var(--f3d-font-mono);
  font-size: var(--f3d-fs-eye);
  color: var(--f3d-ink-faint);
  text-transform: uppercase;
  letter-spacing: var(--f3d-ls-eye);
}
.f3d-account-auth__divider::before,
.f3d-account-auth__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--f3d-rule-soft);
}
.f3d-account-auth__divider span { padding-inline: var(--f3d-sp-3); }
.f3d-account-auth__footer {
  margin-top: var(--f3d-sp-8);
  padding-top: var(--f3d-sp-5);
  border-top: 1px solid var(--f3d-rule-soft);
  font-size: var(--f3d-fs-meta);
  color: var(--f3d-ink-soft);
}
.f3d-account-auth__footer a {
  color: var(--f3d-ink-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Cart — continue-shopping link below CTA */
.f3d-cart__continue {
  text-align: center;
  margin: var(--f3d-sp-3) 0 0;
  font-size: var(--f3d-fs-meta);
  color: var(--f3d-ink-soft);
}
.f3d-cart__continue a { color: inherit; text-decoration: none; }
.f3d-cart__continue a:hover { color: var(--f3d-ink-primary); }

/* Checkout / confirmation step indicator */
.f3d-steps {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0 0 var(--f3d-sp-10);
  gap: var(--f3d-sp-3);
  font-family: var(--f3d-font-mono);
  font-size: var(--f3d-fs-meta);
  flex-wrap: wrap;
}
.f3d-steps__item {
  display: inline-flex;
  align-items: baseline;
  gap: var(--f3d-sp-2);
  padding: var(--f3d-sp-2) var(--f3d-sp-4);
  border-radius: var(--f3d-radius-pill);
  border: 1px solid var(--f3d-rule-soft);
  color: var(--f3d-ink-faint);
}
.f3d-steps__item--done {
  color: var(--f3d-ink-soft);
  border-color: var(--f3d-rule-soft);
}
.f3d-steps__item--current {
  border-color: var(--f3d-bg-dark);
  color: var(--f3d-bg-dark);
  background: var(--f3d-bg-cream);
}
.f3d-steps__num {
  font-size: var(--f3d-fs-eye-s);
  letter-spacing: var(--f3d-ls-loose);
  text-transform: uppercase;
}
.f3d-steps__label {
  font-family: var(--f3d-font-body);
  font-size: var(--f3d-fs-ui);
  text-transform: none;
  letter-spacing: 0;
}

/* Om oss — restructured layout */
.f3d-about__header {
  padding-bottom: var(--f3d-sp-12);
  border-bottom: 1px solid var(--f3d-rule-soft);
  margin-bottom: var(--f3d-sp-12);
}
.f3d-about__header h1 { font-size: var(--f3d-fs-display-l); margin: var(--f3d-sp-2) 0 var(--f3d-sp-5); }
.f3d-about__section { margin-bottom: var(--f3d-sp-16); }
.f3d-about__section h2 {
  font-size: var(--f3d-fs-h-xl);
  margin: 0 0 var(--f3d-sp-7);
  max-width: 680px;
}

/* =====================================================================
 * Checkout page — bring WooCommerce in line with the design system.
 * Source: _design/incoming/delivery-2026-05-11-checkout-footer
 * Fixes May 2026 audit: tight top padding, default form chrome,
 * purple "Bekreft ordre" button, oversized "Sende til..." heading.
 * Active when the WC Checkout block is NOT in use (classic shortcode).
 * ===================================================================== */

/* Page rhythm — breathing room above the steps tracker */
body.woocommerce-checkout .site-content,
body.woocommerce-checkout main.site-main,
body.woocommerce-checkout #main {
  padding-top: 48px;
  padding-bottom: 80px;
  background: var(--f3d-bg-base);
}
body.woocommerce-checkout .f3d-steps,
body.woocommerce-checkout .woocommerce-breadcrumb {
  margin: 0 auto var(--f3d-sp-10);
  max-width: var(--f3d-content-max);
  padding-left: var(--f3d-page-pad-x);
  padding-right: var(--f3d-page-pad-x);
}

/* Constrain + lay out the checkout form (2-col grid) */
body.woocommerce-checkout form.checkout {
  max-width: var(--f3d-content-max);
  margin: 0 auto;
  padding: 0 var(--f3d-page-pad-x);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
  box-sizing: border-box;
}
body.woocommerce-checkout form.checkout #customer_details {
  display: contents;
}
body.woocommerce-checkout form.checkout #customer_details .col-1,
body.woocommerce-checkout form.checkout #customer_details .col-2 {
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.woocommerce-checkout form.checkout h3,
body.woocommerce-checkout form.checkout .woocommerce-billing-fields > h3,
body.woocommerce-checkout form.checkout .woocommerce-shipping-fields > h3,
body.woocommerce-checkout form.checkout .woocommerce-additional-fields > h3 {
  font-family: var(--f3d-font-display);
  font-size: 22px;
  font-weight: var(--f3d-fw-medium);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 0 24px;
  color: var(--f3d-ink-primary);
}
body.woocommerce-checkout form.checkout #order_review_heading,
body.woocommerce-checkout form.checkout h3#order_review_heading {
  grid-column: 1 / -1;
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--f3d-rule);
}

/* "Sende til en annen adresse?" — inline checkbox heading, not h3 */
body.woocommerce-checkout form.checkout #ship-to-different-address,
body.woocommerce-checkout form.checkout h3#ship-to-different-address {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: var(--f3d-fw-medium);
  letter-spacing: 0;
  color: var(--f3d-ink-body);
  margin: 0 0 16px;
  font-family: var(--f3d-font-body);
}
body.woocommerce-checkout form.checkout #ship-to-different-address label {
  font-weight: var(--f3d-fw-medium);
  font-size: 15px;
  cursor: pointer;
  font-family: var(--f3d-font-body);
}
body.woocommerce-checkout form.checkout #ship-to-different-address input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--f3d-ink-primary);
}

/* Form fields — labels, inputs, asterisks */
body.woocommerce-checkout .form-row {
  margin: 0 0 16px;
  padding: 0;
}
body.woocommerce-checkout .form-row label {
  display: block;
  font-size: 12px;
  font-weight: var(--f3d-fw-medium);
  letter-spacing: 0.02em;
  color: var(--f3d-ink-body);
  margin: 0 0 6px;
  font-family: var(--f3d-font-body);
  text-transform: none;
}
body.woocommerce-checkout .form-row .required,
body.woocommerce-checkout .form-row abbr.required {
  color: var(--f3d-ink-faint);
  text-decoration: none;
  border: none;
  font-weight: var(--f3d-fw-regular);
  margin-left: 2px;
}
body.woocommerce-checkout .form-row .optional {
  color: var(--f3d-ink-faint);
  font-weight: var(--f3d-fw-regular);
  font-size: 12px;
  margin-left: 4px;
}
body.woocommerce-checkout .form-row input.input-text,
body.woocommerce-checkout .form-row textarea,
body.woocommerce-checkout .form-row select,
body.woocommerce-checkout .select2-container--default .select2-selection--single {
  width: 100%;
  box-sizing: border-box;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--f3d-rule-strong);
  border-radius: 6px;
  background: #fff;
  font-family: var(--f3d-font-body);
  font-size: 15px;
  color: var(--f3d-ink-primary);
  box-shadow: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
body.woocommerce-checkout .form-row textarea {
  height: auto;
  min-height: 80px;
  padding: 12px 14px;
  line-height: 1.5;
  resize: vertical;
}
body.woocommerce-checkout .form-row input.input-text:focus,
body.woocommerce-checkout .form-row textarea:focus,
body.woocommerce-checkout .form-row select:focus {
  outline: none;
  border-color: var(--f3d-ink-primary);
  box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.08);
}
body.woocommerce-checkout .form-row input::placeholder,
body.woocommerce-checkout .form-row textarea::placeholder {
  color: var(--f3d-ink-faint);
  opacity: 1;
}
body.woocommerce-checkout .form-row #billing_country_field strong,
body.woocommerce-checkout .form-row.address-field strong {
  font-weight: var(--f3d-fw-medium);
  color: var(--f3d-ink-primary);
  font-size: 15px;
  display: inline-block;
  padding: 8px 0;
}

/* Coupon / "Har du en rabattkode?" bar */
body.woocommerce-checkout .woocommerce-form-coupon-toggle,
body.woocommerce-checkout .woocommerce-info {
  background: var(--f3d-bg-cream);
  border: 1px solid var(--f3d-rule);
  border-radius: 8px;
  color: var(--f3d-ink-body);
  padding: 14px 18px;
  margin: 0 auto 32px;
  max-width: var(--f3d-content-max);
  box-sizing: border-box;
  font-size: 14px;
  box-shadow: none;
}
body.woocommerce-checkout .woocommerce-info::before {
  display: none;
}
body.woocommerce-checkout .woocommerce-info a,
body.woocommerce-checkout .showcoupon {
  color: var(--f3d-ink-primary);
  font-weight: var(--f3d-fw-medium);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Order review table */
body.woocommerce-checkout #order_review {
  grid-column: 1 / -1;
  background: #fff;
  border: 1px solid var(--f3d-rule);
  border-radius: 12px;
  padding: 24px 28px;
  margin-top: 8px;
}
body.woocommerce-checkout table.shop_table {
  width: 100%;
  border-collapse: collapse;
  border: none;
  border-radius: 0;
  margin: 0 0 16px;
  background: none;
}
body.woocommerce-checkout table.shop_table thead th,
body.woocommerce-checkout table.shop_table tbody th,
body.woocommerce-checkout table.shop_table tfoot th {
  font-family: var(--f3d-font-mono);
  font-size: 11px;
  letter-spacing: var(--f3d-ls-loose, 0.08em);
  text-transform: uppercase;
  color: var(--f3d-ink-faint);
  font-weight: var(--f3d-fw-medium);
  padding: 12px 0;
  border-bottom: 1px solid var(--f3d-rule);
  background: none;
  text-align: left;
}
body.woocommerce-checkout table.shop_table tbody td,
body.woocommerce-checkout table.shop_table tfoot td {
  padding: 14px 0;
  border-bottom: 1px solid var(--f3d-rule);
  font-size: 15px;
  color: var(--f3d-ink-primary);
  background: none;
}
body.woocommerce-checkout table.shop_table .product-name a {
  color: var(--f3d-ink-primary);
  text-decoration: none;
  font-weight: var(--f3d-fw-medium);
}
body.woocommerce-checkout table.shop_table .product-total,
body.woocommerce-checkout table.shop_table .product-subtotal,
body.woocommerce-checkout table.shop_table td:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--f3d-ink-primary);
}
body.woocommerce-checkout table.shop_table .product-total .amount,
body.woocommerce-checkout table.shop_table .amount {
  color: var(--f3d-ink-primary);
  font-weight: var(--f3d-fw-medium);
}
body.woocommerce-checkout table.shop_table tfoot tr.order-total td {
  font-size: 18px;
  font-weight: var(--f3d-fw-medium);
  padding-top: 18px;
  border-top: 1px solid var(--f3d-rule);
  border-bottom: none;
}
body.woocommerce-checkout table.shop_table tfoot tr.order-total th {
  border-bottom: none;
  border-top: 1px solid var(--f3d-rule);
  padding-top: 18px;
  font-size: 13px;
  color: var(--f3d-ink-primary);
}

/* Place-order block — payment notice, privacy, CTA */
body.woocommerce-checkout #payment {
  background: none;
  border-radius: 0;
  padding: 16px 0 0;
  margin-top: 8px;
}
body.woocommerce-checkout #payment .woocommerce-notice,
body.woocommerce-checkout #payment ul.wc_payment_methods + .form-row,
body.woocommerce-checkout #payment .woocommerce-info {
  margin: 0 0 20px;
  max-width: none;
}
body.woocommerce-checkout .woocommerce-privacy-policy-text,
body.woocommerce-checkout #payment p:not(.form-row) {
  font-size: 13px;
  color: var(--f3d-ink-soft);
  line-height: 1.5;
  margin: 16px 0;
}
body.woocommerce-checkout .woocommerce-privacy-policy-text a {
  color: var(--f3d-ink-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* "Bekreft ordre" CTA — dark-ink pill, right-aligned */
body.woocommerce-checkout #place_order,
body.woocommerce-checkout button#place_order,
body.woocommerce-checkout .woocommerce-checkout-payment .button,
body.woocommerce-checkout .form-row.place-order .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--f3d-ink-primary);
  color: var(--f3d-ink-on-dark, #fff);
  border: none;
  border-radius: 999px;
  padding: 14px 32px;
  height: auto;
  min-height: 48px;
  font-family: var(--f3d-font-body);
  font-size: 15px;
  font-weight: var(--f3d-fw-medium);
  letter-spacing: 0.005em;
  text-transform: none;
  text-shadow: none;
  box-shadow: none;
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease;
  float: right;
  margin-top: 8px;
}
body.woocommerce-checkout #place_order:hover,
body.woocommerce-checkout button#place_order:hover {
  background: #000;
  color: #fff;
}
body.woocommerce-checkout .form-row.place-order {
  text-align: right;
  padding: 0;
  margin: 24px 0 0;
  clear: both;
}

@media (max-width: 900px) {
  body.woocommerce-checkout form.checkout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  body.woocommerce-checkout #place_order {
    float: none;
    width: 100%;
  }
}