/* =====================================================================
   PROFISHENT TACKLE — custom brand styling
   Bold marine palette · dark theme · product-driven
   ===================================================================== */

:root {
    --pf-navy-900: #061224;
    --pf-navy-800: #0A1A2F;
    --pf-navy-700: #0F2440;
    --pf-navy-600: #14314f;
    --pf-ocean: #1FA2FF;
    --pf-aqua: #00C2C7;
    --pf-green: #00E0A4;
    --pf-green-rgb: 0, 224, 164;
    --pf-on-accent: #04121f;
    --pf-white: #FFFFFF;
    --pf-ink: #FFFFFF;        /* stable theme text; NOT re-bound inside dark sections */
    --pf-mist: #B7C7DA;
    --pf-line: #1C3A5E;

    --pf-gradient: linear-gradient(135deg, #0A1A2F 0%, #0F2440 55%, #123a55 100%);
    --pf-accent-gradient: linear-gradient(90deg, var(--pf-green), var(--pf-aqua));
    --pf-shadow: 0 10px 30px rgba(0, 0, 0, .45);
    --pf-radius: 10px;

    --pf-font-head: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --pf-font-body: 'Inter', system-ui, sans-serif;
}

html, body {
    margin: 0;
    padding: 0;
    overflow-x: clip;
    background: var(--pf-navy-800);
    color: var(--pf-white);
    font-family: var(--pf-font-body);
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--pf-font-head); letter-spacing: .5px; margin: 0; }

.profishent-shell { min-height: 100vh; display: flex; flex-direction: column; }
.profishent-main { flex: 1 0 auto; }

/* Subtle water texture behind everything */
.profishent-shell::before {
    content: "";
    position: fixed; inset: 0; z-index: -1;
    background:
        radial-gradient(1200px 600px at 80% -10%, rgba(31,162,255,.10), transparent 60%),
        radial-gradient(900px 500px at -10% 20%, rgba(var(--pf-green-rgb),.08), transparent 60%),
        var(--pf-navy-800);
}

/* ---------- brand wordmark ---------- */
.profishent-logo { display: inline-flex; align-items: baseline; gap: 2px; font-family: var(--pf-font-head); font-weight: 700; font-size: 1.6rem; }
.brand-pro { color: var(--pf-white); }
.brand-fishent { color: var(--pf-green); }
.brand-tackle { margin-left: 8px; font-size: .8rem; letter-spacing: 4px; color: var(--pf-mist); align-self: center; }
.brand-sub { font-size: .7rem; letter-spacing: 4px; color: var(--pf-mist); }

/* =====================================================================
   NAVIGATION (sticky top bar)
   ===================================================================== */
.profishent-appbar {
    position: sticky; top: 0; z-index: 100;
    background: rgba(0,0,0,.85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--pf-line);
}
.profishent-appbar-inner {
    max-width: 1280px; margin: 0 auto; padding: 0 20px; height: 68px;
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.profishent-desktop-nav { display: flex; align-items: center; gap: 4px; flex: 1; justify-content: center; }
.profishent-nav-item { position: relative; }
.profishent-nav-link {
    display: inline-flex; align-items: center; gap: 2px;
    padding: 8px 14px; font-weight: 600; font-size: .95rem;
    color: var(--pf-white); border-radius: 6px; transition: all .15s ease;
    text-transform: uppercase; letter-spacing: .5px;
}
.profishent-nav-link:hover { color: var(--pf-green); background: rgba(var(--pf-green-rgb),.08); }
.profishent-appbar-actions { display: flex; align-items: center; gap: 10px; }
.profishent-cta-btn {
    background: var(--pf-accent-gradient); color: var(--pf-on-accent); font-weight: 700;
    padding: 9px 20px; border-radius: 6px; text-transform: uppercase; letter-spacing: .5px;
    font-size: .85rem; transition: transform .15s ease, box-shadow .15s ease;
}
.profishent-cta-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(var(--pf-green-rgb),.3); }
.profishent-burger { display: none; background: none; border: none; color: var(--pf-white); cursor: pointer; }

.profishent-mobile-drawer .mud-drawer-content { background: var(--pf-navy-800); }
.profishent-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 18px; border-bottom: 1px solid var(--pf-line); }

/* =====================================================================
   HERO
   ===================================================================== */
.profishent-hero {
    position: relative; min-height: 78vh; display: flex; align-items: center;
    background-image: var(--hero-image); background-size: cover; background-position: center;
}
.profishent-hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.85) 100%),
                linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.2) 70%);
}
.profishent-hero-content { position: relative; max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.profishent-hero-heading {
    font-size: clamp(2.6rem, 6vw, 5rem); line-height: .98; text-transform: uppercase;
    max-width: 15ch; text-shadow: 0 4px 24px rgba(0,0,0,.5);
}
.profishent-hero-heading::after { content: ""; display: block; width: 90px; height: 5px; margin-top: 18px; background: var(--pf-accent-gradient); border-radius: 3px; }
.profishent-hero-sub { max-width: 52ch; margin: 22px 0 30px; font-size: 1.15rem; color: var(--pf-mist); line-height: 1.6; }
.profishent-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- buttons ---------- */
.profishent-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 13px 28px; border-radius: 7px; font-weight: 700; letter-spacing: .5px;
    text-transform: uppercase; font-size: .9rem; cursor: pointer; transition: all .15s ease; border: 2px solid transparent;
}
.profishent-btn.primary { background: var(--pf-accent-gradient); color: var(--pf-on-accent); }
.profishent-btn.primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(var(--pf-green-rgb),.35); }
.profishent-btn.ghost { border-color: rgba(255,255,255,.35); color: var(--pf-white); }
.profishent-btn.ghost:hover { border-color: var(--pf-green); color: var(--pf-green); }

/* =====================================================================
   SECTIONS + GRIDS
   ===================================================================== */
.profishent-section { max-width: 1280px; margin: 0 auto; padding: 72px 24px; }
.profishent-section-alt { background: rgba(15,36,64,.5); max-width: none; }
.profishent-section-alt > * { max-width: 1280px; margin-left: auto; margin-right: auto; }
.profishent-section-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 32px; }
.profishent-section-head h2 { font-size: clamp(1.8rem, 3vw, 2.8rem); text-transform: uppercase; }
.profishent-section-head h2::after { content: ""; display: block; width: 60px; height: 4px; margin-top: 10px; background: var(--pf-accent-gradient); border-radius: 2px; }
.profishent-section-link { color: var(--pf-green); font-weight: 600; }

.profishent-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px; }
.profishent-category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }

