.shop-cart-layer {
  background:
    linear-gradient(145deg, rgba(6, 5, 8, .24), rgba(52, 5, 18, .3)),
    url("assets/images/hero-dj-background.png") center / cover no-repeat fixed !important;
  isolation: isolate;
}

.shop-cart-layer::before {
  background: linear-gradient(115deg, rgba(255, 255, 255, .045), transparent 28%, rgba(255, 48, 78, .055) 62%, transparent);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.shop-cart-backdrop {
  display: none;
}

.shop-cart-panel {
  background:
    linear-gradient(145deg, rgba(5, 4, 7, .22), rgba(65, 4, 21, .25)),
    url("assets/images/hero-dj-background.png") center / cover no-repeat fixed !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #fff !important;
  display: grid !important;
  gap: 20px;
  grid-template-columns: minmax(0, 1fr) 360px;
  grid-template-rows: auto 1fr;
  height: 100% !important;
  margin: 0 !important;
  max-width: none !important;
  overflow: auto !important;
  padding: 0 26px 28px;
  width: 100% !important;
  z-index: 1;
}

.shop-cart-panel > header {
  align-items: center;
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  backdrop-filter: blur(22px) saturate(145%);
  background: linear-gradient(110deg, rgba(16, 14, 18, .52), rgba(91, 10, 31, .42)) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .12) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .25);
  display: flex;
  grid-column: 1 / -1;
  justify-content: space-between;
  margin: 0 -26px;
  padding: 18px 27px !important;
  position: sticky !important;
  top: 0;
  z-index: 20;
}

.shop-cart-panel > header span {
  color: #ff526b !important;
  font-size: .61rem !important;
  letter-spacing: .16em !important;
}

.shop-cart-panel > header h3 {
  color: #fff !important;
  font-size: 1.55rem !important;
  letter-spacing: -.035em;
  margin: 5px 0 0 !important;
}

.shop-cart-panel > header > button {
  background: rgba(255, 255, 255, .08) !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-size: .68rem !important;
  font-weight: 850;
  height: auto !important;
  min-height: 42px;
  padding: 0 17px;
  width: auto !important;
}

.shop-cart-panel > header > button:hover {
  background: rgba(239, 45, 71, .18) !important;
  border-color: rgba(255, 82, 107, .55) !important;
  transform: none !important;
}

.shop-cart-items {
  align-content: start;
  display: grid;
  gap: 13px !important;
  grid-column: 1;
  padding: 4px 0 0 !important;
}

.shop-cart-items article {
  align-items: center;
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
  background: linear-gradient(135deg, rgba(47, 24, 34, .44), rgba(15, 13, 17, .52)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .1), 0 18px 38px rgba(0, 0, 0, .2);
  border: 1px solid rgba(255, 255, 255, .13) !important;
  border-radius: 17px !important;
  display: grid !important;
  gap: 16px !important;
  grid-template-columns: 72px minmax(0, 1fr) auto !important;
  min-height: 112px;
  padding: 18px !important;
}

.shop-cart-items article > div,
.shop-cart-items article > div img {
  background: linear-gradient(145deg, #781029, #17131a) !important;
  border-radius: 13px !important;
  height: 72px !important;
  object-fit: contain;
  width: 72px !important;
}

.shop-cart-items section strong {
  color: #fff;
  font-size: .83rem;
}

.shop-cart-items section small {
  color: #b9afb4 !important;
}

.shop-cart-items article em {
  color: #ff536c;
  font-size: .88rem !important;
}

.shop-cart-items footer button {
  background: rgba(255, 255, 255, .08) !important;
  border-color: rgba(255, 255, 255, .14) !important;
  color: #fff !important;
}

.shop-cart-items footer button:last-child {
  background: rgba(220, 22, 55, .15) !important;
  border-color: rgba(255, 72, 99, .34) !important;
  color: #ff7a8e !important;
}

.shop-checkout-form {
  align-self: start;
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  background: linear-gradient(145deg, rgba(45, 25, 34, .48), rgba(16, 15, 18, .56)) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  border-radius: 17px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, .28);
  color: #fff;
  grid-column: 2;
  margin: 4px 0 0 !important;
  padding: 18px !important;
  position: sticky;
  top: 99px;
}

