/* ============================================================================
   MARKETPLACE BUYER PORTAL — UMD Engine
   Single CSS file. Max 550 lines. 10 sections.
   ============================================================================ */

/* 1. CUSTOM PROPERTIES  (~45 lines)
   ============================================================================ */
:root {
 /* Bright-white + green theme — palette ported from sagehomeowner.com (main.css).
    Variable NAMES are unchanged so every structural class keeps working; only the
    VALUES changed (dark navy → sage white/green). --umdBlue* now hold sage's greens. */
 --umdBlue:         #2e7d32; /* sage --color-primary — deep forest green (brand/accent) */
 --umdBlueDark:     #1b5e20; /* sage --color-primary-dark — hover/headings */
 --umdBlueLight:    #4caf50; /* sage --color-primary-light — bright accent */
 --shellBg:         #f1f8f1; /* sage --color-primary-subtle — near-white green tint */
 --shellSurface:    #ffffff; /* sage --color-white */
 --shellBorder:     #c8e6c9; /* sage --color-border — light green */
 --cardBg:          #ffffff; /* sage --color-white */
 --cardBorder:      #c8e6c9; /* sage --color-border */
 --topbarHeight:    56px;
 --textPrimary:     #1a2e1a; /* sage --color-text — dark green-tinted body */
 --textSecondary:   #1b5e20; /* sage --color-primary-dark */
 --textMuted:       #4a6b4a; /* sage --color-text-muted */
 --textAccent:      var(--umdBlue);
 --textSuccess:     #2e7d32; /* sage forest green */
 --textDanger:      #c62828; /* readable red on white */
 --textWarning:     #c75300; /* sage --color-warning */
 --inputBg:         #ffffff; /* sage --color-white */
 --inputBorder:     #c8e6c9; /* sage --color-border */
 --radius:          8px;
 --radiusSm:        4px;
 --transition:      0.2s ease;
 --zTopbar:         100;
 --zModal:          500;
 --zDropdown:       200;
 --fontBase:        system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
 --umdBlueBg15:     rgba(46, 125, 50, 0.12); /* green tint — soft accent surface */
 --umdBlueBg30:     rgba(46, 125, 50, 0.3);  /* green tint — accent border */
 --dangerBg10:      rgba(198, 40, 40, 0.08);
 --dangerBg12:      rgba(198, 40, 40, 0.1);
 --dangerBg15:      rgba(198, 40, 40, 0.12);
 --dangerBg30:      rgba(198, 40, 40, 0.28);
 --successBg15:     rgba(46, 125, 50, 0.12);
 --successBg30:     rgba(46, 125, 50, 0.3);
 --warningBg15:     rgba(199, 83, 0, 0.12);
 --warningBg30:     rgba(199, 83, 0, 0.3);
 --umdDangerDark:   #a31515;
 --overlayBg:       rgba(27, 94, 32, 0.45); /* sage green-tinted scrim */
 --dropShadow:      0 4px 24px rgba(27, 94, 32, 0.15); /* sage --color-shadow family */
}
[data-theme="light"] {
 /* Light variant stays on the sage white/green palette (no navy). */
 --shellBg:      #ffffff;
 --shellSurface: #ffffff;
 --shellBorder:  #c8e6c9;
 --cardBg:       #ffffff;
 --cardBorder:   #c8e6c9;
 --textPrimary:  #1a2e1a;
 --textMuted:    #4a6b4a;
 --inputBg:      #ffffff;
 --inputBorder:  #c8e6c9;
}
[data-theme="dark-light"] {
 /* Soft green-tinted surface variant. */
 --shellBg:      #e8f5e9;
 --shellSurface: #ffffff;
 --cardBg:       #ffffff;
}

/* 2. RESET & BASE       (~28 lines)
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
 font-family:      var(--fontBase);
 background-color: var(--shellBg);
 color:            var(--textPrimary);
 line-height:      1.5;
 min-height:       100vh;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--umdBlueLight); }
img { max-width: 100%; display: block; }
button { cursor: pointer; border: none; background: none; font: inherit; }
ul, ol { list-style: none; }
strong { font-weight: 700; }

/* 3. SHELL LAYOUT       (~35 lines)
   ============================================================================ */
#app {
 display:        flex;
 flex-direction: column;
 min-height:     100vh;
}
.mainContent {
 flex:       1;
 padding-top: var(--topbarHeight);
 width:      100%;
}
.siteFooter {
 padding:          1rem 1.5rem;
 border-top:       1px solid var(--shellBorder);
 background-color: var(--shellSurface);
 text-align:       center;
}
.footerLink { color: var(--umdBlueLight); }
.footerLink:hover { text-decoration: underline; }

