/* Cart and checkout. */

/* ---------- Cart ---------- */

.pp-cart__head { margin-block-end: var(--pp-sp-5); }

.pp-cart__title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--pp-sp-3);
  margin: 0;
  font-size: var(--pp-fs-3xl);
}

.pp-cart__count {
  font-size: var(--pp-fs-lg);
  font-weight: 500;
  color: var(--pp-muted);
}

.pp-cart__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  align-items: start;
  gap: var(--pp-sp-5);
}

/* ---------- Cart rows ---------- */

.pp-cart-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto auto 44px;
  align-items: center;
  gap: var(--pp-sp-4);
  padding: var(--pp-sp-4);
  background: var(--pp-box);
  border-radius: var(--pp-radius);
  box-shadow: var(--pp-shadow-sm);
}

.pp-cart-row + .pp-cart-row { margin-block-start: var(--pp-sp-3); }

.pp-cart-row__media {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border-radius: var(--pp-radius-sm);
  background: var(--pp-tint);
  overflow: hidden;
}

/* The image sits inside a product link; the link fills the tile and
   centres it, otherwise the 84% sizing resolved against the bare link
   and pushed the image off centre. */
.pp-cart-row__media > a {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.pp-cart-row__media img {
  width: 84%;
  height: 84%;
  object-fit: contain;
}

.pp-cart-row__title {
  margin: 0 0 var(--pp-sp-1);
  font-size: var(--pp-fs-md);
  font-weight: 700;
  color: var(--pp-navy);
}

.pp-cart-row__title a { color: inherit; }
.pp-cart-row__title a:hover { color: var(--pp-red); }

.pp-cart-row__meta {
  margin: 0;
  font-size: var(--pp-fs-sm);
  color: var(--pp-muted);
}

.pp-cart-row__price { text-align: center; }

.pp-cart-row__unit {
  display: block;
  margin-block-start: var(--pp-sp-1);
  font-size: var(--pp-fs-xs);
  color: var(--pp-muted);
}

.pp-cart-row__unit .woocommerce-Price-amount { color: inherit; }

.pp-cart-row__remove-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-pill);
  background: var(--pp-white);
  color: var(--pp-ink-soft);
  transition: background var(--pp-transition), color var(--pp-transition), border-color var(--pp-transition);
}

.pp-cart-row__remove-btn:hover,
.pp-cart-row__remove-btn:focus-visible {
  border-color: transparent;
  background: var(--pp-red-soft);
  color: var(--pp-red);
}

/* WooCommerce prints its own quantity label; we only need the input. */
.pp-cart-row__qty .quantity { display: contents; }
.pp-cart-row__qty label { display: none; }

/* ---------- Cart actions ---------- */

.pp-cart__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--pp-sp-3);
  margin-block-start: var(--pp-sp-4);
}

.pp-cart__coupon {
  display: flex;
  align-items: center;
  gap: var(--pp-sp-2);
  flex: 1 1 280px;
}

.pp-cart__coupon .pp-input { border-radius: var(--pp-radius-pill); }

/* Pink strip with a capsule on its left. RTL text sits on the right, clear
   of it; for LTR the photo is mirrored so the capsule moves to the end.
   Anchored to the capsule side so narrow boxes crop the empty middle. */
.pp-cart__notice {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-block-start: var(--pp-sp-5);
  background: var(--pp-red-soft) url("../../images/bg-bn-cart.webp") left center / cover no-repeat;
}

[dir="ltr"] .pp-cart__notice { background-image: none; }

[dir="ltr"] .pp-cart__notice::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../../images/bg-bn-cart.webp") left center / cover no-repeat;
  transform: scaleX(-1);
}

/* Phones: the box is taller, so the capsule scales up under the text. A
   pink wash on the text side keeps it readable. The gradient is written for
   RTL; the LTR layer is mirrored, which flips it to the left with the text. */
