/* SA Home Furniture Premium Cart actions. Loaded only on /cart/. */
.woocommerce-cart .woocommerce-cart-form td.product-remove,
.woocommerce-cart .shop_table td.product-remove {
  width: 92px;
  min-width: 92px;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
  vertical-align: middle;
}

/* Keep Remove and Replace as two clearly separate controls. This avoids the
   segmented-button appearance where a customer can accidentally hit Remove
   while aiming for Replace. */
.woocommerce-cart .clx-cart-item-actions {
  display: inline-flex;
  width: 72px;
  max-width: 100%;
  flex-direction: column;
  gap: 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1;
}

.woocommerce-cart .clx-cart-item-action {
  display: flex !important;
  min-height: 29px;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 7px 8px !important;
  border: 1px solid rgba(37, 34, 29, .17) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .97) !important;
  box-shadow: 0 5px 13px rgba(30, 27, 22, .065), inset 0 1px 0 rgba(255,255,255,.95) !important;
  color: #25221d !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .015em;
  text-decoration: none !important;
  text-transform: none;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}

.woocommerce-cart .clx-cart-item-action--remove:hover,
.woocommerce-cart .clx-cart-item-action--remove:focus-visible {
  border-color: rgba(111, 63, 37, .34) !important;
  background: #f8f2ec !important;
  color: #6f3f25 !important;
}

.woocommerce-cart .clx-cart-item-action--replace:hover,
.woocommerce-cart .clx-cart-item-action--replace:focus-visible {
  border-color: #27241f !important;
  background: #27241f !important;
  color: #fff !important;
}

.woocommerce-cart .clx-cart-item-action:hover {
  transform: translateY(-1px);
}

.woocommerce-cart .clx-cart-item-action:focus-visible {
  outline: 2px solid #a77a3f;
  outline-offset: 2px;
}


/* Desktop/Windows cart: give every cart line the same clear visual ownership as
   the mobile cards. The row remains a normal WooCommerce table row, but the
   stronger lower edge and soft side borders make it obvious which image,
   product, amount and actions belong together. */
@media (min-width: 768px) {
  .woocommerce-cart .woocommerce-cart-form table.shop_table tbody tr.cart_item > td,
  .woocommerce-cart .woocommerce-cart-form table.shop_table_responsive tbody tr.cart_item > td {
    border-top: 1px solid rgba(37, 34, 29, .12) !important;
    border-bottom: 3px solid rgba(169, 127, 66, .62) !important;
    background: rgba(255, 255, 255, .985);
    vertical-align: middle;
  }

  .woocommerce-cart .woocommerce-cart-form table.shop_table tbody tr.cart_item > td:first-child,
  .woocommerce-cart .woocommerce-cart-form table.shop_table_responsive tbody tr.cart_item > td:first-child {
    border-left: 1px solid rgba(37, 34, 29, .12) !important;
  }

  .woocommerce-cart .woocommerce-cart-form table.shop_table tbody tr.cart_item > td:last-child,
  .woocommerce-cart .woocommerce-cart-form table.shop_table_responsive tbody tr.cart_item > td:last-child {
    border-right: 1px solid rgba(37, 34, 29, .12) !important;
  }
}

