/* =========================================================
   Nuni — Hero Stage
   Scoped to .nuni-hero; ports Hero.html design exactly.
   Uses Elementor global color vars when defined, falls back
   to literal Nuni palette values.
   ========================================================= */

/* Neutralize Elementor's column/section padding around the widget
   and break the hero out to full viewport width regardless of the
   parent section's content width. */
.elementor-widget-nuni-hero-stage,
.elementor-widget-nuni-hero-stage > .elementor-widget-container {
  width: 100%;
  max-width: none;
}
.elementor-widget-nuni-hero-stage > .elementor-widget-container {
  padding: 0;
}
.elementor-widget-nuni-hero-stage > .elementor-widget-container > .nuni-hero {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
}

/* Kill the tiny horizontal scroll the 100vw breakout produces on
   Windows: a vertical scrollbar takes ~15px, so 100vw is wider than
   the actual content area and the negative -50vw margin pushes the
   panel past the right edge. `overflow-x: clip` hides the overflow
   WITHOUT creating a new scrolling context (unlike `hidden`), so
   `position: sticky` on the navbar still works. We use :has() so
   the rule only applies on pages that actually render a full-bleed
   Nuni widget, leaving other pages' overflow behavior untouched. */
html:has(.nuni-hero),
html:has(.nuni-testimonials),
html:has(.nuni-newsletter),
html:has(.nuni-bs-v3),
body:has(.nuni-hero),
body:has(.nuni-testimonials),
body:has(.nuni-newsletter),
body:has(.nuni-bs-v3) {
  overflow-x: clip;
}
/* Older-browser fallback (Safari <16 didn't support :has()). Keyed off
   the body class the plugin sets on Hero Stage pages. Same behavior. */
body.nuni-has-hero { overflow-x: clip; }
/* Inside Elementor's editor preview, mirror the live breakout so the
   editor matches what ships. Earlier we fell back to width:100% to dodge
   a horizontal scrollbar in the iframe, but that made the hero render
   inside the section's content-width — much smaller than the live view.
   We now keep the 100vw breakout and clamp horizontal overflow on the
   editor body + neighbour containers to suppress that scrollbar. */
.elementor-editor-active .elementor-widget-nuni-hero-stage > .elementor-widget-container > .nuni-hero {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
  transform: none;
}
/* Suppress the iframe-level horizontal scrollbar caused by the -50vw
   breakout, and let the parent containers render the overflow so the
   hero isn't clipped by Elementor's default overflow rules. */
html.elementor-editor-active,
body.elementor-editor-active {
  overflow-x: hidden;
}
.elementor-editor-active .e-con:has(> .elementor-widget-nuni-hero-stage),
.elementor-editor-active .e-con:has(> .e-con-inner > .elementor-widget-nuni-hero-stage),
.elementor-editor-active .e-con-inner:has(> .elementor-widget-nuni-hero-stage),
.elementor-editor-active .elementor-section:has(.elementor-widget-nuni-hero-stage),
.elementor-editor-active .elementor-column:has(> .elementor-widget-wrap > .elementor-widget-nuni-hero-stage),
.elementor-editor-active .elementor-widget-wrap:has(> .elementor-widget-nuni-hero-stage) {
  overflow: visible !important;
  max-width: none !important;
}

/* Strip the top/bottom padding from every parent that directly wraps the
   hero (section / column / widget-wrap / flex container variants), so the
   hero sits flush against the header without a gap. We only kill vertical
   padding — horizontal padding stays untouched so other widgets in the
   same section aren't affected when used in mixed layouts. */
.e-con:has(> .elementor-widget-nuni-hero-stage),
.e-con:has(> .e-con-inner > .elementor-widget-nuni-hero-stage),
.e-con-inner:has(> .elementor-widget-nuni-hero-stage),
.elementor-section:has(.elementor-widget-nuni-hero-stage),
.elementor-column:has(> .elementor-widget-wrap > .elementor-widget-nuni-hero-stage),
.elementor-widget-wrap:has(> .elementor-widget-nuni-hero-stage) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* On pages where the Hero Stage is present (body.nuni-has-hero is set by
   the plugin), neutralize the theme's top padding on the main content
   wrapper so nothing sits between the header and the hero. */
