/* ── UI-05 Stage 3b: S2T member-panel polish (S2T-scoped) ────────────────────
   Linked ONLY by defaultFregaCom.master -> never repaints the other 5 brands.
   Holds inline-style extractions (D4) and the per-panel "Light Frega touch"
   for the 28 member-area panels. Reuses the Stage-3a shared layer (pill
   buttons, soft cards #F6F8F7, Lato) which already cascades -- do NOT
   re-declare those rules here.
   ──────────────────────────────────────────────────────────────────────────── */

/* sharing -- extracted the repeated centred-image inline style (39 of 41 imgs
   carried `display:block;margin:auto`). Doc-style screenshots stay block-
   centred within the panel; the 2 side-by-side online/offline imgs now centre
   inside their own column too (neutral). */
.s2t-member-sharing img { display: block; margin-left: auto; margin-right: auto; }

/* gallery (content) -- input-group-addon -> input-group-text (BS5 break, done
   in markup); off-brand teal search band -> brand-green; extracted the repeated
   inline styles (margin-left:5px x4 input groups; bg/margin x2 result rows). */
.s2t-member-gallery-searchbar { background: #86AF99; }
.s2t-member-gallery-field { margin-left: 5px; }
.s2t-member-gallery-items { background: #fff; margin-top: 15px; }

/* ============================================================================
   loadproduct (member/products/loadproduct) -- merchant add/edit product form.
   Full per-page reskin on the s2t-theme foundation (owner-approved 2026-06-23).
   Page-specific bits only; the panel/form/field/input/button/section primitives
   come from s2t-theme.css. All scoped under #EchoMainContent .s2t-prodload so
   they only touch this fragment (loaded into the SPA content target), never the
   other 5 brands (this file is linked only by defaultFregaCom.master).
   Patterns here are brand-agnostic/token-driven (reusable on other brands by
   swapping tokens); nothing hardcodes the S2T accent.
   ============================================================================ */

/* fieldset carries no chrome -- it only groups for the login-gate InnerHtml swap */
#EchoMainContent .s2t-prodload .s2t-fieldset-reset { border: 0; margin: 0; padding: 0; min-width: 0; }

/* panel head: title + the How?/Product Management actions wrap on narrow */
#EchoMainContent .s2t-prodload .s2t-panel-head { flex-wrap: wrap; }
#EchoMainContent .s2t-prodload .s2t-prodload-headactions {
  display: flex; align-items: center; gap: var(--s2t-space-2); flex-wrap: wrap;
}
#EchoMainContent .s2t-prodload .s2t-prodload-intro {
  color: var(--s2t-text); font-size: var(--s2t-text-small); line-height: 1.5;
  margin: 0 0 var(--s2t-space-2);
}

/* the category browser sits OUTSIDE .s2t-form so it uses the full panel width
   (a wide 4-column control, not a line-length-bound field); the form below is
   left-aligned to share its left edge instead of centering. */
/* loadproduct relaxes the 720 form cap (owner steer 2026-06-23): this dense
   product form fills the full panel width; paired fields spread across it.
   margin-top puts clear air between the Use Category row and Product Details. */
#EchoMainContent .s2t-prodload .s2t-form {
  max-width: none; margin-left: 0; margin-right: 0; margin-top: var(--s2t-space-6);
}
/* Stock Code: widen well beyond the default field cap (still has the barcode below) */
#EchoMainContent .s2t-prodload .s2t-input-group:has(#StockCode) { max-width: 700px; }
/* keep genuinely single-line inputs from sprawling the full width */
#EchoMainContent .s2t-prodload #prodKeyW { max-width: 700px; }
#EchoMainContent .s2t-prodload .s2t-prodload-catwrap { margin-top: var(--s2t-space-1); }

/* section rhythm: the reveal container is a flex column like .s2t-form so every
   field/grid/section keeps one consistent vertical gap (matches Store Profile). */
#EchoMainContent .s2t-prodload #ContentDetailContainer {
  display: flex; flex-direction: column; gap: var(--s2t-space-4);
}
#EchoMainContent .s2t-prodload .s2t-sec { margin: var(--s2t-space-3) 0 0; }
#EchoMainContent .s2t-prodload .s2t-sec:first-child { margin-top: 0; }

/* save row: discount note left, Save pill right */
#EchoMainContent .s2t-prodload .s2t-panel-actions { justify-content: space-between; align-items: center; flex-wrap: wrap; }
#EchoMainContent .s2t-prodload .s2t-prodload-discount { flex: 1 1 auto; text-align: left; min-width: 0; }

/* generated barcode preview under the stock code -- collapses while empty
   (JsBarcode fills the svg once a stock code is entered). */
#EchoMainContent .s2t-prodload .s2t-prodload-barcode { height: 73px; max-width: 100%; margin-top: var(--s2t-space-2); }
#EchoMainContent .s2t-prodload .s2t-prodload-barcode:empty { display: none; margin-top: 0; }

/* ---- the 6-slot image tile grid (ids/classes the JS binds to are preserved) ---- */
#EchoMainContent .s2t-prodload .s2t-img-tiles {
  display: flex; flex-wrap: wrap; gap: var(--s2t-space-2); margin-top: var(--s2t-space-1);
}
#EchoMainContent .s2t-prodload .imgCont {
  width: 64px; height: 58px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--s2t-brand-light); border-radius: var(--s2t-radius-sm);
  background: var(--s2t-brand-subtle); color: var(--s2t-muted);
  font-weight: 700; cursor: pointer; position: relative; overflow: hidden;
  transition: border-color var(--s2t-dur-fast) var(--s2t-ease-standard);
}
#EchoMainContent .s2t-prodload .imgCont:hover { border-color: var(--s2t-brand); }
/* uploading spinner shown in a tile while the cropped image posts */
#EchoMainContent .s2t-prodload .s2t-tile-busy { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--s2t-brand); }
/* the visually-hidden file input the tiles trigger (the foundation .s2t-hidden-file
   rule is scoped to .s2t-profile, so prodload needs its own). Tiles set the target
   id then .click() it programmatically. Use the ROBUST clip pattern (NOT
   opacity:0 / pointer-events:none, which some engines refuse the OS file
   chooser on for a programmatic .click()). */
#EchoMainContent .s2t-prodload .s2t-hidden-file,
#EchoMainContent .s2t-prodload #s2tImgFile {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
#EchoMainContent .s2t-prodload .prodPrevieImg {
  display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%;
  object-fit: cover; position: static; margin: 0;
}
/* delete-on-hover overlay over a populated tile */
#EchoMainContent .s2t-prodload .imgCont .overlay {
  position: absolute; inset: 0; width: auto; height: auto; padding: 0; top: 0; left: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; background: rgba(0,0,0,0);
  transition: background var(--s2t-dur-fast) var(--s2t-ease-standard);
}
#EchoMainContent .s2t-prodload .delImgIcon:hover .overlay { background: rgba(0,0,0,0.5); }

/* InvestPlus call-out: restrained S2T-accent tint (brand-agnostic via token) */
#EchoMainContent .s2t-prodload .ipLink {
  display: block; width: 100%; box-sizing: border-box;
  background: rgba(240,122,45,0.10); border-radius: var(--s2t-radius-sm);
  padding: var(--s2t-space-2) var(--s2t-space-3); margin-top: var(--s2t-space-2);
  color: var(--s2t-text);
}
#EchoMainContent .s2t-prodload .ipLink a.s2t-link { display: inline; background: transparent; padding: 0; }
/* (category-picker fragment is tokenised in its own inline <style> -- it injects
   after this file in the cascade, so id-level rules here would lose.) */

/* ---------------------------------------------------------------------------
   Crop dialog (SweetAlert2) -- on-brand Frega buttons. The Swal popup renders
   on document.body OUTSIDE #EchoMainContent, so the .s2t-btn primitives can't
   reach it; mirror the .s2t-btn family here with tokens (buttonsStyling:false).
   Reusable pattern -- only the token VALUES are S2T identity. Red is reserved
   for destructive actions, so 'Use Original' is an outline pill, not red. */
.s2t-crop-dialog .s2t-swal-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: var(--s2t-space-3) var(--s2t-space-6);
  font-family: var(--s2t-font); font-size: var(--s2t-text-btn); font-weight: 700;
  letter-spacing: .02em; line-height: 1;
  border: 1px solid transparent; border-radius: var(--s2t-radius-btn);
  cursor: pointer;
  transition: background-color var(--s2t-dur-fast) var(--s2t-ease-standard),
              border-color var(--s2t-dur-fast) var(--s2t-ease-standard),
              color var(--s2t-dur-fast) var(--s2t-ease-standard);
}
.s2t-crop-dialog .s2t-swal-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(74,138,104,0.25); }
.s2t-crop-dialog .s2t-swal-btn-primary { background: var(--s2t-brand); color: #fff; }
.s2t-crop-dialog .s2t-swal-btn-primary:hover { background: var(--s2t-brand-strong); color: #fff; }
.s2t-crop-dialog .s2t-swal-btn-outline { background: #fff; color: var(--s2t-brand); border-color: var(--s2t-brand); }
.s2t-crop-dialog .s2t-swal-btn-outline:hover { background: var(--s2t-brand); color: #fff; }
.s2t-crop-dialog .s2t-swal-btn-cancel { background: #fff; color: var(--s2t-text); border-color: #D5DAD7; }
.s2t-crop-dialog .s2t-swal-btn-cancel:hover { background: var(--s2t-brand-subtle); color: var(--s2t-text); }

/* ============================================================================
   productmanage (member/productmanage) -- merchant Product Relationship Mgmt.
   Page reskin on the s2t-theme foundation (owner-approved 2026-06-23). Scoped
   under #EchoMainContent .s2t-prodmanage so it only touches this fragment.
   Token-driven (reusable on other brands by swapping tokens); the page's
   functional colour-coding is KEPT but toned to the Frega palette via the
   swappable s4 tokens in s2t-theme.css.
   ============================================================================ */

/* ---- "Listings" dashboard: an at-a-glance, semantically colour-coded grid so
        the merchant understands their listing health in one view. Responsive
        auto-fit cards (stack on mobile, multi-column on wider screens). ---- */
#EchoMainContent .s2t-prodmanage .s2t-pm-stats { margin: var(--s2t-space-5) 0 var(--s2t-space-2); }
#EchoMainContent .s2t-prodmanage .s2t-pm-stats-head {
  font-size: var(--s2t-text-h2); font-weight: 700; color: var(--s2t-brand-deep);
  margin: 0 0 var(--s2t-space-3); line-height: 1.2;
}
#EchoMainContent .s2t-prodmanage .s2t-pm-stat-grid {
  display: grid; gap: var(--s2t-space-3);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
#EchoMainContent .s2t-prodmanage .s2t-pm-stat {
  display: flex; flex-direction: column-reverse; gap: var(--s2t-space-1);
  background: #fff; border: 1px solid #E6ECE9;
  border-left: 4px solid var(--s2t-brand-light); border-radius: var(--s2t-radius-sm);
  padding: var(--s2t-space-3) var(--s2t-space-4); min-width: 0;
}
#EchoMainContent .s2t-prodmanage .s2t-pm-stat-val {
  font-size: 28px; font-weight: 800; color: var(--s2t-brand-deep);
  line-height: 1; font-variant-numeric: tabular-nums;
}
#EchoMainContent .s2t-prodmanage .s2t-pm-stat-label {
  font-size: var(--s2t-text-small); color: var(--s2t-muted); font-weight: 600;
}
/* semantic accents (functional meaning kept, toned to palette via tokens) */
#EchoMainContent .s2t-prodmanage .s2t-pm-stat:has(#ActiveList) { border-left-color: var(--s2t-brand); background: var(--s2t-brand-subtle); }
#EchoMainContent .s2t-prodmanage .s2t-pm-stat:has(#ActiveList) .s2t-pm-stat-val { color: var(--s2t-brand-strong); }
#EchoMainContent .s2t-prodmanage .s2t-pm-stat:has(#EndingHour) { border-left-color: var(--s2t-accent); }
#EchoMainContent .s2t-prodmanage .s2t-pm-stat:has(#EndingToday) { border-left-color: var(--s2t-accent); }
#EchoMainContent .s2t-prodmanage .s2t-pm-stat:has(#ScheduledList) { border-left-color: var(--s2t-brand-light); }
#EchoMainContent .s2t-prodmanage .s2t-pm-stat:has(#UnsoldList) { border-left-color: var(--s2t-muted); }
#EchoMainContent .s2t-prodmanage .s2t-pm-stat:has(#InActiveList) { border-left-color: var(--s2t-muted); }
#EchoMainContent .s2t-prodmanage .s2t-pm-stat:has(#Ended90Days) { border-left-color: var(--s2t-muted); }
#EchoMainContent .s2t-prodmanage .s2t-pm-stat:has(#ActiveList) .s2t-pm-stat-val,
#EchoMainContent .s2t-prodmanage .s2t-pm-stat:has(#EndingHour) .s2t-pm-stat-val,
#EchoMainContent .s2t-prodmanage .s2t-pm-stat:has(#EndingToday) .s2t-pm-stat-val { }
/* InvestPlus call-out stat: S2T-accent tint, links out */
#EchoMainContent .s2t-prodmanage .s2t-pm-stat-invest { border-left-color: var(--s2t-accent-invest); }
#EchoMainContent .s2t-prodmanage .s2t-pm-stat-invest a { display: flex; flex-direction: column-reverse; gap: var(--s2t-space-1); text-decoration: none; }
#EchoMainContent .s2t-prodmanage .s2t-pm-stat-invest .s2t-pm-stat-val { color: var(--s2t-accent); }
#EchoMainContent .s2t-prodmanage .s2t-pm-stat-invest .s2t-pm-stat-label { text-decoration: underline; }

/* ---- panel header bands: keep the two grids visually distinct (Library green,
        Active Listings orange) via the swappable s4 band tokens ---- */
#EchoMainContent .s2t-prodmanage .s2t-panel-head { display: flex; align-items: center; gap: var(--s2t-space-3); flex-wrap: wrap; }
#EchoMainContent .s2t-prodmanage .s2t-panel-actions { display: flex; align-items: center; gap: var(--s2t-space-2); flex-wrap: wrap; margin-left: auto; }
#EchoMainContent .s2t-prodmanage .s2t-pm-band-library { background: var(--s2t-band-library-bg); }
#EchoMainContent .s2t-prodmanage .s2t-pm-band-library .s2t-panel-title { color: var(--s2t-band-library-fg); }
#EchoMainContent .s2t-prodmanage .s2t-pm-band-listings { background: var(--s2t-band-listings-bg); }
#EchoMainContent .s2t-prodmanage .s2t-pm-band-listings .s2t-panel-title { color: var(--s2t-band-listings-fg); }
#EchoMainContent .s2t-prodmanage .s2t-pm-band-sub { font-weight: 400; font-size: var(--s2t-text-small); opacity: .85; }
#EchoMainContent .s2t-prodmanage .s2t-pm-band-info { color: inherit; opacity: .65; }
#EchoMainContent .s2t-prodmanage .s2t-pm-tablewrap { padding: var(--s2t-space-4); }

/* ---- row action buttons -> Frega pills. The grid row HTML comes from the
        RSWS endpoint, so we retint its .simpleButtonN classes here rather than
        in markup. Green = primary/edit, danger-outline = destructive. ---- */
#EchoMainContent .s2t-prodmanage .simpleButton4,
#EchoMainContent .s2t-prodmanage .simpleButton5,
#EchoMainContent .s2t-prodmanage .simpleButton6,
#EchoMainContent .s2t-prodmanage .simpleButton7,
#EchoMainContent .s2t-prodmanage .simpleButton8,
#EchoMainContent .s2t-prodmanage .simpleButton9 {
  display: inline-flex; align-items: center; justify-content: center; width: auto;
  min-height: 34px; padding: var(--s2t-space-2) var(--s2t-space-4);
  font-family: var(--s2t-font); font-size: var(--s2t-text-small); font-weight: 700;
  line-height: 1; white-space: nowrap; text-align: center;
  border: 1px solid transparent; border-radius: var(--s2t-radius-btn); cursor: pointer;
  transition: background-color var(--s2t-dur-fast) var(--s2t-ease-standard),
              border-color var(--s2t-dur-fast) var(--s2t-ease-standard),
              color var(--s2t-dur-fast) var(--s2t-ease-standard);
}
/* Setup Listing + Manage = primary green solid CTA */
#EchoMainContent .s2t-prodmanage .simpleButton7,
#EchoMainContent .s2t-prodmanage .simpleButton5 { background: var(--s2t-brand); color: #fff; }
#EchoMainContent .s2t-prodmanage .simpleButton7:hover,
#EchoMainContent .s2t-prodmanage .simpleButton5:hover { background: var(--s2t-brand-strong); color: #fff; }
/* Edit + Show = green outline */
#EchoMainContent .s2t-prodmanage .simpleButton4,
#EchoMainContent .s2t-prodmanage .simpleButton9 { background: #fff; color: var(--s2t-brand); border-color: var(--s2t-brand); }
#EchoMainContent .s2t-prodmanage .simpleButton4:hover,
#EchoMainContent .s2t-prodmanage .simpleButton9:hover { background: var(--s2t-brand); color: #fff; }
/* Delete + Remove = destructive outline (red reserved for destructive) */
#EchoMainContent .s2t-prodmanage .simpleButton6,
#EchoMainContent .s2t-prodmanage .simpleButton8 { background: #fff; color: var(--s2t-error); border-color: var(--s2t-error); }
#EchoMainContent .s2t-prodmanage .simpleButton6:hover,
#EchoMainContent .s2t-prodmanage .simpleButton8:hover { background: var(--s2t-error); color: #fff; }
/* edit-highlight modifier kept as a subtle accent ring (functional cue) */
#EchoMainContent .s2t-prodmanage .btnHighlight { box-shadow: 0 0 0 2px var(--s2t-accent-edit); }

/* the legacy .glass-container wrapper drew its own white card (border + 12px
   radius + shadow) AROUND the new .s2t-panel cards -> a card-in-a-card double
   container. #ProdManageFrm carries both classes, so neutralise the wrapper's
   chrome here: it becomes a plain layout region and the .s2t-panel cards are
   the only containers (FregaForce-web contained-panel posture). */
#EchoMainContent .s2t-prodmanage {
  background: transparent; border: 0; box-shadow: none; border-radius: 0;
  padding: 0 0 var(--s2t-space-9);   /* breathing room below the last panel -> footer */
}
/* give the header/intro/stats (which sit directly on the page region, not in a
   panel) a little breathing room, and space the panels apart. */
#EchoMainContent .s2t-prodmanage > .containrow > .row,
#EchoMainContent .s2t-prodmanage > .row { padding-left: var(--s2t-space-1); padding-right: var(--s2t-space-1); }
#EchoMainContent .s2t-prodmanage .s2t-pm-panel { margin-top: var(--s2t-space-7); }
#EchoMainContent .s2t-prodmanage .s2t-pm-stats { margin-bottom: var(--s2t-space-6); }

/* productmanage is a dense two-table console -> give it a wider working area
   than the default 1170 .container, but ONLY when this page is mounted (scoped
   via :has so every other S2T page keeps the standard width). */
.container:has(.s2t-prodmanage) { max-width: 1560px; }
/* keep the row thumbnail compact so the Stock Code column stays narrow */
#EchoMainContent .s2t-prodmanage .listingTblImg img { max-width: 72px; height: auto; border-radius: var(--s2t-radius-sm); }
/* listing-type picker shown as a clean inline LIST (sized to option count in JS):
   on-brand border/radius, green selected row, no sprawl. */
#EchoMainContent .s2t-prodmanage .s2t-pm-table select {
  max-width: 170px; font-family: var(--s2t-font); font-size: var(--s2t-text-small);
  color: var(--s2t-text); background: #fff; cursor: pointer; outline: none;
  border: 1px solid #D5DAD7; border-radius: var(--s2t-radius-sm); padding: 2px;
}
#EchoMainContent .s2t-prodmanage .s2t-pm-table select:focus {
  border-color: var(--s2t-brand); box-shadow: 0 0 0 3px rgba(74,138,104,0.18);
}
#EchoMainContent .s2t-prodmanage .s2t-pm-table select option { padding: 4px 8px; }
#EchoMainContent .s2t-prodmanage .s2t-pm-table select option:checked {
  background: var(--s2t-brand); color: #fff; font-weight: 700;
}


/* ============================================================================
   productmanage -- Setup Listing form (#productSettingCont, the "Make Live"
   panel). Rebuilt on the s2t-theme foundation (owner-approved 2026-06-23):
   the legacy rainbow .prmCol* / .prmBDhead / .datagrid look is neutralised and
   the ~12 section cards are regrouped into 4 logical s2t panels (Product /
   Listing terms / Targeting & delivery / Promotion & add-ons). Scoped under
   #EchoMainContent .s2t-prodmanage .s2t-ls so productmanage.css (shared by
   merchant/salesmanagement + member/pos) is left untouched.

   REUSABLE PATTERN (portable to other brands by swapping tokens): a "contained
   panel grid" -- auto-fit CSS-grid of token-styled cards, each a soft-tinted
   header band + padded body; legacy per-section colour headers demoted to
   light uppercase sub-labels; form controls + CTA on the shared control/pill
   primitives. Only the identity tokens (S2T green band) are brand-specific.
   ============================================================================ */

/* form title ("Listing Setup:: <product> (<type>)") -> section heading */
#EchoMainContent .s2t-prodmanage .s2t-ls #titleDisp {
  font-size: var(--s2t-text-h2); font-weight: 800; color: var(--s2t-brand-deep);
  margin: 0 0 var(--s2t-space-2); line-height: 1.2; width: 100%;
}

/* responsive 4-panel grid: stacks on mobile, fills columns as width allows */
#EchoMainContent .s2t-prodmanage .s2t-ls-grid {
  display: grid; gap: var(--s2t-space-5); align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-top: var(--s2t-space-3);
}

