/*
Theme Name: Helles Kort
Theme URI: https://example.com
Author: Helle
Description: Et personligt udstillingsvindue for håndlavede kort. Bygget til at arbejde sammen med WooCommerce som katalogmotor, uden betaling, kurv eller levering — besøgende beder om et kort, Helle følger selv op.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.6
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: helles-kort
Tags: e-commerce, custom-menu, featured-images, translation-ready
*/

/* =============================================================
   DESIGN TOKENS
   Color strategy: Committed — warm kraft-paper neutral base,
   one saturated marker-red/marigold accent carries every CTA
   and emphasis. A muted forest green is reserved only for
   occasion tag chips, so categories read distinctly at scale
   without turning the UI into a rainbow.
   ============================================================= */

:root {
  /* Neutrals — tinted warm (toward the accent hue), never pure gray */
  --color-bg: oklch(97.5% 0.014 75);
  --color-surface: oklch(94.5% 0.017 75);
  --color-surface-raised: oklch(99% 0.008 75);
  --color-border: oklch(85% 0.02 70);
  --color-border-strong: oklch(74% 0.025 65);

  --color-text: oklch(24% 0.02 55);
  --color-text-muted: oklch(46% 0.025 55);
  --color-text-on-accent: oklch(98% 0.01 75);

  /* Primary accent — grease-marker orange-red. Carries CTAs, links, emphasis. */
  --color-accent-50: oklch(95% 0.035 38);
  --color-accent-400: oklch(68% 0.16 38);
  --color-accent-500: oklch(58% 0.19 36);
  --color-accent-600: oklch(48% 0.18 34);
  --color-accent-700: oklch(38% 0.15 32);

  /* Secondary — muted forest green, occasion tag chips only */
  --color-tag-bg: oklch(91% 0.045 152);
  --color-tag-text: oklch(34% 0.07 152);

  /* Semantic */
  --color-error: oklch(52% 0.17 22);
  --color-error-bg: oklch(95% 0.03 22);
  --color-success: oklch(45% 0.1 152);
  --color-success-bg: oklch(94% 0.045 152);

  /* Typography */
  --font-heading: "Baloo 2", ui-rounded, "Segoe UI", sans-serif;
  --font-body: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-accent: "Permanent Marker", cursive;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --text-2xl: clamp(1.9rem, 1.5rem + 2vw, 2.75rem);
  --text-3xl: clamp(2.4rem, 1.8rem + 3vw, 3.75rem);

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-body: 1.7;

  /* Spacing — 4pt base */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* Elevation — subtle, warm-tinted shadows, never pure black */
  --shadow-sm: 0 1px 2px oklch(30% 0.03 55 / 0.08), 0 1px 1px oklch(30% 0.03 55 / 0.05);
  --shadow-md: 0 4px 10px oklch(30% 0.03 55 / 0.1), 0 2px 4px oklch(30% 0.03 55 / 0.06);
  --shadow-lg: 0 12px 28px oklch(30% 0.03 55 / 0.14), 0 4px 10px oklch(30% 0.03 55 / 0.08);

  --radius-sm: 0.4rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;

  --measure: 62ch;

  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;

  /* Matches .site-header's real rendered height (branding line-height +
     its padding-block). Used to keep the sticky hero stage below the
     sticky nav instead of both pinning to the same y:0. */
  --site-header-height: 68px;
}

/* =============================================================
   RESET & BASE
   ============================================================= */

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

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

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  /* Safety net: nothing on this site should ever need to scroll sideways.
     The hero's flying-out cards are the main offender when this isn't
     here (see .hero-circle__cards.is-offscreen below), but this catches
     anything else that overflows too, instead of the whole page
     becoming swipeable/scrollable left-right. */
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--color-accent-600); text-decoration-thickness: 1.5px; text-underline-offset: 0.15em; }
a:hover { color: var(--color-accent-700); }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-md);
  text-wrap: balance;
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p { margin: 0 0 var(--space-md); max-width: var(--measure); }
article p, .prose p { text-wrap: pretty; }

.container {
  width: 100%;
  max-width: 76rem;
  margin-inline: auto;
  padding-inline: var(--space-lg);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--space-md);
  top: -3rem;
  background: var(--color-text);
  color: var(--color-text-on-accent);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  z-index: var(--z-overlay);
  transition: top 0.2s var(--ease-out-quart);
}
.skip-link:focus { top: var(--space-md); }

:focus-visible {
  outline: 2px solid var(--color-accent-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* =============================================================
   SITE HEADER
   ============================================================= */

.site-header {
  border-bottom: 1px solid transparent;
  background: var(--color-surface-raised);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  transition: border-color 0.2s var(--ease-out-quart), box-shadow 0.2s var(--ease-out-quart);
}

/* No visible seam while the hero's own whitespace separates it from the
   header; the border only appears once the page has actually scrolled
   past that gap, so it never floats as a bare line above the cards. */
.site-header.is-scrolled {
  border-bottom-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-block: var(--space-md);
}

.site-branding {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs);
}
.site-branding:hover { color: var(--color-accent-600); }
.site-branding__dot { color: var(--color-accent-500); }

.site-header__right {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.site-header__cart,
.site-header__wishlist,
.site-header__account {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--color-text);
  border-radius: 50%;
  transition: background-color 0.2s var(--ease-out-quart), color 0.2s var(--ease-out-quart);
}

.site-header__cart:hover,
.site-header__wishlist:hover,
.site-header__account:hover {
  background: var(--color-surface);
  color: var(--color-accent-600);
}

.cart-contents-count {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding-inline: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent-500);
  color: var(--color-text-on-accent);
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 999px;
  line-height: 1;
}

.cart-contents-count[data-count="0"] {
  display: none;
}

.primary-nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  background: none;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text);
  cursor: pointer;
}

@media (min-width: 768px) {
  .primary-nav__toggle { display: none; }
}

.primary-nav {
  display: none;
}

.primary-nav.is-open {
  display: block;
  position: absolute;
  inset-inline: 0;
  top: 100%;
  background: var(--color-surface-raised);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  padding: var(--space-md) var(--space-lg);
}

@media (min-width: 768px) {
  .primary-nav {
    display: block;
    position: static;
    box-shadow: none;
    border: 0;
    padding: 0;
    background: transparent;
  }
}

.primary-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

@media (min-width: 768px) {
  .primary-nav ul { flex-direction: row; gap: var(--space-xl); }
}

