@charset "UTF-8";
/* mcp:begin — managed by theming MCP; edits inside this block will be overwritten */
:root {
  --shop-primary: #ef53a9;
  --shop-primary-hover: #ed2c96;
  --shop-primary-light: #f179bb;
  --shop-primary-bg: #ffffff;
  --shop-primary-subtle: #ffffff;
  --shop-secondary: #087d70;
  --shop-secondary-hover: #05574d;
  --shop-secondary-light: #0ca190;
  --shop-secondary-bg: #8cede2;
  --shop-secondary-subtle: #70ebdd;
  --shop-success: #0d8756;
  --shop-success-hover: #09623e;
  --shop-success-light: #13a96d;
  --shop-success-bg: #9deccc;
  --shop-success-subtle: #82e8bf;
  --shop-danger: #c4301c;
  --shop-danger-hover: #a22616;
  --shop-danger-light: #dd402c;
  --shop-danger-bg: #f7e1de;
  --shop-danger-subtle: #f2cac5;
  --shop-warning: #f5b800;
  --shop-warning-hover: #cc9900;
  --shop-warning-light: #fcc621;
  --shop-warning-bg: #fef9ec;
  --shop-warning-subtle: #fcf1cf;
  --shop-primary-tint: color-mix(in srgb, #ef53a9 6%, white);
  --shop-secondary-soft: #95eee4;
  --shop-success-dark: #085939;
  --shop-success-text: #0b7047;
  --shop-danger-dark: #992414;
  --shop-warning-dark: #c29100;
  --shop-warning-star: #f5b800;
  --shop-text-heading: #0a1024;
  --shop-text-body: #121212;
  --shop-text-muted: #72778d;
  --shop-text-tertiary: #333333;
  --shop-text-placeholder: #404040;
  --shop-surface: #ffffff;
  --shop-surface-alt: #f5f7f9;
  --shop-surface-border: #e7eaf2;
  --shop-surface-subtle: #ffffff;
  --shop-surface-light: #fcfcfd;
  --shop-border-light: #f8f9fb;
  --shop-border-dark: #d7dcea;
  --shop-slate-900: #040710;
  --shop-slate-700: #0d1630;
  --shop-slate-600: #142148;
  --shop-slate-500: #1f3166;
  --shop-slate-400: #2e458a;
  --shop-slate-300: #3e59ad;
  --shop-font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --shop-radius: 0.5rem;
  --shop-radius-xs: 0.250rem;
  --shop-radius-sm: 0.375rem;
  --shop-radius-lg: 0.750rem;
  --shop-header-brand-color: #121212;
  --shop-nav-active-text: #087d70;
  --shop-page-bg: #ffffff;
  --shop-main-bg: #ffffff;
  --shop-product-grid-gap: 16.8px;
  --shop-badge-feature-bg: transparent;
  --shop-badge-feature-text: #121212;
  --shop-badge-volume-bg: #58b1b7;
  --shop-badge-volume-text: #ffffff;
  --shop-badge-hot-bg: #ef53a9;
  --shop-badge-hot-text: #ffffff;
  --shop-badge-radius: 999px;
  --shop-badge-font-size: 10.88px;
  --shop-badge-weight: 850;
  --shop-footer-heading-font-size: 20px;
  --shop-footer-heading-weight: 660;
  --shop-footer-heading-transform: none;
  --shop-text-secondary: #566078;
  --shop-stock-in-color: #2f7a3a;
}

/* ARL styling — merged 2026-07-25. Base: skill run arl-2026-07-25-yarnliving-skill-rerun
   (S5 transplant + S6 repair). Corrections appended at the end from measured reference values.
   2026-07-28: rl-* hook classes replaced by native anchors (header/footer/#page-* /
   .shop-navbar--default); only .rl-pdp-top and .rl-pdp-buy remain as layout hooks. */
/* ---------- shared chrome: header ---------- */
header.header__desktop-only {
  background-color: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid #eef0f5;
}

/* ref search shell spans 878/1424 = 62% of the header row.
   Anchored on the SearchForm's own root inside the desktop header — the sticky
   and mobile headers carry their own .search-form, hence the header scope. */
header.header__desktop-only .search-form {
  flex: 1 1 auto;
  max-width: 878px;
  margin-left: 24px;
  margin-right: 24px;
  background-color: #ffffff;
  border: 1px solid #dfe3ee;
  border-radius: 999px;
  box-shadow: rgba(15, 23, 42, 0.035) 0px 10px 28px 0px;
}

header.header__desktop-only .search__form {
  width: 100%;
}

header.header__desktop-only .search-form .form-control {
  background-color: transparent;
  border: 0;
  border-radius: 999px;
  padding: 0 49.6px 0 21.6px;
  height: 48px;
  font-size: 11px;
  color: #000000;
  line-height: normal;
}

header.header__desktop-only .search-form button {
  background-color: transparent;
  border: 0;
}

.action-bar {
  gap: 16px;
}

.action-bar__item--text-beside {
  color: #121212;
  font-size: 14.72px;
  font-weight: 650;
  border-radius: 0;
  padding: 0;
  gap: 7.2px;
  line-height: normal;
  justify-content: normal;
}

.action-bar__item--text-beside .action-bar__label {
  font-size: 14.72px;
  font-weight: 650;
  color: #121212;
}

/* ---------- shared chrome: nav ---------- */
.shop-navbar--default {
  background-color: #ffffff;
  border-bottom: 1px solid #eef0f5;
}

.cat-menu__link {
  color: #171b2f;
  font-size: 15.04px;
  font-weight: 660;
  line-height: normal;
}

/* ---------- shared chrome: footer ---------- */
footer {
  background-color: #ffffff;
}

footer > .shop-container {
  border-top: 1px solid #e0d8cf;
}

footer .header__brand.header__brand {
  font-size: 28px;
  font-weight: 660;
  letter-spacing: normal;
  line-height: 32.2px;
}

footer .panel-heading {
  color: #121212;
  font-size: 20px;
  font-weight: 660;
  line-height: 25px;
}

footer .panel-body a {
  color: #655c54;
  font-size: 11px;
  line-height: 17.6px;
}

/* ---------- breadcrumb ---------- */
.store-breadcrumb .breadcrumb-item,
.store-breadcrumb .breadcrumb-item a {
  color: #777d94;
  font-size: 14.4px;
}

.store-breadcrumb {
  padding-top: 15px;
  padding-bottom: 12px;
}

/* ---------- category head ---------- */
.category-title {
  color: #0a1024;
  font-weight: 650;
  line-height: 44px;
}

/* ---------- category shortcut chips ---------- */
.category-children__link {
  background-color: #deeff1;
  border: 0;
  border-radius: 999px;
  color: #10162c;
  padding: 8px 14px;
}

.category-children__title {
  color: #58b1b7;
  font-size: 15.73px;
  font-weight: 660;
  letter-spacing: 0.2px;
  line-height: 18.876px;
}

/* ---------- category toolbar ---------- */
.category-toolbar {
  color: #626981;
  font-size: 14.4px;
  justify-content: space-between;
}

.category-filter-drawer__btn {
  border: 1px solid #d4d4d4;
  color: #566078;
  font-size: 16px;
  font-weight: 600;
  padding: 8px 14px;
  line-height: normal;
}

.category-filter-drawer__btn-label {
  color: #566078;
  font-size: 16px;
  font-weight: 600;
}

.category-sort-dropdown__select {
  border: 1px solid #dce2ec;
  border-radius: 6px;
  color: #10162c;
  font-size: 13.76px;
  font-weight: 650;
  padding-left: 12.8px;
  padding-right: 12.8px;
  line-height: normal;
}

/* ---------- product card ---------- */
.product-list-card {
  border: 1px solid #e6ebf3;
  border-radius: 8px;
  box-shadow: rgba(15, 23, 42, 0.043) 0px 16px 38px 0px;
}

.product-list-card__image {
  padding: 0;
  background-color: #ffffff;
  border: 1px solid #ebebeb;
  border-radius: 8px 8px 0 0;
}

.product-list-card .image-slot--bottom {
  margin: 0 0 12px 13px;
}

.product-list-card .product-wishlist-button {
  background-color: rgba(255, 255, 255, 0.94);
  border: 0;
  border-radius: 999px;
  box-shadow: rgba(15, 23, 42, 0.08) 0px 10px 24px 0px;
  color: #202846;
  width: 34px;
  height: 34px;
  font-weight: 400;
  padding: 1px 6px;
}

.product-list-card .product-wishlist-button .icon {
  font-size: 15px;
}

.product-list-card .product-brand .brand-name {
  color: #566078;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: normal;
  text-transform: none;
  line-height: normal;
}

.product-list-card .product-title {
  color: #11172f;
  font-size: 16px;
  font-weight: 660;
  line-height: 20px;
}

.product-list-card .product-price .price-current {
  color: #0c1227;
  font-size: 16px;
  font-weight: 520;
  letter-spacing: normal;
  line-height: normal;
}

.product-list-card .rating {
  color: #616981;
  font-size: 11.84px;
  gap: 6.72px;
  line-height: normal;
}

.product-list-card .rating__star--empty {
  color: #d6d0c6;
  font-size: 13px;
}

.product-list-card .options-count.options-count {
  background-color: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(224, 229, 238, 0.88);
  color: #525b74;
  font-size: 10.88px;
  font-weight: 760;
  padding: 0 8px;
  gap: 5.44px;
  line-height: normal;
}

/* ---------- spec rows: ONE shared rule (listing card + PDP band) ---------- */
.product-feature-badges__item {
  border-radius: 0;
  padding: 0;
  text-transform: none;
  letter-spacing: normal;
  font-size: 11px;
  font-weight: 400;
  line-height: normal;
}

.product-feature-badges__value {
  color: #68718a;
  font-weight: 760;
  line-height: 13.8px;
  font-size: 12px;
}

.product-feature-badges__icon {
  color: #58b1b7;
  font-size: 15px;
  width: 15px;
}

.product-feature-badges__icon svg {
  width: 15px;
  height: 15px;
}

.rl-pdp-top .product-feature-badges {
  gap: 0;
}

.rl-pdp-top .product-feature-badges__item {
  font-size: 14px;
  padding: 13.6px 14.4px 13.6px 14.4px;
  border-top: 1px solid #e6ebf2;
}

.rl-pdp-top .product-feature-badges__value {
  font-weight: 400;
  color: #121212;
  line-height: normal;
}

/* ---------- PDP identity ---------- */
.rl-pdp-top .product-brand {
  color: #ef53a9;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.rl-pdp-top .product-title {
  color: #06122d;
  font-size: 28px;
  font-weight: 650;
  line-height: 32.2px;
}

.rl-pdp-top .product-price .price-current {
  color: #0b1024;
  font-size: 28px;
  font-weight: 520;
  letter-spacing: normal;
  line-height: 29.12px;
}

.product-reviews-summary {
  color: #64708a;
  font-size: 12.64px;
  gap: 5.44px;
  line-height: normal;
}

.product-reviews-summary .review-count {
  color: #64708a;
  font-size: 12.64px;
}

/* ---------- PDP gallery + buy row ---------- */
.gallery-main {
  border-radius: 10px;
}

.product-availability__badge {
  background-color: transparent;
  border-radius: 0;
  padding: 0;
  font-size: 12px;
  gap: 7.2px;
  line-height: normal;
}

.product-quantity__controls {
  background-color: #ffffff;
  border: 1px solid #dedede;
  border-radius: 8px;
}

.product-buy-button {
  background-color: #ef53a9;
  font-weight: 760;
  padding-left: 25.6px;
  padding-right: 25.6px;
  gap: 7.2px;
  flex-grow: 1;
  border: 1px solid #ef53a9;
  line-height: normal;
  padding-top: 0;
  padding-bottom: 0;
  height: 48px;
}

.product-variant-selector {
  padding-top: 10px;
}

/* ---------- PDP tier panel ---------- */
.product-tier-price {
  background-color: #ffffff;
  border: 1px solid #e6ebf3;
  border-radius: 10px;
  padding: 16.32px 13.76px 13.12px;
}

.product-tier-price__title {
  color: #19335f;
}

.product-tier-price__row {
  background-color: #deeff1;
  border-radius: 9px;
  color: #090d1f;
  padding: 9.6px 9.28px;
  gap: 8.32px;
  border-color: transparent;
}

#page-product .product-description {
  padding: 18px 22px;
}

