/* =============================================================================
   BagBliss — Cart
   -----------------------------------------------------------------------------
   Sirf cart page par load hoti hai (functions/enqueue/styles.php dekhein).
   Checkout ki tarah yahan bhi rang theme ke apne CSS variables se aate hain,
   koi hard-coded colour nahi — customizer badalne par khud adjust ho jata hai.

   TARTEEB: base rules pehle, media queries FILE KE AAKHIR mein.
   Media query specificity nahi barhati.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Page heading
   -------------------------------------------------------------------------- */
.woocommerce-cart .page-title,
.woocommerce-cart .entry-title {
  font-family: var(--site-secondary-font);
  font-weight: var(--heading-font-weight);
  font-size: 42px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--site-heading-color);
  margin: 0 0 36px;
}

/* -----------------------------------------------------------------------------
   2. Do-column layout: saman bayen, totals dayen (sticky)
   -------------------------------------------------------------------------- */
/* SPECIFICITY: theme in dono par `body.woocommerce-cart .woocommerce .X`
   (0,3,1) lagati hai aur unhein `width:60%` / `width:37%; float:right`
   deti hai — woh bhi media queries ke andar. Media query specificity nahi
   barhati, is liye yahan selector ko theme se UNCHA rakhna zaroori hai,
   warna grid layout toot jata hai. Isi wajah se neeche media queries mein
   bhi yahi lambe selectors dobara likhe gaye hain. */
body.woocommerce-cart .woocommerce {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  column-gap: 60px;
  align-items: start;
}

body.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper {
  grid-column: 1 / -1;
}

body.woocommerce-cart .woocommerce form.woocommerce-cart-form {
  grid-column: 1;
  display: block;
  width: auto;
  float: none;
  margin: 0;
  font-size: 15px;
}

body.woocommerce-cart .woocommerce .cart-collaterals {
  grid-column: 2;
  display: block;
  width: auto;
  float: none;
  position: sticky;
  top: 24px;
  margin: 0;
  padding-left: 0;
  font-size: 15px;
}

body.woocommerce-cart .woocommerce .cart-collaterals .cart_totals {
  width: auto;
  float: none;
}

/* cross-sells poori chaurai mein, neeche */
body.woocommerce-cart .woocommerce .cross-sells {
  grid-column: 1 / -1;
  width: auto;
  float: none;
  margin-top: 60px;
}

/* -----------------------------------------------------------------------------
   3. Cart table — grid rows, spreadsheet nahi
   -------------------------------------------------------------------------- */
.woocommerce-cart table.cart.woocommerce-cart-form__contents {
  width: 100%;
  border: none;
  border-collapse: collapse;
  margin: 0;
  background: transparent;
}

.woocommerce-cart table.cart thead th {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--site-border-color);
  padding: 0 0 14px;
  font-family: var(--site-secondary-font);
  font-weight: var(--heading-font-weight);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--site-heading-color);
  text-align: left;
}

.woocommerce-cart table.cart thead th.product-price,
.woocommerce-cart table.cart thead th.product-quantity {
  text-align: center;
}

.woocommerce-cart table.cart thead th.product-subtotal {
  text-align: right;
}

.woocommerce-cart table.cart tbody tr.cart_item {
  background: transparent;
}

.woocommerce-cart table.cart tbody tr.cart_item td {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--site-border-color);
  padding: 22px 0;
  vertical-align: middle;
}

/* thumbnail */
.woocommerce-cart table.cart td.product-thumbnail {
  width: 96px;
  padding-right: 20px;
}

.woocommerce-cart table.cart td.product-thumbnail a,
.woocommerce-cart table.cart td.product-thumbnail img {
  display: block;
  width: 96px;
  height: 116px;
  max-width: none;
  object-fit: cover;
  margin: 0;
  border-radius: 0;
}

/* naam + remove */
.woocommerce-cart table.cart td.product-name {
  padding-right: 24px;
  font-size: 15px;
  line-height: 1.45;
}

.woocommerce-cart table.cart td.product-name > a {
  display: block;
  color: var(--site-heading-color);
  font-weight: 500;
  text-decoration: none;
  margin-bottom: 6px;
}

.woocommerce-cart table.cart td.product-name > a:hover {
  color: var(--site-accent-color);
}

.woocommerce-cart table.cart td.product-name .variation {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--site-text-color);
}

