/* ==========================================================================
   TrackNordic – enkeltproduktside
   Styler WooCommerce's standard-markup (alle hooks bevaret).
   Alt er scoped til .tn-product, så resten af sitet ikke påvirkes.
   Accentfarven styres af --tn-acc og skifter automatisk til Tryg-rød
   på Tryg-specialtilbud (.tn-product--tryg).
   ========================================================================== */

.tn-product {
  --tn-bg: #f5f7fa;
  --tn-surface: #ffffff;
  --tn-border: rgba(0, 0, 0, 0.08);
  --tn-text: #0f1623;
  --tn-muted: #6b7a99;
  --tn-acc: #0096FF;
  --tn-acc-dark: #005ecb;
  --tn-acc-glow: rgba(0, 150, 255, 0.07);
  --tn-acc-border: rgba(0, 150, 255, 0.25);
  --tn-acc-shadow: rgba(0, 150, 255, 0.3);
  --tn-tryg: #DC0A16;
  --tn-ease: cubic-bezier(0.22, 1, 0.36, 1);

  position: relative;
  background: var(--tn-bg);
  color: var(--tn-text);
  font-family: 'Onest', sans-serif;
  overflow: hidden;
  overflow: clip; /* clip frem for hidden, så sticky-galleriet stadig virker */

  /* Full-bleed: bryd ud af temaets indholdscontainer, så den lyse
     sektion går helt til skærmens kanter i stedet for at stå som en boks */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Stylesheetet indlæses kun på produktsider. 100vw-full-bleed medregner
   scrollbarens bredde, så uden denne får siden en lille vandret scrollbar. */
body { overflow-x: clip; }

/* Skjul WooCommerce/temaets standard-breadcrumb i toppen af siden –
   skabelonen har sin egen inde i den lyse sektion, som undtages igen */
body .woocommerce-breadcrumb { display: none !important; }
body .tn-product .woocommerce-breadcrumb { display: block !important; }

/* ==========================================================================
   Neutralisering af WooCommerce's standardlayout
   Woo floater galleri og summary til 48% bredde hver – det ødelægger
   vores grid-kolonner (lille billede, smal titel). !important er nødvendig,
   fordi Woo's selektorer bl.a. bruger #content.
   ========================================================================== */

.tn-product div.images,
.tn-product .woocommerce-product-gallery {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  opacity: 1;
}

.tn-product div.summary {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
}

.tn-product form.cart div.quantity {
  float: none !important;
  margin: 0 !important;
}

.tn-product form.cart .button {
  float: none !important;
}

.tn-product img { max-width: 100%; height: auto; }

/* Tryg-specialtilbud bruger også den blå TrackNordic-accent.
   (Kun Tryg-chippen ved titlen beholder Tryg-rød som brandfarve.) */

/* Fint grid i baggrunden */
.tn-product::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

/* Drivende glød-kugler */
.tn-p-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  opacity: 0.55;
  animation: tn-p-orb-drift 14s ease-in-out infinite alternate;
}
.tn-p-orb--a { width: 480px; height: 480px; background: var(--tn-acc-glow); top: -160px; left: -120px; opacity: 1; }
.tn-p-orb--b { width: 420px; height: 420px; background: rgba(0, 150, 255, 0.10); bottom: -140px; right: -100px; animation-delay: -7s; }

@keyframes tn-p-orb-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(60px, 40px, 0) scale(1.12); }
}

.tn-p-wrap {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 40px 24px 96px;
}

/* ==========================================================================
   Indgangsanimationer
   Hero-elementerne animerer ved load (ren CSS). Sektionerne under folden
   (tabs, related, up-sells) afsløres på scroll via tn-single-product.js.
   ========================================================================== */