/* ---------- product card ---------- */
.profishent-product-card {
    display: flex; flex-direction: column; background: var(--pf-navy-700);
    border: 1px solid var(--pf-line); border-radius: var(--pf-radius); overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.profishent-product-card:hover { transform: translateY(-6px); box-shadow: var(--pf-shadow); border-color: rgba(var(--pf-green-rgb),.5); }
.profishent-product-card-media { position: relative; aspect-ratio: 4/3; background: #08192c; overflow: hidden; } /* stays dark: covered by surface-context tokens */
.profishent-product-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.profishent-product-card:hover .profishent-product-card-media img { transform: scale(1.06); }
.profishent-new-label {
    position: absolute; top: 12px; left: 12px; z-index: 2;
    background: var(--pf-accent-gradient); color: var(--pf-on-accent); font-weight: 800; font-size: .72rem;
    text-transform: uppercase; letter-spacing: 1px; padding: 4px 10px; border-radius: 4px;
}
.profishent-product-card-body { padding: 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.profishent-product-card-cat { font-size: .72rem; text-transform: uppercase; letter-spacing: 1px; color: var(--pf-aqua); }
.profishent-product-card-name { font-size: 1.25rem; text-transform: uppercase; }
.profishent-product-card-desc { font-size: .85rem; color: var(--pf-mist); line-height: 1.45; flex: 1; }
.profishent-product-card-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.profishent-product-card-link { color: var(--pf-green); font-weight: 700; font-size: .85rem; margin-top: 6px; }

/* ---------- category tile ---------- */
.profishent-category-tile { position: relative; aspect-ratio: 3/2; border-radius: var(--pf-radius); overflow: hidden; display: block; }
.profishent-category-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.profishent-category-tile:hover img { transform: scale(1.08); }
.profishent-category-tile-overlay {
    position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
    padding: 20px; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.9) 100%);
}
.profishent-category-tile-overlay h3 { font-size: 1.6rem; text-transform: uppercase; }
.profishent-category-tile-cta { color: var(--pf-green); font-weight: 700; font-size: .85rem; }

/* ---------- badges ---------- */
.profishent-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.profishent-badge {
    display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 4px;
    font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    color: var(--pf-green); background: rgba(var(--pf-green-rgb),.12); border: 1px solid rgba(var(--pf-green-rgb),.4);
}
.profishent-badge.sm { font-size: .66rem; padding: 3px 8px; }

/* =====================================================================
   BRAND STORY / NEWSLETTER
   ===================================================================== */
.profishent-brandstory { position: relative; padding: 100px 24px; background-image: var(--brand-image); background-size: cover; background-position: center; background-attachment: fixed; }
.profishent-brandstory-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.92), rgba(0,0,0,.55)); }
.profishent-brandstory-content { position: relative; max-width: 640px; margin: 0 auto 0 max(24px, calc((100vw - 1280px)/2 + 24px)); }
.profishent-brandstory-content h2 { font-size: clamp(2rem, 4vw, 3.2rem); text-transform: uppercase; }
.profishent-brandstory-content p { color: var(--pf-mist); font-size: 1.1rem; line-height: 1.7; margin: 20px 0 28px; }

.profishent-newsletter { background: var(--pf-gradient); border-top: 1px solid var(--pf-line); }
.profishent-newsletter-inner { max-width: 720px; margin: 0 auto; padding: 64px 24px; text-align: center; }
.profishent-newsletter-inner h2 { font-size: 2.4rem; text-transform: uppercase; }
.profishent-newsletter-inner p { color: var(--pf-mist); margin: 14px 0 26px; font-size: 1.1rem; }

/* =====================================================================
   PRODUCTS PAGE
   ===================================================================== */
.profishent-products-header { background: var(--pf-gradient); border-bottom: 1px solid var(--pf-line); }
.profishent-products-header-inner { max-width: 1280px; margin: 0 auto; padding: 40px 24px; }
.profishent-products-header-inner h1 { font-size: clamp(2rem, 4vw, 3rem); text-transform: uppercase; }
.profishent-products-intro { color: var(--pf-mist); max-width: 70ch; margin-top: 8px; }

.profishent-products-body { max-width: 1280px; margin: 0 auto; padding: 32px 24px 72px; display: grid; grid-template-columns: 230px 1fr; gap: 32px; }
.profishent-products-sidenav h3 { text-transform: uppercase; font-size: 1rem; color: var(--pf-mist); margin-bottom: 12px; }
.profishent-products-sidenav ul { list-style: none; padding: 0; margin: 0; }
.profishent-products-sidenav ul ul { padding-left: 14px; border-left: 1px solid var(--pf-line); margin: 4px 0 8px; }
.profishent-products-sidenav a { display: block; padding: 6px 8px; border-radius: 5px; color: var(--pf-mist); font-size: .92rem; transition: all .12s ease; }
.profishent-products-sidenav a:hover { color: var(--pf-white); background: rgba(255,255,255,.05); }
.profishent-products-sidenav a.active { color: var(--pf-green); font-weight: 700; }

.profishent-products-toolbar-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.profishent-sort { min-width: 160px; }
.profishent-result-count { color: var(--pf-mist); margin-top: 20px; font-size: .9rem; }
.profishent-empty { text-align: center; padding: 60px 20px; color: var(--pf-mist); }

/* =====================================================================
   PRODUCT DETAIL
   ===================================================================== */
.profishent-detail { max-width: 1280px; margin: 0 auto; padding: 28px 24px 40px; }
.profishent-detail-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; margin-top: 16px; }
.profishent-detail-cat { color: var(--pf-aqua); text-transform: uppercase; letter-spacing: 1px; font-size: .8rem; font-weight: 700; }
.profishent-detail-name { font-size: clamp(2rem, 4vw, 3.2rem); text-transform: uppercase; margin: 6px 0 4px; }
.profishent-detail-short { color: var(--pf-mist); font-size: 1.1rem; line-height: 1.6; }
.profishent-specs { margin: 24px 0; }
.profishent-specs h3, .profishent-variants h3, .profishent-designs h3 { text-transform: uppercase; font-size: 1.1rem; margin-bottom: 10px; color: var(--pf-white); }
.profishent-specs table { width: 100%; border-collapse: collapse; }
.profishent-specs th, .profishent-specs td { text-align: left; padding: 9px 0; border-bottom: 1px solid var(--pf-line); font-size: .95rem; }
.profishent-specs th { color: var(--pf-mist); font-weight: 600; width: 40%; }
.profishent-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.profishent-variant-chip, .profishent-design-chip {
    padding: 6px 14px; border-radius: 5px; font-size: .85rem; font-weight: 600;
    border: 1px solid var(--pf-line); background: var(--pf-navy-700);
}
.profishent-variant-chip { border-color: rgba(31,162,255,.4); color: var(--pf-ocean); }
.profishent-variants, .profishent-designs { margin: 22px 0; }
.profishent-detail-actions { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.profishent-detail-description { margin-top: 48px; max-width: 80ch; }
.profishent-detail-description h2 { text-transform: uppercase; font-size: 1.8rem; margin-bottom: 12px; }
.profishent-detail-description p { color: var(--pf-mist); line-height: 1.75; font-size: 1.05rem; }

/* ---------- gallery ---------- */
.profishent-gallery-main { aspect-ratio: 1/1; border-radius: var(--pf-radius); overflow: hidden; background: var(--pf-navy-600); border: 1px solid var(--pf-line); }
.profishent-gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.profishent-gallery-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.profishent-gallery-thumb { width: 72px; height: 72px; border-radius: 6px; overflow: hidden; border: 2px solid var(--pf-line); background: none; padding: 0; cursor: pointer; }
.profishent-gallery-thumb.active { border-color: var(--pf-green); }
.profishent-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* =====================================================================
   CONTACT
   ===================================================================== */
.profishent-contact-hero { background: var(--pf-gradient); border-bottom: 1px solid var(--pf-line); }
.profishent-contact-hero-inner { max-width: 1280px; margin: 0 auto; padding: 56px 24px; }
.profishent-contact-hero-inner h1 { font-size: clamp(2rem, 4vw, 3rem); text-transform: uppercase; }
.profishent-contact-hero-inner p { color: var(--pf-mist); max-width: 60ch; margin-top: 10px; }
.profishent-contact-body { max-width: 1280px; margin: 0 auto; padding: 48px 24px 72px; }
.profishent-contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; }
.profishent-contact-form-col h2, .profishent-contact-details-col h2 { text-transform: uppercase; margin-bottom: 18px; }
.profishent-contact-line { display: flex; align-items: center; gap: 8px; color: var(--pf-mist); margin: 8px 0; }
.profishent-contact-line a { color: var(--pf-green); }
.profishent-dealer-box { background: var(--pf-navy-700); border: 1px solid var(--pf-line); border-radius: var(--pf-radius); padding: 22px; margin: 24px 0; }
.profishent-dealer-box h3 { text-transform: uppercase; margin-bottom: 8px; }
.profishent-dealer-box p { color: var(--pf-mist); margin-bottom: 16px; }
.profishent-contact-social { display: flex; gap: 6px; margin: 14px 0; }
.profishent-map-placeholder { margin-top: 20px; border-radius: var(--pf-radius); overflow: hidden; border: 1px solid var(--pf-line); }
.profishent-map-empty { aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--pf-mist); background: var(--pf-navy-700); }

