/* ============================================================
   SECRET PLEASURES — CART V4
   Premium Noir / Gold / Cream
   ============================================================ */

:root {
  --sp-bg: #f3ede4;
  --sp-bg-2: #ece3d8;

  --sp-black: #181413;
  --sp-black-2: #221c1a;
  --sp-black-3: #2d2421;

  --sp-gold: #c28d45;
  --sp-gold-2: #d7ad69;
  --sp-gold-dark: #89602d;

  --sp-wine: #6e2633;
  --sp-wine-soft: rgba(110,38,51,.09);

  --sp-cream: #fffaf3;
  --sp-white: #ffffff;

  --sp-text: #201a18;
  --sp-muted: #746a63;

  --sp-border: #dfd4c7;
  --sp-border-gold: rgba(194,141,69,.34);

  --sp-shadow:
    0 18px 50px rgba(47,34,25,.09);

  --sp-shadow-strong:
    0 24px 65px rgba(37,25,18,.16);

  --sp-radius: 22px;
}


/* ============================================================
   PAGE
   ============================================================ */

.sp-cart-page,
.sp-cart-page *,
.sp-cart-page *::before,
.sp-cart-page *::after {
  box-sizing: border-box;
}

.sp-cart-page {
  width: min(
    1280px,
    calc(100% - 44px)
  );

  margin: 0 auto;

  padding:
    34px
    0
    80px;

  color:
    var(--sp-text);

  position: relative;
}


/* subtle decorative glow */

.sp-cart-page::before {
  content: "";

  position: absolute;

  width: 440px;
  height: 440px;

  top: -180px;
  left: -190px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(194,141,69,.13),
      rgba(194,141,69,0)
      70%
    );

  pointer-events: none;

  animation:
    spGlowFloat
    9s
    ease-in-out
    infinite alternate;
}


.sp-cart-page::after {
  content: "";

  position: absolute;

  width: 360px;
  height: 360px;

  right: -170px;
  top: 240px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(110,38,51,.09),
      transparent
      72%
    );

  pointer-events: none;

  animation:
    spGlowFloat2
    11s
    ease-in-out
    infinite alternate;
}


/* ============================================================
   HERO
   ============================================================ */

.sp-cart-hero {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0,1fr)
    auto;

  align-items: end;

  gap: 35px;

  margin-bottom: 28px;

  animation:
    spFadeSlide
    .52s
    ease
    both;
}


.sp-cart-eyebrow {
  margin: 0 0 7px;

  color:
    var(--sp-gold-dark);

  font-size: 10px;
  font-weight: 800;

  letter-spacing: .26em;

  text-transform: uppercase;
}


.sp-cart-title {
  position: relative;

  display: inline-block;

  margin: 0;

  color:
    var(--sp-black);

  font-size:
    clamp(
      34px,
      4.5vw,
      51px
    );

  line-height: 1;

  letter-spacing: -.045em;

  font-weight: 850;
}


.sp-cart-title::after {
  content: "";

  display: block;

  width: 72px;
  height: 3px;

  margin-top: 12px;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      var(--sp-gold),
      var(--sp-gold-2)
    );

  animation:
    spLineGrow
    .7s
    ease
    both;
}


.sp-cart-description {
  max-width: 620px;

  margin:
    11px
    0
    0;

  color:
    var(--sp-muted);

  font-size: 13px;

  line-height: 1.6;
}


/* ============================================================
   STEPS
   ============================================================ */

.sp-cart-steps {
  display: flex;

  align-items: center;

  gap: 8px;

  padding-bottom: 3px;
}


.sp-cart-step {
  display: flex;

  align-items: center;

  gap: 7px;

  color: #9a918b;

  font-size: 10px;
  font-weight: 650;

  transition:
    color .25s ease,
    transform .25s ease;
}


.sp-cart-step.is-active {
  color:
    var(--sp-black);

  font-weight: 800;
}


.sp-cart-step-number {
  display: grid;

  place-items: center;

  width: 29px;
  height: 29px;

  border:
    1px
    solid
    #d3c6b8;

  border-radius: 50%;

  background:
    #fffaf4;

  transition:
    all
    .28s
    ease;
}


