:root {
  --dp-bg: #fbfaf7;
  --dp-text: #132440;
  --dp-text-soft: rgba(19, 36, 64, 0.68);
  --dp-text-muted: rgba(19, 36, 64, 0.52);
  --dp-accent: #6a5ae0;
  --dp-accent-strong: #5b3fd6;
  --dp-accent-light: #5eccff;
  --dp-gold: #f0c97a;
  --dp-surface: rgba(255, 255, 255, 0.92);
  --dp-border: rgba(19, 36, 64, 0.1);
  --dp-border-soft: rgba(19, 36, 64, 0.06);
  --dp-shadow-soft: 0 18px 50px rgba(57, 44, 115, 0.08);
  --dp-shadow-medium: 0 28px 80px rgba(57, 44, 115, 0.14);
  --dp-width: min(1200px, calc(100vw - 2rem));
  --dp-width-wide: min(1520px, calc(100vw - 2rem));
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Poppins", sans-serif;
  background: var(--dp-bg);
  color: var(--dp-text);
}

body.dp-nav-open {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
}

.dp-site-shell,
.dp-home,
.dp-product-template,
.dp-preview-template {
  width: 100%;
}

.dp-topbar-wrap {
  position: relative;
  z-index: 40;
}

.dp-topbar {
  background: rgba(94, 204, 255, 0.4);
  color: #111;
}

.dp-topbar__inner {
  overflow: hidden;
}

.dp-topbar__track {
  display: flex;
  align-items: center;
  gap: 150px;
  width: max-content;
  white-space: nowrap;
  padding: 6px 0;
  will-change: transform;
  animation: dp-marquee 30s linear infinite;
}

.dp-topbar__item {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

@keyframes dp-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-50%));
  }
}

.dp-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid rgba(19, 36, 64, 0.06);
  backdrop-filter: blur(16px);
}

.admin-bar .dp-header {
  top: 32px;
}

.dp-header__inner {
  width: var(--dp-width);
  margin: 0 auto;
  min-height: 86px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 28px;
  align-items: center;
}

.dp-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.dp-brand img {
  width: auto;
  max-width: 160px;
  max-height: 58px;
}

.dp-brand__fallback,
.dp-footer-brand__fallback {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #132440;
}

.dp-brand__fallback {
  font-size: 1.55rem;
}

.dp-nav {
  justify-self: center;
  min-width: 0;
}

.dp-nav__backdrop,
.dp-nav__panel-head,
.dp-nav__close,
.dp-nav__blog-feature,
.dp-nav__lang,
.dp-nav__footer {
  display: none;
}

.dp-nav__panel,
.dp-nav__panel-body,
.dp-nav__menu-wrap {
  display: flex;
  align-items: center;
}

.dp-nav__social-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dp-nav__list {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.dp-nav__list a {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
  color: #1a1a1a;
}

.dp-nav__mobile-only {
  display: none !important;
}

.dp-header__actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Apple "liquid glass" header button — neutral frosted chip. */
.dp-header__blog {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(19, 36, 64, 0.12);
  border-radius: 12px;
  text-decoration: none;
  color: var(--dp-text);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(245, 243, 255, 0.5) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 6px 18px rgba(19, 36, 64, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.dp-header__blog span {
  font-size: 0.96rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.dp-header__blog:hover {
  transform: translateY(-1px);
  border-color: rgba(91, 63, 214, 0.28);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(243, 240, 255, 0.65) 100%);
  box-shadow: 0 10px 26px rgba(91, 63, 214, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.dp-header__icon-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  text-decoration: none;
  color: #1a1a1a;
}

.dp-header__icon-link svg {
  width: 22px;
  height: 22px;
}

.dp-header__icon-link strong {
  position: absolute;
  top: 4px;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #1a1a1a;
  color: #fff;
  font-size: 10px;
  line-height: 18px;
  text-align: center;
}

.dp-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(19, 36, 64, 0.12);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(245, 243, 255, 0.5) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 6px 18px rgba(19, 36, 64, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  padding: 0;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.dp-nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: #132440;
  border-radius: 999px;
  transform-origin: center;
  transition: transform 0.18s ease, opacity 0.18s ease, width 0.18s ease;
}

.dp-nav-toggle span + span {
  margin-top: 0;
}

.dp-nav-toggle:hover,
.dp-nav-toggle:focus-visible {
  border-color: rgba(91, 63, 214, 0.28);
  box-shadow: 0 10px 26px rgba(91, 63, 214, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  outline: none;
}

.dp-nav-toggle[aria-expanded="true"] {
  background: rgba(91, 63, 214, 0.06);
  border-color: rgba(91, 63, 214, 0.2);
}

.dp-nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.dp-nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.dp-nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.dp-site-notices {
  width: 100%;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(19, 36, 64, 0.08);
}

.dp-site-notices__inner {
  width: var(--dp-width);
  margin: 0 auto;
  padding: 12px 0 4px;
}

.dp-site-notices .woocommerce-notices-wrapper {
  margin: 0;
}

.dp-site-notices .woocommerce-error,
.dp-site-notices .woocommerce-message,
.dp-site-notices .woocommerce-info {
  margin: 0 0 10px;
  border-radius: 14px;
  border: 1px solid rgba(19, 36, 64, 0.08);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 10px 24px rgba(19, 36, 64, 0.04);
}

.dp-footer {
  color: #132440;
  background: #fff;
}

/* The Aug 2026 artwork is a single 1500×700 paper sheet, not a tile — it is
   scaled to cover instead of repeated at a fixed 1900×530, which used to show
   a visible seam wherever the footer was taller or the viewport wider. */
.dp-footer-main-bg {
  width: 100%;
  background-image:
    var(--dp-footer-pattern, none),
    linear-gradient(180deg, rgba(255, 248, 241, 0.94) 0%, rgba(255, 253, 249, 0.96) 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: center center, center;
  background-size: cover, cover;
}

.dp-footer-inner {
  width: var(--dp-width);
  margin: 0 auto;
  padding: 100px 0 90px;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1.2fr;
  gap: 70px;
}

.dp-footer-brand img {
  width: auto;
  max-width: 300px;
  max-height: 176px;
  margin-bottom: 14px;
}

.dp-footer-brand__fallback {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 2.4rem;
}

.dp-footer-brand p {
  max-width: 360px;
  font-size: 15px;
  line-height: 1.6;
  opacity: 0.85;
}

.dp-footer-subtext {
  margin-top: 12px;
  font-size: 14px;
  opacity: 0.75;
}

.dp-footer-links h4,
.dp-footer-newsletter h4 {
  margin: 0 0 15px;
  font-size: 16px;
  font-weight: 600;
}

.dp-footer-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dp-footer-links li {
  margin-bottom: 10px;
}

.dp-footer-links a {
  text-decoration: none;
  font-size: 14px;
  opacity: 0.8;
}

.dp-footer-links a:hover,
.dp-footer-legal a:hover {
  color: var(--dp-accent);
  opacity: 1;
}

.dp-trustpilot-footer {
  margin-top: 24px;
}

.dp-trustpilot-footer__badge {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border: 1px solid rgba(19, 36, 64, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 8px 20px rgba(19, 36, 64, 0.05);
}

.dp-trustpilot-footer__stars {
  color: #00b67a;
  font-size: 15px;
  letter-spacing: 1.2px;
}

.dp-trustpilot-footer__copy {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.dp-trustpilot-footer__label {
  font-size: 13px;
  font-weight: 700;
}

.dp-trustpilot-footer__sub {
  font-size: 12px;
  opacity: 0.68;
}

.dp-social-title {
  font-size: 13px;
  margin-top: 18px;
  margin-bottom: 10px;
  opacity: 0.75;
}

.dp-footer-social {
  margin-top: 8px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.dp-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  opacity: 1 !important;
}

.dp-footer-social img,
.dp-footer-social__icon {
  display: block;
  width: 46px;
  height: 46px;
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
  mix-blend-mode: normal !important;
  object-fit: contain;
  transition: transform 0.15s ease;
}

.dp-footer-social img:hover,
.dp-footer-social__icon:hover {
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
  transform: translateY(-3px) scale(1.05);
}

.dp-footer-newsletter p {
  margin: 0 0 15px;
  font-size: 14px;
  opacity: 0.8;
}

/* One pill holding the field and the button, matching the chips and CTAs used
   everywhere else — the old square 4px pair belonged to a different site. */
.dp-newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dp-newsletter-form__row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 5px 5px 6px;
  border: 1px solid rgba(19, 36, 64, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: border-color 0.18s ease, box-shadow 0.2s ease;
}

.dp-newsletter-form__row:focus-within {
  border-color: rgba(106, 90, 224, 0.45);
  box-shadow:
    0 0 0 3px rgba(106, 90, 224, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.dp-newsletter-form input[type="email"] {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border: none;
  background: none;
  font-size: 14px;
  color: var(--dp-text);
}

.dp-newsletter-form input[type="email"]:focus {
  outline: none;
}

.dp-newsletter-form input[type="email"]::placeholder {
  color: var(--dp-text-muted);
}

/* Honeypot. Off-screen rather than display:none — some bots skip hidden
   fields, and screen readers never reach it (tabindex -1 + aria-hidden). */
.dp-newsletter-form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.dp-newsletter-form button {
  flex-shrink: 0;
  min-height: 40px;
  padding: 10px 20px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(135deg, rgba(111, 92, 246, 0.96), rgba(79, 70, 229, 0.97));
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.24);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.16s ease, opacity 0.18s ease;
}

.dp-newsletter-form button:hover:not(:disabled) {
  box-shadow: 0 12px 26px rgba(79, 70, 229, 0.32);
}

.dp-newsletter-form button:active:not(:disabled) {
  transform: scale(0.97);
}

.dp-newsletter-form button:disabled {
  opacity: 0.6;
  cursor: default;
}

.dp-footer-newsletter .dp-newsletter-form__status {
  display: flex;
  margin: 0;
  padding-inline: 4px;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 600;
}

.dp-newsletter-form__status[hidden] {
  display: none;
}

.dp-newsletter-form__status.is-success {
  color: #15803d;
}

.dp-newsletter-form__status.is-error {
  color: #b91c1c;
}

.dp-footer-newsletter .dp-newsletter-form__consent {
  margin: 0;
  padding-inline: 4px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--dp-text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .dp-newsletter-form button {
    transition: none;
  }

  .dp-newsletter-form button:active:not(:disabled) {
    transform: none;
  }
}

.dp-newsletter-payments {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dp-secure-text {
  font-size: 12px;
  opacity: 0.7;
}

.dp-payment-icons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  opacity: 0.95;
  max-width: 420px;
}

.dp-payment-icons img,
.dp-payment-icons__icon {
  width: auto;
  background: #ffffff;
  border: 1px solid var(--icon-border-color, rgba(0, 0, 0, 0.08));
  border-radius: 8px;
  padding: var(--icon-padding, 7px 10px);
  height: var(--icon-size, 38px);
  width: auto;
  display: block;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.dp-icon-visa {
  --icon-size: 42px;
  --icon-padding: 11px 6px;
  --icon-border-color: rgba(0, 0, 0, 0.08);
}

.dp-icon-mc {
  --icon-size: 45px;
  --icon-padding: 7px 11px;
  --icon-border-color: rgba(0, 0, 0, 0.08);
}

.dp-icon-vipps {
  --icon-size: 45px;
  --icon-padding: 1px 3px;
  --icon-border-color: rgba(0, 0, 0, 0.10);
}

.dp-icon-klarna {
  --icon-size: 45px;
  --icon-padding: 0px 0px;
  --icon-border-color: rgba(0, 0, 0, 0.10);
}

.dp-icon-paypal {
  --icon-size: 45px;
  --icon-padding: 7px 10px;
  --icon-border-color: rgba(0, 0, 0, 0.08);
}

.dp-icon-apple {
  --icon-size: 46px;
  --icon-padding: 8px 12px;
  --icon-border-color: rgba(0, 0, 0, 0.08);
}

.dp-icon-google {
  --icon-size: 46px;
  --icon-padding: 8px 12px;
  --icon-border-color: rgba(0, 0, 0, 0.08);
}

.dp-social-title--mobile,
.dp-footer-social--mobile {
  display: none;
}

.dp-footer-bottom {
  background: #fff;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.dp-footer-bottom-inner {
  width: var(--dp-width);
  margin: 0 auto;
  padding: 18px 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.dp-footer-company,
.dp-footer-legal {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  opacity: 0.78;
}

.dp-footer-legal a {
  text-decoration: none;
}

.dp-home {
  display: grid;
  gap: 0;
}

.dp-hero-section {
  position: relative;
  overflow: hidden;
  background-image: var(--dp-hero-bg-image, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #1a1a1a;
  padding: 64px 0 84px;
}

.dp-hero-inner {
  width: var(--dp-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 44px;
}

.dp-hero-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.dp-hero-media {
  flex: 1.25;
  order: -1;
}

/* Trustpilot proof card — phones only for now (see the ≤749px block, which is
   the only place it is switched on). */
.dp-hero-proof {
  display: none;
}

/* A breath, not a throb: ~2% of scale, held at rest for most of the cycle so
   it reads as alive rather than as something demanding a tap. The rotation is
   repeated in every keyframe because transform is one property — dropping it
   would snap the card straight mid-animation. */
@keyframes dp-hero-proof-pulse {
  0%,
  100% {
    transform: rotate(-7deg) scale(1);
  }

  50% {
    transform: rotate(-7deg) scale(1.022);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dp-hero-proof {
    animation: none;
  }
}

.dp-hero-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 15px;
  margin-bottom: 20px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2a255f;
}

.dp-hero-headline {
  margin: 0 0 16px;
  font-family: "Fredoka", "Poppins", sans-serif;
  font-size: 50px;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.01em;
}

.dp-hero-headline-line {
  display: block;
}

.dp-hero-highlight {
  display: inline-block;
  padding-right: 0.08em;
  background: linear-gradient(135deg, #5eccff 0%, #5537ff 52%, #6f00ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.dp-hero-subtitle {
  max-width: 370px;
  margin: 0 0 28px;
  font-size: 16px;
  line-height: 1.58;
  color: #3a3f6b;
}

.dp-hero-rating {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 26px;
}

.dp-hero-rating__stars {
  color: #ffb400;
  font-size: 17px;
  letter-spacing: 2px;
  line-height: 1;
}

.dp-hero-rating__text {
  font-size: 13px;
  font-weight: 600;
  color: #3a3f6b;
}

.dp-hero-actions {
  margin-bottom: 14px;
}

.dp-hero-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.dp-hero-btn-primary,
.dp-hero-btn-secondary,
.dp-home-discovery__primary-button,
.dp-home-discovery__guide-button,
.dp-product-cta__button,
.dp-steps-editorial__cta,
.dp-preview-empty__button,
.dp-personaliser-empty__button,
.dp-continue__btn--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 15px 34px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #6a5ae0, #5b3fd6);
  box-shadow: 0 10px 28px rgba(90, 63, 214, 0.26);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.dp-hero-btn-primary:hover,
.dp-hero-btn-secondary:hover,
.dp-home-discovery__primary-button:hover,
.dp-home-discovery__guide-button:hover,
.dp-product-cta__button:hover,
.dp-steps-editorial__cta:hover,
.dp-preview-empty__button:hover,
.dp-personaliser-empty__button:hover,
.dp-continue__btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(90, 63, 214, 0.32);
}

/* Apple "liquid glass" hero buttons */
.dp-hero-btn-primary,
.dp-continue__btn--primary,
.dp-steps-editorial__cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(122, 104, 255, 0.92) 0%, rgba(91, 63, 214, 0.88) 100%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
  box-shadow:
    0 8px 26px rgba(90, 63, 214, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -2px 6px rgba(58, 34, 168, 0.35);
}

/* Softened rectangle rather than the full pill the shared button base sets. */
.dp-steps-editorial__cta {
  border-radius: 18px;
}

/* glossy top highlight */
.dp-hero-btn-primary::before,
.dp-continue__btn--primary::before,
.dp-steps-editorial__cta::before {
  content: "";
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 42%;
  border-radius: 999px 999px 60% 60%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
  pointer-events: none;
  z-index: 2;
}

/* Highlight follows the squarer corner radius. */
.dp-steps-editorial__cta::before {
  border-radius: 17px 17px 60% 60%;
}

/* Light shine that sweeps across the primary hero CTA on a loop to draw the
   eye without being distracting. */
.dp-hero-btn-primary::after,
.dp-continue__btn--primary::after,
.dp-steps-editorial__cta::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 42%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 100%
  );
  transform: skewX(-18deg) translateX(-280%);
  animation: dp-hero-sheen 4.6s ease-in-out infinite;
  pointer-events: none;
  z-index: 3;
}

@keyframes dp-hero-sheen {
  0% {
    transform: skewX(-18deg) translateX(-280%);
  }
  55%, 100% {
    transform: skewX(-18deg) translateX(520%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dp-hero-btn-primary::after,
  .dp-continue__btn--primary::after,
  .dp-steps-editorial__cta::after {
    animation: none;
    display: none;
  }
}

.dp-hero-btn-primary:hover,
.dp-continue__btn--primary:hover,
.dp-steps-editorial__cta:hover {
  box-shadow:
    0 14px 36px rgba(90, 63, 214, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -2px 6px rgba(58, 34, 168, 0.4);
}

.dp-hero-btn-secondary {
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    0 6px 22px rgba(19, 36, 64, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  color: #202341;
}

.dp-hero-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.55);
  box-shadow:
    0 10px 28px rgba(19, 36, 64, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.dp-hero-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  max-width: 500px;
}

.dp-hero-benefit {
  flex: 1 1 220px;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: start;
  column-gap: 14px;
  min-height: 0;
  padding: 0;
}

.dp-hero-benefit__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  justify-self: center;
}

.dp-hero-benefit__icon svg {
  width: 56px;
  height: 56px;
}

.dp-hero-benefit__icon-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.dp-hero-benefit--shipping .dp-hero-benefit__icon {
  color: #138a5f;
}

.dp-hero-benefit--shipping .dp-hero-benefit__icon-image {
  transform: translateX(-4px);
}

/* SE hero PostNord icon — soften the square corners slightly. */
.dp-market-se .dp-hero-benefit--shipping .dp-hero-benefit__icon-image {
  border-radius: 6px;
}

/* UK homepage hero Amazon icon — slightly smaller than the default frame. */
.dp-market-uk.home .dp-hero-benefit--shipping .dp-hero-benefit__icon-image {
  transform: translateX(-4px) scale(1.1);
}

@media (min-width: 990px) {
  .dp-hero-benefit--shipping .dp-hero-benefit__icon-image {
    transform: translate(-3px, 2px);
  }

  .dp-market-uk .dp-hero-benefit--shipping .dp-hero-benefit__icon-image {
    transform: translate(-3px, 2px) scale(1.35);
  }

  .dp-hero-benefit--shipping .dp-hero-benefit__copy {
    transform: translate(4px, 3px);
  }

  .dp-hero-benefit--preview {
    transform: translateX(-52px);
  }
}

.dp-hero-benefit--preview .dp-hero-benefit__icon {
  color: #5b3fd6;
  transform: translateX(-3px);
}

.dp-hero-benefit__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding-top: 2px;
}

.dp-hero-benefit__copy strong {
  color: #202341;
  font-size: 0.93rem;
  font-weight: 700;
  line-height: 1.25;
}

.dp-hero-benefit__copy span {
  color: #5a5f8a;
  font-size: 0.8rem;
  line-height: 1.35;
}

.dp-hero-video-shell {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(19, 36, 64, 0.18);
}

.dp-hero-video-shell video,
.dp-hero-video-shell .dp-hero-image {
  width: 100%;
  display: block;
}

/* ── Hero video fallback play button ── */
.dp-hero-video-play {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  margin: 0;
  background: rgba(19, 36, 64, 0.18);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.dp-hero-video-play[hidden] {
  display: none !important;
}
.dp-hero-video-play.is-visible {
  opacity: 1;
}
.dp-hero-video-play__ring {
  position: absolute;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 24px rgba(19, 36, 64, 0.12);
  transition: transform 0.25s ease, background-color 0.25s ease;
}
.dp-hero-video-play:hover .dp-hero-video-play__ring,
.dp-hero-video-play:focus-visible .dp-hero-video-play__ring {
  transform: scale(1.08);
  background: rgba(255, 255, 255, 0.88);
}
.dp-hero-video-play__icon {
  position: relative;
  width: 28px;
  height: 28px;
  color: var(--dp-text, #132440);
  margin-left: 3px; /* optical centering for triangle */
}
@media (max-width: 699px) {
  .dp-hero-video-play__ring {
    width: 56px;
    height: 56px;
  }
  .dp-hero-video-play__icon {
    width: 22px;
    height: 22px;
    margin-left: 2px;
  }
}

.dp-home-discovery {
  background:
    radial-gradient(circle at top right, rgba(240, 201, 122, 0.18), transparent 26rem),
    radial-gradient(circle at top left, rgba(19, 36, 64, 0.08), transparent 24rem),
    #fbfaf7;
  color: var(--dp-text);
  padding: 64px 0 72px;
}

.dp-home-discovery__header,
.dp-featured-collection,
.dp-steps-editorial {
  width: var(--dp-width);
  margin: 0 auto;
}

.dp-home-discovery__eyebrow,
.dp-featured-collection__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(19, 36, 64, 0.08);
  background: rgba(255, 255, 255, 0.68);
  color: var(--dp-text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.dp-home-discovery__eyebrow::before,
.dp-featured-collection__eyebrow::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--dp-gold);
  box-shadow: 0 0 0 0.35rem rgba(240, 201, 122, 0.16);
}

.dp-home-discovery__header-main {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 1.15rem;
}

.dp-home-discovery__title,
.dp-featured-collection__header h2,
.dp-steps-editorial__heading {
  margin: 0;
  font-family: "Playfair Display", serif;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.dp-home-discovery__subtitle,
.dp-steps-editorial__subtext {
  margin: 0.9rem 0 0;
  max-width: 39rem;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--dp-text-soft);
}

.dp-home-discovery__view-all {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid rgba(19, 36, 64, 0.18);
  color: var(--dp-text);
  font-size: 0.98rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.dp-product-collection {
  background:
    linear-gradient(180deg, rgba(251, 250, 247, 0.95), rgba(251, 250, 247, 0.98)),
    var(--dp-product-section-bg-image, radial-gradient(circle at top right, rgba(240, 201, 122, 0.14), transparent 24rem));
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: auto, cover;
  color: var(--dp-text);
  padding: 64px 0 76px;
}

.dp-product-collection__header,
.dp-product-grid,
.dp-product-collection__empty {
  width: var(--dp-width);
  margin: 0 auto;
}

.dp-product-collection__eyebrow {
  margin: 0 0 14px;
  color: rgba(19, 36, 64, 0.54);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.dp-product-collection__header-main {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}

.dp-product-collection__title {
  margin: 0;
  font-family: "Playfair Display", serif;
  font-size: clamp(2.2rem, 4.8vw, 3.35rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.dp-product-collection__subtitle {
  max-width: 32rem;
  margin: 0.85rem 0 0;
  color: var(--dp-text-soft);
  font-size: 1rem;
  line-height: 1.68;
}

.dp-product-collection__view-all {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding-bottom: 0.18rem;
  border-bottom: 1px solid rgba(19, 36, 64, 0.18);
  color: var(--dp-text);
  font-size: 0.96rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.dp-product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem 1.3rem;
  margin-top: 2.2rem;
}

.dp-product-tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  background: transparent;
}

.dp-product-tile__media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  padding: 0.35rem 0.35rem 0.85rem;
  text-decoration: none;
}

.dp-product-tile__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.dp-product-tile__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 0.95rem;
  padding: 0;
}

.dp-product-tile__title {
  margin: 0;
  width: 100%;
  font-family: "Fredoka", "Poppins", sans-serif;
  font-size: 1.34rem;
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.01em;
  text-align: center;
}

.dp-product-tile__title a {
  display: -webkit-box;
  overflow: hidden;
  color: var(--dp-text);
  text-decoration: none;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.dp-product-tile__purchase {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.72rem;
  width: 100%;
  margin-top: auto;
}

.dp-product-tile__price {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.38rem;
  min-height: 1.4rem;
  color: #242743;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1;
}

.dp-product-tile__price .amount {
  font-weight: 700;
}

.dp-product-tile__price del {
  color: rgba(36, 39, 67, 0.46);
  font-size: 0.88em;
}

.dp-product-tile__price ins {
  color: inherit;
  text-decoration: none;
}

.dp-product-tile__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  min-height: 48px;
  margin-top: auto;
  padding: 0.84rem 1.35rem;
  border-radius: 8px;
  background: var(--dp-accent-strong);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(91, 63, 214, 0.18);
  transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, opacity 0.16s ease;
}

.dp-product-tile__button:hover {
  transform: translateY(-1px);
  background: var(--dp-accent);
  box-shadow: 0 14px 30px rgba(91, 63, 214, 0.24);
  opacity: 0.98;
}

/* ── Match badge + fact line (book finder results) ─────────────────────── */
.dp-product-tile--badged .dp-product-tile__media {
  position: relative;
}

.dp-product-tile__badge {
  position: absolute;
  top: 0.35rem;
  left: 0.35rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 0.34rem 0.7rem;
  border-radius: 999px;
  background: var(--dp-accent-strong);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 6px 16px rgba(91, 63, 214, 0.28);
}

.dp-product-tile__facts {
  margin: -0.35rem 0 0;
  color: var(--dp-text-muted);
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-align: center;
}

/* Finder results can legitimately return 1–3 books. A 4-column grid leaves a
   single tile stranded in the corner beside three empty columns, which reads
   as "we have nothing for your child" — so this variant centres the row. */
.dp-product-grid--finder {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.4rem 1.3rem;
}

.dp-product-grid--finder .dp-product-tile {
  /* height:100% resolves against an auto-height flex row, which stops the
     tiles stretching and leaves short tiles with a floating CTA. */
  height: auto;
  flex: 0 1 clamp(200px, calc(25% - 1rem), 262px);
}

/* A single top match gets room to actually look like the recommendation —
   but a lone "fits too" book must never outsize the matches above it. */
.dp-product-grid--finder .dp-product-tile:only-child {
  flex-basis: min(320px, 100%);
}

.fdb-results-page__also:not(.fdb-results-page__also--only) .dp-product-tile:only-child {
  flex-basis: clamp(200px, calc(25% - 1rem), 262px);
}

.dp-product-collection__empty {
  margin-top: 2.2rem;
  padding: 40px 0 10px;
  text-align: center;
}

.dp-product-collection__empty h2 {
  margin: 0 0 10px;
  font-family: "Playfair Display", serif;
  font-size: clamp(2rem, 3vw, 2.6rem);
  line-height: 1.08;
}

.dp-product-collection__empty p {
  max-width: 38rem;
  margin: 0 auto;
  color: var(--dp-text-soft);
  line-height: 1.7;
}

.dp-home-discovery__shell {
  width: var(--dp-width);
  margin: 2.5rem auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(19rem, 0.82fr);
  gap: 1rem;
  align-items: start;
}

.dp-home-discovery__feature-card,
.dp-home-discovery__guide,
.dp-home-discovery__support-card,
.dp-home-discovery__path,
.dp-featured-collection__card,
.dp-preview-empty,
.dp-personaliser-empty,
.woocommerce-cart .cart-collaterals,
.woocommerce .wc-block-cart,
.woocommerce .wc-block-checkout,
.woocommerce .woocommerce-notices-wrapper .woocommerce-message,
.woocommerce .woocommerce-notices-wrapper .woocommerce-error,
.woocommerce .woocommerce-notices-wrapper .woocommerce-info {
  border: 1px solid var(--dp-border);
  background: var(--dp-surface);
  box-shadow: var(--dp-shadow-soft);
}

.dp-home-discovery__feature-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.92fr);
  min-height: 100%;
  overflow: hidden;
  border-radius: 1.85rem;
}

.dp-home-discovery__feature-media,
.dp-home-discovery__support-media,
.dp-featured-collection__image {
  display: block;
  background: rgba(19, 36, 64, 0.06);
}

.dp-home-discovery__feature-media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 28rem;
  padding: 1.6rem;
  background: linear-gradient(180deg, rgba(233, 240, 255, 0.8), rgba(255, 255, 255, 0.92));
}

.dp-home-discovery__feature-image,
.dp-home-discovery__support-image,
.dp-featured-collection__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

.dp-home-discovery__feature-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.8rem;
}

.dp-home-discovery__meta-row,
.dp-home-discovery__support-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.dp-home-discovery__pill {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  background: rgba(19, 36, 64, 0.06);
  color: var(--dp-text);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
}

.dp-home-discovery__pill--soft {
  background: rgba(240, 201, 122, 0.22);
}

.dp-home-discovery__feature-label {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dp-text-muted);
}

.dp-home-discovery__feature-title,
.dp-home-discovery__guide-title,
.dp-home-discovery__support-title,
.dp-featured-collection__body h3 {
  margin: 0.2rem 0 0;
  font-family: "Playfair Display", serif;
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.dp-home-discovery__feature-title {
  font-size: clamp(2rem, 3vw, 2.75rem);
}

.dp-home-discovery__feature-copy,
.dp-home-discovery__guide-copy,
.dp-home-discovery__support-copy,
.dp-featured-collection__body {
  color: var(--dp-text-soft);
}

.dp-home-discovery__feature-copy,
.dp-home-discovery__guide-copy,
.dp-home-discovery__support-copy {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.72;
}

.dp-home-discovery__feature-foot,
.dp-home-discovery__guide-actions,
.dp-home-discovery__support-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.85rem;
}

.dp-home-discovery__secondary-link,
.dp-home-discovery__text-link,
.dp-featured-collection__link {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  text-decoration: none;
}

.dp-home-discovery__feature-note {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--dp-text-muted);
}

.dp-home-discovery__side {
  display: grid;
  gap: 1rem;
}

.dp-home-discovery__guide {
  padding: 1.4rem 1.35rem;
  border-radius: 1.6rem;
}

.dp-home-discovery__guide-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--dp-text-muted);
}

.dp-home-discovery__guide-eyebrow::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: #132440;
}

.dp-home-discovery__guide-title {
  margin: 0.45rem 0 0;
  font-size: 1.8rem;
}

.dp-home-discovery__guide-list {
  display: grid;
  gap: 0.5rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.dp-home-discovery__guide-list li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--dp-text-soft);
}

.dp-home-discovery__guide-list li::before {
  content: "";
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 999px;
  background: var(--dp-gold);
  flex-shrink: 0;
}

.dp-home-discovery__support-stack {
  display: grid;
  gap: 1rem;
}

.dp-home-discovery__support-card {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 1rem;
  overflow: hidden;
  border-radius: 1.45rem;
}

.dp-home-discovery__support-body {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 1rem 1rem 1rem 0;
}

.dp-home-discovery__support-title {
  font-size: 1.2rem;
}

.dp-home-discovery__support-title a,
.dp-featured-collection__body h3 a {
  text-decoration: none;
}

.dp-home-discovery__mini-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.8rem 1rem;
  border-radius: 999px;
  background: rgba(19, 36, 64, 0.06);
  font-weight: 700;
  text-decoration: none;
}

.dp-home-discovery__paths-wrap {
  margin-top: 1.35rem;
}

.dp-home-discovery__paths-title {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.dp-home-discovery__paths-copy {
  margin: 0.35rem 0 1rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--dp-text-soft);
}

.dp-home-discovery__paths {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.dp-home-discovery__path {
  display: grid;
  gap: 0.45rem;
  padding: 1.1rem;
  border-radius: 1.4rem;
  text-decoration: none;
}

.dp-home-discovery__path em {
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dp-text-muted);
}

.dp-home-discovery__path strong {
  font-size: 1rem;
}

.dp-home-discovery__path span {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--dp-text-soft);
}

/* Flat section — no background image; the tone matches the bestseller
   collection's base (#fbfaf7) so the two sections read as one surface. */
.dp-feature-hero {
  position: relative;
  overflow: hidden;
  padding: 72px 0;
  background: #fbfaf7;
  color: #1a1a1a;
}

.dp-feature-inner {
  position: relative;
  width: var(--dp-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 40px;
}

.dp-feature-left {
  flex: 1.3;
  position: relative;
}

.dp-feature-image-wrapper {
  position: relative;
  z-index: 1;
  border-radius: 18px;
  overflow: hidden;
}

.dp-feature-image-wrapper img,
.dp-feature-image {
  width: 100%;
  height: auto;
  display: block;
}

.dp-feature-right {
  flex: 1;
  position: relative;
  z-index: 1;
}

.dp-feature-title {
  margin: 0 0 14px;
  font-size: 38px;
  font-weight: 800;
  line-height: 1.1;
  color: #1a1a1a;
}

.dp-feature-title-line {
  display: inline-block;
}

.dp-feature-highlight {
  background: linear-gradient(90deg, #4f6bff, #7b3fe4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.dp-feature-copy {
  margin: 0 0 18px;
  max-width: 33ch;
  color: #3a3f6b;
  font-size: 15px;
  line-height: 1.65;
}

.dp-feature-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.dp-feature-btn-primary,
.dp-feature-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 999px;
}

/* Apple "liquid glass" feature buttons — same recipe as the product CTA. */
.dp-feature-btn-primary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 12px 28px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.02) 42%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(135deg, rgba(111, 92, 246, 0.96), rgba(79, 70, 229, 0.97));
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  box-shadow:
    0 14px 32px rgba(79, 70, 229, 0.32),
    0 4px 10px rgba(49, 46, 129, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -3px 8px rgba(49, 46, 129, 0.3);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: transform 0.2s ease, box-shadow 0.25s ease;
}

/* specular highlight across the top edge */
.dp-feature-btn-primary::before,
.dp-feature-btn-ghost::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 44%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0));
  opacity: 0.6;
  pointer-events: none;
}

.dp-feature-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 18px 38px rgba(79, 70, 229, 0.4),
    0 4px 10px rgba(49, 46, 129, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.48),
    inset 0 -3px 8px rgba(49, 46, 129, 0.34);
}

.dp-feature-btn-primary:active,
.dp-feature-btn-ghost:active {
  transform: translateY(0) scale(0.985);
}

.dp-feature-btn-ghost {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 12px 26px;
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    0 6px 22px rgba(19, 36, 64, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  color: #202341;
  font-size: 14px;
  font-weight: 600;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.25s ease;
}

.dp-feature-btn-ghost:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.58);
  box-shadow:
    0 10px 28px rgba(19, 36, 64, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Anchor target for the hero's "Bestselgere" link: keep the heading clear
   of the sticky header. */
.dp-product-collection--homepage {
  scroll-margin-top: 90px;
}

.dp-steps-editorial {
  position: relative;
  /* Wider than the default page column (set above) so the four step visuals
     stay large on desktop instead of being squeezed into 1200px. */
  width: var(--dp-width-wide);
  background: #fafafa;
  padding: clamp(56px, 6vw, 84px) 0 clamp(48px, 5vw, 72px);
  overflow: hidden;
}

.dp-steps-editorial__header {
  max-width: 620px;
  margin: 0 auto clamp(36px, 4.5vw, 60px);
  text-align: center;
  padding: 0 24px;
}

.dp-steps-editorial__eyebrow {
  display: inline-block;
  margin: 0 0 12px;
  color: var(--dp-accent);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.dp-steps-editorial__grid {
  max-width: 1520px;
  margin: 0 auto;
  /* The artwork carries its own transparent padding, so the columns sit
     almost flush — that whitespace *is* the gutter, and letting it do the
     work keeps each image as large as the column allows. */
  padding: 0 8px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(4px, 0.8vw, 14px);
  row-gap: 0;
  align-items: start;

  /* Desktop lets the artwork spill past its column — what spills is the
     PNG's transparent margin, so nothing collides and the subjects render
     noticeably larger. Dialled back at narrower breakpoints below. */
  --dp-step-boost: 1.27;
}

/* Per-step size correction.
   The four PNGs share a 2:1 canvas but their subjects fill wildly different
   fractions of it (3 is 80% wide, 4 only 48%), so rendering them at one
   uniform width makes step 4 look half the size of step 3. Each factor is
   1/sqrt(subject area), normalised so the largest is 1 — that equalises
   visual mass and guarantees no step exceeds the frame width, which is what
   keeps the phone layout from overflowing. Re-measure if the art changes. */
.dp-steps-editorial__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  --dp-step-fill: 1;
}

.dp-steps-editorial__item:nth-child(1) {
  --dp-step-fill: 0.904;
}

.dp-steps-editorial__item:nth-child(2) {
  --dp-step-fill: 1;
}

.dp-steps-editorial__item:nth-child(3) {
  --dp-step-fill: 0.789;
}

.dp-steps-editorial__item:nth-child(4) {
  --dp-step-fill: 0.947;
}

/* Zigzag: steps 2 and 4 drop down so the row reads as a wave rather than a
   straight line. Scales with the viewport so the offset stays proportional
   to how tall the visuals actually render. */
.dp-steps-editorial__item:nth-child(even) {
  margin-top: clamp(52px, 7vw, 104px);
}

.dp-steps-editorial__visual {
  position: relative;
  width: 100%;
  margin-bottom: clamp(14px, 1.5vw, 22px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Soft colour bloom behind the artwork, one tint per step. */
.dp-steps-editorial__visual::before {
  content: "";
  position: absolute;
  width: 68%;
  aspect-ratio: 1 / 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  opacity: 0.32;
  filter: blur(34px);
  background: rgba(106, 90, 224, 0.3);
}

.dp-steps-editorial__item:nth-child(2) .dp-steps-editorial__visual::before {
  background: rgba(79, 175, 255, 0.3);
}

.dp-steps-editorial__item:nth-child(3) .dp-steps-editorial__visual::before {
  background: rgba(208, 142, 200, 0.25);
}

.dp-steps-editorial__item:nth-child(4) .dp-steps-editorial__visual::before {
  background: rgba(240, 201, 122, 0.28);
}

/* All four files share a 2:1 canvas, so a plain width:100% renders them at
   identical size — no aspect-ratio box needed, and nothing gets letterboxed
   down to half the height the way a 1:1 frame did. */
.dp-steps-editorial__img {
  position: relative;
  z-index: 1;
  display: block;
  /* max-width:none overrides the global img reset and flex-shrink:0 stops the
     flex parent clawing the width back — the boost is meant to exceed 100% of
     the column on desktop. */
  width: calc(100% * var(--dp-step-boost, 1) * var(--dp-step-fill, 1));
  max-width: none;
  flex-shrink: 0;
  height: auto;
  transition: transform 0.4s ease;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.09));
}

.dp-steps-editorial__item:hover .dp-steps-editorial__img {
  transform: translateY(-4px) scale(1.025);
}

/* Number sits inline beside the label rather than floating over the image. */
.dp-steps-editorial__caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.dp-steps-editorial__num {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--dp-accent), var(--dp-accent-strong));
  box-shadow: 0 4px 14px rgba(106, 90, 224, 0.35);
  font-size: 14px;
  font-weight: 700;
}

