/*
 * Cart redesign
 * Dense, calm cart layout. Existing checkout, promotion, stock and quantity
 * behavior remains server-driven.
 *
 * Colour rule for this page, in two parts:
 *
 * 1. The cart never invents an *accent* colour. Secondary actions (coupon
 *    apply, recommendation add-to-cart) are theme `.btn` elements, so we style
 *    their geometry only and let each store's own button colour come through.
 *    Do not reintroduce a fixed accent hex: it will be wrong on every store but
 *    the one it was picked for. In particular there is no j3 primary-colour
 *    custom property -- the theme defines none, so reading one with a hex
 *    fallback always resolves to the fallback and paints every tenant alike.
 *
 * 2. The one primary action -- checkout -- is deliberately near-black. That is
 *    a neutral, not an accent: it composes with any brand, guarantees contrast
 *    on stores whose button colour is pale (white on a pastel button fails
 *    WCAG AA), separates the single primary action from the theme-coloured
 *    secondary ones, and pairs with the Apple Pay button stacked beneath it.
 *
 * Everything else is neutral ink and hairlines, with green reserved for money
 * the shopper keeps (savings, free-shipping progress, cashback).
 */

body.checkout-cart {
  --cart-text: #1b2431;
  --cart-muted: #6b7688;
  --cart-line: #e6eaf0;
  --cart-line-strong: #d6dce6;
  --cart-surface: #fff;
  --cart-soft: #f8fafc;
  --cart-success: #1c8250;
  --cart-success-soft: #eef7f2;
  --cart-danger: #c4394a;
  /* Primary action. Neutral by design -- see the colour rule above. */
  --cart-cta: #16181d;
  --cart-cta-hover: #000;
  /* Height of the checkout CTA. The Apple Pay button mirrors it at runtime
     (moyasar2-express-cart.js matchCtaSize), so the pay stack stays one size. */
  --cart-cta-height: 50px;
  --cart-cta-radius: 8px;
}

body.checkout-cart #checkout-cart {
  max-width: 1440px;
}

body.checkout-cart .breadcrumb {
  margin-bottom: 18px;
}

body.checkout-cart h1.cart-page-heading {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 12px 0 24px !important;
  padding: 0 !important;
  border: 0 !important;
  color: var(--cart-text);
  font-size: clamp(25px, 2vw, 34px) !important;
  font-weight: 800;
  line-height: 1.2;
}

/* With pageTitlePosition "top" the heading sits outside #checkout-cart, so the
   template wraps it in its own .container. Match #checkout-cart's max-width so
   the title lines up with the cart below it instead of sitting inset. */
body.checkout-cart .cart-page-heading-container {
  max-width: 1440px;
  margin-bottom: 0;
}

body.checkout-cart .cart-page-subtitle {
  color: var(--cart-muted);
  font-size: 15px;
  font-weight: 500;
}

body.checkout-cart #content .cart-page {
  align-items: start;
  gap: 20px;
  margin: 0 !important;
}

body.checkout-cart #content .cart-page > form,
body.checkout-cart #content .cart-page > .cart-summary-column {
  min-width: 0;
}

body.checkout-cart #content .cart-page > form {
  margin: 0 !important;
}

body.checkout-cart #content .cart-page > form > .table-responsive {
  overflow: hidden !important;
  margin: 0 !important;
  border: 1px solid var(--cart-line) !important;
  border-radius: 12px !important;
  background: var(--cart-surface) !important;
  box-shadow: 0 2px 10px rgba(22, 35, 55, .04) !important;
}

body.checkout-cart #content .cart-table table {
  width: 100%;
  margin: 0 !important;
  table-layout: fixed;
  border: 0 !important;
  background: transparent;
}

body.checkout-cart #content .cart-table thead {
  background: var(--cart-soft);
}

/* The theme sets `display: flex` on the head's product cell. A flex box cannot
   tile as a table cell, so the browser wrapped it in an anonymous cell and its
   `width: 80%` resolved against that instead of the table -- leaving a 170px gap
   between the two headers that broke the header's bottom rule in half and pulled
   "المنتجات" off its column. Force real table cells so head and body align. */
body.checkout-cart #content .cart-table thead td {
  display: table-cell !important;
  height: 48px;
  padding: 0 24px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--cart-line) !important;
  color: #566176;
  font-size: 13px;
  font-weight: 700;
  vertical-align: middle;
}

body.checkout-cart #content .cart-table thead .td-product {
  width: 80%;
}

body.checkout-cart #content .cart-table thead .text-center {
  width: 20%;
}

body.checkout-cart #content .cart-table tbody tr {
  background: var(--cart-surface) !important;
}

body.checkout-cart #content .cart-table tbody tr + tr td {
  border-top: 1px solid var(--cart-line) !important;
}

body.checkout-cart #content .cart-table tbody td {
  border: 0 !important;
  vertical-align: middle;
}

body.checkout-cart #content .cart-table tbody td.td-product {
  display: grid !important;
  grid-template-columns: 112px minmax(190px, 1fr) 142px;
  grid-template-rows: minmax(104px, auto) auto;
  column-gap: 24px;
  align-items: center;
  width: 100%;
  padding: 24px !important;
  text-align: start;
}

body.checkout-cart .cart-product-content {
  display: contents !important;
}

