/* Oatra Cart — Figma redesign (node 23-483) */

.cart-oatra-page {
  --co-bg: #ffffff;
  --co-surface: #f5f5f5;
  --co-image-bg: #f9f6f2;
  --co-border: #e8e8e8;
  --co-ink: #000000;
  --co-muted: #6b6b6b;
  --co-radius: 20px;
  --co-radius-sm: 12px;
  --co-pad-y: 50px;
  --co-pad-x: 100px;
  --co-gap: 48px;

  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: var(--co-pad-y) var(--co-pad-x);
  box-sizing: border-box;
  background: var(--co-bg);
}

.cart-oatra-page .breadcrumb-section {
  display: none;
}

.cart-oatra-title {
  margin: 0 0 20px;
  font-family: var(--font-heading);
  font-size:30px;
  font-weight: 700;
  line-height: 1.05;
  color: var(--co-ink);
  letter-spacing: -0.02em;
}

.cart-oatra-page .cart-products-with-totals {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--co-gap);
  margin-left: 0;
  margin-right: 0;
}

.cart-oatra-page .cart-products-with-totals > [class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}

.cart-oatra-page .cart-products-with-totals > .col-lg-8 {
  flex: 1 1 0;
  max-width: none;
}

.cart-oatra-page .cart-products-with-totals > .col-lg-4 {
  flex: 0 0 380px;
  max-width: 380px;
}

/* ---------- Products list ---------- */

.cart-oatra-page .section-cart-products .section-title {
  display: none;
}

.cart-oatra-page .section-cart-products .header-wrapper {
  display: none;
}

.cart-oatra-page .template_for_cart_products_list .cart-product-row-wrapper {
  border: none;
  border-bottom: 1px solid var(--co-border);
  border-radius: 0;
  margin: 0;
  padding: 28px 0;
}

.cart-oatra-page .template_for_cart_products_list .cart-product-row-wrapper:first-child {
  padding-top: 0;
}

.cart-oatra-page .template_for_cart_products_list .cart-product-row-wrapper:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.cart-oatra-page .cart-product-row {
  display: grid !important;
  grid-template-columns: 140px minmax(0, 1fr) auto;
  grid-template-areas:
    "image details delete"
    "image price delete"
    "image qty delete";
  gap: 8px 24px;
  align-items: start;
  padding: 0;
}

.cart-oatra-page .cart-product-col-img {
  grid-area: image;
  width: 140px;
  padding: 0;
}

.cart-oatra-page .cart-product-col-img a {
  display: block;
  background: var(--co-image-bg);
  border-radius: var(--co-radius-sm);
  padding: 16px;
  line-height: 0;
}

.cart-oatra-page .cart-product-col-img img {
  width: 100%;
  height: auto;
  max-height: 120px;
  object-fit: contain;
}

.cart-oatra-page .cart-product-col-details {
  grid-area: details;
  padding: 0;
  min-width: 0;
}

.cart-oatra-page .cart-product-col-details h1 {
  margin: 0;
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--co-ink);
}

.cart-oatra-page .cart-product-col-details h1 a {
  color: inherit;
  text-decoration: none;
}

.cart-oatra-page .cart-product-col-details h1 a:hover {
  opacity: 0.75;
}

.cart-oatra-page .cart-product-prices {
  grid-area: price;
  padding: 0;
  width: auto;
}

.cart-oatra-page .cart-product-prices .totals,
.cart-oatra-page .cart-product-prices .cart-product-total-price {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  color: var(--co-ink);
}

.cart-oatra-page .cart-product-prices .cart-product-total-before-price {
  color: var(--co-muted);
  font-size: 14px;
}

.cart-oatra-page .cart-products-action {
  grid-area: qty;
  padding: 8px 0 0;
  width: auto;
}

.cart-oatra-page .cart-product-delete {
  grid-area: delete;
  align-self: end;
  justify-self: end;
  width: auto;
  padding: 0;
  text-align: center;
}

.cart-oatra-page .cart-product-delete a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--co-ink);
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.cart-oatra-page .cart-product-delete a:hover {
  opacity: 1;
}

.cart-oatra-page .icon-delete::before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0'/%3E%3C/svg%3E");
  font-family: inherit;
  font-size: 0;
}

/* Quantity stepper */

.cart-oatra-qty-stepper {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  direction: ltr;
}

.cart-oatra-qty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--co-surface);
  color: var(--co-ink);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.cart-oatra-qty-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.cart-oatra-qty-btn:disabled:hover {
  background: var(--co-surface);
}

.cart-oatra-qty-value {
  min-width: 20px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  color: var(--co-ink);
}

