/* WooCommerce — on-brand styling with theme tokens. Built to assets/css/woo.build.css,
   enqueued only on WC pages. Tokens come from main.build.css (:root), loaded globally. */

.sj-woo { min-height: 50vh; }
.sj-woo__inner { font-family: var(--font-body); color: var(--text-body); }

/* Page + product titles */
.woocommerce-products-header__title,
.woocommerce div.product .product_title,
.woocommerce-account .woocommerce h2,
.sj-woo h1, .sj-woo h2 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.woocommerce-products-header__title { font-size: clamp(2rem, 3.4vw, 3rem); margin-bottom: 0.5em; }
.woocommerce div.product .product_title { font-size: clamp(1.8rem, 2.8vw, 2.6rem); }

/* --- Buttons --- */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce .single_add_to_cart_button,
.woocommerce #place_order,
.woocommerce .checkout-button,
.woocommerce-account button.woocommerce-button,
.wc-block-components-button {
  background: var(--terracotta);
  color: #fff;
  border: 1px solid var(--terracotta);
  border-radius: 999px;
  padding: 15px 32px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background-color 240ms, border-color 240ms, color 240ms;
  text-decoration: none;
  display: inline-block;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce #place_order:hover,
.woocommerce .checkout-button:hover,
.wc-block-components-button:hover {
  background: var(--terracotta-hover);
  border-color: var(--terracotta-hover);
  color: #fff;
}

/* Secondary (non-alt) buttons: petrol outline */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  background: transparent;
  color: var(--petrol);
  border: 1px solid var(--petrol);
  border-radius: 999px;
  padding: 14px 28px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.98rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 240ms, color 240ms;
  text-decoration: none;
  display: inline-block;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background: var(--petrol);
  color: #fff;
}
.woocommerce .button.loading::after { color: inherit; }

/* --- Prices --- */
.woocommerce .price,
.woocommerce div.product p.price,
.woocommerce ul.products li.product .price {
  color: var(--ink);
  font-weight: 600;
}
.woocommerce .price del { color: var(--text-faint); font-weight: 400; }
.woocommerce .price ins { text-decoration: none; }

/* --- Shop grid --- */
.woocommerce ul.products { gap: clamp(24px, 2.6vw, 40px); display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; }
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; text-align: left; }
.woocommerce ul.products li.product a img { border-radius: 12px; margin-bottom: 14px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--ink);
  padding: 0;
}
.woocommerce ul.products li.product .onsale {
  background: var(--terracotta);
  color: #fff;
  border-radius: 999px;
  min-height: 0;
  min-width: 0;
  padding: 5px 12px;
  font-family: var(--font-body);
  font-weight: 600;
  line-height: 1;
}
.woocommerce span.onsale {
  background: var(--terracotta);
  color: #fff;
  border-radius: 999px;
  padding: 6px 13px;
  line-height: 1;
  min-height: 0;
}

