@charset "UTF-8";
/* mcp:begin — managed by theming MCP; edits inside this block will be overwritten */
/* 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. */
/* 2026-07-30 tokenize pass (S7 refactor, applied after the fact): every colour literal that
   matched a live --shop-* token exactly was replaced with var(), so the Style Editor's brand
   controls now actually move these elements. Values are unchanged — this pass is behaviour-
   preserving by construction. Greys/borders/sizes were left as literals: they are per-element
   measured values with no exact token, and collapsing them would move pixels. */
/* The reference's secondary teal accent. It has no token in the storefront's consumed-token
   registry (only --shop-badge-volume-bg carries the same value, with unrelated semantics), so
   it is defined here and consumed by the chips, feature-badge icons, tier badge and nav hover. */
:root {
  --shop-accent-teal: #58b1b7;
}

/* Local type scale, minted 2026-07-30. Values are the ARL run's MEASURED reference sizes, carried
   over byte-for-byte — this declares them, it does not re-scale anything. Only values with >=3
   consumers across >=2 component families are here (the ARL canPromote bar); one-off sizes stay
   literal, where a token would be a rename with no leverage. There is deliberately no -lg: 20px
   is already owned by --shop-footer-heading-font-size in the registry.
   NOTE these now move together — e.g. editing -xs moves the header search field, the footer
   links, the card brand name, the spec rows and the PDP brand in one go. That is the point. */
:root {
  --shop-font-size-xs: 11px; /* header search, footer links, brand name, spec rows, PDP brand */
  --shop-font-size-sm: 14.4px; /* category toolbar, breadcrumb */
  --shop-font-size-base: 16px; /* filter-drawer button, card title, card price */
  --shop-font-size-xl: 28px; /* footer brand, PDP title, PDP price */
}

/* ---------- 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: var(--shop-surface);
  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: var(--shop-font-size-xs);
  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: var(--shop-text-body);
  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: var(--shop-text-body);
}

/* ---------- shared chrome: nav ---------- */
.shop-navbar--default {
  background-color: var(--shop-surface);
  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: var(--shop-surface);
}

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

footer .header__brand.header__brand {
  font-size: var(--shop-font-size-xl);
  font-weight: 660;
  letter-spacing: normal;
  line-height: 1.15;
}

footer .panel-heading {
  color: var(--shop-text-body);
  font-size: var(--shop-footer-heading-font-size);
  font-weight: 660;
  line-height: 1.25;
}

footer .panel-body a {
  color: #655c54;
  font-size: var(--shop-font-size-sm);
  line-height: 1.6;
}

/* ---------- breadcrumb ---------- */
.store-breadcrumb .breadcrumb-item,
.store-breadcrumb .breadcrumb-item a {
  color: #777d94;
  font-size: var(--shop-font-size-sm);
}

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

/* ---------- category head ---------- */
.category-title {
  color: var(--shop-text-heading);
  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: var(--shop-accent-teal);
  font-size: 15.73px;
  font-weight: 660;
  letter-spacing: 0.2px;
  line-height: 1.2;
}

/* ---------- category toolbar ---------- */
.category-toolbar {
  color: #626981;
  font-size: var(--shop-font-size-sm);
  justify-content: space-between;
}

.category-filter-drawer__btn {
  border: 1px solid #d4d4d4;
  color: var(--shop-text-secondary);
  font-size: var(--shop-font-size-base);
  font-weight: 600;
  padding: 8px 14px;
  line-height: normal;
}

.category-filter-drawer__btn-label {
  color: var(--shop-text-secondary);
  font-size: var(--shop-font-size-base);
  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: var(--shop-surface);
  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: var(--shop-text-secondary);
  font-size: var(--shop-font-size-xs);
  font-weight: 650;
  letter-spacing: normal;
  text-transform: none;
  line-height: normal;
}

.product-list-card .product-title {
  color: #11172f;
  font-size: var(--shop-font-size-base);
  font-weight: 660;
  line-height: 1.25;
}

.product-list-card .product-price .price-current {
  color: #0c1227;
  font-size: var(--shop-font-size-base);
  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: var(--shop-badge-font-size);
  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: var(--shop-font-size-xs);
  font-weight: 400;
  line-height: normal;
}

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

.product-feature-badges__icon {
  color: var(--shop-accent-teal);
  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 {
  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: var(--shop-text-body);
  line-height: normal;
}

/* ---------- PDP identity ---------- */
.rl-pdp-top .product-brand {
  color: var(--shop-primary);
  font-size: var(--shop-font-size-xs);
  font-weight: 900;
  text-transform: uppercase;
}

.rl-pdp-top .product-title {
  color: #06122d;
  font-size: var(--shop-font-size-xl);
  font-weight: 650;
  line-height: 1.15;
}

.rl-pdp-top .product-price .price-current {
  color: #0b1024;
  font-size: var(--shop-font-size-xl);
  font-weight: 520;
  letter-spacing: normal;
  line-height: 1.04;
}

.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: var(--shop-surface);
  border: 1px solid #dedede;
  border-radius: 8px;
}

.product-buy-button {
  background-color: var(--shop-primary);
  font-weight: 760;
  padding-left: 25.6px;
  padding-right: 25.6px;
  gap: 7.2px;
  flex-grow: 1;
  border: 1px solid var(--shop-primary);
  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: var(--shop-surface);
  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: var(--shop-surface);
  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: var(--shop-primary);
  font-size: var(--shop-font-size-xs);
  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: var(--shop-badge-font-size);
  font-weight: 850;
  line-height: 1;
  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: var(--shop-primary);
  box-shadow: var(--shop-primary) 0px -2px 0px 0px inset;
}

.cat-menu__link.router-link-active,
.cat-menu__link.active {
  color: var(--shop-secondary);
  box-shadow: var(--shop-secondary) 0px -2px 0px 0px inset;
}

.cat-menu__dropdown-item:hover {
  color: var(--shop-accent-teal);
}

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: var(--shop-secondary);
}

/* [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 var(--shop-secondary);
  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: var(--shop-accent-teal);
  border-color: var(--shop-accent-teal);
  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: var(--shop-footer-heading-font-size);
  font-weight: 660;
  text-transform: none;
  color: var(--shop-text-body);
  line-height: 1.25;
}

/* [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: var(--shop-primary);
}

/* [all-categories trigger] The ACM trigger is a <button> sitting in the same navbar row as the
   category links, but its core styling is entirely its own — 15px/500, secondary grey, 11px/14px
   padding and a 2px transparent bottom border — so it read as a lighter, shorter, differently
   painted control next to its neighbours. Match it to `.cat-menu__link` above: same type, same
   colour, same 16px/8px box (which lands it on the identical 51px height and baseline), and the
   same pink hover underline. The open state reuses that inset rule instead of the real border,
   so opening the menu no longer changes the button's height. Class doubled because the
   component's own `.acm-trigger` rule otherwise wins the colour at equal specificity. */
.acm-trigger.acm-trigger {
  color: #171b2f;
  font-size: 15.04px;
  font-weight: 660;
  line-height: normal;
  padding: 16px 8px;
  gap: 6px;
  border-bottom: 0;
  box-shadow: none;
}

.acm-trigger.acm-trigger:hover,
.acm-trigger.acm-trigger--active {
  color: var(--shop-primary);
  box-shadow: var(--shop-primary) 0px -2px 0px 0px inset;
}

.acm-trigger__chevron {
  margin-left: 2px;
}

/* mcp:end */