/* ======================================================
   Norman Lamps - Modernized Cart Page + Shipping Estimator Modal
   Loaded only on /index.php?route=checkout/cart via cart.twig.
   Everything is namespaced under .nli-cart-page or
   .nli-shipping-estimator so nothing leaks into the rest of
   the OC catalog or fights Bootstrap 3 globals.
   ====================================================== */

/* ---- Design tokens (scoped, do NOT use :root) ----
   Colors ride the live newhome tokens (--nh-*, set on html[data-newhome] by
   newhome.css and palette-tracked via the preview switcher), with the old
   literals as fallbacks. One block recolors the page AND the estimator
   modal — buttons, focus rings, info notes, everything. */
.nli-cart-page,
.nli-shipping-estimator {
  --nli-color-primary: var(--nh-navy, #2d5c88);
  --nli-color-primary-dark: var(--nh-navy-deep, #234a6e);
  --nli-color-primary-light: color-mix(in srgb, var(--nh-navy-2, #2d5c88) 12%, #ffffff);
  --nli-color-bg: #f9f9f9;
  --nli-color-card: #ffffff;
  --nli-color-text: #1f2937;
  --nli-color-text-secondary: #6b7280;
  --nli-color-text-muted: #9ca3af;
  --nli-color-border: #e3e8ef;
  --nli-color-border-focus: var(--nh-gold, #e9b949);
  --nli-color-success: #059669;
  --nli-color-success-light: #d1fae5;
  --nli-color-error: #dc2626;
  --nli-color-error-light: #fee2e2;
  --nli-color-warning: #d97706;
  --nli-color-warning-light: #fef3c7;
  --nli-radius: 10px;
  --nli-radius-sm: 6px;
  --nli-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --nli-shadow-md: 0 4px 12px rgba(17, 24, 39, 0.08);
  --nli-transition: 200ms ease;
  --nli-font: var(--nh-body, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif);
}

/* ---- Page heading + container polish ---- */
.nli-cart-page h1 {
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--nli-color-text);
  margin-bottom: 2.4rem;
  letter-spacing: -0.01em;
}
.nli-cart-page .breadcrumb {
  background: transparent;
  padding-left: 0;
  margin-bottom: 1.6rem;
  font-size: 1.4rem;
}
.nli-cart-page .breadcrumb > li + li:before {
  content: "/\00a0";
  color: var(--nli-color-text-muted);
}
.nli-cart-page .alert {
  border-radius: var(--nli-radius-sm);
  margin-bottom: 1.6rem;
}

/* ---- Items table (desktop) ---- */
.nli-cart-items-wrap {
  background: var(--nli-color-card);
  border: 1px solid var(--nli-color-border);
  border-radius: var(--nli-radius);
  box-shadow: var(--nli-shadow);
  overflow: hidden;
  margin-bottom: 2.4rem;
}
.nli-cart-items-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.5rem;
}
.nli-cart-items-table thead th {
  background: #f9fafb;
  text-align: left;
  font-weight: 600;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--nli-color-text-secondary);
  padding: 1.4rem 1.6rem;
  border-bottom: 1px solid var(--nli-color-border);
}
.nli-cart-items-table thead th.nli-col-qty,
.nli-cart-items-table thead th.nli-col-actions {
  text-align: center;
}
.nli-cart-items-table thead th.nli-col-total {
  text-align: right;
}
.nli-cart-items-table tbody tr {
  border-top: 1px solid var(--nli-color-border);
  transition: background var(--nli-transition);
}
.nli-cart-items-table tbody tr:first-child {
  border-top: none;
}
.nli-cart-items-table tbody tr:hover {
  background: #fafbfc;
}
.nli-cart-items-table td {
  padding: 1.6rem;
  vertical-align: middle;
}
/* Column widths + alignment.
   The name column is the only one that flexes — every other column is
   pinned so the body cells stay vertically aligned with their headers
   regardless of how short the product name happens to be. */
.nli-cart-items-table thead th.nli-col-image,
.nli-cart-items-table td.nli-cart-item-image {
  width: 96px;
}
.nli-cart-items-table thead th.nli-col-name,
.nli-cart-items-table td.nli-cart-item-name {
  width: auto;
}
.nli-cart-items-table thead th.nli-col-model,
.nli-cart-items-table td.nli-cart-item-model {
  width: 200px;   /* name column is width:auto, so it yields the space */
  white-space: nowrap;
}
.nli-cart-items-table thead th.nli-col-qty,
.nli-cart-items-table td.nli-cart-item-qty {
  width: 160px;
  text-align: center;
  white-space: nowrap;
}
.nli-cart-items-table thead th.nli-col-total,
.nli-cart-items-table td.nli-cart-item-total {
  width: 140px;
}
.nli-cart-items-table thead th.nli-col-actions,
.nli-cart-items-table td.nli-col-actions {
  width: 64px;
  text-align: center;
}
/* Square 1:1 thumbnail. Most catalog hero images are already 1:1 so
   they fill the box exactly; anything off-ratio (legacy non-square
   crops, banner-style imports, etc.) letterboxes inside the box on
   the white backdrop instead of getting clipped. Cover was chopping
   round reflector / dome lamp thumbs at the edges — contain keeps
   the whole product visible at the cost of a sliver of whitespace
   when needed. Box bumped from 72→80px and the cell padding (column
   width) widened to 96px to match per "go a bit wider if needed". */
.nli-cart-item-image img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border-radius: var(--nli-radius-sm);
  border: 1px solid var(--nli-color-border);
  background: #fff;
}
.nli-cart-item-name a {
  color: var(--nli-color-text);
  font-weight: 600;
  text-decoration: none;
}
.nli-cart-item-name a:hover {
  color: var(--nli-color-primary);
  text-decoration: underline;
}
.nli-cart-item-meta {
  display: block;
  font-size: 1.3rem;
  color: var(--nli-color-text-secondary);
  margin-top: 0.4rem;
}
.nli-cart-item-stock-warning {
  color: var(--nli-color-error);
  font-weight: 600;
  margin-left: 0.4rem;
}
.nli-cart-item-recurring {
  display: inline-block;
  margin-top: 0.4rem;
  padding: 0.24rem 0.88rem;
  background: var(--nli-color-primary-light);
  color: var(--nli-color-primary-dark);
  border-radius: 999px;
  font-size: 1.2rem;
  font-weight: 600;
}
.nli-cart-item-model {
  font-size: 1.5rem;
  color: var(--nli-color-text-secondary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.nli-cart-item-total {
  text-align: right;
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--nli-color-text);
  white-space: nowrap;
}
/* money sub-lines: the line TOTAL gets the biggest gap below it, then the
   "ea" / "per unit" pair sit close together (inverted from the old rhythm) */
.nli-cart-item-unit {
  display: block;
  font-size: 1.3rem;
  color: var(--nli-color-text-secondary);
  font-weight: 400;
  margin-top: 0.1rem;
  line-height: 1.3;
}

.nli-cart-item-total .nli-cart-item-unit:first-of-type {
  margin-top: 0.7rem;
}

/* total units for pack products — sits under the quantity stepper so the
   Total column stays money-only and the row keeps its height */
.nli-cart-qty-units {
  display: block;
  font-size: 1.3rem;
  color: var(--nli-color-text-secondary);
  font-weight: 400;
  margin-top: 0.5rem;
}

.nli-cart-qty-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
}

/* ---- Quantity stepper (desktop) ---- */
.nli-qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--nli-color-border);
  border-radius: var(--nli-radius-sm);
  overflow: hidden;
  background: #fff;
}
.nli-qty button {
  background: #f9fafb;
  border: none;
  width: 34px;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--nli-color-text);
  cursor: pointer;
  transition: background var(--nli-transition), color var(--nli-transition);
  padding: 0;
  line-height: 1;
}
.nli-qty button:hover:not(:disabled) {
  background: var(--nli-color-primary-light);
  color: var(--nli-color-primary-dark);
}
.nli-qty button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.nli-qty input {
  width: 48px;
  border: none;
  border-left: 1px solid var(--nli-color-border);
  border-right: 1px solid var(--nli-color-border);
  text-align: center;
  font-size: 1.4rem;
  color: var(--nli-color-text);
  background: #fff;
  -moz-appearance: textfield;
  outline: none;
}
.nli-qty input::-webkit-outer-spin-button,
.nli-qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.nli-qty input:focus {
  background: #fff;
}

