/*
 * Cart page (Shporta) — BesaPharm. 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: #6b7280 !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 #e5e7eb !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: #1d1d1d !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: #1d1d1d !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 #d1d5db !important;
    border-radius: 9999px !important;
    background: #fff !important;
    color: #1d1d1d !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: #1d1d1d !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: #1d1d1d !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: #6b7280 !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 #e5e7eb, 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 #e5e7eb !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: #1d1d1d !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 #e5e7eb !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: #6b7280 !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: #1d1d1d !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: #6b7280 !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: #1d1d1d !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(--bp-brand-hover, #3d3d3d) !important;
    color: #fff !important;
  }
}

/* ══════════════════════════════════════════════════════
 * Cart list — one labelled row per line item.
 * Replaces the old four-column table; see woocommerce/cart/cart.php.
 * ══════════════════════════════════════════════════════ */
body.woocommerce-cart .bp-cart-list {
  display: block;
  width: 100%;
}

body.woocommerce-cart .bp-cart-row {
  display: grid;
  /* Packed to the left with `justify-content: start`, so the slack in a
   * 1280px row collects on the right instead of stretching the gaps between
   * a colour and a brand name to the width of the page. */
  grid-template-columns: 200px minmax(200px, 300px) 110px 140px 150px 48px;
  justify-content: start;
  align-items: start;
  gap: 1.5rem;
  padding: 2rem 0;
}
body.woocommerce-cart .bp-cart-row + .bp-cart-row {
  border-top: 1px solid #ececec;
}

body.woocommerce-cart .bp-cart-row__media img {
  width: 100%;
  max-width: 160px;
  height: auto;
  display: block;
  object-fit: contain;
}

body.woocommerce-cart .bp-cart-cell {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
body.woocommerce-cart .bp-cart-cell__label {
  font-size: 16px;
  font-weight: 600;
  color: #1d1d1d;
}
body.woocommerce-cart .bp-cart-cell__value,
body.woocommerce-cart .bp-cart-cell__value a {
  font-size: 16px;
  font-weight: 400;
  color: #6f7480;
  text-decoration: none;
}
body.woocommerce-cart .bp-cart-cell__value a:hover {
  color: #1d1d1d;
}
body.woocommerce-cart .bp-cart-cell--colour .bp-cart-cell__value,
body.woocommerce-cart .bp-cart-cell--brand .bp-cart-cell__value {
  text-transform: uppercase;
}

body.woocommerce-cart .bp-cart-row__remove {
  display: flex;
  justify-content: flex-end;
}
body.woocommerce-cart .bp-cart-row__remove a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: #6f7480;
  border-radius: 4px;
}
body.woocommerce-cart .bp-cart-row__remove a:hover {
  color: #111;
  background: #f5f5f5;
}

/* "Nuk ka më stok" / "Vetëm X në stok" (cart.php) — only on a line that cannot
 * be bought as it stands. On desktop it sits under the bin, right-aligned with
 * it across the price and bin columns, centred down the row: the row is the
 * 160px picture tall, so that clears the price caption and amount above it.
 *
 * Absolutely positioned inside that grid area rather than placed in it: a grid
 * item placed in row 1 claims those cells, and the price and bin were pushed
 * onto a second row. Only a row that has the label becomes the positioning
 * box, so every other row is untouched. */
body.woocommerce-cart .bp-cart-row__stock {
  color: var(--oxa-error);
  font-size: 14px;
  font-weight: var(--oxa-fw-bold);
  line-height: 1.3;
}
@media (min-width: 901px) {
  body.woocommerce-cart .bp-cart-row:has(> .bp-cart-row__stock) {
    position: relative;
  }
  body.woocommerce-cart .bp-cart-row__stock {
    position: absolute;
    grid-row: 1;
    grid-column: -3 / -1;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    white-space: nowrap;
  }
}

/* The stacked layout keeps the captions doing their job on a phone. */
@media (max-width: 900px) {
  body.woocommerce-cart .bp-cart-row {
    grid-template-columns: 96px minmax(0, 1fr) 40px;
    gap: 0.75rem 1rem;
    align-items: center;
  }
  body.woocommerce-cart .bp-cart-row__media {
    grid-row: span 4;
  }
  body.woocommerce-cart .bp-cart-row__remove {
    grid-row: 1;
    grid-column: 3;
  }
  body.woocommerce-cart .bp-cart-cell {
    grid-column: 2;
    flex-direction: row;
    gap: 0.5rem;
  }
  body.woocommerce-cart .bp-cart-cell__label::after {
    content: ":";
  }
  /* Stacked: one more line under the price. */
  body.woocommerce-cart .bp-cart-row__stock {
    grid-column: 2;
  }
  /* The caption and price share a line here, so "3 × …" wraps onto its own. */
  body.woocommerce-cart .bp-cart-cell--price {
    flex-wrap: wrap;
  }
  body.woocommerce-cart .bp-cart-cell__unit {
    flex-basis: 100%;
  }
}

/* ══════════════════════════════════════════════════════
 * Checkout — address on the left, the order on the right.
 *
 * WooCommerce's classic markup puts billing and the extra fields in a two-up
 * row, then the order review underneath the pair. The reference reads as one
 * column of form and one column of order, which is also the shape a shopper
 * checks their basket against while typing.
 * ══════════════════════════════════════════════════════ */
@media (min-width: 992px) {
  body.woocommerce-checkout form.checkout.woocommerce-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    column-gap: 4rem;
    align-items: start;
  }
  body.woocommerce-checkout form.checkout #customer_details {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: block;
    width: 100%;
  }
  body.woocommerce-checkout form.checkout #customer_details .col-1,
  body.woocommerce-checkout form.checkout #customer_details .col-2 {
    width: 100%;
    float: none;
    max-width: none;
  }
  body.woocommerce-checkout form.checkout #customer_details .col-2 {
    margin-top: 2.5rem;
  }
  body.woocommerce-checkout form.checkout #order_review_heading {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
  }
  body.woocommerce-checkout form.checkout #order_review {
    grid-column: 2;
    grid-row: 2;
  }
}

/* The order panel itself. */
body.woocommerce-checkout #order_review {
  padding: 1.5rem;
  border: 1px solid #ececec;
  border-radius: 6px;
}
body.woocommerce-checkout #order_review table.shop_table {
  width: 100%;
  margin: 0 0 1rem;
}
/* "Bëje porosinë", measured off the reference's own computed values:
 * #FFFFFF on #000000, 22.652px, padding 8px 16px. 22.652px is 1.41575em — the
 * same step the reference uses for the PDP price and h4, not an arbitrary number.
 * Squared off, like every other button. Weight drops to 400: the reference sets
 * no weight on buttons, so they inherit body, and 600 was making this the
 * heaviest thing on the page. */
body.woocommerce-checkout #place_order {
  width: 100%;
  padding: 8px 16px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #000000 !important;
  color: #ffffff !important;
  font-size: 22.652px !important;
  font-weight: 400 !important;
  line-height: 1.07 !important;
}
/* #111111 is the reference's accent-hover — the one step up from black. */
body.woocommerce-checkout #place_order:hover {
  background: #111111 !important;
}

/* The return line above the button (inc/bp-checkout.php), set like the
 * product page's "Dërgesa dhe kthimi" rows so the two read as the same promise.
 * No bottom margin: the button brings its own 1rem (bp-final.css). */
body.woocommerce-checkout .bp-checkout-return {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1rem 0 0;
  font-size: 14px;
  line-height: 1.35;
  color: #43454b;
}
body.woocommerce-checkout .bp-checkout-return__icon {
  flex: 0 0 auto;
  display: inline-flex;
  color: #1d1d1d;
}

/* ══════════════════════════════════════════════════════
 * Cart layout — one column, totals underneath on the right.
 *
 * bp-overrides.css:134 lays the cart out as a `1fr 380px` grid, which puts the
 * totals card beside the items and squeezes the item row into two thirds of the
 * width. The reference gives the items the full width and drops the totals
 * below them, aligned right. Everything here needs !important because the rules
 * being replaced carry it.
 * ══════════════════════════════════════════════════════ */
@media (min-width: 901px) {
  body.woocommerce-cart .woocommerce {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
  }
  body.woocommerce-cart .woocommerce-cart-form {
    grid-column: 1 !important;
    width: 100% !important;
  }
  body.woocommerce-cart .cart-collaterals {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: 420px !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }
}

/* A rule under the last item separates the order from its total. */
body.woocommerce-cart .bp-cart-list {
  border-bottom: 1px solid #ececec;
}
body.woocommerce-cart .cart-collaterals {
  padding-top: 1.75rem;
}

/* The bin is a neutral control until you hover it — an existing rule painted
 * every .remove link red, which read as an error state on an idle row. */
body.woocommerce-cart .bp-cart-row__remove a.remove,
body.woocommerce-cart .bp-cart-row__remove a.bp-cart-remove {
  color: #6f7480 !important;
  background: none !important;
}
body.woocommerce-cart .bp-cart-row__remove a.remove:hover,
body.woocommerce-cart .bp-cart-row__remove a.bp-cart-remove:hover {
  color: #dc2626 !important;
  background: #f7f7f7 !important;
}