.sp-cart-step.is-active
.sp-cart-step-number {
  border-color:
    var(--sp-gold);

  background:
    linear-gradient(
      145deg,
      var(--sp-gold-2),
      var(--sp-gold)
    );

  color: white;

  box-shadow:
    0 5px 15px
    rgba(194,141,69,.25);
}


.sp-cart-step-line {
  width: 26px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      #d9cec1,
      #c7b8a6
    );
}


/* ============================================================
   MAIN GRID
   ============================================================ */

.sp-cart-layout {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0,1.55fr)
    minmax(355px,.72fr);

  gap: 25px;

  align-items: start;
}


.sp-cart-left {
  min-width: 0;
}


.sp-cart-sidebar {
  position: sticky;

  top: 160px;

  display: block;
}


/* ============================================================
   PANELS
   ============================================================ */

.sp-cart-panel {
  overflow: hidden;

  border:
    1px
    solid
    var(--sp-border);

  border-radius:
    var(--sp-radius);

  background:
    rgba(255,250,243,.94);

  box-shadow:
    var(--sp-shadow);

  backdrop-filter:
    blur(16px);

  -webkit-backdrop-filter:
    blur(16px);

  transition:
    transform .28s ease,
    box-shadow .28s ease,
    border-color .28s ease;
}


.sp-cart-panel:hover {
  border-color:
    #d5c3ad;

  box-shadow:
    var(--sp-shadow-strong);
}


.sp-cart-panel-head {
  display: flex;

  justify-content: space-between;
  align-items: center;

  gap: 15px;

  padding:
    20px
    23px;

  border-bottom:
    1px
    solid
    var(--sp-border);

  background:
    linear-gradient(
      110deg,
      #fffaf3,
      #f8f0e7
    );
}


.sp-cart-panel-title {
  margin: 0;

  color:
    var(--sp-black);

  font-size: 17px;

  font-weight: 800;
}


.sp-cart-count {
  display: grid;

  place-items: center;

  min-width: 31px;
  height: 29px;

  padding: 0 9px;

  border:
    1px
    solid
    var(--sp-border-gold);

  border-radius: 999px;

  color:
    var(--sp-gold-dark);

  background:
    linear-gradient(
      145deg,
      rgba(194,141,69,.16),
      rgba(215,173,105,.08)
    );

  font-size: 11px;

  font-weight: 850;

  animation:
    spCountPulse
    .4s
    ease;
}


/* ============================================================
   PRODUCT ITEMS
   ============================================================ */

.sp-cart-items {
  display: grid;
}


.sp-cart-item {
  position: relative;

  display: grid;

  grid-template-columns:
    110px
    minmax(0,1fr)
    auto;

  gap: 20px;

  align-items: center;

  padding:
    21px
    23px;

  border-bottom:
    1px
    solid
    #e8dfd4;

  background:
    rgba(255,255,255,.46);

  transition:
    background .25s ease,
    transform .25s ease,
    box-shadow .25s ease,
    opacity .22s ease;

  animation:
    spProductEnter
    .42s
    ease
    both;
}


.sp-cart-item:last-child {
  border-bottom: 0;
}


.sp-cart-item::before {
  content: "";

  position: absolute;

  left: 0;
  top: 15%;

  width: 3px;
  height: 70%;

  border-radius:
    0
    4px
    4px
    0;

  background:
    linear-gradient(
      180deg,
      transparent,
      var(--sp-gold),
      transparent
    );

  opacity: 0;

  transition:
    opacity .25s ease;
}


.sp-cart-item:hover {
  background:
    linear-gradient(
      100deg,
      #fffdf9,
      #fbf5ed
    );
}


.sp-cart-item:hover::before {
  opacity: 1;
}


.sp-cart-item.is-removing {
  opacity: 0;

  transform:
    translateX(-16px);
}


/* ============================================================
   PRODUCT IMAGE
   ============================================================ */