/* ---- Remove button ---- */
.nli-remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 4px;   /* match checkout: rectangular hover, not a circle (owner 2026-06-30) */
  background: transparent;
  border: 1px solid transparent;
  color: var(--nli-color-text-muted);
  font-size: 18px;      /* the literal × glyph — exact checkout-sidebar remove recipe */
  line-height: 1;
  font-weight: 400;     /* less bold than the old fa-times icon */
  cursor: pointer;
  transition: background var(--nli-transition), color var(--nli-transition),
    border-color var(--nli-transition);
}
.nli-remove-btn:hover {
  background: var(--nli-color-error-light);
  color: var(--nli-color-error);
  border-color: var(--nli-color-error-light);
}
.nli-remove-btn .fa,
.nli-remove-btn .bi {
  font-size: 1.6rem;
}

/* ---- Items: mobile cards ---- */
.nli-cart-items-cards {
  display: none;
}
.nli-cart-item-card {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 1.4rem;
  padding: 1.6rem;
  border-top: 1px solid var(--nli-color-border);
}
.nli-cart-item-card:first-child {
  border-top: none;
}
.nli-cart-item-card-image img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--nli-radius-sm);
  border: 1px solid var(--nli-color-border);
  background: #fff;
}
.nli-cart-item-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.nli-cart-item-card-name {
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--nli-color-text);
}
.nli-cart-item-card-name a {
  color: var(--nli-color-text);
  text-decoration: none;
}
.nli-cart-item-card-name a:hover {
  color: var(--nli-color-primary);
}
.nli-cart-item-card-meta {
  font-size: 1.3rem;
  color: var(--nli-color-text-secondary);
}
.nli-cart-item-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: 0.4rem;
}
.nli-cart-item-card-total {
  font-weight: 700;
  font-size: 1.6rem;
}

/* ---- "What would you like to do next" — modernized accordion ---- */
.nli-cart-extras {
  background: var(--nli-color-card);
  border: 1px solid var(--nli-color-border);
  border-radius: var(--nli-radius);
  box-shadow: var(--nli-shadow);
  overflow: hidden;
  margin-bottom: 2.4rem;
}

/* ---- "What's next" two-cell card: coupon (inline) | shipping estimate ---- */
.nli-cart-next {
  display: flex;
  align-items: stretch;
}
.nli-cart-next-cell {
  flex: 1 1 0;
  min-width: 0;
  padding: 2.9rem 2.9rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* All three cells' controls share one bottom line — the help text wraps to
   different line counts per cell, so without this the buttons land at
   different heights. The collect chip swaps in for its button (never both
   visible), so it carries the same anchor. */
.nli-cart-next-cell > .nli-btn,
.nli-cart-next-cell .nli-coupon-inline,
#nli-collect-chip {
  margin-top: auto;
}
.nli-cart-next-cell + .nli-cart-next-cell {
  border-left: 1px solid var(--nli-color-border);
}
.nli-cart-next-label {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.5rem;
  padding-bottom: 5px;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--nli-color-primary-dark);
}
.nli-cart-next-label .fa {
  font-size: 1.6rem;
  color: var(--nli-color-border-focus);
}
.nli-cart-next-help {
  margin: 0 0 1.4rem;
  font-size: 14px;
  line-height: 1.5;
  color: var(--nli-color-text-secondary);
}
/* Joined input + "Apply" button group — mirrors the checkout sidebar's
   .coupon-input-row / .btn-coupon: the input spans the full cell width and
   the button is pinned to the right, fused on one seam (input drops its
   right border + right radius; button keeps only its right radius). Sized
   to the 44px height of the Estimate/Collect buttons. The error message
   wraps to its own full-width line below the group. */
.nli-coupon-inline {
  align-self: stretch;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.nli-coupon-inline #input-coupon {
  /* flex-basis 0% (not auto) so Bootstrap's .form-control{width:100%}
     doesn't act as a 100% basis and wrap the button to the next line */
  flex: 1 1 0%;
  width: auto;
  min-width: 0;
  height: 44px;
  padding: 0 1.4rem;
  font-size: 1.4rem;
  color: var(--nli-color-text);
  border: 1px solid #cdd6e0;
  border-right: none;
  border-radius: var(--nli-radius-sm) 0 0 var(--nli-radius-sm);
  box-shadow: none;
}
.nli-coupon-inline #input-coupon:focus {
  border-color: var(--nli-color-border-focus);
  outline: none;
}
/* Checkout-style Apply button: white bg, navy text, fused to the input.
   Overrides the .nli-btn shape (square left edge, control-gray border)
   while keeping the white-button hover (navy border + light tint). */
.nli-coupon-inline #button-coupon {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 1.8rem;
  background: #fff;
  color: var(--nli-color-primary);
  border: 1px solid #cdd6e0;
  border-radius: 0 var(--nli-radius-sm) var(--nli-radius-sm) 0;
}
.nli-coupon-inline #button-coupon:hover {
  background: #f4f7fb;
  color: var(--nli-color-primary-dark);
  border-color: var(--nli-color-primary);
}
.nli-coupon-msg {
  flex: 1 1 100%;
  margin: 0;
  font-size: 1.3rem;
  color: var(--nli-color-error);
}