/* ══════════════════════════════════════════════════════
 * Cart, matched to the reference storefront.
 *
 * Item rows sit in a 752px column, centred — measured off the reference's own
 * grid, which is 751.93px wide with auto side margins. The totals stay right-
 * aligned against the full 1280px content width beneath them.
 * ══════════════════════════════════════════════════════ */
@media (min-width: 901px) {
  body.woocommerce-cart .woocommerce-cart-form {
    max-width: 752px !important;
    margin-inline: auto !important;
  }
  body.woocommerce-cart .bp-cart-row {
    grid-template-columns: 150px minmax(0, 1fr) 90px 110px 110px 40px !important;
    gap: 1rem !important;
    justify-content: stretch !important;
  }
  body.woocommerce-cart .bp-cart-row__media img {
    max-width: 130px;
  }

  body.woocommerce-cart .cart-collaterals {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
  }
}

/* ── Totals ──
 * No card: the reference states the figures as right-aligned text under a rule,
 * not inside a panel. bp-overrides.css draws the box and left-aligns the
 * labels, so each of those is undone at matching weight. */
body.woocommerce-cart .cart_totals {
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  text-align: right !important;
}
body.woocommerce-cart .cart_totals > h2 {
  display: block !important;
  font-size: 28px !important;
  font-weight: 300 !important;
  color: #2f3a4a !important;
  text-align: right !important;
  margin: 0 0 1.5rem !important;
}
body.woocommerce-cart .cart_totals table {
  width: 100% !important;
  table-layout: auto !important;
  margin-bottom: 1.25rem !important;
}
body.woocommerce-cart .cart_totals table th,
body.woocommerce-cart .cart_totals table td {
  border: 0 !important;
  border-bottom: 0 !important;
  padding: 0.3rem 0 !important;
  font-size: 17px !important;
  text-align: right !important;
  vertical-align: baseline !important;
  width: auto !important;
}
body.woocommerce-cart .cart_totals table th {
  font-weight: 700 !important;
  color: #2f3a4a !important;
  padding-right: 0.5rem !important;
  white-space: nowrap !important;
}
body.woocommerce-cart .cart_totals table td {
  color: #4a5568 !important;
}
body.woocommerce-cart .cart_totals table tr.order-total th,
body.woocommerce-cart .cart_totals table tr.order-total td {
  font-size: 19px !important;
  font-weight: 700 !important;
  color: #2f3a4a !important;
  padding-top: 0.75rem !important;
}

/* The rows the reference shows and this cart was hiding. */
/* Block, not table-row: these rules exist to un-hide the rows, and a table-row
 * shrinks to its cells, which left the right-aligned text ending mid-page
 * instead of at the margin. Class selectors, so they outrank the display:block
 * set on `tr` further up. */
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.order-total,
body.woocommerce-cart .cart_totals .woocommerce-shipping-destination {
  display: block !important;
  width: 100% !important;
  text-align: right !important;
}
body.woocommerce-cart .cart_totals table tr.woocommerce-shipping-totals td {
  text-align: right !important;
}
body.woocommerce-cart .cart_totals ul#shipping_method {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: right !important;
}
body.woocommerce-cart .cart_totals ul#shipping_method li {
  margin: 0 !important;
}
body.woocommerce-cart .cart_totals .woocommerce-shipping-destination {
  display: block !important;
  margin: 0.25rem 0 0 !important;
  font-size: 16px !important;
  color: #4a5568 !important;
  text-align: right !important;
}
/* The discount reads as money coming off, so it is not painted like an error. */
body.woocommerce-cart .cart_totals table tr.fee th,
body.woocommerce-cart .cart_totals table tr.fee td {
  color: #2f3a4a !important;
}

/* Button: sized to its words and pinned right, not a full-width pill. */
body.woocommerce-cart .cart_totals .wc-proceed-to-checkout {
  text-align: right !important;
  padding: 0 !important;
}
body.woocommerce-cart .cart_totals .wc-proceed-to-checkout a.checkout-button {
  display: inline-block !important;
  width: auto !important;
  padding: 0.7rem 1.4rem !important;
  border-radius: 2px !important;
  background: #111 !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}

/* ── Offer banner ── */
.bp-bogo-notice {
  background: #111;
  color: #fff;
  padding: 0.85rem 1.25rem;
  margin: 0 0 2rem;
  font-size: 16px;
}

/* The reference states these in sentence case; something upstream shouts them. */
body.woocommerce-cart .cart_totals table th,
body.woocommerce-cart .cart_totals table td,
body.woocommerce-cart .cart_totals > h2 {
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* The reference shows no "calculate shipping" link — the address is collected
 * one step later, at checkout. */
body.woocommerce-cart .cart_totals .shipping-calculator-button,
body.woocommerce-cart .cart_totals .woocommerce-shipping-calculator {
  display: none !important;
}

/* The figures read as "Nëntotali 66.40 €" — label and value adjacent, the pair
 * pushed right. A full-width table pins them to opposite edges instead. */
body.woocommerce-cart .cart_totals table {
  width: auto !important;
  min-width: 280px !important;
  /* Capped, or the shipping-estimate sentence sets the table's width and drags
   * the figures away from their labels. */
  max-width: 460px !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}
body.woocommerce-cart .cart_totals .woocommerce-shipping-destination {
  white-space: normal !important;
}
body.woocommerce-cart .cart_totals table th {
  padding-right: 0.75rem !important;
}

/* No rules between the figures — the reference lists them as plain text.
 * bp-final.css:105 draws them via `table.shop_table tbody td`, which carries
 * one more element than the .cart_totals selectors above and so wins on
 * specificity regardless of load order. Matched here rather than nudged. */
body.woocommerce-cart .cart_totals table.shop_table thead th,
body.woocommerce-cart .cart_totals table.shop_table tbody th,
body.woocommerce-cart .cart_totals table.shop_table tbody td,
body.woocommerce-cart .cart_totals table.shop_table tbody tr,
body.woocommerce-cart .cart_totals table.shop_table tfoot td {
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/* ══════════════════════════════════════════════════════
 * Cart — typography and sizing to the client's spec.
 * ══════════════════════════════════════════════════════ */

/* No page title above the cart; the header already says where you are. */
body.woocommerce-cart .bp-page-title.bp-cart-title {
  display: none !important;
}

@media (min-width: 901px) {
  body.woocommerce-cart .bp-cart-row {
    grid-template-columns: 200px minmax(0, 1fr) 90px 110px 110px 40px !important;
    align-items: center !important;
  }
  body.woocommerce-cart .bp-cart-row__media,
  body.woocommerce-cart .bp-cart-row__media img {
    width: 200px !important;
    height: 200px !important;
    max-width: 200px !important;
    object-fit: contain !important;
  }
}

/* Caption above, value below: the caption is the darker, heavier of the two. */
body.woocommerce-cart .bp-cart-cell__label {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #43454b !important;
}
body.woocommerce-cart .bp-cart-cell__value,
body.woocommerce-cart .bp-cart-cell__value a {
  font-size: 18px !important;
  font-weight: 300 !important;
  color: #000 !important;
}

/* ── Totals ── */
body.woocommerce-cart .cart_totals > h2 {
  font-size: 22.4px !important;
  color: #131315 !important;
}
body.woocommerce-cart .cart_totals table tr.cart-subtotal th,
body.woocommerce-cart .cart_totals table tr.cart-subtotal td {
  font-size: 18px !important;
  color: #43454b !important;
}
body.woocommerce-cart .cart_totals table th,
body.woocommerce-cart .cart_totals table td,
body.woocommerce-cart .cart_totals table tr.order-total th,
body.woocommerce-cart .cart_totals table tr.order-total td,
body.woocommerce-cart .cart_totals .woocommerce-shipping-destination {
  font-size: 16px !important;
  color: #43454b !important;
}

/* Label and figure read as one phrase, so the table shrinks to its content
 * instead of holding them at opposite ends of a fixed width. */
body.woocommerce-cart .cart_totals table {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  table-layout: auto !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}
body.woocommerce-cart .cart_totals table th {
  padding-right: 0.4rem !important;
  white-space: nowrap !important;
}
body.woocommerce-cart .cart_totals table td {
  white-space: nowrap !important;
}
body.woocommerce-cart .cart_totals .woocommerce-shipping-destination {
  white-space: normal !important;
}

/* ══════════════════════════════════════════════════════
 * Checkout — typography and the order panel.
 * ══════════════════════════════════════════════════════ */

/* The three section headings read as one family, and sit level with each other
 * across the two columns. */
body.woocommerce-checkout .woocommerce-billing-fields > h3,
body.woocommerce-checkout .woocommerce-additional-fields > h3,
body.woocommerce-checkout #order_review_heading {
  font-size: 25.888px !important;
  font-weight: 300 !important;
  color: #131315 !important;
  margin: 0 0 1.5rem !important;
  line-height: 1.2 !important;
  /* No rule under the section headings. bp-flow-fix.css:210 gives every
   * .woocommerce-checkout h3 a `border-bottom: 1px solid #e5e7eb` plus .75rem of
   * padding to clear it; this block already outranks that rule on every other
   * property, it just never spoke to those two. The reference underlines none of
   * these headings. */
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}

body.woocommerce-checkout .woocommerce-billing-fields label,
body.woocommerce-checkout .woocommerce-additional-fields label,
body.woocommerce-checkout .woocommerce-shipping-fields label {
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #43454b !important;
}
/*
 * "Emër *:" — the colon closes the label, after the required mark.
 *
 * Attached to the .required marker rather than to the label, which is what keeps
 * it off "Email adresa (opsionale)": WooCommerce gives optional fields a
 * .optional span instead, so there is no ::after to hang the colon on. That also
 * means the colon can never drift away from the asterisk, however the label text
 * wraps.
 *
 * Punctuation, so CSS rather than filtering each label string in PHP — a filter
 * would have to guard against double-appending on every re-render of the form.
 */
body.woocommerce-checkout .woocommerce-billing-fields label .required::after,
body.woocommerce-checkout .woocommerce-shipping-fields label .required::after,
body.woocommerce-checkout
  .woocommerce-additional-fields
  label
  .required::after {
  content: ":";
  /* The asterisk is red; the colon belongs to the label, so it takes the
   * label's colour back rather than inheriting that red. */
  color: #43454b;
  font-weight: 400;
  text-decoration: none;
}

/* No #ship-to-different-address rules here: the shipping-address section is
 * switched off in inc/bp-checkout.php, so that heading and its checkbox never
 * render and styling them would be dead weight. */

/*
 * The order-notes box, shorter.
 *
 * bp-flow-fix.css:234 gives every checkout textarea `min-height: 100px`, which
 * made an optional one-line note the tallest field on the form. 72px is about two
 * lines of the 15px text plus its padding — WooCommerce already asks for rows="2"
 * on this field, so this stops the min-height overriding that.
 *
 * `resize: vertical` from that same rule is left alone: anyone with more to say
 * can still drag it open.
 */
body.woocommerce-checkout .woocommerce-checkout #order_comments,
body.woocommerce-checkout
  .woocommerce-checkout
  .woocommerce-additional-fields
  textarea {
  min-height: 72px !important;
  height: 72px !important;
}

/* The country is the one value the shopper cannot change, so it is stated
 * rather than offered — heavier than the labels around it. */
body.woocommerce-checkout #billing_country_field strong,
body.woocommerce-checkout #billing_country_field .woocommerce-input-wrapper,
body.woocommerce-checkout #billing_country_field > span:not(.required) {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #43454b !important;
}

/* ── Order panel ── */
body.woocommerce-checkout #order_review {
  padding: 0 !important;
  border: 0 !important;
}