.dp-steps-editorial__title {
  margin: 0;
  color: var(--dp-text);
  font-size: clamp(16px, 1.35vw, 20px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-align: left;
}

.dp-steps-editorial__text {
  max-width: 30ch;
  margin: 10px auto 0;
  color: #3a3f6b;
  opacity: 0.68;
  font-size: clamp(13.5px, 1vw, 15px);
  line-height: 1.55;
}

.dp-steps-editorial__cta-wrap {
  margin-top: clamp(40px, 5.5vw, 64px);
  text-align: center;
  padding: 0 24px;
}

.dp-product-template {
  padding: 28px 0 84px;
}

.dp-product-hero,
.dp-product-story,
.dp-product-faq {
  width: var(--dp-width);
  margin: 0 auto;
}

.dp-product-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: 34px;
  align-items: start;
}

.dp-product-hero__media .woocommerce-product-gallery {
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  opacity: 1 !important;
}

/* ── Custom product gallery (dp-gallery) ───────────────────────────────────
   Replaces WooCommerce FlexSlider with a native CSS scroll-snap gallery.
   Mobile-first: horizontal snap-scroll slider + arrow/counter below.
   Desktop: active-only image view + overlaid side arrows + thumbnail strip. */

/* Stage wraps the scrollable track and desktop side-arrow buttons.
   No visible background — images fill edge-to-edge with object-fit:cover. */
.dp-gallery__stage {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  overflow: hidden;
  background: #f8f8fa;
}

/* Scrollable track — all slides visible as flex items on mobile. */
.dp-gallery__track {
  display: flex;
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.dp-gallery__track::-webkit-scrollbar {
  display: none;
}

/* Each slide fills the full stage width. */
.dp-gallery__slide {
  flex: 0 0 100%;
  height: 100%;
  scroll-snap-align: start;
}

/* Product image inside each slide — fills the frame edge-to-edge. */
.dp-gallery__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Side arrows — overlaid on each side of the image, vertically centered.
   Clean and simple: solid white circle, thin border, soft shadow. */
.dp-gallery__side-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
  color: #111827;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.16);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s ease, opacity 0.2s ease, transform 0.15s ease;
}
.dp-gallery__side-btn--prev { left: 10px; }
.dp-gallery__side-btn--next { right: 10px; }
.dp-gallery__side-btn:active:not(:disabled) {
  transform: translateY(-50%) scale(0.92);
}
.dp-gallery__side-btn:hover:not(:disabled) {
  border-color: rgba(124, 99, 248, 0.35);
}
.dp-gallery__side-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.dp-gallery__side-btn:focus-visible {
  outline: 2px solid #7c63f8;
  outline-offset: 3px;
}

/* Counter pill overlaid at the bottom of the image (mobile). */
.dp-gallery__count-pill {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  padding: 3px 11px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.55);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  pointer-events: none;
  user-select: none;
}

/* Thumbnail strip — hidden on mobile. */
.dp-gallery__thumbs {
  display: none;
}
.dp-gallery__thumb {
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  border: 2px solid transparent;
  background: #f4f3fb;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s ease, opacity 0.15s ease;
}
.dp-gallery__thumb-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Empty state (product has no images). */
.dp-gallery--empty {
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  background: #f4f3fb;
}

.dp-product-hero__content {
  position: relative;
}

.dp-product-hero__title {
  margin: 0 0 10px;
  font-family: "Fredoka", "Poppins", sans-serif;
  font-size: clamp(2.4rem, 4.8vw, 3.5rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
}

/* ── Star rating row under title (social proof at decision point) ─────────── */
.dp-product-hero__rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.dp-product-hero__rating-stars {
  color: #ffb01e;
  font-size: 0.98rem;
  letter-spacing: 0.06em;
  line-height: 1;
}

.dp-product-hero__rating-text {
  color: #475569;
  font-size: 0.86rem;
  font-weight: 600;
}

.dp-product-hero__rating:hover .dp-product-hero__rating-text {
  color: #1f2937;
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.dp-product-hero__price {
  margin-bottom: 6px;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* ── Price value frame ───────────────────────────────────────────────────── */
.dp-product-hero__price-note {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 20px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(106, 90, 224, 0.18);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow:
    0 6px 20px rgba(57, 44, 115, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  color: var(--dp-text-soft);
  font-size: 0.85rem;
  font-weight: 600;
}

.dp-product-hero__price-note svg {
  flex-shrink: 0;
  color: #10b981;
}

/* ── Description card wrapper ────────────────────────────────────────────── */
.dp-product-hero__description-wrap {
  position: relative;
  margin-bottom: 20px;
  padding: 20px 22px 22px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(15, 23, 42, 0.07);
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.05);
}

/* Collapsed state: clamp visible text height + show fade gradient */
.dp-product-hero__description-wrap.is-collapsible.is-collapsed .dp-product-hero__description {
  max-height: 210px;
  overflow: hidden;
}
/* Ensure list markers don't bleed outside the clipped area */
.dp-product-hero__description-wrap.is-collapsible.is-collapsed .dp-product-hero__description ul,
.dp-product-hero__description-wrap.is-collapsible.is-collapsed .dp-product-hero__description ol {
  overflow: hidden;
  list-style-position: inside;
}
.dp-product-hero__description-wrap.is-collapsible.is-collapsed::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 68px; /* sits clearly above the toggle button */
  height: 60px;
  border-radius: 0 0 20px 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.95));
  pointer-events: none;
}

.dp-product-hero__description {
  color: #4b5563;
  font-size: 0.97rem;
  line-height: 1.75;
  margin: 0;
}

.dp-product-hero__description p {
  margin: 0 0 10px;
}
.dp-product-hero__description p:last-child {
  margin-bottom: 0;
}

/* Toggle button — hidden on desktop, shown on mobile when content overflows */
.dp-product-hero__description-toggle {
  display: inline-flex;
  align-items: center;
  margin-top: 12px;
  padding: 8px 16px;
  border: none;
  border-radius: 999px;
  background: rgba(79, 70, 229, 0.08);
  color: #4f46e5;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease;
}
.dp-product-hero__description-toggle:hover {
  background: rgba(79, 70, 229, 0.14);
}
.dp-product-hero__description-toggle:focus-visible {
  outline: 2px solid #7c63f8;
  outline-offset: 3px;
}

.dp-product-specs__header {
  margin: 0 0 12px;
  padding-top: 20px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.dp-product-specs__title {
  margin: 0;
  color: rgba(17, 24, 39, 0.5);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.dp-product-hero__variants {
  margin-bottom: 24px;
}

.dp-product-hero__variants form {
  margin: 0;
}

.dp-product-hero__variants table.variations {
  width: 100%;
  margin: 0 0 10px;
}

.dp-product-hero__variants table.variations td,
.dp-product-hero__variants table.variations th {
  padding: 0 0 10px;
}

.dp-product-hero__variants select {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid rgba(19, 36, 64, 0.18);
  border-radius: 14px;
  background: #fff;
}

.dp-product-variation-control {
  display: grid;
  gap: 10px;
}

.dp-product-variation-pills {
  display: none;
}

.dp-product-hero__variants .variations_form.dp-variation-form--enhanced .dp-product-variation-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  border: 0;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.dp-product-hero__variants .variations_form.dp-variation-form--enhanced .dp-product-variation-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dp-product-variation-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 16px;
  border: 1px solid rgba(19, 36, 64, 0.14);
  border-radius: 999px;
  background: #fff;
  color: #132440;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.15;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.dp-product-variation-pill:hover,
.dp-product-variation-pill:focus-visible {
  border-color: rgba(19, 36, 64, 0.26);
  outline: none;
}

.dp-product-variation-pill.is-active {
  border-color: #132440;
  background: rgba(19, 36, 64, 0.06);
  box-shadow: 0 0 0 1px rgba(19, 36, 64, 0.05);
}

.dp-product-variation-pill.is-disabled,
.dp-product-variation-pill:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  box-shadow: none;
}

.dp-product-hero__variants .reset_variations {
  width: fit-content;
  color: rgba(19, 36, 64, 0.72);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.dp-product-hero__variants .single_variation_wrap {
  margin: 0;
}

.dp-product-hero__variants .single_variation,
.dp-product-hero__variants .woocommerce-variation-price,
.dp-product-hero__variants .woocommerce-variation-description,
.dp-product-hero__variants .woocommerce-variation-availability,
.dp-product-hero__variants .quantity,
.dp-product-hero__variants .single_add_to_cart_button {
  display: none !important;
}

.dp-product-hero__variant-note {
  margin: 0;
  color: var(--dp-text-muted);
  font-size: 13px;
}

.dp-product-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 28px;
}

.dp-product-specs__item {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04);
}

.dp-product-specs__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  margin: 0;
  border-radius: 12px;
  border: 1px solid rgba(106, 90, 224, 0.08);
  background: linear-gradient(135deg, rgba(124, 99, 248, 0.07), rgba(91, 63, 214, 0.03));
  color: #5b3fd6;
}

.dp-product-specs__icon svg {
  width: 21px;
  height: 21px;
}

.dp-product-specs__item div span {
  display: block;
  margin-bottom: 3px;
  color: rgba(17, 24, 39, 0.52);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dp-product-specs__item strong {
  display: block;
  color: #111827;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.25;
}

/* Urgency / live-viewer block styling lives in product-urgency.css */

.dp-product-cta {
  margin-top: 18px;
  display: flex;
  justify-content: center;
}

/* ── Primary CTA — Apple "liquid glass" (matches preview/checkout) ────────── */
.dp-product-cta__button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  max-width: none;
  min-height: 60px;
  padding: 16px 28px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.02) 42%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(135deg, rgba(111, 92, 246, 0.96), rgba(79, 70, 229, 0.97));
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  box-shadow:
    0 14px 32px rgba(79, 70, 229, 0.34),
    0 4px 10px rgba(49, 46, 129, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -3px 8px rgba(49, 46, 129, 0.3);
  color: #fff;
  font-size: 1.04rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: none;
}

.dp-product-cta__button::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 44%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0));
  opacity: 0.6;
  pointer-events: none;
}

.dp-product-cta__button:active {
  transform: translateY(0) scale(0.985);
  filter: brightness(0.98);
}

@media (hover: hover) and (pointer: fine) {
  .dp-product-cta__button:hover {
    transform: translateY(-1px);
    box-shadow:
      0 18px 40px rgba(79, 70, 229, 0.4),
      0 6px 14px rgba(49, 46, 129, 0.26),
      inset 0 1px 0 rgba(255, 255, 255, 0.45),
      inset 0 -3px 8px rgba(49, 46, 129, 0.3);
  }
}

.dp-product-cta__button--sticky {
  min-height: 52px;
  border-radius: 14px;
}

.dp-shipping-badge {
  display: flex;
  justify-content: center;
  margin: 0.9rem 0 0;
}

.dp-shipping-badge__inner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 10px;
  background: rgba(16, 185, 129, 0.07);
  color: #065f46;
}

.dp-shipping-badge__icon {
  display: flex;
  align-items: center;
  color: #059669;
}

.dp-shipping-badge__icon--helt-hjem {
  width: 22px;
  height: 22px;
  justify-content: center;
}

.dp-shipping-badge__icon-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.dp-shipping-badge__text-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dp-shipping-badge__primary {
  font-size: 0.9rem;
  font-weight: 700;
}

.dp-shipping-badge__secondary {
  font-size: 0.78rem;
  opacity: 0.9;
}

/* Money-back badge under the product CTA. Same shape as the shipping badge
   right above it, in the accent purple so the two read as a pair of promises
   rather than one repeated green stamp. */
.dp-guarantee-badge {
  display: flex;
  justify-content: center;
  margin: 0.6rem 0 0;
}

.dp-guarantee-badge__inner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 420px;
  padding: 9px 16px;
  border: 1px solid rgba(106, 90, 224, 0.24);
  border-radius: 10px;
  background: rgba(106, 90, 224, 0.06);
  color: #3b2f8f;
  text-align: left;
}

.dp-guarantee-badge__icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--dp-accent-strong);
}

.dp-guarantee-badge__text-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.dp-guarantee-badge__primary {
  font-size: 0.9rem;
  font-weight: 700;
}

.dp-guarantee-badge__secondary {
  font-size: 0.78rem;
  line-height: 1.4;
  opacity: 0.85;
}

.dp-payment-icons {
  justify-content: center;
  margin-top: 14px;
}

.dp-product-hero__content .dp-payment-icons {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: none;
  margin: 14px auto 0;
}

.dp-payment-icons__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 auto;
}

.dp-payment-icons__icon {
  height: 22px;
  width: auto;
}

/* ── Social proof: customer reviews on product page ──────────────────────── */
.dp-product-social {
  width: var(--dp-width);
  margin: 56px auto 0;
}

.dp-product-social__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 22px;
  text-align: center;
}

.dp-product-social__stars {
  color: #ffb01e;
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  line-height: 1;
}

.dp-product-social__title {
  margin: 0;
  font-family: "Fredoka", "Poppins", sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #181528;
}

.dp-product-social__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.dp-product-social__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 22px 20px;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.05);
}

.dp-product-social__card .dp-tp-stars {
  gap: 3px;
}

.dp-product-social__card .dp-tp-star {
  width: 20px;
  height: 20px;
  border-radius: 3px;
}

.dp-product-social__card .dp-tp-star svg {
  width: 12px;
  height: 12px;
}

.dp-product-social__text {
  color: #374151;
  font-size: 0.95rem;
  line-height: 1.6;
}

.dp-product-social__text p {
  margin: 0;
}

/* Photo attached to a review on the product page. */
.dp-product-social__photo {
  border-radius: 12px;
  overflow: hidden;
  background: #eef0f4;
  line-height: 0;
}

.dp-product-social__photo img {
  display: block;
  width: 100%;
  max-height: 240px;
  object-fit: cover;
}

.dp-product-social__meta {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: auto;
}

.dp-product-social__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6a5ae0, #5b3fd6);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  overflow: hidden;
}

.dp-product-social__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.dp-product-social__person {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.dp-product-social__name {
  color: #111827;
  font-size: 0.9rem;
  font-weight: 700;
}

.dp-product-social__location {
  color: #6b7280;
  font-size: 0.78rem;
}

.dp-product-social__link {
  display: block;
  width: fit-content;
  margin: 22px auto 0;
  color: var(--dp-accent-strong);
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* ── Inline personalizer section (product page, below the reviews) ────────
   The shared personalizer form rendered in compact mode. The hero CTAs
   smooth-scroll here instead of navigating to /start-personalisering/. */

.dp-product-personalize {
  width: var(--dp-width);
  /* Generous vertical breathing room so the neighbouring sections don't peek
     in while the customer is focused on the form. */
  margin: clamp(112px, 17vw, 176px) auto;
  /* Anchor target: keep the section heading clear of the sticky header. */
  scroll-margin-top: 90px;
}

.dp-product-personalize__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 22px;
  text-align: center;
}

.dp-product-personalize__title {
  margin: 0;
  font-family: "Fredoka", "Poppins", sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #181528;
}

.dp-product-personalize .dp-personaliser-card {
  max-width: 640px;
  margin: 0 auto;
}

/* Compact form variant (inline on the product page): tighter padding. */
.dp-personaliser-card--compact {
  padding: 20px;
}

.dp-product-faq {
  margin-top: 56px;
}

.dp-product-faq__heading {
  max-width: 760px;
  margin: 0 auto 22px;
  font-family: "Fredoka", "Poppins", sans-serif;
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #181528;
  text-align: center;
}

.dp-product-faq__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 760px;
  margin: 0 auto;
}

/* Card-style accordion item */
.dp-product-faq__item {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04);
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.dp-product-faq__item:has(.dp-product-faq__question[aria-expanded="true"]) {
  border-color: rgba(111, 92, 246, 0.32);
  box-shadow: 0 10px 30px rgba(79, 70, 229, 0.1);
  background: linear-gradient(180deg, rgba(248, 247, 255, 0.96), rgba(255, 255, 255, 0.96));
}

.dp-product-faq__question {
  width: 100%;
  border: none;
  background: none;
  padding: 19px 20px;
  color: #1f2937;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.dp-product-faq__question-text {
  font-size: 1.06rem;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.dp-product-faq__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.05);
  color: #4b5563;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), background 0.25s ease, color 0.25s ease;
}

.dp-product-faq__question[aria-expanded="true"] .dp-product-faq__arrow {
  transform: rotate(180deg);
  background: linear-gradient(135deg, #6a5ae0, #5b3fd6);
  color: #fff;
}

.dp-product-faq__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.dp-product-faq__answer-inner {
  padding: 0 20px 20px;
  color: #4b5563;
  font-size: 1rem;
  line-height: 1.7;
}

.dp-product-faq__answer-inner p {
  margin: 0 0 14px;
}

.dp-product-faq__answer-inner p:last-child {
  margin-bottom: 0;
}

.dp-product-faq__specs {
  margin: 0;
  padding: 0 0 18px;
  list-style: none;
}

.dp-product-sticky-cta {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  padding: 12px 16px;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 -6px 24px rgba(15, 23, 42, 0.08);
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.dp-product-sticky-cta.active {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.dp-product-sticky-cta__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  width: var(--dp-width);
  max-width: 560px;
  margin: 0 auto;
}

.dp-product-sticky-cta__info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex-shrink: 0;
  line-height: 1.1;
}

.dp-product-sticky-cta__price {
  color: #111827;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.dp-product-sticky-cta__price del {
  margin-right: 4px;
  color: #9ca3af;
  font-weight: 600;
}

.dp-product-sticky-cta__ship {
  color: #0f9d6b;
  font-size: 0.74rem;
  font-weight: 700;
}

.dp-product-sticky-cta__inner .dp-product-cta__button--sticky {
  flex: 1;
  width: auto;
}

.dp-product-template .woocommerce-notices-wrapper {
  width: var(--dp-width);
  margin: 0 auto 20px;
}

/* Hide site header/footer on personalizer and preview pages for focused flow */
.dreampage-personalizer-request .dp-header,
.dreampage-personalizer-request .dp-footer,
.dreampage-personalizer-request .dp-topbar-wrap,
body.dreampage-preview-request .dp-header,
body.dreampage-preview-request .dp-footer,
body.dreampage-preview-request .dp-topbar-wrap {
  display: none !important;
}

body.dreampage-preview-request {
  background: #fff;
}

.dp-personaliser-shell {
  min-height: 100svh;
  padding: 28px 0 44px;
  /* Matches the preview page background (body.dreampage-preview-request is
     white) so the cross-page view transition into the preview is seamless.
     A subtle purple top-glow mirrors the preview book banner. */
  background:
    linear-gradient(180deg, rgba(79, 70, 229, 0.08), rgba(255, 255, 255, 0) 320px),
    #fff;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.dp-personaliser-page {
  width: var(--dp-width);
  margin: 0 auto;
}

.dp-personaliser-page__inner {
  max-width: 980px;
  margin: 0 auto;
}

/* Back-to-home pill — top-left above the step indicator. Clean glass button
   that matches the personalizer topbar; identical placement on desktop + mobile. */
.dp-personaliser-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  padding: 8px 15px 8px 11px;
  border: 1px solid rgba(106, 90, 224, 0.16);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 6px 18px rgba(57, 44, 115, 0.06);
  backdrop-filter: blur(12px);
  color: #4a4470;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.dp-personaliser-back:hover,
.dp-personaliser-back:focus-visible {
  color: var(--dp-accent-strong);
  border-color: rgba(106, 90, 224, 0.34);
  box-shadow: 0 10px 26px rgba(57, 44, 115, 0.12);
  transform: translateY(-1px);
}

.dp-personaliser-back__icon {
  flex-shrink: 0;
  transition: transform 0.18s ease;
}

.dp-personaliser-back:hover .dp-personaliser-back__icon,
.dp-personaliser-back:focus-visible .dp-personaliser-back__icon {
  transform: translateX(-2px);
}

.dp-topbar--personaliser {
  margin-bottom: 18px;
  padding: 16px 20px 18px;
  border: 1px solid rgba(255, 255, 255, 0.64);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(248, 246, 255, 0.78)),
    rgba(255, 255, 255, 0.74);
  box-shadow: 0 14px 40px rgba(57, 44, 115, 0.08);
  backdrop-filter: blur(18px);
}

.dp-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.dp-step {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  text-align: center;
}

.dp-step-label {
  font-size: 0.98rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.dp-step.done .dp-step-label,
.dp-step.current .dp-step-label {
  color: var(--dp-accent-strong);
  font-weight: 700;
}

.dp-step.upcoming .dp-step-label {
  color: #8f8aa6;
  font-weight: 600;
}

.dp-step-check {
  width: 22px;
  height: 22px;
  border-radius: 9999px;
  border: 1px solid rgba(106, 90, 224, 0.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #6a5ae0, #5b3fd6);
  color: #fff;
  box-shadow: 0 8px 20px rgba(91, 63, 214, 0.24);
  font-size: 0.75rem;
}

.dp-line {
  height: 8px;
  overflow: hidden;
  border-radius: 9999px;
  background: linear-gradient(90deg, rgba(106, 90, 224, 0.13) 0%, rgba(91, 63, 214, 0.13) 100%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.55);
}

.dp-line::before {
  content: "";
  display: block;
  width: 67%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(135deg, #6a5ae0, #5b3fd6);
}

.dp-personaliser-intro {
  margin: 0 auto 24px;
  text-align: center;
}

.dp-personaliser-intro__eyebrow {
  margin: 0 0 6px;
  color: var(--dp-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.dp-personaliser-title {
  margin: 0;
  color: #181528;
  font-family: "Fredoka", "Poppins", sans-serif;
  font-size: clamp(2.1rem, 4.2vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-weight: 700;
}

.dp-personaliser-card,
.dp-personaliser-empty {
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 32px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(250, 249, 255, 0.94) 100%);
  box-shadow: var(--dp-shadow-medium);
  backdrop-filter: blur(20px);
}

.dp-personaliser-empty {
  max-width: 760px;
  margin: 48px auto 0;
  text-align: center;
}

.dp-personaliser-empty h1,
.dp-preview-empty h1 {
  margin: 0 0 12px;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1;
}

.dp-personaliser-empty p,
.dp-preview-empty p {
  margin: 0 0 18px;
  color: #5f5a74;
  line-height: 1.7;
}

.dp-card {
  border: 1px solid rgba(104, 89, 183, 0.16);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--dp-shadow-soft);
}

.dp-card-title,
.dp-section-label,
.dp-form-field-label {
  display: block;
  margin-bottom: 8px;
  color: #181528;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ── Step 1: dashed upload zone (tips strip + big upload button) ─────────── */

.dp-upload-zone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  padding: 24px 22px;
  border: 1.5px dashed rgba(24, 21, 40, 0.55);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(250, 249, 255, 0.92), rgba(244, 242, 255, 0.88));
  cursor: pointer;
  transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

.dp-upload-zone:hover {
  border-color: rgba(24, 21, 40, 0.85);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);
}

.dp-tips-strip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.dp-tips-strip__title {
  color: #181528;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.dp-tips-art {
  position: relative;
  width: 100%;
  max-width: 440px;
}

.dp-tips-img {
  display: block;
  width: 100%;
  border-radius: 16px;
}

.dp-upload-zone__btn {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  /* Plain flat button — same purple fill as the product-gallery CTA, no
     glass overlay, with sharp edges. */
  border: none;
  border-radius: 4px;
  background: linear-gradient(135deg, #6a5ae0, #5b3fd6);
  color: #fff;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  box-shadow: 0 10px 28px rgba(90, 63, 214, 0.26);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.25s ease;
}

/* Soft light streak that sweeps across the button on a loop to keep the
   primary CTA feeling alive without being distracting. */
.dp-upload-zone__btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.5) 50%,
    transparent 100%
  );
  transform: skewX(-18deg) translateX(-260%);
  animation: dp-upload-sheen 4.2s ease-in-out infinite;
  pointer-events: none;
}

.dp-upload-zone__btn span,
.dp-upload-zone__btn svg {
  position: relative;
  z-index: 1;
}

@keyframes dp-upload-sheen {
  0% {
    transform: skewX(-18deg) translateX(-260%);
  }
  55%, 100% {
    transform: skewX(-18deg) translateX(460%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dp-upload-zone__btn::after {
    animation: none;
    display: none;
  }
}

.dp-upload-zone__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(90, 63, 214, 0.32);
}

.dp-upload-zone__btn svg {
  flex: none;
}

.dp-upload-zone__hint {
  margin: 0;
  color: #5f5a74;
  font-size: 0.86rem;
  line-height: 1.5;
  text-align: center;
}

/* Reassurance line under the upload zone; hidden once a photo is approved. */
.dp-upload-privacy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: fit-content;
  max-width: 100%;
  margin: 14px auto 0;
  color: #5f5a74;
  font-size: 0.84rem;
  line-height: 1.5;
  text-align: left;
}

.dp-upload-privacy strong {
  color: var(--dp-text);
  font-weight: 700;
}

.dp-upload-privacy__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: linear-gradient(135deg, #7c6cf0, #5b3fd6);
  box-shadow: 0 4px 10px rgba(91, 63, 214, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  color: #fff;
}

.dp-personaliser-card.dp-photo-approved .dp-upload-privacy {
  display: none;
}

.dp-photo-check-note,
.dp-consent-reassurance,
.fdb-results__status {
  margin: 0;
  color: #5f5a74;
  line-height: 1.55;
}

.dp-photo-spinner {
  display: flex;
  visibility: hidden;
  position: absolute;
  inset: -2px;
  z-index: 10;
  align-items: center;
  justify-content: center;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.93);
  backdrop-filter: blur(6px);
}

.dp-photo-spinner.is-active {
  visibility: visible;
}

.dp-photo-spinner__inner {
  min-width: 220px;
  padding: 20px 22px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.98);
  text-align: center;
  box-shadow: 0 20px 50px rgba(57, 44, 115, 0.16);
}

.dp-photo-spinner__circle {
  width: 60px;
  height: 60px;
  margin: 0 auto 10px;
  border: 5px solid #d8d7e4;
  border-top-color: #6a5ae0;
  border-radius: 50%;
  box-shadow: 0 0 0 8px rgba(106, 90, 224, 0.08);
  animation: dp-spin 0.8s linear infinite;
}

@keyframes dp-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Step 2: approved photo shown as a centered circular avatar. */
#dp-photo-check {
  display: none;
  padding: 8px 0 0;
  text-align: center;
}

#dp-photo-check.is-visible {
  display: block;
}

.dp-photo-check__inner {
  position: relative;
  display: inline-block;
}

#dp-photo-check-img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border: 4px solid #fff;
  border-radius: 50%;
  box-shadow: 0 12px 30px rgba(57, 44, 115, 0.18), 0 0 0 1px rgba(15, 23, 42, 0.05);
}

#dp-photo-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(15, 11, 36, 0.06);
  border-radius: 50%;
  background: #fff;
  color: #6b6580;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 6px 16px rgba(15, 11, 36, 0.18);
  cursor: pointer;
  transition: transform 0.18s ease, background-color 0.18s ease,
    color 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

#dp-photo-remove:hover {
  transform: scale(1.08);
  background: #ef4444;
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(239, 68, 68, 0.32);
}

#dp-photo-remove:active {
  transform: scale(0.96);
}

#dp-photo-remove:focus-visible {
  outline: 2px solid var(--dp-accent-strong, #6a5ae0);
  outline-offset: 2px;
}

.dp-photo-check-copy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  color: var(--dp-text);
  font-size: 0.95rem;
  font-weight: 700;
}

.dp-photo-check-copy span:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #16a34a;
  color: #fff;
  font-size: 0.7rem;
}

.dp-photo-check-note {
  margin-top: 4px;
  font-size: 0.88rem;
}

#error {
  margin-top: 10px;
  color: #b91c1c;
  font-weight: 600;
}

/* Preview rate-limit cooldown notice (personalizer) */
.dp-cooldown {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 14px;
  padding: 16px 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(106, 90, 224, 0.08), rgba(94, 204, 255, 0.07));
  border: 1px solid rgba(106, 90, 224, 0.22);
  box-shadow: var(--dp-shadow-soft);
  color: var(--dp-text);
}

.dp-cooldown[hidden] {
  display: none !important;
}

.dp-cooldown__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(106, 90, 224, 0.12);
  color: var(--dp-accent-strong);
}

.dp-cooldown__icon svg {
  width: 22px;
  height: 22px;
}

.dp-cooldown__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.dp-cooldown__title {
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.35;
}

.dp-cooldown__text {
  font-size: 0.9rem;
  color: var(--dp-text-soft);
  line-height: 1.4;
}

.dp-cooldown__timer {
  display: inline-block;
  min-width: 44px;
  margin-left: 4px;
  font-variant-numeric: tabular-nums;
  color: var(--dp-accent-strong);
}

#reasons {
  margin: 8px 0 0 22px;
  color: #7b728f;
  font-size: 0.92rem;
  line-height: 1.55;
}

/* Two-step personalizer: the child-detail fields + CTA stay hidden until a
   photo has been approved (JS adds .dp-photo-approved to the card). */
.dp-personaliser-details {
  display: none;
}

.dp-personaliser-card.dp-photo-approved .dp-personaliser-details {
  display: block;
  animation: dp-details-reveal 0.35s ease both;
}

@keyframes dp-details-reveal {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dp-personaliser-card.dp-photo-approved .dp-personaliser-details {
    animation: none;
  }
}


.dp-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.dp-form-field--full {
  grid-column: 1 / -1;
}

.dp-personaliser-card .field__input,
.dp-personaliser-card input[type="text"],
.dp-personaliser-card select {
  width: 100%;
  min-height: 56px;
  padding: 15px 17px;
  border: 1px solid rgba(104, 89, 183, 0.16);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 10px 26px rgba(91, 63, 214, 0.06);
}

.dp-personaliser-card .field__input:focus,
.dp-personaliser-card input[type="text"]:focus,
.dp-personaliser-card select:focus {
  outline: none;
  border-color: rgba(106, 90, 224, 0.5);
  box-shadow: 0 0 0 4px rgba(106, 90, 224, 0.1), 0 16px 30px rgba(91, 63, 214, 0.08);
}

.dp-gender-select-wrap {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.dp-gender-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

/* Glass selection cards — before (default), while choosing (hover/press)
   and after (is-selected) states. */
.dp-gender-option {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 60px;
  padding: 12px 14px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 246, 255, 0.9));
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 6px 16px rgba(91, 63, 214, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  color: #2a2540;
  font-size: 1.5rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.22s ease, transform 0.18s ease, background 0.22s ease, color 0.2s ease;
}

.dp-gender-option > span {
  position: relative;
  z-index: 1;
}

@media (hover: hover) and (pointer: fine) {
  .dp-gender-option:not(.is-selected):hover {
    transform: translateY(-2px);
    border-color: rgba(106, 90, 224, 0.4);
    box-shadow: 0 12px 26px rgba(91, 63, 214, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  }
}

.dp-gender-option:active {
  transform: translateY(0) scale(0.985);
}

.dp-gender-option.is-selected {
  border: 1px solid rgba(255, 255, 255, 0.4);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(135deg, rgba(122, 102, 255, 0.96), rgba(91, 63, 214, 0.97));
  color: #fff;
  box-shadow:
    0 14px 30px rgba(91, 63, 214, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -3px 8px rgba(60, 42, 150, 0.28);
}

.dp-gender-option.is-selected::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 46%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0));
  opacity: 0.6;
  pointer-events: none;
}

/* Implicit consent: continuing = agreeing, stated as a plain note above the CTA. */
.dp-consent-note {
  margin: 16px auto 0;
  max-width: 420px;
  color: #7b728f;
  font-size: 0.82rem;
  line-height: 1.55;
  text-align: center;
}

.dp-cta-wrap {
  margin-top: 24px;
  /* Revealed together with the detail fields once a photo is approved. Lives
     outside .dp-personaliser-details (see the form template) so the mobile
     fixed CTA bar isn't trapped by that block's transform animation. */
  display: none;
}

.dp-personaliser-card.dp-photo-approved .dp-cta-wrap {
  display: block;
  animation: dp-cta-reveal 0.35s ease both;
}

/* Opacity-only reveal — no transform, so it never becomes a containing block
   for the position:fixed mobile CTA bar. */
@keyframes dp-cta-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .dp-personaliser-card.dp-photo-approved .dp-cta-wrap {
    animation: none;
  }
}

/* Reassurance pill above the preview button: the preview is free. */
.dp-cta-free-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 12px;
  padding: 7px 15px;
  border: 1px solid rgba(106, 90, 224, 0.16);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(248, 247, 255, 0.96), rgba(241, 239, 255, 0.96));
  box-shadow: 0 6px 16px rgba(91, 63, 214, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  color: #4c3ac2;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
  text-align: left;
}

.dp-cta-free-note__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c6cf0, #5b3fd6);
  box-shadow: 0 3px 8px rgba(91, 63, 214, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  color: #fff;
}

.dp-cta-free-note__text {
  min-width: 0;
}

/* Apple "liquid glass" primary button: tinted translucent fill, frosted blur,
   soft specular highlight, gentler corner radius. */
#preview-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  min-height: 60px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.02) 42%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(135deg, rgba(106, 90, 224, 0.95), rgba(91, 63, 214, 0.97));
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  color: #fff;
  box-shadow:
    0 16px 36px rgba(91, 63, 214, 0.26),
    0 4px 10px rgba(60, 42, 150, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -3px 8px rgba(60, 42, 150, 0.3);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.25s ease, filter 0.2s ease;
}

#preview-btn::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 44%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0));
  opacity: 0.6;
  pointer-events: none;
}

#preview-btn:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow:
    0 20px 44px rgba(91, 63, 214, 0.32),
    0 6px 14px rgba(60, 42, 150, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -3px 8px rgba(60, 42, 150, 0.3);
}

#preview-btn:not(:disabled):active {
  transform: translateY(0) scale(0.99);
  filter: brightness(0.98);
}

#preview-btn:disabled {
  border-color: rgba(255, 255, 255, 0.4);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0)),
    linear-gradient(135deg, #cbc7da, #b7b2c9);
  color: #fff;
  box-shadow: 0 8px 20px rgba(91, 63, 214, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  cursor: not-allowed;
  opacity: 0.92;
  pointer-events: none;
}

#preview-btn.is-loading,
#preview-btn.is-loading:disabled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: linear-gradient(135deg, #6a5ae0, #5b3fd6);
  box-shadow: 0 18px 40px rgba(91, 63, 214, 0.2);
  opacity: 0.96;
  cursor: progress;
}

.dp-btn-spinner {
  width: 20px;
  height: 20px;
  border: 2.5px solid rgba(255, 255, 255, 0.32);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: dp-spin 0.8s linear infinite;
  flex-shrink: 0;
}

.dp-btn-loading-label {
  font-weight: 700;
  letter-spacing: -0.01em;
}

#dp-gender-warning {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

#dp-gender-warning.is-open {
  display: flex;
}

.dp-gender-warning__overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 20, 0.48);
  backdrop-filter: blur(4px);
}

.dp-gender-warning__card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px;
  padding: 32px 28px 28px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08);
  text-align: center;
}

.dp-gender-warning__icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(111, 92, 246, 0.1);
  color: var(--dp-accent);
  font-size: 20px;
  font-weight: 700;
}

.dp-gender-warning__title {
  margin: 0 0 10px;
  color: #0f172a;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
}

.dp-gender-warning__body {
  margin: 0 0 24px;
  color: #475569;
  font-size: 14px;
  line-height: 1.65;
}

.dp-gender-warning__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dp-gender-warning__btn {
  width: 100%;
  padding: 13px 20px;
  border: none;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.dp-gender-warning__btn--primary {
  background: linear-gradient(135deg, #6f5cf6, #4f46e5);
  box-shadow: 0 6px 20px rgba(111, 92, 246, 0.28);
  color: #fff;
}

.dp-gender-warning__btn--secondary {
  background: rgba(241, 245, 249, 0.98);
  color: #475569;
}

.dp-preview-template {
  padding-bottom: 140px;
}

/* Outer wrapper for the preview page (replaces old dp-preview-shell outer element) */
.dp-preview-section {
  width: 100%;
}

/* The actual book display shell component */
.dp-preview-shell {
  width: var(--dp-width);
  margin: 0 auto;
}

.dp-preview-empty {
  max-width: 760px;
  margin: 56px auto 0;
  padding: 32px;
  border-radius: 28px;
  text-align: center;
}

.dp-preview-app {
  padding-top: 18px;
}

.dp-preview-ready-layout {
  transition: opacity 0.25s ease, filter 0.25s ease;
}

.dp-preview-ready-layout.is-dimmed {
  opacity: 1;
  filter: none;
}

.dp-book-banner {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: 0;
  padding: 22px 16px 34px;
  background: linear-gradient(180deg, rgba(79, 70, 229, 0.1), rgba(255, 255, 255, 0));
}

.dp-banner-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.dp-banner-title {
  margin: 0;
  color: #0f172a;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 750;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.dp-banner-subtitle {
  margin-top: 8px;
  color: rgba(15, 23, 42, 0.65);
  font-size: 14px;
}

#dp-prev-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 20px;
  align-items: start;
}

#dp-rail {
  position: sticky;
  top: 18px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 140px);
  overflow: hidden;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #fff;
}