/* 4. TOP BAR            (~40 lines)
   ============================================================================ */
.topBar {
 position:         fixed;
 top:              0;
 left:             0;
 right:            0;
 height:           var(--topbarHeight);
 background-color: var(--shellSurface);
 border-bottom:    1px solid var(--shellBorder);
 z-index:          var(--zTopbar);
}
.topBarInner {
 max-width:   1400px;
 margin:      0 auto;
 height:      100%;
 padding:     0 1.5rem;
 display:     flex;
 align-items: center;
}
.topBarBrand { font-size: 1rem; }
.platformLogo {
 height:        32px;
 width:         auto;
 border-radius: var(--radiusSm);
}
.genieLogo {
 height:        40px;
 width:         auto;
 object-fit:    contain;
}
.topNav { align-items: center; }
.navLink {
 font-size:  0.875rem;
 color:      var(--textSecondary);
 padding:    0.25rem 0.5rem;
 border-radius: var(--radiusSm);
 transition: color var(--transition), background var(--transition);
 display:    flex;
 align-items: center;
 gap:        0.25rem;
}
.navLink:hover { color: var(--textPrimary); background: var(--cardBg); }

/* 5. AUTH / LOGIN PAGES (~42 lines)
   ============================================================================ */
.loginWrap {
 min-height:     calc(100vh - var(--topbarHeight));
 display:        flex;
 align-items:    center;
 justify-content: center;
 padding:        2rem;
}
.loginCard {
 width:     100%;
 max-width: 420px;
}
.loginIcon { font-size: 2.5rem; margin-bottom: 0.25rem; }
.forgotLink {
 display:    block;
 margin-top: 0.25rem;
 transition: color var(--transition);
}
.forgotLink:hover { color: var(--umdBlueLight); }
.errorWrap {
 min-height:     calc(100vh - var(--topbarHeight));
 display:        flex;
 align-items:    center;
 justify-content: center;
 padding:        2rem;
}
.errorCard { width: 100%; max-width: 480px; }
.errorIcon { font-size: 3rem; }

/* 6. LEAD CARDS         (~55 lines)
   ============================================================================ */
.leadGrid {
 display:               grid;
 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
 gap:                   1rem;
}
.leadCard {
 display:        flex;
 flex-direction: column;
 transition:     border-color var(--transition), transform var(--transition);
}
.leadCard:hover {
 border-color: var(--umdBlue);
 transform:    translateY(-1px);
}
.leadDeliveryCard { display: flex; flex-direction: column; }
.quickLinkCard {
 display:        flex;
 flex-direction: column;
 min-width:      200px;
 transition:     border-color var(--transition), transform var(--transition);
}
.quickLinkCard:hover {
 border-color: var(--umdBlue);
 transform:    translateY(-2px);
}
.quickLinkIcon { font-size: 1.75rem; }
.filterInput { max-width: 320px; }
.emptyIcon { font-size: 2.5rem; }
.spinIcon { display: inline-block; animation: spin 1s linear infinite; }

/* Storefront (public, domain-scoped) */
.storefrontSearch { align-items: flex-end; }
.storefrontSearchField { flex: 1 1 220px; min-width: 180px; }
.storefrontSearchActions { flex: 0 0 auto; }
.storefrontImageWrap {
 width:         100%;
 aspect-ratio:  4 / 3;
 border-radius: var(--radiusSm);
 overflow:      hidden;
 background:    var(--inputBg);
}
.storefrontImage { width: 100%; height: 100%; object-fit: cover; }
.storefrontImageFallback {
 display:         flex;
 align-items:     center;
 justify-content: center;
 width:           100%;
 height:          100%;
 font-size:       2.25rem;
 color:           var(--textMuted);
}
.storefrontTitle { line-height: 1.3; }
.storefrontDescription {
 display:            -webkit-box;
 -webkit-line-clamp: 3;
 -webkit-box-orient: vertical;
 overflow:           hidden;
}

/* 6b. STOREFRONT CATALOG (Walmart/Amazon-style layout — search, departments, facets, hero, grid)
   ============================================================================ */
/* Accessible visually-hidden label (kept in the a11y tree for screen readers) */
.srOnly {
 position:    absolute;
 width:       1px;
 height:      1px;
 padding:     0;
 margin:      -1px;
 overflow:    hidden;
 clip:        rect(0, 0, 0, 0);
 white-space: nowrap;
 border:      0;
}