@keyframes tn-p-rise {
  from { opacity: 0; transform: translateY(42px) scale(0.98); filter: blur(8px); }
  to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes tn-p-fade-down {
  from { opacity: 0; transform: translateY(-18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes tn-p-slide-left {
  from { opacity: 0; transform: translateX(-40px) scale(0.98); filter: blur(8px); }
  to   { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
}

.tn-p-breadcrumb        { animation: tn-p-fade-down 0.6s var(--tn-ease) both; }
.tn-p-gallery           { animation: tn-p-slide-left 0.9s 0.1s var(--tn-ease) both; }

/* Summary-børnene stiger forskudt ind ét ad gangen */
.tn-p-summary > * { animation: tn-p-rise 0.8s var(--tn-ease) both; }
.tn-p-summary > *:nth-child(1) { animation-delay: 0.18s; }
.tn-p-summary > *:nth-child(2) { animation-delay: 0.26s; }
.tn-p-summary > *:nth-child(3) { animation-delay: 0.34s; }
.tn-p-summary > *:nth-child(4) { animation-delay: 0.42s; }
.tn-p-summary > *:nth-child(5) { animation-delay: 0.50s; }
.tn-p-summary > *:nth-child(6) { animation-delay: 0.58s; }
.tn-p-summary > *:nth-child(7) { animation-delay: 0.66s; }
.tn-p-summary > *:nth-child(n+8) { animation-delay: 0.74s; }

/* Scroll-afsløring (JS sætter .tn-observe ved load og .is-inview ved scroll,
   så indholdet forbliver synligt, hvis JS ikke kører) */
.tn-observe {
  opacity: 0;
  transform: translateY(46px) scale(0.98);
  filter: blur(8px);
  transition: opacity 0.8s var(--tn-ease), transform 0.8s var(--tn-ease), filter 0.8s var(--tn-ease);
  transition-delay: var(--tn-delay, 0s);
}
.tn-observe.is-inview {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* ==========================================================================
   Breadcrumb
   ========================================================================== */

.tn-product .woocommerce-breadcrumb {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--tn-muted);
  margin-bottom: 28px;
}
.tn-product .woocommerce-breadcrumb a {
  color: var(--tn-muted);
  text-decoration: none;
  transition: color 0.2s;
}
.tn-product .woocommerce-breadcrumb a:hover { color: var(--tn-acc); }

/* ==========================================================================
   Hero: galleri + summary
   ========================================================================== */

.tn-p-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  margin-bottom: 72px;
}

@media (max-width: 960px) {
  .tn-p-hero { grid-template-columns: 1fr; gap: 32px; }
}

/* ---- Galleri ---- */

.tn-p-gallery {
  position: sticky;
  top: 100px;
  background: var(--tn-surface);
  border: 1px solid var(--tn-border);
  border-radius: 24px;
  padding: 28px;
  overflow: hidden;
}

@media (max-width: 960px) {
  .tn-p-gallery { position: static; }
}

.tn-p-gallery-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, var(--tn-acc-glow) 0%, transparent 70%);
  pointer-events: none;
}

.tn-product .woocommerce-product-gallery { position: relative; z-index: 1; }

.tn-product .woocommerce-product-gallery__image img,
.tn-product .woocommerce-product-gallery__image--placeholder img {
  border-radius: 14px;
}

/* Zoom-trigger (lup) */
.tn-product .woocommerce-product-gallery__trigger {
  top: 6px;
  right: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
  z-index: 9;
}

/* Miniature-thumbnails (flexslider) */
.tn-product .flex-control-thumbs {
  display: flex;
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.tn-product .flex-control-thumbs li {
  width: auto !important;   /* Woo sætter width: 25% + float */
  float: none !important;
  flex: 0 0 74px;
}
.tn-product .flex-control-thumbs li img {
  border-radius: 10px;
  border: 2px solid transparent;
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 0.25s, border-color 0.25s, transform 0.25s var(--tn-ease);
}
.tn-product .flex-control-thumbs li img:hover { opacity: 1; transform: translateY(-2px); }
.tn-product .flex-control-thumbs li img.flex-active {
  opacity: 1;
  border-color: var(--tn-acc);
}

/* Tilbuds-badge */
.tn-product span.onsale {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 9;
  min-width: 0;
  min-height: 0;
  padding: 7px 14px;
  border-radius: 100px;
  background: var(--tn-acc);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  box-shadow: 0 8px 22px var(--tn-acc-shadow);
}

/* ---- Summary (højre kolonne) ---- */

.tn-p-summary { padding-top: 6px; }

/* Kicker + Tryg-chip (indsættes fra functions.php) */
.tn-summary-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.tn-tryg-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--tn-acc-border);
  color: var(--tn-tryg);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 13px;
  border-radius: 100px;
  box-shadow: 0 4px 14px rgba(220, 10, 22, 0.12);
}
.tn-tryg-chip img { height: 18px; width: auto; display: block; }

.tn-kicker {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tn-acc);
}
.tn-kicker a { color: inherit; text-decoration: none; }
.tn-kicker a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Titel */
.tn-product .product_title {
  font-family: 'Onest', sans-serif;
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--tn-text);
  margin: 0 0 12px;
}