#dp-rail-head {
  padding: 14px 14px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  gap: 10px;
  align-items: flex-end;
  justify-content: space-between;
}

#dp-rail-title,
#dp-rail-sub {
  margin: 0;
}

#dp-rail-title {
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
}

#dp-rail-sub,
#dp-rail-count {
  color: #475569;
  font-size: 12px;
  opacity: 0.7;
}

#dp-rail-scroll {
  overflow: auto;
  padding: 12px;
  display: grid;
  gap: 10px;
}

.dp-rail-section {
  margin-bottom: 16px;
}

.dp-rail-label {
  margin: 4px 2px 8px;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dp-rail-single,
.dp-rail-grid {
  display: grid;
  gap: 10px;
}

.dp-rail-grid {
  grid-template-columns: repeat(2, 1fr);
}

.dp-rail-thumb {
  padding: 0;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}

.dp-rail-thumb[aria-current="true"] {
  outline: 2px solid #4f46e5;
  outline-offset: 2px;
}

.dp-rail-thumb img {
  width: 100%;
  height: 96px;
  object-fit: cover;
}

#dp-main-wrap {
  display: flex;
  justify-content: center;
}

.dp-preview-stage {
  position: relative;
  display: flex;
  justify-content: center;
}

#dp-main-img {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  border-radius: 14px;
}

.dp-blur-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.dp-blur-card {
  overflow: hidden;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  background: #0b1020;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.1);
}
#dp-checkout-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
  opacity: 0;
  transform: translateY(104%);
  pointer-events: none;
  transition: transform 0.24s ease, opacity 0.24s ease;
}

#dp-checkout-bar.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

#dp-checkout-inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
}

#dp-checkout-btn {
  padding: 14px 30px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #4f46e5, #9333ea);
  box-shadow: 0 12px 30px rgba(79, 70, 229, 0.35), 0 6px 16px rgba(147, 51, 234, 0.25);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  /* Pinned rather than inherited from the body's 1.7: it is the label's line
     box that sets the button's height, and the loading spinner is sized to the
     same 1.25em so swapping one for the other never resizes the sticky bar. */
  line-height: 1.25;
  letter-spacing: 0.2px;
  cursor: pointer;
}

#dp-checkout-btn.is-loading,
#dp-checkout-btn.is-loading:disabled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #4f46e5, #9333ea);
  color: #fff;
  opacity: 0.96;
  cursor: progress;
}

/* Spinner only — no loading label (see setCheckoutButtonLoading()). Exactly
   one line box tall, so the button and the sticky bar around it keep their
   height while the cart request runs. */
#dp-checkout-btn.is-loading .dp-btn-spinner {
  width: 1.25em;
  height: 1.25em;
  border-width: 2.2px;
}

.dp-trust-payment {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

/* English markets: payment brand icons under the checkout button. Same
   uniform white chips as the checkout payment-trust strip, so raw logos
   with wildly different proportions all render at one calm, equal size. */
.dp-trust-payment--intl {
  gap: 10px;
}

.dp-trust-payment--intl .dp-trust-icon-img {
  box-sizing: border-box;
  height: 30px;
  width: 52px;
  padding: 5px 8px;
  border-radius: 7px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
  object-fit: contain;
}

.dp-trust-icon-img {
  height: 30px;
  width: auto;
  display: block;
}

.fdb-page {
  /* ─ Floating circle images — set your URLs here, then push to production ─ */
  --fdb-circle-left-img:  url('/wp-content/uploads/2026/08/5764629775719796566-480x480.jpg');   /* ← replace none with url('/your/left-image.jpg')  */
  --fdb-circle-mid-img:   url('https://dreampage.no/wp-content/uploads/2026/04/dragejakten-gallery-marius.jpg');
  --fdb-circle-right-img: url('/wp-content/uploads/2026/08/5764629775719796567-480x480.jpg');   /* ← replace none with url('/your/right-image.jpg') */
  /* ──────────────────────────────────────────────────────────────────────── */
  position: relative;
  /* Height follows content so there is no empty gap before the reviews
     section. The card still grows naturally when the age cards appear. */
  min-height: auto;
  padding: clamp(32px, 5vw, 72px) 20px clamp(48px, 6vw, 88px);
  background-color: #faf9ff;
  background-image:
    linear-gradient(180deg, rgba(250, 249, 255, 0.9) 0%, rgba(250, 249, 255, 0.96) 100%),
    var(--fdb-bg-image, none);
  background-repeat: no-repeat;
  background-position: center top, center top;
  background-size: cover, cover;
  overflow: hidden;
}

.fdb-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.fdb-ambient__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}

.fdb-ambient__orb--1 {
  width: min(600px, 80vw);
  height: min(600px, 80vw);
  top: -160px;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(124, 99, 248, 0.12) 0%, transparent 70%);
}

.fdb-ambient__orb--2 {
  width: min(400px, 60vw);
  height: min(400px, 60vw);
  right: -80px;
  bottom: 10%;
  background: radial-gradient(circle, rgba(124, 99, 248, 0.07) 0%, transparent 70%);
}

/* Mobile circles row hidden on desktop */
.fdb-mobile-circles {
  display: none;
}

/* ── Decorative floating circles (desktop only, min-width: 1100px) ───────── */
@keyframes fdb-circle-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-14px); }
}

@media (min-width: 1100px) {
  .fdb-ambient::before,
  .fdb-ambient::after {
    content: '';
    position: absolute;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background-color: #ece8ff;
    background-size: cover;
    background-position: center;
    box-shadow:
      0 24px 56px rgba(15, 23, 42, 0.13),
      0 0 0 5px rgba(255, 255, 255, 0.92),
      0 0 0 7px rgba(124, 99, 248, 0.1);
    animation: fdb-circle-float 6s ease-in-out infinite;
    will-change: transform;
    pointer-events: none;
  }

  .fdb-ambient::before {
    background-image: var(--fdb-circle-left-img);
    left: 45px;
    top: 10%;
    animation-delay: 0s;
  }

  .fdb-ambient::after {
    background-image: var(--fdb-circle-right-img);
    right: 45px;
    top: 14%;
    animation-delay: 2.5s;
  }
}

.fdb-hero {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto 40px;
  padding-top: 16px;
  text-align: center;
}

.fdb-hero__title {
  margin: 0;
  background: linear-gradient(160deg, #111827 0%, #374151 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: clamp(2.4rem, 6vw, 4.25rem);
  font-weight: 750;
  line-height: 1;
  letter-spacing: -0.045em;
}

.fdb-hero__trust {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 6px 14px;
  border: 1px solid rgba(124, 99, 248, 0.12);
  border-radius: 999px;
  background: rgba(124, 99, 248, 0.06);
}

.fdb-hero__stars {
  color: #f5a623;
  letter-spacing: 0.14em;
}

.fdb-hero__trust-text {
  color: #6b7280;
  font-size: 0.875rem;
  font-weight: 500;
}

.fdb-card {
  position: relative;
  z-index: 1;
  max-width: 880px;
  margin: 0 auto;
  border: 1px solid rgba(124, 99, 248, 0.1);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.07), 0 4px 12px rgba(124, 99, 248, 0.06);
  backdrop-filter: blur(20px);
  overflow: hidden;
}

.fdb-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px;
  border-bottom: 1px solid rgba(124, 99, 248, 0.08);
}

.fdb-stepper {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fdb-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: transparent;
  color: #9ca3af;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.fdb-step.is-active {
  color: #111827;
}

.fdb-step__dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(124, 99, 248, 0.12);
  border: 1.5px solid rgba(124, 99, 248, 0.2);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.fdb-step.is-active .fdb-step__dot {
  background: #7c63f8;
  border-color: #7c63f8;
  box-shadow: 0 0 0 3px rgba(124, 99, 248, 0.14);
}

.fdb-step__line {
  width: 48px;
  height: 2px;
  border-radius: 999px;
  background: rgba(124, 99, 248, 0.16);
}

.fdb-step-counter {
  display: none;
}

.fdb-card__body {
  padding: 28px;
  display: grid;
  gap: 26px;
}

.fdb-panel__heading {
  margin: 0 0 20px;
  color: #111827;
  font-size: 1.6rem;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.fdb-panel--hidden {
  display: none;
}

.fdb-panel--hidden.is-visible {
  display: block;
}

.fdb-gender-grid,
.fdb-age-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.fdb-age-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.fdb-gender-card,
.fdb-age-card,
.fdb-result-card {
  border: 1.5px solid rgba(15, 23, 42, 0.08);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.fdb-gender-card,
.fdb-age-card {
  position: relative;
  color: #111827;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.fdb-gender-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px 16px;
  text-align: left;
  overflow: hidden;
}

.fdb-age-card {
  padding: 20px;
  text-align: center;
}

.fdb-gender-card:focus-visible,
.fdb-age-card:focus-visible {
  outline: 2px solid #7c63f8;
  outline-offset: 3px;
}

.fdb-gender-card:hover,
.fdb-age-card:hover {
  transform: translateY(-2px);
  border-color: rgba(124, 99, 248, 0.35);
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.07);
}

.fdb-gender-card.is-active,
.fdb-age-card.is-active {
  border-color: #7c63f8;
  background: linear-gradient(135deg, rgba(124, 99, 248, 0.08) 0%, rgba(124, 99, 248, 0.02) 100%);
  box-shadow: 0 0 0 4px rgba(124, 99, 248, 0.12), 0 20px 40px rgba(124, 99, 248, 0.12);
}

.fdb-gender-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  background: transparent;
  overflow: visible;
}

.fdb-gender-card__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 0.25s ease;
}

.fdb-gender-card:hover .fdb-gender-card__icon svg,
.fdb-gender-card.is-active .fdb-gender-card__icon svg {
  transform: scale(1.06);
}

.fdb-gender-card__name {
  font-size: 1.65rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1;
}

@keyframes fdb-invite-pulse {
  0%, 100% { box-shadow: 0 10px 28px rgba(15,23,42,0.05); }
  50% { box-shadow: 0 10px 28px rgba(15,23,42,0.05), 0 0 0 5px rgba(106,90,224,0.18); }
}

@keyframes fdb-hint-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.fdb-gender-card {
  animation: fdb-invite-pulse 2s ease-in-out infinite;
}

.fdb-gender-card[data-value="girl"] {
  animation-delay: 1s;
}

[data-finder-gender]:has(.is-active) .fdb-gender-card {
  animation: none;
}

.fdb-gender-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 1rem;
  font-size: 0.8rem;
  color: rgba(19, 36, 64, 0.42);
  letter-spacing: 0.03em;
  transition: opacity 0.35s ease;
}

.fdb-gender-hint__arrow {
  display: inline-block;
  animation: fdb-hint-bounce 1.4s ease-in-out infinite;
  font-style: normal;
}

.fdb-panel--gender:has([data-finder-gender] .is-active) .fdb-gender-hint {
  opacity: 0;
  pointer-events: none;
}

.fdb-age-card__range {
  display: block;
  font-size: 1.5rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1;
}

.fdb-age-card__sub {
  display: block;
  margin-top: 6px;
  color: #6b7280;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.fdb-age-card.is-active .fdb-age-card__sub {
  color: #7c63f8;
}

.fdb-alt-link {
  margin: 28px 0 0;
  color: #9ca3af;
  font-size: 0.85rem;
}

.fdb-alt-link a {
  color: #6b7280;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.22em;
  transition: color 0.15s ease;
}

.fdb-alt-link a:hover {
  color: #4b5563;
}

.fdb-results {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 28px auto 0;
}

.fdb-results__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.fdb-result-card {
  overflow: hidden;
}

.fdb-result-card__image img {
  width: 100%;
  aspect-ratio: 1 / 1.05;
  object-fit: cover;
}

.fdb-result-card__body {
  padding: 18px;
  display: grid;
  gap: 10px;
}

.fdb-result-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fdb-result-card__meta span {
  display: inline-flex;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: rgba(19, 36, 64, 0.06);
  font-size: 0.78rem;
  font-weight: 600;
}

.fdb-result-card__body h3 {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.fdb-result-card__body h3 a,
.fdb-result-card__cta {
  text-decoration: none;
}

.fdb-result-card__price {
  font-weight: 700;
}

.fdb-result-card__copy {
  margin: 0;
  color: #6b7280;
  line-height: 1.6;
}

.fdb-result-card__cta {
  color: #7c63f8;
  font-weight: 700;
}

/* ── Book finder: results page ─────────────────────────────────────────── */
.fdb-results-page {
  width: var(--dp-width);
  margin: 0 auto;
  padding: clamp(36px, 5vw, 72px) 0 clamp(64px, 9vw, 120px);
}

.fdb-results-page__header {
  margin-bottom: 2.5rem;
}

.fdb-results-page__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 1rem;
  color: var(--dp-text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s ease;
}

.fdb-results-page__back:hover {
  color: var(--dp-accent);
}

.fdb-results-page__title {
  margin: 0;
  font-family: "Playfair Display", serif;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: var(--dp-text);
}

.fdb-results-page__eyebrow {
  margin: 0 0 0.7rem;
  color: var(--dp-accent-strong);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.fdb-results-page__lead {
  max-width: 34rem;
  margin: 1rem 0 0;
  color: var(--dp-text-soft);
  font-size: 1.02rem;
  line-height: 1.62;
}

/* Trust strip — the results page was the only step in the funnel with no
   reassurance at all, so the promise is repeated right under the headline. */
.fdb-results-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.4rem;
  margin: 1.35rem 0 0;
  padding: 0;
  list-style: none;
}

.fdb-results-trust__item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--dp-text-soft);
  font-size: 0.9rem;
  font-weight: 600;
}

.fdb-results-trust__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(52, 168, 120, 0.14);
  color: #2f9c6f;
}

.fdb-results-trust__stars {
  color: var(--dp-gold);
  font-size: 0.86rem;
  letter-spacing: 0.04em;
}

/* ── "Fits too" group ──────────────────────────────────────────────────── */
.fdb-results-page__also {
  margin-top: clamp(3rem, 5vw, 4.5rem);
  padding-top: clamp(2rem, 3.5vw, 3rem);
  border-top: 1px solid var(--dp-border-soft);
}

/* When there is no exact-match grid above it, the group is the page's first
   content and needs no divider or extra breathing room. */
.fdb-results-page__also--only {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.fdb-results-page__also-title {
  margin: 0;
  max-width: 44rem;
  font-family: "Fredoka", "Poppins", sans-serif;
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.28;
  color: var(--dp-text);
}

.fdb-results-page__also-note {
  max-width: 38rem;
  margin: 0.55rem 0 0;
  color: var(--dp-text-muted);
  font-size: 0.94rem;
  line-height: 1.6;
}

/* ── Bottom escape hatch ───────────────────────────────────────────────── */
.fdb-results-page__more {
  margin-top: clamp(3rem, 5vw, 4.5rem);
  padding: clamp(1.6rem, 3vw, 2.2rem);
  border: 1px solid var(--dp-border-soft);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.7);
  text-align: center;
}

.fdb-results-page__more-text {
  margin: 0 0 1rem;
  color: var(--dp-text-soft);
  font-size: 1rem;
  font-weight: 600;
}

.fdb-results-page__more-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  justify-content: center;
}

.fdb-results-page__more-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0.72rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--dp-accent-strong);
  color: #fff;
  font-size: 0.94rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
}

.fdb-results-page__more-link:hover {
  transform: translateY(-1px);
  background: var(--dp-accent);
}

.fdb-results-page__more-link--ghost {
  border-color: var(--dp-border);
  background: transparent;
  color: var(--dp-text);
}

.fdb-results-page__more-link--ghost:hover {
  border-color: var(--dp-accent);
  background: rgba(106, 90, 224, 0.06);
  color: var(--dp-accent-strong);
}

.fdb-results-page__empty {
  padding: 4rem 0;
  text-align: center;
  color: var(--dp-text-muted);
  font-size: 1rem;
}

.fdb-results-page__empty a {
  display: inline-block;
  margin-top: 0.75rem;
  color: var(--dp-accent);
  font-weight: 600;
  text-decoration: none;
}

.fdb-results-page__empty a:hover {
  text-decoration: underline;
}

.woocommerce-cart,
.woocommerce-checkout,
.woocommerce-account,
.dreampage-preview-request {
  width: 100%;
}

.dp-cart-empty {
  width: 100%;
  margin: 40px auto 80px;
}

.dp-cart-empty__card {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  padding: 52px 36px 44px;
  text-align: center;
  overflow: hidden;
  border: 1px solid rgba(19, 36, 64, 0.08);
  border-radius: 28px;
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(106, 90, 224, 0.1), rgba(255, 255, 255, 0) 55%),
    rgba(255, 255, 255, 0.92);
  box-shadow: 0 20px 56px rgba(19, 36, 64, 0.07);
}

.dp-cart-empty__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: rgba(106, 90, 224, 0.08);
  color: var(--dp-accent);
}

.dp-cart-empty__title {
  margin: 0 0 12px;
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  font-weight: 800;
  line-height: 1.15;
  color: #132440;
  letter-spacing: -0.03em;
}

.dp-cart-empty__text {
  max-width: 26rem;
  margin: 0 auto 28px;
  color: rgba(19, 36, 64, 0.65);
  font-size: 0.97rem;
  line-height: 1.65;
}

.dp-cart-empty__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.dp-cart-empty__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 13px 32px;
  border-radius: 14px;
  background: linear-gradient(135deg, #6a5ae0, #5b3fd6);
  box-shadow: 0 10px 28px rgba(91, 63, 214, 0.22);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.dp-cart-empty__button:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(91, 63, 214, 0.3);
  color: #fff;
}

.dp-cart-empty__button--ghost {
  background: #fff;
  border: 1px solid rgba(19, 36, 64, 0.14);
  box-shadow: none;
  color: #132440;
}

.dp-cart-empty__button--ghost:hover {
  border-color: rgba(106, 90, 224, 0.45);
  box-shadow: 0 10px 26px rgba(19, 36, 64, 0.08);
  color: #132440;
}

.dp-cart-empty__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 20px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.dp-cart-empty__trust-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(19, 36, 64, 0.6);
  font-size: 0.85rem;
  font-weight: 600;
}

.dp-cart-empty__trust-item svg {
  flex: none;
  color: #2e9e6b;
}

.dp-cart-empty__products {
  max-width: 1080px;
  margin: 64px auto 0;
  text-align: center;
}