#page-product .product-reviews {
  padding: 18px 22px;
}

/* reference PDP has no tab strip — it uses inline disclosures */
.p-tablist {
  display: none;
}

/* ---------- pagination ---------- */
.store-pagination li:not(.disabled):not(.active) .page-link {
  background-color: #ffffff;
  border: 1px solid #e3dcd6;
  border-radius: 4px;
  color: #3a2f2b;
  font-size: 14px;
  font-weight: 500;
}

.store-pagination li.active .page-link {
  background-color: #3a2f2b;
  border: 1px solid #3a2f2b;
  border-radius: 4px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
}

.store-pagination__list {
  gap: 6px;
}

/* ================= DEFECT CORRECTIONS =================
   Reviewer-reported defects, each closed with a MEASURED reference value.
   Appended last: at equal specificity these win over the rules above. */
/* [pdp_brand] PAINTED LEAF is .brand-name — the rule above targets .product-brand (the wrapper),
   which inherits and therefore *reports* pink while the visible text stayed #2563eb blue.
   Confirmed with paint-owner.mjs: anchorMisleading = true. */
.rl-pdp-top .product-brand .brand-name {
  color: #ef53a9;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* [buyrow] three relational defects, all invisible to per-element transplant because every
   member measured individually correct:
     equalHeight    VIOLATED spread 10px  (qty 38 vs cta 48; reference has both at 48)
     alignedCenterY VIOLATED spread 5px   (reference spread 0)
     gapBetween     VIOLATED gaps [0, 0]  (reference row is gap:14.4px)
   height / align-items / gap are all Conditional tier, so styling owns every remedy. */
.rl-pdp-buy {
  align-items: center;
  gap: 14.4px;
}

.rl-pdp-buy .product-quantity__controls {
  height: 48px;
}

/* [pdp_stock] the reference carries no "Availability:" label — the state reads from the badge */
.product-availability .product-meta-row__label {
  display: none;
}

/* [pagination] reference page buttons share a size and a centre line; ours sit off-centre */
.store-pagination__list .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  min-width: 32px;
  padding: 0 8px;
  line-height: 1;
}

