/*
Theme Name: ABC Olier
Theme URI: https://abc-olier.com
Author: ABC Olier
Description: Botanisk tema til salg af æteriske olier. Bygget til WooCommerce. Hver olie får sin egen karakterfarve som visuel signatur mod en kølig papir- og skovgrøn palet.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
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: abc-olier
Tags: e-commerce, custom-colors, custom-menu, translation-ready
WC requires at least: 8.0
*/

/* ==========================================================================
   Designsystem
   ========================================================================== */

:root {
  --papir: #eef1ea;
  --papir2: #e6eadf;
  --kort: #f7f8f3;
  --blaek: #18241e;
  --blaek-bloed: #566159;
  --linje: #d4d9cc;
  --skov: #244c3c;
  --skov-moerk: #1a3a2d;

  --skrift-display: "Fraunces", Georgia, serif;
  --skrift-brod: "Inter", system-ui, -apple-system, sans-serif;
  --skrift-mono: "Space Mono", ui-monospace, monospace;

  --shell: 1120px;
  --radius: 16px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papir);
  color: var(--blaek);
  font-family: var(--skrift-brod);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.woocommerce-loop-product__title,
.product_title {
  font-family: var(--skrift-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  line-height: 1.15;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--skov); }
img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--skov); color: var(--papir); }

:focus-visible {
  outline: 2px solid var(--skov);
  outline-offset: 2px;
  border-radius: 4px;
}

.skjult-visuelt {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.spring-til:focus {
  position: fixed; top: 12px; left: 12px; z-index: 999;
  width: auto; height: auto; clip: auto;
  background: var(--skov); color: #fff;
  padding: 10px 20px; border-radius: 999px;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 20px;
}

.oejenbryn {
  font-family: var(--skrift-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--skov);
  margin: 0 0 16px;
}

/* ==========================================================================
   Knapper — også WooCommerce's egne
   ========================================================================== */

.knap,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--skov);
  border: 1px solid var(--skov);
  color: #fff;
  font-family: var(--skrift-brod);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  padding: 13px 26px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease;
  text-decoration: none;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.knap:hover {
  background: var(--skov-moerk);
  border-color: var(--skov-moerk);
  color: #fff;
}

.knap-spoegelse,
.woocommerce a.button.wc-backward {
  background: transparent;
  border-color: var(--linje);
  color: var(--blaek);
}
.knap-spoegelse:hover,
.woocommerce a.button.wc-backward:hover {
  background: var(--papir2);
  border-color: var(--linje);
  color: var(--blaek);
}

.woocommerce button.button:disabled,
.woocommerce button.button.alt:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ==========================================================================
   Header
   ========================================================================== */

.side-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--papir) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linje);
}
.side-header__indhold {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 20px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--skrift-display);
  font-size: 21px;
  font-weight: 600;
}
.logo em { font-style: italic; color: var(--skov); }

.hovedmenu { margin-left: auto; }
.hovedmenu ul {
  display: flex;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14.5px;
}
.hovedmenu a { color: var(--blaek-bloed); }
.hovedmenu a:hover { color: var(--blaek); }
.hovedmenu .current-menu-item > a { color: var(--blaek); }

.kurv-knap {
  position: relative;
  border: 1px solid var(--blaek);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.15s ease;
}
.kurv-knap:hover { background: var(--blaek); color: var(--papir); }
.kurv-knap__tal {
  position: absolute;
  top: -7px; right: -7px;
  min-width: 19px; height: 19px;
  display: grid; place-items: center;
  padding: 0 5px;
  background: var(--skov);
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-family: var(--skrift-brod);
}

@media (max-width: 640px) {
  .hovedmenu { display: none; }
  .kurv-knap { margin-left: auto; }
}

/* ==========================================================================
   Forside
   ========================================================================== */