body.nuni-has-hero .site-content,
body.nuni-has-hero .site-main,
body.nuni-has-hero main.site-main,
body.nuni-has-hero #content,
body.nuni-has-hero #main,
body.nuni-has-hero #primary,
body.nuni-has-hero .entry-content,
body.nuni-has-hero .page-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.nuni-hero {
  --nuni-sand-soft: #D6C8B3;
  --nuni-card: #F4ECDD;
  --nuni-bg: #E8DFCE;
  --nuni-page-bg: #D6C8B3; /* Editorial canvas — warm sand-soft, matches Hero.html .stage.variant-editorial */
  --nuni-right-bg: #FAF9F6; /* Off-white studio backdrop for the right panel */
  --nuni-sand:      var(--e-global-color-primary,   #BAA890);
  --nuni-sand-deep: var(--e-global-color-secondary, #8A765C);
  --nuni-ink:       var(--e-global-color-text,      #2A1F14);
  --nuni-muted:     var(--e-global-color-accent,    #6B5B47);
  --nuni-ink-2:     #4A3C2C;

  display: grid;
  grid-template-columns: 1fr 1.18fr;
  /* Fixed minimum height — same hero size on every viewport (a 4K
     monitor and a small laptop both get the same compact hero, not
     a viewport-relative one that scales away). Content can grow
     past 720px if it needs to, but never collapses below it. */
  min-height: 720px;
  color: var(--nuni-ink);
  position: relative;
  background: var(--nuni-page-bg);
}

/* ===== LEFT panel =====
   Asymmetric padding — extra right gutter (100px) reserves room so the
   right panel's curved left edge can sweep into the column without
   colliding with text. */
.nuni-hero__left {
  padding: 24px 100px 36px 52px;
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 0;
  background: var(--nuni-page-bg);
}

/* Editorial canvas hides the organic backdrop blobs — the page bg
   is now a solid sand-soft tone, no decorative drift. */
.nuni-hero__backdrop { display: none !important; }

/* Organic Backdrop Blurs (Ghanaian Earth Aura) — purely decorative,
   sits behind everything in the left panel. The two blobs slowly drift
   and rotate on their own keyframe so the surface feels alive but
   never distracts. pointer-events:none so it never blocks clicks. */
.nuni-hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.65;
}
.nuni-hero__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  -webkit-filter: blur(100px);
  mix-blend-mode: multiply;
  transform-origin: center center;
}
.nuni-hero__blob--a {
  top: -10%;
  left: -15%;
  width: 380px;
  height: 380px;
  background: #E8D6BD;
  opacity: 0.85;
  animation: nuni-hero-earth-pulse 24s ease-in-out infinite alternate;
}
.nuni-hero__blob--b {
  bottom: -5%;
  right: -15%;
  width: 440px;
  height: 440px;
  background: #D5BEA6;
  opacity: 0.75;
  animation: nuni-hero-earth-pulse 32s ease-in-out infinite alternate-reverse;
}
@keyframes nuni-hero-earth-pulse {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg);       filter: blur(100px); }
  33%  { transform: translate(40px, -60px) scale(1.12) rotate(120deg); filter: blur(120px); }
  66%  { transform: translate(-30px, 40px) scale(0.92) rotate(240deg); filter: blur(85px);  }
  100% { transform: translate(0, 0) scale(1) rotate(360deg);     filter: blur(100px); }
}

/* All content in the left panel sits above the backdrop. */
.nuni-hero__left > *:not(.nuni-hero__backdrop) {
  position: relative;
  z-index: 3;
}

.nuni-hero__brand {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 clamp(18px, 2vw, 24px);
  color: inherit;
}
.nuni-hero__reg { font-size: 0.5em; vertical-align: super; font-weight: 500; }

.nuni-hero__rating {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  margin-bottom: clamp(14px, 1.6vw, 18px);
  color: var(--nuni-ink);
}
.nuni-hero__rating svg { color: var(--nuni-sand-deep); display: block; }