@media (max-width: 1000px) { .woocommerce ul.products { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .woocommerce ul.products { grid-template-columns: 1fr; } }

/* --- Single product --- */
.woocommerce div.product div.images img { border-radius: 14px; }
.woocommerce div.product .woocommerce-product-rating { margin-bottom: 12px; }
.woocommerce .woocommerce-tabs ul.tabs { padding: 0; }
.woocommerce .woocommerce-tabs ul.tabs::before { border-color: var(--line); }
.woocommerce .woocommerce-tabs ul.tabs li {
  background: var(--sand-light);
  border-color: var(--line);
  border-radius: 8px 8px 0 0;
}
.woocommerce .woocommerce-tabs ul.tabs li.active { background: #fff; }
.woocommerce .woocommerce-tabs ul.tabs li a { color: var(--text-body); font-weight: 600; }
.woocommerce div.product .quantity .qty {
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 12px 8px;
  font-family: var(--font-body);
}

/* --- Forms (checkout, account, address) --- */
.woocommerce form .form-row label,
.woocommerce-account .woocommerce label { font-family: var(--font-body); font-weight: 600; color: var(--text-muted); font-size: 0.85rem; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-account form input.input-text,
.woocommerce #order_review input.input-text,
.select2-container .select2-selection--single,
.woocommerce form .form-row select,
.woocommerce .select2-selection {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-strong) !important;
  border-radius: 8px;
  padding: 13px 15px;
  line-height: 1.4;
  transition: border-color 200ms;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce-account form input.input-text:focus { border-color: var(--terracotta); outline: none; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 1.4; color: var(--ink); padding: 0; }
.select2-container--default .select2-selection--single .select2-selection__arrow { top: 50%; transform: translateY(-50%); right: 10px; }
.select2-dropdown { border-color: var(--line-strong); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--terracotta); }

/* --- Tables (cart, order review, account orders) --- */
.woocommerce table.shop_table {
  border: 1px solid var(--line);
  border-radius: 12px;
  border-collapse: separate;
  overflow: hidden;
}
.woocommerce table.shop_table th { font-family: var(--font-body); color: var(--ink); }
.woocommerce table.shop_table td,
.woocommerce table.shop_table th { border-top-color: var(--line); }
.woocommerce-cart table.cart td.actions .coupon .input-text { border: 1px solid var(--line-strong); border-radius: 8px; }
.woocommerce .cart_totals h2,
.woocommerce #order_review_heading { font-family: var(--font-display); font-weight: 700; color: var(--ink); }

/* --- Notices — white card + colored left-accent bar + branded icon.
   White so they pop on any band (sand / sand-light); terracotta for errors,
   petrol for success/info. --- */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error,
.woocommerce-account .woocommerce-notices-wrapper > * {
  border-radius: 14px;
  border: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.55;
  padding: 18px 26px 18px 54px;
}
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-error::before { color: var(--petrol); left: 22px; }
.woocommerce .woocommerce-error::before { color: var(--terracotta); }
/* Inline action button (e.g. "Se kurv") — clean outlined pill, not the default. */
.woocommerce .woocommerce-message .button,
.woocommerce .woocommerce-info .button,
.woocommerce .woocommerce-error .button {
  background: transparent;
  border: 1.5px solid var(--petrol);
  color: var(--petrol);
  border-radius: 999px;
  padding: 9px 22px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1;
  transition: background-color 200ms, color 200ms;
}
.woocommerce .woocommerce-message .button:hover,
.woocommerce .woocommerce-info .button:hover,
.woocommerce .woocommerce-error .button:hover { background: var(--petrol); color: #fff; }

/* ============ My Account ============ */

/* Dashboard layout — my-account.php wraps nav + content in .sj-account. */
.sj-account {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}

/* Sidebar nav — icon rows, sand hover, petrol active pill.
   (WC's .woocommerce-account .woocommerce-MyAccount-navigation{width:30%;float:left}
   would otherwise shrink it to ~30% of the cell — override with equal specificity.) */
.sj-account .woocommerce-MyAccount-navigation { float: none !important; width: auto !important; position: sticky; top: 100px; }
.sj-account .woocommerce-MyAccount-content { float: none !important; width: auto !important; }
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.woocommerce-MyAccount-navigation li { margin: 0; border: 0; }
.woocommerce-MyAccount-navigation li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 11px;
  color: var(--text-body);
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 500;
  transition: background-color 180ms, color 180ms;
}
.woocommerce-MyAccount-navigation li a svg { width: 19px; height: 19px; flex-shrink: 0; opacity: .7; }
.woocommerce-MyAccount-navigation li a:hover { background: var(--sand-light); color: var(--ink); }
.woocommerce-MyAccount-navigation li.is-active a { background: var(--petrol); color: #fff; }
.woocommerce-MyAccount-navigation li.is-active a svg { opacity: 1; }

.woocommerce-MyAccount-content { float: none; width: auto; }
.woocommerce-MyAccount-content a:not(.button):not(.sj-dash__tile) { color: var(--terracotta); }

/* Dashboard greeting + quick-action tiles. */
.sj-dash__head { margin-bottom: 30px; }
.sj-dash__hello { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 3vw, 2.5rem); color: var(--ink); margin: 8px 0 12px; line-height: 1.1; }
.sj-dash__intro { color: var(--text-muted); max-width: 52ch; line-height: 1.6; margin: 0; font-size: 1.02rem; }
.sj-dash__tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 16px; }
.sj-dash__tile {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border-radius: 16px;
  background: #fff;
  text-decoration: none;
  transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.sj-dash__tile:hover { transform: translateY(-3px); }
.sj-dash__ic {
  width: 46px; height: 46px;
  border-radius: 13px;
  background: var(--sand-light);
  color: var(--terracotta);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  transition: background-color 220ms, color 220ms;
}
.sj-dash__ic svg { width: 23px; height: 23px; }
.sj-dash__tile:hover .sj-dash__ic { background: var(--terracotta); color: #fff; }
.sj-dash__t { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--ink); margin-bottom: 5px; }
.sj-dash__d { font-size: 0.92rem; color: var(--text-muted); line-height: 1.5; }
.sj-dash__tile--muted .sj-dash__ic { background: rgba(35, 77, 88, .08); color: var(--petrol); }
.sj-dash__tile--muted:hover .sj-dash__ic { background: var(--petrol); color: #fff; }

/* Login / register — centered welcome header + two self-contained white cards. */
.sj-login-head { text-align: center; max-width: 620px; margin: 0 auto clamp(28px, 4vw, 44px); }
.sj-login-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 3.4vw, 2.8rem); color: var(--ink); margin: 10px 0 12px; }
.sj-login-sub { color: var(--text-muted); font-size: 1.05rem; margin: 0; line-height: 1.55; }
.woocommerce-account:not(.logged-in) .woocommerce { max-width: 980px; margin-inline: auto; }
.woocommerce-account .u-columns.col2-set {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 32px);
  align-items: start;
}
/* WC's clearfix ::before/::after become phantom grid items and stagger the
   columns diagonally — remove them so col-1 / col-2 sit side by side. */
