/*
 * Nesa Underwear — Global 1280px + flow styles.
 * Cart and checkout layout is handled exclusively in bp-overrides.css
 */

/* ==========================================================
 * 0. GLOBAL 1280px — WooCommerce only
 * ========================================================== */

/*
 * .oxa-page is deliberately NOT in this list.
 *
 * It used to be, which pinned every component-composed page to a centred
 * 1280px column with 1.5rem of padding — 1232px of usable width. The Nesa
 * sections are built full-bleed: .nesa-rail and .nesa-cats both size
 * themselves from `100%` and pay their own `padding-inline: var(--nesa-gutter)`
 * so the first card lines up with the logo. Inside a 1232px box that never
 * happened, and the homepage rail sat in the middle of a wide screen with
 * empty space either side.
 *
 * Removed rather than overridden — an override on .oxa-page would have left
 * the max-width resolving underneath and the section still boxed in.
 *
 * Prose keeps its measure below, on the text itself rather than the wrapper,
 * so a full-bleed page and a readable article can coexist.
 */
/*
 * The 1280px column is for the transactional pages — cart, checkout, account,
 * single product. Product ARCHIVES are excluded: the shop grid is a display
 * surface and runs full-bleed on --nesa-gutter, the same width as the homepage.
 * Without the :not() pairs, `body.woocommerce` caught the archives too and the
 * shop sat in a narrow centred column while the homepage went edge to edge.
 */
#primary.content-area,
body.woocommerce:not(.post-type-archive-product):not(.tax-product_cat) #primary,
body.woocommerce-page:not(.post-type-archive-product):not(.tax-product_cat) #primary,
body.woocommerce:not(.post-type-archive-product):not(.tax-product_cat) .site-main,
body.woocommerce-page:not(.post-type-archive-product):not(.tax-product_cat) .site-main {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

body.post-type-archive-product .site-main,
body.tax-product_cat .site-main,
body.post-type-archive-product #primary,
body.tax-product_cat #primary {
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--nesa-gutter);
}

/*
 * Reading measure for plain content.
 *
 * Applies to text placed directly in a page, not to the full-bleed <section>s
 * a component renders.
 *
 * No max-width: the text runs gutter to gutter like the header, the footer and
 * the product grid. It was capped at 768px, then 1120px; both read as a column
 * floating inside a full-bleed site.
 *
 * Left edge on the logo vertical — margin-inline: 0 with the
 * gutter + --nesa-logo-inset padding, the same pair used in bp-footer.css.
 *
 * The trade-off is line length: on a wide monitor a paragraph runs well past
 * the ~75 characters that reads comfortably. That is the deliberate choice here,
 * and the reason the body size dropped to 15px with a 1.75 line-height — tall
 * leading is what keeps a long line trackable from one row to the next.
 */
.oxa-page > p,
.oxa-page > h1,
.oxa-page > h2,
.oxa-page > h3,
.oxa-page > h4,
.oxa-page > ul,
.oxa-page > ol,
.oxa-page > blockquote,
.oxa-page > table,
.oxa-page > figure {
  margin-inline: 0;
  padding-inline: calc(var(--nesa-gutter) + var(--nesa-logo-inset)) var(--nesa-gutter);
}

/* Tables in the size guide use the full measure and scroll rather than squash
 * the page on a narrow screen. */
.oxa-page > table {
  width: 100%;
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
}
.oxa-page > table th,
.oxa-page > table td {
  border-bottom: 1px solid var(--nesa-line);
  padding: 0.625rem 1rem 0.625rem 0;
  text-align: left;
  font-size: 0.9375rem;
}
.oxa-page > table th { font-weight: 600; }

/*
 * Type scale for editorial pages.
 *
 * main.css gives h2 the same --oxa-fs-3xl as h1 — clamp(2rem, 3.5vw, 3rem) —
 * so every section heading on these pages was rendering at up to 48px serif,
 * as large as the page title. That, and the absence of a title, is what read as
 * wrong rather than the width.
 *
 * Direct children only, so the cart, checkout and account pages — which are
 * also .oxa-page, with their content nested inside .woocommerce — are untouched.
 */