/* ---- Collect-shipping pre-set: modal + saved chip (cart page) ---- */
.nli-collect-overlay {
  position: fixed;
  inset: 0;
  /* match the Estimate Shipping modal's (non-blue) Bootstrap backdrop, was navy rgba(11,34,56,.55) */
  background: rgba(0, 0, 0, 0.5);
  /* above the Norman chat widget (z-index 100000) */
  z-index: 100001;
  display: block;
  padding: 0 16px;
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}
.nli-collect-overlay.show {
  visibility: visible;
  opacity: 1;
}
body.nli-collect-lock { overflow: hidden; }
body.nli-collect-lock #norman-widget-container { display: none !important; }
.nli-collect-dialog {
  width: 100%;
  max-width: 74rem;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  /* estimator-style placement: below the top, visually near-centered */
  margin: 9vh auto 5vh;
  background: var(--nli-color-card);
  border-radius: var(--nli-radius);
  box-shadow: var(--nli-shadow-md);
  overflow: hidden;
  font-family: var(--nli-font);
  /* estimator-style slide-in */
  transform: translateY(-26px);
  transition: transform 0.25s ease;
}
.nli-collect-overlay.show .nli-collect-dialog { transform: none; }
/* light header, matching the estimator modal (no navy band) */
.nli-collect-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2rem 2.8rem;
  background: var(--nli-color-card);
  border-bottom: 1px solid var(--nli-color-border);
  color: var(--nli-color-primary-dark);
  font-size: 2rem;
  font-weight: 700;
}
.nli-collect-close {
  background: none;
  border: 0;
  color: var(--nli-color-text-muted);
  font-size: 2.8rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.4rem;
  transition: color var(--nli-transition);
}
.nli-collect-close:hover { color: var(--nli-color-text); }
.nli-collect-body {
  padding: 2.6rem 3rem 3rem;
  overflow-y: auto;
}
.nli-collect-body .collect-intro {
  margin: 0 0 2rem;
  font-size: 1.6rem;
  line-height: 1.55;
  color: var(--nli-color-text);
}
.nli-collect-body .collect-step { margin-bottom: 2.2rem; }
.nli-collect-body .collect-step-label {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--nli-color-primary-dark);
  margin-bottom: 1rem;
}
.nli-collect-body .collect-carriers {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.nli-collect-body .collect-carrier {
  flex: 1 1 0;
  min-width: 13rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0;
  padding: 1.4rem 1.6rem;
  border: 1px solid var(--nli-color-border);
  border-radius: var(--nli-radius-sm);
  background: #fff;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--nli-color-text);
  cursor: pointer;
  transition: border-color var(--nli-transition), background var(--nli-transition);
}
.nli-collect-body .collect-carrier:hover { border-color: var(--nli-color-primary); }
.nli-collect-body .collect-carrier.selected {
  border-color: var(--nli-color-primary);
  background: color-mix(in srgb, var(--nli-color-primary) 7%, #fff);
}
.nli-collect-body .collect-select {
  width: 100%;
  max-width: 48rem;
  padding: 1.2rem 1.4rem;
  font-size: 1.6rem;
  color: var(--nli-color-text);
  border: 1px solid #d7dce3;
  border-radius: var(--nli-radius-sm);
  background: #fff;
}
.nli-collect-body .collect-select:focus {
  border-color: var(--nli-color-border-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nli-color-border-focus) 25%, transparent);
  outline: none;
}
.nli-collect-body .nlic-row {
  display: flex;
  gap: 1.6rem;
  flex-wrap: wrap;
}
.nli-collect-body .nlic-field { flex: 1 1 26rem; min-width: 0; }
.nli-collect-body .nlic-field label {
  display: block;
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--nli-color-text);
  margin-bottom: 0.6rem;
}
.nli-collect-body .nlic-field input {
  width: 100%;
  padding: 1.2rem 1.4rem;
  font-size: 1.6rem;
  color: var(--nli-color-text);
  border: 1px solid #d7dce3;
  border-radius: var(--nli-radius-sm);
}
.nli-collect-body .nlic-field input:focus {
  border-color: var(--nli-color-border-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nli-color-border-focus) 25%, transparent);
  outline: none;
}
.nli-collect-body .nlic-field input:disabled { background: #f3f4f6; }
.nli-collect-body .collect-hint {
  margin-top: 0.6rem;
  font-size: 1.4rem;
  color: var(--nli-color-text-secondary);
  white-space: pre-line;
}
.nli-collect-body .collect-ownlabel-info {
  font-size: 1.5rem;
  line-height: 1.6;
  color: var(--nli-color-text);
  white-space: pre-line;
  margin: 0 0 1.4rem;
}
.nli-collect-body .collect-ack {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  font-size: 1.5rem;
  color: var(--nli-color-text);
  cursor: pointer;
}
.nli-collect-body .collect-ack input { margin-top: 0.3rem; width: 1.7rem; height: 1.7rem; accent-color: var(--nli-color-primary); }
.nli-collect-body .collect-error {
  margin: 1rem 0 0;
  font-size: 1.4rem;
  color: var(--nli-color-error);
  min-height: 1.8rem;
}
.nli-collect-body #nlic-continue {
  margin-top: 0.8rem;
  min-height: 5rem;
  padding: 1.4rem 2.6rem;
  font-size: 1.6rem;
}
.nli-collect-body #nlic-continue.is-blocked {
  opacity: 0.6;
  cursor: not-allowed;
}
.nli-collect-body .collect-note {
  margin: 1.8rem 0 0;
  font-size: 1.4rem;
  line-height: 1.55;
  color: var(--nli-color-text-secondary);
}
#nli-collect-tip {
  position: fixed;
  transform: translate(-50%, -100%);
  background: var(--nli-color-primary-dark);
  color: #fff;
  font-size: 1.3rem;
  font-weight: 600;
  padding: 0.7rem 1.2rem;
  border-radius: 0.7rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
  z-index: 100002;
  pointer-events: none;
  box-shadow: 0 8px 18px -8px rgba(11, 34, 56, 0.45);
  max-width: 30rem;
  text-align: center;
}
#nli-collect-tip.show { opacity: 1; visibility: visible; }
#nli-collect-chip {
  font-size: 1.35rem;
  color: var(--nli-color-text);
  line-height: 1.6;
}
.nli-collect-chip-links {
  margin-top: 0.5rem;
  display: flex;
  gap: 1.6rem;
}
.nli-collect-chip-links .nli-collect-chip-link { margin-left: 0; }
.nli-collect-chip-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--nli-color-primary);
  color: #fff;
  font-size: 1.1rem;
  margin-right: 0.3rem;
}
.nli-collect-chip-title { font-weight: 700; color: var(--nli-color-primary-dark); }
.nli-collect-chip-note { color: var(--nli-color-text-secondary); margin-left: 0.4rem; }
.nli-collect-chip-link {
  background: none;
  border: 0;
  padding: 0;
  margin-left: 1rem;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--nli-color-primary);
  text-decoration: underline;
  cursor: pointer;
}
.nli-collect-chip-link:hover { color: var(--nli-color-primary-dark); }
@media (max-width: 991px) {
  .nli-cart-next { flex-wrap: wrap; }
  .nli-cart-next-cell { flex: 1 1 26rem; }
}
@media (max-width: 767px) {
  .nli-cart-next {
    flex-direction: column;
  }
  /* in the column container the tablet block's flex-basis (26rem) would
     become a 260px HEIGHT — size each cell to its content instead */
  .nli-cart-next-cell {
    flex: 0 0 auto;
  }
  .nli-cart-next-cell + .nli-cart-next-cell {
    border-left: 0;
    border-top: 1px solid var(--nli-color-border);
  }
}
.nli-cart-extras-title {
  padding: 1.4rem 2rem;
  background: #f9fafb;
  border-bottom: 1px solid var(--nli-color-border);
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--nli-color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.nli-cart-accordion-row {
  border-top: 1px solid var(--nli-color-border);
}
.nli-cart-accordion-row:first-child {
  border-top: none;
}
.nli-cart-accordion-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.4rem 2rem;
  background: transparent;
  border: none;
  text-align: left;
  font-family: var(--nli-font);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--nli-color-text);
  cursor: pointer;
  transition: background var(--nli-transition);
}
.nli-cart-accordion-toggle:hover {
  background: #fafbfc;
}
.nli-cart-accordion-toggle:focus {
  outline: none;
  background: var(--nli-color-primary-light);
}
.nli-cart-accordion-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--nli-color-primary-light);
  color: var(--nli-color-primary-dark);
  font-size: 1.4rem;
}
.nli-cart-accordion-label {
  flex: 1;
}
.nli-cart-accordion-chevron {
  transition: transform var(--nli-transition);
  color: var(--nli-color-text-muted);
}
.nli-cart-accordion-row.open .nli-cart-accordion-chevron {
  transform: rotate(180deg);
}
.nli-cart-accordion-body {
  display: none;
  padding: 0 2rem 2rem;
  background: #fafbfc;
}
.nli-cart-accordion-row.open .nli-cart-accordion-body {
  display: block;
  animation: nliAccOpen 200ms ease;
}
@keyframes nliAccOpen {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.nli-cart-accordion-help {
  font-size: 1.3rem;
  color: var(--nli-color-text-secondary);
  margin-bottom: 1rem;
}
.nli-cart-accordion-row .input-group {
  max-width: 420px;
}
.nli-cart-accordion-row .form-control {
  border-radius: var(--nli-radius-sm) 0 0 var(--nli-radius-sm);
}
.nli-cart-accordion-row .input-group-btn .btn {
  border-radius: 0 var(--nli-radius-sm) var(--nli-radius-sm) 0;
}

/* ---- Modernize OC's stock panel-default modules (coupon + voucher) ---- */
.nli-cart-extras .panel-group {
  margin-bottom: 0;
}
.nli-cart-extras .panel-default {
  background: transparent;
  border: none;
  border-top: 1px solid var(--nli-color-border);
  border-radius: 0;
  box-shadow: none;
  margin: 0;
}
.nli-cart-extras .panel-default + .panel-default {
  margin-top: 0;
}
.nli-cart-extras .panel-default:first-child {
  border-top: none;
}
.nli-cart-extras .panel-heading {
  background: transparent;
  padding: 0;
  border-bottom: none;
  border-radius: 0;
}
.nli-cart-extras .panel-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
}
.nli-cart-extras .panel-title > a {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.4rem 2rem;
  font-family: var(--nli-font);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--nli-color-text);
  text-decoration: none;
  transition: background var(--nli-transition);
}
.nli-cart-extras .panel-title > a:hover,
.nli-cart-extras .panel-title > a:focus {
  background: #fafbfc;
  text-decoration: none;
  color: var(--nli-color-text);
  outline: none;
}
.nli-cart-extras .panel-title > a::before {
  content: "\f0f6"; /* fa-file-text-o */
  font-family: "FontAwesome", -apple-system, sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--nli-color-primary-light);
  color: var(--nli-color-primary-dark);
  font-size: 1.4rem;
  flex-shrink: 0;
}
.nli-cart-extras .panel-title > a[href="#collapse-voucher"]::before {
  content: "\f06b"; /* fa-gift */
}
.nli-cart-extras .panel-title > a[href="#collapse-coupon"]::before {
  content: "\f02b"; /* fa-tag */
}
.nli-cart-extras .panel-title > a .fa-caret-down {
  margin-left: auto;
  transition: transform var(--nli-transition);
  color: var(--nli-color-text-muted);
}
.nli-cart-extras .panel-title > a[aria-expanded="true"] .fa-caret-down,
.nli-cart-extras .panel-title > a:not(.collapsed) .fa-caret-down {
  transform: rotate(180deg);
}
.nli-cart-extras .panel-collapse {
  background: #fafbfc;
}
.nli-cart-extras .panel-body {
  padding: 1.6rem 2rem 2rem;
  background: transparent;
  border-top: 1px solid var(--nli-color-border);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.nli-cart-extras .panel-body label.control-label {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--nli-color-text-secondary);
  margin: 0;
  padding: 0 5px 0 0;
  display: inline-flex;
  align-items: center;
  float: none;
  text-align: left;
  width: auto;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex: 0 0 auto;
}
.nli-cart-extras .panel-body .input-group {
  max-width: 600px;
  width: auto;
  flex: 1 1 320px;
  min-width: 0;
}
@media (max-width: 575px) {
  .nli-cart-extras .panel-body label.control-label {
    flex-basis: 100%;
    padding: 0 0 0.4rem 0;
  }
  .nli-cart-extras .panel-body .input-group {
    flex-basis: 100%;
  }
}
.nli-cart-extras .panel-body .form-control {
  border-radius: var(--nli-radius-sm) 0 0 var(--nli-radius-sm);
  border-color: var(--nli-color-border);
  font-size: 1.5rem;
  height: auto;
  padding: 0.88rem 1.36rem;
  box-shadow: none;
}
.nli-cart-extras .panel-body .form-control:focus {
  border-color: var(--nli-color-border-focus);
  box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.12);
}
.nli-cart-extras .panel-body .input-group-btn .btn,
.nli-cart-extras .panel-body .input-group-btn .btn-primary {
  border-radius: 0 var(--nli-radius-sm) var(--nli-radius-sm) 0;
  background: var(--nli-color-primary);
  border-color: var(--nli-color-primary);
  font-weight: 600;
  padding: 0.88rem 1.6rem;
}
.nli-cart-extras .panel-body .input-group-btn .btn:hover,
.nli-cart-extras .panel-body .input-group-btn .btn-primary:hover {
  background: var(--nli-color-primary-dark);
  border-color: var(--nli-color-primary-dark);
}