.dp-cart-empty__eyebrow {
  margin: 0 0 10px;
  color: rgba(19, 36, 64, 0.54);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.dp-cart-empty__products-title {
  margin: 0;
  font-family: "Playfair Display", serif;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #132440;
}

.dp-cart-empty__products .dp-product-grid {
  width: 100%;
  text-align: left;
}

.woocommerce table.shop_table,
.woocommerce form.checkout_coupon,
.woocommerce .woocommerce-billing-fields,
.woocommerce .woocommerce-shipping-fields,
.woocommerce .woocommerce-additional-fields {
  border-radius: 18px;
}

.woocommerce-cart table.shop_table,
.woocommerce-checkout form.checkout,
.woocommerce .wc-block-cart,
.woocommerce .wc-block-checkout {
  padding: 24px;
  border-radius: 24px;
}

/* Cart + checkout preview image framing controls. */
.woocommerce-cart .wc-block-cart,
.woocommerce-checkout .wc-block-checkout {
  --dp-preview-frame-radius: 10px;
  --dp-preview-frame-ratio: 4 / 5;

  /* Scales below are tuned for the trimmed mockup render (2195x1384, book centered
     at ~57% of the image width) — retune if the mockup server's trim changes. */
  --dp-cart-preview-size-desktop: 132px;
  --dp-cart-preview-size-mobile: 104px;
  --dp-cart-preview-scale-desktop: 0.88;
  --dp-cart-preview-scale-mobile: 0.88;
  --dp-cart-preview-position-desktop: center center;
  --dp-cart-preview-position-mobile: center center;

  /* Checkout order-summary thumbnail — 1:1 square frame.
     Tweak `--dp-checkout-preview-scale-*` to zoom in/out on the cover.
     1.0 = no zoom, 1.15 = 15% zoom in, etc. */
  --dp-checkout-preview-size-desktop: 88px;
  --dp-checkout-preview-size-mobile: 72px;
  --dp-checkout-preview-height-desktop: 88px;
  --dp-checkout-preview-height-mobile: 72px;
  --dp-checkout-preview-scale-desktop: 1;
  --dp-checkout-preview-scale-mobile: 1;
  --dp-checkout-preview-position-desktop: center center;
  --dp-checkout-preview-position-mobile: center center;
}

.woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image > a {
  display: block;
  aspect-ratio: var(--dp-preview-frame-ratio);
  overflow: hidden;
  border-radius: var(--dp-preview-frame-radius);
}

.woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image img {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  transform-origin: center center;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__image > img,
.woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__image .wc-block-components-product-image img {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: var(--dp-checkout-preview-position-desktop);
  transform: scale(var(--dp-checkout-preview-scale-desktop));
  transform-origin: center center;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 12px;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--dp-checkout-preview-size-desktop);
  width: var(--dp-checkout-preview-size-desktop);
  height: var(--dp-checkout-preview-height-desktop);
  min-width: var(--dp-checkout-preview-size-desktop);
  overflow: hidden;
  margin-top: 0;
  padding-bottom: 0;
  border-radius: var(--dp-preview-frame-radius);
  line-height: 0;
  background: #fff;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__image .wc-block-components-product-image,
.woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__image .wc-block-components-product-image > a {
  display: block;
  width: 100%;
  height: 100%;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__image .wc-block-components-product-image {
  border-radius: inherit;
  overflow: hidden;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__image .wc-block-components-product-image__inner-container {
  position: static;
  width: 100%;
  height: 100%;
  display: block;
  padding: 0;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__description {
  min-width: 0;
  flex: 1 1 auto;
  padding: 0;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__total-price {
  align-self: flex-start;
  margin-left: auto;
  padding: 0 0 0 12px;
  text-align: right;
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-express-payment__title-container {
  pointer-events: none;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary .wc-block-components-product-name {
  display: -webkit-box;
  margin-bottom: 0;
  overflow: hidden;
  font-size: 0.96rem;
  font-weight: 600;
  line-height: 1.22;
  -webkit-box-orient: vertical;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__individual-prices del,
.woocommerce-checkout .wc-block-checkout .wc-block-cart-item__total-price-and-sale-badge-wrapper .wc-block-components-sale-badge,
.woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__quantity {
  display: none !important;
}

/* The personalization (child name, gender, book language) is the emotional
   anchor of the whole purchase — it used to be hidden here, which meant the
   customer paid without seeing any confirmation that the book is *theirs*.
   Shown as a quiet meta line under the title instead. */
.woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary .wc-block-components-product-metadata {
  margin: 4px 0 0;
}

/* Values carry the reassurance ("Emma", "Jente"), so the field labels stay
   quiet rather than competing with them. */
.woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary .wc-block-components-product-metadata .wc-block-components-product-details__name {
  font-weight: 500;
  color: rgba(19, 36, 64, 0.45);
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary .wc-block-components-product-metadata .wc-block-components-product-details__value {
  font-weight: 600;
  color: rgba(19, 36, 64, 0.72);
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary .wc-block-components-product-metadata li,
.woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary .wc-block-components-product-details {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(19, 36, 64, 0.62);
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary .wc-block-components-product-metadata__description {
  display: none;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__image > img {
  clip-path: none;
  border-radius: var(--dp-preview-frame-radius);
  background: #fff;
}

body.woocommerce-cart .dp-cover-selector-slot,
body.woocommerce-checkout .dp-cover-selector-slot {
  width: 100%;
}

body.woocommerce-cart .dp-cover-selector-slot {
  margin-bottom: 18px;
}

body.woocommerce-checkout .dp-cover-selector-slot {
  margin: 12px 0 14px;
}

.dp-cover-selector {
  padding: 12px 14px;
  border: 1px solid rgba(19, 36, 64, 0.1);
  border-radius: 16px;
  background: #fff;
}

.dp-cover-selector.is-updating {
  opacity: 0.88;
}

.dp-cover-selector__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.dp-cover-selector__heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.dp-cover-selector__label-text,
.dp-cover-selector__meta,
.dp-cover-selector__status {
  margin: 0;
}

.dp-cover-selector__label-text {
  font-size: 0.93rem;
  font-weight: 700;
  line-height: 1.2;
  color: #132440;
}

.dp-cover-selector__meta {
  font-size: 0.78rem;
  line-height: 1.35;
  color: rgba(19, 36, 64, 0.62);
}

.dp-cover-selector__options {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dp-cover-option {
  position: relative;
  display: inline-flex;
  margin: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.dp-cover-option__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  border: 0;
  clip: rect(0, 0, 0, 0);
}

.dp-cover-option__surface {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 0;
  padding: 9px 12px;
  border: 1px solid rgba(19, 36, 64, 0.12);
  border-radius: 999px;
  background: #fff;
  touch-action: manipulation;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.dp-cover-option:focus-within .dp-cover-option__surface {
  border-color: rgba(19, 36, 64, 0.24);
}

@media (hover: hover) and (pointer: fine) {
  .dp-cover-option:hover .dp-cover-option__surface {
    border-color: rgba(19, 36, 64, 0.24);
  }
}

.dp-cover-option.is-selected .dp-cover-option__surface {
  border-color: #132440;
  background: rgba(19, 36, 64, 0.06);
}

.dp-cover-option__label {
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.15;
  color: #132440;
}

.dp-cover-option__price {
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  color: rgba(19, 36, 64, 0.72);
}

.dp-cover-selector__status {
  min-height: 1.45em;
  margin-top: 8px;
  font-size: 0.78rem;
  line-height: 1.4;
  color: #132440;
}

.dp-cover-selector.has-error .dp-cover-selector__status {
  color: #b42318;
}

body.woocommerce-cart .dp-cover-selector {
  padding: 14px;
}

/* Distraction-free checkout at every width. The site nav (20 outbound links)
   and the full marketing footer used to stay on desktop while mobile already
   hid them — every one of those links is an exit from a paying customer.
   The DreamPage logo still sits in the checkout hero, so branding is intact.
   The order-received page is excluded: once the order is placed we *want* the
   customer to browse on. */
body.woocommerce-checkout:not(.woocommerce-order-received) .dp-topbar-wrap,
body.woocommerce-checkout:not(.woocommerce-order-received) .dp-header,
body.woocommerce-checkout:not(.woocommerce-order-received) .dp-footer {
  display: none;
}

@media (max-width: 699px) {
  body.woocommerce-cart .dp-topbar-wrap,
  body.woocommerce-cart .dp-header,
  body.woocommerce-cart .dp-footer {
    display: none;
  }
}

body.woocommerce-cart .dp-topbar-wrap,
body.woocommerce-checkout .dp-topbar-wrap {
  z-index: 120;
  isolation: isolate;
}

body.woocommerce-cart .dp-header,
body.woocommerce-checkout .dp-header {
  z-index: 130;
  isolation: isolate;
}

body.woocommerce-cart .dp-header__inner,
body.woocommerce-checkout .dp-header__inner {
  position: relative;
  z-index: 1;
}

body.woocommerce-cart .dp-header a,
body.woocommerce-cart .dp-header button,
body.woocommerce-checkout .dp-header a,
body.woocommerce-checkout .dp-header button {
  touch-action: manipulation;
}

body.woocommerce-cart .wc-block-cart,
body.woocommerce-checkout .wc-block-checkout {
  position: relative;
  z-index: 1;
}

body.woocommerce-checkout .dp-page-hero {
  margin-bottom: 18px;
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-sidebar-layout {
  gap: 24px;
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary {
  padding: 14px 14px 8px;
  border: 1px solid rgba(19, 36, 64, 0.08);
  border-radius: 18px;
  background: #fff;
  box-shadow: none;
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item {
  align-items: flex-start;
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary .wc-block-cart-item__prices {
  margin-top: 8px;
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary .wc-block-cart-item__total-price-and-sale-badge-wrapper {
  align-items: flex-start;
}

body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-shipping-block {
  display: none;
}

body.woocommerce-checkout .wp-block-woocommerce-checkout-shipping-method-block .wc-block-components-totals-shipping,
body.woocommerce-checkout .wp-block-woocommerce-checkout-shipping-methods-block .wc-block-components-checkout-step__description,
body.woocommerce-checkout .wp-block-woocommerce-checkout-shipping-methods-block .wc-block-components-radio-control,
body.woocommerce-checkout .wp-block-woocommerce-checkout-shipping-methods-block .wc-block-components-shipping-rates-control__package {
  display: none;
}

body.woocommerce-checkout .wp-block-woocommerce-checkout-shipping-method-block .dp-checkout-shipping-trust,
body.woocommerce-checkout .wp-block-woocommerce-checkout-shipping-methods-block .dp-checkout-shipping-trust {
  margin-top: 0;
}

@media (min-width: 700px) {
  .woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__header .wc-block-cart-items__header-image {
    width: var(--dp-cart-preview-size-desktop);
  }

  .woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
    width: var(--dp-cart-preview-size-desktop);
    min-width: var(--dp-cart-preview-size-desktop);
  }

  .woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image > a {
    width: var(--dp-cart-preview-size-desktop);
  }

  .woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image img {
    object-position: var(--dp-cart-preview-position-desktop);
    transform: scale(var(--dp-cart-preview-scale-desktop));
  }

  .woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__image {
    width: var(--dp-checkout-preview-size-desktop);
    height: var(--dp-checkout-preview-height-desktop);
  }

  .woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary .wc-block-components-product-name {
    -webkit-line-clamp: 2;
  }

  .woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__image > img,
  .woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__image .wc-block-components-product-image img {
    object-position: var(--dp-checkout-preview-position-desktop);
    transform: scale(var(--dp-checkout-preview-scale-desktop));
    transform-origin: center center;
  }

  /* ─── Desktop checkout: match mobile single-column layout ──────────────
     Constrains the checkout card to a narrow centered column and stacks
     the sidebar (cover selector + order summary) ABOVE the main form
     column. Scoped to desktop only — mobile is untouched. */
  body.woocommerce-checkout .wc-block-checkout {
    max-width: 620px;
    margin-inline: auto;
  }

  body.woocommerce-checkout .wc-block-checkout .wc-block-components-sidebar-layout {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  body.woocommerce-checkout .wc-block-checkout .wc-block-components-sidebar-layout .wc-block-components-main,
  body.woocommerce-checkout .wc-block-checkout .wc-block-components-sidebar-layout .wc-block-components-sidebar {
    width: 100%;
    max-width: 100%;
    flex: 1 1 100%;
    padding: 0;
  }

  /* Sidebar (order summary + cover selector) sits above the main form */
  body.woocommerce-checkout .wc-block-checkout .wc-block-components-sidebar-layout .wc-block-components-sidebar {
    order: -1;
  }

  body.woocommerce-checkout .wc-block-checkout .wc-block-components-sidebar-layout .wc-block-components-main {
    order: 0;
  }
}

@media (max-width: 699px) {
  body.woocommerce-cart .dp-page-shell,
  body.woocommerce-checkout .dp-page-shell {
    padding-top: 20px;
    padding-bottom: 36px;
  }

  body.woocommerce-cart .dp-page-hero,
  body.woocommerce-checkout .dp-page-hero {
    margin-bottom: 16px;
  }

  .woocommerce-checkout .wc-block-checkout {
    padding: 16px;
    border-radius: 20px;
  }

  .woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row {
    grid-template-columns: calc(var(--dp-cart-preview-size-mobile) + 16px) minmax(0, 1fr);
  }

  .woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
    width: calc(var(--dp-cart-preview-size-mobile) + 16px);
    min-width: calc(var(--dp-cart-preview-size-mobile) + 16px);
  }

  .woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image > a {
    width: var(--dp-cart-preview-size-mobile);
  }

  .woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image img {
    object-position: var(--dp-cart-preview-position-mobile);
    transform: scale(var(--dp-cart-preview-scale-mobile));
  }

  .woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__image {
    flex-basis: var(--dp-checkout-preview-size-mobile);
    width: var(--dp-checkout-preview-size-mobile);
    height: var(--dp-checkout-preview-height-mobile);
    min-width: var(--dp-checkout-preview-size-mobile);
  }

  .woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary .wc-block-components-product-name {
    -webkit-line-clamp: 2;
  }

  .woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__image > img,
  .woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__image .wc-block-components-product-image img {
    object-position: var(--dp-checkout-preview-position-mobile);
    transform: scale(var(--dp-checkout-preview-scale-mobile));
    transform-origin: center center;
  }

  .dp-cover-selector {
    padding: 11px 12px;
    border-radius: 15px;
  }

  .dp-cover-selector__row {
    flex-direction: column;
    align-items: flex-start;
    /* Base rule sets justify-content: space-between; in a column that pushes
       the heading + options to opposite ends of any extra row height, opening
       a large vertical gap. Pack them tightly at the top instead. */
    justify-content: flex-start;
    align-content: flex-start;
    flex-wrap: nowrap;
    gap: 6px;
  }

  .dp-cover-selector__options {
    width: 100%;
  }

  .dp-cover-option {
    flex: 1 1 calc(50% - 4px);
  }

  .dp-cover-option__surface {
    width: 100%;
    justify-content: space-between;
    padding: 9px 11px;
  }

  .dp-cover-option__price {
    font-size: 0.78rem;
  }

  .dp-product-variation-pill {
    min-height: 44px;
    padding: 9px 14px;
    font-size: 0.88rem;
  }

  .woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__description {
    padding: 0;
  }

  .woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary {
    padding: 12px 12px 8px;
    border-radius: 16px;
  }
}

.dp-checkout-shipping-trust {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(15, 118, 110, 0.14);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(241, 253, 250, 0.96) 0%, rgba(236, 251, 247, 0.92) 100%);
}

.dp-checkout-shipping-trust__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.dp-checkout-shipping-trust__icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 10px 20px rgba(15, 118, 110, 0.08);
}

.dp-checkout-shipping-trust__icon-image {
  width: 36px;
  height: auto;
  display: block;
}

.dp-checkout-shipping-trust__copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.dp-checkout-shipping-trust__title {
  font-size: 0.98rem;
  line-height: 1.2;
  color: #0f172a;
}

.dp-checkout-shipping-trust__meta {
  font-size: 0.86rem;
  line-height: 1.45;
  color: rgba(15, 23, 42, 0.72);
}

.woocommerce input.input-text,
.woocommerce textarea,
.woocommerce select {
  min-height: 48px;
  border: 1px solid rgba(19, 36, 64, 0.14);
  border-radius: 14px;
  padding: 12px 14px;
}

.woocommerce button.button,
.wc-block-components-button,
.woocommerce a.button,
.woocommerce input.button {
  border-radius: 999px !important;
}

@media (max-width: 1180px) {
  .dp-footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .dp-footer-newsletter {
    grid-column: 1 / -1;
  }

  .dp-product-grid,
  .dp-featured-collection__grid,
  .fdb-results__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 989px) {
  .dp-nav-toggle {
    display: inline-flex;
  }

  .dp-header__inner {
    position: relative;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 10px;
    min-height: 64px;
  }

  .dp-nav {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    width: 100vw;
    height: 100dvh;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, visibility 0.22s ease;
  }

  .dp-nav.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .dp-nav__backdrop {
    display: block;
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(19, 36, 64, 0.28);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.26s ease;
  }

  .dp-nav.is-open .dp-nav__backdrop {
    opacity: 1;
  }

  .dp-nav__panel {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(380px, calc(100vw - 44px));
    max-width: 88vw;
    min-height: 100dvh;
    height: 100dvh;
    padding: 22px 20px 20px;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 30px 60px rgba(19, 36, 64, 0.16);
    overflow: hidden;
    transform: translateX(-108%);
    transition: transform 0.28s ease;
  }

  .dp-nav.is-open .dp-nav__panel {
    transform: translateX(0);
  }

  .dp-nav__panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .dp-nav__eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(19, 36, 64, 0.52);
  }

  .dp-nav__close {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(19, 36, 64, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.96);
  }

  .dp-nav__close span {
    position: absolute;
    width: 16px;
    height: 1.8px;
    border-radius: 999px;
    background: #132440;
  }

  .dp-nav__close span:first-child {
    transform: rotate(45deg);
  }

  .dp-nav__close span:last-child {
    transform: rotate(-45deg);
  }

  .dp-nav__panel-body {
    flex: 0 1 auto;
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 14px;
    overflow-y: auto;
    padding-right: 4px;
  }

  .dp-nav__menu-wrap {
    display: block;
  }

  .dp-nav__list {
    display: grid;
    gap: 0;
  }

  .dp-nav__mobile-only {
    display: none !important;
  }

  .dp-nav__list li {
    border-bottom: 1px solid rgba(19, 36, 64, 0.08);
  }

  .dp-nav__list a {
    display: block;
    padding: 15px 0;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
  }

  .dp-nav__blog-feature {
    display: block;
    padding: 6px 0 12px;
    border-bottom: 1px solid rgba(19, 36, 64, 0.08);
  }

  .dp-nav__blog-link {
    display: grid;
    gap: 4px;
    padding: 0;
    text-decoration: none;
  }

  .dp-nav__blog-kicker {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(19, 36, 64, 0.54);
  }

  .dp-nav__blog-copy {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.28;
    color: #132440;
  }

  .dp-nav__lang {
    display: block;
    padding: 4px 0 12px;
    border-bottom: 1px solid rgba(19, 36, 64, 0.08);
  }

  .dp-nav__lang-label {
    display: block;
    margin-bottom: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(19, 36, 64, 0.54);
  }

  .dp-nav__lang .dp-lang-switcher--mobile {
    display: block;
  }

  .dp-nav__lang .dp-lang-switcher__toggle {
    width: 100%;
    justify-content: flex-start;
  }

  .dp-nav__lang .dp-lang-switcher--mobile .dp-lang-switcher__chevron {
    display: inline-flex;
    margin-left: auto;
  }

  /* Render the dropdown inline so it flows inside the scrollable panel
     instead of being clipped by overflow. */
  .dp-nav__lang .dp-lang-switcher__menu {
    position: static;
    width: 100%;
    min-width: 0;
    margin-top: 8px;
    border-radius: 12px;
    box-shadow: none;
    transform: none;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    transition: opacity 0.18s ease, max-height 0.22s ease, padding 0.22s ease, visibility 0.18s ease;
  }

  .dp-nav__lang .dp-lang-switcher.is-open .dp-lang-switcher__menu {
    max-height: 320px;
    padding-top: 8px;
    padding-bottom: 8px;
    transform: none;
  }

  .dp-nav__footer {
    display: block;
    padding-top: 12px;
  }

  .dp-nav__socials {
    display: grid;
    gap: 12px;
  }

  .dp-nav__socials-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(19, 36, 64, 0.52);
    
  }

  .dp-nav__social-list {
    display: grid;
    gap: 15px;
  }

  .dp-nav__social-link {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    text-decoration: none;
  }

  .dp-nav__social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 0;
    background: transparent;
  }

  .dp-nav__social-icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
  }

  .dp-nav__social-text {
    font-size: 0.96rem;
    font-weight: 600;
    color: #132440;
  }

  .dp-brand {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    grid-column: auto;
    justify-self: auto;
    transform: translate(-50%, -50%);
  }

  .dp-brand img {
    max-width: 126px;
    max-height: 40px;
  }

  .dp-nav-toggle {
    grid-column: 1;
    justify-self: start;
    width: 38px;
    height: 38px;
    gap: 3.5px;
    border-radius: 11px;
    border-color: rgba(19, 36, 64, 0.1);
  }

  .dp-nav-toggle span {
    width: 17px;
    height: 1.9px;
  }

  .dp-nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(5.4px) rotate(45deg);
  }

  .dp-nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-5.4px) rotate(-45deg);
  }

  .dp-header__actions {
    grid-column: 3;
    display: inline-flex;
    width: auto;
    justify-self: end;
    justify-content: flex-end;
    gap: 6px;
    visibility: visible;
    pointer-events: auto;
    position: relative;
    z-index: 2;
  }

  .dp-header__icon-link {
    display: inline-flex;
    width: 38px;
    height: 38px;
  }

  .dp-header__icon-link svg {
    width: 20px;
    height: 20px;
  }

  .dp-header__icon-link strong {
    top: 2px;
    right: -2px;
  }

  .dp-header__blog {
    display: none;
  }

  /* minmax(0, 1fr) — not plain 1fr — so the column can never be sized by its
     content. Combined with the default `stretch` alignment (justify-items is
     deliberately NOT set to center here) the three blocks below get the exact
     column width; WebKit used to resolve their width:100% against their own
     max-width instead, making the footer 420px wide inside a 362px container
     and pushing everything right off the screen. */
  .dp-footer-inner {
    grid-template-columns: minmax(0, 1fr);
    padding: 62px 0 48px;
    gap: 34px;
    text-align: center;
  }

  .dp-footer-bottom-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .dp-footer-company {
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
  }

  .dp-footer-legal {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 14px;
    font-size: 12px;
    text-align: center;
  }

  .dp-hero-section {
    padding: 30px 0 46px;
  }

  /* Use mobile-specific hero background when available */
  .dp-hero-section {
    background-image: var(--dp-hero-bg-image-mobile, var(--dp-hero-bg-image, none));
  }

  .dp-hero-inner {
    flex-direction: column;
    gap: 20px;
    padding: 0 22px;
  }

  .dp-hero-media {
    order: 1;
    width: 100%;
    margin-bottom: 0;
  }

  .dp-hero-content {
    display: contents;
  }

  .dp-checkout-shipping-trust {
    align-items: flex-start;
    padding: 13px 14px;
  }

  .dp-checkout-shipping-trust__icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }

  .dp-checkout-shipping-trust__icon-image {
    width: 32px;
  }

  .dp-hero-content-top {
    order: 2;
    width: 100%;
    margin-bottom: 8px;
    text-align: center;
  }

  .dp-hero-content-bottom {
    order: 3;
    width: 100%;
    text-align: center;
  }

  .dp-hero-tag {
    display: none;
  }

  .dp-hero-headline {
    margin-bottom: 10px;
    font-size: 28px;
    line-height: 1.06;
  }

  .dp-hero-headline-line {
    white-space: nowrap;
  }

  .dp-hero-subtitle {
    max-width: 240px;
    margin: 0 auto 14px;
    font-size: 14px;
    line-height: 1.52;
  }

  .dp-hero-rating {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin: 0 auto 16px;
  }

  .dp-hero-rating__stars {
    font-size: 15px;
    letter-spacing: 1.5px;
  }

  .dp-hero-rating__text {
    font-size: 12.5px;
  }

  .dp-hero-actions {
    margin-bottom: 4px;
  }

  .dp-hero-action-row {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 10px;
  }

  .dp-hero-btn-primary,
  .dp-hero-btn-secondary {
    width: 100%;
    min-width: 0;
    min-height: 54px;
    padding: 15px 22px;
    font-size: 15px;
    letter-spacing: 0.02em;
  }

  .dp-hero-benefits {
    max-width: 420px;
    justify-content: center;
    gap: 8px 16px;
  }

  .dp-hero-benefit {
    flex: 0 1 190px;
    grid-template-columns: 60px minmax(0, 1fr);
    column-gap: 12px;
    text-align: left;
  }

  .dp-hero-benefit__icon,
  .dp-hero-benefit__icon svg {
    width: 60px;
    height: 60px;
  }

  .dp-home-discovery {
    padding: 56px 0;
  }

  .dp-product-collection {
    padding: 56px 0 64px;
  }

  .dp-feature-hero {
    padding: 32px 0 48px;
  }

  .dp-feature-inner {
    flex-direction: column;
    text-align: center;
    gap: 28px;
  }

  .dp-feature-right {
    margin-top: 0;
  }

  .dp-feature-title {
    max-width: none;
    margin: 0 auto 10px;
    font-size: 26px;
    line-height: 1.08;
  }

  .dp-feature-title-line,
  .dp-feature-highlight {
    display: inline-block;
    white-space: nowrap;
  }

  .dp-feature-copy {
    max-width: 31ch;
    margin: 0 auto 18px;
    font-size: 12.5px;
    line-height: 1.5;
  }

  .dp-feature-actions {
    justify-content: center;
  }

  .dp-feature-image-wrapper {
    border-radius: 14px;
  }

  .dp-home-discovery__header-main,
  .dp-product-collection__header-main,
  .dp-home-discovery__shell,
  .dp-product-hero {
    grid-template-columns: 1fr;
    display: grid;
  }

  .dp-home-discovery__header-main {
    align-items: flex-start;
  }

  .dp-product-collection__header-main {
    align-items: center;
    text-align: center;
  }

  .dp-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dp-home-discovery__feature-card {
    grid-template-columns: 1fr;
  }

  .dp-home-discovery__feature-media {
    min-height: 22rem;
  }

  .dp-home-discovery__paths {
    grid-template-columns: 1fr;
  }

  .dp-featured-collection__grid,
  .dp-home-discovery__paths,
  .dp-form-grid,
  .fdb-results__grid {
    grid-template-columns: 1fr;
  }

  /* Tablet: 2-up, and the zigzag moves to the second column so the wave
     survives the narrower grid. */
  .dp-steps-editorial__item:nth-child(even) {
    margin-top: clamp(32px, 5vw, 56px);
  }

  .dp-steps-editorial__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
    row-gap: 8px;
    padding: 0 12px;
    /* Smaller spill: with only two columns the outer edges are close to the
       viewport, so there is less transparent margin to give away. */
    --dp-step-boost: 1.12;
  }

  .dp-steps-editorial__visual {
    margin: 0 auto clamp(12px, 2vw, 18px);
  }

  .dp-product-hero__title {
    font-size: 2.6rem;
  }

  .dp-product-specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .dp-product-specs__item {
    padding: 12px 14px;
    border-radius: 16px;
  }

  .dp-product-specs__item strong {
    font-size: 0.9rem;
    line-height: 1.3;
  }

  .dp-product-sticky-cta {
    display: block;
  }

  .dp-topbar--personaliser {
    display: none;
  }

  .dp-personaliser-shell {
    /* A little more top space so the (short) first step doesn't sit too high on
       a full page; extra bottom space keeps the fixed CTA bar clear of fields. */
    padding: 48px 0 150px;
  }

  /* Drop the card's backdrop-filter on mobile: it would otherwise become the
     containing block for the fixed CTA below and stop it pinning to the screen.
     The card background is already near-opaque, so this is visually negligible. */
  .dp-personaliser-card {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* Sticky "Se forhåndsvisning" bar so the CTA is always reachable on mobile.
     Standalone personalizer page ONLY — inline on the product page the CTA
     stays in the card flow (the product page has its own sticky CTA bar). */
  body.dreampage-personalizer-request .dp-cta-wrap {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 998;
    margin: 0;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 -6px 24px rgba(15, 23, 42, 0.08);
  }

  .dp-cta-wrap #preview-btn {
    min-height: 54px;
    font-size: 1.2rem;
  }

  .dp-cta-free-note {
    margin-bottom: 8px;
    padding: 5px 12px;
    font-size: 0.78rem;
  }

  .dp-cta-free-note__icon {
    width: 16px;
    height: 16px;
  }

  .dp-personaliser-intro {
    margin-bottom: 18px;
  }

  .dp-personaliser-title {
    font-size: clamp(1.7rem, 5.5vw, 2.4rem);
  }

  .dp-personaliser-card {
    padding: 18px;
    border-radius: 24px;
  }

  .dp-form-grid {
    grid-template-columns: 1fr;
  }

  .dp-form-field--full {
    grid-column: 1;
  }

  /* Personalizer keeps name + gender side by side on mobile — short fields,
     and the two-column row keeps the card compact. */
  .dp-personaliser-card .dp-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dp-personaliser-card .dp-form-field--full {
    grid-column: 1 / -1;
  }

  #preview-btn {
    font-size: 1.25rem;
    min-height: 56px;
  }

  .dp-upload-zone {
    /* Slightly taller first-step box so it feels more substantial on the page. */
    padding: 24px 16px;
    gap: 16px;
  }

  #dp-photo-check-img {
    width: 132px;
    height: 132px;
  }

  .dp-gender-option {
    min-height: 52px;
    font-size: 1.12rem;
  }

  /* Inside the personalizer the gender field shares a row with the name
     input, so the two pills get half a column each — size them down. */
  .dp-personaliser-card .dp-gender-picker {
    gap: 6px;
  }

  .dp-personaliser-card .dp-gender-option {
    min-height: 46px;
    padding: 8px 6px;
    font-size: 0.98rem;
  }

  #dp-prev-grid {
    grid-template-columns: 1fr;
  }

  #dp-rail {
    display: none;
  }
  .dp-trust-payment {
    position: static;
  }

  /* No pattern on mobile. The paper texture only ever read as noise at phone
     width; the footer now separates from the page with a hairline and a soft
     inner shadow instead, over the same near-white the rest of the page uses. */
  .dp-footer-main-bg {
    background-image: linear-gradient(180deg, #ffffff 0%, #fbfaf7 100%);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-top: 1px solid rgba(19, 36, 64, 0.07);
    box-shadow: inset 0 16px 24px -18px rgba(19, 36, 64, 0.14);
  }

  .dp-social-title--mobile {
    display: block;
  }

  .dp-footer-social--mobile {
    display: flex;
  }

  .dp-social-title--desktop,
  .dp-footer-social--desktop {
    display: none;
  }

  /* min(420px, 100%) rather than a bare 420px: the cap must never exceed the
     column it sits in, whatever a browser decides width:100% resolves to. */
  .dp-footer-brand,
  .dp-footer-links,
  .dp-footer-newsletter {
    width: 100%;
    max-width: min(420px, 100%);
    min-width: 0;
    margin-inline: auto;
  }

  .dp-footer-brand img,
  .dp-footer-brand p,
  .dp-footer-subtext {
    margin-left: auto;
    margin-right: auto;
  }

  /* Two per row rather than one link per line. Seven stacked rows made the
     mobile footer over three screens tall. A fixed two-column grid — not
     flex-wrap — so every row breaks in the same place instead of packing a
     different number of links per line depending on label length. */
  .dp-footer-links ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: center;
    align-items: start;
    gap: 2px 16px;
    width: 100%;
    max-width: 340px;
    margin-inline: auto;
  }

  /* Odd link count: the lone last one spans both columns so it sits centred
     under the grid instead of hanging off in the left column. */
  .dp-footer-links ul li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .dp-footer-links li {
    margin-bottom: 0;
  }

  /* Keeps the tap target near 40px now that the rows sit closer together.
     Scoped to the nav list — the Trustpilot badge and the social icons are
     also anchors inside .dp-footer-links and must keep their own display. */
  .dp-footer-links ul a {
    display: inline-block;
    padding: 8px 2px;
  }

  .dp-trustpilot-footer__badge,
  .dp-payment-icons,
  .dp-footer-social,
  .dp-newsletter-form {
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
  }

  /* Exactly four per row, always. This was flex-wrap with 54px boxes, which
     fit 4, 5 or 6 icons per line depending on the phone's width and left a
     ragged last row; the grid pins the break and gives every icon the same
     cell, so the columns line up down the rows.
     Eight sub-columns rather than four because a trailing row of three (NO
     market: 7 icons) can only be centred on a half-cell offset — see below. */
  .dp-footer-newsletter .dp-payment-icons {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    justify-content: center;
    align-items: center;
    gap: 9px;
    width: 100%;
    max-width: 312px;
    margin-inline: auto;
  }

  .dp-footer-newsletter .dp-payment-icons > * {
    grid-column: auto / span 2;
  }

  /* Centre a short last row. :nth-child(4n+1) is a row-opening icon and
     :nth-last-child(n) says how many are left, so one sub-column of indent
     per missing pair: 3 left → half a slot, 2 left → a full slot. The span
     has to be restated — a bare grid-column-start would leave the end at
     auto and shrink the icon to a single sub-column. */
  .dp-footer-newsletter .dp-payment-icons > :nth-child(4n + 1):nth-last-child(3) {
    grid-column: 2 / span 2;
  }

  .dp-footer-newsletter .dp-payment-icons > :nth-child(4n + 1):nth-last-child(2) {
    grid-column: 3 / span 2;
  }

  /* Icons fill their cell — noticeably larger than the old 54×30 boxes. */
  .dp-footer-newsletter .dp-payment-icons img,
  .dp-footer-newsletter .dp-payment-icons .dp-payment-icons__icon {
    width: 100%;
    height: 38px;
    padding: 6px 7px;
    object-fit: contain;
    border-radius: 7px;
  }

  /* Klarna: same box as the others but cover so the image fills it */
  .dp-footer-newsletter .dp-payment-icons .dp-icon-klarna {
    width: 100%;
    height: 38px;
    padding: 0;
    object-fit: cover;
  }
}

/* Phones keep the two-column grid, so the section stays short enough to scroll
   past. Everything here is about buying width back for the artwork: tighter
   gutters, a small spill, and a stacked caption. */
@media (max-width: 699px) {
  .dp-steps-editorial {
    padding-top: clamp(44px, 9vw, 60px);
  }

  .dp-steps-editorial__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 6px;
    row-gap: clamp(18px, 4vw, 28px);
    padding: 0 6px;
    /* Modest spill. At 390px this puts the outer edges ~9px inside the
       viewport, and what overhangs is the PNGs' transparent margin — the
       section's overflow:hidden is the backstop either way. */
    --dp-step-boost: 1.15;
  }

  /* Keep the wave, at a smaller amplitude than the wider breakpoints. */
  .dp-steps-editorial__item:nth-child(even) {
    margin-top: clamp(26px, 6vw, 44px);
  }

  .dp-steps-editorial__visual {
    margin: 0 auto clamp(10px, 2.5vw, 14px);
  }

  /* Number stacks above the label instead of sitting beside it — inline, the
     badge plus its gap ate 38px of a ~170px column and forced titles like
     "Last opp bilde av barnet" into three lines. */
  .dp-steps-editorial__caption {
    flex-direction: column;
    gap: 8px;
  }

  .dp-steps-editorial__num {
    width: 28px;
    height: 28px;
    font-size: 13px;
  }

  .dp-steps-editorial__title {
    font-size: 16px;
    text-align: center;
    text-wrap: balance;
  }

  /* Four descriptions across two narrow columns read as a wall of text, and
     the numbered titles already say the same thing ("Velg en bok", "Last opp
     bilde av barnet", …). Dropped visually, kept for screen readers and
     crawlers rather than display:none'd out of the document. */
  .dp-steps-editorial__text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* ── About Page ─────────────────────────────────────────────────────── */
.dp-about-page {
  background: #fff;
  color: #111;
}

.dp-about-page__container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 48px 24px 68px;
}

.dp-about-page__hero {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  padding: 8px 0 42px;
}

.dp-about-page__eyebrow {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(19, 36, 64, 0.46);
}

.dp-about-page__title {
  margin: 0;
  font-family: "Playfair Display", serif;
  font-size: clamp(2.45rem, 5vw, 5rem);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.045em;
  color: #132440;
}

.dp-about-page__intro {
  max-width: 620px;
  margin: 18px auto 0;
  font-size: 1.02rem;
  line-height: 1.72;
  color: rgba(19, 36, 64, 0.65);
}

.dp-about-page__intro p {
  margin: 0;
}

.dp-about-page__content {
  max-width: 820px;
  margin: 0 auto;
}

.dp-about-page__section {
  padding: 30px 0;
  border-top: 1px solid rgba(19, 36, 64, 0.08);
}

.dp-about-page__section--first {
  border-top: 0;
  padding-top: 0;
}

.dp-about-page__heading {
  margin: 0 0 14px;
  font-family: "Playfair Display", serif;
  font-size: clamp(2rem, 3.1vw, 3rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: #132440;
}

.dp-about-page__text {
  max-width: 760px;
  font-size: 1.02rem;
  line-height: 1.78;
  color: rgba(19, 36, 64, 0.72);
}

.dp-about-page__text p {
  margin: 0 0 1rem;
}

.dp-about-page__text p:last-child {
  margin-bottom: 0;
}

.dp-about-page__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 14px;
}

.dp-about-page__step {
  padding: 18px 18px 16px;
  border: 1px solid rgba(19, 36, 64, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.42);
}

.dp-about-page__step-top {
  display: flex;
  align-items: center;
  margin-bottom: 14px;
}

.dp-about-page__step-number {
  font-size: 0.76rem;
  line-height: 1;
  letter-spacing: 0.1em;
  color: rgba(19, 36, 64, 0.4);
}

.dp-about-page__step-title {
  margin: 0 0 8px;
  font-size: 1.16rem;
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -0.02em;
  color: #132440;
}

.dp-about-page__step-text {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.68;
  color: rgba(19, 36, 64, 0.68);
}

.dp-about-page__trust {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 0;
}

.dp-about-page__trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid rgba(19, 36, 64, 0.08);
  font-size: 0.99rem;
  line-height: 1.52;
  color: rgba(19, 36, 64, 0.78);
}

.dp-about-page__trust-check {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(91, 63, 214, 0.1);
  color: var(--dp-accent-strong);
  font-size: 0.72rem;
  font-weight: 700;
}

.dp-about-page__section--closing {
  padding-bottom: 0;
}

.dp-about-page__closing {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  padding-top: 4px;
}

.dp-about-page__closing p {
  margin: 0 0 28px;
  font-family: "Playfair Display", serif;
  font-size: clamp(1.5rem, 2.15vw, 2.05rem);
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: rgba(19, 36, 64, 0.86);
}

.dp-about-page__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 13px 32px;
  border-radius: 14px;
  background: linear-gradient(135deg, #6a5ae0, #5b3fd6);
  box-shadow: 0 10px 28px rgba(91, 63, 214, 0.22);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.dp-about-page__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(91, 63, 214, 0.3);
  color: #fff;
}

@media (max-width: 989px) {
  .dp-about-page__steps {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

@media (max-width: 749px) {
  .dp-about-page__container {
    padding: 32px 16px 48px;
  }

  .dp-about-page__hero {
    padding-top: 4px;
    padding-bottom: 30px;
  }

  .dp-about-page__title {
    font-size: clamp(2.1rem, 9vw, 3.3rem);
  }

  .dp-about-page__section {
    padding: 24px 0;
  }

  .dp-about-page__heading {
    font-size: clamp(1.8rem, 7vw, 2.45rem);
  }

  .dp-about-page__trust {
    grid-template-columns: 1fr;
  }

  .dp-about-page__step {
    padding: 16px 16px 15px;
    border-radius: 14px;
  }

  .dp-about-page__closing p {
    font-size: 1.28rem;
  }
}

/* ── End About Page ─────────────────────────────────────────────────── */

.dp-page-shell,
.dp-blog-page,
.dp-article-page {
  background: #fff;
  padding: 56px 20px 110px;
}

.dp-page-shell__inner,
.dp-blog-page__inner {
  width: min(1120px, calc(100vw - 40px));
  margin: 0 auto;
}

.dp-page-shell__inner {
  width: min(860px, calc(100vw - 40px));
}

.dp-page-shell__inner--wide {
  width: var(--dp-width);
}

.dp-page-hero {
  text-align: center;
  margin-bottom: 28px;
}

.dp-page-kicker,
.dp-article-template__eyebrow {
  margin: 0 0 14px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(19, 36, 64, 0.56);
}

.dp-page-title,
.dp-article-template__title {
  margin: 0;
  font-family: "Playfair Display", serif;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #132440;
}

/* Checkout title uses the brand sans (Poppins), not the editorial serif. */
body.woocommerce-checkout .dp-page-title {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.dp-page-article {
  background: #fff;
  border: 1px solid rgba(19, 36, 64, 0.1);
  border-radius: 28px;
  box-shadow: 0 18px 46px rgba(19, 36, 64, 0.07);
  padding: clamp(28px, 4vw, 56px);
}

.entry-content {
  color: rgba(19, 36, 64, 0.84);
  font-size: 1.04rem;
  line-height: 1.82;
}

.entry-content > :first-child {
  margin-top: 0;
}

.entry-content > :last-child {
  margin-bottom: 0;
}

.entry-content h2,
.dp-article-template__content h2 {
  margin: 2.4rem 0 1rem;
  font-size: clamp(1.45rem, 2vw, 1.95rem);
  line-height: 1.2;
  color: #132440;
}

.entry-content h3,
.dp-article-template__content h3 {
  margin: 1.9rem 0 0.85rem;
  font-size: 1.16rem;
  line-height: 1.35;
  color: #132440;
}

.entry-content p,
.entry-content ul,
.entry-content ol,
.entry-content blockquote {
  margin: 0 0 1.1rem;
}

.entry-content ul,
.entry-content ol {
  padding-left: 1.4rem;
}

.entry-content a,
.dp-article-template__content a {
  color: #132440;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* The generic entry-content link colour must not bleed into the solid
   purple buttons rendered inside the cart page content. */
.entry-content a.dp-cart-empty__button,
.entry-content a.dp-product-tile__button {
  color: #fff;
  text-decoration: none;
}

.entry-content a.dp-cart-empty__button--ghost {
  color: #132440;
}

.entry-content hr {
  margin: 2rem 0;
  border: 0;
  border-top: 1px solid rgba(19, 36, 64, 0.12);
}

.dp-page-copy {
  max-width: 40rem;
  margin: 14px auto 0;
  color: rgba(19, 36, 64, 0.72);
  font-size: 1rem;
  line-height: 1.7;
}

.woocommerce-account .dp-page-shell__inner {
  width: min(1160px, calc(100vw - 40px));
}

.dp-page-article--account {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.dp-page-hero--account {
  margin-bottom: 36px;
}

.dp-page-hero--account .dp-page-title {
  font-size: clamp(2.4rem, 4vw, 3.7rem);
}

.dp-page-hero--account .dp-page-copy {
  max-width: 42rem;
}

.entry-content--account {
  font-size: 1rem;
  line-height: 1.7;
}

.entry-content--account > .woocommerce {
  display: block;
}

.woocommerce-account .woocommerce-notices-wrapper {
  margin-bottom: 24px;
}

.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-message {
  margin: 0 0 16px;
  padding: 16px 18px 16px 48px;
  border: 1px solid rgba(19, 36, 64, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  color: rgba(19, 36, 64, 0.82);
}

.dp-account-gate {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
  max-width: 1020px;
  margin: 0 auto;
}

.dp-account-gate--single {
  grid-template-columns: minmax(0, 520px);
  justify-content: center;
}

.dp-account-panel,
.dp-account-nav__card,
.dp-account-content {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(19, 36, 64, 0.1);
  border-radius: 28px;
  box-shadow: 0 18px 46px rgba(19, 36, 64, 0.07);
}

/* Premium auth panels: soft gradient surface, gradient accent strip, depth. */
.dp-account-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(26px, 3vw, 38px);
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(94, 204, 255, 0.08) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(250, 248, 255, 0.97) 100%);
  box-shadow: 0 24px 60px rgba(36, 24, 88, 0.1);
}

.dp-account-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--dp-accent) 0%, var(--dp-accent-light) 100%);
}

.dp-account-panel--login {
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(106, 90, 224, 0.1) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(247, 244, 255, 0.98) 100%);
}

.dp-account-panel__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dp-account-panel__eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dp-accent);
}

.dp-account-panel__intro {
  margin-bottom: 24px;
}

.dp-account-panel__eyebrow,
.dp-account-nav__eyebrow,
.dp-account-dashboard__eyebrow {
  margin: 0 0 10px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(19, 36, 64, 0.54);
}

.dp-account-panel__intro h2,
.dp-account-dashboard__header h2 {
  margin: 0 0 10px;
  font-family: "Playfair Display", serif;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--dp-text);
}

.dp-account-panel__intro p,
.dp-account-dashboard__header p {
  margin: 0;
  color: rgba(19, 36, 64, 0.7);
  line-height: 1.7;
}

.dp-account-form .form-row {
  margin-bottom: 18px;
}

.dp-account-form label {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--dp-text);
  font-size: 0.95rem;
  font-weight: 600;
}

.dp-account-form .input-text {
  min-height: 54px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(19, 36, 64, 0.16);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.dp-account-form .input-text:focus {
  outline: none;
  border-color: var(--dp-accent);
  box-shadow: 0 0 0 4px rgba(106, 90, 224, 0.14);
}

.dp-account-form__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.dp-account-form__actions .woocommerce-form-login__rememberme {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(19, 36, 64, 0.78);
  font-size: 0.94rem;
}

.dp-account-form__actions .woocommerce-form__input-checkbox {
  width: 18px;
  height: 18px;
  margin: 0;
}

.dp-account-form__hint,
.woocommerce-account .lost_password {
  margin: 0;
  color: rgba(19, 36, 64, 0.66);
  font-size: 0.95rem;
}

.woocommerce-account .lost_password a {
  color: var(--dp-accent-strong);
  font-weight: 600;
  text-decoration: none;
}

.woocommerce-account .lost_password a:hover {
  text-decoration: underline;
}

.woocommerce-account .button,
.woocommerce-account .woocommerce-Button,
.woocommerce-account .woocommerce-button,
.woocommerce-account a.button,
.woocommerce-account input.button {
  min-height: 52px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 12px !important;
  background: var(--dp-accent-strong);
  box-shadow: none;
  color: #fff;
  font-weight: 600;
  line-height: 1;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.woocommerce-account .button:hover,
.woocommerce-account .woocommerce-Button:hover,
.woocommerce-account .woocommerce-button:hover,
.woocommerce-account a.button:hover,
.woocommerce-account input.button:hover {
  background: var(--dp-accent);
  box-shadow: 0 14px 26px rgba(91, 63, 214, 0.16);
  transform: translateY(-1px);
}

/* ── Auth submit buttons — Apple "liquid glass" (matches site CTAs) ───────── */
.dp-account-form .dp-account-submit {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 54px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 14px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.02) 44%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(135deg, rgba(106, 90, 224, 0.97), rgba(91, 63, 214, 0.98));
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  color: #fff;
  font-weight: 700;
  box-shadow:
    0 14px 30px rgba(91, 63, 214, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -3px 8px rgba(60, 42, 150, 0.3);
  transition: transform 0.2s ease, box-shadow 0.25s ease, filter 0.2s ease;
}

.dp-account-form .dp-account-submit::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 46%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0));
  opacity: 0.6;
  pointer-events: none;
}

.dp-account-form .dp-account-submit:hover {
  transform: translateY(-1px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.03) 44%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(135deg, rgba(112, 96, 232, 0.98), rgba(96, 68, 224, 0.99));
  box-shadow:
    0 18px 38px rgba(91, 63, 214, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -3px 8px rgba(60, 42, 150, 0.3);
}

.dp-account-form .dp-account-submit:active {
  transform: translateY(0) scale(0.99);
  filter: brightness(0.98);
}

/* Register = secondary frosted glass so the login action reads as primary. */
.dp-account-form .dp-account-submit--ghost {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.45) 100%);
  border: 1px solid rgba(91, 63, 214, 0.28);
  color: var(--dp-accent-strong);
  box-shadow: 0 10px 24px rgba(19, 36, 64, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.dp-account-form .dp-account-submit--ghost:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(247, 244, 255, 0.6) 100%);
  box-shadow: 0 14px 30px rgba(19, 36, 64, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* ── Register benefits ───────────────────────────────────────────────────── */
.dp-account-benefits {
  list-style: none;
  margin: 0 0 22px;
  padding: 16px 18px;
  display: grid;
  gap: 11px;
  border-radius: 16px;
  background: rgba(106, 90, 224, 0.05);
  border: 1px solid rgba(106, 90, 224, 0.12);
}

.dp-account-benefits li {
  position: relative;
  padding-left: 30px;
  font-size: 0.92rem;
  line-height: 1.4;
  color: rgba(19, 36, 64, 0.8);
}

.dp-account-benefits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--dp-accent-strong) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}

/* ── Trust row (spans both panels) ───────────────────────────────────────── */
.dp-account-trust {
  grid-column: 1 / -1;
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 30px;
}

.dp-account-trust__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(19, 36, 64, 0.66);
}

.dp-account-trust__item svg {
  color: var(--dp-accent-strong);
  flex-shrink: 0;
}

/* ── Account details (edit-account) page ─────────────────────────────────── */
.dp-account-details__head {
  margin-bottom: 22px;
}

.dp-account-details__head h2 {
  margin: 6px 0 8px;
  font-family: "Playfair Display", serif;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--dp-text);
}

.dp-account-details__head p {
  margin: 0;
  color: rgba(19, 36, 64, 0.7);
}

.dp-account-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 18px;
}

.dp-account-form__grid .form-row {
  width: 100%;
  float: none;
  margin: 0 0 18px;
}

.dp-account-form__note {
  display: block;
  margin-top: 6px;
  font-size: 0.85rem;
  color: rgba(19, 36, 64, 0.55);
}

.dp-password-fieldset {
  margin: 8px 0 22px;
  padding: 20px;
  border: 1px solid rgba(19, 36, 64, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.6);
}

.dp-password-fieldset legend {
  padding: 0 8px;
  font-weight: 700;
  color: var(--dp-text);
}

.dp-password-fieldset__hint {
  margin: 0 0 14px;
}

.dp-account-form__submit-row {
  margin: 4px 0 0;
}

.dp-account-layout {
  display: grid;
  grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.dp-account-nav__card {
  position: sticky;
  top: 112px;
  padding: 24px;
}

.dp-account-nav__user {
  margin: 0 0 18px;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--dp-text);
}

.dp-account-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dp-account-nav li + li {
  margin-top: 8px;
}

/* Apple "liquid glass" account-menu buttons. */
.dp-account-nav a {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid rgba(19, 36, 64, 0.1);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(245, 243, 255, 0.45) 100%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  box-shadow: 0 4px 12px rgba(19, 36, 64, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  color: rgba(19, 36, 64, 0.82);
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.dp-account-nav a:hover {
  transform: translateY(-1px);
  border-color: rgba(91, 63, 214, 0.24);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(243, 240, 255, 0.6) 100%);
  box-shadow: 0 8px 20px rgba(91, 63, 214, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  color: var(--dp-accent-strong);
}

.dp-account-nav li.is-active a {
  border-color: rgba(91, 63, 214, 0.35);
  background: linear-gradient(135deg, rgba(106, 90, 224, 0.18) 0%, rgba(91, 63, 214, 0.12) 100%);
  color: var(--dp-accent-strong);
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(91, 63, 214, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.dp-account-content {
  padding: clamp(24px, 3vw, 36px);
}

.dp-account-dashboard__header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 24px;
}

.dp-account-dashboard__logout {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 12px;
  border: 1px solid rgba(19, 36, 64, 0.12);
  background: rgba(255, 255, 255, 0.92);
  color: var(--dp-text);
  font-weight: 600;
  text-decoration: none;
}

.dp-account-dashboard__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.dp-account-dashboard__card {
  display: block;
  position: relative;
  overflow: hidden;
  min-height: 176px;
  padding: 22px 22px 52px;
  border: 1px solid rgba(19, 36, 64, 0.1);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(250, 247, 255, 0.96) 100%);
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(19, 36, 64, 0.04);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.dp-account-dashboard__card h3 {
  margin: 0 0 10px;
  font-size: 1.08rem;
  color: var(--dp-text);
}

.dp-account-dashboard__card p {
  margin: 0;
  color: rgba(19, 36, 64, 0.7);
  line-height: 1.65;
}

.woocommerce-account .woocommerce-MyAccount-content > p:first-child {
  margin-top: 0;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table,
.woocommerce-account .woocommerce-Addresses,
.woocommerce-account form.edit-account,
.woocommerce-account form.woocommerce-EditAccountForm,
.woocommerce-account form.woocommerce-address-fields,
.woocommerce-account form.lost_reset_password {
  border-radius: 22px;
}

.woocommerce-account .woocommerce-Address,
.woocommerce-account .woocommerce-address-fields,
.woocommerce-account form.edit-account,
.woocommerce-account form.woocommerce-EditAccountForm,
.woocommerce-account form.lost_reset_password,
.woocommerce-account .woocommerce-orders-table {
  margin-top: 0;
}

.woocommerce-account .woocommerce-Addresses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.woocommerce-account .woocommerce-Address,
.woocommerce-account .woocommerce-customer-details address {
  padding: 22px;
  border: 1px solid rgba(19, 36, 64, 0.1);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.96);
}

.woocommerce-account .woocommerce-Address-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.woocommerce-account .woocommerce-orders-table,
.woocommerce-account table.shop_table {
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
}

.woocommerce-account table.shop_table th,
.woocommerce-account table.shop_table td {
  padding: 16px 14px;
}

.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
  color: var(--dp-text);
}

.woocommerce-account .woocommerce-MyAccount-content .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MY ACCOUNT — Premium Enhancement Layer
   All selectors scoped to .woocommerce-account or .dp-account-*
   No effect on cart, checkout, product, shop, or any other WooCommerce page.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Nav: user row with avatar ────────────────────────────────────────────── */
.dp-account-nav__user-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 4px;
}

.dp-account-nav__user-row .dp-account-nav__eyebrow {
  margin-bottom: 4px;
}

.dp-account-nav__user-row .dp-account-nav__user {
  margin: 0;
}

.dp-account-nav__avatar {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--dp-accent) 0%, var(--dp-accent-strong) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0;
  box-shadow: 0 4px 14px rgba(91, 63, 214, 0.28);
}

/* ── Nav: visual divider ──────────────────────────────────────────────────── */
.dp-account-nav__divider {
  height: 1px;
  background: rgba(19, 36, 64, 0.08);
  margin: 16px 0;
}

/* ── Dashboard cards: hover lift + arrow indicator ───────────────────────── */
.dp-account-dashboard__card::after {
  content: '→';
  position: absolute;
  bottom: 20px;
  right: 20px;
  font-size: 1rem;
  line-height: 1;
  color: rgba(106, 90, 224, 0.32);
  transition: color 0.22s ease, transform 0.22s ease;
}

.dp-account-dashboard__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 44px rgba(91, 63, 214, 0.10);
  border-color: rgba(106, 90, 224, 0.22);
}

.dp-account-dashboard__card:hover::after {
  color: var(--dp-accent-strong);
  transform: translateX(4px);
}

/* ── Dashboard card headings: serif weight ───────────────────────────────── */
.dp-account-dashboard__card h3 {
  font-family: "Playfair Display", serif;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ── Logout button: hover state ──────────────────────────────────────────── */
.dp-account-dashboard__logout {
  transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}

.dp-account-dashboard__logout:hover {
  border-color: rgba(19, 36, 64, 0.18);
  background: rgba(255, 255, 255, 0.98);
  color: rgba(19, 36, 64, 0.6);
}

/* ── Forms inside logged-in content area ─────────────────────────────────── */
.dp-account-content label,
.woocommerce-account .dp-account-content .form-row label {
  display: inline-block;
  margin-bottom: 7px;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--dp-text);
}

.dp-account-content .form-row,
.woocommerce-account .dp-account-content p.form-row {
  margin-bottom: 20px;
}

.dp-account-content .input-text,
.woocommerce-account .dp-account-content input[type="text"],
.woocommerce-account .dp-account-content input[type="email"],
.woocommerce-account .dp-account-content input[type="password"],
.woocommerce-account .dp-account-content input[type="tel"],
.woocommerce-account .dp-account-content select {
  min-height: 50px;
  padding: 0 16px;
  border: 1.5px solid rgba(19, 36, 64, 0.12);
  border-radius: 14px;
  background: #fff;
  color: var(--dp-text);
  font-size: 0.97rem;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  width: 100%;
  box-sizing: border-box;
}

.dp-account-content .input-text:focus,
.woocommerce-account .dp-account-content input[type="text"]:focus,
.woocommerce-account .dp-account-content input[type="email"]:focus,
.woocommerce-account .dp-account-content input[type="password"]:focus,
.woocommerce-account .dp-account-content input[type="tel"]:focus,
.woocommerce-account .dp-account-content select:focus {
  outline: none;
  border-color: var(--dp-accent);
  box-shadow: 0 0 0 4px rgba(106, 90, 224, 0.11);
}

