/* ==========================================================================
   cart-page.css: the few rules /cart/ (build/cart_page.py) needs on top of
   peptik's theme sheets, which already style the cart page itself.
   ========================================================================== */

/* Missing from the mirrored styles.css: peptik's live sheet has it. */
.peptik-cart-offer__tier-line { display: block; }

/* The theme gives these blocks display:grid/flex, which beats [hidden]. */
.mycart [hidden],
.customproducts [hidden] { display: none !important; }

/* Title: an h1 (the page's only heading of its own) with peptik's h2 look. */
.mycart .bodytext h1.uu-cart-title {
  font-size: 44px;
  line-height: 52px;
  letter-spacing: -3px;
  margin: 0;
  color: var(--darkblue);
}

.uu-cart-empty__text {
  margin: 0;
  font-size: 18px;
  line-height: 26px;
  color: var(--darkblue);
}

/* Line photos are 4:5 vial renders where peptik's are landscape: contained in
   the cell they left a letterboxed slab. The cell is the same plate the
   collection cards use (.card-image: #f0ece6, 14px), which is exactly the
   renders' own background, so the photo sits in it seamlessly and the row is
   as short as peptik's. Specificity (0,4,0): peptik's sheet already says
   .cart-items__wrapper .cart-items__media .cart-items__media-container
   { aspect-ratio: initial }. */
.mycart .cart-items__wrapper .cart-items__media .cart-items__media-container {
  aspect-ratio: 4 / 3;
  background: #f0ece6;
  border-radius: 14px;
  overflow: hidden;
}
.mycart .cart-items__wrapper .cart-items__media .cart-items__media-image {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
}

.cart-items__wrapper .cart-items__unit-price-wrapper .uu-cart-row__tier {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  color: #14804a;
}

.mycart .cart-items__details .uu-cart-row__blocked { color: #b3261e; }

.mycart .quantity-selector [aria-disabled="true"] {
  opacity: .35;
  cursor: default;
}

.uu-cart-error {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: #b3261e;
}

/* Payment marks are uu.life's checkout artwork, not peptik's text badges. */
.peptik-pay__m.peptik-pay__m--img {
  width: 40px;
  padding: 0;
  overflow: hidden;
}
.peptik-pay__m--img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Where peptik has its coupon toggle: checkout takes the code. */
.uu-cart-code {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 4px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: #10003e;
  text-align: center;
}
.uu-cart-code svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  color: #b08d57;
}

.mycart a:focus-visible,
.mycart button:focus-visible,
.mycart input:focus-visible {
  outline: 2px solid #0535a8;
  outline-offset: 2px;
}

.customproducts .product-grid__item { list-style: none; }
.customproducts button.btn2 { font-family: inherit; }

.uu-cart-reviews { padding: 0 0 40px; }

/* Header count, as kit.css draws it on every other mirrored page. */
.uuk-cart-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #0745C4;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  pointer-events: none;
}
a.action__cart, .peptik-cart-fab { position: relative; }

/* Tablet: peptik stacks the page here but pins the summary with
   align-self:start inside a flex column, and .cart-summary__inner is a size
   container with no width of its own, so the card collapsed to 48px (peptik's
   own cart page does the same). Stretched, it spans the page like the lines. */
@media (min-width: 750px) and (max-width: 979px) {
  .mycart .cart-page__summary,
  .mycart .cart-page__summary > .cart-summary { align-self: stretch !important; }
}

@media (max-width: 749px) {
  .mycart .bodytext h1.uu-cart-title {
    font-size: 40px;
    line-height: 48px;
    letter-spacing: -2px;
    /* peptik's .products-header h2 room for the pinned "Continue shopping".
       cart-page.js widens it to the translated button and shrinks a title
       that still does not fit. */
    padding: 4px 140px 4px 0;
  }
  /* 44px targets: peptik shrinks the stepper to 36px here. */
  .mycart .quantity-selector .quantity-minus,
  .mycart .quantity-selector .quantity-plus {
    width: 44px;
    height: 44px;
  }
  .mycart .quantity-selector input[type="number"] { height: 44px; }
  /* peptik's cart recs are one column on phones; the collection sheet says two. */
  .customproducts .collectionmain .product-grid { grid-template-columns: 1fr; }
}

/* Fila del vial gratis del popup (cart-page.js paintGift). */
.uu-cart-gift__badge { display: inline-block; margin-bottom: 4px; padding: 2px 9px; border-radius: 999px; background: #e7f4ec; color: #1a7f4b; font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.uu-cart-gift__free { font-weight: 700; color: #1a7f4b; }
.uu-cart-gift__note { margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: #5f5b73; }
.uu-cart-gift.is-locked .cart-items__media-image, .uu-cart-gift.is-locked .cart-items__title { opacity: 0.55; }
.uu-cart-gift.is-locked .uu-cart-gift__note { color: #10003e; }
.uu-cart-gift.is-failed .uu-cart-gift__note { color: #b3261e; }
.uu-cart-gift__code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; padding: 1px 6px; border-radius: 4px; background: #eef0f6; color: #10003e; user-select: all; }