/* Stjerner + anmeldelses-link */
.tn-product .woocommerce-product-rating {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.tn-product .star-rating span::before,
.tn-product .star-rating::before { color: #f59e0b; }
.tn-product .woocommerce-review-link {
  font-size: 12.5px;
  color: var(--tn-muted);
  text-decoration: none;
}
.tn-product .woocommerce-review-link:hover { color: var(--tn-acc); }

/* Pris */
.tn-product .summary .price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  font-family: 'Onest', sans-serif;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--tn-text);
  margin: 0 0 18px;
}
.tn-product .summary .price del {
  font-size: 18px;
  font-weight: 500;
  color: var(--tn-muted);
  opacity: 1;
}
.tn-product .summary .price ins {
  text-decoration: none;
  color: var(--tn-acc);
}

/* Kort beskrivelse */
.tn-product .woocommerce-product-details__short-description {
  font-size: 15px;
  font-weight: 300;
  color: var(--tn-muted);
  line-height: 1.65;
  margin-bottom: 22px;
}
.tn-product .woocommerce-product-details__short-description ul { padding-left: 18px; }

/* Lagerstatus */
.tn-product .stock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  margin: 0 0 16px;
}
.tn-product .stock.in-stock { color: #16a34a; }
.tn-product .stock.out-of-stock { color: var(--tn-tryg); }
.tn-product .stock.in-stock::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
}

/* ---- Add to cart-formular ---- */

.tn-product form.cart {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 12px;
  margin: 6px 0 24px;
}

/* Variantprodukter: tabel og variation-info fylder hele bredden */
.tn-product form.cart.variations_form { display: block; }

.tn-product .quantity {
  display: inline-flex;
}
.tn-product .quantity .qty {
  width: 86px;
  height: 54px;
  padding: 0 8px;
  border: 1px solid var(--tn-border);
  border-radius: 12px;
  background: #fff;
  font-family: 'Onest', sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  color: var(--tn-text);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.tn-product .quantity .qty:focus {
  outline: none;
  border-color: var(--tn-acc);
  box-shadow: 0 0 0 3px var(--tn-acc-glow);
}

.tn-product .single_add_to_cart_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 1;
  min-width: 220px;
  height: 54px;
  padding: 0 28px !important;
  border: none !important;
  border-radius: 12px !important;
  /* !important: temaets egne knap-regler må ikke fjerne den blå farve */
  background: var(--tn-acc) !important;
  color: #fff !important;
  font-family: 'Onest', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 12px 30px var(--tn-acc-shadow);
  transition: transform 0.3s var(--tn-ease), box-shadow 0.3s ease, filter 0.2s;
}
.tn-product .single_add_to_cart_button:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px var(--tn-acc-shadow);
  filter: brightness(1.06);
  color: #fff !important;
}
.tn-product .single_add_to_cart_button:active { transform: translateY(0); }
.tn-product .single_add_to_cart_button.disabled,
.tn-product .single_add_to_cart_button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

/* Variant-tabel */
.tn-product table.variations {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 14px;
}
.tn-product table.variations th.label {
  text-align: left;
  padding: 10px 16px 10px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--tn-text);
  vertical-align: middle;
  width: 1%;
  white-space: nowrap;
}
.tn-product table.variations td.value { padding: 6px 0; }
.tn-product table.variations select {
  width: 100%;
  max-width: 340px;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--tn-border);
  border-radius: 12px;
  background: #fff;
  font-family: 'Onest', sans-serif;
  font-size: 14px;
  color: var(--tn-text);
}
.tn-product table.variations select:focus {
  outline: none;
  border-color: var(--tn-acc);
  box-shadow: 0 0 0 3px var(--tn-acc-glow);
}
.tn-product .reset_variations {
  font-size: 12px;
  color: var(--tn-muted);
  margin-left: 10px;
}

.tn-product .woocommerce-variation-price .price { font-size: 24px; margin-bottom: 10px; }
.tn-product .woocommerce-variation-add-to-cart {
  display: flex;
  align-items: stretch;
  gap: 12px;
  flex-wrap: wrap;
}