.shop-cart-summary {
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
  background: linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025)) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  border-radius: 16px !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 15px 34px rgba(0, 0, 0, .16) !important;
  overflow: hidden;
  padding: 18px !important;
}

.shop-cart-summary::before {
  color: #fff;
  content: "Récapitulatif de la commande";
  display: block;
  font-size: .92rem;
  font-weight: 900;
  letter-spacing: -.02em;
  margin-bottom: 12px;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.shop-cart-summary > div {
  align-items: center;
  color: #bdb3b8 !important;
  display: flex;
  font-size: .72rem;
  justify-content: space-between;
  padding: 10px 2px;
}

.shop-cart-summary > div strong {
  color: #fff !important;
  font-size: .86rem !important;
}

.shop-cart-summary .shop-cart-total {
  background: linear-gradient(115deg, rgba(112, 11, 38, .34), rgba(239, 43, 69, .1));
  border: 1px solid rgba(255, 79, 102, .19);
  border-radius: 12px;
  margin-top: 8px !important;
  padding: 14px !important;
}

.shop-cart-summary .shop-cart-total strong {
  color: #ff536c !important;
  font-size: 1.55rem !important;
}

.shop-address-toggle {
  align-items: center;
  background: linear-gradient(135deg, #ef3349, #aa0d2b);
  border: 0;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(179, 15, 45, .2);
  color: #fff;
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: .71rem;
  font-weight: 900;
  gap: 9px;
  justify-content: center;
  min-height: 48px;
  margin-top: 14px;
  padding: 12px;
  width: 100%;
}

.shop-address-toggle svg {
  fill: none;
  height: 21px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: 21px;
}

.shop-checkout-steps {
  align-items: center;
  display: none;
  gap: 12px;
  margin: 0 0 20px;
}

.shop-checkout-steps > span {
  align-items: center;
  color: #9aa3b3;
  display: flex;
  font-size: .65rem;
  font-weight: 850;
  gap: 9px;
  white-space: nowrap;
}

.shop-checkout-steps > span b {
  align-items: center;
  background: #e5eaf2;
  border-radius: 50%;
  display: flex;
  height: 30px;
  justify-content: center;
  width: 30px;
}

.shop-checkout-steps > span.is-complete b {
  background: #fbe7ea;
  color: #ae0d2c;
}

.shop-checkout-steps > span.is-active {
  color: #a70e2b;
}

.shop-checkout-steps > span.is-active b {
  background: linear-gradient(135deg, #ef3349, #a90d2b);
  color: #fff;
}

.shop-checkout-steps > i {
  background: #dfe4ec;
  flex: 1;
  height: 1px;
}

.shop-checkout-form:not(.is-address-open) > h4,
.shop-checkout-form:not(.is-address-open) > .shop-checkout-fields,
.shop-checkout-form:not(.is-address-open) > .shop-automatic-delivery,
.shop-checkout-form:not(.is-address-open) > .shop-checkout-message,
.shop-checkout-form:not(.is-address-open) > .shop-checkout-submit,
.shop-checkout-form:not(.is-address-open) > small {
  display: none !important;
}

.shop-checkout-form.is-address-open .shop-address-toggle {
  background: #f5f6f9;
  box-shadow: none;
  color: #33394a;
  margin-bottom: 18px;
}

.shop-cart-panel.is-address-step {
  background:
    linear-gradient(145deg, rgba(5, 4, 7, .22), rgba(65, 4, 21, .25)),
    url("assets/images/hero-dj-background.png") center / cover no-repeat fixed !important;
  grid-template-columns: 1fr;
}

.shop-cart-panel.is-address-step > header {
  background: linear-gradient(120deg, rgba(21, 17, 23, .5), rgba(71, 7, 25, .42)) !important;
  border-bottom-color: rgba(255, 255, 255, .09) !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, .28) !important;
}

.shop-cart-panel.is-address-step > header span {
  color: #ff5366 !important;
}

.shop-cart-panel.is-address-step > header h3 {
  color: #fff !important;
}

.shop-cart-panel.is-address-step > header small {
  color: rgba(255, 255, 255, .5) !important;
  display: block;
  font-size: .62rem;
  margin-top: 5px;
}

.shop-cart-panel.is-address-step > header > button {
  background: rgba(255, 255, 255, .06) !important;
  border-color: rgba(255, 255, 255, .13) !important;
  color: #fff !important;
}

.shop-cart-panel.is-address-step .shop-cart-items,
.shop-cart-panel.is-address-step .shop-cart-empty {
  display: none !important;
}

.shop-cart-panel.is-address-step .shop-checkout-form {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  grid-column: 1;
  justify-self: stretch;
  margin: 24px auto 34px !important;
  max-width: 1080px;
  padding: 0 !important;
  position: static;
  width: calc(100% - 24px);
}

.shop-cart-panel.is-address-step .shop-checkout-steps {
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  background: rgba(18, 14, 18, .44);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 15px;
  display: flex;
  margin-bottom: 16px;
  padding: 14px 18px;
}

.shop-cart-panel.is-address-step .shop-cart-summary,
.shop-cart-panel.is-address-step .shop-delivery-price-notice,
.shop-cart-panel.is-address-step .shop-address-toggle {
  display: none !important;
}

.shop-cart-panel.is-address-step .shop-checkout-form > h4 {
  align-items: flex-start !important;
  -webkit-backdrop-filter: blur(20px) saturate(145%);
  backdrop-filter: blur(20px) saturate(145%);
  background: linear-gradient(115deg, rgba(127, 16, 41, .64), rgba(187, 21, 51, .58) 62%, rgba(34, 19, 26, .58));
  border: 1px solid rgba(255, 255, 255, .12);
  border-bottom: 0;
  border-radius: 17px 17px 0 0;
  color: #fff !important;
  display: flex;
  flex-direction: column;
  font-size: 1.05rem !important;
  gap: 5px !important;
  margin: 0 !important;
  padding: 22px 24px;
}

.shop-cart-panel.is-address-step .shop-checkout-form > h4::before {
  display: none;
}

.shop-cart-panel.is-address-step .shop-checkout-form > h4 small {
  color: rgba(255, 255, 255, .65);
  display: block;
  font-size: .61rem;
  font-weight: 600;
}

.shop-cart-panel.is-address-step .shop-checkout-fields {
  -webkit-backdrop-filter: blur(22px) saturate(135%);
  backdrop-filter: blur(22px) saturate(135%);
  background: linear-gradient(145deg, rgba(34, 24, 30, .5), rgba(14, 13, 16, .58));
  border-left: 1px solid rgba(255, 255, 255, .12);
  border-right: 1px solid rgba(255, 255, 255, .12);
  gap: 15px;
  padding: 24px;
}

.shop-cart-panel.is-address-step .shop-checkout-fields label,
.shop-cart-panel.is-address-step .shop-checkout-country {
  color: #d9cfd3 !important;
  font-size: .61rem !important;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.shop-cart-panel.is-address-step .shop-checkout-fields input,
.shop-cart-panel.is-address-step .shop-checkout-country input {
  background: rgba(255, 255, 255, .065) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  border-radius: 11px !important;
  color: #fff !important;
  font-size: .78rem;
  font-weight: 700;
  min-height: 48px;
  padding: 13px 14px !important;
}

.shop-cart-panel.is-address-step .shop-checkout-fields input:focus {
  background: rgba(255, 255, 255, .1) !important;
  border-color: #d82943 !important;
  box-shadow: 0 0 0 4px rgba(216, 41, 67, .09) !important;
}

.shop-checkout-country {
  background: #fff;
  border-left: 1px solid #dfe4ec;
  border-right: 1px solid #dfe4ec;
  color: #555d6d;
  display: none;
  font-size: .66rem;
  font-weight: 800;
  gap: 6px;
  padding: 0 20px 20px;
}

.shop-cart-panel.is-address-step .shop-checkout-country {
  display: grid;
  -webkit-backdrop-filter: blur(22px) saturate(135%);
  backdrop-filter: blur(22px) saturate(135%);
  background: linear-gradient(145deg, rgba(34, 24, 30, .5), rgba(14, 13, 16, .58));
  border-left-color: rgba(255, 255, 255, .12);
  border-right-color: rgba(255, 255, 255, .12);
  padding: 0 24px 24px;
}

.shop-checkout-country input {
  background: #f1f3f7;
  border: 1px solid #dce1e9;
  border-radius: 10px;
  color: #606879;
  min-height: 44px;
  padding: 12px;
}

.shop-cart-panel.is-address-step .shop-automatic-delivery {
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
  background: rgba(19, 147, 94, .13) !important;
  border-color: rgba(72, 224, 160, .2) !important;
  border-radius: 0 !important;
  color: #8aebbf !important;
  margin: 0 !important;
  padding: 15px 24px !important;
}

.shop-cart-panel.is-address-step .shop-checkout-message {
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
  background: rgba(14, 13, 16, .72);
  margin: 0;
  min-height: 0;
  padding: 12px 20px;
}

.shop-cart-panel.is-address-step .shop-checkout-submit {
  background: linear-gradient(135deg, #ef3349, #a80d2b) !important;
  border-radius: 0 0 14px 14px !important;
  box-shadow: 0 12px 30px rgba(175, 13, 43, .24) !important;
  margin: 0 !important;
  min-height: 56px;
}

.shop-cart-panel.is-address-step .shop-checkout-form > small {
  color: #7f8796 !important;
  margin-top: 11px;
}

.shop-checkout-form h4 {
  color: #171b28 !important;
}

.shop-checkout-fields label {
  color: #555d6d !important;
}

.shop-checkout-fields input {
  background: #f8f9fb !important;
  border-color: #dce1e9 !important;
  color: #171b28 !important;
}

.shop-automatic-delivery {
  background: #fff7f8 !important;
  border-color: #f3d5da !important;
  color: #8f1930 !important;
}

.shop-cart-empty {
  color: #171b28;
  grid-column: 1 / -1;
}

.shop-cart-empty p {
  color: #7d8493 !important;
}

@media (max-width: 900px) {
  .shop-cart-panel {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    padding: 0 16px 24px;
  }
  .shop-cart-panel > header { margin: 0 -16px; padding: 16px !important; }
  .shop-cart-items { grid-column: 1; }
  .shop-checkout-form { grid-column: 1; position: static; }
}

@media (max-width: 560px) {
  .shop-cart-panel > header h3 { font-size: 1.35rem !important; }
  .shop-cart-panel > header > button { font-size: .58rem !important; padding: 0 11px; }
  .shop-cart-items article { grid-template-columns: 62px minmax(0, 1fr) !important; padding: 13px !important; }
  .shop-cart-items article > div,
  .shop-cart-items article > div img { height: 62px !important; width: 62px !important; }
  .shop-cart-items article > em { grid-column: 2; justify-self: end; margin-top: -28px; }
  .shop-checkout-steps { gap: 6px; }
  .shop-checkout-steps > span { font-size: .54rem; gap: 5px; }
  .shop-checkout-steps > span b { height: 25px; width: 25px; }
  .shop-cart-panel.is-address-step .shop-checkout-fields { grid-template-columns: 1fr; }
  .shop-cart-panel.is-address-step .shop-checkout-fields .wide { grid-column: 1; }
}