.store-pagination__list {
  align-items: center;
}

/* [card promo badges] CONSISTENCY, not fidelity. Our two badges were byte-exact transplants of
   the reference's sale badge (14px/800, pad 8px 15.2px) and member badge (10.88px/850, pad
   2.88px 8.32px) — but the reference NEVER stacks them: 0 of 25 cards carry both. Ours renders
   them as adjacent siblings, so two treatments meant for different contexts collide and read as
   sloppy. "Hot" has no reference analog at all, so there is no fidelity claim to preserve.
   Unify the geometry on the compact treatment; the colours stay distinct (pink vs teal). */
.product-list-card .product-promo-badges__badge,
.product-list-card .product-promo-badges__badge--hot,
.product-list-card .product-promo-badges__badge--volume {
  font-size: 10.88px;
  font-weight: 850;
  line-height: 10.88px;
  letter-spacing: normal;
  text-transform: none;
  padding: 5px 9px;
  border-radius: 999px;
  gap: 4.48px;
}

.product-list-card .product-promo-badges {
  gap: 5px;
}

/* [nav states] derived by state-delta.mjs (CDP-forced, computed diff) — neither prior run had ANY
   interaction styling. Reference: pink hover + teal active, both with an inset underline. */
.cat-menu__link:hover {
  color: rgb(239, 83, 169);
  box-shadow: rgb(239, 83, 169) 0px -2px 0px 0px inset;
}