.woocommerce-account .u-columns.col2-set::before,
.woocommerce-account .u-columns.col2-set::after { content: none !important; display: none !important; }
.woocommerce-account .u-columns .col-1,
.woocommerce-account .u-columns .col-2 {
  width: auto;
  float: none;
  background: #fff;
  border-radius: 18px;
  padding: clamp(26px, 3vw, 40px);
}
.woocommerce-account .u-columns h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.35rem, 2vw, 1.6rem);
  margin: 0 0 22px;
  color: var(--ink);
}
/* The .col card already frames the form — reset WC's own form box. */
.woocommerce form.login,
.woocommerce form.register {
  border: none;
  padding: 0;
  margin: 0;
  border-radius: 0;
}
/* "Husk mig" vertically centered in line with the Log ind button. */
.woocommerce-account form.login .form-row:has(.woocommerce-form-login__submit) {
  display: flex;
  align-items: center;
  gap: 0;
}
.woocommerce-account form.login .woocommerce-form-login__submit { order: -1; }
.woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme { margin-bottom: 0; }

/* Account form fields + buttons */
.woocommerce-account form .form-row { margin-bottom: 16px; }
.woocommerce-account form label { display: block; font-size: 0.9rem; color: var(--text-muted); margin-bottom: 6px; }
.woocommerce-account input.input-text,
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="tel"],
.woocommerce-account input[type="password"] {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 12px 14px;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-body);
  box-sizing: border-box;
}
.woocommerce-account input.input-text:focus {
  border-color: var(--terracotta);
  box-shadow: 0 0 0 1px var(--terracotta);
  outline: none;
}
.woocommerce-account button.button,
.woocommerce-account .woocommerce-form-login__submit,
.woocommerce-account .woocommerce-form-register__submit {
  background: var(--terracotta);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 13px 30px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 200ms;
}
.woocommerce-account button.button:hover { background: var(--terracotta-hover); }
.woocommerce-account .woocommerce-LostPassword a { color: var(--terracotta); }

/* Edit-account: password-change fieldset — drop the raw browser border, brand the legend. */
.woocommerce-EditAccountForm fieldset {
  border: 0;
  margin: 26px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid var(--line);
}
.woocommerce-EditAccountForm legend {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--ink);
  padding: 0;
  margin-bottom: 12px;
  width: 100%;
}

/* Account tables (orders, order details) — white card, airy rows, branded head. */
.woocommerce-account .shop_table {
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  width: 100%;
  margin: 0 0 24px;
}
.woocommerce-account .shop_table th,
.woocommerce-account .shop_table td {
  border: 0;
  border-bottom: 1px solid var(--line);
  /* !important: WC's .woocommerce table.my_account_orders td (0,2,2) + shop_table th
     rules outrank this selector's (0,2,1) and force 4-9px padding otherwise. */
  padding: 15px 18px !important;
  text-align: left;
  line-height: 1.5 !important;
  color: var(--text-body);
}
.woocommerce-account .shop_table thead th {
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}
.woocommerce-account .shop_table tbody tr:last-child td,
.woocommerce-account .shop_table tbody tr:last-child th,
.woocommerce-account .shop_table tfoot tr:last-child th,
.woocommerce-account .shop_table tfoot tr:last-child td { border-bottom: 0; }
.woocommerce-account .shop_table tfoot th,
.woocommerce-account .shop_table tfoot td { font-weight: 700; color: var(--ink); }
.woocommerce-account .shop_table .woocommerce-Price-amount { color: var(--ink); }