.hero {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
  padding: 72px 20px 56px;
  max-width: var(--shell);
  margin: 0 auto;
}
.hero h1 {
  font-size: clamp(34px, 6vw, 58px);
  line-height: 1.02;
  max-width: 12ch;
}
.hero__tekst > p {
  font-size: 17px;
  color: var(--blaek-bloed);
  max-width: 46ch;
  margin: 22px 0 28px;
}
.hero__handlinger { display: flex; gap: 12px; flex-wrap: wrap; }

.proevekasse {
  background: var(--kort);
  border: 1px solid var(--linje);
  border-radius: 18px;
  padding: 16px;
  list-style: none;
  margin: 0;
}
.proevekasse li { border-bottom: 1px solid var(--linje); }
.proevekasse li:last-child { border-bottom: 0; }
.proevekasse a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 8px;
}
.draabe {
  width: 40px; height: 40px;
  border-radius: 50%;
  flex: none;
}
.proevekasse__navn { font-family: var(--skrift-display); font-size: 17px; }
.proevekasse__pris {
  margin-left: auto;
  font-family: var(--skrift-mono);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; gap: 34px; padding: 46px 20px 40px; }
}

.principper {
  background: var(--papir2);
  border-top: 1px solid var(--linje);
  border-bottom: 1px solid var(--linje);
  margin-top: 72px;
}
.principper__gitter {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.principper__nr { font-family: var(--skrift-mono); font-size: 13px; color: var(--skov); }
.principper h3 { font-size: 19px; margin: 10px 0 8px; }
.principper p { font-size: 14.5px; color: var(--blaek-bloed); margin: 0; }
@media (max-width: 760px) { .principper__gitter { grid-template-columns: 1fr; gap: 22px; } }

/* ==========================================================================
   Produktoversigt (WooCommerce loop)
   ========================================================================== */

.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

.woocommerce ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
  background: var(--kort);
  border: 1px solid var(--linje);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  text-align: left;
  padding: 0;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px -20px rgba(24, 36, 30, 0.55);
}

/* Karakterfarve som stribe i toppen */
.produkt-stribe {
  display: block;
  height: 4px;
  width: 100%;
}

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  display: block;
  padding: 0;
}
.woocommerce ul.products li.product img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
  margin: 0;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 20px;
  padding: 16px 18px 0;
  margin: 0 0 4px;
}
.woocommerce ul.products li.product .price {
  display: block;
  padding: 0 18px;
  font-family: var(--skrift-mono);
  font-size: 15px;
  color: var(--blaek);
  font-variant-numeric: tabular-nums;
  margin: 6px 0 0;
}
.woocommerce ul.products li.product .price del { opacity: 0.5; margin-right: 6px; }
.woocommerce ul.products li.product .price ins { text-decoration: none; font-weight: 600; }

.woocommerce ul.products li.product .button {
  margin: 14px 18px 18px;
  align-self: flex-start;
  padding: 10px 18px;
  font-size: 13.5px;
}
.woocommerce ul.products li.product .added_to_cart { display: none; }

.woocommerce span.onsale {
  background: var(--skov);
  color: #fff;
  font-family: var(--skrift-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  border-radius: 999px;
  padding: 5px 12px;
  min-height: 0;
  min-width: 0;
  line-height: 1.2;
  top: 12px;
  right: 12px;
  left: auto;
  margin: 0;
}

@media (max-width: 900px) { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .woocommerce ul.products { grid-template-columns: 1fr; } }

/* Pladsholder når fotoet mangler */
.foto-paa-vej {
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--kort);
}
.foto-paa-vej__tekst {
  font-family: var(--skrift-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blaek-bloed);
}
.single-product .foto-paa-vej { aspect-ratio: 1 / 1; }

/* Sortering og resultattal */
.woocommerce .woocommerce-result-count {
  font-family: var(--skrift-mono);
  font-size: 11px;
  color: var(--blaek-bloed);
}
.woocommerce .woocommerce-ordering select {
  font-family: var(--skrift-brod);
  font-size: 13.5px;
  border: 1px solid var(--linje);
  border-radius: 999px;
  padding: 8px 14px;
  background: transparent;
  color: var(--blaek);
}

