/* Simple Peptide Side Cart — navy/orange tokens aligned with Simple Peptide shell.
   No Amino Club branding, emerald palette, points, or wallets. */

:root {
  --sp-msc-navy: #071226;
  --sp-msc-navy-2: #0d1c33;
  --sp-msc-orange: #f5823f;
  --sp-msc-paper: #f3f0e9;
  --sp-msc-white: #fffdfa;
  --sp-msc-muted: #526071;
  --sp-msc-line: rgba(7, 18, 38, 0.14);
  /* Above the LS sticky header (1200) and late-injected shopping widgets. */
  --sp-msc-z-drawer: 2147483000;
  --sp-msc-z-sticky: 140; /* below PDP .spm-sticky-purchase (150) */
}

/* Keep the payment funnel clear. The shopping-agent widget is rendered from a
   closed shadow root and otherwise sits over the mobile wallet/checkout controls. */
body.woocommerce-cart #ads-agent-host,
body.woocommerce-checkout #ads-agent-host {
  display: none !important;
}

.sp-msc[hidden] { display: none !important; }

.sp-msc__overlay {
  position: fixed;
  inset: 0;
  z-index: var(--sp-msc-z-drawer);
  background: rgba(7, 18, 38, 0.48);
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
}

.sp-msc.is-open .sp-msc__overlay {
  opacity: 1;
  pointer-events: auto;
}

.sp-msc__drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: calc(var(--sp-msc-z-drawer) + 1);
  display: flex;
  flex-direction: column;
  width: min(100vw, 400px);
  height: 100%;
  height: 100dvh;
  background: var(--sp-msc-white);
  color: var(--sp-msc-navy);
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.22);
  transform: translateX(105%);
  transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

.sp-msc.is-open .sp-msc__drawer {
  transform: translateX(0);
}

.sp-msc__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--sp-msc-line);
  background: var(--sp-msc-navy);
  color: #fff;
}

.sp-msc__title {
  margin: 0;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sp-msc__count:empty { display: none; }
.sp-msc__count:not(:empty)::before { content: "· "; }

.sp-msc__close {
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.sp-msc__body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 14px 20px;
}

.sp-msc__loading {
  padding: 40px 12px;
  text-align: center;
  color: var(--sp-msc-muted);
  font-size: 13px;
}

.sp-msc__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 52vh;
  padding: 24px 12px;
  text-align: center;
}

.sp-msc__empty-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 14px;
  border: 2px solid var(--sp-msc-line);
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--sp-msc-muted);
  font-size: 22px;
}

.sp-msc__empty-title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 800;
}

.sp-msc__empty-body {
  margin: 0 0 22px;
  max-width: 280px;
  color: var(--sp-msc-muted);
  font-size: 13px;
  line-height: 1.45;
}

.sp-msc__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sp-msc__item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--sp-msc-line);
  background: #fff;
}

.sp-msc__thumb {
  width: 72px;
  height: 72px;
  object-fit: cover;
  background: var(--sp-msc-paper);
}

.sp-msc__thumb-ph {
  width: 72px;
  height: 72px;
  background: var(--sp-msc-paper);
  border: 1px solid var(--sp-msc-line);
}

.sp-msc__item-main { min-width: 0; }

.sp-msc__item-name {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.3;
}

.sp-msc__item-name a {
  color: inherit;
  text-decoration: none;
}

.sp-msc__item-meta {
  margin: 0 0 8px;
  color: var(--sp-msc-muted);
  font-size: 11px;
}

.sp-msc__item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.sp-msc__stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(7, 18, 38, 0.25);
  background: #fff;
}

.sp-msc__stepper button {
  width: 36px;
  min-height: 36px;
  border: 0;
  background: transparent;
  color: var(--sp-msc-navy);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.sp-msc__stepper button:hover,
.sp-msc__stepper button:focus {
  background: var(--sp-msc-navy);
  color: #fff;
}

.sp-msc__stepper span {
  min-width: 28px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
}

.sp-msc__price {
  font-size: 13px;
  font-weight: 800;
}

.sp-msc__remove {
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sp-msc-muted);
  font-size: 11px;
  text-decoration: underline;
  cursor: pointer;
}

.sp-msc__footer {
  flex: 0 0 auto;
  padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--sp-msc-line);
  background: var(--sp-msc-paper);
}

.sp-msc__footer[hidden] { display: none !important; }

.sp-msc__coupon {
  margin: 0 0 12px;
  border: 1px solid var(--sp-msc-line);
  background: #fff;
}

.sp-msc__coupon summary {
  padding: 12px 14px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  list-style: none;
}

.sp-msc__coupon summary::-webkit-details-marker { display: none; }

.sp-msc__coupon-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 0 12px 12px;
}

.sp-msc__coupon-form input {
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid var(--sp-msc-line);
  border-radius: 0;
  background: #fff;
  font-size: 13px;
}

.sp-msc__coupon-form button {
  min-height: 42px;
  padding: 0 14px;
  border: 0;
  background: var(--sp-msc-navy);
  color: #fff;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.sp-msc__coupon-msg {
  margin: 0 12px 10px;
  color: #8a2a12;
  font-size: 12px;
}

.sp-msc__coupons {
  list-style: none;
  margin: 0 12px 10px;
  padding: 0;
  font-size: 12px;
}

