/*
 * Cart page (Shporta) — Nesa Underwear. Loaded only on is_cart(), after bp-mobile.
 *
 * Desktop cart layout (2-col grid: items | totals) lives in bp-overrides.css and
 * is intentionally left untouched. This file:
 *   (a) collapses that grid to ONE column on small screens, and
 *   (b) restyles the MOBILE cart to match the reference design.
 *
 * Note: bp-overrides.css zeroes .oxa-page padding on cart pages, so the global
 * 15px gutter never applies here — we add a 15px side gutter per section below.
 */

/* The custom "Produkte të ngjashme" block replaces WooCommerce cross-sells. */
body.woocommerce-cart .cart-collaterals .cross-sells { display: none !important; }

/* ──────────────────────────────────────────────────────────────────────
   REMOVE ("Hiqe") link — plain text link on ALL widths.
   WooCommerce core styles a.remove as a 1em circle (border-radius:100%) and on
   :hover fills it red. With the link text being "Hiqe" (not the default "×"),
   that hover fill shows up as a red dot over the start of the word. Neutralize
   the circle + the red hover background so it reads as a normal text link that
   just turns red on hover. (The ≤767px block below restyles it further.)
   ────────────────────────────────────────────────────────────────────── */
body.woocommerce-cart table.bp-cart-table a.remove,
body.woocommerce-cart table.bp-cart-table a.bp-cart-remove {
  display: inline !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.9rem !important;
  line-height: 1.4 !important;
  border-radius: 0 !important;
  background: none !important;
  color: var(--nesa-ink-soft) !important;
  text-decoration: underline !important;
}
body.woocommerce-cart table.bp-cart-table a.remove:hover,
body.woocommerce-cart table.bp-cart-table a.bp-cart-remove:hover {
  background: none !important;
  background-color: transparent !important;
  color: #dc2626 !important;
}

/* ──────────────────────────────────────────────────────────────────────
   DESKTOP (≥901px) — tighten the vertical rhythm at the top of the cart.
   The breadcrumb + "Shporta" title render via woocommerce_before_cart as the
   first children of .woocommerce, which bp-overrides.css turns into a grid with
   `gap: 2.5rem`. That 2.5rem ROW-gap is what spaces breadcrumb → title → cart so
   far apart. Shrink the row-gap (keeping the 2.5rem COLUMN gap between the cart
   and the totals card) and zero the breadcrumb/title margins so the only spacing
   left is the smaller row-gap. `div.woocommerce` out-specifies bp-overrides
   regardless of stylesheet load order.
   ────────────────────────────────────────────────────────────────────── */
@media (min-width: 901px) {
  body.woocommerce-cart div.woocommerce { row-gap: 1rem !important; }
  body.woocommerce-cart .woocommerce-breadcrumb { margin: 0 !important; }
  body.woocommerce-cart .bp-page-title { margin: 0 !important; }
  body.woocommerce-cart .woocommerce-cart-form { margin-top: 0 !important; }
}