.primary-nav a {
  color: var(--color-text);
  text-decoration: none;
  font-weight: 600;
  padding: var(--space-2xs) 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s var(--ease-out-quart), color 0.2s var(--ease-out-quart);
}

.primary-nav a:hover,
.primary-nav a:focus-visible {
  color: var(--color-accent-600);
  border-bottom-color: var(--color-accent-500);
}

.primary-nav .current-menu-item > a {
  border-bottom-color: var(--color-accent-500);
}

/* =============================================================
   BUTTONS
   ============================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-base);
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
  min-height: 44px;
  transition: transform 0.2s var(--ease-out-quart), box-shadow 0.2s var(--ease-out-quart), background-color 0.2s var(--ease-out-quart);
}

.btn--primary {
  background: var(--color-accent-500);
  color: var(--color-text-on-accent);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--color-accent-600); transform: translateY(-1px); box-shadow: var(--shadow-md); color: var(--color-text-on-accent); }
.btn--primary:active { background: var(--color-accent-700); transform: translateY(0); box-shadow: none; }
.btn--primary:disabled { background: var(--color-border-strong); color: var(--color-text-muted); cursor: not-allowed; transform: none; box-shadow: none; }

/* WooCommerce's own .button styling on the loop add-to-cart link
   (higher specificity than a single class) otherwise wins over
   .btn--primary and quietly reverts it to WooCommerce's default grey. */
a.button.btn--primary, button.button.btn--primary {
  background: var(--color-accent-500);
  color: var(--color-text-on-accent);
}
a.button.btn--primary:hover, button.button.btn--primary:hover {
  background: var(--color-accent-600);
  color: var(--color-text-on-accent);
}

/* WooCommerce's own `.woocommerce a.button` rule (wrapped in :where(),
   but the un-:where() part still carries 2 classes of specificity)
   beats a plain .btn and forces display:inline-block — which, because
   this button is itself a flex item inside .card-tile__actions, then
   blockifies to plain "block". That drops .btn's flex centering
   entirely, so the label sits flush-left instead of centred. A 3-class
   compound selector on the button's own classes outweighs it. */
a.button.btn--primary.card-tile__add-to-cart,
button.button.btn--primary.card-tile__add-to-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.btn--secondary {
  background: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-text);
}
.btn--secondary:hover { border-color: var(--color-accent-500); color: var(--color-accent-600); }

.btn--block { width: 100%; }

/* =============================================================
   TAGS & BADGES
   ============================================================= */

.tag {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: var(--color-tag-bg);
  color: var(--color-tag-text);
}

.badge-scarce {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-family: var(--font-accent);
  font-size: var(--text-sm);
  color: var(--color-accent-700);
  background: var(--color-accent-50);
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-sm);
  transform: rotate(-2deg);
}

.badge-sold {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-sm);
}

/* =============================================================
   CARD TILE (catalog + homepage teaser)
   ============================================================= */

.card-grid {
  display: grid;
  /* auto-fill (not auto-fit): keeps the row's column tracks even when
     there are fewer cards than fit a row, instead of stretching the
     few cards present to fill the whole width. */
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  column-gap: var(--space-xl);
  row-gap: var(--space-3xl);
  list-style: none;
  margin: 0;
  padding: 0;
}

.card-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.card-tile__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  text-decoration: none;
  color: inherit;
}

.card-tile__figure {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.25s var(--ease-out-quart), transform 0.25s var(--ease-out-quart);
}

.card-tile__figure:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px) rotate(-0.5deg);
}

.card-tile__image-link {
  display: block;
  width: 100%;
  height: 100%;
}

.card-tile__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.card-tile__add-to-cart {
  align-self: flex-start;
}

.card-tile__add-to-cart.loading {
  opacity: 0.6;
  pointer-events: none;
}

.qty-maxed-badge {
  align-self: flex-start;
  padding: 0.75rem 1.5rem;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border-radius: var(--radius-md);
}

/* "Se kurv" — appended by WooCommerce's own wc-add-to-cart.js right
   after the add-to-cart button once it succeeds. Styled as its own
   bordered button sitting beside "Læg i kurv", not a bare text link. */
.added_to_cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.25rem;
  min-height: 44px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-weight: 700;
  font-size: var(--text-sm);
  text-decoration: none;
  transition: border-color 0.2s var(--ease-out-quart), color 0.2s var(--ease-out-quart);
}

.added_to_cart:hover {
  border-color: var(--color-accent-500);
  color: var(--color-accent-600);
}

.card-tile__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-tile__badge {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
}

/* Wishlist heart — top-right corner of any product image (card tile
   or single product gallery). No login on this site, so the wishlist
   itself lives in the browser's own storage (see main.js); this button
   just reflects and toggles that. */
.wishlist-heart {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: oklch(99% 0.005 75 / 0.85);
  color: var(--color-text);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(2px);
  transition: transform 0.2s var(--ease-out-quart), background-color 0.2s var(--ease-out-quart), color 0.2s var(--ease-out-quart);
}

.wishlist-heart svg {
  width: 19px;
  height: 19px;
}

.wishlist-heart:hover {
  transform: scale(1.1);
  color: var(--color-accent-600);
}

.wishlist-heart.is-active {
  color: var(--color-accent-500);
}

.wishlist-heart.is-active svg {
  fill: currentColor;
}

.wishlist-heart.is-animating {
  animation: wishlist-pop 0.35s var(--ease-out-quart);
}

@keyframes wishlist-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

.card-tile__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-lg);
  margin: 0;
  color: var(--color-text);
}

.card-tile__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.card-tile__price {
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
}

/* =============================================================
   FILTER / SEARCH BAR
   ============================================================= */

.catalog-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md) var(--space-lg);
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-xl);
}

.catalog-search {
  display: flex;
  flex: 1 1 16rem;
  min-width: 0;
}

.catalog-search input[type="search"] {
  flex: 1;
  min-width: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  padding: 0.65rem 1rem;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  border-right: 0;
  background: var(--color-surface-raised);
  color: var(--color-text);
}

.catalog-search button {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding-inline: 1rem;
}

.catalog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.catalog-filters a {
  display: inline-flex;
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1.5px solid var(--color-border-strong);
  color: var(--color-text);
  transition: background-color 0.2s var(--ease-out-quart), color 0.2s var(--ease-out-quart), border-color 0.2s var(--ease-out-quart);
}

.catalog-filters a:hover { border-color: var(--color-accent-500); color: var(--color-accent-600); }

.catalog-filters .is-active a {
  background: var(--color-accent-500);
  border-color: var(--color-accent-500);
  color: var(--color-text-on-accent);
}