/* ── Password fieldset ───────────────────────────────────────────────────── */
.woocommerce-account .dp-account-content fieldset {
  border: 1.5px solid rgba(19, 36, 64, 0.08);
  border-radius: 16px;
  padding: 22px 24px 24px;
  margin: 26px 0 20px;
}

.woocommerce-account .dp-account-content fieldset legend {
  padding: 0 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dp-text-muted);
}

/* ── Content section headings ────────────────────────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-content h2 {
  font-family: "Playfair Display", serif;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: 6px;
}

.woocommerce-account .woocommerce-MyAccount-content h3 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ── Orders table: premium header + row hover ────────────────────────────── */
.woocommerce-account table.shop_table {
  width: 100%;
  border: 1.5px solid rgba(19, 36, 64, 0.09);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 18px;
  overflow: hidden;
}

.woocommerce-account table.shop_table thead tr {
  background: rgba(250, 247, 255, 0.7);
}

.woocommerce-account table.shop_table thead th {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dp-text-muted);
  border-bottom: 1.5px solid rgba(19, 36, 64, 0.09);
  padding: 13px 16px;
  white-space: nowrap;
}

.woocommerce-account table.shop_table tbody tr {
  transition: background-color 0.15s ease;
}

.woocommerce-account table.shop_table tbody tr:hover {
  background: rgba(106, 90, 224, 0.03);
}

.woocommerce-account table.shop_table tbody td {
  padding: 15px 16px;
  border-bottom: 1px solid rgba(19, 36, 64, 0.06);
  vertical-align: middle;
}

.woocommerce-account table.shop_table tbody tr:last-child td {
  border-bottom: none;
}

/* ── Order status badge ──────────────────────────────────────────────────── */
.woocommerce-account table.shop_table .order-status,
.woocommerce-account mark.order-status {
  display: inline-flex;
  align-items: center;
  padding: 3px 11px;
  border-radius: 100px;
  font-size: 0.77rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: capitalize;
  background: rgba(106, 90, 224, 0.09);
  color: var(--dp-accent-strong);
}

/* ── Addresses: edit link pill ───────────────────────────────────────────── */
.woocommerce-account .woocommerce-Address-title a {
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--dp-accent-strong);
  text-decoration: none;
  padding: 5px 13px;
  border-radius: 8px;
  background: rgba(106, 90, 224, 0.08);
  transition: background-color 0.18s ease;
  white-space: nowrap;
}

.woocommerce-account .woocommerce-Address-title a:hover {
  background: rgba(106, 90, 224, 0.15);
}

.woocommerce-account .woocommerce-Address-title h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dp-text);
}

/* ── Empty / info states ─────────────────────────────────────────────────── */
.woocommerce-account .dp-account-content .woocommerce-message {
  padding: 20px 22px;
  border-radius: 16px;
  border: 1.5px solid rgba(19, 36, 64, 0.09);
  background: rgba(250, 247, 255, 0.7);
  color: var(--dp-text-soft);
}

/* ── Tablet: horizontal pill nav (≤989 px) ───────────────────────────────── */
@media (max-width: 989px) {
  .dp-account-nav__card {
    padding: 20px;
  }
  .dp-account-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .dp-account-nav li + li {
    margin-top: 0;
  }
  .dp-account-nav a {
    min-height: 38px;
    padding: 0 14px;
    font-size: 0.88rem;
    border-radius: 10px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────── */

.dp-faq {
  background: #fff;
  color: #132440;
  padding: clamp(56px, 7vw, 96px) 20px;
}

.dp-faq--homepage {
  padding-bottom: 112px;
}

.dp-faq--page {
  padding-top: 0;
}

.dp-faq__inner {
  max-width: 980px;
  margin: 0 auto;
}

.dp-faq__header {
  text-align: center;
  margin-bottom: 26px;
}

.dp-faq__kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 12px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(19, 36, 64, 0.14);
  background: rgba(19, 36, 64, 0.035);
  color: #132440;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.dp-faq__title {
  margin: 0 0 10px;
  font-family: "Playfair Display", serif;
  font-size: clamp(30px, 3.1vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #132440;
}

.dp-faq__subtitle {
  max-width: 72ch;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.85;
  color: rgba(19, 36, 64, 0.84);
}

.dp-faq__card {
  position: relative;
  margin-top: 22px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid rgba(19, 36, 64, 0.12);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.08);
}

.dp-faq__card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, rgba(62, 199, 243, 0.95), rgba(62, 199, 243, 0.35), rgba(19, 36, 64, 0.12));
}

.dp-faq__list {
  display: grid;
  gap: 12px;
}

.dp-faq__item {
  overflow: hidden;
  border: 1px solid rgba(19, 36, 64, 0.1);
  border-radius: 16px;
  background: #fff;
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}

.dp-faq__item:hover {
  transform: translateY(-1px);
  border-color: rgba(19, 36, 64, 0.16);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.08);
}

.dp-faq__question {
  width: 100%;
  padding: 18px;
  border: 0;
  background: transparent;
  color: #132440;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  text-align: left;
  cursor: pointer;
}

.dp-faq__question[aria-expanded="true"] {
  background: rgba(19, 36, 64, 0.02);
}

.dp-faq__question:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(19, 36, 64, 0.16);
  border-radius: 14px;
}

.dp-faq__question-text {
  font-size: 16px;
  line-height: 1.45;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: rgba(19, 36, 64, 0.92);
}

.dp-faq__arrow {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #132440;
  background: rgba(62, 199, 243, 0.22);
  border: 1px solid rgba(62, 199, 243, 0.55);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.dp-faq__question[aria-expanded="true"] .dp-faq__arrow {
  transform: rotate(180deg);
}

.dp-faq__answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s ease;
}

.dp-faq__answer-inner {
  padding: 0 18px 20px;
  border-top: 1px solid rgba(19, 36, 64, 0.08);
  color: rgba(19, 36, 64, 0.8);
  font-size: 15px;
  line-height: 1.8;
}

.dp-faq__answer-inner p {
  margin: 18px 0 0;
}

.dp-faq__answer-inner p:first-child {
  margin-top: 16px;
}

.blog-page-header {
  text-align: center;
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 0 3rem;
}

.blog-page-header__eyebrow {
  margin: 0 0 1.4rem;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(19, 36, 64, 0.45);
}

.blog-page-header__title {
  margin: 0 0 1.6rem;
  font-family: "Playfair Display", serif;
  font-size: clamp(3rem, 7vw, 5.2rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #1d1d1f;
}

.blog-page-header__tagline {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.7;
  color: rgba(19, 36, 64, 0.56);
}

.blog-category-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
  max-width: 56rem;
  margin: 0 auto 4.2rem;
}

.blog-category-nav__item {
  display: inline-block;
  padding: 0.82rem 2.2rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(106, 90, 224, 0.22);
  background: transparent;
  color: rgba(19, 36, 64, 0.62);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

.blog-category-nav__item:hover {
  color: #6a5ae0;
  border-color: rgba(106, 90, 224, 0.42);
  background: rgba(106, 90, 224, 0.06);
}

.blog-category-nav__item.is-active {
  color: #fff;
  background: linear-gradient(135deg, #6a5ae0, #5b3fd6);
  border-color: #6a5ae0;
}

.dp-blog-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}

.dp-blog-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(19, 36, 64, 0.08);
  border-radius: 1.2rem;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.22s ease, transform 0.22s ease;
}

.dp-blog-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.dp-blog-card__media-link,
.dp-blog-card__title a,
.dp-blog-card__read-more {
  text-decoration: none;
}

.dp-blog-card__image-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: rgba(19, 36, 64, 0.04);
}

.dp-blog-card__image-wrap--empty {
  display: flex;
  align-items: center;
  justify-content: center;
}

.dp-blog-card__image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.dp-blog-card:hover .dp-blog-card__image {
  transform: scale(1.04);
}

.dp-blog-card__image-placeholder {
  font-size: 2.8rem;
  line-height: 1;
  opacity: 0.14;
}

.dp-blog-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 2rem 2.2rem 2.35rem;
}

.dp-blog-card__date {
  display: block;
  margin-bottom: 0.9rem;
  color: rgba(19, 36, 64, 0.4);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dp-blog-card__title {
  margin: 0 0 1rem;
  font-family: "Playfair Display", serif;
  font-size: 1.65rem;
  line-height: 1.28;
  letter-spacing: -0.01em;
}

.dp-blog-card__title a {
  color: #132440;
}

.dp-blog-card__excerpt {
  flex: 1;
  margin: 0 0 1.6rem;
  color: rgba(19, 36, 64, 0.6);
  font-size: 1rem;
  line-height: 1.7;
}

.dp-blog-card__read-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  color: #132440;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.blog-empty-state {
  text-align: center;
  padding: 4.5rem 2rem 6rem;
}

.blog-empty-state__symbol {
  margin-bottom: 2rem;
  font-size: 2.8rem;
  line-height: 1;
  opacity: 0.16;
}

.blog-empty-state__heading {
  margin: 0 0 1rem;
  font-family: "Playfair Display", serif;
  font-size: clamp(2rem, 4vw, 2.8rem);
  letter-spacing: -0.02em;
  color: #132440;
}

.blog-empty-state__text {
  margin: 0;
  color: rgba(19, 36, 64, 0.52);
  font-size: 1.04rem;
  line-height: 1.7;
}

.dp-pagination {
  margin-top: 2.6rem;
}

.dp-pagination .page-numbers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dp-pagination .page-numbers a,
.dp-pagination .page-numbers span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(19, 36, 64, 0.12);
  border-radius: 999px;
  color: #132440;
  text-decoration: none;
  font-size: 0.92rem;
}

.dp-pagination .page-numbers .current {
  background: #132440;
  color: #fff;
  border-color: #132440;
}

.dp-article-template {
  max-width: 980px;
  margin: 0 auto;
}

.dp-article-template__hero {
  overflow: hidden;
  margin-bottom: 2.4rem;
  border-radius: 28px;
}

.dp-article-template__hero-image {
  display: block;
  width: 100%;
  height: auto;
}

.dp-article-template__inner {
  max-width: 780px;
  margin: 0 auto;
}

.dp-article-template__meta {
  margin: 1rem 0 2rem;
  color: rgba(19, 36, 64, 0.5);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dp-article-template__content {
  color: rgba(19, 36, 64, 0.82);
  font-size: 1.08rem;
  line-height: 1.88;
}

.dp-article-template__content > :first-child {
  margin-top: 0;
}

.dp-article-template__back {
  margin-top: 2.8rem;
}

.dp-article-template__back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #132440;
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

@media (min-width: 750px) {
  .dp-blog-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.8rem;
  }
}

@media (min-width: 990px) {
  .dp-blog-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 3.2rem;
  }

  .blog-page-header {
    padding-bottom: 4rem;
  }
}

@media (max-width: 749px) {
  .admin-bar .dp-header {
    top: 46px;
  }

  .dp-topbar__track {
    gap: 90px;
  }

  .dp-header__inner,
  .dp-home-discovery__header,
  .dp-home-discovery__shell,
  .dp-product-collection__header,
  .dp-product-grid,
  .dp-featured-collection,
  .dp-product-hero,
  .dp-product-faq,
  .dp-blog-page__inner,
  .dp-page-shell__inner,
  .dp-article-template__inner,
  .dp-preview-shell,
  .dp-personaliser-page {
    width: min(calc(100vw - 28px), 100%);
  }

  /* The footer measures its gutters against its own container instead of the
     viewport. 100vw counts a classic scrollbar and drifts the moment anything
     on the page overflows sideways — and a footer that drifts is visible on
     every single page. */
  .dp-footer-inner,
  .dp-footer-bottom-inner {
    width: 100%;
    padding-left: 14px;
    padding-right: 14px;
  }

  .dp-header__actions {
    width: auto;
  }

  /* Trustpilot proof card, phones only. Absolutely positioned against the
     media block so the hero keeps exactly the height it had — the card hangs
     over the bottom-left corner of the photo and past its edge. */
  .dp-hero-media {
    position: relative;
  }

  .dp-hero-proof {
    display: block;
    position: absolute;
    z-index: 2;
    /* Hangs off the photo's bottom-left corner and sits mostly below it, in
       the pocket left of the centred headline. -38px is the width of the
       gutter, so the box starts at the screen edge; the artwork's own
       transparent margin keeps the circle a few px clear of it.
       Photo height and headline position scale together, so one fixed offset
       holds the clearance to both headline lines across phone widths. */
    left: -38px;
    bottom: -40px;
    width: clamp(72px, 22vw, 96px);
    line-height: 0;
    transform: rotate(-7deg);
    transform-origin: 50% 50%;
    filter: drop-shadow(0 12px 26px rgba(19, 36, 64, 0.24));
    animation: dp-hero-proof-pulse 3.4s ease-in-out infinite;
  }

  .dp-hero-proof img {
    width: 100%;
    height: auto;
  }

  /* Nothing to size here any more — phones paint a flat near-white footer,
     no pattern. Kept as a no-op anchor so the old 1400×720 tile can't come
     back by accident. */
  .dp-footer-main-bg {
    background-size: cover;
    background-position: center;
  }

  .dp-product-collection {
    padding: 44px 0 56px;
  }

  .dp-product-collection__header {
    text-align: center;
  }

  .dp-product-collection__view-all {
    display: none;
  }

  .dp-product-collection__title {
    font-size: 1.92rem;
  }

  .dp-product-collection__subtitle {
    max-width: 30ch;
    margin-left: auto;
    margin-right: auto;
    font-size: 0.92rem;
  }

  .dp-product-collection--homepage .dp-product-collection__subtitle {
    display: none;
  }

  .dp-product-collection__header-main {
    align-items: center;
    gap: 0.9rem;
  }

  .dp-product-collection__view-all {
    margin-top: 0.15rem;
  }

  .dp-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.3rem 0.95rem;
    margin-top: 1.5rem;
  }

  .dp-product-tile {
    width: 100%;
  }

  .dp-product-tile__media {
    aspect-ratio: auto;
    padding: 0 0 0.6rem;
  }

  .dp-product-tile__content {
    gap: 0.6rem;
    padding: 0;
  }

  .dp-product-tile__title {
    font-size: 1.02rem;
    line-height: 1.08;
  }

  .dp-product-tile__price {
    font-size: 0.9rem;
  }

  .dp-product-tile__button {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 0.72rem 0.95rem;
    font-size: 0.8rem;
  }

  .dp-product-grid--finder {
    gap: 1.6rem 0.95rem;
  }

  .dp-product-grid--finder .dp-product-tile {
    flex: 0 1 calc(50% - 0.5rem);
  }

  /* A lone result would sit half-width beside dead space on a phone too. */
  .dp-product-grid--finder .dp-product-tile:only-child {
    flex-basis: min(74%, 260px);
  }

  .fdb-results-page__also:not(.fdb-results-page__also--only) .dp-product-tile:only-child {
    flex-basis: calc(50% - 0.5rem);
  }

  .dp-product-tile__badge {
    top: 0.15rem;
    left: 0.15rem;
    padding: 0.28rem 0.58rem;
    font-size: 0.62rem;
  }

  .dp-product-tile__facts {
    margin-top: -0.15rem;
    font-size: 0.76rem;
  }

  .dp-page-shell,
  .dp-blog-page,
  .dp-article-page {
    padding: 36px 14px 80px;
  }

  .dp-page-article {
    border-radius: 22px;
    padding: 24px 20px;
  }

  .dp-faq {
    padding: 56px 14px 74px;
  }

  .dp-faq__card {
    padding: 10px;
  }

  .dp-faq__question {
    padding: 16px;
  }

  .dp-faq__question-text {
    font-size: 15px;
  }

  .dp-faq__arrow {
    width: 34px;
    height: 34px;
  }

  .dp-faq__answer-inner {
    padding: 0 16px 18px;
    font-size: 14px;
  }

  .blog-page-header {
    padding-bottom: 2.2rem;
  }

  .blog-page-header__tagline {
    font-size: 1.02rem;
  }

  .blog-category-nav {
    gap: 0.5rem;
    margin-bottom: 2.8rem;
  }

  .blog-category-nav__item {
    padding: 0.6rem 1rem;
    font-size: 0.82rem;
    letter-spacing: 0.05em;
    border-radius: 0.45rem;
  }

  .dp-blog-card__body {
    padding: 1rem 0.85rem 1.2rem;
  }

  .dp-blog-card__title {
    font-size: 1.1rem;
  }

  .dp-blog-card__excerpt {
    display: none;
  }

  .dp-newsletter-form {
    flex-direction: column;
  }

  .dp-footer-brand img {
    max-height: 104px;
  }

  .dp-footer-brand p {
    font-size: 14px;
  }

  .dp-footer-links h4,
  .dp-footer-newsletter h4 {
    margin-bottom: 12px;
  }

  /* Phone spacing: the desktop rhythm left the footer three screens tall. */
  .dp-footer-inner {
    padding-top: 44px;
    padding-bottom: 36px;
    gap: 26px;
  }

  .dp-trustpilot-footer {
    margin-top: 18px;
  }

  .dp-product-specs {
    gap: 8px;
  }

  .dp-product-specs__item {
    padding: 12px 10px;
    gap: 8px;
  }

  .dp-product-specs__item div span {
    font-size: 0.62rem;
    letter-spacing: 0.03em;
  }

  /* Tighten the path to the CTA on mobile */
  .dp-product-hero__title {
    margin-bottom: 8px;
  }

  .dp-product-hero__rating {
    margin-bottom: 12px;
  }

  .dp-product-hero__description-wrap {
    margin-bottom: 16px;
    padding: 16px 18px 18px;
  }

  /* Tighter collapsed preview on mobile — roughly four text lines before
     the «Se mer» toggle expands the rest. */
  .dp-product-hero__description-wrap.is-collapsible.is-collapsed .dp-product-hero__description {
    max-height: 118px;
  }

  .dp-product-hero__description-wrap.is-collapsible.is-collapsed::after {
    bottom: 62px;
    height: 48px;
  }

  .dp-product-specs {
    margin-bottom: 18px;
  }

  .dp-product-specs__header {
    padding-top: 16px;
  }

  /* Social proof → swipeable carousel on mobile */
  .dp-product-social {
    margin-top: 40px;
  }

  .dp-product-social__grid {
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -14px;
    padding: 4px 14px 6px;
  }

  .dp-product-social__grid::-webkit-scrollbar {
    display: none;
  }

  .dp-product-social__card {
    scroll-snap-align: start;
  }

  .dp-product-hero__description.is-collapsed {
    position: relative;
    max-height: 9.4rem;
    overflow: hidden;
  }

  .dp-product-hero__description.is-collapsed::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 56px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 82%);
    pointer-events: none;
  }

  .dp-product-hero__description-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: -2px 0 18px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--dp-accent-strong);
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
  }

  .dp-product-faq__question {
    padding: 16px 16px;
  }

  .dp-product-faq__question-text {
    font-size: 1rem;
  }

  .dp-product-faq__answer-inner {
    padding: 0 16px 17px;
    font-size: 0.96rem;
  }

  .dp-product-sticky-cta {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  #dp-checkout-bar {
    background: #ffffff;
  }
}

@media (max-width: 989px) {
  /* minmax(0, …) — a plain 1fr track has an `auto` minimum, so the nowrap
     pill nav's min-content width blows the layout (and the whole page)
     wider than the phone viewport instead of scrolling inside the list. */
  .dp-account-layout,
  .dp-account-gate {
    grid-template-columns: minmax(0, 1fr);
  }

  .dp-account-nav__card {
    position: static;
  }

  .dp-account-dashboard__grid,
  .woocommerce-account .woocommerce-Addresses {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 749px) {
  .woocommerce-account .dp-page-shell__inner {
    width: min(calc(100vw - 28px), 100%);
  }

  .dp-page-hero--account {
    margin-bottom: 24px;
  }

  .dp-page-hero--account .dp-page-copy {
    max-width: 30ch;
  }

  .dp-account-panel,
  .dp-account-nav__card,
  .dp-account-content {
    border-radius: 22px;
    padding: 20px;
  }

  .dp-account-form__actions {
    align-items: stretch;
  }

  .dp-account-form__actions .woocommerce-form-login__rememberme {
    width: 100%;
  }

  .dp-account-form__actions .button,
  .dp-account-form .woocommerce-form-row .button {
    width: 100%;
    justify-content: center;
  }

  .dp-account-form__grid {
    grid-template-columns: 1fr;
  }

  .dp-account-trust {
    gap: 10px 20px;
  }

  .dp-account-dashboard__header {
    flex-direction: column;
    align-items: stretch;
  }

  .dp-account-dashboard__logout {
    width: 100%;
    justify-content: center;
  }

  .woocommerce-account table.shop_table {
    font-size: 0.92rem;
  }
}

@media (min-width: 750px) and (max-width: 989px) {
  .dp-hero-section {
    padding: 40px 0 58px;
  }

  .dp-hero-inner {
    width: min(calc(100vw - 52px), 100%);
    display: grid;
    grid-template-columns: minmax(0, 0.98fr) minmax(320px, 0.9fr);
    align-items: center;
    gap: 30px;
    padding: 0;
  }

  .dp-hero-media {
    order: 0;
    width: 100%;
  }

  .dp-hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
  }

  .dp-hero-content-top,
  .dp-hero-content-bottom {
    order: 0;
    width: 100%;
    margin: 0;
  }

  .dp-hero-content-top {
    margin-bottom: 10px;
  }

  .dp-hero-tag {
    display: inline-flex;
    margin-bottom: 16px;
  }

  .dp-hero-headline {
    margin-bottom: 12px;
    font-size: 38px;
    line-height: 1.05;
  }

  .dp-hero-headline-line {
    white-space: normal;
  }

  .dp-hero-subtitle {
    max-width: 32ch;
    margin: 0 0 22px;
    font-size: 1rem;
    line-height: 1.55;
  }

  .dp-hero-actions {
    margin-bottom: 14px;
  }

  .dp-hero-action-row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
  }

  .dp-hero-btn-primary,
  .dp-hero-btn-secondary {
    width: auto;
    min-height: 52px;
    padding: 13px 26px;
    font-size: 14px;
  }

  .dp-hero-benefits {
    max-width: 420px;
    margin: 0 auto;
    justify-content: center;
    gap: 10px 12px;
  }

  .dp-hero-benefit {
    flex: 0 1 188px;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 10px;
    text-align: left;
  }

  .dp-hero-benefit__icon,
  .dp-hero-benefit__icon svg {
    width: 48px;
    height: 48px;
  }

  .dp-hero-benefit__copy {
    padding-top: 1px;
  }
}

/* ── Book finder: tablet (641–989px) ──────────────────────────────────────
   Keep 2-col gender + 3-col age grids; only reduce padding slightly.        */
@media (max-width: 989px) and (min-width: 641px) {
  .fdb-card__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 20px;
  }

  .fdb-card__body {
    padding: 22px 20px;
    gap: 22px;
  }

  .fdb-gender-card {
    padding: 16px 14px;
    gap: 12px;
  }

  .fdb-age-card {
    padding: 16px;
  }

  .fdb-gender-card__icon {
    width: 84px;
    height: 84px;
  }

  .fdb-gender-card__name {
    font-size: 1.45rem;
  }

  .fdb-panel__heading {
    font-size: 1.4rem;
    margin-bottom: 16px;
  }
}

/* ── Book finder: mobile (≤640px) ─────────────────────────────────────────
   Keep the age choices readable by switching to a 2-column grid.            */
@media (max-width: 640px) {
  .fdb-page {
    padding: 28px 16px 56px;
  }

  .fdb-hero {
    margin-bottom: 28px;
  }

  .fdb-hero__title {
    font-size: clamp(1.9rem, 8vw, 2.8rem);
  }

  .fdb-hero__trust {
    gap: 5px;
    padding: 5px 10px;
  }

  .fdb-hero__stars {
    font-size: 0.78rem;
    letter-spacing: 0.08em;
  }

  .fdb-hero__trust-text {
    font-size: 0.72rem;
    white-space: nowrap;
  }

  .fdb-card {
    border-radius: 20px;
  }

  .fdb-card__head {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 14px 16px;
  }

  .fdb-step-counter {
    font-size: 0.75rem;
    white-space: nowrap;
  }

  .fdb-card__body {
    padding: 16px;
    gap: 18px;
  }

  .fdb-panel__heading {
    font-size: 1.25rem;
    margin-bottom: 14px;
  }

  .fdb-gender-card {
    padding: 14px 10px;
    gap: 10px;
    border-radius: 18px;
  }

  .fdb-age-card {
    padding: 14px 12px;
    border-radius: 16px;
  }

  .fdb-gender-card__icon {
    width: 72px;
    height: 72px;
  }

  .fdb-gender-card__name {
    font-size: 1.3rem;
  }

  .fdb-age-card__range {
    font-size: 1.3rem;
  }

  .fdb-age-card__sub {
    font-size: 0.8rem;
  }

  .fdb-gender-grid {
    gap: 12px;
  }

  .fdb-age-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  /* Results page on mobile */
  .fdb-results-page {
    padding: clamp(24px, 5vw, 48px) 0 clamp(48px, 8vw, 80px);
  }

  .fdb-results-page__header {
    margin-bottom: 1.8rem;
  }

  .fdb-results-page__lead {
    margin-top: 0.8rem;
    font-size: 0.95rem;
  }

  .fdb-results-trust {
    gap: 0.45rem 1rem;
    margin-top: 1.1rem;
  }

  .fdb-results-trust__item {
    font-size: 0.82rem;
  }

  .fdb-results-page__more-links {
    flex-direction: column;
  }

  .fdb-results-page__more-link {
    width: 100%;
  }

  /* Mobile circles — between star pill and card */
  .fdb-mobile-circles {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    margin: 32px 0 36px;
  }

  .fdb-mobile-circle {
    display: block;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background-color: #ece8ff;
    background-size: cover;
    background-position: center;
    box-shadow:
      0 12px 32px rgba(15, 23, 42, 0.12),
      0 0 0 4px rgba(255, 255, 255, 0.92),
      0 0 0 6px rgba(124, 99, 248, 0.1);
    animation: fdb-circle-float 6s ease-in-out infinite;
  }

  .fdb-mobile-circle--left {
    background-image: var(--fdb-circle-left-img);
    animation-delay: 0s;
  }

  .fdb-mobile-circle--mid {
    background-image: var(--fdb-circle-mid-img);
    width: 100px;
    height: 100px;
    animation-delay: 1.2s;
  }

  .fdb-mobile-circle--right {
    background-image: var(--fdb-circle-right-img);
    animation-delay: 2.5s;
  }
}

/* ── Book finder: small mobile (≤400px) ───────────────────────────────────
   Compact everything further; age cards tighten up.                         */
@media (max-width: 400px) {
  .fdb-card__head {
    padding: 14px;
  }

  .fdb-card__body {
    padding: 14px;
    gap: 16px;
  }

  .fdb-gender-grid,
  .fdb-age-grid {
    gap: 8px;
  }

  .fdb-gender-card {
    padding: 12px 10px;
    gap: 8px;
    border-radius: 16px;
  }

  .fdb-age-card {
    padding: 12px 10px;
    border-radius: 14px;
  }

  .fdb-gender-card__icon {
    width: 64px;
    height: 64px;
  }

  .fdb-gender-card__name {
    font-size: 1.15rem;
  }

  .fdb-age-card__range {
    font-size: 1.15rem;
  }
}

/* ── Product page: desktop tweaks (≥ 750px) ───────────────────────────────
   On desktop the description is always fully visible — no toggle needed.    */
@media (min-width: 750px) {
  .dp-product-hero__description-toggle {
    display: none !important;
  }
  /* Ensure collapsed state has no effect on desktop */
  .dp-product-hero__description-wrap.is-collapsible.is-collapsed .dp-product-hero__description {
    max-height: none;
    overflow: visible;
  }
  .dp-product-hero__description-wrap.is-collapsible.is-collapsed::after {
    display: none;
  }
}

/* ── Product gallery: desktop layout (≥ 750px) ─────────────────────────────
   Track shows only the active slide; side arrows overlay the image;
   thumbnail strip renders below the stage.                                  */
@media (min-width: 750px) {
  /* Track: clip to stage, no horizontal scroll — active slide only. */
  .dp-gallery__track {
    overflow: hidden;
    scroll-snap-type: none;
  }

  /* All slides hidden; only the one with .is-active is shown. */
  .dp-gallery__slide {
    display: none;
    flex: none;
    width: 100%;
    height: 100%;
  }
  .dp-gallery__slide.is-active {
    display: block;
  }

  /* Side arrows on desktop: hidden until the stage is hovered. */
  .dp-gallery__side-btn {
    opacity: 0;
  }
  .dp-gallery__side-btn--prev { left: 12px; }
  .dp-gallery__side-btn--next { right: 12px; }

  /* Reveal on hover (or focus for keyboard users). */
  .dp-gallery__stage:hover .dp-gallery__side-btn:not(:disabled),
  .dp-gallery__side-btn:focus-visible {
    opacity: 1;
  }

  /* The counter pill is a mobile affordance — thumbnails cover desktop. */
  .dp-gallery__count-pill {
    display: none;
  }

  /* Thumbnail strip */
  .dp-gallery__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
  }
  .dp-gallery__thumb {
    flex: 0 0 68px;
    width: 68px;
    height: 68px;
    border-radius: 10px;
  }
  .dp-gallery__thumb.is-active {
    border-color: #7c63f8;
    box-shadow: 0 0 0 1px rgba(124, 99, 248, 0.18);
  }
  .dp-gallery__thumb:hover:not(.is-active) {
    border-color: rgba(124, 99, 248, 0.3);
    opacity: 0.82;
  }
}

/* ── Product gallery: compact thumbnails on tablet (750–989px) ──────────── */
@media (min-width: 750px) and (max-width: 989px) {
  .dp-gallery__thumb {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .dp-topbar__track,
  .dp-photo-spinner__circle {
    animation: none;
  }
}

body.dreampage-personalizer-request .dp-personaliser-intro {
  margin: 0 auto 24px;
}

body.dreampage-personalizer-request .dp-personaliser-title {
  color: #181528;
}

@keyframes dp-preview-shimmer {
  0% {
    transform: translateX(-18%);
  }

  100% {
    transform: translateX(18%);
  }
}

@keyframes dp-preview-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

body.dreampage-preview-request .dp-preview-template {
  padding: 0 0 140px;
  background: #fff;
}

body.dreampage-preview-request .dp-preview-app {
  padding-top: 0;
}

body.dreampage-preview-request .dp-preview-shell {
  width: 100%;
  margin: 0;
}

body.dreampage-preview-request .dp-preview-page-width {
  width: min(1200px, calc(100vw - 32px));
  margin: 0 auto;
}

body.dreampage-preview-request .dp-book-banner {
  position: relative;
  width: 100vw;
  margin: 0 calc(50% - 50vw) 18px;
  padding: 18px 16px 8px;
}

body.dreampage-preview-request .dp-banner-inner {
  width: min(760px, 100%);
  margin: 0 auto;
  text-align: center;
}

/* Apple glass home button, matching the toggle + redo controls. */
body.dreampage-preview-request .dp-home-btn {
  position: absolute;
  top: 8px;
  left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(251, 252, 254, 0.92), rgba(240, 242, 248, 0.86));
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  color: #132440;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: transform 0.18s ease, box-shadow 0.25s ease;
}

body.dreampage-preview-request .dp-home-btn::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 46%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
  pointer-events: none;
}

body.dreampage-preview-request .dp-home-btn svg {
  position: relative;
  z-index: 1;
}

@media (hover: hover) and (pointer: fine) {
  body.dreampage-preview-request .dp-home-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  }
}

body.dreampage-preview-request .dp-home-btn:active {
  transform: translateY(0) scale(0.96);
}

@media (min-width: 750px) {
  body.dreampage-preview-request .dp-home-btn {
    left: max(24px, calc((100vw - 1200px) / 2 + 24px));
  }
}

body.dreampage-preview-request .dp-banner-title {
  margin: 0;
  color: #132440;
  font-size: clamp(2.1rem, 5vw, 3.2rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.04em;
}

body.dreampage-preview-request .dp-banner-subtitle {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 10px 0 0;
  color: rgba(19, 36, 64, 0.66);
  font-size: 14px;
  line-height: 1.5;
}

body.dreampage-preview-request .dp-banner-subtitle .dp-flag {
  width: 22px;
  height: 16px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(19, 36, 64, 0.12), 0 1px 3px rgba(19, 36, 64, 0.14);
}

body.dreampage-preview-request #dp-prev-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 20px;
  align-items: start;
}

body.dreampage-preview-request #dp-rail {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 140px);
  overflow: hidden;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.05);
}

body.dreampage-preview-request #dp-rail-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  padding: 14px;
  border-bottom: 1px solid #e5e7eb;
}

body.dreampage-preview-request #dp-rail-title,
body.dreampage-preview-request #dp-rail-sub,
body.dreampage-preview-request #dp-rail-count {
  margin: 0;
}

body.dreampage-preview-request #dp-rail-title {
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
}

body.dreampage-preview-request #dp-rail-sub,
body.dreampage-preview-request #dp-rail-count {
  color: #475569;
  font-size: 12px;
  opacity: 0.72;
}

body.dreampage-preview-request #dp-rail-scroll {
  overflow: auto;
  padding: 12px;
  display: grid;
  gap: 14px;
}

body.dreampage-preview-request .dp-rail-section {
  display: grid;
  gap: 8px;
}

body.dreampage-preview-request .dp-rail-label {
  margin: 0;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.dreampage-preview-request .dp-rail-single,
body.dreampage-preview-request .dp-rail-grid {
  display: grid;
  gap: 10px;
}

body.dreampage-preview-request .dp-rail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.dreampage-preview-request .dp-rail-thumb {
  padding: 0;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

body.dreampage-preview-request .dp-rail-thumb:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

body.dreampage-preview-request .dp-rail-thumb[aria-current="true"] {
  outline: 2px solid #132440;
  outline-offset: 2px;
}

body.dreampage-preview-request .dp-rail-thumb img {
  display: block;
  width: 100%;
  height: 96px;
  object-fit: cover;
}

body.dreampage-preview-request #dp-main-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: 0;
  padding: 0;
  overflow: visible;
}

body.dreampage-preview-request #dp-main-controls {
  width: min(100%, 700px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px 0;
}

/* Apple glass segmented control: recessed frosted track with a tinted glass
   pill sliding under the active label. */
body.dreampage-preview-request .dp-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(251, 252, 254, 0.92), rgba(240, 242, 248, 0.86));
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow:
    0 6px 16px rgba(15, 23, 42, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 2px rgba(15, 23, 42, 0.06);
}

body.dreampage-preview-request .dp-view-toggle__button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 38px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #475569;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: color 0.22s ease, transform 0.18s ease;
}

@media (hover: hover) and (pointer: fine) {
  body.dreampage-preview-request .dp-view-toggle__button:not(.is-active):not(:disabled):hover {
    color: #1f2540;
  }
}

body.dreampage-preview-request .dp-view-toggle__button.is-active {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(135deg, rgba(111, 92, 246, 0.95), rgba(79, 70, 229, 0.96));
  box-shadow:
    0 8px 18px rgba(79, 70, 229, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -2px 6px rgba(49, 46, 129, 0.3);
}

body.dreampage-preview-request .dp-view-toggle__button.is-active::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 46%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0));
  opacity: 0.6;
  pointer-events: none;
}

body.dreampage-preview-request .dp-view-toggle__button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

body.dreampage-preview-request .dp-view-toggle.is-disabled {
  box-shadow: none;
}

body.dreampage-preview-request .dp-view-toggle.is-pending {
  opacity: 0.72;
  filter: saturate(0);
}

/* Apple glass secondary button (neutral frosted). Muted while disabled,
   clearer + interactive once ready. */
body.dreampage-preview-request #dp-redo-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(251, 252, 254, 0.92), rgba(240, 242, 248, 0.86));
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  color: #94a0b4;
  font-size: 0.83rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.7;
  transition: transform 0.18s ease, box-shadow 0.25s ease, color 0.2s ease, opacity 0.2s ease;
}

body.dreampage-preview-request #dp-redo-btn::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 52%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
  pointer-events: none;
}

body.dreampage-preview-request #dp-redo-btn.is-ready {
  color: #475569;
  border-color: rgba(15, 23, 42, 0.16);
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  body.dreampage-preview-request #dp-redo-btn.is-ready:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  }
}

body.dreampage-preview-request #dp-redo-btn.is-ready:active {
  transform: translateY(0) scale(0.98);
}

/* A spinning loader next to an error message reads as "still working" —
   hide it once the state is terminal. The #id keeps this above the later
   .has-spinner-ui display rule in the cascade. */
body.dreampage-preview-request .dp-preview-shell.is-error #dp-spinner {
  display: none;
}

/* Timeout/error retry controls inside the processing panel */
body.dreampage-preview-request .dp-preview-retry {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  margin-top: 16px;
  padding: 0 26px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--dp-accent), var(--dp-accent-strong));
  color: #fff;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(91, 63, 214, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.18s ease, box-shadow 0.25s ease, opacity 0.2s ease;
}

body.dreampage-preview-request .dp-preview-retry[hidden] {
  display: none !important;
}

@media (hover: hover) and (pointer: fine) {
  body.dreampage-preview-request .dp-preview-retry:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 14px 32px rgba(91, 63, 214, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  }
}

body.dreampage-preview-request .dp-preview-retry:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}

body.dreampage-preview-request .dp-preview-retry:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

body.dreampage-preview-request .dp-preview-retry.is-loading svg {
  animation: dp-retry-spin 0.9s linear infinite;
}

@keyframes dp-retry-spin {
  to { transform: rotate(360deg); }
}