/* ---- Totals card ---- */
.nli-cart-totals-card {
  background: var(--nli-color-card);
  border: 1px solid var(--nli-color-border);
  border-radius: var(--nli-radius);
  box-shadow: var(--nli-shadow);
  padding: 2rem 2.4rem;
  margin-bottom: 2.4rem;
}
.nli-cart-totals-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.8rem 0;
  font-size: 1.5rem;
  color: var(--nli-color-text-secondary);
}
.nli-cart-totals-row + .nli-cart-totals-row {
  border-top: 1px dashed var(--nli-color-border);
}
.nli-cart-totals-label {
  font-weight: 500;
}
.nli-cart-totals-value {
  font-weight: 600;
  color: var(--nli-color-text);
}
.nli-cart-totals-row.is-grand {
  border-top: 2px solid var(--nli-color-border);
  padding-top: 1.4rem;
  margin-top: 0.8rem;
  font-size: 1.8rem;
}
.nli-cart-totals-row.is-grand .nli-cart-totals-label,
.nli-cart-totals-row.is-grand .nli-cart-totals-value {
  font-weight: 800;
  color: var(--nli-color-text);
}

/* ---- Action bar (Continue Shopping / Estimate Shipping / Checkout) ---- */
.nli-cart-actions-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-bottom: 5.6rem;   /* breathing room before the footer */
}

/* the three bottom buttons read slightly larger than the modal's */
.nli-cart-actions-bar .nli-btn {
  font-size: 1.6rem;
}
/* Wide Checkout CTA — owner-tuned 9rem (90px) sides; desktop only.
   768–991px keeps the compact base padding, <768px stacks full-width. */
@media (min-width: 992px) {
  .nli-cart-actions-bar .nli-btn-checkout {
    padding-left: 9rem;
    padding-right: 9rem;
  }
}

/* ---- Empty cart state ---- */
.nli-cart-empty {
  max-width: 56rem;
  margin: 5rem auto 7rem;
  text-align: center;
  font-family: var(--nli-font);
}
.nli-cart-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 8.4rem;
  height: 8.4rem;
  margin: 0 auto 2rem;
  border-radius: 50%;
  background: var(--nli-color-primary-light);
  color: var(--nli-color-primary);
  font-size: 4.6rem;
}
/* the legacy stylesheet.css pins .fa to 14px sitewide — out-specify it */
.nli-cart-empty-icon .fa {
  font-size: 4.6rem;
}
.nli-cart-empty h1 {
  margin: 0 0 1rem;
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--nli-color-text);
}
.nli-cart-empty-sub {
  margin: 0 0 2.4rem;
  font-size: 1.5rem;
  line-height: 1.6;
  color: var(--nli-color-text-secondary);
}
.nli-cart-empty-actions {
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-bottom: 2.4rem;
}
.nli-cart-empty-actions .nli-btn {
  font-size: 1.6rem;
  padding-left: 2.8rem;
  padding-right: 2.8rem;
}
.nli-cart-empty-help {
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.6;
  color: var(--nli-color-text-secondary);
}
.nli-cart-empty-help a {
  color: var(--nli-color-primary);
  font-weight: 600;
  text-decoration: none;
}
.nli-cart-empty-help a:hover {
  text-decoration: underline;
}
.nli-cart-actions-left,
.nli-cart-actions-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.nli-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 1.2rem 2rem;
  border-radius: var(--nli-radius-sm);
  font-family: var(--nli-font);
  font-size: 1.5rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--nli-transition), color var(--nli-transition),
    border-color var(--nli-transition), box-shadow var(--nli-transition);
  border: 1px solid transparent;
  min-height: 44px;
  line-height: 1.2;
}
.nli-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(45, 92, 136, 0.18);
}
.nli-btn-primary {
  background: var(--nli-color-primary);
  color: #fff;
  border-color: var(--nli-color-primary);
}
.nli-btn-primary:hover {
  background: var(--nli-color-primary-dark);
  border-color: var(--nli-color-primary-dark);
  color: #fff;
  text-decoration: none;
}
.nli-btn-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.nli-btn-outline {
  background: transparent;
  color: var(--nli-color-primary);
  border-color: var(--nli-color-primary);
}
.nli-btn-outline:hover {
  background: var(--nli-color-primary-light);
  color: var(--nli-color-primary-dark);
  text-decoration: none;
}
.nli-btn-ghost {
  background: transparent;
  color: var(--nli-color-text-secondary);
  border-color: var(--nli-color-border);
}
.nli-btn-ghost:hover {
  background: #f9fafb;
  color: var(--nli-color-text);
  text-decoration: none;
}
.nli-btn-sm {
  padding: 0.64rem 1.36rem;
  font-size: 1.3rem;
  min-height: 0;
}
.nli-btn .fa,
.nli-btn .bi {
  font-size: 1.6rem;
}