/* Space between the "Redigér …" link and the address card below it. */
.woocommerce-account .woocommerce-Address-title { margin-bottom: 18px; }

/* Single-country store renders "Land" as a locked one-option <select> that WC
   strips to bare bold text (border:0; padding:0; width:auto). Present it as a
   read-only field (sand fill, no arrow) matching the inputs. !important beats
   WC's .country_to_state--single rule. */
.woocommerce-account select.country_to_state--single {
  -moz-appearance: none !important;
       appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  box-sizing: border-box;
  padding: 12px 14px !important;
  background: var(--sand-light) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 8px !important;
  color: var(--ink) !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  pointer-events: none;
}

/* Address blocks (order view + saved addresses) — white card, no raw border. */
.woocommerce-account .woocommerce-customer-details address,
.woocommerce-account .woocommerce-Address address,
.woocommerce-account address {
  border: 0;
  background: #fff;
  border-radius: 14px;
  padding: 22px 24px;
  font-style: normal;
  line-height: 1.7;
  color: var(--text-body);
}

@media (max-width: 820px) {
  .sj-account { grid-template-columns: 1fr; }
  /* Match the .sj-account sticky rule's specificity so static actually wins. */
  .sj-account .woocommerce-MyAccount-navigation { position: static; }
  .woocommerce-account .u-columns.col2-set { grid-template-columns: 1fr; }
}

/* ============ Order received (thank-you) ============ */
.sj-received { max-width: 900px; margin-inline: auto; }

/* Confirmation hero */
.sj-received__hero { text-align: center; margin-bottom: clamp(34px, 5vw, 56px); }
.sj-received__check {
  display: grid;
  place-items: center;
  width: 66px; height: 66px;
  border-radius: 50%;
  background: var(--terracotta);
  color: #fff;
  margin: 0 auto 22px;
}
.sj-received__check svg { width: 32px; height: 32px; }
.sj-received__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  color: var(--ink);
  margin: 10px 0 14px;
  line-height: 1.05;
}
.sj-received__msg { color: var(--text-muted); font-size: 1.1rem; line-height: 1.6; max-width: 48ch; margin: 0 auto; }
.sj-received__actions { margin-top: 22px; display: flex; gap: 12px; justify-content: center; }

/* Order overview — segmented white info bar (hairline gaps), no bordered ul. */
.woocommerce-order .woocommerce-order-overview {
  list-style: none;
  margin: 0 0 clamp(34px, 4vw, 48px);
  padding: 0;
  border: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.woocommerce-order .woocommerce-order-overview li {
  background: #fff;
  /* !important beats WC's .order_details li (float:left; margin-right:2em;
     padding-right:2em; border-right) that otherwise leaves fat tan gaps. */
  margin: 0 !important;
  padding: 22px 24px !important;
  border: 0 !important;
  float: none !important;
  min-width: 0; /* let the cell shrink so long emails can wrap instead of clipping */
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  text-align: left;
}
.woocommerce-order .woocommerce-order-overview li strong {
  display: block;
  margin-top: 8px;
  font-family: var(--font-display) !important;
  font-size: 1.05rem !important;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  font-weight: 700;
  overflow-wrap: anywhere;
}
/* WC's .order_details clearfix ::before/::after become phantom grid items and
   leave an empty first cell — remove them. */
.woocommerce-order .woocommerce-order-overview::before,
.woocommerce-order .woocommerce-order-overview::after { content: none !important; display: none !important; }

/* Section headings */
.woocommerce-order .woocommerce-column__title,
.woocommerce-order > h2,
.woocommerce-order section > h2:not(.sj-received__nexthead) {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  margin: 0 0 18px;
}

/* Order details + customer tables → white cards (mirror the account tables). */
.woocommerce-order .shop_table {
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  width: 100%;
  margin: 0 0 40px;
}
.woocommerce-order .shop_table th,
.woocommerce-order .shop_table td {
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 15px 18px !important;
  text-align: left;
  line-height: 1.5;
  color: var(--text-body);
}
.woocommerce-order .shop_table thead th {
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}
.woocommerce-order .shop_table tbody tr:last-child td,
.woocommerce-order .shop_table tbody tr:last-child th,
.woocommerce-order .shop_table tfoot tr:last-child th,
.woocommerce-order .shop_table tfoot tr:last-child td { border-bottom: 0; }
.woocommerce-order .shop_table tfoot th,
.woocommerce-order .shop_table tfoot td { font-weight: 700; color: var(--ink); }

/* Address card */
.woocommerce-order address,
.woocommerce-order .woocommerce-customer-details address {
  border: 0;
  background: #fff;
  border-radius: 14px;
  padding: 22px 24px;
  font-style: normal;
  line-height: 1.7;
  color: var(--text-body);
}

/* "What happens next" — the mystery-travel journey as white step cards. */
.sj-received__next { margin-top: clamp(44px, 6vw, 76px); }
.sj-received__nexthead {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin: 8px 0 26px;
}
.sj-received__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.sj-rstep { background: #fff; border-radius: 16px; padding: 26px 24px; }
.sj-rstep__num { font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; color: var(--terracotta); line-height: 1; }
.sj-rstep__title { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--ink); margin: 12px 0 6px; }
.sj-rstep__text { font-size: 0.92rem; color: var(--text-muted); line-height: 1.55; margin: 0; }

@media (max-width: 640px) {
  .woocommerce-order .woocommerce-order-overview { grid-template-columns: 1fr 1fr; }
}

/* --- Custom single product (content-single-product.php) --- */
.sj-product { margin: 0; }
.sj-product .woocommerce-notices-wrapper:empty { display: none; }

.sj-product__hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}
.sj-product__media,
.sj-product__intro { min-width: 0; }
.sj-product__imgwrap {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  background: var(--sand-deep);
}
.sj-product__imgwrap img { position: absolute; inset: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; }

