/**
 * @file
 * PDP Draft Summary overlay styles.
 *
 * Updated goals:
 * - "Add X" CTAs should visually match "Add to basket" (same button family).
 * - "Remove" buttons should be a darker (black-ish) variant.
 * - Header "Next step: X" becomes:
 *     [Next step button]  X-term
 *   where the button uses the primary style, and term stays as a label/link.
 * - Vertical scroll should happen INSIDE the dialog body area:
 *     between .pdp-draft-summary__header-divider and the footer.
 *   Header + footer stay fixed.
 *
 * Compatibility notes:
 * - This CSS supports BOTH:
 *   (A) New markup with a dedicated scroll body: .pdp-draft-summary__body
 *   (B) Old markup without it (no breakage; only the body-scrolling enhancement
 *       requires the wrapper to exist in DOM).
 * - Header next-step:
 *   * New structure expects:
 *       <div class="pdp-draft-summary__next-step">
 *         <a class="pdp-draft-summary__next-step-btn">...</a>
 *         <a class="pdp-draft-summary__next-step-term">Term</a>
 *       </div>
 *   * Old structure (<a class="pdp-draft-summary__next-step">Next step: X</a>)
 *     remains readable, just not split into button+term.
 */

/* ---------------------------------------------------------------------------
 * Default thumb mapping (override-friendly)
 * ------------------------------------------------------------------------- */

:root {
  /* Hard fallback only (JS can override via inline --pdp-thumb-url using assets base). */
  --pdp-default-thumb-tunes: url("/modules/custom/product_drafting_page/tunedefault.png");
  --pdp-default-thumb-mechanism: url("/modules/custom/product_drafting_page/mechanismdefault.png");
  --pdp-default-thumb-key: url("/modules/custom/product_drafting_page/keydefault.png");
  --pdp-default-thumb-box: url("/modules/custom/product_drafting_page/boxdefault.png");
  --pdp-default-thumb-packaging: url("/modules/custom/product_drafting_page/packetdefault.png");
  --pdp-default-thumb-special: url("/modules/custom/product_drafting_page/specialdefault.png");
}

/* Slot defaults (support BOTH current + legacy filename conventions) */
.pdp-draft-summary [data-default-thumb="tunedefault.png"],
.pdp-draft-summary [data-default-thumb="tunes.png"] {
  --pdp-thumb-url: var(--pdp-default-thumb-tunes);
}

.pdp-draft-summary [data-default-thumb="mechanismdefault.png"],
.pdp-draft-summary [data-default-thumb="mechdefault.png"],
.pdp-draft-summary [data-default-thumb="mechanism.png"] {
  --pdp-thumb-url: var(--pdp-default-thumb-mechanism);
}

.pdp-draft-summary [data-default-thumb="keydefault.png"],
.pdp-draft-summary [data-default-thumb="key.png"] {
  --pdp-thumb-url: var(--pdp-default-thumb-key);
}

.pdp-draft-summary [data-default-thumb="boxdefault.png"],
.pdp-draft-summary [data-default-thumb="box.png"] {
  --pdp-thumb-url: var(--pdp-default-thumb-box);
}

/* Extras group defaults (support BOTH current + legacy filename conventions) */
.pdp-draft-summary [data-default-thumb="packetdefault.png"],
.pdp-draft-summary [data-default-thumb="packagedefault.png"],
.pdp-draft-summary [data-default-thumb="packaging.png"] {
  --pdp-thumb-url: var(--pdp-default-thumb-packaging);
}

.pdp-draft-summary [data-default-thumb="specialdefault.png"],
.pdp-draft-summary [data-default-thumb="special.png"] {
  --pdp-thumb-url: var(--pdp-default-thumb-special);
}

/* ---------------------------------------------------------------------------
 * Global overlay container
 * ------------------------------------------------------------------------- */

.pdp-draft-summary {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  font-family: var(
    --mw-font-primary,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif
  );
  overscroll-behavior: contain;
}

.pdp-draft-summary.is-open {
  display: flex;
}

