/* Glo Little Luxury — Cart & Checkout, v3.
 *
 * A restyle of WooCommerce's own markup. No form structure, validation, totals
 * or payment logic is touched — these are revenue-critical pages and
 * WooCommerce's tested behaviour stays exactly as it is.
 *
 * Two different systems render these pages, which is why the file is in two
 * halves:
 *   /cart/     — WooCommerce Blocks (.wc-block-*)
 *   /checkout/ — ShopBuilder + Elementor (.rtsb-*, .elementor-*), which replaces
 *                page.php and the_content entirely. Its two-column layout is
 *                already built into the Elementor template, so nothing here
 *                re-does the layout; it only supplies the palette and controls.
 * Shared chrome (header band, steps, meter, trust row) is in glo-commerce.css.
 */

.glo-cartwrap { padding-top: 28px; padding-bottom: 8px; }

/* =========================================================================
   CART — WooCommerce Blocks
   ========================================================================= */

.wc-block-cart { max-width: 100%; overflow-x: clip; }
.wc-block-cart-items,
.wp-block-woocommerce-cart-line-items-block { max-width: 100%; }

/* Line items read as one panel rather than a bare table. */
.wc-block-cart__main .wc-block-cart-items {
  background: var(--glo-surface);
  border: 1px solid var(--glo-border);
  border-radius: var(--glo-radius-md);
  border-collapse: separate;
}
.wc-block-cart-items thead th {
  font-family: var(--glo-font-body);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--glo-stone);
  border-bottom: 1px solid var(--glo-border);
}
.wc-block-cart-items__row { border-top: 1px solid var(--glo-border); }
.wc-block-cart-items__row:first-of-type { border-top: none; }
.wc-block-cart-item__image img {
  border-radius: var(--glo-radius-sm);
  background: var(--glo-cream);
}
.wc-block-components-product-name {
  font-family: var(--glo-font-display);
  font-weight: 600;
  color: var(--glo-ink) !important;
  text-decoration: none;
}
.wc-block-components-product-name:hover { color: var(--glo-teal-ink) !important; }
.wc-block-components-product-price__value { color: var(--glo-ink); font-weight: 700; }
.wc-block-cart-item__total .wc-block-components-product-price__value { color: var(--glo-coral); }
.wc-block-components-product-price del { color: var(--glo-stone); font-weight: 400; }
.wc-block-components-sale-badge {
  background: var(--glo-rouge-50);
  color: var(--glo-coral);
  border: none;
  border-radius: var(--glo-radius-xs);
  font-weight: 600;
}

/* Quantity stepper: pill, 44px touch targets. */
.wc-block-components-quantity-selector {
  border: 1px solid var(--glo-border) !important;
  border-radius: var(--glo-radius-pill) !important;
  background: var(--glo-bg);
  overflow: hidden;
}
.wc-block-components-quantity-selector::after { display: none !important; }
.wc-block-components-quantity-selector__button {
  min-width: 40px;
  min-height: 44px;
  color: var(--glo-ink-mid) !important;
  font-size: 18px;
}
.wc-block-components-quantity-selector__button:hover:not(:disabled) { color: var(--glo-teal-ink) !important; }
.wc-block-components-quantity-selector__input {
  font-family: var(--glo-font-body);
  font-weight: 700;
  color: var(--glo-ink);
  min-height: 44px;
}
.wc-block-cart-item__remove-link {
  color: var(--glo-stone) !important;
  text-underline-offset: 3px;
}
.wc-block-cart-item__remove-link:hover { color: var(--glo-coral) !important; }

/* Totals panel. */
.wc-block-cart__sidebar .wc-block-components-sidebar,
.wp-block-woocommerce-cart-order-summary-block {
  background: var(--glo-cream);
  border: 1px solid var(--glo-border);
  border-radius: var(--glo-radius-md);
}
.wc-block-components-totals-item__label { color: var(--glo-ink-mid); }
.wc-block-components-totals-item__value { font-weight: 600; color: var(--glo-ink); }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: var(--glo-font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--glo-ink);
}
.wc-block-components-panel__button { color: var(--glo-ink) !important; font-weight: 600; }