.sj-product__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 3.6vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 16px 0 0;
}
.sj-product__short {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  line-height: 1.6;
  color: var(--text-body);
  margin: 22px 0 0;
  max-width: 46ch;
}
.sj-product__price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 2.2vw, 2.2rem);
  color: var(--ink);
  margin: 24px 0 0;
}
.sj-product__price del { color: var(--text-faint); font-weight: 400; font-size: 0.7em; margin-right: 8px; }
.sj-product__price ins { text-decoration: none; }
.sj-product__buy { margin-top: 24px; }
.woocommerce div.product.sj-product form.cart,
.sj-product__buy form.cart { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0; }
.sj-product__buy .quantity { margin: 0; }
.sj-product__buy .quantity input.qty {
  width: 74px;
  box-sizing: border-box;
  text-align: center;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 15px 8px;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1;
  color: var(--ink);
  background: #fff;
  -webkit-appearance: textfield;
          appearance: textfield;
  -moz-appearance: textfield;
}
.sj-product__buy .quantity input.qty::-webkit-outer-spin-button,
.sj-product__buy .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Sold individually: WC still outputs an (empty) .quantity holding a hidden input,
   which leaves a phantom flex gap before the button — hide it so the button aligns left. */
.sj-product__buy--single .quantity,
.sj-product__buy .quantity.hidden,
.sj-product__buy form.cart input[type="hidden"] { display: none; }
.sj-product__buy .single_add_to_cart_button { flex: 0 0 auto; }
.sj-product__reassure {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}
.sj-product__reassure svg { color: var(--terracotta); flex: none; }
.sj-product__reassure-sep { opacity: .7; }

/* Process band (petrol) with step cards. */
.sj-product__processhead { margin-top: 14px; max-width: 22ch; }
.sj-product__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 1.8vw, 24px);
  margin-top: clamp(32px, 4vw, 52px);
}
.sj-pstep {
  background: var(--sand);
  border-radius: 16px;
  padding: clamp(22px, 2.2vw, 30px);
  box-shadow: 0 10px 30px rgba(27, 42, 46, 0.16);
}
.sj-pstep__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 3vw, 2.6rem); color: var(--terracotta); line-height: 1; }
.sj-pstep__title { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--ink); margin: 12px 0 0; }
.sj-pstep__desc { font-family: var(--font-body); font-size: 0.98rem; line-height: 1.55; color: var(--text-body); margin: 8px 0 0; }