/* Body scroll lock when overlay is open. */
.body--pdp-draft-summary-open {
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
 * Backdrop and dialog
 * ------------------------------------------------------------------------- */

.pdp-draft-summary__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(3px);
}

.pdp-draft-summary__dialog {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  max-width: 1120px;
  max-height: calc(100vh - 4rem);
  margin: 0 1rem;
  background: #101014;
  color: #f7f7fb;
  border-radius: 1.25rem;
  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.04);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Inner holds header + divider + scroll-body; footer is separate and fixed. */
.pdp-draft-summary__dialog-inner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* NEW: vertical scroll zone between divider and footer (requires wrapper in DOM). */
.pdp-draft-summary__body {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: 0.25rem;
}

/* ---------------------------------------------------------------------------
 * Basic focus styling (accessibility)
 * ------------------------------------------------------------------------- */

.pdp-draft-summary a:focus-visible,
.pdp-draft-summary button:focus-visible {
  outline: 2px solid rgba(114, 216, 255, 0.75);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Button system (shared styles)
 * - PRIMARY must match the "Add to basket" style.
 * - DARK is the black-ish variant for Remove.
 * ------------------------------------------------------------------------- */

.pdp-draft-summary__btn {
  appearance: none;
  text-decoration: none;
  border: none;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;

  border-radius: 999px;
  user-select: none;

  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    filter 0.15s ease,
    background-color 0.15s ease,
    color 0.15s ease;
}

.pdp-draft-summary__btn--primary {
  background: linear-gradient(135deg, #ffb44b, #ff7f4b);
  color: #231a0a;
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.12);
}

.pdp-draft-summary__btn--primary:hover,
.pdp-draft-summary__btn--primary:focus-visible {
  transform: translateY(-1px);
  box-shadow:
    0 16px 32px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.16);
  filter: brightness(1.04);
  outline: none;
}

.pdp-draft-summary__btn--primary:active {
  transform: translateY(0);
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.18);
}