body.checkout-cart .image-product {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 112px;
  margin: 0 !important;
  align-self: center;
}

body.checkout-cart .image-product a {
  display: grid;
  width: 100%;
  min-height: 104px;
  place-items: center;
}

body.checkout-cart .image-product img {
  display: block;
  width: 100%;
  max-width: 104px !important;
  height: 104px;
  max-height: 104px !important;
  object-fit: contain;
  border-radius: 8px !important;
  background: #fff;
}

body.checkout-cart .cart-product-info {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  align-self: center;
}

body.checkout-cart .cart-product-info > a {
  display: block;
  margin: 0 0 7px;
  overflow: hidden;
  color: var(--cart-text) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
  text-decoration: none;
  text-overflow: ellipsis;
}

body.checkout-cart .cart-product-info > a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.checkout-cart .cart-product-info small,
body.checkout-cart .cart-option-line {
  color: var(--cart-muted);
  font-size: 13px;
}

body.checkout-cart .cart-product-quantity-warning {
  grid-column: 2;
  grid-row: 2;
  margin: 6px 0 0 !important;
}

body.checkout-cart .cart-product-content > .text-danger {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  font-size: 12px;
}

body.checkout-cart .btn-qty {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: center;
  width: auto !important;
  margin: 0 !important;
}

body.checkout-cart .btn-qty > b {
  display: block;
  margin-top: 6px;
  color: #c43e48;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}

body.checkout-cart .btn-qty .stepper {
  display: grid !important;
  grid-template-columns: 42px 54px 42px;
  width: 138px !important;
  height: 42px !important;
  overflow: hidden;
  border: 1px solid var(--cart-line-strong) !important;
  border-radius: 8px !important;
  background: #fff;
}

body.checkout-cart .btn-qty .stepper:focus-within {
  border-color: #aab4c2 !important;
}

body.checkout-cart .btn-qty .stepper button,
body.checkout-cart .btn-qty .stepper input {
  width: 100% !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.checkout-cart .btn-qty .stepper button {
  display: grid;
  padding: 0;
  place-items: center;
  color: #4c5768;
  cursor: pointer;
}

body.checkout-cart .btn-qty .stepper button:hover {
  background: var(--cart-soft) !important;
  color: var(--cart-text);
}

body.checkout-cart .btn-qty .stepper button:focus-visible {
  outline: 2px solid #4c5768;
  outline-offset: -3px;
}

body.checkout-cart .btn-qty .stepper button.disabled,
body.checkout-cart .btn-qty .stepper button:disabled {
  color: #a9b1be;
  cursor: not-allowed;
}

body.checkout-cart .btn-qty .stepper .is-remove {
  color: var(--cart-danger);
}

body.checkout-cart .btn-qty .stepper input {
  border-inline: 1px solid var(--cart-line) !important;
  color: var(--cart-text);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}

body.checkout-cart #content .cart-table tbody td.text-center {
  width: 20%;
  padding: 24px !important;
  color: var(--cart-text);
  text-align: center;
}

body.checkout-cart #content .cart-table tbody td.text-center strong {
  color: var(--cart-text);
  font-size: 18px !important;
  font-weight: 800 !important;
}

body.checkout-cart .discount-badge {
  border-radius: 999px !important;
  background: var(--cart-success-soft) !important;
  color: var(--cart-success) !important;
  font-size: 12px !important;
}

body.checkout-cart .cart-summary-column {
  display: block !important;
  width: 100%;
  max-width: none !important;
}

body.checkout-cart .cart-summary-shell {
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 1px solid var(--cart-line);
  border-radius: 12px;
  background: var(--cart-surface);
  box-shadow: 0 2px 10px rgba(22, 35, 55, .04);
}