.cat-menu__link.router-link-active,
.cat-menu__link.active {
  color: rgb(8, 125, 112);
  box-shadow: rgb(8, 125, 112) 0px -2px 0px 0px inset;
}

.cat-menu__dropdown-item:hover {
  color: rgb(88, 177, 183);
}

header.header__desktop-only .search-form input:focus {
  box-shadow: rgba(88, 174, 174, 0.35) 0px 0px 0px 2px inset;
}

.action-bar__item--text-beside:hover {
  color: rgb(8, 125, 112);
}

/* [breadcrumb current] reference wraps the current crumb in <strong> -> weight 660.
   paint-owner.mjs initially returned the aria-hidden "/" separator at the same depth; the
   tie-break now prefers real content, which is how this value was recovered. */
.store-breadcrumb .breadcrumb-item.active,
.store-breadcrumb .breadcrumb-item:last-child {
  font-weight: 660;
}

/* [nav dropdown] reference mega panel: NO radius, 2px teal top rule, deep soft shadow */
.cat-menu__dropdown {
  border-radius: 0;
  border-top: 2px solid #087d70;
  box-shadow: rgba(16, 22, 40, 0.14) 0px 18px 48px 0px;
}

/* [tier badge] the reference "SPAR" indicator is a TEAL PILL painted by the <b> inside
   .ylp-split-tier-action; the rule above measured the transparent WRAPPER and de-chromed it to
   grey text. Doubled leaf out-specifies the .is-best variant. */