body.woocommerce-checkout .bp-review__head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.75rem;
  font-size: 16px;
  font-weight: 600;
  color: #131315;
}

body.woocommerce-checkout .bp-review__row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 0;
}
body.woocommerce-checkout .bp-review__media img {
  width: 84px;
  height: 84px;
  object-fit: contain;
  display: block;
}
body.woocommerce-checkout .bp-review__name {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
body.woocommerce-checkout .bp-review__title {
  font-size: 16px;
  color: #131315;
}
body.woocommerce-checkout .bp-review__meta {
  font-size: 15px;
  color: #43454b;
}
body.woocommerce-checkout .bp-review__total {
  font-size: 16px;
  color: #43454b;
  white-space: nowrap;
}

/* "3 × €64.90" under a line total whose quantity is more than 1, in the cart
 * (cart.php) and the order summary (review-order.php) — a step below the total
 * it explains, in the site's body grey, but dark enough to be noticed. Outside
 * .bp-cart-cell__value on purpose: the amounts in there are forced to the
 * price's own colour and weight. */
body.woocommerce-cart .bp-cart-cell__unit,
body.woocommerce-checkout .bp-review__unit {
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: #43454b;
  white-space: nowrap;
}

body.woocommerce-checkout .bp-review__totals {
  margin-top: 1.25rem;
}

/*
 * Totals: the figure sits next to its label, not across the panel from it.
 *
 * These rows were flex + space-between, which pushed every amount to the far
 * right edge and left a lane of empty space in the middle — the label and the
 * number it belongs to were the two things furthest apart on the row.
 *
 * A two-column grid instead. The fixed first column is what keeps the amounts
 * aligned with each other down the panel: left-aligning them individually would
 * make the column ragged, because "Totali" and "BLEJ 1, MERR 1 FALAS" are
 * nothing like the same length. 160px is measured off the reference — it is the
 * width at which the longest label wraps after "MERR 1", as it does there.
 */
body.woocommerce-checkout .bp-review__line {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  align-items: baseline;
  gap: 0 1rem;
  padding: 0.35rem 0;
  font-size: 16px;
  color: #43454b;
}
/* No nowrap: the label column is fixed now, so a long label has to be allowed
 * to wrap inside it rather than widening the column and pushing the amounts out
 * of alignment. */
body.woocommerce-checkout .bp-review__label {
  font-weight: 600;
  color: #131315;
}
body.woocommerce-checkout .bp-review__value {
  text-align: left;
}
body.woocommerce-checkout .bp-review__line--total {
  font-size: 18px;
}
body.woocommerce-checkout .bp-review__line--total .bp-review__value {
  font-weight: 700;
  color: #131315;
}
@media (max-width: 480px) {
  body.woocommerce-checkout .bp-review__line {
    grid-template-columns: 130px minmax(0, 1fr);
  }
}

/* ── Payment methods ── */
body.woocommerce-checkout #payment,
body.woocommerce-checkout .woocommerce-checkout-payment {
  background: transparent !important;
  border-radius: 0 !important;
  margin-top: 1.5rem;
}
body.woocommerce-checkout ul.wc_payment_methods {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
/*
 * No box around a payment method — the checkbox is the control, and a bordered
 * white card around a single radio and one word was drawing a frame around
 * nothing.
 *
 * The #payment in the selector is not decoration. bp-final.css:75 sets the
 * border with `!important` through `body.woocommerce-checkout #payment
 * .payment_methods li`, which carries an ID; !important alone does not beat it,
 * so this rule has to match that ID and add an element to win the cascade.
 * WooCommerce puts both class names on the same <ul>, hence wc_payment_methods
 * here and payment_methods there.
 */
body.woocommerce-checkout #payment ul.wc_payment_methods li {
  margin: 0 0 0.5rem !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}
/* The selected state was a grey fill plus a darker border on that same card.
 * With the card gone there is nothing to tint; the checked box says it. */
body.woocommerce-checkout #payment ul.wc_payment_methods li:has(input:checked) {
  background: transparent !important;
  border: 0 !important;
}
body.woocommerce-checkout ul.wc_payment_methods label {
  display: inline-flex !important;
  align-items: center;
  gap: 0.6rem;
  font-size: 16px !important;
  color: #43454b !important;
}
/* Square boxes, as in the reference — a radio drawn as a checkbox. */
body.woocommerce-checkout ul.wc_payment_methods input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1px solid #9ca3af;
  border-radius: 2px;
  background: #fff;
  cursor: pointer;
}
body.woocommerce-checkout ul.wc_payment_methods input[type="radio"]:checked {
  background: #111;
  border-color: #111;
}
body.woocommerce-checkout .payment_box {
  background: transparent !important;
  padding: 0.25rem 0 0.5rem 1.6rem !important;
  font-size: 15px !important;
  color: #6b7280 !important;
}
body.woocommerce-checkout .payment_box::before {
  display: none !important;
}

body.woocommerce-checkout .woocommerce-privacy-policy-text p {
  font-size: 15px !important;
  color: #43454b !important;
  line-height: 1.6 !important;
}

/* The shipping row comes from WooCommerce as a table row; make it read like the
 * flex lines above and below it. */
body.woocommerce-checkout .bp-review__shipping {
  width: 100%;
  border: 0 !important;
  margin: 0 !important;
}
body.woocommerce-checkout .bp-review__shipping tr {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
}
body.woocommerce-checkout .bp-review__shipping th,
body.woocommerce-checkout .bp-review__shipping td {
  border: 0 !important;
  padding: 0.35rem 0 !important;
  font-size: 16px !important;
  color: #43454b !important;
  background: transparent !important;
}
body.woocommerce-checkout .bp-review__shipping th {
  font-weight: 600 !important;
  color: #131315 !important;
  white-space: nowrap;
}
body.woocommerce-checkout .bp-review__shipping td {
  text-align: right !important;
}
body.woocommerce-checkout .bp-review__shipping ul#shipping_method {
  list-style: none;
  margin: 0;
  padding: 0;
}
body.woocommerce-checkout
  .bp-review__shipping
  .woocommerce-shipping-destination,
body.woocommerce-checkout .bp-review__shipping .shipping-calculator-button {
  display: none !important;
}

/* Headings level across the two columns. */
body.woocommerce-checkout form.checkout #order_review_heading {
  margin-top: 0 !important;
}

/* The order-review heading was hidden by an older rule; the reference shows it
 * level with "Faturim & Dërgim" at the top of the right column. */