.cart-oatra-page .cart-product-quantity-dropdown select.cart-oatra-qty-select-hidden,
.cart-oatra-page .cart-oatra-qty-stepper select {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.cart-oatra-page .cart-product-quantity-dropdown .form-group,
.cart-oatra-page .cart-product-quantity-dropdown > div {
  margin: 0;
}

/* Custom fields / add-ons */

.cart-oatra-page .custom-field-row,
.cart-oatra-page .product-custom-fields,
.cart-oatra-page .cart-product-custom-fields {
  margin-top: 8px;
  font-size: 14px;
  color: var(--co-muted);
}

/* Gift card in products column */

.cart-oatra-page .cart-gift-card {
  margin-top: 24px;
  padding: 20px;
  border: 1px solid var(--co-border);
  border-radius: var(--co-radius-sm);
  background: var(--co-bg);
}

/* ---------- Summary sidebar ---------- */

.cart-oatra-sidebar .section-title {
  display: none;
}

.cart-oatra-summary-card {
  background: var(--co-surface);
  border-radius: var(--co-radius);
  padding: 28px 24px;
  margin-bottom: 24px;
}

.cart-oatra-summary-card .cart-oatra-actions {
  margin-top: 0;
}

.cart-oatra-summary-coupon {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #e0e0e0;
}

.cart-oatra-summary-card .cart-oatra-actions__checkout {
  margin-top: 24px;
}

.cart-oatra-summary-card .cart-oatra-actions__continue {
  margin-top: 12px;
}

.cart-oatra-summary-card .cart-oatra-apple-pay {
  margin-top: 12px;
}

.cart-oatra-summary-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e0e0e0;
}

.cart-oatra-summary-total-row__label {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--co-ink);
}

.cart-oatra-summary-total-row__value {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--co-ink);
  text-align: end;
}

.cart-oatra-tax-note {
  display: block;
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  color: var(--co-muted);
  line-height: 1.4;
}

.cart-oatra-page .cart-product-quantity-dropdown select {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.cart-oatra-page .cart-totals-div {
  font-size: 15px;
}

.cart-oatra-page .cart-totals-div .cart-totals-row-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border: none;
  margin: 0;
  background: transparent;
}

.cart-oatra-page .cart-totals-div .cart-totals-row-wrapper .flex-grow-1 {
  color: var(--co-muted);
  font-weight: 400;
}

.cart-oatra-page .cart-totals-div .cart-totals-row-wrapper .flex-shrink-0 {
  width: auto !important;
  color: var(--co-ink);
  font-weight: 500;
  text-align: end;
}

/* Coupon */

.cart-oatra-page .coupon-form,
.cart-oatra-page .cart-oatra-summary-coupon {
  margin-top: 0 !important;
}

.cart-oatra-page .coupon-form h4 {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--co-ink);
  margin-bottom: 12px;
}

.cart-oatra-page .coupon-form .form-control {
  height: 48px;
  border: 1px solid var(--co-border);
  border-radius: var(--co-radius-sm);
  font-size: 14px;
}

.cart-oatra-page .coupon-form .btn-primary {
  min-width: 88px;
  height: 48px;
  margin-inline-start: 12px;
  border: none;
  border-radius: var(--co-radius-sm);
  background: var(--co-ink);
  color: #ffffff;
  font-weight: 600;
}

.cart-oatra-page .coupon-form .btn-primary:hover {
  background: #222222;
}

/* Action buttons */

.cart-oatra-page .cart-oatra-summary-card .cart-oatra-actions .btn-primary,
.cart-oatra-page .cart-oatra-summary-card .cart-oatra-actions .btn-outline-primary,
.cart-oatra-page .cart-oatra-summary-card .cart-oatra-actions .btn-disabled,
.cart-oatra-page .cart-oatra-actions .btn-primary,
.cart-oatra-page .cart-oatra-actions .btn-outline-primary,
.cart-oatra-page .cart-oatra-actions .btn-disabled {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 24px;
  border-radius: 9999px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
}

.cart-oatra-page .cart-oatra-summary-card .cart-oatra-actions .btn-primary,
.cart-oatra-page .cart-oatra-actions .btn-primary {
  border: none;
  background: var(--co-ink);
  color: #ffffff;
}

.cart-oatra-page .cart-oatra-summary-card .cart-oatra-actions .btn-primary:hover,
.cart-oatra-page .cart-oatra-actions .btn-primary:hover {
  background: #222222;
  color: #ffffff;
}

.cart-oatra-page .cart-oatra-summary-card .cart-oatra-actions .btn-outline-primary,
.cart-oatra-page .cart-oatra-actions .btn-outline-primary {
  border: 1px solid var(--co-ink);
  background: transparent;
  color: var(--co-ink);
}