.catalog-sort {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-sm);
}

@media (max-width: 640px) {
  .catalog-sort {
    margin-inline-start: 0;
  }
}

.catalog-sort select {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border-strong);
  background: var(--color-surface-raised);
  color: var(--color-text);
}

.catalog-empty {
  text-align: center;
  padding: var(--space-4xl) var(--space-lg);
  color: var(--color-text-muted);
}

.catalog-empty h2 { color: var(--color-text); }

/* p has a global max-width (measure) but no auto margins, so left to
   itself it hugs the left edge of this centered block instead of
   sitting in the middle of it — same for the <p> wrapping the button. */
.catalog-empty p {
  margin-inline: auto;
}

/* =============================================================
   CART PAGE (woocommerce/cart/cart.php)
   ============================================================= */

.cart-page-main {
  padding-block: var(--space-2xl) var(--space-4xl);
}

.cart-list {
  list-style: none;
  margin: 0 0 var(--space-2xl);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.cart-list__item {
  display: grid;
  grid-template-columns: 72px 1fr auto auto auto;
  align-items: center;
  gap: var(--space-md);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}

.cart-list__figure {
  display: block;
  width: 72px;
  height: 90px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-surface);
}

.cart-list__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-list__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  min-width: 0;
}

.cart-list__title {
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
}
.cart-list__title:hover { color: var(--color-accent-600); }

.cart-list__price { color: var(--color-text-muted); font-size: var(--text-sm); }

.cart-list__qty-fixed {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.qty-stepper {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 4px;
  background: var(--color-surface);
  border-radius: 999px;
}

.qty-stepper__button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: var(--color-surface-raised);
  color: var(--color-accent-600);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  appearance: none;
  -webkit-appearance: none;
  transition: background-color 0.2s var(--ease-out-quart), color 0.2s var(--ease-out-quart), transform 0.15s var(--ease-out-quart);
}
.qty-stepper__button:hover { background: var(--color-accent-500); color: var(--color-text-on-accent); transform: scale(1.08); }
.qty-stepper__button:active { transform: scale(0.94); }
.qty-stepper__button:disabled { opacity: 0.4; cursor: not-allowed; background: var(--color-surface-raised); color: var(--color-text-muted); transform: none; box-shadow: none; }

.qty-stepper__input {
  width: 2.25rem;
  border: 0;
  outline: 0;
  background: transparent;
  text-align: center;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  /* Without this, Chrome/Safari still draw the native number-input's
     own thin control border underneath ours, showing as a stray dark
     line around the field despite border: 0 above. */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: textfield;
}

.qty-stepper__input::-webkit-outer-spin-button,
.qty-stepper__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cart-list__subtotal {
  font-weight: 700;
  white-space: nowrap;
}

.cart-list__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--color-text-muted);
  transition: background-color 0.2s var(--ease-out-quart), color 0.2s var(--ease-out-quart);
}
.cart-list__remove:hover { background: var(--color-error-bg); color: var(--color-error); }

.cart-page-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  align-items: start;
  gap: var(--space-3xl);
}

.cart-page__actions {
  padding-top: var(--space-lg);
}

/* Sticky, not stacked below the item list — so ordering is always one
   click away, however long the cart gets, with no scrolling needed. */