body.checkout-cart .cart-summary-shell > .cart-bottom {
  order: 8;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.checkout-cart .cart-summary-heading {
  order: 1;
  margin: 0 0 16px;
  color: var(--cart-text);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.35;
}

body.checkout-cart .cart-coupon-top {
  order: 2 !important;
  padding: 0 0 18px !important;
  border-bottom: 1px solid var(--cart-line) !important;
}

body.checkout-cart .cashback-cart-preview {
  display: flex !important;
  order: 3 !important;
  margin: 0 0 10px !important;
  padding: 9px 10px !important;
  align-items: flex-start;
  gap: 8px;
  border: 0 !important;
  border-radius: 8px !important;
  background: #f3faf7 !important;
}

body.checkout-cart .cashback-preview-icon {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border-radius: 50%;
  background: #e1f5ec;
  color: #16775d;
}

body.checkout-cart .cashback-preview-copy {
  min-width: 0;
  flex: 1;
  padding-top: 4px;
}

body.checkout-cart .cashback-preview-message {
  margin: 0 !important;
  color: var(--cart-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.55;
}

body.checkout-cart .cashback-preview-account {
  display: block;
  margin-top: 2px;
  color: var(--cart-muted);
  font-size: 12px;
  line-height: 1.45;
}

body.checkout-cart .cart-order-summary {
  order: 4 !important;
  padding: 14px 0 0 !important;
}

body.checkout-cart .cart-checkout-block {
  order: 5 !important;
  padding: 14px 0 0 !important;
}

body.checkout-cart .enhanced-rewards-widget {
  order: 6 !important;
}

body.checkout-cart .cart-summary-shell > .cart-bottom:not(.cart-coupon-top):not(.cashback-cart-preview):not(.cart-order-summary):not(.cart-checkout-block):not(.enhanced-rewards-widget) {
  order: 7;
}

body.checkout-cart .cart-coupon-top .panel-coupon .panel-heading {
  padding-bottom: 9px !important;
}

body.checkout-cart .cart-coupon-top .panel-coupon .panel-title {
  color: var(--cart-muted) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

body.checkout-cart .cart-coupon-top .panel-coupon .input-group {
  gap: 8px !important;
}

body.checkout-cart .cart-coupon-top .panel-coupon .input-group .form-control {
  height: 44px !important;
  border: 1px solid var(--cart-line-strong) !important;
  border-radius: 7px !important;
  color: var(--cart-text) !important;
  font-size: 15px !important;
}

body.checkout-cart .cart-coupon-top .panel-coupon .input-group .form-control:focus {
  border-color: #9aa5b4 !important;
  box-shadow: 0 0 0 3px rgba(27, 36, 49, .07) !important;
}

/* Geometry only: the apply button keeps the store's own .btn colours. */
body.checkout-cart .cart-coupon-top .panel-coupon .input-group .input-group-btn .btn,
body.checkout-cart .cart-coupon-top .panel-coupon .input-group .input-group-btn input.btn {
  height: 44px !important;
  border-radius: 7px !important;
  box-shadow: none !important;
}

body.checkout-cart .cart-available-offers-btn {
  display: flex !important;
  width: 100%;
  height: 46px;
  margin-top: 10px;
  padding: 0 13px !important;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #cfe6da !important;
  border-radius: 8px !important;
  background: var(--cart-success-soft) !important;
  color: var(--cart-success) !important;
  font-size: 14px;
  font-weight: 700;
  text-align: start;
}

body.checkout-cart .cart-available-offers-btn:hover,
body.checkout-cart .cart-available-offers-btn:focus {
  border-color: var(--cart-success) !important;
  background: #e4f2ea !important;
}

body.checkout-cart .cart-available-offers-copy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

html[dir="ltr"] body.checkout-cart .cart-offers-chevron {
  transform: scaleX(-1);
}

body.checkout-cart .cart-order-summary .cart-total {
  margin: 0 !important;
}

body.checkout-cart #content .cart-order-summary table.table {
  margin: 0 !important;
}

body.checkout-cart #content .cart-order-summary table tbody tr td {
  padding: 10px 0 !important;
  border: 0 !important;
  color: var(--cart-muted);
  font-size: 15px;
  line-height: 1.6;
  vertical-align: top;
}

/* Long shipping-method labels must not strand their trailing colon on a line
   of its own, which reads as a stray glyph in RTL. */
body.checkout-cart #content .cart-order-summary table tbody tr td:first-child {
  text-wrap: pretty;
  word-break: normal;
  overflow-wrap: break-word;
}

body.checkout-cart #content .cart-order-summary table tbody tr td strong {
  color: var(--cart-text);
  font-weight: 600;
}

body.checkout-cart #content .cart-order-summary table tbody tr:last-child td {
  padding-top: 16px !important;
  border-top: 1px solid var(--cart-line) !important;
  color: var(--cart-text) !important;
  font-size: 23px !important;
  font-weight: 800 !important;
  vertical-align: middle;
}

body.checkout-cart .cart-savings-highlight {
  margin: 8px 0 0 !important;
}

body.checkout-cart .cart-checkout-block .buttons {
  margin: 0 !important;
}

/* The single primary action. Selector has to outrank the per-tenant journal3
   button skin (`div.cart-content .btn-checkout.btn`, specificity 0-3-1) or the
   theme's own colour and 3px radius win -- which is what shipped, and is why
   the Apple Pay button beneath it rendered square-cornered too. */
body.checkout-cart .cart-checkout-block .enhanced-checkout-btn.btn,
body.checkout-cart .cart-checkout-block .enhanced-checkout-btn.btn:visited {
  display: grid !important;
  height: var(--cart-cta-height) !important;
  place-items: center;
  border: 0 !important;
  border-radius: var(--cart-cta-radius) !important;
  background: var(--cart-cta) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(22, 35, 55, .16) !important;
}

body.checkout-cart .cart-checkout-block .enhanced-checkout-btn.btn:hover,
body.checkout-cart .cart-checkout-block .enhanced-checkout-btn.btn:focus {
  background: var(--cart-cta-hover) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

body.checkout-cart .enhanced-checkout-btn .checkout-btn-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 17px;
  font-weight: 800;
}

/* Apple Pay sits directly under the checkout CTA and has to match it exactly.
   moyasar2-express-cart.js mirrors the CTA's measured height and radius onto this
   button at mount time, but that runs once and its own stylesheet defaults to 54px
   -- so any ordering change leaves a taller, squarer button next to the CTA, which
   is what shipped. Pin it to the same tokens instead. A stylesheet `!important`
   outranks the non-important inline styles the script writes, so this holds whether
   or not the mirror runs. */