/* the panel = s2t contained white card (matches the Product Library panel) */
#EchoMainContent .s2t-prodmanage .s2t-ls-panel {
  display: flex; flex-direction: column; min-width: 0; background: #fff;
  border: 1px solid #E6ECE9; border-radius: var(--s2t-radius-md);
  box-shadow: var(--s2t-shadow-1); overflow: hidden;
}
#EchoMainContent .s2t-prodmanage .s2t-ls-panel-head {
  background: var(--s2t-band-library-bg); color: var(--s2t-band-library-fg);
  font-weight: 700; font-size: var(--s2t-text-label);
  padding: var(--s2t-space-3) var(--s2t-space-4); line-height: 1.2;
}
#EchoMainContent .s2t-prodmanage .s2t-ls-panel-body {
  display: flex; flex-direction: column; gap: var(--s2t-space-5);
  padding: var(--s2t-space-4);
}

/* de-rainbow: the legacy .prmBDhead/.prmCol* coloured bars become light,
   left-aligned uppercase sub-section labels within each panel */
#EchoMainContent .s2t-prodmanage .s2t-ls .prmBDhead {
  background: transparent; color: var(--s2t-brand-deep); text-align: left;
  font-size: var(--s2t-text-small); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; padding: 0 0 var(--s2t-space-2);
  margin: 0 0 var(--s2t-space-1); border-bottom: 1px solid #E6ECE9; user-select: none;
}
#EchoMainContent .s2t-prodmanage .s2t-ls .prmBDhead:hover { text-shadow: none; }
#EchoMainContent .s2t-prodmanage .s2t-ls .prmBDhead i { color: var(--s2t-brand); margin-left: var(--s2t-space-1); }
#EchoMainContent .s2t-prodmanage .s2t-ls .prodDetailEdit { cursor: pointer; }
#EchoMainContent .s2t-prodmanage .s2t-ls .listingQA { color: var(--s2t-brand); float: right; }

/* sub-section + table chrome reset (these were separate bordered cards) */
#EchoMainContent .s2t-prodmanage .s2t-ls .countsWrapper { margin: 0; }
#EchoMainContent .s2t-prodmanage .s2t-ls .prmProdShow { background: transparent; border: 0; margin: 0; }
#EchoMainContent .s2t-prodmanage .s2t-ls .datagrid { border: 0; font-family: var(--s2t-font); font-size: var(--s2t-text-small); }
#EchoMainContent .s2t-prodmanage .s2t-ls .datagrid table td {
  border-left: 0; padding: var(--s2t-space-2); color: var(--s2t-text); font-size: var(--s2t-text-small);
}
#EchoMainContent .s2t-prodmanage .s2t-ls .datagrid table tbody td:first-child {
  color: var(--s2t-muted); font-weight: 600; white-space: nowrap;
}
/* zebra: neutral brand-subtle tint instead of the legacy blue (#E1EEF4) */
#EchoMainContent .s2t-prodmanage .s2t-ls .datagrid table tbody .alt td { background: var(--s2t-brand-subtle); }

/* read-only product display: image + key/value rows */
#EchoMainContent .s2t-prodmanage .s2t-ls .prmProdImg { text-align: center; }
#EchoMainContent .s2t-prodmanage .s2t-ls .mngImgLarge {
  width: 100%; max-width: 220px; height: auto; object-fit: cover; margin: 0 0 var(--s2t-space-2);
  border-radius: var(--s2t-radius-sm); border: 1px solid #E6ECE9;
}
#EchoMainContent .s2t-prodmanage .s2t-ls .prmProdDesc {
  display: flex; gap: var(--s2t-space-2); align-items: baseline; flex-wrap: wrap;
  padding: var(--s2t-space-1) 0; font-size: var(--s2t-text-small); font-weight: 700; color: var(--s2t-text);
}
#EchoMainContent .s2t-prodmanage .s2t-ls .prmDescHead { color: var(--s2t-muted); font-weight: 600; min-width: 84px; }
/* List Price highlight: was yellow-green (#d7ff95) -> brand-subtle chip */
#EchoMainContent .s2t-prodmanage .s2t-ls .prmProdDescHighlight {
  background: var(--s2t-brand-subtle); color: var(--s2t-brand-deep);
  border-radius: var(--s2t-radius-sm); padding: 2px var(--s2t-space-2); font-size: var(--s2t-text-body);
}

/* form controls -> shared s2t control styling (token border/radius/focus ring) */
#EchoMainContent .s2t-prodmanage .s2t-ls .form-control,
#EchoMainContent .s2t-prodmanage .s2t-ls select,
#EchoMainContent .s2t-prodmanage .s2t-ls input[type="text"],
#EchoMainContent .s2t-prodmanage .s2t-ls textarea {
  max-width: 100%; width: auto; min-height: 34px; font-family: var(--s2t-font);
  font-size: var(--s2t-text-small); color: var(--s2t-text); background: #fff;
  border: 1px solid #D5DAD7; border-radius: var(--s2t-radius-input);
  padding: var(--s2t-space-1) var(--s2t-space-2); outline: none;
  transition: border-color var(--s2t-dur-fast) var(--s2t-ease-standard),
              box-shadow var(--s2t-dur-fast) var(--s2t-ease-standard);
}
#EchoMainContent .s2t-prodmanage .s2t-ls textarea { width: 100%; min-height: 56px; }
#EchoMainContent .s2t-prodmanage .s2t-ls .form-control:focus,
#EchoMainContent .s2t-prodmanage .s2t-ls select:focus,
#EchoMainContent .s2t-prodmanage .s2t-ls input[type="text"]:focus,
#EchoMainContent .s2t-prodmanage .s2t-ls textarea:focus {
  border-color: var(--s2t-brand); box-shadow: 0 0 0 3px rgba(74,138,104,0.18);
}
/* currency-prefixed inputs keep their addon inline */
#EchoMainContent .s2t-prodmanage .s2t-ls .input-group { display: flex; align-items: center; gap: var(--s2t-space-1); flex-wrap: wrap; }
#EchoMainContent .s2t-prodmanage .s2t-ls .input-group-addon,
#EchoMainContent .s2t-prodmanage .s2t-ls .MerchTransactionCurrency { color: var(--s2t-muted); font-weight: 700; }
#EchoMainContent .s2t-prodmanage .s2t-ls .enqTypeForm { margin-top: var(--s2t-space-2); }
#EchoMainContent .s2t-prodmanage .s2t-ls .control-label { font-size: var(--s2t-text-small); color: var(--s2t-muted); font-weight: 600; }

/* "Special listing features" -> tidy vertical checklist */
#EchoMainContent .s2t-prodmanage .s2t-ls .listingFeature > label {
  display: block; font-weight: 700; color: var(--s2t-brand-deep);
  font-size: var(--s2t-text-small); text-transform: uppercase; letter-spacing: .04em;
  margin: 0 0 var(--s2t-space-2); padding-bottom: var(--s2t-space-2); border-bottom: 1px solid #E6ECE9;
}
#EchoMainContent .s2t-prodmanage .s2t-ls .listingFeature .input-group {
  display: block; line-height: 1.9; font-size: var(--s2t-text-small); color: var(--s2t-text);
}
#EchoMainContent .s2t-prodmanage .s2t-ls .listingFeature input[type="checkbox"] {
  margin-right: var(--s2t-space-2); accent-color: var(--s2t-brand); vertical-align: middle;
}

/* save bar -> right-aligned brand pill (was a navy full-width btnBlue bar) */
#EchoMainContent .s2t-prodmanage .s2t-ls-savebar {
  display: flex; justify-content: flex-end; margin-top: var(--s2t-space-6);
  padding: 0 var(--s2t-space-1);
}
#EchoMainContent .s2t-prodmanage .s2t-ls-publish {
  display: inline-flex; align-items: center; justify-content: center; float: none; width: auto;
  min-height: 44px; margin: 0; padding: var(--s2t-space-3) var(--s2t-space-8);
  background: var(--s2t-brand); color: #fff; border: 1px solid transparent;
  border-radius: var(--s2t-radius-pill); font-family: var(--s2t-font);
  font-size: var(--s2t-text-btn); font-weight: 700; line-height: 1; cursor: pointer;
  transition: background-color var(--s2t-dur-fast) var(--s2t-ease-standard);
}
#EchoMainContent .s2t-prodmanage .s2t-ls-publish:hover { background: var(--s2t-brand-strong); color: #fff; }
#EchoMainContent .s2t-prodmanage .s2t-ls-publish:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(74,138,104,0.30); }

/* neutralise two page-local inline styles that pre-date the rebuild:
   the No.-In-Stock value highlight (#eeff7e -> brand-subtle) and the grey
   border around the features box (the panel is now the container). */
#EchoMainContent .s2t-prodmanage .s2t-ls .numInStock { background: var(--s2t-brand-subtle); }
#EchoMainContent .s2t-prodmanage .s2t-ls .listingFeature { border: 0; padding: 0; margin: 0; }

/* ============================================================================
   productmanage -- "How it works" guide dialog (showProductManageHow()).
   SweetAlert2 popup rendered on document.body (outside #EchoMainContent), so
   skinned via the .s2t-how-dialog customClass with the shared tokens (which
   live on :root in s2t-theme.css). Mirrors the .s2t-crop-dialog approach.
   ============================================================================ */
.s2t-how-dialog { border-radius: var(--s2t-radius-md); padding: var(--s2t-space-5); }
.s2t-how-dialog .swal2-title {
  font-family: var(--s2t-font); color: var(--s2t-brand-deep);
  font-size: var(--s2t-text-h2); font-weight: 800; padding: 0 var(--s2t-space-6) var(--s2t-space-3);
}
.s2t-how-dialog .swal2-html-container { font-family: var(--s2t-font); color: var(--s2t-text); text-align: left; margin: 0; }
.s2t-how .s2t-how-intro { font-size: var(--s2t-text-body); color: var(--s2t-muted); margin: 0 0 var(--s2t-space-4); }
.s2t-how-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2t-space-4); }
.s2t-how-steps > li { display: flex; gap: var(--s2t-space-3); align-items: flex-start; }
.s2t-how-num {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; background: var(--s2t-brand); color: #fff;
  font-weight: 800; font-size: var(--s2t-text-body); line-height: 1;
}
.s2t-how-body h4 { margin: 2px 0 var(--s2t-space-1); font-size: var(--s2t-text-body); font-weight: 700; color: var(--s2t-brand-deep); }
.s2t-how-body p { margin: 0; font-size: var(--s2t-text-small); line-height: 1.5; color: var(--s2t-text); }
.s2t-how-tip {
  margin: var(--s2t-space-4) 0 0; padding: var(--s2t-space-3) var(--s2t-space-4);
  background: var(--s2t-brand-subtle); border-radius: var(--s2t-radius-sm);
  font-size: var(--s2t-text-small); color: var(--s2t-brand-deep);
}
.s2t-how-tip i { color: var(--s2t-brand); margin-right: var(--s2t-space-1); }
/* confirm button -> brand green pill (buttonsStyling:false) */
.s2t-how-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 42px; padding: var(--s2t-space-3) var(--s2t-space-7);
  background: var(--s2t-brand); color: #fff; border: 1px solid transparent;
  border-radius: var(--s2t-radius-pill); font-family: var(--s2t-font);
  font-size: var(--s2t-text-btn); font-weight: 700; cursor: pointer;
  transition: background-color var(--s2t-dur-fast) var(--s2t-ease-standard);
}
.s2t-how-btn:hover { background: var(--s2t-brand-strong); color: #fff; }
.s2t-how-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(74,138,104,0.30); }

/* on-brand "How?" header button (paired with FAQ) */
#EchoMainContent .s2t-prodmanage .s2t-pm-how {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 34px; padding: var(--s2t-space-2) var(--s2t-space-4); width: auto;
  background: #fff; color: var(--s2t-brand); border: 1px solid var(--s2t-brand);
  border-radius: var(--s2t-radius-pill); font-family: var(--s2t-font);
  font-size: var(--s2t-text-small); font-weight: 700; cursor: pointer;
  transition: background-color var(--s2t-dur-fast) var(--s2t-ease-standard),
              color var(--s2t-dur-fast) var(--s2t-ease-standard);
}
#EchoMainContent .s2t-prodmanage .s2t-pm-how:hover { background: var(--s2t-brand); color: #fff; }

/* ---- Edit Mode: the Product Library cells become bare server-rendered
        <input type=text> (ids SU_StockCode_/SU_Title_/SU_Price_/SU_Units_, NO
        class) at a fixed ~221px each -> 4 wide inputs overflowed the table.
        Make them fluid + give them the shared s2t control styling so they
        fill their column (table compresses to fit, no h-scroll) and match the
        rest of the page. The JS changed-cell amber highlight is left as-is
        (functional cue). ---- */
#EchoMainContent .s2t-prodmanage .s2t-pm-table tbody input[type="text"] {
  width: auto; box-sizing: border-box; min-height: 32px;
  font-family: var(--s2t-font); font-size: var(--s2t-text-small); color: var(--s2t-text);
  background: #fff; border: 1px solid #D5DAD7; border-radius: var(--s2t-radius-input);
  padding: var(--s2t-space-1) var(--s2t-space-2); outline: none;
  transition: border-color var(--s2t-dur-fast) var(--s2t-ease-standard),
              box-shadow var(--s2t-dur-fast) var(--s2t-ease-standard);
}
#EchoMainContent .s2t-prodmanage .s2t-pm-table tbody input[type="text"]:focus {
  border-color: var(--s2t-brand); box-shadow: 0 0 0 3px rgba(74,138,104,0.18);
}
/* ---- Edit Mode column sizing: cap the editable inputs so columns are not
        bloated by the browser-default (~221px) input size (owner: "table col
        width is quite wide"). Columns then size to their content; if the full
        grid is still wider than its container, the DataTable scrolls
        HORIZONTALLY (scrollX:true) rather than clipping or breaking anything
        (owner: "if the data is too wide we will have to allow the x scroll ...
        no use breaking the functionality"). No forced table-layout, no clip. ---- */
#EchoMainContent .s2t-prodmanage .s2t-pm-table tbody input[id^="SU_StockCode_"] { width: 110px; }
#EchoMainContent .s2t-prodmanage .s2t-pm-table tbody input[id^="SU_Title_"]     { width: 220px; }
#EchoMainContent .s2t-prodmanage .s2t-pm-table tbody input[id^="SU_Price_"]     { width: 110px; }
#EchoMainContent .s2t-prodmanage .s2t-pm-table tbody input[id^="SU_Units_"]     { width: 70px; }
/* The .s2t-panel foundation caps content at max-width:1100px (right for
   readable forms, too narrow for this dense 9-column console). The owner
   widened the container to 1560 for productmanage specifically, so let the
   TABLE panels fill it -> the grid uses the full width and only scrolls
   horizontally when the viewport itself is genuinely narrow. Scoped to
   productmanage; other pages keep the 1100 readable cap. */
#EchoMainContent .s2t-prodmanage .s2t-pm-panel { max-width: none; }

/* =====================================================================
   Member Gallery (member/gallery/content) -- page-chrome reskin on the
   s2t-theme.css foundation. Scoped to the gallery page; s2t-member.css is
   linked only by defaultFregaCom.master (S2T-only). The result-card grid
   lives in gallery.css. Added 2026-06-25 (UI-05 gallery page-loop).
   Brand-portable: only the --s2t-* identity tokens are S2T-specific.
   ===================================================================== */
/* wide gallery panel: keep it full-width but inset from the page edges (left/right
   margin) + give it internal padding so the title/FAQ/content aren't flush */
#EchoMainContent .s2t-gallery-panel {
    max-width: none;
    margin: var(--s2t-space-5) var(--s2t-space-5) var(--s2t-space-6);
    padding: var(--s2t-space-5);
}

/* header row */
#EchoMainContent .s2t-gallery-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s2t-space-3); margin-bottom: var(--s2t-space-4);
}
#EchoMainContent .s2t-gallery-title { margin: 0; font-weight: 800; color: var(--s2t-text); }
#EchoMainContent .s2t-gallery-faq { flex: 0 0 auto; }

/* search toolbar -- subtle brand-tint band, flex row */
#EchoMainContent .s2t-member-gallery-searchbar {
    display: flex; flex-wrap: wrap; align-items: stretch;
    gap: var(--s2t-space-3);
    padding: var(--s2t-space-3);
    background: #eef4f0;
    background: color-mix(in srgb, var(--s2t-brand) 8%, var(--s2t-surface));
    border: 1px solid var(--s2t-brand-light);
    border-radius: var(--s2t-radius-md);
    margin-bottom: var(--s2t-space-4);
}
#EchoMainContent .s2t-member-gallery-field { display: flex; align-items: stretch; min-width: 0; }
#EchoMainContent .s2t-gallery-loc,
#EchoMainContent .s2t-gallery-kw  { flex: 1 1 220px; }
#EchoMainContent .s2t-gallery-cat { flex: 1 1 180px; }
#EchoMainContent .s2t-gallery-go  { flex: 0 0 auto; }

#EchoMainContent .s2t-member-gallery-searchbar .s2t-gallery-ico {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 44px; width: 44px;
    background: var(--s2t-surface);
    border: 1px solid var(--s2t-field-border); border-right: 0;
    border-radius: var(--s2t-radius-input) 0 0 var(--s2t-radius-input);
    color: var(--s2t-brand);
}
#EchoMainContent .s2t-member-gallery-searchbar .s2t-input {
    flex: 1 1 auto; min-width: 0;
    border-top-left-radius: 0; border-bottom-left-radius: 0;
}
/* re-instate a caret on appearance:none selects (foundation strips it) */
#EchoMainContent .s2t-member-gallery-searchbar select.s2t-input {
    padding-right: 30px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234A8A68' d='M6 8.2 1.4 3.6 2.6 2.4 6 5.8l3.4-3.4 1.2 1.2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 12px;
}
#EchoMainContent .s2t-gallery-go .s2t-btn { white-space: nowrap; height: 100%; }
/* #locationSelect is a host div the server fills with a full <select> (avoids
   the legacy nested-select); make it flex so the injected control fills the field */
#EchoMainContent .s2t-gallery-loc #locationSelect { flex: 1 1 auto; min-width: 0; display: flex; }
#EchoMainContent .s2t-gallery-loc #locationSelect select {
    flex: 1 1 auto; min-width: 0; border-top-left-radius: 0; border-bottom-left-radius: 0;
}

/* share row */
#EchoMainContent .s2t-gallery-share {
    display: flex; flex-wrap: wrap; align-items: flex-start;
    gap: var(--s2t-space-4) var(--s2t-space-6);
    padding-bottom: var(--s2t-space-4); margin-bottom: var(--s2t-space-4);
    border-bottom: 1px solid var(--s2t-brand-light);
}
#EchoMainContent .s2t-gallery-share-label {
    display: block; font-weight: 700; color: var(--s2t-text);
    margin: 0 0 var(--s2t-space-2); min-height: 1.2em;
}
#EchoMainContent .s2t-gallery-share-social { flex: 0 0 auto; }
#EchoMainContent .s2t-gallery-social {
    list-style: none; display: flex; gap: var(--s2t-space-3); margin: 0; padding: 0;
    align-items: center; height: 48px;
}
#EchoMainContent .s2t-gallery-social a {
    color: var(--s2t-brand); font-size: 1.5rem; line-height: 1; transition: color .15s ease;
}
#EchoMainContent .s2t-gallery-social a:hover { color: var(--s2t-brand-strong); }
#EchoMainContent .s2t-gallery-share-link { flex: 1 1 320px; }

/* copy-and-email link field: [icon][input][copy button] */
#EchoMainContent .s2t-gallery-linkfield.s2t-input-group { display: flex; align-items: stretch; max-width: 480px; }
#EchoMainContent .s2t-gallery-linkfield .s2t-input {
    flex: 1 1 auto; min-width: 0; border-radius: var(--s2t-radius-input) 0 0 var(--s2t-radius-input);
}
#EchoMainContent .s2t-gallery-linkfield .s2t-input-icon { color: var(--s2t-brand); }
#EchoMainContent .s2t-gallery-copy {
    flex: 0 0 auto; border-radius: 0 var(--s2t-radius-input) var(--s2t-radius-input) 0;
    border-left: 0; padding-left: var(--s2t-space-4); padding-right: var(--s2t-space-4);
}

/* loading + empty states (injected by gallery JS) */
#EchoMainContent .s2t-gallery-loading {
    display: flex; align-items: center; justify-content: center;
    padding: var(--s2t-space-6);
}
/* spinner itself = the canonical .frega-load-spinner in css/frega-loading.css */
#EchoMainContent .s2t-gallery-empty {
    text-align: center; padding: var(--s2t-space-7) var(--s2t-space-4); color: var(--s2t-muted);
}
#EchoMainContent .s2t-gallery-empty-ico {
    font-size: 2.2rem; color: var(--s2t-brand-light); display: block; margin-bottom: var(--s2t-space-3);
}

/* mobile: stack search fields + share columns */
@media (max-width: 768px) {
    #EchoMainContent .s2t-gallery-panel { margin-left: var(--s2t-space-3); margin-right: var(--s2t-space-3); padding: var(--s2t-space-4); }
    #EchoMainContent .s2t-member-gallery-field { flex: 1 1 100%; }
    #EchoMainContent .s2t-gallery-share { flex-direction: column; align-items: stretch; gap: var(--s2t-space-3); }
}

/* ============================================================================
   gallery > expandedview (member/gallery/expandedview/content) -- the advert
   DETAIL page. Full per-page reskin on the s2t-theme foundation (owner-approved
   2026-06-25, gallery page-loop increment 2). Replaces the page's ~250-line
   inline <style> (off-brand blue, floats, fixed heights). fotorama -> Swiper 11
   (Thumbs + Zoom). All scoped under #EchoMainContent .s2t-exview (loaded into
   the SPA content target) -> never the other 5 brands (this file is linked only
   by defaultFregaCom.master). Patterns are brand-agnostic/token-driven; only the
   accent tokens are S2T-specific. The server (Default.aspx.cs) still emits the
   legacy class names (.exViewDescType/.exViewDesc/.prodAvail/.prodSizeHead/
   .prodSizeDetail/.makerDetails/.shareLink/.Master-social/.storeFootTitle etc.)
   into the runat=server divs, so they are skinned here -- markup contract intact.
   ============================================================================ */