.nuni-hero__headline {
  font-family: 'Camello Rough', 'Cormorant Garamond', serif;
  /* Fluid scale instead of a fixed 60px so the headline never gets
     smushed when the right panel takes most of the row at narrower
     desktop widths. Caps at 56px above ~1360px, floors at 38px near
     the mobile breakpoint. */
  font-size: clamp(38px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 600;
  margin: 0 0 clamp(18px, 2vw, 22px);
  color: inherit;
  text-wrap: balance;
}

.nuni-hero__lede {
  font-size: 17px;
  line-height: 1.55;
  color: var(--nuni-ink-2);
  max-width: 460px;
  margin: 0 0 clamp(20px, 2.4vw, 26px);
}

/* Earthy Ghana / Organic Story Badges — sit between lede and CTA. */
.nuni-hero__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: clamp(-12px, -1vw, -8px) 0 clamp(18px, 2.2vw, 24px);
  opacity: 0.9;
}
.nuni-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--nuni-ink-2);
  white-space: nowrap;
  text-decoration: none;
  transition: color .22s ease, transform .22s ease;
}
a.nuni-hero__badge { cursor: pointer; }
a.nuni-hero__badge:hover { color: var(--nuni-ink); transform: translateY(-1.5px); }
a.nuni-hero__badge:active { transform: translateY(0); }
.nuni-hero__badge-icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
}
.nuni-hero__badge-sep {
  color: rgba(42, 31, 20, 0.25);
  font-size: 12px;
  user-select: none;
}

.nuni-hero__cta {
  align-self: flex-start;
  display: inline-block;
  background: var(--nuni-ink);
  border: 1.5px solid var(--nuni-ink);
  color: var(--nuni-card);
  padding: 13px 26px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
  line-height: 1.2;
}
.nuni-hero__cta:hover,
.nuni-hero__cta:focus {
  background: var(--nuni-sand-deep);
  border-color: var(--nuni-sand-deep);
  color: var(--nuni-card);
}

.nuni-hero__spacer { flex: 1; }

/* ===== Product card — Editorial flat canvas =====
   No enclosing box: transparent background, no border, no shadow, no
   padding. The image floats on the page bg, the info column sits next
   to it as flat magazine copy. */
.nuni-hero__product {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 24px;
  align-items: center;
  /* Cap the card width so the action row's space-between stays tight
     on ultra-wide monitors. */
  max-width: 520px;
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-top: 40px;
  position: relative;
  box-shadow: none;
  transition: transform .3s ease;
}

.nuni-hero__product-img {
  width: 140px;
  height: 160px;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  border: none;
  box-shadow: none;
  background: transparent;
}
.nuni-hero__product-slide {
  position: absolute;
  inset: 0;
  /* Source URL is set per-slide via two custom properties so the mobile
     media query below can swap to the hero image when the editor opts in. */
  background-image: var(--thumb-d, none);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 40%;
  opacity: 0;
  transition: opacity .45s ease;
}
.nuni-hero__product-slide.is-active { opacity: 1; }

/* Real <img> rendered inside each slide so the preload scanner can find the
   LCP source in the HTML. Positioned to match the background-image above. */
.nuni-hero__product-slide-picture {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}
.nuni-hero__product-slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
}

.nuni-hero__product-info {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
}

.nuni-hero__product-eyebrow {
  font-family: 'Gilroy', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nuni-muted);
  margin-bottom: 4px;
  opacity: 1;
  transition: opacity .25s ease;
}

.nuni-hero__product-title {
  margin: 0 0 6px;
  font-family: 'Camello Rough', 'Cormorant Garamond', 'Times New Roman', serif;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--nuni-ink);
  min-height: 22px;
  transition: opacity .25s ease;
}
.nuni-hero__product-desc {
  margin: 0 0 12px;
  font-family: 'Gilroy', 'Inter', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--nuni-ink-2);
  max-width: 300px;
  min-height: 38px;
  transition: opacity .25s ease;
}

/* Action row: price + Köp on the left, circular nav arrows on the right.
   margin-top:auto pushes it to the bottom of the info column.
   `flex-wrap: wrap` is a defense at the base layer — at narrow widths or
   with unusually long buy text, the nav arrows wrap to a new line below
   price-buy instead of colliding with the buy pill. */
.nuni-hero__action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  row-gap: 12px;
  margin-top: auto;
  flex-wrap: wrap;
}
/* Layout: price (+ "Rea" pill when on sale) on row 1, buy button on row 2
   full-width. Long Swedish CTAs ("Se kampanj", "Köp produkt", "Lägg i
   kundvagn") then never have to fight the price + sale pill for horizontal
   space. Achieved with flex-wrap + `flex-basis: 100%` on the button rather
   than a DOM change — the button forces itself onto a new row at every
   viewport while the price/pill stay inline on row 1. */
.nuni-hero__price-buy {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
  min-width: 0;
}