body.woocommerce-checkout form.checkout #order_review_heading {
  display: block !important;
  visibility: visible !important;
}

/* The additional-fields section titles itself with whatever heading level
 * WooCommerce chose, so match on the container rather than the tag. */
body.woocommerce-checkout .woocommerce-additional-fields h2,
body.woocommerce-checkout .woocommerce-additional-fields h3,
body.woocommerce-checkout .woocommerce-additional-fields h4 {
  font-size: 25.888px !important;
  font-weight: 300 !important;
  color: #131315 !important;
  margin: 0 0 1.5rem !important;
}

/* Whether the country renders as a locked label or a one-option select, it is
 * the same weight either way. */
body.woocommerce-checkout #billing_country_field strong,
body.woocommerce-checkout #billing_country_field select,
body.woocommerce-checkout #billing_country_field .select2-selection__rendered {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #43454b !important;
}

/* ══════════════════════════════════════════════════════
 * Cart — dividers and right-flowing totals.
 * ══════════════════════════════════════════════════════ */

/* Two rules only: one closing the product list, one opening the totals. The
 * per-row borders between items go, so the list reads as a single block. */
body.woocommerce-cart .bp-cart-row + .bp-cart-row {
  border-top: 0 !important;
}
body.woocommerce-cart .bp-cart-list {
  border-bottom: 1px solid #ececec !important;
  padding-bottom: 1.5rem;
}
body.woocommerce-cart .cart-collaterals {
  border-top: 1px solid #ececec !important;
  padding-top: 2rem !important;
  margin-top: 2rem !important;
}

/* Each figure is one line of text ending at the right margin — the label and
 * its amount are one phrase, not two columns. The table is stripped back to
 * running text for that; a th/td pair always leaves a gap between them. */
body.woocommerce-cart .cart_totals table,
body.woocommerce-cart .cart_totals table tbody,
body.woocommerce-cart .cart_totals table tr,
body.woocommerce-cart .cart_totals table th,
body.woocommerce-cart .cart_totals table td {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: right !important;
}
body.woocommerce-cart .cart_totals table tr {
  margin-bottom: 0.45rem !important;
}
body.woocommerce-cart .cart_totals table th,
body.woocommerce-cart .cart_totals table td {
  display: inline !important;
}
/* A non-breaking space: a plain one collapses between inline elements. */
body.woocommerce-cart .cart_totals table th::after {
  content: "\00a0";
}
body.woocommerce-cart .cart_totals .woocommerce-shipping-destination {
  display: block !important;
}

/* ══════════════════════════════════════════════════════
 * Checkout — square fields and the two-column division.
 * ══════════════════════════════════════════════════════ */

/* No rounded corners anywhere on the form. */
body.woocommerce-checkout .woocommerce-checkout input[type="text"],
body.woocommerce-checkout .woocommerce-checkout input[type="email"],
body.woocommerce-checkout .woocommerce-checkout input[type="tel"],
body.woocommerce-checkout .woocommerce-checkout input[type="password"],
body.woocommerce-checkout .woocommerce-checkout input[type="number"],
body.woocommerce-checkout .woocommerce-checkout select,
body.woocommerce-checkout .woocommerce-checkout textarea,
body.woocommerce-checkout .select2-container .select2-selection {
  border-radius: 0 !important;
}

/*
 * Emër and Mbiemër share a row.
 *
 * inc/bp-checkout.php already asks for this — it puts `form-row-first` on the
 * first name and `form-row-last` on the surname, and bp-flow-fix.css:215 lays
 * the wrapper out as a two-column grid to receive them. Both were being thrown
 * away: bp-final.css:56-60 sets `display: flex !important; flex-direction:
 * column !important` on the same wrapper, and it loads later, so every field was
 * stacked and the two classes did nothing.
 *
 * The grid is restored here rather than by deleting that rule, because
 * bp-final.css is the cascade's last word for several other checkout fixes and
 * this file is the one that loads after it.
 *
 * Columns are assigned explicitly instead of relying on auto-flow: `Shteti` is
 * a plain <strong>, not an input, and any field WooCommerce adds later would
 * otherwise land in whichever cell happened to be free and split a pair.
 */
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1rem !important;
  align-items: start !important;
}
body.woocommerce-checkout
  .woocommerce-billing-fields__field-wrapper
  > .form-row-first,
body.woocommerce-checkout
  .woocommerce-shipping-fields__field-wrapper
  > .form-row-first {
  grid-column: 1 !important;
}
body.woocommerce-checkout
  .woocommerce-billing-fields__field-wrapper
  > .form-row-last,
body.woocommerce-checkout
  .woocommerce-shipping-fields__field-wrapper
  > .form-row-last {
  grid-column: 2 !important;
}
/* Everything else is full width: country, municipality, street, phone, e-mail. */
body.woocommerce-checkout
  .woocommerce-billing-fields__field-wrapper
  > .form-row-wide,
body.woocommerce-checkout
  .woocommerce-shipping-fields__field-wrapper
  > .form-row-wide,
body.woocommerce-checkout
  .woocommerce-billing-fields__field-wrapper
  > p:not(.form-row-first):not(.form-row-last),
body.woocommerce-checkout
  .woocommerce-shipping-fields__field-wrapper
  > p:not(.form-row-first):not(.form-row-last) {
  grid-column: 1 / -1 !important;
}

/* Only genuinely narrow screens stack the pair. */
@media (max-width: 480px) {
  body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
    grid-template-columns: 1fr !important;
  }
  body.woocommerce-checkout
    .woocommerce-billing-fields__field-wrapper
    > .form-row-first,
  body.woocommerce-checkout
    .woocommerce-billing-fields__field-wrapper
    > .form-row-last,
  body.woocommerce-checkout
    .woocommerce-shipping-fields__field-wrapper
    > .form-row-first,
  body.woocommerce-checkout
    .woocommerce-shipping-fields__field-wrapper
    > .form-row-last {
    grid-column: 1 / -1 !important;
  }
}

/*
 * One border colour across every field, and a darker one while typing.
 *
 * The municipality dropdown is the reference: whatever it reads as at rest is
 * what the text boxes, the textarea and the select2 shell now read as too, so
 * the column is one material instead of two that nearly match.
 *
 * Focus previously moved the border to #111 AND added a 3px translucent glow
 * ring. The ring is the part that did not belong — eflow has no ring on any
 * field — so focus is now only the border going near-black, which is what
 * "more black when you click into it" asks for.
 */
body.woocommerce-checkout .woocommerce-checkout .form-row .input-text,
body.woocommerce-checkout .woocommerce-checkout .form-row select,
body.woocommerce-checkout .woocommerce-checkout .form-row textarea,
body.woocommerce-checkout
  .woocommerce-checkout
  .select2-container
  .select2-selection {
  border: 1px solid #e5e7eb !important;
  background: #fff !important;
}

/*
 * Shteti is a statement, not a control — so it gets no box.
 *
 * The reference renders the country as plain bold text, because its WooCommerce
 * emits <strong>Kosovë</strong> when only one country is allowed. This
 * WooCommerce emits a real one-option <select class="country_to_state--single">
 * instead, which the rule above then drew a border and a white field around —
 * a box the shopper cannot change anything inside.
 *
 * Flattened to read as text. It stays a <select> on purpose: WooCommerce's
 * country_to_state script reads it to populate Komuna, so replacing or hiding
 * the element would break the municipality list.
 */