/* ---- Responsive: items table → cards on small screens ---- */
@media (max-width: 767px) {
  .nli-cart-items-table {
    display: none;
  }
  .nli-cart-items-cards {
    display: block;
  }
  .nli-cart-actions-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .nli-cart-actions-left,
  .nli-cart-actions-right {
    flex-direction: column;
    align-items: stretch;
  }
  .nli-cart-actions-left .nli-btn,
  .nli-cart-actions-right .nli-btn {
    width: 100%;
    justify-content: center;
  }
  /* On mobile we want the natural reading order browse → estimate → buy */
  .nli-cart-actions-bar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
  .nli-cart-actions-bar .nli-btn-continue {
    order: 1;
  }
  .nli-cart-actions-bar .nli-btn-estimate {
    order: 2;
  }
  .nli-cart-actions-bar .nli-btn-checkout {
    order: 3;
  }
  .nli-cart-page h1 {
    font-size: 2.2rem;
  }
}

/* ======================================================
   Shipping Estimator Modal
   ====================================================== */

.nli-shipping-estimator .modal-dialog {
  /* Wider than Bootstrap's defaults so the left column has room for cart
     contents AND the shipping options stacked underneath, without forcing
     the right column's address form to feel cramped. Falls back gracefully
     via the responsive rules at the bottom of this file. */
  max-width: 1150px;
  margin: 2.8rem auto;
}

/* Bootstrap 3 hard-codes `.modal-lg { width: 900px }` at >=992px which
   wins over our generic max-width above (a fixed `width` beats `max-width`
   when the value is smaller). Override both `.modal-dialog` and the
   `.modal-lg` modifier with a higher-specificity selector inside our
   scope so the estimator actually uses the full 1150px. The viewport
   cap keeps it from overflowing on viewports between 992px and 1150px. */
@media (min-width: 992px) {
  .nli-shipping-estimator .modal-dialog,
  .nli-shipping-estimator .modal-lg {
    width: 1150px;
    max-width: calc(100vw - 40px);
  }
}
.nli-shipping-estimator .modal-content {
  border: none;
  border-radius: var(--nli-radius);
  box-shadow: var(--nli-shadow-md);
  overflow: hidden;
  font-family: var(--nli-font);
  color: var(--nli-color-text);
}
.nli-shipping-estimator .modal-header {
  background: var(--nli-color-card);
  border-bottom: 1px solid var(--nli-color-border);
  padding: 1.6rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nli-shipping-estimator .modal-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--nli-color-text);
  margin: 0;
}
/* Match the Collect Shipping modal's close button: a plain gray × that simply
   darkens on hover (was a gray circle that turned red-on-hover). */
.nli-shipping-estimator .modal-header .close {
  position: static;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  border: 0;
  font-size: 2.8rem;
  line-height: 1;
  color: var(--nli-color-text-muted);
  opacity: 1;
  margin: 0;
  padding: 0 0.4rem;
  cursor: pointer;
  transition: color var(--nli-transition);
  text-shadow: none;
}
.nli-shipping-estimator .modal-header .close::before,
.nli-shipping-estimator .modal-header .close::after {
  display: none; /* show the × glyph instead of the drawn-X bars */
}
.nli-shipping-estimator .modal-header .close:hover,
.nli-shipping-estimator .modal-header .close:focus {
  background: none;
  color: var(--nli-color-text);
  outline: none;
}
.nli-shipping-estimator .modal-body {
  background: var(--nli-color-bg);
  padding: 2rem;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}
.nli-shipping-estimator .modal-footer {
  background: var(--nli-color-card);
  border-top: 1px solid var(--nli-color-border);
  padding: 1.4rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin: 0;
  /* Override Bootstrap 3's text-align:right (irrelevant under flex but
     defensive) */
  text-align: left;
}
/* Bootstrap 3 adds `:before` and `:after` clearfix pseudo-elements on
   .modal-footer. The moment we make the footer a flex container those
   pseudos become flex *children*, turning a 2-item layout (summary +
   actions) into a 4-item one — which made `justify-content:space-between`
   park the action buttons around the 67% mark instead of flush right.
   Wiping the pseudos restores the intended two-item layout. */
.nli-shipping-estimator .modal-footer:before,
.nli-shipping-estimator .modal-footer:after {
  content: none;
  display: none;
}
.nli-shipping-estimator .modal-footer-summary {
  font-size: 1.5rem;
  color: var(--nli-color-text-secondary);
}
.nli-shipping-estimator .modal-footer-summary strong {
  color: var(--nli-color-text);
}
/* Pin the Close + Continue-to-Checkout group to the right edge of the
   footer regardless of whether the summary slot is populated. Belt &
   suspenders alongside the pseudo-element kill above — if any future
   sibling sneaks in, the buttons still land where the user expects. */
.nli-shipping-estimator .modal-footer .nli-modal-footer-actions {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-left: auto;
}

/* Two-column desktop grid: left column stacks cart on top of the shipping
   rates pane; right column holds the address form. The left column is
   intentionally wider than before because it now hosts two stacked panes
   AND the rate cards can grow tall (multiple carriers × tiers). */
.nli-estimator-grid {
  display: grid;
  grid-template-columns: minmax(320px, 46%) 1fr;
  gap: 1.6rem;
  align-items: start;
}
/* Vertical stack inside a grid cell — cart pane + rates pane share the
   left column. Gap matches the grid gap so panes line up visually with
   the right-column address pane. */
.nli-estimator-col {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  min-width: 0;
}
.nli-estimator-pane {
  background: var(--nli-color-card);
  border: 1px solid var(--nli-color-border);
  border-radius: var(--nli-radius);
  box-shadow: var(--nli-shadow);
  padding: 1.6rem;
  min-width: 0;
}
/* Rates pane: subtle visual separation from the cart pane above it; same
   border treatment but a slightly cooler background hints "this changes
   based on what you typed in the address form". */
.nli-estimator-rates-pane {
  background: var(--nli-color-bg);
}
.nli-estimator-rates-empty {
  font-size: 1.4rem;
  color: var(--nli-color-text-secondary);
  padding: 1.2rem 0;
  line-height: 1.5;
}
.nli-estimator-rates-empty strong {
  color: var(--nli-color-text);
}
.nli-estimator-pane h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--nli-color-text-secondary);
  margin: 0 0 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.nli-estimator-pane h4 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--nli-color-text);
  margin: 1.6rem 0 0.8rem;
}

/* ---- Estimator: cart pane ---- */
.nli-estimator-cart-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.nli-estimator-cart-item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;  /* thumb | body | price stack */
  align-items: start;
  gap: 1.2rem;
  padding: 1rem;
  border: 1px solid var(--nli-color-border);
  border-radius: var(--nli-radius-sm);
  background: #fff;
}

.nli-estimator-cart-item-body {
  min-width: 0;
}
.nli-estimator-cart-item-img {
  width: 56px;
  height: 56px;
  border-radius: var(--nli-radius-sm);
  border: 1px solid var(--nli-color-border);
  background: #fff;
  object-fit: cover;
}
.nli-estimator-cart-item-name {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--nli-color-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nli-estimator-cart-item-meta {
  font-size: 1.2rem;
  color: var(--nli-color-text-secondary);
  margin-top: 0.24rem;
}
.nli-estimator-cart-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.8rem;
  gap: 0.8rem;
}
/* top-align so the × pairs with the STEPPER line (the units line below the
   stepper shouldn't pull the × down) — checkout-sidebar proportions */
.nli-estimator-cart-item-controls {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.6rem;
}
/* literal &times; character — the EXACT checkout-sidebar remove recipe
   (the old version drew the X with two rotated pseudo-element bars, which
   is why font-size tweaks in dev tools did nothing) */
