/* Cart, checkout and thank-you page (classic WooCommerce markup, WooCommerce's own CSS off).
   Same quiet look as product pages: hairlines, no boxes except the totals / order summary. */

.woocommerce-cart .ree-shop,
.woocommerce-checkout .ree-shop{ max-width: 1200px }

.ree-shop .ree-page-title{
  margin: calc(1.25*var(--u)) 0 calc(1.5*var(--u));
  font-family: var(--ree-font-head);
  font-size: clamp(24px, 1.6vw + 14px, 34px);
  font-weight: 400;
}

.ree-shop .screen-reader-text{ position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }

/* Shared form controls */
.ree-shop .input-text,
.ree-shop select,
.ree-shop textarea{
  width: 100%;
  min-height: 46px;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid rgba(26,26,26,.2);
  border-radius: 0;
  background: #fff;
  color: var(--ree-text);
  font: inherit;
  font-size: 14px;
}
.ree-shop textarea{ min-height: 90px; resize: vertical }
.ree-shop .input-text:focus, .ree-shop select:focus, .ree-shop textarea:focus{ outline: none; border-color: var(--ree-blue) }
.ree-shop .button,
.ree-shop button.button{
  display: inline-block;
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid var(--ree-text);
  border-radius: 0;
  background: transparent;
  color: var(--ree-text);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  line-height: 44px;
}
.ree-shop .button:hover{ background: var(--ree-text); color: #fff }
.ree-shop .button:disabled, .ree-shop .button[disabled]{ opacity: .4; cursor: default }
.ree-shop .checkout-button,
.ree-shop #place_order{
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 54px;
  border: 0;
  background: var(--ree-blue);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  line-height: 54px;
}
.ree-shop .checkout-button:hover, .ree-shop #place_order:hover{ background: var(--ree-blue-hover); color: #fff }