body.woocommerce-checkout .woocommerce-checkout #billing_country_field select,
body.woocommerce-checkout
  .woocommerce-checkout
  select.country_to_state--single {
  border: 0 !important;
  background: none !important;
  background-image: none !important;
  padding: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  font-weight: 600 !important;
  color: #43454b !important;
}
/* And no focus border either — there is nothing to focus into. */
body.woocommerce-checkout
  .woocommerce-checkout
  #billing_country_field
  select:focus {
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

body.woocommerce-checkout .woocommerce-checkout .form-row .input-text:focus,
body.woocommerce-checkout .woocommerce-checkout .form-row select:focus,
body.woocommerce-checkout .woocommerce-checkout .form-row textarea:focus,
body.woocommerce-checkout
  .woocommerce-checkout
  .select2-container--focus
  .select2-selection,
body.woocommerce-checkout
  .woocommerce-checkout
  .select2-container--open
  .select2-selection {
  border-color: #131315 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Breadcrumbs have no place mid-funnel.
 *
 * Backstop only. No theme or WooCommerce breadcrumb reaches checkout in the first
 * place — the crumb trail hangs off woocommerce_before_main_content, which
 * WooCommerce fires from its archive/single templates, and checkout renders
 * through page.php instead. This catches an SEO plugin emitting the same class.
 * See the note in inc/bp-checkout.php. */
body.woocommerce-checkout .woocommerce-breadcrumb {
  display: none !important;
}

/* The address column is the wider of the two; the order panel takes the rest.
 * Measured off the reference: #customer_details is ~698px of a 1280 row. */
@media (min-width: 992px) {
  body.woocommerce-checkout form.checkout.woocommerce-checkout {
    grid-template-columns: minmax(0, 698px) minmax(0, 1fr);
    column-gap: 3.5rem;
  }
}

/* The rule under the products spans the page, like the header above it; only
 * the rows themselves are held to the narrower column. Previously the form
 * carried both the width and the border, so the divider stopped at 752px. */
@media (min-width: 901px) {
  body.woocommerce-cart .woocommerce-cart-form {
    max-width: none !important;
    margin-inline: 0 !important;
  }
  body.woocommerce-cart .bp-cart-list {
    max-width: 752px !important;
    margin-inline: auto !important;
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  body.woocommerce-cart .woocommerce-cart-form {
    border-bottom: 1px solid #ececec !important;
    padding-bottom: 1.5rem !important;
  }
}

/* A beat between the delivery block and the money coming off, as in the
 * reference — otherwise the six lines read as one undifferentiated column. */
body.woocommerce-cart .cart_totals table tr.fee {
  margin-top: 0.9rem !important;
}

/* ── Vertical rhythm ──
 * The rows carried 32px top and bottom, so two products sat 64px apart with a
 * 200px picture floating in the middle of each. Halved. The tail of the page
 * loses the same way: the totals no longer sit a full block above the footer. */
body.woocommerce-cart .bp-cart-row {
  padding: 0.875rem 0 !important;
}

body.woocommerce-cart .cart-collaterals {
  padding-top: 1.25rem !important;
  margin-top: 1.25rem !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
body.woocommerce-cart .woocommerce-cart-form {
  padding-bottom: 0.875rem !important;
}
body.woocommerce-cart .site-main,
body.woocommerce-cart main.site-main {
  padding-bottom: 0.75rem !important;
}
body.woocommerce-cart .woocommerce {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* The page wrapper's own tail. .site-main is not the element here — the cart
 * sits directly in main.oxa-page, which carries the 24px. */
body.woocommerce-cart main.oxa-page {
  padding-bottom: 0.5rem !important;
}

/* ── Small corrections ── */

/* The offer banner was as tall as a section heading. */
.bp-bogo-notice {
  padding: 0.5rem 1rem !important;
  margin: 0 0 1.25rem !important;
}

/* The price carries a little more weight than the colour and brand beside it —
 * it is the number the shopper is actually checking. */
body.woocommerce-cart .bp-cart-cell--price .bp-cart-cell__value,
body.woocommerce-cart .bp-cart-cell--price .bp-cart-cell__value .amount,
body.woocommerce-cart .bp-cart-cell--price .bp-cart-cell__value bdi {
  font-weight: 500 !important;
}

/* A 26px bin, matching the reference's hit area. */
body.woocommerce-cart .bp-cart-row__remove a {
  width: 44px !important;
  height: 44px !important;
}
body.woocommerce-cart .bp-cart-row__remove svg {
  width: 26px !important;
  height: 26px !important;
}

/* The delivery figure is not emphasised — it reads at the same weight as the
 * "Me pages:" label it follows. WooCommerce wraps the amount in its own
 * element, which is where the bold was coming from. */
body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals td,
body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals td .amount,
body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals td bdi,
body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals td strong,
body.woocommerce-cart .cart_totals tr.shipping td,
body.woocommerce-cart .cart_totals tr.shipping td .amount,
body.woocommerce-cart .cart_totals tr.shipping td bdi {
  font-weight: 400 !important;
}

/* The customer's own details in "Dërgesa për …" — address, komuna — stay
 * bold: only the price amount above was meant to be flattened. */
body.woocommerce-cart
  .cart_totals
  tr.woocommerce-shipping-totals
  td
  .woocommerce-shipping-destination
  strong,
body.woocommerce-checkout .woocommerce-shipping-destination strong {
  font-weight: 600 !important;
}

/* ──────────────────────────────────────────────────────────────────────────
 * Order received / thank-you page
 *
 * Lives here because is_checkout() is true on the order-received endpoint, so
 * this file is already loaded there — see the conditional in inc/enqueue.php.
 *
 * The success and failure states are selected on [data-success] rather than a
 * class, matching the attribute the template sets, so anything else keying off
 * that state reads the same signal.
 * ────────────────────────────────────────────────────────────────────────── */

.bp-thankyou {
  max-width: 640px;
  margin: 2.5rem auto 3.5rem;
  padding: 0 1.25rem;
  text-align: center;
}

.bp-thankyou__mark {
  display: inline-flex;
  width: 64px;
  height: 64px;
  margin-bottom: 1.25rem;
}
.bp-thankyou__mark svg {
  width: 100%;
  height: 100%;
}

.bp-thankyou[data-success="1"] .bp-thankyou__mark--ok {
  color: var(--oxa-success);
}
.bp-thankyou[data-success="0"] .bp-thankyou__mark--fail {
  color: var(--oxa-error);
}

/* Title and the line under it both start on the same vertical line: left-aligned
 * to the left edge of the order-details box below (both are full-width children
 * of the centred .bp-thankyou column, so their text begins at its left gutter).
 * The tick above stays centred — only these two go left. */
.bp-thankyou__title,
.bp-thankyou__note {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}

.bp-thankyou__title {
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  font-weight: var(--oxa-fw-heading);
  color: var(--oxa-heading);
  line-height: 1.25;
}

.bp-thankyou__note {
  margin-bottom: 2rem;
  color: var(--oxa-muted);
  font-size: 0.9375rem;
}

/* The facts list. Label above value, left-aligned inside a centred block —
 * centring the values themselves makes an order number hard to read back. */
.bp-thankyou__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem 1.5rem;
  margin: 0 0 2rem;
  padding: 1.25rem;
  border: 1px solid var(--oxa-border);
  border-radius: var(--oxa-radius);
  text-align: left;
}
.bp-thankyou__fact dt {
  margin: 0 0 0.2rem;
  font-size: 0.75rem;
  font-weight: var(--oxa-fw-body);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--oxa-muted);
}
.bp-thankyou__fact dd {
  margin: 0;
  /* A long e-mail is one unbreakable word — without this it runs past the
   * card's padding instead of wrapping inside its column. */
  overflow-wrap: anywhere;
  font-size: 0.9375rem;
  font-weight: var(--oxa-fw-bold);
  color: var(--oxa-heading);
}

.bp-thankyou__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
}

.bp-thankyou__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.75rem 1.75rem;
  border: 1px solid var(--oxa-accent);
  border-radius: var(--oxa-radius);
  background: var(--oxa-accent);
  color: var(--oxa-on-primary);
  font-size: 0.9375rem;
  font-weight: var(--oxa-fw-body);
  transition:
    background var(--oxa-dur) var(--oxa-ease),
    color var(--oxa-dur) var(--oxa-ease);
}
.bp-thankyou__btn:hover {
  background: var(--oxa-accent-hover);
  border-color: var(--oxa-accent-hover);
  color: var(--oxa-on-primary);
}

.bp-thankyou__btn--ghost {
  background: transparent;
  color: var(--oxa-heading);
  border-color: var(--oxa-border);
}
.bp-thankyou__btn--ghost:hover {
  background: transparent;
  border-color: var(--oxa-accent);
  color: var(--oxa-accent);
}

/* WooCommerce's own order-details table follows, printed by the
 * woocommerce_thankyou hook. Left-align it — it is tabular data, not a message. */
.bp-thankyou .woocommerce-order-details,
.bp-thankyou .woocommerce-customer-details {
  margin-top: 2.5rem;
  text-align: left;
}

/* Billing / shipping address boxes: two equal columns of equal height, with the
 * phone and e-mail inside the bordered box and long e-mails wrapped rather than
 * running past its 288px edge. WooCommerce floats the columns at 48% and leaves
 * each box its own height, so the e-mail spilled out of the shorter one. */
.bp-thankyou .woocommerce-customer-details .woocommerce-columns--addresses {
  display: flex;
  gap: 1.5rem;
  align-items: stretch;
  margin: 0;
}
.bp-thankyou .woocommerce-customer-details .woocommerce-column {
  float: none;
  width: auto;
  margin: 0;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
}
.bp-thankyou .woocommerce-customer-details address {
  flex: 1 1 auto;
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--oxa-border, #e6e6ea);
  border-radius: 6px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Stack them on a phone — side by side they would be ~120px each. */
@media (max-width: 600px) {
  .bp-thankyou .woocommerce-customer-details .woocommerce-columns--addresses {
    flex-direction: column;
    gap: 1.25rem;
  }
}

/* "Merr Gentli App … cashbacks" under the order details (thankyou.php) wears
 * .bp-thankyou__note, so it renders exactly like the line under the title;
 * only the app name is lifted out of it. */
.bp-thankyou__app {
  font-weight: var(--oxa-fw-bold);
}

@media (max-width: 480px) {
  .bp-thankyou {
    margin-top: 1.5rem;
  }
  .bp-thankyou__title {
    font-size: 1.25rem;
  }
  .bp-thankyou__facts {
    grid-template-columns: 1fr;
  }
  .bp-thankyou__actions {
    flex-direction: column;
  }
  .bp-thankyou__btn {
    width: 100%;
  }
}

/* ══════════════════════════════════════════════════════
 * Empty cart — the notice and the way back to the shop
 *
 * WooCommerce already renders both, with the right Albanian from the sq pack:
 * .cart-empty.woocommerce-info and .return-to-shop a.button. Only the paint was
 * wrong. Three rules were dressing them:
 *   - bp-flow-fix.css:113  .woocommerce-info as a light-blue rounded box (#eff6ff
 *                          on #bfdbfe, 10px radius) with an information glyph
 *   - bp-flow-fix.css:264  .cart-empty centred, grey, 4rem of padding
 *   - bp-flow-fix.css:265  the button rounded at 10px
 *
 * The reference makes the notice a flat black band across the content column with
 * white text and no glyph, and the button a black rectangle beneath it, both
 * flush left.
 *
 * Scoped through .woocommerce so these outrank two things that load after this
 * file: the `padding: 1rem 1.25rem !important` printed into wp_head by
 * inc/b2b-content-fixes.php at priority 20, and the flex/padding-left inline
 * style attached to this stylesheet in inc/enqueue.php.
 * ══════════════════════════════════════════════════════ */

body.woocommerce-cart .woocommerce .cart-empty,
body.woocommerce-cart .woocommerce .wc-empty-cart-message .cart-empty {
  background: #000000 !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 10px 14px !important;
  margin: 0 0 10px !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  text-align: left !important;
  justify-content: flex-start !important;
}

/* The information glyph goes with the blue box it belonged to. Left as a
 * ::before override rather than removed from the markup — WooCommerce draws it in
 * CSS, so there is nothing in the document to take out. */
body.woocommerce-cart .woocommerce .cart-empty::before {
  display: none !important;
  content: none !important;
}

/* The wrapper WooCommerce puts around the message carries no styling of its own;
 * zeroing its margin keeps the 10px above the button exact. */
body.woocommerce-cart .woocommerce .wc-empty-cart-message {
  margin: 0 !important;
}

body.woocommerce-cart .woocommerce p.return-to-shop {
  margin: 0 !important;
}

body.woocommerce-cart .woocommerce .return-to-shop a.button,
body.woocommerce-cart .woocommerce .return-to-shop a.button.wc-backward {
  display: inline-block !important;
  padding: 10px 20px !important;
  margin: 0 !important;
  background: #000000 !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
}
/* #111111 is the accent-hover step, the same one Bëje porosinë uses. */
body.woocommerce-cart .woocommerce .return-to-shop a.button:hover {
  background: #111111 !important;
  color: #ffffff !important;
}

@media (max-width: 480px) {
  body.woocommerce-cart .woocommerce .cart-empty {
    font-size: 15px !important;
  }
  body.woocommerce-cart .woocommerce .return-to-shop a.button {
    display: block !important;
    text-align: center !important;
  }
}

/* ── Payment method notes ──
 * WooCommerce draws the description as a grey callout with a pointer triangle.
 * The reference shows plain text on the page, so the box, the arrow, the
 * shadow and the fill all come off; only the words remain. */
body.woocommerce-checkout .wc_payment_method .payment_box,
body.woocommerce-checkout ul.wc_payment_methods li .payment_box {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0.25rem 0 0.75rem !important;
  padding: 0 0 0 1.6rem !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #43454b !important;
}
body.woocommerce-checkout .wc_payment_method .payment_box::before,
body.woocommerce-checkout .wc_payment_method .payment_box::after {
  display: none !important;
  content: none !important;
}
body.woocommerce-checkout .wc_payment_method .payment_box p {
  margin: 0 !important;
}
/* Kesh has no note at all, so it must not leave a gap behind. */
body.woocommerce-checkout .wc_payment_method .payment_box:empty {
  display: none !important;
  margin: 0 !important;
}

/* WooCommerce paints the note under `#payment div.payment_box`, an ID-level
 * selector; a class-only override loses to it. Matched here. */
body.woocommerce-checkout #payment div.payment_box,
body.woocommerce-checkout #payment ul.wc_payment_methods li div.payment_box {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0.25rem 0 0.5rem 1.6rem !important;
}
body.woocommerce-checkout #payment div.payment_box::before,
body.woocommerce-checkout #payment div.payment_box::after {
  display: none !important;
  content: none !important;
}