.sj-product__descbody { margin-top: 14px; }
.sj-product__descbody h2,
.sj-product__descbody h3 { font-family: var(--font-display); font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.sj-product__descbody p { font-family: var(--font-body); font-size: 1.05rem; line-height: 1.75; color: var(--text-body); margin: 0 0 1em; }

@media (max-width: 1000px) {
  .sj-product__hero { grid-template-columns: 1fr; }
  .sj-product__steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .sj-product__steps { grid-template-columns: 1fr; }
}

/* ===================================================================
   Cart & Checkout BLOCKS (.wc-block-*). Scoped under .sj-woo to win
   over WooCommerce's default block styles.
   =================================================================== */
.sj-woo .wc-block-checkout,
.sj-woo .wc-block-cart { font-family: var(--font-body); color: var(--text-body); }

/* Step / section titles */
.sj-woo .wc-block-components-title,
.sj-woo .wc-block-components-checkout-step__title,
.sj-woo .wc-block-cart__totals-title,
.sj-woo .wc-block-components-order-summary .wc-block-components-title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.sj-woo .wc-block-components-checkout-step__description { color: var(--text-muted); }

/* --- Inputs / selects / textareas --- */
.sj-woo .wc-block-components-text-input input,
.sj-woo .wc-block-components-textarea,
.sj-woo .wc-block-components-select .components-select-control__input,
.sj-woo .wc-blocks-components-select__select,
.sj-woo .wc-block-components-combobox-control input,
.sj-woo .wc-block-components-address-form input,
.sj-woo .wc-block-components-quantity-selector__input {
  border: 1px solid var(--line-strong) !important;
  border-radius: 8px !important;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-body);
}
/* Roomier fields — the WC default 12px side padding felt cramped. The country
   <select> uses a different class (wc-blocks-components-select__select) than the
   text inputs, which is why it looked off; it's now matched + given arrow room. */
.sj-woo .wc-block-components-text-input input,
.sj-woo .wc-block-components-address-form input,
.sj-woo .wc-blocks-components-select__select {
  padding-left: 16px !important;
  padding-right: 16px !important;
}
.sj-woo .wc-blocks-components-select__select { padding-right: 40px !important; }
/* Float labels at the same 16px inset as the text so they line up. The extra
   .wc-block-checkout__form ancestor outranks WC's own is-active/:not label rules. */
.sj-woo .wc-block-checkout__form .wc-block-components-text-input label,
.sj-woo .wc-block-components-text-input label,
.sj-woo .wc-blocks-components-select__label { left: 16px !important; }
/* Checkboxes are <input>s too, so the text-field border-radius/padding above was
   leaking onto the "create account" box and stretching it. Keep it a square. */
.sj-woo input[type="checkbox"] {
  border-radius: 4px !important;
  padding: 0 !important;
}
.sj-woo .wc-block-components-text-input input:focus,
.sj-woo .wc-block-components-textarea:focus,
.sj-woo .wc-block-components-combobox-control input:focus {
  border-color: var(--terracotta) !important;
  box-shadow: 0 0 0 1px var(--terracotta);
  outline: none;
}
.sj-woo .wc-block-components-text-input.is-active label,
.sj-woo .wc-block-components-text-input label { color: var(--text-muted); }
.sj-woo .wc-block-components-text-input.is-active label { color: var(--terracotta); }

/* --- Buttons (place order, proceed to checkout) --- */
.sj-woo .wc-block-components-button:not(.is-link),
.sj-woo .wc-block-cart__submit-button,
.sj-woo .wc-block-components-checkout-place-order-button {
  background: var(--terracotta);
  color: #fff;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  padding: 16px 34px;
  transition: background-color 240ms;
}
.sj-woo .wc-block-components-button:not(.is-link):hover,
.sj-woo .wc-block-cart__submit-button:hover,
.sj-woo .wc-block-components-checkout-place-order-button:hover { background: var(--terracotta-hover); }
.sj-woo .wc-block-components-button.is-link,
.sj-woo .wc-block-components-totals-coupon-link { color: var(--terracotta); }

/* Cart/checkout sit closer to the header — the 120px section pad is too airy here. */
.sj-woo.sx { padding-block: clamp(40px, 5vw, 72px); }

/* --- Cards: one shared shell for every column (cart sidebar + checkout summary +
   cart items + form steps), so the whole page reads as a matched set.
   NB: the checkout summary box is `.wp-block-woocommerce-checkout-order-summary-block`
   — NOT `.wc-block-checkout__sidebar` (that carries `.wc-block-components-sidebar`
   as a compound class and holds the notices too). --- */