/* DOUBLE-SCROLLBAR FIX (body-level, deliberately flat + :has-gated).
   The global normalize rule `html, body { overflow-x: hidden }` forces the
   browser to compute body's overflow-y to `auto`, making <body id="top"> a
   second scroll container. It only shows a bar when body content overflows
   its box by a few px (this page does, ~12px from the share-tab social row;
   the gallery page happens to fit, so it never showed there). Switching
   overflow-x to `clip` still blocks horizontal scroll but does NOT force
   overflow-y to auto, so body stops scrolling -- the window (html) keeps the
   single page scroll. Gated by :has(.s2t-exview) so it ONLY applies on this
   page (s2t-member.css is S2T-only; this rule never touches other brands or
   other S2T pages). Reusable pattern for any in-shell page that double-scrolls. */
body:has(.s2t-exview) { overflow-x: clip; }

/* ---- head: type tag + nav + FAQ ---- */
#EchoMainContent .s2t-exview .s2t-exview-head {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--s2t-space-3) var(--s2t-space-4);
    padding: var(--s2t-space-5); border-bottom: 1px solid #E6ECE9;
}
/* the server emits <div class="exViewDescType">Type:</div><div class="exViewDesc">Title</div> */
#EchoMainContent .s2t-exview .s2t-exview-typetag {
    display: inline-flex; align-items: stretch; min-width: 0;
    border-radius: var(--s2t-radius-pill); overflow: hidden;
    font-weight: 700; font-size: var(--s2t-text-small);
}
#EchoMainContent .s2t-exview .s2t-exview-typetag .exViewDescType {
    float: none; background: var(--s2t-brand-deep); color: #fff;
    padding: var(--s2t-space-2) var(--s2t-space-3); white-space: nowrap;
}
#EchoMainContent .s2t-exview .s2t-exview-typetag .exViewDesc {
    background: var(--s2t-brand-subtle); color: var(--s2t-brand-deep);
    padding: var(--s2t-space-2) var(--s2t-space-3); overflow: hidden; text-overflow: ellipsis;
}
#EchoMainContent .s2t-exview .s2t-exview-headtools {
    display: flex; align-items: center; gap: var(--s2t-space-4); flex-wrap: wrap;
}
#EchoMainContent .s2t-exview .s2t-exview-nav {
    display: flex; align-items: center; gap: var(--s2t-space-2) var(--s2t-space-4);
    flex-wrap: wrap; font-size: var(--s2t-text-small);
}
#EchoMainContent .s2t-exview .s2t-exview-cart { display: inline-flex; align-items: center; gap: var(--s2t-space-2); }
#EchoMainContent .s2t-exview .s2t-exview-cartqty {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; padding: 0 6px;
    background: var(--s2t-brand); color: #fff; border-radius: var(--s2t-radius-pill);
    font-weight: 700; font-size: var(--s2t-text-label); text-decoration: none;
}
#EchoMainContent .s2t-exview .s2t-exview-faq { min-height: 38px; padding: var(--s2t-space-2) var(--s2t-space-4); }

/* ---- body: two columns (media | buy-box) ---- */
#EchoMainContent .s2t-exview .s2t-exview-body {
    display: grid; grid-template-columns: 1fr; gap: var(--s2t-space-5);
    padding: var(--s2t-space-5);
}
@media (min-width: 992px) {
    #EchoMainContent .s2t-exview .s2t-exview-body { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s2t-space-6); }
}
#EchoMainContent .s2t-exview .s2t-exview-media { min-width: 0; }

/* ---- Swiper gallery skin (base classes from swiper-bundle.min.css) ---- */
#EchoMainContent .s2t-exview .s2t-gal-main {
    width: 100%; border: 1px solid #E6ECE9; border-radius: var(--s2t-radius-md);
    overflow: hidden; background: var(--s2t-brand-subtle);
    --swiper-navigation-size: 18px;
}
#EchoMainContent .s2t-exview .s2t-gal-main .swiper-slide {
    display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3;
}
#EchoMainContent .s2t-exview .s2t-gal-main .swiper-slide img { width: 100%; height: 100%; object-fit: contain; display: block; }
#EchoMainContent .s2t-exview .s2t-gal-main .swiper-button-next,
#EchoMainContent .s2t-exview .s2t-gal-main .swiper-button-prev {
    width: 40px; height: 40px; border-radius: var(--s2t-radius-pill);
    background: rgba(255,255,255,0.9); color: var(--s2t-brand-deep);
    box-shadow: var(--s2t-shadow-2);
}
#EchoMainContent .s2t-exview .s2t-gal-thumbs { margin-top: var(--s2t-space-2); }
#EchoMainContent .s2t-exview .s2t-gal-thumbs .swiper-slide {
    height: 64px; cursor: pointer; border: 2px solid transparent;
    border-radius: var(--s2t-radius-sm); overflow: hidden; opacity: 0.55;
    transition: opacity var(--s2t-dur-fast) var(--s2t-ease-standard), border-color var(--s2t-dur-fast) var(--s2t-ease-standard);
}
#EchoMainContent .s2t-exview .s2t-gal-thumbs .swiper-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
#EchoMainContent .s2t-exview .s2t-gal-thumbs .swiper-slide-thumb-active { opacity: 1; border-color: var(--s2t-brand); }

/* ---- details card (under the gallery) ---- */
#EchoMainContent .s2t-exview .s2t-exview-details {
    margin-top: var(--s2t-space-4); background: var(--s2t-brand-subtle);
    border: 1px solid #E6ECE9; border-radius: var(--s2t-radius-md); padding: var(--s2t-space-4);
}
#EchoMainContent .s2t-exview .s2t-exview-maker { font-weight: 700; color: var(--s2t-brand-deep); font-size: var(--s2t-text-body); }
#EchoMainContent .s2t-exview .s2t-exview-maker .makerDetails { float: none; display: inline; margin-right: var(--s2t-space-1); color: var(--s2t-text); }
#EchoMainContent .s2t-exview .s2t-exview-maker .makerDetails::after { content: " |"; color: var(--s2t-brand-light); }
#EchoMainContent .s2t-exview .s2t-exview-specrow { display: flex; flex-wrap: wrap; gap: var(--s2t-space-3) var(--s2t-space-5); }
#EchoMainContent .s2t-exview .s2t-exview-spec { flex: 1 1 45%; min-width: 0; margin-top: var(--s2t-space-3); }
#EchoMainContent .s2t-exview .s2t-exview-spec-full { flex-basis: 100%; }
#EchoMainContent .s2t-exview .s2t-exview-shipping { margin-top: var(--s2t-space-3); }
#EchoMainContent .s2t-exview .prodSizeHead { font-weight: 700; color: var(--s2t-brand-deep); font-size: var(--s2t-text-small); }
#EchoMainContent .s2t-exview .prodSizeDetail { font-size: var(--s2t-text-small); color: var(--s2t-text); padding-top: 2px; }
#EchoMainContent .s2t-exview .prodShipSpace { margin-top: var(--s2t-space-2); }

/* ---- buy-box (right column) ---- */
#EchoMainContent .s2t-exview .s2t-exview-buy { display: flex; flex-direction: column; gap: var(--s2t-space-3); min-width: 0; }
#EchoMainContent .s2t-exview .s2t-exview-store { font-size: var(--s2t-text-h2); font-weight: 700; }
#EchoMainContent .s2t-exview .s2t-exview-store a { color: var(--s2t-brand-strong); text-decoration: none; }
#EchoMainContent .s2t-exview .s2t-exview-store a:hover { color: var(--s2t-accent); text-decoration: underline; }
#EchoMainContent .s2t-exview .s2t-exview-shortdesc { font-weight: 700; font-size: var(--s2t-text-body); color: var(--s2t-text); }
/* flows with the page -- no inner scrollbar (avoids the double scroll bar) */
#EchoMainContent .s2t-exview .s2t-exview-longdesc {
    line-height: 1.5; color: var(--s2t-text); word-wrap: break-word;
}
#EchoMainContent .s2t-exview .s2t-exview-qty { display: flex; flex-wrap: wrap; gap: var(--s2t-space-2); }
#EchoMainContent .s2t-exview .s2t-exview-qty .prodAvail {
    flex: 0 1 auto; width: auto; max-width: none; float: none;
    font-size: var(--s2t-text-small); color: var(--s2t-text);
    background: var(--s2t-brand-subtle); border: 1px solid var(--s2t-brand-light);
    border-radius: var(--s2t-radius-sm); padding: var(--s2t-space-2) var(--s2t-space-3);
}
#EchoMainContent .s2t-exview .s2t-exview-date { font-size: var(--s2t-text-small); color: var(--s2t-muted); }
#EchoMainContent .s2t-exview .s2t-exview-date .smallHead { font-weight: 700; color: var(--s2t-brand-deep); }
#EchoMainContent .s2t-exview .s2t-exview-price #prodPrice {
    font-size: var(--s2t-text-h2); font-weight: 700; color: var(--s2t-brand-deep);
    background: var(--s2t-brand-subtle); border: 1px solid var(--s2t-brand-light);
    border-radius: var(--s2t-radius-md); padding: var(--s2t-space-3) var(--s2t-space-4); text-align: center;
}
#EchoMainContent .s2t-exview .s2t-exview-price .enqMsgDisp {
    display: block; font-weight: 400; font-size: var(--s2t-text-body); color: var(--s2t-text);
    margin-bottom: var(--s2t-space-2);
}
#EchoMainContent .s2t-exview .s2t-exview-price .curXSmall { font-size: var(--s2t-text-label); color: var(--s2t-muted); font-weight: 400; }
#EchoMainContent .s2t-exview .s2t-exview-cta { width: 100%; }
#EchoMainContent .s2t-exview .s2t-exview-bid { margin-top: var(--s2t-space-2); max-width: 220px; }
#EchoMainContent .s2t-exview .s2t-exview-merchlogo { margin-top: var(--s2t-space-3); }
#EchoMainContent .s2t-exview .s2t-exview-merchlogo .storeLogoFoot { text-align: center; }
#EchoMainContent .s2t-exview .s2t-exview-merchlogo .storeLogoFoot img { max-width: 160px; height: auto; }
#EchoMainContent .s2t-exview .s2t-exview-merchlogo .storeFootTitle { text-align: center; font-weight: 700; margin-top: var(--s2t-space-2); }
#EchoMainContent .s2t-exview .s2t-exview-merchlogo .storeFootTitle a { color: var(--s2t-brand-strong); text-decoration: none; }

/* ---- detail tabs (BS5; data-bs-toggle fixed in markup) ---- */
#EchoMainContent .s2t-exview .s2t-exview-tabs { padding: 0 var(--s2t-space-5) var(--s2t-space-5); }
#EchoMainContent .s2t-exview .s2t-exview-tablist.nav-tabs {
    border-bottom: 2px solid var(--s2t-brand-light); gap: var(--s2t-space-1); flex-wrap: wrap;
}
#EchoMainContent .s2t-exview .s2t-exview-tablist .nav-link {
    color: var(--s2t-muted); font-weight: 700; font-size: var(--s2t-text-body);
    border: 0; background: transparent; border-radius: var(--s2t-radius-sm) var(--s2t-radius-sm) 0 0;
    padding: var(--s2t-space-3) var(--s2t-space-5); margin-bottom: -2px;
}
#EchoMainContent .s2t-exview .s2t-exview-tablist .nav-link:hover { color: var(--s2t-brand-strong); background: var(--s2t-brand-subtle); }
#EchoMainContent .s2t-exview .s2t-exview-tablist .nav-link.active {
    color: var(--s2t-brand-deep); background: var(--s2t-brand-subtle);
    border-bottom: 2px solid var(--s2t-brand);
}
#EchoMainContent .s2t-exview .s2t-exview-tabcontent { padding-top: var(--s2t-space-4); }
#EchoMainContent .s2t-exview .s2t-exview-tabhead { font-weight: 700; color: var(--s2t-brand-deep); margin-bottom: var(--s2t-space-2); }
#EchoMainContent .s2t-exview .ProdTac { font-size: var(--s2t-text-small); color: var(--s2t-text); }
#EchoMainContent .s2t-exview .s2t-exview-qa { margin-top: var(--s2t-space-3); color: var(--s2t-muted); }
#EchoMainContent .s2t-exview .s2t-exview-ppblock {
    margin-bottom: var(--s2t-space-4); border: 1px solid #E6ECE9;
    border-radius: var(--s2t-radius-sm); padding: var(--s2t-space-3);
}

/* ---- share tab (server fills #storeLink with input#storelinkTxt + .shareLink; #SocialLinksLinks with ul.Master-social) ---- */
#EchoMainContent .s2t-exview .s2t-exview-sharebox { display: flex; flex-direction: column; gap: var(--s2t-space-3); }
#EchoMainContent .s2t-exview .s2t-exview-sharelede p { margin: var(--s2t-space-1) 0; }
#EchoMainContent .s2t-exview .s2t-exview-sharebox input[type="text"] {
    width: 100%; min-height: 44px; padding: var(--s2t-space-2) var(--s2t-space-3);
    font-family: var(--s2t-font); font-size: var(--s2t-text-body); color: var(--s2t-text);
    background: #fff; border: 1px solid var(--s2t-field-border); border-radius: var(--s2t-radius-input);
}
#EchoMainContent .s2t-exview .shareLink {
    display: inline-flex; align-items: center; gap: var(--s2t-space-2);
    margin-top: var(--s2t-space-2); padding: var(--s2t-space-2) var(--s2t-space-4);
    background: var(--s2t-brand); color: #fff; font-weight: 700; cursor: pointer;
    border-radius: var(--s2t-radius-pill); border: 0;
    transition: background-color var(--s2t-dur-fast) var(--s2t-ease-standard);
}
#EchoMainContent .s2t-exview .shareLink:hover { background: var(--s2t-brand-strong); }
#EchoMainContent .s2t-exview .Master-social {
    list-style: none; display: flex; align-items: center; flex-wrap: wrap;
    gap: var(--s2t-space-4); margin: var(--s2t-space-3) 0 0; padding: 0;
    position: static; /* override shared main.css .Master-social{position:absolute} (footer class) so the row stays in flow + the panel reserves space (was falling off the bottom under the taller QR panel) */
}
#EchoMainContent .s2t-exview .storeSocialli { display: flex; align-items: center; margin: 0; padding: 0; }
#EchoMainContent .s2t-exview .Master-social a {
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--s2t-brand); font-size: 1.75rem; line-height: 1; text-decoration: none;
    transition: color var(--s2t-dur-fast) var(--s2t-ease-standard);
}
#EchoMainContent .s2t-exview .Master-social a:hover { color: var(--s2t-brand-strong); }
#EchoMainContent .s2t-exview .Master-social i { vertical-align: middle; line-height: 1; }

/* ---- QR share toggle (GAL-03): reads the live share URL from #storelinkTxt ---- */
#EchoMainContent .s2t-exview .s2t-exview-qrshare { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2t-space-3); }
#EchoMainContent .s2t-exview .s2t-exview-qrbtn { align-self: flex-start; font-size: var(--s2t-text-small); padding: var(--s2t-space-2) var(--s2t-space-4); }
#EchoMainContent .s2t-exview .s2t-exview-qrbtn i { margin-right: var(--s2t-space-2); }
#EchoMainContent .s2t-exview .s2t-exview-qrpanel {
    display: inline-flex; flex-direction: column; align-items: center; gap: var(--s2t-space-2);
    padding: var(--s2t-space-4); background: #fff;
    border: 1px solid var(--s2t-field-border); border-radius: var(--s2t-radius-md);
}
#EchoMainContent .s2t-exview .s2t-exview-qrpanel[hidden] { display: none; }
#EchoMainContent .s2t-exview .s2t-exview-qrimg { width: 168px; height: 168px; line-height: 0; }
#EchoMainContent .s2t-exview .s2t-exview-qrimg img,
#EchoMainContent .s2t-exview .s2t-exview-qrimg canvas { display: block; width: 168px; height: 168px; }
#EchoMainContent .s2t-exview .s2t-exview-qrimg table { margin: 0; }
#EchoMainContent .s2t-exview .s2t-exview-qrhint { margin: 0; max-width: 168px; font-size: var(--s2t-text-small); color: var(--s2t-muted); text-align: center; }

/* ---- mobile ---- */
@media (max-width: 768px) {
    #EchoMainContent .s2t-exview .s2t-exview-head { padding: var(--s2t-space-4); }
    #EchoMainContent .s2t-exview .s2t-exview-body { padding: var(--s2t-space-4); gap: var(--s2t-space-4); }
    #EchoMainContent .s2t-exview .s2t-exview-tabs { padding: 0 var(--s2t-space-4) var(--s2t-space-4); }
    #EchoMainContent .s2t-exview .s2t-exview-headtools { width: 100%; justify-content: space-between; }
}

/* ============================================================================
   cart (member/cart/content) -- buyer shopping cart. Full reskin on the
   s2t-theme foundation (owner-approved 2026-06-25). The page is a shell that
   injects server-built HTML (_GetCartMerchants / _GetCartItems) into #CartItems;
   these rules style that server markup. Scoped under #EchoMainContent .s2t-cart
   (s2t-member.css is linked only by defaultFregaCom.master) -> S2T-only.
   Brand-agnostic / token-driven; only the identity tokens are S2T-specific, so
   another brand adopts the pattern by swapping the --s2t-* values.
   ============================================================================ */

/* one rounded card per merchant group */
#EchoMainContent .s2t-cart-merch {
  border: 1px solid #E6ECE9; border-radius: var(--s2t-radius-md);
  background: var(--s2t-surface); margin-bottom: var(--s2t-space-5); overflow: hidden;
}
#EchoMainContent .s2t-cart-merch:last-child { margin-bottom: 0; }
#EchoMainContent .s2t-cart-merch-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s2t-space-3); flex-wrap: wrap;
  padding: var(--s2t-space-3) var(--s2t-space-4);
  background: var(--s2t-panel-head-bg); border-bottom: 1px solid #E6ECE9;
}
#EchoMainContent .s2t-cart-merch-name {
  display: inline-flex; align-items: center; gap: var(--s2t-space-2);
  font-weight: 700; color: var(--s2t-brand-deep); font-size: var(--s2t-text-body);
}
#EchoMainContent .s2t-cart-merch-name i { color: var(--s2t-brand); }
#EchoMainContent .s2t-cart-merch-totals { display: inline-flex; align-items: baseline; gap: var(--s2t-space-2); }
#EchoMainContent .s2t-cart-merch-sub { font-weight: 700; color: var(--s2t-text); white-space: nowrap; }
#EchoMainContent .s2t-cart-merch-cur { font-size: var(--s2t-text-small); color: var(--s2t-muted); }

/* item rows */
#EchoMainContent .s2t-cart-items { padding: 0 var(--s2t-space-4); }
#EchoMainContent .s2t-cart-row {
  display: flex; gap: var(--s2t-space-4); align-items: center;
  padding: var(--s2t-space-4) 0; border-bottom: 1px solid #EEF2F0;
}
#EchoMainContent .s2t-cart-row:last-child { border-bottom: 0; }
#EchoMainContent .s2t-cart-thumb {
  flex: 0 0 auto; width: 84px; height: 84px; border-radius: var(--s2t-radius-sm);
  overflow: hidden; background: var(--s2t-brand-subtle); border: 1px solid #E6ECE9;
  display: flex; align-items: center; justify-content: center;
}
#EchoMainContent .s2t-cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
#EchoMainContent .s2t-cart-main { flex: 1 1 auto; min-width: 0; }
#EchoMainContent .s2t-cart-title { font-weight: 600; line-height: 1.3; margin-bottom: var(--s2t-space-2); }
#EchoMainContent .s2t-cart-title a { color: var(--s2t-text); text-decoration: none; }
#EchoMainContent .s2t-cart-title a:hover { color: var(--s2t-brand); text-decoration: underline; }
#EchoMainContent .s2t-cart-pricerow { display: flex; align-items: center; gap: var(--s2t-space-5); flex-wrap: wrap; }
#EchoMainContent .s2t-cart-price { font-size: var(--s2t-text-h2); font-weight: 700; color: var(--s2t-brand-deep); }
#EchoMainContent .s2t-cart-price .s2t-cart-cur { font-size: var(--s2t-text-small); color: var(--s2t-muted); font-weight: 600; margin-right: 3px; }
#EchoMainContent .s2t-cart-price .s2t-cart-code { font-size: var(--s2t-text-small); color: var(--s2t-muted); font-weight: 600; margin-left: 6px; }

/* qty stepper (-/+ around the preserved number input) */
#EchoMainContent .s2t-cart-qty { display: inline-flex; align-items: center; }
#EchoMainContent .s2t-cart-qty-btn {
  width: 36px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--s2t-field-border); background: #fff; color: var(--s2t-brand);
  cursor: pointer; font-size: 13px; -webkit-user-select: none; user-select: none;
  transition: background var(--s2t-dur-fast) var(--s2t-ease-standard);
}
#EchoMainContent .s2t-cart-qty-btn:hover { background: var(--s2t-brand-subtle); }
#EchoMainContent .s2t-cart-qty-btn.is-minus { border-radius: var(--s2t-radius-sm) 0 0 var(--s2t-radius-sm); }
#EchoMainContent .s2t-cart-qty-btn.is-plus { border-radius: 0 var(--s2t-radius-sm) var(--s2t-radius-sm) 0; }
#EchoMainContent .s2t-cart-qty input.s2t-cart-qty-input {
  width: 46px; height: 38px; text-align: center; border: 1px solid var(--s2t-field-border);
  border-left: 0; border-right: 0; font-size: var(--s2t-text-body); color: var(--s2t-text);
  -moz-appearance: textfield; appearance: textfield; padding: 0;
}
#EchoMainContent .s2t-cart-qty input.s2t-cart-qty-input::-webkit-outer-spin-button,
#EchoMainContent .s2t-cart-qty input.s2t-cart-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#EchoMainContent .s2t-cart-qty input.s2t-cart-qty-input:focus { outline: none; border-color: var(--s2t-field-border); }