.nli-estimator-cart-item-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-top: -2px;  /* center the 28px × on the 24px stepper line (measured +5px low at 3px) */
  background: transparent;
  border: none;
  color: var(--nli-color-text-muted);
  font-size: 18px;
  line-height: 1;
  font-weight: 400;
  cursor: pointer;
  padding: 0;
  border-radius: 4px;
  transition: background var(--nli-transition), color var(--nli-transition);
}
.nli-estimator-cart-item-remove:hover,
.nli-estimator-cart-item-remove:focus {
  background: var(--nli-color-error-light);
  color: var(--nli-color-error);
  outline: none;
}
/* Cart item staged for deletion (pending Update click) */
.nli-estimator-cart-item.is-pending-remove {
  opacity: 0.55;
}
.nli-estimator-cart-item.is-pending-remove .nli-estimator-cart-item-name,
.nli-estimator-cart-item.is-pending-remove .nli-estimator-cart-item-price {
  text-decoration: line-through;
}
/* ---- Modal qty picker: one size smaller than the page-level cart ---- */
#nli-shipping-estimator .nli-qty input {
  font-size: 1.3rem;
}
#nli-shipping-estimator .nli-qty button {
  font-size: 1.4rem;
}
/* ---- Collapsible accordion sections (cart + rates panes) ---- */
.nli-estimator-section {
  display: flex;
  flex-direction: column;
}
.nli-estimator-section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  margin: 0 0 1rem 0;
  background: transparent;
  border: none;
  color: var(--nli-color-text);
  font-size: 1.6rem;
  font-weight: 700;
  cursor: default;
  text-align: left;
}
.nli-estimator-section-toggle .nli-estimator-section-chevron {
  display: none;
  width: 1.4rem;
  height: 1.4rem;
  border-right: 2px solid var(--nli-color-text-secondary);
  border-bottom: 2px solid var(--nli-color-text-secondary);
  transform: rotate(45deg);
  margin-right: 0.6rem;
  transition: transform var(--nli-transition);
}
.nli-estimator-section.is-accordion-active .nli-estimator-section-toggle {
  cursor: pointer;
  padding: 0.4rem 0.6rem;
  margin: 0 -0.6rem 0.4rem -0.6rem;
  border-radius: var(--nli-radius-sm);
}
/* Intentionally no hover/focus background — the rotating chevron is
   already a strong enough affordance, and the gray panel was bleeding
   from the title all the way out to the chevron in a way that read
   like the section header had a separate "card" inside the card. */
.nli-estimator-section.is-accordion-active .nli-estimator-section-toggle:hover,
.nli-estimator-section.is-accordion-active .nli-estimator-section-toggle:focus {
  background: transparent;
  outline: none;
}
.nli-estimator-section.is-accordion-active .nli-estimator-section-chevron {
  display: inline-block;
}
.nli-estimator-section.is-collapsed .nli-estimator-section-chevron {
  transform: rotate(-45deg);
}
.nli-estimator-section-summary {
  margin-left: auto;
  margin-right: 1rem;
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--nli-color-text-secondary);
}
.nli-estimator-section-body[hidden] {
  display: none;
}
.nli-estimator-cart-pending {
  margin-top: 1.2rem;
  padding: 1rem 1.2rem;
  background: var(--nli-color-warning-light);
  border: 1px solid var(--nli-color-warning);
  border-radius: var(--nli-radius-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.nli-estimator-cart-pending p {
  margin: 0;
  font-size: 1.3rem;
  color: var(--nli-color-warning);
  font-weight: 600;
  flex: 1 1 200px;
}
.nli-estimator-cart-pending .nli-btn {
  flex: 0 0 auto;
}
.nli-estimator-cart-item-price {
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--nli-color-text);
  white-space: nowrap;
}

/* money stack on the row's right: total separated the most, then the
   each / per-unit pair close together (mirrors the cart-page Total column) */
.nli-estimator-cart-item-pricecol {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.nli-estimator-cart-item-sub {
  display: block;
  font-size: 1.2rem;
  color: var(--nli-color-text-secondary);
  line-height: 1.3;
  white-space: nowrap;
}

.nli-estimator-cart-item-pricecol .nli-estimator-cart-item-sub:first-of-type {
  margin-top: 0.55rem;
}

/* units under the modal's quantity stepper — centered beneath it */
.nli-estimator-qty-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
.nli-estimator-cart-totals {
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--nli-color-border);
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  font-size: 1.5rem;
}
.nli-estimator-empty {
  padding: 1.6rem;
  text-align: center;
  color: var(--nli-color-text-muted);
  font-size: 1.4rem;
  font-style: italic;
}

/* ---- Estimator: address pane (mirror checkout form sizing) ---- */
.nli-estimator-intro {
  margin: 0 0 1.6rem;
  padding: 1rem 1.4rem;
  background: var(--nli-color-bg-subtle, #f7f9fc);
  border-left: 3px solid var(--nli-color-primary);   /* theme navy, palette-tracked */
  border-radius: 4px;
  color: var(--nli-color-text-muted, #5f6c7b);
  font-size: 1.36rem;
  line-height: 1.45;
}
.nli-estimator-form-row {
  display: flex;
  gap: 1.2rem;
  margin-bottom: 1.2rem;
}
.nli-estimator-form-row:last-child {
  margin-bottom: 0;
}
.nli-estimator-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.nli-estimator-field-half {
  flex: 0 0 calc(50% - 0.6rem);
}
.nli-estimator-field-third {
  flex: 0 0 calc(33.333% - 0.8rem);
}
.nli-estimator-field-two-thirds {
  flex: 0 0 calc(66.666% - 0.6rem);
}
.nli-estimator-field label {
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--nli-color-text);
  margin-bottom: 0.6rem;
}
.nli-estimator-field .label-optional {
  font-weight: 400;
  color: var(--nli-color-text-muted);
}
.nli-estimator-field input[type="text"],
.nli-estimator-field input[type="email"],
.nli-estimator-field input[type="tel"],
.nli-estimator-field select {
  width: 100%;
  padding: 1rem 1.4rem;
  border: 1px solid var(--nli-color-border);
  border-radius: var(--nli-radius-sm);
  font-family: var(--nli-font);
  font-size: 1.5rem;
  color: var(--nli-color-text);
  background: var(--nli-color-card);
  transition: border-color var(--nli-transition), box-shadow var(--nli-transition);
  outline: none;
  height: auto;
  box-shadow: none;
}
.nli-estimator-field input:focus,
.nli-estimator-field select:focus {
  border-color: var(--nli-color-border-focus);
  box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.12);
}
.nli-estimator-field .input-error {
  border-color: var(--nli-color-error);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}
.nli-estimator-field .field-error {
  color: var(--nli-color-error);
  font-size: 1.2rem;
  margin-top: 0.4rem;
  min-height: 0;
}
.nli-estimator-saved-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1.4rem;
  padding: 1rem 1.2rem;
  background: var(--nli-color-primary-light);
  border-radius: var(--nli-radius-sm);
  font-size: 1.4rem;
}
.nli-estimator-saved-row select {
  flex: 1;
  border: 1px solid var(--nli-color-border);
  border-radius: var(--nli-radius-sm);
  padding: 0.6rem 1rem;
  background: #fff;
  font-size: 1.3rem;
}

/* Footer row of the address pane: primary "Get Shipping Rates" CTA on
   the left, ghost "Clear" button shoved to the far right via
   margin-left:auto so it sits in the bottom-right corner regardless of
   the primary button's width. Wraps cleanly on narrow screens. */
.nli-estimator-address-actions {
  margin-top: 1.6rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}