@media (max-width: 600px) {
  .pp-cart__notice {
    background-image:
      linear-gradient(to left, rgba(253, 236, 238, .94) 45%, rgba(253, 236, 238, .2) 90%),
      url("../../images/bg-bn-cart.webp");
  }

  [dir="ltr"] .pp-cart__notice { background-image: none; }

  [dir="ltr"] .pp-cart__notice::before {
    background-image:
      linear-gradient(to left, rgba(253, 236, 238, .94) 45%, rgba(253, 236, 238, .2) 90%),
      url("../../images/bg-bn-cart.webp");
  }
}

/* ---------- Totals panel ---------- */

.pp-totals {
  position: sticky;
  inset-block-start: 96px;
  padding: var(--pp-sp-5);
  background: var(--pp-box);
  border-radius: var(--pp-radius);
  box-shadow: var(--pp-shadow);
}

.pp-totals__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pp-sp-4);
  padding-block: var(--pp-sp-2);
}

.pp-totals__label { color: var(--pp-muted); }
.pp-totals__value { font-weight: 700; color: var(--pp-navy); }
.pp-totals__row--coupon .pp-totals__value { color: var(--pp-success); }

.pp-totals__row--grand {
  margin-block-start: var(--pp-sp-3);
  padding-block-start: var(--pp-sp-4);
  border-block-start: 1px solid var(--pp-line);
}

.pp-totals__row--grand .pp-totals__label {
  font-size: var(--pp-fs-lg);
  font-weight: 800;
  color: var(--pp-navy);
}

.pp-totals__row--grand .pp-totals__value { font-size: var(--pp-fs-3xl); }

/* WooCommerce renders shipping choices as a plain list. */
.pp-totals .woocommerce-shipping-totals,
.pp-totals tr {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pp-sp-4);
  padding-block: var(--pp-sp-2);
}

.pp-totals th {
  font-weight: 400;
  text-align: start;
  color: var(--pp-muted);
}

.pp-totals td { text-align: end; font-weight: 700; }

.pp-totals ul#shipping_method {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: start;
}

/* Radio and label on one line, the radio aligned to the first text line. */
.pp-totals ul#shipping_method li {
  display: flex;
  align-items: flex-start;
  gap: var(--pp-sp-2);
  padding-block: var(--pp-sp-1);
}

.pp-totals ul#shipping_method input[type="radio"] {
  flex: 0 0 auto;
  margin: 3px 0 0;
  accent-color: var(--pp-red);
}

.pp-totals ul#shipping_method label { font-size: var(--pp-fs-sm); line-height: 1.45; }

.pp-totals__actions { margin-block-start: var(--pp-sp-5); }

.pp-totals__continue {
  display: inline-flex;
  align-items: center;
  gap: var(--pp-sp-2);
  width: 100%;
  justify-content: center;
  margin-block-start: var(--pp-sp-4);
  font-size: var(--pp-fs-sm);
  font-weight: 600;
}

[dir="rtl"] .pp-totals__continue svg { transform: scaleX(-1); }

/* ---------- Checkout ---------- */

.pp-checkout__secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--pp-sp-2);
  width: fit-content;
  margin: 0 auto var(--pp-sp-5);
  padding: var(--pp-sp-2) var(--pp-sp-5);
  border-radius: var(--pp-radius-pill);
  background: var(--pp-box);
  box-shadow: var(--pp-shadow-sm);
  font-size: var(--pp-fs-sm);
  font-weight: 600;
  color: var(--pp-navy);
}

/* Three-step progress indicator. */
.pp-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--pp-sp-2);
  margin-block-end: var(--pp-sp-6);
  padding: 0;
  list-style: none;
}

.pp-steps__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pp-sp-2);
  font-size: var(--pp-fs-sm);
  font-weight: 600;
  color: var(--pp-muted);
}

.pp-steps__dot {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 2px solid var(--pp-line);
  border-radius: var(--pp-radius-pill);
  background: var(--pp-box);
  font-weight: 800;
}

.pp-steps__item--done .pp-steps__dot,
.pp-steps__item--current .pp-steps__dot {
  border-color: var(--pp-red);
  background: var(--pp-red-bright);
  color: var(--pp-white);
}

.pp-steps__item--current { color: var(--pp-red); }