.pdp-draft-summary__btn--dark {
  background: rgba(0, 0, 0, 0.62);
  color: rgba(245, 245, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 10px 18px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(0, 0, 0, 0.25);
}

.pdp-draft-summary__btn--dark:hover,
.pdp-draft-summary__btn--dark:focus-visible {
  transform: translateY(-1px);
  background: rgba(0, 0, 0, 0.72);
  outline: none;
}

.pdp-draft-summary__btn--dark:active {
  transform: translateY(0);
}

.pdp-draft-summary__btn--compact {
  padding: 0.42rem 0.95rem;
  font-size: 0.75rem;
}

.pdp-draft-summary__btn[disabled],
.pdp-draft-summary__btn--disabled {
  cursor: not-allowed;
  opacity: 0.6;
  box-shadow: none;
  filter: grayscale(0.25);
}

/* ---------------------------------------------------------------------------
 * Header
 * ------------------------------------------------------------------------- */

.pdp-draft-summary__header {
  position: relative;
  padding: 1rem 1.5rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.pdp-draft-summary__header-main {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.pdp-draft-summary__title {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.35;
  font-weight: 600;
}

.pdp-draft-summary__subtitle {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  color: #b3b3c7;
}

/* NEW header next-step: [button] + term */
.pdp-draft-summary__next-step {
  margin-top: 0.35rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  min-width: 0;
}

/* Button part (primary style) */
.pdp-draft-summary__next-step-btn {
  flex: 0 0 auto;
}

/* Term part (label/link) */
.pdp-draft-summary__next-step-term {
  color: #ffd676;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pdp-draft-summary__next-step-term:hover,
.pdp-draft-summary__next-step-term:focus-visible {
  text-decoration: underline;
  outline: none;
}

/* Backward compatibility: old single-link next-step remains readable */
.pdp-draft-summary__next-step[href] {
  color: #ffd676;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pdp-draft-summary__next-step[href]:hover,
.pdp-draft-summary__next-step[href]:focus-visible {
  text-decoration: underline;
  outline: none;
}

/* Close button (X) */
.pdp-draft-summary__close {
  border: none;
  background: transparent;
  color: #f7f7fb;
  font-size: 1.3rem;
  line-height: 1;
  padding: 0.35rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
  flex: 0 0 auto;
}

.pdp-draft-summary__close:hover,
.pdp-draft-summary__close:focus-visible {
  background-color: rgba(255, 255, 255, 0.08);
  outline: none;
  transform: translateY(-1px);
}

/* Small top divider below header */
.pdp-draft-summary__header-divider {
  margin: 0.35rem 1.5rem 0.75rem;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.06),
    rgba(255, 255, 255, 0.2),
    rgba(255, 255, 255, 0.06)
  );
}

/* ---------------------------------------------------------------------------
 * Main grid (4 big slots)
 * ------------------------------------------------------------------------- */

.pdp-draft-summary__slots-wrapper {
  padding: 0 1.5rem 1.25rem;
}

.pdp-draft-summary__slots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* always 2x2 */
  gap: 0.75rem;
}

/* On small screens, stack vertically. */
@media (max-width: 640px) {
  .pdp-draft-summary__slots {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* SLOT LAYOUT: thumb SMALL on the LEFT, content on the RIGHT */
.pdp-draft-summary__slot {
  position: relative;
  border-radius: 0.9rem;
  padding: 0.75rem 0.85rem 0.85rem;
  background: radial-gradient(
    circle at 0% 0%,
    #26263a 0%,
    #171724 65%,
    #14141d 100%
  );
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03),
    0 10px 22px rgba(0, 0, 0, 0.4);
  overflow: hidden;

  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  column-gap: 0.85rem;
  row-gap: 0.25rem;
  align-items: start;

  grid-template-areas:
    "thumb label"
    "thumb title"
    "thumb subtitle"
    "thumb start"
    "thumb price"
    "thumb remove";
}

.pdp-draft-summary__slot--empty {
  background: radial-gradient(
    circle at 0% 0%,
    #1d1d29 0%,
    #121219 70%,
    #101015 100%
  );
  border: 1px dashed rgba(255, 255, 255, 0.18);
  box-shadow: none;
}

/* Assign grid areas */
.pdp-draft-summary__slot-label { grid-area: label; }
.pdp-draft-summary__slot-title { grid-area: title; }
.pdp-draft-summary__slot-subtitle { grid-area: subtitle; }
.pdp-draft-summary__slot-start { grid-area: start; }
.pdp-draft-summary__slot-price { grid-area: price; }
.pdp-draft-summary__remove { grid-area: remove; }
.pdp-draft-summary__slot-thumb { grid-area: thumb; }

/* Small tag/top label */
.pdp-draft-summary__slot-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.6);
}

/* Slot title */
.pdp-draft-summary__slot-title {
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0.1rem 0 0.05rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Small subtitle */
.pdp-draft-summary__slot-subtitle {
  font-size: 0.8rem;
  color: #b3b3c7;
  margin: 0;
}

/* "Start with X" / "Add X" CTA in empty slots */
.pdp-draft-summary__slot-start {
  margin-top: 0.25rem;
}

/* Slot CTA: keep layout-only rules here; visuals come from .pdp-draft-summary__btn system. */
.pdp-draft-summary__slot-start-link {
  width: fit-content;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------------------------------------------------------------------------
 * Thumbnail area (shared)
 * ------------------------------------------------------------------------- */

.pdp-draft-summary__slot-thumb {
  margin-top: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

/* REAL IMAGES (4 main slots) */
.pdp-draft-summary__slot .pdp-draft-summary__slot-thumb img {
  width: 84px;
  height: 84px;
  max-width: 84px;
  max-height: 84px;
  border-radius: 0.65rem;
  object-fit: cover;
  display: block;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
}

/* PLACEHOLDER THUMBS */
.pdp-draft-summary__slot-thumb--placeholder {
  width: 100%;
  min-height: 120px;
  border-radius: 0.6rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.0) 60%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.12));
}

/* Compact placeholder for the 4 main slots */
.pdp-draft-summary__slot .pdp-draft-summary__slot-thumb--placeholder {
  width: 84px;
  height: 84px;
  min-height: 84px;
  border-radius: 0.65rem;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
}

.pdp-draft-summary__slot-thumb--placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--pdp-thumb-url, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.92;
}