.oxa-page > .oxa-page__title {
  font-size: clamp(1.875rem, 3vw, 2.375rem);
  line-height: 1.15;
  margin-block: 0 1.75rem;
}
.oxa-page > h2 {
  font-size: 1.375rem;
  line-height: 1.3;
  margin-block: 2.5rem 0.625rem;
}

/*
 * The opening paragraph reads as a lead, which is what gives Rreth nesh its
 * shape — title, a sentence that sets up the page, then the sections. Every
 * editorial page now opens the same way.
 */
.oxa-page > .oxa-page__title + p {
  font-size: 1.0625rem;
  line-height: 1.7;
  margin-bottom: 1.75rem;
}

/* And if a page ever opens straight on a heading, it should not inherit the
 * 2.5rem gap meant for separating one section from the previous one. */
.oxa-page > .oxa-page__title + h2 { margin-top: 0; }
.oxa-page > h3 {
  font-family: var(--nesa-font-sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  margin-block: 1.5rem 0.5rem;
}
.oxa-page > p,
.oxa-page > ul,
.oxa-page > ol {
  font-size: var(--oxa-fs-md);
  line-height: 1.75;
  margin-block: 0 1rem;
}

/*
 * Bullets and numbers need their own indent: the padding-inline above replaced
 * the browser's default list padding, which left the markers hanging outside
 * the text column.
 */
.oxa-page > ul,
.oxa-page > ol {
  padding-inline-start: calc(var(--nesa-gutter) + var(--nesa-logo-inset) + 1.25rem);
}
.oxa-page > ul li,
.oxa-page > ol li { margin-block: 0.375rem; }

/*
 * Breathing room above the title and below the last paragraph — editorial
 * pages only. The front page is a Page too, but it opens on a full-bleed hero
 * with no title any more, and the clamp resolved to ~45px of dead space
 * between the header and the slider.
 */
body.page:not(.home) .oxa-page { padding-block: clamp(2rem, 4vw, 3.5rem) clamp(3rem, 6vw, 5rem); }
body.home .oxa-page,
body.woocommerce-cart .oxa-page,
body.woocommerce-checkout .oxa-page,
body.woocommerce-account .oxa-page { padding-block: 0; }

.woocommerce .bp-site-header + .oxa-page,
.woocommerce-page .bp-site-header + .oxa-page,
body.post-type-archive-product .oxa-page,
body.tax-product_cat .oxa-page {
  max-width: 1280px !important;
}

/*
 * The full-bleed breakout that used to live here (width:100vw + a negative
 * margin-inline) is gone: it existed only to escape the clamp above, and 100vw
 * counts the scrollbar, so it introduced a horizontal scroll of its own.
 */

/* Vertical padding
 *
 * No top padding on archives: .nesa-shophead pays it, and the two stacked to
 * ~67px of white space above the "KATEGORIA" eyebrow. Bottom padding stays —
 * it is the gap between the last row of cards and the footer.
 */
body.post-type-archive-product .site-main,
body.tax-product_cat .site-main {
  padding-block: 0 3rem;
}

/* ==========================================================
 * HOMEPAGE
 * ========================================================== */

/*
 * The hero's copy is NOT hidden on the homepage.
 *
 * Two rules used to live here:
 *   body.home .oxa-slider__content { display: none !important; }
 *   body.home .oxa-slider__slide--has-image::before { background: none !important; }
 *
 * Together they turned the hero into a bare photograph — the first killed the
 * eyebrow, headline, subtitle and both buttons, the second killed the overlay
 * wash that keeps white copy legible over a photo. That was fine while the
 * homepage hero was decoration; SCRUM-663 point 5 wants copy and a CTA on it.
 *
 * Deleted rather than overridden: `display: none !important` on the content
 * wrapper cannot be beaten from the component stylesheet without a second
 * !important, and the next person would have found two rules fighting.
 */

body.home .oxa-cta--soft .oxa-cta__title { display: none; }
body.home .oxa-cta--soft .oxa-cta__subtitle {
  max-width: 900px;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--nesa-ink);
  white-space: pre-line;
}