.nuni-hero__price {
  font-size: 18px;
  font-weight: 600;
  color: var(--nuni-ink);
  transition: opacity .25s ease;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

/* WooCommerce wraps sale prices like:
     <del aria-hidden="true"><span class="woocommerce-Price-amount">237kr</span></del>
     <span class="screen-reader-text">Det ursprungliga priset var: ...</span>
     <ins aria-hidden="true"><span class="woocommerce-Price-amount">149kr</span></ins>
     <span class="screen-reader-text">Det nuvarande priset är: ...</span>
   We visually hide the SR text (keeps it accessible) and style del / ins so
   the strike-through reads as a quiet "was" and the new price as a bold "is". */
.nuni-hero__price .screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.nuni-hero__price del {
  font-size: 0.78em;
  font-weight: 500;
  color: rgba(28, 20, 12, 0.45);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  margin-right: 2px;
  order: 1;
}
.nuni-hero__price ins {
  background: transparent;
  text-decoration: none;
  color: var(--nuni-ink);
  font-weight: 700;
  order: 2;
}
.nuni-hero__price .woocommerce-Price-amount { font-variant-numeric: tabular-nums; }

/* "Rea" sale pill — visible only when JS adds .is-on-sale on the price row. */
.nuni-hero__sale-pill {
  display: none;
  align-items: center;
  padding: 3px 9px 4px;
  border-radius: 999px;
  background: var(--nuni-sand-deep);
  color: #FBF7EE;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  transform: translateY(-2px);
  white-space: nowrap;
}
.nuni-hero__price-buy.is-on-sale .nuni-hero__sale-pill { display: inline-flex; }

/* Köp pill — compact ink-filled button matching Hero.html. Dark ink
   background with cream text, soft drop shadow, lifts +1px on hover
   and swaps to sand-deep. !important on hover states defeats theme
   selectors like `.elementor a:hover` repainting the button.
   `flex-basis: 100%` forces the button onto its own row below the
   price + Rea pill regardless of viewport width. */
.nuni-hero__buy,
.nuni-hero__buy:link,
.nuni-hero__buy:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--nuni-ink);
  color: var(--nuni-card);
  border: 1.5px solid var(--nuni-ink);
  font-family: 'Gilroy', 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  flex-basis: 100%;
  width: 100%;
  min-width: 0;
  letter-spacing: 0.02em;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background .22s ease, border-color .22s ease, color .22s ease, transform .15s ease, box-shadow .22s ease;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 6px rgba(28, 20, 12, 0.1);
}
.nuni-hero__buy:hover,
.nuni-hero__buy:focus,
.nuni-hero__buy:focus-visible,
.nuni-hero__buy:active,
a.nuni-hero__buy:hover,
a.nuni-hero__buy:focus,
a.nuni-hero__buy:active {
  background: var(--nuni-sand-deep) !important;
  border-color: var(--nuni-sand-deep) !important;
  color: var(--nuni-card) !important;
  outline: 0 !important;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(182, 138, 66, 0.2) !important;
}
.nuni-hero__buy:hover { transform: translateY(-1px); }
.nuni-hero__buy:active { transform: translateY(0); }
.nuni-hero__buy-arrow {
  width: 14px;
  height: 14px;
  display: block;
  stroke: currentColor;
  stroke-width: 2px;
  transition: transform .25s cubic-bezier(.6, .05, .2, 1);
}
.nuni-hero__buy:hover .nuni-hero__buy-arrow { transform: translateX(2px); }

/* Editorial nav arrows — 32×32 with a soft rgba bg; fill ink on hover. */
.nuni-hero__nav-arrows {
  display: flex;
  gap: 6px;
}
.nuni-hero__arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(28, 20, 12, 0.04);
  border: none;
  color: var(--nuni-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background .25s ease, color .25s ease, transform .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.nuni-hero__arrow svg { width: 12px; height: 12px; display: block; }
/* Lock the arrows down across every interactive state so the theme
   can't paint them pink on click. */
.nuni-hero__arrow:hover,
.nuni-hero__arrow:focus,
.nuni-hero__arrow:focus-visible,
.nuni-hero__arrow:active {
  background: var(--nuni-ink) !important;
  color: #FFFFFF !important;
  outline: 0 !important;
  transform: scale(1.05);
}
.nuni-hero__arrow:active { transform: scale(0.95); }

/* ===== RIGHT panel =====
   Editorial studio backdrop — off-white #FAF9F6 behind the hero image
   so contain-fit slides and image-less moments read as a premium gallery,
   not a colored block. Asymmetric silhouette: curves only on the LEFT
   edge so the panel reads as a river-worn stone bumping into the left
   column. Squared on the right edge so it meets the screen cleanly. */
.nuni-hero__right {
  position: relative;
  background: var(--nuni-right-bg);
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  min-height: 480px;
  background-clip: padding-box;
}
.nuni-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .6s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  transform: translate3d(0, 0, 0);
  padding: clamp(24px, 5%, 56px) clamp(28px, 6%, 64px);
}
.nuni-hero__slide.is-active { opacity: 1; }