.pp-steps__bar {
  width: clamp(40px, 12vw, 140px);
  height: 2px;
  margin-block-end: 22px;
  background: var(--pp-line);
}

.pp-steps__bar--done { background: var(--pp-red); }

.pp-checkout__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  align-items: start;
  gap: var(--pp-sp-5);
}

.pp-panel {
  padding: var(--pp-sp-5);
  background: var(--pp-box);
  border-radius: var(--pp-radius);
  box-shadow: var(--pp-shadow);
}

.pp-panel + .pp-panel { margin-block-start: var(--pp-sp-4); }

.pp-panel__title {
  display: flex;
  align-items: center;
  gap: var(--pp-sp-3);
  margin-block-end: var(--pp-sp-4);
  font-size: var(--pp-fs-xl);
}

.pp-panel__title svg { color: var(--pp-red); }

/* WooCommerce field rows inside our panels. */
.pp-panel .form-row { margin-block-end: var(--pp-sp-4); }

.pp-panel .form-row label {
  display: block;
  margin-block-end: var(--pp-sp-2);
  font-size: var(--pp-fs-sm);
  font-weight: 600;
  color: var(--pp-navy);
}

.pp-panel .form-row .required { color: var(--pp-red); text-decoration: none; }

.pp-panel input[type="text"],
.pp-panel input[type="tel"],
.pp-panel input[type="email"],
.pp-panel textarea,
.pp-panel select,
.pp-panel .select2-container .select2-selection {
  width: 100%;
  padding: var(--pp-sp-3) var(--pp-sp-4);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-sm);
  background: var(--pp-box);
}

.pp-panel input:focus,
.pp-panel textarea:focus,
.pp-panel select:focus {
  outline: none;
  border-color: var(--pp-red);
  box-shadow: 0 0 0 4px var(--pp-red-soft);
}

/* Shipping and payment choices as selectable cards. */
.pp-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--pp-sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pp-choice {
  display: flex;
  align-items: center;
  gap: var(--pp-sp-3);
  padding: var(--pp-sp-4);
  border: 2px solid var(--pp-line);
  border-radius: var(--pp-radius-sm);
  cursor: pointer;
  transition: border-color var(--pp-transition), background var(--pp-transition);
}

.pp-choice:hover { border-color: var(--pp-red); }

.pp-choice:has(input:checked) {
  border-color: var(--pp-red);
  background: var(--pp-red-soft);
}

.pp-choice input { accent-color: var(--pp-red); flex: 0 0 auto; }
.pp-choice__label { font-weight: 700; color: var(--pp-navy); }

.pp-choice__price {
  display: block;
  font-size: var(--pp-fs-sm);
  font-weight: 600;
  color: var(--pp-red);
}

/* Order summary in the sidebar. */
.pp-summary__row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--pp-sp-3);
  padding-block: var(--pp-sp-3);
}

.pp-summary__row + .pp-summary__row { border-block-start: 1px solid var(--pp-line); }

.pp-summary__media {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--pp-radius-xs);
  background: var(--pp-tint);
  overflow: hidden;
}

.pp-summary__media img {
  width: 84%;
  height: 84%;
  object-fit: contain;
}

.pp-summary__name {
  font-size: var(--pp-fs-sm);
  font-weight: 700;
  color: var(--pp-navy);
}

.pp-summary__qty { font-size: var(--pp-fs-sm); color: var(--pp-muted); }

.pp-checkout__note {
  display: flex;
  align-items: center;
  gap: var(--pp-sp-2);
  margin-block-start: var(--pp-sp-4);
  font-size: var(--pp-fs-sm);
  color: var(--pp-muted);
}

.pp-checkout__note svg { flex: 0 0 auto; color: var(--pp-red); }

/* ---------- Checkout: fields ---------- */

/* Our panel titles already name each section; WooCommerce's own
   "Billing details" heading repeated it. */
.pp-panel .woocommerce-billing-fields > h3 { display: none; }

/* Two columns on wide screens for the short fields (phone, email). */
.pp-panel .woocommerce-billing-fields__field-wrapper,
.pp-panel .woocommerce-shipping-fields__field-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--pp-sp-4);
}

