.northern-quote-confirm {
  background: #e7e7cb; /* subtle legacy-like background */
  padding: 16px;
  border-radius: 8px;
}
.northern-quote-confirm .qi-item {
  background: #f8f9fa;
}
.northern-quote-confirm .quote-totals {
  background: #0f2f2f;
  color: #fff;
}
.northern-quote-confirm .quote-policies {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px 20px;
}
.northern-quote-confirm .quote-policies ul { margin: 8px 0 0 20px; padding: 0; }
.northern-quote-confirm .quote-policies li { margin: 6px 0; }

/* Reservation confirmation styles – mirror quote confirmation */
.northern-reservation-confirm {
  background: #e7e7cb;
  padding: 16px;
  border-radius: 8px;
}
.northern-reservation-confirm .qi-item {
  background: #f8f9fa;
}
.northern-reservation-confirm .quote-totals {
  background: #0f2f2f;
  color: #fff;
}
/* Northern Outdoors Booking Plugin - Public Styles */
/* Cart count shortcode - inherit theme link color */
.northern-cart-count-link,
.northern-cart-count-link:visited,
.northern-cart-count-link:hover,
.northern-cart-count-link:focus { color: inherit !important; text-decoration: none; }
.northern-cart-count { color: inherit !important; font-weight: 600; margin-left: 0.15em; }

.northern-widget {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: #1f2937;
}

/* Search Widget Styles */
.northern-search-wrapper {
    background: #fff;
    border-radius: 12px;
    padding: 16px; /* compact */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    margin: 0 auto 20px auto;
    max-width: 920px; /* keep it from stretching too wide */
}

.northern-search-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto; /* checkin | checkout | guests | button */
    gap: 12px; /* tighter */
    align-items: end;
}

.northern-search-grid .northern-datepicker,
.northern-search-grid .northern-guests-trigger,
.northern-search-grid .northern-button {
    box-sizing: border-box;
}

.northern-search-grid .northern-button {
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 8px;
}

/* Per Northern (May 2026): make the "Add guests" trigger field render
   identically to the "Add dates" inputs (same border, radius, padding,
   transition, width) and let its placeholder text read like a normal
   input placeholder rather than a bold button label. */
.northern-search-grid .northern-datepicker,
.northern-search-grid .northern-guests-trigger {
    width: 100%;
    border: 1px solid #666;
    border-radius: 3px;
    padding: 0.5rem 1rem;
    background: #fff;
    background-image: none;
    box-shadow: none;
    transition: all 0.3s;
    font-size: 14px;
    color: #374151;
}

.northern-search-grid .northern-guests-trigger {
    font-weight: 400;
}

.northern-search-grid .northern-guests-trigger .guests-placeholder,
.northern-search-grid .northern-guests-trigger .guests-count {
    font-weight: 400;
    color: #6b7280;
}

@media (max-width: 900px) {
  .northern-search-grid { grid-template-columns: 1fr 1fr; }
  /* place button beside Guests on small screens */
  .northern-search-grid .search-guests { grid-column: 1 / 2; }
  .northern-search-grid .search-submit { grid-column: 2 / 3; align-self: end; }
}

/* Ensure datepicker sits above headers/menus */
.ui-datepicker { z-index: 10000 !important; }
.ui-datepicker * { pointer-events: auto; }

/* jQuery UI Datepicker theme overrides for readability */
.ui-datepicker {
    /* Force compact popover regardless of theme resets */
    width: auto !important; /* prevent full-width */
    /* do NOT force display here; allow jQuery UI to toggle visibility */
    min-width: 280px !important;
    max-width: 320px !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    color: #111827;
}

.ui-datepicker .ui-datepicker-header {
    background: #f9fafb !important;
    border: none !important;
    border-bottom: 1px solid #e5e7eb !important;
    border-radius: 8px 8px 0 0 !important;
    padding: 8px 12px !important;
}

.ui-datepicker .ui-datepicker-title {
    color: #111827 !important;
    font-weight: 600 !important;
}

/* Position prev/next controls in the datepicker header */
.ui-datepicker .ui-datepicker-header { position: relative !important; min-height: 44px !important; }
.ui-datepicker .ui-datepicker-prev { position: absolute !important; left: 8px !important; top: 50% !important; transform: translateY(-50%) !important; float: none !important; font-size: 12px !important; }
.ui-datepicker .ui-datepicker-next { position: absolute !important; right: 8px !important; top: 50% !important; transform: translateY(-50%) !important; float: none !important; font-size: 12px !important; }
.ui-datepicker .ui-datepicker-title { text-align: center !important; margin: 0 80px !important; }