/* The note reads at 14px #43454B — the figures measured off the reference. */
body.woocommerce-checkout #payment div.payment_box,
body.woocommerce-checkout #payment div.payment_box p {
  font-size: 14px !important;
  color: #43454b !important;
}

/* ── Late corrections ── */

/* Payment methods sit close together — 16px between the two rows was reading as
 * two separate sections rather than one choice. The #payment rule above carries
 * an ID, so this has to match it to win the cascade, and the list's own row-gap
 * has to come down with it or the two add up. */
body.woocommerce-checkout ul.wc_payment_methods {
  row-gap: 0 !important;
}
body.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method {
  margin: 0 0 4px !important;
}

/* The model number is a link but should not look like one — the row is already
 * clickable through the picture. */
body.woocommerce-cart .bp-cart-cell--name .bp-cart-cell__value a {
  text-decoration: none !important;
}
body.woocommerce-cart .bp-cart-cell--name .bp-cart-cell__value a:hover {
  text-decoration: none !important;
  color: #000 !important;
}

/* 18px #000000 at normal weight: still a step up from the 300 used by the
 * colour and brand beside it, without the 500 I had overshot to. */
body.woocommerce-cart .bp-cart-cell--price .bp-cart-cell__value,
body.woocommerce-cart .bp-cart-cell--price .bp-cart-cell__value .amount,
body.woocommerce-cart .bp-cart-cell--price .bp-cart-cell__value bdi {
  font-weight: 400 !important;
  color: #000 !important;
}

/* "Dërgim" reads at the same weight as the figure it introduces. */
body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals th,
body.woocommerce-cart .cart_totals tr.shipping th {
  font-weight: 400 !important;
}

/* ══════════════════════════════════════════════════════
 * Cart on phones (≤767px): tighter rows, smaller item text.
 *
 * Appended at the end because the blocks above set the cell type to 18px
 * !important; matching !important and coming later is what settles it.
 * ══════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Item text down from 18px, and the label/value pair closed up so a product's
     four lines read as one block rather than four separate rows. */
  body.woocommerce-cart .bp-cart-cell__label,
  body.woocommerce-cart .bp-cart-cell__value,
  body.woocommerce-cart .bp-cart-cell__value a {
    font-size: 14px !important;
    line-height: 1.35 !important;
  }
  body.woocommerce-cart .bp-cart-cell {
    gap: 0 !important;
    margin: 0 !important;
  }

  /* Less air between products. */
  body.woocommerce-cart .bp-cart-row {
    gap: 0.5rem 0.75rem !important;
    padding-top: 0.6rem !important;
    padding-bottom: 0.6rem !important;
  }
  body.woocommerce-cart .bp-cart-row__media,
  body.woocommerce-cart .bp-cart-row__media img {
    width: 88px !important;
    height: 88px !important;
    max-width: 88px !important;
    object-fit: contain !important;
  }

  /* Totals: same order and centring as the reference, just closer together. */
  body.woocommerce-cart .cart_totals table th,
  body.woocommerce-cart .cart_totals table td {
    padding-top: 0.3rem !important;
    padding-bottom: 0.3rem !important;
    font-size: 15px !important;
  }
  body.woocommerce-cart .cart_totals h2 {
    margin-bottom: 0.75rem !important;
    font-size: 20px !important;
  }
  body.woocommerce-cart .wc-proceed-to-checkout {
    padding-top: 0.5rem !important;
  }
}

/* ── Cart items on phones: values only, bigger photo ── */
@media (max-width: 767px) {
  /* "Ngjyra", "Brendi", "Çmimi", "Produkti" are captions for a desktop table.
     On a phone the four values read fine on their own — BEZH / VAGABOND /
     €149.90 needs no column heading in front of it. Hidden rather than removed
     from cart.php so the desktop table keeps them. */
  body.woocommerce-cart .bp-cart-cell__label {
    display: none !important;
  }

  /* Bigger product photo — 88px was too small once the text tightened. */
  body.woocommerce-cart .bp-cart-row__media,
  body.woocommerce-cart .bp-cart-row__media img {
    width: 128px !important;
    height: 128px !important;
    max-width: 128px !important;
    object-fit: contain !important;
  }

  /* The offer banner sat edge to edge; inset it so it reads as a card. */
  body.woocommerce-cart .bp-bogo-notice {
    margin-left: 12px !important;
    margin-right: 12px !important;
  }
}

