/*
 * weblet.css  -  weblet-scoped modern stylesheet (loaded ONLY by weblet.master).
 *
 * Seeded in Phase B / Increment 2 (2026-06-29) to host the Swiper hero-slider
 * container styling that replaces the legacy Nivo theme CSS. The hub stays on
 * duw.master and never loads this file, so these rules are weblet-only.
 *
 * The full-width hero treatment + header redesign land in Phase C; this file
 * currently carries just enough to render the Swiper slider cleanly.
 */

/* ---- Hero slider (custom $.fn.nivoSlider -> Swiper 11 shim) ----
   FIXED height so the hero does NOT jump on slide change. The member's slider
   images have mixed aspect ratios (~2.1-2.35:1); with Swiper autoHeight (now
   off) each slide resized the hero and nudged the page. Instead the hero holds
   one responsive height (~width/2.3, capped) and every image COVERS it. */
.weblet-swiper.swiper {
    width: 100%;
    height: clamp(200px, 42vw, 460px);
    overflow: hidden;
}

.weblet-swiper .swiper-wrapper {
    height: 100%;
}

.weblet-swiper .swiper-slide {
    height: 100%;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.weblet-swiper .weblet-slide-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Prev/next arrows + pagination on the (often dark) hero imagery */
.weblet-swiper .swiper-button-prev,
.weblet-swiper .swiper-button-next {
    color: #ffffff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.weblet-swiper .swiper-button-prev::after,
.weblet-swiper .swiper-button-next::after {
    font-size: 28px;
}

.weblet-swiper .swiper-pagination-bullet {
    background: #ffffff;
    opacity: 0.6;
}

.weblet-swiper .swiper-pagination-bullet-active {
    opacity: 1;
}

/* =====================================================================
   Header MOVED to the SHARED css/frega-header.css (2026-07-01) - loaded by
   BOTH weblet.master and duw.master, so the hub + weblet share ONE header
   implementation (was duplicated in duw-header.css). The weblet-only bits
   below (edit-mode pencils + public-view body reskin) stay here.

   The header publishes --frega-accent; the weblet body rules below still read
   the old --weblet-accent, so alias it (one line) instead of renaming 14 uses. */
:root { --weblet-accent: var(--frega-accent, #303030); }

/* =====================================================================
   EDIT-MODE pencil chips (weblet-only, owner edit mode - 2026-06-30)
   designurweb.js (populateEdit) injects an edit affordance over each
   editable region: brand logo, hero slider, about block, the 3 images,
   each product card, + three nav-level "settings" edits (SEO meta,
   button-colour, contact). The legacy markup is a raster <img editLogo.png>
   in a div hard-positioned with per-breakpoint magic numbers in custom.css -
   those were tuned to the OLD header/hero, so the weblet redesign knocked
   them out of place (one floats top-left, several pile up in the nav).
   Here we (a) restyle EVERY affordance into one consistent circular chip in
   the MEMBER's own accent (--weblet-accent) with an FA pencil glyph +
   hover/focus, and (b) re-anchor each to a clean corner of the region it
   edits (parents made position:relative). weblet.css loads AFTER custom.css,
   so equal-specificity base rules win on source order and the 2-id /
   id+class anchor rules beat the legacy single-id positions. CSS-only -
   no JS change; keyboard a11y (role/tabindex) is a follow-up.
   ===================================================================== */
#brandEdit,
#btnEdit,
#contEdit,
#seoEditBtn,
#slideEdit,
#aboutEdit,
.editImageEdit,
.advertEdit {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    /* Owner: edit chips MUST stay orange so they stand out as a tool (not the
       member accent, which can be a low-contrast grey). #F07A2D = the Frega
       edit-orange; reads on both the light header and the dark hero. */
    background: #F07A2D;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 9px rgba(0, 0, 0, .3);
    cursor: pointer;
    z-index: 1500;   /* owner: edit buttons must sit on top of everything */
    transition: transform .16s ease, box-shadow .16s ease;
    -webkit-tap-highlight-color: transparent;
}
/* hide the legacy raster pencil; the glyph is drawn with ::before */
#brandEdit > img,
#btnEdit > img,
#contEdit > img,
#seoEditBtn > img,
#slideEdit > img,
#aboutEdit > img,
.editImageEdit > img,
.advertEdit > img {
    display: none !important;
}
#brandEdit::before,
#btnEdit::before,
#contEdit::before,
#seoEditBtn::before,
#slideEdit::before,
#aboutEdit::before,
.editImageEdit::before,
.advertEdit::before {
    content: "\f303"; /* fa-pencil-alt */
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 16px;
    line-height: 1;
}
#brandEdit:hover,
#btnEdit:hover,
#contEdit:hover,
#seoEditBtn:hover,
#slideEdit:hover,
#aboutEdit:hover,
.editImageEdit:hover,
.advertEdit:hover {
    transform: translateY(-2px) scale(1.06);
    box-shadow: 0 5px 16px rgba(0, 0, 0, .36);
}
#brandEdit:focus-visible,
#btnEdit:focus-visible,
#contEdit:focus-visible,
#seoEditBtn:focus-visible,
#slideEdit:focus-visible,
#aboutEdit:focus-visible,
.editImageEdit:focus-visible,
.advertEdit:focus-visible {
    outline: 3px solid rgba(240, 122, 45, .55);
    outline-offset: 2px;
}

/* ---- re-anchor each chip to a clean corner of its own region ---- */
#brandLogo,
#siteAboutContain,
#ContentPlaceHolder1_siteImages0,
#ContentPlaceHolder1_siteImages1,
#ContentPlaceHolder1_siteImages2,
.advertContainer {
    position: relative;
}
/* brand logo -> top-right corner of the logo box */
#brandLogo > #brandEdit {
    position: absolute;
    top: -10px;
    right: -10px;
    left: auto;
    bottom: auto;
}
/* hero slider -> top-right of the hero (legacy top:92%/right:48% = lost mid-bottom).
   NB descendant, not '>': #slideEdit is injected into #siteSlide (a child of
   #slideContainer), so it is a grandchild - it anchors to #slideContainer
   (the position:relative ancestor) via the descendant combinator. */
#slideContainer #slideEdit {
    position: absolute;
    top: 14px;
    right: 14px;
    left: auto;
    bottom: auto;
}
/* about block -> top-right corner */
#siteAboutContain #aboutEdit {
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    bottom: auto;
}
/* the 3 images -> top-right of each cell (beats the 5 custom.css breakpoints) */
#ContentPlaceHolder1_siteImages0 > .editImageEdit,
#ContentPlaceHolder1_siteImages1 > .editImageEdit,
#ContentPlaceHolder1_siteImages2 > .editImageEdit {
    position: absolute;
    top: 12px;
    right: 22px;   /* clear of the BS column gutter */
    left: auto;
    bottom: auto;
}
/* product cards -> top-right corner */
.advertContainer > .advertEdit {
    position: absolute;
    top: 10px;
    right: 12px;
    left: auto;
    bottom: auto;
}