.sp-cart-image {
  position: relative;

  width: 110px;

  aspect-ratio: 1;

  overflow: hidden;

  display: grid;

  place-items: center;

  border:
    1px
    solid
    #eadfd2;

  border-radius: 17px;

  background: white;

  box-shadow:
    0 8px 20px
    rgba(50,36,25,.055);
}


.sp-cart-image::after {
  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  border-radius: inherit;

  box-shadow:
    inset
    0
    0
    0
    1px
    rgba(255,255,255,.65);
}


.sp-cart-image img {
  width: 100%;
  height: 100%;

  object-fit: contain;

  display: block;

  padding: 7px;

  transition:
    transform .35s ease;
}


.sp-cart-item:hover
.sp-cart-image img {
  transform:
    scale(1.055);
}


/* ============================================================
   PRODUCT TEXT
   ============================================================ */

.sp-cart-brand {
  margin-bottom: 5px;

  color:
    var(--sp-gold-dark);

  font-size: 9px;

  font-weight: 850;

  letter-spacing: .14em;

  text-transform: uppercase;
}


.sp-cart-product-name {
  margin:
    0
    0
    6px;

  color:
    var(--sp-black);

  font-size: 15px;

  font-weight: 790;

  line-height: 1.38;
}


.sp-cart-sku {
  color:
    #938981;

  font-size: 9px;
}


.sp-cart-item-actions {
  display: flex;

  align-items: center;

  gap: 13px;

  margin-top: 14px;
}


/* ============================================================
   QUANTITY CONTROL
   ============================================================ */

.sp-qty {
  display: grid;

  grid-template-columns:
    35px
    39px
    35px;

  height: 36px;

  overflow: hidden;

  border:
    1px
    solid
    #d5c7b6;

  border-radius: 12px;

  background:
    #fff;

  box-shadow:
    inset
    0
    1px
    1px
    rgba(0,0,0,.02);
}


.sp-qty button {
  appearance: none;

  border: 0;

  background:
    transparent;

  color:
    var(--sp-black);

  cursor: pointer;

  font-size: 16px;

  transition:
    color .16s ease,
    background .16s ease,
    transform .15s ease;
}


.sp-qty button:hover {
  color:
    var(--sp-gold-dark);

  background:
    var(--sp-gold-soft);

  transform:
    scale(1.08);
}


.sp-qty-value {
  display: grid;

  place-items: center;

  color:
    var(--sp-black);

  font-size: 12px;

  font-weight: 850;

  border-left:
    1px
    solid
    #eee5db;

  border-right:
    1px
    solid
    #eee5db;
}


.sp-remove {
  appearance: none;

  border: 0;

  background:
    transparent;

  color:
    #948980;

  cursor: pointer;

  font: inherit;

  font-size: 10px;

  transition:
    color .18s ease,
    transform .18s ease;
}


.sp-remove:hover {
  color:
    var(--sp-wine);

  transform:
    translateX(2px);
}


/* ============================================================
   PRICES
   ============================================================ */

.sp-cart-price {
  min-width: 103px;

  text-align: right;
}


.sp-cart-price-total {
  display: block;

  color:
    var(--sp-black);

  font-size: 18px;

  font-weight: 850;

  letter-spacing: -.025em;
}


.sp-cart-price-unit {
  display: block;

  margin-top: 5px;

  color:
    #978c84;

  font-size: 9px;
}


/* ============================================================
   SUMMARY
   ============================================================ */

.sp-summary {
  overflow: visible;

  padding:
    24px;
}


.sp-summary h2 {
  margin:
    0
    0
    18px;

  color:
    var(--sp-black);

  font-size: 20px;

  font-weight: 850;
}


.sp-summary-line {
  display: flex;

  justify-content: space-between;
  align-items: center;

  gap: 15px;

  padding:
    8px
    0;

  color:
    var(--sp-black);

  font-size: 11px;
}


.sp-summary-line span:first-child {
  color:
    var(--sp-muted);
}


.sp-summary-line strong {
  color:
    var(--sp-black);

  font-weight: 800;
}


