/* =============================================================================
   AB50 offer card, product 214                          (2026-10-03, v2)

   Owner brief: show the customer how far the order is from code AB50 (50% off
   the AB silicone putty from 5 kg in one order) so they understand it and add
   more - a card near the quantity, not a banner, popup or toast.
   v2 (owner, with a screenshot of v1's cart line): one grey sentence, "50%" and
   "off" split over two lines, nothing to press. Now: a headline that is the
   deal ("Only 1 kg away from 50% off", the discount in brand pink, never
   broken), one line that says how, the progress bar, and one button that does
   the step ("Make it 5 kg" / "+ Add 1 kg" / "Apply AB50").
     - product page: .sk-unlock (catalog/_partials/coupon-unlock.tpl), a form
       child under the stepper / Add to cart / Buy now row - a full-width grid
       row of product-premium.css §38. coupon-unlock.js redraws it.
     - cart page: .sk-unlock-line on 214's cart line
       (checkout/_partials/cart-detailed-product-line.tpl), its own grid row,
       server-rendered after every cart change.
   Loaded only by the 214 product page and the cart page. Colours are the
   theme's tokens (theme-premium.css :root) with the same values as fallbacks;
   buttons follow the PDP button system (product-premium.css §38e: pill, 1.5px
   brand border, Inter 600); the code chip matches the cart offer card's.
   ========================================================================== */