body.checkout-cart .moyasar-applepay-express-cart,
body.checkout-cart #moyasar-applepay-express-cart {
  height: var(--cart-cta-height) !important;
  min-height: var(--cart-cta-height) !important;
  border-radius: var(--cart-cta-radius) !important;
  --apple-pay-button-height: var(--cart-cta-height) !important;
  --apple-pay-button-border-radius: var(--cart-cta-radius) !important;
}

body.checkout-cart .moyasar-express-or {
  font-size: 13px;
}

body.checkout-cart .cart-secure-note {
  display: flex;
  margin-top: 9px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--cart-muted);
  font-size: 13px;
}

body.checkout-cart .enhanced-rewards-widget {
  display: block !important;
  margin-top: 10px !important;
  padding: 9px 10px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #f7f9fc !important;
}

body.checkout-cart .enhanced-rewards-widget .rewards-header {
  display: flex !important;
  width: 100%;
  margin: 0 !important;
  align-items: center;
  gap: 8px;
}

body.checkout-cart .enhanced-rewards-widget .rewards-icon-container {
  display: grid;
  width: 28px;
  height: 28px;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 28px;
  place-items: center;
  border-radius: 50%;
  background: var(--cart-success-soft) !important;
  color: var(--cart-success) !important;
}

body.checkout-cart .enhanced-rewards-widget .rewards-purchase-nudge {
  flex: 1;
  min-width: 0;
  margin: 0 !important;
  color: var(--cart-text);
  font-size: 14px !important;
  font-weight: 600;
  line-height: 1.55;
}

body.checkout-cart .enhanced-rewards-widget .rewards-info-btn {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  margin: 0 !important;
  padding: 0 !important;
  place-items: center;
  border: 0;
  background: transparent !important;
  color: var(--cart-muted);
  cursor: help;
}

body.checkout-cart .enhanced-rewards-widget .rewards-info-btn:hover,
body.checkout-cart .enhanced-rewards-widget .rewards-info-btn:focus {
  color: var(--cart-text);
}

body.checkout-cart .recommended-products-section {
  margin: 28px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.checkout-cart .cart-goal-banner {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  margin: 0 0 18px;
  padding: 15px 17px;
  align-items: center;
  column-gap: 12px;
  row-gap: 11px;
  border: 1px solid #d8e7de;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--cart-success-soft) 0%, #fff 78%);
  color: var(--cart-success);
}

body.checkout-cart .cart-goal-icon {
  display: grid;
  width: 44px;
  height: 44px;
  grid-row: 1 / span 2;
  place-items: center;
  border-radius: 10px;
  background: var(--cart-success);
  color: #fff;
}

body.checkout-cart .cart-goal-copy {
  min-width: 0;
}

body.checkout-cart .cart-goal-copy strong,
body.checkout-cart .cart-goal-copy span {
  display: block;
}

body.checkout-cart .cart-goal-copy strong {
  color: var(--cart-text);
  font-size: 16px;
  font-weight: 800;
}

body.checkout-cart .cart-goal-copy span {
  margin-top: 3px;
  color: var(--cart-muted);
  font-size: 13px;
}

body.checkout-cart .cart-goal-percentage {
  min-width: 44px;
  color: var(--cart-success);
  font-size: 14px;
  font-weight: 800;
  text-align: end;
}

body.checkout-cart .cart-goal-track {
  height: 6px;
  grid-column: 2 / -1;
  overflow: hidden;
  border-radius: 99px;
  background: #dfe6e2;
}

body.checkout-cart .cart-goal-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--cart-success);
  transition: width .25s ease;
}

body.checkout-cart .cart-goal-banner.is-complete {
  border-color: #c8ead5;
  background: #f3fbf6;
}

body.checkout-cart .recommended-products-section::before,
body.checkout-cart .recommended-products-title::after {
  display: none !important;
}

/* The theme paints this header white, which floated a bare strip across the cream
   page background. The section sits directly on the page like the cards do. */
body.checkout-cart .recommended-products-header {
  display: flex;
  margin-bottom: 14px;
  align-items: flex-end;
  gap: 16px;
  background: transparent !important;
}

body.checkout-cart .recommended-products-header > div {
  flex: 0 1 auto;
}

/* A 1200px hairline beside a 210px title underlines nothing. Cut it. */
body.checkout-cart .recommended-products-header-line {
  display: none !important;
}

body.checkout-cart .recommended-products-title {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--cart-text);
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1.35;
  text-align: start !important;
}

body.checkout-cart .recommended-products-hint {
  margin: 3px 0 0;
  color: var(--cart-muted);
  font-size: 13px;
  line-height: 1.5;
}

body.checkout-cart .recommended-products-header-line {
  height: 1px;
  min-width: 40px;
  flex: 1;
  margin-bottom: 7px;
  background: var(--cart-line);
}

/* journal3 gives .main-products a -10px gutter bleed for its grid layout. As a
   horizontal scroller that bleed pushes the track past the page container, so
   cards get clipped at both edges and stop lining up with the section header
   above them. Zero it out and let the track share the container's edges. */