/* =====================================================================
   FOOTER
   ===================================================================== */
.profishent-footer { background: var(--pf-navy-900); border-top: 1px solid var(--pf-line); margin-top: auto; }
.profishent-footer-inner { max-width: 1280px; margin: 0 auto; padding: 56px 24px 32px; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
.profishent-footer-col h4 { text-transform: uppercase; letter-spacing: 1px; font-size: 1rem; color: var(--pf-white); margin-bottom: 14px; }
.profishent-footer-col ul { list-style: none; padding: 0; margin: 0; }
.profishent-footer-col li { margin: 8px 0; }
.profishent-footer-col a { color: var(--pf-mist); transition: color .12s ease; }
.profishent-footer-col a:hover { color: var(--pf-green); }
.profishent-footer-tag { color: var(--pf-mist); line-height: 1.6; max-width: 40ch; margin-top: 12px; }
.profishent-footer-social { display: flex; gap: 4px; margin-top: 12px; }
.profishent-footer-bottom { border-top: 1px solid var(--pf-line); padding: 18px 24px; text-align: center; color: var(--pf-mist); font-size: .85rem; }

/* =====================================================================
   ADMIN SHELL
   ===================================================================== */
.profishent-admin-shell { display: flex; min-height: 100vh; background: var(--pf-navy-800); }
.profishent-admin-sidebar { width: 250px; flex-shrink: 0; background: var(--pf-navy-900); border-right: 1px solid var(--pf-line); transition: width .2s ease; }
.profishent-admin-sidebar.collapsed { width: 0; overflow: hidden; }
.profishent-admin-brand { padding: 22px 20px; border-bottom: 1px solid var(--pf-line); }
.profishent-admin-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.profishent-admin-topbar { height: 60px; display: flex; align-items: center; gap: 12px; padding: 0 20px; border-bottom: 1px solid var(--pf-line); background: var(--pf-navy-900); }
.profishent-admin-topbar-spacer { flex: 1; }
.profishent-admin-user { display: inline-flex; align-items: center; gap: 6px; color: var(--pf-mist); font-size: .9rem; }
.profishent-admin-logout { background: rgba(255,255,255,.06); border: 1px solid var(--pf-line); color: var(--pf-white); padding: 7px 16px; border-radius: 6px; cursor: pointer; font-weight: 600; }
.profishent-admin-logout:hover { border-color: var(--pf-green); color: var(--pf-green); }
.profishent-admin-content { padding: 28px; overflow-x: auto; }

.profishent-admin-h1 { font-size: 2rem; text-transform: uppercase; }
.profishent-admin-h2 { font-size: 1.4rem; text-transform: uppercase; margin: 28px 0 14px; }
.profishent-admin-pagehead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; }
.profishent-admin-note { color: var(--pf-mist); margin-bottom: 18px; }

.profishent-admin-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; }
.profishent-admin-card { background: var(--pf-navy-700) !important; border: 1px solid var(--pf-line); border-radius: var(--pf-radius); padding: 22px; display: flex; align-items: center; gap: 16px; }
.profishent-admin-card .mud-icon-root { color: var(--pf-green); font-size: 2.2rem; }
.profishent-admin-card .num { display: block; font-size: 2rem; font-family: var(--pf-font-head); font-weight: 700; }
.profishent-admin-card .label { display: block; color: var(--pf-mist); font-size: .85rem; text-transform: uppercase; letter-spacing: 1px; }
.profishent-admin-quicklinks { display: flex; flex-wrap: wrap; gap: 12px; }

.profishent-admin-table { background: var(--pf-navy-700) !important; border: 1px solid var(--pf-line); border-radius: var(--pf-radius); }
.profishent-admin-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid var(--pf-line); }
.profishent-tree-indent { color: var(--pf-aqua); }

.profishent-admin-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.profishent-form-grid { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
.profishent-form-section { background: var(--pf-navy-700) !important; border: 1px solid var(--pf-line); border-radius: var(--pf-radius); padding: 22px; margin-bottom: 20px; }
.profishent-form-section h3 { text-transform: uppercase; font-size: 1.1rem; margin-bottom: 14px; }
.profishent-form-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.profishent-form-section-head h3 { margin: 0; }
.profishent-repeat-row { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.profishent-repeat-row.wrap { flex-wrap: wrap; }
.profishent-form-actions { position: sticky; top: 80px; }

/* ---------- image uploader ---------- */
.profishent-uploader { display: flex; flex-direction: column; gap: 8px; }
.profishent-uploader-preview { position: relative; width: 140px; height: 140px; }
.profishent-uploader-preview img { width: 140px; height: 140px; object-fit: cover; border-radius: 8px; border: 1px solid var(--pf-line); display: block; background: var(--pf-navy-600); }
.profishent-uploader-preview .mud-icon-button { position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,.65); z-index: 2; }
.profishent-uploader-preview .mud-icon-button:hover { background: rgba(0,0,0,.85); }
.profishent-uploader-hint { font-size: .72rem; color: var(--pf-mist); }

/* =====================================================================
   LOGIN
   ===================================================================== */
.profishent-login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--pf-gradient); padding: 24px; }
.profishent-login-card { width: 100%; max-width: 400px; background: var(--pf-navy-700); border: 1px solid var(--pf-line); border-radius: 14px; padding: 40px 32px; box-shadow: var(--pf-shadow); }
.profishent-login-brand { text-align: center; font-family: var(--pf-font-head); font-weight: 700; font-size: 2rem; margin-bottom: 28px; }
.profishent-login-label { display: block; margin: 16px 0 6px; font-size: .8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--pf-mist); }
.profishent-login-input { width: 100%; padding: 12px 14px; border-radius: 7px; border: 1px solid var(--pf-line); background: var(--pf-navy-800); color: var(--pf-white); font-size: 1rem; box-sizing: border-box; }
.profishent-login-input:focus { outline: none; border-color: var(--pf-green); }
.profishent-login-btn { width: 100%; margin-top: 24px; padding: 13px; border: none; border-radius: 7px; background: var(--pf-accent-gradient); color: var(--pf-on-accent); font-weight: 800; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; }
.profishent-login-error { background: rgba(255,80,80,.12); border: 1px solid rgba(255,80,80,.5); color: #ff9b9b; padding: 10px 14px; border-radius: 7px; margin-bottom: 8px; font-size: .9rem; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1024px) {
    .profishent-detail-grid { grid-template-columns: 1fr; gap: 28px; }
    .profishent-contact-grid { grid-template-columns: 1fr; }
    .profishent-form-grid { grid-template-columns: 1fr; }
    .profishent-admin-settings-grid { grid-template-columns: 1fr; }
    .profishent-brandstory { background-attachment: scroll; }
    .profishent-brandstory-content { margin-left: 24px; }
}