.sk-unlock,
.sk-unlock-line {
  --cu-pink: var(--skt-pink, #d50075);
  --cu-pink-dark: var(--skt-pink-dark, #9e0056);
  --cu-tint: var(--skt-pink-tint, #fef0f7);
  --cu-tint-border: var(--skt-pink-border, #f0dce8);
  --cu-ink: var(--skt-ink, #1a0010);
  --cu-body: #4b4550;
  --cu-muted: #756e7d;
  --cu-track: #fff;
}

/* ---- Shared pieces -------------------------------------------------------- */
.sk-unlock .sk-unlock__off,
.sk-unlock-line .sk-unlock__off {
  color: var(--cu-pink);
  font-weight: 800;
  white-space: nowrap;
}

.sk-unlock strong,
.sk-unlock-line strong { font-weight: 700; white-space: nowrap; }

/* The code: same chip as the cart's offer card, so it reads as the same code there. */
.sk-unlock .sk-unlock__code,
.sk-unlock-line .sk-unlock__code {
  display: inline-block;
  padding: 0 .4rem;
  border: 1px dashed var(--cu-pink);
  border-radius: 6px;
  background: #fff;
  color: var(--cu-pink);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.45;
  white-space: nowrap;
}

/* ---- Product page --------------------------------------------------------- */
.sk-unlock {
  margin: 12px 0 0;
  padding: 14px 16px 13px;
  border: 1px solid var(--cu-tint-border);
  border-radius: 14px;
  background: var(--cu-tint);
  color: var(--cu-body);
}

.sk-unlock__main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sk-unlock__icon,
.sk-unlock-line__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  color: var(--cu-pink);
  box-shadow: inset 0 0 0 1px var(--cu-tint-border);
  transition: background-color 220ms ease, color 220ms ease;
}

.sk-unlock__icon { width: 36px; height: 36px; }
.sk-unlock__icon svg { width: 18px; height: 18px; }
.sk-unlock__tick { display: none; }
.sk-unlock:not(.is-locked) .sk-unlock__icon,
.sk-unlock-line:not(.is-locked) .sk-unlock-line__icon { background: var(--cu-pink); color: #fff; box-shadow: none; }
.sk-unlock:not(.is-locked) .sk-unlock__tag { display: none; }
.sk-unlock:not(.is-locked) .sk-unlock__tick { display: block; }

.sk-unlock__body { flex: 1 1 auto; min-width: 0; }

.sk-unlock__head {
  margin: 0;
  color: var(--cu-ink);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  text-wrap: balance;
}

.sk-unlock__sub {
  margin: 3px 0 0;
  color: var(--cu-body);
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.45;
  text-wrap: pretty;
}

.sk-unlock__btn,
.sk-unlock-line__btn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 16px;
  border: 1.5px solid var(--cu-pink);
  border-radius: 999px;
  background: #fff;
  color: var(--cu-pink);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.sk-unlock__btn:hover,
.sk-unlock-line__btn:hover { background: var(--cu-pink); color: #fff; text-decoration: none; }

.sk-unlock__btn:focus-visible,
.sk-unlock-line__btn:focus-visible { outline: 2px solid var(--cu-pink); outline-offset: 2px; }

.sk-unlock__btn[hidden] { display: none; }

/* Bar + count, lined up with the text (icon 36px + 12px gap). */
.sk-unlock__progress,
.sk-unlock-line__progress {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sk-unlock__progress { margin: 10px 0 0 48px; }

.sk-unlock__meter,
.sk-unlock-line__meter {
  display: block;
  flex: 1 1 auto;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--cu-track);
  box-shadow: inset 0 0 0 1px var(--cu-tint-border);
}

.sk-unlock__fill,
.sk-unlock-line__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--cu-pink);
  transition: width 260ms cubic-bezier(.2, .7, .3, 1);
}

.sk-unlock__count,
.sk-unlock-line__count {
  flex: 0 0 auto;
  color: var(--cu-muted);
  font-size: .75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sk-unlock__note {
  margin: 6px 0 0 48px;
  color: var(--cu-muted);
  font-size: .75rem;
  line-height: 1.4;
}

/* `hidden` is a UA style; any author display rule would beat it. */
.sk-unlock__note[hidden] { display: none; }

/* Phones: the button gets its own row under the text, the bar runs full width. */
@media (max-width: 575.98px) {
  .sk-unlock { margin-top: 10px; padding: 12px 14px; }
  .sk-unlock__main { flex-wrap: wrap; }
  .sk-unlock__body { flex-basis: calc(100% - 48px); }
  .sk-unlock__head { font-size: .9375rem; }
  .sk-unlock__btn { margin-left: 48px; }
  .sk-unlock__progress { margin-top: 10px; }
}

/* ---- Cart page: product 214's line ---------------------------------------- */
/* cart-premium.css lays the line out in areas; this adds one row at the bottom, under the text column on wide
   screens and full width on phones (the same breakpoint as cart-premium.css). */
.product-line.product-line--unlock {
  grid-template-areas:
    "alert   alert   alert"
    "image   content info"
    "image   actions info"
    "image   unlock  unlock";
}

.product-line__unlock { grid-area: unlock; }

@media (max-width: 767.98px) {
  .product-line.product-line--unlock {
    grid-template-areas:
      "alert   alert"
      "image   content"
      "image   actions"
      "info    info"
      "unlock  unlock";
  }
}

.sk-unlock-line {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: .6rem 0 0;
  padding: 12px 14px;
  border: 1px solid var(--cu-tint-border);
  border-radius: 12px;
  background: var(--cu-tint);
  color: var(--cu-body);
}

.sk-unlock-line__icon { width: 32px; height: 32px; }
.sk-unlock-line__icon svg { width: 16px; height: 16px; }

.sk-unlock-line__body { flex: 1 1 auto; min-width: 0; }

.sk-unlock-line__head {
  margin: 0;
  color: var(--cu-ink);
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.3;
  text-wrap: balance;
}

.sk-unlock-line__sub {
  margin: 2px 0 0;
  color: var(--cu-body);
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.45;
  text-wrap: pretty;
}

.sk-unlock-line__progress { margin-top: 8px; }

.sk-unlock-line__form { flex: 0 0 auto; margin: 0; }

.sk-unlock-line__btn--primary { background: var(--cu-pink); color: #fff; }
.sk-unlock-line__btn--primary:hover { background: var(--cu-pink-dark); border-color: var(--cu-pink-dark); }
.sk-unlock-line__btn[aria-busy="true"] { opacity: .6; pointer-events: none; }

@media (max-width: 575.98px) {
  .sk-unlock-line { flex-wrap: wrap; }
  .sk-unlock-line__body { flex-basis: calc(100% - 44px); }
  .sk-unlock-line__btn,
  .sk-unlock-line__form { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .sk-unlock__fill,
  .sk-unlock-line__fill,
  .sk-unlock__icon,
  .sk-unlock-line__icon,
  .sk-unlock__btn,
  .sk-unlock-line__btn { transition: none; }
}