/* ==========================================================
 * GLOBAL — breadcrumbs, shop title
 * ========================================================== */

.woocommerce-products-header__title.page-title { display: none !important; }

.woocommerce-breadcrumb {
  font-size: 15px !important;
  color: var(--nesa-ink) !important;
  margin-bottom: 1.5rem;
  padding: 0;
}
.woocommerce-breadcrumb a { color: var(--nesa-ink) !important; }
.woocommerce-breadcrumb a:hover { color: var(--bp-green, var(--nesa-ink)) !important; }

/* ==========================================================
 * SHOP — product card center
 * ========================================================== */

ul.products li.product,
.woocommerce ul.products li.product {
  text-align: center !important;
  align-items: center !important;
}
ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  text-align: center !important;
  padding-inline: 0.75rem !important;
}
ul.products li.product .price,
.woocommerce ul.products li.product .price {
  text-align: center !important;
  padding-inline: 0.75rem !important;
}
ul.products li.product .button,
ul.products li.product a.add_to_cart_button,
.woocommerce ul.products li.product .button {
  align-self: center !important;
  margin-inline: auto !important;
}
ul.products li.product .star-rating { margin-inline: auto !important; }

/* ==========================================================
 * WC NOTICES
 * ========================================================== */

.woocommerce-message, .woocommerce-info {
  background: #f1ece8; border: 1px solid var(--nesa-line); color: var(--nesa-ink);
  padding: 1rem 1.25rem; border-radius: 10px; margin-bottom: 1.5rem;
  font-size: 0.9375rem; display: flex; align-items: center; gap: 0.75rem;
}
.woocommerce-info { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.woocommerce-error {
  background: #fef2f2; border: 1px solid #fecaca; color: #991b1b;
  padding: 1rem 1.25rem; border-radius: 10px; margin-bottom: 1.5rem; list-style: none;
  display: flex; align-items: center; gap: 0.75rem;
}

/*
 * Put the notice icon back in the flow.
 *
 * WooCommerce positions its tick absolutely — `position:absolute; top:1em;
 * left:1.5em` — and reserves room for it with `padding-left:3.5em`. The rules
 * above set their own padding, so the reserved space vanished and the tick
 * rendered on top of the first line of text.
 *
 * Making it a static flex item is what fixes it: the flex `gap` above then
 * spaces it from the message, at any text length, with no padding arithmetic.
 * The same patch was previously applied as an inline style from enqueue.php for
 * the cart page only; that has been removed in favour of this.
 */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
  position: static;
  top: auto;
  left: auto;
  margin: 0;
  flex: 0 0 auto;
  line-height: 1;
}

.woocommerce-message a.button, .woocommerce-info a.button {
  margin-left: auto; padding: 0.5rem 1.25rem;
  background: var(--nesa-ink); color: #fff; border-radius: 9999px;
  font-size: 0.8125rem; font-weight: 600; white-space: nowrap;
}

/*
 * "Shihni shportën" is noise once you are on the cart page — the cart is right
 * there under the notice. Same for the checkout page's own forward link.
 */
body.woocommerce-cart .woocommerce-message a.button.wc-forward,
body.woocommerce-cart .woocommerce-info a.button.wc-forward,
body.woocommerce-checkout .woocommerce-message a.button.wc-forward {
  display: none;
}

/* ==========================================================
 * CART TABLE (shared cart + checkout)
 * ========================================================== */