/* Do NOT show filenames anywhere */
.pdp-draft-summary__slot-thumb--placeholder::after {
  content: "";
  display: none;
}

/* Slot price line */
.pdp-draft-summary__slot-price {
  margin-top: 0.25rem;
  font-size: 0.85rem;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;
}

/* Main price (final) */
.pdp-draft-summary__slot-price-main {
  font-weight: 600;
}

/* Old price (if discount) */
.pdp-draft-summary__slot-price-old {
  font-size: 0.8rem;
  text-decoration: line-through;
  color: #8e8ea7;
}

/* Small discount tag */
.pdp-draft-summary__slot-price-discount {
  font-size: 0.7rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: rgba(255, 86, 120, 0.15);
  color: #ffb0c1;
}

/* ---------------------------------------------------------------------------
 * Remove buttons (slots + extras)
 * - Extra force a dark style even if theme adds unrelated button styling.
 * ------------------------------------------------------------------------- */

.pdp-draft-summary a.pdp-draft-summary__remove,
.pdp-draft-summary button.pdp-draft-summary__remove {
  /* Keep this block as an override shield (theme-proof). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;

  padding: 0.42rem 0.95rem;
  border-radius: 999px;

  background: rgba(0, 0, 0, 0.62);
  color: rgba(245, 245, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 10px 18px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(0, 0, 0, 0.25);

  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;

  cursor: pointer;

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    filter 0.15s ease,
    background-color 0.15s ease;
}

.pdp-draft-summary a.pdp-draft-summary__remove:hover,
.pdp-draft-summary a.pdp-draft-summary__remove:focus-visible,
.pdp-draft-summary button.pdp-draft-summary__remove:hover,
.pdp-draft-summary button.pdp-draft-summary__remove:focus-visible {
  transform: translateY(-1px);
  background: rgba(0, 0, 0, 0.72);
  outline: none;
}

.pdp-draft-summary a.pdp-draft-summary__remove:active,
.pdp-draft-summary button.pdp-draft-summary__remove:active {
  transform: translateY(0);
}

.pdp-draft-summary__remove {
  margin-top: 0.35rem;
}

/* ---------------------------------------------------------------------------
 * Bottom horizontal items list (extras)
 * ------------------------------------------------------------------------- */

.pdp-draft-summary__items {
  padding: 0 0 0.75rem;
  margin: 0 1.5rem 0.75rem;
  border-radius: 0.85rem;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.03),
    rgba(255, 255, 255, 0.08)
  );
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pdp-draft-summary__items-header {
  padding: 0.6rem 0.9rem 0.35rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
}

.pdp-draft-summary__items-title {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(243, 243, 255, 0.85);
}

.pdp-draft-summary__items-count {
  font-size: 0.8rem;
  color: rgba(230, 230, 255, 0.85);
}

/* Filter buttons row */
.pdp-draft-summary__items-filters {
  margin-left: auto;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.pdp-draft-summary__items-filter {
  appearance: none;
  border: none;
  border-radius: 999px;
  padding: 0.2rem 0.75rem;
  font-size: 0.78rem;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.25);
  color: rgba(240, 240, 255, 0.9);
  text-transform: none;
  letter-spacing: 0.03em;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.1s ease;
}

.pdp-draft-summary__items-filter:hover,
.pdp-draft-summary__items-filter:focus-visible {
  background: rgba(0, 0, 0, 0.4);
  outline: none;
  transform: translateY(-1px);
}

.pdp-draft-summary__items-filter.is-active {
  background: rgba(255, 214, 118, 0.16);
  color: #ffd676;
  box-shadow: 0 0 0 1px rgba(255, 214, 118, 0.6);
}

/* Horizontal scroll container */
.pdp-draft-summary__items-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.35rem 0.75rem 0.75rem;
  -webkit-overflow-scrolling: touch;
}

/* Inner flex row */
.pdp-draft-summary__items-inner {
  display: inline-flex;
  align-items: stretch;
  gap: 0.65rem;
  min-height: 140px;
}