.nli-estimator-address-actions #nli-btn-clear-address {
  margin-left: auto;
  /* Override the default ghost transparent so the Clear button reads
     as a tangible (but secondary) control against the white address
     card — a transparent ghost was disappearing into the card. Uses
     the existing page-background token for design-system consistency
     and darkens a touch on hover for affordance. */
  background: var(--nli-color-bg);
}
.nli-estimator-address-actions #nli-btn-clear-address:hover,
.nli-estimator-address-actions #nli-btn-clear-address:focus {
  background: #e5e7eb;
  color: var(--nli-color-text);
}
@media (max-width: 480px) {
  .nli-estimator-address-actions #nli-btn-clear-address {
    margin-left: 0;
  }
}

/* ---- Estimator: shipment-details panel ----
   Mirrors /checkout/'s "Shipment Details" disclosure (see
   checkout/assets/css/checkout.css ~line 740). Numbers scaled up 1.6×
   because nli-cart.css runs on Bootstrap 3's html { font-size: 10px }
   while /checkout/ uses a 16px root, and we want both pages to render
   visually equivalent. Class names are .nli-shipment-* to avoid
   clobbering /checkout/'s .shipment-* selectors if the same DOM ever
   ends up sharing a stylesheet. */
.nli-shipment-details {
  margin-top: 1.6rem;
  border-top: 1px solid var(--nli-color-border);
  padding-top: 1.4rem;
}
.nli-shipment-details-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--nli-color-text);
  text-align: left;
  font: inherit;
  font-weight: 600;
  font-size: 1.4rem;
}
.nli-shipment-details-toggle:hover,
.nli-shipment-details-toggle:hover .nli-shipment-details-summary {
  color: var(--nli-color-primary);
}
.nli-shipment-details-summary {
  margin-left: auto;
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--nli-color-text-secondary);
  white-space: nowrap;
}
.nli-shipment-details-chevron {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  transition: transform 200ms ease;
  flex-shrink: 0;
}
.nli-shipment-details-toggle.open .nli-shipment-details-chevron {
  transform: rotate(180deg);
}
.nli-shipment-details-panel {
  margin-top: 1.2rem;
}
.nli-shipment-details-panel[hidden] {
  display: none;
}
.nli-shipment-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.2rem;
}
.nli-shipment-package-card {
  border: 1px solid var(--nli-color-border);
  border-radius: var(--nli-radius-sm);
  padding: 1.2rem 1.36rem;
  background: var(--nli-color-bg);
}
.nli-shipment-package-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.5rem;
}
.nli-shipment-package-title {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--nli-color-text);
}
.nli-shipment-package-weight {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--nli-color-primary);
  white-space: nowrap;
}
.nli-shipment-package-meta {
  font-size: 1.3rem;
  color: var(--nli-color-text-secondary);
  margin-top: 0.3rem;
}

/* ---- Estimator: rates pane ---- */
.nli-estimator-rates-status {
  text-align: center;
  padding: 2.4rem 1.6rem;
  color: var(--nli-color-text-muted);
  font-size: 1.4rem;
}
.nli-estimator-rates-status.is-loading::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 0.8rem;
  border: 2px solid var(--nli-color-border);
  border-top-color: var(--nli-color-primary);
  border-radius: 50%;
  vertical-align: middle;
  animation: nliSpin 0.8s linear infinite;
}
@keyframes nliSpin {
  to {
    transform: rotate(360deg);
  }
}
.nli-estimator-rates-error {
  padding: 1.4rem;
  border-radius: var(--nli-radius-sm);
  background: var(--nli-color-error-light);
  color: var(--nli-color-error);
  border: 1px solid #fecaca;
  font-size: 1.4rem;
  margin-bottom: 1.2rem;
}

/* ======================================================
   Shared rate UI (mirror of /checkout/ — ported from
   /checkout/assets/css/checkout.css so the modal looks
   identical to the live checkout's rate panel without
   having to load the entire checkout.css here).
   These rules are scoped under .nli-shipping-estimator.
   ====================================================== */