/* desktop par mobile-price chhupi rehti hai */
.woocommerce-cart table.cart td.product-name .product-price-mobile {
  display: none;
}

.woocommerce-cart table.cart td.product-name a.remove {
  display: inline-block;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--site-text-color);
  background: none;
  border: none;
  border-bottom: 1px solid var(--site-border-color);
  border-radius: 0;
  text-decoration: none;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.woocommerce-cart table.cart td.product-name a.remove:hover {
  color: #D3341F;
  border-bottom-color: #D3341F;
  background: none;
}

/* price / subtotal */
.woocommerce-cart table.cart td.product-price {
  text-align: center;
  color: var(--site-text-color);
  font-size: 15px;
  white-space: nowrap;
}

.woocommerce-cart table.cart td.product-subtotal {
  text-align: right;
  color: var(--site-heading-color);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   4. Quantity — saaf stepper box
   -------------------------------------------------------------------------- */
.woocommerce-cart table.cart td.product-quantity {
  text-align: center;
  width: 130px;
}

.woocommerce-cart table.cart td.product-quantity .quantity {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  border: 1px solid var(--site-border-color);
  border-radius: var(--site-field-radius);
  overflow: hidden;
}

.woocommerce-cart table.cart td.product-quantity input.qty {
  width: 74px;
  height: 46px;
  padding: 0 6px;
  border: none;
  background: var(--site-bg-color);
  color: var(--site-heading-color);
  font-family: var(--site-main-font);
  /* 16px se kam nahi: iOS zoom kar deta hai */
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  box-shadow: none;
  -moz-appearance: textfield;
}

.woocommerce-cart table.cart td.product-quantity input.qty:focus {
  outline: none;
}

.woocommerce-cart table.cart td.product-quantity .quantity:focus-within {
  border-color: var(--site-heading-color);
}

/* -----------------------------------------------------------------------------
   5. Actions row — coupon + update cart
   -------------------------------------------------------------------------- */
/* DHYAN: yahan `display:flex` MAT lagayein. <td> par flex lagane se woh
   table-cell nahi rehta aur poora table layout bigar jata hai — thumbnail
   column 280px chaura ho gaya tha aur product ke naam 3 lines mein tootne
   lage the. Is liye table-cell hi rakh kar float se kaam liya hai. */
.woocommerce-cart table.cart td.actions {
  display: table-cell;
  background: transparent;
  border: none;
  padding: 26px 0 0;
  text-align: left;
  vertical-align: middle;
}

.woocommerce-cart table.cart td.actions::after {
  content: "";
  display: table;
  clear: both;
}

/* SPECIFICITY: theme in par bohot lambe selectors istemal karti hai, jaise
   `body.woocommerce-cart .woocommerce .woocommerce-cart-form tr:not(.cart_item)
    td.actions .coupon button[name=apply_coupon]`, aur "Apply coupon" ko
   jaan-boojh kar input ke ANDAR absolute rakhti hai (achha pattern hai).
   Us ke khilaf larne ke bajaye wahi pattern rakha hai, bas field ko theek
   box bana diya. Selector bilkul utna hi lamba hai taake barabari ho —
   cart.css theme.css ke baad load hoti hai, is liye barabari mein yeh jeetta hai. */
body.woocommerce-cart .woocommerce .woocommerce-cart-form tr:not(.cart_item) td.actions .coupon {
  display: inline-flex;
  align-items: center;
  position: relative;
  width: auto;
  float: left;
  margin: 0;
  padding: 0;
}

body.woocommerce-cart .woocommerce .woocommerce-cart-form tr:not(.cart_item) td.actions .coupon label {
  display: none;
}

body.woocommerce-cart .woocommerce .woocommerce-cart-form tr:not(.cart_item) td.actions .coupon #coupon_code {
  width: 280px;
  height: 48px;
  margin: 0;
  padding: 0 104px 0 16px;
  border: 1px solid var(--site-border-color);
  border-width: 1px;
  border-radius: var(--site-field-radius);
  background: var(--site-bg-color);
  color: var(--site-heading-color);
  font-family: var(--site-main-font);
  /* 16px se kam nahi: iOS zoom kar deta hai */
  font-size: 16px;
  line-height: 46px;
}