.cart-oatra-page .cart-oatra-summary-card .cart-oatra-actions .btn-outline-primary:hover,
.cart-oatra-page .cart-oatra-actions .btn-outline-primary:hover {
  background: var(--co-ink);
  color: #ffffff;
}

.cart-oatra-page .cart-oatra-summary-card .cart-oatra-actions .btn-disabled,
.cart-oatra-page .cart-oatra-actions .btn-disabled {
  background: #cccccc;
  border-color: #cccccc;
  color: #ffffff;
  pointer-events: none;
}

.cart-oatra-page .gift-card-toggle-btn {
  border-radius: 9999px !important;
}

.cart-oatra-page .cart-discount-rule-wrapper {
  border-radius: var(--co-radius-sm);
  border-color: var(--co-border);
}

/* Empty cart */

.cart-oatra-page .cart-empty {
  padding: 80px 0;
  text-align: center;
}

.cart-oatra-page .cart-empty h2 {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  color: var(--co-ink);
}

.cart-oatra-page .cart-empty .btn-outline-primary {
  min-width: 220px;
  border-radius: 9999px;
  border-color: var(--co-ink);
  color: var(--co-ink);
  font-weight: 600;
}

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

@media (max-width: 1199px) {
  .cart-oatra-page {
    --co-pad-x: 40px;
    --co-gap: 32px;
  }

  .cart-oatra-page .cart-products-with-totals > .col-lg-4 {
    flex: 0 0 340px;
    max-width: 340px;
  }
}

@media (max-width: 991px) {
  .cart-oatra-page {
    --co-pad-y: 36px;
    --co-pad-x: 24px;
  }

  .cart-oatra-page .cart-products-with-totals > .col-lg-8,
  .cart-oatra-page .cart-products-with-totals > .col-lg-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .cart-oatra-title {
    margin-bottom: 10px;
    font-size: 25px;
  }

  .cart-oatra-page .cart-product-row {
    grid-template-columns: 110px minmax(0, 1fr) auto;
    gap: 8px 16px;
  }

  .cart-oatra-page .cart-product-col-img {
    width: 110px;
  }
}

@media (max-width: 575px) {
  .cart-oatra-page {
    --co-pad-y: 28px;
    --co-pad-x: 16px;
  }

  .cart-oatra-page .cart-product-row {
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-areas:
      "image details"
      "image price"
      "image qty"
      "delete delete";
  }

  .cart-oatra-page .cart-product-delete {
    justify-self: end;
    margin-top: 8px;
  }

  .cart-oatra-summary-total-row__label,
  .cart-oatra-summary-total-row__value {
    font-size: 17px;
  }

  .cart-oatra-summary-card {
    padding: 14px 10px;
    margin-bottom: 0;
}

.cart-oatra-page .cart-oatra-summary-card .cart-oatra-actions .btn-primary, .cart-oatra-page .cart-oatra-summary-card .cart-oatra-actions .btn-outline-primary, .cart-oatra-page .cart-oatra-summary-card .cart-oatra-actions .btn-disabled, .cart-oatra-page .cart-oatra-actions .btn-primary, .cart-oatra-page .cart-oatra-actions .btn-outline-primary, .cart-oatra-page .cart-oatra-actions .btn-disabled {
  padding: 10px 22px;
  font-size: 14px;
}

.cart-oatra-page .coupon-form .form-control {
   height: auto !important; 
}

.cart-oatra-page .coupon-form .btn-primary {
  height: auto !important;
}

.cart-oatra-summary-coupon {
  padding-top: 20px;
}

.cart-oatra-page .coupon-form h4 {
  font-size: 14px;
}

.cart-oatra-page .cart-product-col-details h1 {
  font-size: 16px;
}

.cart-oatra-page .cart-product-row {
  gap: 8px 30px;
}

.cart-oatra-title {
  font-size: 20px;
}

.cart-product-prices > div {
  margin-right: unset !important;
}
}

/* ≤390px — الصف الأول: الصورة وقصادها اسم المنتج،
   الصف الثاني: السعر وقصاده الكمية، وتحتهم زر الحذف في مكانه */
@media (max-width: 390px) {
  .cart-oatra-page .cart-product-row {
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-areas:
      "image details"
      "price qty"
      "delete delete";
    gap: 12px 16px;
    align-items: center;
  }

  .cart-oatra-page .cart-product-col-img {
    width: 96px;
  }

  .cart-oatra-page .cart-product-col-details {
    align-self: center;
  }

  .cart-oatra-page .cart-product-prices {
    align-self: center;
    justify-self: start;
  }

  .cart-oatra-page .cart-products-action {
    align-self: center;
    justify-self: end;
    padding: 0;
  }

  .cart-oatra-page .cart-product-delete {
    justify-self: end;
    margin-top: 4px;
  }
}