/* Real <img> renders the hero — gives the browser proper srcset/sizes
   so it can pick a sharp source, sets fetchpriority/loading on the
   first slide for fast LCP, and avoids the upscaling blur you get when
   a small product thumb is stretched as a background-image. */
.nuni-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  border-radius: inherit;
}
.nuni-hero__slide--contain .nuni-hero__img {
  object-fit: contain;
  filter: drop-shadow(0 22px 30px rgba(42, 31, 20, 0.18));
}
.nuni-hero__slide--cover { padding: 0; }

.nuni-hero__label {
  position: absolute;
  top: 24px;
  left: 28px;
  font-family: 'Gilroy', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 11px;
  color: var(--nuni-ink);
  background: rgba(28, 20, 12, 0.05);
  border: 1px solid rgba(28, 20, 12, 0.1);
  padding: 6px 10px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  z-index: 4;
}

/* Image tag pill — editor-controlled per slide. Sits on top of the
   hero image (big right panel) at top-right, and on the product
   thumbnail (left card) at top-left. Colors come from inline CSS
   variables set by the editor; defaults are a warm brand red on white.
   The tag inherits its slide's fade transition because it lives inside
   the slide container that toggles `.is-active`. */
.nuni-hero__image-tag {
  position: absolute;
  display: inline-flex;
  align-items: center;
  font-family: 'Gilroy', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--nuni-tag-bg, #C8412C);
  color: var(--nuni-tag-fg, #FFFFFF);
  box-shadow: 0 6px 18px -6px rgba(28, 20, 12, 0.35);
  z-index: 5;
  pointer-events: none;
  white-space: nowrap;
}
/* Top-right of the big hero image */
.nuni-hero__image-tag--hero {
  top: 24px;
  right: 28px;
}
/* Top-left of the small product thumbnail */
.nuni-hero__image-tag--thumb {
  top: 8px;
  left: 8px;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  padding: 5px 9px;
  box-shadow: 0 4px 10px -4px rgba(28, 20, 12, 0.3);
}
@media (min-width: 981px) {
  .nuni-hero__image-tag--hero { top: 28px; right: 40px; }
}

/* ===== Auto sale tag (WC on_sale → red "Rea" pill on the thumbnail) =====
   Rendered per-slide and gated by the visibility class on .nuni-hero:
     .nuni-hero--sale-show-mobile  → only visible at ≤820px (default)
     .nuni-hero--sale-show-always  → visible at every breakpoint
   The pill lives inside the product-slide div so the existing
   .is-active opacity transition fades it in/out with its slide.
   Sits top-right of the thumbnail; the manual image_tag (if any)
   takes top-left, so they never collide. */
.nuni-hero__sale-tag {
  position: absolute;
  display: none; /* default off — visibility classes flip it on */
  align-items: center;
  font-family: 'Gilroy', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--nuni-sale-tag-bg, #DC2626);
  color: var(--nuni-sale-tag-fg, #FFFFFF);
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.3);
  z-index: 5;
  pointer-events: none;
  white-space: nowrap;
}
.nuni-hero__sale-tag--thumb {
  top: 8px;
  right: 8px;
}
/* "Always" mode — show on every viewport. */
.nuni-hero--sale-show-always .nuni-hero__sale-tag { display: inline-flex; }
/* "Mobile" mode — only at ≤820px, and hide the price-row Rea pill so
   the message isn't duplicated. */
@media (max-width: 820px) {
  .nuni-hero--sale-show-mobile .nuni-hero__sale-tag { display: inline-flex; }
  .nuni-hero--sale-show-mobile .nuni-hero__sale-pill { display: none !important; }
}

.nuni-hero__watermark {
  position: absolute;
  bottom: -34px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: clamp(80px, 14vw, 180px);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--nuni-ink);
  line-height: 1;
  z-index: 3;
  pointer-events: none;
  user-select: none;
  opacity: 0.92;
}
.nuni-hero__watermark .nuni-hero__reg { font-size: 0.33em; vertical-align: super; }