@media (max-width: 767px) {
  /* Turn every mobile cart line into a compact product card. The stronger
     lower border and spacing make it immediately obvious where one product
     ends and the next begins. */
  .woocommerce-cart .woocommerce-cart-form table.shop_table_responsive tr.cart_item,
  .woocommerce-cart .woocommerce-cart-form table.shop_table tr.cart_item,
  .woocommerce-cart table.shop_table_responsive tr.cart_item {
    display: grid !important;
    grid-template-columns: 92px minmax(0, 1fr) 112px;
    grid-template-areas:
      "thumb name name"
      "price price quantity"
      "subtotal subtotal subtotal"
      "actions actions actions";
    width: 100% !important;
    margin: 0 0 15px !important;
    overflow: hidden;
    border: 1px solid rgba(37, 34, 29, .16) !important;
    border-bottom: 3px solid rgba(169, 127, 66, .72) !important;
    border-radius: 14px;
    background: rgba(255,255,255,.98);
    box-shadow: 0 7px 20px rgba(30, 27, 22, .055);
  }

  .woocommerce-cart .woocommerce-cart-form table.shop_table_responsive tr.cart_item > td,
  .woocommerce-cart .woocommerce-cart-form table.shop_table tr.cart_item > td,
  .woocommerce-cart table.shop_table_responsive tr.cart_item > td {
    box-sizing: border-box !important;
    min-width: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  /* Image and product description stay together in the first line, mirroring
     the desktop cart relationship instead of scattering the image into a
     separate full-width row. */
  .woocommerce-cart .woocommerce-cart-form .shop_table_responsive tr.cart_item td.product-thumbnail,
  .woocommerce-cart .woocommerce-cart-form table.shop_table tr.cart_item td.product-thumbnail,
  .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-thumbnail {
    grid-area: thumb;
    display: flex !important;
    visibility: visible !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 100px;
    align-items: center;
    justify-content: center;
    padding: 11px 6px 11px 11px !important;
    text-align: center !important;
  }

  .woocommerce-cart .woocommerce-cart-form td.product-thumbnail::before,
  .woocommerce-cart table.shop_table_responsive td.product-thumbnail::before,
  .woocommerce-cart .woocommerce-cart-form td.product-name::before,
  .woocommerce-cart table.shop_table_responsive td.product-name::before {
    display: none !important;
    content: none !important;
  }

  .woocommerce-cart .woocommerce-cart-form td.product-thumbnail a,
  .woocommerce-cart table.shop_table_responsive td.product-thumbnail a {
    display: inline-flex !important;
    width: 76px !important;
    height: 76px !important;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(37, 34, 29, .12);
    border-radius: 12px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 5px 14px rgba(30, 27, 22, .07);
    line-height: 0;
  }

  .woocommerce-cart .woocommerce-cart-form td.product-thumbnail img,
  .woocommerce-cart table.shop_table_responsive td.product-thumbnail img,
  .woocommerce-cart td.product-thumbnail .clx-safe-cart-thumbnail {
    display: block !important;
    float: none !important;
    width: 76px !important;
    height: 76px !important;
    max-width: 76px !important;
    max-height: 76px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    border: 0 !important;
    border-radius: 11px;
    background: #fff;
  }

  .woocommerce-cart .woocommerce-cart-form tr.cart_item td.product-name,
  .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-name {
    grid-area: name;
    display: flex !important;
    min-height: 100px;
    flex-direction: column;
    justify-content: center;
    padding: 11px 12px 11px 7px !important;
    text-align: left !important;
    line-height: 1.32 !important;
  }

  .woocommerce-cart .woocommerce-cart-form tr.cart_item td.product-name a,
  .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-name a {
    display: inline !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    line-height: 1.32 !important;
  }

  .woocommerce-cart .woocommerce-cart-form tr.cart_item td.product-name dl.variation,
  .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-name dl.variation,
  .woocommerce-cart .woocommerce-cart-form tr.cart_item td.product-name .variation {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 2px 5px !important;
    margin: 5px 0 0 !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  /* Keep variation labels and their values together. This specifically fixes
     Colour: Blue being broken into two rows on narrow screens. */
  .woocommerce-cart .woocommerce-cart-form tr.cart_item td.product-name dl.variation dt,
  .woocommerce-cart .woocommerce-cart-form tr.cart_item td.product-name dl.variation dd,
  .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-name dl.variation dt,
  .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-name dl.variation dd {
    display: inline-flex !important;
    float: none !important;
    width: auto !important;
    max-width: 100% !important;
    align-items: baseline !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.25 !important;
  }

  .woocommerce-cart .woocommerce-cart-form tr.cart_item td.product-name dl.variation dt,
  .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-name dl.variation dt {
    font-weight: 600 !important;
    white-space: nowrap !important;
  }

  .woocommerce-cart .woocommerce-cart-form tr.cart_item td.product-name dl.variation dd p,
  .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-name dl.variation dd p {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Price and quantity share a single clean row. */
  .woocommerce-cart .woocommerce-cart-form tr.cart_item td.product-price,
  .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-price {
    grid-area: price;
    display: flex !important;
    min-height: 52px;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 10px 12px 10px 13px !important;
    border-top: 1px solid rgba(37, 34, 29, .11) !important;
    border-right: 1px solid rgba(37, 34, 29, .09) !important;
    font-size: 13px !important;
    white-space: nowrap;
  }

  .woocommerce-cart .woocommerce-cart-form tr.cart_item td.product-quantity,
  .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-quantity {
    grid-area: quantity;
    display: flex !important;
    min-height: 52px;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    padding: 10px 10px !important;
    border-top: 1px solid rgba(37, 34, 29, .11) !important;
    font-size: 13px !important;
    white-space: nowrap;
  }

  .woocommerce-cart .woocommerce-cart-form tr.cart_item td.product-price::before,
  .woocommerce-cart .woocommerce-cart-form tr.cart_item td.product-quantity::before,
  .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-price::before,
  .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-quantity::before {
    float: none !important;
    margin: 0 !important;
    color: #27241f;
    font-size: 11px !important;
    font-weight: 700 !important;
  }

  .woocommerce-cart .woocommerce-cart-form tr.cart_item td.product-quantity::before,
  .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-quantity::before {
    content: "QTY:" !important;
    flex: 0 0 auto;
  }

  .woocommerce-cart .woocommerce-cart-form tr.cart_item td.product-quantity .quantity,
  .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-quantity .quantity {
    flex: 0 0 auto;
    margin-left: auto !important;
  }

  .woocommerce-cart .woocommerce-cart-form tr.cart_item td.product-quantity .qty,
  .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-quantity .qty {
    width: 52px !important;
    max-width: 52px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 4px 5px !important;
    font-size: 14px !important;
    text-align: center;
  }

  .woocommerce-cart .woocommerce-cart-form tr.cart_item td.product-subtotal,
  .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-subtotal {
    grid-area: subtotal;
    display: flex !important;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    padding: 9px 13px !important;
    border-top: 1px solid rgba(37, 34, 29, .11) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
  }

  .woocommerce-cart .woocommerce-cart-form tr.cart_item td.product-subtotal::before,
  .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-subtotal::before {
    float: none !important;
    margin: 0 !important;
    color: #27241f;
    font-size: 11px !important;
    font-weight: 700 !important;
  }

  /* Actions belong to the card and sit on their own quiet footer row. The
     physical gap between buttons protects against accidental taps. */
  .woocommerce-cart .woocommerce-cart-form tr.cart_item td.product-remove,
  .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-remove,
  .woocommerce-cart .shop_table tr.cart_item td.product-remove {
    grid-area: actions;
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
    align-items: center;
    justify-content: flex-end;
    padding: 10px 12px 11px !important;
    border-top: 1px dashed rgba(169, 127, 66, .38) !important;
    background: rgba(248, 245, 239, .55) !important;
    text-align: right !important;
  }

  .woocommerce-cart .clx-cart-item-actions {
    display: inline-flex;
    width: auto;
    max-width: 100%;
    flex-direction: row;
    gap: 13px;
  }

  .woocommerce-cart .clx-cart-item-action {
    min-width: 70px;
    min-height: 32px;
    padding: 7px 12px !important;
    font-size: 10px !important;
  }

  /* Keep the overall mobile cart table neutral so the individual item cards
     provide the visual grouping rather than multiple competing borders. */
  .woocommerce-cart .woocommerce-cart-form table.shop_table_responsive,
  .woocommerce-cart .woocommerce-cart-form table.shop_table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }
}

@media (max-width: 389px) {
  .woocommerce-cart .woocommerce-cart-form table.shop_table_responsive tr.cart_item,
  .woocommerce-cart .woocommerce-cart-form table.shop_table tr.cart_item,
  .woocommerce-cart table.shop_table_responsive tr.cart_item {
    grid-template-columns: 84px minmax(0, 1fr) 104px;
  }

  .woocommerce-cart .woocommerce-cart-form td.product-thumbnail a,
  .woocommerce-cart table.shop_table_responsive td.product-thumbnail a,
  .woocommerce-cart .woocommerce-cart-form td.product-thumbnail img,
  .woocommerce-cart table.shop_table_responsive td.product-thumbnail img,
  .woocommerce-cart td.product-thumbnail .clx-safe-cart-thumbnail {
    width: 68px !important;
    height: 68px !important;
    max-width: 68px !important;
    max-height: 68px !important;
  }

  .woocommerce-cart .woocommerce-cart-form tr.cart_item td.product-name a,
  .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-name a {
    font-size: 13px !important;
  }

  .woocommerce-cart .woocommerce-cart-form tr.cart_item td.product-quantity,
  .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-quantity {
    gap: 5px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .woocommerce-cart .woocommerce-cart-form tr.cart_item td.product-quantity .qty,
  .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-quantity .qty {
    width: 48px !important;
    max-width: 48px !important;
  }

  .woocommerce-cart .clx-cart-item-action {
    min-width: 66px;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}