body.dreampage-preview-request .dp-preview-restart-link {
  display: inline-block;
  margin-top: 16px;
  color: var(--dp-accent-strong);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.dreampage-preview-request .dp-preview-restart-link[hidden] {
  display: none !important;
}
body.dreampage-preview-request .dp-preview-stage {
  --dp-preview-ready-zoom: 1;
  position: relative;
  width: min(100%, 620px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 8px 0 6px;
  isolation: isolate;
}

body.dreampage-preview-request .dp-preview-stage::before {
  content: "";
  position: absolute;
  inset: 2% 5% 18%;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 24%, rgba(122, 102, 255, 0.2) 0%, rgba(122, 102, 255, 0.09) 24%, rgba(255, 255, 255, 0) 68%),
    radial-gradient(circle at 34% 52%, rgba(209, 200, 255, 0.34) 0%, rgba(209, 200, 255, 0) 48%);
  filter: blur(24px);
  pointer-events: none;
}

body.dreampage-preview-request .dp-preview-shell {
  width: min(100%, 620px);
  position: relative;
  z-index: 1;
}

body.dreampage-preview-request .dp-preview-shell__ambient {
  position: absolute;
  inset: 4% 5% 17% 6%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 205, 255, 0.92) 0%, rgba(212, 205, 255, 0.28) 40%, rgba(212, 205, 255, 0) 76%);
  filter: blur(20px);
  opacity: 0.82;
  pointer-events: none;
}

body.dreampage-preview-request .dp-preview-shell__shadow {
  position: absolute;
  inset: auto 10% -9% 10%;
  height: 16%;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(31, 28, 61, 0.2) 0%, rgba(31, 28, 61, 0.11) 42%, rgba(31, 28, 61, 0) 76%);
  filter: blur(24px);
  transform: translateY(20px);
  opacity: 0.68;
}

body.dreampage-preview-request .dp-preview-shell__frame {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 34px;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.99) 0%, rgba(245, 243, 255, 0.98) 100%);
  box-shadow: 0 26px 54px rgba(31, 28, 61, 0.11), 0 10px 20px rgba(31, 28, 61, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

body.dreampage-preview-request .dp-preview-shell__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(212, 209, 239, 0.88);
  border-radius: inherit;
  pointer-events: none;
}

body.dreampage-preview-request .dp-preview-shell__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0) 28%),
    linear-gradient(120deg, rgba(223, 216, 255, 0.24), rgba(255, 255, 255, 0) 42%);
  pointer-events: none;
}

body.dreampage-preview-request .dp-preview-shell__media {
  position: absolute;
  inset: 24px;
  overflow: hidden;
  border-radius: 28px;
  background:
    radial-gradient(circle at 24% 16%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0) 34%),
    linear-gradient(180deg, #f9f7ff 0%, #f0ecff 100%);
  box-shadow: inset 0 0 0 1px rgba(224, 219, 248, 0.92);
}

body.dreampage-preview-request .dp-preview-shell__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 72% 24%, rgba(190, 177, 255, 0.22), rgba(190, 177, 255, 0) 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0) 26%, rgba(23, 32, 58, 0.04) 100%);
  pointer-events: none;
}

body.dreampage-preview-request .dp-preview-shell__placeholder {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(245, 242, 255, 0.98) 0%, rgba(236, 231, 255, 0.98) 100%);
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

body.dreampage-preview-request #dp-flat-cover-proxy {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

body.dreampage-preview-request .dp-preview-shell__placeholder-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(72%, 312px);
  padding: 26px 22px 22px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(229, 221, 255, 0.92);
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 244, 255, 0.82));
  box-shadow: 0 16px 34px rgba(44, 31, 122, 0.1);
  backdrop-filter: blur(12px);
}

body.dreampage-preview-request .dp-preview-shell__placeholder-mark {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(111, 92, 246, 0.2), rgba(111, 92, 246, 0.06)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.62));
}

body.dreampage-preview-request .dp-preview-shell__placeholder-title {
  margin: 0;
  color: #17203a;
  text-align: center;
  font-size: clamp(18px, 3vw, 24px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

body.dreampage-preview-request .dp-preview-shell__placeholder-copy {
  max-width: 240px;
  margin: 10px auto 0;
  color: #625c7a;
  text-align: center;
  font-size: 13px;
  line-height: 1.55;
}

body.dreampage-preview-request .dp-preview-shell__placeholder-sheen {
  position: absolute;
  inset: -20%;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, 0.38) 50%, rgba(255, 255, 255, 0) 66%);
  animation: dp-preview-shimmer 2.6s linear infinite;
}

body.dreampage-preview-request .dp-preview-shell__processing {
  position: absolute;
  right: 24px;
  bottom: 24px;
  left: 24px;
  z-index: 4;
  padding: 18px 18px 16px;
  border: 1px solid rgba(224, 214, 255, 0.96);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(247, 243, 255, 0.86));
  box-shadow: 0 14px 30px rgba(44, 31, 122, 0.11);
  backdrop-filter: blur(14px);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease;
}

body.dreampage-preview-request .dp-preview-shell__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(111, 92, 246, 0.1);
  color: #4f3fd7;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.dreampage-preview-request .dp-preview-shell__title {
  margin: 13px 0 5px;
  color: #17203a;
  font-size: clamp(18px, 3vw, 25px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

body.dreampage-preview-request .dp-preview-shell__copy {
  margin: 0;
  color: rgba(82, 76, 109, 0.86);
  font-size: 13px;
  line-height: 1.5;
}

body.dreampage-preview-request .dp-processing-group {
  width: 100%;
}

body.dreampage-preview-request .dp-preview-shell__timer {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  margin-top: 14px;
  font-size: 38px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.04em;
}

body.dreampage-preview-request .dp-preview-shell__timer-suffix {
  margin-bottom: 4px;
  font-size: 17px;
  font-weight: 700;
  color: rgba(98, 92, 122, 0.7);
}

body.dreampage-preview-request .dp-preview-shell__progress-track {
  position: relative;
  height: 7px;
  margin-top: 14px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(111, 92, 246, 0.12);
}

body.dreampage-preview-request .dp-preview-shell__progress-bar {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #8a72ff 0%, #6f5cf6 45%, #cdbfff 100%);
  transform: scaleX(0.08);
  transform-origin: left center;
  transition: transform 0.4s ease;
}

body.dreampage-preview-request #dp-main-img {
  position: absolute;
  inset: 5%;
  z-index: 3;
  display: block;
  width: 90%;
  height: 90%;
  object-fit: contain;
  opacity: 0;
  transform: translateY(10px) scale(0.985);
  transition: opacity 0.45s ease, transform 0.55s ease;
  filter: drop-shadow(0 24px 40px rgba(31, 28, 61, 0.16));
}

body.dreampage-preview-request .dp-preview-shell.has-image #dp-main-img {
  opacity: 1;
  transform: translateY(0) scale(1);
}

body.dreampage-preview-request .dp-preview-shell.is-ready .dp-preview-shell__processing {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
}

body.dreampage-preview-request .dp-preview-shell.is-ready .dp-preview-shell__placeholder {
  opacity: 0;
  visibility: hidden;
}

body.dreampage-preview-request .dp-preview-shell.is-ready {
  width: min(100%, 700px);
}

body.dreampage-preview-request .dp-preview-shell.is-ready .dp-preview-shell__ambient,
body.dreampage-preview-request .dp-preview-shell.is-ready .dp-preview-shell__shadow {
  opacity: 0;
  visibility: hidden;
}

body.dreampage-preview-request .dp-preview-shell.is-ready .dp-preview-shell__frame {
  overflow: hidden;
  aspect-ratio: auto;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.dreampage-preview-request .dp-preview-shell.is-ready .dp-preview-shell__media {
  position: relative;
  inset: auto;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

body.dreampage-preview-request .dp-preview-shell.is-ready .dp-preview-shell__frame::before,
body.dreampage-preview-request .dp-preview-shell.is-ready .dp-preview-shell__frame::after,
body.dreampage-preview-request .dp-preview-shell.is-ready .dp-preview-shell__media::before {
  content: none;
}

body.dreampage-preview-request .dp-preview-shell.is-ready #dp-main-img {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  opacity: 1;
  transform: translateY(0) scale(var(--dp-preview-ready-zoom, 1));
  transform-origin: 50% 50%;
  will-change: transform;
  filter: drop-shadow(0 18px 40px rgba(31, 28, 61, 0.18)) drop-shadow(0 6px 14px rgba(31, 28, 61, 0.10));
  border-radius: 8px;
}

/* The mockup server trims renders to the book + symmetric white margins (book is ~57%
   of the image width, centered). Width tuned so the book keeps the same apparent size
   as the old untrimmed render. Raw photo view is untrimmed and stays full width. */
body.dreampage-preview-request .dp-preview-shell.is-ready:not(.is-view-raw) #dp-main-img {
  width: 77%;
  margin-inline: auto;
}

body.dreampage-preview-request #dp-view-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

body.dreampage-preview-request #dp-view-loading-overlay.is-active {
  opacity: 1;
}

body.dreampage-preview-request #dp-view-loading-overlay::after {
  content: "";
  width: 26px;
  height: 26px;
  border: 2.5px solid rgba(111, 92, 246, 0.18);
  border-top-color: #6f5cf6;
  border-radius: 50%;
  animation: dp-spin 0.7s linear infinite;
}

body.dreampage-preview-request .dp-loading-spinner {
  display: none;
  width: 40px;
  height: 40px;
  margin: 20px auto 0;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #6366f1;
  border-radius: 50%;
  animation: dp-spin 1s linear infinite;
}

body.dreampage-preview-request .dp-preview-shell.has-countdown-ui .dp-processing-group {
  display: block;
}

body.dreampage-preview-request .dp-preview-shell.has-countdown-ui .dp-loading-spinner {
  display: none;
}

body.dreampage-preview-request .dp-preview-shell.has-spinner-ui .dp-processing-group {
  display: none;
}

body.dreampage-preview-request .dp-preview-shell.has-spinner-ui .dp-loading-spinner {
  display: block;
}

/* Float animation on the shell frame while not ready — matches Shopify behavior */
body.dreampage-preview-request .dp-preview-shell.is-checking-queue .dp-preview-shell__frame,
body.dreampage-preview-request .dp-preview-shell.is-queued .dp-preview-shell__frame,
body.dreampage-preview-request .dp-preview-shell.is-processing .dp-preview-shell__frame,
body.dreampage-preview-request .dp-preview-shell.is-rendering-mockup .dp-preview-shell__frame,
body.dreampage-preview-request .dp-preview-shell.is-delayed .dp-preview-shell__frame {
  animation: dp-preview-float 5.8s ease-in-out infinite;
}

body.dreampage-preview-request .dp-blur-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}

body.dreampage-preview-request .dp-blur-card {
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.09);
  background: #0b1020;
}

body.dreampage-preview-request .dp-blur-card img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

body.dreampage-preview-request .dp-blur-grid--picture .dp-blur-card[data-picture-id="page_15"] {
  grid-column: 1 / -1;
  justify-self: center;
  width: min(100%, calc((100% - 24px) / 2));
}
body.dreampage-preview-request #dp-checkout-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  /* Solid white — no translucency/blur, so page colors never leak through. */
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
  opacity: 0;
  transform: translateY(104%);
  pointer-events: none;
  transition: transform 0.24s ease, opacity 0.24s ease;
}

body.dreampage-preview-request #dp-checkout-bar.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

body.dreampage-preview-request #dp-checkout-inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 6px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0px;
  text-align: center;
}

/* Apple "liquid glass" primary CTA: tinted translucent fill, frosted blur,
   specular top highlight and an inner light rim. */
body.dreampage-preview-request #dp-checkout-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 16px 34px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  /* Fade the border towards the bottom — a uniform white border reads as a
     stray white line along the button's lower edge against the purple. */
  border-color: rgba(255, 255, 255, 0.45) rgba(255, 255, 255, 0.28) rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.02) 42%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(135deg, rgba(111, 92, 246, 0.94), rgba(79, 70, 229, 0.96));
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  /* Softer drop shadow so it doesn't wash over the payment icons below. */
  box-shadow:
    0 10px 22px rgba(79, 70, 229, 0.2),
    0 3px 8px rgba(49, 46, 129, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -3px 8px rgba(49, 46, 129, 0.32);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

body.dreampage-preview-request #dp-checkout-btn::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 44%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0));
  opacity: 0.6;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  body.dreampage-preview-request #dp-checkout-btn:hover {
    transform: translateY(-1px);
    box-shadow:
      0 18px 40px rgba(79, 70, 229, 0.4),
      0 6px 14px rgba(49, 46, 129, 0.26),
      inset 0 1px 0 rgba(255, 255, 255, 0.45),
      inset 0 -3px 8px rgba(49, 46, 129, 0.32);
  }
}

body.dreampage-preview-request #dp-checkout-btn:active {
  transform: translateY(0) scale(0.985);
  filter: brightness(0.98);
}

body.dreampage-preview-request .dp-trust-payment {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Single-mark markets (Vipps in Norway, Klarna in Sweden): a wide lockup, so
   height alone decides how legible the wordmark is. */
body.dreampage-preview-request .dp-trust-icon-img {
  width: auto;
  height: 25px;
}

body.dreampage-preview-request .dp-trust-payment--intl {
  margin-top: 0;
  margin-bottom: 0;
}

/* English markets: three brand marks in white chips. The mark inside is what
   the customer actually reads, so the chip is sized around it — the old
   4px/7px padding on a 58px-wide box left PayPal and Mastercard (both square
   source images, contained) rendering barely 9px tall. Tighter padding and a
   narrower, taller chip roughly doubles the mark without making the bar grow
   more than a few pixels. */
body.dreampage-preview-request .dp-trust-payment--intl .dp-trust-icon-img {
  height: 27px;
  width: 46px;
  padding: 2px 5px;
  border-radius: 6px;
}

body.dreampage-preview-request #dp-checkout-inner:has(.dp-trust-payment--intl) {
  padding-bottom: 6px;
}

body.dreampage-preview-request #dp-checkout-note {
  margin: 6px 0 0;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.72);
  text-align: center;
  line-height: 1.45;
}

/* Trust microcopy line above the checkout CTA — small check-badges. */
body.dreampage-preview-request .dp-checkout-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 5px 16px;
  margin: 0 0 12px;
  color: #475569;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.005em;
}

body.dreampage-preview-request .dp-checkout-trust span {
  display: inline-flex;
  align-items: center;
}

body.dreampage-preview-request .dp-checkout-trust span::before {
  content: "✓";
  margin-right: 5px;
  color: #6f5cf6;
  font-size: 11px;
  font-weight: 800;
}

/* Wait-time activation: the blur teasers (generic product samples) and the
   testimonials stay visible during the countdown so the wait is filled with
   desire + social proof instead of a blank screen people bounce from. */

/* Cover rail slot: hide leaked inner-page image and show WC placeholder while processing */
body.dreampage-preview-request .dp-preview-app:not([data-preview-state="ready"]) #dp-rail-cover .dp-rail-thumb img {
  display: none;
}
body.dreampage-preview-request .dp-preview-app:not([data-preview-state="ready"]) #dp-rail-cover .dp-rail-thumb {
  height: 96px;
  background-image: url('/wp-content/plugins/woocommerce/assets/images/placeholder.webp');
  background-size: cover;
  background-position: center;
}

body.dreampage-preview-request .dp-preview-app[data-preview-view="photo"] .dp-blur-grid--book {
  display: none;
}

body.dreampage-preview-request .dp-preview-app:not([data-preview-view="photo"]) .dp-blur-grid--picture {
  display: none;
}

/* Mobile picture mode: show only the two selected picture previews. */
@media (max-width: 749px) {
  body.dreampage-preview-request .dp-preview-app:not([data-preview-view="photo"]) .dp-blur-grid--book {
    display: grid;
  }

  body.dreampage-preview-request .dp-preview-app:not([data-preview-view="photo"]) .dp-blur-grid--book[data-picture-fallback="true"] .dp-blur-card:not([data-mobile-selected="true"]) {
    display: none;
  }

  body.dreampage-preview-request .dp-preview-app[data-preview-view="photo"] .dp-blur-grid--picture .dp-blur-card:not([data-mobile-selected="true"]) {
    display: none;
  }

  body.dreampage-preview-request .dp-blur-grid--book[data-picture-fallback="true"] .dp-blur-card[data-picture-id="page_15"],
  body.dreampage-preview-request .dp-blur-grid--picture .dp-blur-card[data-picture-id="page_15"] {
    grid-column: auto;
    width: 100%;
  }
}

@media (max-width: 900px) {
  body.dreampage-preview-request #dp-prev-grid {
    grid-template-columns: 1fr;
  }

  body.dreampage-preview-request #dp-rail {
    display: none;
  }

  body.dreampage-preview-request .dp-banner-inner {
    width: min(620px, 100%);
  }
}

@media (max-width: 749px) {
  body.dreampage-preview-request .dp-preview-page-width {
    width: min(calc(100vw - 28px), 100%);
    margin: 0 auto;
  }

  body.dreampage-preview-request .dp-book-banner {
    margin-bottom: 10px;
    padding-top: 12px;
  }

  body.dreampage-preview-request .dp-home-btn {
    position: static;
    margin: 0 auto 12px;
  }

  body.dreampage-preview-request .dp-banner-title {
    font-size: 2.35rem;
    line-height: 0.98;
  }

  body.dreampage-preview-request .dp-banner-subtitle {
    font-size: 13px;
  }

  body.dreampage-preview-request #dp-main-controls {
    width: 100%;
    padding: 12px 14px 0;
    gap: 8px;
  }

  body.dreampage-preview-request #dp-redo-btn {
    min-height: 34px;
    padding: 0 12px;
    font-size: 0.78rem;
  }

  body.dreampage-preview-request .dp-view-toggle {
    gap: 3px;
    padding: 3px;
  }

  body.dreampage-preview-request .dp-view-toggle__button {
    min-height: 36px;
    padding: 0 14px;
    font-size: 0.88rem;
  }

  body.dreampage-preview-request .dp-preview-stage {
    width: min(100%, 96vw);
    gap: 8px;
    padding-top: 2px;
  }

  body.dreampage-preview-request .dp-preview-shell__frame {
    border-radius: 28px;
  }

  body.dreampage-preview-request .dp-preview-shell__media {
    inset: 16px;
    border-radius: 22px;
  }

  /* Hide the secondary placeholder card on mobile: during the countdown the
     centered processing card sits on top of it, so it was peeking out behind. */
  body.dreampage-preview-request .dp-preview-shell__placeholder-card {
    display: none;
  }

  body.dreampage-preview-request .dp-preview-shell__processing {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    width: min(84%, 320px);
    padding: 22px 18px 18px;
    border-radius: 20px;
    transform: translate(-50%, -50%);
  }

  body.dreampage-preview-request .dp-preview-shell__title {
    font-size: 20px;
  }

  body.dreampage-preview-request .dp-preview-shell__timer {
    margin: 8px 0 4px;
    font-size: 32px;
  }

  body.dreampage-preview-request .dp-preview-shell__progress-track {
    width: 100%;
    height: 8px;
    margin-top: 12px;
  }

  body.dreampage-preview-request .dp-loading-spinner {
    width: 34px;
    height: 34px;
    margin-top: 12px;
  }

  body.dreampage-preview-request #dp-main-img {
    max-height: 58vh;
    width: 100%;
  }

  body.dreampage-preview-request .dp-preview-shell.is-ready {
    width: 100%;
  }

  body.dreampage-preview-request .dp-preview-shell.is-ready .dp-preview-shell__frame {
    aspect-ratio: auto;
    border-radius: 0;
  }

  body.dreampage-preview-request .dp-preview-shell.is-ready .dp-preview-shell__media {
    border-radius: 0;
  }

  body.dreampage-preview-request .dp-preview-shell.is-ready.is-view-raw .dp-preview-shell__frame {
    border-radius: 24px;
  }

  body.dreampage-preview-request .dp-preview-shell.is-ready.is-view-raw .dp-preview-shell__media {
    border-radius: 20px;
  }

  /* Oversize the wide (1.59:1) render and let the media's overflow:hidden crop the
     white side margins: the book shows ~40% bigger and the visible box is near-square
     (~1.13:1). Book + shadow span the central ~62% of the image, so a 20%-per-side
     crop never cuts into the book. */
  body.dreampage-preview-request .dp-preview-shell.is-ready:not(.is-view-raw) #dp-main-img {
    width: 140%;
    max-width: none;
    margin-inline: -20%;
  }

  body.dreampage-preview-request .dp-blur-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  /* Full-width primary CTA + larger tap target on mobile. */
  body.dreampage-preview-request #dp-checkout-inner {
    padding: 14px 16px 10px;
  }

  body.dreampage-preview-request #dp-checkout-btn {
    width: 100%;
    padding: 16px 24px;
  }

  body.dreampage-preview-request .dp-checkout-trust {
    gap: 2px 5px;
    font-size: 11.5px;
  }
}

@media (max-width: 749px) {
  .dp-cart-empty {
    margin: 24px auto 56px;
  }

  .dp-cart-empty__card {
    padding: 38px 22px 32px;
    border-radius: 20px;
  }

  .dp-cart-empty__icon {
    width: 68px;
    height: 68px;
    margin-bottom: 18px;
  }

  .dp-cart-empty__actions {
    flex-direction: column;
  }

  .dp-cart-empty__actions .dp-cart-empty__button {
    width: 100%;
  }

  .dp-cart-empty__trust {
    gap: 8px 14px;
  }

  .dp-cart-empty__products {
    margin-top: 44px;
  }

  .dp-cart-empty__products .dp-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.4rem 0.85rem;
  }
}

/* ================================================================
   PREMIUM CHECKOUT REDESIGN
   Section 1: Express Checkout Card
   Section 2: Collapsible "Eller fortsett" Form
   Section 3: Order Summary Header
   Section 4: Cover Selector Segmented Control
   ================================================================ */

/* ─── SECTION 1: Express Checkout — Premium Card Container ─── */

/* Wrap the entire express payment block in a clean card */
body.woocommerce-checkout .wc-block-checkout .wp-block-woocommerce-checkout-express-payment-block {
  padding: 18px 16px 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 2px 16px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.04);
}

/* Override WooCommerce's absolute-positioned floating title */
body.woocommerce-checkout .wc-block-checkout .wc-block-components-express-payment--checkout .wc-block-components-express-payment__title-container {
  position: static;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  left: auto;
  right: auto;
  top: auto;
  margin-bottom: 13px;
  vertical-align: baseline;
}

/* Remove WooCommerce's decorative horizontal lines on title */
body.woocommerce-checkout .wc-block-checkout .wc-block-components-express-payment--checkout .wc-block-components-express-payment__title-container::before,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-express-payment--checkout .wc-block-components-express-payment__title-container::after {
  display: none;
}

/* Title text: subtle uppercase label */
body.woocommerce-checkout .wc-block-checkout .wc-block-components-express-payment--checkout .wc-block-components-express-payment__title {
  position: static;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.38);
  transform: none;
  padding: 0;
  margin: 0;
  text-align: center;
  line-height: 1.3;
  border: none;
  border-radius: 0;
  word-break: normal;
}

/* Remove WooCommerce's border + extra padding from the content area */
body.woocommerce-checkout .wc-block-checkout .wc-block-components-express-payment--checkout .wc-block-components-express-payment__content {
  border: none;
  border-radius: 0;
  padding: 0;
  margin-top: 0;
  min-height: 0;
}

/* Button list: clean vertical stack, consistent gap */
body.woocommerce-checkout .wc-block-checkout .wc-block-components-express-payment--checkout .wc-block-components-express-payment__event-buttons {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  grid-template-columns: none !important;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  text-align: inherit;
  overflow: visible;
}

/* Each button wrapper: full width, minimum consistent height */
body.woocommerce-checkout .wc-block-checkout .wc-block-components-express-payment--checkout .wc-block-components-express-payment__event-buttons > li,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-express-payment--checkout .wc-block-components-express-payment__event-buttons > div {
  width: 100% !important;
  min-height: 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible;
  text-align: center;
}

/* Force direct children (button elements, iframes) to fill width */
body.woocommerce-checkout .wc-block-checkout .wc-block-components-express-payment--checkout .wc-block-components-express-payment__event-buttons > li > *,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-express-payment--checkout .wc-block-components-express-payment__event-buttons > div > * {
  width: 100% !important;
  max-width: 100%;
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-express-payment--checkout .wc-block-components-express-payment__event-buttons a.button.vipps-express-checkout {
  display: block;
  margin: -6px 0 2px !important;
  vertical-align: middle;
}

/* ─── SECTION 2: "Eller fortsett" — Clean Labeled Divider ─── */

/* The WooCommerce continue-rule becomes a refined horizontal separator
   with the centered Norwegian label (text is translated via functions.php
   so it remains accessible to screen readers in the correct language). */
body.woocommerce-checkout .wc-block-checkout .wc-block-components-express-payment-continue-rule--checkout {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: 0;
  margin: 24px 0 18px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent;
  color: rgba(15, 23, 42, 0.48);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  cursor: default;
  overflow: visible;
}

/* Override WooCommerce's default decorative line pseudos to a clean
   left + right line flanking the label. */
body.woocommerce-checkout .wc-block-checkout .wc-block-components-express-payment-continue-rule--checkout::before,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-express-payment-continue-rule--checkout::after {
  content: '';
  flex: 1 1 auto;
  display: block;
  height: 1px;
  background: rgba(15, 23, 42, 0.1);
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
  transform: none;
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-express-payment-continue-rule--checkout::before {
  margin-right: 14px;
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-express-payment-continue-rule--checkout::after {
  margin-left: 14px;
}

/* ─── SECTION 3: Order Summary Header — Price Up Front, Clean Toggle ─── */

/* The total belongs in the collapsed header. Without it the customer is asked
   for an email address before ever seeing what the order costs — the price
   only appeared at the very bottom of the page. */
body.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-order-summary__title-price {
  display: inline-flex !important;
  align-items: center;
  margin-left: auto;
  padding-right: 4px;
  font-size: 1rem;
  font-weight: 800;
  color: #132440;
  white-space: nowrap;
}

/* Show the chevron icon (WooCommerce hides it globally) */
body.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-order-summary__title-icon {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: rgba(19, 36, 64, 0.45);
}

/* Polish the title header */
body.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-order-summary__title {
  border-top: none;
  border-bottom: 1px solid rgba(19, 36, 64, 0.08);
  padding: 4px 0 14px;
  margin-top: 0;
  cursor: pointer;
  gap: 8px;
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-order-summary__title.is-open {
  border-bottom: none;
  padding-bottom: 10px;
}

/* Title text */
body.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-order-summary__title-text {
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: #132440;
  margin: 0 !important;
  letter-spacing: 0;
  flex-grow: 1;
}

/* ─── SECTION 4: Cover Selector — Refined Premium Choice ─── */

/* Two clean, equal-width choice cards (no pill wrapper) */
.dp-cover-selector__options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  gap: 10px;
  margin-top: 10px;
  background: transparent;
  padding: 0;
  border-radius: 0;
}

/* Override base `display: inline-flex` so the label fills its grid cell */
.dp-cover-option {
  display: block;
  width: 100%;
  min-width: 0;
}

/* Calm inactive surface: soft neutral border, white background */
.dp-cover-option__surface {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  padding: 12px 14px;
  min-height: 46px;
  background: #fff;
  border: 1px solid rgba(19, 36, 64, 0.1);
  border-radius: 12px;
  box-shadow: none;
  transition: border-color 0.2s ease,
              background-color 0.2s ease,
              box-shadow 0.2s ease,
              color 0.2s ease;
}

/* Subtle hover state — slightly darker neutral border */
@media (hover: hover) and (pointer: fine) {
  .dp-cover-option:hover .dp-cover-option__surface {
    border-color: rgba(19, 36, 64, 0.22);
  }
}

/* Keyboard focus ring — soft purple halo */
.dp-cover-option:focus-within .dp-cover-option__surface {
  border-color: rgba(79, 70, 229, 0.45);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

/* Selected: subtle purple-tinted background + stronger purple border */
.dp-cover-option.is-selected .dp-cover-option__surface {
  background: rgba(79, 70, 229, 0.05);
  border-color: rgba(79, 70, 229, 0.5);
  box-shadow: 0 1px 2px rgba(79, 70, 229, 0.08);
}

.dp-cover-option.is-selected .dp-cover-option__label {
  color: #4f46e5;
}

.dp-cover-option.is-selected .dp-cover-option__price {
  color: rgba(79, 70, 229, 0.78);
  font-weight: 700;
}

/* "Beste gave" premium banner on the hardcover option — CSS-only */
.dp-cover-option[data-cover-option="hardcover"]::before {
  content: 'Beste gave';
  position: absolute;
  top: -9px;
  left: 50%;
  z-index: 2;
  padding: 3px 10px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  color: #fff;
  background: linear-gradient(135deg, #4f46e5 0%, #9333ea 100%);
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(79, 70, 229, 0.28),
              0 0 0 2px #fff;
  transform: translateX(-50%);
  pointer-events: none;
}

html[lang^="en"] .dp-cover-option[data-cover-option="hardcover"]::before {
  content: 'Best gift';
}

html[lang^="sv"] .dp-cover-option[data-cover-option="hardcover"]::before {
  content: 'Bästa present';
}

/* Keep the label + price visually tight and readable */
.dp-cover-option__label {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  color: #132440;
}

.dp-cover-option__price {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.2;
  color: rgba(19, 36, 64, 0.6);
  white-space: nowrap;
}

/* Mobile — compact spacing, still two-up */
@media (max-width: 699px) {
  .dp-cover-selector__options {
    width: 100%;
    gap: 8px;
    /* Tighten the space below "Applies to 1 book" before the two choices. */
    margin-top: 4px;
  }

  .dp-cover-option__surface {
    padding: 11px 12px;
    min-height: 44px;
    border-radius: 11px;
  }

  .dp-cover-option__label {
    font-size: 0.86rem;
  }

  .dp-cover-option__price {
    font-size: 0.76rem;
  }

  /* Express payment block mobile padding */
  body.woocommerce-checkout .wc-block-checkout .wp-block-woocommerce-checkout-express-payment-block {
    padding: 12px 14px 12px;
  }

  /* Gap 2: on mobile the order summary (with the cover selector) and the form
     (with express checkout) stack via the sidebar layout's flex gap. The base
     24px gap is meant for the desktop side-by-side columns; tighten it when
     stacked so express checkout sits closer to the cover section. */
  body.woocommerce-checkout .wc-block-checkout .wc-block-components-sidebar-layout {
    gap: 10px;
  }
}

/* ==========================================================================
   WooCommerce — Order Received / Thank-you page
   Scoped strictly to body.woocommerce-order-received so no other WC pages,
   order data, emails, or checkout logic are affected. Visual styling only.
   ========================================================================== */
body.woocommerce-order-received .dp-page-shell {
  padding-top: 28px;
  padding-bottom: 72px;
}

/* The generic page hero renders the "Kasse" (checkout) post title on this
   endpoint, which is confusing on a success screen. The WooCommerce success
   notice below becomes the real hero instead. */
body.woocommerce-order-received .dp-page-hero {
  display: none;
}

body.woocommerce-order-received .dp-page-article {
  max-width: 820px;
  margin: 0 auto;
}

body.woocommerce-order-received .entry-content {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

body.woocommerce-order-received .woocommerce-order {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin: 0;
  padding: 0;
}

/* --- Success hero ------------------------------------------------------- */
body.woocommerce-order-received p.woocommerce-thankyou-order-received,
body.woocommerce-order-received .woocommerce-notice--success.woocommerce-thankyou-order-received {
  position: relative;
  margin: 0;
  padding: 56px 32px 44px;
  border: 1px solid var(--dp-border-soft);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% -10%, rgba(106, 90, 224, 0.14), transparent 60%),
    #fff;
  box-shadow: var(--dp-shadow-soft);
  text-align: center;
  font-family: "Playfair Display", serif;
  font-size: clamp(1.7rem, 2.4vw, 2.1rem);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.01em;
  color: var(--dp-text);
}

body.woocommerce-order-received p.woocommerce-thankyou-order-received::before,
body.woocommerce-order-received .woocommerce-notice--success.woocommerce-thankyou-order-received::before {
  content: "";
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  border-radius: 999px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b3fd6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center / 26px 26px no-repeat,
    linear-gradient(180deg, rgba(106, 90, 224, 0.18), rgba(106, 90, 224, 0.08));
  box-shadow:
    0 0 0 1px rgba(106, 90, 224, 0.22),
    0 10px 28px rgba(91, 63, 214, 0.18);
}

/* --- Order overview (order #, date, email, total, payment method) ------- */
body.woocommerce-order-received .woocommerce-order-overview {
  list-style: none;
  margin: 0;
  padding: 24px 26px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 18px 24px;
  border: 1px solid var(--dp-border-soft);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--dp-shadow-soft);
}

body.woocommerce-order-received .woocommerce-order-overview li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dp-text-muted);
}

body.woocommerce-order-received .woocommerce-order-overview li strong {
  display: block;
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--dp-text);
  word-break: break-word;
}

/* --- Order details + customer details cards ----------------------------- */
body.woocommerce-order-received .woocommerce-order-details,
body.woocommerce-order-received .woocommerce-customer-details {
  margin: 0;
  padding: 28px 28px 22px;
  border: 1px solid var(--dp-border-soft);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--dp-shadow-soft);
}

body.woocommerce-order-received .woocommerce-order-details__title,
body.woocommerce-order-received .woocommerce-column__title {
  margin: 0 0 18px;
  font-family: "Playfair Display", serif;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--dp-text);
}

/* Order items table */
body.woocommerce-order-received .woocommerce-table--order-details {
  width: 100%;
  border-collapse: collapse;
  border: 0;
  background: transparent;
}

body.woocommerce-order-received .woocommerce-table--order-details th,
body.woocommerce-order-received .woocommerce-table--order-details td {
  padding: 14px 12px;
  border: 0;
  border-bottom: 1px solid var(--dp-border-soft);
  background: transparent;
  text-align: left;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--dp-text);
  vertical-align: top;
}

body.woocommerce-order-received .woocommerce-table--order-details thead th {
  padding-top: 0;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dp-text-muted);
}

body.woocommerce-order-received .woocommerce-table--order-details tbody tr:last-child td {
  border-bottom: 1px solid rgba(19, 36, 64, 0.14);
}

body.woocommerce-order-received .woocommerce-table--order-details tfoot th,
body.woocommerce-order-received .woocommerce-table--order-details tfoot td {
  padding: 12px 12px 8px;
  border-bottom: 0;
  font-size: 0.95rem;
}

body.woocommerce-order-received .woocommerce-table--order-details tfoot th {
  font-weight: 600;
  color: var(--dp-text-muted);
  text-align: right;
}

body.woocommerce-order-received .woocommerce-table--order-details tfoot tr:last-child th,
body.woocommerce-order-received .woocommerce-table--order-details tfoot tr:last-child td {
  padding-top: 16px;
  font-family: "Playfair Display", serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--dp-text);
}

body.woocommerce-order-received .woocommerce-table--order-details td.product-name a {
  color: var(--dp-text);
  font-weight: 600;
  text-decoration: none;
}

body.woocommerce-order-received .woocommerce-table--order-details td.product-name a:hover {
  color: var(--dp-accent-strong);
}

body.woocommerce-order-received .woocommerce-table--order-details .wc-item-meta,
body.woocommerce-order-received .woocommerce-table--order-details dl.variation {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  color: var(--dp-text-soft);
  font-size: 0.88rem;
}

body.woocommerce-order-received .woocommerce-table--order-details .wc-item-meta li {
  margin: 2px 0;
}

body.woocommerce-order-received .woocommerce-table--order-details .wc-item-meta strong {
  font-weight: 600;
}

/* Customer addresses — paired cards */
body.woocommerce-order-received .woocommerce-customer-details .woocommerce-columns--addresses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 24px;
  margin: 0;
}

body.woocommerce-order-received .woocommerce-customer-details .woocommerce-column {
  width: 100%;
  float: none;
  margin: 0;
  padding: 18px 20px;
  border: 1px solid var(--dp-border-soft);
  border-radius: 16px;
  background: var(--dp-bg);
}

body.woocommerce-order-received .woocommerce-customer-details .woocommerce-column__title {
  margin: 0 0 10px;
  font-size: 1.05rem;
}

body.woocommerce-order-received .woocommerce-customer-details address {
  font-style: normal;
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--dp-text-soft);
  border: 0;
  padding: 0;
}

body.woocommerce-order-received .woocommerce-customer-details p {
  margin: 8px 0 0;
  color: var(--dp-text-soft);
  font-size: 0.94rem;
}

/* Secondary action buttons (e.g. "Pay for this order") */
body.woocommerce-order-received .woocommerce-order .button,
body.woocommerce-order-received .woocommerce-order a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 999px !important;
  background: var(--dp-accent-strong);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

body.woocommerce-order-received .woocommerce-order .button:hover,
body.woocommerce-order-received .woocommerce-order a.button:hover {
  background: var(--dp-accent);
  box-shadow: 0 14px 26px rgba(91, 63, 214, 0.16);
  transform: translateY(-1px);
}

/* --- DreamPage thank-you (custom template override) --------------------- */
/* Thank-you page styles moved to assets/css/thankyou.css (loaded only on
   the order-received endpoint). */

/* --- Mobile ------------------------------------------------------------- */
@media (max-width: 749px) {
  body.woocommerce-order-received .dp-page-shell {
    padding-top: 18px;
    padding-bottom: 48px;
  }

  body.woocommerce-order-received .entry-content {
    gap: 22px;
  }

  body.woocommerce-order-received .woocommerce-order {
    gap: 22px;
  }

  body.woocommerce-order-received p.woocommerce-thankyou-order-received,
  body.woocommerce-order-received .woocommerce-notice--success.woocommerce-thankyou-order-received {
    padding: 40px 22px 32px;
    font-size: 1.55rem;
    border-radius: 20px;
  }

  body.woocommerce-order-received p.woocommerce-thankyou-order-received::before,
  body.woocommerce-order-received .woocommerce-notice--success.woocommerce-thankyou-order-received::before {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    background-size: 24px 24px, auto;
  }

  body.woocommerce-order-received .woocommerce-order-overview {
    grid-template-columns: 1fr;
    padding: 20px;
    gap: 14px;
  }

  body.woocommerce-order-received .woocommerce-order-details,
  body.woocommerce-order-received .woocommerce-customer-details {
    padding: 22px 20px 18px;
    border-radius: 18px;
  }

  body.woocommerce-order-received .woocommerce-order-details__title,
  body.woocommerce-order-received .woocommerce-column__title {
    font-size: 1.2rem;
  }

  body.woocommerce-order-received .woocommerce-table--order-details th,
  body.woocommerce-order-received .woocommerce-table--order-details td {
    padding: 12px 8px;
    font-size: 0.92rem;
  }

  body.woocommerce-order-received .woocommerce-table--order-details tfoot tr:last-child th,
  body.woocommerce-order-received .woocommerce-table--order-details tfoot tr:last-child td {
    font-size: 1.1rem;
  }

  body.woocommerce-order-received .woocommerce-customer-details .woocommerce-columns--addresses {
    grid-template-columns: 1fr;
    gap: 14px;
  }

}