.ui-datepicker table { width: 100% !important; font-size: 14px !important; margin: 0 !important; }
.ui-datepicker th { padding: 8px !important; color: #6b7280 !important; font-weight: 500 !important; }
.ui-datepicker td { padding: 0 !important; }

.ui-datepicker .ui-state-default,
.ui-widget-content .ui-state-default {
    display: block !important;
    padding: 8px !important;
    background: #ffffff !important;
    border: 1px solid transparent !important;
    color: #111827 !important;
    border-radius: 6px !important;
    text-align: center !important;
}

.ui-datepicker .ui-state-hover,
.ui-widget-content .ui-state-hover {
    background: #f0f7f5 !important;
    border-color: #a7d5c8 !important;
}

.ui-datepicker .ui-state-active,
.ui-widget-content .ui-state-active {
    background: #4B9384 !important;
    color: #ffffff !important;
    border-color: #044437 !important;
}

.ui-datepicker .ui-state-disabled { opacity: 0.45 !important; }

/* Per Northern (May 2026): on small screens the jQuery UI datepicker
   popover, which is positioned `absolute` relative to the input, was
   getting clipped on Emily's iPhone -- the right edge of the calendar
   ran off-screen because `input.offset().left + 320px` exceeded the
   visual viewport width, and jQuery UI's right-edge clamp didn't fire
   reliably (it reads documentElement.clientWidth which on iOS Safari
   can return the layout viewport rather than the visual viewport).
   The site's mobile sticky header was also occluding the picker's
   top when jQuery UI flipped it above the input.

   Solution: at <=599px we force the popover to a fixed, viewport-
   centered modal. This sidesteps positioning entirely -- the picker
   can never fall off the right edge, can never hide behind the sticky
   header, and it gives mobile users a roomier tap target similar to
   what they're used to from AirBnB. Above 600px the default popover
   behavior is unchanged. */
@media (max-width: 599px) {
    /* `.ui-datepicker` selector duplicated for specificity to win against
       jQuery UI's own inline styles (top/left) without resorting to the
       id selector, which only applies to the body-appended instance. */
    .ui-datepicker.ui-datepicker {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        width: min(340px, calc(100vw - 32px)) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 32px) !important;
        max-height: calc(100vh - 64px) !important;
        max-height: calc(100dvh - 64px) !important; /* dynamic viewport on iOS */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* The popover is now wider, so we can give the prev/next arrows
       larger tap targets and let the month/year selects breathe.
       Also bump the selects to 16px so iOS won't auto-zoom the page
       when they're focused. */
    .ui-datepicker .ui-datepicker-title { margin: 0 64px !important; }
    .ui-datepicker .ui-datepicker-prev,
    .ui-datepicker .ui-datepicker-next { font-size: 16px !important; padding: 6px !important; }
    .ui-datepicker select { font-size: 16px !important; }
    .ui-datepicker table { font-size: 15px !important; }
    .ui-datepicker .ui-state-default,
    .ui-widget-content .ui-state-default { padding: 10px !important; }
    /* Bump the trigger inputs to 16px on mobile too, so iOS doesn't
       zoom the page when they're focused. (They're readonly, which
       usually suppresses the zoom, but this is belt-and-suspenders
       and keeps placeholder text more legible.) */
    .northern-datepicker { font-size: 16px; }
}

.search-field {
    display: flex;
    flex-direction: column;
}

.search-field label {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    margin-bottom: 6px;
    color: #374151;
    font-size: 13px;
}

.northern-select,
.northern-datepicker,
.northern-guests-trigger {
    padding: 8px 10px; /* compact */
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: #fff;
}

.northern-select:focus,
.northern-datepicker:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.northern-guests-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    text-align: left;
}

.northern-guests-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    z-index: 10000; /* ensure it sits above theme elements */
    margin-top: 4px;
    padding: 16px;
    width: fit-content; /* avoid stretching across container */
}

.search-field.search-guests { position: relative; }

.guests-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.guests-row:last-child {
    margin-bottom: 0;
}

.guests-label {
    flex: 1;
}

.guests-label strong {
    display: block;
    margin-bottom: 4px;
}

.guests-sublabel {
    color: #6b7280;
    font-size: 12px;
}

.guests-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.guests-minus,
.guests-plus {
    -webkit-appearance: none;
    appearance: none; /* neutralize theme button styles */
    box-shadow: none;
    padding: 0;
    line-height: 1;
    width: 32px;
    height: 32px;
    border: 1px solid #d1d5db;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: background-color 0.2s;
}

.guests-minus:hover,
.guests-plus:hover {
    background: #f3f4f6;
}

.guests-input {
    width: 60px;
    text-align: center;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 4px;
}

.northern-button {
    padding: 12px 24px;
    border: 1px solid transparent;
    border-radius: 5px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    box-sizing: border-box;
}

/* Primary button: <button> elements inherit from Elementor kit.
   Fallback for <a> and <span> which Elementor kit doesn't target. */
a.northern-button-primary,
span.northern-button-primary {
    background: linear-gradient(180deg, #4B9384 0%, #044437 100%);
    border-color: #4B9384;
    color: #fff;
    box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.5);
}

a.northern-button-primary:hover {
    background: linear-gradient(180deg, #5aa898 0%, #065a49 100%);
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.45);
}

.northern-button.northern-button-secondary,
button.northern-button.northern-button-secondary,
a.northern-button.northern-button-secondary,
span.northern-button.northern-button-secondary {
    background: #fff !important;
    background-color: #fff !important;
    background-image: none !important;
    color: #044437 !important;
    border: 1px solid #4B9384 !important;
    font-weight: 600;
    box-shadow: none !important;
}

.northern-button.northern-button-secondary:hover,
button.northern-button.northern-button-secondary:hover,
a.northern-button.northern-button-secondary:hover {
    background: #f0f7f5 !important;
    background-color: #f0f7f5 !important;
    background-image: none !important;
    color: #044437 !important;
}

.northern-button-text {
    background: transparent;
    color: #044437;
    text-decoration: underline;
}

.northern-button-text:hover {
    color: #065a49;
}

.northern-button-block {
    display: flex;
    width: 100%;
    justify-content: center;
}

.northern-button-large {
    padding: 16px 32px;
    font-size: 18px;
}

/* Results Styles */
.northern-results {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    margin-bottom: 24px;
}