/* Primary CTA. Blocks ships an explicit height:45px on
   .wc-block-components-button, which beats a bare min-height — release the
   fixed height first, then set the floor. */
.wc-block-cart__submit-button,
.wc-block-cart__submit-container a.wc-block-components-button,
.wp-block-woocommerce-proceed-to-checkout a.wc-block-components-button {
  background-color: var(--glo-cta) !important;
  background-image: none !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--glo-radius-sm) !important;
  height: auto !important;
  min-height: 48px !important;
  font-family: var(--glo-font-body) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  box-shadow: none !important;
}
.wc-block-cart__submit-button:hover { opacity: .92; }

/* Empty-cart state. */
.wp-block-woocommerce-empty-cart-block { padding-top: 8px; }

/* The Blocks cart line row is a four-track grid — image | product | spacer |
   line total — and it keeps that shape even in the block's own `is-mobile`
   state. The element is display:table, and a table is never laid out narrower
   than its min-content width whatever max-width says, so at 375px the row
   measured 413px and the line total was clipped mid-figure: "৳ 999.00" rendered
   as "৳ 999".
   Trimming padding only moves the number at which it breaks. Below 480px the
   row becomes two tracks instead, with the line total moved under the product
   rather than beside it. Nothing is hidden — the line total and the unit price
   say different things once quantity goes above one. */
@media (max-width: 480px) {
  .wc-block-cart-items__row {
    grid-template-columns: 72px minmax(0, 1fr) !important;
    gap: 4px 12px !important;
    padding: 16px 14px !important;
  }
  /* Blocks places these cells itself (the product cell carries an explicit
     `grid-column: 2 / 4`), and its rules outrank a plain declaration here — the
     line total stayed in row 1 and printed on top of the product name. The
     placements have to be forced. */
  .wc-block-cart-item__image {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    padding-right: 0 !important;
  }
  .wc-block-cart-item__image img { width: 72px; }
  .wc-block-cart-item__product {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  /* Kept right-aligned: a line total belongs on the right of its line, the same
     place it sits on desktop. */
  .wc-block-cart-item__total {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-items: flex-end;
    margin-top: 2px;
  }
  /* The header row labels three columns that no longer exist. */
  .wc-block-cart-items thead { display: none; }
}

/* =========================================================================
   CHECKOUT — ShopBuilder / Elementor
   ========================================================================= */

/* The Elementor template already opens with `.e-con-inner { padding-top: 60px }`.
   Adding the usual page padding on top of it left 90px of dead space between the
   header band and the first field. The builder's own spacing is left alone and
   this wrapper contributes none. */
.woocommerce-checkout #rtsb-builder-content { padding-top: 0; padding-bottom: 8px; }

/* Field groups as panels. */
.woocommerce-billing-fields,
.woocommerce-shipping-fields,
.woocommerce-additional-fields {
  background: var(--glo-surface);
  border: 1px solid var(--glo-border);
  border-radius: var(--glo-radius-md);
  padding: 24px;
}
.woocommerce-checkout h3,
.woocommerce-billing-fields > h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3 {
  font-family: var(--glo-font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--glo-ink);
  margin: 0 0 16px;
}

.woocommerce-checkout .form-row { margin-bottom: 14px; }

/* The Elementor template gives the form a 955px column, and WooCommerce marks
   city, phone and email form-row-wide — so each rendered as one 869px-wide
   input. A text field that long gives the eye no anchor and reads as an error
   state waiting to happen. Pairing the short fields keeps every input to a
   sensible measure without touching the markup or the field order. */
@media (min-width: 900px) {
  .woocommerce-billing-fields__field-wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
  }
  .woocommerce-billing-fields__field-wrapper > .form-row {
    float: none;
    /* WooCommerce sets form-row-first/last to 47% — inside a grid track that
       made the paired fields 201px next to a 427px one. The track is the
       measure now. */
    width: auto !important;
    grid-column: 1 / -1;
  }
  /* Pairs: phone | email (contact, first), first | last name. City now
     stands alone, so it spans the row. */
  .woocommerce-billing-fields__field-wrapper > .form-row-first,
  .woocommerce-billing-fields__field-wrapper > .form-row-last {
    grid-column: span 1;
  }
}
.woocommerce-checkout .form-row label {
  font-family: var(--glo-font-body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--glo-ink-mid);
  margin-bottom: 5px;
  display: block;
}
.woocommerce-checkout .form-row .required { color: var(--glo-coral); text-decoration: none; }
.woocommerce-checkout .form-row .optional { color: var(--glo-stone); font-weight: 400; }

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .select2-container .select2-selection--single {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--glo-border);
  border-radius: var(--glo-radius-sm);
  padding: 12px 14px;
  font-family: var(--glo-font-body);
  /* 16px, not 14 — iOS Safari zooms the page on focus for any field under 16px,
     which throws the checkout layout sideways mid-entry. */
  font-size: 16px;
  color: var(--glo-ink);
  background: var(--glo-bg);
  box-shadow: none;
}
.woocommerce-checkout .form-row textarea { min-height: 96px; padding-top: 12px; }
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus {
  outline: none;
  background: var(--glo-surface);
  border-color: var(--glo-teal-bright);
  box-shadow: 0 0 0 3px var(--glo-teal-50);
}
.woocommerce-checkout .form-row.woocommerce-invalid input.input-text,
.woocommerce-checkout .form-row.woocommerce-invalid select {
  border-color: var(--glo-coral);
  background: var(--glo-rouge-50);
}
.woocommerce-checkout .form-row ::placeholder { color: var(--glo-stone); opacity: 1; }
.woocommerce-checkout .form-row .description {
  display: block;
  margin-top: 6px;
  font-family: var(--glo-font-body);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--glo-stone);
}