.sp-summary-divider {
  height: 1px;

  margin:
    13px
    0;

  background:
    linear-gradient(
      90deg,
      transparent,
      #ddd0c0,
      transparent
    );
}


.sp-summary-total {
  display: flex;

  justify-content: space-between;
  align-items: flex-end;

  gap: 18px;

  padding:
    7px
    0
    16px;
}


.sp-summary-total-label {
  color:
    var(--sp-black);

  font-size: 12px;

  font-weight: 800;
}


.sp-summary-total-value {
  color:
    var(--sp-black);

  font-size: 30px;

  font-weight: 900;

  line-height: 1;

  letter-spacing: -.045em;

  background:
    linear-gradient(
      90deg,
      var(--sp-black),
      var(--sp-gold-dark)
    );

  -webkit-background-clip: text;

  -webkit-text-fill-color:
    transparent;

  background-clip: text;
}


.sp-summary-note {
  margin:
    0
    0
    17px;

  padding:
    10px
    12px;

  border-radius: 10px;

  color:
    var(--sp-muted);

  background:
    #f7f0e8;

  font-size: 9px;

  line-height: 1.55;
}


/* ============================================================
   PAYMENT AREA
   ============================================================ */

.sp-payment-inline,
.sp-summary > .sp-payment-box {
  margin:
    17px
    -24px
    18px;

  padding:
    20px
    24px;

  border: 0;

  border-top:
    1px
    solid
    var(--sp-border);

  border-bottom:
    1px
    solid
    var(--sp-border);

  border-radius: 0;

  background:
    linear-gradient(
      145deg,
      #f8f1e8,
      #f3eade
    );

  box-shadow: none;
}


.sp-payment-box h3 {
  margin: 0;

  color:
    var(--sp-black);

  font-size: 14px;

  font-weight: 850;
}


.sp-payment-box-intro {
  margin:
    5px
    0
    13px;

  color:
    var(--sp-muted);

  font-size: 9px;

  line-height: 1.5;
}


.sp-payment-list {
  display: grid;

  gap: 8px;
}


/* ============================================================
   PAYMENT CARD
   ============================================================ */

.sp-payment-card {
  overflow: hidden;

  border:
    1px
    solid
    #ddd0c0;

  border-radius: 12px;

  background:
    rgba(255,255,255,.82);

  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    background .22s ease;
}


.sp-payment-card:hover {
  transform:
    translateY(-2px);

  border-color:
    #cbb499;

  box-shadow:
    0 9px 22px
    rgba(47,33,23,.07);
}


.sp-payment-card.is-active {
  border-color:
    var(--sp-gold);

  background:
    linear-gradient(
      120deg,
      #fffdf8,
      #fbf2e5
    );

  box-shadow:
    0 0 0 2px
    rgba(194,141,69,.11),
    0 10px 25px
    rgba(47,33,23,.06);
}


.sp-payment-select {
  display: flex;

  align-items: center;

  gap: 10px;

  width: 100%;

  padding:
    12px
    13px;

  cursor: pointer;
}


.sp-payment-select input {
  position: absolute;

  opacity: 0;
}


.sp-payment-radio {
  position: relative;

  width: 18px;
  height: 18px;

  flex:
    0
    0
    18px;

  border:
    2px
    solid
    #c2b09d;

  border-radius: 50%;

  transition:
    all
    .22s
    ease;
}


.sp-payment-card.is-active
.sp-payment-radio {
  border-color:
    var(--sp-gold);

  transform:
    scale(1.05);
}


.sp-payment-card.is-active
.sp-payment-radio::after {
  content: "";

  position: absolute;

  inset: 3px;

  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      var(--sp-gold-2),
      var(--sp-gold)
    );

  animation:
    spPaymentPop
    .24s
    ease;
}


.sp-payment-name {
  flex: 1;

  color:
    var(--sp-black);

  font-size: 11px;

  font-weight: 800;
}


.sp-payment-check {
  color:
    var(--sp-gold-dark);

  opacity: 0;

  transform:
    translateX(-4px)
    scale(.6);

  transition:
    all
    .2s
    ease;
}