/* Scrollbar (optional) */
.pdp-draft-summary__items-scroll::-webkit-scrollbar {
  height: 6px;
}
.pdp-draft-summary__items-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.pdp-draft-summary__items-scroll::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 999px;
}

/* Individual small item cards */
.pdp-draft-summary__item-card {
  min-width: 150px;
  max-width: 190px;
  border-radius: 0.75rem;
  background: rgba(16, 16, 22, 0.92);
  color: #f5f5ff;
  padding: 0.5rem 0.55rem 0.55rem;
  box-shadow:
    0 6px 12px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.04);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* CTA cards (visual only; clickable element is the CTA button/link) */
.pdp-draft-summary__item-card--cta {
  user-select: none;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 214, 118, 0.14), rgba(0, 0, 0, 0) 65%),
    rgba(16, 16, 22, 0.88);
  border: 1px dashed rgba(255, 214, 118, 0.35);
  box-shadow:
    0 10px 18px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 214, 118, 0.12);
}

.pdp-draft-summary__item-card--cta:hover,
.pdp-draft-summary__item-card--cta:focus-within {
  transform: translateY(-1px);
  box-shadow:
    0 14px 26px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 214, 118, 0.18);
}

.pdp-draft-summary__item-type {
  font-size: 0.7rem;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.pdp-draft-summary__item-title {
  font-size: 0.83rem;
  font-weight: 500;
  margin: 0.1rem 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* CTA button inside CTA cards (JS uses .pdp-draft-summary__item-cta-btn + btn classes) */
.pdp-draft-summary__item-cta-btn {
  width: 100%;
  margin-top: 0.2rem;
  text-decoration: none;
}

.pdp-draft-summary__item-card .pdp-draft-summary__slot-thumb {
  margin-top: 0.25rem;
}

/* Keep extras thumbs larger */
.pdp-draft-summary__item-card .pdp-draft-summary__slot-thumb img {
  width: 100%;
  max-width: 100%;
  max-height: 92px;
  border-radius: 0.6rem;
  object-fit: cover;
  display: block;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
}

.pdp-draft-summary__item-card .pdp-draft-summary__slot-thumb--placeholder {
  min-height: 92px;
  width: 100%;
  border-radius: 0.6rem;
}

.pdp-draft-summary__item-price {
  margin-top: 0.3rem;
  font-size: 0.82rem;
  font-weight: 600;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: baseline;
}

/* Old/new/single price for extras */
.pdp-draft-summary__item-price-old {
  font-size: 0.78rem;
  text-decoration: line-through;
  color: #8e8ea7;
  margin-right: 0.15rem;
}

.pdp-draft-summary__item-price-new {
  font-size: 0.85rem;
  font-weight: 600;
}

.pdp-draft-summary__item-price-discount {
  font-size: 0.75rem;
  margin-left: 0.15rem;
  color: #ffb0c1;
}

.pdp-draft-summary__item-price-single {
  font-size: 0.85rem;
  font-weight: 600;
}

.pdp-draft-summary__item-meta {
  margin-top: 0.1rem;
  font-size: 0.75rem;
  color: #b3b3c7;
}

/* ---------------------------------------------------------------------------
 * Footer: totals + Add to basket
 * ------------------------------------------------------------------------- */

.pdp-draft-summary__footer {
  flex: 0 0 auto;
  padding: 0.7rem 1.5rem 0.9rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

@media (max-width: 640px) {
  .pdp-draft-summary__footer {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Totals text block */
.pdp-draft-summary__total {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  font-size: 0.85rem;
}

.pdp-draft-summary__total-line {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.pdp-draft-summary__total-label {
  color: #b3b3c7;
}

.pdp-draft-summary__total-value {
  font-weight: 600;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: baseline;
}

.pdp-draft-summary__total-old {
  font-size: 0.8rem;
  text-decoration: line-through;
  color: #8e8ea7;
}

.pdp-draft-summary__total-new {
  font-weight: 700;
}

.pdp-draft-summary__total-discount {
  font-size: 0.78rem;
  color: #ffb0c1;
}

.pdp-draft-summary__actions {
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 640px) {
  .pdp-draft-summary__actions {
    justify-content: stretch;
  }
}

/* Add-to-basket: keep sizing here; visuals come from .pdp-draft-summary__btn system */
.pdp-draft-summary__add-to-basket {
  padding: 0.6rem 1.35rem;
  font-size: 0.9rem;
}

.pdp-draft-summary__add-to-basket--disabled,
.pdp-draft-summary__add-to-basket[disabled] {
  cursor: not-allowed;
  opacity: 0.6;
  box-shadow: none;
  filter: grayscale(0.25);
}

/* ---------------------------------------------------------------------------
 * Trigger (small bar under PDP draft)
 * ------------------------------------------------------------------------- */

.pdp-draft-summary-trigger-wrapper {
  margin-top: 0.5rem;
  /* Sticky behavior:
   * - Stays in normal flow until reaching the top.
   * - Then pins under the PDP Draft Bar (#pdp-draft-block), whose live height
   *   is provided by JS as --pdp-draft-block-height.
   * - Must stay above the draft bar during sticky transition so the trigger is
   *   not visually swallowed by .pdp-bar / #pdp-draft-block.
   */
  position: sticky;
  top: calc(
    var(--drupal-displace-offset-top, 0px)
    + var(--pdp-draft-block-height, 0px)
    + 0.75rem
  );
  z-index: 60;
}

.pdp-draft-summary-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  background: rgba(16, 16, 22, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.85rem;
}

@media (max-width: 640px) {
  .pdp-draft-summary-trigger {
    flex-direction: column;
    align-items: flex-start;
  }
}

.pdp-draft-summary-trigger__next {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.15rem;
}

.pdp-draft-summary-trigger__label {
  font-weight: 600;
  margin-right: 0.25rem;
}

/* NEW: __value is a wrapper container (div) in current markup */
.pdp-draft-summary-trigger__value {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}


/* Actions area (right side of the closed sticky trigger). */
.pdp-draft-summary-trigger__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .pdp-draft-summary-trigger__actions {
    width: 100%;
    justify-content: flex-start;
  }
}

/* ---------------------------------------------------------------------------
 * Trigger: Add to basket button state styling
 * - Disabled: gray background (NOT orange)
 * - Enabled: orange + subtle edge glow
 * ------------------------------------------------------------------------- */

/* Disabled (eligible=false): enforce gray background even though base disabled style dims. */
.pdp-draft-summary__btn--basket.is-disabled,
.pdp-draft-summary__btn--basket[disabled],
.pdp-draft-summary__btn--basket[aria-disabled="true"] {
  background: rgba(160, 160, 175, 0.22);
  color: rgba(245, 245, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: none;
  filter: none;
  opacity: 1;
}

.pdp-draft-summary__btn--basket.is-disabled:hover,
.pdp-draft-summary__btn--basket.is-disabled:focus-visible {
  transform: none;
  filter: none;
  outline: none;
}

/* Enabled: keep PRIMARY orange gradient + add subtle glow around edges. */
.pdp-draft-summary__btn--primary.pdp-draft-summary__btn--basket.is-enabled {
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 0 14px rgba(255, 150, 60, 0.28),
    0 0 0 1px rgba(255, 190, 120, 0.22);
}

.pdp-draft-summary__btn--primary.pdp-draft-summary__btn--basket.is-enabled:hover,
.pdp-draft-summary__btn--primary.pdp-draft-summary__btn--basket.is-enabled:focus-visible {
  box-shadow:
    0 16px 32px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.16),
    0 0 18px rgba(255, 150, 60, 0.34),
    0 0 0 1px rgba(255, 200, 140, 0.26);
}

/* If the next-step element is a PDP button, do NOT re-apply link styles */
.pdp-draft-summary-trigger__value .pdp-draft-summary-trigger__next-link {
  text-decoration: none;
}

/* Legacy “plain link” mode: only apply yellow link styling when NOT using button system */
a.pdp-draft-summary-trigger__value:not(.pdp-draft-summary__btn),
a.pdp-draft-summary-trigger__next-link:not(.pdp-draft-summary__btn) {
  color: #ffd676;
  font-weight: 500;
  text-decoration: none;
}

a.pdp-draft-summary-trigger__value:not(.pdp-draft-summary__btn):hover,
a.pdp-draft-summary-trigger__value:not(.pdp-draft-summary__btn):focus-visible,
a.pdp-draft-summary-trigger__next-link:not(.pdp-draft-summary__btn):hover,
a.pdp-draft-summary-trigger__next-link:not(.pdp-draft-summary__btn):focus-visible {
  text-decoration: underline;
  outline: none;
}

/* ---------------------------------------------------------------------------
 * Reduced motion
 * ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .pdp-draft-summary *,
  .pdp-draft-summary *::before,
  .pdp-draft-summary *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
 * Small helpers
 * ------------------------------------------------------------------------- */

.pdp-draft-summary__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.72rem;
  background: rgba(255, 255, 255, 0.08);
  color: #f7f7fb;
}

.pdp-draft-summary__warning {
  margin-top: 0.25rem;
  font-size: 0.8rem;
  color: #ffcdd2;
}

/* -------------------------------------------------------------------------
 * Z-index hardening
 *
 * The Draft Summary overlay must always render above any sticky headers/bars
 * (theme or custom modules may bump z-index on sticky elements).
 * ---------------------------------------------------------------------- */

.pdp-draft-summary {
  z-index: 2147483647 !important;
}


/* MW_PDP_DRAFT_SUMMARY_LOGO_CSS_VERSION: v12 | MW_PDG_3006_HEADER_CENTER_LOGO */

:root {
  --pdp-draft-logo-w: 280px;
}

/* The trigger-bar logo is no longer part of the compact summary trigger.
   JS removes stale injected nodes; this rule is a cache-safe fallback. */
.pdp-draft-summary-trigger__logo,
.pdp-draft-summary-trigger__logo-img {
  display: none !important;
}

/* Ensure the trigger still spans the bar after trigger-logo removal. */
.pdp-draft-summary-trigger {
  position: relative;
  width: 100%;
}

/* The overlay root must remain viewport-fixed. A previous late logo patch changed
   this selector to position:relative and caused the modal to center in document
   flow instead of in the viewport. */
.pdp-draft-summary {
  position: fixed !important;
  inset: 0 !important;
}

/* Summary modal logo: clone the already-rendered login-bar inline SVG.
   The logo is part of the modal header, centered on the top axis, and sits on a
   compact white surface so the black/orange artwork remains readable. */
.pdp-draft-summary__header-main,
.pdp-draft-summary__close {
  position: relative;
  z-index: 2;
}

.pdp-draft-summary__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  z-index: 1;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}
.pdp-draft-summary__logo-surface {
  width: min(var(--pdp-draft-logo-w), 34vw);
  max-width: 320px;
  min-width: 210px;
  padding: 0.28rem 0.78rem;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pdp-draft-summary__logo-svg,
.pdp-draft-summary__logo-img {
  width: 100% !important;
  height: auto !important;
  max-width: var(--pdp-draft-logo-w) !important;
  display: block;
  opacity: 1 !important;
  filter: none !important;
}

@media (max-width: 760px) {
  .pdp-draft-summary__header {
    flex-wrap: wrap;
  }
  .pdp-draft-summary__header-main {
    flex: 1 1 calc(100% - 3rem);
  }
  .pdp-draft-summary__logo {
    position: static;
    transform: none;
    width: 100%;
    order: 2;
    margin: 0.45rem 0 0.15rem;
  }
  .pdp-draft-summary__logo-surface {
    width: min(var(--pdp-draft-logo-w), 72vw);
    min-width: 0;
  }
}

/* Make sure modal content and controls stay above the internal modal logo. */
.pdp-draft-summary__header,
.pdp-draft-summary__body,
.pdp-draft-summary__footer,
.pdp-draft-summary__head,
.pdp-draft-summary__grid,
.pdp-draft-summary__foot {
  position: relative;
  z-index: 1;
}