/* remove (trash) button */
#EchoMainContent .s2t-cart-remove {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--s2t-radius-sm);
  border: 1px solid #E6ECE9; background: #fff; color: var(--s2t-muted); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
  transition: color var(--s2t-dur-fast) var(--s2t-ease-standard),
              border-color var(--s2t-dur-fast) var(--s2t-ease-standard),
              background var(--s2t-dur-fast) var(--s2t-ease-standard);
}
#EchoMainContent .s2t-cart-remove:hover { color: var(--s2t-error); border-color: var(--s2t-error); background: #FCF3F2; }

/* merchant footer / checkout CTA */
#EchoMainContent .s2t-cart-merch-foot {
  display: flex; justify-content: flex-end; padding: var(--s2t-space-3) var(--s2t-space-4);
  border-top: 1px solid #E6ECE9; background: #FBFDFC;
}
#EchoMainContent .s2t-cart-checkout { min-width: 220px; }

/* empty state */
#EchoMainContent .s2t-cart-empty { text-align: center; padding: var(--s2t-space-8) var(--s2t-space-4); color: var(--s2t-muted); }
#EchoMainContent .s2t-cart-empty i { font-size: 40px; color: var(--s2t-brand-light); display: block; margin-bottom: var(--s2t-space-3); }
#EchoMainContent .s2t-cart-empty p { font-size: var(--s2t-text-body); margin: 0 0 var(--s2t-space-4); }

/* responsive: stack the row on phones (thumb + price/qty wrap, remove stays top-right) */
@media (max-width: 575px) {
  #EchoMainContent .s2t-cart-row { flex-wrap: wrap; align-items: flex-start; }
  #EchoMainContent .s2t-cart-main { flex: 1 1 100%; order: 3; }
  #EchoMainContent .s2t-cart-remove { order: 2; margin-left: auto; }
  #EchoMainContent .s2t-cart-checkout { min-width: 0; width: 100%; }
}

/* ============================================================
   HOME (web/Default.aspx) -- marketplace landing, reskin 2026-06-26.
   Reuses the accepted gallery toolbar/share primitives (.s2t-gallery-panel,
   .s2t-member-gallery-searchbar, .s2t-gallery-share); adds only the hero head.
   Premium 'Featured' card treatment lands in increment 2.
   ============================================================ */
#EchoMainContent .s2t-home-head {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: var(--s2t-space-3);
    margin-bottom: var(--s2t-space-4);
}
#EchoMainContent .s2t-home-title {
    margin: 0; font-weight: 800; line-height: 1.1; color: var(--s2t-text);
    font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.6rem);
}
#EchoMainContent .s2t-home-actions {
    display: flex; align-items: center; gap: var(--s2t-space-3); flex: 0 0 auto;
}
@media (max-width: 600px) {
    #EchoMainContent .s2t-home-head { flex-direction: column; align-items: stretch; }
    #EchoMainContent .s2t-home-actions { width: 100%; }
    #EchoMainContent .s2t-home-actions .s2t-btn { flex: 1 1 50%; justify-content: center; }
}
/* home share row: neutralise the leaked shared main.css .Master-social{position:absolute}
   (footer class reused by the server social list) so the row stays in flow (mobile overlap fix). */
#EchoMainContent .s2t-home-panel .Master-social { position: static; }

/* =====================================================================
   HOME marketplace listing grid -- web/Default.aspx (#premium1 + #galItems).
   Increment 2 of the home page-loop (2026-06-26), v2.
   Goals (owner-driven): one CONSISTENT card anatomy for standard + every
   premium tier (hero image in a fixed cover box on top, text below);
   EQUAL-HEIGHT rows; LEFT-aligned text (type pill centred); on-brand
   promoted-ad ring (no legacy yellow); generous BREATHING ROOM.
   Robust to the legacy nested-anchor DOM mangling (the hidden display:none
   SEO <a> at Merchant.cs:2004/2186/... splits the card's outer <a>, so the
   premium children come out inverted) -- so we force ALL direct children to
   full-width block stacking rather than relying on child order/width.
   Premium differs from standard only by WIDTH (full/half/quarter via
   flex-basis -> "sizes kept") + the S2T-accent Featured treatment. The
   inline randomColor() background is overridden with !important (NO
   server-builder edit). Scoped to .s2t-home-items. */

/* ---- flex grid on the bins + nested premium wrapper divs; equal-height rows ---- */
#EchoMainContent .s2t-home-items,
#EchoMainContent .s2t-home-items [id^="premium"] {
    display: flex; flex-wrap: wrap; align-items: stretch; align-content: flex-start;
    gap: 20px; background: transparent !important;
}
#EchoMainContent .s2t-home-items { margin-top: 6px; }
#EchoMainContent .s2t-home-items [id^="premium"] { width: 100%; margin: 0; }
/* the server wraps each card in an <a>; make it transparent so the inner
   .stGalCont (the size-carrying element) becomes the flex item */
#EchoMainContent .s2t-home-items > a,
#EchoMainContent .s2t-home-items [id^="premium"] > a { display: contents; }
#EchoMainContent .s2t-home-items a { text-decoration: none !important; color: inherit !important; }

/* ---- tier sizing (replaces the dead BS3 col-xs-* widths) ---- */
#EchoMainContent .s2t-home-items .stGalCont {
    display: flex; flex: 1 1 190px; max-width: 240px; min-width: 160px;
    padding: 0 !important; float: none !important; cursor: pointer;
}
#EchoMainContent .s2t-home-items .stGalCont:has(.premFull)  { flex-basis: 100%; max-width: none; }
#EchoMainContent .s2t-home-items .stGalCont:has(.premHalf)  { flex-basis: calc(50% - 20px);  max-width: none; min-width: 260px; }
#EchoMainContent .s2t-home-items .stGalCont:has(.premQuart) { flex-basis: calc(25% - 15px);  max-width: none; min-width: 210px; }

/* ---- one card shell for standard + premium (fills the stretched cell) ---- */
#EchoMainContent .s2t-home-items .stProdWrap,
#EchoMainContent .s2t-home-items .PremiumProdWrap {
    display: flex; flex-direction: column; width: 100%; height: 100%; margin: 0 !important;
    background: var(--s2t-surface, #fff); border-radius: var(--s2t-radius-md, 12px);
    overflow: hidden;
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
#EchoMainContent .s2t-home-items .stProdWrap { border: 1px solid var(--s2t-brand-light, #86AF99); box-shadow: var(--s2t-shadow-1, 0 1px 3px rgba(0,0,0,.08)); min-height: 330px; }
#EchoMainContent .s2t-home-items .stGalCont:hover .stProdWrap {
    box-shadow: var(--s2t-shadow-2, 0 2px 8px rgba(0,0,0,.10)); border-color: var(--s2t-brand, #4A8A68); transform: translateY(-2px);
}

/* promoted standard ad (.PremHighAd): on-brand accent ring, not legacy pale-yellow */
#EchoMainContent .s2t-home-items .stProdWrap.PremHighAd {
    background: var(--s2t-surface, #fff) !important;
    border-color: var(--s2t-accent, #F07A2D) !important;
    box-shadow: 0 0 0 1px var(--s2t-accent, #F07A2D), var(--s2t-shadow-1, 0 1px 3px rgba(0,0,0,.08));
}
#EchoMainContent .s2t-home-items .stGalCont:hover .stProdWrap.PremHighAd {
    box-shadow: 0 0 0 1px var(--s2t-accent, #F07A2D), 0 4px 16px rgba(240,122,45,.26);
}

/* ---- premium FEATURED: same anatomy, accent + badge; force full-width stacking ---- */
#EchoMainContent .s2t-home-items .PremiumProdWrap {
    position: relative;
    border: 1px solid var(--s2t-accent, #F07A2D) !important;
    box-shadow: 0 2px 10px rgba(240,122,45,.16); min-height: 330px;
}
#EchoMainContent .s2t-home-items .premFull,
#EchoMainContent .s2t-home-items .premHalf,
#EchoMainContent .s2t-home-items .premQuart { background: var(--s2t-surface, #fff) !important; flex-direction: column; min-height: 330px; }
#EchoMainContent .s2t-home-items .stGalCont:hover .PremiumProdWrap {
    box-shadow: 0 4px 16px rgba(240,122,45,.26); transform: translateY(-2px);
}
#EchoMainContent .s2t-home-items .PremiumProdWrap::before {
    content: "Featured"; position: absolute; top: 12px; left: 12px; z-index: 3;
    padding: 4px 12px; font-size: .62rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: #fff; background: var(--s2t-accent, #F07A2D); border-radius: var(--s2t-radius-pill, 9999px);
    box-shadow: 0 1px 4px rgba(0,0,0,.22);
}
/* every premium child stacks full-width (immune to the mangled column DOM) */
#EchoMainContent .s2t-home-items .premQuart > * { width: 100% !important; max-width: 100% !important; flex: 0 0 auto; margin: 0 !important; }
#EchoMainContent .s2t-home-items .premQuart > *:last-child { flex: 1 1 auto; }

/* ---- hero image box: one image, fixed cover, consistent per tier ---- */
#EchoMainContent .s2t-home-items .stProdRegImg,
#EchoMainContent .s2t-home-items .PremiumProdRegImg {
    margin: 0 !important; padding: 0 !important; border: 0 !important;
    width: 100% !important; height: auto !important;
    background: #f1f4f3; overflow: hidden; flex: 0 0 auto;
    display: block; aspect-ratio: 4 / 3;
    border-bottom: 1px solid var(--s2t-brand-light, #86AF99) !important;
}
#EchoMainContent .s2t-home-items .PremiumProdWrap .stProdRegImg,
#EchoMainContent .s2t-home-items .PremiumProdRegImg { border-bottom-color: color-mix(in srgb, var(--s2t-accent, #F07A2D) 35%, #fff) !important; }
#EchoMainContent .s2t-home-items .premFull .stProdRegImg,
#EchoMainContent .s2t-home-items .premFull .PremiumProdRegImg { aspect-ratio: 15 / 4; }   /* full-width banner */
#EchoMainContent .s2t-home-items .premHalf .stProdRegImg,
#EchoMainContent .s2t-home-items .premHalf .PremiumProdRegImg { aspect-ratio: 16 / 7; }
/* show the first image only -> consistent hero across every card */
#EchoMainContent .s2t-home-items .RegAdsImg {
    width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center;
    position: static !important; display: block; margin: 0 !important; float: none !important; max-width: none !important; max-height: none !important;
}
#EchoMainContent .s2t-home-items .PremiumProdRegImg .RegAdsImg ~ .RegAdsImg,
#EchoMainContent .s2t-home-items .PremiumProdRegImg .premiumImg_2 { display: none !important; }