/* ── Cart layout, phones ── */
@media (max-width: 767px) {
  /* 128px photo column, then the info block, then the bin. The 1.5rem column gap
     is the space between the image and its details. */
  body.woocommerce-cart .bp-cart-row {
    grid-template-columns: 128px minmax(0, 1fr) 32px !important;
    column-gap: 1.5rem !important;
    row-gap: 0 !important;
    align-items: start !important;
  }
  body.woocommerce-cart .bp-cart-row__media {
    grid-row: span 4 !important;
    align-self: center !important;
  }

  /* Serial number: bolder and darker than the three lines under it. */
  body.woocommerce-cart .bp-cart-cell--name .bp-cart-cell__value,
  body.woocommerce-cart .bp-cart-cell--name .bp-cart-cell__value a {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1d1d1d !important;
  }

  /* ---- Totals: everything centred ---- */
  body.woocommerce-cart .cart_totals,
  body.woocommerce-cart .cart_totals table,
  body.woocommerce-cart .cart_totals table th,
  body.woocommerce-cart .cart_totals table td,
  body.woocommerce-cart .cart_totals h2,
  body.woocommerce-cart .wc-proceed-to-checkout {
    text-align: center !important;
  }
  body.woocommerce-cart .cart_totals table,
  body.woocommerce-cart .cart_totals table tbody,
  body.woocommerce-cart .cart_totals table tr {
    display: block !important;
    width: 100% !important;
  }
  /* Label and figure on one centred line instead of two table columns. */
  body.woocommerce-cart .cart_totals table th,
  body.woocommerce-cart .cart_totals table td {
    display: inline !important;
    width: auto !important;
    border: 0 !important;
  }
  body.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
    display: inline-block !important;
    width: auto !important;
    margin-inline: auto !important;
  }
}

/* ── Cart list + item rows, phones ── */
@media (max-width: 767px) {
  body.woocommerce-cart .bp-cart-list {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* Equal gap between the four info lines. */
  body.woocommerce-cart .bp-cart-row {
    row-gap: 6px !important;
  }
  body.woocommerce-cart .bp-cart-cell {
    gap: 0 !important;
    margin: 0 !important;
  }

  /* One size for all four lines; only the weight distinguishes them. */
  body.woocommerce-cart .bp-cart-cell__value,
  body.woocommerce-cart .bp-cart-cell__value a {
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.25 !important;
  }
  /* Serial number leads. */
  body.woocommerce-cart .bp-cart-cell--name .bp-cart-cell__value,
  body.woocommerce-cart .bp-cart-cell--name .bp-cart-cell__value a {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1d1d1d !important;
  }
  /* Price sits between the two. */
  body.woocommerce-cart .bp-cart-cell--price .bp-cart-cell__value {
    font-size: 16px !important;
    font-weight: 600 !important;
  }
}

/* ── Cart totals, phones: one label per row, everything centred ── */
@media (max-width: 767px) {
  /* WooCommerce's responsive-table CSS prints `attr(data-title) ": "` as a
     ::before on every cell, which duplicated the row header — "Nëntotali:
     Nëntotali €82.00", "Dërgim: Dërgim". The <th> already says it, so the
     pseudo-element goes and one label remains. */
  body.woocommerce-cart .cart_totals table tr td::before,
  body.woocommerce-cart
    .cart-collaterals
    table.shop_table_responsive
    tr
    td::before {
    content: none !important;
    display: none !important;
  }

  /* Label and figure on one centred line. */
  body.woocommerce-cart .cart_totals table tr {
    display: block !important;
    text-align: center !important;
  }
  body.woocommerce-cart .cart_totals table th,
  body.woocommerce-cart .cart_totals table td {
    display: inline !important;
    float: none !important;
    width: auto !important;
    padding: 0 !important;
    text-align: center !important;
  }

  /* The shipping methods list stretched the full row. inline-block shrinks it to
     its text, and the centred parent then centres it; the rows inside stay
     left-aligned so the radios line up under each other. */
  body.woocommerce-cart .cart_totals ul#shipping_method {
    display: inline-block !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0.35rem auto !important;
    padding: 0 !important;
    text-align: left !important;
  }
  body.woocommerce-cart .cart_totals ul#shipping_method li {
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    text-align: left !important;
  }
  body.woocommerce-cart .cart_totals .woocommerce-shipping-destination,
  body.woocommerce-cart .cart_totals .woocommerce-shipping-calculator {
    text-align: center !important;
  }
}

/* ── Equal gaps between all four info lines, phones ──
 * The remove button occupied grid row 1 next to the name. Being taller than a
 * line of 16px text it stretched that row, so the gap under the serial number
 * read wider than the ones between colour, brand and price. Positioning it
 * absolutely takes it out of the row-height calculation, leaving all four lines
 * spaced by row-gap alone. */
@media (max-width: 767px) {
  body.woocommerce-cart .bp-cart-row {
    position: relative !important;
  }

  body.woocommerce-cart .bp-cart-row__remove {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
  }

  /* The bin no longer needs a grid track of its own. */
  body.woocommerce-cart .bp-cart-row {
    grid-template-columns: 128px minmax(0, 1fr) !important;
    padding-right: 32px !important;
  }
  body.woocommerce-cart .bp-cart-cell {
    grid-column: 2 !important;
  }
}

/* ── Totals centred on phones (final say) ──
 * The ≤767px block earlier in this file sets `text-align: left !important` on
 * `tr.order-total th/td` with a selector at least as specific as the centring
 * rule added later, so the total kept aligning to the edge. Restated here with
 * the same selectors, at the end of the file, so source order settles it. */
@media (max-width: 767px) {
  body.woocommerce-cart .cart_totals,
  body.woocommerce-cart .cart_totals table,
  body.woocommerce-cart .cart_totals table tbody,
  body.woocommerce-cart .cart_totals table tr,
  body.woocommerce-cart .cart_totals table tr.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.order-total,
  body.woocommerce-cart .cart_totals table tr.order-total th,
  body.woocommerce-cart .cart_totals table tr.order-total td,
  body.woocommerce-cart .cart_totals table tr.cart-subtotal th,
  body.woocommerce-cart .cart_totals table tr.cart-subtotal td,
  body.woocommerce-cart .cart_totals table tr.fee th,
  body.woocommerce-cart .cart_totals table tr.fee td,
  body.woocommerce-cart .cart_totals table tr.shipping th,
  body.woocommerce-cart .cart_totals table tr.shipping td,
  body.woocommerce-cart .cart_totals table tr.order-total td::after,
  body.woocommerce-cart .cart_totals .woocommerce-shipping-destination {
    text-align: center !important;
  }
}

/* ── Cart form up, totals in reading order (phones) ── */
@media (max-width: 767px) {
  /* Pull the item list up under the offer banner. */
  body.woocommerce-cart .woocommerce-cart-form {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  body.woocommerce-cart .woocommerce-notices-wrapper {
    margin-bottom: 0 !important;
  }

  /* Rows whose label and figure belong on ONE line. */
  body.woocommerce-cart .cart_totals table tr.cart-subtotal th,
  body.woocommerce-cart .cart_totals table tr.cart-subtotal td,
  body.woocommerce-cart .cart_totals table tr.fee th,
  body.woocommerce-cart .cart_totals table tr.fee td,
  body.woocommerce-cart .cart_totals table tr.order-total th,
  body.woocommerce-cart .cart_totals table tr.order-total td {
    display: inline !important;
  }

  /*
   * The shipping row is the exception: its cell holds a list and the destination
   * paragraph, both block-level. With th and td set to `inline` the list broke
   * out and rendered ABOVE its own "Dërgim" heading. Stacking them restores the
   * intended order — Dërgim, then the methods, then "Dërguar tek …".
   */
  body.woocommerce-cart .cart_totals table tr.shipping th,
  body.woocommerce-cart .cart_totals table tr.woocommerce-shipping-totals th,
  body.woocommerce-cart .cart_totals table tr.shipping td,
  body.woocommerce-cart .cart_totals table tr.woocommerce-shipping-totals td {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }
  body.woocommerce-cart .cart_totals .woocommerce-shipping-destination {
    display: block !important;
    margin: 0.35rem 0 0 !important;
  }

  /* The blank line the layout asks for between the address and the offer. */
  body.woocommerce-cart .cart_totals table tr.fee {
    margin-top: 1rem !important;
  }
  body.woocommerce-cart .cart_totals table tr.order-total {
    margin-top: 0.35rem !important;
  }
}

/* ── Drop the tax note, centre the checkout button (phones) ──
 * The note is a ::after on the order-total cell, injected by the ≤767px block
 * earlier in this file, so it goes by removing that pseudo-element's content. */
@media (max-width: 767px) {
  body.woocommerce-cart .cart_totals table tr.order-total td::after {
    content: none !important;
    display: none !important;
    margin: 0 !important;
  }

  body.woocommerce-cart .wc-proceed-to-checkout {
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
    padding-top: 0.75rem !important;
  }
  body.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
    display: inline-block !important;
    float: none !important;
    width: auto !important;
    margin: 0 auto !important;
  }
}