body.woocommerce-cart .woocommerce .woocommerce-cart-form tr:not(.cart_item) td.actions .coupon #coupon_code:focus {
  outline: none;
  border-color: var(--site-heading-color);
}

/* "Apply coupon" input ke andar, dayen taraf */
body.woocommerce-cart .woocommerce .woocommerce-cart-form tr:not(.cart_item) td.actions .coupon button[name=apply_coupon] {
  position: absolute;
  right: 1px;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  height: 46px;
  padding: 0 16px;
  background: none;
  border: none;
  border-left: 1px solid var(--site-border-color);
  border-radius: 0;
  color: var(--site-heading-color);
  font-family: var(--site-main-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 46px;
  white-space: nowrap;
  transition: color 0.18s ease;
}

body.woocommerce-cart .woocommerce .woocommerce-cart-form tr:not(.cart_item) td.actions .coupon button[name=apply_coupon]:hover {
  color: var(--site-accent-color);
  background: none;
}

/* "Update cart" — theme ise >=1024px par absolute karti hai; grid layout mein
   uski zaroorat nahi, flex row khud sahi jagah rakh deta hai */
body.woocommerce-cart .woocommerce .woocommerce-cart-form tr:not(.cart_item) td.actions button[name=update_cart] {
  position: static;
  transform: none;
  float: right;
  margin: 0;
  width: auto;
  height: 48px;
  padding: 0 26px;
  border: 1px solid var(--site-heading-color);
  border-radius: var(--site-button-radius);
  background: var(--site-secondary-button-bg);
  color: var(--site-secondary-button-color);
  font-family: var(--site-main-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 46px;
  white-space: nowrap;
  transition: background-color 0.18s ease, color 0.18s ease;
}

body.woocommerce-cart .woocommerce .woocommerce-cart-form tr:not(.cart_item) td.actions button[name=update_cart]:hover {
  background: var(--site-heading-color);
  color: var(--site-bg-color);
  border-color: var(--site-heading-color);
}

body.woocommerce-cart .woocommerce .woocommerce-cart-form tr:not(.cart_item) td.actions button[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* -----------------------------------------------------------------------------
   6. Cart totals card
   -------------------------------------------------------------------------- */
/* theme yahan `border: solid 1px var(--site-heading-color)` aur 1.875rem
   padding deti hai — selector (0,3,1) hai, is liye yahan bhi utna hi uncha. */
body.woocommerce-cart .woocommerce .cart-collaterals .cart_totals {
  border: 1px solid var(--site-border-color);
  padding: 30px 30px 34px;
  background: var(--site-bg-color);
}

.woocommerce-cart .cart_totals > h2 {
  font-family: var(--site-secondary-font);
  font-weight: var(--heading-font-weight);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--site-heading-color);
  margin: 0 0 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--site-border-color);
}

.woocommerce-cart .cart_totals table.shop_table {
  width: 100%;
  border: none;
  border-collapse: collapse;
  margin: 0;
  background: transparent;
}

/* theme rows par grey bhar deti hai — card ke andar dhabbe jaisa lagta hai */
.woocommerce-cart .cart_totals table.shop_table tr,
.woocommerce-cart .cart_totals table.shop_table tr.cart-subtotal,
.woocommerce-cart .cart_totals table.shop_table tr.woocommerce-shipping-totals,
.woocommerce-cart .cart_totals table.shop_table tr.order-total {
  background: transparent;
  background-color: transparent;
}

.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
  background: transparent;
  border: none;
  border-top: 1px solid var(--site-border-color);
  padding: 14px 0;
  font-size: 14px;
  vertical-align: top;
}

.woocommerce-cart .cart_totals table.shop_table tr:first-child th,
.woocommerce-cart .cart_totals table.shop_table tr:first-child td {
  border-top: none;
  padding-top: 0;
}

.woocommerce-cart .cart_totals table.shop_table th {
  width: 40%;
  text-align: left;
  font-weight: 400;
  color: var(--site-text-color);
}

.woocommerce-cart .cart_totals table.shop_table td {
  text-align: right;
  color: var(--site-heading-color);
  font-weight: 500;
}

/* shipping choices */
.woocommerce-cart .cart_totals ul#shipping_method {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: right;
}

.woocommerce-cart .cart_totals ul#shipping_method li {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.woocommerce-cart .cart_totals ul#shipping_method li:last-child {
  margin-bottom: 0;
}