body.checkout-cart .recommended-products-section .main-products {
  display: flex !important;
  gap: 12px;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  margin: 0 !important;
  padding: 2px 1px 12px !important;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 1px;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

body.checkout-cart .recommended-products-section .product-layout {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 0 0 clamp(280px, 22vw, 330px) !important;
  scroll-snap-align: start;
}

/* The card used to be pinned to a hard 174px while its caption needed 190-206px,
   so `overflow: hidden` clipped the add-to-cart button on every card. Cards now
   grow to fit and the flex row stretches them all to the tallest, which keeps the
   row even without ever cutting content off. */
body.checkout-cart .recommended-products-section .product-layout {
  display: flex;
}

body.checkout-cart .recommended-products-section .product-thumb {
  display: grid !important;
  position: relative;
  width: 100%;
  height: auto !important;
  min-height: 174px;
  grid-template-columns: 118px minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--cart-line) !important;
  border-radius: 11px !important;
  background: #fff !important;
  box-shadow: none !important;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

body.checkout-cart .recommended-products-section .product-thumb:hover {
  border-color: #c9d8ea !important;
  box-shadow: 0 8px 20px rgba(22, 35, 55, .07) !important;
  transform: translateY(-2px);
}

body.checkout-cart .recommended-products-section .product-thumb > .image {
  position: relative;
  width: 118px !important;
  height: 100% !important;
  min-height: 172px;
  margin: 0 !important;
  padding: 11px;
  overflow: hidden;
  border-inline-end: 1px solid #edf0f4;
  background: #fbfcfe;
}

body.checkout-cart .recommended-products-section .product-thumb > .image .product-img,
body.checkout-cart .recommended-products-section .product-thumb > .image .product-img > div {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
}

body.checkout-cart .recommended-products-section .product-thumb > .image img {
  width: 100% !important;
  height: 148px !important;
  object-fit: contain;
  transition: transform .2s ease;
}

body.checkout-cart .recommended-products-section .product-thumb:hover > .image img {
  transform: scale(1.035);
}

body.checkout-cart .recommended-products-section .product-thumb > .image .countdown {
  display: none !important;
}

body.checkout-cart .recommended-products-section .product-thumb > .image .product-labels {
  z-index: 2 !important;
}

body.checkout-cart .recommended-products-section .product-thumb > .image .product-label {
  max-width: 98px !important;
}

/* The theme emits the discount as the literal string "-80 %". Left in an RTL
   context bidi reorders it to "% 80-", detaching the minus from the number.
   Isolating the badge as LTR keeps it readable as "-80 %". */
body.checkout-cart .recommended-products-section .product-thumb > .image .product-label b {
  display: block;
  padding: 4px 7px !important;
  border-radius: 6px !important;
  direction: ltr;
  unicode-bidi: isolate;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

body.checkout-cart .recommended-products-section .caption {
  display: flex !important;
  min-width: 0;
  padding: 13px 12px !important;
  flex-direction: column;
  align-items: stretch;
}

html[dir="ltr"] body.checkout-cart .recommended-products-section .caption {
  padding: 13px 12px !important;
}

/* The theme insets .name by a further 10px on top of the caption's own padding. */
body.checkout-cart .recommended-products-section .caption .name {
  min-height: 44px;
  margin: 0 !important;
  padding: 0 !important;
}

body.checkout-cart .recommended-products-section .caption .name a {
  display: -webkit-box;
  overflow: hidden;
  color: var(--cart-text) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body.checkout-cart .recommended-products-section .description,
body.checkout-cart .recommended-products-section .stats,
body.checkout-cart .recommended-products-section .rating,
body.checkout-cart .recommended-products-section .quickview-button,
body.checkout-cart .recommended-products-section .wish-group,
body.checkout-cart .recommended-products-section .extra-group {
  display: none !important;
}

body.checkout-cart .recommended-products-section .price {
  display: flex !important;
  min-height: 25px;
  margin: 7px 0 9px !important;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 3px 7px;
  color: var(--cart-text);
  font-size: 16px !important;
  font-weight: 800;
  line-height: 1.35;
}

body.checkout-cart .recommended-products-section .price-old {
  color: #8b94a4 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration-color: #bf4853 !important;
}

body.checkout-cart .recommended-products-section .price-new,
body.checkout-cart .recommended-products-section .price-normal {
  color: var(--cart-text) !important;
  font-size: 17px !important;
  font-weight: 800 !important;
}

body.checkout-cart .recommended-products-section .buttons-wrapper,
body.checkout-cart .recommended-products-section .button-group,
body.checkout-cart .recommended-products-section .cart-group {
  width: 100%;
}

body.checkout-cart .recommended-products-section .buttons-wrapper {
  margin-top: auto !important;
  position: static !important;
  opacity: 1 !important;
  transform: none !important;
}

body.checkout-cart .recommended-products-section .cart-group {
  display: flex;
  gap: 6px;
}

body.checkout-cart .recommended-products-section .cart-group .stepper {
  display: none !important;
}

/* Geometry only: these are theme .btn-cart buttons and keep the store's colour.
   The theme's own `padding: 15px 40px 17px` made these 46px tall and was part of
   what pushed the button out of the card. */
body.checkout-cart .recommended-products-section .btn-cart {
  display: grid !important;
  width: 100%;
  height: 40px !important;
  min-height: 0 !important;
  padding: 0 10px !important;
  place-items: center;
  border-radius: 7px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
  body.checkout-cart .recommended-products-section .product-thumb,
  body.checkout-cart .recommended-products-section .product-thumb > .image img {
    transition: none !important;
  }

  body.checkout-cart .recommended-products-section .product-thumb:hover,
  body.checkout-cart .recommended-products-section .product-thumb:hover > .image img {
    transform: none;
  }
}

/* Available offers: clear hierarchy, compact cards, savings shown in green. */
body.checkout-cart #availableOffersModal .modal-dialog {
  width: min(680px, calc(100% - 32px));
  max-width: 680px !important;
  margin: 48px auto;
}

body.checkout-cart #availableOffersModal .modal-content {
  overflow: hidden;
  border: 0 !important;
  border-radius: 16px !important;
  background: #fff;
  box-shadow: 0 24px 70px rgba(21, 35, 57, .22) !important;
}

body.checkout-cart #availableOffersModal .modal-header {
  display: flex;
  min-height: 86px;
  padding: 17px 20px !important;
  align-items: center;
  justify-content: space-between;
  border: 0 !important;
  border-bottom: 1px solid var(--cart-line) !important;
  background: #fff !important;
}

