/* ==========================================================================
   Cart items - Checkout & Cart by Foxco
   Round remove button, +/- quantity stepper, and on phones one card per item.
   Scoped with html body + table/row element selectors so it beats both the
   theme's striped table rules and the generic fcc-main mobile cell rules.
   ========================================================================== */

/* ---- Remove button: soft round chip with a drawn X (the × glyph never centres) */
html body .woocommerce-cart-form table.shop_table.woocommerce-cart-form__contents td.product-remove a.remove{
  position:relative!important;display:inline-flex!important;align-items:center;justify-content:center;
  width:34px!important;height:34px!important;min-width:34px;padding:0!important;margin:0!important;
  border:0!important;border-radius:50%!important;background:var(--fcc-bg,#f4f2ee)!important;
  color:var(--fcc-muted,#6b6a75)!important;font-size:0!important;line-height:0!important;
  text-indent:0;overflow:hidden;text-decoration:none!important;box-shadow:none!important;
  transition:background .15s,color .15s,transform .15s
}
html body .woocommerce-cart-form table.shop_table.woocommerce-cart-form__contents td.product-remove a.remove::before,
html body .woocommerce-cart-form table.shop_table.woocommerce-cart-form__contents td.product-remove a.remove::after{
  content:""!important;position:absolute;left:50%;top:50%;width:13px;height:1.8px;border-radius:2px;
  background:currentColor;margin:0;transform:translate(-50%,-50%) rotate(45deg)
}
html body .woocommerce-cart-form table.shop_table.woocommerce-cart-form__contents td.product-remove a.remove::after{
  transform:translate(-50%,-50%) rotate(-45deg)
}
html body .woocommerce-cart-form table.shop_table.woocommerce-cart-form__contents td.product-remove a.remove:hover,
html body .woocommerce-cart-form table.shop_table.woocommerce-cart-form__contents td.product-remove a.remove:focus-visible{
  background:#fdecec!important;color:#dc2626!important;transform:scale(1.06)
}
html body .woocommerce-cart-form table.shop_table.woocommerce-cart-form__contents td.product-remove a.remove:focus-visible{
  outline:2px solid #dc2626;outline-offset:2px
}
html body .woocommerce-cart-form table.shop_table.woocommerce-cart-form__contents td.product-remove{width:56px!important}

/* ---- Quantity stepper (markup added by fcc-cart.js; plain input without JS) */
html body .woocommerce-cart-form .quantity.fcc-step{
  display:inline-flex!important;align-items:stretch;height:42px;
  border:1px solid var(--fcc-border,#e3e0da);border-radius:10px;background:var(--fcc-surface,#fff);overflow:hidden
}
html body .woocommerce-cart-form .quantity.fcc-step input.qty{
  width:42px!important;min-width:0;height:auto!important;margin:0!important;padding:0!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;
  text-align:center!important;font-weight:700!important;font-size:16px!important;
  -moz-appearance:textfield;appearance:textfield
}
html body .woocommerce-cart-form .quantity.fcc-step input.qty::-webkit-outer-spin-button,
html body .woocommerce-cart-form .quantity.fcc-step input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
html body .woocommerce-cart-form .quantity.fcc-step input.qty:focus{outline:none!important}
html body .woocommerce-cart-form .quantity.fcc-step:focus-within{border-color:var(--fcc-accent,#3570be);box-shadow:0 0 0 3px rgba(var(--fcc-accent-rgb,53,112,190),.13)}
html body .woocommerce-cart-form .quantity.fcc-step button.fcc-step-btn{
  display:flex!important;align-items:center;justify-content:center;width:38px!important;min-width:0!important;
  height:auto!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;
  background:transparent!important;color:var(--fcc-text,#1c1b2e)!important;box-shadow:none!important;
  font-size:19px!important;font-weight:500!important;line-height:1!important;cursor:pointer;transition:background .15s
}
html body .woocommerce-cart-form .quantity.fcc-step button.fcc-step-btn:hover{background:var(--fcc-bg,#f4f2ee)!important}
html body .woocommerce-cart-form .quantity.fcc-step button.fcc-step-btn:disabled{opacity:.35;cursor:default;background:transparent!important}

/* ---- Kill theme striping / hover tint on the item rows (it showed through as grey blocks) */
html body .woocommerce-cart-form table.shop_table.woocommerce-cart-form__contents tr.woocommerce-cart-form__cart-item,
html body .woocommerce-cart-form table.shop_table.woocommerce-cart-form__contents tr.woocommerce-cart-form__cart-item:hover{background:var(--fcc-surface,#fff)!important}
html body .woocommerce-cart-form table.shop_table.woocommerce-cart-form__contents tr.woocommerce-cart-form__cart-item > td,
html body .woocommerce-cart-form table.shop_table.woocommerce-cart-form__contents tr.woocommerce-cart-form__cart-item:hover > td{background:transparent!important}
html body .woocommerce-cart-form table.shop_table.woocommerce-cart-form__contents td.product-subtotal{font-weight:800}

/* ---- Desktop coupon / update row. fcc-main made td.actions a flex box, which
   strips its table-cell role and squeezes it into the first column. */
@media (min-width:768px){
  html body .woocommerce-cart-form table.shop_table.woocommerce-cart-form__contents td.actions{
    display:table-cell!important;text-align:right!important;padding:14px 18px!important;background:var(--fcc-bg,#f8f7f4)!important
  }
  html body .woocommerce-cart-form table.shop_table.woocommerce-cart-form__contents td.actions::after{content:"";display:table;clear:both}
  html body .woocommerce-cart-form table.shop_table.woocommerce-cart-form__contents td.actions .coupon{
    display:inline-flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center;gap:8px!important;float:left
  }
  html body .woocommerce-cart-form table.shop_table.woocommerce-cart-form__contents td.actions .coupon input#coupon_code{width:220px!important;flex:0 0 auto!important;height:42px!important;box-sizing:border-box!important;padding:0 12px!important}
  html body .woocommerce-cart-form table.shop_table.woocommerce-cart-form__contents td.actions .coupon button.button,
  html body .woocommerce-cart-form table.shop_table.woocommerce-cart-form__contents td.actions button[name="update_cart"]{height:42px!important;box-sizing:border-box!important;padding:0 18px!important;width:auto!important}
}

/* ---- Phones: each item is its own card ---------------------------------- */
@media (max-width:767px){
  html body .woocommerce-cart-form table.shop_table.woocommerce-cart-form__contents{
    display:block!important;border:0!important;border-radius:0!important;box-shadow:none!important;
    background:transparent!important;overflow:visible!important
  }
  html body .woocommerce-cart-form table.shop_table.woocommerce-cart-form__contents > thead{display:none!important}
  html body .woocommerce-cart-form table.shop_table.woocommerce-cart-form__contents > tbody{display:flex!important;flex-direction:column;gap:12px;background:transparent!important}
  html body .woocommerce-cart-form table.shop_table.woocommerce-cart-form__contents > tbody > tr{background:transparent!important}

  html body .woocommerce-cart-form table.shop_table.woocommerce-cart-form__contents tr.woocommerce-cart-form__cart-item{
    display:grid!important;grid-template-columns:72px minmax(0,1fr) auto!important;
    grid-template-rows:auto auto 1fr;gap:0 14px!important;align-items:start!important;
    padding:14px!important;margin:0!important;border:1px solid var(--fcc-border,#e3e0da)!important;
    border-radius:16px!important;box-shadow:0 1px 2px rgba(26,26,46,.04),0 4px 14px rgba(26,26,46,.04)
  }
  html body .woocommerce-cart-form table.shop_table.woocommerce-cart-form__contents tr.woocommerce-cart-form__cart-item > td{
    display:block!important;padding:0!important;border:0!important;width:auto!important;min-width:0;text-align:left!important
  }
  html body .woocommerce-cart-form table.shop_table.woocommerce-cart-form__contents tr.woocommerce-cart-form__cart-item > td::before{display:none!important;content:none!important}

  html body .woocommerce-cart-form table.shop_table.woocommerce-cart-form__contents td.product-thumbnail{grid-column:1;grid-row:1 / 4}
  html body .woocommerce-cart-form table.shop_table.woocommerce-cart-form__contents td.product-thumbnail img{
    width:72px!important;height:72px!important;object-fit:contain!important;border-radius:12px!important;
    background:var(--fcc-bg,#f4f2ee);border:0!important;display:block
  }
  html body .woocommerce-cart-form table.shop_table.woocommerce-cart-form__contents td.product-name{
    grid-column:2;grid-row:1;padding:2px 0 0!important;font-size:15px!important;line-height:1.35!important
  }
  html body .woocommerce-cart-form table.shop_table.woocommerce-cart-form__contents td.product-name a{font-size:15px!important;font-weight:700!important}
  html body .woocommerce-cart-form table.shop_table.woocommerce-cart-form__contents td.product-name dl.variation{margin:4px 0 0!important;font-size:12px}
  html body .woocommerce-cart-form table.shop_table.woocommerce-cart-form__contents td.product-remove{
    grid-column:3;grid-row:1;width:auto!important;display:flex!important;justify-content:flex-end
  }
  html body .woocommerce-cart-form table.shop_table.woocommerce-cart-form__contents td.product-price{
    grid-column:2 / 4;grid-row:2;padding:4px 0 0!important;font-size:13px!important;color:var(--fcc-muted,#6b6a75)!important;width:auto!important
  }
  html body .woocommerce-cart-form table.shop_table.woocommerce-cart-form__contents td.product-quantity{
    grid-column:2;grid-row:3;align-self:end;padding:12px 0 0!important;width:auto!important
  }
  html body .woocommerce-cart-form table.shop_table.woocommerce-cart-form__contents td.product-subtotal{
    grid-column:3;grid-row:3;align-self:end;justify-self:end;padding:12px 0 10px!important;
    font-size:17px!important;font-weight:800!important;white-space:nowrap;text-align:right!important;width:auto!important
  }

  /* Coupon / update row: no table chrome, coupon field and Apply side by side */
  html body .woocommerce-cart-form table.shop_table.woocommerce-cart-form__contents td.actions{
    display:flex!important;flex-direction:column!important;gap:10px!important;padding:2px 0 0!important;
    border:0!important;background:transparent!important
  }
  html body .woocommerce-cart-form table.shop_table.woocommerce-cart-form__contents td.actions::before{display:none!important;content:none!important}
  html body .woocommerce-cart-form table.shop_table.woocommerce-cart-form__contents td.actions .coupon{
    display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;gap:8px!important;width:100%!important
  }
  html body .woocommerce-cart-form table.shop_table.woocommerce-cart-form__contents td.actions .coupon label{display:none}
  html body .woocommerce-cart-form table.shop_table.woocommerce-cart-form__contents td.actions .coupon input#coupon_code{
    flex:1 1 auto!important;width:auto!important;min-width:0!important;height:48px!important;box-sizing:border-box!important;padding:0 14px!important;border-radius:12px!important;background:var(--fcc-surface,#fff)!important
  }
  html body .woocommerce-cart-form table.shop_table.woocommerce-cart-form__contents td.actions .coupon button.button{
    flex:0 0 auto!important;width:auto!important;height:48px!important;box-sizing:border-box!important;padding:0 20px!important;border-radius:12px!important
  }
  html body .woocommerce-cart-form table.shop_table.woocommerce-cart-form__contents td.actions button[name="update_cart"]{width:100%!important;border-radius:12px!important}
}