/* ---- card text: LEFT aligned, type pill centred ---- */
#EchoMainContent .s2t-home-items .stRegProdListType,
#EchoMainContent .s2t-home-items .stRegProdDesc,
#EchoMainContent .s2t-home-items .stRegProdPrice,
#EchoMainContent .s2t-home-items .stRegProdStore,
#EchoMainContent .s2t-home-items .stRegProdLocation {
    text-align: left !important;
    padding-left: var(--s2t-space-4, 16px); padding-right: var(--s2t-space-4, 16px);
}
#EchoMainContent .s2t-home-items .stRegProdListType {
    display: block; width: fit-content; max-width: calc(100% - var(--s2t-space-5, 24px));
    margin: var(--s2t-space-4, 16px) auto var(--s2t-space-2, 8px);
    padding: 3px 12px; text-align: center !important;
    font-size: .64rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; line-height: 1.3;
    color: var(--s2t-brand-deep, #044D31);
    background: color-mix(in srgb, var(--s2t-brand, #4A8A68) 13%, #fff);
    border: 1px solid color-mix(in srgb, var(--s2t-brand, #4A8A68) 28%, #fff);
    border-radius: var(--s2t-radius-pill, 9999px);
}
#EchoMainContent .s2t-home-items .stRegProdDesc {
    margin-top: 2px; height: auto; max-height: none;
    font-size: .92rem; font-weight: 600; line-height: 1.32; color: var(--s2t-text, #1A1A1A);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#EchoMainContent .s2t-home-items .stRegProdPrice {
    margin-top: var(--s2t-space-2, 8px); font-size: .98rem; font-weight: 700; color: #923207;
}
#EchoMainContent .s2t-home-items .stRegProdPrice:empty { display: none; }
#EchoMainContent .s2t-home-items .stRegProdStore {
    margin-top: var(--s2t-space-4, 16px); padding-top: var(--s2t-space-3, 12px);
    border-top: 1px solid color-mix(in srgb, var(--s2t-brand-light, #86AF99) 55%, transparent);
    font-size: .8rem; line-height: 1.4; color: var(--s2t-text, #1A1A1A);
}
#EchoMainContent .s2t-home-items .stRegProdLocation {
    margin-top: var(--s2t-space-1, 4px); padding-bottom: var(--s2t-space-4, 16px);
    font-size: .74rem; line-height: 1.4; color: var(--s2t-muted, #848484); text-align: left !important;
}
/* footer (store+location) pinned to the bottom of the card -> aligned across a row */
#EchoMainContent .s2t-home-items .stProdWrap .stRegProdStore { margin-top: auto; }
#EchoMainContent .s2t-home-items .stRegProdStore::before,
#EchoMainContent .s2t-home-items .stRegProdLocation:has(.addrline:not(:empty))::before {
    font-family: "Font Awesome 5 Pro"; font-weight: 900;
    display: inline-block; width: 1.1em; margin-right: 5px; font-size: .82em; text-align: center; color: var(--s2t-brand, #4A8A68);
}
#EchoMainContent .s2t-home-items .stRegProdStore::before { content: "\f54e"; }   /* fa-store */
#EchoMainContent .s2t-home-items .stRegProdLocation:has(.addrline:not(:empty))::before { content: "\f3c5"; } /* fa-map-marker-alt */
#EchoMainContent .s2t-home-items .stRegProdLocation .addrline { display: inline; line-height: 1.3; }
#EchoMainContent .s2t-home-items .stRegProdLocation .addrline:empty { display: none; }
#EchoMainContent .s2t-home-items .stRegProdLocation .addrline + .addrline::before { content: ", "; }
#EchoMainContent .s2t-home-items .stRegProdLocation .addrline:empty + .addrline::before { content: ""; }

/* ---- misc server bits ---- */
#EchoMainContent .s2t-home-items .InvestPlusFull,
#EchoMainContent .s2t-home-items .InvestPlusHalf,
#EchoMainContent .s2t-home-items .InvestPlusQuart,
#EchoMainContent .s2t-home-items .InvestPlusStd { padding: 0 var(--s2t-space-4, 16px) var(--s2t-space-2, 8px); }
#EchoMainContent .s2t-home-items .InvestPlusFull img,
#EchoMainContent .s2t-home-items .InvestPlusHalf img,
#EchoMainContent .s2t-home-items .InvestPlusQuart img,
#EchoMainContent .s2t-home-items .InvestPlusStd img { height: 20px; width: auto; }
#EchoMainContent .s2t-home-items .fa-stop { color: var(--s2t-brand-light, #86AF99); }

/* ---- responsive ---- */
@media (max-width: 990px) {
    #EchoMainContent .s2t-home-items .stGalCont:has(.premHalf)  { flex-basis: 100%; }
    #EchoMainContent .s2t-home-items .stGalCont:has(.premQuart) { flex-basis: calc(50% - 10px); }
}
@media (max-width: 575px) {
    #EchoMainContent .s2t-home-items { gap: 14px; }
    #EchoMainContent .s2t-home-items .stGalCont { flex-basis: calc(50% - 7px); max-width: none; min-width: 0; }
    #EchoMainContent .s2t-home-items .stGalCont:has(.premFull),
    #EchoMainContent .s2t-home-items .stGalCont:has(.premHalf),
    #EchoMainContent .s2t-home-items .stGalCont:has(.premQuart) { flex-basis: 100%; }
    #EchoMainContent .s2t-home-items .premFull .stProdRegImg,
    #EchoMainContent .s2t-home-items .premFull .PremiumProdRegImg,
    #EchoMainContent .s2t-home-items .premHalf .stProdRegImg,
    #EchoMainContent .s2t-home-items .premHalf .PremiumProdRegImg { aspect-ratio: 16 / 9; }
}

/* =====================================================================
   HOME polish pass -- web/Default.aspx (2026-06-26).
   Driven by an impeccable-skill design critique + e-commerce marketplace
   best-practice research. Tier-1 craft (focus parity, hover image-zoom,
   reduced-motion, branded empty-image placeholder, premium banner balance,
   pill single-line) + four owner-approved opportunities (sticky search,
   category chips, skeleton loaders, result-count/sort bar). All scoped to
   the home; presentation only. */

/* ---- Tier-1: focus parity + hover image zoom (transform/shadow only, 180ms) ---- */
#EchoMainContent .s2t-home-items .stGalCont:focus-within .stProdWrap,
#EchoMainContent .s2t-home-items .stGalCont:focus-within .PremiumProdWrap {
    box-shadow: var(--s2t-shadow-2, 0 2px 8px rgba(0,0,0,.10));
    border-color: var(--s2t-brand, #4A8A68);
    outline: 2px solid color-mix(in srgb, var(--s2t-brand, #4A8A68) 60%, #fff);
    outline-offset: 2px;
}
#EchoMainContent .s2t-home-items .stGalCont:focus-within .PremiumProdWrap {
    outline-color: color-mix(in srgb, var(--s2t-accent, #F07A2D) 65%, #fff);
}
#EchoMainContent .s2t-home-items .RegAdsImg { transition: transform .25s cubic-bezier(.22,1,.36,1); }
#EchoMainContent .s2t-home-items .stGalCont:hover .RegAdsImg { transform: scale(1.045); }
@media (prefers-reduced-motion: reduce) {
    #EchoMainContent .s2t-home-items .stGalCont:hover .RegAdsImg,
    #EchoMainContent .s2t-home-items .stGalCont:hover .stProdWrap,
    #EchoMainContent .s2t-home-items .stGalCont:hover .PremiumProdWrap { transform: none !important; }
    #EchoMainContent .s2t-home-items .RegAdsImg,
    #EchoMainContent .s2t-home-items .stProdWrap,
    #EchoMainContent .s2t-home-items .PremiumProdWrap { transition: none !important; }
}

/* ---- Tier-1: branded empty/broken-image placeholder (no grey void / broken glyph) ---- */
#EchoMainContent .s2t-home-items .stProdRegImg,
#EchoMainContent .s2t-home-items .PremiumProdRegImg {
    background-color: color-mix(in srgb, var(--s2t-brand-light, #86AF99) 15%, #fff);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24' fill='none' stroke='%2386AF99' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center; background-size: 42px;
}
/* a card image that failed/empty gets .s2t-img-broken (set by JS) -> reveal placeholder */
#EchoMainContent .s2t-home-items .RegAdsImg.s2t-img-broken,
#EchoMainContent .s2t-home-items .RegAdsImg[src=""],
#EchoMainContent .s2t-home-items .RegAdsImg:not([src]) { opacity: 0 !important; }

/* ---- Tier-1: premium full-width banner balance + left pill on the wide tier ---- */
#EchoMainContent .s2t-home-items .premFull .stProdRegImg,
#EchoMainContent .s2t-home-items .premFull .PremiumProdRegImg { aspect-ratio: 24 / 7; }
#EchoMainContent .s2t-home-items .premFull .stRegProdDesc,
#EchoMainContent .s2t-home-items .premFull .stRegProdPrice,
#EchoMainContent .s2t-home-items .premFull .stRegProdStore,
#EchoMainContent .s2t-home-items .premFull .stRegProdLocation { max-width: 62ch; }
#EchoMainContent .s2t-home-items .premFull .stRegProdListType { margin-left: var(--s2t-space-4, 16px); margin-right: 0; }

/* ---- Tier-1: type pill stays single-line ---- */
#EchoMainContent .s2t-home-items .stRegProdListType {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- Tier-1: mobile -- reclaim the dead band above the first card ---- */
@media (max-width: 575px) {
    #EchoMainContent .s2t-home-items { margin-top: 0; }
    #EchoMainContent .s2t-home-panel .s2t-gallery-share { margin-bottom: var(--s2t-space-3, 12px); }
}

/* =====================================================================
   Opportunity 1 -- STICKY SEARCH TOOLBAR
   The containing .s2t-panel clips with overflow:hidden, which breaks
   sticky; lift the clip on the home panel only, then stick the toolbar
   below the fixed 74px nav. ===================================================================== */
#EchoMainContent .s2t-home-panel { overflow: visible; }
#EchoMainContent .s2t-home-panel .s2t-member-gallery-searchbar {
    position: sticky; top: 84px; z-index: 30;
    background: var(--s2t-surface, #fff);
    border-radius: var(--s2t-radius-md, 12px);
    transition: box-shadow .2s ease;
}
#EchoMainContent .s2t-home-panel .s2t-member-gallery-searchbar.s2t-stuck {
    box-shadow: 0 6px 18px -10px rgba(20,30,25,.45);
}

/* =====================================================================
   Opportunity 2 -- CATEGORY CHIPS (populated by JS from #resentSelect)
   ===================================================================== */
#EchoMainContent .s2t-home-chips {
    display: flex; flex-wrap: wrap; gap: var(--s2t-space-2, 8px);
    margin: var(--s2t-space-3, 12px) 0 0;
}
#EchoMainContent .s2t-home-chips:empty { display: none; }
#EchoMainContent .s2t-home-chip {
    appearance: none; cursor: pointer; font: inherit;
    padding: 5px 14px; line-height: 1.2;
    font-size: .8rem; font-weight: 600;
    color: var(--s2t-brand-deep, #044D31);
    background: color-mix(in srgb, var(--s2t-brand, #4A8A68) 9%, #fff);
    border: 1px solid color-mix(in srgb, var(--s2t-brand, #4A8A68) 26%, #fff);
    border-radius: var(--s2t-radius-pill, 9999px);
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
#EchoMainContent .s2t-home-chip:hover {
    background: color-mix(in srgb, var(--s2t-brand, #4A8A68) 16%, #fff);
    border-color: var(--s2t-brand, #4A8A68);
}
#EchoMainContent .s2t-home-chip:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--s2t-brand, #4A8A68) 60%, #fff); outline-offset: 2px;
}
#EchoMainContent .s2t-home-chip[aria-pressed="true"] {
    color: #fff; background: var(--s2t-brand, #4A8A68); border-color: var(--s2t-brand-deep, #044D31);
}

/* =====================================================================
   Opportunity 4 -- RESULT COUNT + SORT BAR (above the grid)
   ===================================================================== */
#EchoMainContent .s2t-home-resultbar {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s2t-space-3, 12px);
    flex-wrap: wrap;
    margin: var(--s2t-space-4, 16px) 0 var(--s2t-space-1, 4px);
    padding-bottom: var(--s2t-space-2, 8px);
    border-bottom: 1px solid color-mix(in srgb, var(--s2t-brand-light, #86AF99) 45%, transparent);
}
#EchoMainContent .s2t-home-count {
    font-size: .84rem; color: var(--s2t-muted, #848484);
}
#EchoMainContent .s2t-home-count strong { color: var(--s2t-text, #1A1A1A); font-weight: 700; }
#EchoMainContent .s2t-home-sort { display: inline-flex; align-items: center; gap: var(--s2t-space-2, 8px); }
#EchoMainContent .s2t-home-sort label { font-size: .8rem; color: var(--s2t-muted, #848484); }
#EchoMainContent .s2t-home-sort select.s2t-input {
    width: auto; min-width: 150px; height: 36px; padding: 4px 30px 4px 12px; font-size: .85rem;
}

/* =====================================================================
   Opportunity 3 -- SKELETON LOADERS (card-shaped shimmer)
   ===================================================================== */
#EchoMainContent .s2t-home-skeleton {
    display: flex; flex-wrap: wrap; gap: 20px; align-content: flex-start;
    margin-top: var(--s2t-space-2, 8px);
}
#EchoMainContent .s2t-home-skeleton[hidden] { display: none; }
#EchoMainContent .s2t-skel-card {
    flex: 1 1 190px; max-width: 240px; min-width: 160px;
    min-height: 330px; border-radius: var(--s2t-radius-md, 12px);
    border: 1px solid color-mix(in srgb, var(--s2t-brand-light, #86AF99) 55%, #fff);
    background: var(--s2t-surface, #fff); overflow: hidden;
    display: flex; flex-direction: column;
}
#EchoMainContent .s2t-skel-card .s2t-skel-img { width: 100%; aspect-ratio: 4 / 3; }
#EchoMainContent .s2t-skel-card .s2t-skel-line {
    height: 12px; border-radius: 6px; margin: 12px 16px 0;
}
#EchoMainContent .s2t-skel-card .s2t-skel-line.pill { height: 18px; width: 64px; border-radius: 9999px; margin-top: 16px; }
#EchoMainContent .s2t-skel-card .s2t-skel-line.short { width: 55%; }
#EchoMainContent .s2t-skel-card .s2t-skel-line.foot { margin-top: auto; margin-bottom: 16px; width: 70%; }
#EchoMainContent .s2t-skel-img,
#EchoMainContent .s2t-skel-line {
    background: linear-gradient(100deg,
        color-mix(in srgb, var(--s2t-brand-light, #86AF99) 16%, #fff) 30%,
        color-mix(in srgb, var(--s2t-brand-light, #86AF99) 30%, #fff) 50%,
        color-mix(in srgb, var(--s2t-brand-light, #86AF99) 16%, #fff) 70%);
    background-size: 200% 100%;
    animation: s2t-skel-shimmer 1.25s ease-in-out infinite;
}
@keyframes s2t-skel-shimmer { 0% { background-position: 180% 0; } 100% { background-position: -80% 0; } }
@media (prefers-reduced-motion: reduce) {
    #EchoMainContent .s2t-skel-img, #EchoMainContent .s2t-skel-line { animation: none; }
}
@media (max-width: 575px) {
    #EchoMainContent .s2t-home-skeleton { gap: 14px; }
    #EchoMainContent .s2t-skel-card { flex-basis: calc(50% - 7px); max-width: none; min-width: 0; }
}

/* spacing: clear separation between the category chips and the share row (owner 2026-06-26) */
#EchoMainContent .s2t-home-chips { margin: var(--s2t-space-3, 12px) 0 var(--s2t-space-5, 24px); }
#EchoMainContent .s2t-home-panel .s2t-gallery-share { margin-top: var(--s2t-space-2, 8px); }

/* refined, low-key share/copy utility strip on the HOME (scoped; gallery share untouched) -- owner 2026-06-26 */
#EchoMainContent .s2t-home-panel .s2t-gallery-share {
    align-items: center; gap: var(--s2t-space-3, 12px) var(--s2t-space-5, 24px);
    padding-bottom: var(--s2t-space-3, 12px);
    border-bottom-color: color-mix(in srgb, var(--s2t-brand-light, #86AF99) 40%, transparent);
}
#EchoMainContent .s2t-home-panel .s2t-gallery-share-label {
    font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--s2t-muted, #848484); margin-bottom: var(--s2t-space-1, 4px); min-height: 0;
}
#EchoMainContent .s2t-home-panel .s2t-gallery-social { height: auto; gap: var(--s2t-space-3, 12px); }
#EchoMainContent .s2t-home-panel .s2t-gallery-social a {
    color: var(--s2t-brand-light, #86AF99); font-size: 1.05rem;
    transition: color .15s ease, transform .15s ease;
}
#EchoMainContent .s2t-home-panel .s2t-gallery-social a:hover { color: var(--s2t-brand, #4A8A68); transform: translateY(-1px); }
#EchoMainContent .s2t-home-panel .s2t-gallery-linkfield.s2t-input-group { max-width: 340px; }
#EchoMainContent .s2t-home-panel .s2t-gallery-linkfield .s2t-input { font-size: .8rem; height: 36px; }
#EchoMainContent .s2t-home-panel .s2t-gallery-linkfield .s2t-input-icon { color: var(--s2t-brand-light, #86AF99); }
#EchoMainContent .s2t-home-panel .s2t-gallery-copy { padding-left: var(--s2t-space-3, 12px); padding-right: var(--s2t-space-3, 12px); }

/* FIX (owner 2026-06-26): premium FEATURED multi-image listings collapsed to a single
   image (earlier first-image-only rule + width:100%). Show ALL images side by side across
   the banner; standard cards keep their single cover image. The legacy 12s premiumImg_1/_2
   toggle (6-image listings) still works -- _2 starts inline display:none and jQuery .toggle()
   clears it, letting the flex rule lay its 3 images. */
#EchoMainContent .s2t-home-items .PremiumProdRegImg { display: flex; gap: 2px; align-items: stretch; }
#EchoMainContent .s2t-home-items .PremiumProdRegImg .premiumImg_1,
#EchoMainContent .s2t-home-items .PremiumProdRegImg .premiumImg_2 { display: flex; gap: 2px; flex: 1 1 100%; min-width: 0; }
#EchoMainContent .s2t-home-items .PremiumProdRegImg .RegAdsImg,
#EchoMainContent .s2t-home-items .PremiumProdRegImg .RegAdsImg ~ .RegAdsImg {
    display: block !important; flex: 1 1 0; width: auto !important; min-width: 0;
    height: 100% !important; object-fit: cover !important; float: none !important;
}

/* copy/email field: use the available width (was a small island with dead space) */
#EchoMainContent .s2t-home-panel .s2t-gallery-linkfield.s2t-input-group { max-width: 460px; }

/* premium banner: stretch the legacy image/text Bootstrap columns to full width so the
   multi-image showcase fills the banner (no right gap) -- owner 2026-06-26 */
#EchoMainContent .s2t-home-items .PremiumProdWrap [class*="col-md-"] { width: 100% !important; max-width: 100% !important; flex-basis: 100% !important; }

/* premium banner images: FULLY RESPONSIVE multi-image showcase (owner 2026-06-26).
   Each image is a 4:3 tile; flex-wrap drops columns as the viewport narrows (>=3-up wide,
   2-up on phones); the banner height follows the tiles. display:contents on the legacy
   premiumImg_1/_2 wrappers lets their images join the flow (6-image listings still toggle). */
#EchoMainContent .s2t-home-items .PremiumProdRegImg {
    display: flex; flex-wrap: wrap; gap: 4px; aspect-ratio: auto !important; height: auto !important;
    padding: 0 !important;
}
#EchoMainContent .s2t-home-items .PremiumProdRegImg .premiumImg_1 { display: contents; }
#EchoMainContent .s2t-home-items .PremiumProdRegImg .RegAdsImg {
    flex: 1 1 240px; min-width: 0; width: auto !important; height: auto !important;
    aspect-ratio: 4 / 3; object-fit: cover !important;
}
@media (max-width: 600px) {
    #EchoMainContent .s2t-home-items .PremiumProdRegImg .RegAdsImg { flex-basis: calc(50% - 4px); }
}

/* CONSOLIDATE premium banner images (supersedes the earlier conflicting appends): every
   image sizes EVENLY + responsively -- 4:3 tile, flex 1 1 240 (>=3-up wide), 2-up under 600px.
   The leftover '~ .RegAdsImg{flex:1 1 0}' rule was making the first image ~2x the others. */
#EchoMainContent .s2t-home-items .PremiumProdRegImg .RegAdsImg,
#EchoMainContent .s2t-home-items .PremiumProdRegImg .RegAdsImg ~ .RegAdsImg {
    flex: 1 1 240px !important; min-width: 0 !important; width: auto !important; height: auto !important;
    aspect-ratio: 4 / 3 !important; object-fit: cover !important; display: block !important; float: none !important;
}
@media (max-width: 600px) {
    #EchoMainContent .s2t-home-items .PremiumProdRegImg .RegAdsImg,
    #EchoMainContent .s2t-home-items .PremiumProdRegImg .RegAdsImg ~ .RegAdsImg { flex-basis: calc(50% - 4px) !important; }
}

/* ============================================================================
   Purchase History (member) - 2026-06-26 s2t-page-loop reskin
   Page markup uses the s2t-theme primitives (.s2t-panel / .s2t-btn). The
   "Online Store Orders" cards are SERVER-BUILT by _GetPurchaseHistory
   (projectcode/user/Default.aspx.cs); reskinned here via scoped overrides of
   the legacy emitted classes (phRow/phItmCont/detSalesTotal/btnBlue ...) -
   the "scope-override, do NOT rewrite the shared builder" pattern.
   Structural rules are brand-agnostic (token-driven); only the --s2t-* identity
   values are S2T-specific (pilot -> templatize).
   ============================================================================ */
#EchoMainContent .s2t-purchasehistory .s2t-ph-panel { margin-bottom: var(--s2t-space-5); }
#EchoMainContent .s2t-purchasehistory .s2t-ph-panel:last-child { margin-bottom: 0; }
#EchoMainContent .s2t-purchasehistory .s2t-ph-faq { min-height: 36px; padding: 6px 18px; font-size: var(--s2t-text-small); }
#EchoMainContent .s2t-purchasehistory .s2t-ph-lead { color: var(--s2t-muted); font-size: var(--s2t-text-small); margin: 0 0 var(--s2t-space-4); }
#EchoMainContent .s2t-purchasehistory .s2t-ph-tablewrap { width: 100%; }
#EchoMainContent .s2t-purchasehistory .s2t-ph-orders { color: var(--s2t-text); }

/* --- DataTables 2.3.8 Frega skin (POS table), tokenised. Targets v2 class names
       (dt-search / dt-paging) with legacy fallbacks. --- */
#EchoMainContent .s2t-purchasehistory table.dataTable thead th {
    background: var(--s2t-band-library-bg); color: var(--s2t-band-library-fg);
    font-weight: 700; border-bottom: 2px solid var(--s2t-brand-light);
}
#EchoMainContent .s2t-purchasehistory table.dataTable tbody td { color: var(--s2t-text); }
#EchoMainContent .s2t-purchasehistory table.dataTable tbody tr:hover td { background: var(--s2t-brand-subtle); }
#EchoMainContent .s2t-purchasehistory .dt-search input,
#EchoMainContent .s2t-purchasehistory .dataTables_filter input {
    border: 1px solid var(--s2t-field-border); border-radius: var(--s2t-radius-input);
    padding: 6px 10px; min-height: 38px; margin-left: var(--s2t-space-2);
}
#EchoMainContent .s2t-purchasehistory .dt-paging .dt-paging-button.current,
#EchoMainContent .s2t-purchasehistory .dataTables_paginate .paginate_button.current {
    background: var(--s2t-brand); color: #fff !important; border: 1px solid var(--s2t-brand);
    border-radius: var(--s2t-radius-sm);
}

/* --- Server-built order cards (legacy emitted classes, de-floated to flex) --- */
#EchoMainContent .s2t-purchasehistory .phRow { float: none; width: 100%; padding: 0; margin: 0 0 var(--s2t-space-4); }
#EchoMainContent .s2t-purchasehistory .phRow:last-child { margin-bottom: 0; }
#EchoMainContent .s2t-purchasehistory .phItmCont {
    float: none; width: 100%; padding: 0; background: var(--s2t-surface);
    border: 1px solid #E6ECE9; border-radius: var(--s2t-radius-md); overflow: hidden;
}
#EchoMainContent .s2t-purchasehistory .phItmHead {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s2t-space-3);
    float: none; width: 100%; padding: var(--s2t-space-3) var(--s2t-space-4);
    background: var(--s2t-panel-head-bg); border-bottom: 1px solid #E6ECE9;
}
#EchoMainContent .s2t-purchasehistory .phItmHead > div { float: none !important; width: auto !important; padding: 0 !important; }
#EchoMainContent .s2t-purchasehistory .phItmDelivDate { font-weight: 700; color: var(--s2t-brand-deep); }
#EchoMainContent .s2t-purchasehistory .phItmDetailHead {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s2t-space-4); flex-wrap: wrap;
    float: none; width: 100%; padding: var(--s2t-space-4);
    background: transparent; box-shadow: none; border-bottom: 1px solid #E6ECE9;
}
#EchoMainContent .s2t-purchasehistory .phItmDetailHead > div { float: none !important; width: auto !important; padding: 0 !important; }
#EchoMainContent .s2t-purchasehistory .phItmDetailHead img { height: 50px; width: auto; border-radius: var(--s2t-radius-xs); }
#EchoMainContent .s2t-purchasehistory .detSalesTotal { margin: 0; font-weight: 700; font-size: var(--s2t-text-h2); color: var(--s2t-brand-deep); }

#EchoMainContent .s2t-purchasehistory .phItemListCont {
    display: flex; flex-wrap: wrap; gap: var(--s2t-space-4); align-items: flex-start;
    float: none; width: 100%; border: 0; border-top: 1px solid #F0F0F0; padding: var(--s2t-space-4);
}
#EchoMainContent .s2t-purchasehistory .phItemListCont > div { float: none !important; padding: 0 !important; }
#EchoMainContent .s2t-purchasehistory .phItemListCont [id^="purchListingImg_"] { flex: 0 0 auto; }
#EchoMainContent .s2t-purchasehistory .phItemListCont [id^="purchListingDesc_"] { flex: 1 1 240px; min-width: 0; }
#EchoMainContent .s2t-purchasehistory .phItemListCont .stProdRegImg img,
#EchoMainContent .s2t-purchasehistory .phItemListCont .RegAdsImg { max-width: 120px; height: auto; border-radius: var(--s2t-radius-sm); }
#EchoMainContent .s2t-purchasehistory .phTitle { font-weight: 700; color: var(--s2t-text); }
#EchoMainContent .s2t-purchasehistory .phDescription { color: var(--s2t-muted); font-size: var(--s2t-text-small); margin: var(--s2t-space-1) 0; }
#EchoMainContent .s2t-purchasehistory .phDetails { display: flex; flex-wrap: wrap; gap: var(--s2t-space-4); width: 100%; margin-top: var(--s2t-space-3); }
#EchoMainContent .s2t-purchasehistory .phdDiv,
#EchoMainContent .s2t-purchasehistory .phdFullWidth { border: 0 !important; padding: 0 !important; }
#EchoMainContent .s2t-purchasehistory .phdHead { font-size: var(--s2t-text-label); text-transform: uppercase; letter-spacing: .05em; color: var(--s2t-muted); font-weight: 700; }
#EchoMainContent .s2t-purchasehistory .phItmPrice { font-weight: 700; color: var(--s2t-brand-deep); }
#EchoMainContent .s2t-purchasehistory .phdDeliver { font-size: var(--s2t-text-small); color: var(--s2t-text); }

/* Card action buttons (legacy btnBlue/btnBlue2) -> s2t pill. */
#EchoMainContent .s2t-purchasehistory .btnGlobalStyle.btnBlue,
#EchoMainContent .s2t-purchasehistory .btnBlue2 {
    display: inline-block; cursor: pointer; float: none; margin: 0;
    border-radius: var(--s2t-radius-btn); padding: 8px 18px;
    font-weight: 700; font-size: var(--s2t-text-small);
    background: var(--s2t-brand); color: #fff; border: 1px solid var(--s2t-brand);
}
#EchoMainContent .s2t-purchasehistory .btnGlobalStyle.btnBlue:hover,
#EchoMainContent .s2t-purchasehistory .btnBlue2:hover { background: var(--s2t-brand-strong); color: #fff; }

/* Status 4 -> muted, non-interactive "Completed" label. */
#EchoMainContent .s2t-purchasehistory .s2t-ph-completed {
    display: inline-block; padding: 6px 14px; border-radius: var(--s2t-radius-pill);
    background: var(--s2t-brand-subtle); color: var(--s2t-brand-deep);
    border: 1px solid var(--s2t-brand-light); font-weight: 700; font-size: var(--s2t-text-small);
}
/* Status 3 -> greyed/disabled Leave Feedback (no save endpoint yet; flagged). */
#EchoMainContent .s2t-purchasehistory .s2t-ph-feedback-disabled {
    display: inline-block; padding: 8px 18px; border-radius: var(--s2t-radius-btn);
    background: var(--s2t-btn-disabled); color: #fff; border: 1px solid var(--s2t-btn-disabled);
    font-weight: 700; font-size: var(--s2t-text-small); cursor: not-allowed;
}

@media (max-width: 600px) {
    #EchoMainContent .s2t-purchasehistory .phItmDetailHead { gap: var(--s2t-space-2); }
    #EchoMainContent .s2t-purchasehistory .detSalesTotal { font-size: var(--s2t-text-h1); }
    #EchoMainContent .s2t-purchasehistory .phItemListCont [id^="purchListingImg_"] { flex-basis: 100%; }
    #EchoMainContent .s2t-purchasehistory .phItemListCont .stProdRegImg img,
    #EchoMainContent .s2t-purchasehistory .phItemListCont .RegAdsImg { max-width: 100%; }
}

/* ============================================================================
   DUW cluster-A Frega-align  -- s2t page-loop 2026-06-27
   Shared "DUW wrapper page" retint (.s2t-duw-page), applied to the cluster-A
   builder/management pages that render in the S2T shell (#EchoMainContent):
   managedash, splash, designoption. Scoped OVERRIDES only -- the legacy classes
   (.btnGlobalStyle/.btnBlue_faq/.btnGreen2/.btnOrange/.pHeadTit1_1 etc.) are
   shared across 100+ files via main.css/styles.css, so we NEVER edit those; we
   re-tint under the page wrapper. De-rainbow = DEMOTE clashing legacy hues to
   on-brand tokenised tints. Portable (pilot->templatize): token-parameterised,
   only the token VALUES are S2T-specific. Page-specific extras (the managedash
   weblet TABLE + DataTables + action pills) live under the narrower
   .s2t-managedash block further down.
   ============================================================================ */
#EchoMainContent .s2t-duw-page { color: var(--s2t-text); }

/* --- header wordmark / heading accent (overrides inline #109e76) --- */
#EchoMainContent .s2t-duw-page .pHeadTit1_1 { color: var(--s2t-brand) !important; }
#EchoMainContent .s2t-duw-page .headTitle h3 { color: var(--s2t-brand-deep); font-weight: 700; }

/* --- header layout: heading left, FAQ pinned top-right (legacy col-xs-12 is dead
       in BS5 so the cols never split; re-flow the already-flex row by hand) --- */
#EchoMainContent .s2t-duw-page .row.mobileTopSpace {
    display: flex; flex-wrap: nowrap; align-items: flex-start; gap: var(--s2t-space-3);
}
#EchoMainContent .s2t-duw-page .headE_1 { flex: 1 1 auto; width: auto; min-width: 0; }
#EchoMainContent .s2t-duw-page .headE_2 { flex: 0 0 auto; width: auto; text-align: right; }

/* --- buttons: pill base; blue FAQ -> green outline (compact; legacy forces 100%);
       green CTA -> brand solid; legacy coral (.btnOrange) nav -> demoted outline --- */
#EchoMainContent .s2t-duw-page .btnGlobalStyle {
    border-radius: var(--s2t-radius-btn);
    font-weight: 700;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
#EchoMainContent .s2t-duw-page .btnBlue_faq {
    background: #fff;
    color: var(--s2t-brand);
    border: 1px solid var(--s2t-brand);
    width: auto;             /* legacy shared rule forces 100% -> compact for top-right */
    display: inline-block;
    padding: 8px 24px;
    white-space: nowrap;
}
#EchoMainContent .s2t-duw-page .btnBlue_faq:hover {
    background: var(--s2t-brand);
    color: #fff;
}
#EchoMainContent .s2t-duw-page .btnGreen2 {
    background: var(--s2t-brand);
    color: #fff;
    border: 1px solid var(--s2t-brand);
}
#EchoMainContent .s2t-duw-page .btnGreen2:hover {
    background: var(--s2t-brand-strong);
    border-color: var(--s2t-brand-strong);
    color: #fff;
}
#EchoMainContent .s2t-duw-page .btnOrange {              /* legacy coral nav -> demoted brand outline */
    background: #fff;
    color: var(--s2t-brand-strong);
    border: 1px solid var(--s2t-brand-light);
}
#EchoMainContent .s2t-duw-page .btnOrange:hover {
    background: var(--s2t-brand);
    border-color: var(--s2t-brand);
    color: #fff;
}