body.checkout-cart #availableOffersModal .available-offers-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

body.checkout-cart #availableOffersModal .available-offers-heading-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 10px;
  background: var(--cart-success-soft);
  color: var(--cart-success);
}

body.checkout-cart #availableOffersModal .modal-title {
  margin: 0 !important;
  color: var(--cart-text) !important;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.35;
}

body.checkout-cart #availableOffersModal .available-offers-heading-hint {
  margin: 3px 0 0;
  color: var(--cart-muted);
  font-size: 12px;
  line-height: 1.4;
}

body.checkout-cart #availableOffersModal .close {
  display: grid;
  width: 36px;
  height: 36px;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  flex: 0 0 36px;
  place-items: center;
  border: 1px solid var(--cart-line);
  border-radius: 50%;
  background: #fff;
  color: var(--cart-text) !important;
  font-size: 26px;
  line-height: 1;
  opacity: 1 !important;
}

body.checkout-cart #availableOffersModal .close span {
  color: var(--cart-text) !important;
  opacity: 1 !important;
}

body.checkout-cart #availableOffersModal .close:hover {
  border-color: #c6d1df;
  background: var(--cart-soft);
}

body.checkout-cart #availableOffersContent {
  max-height: min(68vh, 680px);
  overflow-y: auto;
  padding: 18px !important;
  background: #f5f7fa !important;
}

body.checkout-cart #availableOffersModal .offer-card {
  margin-bottom: 12px;
  padding: 18px;
  border: 1px solid var(--cart-line) !important;
  border-inline-start: 4px solid var(--cart-success) !important;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(21, 35, 57, .035);
  transition: border-color .2s ease, box-shadow .2s ease;
}

body.checkout-cart #availableOffersModal .offer-card:last-child {
  margin-bottom: 0;
}

body.checkout-cart #availableOffersModal .offer-card:hover {
  border-color: #c7d9ef !important;
  box-shadow: 0 7px 18px rgba(21, 35, 57, .07);
  transform: none;
}

body.checkout-cart #availableOffersModal .offer-header {
  display: flex !important;
  margin-top: 10px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

body.checkout-cart #availableOffersModal .offer-title {
  min-width: 190px;
  flex: 1 1 280px;
  margin: 0;
  color: var(--cart-text);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.5;
}

body.checkout-cart #availableOffersModal .offer-badge {
  display: inline-flex;
  margin: 0;
  padding: 5px 9px;
  align-items: center;
  border: 1px solid #cfe6da;
  border-radius: 99px;
  background: var(--cart-success-soft) !important;
  color: var(--cart-success) !important;
  font-size: 13px;
  font-weight: 800;
}

body.checkout-cart #availableOffersModal .skipped-badge {
  border-color: #f4d38a;
  background: #fff8e7 !important;
  color: #8b6215 !important;
}

body.checkout-cart #availableOffersModal .offer-code {
  display: inline-flex;
  margin: 0;
  padding: 6px 10px;
  border: 1px dashed var(--cart-line-strong);
  border-radius: 7px;
  background: var(--cart-soft);
  color: var(--cart-text);
  font-size: 14px;
  font-weight: 700;
}

body.checkout-cart #availableOffersModal .offer-discount {
  display: inline-flex;
  margin: 0;
  padding: 7px 12px;
  align-items: center;
  gap: 4px;
  border-radius: 8px;
  background: var(--cart-success-soft) !important;
  color: var(--cart-success) !important;
  font-size: 15px;
  font-weight: 800;
}

body.checkout-cart #availableOffersModal .offer-discount span {
  color: var(--cart-success) !important;
}

body.checkout-cart #availableOffersModal .offer-discount .riyal-svg {
  fill: currentColor !important;
}

body.checkout-cart #availableOffersModal .offer-description {
  margin: 10px 0 !important;
  color: var(--cart-muted) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

body.checkout-cart #availableOffersModal .offer-info {
  display: flex;
  margin: 11px 0 0;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 7px 14px;
}

body.checkout-cart #availableOffersModal .info-item {
  color: var(--cart-muted);
  font-size: 13px;
}