.cart-summary {
  position: sticky;
  top: calc(var(--site-header-height) + var(--space-lg));
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-xl);
  background: var(--color-surface-raised);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.cart-summary__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  font-size: var(--text-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

.cart-summary__note {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin: 0;
}

@media (max-width: 900px) {
  .cart-page-layout {
    grid-template-columns: 1fr;
  }

  .cart-summary {
    position: static;
  }
}

@media (max-width: 640px) {
  .cart-list__item {
    grid-template-columns: 56px 1fr auto;
    grid-template-areas:
      "figure body remove"
      "figure qty subtotal";
  }
  .cart-list__figure { grid-area: figure; width: 56px; height: 70px; }
  .cart-list__body { grid-area: body; }
  .cart-list__remove { grid-area: remove; }
  .cart-list__qty { grid-area: qty; }
  .cart-list__subtotal { grid-area: subtotal; }
}

/* =============================================================
   HOMEPAGE
   ============================================================= */

/* Cards ring the headline in a fixed viewport-height stage. The wrapper
   is taller than the viewport so scrolling through the extra space
   drives --progress (set by assets/js/main.js) from 0 to 1, which the
   cards use to fly outward along their own angle and fade out, before
   the section releases and the rest of the page scrolls up over it. */

.hero-circle {
  position: relative;
  height: 210vh;
}

.hero-circle__sticky {
  position: sticky;
  /* Sticks below the site header with a deliberate gap (not just flush
     against it), instead of both landing on the same y:0 like before. */
  top: calc(var(--site-header-height) + 11rem);
  height: calc(100vh - var(--site-header-height) - 11rem);
  display: flex;
  align-items: center;
  justify-content: center;
  /* No overflow clipping at all: --hero-radius-x is already bounded by
     vw (see .hero-circle__cards below), so cards stay within the
     viewport horizontally by construction — a separate overflow-x:clip
     safety net isn't needed. Vertically, the page background is the
     same color above and below this box, so a card riding slightly
     outside it just blends into the page instead of being hard-cut —
     and the header sits on its own opaque, higher-stacked layer, so it
     still covers anything that gets close to it. (An earlier
     overflow-x: clip; overflow-y: visible; combination fixed the old
     clipping bug but is an unusual enough pairing that it's a likely
     suspect for a reported flicker on reload — removing overflow
     entirely sidesteps that rather than debugging the interaction.) */
}

.hero-circle__cards {
  position: absolute;
  inset: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Once the fly-out fade (opacity: calc(1 - progress), set inline below)
   is nearly done, take the cards out of layout entirely — otherwise
   their translate() position (which travels well past the viewport
   edge by design) keeps stretching the page wider than the screen,
   even though they're invisible. Restored the moment you scroll back
   up past that point. */
.hero-circle__cards.is-offscreen {
  display: none;
}

.hero-circle__cards {
  --hero-card-w: clamp(52px, 7vw, 128px);
  --hero-card-h: calc(var(--hero-card-w) * 1.25);
  /* An ellipse, not a circle: the x-radius is bounded by viewport width,
     the y-radius by viewport height, so a tall wrapped headline on a
     narrow phone still clears the ring instead of the cards sitting on
     top of it. */
  --hero-radius-x: clamp(190px, 32vw, 460px);
  /* Tied to vw, not vh: the hero text block's height is fixed (rem-based
     type), so the vertical clearance cards need from it doesn't shrink
     on shorter screens. An earlier version scaled this with vh, which
     shrank the ring on any laptop with a shorter viewport (a very common
     case) and drove the two near-vertical cards straight into the
     eyebrow text — reproduced at 1280x720. The near-vertical cards
     (~72°/108°/252°/288°) are always the tight case regardless of
     viewport width, since their horizontal offset is small (they sit
     close to the text's own column) while their vertical offset is
     radius*sin(angle) ≈ 0.95×radius — hence the floor below. */
  --hero-radius-y: clamp(280px, 24vw, 340px);
}

@keyframes hero-card-intro {
  from {
    opacity: 0;
    scale: 0.3;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

@keyframes hero-card-sway {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(3px, -3px) rotate(1deg);
  }
}

.hero-circle__card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--hero-card-w);
  height: var(--hero-card-h);
  margin: calc(var(--hero-card-h) / -2) 0 0 calc(var(--hero-card-w) / -2);
  translate:
    calc(cos(var(--angle)) * (var(--hero-radius-x) + (var(--progress, 0) * 560px)))
    calc(sin(var(--angle)) * (var(--hero-radius-y) + (var(--progress, 0) * 560px)));
  rotate: calc(var(--tilt) + (var(--progress, 0) * 70deg));
  scale: calc(1 - var(--progress, 0) * 0.4);
  opacity: calc(1 - var(--progress, 0));
  /* Two independent animations layer on top of the translate/rotate/scale
     above (the individual transform properties and the legacy `transform`
     shorthand compose rather than override each other): hero-card-intro
     pops each card in once on load, hero-card-sway is a continuous gentle
     drift so the ring doesn't sit perfectly still at rest. Both are
     staggered per card via --i so they don't move in lockstep. */
  animation-name: hero-card-intro, hero-card-sway;
  animation-duration: 0.7s, 7s;
  animation-timing-function: var(--ease-out-expo), ease-in-out;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: both, none;
  animation-delay: calc(var(--i, 0) * 70ms), calc(var(--i, 0) * 240ms);
}

@media (max-width: 640px) {
  /* A narrow phone has no room beside a nearly full-width headline, so
     a true ring always overlaps the text somewhere. Instead, cards
     split into two horizontal bands, one above and one below the text
     block (--side, set per card in front-page.php), spread left/right
     by their own angle. Measured against the real text block: it needs
     roughly 225px of clearance above and below at common phone sizes. */
  .hero-circle__cards {
    --hero-radius-x: clamp(80px, 38vw, 170px);
  }

  .hero-circle__card {
    translate:
      calc(cos(var(--angle)) * (var(--hero-radius-x) + (var(--progress, 0) * 380px)))
      calc(var(--side) * (21rem + (var(--progress, 0) * 24rem)));
  }
}

.hero-circle__card img,
.hero-circle__card svg {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

/* The greeting text inside each inlined hero card SVG. Inlining (rather
   than <img src>) is what lets these <text> elements use the site's own
   fonts and color tokens instead of being locked to whatever a static
   image file could reach. */
.hero-card-greeting {
  font-family: var(--font-accent);
  fill: #fbf3e3;
}

@keyframes hero-text-intro {
  from {
    opacity: 0;
    translate: 0 16px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

.hero-circle__text {
  position: relative;
  z-index: 2;
  max-width: 38rem;
  text-align: center;
  padding-inline: var(--space-lg);
  animation: hero-text-intro 0.8s var(--ease-out-quart) both;
  animation-delay: 0.3s;
}

.hero-circle__text h1 {
  margin-bottom: var(--space-sm);
}

.hero-circle__text p {
  line-height: 1.5;
}

.hero-circle__text p {
  margin-bottom: var(--space-md);
}

.hero__eyebrow {
  font-family: var(--font-accent);
  color: var(--color-accent-600);
  font-size: var(--text-lg);
  display: inline-block;
  transform: rotate(-2deg);
  margin-bottom: var(--space-sm);
}

.hero-circle__text .btn { margin-top: var(--space-xs); }

@media (prefers-reduced-motion: reduce) {
  .hero-circle {
    height: auto;
  }

  .hero-circle__sticky {
    position: static;
    height: auto;
    flex-direction: column;
    gap: var(--space-2xl);
    padding-block: var(--space-3xl);
    overflow: visible;
  }

  .hero-circle__cards {
    position: relative;
    width: 100%;
    height: calc(var(--hero-radius-y) * 2 + var(--hero-card-h));
  }

  .hero-circle__card {
    opacity: 1;
    scale: 1;
    animation: none;
    translate:
      calc(cos(var(--angle)) * var(--hero-radius-x))
      calc(sin(var(--angle)) * var(--hero-radius-y));
    rotate: var(--tilt);
  }

  .hero-circle__text {
    opacity: 1;
    translate: 0 0;
    animation: none;
  }
}

/* =============================================================
   SCROLL REVEAL
   Applied by assets/js/main.js via IntersectionObserver. The <noscript>
   rule and the reduced-motion query both fall back to fully visible,
   static content — this is a finishing touch, not something the page
   depends on to be usable.
   ============================================================= */

.js-reveal,
.js-reveal-group > * {
  opacity: 0;
  translate: 0 28px;
  transition: opacity 0.7s var(--ease-out-quart), translate 0.7s var(--ease-out-quart);
}

.js-reveal.is-visible,
.js-reveal-group.is-visible > * {
  opacity: 1;
  translate: 0 0;
}

.js-reveal-group.is-visible > *:nth-child(1) { transition-delay: 0s; }
.js-reveal-group.is-visible > *:nth-child(2) { transition-delay: 0.08s; }
.js-reveal-group.is-visible > *:nth-child(3) { transition-delay: 0.16s; }
.js-reveal-group.is-visible > *:nth-child(4) { transition-delay: 0.24s; }
.js-reveal-group.is-visible > *:nth-child(5) { transition-delay: 0.32s; }
.js-reveal-group.is-visible > *:nth-child(6) { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal,
  .js-reveal-group > * {
    opacity: 1;
    translate: 0 0;
    transition: none;
  }
}

.section {
  padding-block: var(--space-4xl);
}

.section--muted {
  background: var(--color-surface);
}

.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.category-head {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--color-border);
}

.category-head__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--color-accent-50);
  color: var(--color-accent-600);
}

.category-head__icon svg { width: 40px; height: 40px; }

.category-head__text h1 { margin-bottom: var(--space-2xs); }
.category-head__text p { color: var(--color-text-muted); margin-bottom: 0; }

@media (max-width: 560px) {
  .category-head { gap: var(--space-md); }
  .category-head__icon { width: 64px; height: 64px; }
  .category-head__icon svg { width: 30px; height: 30px; }
}

.steps {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  counter-reset: step;
}

.step {
  position: relative;
  padding-top: var(--space-lg);
}

.step::before {
  counter-increment: step;
  content: counter(step);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-xl);
  color: var(--color-accent-500);
  display: block;
  margin-bottom: var(--space-sm);
}