@media (max-width: 900px) {
    .profishent-desktop-nav { display: none; }
    .profishent-burger { display: inline-flex; }
    .profishent-products-body { grid-template-columns: 1fr; }
    .profishent-products-sidenav { display: none; }
}

@media (max-width: 640px) {
    .profishent-footer-inner { grid-template-columns: 1fr; gap: 28px; }
    .profishent-hero { min-height: 70vh; }
    .profishent-cta-btn { display: none; }
    .profishent-section { padding: 48px 20px; }
    .profishent-admin-sidebar { position: fixed; z-index: 200; height: 100%; }
}

/* ---------- CSS hover dropdown for top nav (replaces MudMenu) ---------- */
.profishent-nav-item.has-children { position: relative; }
.profishent-nav-caret { font-size: .7em; margin-left: 4px; opacity: .8; }
.profishent-nav-dropdown {
    position: absolute; top: 100%; left: 0; min-width: 220px;
    background: var(--pf-navy-900); border: 1px solid var(--pf-line); border-radius: 8px;
    padding: 8px; display: none; flex-direction: column; gap: 2px;
    box-shadow: var(--pf-shadow); z-index: 120;
}
.profishent-nav-item.has-children:hover .profishent-nav-dropdown,
.profishent-nav-item.has-children:focus-within .profishent-nav-dropdown { display: flex; }
.profishent-nav-dropdown-link {
    padding: 8px 12px; border-radius: 6px; color: var(--pf-mist); font-size: .92rem;
    font-weight: 600; transition: all .12s ease;
}
.profishent-nav-dropdown-link:hover { color: var(--pf-green); background: rgba(var(--pf-green-rgb),.08); }

/* ---------- login: password toggle, note, links ---------- */
.profishent-login-password { position: relative; }
.profishent-login-password .profishent-login-input { padding-right: 44px; }
.profishent-login-eye {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: var(--pf-mist); cursor: pointer; padding: 6px;
    display: inline-flex; align-items: center;
}
.profishent-login-eye:hover { color: var(--pf-green); }
.profishent-login-note {
    background: rgba(var(--pf-green-rgb),.12); border: 1px solid rgba(var(--pf-green-rgb),.4); color: var(--pf-green);
    padding: 10px 14px; border-radius: 7px; margin-bottom: 8px; font-size: .9rem;
}
.profishent-login-links { margin-top: 16px; text-align: center; }
.profishent-login-links a { color: var(--pf-mist); font-size: .9rem; }
.profishent-login-links a:hover { color: var(--pf-green); }

/* ============================ Phase 3: products v2 ============================ */

/* Hero search */
.profishent-hero-search { display: flex; gap: 8px; margin-top: 26px; max-width: 560px; }
.profishent-hero-search input {
    flex: 1; padding: 13px 16px; border-radius: 8px; border: 1px solid var(--pf-line);
    background: rgba(0,0,0,.75); color: #fff; font-size: 1rem;
}
.profishent-hero-search input:focus { outline: none; border-color: var(--pf-green); }
.profishent-hero-search button {
    display: inline-flex; align-items: center; gap: 6px; padding: 0 20px; border: none;
    border-radius: 8px; background: var(--pf-accent-gradient); color: var(--pf-on-accent); font-weight: 700; cursor: pointer;
}