.nli-shipping-estimator .method-option {
  display: flex;
  align-items: center;
  padding: 1.4rem 1.6rem;
  border: 1px solid var(--nli-color-border);
  border-radius: var(--nli-radius-sm);
  margin-bottom: 0.8rem;
  cursor: pointer;
  transition: border-color var(--nli-transition), background var(--nli-transition);
  background: #fff;
}
.nli-shipping-estimator .method-option:hover {
  border-color: var(--nli-color-primary);
  background: #fafbff;
}
.nli-shipping-estimator .method-option.selected {
  border-color: var(--nli-color-primary);
  background: var(--nli-color-primary-light);
}
.nli-shipping-estimator .method-option input[type="radio"] {
  margin-right: 1.2rem;
  accent-color: var(--nli-color-primary);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.nli-shipping-estimator .method-option-info {
  flex: 1;
  min-width: 0;
}
.nli-shipping-estimator .method-option-title {
  font-weight: 500;
  font-size: 1.5rem;
}
.nli-shipping-estimator .method-option-subtitle {
  font-size: 1.3rem;
  color: var(--nli-color-text-secondary);
}
.nli-shipping-estimator .method-option-price {
  font-weight: 600;
  font-size: 1.5rem;
  margin-left: auto;
  white-space: nowrap;
}
.nli-shipping-estimator .carrier-group {
  margin-bottom: 1.6rem;
}
.nli-shipping-estimator .carrier-group:last-of-type {
  margin-bottom: 0.8rem;
}
.nli-shipping-estimator .carrier-group-header {
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--nli-color-text-secondary);
  margin: 1.2rem 0 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* "N more <Carrier> options" expander — mirrors checkout.css patterns
   (.carrier-more-wrap / .carrier-more-toggle / .carrier-more-options) so
   the estimator behaves like the live checkout for premium UPS / USPS
   services. Rem values are scaled ~1.6x because Bootstrap 3 sets the
   base html font-size to 10px on this storefront. */
.nli-shipping-estimator .carrier-more-wrap {
  margin-top: 0.4rem;
  margin-bottom: 0.8rem;
  text-align: center;
}
.nli-shipping-estimator .carrier-more-toggle {
  background: none;
  border: none;
  color: var(--nli-color-primary);
  font-size: 1.4rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  padding: 0.8rem 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.nli-shipping-estimator .carrier-more-toggle:hover {
  color: var(--nli-color-primary-dark);
}
.nli-shipping-estimator .carrier-more-chevron {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  transition: transform 200ms ease;
}
.nli-shipping-estimator .carrier-more-toggle.open .carrier-more-chevron {
  transform: rotate(180deg);
}
.nli-shipping-estimator .carrier-more-options {
  text-align: left;
  animation: nliCarrierSlideDown 200ms ease;
}
@keyframes nliCarrierSlideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* v1.11.0 fast/extras lazy-load spinner expanders. Mirrors the same
   pattern from checkout.css. cl-extras-loading is the disabled
   spinner shown during the fast-only window; cl-extras-unavailable
   is the error state after a background extras failure. */
.nli-shipping-estimator .carrier-more-toggle.cl-extras-loading,
.nli-shipping-estimator .carrier-more-toggle[disabled] {
  cursor: default;
  color: #8a8a8a;
  opacity: 0.85;
}
.nli-shipping-estimator .carrier-more-toggle.cl-extras-loading:hover {
  color: #8a8a8a;
}
.nli-shipping-estimator .carrier-more-toggle.cl-extras-unavailable {
  color: #8a8a8a;
  font-style: italic;
}

/* Pure-CSS inline spinner. Used in the loading-more-options
   expander during the fast-only window. CSS-only so it works
   even if Font Awesome isn't loaded (parity with checkout).
   currentColor inherits the dim-loading text color. */
.nli-shipping-estimator .cl-spinner-inline {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: cl-spinner-inline-spin 0.7s linear infinite;
  vertical-align: -2px;
  margin-left: 4px;
}
@keyframes cl-spinner-inline-spin {
  to { transform: rotate(360deg); }
}
.nli-shipping-estimator .method-option.recommended {
  position: relative;
  margin-top: 1.36rem;
  border-color: #d6ba5e;
}
.nli-shipping-estimator .method-option.recommended:hover {
  border-color: #c7ab4f;
}
.nli-shipping-estimator .method-option.recommended.selected {
  border-color: #c7ab4f;
  box-shadow: 0 0 0 1px rgba(228, 203, 117, 0.45);
}
.nli-shipping-estimator .rate-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.26rem;
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.8rem;
  border-radius: 999px;
  margin-left: 0.8rem;
  vertical-align: middle;
}
.nli-shipping-estimator .rate-badge.best-value-banner {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0.64rem 1.52rem;
  min-width: 110px;
  background: #e4cb75;
  color: #000;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.12);
}
.nli-shipping-estimator .address-validation {
  display: flex;
  gap: 1.2rem;
  padding: 1.6rem;
  background: var(--nli-color-primary-light);
  border-radius: var(--nli-radius-sm);
  border: 1px solid #93c5fd;
  margin-top: 1.6rem;
}
.nli-shipping-estimator .address-validation-warning {
  background: var(--nli-color-warning-light);
  border-color: #fcd34d;
}
.nli-shipping-estimator .address-validation-warning .address-validation-icon {
  color: var(--nli-color-warning);
}
.nli-shipping-estimator .address-validation-icon {
  color: var(--nli-color-primary);
  flex-shrink: 0;
  padding-top: 2px;
}
.nli-shipping-estimator .address-validation-title {
  font-weight: 600;
  font-size: 1.4rem;
  margin-bottom: 0.4rem;
}
.nli-shipping-estimator .address-validation-suggested {
  font-size: 1.4rem;
  color: var(--nli-color-text);
  margin-bottom: 1.2rem;
}
.nli-shipping-estimator .address-validation-actions {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}
.nli-shipping-estimator .btn-primary {
  display: inline-flex;
  align-items: center;
  padding: 0.8rem 1.6rem;
  background: var(--nli-color-primary);
  color: #fff;
  border: none;
  border-radius: var(--nli-radius-sm);
  font-family: var(--nli-font);
  font-size: 1.4rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.nli-shipping-estimator .btn-primary:hover {
  background: var(--nli-color-primary-dark);
  color: #fff;
}
.nli-shipping-estimator .btn-secondary {
  display: inline-flex;
  align-items: center;
  padding: 0.8rem 1.6rem;
  background: transparent;
  color: var(--nli-color-primary);
  border: 1px solid var(--nli-color-primary);
  border-radius: var(--nli-radius-sm);
  font-family: var(--nli-font);
  font-size: 1.4rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.nli-shipping-estimator .btn-secondary:hover {
  background: var(--nli-color-primary-light);
}

/* ======================================================
   Mobile: full-screen modal
   ====================================================== */
@media (max-width: 767px) {
  .nli-modal-fullscreen-mobile .modal-dialog {
    position: fixed;
    inset: 0;
    margin: 0;
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
  }
  .nli-modal-fullscreen-mobile .modal-content {
    height: 100%;
    border-radius: 0;
    display: flex;
    flex-direction: column;
  }
  .nli-modal-fullscreen-mobile .modal-header {
    flex: 0 0 auto;
    position: sticky;
    top: 0;
    z-index: 5;
  }
  .nli-modal-fullscreen-mobile .modal-body {
    flex: 1 1 auto;
    max-height: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nli-modal-fullscreen-mobile .modal-footer {
    flex: 0 0 auto;
    position: sticky;
    bottom: 0;
    z-index: 5;
  }
  .nli-estimator-grid {
    grid-template-columns: 1fr;
  }
  /* On mobile we want: cart → address form → rates pane (so the user
     fills the form, then sees results below). The desktop markup nests
     cart + rates inside .nli-estimator-col, which would stack as
     cart → rates → address. display:contents promotes col children to
     direct grid items so we can re-order them with `order`. */
  .nli-estimator-col {
    display: contents;
  }
  #nli-estimator-cart-pane    { order: 1; }
  #nli-estimator-address-pane { order: 2; }
  #nli-estimator-rates-pane   { order: 3; }
  .nli-estimator-form-row {
    flex-direction: column;
    gap: 0.8rem;
  }
  .nli-estimator-form-row .nli-estimator-field-half,
  .nli-estimator-form-row .nli-estimator-field-third,
  .nli-estimator-form-row .nli-estimator-field-two-thirds {
    flex: 1 1 auto;
  }
  .nli-shipping-estimator .modal-footer {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .nli-shipping-estimator .modal-footer .nli-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Tablet: keep two columns but allow them to compress. Bumped the left
   column slightly because it also holds the shipping options pane now. */
@media (min-width: 768px) and (max-width: 991px) {
  .nli-estimator-grid {
    grid-template-columns: minmax(260px, 42%) 1fr;
    gap: 1.2rem;
  }
  .nli-estimator-col {
    gap: 1.2rem;
  }
}

/* Google Places autocomplete dropdown — sit above the BS3 modal stacking
   context so the suggestions don't disappear behind it. */
.pac-container {
  z-index: 2147483646 !important;
}

/* Mobile/tablet: keep the Norman AI chat widget below our shipping
   estimator modal. The widget defaults to z-index 99999 (#norman-bubble,
   #norman-chat, #norman-minimized) and 100000 (#norman-tryme), so on
   small screens — where the modal goes full-screen and the floating
   "Ask Norman" bubble would otherwise punch through the modal content
   in the bottom-left corner — we lift the modal + backdrop above those.
   Desktop (>=992px) is unaffected because the bubble lives in the
   bottom-left gutter and doesn't overlap the centered 1150px modal. */
@media (max-width: 991px) {
  .nli-shipping-estimator {
    z-index: 100100;
  }
  body.modal-open .modal-backdrop {
    z-index: 100099;
  }
}

/* =============================================================================
   Stylized "Remove this item?" confirm popup (2026-06-30, owner)
   Site-styled overlay that replaces the native window.confirm() on the cart
   page AND in the estimate-shipping modal — mirrors the checkout's remove-toast.
   Anchored (position:absolute, inset:0) over the item card/row it belongs to.
   ============================================================================= */
.nli-remove-confirm {
  position: absolute;
  inset: 0;
  z-index: 30;
  /* !important: some cart/estimator card rules cascade a block display onto
     descendant divs, which knocked the content to the top-left. Force the
     flex centering so the popup is centered V+H over the card. (2026-06-30) */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.97);
  border-radius: 10px;
  box-shadow: 0 8px 22px -10px rgba(11, 34, 56, 0.35);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.nli-remove-confirm.show { opacity: 1; }
.nli-remove-confirm p {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  text-align: center;
  line-height: 1.2;
}
.nli-remove-confirm__actions { display: flex !important; gap: 14px; }
.nli-rc-btn {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 8px;
  padding: 11px 22px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.1;
  white-space: nowrap;
  cursor: pointer;
}
.nli-rc-no { background: #fff; color: #1c3d5a; border: 1px solid #cbd5e1; }
.nli-rc-yes { background: #1c3d5a; color: #fff; border: 1px solid #1c3d5a; }

/* =============================================================================
   Estimate-modal carrier-fail note + Retry (2026-06-30) — parity with the
   checkout's "USPS temporarily unavailable" note. Amber heads-up, navy Retry.
   ============================================================================= */
.nli-estimator-fail-note {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding: 11px 13px;
  background: #fffbeb;
  border: 1px solid #f1cd76;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.35;
  color: #1e293b;
}
.nli-estimator-fail-note__ic { flex: 0 0 16px; color: #d97706; }
.nli-estimator-fail-note__tx { flex: 1 1 auto; }
.nli-estimator-fail-note__retry {
  flex: 0 0 auto;
  -webkit-appearance: none;
  appearance: none;
  background: #1c3d5a;
  color: #ffffff;
  border: 0;
  border-radius: 6px;
  padding: 9px 17px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.1;
  cursor: pointer;
  white-space: nowrap;
}
.nli-estimator-fail-note__retry:hover { background: #0b2238; }