/* Page shell */
.storefrontPage {
 max-width: 1400px;
 margin:    0 auto;
 padding:   1.25rem 1.5rem 2.5rem;
 display:   flex;
 flex-direction: column;
 gap:       1.25rem;
}

/* Prominent search bar (full width) */
.storefrontSearchBar {
 background:    var(--shellSurface);
 border:        1px solid var(--shellBorder);
 border-radius: var(--radius);
 padding:       0.75rem;
 display:       flex;
 flex-wrap:     wrap;
 gap:           0.75rem;
 align-items:   stretch;
}
.storefrontSearchKeywordField { flex: 1 1 320px; }
.storefrontSearchVerticalField { flex: 0 1 220px; min-width: 170px; }
.storefrontSearchInput { font-size: 1rem; }
.storefrontSearchSelect { height: 100%; }
.storefrontSearchActions { align-items: stretch; }
.storefrontSearchSubmit { white-space: nowrap; }

/* Department / category bar */
.storefrontDepartments {
 display:        flex;
 flex-wrap:      wrap;
 gap:            0.5rem;
 padding:        0.5rem 0;
 border-bottom:  1px solid var(--shellBorder);
}
.storefrontDeptChip {
 display:       inline-flex;
 align-items:   center;
 gap:           0.3125rem;
 padding:       0.375rem 0.75rem;
 border-radius: 999px;
 border:        1px solid var(--shellBorder);
 background:    var(--shellSurface);
 color:         var(--textSecondary);
 font-size:     0.8125rem;
 font-weight:   600;
 transition:    background var(--transition), color var(--transition), border-color var(--transition);
}
.storefrontDeptChip:hover { background: var(--umdBlueBg15); border-color: var(--umdBlueBg30); color: var(--textPrimary); }
.storefrontDeptChipActive {
 background:   var(--umdBlue);
 border-color: var(--umdBlue);
 color:        #fff;
}
.storefrontDeptChipActive:hover { background: var(--umdBlueDark); color: #fff; }

/* Catalog body: filter rail + main column */
.storefrontBody {
 display:               grid;
 grid-template-columns: 240px 1fr;
 gap:                   1.5rem;
 align-items:           start;
}

/* Filter rail (Amazon-style sidebar) */
.storefrontFilters {
 position: sticky;
 top:      calc(var(--topbarHeight) + 1rem);
}
.storefrontFilterDisclosure {
 background:    var(--shellSurface);
 border:        1px solid var(--shellBorder);
 border-radius: var(--radius);
 overflow:      hidden;
}
.storefrontFilterSummary {
 list-style:  none;
 padding:     0.875rem 1.25rem;
 font-weight: 700;
 color:       var(--textPrimary);
 display:     flex;
 align-items: center;
 gap:         0.5rem;
 cursor:      pointer;
}
.storefrontFilterSummary::-webkit-details-marker { display: none; }
.storefrontFilterBody { padding: 0 1.25rem 1.25rem; }
.storefrontFilterForm { display: flex; flex-direction: column; gap: 1.25rem; }
.storefrontFilterGroup { display: flex; flex-direction: column; gap: 0.5rem; }
.storefrontFilterHeading {
 font-size:     0.8125rem;
 font-weight:   700;
 text-transform: uppercase;
 letter-spacing: 0.03em;
 color:         var(--textMuted);
 padding-bottom: 0.25rem;
 border-bottom: 1px solid var(--shellBorder);
}
.storefrontFilterOption {
 display:     flex;
 align-items: center;
 gap:         0.5rem;
 cursor:      pointer;
}
.storefrontFilterOption input { accent-color: var(--umdBlue); }
.storefrontPriceRange { display: flex; align-items: center; gap: 0.5rem; }
.storefrontPriceInput { flex: 1 1 0; min-width: 0; }
.storefrontFilterActions { display: flex; flex-direction: column; }

/* Main column */
.storefrontMain { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }

/* Hero / promo strip */
.storefrontHero {
 display:         flex;
 align-items:     center;
 justify-content: space-between;
 gap:             1rem;
 padding:         1.5rem 1.75rem;
 border-radius:   var(--radius);
 background:      linear-gradient(120deg, var(--umdBlue), var(--umdBlueLight));
 color:           #fff;
 overflow:        hidden;
}
.storefrontHeroContent { display: flex; flex-direction: column; gap: 0.375rem; }
.storefrontHeroEyebrow {
 display:        inline-flex;
 align-items:    center;
 gap:            0.375rem;
 font-size:      0.75rem;
 font-weight:    700;
 text-transform: uppercase;
 letter-spacing: 0.05em;
 opacity:        0.9;
}
.storefrontHeroTitle { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.storefrontHeroSub { font-size: 0.9375rem; opacity: 0.92; }
.storefrontHeroBadge { font-size: 3.25rem; opacity: 0.85; }

/* Result summary */
.storefrontResultBar { flex-wrap: wrap; }

/* Product grid — denser than the default leadGrid */
.storefrontGrid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.storefrontCard { overflow: hidden; }
.storefrontCard .storefrontImageWrap { position: relative; border-radius: 0; }
.storefrontStockTag { position: absolute; top: 0.5rem; left: 0.5rem; }
.storefrontCardBody {
 display:        flex;
 flex-direction: column;
 padding:        0.875rem 1rem 1rem;
 flex:           1;
}
.storefrontBrand { text-transform: uppercase; letter-spacing: 0.02em; margin-top: 0.375rem; }
.storefrontTags { margin-top: auto; }
.storefrontPriceRow { align-items: baseline; }
.storefrontPrice { line-height: 1.1; }
.storefrontCardActions { margin-top: 0.75rem; }

/* Empty state (sits inside the grid area) */
.storefrontEmpty { padding: 3rem 1.5rem; text-align: center; }

/* Pagination / load-more */
.storefrontPager {
 display:        flex;
 justify-content: center;
 padding:        1rem 0 0;
}

/* 7. USER MENU / DROPDOWN (~48 lines)
   ============================================================================ */
.creditBadge {
 background: var(--umdBlueBg15);
 color:      var(--umdBlueLight);
 border:     1px solid var(--umdBlueBg30);
 font-weight: 600;
 font-size:  0.8125rem;
}
.userMenu { position: relative; }
.userMenuDropdown {
 position:         absolute;
 top:              calc(100% + 8px);
 right:            0;
 min-width:        180px;
 background-color: var(--shellSurface);
 border:           1px solid var(--shellBorder);
 border-radius:    var(--radius);
 box-shadow:       var(--dropShadow);
 z-index:          var(--zDropdown);
 overflow:         hidden;
}
.menuItem {
 display:     flex;
 align-items: center;
 gap:         0.5rem;
 padding:     0.625rem 1rem;
 font-size:   0.875rem;
 color:       var(--textSecondary);
 transition:  background var(--transition), color var(--transition);
}
.menuItem:hover { background: var(--cardBg); color: var(--textPrimary); }
.menuItemDanger { color: var(--textDanger); }
.menuItemDanger:hover { background: var(--dangerBg10); color: var(--textDanger); }

/* 8. UTILITIES          (~48 lines)
   ============================================================================ */
.flex       { display: flex; }
.flexCol    { display: flex; flex-direction: column; }
.flexBetween{ display: flex; align-items: center; justify-content: space-between; }
.flexEnd    { display: flex; align-items: center; justify-content: flex-end; }
.flexCenter { display: flex; align-items: center; justify-content: center; }
.flexWrap   { flex-wrap: wrap; }
.itemsCenter{ align-items: center; }
.gap1 { gap: 0.25rem; } .gap2 { gap: 0.5rem; }
.gap3 { gap: 0.75rem; } .gap4 { gap: 1rem; }
.gap5 { gap: 1.5rem; }
.mt1 { margin-top: 0.25rem; } .mt2 { margin-top: 0.5rem; }
.mt3 { margin-top: 0.75rem; } .mt4 { margin-top: 1rem; }
.mb2 { margin-bottom: 0.5rem; } .mb4 { margin-bottom: 1rem; }
.p4 { padding: 1rem; } .p5 { padding: 1.5rem; }
.paddingMd  { padding: 1.25rem; }
.textXs     { font-size: 0.75rem; }
.textSm     { font-size: 0.875rem; }
.textMd     { font-size: 1rem; }
.textLg     { font-size: 1.125rem; }
.textXl     { font-size: 1.5rem; }
.fw6        { font-weight: 600; }
.fw7        { font-weight: 700; }
.textPrimary  { color: var(--textPrimary); }
.textSecondary{ color: var(--textSecondary); }
.textMuted    { color: var(--textMuted); }
.textAccent   { color: var(--textAccent); }
.textSuccess  { color: var(--textSuccess); }
.textDanger   { color: var(--textDanger); }
.textCenter   { text-align: center; }
.textRight    { text-align: right; }
.hidden       { display: none !important; }
.wFull        { width: 100%; }
.overflowXAuto{ overflow-x: auto; }

/* 9. COMPONENTS         (~95 lines)
   ============================================================================ */
/* Cards */
.card {
 background:    var(--cardBg);
 border:        1px solid var(--cardBorder);
 border-radius: var(--radius);
}
.cardHeader {
 padding:       0.875rem 1.25rem;
 border-bottom: 1px solid var(--shellBorder);
 font-weight:   600;
}
.cardBody { padding: 1.25rem; }
.cardFooter {
 padding:    0.875rem 1.25rem;
 border-top: 1px solid var(--shellBorder);
}

/* Buttons */
.btn {
 display:       inline-flex;
 align-items:   center;
 gap:           0.375rem;
 padding:       0.5rem 1rem;
 border-radius: var(--radiusSm);
 font-size:     0.9375rem;
 font-weight:   600;
 transition:    background var(--transition), border-color var(--transition), opacity var(--transition);
}
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btnPrimary {
 background: var(--umdBlue);
 color:      #fff;
}
.btnPrimary:hover:not(:disabled) { background: var(--umdBlueDark); }
.btnGhost {
 background: transparent;
 border:     1px solid var(--shellBorder);
 color:      var(--textSecondary);
}
.btnGhost:hover:not(:disabled) { background: var(--cardBg); color: var(--textPrimary); }
.btnDanger { background: var(--textDanger); color: #fff; }
.btnDanger:hover:not(:disabled) { background: var(--umdDangerDark); }
.btnSm { padding: 0.3125rem 0.75rem; font-size: 0.8125rem; }

/* Forms */
.formGroup { display: flex; flex-direction: column; gap: 0.375rem; }
.formLabel  { font-size: 0.875rem; font-weight: 600; color: var(--textSecondary); }
.formInput, .formSelect {
 background:    var(--inputBg);
 border:        1px solid var(--inputBorder);
 border-radius: var(--radiusSm);
 padding:       0.5rem 0.75rem;
 font-size:     0.9375rem;
 color:         var(--textPrimary);
 width:         100%;
 transition:    border-color var(--transition);
}
.formInput:focus, .formSelect:focus {
 outline:      none;
 border-color: var(--umdBlue);
}

/* Badges */
.badge {
 display:       inline-flex;
 align-items:   center;
 gap:           0.25rem;
 padding:       0.25rem 0.625rem;
 border-radius: 999px;
 font-size:     0.75rem;
 font-weight:   600;
 background:    var(--cardBg);
 border:        1px solid var(--cardBorder);
}
.badgeSuccess { background: var(--successBg15); color: var(--textSuccess); border-color: var(--successBg30); }
.badgeDanger  { background: var(--dangerBg15);  color: var(--textDanger);  border-color: var(--dangerBg30); }
.badgeWarning { background: var(--warningBg15); color: var(--textWarning); border-color: var(--warningBg30); }

/* Modals */
.modalOverlay {
 display:         none;
 position:        fixed;
 inset:           0;
 background:      var(--overlayBg);
 z-index:         var(--zModal);
 align-items:     center;
 justify-content: center;
 padding:         1.5rem;
}
.modalOverlay.open { display: flex; }
.modal {
 background:    var(--shellSurface);
 border:        1px solid var(--shellBorder);
 border-radius: var(--radius);
 width:         100%;
 max-width:     480px;
 max-height:    90vh;
 overflow-y:    auto;
}
.modalHeader {
 display:         flex;
 align-items:     center;
 justify-content: space-between;
 padding:         1rem 1.25rem;
 border-bottom:   1px solid var(--shellBorder);
}
.modalBody   { padding: 1.25rem; }
.modalFooter {
 padding:    1rem 1.25rem;
 border-top: 1px solid var(--shellBorder);
}
.modalClose {
 font-size:     1.25rem;
 line-height:   1;
 color:         var(--textMuted);
 padding:       0.25rem 0.5rem;
 border-radius: var(--radiusSm);
 transition:    color var(--transition), background var(--transition);
}
.modalClose:hover { color: var(--textPrimary); background: var(--cardBg); }

/* Alerts */
.alert {
 display:       flex;
 align-items:   center;
 gap:           0.5rem;
 padding:       0.75rem 1rem;
 border-radius: var(--radiusSm);
 font-size:     0.875rem;
}
.alertDanger { background: var(--dangerBg12); border: 1px solid var(--dangerBg30); color: var(--textDanger); }
.alertNotice { background: var(--umdBlueBg15); border: 1px solid var(--umdBlueBg30); color: var(--textSecondary); }

/* Lead-sale org-choice step (Phase C) — picker rendered inside the cart modal */
.orgChoiceList { display: flex; flex-direction: column; gap: 0.5rem; }
.orgChoiceOption {
 display:       flex;
 align-items:   center;
 gap:           0.5rem;
 padding:       0.625rem 0.75rem;
 border:        1px solid var(--cardBorder);
 border-radius: var(--radiusSm);
 background:    var(--cardBg);
 cursor:        pointer;
}
.orgChoiceOption:hover { border-color: var(--umdBlueBg30); }
.orgChoiceOption input { accent-color: var(--umdBlue); }

/* Table */
.table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.table th { padding: 0.625rem 0.875rem; text-align: left; color: var(--textMuted); font-weight: 600; border-bottom: 1px solid var(--shellBorder); white-space: nowrap; }
.table td { padding: 0.75rem 0.875rem; border-bottom: 1px solid var(--shellBorder); }
.table tr:last-child td { border-bottom: none; }

/* 9b. CHECKOUT & SETTLEMENTS (Phase 2 — #24)
   ============================================================================ */
.checkoutWrap { max-width: 720px; margin: 0 auto; }
.checkoutTotalRow {
 padding-top:  0.75rem;
 border-top:   1px solid var(--shellBorder);
}
.paymentMount {
 padding:       0.75rem 1rem;
 border:        1px dashed var(--inputBorder);
 border-radius: var(--radiusSm);
 background:    var(--inputBg);
}
/* Stripe Elements card field — Stripe.js injects a <div class="StripeElement"> into #cartPaymentMount.
   Card data lives ONLY inside Stripe's hosted iframe (PCI SAQ A); this styles the wrapper it mounts. */
.StripeElement {
 padding:       0.75rem;
 border:        1px solid var(--inputBorder);
 border-radius: var(--radiusSm);
 background:    var(--inputBg);
 transition:    border-color var(--transition);
}
.StripeElement--focus { border-color: var(--umdBlue); }
.StripeElement--invalid { border-color: var(--textDanger); }
/* Multi-connector payment (#53). #cartPaymentMount holds the ACTIVE card connector's inline field(s):
   Stripe Elements, the Authorize.Net Accept.js inputs, or the PayPal Advanced Card hosted fields.
   #cartWalletMount holds the independent PayPal/Venmo wallet buttons. Both connectors + wallet reuse the
   same .paymentMount frame; these rules space the stacked fields/buttons. */
.paymentMount .formGroup { margin-bottom: 0.625rem; }
.paymentMount .formGroup:last-child { margin-bottom: 0; }
/* PayPal Advanced Card hosted field slot — PayPal renders its own iframe into this box; style the frame. */
.paypalCardField {
 min-height:    2.5rem;
 padding:       0.5rem 0.75rem;
 border:        1px solid var(--inputBorder);
 border-radius: var(--radiusSm);
 background:    var(--inputBg);
}
/* Authorize.Net Accept HOSTED card frame — the card form is served BY Authorize.Net inside this iframe
   (PCI SAQ A), so PAN/CVV never enter marzuni's DOM. storefront.js POSTs the one-time form token to
   Authorize.Net via a hidden form targeting this frame; a resizeWindow relay may grow its height. */
.paymentMount .authnetHostedFrame {
 display:       block;
 width:         100%;
 min-height:    26rem;
 border:        0;
 background:    var(--inputBg);
 border-radius: var(--radiusSm);
}
.paymentWalletMount {
 margin-top:  0.75rem;
 display:     flex;
 flex-direction: column;
 gap:         0.5rem;
}
.paymentWalletMount:empty { margin-top: 0; }
.confirmIcon { font-size: 3rem; }
.settlementsFilter { max-width: 200px; }

/* 9d. STOREFRONT CART (Lead Sales Phase A — cart UI)
   ============================================================================ */
/* Cart trigger now lives IN the top bar (Amazon/Walmart style) — an icon button, not floating.
   Rendered as <button id="cartTrigger"> (storefront, opens drawer) or <a> (anonymous/off-storefront,
   links to /login or /storefront). .topBarIconBtn carries the shared icon-button look. */
.cartTrigger {
 position:     relative;
 display:      inline-flex;
 align-items:  center;
 gap:          0.25rem;
}
.topBarActions { flex-shrink: 0; }
.topBarIconBtn {
 display:        inline-flex;
 align-items:    center;
 justify-content: center;
 gap:            0.25rem;
 padding:        0.4rem 0.6rem;
 font-size:      1.25rem;
 color:          var(--textSecondary);
 background:     transparent;
 border:         1px solid transparent;
 border-radius:  var(--radiusSm);
 cursor:         pointer;
 transition:     color var(--transition), background var(--transition), border-color var(--transition);
}
.topBarIconBtn:hover { color: var(--umdBlue); background: var(--umdBlueBg15); }
.topBarSignIn { display: inline-flex; align-items: center; gap: 0.25rem; }
.cartCountBadge {
 min-width:   1.25rem;
 text-align:  center;
 font-size:   0.6875rem;
 background:   var(--umdBlue);
 color:        #ffffff;
}
.cartTimerRow {
 padding-bottom: 0.75rem;
 border-bottom:  1px solid var(--shellBorder);
}

/* 9c. POS — staff register (Phase 3 — #25)
   ============================================================================ */
.posWrap { max-width: 1040px; margin: 0 auto; }
.posGrid {
 display:               grid;
 grid-template-columns: 1fr 340px;
 gap:                   1rem;
 align-items:           start;
}
.posScanInput { font-size: 1.125rem; }
.posCartTotalRow {
 padding-top: 0.75rem;
 border-top:  1px solid var(--shellBorder);
}
.posCartEmpty { padding: 1.5rem 0; }
.posTenderType {
 padding-top: 0.75rem;
 border-top:  1px solid var(--shellBorder);
}
.posChangeRow {
 padding-top: 0.75rem;
 border-top:  1px solid var(--shellBorder);
}
.posChangeAmount { font-size: 1.5rem; }
.posReceipt { max-width: 360px; margin: 0 auto; }
.posReceiptDivider {
 border:        none;
 border-top:    1px dashed var(--inputBorder);
 margin:        0.75rem 0;
}
.posLineRemove {
 background: transparent;
 border:     none;
 color:      var(--textDanger);
 cursor:     pointer;
 font-size:  1rem;
}
.posLineRemove:hover { opacity: 0.75; }

/* 9e. UNIFIED STOREFRONT SUBSCRIPTIONS (#50 — projected SUBSCRIPTION listings + in-cart provisioning)
   ============================================================================ */
/* SUBSCRIPTION storefront card: a price shown as "$X / interval" (the interval suffix is muted). */
.storefrontPricePer { margin-left: 0.25rem; }

/* In-cart subscription provisioning (ported from the retired /subscriptions checkout). One block per
   SUBSCRIPTION line in the cart, each collecting the provision fields for that line's productType. */
.cartSubProvisionIntro { padding-bottom: 0.25rem; }
.cartSubForm {
 padding:       0.875rem 1rem;
 border:        1px solid var(--shellBorder);
 border-radius: var(--radiusSm);
 background:    var(--inputBg);
}
.cartSubFormTitle { margin-bottom: 0.5rem; }

/* HOSTING staged provisioning (Phase 2 — term + domain + cPanel). Each HOSTING subscription line renders
   a billing-term selector, a domain choice (bring-your-own / register / transfer), and a cPanel account
   step. Presentation only — all price/free/availability is computed + enforced server-side. */
.cartHostingStep { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem; }
.cartHostingStepTitle { font-size: 0.8125rem; }
.domainModeGroup { display: flex; flex-direction: column; gap: 0.375rem; }
.domainModeOption {
 display:       flex;
 align-items:   center;
 gap:           0.5rem;
 padding:       0.5rem 0.625rem;
 border:        1px solid var(--cardBorder);
 border-radius: var(--radiusSm);
 background:    var(--cardBg);
 cursor:        pointer;
}
.domainModeOption:hover { border-color: var(--umdBlueBg30); }
.domainModeOption input { accent-color: var(--umdBlue); }
.domainCheckRow { display: flex; gap: 0.5rem; align-items: stretch; }
.domainCheckRow .domainInput { flex: 1 1 auto; min-width: 0; }
.domainCheckBtn { white-space: nowrap; flex: 0 0 auto; }
.domainResult { font-size: 0.8125rem; }
.domainStatusOk, .domainStatusBad { display: flex; align-items: center; flex-wrap: wrap; gap: 0.375rem; }
.domainStatusOk { color: var(--textSuccess); }
.domainStatusBad { color: var(--textDanger); }
.domainFreeBadge {
 display:        inline-flex;
 align-items:    center;
 padding:        0.125rem 0.5rem;
 border-radius:  999px;
 font-size:      0.6875rem;
 font-weight:    700;
 letter-spacing: 0.03em;
 background:     var(--successBg15);
 color:          var(--textSuccess);
 border:         1px solid var(--successBg30);
}
.domainPriceLine { font-weight: 700; color: var(--textPrimary); }
.domainSuggestList { display: flex; flex-direction: column; gap: 0.375rem; }
.domainSuggestHeading { margin: 0; }
.domainSuggestChips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.domainSuggestItem {
 padding:       0.25rem 0.625rem;
 border-radius: 999px;
 border:        1px solid var(--umdBlueBg30);
 background:    var(--umdBlueBg15);
 color:         var(--umdBlue);
 font-size:     0.8125rem;
 font-weight:   600;
 cursor:        pointer;
 transition:    background var(--transition), color var(--transition);
}
.domainSuggestItem:hover { background: var(--umdBlue); color: #fff; }

/* Public product detail + multi-image gallery (migration 066) */
.storefrontListingDetail {
 display: grid;
 grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
 gap: 1.5rem;
 align-items: start;
}
.storefrontListingHero {
 width: 100%;
 max-height: 28rem;
 object-fit: contain;
 background: var(--umdBlueBg10, rgba(0,0,0,0.04));
 border-radius: var(--radius, 0.5rem);
}
.storefrontListingHeroFallback {
 min-height: 16rem;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 3rem;
 background: var(--umdBlueBg10, rgba(0,0,0,0.04));
 border-radius: var(--radius, 0.5rem);
}
.storefrontCardMediaLink,
.storefrontCardTitleLink { text-decoration: none; color: inherit; display: block; }
.productGallery { display: flex; flex-direction: column; gap: 0.75rem; }
.productGalleryThumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.productThumb {
 border: 2px solid transparent;
 padding: 0;
 border-radius: var(--radius, 0.375rem);
 overflow: hidden;
 width: 4rem;
 height: 4rem;
 cursor: pointer;
 background: transparent;
}
.productThumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.productThumbActive { border-color: var(--umdBlue, #2563eb); }
.productDescriptionHtml { line-height: 1.5; }
.productDescriptionHtml p { margin: 0 0 0.75rem; }
.productDescriptionHtml p:last-child { margin-bottom: 0; }
.productDescriptionHtml ul,
.productDescriptionHtml ol { margin: 0 0 0.75rem; padding-left: 1.5rem; }
.productDescriptionHtml h1,
.productDescriptionHtml h2,
.productDescriptionHtml h3 { margin: 0.75rem 0; font-weight: 600; }
.storefrontListingDescription.productDescriptionHtml { margin-top: 0.75rem; }
@media (max-width: 768px) {
 .storefrontListingDetail { grid-template-columns: 1fr; }
}

/* 10. ANIMATIONS        (~25 lines)
   ============================================================================ */
@keyframes fadeIn {
 from { opacity: 0; transform: translateY(8px); }
 to   { opacity: 1; transform: translateY(0); }
}
@keyframes spin {
 to { transform: rotate(360deg); }
}
.pageEnter { animation: fadeIn 0.25s ease forwards; }
@media (max-width: 1024px) {
 .storefrontBody { grid-template-columns: 200px 1fr; gap: 1rem; }
 .storefrontGrid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}
@media (max-width: 768px) {
 .topNav   { display: none; }
 .leadGrid { grid-template-columns: 1fr; }
 .posGrid  { grid-template-columns: 1fr; }
 .topBarBrand { font-size: 0.875rem; }
 .p5 { padding: 1rem; }
 /* Catalog reflows to a single column; the filter rail becomes a collapsible disclosure on top. */
 .storefrontPage { padding: 1rem; }
 .storefrontBody { grid-template-columns: 1fr; }
 .storefrontFilters { position: static; }
 .storefrontGrid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
 .storefrontHero { flex-direction: column; align-items: flex-start; text-align: left; }
 .storefrontHeroBadge { display: none; }
}
@media (max-width: 480px) {
 .flex.gap3.itemsCenter .creditBadge { display: none; }
 .modal { max-width: 100%; }
 .storefrontGrid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
 .storefrontSearchVerticalField { flex: 1 1 100%; }
}