.northern-results .results-heading h2 {
    margin: 0 0 16px 0;
    font-size: 20px;
    font-weight: 600;
    color: #1f2937;
}

.northern-results .results-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #374151;
}

.northern-results .results-error {
    background: #fef2f2;
    border-left: 4px solid #ef4444;
    color: #991b1b;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 12px;
}

.northern-results .results-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.northern-results .result-item { display:grid; grid-template-columns: 1fr 120px auto; align-items:center; column-gap:12px; padding:16px; border:1px solid #e5e7eb; border-radius:8px; background:#fff; }
.northern-results .result-item.has-thumb { grid-template-columns: 120px 1fr 120px auto; }
.northern-results .ri-thumb { width:120px; height:80px; overflow:hidden; border-radius:6px; flex-shrink:0; }
.northern-results .ri-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.northern-results .ri-name { overflow-wrap:anywhere; }
.northern-results .ri-price { text-align:right; }

@media (max-width: 900px) and (min-width: 601px) {
    .northern-results .result-item.has-thumb { grid-template-columns: 80px 1fr 100px auto; }
    .northern-results .ri-thumb { width:80px; height:60px; }
}

.northern-results .ri-name {
    font-weight: 500;
    color: #1f2937;
}

/* Add-to-trip buttons: visual style from Elementor kit; we set sizing only */
.northern-results .ri-add,
.northern-results .ri-add-combo {
    padding: 10px 16px;
    cursor: pointer;
}
.badge-onreq { display:inline-block; margin-left:8px; padding:2px 8px; font-size:12px; color:#92400e; background:#fef3c7; border:1px solid #f59e0b; border-radius:9999px; vertical-align:middle; cursor:pointer; }
.badge-onreq:focus { outline:2px solid #f59e0b; outline-offset:2px; }
/* Larger badge when used in cart */
.cart-item-details .badge-onreq { margin:6px 0; padding:4px 10px; font-size:13px; display:inline-flex; align-items:center; gap:6px; }
.cart-item-details .badge-onreq::before { content:'!'; font-weight:700; }
/* Compact icon-only badge at small widths (summary calendar only) */
@media (max-width: 560px) {
  .northern-summary-layout .badge-onreq { width:18px; height:18px; padding:0; font-size:0; display:inline-flex; align-items:center; justify-content:center; margin-left:6px; }
  .northern-summary-layout .badge-onreq::before { content:'!'; font-size:12px; font-weight:700; color:#92400e; line-height:1; }
}

/* On-request metadata row (TBD price + badge) below item name in search results */
.ri-onreq-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.ri-onreq-meta .badge-onreq { margin-left: 0; }
/* "Price at confirmation" TBD indicator */
.ri-price-tbd {
  display: inline-block;
  font-size: 13px;
  font-style: italic;
  color: #92400e;
  background: #fef3c7;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
.cart-tbd-note {
  margin-top: 10px;
  padding: 10px 12px;
  font-size: 13px;
  color: #92400e;
  background: #fef3c7;
  border-left: 3px solid #f59e0b;
  border-radius: 4px;
  line-height: 1.4;
}

/* Hover handled by Elementor kit */

/* "In Cart" state for all add-to-trip buttons */
.nb-in-cart,
.nb-in-cart:hover,
.nb-in-cart:disabled {
    background: #044437 !important;
    border-color: #044437 !important;
    color: #fff !important;
    box-shadow: none !important;
    cursor: default !important;
    opacity: 0.85;
}

/* Per-person-per-night sub-line below total price */
.ri-ppn { font-size:13px; color:#6b7280; margin-top:2px; }

/* "Total for N adults, M children" caption shown under the total in
   availability/summary calendars so guests know the price is for their
   selected party (Northern charges per unit, not per person). */
.ncal-party-note {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
    line-height: 1.3;
}

/* Tier section headings in lodging results */
.results-tier-heading {
    font-size: 15px;
    font-weight: 600;
    color: #374151;
    margin: 16px 0 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid #e5e7eb;
}

/* Results: compact time-picker for activities with multiple slots */
.northern-results .ri-times {
    margin-top: 6px;
}
.northern-results .ri-times label {
    font-size: 12px;
    color: #6b7280;
    margin-right: 6px;
}
.northern-results .ri-time {
    display: inline-block;
    width: auto;
    max-width: 180px;
    min-width: 96px;
    padding: 4px 6px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    font-size: 14px;
}

/* Modal for lodging details */
.nb-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: none; /* toggled to flex via JS */
    align-items: center;
    justify-content: center;
    z-index: 11000;
}

/* Per Northern (May 2026): when a service description was long, the modal's
   scroll worked but had no visible affordance. Refactored so the header and
   action row are pinned (flex column with a scrollable body in the middle),
   added an always-visible thin scrollbar, and layered scroll-shadow gradients
   on top + bottom of the body so users can see at a glance that more text
   is hiding below the fold. */
.nb-modal {
    background: #fff;
    border-radius: 12px;
    width: min(720px, 90vw);
    max-height: 85vh;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden; /* clip rounded corners; body owns the scroll */
}

.nb-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    flex: 0 0 auto;
    background: #fff;
}

.nb-modal-header h3 { margin: 0; font-size: 18px; }
.nb-modal-close { background: none; border: none; font-size: 20px; cursor: pointer; }

.nb-modal-body {
    padding: 16px 20px;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    /* Layered scroll shadows: white "covers" pinned to top/bottom of the
       viewport (background-attachment: local), with darker shadows behind
       them attached to the scrolling content. As the content scrolls, the
       cover slides away and the shadow becomes visible, signaling overflow.
       Technique credit: Lea Verou. */
    background:
        /* top cover */
        linear-gradient(#fff 30%, rgba(255,255,255,0)) center top,
        /* bottom cover */
        linear-gradient(rgba(255,255,255,0), #fff 70%) center bottom,
        /* top shadow */
        radial-gradient(farthest-side at 50% 0, rgba(0,0,0,0.18), rgba(0,0,0,0)) center top,
        /* bottom shadow */
        radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,0.18), rgba(0,0,0,0)) center bottom;
    background-repeat: no-repeat;
    background-size: 100% 28px, 100% 28px, 100% 14px, 100% 14px;
    background-attachment: local, local, scroll, scroll;
    /* Always-visible thin scrollbar so the affordance survives macOS overlay scrollbars */
    scrollbar-width: thin;
    scrollbar-color: #9ca3af #f3f4f6;
}
.nb-modal-body::-webkit-scrollbar { width: 10px; }
.nb-modal-body::-webkit-scrollbar-track { background: #f3f4f6; border-radius: 0 12px 0 0; }
.nb-modal-body::-webkit-scrollbar-thumb { background: #9ca3af; border-radius: 6px; border: 2px solid #f3f4f6; }
.nb-modal-body::-webkit-scrollbar-thumb:hover { background: #6b7280; }
.nb-modal-body img { float: left; width: 220px; height: auto; border-radius: 8px; object-fit: cover; margin: 0 16px 12px 0; }
.nb-modal-body.no-image img { display: none; }
.nb-modal-body::after { content: ''; display: block; clear: both; }

.nb-modal-actions {
    padding: 12px 20px 16px;
    flex: 0 0 auto;
    border-top: 1px solid #e5e7eb;
    background: #fff;
}
.nb-modal-actions a { color: #2563eb; text-decoration: underline; }
.nb-modal-actions:empty,
.nb-modal-actions:has(> a[style*="display: none"]),
.nb-modal-actions:has(> a[style*="display:none"]) { border-top: 0; padding-top: 0; }

.ri-info-link { margin-left: 8px; font-size: 13px; color: #2563eb; text-decoration: underline; cursor: pointer; }

/* Cart Widget Styles */
.northern-cart-widget {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* Cart summary alignment */
.northern-cart-widget .cart-summary .summary-row {
    display: grid;
    grid-template-columns: 1fr auto; /* label | value */
    align-items: center;
    gap: 12px;
    padding: 6px 0;
}
.northern-cart-widget .cart-summary .summary-row .summary-label {
    color: #374151;
}
.northern-cart-widget .cart-summary .summary-row .summary-value {
    text-align: right;
    color: #111827;
}
.northern-cart-widget .cart-summary {
    max-width: 520px; /* compact block like legacy */
    margin-left: auto; /* right-justify within container */
    margin-right: 0;
    border: 1px solid #e5e7eb; /* subtle frame */
}
@media (max-width: 640px) {
  .northern-cart-widget .cart-summary { max-width: 100%; }
}
.northern-cart-widget .cart-summary .promo-inline {
    grid-column: 1 / -1; /* span both columns */
    justify-content: flex-start;
}
.northern-cart-widget .cart-summary .promo-inline input[name="promo_code"] {
    width: 200px;
    margin-right: 10px;
    /* Per Northern (May 2026): unify the promo placeholder/typed-text font
       so it matches the rest of the cart vocabulary. */
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 14px;
}
.northern-cart-widget .cart-summary .promo-inline input[name="promo_code"]::placeholder {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 14px;
}

/* Marker rendered next to "Trip Cancellation Protection" in the cart fee
   list when decline is enabled, paired with a "* Optional. Proceed to
   Checkout to decline protection." footnote. */
.northern-cart-widget .insurance-optional-marker {
    color: #b45309;
    margin-left: 2px;
    font-weight: 700;
}
.northern-cart-widget .cart-insurance-optional-note {
    line-height: 1.4;
}

/* Per Northern (May 2026): on the checkout page, the dollar amount in the
   "Amount Due Today" line should match the cart total styling on the prior
   page (Bitter 18px / 600). */
.northern-checkout #amount-due-row .amount-due-value,
.northern-checkout-shortcode #amount-due-row .amount-due-value,
#amount-due-row .amount-due-value {
    font-family: 'Bitter', serif;
    font-size: 18px;
    font-weight: 600;
}

/* Per Northern (May 2026): all action buttons in the cart drawer should
   share Bitter 14px and consistent padding (Clear Itinerary,
   Proceed to Checkout, Save as Quote, Add Promo). */
.northern-cart-widget .cart-actions .northern-button,
.northern-cart-widget .cart-actions .northern-button-small,
.northern-cart-widget .cart-summary .promo-inline .northern-button,
.northern-cart-widget .cart-summary .promo-inline .promo-apply {
    font-family: 'Bitter', serif;
    font-size: 14px;
    padding: 8px 14px;
    line-height: 1.2;
}

.cart-header {
    padding: 16px 20px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
}
.cart-title-badge {
    display: inline-block;
    margin-left: 8px;
    background: #e5e7eb;
    color: #374151;
    border-radius: 9999px;
    padding: 2px 8px;
    font-size: 12px;
}

/* removed separate cart-count */

.cart-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #6b7280;
}

.cart-body {
    padding: 20px;
}

.cart-empty {
    text-align: center;
    padding: 40px 20px;
}

.cart-empty svg {
    color: #d1d5db;
    margin-bottom: 16px;
}

.cart-empty p {
    margin: 0 0 8px 0;
    color: #6b7280;
}

.cart-empty-subtext {
    font-size: 14px;
    color: #9ca3af;
}

.cart-items {
    margin-bottom: 20px;
}

.cart-item {
    display: grid;
    grid-template-columns: 1fr 150px auto; /* details | price | remove */
    align-items: center;
    column-gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid #f3f4f6;
}

.cart-item:last-child {
    border-bottom: none;
}

.cart-item-icon { display: none; }

.cart-item-details {
    flex: 1;
}

.cart-item-title {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 500;
}

.cart-item-date,
.cart-item-quantity {
    margin: 0 0 4px 0;
    font-size: 14px;
    color: #6b7280;
}

.cart-item-time {
    color: #4B9384;
    font-size: 14px;
    font-weight: 500;
}

.cart-item-price {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    text-align: right; /* align with summary currency column */
}

.cart-item-remove,
button.cart-item-remove {
    background: #fff !important;
    background-image: none !important;
    border: 1px solid #4B9384 !important;
    border-radius: 5px;
    cursor: pointer;
    padding: 6px 12px;
    color: #044437 !important;
    font-weight: 600;
    font-size: 14px;
    box-shadow: none !important;
    transition: background-color 0.2s;
}

.cart-item-remove:hover,
button.cart-item-remove:hover {
    background: #f0f7f5 !important;
    background-image: none !important;
    color: #044437 !important;
}

.cart-item-edit {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.cart-item-edit label {
    font-size: 12px;
    color: #6b7280;
}
.cart-item-edit input[type="number"] {
    width: 64px;
    padding: 4px;
    font-size: 13px;
}
.cart-item-edit button {
    padding: 4px 10px;
    font-size: 13px;
}

@media (max-width: 640px) {
    .cart-item {
        grid-template-columns: 1fr auto;
        row-gap: 8px;
    }
    .cart-item-details { grid-column: 1 / -1; }
    .cart-item-edit { grid-column: 1 / -1; }
    .cart-item-price { font-size: 14px; }
    .northern-cart-widget .cart-summary .promo-inline {
        flex-wrap: wrap;
    }
    .northern-cart-widget .cart-summary .promo-inline input[name="promo_code"] {
        width: 100%;
        max-width: none;
        flex: 1 1 auto;
    }
    .northern-cart-widget .cart-summary .promo-inline .promo-apply {
        padding: 6px 12px;
        font-size: 13px;
        white-space: nowrap;
    }
}

.cart-summary {
    margin-bottom: 20px;
    padding: 16px;
    background: #f9fafb;
    border-radius: 8px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.summary-row:last-child {
    margin-bottom: 0;
}

.summary-label {
    font-size: 14px;
    color: #6b7280;
}

.summary-value {
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
}

/* Savings tip emphasis */
.northern-cart-widget .cart-summary .cart-savings-row { grid-column: 1 / -1; }
.northern-cart-widget .cart-summary .cart-savings-row .summary-label {
    background: #ecfdf5;
    border-left: 4px solid #10b981;
    padding: 8px 10px;
    border-radius: 6px;
    color: #065f46;
    font-weight: 700;
}
.northern-cart-widget .cart-summary .cart-savings-row .cart-savings {
    display: block;
    margin-top: 4px;
    font-weight: 700;
}

.summary-total .summary-label,
.summary-total .summary-value {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
}
.summary-total {
    border-top: 1px solid #e5e7eb;
    padding-top: 8px;
    margin-top: 4px;
}

.cart-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cart-actions-compact { flex-direction: row; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.northern-button-small { padding: 8px 14px; font-size: 14px; }

/* Weekend Rule Status */
.weekend-rule-status {
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    border-left: 4px solid;
}

.weekend-rule-status.warning {
    background: #fef3c7;
    border-color: #f59e0b;
}

.weekend-rule-status.satisfied {
    background: #d1fae5;
    border-color: #10b981;
}

.rule-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.rule-header h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.rule-progress {
    margin-bottom: 8px;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.progress-fill {
    height: 100%;
    background: #10b981;
    transition: width 0.3s ease;
}

.progress-text {
    margin: 0;
    font-size: 12px;
    color: #6b7280;
}

.rule-message {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
}

.rule-message.warning {
    color: #92400e;
}

.rule-message.success {
    color: #065f46;
}

/* Checkout Styles */
.northern-checkout-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    max-width: 1200px;
    margin: 0 auto;
}

.northern-order-summary {
    background: #f9fafb;
    padding: 24px;
    border-radius: 12px;
    height: fit-content;
}

.northern-order-summary h2 {
    margin: 0 0 20px 0;
    font-size: 20px;
    font-weight: 600;
}

.order-summary-items {
    margin-bottom: 20px;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px 0;
    border-bottom: 1px solid #e5e7eb;
}

.summary-item:last-child {
    border-bottom: none;
}

.item-header h4 {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 500;
}

.item-details p {
    margin: 0 0 4px 0;
    font-size: 14px;
    color: #6b7280;
}

.item-price {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    text-align: right;
}

.order-summary-totals {
    border-top: 1px solid #e5e7eb;
    padding-top: 16px;
}

.total-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.total-final {
    border-top: 1px solid #e5e7eb;
    padding-top: 12px;
    margin-top: 12px;
}

.northern-checkout-form {
    background: #fff;
    padding: 32px;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.northern-checkout-title {
    font-family: 'Bitter', serif;
    font-size: 28px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 20px 0;
}
.northern-checkout-section-title {
    font-family: 'Bitter', serif;
    font-size: 20px;
    font-weight: 600;
    color: #1f2937;
    margin: 32px 0 16px 0;
    padding: 16px 0 0 0;
    border-top: 1px solid #e5e7eb;
}

.form-section {
    margin-bottom: 32px;
}

.form-section h2 {
    margin: 0 0 20px 0;
    font-size: 20px;
    font-weight: 600;
    color: #1f2937;
}

.form-row {
    margin-bottom: 16px;
}

.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-row-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}

.form-field {
    display: flex;
    flex-direction: column;
}

.form-field label {
    font-weight: 500;
    margin-bottom: 8px;
    color: #374151;
    font-size: 14px;
}

.form-field input,
.form-field select,
.form-field textarea {
    padding: 12px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 16px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
}

.checkbox-label input[type="checkbox"] {
    margin: 0;
    width: 16px;
    height: 16px;
}

.promo-code-field {
    display: flex;
    gap: 8px;
}

.promo-code-field input {
    flex: 1;
}

.form-actions {
    border-top: 1px solid #e5e7eb;
    padding-top: 24px;
    text-align: center;
}

.secure-notice {
    margin: 16px 0 0 0;
    font-size: 14px;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .northern-search-grid {
        grid-template-columns: 1fr;
    }

    .form-row-2,
    .form-row-3 {
        grid-template-columns: 1fr;
    }

    .northern-checkout-container {
        grid-template-columns: 1fr;
    }

    .northern-order-summary {
        order: 2;
    }

    .northern-checkout-form {
        order: 1;
    }
}

/* Loading Spinner */
.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #f3f4f6;
    border-top: 2px solid #2563eb;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    display: inline-block;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Alert Styles */
.northern-alert {
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    border-left: 4px solid;
}

.northern-alert-error {
    background: #fef2f2;
    border-color: #ef4444;
    color: #991b1b;
}

/* Responsive Design Enhancements */
@media (max-width: 640px) {
    .northern-widget {
        padding: 16px;
    }

    .northern-search-wrapper {
        padding: 16px;
    }

    .cart-body {
        padding: 16px;
    }

    .northern-checkout-form {
        padding: 20px;
    }

    /* Grid reflow for results list to avoid squishing on small screens.
       Give the item name the full available width on row 1, and put the
       price + action button together on row 2. This mirrors the landscape
       layout's readability instead of cramming the name into a narrow
       middle column next to the Add-to-Trip button. */
    .northern-results .result-item {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "name  name"
            "price button";
        row-gap: 10px;
        column-gap: 12px;
        align-items: start;
    }
    .northern-results .result-item.has-thumb {
        grid-template-columns: 72px 1fr auto;
        grid-template-areas:
            "thumb name  name"
            "price price button";
    }
    .northern-results .ri-thumb { width:72px; height:54px; grid-area: thumb; align-self: start; }
    .northern-results .ri-name { grid-area: name; align-self: center; }
    .northern-results .ri-price { grid-area: price; text-align: left; align-self: center; order: initial; }
    .northern-results .result-item > button {
        grid-area: button;
        justify-self: end;
        align-self: center;
        order: initial;
    }
}

/* Results subheading */
.northern-results .results-subheading {
    color: #6b7280;
    font-size: 14px;
    margin-bottom: 12px;
}

/* Intent radios */
.intent-radio-group { display: flex; gap: 12px; }
.intent-radio { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: #374151; }
.intent-radio input[type="radio"] { accent-color: #2563eb; }

/* Toast */
.northern-toast {
    position: fixed;
    right: 16px;
    bottom: 16px;
    background: #111827;
    color: #fff;
    padding: 12px 16px;
    border-radius: 8px;
    display: none;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.2);
    z-index: 12000;
    display: flex;
    align-items: center;
    gap: 12px;
}
.northern-toast .toast-msg { font-size: 14px; }
.northern-toast .toast-link { color: #93c5fd; text-decoration: underline; }
.northern-toast .toast-link:hover { color: #bfdbfe; }
.northern-toast .toast-close { background: transparent; border: none; color: #fff; font-size: 16px; cursor: pointer; }

/* Global progress overlay */
.nb-progress-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 13000;
}
.nb-progress {
  background: #ffffff;
  border-radius: 12px;
  padding: 16px 18px;
  width: min(420px, 90vw);
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}
.nb-progress-head { display:flex; align-items:center; gap:10px; margin-bottom:10px; color:#111827; font-weight:600; }
.nb-done-icon { width: 18px; height: 18px; border-radius: 50%; background:#10b981; color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; }
.nb-progress-bar { width:100%; height:8px; background:#e5e7eb; border-radius:6px; overflow:hidden; }
.nb-progress-fill { height:100%; width:0%; background:#2563eb; transition: width 0.3s ease; }
.nb-progress-text { margin-top:8px; font-size:13px; color:#6b7280; }
.nb-progress-actions { margin-top:12px; display:flex; justify-content:flex-end; gap:8px; }

/* Ensure high-contrast text on the overlay primary button */
.nb-progress .northern-button-primary,
.nb-progress .northern-button-primary:link,
.nb-progress .northern-button-primary:visited { color:#fff !important; font-weight:600; }

/* Compact availability calendar */
.northern-cal-wrapper { background:#fff; border-radius:12px; box-shadow:0 4px 6px -1px rgba(0,0,0,0.1); margin-bottom:24px; }
.northern-availability { padding:16px; }
.northern-summary { padding: 12px 16px; }
.northern-summary-layout { display:block; gap:16px; }
@media (min-width: 900px) { .northern-summary-layout { display:grid; grid-template-columns: 420px 1fr; align-items:start; } }
.northern-summary-stacked.northern-summary-layout { display:block !important; }
.northern-summary-stacked .ncal-list { margin-top:16px; }
.northern-summary-layout .ncal-list { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:16px; overflow:hidden; min-width:0; }
.northern-cal-wrapper,
.northern-availability,
.northern-summary-layout,
.northern-summary-layout .ncal-list,
.northern-summary-layout .ncal-details { max-width:100%; box-sizing:border-box; }
.northern-summary-layout .ncal-details { margin: 4px; }
.ncal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.ncal-prev, .ncal-next { background:#fff !important; background-image:none !important; color:#044437 !important; border:1px solid #4B9384 !important; border-radius:5px; padding:4px 10px; font-weight:600; box-shadow:none !important; cursor:pointer; transition:background 0.2s; }
.ncal-prev:hover, .ncal-next:hover { background:#f0f7f5 !important; }
.ncal-nav-disabled { opacity:0.5; cursor:not-allowed; }
.ncal-title { font-weight:600; color:#1f2937; }
.ncal-grid { display:grid; gap:6px; width:100%; }
.ncal-row { display:grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap:6px; }
.ncal-cell { min-height:48px; }
.ncal-h { text-align:center; font-size:12px; color:#6b7280; }
.ncal-empty { background:transparent; }
.ncal-day { width:100%; min-width:0; height:100%; display:flex; flex-direction:column; align-items:flex-end; justify-content:flex-start; gap:4px; padding:6px; border:1px solid #e5e7eb; border-radius:6px; background:#fff; cursor:pointer; }
.ncal-day.is-available { border-color:#10b981; box-shadow: inset 0 0 0 1px rgba(16,185,129,0.3); }
.ncal-day.is-unavailable { opacity:0.45; cursor:not-allowed; }
.ncal-day.ncal-verylow { background:#fff7ed; border-color:#f59e0b; }
.ncal-day.ncal-limited { background:#fef9c3; border-color:#facc15; }
.ncal-day.ncal-available { background:#ecfdf5; border-color:#10b981; }
.ncal-day.ncal-high { background:#e0f2fe; border-color:#38bdf8; }
.ncal-day.ncal-selected {
  background:#e0f2fe; /* light blue */
  border-color:#60a5fa;
  outline: 2px solid #93c5fd;
  box-shadow: 0 0 0 2px rgba(59,130,246,0.25) inset;
}
.ncal-num { font-size:12px; color:#374151; }
.ncal-badge { font-size:11px; color:#065f46; background:transparent; border:none; padding:0; border-radius:0; align-self:flex-start; white-space:nowrap; display:inline-block; }
@media (max-width: 420px) {
  .ncal-badge { font-size:10px; }
}
.ncal-legend { margin-top:8px; font-size:12px; color:#6b7280; display:flex; gap:12px; row-gap:6px; align-items:center; justify-content:center; padding:0 12px 8px 12px; flex-wrap:wrap; }
.ncal-legend > * { white-space:nowrap; }
.ncal-dot { width:8px; height:8px; display:inline-block; border-radius:999px; margin-right:2px; border:1px solid #d1d5db; vertical-align:middle; }
.ncal-dot.verylow { background:#fff7ed; border-color:#f59e0b; }
.ncal-dot.limited { background:#fef9c3; border-color:#facc15; }
.ncal-dot.available { background:#10b981; border-color:#10b981; }
.ncal-dot.unavailable { background:#d1d5db; }

.ncal-details { margin-top:12px; border:1px solid #e5e7eb; border-radius:8px; padding:12px; background:#fff; }
.ncal-details-head { margin-bottom:8px; color:#111827; }
.ncal-details-sub { color:#4b5563; font-size:13px; font-weight:700; margin-top:2px; }
.ncal-details h4 { font-weight:700; }

.ncal-party { margin:8px 0 10px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.ncal-party-label { font-weight:600; }
.ncal-party-field { display:flex; align-items:center; gap:4px; font-size:14px; }
.ncal-party-field input { width:70px; padding:4px 6px; font-size:14px; border:1px solid #d1d5db; border-radius:4px; }

/* Multi-night stepper for lodging rows. Sits inside .ncal-details-name beneath the unit name. */
.ncal-stay { margin:6px 0 0; display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:14px; }
.ncal-stay-field { display:flex; align-items:center; gap:4px; }
.ncal-stay-label { font-weight:600; color:#374151; }
.ncal-stay-field input.ncal-nights { width:64px; padding:4px 6px; font-size:14px; border:1px solid #d1d5db; border-radius:4px; }
.ncal-stay-hint { color:#6b7280; font-size:12px; }
.nps-save { padding:4px 10px; font-size:13px; cursor:pointer; }
.nps-status { display:none; color:#065f46; font-size:12px; }
@media (max-width: 640px) {
    .ncal-party {
        display:grid;
        grid-template-columns: auto 1fr;
        gap: 6px 8px;
        align-items: center;
    }
    .ncal-party-label { grid-column: 1 / -1; }
    .ncal-party-field { justify-self: end; }
    .nps-save { grid-column: 1 / -1; justify-self: start; margin-bottom: 4px; }
    .nps-status { grid-column: 1 / -1; }
}
.ncal-details-row { display:grid; grid-template-columns: 1fr auto auto; gap:4px 8px; align-items:center; padding:8px 0; border-bottom:1px solid #f3f4f6; }
.ncal-details-row:last-child { border-bottom:none; }
.ncal-details-name { grid-column: 1 / -1; display:flex; align-items:center; gap:8px; flex-wrap:wrap; color:#1f2937; }
.ncal-details-name a { font-size:18px; }
.ncal-details-name .badge-onreq { white-space:nowrap; margin-left:6px; padding:3px 8px; font-size:12px; }
.ncal-details-price { font-weight:600; font-size:16px; }
@media (max-width: 640px) {
  .northern-summary-layout .ncal-details-name .badge-onreq { width:18px; height:18px; padding:0 !important; font-size:0 !important; display:inline-flex; align-items:center; justify-content:center; margin-left:6px; }
  .northern-summary-layout .ncal-details-name .badge-onreq::before { content:'!'; font-size:12px; font-weight:700; color:#92400e; line-height:1; }
}
.ncal-details-avail { text-align:right; font-size:12px; color:#6b7280; }
.ncal-details-row > button,
.ncal-details-row > .ncal-add,
.ncal-details-row > .nb-call,
.ncal-details-row > .ncal-unavail {
  padding: 6px 12px;
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
  justify-self: end;
}
.ncal-unavail { opacity:.55; cursor:not-allowed !important; }

/* Single-day calendar */
.northern-single-day { display:none; }
.sd-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.sd-prev, .sd-next { background:#fff !important; background-image:none !important; color:#044437 !important; border:1px solid #4B9384 !important; border-radius:5px; padding:4px 10px; font-weight:600; box-shadow:none !important; cursor:pointer; transition:background 0.2s; }
.sd-prev:hover, .sd-next:hover { background:#f0f7f5 !important; }
.sd-title { font-weight:600; color:#1f2937; }
.sd-list { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:0; }
.sd-row { display:grid; grid-template-columns: minmax(0, 2.5fr) 100px 110px auto; gap:10px; align-items:center; padding:10px 12px; border-bottom:1px solid #f3f4f6; }
.sd-row:last-child { border-bottom:none; }
.sd-name { color:#1f2937; font-size:14px; }
.sd-price { text-align:right; font-weight:600; }
.sd-avail { text-align:right; font-size:12px; color:#6b7280; }
.sd-avail.verylow { color:#b45309; }
.sd-avail.limited { color:#92400e; }
.sd-avail.available { color:#065f46; }
.sd-avail.unavailable { color:#9ca3af; }
.sd-dot { width:8px; height:8px; display:inline-block; border-radius:999px; margin-right:6px; vertical-align:middle; border:1px solid #d1d5db; }
.sd-dot.verylow { background:#fff7ed; border-color:#f59e0b; }
.sd-dot.limited { background:#fef9c3; border-color:#facc15; }
.sd-dot.available { background:#10b981; border-color:#10b981; }
.sd-dot.unavailable { background:#d1d5db; border-color:#d1d5db; }

/* Responsive tightening for single-day list */
@media (max-width: 900px) {
  .sd-row { grid-template-columns: minmax(0, 2fr) 90px 100px auto; gap:8px; }
  .sd-add { padding: 8px 14px; font-size: 14px; }
}
@media (max-width: 700px) {
  .sd-row { grid-template-columns: minmax(0, 2fr) 90px 80px auto; gap:8px; }
  .sd-add { padding: 8px 12px; font-size: 14px; }
}
@media (max-width: 540px) {
  .sd-row { grid-template-columns: minmax(0, 1.7fr) 80px 28px auto; gap:6px; padding:8px 10px; }
  .sd-avail { text-align:left; }
  /* Hide availability label but keep the dot for compactness */
  .sd-avail { font-size:0; }
  .sd-avail .sd-dot { margin-right:0; }
  .sd-add { padding: 6px 10px; font-size: 13px; }
}
@media (max-width: 400px) {
  .sd-row { grid-template-columns: minmax(150px, 1fr) 72px auto; }
  .sd-avail { display:none; }
  .sd-add { padding: 6px 10px; font-size: 13px; }
}
.sd-add { padding:6px 10px; cursor:pointer; }
.sd-empty { color:#6b7280; font-size:14px; }

/* ── Simple Item Card: [northern_simple_item] ── */
.northern-simple-item { max-width:400px; }
.nsi-loading { color:#6b7280; font-size:14px; padding:12px 0; }
.nsi-error { color:#991b1b; font-size:14px; padding:12px 0; }
.nsi-card { border:1px solid #e5e7eb; border-radius:10px; overflow:hidden; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.nsi-image { width:100%; }
.nsi-image img { display:block; width:100%; height:auto; object-fit:cover; aspect-ratio:3/2; }
.nsi-body { padding:16px; }
.nsi-name { font-size:18px; font-weight:600; color:#1f2937; margin-bottom:4px; }
.nsi-price { font-size:20px; font-weight:700; color:#065f46; margin-bottom:12px; }
.nsi-qty { margin-bottom:12px; font-size:14px; color:#374151; }
.nsi-qty input { width:72px; padding:6px 8px; border:1px solid #d1d5db; border-radius:6px; font-size:14px; margin-left:6px; }
.nsi-add { width:100%; cursor:pointer; }
.nsi-status { font-size:13px; margin-top:8px; min-height:18px; }