.woocommerce-cart .cart_totals ul#shipping_method li input {
  width: 16px;
  height: 16px;
  min-width: 16px;
  margin: 0;
  accent-color: var(--site-accent-color);
}

.woocommerce-cart .cart_totals ul#shipping_method li label {
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--site-heading-color);
  cursor: pointer;
}

.woocommerce-cart .cart_totals .woocommerce-shipping-destination {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--site-text-color);
}

.woocommerce-cart .cart_totals .shipping-calculator-button {
  font-size: 13px;
  color: var(--site-accent-color);
  border-bottom: 1px solid var(--site-accent-color);
  text-decoration: none;
}

/* total */
.woocommerce-cart .cart_totals table.shop_table tr.order-total th,
.woocommerce-cart .cart_totals table.shop_table tr.order-total td {
  border-top: 1px solid var(--site-heading-color);
  padding-top: 18px;
  padding-bottom: 0;
}

.woocommerce-cart .cart_totals table.shop_table tr.order-total th {
  font-family: var(--site-secondary-font);
  font-weight: var(--heading-font-weight);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--site-heading-color);
}

.woocommerce-cart .cart_totals table.shop_table tr.order-total td strong {
  font-size: 22px;
  font-weight: 700;
  color: var(--site-heading-color);
}

.woocommerce-cart .cart_totals table.shop_table tr.order-total .woocommerce-Price-currencySymbol {
  font-size: 15px;
  font-weight: 500;
  margin-right: 2px;
}

/* -----------------------------------------------------------------------------
   7. Proceed to checkout
   -------------------------------------------------------------------------- */
.woocommerce-cart .wc-proceed-to-checkout {
  padding: 24px 0 0;
  margin: 0;
}

/* theme yahan padding-top/bottom 1.7rem deti hai (selector 0,5,1) — sirf
   height dene se text button se bahar nikal jata hai. Selector uncha rakhna
   zaroori hai warna padding wahin ki wahin reh jati hai. */