/* Stock status (detail) */
.profishent-stock-line { display: flex; align-items: center; gap: 12px; margin: 12px 0 4px; }
.profishent-stock-pill { padding: 4px 12px; border-radius: 20px; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; }
.profishent-stock-pill.in   { color: var(--pf-green); background: rgba(var(--pf-green-rgb),.14); border: 1px solid rgba(var(--pf-green-rgb),.4); }
.profishent-stock-pill.soon { color: #ffca55; background: rgba(255,202,85,.12); border: 1px solid rgba(255,202,85,.4); }
.profishent-stock-pill.out  { color: #ff8a8a; background: rgba(255,80,80,.12); border: 1px solid rgba(255,80,80,.4); }
.profishent-stock-eta { color: var(--pf-mist); font-size: .85rem; }

/* Stock badge (card overlay) */
.profishent-stock-badge {
    position: absolute; top: 12px; right: 12px; z-index: 2; padding: 4px 10px; border-radius: 4px;
    font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
}
.profishent-stock-badge.out  { background: rgba(255,80,80,.9); color: #fff; }
.profishent-stock-badge.soon { background: rgba(255,202,85,.92); color: #04121f; }

/* Option swatches (detail) */
.profishent-options { margin: 22px 0; }
.profishent-swatch-row { display: flex; flex-wrap: wrap; gap: 10px; }
.profishent-swatch { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 1px solid var(--pf-line); border-radius: 22px; background: var(--pf-navy-700); }
.profishent-swatch.oos { opacity: .55; }
.profishent-swatch-colour, .profishent-swatch-img { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); flex-shrink: 0; }
.profishent-swatch-img { background-size: cover; background-position: center; }
.profishent-swatch-empty { background: repeating-linear-gradient(45deg, #23415f, #23415f 4px, #1a3350 4px, #1a3350 8px); }
.profishent-swatch-label { font-size: .85rem; font-weight: 600; display: flex; flex-direction: column; line-height: 1.2; }
.profishent-swatch-label em { font-style: normal; color: var(--pf-aqua); font-size: .72rem; }
.profishent-swatch-oos { color: #ff8a8a; font-size: .68rem; text-transform: uppercase; letter-spacing: .5px; }

/* Active filters + pager */
.profishent-active-filters { margin: 4px 0 12px; }
.profishent-pager { display: flex; align-items: center; gap: 6px; margin: 28px 0 8px; flex-wrap: wrap; }
.profishent-pager-btn {
    min-width: 40px; padding: 8px 12px; border-radius: 7px; border: 1px solid var(--pf-line);
    background: var(--pf-navy-700); color: var(--pf-white); font-weight: 600; cursor: pointer; transition: all .12s ease;
}
.profishent-pager-btn:hover:not(:disabled) { border-color: var(--pf-green); color: var(--pf-green); }
.profishent-pager-btn.active { background: var(--pf-accent-gradient); color: var(--pf-on-accent); border-color: transparent; }
.profishent-pager-btn:disabled { opacity: .4; cursor: not-allowed; }
.profishent-pager-size { margin-left: auto; min-width: 130px; }

/* Empty state */
.profishent-empty { text-align: center; padding: 60px 20px; color: var(--pf-mist); }
.profishent-empty .mud-icon-root { color: var(--pf-line); font-size: 3rem; margin-bottom: 8px; }
.profishent-empty h3 { color: #fff; text-transform: uppercase; margin-bottom: 8px; }

/* Admin option editor rows */
.profishent-option-row { border: 1px solid var(--pf-line); border-radius: 10px; padding: 14px; margin-bottom: 14px; background: rgba(0,0,0,.35); }

@media (max-width: 640px) {
    .profishent-hero-search { flex-direction: column; }
    .profishent-pager-size { margin-left: 0; width: 100%; }
}

/* Honeypot: off-screen, not display:none (bots skip display:none). */
.profishent-hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ============================ Phase 4: admin shell ============================ */
.profishent-admin-tabs { background: var(--pf-navy-700); border: 1px solid var(--pf-line); border-radius: var(--pf-radius); }
.profishent-admin-tabs .mud-tabs-toolbar { background: transparent; border-bottom: 1px solid var(--pf-line); border-radius: var(--pf-radius) var(--pf-radius) 0 0; }
.profishent-editor-tabs .profishent-form-section { background: rgba(0,0,0,.3) !important; }
.profishent-editor-actions {
    position: sticky; bottom: 0; margin-top: 16px; padding: 14px 16px;
    background: rgba(0,0,0,.92); border: 1px solid var(--pf-line); border-radius: var(--pf-radius);
    display: flex; align-items: center; backdrop-filter: blur(6px);
}
.profishent-enquiry-msg { display: block; max-width: 360px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--pf-mist); }

/* ============================ Phase 5: growth ============================ */

/* Signup component */
.profishent-signup { margin: 8px 0; }
.profishent-signup h3 { margin-bottom: 6px; }
.profishent-signup-blurb { color: var(--pf-mist); margin-bottom: 10px; }
.profishent-signup-row { display: flex; gap: 8px; flex-wrap: wrap; max-width: 520px; }
.profishent-signup.compact .profishent-signup-row { margin: 0 auto; }
.profishent-signup-input {
    flex: 1; min-width: 180px; padding: 12px 14px; border-radius: 8px;
    border: 1px solid var(--pf-line); background: rgba(0,0,0,.75); color: #fff; font-size: 1rem;
}
.profishent-signup-input:focus { outline: none; border-color: var(--pf-green); }
.profishent-signup-btn {
    padding: 0 22px; border: none; border-radius: 8px; background: var(--pf-accent-gradient);
    color: var(--pf-on-accent); font-weight: 700; cursor: pointer; white-space: nowrap;
}
.profishent-signup-btn:disabled { opacity: .6; cursor: default; }
.profishent-signup-error { color: #ff8a8a; font-size: .85rem; margin-top: 6px; }
.profishent-signup-fine { color: var(--pf-mist); font-size: .75rem; margin-top: 8px; }
.profishent-signup-done { display: flex; align-items: center; gap: 8px; color: var(--pf-green); font-weight: 600; }
.profishent-newsletter-dealer { display: inline-block; margin-top: 14px; color: var(--pf-aqua); text-decoration: none; font-weight: 600; }

/* Restock inline form (product detail) */
.profishent-restock { margin: 18px 0; padding: 16px; border: 1px dashed var(--pf-line); border-radius: 10px; background: rgba(0,0,0,.35); }
.profishent-restock-label { display: block; font-weight: 700; margin-bottom: 8px; }
.profishent-restock-row { display: flex; gap: 8px; flex-wrap: wrap; }
.profishent-restock-done { display: flex; align-items: center; gap: 8px; color: var(--pf-green); font-weight: 600; }

/* Nav extra link */
.profishent-nav-extra { color: var(--pf-white); text-decoration: none; font-weight: 600; padding: 8px 4px; }
.profishent-nav-extra:hover { color: var(--pf-green); }

/* The mobile drawer must never appear on desktop, even if a swipe/scroll reaches it. */
@media (min-width: 901px) {
    .profishent-mobile-drawer,
    .mud-overlay-drawer { display: none !important; }
}

/* Simple hero + narrow + status pages */
.profishent-simple-hero { padding: 56px 20px 28px; text-align: center; }
.profishent-simple-hero h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.profishent-simple-hero p { color: var(--pf-mist); }
.profishent-narrow { max-width: 720px; margin: 0 auto; padding: 24px 20px 60px; }
.profishent-status-page { text-align: center; padding-top: 48px; }
.profishent-status-icon { font-size: 3.4rem !important; margin-bottom: 8px; }
.profishent-status-icon.ok { color: var(--pf-green); }
.profishent-status-icon.err { color: #ff8a8a; }

/* News grid + cards */
.profishent-news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.profishent-news-card { display: flex; flex-direction: column; background: var(--pf-navy-700); border: 1px solid var(--pf-line); border-radius: var(--pf-radius); overflow: hidden; text-decoration: none; color: inherit; transition: transform .15s ease, border-color .15s ease; }
.profishent-news-card:hover { transform: translateY(-3px); border-color: var(--pf-green); }
.profishent-news-card-media { aspect-ratio: 5/3; overflow: hidden; }
.profishent-news-card-media img { width: 100%; height: 100%; object-fit: cover; }
.profishent-news-card-body { padding: 16px 18px 20px; }
.profishent-news-date { color: var(--pf-aqua); font-size: .78rem; text-transform: uppercase; letter-spacing: .5px; }
.profishent-news-card-body h3 { margin: 6px 0; }
.profishent-news-card-body p { color: var(--pf-mist); font-size: .9rem; }
.profishent-news-more { color: var(--pf-green); font-weight: 700; font-size: .85rem; }

/* Article */
.profishent-article { max-width: 760px; margin: 0 auto; padding: 24px 20px 72px; }
.profishent-article-head h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); margin: 6px 0; }
.profishent-article-lead { color: var(--pf-mist); font-size: 1.1rem; }
.profishent-article-hero { width: 100%; border-radius: var(--pf-radius); margin: 20px 0; }
.profishent-article-body { line-height: 1.8; font-size: 1.05rem; }
.profishent-article-body h2 { margin: 28px 0 10px; }
.profishent-article-body img { max-width: 100%; border-radius: 8px; }
.profishent-article-foot { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--pf-line); }

/* ============================ Phase 6: branding ============================ */
.profishent-logo-img { max-height: 42px; width: auto; display: block; }
.profishent-admin-logo-img { max-width: 100%; max-height: 40px; width: auto; display: block; }

/* Admin theme picker */
.profishent-theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-top: 10px; }
.profishent-theme-card {
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
    width: 100%; min-height: 140px; box-sizing: border-box;
    border: 2px solid var(--pf-line); border-radius: 12px; padding: 16px; cursor: pointer;
    background: var(--pf-navy-700); font-family: var(--pf-font-body); text-align: left;
    transition: border-color .12s ease, transform .12s ease, box-shadow .12s ease;
}
.profishent-theme-card:hover { transform: translateY(-2px); border-color: var(--pf-aqua); }
.profishent-theme-card.selected { border-color: var(--pf-green); box-shadow: 0 0 0 3px rgba(var(--pf-green-rgb), .22); }
.profishent-theme-swatches { display: flex; gap: 7px; }
.profishent-theme-swatch { width: 30px; height: 30px; border-radius: 7px; border: 1px solid rgba(128, 128, 128, .3); }
.profishent-theme-name { font-weight: 700; font-family: var(--pf-font-head); font-size: 1.1rem; letter-spacing: .5px; color: var(--pf-white); }
.profishent-theme-desc { color: var(--pf-mist); font-size: .8rem; line-height: 1.4; }

/* ================= MudBlazor components follow the active --pf-* theme ================= */
/* These are theme-neutral (variable-driven) so every theme stays consistent instantly,
   without waiting for the MudBlazor palette to re-apply on reload. */

/* Tabs */
.profishent-admin-tabs { background: var(--pf-navy-700) !important; }
.profishent-admin-tabs .mud-tabs-toolbar,
.profishent-admin-tabs .mud-tabs-toolbar-content,
.profishent-admin-tabs .mud-tabs-toolbar-wrapper { background: transparent !important; background-color: transparent !important; }
.profishent-admin-tabs .mud-tabs-toolbar { border-bottom: 1px solid var(--pf-line); }
.mud-tab { color: var(--pf-mist) !important; }
.mud-tab.mud-tab-active { color: var(--pf-green) !important; }
.mud-tab-slider, .mud-tabs-tabbar-slider, .mud-tabs-panel-slider { background: var(--pf-green) !important; }

/* Inputs & selects */
.mud-input-label, .mud-input-helper-text { color: var(--pf-mist) !important; }
.mud-input-root input, .mud-input-root textarea,
.mud-input-slot, .mud-select .mud-input-slot { color: var(--pf-white) !important; }
.mud-input-outlined-border { border-color: var(--pf-line) !important; }
.mud-input.mud-input-outlined:hover .mud-input-outlined-border { border-color: var(--pf-mist) !important; }
/* State-aware: focus + validation error must win over the neutral border. */
.mud-input:focus-within .mud-input-outlined-border { border-color: var(--pf-green) !important; }
.mud-input-error .mud-input-outlined-border,
.mud-input.mud-input-error:focus-within .mud-input-outlined-border { border-color: var(--mud-palette-error) !important; }
.mud-input-error .mud-input-label, .mud-input-error + .mud-input-helper-text,
.mud-input-error ~ .mud-input-helper-text { color: var(--mud-palette-error) !important; }

/* Tables */
.mud-table-root, .mud-table-cell, .mud-table-head .mud-table-cell { color: var(--pf-white) !important; }
.mud-table-cell { border-color: var(--pf-line) !important; }
.mud-table-container { background: transparent !important; }

/* Popovers / dropdown menus / dialogs */
.mud-popover, .mud-list, .mud-menu-list { background: var(--pf-navy-700) !important; color: var(--pf-white) !important; }
.mud-list-item, .mud-list-item .mud-typography { color: var(--pf-white) !important; }
.mud-dialog { background: var(--pf-navy-700) !important; color: var(--pf-white) !important; }

/* Nav links */
.mud-nav-link { color: var(--pf-white) !important; }
.mud-nav-link.active { color: var(--pf-green) !important; }
.mud-nav-link .mud-icon-root { color: currentColor; }

/* Primary buttons follow the theme accent so Save / actions match */
.mud-button-filled-primary:not(.mud-button-disabled) { background: var(--pf-accent-gradient) !important; color: var(--pf-on-accent) !important; }
.mud-button-outlined-primary:not(.mud-button-disabled) { color: var(--pf-green) !important; border-color: var(--pf-green) !important; }
/* Disabled must stay visibly inactive AND readable in every theme. */
.mud-button-filled-primary.mud-button-disabled,
.mud-button-outlined-primary.mud-button-disabled {
    background: var(--pf-navy-600) !important;
    color: var(--pf-mist) !important;
    border-color: var(--pf-line) !important;
    opacity: .7;
}

/* ============================ Catalogue landing ============================ */
.profishent-catalogue-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; }
.profishent-catalogue-tile {
    display: flex; flex-direction: column; background: var(--pf-navy-700);
    border: 1px solid var(--pf-line); border-radius: var(--pf-radius); overflow: hidden;
    text-decoration: none; color: inherit; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.profishent-catalogue-tile:hover { transform: translateY(-4px); border-color: var(--pf-green); box-shadow: var(--pf-shadow); }
.profishent-catalogue-media { aspect-ratio: 16/9; overflow: hidden; }
.profishent-catalogue-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.profishent-catalogue-tile:hover .profishent-catalogue-media img { transform: scale(1.06); }
.profishent-catalogue-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.profishent-catalogue-body h2 { font-size: 1.5rem; text-transform: uppercase; }
.profishent-catalogue-body p { color: var(--pf-mist); font-size: .9rem; margin: 0; }
.profishent-catalogue-subs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.profishent-catalogue-subs span {
    font-size: .72rem; padding: 3px 9px; border-radius: 20px;
    background: var(--pf-navy-600); border: 1px solid var(--pf-line); color: var(--pf-mist);
}
.profishent-catalogue-cta { margin-top: auto; padding-top: 8px; color: var(--pf-green); font-weight: 700; font-size: .9rem; }

/* ============================ Hero search suggestions ============================ */
.profishent-hero-search-wrap { position: relative; max-width: 560px; margin-top: 26px; }
.profishent-hero-search-wrap .profishent-hero-search { margin-top: 0; }
.profishent-search-suggest {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40;
    background: var(--pf-navy-700); border: 1px solid var(--pf-line); border-radius: 10px;
    box-shadow: var(--pf-shadow); overflow: hidden; max-height: 60vh; overflow-y: auto;
}
.profishent-search-suggest-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; text-decoration: none; color: var(--pf-white); border-bottom: 1px solid var(--pf-line); }
.profishent-search-suggest-item:hover { background: var(--pf-navy-600); }
.profishent-search-suggest-item .thumb { width: 44px; height: 44px; border-radius: 6px; background-size: cover; background-position: center; background-color: var(--pf-navy-600); flex-shrink: 0; }
.profishent-search-suggest-item .meta { display: flex; flex-direction: column; line-height: 1.3; }
.profishent-search-suggest-item .name { font-weight: 600; }
.profishent-search-suggest-item .cat { font-size: .78rem; color: var(--pf-aqua); }
.profishent-search-suggest-all { width: 100%; text-align: left; padding: 12px 14px; background: none; border: none; color: var(--pf-green); font-weight: 700; cursor: pointer; font-family: var(--pf-font-body); }
.profishent-search-suggest-all:hover { background: var(--pf-navy-600); }
.profishent-search-suggest-empty { padding: 14px; color: var(--pf-mist); text-align: center; }

/* ============================ Nested category mega-menu ============================ */
.profishent-nav-subitem { position: relative; }
.profishent-nav-subitem > .profishent-nav-dropdown-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.profishent-nav-sub-arrow { opacity: .6; font-size: 1.1em; }
.profishent-nav-subdropdown {
    position: absolute; top: -9px; left: 100%; min-width: 210px;
    background: var(--pf-navy-900); border: 1px solid var(--pf-line); border-radius: 8px;
    padding: 8px; display: none; flex-direction: column; gap: 2px;
    box-shadow: var(--pf-shadow); z-index: 130;
}
.profishent-nav-subitem:hover > .profishent-nav-subdropdown,
.profishent-nav-subitem:focus-within > .profishent-nav-subdropdown { display: flex; }
.profishent-nav-subhead { color: var(--pf-white) !important; border-bottom: 1px solid var(--pf-line); border-radius: 0 !important; margin-bottom: 4px; }
.profishent-nav-browseall { color: var(--pf-green) !important; border-top: 1px solid var(--pf-line); border-radius: 0 !important; margin-top: 4px; font-weight: 700; }

/* ============================ Product detail polish ============================ */
/* Cap the media column so a missing/tall image can't create a huge empty box. */
.profishent-detail-media { align-self: start; }
.profishent-detail-media img { width: 100%; height: auto; max-height: 560px; object-fit: contain; background: var(--pf-navy-700); border-radius: var(--pf-radius); }

/* Dense grid for many options (e.g. 39 shirt designs) instead of a tall single column. */
.profishent-swatch-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.profishent-swatch { min-width: 0; }
.profishent-swatch-label { min-width: 0; overflow: hidden; }
.profishent-swatch-label > :first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Compact option chips: ALL options visible, dense wrap, OOS dimmed. */
.profishent-optchip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.profishent-opt-chip {
    display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px;
    border: 1px solid var(--pf-line); border-radius: 18px; background: var(--pf-navy-700);
    font-size: .82rem; font-weight: 600; color: var(--pf-white); line-height: 1.2; white-space: nowrap;
}
.profishent-opt-chip em { font-style: normal; color: var(--pf-aqua); font-size: .72rem; font-weight: 700; }
.profishent-opt-chip.oos { opacity: .45; }
.profishent-opt-chip.oos em { color: var(--pf-mist); }
.profishent-optchip-legend { color: var(--pf-mist); font-size: .78rem; margin-top: 8px; }

/* Size / variant chips: consistent dense wrap. */
.profishent-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ======================================================================
   MUDBLAZOR TOKEN BRIDGE
   MudBlazor paints its components from --mud-palette-* variables that the
   MudThemeProvider injects at :root. We remap them onto our --pf-* theme
   tokens with higher specificity (:root:root beats the provider's :root),
   so EVERY MudBlazor component — admin and public, hover/active/disabled
   states included — follows the active theme file, instantly, with no
   reliance on the provider re-rendering.
   ====================================================================== */
:root:root {
    --mud-palette-primary: var(--pf-green);
    --mud-palette-primary-text: var(--pf-on-accent);
    --mud-palette-secondary: var(--pf-ocean);
    --mud-palette-secondary-text: var(--pf-on-accent);
    --mud-palette-tertiary: var(--pf-aqua);
    --mud-palette-tertiary-text: var(--pf-on-accent);

    --mud-palette-background: var(--pf-navy-800);
    --mud-palette-background-gray: var(--pf-navy-900);
    --mud-palette-surface: var(--pf-navy-700);

    --mud-palette-appbar-background: var(--pf-navy-900);
    --mud-palette-appbar-text: var(--pf-white);
    --mud-palette-drawer-background: var(--pf-navy-900);
    --mud-palette-drawer-text: var(--pf-white);
    --mud-palette-drawer-icon: var(--pf-mist);

    --mud-palette-text-primary: var(--pf-white);
    --mud-palette-text-secondary: var(--pf-mist);
    --mud-palette-text-disabled: color-mix(in srgb, var(--pf-mist) 55%, transparent);
    --mud-palette-action-default: var(--pf-mist);
    --mud-palette-action-disabled: color-mix(in srgb, var(--pf-mist) 45%, transparent);
    --mud-palette-action-disabled-background: color-mix(in srgb, var(--pf-line) 45%, transparent);

    --mud-palette-lines-default: var(--pf-line);
    --mud-palette-lines-inputs: var(--pf-line);
    --mud-palette-table-lines: var(--pf-line);
    --mud-palette-table-striped: var(--pf-navy-600);
    --mud-palette-table-hover: var(--pf-navy-600);
    --mud-palette-divider: var(--pf-line);
    --mud-palette-divider-light: var(--pf-line);
}

/* ======================================================================
   SURFACE-CONTEXT TOKENS
   These sections are intrinsically dark in EVERY theme (photo + black
   overlay), so text inside them must not follow a light theme's dark
   text tokens. Re-binding the tokens locally means everything inside —
   headings, body, ghost buttons, CTAs — inherits correct light-on-dark
   contrast automatically, in all five themes, with no per-element fixes.
   ====================================================================== */
.profishent-hero,
.profishent-brandstory,
.profishent-category-tile-overlay,
.profishent-product-card-media,
.profishent-news-card-media {
    --pf-white: #FFFFFF;
    --pf-mist: #B7C7DA;
    --pf-line: rgba(255, 255, 255, .28);
    color: var(--pf-white);
}

/* ============================ Selectable options ============================ */
/* Chips and swatches are now <button>s — reset native styling, keep the look. */
button.profishent-opt-chip, button.profishent-swatch {
    cursor: pointer; font-family: var(--pf-font-body); text-align: left;
    -webkit-appearance: none; appearance: none;
}
button.profishent-opt-chip:hover:not(.selected),
button.profishent-swatch:hover:not(.selected) { border-color: var(--pf-mist); }

.profishent-opt-chip.selected, .profishent-swatch.selected {
    border-color: var(--pf-green);
    background: rgba(var(--pf-green-rgb), .12);
    box-shadow: 0 0 0 1px var(--pf-green);
}
.profishent-opt-chip.selected { color: var(--pf-white); }
.profishent-opt-chip.oos.selected { opacity: .75; }

.profishent-options-more {
    margin-top: 12px; padding: 8px 16px; border-radius: 7px; cursor: pointer;
    background: none; border: 1px solid var(--pf-line); color: var(--pf-green);
    font-weight: 700; font-family: var(--pf-font-body); transition: all .12s ease;
}
.profishent-options-more:hover { border-color: var(--pf-green); background: rgba(var(--pf-green-rgb), .06); }

.profishent-selected-line { margin-top: 12px; font-size: .9rem; color: var(--pf-mist); }
.profishent-selected-line strong { color: var(--pf-white); }
.profishent-selected-line .oos { color: #ff8a8a; font-weight: 700; }
.profishent-selected-line .dim { opacity: .7; }

/* ======================================================================
   STATIC-SSR COMPONENTS (no Blazor circuit)
   ====================================================================== */

/* CSS-only gallery: nth radio :checked shows nth slide + highlights nth thumb */
.profishent-gallery-css { display: flex; flex-direction: column; gap: 12px; }
.profishent-gallery-radio { position: absolute; opacity: 0; pointer-events: none; }
.profishent-gallery-stage { position: relative; aspect-ratio: 1/1; border-radius: var(--pf-radius); overflow: hidden; background: var(--pf-navy-600); border: 1px solid var(--pf-line); }
.profishent-gallery-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .2s ease; }
.profishent-gallery-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.profishent-gallery-thumb { width: 66px; height: 66px; border-radius: 8px; overflow: hidden; border: 2px solid var(--pf-line); cursor: pointer; background: var(--pf-navy-600); }
.profishent-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* show/select the slide+thumb matching the checked radio (up to 8 images) */
.profishent-gallery-radio:nth-of-type(1):checked ~ .profishent-gallery-stage .profishent-gallery-slide:nth-of-type(1),
.profishent-gallery-radio:nth-of-type(2):checked ~ .profishent-gallery-stage .profishent-gallery-slide:nth-of-type(2),
.profishent-gallery-radio:nth-of-type(3):checked ~ .profishent-gallery-stage .profishent-gallery-slide:nth-of-type(3),
.profishent-gallery-radio:nth-of-type(4):checked ~ .profishent-gallery-stage .profishent-gallery-slide:nth-of-type(4),
.profishent-gallery-radio:nth-of-type(5):checked ~ .profishent-gallery-stage .profishent-gallery-slide:nth-of-type(5),
.profishent-gallery-radio:nth-of-type(6):checked ~ .profishent-gallery-stage .profishent-gallery-slide:nth-of-type(6),
.profishent-gallery-radio:nth-of-type(7):checked ~ .profishent-gallery-stage .profishent-gallery-slide:nth-of-type(7),
.profishent-gallery-radio:nth-of-type(8):checked ~ .profishent-gallery-stage .profishent-gallery-slide:nth-of-type(8) { opacity: 1; }
.profishent-gallery-radio:nth-of-type(1):checked ~ .profishent-gallery-thumbs .profishent-gallery-thumb:nth-of-type(1),
.profishent-gallery-radio:nth-of-type(2):checked ~ .profishent-gallery-thumbs .profishent-gallery-thumb:nth-of-type(2),
.profishent-gallery-radio:nth-of-type(3):checked ~ .profishent-gallery-thumbs .profishent-gallery-thumb:nth-of-type(3),
.profishent-gallery-radio:nth-of-type(4):checked ~ .profishent-gallery-thumbs .profishent-gallery-thumb:nth-of-type(4),
.profishent-gallery-radio:nth-of-type(5):checked ~ .profishent-gallery-thumbs .profishent-gallery-thumb:nth-of-type(5),
.profishent-gallery-radio:nth-of-type(6):checked ~ .profishent-gallery-thumbs .profishent-gallery-thumb:nth-of-type(6),
.profishent-gallery-radio:nth-of-type(7):checked ~ .profishent-gallery-thumbs .profishent-gallery-thumb:nth-of-type(7),
.profishent-gallery-radio:nth-of-type(8):checked ~ .profishent-gallery-thumbs .profishent-gallery-thumb:nth-of-type(8) { border-color: var(--pf-green); }
.profishent-gallery-radio:focus-visible ~ .profishent-gallery-thumbs .profishent-gallery-thumb { outline: 2px solid var(--pf-green); }

/* Products toolbar (native controls) */
.profishent-products-toolbar { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; margin-bottom: 18px; }
.profishent-toolbar-search { flex: 1 1 260px; }
.profishent-toolbar-search input { width: 100%; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--pf-line); background: var(--pf-navy-700); color: var(--pf-white); }
.profishent-products-toolbar-right { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.profishent-toolbar-field { display: flex; flex-direction: column; gap: 3px; font-size: .72rem; color: var(--pf-mist); text-transform: uppercase; letter-spacing: .5px; }
.profishent-toolbar-field select { padding: 8px 12px; border-radius: 8px; border: 1px solid var(--pf-line); background: var(--pf-navy-700); color: var(--pf-white); min-width: 140px; }
.profishent-toolbar-check { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--pf-white); cursor: pointer; }
.profishent-toolbar-check input { accent-color: var(--pf-green); width: 16px; height: 16px; }
.profishent-toolbar-apply { padding: 9px 20px; }
.profishent-toolbar-clear { color: var(--pf-mist); font-size: .85rem; text-decoration: underline; }

/* Static contact form fields */
.profishent-contact-form { display: flex; flex-direction: column; gap: 14px; max-width: 560px; }
.profishent-field { display: flex; flex-direction: column; gap: 5px; }
.profishent-field > span { font-size: .78rem; color: var(--pf-mist); text-transform: uppercase; letter-spacing: .5px; }
.profishent-field input, .profishent-field select, .profishent-field textarea {
    padding: 11px 14px; border-radius: 8px; border: 1px solid var(--pf-line);
    background: var(--pf-navy-700); color: var(--pf-white); font-family: var(--pf-font-body); font-size: .95rem;
}
.profishent-field textarea { resize: vertical; }
.profishent-check { display: inline-flex; align-items: center; gap: 8px; color: var(--pf-white); font-size: .9rem; }
.profishent-check input { accent-color: var(--pf-green); width: 17px; height: 17px; }
.profishent-alert { border-radius: 10px; padding: 12px 16px; margin-bottom: 14px; border: 1px solid; }
.profishent-alert.success { background: rgba(var(--pf-green-rgb), .1); border-color: var(--pf-green); color: var(--pf-white); }
.profishent-alert.error { background: rgba(255, 90, 90, .1); border-color: #ff8a8a; color: var(--pf-white); }
.profishent-crumbs { font-size: .85rem; color: var(--pf-mist); display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.profishent-crumbs a { color: var(--pf-mist); } .profishent-crumbs .current { color: var(--pf-white); }

/* Options "show all" is now an anchor, not a button */
a.profishent-options-more { display: inline-block; margin-top: 12px; padding: 8px 16px; border-radius: 7px; border: 1px solid var(--pf-line); color: var(--pf-green); font-weight: 700; text-decoration: none; }
a.profishent-options-more:hover { border-color: var(--pf-green); background: rgba(var(--pf-green-rgb), .06); }

/* CSS-only mobile drawer (checkbox toggle) */
.profishent-drawer-toggle { position: absolute; opacity: 0; pointer-events: none; }
.profishent-mobile-drawer {
    position: fixed; top: 0; right: 0; height: 100vh; width: 300px; max-width: 82vw; z-index: 300;
    background: var(--pf-navy-900); border-left: 1px solid var(--pf-line);
    transform: translateX(100%); transition: transform .25s ease; overflow-y: auto;
    display: flex; flex-direction: column;
}
.profishent-drawer-scrim {
    position: fixed; inset: 0; z-index: 299; background: rgba(0,0,0,.5);
    opacity: 0; visibility: hidden; transition: opacity .25s ease;
}
.profishent-drawer-toggle:checked ~ .profishent-mobile-drawer { transform: translateX(0); }
.profishent-drawer-toggle:checked ~ .profishent-drawer-scrim { opacity: 1; visibility: visible; }
.profishent-drawer-header { display: flex; align-items: center; gap: 4px; padding: 18px 20px; border-bottom: 1px solid var(--pf-line); font-family: var(--pf-font-head); font-size: 1.3rem; }
.profishent-drawer-close { margin-left: auto; cursor: pointer; color: var(--pf-mist); font-size: 1.1rem; padding: 4px 8px; }
.profishent-drawer-nav { display: flex; flex-direction: column; padding: 10px 0; }
.profishent-drawer-group { padding: 12px 20px 4px; font-size: .7rem; letter-spacing: 2px; text-transform: uppercase; color: var(--pf-green); }
.profishent-drawer-link { padding: 11px 20px; color: var(--pf-white); text-decoration: none; font-weight: 600; }
.profishent-drawer-link.sub { padding-left: 34px; font-weight: 400; color: var(--pf-mist); font-size: .9rem; }
.profishent-drawer-link:hover { background: var(--pf-navy-600); }
/* burger only shows on mobile; drawer never shows on desktop */
.profishent-burger { display: none; cursor: pointer; color: var(--pf-white); background: none; border: none; align-items: center; }
@media (max-width: 900px) { .profishent-burger { display: inline-flex; } }
@media (min-width: 901px) {
    .profishent-mobile-drawer, .profishent-drawer-scrim { display: none !important; }
}

/* ============================ JS typeahead (static SSR) ============================ */
.pf-suggest-wrap { position: relative; }
/* The wrapper replaces the input as the flex child — inherit its growth so width is unchanged. */
.profishent-hero-search .pf-suggest-wrap { flex: 1; }
.profishent-toolbar-search .pf-suggest-wrap { width: 100%; }
.pf-suggest-wrap > input { width: 100%; }
.pf-suggest-panel {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 200;
    background: var(--mud-palette-surface); border: 1px solid var(--pf-line); border-radius: 10px;
    box-shadow: var(--pf-shadow); overflow: hidden; max-height: 60vh; overflow-y: auto;
}
.pf-suggest-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; text-decoration: none; color: var(--pf-ink); border-bottom: 1px solid var(--pf-line); }
.pf-suggest-item:hover, .pf-suggest-item.active { background: var(--mud-palette-action-default-hover, rgba(128,128,128,.12)); }
.pf-suggest-thumb { width: 42px; height: 42px; border-radius: 6px; background-size: cover; background-position: center; background-color: var(--pf-navy-600); flex-shrink: 0; }
.pf-suggest-meta { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.pf-suggest-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--pf-ink); }
.pf-suggest-cat { font-size: .78rem; color: var(--pf-aqua); }
.pf-suggest-all { display: block; padding: 12px 14px; color: var(--pf-green); font-weight: 700; text-decoration: none; }
.pf-suggest-all:hover, .pf-suggest-all.active { background: var(--pf-navy-600); }
.pf-suggest-empty { padding: 14px; color: var(--mud-palette-text-secondary); text-align: center; }

/* Contact page — email-only variant */
.profishent-contact-emailblurb { color: var(--pf-mist); max-width: 46ch; margin-bottom: 18px; }
.profishent-contact-emailbtn { display: inline-block; }