.step h3 { margin-bottom: var(--space-xs); }
.step p { color: var(--color-text-muted); margin-bottom: 0; }

/* "Sådan bestiller du" (template-order-info.php) — everything on this
   page centred under the page title, at the user's request: the title
   itself, and the timeline as a centred column (marker on top, then
   heading, then text) rather than the more usual left-marker/
   right-text row, with the connecting line running straight down
   through the centre of each marker. */

.order-info-header {
  text-align: center;
}

.order-timeline {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 36rem;
  text-align: center;
}

.order-timeline__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding-bottom: var(--space-3xl);
}

.order-timeline__step:last-child {
  padding-bottom: 0;
}

/* Spans only the step's own padding-bottom (the blank gap after its
   content, before the next marker) instead of the step's full height —
   the content text's own height varies with how much it wraps, and a
   line running the whole height would cut straight through it now
   that heading/text sit centred under the marker instead of beside it. */
.order-timeline__step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  height: var(--space-3xl);
  width: 2px;
  background: var(--color-border-strong);
}

.order-timeline__marker {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-accent-500);
  color: var(--color-text-on-accent);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-lg);
}

.order-timeline__content h3 { margin-bottom: var(--space-xs); }
.order-timeline__content p { color: var(--color-text-muted); margin-bottom: 0; }

/* Craft-process section */

.craft__intro {
  max-width: 42rem;
  margin-inline: auto;
  margin-bottom: var(--space-2xl);
  text-align: center;
}

.craft__intro p {
  color: var(--color-text-muted);
  margin-inline: auto;
}

.craft__techniques {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--space-xl);
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 50rem;
  margin-inline: auto;
}

.craft__technique {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
}

.craft__technique-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-accent-50);
  color: var(--color-accent-600);
}

.craft__technique-icon svg {
  width: 32px;
  height: 32px;
}

.craft__technique-label {
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--color-text);
}

/* Category circles */

.category-circles {
  display: flex;
  gap: var(--space-xl);
  list-style: none;
  margin: 0;
  padding: var(--space-2xs) var(--space-2xs) var(--space-md);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
  -webkit-overflow-scrolling: touch;
}

.category-circles li {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.category-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  width: 120px;
  text-decoration: none;
  text-align: center;
}

.category-circle__image {
  display: block;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: var(--color-surface);
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-sm);
  border: 3px solid var(--color-surface-raised);
  transition: box-shadow 0.25s var(--ease-out-quart), transform 0.25s var(--ease-out-quart);
}

.category-circle:hover .category-circle__image {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.category-circle__image--icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-accent-50);
  color: var(--color-accent-600);
}

.category-circle__image--icon svg {
  width: 44px;
  height: 44px;
}

.category-circle__label {
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--color-text);
}

/* Blog teaser grid (homepage section + blog index) */

.blog-teaser {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-xl);
}

.blog-teaser__item {
  display: flex;
  flex-direction: column;
}

.blog-teaser__image {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-sm);
}

.blog-teaser__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-teaser__body time {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.blog-teaser__body h3 {
  margin: var(--space-2xs) 0 var(--space-xs);
  font-size: var(--text-lg);
}

.blog-teaser__body h3 a {
  color: var(--color-text);
  text-decoration: none;
}

.blog-teaser__body h3 a:hover {
  color: var(--color-accent-600);
}

.blog-teaser__body p {
  color: var(--color-text-muted);
  margin-bottom: 0;
}

/* Single blog post — the featured image sits in its own sticky column
   beside the text on wider screens, rather than stacked above it. */

.blog-post-page {
  max-width: 64rem;
  margin-inline: auto;
  padding-block: var(--space-2xl) var(--space-4xl);
}

.blog-post__header {
  max-width: var(--measure);
  margin-bottom: var(--space-2xl);
}

.blog-post__date {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

.blog-post__layout {
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: var(--space-2xl);
  align-items: start;
}

.blog-post__figure {
  position: sticky;
  top: calc(var(--site-header-height) + var(--space-lg));
  margin: 0;
}

.blog-post__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.blog-post__content.prose {
  max-width: none;
  margin-inline: 0;
  padding-block: 0;
}

@media (max-width: 800px) {
  .blog-post__layout {
    grid-template-columns: 1fr;
  }

  .blog-post__figure {
    position: static;
  }
}

.blog-post__back {
  margin-top: var(--space-xl);
}

/* Wiki Scrap accordion */

.wiki-scrap {
  padding-bottom: var(--space-3xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.wiki-accordion {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-surface-raised);
}

.wiki-accordion summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wiki-accordion summary::-webkit-details-marker {
  display: none;
}

.wiki-accordion summary::after {
  content: '+';
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-accent-500);
  font-size: var(--text-xl);
  transition: transform 0.25s var(--ease-out-quart);
}

.wiki-accordion[open] summary::after {
  transform: rotate(45deg);
}

.wiki-accordion__body {
  padding-top: var(--space-md);
  color: var(--color-text-muted);
}

.wiki-accordion__body p:last-child { margin-bottom: 0; }

/* Newsletter signup (footer, sitewide) */

.newsletter {
  background: var(--color-text);
  color: var(--color-text-on-accent);
  padding-block: var(--space-4xl);
  scroll-margin-top: calc(var(--site-header-height) + var(--space-lg));
}

.newsletter__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
}

.newsletter__text h2 {
  color: var(--color-text-on-accent);
  margin-bottom: var(--space-2xs);
}

.newsletter__text p {
  margin-bottom: 0;
  opacity: 0.9;
}

.newsletter__form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  flex: 0 1 28rem;
}

.newsletter__form input[type="email"] {
  flex: 1 1 14rem;
  min-width: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  padding: 0.65rem 1rem;
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  color: var(--color-text);
}

.newsletter .btn--primary:hover {
  background: var(--color-accent-400);
}