body.checkout-cart #availableOffersModal .offer-status-message,
body.checkout-cart #availableOffersModal .offer-savings {
  margin: 11px 0 0;
  padding: 9px 11px;
  border: 1px solid var(--cart-line);
  border-radius: 7px;
  background: var(--cart-soft);
  color: var(--cart-text);
  font-size: 13px;
  font-weight: 600;
}

body.checkout-cart #availableOffersModal .progress-bar-fill {
  background: var(--cart-success) !important;
}

/* Geometry only: keeps the store's own .btn colours. */
body.checkout-cart #availableOffersModal .apply-coupon-btn {
  display: flex;
  width: auto;
  min-width: 180px;
  min-height: 42px;
  margin: 14px 0 0;
  margin-inline-start: auto;
  padding: 10px 18px;
  align-items: center;
  justify-content: center;
  border-radius: 8px !important;
  font-size: 15px;
  font-weight: 800;
}

body.checkout-cart #availableOffersModal .apply-coupon-btn:hover,
body.checkout-cart #availableOffersModal .apply-coupon-btn:focus {
  transform: none;
}

body.checkout-cart #availableOffersModal .view-offer-products-link {
  display: inline-flex !important;
  margin-top: 12px !important;
  padding: 8px 11px !important;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--cart-line-strong) !important;
  border-radius: 7px !important;
  background: var(--cart-soft) !important;
  color: var(--cart-text) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

body.checkout-cart #availableOffersModal .view-offer-products-link:hover {
  border-color: #aab4c2 !important;
  background: #eef1f6 !important;
  box-shadow: none;
  transform: none;
}

body.checkout-cart #availableOffersModal .no-coupons-message {
  padding: 42px 20px;
  color: var(--cart-muted);
  text-align: center;
}

@media (min-width: 1200px) {
  body.checkout-cart #content .cart-page {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 356px;
  }

  body.checkout-cart .cart-summary-column {
    position: sticky;
    top: 92px;
  }
}

@media (min-width: 769px) and (max-width: 1199px) {
  body.checkout-cart #content .cart-page {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
  }

  body.checkout-cart #content .cart-page > form,
  body.checkout-cart #content .cart-page > .cart-summary-column {
    width: 100% !important;
  }

  body.checkout-cart #content .cart-table tbody td.td-product {
    grid-template-columns: 96px minmax(180px, 1fr) 128px;
    column-gap: 18px;
  }

  body.checkout-cart .image-product {
    width: 96px;
  }

  body.checkout-cart .image-product img {
    height: 92px;
  }

  body.checkout-cart .cart-summary-shell {
    max-width: 620px;
    margin-inline-start: auto;
  }
}