/* Grouped products-tabel */
.tn-product table.group_table td,
.tn-product table.group_table th {
  padding: 12px 10px;
  border-bottom: 1px solid var(--tn-border);
  vertical-align: middle;
}
.tn-product table.group_table label { font-weight: 600; font-size: 14px; }
.tn-product table.group_table label a { color: var(--tn-text); text-decoration: none; }
.tn-product table.group_table label a:hover { color: var(--tn-acc); }

/* ---- Tryghedspunkter (indsættes fra functions.php) ---- */

.tn-trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0 0 24px;
}
@media (max-width: 560px) {
  .tn-trust { grid-template-columns: 1fr; }
}
.tn-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--tn-surface);
  border: 1px solid var(--tn-border);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--tn-text);
  line-height: 1.3;
}
.tn-trust-item svg { flex-shrink: 0; color: var(--tn-acc); }

/* ---- Meta (SKU / kategori / tags) ---- */

.tn-product .product_meta {
  padding-top: 18px;
  border-top: 1px solid var(--tn-border);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  color: var(--tn-muted);
}
.tn-product .product_meta a { color: var(--tn-acc); text-decoration: none; }
.tn-product .product_meta a:hover { text-decoration: underline; text-underline-offset: 3px; }
.tn-product .product_meta .sku { color: var(--tn-text); font-weight: 500; }

/* ==========================================================================
   Tabs (beskrivelse / yderligere info / anmeldelser)
   ========================================================================== */

.tn-product .woocommerce-tabs {
  margin: 0 0 72px;
}

.tn-product .woocommerce-tabs ul.wc-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 -1px;
  padding: 0;
  border: none;
  background: none;
}
.tn-product .woocommerce-tabs ul.wc-tabs::before,
.tn-product .woocommerce-tabs ul.wc-tabs::after { display: none; }

.tn-product .woocommerce-tabs ul.wc-tabs {
  padding: 0 !important;
}
.tn-product .woocommerce-tabs ul.wc-tabs li {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* Woo tegner "fane-hjørner" med li::before/::after – fjern dem */
.tn-product .woocommerce-tabs ul.wc-tabs li::before,
.tn-product .woocommerce-tabs ul.wc-tabs li::after {
  display: none !important;
}
.tn-product .woocommerce-tabs ul.wc-tabs li a {
  display: inline-flex;
  align-items: center;
  padding: 12px 22px;
  border: 1px solid var(--tn-border);
  border-radius: 100px;
  background: var(--tn-surface);
  color: var(--tn-muted);
  font-family: 'Onest', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.tn-product .woocommerce-tabs ul.wc-tabs li a:hover {
  color: var(--tn-acc);
  border-color: var(--tn-acc-border);
}
.tn-product .woocommerce-tabs ul.wc-tabs li.active a {
  /* !important: den aktive tab skal altid stå med blå baggrund og hvid tekst,
     uanset temaets egne tab-regler */
  background: var(--tn-acc) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 10px 26px var(--tn-acc-shadow);
}

.tn-product .woocommerce-Tabs-panel {
  margin-top: 16px;
  background: var(--tn-surface);
  border: 1px solid var(--tn-border);
  border-radius: 20px;
  /* !important: indholdet skal have luft til alle sider og ikke ramme
     panelets runde hjørner, uanset temaets/Woo's egne panel-regler */
  padding: 36px 38px !important;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: #374151;
}
@media (max-width: 640px) {
  .tn-product .woocommerce-Tabs-panel { padding: 24px 22px !important; }
}

/* Skjul de duplikerede overskrifter i beskrivelse/yderligere info
   (fanens navn står allerede i pillen ovenover) */
.tn-product .woocommerce-Tabs-panel--description > h2:first-child,
.tn-product .woocommerce-Tabs-panel--additional_information > h2:first-child { display: none; }

.tn-product .woocommerce-Tabs-panel h2,
.tn-product .woocommerce-Tabs-panel h3 {
  font-family: 'Onest', sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--tn-text);
}

/* Attribut-tabel (yderligere information) */
.tn-product table.woocommerce-product-attributes {
  width: 100%;
  border-collapse: collapse;
}
.tn-product table.woocommerce-product-attributes th,
.tn-product table.woocommerce-product-attributes td {
  padding: 12px 14px;
  border: none;
  border-bottom: 1px solid var(--tn-border);
  font-style: normal;
  background: none;
}
.tn-product table.woocommerce-product-attributes th {
  text-align: left;
  font-weight: 600;
  color: var(--tn-text);
  width: 32%;
}
.tn-product table.woocommerce-product-attributes tr:last-child th,
.tn-product table.woocommerce-product-attributes tr:last-child td { border-bottom: none; }

/* ---- Anmeldelser ---- */

.tn-product #reviews .commentlist {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tn-product #reviews .commentlist li .comment_container {
  display: flex;
  gap: 16px;
  background: var(--tn-bg);
  border: 1px solid var(--tn-border);
  border-radius: 16px;
  padding: 18px 20px;
}
.tn-product #reviews .commentlist li img.avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: none;
  padding: 0;
  position: static;
}
.tn-product #reviews .comment-text {
  margin: 0 !important;
  border: none !important;
  padding: 0 !important;
  flex: 1;
}
.tn-product #reviews .comment-text .meta {
  font-size: 12.5px;
  color: var(--tn-muted);
  margin-bottom: 6px;
}
.tn-product #reviews .comment-text .woocommerce-review__author {
  color: var(--tn-text);
  font-weight: 600;
}