.pp-panel .woocommerce-billing-fields__field-wrapper > .form-row,
.pp-panel .woocommerce-shipping-fields__field-wrapper > .form-row { grid-column: 1 / -1; }

.pp-panel #billing_phone_field,
.pp-panel #billing_email_field { grid-column: auto; }

.pp-panel .form-row .optional { font-weight: 400; color: var(--pp-muted); }

.pp-panel input[type="text"],
.pp-panel input[type="tel"],
.pp-panel input[type="email"],
.pp-panel select { height: 50px; }

.pp-panel textarea { min-height: 110px; resize: vertical; }

.pp-panel input::placeholder,
.pp-panel textarea::placeholder { color: var(--pp-muted); }

/* Country picker (selectWoo): match the text fields. */
.pp-panel .select2-container .select2-selection--single {
  display: flex;
  align-items: center;
  height: 50px;
  padding-block: 0;
}

.pp-panel .select2-container .select2-selection__rendered {
  padding: 0;
  line-height: 1.4;
  color: var(--pp-ink);
}

.pp-panel .select2-container .select2-selection__arrow {
  inset-block: 0;
  inset-inline-end: var(--pp-sp-3);
  height: auto;
}

.pp-panel .select2-container--focus .select2-selection,
.pp-panel .select2-container--open .select2-selection {
  border-color: var(--pp-red);
  box-shadow: 0 0 0 4px var(--pp-red-soft);
}

/* "Deliver to a different address?" as a plain checkbox row, not a heading. */
.pp-panel #ship-to-different-address {
  margin: 0 0 var(--pp-sp-4);
  font-size: var(--pp-fs-md);
  font-weight: 600;
}

.pp-panel #ship-to-different-address label {
  display: inline-flex;
  align-items: center;
  gap: var(--pp-sp-2);
  cursor: pointer;
}

.pp-panel input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--pp-red);
}

/* ---------- Checkout: coupon ---------- */

.pp-page .checkout_coupon {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pp-sp-2);
  margin: 0 0 var(--pp-sp-4);
  padding: var(--pp-sp-4);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-sm);
  background: var(--pp-box);
}

.pp-page .checkout_coupon .form-row { flex: 1 1 200px; margin: 0; }
.pp-page .checkout_coupon .form-row-last { flex: 0 0 auto; }
.pp-page .checkout_coupon .clear { display: none; }

.pp-page .checkout_coupon input {
  width: 100%;
  height: 46px;
  padding-inline: var(--pp-sp-4);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-pill);
  background: var(--pp-white);
}

.pp-page .checkout_coupon button {
  height: 46px;
  padding-inline: var(--pp-sp-5);
  border: 2px solid var(--pp-red);
  border-radius: var(--pp-radius-pill);
  background: transparent;
  font-weight: 700;
  color: var(--pp-red);
  cursor: pointer;
}

.pp-page .checkout_coupon button:hover { background: var(--pp-red); color: var(--pp-white); }

/* ---------- Checkout: order summary ---------- */

.pp-summary { position: sticky; inset-block-start: 96px; }

.pp-summary__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pp-summary__name { line-height: 1.4; }
.pp-summary__price { font-size: var(--pp-fs-md); }

/* The totals reuse the cart panel's markup; here they sit inside the
   summary card, so they lose that panel's own card styling. */