/* --- de-rainbow inline legacy hues + controls: green section head (#168248) ->
       brand-deep; coral "NOTE" (#dc4f4f) -> demoted; big/fee checkboxes -> brand --- */
#EchoMainContent .s2t-duw-page [style*="#168248"] { color: var(--s2t-brand-deep) !important; }
#EchoMainContent .s2t-duw-page [style*="#dc4f4f"] { color: var(--s2t-brand-deep) !important; }
#EchoMainContent .s2t-duw-page .big-checkbox,
#EchoMainContent .s2t-duw-page .chb,
#EchoMainContent .s2t-duw-page .chbFee { accent-color: var(--s2t-brand); }

/* --- footer "read the FAQ's" note (managedash + splash structure) --- */
#EchoMainContent .s2t-duw-page .pContent_1 + .row i b { color: var(--s2t-brand-deep); }

/* ============================================================================
   designoption MODERN REWORK (owner 2026-06-27) -- selectable plan cards.
   Presentation rebuilt; the legacy inputs (#unique/#onetomany .chb,
   #mfpby/#mfpbm .chbFee, #pricingTxt) + their change handlers are PRESERVED.
   Selection state is driven purely by :has(input:checked) so no JS change needed.
   ============================================================================ */
/* NOTE -> info callout */
#EchoMainContent .s2t-duw-page .s2t-callout {
    display: flex; gap: 10px; align-items: flex-start;
    background: var(--s2t-brand-subtle); border: 1px solid var(--s2t-brand-light);
    border-left: 3px solid var(--s2t-brand); border-radius: var(--s2t-radius-sm);
    padding: 12px 16px; margin: 14px 0; color: var(--s2t-text);
}
#EchoMainContent .s2t-duw-page .s2t-callout i { color: var(--s2t-brand); margin-top: 3px; }
#EchoMainContent .s2t-duw-page .s2t-callout b { color: var(--s2t-brand-deep); }

/* header action buttons (Manage / Redirect) -> stacked, right, content-width */
#EchoMainContent .s2t-duw-page .s2t-duw-actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }

/* the two selectable option cards */
#EchoMainContent .s2t-duw-page .s2t-optcards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 4px; }
#EchoMainContent .s2t-duw-page .s2t-optcard {
    position: relative; display: flex; flex-direction: column; background: var(--s2t-surface);
    border: 2px solid #E1E6E3; border-radius: var(--s2t-radius-md);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
#EchoMainContent .s2t-duw-page .s2t-optcard-main {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 8px; padding: 26px 22px 18px; cursor: pointer;
}
#EchoMainContent .s2t-duw-page .s2t-optcard:hover { border-color: var(--s2t-brand-light); box-shadow: var(--s2t-shadow-1, 0 2px 10px rgba(0,0,0,.06)); }
#EchoMainContent .s2t-duw-page .s2t-optcard > input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
#EchoMainContent .s2t-duw-page .s2t-optcard:has(.chb:checked) { border-color: var(--s2t-brand); background: var(--s2t-brand-subtle); }
/* check indicator (top-right) */
#EchoMainContent .s2t-duw-page .s2t-optcard-check { position: absolute; top: 14px; right: 14px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #CBD3CE; background: #fff; }
#EchoMainContent .s2t-duw-page .s2t-optcard:has(.chb:checked) .s2t-optcard-check { border-color: var(--s2t-brand); background: var(--s2t-brand); }
#EchoMainContent .s2t-duw-page .s2t-optcard:has(.chb:checked) .s2t-optcard-check::after {
    content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px;
    border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
/* transparent SVG icons (currentColor -> brand green; no white-box jpg) */
#EchoMainContent .s2t-duw-page .s2t-optcard-svg { width: 76px; height: 76px; color: var(--s2t-brand); margin-bottom: 2px; }
#EchoMainContent .s2t-duw-page .s2t-optcard-title { font-size: 19px; font-weight: 700; color: var(--s2t-brand-deep); }
#EchoMainContent .s2t-duw-page .s2t-optcard-desc { color: var(--s2t-text); font-size: 15.5px; line-height: 1.45; max-width: 36ch; }
/* select affordance (text swapped by CSS on selection) */
#EchoMainContent .s2t-duw-page .s2t-optcard-select { font-size: 13px; font-weight: 700; color: var(--s2t-muted); margin-top: 2px; }
#EchoMainContent .s2t-duw-page .s2t-optcard-select::after { content: "Select this option"; }
#EchoMainContent .s2t-duw-page .s2t-optcard:has(.chb:checked) .s2t-optcard-select { color: var(--s2t-brand); }
#EchoMainContent .s2t-duw-page .s2t-optcard:has(.chb:checked) .s2t-optcard-select::after { content: "\2713  Selected"; }

/* comparable spec rows (Used by / Cost / Paid by) -- ALWAYS visible, both cards,
   so the differences + costs read at a glance (no progressive disclosure) */
#EchoMainContent .s2t-duw-page .s2t-spec { margin: 0; padding: 16px 22px 22px; border-top: 1px solid #E1E6E3; display: grid; gap: 12px; }
#EchoMainContent .s2t-duw-page .s2t-spec-row { display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: start; font-size: 15.5px; text-align: left; }
#EchoMainContent .s2t-duw-page .s2t-spec-row dt { margin: 0; font-weight: 700; color: var(--s2t-brand-deep); }
#EchoMainContent .s2t-duw-page .s2t-spec-row dd { margin: 0; color: var(--s2t-text); line-height: 1.45; }
#EchoMainContent .s2t-duw-page .s2t-spec-row dd b { color: var(--s2t-brand-strong); }
/* payment options (affiliate #mfpby/#mfpbm) -- plain checkbox + FULL label, no chip
   bubble, so the user is fully aware of what they're selecting; always visible */
#EchoMainContent .s2t-duw-page .s2t-pay-opt { display: flex; align-items: center; gap: 9px; padding: 4px 0; cursor: pointer; font-size: 15px; }
#EchoMainContent .s2t-duw-page .s2t-pay-opt input { accent-color: var(--s2t-brand); width: 18px; height: 18px; cursor: pointer; flex: 0 0 auto; }
#EchoMainContent .s2t-duw-page .s2t-pay-opt:has(input:checked) { color: var(--s2t-brand-deep); font-weight: 700; }
#EchoMainContent .s2t-duw-page .s2t-pricing-sink { display: none; }
/* prominent currency note */
#EchoMainContent .s2t-duw-page .s2t-optcards-foot {
    margin: 16px 0 4px; padding: 12px 16px; font-size: 15px; line-height: 1.5;
    color: var(--s2t-text); font-style: normal;
    background: var(--s2t-brand-subtle); border: 1px solid var(--s2t-brand-light);
    border-left: 3px solid var(--s2t-brand); border-radius: var(--s2t-radius-sm);
}
#EchoMainContent .s2t-duw-page .s2t-optcards-foot b { color: var(--s2t-brand-deep); }
/* splash: value bullets + price line + an image slot (owner supplies the image) */
#EchoMainContent .s2t-duw-page .s2t-splash-price { font-size: 15.5px; line-height: 1.5; color: var(--s2t-text); margin-top: 16px; }
#EchoMainContent .s2t-duw-page .s2t-splash-media {
    min-height: 280px; display: flex; align-items: center; justify-content: center;
    background: var(--s2t-brand-subtle); border: 1px dashed var(--s2t-brand-light);
    border-radius: var(--s2t-radius-md); overflow: hidden;
}
#EchoMainContent .s2t-duw-page .s2t-splash-media:empty::before { content: "Weblet preview image"; color: var(--s2t-muted); font-size: 14px; font-style: italic; }
#EchoMainContent .s2t-duw-page .s2t-splash-media:not(:empty) { border: 0; background: transparent; min-height: 0; padding: 0; }
#EchoMainContent .s2t-duw-page .s2t-splash-media img { width: 100%; height: 320px; object-fit: cover; display: block; border-radius: var(--s2t-radius-md); }

/* footer row: note left, CREATE URL right (MASTER: title left, primary action right).
   Override the BS col-md-6 widths so two 50% cols + gap don't overflow->wrap. */
#EchoMainContent .s2t-duw-page .s2t-duw-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
#EchoMainContent .s2t-duw-page .s2t-duw-footer > div { width: auto; flex: 0 1 auto; }
#EchoMainContent .s2t-duw-page .s2t-duw-footer > div:first-child { flex: 1 1 auto; }
#EchoMainContent .s2t-duw-page .s2t-duw-footer > div:last-child { text-align: right; }
#EchoMainContent .s2t-duw-page .s2t-duw-footer .btnGreen2 { display: inline-block; width: auto; min-width: 220px; }
@media (max-width: 700px) {
    #EchoMainContent .s2t-duw-page .s2t-optcards { grid-template-columns: 1fr; }
}

/* ============================================================================
   managedash-only: the weblet TABLE + DataTables harden + action pills
   ============================================================================ */
/* --- table header skin (legacy .TableFixed_Green green -> tokenised brand) --- */
#EchoMainContent .s2t-managedash .TableFixed_Green th {
    background: var(--s2t-brand) !important;
    color: #fff;
    border-bottom: 1px solid var(--s2t-brand-strong);
    font-weight: 600;
    text-shadow: none;
}
#EchoMainContent .s2t-managedash .TableFixed_Green td { vertical-align: middle; }
#EchoMainContent .s2t-managedash .TableFixed_Green a { color: #000 !important; font-weight: 700; text-decoration: underline; }

/* --- de-rainbow the action pills (DEMOTE, keep distinguishable + interactive) --- */
#EchoMainContent .s2t-managedash .webTypeOption,
#EchoMainContent .s2t-managedash .webNumber,
#EchoMainContent .s2t-managedash .webMemberRequests {
    border-radius: var(--s2t-radius-sm);
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;            /* these are buttons (onclick -> webTypeUpgrade/showWebMember/showWebRequests) */
    -webkit-user-select: none;  /* Safari/iOS */
    user-select: none;          /* legacy cursor:pointer lived in the extracted inline <style>; restore + harden */
    transition: filter .2s ease, padding-left .2s ease;
}
#EchoMainContent .s2t-managedash .webTypeOption {            /* TYPE  -> brand green tint */
    background: var(--s2t-brand-subtle);
    border: 1px solid var(--s2t-brand-light);
    color: var(--s2t-brand-deep);
    text-align: center;
}
#EchoMainContent .s2t-managedash .webNumber {               /* NUMBER -> neutral tint */
    background: #EEF1F0;
    border: 1px solid #D5DAD7;
    color: var(--s2t-text);
}
#EchoMainContent .s2t-managedash .webMemberRequests {       /* REQUEST -> warm attention tint */
    background: var(--s2t-accent-stock);
    border: 1px solid #E9D3A6;
    color: #6B4E16;
}
#EchoMainContent .s2t-managedash .webTypeOption:hover,
#EchoMainContent .s2t-managedash .webNumber:hover,
#EchoMainContent .s2t-managedash .webMemberRequests:hover { filter: brightness(0.96); padding-left: 8px; }

/* --- status select -> brand-toned control --- */
#EchoMainContent .s2t-managedash .webStateOption {
    border: 1px solid var(--s2t-brand-light);
    border-radius: var(--s2t-radius-xs);
    padding: 2px 6px;
    background: #fff;
}
#EchoMainContent .s2t-managedash .defWeb { accent-color: var(--s2t-brand); width: 18px; height: 18px; cursor: pointer; }

/* --- DataTables harden: let DataTables' own scrollBody be the single scroller
       (neutralise the legacy fixed-height/overflow wrapper) + on-brand chrome --- */
#EchoMainContent .s2t-managedash .wrapper.fixFooter {
    height: auto !important;
    overflow: visible !important;
    border-bottom: none !important;
}
/* DataTables 2.x class names (dt-*, not the legacy dataTables_* of 1.x) */
#EchoMainContent .s2t-managedash .dt-container { width: 100%; }
#EchoMainContent .s2t-managedash .dt-scroll-body { border-bottom: 1px solid var(--s2t-border, #e4e4e4); }
#EchoMainContent .s2t-managedash table.dataTable { width: 100% !important; margin: 0; }
#EchoMainContent .s2t-managedash td.dt-empty { padding: 18px; color: var(--s2t-muted); text-align: center; }

/* ============================================================================
   managedash ELEVATION (2026-06-27, s2t-page-loop) -- raise the light-retint
   table toward the designoption bar: color-coded status control, TYPE/affiliate
   pill badges, edit icon-button, roomier chrome. Same specificity as the block
   above, placed later so these win the cascade. Wiring untouched -- the rows are
   server-built by _userWebsites; every hook is class/onclick-delegated. The two
   affiliate-only columns (NUMBER/REQUEST) are hidden by the DataTables API in
   s2t-managedash.js when empty (no CSS needed).
   ============================================================================ */
/* --- table chrome: roomier cells, row hover, quiet separators --- */
#EchoMainContent .s2t-managedash .TableFixed_Green { border-collapse: separate; border-spacing: 0; }
#EchoMainContent .s2t-managedash .TableFixed_Green th { padding: 12px 14px; font-size: 12.5px; letter-spacing: .03em; }
#EchoMainContent .s2t-managedash .TableFixed_Green td { padding: 12px 14px; border-bottom: 1px solid #EAEEEC; }
#EchoMainContent .s2t-managedash .TableFixed_Green tbody tr:hover { background: var(--s2t-brand-subtle); }
#EchoMainContent .s2t-managedash .TableFixed_Green a { text-decoration: none; }
#EchoMainContent .s2t-managedash .TableFixed_Green a:hover { text-decoration: underline; }
#EchoMainContent .s2t-managedash td:has(.defWeb) { text-align: center; }

/* --- edit cell (col 2, td has onclick=editurl) -> circular icon-button --- */
#EchoMainContent .s2t-managedash .TableFixed_Green .fa-edit {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--s2t-brand-subtle); border: 1px solid var(--s2t-brand-light);
    color: var(--s2t-brand-deep); transition: filter .2s ease;
}
#EchoMainContent .s2t-managedash .TableFixed_Green .fa-edit:hover { filter: brightness(.95); }

/* --- TYPE + affiliate cells -> pill badges (override the radius-sm boxes above) --- */
#EchoMainContent .s2t-managedash .webTypeOption {
    display: inline-block; border-radius: 999px; padding: 5px 14px;
    text-transform: uppercase; letter-spacing: .04em; font-size: 12px;
}
#EchoMainContent .s2t-managedash .webNumber,
#EchoMainContent .s2t-managedash .webMemberRequests {
    display: inline-block; border-radius: 999px; padding: 5px 12px; font-size: 13px;
}

/* --- STATUS select -> color-coded control, tints by the selected state.
       :has(option:checked[value]) is progressive; falls back to the brand-light border. --- */
#EchoMainContent .s2t-managedash .webStateOption {
    padding: 6px 12px; border-radius: var(--s2t-radius-sm); font-weight: 600;
    background: #fff; cursor: pointer;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}
#EchoMainContent .s2t-managedash .webStateOption:has(option:checked[value="live"]),
#EchoMainContent .s2t-managedash .webStateOption:has(option:checked[value="member"]) {
    color: var(--s2t-brand-deep); border-color: var(--s2t-brand); background: var(--s2t-brand-subtle);
}
#EchoMainContent .s2t-managedash .webStateOption:has(option:checked[value="disabled"]) {
    color: #5B6661; border-color: #CBD5D1; background: #F1F3F2;
}
#EchoMainContent .s2t-managedash .webStateOption:has(option:checked[value="suspended"]) {
    color: #6B4E16; border-color: #E9D3A6; background: var(--s2t-accent-stock);
}

/* --- DEFAULT checkbox: keep accent, add a visible focus ring --- */
#EchoMainContent .s2t-managedash .defWeb:focus-visible { outline: 2px solid var(--s2t-brand); outline-offset: 2px; }

/* ===========================================================================
   .s2t-pos  —  POS console (member/pos) Frega-aligned modernise-in-place.
   Owner-approved 2026-06-28 (Square-feel, sisters FregaForce dashboards, true
   responsive, full-screen till). FAITHFUL: the real add-actions (New/Stock/New
   customer), the real line-item table + per-item discount, the modal pickers.
   Enhancements opted-in: full-screen mode, qty steppers, responsive mobile cart,
   modern modal pickers (DataTables). No invented catalogue/keypad.
   Two scopes: the main page under `#EchoMainContent .s2t-pos`; the modal/admin
   fragment tables under a flat `.s2t-posfrag` wrapper (they render in
   `.app-modal-popup` #ModalContent OR in-page #posAdminPanel). Local tints derive
   from the brand token (swappable); hairlines use the foundation #E6ECE9.
   ========================================================================= */
#EchoMainContent .s2t-pos {
    --pos-tint:  rgba(74,138,104,0.10);   /* brand @10% — chips, thumbs, hovers */
    --pos-tint2: rgba(74,138,104,0.16);
    --pos-line:  #E6ECE9;                 /* foundation hairline */
    display: flex; flex-direction: column;
    min-height: 60vh;
    max-height: calc(100dvh - 96px);
    font-family: var(--s2t-font);
}
/* full-screen till: covers the master chrome; Fullscreen API optional in JS */
#EchoMainContent .s2t-pos.s2t-pos-full {
    position: fixed; inset: 0; z-index: 9999;
    max-height: none; height: 100dvh;
    background: var(--s2t-bg); padding: 10px;
}
/* POS-scoped: pull the console up under the fixed 74px nav. The master's hero adds
   ~152px decorative top padding; kill it for this page only (owner: reduce dead
   space). #EchoMainContent's own 91px nav-clearance is left intact. :has() keeps the
   blast radius to the POS page (the established S2T scoping pattern). */
#EchoMainContent .hero-content:has(> .s2t-pos) { padding-top: var(--s2t-space-3) !important; padding-bottom: var(--s2t-space-4) !important; }

/* ── top bar ─────────────────────────────────────────────────────────────── */
#EchoMainContent .s2t-pos-top {
    display: flex; align-items: center; gap: var(--s2t-space-3);
    padding: 14px 20px; background: var(--s2t-surface);
    border: 1px solid var(--pos-line); border-radius: 18px;
    box-shadow: var(--s2t-shadow-1); margin-bottom: var(--s2t-space-3); flex: none;
}
/* merchant branding is the hero of the top bar (owner: make it prominent) */
#EchoMainContent .s2t-pos-store { display: flex; align-items: center; gap: var(--s2t-space-3); min-width: 0; padding-right: var(--s2t-space-3); border-right: 1px solid var(--pos-line); }
#EchoMainContent .s2t-pos-logo {
    width: 64px; height: 64px; border-radius: 15px; flex: none;
    background: linear-gradient(135deg, var(--s2t-brand-deep), var(--s2t-brand));
    display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 22px; letter-spacing: .5px;
    object-fit: cover; box-shadow: 0 4px 12px rgba(74,138,104,.22); border: 2px solid #fff;
}
#EchoMainContent .s2t-pos-name { font-weight: 800; font-size: 22px; line-height: 1.12; color: var(--s2t-brand-deep); }
#EchoMainContent .s2t-pos-name small { display: block; font-weight: 700; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--s2t-muted); margin-top: 2px; }
#EchoMainContent .s2t-pos-tag {
    font-weight: 900; font-size: 12px; letter-spacing: 2px; color: var(--s2t-brand-deep);
    background: var(--pos-tint); padding: 5px 11px; border-radius: var(--s2t-radius-pill);
}
#EchoMainContent .s2t-pos-topact { margin-left: auto; display: flex; align-items: center; gap: var(--s2t-space-2); }

/* POS buttons (self-contained; pill, de-rainbowed) */
#EchoMainContent .s2t-pos .pbtn {
    display: inline-flex; align-items: center; gap: var(--s2t-space-2);
    font-weight: 700; font-size: 14px; border-radius: var(--s2t-radius-pill);
    padding: 10px 16px; min-height: 44px; white-space: nowrap; cursor: pointer;
    border: none; font-family: inherit;
    transition: background var(--s2t-dur-standard), color var(--s2t-dur-standard), box-shadow var(--s2t-dur-standard);
}
#EchoMainContent .s2t-pos .pbtn-primary { background: var(--s2t-brand); color: #fff; }
#EchoMainContent .s2t-pos .pbtn-primary:hover { background: var(--s2t-brand-strong); color: #fff; }
#EchoMainContent .s2t-pos .pbtn-outline { background: #fff; color: var(--s2t-brand-deep); box-shadow: inset 0 0 0 1.5px var(--s2t-brand); }
#EchoMainContent .s2t-pos .pbtn-outline:hover { background: var(--pos-tint); }
#EchoMainContent .s2t-pos .pbtn-ghost { background: var(--pos-tint); color: var(--s2t-brand-deep); }
#EchoMainContent .s2t-pos .pbtn-ghost:hover { background: var(--pos-tint2); }
#EchoMainContent .s2t-pos .pbtn-dark { background: var(--s2t-brand-deep); color: #fff; }
#EchoMainContent .s2t-pos .pbtn-dark:hover { background: var(--s2t-brand-strong); color: #fff; }
#EchoMainContent .s2t-pos .pbtn-sm { padding: 8px 14px; font-size: 13px; min-height: 40px; }
#EchoMainContent .s2t-pos .pbtn-icon { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 12px; }
#EchoMainContent .s2t-pos .pbtn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(74,138,104,.30); }
#EchoMainContent .s2t-pos .pbtn-kebab { display: none; }