/* Anmeldelsesformular */
.tn-product #review_form .comment-reply-title {
  font-family: 'Onest', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--tn-text);
}
.tn-product #review_form input[type="text"],
.tn-product #review_form input[type="email"],
.tn-product #review_form textarea {
  width: 100%;
  border: 1px solid var(--tn-border);
  border-radius: 12px;
  background: #fff;
  padding: 12px 14px;
  font-family: 'Onest', sans-serif;
  font-size: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.tn-product #review_form input:focus,
.tn-product #review_form textarea:focus {
  outline: none;
  border-color: var(--tn-acc);
  box-shadow: 0 0 0 3px var(--tn-acc-glow);
}
.tn-product #review_form .form-submit .submit {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 26px;
  border: none;
  border-radius: 12px;
  background: var(--tn-acc);
  color: #fff;
  font-family: 'Onest', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 26px var(--tn-acc-shadow);
  transition: transform 0.3s var(--tn-ease), filter 0.2s;
}
.tn-product #review_form .form-submit .submit:hover { transform: translateY(-2px); filter: brightness(1.06); }

/* ==========================================================================
   Related products + up-sells
   ========================================================================== */

.tn-product .related.products,
.tn-product .up-sells.products {
  margin-top: 24px;
}

.tn-product .related.products > h2,
.tn-product .up-sells.products > h2 {
  font-family: 'Onest', sans-serif;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--tn-text);
  margin: 0 0 34px;
}

.tn-product .related.products ul.products,
.tn-product .up-sells.products ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.tn-product ul.products::before,
.tn-product ul.products::after { display: none; }

.tn-product ul.products li.product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  background: var(--tn-surface);
  border: 1px solid var(--tn-border);
  border-radius: 20px;
  padding: 22px 22px 24px;
  text-align: left;
  transition: transform 0.4s var(--tn-ease), box-shadow 0.4s ease, border-color 0.3s ease;
}
.tn-product ul.products li.product:hover {
  transform: translateY(-8px);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.10);
  border-color: var(--tn-acc-border);
}

.tn-product ul.products li.product a img {
  width: 100%;
  height: 210px;
  object-fit: contain;
  border-radius: 12px;
  margin-bottom: 14px;
  transition: transform 0.4s var(--tn-ease);
}
.tn-product ul.products li.product:hover a img { transform: scale(1.05); }

.tn-product ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Onest', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--tn-text);
  padding: 0;
  margin-bottom: 6px;
}
.tn-product ul.products li.product .star-rating { margin: 0 0 6px; }
.tn-product ul.products li.product .price {
  font-family: 'Onest', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--tn-text);
  margin-bottom: 14px;
}
.tn-product ul.products li.product .price ins { text-decoration: none; color: var(--tn-acc); }
.tn-product ul.products li.product .button {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 10px;
  background: var(--tn-acc-glow);
  border: 1px solid var(--tn-acc-border);
  color: var(--tn-acc);
  font-family: 'Onest', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.tn-product ul.products li.product .button:hover {
  background: var(--tn-acc);
  border-color: var(--tn-acc);
  color: #fff;
}
.tn-product ul.products li.product .onsale {
  position: absolute;
  top: 16px;
  left: 16px;
}
.tn-product ul.products li.product { position: relative; }

/* ==========================================================================
   Reduceret bevægelse
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .tn-product *,
  .tn-product *::before,
  .tn-product *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
  }
  .tn-observe { opacity: 1; transform: none; filter: none; }
}