.pp-totals.pp-summary__totals {
  position: static;
  margin-block-start: var(--pp-sp-3);
  padding: var(--pp-sp-4) 0 0;
  border-block-start: 1px solid var(--pp-line);
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.pp-summary__totals .pp-totals__row--grand .pp-totals__value { font-size: var(--pp-fs-2xl); }

/* ---------- Checkout: payment ---------- */

.pp-summary #payment { margin-block-start: var(--pp-sp-4); }

.pp-summary .wc_payment_methods {
  margin: 0 0 var(--pp-sp-4);
  padding: 0;
  list-style: none;
}

/* Cash on delivery is the only method: shown as a selected card. */
.pp-summary .wc_payment_method {
  padding: var(--pp-sp-3) var(--pp-sp-4);
  border: 1.5px solid var(--pp-red);
  border-radius: var(--pp-radius-sm);
  background: var(--pp-red-soft);
}

.pp-summary .wc_payment_method + .wc_payment_method { margin-block-start: var(--pp-sp-2); }

.pp-summary .wc_payment_method > label {
  display: flex;
  align-items: center;
  gap: var(--pp-sp-2);
  font-size: var(--pp-fs-sm);
  font-weight: 700;
  color: var(--pp-navy);
}

.pp-summary .wc_payment_method > label::before {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border: 5px solid var(--pp-red);
  border-radius: 50%;
  background: var(--pp-white);
}

.pp-summary .payment_box p {
  margin: var(--pp-sp-1) 0 0;
  padding-inline-start: 24px;
  font-size: var(--pp-fs-xs);
  line-height: 1.5;
  color: var(--pp-ink-soft);
}

.pp-summary .woocommerce-privacy-policy-text p {
  margin: 0 0 var(--pp-sp-4);
  font-size: var(--pp-fs-xs);
  line-height: 1.55;
  color: var(--pp-muted);
}

.pp-summary .woocommerce-privacy-policy-text a { color: var(--pp-red); text-decoration: underline; }

.pp-summary .place-order { margin: 0; }

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
  .pp-cart__layout,
  .pp-checkout__layout { grid-template-columns: 1fr; }

  .pp-totals,
  .pp-summary { position: static; }
}

@media (max-width: 600px) {
  .pp-panel { padding: var(--pp-sp-4); }
  .pp-panel__title { font-size: var(--pp-fs-lg); }

  .pp-panel .woocommerce-billing-fields__field-wrapper,
  .pp-panel .woocommerce-shipping-fields__field-wrapper { grid-template-columns: 1fr; }

  .pp-checkout__secure { margin-block-end: var(--pp-sp-4); }
  .pp-steps { margin-block-end: var(--pp-sp-5); }
}

@media (max-width: 700px) {
  .pp-cart-row {
    grid-template-columns: 72px minmax(0, 1fr) 44px;
    grid-template-areas:
      "media info remove"
      "qty   qty  price";
    row-gap: var(--pp-sp-3);
  }

  .pp-cart-row__media { grid-area: media; width: 72px; height: 72px; }
  .pp-cart-row__info { grid-area: info; }
  .pp-cart-row__remove { grid-area: remove; }
  /* Second row: the stepper from the start, the price at the end. The
     price spans two tracks; in the 44px remove column alone it spilled
     past the card edge. They share the middle track without overlapping
     (start- and end-aligned). */
  .pp-cart-row__qty { grid-row: 2; grid-column: 1 / 3; justify-self: start; }
  .pp-cart-row__price { grid-row: 2; grid-column: 2 / 4; justify-self: end; text-align: end; }

  .pp-steps__item span:last-child { font-size: var(--pp-fs-xs); }
}

/* ---------- Cart on phones ---------- */
@media (max-width: 600px) {
  /* The product's short description ran to five lines on narrow screens. */
  .pp-cart-row__meta {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  /* Coupon field and Apply on one row, Update cart full width below. */
  .pp-cart__coupon { flex-basis: 100%; }
  .pp-cart__coupon .pp-input { min-width: 0; flex: 1 1 auto; }
  .pp-cart__actions [name="update_cart"] { width: 100%; }

  /* Keep "Complete the order" on one line, icon beside the label. */
  .pp-totals__actions .pp-btn--lg {
    gap: var(--pp-sp-2);
    padding-inline: var(--pp-sp-4);
    font-size: var(--pp-fs-md);
    white-space: nowrap;
  }
}

/* 320px phones: a smaller thumbnail leaves the product name room for
   two lines instead of four. */
@media (max-width: 360px) {
  .pp-cart-row { grid-template-columns: 56px minmax(0, 1fr) 40px; column-gap: var(--pp-sp-3); }
  .pp-cart-row__media { width: 56px; height: 56px; }
}