.newsletter .form-notice {
  background: var(--color-surface-raised);
  color: var(--color-text);
}

.newsletter .form-error {
  width: 100%;
  color: var(--color-text-on-accent);
  font-weight: 700;
}

#bestil {
  scroll-margin-top: calc(var(--site-header-height) + var(--space-lg));
}

/* =============================================================
   SINGLE PRODUCT
   ============================================================= */

.single-kort {
  padding-block: var(--space-2xl) var(--space-4xl);
}

.single-kort__grid {
  display: grid;
  gap: var(--space-2xl);
}

@media (min-width: 900px) {
  .single-kort__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

.single-kort__gallery {
  position: relative;
}

.single-kort__gallery img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.single-kort__gallery .wishlist-heart {
  top: var(--space-md);
  right: var(--space-md);
  width: 44px;
  height: 44px;
}

.single-kort__gallery .wishlist-heart svg {
  width: 22px;
  height: 22px;
}

.single-kort__meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-sm);
}

.single-kort__price {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--space-lg);
}

.single-kort__story {
  color: var(--color-text-muted);
  margin-bottom: var(--space-xl);
}

/* Order-request page (template-cart-checkout.php) */

.order-request-page { padding-block: var(--space-2xl) var(--space-4xl); }

.order-request-grid {
  display: grid;
  grid-template-columns: minmax(240px, 22rem) minmax(0, 34rem);
  gap: var(--space-2xl);
  align-items: start;
}

@media (max-width: 800px) {
  .order-request-grid {
    grid-template-columns: 1fr;
  }
}

.order-summary {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}

.order-summary h2 { font-size: var(--text-lg); margin-bottom: var(--space-md); }

.order-summary__list {
  list-style: none;
  margin: 0 0 var(--space-md);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.order-summary__item {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  font-size: var(--text-sm);
}

.order-summary__name em { color: var(--color-text-muted); font-style: normal; }
.order-summary__price { white-space: nowrap; font-weight: 600; }

.order-summary__total {
  display: flex;
  justify-content: space-between;
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-lg);
}

.order-summary__edit { margin: var(--space-md) 0 0; }

/* Order success state (template-cart-checkout.php, ?bestilt=1) */

.order-success {
  max-width: 30rem;
  margin-inline: auto;
  padding: var(--space-2xl) var(--space-xl) var(--space-3xl);
  text-align: center;
}

.order-success__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-lg);
  background: var(--color-success-bg);
  color: var(--color-success);
  border-radius: 50%;
}

.order-success h2 { margin-bottom: var(--space-sm); }

.order-success__lead {
  color: var(--color-text-muted);
  margin-bottom: var(--space-xl);
}

.order-success__summary {
  text-align: left;
  margin-bottom: var(--space-xl);
}

.order-success__summary .account-order { background: var(--color-surface); }

.order-success__note {
  padding: var(--space-lg);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-align: left;
  margin-bottom: var(--space-xl);
}

.order-success__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
}

/* Contact page (template-contact.php) */

.contact-page {
  max-width: 34rem;
  padding-block: var(--space-lg) var(--space-4xl);
}

/* Wishlist + customer account pages (rendered client-side from
   localStorage, see main.js) */

.wishlist-page {
  padding-block: var(--space-lg) var(--space-4xl);
}

.wishlist-page .card-grid[hidden],
.account-orders__list[hidden] {
  display: none;
}

.account-page {
  padding-block: var(--space-lg) var(--space-4xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-4xl);
}

.account-section .card-grid {
  /* auto-fill, not auto-fit — see the note on the base .card-grid rule:
     otherwise a single saved card stretches to fill the whole width. */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.catalog-empty--compact {
  padding: var(--space-xl);
  text-align: center;
}

.account-orders__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.account-order {
  background: var(--color-surface-raised);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}

.account-order__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}

.account-order__date {
  font-weight: 700;
  color: var(--color-text);
}

.account-order__total {
  font-weight: 700;
  color: var(--color-accent-600);
}

.account-order__items {
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

/* Order-request form */

.order-request {
  background: var(--color-surface-raised);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}

.order-request__intro { margin-bottom: var(--space-lg); }
.order-request__intro h3 { margin-bottom: var(--space-2xs); }
.order-request__intro p { color: var(--color-text-muted); margin-bottom: 0; }

.order-request__note {
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-accent-50);
  color: var(--color-accent-700) !important;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.form-row { margin-bottom: var(--space-md); }

.form-row label {
  display: block;
  font-weight: 700;
  font-size: var(--text-sm);
  margin-bottom: var(--space-2xs);
}

.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row input[type="password"],
.form-row textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  padding: 0.65rem 0.85rem;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
}

.form-row input:focus-visible,
.form-row textarea:focus-visible {
  outline: 2px solid var(--color-accent-500);
  outline-offset: 1px;
}

.form-row textarea { resize: vertical; min-height: 6rem; }

.form-row--error input,
.form-row--error textarea { border-color: var(--color-error); }

.form-error {
  color: var(--color-error);
  font-size: var(--text-sm);
  margin-top: var(--space-2xs);
}

.form-row__hint {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin-top: var(--space-2xs);
}

.account-edit__password-fieldset {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-block: var(--space-lg);
}

.account-edit__password-fieldset legend {
  font-weight: 700;
  padding-inline: var(--space-2xs);
}

.account-edit__password-fieldset .form-row:last-child {
  margin-bottom: 0;
}

.form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-notice {
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-lg);
  font-weight: 600;
}

.form-notice--success { background: var(--color-success-bg); color: var(--color-success); }
.form-notice--error { background: var(--color-error-bg); color: var(--color-error); }

.single-kort__sold {
  text-align: center;
  color: var(--color-text-muted);
  background: var(--color-surface-raised);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}

.single-kort__add-to-cart button.single_add_to_cart_button.button.alt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 12rem;
  min-height: 44px;
  padding: 0.75rem 1.5rem;
  background: var(--color-accent-500);
  color: var(--color-text-on-accent);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-base);
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s var(--ease-out-quart), box-shadow 0.2s var(--ease-out-quart), background-color 0.2s var(--ease-out-quart);
}