/* ── Tighter cart items, less air under the offer banner (phones) ── */
@media (max-width: 767px) {
  /* Banner to first product. */
  body.woocommerce-cart .bp-bogo-notice {
    margin-bottom: 0.5rem !important;
  }
  body.woocommerce-cart .bp-cart-list > .bp-cart-row:first-child {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* The four info lines closer together, and less padding inside each row. */
  body.woocommerce-cart .bp-cart-row {
    row-gap: 2px !important;
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
  }
  body.woocommerce-cart .bp-cart-cell__value,
  body.woocommerce-cart .bp-cart-cell__value a {
    line-height: 1.15 !important;
  }
}

/* ── Info lines stacked with no gap at all (phones) ──
 * row-gap 0 and the leading doing the spacing, so the four lines read as one
 * block the way the reference does. */
@media (max-width: 767px) {
  body.woocommerce-cart .bp-cart-row {
    row-gap: 0 !important;
  }
  body.woocommerce-cart .bp-cart-cell {
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.woocommerce-cart .bp-cart-cell__value,
  body.woocommerce-cart .bp-cart-cell__value a {
    line-height: 1.3 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* ── Totals heading + line spacing (phones) ──
 * The 20px set earlier lost to a more specific rule, so the heading stayed at
 * 22.4px; restated here with the wrapper in the selector. */
@media (max-width: 767px) {
  body.woocommerce-cart .cart-collaterals .cart_totals h2,
  body.woocommerce-cart .cart_totals h2 {
    font-size: 22.4px !important;
    line-height: 1.25 !important;
    margin: 0 0 0.5rem !important;
  }

  /* Rows closer together: the leading carries the spacing, not cell padding. */
  body.woocommerce-cart .cart_totals table,
  body.woocommerce-cart .cart_totals table tbody {
    margin: 0 !important;
  }

  body.woocommerce-cart .cart_totals table tr {
    margin: 0 !important;
    line-height: 1.3 !important;
  }
  body.woocommerce-cart .cart_totals table th,
  body.woocommerce-cart .cart_totals table td {
    padding: 1px 0 !important;
    line-height: 1.3 !important;
  }
  body.woocommerce-cart .cart_totals ul#shipping_method {
    margin: 1px auto !important;
  }
  body.woocommerce-cart .cart_totals ul#shipping_method li {
    line-height: 1.35 !important;
  }
  body.woocommerce-cart .cart_totals .woocommerce-shipping-destination {
    margin: 1px 0 0 !important;
  }

  /* The deliberate break before the offer line stays, just smaller. */
  body.woocommerce-cart .cart_totals table tr.fee {
    margin-top: 0.6rem !important;
  }
  body.woocommerce-cart .cart_totals table tr.order-total {
    margin-top: 0 !important;
  }
}

/* ── Checkout order review + city select (phones) ── */
@media (max-width: 767px) {
  /* Image left, details middle, Nëntotali right — restated because the row was
     collapsing and dropping the thumbnail below its own text. */
  body.woocommerce-checkout .bp-review__row {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 0.75rem !important;
    padding: 0.6rem 0 !important;
  }
  body.woocommerce-checkout .bp-review__media {
    grid-column: 1 !important;
  }
  body.woocommerce-checkout .bp-review__media img {
    width: 72px !important;
    height: 72px !important;
  }
  body.woocommerce-checkout .bp-review__name {
    grid-column: 2 !important;
    gap: 2px !important;
  }
  body.woocommerce-checkout .bp-review__total {
    grid-column: 3 !important;
    text-align: right !important;
  }

  /* The city dropdown's highlighted row was solid black, which read as a
     different component from every other field. Light fill, dark text. */
  .select2-container--default
    .select2-results__option--highlighted[aria-selected],
  .select2-container--default
    .select2-results__option--highlighted[data-selected] {
    background-color: #f3f4f6 !important;
    color: #131315 !important;
  }
  .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: #ececec !important;
    color: #131315 !important;
  }
}

/* ── "Produkti" header aligned with the product title (phones) ──
 * The header row had no thumbnail column, so its first label started at the
 * container edge while every title below it started 72px + gap in. Giving the
 * header the SAME track sizes as .bp-review__row and skipping the first column
 * lines the two up exactly, rather than guessing at an indent. */
@media (max-width: 767px) {
  body.woocommerce-checkout .bp-review__head {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) auto !important;
    gap: 0.75rem !important;
    align-items: end !important;
  }
  body.woocommerce-checkout .bp-review__head-col {
    grid-column: 2 !important;
  }
  body.woocommerce-checkout .bp-review__head-col--total {
    grid-column: 3 !important;
    text-align: right !important;
  }
}

/* ── Breathing room between the account block and "Informacion shtesë" ──
 * The heading sat directly under the email field with no separation, so the two
 * sections read as one. */
@media (max-width: 767px) {
  body.woocommerce-checkout .woocommerce-account-fields {
    margin-top: 0.75rem !important;
    margin-bottom: 0 !important;
  }
  body.woocommerce-checkout .woocommerce-account-fields .create-account,
  body.woocommerce-checkout .woocommerce-account-fields > p.form-row {
    margin-bottom: 0 !important;
  }

  body.woocommerce-checkout .woocommerce-additional-fields > h3,
  body.woocommerce-checkout .woocommerce-additional-fields h3,
  body.woocommerce-checkout h3#order_review_heading {
    margin-top: 2rem !important;
  }
}

/* ── Native select styling for Komuna / Shteti ──
 * With selectWoo removed the raw <select> shows, so it needs the same box as
 * every other checkout field plus a chevron of its own (appearance:none strips
 * the platform arrow). */
body.woocommerce-checkout select.state_select,
body.woocommerce-checkout select.country_select {
  width: 100%;
  min-height: 48px;
  padding: 0 40px 0 12px;
  border: 1px solid #e5e7eb;
  border-radius: 2px;
  background-color: #fff;
  font-family: var(--oxa-font-sans, Montserrat, sans-serif);
  font-size: 16px; /* ≥16px stops iOS zooming on focus */
  color: #43454b;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2343454b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
}
body.woocommerce-checkout select.state_select:focus,
body.woocommerce-checkout select.country_select:focus {
  border-color: #43454b;
  outline: none;
}
/* Any container selectWoo managed to leave behind. */
body.woocommerce-checkout .select2-container {
  display: none !important;
}

/* ══════════════════════════════════════════════════════
 * Cart rows: room for the model number.
 *
 * The row was 752px wide and handed 200px of it to the picture, which left the
 * name column about 122px — narrower than "1344.117.18462.52551" sets at 18px,
 * so the code ran out of its cell and under the "Ngjyra" caption beside it. The
 * picture comes down to 160px and `align-items: start` puts every caption on
 * the same top line instead of centring each cell against the picture.
 *
 * The colour track is 130px: one-word names like "CHOCOLATE" or
 * "PORTOKALLT" are up to 120px at 18px and cannot wrap, so at 100px they ran
 * into the "Brendi" cell. The name column gives that up (minimum 240px).
 *
 * Without a colour anywhere in the cart, cart.php leaves the cell out entirely
 * and the row is five tracks, not six.
 * ══════════════════════════════════════════════════════ */
@media (min-width: 901px) {
  body.woocommerce-cart .bp-cart-list {
    max-width: 880px !important;
  }
  body.woocommerce-cart .bp-cart-row {
    grid-template-columns: 160px minmax(240px, 1fr) 130px 104px 100px 40px !important;
    column-gap: 0.75rem !important;
    align-items: start !important;
  }
  body.woocommerce-cart .bp-cart-list--nocolour .bp-cart-row {
    grid-template-columns: 160px minmax(300px, 1fr) 110px 110px 40px !important;
  }
  body.woocommerce-cart .bp-cart-row__media,
  body.woocommerce-cart .bp-cart-row__media img {
    width: 160px !important;
    height: 160px !important;
    max-width: 160px !important;
  }
}

/* The code is one unbroken token; on a phone the column is narrower than it is,
 * so it breaks inside the number rather than over the cell next to it. */
body.woocommerce-cart .bp-cart-cell--name .bp-cart-cell__value,
body.woocommerce-cart .bp-cart-cell--name .bp-cart-cell__value a {
  overflow-wrap: anywhere;
}

/* Coupon code box under the cart lines (Gentli AL). */
body.woocommerce-cart .bp-cart-coupon {
  display: flex;
  gap: 10px;
  margin: 16px 0 8px;
  max-width: 480px;
}
body.woocommerce-cart .bp-cart-coupon .input-text {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  padding: 0 12px;
  border: 1px solid #d1d5db;
  border-radius: 0;
  font-size: 0.95rem;
}
body.woocommerce-cart .bp-cart-coupon .button {
  flex: 0 0 auto;
  height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 0;
  background: #000;
  color: #fff;
  font-size: 0.9rem;
  text-transform: uppercase;
  cursor: pointer;
}
body.woocommerce-cart .bp-cart-coupon .button:hover {
  background: var(--bp-brand-hover, #3d3d3d);
}
@media (max-width: 767px) {
  body.woocommerce-cart .bp-cart-coupon {
    margin: 16px 15px 8px;
  }
}
/* bp-overrides.css (Gentli KS) hides the coupon field and the discount line in
 * the cart totals with !important. Gentli AL takes codes in the cart, as eflow
 * did, so both come back here — more specific selectors, so these win. */
body.woocommerce-cart .bp-cart-coupon #coupon_code {
  display: block !important;
}
body.woocommerce-cart .cart_totals table tr.cart-discount {
  display: block !important; /* the other totals rows are blocks, right-aligned */
}
body.woocommerce-cart .cart_totals table tr.cart-discount > th,
body.woocommerce-cart .cart_totals table tr.cart-discount > td {
  display: inline !important;
}