.woocommerce table.shop_table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--nesa-line);
  border-radius: 12px;
  overflow: hidden;
  font-size: 0.9375rem;
  margin-bottom: 1rem;
}
.woocommerce table.shop_table th {
  background: var(--nesa-cream);
  font-weight: 600; font-size: 0.8125rem;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--nesa-ink-soft);
  padding: 1rem 1.25rem; text-align: left;
  border-bottom: 1px solid var(--nesa-line);
}
.woocommerce table.shop_table td {
  padding: 1rem 1.25rem; vertical-align: middle;
  border-bottom: 1px solid var(--nesa-line); color: var(--nesa-ink);
}
.woocommerce table.shop_table tr:last-child td { border-bottom: 0; }
.woocommerce table.shop_table .product-thumbnail img {
  width: 72px; height: 72px; object-fit: contain;
  border-radius: 8px; border: 1px solid var(--nesa-line); background: var(--nesa-cream); padding: 0.25rem;
}
.woocommerce table.shop_table .product-name a { font-weight: 500; color: var(--nesa-ink); }
.woocommerce table.shop_table .product-name a:hover { color: var(--nesa-ink); }
.woocommerce table.shop_table .quantity .qty {
  width: 56px; height: 40px; text-align: center;
  border: 1px solid var(--nesa-line); border-radius: 8px; font-size: 0.9375rem; font-weight: 600;
}
.woocommerce table.shop_table .product-remove a.remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 9999px;
  color: var(--nesa-ink-soft) !important; font-size: 1.25rem;
}
.woocommerce table.shop_table .product-remove a.remove:hover { background: #fee2e2; color: #dc2626 !important; }
.woocommerce table.shop_table td.actions { padding: 1.25rem; }
.woocommerce table.shop_table td.actions .coupon { display: inline-flex; gap: 0.5rem; align-items: center; }
.woocommerce table.shop_table td.actions .coupon .input-text {
  height: 44px; padding: 0.5rem 1rem;
  border: 1px solid var(--nesa-line); border-radius: 9999px; font-size: 0.875rem; min-width: 140px;
}
.woocommerce table.shop_table td.actions .coupon .input-text:focus { outline: none; border-color: var(--nesa-ink); }
.woocommerce table.shop_table td.actions .coupon .button,
.woocommerce table.shop_table td.actions button[name="update_cart"] {
  height: 44px; padding: 0 1.25rem;
  background: var(--nesa-ink); color: #fff; border: 0;
  border-radius: 9999px; font-size: 0.8125rem; font-weight: 600; cursor: pointer;
}
.woocommerce table.shop_table td.actions button[name="update_cart"]:disabled { opacity: 0.5; cursor: not-allowed; }

/* ==========================================================
 * CART TOTALS table inside the right panel
 * ========================================================== */

.woocommerce .cart_totals > h2 {
  font-size: 1.125rem !important; font-weight: 700; margin-bottom: 1rem; color: var(--nesa-ink);
}
.woocommerce .cart_totals table {
  width: 100%; border-collapse: collapse; margin-bottom: 1.5rem;
}
.woocommerce .cart_totals table th,
.woocommerce .cart_totals table td {
  padding: 0.75rem 0; border-bottom: 1px solid var(--nesa-line);
  font-size: 0.9375rem; vertical-align: top;
}
.woocommerce .cart_totals table th {
  font-weight: 600; color: var(--nesa-ink-soft); text-align: left; width: 38%; white-space: nowrap;
}
.woocommerce .cart_totals table td { color: var(--nesa-ink); word-break: break-word; }
.woocommerce .cart_totals table .order-total th,
.woocommerce .cart_totals table .order-total td {
  font-weight: 700; font-size: 1.125rem; color: var(--nesa-ink); border-bottom: 0; padding-top: 1rem;
}

/* ==========================================================
 * CHECKOUT form
 * ========================================================== */

.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
  font-size: 1.25rem; font-weight: 700; color: var(--nesa-ink);
  margin: 0 0 1.25rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--nesa-line);
}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
.woocommerce-checkout .form-row-wide { grid-column: 1 / -1; }

/*
 * Half and half. woocommerce-layout.css sizes these for a float layout:
 *   .woocommerce form .form-row-first,
 *   .woocommerce form .form-row-last { width: 47%; }
 * 47% of a grid track that is already half the column left each input filling
 * under half its own cell. As grid items they should just fill the track, so
 * the 1fr 1fr above is what decides the split.
 *
 * `form` is in the selector to clear WooCommerce's (0,2,1) outright rather
 * than tie it and lean on load order.
 */