.single-kort__add-to-cart button.single_add_to_cart_button.button.alt:hover {
  background: var(--color-accent-600);
  color: var(--color-text-on-accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.single-kort__cart-note {
  margin-top: var(--space-sm);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.single-kort__add-to-cart .quantity {
  margin-right: var(--space-sm);
}

.single-kort__qty-fixed {
  margin-right: var(--space-md);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.single-kort__add-to-cart form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* Related cards (WooCommerce's default single-product/related.php,
   which — thanks to the content-product.php override — already
   renders our card-tile markup; this just gives its <ul> our grid). */

.related.products {
  margin-top: var(--space-3xl);
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--color-border);
}

.related.products > h2 {
  margin-bottom: var(--space-xl);
}

/* WooCommerce's own stylesheet styles ul.products.columns-N li.product with
   float + percentage widths at higher CSS specificity (3 classes) than a
   plain ".related.products ul.products" rule (2 classes) can override, so
   this matches that specificity and explicitly resets float/width. */
.related.products ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}

.related.products ul.products li.product {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}

/* =============================================================
   PAGES / PROSE
   ============================================================= */

.prose {
  max-width: var(--measure);
  margin-inline: auto;
  padding-block: var(--space-3xl);
}

/* .prose is used as a bare title/intro header on some templates
   (Kontakt, Sådan bestiller du), immediately followed by a separate
   content block — its own bottom padding already gives that transition
   enough room, so the next block's own top padding would just double
   it up into a much bigger gap than either was designed for alone. */
.prose + .section,
.prose + .contact-page {
  padding-top: 0;
}

.prose h2 { margin-top: var(--space-2xl); }

.prose figure {
  margin: 0 0 var(--space-xl);
}

.prose figure img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* =============================================================
   WOOCOMMERCE PAGINATION (default woocommerce_pagination() markup)
   ============================================================= */

.woocommerce-pagination {
  margin-top: var(--space-2xl);
}

.woocommerce-pagination ul.page-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: center;
}

.woocommerce-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0 0.5rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border-strong);
  color: var(--color-text);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--text-sm);
}

.woocommerce-pagination a.page-numbers:hover {
  border-color: var(--color-accent-500);
  color: var(--color-accent-600);
}

.woocommerce-pagination .page-numbers.current {
  background: var(--color-accent-500);
  border-color: var(--color-accent-500);
  color: var(--color-text-on-accent);
}

/* =============================================================
   FOOTER
   ============================================================= */

.site-footer {
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-2xl);
  padding-block: var(--space-3xl) var(--space-2xl);
}

.footer-col__brand {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--color-text);
  margin: 0 0 var(--space-sm);
}

.footer-col--brand p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  max-width: 26rem;
  margin-bottom: 0;
}

.footer-col h3 {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  margin: 0 0 var(--space-md);
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer-col a {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: var(--text-sm);
}

.footer-col a:hover { color: var(--color-accent-600); }

.footer-products li a {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-text);
}

.footer-products img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.footer-products em {
  display: block;
  font-style: normal;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.footer-search {
  display: flex;
  gap: var(--space-xs);
}

.footer-search input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  padding: 0.5rem 0.75rem;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  color: var(--color-text);
}

.footer-search button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border-strong);
  background: var(--color-surface-raised);
  color: var(--color-text-muted);
  cursor: pointer;
}

.footer-search button:hover { color: var(--color-accent-600); border-color: var(--color-accent-500); }

.site-footer__bottom {
  padding-block: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.site-footer__bottom small { color: var(--color-text-muted); font-size: var(--text-xs); }

/* =============================================================
   404
   ============================================================= */

.error-404 {
  text-align: center;
  padding-block: var(--space-4xl);
}

/* =============================================================
   CART TOAST ("added to cart" slide-in)
   ============================================================= */

.cart-toast {
  position: fixed;
  top: calc(var(--site-header-height) + var(--space-lg));
  right: var(--space-lg);
  z-index: var(--z-overlay);
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  max-width: 22rem;
  padding: var(--space-md) var(--space-lg);
  background: var(--color-surface-raised);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  translate: calc(100% + var(--space-lg)) 0;
  opacity: 0;
  transition: translate 0.35s var(--ease-out-quart), opacity 0.35s var(--ease-out-quart);
}

.cart-toast.is-visible {
  translate: 0 0;
  opacity: 1;
}

.cart-toast__text {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--color-text);
}

.cart-toast__text strong { font-weight: 700; }

.cart-toast__link {
  flex-shrink: 0;
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--color-accent-600);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.cart-toast__link:hover { color: var(--color-accent-700); }

.cart-toast__close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: auto;
  border-radius: 50%;
  color: var(--color-text-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.cart-toast__close:hover { background: var(--color-surface); color: var(--color-text); }

@media (max-width: 480px) {
  .cart-toast {
    left: var(--space-md);
    right: var(--space-md);
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cart-toast {
    transition: opacity 0.2s linear;
    translate: 0 0;
  }
}

/* =============================================================
   COOKIE BANNER
   ============================================================= */

.cookie-banner {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-overlay);
  background: var(--color-text);
  color: var(--color-text-on-accent);
  box-shadow: var(--shadow-lg);
}

.cookie-banner__inner {
  padding-block: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md) var(--space-xl);
}

.cookie-banner p {
  margin: 0;
  max-width: 62ch;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: inherit;
}

.cookie-banner a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-banner__form {
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .cookie-banner__inner {
    flex-direction: column;
    align-items: stretch;
  }
  .cookie-banner__form .btn {
    width: 100%;
  }
}

/* "Log ud" confirmation popup (woocommerce/myaccount/navigation.php) */

.logout-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  background: oklch(20% 0.02 55 / 0.5);
}

.logout-confirm-overlay[hidden] {
  display: none;
}

.logout-confirm-dialog {
  width: 100%;
  max-width: 24rem;
  background: var(--color-surface-raised);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2xl);
  text-align: center;
}

.logout-confirm-dialog h2 {
  margin: 0 0 var(--space-sm);
}

.logout-confirm-dialog p {
  color: var(--color-text-muted);
  margin: 0 0 var(--space-xl);
}

.logout-confirm-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
}

/* =============================================================
   MY ACCOUNT ("Min side") — WooCommerce's own account page/system.
   The page itself renders through page.php's .container.prose wrapper,
   widened here since a two-column login/register form and an orders
   table both need more room than the narrow reading measure.
   ============================================================= */

.woocommerce-account .prose {
  max-width: 64rem;
}

/* WooCommerce prints a generic h2 for every sub-section (address
   titles, etc.) — the sitewide h2 size (meant for full-width page
   headings) is much too large here, and long unbroken Danish compound
   words ("Faktureringsadresse") have nowhere to wrap at that size,
   overflowing straight into whatever sits next to them. */