/* ──────────────────────────────────────────────────────────────────────
   SINGLE COLUMN (≤900px) — fixes the leftover two-column bug.
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  body.woocommerce-cart .woocommerce-cart-form,
  body.woocommerce-cart .cart-collaterals {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }
  body.woocommerce-cart .cart-collaterals { margin-top: 1.5rem !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   MOBILE (≤767px)
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* 15px gutter on both sides of the shopping-cart block. */
  body.woocommerce-cart .woocommerce-cart-form {
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
  }

  /* Breadcrumb + page title: 15px side gutter, and a tighter vertical rhythm
     (breadcrumb → title → cart). They render from woocommerce_before_cart,
     outside the form, so they don't inherit the form gutter. */
  body.woocommerce-cart .woocommerce-breadcrumb {
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-bottom: 0.4rem !important;
  }
  body.woocommerce-cart .bp-page-title {
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin: 0.1rem 0 0.75rem !important;
  }

  /* Kill WooCommerce's zebra striping on the responsive table. */
  body.woocommerce-cart .woocommerce table.shop_table_responsive tr:nth-child(2n) td,
  body.woocommerce-cart table.shop_table_responsive tr:nth-child(2n) td {
    background: transparent !important;
  }

  /* Kill the shared shop_table cell borders (from bp-flow-fix) — they reappear
     as stray lines once each td becomes a stacked block on mobile. */
  body.woocommerce-cart table.shop_table thead th,
  body.woocommerce-cart table.shop_table tbody td {
    border-bottom: 0 !important;
  }

  /* ── ITEMS: borderless list (no dividers), thumbnail left + details right ── */
  body.woocommerce-cart table.bp-cart-table { border: 0 !important; border-radius: 0 !important; }
  body.woocommerce-cart table.bp-cart-table thead { display: none !important; }
  body.woocommerce-cart table.bp-cart-table,
  body.woocommerce-cart table.bp-cart-table tbody {
    display: block !important;
    width: 100% !important;
  }

  body.woocommerce-cart table.bp-cart-table tr.woocommerce-cart-form__cart-item {
    display: grid !important;
    grid-template-columns: 96px 1fr !important;
    grid-template-areas:
      "thumb name"
      "thumb qty" !important;
    column-gap: 1rem !important;
    row-gap: 0.6rem !important;
    align-items: start !important;
    padding: 20px 0 20px 15px !important;
    border-bottom: 0 !important;
  }

  body.woocommerce-cart table.bp-cart-table td {
    display: block !important;
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    text-align: left !important;
  }
  /* Hide WooCommerce's responsive data-title labels. */
  body.woocommerce-cart table.bp-cart-table td::before { display: none !important; }

  /* Thumbnail — exactly ONE border on the image; wrapper/cell stay borderless. */
  body.woocommerce-cart table.bp-cart-table td.product-thumbnail { grid-area: thumb !important; width: 96px !important; border: 0 !important; }
  body.woocommerce-cart table.bp-cart-table td.product-thumbnail a { display: block !important; border: 0 !important; }
  body.woocommerce-cart table.bp-cart-table td.product-thumbnail a,
  body.woocommerce-cart table.bp-cart-table td.product-thumbnail img { width: 96px !important; height: 96px !important; }
  body.woocommerce-cart table.bp-cart-table td.product-thumbnail img {
    object-fit: contain !important;
    border: 1px solid var(--nesa-line) !important;
    border-radius: 12px !important;
    padding: 6px !important;
    background: #fff !important;
    box-sizing: border-box !important;
  }

  /* Price (bold) over product name. */
  body.woocommerce-cart table.bp-cart-table td.product-name { grid-area: name !important; align-self: start !important; }
  body.woocommerce-cart table.bp-cart-table td.product-name .bp-cart-line-price {
    display: block !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--nesa-ink) !important;
    margin: 0 0 0.25rem !important;
  }
  body.woocommerce-cart table.bp-cart-table td.product-name a.bp-cart-line-name,
  body.woocommerce-cart table.bp-cart-table td.product-name .bp-cart-line-name {
    display: block !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    color: var(--nesa-ink) !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
  }

  /* Quantity stepper (circular − / +) + Remove link. */
  body.woocommerce-cart table.bp-cart-table td.product-quantity {
    grid-area: qty !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0.25rem 0.9rem !important;
  }
  body.woocommerce-cart table.bp-cart-table td.product-quantity .bp-qty {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
  }
  body.woocommerce-cart table.bp-cart-table td.product-quantity .bp-qty .bp-qty-btn {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--nesa-line) !important;
    border-radius: 9999px !important;
    background: #fff !important;
    color: var(--nesa-ink) !important;
    font-size: 1.25rem !important;
    line-height: 1 !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }
  body.woocommerce-cart table.bp-cart-table td.product-quantity .bp-qty .bp-qty-btn:hover { border-color: var(--nesa-ink) !important; }
  body.woocommerce-cart table.bp-cart-table td.product-quantity .bp-qty input.qty {
    width: 34px !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: center !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--nesa-ink) !important;
    -moz-appearance: textfield !important;
  }
  body.woocommerce-cart table.bp-cart-table td.product-quantity .bp-qty input.qty::-webkit-outer-spin-button,
  body.woocommerce-cart table.bp-cart-table td.product-quantity .bp-qty input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
  }
  body.woocommerce-cart table.bp-cart-table td.product-quantity a.bp-cart-remove,
  body.woocommerce-cart table.bp-cart-table td.product-quantity a.bp-cart-remove.remove {
    display: inline !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    color: var(--nesa-ink-soft) !important;
    text-decoration: underline !important;
    text-align: left !important;
    background: none !important;
    border-radius: 0 !important;
  }
  body.woocommerce-cart table.bp-cart-table td.product-quantity a.bp-cart-remove:hover {
    color: #dc2626 !important;
    background: none !important;
  }

  body.woocommerce-cart table.bp-cart-table td.product-subtotal { display: none !important; }

  /* ── RELATED PRODUCTS ──
     Full-width card (its 15px side gutter comes from the form padding above).
     Each row becomes a grid like the cart items: 96px thumbnail on the left,
     name + price top-right, and a COMPACT black button beneath (not full width).
     Thumbnail matches the cart items (96px, 1px var(--nesa-line), 12px radius). */
  body.woocommerce-cart .bp-cart-related {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  body.woocommerce-cart .bp-cart-related .bp-cart-related__row {
    display: grid !important;
    grid-template-columns: 96px 1fr !important;
    grid-template-areas:
      "thumb info"
      "thumb btn" !important;
    column-gap: 1rem !important;
    row-gap: 0.75rem !important;
    align-items: start !important;
    padding: 1.25rem !important;
  }
  body.woocommerce-cart .bp-cart-related .bp-cart-related__thumb {
    grid-area: thumb !important;
    width: 96px !important;
    height: 96px !important;
    border: 1px solid var(--nesa-line) !important;
    border-radius: 12px !important;
    padding: 6px !important;
    box-sizing: border-box !important;
  }
  body.woocommerce-cart .bp-cart-related .bp-cart-related__info {
    grid-area: info !important;
  }
  body.woocommerce-cart .bp-cart-related .bp-cart-related__price {
    color: rgba(29, 29, 29, 0.62) !important;
    font-weight: 400 !important;
  }
  body.woocommerce-cart .bp-cart-related .bp-cart-related__btn {
    grid-area: btn !important;
    width: auto !important;
    justify-self: start !important;
    align-self: start !important;
    padding: 6px 14px !important;
    font-size: 0.9rem !important;
    background: var(--nesa-ink) !important;
    color: #fff !important;
  }

  /* ── TOTAL: 15px side gutter, big bold total, tax note, black pill ── */
  body.woocommerce-cart .cart-collaterals {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  body.woocommerce-cart .cart_totals {
    border: 1px solid var(--nesa-line) !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
    background: #fff !important;
  }
  body.woocommerce-cart .cart_totals > h2 { display: none !important; }

  /* Show only the Total (hide subtotal / shipping rows). */
  body.woocommerce-cart .cart_totals table .cart-subtotal,
  body.woocommerce-cart .cart_totals table tr.shipping,
  body.woocommerce-cart .cart_totals table tr.woocommerce-shipping-totals,
  body.woocommerce-cart .cart_totals table tr.fee,
  body.woocommerce-cart .cart_totals table tr.tax-total,
  body.woocommerce-cart .cart_totals .woocommerce-shipping-calculator,
  body.woocommerce-cart .cart_totals .shipping-calculator-button,
  body.woocommerce-cart .cart_totals .woocommerce-shipping-destination { display: none !important; }

  body.woocommerce-cart .cart_totals table,
  body.woocommerce-cart .cart_totals table tbody,
  body.woocommerce-cart .cart_totals table tr.order-total {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
  }
  body.woocommerce-cart .cart_totals table tr.order-total th,
  body.woocommerce-cart .cart_totals table tr.order-total td {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    text-align: left !important;
  }
  body.woocommerce-cart .cart_totals table tr.order-total th {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--nesa-ink-soft) !important;
    text-transform: none !important;
    margin: 0 0 0.5rem !important;
  }
  body.woocommerce-cart .cart_totals table tr.order-total td {
    font-size: 38px !important;
    font-weight: 700 !important;
    color: var(--nesa-ink) !important;
    line-height: 1.05 !important;
  }
  body.woocommerce-cart .cart_totals table tr.order-total td strong { font-weight: 700 !important; }
  body.woocommerce-cart .cart_totals table tr.order-total td .includes_tax,
  body.woocommerce-cart .cart_totals table tr.order-total td small { display: none !important; }
  body.woocommerce-cart .cart_totals table tr.order-total td::after {
    content: "TVSH-ja e përfshirë. Transporti llogaritet gjatë pagesës." !important;
    display: block !important;
    margin-top: 0.85rem !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    color: var(--nesa-ink-soft) !important;
    line-height: 1.5 !important;
  }

  /* Checkout — full-width black pill, green on hover. */
  body.woocommerce-cart .cart_totals .wc-proceed-to-checkout { padding: 0 !important; margin: 1.5rem 0 0 !important; }
  body.woocommerce-cart .cart_totals .wc-proceed-to-checkout a.checkout-button {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    padding: 1.1rem 1.5rem !important;
    background: var(--nesa-ink) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 9999px !important;
    font-size: 1.0625rem !important;
    font-weight: 700 !important;
    text-transform: none !important;
    text-decoration: none !important;
    transition: background 0.2s ease !important;
  }
  body.woocommerce-cart .cart_totals .wc-proceed-to-checkout a.checkout-button:hover {
    background: var(--nesa-ink) !important;
    color: #fff !important;
  }
}