body.woocommerce-checkout form .form-row-first,
body.woocommerce-checkout form .form-row-last {
  width: auto;
  float: none;
}
.woocommerce-checkout .form-row label {
  display: block; font-size: 0.8125rem; font-weight: 600; color: var(--nesa-ink); margin-bottom: 0.375rem;
}
.woocommerce-checkout .form-row label .required { color: #dc2626; }
/*
 * Checkbox rows (terms, ship-to-different-address, account signup): the box
 * sits on the same line as its text, not stacked above it — the block rule
 * above is for labels that caption a field below them, which these are not.
 * flex-start + a small nudge keeps the box on the FIRST line when the terms
 * sentence wraps.
 */
.woocommerce-checkout .form-row label.checkbox,
.woocommerce-checkout .form-row .woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-bottom: 0;
  font-weight: 400;
}
.woocommerce-checkout .form-row input[type="checkbox"],
.woocommerce-checkout .woocommerce-form__label-for-checkbox input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin: 0.2em 0 0;
  accent-color: var(--nesa-ink);
}
/*
 * `body` and `form` are in the selector to clear woocommerce.css, which styles
 * these same fields at (0,3,1) for inputs and (0,2,2) for selects. Without
 * them our height and padding lost and the fields sat at WooCommerce's ~38px.
 *
 * background-COLOR, not the background shorthand: WooCommerce draws the select
 * chevron as a background-image, and the shorthand would wipe it out and leave
 * the control with no arrow.
 */
body.woocommerce-checkout form .form-row .input-text,
body.woocommerce-checkout form .form-row select,
body.woocommerce-checkout form .form-row textarea,
body.woocommerce-checkout form .form-row .select2-container .select2-selection {
  width: 100%; height: 48px; padding: 0.5rem 1rem;
  border: 1px solid var(--nesa-field-line); border-radius: 0;
  font-size: 0.9375rem; color: var(--nesa-ink); background-color: #fff;
}

/* Room for that chevron, which sits at calc(100% - .5em) at 16px wide. */
body.woocommerce-checkout form .form-row select { padding-right: 2.75rem; }
.woocommerce-checkout .form-row .input-text:focus,
.woocommerce-checkout .form-row select:focus {
  outline: none; border-color: var(--nesa-ink); box-shadow: 0 0 0 3px rgba(17,17,17,0.14);
}
.woocommerce-checkout .form-row textarea { height: auto; min-height: 100px; resize: vertical; }
.woocommerce-checkout #payment { background: transparent; margin-top: 1.5rem; }
.woocommerce-checkout #payment ul.payment_methods {
  list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-direction: column; gap: 0.75rem;
}
/*
 * Radio on the same line as the gateway name. WooCommerce puts the <input>
 * BEFORE the <label> as a sibling, and a flex label is block-level — so the
 * circle sat alone on its own line. The li is the flex row instead: radio,
 * then label (name + logo); the payment_box description wraps to a full
 * second row beneath them.
 */
.woocommerce-checkout #payment ul.payment_methods li {
  border: 1px solid var(--nesa-line-soft); border-radius: 0; padding: 1rem; background: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.75rem;
}
.woocommerce-checkout #payment ul.payment_methods li input.input-radio {
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--nesa-ink);
}
.woocommerce-checkout #payment ul.payment_methods li > label {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
}
.woocommerce-checkout #payment ul.payment_methods li .payment_box { flex-basis: 100%; }
/* Selected state is the ink border alone — no fill. With one gateway the box
 * is always checked, so a tint would just be a permanently coloured panel. */