.woocommerce-checkout .select2-container--default .select2-selection--single {
  height: auto !important;
  display: flex;
  align-items: center;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 1.4;
  padding: 0;
  color: var(--glo-ink);
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; }

/* Checkboxes — ship to a different address, create an account, terms. */
.woocommerce-checkout input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--glo-teal-bright);
  margin-right: 8px;
  vertical-align: -3px;
}
.woocommerce-shipping-fields__field-wrapper { margin-top: 14px; }

/* Order summary panel. The Elementor template already gives it the right
   column and sticky behaviour; this only repaints it. */
.ele-gray-bg {
  background: var(--glo-cream) !important;
  border: 1px solid var(--glo-border);
}
.ele-border-radius-10 { border-radius: var(--glo-radius-md) !important; }

table.woocommerce-checkout-review-order-table,
.woocommerce-checkout table.shop_table { border: none; width: 100%; background: transparent; }
table.woocommerce-checkout-review-order-table th,
table.woocommerce-checkout-review-order-table td {
  border: none;
  border-top: 1px solid var(--glo-border);
  padding: 12px 0;
  font-family: var(--glo-font-body);
  font-size: 14px;
  color: var(--glo-ink-mid);
}
table.woocommerce-checkout-review-order-table thead th {
  border-top: none;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--glo-stone);
}
table.woocommerce-checkout-review-order-table .product-name { color: var(--glo-ink); }
table.woocommerce-checkout-review-order-table .product-total,
table.woocommerce-checkout-review-order-table .order-total .amount { color: var(--glo-ink); font-weight: 600; }
table.woocommerce-checkout-review-order-table .order-total th,
table.woocommerce-checkout-review-order-table .order-total td { border-top: 1px solid var(--glo-ink); }
table.woocommerce-checkout-review-order-table .order-total .amount {
  font-family: var(--glo-font-display);
  font-size: 20px;
  font-weight: 700;
}