/* ── the single sale panel ───────────────────────────────────────────────── */
#EchoMainContent .s2t-pos-panel {
    flex: 1; display: flex; flex-direction: column; min-height: 0;
    background: var(--s2t-surface); border: 1px solid var(--pos-line);
    border-radius: 18px; box-shadow: var(--s2t-shadow-2); overflow: hidden;
}
#EchoMainContent .s2t-pos-salehead {
    display: flex; align-items: center; gap: var(--s2t-space-3);
    padding: 13px 16px; border-bottom: 1px solid var(--pos-line); flex-wrap: wrap;
}
#EchoMainContent .s2t-pos-cust { display: flex; align-items: center; gap: var(--s2t-space-3); min-width: 0; }
#EchoMainContent .s2t-pos-av {
    width: 40px; height: 40px; border-radius: var(--s2t-radius-pill); flex: none;
    background: var(--pos-tint); color: var(--s2t-brand-deep); display: grid; place-items: center; font-size: 16px;
}
#EchoMainContent .s2t-pos-who b { font-size: 15px; }
#EchoMainContent .s2t-pos-who small { display: block; color: var(--s2t-muted); font-size: 12px; }
#EchoMainContent .s2t-pos-meta { margin-left: auto; display: flex; align-items: center; gap: var(--s2t-space-2); flex-wrap: wrap; }
#EchoMainContent .s2t-pos-chip {
    display: inline-flex; align-items: center; gap: 7px; background: var(--s2t-bg);
    border: 1px solid var(--pos-line); border-radius: var(--s2t-radius-pill);
    padding: 7px 13px; font-size: 13px; color: var(--s2t-muted);
}
#EchoMainContent .s2t-pos-chip b { color: var(--s2t-text); font-weight: 700; }
#EchoMainContent .s2t-pos-chip.is-cur { background: var(--pos-tint); border-color: transparent; color: var(--s2t-brand-deep); }

/* add-action bar (the real New Item / Stock Item / New Customer) */
#EchoMainContent .s2t-pos-addbar {
    display: flex; gap: var(--s2t-space-3); padding: var(--s2t-space-3) 16px;
    border-bottom: 1px solid var(--pos-line); flex-wrap: wrap;
}
#EchoMainContent .s2t-pos-addbar .pbtn { flex: 1; justify-content: center; min-width: 150px; }
#EchoMainContent .s2t-pos-addbar .pbtn-primary { box-shadow: 0 4px 14px rgba(74,138,104,.26); }

/* items table = centerpiece */
#EchoMainContent .s2t-pos-items-wrap { flex: 1; overflow: auto; }
#EchoMainContent table.s2t-pos-items { width: 100%; border-collapse: collapse; font-size: 14px; margin: 0; }
#EchoMainContent table.s2t-pos-items thead th {
    position: sticky; top: 0; z-index: 1; background: var(--pos-tint); color: var(--s2t-brand-deep);
    font-weight: 700; text-align: left; padding: 12px 14px; font-size: 12px; letter-spacing: .4px; text-transform: uppercase;
}
#EchoMainContent table.s2t-pos-items thead th.num, #EchoMainContent table.s2t-pos-items td.num { text-align: right; }
#EchoMainContent table.s2t-pos-items thead th.ctr, #EchoMainContent table.s2t-pos-items td.ctr { text-align: center; }
#EchoMainContent table.s2t-pos-items tbody td { padding: 12px 14px; border-bottom: 1px solid var(--pos-line); vertical-align: middle; }
#EchoMainContent table.s2t-pos-items tbody tr:hover td { background: #FAFCFB; }
#EchoMainContent .s2t-pos-items .ItmTitle, #EchoMainContent .s2t-pos-items .it-desc { font-weight: 700; }
#EchoMainContent .s2t-pos-items .it-total, #EchoMainContent .s2t-pos-items .ItmTotalPrice { font-weight: 900; color: var(--s2t-brand-deep); }
#EchoMainContent .s2t-pos-items .itmInput {
    height: 38px; border: 1.5px solid var(--s2t-field-border); border-radius: var(--s2t-radius-sm);
    padding: 0 10px; font-family: inherit; font-size: 14px; background: #fff; color: var(--s2t-text); width: 100%; max-width: 180px;
}
#EchoMainContent .s2t-pos-items .itmInput:focus { outline: none; border-color: var(--s2t-brand); box-shadow: 0 0 0 3px rgba(74,138,104,.16); }
#EchoMainContent .s2t-pos-items .posNewItmPrice { max-width: 110px; text-align: right; }

/* qty stepper wraps the contract .posItmQty input (the input stays the single
   source of truth — the duplicate-increment path writes it directly). */
#EchoMainContent .s2t-pos-stepper { display: inline-flex; align-items: center; background: #fff; border: 1.5px solid var(--s2t-field-border); border-radius: var(--s2t-radius-pill); }
#EchoMainContent .s2t-pos-stepper button { width: 38px; height: 38px; display: grid; place-items: center; color: var(--s2t-brand-deep); font-size: 13px; border: none; background: none; cursor: pointer; border-radius: var(--s2t-radius-pill); }
#EchoMainContent .s2t-pos-stepper button:hover { background: var(--pos-tint); }
#EchoMainContent .s2t-pos-stepper .posItmQty {
    width: 42px; height: 36px; max-width: none; text-align: center; border: none; background: none;
    font-weight: 700; font-size: 14px; color: var(--s2t-text); font-variant-numeric: tabular-nums;
    -moz-appearance: textfield; appearance: textfield; padding: 0; box-shadow: none;
}
#EchoMainContent .s2t-pos-stepper .posItmQty:focus { outline: none; box-shadow: none; }
#EchoMainContent .s2t-pos-stepper .posItmQty::-webkit-outer-spin-button,
#EchoMainContent .s2t-pos-stepper .posItmQty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#EchoMainContent .s2t-pos-items .ItmRemove {
    width: 38px; height: 38px; border-radius: var(--s2t-radius-sm); color: var(--s2t-muted);
    display: inline-grid; place-items: center; cursor: pointer; transition: background var(--s2t-dur-standard), color var(--s2t-dur-standard);
}
#EchoMainContent .s2t-pos-items .ItmRemove:hover { background: #FBE9E7; color: var(--s2t-error); }

/* foot: note + totals + actions */
#EchoMainContent .s2t-pos-foot {
    border-top: 1px solid var(--pos-line); padding: 14px 16px;
    display: grid; grid-template-columns: 1fr 300px; gap: var(--s2t-space-4);
    align-items: end; background: linear-gradient(#fff, #FBFDFC);
}
#EchoMainContent .s2t-pos-msg {
    width: 100%; min-height: 64px; border: 1.5px solid var(--s2t-field-border);
    border-radius: var(--s2t-radius-sm); padding: 10px 12px; font-family: inherit; font-size: 14px; resize: none;
}
#EchoMainContent .s2t-pos-msg:focus { outline: none; border-color: var(--s2t-brand); box-shadow: 0 0 0 3px rgba(74,138,104,.14); }
#EchoMainContent .s2t-pos-footright { display: flex; flex-direction: column; gap: var(--s2t-space-3); }
#EchoMainContent .s2t-pos-totals { display: flex; flex-direction: column; gap: 5px; }
#EchoMainContent .s2t-pos-totals .trow { display: flex; justify-content: space-between; font-size: 14px; color: var(--s2t-muted); }
#EchoMainContent .s2t-pos-totals .trow.grand { font-size: 24px; font-weight: 900; color: var(--s2t-text); padding-top: var(--s2t-space-2); border-top: 1px dashed var(--pos-line); margin-top: 2px; }
#EchoMainContent .s2t-pos-totals .trow.grand .amt { color: var(--s2t-brand-deep); }
#EchoMainContent .s2t-pos-saleact { display: flex; gap: var(--s2t-space-3); }
#EchoMainContent .s2t-pos-saleact .pbtn-charge { flex: 1; justify-content: center; height: 54px; font-size: 16px; background: var(--s2t-brand); color: #fff; box-shadow: 0 6px 18px rgba(74,138,104,.32); }
#EchoMainContent .s2t-pos-saleact .pbtn-charge:hover { background: var(--s2t-brand-strong); }
#EchoMainContent .s2t-pos-saleact .pbtn-clear { flex: 0 0 54px; height: 54px; justify-content: center; background: #fff; color: var(--s2t-muted); box-shadow: inset 0 0 0 1.5px var(--pos-line); }
#EchoMainContent .s2t-pos-saleact .pbtn-clear:hover { background: var(--pos-tint); color: var(--s2t-brand-deep); }

/* mobile sticky checkout (hidden on desktop) */
#EchoMainContent .s2t-pos-mobar { display: none; }

/* admin panel (in-page #posAdminPanel) — heading + spacing */
#EchoMainContent .s2t-pos #posAdmin .s2t-pos-adminhead { font-weight: 800; font-size: 18px; color: var(--s2t-brand-deep); margin-bottom: var(--s2t-space-3); }

/* ── fragment tables (modal pickers + admin panel; flat scope works in both) ─ */
.s2t-posfrag { font-family: var(--s2t-font); color: var(--s2t-text); }
/* fragment helper-instruction line (flat: fragments render in modals + admin panel) */
.s2t-posfrag .s2t-frag-hint { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--s2t-space-3); padding: 9px 14px; background: var(--s2t-brand-subtle); border: 1px solid #E1EAE5; border-radius: var(--s2t-radius-sm); font-size: 13px; color: var(--s2t-text); }
.s2t-posfrag .s2t-frag-hint i { color: var(--s2t-brand); }
.s2t-posfrag .s2t-posfrag-tools { display: flex; gap: var(--s2t-space-3); align-items: center; padding: 0 0 var(--s2t-space-3); flex-wrap: wrap; }
.s2t-posfrag .s2t-posfrag-search { position: relative; flex: 1; min-width: 200px; }
.s2t-posfrag .s2t-posfrag-search i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--s2t-brand); font-size: 14px; }
.s2t-posfrag .s2t-posfrag-search input { width: 100%; height: 44px; border-radius: var(--s2t-radius-pill); border: 1.5px solid var(--s2t-field-border); padding: 0 14px 0 42px; font-size: 15px; font-family: inherit; }
.s2t-posfrag .s2t-posfrag-search input:focus { outline: none; border-color: var(--s2t-brand); box-shadow: 0 0 0 3px rgba(74,138,104,.16); }
.s2t-posfrag table { width: 100%; border-collapse: collapse; font-size: 14px; }
.s2t-posfrag table thead th { background: rgba(74,138,104,0.10); color: var(--s2t-brand-deep); font-weight: 700; text-align: left; padding: 11px 14px; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; border: none; }
.s2t-posfrag table tbody td { padding: 11px 14px; border-bottom: 1px solid #E6ECE9; }
.s2t-posfrag table tbody tr:hover td { background: #FAFCFB; }
.s2t-posfrag .p-price, .s2t-posfrag .StockPri, .s2t-posfrag .num { font-weight: 700; color: var(--s2t-brand-deep); }
.s2t-posfrag .pbtn-select, .s2t-share .pbtn-select {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    font-weight: 700; font-size: 13px; border-radius: var(--s2t-radius-pill); padding: 7px 16px; min-height: 38px;
    background: #fff; color: var(--s2t-brand-deep); box-shadow: inset 0 0 0 1.5px var(--s2t-brand); cursor: pointer; border: none; font-family: inherit; text-decoration: none; white-space: nowrap;
}
.s2t-posfrag .pbtn-select:hover, .s2t-share .pbtn-select:hover { background: var(--s2t-brand); color: #fff; }
/* legacy server-built row action buttons (simpleButton5 View / simpleButton7 Select)
   retinted to brand green so the picker/admin tables match the rest of the reskin
   (de-rainbow scope-override; mirrors the .s2t-prodmanage treatment above). FLAT-scoped:
   posfrag renders in the Swal modal (#ModalContent, outside #EchoMainContent) AND the
   in-page #posAdminPanel, so an #EchoMainContent prefix would miss the modal case. */
.s2t-posfrag .simpleButton5, .s2t-posfrag .simpleButton7 {
    background: var(--s2t-brand) !important; border: 1px solid var(--s2t-brand) !important; color: #fff !important;
    border-radius: var(--s2t-radius-btn); padding: 6px 14px; font-weight: 700; cursor: pointer;
    display: inline-block; white-space: nowrap; box-shadow: none;
}
.s2t-posfrag .simpleButton5:hover, .s2t-posfrag .simpleButton7:hover {
    background: var(--s2t-brand-strong) !important; border-color: var(--s2t-brand-strong) !important; color: #fff !important;
}
/* stock-item detail popover: showFullDetail() toggles .FullDetail (server sets it
   display:none inline). The server builds an <img> even when the product has no
   SpecialImage1 -> hide the empty image so the expand shows clean text, not a broken
   icon. (.FullDetail has no global CSS; the picker renders in the Swal modal so this
   is flat-scoped under .s2t-posfrag.) */
.s2t-posfrag .FullDetail { padding: 6px 0 2px; font-size: 13px; color: var(--s2t-text); }
.s2t-posfrag .itemImage { max-width: 160px; height: auto; border-radius: 6px; margin-top: 6px; }
.s2t-posfrag .itemImage[src=""], .s2t-posfrag .itemImage:not([src]) { display: none; }
/* DataTables 2.x chrome tinted to brand inside POS fragments */
.s2t-posfrag .dt-search input, .s2t-posfrag .dt-length select { border: 1.5px solid var(--s2t-field-border); border-radius: var(--s2t-radius-sm); padding: 6px 10px; font-family: inherit; }
.s2t-posfrag .dt-paging .dt-paging-button.current { background: var(--s2t-brand) !important; border-color: var(--s2t-brand) !important; color: #fff !important; border-radius: var(--s2t-radius-sm); }
.s2t-posfrag .dt-paging .dt-paging-button:hover { background: rgba(74,138,104,.10) !important; border-color: transparent !important; }
/* POS in-panel helper hint (scoped to the console) */
#EchoMainContent .s2t-pos .s2t-pos-hint { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--s2t-space-3); padding: 9px 14px; background: var(--s2t-brand-subtle); border: 1px solid #E1EAE5; border-radius: var(--s2t-radius-sm); font-size: 13px; color: var(--s2t-text); }
#EchoMainContent .s2t-pos .s2t-pos-hint i { color: var(--s2t-brand); }
/* contextual "Back to Point of Sale" banner on the product pages (productmanage +
   loadproduct), shown only when the merchant arrived from the POS (sessionStorage
   s2tFromPos flag, set on POS->products exit, cleared on POS load). Both pages load
   into #EchoMainContent. */
/* DataTables length control: breathing room between the "n" select and "entries per page" */
#EchoMainContent .s2t-prodmanage .dt-length select { margin: 0 8px; }
#EchoMainContent .s2t-backpos { margin: 0 0 var(--s2t-space-3); }
#EchoMainContent .s2t-backpos a { display: inline-flex; align-items: center; gap: 8px; background: var(--s2t-brand); color: #fff; font-weight: 700; font-size: 14px; padding: 9px 18px; border-radius: var(--s2t-radius-pill); text-decoration: none; }
#EchoMainContent .s2t-backpos a:hover { background: var(--s2t-brand-strong); color: #fff; }
/* POS share & promote panel (renders in the Swal .app-modal-popup -> FLAT-scoped) */
.s2t-share { font-family: var(--s2t-font); color: var(--s2t-text); }
.s2t-share-intro { font-size: 13.5px; line-height: 1.45; background: var(--s2t-brand-subtle); border: 1px solid #E1EAE5; border-radius: var(--s2t-radius-sm); padding: 11px 14px; margin: 0 0 var(--s2t-space-3); }
.s2t-share-intro i { color: var(--s2t-brand); margin-right: 4px; }
.s2t-share-empty { font-size: 13.5px; padding: 14px; background: var(--s2t-brand-subtle); border-radius: var(--s2t-radius-sm); }
.s2t-share-card { border: 1px solid #E6ECE9; border-radius: var(--s2t-radius-sm); padding: 12px 14px; margin-bottom: var(--s2t-space-3); }
.s2t-share-cardhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; margin-bottom: 9px; }
.s2t-share-cardhead > i { color: var(--s2t-brand); }
.s2t-share-cardhead b { color: var(--s2t-brand-deep); }
.s2t-share-help { font-size: 12px; font-weight: 400; color: #5c6b63; flex: 1 1 100%; }
.s2t-share-help i { color: var(--s2t-brand); margin-right: 3px; }
.s2t-share-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.s2t-share-url { flex: 1 1 240px; min-width: 0; height: 38px; border: 1.5px solid var(--s2t-field-border); border-radius: var(--s2t-radius-sm); padding: 0 12px; font-size: 13px; font-family: inherit; background: #fff; color: var(--s2t-text); }
.s2t-share-embed { width: 100%; border: 1.5px solid var(--s2t-field-border); border-radius: var(--s2t-radius-sm); padding: 8px 12px; font-size: 12.5px; font-family: ui-monospace, Menlo, Consolas, monospace; margin-bottom: 8px; resize: vertical; }
.s2t-share-qrwrap { text-align: center; margin: 4px 0 var(--s2t-space-3); }
.s2t-share-qr-holder { display: inline-block; padding: 10px; background: #fff; border: 1px solid #E6ECE9; border-radius: var(--s2t-radius-sm); }
.s2t-share-qr-holder img, .s2t-share-qr-holder canvas { display: block; }
.s2t-share-qrcap { font-size: 12px; color: #5c6b63; margin-top: 6px; }

/* ════════ RESPONSIVE ════════ */
@media (max-width: 1024px) {
    #EchoMainContent .s2t-pos-foot { grid-template-columns: 1fr 260px; }
}
@media (max-width: 860px) {
    #EchoMainContent .s2t-pos-top { padding: 11px 14px; gap: var(--s2t-space-3); }
    #EchoMainContent .s2t-pos-tag { display: none; }
    #EchoMainContent .s2t-pos-store { flex: 1 1 auto; min-width: 0; }
    #EchoMainContent .s2t-pos-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #EchoMainContent .s2t-pos-topact .plbl { display: none; }
    #EchoMainContent .s2t-pos-topact .pbtn-hidemob { display: none; }
    #EchoMainContent .s2t-pos-topact .pbtn-iconmob { padding: 0; width: 44px; justify-content: center; border-radius: 12px; }
    #EchoMainContent .s2t-pos .pbtn-kebab { display: inline-flex; }
    #EchoMainContent .s2t-pos { max-height: none; min-height: calc(100dvh - 96px); padding-bottom: 80px; }
    #EchoMainContent .s2t-pos-meta { margin-left: 0; width: 100%; }

    /* add bar -> 3 equal stacked icon+label */
    #EchoMainContent .s2t-pos-addbar { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2t-space-2); padding: var(--s2t-space-3); }
    #EchoMainContent .s2t-pos-addbar .pbtn { flex: none; min-width: 0; flex-direction: column; gap: 5px; padding: 11px 4px; min-height: 62px; font-size: 12.5px; line-height: 1.1; text-align: center; }

    /* items -> compact 3-line cards (operates on the contract 7-cell row) */
    #EchoMainContent table.s2t-pos-items, #EchoMainContent table.s2t-pos-items tbody { display: block; }
    #EchoMainContent table.s2t-pos-items thead { display: none; }
    #EchoMainContent table.s2t-pos-items tbody tr {
        display: grid; grid-template-columns: 1fr auto;
        grid-template-areas: "desc total" "meta price" "qty rm";
        gap: 7px 12px; align-items: center;
        border: 1px solid var(--pos-line); border-radius: var(--s2t-radius-md);
        margin: 10px 12px; padding: 13px 14px; background: #fff;
    }
    #EchoMainContent table.s2t-pos-items tbody td { display: block; padding: 0; border: none; }
    #EchoMainContent table.s2t-pos-items tbody td.it-code { grid-area: meta; color: var(--s2t-muted); font-size: 13px; font-weight: 700; }
    #EchoMainContent table.s2t-pos-items tbody td.it-desc { grid-area: desc; font-weight: 700; font-size: 15px; }
    #EchoMainContent table.s2t-pos-items tbody td.it-units { display: none; }
    #EchoMainContent table.s2t-pos-items tbody td.it-qty { grid-area: qty; justify-self: start; }
    #EchoMainContent table.s2t-pos-items tbody td.it-price { grid-area: price; justify-self: end; color: var(--s2t-muted); font-size: 13px; }
    #EchoMainContent table.s2t-pos-items tbody td.it-totalcell { grid-area: total; justify-self: end; }
    #EchoMainContent table.s2t-pos-items tbody td.it-rmcell { grid-area: rm; justify-self: end; }
    #EchoMainContent .s2t-pos-items .it-total, #EchoMainContent .s2t-pos-items .ItmTotalPrice { font-size: 17px; }

    /* sticky checkout bar */
    #EchoMainContent .s2t-pos-foot { grid-template-columns: 1fr; }
    #EchoMainContent .s2t-pos-footright { display: none; }
    #EchoMainContent .s2t-pos-mobar {
        display: flex; align-items: center; gap: var(--s2t-space-3);
        position: fixed; left: 0; right: 0; bottom: 0;
        padding: 11px 14px calc(11px + env(safe-area-inset-bottom, 0px));
        background: var(--s2t-surface); border-top: 1px solid var(--pos-line);
        box-shadow: 0 -4px 20px rgba(31,58,46,.10); z-index: 35;
    }
    #EchoMainContent .s2t-pos-full .s2t-pos-mobar { position: absolute; }
    #EchoMainContent .s2t-pos-mobar .sum { flex: 1; }
    #EchoMainContent .s2t-pos-mobar .sum small { display: block; color: var(--s2t-muted); font-size: 12px; }
    #EchoMainContent .s2t-pos-mobar .sum b { font-size: 20px; }
    #EchoMainContent .s2t-pos-mobar .pbtn-charge { height: 48px; padding: 0 22px; border-radius: var(--s2t-radius-pill); background: var(--s2t-brand); color: #fff; }
}
@media (prefers-reduced-motion: reduce) {
    #EchoMainContent .s2t-pos * { transition: none !important; }
}

/* ── GrowthPoints reminder (shown only when getIsGPMerchant()=="No"; the .s2t-pos
   wrapper carries data-gp="1"). Dismissible per session. Orange accent CTA marks
   it as a promo spark, distinct from the green Process action. ─────────────── */
#EchoMainContent .s2t-pos-gpnotice { display: none; }
#EchoMainContent .s2t-pos[data-gp="1"] .s2t-pos-gpnotice {
    display: flex; align-items: center; gap: var(--s2t-space-3);
    padding: 11px 16px; margin-bottom: var(--s2t-space-3); flex: none;
    background: var(--s2t-surface); border: 1px solid var(--pos-line);
    border-left: none; border-radius: 18px; box-shadow: var(--s2t-shadow-1);
    position: relative; overflow: hidden;
}
#EchoMainContent .s2t-pos[data-gp="1"] .s2t-pos-gpnotice::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--s2t-accent);
}
#EchoMainContent .s2t-pos-gpnotice.is-dismissed { display: none !important; }
#EchoMainContent .s2t-pos-gpnotice .gp-icon {
    width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center;
    background: rgba(240,122,45,0.12); color: var(--s2t-accent); font-size: 16px;
}
#EchoMainContent .s2t-pos-gpnotice .gp-txt { flex: 1; min-width: 0; font-size: 13.5px; color: var(--s2t-text); line-height: 1.35; }
#EchoMainContent .s2t-pos-gpnotice .gp-txt b { color: var(--s2t-brand-deep); }
#EchoMainContent .s2t-pos-gpnotice .gp-cta {
    display: inline-flex; align-items: center; gap: 7px; flex: none; white-space: nowrap; text-decoration: none;
    font-weight: 700; font-size: 13px; border-radius: var(--s2t-radius-pill); padding: 9px 16px; min-height: 40px;
    background: var(--s2t-accent); color: #fff; transition: background var(--s2t-dur-standard);
}
#EchoMainContent .s2t-pos-gpnotice .gp-cta:hover { background: var(--s2t-accent-strong); color: #fff; }
#EchoMainContent .s2t-pos-gpnotice .gp-x {
    flex: none; width: 34px; height: 34px; border-radius: 9px; border: none; background: none; cursor: pointer;
    color: var(--s2t-muted); display: grid; place-items: center; font-size: 18px; line-height: 1;
}
#EchoMainContent .s2t-pos-gpnotice .gp-x:hover { background: var(--pos-tint); color: var(--s2t-text); }
@media (max-width: 860px) {
    #EchoMainContent .s2t-pos[data-gp="1"] .s2t-pos-gpnotice { flex-wrap: wrap; }
    #EchoMainContent .s2t-pos-gpnotice .gp-txt { flex: 1 1 100%; order: 2; }
    #EchoMainContent .s2t-pos-gpnotice .gp-icon { order: 1; }
    #EchoMainContent .s2t-pos-gpnotice .gp-x { order: 1; margin-left: auto; }
    #EchoMainContent .s2t-pos-gpnotice .gp-cta { order: 3; flex: 1 1 100%; justify-content: center; }
}

/* ===========================================================================
   .s2t-register  --  /content/register/ link-your-loyalty-numbers page.
   UI-24, owner call 2026-07-17: modernise in place. Wiring untouched (same 3
   WebMethods); this replaces the BS3 grid + glass-container + btnRed2 (RED on a
   CREATE action -- MASTER reserves red for destructive) + blueHighlight.
   The numbers table is DataTables 2.3.8, loaded page-scoped + SRI-pinned by
   /content/register/Default.aspx -- NOT the master. DataTables 2.x emits dt-*
   class names, NOT the legacy 1.x dataTables_* (see .s2t-purchasehistory above,
   which still targets the old names).
   =========================================================================== */
#EchoMainContent .s2t-register { padding: var(--s2t-space-5) 0; }

/* The old page greyed the master's .hero via an injected <style> that leaked to
   every .hero on the site. The panel owns its own surface instead. */
#EchoMainContent .s2t-register .s2t-panel { max-width: 1040px; margin: 0 auto; }

#EchoMainContent .s2t-register .s2t-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s2t-space-4); flex-wrap: wrap;
}
#EchoMainContent .s2t-register .s2t-register-faq { flex: 0 0 auto; min-width: 96px; }

#EchoMainContent .s2t-register .s2t-register-intro {
    margin: 0 0 var(--s2t-space-5);
    color: var(--s2t-text); font-size: var(--s2t-text-body);
}