.sp-payment-card.is-active
.sp-payment-check {
  opacity: 1;

  transform:
    translateX(0)
    scale(1);
}


/* ============================================================
   PAYMENT DETAILS
   ============================================================ */

.sp-payment-details {
  max-height: 0;

  overflow: hidden;

  opacity: 0;

  padding:
    0
    13px;

  transform:
    translateY(-7px);

  transition:
    max-height .38s ease,
    opacity .28s ease,
    transform .3s ease,
    padding .3s ease;
}


.sp-payment-card.is-active
.sp-payment-details {
  max-height: 380px;

  opacity: 1;

  padding:
    0
    13px
    13px;

  transform:
    translateY(0);
}


.sp-payment-detail-row {
  display: grid;

  grid-template-columns:
    70px
    minmax(0,1fr)
    auto;

  gap: 7px;

  align-items: center;

  min-height: 38px;

  border-top:
    1px
    solid
    #eee3d6;

  color:
    var(--sp-black);

  font-size: 9px;
}


.sp-payment-detail-label {
  color:
    var(--sp-muted);
}


.sp-payment-detail-value {
  overflow-wrap: anywhere;

  font-weight: 750;
}


.sp-payment-copy,
.sp-payment-open {
  appearance: none;

  border:
    1px
    solid
    #d5c3ae;

  border-radius: 7px;

  background:
    #fffaf2;

  color:
    var(--sp-black);

  padding:
    5px
    7px;

  cursor: pointer;

  font: inherit;

  font-size: 8px;

  font-weight: 750;

  text-decoration: none;

  transition:
    all
    .18s
    ease;
}


.sp-payment-copy:hover,
.sp-payment-open:hover {
  border-color:
    var(--sp-gold);

  background:
    var(--sp-gold-soft);

  color:
    var(--sp-gold-dark);

  transform:
    translateY(-1px);
}


.sp-payment-info {
  margin:
    9px
    0
    0;

  padding:
    8px
    9px;

  border-radius: 8px;

  color:
    var(--sp-muted);

  background:
    rgba(194,141,69,.07);

  font-size: 8px;

  line-height: 1.5;
}


/* ============================================================
   CHECKOUT CTA
   ============================================================ */

.sp-checkout-button {
  position: relative;

  width: 100%;

  min-height: 53px;

  overflow: hidden;

  appearance: none;

  border:
    1px
    solid
    var(--sp-black);

  border-radius: 13px;

  background:
    linear-gradient(
      120deg,
      #181413,
      #2a211d
    );

  color:
    white;

  cursor: pointer;

  font: inherit;

  font-size: 11px;

  font-weight: 850;

  letter-spacing: .04em;

  text-transform: uppercase;

  box-shadow:
    0 10px 24px
    rgba(30,22,18,.16);

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}


.sp-checkout-button::before {
  content: "";

  position: absolute;

  top: 0;
  left: -80%;

  width: 42%;
  height: 100%;

  transform:
    skewX(-24deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(215,173,105,.5),
      transparent
    );

  transition:
    left
    .6s
    ease;
}


.sp-checkout-button:hover {
  transform:
    translateY(-2px);

  border-color:
    var(--sp-gold);

  box-shadow:
    0 15px 34px
    rgba(30,22,18,.23);
}


.sp-checkout-button:hover::before {
  left: 145%;
}


.sp-checkout-button:active {
  transform:
    translateY(0)
    scale(.99);
}


.sp-continue {
  display: block;

  margin-top: 13px;

  color:
    var(--sp-muted);

  text-align: center;

  text-decoration: none;

  font-size: 9px;

  transition:
    color .18s ease,
    transform .18s ease;
}


.sp-continue:hover {
  color:
    var(--sp-gold-dark);

  transform:
    translateX(-2px);
}


/* ============================================================
   EMPTY CART
   ============================================================ */

.sp-cart-empty {
  padding:
    70px
    30px;

  text-align: center;
}