/* Payment. WooCommerce's default lavender payment box is the last piece of
   non-palette colour on the page. */
.woocommerce-checkout-payment,
#payment { background: transparent !important; border-radius: 0; }
#payment ul.payment_methods {
  list-style: none;
  margin: 0 0 16px;
  padding: 16px 0 0;
  border-top: 1px solid var(--glo-border);
  border-bottom: none;
}
#payment ul.payment_methods li {
  padding: 12px 14px;
  margin-bottom: 8px;
  border: 1px solid var(--glo-border);
  border-radius: var(--glo-radius-sm);
  background: var(--glo-surface);
  font-family: var(--glo-font-body);
  font-size: 14px;
}
#payment ul.payment_methods li input[type="radio"] { accent-color: var(--glo-teal-bright); width: 17px; height: 17px; }
#payment ul.payment_methods li label { font-weight: 600; color: var(--glo-ink); margin-left: 6px; }
#payment div.payment_box {
  background: var(--glo-teal-50) !important;
  color: var(--glo-ink-mid);
  border-radius: var(--glo-radius-sm);
  padding: 12px 14px;
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.5;
}
/* The default arrow is drawn in the lavender this rule just replaced. */
#payment div.payment_box::before { display: none !important; }

.woocommerce-terms-and-conditions-wrapper {
  font-family: var(--glo-font-body);
  font-size: 13px;
  line-height: 1.55;
  color: var(--glo-ink-soft);
  margin: 4px 0 16px;
}
.woocommerce-privacy-policy-text { color: var(--glo-stone); }
.woocommerce-terms-and-conditions-wrapper a,
.woocommerce-privacy-policy-text a { color: var(--glo-teal-ink); }

/* Buttons. Place order is the same Teal 600 as Add to cart and Proceed to
   Checkout — one primary action colour across the whole funnel. */
#place_order,
.woocommerce-checkout button[type="submit"],
.woocommerce-checkout .button,
.woocommerce-cart .button {
  background: var(--glo-cta) !important;
  background-image: none !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--glo-radius-sm) !important;
  min-height: 48px;
  padding: 13px 26px !important;
  font-family: var(--glo-font-body) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  cursor: pointer;
}
#place_order { width: 100%; font-size: 16px !important; padding: 15px 26px !important; }
#place_order:hover,
.woocommerce-checkout .button:hover { opacity: .92; }
.woocommerce-checkout .button[name="apply_coupon"] { background: var(--glo-ink) !important; }

/* Keyboard focus must stay visible on every control. */
.woocommerce-checkout a:focus-visible,
.woocommerce-checkout button:focus-visible,
.woocommerce-checkout input:focus-visible,
.woocommerce-cart a:focus-visible,
.woocommerce-cart button:focus-visible {
  outline: 2px solid var(--glo-teal-bright);
  outline-offset: 2px;
}

/* Notices. */
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-info,
.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-info,
.woocommerce-checkout .rtsb-notice {
  background: var(--glo-teal-50);
  border: 1px solid var(--glo-teal-100);
  border-radius: var(--glo-radius-sm);
  color: var(--glo-ink-mid);
  font-family: var(--glo-font-body);
  font-size: 14px;
  overflow-wrap: anywhere;
}
.woocommerce-checkout .woocommerce-error,
.woocommerce-cart .woocommerce-error {
  background: var(--glo-rouge-50);
  border: 1px solid var(--glo-coral);
  border-radius: var(--glo-radius-sm);
  color: var(--glo-ink);
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  .glo-cartwrap { padding-top: 18px; }
  /* 60px of builder padding is a lot of empty screen on a phone. */
  .woocommerce-checkout .checkout .e-con-inner { padding-top: 24px !important; }
  .woocommerce-billing-fields,
  .woocommerce-shipping-fields,
  .woocommerce-additional-fields { padding: 18px 16px; }
}