.woocommerce-checkout #payment ul.payment_methods li:has(input:checked) { border-color: var(--nesa-ink); }
.woocommerce-checkout #payment ul.payment_methods li label { font-weight: 600; font-size: 0.9375rem; cursor: pointer; display: flex; align-items: center; gap: 0.75rem; }
.woocommerce-checkout #payment .payment_box { padding: 0.75rem 0 0 1.75rem; font-size: 0.8125rem; color: var(--nesa-ink-soft); }
/* Gateway logos (ProcardPay ships a ~1500px paysera.png) sit inline with the
 * label, pinned to the right edge — cap them to text height instead of
 * letting them own the panel. margin-left:auto does the pinning inside the
 * flex label; WooCommerce's own float:right is inert in flex layout. */
.woocommerce-checkout #payment ul.payment_methods li img {
  max-height: 28px;
  width: auto;
  margin: 0 0 0 auto;
  float: none;
}

/* ==========================================================
 * SELECT2
 * ========================================================== */

.select2-container--default .select2-selection--single {
  height: 48px !important; border: 1px solid var(--nesa-line-soft) !important;
  border-radius: 0 !important; display: flex !important; align-items: center !important; padding-left: 1rem !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--nesa-ink) !important; font-size: 0.9375rem !important; line-height: 48px !important; padding-left: 0 !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 48px !important; right: 0.75rem !important; }
.select2-dropdown { border: 1px solid var(--nesa-line-soft) !important; border-radius: 0 !important; box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important; overflow: hidden; }
.select2-results__option { padding: 0.625rem 1rem !important; font-size: 0.9375rem !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--nesa-ink) !important; }

/* ==========================================================
 * EMPTY CART
 * ========================================================== */

.woocommerce .cart-empty { text-align: center; padding: 4rem 2rem; color: var(--nesa-ink-soft); font-size: 1.125rem; }
.woocommerce .return-to-shop a.button {
  display: inline-block; padding: 0.875rem 2rem;
  background: var(--nesa-ink); color: #fff; border-radius: 10px; font-weight: 600; margin-top: 1rem;
}

@media (max-width: 768px) {
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper { grid-template-columns: 1fr; }
}

/* ── Checkout: fixed country + review thumbnail ────────────────────────── */

/* The single allowed country renders as text (see inc/wc-checkout.php). */
.bp-country-fixed {
  display: inline-block;
  font-family: var(--nesa-font-sans);
  font-size: 1rem;
  font-weight: 600;
  color: var(--nesa-ink);
}

/* Thumbnail under the product name in the order review. Block, so it sits on
 * its own line beneath the name and quantity rather than beside them. */
.bp-review-thumb { display: block; margin-top: 0.625rem; }
.bp-review-thumb__img {
  width: 64px;
  height: auto;
  display: block;
}

/* ── Checkout: two columns, summary on the right ───────────────────────── */

/*
 * woocommerce-layout.css floats .col-1/.col-2 at 48%/47% with a
 * clear:both wrapper. Grid instead, so the two columns are equal-height and
 * the right one can't be pushed down by a tall left one. The `> ` makes these
 * (0,3,1) against WooCommerce's (0,3,0) — it loads before this file, but the
 * child combinator means order isn't what decides it.
 *
 * 55/45 rather than 50/50: the left column carries labelled inputs, the right
 * a narrow product/price table.
 */
body.woocommerce-checkout #customer_details.col2-set {
  display: grid;
  grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
body.woocommerce-checkout .col2-set > .col-1,
body.woocommerce-checkout .col2-set > .col-2 {
  float: none;
  width: auto;
  min-width: 0;
}

/*
 * THE reason the two columns came out diagonal — empty top-left, form
 * top-right, summary bottom-left.
 *
 * woocommerce-layout.css clearfixes this container:
 *   .woocommerce .col2-set::before,
 *   .woocommerce .col2-set::after { content: " "; display: table; }
 *
 * On a float layout those are invisible. On a GRID container they are grid
 * items. So the grid held four children — ::before, .col-1, .col-2, ::after —
 * and auto-placement filled two rows: ::before took 1/1, pushing billing to
 * 1/2 and the summary down to 2/1.
 *
 * bp-final.css already does exactly this for .cart-collaterals on the cart
 * page; same idiom, same trap.
 */
body.woocommerce-checkout .col2-set::before,
body.woocommerce-checkout .col2-set::after {
  content: none;
  display: none;
}