/* Final checkout submit only. Keep express/payment buttons under gateway control. */
body.woocommerce-checkout #place_order,
body.woocommerce-checkout .wc-block-components-checkout-place-order-button {
  position: relative;
  overflow: hidden;
  margin-top: 18px;
  min-height: 58px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #6a5ae0 0%, #5b3fd6 52%, #4a2dbd 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 -12px 26px rgba(36, 18, 104, 0.32) inset,
    0 16px 32px rgba(91, 63, 214, 0.34),
    0 4px 10px rgba(19, 36, 64, 0.16);
  color: #fff;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.02em;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

body.woocommerce-checkout #place_order,
body.woocommerce-checkout #place_order .wc-block-components-button__text,
body.woocommerce-checkout .wc-block-components-checkout-place-order-button,
body.woocommerce-checkout .wc-block-components-checkout-place-order-button .wc-block-components-button__text {
  color: #fff;
  -webkit-text-fill-color: #fff;
}

/* Premium glance: a light sheen sweeps across on hover. */
body.woocommerce-checkout #place_order::after,
body.woocommerce-checkout .wc-block-components-checkout-place-order-button::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 42%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-18deg);
  opacity: 0;
  pointer-events: none;
}

body.woocommerce-checkout #place_order:hover,
body.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    0 -12px 26px rgba(36, 18, 104, 0.34) inset,
    0 22px 44px rgba(91, 63, 214, 0.44),
    0 6px 14px rgba(19, 36, 64, 0.18);
  filter: saturate(1.06);
}

body.woocommerce-checkout #place_order:hover::after,
body.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover::after {
  opacity: 1;
  animation: dp-place-order-sheen 0.85s ease forwards;
}

body.woocommerce-checkout #place_order:active,
body.woocommerce-checkout .wc-block-components-checkout-place-order-button:active {
  transform: translateY(0);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.28) inset,
    0 -6px 18px rgba(36, 18, 104, 0.36) inset,
    0 8px 18px rgba(91, 63, 214, 0.3);
}

@keyframes dp-place-order-sheen {
  from { left: -60%; }
  to { left: 130%; }
}

/* ── Injected regular price (strikethrough) ── */
.dp-order-summary-item__regular-price {
  display: block;
  text-align: right;
  text-decoration: line-through;
  color: rgba(15, 23, 42, 0.42);
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.4;
}

/* ── Savings pill ── */
.dp-order-summary-savings-pill {
  display: inline-flex;
  align-items: center;
  margin-top: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(22, 163, 74, 0.09);
  border: 1px solid rgba(22, 163, 74, 0.22);
  color: #15803d;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* ── Long title fallback: strikethrough + pill move onto one line directly
   beneath the title (JS injects a .dp-os-savings-line inside the description,
   only when the title would otherwise squeeze the pill out of the row). ── */
body.woocommerce-checkout .wc-block-checkout .dp-os-savings-line {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  margin-top: 4px;
}

body.woocommerce-checkout .wc-block-checkout .dp-os-savings-line .dp-order-summary-item__regular-price {
  margin: 0;
  text-align: left;
  white-space: nowrap;
}

body.woocommerce-checkout .wc-block-checkout .dp-os-savings-line .dp-order-summary-savings-pill {
  margin: 0;
}

/* ════════════════════════════════════════════════════════════
   ORDER SUMMARY — premium refinement
   Card, product row, coupon and totals with the Total as the clear
   focal point. Scoped to checkout; visual only and market-agnostic
   (no injected text, so it stays correct across NO/EN/SV).
   ════════════════════════════════════════════════════════════ */

/* One unified, premium card around the main summary (product + coupon +
   totals). We target the "fill" wrapper, which is unique to that summary —
   NOT the whole block — so the separate mobile collapsible summary (which
   carries the cover selector + its own title) is left untouched. */
body.woocommerce-checkout .wc-block-checkout .checkout-order-summary-block-fill-wrapper {
  padding: 18px 16px 10px;
  border: 1px solid rgba(19, 36, 64, 0.08);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 38px rgba(19, 36, 64, 0.06);
}

/* No divider directly under the Free-shipping row (it sits just above the
   Total wrapper, whose border-top draws that line). */
body.woocommerce-checkout .wc-block-checkout .dp-os-free-shipping + .wc-block-components-totals-wrapper {
  border-top: 0;
}

/* Remove the nested default frame so there's a single clean card. */
body.woocommerce-checkout .wc-block-checkout .checkout-order-summary-block-fill {
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* Drop the inner product "card" (border / radius / shadow / fill); let the
   product sit flush in the unified card and separate it from the coupon
   with a single clean hairline. */
body.woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary {
  padding: 4px 0 10px;
  border: 0;
  border-bottom: 1px solid rgba(19, 36, 64, 0.08);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* The cart-items wrapper adds its own large vertical padding; trim it so the
   product row doesn't float in empty space. */
body.woocommerce-checkout .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-cart-items-block {
  padding-top: 4px;
  padding-bottom: 0;
}

/* Title — whole words wrap at spaces (no mid-word "Socce r Star" breaks); a
   single word longer than the column breaks instead of blowing the row out.
   The default `-webkit-box` display ignores overflow-wrap, so force `block`. */
body.woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary .wc-block-components-product-name {
  display: block;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

/* Keep the product row inside the card: every level respects the card width so
   a long title wraps/clips within its column instead of growing the whole row
   and pushing the price/pill off to the side. The summary content defaults to
   `display: table`, which shrink-to-fits and grows past the card on a long
   title — force it back to a normal block. */
body.woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary__content {
  display: block;
  width: 100%;
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary__content,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary-item {
  min-width: 0;
  max-width: 100%;
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary-item__description {
  min-width: 0;
  overflow: hidden;
}

/* When stacked, the title gets the full row — let it show in full. */
body.woocommerce-checkout .wc-block-checkout .dp-os-savings-stacked .wc-block-components-order-summary-item__description {
  overflow: visible;
}

/* Product row — drop the redundant unit price (it duplicates the
   right-aligned line total at quantity 1) and centre the text against
   the cover so the row no longer reads as half-empty. */
body.woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__individual-prices {
  display: none !important;
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item {
  align-items: center;
  padding: 2px 0 8px;
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary .wc-block-components-product-name {
  font-size: 1rem;
  font-weight: 700;
  color: #132440;
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__total-price {
  font-size: 1.02rem;
  font-weight: 700;
  color: #132440;
}

/* Coupon — a quiet, link-like row instead of a heavy grey button. */
body.woocommerce-checkout .wc-block-checkout .wc-block-components-totals-coupon .wc-block-components-panel__button {
  padding: 4px 0;
  background: transparent;
  border: 0;
  font-size: 0.86rem;
  font-weight: 600;
  color: rgba(19, 36, 64, 0.62);
}

/* Totals rows — muted label, confident value. */
body.woocommerce-checkout .wc-block-checkout .wc-block-components-totals-item__label {
  color: rgba(19, 36, 64, 0.6);
  font-size: 0.92rem;
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-totals-item__value {
  color: #132440;
  font-weight: 600;
  font-size: 0.92rem;
}

/* The cover upgrade line (Hardcover fee) — a subtle brand accent so the
   choice the customer just made reads as a premium upgrade, not a tax. */
body.woocommerce-checkout .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-fee-block .wc-block-components-totals-item__value,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-totals-fees .wc-block-components-totals-item__value {
  color: #5b3fd6;
  font-weight: 700;
}

/* Free-shipping reassurance row (injected + translated via JS). Green,
   with a small delivery-truck mark — a low-friction value signal right
   before the Total. */
body.woocommerce-checkout .wc-block-checkout .dp-os-free-shipping .wc-block-components-totals-item__label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #15803d;
  font-weight: 600;
}

body.woocommerce-checkout .wc-block-checkout .dp-os-free-shipping .wc-block-components-totals-item__label::before {
  content: "";
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2315803d' d='M2 6.5A1.5 1.5 0 0 1 3.5 5h9A1.5 1.5 0 0 1 14 6.5V8h3.2a2 2 0 0 1 1.6.8l2.4 3.2a2 2 0 0 1 .4 1.2v1.3a1.5 1.5 0 0 1-1.5 1.5H19a2.5 2.5 0 0 0-5 0H9a2.5 2.5 0 0 0-5 0H3.5A1.5 1.5 0 0 1 2 15.5z'/%3E%3Ccircle cx='6.5' cy='17.5' r='2.4' fill='%2315803d'/%3E%3Ccircle cx='16.5' cy='17.5' r='2.4' fill='%2315803d'/%3E%3Ccircle cx='6.5' cy='17.5' r='1' fill='%23fff'/%3E%3Ccircle cx='16.5' cy='17.5' r='1' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.woocommerce-checkout .wc-block-checkout .dp-os-free-shipping .wc-block-components-totals-item__value {
  color: #15803d;
  font-weight: 700;
}

/* Paid shipping (UK softcover): neutral row — no green, no free-truck mark. */
body.woocommerce-checkout .wc-block-checkout .dp-os-free-shipping.is-paid .wc-block-components-totals-item__label,
body.woocommerce-checkout .wc-block-checkout .dp-os-free-shipping.is-paid .wc-block-components-totals-item__value {
  color: var(--dp-text);
}

body.woocommerce-checkout .wc-block-checkout .dp-os-free-shipping.is-paid .wc-block-components-totals-item__label::before {
  display: none;
}

/* Total — the focal point: large, brand-strong. The single divider above
   comes from the totals wrapper, so don't add a second border here. */
body.woocommerce-checkout .wc-block-checkout .wc-block-components-totals-footer-item {
  padding-top: 12px;
  border-top: 0;
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-size: 1.06rem;
  font-weight: 700;
  color: #132440;
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-size: 1.45rem;
  font-weight: 800;
  color: #132440;
  letter-spacing: -0.01em;
}

/* ════════════════════════════════════════════════════════════
   STRIPE PAYMENT BLOCK — Safe minimal polish
   Only the outer card wrapper + label text + brand icons.
   Does NOT touch step counters, accordion borders, or radio
   control layout — those all use WC Blocks' own ::after /
   box-shadow mechanisms which !important overrides break.
   ════════════════════════════════════════════════════════════ */

/* ─── Outer wrapper: keep flush with the checkout flow (no heavy card) ─── */
/* The heavy white card was crashing into the step/progress line at step 4.
   Drop the box-shadow + background + border; keep only inner spacing so the
   payment options sit naturally between the shipping section and the place
   order button. The individual option rows (below) still carry their own
   subtle background + border, so the section reads as grouped without
   floating above the rest of the checkout. */
body.woocommerce-checkout .wc-block-checkout .wp-block-woocommerce-checkout-payment-block {
  padding: 4px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* ─── Payment method label text — typography only, no layout change ─── */
body.woocommerce-checkout .wc-block-checkout .wp-block-woocommerce-checkout-payment-block .wc-block-components-payment-method-label__label-text {
  font-size: 0.9rem;
  font-weight: 600;
  color: #111827;
  letter-spacing: -0.01em;
}

/* ─── Brand icons (Visa/MC/Amex already injected by Stripe plugin) ─── */
body.woocommerce-checkout .wc-block-checkout .wp-block-woocommerce-checkout-payment-block .wc-block-components-payment-method-label__brand {
  display: flex;
  align-items: center;
  gap: 5px;
}

body.woocommerce-checkout .wc-block-checkout .wp-block-woocommerce-checkout-payment-block .wc-block-components-payment-method-label__brand img {
  height: 20px;
  width: auto;
  border-radius: 4px;
  border: 1px solid rgba(15, 23, 42, 0.09);
  padding: 2px 5px;
  background: #fff;
}

/* ─── Option group container border — override WC Blocks ::after radius/color ─── */
/* WC Blocks draws the outer border as ::after on the radio control, not as a
   direct border. We override only border-color and border-radius here so the
   rest of the WC Blocks mechanism (first/last child rounding, highlight lines)
   keeps working correctly. */
body.woocommerce-checkout .wc-block-checkout .wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control--highlight-checked::after {
  border-color: rgba(15, 23, 42, 0.1);
  border-radius: 14px;
}

/* ─── Subtle background on each option row ─── */
body.woocommerce-checkout .wc-block-checkout .wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control-accordion-option {
  background: #fafafa;
}

/* ─── Round top/bottom of the first and last option to match container ─── */
body.woocommerce-checkout .wc-block-checkout .wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control-accordion-option:first-child {
  border-radius: 13px 13px 0 0;
}

body.woocommerce-checkout .wc-block-checkout .wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control-accordion-option:last-child {
  border-radius: 0 0 13px 13px;
}

body.woocommerce-checkout .wc-block-checkout .wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control-accordion-option:first-child::after {
  border-top-left-radius: 13px;
  border-top-right-radius: 13px;
}

body.woocommerce-checkout .wc-block-checkout .wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control-accordion-option:last-child::after {
  border-bottom-left-radius: 13px;
  border-bottom-right-radius: 13px;
}

/* ─── Selected option: indigo highlight instead of default dark currentColor ─── */
/* WC Blocks uses box-shadow: inset 0 0 0 1.5px currentColor — we replace it
   with an explicit indigo value and add a very subtle background tint. */
body.woocommerce-checkout .wc-block-checkout .wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
  border-radius: 13px;
  box-shadow: inset 0 0 0 1.5px rgba(79, 70, 229, 0.45);
  background: rgba(79, 70, 229, 0.025);
}

/* ─── Reviews page ────────────────────────────────────────────────── */

.dp-reviews-page {
  padding-bottom: 5rem;
}

/* Gallery marquee */
.dp-reviews-gallery {
  padding: 2.5rem 0 3rem;
  overflow: hidden;
  position: relative;
}

.dp-reviews-gallery__fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 12rem;
  z-index: 2;
  pointer-events: none;
}

.dp-reviews-gallery__fade--left {
  left: 0;
  background: linear-gradient(to right, var(--dp-bg) 10%, transparent);
}

.dp-reviews-gallery__fade--right {
  right: 0;
  background: linear-gradient(to left, var(--dp-bg) 10%, transparent);
}

.dp-reviews-gallery__track {
  display: flex;
  gap: 1.125rem;
  width: max-content;
  animation: dp-reviews-marquee 40s linear infinite;
}

.dp-reviews-gallery__track:hover {
  animation-play-state: paused;
}

.dp-reviews-gallery__item {
  flex-shrink: 0;
}

.dp-reviews-gallery__img {
  width: 280px;
  height: 280px;
  border-radius: 16px;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.08),
    0 12px 40px rgba(57, 44, 115, 0.12);
}

@keyframes dp-reviews-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--dp-marquee-to, -50%)); }
}

/* Reviews section */
.dp-reviews-section {
  padding: 3rem 0 0;
}

.dp-reviews-section__inner {
  width: var(--dp-width);
  margin: 0 auto;
}

.dp-reviews-section__head {
  text-align: center;
  margin-bottom: 2.5rem;
}

.dp-reviews-section__eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dp-accent);
  margin: 0 0 0.625rem;
}

/* Fredoka, like the product hero and "Elsket av tusenvis av familier" — the
   page's own h1 belongs to the site's display face, not to the serif the
   sections below it use to label their sources. */
.dp-reviews-section__title {
  font-family: "Fredoka", "Poppins", sans-serif;
  font-size: clamp(2rem, 4vw, 2.875rem);
  color: var(--dp-text);
  margin: 0 0 0.875rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.dp-reviews-section__subtitle {
  color: var(--dp-text-soft);
  font-size: 1.0625rem;
  max-width: 36rem;
  margin: 0 auto;
  line-height: 1.65;
}

/* Stats bar */
.dp-reviews-stats {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  padding: 2rem 0 2.5rem;
  border-bottom: 1px solid var(--dp-border-soft);
  margin-bottom: 2.75rem;
  flex-wrap: wrap;
}

.dp-reviews-stat {
  text-align: center;
}

.dp-reviews-stat__number {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--dp-text);
  display: block;
  line-height: 1;
}

.dp-reviews-stat__label {
  color: var(--dp-text-muted);
  font-size: 0.8125rem;
  margin-top: 0.4rem;
  display: block;
}

/* Heading over our own review cards. Mirrors the Trustpilot band's header a
   size down, with the logo standing in for the eyebrow — these are the reviews
   customers sent us, and the mark is what says so at a glance. */
.dp-reviews-own-head {
  text-align: center;
  margin: clamp(2.75rem, 5vw, 4rem) 0 clamp(1.75rem, 3.5vw, 2.5rem);
}

.dp-reviews-own-head__logo {
  display: block;
  width: auto;
  height: clamp(26px, 4vw, 34px);
  max-width: 200px;
  margin: 0 auto 0.875rem;
  object-fit: contain;
}

.dp-reviews-own-head__title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--dp-text);
  margin: 0 0 0.5rem;
}

.dp-reviews-own-head__lead {
  margin: 0 auto;
  max-width: 30rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--dp-text-soft);
}

/* Review card grid */
.dp-reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.375rem;
}

.dp-review-card {
  background: var(--dp-surface);
  border: 1px solid var(--dp-border-soft);
  border-radius: 18px;
  padding: 1.875rem;
  box-shadow: var(--dp-shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.dp-review-card:hover {
  box-shadow: var(--dp-shadow-medium);
  transform: translateY(-2px);
}

/* Star tiles on our own review cards. Filled colour comes inline from
   dreampage_theme_tp_stars(); this is the unfilled state, tinted from the same
   purple so a 4-of-5 doesn't end on a grey-green square. */
.dp-tp-stars {
  display: flex;
  gap: 4px;
}

.dp-tp-star {
  width: 28px;
  height: 28px;
  border-radius: 3px;
  background: rgba(106, 90, 224, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dp-tp-star svg {
  width: 17px;
  height: 17px;
}

.dp-reviews-stat__tp-icon {
  display: block;
  width: auto;
  height: 5rem;
  max-width: 180px;
  margin: 0 auto;
  object-fit: contain;
}

.dp-review-card__stars {
  color: var(--dp-gold);
  font-size: 1rem;
  letter-spacing: 0.08em;
  line-height: 1;
}

.dp-review-card__text {
  color: var(--dp-text);
  font-size: 0.9375rem;
  line-height: 1.75;
  flex: 1;
  font-style: italic;
}

.dp-review-card__text p {
  margin: 0;
}

/* Photo attached to a review (e.g. the child with the book). */
.dp-review-card__photo {
  border-radius: 14px;
  overflow: hidden;
  background: var(--dp-border-soft);
  line-height: 0;
}

.dp-review-card__photo img {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: cover;
}

.dp-review-card__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--dp-border-soft);
}

.dp-review-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--dp-accent), var(--dp-accent-light));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 0.9375rem;
  flex-shrink: 0;
  overflow: hidden;
}

.dp-review-card__name {
  font-weight: 600;
  color: var(--dp-text);
  font-size: 0.9375rem;
  line-height: 1.3;
}

.dp-review-card__location {
  color: var(--dp-text-muted);
  font-size: 0.8125rem;
  margin-top: 0.125rem;
}

.dp-reviews-empty {
  text-align: center;
  color: var(--dp-text-muted);
  padding: 3rem 0;
}

@media (max-width: 640px) {
  .dp-reviews-gallery__fade {
    width: 3.5rem;
  }

  .dp-reviews-gallery__img {
    width: 160px;
    height: 160px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 6px 20px rgba(57, 44, 115, 0.09);
  }

  /* The photo marquee and the heading were each holding ~48px of their own
     padding, which on a phone stacked into a screenful of nothing. */
  .dp-reviews-gallery {
    padding: 1.5rem 0 1.25rem;
  }

  .dp-reviews-section {
    padding-top: 0.5rem;
  }

  .dp-reviews-section__head {
    margin-bottom: 1.5rem;
  }

  /*
   * The stats bar is gone on phones. It cost a full screen to say what the
   * Trustpilot band immediately below says with the actual reviews, and the
   * logo appeared twice within one scroll. The band keeps a hairline of its
   * own here, since the one it normally borrows belonged to this bar.
   */
  .dp-reviews-stats {
    display: none;
  }

  .dp-tpw {
    border-top: 1px solid var(--dp-border-soft);
  }

  /* Two up. A phone-width column per review made the page endless, and these
     cards are short enough to read at half width once the chrome shrinks.
     align-items: start lets each card stop at its own content — stretched to
     the row's tallest, a short review next to one with a photo became a card
     that was mostly empty white. */
  .dp-reviews-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 0.75rem;
  }

  .dp-review-card {
    padding: 0.875rem;
    gap: 0.75rem;
    border-radius: 14px;
  }

  .dp-review-card__text {
    font-size: 0.8125rem;
    line-height: 1.6;
  }

  .dp-review-card .dp-tp-stars {
    gap: 2px;
  }

  .dp-review-card .dp-tp-star {
    width: 16px;
    height: 16px;
    border-radius: 2px;
  }

  .dp-review-card .dp-tp-star svg {
    width: 10px;
    height: 10px;
  }

  .dp-review-card__photo img {
    max-height: 150px;
  }

  .dp-review-card__meta {
    gap: 0.5rem;
  }

  .dp-review-card__avatar {
    width: 28px;
    height: 28px;
    font-size: 0.75rem;
  }

  .dp-review-card__name {
    font-size: 0.8125rem;
  }

  .dp-review-card__location {
    font-size: 0.6875rem;
  }
}


/* ── Finn din bok: kundebilder / anmeldelser ──────────────────────────────
   Three 3:4 portrait photos with floating review text, between the finder
   and the footer. Photos auto-crop to 3:4 via aspect-ratio + object-fit.   */
.fdb-reviews {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 8vw, 110px) 20px clamp(64px, 9vw, 128px);
  /* Top fades in from the finder's bottom colour (#faf9ff) so the two
     sections blend instead of meeting at a hard line. */
  background:
    linear-gradient(180deg, #faf9ff 0%, rgba(247, 246, 255, 0) 170px),
    radial-gradient(circle at 18% 30%, rgba(106, 90, 224, 0.05) 0%, transparent 42%),
    radial-gradient(circle at 84% 88%, rgba(94, 204, 255, 0.06) 0%, transparent 44%),
    #f7f6ff;
}

.fdb-reviews__inner {
  position: relative;
  z-index: 2;
  width: min(1080px, 100%);
  margin: 0 auto;
}

/* ── Section header ─────────────────────────────────────────────────────── */
.fdb-reviews__head {
  max-width: 640px;
  margin: 0 auto clamp(40px, 6vw, 72px);
  text-align: center;
}

.fdb-reviews__eyebrow {
  margin: 0 0 12px;
  color: var(--dp-accent, #6a5ae0);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.fdb-reviews__title {
  margin: 0;
  font-family: "Playfair Display", serif;
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--dp-text, #132440);
}

.fdb-reviews__subtitle {
  margin: 16px auto 0;
  max-width: 30em;
  color: var(--dp-text-soft, rgba(19, 36, 64, 0.68));
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.6;
}

/* ── Photo wall ─────────────────────────────────────────────────────────── */
.fdb-reviews__wall {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(28px, 4vw, 56px);
}

@keyframes fdb-reviews-float {
  0%, 100% { transform: translateY(0) rotate(var(--fdb-rev-rot, 0deg)); }
  50%      { transform: translateY(-12px) rotate(var(--fdb-rev-rot, 0deg)); }
}

.fdb-reviews__card {
  position: relative;
  width: min(290px, 78vw);
  margin-bottom: clamp(36px, 5vw, 60px);
  animation: fdb-reviews-float 7s ease-in-out infinite;
  will-change: transform;
}

.fdb-reviews__card--1 { --fdb-rev-rot: -3deg; margin-top: 0;    animation-delay: 0s;   }
.fdb-reviews__card--2 { --fdb-rev-rot: 2deg;  margin-top: 44px; animation-delay: 1.4s; }
.fdb-reviews__card--3 { --fdb-rev-rot: -2deg; margin-top: 12px; animation-delay: 2.6s; }

/* The photo frame — autocrops any image to a 3:4 portrait. */
.fdb-reviews__photo {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(160deg, #ece8ff 0%, #dfeeff 100%);
  box-shadow:
    0 28px 60px rgba(57, 44, 115, 0.18),
    0 0 0 6px rgba(255, 255, 255, 0.95),
    0 0 0 8px rgba(106, 90, 224, 0.1);
}

.fdb-reviews__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fdb-reviews__photo-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(106, 90, 224, 0.5);
}

.fdb-reviews__photo-hint {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ── Floating quote chip ────────────────────────────────────────────────── */
.fdb-reviews__quote {
  position: absolute;
  left: 50%;
  bottom: -52px;
  width: 88%;
  transform: translateX(-50%) rotate(calc(var(--fdb-rev-rot, 0deg) * -0.6));
  padding: 14px 18px 16px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(57, 44, 115, 0.16);
  text-align: left;
}

/* Alternate the chip side so the text feels scattered, not stacked. */
.fdb-reviews__card--1 .fdb-reviews__quote { left: 8%;  transform: rotate(2deg);  }
.fdb-reviews__card--2 .fdb-reviews__quote { left: auto; right: 6%; transform: rotate(-2.5deg); }
.fdb-reviews__card--3 .fdb-reviews__quote { left: 10%; transform: rotate(1.5deg); }

.fdb-reviews__stars {
  display: block;
  margin-bottom: 6px;
  color: #f5a623;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
}

.fdb-reviews__quote-text {
  margin: 0;
  color: var(--dp-text, #132440);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.42;
}

.fdb-reviews__name {
  display: block;
  margin-top: 9px;
  color: var(--dp-accent-strong, #5b3fd6);
  font-size: 0.82rem;
  font-weight: 600;
}

.fdb-reviews__place {
  color: var(--dp-text-muted, rgba(19, 36, 64, 0.52));
  font-weight: 500;
}

/* ── Ambient decorative bits ────────────────────────────────────────────── */
.fdb-reviews__ambient {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.fdb-reviews__deco {
  position: absolute;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--dp-accent, #6a5ae0);
  opacity: 0.55;
  white-space: nowrap;
  animation: fdb-reviews-float 9s ease-in-out infinite;
}

.fdb-reviews__deco--stars {
  top: 16%;
  left: 7%;
  color: #f5a623;
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  --fdb-rev-rot: -8deg;
}

.fdb-reviews__deco--love {
  top: 30%;
  right: 6%;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 28px rgba(57, 44, 115, 0.1);
  --fdb-rev-rot: 4deg;
  animation-delay: 1.2s;
}

.fdb-reviews__deco--gift {
  bottom: 16%;
  left: 9%;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 28px rgba(57, 44, 115, 0.1);
  --fdb-rev-rot: -5deg;
  animation-delay: 2.1s;
}

.fdb-reviews__deco--sparkle  { top: 12%; right: 16%; font-size: 1.4rem; opacity: 0.4; animation-delay: 0.6s; }
.fdb-reviews__deco--sparkle2 { bottom: 22%; right: 22%; font-size: 1rem; opacity: 0.35; animation-delay: 1.8s; }

/* ── Tablet ─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .fdb-reviews__card--2 { margin-top: 0; }
  .fdb-reviews__deco--love,
  .fdb-reviews__deco--gift { display: none; }
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .fdb-reviews__wall {
    gap: 40px;
  }

  .fdb-reviews__card {
    width: min(280px, 82vw);
    margin-top: 0 !important;
    margin-bottom: 30px;
    animation: none;
    transform: rotate(var(--fdb-rev-rot, 0deg));
  }

  .fdb-reviews__deco--stars,
  .fdb-reviews__deco--sparkle,
  .fdb-reviews__deco--sparkle2 { display: none; }
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fdb-reviews__card,
  .fdb-reviews__deco {
    animation: none;
  }
}

/* ── Language switcher (header) ─────────────────────────────────────── */

.dp-screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.dp-lang-switcher {
  position: relative;
}

.dp-lang-switcher__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(19, 36, 64, 0.12);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(245, 243, 255, 0.5) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  color: #132440;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.dp-lang-switcher__toggle:hover,
.dp-lang-switcher__toggle:focus-visible,
.dp-lang-switcher.is-open .dp-lang-switcher__toggle {
  transform: translateY(-1px);
  border-color: rgba(91, 63, 214, 0.28);
  box-shadow: 0 10px 26px rgba(91, 63, 214, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  outline: none;
}

.dp-lang-switcher.is-open .dp-lang-switcher__toggle {
  transform: none;
  background: linear-gradient(180deg, rgba(247, 244, 255, 0.85) 0%, rgba(238, 233, 255, 0.6) 100%);
}

.dp-lang-switcher__globe {
  width: 16px;
  height: 16px;
  opacity: 0.85;
}

.dp-lang-switcher__chevron {
  width: 12px;
  height: 12px;
  opacity: 0.7;
  transition: transform 0.18s ease;
}

.dp-lang-switcher.is-open .dp-lang-switcher__chevron {
  transform: rotate(180deg);
}

.dp-lang-switcher__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  margin: 0;
  padding: 8px;
  list-style: none;
  min-width: 176px;
  background: #fff;
  border: 1px solid rgba(19, 36, 64, 0.08);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(19, 36, 64, 0.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  z-index: 80;
}

.dp-lang-switcher.is-open .dp-lang-switcher__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dp-lang-switcher__menu li + li {
  margin-top: 2px;
}

.dp-lang-switcher__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  color: #132440;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  transition: background-color 0.15s ease;
}

.dp-lang-switcher__option:hover {
  background: rgba(91, 63, 214, 0.06);
}

.dp-lang-switcher__option.is-active {
  background: rgba(91, 63, 214, 0.09);
}

.dp-lang-switcher__option-code {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1;
  color: rgba(19, 36, 64, 0.5);
  border: 1px solid rgba(19, 36, 64, 0.14);
  border-radius: 6px;
  padding: 3px 6px;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.dp-lang-switcher__option.is-active .dp-lang-switcher__option-code {
  background: #132440;
  border-color: #132440;
  color: #fff;
}

/* Burger + mobile switcher live together in the header's first column. */
.dp-header__menu-group {
  display: none;
}

.dp-lang-switcher--mobile {
  display: none;
}

@media (max-width: 989px) {
  .dp-header__inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .dp-header__menu-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    grid-column: 1;
    justify-self: start;
    position: relative;
    z-index: 2;
  }

  .dp-lang-switcher--desktop {
    display: none;
  }

  .dp-lang-switcher--mobile {
    display: block;
  }

  .dp-lang-switcher--mobile .dp-lang-switcher__toggle {
    height: 38px;
    padding: 0 10px;
    gap: 6px;
    border-radius: 11px;
    border-color: rgba(19, 36, 64, 0.1);
    font-size: 0.72rem;
  }

  .dp-lang-switcher--mobile .dp-lang-switcher__globe {
    width: 14px;
    height: 14px;
  }

  .dp-lang-switcher--mobile .dp-lang-switcher__chevron {
    display: none;
  }

  .dp-lang-switcher--mobile .dp-lang-switcher__menu {
    left: 0;
    right: auto;
  }
}

/* ── Country flags (market switcher + personalizer language picker) ────── */

.dp-flag {
  display: inline-flex;
  width: 21px;
  height: 15px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(19, 36, 64, 0.14);
  flex: none;
}

.dp-flag svg {
  display: block;
  width: 100%;
  height: 100%;
}

.dp-lang-switcher__toggle .dp-flag {
  width: 20px;
  height: 14px;
  border-radius: 3px;
}

.dp-lang-switcher__option-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.dp-lang-switcher__option .dp-flag {
  width: 20px;
  height: 14px;
  border-radius: 3px;
}

@media (max-width: 989px) {
  .dp-lang-switcher--mobile .dp-lang-switcher__toggle .dp-flag {
    width: 18px;
    height: 13px;
  }
}

/* ── Personalizer book-language picker ─────────────────────────────────── */

.dp-lang-select-wrap {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.dp-lang-dropdown {
  position: relative;
}

.dp-lang-dropdown__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--dp-text);
  font-size: 1.42rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dp-lang-dropdown__current {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.dp-lang-dropdown__current .dp-flag {
  width: 24px;
  height: 17px;
}

.dp-lang-dropdown__current-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dp-lang-dropdown__chevron {
  width: 16px;
  height: 16px;
  flex: none;
  opacity: 0.6;
  transition: transform 0.18s ease;
}

.dp-lang-dropdown.is-open .dp-lang-dropdown__chevron {
  transform: rotate(180deg);
}

.dp-lang-dropdown.is-open .dp-lang-dropdown__toggle {
  border-color: rgba(106, 90, 224, 0.5);
  box-shadow: 0 0 0 4px rgba(106, 90, 224, 0.1), 0 16px 30px rgba(91, 63, 214, 0.08);
}

.dp-lang-dropdown__menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  margin: 0;
  padding: 7px;
  list-style: none;
  background: #fff;
  border: 1px solid rgba(106, 90, 224, 0.14);
  border-radius: 18px;
  box-shadow: 0 22px 48px rgba(91, 63, 214, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  z-index: 40;
}

.dp-lang-dropdown.is-open .dp-lang-dropdown__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dp-lang-dropdown__menu li + li {
  margin-top: 2px;
}

.dp-lang-option {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--dp-text);
  font-size: 1.38rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.dp-lang-option .dp-flag {
  width: 24px;
  height: 17px;
}

.dp-lang-option__label {
  flex: 1;
  min-width: 0;
}

.dp-lang-option__check {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--dp-accent-strong, #5b3fd6);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.dp-lang-option:hover {
  background: rgba(91, 63, 214, 0.06);
}

.dp-lang-option.is-selected {
  background: rgba(91, 63, 214, 0.09);
}

.dp-lang-option.is-selected .dp-lang-option__check {
  opacity: 1;
}

@media (max-width: 560px) {
  .dp-lang-dropdown__toggle {
    font-size: 1.3rem;
  }

  .dp-lang-option {
    padding: 11px 12px;
    font-size: 1.26rem;
  }
}

/* ── Checkout payment options — trust & clarity pass (UK/US mobile) ────────
   The block checkout's payment accordion renders as joined grey boxes with
   bare labels, which reads as untrustworthy right at the payment decision.
   Each option becomes its own white card with a clear selected state, and
   the dp-checkout-payment-trust strip (injected by site.js from the
   template in page.php) anchors the form with a lock + card-brand marks. */

body.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control-accordion-option {
  background: #ffffff;
  border: 1px solid rgba(19, 36, 64, 0.14);
  border-radius: 16px;
  margin: 0 0 12px;
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control-accordion-option:last-child {
  margin-bottom: 0;
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control-accordion-option:has(input[type="radio"]:checked) {
  border-color: rgba(91, 63, 214, 0.55);
  box-shadow: 0 6px 18px rgba(91, 63, 214, 0.10);
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option {
  padding-top: 16px;
  padding-bottom: 16px;
  font-weight: 600;
  color: #0f172a;
}

/* The accordion draws its own hairlines between options — the cards above
   replace them. */
body.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control-accordion-option::after,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option::after {
  display: none;
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control-accordion-content {
  padding: 4px 16px 18px;
}

/* Gateway descriptions (the single reassurance line per option). */
body.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control-accordion-content p {
  margin: 0 0 12px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(15, 23, 42, 0.66);
  text-align: left;
}

/* PPCP hosted card fields: consistent rhythm between the iframe wrappers. */
body.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control-accordion-content .wc-block-gateway-container,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control-accordion-content .ppcp-dcc-credit-card-wrapper > div {
  margin-bottom: 12px;
}

/* Trust strip under the payment options. */
.dp-checkout-payment-trust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 14px;
  padding: 13px 16px;
  border: 1px solid rgba(15, 118, 110, 0.14);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(241, 253, 250, 0.96) 0%, rgba(236, 251, 247, 0.92) 100%);
}

.dp-checkout-payment-trust__secure {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.dp-checkout-payment-trust__lock {
  display: inline-block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background-color: #0f766e;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1V7a5 5 0 0 0-5-5zm-3 5a3 3 0 1 1 6 0v3H9V7zm3 7a1.5 1.5 0 0 1 .75 2.8V18a.75.75 0 0 1-1.5 0v-1.2A1.5 1.5 0 0 1 12 14z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1V7a5 5 0 0 0-5-5zm-3 5a3 3 0 1 1 6 0v3H9V7zm3 7a1.5 1.5 0 0 1 .75 2.8V18a.75.75 0 0 1-1.5 0v-1.2A1.5 1.5 0 0 1 12 14z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.dp-checkout-payment-trust__text {
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.3;
  color: #0f172a;
  white-space: nowrap;
}

.dp-checkout-payment-trust__brands {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dp-checkout-payment-trust__brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  width: 44px;
  padding: 4px 6px;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

.dp-checkout-payment-trust__brand-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* UK sale announcement bar (header topbar, /uk/ market only) */

.dp-topbar--sale {
  background: linear-gradient(135deg, rgba(122, 104, 255, 0.95) 0%, rgba(91, 63, 214, 0.92) 100%);
  color: #fff;
}

.dp-topbar__sale {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 14px;
  width: var(--dp-width);
  margin: 0 auto;
  padding: 7px 0;
}

@media (max-width: 480px) {
  .dp-topbar__sale {
    gap: 10px;
  }

  .dp-topbar__sale-ends {
    margin-right: 2px;
  }
}

.dp-topbar__sale-text {
  color: #fff;
}

.dp-topbar__sale-timer {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.dp-topbar__sale-ends {
  margin-right: 4px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  opacity: 0.85;
}

.dp-topbar__sale-digits {
  min-width: 2.1em;
  padding: 2px 5px;
  border-radius: 6px;
  background: rgba(19, 36, 64, 0.28);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.dp-topbar__sale-sep {
  opacity: 0.7;
}

/* UK product page: mobile-only offer badge beside the price.
   Same "liquid glass" purple as the primary hero buttons. */

.dp-product-hero__offer-badge {
  display: none;
  padding: 5px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(122, 104, 255, 0.92) 0%, rgba(91, 63, 214, 0.88) 100%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
  box-shadow:
    0 6px 18px rgba(90, 63, 214, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -2px 6px rgba(58, 34, 168, 0.35);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}

@media (max-width: 767px) {
  .dp-product-hero__offer-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 10px;
  }
}

/* Softcover shipping confirmation modal (cover switcher, fee markets only) */

.dp-cover-shipping-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(19, 36, 64, 0.45);
}

.dp-cover-shipping-modal__dialog {
  width: min(420px, 100%);
  padding: 24px 24px 20px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--dp-border);
  box-shadow: var(--dp-shadow-medium);
}

.dp-cover-shipping-modal__title {
  margin: 0 0 8px;
  font-family: "Fredoka", sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--dp-text);
}

.dp-cover-shipping-modal__message {
  margin: 0 0 18px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--dp-text-soft);
}

.dp-cover-shipping-modal__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dp-cover-shipping-modal__btn {
  width: 100%;
  padding: 12px 18px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.dp-cover-shipping-modal__btn--primary {
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: linear-gradient(135deg, rgba(122, 104, 255, 0.92) 0%, rgba(91, 63, 214, 0.88) 100%);
  color: #fff;
  box-shadow: 0 8px 26px rgba(90, 63, 214, 0.32);
}

.dp-cover-shipping-modal__btn--primary:hover {
  transform: translateY(-1px);
}

.dp-cover-shipping-modal__btn--ghost {
  border: 1px solid var(--dp-border);
  background: #fff;
  color: var(--dp-text-soft);
}

.dp-cover-shipping-modal__btn--ghost:hover {
  background: rgba(19, 36, 64, 0.04);
}

/* ── Preview: inner-page generation (#dp-inner-cta) ───────────────────────
   Three states driven by preview.js: idle (pitch + button, teased by the
   product's blurred inner pages), working (the same countdown language as
   the cover wait screen) and ready (the generated page). */

body.dreampage-preview-request .dp-inner-cta {
  position: relative;
  margin-top: 18px;
  padding: 20px 22px;
  border: 1px solid rgba(111, 92, 246, 0.16);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(111, 92, 246, 0.07), rgba(147, 51, 234, 0.03) 55%, #fff);
  box-shadow: 0 10px 30px rgba(19, 36, 64, 0.05);
  overflow: hidden;
}

/* The hidden attribute must always win over the display rules below. */
body.dreampage-preview-request .dp-inner-cta [hidden] {
  display: none !important;
}

body.dreampage-preview-request .dp-inner-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(111, 92, 246, 0.1);
  color: #4f3fd7;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.dreampage-preview-request .dp-inner-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #4f46e5, #9333ea);
  box-shadow: 0 10px 24px rgba(79, 70, 229, 0.3), 0 5px 12px rgba(147, 51, 234, 0.2);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

body.dreampage-preview-request .dp-inner-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(79, 70, 229, 0.36), 0 6px 16px rgba(147, 51, 234, 0.24);
}

body.dreampage-preview-request .dp-inner-btn:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* ── Idle ── */
body.dreampage-preview-request .dp-inner-idle {
  display: flex;
  align-items: center;
  gap: 20px;
}

body.dreampage-preview-request .dp-inner-idle__thumbs {
  position: relative;
  flex: 0 0 116px;
  height: 92px;
}

body.dreampage-preview-request .dp-inner-idle__thumbs img {
  position: absolute;
  width: 96px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(19, 36, 64, 0.18);
  filter: blur(3px) saturate(1.05);
}

body.dreampage-preview-request .dp-inner-idle__thumbs img:first-child {
  left: 0;
  top: 14px;
  transform: rotate(-5deg);
}

body.dreampage-preview-request .dp-inner-idle__thumbs img:last-child {
  left: 22px;
  top: 2px;
  transform: rotate(3.5deg);
}

body.dreampage-preview-request .dp-inner-idle__badge {
  position: absolute;
  right: -6px;
  bottom: -2px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: linear-gradient(135deg, #4f46e5, #9333ea);
  box-shadow: 0 6px 14px rgba(79, 70, 229, 0.4);
  color: #fff;
}

body.dreampage-preview-request .dp-inner-idle__body {
  flex: 1;
  min-width: 0;
}

body.dreampage-preview-request .dp-inner-idle__title {
  margin: 7px 0 3px;
  font-family: "Fredoka", "Poppins", sans-serif;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--dp-text);
}

body.dreampage-preview-request .dp-inner-idle__sub {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--dp-text-soft);
}

body.dreampage-preview-request .dp-inner-idle__action {
  flex: 0 0 auto;
  text-align: center;
}

body.dreampage-preview-request .dp-inner-idle__note {
  margin: 7px 0 0;
  font-size: 11.5px;
  color: var(--dp-text-muted);
}

/* ── Working (countdown) ── */
body.dreampage-preview-request .dp-inner-working {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 0 2px;
  text-align: center;
}

body.dreampage-preview-request .dp-inner-working__title {
  margin: 11px 0 4px;
  font-family: "Fredoka", "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--dp-text);
}

body.dreampage-preview-request .dp-inner-working__copy {
  margin: 0;
  max-width: 400px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--dp-text-soft);
}

body.dreampage-preview-request .dp-inner-timer {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  margin-top: 12px;
  font-size: 38px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--dp-text);
}

body.dreampage-preview-request .dp-inner-timer__suffix {
  padding-bottom: 3px;
  font-size: 17px;
  font-weight: 700;
  color: var(--dp-text-muted);
}

body.dreampage-preview-request .dp-inner-spinner {
  width: 34px;
  height: 34px;
  margin-top: 12px;
  border: 3px solid rgba(111, 92, 246, 0.14);
  border-top-color: #6f5cf6;
  border-radius: 50%;
  animation: dp-spin 1s linear infinite;
}

body.dreampage-preview-request .dp-inner-progress-track {
  position: relative;
  width: min(320px, 78%);
  height: 7px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(111, 92, 246, 0.12);
}

body.dreampage-preview-request .dp-inner-progress-bar {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #8a72ff 0%, #6f5cf6 45%, #cdbfff 100%);
  transform: scaleX(0.08);
  transform-origin: left center;
  transition: transform 0.4s ease;
}

/* ── Error ── */
body.dreampage-preview-request .dp-inner-errorbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 4px 0 2px;
  text-align: center;
}

body.dreampage-preview-request .dp-inner-errorbox__text {
  margin: 0;
  max-width: 460px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #b91c1c;
}

/* ── Ready ── */
body.dreampage-preview-request .dp-inner-ready__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 14px;
}

body.dreampage-preview-request .dp-inner-ready__title {
  margin: 0;
  font-family: "Fredoka", "Poppins", sans-serif;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--dp-text);
}

body.dreampage-preview-request .dp-inner-ready__figure {
  margin: 0;
  text-align: center;
}

body.dreampage-preview-request .dp-inner-ready__imgwrap {
  position: relative;
  display: inline-block;
  max-width: 680px;
}

/* No border-radius/box-shadow here: the mockup is transparent with the
   book's own shadows baked in — a CSS shadow would draw a rectangle. */
body.dreampage-preview-request .dp-inner-ready__figure img {
  width: 100%;
  height: auto;
}

body.dreampage-preview-request .dp-inner-zoom {
  position: absolute;
  /* Percentages land the button on the book's bottom-right corner: the
     transparent mockup canvas has ~5.6% side and ~11.7% bottom margins. */
  right: 7.5%;
  bottom: 14%;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(19, 36, 64, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 6px 16px rgba(19, 36, 64, 0.18);
  color: #4f3fd7;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

body.dreampage-preview-request .dp-inner-zoom:hover {
  transform: scale(1.07);
  box-shadow: 0 8px 20px rgba(19, 36, 64, 0.24);
}

body.dreampage-preview-request .dp-inner-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100001;
  /* The overlay owns every touch: without this, a pinch whose finger lands
     on the backdrop triggers the browser's native page zoom. */
  touch-action: none;
  overscroll-behavior: contain;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(12, 16, 32, 0.86);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

body.dreampage-preview-request .dp-inner-lightbox img {
  width: 100%;
  max-width: 1500px;
  max-height: 94vh;
  object-fit: contain;
  transform-origin: 0 0;
  will-change: transform;
}

body.dreampage-preview-request .dp-inner-lightbox__close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease;
}

body.dreampage-preview-request .dp-inner-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.26);
}

@media (max-width: 640px) {
  body.dreampage-preview-request .dp-inner-lightbox__close {
    top: 12px;
    right: 12px;
    width: 68px;
    height: 68px;
    background: rgba(255, 255, 255, 0.24);
  }

  body.dreampage-preview-request .dp-inner-lightbox__close svg {
    width: 30px;
    height: 30px;
  }
}

body.dreampage-preview-request .dp-inner-ready__caption {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--dp-text-muted);
}