/* --- guest: no count, no form, one way in -------------------------------- */
#EchoMainContent .s2t-register .s2t-register-signin {
    display: flex; flex-direction: column; align-items: center; gap: var(--s2t-space-4);
    padding: var(--s2t-space-7) var(--s2t-space-5);
    background: var(--s2t-brand-subtle);
    border: 1px solid var(--s2t-brand-light);
    border-radius: var(--s2t-radius-md);
    text-align: center;
}
#EchoMainContent .s2t-register .s2t-register-signin-msg {
    margin: 0; color: var(--s2t-text); font-size: var(--s2t-text-body);
}

/* --- member: count, add form, at-cap ------------------------------------- */
#EchoMainContent .s2t-register .s2t-register-count {
    margin: 0 0 var(--s2t-space-4);
    color: var(--s2t-text); font-size: var(--s2t-text-body);
}
#EchoMainContent .s2t-register .s2t-register-count #NumberRegCount {
    font-weight: 700; color: var(--s2t-brand-deep); font-variant-numeric: tabular-nums;
}

#EchoMainContent .s2t-register .s2t-register-add {
    padding: var(--s2t-space-5);
    background: var(--s2t-brand-subtle);
    border: 1px solid var(--s2t-brand-light);
    border-radius: var(--s2t-radius-md);
    margin-bottom: var(--s2t-space-5);
}
#EchoMainContent .s2t-register .s2t-register-form { grid-template-columns: 1fr 1fr; }
#EchoMainContent .s2t-register .s2t-register-add-actions {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s2t-space-4); flex-wrap: wrap;
    margin-top: var(--s2t-space-4);
}
#EchoMainContent .s2t-register .s2t-register-add-actions .s2t-help { margin: 0; }

#EchoMainContent .s2t-register .s2t-register-cap {
    padding: var(--s2t-space-4);
    background: #FFF8F0;
    border: 1px solid #F3D5B5;
    border-left: 4px solid var(--s2t-accent);
    border-radius: var(--s2t-radius-sm);
    color: var(--s2t-text); font-size: var(--s2t-text-small);
    margin-bottom: var(--s2t-space-5);
}

/* --- the numbers table (DataTables 2.x: dt-* names) ---------------------- */
#EchoMainContent .s2t-register .s2t-register-table { margin-top: var(--s2t-space-5); }
#EchoMainContent .s2t-register .s2t-register-table.is-guest { display: none; }
#EchoMainContent .s2t-register .dt-container { width: 100%; }
#EchoMainContent .s2t-register table.dataTable { width: 100% !important; margin: 0; }
#EchoMainContent .s2t-register td.dt-empty {
    padding: var(--s2t-space-7) var(--s2t-space-4);
    color: var(--s2t-muted); text-align: center; font-style: italic;
}
/* DataTables 2.x auto-TYPES columns and right-aligns the ones it reads as numeric or
   date -- here that is Pin (looks numeric) and both date columns (typed off the ISO
   data-order keys). It also flips those headers to row-reverse, so the caret lands on
   the LEFT of its title. Neither is right for this table: MASTER/.s2t-table reserve
   right-alignment for CURRENCY (.s2t-num), and Pin is an identifier, not a quantity.
   Force left alignment and one consistent caret side. */
#EchoMainContent .s2t-register table.dataTable thead th,
#EchoMainContent .s2t-register table.dataTable tbody td { text-align: left; }
#EchoMainContent .s2t-register table.dataTable thead .dt-column-header {
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--s2t-space-2);
}
#EchoMainContent .s2t-register table.dataTable thead .dt-column-order { flex: 0 0 auto; }
/* ...and stop the TITLE growing: it is flex:1 by default, so it fills the column and
   shoves the caret to the far edge no matter what the parent justifies. */
#EchoMainContent .s2t-register table.dataTable thead .dt-column-title { flex: 0 1 auto; }

#EchoMainContent .s2t-register .dt-search { margin-bottom: var(--s2t-space-3); }
#EchoMainContent .s2t-register .dt-search input {
    min-height: 40px; padding: var(--s2t-space-2) var(--s2t-space-3);
    border: 1px solid var(--s2t-field-border); border-radius: var(--s2t-radius-input);
    font-family: var(--s2t-font); background: #fff;
}
#EchoMainContent .s2t-register .dt-search input:focus-visible,
#EchoMainContent .s2t-register .dt-search input:focus {
    outline: none; border-color: var(--s2t-brand);
    box-shadow: 0 0 0 3px rgba(74,138,104,0.20);
}
#EchoMainContent .s2t-register .dt-paging .dt-paging-button.current {
    background: var(--s2t-brand); border-color: var(--s2t-brand); color: #fff !important;
    border-radius: var(--s2t-radius-sm);
}
#EchoMainContent .s2t-register .dt-info { color: var(--s2t-muted); font-size: var(--s2t-text-small); }

/* Activate control: server emits .btnActivate into the Activation Date cell when
   a number is not yet activated. It is an ACTION, not a destructive one. */
#EchoMainContent .s2t-register .btnActivate {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 32px; padding: var(--s2t-space-1) var(--s2t-space-4);
    background: var(--s2t-brand); color: #fff;
    border-radius: var(--s2t-radius-btn);
    font-size: var(--s2t-text-label); font-weight: 700;
    cursor: pointer; white-space: nowrap;
    transition: background-color var(--s2t-dur-fast) var(--s2t-ease-standard);
}
#EchoMainContent .s2t-register .btnActivate:hover { background: var(--s2t-brand-strong); }

@media (max-width: 767px) {
    /* 5 columns cannot fit 390px. Give the TABLE its own horizontal scroll container
       rather than letting it clip (Activation Date / At Merchant were unreachable) --
       the page body itself must never scroll sideways. */
    #EchoMainContent .s2t-register .dt-layout-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    #EchoMainContent .s2t-register table.dataTable { min-width: 600px; }

    #EchoMainContent .s2t-register .s2t-register-form { grid-template-columns: 1fr; }
    #EchoMainContent .s2t-register .s2t-register-add-actions { justify-content: stretch; }
    #EchoMainContent .s2t-register .s2t-register-add-actions .s2t-btn { width: 100%; }
    #EchoMainContent .s2t-register .s2t-panel-head { justify-content: flex-start; }
}

/* ============================================================================
   FE-16: member Transactions report (#TransRepTable) -- DataTables 2.3.8 skin.
   Injected by main.js loadMemTransactions() into #EchoMainContent (no page of
   its own), wrapped by #memberTableTransactions. Tokenised S2T brand -- mirrors
   the .s2t-purchasehistory POS-table skin. DataTables 2.x emits dt-* class names
   (dt-search / dt-paging); legacy dataTables_* kept as a fallback.
   ========================================================================== */
#EchoMainContent #memberTableTransactions table.dataTable { width: 100% !important; margin: 0; }
#EchoMainContent #memberTableTransactions table.dataTable thead th {
    background: var(--s2t-band-library-bg); color: var(--s2t-band-library-fg);
    font-weight: 700; border-bottom: 2px solid var(--s2t-brand-light);
}
#EchoMainContent #memberTableTransactions table.dataTable tbody td { color: var(--s2t-text); }
#EchoMainContent #memberTableTransactions table.dataTable tbody tr:hover td { background: var(--s2t-brand-subtle); }
#EchoMainContent #memberTableTransactions .dt-search input,
#EchoMainContent #memberTableTransactions .dataTables_filter input {
    border: 1px solid var(--s2t-field-border); border-radius: var(--s2t-radius-input);
    padding: 6px 10px; min-height: 38px; margin-left: var(--s2t-space-2);
    color: var(--s2t-text); background: #fff;
}
/* Length control ("N entries per page"): the report injects into the legacy .hero,
   whose white-text theme leaves the select + its label white-on-white (invisible).
   Force a readable branded control, sized to sit beside the search input. */
#EchoMainContent #memberTableTransactions .dt-length label,
#EchoMainContent #memberTableTransactions .dataTables_length label {
    color: var(--s2t-text); font-size: 0.9rem; font-weight: 400;
}
#EchoMainContent #memberTableTransactions .dt-length select,
#EchoMainContent #memberTableTransactions .dataTables_length select {
    color: var(--s2t-text); background: #fff;
    border: 1px solid var(--s2t-field-border); border-radius: var(--s2t-radius-input);
    padding: 4px 8px; min-height: 34px; margin: 0 6px;
}
#EchoMainContent #memberTableTransactions .dt-paging .dt-paging-button.current,
#EchoMainContent #memberTableTransactions .dataTables_paginate .paginate_button.current {
    background: var(--s2t-brand); color: #fff !important; border: 1px solid var(--s2t-brand);
    border-radius: var(--s2t-radius-sm);
}
/* Empty state: raise specificity past `table.dataTable tbody td { color: --s2t-text }`
   above (2 IDs/1 class/3 elems) so the muted colour actually wins. */
#EchoMainContent #memberTableTransactions table.dataTable td.dt-empty {
    padding: 18px; color: var(--s2t-muted); text-align: center;
}


/* ============================================================================
   UI-31 — advert per-type colour + premium banner (all-surfaces)
   Emitted classes: pill `s2t-lt s2t-lt-{1..5}`, card `lt-{1..5}` from
   BuildGalaryListing + BuildPremiumListing (Merchant.cs). Type map:
   1 Frega #4A8A68 · 2 For Sale #4b82b0 · 3 Auction #d98200 · 4 Free #2fa84f · 5 Enquiry #5D5446.
   #EchoMainContent scope = home + member gallery + store + search.
   ============================================================================ */
#EchoMainContent .stRegProdListType.s2t-lt{position:relative;display:inline-flex;align-items:center;gap:6px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border-radius:9999px;border:1px solid transparent;box-shadow:0 1px 2px rgba(0,0,0,.06);}
#EchoMainContent .stRegProdListType.s2t-lt::before{font-family:"Font Awesome 5 Pro";font-weight:900;font-size:.92em;}
.s2t-lt-1{color:color-mix(in srgb,#4A8A68 82%,#000);background:color-mix(in srgb,#4A8A68 15%,#fff);border-color:color-mix(in srgb,#4A8A68 36%,#fff)!important;} .s2t-lt-1::before{content:"\f06c";}
#EchoMainContent .stProdWrap.lt-1,#EchoMainContent .PremiumProdWrap.lt-1{ background:color-mix(in srgb,#4A8A68 4%,#fff)!important; border-color:color-mix(in srgb,#4A8A68 26%,#fff)!important; }
#EchoMainContent .lt-1 .stRegProdStore{ border-top-color:color-mix(in srgb,#4A8A68 22%,transparent)!important; }
.s2t-lt-2{color:color-mix(in srgb,#4b82b0 82%,#000);background:color-mix(in srgb,#4b82b0 15%,#fff);border-color:color-mix(in srgb,#4b82b0 36%,#fff)!important;} .s2t-lt-2::before{content:"\f02b";}
#EchoMainContent .stProdWrap.lt-2,#EchoMainContent .PremiumProdWrap.lt-2{ background:color-mix(in srgb,#4b82b0 4%,#fff)!important; border-color:color-mix(in srgb,#4b82b0 26%,#fff)!important; }
#EchoMainContent .lt-2 .stRegProdStore{ border-top-color:color-mix(in srgb,#4b82b0 22%,transparent)!important; }
.s2t-lt-3{color:color-mix(in srgb,#d98200 82%,#000);background:color-mix(in srgb,#d98200 15%,#fff);border-color:color-mix(in srgb,#d98200 36%,#fff)!important;} .s2t-lt-3::before{content:"\f0e3";}
#EchoMainContent .stProdWrap.lt-3,#EchoMainContent .PremiumProdWrap.lt-3{ background:color-mix(in srgb,#d98200 4%,#fff)!important; border-color:color-mix(in srgb,#d98200 26%,#fff)!important; }
#EchoMainContent .lt-3 .stRegProdStore{ border-top-color:color-mix(in srgb,#d98200 22%,transparent)!important; }
.s2t-lt-4{color:color-mix(in srgb,#2fa84f 82%,#000);background:color-mix(in srgb,#2fa84f 15%,#fff);border-color:color-mix(in srgb,#2fa84f 36%,#fff)!important;} .s2t-lt-4::before{content:"\f06b";}
#EchoMainContent .stProdWrap.lt-4,#EchoMainContent .PremiumProdWrap.lt-4{ background:color-mix(in srgb,#2fa84f 4%,#fff)!important; border-color:color-mix(in srgb,#2fa84f 26%,#fff)!important; }
#EchoMainContent .lt-4 .stRegProdStore{ border-top-color:color-mix(in srgb,#2fa84f 22%,transparent)!important; }
.s2t-lt-5{color:color-mix(in srgb,#5D5446 82%,#000);background:color-mix(in srgb,#5D5446 15%,#fff);border-color:color-mix(in srgb,#5D5446 36%,#fff)!important;} .s2t-lt-5::before{content:"\f4ad";}
#EchoMainContent .stProdWrap.lt-5,#EchoMainContent .PremiumProdWrap.lt-5{ background:color-mix(in srgb,#5D5446 4%,#fff)!important; border-color:color-mix(in srgb,#5D5446 26%,#fff)!important; }
#EchoMainContent .lt-5 .stRegProdStore{ border-top-color:color-mix(in srgb,#5D5446 22%,transparent)!important; }
/* calmer hover */
#EchoMainContent .RegAdsImg{transition:transform .4s cubic-bezier(.2,.6,.2,1)!important;}
#EchoMainContent .stGalCont:hover .RegAdsImg{transform:scale(1.03)!important;}
#EchoMainContent .stGalCont:hover .stProdWrap{box-shadow:0 5px 14px rgba(0,0,0,.10)!important;transform:translateY(-2px)!important;}
#EchoMainContent .stGalCont:hover .PremiumProdWrap{box-shadow:0 6px 16px rgba(240,122,45,.18)!important;transform:translateY(-2px)!important;}
#EchoMainContent .PremiumProdWrap::before{content:"\f005  FEATURED"!important;font-family:"Font Awesome 5 Pro","Lato",sans-serif!important;background:linear-gradient(135deg,#F79138,#E0620F)!important;box-shadow:0 3px 10px rgba(224,98,15,.45)!important;letter-spacing:.08em!important;padding:5px 13px!important;}
#EchoMainContent .stRegProdPrice{font-size:1.06rem!important;font-weight:800!important;color:#9a3400!important;}
/* LARGER formats: image-left / details-right banner (ROBUST column sizing by badge) */
#EchoMainContent .PremiumProdWrap.premFull{ flex-direction:row!important;flex-wrap:nowrap!important;align-items:stretch!important;min-height:250px!important;max-height:290px!important; }
#EchoMainContent .PremiumProdWrap.premHalf{ flex-direction:row!important;flex-wrap:nowrap!important;align-items:stretch!important;min-height:220px!important;max-height:260px!important; }
#EchoMainContent .premFull > *:not(:has(.stRegProdListType)),
#EchoMainContent .premHalf > *:not(:has(.stRegProdListType)){ flex:0 0 60%!important;width:60%!important;max-width:60%!important;display:flex!important;align-items:stretch!important;overflow:hidden!important; }
#EchoMainContent .premFull > *:has(.stRegProdListType),
#EchoMainContent .premHalf > *:has(.stRegProdListType){ flex:1 1 40%!important;width:40%!important;max-width:40%!important;display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:flex-start!important;gap:9px!important;padding:22px 26px!important;text-align:left!important; }
#EchoMainContent .premFull > *:has(.stRegProdListType) > *,
#EchoMainContent .premHalf > *:has(.stRegProdListType) > *{ width:100%!important;text-align:left!important;margin:0!important; }
#EchoMainContent .premFull > *:not(:has(.stRegProdListType)) .RegAdsImg,
#EchoMainContent .premHalf > *:not(:has(.stRegProdListType)) .RegAdsImg{ width:100%!important;height:100%!important;object-fit:cover!important;float:none!important; }
#EchoMainContent .premFull > *:not(:has(.stRegProdListType)) .RegAdsImg:not(:first-of-type),
#EchoMainContent .premHalf > *:not(:has(.stRegProdListType)) .RegAdsImg:not(:first-of-type){ display:none!important; }
#EchoMainContent .premFull .stRegProdListType,#EchoMainContent .premHalf .stRegProdListType{ margin:0!important; }
#EchoMainContent .premFull .stRegProdDesc{ font-size:1.35rem!important;font-weight:800!important;line-height:1.22!important;-webkit-line-clamp:3!important; }
#EchoMainContent .premHalf .stRegProdDesc{ font-size:1.1rem!important;font-weight:800!important;line-height:1.25!important;-webkit-line-clamp:2!important; }
#EchoMainContent .premFull .stRegProdPrice{ font-size:1.3rem!important; }
#EchoMainContent .premHalf .stRegProdPrice{ font-size:1.08rem!important; }
#EchoMainContent .premFull .stRegProdStore,#EchoMainContent .premHalf .stRegProdStore{ margin-top:8px!important;padding-top:11px!important;border-top:1px solid color-mix(in srgb,var(--s2t-brand-light,#86AF99) 55%,transparent)!important; }
/* FULL-BLEED images (no white frame) */
#EchoMainContent .stProdRegImg,#EchoMainContent .PremiumProdRegImg{ background:transparent!important;padding:0!important;margin:0!important;border:0!important; }
#EchoMainContent .stGalCont .RegAdsImg{ width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;margin:0!important;padding:0!important;display:block!important; }
#EchoMainContent .stProdWrap .stProdRegImg{ border-bottom:0!important; }
#EchoMainContent .PremiumProdWrap .PremiumProdRegImg{ border-bottom:0!important; }
/* /UI-31 */