@media (max-width: 768px) {
  body.checkout-cart {
    padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.checkout-cart #checkout-cart,
  body.checkout-cart .cart-page-heading-container {
    padding-inline: 12px;
  }

  body.checkout-cart #checkout-cart > .row > #content {
    padding-inline: 0 !important;
  }

  body.checkout-cart h1.cart-page-heading {
    margin: 8px 0 18px !important;
    font-size: 25px !important;
  }

  body.checkout-cart .cart-goal-banner {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    margin-bottom: 14px;
    padding: 12px;
    column-gap: 10px;
    row-gap: 9px;
  }

  body.checkout-cart .cart-goal-icon {
    width: 38px;
    height: 38px;
  }

  body.checkout-cart .cart-goal-copy strong {
    font-size: 13px;
  }

  body.checkout-cart .cart-goal-copy span {
    font-size: 11px;
  }

  body.checkout-cart #content .cart-page {
    display: block !important;
  }

  body.checkout-cart #content .cart-table thead {
    display: none !important;
  }

  body.checkout-cart #content .cart-table tbody,
  body.checkout-cart #content .cart-table tbody tr {
    display: block !important;
  }

  body.checkout-cart #content .cart-table tbody tr {
    padding: 0 !important;
    border: 0 !important;
  }

  body.checkout-cart #content .cart-table tbody tr + tr {
    border-top: 1px solid var(--cart-line) !important;
  }

  body.checkout-cart #content .cart-table > .table-responsive table tbody tr td.td-product {
    display: grid !important;
    grid-template-columns: 94px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 8px 12px !important;
    padding: 16px 14px !important;
  }

  body.checkout-cart #content .cart-table tbody td.text-center {
    display: none !important;
  }

  body.checkout-cart .cart-product-content {
    display: contents !important;
  }

  body.checkout-cart .image-product {
    grid-column: 1;
    grid-row: 1;
    width: 94px;
    align-self: start;
  }

  body.checkout-cart .image-product a {
    min-height: 84px;
  }

  body.checkout-cart .image-product img {
    width: 88px !important;
    height: 84px !important;
  }

  body.checkout-cart .cart-product-info {
    grid-column: 2;
    grid-row: 1;
    width: auto !important;
    max-width: 100%;
    min-width: 0;
    align-self: start;
    overflow: hidden;
  }

  body.checkout-cart .cart-product-info > a {
    display: -webkit-box;
    margin-bottom: 4px;
    overflow: hidden;
    font-size: 15px !important;
    line-height: 1.5 !important;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body.checkout-cart .cart-product-info small,
  body.checkout-cart .cart-product-info .cart-option-line {
    display: block;
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  body.checkout-cart .cart-unit-price-mobile {
    display: block !important;
    grid-column: 2;
    grid-row: 2;
    width: 100% !important;
    margin: 0 !important;
    align-self: center;
    text-align: start !important;
  }

  body.checkout-cart .cart-unit-price-mobile strong {
    font-size: 17px !important;
  }

  body.checkout-cart .cart-unit-price-mobile .price-row,
  body.checkout-cart .cart-unit-price-mobile .regular-unit-price {
    justify-content: flex-start !important;
    text-align: start !important;
  }

  body.checkout-cart .btn-qty {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    justify-self: stretch;
    width: 94px !important;
  }

  body.checkout-cart .btn-qty .stepper {
    grid-template-columns: 30px 34px 30px;
    width: 94px !important;
    height: 34px !important;
  }

  body.checkout-cart .btn-qty .stepper button,
  body.checkout-cart .btn-qty .stepper input {
    height: 32px !important;
    font-size: 12px;
  }

  body.checkout-cart .cart-product-quantity-warning,
  body.checkout-cart .cart-product-content > .text-danger {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  body.checkout-cart .cart-summary-column {
    margin-top: 14px !important;
  }

  body.checkout-cart .cart-summary-shell {
    padding: 16px 14px;
  }

  body.checkout-cart .cart-summary-heading {
    font-size: 19px;
  }

  body.checkout-cart .cart-checkout-block {
    display: none !important;
  }

  body.checkout-cart .mobile-sticky-checkout-bar {
    display: flex !important;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    min-height: 72px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    align-items: center;
    border-top-color: var(--cart-line);
    background: #fff;
    box-shadow: 0 -6px 18px rgba(22, 35, 55, .1);
    gap: 10px;
  }

  body.checkout-cart .mobile-sticky-checkout-bar .checkout-cta {
    height: var(--cart-cta-height);
    border-radius: var(--cart-cta-radius) !important;
    background: var(--cart-cta) !important;
    color: #fff !important;
    box-shadow: 0 5px 14px rgba(22, 35, 55, .18);
  }

  body.checkout-cart .mobile-sticky-checkout-bar .checkout-cta:hover,
  body.checkout-cart .mobile-sticky-checkout-bar .checkout-cta:focus,
  body.checkout-cart .mobile-sticky-checkout-bar .checkout-cta:active {
    background: var(--cart-cta-hover) !important;
  }

  /* The express module drops this to 44px inside the sticky bar; keep the pair
     the same height there too. */
  body.checkout-cart .mobile-sticky-checkout-bar .moyasar-applepay-express-cart {
    height: var(--cart-cta-height) !important;
    min-height: var(--cart-cta-height) !important;
    --apple-pay-button-height: var(--cart-cta-height) !important;
  }

  body.checkout-cart .recommended-products-section {
    margin-top: 24px !important;
  }

  body.checkout-cart .recommended-products-title {
    font-size: 19px !important;
  }

  body.checkout-cart .recommended-products-header {
    margin-bottom: 11px;
    gap: 10px;
  }

  body.checkout-cart .recommended-products-hint {
    font-size: 12px;
  }

  body.checkout-cart .recommended-products-section .product-layout {
    flex-basis: min(82vw, 300px);
  }

  body.checkout-cart .recommended-products-section .product-thumb {
    grid-template-columns: 104px minmax(0, 1fr);
  }

  body.checkout-cart .recommended-products-section .product-thumb > .image {
    width: 104px !important;
  }

  body.checkout-cart #availableOffersModal {
    padding-inline: 0 !important;
  }

  body.checkout-cart #availableOffersModal .modal-dialog {
    width: calc(100% - 20px);
    max-width: none !important;
    margin: 10px auto;
  }

  body.checkout-cart #availableOffersModal .modal-content {
    border-radius: 14px !important;
  }

  body.checkout-cart #availableOffersModal .modal-header {
    min-height: 76px;
    padding: 14px !important;
  }

  body.checkout-cart #availableOffersModal .available-offers-heading-icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  body.checkout-cart #availableOffersModal .modal-title {
    font-size: 18px;
  }

  body.checkout-cart #availableOffersModal .available-offers-heading-hint {
    display: none;
  }

  body.checkout-cart #availableOffersContent {
    max-height: calc(100vh - 112px);
    padding: 12px !important;
  }

  body.checkout-cart #availableOffersModal .offer-card {
    padding: 14px;
  }

  body.checkout-cart #availableOffersModal .offer-title {
    min-width: 0;
    flex-basis: 100%;
    font-size: 15px;
  }

  body.checkout-cart #availableOffersModal .apply-coupon-btn {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 390px) {
  body.checkout-cart #content .cart-table > .table-responsive table tbody tr td.td-product {
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 8px 10px !important;
    padding-inline: 10px !important;
  }

  body.checkout-cart .image-product,
  body.checkout-cart .btn-qty {
    width: 86px !important;
  }

  body.checkout-cart .image-product img {
    width: 82px !important;
  }

  body.checkout-cart .btn-qty .stepper {
    grid-template-columns: 28px 30px 28px;
    width: 86px !important;
  }

  body.checkout-cart .mobile-sticky-checkout-bar .totals-stack .value {
    font-size: 15px;
  }

  body.checkout-cart .mobile-sticky-checkout-bar .checkout-cta {
    padding-inline: 12px;
    font-size: 14px;
  }
}