/* ---- nav-level "settings" edits as small corner badges on nav <li>s ----
   contact edit -> the Chat <li> (already position:relative via BS .dropdown).
   button-colour edit -> the Help <li> (owner: moved off the gauge; designurweb.js
   appends #btnEdit there so the wider "Close Edit" label can't shove it into the
   gauge cluster). SEO keeps its legacy spot (restyled only) - re-anchoring its
   #sticky-header-child container risks the hamburger's containing block. */
li:has(> .webletNavBtn) {        /* the Help <li> */
    position: relative;
}
/* contact edit badge on the Chat <li> */
#menuChatContact #contEdit {
    position: absolute;
    top: 8px;
    right: 0;
    left: auto;
    bottom: auto;
    width: 24px;
    height: 24px;
    border-width: 1.5px;
    margin: 0;
    z-index: 1501;
}
#menuChatContact #contEdit::before { font-size: 11px; }

/* button-colour edit: the picker is bound to the #siteButtonColour CONTAINER
   (Default.aspx: new CP(#siteButtonColour)) and the chip lives inside it, so we
   relocate the CONTAINER onto the Help <li> (designurweb.js) - moving the bare
   #btnEdit chip broke the picker's click target. The container is the 24px
   badge / click-target; the #btnEdit chip fills it. */