.sp-cart-empty-icon {
  display: grid;

  place-items: center;

  width: 68px;
  height: 68px;

  margin:
    0
    auto
    17px;

  border:
    1px
    solid
    var(--sp-border-gold);

  border-radius: 50%;

  color:
    var(--sp-gold-dark);

  background:
    var(--sp-gold-soft);

  font-size: 24px;

  animation:
    spSoftPulse
    2.4s
    ease-in-out
    infinite;
}


.sp-cart-empty h2 {
  color:
    var(--sp-black);
}


.sp-cart-empty p {
  color:
    var(--sp-muted);
}


/* ============================================================
   TOAST / UNDO
   ============================================================ */

.sp-cart-toast {
  position: fixed;

  left: 50%;
  bottom: 24px;

  z-index: 99999;

  display: flex;

  align-items: center;

  gap: 18px;

  max-width:
    calc(100vw - 30px);

  padding:
    12px
    16px;

  border:
    1px
    solid
    rgba(194,141,69,.34);

  border-radius: 12px;

  background:
    linear-gradient(
      120deg,
      #181413,
      #2a211d
    );

  color:
    white;

  box-shadow:
    0 18px 45px
    rgba(0,0,0,.3);

  transform:
    translate(-50%,30px);

  opacity: 0;

  pointer-events: none;

  transition:
    opacity .25s ease,
    transform .25s ease;

  font-size: 10px;
}


.sp-cart-toast.is-visible {
  opacity: 1;

  transform:
    translate(-50%,0);

  pointer-events: auto;
}


.sp-cart-toast button {
  appearance: none;

  border: 0;

  background: none;

  color:
    var(--sp-gold-2);

  cursor: pointer;

  font: inherit;

  font-weight: 850;
}


/* ============================================================
   KEYFRAMES
   ============================================================ */

@keyframes spFadeSlide {

  from {
    opacity: 0;

    transform:
      translateY(12px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }

}


@keyframes spProductEnter {

  from {
    opacity: 0;

    transform:
      translateX(-8px);
  }

  to {
    opacity: 1;

    transform:
      translateX(0);
  }

}


@keyframes spPaymentPop {

  0% {
    transform:
      scale(.2);
  }

  65% {
    transform:
      scale(1.15);
  }

  100% {
    transform:
      scale(1);
  }

}


@keyframes spLineGrow {

  from {
    width: 0;

    opacity: 0;
  }

  to {
    width: 72px;

    opacity: 1;
  }

}


@keyframes spGlowFloat {

  from {
    transform:
      translate3d(0,0,0);
  }

  to {
    transform:
      translate3d(
        40px,
        25px,
        0
      );
  }

}


@keyframes spGlowFloat2 {

  from {
    transform:
      translate3d(0,0,0);
  }

  to {
    transform:
      translate3d(
        -28px,
        35px,
        0
      );
  }

}


@keyframes spCountPulse {

  0% {
    transform:
      scale(.8);
  }

  65% {
    transform:
      scale(1.08);
  }

  100% {
    transform:
      scale(1);
  }

}


@keyframes spSoftPulse {

  0%,
  100% {
    box-shadow:
      0
      0
      0
      0
      rgba(194,141,69,.12);
  }

  50% {
    box-shadow:
      0
      0
      0
      12px
      rgba(194,141,69,0);
  }

}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1000px) {

  .sp-cart-layout {
    grid-template-columns:
      1fr;
  }

  .sp-cart-sidebar {
    position: static;
  }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 700px) {

  .sp-cart-page {
    width:
      calc(100% - 22px);

    padding-top: 25px;
  }


  .sp-cart-hero {
    display: block;
  }


  .sp-cart-steps {
    display: none;
  }


  .sp-cart-title {
    font-size:
      37px;
  }


  .sp-cart-description {
    font-size:
      12px;
  }


  .sp-cart-item {
    grid-template-columns:
      84px
      minmax(0,1fr);

    gap: 14px;

    padding:
      16px;
  }


  .sp-cart-image {
    width: 84px;
  }


  .sp-cart-price {
    grid-column: 2;

    min-width: 0;

    text-align: left;
  }


  .sp-summary {
    padding: 20px;
  }


  .sp-payment-inline,
  .sp-summary > .sp-payment-box {
    margin:
      17px
      -20px;

    padding:
      18px
      20px;
  }


  .sp-payment-detail-row {
    grid-template-columns:
      1fr
      auto;

    padding:
      6px
      0;
  }


  .sp-payment-detail-label {
    grid-column:
      1
      /
      -1;
  }

}