.woocommerce-MyAccount-content h2 {
  font-size: var(--text-lg);
  margin: 0 0 var(--space-sm);
  overflow-wrap: break-word;
}

/* Sidebar layout: nav as a vertical list down the left, content to its
   right — rather than the horizontal row of tabs this used to be. */
.woocommerce-account .woocommerce {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xl);
}

.woocommerce-MyAccount-navigation {
  flex-shrink: 0;
  width: 220px;
}

.woocommerce-MyAccount-content {
  flex: 1;
  min-width: 0;
}

.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.woocommerce-MyAccount-navigation a {
  display: block;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-weight: 700;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.2s var(--ease-out-quart), background-color 0.2s var(--ease-out-quart);
}

.woocommerce-MyAccount-navigation a:hover {
  background: var(--color-surface-raised);
  color: var(--color-text);
}

.woocommerce-MyAccount-navigation-link.is-active a {
  background: var(--color-accent-500);
  color: var(--color-text-on-accent);
}

@media (max-width: 700px) {
  .woocommerce-account .woocommerce {
    flex-direction: column;
  }

  .woocommerce-MyAccount-navigation {
    width: 100%;
  }
}

/* The "Hej, X!" greeting folded into the page's own <h1> (page.php) —
   same size, weight and colour as "Min side" itself (inherited from
   h1), not styled as a secondary/muted element. */
.account-page-greeting {
  display: inline-block;
  margin-left: var(--space-sm);
}

/* Dashboard (woocommerce/myaccount/dashboard.php) */

.account-dashboard__highlight {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg);
  max-width: 26rem;
  background: var(--color-accent-50);
  border: 1.5px solid var(--color-accent-500);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--color-text);
  transition: border-color 0.2s var(--ease-out-quart), transform 0.2s var(--ease-out-quart), box-shadow 0.2s var(--ease-out-quart);
}

.account-dashboard__highlight:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.account-dashboard__arrow {
  margin-left: auto;
  font-size: var(--text-lg);
  color: var(--color-accent-600);
  flex-shrink: 0;
}

.account-dashboard__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-accent-500);
  color: var(--color-text-on-accent);
}

.account-dashboard__icon svg { width: 22px; height: 22px; }

.account-dashboard__card-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.account-dashboard__card-text strong {
  font-size: var(--text-base);
  color: var(--color-text);
}

/* Addresses (woocommerce/myaccount/my-address.php) */

.account-addresses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

.account-addresses__card {
  background: var(--color-surface-raised);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.account-addresses__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-md);
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}

.account-addresses__head a {
  flex-shrink: 0;
}

.account-addresses__card address {
  font-style: normal;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* A single dialog/modal-styled card — login shown by default, with a
   plain-text link that switches to registration and back. The two
   panels are toggled by CSS alone (:target for the anchor links, plus
   an .is-register fallback set server-side when a registration
   attempt just failed validation and reloaded this page) — no JS
   required, same as every other form on this site. */
.account-auth-modal {
  display: flex;
  justify-content: center;
  margin-top: var(--space-lg);
}

/* Shared "dialog card" box — .auth-panel is one of a toggled pair
   (login/register, hidden unless active); .auth-card is a single,
   always-visible card for the one-off auth screens (lost password,
   reset password, its confirmation). */
.auth-panel,
.auth-card {
  width: 100%;
  max-width: 30rem;
  margin-inline: auto;
  flex-direction: column;
  gap: var(--space-xl);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2xl);
}

.auth-panel { display: none; }
.auth-card { display: flex; }

.auth-panel .form-row,
.auth-card .form-row {
  margin-bottom: var(--space-lg);
}

.auth-panel .form-row:last-of-type,
.auth-card .form-row:last-of-type {
  margin-bottom: 0;
}

.auth-card--confirmation {
  text-align: center;
  align-items: center;
}

.auth-panel--login { display: flex; }

.auth-panel--register:target { display: flex; }
.account-auth-modal:has(.auth-panel--register:target) .auth-panel--login { display: none; }

.account-auth-modal.is-register .auth-panel--login { display: none; }
.account-auth-modal.is-register .auth-panel--register { display: flex; }

.account-auth-modal__header {
  text-align: center;
}

.account-auth-modal__header h2 {
  margin: 0 0 var(--space-2xs);
}

.account-auth-modal__header p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin: 0;
}

.account-auth-modal__switch {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.account-auth__row-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.account-auth__remember {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: 400;
}

.account-auth__lost-password {
  margin-top: var(--space-md);
  font-size: var(--text-sm);
}

/* Generic WooCommerce notices used across My Account (login errors,
   "no orders yet", etc.) — same visual language as this theme's own
   .form-notice. */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce-noreviews {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-lg);
  font-weight: 600;
  list-style: none;
  border-top: 0;
}

.woocommerce-message { background: var(--color-success-bg); color: var(--color-success); }
.woocommerce-error,
.woocommerce-error li { background: var(--color-error-bg); color: var(--color-error); }
.woocommerce-info { background: var(--color-surface-raised); color: var(--color-text-muted); }

/* WooCommerce's own ::before renders a WooCommerce-icon-font glyph
   positioned absolutely over the text — this theme doesn't load that
   icon font anywhere else, so without it this was just an empty box
   sitting on top of the message. */
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before {
  content: none;
}

.woocommerce-account .button,
.woocommerce-account .woocommerce-Button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.25rem;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border-strong);
  background: var(--color-surface-raised);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color 0.2s var(--ease-out-quart), color 0.2s var(--ease-out-quart);
}

.woocommerce-account .button:hover,
.woocommerce-account .woocommerce-Button:hover {
  border-color: var(--color-accent-500);
  color: var(--color-accent-600);
}

/* The actual form-submitting action (save account details, save
   address, etc.) reads as the primary thing to do on its page — the
   muted secondary style above is for navigational buttons (view order,
   browse products, pagination) instead. */
.woocommerce-account button[type='submit'].button {
  background: var(--color-accent-500);
  border-color: transparent;
  color: var(--color-text-on-accent);
}

.woocommerce-account button[type='submit'].button:hover {
  background: var(--color-accent-600);
  color: var(--color-text-on-accent);
}

.woocommerce-orders-table {
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-md);
  font-size: var(--text-sm);
}

.woocommerce-orders-table th,
.woocommerce-orders-table td {
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--color-border);
}

.woocommerce-MyAccount-content > table,
.woocommerce-MyAccount-content table.shop_table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.woocommerce-MyAccount-content table th,
.woocommerce-MyAccount-content table td {
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}