body.woocommerce-cart .woocommerce .cart-collaterals .cart_totals .wc-proceed-to-checkout a.checkout-button {
  display: block;
  width: 100%;
  height: 58px;
  padding: 0 26px;
  margin: 0;
  border: none;
  border-radius: var(--site-button-radius);
  background: var(--site-primary-button-bg);
  color: var(--site-primary-button-color);
  font-family: var(--site-main-font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 58px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity 0.18s ease;
}

body.woocommerce-cart .woocommerce .cart-collaterals .cart_totals .wc-proceed-to-checkout a.checkout-button:hover {
  background: var(--site-primary-button-bg);
  color: var(--site-primary-button-color);
  opacity: 0.88;
}

/* -----------------------------------------------------------------------------
   8. Khaali cart
   -------------------------------------------------------------------------- */
.woocommerce-cart .cart-empty,
.woocommerce-cart .wc-empty-cart-message {
  text-align: center;
  font-size: 17px;
  color: var(--site-text-color);
  margin: 40px 0 24px;
}

.woocommerce-cart .return-to-shop {
  text-align: center;
  margin-bottom: 60px;
}

.woocommerce-cart .return-to-shop a.button {
  display: inline-block;
  height: 54px;
  padding: 0 34px;
  border: none;
  border-radius: var(--site-button-radius);
  background: var(--site-primary-button-bg);
  color: var(--site-primary-button-color);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 54px;
  text-transform: uppercase;
  text-decoration: none;
}

/* =============================================================================
   MEDIA QUERIES — hamesha file ke aakhir mein
   ========================================================================== */

@media (max-width: 1200px) {
  body.woocommerce-cart .woocommerce {
    grid-template-columns: minmax(0, 1fr) 340px;
    column-gap: 40px;
  }
}

@media (max-width: 991px) {
  body.woocommerce-cart .woocommerce {
    display: block;
  }

  body.woocommerce-cart .woocommerce .cart-collaterals {
    position: static;
    margin-top: 40px;
  }

  .woocommerce-cart .page-title,
  .woocommerce-cart .entry-title {
    font-size: 32px;
  }
}

@media (max-width: 767px) {
  /* Mobile par har product ek saaf card: tasveer bayen, baqi sab dayen.
     Theme yahan kuch cheezein absolute rakhti hai (remove link, quantity)
     jis se cheezein ek doosre par charh jati thin. Is liye poori row ka
     control yahan liya hai — selectors theme jaise hi lambe hain taake
     barabari ho, aur cart.css baad mein load hone ki wajah se yeh jeete. */

  body.woocommerce-cart .woocommerce .woocommerce-cart-form table.cart,
  body.woocommerce-cart .woocommerce .woocommerce-cart-form table.cart tbody {
    display: block;
  }

  body.woocommerce-cart .woocommerce .woocommerce-cart-form table.cart thead {
    display: none;
  }

  body.woocommerce-cart .woocommerce .woocommerce-cart-form tr.cart_item {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    column-gap: 16px;
    align-items: start;
    position: relative;
    margin: 0;
    padding: 20px 0;
    border-bottom: 1px solid var(--site-border-color);
  }

  body.woocommerce-cart .woocommerce .woocommerce-cart-form tr.cart_item td {
    display: block;
    position: static;
    width: auto;
    border: none;
    padding: 0;
    text-align: left;
  }

  body.woocommerce-cart .woocommerce .woocommerce-cart-form tr.cart_item td.product-thumbnail {
    grid-column: 1;
    grid-row: 1 / span 3;
  }

  body.woocommerce-cart .woocommerce .woocommerce-cart-form tr.cart_item td.product-thumbnail a,
  body.woocommerce-cart .woocommerce .woocommerce-cart-form tr.cart_item td.product-thumbnail img {
    width: 92px;
    height: 112px;
  }

  body.woocommerce-cart .woocommerce .woocommerce-cart-form tr.cart_item td.product-name {
    grid-column: 2;
    grid-row: 1;
    padding-right: 0;
  }

  /* per-unit qeemat naam ke neeche */
  body.woocommerce-cart .woocommerce .woocommerce-cart-form tr.cart_item td.product-name .product-price-mobile {
    display: block;
    margin: 2px 0 0;
    font-size: 14px;
    font-weight: 400;
    color: var(--site-text-color);
  }

  body.woocommerce-cart .woocommerce .woocommerce-cart-form tr.cart_item td.product-name a.remove {
    position: static;
    display: inline-block;
    margin-top: 8px;
    font-size: 12px;
  }

  /* alag price column ki zaroorat nahi - upar naam ke neeche aa chuki hai */
  body.woocommerce-cart .woocommerce .woocommerce-cart-form tr.cart_item td.product-price {
    display: none;
  }

  /* theme is par khaas taur par position:absolute lagati hai — general
     `td { position: static }` us se kam specific tha, is liye quantity box
     subtotal ke upar charh raha tha. Yahan usi selector par likhna zaroori hai. */
  body.woocommerce-cart .woocommerce .woocommerce-cart-form tr.cart_item td.product-quantity {
    grid-column: 2;
    grid-row: 2;
    position: static;
    width: auto;
    margin-top: 12px;
    text-align: left;
  }

  body.woocommerce-cart .woocommerce .woocommerce-cart-form tr.cart_item td.product-subtotal {
    grid-column: 2;
    grid-row: 3;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    font-size: 16px;
    font-weight: 600;
    color: var(--site-heading-color);
  }

  body.woocommerce-cart .woocommerce .woocommerce-cart-form tr.cart_item td.product-subtotal:before {
    content: attr(data-title);
    width: auto;
    font-size: 14px;
    font-weight: 400;
    color: var(--site-text-color);
  }

  /* actions: coupon aur Update Cart ek doosre par charh rahe the */
  body.woocommerce-cart .woocommerce .woocommerce-cart-form tr:not(.cart_item) td.actions {
    display: block;
    padding-top: 24px;
  }

  body.woocommerce-cart .woocommerce .woocommerce-cart-form tr:not(.cart_item) td.actions .coupon {
    float: none;
    display: flex;
    width: 100%;
    margin-bottom: 14px;
  }

  body.woocommerce-cart .woocommerce .woocommerce-cart-form tr:not(.cart_item) td.actions .coupon #coupon_code {
    width: 100%;
    flex: 1 1 auto;
  }

  body.woocommerce-cart .woocommerce .woocommerce-cart-form tr:not(.cart_item) td.actions button[name=update_cart] {
    float: none;
    width: 100%;
  }
}