/* ============================================================
   ACCESSIBILITY
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  .sp-cart-page *,
  .sp-cart-page *::before,
  .sp-cart-page *::after {

    animation:
      none !important;

    transition:
      none !important;

  }

}



/* ============================================================
   CART V5 — PAYMENT POSITION / READABILITY FIX
   ============================================================ */

.sp-cart-page {
  overflow-x: clip;
}


/* Payment fica integrado no resumo */

.sp-summary > .sp-payment-box {
  width: auto;

  margin:
    20px
    -24px
    20px;

  padding:
    21px
    24px;

  border: 0;

  border-top:
    1px
    solid
    var(--sp-border);

  border-bottom:
    1px
    solid
    var(--sp-border);

  border-radius: 0;

  background:
    linear-gradient(
      135deg,
      #f8f1e8,
      #f2e7da
    );

  box-shadow: none;
}


/* Título do pagamento */

.sp-payment-box h3 {
  margin:
    0
    0
    5px;

  color:
    var(--sp-black);

  font-size: 16px;

  line-height: 1.25;

  font-weight: 850;
}


.sp-payment-box-intro {
  margin:
    0
    0
    15px;

  color:
    #6f655e;

  font-size: 10.5px;

  line-height: 1.55;
}


/* Métodos */

.sp-payment-list {
  width: 100%;

  display: grid;

  gap: 9px;
}


.sp-payment-card {
  width: 100%;
}


.sp-payment-select {
  min-height: 48px;

  padding:
    13px
    14px;
}


.sp-payment-name {
  color:
    #211b18;

  font-size: 12px;

  line-height: 1.35;

  font-weight: 800;
}


/* Dados — duas linhas para não apertar nomes/IBAN */

.sp-payment-detail-row {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  grid-template-areas:
    "label action"
    "value action";

  column-gap: 12px;

  align-items: center;

  min-height: 57px;

  padding:
    9px
    0;

  border-top:
    1px
    solid
    #e8dccd;

  color:
    #211b18;
}


.sp-payment-detail-label {
  grid-area: label;

  color:
    #82766e;

  font-size: 9px;

  line-height: 1.2;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: .035em;
}


.sp-payment-detail-value {
  grid-area: value;

  min-width: 0;

  margin-top: 3px;

  color:
    #211b18;

  font-size: 10.5px;

  line-height: 1.35;

  font-weight: 760;

  overflow-wrap: anywhere;

  word-break: normal;
}


.sp-payment-copy,
.sp-payment-open {
  grid-area: action;

  align-self: center;

  min-width: 48px;

  padding:
    7px
    9px;

  border:
    1px
    solid
    #cfb99e;

  border-radius: 8px;

  background:
    #fffaf3;

  color:
    #473526;

  font-size: 9px;

  font-weight: 800;
}


.sp-payment-copy:hover,
.sp-payment-open:hover {
  border-color:
    var(--sp-gold);

  background:
    rgba(194,141,69,.13);

  color:
    var(--sp-gold-dark);
}


.sp-payment-info {
  margin:
    11px
    0
    0;

  padding:
    10px
    11px;

  border-radius: 9px;

  background:
    rgba(194,141,69,.09);

  color:
    #75695f;

  font-size: 9.5px;

  line-height: 1.5;
}


/* Mais separação antes do CTA */

.sp-checkout-button {
  margin-top: 2px;
}


/* Mobile */

@media (max-width: 700px) {

  .sp-summary > .sp-payment-box {
    margin:
      18px
      -20px;

    padding:
      19px
      20px;
  }


  .sp-payment-name {
    font-size: 11.5px;
  }


  .sp-payment-detail-value {
    font-size: 10px;
  }

}