/* Desktop ≥981px: editorial curved silhouette + studio overlap.
   Hero now fills the viewport — 100vh tall — so the editorial canvas
   reads as a full screen on every monitor. If a sticky WordPress
   header overlaps, set --nuni-header-h on .nuni-hero (or any ancestor)
   to subtract its height. */
@media (min-width: 981px) {
  .nuni-hero {
    --nuni-header-h: clamp(72px, 6vw, 96px);
    overflow: visible;
    min-height: calc(100vh - var(--nuni-header-h, 0px));
    height: auto;
    max-height: none;
  }
  body.admin-bar .nuni-hero {
    --nuni-header-h: calc(clamp(72px, 6vw, 96px) + 32px);
  }
  .nuni-hero__right {
    /* Editorial proportions — bigger sweep than the base hero, so the
       panel reads as a more dramatic river-worn stone bumping into the
       left column.
       top-left:     160px / 50% ellipse (dramatic)
       top-right:    square — meets the screen edge cleanly
       bottom-right: square — flat right edge top-to-bottom
       bottom-left:  120px / 20% ellipse — calmer resolution */
    border-radius: 160px 0 0 120px / 50% 0 0 20%;
    margin-left: -80px;
    z-index: 2;
    box-shadow: -20px 0 50px -15px rgba(42, 31, 20, 0.1);
    height: 100%;
    top: 0;
  }
  /* Push left-column content down so the headline sits lower on the
     canvas, letting the editorial product card ground itself at the
     bottom of the column via margin-top: auto. */
  .nuni-hero__left {
    padding-top: clamp(60px, 6.5vw, 100px);
    padding-bottom: clamp(24px, 3vw, 40px);
  }
  /* The flat-flow editorial card grounds to the bottom — replace the
     fixed 40px top margin with auto so flex pushes it down. */
  .nuni-hero__product {
    margin-top: auto;
    margin-bottom: 0;
  }
  .nuni-hero__spacer { display: none; }
  /* Nudge the label/watermark away from the curved edge. */
  .nuni-hero__label { top: 28px; left: 40px; }
  .nuni-hero__watermark { bottom: 6px; }
}

/* ===== Responsive =====
   Tablet & under (≤980px): the right panel disappears AND the product
   card adopts the "card-is-the-hero" treatment — bigger thumbnail,
   action-row stacked vertically (price+buy on top, nav arrows below).
   This used to only kick in at ≤820px, which left a 821–980px tablet
   zone where the card used the desktop single-row layout and a long
   buy text could overlap the nav arrows. */
@media (max-width: 980px) {
  .nuni-hero { grid-template-columns: 1fr; min-height: unset; }
  .nuni-hero__left { padding: 36px 32px 32px; }
  .nuni-hero__brand { margin-bottom: 32px; }
  .nuni-hero__right { display: none; }

  /* Two-column grid — image left at fixed aspect, info column stacks
     naturally. */
  .nuni-hero__product {
    grid-template-columns: 152px 1fr;
    column-gap: 18px;
    align-items: start;
    padding: 18px;
  }
  .nuni-hero__product-img {
    width: 152px;
    height: 190px;       /* fixed 4:5 portrait — never stretches */
    aspect-ratio: 4 / 5;
    min-height: 0;
    border-radius: 14px;
    align-self: start;
  }
  .nuni-hero__product-info {
    align-self: stretch;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }
  /* Product photo IS the hero on these viewports. Swap to --thumb-m so
     slides that opted into "use hero image as mobile thumbnail" upgrade
     to the full-resolution hero source. */
  .nuni-hero__product-slide {
    background-image: var(--thumb-m, var(--thumb-d, none));
    background-position: center;
  }
  .nuni-hero__product-slide-img {
    object-position: center;
  }
  /* Action row: price+buy gets its own line, arrows centered below.
     `margin-top: auto` pushes the block to the bottom of the info column,
     anchoring it under the description regardless of card height. */
  .nuni-hero__action-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: auto;
    padding-top: 14px;
    flex-wrap: nowrap;
  }
  /* Stack price and buy vertically on the entire mobile/tablet range —
     "Köp produkt" / longer Swedish CTAs would otherwise truncate with
     "..." in the 521–980px zone. Price reads first, then the CTA gets a
     full-width row of its own (Aesop / Glossier / Apple pattern). */
  .nuni-hero__price-buy {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    flex-wrap: nowrap;
    margin-top: 0;
    min-width: 0;
  }
  .nuni-hero__price {
    justify-content: flex-start;
  }
  .nuni-hero__nav-arrows {
    display: flex;
    justify-content: center;
    gap: 10px;
  }
  .nuni-hero__buy {
    width: 100%;
    justify-content: center;
    padding: 11px 18px;
    min-width: 0;
    max-width: 100%;
  }
  .nuni-hero__buy-text {
    min-width: 0;
    /* Full-row button has space for the label, no ellipsis needed */
    overflow: visible;
    text-overflow: clip;
  }
}