/* ── Mobile ── */
@media (max-width: 640px) {
  body.dreampage-preview-request .dp-inner-cta {
    margin-top: 14px;
    padding: 18px 16px;
    border-radius: 14px;
  }

  body.dreampage-preview-request .dp-inner-idle {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

  body.dreampage-preview-request .dp-inner-idle__thumbs {
    flex-basis: auto;
    width: 118px;
    height: 86px;
    margin-top: 2px;
  }

  body.dreampage-preview-request .dp-inner-idle__body {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  body.dreampage-preview-request .dp-inner-idle__sub {
    max-width: 300px;
  }

  body.dreampage-preview-request .dp-inner-idle__action {
    width: 100%;
    margin-top: 4px;
  }

  body.dreampage-preview-request .dp-inner-idle__action .dp-inner-btn {
    width: 100%;
    padding: 13px 22px;
  }

  body.dreampage-preview-request .dp-inner-timer {
    font-size: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.dreampage-preview-request .dp-inner-progress-bar {
    transition: none;
  }

  body.dreampage-preview-request .dp-inner-btn {
    transition: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   CONVERSION PASS — preview price bar, spec strip, flat checkout
   July 2026. Two goals:
   1. The preview page commits to the real all-in price, so the checkout
      never surprises anyone with a bigger number.
   2. The checkout stops looking like a template: the page-wide white card
      is gone, and only the sections that group real content keep a surface.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Preview sticky bar: price beside the button ────────────────────── */

/* The price column is capped rather than sized to its content: left on `auto`
   the longest market string ("Free shipping · arrives in 6–8 days") claimed
   193px of a 358px row and squeezed the CTA into two lines, which cost more
   height than letting the meta wrap ever would. */
body.dreampage-preview-request #dp-checkout-inner,
#dp-checkout-inner {
  display: grid;
  /* Wide enough that the longest single fact in any market ("hjemme om 6–8
     dager") stays on one line, narrow enough that the CTA never wraps. */
  grid-template-columns: minmax(0, 142px) minmax(0, 1fr);
  align-items: center;
  gap: 6px 12px;
  max-width: 720px;
  margin: 0 auto;
  padding: 12px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  text-align: left;
}

/* No price resolved (product without a price): the button takes the row. */
body.dreampage-preview-request #dp-checkout-bar:not(.has-price) #dp-checkout-inner,
#dp-checkout-bar:not(.has-price) #dp-checkout-inner {
  grid-template-columns: minmax(0, 1fr);
}

.dp-checkout-bar__price {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.dp-checkout-bar__amount {
  font-family: var(--dp-font-display, inherit);
  font-size: 1.32rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #132440;
  white-space: nowrap;
}

/* Two separate facts — shipping cost and arrival time. Beside the button on a
   phone they do not fit on one line, and left to wrap naturally they run
   together into one odd sentence ("Fri frakt hemma om 6–8 dagar"), so each
   fact gets its own line. One row again once there is width for it. */
.dp-checkout-bar__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.25;
  color: rgba(19, 36, 64, 0.58);
}

@media (min-width: 700px) {
  .dp-checkout-bar__meta {
    flex-direction: row;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
  }
}

/* The middle dot only earns its place when both facts share a line. Stacked on
   a phone it would dangle at the end of the first line. */
.dp-checkout-bar__sep {
  display: none;
  color: rgba(19, 36, 64, 0.3);
}

@media (min-width: 700px) {
  .dp-checkout-bar__sep {
    display: inline;
  }
}

body.dreampage-preview-request #dp-checkout-btn,
#dp-checkout-btn {
  width: 100%;
  justify-self: stretch;
  /* Tight horizontal padding on phones so the longest market label ("Order the
     book") stays on one line — a wrapped CTA costs far more bar height than
     the padding is worth. */
  padding: 15px 16px;
  font-size: 1rem;
  white-space: nowrap;
}

/* "Legg til en bok til" — the second way out of the preview. It must stay
   clearly subordinate to "Bestill boken", but the underlined-text version it
   replaces read as a stray hyperlink dropped into a finished bar: greyed,
   underlined and baseline-aligned, it looked more like an error message than a
   control anyone was meant to press.
   An outlined pill fixes that without competing for the thumb. The hierarchy
   is carried by weight rather than by size — no fill, no shadow, a hairline
   border and smaller type against a filled, shadowed, larger CTA — so the
   customer buying one book still sees exactly one obvious way forward. */
.dp-checkout-bar__secondary {
  grid-column: 1 / -1;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* Sized to stay close to the height the old text link occupied: the bar is
     pinned over the preview, and every pixel it grows is a pixel of the book
     the customer came to look at. 36px is still a comfortable target because
     the pill is wide. */
  min-height: 36px;
  padding: 0 15px;
  appearance: none;
  border: 1.5px solid rgba(19, 36, 64, 0.15);
  border-radius: 999px;
  background: #fff;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2;
  /* Full-strength ink, not the old 62% grey: a muted label inside a muted
     outline reads as disabled. The restraint comes from the empty fill. */
  color: #132440;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.16s ease, color 0.16s ease, background-color 0.16s ease,
    transform 0.16s ease;
}

/* Desktop has the room the phone does not. */
@media (min-width: 700px) {
  .dp-checkout-bar__secondary {
    gap: 7px;
    min-height: 42px;
    padding: 0 20px;
    font-size: 0.875rem;
  }
}

/* The plus sits in its own tinted disc so the accent colour appears once, at
   icon size — enough to mark the button as an action, too small to pull the
   eye away from the CTA above it. */
.dp-checkout-bar__secondary-icon {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  flex: none;
  border-radius: 50%;
  background: rgba(106, 90, 224, 0.1);
  color: var(--dp-accent, #6a5ae0);
}

@media (min-width: 700px) {
  .dp-checkout-bar__secondary-icon {
    width: 20px;
    height: 20px;
  }
}

/* Pressed: the disc spins in place and the label stays put, so the pill keeps
   exactly the width it had. */
.dp-checkout-bar__secondary.is-loading .dp-checkout-bar__secondary-icon {
  background: none;
  border: 2px solid rgba(106, 90, 224, 0.25);
  border-top-color: var(--dp-accent, #6a5ae0);
  animation: dp-secondary-spin 0.7s linear infinite;
}

.dp-checkout-bar__secondary.is-loading .dp-checkout-bar__secondary-icon svg {
  display: none;
}

@keyframes dp-secondary-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .dp-checkout-bar__secondary.is-loading .dp-checkout-bar__secondary-icon {
    animation: none;
  }
}

@media (hover: hover) {
  .dp-checkout-bar__secondary:hover {
    border-color: rgba(106, 90, 224, 0.45);
    background: rgba(106, 90, 224, 0.05);
    color: var(--dp-accent-strong, #5b3fd6);
  }

  .dp-checkout-bar__secondary:hover .dp-checkout-bar__secondary-icon {
    background: rgba(106, 90, 224, 0.18);
  }
}

.dp-checkout-bar__secondary:active {
  transform: scale(0.98);
}

.dp-checkout-bar__secondary:focus-visible {
  outline: 2px solid var(--dp-accent, #6a5ae0);
  outline-offset: 2px;
}

.dp-checkout-bar__secondary:disabled {
  opacity: 0.5;
  cursor: default;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .dp-checkout-bar__secondary {
    transition: none;
  }

  .dp-checkout-bar__secondary:active {
    transform: none;
  }
}

/* Only rendered once the cart holds more than one book (see preview.js), so it
   is never in the way of the ordinary single-book purchase. */
.dp-checkout-bar__cart {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(19, 36, 64, 0.06);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2;
  color: #132440;
  text-decoration: none;
}

.dp-checkout-bar__cart[hidden] {
  display: none;
}

.dp-checkout-bar__cart-go {
  color: var(--dp-accent, #2f6df6);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dp-checkout-bar__marks {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 5px;
}

.dp-checkout-bar__secure {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: rgba(19, 36, 64, 0.5);
}

.dp-checkout-bar__secure svg {
  color: #16a34a;
}

.dp-checkout-bar__marks .dp-trust-payment {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

/* Sizing lives with the per-market rules further up — a max-height here fought
   the English chip geometry and squashed it to half height, which is what made
   those marks unreadable. */
.dp-checkout-bar__marks .dp-trust-icon-img {
  width: auto;
}

@media (min-width: 700px) {
  body.dreampage-preview-request #dp-checkout-inner,
  #dp-checkout-inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 20px;
    padding: 12px 24px;
  }

  body.dreampage-preview-request #dp-checkout-btn,
  #dp-checkout-btn {
    max-width: 320px;
    justify-self: center;
  }

  .dp-checkout-bar__marks {
    grid-column: auto;
    margin-top: 0;
  }

  .dp-checkout-bar__amount {
    font-size: 1.45rem;
  }
}

/* ── Preview: "what you actually get" strip ─────────────────────────── */

.dp-preview-specs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  width: min(100%, 620px);
  margin: 14px auto 0;
  padding: 0;
  list-style: none;
}

.dp-preview-specs__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid rgba(19, 36, 64, 0.09);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(19, 36, 64, 0.04);
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(19, 36, 64, 0.78);
  white-space: nowrap;
}

.dp-preview-specs__icon {
  display: inline-flex;
  color: #6f5cf6;
}

/* Four pills wrap to an unbalanced 3 + 1 on a phone — a 2×2 grid reads as one
   deliberate block instead of a stray leftover. */
@media (max-width: 560px) {
  .dp-preview-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }

  .dp-preview-specs__item {
    justify-content: center;
    padding: 7px 8px;
    font-size: 0.74rem;
  }
}

/* ── Preview: quieter secondary actions ─────────────────────────────── */

/* "Start på nytt" competed visually with the primary CTA — it is an escape
   hatch, not a choice we want to encourage. */
body.dreampage-preview-request .dp-redo-btn,
.dp-redo-btn {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: rgba(19, 36, 64, 0.5);
  font-weight: 600;
}

body.dreampage-preview-request .dp-redo-btn:hover:not(:disabled),
.dp-redo-btn:hover:not(:disabled) {
  color: rgba(19, 36, 64, 0.8);
  text-decoration: underline;
}

/* The free inner-page CTA is a step *towards* buying, so it must not wear the
   same purple as the checkout button. Outlined instead of filled. */
body.dreampage-preview-request .dp-inner-idle__action .dp-inner-btn {
  border: 1.5px solid rgba(111, 92, 246, 0.45);
  background: rgba(111, 92, 246, 0.06);
  box-shadow: none;
  color: #5b4bd6;
}

body.dreampage-preview-request .dp-inner-idle__action .dp-inner-btn:hover {
  border-color: rgba(111, 92, 246, 0.7);
  background: rgba(111, 92, 246, 0.12);
}

/* ── Preview: blur teaser grid ──────────────────────────────────────── */

.dp-blur-grid__caption {
  width: min(100%, 620px);
  margin: 10px auto 0;
  font-size: 0.82rem;
  line-height: 1.5;
  text-align: center;
  color: rgba(19, 36, 64, 0.55);
}

/* The teaser images carry baked-in text, so two of them stacked on a phone
   read as the same card twice. One is enough — the caption carries the rest. */
@media (max-width: 699px) {
  .dp-blur-grid--book.has-custom-photos .dp-blur-card:nth-child(n + 2) {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   CHECKOUT — remove the page-wide card
   ══════════════════════════════════════════════════════════════════════ */

/* Every rule below is scoped away from the order-received page, which keeps
   its own card treatment (see the order-received section further up). */
body.woocommerce-checkout:not(.woocommerce-order-received) .dp-page-shell {
  background: linear-gradient(180deg, #f7f7fd 0%, #ffffff 320px);
  padding-top: 34px;
}

/* The big rounded white card wrapped the entire checkout and made it read as
   a template block dropped on a page. Gone — the sections inside carry their
   own surfaces where grouping actually helps. */
body.woocommerce-checkout:not(.woocommerce-order-received) .dp-page-article--wc {
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

body.woocommerce-checkout .wc-block-checkout,
body.woocommerce .wc-block-checkout {
  padding: 0;
  border-radius: 0;
  background: transparent;
}

body.woocommerce-checkout:not(.woocommerce-order-received) .dp-page-hero {
  margin-bottom: 26px;
}

body.woocommerce-checkout:not(.woocommerce-order-received) .dp-page-title {
  font-size: clamp(1.7rem, 4vw, 2.1rem);
}

/* Section headings carry the rhythm now that there is no card behind them. */
body.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-step {
  padding: 0;
  border: none;
  background: transparent;
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-step:not(:first-child) {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid rgba(19, 36, 64, 0.07);
}

/* ── Checkout: place-order button carries the amount ────────────────── */

.dp-place-order-total {
  margin-left: 8px;
  font-weight: 800;
  opacity: 0.92;
}

/* ── Checkout: the cart link under the submit button is a dead end ──── */

/* The flow goes preview → checkout and skips the cart entirely, so "back to
   cart" pointed at a page the customer has never seen. */
body.woocommerce-checkout .wc-block-components-checkout-return-to-cart-button {
  display: none !important;
}

/* With the cart link gone the actions row has a single child — the submit
   button takes the full width instead of sitting in a corner. */
body.woocommerce-checkout .wc-block-checkout__actions_row {
  display: block;
}

body.woocommerce-checkout .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button {
  width: 100%;
  max-width: none;
}

/* ── Checkout: coupon field turned down ─────────────────────────────── */

body.woocommerce-checkout .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-coupon-form-block .wc-block-components-panel__button {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(19, 36, 64, 0.5);
}

/* ── Checkout: delivery estimate on the shipping card ───────────────── */

/* The card itself is a row (icon + copy); the arrival line is a full-width
   band underneath, so the card has to stack. */
.dp-checkout-shipping-trust {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.dp-checkout-shipping-trust__eta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 11px 0 0;
  padding-top: 11px;
  border-top: 1px dashed rgba(15, 118, 110, 0.22);
  font-size: 0.82rem;
  font-weight: 700;
  color: #15803d;
}

.dp-checkout-shipping-trust__eta svg {
  flex-shrink: 0;
  color: #16a34a;
}

.dp-checkout-shipping-trust__guarantee {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 9px 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  font-weight: 600;
  color: rgba(19, 36, 64, 0.62);
}

.dp-checkout-shipping-trust__guarantee svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: #16a34a;
}

/* ── Checkout: reserve the express-payment slot ─────────────────────── */

/* The express block hydrates seconds after first paint and used to push the
   whole form down while the customer was already reading it. */
body.woocommerce-checkout .wc-block-checkout.is-loading .wp-block-woocommerce-checkout-express-payment-block,
body.woocommerce-checkout .wc-block-checkout.is-loading .wc-block-components-express-payment--checkout {
  min-height: 118px;
}

/* ── Checkout: order summary line item ──────────────────────────────── */

/* Was: strikethrough 480 + "Save 81" with the real price hidden, so the one
   number the customer needed (399) was missing. Now: old price, real price,
   savings — in that order. */
.dp-order-summary-item__regular-price {
  margin-right: 6px;
  font-size: 0.82rem;
  color: rgba(19, 36, 64, 0.42);
  text-decoration: line-through;
}

.dp-os-savings-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

/* ── Product page: hardcover surcharge disclosure ───────────────────── */

/* The headline price stays the softcover price; this line makes the upgrade
   the checkout pre-selects visible up front, so the preview page's all-in
   total is never a surprise. Deliberately quieter than the green free-
   shipping pill above it — it informs, it does not sell. */
.dp-product-hero__price-note:has(+ .dp-product-hero__cover-note) {
  margin-bottom: 9px;
}

.dp-product-hero__cover-note {
  display: flex;
  /* The line wraps to two on a phone — the icon tracks the first line rather
     than floating in the middle of the block. */
  align-items: flex-start;
  gap: 7px;
  margin: 0 0 20px;
  padding: 0 2px;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
  color: rgba(19, 36, 64, 0.55);
}

.dp-product-hero__cover-note svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: rgba(111, 92, 246, 0.75);
}

/* ============================================================
   Handlekurv — personlige bøker
   ============================================================
   The cart block ships as a generic product table: an underlined
   catalogue link, the price twice over, the product's marketing
   sentence, and a quantity stepper. None of that is true here. Every
   line is one unique book, already made, for one named child — the
   only question the page has to answer is "right book, right child?".

   So the cover and the child's name are the only things that carry
   weight, and four things are cut: the description, the stepper (a
   personalized book is always a quantity of one), the duplicated
   price, and the link underline. */

.woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row {
  border-bottom: 1px solid var(--dp-border-soft);
}

.woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row td {
  padding-top: 22px;
  padding-bottom: 22px;
}

/* The book is the hero of its row: give the cover a real frame rather
   than the flat thumbnail the block ships with. */
.woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image > a {
  box-shadow: 0 10px 26px rgba(57, 44, 115, 0.16);
}

/* The cover was showing its top edge and not the book.
   The mockup render is 2195x1384 (landscape) with a SQUARE book centred in it,
   and the cart framed it in a 4/5 portrait window: that window is 1107px wide
   against a book 1230px wide, so both sides of the cover were cut off, and the
   0.88 zoom-out then shrank what was left inside a white surround. A square
   window is 1384px wide and holds the whole book with room to spare.

   Checkout is untouched — it has its own 1:1 frame and its own variables. */
.woocommerce-cart .wc-block-cart {
  --dp-preview-frame-ratio: 1 / 1;
  --dp-cart-preview-scale-desktop: 1;
  --dp-cart-preview-scale-mobile: 1;
}

/* The cover box, stated in pixels and nothing else.
   ------------------------------------------------------------------
   What went wrong: the frame took its height from `aspect-ratio`, and the
   image inside asked for `height: 100%` with `max-width: none`. iOS Safari
   does not resolve a percentage height against a parent that is only sized by
   aspect-ratio — the height fell back to auto, the image rendered far larger
   than its frame, and `overflow: hidden` cropped a small square out of the
   middle of it. On a phone that reads as a wildly zoomed-in fragment; in
   Chrome the percentage resolves and the same CSS looks perfectly fine, which
   is why every desktop check passed.

   Both boxes are now given explicit pixel width and height, so there is no
   percentage to resolve and no aspect-ratio to depend on. */
.woocommerce-cart .wc-block-cart {
  --dp-cart-thumb: 104px;
}

@media (min-width: 700px) {
  .woocommerce-cart .wc-block-cart {
    --dp-cart-thumb: 132px;
  }
}

.woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image > a {
  width: var(--dp-cart-thumb);
  height: var(--dp-cart-thumb);
  aspect-ratio: auto;
  overflow: hidden;
}

.woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image img {
  width: var(--dp-cart-thumb);
  height: var(--dp-cart-thumb);
  min-width: 0;
  max-width: var(--dp-cart-thumb);
  object-fit: cover;
  object-position: center center;
  transform: none;
}

/* The thumbnail is a picture of THIS child's book, not a link to the generic
   product page — tapping it and landing on the shop listing for "Fotballstjernen"
   throws away the personalization the customer just made. */
.woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image > a {
  pointer-events: none;
  cursor: default;
}

/* Title: a book deserves the display serif the rest of the site uses
   for headings, not a blue underlined link. */
.woocommerce-cart .wc-block-cart .wc-block-cart-items__row .wc-block-components-product-name {
  display: block;
  margin-bottom: 4px;
  font-family: "Playfair Display", serif;
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--dp-text);
  text-decoration: none;
}

.woocommerce-cart .wc-block-cart .wc-block-cart-items__row .wc-block-components-product-name:hover {
  color: var(--dp-accent-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The product's marketing sentence. It sold the book on the product
   page; in the cart it is the longest thing in the row and says
   nothing the customer has not already decided on. */
.woocommerce-cart .wc-block-cart .wc-block-cart-items__row .wc-block-components-product-metadata__description {
  display: none;
}

/* Quantity: pinned to 1 for a personalized book, so the stepper renders
   with both buttons greyed out — a dead control that reads as broken. */
.woocommerce-cart .wc-block-cart .wc-block-cart-items__row .wc-block-components-quantity-selector {
  display: none;
}

/* The price already sits in its own column on the right. */
.woocommerce-cart .wc-block-cart .wc-block-cart-items__row .wc-block-cart-item__prices {
  display: none;
}

/* Details line. The labels ("Til:", "Utgave:") and the " / " separators
   are dropped so the facts read as one quiet line; the class names are
   generated from the translated labels, so everything here is matched
   structurally to survive every market. */
.woocommerce-cart .wc-block-cart .wc-block-cart-items__row .wc-block-components-product-details {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--dp-text-muted);
}

.woocommerce-cart .wc-block-cart .wc-block-cart-items__row .wc-block-components-product-details__name,
.woocommerce-cart .wc-block-cart .wc-block-cart-items__row .wc-block-components-product-details span[aria-hidden="true"] {
  display: none;
}

/* The child's name gets a line of its own; the two facts that merely confirm
   the edition share the next one, joined by a middot. Matched by position
   rather than by class, because the class names are generated from the
   translated labels and differ on every market. */
.woocommerce-cart .wc-block-cart .wc-block-cart-items__row .wc-block-components-product-details > span:first-child {
  display: block;
}

.woocommerce-cart .wc-block-cart .wc-block-cart-items__row .wc-block-components-product-details > span:nth-child(n + 2) {
  display: inline;
}

.woocommerce-cart .wc-block-cart .wc-block-cart-items__row .wc-block-components-product-details > span:nth-child(n + 3)::before {
  /* The hidden label leaves its trailing space behind in the markup, so the
     gap on the right is already there — only the left one is added here. */
  content: "·";
  margin-left: 4px;
  color: var(--dp-text-muted);
}

/* The child's name — the one thing the customer is actually checking,
   and the only bold ink in the row besides the price. */
.woocommerce-cart .wc-block-cart .wc-block-cart-items__row .wc-block-components-product-details > span:first-child .wc-block-components-product-details__value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dp-text);
}

/* Remove: was an unlabelled grey icon that customers did not recognise
   as a control. Now it says what it does. */
.woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  /* 24px tall was a thumb-sized miss on the one control customers already
     struggled to find. */
  min-height: 40px;
  padding: 0 16px 0 13px;
  border: 1px solid var(--dp-border);
  border-radius: 999px;
  background: transparent;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1;
  color: var(--dp-text-soft);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link::after {
  content: var(--dp-cart-remove-label, "Fjern");
}

.woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link:hover {
  border-color: rgba(192, 60, 60, 0.45);
  background: rgba(192, 60, 60, 0.06);
  color: #b23b3b;
}

.woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link:focus-visible {
  outline: 2px solid var(--dp-accent);
  outline-offset: 2px;
}

/* Price column: one figure, aligned with the title it belongs to. */
.woocommerce-cart .wc-block-cart .wc-block-cart-items__row .wc-block-cart-item__total {
  vertical-align: top;
}

.woocommerce-cart .wc-block-cart .wc-block-cart-items__row .wc-block-cart-item__total .wc-block-components-product-price__value {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--dp-text);
}

.woocommerce-cart .wc-block-cart .wc-block-cart-items__row .wc-block-components-sale-badge {
  margin-top: 6px;
  border-radius: 999px;
  background: rgba(106, 90, 224, 0.1);
  color: var(--dp-accent-strong);
  font-size: 0.72rem;
  font-weight: 700;
}

/* The cover ate 120px of a 390px screen and left the title 96px, so
   "Dinosaurenes Dal" broke across two lines into the price. This is the
   theme's own knob for it (the mobile grid is built from
   `calc(var(--dp-cart-preview-size-mobile) + 16px)` further up), so the size
   is lowered here rather than by overriding grid-template-columns — an
   override fought the theme's two-column mobile row and left the image cell
   wider than the column it sat in. */
.woocommerce-cart .wc-block-cart {
  --dp-cart-preview-size-mobile: 104px;
}

/* Matched to the theme's own cart breakpoint (699px, not 600px), so the whole
   mobile range gets the same treatment instead of leaving a band between them
   styled half one way and half the other. */
@media (max-width: 699px) {
  .woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row td {
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .woocommerce-cart .wc-block-cart .wc-block-cart-items__row .wc-block-components-product-name {
    font-size: 1rem;
    /* "Fotballstjernen" was being split as "Fotballstjern / en"; let the word
       stay whole and wrap at a space instead. */
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  .woocommerce-cart .wc-block-cart .wc-block-cart-items__row .wc-block-cart-item__total .wc-block-components-product-price__value {
    font-size: 0.98rem;
    white-space: nowrap;
  }

  /* Wide enough to read as a button on a phone without crowding the row. */
  .woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link {
    margin-top: 10px;
    min-height: 44px;
    padding: 0 18px 0 15px;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   MULTI-BOOK BANNER — preview page (September 2026)
   The preview of book two was indistinguishable from the preview of book
   one: nothing named the book already in the cart, so the second preview
   read as a replacement rather than an addition. The banner shows every
   book in the order side by side, above the fold, before the CTA.
   ══════════════════════════════════════════════════════════════════════ */

.dp-multibook {
  max-width: 720px;
  margin: 0 auto 18px;
  padding: 14px 16px 15px;
  border: 1px solid rgba(79, 70, 229, 0.22);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(79, 70, 229, 0.07), rgba(255, 255, 255, 0.9));
  text-align: center;
}

.dp-multibook[hidden] {
  display: none;
}

.dp-multibook__title {
  margin: 0;
  color: #132440;
  font-size: 0.95rem;
  font-weight: 750;
  letter-spacing: -0.01em;
}

/* The covers sit in a row with a "+" drawn between them by CSS, so the row
   reads as an addition even before the sentence below is read. */
.dp-multibook__row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

.dp-multibook__card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 7px 12px 7px 7px;
  border: 1px solid rgba(19, 36, 64, 0.1);
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(19, 36, 64, 0.05);
  text-align: left;
}

.dp-multibook__card + .dp-multibook__card::before {
  content: "+";
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  color: rgba(19, 36, 64, 0.4);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

.dp-multibook__card.is-current {
  border-color: rgba(79, 70, 229, 0.45);
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.14);
}

.dp-multibook__cover {
  display: block;
  flex: 0 0 auto;
  width: 34px;
  height: 44px;
  overflow: hidden;
  border-radius: 7px;
  background: rgba(79, 70, 229, 0.09);
}

.dp-multibook__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dp-multibook__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.dp-multibook__name {
  overflow: hidden;
  max-width: 130px;
  color: #132440;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dp-multibook__badge {
  color: rgba(19, 36, 64, 0.55);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.2;
}

.dp-multibook__card.is-current .dp-multibook__badge {
  color: #4f46e5;
}

.dp-multibook__note {
  margin: 10px 0 0;
  color: rgba(19, 36, 64, 0.62);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.35;
}

/* "pr. bok" in the sticky bar. Set beside the amount rather than under it:
   the price column is capped at 142px and a second line there pushed the
   shipping facts out of the bar. */
.dp-checkout-bar__each {
  margin-left: 4px;
  color: rgba(19, 36, 64, 0.5);
  font-family: inherit;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
}

.dp-checkout-bar__each[hidden] {
  display: none;
}

@media (max-width: 560px) {
  .dp-multibook {
    margin-bottom: 14px;
    padding: 12px 12px 13px;
    border-radius: 16px;
  }

  .dp-multibook__name {
    max-width: 96px;
  }
}

/* ── Preview page: the Trustpilot strip is the only social proof ─────────
   It lives under the wait screen while the book is being made and is moved
   to the foot of the column by preview.js once the cover is on screen. Same
   markup and stylesheet as the strip on Anmeldelser — only the width and the
   vertical rhythm are re-set for the narrower preview column. */
/* The strip's carousel is a scroll container, and a scroll container still
   reports its full content width as its max-content size. The preview column
   is a grid item with the default min-width:auto, so without this it grew to
   the width of every card laid end to end and the whole page scrolled
   sideways. */
body.dreampage-preview-request .dp-preview-main {
  min-width: 0;
}

body.dreampage-preview-request .dp-preview-tpw {
  width: min(100%, 620px);
  margin: 18px auto 0;
}

body.dreampage-preview-request .dp-preview-tpw .dp-tpw {
  padding: clamp(1.5rem, 3vw, 2rem) 0 clamp(1.25rem, 2.5vw, 1.75rem);
}

/* One size down from the reviews page: there the strip is the page, here it
   sits under a book the customer is in the middle of buying. */
body.dreampage-preview-request .dp-preview-tpw .dp-tpw__title {
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
}

body.dreampage-preview-request .dp-preview-tpw .dp-tpw__head {
  margin-bottom: clamp(1rem, 2.4vw, 1.5rem);
}

body.dreampage-preview-request .dp-preview-tpw .dp-tpw__lead {
  font-size: 0.875rem;
}

/* Once it has moved to the foot of the page it gets room to breathe again —
   nothing follows it but the footer. */
[data-preview-app][data-preview-state="ready"] .dp-preview-tpw {
  margin-top: 34px;
}