li:has(> .webletNavBtn) > #siteButtonColour {
    display: block;          /* override legacy custom.css #siteButtonColour
                                {display:inline-table; width:37px; height:43px}
                                which squashed the chip into a 37x43 oval */
    box-sizing: border-box;
    position: absolute;
    top: 6px;
    right: -2px;
    left: auto;
    bottom: auto;
    width: 24px;
    height: 24px;
    z-index: 1501;
}
li:has(> .webletNavBtn) > #siteButtonColour > #btnEdit {
    position: static;
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    border-width: 1.5px;
    margin: 0;
}
li:has(> .webletNavBtn) > #siteButtonColour > #btnEdit::before {
    font-size: 11px;
}
/* Coloris colour-picker input: co-located with the chip (inside #siteButtonColour)
   so the picker opens AT the chip, but transparent + pointer-events:none, so the
   visible orange chip below stays the affordance. The chip's onclick forwards to
   this input (webletOpenColour -> input.click()), which opens Coloris. */
li:has(> .webletNavBtn) > #siteButtonColour > .weblet-coloris-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    pointer-events: none;
}
/* the Coloris popup must clear the fixed header (z-index 9999) and the edit
   chips (1500) - otherwise its top (the saturation box) is painted over by the
   header when the button-colour input sits up in the nav. */
.clr-picker {
    z-index: 10001 !important;
}

/* ============================================================================
   Edit-mode image upload + crop (weblet-imageedit.js)
   A designed drag-drop -> Cropper.js -> upload surface inside a SweetAlert2
   popup. Scoped to .weblet-imgedit-popup so it never touches the loadModal
   (.app-modal-popup) or auth (.swal2) shells. Edit tooling = Frega edit-orange
   (#F07A2D), matching the pencil chips; content uses neutral greys.
   ============================================================================ */
