:root{
    --bg:#070b12;
    --panel:#0b111b;
    --panel-2:#0d1521;
    --panel-3:#111a28;
    --line:#1c2938;
    --line-soft:#152131;
    --text:#f4f7fb;
    --muted:#8491a5;
    --blue:#4da3ff;
    --blue-2:#2764ff;
    --green:#3de1a1;
    --amber:#ffbf4a;
    --red:#ff6677;
    --violet:#9b7cff;
    --shadow:0 18px 60px rgba(0,0,0,.34);
    --radius:16px;
    --sidebar:232px;
}

*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{min-height:100vh;overflow-x:hidden}
button,input,select{font:inherit}

body::before{
    content:"";
    position:fixed;inset:0;z-index:-3;
    background:
    radial-gradient(circle at 72% 0%,rgba(49,115,255,.18),transparent 34%),
    radial-gradient(circle at 20% 90%,rgba(26,201,164,.08),transparent 28%),
    linear-gradient(180deg,#08101a 0%,#060910 100%);
}
body::after{
    content:"";
    position:fixed;inset:0;z-index:-2;opacity:.18;pointer-events:none;
    background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
    background-size:34px 34px;
    mask-image:linear-gradient(to bottom,black,transparent 85%);
}

.app{display:grid;grid-template-columns:var(--sidebar) 1fr;min-height:100vh}


.dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green)}

.main{grid-column:2;min-width:0}

.topbar{
    height:64px;border-bottom:1px solid var(--line);
    display:flex;align-items:center;justify-content:space-between;
    padding:0 28px;position:sticky;top:0;z-index:15;
    background:rgba(7,11,18,.78);backdrop-filter:blur(18px)
}

.search{width:min(430px,42vw);position:relative}
.search input{
    width:100%;background:#0d1623;border:1px solid #223248;color:#dfe8f4;
    padding:10px 14px 10px 38px;border-radius:11px;outline:none;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.01)
}
.search input:focus{border-color:#3d83d9;box-shadow:0 0 0 3px rgba(77,163,255,.12)}
.search::before{content:"⌕";position:absolute;left:14px;top:6px;color:#7ea7d6;font-size:20px}

.top-actions{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--muted)}
.avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#244f85;color:white;font-weight:700}

.content{--expanded-content-max:1650px;padding:26px 26px 38px;max-width:1650px;margin:0 auto}
.heading-row{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:20px}
.heading-row h2{font-size:28px;margin:0 0 6px;letter-spacing:-.03em}
.heading-row p{margin:0;color:var(--muted);font-size:13px}
.live-badge{
    font-size:11px;color:#9deccb;border:1px solid #1f6f54;background:rgba(39,154,112,.1);
    border-radius:999px;padding:7px 10px;display:flex;align-items:center;gap:8px
}

.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}
.card{
    background:linear-gradient(180deg,rgba(14,22,33,.98),rgba(10,16,25,.98));
    border:1px solid var(--line);border-radius:var(--radius);
    box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.card::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.018) 48%,transparent 72%);
    transform:translateX(-100%);transition:.6s
}
.card:hover::after{transform:translateX(100%)}