/* ==========================================================================
   Enkelt produkt
   ========================================================================== */

.single-product div.product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.single-product div.product .woocommerce-product-gallery { width: 100% !important; float: none !important; margin: 0 !important; }
.single-product div.product .summary { width: 100% !important; float: none !important; margin: 0 !important; }
.single-product div.product .woocommerce-tabs,
.single-product div.product .related,
.single-product div.product .up-sells { grid-column: 1 / -1; }

.single-product .product_title { font-size: clamp(28px, 4vw, 40px); margin-bottom: 8px; }
.single-product .woocommerce-product-gallery img { border-radius: var(--radius); }

.single-product div.product p.price,
.single-product div.product span.price {
  font-family: var(--skrift-mono);
  font-size: 24px;
  color: var(--blaek);
  font-variant-numeric: tabular-nums;
  margin: 18px 0;
}

.single-product .woocommerce-product-details__short-description {
  color: var(--blaek-bloed);
  font-size: 15.5px;
}

.single-product form.cart { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 24px 0; }
.single-product .quantity input.qty {
  width: 68px;
  padding: 12px 10px;
  border: 1px solid var(--linje);
  border-radius: 999px;
  text-align: center;
  font-family: var(--skrift-brod);
  background: transparent;
  color: var(--blaek);
}

.produkt-signatur {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--skrift-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--skov);
}
.produkt-signatur .draabe { width: 18px; height: 18px; }

.woocommerce div.product .product_meta {
  font-family: var(--skrift-mono);
  font-size: 11px;
  color: var(--blaek-bloed);
  border-top: 1px solid var(--linje);
  padding-top: 18px;
  margin-top: 24px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0;
  margin: 0 0 24px;
  border-bottom: 1px solid var(--linje);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0 22px 0 0;
  padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--skrift-brod);
  font-weight: 500;
  font-size: 14.5px;
  color: var(--blaek-bloed);
  padding: 12px 0;
  display: block;
  border-bottom: 2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--blaek);
  border-bottom-color: var(--skov);
}

.woocommerce div.product .woocommerce-tabs .panel h2 { font-size: 21px; }
.woocommerce div.product .woocommerce-tabs .panel p,
.woocommerce div.product .woocommerce-tabs .panel li {
  color: var(--blaek-bloed);
  font-size: 15px;
  line-height: 1.7;
}

.related > h2, .up-sells > h2, .cross-sells > h2 { font-size: 24px; margin-bottom: 20px; }

@media (max-width: 900px) {
  .single-product div.product { grid-template-columns: 1fr; gap: 28px; }
}

/* ==========================================================================
   Kurv, kasse og fri fragt
   ========================================================================== */

.fri-fragt {
  background: var(--kort);
  border: 1px solid var(--linje);
  border-radius: 14px;
  padding: 16px 18px;
  margin: 0 0 28px;
}
.fri-fragt p { margin: 0 0 10px; font-size: 14px; color: var(--blaek-bloed); }
.fri-fragt strong { color: var(--blaek); }
.fri-fragt__bane {
  height: 6px;
  background: var(--papir2);
  border-radius: 999px;
  overflow: hidden;
}
.fri-fragt__fyld {
  display: block;
  height: 100%;
  background: var(--skov);
  border-radius: 999px;
  transition: width 0.4s ease;
}

.woocommerce table.shop_table {
  border: 1px solid var(--linje);
  border-radius: var(--radius);
  border-collapse: separate;
  border-spacing: 0;
  background: var(--kort);
}
.woocommerce table.shop_table th {
  font-family: var(--skrift-brod);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--blaek-bloed);
  border-bottom: 1px solid var(--linje);
}
.woocommerce table.shop_table td { border-top: 1px solid var(--linje); }
.woocommerce table.shop_table .amount { font-family: var(--skrift-mono); font-variant-numeric: tabular-nums; }
.woocommerce-cart table.cart img { width: 64px; border-radius: 10px; }
.woocommerce a.remove {
  color: var(--blaek-bloed) !important;
  font-weight: 400;
}
.woocommerce a.remove:hover { background: transparent; color: var(--blaek) !important; }