.sj-woo .wc-block-cart__sidebar,
.sj-woo .wp-block-woocommerce-checkout-order-summary-block,
.sj-woo .wc-block-cart__main {
  background: var(--sand-light);
  border: 0;
  border-radius: 14px;
  padding: clamp(20px, 2.4vw, 32px);
  box-sizing: border-box;
}
/* Cart items box white (like the checkout form card); sidebar stays sand. */
.sj-woo .wc-block-cart__main { background: #fff; }
/* Space between the two cart columns. WC's columns already fill the row, so a bare
   gap would overflow and wrap them — let main flex-shrink to absorb the gap instead
   (min-width:0 lets it shrink below its content width). Gap becomes row-gap when
   the layout stacks on narrow screens. */
.sj-woo .wc-block-cart { gap: clamp(22px, 2.4vw, 44px); }
.sj-woo .wc-block-cart__main { flex: 1 1 0 !important; min-width: 0 !important; }

/* Checkout: the whole form is ONE white card; sections divided by hairlines. */
.sj-woo .wc-block-checkout__main {
  background: #fff;
  border: 0;
  border-radius: 22px;
  padding: clamp(24px, 3vw, 44px);
  box-sizing: border-box;
}
/* Sticky summary parks below the sticky site header, not under it. */
.sj-woo .wc-block-checkout__sidebar { top: 100px !important; }
.sj-woo .wc-block-components-checkout-step {
  padding: clamp(22px, 2.4vw, 30px) 0;
  border-bottom: 1px solid var(--line) !important;
  margin: 0 !important;
}
.sj-woo .wc-block-checkout__contact-fields { padding-top: 0; }
/* order-notes already carries the divider above terms — drop the terms separator. */
.sj-woo .wc-block-checkout__terms { border-top: 0 !important; }
.sj-woo .wc-block-checkout__actions { padding-top: 24px; }

/* Cart items table sits flush inside its card. */
.sj-woo .wc-block-cart-items,
.sj-woo .wc-block-cart-items__header { background: transparent; }
.sj-woo .wc-block-components-order-summary-item__image img,
.sj-woo .wc-block-cart-item__image img { border-radius: 8px; }
/* Summary titles — same branded small-caps on cart AND checkout. */
.sj-woo .wc-block-cart__totals-title,
.sj-woo .wc-block-components-checkout-order-summary__title {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 4px;
}
/* The checkout title's visible text lives in a child span with its own 20px/500 —
   pin it to the cart title's size/weight (it inherits the caps + spacing above). */
.sj-woo .wc-block-components-checkout-order-summary__title-text {
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  margin: 0 0 8px !important;
}

/* --- Requested checkout-summary design (tablet + mobile): white box with a thin
   border and a sentence-case "Ordreoversigt" heading instead of the sand card +
   small-caps used on desktop (which matches the cart sidebar). --- */
@media (max-width: 1000px) {
  .sj-woo .wp-block-woocommerce-checkout-order-summary-block {
    background: #fff;
    border: 1px solid var(--line);
  }
  .sj-woo .wc-block-components-checkout-order-summary__title {
    text-transform: none;
    letter-spacing: normal;
  }
  .sj-woo .wc-block-components-checkout-order-summary__title-text {
    font-family: var(--font-display) !important;
    font-size: 1.3rem !important;
    font-weight: 700 !important;
  }
}

/* User-supplied refinements: the order summary rendered inside the actions block
   (mobile) sits flush/borderless, with tightened actions + terms spacing. */
.sj-woo .wp-block-woocommerce-checkout-actions-block .wp-block-woocommerce-checkout-order-summary-block {
  background-color: transparent;
  padding: 0;
  margin-bottom: 20px;
  border: none;
}
.sj-woo .wc-block-checkout__actions {
  padding-top: 0;
  margin-bottom: 10px;
}
.sj-woo .wc-block-checkout__terms {
  padding-top: 20px;
}
.sj-woo .wc-block-components-checkout-order-summary__title {
  border-bottom: none;
  border-top: none;
  margin-bottom: 0;
}
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title .wc-block-components-checkout-order-summary__title-text {
  margin-bottom: 0 !important;
}
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title {
  padding: 0;
}
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__content {
  padding-top: 14px;
}

/* WC insets the summary content 16px horizontally (order-summary padding +
   sidebar coupon/totals rule); zero it so everything aligns flush with the card
   padding + the (now unindented) title. .wc-block-components-sidebar covers BOTH
   the checkout summary and the cart totals sidebar. */
.sj-woo .wc-block-components-sidebar .wc-block-components-order-summary,
.sj-woo .wc-block-components-sidebar .wc-block-components-panel,
.sj-woo .wc-block-components-sidebar .wc-block-components-totals-coupon,
.sj-woo .wc-block-components-sidebar .wc-block-components-totals-item {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Cart title flush (left) + WC's desktop padding applied on every breakpoint
   (WC scopes it to desktop, so the mobile title lacked it); display:block keeps
   "Samlet beløb i kurv" visible on mobile (WC hides it <700px). */
.sj-woo .wc-block-cart__totals-title { margin-left: 0 !important; padding: 8px 16px 10px 0 !important; display: block !important; }

/* Product-name links (cart items + order summary) — brand, not the default blue. */
.sj-woo .wc-block-components-product-name,
.sj-woo a.wc-block-components-product-name {
  color: var(--ink) !important;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
}
.sj-woo .wc-block-components-product-name:hover { color: var(--terracotta) !important; }
.sj-woo .wc-block-cart-item__remove-link { margin-top: 8px; }

/* --- Totals (identical rules for cart sidebar + checkout summary) --- */
.sj-woo .wc-block-components-totals-item { color: var(--text-body); }
.sj-woo .wc-block-components-totals-item__label { color: var(--text-muted); }
.sj-woo .wc-block-components-totals-item__value { color: var(--ink); }
.sj-woo .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.sj-woo .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
}

/* --- Panels (coupon accordion) --- */
.sj-woo .wc-block-components-panel__button { color: var(--text-body); font-weight: 600; }

/* --- Payment / shipping options ---
   Each option is an accordion wrapping BOTH the radio label and its description.
   Border the wrapper (one soft box), not the inner label, so radio + description
   read as a single card with no clunky internal divider. */
.sj-woo .wc-block-components-radio-control { border: 0 !important; }
/* WC overlays a 1px highlight border on the checked option via a ::after on the
   radio-control wrapper (.--highlight-checked) — THE "weird border". Remove it. */
.sj-woo .wc-block-components-radio-control--highlight-checked::after { display: none !important; }
.sj-woo .wc-block-components-radio-control-accordion-option {
  background: transparent;
  border: 1px solid rgba(27, 42, 46, 0.28) !important;
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
  box-shadow: none !important; /* kill WC's dark inset ring on the selected option */
}
.sj-woo .wc-block-components-radio-control-accordion-option:last-child { margin-bottom: 0; }
.sj-woo .wc-block-components-radio-control__option {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 15px 18px 15px 46px !important;
}
.sj-woo .wc-block-components-radio-control-accordion-content {
  border: 0 !important;
  padding: 0 18px 15px 46px;
  color: var(--text-muted);
  font-size: 0.92rem;
}
.sj-woo .wc-block-components-radio-control__input { accent-color: var(--terracotta); }

/* --- Quantity stepper (cart) --- */
.sj-woo .wc-block-components-quantity-selector {
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  overflow: hidden;
}
.sj-woo .wc-block-components-quantity-selector__button { color: var(--petrol); }
.sj-woo .wc-block-components-quantity-selector__input { border: none !important; }

/* --- Cart item remove --- */
.sj-woo .wc-block-cart-item__remove-link { color: var(--text-faint); }
.sj-woo .wc-block-cart-item__remove-link:hover { color: var(--notice); }

/* --- Notices (cart/checkout block) — match the on-brand classic notices.
   Sand-light here since block notices sit inside the white form/summary cards. --- */
.sj-woo .wc-block-components-notice-banner {
  border-radius: 14px;
  font-family: var(--font-body);
  color: var(--ink);
  border: 0 !important;
}
.sj-woo .wc-block-components-notice-banner.is-info,
.sj-woo .wc-block-components-notice-banner.is-success { background: var(--sand-light); }
.sj-woo .wc-block-components-notice-banner.is-error { background: var(--sand-light); }
.sj-woo .wc-block-components-notice-banner.is-info svg,
.sj-woo .wc-block-components-notice-banner.is-success svg { fill: var(--petrol); }
.sj-woo .wc-block-components-notice-banner.is-error svg { fill: var(--terracotta); }

/* Empty cart: products are link-only, so remove the "Ny i webshop" recommendations.
   Keep the "Din kurv er tom" message (1st heading); drop the separator, the 2nd
   heading, and the product-new grid. */
.wp-block-woocommerce-empty-cart-block .wp-block-separator,
.wp-block-woocommerce-empty-cart-block .wp-block-product-new,
.wp-block-woocommerce-empty-cart-block .wp-block-woocommerce-product-new,
.wp-block-woocommerce-empty-cart-block .wp-block-heading ~ .wp-block-heading { display: none !important; }

/* Breadcrumb + result count + ordering */
.woocommerce .woocommerce-breadcrumb { color: var(--text-faint); font-size: 0.85rem; margin-bottom: 22px; }
.woocommerce .woocommerce-breadcrumb a { color: var(--text-muted); }
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering { color: var(--text-muted); }