.sp-msc__coupons li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
}

.sp-msc__coupons button {
  border: 0;
  background: none;
  color: var(--sp-msc-muted);
  text-decoration: underline;
  cursor: pointer;
  font-size: 11px;
}

.sp-msc__subtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 0 12px;
  font-size: 13px;
}

.sp-msc__subtotal strong {
  font-size: 18px;
  font-weight: 850;
}

.sp-msc__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 0 0 12px;
  color: var(--sp-msc-muted);
  font-size: 10px;
  line-height: 1.35;
}

.sp-msc__trust a {
  color: var(--sp-msc-navy);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sp-msc__trust[data-omit-ruo="1"] [data-sp-msc-trust-ruo] {
  display: none;
}

.sp-msc__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin: 0 0 8px;
  padding: 0 16px;
  border: 0;
  text-decoration: none !important;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  box-sizing: border-box;
}

.sp-msc__btn--primary {
  color: #fff !important;
  background: var(--sp-msc-orange);
}

.sp-msc__btn--secondary {
  color: var(--sp-msc-navy) !important;
  background: transparent;
  border: 1px solid rgba(7, 18, 38, 0.28) !important;
}

.sp-msc.is-busy .sp-msc__drawer { opacity: 0.72; pointer-events: none; }

body.sp-msc-open {
  overflow: hidden;
}

/* ——— Cart page: mobile card layout ——— */
@media (max-width: 760px) {
  body.woocommerce-cart .woocommerce-cart-form .shop_table thead {
    display: none;
  }

  body.woocommerce-cart .woocommerce-cart-form .shop_table,
  body.woocommerce-cart .woocommerce-cart-form .shop_table tbody,
  body.woocommerce-cart .woocommerce-cart-form .shop_table tr,
  body.woocommerce-cart .woocommerce-cart-form .shop_table td {
    display: block;
    width: 100% !important;
  }

  body.woocommerce-cart .woocommerce-cart-form .shop_table {
    border: 0;
    background: transparent;
  }

  body.woocommerce-cart .woocommerce-cart-form .cart_item {
    margin: 0 0 14px;
    padding: 14px;
    border: 1px solid var(--sp-msc-line);
    background: #fff;
  }

  body.woocommerce-cart .woocommerce-cart-form .cart_item td {
    padding: 6px 0 !important;
    border: 0 !important;
  }

  body.woocommerce-cart .woocommerce-cart-form .product-thumbnail img {
    width: 88px;
    height: auto;
    max-width: 88px;
  }

  body.woocommerce-cart .woocommerce-cart-form .product-name {
    font-size: 14px;
    font-weight: 750;
  }

  body.woocommerce-cart .woocommerce-cart-form .product-quantity .quantity {
    display: inline-flex;
    align-items: center;
  }

  body.woocommerce-cart .woocommerce-cart-form .product-remove {
    text-align: left;
  }

  body.woocommerce-cart .woocommerce-cart-form .product-remove a {
    display: inline-flex;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
  }

  body.woocommerce-cart .cart-collaterals {
    margin-top: 18px;
    padding-bottom: 96px; /* room for sticky bar */
  }

  /* Collapsed coupon disclosure on cart page */
  body.woocommerce-cart .coupon > label {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  body.woocommerce-cart .sp-msc-cart-coupon-wrap {
    margin: 0 0 16px;
    border: 1px solid var(--sp-msc-line);
    background: #fff;
  }

  body.woocommerce-cart .sp-msc-cart-coupon-wrap summary {
    padding: 14px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
  }

  body.woocommerce-cart .sp-msc-cart-coupon-wrap .coupon {
    padding: 0 14px 14px;
  }
}

/* Sticky checkout bar — cart only; never fight PDP sticky */
.sp-msc-sticky-checkout {
  position: fixed;
  z-index: var(--sp-msc-z-sticky);
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 11px 14px calc(11px + env(safe-area-inset-bottom));
  color: #fff;
  background: rgba(7, 18, 38, 0.98);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.18);
}

.sp-msc-sticky-checkout[hidden] { display: none !important; }

.sp-msc-sticky-checkout strong,
.sp-msc-sticky-checkout span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-msc-sticky-checkout strong {
  max-width: 55vw;
  font-size: 14px;
  font-weight: 850;
}

.sp-msc-sticky-checkout span {
  margin-top: 2px;
  color: #c3ced8;
  font-size: 10px;
}

.sp-msc-sticky-checkout__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 43px;
  padding: 0 17px;
  border: 0;
  color: #fff !important;
  background: var(--sp-msc-orange);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none !important;
}

@media (max-width: 760px) {
  body.woocommerce-cart .sp-msc-sticky-checkout:not([hidden]) {
    display: flex;
  }
}

/* Hard hide off cart / when PDP sticky present context */
body:not(.woocommerce-cart) .sp-msc-sticky-checkout {
  display: none !important;
}

/* Ensure PDP sticky remains authoritative on product pages */
body.single-product .sp-msc-sticky-checkout {
  display: none !important;
}

body.single-product .spm-sticky-purchase {
  z-index: 150;
}

@media (min-width: 761px) {
  .sp-msc-sticky-checkout {
    display: none !important;
  }
}

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}