/* Placement stated outright, so no future stray child can shuffle the columns
 * the way the clearfix did. */
body.woocommerce-checkout .col2-set > .col-1 { grid-area: 1 / 1; }
body.woocommerce-checkout .col2-set > .col-2 { grid-area: 1 / 2; }

/* "Informacion shtesë" now follows the billing block in the same column. */
body.woocommerce-checkout .woocommerce-additional-fields { margin-top: 2.5rem; }

/* Order review table: two columns of type, no boxed cells. */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  margin: 0 0 1.5rem;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table th,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table td {
  border: 0;
  padding: 0.625rem 0;
  font-size: 0.9375rem;
  vertical-align: top;
  background: transparent;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table thead th {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--nesa-line);
  font-weight: 700;
  color: var(--nesa-ink);
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-total,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table th.product-total,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot td { text-align: right; }
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot th {
  font-weight: 600;
  color: var(--nesa-ink);
  text-align: left;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr:first-child th,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr:first-child td {
  padding-top: 1rem;
  border-top: 1px solid var(--nesa-line);
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-total th,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-total td {
  font-weight: 700;
  font-size: 1.0625rem;
}

/* Single column below the tablet break: two 45%-wide columns of form is worse
 * than one full-width one. */
@media (max-width: 900px) {
  body.woocommerce-checkout #customer_details.col2-set { grid-template-columns: 1fr; }
  body.woocommerce-checkout .col2-set > .col-1 { grid-area: 1 / 1; }
  body.woocommerce-checkout .col2-set > .col-2 { grid-area: 2 / 1; }
}


/* ==========================================================
 * SOFTENED CORNERS — the client asked for a slight radius on buttons.
 * One token (--nesa-radius-btn, tokens.css) so the whole set moves together.
 * Circular controls (swatches, wishlist hearts, pills) keep their own radii.
 * ========================================================== */
.oxa-btn,
.oxa-pdp .bp-wish-btn--single,
.oxa-stickybuy__btn,
.nesa-loadmore__btn,
.bp-filter__toggle,
.bp-filter-apply,
.bp-no-products__btn,
.bp-chip,
.oxa-size,
.oxa-pdp__thumb,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce-checkout #place_order,
.woocommerce form .form-row .input-text,
.woocommerce form .form-row select {
  border-radius: var(--nesa-radius-btn, 6px);
}


/* ==========================================================
 * ADD-TO-CART TOAST — "Shtuar në shportë" (Lindex pattern).
 * Built by the inline script in inc/wc-cart-fragments.php on every AJAX
 * add-to-cart, on every page. The drawer no longer opens on add; this
 * quiet confirmation with a checkout shortcut is the whole feedback.
 * ========================================================== */
.nesa-toast {
  position: fixed;
  left: 50%;
  bottom: clamp(1rem, 3vw, 2rem);
  transform: translateX(-50%);
  z-index: 120;

  display: flex;
  align-items: center;
  gap: 0.75rem;

  width: max-content;
  max-width: calc(100vw - 2 * var(--nesa-gutter, 20px));
  padding: 0.875rem 1.125rem;

  background: var(--nesa-ink, #1a1a1a);
  color: #fff;
  border-radius: 10px;

  font-family: var(--nesa-font-sans, sans-serif);
  font-size: var(--oxa-fs-md, 0.9375rem);
  line-height: 1.2;

  animation: nesa-toast-up 220ms var(--oxa-ease, ease) both;
}

@keyframes nesa-toast-up {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .nesa-toast { animation: none; }
}

.nesa-toast__icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.nesa-toast__link {
  margin-left: 1.5rem;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.nesa-toast__link:hover { text-decoration: underline; }

.nesa-toast > .nesa-toast__close {
  flex: 0 0 auto;
  margin-left: 0.5rem;
  padding: 0 0.25rem;
  border: 0;
  background: none;
  color: #fff;
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.75;
}
.nesa-toast > .nesa-toast__close:hover { opacity: 1; }