/* selectWoo (province and city search boxes) */
.ree-shop .select2-container{ width: 100% !important }
.ree-shop .select2-container .select2-selection--single{ height: 46px; border: 1px solid rgba(26,26,26,.2); border-radius: 0; background: #fff }
.ree-shop .select2-container .select2-selection__rendered{ line-height: 44px; padding-inline: 12px 30px; color: var(--ree-text) }
.ree-shop .select2-container .select2-selection__arrow{ height: 44px; left: 6px; right: auto }
.select2-dropdown{ border-color: rgba(26,26,26,.2); border-radius: 0; font-family: var(--ree-font-body) }
.select2-container--default .select2-results__option--highlighted[aria-selected]{ background: var(--ree-blue) }

/* ---------- Cart ---------- */
.woocommerce-cart .woocommerce{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: 0 clamp(24px, 4vw, 56px);
  align-items: start;
}
.woocommerce-cart .woocommerce > *{ grid-column: 1 / -1 }
.woocommerce-cart .woocommerce-cart-form{ grid-column: 1 }
.woocommerce-cart .cart-collaterals{ grid-column: 2 }

table.shop_table{ width: 100%; border-collapse: collapse; font-size: 14px }
table.cart thead th{ padding: 0 0 12px; font-size: 12.5px; font-weight: 400; color: #777; text-align: right; border-bottom: 1px solid rgba(26,26,26,.14) }
table.cart td{ padding: 18px 0; border-bottom: 1px solid rgba(26,26,26,.1); vertical-align: middle }
table.cart td + td, table.cart th + th{ padding-inline-start: 14px }
table.cart .product-thumbnail{ width: 88px }
table.cart .product-thumbnail img{ width: 88px; height: 110px; object-fit: cover; display: block; background: var(--ree-footer-bg) }
table.cart .product-name a{ color: var(--ree-text); font-weight: 500; text-decoration: none }
table.cart .product-name a:hover{ color: var(--ree-blue) }
/* "سایز دور مچ (سانتی‌متر): ۱۷" on one line per option; long labels wrap with their value. */
table.cart .product-name dl.variation{ margin: 6px 0 0; font-size: 12.5px; line-height: 1.9; color: #6A6A6A }
table.cart .product-name dl.variation dt{ display: inline; margin: 0 }
table.cart .product-name dl.variation dd{ display: inline; margin: 0 4px 0 0; color: var(--ree-text) }
table.cart .product-name dl.variation dd::after{ content: ""; display: block }
table.cart .product-name dl.variation p{ display: inline; margin: 0 }
table.cart .product-price, table.cart .product-subtotal{ white-space: nowrap }
table.cart .product-subtotal{ color: var(--ree-blue); font-weight: 500 }
table.cart .product-remove{ width: 28px }
table.cart a.remove{
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  color: #888; font-size: 18px; text-decoration: none;
}
table.cart a.remove:hover{ background: #A3261C; color: #fff }
table.cart .quantity .qty{ width: 64px; min-height: 40px; text-align: center; padding: 6px }
table.cart td.actions{ padding-top: 20px; border-bottom: 0 }
table.cart td.actions .coupon{ display: inline-flex; gap: 8px; align-items: center }
table.cart td.actions .coupon label{ display: none }
table.cart td.actions .coupon .input-text{ width: 180px }
table.cart td.actions > .button{ float: left }

.cart_totals{ padding: 22px; background: #fff }
.cart_totals h2{ margin: 0 0 12px; font-size: 16px; font-weight: 500 }
.cart_totals table th, .cart_totals table td{ padding: 12px 0; border-bottom: 1px solid rgba(26,26,26,.1); text-align: right; vertical-align: top }
.cart_totals table th{ width: 40%; font-weight: 400; color: #666 }
.cart_totals .order-total th, .cart_totals .order-total td{ border-bottom: 0; font-size: 16px; color: var(--ree-text) }
.cart_totals .order-total .amount{ color: var(--ree-blue); font-weight: 500 }
.wc-proceed-to-checkout{ margin-top: 16px }

/* Shipping choices (cart totals and checkout summary) */
ul#shipping_method{ list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
ul#shipping_method li{ display: flex; align-items: center; gap: 8px }
ul#shipping_method input{ accent-color: var(--ree-blue); margin: 0 }
.woocommerce-shipping-destination, .woocommerce-shipping-calculator{ margin: 8px 0 0; font-size: 12px; color: #888 }

.cart-empty.woocommerce-info{ grid-column: 1 / -1 }
.return-to-shop .button{ margin-top: 8px }

/* ---------- Checkout ---------- */
form.checkout{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: 0 clamp(24px, 4vw, 56px);
  align-items: start;
}
form.checkout > *{ grid-column: 1 }
form.checkout #order_review_heading{ grid-column: 2; grid-row: 1; margin: 0; padding: 22px 22px 0; background: #fff; font-size: 16px; font-weight: 500 }
form.checkout #order_review{ grid-column: 2; grid-row: 2 / span 3; padding: 12px 22px 22px; background: #fff }
form.checkout #customer_details{ grid-row: 1 / span 3 }
.col2-set .col-1, .col2-set .col-2{ width: auto; float: none }
.woocommerce-billing-fields h3, .woocommerce-additional-fields h3{ margin: 0 0 14px; font-size: 16px; font-weight: 500 }
.woocommerce-additional-fields{ margin-top: 18px }

.woocommerce-billing-fields__field-wrapper{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px }
.ree-shop .form-row{ margin: 0 0 14px }
.ree-shop .form-row-wide{ grid-column: 1 / -1 }
.ree-shop .form-row label{ display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500 }
.ree-shop .form-row .required{ color: #A3261C; text-decoration: none; border: 0 }
.ree-shop .form-row .optional{ display: none }
.ree-shop .form-row.woocommerce-invalid .input-text,
.ree-shop .form-row.woocommerce-invalid .select2-selection{ border-color: #A3261C }
.ree-hidden-row{ display: none !important }

table.woocommerce-checkout-review-order-table th,
table.woocommerce-checkout-review-order-table td{ padding: 12px 0; border-bottom: 1px solid rgba(26,26,26,.1); text-align: right; vertical-align: top }
table.woocommerce-checkout-review-order-table thead th{ font-size: 12.5px; font-weight: 400; color: #777 }
table.woocommerce-checkout-review-order-table .product-total,
table.woocommerce-checkout-review-order-table tfoot td{ text-align: left; white-space: nowrap }
table.woocommerce-checkout-review-order-table .product-name dl.variation{ margin: 4px 0 0; font-size: 12px; color: #6A6A6A }
table.woocommerce-checkout-review-order-table .product-name dl.variation *{ display: inline; margin: 0 }
table.woocommerce-checkout-review-order-table tfoot th{ font-weight: 400; color: #666 }
table.woocommerce-checkout-review-order-table tfoot td ul#shipping_method li{ justify-content: flex-end }
table.woocommerce-checkout-review-order-table .order-total th,
table.woocommerce-checkout-review-order-table .order-total td{ border-bottom: 0; font-size: 16px; color: var(--ree-text) }
table.woocommerce-checkout-review-order-table .order-total .amount{ color: var(--ree-blue); font-weight: 500 }

#payment{ margin-top: 10px }
#payment ul.payment_methods{ list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px }
#payment li.wc_payment_method{ padding: 12px 14px; border: 1px solid rgba(26,26,26,.15) }
#payment li.wc_payment_method:has(input:checked){ border-color: var(--ree-blue); background: rgba(36,59,143,.04) }
#payment li.wc_payment_method > label{ font-weight: 500; cursor: pointer }
#payment li.wc_payment_method input{ accent-color: var(--ree-blue); margin-inline-end: 6px }
#payment .payment_box{ margin-top: 6px; font-size: 12.5px; line-height: 1.9; color: #666 }
#payment .payment_box p{ margin: 0 }
.woocommerce-privacy-policy-text{ font-size: 12px; line-height: 1.9; color: #888 }
.woocommerce-privacy-policy-text p{ margin: 0 0 12px }
.woocommerce-terms-and-conditions-wrapper a{ color: inherit }

.woocommerce-form-coupon-toggle .woocommerce-info{ font-size: 13px }
.woocommerce-form-coupon-toggle a{ color: var(--ree-blue) }
form.checkout_coupon{ display: flex; gap: 8px; margin: 0 0 18px }
form.checkout_coupon p{ margin: 0 }
form.checkout_coupon p:first-child{ display: none }

/* ---------- Thank-you page ---------- */
.woocommerce-order{ max-width: 760px; margin: 0 auto }
.woocommerce-thankyou-order-received{ margin: 0 0 18px; font-family: var(--ree-font-head); font-size: clamp(20px, 1vw + 14px, 26px); line-height: 1.6 }
ul.woocommerce-order-overview{ list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 12.5px; color: #777 }
ul.woocommerce-order-overview strong{ display: block; font-size: 14px; color: var(--ree-text); font-weight: 500 }

.ree-pay{ margin: 0 0 28px; padding: clamp(18px, 3vw, 28px); background: #fff; border-top: 3px solid var(--ree-blue) }
.ree-pay__head{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-bottom: 16px; border-bottom: 1px solid rgba(26,26,26,.1) }
.ree-pay__head span{ display: block; font-size: 12.5px; color: #777 }
.ree-pay__head strong{ font-size: 20px; font-weight: 500; color: var(--ree-blue) }
.ree-pay__rows{ padding: 14px 0; border-bottom: 1px solid rgba(26,26,26,.1) }
.ree-pay__row{ display: grid; grid-template-columns: 90px 1fr auto; align-items: center; gap: 10px; padding: 8px 0 }
.ree-pay__row span{ font-size: 13px; color: #666 }
.ree-pay__row b{ font-size: 16px; font-weight: 500; letter-spacing: .04em; text-align: left; word-break: break-all }
.ree-copy{ padding: 4px 12px; border: 1px solid rgba(26,26,26,.25); background: transparent; font: inherit; font-size: 12.5px; cursor: pointer }
.ree-copy:hover{ border-color: var(--ree-blue); color: var(--ree-blue) }
.ree-copy.is-done{ background: var(--ree-blue); border-color: var(--ree-blue); color: #fff }
.ree-pay__owner{ margin: 6px 0 0; font-size: 13px; color: #555 }
.ree-pay__snapp{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; border-bottom: 1px solid rgba(26,26,26,.1) }
.ree-pay__snapp strong{ display: block; font-size: 15px; font-weight: 500 }
.ree-pay__snapp span{ font-size: 13px; color: #666 }
.ree-pay__btn{ padding: 10px 24px; background: var(--ree-blue); color: #fff; font-size: 14px; font-weight: 500; text-decoration: none }
.ree-pay__btn:hover{ background: var(--ree-blue-hover); color: #fff }
.ree-pay__steps{ padding-top: 16px; font-size: 13.5px; line-height: 2.1; color: #444 }
.ree-pay__steps strong{ font-size: 15px; color: var(--ree-text) }
.ree-pay__steps ol{ margin: 6px 0 10px; padding-inline-start: 20px }
.ree-pay__steps p{ margin: 0; font-size: 12.5px; color: #777 }

.woocommerce-order-details h2, .woocommerce-customer-details h2{ margin: 0 0 10px; font-size: 16px; font-weight: 500 }
.woocommerce-order-details table th, .woocommerce-order-details table td{ padding: 10px 0; border-bottom: 1px solid rgba(26,26,26,.1); text-align: right; vertical-align: top }
.woocommerce-order-details table tfoot th{ font-weight: 400; color: #666 }
.woocommerce-order-details .wc-item-meta{ list-style: none; margin: 4px 0 0; padding: 0; font-size: 12.5px; color: #6A6A6A }
.woocommerce-order-details .wc-item-meta p{ display: inline; margin: 0 }
.woocommerce-customer-details{ margin-top: 24px }
.woocommerce-customer-details address{ font-style: normal; font-size: 14px; line-height: 2 }
.ree-recipient{ margin: 14px 0 0; padding-top: 12px; border-top: 1px solid rgba(26,26,26,.1); font-size: 14px; line-height: 2 }
.ree-recipient div{ display: flex; gap: 8px }
.ree-recipient span{ min-width: 64px; color: #6A6A6A }
.ree-recipient a{ color: inherit }
.ree-pay__contact{ display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px }
.ree-pay__contact a{ padding: 4px 16px; border: 1px solid var(--ree-blue); color: var(--ree-blue); font-size: 13px; line-height: 1.9; text-decoration: none }
.ree-pay__contact a:hover{ background: var(--ree-blue); color: #fff }

/* ---------- Login / sign-up with mobile and SMS code ---------- */
.ree-otp{ max-width: 420px; margin: calc(1*var(--u)) auto calc(3*var(--u)); padding: clamp(20px, 4vw, 32px); background: #fff }
.ree-otp__title{ margin: 0; font-family: var(--ree-font-head); font-size: 24px; font-weight: 400 }
.ree-otp__lead{ margin: 6px 0 20px; font-size: 13.5px; line-height: 2; color: #666 }
.ree-otp__step label{ display: block; margin-bottom: 8px; font-size: 13px; font-weight: 500 }
.ree-otp__step label span{ font-weight: 400; color: #777 }
.ree-otp .input-text{ height: 52px; font-size: 18px; letter-spacing: .06em; text-align: center }
.ree-otp__code{ letter-spacing: .5em !important; font-size: 22px !important }
.ree-otp__submit{ display: block; width: 100%; margin-top: 12px; min-height: 52px; border: 0 !important; background: var(--ree-blue) !important; color: #fff !important; font-weight: 500 }
.ree-otp__submit:hover{ background: var(--ree-blue-hover) !important }
.ree-otp__submit.is-busy{ opacity: .6 }
.ree-otp__links{ display: flex; justify-content: space-between; margin-top: 12px }
.ree-otp__link{ padding: 4px 0; border: 0; background: none; color: var(--ree-blue); font: inherit; font-size: 13px; cursor: pointer }
.ree-otp__link:disabled{ color: #999; cursor: default }
.ree-otp__msg{ min-height: 1.9em; margin: 14px 0 0; font-size: 13px; line-height: 1.9; color: #3B6D11 }
.ree-otp__msg.is-bad{ color: #A3261C }
.woocommerce-account:not(.logged-in) .ree-page-title{ display: none }

/* ---------- Phone ---------- */
@media(max-width:900px){
  .woocommerce-cart .woocommerce, form.checkout{ grid-template-columns: minmax(0, 1fr) }
  .woocommerce-cart .cart-collaterals,
  form.checkout #order_review_heading,
  form.checkout #order_review{ grid-column: 1; grid-row: auto }
  form.checkout #customer_details{ grid-row: auto; margin-bottom: 22px }

  /* Cart rows become: photo | name, options, price, quantity. */
  table.cart thead{ display: none }
  table.cart tr.cart_item{ display: grid; grid-template-columns: 80px 1fr auto; grid-template-areas: "thumb name remove" "thumb price price" "thumb qty sub"; gap: 4px 12px; padding: 16px 0; border-bottom: 1px solid rgba(26,26,26,.1) }
  table.cart tr.cart_item td{ display: block; padding: 0; border: 0 }
  table.cart td + td{ padding-inline-start: 0 }
  table.cart .product-thumbnail{ grid-area: thumb; width: 80px }
  table.cart .product-thumbnail img{ width: 80px; height: 100px }
  table.cart .product-name{ grid-area: name }
  table.cart .product-remove{ grid-area: remove }
  table.cart .product-price{ grid-area: price; font-size: 13px; color: #666 }
  table.cart .product-quantity{ grid-area: qty }
  table.cart .product-subtotal{ grid-area: sub; align-self: center }
  table.cart tr:last-child, table.cart tr:last-child td{ display: block }
  table.cart td.actions .coupon{ display: flex; width: 100%; margin-bottom: 10px }
  table.cart td.actions .coupon .input-text{ flex: 1; width: auto }
  table.cart td.actions > .button{ float: none; width: 100% }
  .cart_totals{ margin-top: 18px; padding: 18px }

  .woocommerce-billing-fields__field-wrapper{ grid-template-columns: minmax(0, 1fr) }
  .ree-shop .form-row{ grid-column: 1 / -1 }
  .ree-pay__row{ grid-template-columns: 1fr auto; }
  .ree-pay__row span{ grid-column: 1 / -1 }
}

/* Quantity changes update the cart by themselves (checkout.js), so the «بروزرسانی سبد خرید» button is not needed. */
.woocommerce-cart button[name="update_cart"]{ display: none }

/* Thank-you page: the payment box already shows the amount and order code, so WooCommerce's summary line goes. */
.woocommerce-order:has(.ree-pay) ul.woocommerce-order-overview{ display: none }

/* Checkout summary: the product name links back to the product (size already picked); «تغییر» says so. */
.woocommerce-checkout-review-order-table .product-name a{ color: inherit; text-decoration: none }
.woocommerce-checkout-review-order-table .product-name a:hover{ color: var(--ree-blue) }
.woocommerce-checkout-review-order-table .ree-edit-item{ margin-inline-start: 6px; font-size: 12px; color: var(--ree-blue) !important; text-decoration: underline !important; text-underline-offset: 3px }

/* «درگاه آنلاین به‌زودی…» above the payment choices. */
.ree-pay-note{ margin: 18px 0 12px; padding: 10px 14px; background: #F3F5FA; border-inline-start: 3px solid var(--ree-blue); font-size: 12.5px; line-height: 2; color: #444 }