.woocommerce .cart-collaterals .cart_totals > h2,
.woocommerce-checkout h3 { font-size: 20px; }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.select2-container .select2-selection--single {
  border: 1px solid var(--linje);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: var(--skrift-brod);
  font-size: 15px;
  background: var(--kort);
  color: var(--blaek);
  height: auto;
}
.woocommerce form .form-row label { font-size: 13.5px; color: var(--blaek-bloed); }

.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
  border-top: 0;
  border-left: 3px solid var(--skov);
  background: var(--kort);
  border-radius: 10px;
  font-size: 14.5px;
  color: var(--blaek);
}
.woocommerce-info::before,
.woocommerce-message::before { color: var(--skov); }
.woocommerce-error { border-left-color: #a6453a; }
.woocommerce-error::before { color: #a6453a; }

#payment ul.payment_methods {
  border-bottom: 1px solid var(--linje);
  background: var(--kort);
  border-radius: 12px 12px 0 0;
}
#payment div.form-row { background: var(--kort); border-radius: 0 0 12px 12px; }

/* ==========================================================================
   Sider og indhold
   ========================================================================== */

.side-indhold { padding: 48px 0 24px; }
.side-indhold--smal { max-width: 68ch; }
.side-indhold h1 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 24px; }
.side-indhold h2 { font-size: 21px; margin: 44px 0 12px; }
.side-indhold h3 { font-size: 17px; margin: 28px 0 8px; }
.side-indhold p,
.side-indhold li { font-size: 15px; line-height: 1.7; color: var(--blaek-bloed); }
.side-indhold ul, .side-indhold ol { padding-left: 20px; }
.side-indhold li { margin-bottom: 8px; }
.side-indhold strong { color: var(--blaek); font-weight: 500; }
.side-indhold a { color: var(--skov); text-decoration: underline; text-underline-offset: 2px; }
.side-indhold dt { color: var(--blaek); font-weight: 500; margin-top: 12px; }
.side-indhold dd { margin: 0 0 0 0; color: var(--blaek-bloed); font-size: 15px; }
.side-indhold .boks {
  background: var(--kort);
  border: 1px solid var(--linje);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 24px 0;
  font-size: 14px;
}

.brodkrumme {
  font-family: var(--skrift-mono);
  font-size: 11px;
  color: var(--blaek-bloed);
  padding: 24px 0 0;
}
.brodkrumme a:hover { color: var(--blaek); }

/* ==========================================================================
   Footer
   ========================================================================== */

.side-footer {
  margin-top: 96px;
  background: var(--papir2);
  border-top: 1px solid var(--linje);
}
.side-footer__gitter {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding: 48px 0;
}
.side-footer h2 {
  font-family: var(--skrift-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--skov);
  margin-bottom: 12px;
}
.side-footer ul { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.side-footer li { margin-bottom: 6px; }
.side-footer a { color: var(--blaek-bloed); }
.side-footer a:hover { color: var(--blaek); }
.side-footer p { font-size: 14px; color: var(--blaek-bloed); margin: 0 0 6px; }
.side-footer__bund {
  border-top: 1px solid var(--linje);
  padding: 20px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
  color: var(--blaek-bloed);
}
.side-footer__bund .mono { font-family: var(--skrift-mono); }
@media (max-width: 780px) {
  .side-footer__gitter { grid-template-columns: repeat(2, 1fr); gap: 26px; }
}

/* ==========================================================================
   404 og søgning
   ========================================================================== */

.tom-tilstand {
  text-align: center;
  padding: 80px 20px;
}
.tom-tilstand h1 { font-size: 32px; }
.tom-tilstand p { color: var(--blaek-bloed); max-width: 44ch; margin: 12px auto 24px; }

/* ==========================================================================
   Respekter brugerens bevægelsesindstillinger
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}