.weblet-imgedit-popup.swal2-popup {
    border-radius: 16px;
    padding: 26px 26px 24px;
    max-width: 660px;
}
.weblet-imgedit-popup .swal2-title {
    font-size: 22px;
    font-weight: 800;
    color: #222;
    padding-top: 4px;
}
.weblet-imgedit-popup .swal2-html-container {
    margin: 14px 0 0;
    overflow: visible;
}
.weblet-imgedit { text-align: center; }
.wie-rec {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 16px;
    line-height: 1.45;
}
.wie-rec b { color: #374151; }

/* drop zone */
.wie-drop {
    border: 2px dashed #cfd6dd;
    border-radius: 14px;
    padding: 38px 20px;
    background: #f8fafb;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
    outline: none;
}
.wie-drop:hover,
.wie-drop:focus-visible { border-color: #F07A2D; background: #fff7f1; }
.wie-drop.is-over {
    border-color: #F07A2D;
    background: #fff1e6;
    transform: scale(1.01);
}
.wie-drop-ico { font-size: 42px; color: #F07A2D; display: block; margin-bottom: 12px; }
.wie-drop-main { font-size: 17px; font-weight: 700; color: #374151; }
.wie-drop-sub { font-size: 14px; color: #6b7280; margin-top: 4px; }
.wie-link { color: #F07A2D; font-weight: 600; text-decoration: underline; }
.wie-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.wie-err {
    display: none;
    color: #b3261e;
    background: #fdecea;
    border-radius: 8px;
    padding: 9px 12px;
    margin-top: 14px;
    font-size: 14px;
    text-align: left;
}

/* crop stage */
.wie-crop-wrap {
    max-height: 56vh;
    background: #1f2933;
    border-radius: 12px;
    overflow: hidden;
}
.wie-crop-wrap img { max-width: 100%; display: block; }

.wie-progress {
    height: 8px;
    background: #e6eaee;
    border-radius: 99px;
    overflow: hidden;
    margin-top: 16px;
}
.wie-progress > div {
    height: 100%;
    width: 0;
    background: #F07A2D;
    border-radius: 99px;
    transition: width .2s ease;
}

.wie-actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
}
.wie-btn {
    border: 0;
    border-radius: 99px;
    padding: 11px 22px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: filter .16s ease, background .16s ease, box-shadow .16s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.wie-btn:disabled { opacity: .55; cursor: default; }
.wie-btn-primary {
    background: #F07A2D;
    color: #fff;
    box-shadow: 0 3px 10px rgba(240, 122, 45, .35);
}
.wie-btn-primary:hover:not(:disabled) { filter: brightness(1.05); }
.wie-btn-ghost {
    background: #fff;
    color: #4b5563;
    border: 1.5px solid #d2d9e0;
}
.wie-btn-ghost:hover:not(:disabled) { background: #f3f5f7; }

.weblet-imgedit-toast.swal2-popup { padding: 10px 16px; }

/* ============================================================================
   Edit-mode slider / hero gallery  (interface/imggallery fragment)
   Modern card grid + per-card hover delete. Replaces the legacy BS3 + iCheck
   bulk-select layout. Loaded inside the loadModal SweetAlert2 shell; ids/classes
   below are unique to the slider fragment so no global bleed.
   ============================================================================ */
.weblet-slidergal { text-align: center; }
.wsg-help { font-size: 14px; color: #6b7280; margin: 0 0 16px; line-height: 1.45; }
.wsg-help b { color: #374151; }
.wsg-add {
    display: inline-flex; align-items: center; gap: 8px;
    background: #F07A2D; color: #fff; border: 0; border-radius: 99px;
    padding: 10px 22px; font-size: 15px; font-weight: 700; cursor: pointer;
    box-shadow: 0 3px 10px rgba(240, 122, 45, .35);
    transition: filter .16s ease; margin-bottom: 20px;
}
.wsg-add:hover, .wsg-add:focus-visible { filter: brightness(1.05); outline: none; }
.wsg-add i { font-size: 15px; }

.wsg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
    max-height: 56vh;
    overflow-y: auto;
    padding: 4px;
}
/* the server wraps the cards in <div class="grid"> - dissolve it so the cards
   become direct grid items of .wsg-grid */
.wsg-grid > .grid { display: contents; }
.wsg-grid .gallery-item {
    position: relative;
    width: auto; float: none; padding: 0; margin: 0;   /* override legacy col-md-4 */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
    aspect-ratio: 1600 / 487;
    background: #eef1f4;
}
.wsg-grid .gallery-item .image { width: 100%; height: 100%; padding: 0; box-shadow: none; }
.wsg-grid .gallery-item .image:before,
.wsg-grid .gallery-item .image:after { display: none; }   /* kill any legacy white frame */
.wsg-grid .gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wsg-grid .gallery-item-controls {
    position: absolute; top: 8px; right: 8px; left: auto; bottom: auto;
    padding: 0; margin: 0; list-style: none; z-index: 2;
    opacity: 0; transition: opacity .16s ease;
}
.wsg-grid .gallery-item:hover .gallery-item-controls,
.wsg-grid .gallery-item:focus-within .gallery-item-controls { opacity: 1; }
.wsg-grid .gallery-item-controls li { float: none; background: none; width: auto; height: auto; line-height: normal; }
.wsg-grid .gallery-item-remove {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(179, 38, 30, .92); color: #fff; cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
    transition: transform .14s ease, background .14s ease;
}
.wsg-grid .gallery-item-remove:hover { background: #b3261e; transform: scale(1.08); }
.wsg-grid .gallery-item-remove i { margin: 0; }
.wsg-grid .gallery-item.is-removing { opacity: .4; }
.wsg-empty, .wsg-loading { grid-column: 1 / -1; color: #6b7280; padding: 24px; font-size: 15px; }

/* ============================================================================
   Edit-mode FORM primitives  (SEO/meta editor in Default.aspx + the contact
   fragment). One reusable form skin matching the imgedit popup: rounded Swal
   card, Frega edit-orange (#F07A2D) accents, neutral greys, >=14px content.
   .weblet-form-popup = the SEO Swal shell; the contact fragment reuses .wf-*
   inside the shared loadModal (.app-modal-popup) shell. Seeds the future
   About/products editors too.
   ============================================================================ */
.weblet-form-popup.swal2-popup {
    border-radius: 16px;
    padding: 26px 26px 24px;
    /* Swal.fire passes width:640 inline; cap to the viewport so the card
       shrinks on phones instead of overflowing off both edges. */
    width: auto;
    max-width: min(640px, calc(100vw - 28px));
}
@media (max-width: 480px) {
    .weblet-form-popup.swal2-popup { padding: 20px 16px 18px; }
    .weblet-form-popup .swal2-title { font-size: 19px; }
}
.weblet-form-popup .swal2-title {
    font-size: 22px;
    font-weight: 800;
    color: #222;
    padding-top: 4px;
}
.weblet-form-popup .swal2-html-container {
    margin: 14px 0 0;
    overflow: visible;
}

.weblet-form { text-align: left; }
.wf-intro {
    font-size: 14px; color: #6b7280; margin: 0 0 18px; line-height: 1.45;
    text-align: center;
}
.wf-row { margin-bottom: 16px; }
.wf-row:last-child { margin-bottom: 0; }
.wf-label {
    display: block; font-size: 13.5px; font-weight: 700; color: #374151;
    margin-bottom: 6px; letter-spacing: .01em;
}
.wf-label .wf-opt { font-weight: 500; color: #9aa3ad; font-size: 12.5px; }
.wf-input {
    width: 100%; box-sizing: border-box;
    border: 1.5px solid #d2d9e0; border-radius: 10px;
    padding: 11px 13px; font-size: 15px; color: #1f2933; background: #fff;
    transition: border-color .16s ease, box-shadow .16s ease;
    -webkit-appearance: none; appearance: none;
    font-family: inherit;
}
.wf-input::placeholder { color: #9aa3ad; }
.wf-input:focus {
    outline: none; border-color: #F07A2D;
    box-shadow: 0 0 0 3px rgba(240, 122, 45, .18);
}
textarea.wf-input { resize: vertical; min-height: 84px; line-height: 1.5; }
/* native <select> arrow (the country list ships class="form-control"; we add wf-input) */
select.wf-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center;
    padding-right: 36px; cursor: pointer;
    /* the country list keeps BS3 .form-control (height:34px), which clips the
       11px-padded text; let padding + line-height define the height instead. */
    height: auto;
}
.wf-input.is-invalid { border-color: #b3261e; box-shadow: 0 0 0 3px rgba(179, 38, 30, .14); }

.wf-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 5px; }
.wf-hint { font-size: 12.5px; color: #8b95a1; line-height: 1.4; }
.wf-count { font-size: 12.5px; font-weight: 700; color: #8b95a1; white-space: nowrap; flex: none; }
.wf-count.is-warn { color: #c77700; }
.wf-count.is-over { color: #b3261e; }

.wf-grid2 { display: flex; gap: 14px; flex-wrap: wrap; }
.wf-grid2 > .wf-row { flex: 1 1 160px; margin-bottom: 16px; }

.wf-err {
    display: none; color: #b3261e; background: #fdecea; border-radius: 8px;
    padding: 9px 12px; margin-top: 4px; font-size: 14px;
}

.wf-actions {
    display: flex; justify-content: flex-end; gap: 12px; margin-top: 22px;
}
.wf-btn {
    border: 0; border-radius: 99px; padding: 11px 24px;
    font-size: 15px; font-weight: 700; cursor: pointer;
    transition: filter .16s ease, background .16s ease, box-shadow .16s ease;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    white-space: nowrap;
}
.wf-btn:disabled { opacity: .55; cursor: default; }
.wf-btn-primary {
    background: #F07A2D; color: #fff;
    box-shadow: 0 3px 10px rgba(240, 122, 45, .35);
}
.wf-btn-primary:hover:not(:disabled) { filter: brightness(1.05); }
.wf-btn-ghost {
    background: #fff; color: #4b5563; border: 1.5px solid #d2d9e0;
}
.wf-btn-ghost:hover:not(:disabled) { background: #f3f5f7; }

/* contact fragment loads into the shared .app-modal-popup shell - give the
   form room and kill the legacy BS3 .form-group gutters that wrapper carries */
.app-modal-popup .weblet-form { padding: 4px 6px 6px; }
.app-modal-popup .weblet-form .form-group { padding: 0; margin: 0; }

/* SweetAlert2 modal z-index (lifted above the sticky/fixed header) now lives
   in the SHARED css/frega-header.css so BOTH masters get it - do not re-add
   `body .swal2-container` here. */

/* ============================================================================
   Products / active-listings editor (interface/products) - DataTables in the
   shared .app-modal-popup loadModal shell. weblet-only.
   ============================================================================ */
.wf-products .wf-prod-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.wf-products .wf-prod-actions .wf-btn { font-size: 14px; padding: 9px 18px; }

.wf-note {
    display: flex; gap: 9px; align-items: flex-start;
    font-size: 13.5px; color: #6b5b3a; background: #fff7e8;
    border: 1px solid #f3dca8; border-radius: 10px; padding: 11px 14px; margin: 0 0 16px;
    line-height: 1.45;
}
.wf-note i { color: #d99016; margin-top: 1px; flex: none; }

/* inline confirm/notes bar (replaces the legacy submit BootstrapDialogs) */
.wf-note-warn {
    display: none; font-size: 13.5px; color: #8a5a00; background: #fff3da;
    border: 1px solid #f0cd83; border-radius: 10px; padding: 12px 14px; margin-top: 14px;
}
.wf-note-warn .wf-note-actions { margin-top: 10px; display: flex; gap: 10px; justify-content: flex-end; }
.wf-btn-sm { padding: 7px 16px; font-size: 13px; }

/* DataTables 2.x skin (scoped to the products editor) */
.wf-products .dt-container .dt-search { margin: 0 0 10px; }
.wf-products .dt-container .dt-search input.dt-input {
    border: 1.5px solid #d2d9e0; border-radius: 8px; padding: 8px 12px; font-size: 14px;
    min-width: 220px; margin-left: 0;
}
.wf-products .dt-container .dt-search input.dt-input:focus {
    outline: none; border-color: #F07A2D; box-shadow: 0 0 0 3px rgba(240,122,45,.18);
}
.wf-products table.dataTable { font-size: 14px; border-collapse: collapse; }
.wf-products table.dataTable thead th {
    background: #f3f5f7; color: #374151; font-weight: 700; font-size: 13px;
    border-bottom: 2px solid #e3e8ee; text-align: left; padding: 10px 12px;
}
.wf-products table.dataTable tbody td {
    padding: 9px 12px; border-bottom: 1px solid #eef1f4; color: #1f2933; vertical-align: middle;
}
.wf-products table.dataTable tbody tr:hover td { background: #fafbfc; }
/* 7 columns can't fit a phone; keep headers/cells on one line and let the
   table scroll horizontally (DataTables scroll wrapper) instead of squishing
   each header into a vertical letter-stack. The empty-state cell stays normal. */
.wf-products table.dataTable thead th,
.wf-products table.dataTable tbody td:not(.dt-empty) { white-space: nowrap; }
.wf-products table.dataTable td.dt-empty { white-space: normal; }
.wf-products table.dataTable td.dt-empty, .wf-products table.dataTable td.dt-empty {
    padding: 26px 12px; color: #6b7280; font-size: 15px; text-align: center;
}
.wf-products .listingTblTitle { font-weight: 600; }
.wf-products table.dataTable th:last-child,
.wf-products table.dataTable td:last-child { text-align: center; }
.wf-products .siteProductChk { width: 18px; height: 18px; cursor: pointer; accent-color: #F07A2D; }

/* ============================================================================
   About editor (interface/textedit) - inline TinyMCE rendered in-page (not a
   modal). Frame it as an edit surface + Frega-style the Save/Cancel actions.
   weblet-only.
   ============================================================================ */
.wf-about {
    background: #fff; border: 1px solid #e3e8ee; border-radius: 14px;
    padding: 16px; margin: 10px 0 18px;
    box-shadow: 0 6px 20px rgba(16, 24, 40, .08);
}
.wf-about .webletAboutTextEdit { width: 100%; }
.wf-about .tox-tinymce { border-radius: 10px; border-color: #d2d9e0; }
.wf-about .wf-actions { margin-top: 16px; }

/* ============================================================================
   PUBLIC-VIEW BODY  (view mode - what a visitor sees, not the owner editors)
   Finishes the weblet body to match the modern chrome: About typography, the
   3-image grid, product/service cards, the store CTA, a slim always-visible
   footer, plus the login pill + message block. All member-brand-driven
   (--weblet-accent, #303030 fallback) - NO Frega-green / S2T-orange on public
   surfaces (orange is the edit-mode TOOL colour only). weblet.css loads after
   style.css / custom.css / global.css, so these overrides win.
   ============================================================================ */

/* Dead-tail fix: legacy custom.css set .mainContent{min-height:2500px},
   marooning the footer ~2500px below the content. Let content define height. */
.mainContent {
    min-height: calc(100vh - 170px);
}

/* About text - readable body type on a constrained measure */
.aboutText #ContentPlaceHolder1_siteAbout {
    font-size: 17px;
    font-weight: 400;
    line-height: 1.75;
    color: #374151;
    max-width: 860px;
    margin: 0 auto;
    text-align: left;
}

/* 3-image grid - rounded, consistent ratio, subtle hover lift */
[id^="ContentPlaceHolder1_siteImages"] {
    margin-bottom: 22px;
}
[id^="ContentPlaceHolder1_siteImages"] .siteImageFit {
    height: auto;
    aspect-ratio: 346 / 230;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .10);
    transition: transform .25s ease, box-shadow .25s ease;
}
[id^="ContentPlaceHolder1_siteImages"] .siteImageFit:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(16, 24, 40, .16);
}

/* Products / services section title */
#productservice-title {
    font-style: normal;
    color: #1f2937;
}

/* Product / service cards - white card, image top, price at the base */
.advertContainer {
    margin-bottom: 26px;
}
.advertContainer .stGalCont a {
    display: block;
    text-decoration: none;
    color: inherit;
}
.advertContainer .stProdWrap {
    height: auto;
    margin-bottom: 0;
    background: #fff;
    border: 1px solid #e6eaef;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(16, 24, 40, .08);
    transition: transform .18s ease, box-shadow .18s ease;
    display: flex;
    flex-direction: column;
}
.advertContainer .stProdWrap:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(16, 24, 40, .14);
}
.advertContainer .stProdRegImg {
    height: auto;
    aspect-ratio: 4 / 3;
    margin: 0;
    padding: 8px;
    border: 0;
    background: #f5f7fa;
    overflow: hidden;
}
.advertContainer .stProdRegImg .RegAdsImg {
    height: 100%;
    object-fit: contain;
    transition: transform .3s ease;
}
.advertContainer .stProdWrap:hover .stProdRegImg .RegAdsImg {
    transform: scale(1.03);
}
.advertContainer .stRegProdListType {
    align-self: flex-start;
    margin: 14px 14px 0;
    padding: 3px 11px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-align: left;
    color: var(--weblet-accent, #303030);
    background: color-mix(in srgb, var(--weblet-accent, #303030) 12%, #fff);
    border-radius: 99px;
}
.advertContainer .stRegProdDesc {
    height: auto;
    overflow: visible;
    padding: 0 14px;
    margin-top: 10px;
    text-align: left;
    font-size: 15.5px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.35;
}
.advertContainer .stRegProdDesc + .stRegProdDesc {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 400;
    color: #6b7280;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.advertContainer .stRegProdPrice {
    margin-top: auto;
    padding: 12px 14px 16px;
    text-align: left;
    font-size: 17px;
    font-weight: 800;
    color: var(--weblet-accent, #303030);
}

/* Store / marketplace CTA (the leading full-width advertContainer) */
.advertContainer .storeVisit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 18px 22px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--weblet-accent, #303030) 8%, #fff);
    border: 1px solid color-mix(in srgb, var(--weblet-accent, #303030) 22%, #fff);
    transition: transform .18s ease, box-shadow .18s ease;
}
.advertContainer a:hover .storeVisit {
    background: color-mix(in srgb, var(--weblet-accent, #303030) 8%, #fff);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(16, 24, 40, .12);
}
.advertContainer .storeVisit img {
    max-height: 42px;
    width: auto;
}
.advertContainer .storeVisit h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--weblet-accent, #303030);
}

/* Slim always-visible footer (replaces the #footerTrig hover-toggle) */
#footerTrig {
    display: none !important;
}
#footer {
    display: block;
    position: static;
    margin-top: 48px;
    padding: 20px 16px;
    border-top: 1px solid #e6eaef;
    background: #fafbfc;
    text-align: center;
    color: #6b7280;
    font-size: 13.5px;
    line-height: 1.7;
}
#footer .footLink {
    display: inline-block;
    margin: 0;
    padding: 0;
    color: var(--weblet-accent, #303030);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: color .15s ease;
}
#footer .footLink::before {
    content: "\00B7";
    margin: 0 10px;
    color: #c4c9d0;
    font-weight: 400;
}
#footer .footLink:hover {
    text-decoration: underline;
}

/* Login / Register pill - retint the legacy blue to the member accent */
.logoutinbtn {
    background: var(--weblet-accent, #303030);
    border-color: var(--weblet-accent, #303030);
    border-radius: 50px;
}
.logoutinbtn:hover {
    background: #fff;
    color: var(--weblet-accent, #303030);
}

/* Master message block - soften the plain white box into a card */
#MasterMsgContain {
    max-width: 520px;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .28);
}
#MasterMsgContain .fa-window-close {
    color: var(--weblet-accent, #303030);
}