.product-tier-price__badge.product-tier-price__badge,
.product-tier-price__badge.is-best {
  background-color: #58b1b7;
  border-color: #58b1b7;
  color: #ffffff;
  border-radius: 999px;
  padding: 3px 10px;
  font-weight: 800;
}

/* [footer heading] PAINTED LEAF is .panel-title (14px UPPERCASE); the rule above styled
   .panel-heading, its container, and measured clean while the text stayed wrong. */
footer .panel-title {
  font-size: 20px;
  font-weight: 660;
  text-transform: none;
  color: #121212;
  line-height: 25px;
}

/* [tier panel title] reference is 28px, but its string is the single word "Mængderabat";
   "Quantity discount" wraps to two lines at 28px in this 244px column. */
.product-tier-price__title {
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: normal;
}

/* [reviews CTA] reference review CTA speaks the pink accent, not near-black */
.reviews-write-btn {
  background-color: #ef53a9;
}

/* [nav underline alignment] the hover/active indicator was an inset box-shadow, so it painted on
   the LINK's own bottom edge — measured 9px above the navbar's grey rule (link bottom 161 vs nav
   bottom 170 = 8px nav padding-bottom + its 1px border). Redraw it as an absolutely-positioned
   bar dropped by exactly that offset so it sits ON the grey line. ::before is used because
   ::after is Bootstrap's .dropdown-toggle caret. Offset lives in one variable — retune it if the
   navbar's vertical padding changes. */
.shop-navbar--default {
  --nav-underline-drop: 9px;
}

.shop-navbar--default .cat-menu__link {
  position: relative;
}

.shop-navbar--default .cat-menu__link:hover,
.shop-navbar--default .cat-menu__link.router-link-active,
.shop-navbar--default .cat-menu__link.active {
  box-shadow: none;
}

.shop-navbar--default .cat-menu__link:hover::before,
.shop-navbar--default .cat-menu__link.router-link-active::before,
.shop-navbar--default .cat-menu__link.active::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-1 * var(--nav-underline-drop));
  height: 2px;
  background: currentColor;
}

/* [nav dropdown alignment] the mega panel is positioned against .cat-menu__item, so its top:35px
   landed flush with the LINK's bottom edge (measured 161) — 9px above the navbar's own bottom
   edge (170), leaving the panel overlapping the nav's padding and grey rule. Drop it by exactly
   that offset, reusing the same --nav-underline-drop the underline correction above defines, so
   both stay in step if the navbar's vertical padding is ever retuned. */
.shop-navbar--default .cat-menu__dropdown {
  top: calc(100% + var(--nav-underline-drop));
}

/* The drop leaves a dead strip between the link and the panel, and the menu closes on the item's
   mouseleave — so travelling down to click an entry dismissed it. A transparent bridge on the
   panel's own ::before covers exactly that strip. It is a DOM descendant of .cat-menu__item, so
   crossing it never fires the item's mouseleave, and the panel spans at least the link's width
   (measured 216-434 vs the item's 216-339). No background: it only has to be hit-testable. */
.shop-navbar--default .cat-menu__dropdown::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--nav-underline-drop));
  height: var(--nav-underline-drop);
}

/* mcp:end */