/* Slightly tighter horizontal rhythm at phone widths */
@media (max-width: 820px) {
  .nuni-hero__left { padding: 36px 28px 32px; }
  .nuni-hero__brand { margin-bottom: 28px; }
}

/* Narrow phones (≤520px): smaller thumbnail tile, AND price-buy itself
   stacks vertically so the buy button gets a full-width tap target.
   This is the premium-e-com pattern (Aesop, Glossier, Apple) — at
   narrow widths the primary CTA earns a row of its own rather than
   competing with price for horizontal space. */
@media (max-width: 520px) {
  .nuni-hero__left { padding: 28px 22px 24px; }
  .nuni-hero__product {
    grid-template-columns: 124px 1fr;
    column-gap: 14px;
  }
  .nuni-hero__product-img {
    width: 124px;
    height: 155px;       /* keep the 4:5 ratio at small-phone scale */
    aspect-ratio: 4 / 5;
    min-height: 0;
    border-radius: 12px;
  }
  .nuni-hero__price-buy {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .nuni-hero__price {
    justify-content: flex-start;
    font-size: 16px;
  }
  .nuni-hero__buy {
    width: 100%;
    justify-content: center;
    padding: 11px 16px;  /* slightly taller for a comfortable tap target */
  }
}

/* ===== Mobile portrait (≤768px): Immersive Background Image Card =====
   Mirrors Hero.html's new mobile treatment. The product showcase becomes
   a full-bleed image card — the product thumbnail expands to fill the
   entire card as a background, a dark gradient overlay guarantees
   contrast, and the info column overlays the bottom with cream text and
   a white pill Buy button. !important throughout so these overrides
   beat the 980/820/520 tablet rules above. */
@media (max-width: 768px) {
  .nuni-hero__product {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 380px !important;
    margin: 24px auto !important;
    padding: 24px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background-color: #1C140C !important;
    border: none !important;
    outline: none !important;
    box-shadow: 0 12px 32px rgba(28, 20, 12, 0.25) !important;
  }
  .nuni-hero__product-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  /* Premium gradient dark overlay for high-contrast readability */
  .nuni-hero__product-img::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(28, 20, 12, 0.2) 0%, rgba(28, 20, 12, 0.45) 45%, rgba(28, 20, 12, 0.85) 100%) !important;
    z-index: 2 !important;
    pointer-events: none !important;
    display: block !important;
    opacity: 1 !important;
  }
  .nuni-hero__product-slide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    background-image: var(--thumb-m, var(--thumb-d, none));
    background-size: cover !important;
    background-position: center !important;
  }
  .nuni-hero__product-slide-img {
    object-position: center !important;
    z-index: 1 !important;
  }
  /* Image + sale tags reposition to top-corners with breathing room */
  .nuni-hero__image-tag--thumb {
    top: 16px !important;
    left: 16px !important;
    right: auto !important;
    z-index: 4 !important;
  }
  .nuni-hero__sale-tag--thumb {
    top: 16px !important;
    right: 16px !important;
    z-index: 4 !important;
  }
  .nuni-hero__product-info {
    position: relative !important;
    z-index: 3 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    border-left: none !important;
  }
  .nuni-hero__product-eyebrow {
    color: #D6C8B3 !important; /* Soft sand cream tone */
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    margin-bottom: 4px !important;
  }
  .nuni-hero__product-title {
    color: #FAF7F0 !important;
    font-size: clamp(20px, 5.5vw, 24px) !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    margin: 0 0 8px 0 !important;
    font-family: 'CamelloRough', 'Camello Rough', 'Cormorant Garamond', serif !important;
    min-height: 0 !important;
  }
  .nuni-hero__product-desc {
    color: rgba(244, 236, 221, 0.85) !important;
    font-size: clamp(12.5px, 3.2vw, 13.5px) !important;
    line-height: 1.5 !important;
    margin: 0 0 20px 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
  }
  /* Mobile action row — fully vertical stack, left-aligned. Order:
     nav arrows, then price, then the full-width buy button. Stacking
     gives the buy button a guaranteed row of its own so long Swedish
     CTAs ("Se kampanj", "Köp produkt") never collide with the price
     or get cropped by the arrows on the right. */
  .nuni-hero__action-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100% !important;
    margin-top: auto !important;
    padding-top: 0 !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
  }
  .nuni-hero__price-buy {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
  }
  .nuni-hero__price {
    color: #FAF7F0 !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }
  .nuni-hero__price del { color: rgba(244, 236, 221, 0.5) !important; }
  .nuni-hero__price ins { color: #FAF7F0 !important; }

  /* Premium cream pill Buy button that pops on the dark overlay.
     Override the desktop underlined-text Buy with a solid pill, kill the
     pseudo-underline, and pin every interactive state so the theme can't
     paint it pink on tap. */
  .nuni-hero__buy,
  .nuni-hero__buy:link,
  .nuni-hero__buy:visited,
  a.nuni-hero__buy,
  a.nuni-hero__buy:link,
  a.nuni-hero__buy:visited {
    background: #FAF7F0 !important;
    border: 1px solid #FAF7F0 !important;
    outline: none !important;
    color: #1C140C !important;
    padding: 10px 20px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    /* Full-width CTA on mobile — gives long Swedish labels room and
       makes the primary tap target unmistakable. */
    width: 100% !important;
    max-width: 100% !important;
    text-decoration: none !important;
    transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease !important;
  }
  .nuni-hero__buy::after { display: none !important; }
  .nuni-hero__buy:hover,
  .nuni-hero__buy:focus,
  .nuni-hero__buy:focus-visible,
  .nuni-hero__buy:active,
  a.nuni-hero__buy:hover,
  a.nuni-hero__buy:focus,
  a.nuni-hero__buy:active {
    background: #B68A42 !important; /* Premium gold accent on hover */
    border-color: #B68A42 !important;
    color: #FAF9F6 !important;
    box-shadow: 0 6px 16px rgba(182, 138, 66, 0.4) !important;
    transform: translateY(-2px) !important;
    outline: none !important;
  }

  .nuni-hero__nav-arrows {
    display: flex !important;
    gap: 8px !important;
    /* Left-aligned on mobile so the arrows sit in line with the price
       and the buy button below — no longer split right while everything
       else is stacked left. */
    justify-content: flex-start !important;
    /* Move arrows above the price + buy stack. DOM order puts price-buy
       first; flex `order` is a visual-only swap, no PHP refactor needed. */
    order: -1 !important;
  }
  /* Light/white bordered arrow buttons to pop on the dark overlay */
  .nuni-hero__arrow {
    width: 36px !important;
    height: 36px !important;
    border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: #FAF7F0 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.25s ease !important;
    cursor: pointer !important;
    outline: none !important;
  }
  .nuni-hero__arrow:hover,
  .nuni-hero__arrow:focus,
  .nuni-hero__arrow:focus-visible,
  .nuni-hero__arrow:active {
    background: #FAF7F0 !important;
    color: #1C140C !important;
    border-color: #FAF7F0 !important;
    transform: scale(1.08) !important;
    outline: none !important;
  }
  .nuni-hero__arrow svg {
    width: 16px !important;
    height: 16px !important;
    display: block !important;
    stroke: currentColor !important;
    stroke-width: 2px !important;
  }
}

/* On pages that use the Hero Stage widget, hide any theme-rendered page
   title wrappers (the_title filter already returns '', but some themes
   still render empty <h1> containers with padding that pushes the hero
   down). */
body.nuni-has-hero .entry-header,
body.nuni-has-hero .page-header,
body.nuni-has-hero .single-post-title,
body.nuni-has-hero .elementor-page-title,
body.nuni-has-hero .page-title {
  display: none !important;
}

/* Reduced motion: kill all animations + transitions to respect user pref. */
@media (prefers-reduced-motion: reduce) {
  .nuni-hero__slide,
  .nuni-hero__product-slide,
  .nuni-hero__product-title,
  .nuni-hero__product-desc,
  .nuni-hero__product-eyebrow,
  .nuni-hero__price { transition: none !important; }
  .nuni-hero__blob { animation: none !important; }
}