.stat{padding:16px 17px;min-height:104px}
.stat .label{font-size:12px;color:var(--muted);margin-bottom:9px}
.stat .value{font-size:25px;font-weight:800;letter-spacing:-.03em}
.stat .trend{font-size:11px;margin-top:7px;color:var(--green)}
.stat .spark{
    position:absolute;right:14px;bottom:16px;width:78px;height:46px;
    display:flex;align-items:end;gap:4px;opacity:.65
}
.spark i{display:block;width:6px;background:linear-gradient(#4ea8ff,#234c8a);border-radius:2px 2px 0 0}

.grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(380px,.95fr);gap:14px}
.calculator{padding:18px}
.panel-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}
.panel-title h3{margin:0;font-size:20px;display:flex;align-items:center;gap:9px}
.panel-title small{display:block;color:var(--muted);font-size:11px;margin-top:4px;font-weight:400}
.ghost-btn,.primary-btn,.danger-btn{
    width: 80px; border-radius:9px;padding:8px 11px;border:1px solid #29415c;background:#0d1724;color:#cfe1f8;
    cursor:pointer;transition:.18s ease;font-size:12px
}
.ghost-btn:hover{border-color:#4385c8;background:#101e2d}
.primary-btn{
    border-color:#3284e5;background:linear-gradient(180deg,#2f94ff,#176bd8);
    color:white;box-shadow:0 9px 26px rgba(30,122,227,.24)
}
.primary-btn:hover{transform:translateY(-1px);filter:brightness(1.07)}
.danger-btn{border-color:#7d3541;background:#251016;color:#ffadb6}

.search-product{
    display:block;
    margin-bottom:14px;
}
.field label{display:block;color:#a8b5c6;font-size:11px;margin-bottom:7px}
.input{
    width:100%;height:42px;border:1px solid #283b50;background:#0a121d;color:#e8eef7;
    border-radius:9px;padding:0 12px;outline:none
}
.input:focus{border-color:#4c9df0;box-shadow:0 0 0 3px rgba(77,163,255,.1)}
.product-mini{
    border:1px solid #26394d;border-radius:10px;padding:10px;background:#0b141f;
    display:flex;align-items:center;gap:10px
}
.thumb{
    width:54px;height:54px;border-radius:8px;border:1px solid #2a3b4e;
    background:
    linear-gradient(135deg,transparent 0 45%,rgba(255,255,255,.11) 45% 55%,transparent 55%),
    linear-gradient(180deg,#27313c,#121923);
    position:relative
}
.thumb::after{content:"";position:absolute;inset:7px 17px;border:1px solid #6d7886;border-radius:2px}
.product-mini b{font-size:12px}
.product-mini span{display:block;color:var(--muted);font-size:10px;margin-top:4px}

table{width:100%;border-collapse:collapse}
.price-table{border:1px solid #203044;border-radius:10px;overflow:hidden;background:#09111a}
.price-table th,.price-table td{padding:9px 10px;font-size:11px;border-bottom:1px solid #182536;text-align:left}
.price-table th{color:#8f9bad;font-weight:500;background:#0e1722}
.price-table td:last-child,.price-table th:last-child{text-align:right}
.price-table tr:last-child td{border-bottom:none}
.price-table tbody tr:hover{background:#0f1925}

.subtotal{
    display:flex;justify-content:flex-end;gap:32px;padding:10px 12px;color:#aeb9c8;font-size:11px;
    border:1px solid #203044;border-top:none;border-radius:0 0 10px 10px;background:#0b141e
}
.subtotal strong{color:#fff}

.multiplier-grid{
    display:grid;grid-template-columns:1.15fr 1fr;gap:14px;margin:16px 0 14px
}
.toggle-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mult-card{
    border:1px solid #2b3a4e;background:#0b141e;border-radius:10px;padding:11px;cursor:pointer;
    transition:.18s ease
}
.mult-card.active{
    border-color:#2f98ff;background:linear-gradient(180deg,rgba(36,132,242,.18),rgba(27,73,123,.11));
    box-shadow:0 0 0 1px rgba(58,153,255,.25),0 12px 30px rgba(21,81,145,.12)
}
.mult-card span{display:block;font-size:11px;color:#aab6c5}
.mult-card strong{display:block;font-size:18px;margin-top:4px}
.fixed-row{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:8px;
}

.result-bar{
    display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:15px;
    border:1px solid #2f6c5d;background:linear-gradient(90deg,rgba(33,130,99,.14),rgba(13,24,31,.35));
    border-radius:11px;padding:13px 14px
}
.formula{font-size:11px;color:#9cafbd}
.result{font-size:29px;font-weight:900;color:#5bf0b5;letter-spacing:-.03em}

.right-stack{display:flex;flex-direction:column;gap:14px}
.reverse,.changes{padding:17px}
.reverse-grid{display:grid;grid-template-columns:1.3fr .9fr;gap:10px}
.metric-box{
    border:1px solid #26394d;border-radius:10px;background:#0a131e;padding:12px;
    min-height:112px
}
.metric-label{font-size:10px;color:#8997aa;margin-bottom:8px}
.metric-big{font-size:29px;font-weight:900;color:#55e6ae}
.metric-note{font-size:10px;color:#d6b85b;margin-top:5px}
.ring{
    width:64px;height:64px;border-radius:50%;margin:6px auto;
    background:conic-gradient(var(--blue) 0 68%,#263348 68% 100%);
    display:grid;place-items:center
}
.ring::after{content:"";width:46px;height:46px;border-radius:50%;background:#0a131e}

.changes-table th,.changes-table td{padding:8px 8px;font-size:13.5px;border-bottom:1px solid #192739}
.changes-table th{color:#7f8ca0;text-align:left;font-weight:500}
.chg-up{color:#ff7b86}.chg-down{color:#5ce0b0}
.status{
    display:inline-flex;align-items:center;justify-content:center;min-width:62px;padding:4px 7px;
    border-radius:999px;border:1px solid #725713;background:#2f250a;color:#f8c65b;font-size:9.5px
}
.status.synced{border-color:#18754c;background:#0c3425;color:#59e6a7}

.lower{
    display:grid;grid-template-columns:1.05fr .9fr 1fr;gap:14px;margin-top:14px
}
.lower .card{padding:16px;min-height:190px}
.dropzone{
    border:1px dashed #3a5877;background:#09121c;border-radius:10px;padding:18px;text-align:center;
    margin-top:12px;color:#9dabbc;font-size:11px;transition:.18s
}
.dropzone:hover{border-color:#5597d8;background:#0b1724}
.dropzone b{display:block;color:#dce7f5;font-size:12px;margin-bottom:5px}
.link-input{display:flex;gap:8px;margin-top:9px}
.link-input input{flex:1;min-width:0}
.sync-actions{display:flex;flex-direction:column;gap:8px;margin-top:15px}
.selector-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}

.rule-list{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.rule{
    border:1px solid #223247;background:#0a131d;border-radius:9px;padding:10px;
    display:flex;justify-content:space-between;align-items:center;font-size:11px
}
.rule small{display:block;color:#7f8ca0;margin-top:3px}
.tag{padding:4px 7px;border-radius:6px;background:#17253a;color:#9ec8ff;border:1px solid #294568;font-size:10px}

.fade-in{animation:fade .45s ease both}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pulse{animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}

.login-overlay{
    position:fixed;inset:0;z-index:100;background:
    radial-gradient(circle at 50% 20%,rgba(49,118,255,.16),transparent 30%),
    rgba(4,7,12,.96);
    display:grid;place-items:center;backdrop-filter:blur(14px);transition:.35s ease
}
.login-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}
.login-box{
    width:min(390px,calc(100vw - 36px));padding:28px;border-radius:18px;
    background:linear-gradient(180deg,#0e1722,#090f17);border:1px solid #26394e;box-shadow:0 28px 90px rgba(0,0,0,.55)
}
.login-box h2{margin:0 0 6px;font-size:23px}
.login-box p{margin:0 0 20px;color:var(--muted);font-size:12px}
.login-box .field{margin-bottom:12px}
.error{color:#ff8e9b;font-size:11px;height:14px;margin-top:9px}

@media(max-width:1150px){
    .stats{grid-template-columns:repeat(2,1fr)}
    .grid{grid-template-columns:1fr}
    .lower{grid-template-columns:1fr}
}
@media(max-width:800px){
    :root{--sidebar:76px}
    .brand h1,.brand span,.nav a span,.nav-title,.sidebar-bottom{display:none}
    .brand{justify-content:center;padding-left:0;padding-right:0}
    .nav a{justify-content:center;padding:10px}
    .content{padding:18px 14px 28px}
    .topbar{padding:0 14px}
    .search{width:58vw}
    .stats{grid-template-columns:1fr}
    .search-product,.multiplier-grid,.reverse-grid{grid-template-columns:1fr}
    .result-bar{grid-template-columns:1fr}
    .top-actions .desktop-only{display:none}
}



/* =====================================================
   ALFRED PAGE NAVIGATION
===================================================== */

.app-page{
    display:none;
}

.app-page.active{
    display:block;
}


/* =====================================================
   PARENT SEARCH
===================================================== */

.parent-search-row{
    display:grid;
    grid-template-columns:1fr auto;
    gap:8px;
}

.lookup-status{
    margin-top:7px;
    min-height:14px;
    font-size:10px;
    color:var(--muted);
}

.empty-table-message{
    text-align:center !important;
    color:var(--muted);
    padding:26px !important;
}


/* =====================================================
   SYNC PAGE
===================================================== */

.sync-main-button{
    min-width:130px;
    height:42px;
}

.sync-main-button.syncing{
    pointer-events:none;
    opacity:.68;
}

.sync-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:14px;
    margin-bottom:14px;
}

.sync-card{
    padding:18px;
    min-height:170px;
}

.sync-card-title{
    color:#eef5ff;
    font-size:15px;
    font-weight:700;
    margin-bottom:8px;
}

.sync-sheet-name{
    color:#79baff;
    font-size:11px;
    min-height:30px;
    word-break:break-word;
}

.sync-stat-row{
    display:flex;
    gap:26px;
    margin-top:22px;
}

.sync-stat-row > div{
    min-width:0;
}

.sync-stat-row span{
    display:block;
    color:var(--muted);
    font-size:10px;
    margin-bottom:5px;
}

.sync-stat-row strong{
    font-size:22px;
    letter-spacing:-.03em;
}

.sync-good{
    color:var(--green);
}

.sync-warning{
    color:var(--amber);
}

.sync-details-card{
    padding:18px;
}

.sync-status-badge{
    border:1px solid #2b3d52;
    background:#0b1520;
    border-radius:999px;
    padding:6px 10px;
    color:#93a1b4;
    font-size:10px;
}

.sync-status-badge.success{
    color:#75efba;
    border-color:#247456;
    background:rgba(38,150,108,.12);
}

.sync-status-badge.failed{
    color:#ff8c99;
    border-color:#743641;
    background:rgba(180,55,70,.12);
}

.sync-info-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-bottom:14px;
}

.sync-info-grid > div{
    border:1px solid #203044;
    background:#09121c;
    border-radius:10px;
    padding:13px;
}

.sync-info-grid span{
    display:block;
    color:var(--muted);
    font-size:10px;
    margin-bottom:6px;
}

.sync-info-grid strong{
    font-size:12px;
}

.sync-console{
    border:1px solid #1f3145;
    background:#060c13;
    border-radius:10px;
    padding:14px;
    min-height:70px;

    color:#90a9c3;
    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

    font-size:11px;
    line-height:1.7;
}


/* =====================================================
   SETTINGS
===================================================== */

.settings-layout{
    display:grid;
    grid-template-columns:
        minmax(0,1.35fr)
        minmax(340px,.85fr);

    gap:14px;
}

.settings-card{
    padding:18px;
}

.settings-card:first-child{
    grid-row:span 2;
}

.settings-field{
    margin-bottom:14px;
}

.settings-two-column{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.settings-actions{
    display:flex;
    gap:8px;
    margin-top:18px;
}

.settings-message{
    margin-top:14px;
    min-height:18px;
    color:var(--muted);
    font-size:11px;
}

.settings-info-box{
    border:1px solid #223247;
    background:#09121c;
    border-radius:10px;
    padding:13px;
    margin-bottom:14px;
}

.settings-info-box span{
    display:block;
    color:var(--muted);
    font-size:10px;
    margin-bottom:5px;
}

.settings-info-box strong{
    font-size:12px;
}

.settings-help{
    color:var(--muted);
    font-size:11px;
    line-height:1.7;
    margin:0;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:1150px){

    .sync-grid{
        grid-template-columns:1fr;
    }

    .settings-layout{
        grid-template-columns:1fr;
    }

    .settings-card:first-child{
        grid-row:auto;
    }
}

@media(max-width:980px){
    .shopify-change-top{
        grid-template-columns:1fr;
    }

    .shopify-compare-option{
        width:100%;
    }
}

@media(max-width:800px){

    .settings-two-column,
    .sync-info-grid{
        grid-template-columns:1fr;
    }

    .parent-search-row{
        grid-template-columns:1fr;
    }
}


.result-bar-dual{
    display:grid;
    grid-template-columns:
        1fr auto 1fr auto;
    align-items:center;
    gap:22px;
}

.result-price-block{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    min-width:0;
}

.result-price-info b{
    display:block;
    font-size:12px;
}

.result-divider{
    width:1px;
    height:48px;
    background:#24413d;
}

.compare-at-result{
    color:#8fc0ff;
}

/* =====================================================
   PARENT PRODUCT IMAGE
===================================================== */

.product-card-image-shell{
    width:54px;
    height:54px;
    flex:0 0 54px;

    border-radius:9px;
    overflow:hidden;

    border:1px solid #2a3b4e;
    background:#ffffff;

    display:flex;
    align-items:center;
    justify-content:center;
}

.product-card-image{
    width:100%;
    height:100%;

    object-fit:contain;
    display:block;

    background:#ffffff;
}

.product-card-image-fallback{
    width:100%;
    height:100%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#151f2c;
    color:#70839c;

    font-size:20px;
}


/* =====================================================
   AIRPORT-STYLE PRODUCT NAME
===================================================== */

.product-column-cell{
    width:290px;
    max-width:290px;
    overflow:hidden;
}

.product-ticker{
    width:100%;
    overflow:hidden;
    white-space:nowrap;
}


.product-ticker-track{
    display:flex;
    align-items:center;

    width:max-content;

    gap:42px;

    white-space:nowrap;

    will-change:transform;
}


/* Hide duplicate copy unless this row actually scrolls */
.product-ticker
.product-ticker-copy:nth-child(2){
    display:none;
}


/* Only reveal duplicate when ticker is moving */
.product-ticker.moving
.product-ticker-copy:nth-child(2){
    display:block;
}


/*
Only long product names move.
One direction only.
NO alternate / reverse.
*/
.product-ticker.moving
.product-ticker-track{

    animation:
        productTickerLoop
        10s
        linear
        infinite;
}


@keyframes productTickerLoop{

    /*
    Full product name stays still
    for roughly 2 seconds.
    */
    0%,
    20%{
        transform:
            translateX(0);
    }


    /*
    Travel only LEFT.
    This is the airport-board movement.
    */
    70%{
        transform:
            translateX(
                var(
                    --ticker-shift,
                    0px
                )
            );
    }


    /*
    Copy #2 is now exactly where
    copy #1 originally started.

    Hold the full name for
    roughly 3 seconds.
    */
    70%,
    100%{
        transform:
            translateX(
                var(
                    --ticker-shift,
                    0px
                )
            );
    }
}


/* =====================================================
   EXACT PRICE ↔ STORE .99 PRICE
===================================================== */

.price-swap-viewport{
    width:180px;
    height:50px;

    position:relative;

    overflow:hidden;
    contain:paint;

    isolation:isolate;

    clip-path:
        inset(
            0 0 0 0
        );
}

.price-swap-track{
    width:200%;
    height:100%;

    display:flex;

    will-change:transform;

    animation:
        priceSwapLoop
        7.2s
        linear
        infinite;
}

.price-swap-frame{
    position:relative;

    flex:0 0 50%;

    display:flex;
    flex-direction:column;

    justify-content:center;
    align-items:flex-end;

    overflow:hidden;

    padding:
        0 10px;
}

.price-swap-frame::before{
    content:"";

    position:absolute;
    inset:0;

    z-index:-1;

    background:
        #0b1719;
}

.price-swap-tag{
    display:block;

    margin-bottom:3px;

    font-size:9px;
    font-weight:600;

    color:#8191a6;

    text-transform:uppercase;
    letter-spacing:.08em;
}

.price-swap-value{
    display:block;

    color:inherit;

    font-size:29px;
    line-height:1;

    font-weight:900;
    letter-spacing:-.03em;

    white-space:nowrap;
}


.price-swap-tag,
.price-swap-value{
    animation:
        priceTextWobble
        7.2s
        linear
        infinite;

    will-change:transform;
}

@keyframes priceSwapLoop{

    /* calculated price visible */
    0%,
    22%{
        transform:translateX(0);
    }

    /* fast slide to Store .99 */
    27%,
    64%{
        transform:translateX(-50%);
    }

    /* fast slide back */
    69%,
    100%{
        transform:translateX(0);
    }
}

@keyframes priceTextWobble{

    /*
    Normal
    */
    0%,
    27%{
        transform:translateX(0);
    }


    /*
    Wobble after arriving
    at Store .99
    */
    29%{
        transform:translateX(6px);
    }

    31%{
        transform:translateX(-5px);
    }

    33%{
        transform:translateX(3px);
    }

    35%{
        transform:translateX(-2px);
    }

    37%,
    69%{
        transform:translateX(0);
    }


    /*
    Wobble after returning
    to Calculated
    */
    71%{
        transform:translateX(6px);
    }

    73%{
        transform:translateX(-5px);
    }

    75%{
        transform:translateX(3px);
    }

    77%{
        transform:translateX(-2px);
    }

    79%,
    100%{
        transform:translateX(0);
    }
}

/* =====================================================
   PRICE CALCULATOR APPROVAL VIEW
   Hide dashboard/admin-only sections
===================================================== */


/* =====================================================
   PRICE CALCULATOR APPROVAL VIEW
===================================================== */


/* KEEP TOP KPI CARDS */
.stats.dashboard-block{
    display:grid !important;
}


/* RESTORE ORIGINAL 2-COLUMN CALCULATOR LAYOUT */
.grid.dashboard-block{
    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(380px, .95fr) !important;
}


/* KEEP RIGHT SIDE COLUMN */
.grid.dashboard-block > .right-stack{
    display:flex !important;
    flex-direction:column;
    gap:12px;
}


/* HIDE ONLY REVERSE ENGINEER */
.grid.dashboard-block
.right-stack
.reverse{
    display:none !important;
}


/* KEEP RECENT PRICE CHANGES */
.grid.dashboard-block
.right-stack
.changes{
    display:block !important;
}


/* HIDE BOTTOM 3 ADMIN CARDS */
.lower.dashboard-block{
    display:none !important;
}


.grid.dashboard-block
.calculator{
    width:100%;
    max-width:none;
}

/* =====================================================
   HIDE INTERNAL COMPONENT PRICING
===================================================== */


/* Base Price = column 4 */
.price-table table th:nth-child(4),
.price-table table td:nth-child(4){

    display:none;
}


/* Total = column 6 */
.price-table table th:nth-child(6),
.price-table table td:nth-child(6){

    display:none;
}

.calculator .subtotal{
    display:none !important;
}

/* =====================================================
   PUBLIC PRICING BASE SELECTOR
===================================================== */


/* Keep Pricing Base / Low Base / High Base visible */
.calculator .multiplier-grid{
    display:grid !important;

    /*
    We only need the left side now.
    */
    grid-template-columns:1fr !important;
}


/* NEVER show the actual Low / High multiplier rates */
.calculator .mult-card strong{
    display:none !important;
}


/* Hide the entire Additional Multipliers side:
   1.2 / 1.15 / 0.7
*/
.calculator .multiplier-grid > div:nth-child(2){
    display:none !important;
}


/* Make Low Base / High Base look like proper choices
   now that the numbers are hidden
*/



.calculator .mult-card{
    min-height:56px;

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;
}


.calculator .mult-card span{
    font-size:15px;
    font-weight:700;
}

/* Never expose pricing formulas */
.calculator .formula{
    display:none !important;
}

/* =====================================================
   PUBLIC PRICE SLIDE + LANDING WOBBLE
===================================================== */

/* =====================================================
   CALCULATED → STORE .99 → CALCULATED
===================================================== */

.public-price-slider{
    width:190px;
    height:54px;

    position:relative;

    overflow:hidden;
    contain:paint;
}


.public-price-track{
    width:200%;
    height:100%;

    display:flex;

    will-change:transform;

    animation:
        publicPriceSlide
        7.5s
        linear
        infinite;
}


.public-price-frame{
    flex:0 0 50%;

    min-width:0;

    display:flex;
    align-items:center;
    justify-content:flex-end;

    overflow:hidden;

    padding:0 8px;
}


.public-price-inner{
    display:flex;
    flex-direction:column;
    align-items:flex-end;

    width:max-content;

    padding:0 6px;

    will-change:transform;

    animation:
        publicPriceWobble
        7.5s
        linear
        infinite;
}


.public-price-label{
    display:block;

    margin-bottom:4px;

    color:#8291a5;

    font-size:9px;
    font-weight:700;

    line-height:1;

    letter-spacing:.08em;
    text-transform:uppercase;
}


.public-price-number{
    display:block;

    font-size:30px;
    font-weight:900;

    line-height:1;

    white-space:nowrap;
}


/* =====================================================
   SLIDE TIMING
===================================================== */

@keyframes publicPriceSlide{

    /*
    CALCULATED PRICE
    wait
    */
    0%,
    22%{
        transform:
            translateX(0);
    }


    /*
    fast slide RIGHT/ACROSS
    to Store .99
    */
    28%{
        transform:
            translateX(-50%);
    }


    /*
    STORE .99 stays visible
    */
    28%,
    62%{
        transform:
            translateX(-50%);
    }


    /*
    slide back to Calculated
    */
    68%{
        transform:
            translateX(0);
    }


    /*
    CALCULATED stays visible
    */
    68%,
    100%{
        transform:
            translateX(0);
    }
}


/* =====================================================
   WOBBLE AFTER EACH LANDING
===================================================== */

@keyframes publicPriceWobble{

    0%,
    28%{
        transform:
            translateX(0);
    }


    /* Store .99 landing wobble */

    30%{
        transform:
            translateX(3px);
    }

    32%{
        transform:
            translateX(-3px);
    }

    34%{
        transform:
            translateX(2px);
    }

    36%{
        transform:
            translateX(-1px);
    }

    38%,
    68%{
        transform:
            translateX(0);
    }


    /* Calculated landing wobble */

    70%{
        transform:
            translateX(3px);
    }

    72%{
        transform:
            translateX(-3px);
    }

    74%{
        transform:
            translateX(2px);
    }

    76%{
        transform:
            translateX(-1px);
    }

    78%,
    100%{
        transform:
            translateX(0);
    }
}

/* Free Stock column: left align values */
.price-table table th:nth-child(5),
.price-table table td:nth-child(5){
    text-align:right !important;
}

/* =====================================================
   PRICING BASE — FINAL CLEAN VERSION
===================================================== */

.pricing-base-section{
    margin-top:16px;
    margin-bottom:18px;
}

.pricing-base-label{
    margin-bottom:9px;

    color:#9aa9c4;

    font-size:13px;
}


/* =====================================================
   NORMAL LAYOUT

   [ LOW BASE ] [ HIGH BASE ]      [ ICON ]
===================================================== */

.pricing-base-controls{
    width:100%;

    display:grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        54px !important;

    grid-template-rows:
        54px;

    column-gap:24px;

    position:relative;

    align-items:center;
}


/* =====================================================
   LOW + HIGH WRAPPER
===================================================== */

.pricing-presets{
    grid-column:1;
    grid-row:1;

    display:grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap:12px;

    width:100%;
    height:54px;

    min-width:0;

    opacity:1;

    transform:
        scaleX(1);

    filter:
        blur(0);

    transform-origin:center;

    transition:
        opacity .20s ease,
        transform .36s
        cubic-bezier(
            .22,
            1,
            .36,
            1
        ),
        filter .22s ease;
}


/* =====================================================
   LOW / HIGH BUTTON
===================================================== */

.base-choice{
    appearance:none;

    width:100%;
    height:54px;

    min-height:54px;

    margin:0;
    padding:0 18px;

    border:
        1px solid #2b3a4e;

    border-radius:13px;

    background:#0b141e;

    color:#aab6c5;

    display:flex;

    align-items:center;
    justify-content:center;

    cursor:pointer;

    font-family:inherit;

    position:relative;

    transition:
        border-color .20s ease,
        background .20s ease,
        box-shadow .20s ease,
        color .20s ease,
        transform .16s ease;
}


.base-choice span{
    color:inherit;

    font-size:15px;
    font-weight:800;

    line-height:1;
}





/* =====================================================
   LOW ACTIVE — RED
===================================================== */

.base-low.active{
    color:#ff8292;

    border-color:
        rgba(
            255,
            88,
            108,
            .95
        );

    background:
        linear-gradient(
            180deg,
            rgba(
                255,
                69,
                91,
                .17
            ),
            rgba(
                87,
                22,
                34,
                .13
            )
        );

    box-shadow:
        0 0 0 1px
        rgba(
            255,
            88,
            108,
            .18
        ),
        0 8px 24px
        rgba(
            170,
            31,
            51,
            .10
        );
}


/* =====================================================
   HIGH ACTIVE — GREEN
===================================================== */

.base-high.active{
    color:#65eebe;

    border-color:
        rgba(
            57,
            226,
            162,
            .95
        );

    background:
        linear-gradient(
            180deg,
            rgba(
                37,
                195,
                137,
                .16
            ),
            rgba(
                18,
                80,
                60,
                .13
            )
        );

    box-shadow:
        0 0 0 1px
        rgba(
            57,
            226,
            162,
            .18
        ),
        0 8px 24px
        rgba(
            29,
            150,
            105,
            .10
        );
}


/* =====================================================
   ADJUST BUTTON
   SQUARE + FAR RIGHT
===================================================== */

.base-adjust-button{
    grid-column:2;
    grid-row:1;

    appearance:none;

    width:54px !important;
    height:54px !important;

    min-width:54px !important;
    min-height:54px !important;

    max-width:54px;

    margin:0;
    padding:0 !important;

    border:
        1px solid #2b3a4e;

    border-radius:13px;

    background:#0b141e;

    color:#aab6c5;

    display:flex !important;

    align-items:center;
    justify-content:center;

    cursor:pointer;

    justify-self:end;

    position:relative;

    z-index:20;

    transition:
        border-color .20s ease,
        background .20s ease,
        color .20s ease,
        box-shadow .20s ease,
        transform .16s ease;
}


.base-adjust-button svg{
    width:21px;
    height:21px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.8;

    stroke-linecap:round;
    stroke-linejoin:round;

    pointer-events:none;
}


.base-adjust-button:hover{
    color:#ffd76a;

    border-color:
        rgba(
            255,
            207,
            77,
            .78
        );
}


/* ADJUST SELECTED — YELLOW */
.base-adjust-button.active{
    color:#ffd65b;

    border-color:
        rgba(
            255,
            205,
            72,
            .98
        );

    background:
        linear-gradient(
            180deg,
            rgba(
                255,
                193,
                45,
                .17
            ),
            rgba(
                91,
                64,
                10,
                .13
            )
        );

    box-shadow:
        0 0 0 1px
        rgba(
            255,
            205,
            72,
            .18
        ),
        0 8px 22px
        rgba(
            190,
            128,
            18,
            .10
        );
}


/* =====================================================
   SLIDER MODE
   REPLACES LOW + HIGH ONLY
===================================================== */

.pricing-custom{
    grid-column:1;
    grid-row:1;

    width:100%;
    height:54px;

    min-width:0;

    opacity:0;

    pointer-events:none;

    transform:
        scaleX(.72);

    transform-origin:center;

    filter:
        blur(3px);

    transition:
        opacity .18s ease,
        transform .38s
        cubic-bezier(
            .22,
            1,
            .36,
            1
        ),
        filter .20s ease;
}


/* =====================================================
   SLIDER SHELL
===================================================== */

.base-slider-shell{
    width:78%;
    height:54px;
    min-height:54px;

    position:relative;

    padding:
        8px 18px
        9px;

    border:
        1px solid
        rgba(
            255,
            205,
            72,
            .50
        );

    border-radius:13px;

    background:
        linear-gradient(
            180deg,
            rgba(
                255,
                200,
                60,
                .07
            ),
            rgba(
                11,
                20,
                30,
                .95
            )
        );
}


.base-slider-labels{
    position:absolute;

    top:7px;
    left:18px;
    right:18px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    margin:0;

    color:#8e9baf;

    font-size:9px;
    font-weight:700;

    line-height:1;

    pointer-events:none;
}


/* =====================================================
   RANGE SLIDER
===================================================== */

.base-slider{
    appearance:none;

    position:absolute;

    left:18px;
    right:18px;
    bottom:12px;

    width:
        calc(
            100% - 36px
        );

    height:5px;

    margin:0;

    border-radius:999px;

    outline:none;

    cursor:pointer;

    background:
        linear-gradient(
            90deg,
            #ff6677 0%,
            #ffc94f 50%,
            #3de1a1 100%
        );
}


.base-slider::-webkit-slider-thumb{
    appearance:none;

    width:20px;
    height:20px;

    border-radius:50%;

    border:
        4px solid #09111b;

    background:#ffd65b;

    box-shadow:
        0 0 0 2px
        rgba(
            255,
            214,
            91,
            .72
        );

    cursor:grab;
}


.base-slider::-webkit-slider-thumb:active{
    cursor:grabbing;
}


.base-slider::-moz-range-thumb{
    width:14px;
    height:14px;

    border-radius:50%;

    border:
        4px solid #09111b;

    background:#ffd65b;

    box-shadow:
        0 0 0 2px
        rgba(
            255,
            214,
            91,
            .72
        );

    cursor:grab;
}


/* =====================================================
   MERGE ANIMATION
===================================================== */

.pricing-base-controls.adjust-mode
.pricing-presets{
    opacity:0;

    pointer-events:none;

    transform:
        scaleX(.68);

    filter:
        blur(3px);
}


.pricing-base-controls.adjust-mode
.pricing-custom{
    opacity:1;

    pointer-events:auto;

    transform:
        scaleX(1);

    filter:
        blur(0);
}


/* Adjust button always remains clickable */
.pricing-base-controls.adjust-mode
.base-adjust-button{
    pointer-events:auto;

    z-index:30;
}

/* =====================================================
   PREMIUM POINTER-ORIGIN BORDER HOVER
===================================================== */


/*
All 3 controls need to be positioning contexts.
*/
.base-choice,
.base-adjust-button{
    position:relative;

    isolation:isolate;
}


/*
Animated coloured border layer.
Starts at the exact point where the pointer entered.
*/
.base-choice::before,
.base-adjust-button::before{

    content:"";

    position:absolute;
    inset:0;

    border-radius:inherit;

    padding:1px;

    pointer-events:none;

    z-index:3;


    /*
    Only keep the 1px outer border portion.
    The middle remains transparent.
    */
    -webkit-mask:
        linear-gradient(#000 0 0)
        content-box,
        linear-gradient(#000 0 0);

    -webkit-mask-composite:
        xor;

    mask-composite:
        exclude;


    /*
    Initially invisible at the pointer location.
    */
    clip-path:
        circle(
            0%
            at
            var(--hover-x, 50%)
            var(--hover-y, 50%)
        );


    transition:
        clip-path
        .55s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        );
}


/* LOW BASE hover = RED */
.base-low::before{
    background:#ff6677;
}


/* MEDIUM BASE hover = AMBER */
.base-medium::before{
    background:#ffc94f;
}


/* HIGH BASE hover = GREEN */
.base-high::before{
    background:#3de1a1;
}

/* ADJUST hover = YELLOW */
.base-adjust-button::before{

    background:
        #ffd65b;
}


/*
Spread outward from pointer position.
*/
/* Hover border animation ONLY when NOT selected */
.base-choice:not(.active):hover::before,
.base-adjust-button:not(.active):hover::before{

    clip-path:
        circle(
            160%
            at
            var(--hover-x, 50%)
            var(--hover-y, 50%)
        );
}

/* Selected controls have NO hover-border animation */
.base-choice.active::before,
.base-adjust-button.active::before{

    clip-path:
        circle(
            0%
            at
            var(--hover-x, 50%)
            var(--hover-y, 50%)
        ) !important;

    transition:none !important;
}

/*
Slight premium glow as the border arrives.
*/
.base-low:not(.active):hover{

    box-shadow:
        0 8px 26px
        rgba(
            255,
            102,
            119,
            .08
        );
}

.base-medium:not(.active):hover{
    box-shadow:
        0 8px 26px
        rgba(255,201,79,.08);
}



.base-high:not(.active):hover{

    box-shadow:
        0 8px 26px
        rgba(
            61,
            225,
            161,
            .08
        );
}


.base-adjust-button:not(.active):hover{

    box-shadow:
        0 8px 24px
        rgba(
            255,
            214,
            91,
            .08
        );
}


/*
Keep selected button styling stronger
than normal hover styling.
*/
.base-low.active{

    border-color:
        rgba(
            255,
            88,
            108,
            .95
        );
}


/* =====================================================
   MEDIUM ACTIVE — AMBER
===================================================== */

.base-medium.active{
    color:#ffd369;

    border-color:
        rgba(255,196,70,.95);

    background:#211b10;

    box-shadow:
        0 0 0 1px
        rgba(255,196,70,.16),

        0 8px 24px
        rgba(170,115,20,.08);
}



.base-medium.active{
    border-color:
        rgba(255,196,70,.95);
}


.base-medium:not(.active):hover span{
    color:#ffd369;
}


.base-high.active{

    border-color:
        rgba(
            57,
            226,
            162,
            .95
        );
}


.base-adjust-button.active{

    border-color:
        rgba(
            255,
            205,
            72,
            .98
        );
}

/* =====================================================
   HOVER TEXT COLOUR
   Only when NOT selected
===================================================== */

.base-low:not(.active):hover span{
    color:#ff8292;
}

.base-high:not(.active):hover span{
    color:#65eebe;
}

.base-adjust-button:not(.active):hover{
    color:#ffd65b;
}


/* =====================================================
   PLATFORM PRICE COMPARISON
===================================================== */

.platform-comparison-card{
    min-height:340px;
}


/* Keep same card/table width */
.platform-comparison-table{
    width:100%;
    table-layout:fixed;
}


/* Column sizes */
.platform-comparison-table th:nth-child(1),
.platform-comparison-table td:nth-child(1){
    width:31%;
}


.platform-comparison-table th:nth-child(2),
.platform-comparison-table td:nth-child(2){
    width:23%;
}


.platform-comparison-table th:nth-child(3),
.platform-comparison-table td:nth-child(3){
    width:26%;
}


.platform-comparison-table th:nth-child(4),
.platform-comparison-table td:nth-child(4){
    width:20%;
}


/* Slightly taller rows than old table */
.platform-comparison-table th{
    padding:
        11px
        10px;
}


.platform-comparison-table td{
    padding:
        13px
        10px;

    vertical-align:middle;
}


/* =====================================================
   STORE
===================================================== */

.platform-store{
    display:flex;

    align-items:center;

    gap:9px;

    min-width:0;

    color:#e7edf7;

    font-size:13px;

    font-weight:700;
}


.platform-store-mark{
    width:25px;
    height:25px;

    flex:
        0 0 25px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:7px;

    border:
        1px solid #2c3f55;

    background:#0c1723;

    color:#9cacc0;

    font-size:10px;
    font-weight:900;
}


/* Own Shopify row */
.platform-row-own{
    background:
        linear-gradient(
            90deg,
            rgba(
                61,
                225,
                161,
                .045
            ),
            transparent
        );
}


.platform-store-mark.shopify{
    color:#62e8b6;

    border-color:
        rgba(
            61,
            225,
            161,
            .34
        );

    background:
        rgba(
            61,
            225,
            161,
            .08
        );
}


/* Platform accent marks */

.platform-store-mark.amazon{
    color:#ffbf55;
}


.platform-store-mark.ebay{
    color:#77aaff;
}


.platform-store-mark.neshome{
    color:#bd98ff;
}


.platform-store-mark.bnq{
    color:#ff7d87;
}

.platform-store-mark.onbuy{
    color:#64d9ff;

    border-color:
        rgba(
            100,
            217,
            255,
            .34
        );

    background:
        rgba(
            100,
            217,
            255,
            .08
        );
}


.platform-store-mark.manob2b{
    color:#7fe89c;

    border-color:
        rgba(
            127,
            232,
            156,
            .34
        );

    background:
        rgba(
            127,
            232,
            156,
            .08
        );
}


.platform-store-mark.manob2c{
    color:#ff9d66;

    border-color:
        rgba(
            255,
            157,
            102,
            .34
        );

    background:
        rgba(
            255,
            157,
            102,
            .08
        );
}


/* =====================================================
   PRICES
===================================================== */

.platform-price{
    color:#edf3fb;

    font-size:11px;

    font-weight:700;

    font-variant-numeric:
        tabular-nums;
}


.platform-price-empty,
.platform-rate-empty{
    color:#526176;
}
.platform-comparison-table
td:nth-child(4){
    color:#526176;
}

/* =====================================================
   RATE POSITION
===================================================== */

.platform-rate-position{
    display:inline-flex;

    align-items:center;

    gap:6px;

    min-width:70px;

    font-size:10px;

    font-weight:800;
}


.platform-rate-position svg{
    width:15px;
    height:15px;

    fill:none;

    stroke:currentColor;

    stroke-width:2;

    stroke-linecap:round;
    stroke-linejoin:round;
}


/* Higher implied pricing base */
.platform-rate-position.higher{
    color:#3de1a1;
}


/* Lower implied pricing base */
.platform-rate-position.lower{
    color:#ff6677;
}


/* Essentially same implied base */
.platform-rate-position.equal{
    color:#ffbf4a;
}

/* =====================================================
   SHOPIFY PRICE WRITE CARD
===================================================== */

.shopify-write-card{
    min-height:315px;
    overflow:hidden;
}


.shopify-write-viewport{
    width:100%;
    min-height:313px;

    overflow:hidden;

    border-radius:inherit;
}


.shopify-write-track{
    width:300%;

    display:flex;

    transform:
        translateX(0);

    transition:
        transform
        .48s
        cubic-bezier(
            .22,
            1,
            .36,
            1
        );

    will-change:transform;
}


.shopify-write-track.confirming{
    transform:
        translateX(-33.3333%);
}



.shopify-write-track.success{
    transform:
        translateX(-66.6667%);
}


.shopify-write-page{
    width:33.3333%;
    flex:0 0 33.3333%;

    min-height:313px;

    padding:17px;

    position:relative;
}

/* =====================================================
   EMPTY / NOT FOUND
===================================================== */

.shopify-write-empty{
    min-height:185px;

    display:flex;

    align-items:center;
    justify-content:center;

    text-align:center;

    color:#68778b;

    font-size:11px;

    border:
        1px dashed
        #26384b;

    border-radius:11px;

    background:
        rgba(
            8,
            16,
            25,
            .45
        );
}


.shopify-not-found{
    color:#8e9baf;
}


.shopify-not-found strong{
    display:block;

    margin-bottom:7px;

    color:#d7e0ec;

    font-size:13px;
}


/* =====================================================
   CURRENT SHOPIFY PRICES
===================================================== */

.shopify-current-label{
    margin-bottom:8px;

    color:#74849a;

    font-size:9px;
    font-weight:800;

    letter-spacing:.10em;

    text-transform:uppercase;
}


.shopify-current-prices{
    display:grid;

    grid-template-columns:
        1fr
        1fr;

    gap:9px;

    margin-bottom:15px;
}


.shopify-current-price-box{
    padding:11px 12px;

    border:
        1px solid
        #233448;

    border-radius:10px;

    background:#09131e;
}


.shopify-current-price-box span{
    display:block;

    margin-bottom:5px;

    color:#7f8da1;

    font-size:9px;
}


.shopify-current-price-box strong{
    color:#edf3fb;

    font-size:17px;

    font-variant-numeric:
        tabular-nums;
}


/* =====================================================
   PRICE CHANGE
===================================================== */

.shopify-change-panel{
    padding:12px;

    border:
        1px solid
        #263b50;

    border-radius:11px;

    background:
        linear-gradient(
            180deg,
            rgba(
                27,
                61,
                93,
                .13
            ),
            rgba(
                8,
                16,
                25,
                .32
            )
        );
}


.shopify-change-label{
    margin-bottom:5px;

    color:#91a0b4;

    font-size:10px;
}


.shopify-change-values{
    display:flex;

    align-items:center;

    gap:0px;

    margin-bottom:12px;
}


.shopify-old-price{
    color:#8998aa;

    font-size:16px;
    font-weight:800;

    text-decoration:
        line-through;
}


.shopify-price-arrow{
    color:#526b87;

    font-size:16px;
}


.shopify-new-price{
    color:#5bf0b5;

    font-size:21px;
    font-weight:900;
}


/* =====================================================
   COMPARE AT CHECKBOX
===================================================== */

.shopify-compare-option{
    display:flex;

    align-items:flex-start;

    gap:10px;

    margin:0;

    padding:12px 14px;

    min-height:100%;

    border:
        1px solid
        #233448;

    border-radius:10px;

    background:
        rgba(
            9,
            19,
            30,
            .72
        );

    cursor:pointer;
}

.shopify-compare-option input{
    width:17px;
    height:17px;

    margin-top:2px;

    accent-color:#4da3ff;

    cursor:pointer;

    flex:0 0 auto;
}

.shopify-compare-option-text{
    display:block;

    color:#aab6c5;

    font-size:11px;
    line-height:1.45;
}

.shopify-compare-option-text strong{
    display:block;

    margin-top:4px;

    color:#d8e1ed;

    font-size:12px;

    font-variant-numeric:tabular-nums;
}


/* =====================================================
   CHANGE BUTTON
===================================================== */

.shopify-change-button{
    width:100%;
    height:39px;

    border:
        1px solid
        #347fd0;

    border-radius:9px;

    background:
        linear-gradient(
            180deg,
            #288cf1,
            #1768c7
        );

    color:#fff;

    font-weight:800;
    font-size:11px;

    cursor:pointer;
}


.shopify-change-button:disabled{
    opacity:.42;

    cursor:not-allowed;
}


/* =====================================================
   YELLOW CONFIRMATION PAGE
===================================================== */

.shopify-write-confirm-page{
    display:flex;
    flex-direction:column;

    align-items:stretch;
    justify-content:flex-start;

    gap:18px;

    padding:36px 40px 32px;

    text-align:center;

    background:
        radial-gradient(
            circle at 50% 14%,
            rgba(255, 217, 92, .22) 0%,
            rgba(255, 217, 92, .07) 28%,
            transparent 58%
        ),
        linear-gradient(
            180deg,
            #2b240d 0%,
            #171309 100%
        );

    border-left:
        1px solid
        rgba(255, 205, 72, .34);
}


/* animated warning icon */
.shopify-confirm-warning{
    position:relative;

    width:76px;
    height:76px;

    display:flex;
    align-items:center;
    justify-content:center;

    align-self:center;

    margin-top:4px;

    border:1px solid #ffd65b;
    border-radius:50%;

    color:#ffd65b;

    font-size:38px;
    font-weight:900;
    line-height:1;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(255, 214, 91, .18),
            rgba(255, 214, 91, .03) 65%,
            transparent 100%
        );

    box-shadow:
        0 0 24px rgba(255, 204, 70, .16),
        inset 0 0 16px rgba(255, 215, 100, .06);

    animation:
        shopifyWarningFloat 2s ease-in-out infinite;
}

.shopify-confirm-warning::before{
    content:"";

    position:absolute;
    inset:-10px;

    border-radius:50%;
    border:1px solid rgba(255, 214, 91, .35);

    animation:
        shopifyWarningPulse 2s ease-out infinite;
}

.shopify-confirm-warning::after{
    content:"";

    position:absolute;
    inset:-20px;

    border-radius:50%;
    border:1px solid rgba(255, 214, 91, .16);

    animation:
        shopifyWarningPulse 2s ease-out infinite .55s;
}


.shopify-confirm-title{
    align-self:center;

    color:#ffe9a4;

    font-size:44px;
    font-weight:900;
    line-height:1.05;
    letter-spacing:-.02em;

    text-shadow:
        0 0 18px rgba(255, 228, 142, .10);
}


/* outer summary wrapper */
.shopify-confirm-summary{
    width:100%;

    margin-top:5px;
    padding:0;

    border:0;
    border-radius:0;

    background:none;
    color:#f2e7be;
}


/* new structured card */
.shopify-confirm-summary-card{
    width:100%;

    padding:28px 26px 24px;

    border:
        1px solid
        rgba(255, 205, 72, .22);

    border-radius:18px;

    background:
        linear-gradient(
            180deg,
            rgba(255, 210, 92, .05),
            rgba(0, 0, 0, .15)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.02);
}

.shopify-confirm-sku{
    margin-bottom:22px;

    color:#fff1bb;

    font-size:24px;
    font-weight:900;
    line-height:1.25;
    letter-spacing:-.01em;
    word-break:break-word;
}

.shopify-confirm-row{
    display:grid;
    grid-template-columns:1fr 70px 1fr;
    gap:16px;
    align-items:center;

    margin-top:16px;
}

.shopify-confirm-row:first-of-type{
    margin-top:0;
}

.shopify-confirm-price-box{
    padding:18px 18px 16px;

    border:
        1px solid
        rgba(255, 210, 100, .10);

    border-radius:14px;

    background:
        rgba(255,255,255,.02);

    text-align:center;
}

.shopify-confirm-price-box--target{
    border-color:rgba(255, 213, 97, .24);

    background:
        linear-gradient(
            180deg,
            rgba(255, 213, 97, .08),
            rgba(255, 213, 97, .03)
        );
}

.shopify-confirm-kicker{
    display:block;

    margin-bottom:10px;

    color:#b8aa76;

    font-size:12px;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.shopify-confirm-price-box strong{
    display:block;

    color:#fff4c8;

    font-size:34px;
    font-weight:900;
    line-height:1.05;
    letter-spacing:-.02em;
}

.shopify-confirm-price-box--target strong{
    color:#ffd96f;
}

.shopify-confirm-row-arrow{
    display:flex;
    align-items:center;
    justify-content:center;

    color:#ffd86e;

    font-size:34px;
    font-weight:900;

    text-shadow:
        0 0 16px rgba(255, 216, 110, .16);
}

.shopify-confirm-note{
    margin-top:18px;

    padding:14px 16px;

    border:
        1px dashed
        rgba(255, 213, 97, .20);

    border-radius:12px;

    background:
        rgba(255,255,255,.015);

    color:#d8c992;

    font-size:14px;
    font-weight:700;
    line-height:1.5;
}


.shopify-confirm-button{
    width:100%;
    height:64px;

    margin-top:2px;

    border:1px solid #ffd65b;
    border-radius:16px;

    background:
        linear-gradient(
            180deg,
            #f0bf37 0%,
            #d49e1b 100%
        );

    color:#171104;

    font-size:20px;
    font-weight:900;
    letter-spacing:-.01em;

    box-shadow:
        0 14px 30px rgba(212, 158, 27, .16),
        inset 0 1px 0 rgba(255,255,255,.25);

    cursor:pointer;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease;
}

.shopify-confirm-button:hover{
    filter:brightness(1.03);

    box-shadow:
        0 18px 34px rgba(212, 158, 27, .22),
        inset 0 1px 0 rgba(255,255,255,.25);
}

.shopify-confirm-button:disabled{
    opacity:.50;
    cursor:wait;
}


.shopify-confirm-back{
    align-self:center;

    margin-top:2px;
    padding:8px 14px;

    border:0;
    background:none;

    color:#bcae76;

    font-size:14px;
    font-weight:700;

    cursor:pointer;

    transition:
        color .18s ease,
        opacity .18s ease;
}

.shopify-confirm-back:hover{
    color:#fff0ac;
}


/* animations */
@keyframes shopifyWarningPulse{
    0%{
        transform:scale(.88);
        opacity:0;
    }

    30%{
        opacity:.75;
    }

    100%{
        transform:scale(1.16);
        opacity:0;
    }
}

@keyframes shopifyWarningFloat{
    0%,
    100%{
        transform:translateY(0);
        box-shadow:
            0 0 24px rgba(255, 204, 70, .16),
            inset 0 0 16px rgba(255, 215, 100, .06);
    }

    50%{
        transform:translateY(-5px);
        box-shadow:
            0 0 34px rgba(255, 204, 70, .22),
            inset 0 0 16px rgba(255, 215, 100, .08);
    }
}


/* responsive */
@media (max-width: 900px){

    .shopify-write-confirm-page{
        padding:28px 20px 24px;
        gap:16px;
    }

    .shopify-confirm-title{
        font-size:25px;
    }

    .shopify-confirm-sku{
        font-size:20px;
    }

    .shopify-confirm-row{
        grid-template-columns:1fr;
        gap:12px;
    }

    .shopify-confirm-row-arrow{
        transform:rotate(90deg);
        font-size:28px;
    }

    .shopify-confirm-price-box strong{
        font-size:28px;
    }

    .shopify-confirm-button{
        height:58px;
        font-size:18px;
    }
}

/* =====================================================
   SHOPIFY PRICE UPDATE — FINAL UI POLISH
===================================================== */


/* =====================================================
   MAIN CARD
===================================================== */

.shopify-write-card{
    position:relative;

    border:
        1px solid
        #22354a !important;

    border-radius:22px;

    background:
        linear-gradient(
            180deg,
            #0e1825 0%,
            #0a131e 100%
        );

    box-shadow:
        0 18px 50px
        rgba(0,0,0,.26);

    overflow:hidden;
}





.shopify-write-page{
    padding:16px 26px 10px 26px !important;
}


/* =====================================================
   HEADER
===================================================== */

.shopify-write-card .panel-title{
    margin-bottom:8px;
}


.shopify-write-card .panel-title h3{
    margin:0 0 7px;

    color:#f3f7fc;

    font-size:19px;
    font-weight:850;

    letter-spacing:-.02em;
}


.shopify-write-card .panel-title small{
    color:#8493a7;

    font-size:12px;
}


/* =====================================================
   CURRENT SHOPIFY LABEL
===================================================== */

.shopify-current-label{
    margin-bottom:11px;

    color:#8797ad;

    font-size:10px;
    font-weight:900;

    letter-spacing:.12em;

    text-transform:uppercase;
}


/* =====================================================
   CURRENT PRICE BOXES
===================================================== */

.shopify-current-prices{
    gap:13px;

    margin-bottom:8px;
}


.shopify-current-price-box{
    position:relative;

    min-height:70px;

    padding:10px 18px;

    display:flex;
    flex-direction:column;
    justify-content:center;

    border:
        1px solid
        #263d55;

    border-radius:15px;

    background:
        linear-gradient(
            145deg,
            rgba(9,22,34,.96),
            rgba(7,17,27,.96)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.025);
}


.shopify-current-price-box span{
    margin-bottom:0px;

    color:#8191a5;

    font-size:10px;
    font-weight:600;
}


.shopify-current-price-box strong{
    color:#eef5fd;

    font-size:24px;
    font-weight:900;

    letter-spacing:-.025em;
}


/* =====================================================
   CHANGE PRICE PANEL
===================================================== */

.shopify-change-panel{
    padding:14px;

    border:
        1px solid
        #263b50;

    border-radius:11px;

    background:
        linear-gradient(
            180deg,
            rgba(
                27,
                61,
                93,
                .13
            ),
            rgba(
                8,
                16,
                25,
                .32
            )
        );
}

.shopify-change-top{
    display:grid;

    grid-template-columns:
        minmax(0, 1fr)
        290px;

    gap:18px;

    align-items:center;

    margin-bottom:5px;
}

.shopify-change-main{
    min-width:0;
}

.shopify-change-label{
    margin-bottom:12px;

    color:#8999ad;

    font-size:11px;
    font-weight:600;
}


.shopify-change-values{
    display:flex;

    align-items:center;

    gap:0px;

    margin-bottom:0;

    flex-wrap:wrap;
}


.shopify-old-price{
    color:#78899d;

    font-size:21px;
    font-weight:800;

    text-decoration:
        line-through;

    text-decoration-thickness:2px;
}


.shopify-price-arrow{
    color:#50708f;

    font-size:20px;
}


.shopify-new-price{
    color:#45efae;

    font-size:27px;
    font-weight:950;

    letter-spacing:-.035em;

    text-shadow:
        0 0 22px
        rgba(69,239,174,.12);
}


/* =====================================================
   COMPARE-AT CHECKBOX
===================================================== */

.shopify-compare-option{
    align-items:center;

    gap:11px;

    margin:
        4px
        0
        18px;

    padding:10px 11px;

    border-radius:10px;

    transition:
        background .18s ease;
}


.shopify-compare-option:hover{
    background:
        rgba(255,255,255,.025);
}


.shopify-compare-option input{
    width:18px;
    height:18px;

    flex:0 0 18px;

    margin:0;

    accent-color:#3d9cff;
}


.shopify-compare-option-text{
    color:#a7b4c5;

    font-size:15px;
}


.shopify-compare-option-text strong{
    margin-top:4px;

    color:#dce6f2;

    font-size:24px;
}


/* =====================================================
   CHANGE PRICE BUTTON
===================================================== */

.shopify-change-button{
    height:48px;

    border:
        1px solid
        #378fe8;

    border-radius:12px;

    background:
        linear-gradient(
            180deg,
            #268df3,
            #176bcc
        );

    box-shadow:
        0 8px 22px
        rgba(27,112,211,.20);

    color:#fff;

    font-size:12px;
    font-weight:850;

    transition:
        transform .16s ease,
        box-shadow .16s ease,
        filter .16s ease;
}


.shopify-change-button:not(:disabled):hover{
    transform:
        translateY(-1px);

    filter:
        brightness(1.07);

    box-shadow:
        0 12px 28px
        rgba(27,112,211,.28);
}


/* much cleaner disabled state */
.shopify-change-button:disabled{
    border-color:#263c52;

    background:
        linear-gradient(
            180deg,
            #172b3d,
            #112438
        );

    box-shadow:none;

    color:#71839a;

    opacity:1;

    cursor:not-allowed;
}



/* =====================================================
   MULTIPLE SHOPIFY PRODUCT SELECTOR
===================================================== */

.shopify-write-card
.shopify-candidate-button{

    width:100%;

    min-height:92px;

    display:grid;

    grid-template-columns:
        64px
        minmax(0,1fr)
        auto;

    align-items:center;

    gap:15px;

    padding:
        13px
        16px;

    margin:0;

    border:
        1px solid
        #263b51 !important;

    border-radius:14px;

    background:
        linear-gradient(
            145deg,
            #0c1824,
            #09131e
        ) !important;

    color:#dce6f3 !important;

    text-align:left;

    appearance:none;

    cursor:pointer;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.025);

    transition:
        border-color .18s ease,
        background .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}


/* REMOVE THE BIG WHITE DEFAULT BUTTON LOOK */
.shopify-write-card
.shopify-candidate-button:hover{

    transform:
        translateY(-1px);

    border-color:
        #3c82c7 !important;

    background:
        linear-gradient(
            145deg,
            #102439,
            #0a1928
        ) !important;

    box-shadow:
        0 10px 26px
        rgba(0,0,0,.20);
}


/* PRODUCT IMAGE */
.shopify-write-card
.shopify-candidate-button img{

    width:64px !important;
    height:64px !important;

    object-fit:cover;

    border:
        1px solid
        #31475e;

    border-radius:12px !important;

    background:#fff;

    box-shadow:
        0 4px 14px
        rgba(0,0,0,.25);
}


/* PRODUCT TITLE */
.shopify-write-card
.shopify-candidate-button strong{

    display:block;

    max-width:none;

    margin-bottom:6px;

    overflow:hidden;

    color:#eef5fc !important;

    font-size:13px;
    font-weight:800;

    line-height:1.35;

    text-overflow:ellipsis;

    white-space:normal;
}


/* STATUS / VARIANT */
.shopify-write-card
.shopify-candidate-button small{

    display:block;

    color:#8596aa !important;

    font-size:10px;
    font-weight:700;

    line-height:1.4;

    letter-spacing:.035em;
}


/* SELECT BUTTON / ARROW */
.shopify-write-card
.shopify-candidate-button
> span:last-child{

    min-width:76px;

    padding:
        9px
        12px;

    border:
        1px solid
        rgba(68,157,242,.34);

    border-radius:9px;

    background:
        rgba(46,137,224,.09);

    color:#75baff !important;

    font-size:10px;
    font-weight:850;

    text-align:center;

    white-space:nowrap;

    transition:
        background .18s ease,
        border-color .18s ease,
        color .18s ease;
}


.shopify-write-card
.shopify-candidate-button:hover
> span:last-child{

    border-color:
        rgba(75,166,255,.62);

    background:
        rgba(46,137,224,.18);

    color:#b8dcff !important;
}


/* spacing between duplicate results */
.shopify-write-card
.shopify-candidate-button
+ .shopify-candidate-button{

    margin-top:10px;
}


/* =====================================================
   MULTIPLE RESULT HEADER
===================================================== */

.shopify-write-card
.shopify-current-label{

    color:#8495aa;
}


.shopify-write-card
.shopify-current-label
+ div{

    line-height:1.5;
}


/* =====================================================
   EMPTY STATE
===================================================== */

.shopify-write-empty{

    min-height:200px;

    border:
        1px dashed
        #294058;

    border-radius:14px;

    background:
        linear-gradient(
            145deg,
            rgba(9,20,31,.70),
            rgba(7,15,24,.55)
        );

    color:#718297;

    font-size:11px;
}


/* =====================================================
   SHOPIFY MULTIPLE-RESULT WARNING GLOW
   Show attention when user must choose 1 Shopify product
===================================================== */

.shopify-write-card{
    position:relative;
    isolation:isolate;
}


/* When multiple selectable Shopify results are shown */
.shopify-write-card:has(.shopify-candidate-button){
    border-color:#b88b18 !important;

    box-shadow:
        0 0 0 1px rgba(255, 204, 77, .22),
        0 0 24px rgba(255, 196, 64, .10),
        0 0 54px rgba(255, 196, 64, .08);

    animation:
        shopifyMultipleChoiceBreath 2.35s ease-in-out infinite;
}


/* warm glow overlay */
.shopify-write-card:has(.shopify-candidate-button)::after{
    content:"";

    position:absolute;
    inset:0;

    border-radius:inherit;

    pointer-events:none;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(255, 208, 84, .10) 0%,
            rgba(255, 208, 84, .05) 22%,
            transparent 55%
        );

    box-shadow:
        inset 0 0 0 1px rgba(255, 210, 92, .14);

    opacity:.9;

    animation:
        shopifyMultipleChoiceHalo 2.35s ease-in-out infinite;
}


/* title / label become more warning-like */
.shopify-write-card:has(.shopify-candidate-button) .panel-title h3{
    color:#fff3cf;
    text-shadow:0 0 14px rgba(255, 205, 86, .12);
}

.shopify-write-card:has(.shopify-candidate-button) .panel-title small{
    color:#d5b461;
}

.shopify-write-card:has(.shopify-candidate-button) .shopify-current-label{
    color:#f0c761;
    letter-spacing:.14em;
}


/* candidate cards also get a tiny yellow glow */
.shopify-write-card:has(.shopify-candidate-button) .shopify-candidate-button{
    border-color:#31506d !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.02),
        0 0 0 1px rgba(255, 205, 86, .04);
}

.shopify-write-card:has(.shopify-candidate-button) .shopify-candidate-button:hover{
    border-color:#d4a93a !important;

    box-shadow:
        0 0 0 1px rgba(255, 205, 86, .14),
        0 8px 24px rgba(255, 190, 60, .12);
}


/* select button gets a stronger warning/focus feel */
.shopify-write-card:has(.shopify-candidate-button)
.shopify-candidate-button > span:last-child{
    border-color:rgba(255, 196, 64, .34);
    background:rgba(255, 196, 64, .08);
    color:#ffd978 !important;
}

.shopify-write-card:has(.shopify-candidate-button)
.shopify-candidate-button:hover > span:last-child{
    border-color:rgba(255, 207, 92, .65);
    background:rgba(255, 196, 64, .16);
    color:#fff0bf !important;
}


/* breathing animation */
@keyframes shopifyMultipleChoiceBreath{
    0%{
        border-color:#8f6b15;
        box-shadow:
            0 0 0 1px rgba(255, 204, 77, .12),
            0 0 16px rgba(255, 196, 64, .06),
            0 0 30px rgba(255, 196, 64, .04);
    }

    50%{
        border-color:#f0c34a;
        box-shadow:
            0 0 0 1px rgba(255, 214, 102, .28),
            0 0 30px rgba(255, 196, 64, .14),
            0 0 70px rgba(255, 196, 64, .10);
    }

    100%{
        border-color:#8f6b15;
        box-shadow:
            0 0 0 1px rgba(255, 204, 77, .12),
            0 0 16px rgba(255, 196, 64, .06),
            0 0 30px rgba(255, 196, 64, .04);
    }
}


@keyframes shopifyMultipleChoiceHalo{
    0%{
        opacity:.55;
    }

    50%{
        opacity:1;
    }

    100%{
        opacity:.55;
    }
}

/* =====================================================
   SHOPIFY CONFIRMATION — COMPACT SIZE OVERRIDE
===================================================== */

.shopify-write-confirm-page{
    padding:24px 32px 22px;
    gap:12px;
}


/* animated ! — smaller */
.shopify-confirm-warning{
    width:56px;
    height:56px;

    margin-top:0;

    font-size:28px;
}


/* Are you sure? */
.shopify-confirm-title{
    font-size:29px;
}


/* summary box */
.shopify-confirm-summary-card{
    padding:8px 20px 8px;

    border-radius:14px;
}


/* SKU */
.shopify-confirm-sku{
    margin-bottom:15px;

    font-size:16px;
}


/* price row */
.shopify-confirm-row{
    grid-template-columns:
        1fr
        42px
        1fr;

    gap:10px;

    margin-top:11px;
}


/* price boxes */
.shopify-confirm-price-box{
    padding:7px 14px 7px;

    border-radius:11px;
}


/* Current Price / New Price labels */
.shopify-confirm-kicker{
    margin-bottom:7px;

    font-size:9px;
}


/* actual price */
.shopify-confirm-price-box strong{
    font-size:19px;
}


/* arrow */
.shopify-confirm-row-arrow{
    font-size:24px;
}


/* compare-at unchanged note */
.shopify-confirm-note{
    margin-top:12px;

    padding:10px 12px;

    font-size:11px;
}


/* YES button */
.shopify-confirm-button{
    height:50px;

    border-radius:12px;

    font-size:15px;
}


/* Go back */
.shopify-confirm-back{
    margin-top:0;

    padding:5px 10px;

    font-size:11px;
}

/* =====================================================
   PARENT PRODUCT SUMMARY
===================================================== */

.parent-product-summary{
    display:grid;

    grid-template-columns:
        118px
        minmax(0, 1fr);

    gap:18px;

    align-items:center;

    margin-top:14px;
    margin-bottom:20px;

    padding:16px 18px;

    border:
        1px solid
        #263b50;

    border-radius:14px;

    background:
        linear-gradient(
            145deg,
            rgba(13, 27, 41, .96),
            rgba(8, 18, 28, .96)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.025);
}


.parent-product-summary-image{
    width:118px;
    height:96px;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;

    border:
        1px solid
        #30455c;

    border-radius:12px;

    background:#fff;
}


.parent-product-summary-image
.product-card-image{
    width:100%;
    height:100%;

    object-fit:cover;

    display:block;
}


.parent-product-summary-image
.product-card-image-fallback{
    width:100%;
    height:100%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#0a141f;

    color:#526981;

    font-size:26px;
}


.parent-product-summary-content{
    min-width:0;
}


.parent-product-summary-label{
    margin-bottom:7px;

    color:#718398;

    font-size:9px;
    font-weight:900;

    letter-spacing:.12em;

    text-transform:uppercase;
}


.parent-product-summary-sku{
    margin-bottom:7px;

    color:#f2f6fb;

    font-size:15px;
    font-weight:900;

    letter-spacing:-.015em;
}


.parent-product-summary-title{
    max-width:720px;

    color:#9eacbd;

    font-size:13px;
    line-height:1.45;
}


.parent-product-summary-components{
    display:inline-flex;

    align-items:center;

    margin-top:10px;

    padding:
        5px
        9px;

    border:
        1px solid
        rgba(77,163,255,.20);

    border-radius:999px;

    background:
        rgba(77,163,255,.07);

    color:#8fc0ff;

    font-size:10px;
    font-weight:800;
}

@media(max-width:800px){

    .parent-product-summary{
        grid-template-columns:
            82px
            minmax(0,1fr);

        gap:12px;

        padding:13px;
    }


    .parent-product-summary-image{
        width:82px;
        height:82px;
    }


    .parent-product-summary-sku{
        font-size:15px;
    }


    .parent-product-summary-title{
        font-size:11px;
    }
}

.parent-product-summary{
    display:grid;
    grid-template-columns: 170px minmax(0,1fr);
    gap:24px;
    align-items:center;
    margin-top:18px;
    margin-bottom:26px;
    padding:22px 24px;
    border:1px solid #26415a;
    border-radius:18px;
    background:
        linear-gradient(
            135deg,
            rgba(10,24,39,.94),
            rgba(8,21,35,.98)
        );
}

.parent-product-summary-media{
    display:flex;
    align-items:center;
    justify-content:center;
}

.parent-product-carousel{
    position:relative;
    width:170px;
    height:170px;
    overflow:hidden;
    border-radius:18px;
    border:1px solid #314d67;
    background:#08131e;
}

.parent-product-carousel-track{
    display:flex;
    width:100%;
    height:100%;
    transform:translateX(0%);
}

.parent-product-slide{
    flex:0 0 100%;
    width:100%;
    height:100%;
}

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

#parentProductCarouselFallback{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:34px;
    color:#50657a;
    background:#08131e;
}

.parent-product-carousel-dots{
    position:absolute;
    left:50%;
    bottom:10px;
    transform:translateX(-50%);
    display:flex;
    gap:8px;
    z-index:2;
}

.parent-product-dot{
    width:8px;
    height:8px;
    border:none;
    border-radius:999px;
    background:rgba(255,255,255,.30);
    cursor:pointer;
    transition:
        transform .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}

.parent-product-dot.active{
    background:#7ec3ff;
    transform:scale(1.15);
    box-shadow:0 0 10px rgba(126,195,255,.35);
}

.parent-product-summary-content{
    min-width:0;
}

.parent-product-summary-label{
    margin-bottom:8px;
    color:#8295aa;
    font-size:12px;
    font-weight:900;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.parent-product-summary-sku{
    margin-bottom:8px;
    color:#f4f8fd;
    font-size:15px;
    font-weight:900;
    letter-spacing:-.02em;
}

.parent-product-summary-title{
    color:#a8b7c8;
    font-size:15px;
    line-height:1.45;
}

.parent-product-summary-components{
    display:inline-flex;
    align-items:center;
    margin-top:14px;
    margin-bottom:16px;
    padding:6px 12px;
    border:1px solid rgba(111,182,255,.22);
    border-radius:999px;
    background:rgba(77,163,255,.08);
    color:#8fc0ff;
    font-size:12px;
    font-weight:800;
}

.parent-product-summary-meta-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:12px;
}

.parent-product-meta-card{
    min-width:0;
    padding:12px 14px;
    border:1px solid #20374d;
    border-radius:14px;
    background:rgba(255,255,255,.02);
}

.parent-product-meta-label{
    margin-bottom:6px;
    color:#6f8298;
    font-size:10px;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.parent-product-meta-value{
    color:#eef4fb;
    font-size:12px;
    font-weight:800;
    line-height:1.35;
}

@media(max-width:900px){

    .parent-product-summary{
        grid-template-columns:1fr;
    }

    .parent-product-summary-media{
        justify-content:flex-start;
    }

    .parent-product-carousel{
        width:140px;
        height:140px;
    }

    .parent-product-summary-meta-grid{
        grid-template-columns:1fr;
    }
}

/* =====================================================
   TOP PLATFORM SUMMARY CARDS
===================================================== */

.platform-summary-strip{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:18px;
}

.platform-summary-card{
  position:relative;
  overflow:hidden;
  min-height:90px;
  padding:12px 22px 0px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:22px;
  background:
    linear-gradient(180deg, rgba(8,20,40,0.94), rgba(5,14,28,0.98));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 10px 28px rgba(0,0,0,0.25);
}

.platform-summary-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.05), transparent 55%);
  opacity:0.9;
}

.platform-summary-card.amazon{
  --platform-accent:#ffbf4a;
  --platform-soft:rgba(255,191,74,0.18);
  --platform-border:rgba(255,191,74,0.40);
}

.platform-summary-card.ebay{
  --platform-accent:#78afff;
  --platform-soft:rgba(120,175,255,0.18);
  --platform-border:rgba(120,175,255,0.40);
}

.platform-summary-card.neshome{
  --platform-accent:#b487ff;
  --platform-soft:rgba(180,135,255,0.18);
  --platform-border:rgba(180,135,255,0.40);
}

.platform-summary-card.bnq{
  --platform-accent:#ff7b98;
  --platform-soft:rgba(255,123,152,0.18);
  --platform-border:rgba(255,123,152,0.40);
}

.platform-summary-card.amazon,
.platform-summary-card.ebay,
.platform-summary-card.neshome,
.platform-summary-card.bnq{
  border-color:var(--platform-border);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 0 0 1px rgba(255,255,255,0.015),
    0 12px 30px rgba(0,0,0,0.22),
    0 0 28px var(--platform-soft);
}

.platform-summary-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:0px;
  position:relative;
  z-index:2;
}

.platform-summary-badge{
  width:38px;
  height:38px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  font-weight:800;
  border:1px solid currentColor;
  background:rgba(255,255,255,0.03);
}

.platform-summary-badge.amazon{ color:#ffbf4a; }
.platform-summary-badge.ebay{ color:#78afff; }
.platform-summary-badge.neshome{ color:#b487ff; }
.platform-summary-badge.bnq{ color:#ff7b98; }

.platform-summary-store{
  font-size:18px;
  font-weight:800;
  color:#eef5ff;
  letter-spacing:0.01em;
}

.platform-summary-flip{
  position:relative;
  height:75px;
  perspective:1200px;
  z-index:2;
}

.platform-summary-flip-inner{
  position:relative;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  animation:platformSummaryFlip 6.5s ease-in-out infinite;
}

.platform-summary-face{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:4px 2px;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

.platform-summary-face-back{
  transform:rotateX(180deg);
}

.platform-summary-caption{
  font-size:12px;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:rgba(220,232,248,0.60);
}

.platform-summary-value{
  font-size:34px;
  font-weight:900;
  line-height:1;
  color:var(--platform-accent);
  letter-spacing:-0.03em;
}

.platform-summary-rate-wrap{
  min-height:40px;
  display:flex;
  align-items:center;
}

.platform-summary-rate{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:18px;
  font-weight:800;
  color:var(--platform-accent);
}

.platform-summary-rate svg{
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.platform-summary-rate-empty{
  font-size:20px;
  font-weight:700;
  color:rgba(220,232,248,0.50);
}

@keyframes platformSummaryFlip{
  0%, 38%{
    transform:rotateX(0deg);
  }
  46%, 84%{
    transform:rotateX(180deg);
  }
  100%{
    transform:rotateX(360deg);
  }
}

@media (max-width: 1280px){
  .platform-summary-strip{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px){
  .platform-summary-strip{
    grid-template-columns:1fr;
  }

  .platform-summary-value{
    font-size:30px;
  }
}

/* =====================================================
   CSV PRICE SOURCE — FIFTH CARD
===================================================== */



.platform-summary-badge.csv{
    color:#3de1a1;
}







.csv-summary-dot{
    width:7px;
    height:7px;

    border-radius:50%;

    background:#3de1a1;

    box-shadow:
        0 0 9px
        rgba(61,225,161,.55);
}

/* =====================================================
   PLATFORM CARDS — LEFT → RIGHT BORDER WAVE
===================================================== */

/*
Use ::after as a thin border-only light beam.

Important:
platform cards already inherit .card::after,
so this intentionally overrides that effect
for these 5 cards only.
*/
.platform-summary-card::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    padding:1.5px;

    pointer-events:none;

    z-index:10;

    /*
    Bright narrow beam.
    It moves horizontally from
    left side → right side.
    */
    background:
        linear-gradient(
            90deg,

            transparent 0%,
            transparent 25%,

            var(--platform-accent) 42%,
            var(--platform-accent) 58%,

            transparent 75%,
            transparent 100%
        );

    background-size:
        260% 100%;

    background-position:
        135% 0;


    /*
    Keep ONLY the border.
    Centre of card stays untouched.
    */
    -webkit-mask:
        linear-gradient(#000 0 0)
        content-box,

        linear-gradient(#000 0 0);

    -webkit-mask-composite:
        xor;

    mask-composite:
        exclude;


    opacity:0;

    filter:
        drop-shadow(
            0 0 5px
            var(--platform-accent)
        );


    /*
    Override old .card hover sheen
    */
    transform:none !important;

    transition:none !important;


    animation:
        platformBorderWave
        2s
        linear
        infinite;
}


.platform-summary-card:nth-child(1)::after{
    animation-delay:0s;
}

.platform-summary-card:nth-child(2)::after{
    animation-delay:0.2s;
}

.platform-summary-card:nth-child(3)::after{
    animation-delay:0.4s;
}

.platform-summary-card:nth-child(4)::after{
    animation-delay:0.6s;
}

.platform-summary-card:nth-child(5)::after{
    animation-delay:0.8s;
}

/* =====================================================
   ACTUAL CONTINUOUS WAVE
===================================================== */

@keyframes platformBorderWave{

    0%{
        opacity:0;
        background-position:115% 0;
    }

    2%{
        opacity:1;
    }

    18%{
        opacity:1;
        background-position:0% 0;
    }

    24%{
        opacity:1;
        background-position:-35% 0;
    }

    28%{
        opacity:0;
        background-position:-55% 0;
    }

    100%{
        opacity:0;
        background-position:-55% 0;
    }
}




.shopify-compare-option{
    align-items: center;
    gap: 11px;
    margin: 4px 0 26px;
    padding: 10px 11px;
    border-radius: 10px;
    transition: background .18s ease;
}

.shopify-write-card .shopify-candidate-button + .shopify-candidate-button{

    margin-top: 3px;
}

/* =====================================================
   CALCULATOR MODE SWITCH
===================================================== */

.calculator-mode-switch{
    position:relative;

    width:178px;
    height:42px;

    display:grid;
    grid-template-columns:1fr 1fr;

    padding:4px;

    border:
        1px solid
        #29415c;

    border-radius:12px;

    background:
        rgba(7,14,23,.78);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.035),

        0 8px 24px
        rgba(0,0,0,.18);

    overflow:hidden;

    isolation:isolate;
}


/* MOVING ACTIVE PILL */

.calculator-mode-slider{
    position:absolute;

    top:4px;
    left:4px;

    width:
        calc(
            50% - 4px
        );

    height:
        calc(
            100% - 8px
        );

    border-radius:9px;

    background:
        linear-gradient(
            135deg,
            #238cff,
            #176bd8
        );

    border:
        1px solid
        rgba(115,188,255,.55);

    box-shadow:
        0 0 0 1px
        rgba(54,145,255,.12),

        0 5px 16px
        rgba(23,107,216,.34),

        inset 0 1px 0
        rgba(255,255,255,.18);

    z-index:0;

    transform:
        translateX(0);

    transition:
        transform
        .48s
        cubic-bezier(
            .34,
            1.56,
            .64,
            1
        ),

        box-shadow
        .3s ease;
}


/* BULK POSITION */

.calculator-mode-switch[data-mode="bulk"]
.calculator-mode-slider{

    transform:
        translateX(100%);
}


/* BUTTONS */

.calculator-mode-option{
    position:relative;

    z-index:2;

    border:0;
    outline:0;

    background:transparent;

    color:#74869b;

    cursor:pointer;

    font-size:12px;
    font-weight:700;

    letter-spacing:.01em;

    border-radius:8px;

    transition:
        color .25s ease,
        transform .25s ease,
        text-shadow .25s ease;
}


.calculator-mode-option:hover{
    color:#dce9f8;
}


.calculator-mode-option.active{
    color:#ffffff;

    text-shadow:
        0 0 12px
        rgba(255,255,255,.25);
}


/* TINY PRESS FEEL */

.calculator-mode-option:active{
    transform:
        scale(.94);
}

/* =====================================================
   ALFRED MODE TRANSITION
   SINGLE -> BULK FOCUS COLLAPSE
===================================================== */


/* -----------------------------------------------------
   CALCULATOR SHELL
----------------------------------------------------- */

.card.calculator{
    isolation:isolate;

    transition:
        border-color .6s ease,
        box-shadow .6s ease,
        background .6s ease;
}


/* -----------------------------------------------------
   COLLAPSIBLE SINGLE MODE AREA
----------------------------------------------------- */

.single-mode-collapse{
    display:grid;

    grid-template-rows:1fr;

    transition:
        grid-template-rows
        .72s
        cubic-bezier(.22,1,.36,1);
}


.single-mode-stage{
    min-height:0;

    overflow:hidden;

    opacity:1;

    filter:
        blur(0);

    transform:
        translateY(0);

    transform-origin:
        50% 0%;

    will-change:
        transform,
        opacity,
        filter;

    transition:
        opacity
        .52s
        ease,

        filter
        .58s
        ease,

        transform
        .58s
        cubic-bezier(.22,.8,.24,1);
}

/* -----------------------------------------------------
   INDIVIDUAL CONTENT LAYERS
----------------------------------------------------- */

.single-mode-stage > *{
    opacity:1;

    transform:
        translateY(0);

    transition:
        opacity
        .48s
        ease,

        transform
        .58s
        cubic-bezier(.22,.8,.24,1);
}


/* Slight staged entrance when returning to Single */

.single-mode-stage > *:nth-child(1){
    transition-delay:.02s;
}

.single-mode-stage > *:nth-child(2){
    transition-delay:.05s;
}

.single-mode-stage > *:nth-child(3){
    transition-delay:.08s;
}

.single-mode-stage > *:nth-child(4){
    transition-delay:.11s;
}

.single-mode-stage > *:nth-child(5){
    transition-delay:.14s;
}


/* =====================================================
   BULK MODE
===================================================== */

.calculator[data-mode="bulk"]{
    border-color:
        rgba(55,132,210,.48);

    box-shadow:
        0 22px 70px
        rgba(0,0,0,.38),

        0 0 0 1px
        rgba(72,157,255,.06),

        inset 0 1px 0
        rgba(255,255,255,.025);
}


/* Collapse the entire lower workspace */

.calculator[data-mode="bulk"]
.single-mode-collapse{

    grid-template-rows:0fr;

    /*
    IMPORTANT:
    Give the 3D exit time to actually happen
    before collapsing the physical height.
    */
    transition-delay:.50s;
}


/* Depth / blur exit */

.calculator[data-mode="bulk"]
.single-mode-stage{

    opacity:0;

    filter:
        blur(10px)
        brightness(.78);

    transform:
        translateY(24px);

    pointer-events:none;
}


/* Make each section fall away slightly */

.calculator[data-mode="bulk"]
.single-mode-stage > *{

    opacity:0;

    transform:
        translateY(18px);

    transition-delay:0s;
}

/* -----------------------------------------------------
   KEEP THE SEARCH AREA AS THE FOCUS
----------------------------------------------------- */

.search-product{
    transition:
        transform
        .58s
        cubic-bezier(.22,1,.36,1),

        margin
        .58s
        cubic-bezier(.22,1,.36,1);
}


.calculator[data-mode="bulk"]
.search-product{

    transform:
        translateY(3px);

    margin-bottom:0;
}


/* Parent input becomes the hero control */

#parentSku{
    transition:
        border-color .45s ease,
        box-shadow .45s ease,
        background .45s ease;
}


.calculator[data-mode="bulk"]
#parentSku{

    border-color:
        rgba(67,156,255,.55);

    background:
        rgba(8,18,30,.94);

    box-shadow:
        0 0 0 1px
        rgba(67,156,255,.07),

        0 0 28px
        rgba(40,126,225,.08),

        inset 0 1px 0
        rgba(255,255,255,.025);
}


/* -----------------------------------------------------
   HEADER MICRO MOTION
----------------------------------------------------- */

.calculator .panel-title{
    transition:
        transform
        .6s
        cubic-bezier(.22,1,.36,1);
}


.calculator[data-mode="bulk"]
.panel-title{

    transform:
        translateY(1px);
}


/* =====================================================
   MODE CHANGE SCAN BEAM
===================================================== */

.calculator::before{

    content:"";

    position:absolute;

    left:24px;
    right:24px;

    top:104px;

    height:1px;

    z-index:8;

    opacity:0;

    pointer-events:none;

    background:
        linear-gradient(
            90deg,

            transparent 0%,

            rgba(55,150,255,0) 10%,

            rgba(55,150,255,.85) 36%,

            rgba(89,240,194,.95) 50%,

            rgba(55,150,255,.85) 64%,

            rgba(55,150,255,0) 90%,

            transparent 100%
        );

    box-shadow:
        0 0 8px
        rgba(70,166,255,.55),

        0 0 18px
        rgba(71,222,193,.24);

    transform:
        translateY(0)
        scaleX(.3);
}


/* Runs every time Bulk becomes active */

.calculator[data-mode="bulk"]::before{

    animation:
        alfredBulkScan
        .72s
        cubic-bezier(.22,1,.36,1)
        forwards;
}


@keyframes alfredBulkScan{

    0%{
        opacity:0;

        transform:
            translateY(0)
            scaleX(.25);
    }

    16%{
        opacity:1;
    }

    55%{
        opacity:.8;

        transform:
            translateY(150px)
            scaleX(.85);
    }

    100%{
        opacity:0;

        transform:
            translateY(360px)
            scaleX(1);
    }
}


/* =====================================================
   SUBTLE BULK MODE GLOW BEHIND SEARCH
===================================================== */

.calculator[data-mode="bulk"]
.parent-search-row{

    position:relative;

    z-index:2200;

    overflow:visible;
}


.calculator[data-mode="bulk"]
.parent-search-row::before{

    content:"";

    position:absolute;

    inset:-18px -12px;

    z-index:-1;

    pointer-events:none;

    opacity:.55;

    background:
        radial-gradient(
            ellipse at center,

            rgba(39,133,230,.10),

            transparent 68%
        );

    filter:
        blur(12px);

    animation:
        alfredBulkFocusGlow
        1.2s
        ease
        both;
}


@keyframes alfredBulkFocusGlow{

    from{
        opacity:0;
        transform:scale(.94);
    }

    to{
        opacity:.55;
        transform:scale(1);
    }
}


/* =====================================================
   ACCESSIBILITY
===================================================== */

@media (prefers-reduced-motion: reduce){

    .single-mode-collapse,
    .single-mode-stage,
    .single-mode-stage > *,
    .search-product,
    .calculator .panel-title,
    #parentSku{

        transition-duration:.01ms !important;
    }

    .calculator::before{
        display:none;
    }
}

/* =====================================================
   BULK MODE — SHOPIFY MATCH DROPDOWN
===================================================== */

.bulk-shopify-selector{
    margin-top:14px;

    border:
        1px solid
        rgba(68,132,194,.40);

    border-radius:16px;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            rgba(11,27,43,.98),
            rgba(7,18,30,.99)
        );

    box-shadow:
        0 18px 45px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.025);
}


.bulk-shopify-selector.open{

    opacity:1;

    transform:
        translateY(0);
}


.calculator[data-mode="single"]
.bulk-shopify-selector{
    pointer-events:none;
}


/* HEADER */

.bulk-shopify-selector-head{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:18px;

    padding:
        14px
        16px;

    border-bottom:
        1px solid
        rgba(49,76,102,.58);

    background:
        rgba(255,255,255,.012);
}



.bulk-shopify-selector-title{
    color:#edf5ff;

    font-size:12px;
    font-weight:900;
}


.bulk-shopify-selector-subtitle{
    margin-top:4px;

    color:#73879c;

    font-size:10px;
}


.bulk-shopify-selector-count{
    min-width:30px;
    height:30px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:
        0
        9px;

    border:
        1px solid
        rgba(61,157,250,.34);

    border-radius:9px;

    background:
        rgba(52,142,230,.08);

    color:#7bbcff;

    font-size:10px;
    font-weight:900;
}



.bulk-shopify-options{
    display:flex;
    flex-direction:column;

    gap:12px;

    padding:14px;
}


.bulk-shopify-option{
    position:relative;

    display:grid;

    grid-template-columns:
        72px
        minmax(0,1fr)
        42px;

    align-items:center;

    gap:14px;

    min-height:92px;

    padding:
        10px
        14px;

    border:
        1px solid
        #2c4d68;

    border-radius:15px;

    background:
        linear-gradient(
            90deg,
            rgba(17,46,73,.92),
            rgba(9,28,45,.98)
        );

    cursor:pointer;

    transition:.18s ease;
}


.bulk-shopify-option:hover{
    transform:
        translateY(-1px);

    border-color:
        #4587c5;

    box-shadow:
        0 12px 28px
        rgba(0,0,0,.18);
}






/* REAL CHECKBOX HIDDEN */

.bulk-shopify-check{
    position:absolute;

    opacity:0;

    pointer-events:none;
}




.bulk-shopify-check-ui{
    width:36px;
    height:36px;

    display:flex;

    align-items:center;
    justify-content:center;

    border:
        1px solid
        #456078;

    border-radius:10px;

    background:
        rgba(8,20,31,.94);

    cursor:pointer;
}


.bulk-shopify-option:hover
.bulk-shopify-check-ui{
    border-color:#5680a6;
}


.bulk-shopify-check-ui span{
    opacity:0;

    transform:scale(.55);

    color:#ffffff;

    font-size:18px;
    font-weight:900;

    transition:
        opacity .18s ease,
        transform .18s ease;
}


.bulk-shopify-check:checked
~
.bulk-shopify-action
.bulk-shopify-check-ui{
    border-color:#46a4ff;

    background:
        linear-gradient(
            180deg,
            #3ba4ff,
            #1672df
        );

    box-shadow:
        0 0 17px
        rgba(58,160,255,.30);
}


.bulk-shopify-check:checked
~
.bulk-shopify-action
.bulk-shopify-check-ui
span{
    opacity:1;

    transform:scale(1);
}


.bulk-shopify-check-ui span{
    opacity:0;

    transform:scale(.6);

    color:#ffffff;

    font-size:16px;
    font-weight:900;

    transition:
        opacity .18s ease,
        transform .18s ease;
}



.bulk-shopify-check:checked
+
.bulk-shopify-check-ui{
    border-color:#42a2ff;

    background:
        linear-gradient(
            180deg,
            #319cff,
            #176ed9
        );

    box-shadow:
        0 0 14px
        rgba(52,156,255,.30);
}


.bulk-shopify-check:checked
+
.bulk-shopify-check-ui
span{
    opacity:1;

    transform:scale(1);
}

/* IMAGE */


.bulk-shopify-product-image{
    width:72px !important;
    height:72px !important;

    min-width:72px;
    max-width:72px;

    min-height:72px;
    max-height:72px;

    overflow:hidden;

    border-radius:11px;

    border:
        1px solid
        rgba(255,255,255,.10);

    background:#fff;
}


.bulk-shopify-product-image img{
    width:100% !important;
    height:100% !important;

    object-fit:cover !important;

    display:block;
}


.bulk-shopify-product-image img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
}


.bulk-shopify-product-image-empty{
    background:#0d1823;

    color:#597189;

    font-size:24px;
}


/* INFO */

/* INFO */
.bulk-shopify-product-info{
    min-width:0;

    padding-right:0;
}


.bulk-shopify-product-info strong{
    display:block;

    overflow:hidden;

    color:#f2f6fb;

    font-size:14px;
    font-weight:900;

    line-height:1.3;

    white-space:nowrap;
    text-overflow:ellipsis;
}


.bulk-shopify-product-info small{
    display:block;

    margin-top:7px;

    overflow:hidden;

    color:#8195aa;

    font-size:10px;
    font-weight:700;

    white-space:nowrap;
    text-overflow:ellipsis;
}

.bulk-shopify-action{
    position:static;

    display:flex;

    align-items:center;
    justify-content:flex-end;

    justify-self:end;
}




.bulk-shopify-option.selected
.bulk-shopify-match-label{
    border-color:
        rgba(62,159,250,.42);

    background:
        rgba(47,145,234,.12);

    color:#8bc8ff;
}



/* EMPTY RESULT */

.bulk-shopify-empty{

    display:flex;

    align-items:center;

    gap:10px;

    padding:15px;

    color:#899aae;

    font-size:11px;
}


.bulk-shopify-empty-icon{

    width:22px;

    height:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:
        1px solid
        rgba(255,191,74,.34);

    border-radius:6px;

    background:
        rgba(255,191,74,.08);

    color:#ffbf4a;

    font-weight:900;
}


/* =====================================================
   SINGLE / BULK RIGHT PANEL SWITCH
===================================================== */


/* Bulk queue does not exist visually in Single mode */

body[data-calculator-mode="single"]
.bulk-selected-products-card{

    display:none;
}


/* Single-product tools do not belong in Bulk mode */

body[data-calculator-mode="bulk"]
.shopify-write-card{

    display:none;
}

/* Bulk queue appears instead */

body[data-calculator-mode="bulk"]
.bulk-selected-products-card{

    display:block;
}

/* =====================================================
   BULK MODE — SELECTED PRODUCTS PANEL
===================================================== */

.bulk-selected-products-card{
    position:relative;

    padding:0;

    overflow:hidden;

    border:
        1px solid
        rgba(66, 137, 205, .32);

    border-radius:18px;

    background:
        linear-gradient(
            180deg,
            rgba(12, 24, 38, .98),
            rgba(8, 18, 29, .99)
        );

    box-shadow:
        0 18px 55px
        rgba(0,0,0,.26),

        inset 0 1px 0
        rgba(255,255,255,.025);
}


/* =====================================================
   HEADER
===================================================== */

.bulk-selected-products-head{
    position:relative;
    z-index:3;

    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:18px;

    padding:
        18px
        20px
        15px;

    border-bottom:
        1px solid
        rgba(47, 75, 102, .55);

    background:
        linear-gradient(
            180deg,
            rgba(15, 30, 46, .98),
            rgba(10, 23, 36, .96)
        );
}


.bulk-selected-products-head h3{
    margin:0;

    color:#f1f6fc;

    font-size:18px;
    font-weight:900;

    line-height:1.2;

    letter-spacing:-.02em;
}


.bulk-selected-products-head small{
    display:block;

    margin-top:5px;

    color:#768a9f;

    font-size:10px;
    font-weight:600;
}


/* SELECTED COUNT */

.bulk-selected-count{
    flex:0 0 auto;

    display:inline-flex;

    align-items:center;
    justify-content:center;

    min-width:82px;
    height:30px;

    padding:
        0
        11px;

    border:
        1px solid
        rgba(61,225,161,.30);

    border-radius:999px;

    background:
        rgba(61,225,161,.075);

    color:#62e8b2;

    font-size:10px;
    font-weight:850;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.025);
}


/* =====================================================
   SCROLLABLE PRODUCT AREA
===================================================== */

.bulk-selected-products-content{
    position:relative;

    display:flex;
    flex-direction:column;

    gap:9px;

    /*
     * Keep card from becoming gigantic
     * when many products are selected.
     */
    max-height:430px;

    min-height:170px;

    overflow-y:auto;
    overflow-x:hidden;

    padding:12px;

    scrollbar-width:thin;

    scrollbar-color:
        #365f84
        rgba(7,17,27,.45);
}


/* CHROME / EDGE SCROLLBAR */

.bulk-selected-products-content::-webkit-scrollbar{
    width:7px;
}


.bulk-selected-products-content::-webkit-scrollbar-track{
    background:
        rgba(7,17,27,.42);

    border-radius:999px;

    margin:
        8px
        0;
}


.bulk-selected-products-content::-webkit-scrollbar-thumb{
    border-radius:999px;

    background:
        linear-gradient(
            180deg,
            #4279a8,
            #294c6d
        );

    border:
        2px solid
        transparent;

    background-clip:
        padding-box;
}


.bulk-selected-products-content::-webkit-scrollbar-thumb:hover{
    background:
        linear-gradient(
            180deg,
            #5193cb,
            #315f88
        );

    background-clip:
        padding-box;
}


/* =====================================================
   EMPTY STATE
===================================================== */

.bulk-selected-empty{
    flex:1;

    min-height:145px;

    display:flex;

    align-items:center;
    justify-content:center;

    padding:30px 20px;

    border:
        1px dashed
        rgba(61, 95, 126, .55);

    border-radius:13px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(54, 137, 216, .07),
            transparent 62%
        ),
        rgba(7,17,28,.46);

    color:#74889e;

    font-size:11px;
    font-weight:650;

    line-height:1.6;

    text-align:center;
}


/* icon above empty message */

.bulk-selected-empty::before{
    content:"✓";

    width:38px;
    height:38px;

    margin-right:13px;

    display:flex;

    align-items:center;
    justify-content:center;

    border:
        1px solid
        rgba(74, 154, 230, .28);

    border-radius:11px;

    background:
        rgba(51, 132, 209, .07);

    color:#6aace9;

    font-size:16px;
    font-weight:900;

    box-shadow:
        0 0 24px
        rgba(46, 132, 216, .06);
}


/* =====================================================
   SELECTED PRODUCT ROW
===================================================== */

.bulk-selected-product{
    position:relative;

    display:grid;

    grid-template-columns:
        72px
        minmax(0,1fr);

    align-items:center;

    gap:14px;

    min-height:94px;

    padding:
        10px
        66px
        10px
        12px;

    border:
        1px solid
        #243c52;

    border-radius:16px;

    background:
        linear-gradient(
            90deg,
            rgba(10,27,42,.98),
            rgba(6,18,29,.98)
        );

    overflow:hidden;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}


.bulk-selected-product:hover{
    border-color:#386b98;

    box-shadow:
        0 10px 24px
        rgba(0,0,0,.16);

    transform:none;
    
}


/* left accent line */
.bulk-selected-product::before{
    content:"";

    position:absolute;

    left:0;
    top:14px;
    bottom:14px;

    width:3px;

    border-radius:
        0
        999px
        999px
        0;

    background:#3b9dff;
}





/* small accent on left */

.bulk-selected-product::before{
    content:"";

    position:absolute;

    left:0;
    top:17px;
    bottom:17px;

    width:2px;

    border-radius:
        0
        999px
        999px
        0;

    background:
        #3c9cff;

    opacity:.72;
}


/* =====================================================
   PRODUCT IMAGE

   IMPORTANT:
   This prevents the gigantic image problem.
===================================================== */

.bulk-selected-image{
    width:72px !important;
    height:72px !important;

    min-width:72px;
    max-width:72px;

    min-height:72px;
    max-height:72px;

    overflow:hidden;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:12px;

    border:
        1px solid
        rgba(255,255,255,.08);

    background:#ffffff;

    box-shadow:
        0 6px 16px
        rgba(0,0,0,.18);
}


.bulk-selected-image img{
    width:100% !important;
    height:100% !important;

    display:block;

    object-fit:cover !important;
}


.bulk-selected-image-empty{
    background:#0d1823;

    color:#597189;

    font-size:20px;
}



/* =====================================================
   PRODUCT INFORMATION
===================================================== */


.bulk-selected-product-info{
    min-width:0;

    position:relative;

    z-index:1;

    display:flex;

    flex-direction:column;

    justify-content:center;

    opacity:1;

    transform:
        translateX(0);

    transition:
        opacity .10s ease,
        transform .14s ease;
}

.bulk-selected-product:has(
    .bulk-selected-remove-zone:hover
)
.bulk-selected-product-info,

.bulk-selected-product:has(
    .bulk-selected-remove-zone:focus-visible
)
.bulk-selected-product-info{
    opacity:0;

    transform:
        translateX(-6px);

    pointer-events:none;

    transition:
        opacity .08s ease,
        transform .10s ease;
}

/* =====================================================
   LINE 1 — PRODUCT TITLE
===================================================== */

.bulk-selected-product-title{
    display:-webkit-box;

    overflow:hidden;

    color:#edf4fb;

    font-size:13px;
    font-weight:900;

    line-height:1.08;

    white-space:normal;

    overflow-wrap:anywhere;

    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;

    max-height:
        calc(
            2 * 1.08em
        );
}


/* =====================================================
   LINE 2 — STATUS + SKU
===================================================== */

.bulk-selected-product-line-two{
    display:flex;

    align-items:center;

    gap:10px;

    min-width:0;

    margin-top:7px;
}


.bulk-selected-product-sku{
    min-width:0;

    overflow:hidden;

    color:#8598ac;

    font-size:10px;
    font-weight:700;

    line-height:1;

    white-space:nowrap;

    text-overflow:ellipsis;
}


/* =====================================================
   LINE 3 — PRODUCT ID
===================================================== */

.bulk-selected-product-id{
    margin-top:6px;

    overflow:hidden;

    color:#72879b;

    font-size:9.5px;
    font-weight:700;

    line-height:1;

    white-space:nowrap;

    text-overflow:ellipsis;
}


.bulk-selected-product-meta{
    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:8px;

    margin-top:8px;

    color:#8598ac;

    font-size:10px;
    font-weight:700;

    line-height:1.4;
}


.bulk-selected-product-meta > span{
    min-width:0;
}


.bulk-selected-product-meta > span:not(.bulk-selected-status){
    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;
}


/* STATUS BADGE */

.bulk-selected-status{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    padding:
        4px
        10px;

    border-radius:999px;

    border:
        1px solid
        #30485e;

    background:
        rgba(255,255,255,.03);

    font-size:10px;
    font-weight:900;

    letter-spacing:.03em;

    text-transform:uppercase;
}

.bulk-selected-status.active{
    border-color:
        rgba(61,225,161,.28);

    background:
        rgba(61,225,161,.08);

    color:#63e0ae;
}


.bulk-selected-status.draft{
    border-color:
        rgba(255,191,74,.28);

    background:
        rgba(255,191,74,.08);

    color:#f4c25f;
}

/* =====================================================
   REMOVE ZONE
===================================================== */

.bulk-selected-remove-zone{
    position:absolute;

    top:0;
    right:0;
    bottom:0;

    width:58px;

    min-height:100%;

    border:none;
    border-left:
        1px solid
        rgba(255,102,119,.20);

    border-radius:
        0
        16px
        16px
        0;

    background:#21151c;

    display:flex;

    align-items:center;
    justify-content:flex-end;

    gap:12px;

    padding:
        0
        18px
        0
        24px;

    cursor:pointer;

    overflow:hidden;

    z-index:10;

    transition:
        width .30s cubic-bezier(.22,1,.36,1),
        background .20s ease,
        border-left-color .20s ease;
}

.bulk-selected-remove-zone:hover,
.bulk-selected-remove-zone:focus-visible{
    width:calc(100% - 96px);

    background:#351820;

    border-left-color:
        rgba(255,102,119,.55);

    z-index:20;
}

.bulk-selected-remove-text{
    max-width:0;

    overflow:hidden;

    white-space:nowrap;

    opacity:0;

    color:#ffadb7;

    font-size:17px;
    font-weight:850;

    letter-spacing:.01em;

    text-align:left;

    margin-right:auto;

    transform:
        translateX(10px);

    transition:
        max-width .28s cubic-bezier(.22,1,.36,1),
        opacity .18s ease,
        transform .28s cubic-bezier(.22,1,.36,1);
}


.bulk-selected-remove-zone:hover
.bulk-selected-remove-text,

.bulk-selected-remove-zone:focus-visible
.bulk-selected-remove-text{
    max-width:220px;

    opacity:1;

    transform:
        translateX(0);
}


.bulk-selected-remove-icon{
    flex:0 0 auto;

    width:auto;
    height:auto;

    display:flex;
    align-items:center;
    justify-content:center;

    border:none;
    border-radius:0;
    background:transparent;
    box-shadow:none;

    color:#ff9ba8;

    transition:
        color .18s ease,
        transform .18s ease;
}


.bulk-selected-remove-zone svg{
    width:26px;
    height:26px;

    display:block;

    fill:currentColor;
}


.bulk-selected-remove-zone:hover
.bulk-selected-remove-icon,

.bulk-selected-remove-zone:focus-visible
.bulk-selected-remove-icon{
    color:#ffb4bf;

    transform:
        scale(1.06);
}

/* MOBILE */

@media(max-width:900px){

    .bulk-selected-product{
        grid-template-columns:
            60px
            minmax(0,1fr)
            auto;

        min-height:82px;

        padding:
            9px
            0
            9px
            10px;

        gap:10px;
    }

    .bulk-selected-image{
        width:60px !important;
        height:60px !important;

        min-width:60px;
        max-width:60px;

        min-height:60px;
        max-height:60px;
    }

    .bulk-selected-product-info strong{
        font-size:12px;
    }

    .bulk-selected-product-meta{
        gap:6px;
        font-size:9px;
    }

    .bulk-selected-remove-zone{
        width:68px;
        min-height:100%;

        padding:
            0
            12px
            0
            12px;
    }

    .bulk-selected-remove-zone:hover,
    .bulk-selected-remove-zone:focus-visible{
        width:calc(100% - 78px);
    }

    .bulk-selected-remove-icon{
        width:auto;
        height:auto;

        flex:0 0 auto;
    }

    .bulk-selected-remove-text{
        font-size:10px;
    }
}


/* =====================================================
   BULK MODE RIGHT COLUMN
===================================================== */

body[data-calculator-mode="single"]
.bulk-selected-products-card{
    display:none !important;
}


body[data-calculator-mode="bulk"]
.bulk-selected-products-card{
    display:block;
}


/*
 * These belong to Single mode only.
 */

body[data-calculator-mode="bulk"]
.shopify-write-card{
    display:none !important;
}


/* =====================================================
   MOBILE / NARROW RIGHT COLUMN
===================================================== */

@media(max-width:900px){

    .bulk-selected-products-head{
        padding:
            15px
            15px
            13px;
    }


    .bulk-selected-products-content{
        max-height:360px;

        padding:9px;
    }


    .bulk-selected-product{
        grid-template-columns:
            54px
            minmax(0,1fr);

        gap:11px;
    }


    .bulk-selected-image{
        width:54px !important;
        height:54px !important;

        min-width:54px;
        max-width:54px;

        min-height:54px;
        max-height:54px;
    }


    .bulk-selected-image img{
        max-width:54px !important;
        max-height:54px !important;
    }


    .bulk-selected-remove{
        grid-column:
            2;

        justify-self:start;

        margin-top:2px;
    }
}

/* =====================================================
   PARENT SKU LIVE AUTOCOMPLETE
===================================================== */

.parent-sku-autocomplete{
    position:relative;

    min-width:0;
}


.parent-sku-suggestions{
    position:absolute;

    left:0;
    right:0;

    top:
        calc(100% + 8px);

    z-index:100;

    max-height:430px;

    overflow-y:auto;

    padding:8px;

    border:
        1px solid
        #2e506e;

    border-radius:13px;

    background:
        rgba(7,18,30,.985);

    box-shadow:
        0 20px 55px
        rgba(0,0,0,.46),

        inset 0 1px 0
        rgba(255,255,255,.025);

    backdrop-filter:
        blur(18px);
}


.parent-sku-suggestion{
    width:100%;

    display:grid;

    grid-template-columns:
        52px
        minmax(0,1fr)
        auto;

    align-items:center;

    gap:12px;

    padding:
        9px
        10px;

    border:
        1px solid
        transparent;

    border-radius:10px;

    background:
        transparent;

    color:inherit;

    text-align:left;

    cursor:pointer;

    transition:
        background .16s ease,
        border-color .16s ease,
        transform .16s ease;
}


.parent-sku-suggestion
+
.parent-sku-suggestion{
    margin-top:4px;
}


.parent-sku-suggestion:hover,
.parent-sku-suggestion.active{
    border-color:
        #2f648f;

    background:
        rgba(43,125,201,.10);

    transform:
        translateY(-1px);
}


.parent-sku-suggestion-image{
    width:52px;
    height:52px;

    overflow:hidden;

    display:flex;

    align-items:center;
    justify-content:center;

    border:
        1px solid
        #314a60;

    border-radius:9px;

    background:#fff;
}


.parent-sku-suggestion-image img{
    width:100%;
    height:100%;

    object-fit:cover;

    display:block;
}


.parent-sku-suggestion-image.empty{
    background:#0c1825;

    color:#526a80;
}


.parent-sku-suggestion-info{
    min-width:0;
}


.parent-sku-suggestion-info strong{
    display:block;

    overflow:hidden;

    color:#edf5fd;

    font-size:11px;
    font-weight:850;

    text-overflow:ellipsis;

    white-space:nowrap;
}


.parent-sku-suggestion-info small{
    display:block;

    margin-top:3px;

    overflow:hidden;

    color:#7d91a6;

    font-size:9px;
    font-weight:650;

    text-overflow:ellipsis;

    white-space:nowrap;
}


.parent-sku-suggestion-status{
    padding:
        5px
        8px;

    border:
        1px solid
        #334c62;

    border-radius:999px;

    color:#8699ac;

    font-size:8px;
    font-weight:850;

    text-transform:uppercase;
}


.parent-sku-suggestion-status.active{
    border-color:
        rgba(61,225,161,.28);

    background:
        rgba(61,225,161,.07);

    color:#60dfac;
}


.parent-sku-suggestion-status.draft{
    border-color:
        rgba(255,191,74,.28);

    background:
        rgba(255,191,74,.07);

    color:#ffc55c;
}


.parent-sku-suggestion-loading,
.parent-sku-suggestion-empty{
    padding:15px;

    color:#74899f;

    font-size:10px;

    text-align:center;
}


/* =====================================================
   SELECTED PRODUCTS SEARCH
===================================================== */

.bulk-selected-toolbar{
    padding:
        12px
        16px;

    border-bottom:
        1px solid
        rgba(43,69,94,.50);

    background:
        rgba(5,15,25,.28);
}


.bulk-selected-search{
    position:relative;

    display:flex;

    align-items:center;
}


.bulk-selected-search-icon{
    position:absolute;

    left:13px;

    color:#6f8ba4;

    font-size:17px;

    pointer-events:none;
}


.bulk-selected-search input{
    width:100%;
    height:40px;

    padding:
        0
        40px
        0
        38px;

    border:
        1px solid
        #29435a;

    border-radius:10px;

    outline:none;

    background:
        #081521;

    color:#eaf2fb;

    font-size:10px;

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}


.bulk-selected-search input:focus{
    border-color:
        #3e88cc;

    box-shadow:
        0 0 0 3px
        rgba(61,149,234,.08);
}


.bulk-selected-search input::placeholder{
    color:#62788e;
}


.bulk-selected-search-clear{
    position:absolute;

    right:8px;

    width:26px;
    height:26px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:none;

    border-radius:7px;

    background:
        transparent;

    color:#70869b;

    font-size:17px;

    cursor:pointer;
}


.bulk-selected-search-clear:hover{
    background:
        rgba(255,255,255,.045);

    color:#c8d5e2;
}


.bulk-shopify-check:checked
~
.bulk-shopify-action
.bulk-shopify-check-ui{
    border-color:
        #46a0ff;

    background:
        linear-gradient(
            180deg,
            #3aa0ff,
            #1c73dc
        );

    box-shadow:
        0 0 14px
        rgba(58,160,255,.28);
}


.bulk-shopify-check:checked
~
.bulk-shopify-action
.bulk-shopify-check-ui
span{
    opacity:1;

    transform:scale(1);
}



.bulk-shopify-option.selected
.bulk-shopify-match-label{
    border-color:
        rgba(76,191,144,.42);

    background:
        rgba(76,191,144,.11);

    color:#75e0b3;
}

/* MOBILE */

@media(max-width:900px){

    .bulk-shopify-option{
        grid-template-columns:
            72px
            minmax(0,1fr);

        gap:14px;

        padding:
            14px
            14px;
    }

    .bulk-shopify-product-image{
        width:72px;
        height:72px;

        min-width:72px;
        max-width:72px;

        min-height:72px;
        max-height:72px;
    }

    .bulk-shopify-product-info strong{
        font-size:15px;
    }

    .bulk-shopify-action{
        grid-column:2;

        justify-self:start;

        margin-top:8px;
    }
}

.bulk-shopify-product-info{
    min-width:0;

    padding-right:58px;
}

/* =====================================================
   FIX BULK SHOPIFY RESULT LABEL OVERRIDE
===================================================== */

.field label.bulk-shopify-option{
    display:grid;

    grid-template-columns:
        72px
        minmax(0,1fr)
        42px;

    align-items:center;

    gap:14px;

    margin-bottom:0;

    font-size:inherit;

    color:inherit;
}
.bulk-selected-product{
    isolation:isolate;
}



/* =====================================================
   BULK MODE CONTENT TRANSITION
   Matches Single-mode depth / blur transition

   DOES NOT CHANGE:
   - scan beam
   - mode switch
   - parent search animation
===================================================== */


/* =====================================================
   RIGHT SIDE — SELECTED PRODUCTS CARD
===================================================== */



/* Transitionable Bulk card */

.bulk-selected-products-card{
    max-height:900px;

    opacity:1;

    filter:
        blur(0)
        brightness(1);

    transform:
        translateY(0);

    transform-origin:
        50% 0%;

    will-change:
        transform,
        opacity,
        filter,
        max-height;

    transition:
        opacity
        .52s
        ease,

        filter
        .58s
        ease,

        transform
        .58s
        cubic-bezier(.22,.8,.24,1),

        max-height
        .72s
        cubic-bezier(.22,1,.36,1),

        margin-bottom
        .72s
        cubic-bezier(.22,1,.36,1),

        border-width
        .25s
        ease;
}


/* =====================================================
   SINGLE MODE:
   Bulk content falls away
===================================================== */

body[data-calculator-mode="single"]
.bulk-selected-products-card{
    max-height:0;

    opacity:0;

    filter:
        blur(10px)
        brightness(.78);

    transform:
        translateY(24px);

    pointer-events:none;

    visibility:hidden;

    /*
     * Right stack uses gap:14px.
     * Cancel that empty gap while this card is collapsed.
     */
    margin-bottom:-14px;

    border-width:0;

    box-shadow:none;

    transition:
        opacity
        .52s
        ease,

        filter
        .58s
        ease,

        transform
        .58s
        cubic-bezier(.22,.8,.24,1),

        max-height
        .72s
        cubic-bezier(.22,1,.36,1),

        margin-bottom
        .72s
        cubic-bezier(.22,1,.36,1),

        border-width
        .25s
        ease,

        visibility
        0s
        linear
        .60s;
}


/* =====================================================
   BULK MODE:
   Bulk content comes forward
===================================================== */

body[data-calculator-mode="bulk"]
.bulk-selected-products-card{
    max-height:900px;

    opacity:1;

    filter:
        blur(0)
        brightness(1);

    transform:
        translateY(0);

    pointer-events:auto;

    visibility:visible;

    margin-bottom:0;

    border-width:1px;

    transition-delay:
        .10s,
        .10s,
        .10s,
        0s,
        0s,
        0s;
}


/* =====================================================
   STAGGER CONTENT INSIDE SELECTED PRODUCTS
===================================================== */

.bulk-selected-products-card
> *{
    transition:
        opacity
        .48s
        ease,

        transform
        .58s
        cubic-bezier(.22,.8,.24,1);
}


body[data-calculator-mode="single"]
.bulk-selected-products-card
> *{
    opacity:0;

    transform:
        translateY(18px);

    transition-delay:0s;
}


body[data-calculator-mode="bulk"]
.bulk-selected-products-card
> *{
    opacity:1;

    transform:
        translateY(0);
}


/* Header first */

body[data-calculator-mode="bulk"]
.bulk-selected-products-head{
    transition-delay:.14s;
}


/* Search bar second */

body[data-calculator-mode="bulk"]
.bulk-selected-toolbar{
    transition-delay:.18s;
}


/* Selected products third */

body[data-calculator-mode="bulk"]
.bulk-selected-products-content{
    transition-delay:.22s;
}


/* =====================================================
   LEFT SIDE — SHOPIFY MATCH RESULT PANEL
===================================================== */

.bulk-shopify-selector{
    opacity:0;

    filter:
        blur(10px)
        brightness(.78);

    transform:
        translateY(24px);

    transform-origin:
        50% 0%;

    will-change:
        transform,
        opacity,
        filter;

    transition:
        opacity
        .52s
        ease,

        filter
        .58s
        ease,

        transform
        .58s
        cubic-bezier(.22,.8,.24,1);
}


.bulk-shopify-selector.open{
    opacity:1;

    filter:
        blur(0)
        brightness(1);

    transform:
        translateY(0);
}




/* Individual layers */

.bulk-shopify-selector-head,
.bulk-shopify-options{
    transition:
        opacity
        .48s
        ease,

        transform
        .58s
        cubic-bezier(.22,.8,.24,1);
}





.bulk-shopify-selector.open
.bulk-shopify-selector-head{
    opacity:1;

    transform:
        translateY(0);

    transition-delay:.05s;
}


.bulk-shopify-selector.open
.bulk-shopify-options{
    opacity:1;

    transform:
        translateY(0);

    transition-delay:.10s;
}

/* =====================================================
   BULK MODE — ONE WAY ENTRANCE ANIMATION

   ONLY:
   SINGLE → BULK

   DOES NOT MODIFY:
   BULK → SINGLE
   EXISTING SINGLE TRANSITION
   SCAN BEAM
===================================================== */


/* =====================================================
   SELECTED PRODUCTS — BULK ENTRANCE
===================================================== */

body[data-calculator-mode="bulk"]
.bulk-selected-products-card{

    animation:
        bulkContentEnter
        .62s
        cubic-bezier(.22,.8,.24,1)
        both;
}


/* Header */

body[data-calculator-mode="bulk"]
.bulk-selected-products-head{

    animation:
        bulkContentItemEnter
        .52s
        .08s
        cubic-bezier(.22,.8,.24,1)
        both;
}


/* Search */

body[data-calculator-mode="bulk"]
.bulk-selected-toolbar{

    animation:
        bulkContentItemEnter
        .52s
        .13s
        cubic-bezier(.22,.8,.24,1)
        both;
}


/* Selected product area */

body[data-calculator-mode="bulk"]
.bulk-selected-products-content{

    animation:
        bulkContentItemEnter
        .52s
        .18s
        cubic-bezier(.22,.8,.24,1)
        both;
}


/* =====================================================
   SHOPIFY MATCH PANEL — BULK ENTRANCE
===================================================== */

.calculator[data-mode="bulk"]
.bulk-shopify-selector.open{

    animation:
        bulkContentEnter
        .62s
        .10s
        cubic-bezier(.22,.8,.24,1)
        both;
}


.calculator[data-mode="bulk"]
.bulk-shopify-selector.open
.bulk-shopify-selector-head{

    animation:
        bulkContentItemEnter
        .48s
        .15s
        cubic-bezier(.22,.8,.24,1)
        both;
}


.calculator[data-mode="bulk"]
.bulk-shopify-selector.open
.bulk-shopify-options{

    animation:
        bulkContentItemEnter
        .48s
        .20s
        cubic-bezier(.22,.8,.24,1)
        both;
}


/* =====================================================
   MAIN BULK ENTRANCE
===================================================== */

@keyframes bulkContentEnter{

    0%{
        opacity:0;

        filter:
            blur(10px)
            brightness(.78);

        transform:
            translateY(24px);
    }


    100%{
        opacity:1;

        filter:
            blur(0)
            brightness(1);

        transform:
            translateY(0);
    }
}


/* =====================================================
   INNER BULK CONTENT
===================================================== */

@keyframes bulkContentItemEnter{

    0%{
        opacity:0;

        transform:
            translateY(18px);
    }


    100%{
        opacity:1;

        transform:
            translateY(0);
    }
}


/* =====================================================
   BULK EMPTY STATE — SINGLE → BULK ENTRANCE
===================================================== */


/*
Whole empty-state area enters first.
The .35s delay lets the Single workspace
begin disappearing before this comes forward.
*/
body[data-calculator-mode="bulk"]
.bulk-search-state:not([hidden]){

    animation:
        bulkContentEnter
        .65s
        .35s
        cubic-bezier(.22,.8,.24,1)
        both;
}


/* Magnifying glass */
body[data-calculator-mode="bulk"]
.bulk-search-state:not([hidden])
.no-product-found-graphic{

    animation:
        bulkContentItemEnter
        .52s
        .44s
        cubic-bezier(.22,.8,.24,1)
        both;
}


/* No search yet */
body[data-calculator-mode="bulk"]
.bulk-search-state:not([hidden])
.no-product-found-title{

    animation:
        bulkContentItemEnter
        .50s
        .52s
        cubic-bezier(.22,.8,.24,1)
        both;
}


/* Search for products to begin */
body[data-calculator-mode="bulk"]
.bulk-search-state:not([hidden])
.no-product-found-text{

    animation:
        bulkContentItemEnter
        .50s
        .59s
        cubic-bezier(.22,.8,.24,1)
        both;
}


/* Enter a SKU above */
body[data-calculator-mode="bulk"]
.bulk-search-state:not([hidden])
.no-product-found-tip{

    animation:
        bulkContentItemEnter
        .50s
        .66s
        cubic-bezier(.22,.8,.24,1)
        both;
}


/* =====================================================
   PARENT PRODUCT — SHOPIFY SELECTION REQUIRED
===================================================== */

.parent-product-meta-value.shopify-choice-required{
    color:#f0c761;

    font-size:17px;

    font-weight:900;

    line-height:1;
}

/* =====================================================
   SHOPIFY WRITE SUCCESS PAGE
===================================================== */

.shopify-write-success-page{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:16px;

    text-align:center;
    position:relative;
    isolation:isolate;
}


.shopify-success-hero{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
}


.shopify-success-tick-wrap{
    position:relative;

    width:88px;
    height:88px;

    display:flex;
    align-items:center;
    justify-content:center;
}


.shopify-success-tick-ring{
    position:absolute;
    inset:0;

    border:
        1px solid
        rgba(79,228,174,.26);

    border-radius:999px;

    background:#12261d;

    box-shadow:
        0 0 0 1px rgba(79,228,174,.08),
        0 0 30px rgba(79,228,174,.10);
}


.shopify-success-tick{
    position:relative;
    z-index:2;

    width:64px;
    height:64px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:999px;

    border:
        1px solid
        rgba(79,228,174,.42);

    background:#153125;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03);
}


.shopify-success-tick svg{
    width:34px;
    height:34px;

    display:block;

    stroke:#63e7b1;
    stroke-width:5;
    stroke-linecap:round;
    stroke-linejoin:round;
    fill:none;

    stroke-dasharray:60;
    stroke-dashoffset:60;
}


.shopify-success-title{
    color:#edf4fb;

    font-size:25px;
    font-weight:900;

    letter-spacing:-.02em;
}


.shopify-success-subtitle{
    color:#91a0b4;

    font-size:12px;
}


.shopify-success-summary{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;

    margin-top:4px;
}


.shopify-success-box{
    padding:16px 16px 14px;

    border:
        1px solid
        #24384d;

    border-radius:14px;

    background:#0a131d;

    text-align:left;
}


.shopify-success-box-kicker{
    margin-bottom:6px;

    color:#90a0b5;

    font-size:10px;
    font-weight:800;

    letter-spacing:.08em;
    text-transform:uppercase;
}


.shopify-success-box-row{
    display:flex;
    align-items:baseline;
    gap:10px;
    flex-wrap:wrap;
}


.shopify-success-old{
    color:#76879c;

    font-size:15px;
    font-weight:800;

    text-decoration:line-through;

    font-variant-numeric:tabular-nums;
}


.shopify-success-arrow{
    color:#536d88;

    font-size:17px;
    font-weight:900;
}


.shopify-success-new{
    color:#63ebb8;

    font-size:25px;
    font-weight:900;

    font-variant-numeric:tabular-nums;
}


.shopify-success-button{
    width:100%;
    height:46px;

    margin-top:2px;

    border:
        1px solid
        #2f7fd3;

    border-radius:11px;

    background:#14304d;

    color:#e9f1fb;

    font-size:14px;
    font-weight:850;

    cursor:pointer;

    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease;
}


.shopify-success-button:hover{
    background:#1a3c60;
    border-color:#4698f2;
    transform:translateY(-1px);
}


/* success animation trigger */

.shopify-write-track.success
.shopify-success-tick-ring{
    animation:
        shopifySuccessRingPop
        .72s
        cubic-bezier(.22,1,.36,1);
}


.shopify-write-track.success
.shopify-success-tick{
    animation:
        shopifySuccessTickPop
        .50s
        .10s
        cubic-bezier(.22,1,.36,1)
        both;
}


.shopify-write-track.success
.shopify-success-tick svg{
    animation:
        shopifySuccessCheckDraw
        .52s
        .24s
        ease-out
        forwards;
}


@keyframes shopifySuccessRingPop{
    0%{
        transform:scale(.76);
        opacity:0;
    }

    100%{
        transform:scale(1);
        opacity:1;
    }
}


@keyframes shopifySuccessTickPop{
    0%{
        transform:scale(.72);
        opacity:0;
    }

    100%{
        transform:scale(1);
        opacity:1;
    }
}


@keyframes shopifySuccessCheckDraw{
    to{
        stroke-dashoffset:0;
    }
}


@media(max-width:900px){

    .shopify-success-summary{
        grid-template-columns:1fr;
    }

    .shopify-success-title{
        font-size:22px;
    }

    .shopify-success-new{
        font-size:22px;
    }
}

/* =====================================================
   SUCCESS PAGE — CSV LED BORDER EFFECT
   Only affects the "Price updated successfully" page
===================================================== */

.shopify-write-success-page{
    position:relative;

    overflow:hidden;

    isolation:isolate;

    border-radius:22px;
}
/* =====================================================
   SUCCESS PAGE — OUTWARD LED BORDER PULSE
   no rotation
   no left-to-right sweep
===================================================== */

.shopify-write-success-page::before{
    content:"";

    position:absolute;
    inset:0;

    border-radius:22px;

    pointer-events:none;

    z-index:10;

    /*
     * Four separate LED lines:
     * top
     * bottom
     * left
     * right
     */
    background:

        linear-gradient(
            90deg,
            #3de1a1,
            #3de1a1
        )
        center top
        / 0% 1.5px
        no-repeat,

        linear-gradient(
            90deg,
            #3de1a1,
            #3de1a1
        )
        center bottom
        / 0% 1.5px
        no-repeat,

        linear-gradient(
            180deg,
            #3de1a1,
            #3de1a1
        )
        left center
        / 1.5px 0%
        no-repeat,

        linear-gradient(
            180deg,
            #3de1a1,
            #3de1a1
        )
        right center
        / 1.5px 0%
        no-repeat;

    filter:
        drop-shadow(
            0 0 5px
            rgba(61,225,161,.85)
        );

    opacity:0;

    animation:
        shopifySuccessBorderExpand
        2.4s
        cubic-bezier(.22,1,.36,1)
        infinite;
}

@keyframes shopifySuccessBorderExpand{

    0%{
        opacity:0;

        background-size:
            0% 1.5px,
            0% 1.5px,
            1.5px 0%,
            1.5px 0%;
    }


    10%{
        opacity:1;
    }


    48%{
        opacity:1;

        background-size:
            100% 1.5px,
            100% 1.5px,
            1.5px 100%,
            1.5px 100%;
    }


    68%{
        opacity:.9;

        background-size:
            100% 1.5px,
            100% 1.5px,
            1.5px 100%,
            1.5px 100%;
    }


    100%{
        opacity:0;

        background-size:
            calc(100% - 34px) 1.5px,
            calc(100% - 34px) 1.5px,
            1.5px calc(100% - 34px),
            1.5px calc(100% - 34px);
    }
}




.shopify-write-track.success
.shopify-write-success-page::after{
    animation:
        shopifySuccessBorderCurve
        2.4s
        cubic-bezier(.22,1,.36,1)
        infinite;
}

@keyframes shopifySuccessBorderCurve{

    0%{
        opacity:0;
    }

    17%{
        opacity:0;
    }

    20%{
        opacity:.95;
    }

    68%{
        opacity:.95;
    }

    100%{
        opacity:0;
    }
}

/* =====================================================
   BULK PRICE WORKFLOW — TWO PAGE CALCULATOR
===================================================== */

.calculator-bulk-main-page{
    width:100%;

    opacity:1;

    transform:
        translateX(0);

    transition:
        transform
        .56s
        cubic-bezier(.22,1,.36,1),

        opacity
        .36s
        ease;

    will-change:
        transform,
        opacity;
}


/* =====================================================
   CHANGE PRICE — BOTTOM BUTTON
===================================================== */

.bulk-change-price-launch{
    display:none;

    position:absolute;

    left:18px;
    right:18px;
    bottom:18px;

    z-index:8;

    height:54px;

    padding:
        0
        20px;

    border:
        1px solid
        #3284e5;

    border-radius:12px;

    background:#176fd8;

    color:#ffffff;

    cursor:pointer;

    align-items:center;
    justify-content:center;

    gap:12px;

    font-size:14px;
    font-weight:900;

    box-shadow:
        0 10px 28px
        rgba(23,111,216,.22);

    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease,
        opacity .18s ease;
}


.calculator[data-mode="bulk"]
.bulk-change-price-launch{
    display:flex;
}


.bulk-change-price-launch:hover:not(:disabled){
    background:#2384ee;

    border-color:#55a5ff;

    transform:
        translateY(-1px);
}


.bulk-change-price-launch small{
    padding:
        4px
        9px;

    border-radius:999px;

    background:
        rgba(255,255,255,.10);

    color:#cfe7ff;

    font-size:9px;
    font-weight:800;
}


.bulk-change-price-launch:disabled{
    border-color:#26394d;

    background:#101b27;

    color:#637489;

    box-shadow:none;

    cursor:not-allowed;

    opacity:.58;
}


/* =====================================================
   SUMMARY PAGE
===================================================== */

.bulk-price-summary-page{
    position:absolute;

    inset:18px;

    z-index:9;

    min-width:0;
    min-height:0;

    display:flex;
    flex-direction:column;

    border:
        1px solid
        #29445e;

    border-radius:16px;

    background:#0b1521;

    overflow:hidden;

    opacity:0;

    transform:
        translateX(
            calc(
                100% +
                40px
            )
        );

    pointer-events:none;

    transition:
        transform
        .56s
        cubic-bezier(.22,1,.36,1),

        opacity
        .34s
        ease;

    will-change:
        transform,
        opacity;
}


/* =====================================================
   OPEN SUMMARY
===================================================== */

.calculator.bulk-summary-open
.calculator-bulk-main-page{
    transform:
        translateX(
            calc(
                -100% -
                40px
            )
        );

    opacity:.12;

    pointer-events:none;
}


.calculator.bulk-summary-open
.bulk-change-price-launch{
    transform:
        translateX(
            calc(
                -100vw
            )
        );

    opacity:0;

    pointer-events:none;
}


.calculator.bulk-summary-open
.bulk-price-summary-page{
    transform:
        translateX(0);

    opacity:1;

    pointer-events:auto;
}


/* =====================================================
   SUMMARY HEADER
===================================================== */

.bulk-price-summary-head{
    flex:0 0 auto;

    display:grid;

    grid-template-columns:
        42px
        minmax(0,1fr)
        auto;

    align-items:center;

    gap:14px;

    padding:
        18px
        20px;

    border-bottom:
        1px solid
        #243a50;

    background:#0e1b29;
}


.bulk-price-summary-back-icon{
    width:42px;
    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:
        1px solid
        #324c66;

    border-radius:11px;

    background:#0a1520;

    color:#aac7e5;

    cursor:pointer;

    font-size:19px;
    font-weight:800;
}


.bulk-price-summary-back-icon:hover{
    border-color:#4a86bf;
    color:#ffffff;
}


.bulk-price-summary-heading{
    min-width:0;
}


.bulk-price-summary-heading h3{
    margin:0;

    color:#f2f6fb;

    font-size:20px;
    font-weight:900;
}


.bulk-price-summary-heading small{
    display:block;

    margin-top:4px;

    color:#8193a7;

    font-size:10px;
}


.bulk-price-summary-count{
    padding:
        7px
        12px;

    border:
        1px solid
        rgba(61,225,161,.30);

    border-radius:999px;

    background:
        rgba(61,225,161,.07);

    color:#62e8b2;

    font-size:10px;
    font-weight:850;
}


/* =====================================================
   SUMMARY SCROLL AREA
===================================================== */

.bulk-price-summary-list{
    flex:1;
    min-height:0;

    display:flex;
    flex-direction:column;

    gap:12px;

    padding:18px;

    overflow-y:auto;
    overflow-x:hidden;

    scrollbar-width:thin;
    scrollbar-color:#365f84 #09131e;
}

.bulk-price-summary-list::-webkit-scrollbar{
    width:7px;
}

.bulk-price-summary-list::-webkit-scrollbar-track{
    background:#09131e;
}

.bulk-price-summary-list::-webkit-scrollbar-thumb{
    border-radius:999px;
    background:#365f84;
}



/* =====================================================
   NEW SUMMARY ROW
===================================================== */

.bulk-price-summary-item{
    position:relative;
    flex:0 0 auto;

    display:grid;

    grid-template-columns:
        84px
        minmax(0,1fr);

    grid-template-rows:
        auto
        auto;

    align-items:center;

    column-gap:14px;
    row-gap:10px;

    min-height:0;

    padding:
        14px
        78px
        14px
        14px;

    border:1px solid #243c52;
    border-radius:16px;

    background:#091522;

    overflow:hidden;
}

.bulk-price-summary-image{
    width:84px;
    height:84px;

    overflow:hidden;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid #31485e;
    border-radius:12px;

    background:#ffffff;
}

.bulk-price-summary-image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.bulk-price-summary-image.empty{
    background:#101b27;
    color:#59718a;
    font-size:18px;
}

.bulk-price-summary-info{
    grid-column:2;
    grid-row:1;

    min-width:0;

    display:flex;
    flex-direction:column;
    gap:8px;
}

.bulk-price-summary-title-wrap{
    width:100%;

    overflow:hidden;

    white-space:nowrap;
}


.bulk-price-summary-title-text{
    display:inline-block;

    width:max-content;
    max-width:none;

    color:#edf4fb;

    font-size:15px;
    font-weight:900;
    line-height:1.2;

    white-space:nowrap;

    transform:translateX(0);

    animation:none;
}


.bulk-price-summary-title-text.is-overflowing{
    animation:
        bulkPriceSummaryTitleTravel
        10s
        ease-in-out
        infinite;
}




.bulk-price-summary-title-marquee span{
    white-space:nowrap;
}

@keyframes bulkPriceSummaryTitleTravel{

    0%,
    20%{
        transform:
            translateX(0);
    }


    48%,
    65%{
        transform:
            translateX(
                var(
                    --bulk-title-shift,
                    0px
                )
            );
    }


    90%,
    100%{
        transform:
            translateX(0);
    }
}



.bulk-price-summary-fields{
    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:8px;
    margin-top:0;
}



.bulk-price-summary-field{
    min-width:0;

    padding:3px 10px;

    border:1px solid #253d53;
    border-radius:10px;

    background:#0d1b29;
}

.bulk-price-summary-field span{
    display:block;

    margin-bottom:4px;

    color:#70849a;

    font-size:10px;
    font-weight:800;

    letter-spacing:.08em;
    text-transform:uppercase;
}

.bulk-price-summary-field strong{
    display:block;

    overflow:hidden;

    color:#edf4fb;

    font-size:11px;
    font-weight:850;

    white-space:nowrap;
    text-overflow:ellipsis;
}

.bulk-price-summary-field--original-price strong{
    overflow:visible;

    color:#8fc0ff;

    font-size:13px;
    font-weight:900;

    white-space:nowrap;
}

.bulk-price-summary-field--status strong{
    overflow:visible;

    font-size:13px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.bulk-price-summary-field--status.active strong{
    color:#60e2af;
}

.bulk-price-summary-field--status.draft strong{
    color:#f0c761;
}

.bulk-price-summary-field--status.unknown strong{
    color:#aac0d5;
}


/* =====================================================
   CHOICE AREA
===================================================== */

.bulk-price-summary-controls{
    grid-column:2;
    grid-row:2;

    display:grid;

    grid-template-columns:
        114px
        114px
        114px
        163px;

    gap:10px;

    justify-content:start;
    align-self:start;
}



.bulk-price-summary-choice{
    min-height:52px;

    padding:0 10px;

    border:1px solid #294259;
    border-radius:14px;

    background:#0d1a27;

    color:#dce8f5;

    cursor:pointer;

    display:flex;
    align-items:center;
    justify-content:center;

    text-align:center;

    position:relative;
    isolation:isolate;

    transition:
        border-color .20s ease,
        background .20s ease,
        color .20s ease,
        box-shadow .20s ease;
}

.bulk-price-summary-choice span{
    font-size:13px;
    font-weight:900;
}

.bulk-price-summary-choice small{
    color:#8396ab;
    font-size:10px;
    font-weight:700;
}

.bulk-price-summary-choice.is-active{
    color:#ffffff;
}

.bulk-price-summary-choice--high.is-active{
    color:#65eebe;

    border-color:
        rgba(57,226,162,.95);

    background:#10201b;
}


.bulk-price-summary-choice--medium.is-active{
    color:#ffd369;

    border-color:
        rgba(255,196,70,.95);

    background:#211b10;
}


.bulk-price-summary-choice--low.is-active{
    color:#ff8292;

    border-color:
        rgba(255,88,108,.95);

    background:#24151b;
}

.bulk-price-summary-manual{
    height:52px;
    min-height:52px;

    padding:5px 9px;

    border:1px solid #294259;
    border-radius:14px;

    background:#0d1a27;

    display:flex;
    flex-direction:column;
    justify-content:center;

    transition:
        border-color .18s ease,
        background .18s ease;
}


.bulk-price-summary-manual--entry{
    gap:2px;
}


.bulk-price-summary-manual-entry-row{
    min-height:18px;

    margin:0;

    display:grid;

    grid-template-columns:
        54px
        minmax(0,1fr);

    align-items:center;

    gap:5px;
}


.bulk-price-summary-manual-entry-row span{
    color:#7e94aa;

    font-size:10px;
    font-weight:800;

    letter-spacing:.05em;

    text-transform:uppercase;

    white-space:nowrap;
}


.bulk-price-summary-manual-input-wrap{
    width:100%;
    height:18px;

    display:flex;
    align-items:center;
    justify-content:flex-end;

    gap:2px;
}

.bulk-price-summary-manual-input-wrap strong{
    flex:0 0 auto;

    color:#edf4fb;

    font-size:10px;
    font-weight:900;
    line-height:18px;
}

.bulk-price-summary-manual-entry-row input{
    flex:0 1 56px;
    min-width:0;
    height:18px;

    padding:0;

    border:none;
    outline:none;

    background:transparent;

    color:#edf4fb;

    font-size:15px;
    font-weight:900;

    line-height:18px;

    text-align:right;

    appearance:textfield;
    -moz-appearance:textfield;
}

.bulk-price-summary-manual-entry-row input::-webkit-outer-spin-button,
.bulk-price-summary-manual-entry-row input::-webkit-inner-spin-button{
    -webkit-appearance:none;
    margin:0;
}


.bulk-price-summary-manual-entry-row input::placeholder{
    color:#6d8195;
}


.bulk-price-summary-manual.is-active{
    border-color:rgba(240,199,97,.70);
    background:rgba(240,199,97,.08);
}

.bulk-price-summary-manual--calculated{
    padding:
        5px
        10px;

    gap:2px;

    justify-content:center;
}

.bulk-price-summary-calculated-row{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:6px;

    min-height:17px;
}

.bulk-price-summary-calculated-row span{
    color:#7e94aa;

    font-size:8px;
    font-weight:800;

    letter-spacing:.07em;
    text-transform:uppercase;

    white-space:nowrap;
}

.bulk-price-summary-calculated-row strong{
    color:#edf4fb;

    font-size:17px;
    font-weight:900;

    line-height:1;

    white-space:nowrap;
}

/* =====================================================
   REMOVE ZONE
===================================================== */

.bulk-price-summary-remove-zone{
    position:absolute;

    top:0;
    right:0;
    bottom:0;

    width:58px;

    border:none;
    border-left:1px solid rgba(255,102,119,.20);

    border-radius:
        0
        16px
        16px
        0;

    background:#21151c;

    display:flex;
    align-items:center;
    justify-content:flex-end;

    gap:12px;

    padding:
        0
        18px
        0
        24px;

    cursor:pointer;

    overflow:hidden;

    z-index:5;

    transition:
        width .30s cubic-bezier(.22,1,.36,1),
        background .20s ease,
        border-left-color .20s ease;
}

.bulk-price-summary-remove-zone:hover,
.bulk-price-summary-remove-zone:focus-visible{
    width:calc(100% - 108px);

    background:#351820;

    border-left-color:rgba(255,102,119,.55);

    z-index:20;
}

.bulk-price-summary-remove-text{
    max-width:0;

    overflow:hidden;

    white-space:nowrap;

    opacity:0;

    color:#ffadb7;

    font-size:16px;
    font-weight:850;

    margin-right:auto;

    transform:translateX(10px);

    transition:
        max-width .28s cubic-bezier(.22,1,.36,1),
        opacity .18s ease,
        transform .28s cubic-bezier(.22,1,.36,1);
}

.bulk-price-summary-remove-zone:hover
.bulk-price-summary-remove-text,

.bulk-price-summary-remove-zone:focus-visible
.bulk-price-summary-remove-text{
    max-width:260px;
    opacity:1;
    transform:translateX(0);
}

.bulk-price-summary-remove-icon{
    flex:0 0 auto;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#ff9ba8;

    transition:
        color .18s ease,
        transform .18s ease;
}

.bulk-price-summary-remove-icon svg{
    width:24px;
    height:24px;

    display:block;
    fill:currentColor;
}

.bulk-price-summary-remove-zone:hover
.bulk-price-summary-remove-icon,

.bulk-price-summary-remove-zone:focus-visible
.bulk-price-summary-remove-icon{
    color:#ffb4bf;
    transform:scale(1.06);
}

/* =====================================================
   FOOTER
===================================================== */

.bulk-price-summary-footer{
    flex:0 0 auto;

    display:flex;
    align-items:center;
    gap:12px;

    padding:13px 16px;

    border-top:1px solid #243a50;

    background:#0d1925;
}

.bulk-price-summary-back{
    height:42px;

    padding:0 16px;

    border:1px solid #314a63;
    border-radius:10px;

    background:#0a1520;

    color:#abc0d5;

    cursor:pointer;

    font-weight:800;
}

.bulk-price-summary-back:hover{
    border-color:#4a86bf;
    color:#ffffff;
}

.bulk-price-summary-confirm{
    margin-left:auto;
    height:42px;

    width:630px;
    min-width:630px;
    max-width:630px;

    padding:0 10px;

    border:1px solid rgba(240,199,97,.42);
    border-radius:10px;

    background:#2a2010;
    color:#f0d078;

    cursor:pointer;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    font-weight:900;
}

.bulk-price-summary-confirm small{
    color:#c6ae67;
    font-size:10px;
    font-weight:800;
}

.bulk-price-summary-empty{
    flex:1;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#73879b;

    font-size:11px;
}

/* =====================================================
   BULK CHANGE PRICE BUTTON
   Never block Parent SKU search
===================================================== */

#bulkChangePriceButton{
    position:absolute !important;

    left:18px;
    right:18px;
    bottom:18px;

    width:auto;

    margin-top:0;

    z-index:8 !important;
}


body[data-calculator-mode="bulk"]
.card.calculator{
    padding-bottom:90px;

    /* Do not stretch to match the right-side column height */
    align-self:start;
}
/* Hide an empty selection, but keep the disabled loading button visible. */
#bulkChangePriceButton:disabled:not(.is-loading){
    display:none !important;

    pointer-events:none !important;
}


/* Only appear once JS enables it */
body[data-calculator-mode="bulk"]
#bulkChangePriceButton:is(:not(:disabled), .is-loading){
    display:flex;

    align-items:center;
    justify-content:center;

    gap:10px;
}


/* Never show in Single mode */
body[data-calculator-mode="single"]
#bulkChangePriceButton{
    display:none !important;
}

/* =====================================================
   PARENT SKU FIND BUTTON
   Alfred amber / yellow action style
===================================================== */

/* =====================================================
   PARENT SKU FIND BUTTON
   Solid amber — no movement / gradient / glow
===================================================== */

.parent-find-btn{
    width:80px;
    height:42px;

    border:
        1px solid
        rgba(255,196,64,.48);

    border-radius:9px;

    background:#211b10;

    color:#ffd978;

    box-shadow:none;

    font-size:12px;
    font-weight:850;

    transform:none;

    transition:
        background .16s ease,
        border-color .16s ease,
        color .16s ease;
}


.parent-find-btn:hover{
    background:#2a2110;

    border-color:
        rgba(255,207,92,.78);

    color:#fff0bf;

    box-shadow:none;

    transform:none;

    filter:none;
}


.parent-find-btn:active{
    background:#302612;

    transform:none;

    box-shadow:none;

    filter:none;
}


/* =====================================================
   BR MANO — PLATFORM SUMMARY CARD
===================================================== */

.platform-summary-card.mano{
    --platform-accent:#3de1a1;
    --platform-soft:rgba(61,225,161,.15);
    --platform-border:rgba(61,225,161,.34);

    border-color:
        var(--platform-border);
}


.platform-summary-badge.mano{
    color:#3de1a1;
    border-color:#2f9f79;
}


.platform-summary-card.mano{
    --platform-accent:#3de1a1;
    --platform-soft:rgba(61,225,161,.15);
    --platform-border:rgba(61,225,161,.34);

    border-color:
        var(--platform-border);
}


.platform-summary-badge.mano{
    color:#3de1a1;
    border-color:#2f9f79;
}


/* =====================================================
   EMPTY / NOT FOUND STATE — LED STYLE
===================================================== */

.no-product-found-row td{
    padding:0 !important;
    border-bottom:none !important;
}


.no-product-found-wrap{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:48px 24px 54px;
}


.no-product-found-card{
    width:100%;
    max-width:660px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    text-align:center;
}


.no-product-found-graphic{
    position:relative;
    width:170px;
    height:150px;
    margin-bottom:18px;
}


.no-product-found-search{
    position:absolute;
    left:50%;
    top:50%;

    width:96px;
    height:96px;

    transform:translate(-50%,-56%);

    border-radius:50%;
    border:4px solid #5ca8ff;
    background:#071526;

    box-shadow:
        inset 0 0 0 2px rgba(92,168,255,.12),
        0 0 12px rgba(92,168,255,.18);

    animation:
        noProductSearchFloat 3s ease-in-out infinite;
}


.no-product-found-search::before{
    content:"?";
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-52%);
    color:#78b8ff;
    font-size:42px;
    font-weight:900;
    line-height:1;
    text-shadow:0 0 10px rgba(92,168,255,.28);
}


.no-product-found-search::after{
    content:"";
    position:absolute;
    right:-20px;
    bottom:-30px;

    width:18px;
    height:62px;

    border-radius:999px;
    background:#5ca8ff;

    transform:rotate(-43deg);

    box-shadow:
        0 0 10px rgba(92,168,255,.22);
}


.no-product-found-badge{
    position:absolute;
    top:2px;
    right:4px;

    min-width:88px;
    height:34px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0 14px;
    border-radius:999px;

    background:#081729;
    border:1px solid #5ca8ff;

    color:#86c0ff;
    font-size:11px;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;

    box-shadow:
        0 0 12px rgba(92,168,255,.16);

    animation:
        noProductBadgePulse 2.4s ease-in-out infinite;
}


.no-product-found-card--idle
.no-product-found-badge{
    border-color:#4de1b1;
    color:#58efbc;
    box-shadow:
        0 0 14px rgba(77,225,177,.18);
}


.no-product-found-card--error
.no-product-found-badge{
    border-color:#ff7ea8;
    color:#ff9cbc;
    box-shadow:
        0 0 14px rgba(255,126,168,.16);
}


.no-product-found-title{
    margin:0 0 12px 0;
    color:#eef5fc;
    font-size:54px;
    font-weight:900;
    line-height:1.08;
    letter-spacing:-.02em;
}


.no-product-found-text{
    margin:0 0 10px 0;
    color:#9aacbf;
    font-size:18px;
    font-weight:500;
    line-height:1.6;
}


.no-product-found-tip{
    margin:0;
    color:#74879c;
    font-size:16px;
    font-weight:700;
    line-height:1.55;
}


.no-product-found-tip b{
    color:#8cc1ff;
    font-weight:900;
}


@keyframes noProductSearchFloat{

    0%{
        transform:translate(-50%,-56%);
    }

    50%{
        transform:translate(-50%,-61%);
    }

    100%{
        transform:translate(-50%,-56%);
    }
}


@keyframes noProductBadgePulse{

    0%{
        opacity:.82;
    }

    50%{
        opacity:1;
    }

    100%{
        opacity:.82;
    }
}

.parent-product-summary[hidden]{
    display:none !important;
}

/* =====================================================
   BULK MODE — SEARCH EMPTY STATE
   Reuses Single mode LED empty-state design
===================================================== */

.bulk-search-state{
    width:100%;
    min-height:620px;

    display:flex;
    align-items:center;
    justify-content:center;
}


.bulk-search-state[hidden]{
    display:none !important;
}


body[data-calculator-mode="single"]
.bulk-search-state{
    display:none !important;
}


.bulk-search-state
.no-product-found-wrap{
    min-height:620px;

    padding:
        70px
        24px
        100px;
}

/* =====================================================
   BULK SEARCH — AUTOCOMPLETE ALWAYS ON TOP
===================================================== */

body[data-calculator-mode="bulk"]
.search-product{
    position:relative;

    z-index:2000;

    overflow:visible;
}


body[data-calculator-mode="bulk"]
.parent-search-row{
    position:relative;

    z-index:2200;

    overflow:visible;
}


body[data-calculator-mode="bulk"]
.parent-sku-autocomplete{
    position:relative;

    z-index:2300;

    overflow:visible;
}


body[data-calculator-mode="bulk"]
.parent-sku-suggestions{
    position:absolute;

    z-index:2400 !important;
}


body[data-calculator-mode="bulk"]
.bulk-catalog-filters{
    position:relative;

    z-index:300;
}


body[data-calculator-mode="bulk"]
.bulk-search-state{
    position:relative;

    z-index:1;
}


/* =====================================================
   BULK SEARCH — INPUT METHOD BUTTONS
===================================================== */

.parent-sku-input-shell{
    position:relative;

    width:100%;
    height:42px;
}


.parent-sku-input-shell
#parentSku{
    width:100%;
    height:100%;
}

.bulk-search-tools{
    position:absolute;

    right:8px;

    /* occupy the SAME vertical area as input */
    top:0;
    bottom:0;

    display:none;
    align-items:center;

    gap:5px;

    z-index:15;

    pointer-events:auto;

    transition:
        left .28s ease,
        right .28s ease;
}


/*
After one of the three tools is clicked,
the tool layer owns the WHOLE search input.
*/
.bulk-search-tools.bulk-search-tools--locked{
    left:0;
    right:0;

    z-index:30;
}



/* =====================================================
   LOCKED TOOL — SHOW ONLY SELECTED INPUT METHOD
===================================================== */

.bulk-search-tools--locked
.bulk-search-tool{
    display:none;
}


.bulk-search-tools--locked[data-active-tool="csv"]
.bulk-search-tool--csv{
    display:flex;
}


.bulk-search-tools--locked[data-active-tool="screenshot"]
.bulk-search-tool--screenshot{
    display:flex;
}





.bulk-search-tools--locked[data-active-tool="manual"]
.bulk-search-tool--manual{
    display:flex;
}




/* =====================================================
   SELECTED TOOL FILLS ENTIRE PARENT SKU BAR
===================================================== */

.bulk-search-tools--locked
.bulk-search-tool{
    width:100% !important;
    height:42px;

    flex:1 1 auto;

    justify-content:center;

    border-radius:9px;

    animation:none !important;
}


.bulk-search-tools--locked
.bulk-search-tool-label{
    max-width:220px;

    opacity:1;
}



/* CSV LOCKED */

.bulk-search-tools--locked[data-active-tool="csv"]
.bulk-search-tool--csv{
    border-color:#3de1a1;

    background:#10241f;

    color:#69efbd;
}


/* SCREENSHOT LOCKED */

.bulk-search-tools--locked[data-active-tool="screenshot"]
.bulk-search-tool--screenshot{
    border-color:#5ca8ff;

    background:#101e2d;

    color:#8bc4ff;
}


/* MANUAL LOCKED */

.bulk-search-tools--locked[data-active-tool="manual"]
.bulk-search-tool--manual{
    border-color:#ffbf4a;

    background:#241e12;

    color:#ffd476;
}


/* Only Bulk gets these controls */
body[data-calculator-mode="bulk"]
.bulk-search-tools{
    display:flex;
}


/*
Give the three icon buttons room
without covering typed SKU text.
*/
body[data-calculator-mode="bulk"]
#parentSku{
    padding-right:116px;
}


/* =====================================================
   BULK — SHOPIFY CATEGORY / TYPE / STATUS FILTERS
===================================================== */

.bulk-catalog-filters{
    display:none;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:10px;

    margin-top:12px;

    position:relative;

    z-index:300;
}


body[data-calculator-mode="bulk"]
.bulk-catalog-filters{
    display:grid;
}


.bulk-catalog-filter{
    position:relative;

    min-width:0;
}





.bulk-catalog-filter-clear{
    position:absolute;

    top:50%;
    right:34px;

    width:24px;
    height:24px;

    display:flex;
    align-items:center;
    justify-content:center;

    transform:translateY(-50%);

    border:0;
    border-radius:7px;

    background:transparent;

    color:#7f96ad;

    cursor:pointer;

    font-size:17px;
    font-weight:800;

    line-height:1;

    z-index:5;
}


.bulk-catalog-filter-clear:hover{
    background:
        rgba(255,255,255,.06);

    color:#ffffff;
}


.bulk-catalog-filter-clear[hidden]{
    display:none !important;
}











.bulk-catalog-filter-button{
    width:100%;
    min-width:0;
    min-height:50px;

    padding:8px 12px;

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    grid-template-rows:
        auto
        auto;

    column-gap:10px;

    align-items:center;

    text-align:left;

    border:
        1px solid
        #294259;

    border-radius:10px;

    background:
        #0a1520;

    color:#dce8f6;

    cursor:pointer;

    transition:
        border-color .16s ease,
        background .16s ease,
        box-shadow .16s ease;
}


.bulk-catalog-filter-button:hover{
    border-color:#4385c8;

    background:#0d1a27;
}


.bulk-catalog-filter-button > span{
    grid-column:1;

    color:#71879d;

    font-size:9px;
    font-weight:900;

    letter-spacing:.08em;
    text-transform:uppercase;
}


.bulk-catalog-filter-button > strong{
    grid-column:1;

    min-width:0;

    overflow:hidden;

    color:#edf4fb;

    font-size:12px;
    font-weight:850;

    white-space:nowrap;
    text-overflow:ellipsis;
    padding-right:28px;
}


.bulk-catalog-filter-button > i{
    grid-column:2;
    grid-row:1 / 3;

    color:#7f96ad;

    font-style:normal;
    font-size:16px;
}


.bulk-catalog-filter-menu{
    position:absolute;

    top:calc(100% + 6px);
    left:0;
    right:0;

    max-height:320px;

    overflow-y:auto;

    padding:6px;

    border:
        1px solid
        #294259;

    border-radius:10px;

    background:#09131e;

    box-shadow:
        0 18px 45px
        rgba(0,0,0,.42);

    z-index:600;
}


.bulk-catalog-filter-menu[hidden]{
    display:none !important;
}


.bulk-catalog-filter-hint{
    padding:7px 9px 8px;

    color:#60768d;

    font-size:9px;
    font-weight:700;

    border-bottom:
        1px solid
        #182a3d;

    margin-bottom:5px;
}


.bulk-catalog-filter-option{
    width:100%;

    padding:9px 10px;

    border:0;
    border-radius:7px;

    background:transparent;

    color:#aebed0;

    cursor:pointer;

    text-align:left;

    font-size:11px;
    font-weight:750;
}


.bulk-catalog-filter-option:hover{
    background:#102235;

    color:#ffffff;
}


.bulk-catalog-filter-option.active{
    background:
        rgba(47,148,255,.13);

    color:#77baff;
}


.bulk-catalog-filter-empty{
    padding:12px 10px;

    color:#71869c;

    font-size:10px;

    text-align:center;
}


.bulk-catalog-filter-status{
    display:none;

    min-height:18px;

    margin-top:7px;

    color:#5fd8ac;

    font-size:10px;
}


body[data-calculator-mode="bulk"]
.bulk-catalog-filter-status{
    display:block;
}


.bulk-catalog-filter-status.error{
    color:#ff7d8d;
}


.bulk-catalog-results-empty{
    padding:28px 20px;

    color:#8195aa;

    font-size:11px;

    text-align:center;
}


@media(max-width:900px){

    .bulk-catalog-filters{
        grid-template-columns:1fr;
    }
}



/* =====================================================
   INDIVIDUAL TOOL
===================================================== */
.bulk-search-tool{
    width:33px;
    height:30px;

    padding:
        0
        8px;

    display:flex;
    align-items:center;
    justify-content:flex-start;

    gap:7px;

    flex:0 0 auto;

    overflow:hidden;

    border:
        1px solid
        #29445e;

    border-radius:9px;

    background:#0d1926;

    color:#8fa7bf;

    cursor:pointer;

    white-space:nowrap;

    transition:
        width .22s ease,
        border-color .18s ease,
        background .18s ease,
        color .18s ease;
}


/* ICON */

.bulk-search-tool-icon{
    width:16px;
    height:16px;

    flex:
        0
        0
        16px;

    display:flex;
    align-items:center;
    justify-content:center;
}


.bulk-search-tool-icon svg{
    width:16px;
    height:16px;

    display:block;
}


/* TEXT — hidden until hover */

.bulk-search-tool-label{
    max-width:0;

    overflow:hidden;

    opacity:0;

    font-size:10px;
    font-weight:800;

    transition:
        max-width .20s ease,
        opacity .14s ease;
}


/* =====================================================
   EXPAND ON HOVER / KEYBOARD FOCUS
===================================================== */

/* =====================================================
   BULK INPUT TOOLS — LED COLOURS
===================================================== */


/* CSV — GREEN */

.bulk-search-tool--csv{
    border-color:#236f5c;
    color:#48d8a8;

    animation:
        bulkToolBreathGreen
        2.8s
        ease-in-out
        infinite;
}


.bulk-search-tool--csv:hover,
.bulk-search-tool--csv:focus-visible{
    width:98px;

    border-color:#3de1a1;
    background:#10241f;
    color:#69efbd;

    box-shadow:
        0 0 0 1px rgba(61,225,161,.18),
        0 0 12px rgba(61,225,161,.28);

    animation:none;
}


/* SCREENSHOT — BLUE */

.bulk-search-tool--screenshot{
    border-color:#315e8e;
    color:#72adf0;

    animation:
        bulkToolBreathBlue
        3.1s
        ease-in-out
        infinite;
}


.bulk-search-tool--screenshot:hover,
.bulk-search-tool--screenshot:focus-visible{
    width:116px;

    border-color:#5ca8ff;
    background:#101e2d;
    color:#8bc4ff;

    box-shadow:
        0 0 0 1px rgba(92,168,255,.18),
        0 0 12px rgba(92,168,255,.28);

    animation:none;
}


/* MANUAL — AMBER */

.bulk-search-tool--manual{
    border-color:#76591d;
    color:#d8ad54;

    animation:
        bulkToolBreathAmber
        3.4s
        ease-in-out
        infinite;
}


.bulk-search-tool--manual:hover,
.bulk-search-tool--manual:focus-visible{
    width:114px;

    border-color:#ffbf4a;
    background:#241e12;
    color:#ffd476;

    box-shadow:
        0 0 0 1px rgba(255,191,74,.16),
        0 0 12px rgba(255,191,74,.25);

    animation:none;
}

/* =====================================================
   BULK TOOL LED BREATH
===================================================== */

@keyframes bulkToolBreathGreen{

    0%,
    100%{
        border-color:#236f5c;

        box-shadow:
            0 0 0 rgba(61,225,161,0);
    }

    50%{
        border-color:#38b98c;

        box-shadow:
            0 0 9px rgba(61,225,161,.22);
    }
}


@keyframes bulkToolBreathBlue{

    0%,
    100%{
        border-color:#315e8e;

        box-shadow:
            0 0 0 rgba(92,168,255,0);
    }

    50%{
        border-color:#4a8fd5;

        box-shadow:
            0 0 9px rgba(92,168,255,.22);
    }
}


@keyframes bulkToolBreathAmber{

    0%,
    100%{
        border-color:#76591d;

        box-shadow:
            0 0 0 rgba(255,191,74,0);
    }

    50%{
        border-color:#c39231;

        box-shadow:
            0 0 9px rgba(255,191,74,.20);
    }
}


.bulk-search-tool:hover
.bulk-search-tool-label,

.bulk-search-tool:focus-visible
.bulk-search-tool-label{
    max-width:90px;
    opacity:1;
}


/* =====================================================
   SMALL SCREEN — KEEP ICONS COMPACT
===================================================== */

@media(max-width:900px){

    .bulk-search-tool:hover,
    .bulk-search-tool:focus-visible{
        width:34px;
    }


    .bulk-search-tool-label{
        display:none;
    }


    body[data-calculator-mode="bulk"]
    #parentSku{
        padding-right:126px;
    }
}

/* =====================================================
   BULK INPUT CHOOSER
   CSV / SCREENSHOT / MANUAL
===================================================== */

.bulk-search-default-view[hidden],
.bulk-input-chooser[hidden]{
    display:none !important;
}


.bulk-search-default-view{
    width:100%;
}


.bulk-input-chooser{
    width:100%;
    min-height:620px;

    padding:
        54px
        36px
        70px;

    display:flex;
    flex-direction:column;
    justify-content:center;
}


.bulk-input-chooser-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:24px;

    margin-bottom:28px;
}


.bulk-input-chooser-eyebrow{
    margin-bottom:8px;

    color:#55e6ae;

    font-size:11px;
    font-weight:900;

    letter-spacing:.18em;
}


.bulk-input-chooser-title{
    margin:
        0
        0
        8px;

    color:#f4f7fb;

    font-size:30px;
    font-weight:900;
}


.bulk-input-chooser-subtitle{
    margin:0;

    color:#8496aa;

    font-size:13px;
}


.bulk-input-chooser-back{
    height:38px;

    padding:
        0
        16px;

    border:
        1px solid
        #29445e;

    border-radius:9px;

    background:#0c1723;

    color:#a7bad0;

    cursor:pointer;

    font-size:11px;
    font-weight:800;
}


.bulk-input-chooser-back:hover{
    border-color:#4b7da9;

    color:#ffffff;
}


/* =====================================================
   HORIZONTAL TWO-OPTION LAYOUT
===================================================== */

.bulk-input-choice-grid{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(0,1fr);

    gap:22px;
}


.bulk-input-choice-card{
    position:relative;

    min-width:0;
    min-height:360px;

    padding:22px;

    display:flex;
    flex-direction:column;

    text-align:left;

    border:
        1px solid
        #29425d;

    border-radius:16px;

    background:#091522;

    color:#eef5ff;

    cursor:pointer;

    overflow:hidden;

    transition:
        border-color .18s ease,
        background .18s ease;
}


.bulk-input-choice-card:hover{
    border-color:#4b91d8;

    background:#0c1a29;
}


/* =====================================================
   SCREENSHOT DROP TARGET
===================================================== */

.bulk-input-chooser[data-tool="screenshot"]
.bulk-input-choice-card.is-screenshot-drag-target{

    border-color:#5ca8ff;

    background:#101e2d;

    animation:
        bulkScreenshotDropBreath
        1.15s
        ease-in-out
        infinite;
}


@keyframes bulkScreenshotDropBreath{

    0%,
    100%{

        border-color:#315e8e;

        box-shadow:
            0 0 0 1px
            rgba(92,168,255,.08);
    }


    50%{

        border-color:#5ca8ff;

        box-shadow:
            0 0 0 1px
            rgba(92,168,255,.30),
            0 0 18px
            rgba(92,168,255,.20);
    }
}

.bulk-input-choice-number{
    margin-bottom:18px;

    color:#6792bb;

    font-size:9px;
    font-weight:900;

    letter-spacing:.17em;
}


.bulk-input-choice-card h4{
    margin:
        0
        0
        9px;

    color:#ffffff;

    font-size:19px;
    font-weight:900;
}


.bulk-input-choice-card > p{
    min-height:58px;

    margin:
        0
        0
        20px;

    color:#8fa1b5;

    font-size:11px;
    line-height:1.6;
}


/* =====================================================
   PREVIEW AREA
===================================================== */

.bulk-choice-preview{
    position:relative;

    flex:1;

    min-height:180px;

    border:
        1px solid
        #20374f;

    border-radius:12px;

    background:#07111c;

    overflow:hidden;
}


/* =====================================================
   OPTION 01 — SPREADSHEET FORMAT
===================================================== */

.bulk-choice-table{
    width:100%;
}


.bulk-choice-table-row{
    min-height:48px;

    padding:
        0
        13px;

    display:grid;

    grid-template-columns:
        1.15fr
        .75fr
        1.35fr
        .72fr;

    gap:10px;

    align-items:center;

    border-bottom:
        1px solid
        #17283a;

    color:#afbdd0;

    font-size:9px;
    font-weight:700;
}


.bulk-choice-table-head{
    color:#70a9de;

    font-size:8px;
    font-weight:900;

    letter-spacing:.08em;

    background:#0d1b2a;
}


.bulk-choice-active{
    color:#55e6ae;
}


.bulk-choice-draft{
    color:#ffbf4a;
}


/* =====================================================
   OPTION 02 — SKU ONLY
===================================================== */

.bulk-choice-sku-preview{
    padding:16px;

    display:flex;
    flex-direction:column;

    justify-content:center;

    gap:10px;
}


.bulk-choice-sku-row{
    min-height:42px;

    padding:
        0
        12px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;

    border:
        1px solid
        #223950;

    border-radius:8px;

    background:#0b1825;

    color:#c5d3e4;

    font-size:10px;
    font-weight:800;
}


.bulk-choice-sku-row strong{
    color:#55e6ae;

    font-size:8px;

    letter-spacing:.1em;
}


.bulk-choice-sku-row em{
    color:#71879d;

    font-style:normal;

    font-size:8px;
}


/* =====================================================
   CHOOSER ENTRANCE
===================================================== */

.bulk-input-chooser-enter{
    animation:
        bulkInputChooserEnter
        .28s
        ease
        both;
}


@keyframes bulkInputChooserEnter{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }
}


/* =====================================================
   CSV ANIMATION
   Spreadsheet row scanner
===================================================== */

.bulk-input-chooser[data-tool="csv"]
.bulk-choice-template-preview::after{
    content:"";

    position:absolute;

    left:0;
    right:0;

    top:46px;

    height:2px;

    background:#55e6ae;

    opacity:.65;

    animation:
        bulkCsvRowScan
        2.6s
        ease-in-out
        infinite;
}


@keyframes bulkCsvRowScan{

    0%{
        top:46px;
        opacity:.25;
    }

    50%{
        top:142px;
        opacity:.8;
    }

    100%{
        top:46px;
        opacity:.25;
    }
}


/* =====================================================
   SCREENSHOT ANIMATION
   Camera scan frame
===================================================== */

.bulk-input-chooser[data-tool="screenshot"]
.bulk-choice-preview::after{
    content:"";

    position:absolute;

    left:14px;
    right:14px;

    top:14px;

    height:48px;

    border:
        1px solid
        #5ca8ff;

    border-radius:7px;

    opacity:.65;

    animation:
        bulkScreenshotScan
        2.4s
        ease-in-out
        infinite;
}


@keyframes bulkScreenshotScan{

    0%{
        top:14px;
        opacity:.25;
    }

    50%{
        top:112px;
        opacity:.8;
    }

    100%{
        top:14px;
        opacity:.25;
    }
}


/* =====================================================
   MANUAL ANIMATION
   Typing caret
===================================================== */

.bulk-input-chooser[data-tool="manual"]
.bulk-choice-preview::after{
    content:"";

    position:absolute;

    left:24px;
    bottom:20px;

    width:2px;
    height:18px;

    background:#ffbf4a;

    animation:
        bulkManualCaret
        .85s
        steps(1)
        infinite;
}


@keyframes bulkManualCaret{

    0%,
    45%{
        opacity:1;
    }

    46%,
    100%{
        opacity:0;
    }
}


/* =====================================================
   SKU ONLY — ACTIVE PRIORITY ANIMATION
===================================================== */

.bulk-choice-sku-row:first-child{
    animation:
        bulkActivePriority
        2.3s
        ease-in-out
        infinite;
}


@keyframes bulkActivePriority{

    0%,
    100%{
        border-color:#223950;
    }

    50%{
        border-color:#2f8d6d;
    }
}



/* =====================================================
   BULK IMPORT — DATA HEALTH
   TAKES OVER SELECTED PRODUCTS CARD ONLY
===================================================== */

.bulk-import-health-panel[hidden]{
    display:none !important;
}


/* =====================================================
   SELECTED PRODUCTS TAKEOVER
===================================================== */

.bulk-selected-products-card.import-health-active{
    min-height:0;

    background:transparent;

    border-color:
        rgba(255,255,255,.18);
}


.bulk-selected-products-card.import-health-active
> .bulk-selected-products-head,

.bulk-selected-products-card.import-health-active
> .bulk-selected-toolbar,

.bulk-selected-products-card.import-health-active
> .bulk-selected-products-content{
    display:none !important;
}


.bulk-selected-products-card.import-health-active
> .bulk-import-health-panel{
    display:flex;

    width:100%;

    flex-direction:column;

    overflow:hidden;

    transition:
        background-color
        .38s
        ease;
}

/* =====================================================
   WHOLE DATA HEALTH CARD FOLLOWS ACTIVE SLIDE
===================================================== */
.bulk-selected-products-card.import-health-active
> .bulk-import-health-panel[data-slide="0"]{
    background:#173a45;
}


.bulk-selected-products-card.import-health-active
> .bulk-import-health-panel[data-slide="1"]{
    background:#163d31;
}


.bulk-selected-products-card.import-health-active
> .bulk-import-health-panel[data-slide="2"]{
    background:#4a3c16;
}


.bulk-selected-products-card.import-health-active
> .bulk-import-health-panel[data-slide="3"]{
    background:#4a232c;
}

.bulk-selected-products-card.import-health-active
> .bulk-import-health-panel[data-slide="4"]{
    background:#35284a;
}
/* =====================================================
   HEADER
===================================================== */

.bulk-import-health-head{
    flex:0 0 auto;

    min-height:92px;

    padding:
        18px
        20px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:18px;

    border-bottom:
        1px solid
        rgba(255,255,255,.16);

    background:transparent;
}

.bulk-import-health-source{
    margin-bottom:5px;

    color:
        rgba(255,255,255,.82);

    font-size:10px;
    font-weight:900;

    letter-spacing:.16em;
}


.bulk-import-health-head h3{
    margin:0;

    color:#f3f7fc;

    font-size:20px;
    font-weight:900;
}


.bulk-import-health-head small{
    display:block;

    margin-top:5px;

    color:#788da2;

    font-size:10px;
}


.bulk-import-health-lock{
    width:42px;
    height:42px;

    flex:0 0 42px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:
        1px solid
        rgba(255,255,255,.26);

    border-radius:11px;

    background:
        rgba(4,14,22,.20);

    color:#ffffff;

    cursor:pointer;

    font-size:20px;
}




.bulk-import-health-lock{
    cursor:pointer;

    transition:
        border-color .18s ease,
        background .18s ease,
        color .18s ease;
}


.bulk-import-health-lock svg{
    width:19px;
    height:19px;

    display:block;
}


.bulk-import-health-lock-open,
.bulk-import-health-lock-closed{
    display:flex;
    align-items:center;
    justify-content:center;
}


.bulk-import-health-lock-closed{
    display:none;
}


/* LOCKED */

.bulk-import-health-lock.is-locked{
    border-color:#ffbf4a;

    background:#241e12;

    color:#ffd476;
}


.bulk-import-health-lock.is-locked
.bulk-import-health-lock-open{
    display:none;
}


.bulk-import-health-lock.is-locked
.bulk-import-health-lock-closed{
    display:flex;
}

/* =====================================================
   EXACT 313PX SLIDESHOW AREA
===================================================== */

.bulk-import-health-viewport{
    position:relative;

    flex:
        0
        0
        313px;

    width:100%;
    height:313px;

    overflow:hidden;
}


.bulk-import-health-track{
    width:500%;
    height:313px;

    display:flex;

    transform:
        translateX(0);

    transition:
        transform
        .48s
        cubic-bezier(.22,1,.36,1);
}


.bulk-import-health-slide{
    flex:
        0
        0
        20%;

    width:20%;
    height:313px;

    min-width:0;

    padding:
        22px
        28px;

    display:flex;
    flex-direction:column;

    overflow:hidden;
}


/* =====================================================
   COLOURED SLIDES
===================================================== */


.bulk-import-health-slide--overview,
.bulk-import-health-slide--success,
.bulk-import-health-slide--draft,
.bulk-import-health-slide--failed,
.bulk-import-health-slide--duplicate{
    background:transparent;
}
/* =====================================================
   INVISIBLE LEFT / RIGHT CLICK AREAS
===================================================== */

.bulk-import-health-click-zone{
    position:absolute;

    top:0;
    bottom:0;

    width:18%;

    z-index:8;

    padding:0;
    margin:0;

    border:0;

    background:transparent;

    cursor:pointer;
}


.bulk-import-health-click-zone--prev{
    left:0;
}


.bulk-import-health-click-zone--next{
    right:0;
}


.bulk-import-health-click-zone:focus{
    outline:none;
}


/* =====================================================
   COMMON SLIDE HEADER
===================================================== */

.bulk-health-slide-top{
    display:flex;
    align-items:center;

    gap:15px;

    flex:0 0 auto;

    min-height:72px;
}


.bulk-health-slide-icon{
    width:58px;
    height:58px;

    flex:
        0
        0
        58px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:
        1px solid
        rgba(255,255,255,.26);

    border-radius:50%;

    background:
        rgba(4,14,22,.25);

    color:#ffffff;

    font-size:28px;
    font-weight:900;
}


.bulk-health-slide-copy{
    min-width:0;

    flex:1;
}


.bulk-health-slide-eyebrow{
    margin-bottom:5px;

    color:
        rgba(255,255,255,.74);

    font-size:9px;
    font-weight:900;

    letter-spacing:.18em;
}


.bulk-health-slide-copy h2{
    margin:0;

    color:#ffffff;

    font-size:25px;
    line-height:1.05;

    font-weight:900;
}


.bulk-health-slide-copy p{
    margin:
        7px
        0
        0;

    color:
        rgba(255,255,255,.70);

    font-size:10px;

    line-height:1.4;
}


/* =====================================================
   RESULT COUNT PILL
===================================================== */

.bulk-health-slide-count{
    flex:0 0 auto;

    padding:
        8px
        11px;

    border:
        1px solid
        rgba(255,255,255,.28);

    border-radius:999px;

    background:
        rgba(4,14,22,.24);

    color:#ffffff;

    font-size:10px;
    font-weight:900;
}


/* =====================================================
   SLIDE 01 — OVERVIEW PANEL
===================================================== */

.bulk-health-overview-panel{
    margin-top:16px;

    flex:1;

    min-height:0;

    padding:
        13px;

    display:flex;
    flex-direction:column;

    border:
        1px solid
        rgba(255,255,255,.22);

    border-radius:15px;

    background:
        rgba(4,14,22,.23);
}


.bulk-health-overview-grid{
    display:grid;

    grid-template-columns:
        repeat(
            6,
            minmax(0,1fr)
        );

    gap:8px;
}

.bulk-health-overview-item{
    min-width:0;

    height:76px;

    padding:
        10px
        11px;

    display:flex;
    flex-direction:column;
    justify-content:center;

    border:
        1px solid
        rgba(255,255,255,.16);

    border-radius:10px;

    background:
        rgba(4,14,22,.26);
}


.bulk-health-overview-item span{
    margin-bottom:6px;

    color:
        rgba(255,255,255,.62);

    font-size:7px;
    font-weight:900;

    letter-spacing:.08em;

    text-transform:uppercase;
}


.bulk-health-overview-item strong{
    color:#ffffff;

    font-size:20px;
    font-weight:900;
}


.bulk-health-overview-item.success{
    border-color:#4edca8;
}


.bulk-health-overview-item.success strong{
    color:#5af0b6;
}


.bulk-health-overview-item.draft{
    border-color:#dfb634;
}


.bulk-health-overview-item.draft strong{
    color:#ffd45d;
}


.bulk-health-overview-item.failed{
    border-color:#e0677d;
}


.bulk-health-overview-item.failed strong{
    color:#ff8ca0;
}

.bulk-health-overview-item.duplicate{
    border-color:#a77cff;
}


.bulk-health-overview-item.duplicate strong{
    color:#c5a5ff;
}
/* =====================================================
   CLASSIFICATION
===================================================== */

.bulk-health-classification-line{
    margin-top:8px;

    min-height:36px;

    padding:
        0
        11px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;

    border:
        1px solid
        rgba(255,255,255,.16);

    border-radius:9px;

    background:
        rgba(4,14,22,.22);
}


.bulk-health-classification-line span{
    color:
        rgba(255,255,255,.62);

    font-size:8px;
    font-weight:800;
}


.bulk-health-classification-line strong{
    color:#ffffff;

    font-size:9px;
    font-weight:900;
}


/* =====================================================
   RESULT SLIDES INNER PANEL
===================================================== */

.bulk-health-result-panel{
    margin-top:15px;

    flex:1;

    min-height:0;

    padding:
        11px;

    border:
        1px solid
        rgba(255,255,255,.22);

    border-radius:15px;

    background:
        rgba(4,14,22,.23);

    overflow:hidden;
}


/* =====================================================
   RESULT LIST
===================================================== */

.bulk-import-health-list{
    width:100%;
    height:100%;

    display:flex;
    flex-direction:column;

    gap:7px;

    overflow-y:auto;

    padding-right:3px;
}


.bulk-import-health-row{
    flex:0 0 auto;

    min-height:49px;

    padding:
        8px
        10px;

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    align-items:center;

    gap:10px;

    border:
        1px solid
        rgba(255,255,255,.15);

    border-radius:9px;

    background:
        rgba(4,14,22,.27);
}


.bulk-import-health-row strong{
    display:block;

    overflow:hidden;

    color:#ffffff;

    font-size:15px;
    font-weight:900;

    white-space:nowrap;

    text-overflow:ellipsis;
}


.bulk-import-health-row small{
    display:block;

    margin-top:4px;

    color:
        rgba(255,255,255,.60);

    font-size:12px;

    line-height:1.3;
}


/* =====================================================
   STATUS PILLS
===================================================== */

.bulk-import-health-status{
    flex:0 0 auto;

    padding:
        5px
        7px;

    border-radius:999px;

    background:
        rgba(4,14,22,.18);

    font-size:7px;
    font-weight:900;
}


.bulk-import-health-status.success{
    border:
        1px solid
        #4edca8;

    color:#5af0b6;
}


.bulk-import-health-status.draft{
    border:
        1px solid
        #dfb634;

    color:#ffd45d;
}


.bulk-import-health-status.failed{
    border:
        1px solid
        #e0677d;

    color:#ff8ca0;
}

.bulk-import-health-status.suspicious{
    border:
        1px solid
        #e0a83d;

    color:
        #ffc857;

    background:
        rgba(
            224,
            168,
            61,
            0.10
        );
}

.bulk-import-health-status.duplicate{
    border:
        1px solid
        #a77cff;

    color:#c5a5ff;
}
/* =====================================================
   EMPTY CATEGORY
===================================================== */

.bulk-import-health-empty{
    width:100%;
    height:100%;

    min-height:0;

    display:flex;
    align-items:center;
    justify-content:center;

    border:
        1px dashed
        rgba(255,255,255,.23);

    border-radius:10px;

    background:
        rgba(4,14,22,.18);

    color:
        rgba(255,255,255,.68);

    font-size:9px;

    text-align:center;
}


/* =====================================================
   PAGE NUMBER
===================================================== */

.bulk-import-health-footer{
    flex:
        0
        0
        38px;

    height:38px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-top:
        1px solid
        rgba(255,255,255,.16);

    background:transparent;
}


.bulk-import-health-footer span{
    min-width:48px;

    color:#9eb3c9;

    font-size:10px;
    font-weight:900;

    text-align:center;
}

.parent-find-btn:disabled{
    cursor:not-allowed;

    opacity:.38;

    pointer-events:none;
}

/* =====================================================
   BULK BASE — SAME POINTER HOVER AS SINGLE MODE
===================================================== */

.bulk-price-summary-choice::before{

    content:"";

    position:absolute;
    inset:0;

    border-radius:inherit;

    padding:1px;

    pointer-events:none;

    z-index:3;

    -webkit-mask:
        linear-gradient(#000 0 0)
        content-box,
        linear-gradient(#000 0 0);

    -webkit-mask-composite:
        xor;

    mask-composite:
        exclude;

    clip-path:
        circle(
            0%
            at
            var(--hover-x, 50%)
            var(--hover-y, 50%)
        );

    transition:
        clip-path
        .55s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        );
}


.bulk-price-summary-choice--low::before{
    background:#ff6677;
}

.bulk-price-summary-choice--medium::before{
    background:#ffc94f;
}

.bulk-price-summary-choice--high::before{
    background:#3de1a1;
}


.bulk-price-summary-choice:not(.is-active):hover::before{

    clip-path:
        circle(
            160%
            at
            var(--hover-x, 50%)
            var(--hover-y, 50%)
        );
}


.bulk-price-summary-choice.is-active::before{

    clip-path:
        circle(
            0%
            at
            var(--hover-x, 50%)
            var(--hover-y, 50%)
        ) !important;

    transition:none !important;
}


.bulk-price-summary-choice--low:not(.is-active):hover{
    box-shadow:
        0 8px 26px
        rgba(255,102,119,.08);
}

.bulk-price-summary-choice--medium:not(.is-active):hover{
    box-shadow:
        0 8px 26px
        rgba(255,201,79,.08);
}

.bulk-price-summary-choice--high:not(.is-active):hover{
    box-shadow:
        0 8px 26px
        rgba(61,225,161,.08);
}


.bulk-price-summary-choice--low:not(.is-active):hover span{
    color:#ff8292;
}

.bulk-price-summary-choice--medium:not(.is-active):hover span{
    color:#ffd369;
}

.bulk-price-summary-choice--high:not(.is-active):hover span{
    color:#65eebe;
}

/* =====================================================
   MANUAL ENTRY — DARK SPREADSHEET
===================================================== */

.bulk-manual-entry-editor[hidden]{
    display:none !important;
}


.bulk-manual-entry-editor{
    width:100%;
    min-height:620px;

    padding:
        42px
        36px
        34px;

    display:flex;
    flex-direction:column;

    background:#0b1420;
}


.bulk-manual-entry-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:24px;

    margin-bottom:22px;
}


.bulk-manual-entry-eyebrow{
    margin-bottom:8px;

    color:#ffbf4a;

    font-size:11px;
    font-weight:900;

    letter-spacing:.18em;
}


.bulk-manual-entry-title{
    margin:
        0
        0
        8px;

    color:#f4f7fb;

    font-size:28px;
    font-weight:900;
}


.bulk-manual-entry-subtitle{
    margin:0;

    color:#8496aa;

    font-size:13px;
}


.bulk-manual-entry-back{
    height:38px;

    padding:
        0
        16px;

    border:
        1px solid
        #344960;

    border-radius:9px;

    background:#0c1723;

    color:#b4c2d2;

    cursor:pointer;

    font-size:11px;
    font-weight:800;
}


.bulk-manual-entry-back:hover{
    border-color:#ffbf4a;
    color:#ffffff;
}


.bulk-manual-entry-toolbar{
    min-height:48px;

    padding:
        8px
        10px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:16px;

    border:
        1px solid
        #263a50;

    border-bottom:none;

    background:#0d1926;
}


.bulk-manual-entry-hint{
    color:#a4b2c3;

    font-size:11px;
}


.bulk-manual-entry-hint b{
    color:#ffcf6c;
}


.bulk-manual-entry-toolbar-actions{
    display:flex;
    align-items:center;

    gap:7px;
}


.bulk-manual-entry-toolbar-actions button{
    height:30px;

    padding:
        0
        11px;

    border:
        1px solid
        #30465d;

    border-radius:7px;

    background:#0b1622;

    color:#c8d4e2;

    cursor:pointer;

    font-size:10px;
    font-weight:800;
}


.bulk-manual-entry-toolbar-actions button:hover{
    border-color:#ffbf4a;

    color:#ffffff;
}


.bulk-manual-sheet-wrap{
    width:100%;
    max-height:400px;

    overflow:auto;

    border:
        1px solid
        #263a50;

    background:#08111b;
}


.bulk-manual-sheet{
    min-width:760px;
}


.bulk-manual-sheet[data-mode="sku-only"]{
    min-width:520px;
}


/* =====================================================
   HEADERS
===================================================== */

.bulk-manual-sheet-head{
    position:sticky;
    top:0;

    z-index:2;

    min-height:38px;

    display:grid;
    align-items:center;

    background:#111e2c;

    border-bottom:
        1px solid
        #32475d;
}


.bulk-manual-sheet-head--full{
    grid-template-columns:
        48px
        minmax(220px,1.45fr)
        minmax(110px,.70fr)
        minmax(145px,.85fr)
        minmax(135px,.75fr)
        minmax(135px,.75fr);
}


.bulk-manual-sheet-head--sku{
    grid-template-columns:
        48px
        minmax(420px,1fr);
}


.bulk-manual-sheet-head span{
    height:100%;

    padding:
        0
        12px;

    display:flex;
    align-items:center;

    border-right:
        1px solid
        #293d52;

    color:#79aee0;

    font-size:10px;
    font-weight:900;

    letter-spacing:.08em;
}


.bulk-manual-sheet-head span:first-child{
    justify-content:center;

    color:#63768a;
}


/* =====================================================
   ROWS
===================================================== */

.bulk-manual-sheet-row{
    min-height:42px;

    display:grid;
    align-items:stretch;

    border-bottom:
        1px solid
        #1e3042;

    background:#0a1420;
}


.bulk-manual-sheet-row--full{
    grid-template-columns:
        48px
        minmax(220px,1.45fr)
        minmax(110px,.70fr)
        minmax(145px,.85fr)
        minmax(135px,.75fr)
        minmax(135px,.75fr);
}







.bulk-manual-sheet-row--sku{
    grid-template-columns:
        48px
        minmax(420px,1fr);
}


.bulk-manual-row-number{
    display:flex;
    align-items:center;
    justify-content:center;

    border-right:
        1px solid
        #293d52;

    color:#65778b;

    font-size:10px;
    font-weight:800;

    user-select:none;
}


.bulk-manual-sheet-row input,
.bulk-manual-sheet-row select{
    width:100%;
    min-width:0;
    height:42px;

    padding:
        0
        12px;

    border:none;
    border-right:
        1px solid
        #293d52;

    outline:none;

    background:#0a1420;

    color:#edf4fb;

    font-size:11px;
    font-weight:700;
}


.bulk-manual-sheet-row input::placeholder{
    color:#526579;
}


.bulk-manual-sheet-row input:focus,
.bulk-manual-sheet-row select:focus{
    background:#132131;

    box-shadow:
        inset 0 0 0 0.5px
        #ffbf4a;
}


.bulk-manual-sheet-row select{
    color:#d6e1ed;

    cursor:pointer;
}


/* =====================================================
   MANUAL FOOTER
===================================================== */

.bulk-manual-entry-footer{
    min-height:58px;

    padding:
        10px
        12px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:18px;

    border:
        1px solid
        #263a50;

    border-top:none;

    background:#0d1926;
}


.bulk-manual-entry-status{
    color:#8fa0b4;

    font-size:11px;
}


.bulk-manual-process-btn{
    min-width:580px;
    height:38px;

    border:
        1px solid
        #9a741f;

    border-radius:9px;

    background:#2a210e;

    color:#ffd46d;

    cursor:pointer;

    font-size:12px;
    font-weight:900;
}


.bulk-manual-process-btn:hover{
    border-color:#ffbf4a;

    background:#332710;

    color:#ffe29a;
}


@media(max-width:900px){

    .bulk-manual-entry-editor{
        padding:
            26px
            16px
            24px;
    }


    .bulk-manual-entry-head{
        gap:12px;
    }


    .bulk-manual-entry-title{
        font-size:23px;
    }


    .bulk-manual-entry-toolbar{
        align-items:flex-start;
        flex-direction:column;
    }


    .bulk-manual-entry-footer{
        align-items:stretch;
        flex-direction:column;
    }


    .bulk-manual-process-btn{
        width:100%;
    }
}


/* =====================================================
   MANUAL SPREADSHEET — STATUS RESOLUTION
===================================================== */

.bulk-manual-sheet-row
select.is-resolving{
    color:#79aee0;
}


.bulk-manual-sheet-row
select.is-resolved{
    color:#60e2af;
}


.bulk-manual-sheet-row
select.is-not-found{
    color:#ff8292;
}


/* =====================================================
   EXCEL / GOOGLE SHEETS FILL HANDLE
===================================================== */

.bulk-manual-fill-handle{
    position:fixed;

    z-index:9999;

    width:10px;
    height:10px;

    border:
        2px solid
        #dcecff;

    border-radius:50%;

    background:#287cff;

    cursor:crosshair;

    touch-action:none;
}


.bulk-manual-fill-handle[hidden]{
    display:none !important;
}


.bulk-manual-sheet-row
.is-fill-preview{
    box-shadow:
        inset 0 0 0 1px
        #287cff !important;
}

/* =====================================================
   BULK IMPORT TOOL — REAL PROCESSING PROGRESS
===================================================== */

.bulk-search-tools{
    --bulk-import-progress:0%;
}


/*
Selected button becomes the progress track.
*/
.bulk-search-tool{
    position:relative;

    isolation:isolate;
}


/*
Progress layer.
Starts at the LEFT and grows toward RIGHT.
*/
.bulk-search-tool::before{
    content:"";

    position:absolute;

    left:0;
    top:0;
    bottom:0;

    width:0;

    z-index:0;

    pointer-events:none;

    transition:
        width .34s ease;
}


/*
Only expose the progress width
while actual processing is happening.
*/
.bulk-search-tools--processing
.bulk-search-tool::before{
    width:
        var(
            --bulk-import-progress
        );
}


/* CSV / EXCEL — GREEN */

.bulk-search-tool--csv::before{
    background:
        rgba(
            61,
            225,
            161,
            .24
        );
}


/* SCREENSHOT — BLUE */

.bulk-search-tool--screenshot::before{
    background:
        rgba(
            92,
            168,
            255,
            .24
        );
}


/* MANUAL — AMBER */

.bulk-search-tool--manual::before{
    background:
        rgba(
            255,
            191,
            74,
            .22
        );
}


/*
Keep icon and text ABOVE progress colour.
*/
.bulk-search-tool-icon,
.bulk-search-tool-label{
    position:relative;

    z-index:2;
}

/* =====================================================
   DYNAMIC TOP 5 — PLATFORM DRAG / DROP
===================================================== */


/*
All dynamic Top cards use whatever
platform colour JS assigns to them.
*/
.platform-summary-card[data-platform-key]{
    border-color:
        var(
            --platform-border
        );
}


/*
Dynamic badges also follow the
platform's own colour.
*/
.platform-summary-card[data-platform-key]
.platform-summary-badge{
    color:
        var(
            --platform-accent
        );

    border-color:
        var(
            --platform-accent
        );
}


/* =====================================================
   TABLE PLATFORM ICON — AVAILABLE
===================================================== */

.platform-store-mark.platform-drag-available{
    cursor:grab;

    opacity:1;

    transition:
        border-color .16s ease,
        background-color .16s ease,
        opacity .16s ease;
}


.platform-store-mark.platform-drag-available:hover{
    border-color:
        currentColor;

    background:#101d2a;
}


.platform-store-mark.platform-drag-available:active{
    cursor:grabbing;
}


/* =====================================================
   TABLE PLATFORM ICON — ALREADY IN TOP 5
===================================================== */

.platform-store-mark.platform-drag-disabled{
    cursor:not-allowed;

    opacity:1;
}


/* =====================================================
   WHILE DRAGGING — ALL FIVE CARDS ARE DROP ZONES
===================================================== */

.platform-summary-card.platform-drop-ready{
    border-style:dashed;
}


/*
Current card under the mouse.
*/
.platform-summary-card.platform-drop-target{
    border-style:solid;

    border-width:2px;

    border-color:#4da3ff;

    background:#0c1825;
}

/* =====================================================
   TOP PLATFORM CARDS — REORDER DRAG
===================================================== */

.platform-summary-card[data-platform-slot]{
    cursor:grab;
}


.platform-summary-card[data-platform-slot]:active{
    cursor:grabbing;
}


/*
Do not dim the source card.
Just identify it using its own border.
*/
.platform-summary-card.platform-card-drag-source{
    border-style:dashed;
}


/*
Other cards become available swap targets.
*/
.platform-summary-card.platform-drop-ready{
    cursor:grabbing;
}


/*
Card currently under the dragged banner.
*/
.platform-summary-card.platform-drop-target{
    border-width:2px;

    border-style:solid;

    border-color:#4da3ff;
}


/* =========================================================
   BULK SHOPIFY CONFIRMATION — FOOTER BUTTONS
========================================================= */

#bulkPriceWriteConfirmPanel
.bulk-import-health-footer{

    flex:
        0 0 auto;

    width:
        100%;

    height:
        auto;

    min-height:
        72px;

    padding:
        12px
        18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    box-sizing:
        border-box;
}


/* =========================================================
   BOTH BUTTONS
========================================================= */

#bulkPriceWriteBackButton,
#bulkPriceWriteConfirmYes{

    height:
        46px;

    padding:
        0
        22px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        10px;

    font-size:
        12px;

    font-weight:
        900;

    line-height:
        1;

    white-space:
        nowrap;
}


/* =========================================================
   BACK
========================================================= */

#bulkPriceWriteBackButton{

    min-width:
        140px;

    border:
        1px solid
        #31485f;

    background:
        #0c1825;

    color:
        #cbd8e7;

    cursor:
        pointer;
}


#bulkPriceWriteBackButton:hover:not(:disabled){

    border-color:
        #52718f;

    background:
        #122233;

    color:
        #ffffff;
}


/* =========================================================
   CONFIRM WRITE
========================================================= */

#bulkPriceWriteConfirmYes{

    min-width:
        220px;

    border:
        1px solid
        #a77b20;

    background:
        #30240d;

    color:
        #ffd568;

    cursor:
        pointer;
}


#bulkPriceWriteConfirmYes:hover:not(:disabled){

    border-color:
        #ffc94f;

    background:
        #3a2b0f;

    color:
        #ffe49a;
}


/* =========================================================
   DISABLED
========================================================= */

#bulkPriceWriteBackButton:disabled,
#bulkPriceWriteConfirmYes:disabled{

    opacity:
        .45;

    cursor:
        not-allowed;
}

/* =====================================================
   MANUAL PRICE
===================================================== */

.base-manual::before{
    background:#4da3ff;
}


.base-manual.active{
    color:#75baff;

    border-color:
        rgba(77,163,255,.95);

    background:
        linear-gradient(
            180deg,
            rgba(77,163,255,.16),
            rgba(25,71,120,.13)
        );

    box-shadow:
        0 0 0 1px
        rgba(77,163,255,.18),
        0 8px 24px
        rgba(35,111,190,.10);
}


.base-manual:not(.active):hover{
    color:#75baff;

    box-shadow:
        0 8px 26px
        rgba(77,163,255,.08);
}


/* =====================================================
   MANUAL INPUT PANEL
===================================================== */

.manual-price-panel{
    display:grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:12px;

    margin-top:14px;
}


.manual-price-panel[hidden]{
    display:none !important;
}


.manual-price-field label{
    display:block;

    margin-bottom:7px;

    color:#9aa9c4;

    font-size:11px;
}


.manual-price-input-shell{
    height:46px;

    display:flex;
    align-items:center;

    border:
        1px solid #2b3a4e;

    border-radius:11px;

    background:#09121c;

    overflow:hidden;

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}


.manual-price-input-shell > span{
    padding-left:14px;

    color:#718097;

    font-size:14px;
    font-weight:700;
}


.manual-price-input{
    width:100%;
    height:100%;

    min-width:0;

    padding:0 12px 0 5px;

    border:0;
    outline:0;

    background:transparent;

    color:#f4f7fb;

    font-size:16px;
    font-weight:800;
}


.manual-price-input-shell:focus-within{
    border-color:#4da3ff;

    box-shadow:
        0 0 0 3px
        rgba(77,163,255,.10);
}


/* BELOW LOW BASE */
.manual-price-input-shell:has(
    .manual-price-input.is-below-low-base
){
    border-color:
        #ff6677;

    box-shadow:
        0 0 0 3px
        rgba(255,102,119,.10);
}


.manual-price-warning{
    grid-column:1 / -1;

    padding:10px 12px;

    border:
        1px solid
        rgba(255,102,119,.42);

    border-radius:9px;

    background:
        rgba(255,102,119,.08);

    color:#ff8a98;

    font-size:11px;
    font-weight:700;
}


.manual-price-warning[hidden]{
    display:none !important;
}

/* Remove number input up/down arrows */
.manual-price-input::-webkit-outer-spin-button,
.manual-price-input::-webkit-inner-spin-button{
    -webkit-appearance:none;
    margin:0;
}

.manual-price-input{
    -moz-appearance:textfield;
    appearance:textfield;
}

/* =====================================================
   SINGLE MODE — SHOPIFY SELLING PRICE
===================================================== */

.parent-product-summary-content{
    min-width:0;
    position:relative;
    padding-right:0;
}


.parent-product-shopify-price{
    position:absolute;

    top:0;
    right:0;

    min-width:190px;

    text-align:right;
}


.parent-product-shopify-price-label{
    margin-bottom:8px;

    color:#8295aa;

    font-size:11px;
    font-weight:900;

    letter-spacing:.11em;
    text-transform:uppercase;
}


.parent-product-shopify-price-value{
    color:#45e6ae;

    font-size:30px;
    font-weight:900;

    line-height:1;

    letter-spacing:-.035em;
}


/* ONLY SHOW ON SINGLE MODE */
body[data-calculator-mode="bulk"]
.parent-product-shopify-price{
    display:none !important;
}


/* BULK MODE DOES NOT NEED RIGHT-SIDE SPACE */
body[data-calculator-mode="bulk"]
.parent-product-summary-content{
    padding-right:0;
}


/* MOBILE */
@media(max-width:900px){

    body[data-calculator-mode="single"]
    .parent-product-summary-content{
        padding-right:0;
    }

    .parent-product-shopify-price{
        position:static;

        margin-bottom:16px;

        text-align:left;
    }
}

/* =====================================================
   PARENT PRODUCT — MATCH SECOND SCREENSHOT
===================================================== */

/*
Only the upper text needs to leave space
for the Shopify price on the right.
The meta cards below use the FULL width.
*/

.parent-product-summary-label,
.parent-product-summary-sku,
.parent-product-summary-title,
.parent-product-summary-components{
    max-width:
        calc(100% - 230px);
}










/* Shopify price remains top-right */
.parent-product-shopify-price{
    position:absolute;

    top:0;
    right:0;

    min-width:200px;

    text-align:right;
}


.parent-product-shopify-price-label{
    margin-bottom:9px;

    color:#8295aa;

    font-size:11px;
    font-weight:900;

    letter-spacing:.11em;

    text-transform:uppercase;
}


.parent-product-shopify-price-value{
    color:#45e6ae;

    font-size:30px;
    font-weight:900;

    line-height:1;

    letter-spacing:-.035em;
}

/* =====================================================
   SINGLE MODE — SHOPIFY SELLING PRICE
===================================================== */

.parent-product-summary-content{
    min-width:0;
    position:relative;
}


/*
Only the TOP product text avoids the Shopify price.
Do NOT affect the 3 product info cards.
*/
.parent-product-summary-label,
.parent-product-summary-sku,
.parent-product-summary-title,
.parent-product-summary-components{
    max-width:calc(100% - 230px);
}


/* Shopify price top-right */
.parent-product-shopify-price{
    position:absolute;

    top:0;
    right:0;

    min-width:200px;

    text-align:right;
}


.parent-product-shopify-price-label{
    margin-bottom:8px;

    color:#8295aa;

    font-size:11px;
    font-weight:900;

    letter-spacing:.11em;
    text-transform:uppercase;
}


.parent-product-shopify-price-value{
    color:#45e6ae;

    font-size:30px;
    font-weight:900;

    line-height:1;

    letter-spacing:-.035em;
}


/* Bulk does not show this */
body[data-calculator-mode="bulk"]
.parent-product-shopify-price{
    display:none !important;
}


@media(max-width:900px){

    .parent-product-summary-label,
    .parent-product-summary-sku,
    .parent-product-summary-title,
    .parent-product-summary-components{
        max-width:100%;
    }


    .parent-product-shopify-price{
        position:static;

        margin-bottom:16px;

        text-align:left;
    }
}







/* =====================================================
   BULK SUMMARY — HEADER SHORTCUTS
===================================================== */

.bulk-price-summary-head{
    flex:0 0 auto;

    display:grid;
    grid-template-columns:42px minmax(0,1fr);
    align-items:start;
    gap:14px;

    padding:18px 20px;
    border-bottom:1px solid #243a50;
    background:#0e1b29;
}

.bulk-price-summary-heading{
    min-width:0;

    display:grid;
    gap:12px;
}

.bulk-price-summary-heading-top{
    min-width:0;

    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
}

.bulk-price-summary-heading-copy{
    min-width:0;
}

.bulk-price-summary-heading-copy h3{
    margin:0;
    color:#f2f6fb;
    font-size:20px;
    font-weight:900;
}

.bulk-price-summary-heading-copy small{
    display:block;
    margin-top:4px;
    color:#8193a7;
    font-size:10px;
}

.bulk-summary-shortcuts{
    min-width:0;

    display:grid;
    gap:10px;
}

.bulk-summary-shortcuts[hidden]{
    display:none !important;
}

.bulk-summary-shortcut-row{
    min-width:0;

    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px 14px;
}

.bulk-summary-shortcut-group{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;
}

.bulk-summary-shortcut-label{
    color:#71879d;
    font-size:9px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
    white-space:nowrap;
}

.bulk-summary-discount-input{
    height:30px;
    width:78px;

    display:flex;
    align-items:center;

    border:1px solid #294259;
    border-radius:8px;
    background:#091520;
    overflow:hidden;
}

.bulk-summary-ratio-input{
    width:86px;
}

.bulk-summary-discount-input input{
    width:100%;
    min-width:0;
    height:100%;

    padding:0 3px 0 9px;

    border:0;
    outline:0;
    background:transparent;

    color:#eef5fc;
    font-size:11px;
    font-weight:900;
    text-align:right;
}

.bulk-summary-discount-input > span{
    padding-right:8px;
    color:#8398ae;
    font-size:10px;
    font-weight:800;
}

.bulk-summary-discount-input input::-webkit-outer-spin-button,
.bulk-summary-discount-input input::-webkit-inner-spin-button{
    -webkit-appearance:none;
    margin:0;
}

.bulk-summary-discount-input input{
    -moz-appearance:textfield;
    appearance:textfield;
}

.bulk-summary-shortcut-apply,
.bulk-summary-base-shortcut{
    height:30px;
    padding:0 10px;

    border:1px solid #294259;
    border-radius:8px;

    background:#0b1824;
    color:#b9c9da;

    cursor:pointer;

    font-size:10px;
    font-weight:900;

    transition:
        border-color .16s ease,
        background .16s ease,
        color .16s ease;
}

.bulk-summary-shortcut-apply:hover,
.bulk-summary-base-shortcut:hover{
    border-color:#4d8cc9;
    color:#ffffff;
}

.bulk-summary-base-shortcut--high.is-active{
    color:#65eebe;
    border-color:rgba(57,226,162,.95);
    background:#10201b;
}

.bulk-summary-base-shortcut--medium.is-active{
    color:#ffd369;
    border-color:rgba(255,196,70,.95);
    background:#211b10;
}

.bulk-summary-base-shortcut--low.is-active{
    color:#ff8a9a;
    border-color:rgba(255,88,108,.95);
    background:#24151b;
}

.bulk-summary-shortcut-message{
    min-width:180px;
    flex:1 1 220px;

    color:#8296aa;
    font-size:10px;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

@media(max-width:1100px){
    .bulk-price-summary-heading-top{
        flex-wrap:wrap;
    }

    .bulk-price-summary-count{
        margin-left:0;
    }
}


/* =====================================================
   BULK FILTER RESULTS — INTERNAL SCROLL
===================================================== */

.bulk-shopify-options{
    max-height:
        min(
            62vh,
            680px
        );

    overflow-y:auto;
    overflow-x:hidden;

    overscroll-behavior:contain;

    scrollbar-gutter:stable;

    padding-right:6px;
}


/* Chrome / Edge */
.bulk-shopify-options::-webkit-scrollbar{
    width:8px;
}


.bulk-shopify-options::-webkit-scrollbar-track{
    background:
        rgba(255,255,255,.025);

    border-radius:999px;
}


.bulk-shopify-options::-webkit-scrollbar-thumb{
    background:#29435b;

    border-radius:999px;
}


.bulk-shopify-options::-webkit-scrollbar-thumb:hover{
    background:#3a5d7e;
}

.bulk-shopify-selector-actions{
    display:flex;
    align-items:center;
    gap:8px;
}


.bulk-shopify-select-all{
    height:32px;

    padding:0 12px;

    border:
        1px solid
        #2b5678;

    border-radius:9px;

    background:#0c1a27;

    color:#86c5ff;

    cursor:pointer;

    font-size:10px;
    font-weight:900;

    white-space:nowrap;
}



.bulk-shopify-select-all.active{
    border-color:#2f98ff;

    background:
        rgba(47,152,255,.16);

    color:#ffffff;

    box-shadow:
        0 0 0 1px
        rgba(47,152,255,.18);
}





.bulk-shopify-select-all:hover{
    border-color:#4d9ce0;

    background:#10253a;

    color:#ffffff;
}

/* =====================================================
   SHOPIFY BULK WRITE — CONFIRMATION LIST
   Maximum roughly 5 products
===================================================== */

#bulkPriceWriteResultList{
    height:auto;
    max-height:280px;

    overflow-y:auto;
    overflow-x:hidden;

    overscroll-behavior:contain;

    scrollbar-gutter:stable;

    margin-top:8px;

    padding-right:5px;
}


#bulkPriceWriteResultList::-webkit-scrollbar{
    width:7px;
}


#bulkPriceWriteResultList::-webkit-scrollbar-track{
    background:
        rgba(255,255,255,.025);

    border-radius:999px;
}


#bulkPriceWriteResultList::-webkit-scrollbar-thumb{
    background:#6b5c29;

    border-radius:999px;
}


#bulkPriceWriteResultList::-webkit-scrollbar-thumb:hover{
    background:#8c7934;
}


/* =====================================================
   SHOPIFY BULK WRITE — PROGRESS
===================================================== */

.bulk-shopify-write-progress{
    margin-top:12px;

    padding:
        10px
        12px;

    border:
        1px solid
        rgba(255,255,255,.13);

    border-radius:10px;

    background:
        rgba(0,0,0,.16);
}


.bulk-shopify-write-progress[hidden]{
    display:none !important;
}


.bulk-shopify-write-progress-track{
    width:100%;
    height:9px;

    overflow:hidden;

    border-radius:999px;

    background:
        rgba(255,255,255,.10);
}


.bulk-shopify-write-progress-fill{
    width:0%;
    height:100%;

    border-radius:inherit;

    background:
        linear-gradient(
            90deg,
            #34d399,
            #38bdf8
        );

    box-shadow:
        0 0 14px
        rgba(56,189,248,.28);

    transition:
        width .22s ease;
}


.bulk-shopify-write-progress-text{
    margin-top:7px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;

    color:#b9ae83;

    font-size:10px;
    font-weight:750;
}


.bulk-shopify-write-progress-text strong{
    color:#ffffff;

    font-size:11px;
}

/* =====================================================
   BULK MODE — PLATFORM PRICE PRODUCT SELECTOR
===================================================== */

.bulk-platform-comparison-controls{
    display:none;
}


body[data-calculator-mode="bulk"]
.bulk-platform-comparison-controls{
    display:block;

    margin:
        14px
        0
        8px;
}


.bulk-platform-comparison-search{
    height:40px;

    display:flex;
    align-items:center;

    gap:9px;

    padding:
        0
        11px;

    border:
        1px solid
        #29445d;

    border-radius:10px;

    background:#091522;
}


.bulk-platform-comparison-search:focus-within{
    border-color:#3f91d8;

    box-shadow:
        0 0 0 1px
        rgba(63,145,216,.16);
}


.bulk-platform-comparison-search-icon{
    flex:0 0 auto;

    color:#7790a8;

    font-size:16px;
}


.bulk-platform-comparison-search input{
    width:100%;
    min-width:0;

    border:0;
    outline:0;

    background:transparent;

    color:#edf5ff;

    font:inherit;

    font-size:11px;
}


.bulk-platform-comparison-search input::placeholder{
    color:#63788e;
}


.bulk-platform-comparison-clear{
    flex:0 0 auto;

    width:25px;
    height:25px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:0;
    border-radius:7px;

    background:transparent;

    color:#70869c;

    cursor:pointer;

    font-size:16px;
    font-weight:800;
}


.bulk-platform-comparison-clear:hover{
    background:
        rgba(255,255,255,.06);

    color:#ffffff;
}


.bulk-platform-comparison-current{
    min-height:28px;

    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:
        5px
        12px;

    padding:
        8px
        2px
        2px;

    color:#8094a9;

    font-size:10px;
}


.bulk-platform-comparison-current strong{
    color:#8ec8ff;

    font-weight:900;
}


#bulkPlatformComparisonPosition{
    margin-left:auto;

    color:#72879b;
}

/* =====================================================
   MAIN CALCULATOR — PLATFORM SMALL LOGOS
   Top 5 cards + Platform Price Comparison
===================================================== */


/* =====================================================
   LOGO FILE MAPPING
===================================================== */

.platform-summary-card.shopify,
.platform-store-mark.shopify{
    --platform-small-logo:
        url("/static/assets/platform-logos/bathroom-republic-small.jpg");

    --platform-logo-led:
        #3de1a1;
}


.platform-summary-card.amazon,
.platform-store-mark.amazon{
    --platform-small-logo:
        url("/static/assets/platform-logos/amazon-small.jpg");

    --platform-logo-led:
        #ffbf4a;
}


.platform-summary-card.ebay,
.platform-store-mark.ebay{
    --platform-small-logo:
        url("/static/assets/platform-logos/ebay-small.jpg");

    --platform-logo-led:
        #78afff;
}


.platform-summary-card.neshome,
.platform-store-mark.neshome{
    --platform-small-logo:
        url("/static/assets/platform-logos/neshome-small.jpg");

    --platform-logo-led:
        #b487ff;
}


.platform-summary-card.bnq,
.platform-store-mark.bnq{
    --platform-small-logo:
        url("/static/assets/platform-logos/bnq-small.jpg");

    --platform-logo-led:
        #ff7b98;
}


.platform-summary-card.onbuy,
.platform-store-mark.onbuy{
    --platform-small-logo:
        url("/static/assets/platform-logos/onbuy-small.jpg");

    --platform-logo-led:
        #5fdcff;
}


.platform-summary-card.manob2b,
.platform-store-mark.manob2b{
    --platform-small-logo:
        url("/static/assets/platform-logos/manomano-small.jpg");

    --platform-logo-led:
        #63d89a;
}


.platform-summary-card.manob2c,
.platform-store-mark.manob2c{
    --platform-small-logo:
        url("/static/assets/platform-logos/manomano-small.jpg");

    --platform-logo-led:
        #ff9966;
}


/*
Generic old BR Mano Top card
*/
.platform-summary-card.mano{
    --platform-small-logo:
        url("/static/assets/platform-logos/manomano-small.jpg");

    --platform-logo-led:
        #3de1a1;
}


/* =====================================================
   TOP 5 PLATFORM CARDS
   Replace A / E / N / B / M with actual logo
===================================================== */

.platform-summary-card
.platform-summary-badge{

    color:
        transparent !important;

    font-size:
        0 !important;

    background-color:
        #ffffff !important;

    background-image:
        var(--platform-small-logo) !important;

    background-position:
        center !important;

    background-repeat:
        no-repeat !important;

    background-size:
        contain !important;

    border:
        2px solid
        var(--platform-logo-led) !important;

    border-radius:
        10px !important;

    box-shadow:
        none !important;

    overflow:
        hidden;
}


/* =====================================================
   PLATFORM PRICE COMPARISON
   Replace S / A / E / N / B / O / M with logos
===================================================== */

.platform-store-mark{

    color:
        transparent !important;

    font-size:
        0 !important;

    background-color:
        #ffffff !important;

    background-image:
        var(--platform-small-logo) !important;

    background-position:
        center !important;

    background-repeat:
        no-repeat !important;

    background-size:
        contain !important;

    border:
        2px solid
        var(--platform-logo-led) !important;

    border-radius:
        7px !important;

    box-shadow:
        none !important;

    overflow:
        hidden;
}


/*
IMPORTANT:
Your drag/drop hover currently changes the icon background.
Keep the actual image visible while dragging/hovering.
*/

.platform-store-mark.platform-drag-available:hover{

    background-color:
        #ffffff !important;

    background-image:
        var(--platform-small-logo) !important;

    border-color:
        var(--platform-logo-led) !important;
}


.platform-store-mark.platform-drag-disabled{

    background-color:
        #ffffff !important;

    background-image:
        var(--platform-small-logo) !important;

    border-color:
        var(--platform-logo-led) !important;
}

/* =====================================================
   SETTINGS PAGE — CLEANUP ONLY
   Does NOT affect other pages
===================================================== */


/* -----------------------------------------------------
   HIDE PLATFORM SUMMARY BANNER ON SETTINGS PAGE ONLY
----------------------------------------------------- */

body:has(#pageSettings.active)
.platform-summary-strip{

    display:
        none !important;
}


/* -----------------------------------------------------
   SETTINGS BUTTONS ONLY
   Override global 80px button width
----------------------------------------------------- */

#pageSettings
.primary-btn,

#pageSettings
.ghost-btn{

    width:
        auto;

    min-width:
        130px;

    min-height:
        42px;

    padding:
        10px
        18px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    white-space:
        nowrap;

    line-height:
        1.2;
}


/* Test Connection + Save Settings row */

#pageSettings
.settings-actions{

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        10px;

    margin-top:
        18px;
}


/* Slightly wider because text is longer */

#pageSettings
.settings-actions
.ghost-btn{

    min-width:
        145px;
}


#pageSettings
.settings-actions
.primary-btn{

    min-width:
        130px;
}


/* Auto Sync button */

#pageSettings
.settings-card
> .primary-btn{

    min-width:
        190px;

    margin-top:
        14px;
}

/* =====================================================
   ALFRED TOPBAR — REMOVE GLOBAL SEARCH BAR
===================================================== */

.topbar
.search{
    display:none !important;
}


/* Keep admin / sync controls aligned right */

.topbar
.top-actions{
    margin-left:auto;
}

/* =====================================================
   ALFRED PRICE COMMAND — SHARED SIDEBAR DESIGN
===================================================== */


/* =====================================================
   BRAND
===================================================== */

.brand{

    display:flex;

    align-items:center;

    gap:12px;

    padding:
        5px
        8px
        22px;
}


.brand-mark.brand-mark-command{

    width:43px;
    height:43px;

    flex:
        0 0 43px;

    display:grid;

    place-items:center;

    overflow:hidden;

    border:
        1px solid
        #438fe5;

    border-radius:
        13px;

    background:
        #176dcc;

    color:
        #ffffff;

    box-shadow:
        0
        8px
        24px
        rgba(
            23,
            109,
            204,
            .22
        );
}


/* REMOVE OLD ALFRED SLASH LOGO */

.brand-mark.brand-mark-command::before,
.brand-mark.brand-mark-command::after{

    content:none !important;

    display:none !important;
}


.brand-mark-command svg{

    width:26px;
    height:26px;

    fill:none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.brand-copy h1{

    margin:0;

    font-size:
        21px;

    line-height:
        1;

    font-weight:
        850;

    letter-spacing:
        -.01em;
}


.brand-copy > span{

    display:block;

    margin-top:
        5px;

    color:
        #71839a;

    font-size:
        10px;

    font-weight:
        500;

    letter-spacing:
        .02em;
}


/* =====================================================
   NAVIGATION
===================================================== */

.nav{

    gap:
        7px;
}


.nav a{

    min-height:
        49px;

    padding:
        8px
        10px;

    gap:
        12px;

    border-radius:
        11px;
}


/* =====================================================
   NAV ICON BASE
===================================================== */

.nav-icon{

    --nav-icon:
        #8fcaff;

    --nav-icon-bg:
        #0d1d2d;

    --nav-icon-border:
        #284b6c;


    width:
        32px;

    height:
        32px;

    flex:
        0 0 32px;

    display:grid;

    place-items:center;

    border:
        1px solid
        var(--nav-icon-border);

    border-radius:
        9px;

    background:
        var(--nav-icon-bg);

    color:
        var(--nav-icon);

    font-size:
        0;

    transition:
        border-color .18s ease,
        background-color .18s ease,
        color .18s ease;
}


.nav-icon svg{

    width:
        18px;

    height:
        18px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    pointer-events:
        none;
}


/* =====================================================
   EACH PAGE COLOUR
===================================================== */


/* DATA CENTER — CYAN */

.nav-icon-data{

    --nav-icon:
        #55d8ff;

    --nav-icon-bg:
        #09212c;

    --nav-icon-border:
        #17576d;
}


/* PRICING WORKSPACE — BLUE */

.nav-icon-workspace{

    --nav-icon:
        #65aaff;

    --nav-icon-bg:
        #0c1c31;

    --nav-icon-border:
        #244e82;
}


/* CUSTOMER SERVICE — GREEN */

.nav-icon-customer{

    --nav-icon:
        #54e4ad;

    --nav-icon-bg:
        #0a211b;

    --nav-icon-border:
        #1a654e;
}


/* HISTORY — PURPLE */

.nav-icon-history{

    --nav-icon:
        #ad91ff;

    --nav-icon-bg:
        #1b1530;

    --nav-icon-border:
        #594690;
}


/* PRICE COMMAND CENTER — AMBER */

.nav-icon-command{

    --nav-icon:
        #ffd05f;

    --nav-icon-bg:
        #251d0d;

    --nav-icon-border:
        #72551d;
}


/* SETTINGS — SLATE */

.nav-icon-settings{

    --nav-icon:
        #8fa8c8;

    --nav-icon-bg:
        #111b28;

    --nav-icon-border:
        #34475e;
}


/* =====================================================
   HOVER / ACTIVE
===================================================== */

.nav a:hover
.nav-icon{

    border-color:
        var(--nav-icon);

    color:
        var(--nav-icon);
}


.nav a.active
.nav-icon{

    border-color:
        var(--nav-icon);

    color:
        var(--nav-icon);

    background:
        var(--nav-icon-bg);

    box-shadow:
        inset
        0
        0
        0
        1px
        rgba(
            255,
            255,
            255,
            .05
        );
}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:800px){

    .brand-copy{

        display:none !important;
    }


    .brand-mark-command{

        display:grid !important;
    }


    .nav a
    > .nav-icon{

        display:grid !important;
    }


    .nav a
    > span:not(.nav-icon){

        display:none !important;
    }


    .nav a{

        justify-content:center;

        padding:
            8px;
    }
}

/* =====================================================
   PRICE COMMAND CENTER
   FIX SHARED ALFRED SIDEBAR SVG ICONS
===================================================== */


/* =====================================================
   ALFRED BRAND ICON
===================================================== */

.brand-mark.brand-mark-command{

    width:43px !important;
    height:43px !important;

    flex:
        0 0 43px !important;

    display:grid !important;

    place-items:center !important;

    border:
        1px solid
        #438fe5 !important;

    border-radius:
        13px !important;

    background:
        #176dcc !important;

    color:
        #ffffff !important;

    overflow:hidden;
}


/* REMOVE OLD GENERATED SLASHES */

.brand-mark.brand-mark-command::before,
.brand-mark.brand-mark-command::after{

    content:none !important;

    display:none !important;
}


/* FORCE NEW ALFRED SVG TO RENDER CORRECTLY */

.brand-mark.brand-mark-command svg{

    display:block !important;

    width:26px !important;
    height:26px !important;

    fill:none !important;

    stroke:
        #ffffff !important;

    stroke-width:
        1.8 !important;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


/* =====================================================
   NAV ICON BOX
===================================================== */

.nav-icon{

    width:32px !important;
    height:32px !important;

    flex:
        0 0 32px !important;

    display:grid !important;

    place-items:center !important;

    border-radius:
        9px !important;

    font-size:
        0 !important;
}


/* =====================================================
   SVG INSIDE NAV ICON
===================================================== */

.nav-icon svg{

    display:block !important;

    width:18px !important;
    height:18px !important;

    fill:none !important;

    stroke:
        currentColor !important;

    stroke-width:
        1.8 !important;

    stroke-linecap:
        round !important;

    stroke-linejoin:
        round !important;

    opacity:
        1 !important;

    visibility:
        visible !important;
}


/* =====================================================
   DATA CENTER — CYAN
===================================================== */

.nav-icon-data{

    color:
        #55d8ff !important;

    background:
        #09212c !important;

    border-color:
        #17576d !important;
}


/* =====================================================
   PRICING WORKSPACE — BLUE
===================================================== */

.nav-icon-workspace{

    color:
        #65aaff !important;

    background:
        #0c1c31 !important;

    border-color:
        #244e82 !important;
}


/* =====================================================
   CUSTOMER SERVICE — GREEN
===================================================== */

.nav-icon-customer{

    color:
        #54e4ad !important;

    background:
        #0a211b !important;

    border-color:
        #1a654e !important;
}


/* =====================================================
   HISTORY — PURPLE
===================================================== */

.nav-icon-history{

    color:
        #ad91ff !important;

    background:
        #1b1530 !important;

    border-color:
        #594690 !important;
}


/* =====================================================
   PRICE COMMAND CENTER — AMBER
===================================================== */

.nav-icon-command{

    color:
        #ffd05f !important;

    background:
        #251d0d !important;

    border-color:
        #72551d !important;
}


/* =====================================================
   SETTINGS — SLATE
===================================================== */

.nav-icon-settings{

    color:
        #8fa8c8 !important;

    background:
        #111b28 !important;

    border-color:
        #34475e !important;
}


/* =====================================================
   ACTIVE PAGE
===================================================== */

.nav a.active
.nav-icon{

    border-color:
        currentColor !important;
}
/* Single calculator shows only the product and pricing workspace. */
body[data-calculator-mode="single"]:not([data-page="customer-service"]) .content > .stats.dashboard-block.platform-summary-strip,
body[data-calculator-mode="single"]:not([data-page="customer-service"]) .grid.dashboard-block .platform-comparison-card,
body[data-calculator-mode="single"]:not([data-page="customer-service"]) .grid.dashboard-block .shopify-write-card,
body[data-calculator-mode="single"]:not([data-page="customer-service"]) .grid.dashboard-block > .right-stack {
  display: none !important;
}

body[data-calculator-mode="single"]:not([data-page="customer-service"]) .grid.dashboard-block {
  grid-template-columns: minmax(0, 1fr) !important;
}

@media (min-width: 901px) {
  body[data-calculator-mode="single"]:not([data-page="customer-service"]) .parent-product-summary-meta-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.price-across-stores {
  margin: 20px 0;
  padding: 18px;
  border: 1px solid #20374d;
  border-radius: 14px;
  background: #0b1521;
}

.price-across-stores[hidden],
body[data-calculator-mode="bulk"] .price-across-stores {
  display: none !important;
}

.price-across-stores h3 {
  margin: 0 0 16px;
  font-size: 16px;
  color: #eef4fb;
}

.price-across-stores-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(130px, 1fr));
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.price-across-store-card {
  --store-accent: #3de1a1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 10px;
  border: 1px solid #294158;
  border-top: 2px solid var(--store-accent);
  border-radius: 12px;
  background: #08111b;
  text-align: center;
}

.price-across-store-amazon { --store-accent: #ffbf4a; }
body[data-calculator-mode="single"] .price-across-store-card .store-product-link-icon {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  display: grid; place-items: center; width: 23px; height: 23px;
  margin: 0; border: 1px solid #ffd15a99; border-radius: 4px;
  background: linear-gradient(135deg, #302711, #11170e); color: #ffe28a; pointer-events: none;
  box-shadow: inset 0 0 7px #ffd15a18, 0 0 7px #ffd15a30;
  transition: border-color .2s, box-shadow .2s, color .2s;
}

.bulk-change-price-launch.is-loading:disabled{
    overflow:hidden;
    isolation:isolate;
    background:#176fd8;
    border-color:#55a5ff;
    color:#fff;
    cursor:progress;
    opacity:1;
    box-shadow:0 0 18px rgba(66,161,255,.3);
}

/* Returning to a workspace should reveal its existing content immediately. */
body.sidebar-page-switched .content .fade-in{
    animation:none;
}

.bulk-change-price-launch.is-loading::before{
    content:"";
    position:absolute;
    inset:0 auto 0 0;
    width:var(--launch-progress, 0%);
    background:linear-gradient(90deg,rgba(75,163,255,.22),rgba(103,196,255,.65));
    border-right:1px solid #a3e5ff;
    box-shadow:3px 0 12px rgba(103,196,255,.65);
    transition:width .3s ease;
    pointer-events:none;
    z-index:-1;
}

#bulkPriceSummaryConfirmButton.is-writing {
    opacity: 1; cursor: wait; transform: none;
    background: linear-gradient(to right, #ffd15a55 0 var(--summary-write-progress), transparent var(--summary-write-progress) 100%), #2a2010;
    color: #f0d078;
}
.bulk-summary-write-report[hidden] { display: none !important; }
.bulk-price-summary-page.is-showing-write-report > :not(.bulk-summary-write-report) { visibility: hidden; pointer-events: none; }
.bulk-summary-write-report {
    position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column;
    padding: 26px; gap: 22px; overflow: hidden;
    background: repeating-linear-gradient(0deg, #ffd15a03 0 1px, transparent 1px 4px), radial-gradient(ellipse at 0 0, #ffd15a20, transparent 75%), #241e10;
    color: #f8e5b0; border: 1px solid #ffd15a88; border-radius: inherit;
    animation: bulk-write-report-slide .5s cubic-bezier(.16, 1, .3, 1) both;
}
.bulk-write-report-eyebrow { color: #ffd15a; font-size: 11px; letter-spacing: .12em; text-shadow: 0 0 8px #ffd15a44; }
.bulk-write-report-heading h3 { margin: 10px 0; font-size: 27px; color: #ffe29a; }
.bulk-write-report-heading p { margin: 0; color: #c9bd9b; font-size: 12px; }
.bulk-write-report-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.bulk-write-report-metrics > div { display: grid; gap: 8px; padding: 14px; border: 1px solid #ffd15a44; border-radius: 8px; background: #ffd15a09; }
.bulk-write-report-metrics strong { font-size: 27px; color: #ffe29a; text-shadow: 0 0 10px #ffd15a22; }
.bulk-write-report-metrics span { font-size: 11px; color: #d8cba7; }
.bulk-write-report-results { flex: 1; min-height: 0; overflow: auto; border: 1px solid #ffd15a33; border-radius: 8px; }
.bulk-write-report-results table { width: 100%; border-collapse: collapse; font-size: 12px; color: #e6dab9; }
.bulk-write-report-results th { position: sticky; top: 0; text-align: left; background: #362b13; color: #ffe29a; }
.bulk-write-report-results th, .bulk-write-report-results td { padding: 12px; border-bottom: 1px solid #ffd15a1c; }
.bulk-write-report-results tr:nth-child(even) td { background: #ffd15a05; }
.write-report-failed td { color: #ff98a8; }
.write-report-success td:nth-child(2) { color: #84e8cf; }
.bulk-write-report-footer { display: flex; justify-content: flex-end; }
.bulk-write-report-footer button { padding: 10px 20px; border: 1px solid #ffd15a99; border-radius: 8px; background: #ffd15a16; color: #ffe29a; cursor: pointer; }
@keyframes bulk-write-report-slide { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@media (max-width: 800px) { .bulk-summary-write-report { padding: 16px; gap: 14px; } .bulk-write-report-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .bulk-summary-write-report { animation: none; } }
body[data-calculator-mode="single"] .price-across-store-card[href]:hover .store-product-link-icon,
body[data-calculator-mode="single"] .price-across-store-card[href]:focus-visible .store-product-link-icon {
  border-color: #ffe28a; color: #fff0b8;
  box-shadow: inset 0 0 9px #ffd15a28, 0 0 12px #ffd15a55;
}
body[data-calculator-mode="single"] .store-product-link-icon[hidden] { display: none !important; }
.store-product-link-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 2px #ffd15a99); }
.price-across-store-ebay { --store-accent: #78afff; }
.price-across-store-neshome { --store-accent: #b487ff; }
.price-across-store-bnq { --store-accent: #ff7b98; }
.price-across-store-onbuy { --store-accent: #5fdcff; }
.price-across-store-manob2b { --store-accent: #63d89a; }
.price-across-store-manob2c { --store-accent: #ff9966; }

.price-across-store-card img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  background: #fff;
  border-radius: 9px;
}

.price-across-store-card h4 {
  margin: 10px 0 14px;
  font-size: 12px;
  color: #e7eef7;
}

.price-across-store-card span {
  margin-top: auto;
  color: #8295aa;
  font-size: 10px;
}

.price-across-store-card strong {
  display: block;
  margin-top: 6px;
  color: var(--store-accent);
  font-size: 18px;
}
.store-pricing-scroll {
  overflow-x: auto;
}

#bulkManualEntryEditor .bulk-manual-row-number { gap: 3px; }
#bulkManualEntryEditor .bulk-manual-delete-row {
    padding: 0; width: 18px; min-width: 18px; height: 22px; min-height: 0;
    border: 0; border-radius: 4px; background: transparent; color: #8597ad;
    font-size: 16px; cursor: pointer;
}
#bulkManualEntryEditor .bulk-manual-delete-row:hover { color: #ff8398; background: #ff839818; }
#bulkManualEntryEditor .bulk-manual-entry-toolbar-actions { flex-wrap: wrap; }
#bulkManualEntryEditor .bulk-manual-entry-toolbar-actions button:disabled { opacity: .4; cursor: default; }
#bulkManualEntryEditor [data-manual-undo], #bulkManualEntryEditor [data-manual-redo] { display: inline-flex; align-items: center; gap: 6px; }
#bulkManualEntryEditor .bulk-manual-entry-toolbar-actions svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#bulkManualEntryEditor .bulk-manual-process-btn.is-unready {
    filter: grayscale(1); opacity: .45; cursor: pointer;
}
#bulkManualEntryEditor .bulk-manual-process-btn.is-processing {
    filter: none; opacity: 1; cursor: wait;
    background: linear-gradient(to right, #ffd15a44 0 var(--manual-process-progress), transparent var(--manual-process-progress) 100%), #2a210e;
    transform: none; font-variant-numeric: tabular-nums;
}
#bulkManualEntryEditor .bulk-manual-sheet-row.is-missing-sku,
#bulkManualEntryEditor .bulk-manual-sheet-row.is-invalid-compare {
    background: #421c28; box-shadow: inset 3px 0 #ff6677;
}
#bulkManualEntryEditor .bulk-manual-sheet-row.is-missing-sku input,
#bulkManualEntryEditor .bulk-manual-sheet-row.is-missing-sku select,
#bulkManualEntryEditor .bulk-manual-sheet-row.is-invalid-compare input,
#bulkManualEntryEditor .bulk-manual-sheet-row.is-invalid-compare select {
    background: #ff667718; border-color: #ff667766;
}
#bulkManualEntryEditor .bulk-manual-sheet-row input[aria-invalid="true"] {
    box-shadow: inset 0 0 0 1px #ff6677; color: #ffb5be;
}

body[data-calculator-mode="single"] #priceAcrossStores .store-pricing-scroll {
  scrollbar-width: none;
}

body[data-calculator-mode="single"] #priceAcrossStores .store-pricing-scroll::-webkit-scrollbar {
  display: none;
}

.price-across-stores-grid,
.store-guidelines-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(130px, 1fr));
  gap: 10px;
  min-width: 1110px;
  overflow: visible;
}

.price-across-store-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.price-across-store-column .price-across-store-card {
  flex: 1;
  min-height: 188px;
}

.price-across-store-card.is-unavailable {
  filter: grayscale(1);
  opacity: .5;
  background: #101720;
}

.store-pound-entry {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  height: 42px;
  border: 1px solid #294158;
  border-radius: 9px;
  background: #08111b;
}

.store-pound-entry span {
  color: #8295aa;
  font-weight: 800;
}

.store-pound-entry input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #eef4fb;
  font: inherit;
}

.store-pound-entry:focus-within {
  border-color: #4da3ff;
}

.store-guidelines {
  margin-top: 22px;
  min-width: 1110px;
}

.store-guideline-card {
  min-width: 0;
  padding: 12px 10px;
  border: 1px solid #20374d;
  border-radius: 12px;
  background: #08111b;
}

.store-guideline-card h4 {
  margin: 0 0 12px;
  font-size: 11px;
  color: #8295aa;
}

.store-guideline-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  padding: 9px 0;
  border-top: 1px solid #20374d;
  font-size: 11px;
}

.store-guideline-row strong {
  font-size: 13px;
  white-space: nowrap;
}

.store-guideline-low { color: #ff8398; }
.store-guideline-mid { color: #ffd15a; }
.store-guideline-high { color: #55e6a8; }
body[data-calculator-mode="single"]:not([data-page="customer-service"]) .grid.dashboard-block .pricing-base-section,
body[data-calculator-mode="single"]:not([data-page="customer-service"]) .grid.dashboard-block .result-bar.result-bar-dual,
body[data-calculator-mode="single"]:not([data-page="customer-service"]) .grid.dashboard-block .multiplier-grid {
  display: none !important;
}

.store-pound-entry.is-disabled {
  opacity: .45;
  background: #101720;
  cursor: not-allowed;
}

.store-pound-entry input:disabled {
  pointer-events: none;
  caret-color: transparent;
  user-select: none;
}
.price-across-stores-grid {
  row-gap: 12px;
}

.price-across-store-column {
  display: contents;
}

.price-across-store-column > .price-across-store-card {
  grid-row: 1;
}

.price-across-store-column > .store-pound-entry {
  grid-row: 2;
}

#storeGuidelinesTitle {
  grid-row: 3;
  grid-column: 1 / -1;
  margin: 12px 0 0;
}

.price-across-store-column > .store-guideline-card {
  grid-row: 4;
}

button.store-guideline-row {
  width: 100%;
  padding-left: 10px;
  padding-right: 6px;
  border: 0;
  border-top: 1px solid #20374d;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

button.store-guideline-row:hover:not(:disabled),
button.store-guideline-row[aria-pressed="true"] {
  background: #14263a;
  border-radius: 6px;
}

button.store-guideline-row[aria-pressed="true"] {
  box-shadow: inset 3px 0 0 currentColor;
}

button.store-guideline-row:focus-visible {
  outline: 2px solid #4da3ff;
  outline-offset: 2px;
}

button.store-guideline-row:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.store-pound-entry input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.store-pound-entry input[type="number"]::-webkit-inner-spin-button,
.store-pound-entry input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.store-guideline-card.is-unavailable {
  filter: grayscale(1);
  opacity: .5;
  background: #101720;
}
@media (min-width: 901px) {
  body[data-calculator-mode="single"]:not([data-page="customer-service"]) .grid.dashboard-block,
  body[data-calculator-mode="single"]:not([data-page="customer-service"]) .heading-row.dashboard-block,
  body[data-calculator-mode="bulk"]:not([data-page="customer-service"]) .grid.dashboard-block,
  body[data-calculator-mode="bulk"]:not([data-page="customer-service"]) .heading-row.dashboard-block,
  body[data-calculator-mode="bulk"]:not([data-page="customer-service"]) .stats.dashboard-block {
    max-width: max(0px, calc(min(1650px, 100vw - var(--sidebar)) - 52px));
    margin-left: auto;
    margin-right: auto;
  }
}
.price-across-store-card {
  text-decoration: none;
  cursor: default;
}

.price-across-store-card[href] {
  cursor: pointer;
}

.price-across-store-card[href]:hover {
  border-color: var(--store-accent);
}

.price-across-store-card[href]:focus-visible {
  outline: 2px solid var(--store-accent);
  outline-offset: 2px;
}
.price-across-store-card {
  position: relative;
  isolation: isolate;
  overflow: visible;
  transition: border-color .3s ease, box-shadow .4s ease, background-color .3s ease;
}

.price-across-store-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 2px;
  border-radius: inherit;
  background: var(--store-accent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  clip-path: circle(0 at var(--store-hover-x, 50%) var(--store-hover-y, 100%));
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

.price-across-store-card[href]:hover,
.price-across-store-card[href]:focus-visible {
  background: #0d1b2b;
  border-color: var(--store-accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--store-accent) 45%, transparent),
              0 0 24px color-mix(in srgb, var(--store-accent) 20%, transparent),
              inset 0 0 20px color-mix(in srgb, var(--store-accent) 8%, transparent);
}

.price-across-store-card.store-border-igniting::before {
  animation: storeBorderIgnite .65s cubic-bezier(.16, 1, .3, 1) both;
}

.price-across-store-card[href]:focus-visible::before {
  opacity: 1;
  clip-path: circle(150% at 50% 100%);
}

@keyframes storeBorderIgnite {
  from {
    opacity: 1;
    clip-path: circle(0 at var(--store-hover-x, 50%) var(--store-hover-y, 100%));
  }
  to {
    opacity: 1;
    clip-path: circle(150% at var(--store-hover-x, 50%) var(--store-hover-y, 100%));
  }
}

@media (prefers-reduced-motion: reduce) {
  .price-across-store-card.store-border-igniting::before {
    animation: none;
    opacity: 1;
    clip-path: none;
  }
}

#storeGuidelinesTitle { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.store-guideline-shortcuts { display: inline-flex; gap: 6px; margin-left: auto; }
.store-guideline-shortcuts button { width: auto; min-height: 28px; padding: 4px 10px; border: 1px solid #385671; border-radius: 7px; background: #14283a; color: #d5e8fa; font-size: 11px; font-weight: 600; cursor: pointer; }
.store-guideline-shortcuts button:hover:not(:disabled), .store-guideline-shortcuts button[aria-pressed="true"] { border-color: #84e8cf; background: #183c32; color: #a6f3d6; }
.store-guideline-shortcuts button:disabled { opacity: .45; cursor: not-allowed; }

/* Single calculator store price update action. */
body[data-calculator-mode="single"] .parent-product-summary { position: relative; }
.single-store-update-button { position: absolute; top: 14px; right: 14px; width: auto; min-height: 42px; padding: 10px 20px; border: 1px solid #477d6c; border-radius: 9px; background: #173d32; color: #a6f3d6; font-size: 14px; font-weight: 700; cursor: pointer; }
.single-store-update-button:hover { background: #245542; border-color: #84e8cf; }
body[data-calculator-mode="bulk"] .single-store-update-button { display: none; }
body[data-calculator-mode="single"] .parent-product-summary-label { padding-right: 150px; }
.single-store-update-field { display: grid; gap: 8px; color: #a8c0d9; font-size: 12px; }
.single-store-update-field select { width: 100%; min-height: 36px; padding: 8px 10px; border: 1px solid #426486; border-radius: 8px; background: #14283b; color: #e8f2ff; font: inherit; }
.single-store-update-field select:disabled { opacity: .6; }

/* Multiple store selection and price review. */
#singleStoreUpdateDialog { width: min(620px, calc(100vw - 32px)); padding: 24px; border-color: #34536b; background: linear-gradient(145deg, #132638, #0b1725 65%); box-shadow: 0 28px 100px #000b; }
#singleStoreUpdateDialog::backdrop { background: #020913b3; backdrop-filter: blur(4px); }
.single-store-update-heading { display: flex; align-items: center; gap: 12px; }
.single-store-update-icon { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #366654; border-radius: 12px; background: #183a30; color: #9cf0ce; font-size: 24px; }
#singleStoreUpdateDialog h3 { margin: 0; font-size: 20px; }
#singleStoreUpdateSku { margin: 4px 0 0; color: #92aac2; font-size: 12px; }
.single-store-update-intro { color: #a8bfd4; font-size: 12px; margin: 18px 0; }
.single-store-update-selection-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; color: #c9d9e9; font-size: 12px; font-weight: 600; }
#singleStoreUpdateSelectAll { width: auto; min-height: 26px; padding: 4px 9px; border: 1px solid #365772; border-radius: 6px; background: #183149; color: #b9dff8; font-size: 11px; cursor: pointer; }
.single-store-update-stores { display: grid; gap: 9px; max-height: 360px; overflow-y: auto; }
.single-store-update-choice { display: grid; grid-template-columns: 18px 36px minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; padding: 12px; border: 1px solid #2b4259; border-radius: 11px; background: #112235; cursor: pointer; transition: border-color .15s, background .15s; }
.single-store-update-choice:hover { border-color: #4a7389; background: #162c40; }
.single-store-update-choice.is-selected { border-color: #5baf91; background: #143329; box-shadow: inset 0 0 0 1px #84e8cf15; }
.single-store-update-choice input { width: 16px; height: 16px; margin: 0; accent-color: #84e8cf; cursor: pointer; }
.single-store-update-choice img { width: 36px; height: 36px; object-fit: cover; border-radius: 8px; }
.single-store-update-choice-info, .single-store-update-choice-prices { display: grid; gap: 4px; }
.single-store-update-choice-info strong { color: #e4eef9; font-size: 13px; }
.single-store-update-choice-info small { color: #8faac0; font-size: 10px; }
.single-store-update-choice-prices { text-align: right; }
.single-store-update-choice-prices small { color: #91a8bf; font-size: 11px; }
.single-store-update-choice-prices strong { color: #a6f3d6; font-size: 17px; font-variant-numeric: tabular-nums; }
.single-store-update-choice-status { grid-column: 3 / -1; color: #a5becf; font-size: 10px; }
#singleStoreUpdateDetails { margin: 15px 0 0; padding: 10px 12px; border: 1px solid #2d475d; border-radius: 8px; background: #0d1b29; color: #b3c9dd; font-size: 12px; }
#singleStoreUpdateResult { color: #b9f0d9; font-size: 12px; }
.single-store-update-footer { margin-top: 20px; padding-top: 16px; border-top: 1px solid #2a4056; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.single-store-update-footer > span { color: #829db5; font-size: 10px; max-width: 180px; }
#singleStoreUpdateDialog .lien-history-restore-actions { margin: 0; }
#singleStoreUpdateConfirm { background: #84e8cf; color: #0a2921; border: 1px solid #84e8cf; border-radius: 8px; }
#singleStoreUpdateCancel { background: #14283b; color: #d4e4f4; border: 1px solid #38546d; border-radius: 8px; }
.single-store-update-empty { padding: 20px; border: 1px dashed #34506b; border-radius: 10px; color: #98b1ca; text-align: center; font-size: 12px; }
@media (max-width: 500px) { #singleStoreUpdateDialog { padding: 18px; } .single-store-update-footer { align-items: stretch; flex-direction: column; } .single-store-update-footer > span { max-width: none; } #singleStoreUpdateDialog .lien-history-restore-actions { justify-content: flex-end; } }

/* Price update becomes available only after an entered store price. */
.single-store-update-button { transition: background .2s, border-color .2s, color .2s, box-shadow .25s, filter .2s; }
.single-store-update-button:disabled { filter: grayscale(1); background: #28313a; border-color: #46515d; color: #89949f; cursor: not-allowed; box-shadow: none; animation: none; }
.single-store-update-button.is-ready { background: #1c503c; border-color: #79d9ad; color: #b7ffdd; box-shadow: 0 0 0 1px #84e8cf20, 0 0 16px #63d9a533; animation: single-store-update-ready 1.6s ease-out 1; }
.single-store-update-button.is-ready:hover { background: #27664b; border-color: #a6f3d6; box-shadow: 0 0 22px #63d9a54d; }
.single-store-update-button.is-ready:focus-visible { outline: 2px solid #a6f3d6; outline-offset: 3px; }
@keyframes single-store-update-ready { 0%, 100% { box-shadow: 0 0 16px #63d9a533; } 50% { box-shadow: 0 0 26px #63d9a566; } }
@media (prefers-reduced-motion: reduce) { .single-store-update-button.is-ready { animation: none; } }

/* Resolve duplicate Shopify SKUs in the parent summary before pricing. */
.parent-product-summary.is-choosing-product { display: block; }
.parent-product-summary.is-choosing-product > .parent-product-summary-media,
.parent-product-summary.is-choosing-product > .parent-product-summary-content,
.parent-product-summary.is-choosing-product > .single-store-update-button { display: none; }
.single-product-choices[hidden] { display: none; }
.single-product-choices > h3 { margin: 0 0 6px; color: #e8f2ff; font-size: 18px; }
.single-product-choices > p { color: #9bb3ca; font-size: 12px; line-height: 1.5; }
.single-product-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; margin-top: 16px; }
.single-product-choice-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid #2b465e; border-radius: 12px; background: #102235; }
.single-product-choice-card > img { width: 100%; height: 180px; object-fit: contain; background: #fff; border-radius: 8px; }
.single-product-choice-card > h4 { color: #e0eefb; font-size: 14px; margin: 0; line-height: 1.4; }
.single-product-choice-card dl { display: grid; grid-template-columns: 85px minmax(0, 1fr); gap: 7px 10px; margin: 0 0 6px; font-size: 12px; }
.single-product-choice-card dt { color: #87a3be; }
.single-product-choice-card dd { color: #d1e2f3; margin: 0; overflow-wrap: anywhere; }
.single-product-choice-card > button { margin-top: auto; min-height: 38px; width: 100%; padding: 8px 12px; border: 1px solid #4f9d7f; border-radius: 8px; background: #1b4938; color: #b8f9dd; font-size: 12px; font-weight: 600; cursor: pointer; }
.single-product-choice-card > button:hover:not(:disabled) { background: #28644b; border-color: #84e8cf; }
.single-product-choice-card > button:disabled { opacity: .5; cursor: wait; }

.single-product-choice-card > .single-product-choice-carousel { width: 170px; height: 170px; flex: 0 0 170px; align-self: center; border-radius: 12px; }
.single-product-choice-carousel .parent-product-carousel-track { transition: transform 520ms cubic-bezier(.22,.8,.2,1); }
.single-product-choice-carousel .parent-product-slide img { width: 100%; height: 100%; object-fit: cover; }
.single-product-choice-carousel .parent-product-dot { padding: 0; min-height: 0; min-width: 0; }

/* Bulk edit workspace: calculator first, platform comparison below. */
.bulk-price-summary-item { grid-template-columns: 84px minmax(0, 1fr) 220px; }
body[data-calculator-mode="bulk"] .calculator.bulk-summary-open {
  height: max(680px, calc(100dvh - 180px)); min-height: 0; overflow: hidden;
}
#bulkPriceSummaryList { flex: 1 1 0; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; }
.bulk-price-summary-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
.bulk-price-summary-price-panel {
  --summary-price-accent: #8acfff;
  grid-column: 3; grid-row: 1 / span 2; align-self: stretch;
  display: flex; align-items: center; padding: 16px 14px 16px 18px;
  border-left: 2px solid color-mix(in srgb, var(--summary-price-accent) 70%, transparent); border-radius: 0 8px 8px 0;
  background: radial-gradient(ellipse at 0 50%, color-mix(in srgb, var(--summary-price-accent) 14%, transparent), transparent 85%), linear-gradient(135deg, #141e25, #111e29);
  box-shadow: inset 1px 0 10px color-mix(in srgb, var(--summary-price-accent) 8%, transparent);
}
.bulk-price-summary-item:has(.bulk-price-summary-choice--high.is-active) .bulk-price-summary-price-panel { --summary-price-accent: #69e3a5; }
.bulk-price-summary-item:has(.bulk-price-summary-choice--medium.is-active) .bulk-price-summary-price-panel { --summary-price-accent: #ffd166; }
.bulk-price-summary-item:has(.bulk-price-summary-choice--low.is-active) .bulk-price-summary-price-panel { --summary-price-accent: #ff8398; }
#bulkPriceSummaryList .bulk-price-summary-choice--high { color: #69e3a5; border-color: #294259; }
#bulkPriceSummaryList .bulk-price-summary-choice--medium { color: #ffd166; border-color: #294259; }
#bulkPriceSummaryList .bulk-price-summary-choice--low { color: #ff8398; border-color: #294259; }
#bulkPriceSummaryList .bulk-price-summary-choice.is-active { border-color: currentColor; }
#bulkPriceSummaryList .bulk-price-summary-fields { grid-template-columns: repeat(5, minmax(0, 1fr)); }
#bulkPriceSummaryList .bulk-price-summary-field--original-compare-at span { white-space: normal; }
#bulkPriceSummaryList .bulk-price-summary-choice span { color: inherit; }
.bulk-price-summary-price-panel .bulk-price-summary-manual,
.bulk-price-summary-price-panel .bulk-price-summary-manual.is-active {
  width: 100%; height: auto; min-height: 0; padding: 0; gap: 16px;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
.bulk-price-summary-price-panel .bulk-price-summary-manual-entry-row { grid-template-columns: minmax(0, 1fr); min-height: 24px; gap: 6px; }
.bulk-price-summary-price-panel .bulk-price-summary-manual-entry-row span { color: #d3dfec; font-size: 11px; letter-spacing: .04em; }
.bulk-price-summary-price-panel .bulk-price-summary-manual-input-wrap { height: 30px; justify-content: flex-start; gap: 5px; }
.bulk-price-summary-price-panel .bulk-price-summary-manual-input-wrap strong { color: var(--summary-price-accent); font-size: 20px; line-height: 30px; }
.bulk-price-summary-price-panel .bulk-price-summary-manual-entry-row input { flex: 1 1 auto; width: 100%; height: 30px; font-size: 26px; line-height: 30px; text-align: left; color: color-mix(in srgb, var(--summary-price-accent) 85%, white); text-shadow: 0 0 10px color-mix(in srgb, var(--summary-price-accent) 20%, transparent); }
.bulk-price-summary-price-panel .bulk-price-summary-manual-entry-row input:focus { box-shadow: 0 1px var(--summary-price-accent); }
.bulk-price-summary-price-panel .bulk-price-summary-calculated-row { flex-direction: column; align-items: flex-start; gap: 6px; }
.bulk-price-summary-price-panel .bulk-price-summary-calculated-row span { color: #d3dfec; font-size: 11px; letter-spacing: .04em; }
.bulk-price-summary-price-panel .bulk-price-summary-calculated-row strong { color: color-mix(in srgb, var(--summary-price-accent) 85%, white); font-size: 26px; line-height: 30px; text-shadow: 0 0 10px color-mix(in srgb, var(--summary-price-accent) 20%, transparent); }
.bulk-price-summary-choice span { font-size: 13px; }
.bulk-summary-base-result { white-space: nowrap; font-size: 14px; font-variant-numeric: tabular-nums; }
.bulk-price-summary-choice--high .bulk-summary-base-result { color: #69e3a5; }
.bulk-price-summary-choice--medium .bulk-summary-base-result { color: #ffd166; }
.bulk-price-summary-choice--low .bulk-summary-base-result { color: #ff8398; }
@media (max-width: 800px) {
  .bulk-price-summary-item { grid-template-columns: 60px minmax(0, 1fr); }
  .bulk-price-summary-price-panel { grid-column: 2; grid-row: 3; border-left: 0; border-top: 1px solid #355069; padding: 12px 0 0; }
}
#singleStoreUpdateDialog .single-store-update-choice:has(input[data-update-store]:not([data-update-store="shopify"]):checked) {
  border-color: #ff6677; background: #351924;
  box-shadow: inset 0 0 12px #ff667712, 0 0 9px #ff667722;
}
#singleStoreUpdateDialog .single-store-update-choice:has(input[data-update-store]:not([data-update-store="shopify"]):checked) .single-store-update-choice-status {
  color: #ff8398; background: #ff667718; border-color: #ff667766;
}
#singleStoreUpdateDialog input[data-update-store]:not([data-update-store="shopify"]):checked { accent-color: #ff6677; }
body[data-calculator-mode="bulk"]:not([data-page="customer-service"]) .stats.dashboard-block.platform-summary-strip,
body[data-calculator-mode="bulk"]:not([data-page="customer-service"]) .bulk-selected-products-card { display: none !important; }
body[data-calculator-mode="bulk"]:not([data-page="customer-service"]) .grid.dashboard-block { grid-template-columns: minmax(0, 1fr) !important; }
body[data-calculator-mode="bulk"]:not([data-page="customer-service"]) .grid.dashboard-block > .right-stack { display: contents; }
body[data-calculator-mode="bulk"]:not([data-page="customer-service"]) .grid.dashboard-block .platform-comparison-card { display: none !important; }

body[data-calculator-mode="bulk"]:not([data-page="customer-service"]) .heading-row.dashboard-block,
body[data-calculator-mode="single"]:not([data-page="customer-service"]) .heading-row.dashboard-block { display: none !important; }

/* Bulk input choices replace the idle screen and search-bar tools. */
#bulkStoreSelector { display: none; }
body[data-calculator-mode="bulk"]:not([data-page="customer-service"]) #bulkStoreSelector {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  padding: 14px 16px; margin: 0 0 12px; border: 1px solid #294158;
  border-radius: 10px;
  background: repeating-linear-gradient(0deg, #ffffff02 0 1px, transparent 1px 4px), linear-gradient(135deg, #0d1b29, #08111b);
  box-shadow: inset 0 1px 0 #7cb7d510, 0 8px 20px #0002;
}
.bulk-store-selector-label { color: #93a8be; font-size: 12px; letter-spacing: .04em; }
.bulk-store-selector-options { display: flex; flex-wrap: wrap; gap: 6px; }
#bulkStoreSelector button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  position: relative; padding: 7px 26px 7px 11px; border: 1px solid #447b6866; border-radius: 6px;
  background: linear-gradient(135deg, #13251f, #0a1717); color: #a6f3d6; font-size: 12px; cursor: pointer;
  box-shadow: inset 0 0 10px #84e8cf08;
  transition: border-color .2s, box-shadow .2s, color .2s;
}
#bulkStoreSelector button::after {
  content: ""; position: absolute; right: 10px; top: 50%; width: 5px; height: 5px;
  transform: translateY(-50%); border: 1px solid #84e8cf66; border-radius: 1px; background: #234c3d;
}
#bulkStoreSelector button img { width: 28px; height: 28px; object-fit: contain; border-radius: 4px; border: 1px solid #ffffff14; }
#bulkStoreSelector button:disabled { filter: grayscale(1); opacity: .35; cursor: not-allowed; background: #0e1821; border-color: #34404b; }
#bulkStoreSelector button:disabled::after { background: #36434d; border-color: #53606b; }
#bulkStoreSelector button:hover:not(:disabled), #bulkStoreSelector button:focus-visible {
  border-color: #84e8cf; color: #c1ffea; box-shadow: inset 0 0 12px #84e8cf12, 0 0 12px #84e8cf24;
}
#bulkStoreSelector button:focus-visible { outline: 1px solid #84e8cf; outline-offset: 3px; }
#bulkStoreSelector button[aria-pressed="true"] {
  border-color: #84e8cf; color: #b8ffe5; text-shadow: 0 0 8px #84e8cf66;
  box-shadow: inset 0 0 12px #84e8cf18, 0 0 12px #84e8cf30;
}
#bulkStoreSelector button[aria-pressed="true"]::after { background: #a0ffdc; border-color: #c8ffec; box-shadow: 0 0 5px #84e8cf, 0 0 10px #84e8cf88; }
body[data-calculator-mode="bulk"][data-bulk-store-selected="false"] .calculator .search-product,
body[data-calculator-mode="bulk"][data-bulk-store-selected="false"] #bulkInputLanding { filter: grayscale(1); opacity: .45; }
/* Manual entry occupies the complete Bulk workspace until it is closed. */
body[data-calculator-mode="bulk"] #bulkManualEntryEditor {
  height: max(760px, calc(100dvh - 150px));
}
body[data-calculator-mode="bulk"] #bulkManualEntryEditor .bulk-manual-sheet-wrap {
  flex: 1 1 0; min-height: 0; max-height: none;
}
body[data-calculator-mode="bulk"] #bulkManualEntryEditor > :not(.bulk-manual-sheet-wrap) {
  flex-shrink: 0;
}
body[data-calculator-mode="bulk"] .grid.dashboard-block:has(#bulkManualEntryEditor:not([hidden])) > :not(.calculator),
body[data-calculator-mode="bulk"] .calculator:has(#bulkManualEntryEditor:not([hidden])) > :not(#calculatorBulkMainPage),
body[data-calculator-mode="bulk"] #calculatorBulkMainPage:has(#bulkManualEntryEditor:not([hidden])) > :not(#bulkSearchState),
body[data-calculator-mode="bulk"] #bulkSearchState:has(#bulkManualEntryEditor:not([hidden])) > :not(#bulkManualEntryEditor) {
  display: none !important;
}
body[data-calculator-mode="bulk"] .calculator:has(#bulkManualEntryEditor:not([hidden])),
body[data-calculator-mode="bulk"] #calculatorBulkMainPage:has(#bulkManualEntryEditor:not([hidden])),
body[data-calculator-mode="bulk"] #bulkSearchState:has(#bulkManualEntryEditor:not([hidden])) {
  display: block !important;
  width: 100%; max-width: none; padding: 0; margin: 0;
}

body:not([data-page="customer-service"]) .bulk-search-tools { display: none !important; }
#bulkSearchState[data-search-state="idle"] #bulkSearchDefaultView > .no-product-found-wrap { display: none; }
#bulkSearchState:not([data-search-state="idle"]) #bulkInputLanding { display: none; }
.bulk-input-landing { width: 100%; padding: 24px; }
.bulk-input-landing > h3 { margin: 0 0 8px; color: #e5effa; font-size: 20px; }
.bulk-input-landing > p { margin: 0 0 22px; color: #8fa7bf; font-size: 12px; }
.bulk-input-landing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bulk-input-landing-grid .bulk-input-choice-card { min-width: 0; }
@media (max-width: 1050px) { .bulk-input-landing-grid { grid-template-columns: minmax(0, 1fr); } }

.bulk-input-landing > h3 { margin-bottom: 22px; text-align: center; font-size: 16px; color: #8491a5; font-weight: 500; }

/* Tool-specific preview animations on Bulk input cards. */
#bulkInputLanding .bulk-choice-preview { position: relative; overflow: hidden; isolation: isolate; }
#bulkInputLanding .bulk-choice-template-preview::after { content: none; }
.bulk-input-effect { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
#bulkInputLanding [data-bulk-landing-tool="csv"] .bulk-input-effect::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: #84e8cf; box-shadow: 0 -10px 22px 10px #84e8cf22, 0 0 10px #84e8cf88; animation: bulk-csv-scan 3.2s ease-in-out infinite; }
@keyframes bulk-csv-scan { 0%, 100% { top: 0; opacity: 0; } 12% { opacity: .85; } 75% { top: 96%; opacity: .85; } 90% { top: 100%; opacity: 0; } }
.bulk-camera-frame { position: absolute; inset: 10px; border: 1px solid #87bfff66; border-radius: 8px; animation: bulk-camera-focus 4s ease-in-out infinite; }
.bulk-camera-icon { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 28px; height: 24px; border: 1px solid #6095c766; border-radius: 6px; background: #102c45; color: #a4d5ff; }
.bulk-camera-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.bulk-camera-flash { position: absolute; inset: 0; background: #cce6ff; opacity: 0; animation: bulk-camera-flash 4s ease-in-out infinite; }
@keyframes bulk-camera-focus { 0%, 50%, 100% { transform: scale(1); border-color: #87bfff44; } 65%, 78% { transform: scale(.96); border-color: #a4d5ff; } }
@keyframes bulk-camera-flash { 0%, 78%, 88%, 100% { opacity: 0; } 81% { opacity: .3; } 84% { opacity: .08; } }
#bulkInputLanding [data-bulk-landing-tool="manual"] .bulk-choice-table-row:nth-child(2) > span:first-child { position: relative; }
#bulkInputLanding [data-bulk-landing-tool="manual"] .bulk-choice-table-row:nth-child(2) > span:first-child::after { content: ""; display: inline-block; width: 2px; height: 13px; margin-left: 3px; vertical-align: middle; background: #d2b4ff; box-shadow: 0 0 6px #bd8dff66; animation: bulk-manual-caret 1.1s steps(1, end) infinite; }
#bulkInputLanding [data-bulk-landing-tool="manual"] .bulk-choice-table-row:nth-child(2) { background: #a478df0c; }
@keyframes bulk-manual-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
#bulkInputLanding .bulk-input-choice-card:hover, #bulkInputLanding .bulk-input-choice-card:focus-visible { transform: none; }
@media (prefers-reduced-motion: reduce) {
  #bulkInputLanding .bulk-input-effect::after, #bulkInputLanding .bulk-camera-frame, #bulkInputLanding .bulk-camera-flash, #bulkInputLanding [data-bulk-landing-tool="manual"] .bulk-choice-table-row:nth-child(2) > span:first-child::after { animation: none; }
  #bulkInputLanding .bulk-input-choice-card:hover, #bulkInputLanding .bulk-input-choice-card:focus-visible { transform: none; }
}

/* Give the main Bulk catalogue tools their own prominent workspace. */
/* Reveal the complete coloured border outward from the pointer entry point. */
#bulkInputLanding [data-bulk-landing-tool="csv"] { --bulk-border-color: #84e8cf; }
#bulkInputLanding [data-bulk-landing-tool="screenshot"] { --bulk-border-color: #87bfff; }
#bulkInputLanding [data-bulk-landing-tool="manual"] { --bulk-border-color: #d2b4ff; }
#bulkInputLanding .bulk-input-choice-card { position: relative; isolation: isolate; }
#bulkInputLanding .bulk-file-drop-prompt { display: none; }
#bulkInputLanding .is-file-drag-ready {
  border-color: var(--bulk-border-color) !important;
  box-shadow: inset 0 0 20px color-mix(in srgb, var(--bulk-border-color) 12%, transparent), 0 0 18px color-mix(in srgb, var(--bulk-border-color) 28%, transparent);
}
#bulkInputLanding .is-file-drag-ready .bulk-file-drop-prompt {
  position: absolute; inset: 8px; z-index: 6; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; pointer-events: none;
  border: 1px dashed var(--bulk-border-color); border-radius: 10px;
  background: repeating-linear-gradient(0deg, #081522ed 0 3px, #102338ed 3px 4px);
  color: var(--bulk-border-color); text-shadow: 0 0 8px var(--bulk-border-color);
  animation: bulk-file-drop-glow 1.4s ease-in-out infinite alternate;
}
#bulkInputLanding .bulk-file-drop-prompt svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px currentColor); }
#bulkInputLanding .bulk-file-drop-prompt strong { font-size: 15px; }
#bulkInputLanding .bulk-file-drop-prompt small { color: #b0c6da; font-size: 11px; text-shadow: none; }
#bulkInputLanding .is-file-drag-over .bulk-file-drop-prompt { border-style: solid; box-shadow: inset 0 0 24px color-mix(in srgb, var(--bulk-border-color) 20%, transparent); }
@keyframes bulk-file-drop-glow { from { opacity: .78; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #bulkInputLanding .is-file-drag-ready .bulk-file-drop-prompt { animation: none; } }
#bulkInputLanding .bulk-upload-progress {
  position: absolute; inset: auto 12px 12px; z-index: 5; margin: 0;
  display: grid; place-items: center; min-height: 34px;
  border: 1px solid var(--bulk-border-color); border-radius: 4px;
  color: var(--bulk-border-color); text-shadow: 0 0 6px var(--bulk-border-color);
  font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .06em;
  background: linear-gradient(to right, transparent 0 var(--upload-progress), #091522 var(--upload-progress) 100%), repeating-linear-gradient(90deg, transparent 0 5px, #091522 5px 7px), linear-gradient(to right, color-mix(in srgb, var(--bulk-border-color) 28%, #091522), color-mix(in srgb, var(--bulk-border-color) 40%, #091522));
  box-shadow: inset 0 0 8px #0008, 0 0 12px color-mix(in srgb, var(--bulk-border-color) 22%, transparent);
}
#bulkInputLanding .bulk-input-choice-card.is-uploading { padding-bottom: 58px; border-color: var(--bulk-border-color); }
#bulkInputLanding .bulk-input-choice-card:hover { border-color: #29425d; }
#bulkInputLanding .bulk-input-choice-card::before {
  content: ""; position: absolute; inset: 0; padding: 2px; border-radius: inherit;
  background: var(--bulk-border-color); pointer-events: none; z-index: 4; opacity: 0;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
#bulkInputLanding .bulk-border-igniting::before { animation: bulk-border-ignite .65s cubic-bezier(.16, 1, .3, 1) both; }
#bulkInputLanding .bulk-border-igniting { box-shadow: 0 0 18px color-mix(in srgb, var(--bulk-border-color) 20%, transparent); }
#bulkInputLanding .bulk-input-choice-card:focus-visible { outline: 2px solid var(--bulk-border-color); outline-offset: 3px; }
@keyframes bulk-border-ignite {
  from { opacity: 1; clip-path: circle(0 at var(--bulk-hover-x, 50%) var(--bulk-hover-y, 50%)); }
  to { opacity: 1; clip-path: circle(150% at var(--bulk-hover-x, 50%) var(--bulk-hover-y, 50%)); }
}
@media (prefers-reduced-motion: reduce) {
  #bulkInputLanding .bulk-border-igniting::before { animation: none; opacity: 1; }
}

.bulk-catalog-primary-heading { display: none; }
body[data-calculator-mode="bulk"]:not([data-page="customer-service"]) .calculator .search-product { padding: 22px; margin-top: 10px; margin-bottom: 22px; border: 1px solid #3b658c; border-radius: 16px; background: radial-gradient(ellipse at 0 0, #25598a26, transparent 65%), linear-gradient(135deg, #11283c, #0c1928); box-shadow: 0 0 0 1px #6ab9ff0a, 0 10px 28px #0003; transition: border-color .2s, box-shadow .2s; }
body[data-calculator-mode="bulk"]:not([data-page="customer-service"]) .calculator .search-product:focus-within { border-color: #77b9f0; box-shadow: 0 0 0 1px #77b9f022, 0 0 25px #479ad91c; }
body[data-calculator-mode="bulk"] .bulk-catalog-primary-heading { display: flex; grid-column: 1 / -1; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.bulk-catalog-primary-icon { display: grid; place-items: center; flex: 0 0 42px; height: 42px; border: 1px solid #416c93; border-radius: 12px; background: #1c4260; color: #9bd3ff; }
.bulk-catalog-primary-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.bulk-catalog-primary-eyebrow { color: #8fcfff; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.bulk-catalog-primary-heading h3 { margin: 4px 0 6px; color: #ebf5ff; font-size: 20px; font-weight: 650; }
.bulk-catalog-primary-heading p { margin: 0; color: #9fb9d0; font-size: 12px; line-height: 1.5; }
body[data-calculator-mode="bulk"] .calculator #parentSku { border-color: #46749a; background: #0b1b2a; box-shadow: inset 0 1px 0 #ffffff06; }
body[data-calculator-mode="bulk"] .calculator #parentSku:focus { border-color: #90ceff; box-shadow: 0 0 0 3px #65b8f51c; }
body[data-calculator-mode="bulk"] .bulk-catalog-filter-button { min-height: 60px; padding: 11px 14px; border-color: #365c7a; background: linear-gradient(135deg, #153047, #102338); box-shadow: inset 0 1px 0 #ffffff06; }
body[data-calculator-mode="bulk"] .bulk-catalog-filter-button > span { color: #91bbd9; font-size: 10px; }
body[data-calculator-mode="bulk"] .bulk-catalog-filter-button > strong { font-size: 13px; }
body[data-calculator-mode="bulk"] .bulk-catalog-filter-button:hover,
body[data-calculator-mode="bulk"] .bulk-catalog-filter-button:focus-visible { border-color: #79bce9; background: #1a3a53; box-shadow: 0 0 14px #64b9f51a; }
@media (max-width: 600px) { body[data-calculator-mode="bulk"]:not([data-page="customer-service"]) .calculator .search-product { padding: 16px; } .bulk-catalog-primary-heading h3 { font-size: 17px; } }

/* Editable compare-at prices beneath each single-store selling price. */
.price-across-store-column > .store-compare-entry { grid-row: 3; min-width: 0; }
#storeGuidelinesTitle { grid-row: 4; }
.price-across-store-column > .store-guideline-card { grid-row: 5; }
.store-compare-entry > label { display: block; margin: 0 0 5px 2px; color: #91a7bd; font-size: 11px; }
.store-compare-shell { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 7px 0 10px; border: 1px solid #294158; border-radius: 9px; background: #08111b; }
.store-compare-shell > span { color: #8295aa; font-weight: 800; }
.store-compare-shell input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #eef4fb; font: inherit; appearance: textfield; -moz-appearance: textfield; }
.store-compare-shell input::-webkit-inner-spin-button, .store-compare-shell input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.store-compare-shell:focus-within { border-color: #4da3ff; }
.store-compare-clear { flex: 0 0 24px; width: 24px; min-height: 24px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: #91a7bd; font-size: 20px; cursor: pointer; }
.store-compare-clear:hover:not(:disabled) { color: #ff9aad; background: #ff5b731a; }
.store-compare-entry.is-disabled { opacity: .45; }
.store-compare-clear:disabled { cursor: not-allowed; }

.store-compare-clear { display: inline-flex; align-items: center; justify-content: center; }