:root{
    --bg:#f4f6f8;
    --surface:#ffffff;
    --ink:#17202a;
    --muted:#6c7885;
    --line:#e1e7ec;

    --green:#245f3d;
    --blue:#2563eb;
    --blue-soft:#eff6ff;
    --purple:#7c3aed;
    --purple-soft:#f5f3ff;
    --orange:#ea580c;
    --orange-soft:#fff7ed;

    --danger:#b42318;
    --danger-soft:#fff1f0;
    --success:#17723d;
    --success-soft:#ecf8f0;

    --shadow:0 12px 34px rgba(24,39,53,.07);
}

*{
    box-sizing:border-box;
}

html{
    color-scheme:only light;
    background:var(--bg);
}

body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

a{
    color:inherit;
    text-decoration:none;
}

button,
input,
textarea{
    font:inherit;
}

button{
    cursor:pointer;
}

img{
    max-width:100%;
}

/* Header */
.site-header{
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(255,255,255,.97);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);
}

.header-inner{
    width:min(1680px,calc(100% - 52px));
    min-height:82px;
    margin:0 auto;
    display:grid;
    grid-template-columns:250px minmax(360px,760px) 50px;
    gap:30px;
    align-items:center;
}

.brand{
    display:flex;
    align-items:center;
    gap:11px;
}

.brand-mark{
    width:47px;
    height:47px;
    display:grid;
    place-items:center;
    border-radius:14px;
    background:linear-gradient(145deg,#2d7650,#1f5739);
    color:#fff;
    font-size:13px;
    font-weight:900;
}

.brand-copy strong,
.brand-copy small{
    display:block;
}

.brand-copy strong{
    font-size:16px;
}

.brand-copy small{
    margin-top:2px;
    color:var(--muted);
    font-size:10px;
}

.site-search{
    height:50px;
    padding:0 14px;
    display:flex;
    align-items:center;
    gap:9px;
    border:1px solid #dce3e9;
    border-radius:14px;
    background:#f8fafc;
}

.site-search>span{
    color:#84919e;
    font-size:20px;
}

.site-search input{
    width:100%;
    height:100%;
    border:0;
    outline:0;
    background:transparent;
    color:var(--ink);
    font-size:13px;
}

.clear-search{
    width:26px;
    height:26px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#edf1f4;
    color:#667482;
}

.settings-button{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border:1px solid #d9e4dc;
    border-radius:14px;
    background:#eff6f1;
    color:var(--green);
    font-size:19px;
}

/* Shared typography */
.eyebrow{
    display:block;
    color:var(--purple);
    font-size:9px;
    font-weight:900;
    letter-spacing:.13em;
}

.catalog-heading h1,
.admin-heading h1,
.form-heading h1{
    margin:6px 0 6px;
    font-size:40px;
    line-height:1.05;
    letter-spacing:-1.3px;
}

.catalog-heading p,
.admin-heading p,
.form-heading p{
    margin:0;
    color:var(--muted);
    font-size:13px;
}

/* Catalog */
.catalog-main{
    width:min(1680px,calc(100% - 52px));
    margin:0 auto;
    padding:38px 0 70px;
}

.catalog-heading{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:20px;
    margin-bottom:26px;
}

.product-count{
    padding:8px 12px;
    border:1px solid var(--line);
    border-radius:999px;
    background:#fff;
    color:#667482;
    font-size:10px;
    font-weight:800;
}

.product-grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:19px;
}

.product-card{
    min-width:0;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:17px;
    background:#fff;
    box-shadow:0 5px 18px rgba(24,39,53,.04);
    transition:.18s ease;
}

.product-card:hover{
    transform:translateY(-3px);
    border-color:#ccd5de;
    box-shadow:var(--shadow);
}

.product-image-wrap{
    position:relative;
    aspect-ratio:1/1;
    padding:20px;
    display:grid;
    place-items:center;
    background:linear-gradient(145deg,#fbfcfd,#f1f4f7);
    border-bottom:1px solid var(--line);
}

.product-image-wrap img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.card-color{
    position:absolute;
    right:12px;
    bottom:12px;
    width:25px;
    height:25px;
    border-radius:50%;
    border:4px solid #fff;
    box-shadow:0 0 0 1px #d5dde4;
}

.product-placeholder{
    width:76%;
    height:76%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border:1px dashed #ccd6de;
    border-radius:14px;
    color:#7a8793;
}

.product-placeholder span{
    width:55px;
    height:55px;
    display:grid;
    place-items:center;
    margin-bottom:10px;
    border-radius:15px;
    background:var(--green);
    color:#fff;
    font-weight:900;
}

.product-placeholder small{
    font-size:9px;
}

.product-card-copy{
    padding:15px;
}

.product-card-copy h2{
    min-height:48px;
    margin:0;
    font-size:14px;
    line-height:1.45;
}

.product-card-copy>div{
    margin-top:12px;
    padding-top:11px;
    display:flex;
    justify-content:space-between;
    gap:10px;
    border-top:1px solid var(--line);
    font-size:9px;
}

.product-card-copy span{
    color:#7b8794;
}

.product-card-copy strong{
    color:var(--blue);
}

.empty-state{
    grid-column:1/-1;
    padding:60px 24px;
    text-align:center;
    border:1px dashed #ccd6de;
    border-radius:16px;
    background:#fff;
}

/* Product detail */
.detail-main{
    width:min(1540px,calc(100% - 52px));
    margin:0 auto;
    padding:28px 0 68px;
}

.back-row{
    margin-bottom:16px;
}

.back-button{
    min-height:42px;
    display:inline-flex;
    align-items:center;
    padding:0 15px;
    border:1px solid #dce3e9;
    border-radius:11px;
    background:#fff;
    color:#34495e;
    font-size:10px;
    font-weight:900;
}

.detail-layout{
    position:relative;
    overflow:hidden;
    display:grid;
    grid-template-columns:minmax(470px,44%) 1fr;
    gap:42px;
    padding:32px;
    border:1px solid var(--line);
    border-radius:22px;
    background:#fff;
    box-shadow:var(--shadow);
}

.detail-layout:before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    right:0;
    height:5px;
    background:linear-gradient(90deg,var(--blue),var(--purple),#f59e0b);
}

.gallery-column{
    min-width:0;
    align-self:start;
}

.main-image-stage{
    position:relative;
    width:100%;
    height:clamp(500px,58vh,720px);
    overflow:hidden;
    padding:24px;
    border:1px solid var(--line);
    border-radius:18px;
    background:radial-gradient(circle at 50% 38%,#fff 0,#f7f9fb 56%,#edf2f6 100%);
}

.main-image-button{
    position:absolute;
    inset:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    padding:0;
    border:0;
    background:transparent;
    cursor:zoom-in;
}

.main-image-button img{
    width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
}

.main-image-button>span{
    position:absolute;
    bottom:5px;
    left:50%;
    transform:translateX(-50%);
    padding:5px 8px;
    border-radius:999px;
    background:rgba(18,28,37,.74);
    color:#fff;
    font-size:8px;
    opacity:0;
}

.main-image-button:hover>span{
    opacity:1;
}

.detail-placeholder{
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

.detail-placeholder span{
    width:66px;
    height:66px;
    display:grid;
    place-items:center;
    margin-bottom:12px;
    border-radius:18px;
    background:var(--green);
    color:#fff;
    font-weight:900;
}

.main-image-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
    margin-top:11px;
}

.view-large-button,
.download-button{
    min-height:45px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    font-size:9px;
    font-weight:900;
}

.view-large-button{
    border:1px solid #d8e0e7;
    background:#fff;
    color:#34495e;
}

.download-button{
    border:1px solid var(--blue);
    background:var(--blue);
    color:#fff;
}

.thumb-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(78px,1fr));
    gap:8px;
    margin-top:11px;
    padding:9px;
    border:1px solid var(--line);
    border-radius:13px;
    background:#f8fafc;
}

.thumb-button{
    height:84px;
    overflow:hidden;
    padding:5px;
    border:1px solid #dce3e9;
    border-radius:9px;
    background:#fff;
}

.thumb-button.active{
    border:2px solid var(--purple);
    box-shadow:0 0 0 3px #f0eaff;
}

.thumb-button img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.detail-copy{
    min-width:0;
    padding:8px 0;
}

.detail-copy>h1{
    margin:8px 0 19px;
    font-size:clamp(34px,4vw,52px);
    line-height:1.08;
    letter-spacing:-1.6px;
}

.color-reference-card{
    display:grid;
    grid-template-columns:92px 1fr;
    gap:19px;
    align-items:center;
    margin-bottom:16px;
    padding:20px;
    border:1px solid #dedbea;
    border-radius:16px;
    background:linear-gradient(135deg,#faf8ff 0%,#f8f9fc 58%,#fff9ef 100%);
}

.large-color-swatch{
    width:82px;
    height:82px;
    border-radius:21px;
    border:5px solid #fff;
    box-shadow:0 0 0 1px #d6dde5,0 10px 22px rgba(0,0,0,.11);
}

.color-reference-card>div:last-child>span{
    display:block;
    margin-bottom:3px;
    color:var(--purple);
    font-size:9px;
    font-weight:900;
    letter-spacing:.12em;
}

.color-reference-card strong{
    display:block;
    font-size:16px;
}

.hex-row{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:9px;
}

.hex-row code{
    min-width:103px;
    padding:8px 11px;
    border:1px solid #dfe5eb;
    border-radius:8px;
    background:#fff;
    color:#111827;
    font-size:15px;
    font-weight:900;
}

.copy-color-button{
    min-height:30px;
    padding:0 10px;
    border:1px solid #d4dce5;
    border-radius:7px;
    background:#fff;
    color:#475569;
    font-size:9px;
    font-weight:900;
}

.copy-color-button.copied{
    border-color:#b9dfc7;
    background:#ecf8f0;
    color:#17723d;
}

.info-card{
    margin-top:13px;
    padding:18px;
    border:1px solid var(--line);
    border-radius:15px;
}

.ingredient-card{
    border-color:#d8e7fb;
    background:linear-gradient(135deg,var(--blue-soft),#f9fbff);
}

.usage-card{
    border-color:#f4dfc7;
    background:linear-gradient(135deg,var(--orange-soft),#fffbf7);
}

.info-heading{
    display:flex;
    align-items:center;
    gap:11px;
    margin-bottom:13px;
}

.info-heading>i{
    width:39px;
    height:39px;
    display:grid;
    place-items:center;
    border-radius:11px;
    background:#dbeafe;
    color:var(--blue);
    font-style:normal;
    font-weight:900;
}

.usage-card .info-heading>i{
    background:#ffedd5;
    color:var(--orange);
}

.info-heading small{
    display:block;
    margin-bottom:2px;
    color:#7b8794;
    font-size:8px;
    font-weight:900;
    letter-spacing:.12em;
}

.info-heading h2{
    margin:0;
    font-size:17px;
}

.point-list{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    gap:8px;
}

.point-list li{
    display:grid;
    grid-template-columns:24px 1fr;
    gap:9px;
    align-items:flex-start;
    padding:10px 11px;
    border:1px solid rgba(213,222,231,.82);
    border-radius:10px;
    background:rgba(255,255,255,.82);
    color:#344054;
    font-size:12px;
    line-height:1.6;
}

.bullet-dot{
    width:8px;
    height:8px;
    margin:6px auto 0;
    border-radius:50%;
    background:var(--blue);
    box-shadow:0 0 0 4px #e7f1ff;
}

.usage-list>li>i{
    width:24px;
    height:24px;
    display:grid;
    place-items:center;
    border-radius:7px;
    background:#ffedd5;
    color:#c2410c;
    font-style:normal;
    font-size:9px;
    font-weight:900;
}

/* Modal */
.image-modal{
    position:fixed;
    inset:0;
    z-index:100;
    display:none;
    padding:24px;
    background:rgba(15,23,32,.9);
    backdrop-filter:blur(8px);
}

.image-modal.open{
    display:grid;
    place-items:center;
}

.modal-close{
    position:absolute;
    top:18px;
    right:18px;
    width:43px;
    height:43px;
    border:0;
    border-radius:50%;
    background:#fff;
    color:#17202a;
    font-size:26px;
}

.modal-panel{
    width:min(1050px,94vw);
    padding:15px;
    border-radius:17px;
    background:#fff;
}

.modal-title{
    margin-bottom:10px;
    color:#53606d;
    font-size:10px;
    font-weight:800;
}

.modal-panel img{
    width:100%;
    height:min(78vh,780px);
    object-fit:contain;
    border-radius:10px;
    background:#f5f7f9;
}

/* Footer */
.site-footer{
    width:min(1680px,calc(100% - 52px));
    margin:0 auto 24px;
    padding:18px 0;
    display:flex;
    justify-content:space-between;
    gap:20px;
    border-top:1px solid var(--line);
    color:#788591;
    font-size:9px;
}

/* Login */
.login-page{
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:22px;
    background:radial-gradient(circle at 15% 20%,#edf3ff,transparent 28%),
               radial-gradient(circle at 85% 78%,#fff2df,transparent 24%),
               var(--bg);
}

.login-card{
    width:min(430px,100%);
    padding:30px;
    border:1px solid var(--line);
    border-radius:20px;
    background:#fff;
    box-shadow:var(--shadow);
}

.login-card>.brand{
    margin-bottom:27px;
}

.login-icon{
    width:56px;
    height:56px;
    display:grid;
    place-items:center;
    margin-bottom:15px;
    border-radius:15px;
    background:var(--purple-soft);
    color:var(--purple);
    font-size:23px;
}

.login-card h1{
    margin:0 0 7px;
    font-size:31px;
}

.login-card>p{
    margin:0 0 20px;
    color:var(--muted);
    font-size:11px;
}

.login-form{
    display:grid;
    gap:10px;
}

.login-form label{
    display:grid;
    gap:6px;
}

.login-form label>span{
    color:#566370;
    font-size:9px;
    font-weight:900;
}

.login-form input{
    height:46px;
    padding:0 12px;
    border:1px solid var(--line);
    border-radius:10px;
    outline:0;
}

.login-form button{
    height:46px;
    border:0;
    border-radius:10px;
    background:var(--purple);
    color:#fff;
    font-size:10px;
    font-weight:900;
}

.login-back{
    display:inline-block;
    margin-top:18px;
    color:#697582;
    font-size:9px;
}

/* Admin */
.admin-page{
    background:#f5f7f8;
}

.admin-header{
    background:#fff;
    border-bottom:1px solid var(--line);
}

.admin-header-inner{
    width:min(1540px,calc(100% - 52px));
    min-height:84px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.admin-back{
    min-height:42px;
    display:inline-flex;
    align-items:center;
    padding:0 14px;
    border:1px solid var(--line);
    border-radius:10px;
    background:#fff;
    color:#34495e;
    font-size:10px;
    font-weight:900;
}

.admin-main,
.form-main{
    width:min(1540px,calc(100% - 52px));
    margin:0 auto;
    padding:38px 0 75px;
}

.admin-heading{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:20px;
    margin-bottom:24px;
}

.add-product-button{
    min-height:48px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 18px;
    border-radius:11px;
    background:var(--blue);
    color:#fff;
    font-size:11px;
    font-weight:900;
}

.alert{
    margin-bottom:16px;
    padding:12px 14px;
    border-radius:10px;
    font-size:10px;
    font-weight:800;
}

.alert.success{
    border:1px solid #c5e8cf;
    background:var(--success-soft);
    color:var(--success);
}

.alert.error{
    border:1px solid #ffd3d0;
    background:var(--danger-soft);
    color:#9d291f;
}

.admin-list{
    display:grid;
    gap:13px;
}

.admin-row{
    min-height:116px;
    display:grid;
    grid-template-columns:94px minmax(0,1fr) auto auto;
    gap:18px;
    align-items:center;
    padding:12px 14px;
    border:1px solid var(--line);
    border-radius:15px;
    background:#fff;
    box-shadow:0 5px 18px rgba(24,39,53,.035);
}

.admin-image{
    width:90px;
    height:90px;
    display:grid;
    place-items:center;
    padding:7px;
    border-radius:12px;
    background:#f6f8fa;
}

.admin-image img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.admin-image>span{
    width:52px;
    height:65px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:var(--green);
    color:#fff;
    font-size:10px;
    font-weight:900;
}

.admin-product-copy small{
    color:var(--purple);
    font-size:8px;
    font-weight:900;
    letter-spacing:.1em;
}

.admin-product-copy h2{
    margin:4px 0 0;
    font-size:19px;
}

.admin-color{
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 10px;
    border:1px solid var(--line);
    border-radius:10px;
    background:#fafbfc;
}

.admin-color i{
    width:25px;
    height:25px;
    border-radius:8px;
    border:3px solid #fff;
    box-shadow:0 0 0 1px #d7dee5;
}

.admin-color code{
    font-size:9px;
    font-weight:800;
}

.admin-actions{
    display:flex;
    align-items:center;
    gap:8px;
}

.admin-actions form{
    margin:0;
}

.edit-button,
.delete-button{
    min-width:82px;
    min-height:41px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 14px;
    border-radius:9px;
    font-size:10px;
    font-weight:900;
}

.edit-button{
    border:1px solid #d9e5ff;
    background:#eef4ff;
    color:#245bc0;
}

.delete-button{
    border:1px solid #ffd6d2;
    background:var(--danger-soft);
    color:var(--danger);
}

/* Editor */
.form-heading{
    margin-bottom:22px;
}

.product-editor{
    display:grid;
    gap:15px;
}

.editor-card{
    padding:24px;
    border:1px solid var(--line);
    border-radius:17px;
    background:#fff;
    box-shadow:0 5px 18px rgba(24,39,53,.035);
}

.editor-heading{
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin-bottom:17px;
}

.editor-heading>span{
    width:37px;
    height:37px;
    flex:0 0 37px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:#eef2ff;
    color:var(--purple);
    font-size:9px;
    font-weight:900;
}

.editor-heading h2{
    margin:0 0 3px;
    font-size:18px;
}

.editor-heading p{
    margin:0;
    color:var(--muted);
    font-size:9px;
    line-height:1.5;
}

.editor-fields{
    display:grid;
    gap:13px;
}

.editor-fields label{
    display:grid;
    gap:6px;
}

.editor-fields label>span{
    color:#54616e;
    font-size:10px;
    font-weight:900;
}

.editor-fields input[type="text"],
.editor-fields textarea{
    width:100%;
    padding:12px 13px;
    border:1px solid #dce3e9;
    border-radius:10px;
    background:#fbfcfd;
    color:var(--ink);
    outline:0;
    font-size:13px;
}

.editor-fields textarea{
    resize:vertical;
    line-height:1.65;
}

.editor-fields input:focus,
.editor-fields textarea:focus{
    border-color:#9caeef;
    box-shadow:0 0 0 4px rgba(99,102,241,.07);
}

.color-editor{
    display:grid;
    grid-template-columns:1fr 53px;
    gap:8px;
}

.color-editor input[type="color"]{
    width:53px;
    height:45px;
    padding:4px;
    border:1px solid #dce3e9;
    border-radius:9px;
    background:#fff;
}

.existing-main{
    display:grid;
    grid-template-columns:90px 1fr auto;
    gap:13px;
    align-items:center;
    margin-bottom:13px;
    padding:10px;
    border:1px solid var(--line);
    border-radius:11px;
    background:#f8fafc;
}

.existing-main img{
    width:90px;
    height:90px;
    object-fit:contain;
}

.existing-main strong,
.existing-main small{
    display:block;
}

.existing-main strong{
    font-size:11px;
}

.existing-main small{
    margin-top:3px;
    color:var(--muted);
    font-size:8px;
}

.existing-main label{
    display:flex;
    align-items:center;
    gap:5px;
    color:var(--danger);
    font-size:9px;
    font-weight:900;
}

.drop-zone{
    min-height:220px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:24px;
    border:2px dashed #cbd5df;
    border-radius:15px;
    background:linear-gradient(180deg,#fbfcfd,#f7f9fb);
    text-align:center;
    transition:.16s ease;
}

.drop-zone:hover,
.drop-zone.drag-active{
    border-color:#8b7be7;
    background:#f7f5ff;
    box-shadow:0 0 0 5px rgba(124,58,237,.06);
}

.drop-zone>i{
    width:50px;
    height:50px;
    display:grid;
    place-items:center;
    margin-bottom:10px;
    border-radius:14px;
    background:var(--purple-soft);
    color:var(--purple);
    font-style:normal;
    font-size:25px;
    font-weight:900;
}

.drop-zone>strong{
    font-size:14px;
}

.drop-zone>span{
    margin-top:5px;
    color:var(--muted);
    font-size:9px;
}

.drop-zone>button{
    min-height:39px;
    margin-top:13px;
    padding:0 15px;
    border:1px solid #d7deea;
    border-radius:9px;
    background:#fff;
    color:#4b5563;
    font-size:9px;
    font-weight:900;
}

.upload-status-list{
    display:grid;
    gap:9px;
    margin-top:12px;
}

.gallery-upload-list{
    grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
}

.upload-card{
    display:grid;
    grid-template-columns:62px 1fr auto;
    gap:9px;
    align-items:center;
    padding:8px;
    border:1px solid #dfe5eb;
    border-radius:10px;
    background:#fff;
}

.upload-card.complete{
    border-color:#c9e6d1;
    background:#f5fbf7;
}

.upload-card.error{
    border-color:#ffd4d0;
    background:#fff5f4;
}

.upload-card img{
    width:62px;
    height:62px;
    object-fit:contain;
    border-radius:7px;
    background:#f7f9fb;
}

.upload-card strong{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:9px;
}

.upload-card small{
    display:block;
    margin-top:3px;
    color:#6f7b87;
    font-size:8px;
}

.upload-track{
    height:5px;
    margin-top:7px;
    overflow:hidden;
    border-radius:999px;
    background:#e5eaf0;
}

.upload-track i{
    display:block;
    width:0;
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg,var(--blue),var(--purple));
    transition:width .12s linear;
}

.upload-card>button{
    width:28px;
    height:28px;
    border:0;
    border-radius:7px;
    background:var(--danger-soft);
    color:var(--danger);
    font-size:14px;
}

.existing-gallery{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(125px,1fr));
    gap:9px;
    margin-bottom:13px;
}

.existing-gallery-item{
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:10px;
    background:#fff;
}

.existing-gallery-item img{
    width:100%;
    height:120px;
    padding:7px;
    display:block;
    object-fit:contain;
    background:#f7f9fb;
}

.existing-gallery-item span{
    display:flex;
    align-items:center;
    gap:5px;
    padding:7px;
    color:var(--danger);
    font-size:8px;
    font-weight:900;
}

.editor-actions{
    display:flex;
    justify-content:flex-end;
    gap:9px;
}

.editor-actions a,
.editor-actions button{
    min-width:125px;
    min-height:45px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    font-size:10px;
    font-weight:900;
}

.editor-actions a{
    border:1px solid var(--line);
    background:#fff;
    color:#596673;
}

.editor-actions button{
    border:0;
    background:var(--blue);
    color:#fff;
}

.editor-actions button:disabled{
    opacity:.58;
    cursor:not-allowed;
}

/* Responsive */
@media(max-width:1450px){
    .product-grid{
        grid-template-columns:repeat(4,minmax(0,1fr));
    }
}

@media(max-width:1120px){
    .header-inner,
    .catalog-main,
    .detail-main,
    .site-footer,
    .admin-header-inner,
    .admin-main,
    .form-main{
        width:calc(100% - 36px);
    }

    .header-inner{
        grid-template-columns:215px 1fr 48px;
        gap:20px;
    }

    .product-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .detail-layout{
        grid-template-columns:410px 1fr;
        gap:27px;
    }
}

@media(max-width:820px){
    .header-inner{
        grid-template-columns:1fr auto;
        padding:10px 0;
    }

    .brand-copy small{
        display:none;
    }

    .site-search{
        grid-column:1/-1;
        grid-row:2;
    }

    .product-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px;
    }

    .detail-layout{
        grid-template-columns:1fr;
        padding:18px;
    }

    .main-image-stage{
        height:min(66vh,620px);
        min-height:390px;
    }

    .admin-heading{
        flex-direction:column;
        align-items:flex-start;
    }

    .admin-row{
        grid-template-columns:82px 1fr auto;
    }

    .admin-color{
        grid-column:2;
        width:max-content;
    }

    .admin-actions{
        grid-column:2/-1;
    }
}

@media(max-width:540px){
    .header-inner,
    .catalog-main,
    .detail-main,
    .site-footer,
    .admin-header-inner,
    .admin-main,
    .form-main{
        width:calc(100% - 22px);
    }

    .catalog-heading{
        align-items:flex-start;
    }

    .catalog-heading h1,
    .admin-heading h1,
    .form-heading h1{
        font-size:31px;
    }

    .product-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:9px;
    }

    .product-image-wrap{
        padding:11px;
    }

    .product-card-copy{
        padding:10px;
    }

    .product-card-copy h2{
        min-height:43px;
        font-size:12px;
    }

    .main-image-stage{
        height:56vh;
        min-height:345px;
        padding:15px;
    }

    .main-image-button{
        inset:15px;
    }

    .main-image-actions{
        grid-template-columns:1fr;
    }

    .thumb-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .detail-copy>h1{
        font-size:31px;
    }

    .color-reference-card{
        grid-template-columns:65px 1fr;
        gap:13px;
        padding:14px;
    }

    .large-color-swatch{
        width:60px;
        height:60px;
        border-radius:16px;
    }

    .admin-row{
        grid-template-columns:72px 1fr;
    }

    .admin-image{
        width:70px;
        height:70px;
    }

    .admin-actions{
        display:grid;
        grid-template-columns:1fr 1fr;
        width:100%;
    }

    .edit-button,
    .delete-button{
        width:100%;
    }

    .existing-main{
        grid-template-columns:70px 1fr;
    }

    .existing-main label{
        grid-column:1/-1;
    }

    .drop-zone{
        min-height:195px;
    }

    .gallery-upload-list{
        grid-template-columns:1fr;
    }

    .editor-actions{
        display:grid;
        grid-template-columns:1fr 1fr;
    }

    .editor-actions a,
    .editor-actions button{
        min-width:0;
        width:100%;
    }
}

/* =========================================================
   PRODUCT DETAIL — BLUE ACCENT PREMIUM V5
   Blue lines + soft blurred color across every section.
   ========================================================= */

.product-detail-page{
    position:relative;
    background:
        radial-gradient(
            circle at 7% 12%,
            rgba(57,120,214,.10),
            transparent 27%
        ),
        radial-gradient(
            circle at 92% 15%,
            rgba(111,87,214,.09),
            transparent 25%
        ),
        radial-gradient(
            circle at 80% 88%,
            rgba(61,133,221,.07),
            transparent 26%
        ),
        #f4f7fb !important;
    color:#18212b !important;
}

/* Header */
.product-detail-page .site-header{
    background:rgba(255,255,255,.97) !important;
    border-bottom:1px solid #d9e3ef !important;
    box-shadow:0 4px 18px rgba(43,88,148,.04);
}

.product-detail-page .brand-copy strong{
    color:#1e3659 !important;
}

.product-detail-page .brand-copy small{
    color:#6680a3 !important;
}

.product-detail-page .site-search{
    background:#f7faff !important;
    border-color:#d4e0ef !important;
}

.product-detail-page .site-search input{
    color:#20344f !important;
}

.product-detail-page .settings-button{
    background:#eef4ff !important;
    border-color:#cddcf3 !important;
    color:#356fc3 !important;
}

/* Main card */
.product-detail-page .detail-layout{
    position:relative;
    overflow:visible !important;
    padding:34px !important;
    border:1px solid #d7e1ed !important;
    border-radius:22px !important;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.98),
            rgba(250,252,255,.98)
        ) !important;
    box-shadow:
        0 18px 48px rgba(35,74,126,.075),
        0 0 55px rgba(79,110,197,.035) !important;
}

/* Keep top blue line */
.product-detail-page .detail-layout:before{
    content:"" !important;
    display:block !important;
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:5px !important;
    border-radius:22px 22px 0 0;
    background:
        linear-gradient(
            90deg,
            #2f72cf 0%,
            #4f86da 48%,
            #765ed0 100%
        ) !important;
}

/* Back button */
.product-detail-page .back-button{
    min-height:48px !important;
    padding:0 18px !important;
    border:1px solid #cad9ec !important;
    border-left:4px solid #3474c9 !important;
    border-radius:11px !important;
    background:#ffffff !important;
    color:#285c9e !important;
    font-size:11px !important;
    font-weight:900 !important;
    box-shadow:0 5px 15px rgba(52,116,201,.07);
}

.product-detail-page .back-button:hover{
    border-color:#aac2df !important;
    background:#f3f8ff !important;
    transform:translateX(-2px);
}

/* Image area */
.product-detail-page .main-image-stage{
    height:clamp(510px,60vh,730px) !important;
    border:1px solid #d7e1ec !important;
    border-left:4px solid #4b80c8 !important;
    border-radius:18px !important;
    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(222,235,253,.55),
            transparent 46%
        ),
        #f8faff !important;
    box-shadow:0 7px 22px rgba(61,105,166,.05);
}

.product-detail-page .main-image-actions{
    gap:10px !important;
    margin-top:12px !important;
}

.product-detail-page .view-large-button,
.product-detail-page .download-button{
    min-height:50px !important;
    border-radius:11px !important;
    font-size:10px !important;
    font-weight:900 !important;
}

.product-detail-page .view-large-button{
    border:1px solid #c9d8eb !important;
    background:#f9fbff !important;
    color:#3268ae !important;
}

.product-detail-page .view-large-button:hover{
    background:#eef5ff !important;
    border-color:#a8c2e4 !important;
}

.product-detail-page .download-button{
    border:1px solid #376fc0 !important;
    background:
        linear-gradient(
            180deg,
            #4a82d1,
            #3269b8
        ) !important;
    color:#ffffff !important;
    box-shadow:0 7px 18px rgba(50,105,184,.16);
}

.product-detail-page .download-button:hover{
    background:
        linear-gradient(
            180deg,
            #3e75c4,
            #2a5da8
        ) !important;
}

/* Thumbnail strip */
.product-detail-page .thumb-grid{
    gap:9px !important;
    margin-top:12px !important;
    padding:11px !important;
    border:1px solid #d4e0ec !important;
    border-left:4px solid #547fbd !important;
    border-radius:14px !important;
    background:#f6f9fd !important;
    box-shadow:0 5px 15px rgba(60,99,154,.04);
}

.product-detail-page .thumb-button{
    height:91px !important;
    padding:6px !important;
    border:1px solid #d2dce7 !important;
    border-radius:10px !important;
    background:#ffffff !important;
}

.product-detail-page .thumb-button:hover{
    border-color:#8db0dd !important;
    background:#f7faff !important;
}

.product-detail-page .thumb-button.active{
    border:2px solid #3f79c8 !important;
    box-shadow:
        0 0 0 3px #e6effb,
        0 5px 13px rgba(63,121,200,.09) !important;
}

/* Right title */
.product-detail-page .detail-copy{
    padding:12px 0 !important;
}

.product-detail-page .detail-copy>.eyebrow{
    width:max-content;
    padding:6px 10px !important;
    border-radius:999px;
    background:#eaf2ff !important;
    color:#356db8 !important;
    font-size:9px !important;
    letter-spacing:.12em !important;
}

.product-detail-page .detail-copy>h1{
    margin:14px 0 24px !important;
    color:#183761 !important;
    font-size:clamp(42px,3.8vw,60px) !important;
    line-height:1.05 !important;
    letter-spacing:-1.8px !important;
}

/* =========================================================
   PRODUCT COLOR — BLUE/PURPLE ACCENT
   ========================================================= */

.product-detail-page .color-reference-card{
    position:relative !important;
    display:grid !important;
    grid-template-columns:106px minmax(0,1fr) !important;
    gap:21px !important;
    align-items:center !important;
    min-height:135px !important;
    margin:0 0 15px !important;
    padding:21px 23px !important;
    overflow:hidden !important;
    border:1px solid #d7ddec !important;
    border-left:5px solid #6558c8 !important;
    border-radius:15px !important;
    background:
        radial-gradient(
            circle at 90% 28%,
            rgba(110,88,201,.08),
            transparent 34%
        ),
        #fafaff !important;
    box-shadow:0 7px 20px rgba(83,73,159,.055) !important;
}

.product-detail-page .color-reference-card:before,
.product-detail-page .color-reference-card:after{
    display:none !important;
    content:none !important;
}

.product-detail-page .large-color-swatch{
    width:94px !important;
    height:94px !important;
    border:6px solid #ffffff !important;
    border-radius:23px !important;
    box-shadow:
        0 0 0 1px #cfd6df,
        0 8px 19px rgba(43,52,64,.13) !important;
}

.product-detail-page .color-reference-card>div:last-child>span{
    display:block !important;
    margin-bottom:4px !important;
    color:#6656c8 !important;
    font-size:9px !important;
    font-weight:950 !important;
    letter-spacing:.13em !important;
}

.product-detail-page .color-reference-card strong{
    display:block !important;
    color:#29476e !important;
    font-size:18px !important;
    line-height:1.25 !important;
}

.product-detail-page .hex-row{
    display:flex !important;
    align-items:flex-end !important;
    gap:8px !important;
    margin-top:11px !important;
}

.product-detail-page .hex-code-box{
    min-width:132px !important;
    padding:7px 11px 8px !important;
    border:1px solid #d3ddec !important;
    border-radius:9px !important;
    background:#ffffff !important;
}

.product-detail-page .hex-code-box small{
    display:block !important;
    margin-bottom:2px !important;
    color:#8591a2 !important;
    font-size:7px !important;
    font-weight:900 !important;
    letter-spacing:.11em !important;
}

.product-detail-page .hex-code-box code{
    display:block !important;
    min-width:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    color:#315f9a !important;
    font-size:16px !important;
    font-weight:950 !important;
    letter-spacing:.05em !important;
}

.product-detail-page .copy-color-button{
    min-width:48px !important;
    min-height:31px !important;
    padding:0 9px !important;
    border:1px solid #cdd8e7 !important;
    border-radius:7px !important;
    background:#f8fbff !important;
    color:#3c6fae !important;
    font-size:8px !important;
    font-weight:900 !important;
}

.product-detail-page .copy-color-button:hover{
    background:#edf5ff !important;
    border-color:#a9c1df !important;
}

.product-detail-page .copy-color-button.copied{
    background:#edf7ef !important;
    border-color:#b4d8bd !important;
    color:#226b3b !important;
}

/* =========================================================
   INGREDIENTS + HOW TO USE — SIMPLE TEXT WITH BLUE LINES
   ========================================================= */

.product-detail-page .simple-detail-card{
    position:relative;
    overflow:hidden;
    margin-top:14px !important;
    padding:19px 21px !important;
    border:1px solid #d8e2ed !important;
    border-left:5px solid #3978c9 !important;
    border-radius:14px !important;
    background:
        radial-gradient(
            circle at 94% 15%,
            rgba(62,120,201,.055),
            transparent 29%
        ),
        #ffffff !important;
    box-shadow:0 6px 18px rgba(45,88,145,.045) !important;
}

.product-detail-page .ingredients-simple-card{
    border-left-color:#3978c9 !important;
}

.product-detail-page .usage-simple-card{
    border-left-color:#5a73b8 !important;
}

.product-detail-page .simple-detail-heading{
    margin-bottom:9px !important;
    padding-bottom:9px !important;
    border-bottom:1px solid #e5edf5 !important;
}

.product-detail-page .simple-detail-heading span{
    display:block !important;
    color:#2d65a8 !important;
    font-size:18px !important;
    font-weight:950 !important;
    line-height:1.2 !important;
}

.product-detail-page .simple-detail-text{
    color:#405b79 !important;
    font-size:13px !important;
    line-height:1.78 !important;
    font-weight:520 !important;
    overflow-wrap:anywhere;
}

.product-detail-page .ingredients-text{
    color:#365a82 !important;
}

.product-detail-page .usage-text{
    color:#435d7c !important;
}

/* subtle blue underline accent */
.product-detail-page .simple-detail-card:after{
    content:"";
    position:absolute;
    left:21px;
    bottom:0;
    width:70px;
    height:3px;
    border-radius:999px 999px 0 0;
    background:
        linear-gradient(
            90deg,
            #3b7acb,
            #6d67c9
        );
    opacity:.75;
}

/* Modal */
.product-detail-page .image-modal{
    background:rgba(17,26,40,.88) !important;
}

.product-detail-page .modal-panel{
    border:1px solid #d5e0eb;
    box-shadow:
        0 22px 55px rgba(0,0,0,.2),
        0 0 40px rgba(52,110,190,.10);
}

.product-detail-page .modal-close{
    min-width:44px;
    min-height:44px;
    background:#ffffff !important;
    color:#315f98 !important;
}

/* Footer */
.product-detail-page .site-footer{
    border-top-color:#d5e0ea !important;
    color:#607896 !important;
}

.product-detail-page .site-footer a{
    color:#3972ba !important;
}

/* Medium */
@media(max-width:1250px){
    .product-detail-page .detail-layout{
        gap:30px !important;
        padding:27px !important;
    }
}

/* Tablet */
@media(max-width:820px){
    .product-detail-page .detail-layout{
        padding:18px !important;
    }

    .product-detail-page .detail-copy>h1{
        font-size:38px !important;
    }

    .product-detail-page .color-reference-card{
        grid-template-columns:78px 1fr !important;
        gap:14px !important;
        min-height:0 !important;
        padding:16px !important;
    }

    .product-detail-page .large-color-swatch{
        width:70px !important;
        height:70px !important;
        border-width:5px !important;
        border-radius:18px !important;
    }
}

/* Mobile */
@media(max-width:540px){
    .product-detail-page .back-button{
        min-height:44px !important;
        padding:0 14px !important;
        font-size:10px !important;
    }

    .product-detail-page .detail-copy>h1{
        margin-top:12px !important;
        font-size:31px !important;
    }

    .product-detail-page .main-image-stage{
        min-height:350px !important;
        height:56vh !important;
    }

    .product-detail-page .view-large-button,
    .product-detail-page .download-button{
        min-height:47px !important;
    }

    .product-detail-page .color-reference-card{
        grid-template-columns:62px 1fr !important;
        gap:11px !important;
        padding:13px !important;
    }

    .product-detail-page .large-color-swatch{
        width:56px !important;
        height:56px !important;
        border-radius:15px !important;
    }

    .product-detail-page .color-reference-card strong{
        font-size:15px !important;
    }

    .product-detail-page .hex-row{
        align-items:center !important;
        flex-wrap:wrap !important;
    }

    .product-detail-page .hex-code-box{
        min-width:113px !important;
    }

    .product-detail-page .simple-detail-card{
        padding:15px !important;
    }

    .product-detail-page .simple-detail-heading span{
        font-size:16px !important;
    }

    .product-detail-page .simple-detail-text{
        font-size:12px !important;
        line-height:1.7 !important;
    }

    .product-detail-page .thumb-button{
        height:82px !important;
    }
}

/* =========================================================
   HERBAL CURE FULL SITE READABILITY V6
   Larger text + buttons + dark navy/blue professional theme.
   ========================================================= */

:root{
    --hc-bg:#10171f;
    --hc-bg-2:#131c25;
    --hc-panel:#171f28;
    --hc-panel-2:#1b2632;
    --hc-panel-soft:#202c38;

    --hc-text:#edf4fb;
    --hc-text-2:#d6e0ea;
    --hc-muted:#9fb0c1;

    --hc-line:#2c3b4a;
    --hc-line-soft:#243442;

    --hc-blue:#4c91f2;
    --hc-blue-2:#336fc4;
    --hc-blue-soft:#172b44;

    --hc-purple:#8b70f0;
    --hc-green:#55b684;

    --hc-danger:#ff6a62;
    --hc-danger-bg:#351c1f;
}

/* ---------------------------------------------------------
   GLOBAL
   --------------------------------------------------------- */

html{
    background:var(--hc-bg) !important;
    color-scheme:dark !important;
    font-size:16px;
}

body{
    min-height:100vh;
    background:
        radial-gradient(
            circle at 8% 8%,
            rgba(55,116,202,.08),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 20%,
            rgba(113,86,210,.055),
            transparent 26%
        ),
        var(--hc-bg) !important;
    color:var(--hc-text) !important;
    font-size:16px !important;
    line-height:1.5;
}

a,
button{
    -webkit-tap-highlight-color:transparent;
}

button,
a,
input,
textarea{
    transition:
        background-color .16s ease,
        border-color .16s ease,
        color .16s ease,
        box-shadow .16s ease,
        transform .16s ease;
}

.eyebrow{
    color:#9a82ff !important;
    font-size:11px !important;
    font-weight:950 !important;
    letter-spacing:.13em !important;
}

/* ---------------------------------------------------------
   HEADER / BRAND / SEARCH
   --------------------------------------------------------- */

.site-header,
.admin-header{
    background:rgba(16,23,31,.97) !important;
    border-bottom:1px solid var(--hc-line) !important;
    box-shadow:0 5px 22px rgba(0,0,0,.12);
}

.header-inner{
    width:min(1660px,calc(100% - 64px)) !important;
    min-height:94px !important;
    grid-template-columns:270px minmax(420px,820px) 58px !important;
    gap:30px !important;
}

.brand{
    gap:13px !important;
}

.brand-mark{
    width:54px !important;
    height:54px !important;
    border-radius:15px !important;
    background:
        linear-gradient(
            145deg,
            #2f7b53,
            #1f5f3d
        ) !important;
    color:#ffffff !important;
    font-size:15px !important;
    box-shadow:0 8px 19px rgba(31,95,61,.17);
}

.brand-copy strong{
    color:#f3f7fb !important;
    font-size:18px !important;
    line-height:1.15 !important;
    font-weight:850 !important;
}

.brand-copy small{
    margin-top:4px !important;
    color:#aab7c5 !important;
    font-size:12px !important;
}

.site-search{
    height:56px !important;
    padding:0 17px !important;
    gap:11px !important;
    border:1px solid #324353 !important;
    border-radius:14px !important;
    background:#151e27 !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.015);
}

.site-search>span{
    color:#8da3ba !important;
    font-size:23px !important;
}

.site-search input{
    color:#ecf3fa !important;
    font-size:15px !important;
}

.site-search input::placeholder{
    color:#72869a !important;
    opacity:1;
}

.clear-search{
    width:31px !important;
    height:31px !important;
    background:#253240 !important;
    color:#c2cfdb !important;
    font-size:19px !important;
}

.settings-button{
    width:55px !important;
    height:55px !important;
    border:1px solid #36516a !important;
    border-radius:14px !important;
    background:#162a24 !important;
    color:#74d3a2 !important;
    font-size:21px !important;
    box-shadow:0 6px 15px rgba(0,0,0,.09);
}

.settings-button:hover{
    transform:translateY(-1px);
    border-color:#4b765e !important;
    background:#193229 !important;
}

/* ---------------------------------------------------------
   HOMEPAGE / CATALOG
   --------------------------------------------------------- */

.catalog-main{
    width:min(1660px,calc(100% - 64px)) !important;
    padding:48px 0 84px !important;
}

.catalog-heading{
    margin-bottom:31px !important;
}

.catalog-heading h1,
.admin-heading h1,
.form-heading h1{
    margin:8px 0 8px !important;
    color:#f2f6fb !important;
    font-size:46px !important;
    line-height:1.04 !important;
    letter-spacing:-1.35px !important;
}

.catalog-heading p,
.admin-heading p,
.form-heading p{
    color:#a9b7c5 !important;
    font-size:15px !important;
    line-height:1.55 !important;
}

.product-count{
    padding:10px 15px !important;
    border:1px solid #354555 !important;
    border-radius:999px !important;
    background:#141d25 !important;
    color:#d4dfeb !important;
    font-size:12px !important;
    font-weight:850 !important;
}

.product-grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:22px !important;
}

.product-card{
    position:relative;
    overflow:hidden;
    border:1px solid #344454 !important;
    border-left:4px solid #396fae !important;
    border-radius:17px !important;
    background:#151d25 !important;
    box-shadow:0 8px 22px rgba(0,0,0,.09) !important;
}

.product-card:hover{
    transform:translateY(-4px) !important;
    border-color:#49617a !important;
    border-left-color:#579af0 !important;
    box-shadow:0 15px 30px rgba(0,0,0,.15) !important;
}

.product-image-wrap{
    padding:24px !important;
    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(72,123,181,.09),
            transparent 47%
        ),
        #171f27 !important;
    border-bottom:1px solid #30404e !important;
}

.product-placeholder{
    border:1px dashed #445767 !important;
    color:#9dafc0 !important;
}

.product-placeholder span{
    width:62px !important;
    height:62px !important;
    border-radius:16px !important;
    font-size:15px !important;
}

.product-placeholder small{
    font-size:11px !important;
}

.card-color{
    width:30px !important;
    height:30px !important;
    right:14px !important;
    bottom:14px !important;
    border:4px solid #202b35 !important;
    box-shadow:0 0 0 1px #4a5967 !important;
}

.product-card-copy{
    padding:18px !important;
}

.product-card-copy h2{
    min-height:54px !important;
    margin:0 !important;
    color:#f0f4f8 !important;
    font-size:17px !important;
    line-height:1.45 !important;
    font-weight:850 !important;
}

.product-card-copy>div{
    margin-top:15px !important;
    padding-top:13px !important;
    border-top:1px solid #2d3b48 !important;
    font-size:12px !important;
}

.product-card-copy span{
    color:#9dacbb !important;
}

.product-card-copy strong{
    color:#5ba0ff !important;
    font-size:12px !important;
}

.empty-state{
    border-color:#3a4b5c !important;
    background:#151d25 !important;
    color:#eef4fa !important;
}

.empty-state h2{
    font-size:27px !important;
}

.empty-state p{
    color:#a6b4c2 !important;
    font-size:14px !important;
}

/* Footer is no longer tiny */
.site-footer{
    width:min(1660px,calc(100% - 64px)) !important;
    margin-bottom:28px !important;
    padding:22px 0 !important;
    border-top:1px solid #2c3b49 !important;
    color:#9fb0c1 !important;
    font-size:12px !important;
}

.site-footer a{
    color:#69a7f8 !important;
    font-weight:800 !important;
}

/* ---------------------------------------------------------
   SETTINGS LOGIN
   Remove the large white/light glow completely.
   --------------------------------------------------------- */

.login-page{
    min-height:100vh !important;
    padding:28px !important;
    background:
        linear-gradient(
            145deg,
            #0f161e 0%,
            #121b24 55%,
            #10171f 100%
        ) !important;
}

.login-page:before,
.login-page:after{
    display:none !important;
    content:none !important;
}

.login-card{
    width:min(520px,100%) !important;
    padding:38px !important;
    border:1px solid #344454 !important;
    border-left:5px solid #497fc5 !important;
    border-radius:20px !important;
    background:#151d25 !important;
    box-shadow:
        0 22px 50px rgba(0,0,0,.23) !important;
}

.login-card>.brand{
    margin-bottom:32px !important;
}

.login-icon{
    width:64px !important;
    height:64px !important;
    margin-bottom:18px !important;
    border-radius:16px !important;
    background:#1b2940 !important;
    color:#8b79ff !important;
    font-size:26px !important;
}

.login-card h1{
    margin:0 0 9px !important;
    color:#f2f6fa !important;
    font-size:38px !important;
    line-height:1.1 !important;
}

.login-card>p{
    margin:0 0 24px !important;
    color:#a9b8c7 !important;
    font-size:14px !important;
    line-height:1.55 !important;
}

.login-form{
    gap:13px !important;
}

.login-form label{
    gap:8px !important;
}

.login-form label>span{
    color:#d1dbe5 !important;
    font-size:12px !important;
    font-weight:850 !important;
}

.login-form input{
    height:55px !important;
    padding:0 15px !important;
    border:1px solid #3a4a5a !important;
    border-radius:11px !important;
    background:#1d2731 !important;
    color:#f0f5fa !important;
    font-size:15px !important;
    outline:0 !important;
}

.login-form input:focus{
    border-color:#5b91db !important;
    box-shadow:0 0 0 4px rgba(76,145,242,.11) !important;
}

.login-form button{
    height:55px !important;
    border:1px solid #6b49dc !important;
    border-radius:11px !important;
    background:
        linear-gradient(
            180deg,
            #7149dd,
            #5b35c6
        ) !important;
    color:#ffffff !important;
    font-size:13px !important;
    font-weight:900 !important;
    box-shadow:0 7px 17px rgba(90,53,198,.18);
}

.login-form button:hover{
    transform:translateY(-1px);
    background:
        linear-gradient(
            180deg,
            #7b55e7,
            #6240ca
        ) !important;
}

.login-back{
    min-height:43px !important;
    margin-top:20px !important;
    padding:0 13px !important;
    display:inline-flex !important;
    align-items:center !important;
    border:1px solid #354657 !important;
    border-radius:10px !important;
    background:#131c24 !important;
    color:#b9c7d5 !important;
    font-size:12px !important;
    font-weight:800 !important;
}

.login-back:hover{
    border-color:#526a81 !important;
    color:#e2ebf4 !important;
}

/* ---------------------------------------------------------
   SETTINGS / ADMIN LIST
   --------------------------------------------------------- */

.admin-page{
    background:
        radial-gradient(
            circle at 8% 10%,
            rgba(55,116,202,.055),
            transparent 27%
        ),
        #111922 !important;
    color:var(--hc-text) !important;
}

.admin-header-inner{
    width:min(1540px,calc(100% - 64px)) !important;
    min-height:94px !important;
}

.admin-back{
    min-height:49px !important;
    padding:0 17px !important;
    border:1px solid #384a5b !important;
    border-left:4px solid #4a80c9 !important;
    border-radius:11px !important;
    background:#151e27 !important;
    color:#cfe1f4 !important;
    font-size:12px !important;
    font-weight:900 !important;
}

.admin-back:hover{
    transform:translateX(-2px);
    border-color:#54708a !important;
    background:#192531 !important;
}

.admin-main,
.form-main{
    width:min(1540px,calc(100% - 64px)) !important;
    padding:48px 0 86px !important;
}

.admin-heading{
    margin-bottom:29px !important;
}

.add-product-button{
    min-height:54px !important;
    padding:0 21px !important;
    border:1px solid #326fca !important;
    border-radius:11px !important;
    background:
        linear-gradient(
            180deg,
            #397de0,
            #2866c0
        ) !important;
    color:#ffffff !important;
    font-size:13px !important;
    font-weight:900 !important;
    box-shadow:0 7px 18px rgba(40,102,192,.17);
}

.add-product-button:hover{
    transform:translateY(-1px);
    background:
        linear-gradient(
            180deg,
            #4789e7,
            #3270c9
        ) !important;
}

.alert{
    padding:14px 16px !important;
    border-radius:11px !important;
    font-size:13px !important;
    line-height:1.5 !important;
}

.admin-list{
    gap:15px !important;
}

.admin-row{
    min-height:132px !important;
    grid-template-columns:108px minmax(0,1fr) auto auto !important;
    gap:21px !important;
    padding:15px 17px !important;
    border:1px solid #344454 !important;
    border-left:4px solid #3f77bd !important;
    border-radius:16px !important;
    background:#151d25 !important;
    box-shadow:0 7px 18px rgba(0,0,0,.08) !important;
}

.admin-row:hover{
    border-left-color:#5ca0ef !important;
    background:#17212b !important;
}

.admin-image{
    width:100px !important;
    height:100px !important;
    padding:8px !important;
    border-radius:13px !important;
    background:#1b252f !important;
}

.admin-image>span{
    width:60px !important;
    height:72px !important;
    font-size:12px !important;
}

.admin-product-copy small{
    color:#9581ff !important;
    font-size:10px !important;
    font-weight:950 !important;
    letter-spacing:.11em !important;
}

.admin-product-copy h2{
    margin:6px 0 0 !important;
    color:#f1f5f9 !important;
    font-size:22px !important;
    line-height:1.3 !important;
}

.admin-color{
    gap:9px !important;
    padding:10px 12px !important;
    border:1px solid #3a4a59 !important;
    border-radius:10px !important;
    background:#18222c !important;
}

.admin-color i{
    width:31px !important;
    height:31px !important;
    border-radius:9px !important;
    border:4px solid #26323e !important;
}

.admin-color code{
    color:#e7edf4 !important;
    font-size:11px !important;
    font-weight:850 !important;
}

.admin-actions{
    gap:10px !important;
}

.edit-button,
.delete-button{
    min-width:92px !important;
    min-height:48px !important;
    padding:0 16px !important;
    border-radius:10px !important;
    font-size:12px !important;
    font-weight:900 !important;
}

.edit-button{
    border:1px solid #2f72cd !important;
    background:#172a42 !important;
    color:#78b2ff !important;
}

.edit-button:hover{
    background:#1b3554 !important;
    border-color:#4b8ce0 !important;
}

.delete-button{
    border:1px solid #9d332f !important;
    background:#361719 !important;
    color:#ff817a !important;
}

.delete-button:hover{
    background:#441d20 !important;
    border-color:#c1433d !important;
}

/* ---------------------------------------------------------
   PRODUCT EDITOR / ADD / EDIT PAGE
   --------------------------------------------------------- */

.form-heading{
    margin-bottom:27px !important;
}

.product-editor{
    gap:18px !important;
}

.editor-card{
    padding:29px !important;
    border:1px solid #344454 !important;
    border-left:5px solid #4079c1 !important;
    border-radius:17px !important;
    background:#151d25 !important;
    box-shadow:0 7px 19px rgba(0,0,0,.07) !important;
}

.editor-heading{
    gap:14px !important;
    margin-bottom:21px !important;
}

.editor-heading>span{
    width:43px !important;
    height:43px !important;
    flex-basis:43px !important;
    border-radius:11px !important;
    background:#1d304c !important;
    color:#83b8ff !important;
    font-size:11px !important;
}

.editor-heading h2{
    margin:0 0 4px !important;
    color:#eef4fa !important;
    font-size:22px !important;
}

.editor-heading p{
    color:#9eafc0 !important;
    font-size:12px !important;
    line-height:1.55 !important;
}

.editor-fields{
    gap:16px !important;
}

.editor-fields label{
    gap:8px !important;
}

.editor-fields label>span{
    color:#d3dee8 !important;
    font-size:13px !important;
    font-weight:850 !important;
}

.editor-fields input[type="text"],
.editor-fields textarea{
    padding:14px 15px !important;
    border:1px solid #3a4b5b !important;
    border-radius:11px !important;
    background:#1b252f !important;
    color:#edf3f9 !important;
    font-size:15px !important;
}

.editor-fields textarea{
    line-height:1.65 !important;
}

.editor-fields input::placeholder,
.editor-fields textarea::placeholder{
    color:#73879a !important;
}

.editor-fields input:focus,
.editor-fields textarea:focus{
    border-color:#5a90d9 !important;
    box-shadow:0 0 0 4px rgba(76,145,242,.10) !important;
}

.color-editor{
    grid-template-columns:1fr 61px !important;
    gap:10px !important;
}

.color-editor input[type="color"]{
    width:61px !important;
    height:52px !important;
    border:1px solid #3c4d5e !important;
    border-radius:10px !important;
    background:#1c2630 !important;
}

.existing-main{
    grid-template-columns:100px 1fr auto !important;
    gap:15px !important;
    padding:13px !important;
    border:1px solid #344555 !important;
    border-radius:12px !important;
    background:#19232d !important;
}

.existing-main img{
    width:100px !important;
    height:100px !important;
}

.existing-main strong{
    color:#edf4fa !important;
    font-size:13px !important;
}

.existing-main small{
    color:#9eafbe !important;
    font-size:10px !important;
}

.existing-main label{
    color:#ff837c !important;
    font-size:11px !important;
}

.drop-zone{
    min-height:245px !important;
    padding:28px !important;
    border:2px dashed #43586d !important;
    border-radius:16px !important;
    background:
        radial-gradient(
            circle at 50% 22%,
            rgba(72,136,217,.055),
            transparent 42%
        ),
        #171f28 !important;
}

.drop-zone:hover,
.drop-zone.drag-active{
    border-color:#6095d6 !important;
    background:#192634 !important;
    box-shadow:0 0 0 5px rgba(76,145,242,.075) !important;
}

.drop-zone>i{
    width:58px !important;
    height:58px !important;
    margin-bottom:13px !important;
    border-radius:15px !important;
    background:#1c3150 !important;
    color:#83b8ff !important;
    font-size:28px !important;
}

.drop-zone>strong{
    color:#edf4fa !important;
    font-size:16px !important;
}

.drop-zone>span{
    margin-top:7px !important;
    color:#9caebe !important;
    font-size:12px !important;
}

.drop-zone>button{
    min-height:45px !important;
    margin-top:16px !important;
    padding:0 18px !important;
    border:1px solid #456281 !important;
    border-radius:10px !important;
    background:#1d2c3b !important;
    color:#b9d8ff !important;
    font-size:11px !important;
    font-weight:900 !important;
}

.upload-card{
    padding:10px !important;
    border-color:#344656 !important;
    background:#18222c !important;
}

.upload-card strong{
    color:#e8f0f8 !important;
    font-size:11px !important;
}

.upload-card small{
    color:#9aacbd !important;
    font-size:10px !important;
}

.existing-gallery-item{
    border-color:#344555 !important;
    background:#18222c !important;
}

.existing-gallery-item img{
    background:#1e2934 !important;
}

.existing-gallery-item span{
    color:#ff837c !important;
    font-size:10px !important;
}

.editor-actions{
    gap:11px !important;
}

.editor-actions a,
.editor-actions button{
    min-width:145px !important;
    min-height:51px !important;
    border-radius:11px !important;
    font-size:12px !important;
    font-weight:900 !important;
}

.editor-actions a{
    border:1px solid #3b4b5b !important;
    background:#171f28 !important;
    color:#c6d3df !important;
}

.editor-actions button{
    border:1px solid #3674ca !important;
    background:
        linear-gradient(
            180deg,
            #3d7ed9,
            #2c68bb
        ) !important;
    color:#fff !important;
}

/* ---------------------------------------------------------
   PRODUCT DETAIL — keep blue accents but match whole site.
   --------------------------------------------------------- */

.product-detail-page{
    background:
        radial-gradient(
            circle at 8% 10%,
            rgba(58,122,207,.065),
            transparent 26%
        ),
        radial-gradient(
            circle at 92% 17%,
            rgba(118,90,211,.05),
            transparent 24%
        ),
        #10171f !important;
}

.product-detail-page .detail-main{
    width:min(1540px,calc(100% - 64px)) !important;
    padding:36px 0 80px !important;
}

.product-detail-page .detail-layout{
    padding:36px !important;
    border:1px solid #344657 !important;
    background:#151d25 !important;
    box-shadow:0 17px 44px rgba(0,0,0,.14) !important;
}

.product-detail-page .detail-layout:before{
    background:
        linear-gradient(
            90deg,
            #377ad0,
            #4e8ada,
            #8067db
        ) !important;
}

.product-detail-page .back-button{
    min-height:50px !important;
    padding:0 18px !important;
    border:1px solid #3b5168 !important;
    border-left:4px solid #4f8adb !important;
    background:#151f29 !important;
    color:#bcd9fb !important;
    font-size:12px !important;
}

.product-detail-page .main-image-stage{
    border:1px solid #364858 !important;
    border-left:4px solid #4d82c8 !important;
    background:#141d25 !important;
}

.product-detail-page .detail-copy>.eyebrow{
    background:#192b45 !important;
    color:#8cbbfb !important;
    font-size:10px !important;
}

.product-detail-page .detail-copy>h1{
    color:#f2f6fa !important;
    font-size:clamp(44px,3.8vw,60px) !important;
}

.product-detail-page .color-reference-card{
    border:1px solid #394c5f !important;
    border-left:5px solid #7c68df !important;
    background:#171f29 !important;
    box-shadow:0 7px 20px rgba(0,0,0,.08) !important;
}

.product-detail-page .color-reference-card>div:last-child>span{
    color:#a18cff !important;
    font-size:10px !important;
}

.product-detail-page .color-reference-card strong{
    color:#eaf2fa !important;
    font-size:19px !important;
}

.product-detail-page .hex-code-box{
    border-color:#3e4f5f !important;
    background:#111920 !important;
}

.product-detail-page .hex-code-box small{
    color:#9aabbb !important;
    font-size:8px !important;
}

.product-detail-page .hex-code-box code{
    color:#7eb5ff !important;
    font-size:17px !important;
}

.product-detail-page .copy-color-button{
    min-height:35px !important;
    padding:0 11px !important;
    border-color:#41566b !important;
    background:#192532 !important;
    color:#94c4ff !important;
    font-size:9px !important;
}

.product-detail-page .simple-detail-card{
    padding:21px 23px !important;
    border:1px solid #364859 !important;
    border-left:5px solid #4382cf !important;
    background:#151e27 !important;
    box-shadow:0 6px 17px rgba(0,0,0,.07) !important;
}

.product-detail-page .usage-simple-card{
    border-left-color:#607fc7 !important;
}

.product-detail-page .simple-detail-heading{
    border-bottom-color:#2d3d4c !important;
}

.product-detail-page .simple-detail-heading span{
    color:#7eb4f5 !important;
    font-size:19px !important;
}

.product-detail-page .simple-detail-text{
    color:#c5d3e1 !important;
    font-size:14px !important;
    line-height:1.8 !important;
}

.product-detail-page .view-large-button,
.product-detail-page .download-button{
    min-height:51px !important;
    font-size:11px !important;
}

.product-detail-page .view-large-button{
    border-color:#3b5268 !important;
    background:#17222d !important;
    color:#a9d0ff !important;
}

.product-detail-page .download-button{
    border-color:#3977ca !important;
    background:
        linear-gradient(
            180deg,
            #4383da,
            #2d6abc
        ) !important;
}

.product-detail-page .thumb-grid{
    border-color:#34485a !important;
    border-left-color:#527fc0 !important;
    background:#151e27 !important;
}

.product-detail-page .thumb-button{
    border-color:#3c4c5b !important;
    background:#19232c !important;
}

.product-detail-page .thumb-button.active{
    border-color:#5796e7 !important;
    box-shadow:0 0 0 3px #203a58 !important;
}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media(max-width:1320px){
    .product-grid{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    }
}

@media(max-width:960px){
    .header-inner{
        width:calc(100% - 36px) !important;
        grid-template-columns:1fr auto !important;
        padding:11px 0 !important;
    }

    .site-search{
        grid-column:1/-1 !important;
        grid-row:2 !important;
    }

    .catalog-main,
    .site-footer,
    .admin-header-inner,
    .admin-main,
    .form-main,
    .product-detail-page .detail-main{
        width:calc(100% - 36px) !important;
    }

    .product-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }

    .admin-row{
        grid-template-columns:100px 1fr auto !important;
    }

    .admin-color{
        grid-column:2 !important;
        width:max-content;
    }

    .admin-actions{
        grid-column:2/-1 !important;
    }
}

@media(max-width:600px){
    body{
        font-size:15px !important;
    }

    .header-inner,
    .catalog-main,
    .site-footer,
    .admin-header-inner,
    .admin-main,
    .form-main,
    .product-detail-page .detail-main{
        width:calc(100% - 22px) !important;
    }

    .catalog-heading h1,
    .admin-heading h1,
    .form-heading h1{
        font-size:35px !important;
    }

    .catalog-heading p,
    .admin-heading p,
    .form-heading p{
        font-size:14px !important;
    }

    .product-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:10px !important;
    }

    .product-card-copy{
        padding:12px !important;
    }

    .product-card-copy h2{
        min-height:48px !important;
        font-size:14px !important;
    }

    .product-card-copy>div{
        font-size:10px !important;
    }

    .login-card{
        padding:28px 22px !important;
    }

    .login-card h1{
        font-size:32px !important;
    }

    .admin-row{
        grid-template-columns:78px 1fr !important;
        min-height:0 !important;
    }

    .admin-image{
        width:76px !important;
        height:76px !important;
    }

    .admin-product-copy h2{
        font-size:18px !important;
    }

    .admin-actions{
        grid-column:1/-1 !important;
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        width:100%;
    }

    .edit-button,
    .delete-button{
        width:100% !important;
    }

    .editor-card{
        padding:21px !important;
    }

    .editor-actions{
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
    }

    .editor-actions a,
    .editor-actions button{
        min-width:0 !important;
        width:100% !important;
    }

    .product-detail-page .detail-layout{
        padding:18px !important;
    }
}


/* =========================================================
   HC IMAGE TOOLS + SEARCH V7
   ========================================================= */

/* ---------------------------------------------------------
   SEARCH: visible button + instant result states
   --------------------------------------------------------- */

.site-search{
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) auto auto !important;
    align-items:center !important;
}

.site-search .search-glyph{
    display:block;
    line-height:1;
}

.catalog-search-button{
    min-width:86px;
    height:40px;
    padding:0 15px;
    border:1px solid #3d78c8;
    border-radius:9px;
    background:
        linear-gradient(
            180deg,
            #4586df,
            #326fc3
        );
    color:#ffffff;
    font-size:12px;
    font-weight:900;
    cursor:pointer;
    box-shadow:0 5px 12px rgba(50,111,195,.14);
}

.catalog-search-button:hover{
    transform:translateY(-1px);
    background:
        linear-gradient(
            180deg,
            #5291e7,
            #3d7acd
        );
}

.clear-search[hidden]{
    display:none !important;
}

.product-card[hidden],
.empty-state[hidden]{
    display:none !important;
}

/* ---------------------------------------------------------
   MODAL: stable professional image viewer
   --------------------------------------------------------- */

.product-detail-page .image-modal{
    padding:20px !important;
    background:rgba(5,11,18,.91) !important;
    backdrop-filter:blur(9px);
}

.product-detail-page .modal-panel{
    width:min(1180px,95vw) !important;
    max-height:94vh;
    display:flex;
    flex-direction:column;
    padding:14px !important;
    overflow:hidden;
    border:1px solid #35495d !important;
    border-radius:18px !important;
    background:#111920 !important;
    box-shadow:
        0 25px 65px rgba(0,0,0,.38),
        0 0 45px rgba(59,122,207,.07) !important;
}

.product-detail-page .modal-topbar{
    min-height:42px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:0 4px 10px;
}

.product-detail-page .modal-title{
    min-width:0;
    margin:0 !important;
    overflow:hidden;
    color:#dbe7f3 !important;
    font-size:12px !important;
    font-weight:850 !important;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.product-detail-page .modal-zoom-tools{
    display:flex;
    align-items:center;
    gap:8px;
    flex:0 0 auto;
}

.product-detail-page #modalZoomPercent{
    min-width:48px;
    color:#9cc7fa;
    font-size:11px;
    font-weight:900;
    text-align:right;
}

.product-detail-page #modalResetZoom{
    min-height:31px;
    padding:0 10px;
    border:1px solid #3d5268;
    border-radius:8px;
    background:#17232e;
    color:#b9d4ef;
    font-size:9px;
    font-weight:900;
}

.product-detail-page #modalResetZoom:hover{
    border-color:#537394;
    background:#1b2a38;
}

.product-detail-page .modal-image-viewport{
    position:relative;
    width:100%;
    height:min(78vh,790px);
    min-height:360px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    touch-action:none;
    border:1px solid #2c3d4c;
    border-radius:12px;
    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(70,112,161,.07),
            transparent 47%
        ),
        #151c22;
}

.product-detail-page .modal-image-viewport #modalImage{
    display:block;
    width:auto !important;
    height:auto !important;
    max-width:100% !important;
    max-height:100% !important;
    margin:0 !important;
    flex:0 0 auto;
    object-fit:contain !important;
    border-radius:7px !important;
    background:transparent !important;
    user-select:none;
    -webkit-user-drag:none;
    transform-origin:center center;
    will-change:transform;
    cursor:default;
    transition:none !important;
}

.product-detail-page .modal-image-viewport.is-zoomed #modalImage{
    cursor:grab;
}

.product-detail-page .modal-image-viewport.is-zoomed #modalImage.is-dragging{
    cursor:grabbing;
}

.product-detail-page .modal-image-viewport.color-pick-active{
    box-shadow:
        inset 0 0 0 2px rgba(105,168,244,.48);
}

.product-detail-page .modal-image-viewport.color-pick-active #modalImage{
    cursor:crosshair !important;
}

.product-detail-page .modal-close{
    z-index:4;
    width:46px !important;
    height:46px !important;
    top:17px !important;
    right:17px !important;
    border:1px solid #dfe7ee !important;
    background:#ffffff !important;
    color:#263f59 !important;
    font-size:26px !important;
    font-weight:500;
    box-shadow:0 8px 20px rgba(0,0,0,.16);
}

.product-detail-page .modal-close:hover{
    transform:scale(1.04);
    background:#f3f7fb !important;
}

/* Color tool exactly in the lower-right of the image view */
.product-detail-page .modal-color-tools{
    position:absolute;
    right:14px;
    bottom:14px;
    z-index:5;
    display:flex;
    align-items:center;
    gap:8px;
    max-width:calc(100% - 28px);
}

.product-detail-page .pick-color-button{
    min-height:38px;
    padding:0 12px;
    border:1px solid #476886;
    border-radius:9px;
    background:rgba(18,34,48,.96);
    color:#b9d9fb;
    font-size:10px;
    font-weight:900;
    backdrop-filter:blur(8px);
    box-shadow:0 7px 17px rgba(0,0,0,.17);
}

.product-detail-page .pick-color-button:hover,
.product-detail-page .pick-color-button.active{
    border-color:#6aa1de;
    background:#1b3853;
    color:#e8f4ff;
}

.product-detail-page .picked-color-result{
    min-height:38px;
    display:flex;
    align-items:center;
    gap:7px;
    padding:5px 6px 5px 8px;
    border:1px solid #415a70;
    border-radius:9px;
    background:rgba(15,27,37,.97);
    box-shadow:0 7px 17px rgba(0,0,0,.17);
}

.product-detail-page .picked-color-result[hidden]{
    display:none !important;
}

.product-detail-page .picked-color-swatch{
    width:25px;
    height:25px;
    flex:0 0 25px;
    border:3px solid #ffffff;
    border-radius:7px;
    box-shadow:0 0 0 1px #526272;
}

.product-detail-page #pickedColorCode{
    min-width:72px;
    color:#eef6ff;
    font-size:11px;
    font-weight:950;
    letter-spacing:.035em;
}

.product-detail-page #copyPickedColorButton{
    min-height:29px;
    padding:0 9px;
    border:1px solid #49627a;
    border-radius:7px;
    background:#1c2a37;
    color:#a9cdf3;
    font-size:9px;
    font-weight:900;
}

.product-detail-page #copyPickedColorButton:hover{
    background:#24384b;
}

.product-detail-page #copyPickedColorButton.copied{
    border-color:#4e8962;
    background:#193527;
    color:#8ee0a9;
}

.product-detail-page .modal-help-row{
    min-height:34px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:9px 4px 0;
    color:#7f96aa;
    font-size:9px;
    font-weight:700;
}

/* No page transition/fade that can flash on Back navigation. */
html,
body{
    scroll-behavior:auto !important;
}

body{
    animation:none !important;
}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media(max-width:960px){
    .site-search{
        grid-template-columns:auto minmax(0,1fr) auto auto !important;
    }

    .catalog-search-button{
        min-width:78px;
    }

    .product-detail-page .modal-panel{
        width:min(96vw,1080px) !important;
    }

    .product-detail-page .modal-image-viewport{
        height:min(74vh,720px);
    }
}

@media(max-width:600px){
    .site-search{
        grid-template-columns:auto minmax(0,1fr) auto !important;
    }

    .catalog-search-button{
        min-width:70px;
        height:38px;
        padding:0 11px;
        font-size:10px;
    }

    .clear-search{
        position:absolute;
        right:84px;
    }

    .product-detail-page .image-modal{
        padding:10px !important;
    }

    .product-detail-page .modal-panel{
        width:100% !important;
        padding:10px !important;
        border-radius:14px !important;
    }

    .product-detail-page .modal-image-viewport{
        min-height:330px;
        height:72vh;
    }

    .product-detail-page .modal-color-tools{
        right:9px;
        bottom:9px;
        gap:6px;
    }

    .product-detail-page .pick-color-button{
        min-height:35px;
        padding:0 9px;
        font-size:9px;
    }

    .product-detail-page .picked-color-result{
        min-height:35px;
    }

    .product-detail-page .modal-help-row{
        display:none;
    }
}


/* =========================================================
   HC THEME + NAME SEARCH + PICK ZOOM V8
   Default dark. Light is user-selectable.
   ========================================================= */

/* ---------------------------------------------------------
   THEME TOGGLE
   --------------------------------------------------------- */

.header-inner{
    grid-template-columns:
        270px
        minmax(420px,820px)
        auto
        58px !important;
    gap:18px 24px !important;
}

.theme-toggle-button{
    min-height:46px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:0 12px;
    border:1px solid #3b536b;
    border-radius:11px;
    background:#182532;
    color:#a9cefa;
    font-size:10px;
    font-weight:900;
    cursor:pointer;
    white-space:nowrap;
}

.theme-toggle-button:hover{
    transform:translateY(-1px);
    border-color:#5980a8;
    background:#1d3041;
}

.theme-toggle-icon{
    font-size:15px;
    line-height:1;
}

.theme-toggle-text{
    min-width:29px;
    text-align:left;
}

.admin-header-actions{
    display:flex;
    align-items:center;
    gap:10px;
}

.login-theme-row{
    display:flex;
    justify-content:flex-end;
    margin:-8px -8px 18px 0;
}

/* ---------------------------------------------------------
   DARK IS THE TRUE DEFAULT ON EVERY PAGE
   --------------------------------------------------------- */

html,
html[data-theme="dark"]{
    background:#10171f !important;
    color-scheme:dark !important;
}

html[data-theme="dark"] body{
    background:
        radial-gradient(
            circle at 8% 8%,
            rgba(55,116,202,.08),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 20%,
            rgba(113,86,210,.055),
            transparent 26%
        ),
        #10171f !important;
    color:#edf4fb !important;
}

/*
|--------------------------------------------------------------------------
| Explicitly force product header/search dark.
| This removes the white product-page header seen in the screenshot.
|--------------------------------------------------------------------------
*/

html[data-theme="dark"] .site-header,
html[data-theme="dark"] .admin-header,
html[data-theme="dark"] .product-detail-page .site-header{
    background:rgba(16,23,31,.98) !important;
    border-bottom-color:#2c3b4a !important;
    color:#edf4fb !important;
}

html[data-theme="dark"] .site-search,
html[data-theme="dark"] .product-detail-page .site-search{
    background:#151e27 !important;
    border-color:#324353 !important;
}

html[data-theme="dark"] .site-search input,
html[data-theme="dark"] .product-detail-page .site-search input{
    color:#edf4fb !important;
}

html[data-theme="dark"] .product-detail-page{
    background:
        radial-gradient(
            circle at 8% 10%,
            rgba(58,122,207,.065),
            transparent 26%
        ),
        radial-gradient(
            circle at 92% 17%,
            rgba(118,90,211,.05),
            transparent 24%
        ),
        #10171f !important;
}

html[data-theme="dark"] .settings-button{
    background:#162a24 !important;
    border-color:#36516a !important;
    color:#74d3a2 !important;
}

/* Search query clear button */
.site-search .clear-search{
    position:static !important;
}

/* ---------------------------------------------------------
   LIGHT THEME
   --------------------------------------------------------- */

html[data-theme="light"]{
    background:#eef2f6 !important;
    color-scheme:light !important;
}

html[data-theme="light"] body,
html[data-theme="light"] .admin-page,
html[data-theme="light"] .product-detail-page{
    background:
        radial-gradient(
            circle at 8% 8%,
            rgba(72,133,216,.09),
            transparent 26%
        ),
        radial-gradient(
            circle at 92% 20%,
            rgba(122,101,208,.065),
            transparent 25%
        ),
        #eef2f6 !important;
    color:#172230 !important;
}

html[data-theme="light"] .site-header,
html[data-theme="light"] .admin-header{
    background:rgba(255,255,255,.98) !important;
    border-bottom-color:#d6e0e9 !important;
    box-shadow:0 4px 18px rgba(35,60,85,.06) !important;
}

html[data-theme="light"] .brand-copy strong{
    color:#172230 !important;
}

html[data-theme="light"] .brand-copy small{
    color:#708092 !important;
}

html[data-theme="light"] .site-search{
    background:#f8fafc !important;
    border-color:#cad8e5 !important;
}

html[data-theme="light"] .site-search input{
    color:#172230 !important;
}

html[data-theme="light"] .site-search input::placeholder{
    color:#8593a1 !important;
}

html[data-theme="light"] .theme-toggle-button{
    border-color:#c9d7e4;
    background:#f6f9fc;
    color:#326baa;
}

html[data-theme="light"] .settings-button{
    border-color:#cadbd1 !important;
    background:#eef7f1 !important;
    color:#27724b !important;
}

/* Homepage */
html[data-theme="light"] .catalog-heading h1,
html[data-theme="light"] .admin-heading h1,
html[data-theme="light"] .form-heading h1{
    color:#182433 !important;
}

html[data-theme="light"] .catalog-heading p,
html[data-theme="light"] .admin-heading p,
html[data-theme="light"] .form-heading p{
    color:#65778a !important;
}

html[data-theme="light"] .product-count{
    background:#ffffff !important;
    border-color:#d3dde6 !important;
    color:#576879 !important;
}

html[data-theme="light"] .product-card{
    background:#ffffff !important;
    border-color:#cedbe6 !important;
    border-left-color:#4383cc !important;
    box-shadow:0 8px 22px rgba(44,72,98,.07) !important;
}

html[data-theme="light"] .product-image-wrap{
    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(72,123,181,.08),
            transparent 47%
        ),
        #f5f8fb !important;
    border-bottom-color:#d4dfe8 !important;
}

html[data-theme="light"] .product-card-copy h2{
    color:#182433 !important;
}

html[data-theme="light"] .product-card-copy>div{
    border-top-color:#dbe3ea !important;
}

html[data-theme="light"] .product-card-copy span{
    color:#718194 !important;
}

html[data-theme="light"] .empty-state{
    background:#fff !important;
    border-color:#cdd9e3 !important;
    color:#182433 !important;
}

/* Admin list/edit */
html[data-theme="light"] .admin-row,
html[data-theme="light"] .editor-card,
html[data-theme="light"] .login-card{
    background:#ffffff !important;
    border-color:#cedae5 !important;
    border-left-color:#4482cc !important;
    color:#182433 !important;
    box-shadow:0 8px 22px rgba(44,72,98,.07) !important;
}

html[data-theme="light"] .admin-product-copy h2,
html[data-theme="light"] .editor-heading h2,
html[data-theme="light"] .login-card h1{
    color:#182433 !important;
}

html[data-theme="light"] .admin-product-copy small{
    color:#745bd5 !important;
}

html[data-theme="light"] .admin-image,
html[data-theme="light"] .existing-main,
html[data-theme="light"] .drop-zone,
html[data-theme="light"] .upload-card,
html[data-theme="light"] .existing-gallery-item{
    background:#f5f8fb !important;
    border-color:#cfdae4 !important;
}

html[data-theme="light"] .editor-heading p,
html[data-theme="light"] .login-card>p,
html[data-theme="light"] .drop-zone>span{
    color:#718294 !important;
}

html[data-theme="light"] .editor-fields label>span,
html[data-theme="light"] .login-form label>span{
    color:#425468 !important;
}

html[data-theme="light"] .editor-fields input[type="text"],
html[data-theme="light"] .editor-fields textarea,
html[data-theme="light"] .login-form input{
    background:#f9fbfd !important;
    border-color:#cad7e2 !important;
    color:#182433 !important;
}

html[data-theme="light"] .admin-back,
html[data-theme="light"] .login-back,
html[data-theme="light"] .editor-actions a{
    background:#ffffff !important;
    border-color:#cbd8e3 !important;
    color:#315f94 !important;
}

/* Product detail */
html[data-theme="light"] .product-detail-page .detail-layout,
html[data-theme="light"] .product-detail-page .color-reference-card,
html[data-theme="light"] .product-detail-page .simple-detail-card{
    background:#ffffff !important;
    border-color:#cfdbe6 !important;
    color:#182433 !important;
}

html[data-theme="light"] .product-detail-page .detail-copy>h1{
    color:#182433 !important;
}

html[data-theme="light"] .product-detail-page .color-reference-card strong{
    color:#273d57 !important;
}

html[data-theme="light"] .product-detail-page .hex-code-box{
    background:#f8fafc !important;
    border-color:#cbd8e3 !important;
}

html[data-theme="light"] .product-detail-page .hex-code-box code{
    color:#326cae !important;
}

html[data-theme="light"] .product-detail-page .simple-detail-heading{
    border-bottom-color:#dce5ed !important;
}

html[data-theme="light"] .product-detail-page .simple-detail-heading span{
    color:#326fac !important;
}

html[data-theme="light"] .product-detail-page .simple-detail-text{
    color:#4a6077 !important;
}

html[data-theme="light"] .product-detail-page .main-image-stage,
html[data-theme="light"] .product-detail-page .thumb-grid{
    background:#f5f8fb !important;
    border-color:#cfdae5 !important;
}

html[data-theme="light"] .product-detail-page .thumb-button{
    background:#ffffff !important;
    border-color:#cdd8e1 !important;
}

html[data-theme="light"] .product-detail-page .view-large-button{
    background:#ffffff !important;
    border-color:#cbd8e4 !important;
    color:#326aa8 !important;
}

/* Modal stays dark even in light theme for best image inspection */
html[data-theme="light"] .product-detail-page .image-modal{
    background:rgba(10,17,25,.90) !important;
}

/* Login light theme: no giant glow */
html[data-theme="light"] .login-page{
    background:#eef2f6 !important;
}

/* Footer */
html[data-theme="light"] .site-footer{
    border-top-color:#cedae4 !important;
    color:#718194 !important;
}

/* ---------------------------------------------------------
   PICK COLOR + ZOOM
   Pick mode does NOT change zoom behavior.
   --------------------------------------------------------- */

.product-detail-page .modal-image-viewport.color-pick-active.is-zoomed #modalImage{
    cursor:crosshair !important;
}

/* ---------------------------------------------------------
   RESPONSIVE THEME BUTTON
   --------------------------------------------------------- */

@media(max-width:960px){
    .header-inner{
        grid-template-columns:1fr auto auto !important;
    }

    .site-search{
        grid-column:1/-1 !important;
        grid-row:2 !important;
    }
}

@media(max-width:600px){
    .theme-toggle-button{
        min-height:42px;
        padding:0 9px;
    }

    .theme-toggle-text{
        display:none;
    }

    .header-inner{
        grid-template-columns:1fr auto auto !important;
        gap:10px !important;
    }
}


/* =========================================================
   HC THEME BUTTON + CONTRAST FIX V9
   ========================================================= */

/* ---------------------------------------------------------
   SEARCH — REMOVE BROWSER'S NATIVE BLUE X
   Keep only our custom circular dark X.
   --------------------------------------------------------- */

.site-search input[type="search"]{
    -webkit-appearance:none !important;
    appearance:none !important;
}

.site-search input[type="search"]::-webkit-search-cancel-button,
.site-search input[type="search"]::-webkit-search-decoration,
.site-search input[type="search"]::-webkit-search-results-button,
.site-search input[type="search"]::-webkit-search-results-decoration{
    -webkit-appearance:none !important;
    appearance:none !important;
    display:none !important;
    width:0 !important;
    height:0 !important;
    margin:0 !important;
}

.site-search input[type="search"]::-ms-clear,
.site-search input[type="search"]::-ms-reveal{
    display:none !important;
    width:0 !important;
    height:0 !important;
}

/* Custom X remains compact and visible */
.site-search .clear-search{
    position:static !important;
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;
    padding:0 !important;
    display:grid !important;
    place-items:center !important;
    border-radius:50% !important;
    font-size:18px !important;
    font-weight:500 !important;
    line-height:1 !important;
}

.site-search .clear-search[hidden]{
    display:none !important;
}

/* ---------------------------------------------------------
   THEME BUTTON — EXACTLY COMPACT LIKE SETTINGS BUTTON
   No long Light/Dark bar.
   --------------------------------------------------------- */

.header-inner{
    grid-template-columns:
        270px
        minmax(420px,820px)
        55px
        55px !important;
    gap:18px !important;
}

.theme-toggle-button{
    width:55px !important;
    height:55px !important;
    min-width:55px !important;
    min-height:55px !important;
    padding:0 !important;
    display:grid !important;
    place-items:center !important;
    border-radius:14px !important;
    line-height:1 !important;
    overflow:hidden !important;
}

.theme-toggle-button .theme-toggle-text{
    display:none !important;
}

.theme-toggle-button .theme-toggle-icon{
    display:block !important;
    margin:0 !important;
    font-size:19px !important;
    line-height:1 !important;
}

.settings-button{
    width:55px !important;
    height:55px !important;
    min-width:55px !important;
    min-height:55px !important;
}

/* Admin header theme button stays small too */
.admin-header-actions{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
}

.admin-header-actions .theme-toggle-button{
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
    min-height:48px !important;
    border-radius:11px !important;
}

/* Login page toggle is a tiny icon in the corner */
.login-theme-row .theme-toggle-button{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
    border-radius:11px !important;
}

/* ---------------------------------------------------------
   DARK MODE BUTTONS — LIGHTER SURFACES ON DARK BACKGROUND
   --------------------------------------------------------- */

html[data-theme="dark"] .theme-toggle-button{
    border:1px solid #597693 !important;
    background:#26394b !important;
    color:#dcecff !important;
    box-shadow:
        0 5px 14px rgba(0,0,0,.14),
        inset 0 1px 0 rgba(255,255,255,.035) !important;
}

html[data-theme="dark"] .theme-toggle-button:hover{
    border-color:#78a0c8 !important;
    background:#30485f !important;
    color:#ffffff !important;
}

html[data-theme="dark"] .settings-button{
    border:1px solid #4a7a65 !important;
    background:#204333 !important;
    color:#91e3b5 !important;
    box-shadow:0 5px 14px rgba(0,0,0,.13) !important;
}

html[data-theme="dark"] .catalog-search-button,
html[data-theme="dark"] .add-product-button,
html[data-theme="dark"] .editor-actions button,
html[data-theme="dark"] .login-form button,
html[data-theme="dark"] .download-button{
    border-color:#71a9ef !important;
    background:#4d8fe5 !important;
    color:#ffffff !important;
    box-shadow:0 7px 18px rgba(46,115,202,.20) !important;
}

html[data-theme="dark"] .catalog-search-button:hover,
html[data-theme="dark"] .add-product-button:hover,
html[data-theme="dark"] .editor-actions button:hover,
html[data-theme="dark"] .login-form button:hover,
html[data-theme="dark"] .download-button:hover{
    background:#65a3ef !important;
    border-color:#8dbcf5 !important;
}

html[data-theme="dark"] .admin-back,
html[data-theme="dark"] .login-back,
html[data-theme="dark"] .back-button,
html[data-theme="dark"] .view-large-button,
html[data-theme="dark"] .editor-actions a,
html[data-theme="dark"] .drop-zone>button{
    border-color:#5f7890 !important;
    background:#263847 !important;
    color:#e0edfa !important;
    box-shadow:0 5px 13px rgba(0,0,0,.10) !important;
}

html[data-theme="dark"] .admin-back:hover,
html[data-theme="dark"] .login-back:hover,
html[data-theme="dark"] .back-button:hover,
html[data-theme="dark"] .view-large-button:hover,
html[data-theme="dark"] .editor-actions a:hover,
html[data-theme="dark"] .drop-zone>button:hover{
    background:#31495d !important;
    border-color:#82a1bf !important;
    color:#ffffff !important;
}

html[data-theme="dark"] .edit-button{
    border-color:#68a7ef !important;
    background:#285785 !important;
    color:#eef7ff !important;
}

html[data-theme="dark"] .edit-button:hover{
    background:#3470aa !important;
    border-color:#8ac0f8 !important;
}

html[data-theme="dark"] .delete-button{
    border-color:#e56e68 !important;
    background:#78312f !important;
    color:#fff0ef !important;
}

html[data-theme="dark"] .delete-button:hover{
    background:#963d39 !important;
    border-color:#f18781 !important;
}

html[data-theme="dark"] .copy-color-button,
html[data-theme="dark"] #copyPickedColorButton,
html[data-theme="dark"] #modalResetZoom,
html[data-theme="dark"] .pick-color-button{
    border-color:#66819b !important;
    background:#2a3e50 !important;
    color:#e2effc !important;
}

/* ---------------------------------------------------------
   LIGHT MODE BUTTONS — DARKER SURFACES ON LIGHT BACKGROUND
   --------------------------------------------------------- */

html[data-theme="light"] .theme-toggle-button{
    border:1px solid #334c65 !important;
    background:#263c52 !important;
    color:#ffffff !important;
    box-shadow:0 5px 14px rgba(33,53,72,.12) !important;
}

html[data-theme="light"] .theme-toggle-button:hover{
    background:#172d42 !important;
    border-color:#1e3e5b !important;
}

html[data-theme="light"] .settings-button{
    border:1px solid #205f42 !important;
    background:#246b49 !important;
    color:#ffffff !important;
    box-shadow:0 5px 14px rgba(36,107,73,.13) !important;
}

html[data-theme="light"] .catalog-search-button,
html[data-theme="light"] .add-product-button,
html[data-theme="light"] .editor-actions button,
html[data-theme="light"] .login-form button,
html[data-theme="light"] .download-button{
    border-color:#214f86 !important;
    background:#245b99 !important;
    color:#ffffff !important;
    box-shadow:0 6px 15px rgba(36,91,153,.16) !important;
}

html[data-theme="light"] .catalog-search-button:hover,
html[data-theme="light"] .add-product-button:hover,
html[data-theme="light"] .editor-actions button:hover,
html[data-theme="light"] .login-form button:hover,
html[data-theme="light"] .download-button:hover{
    background:#183f6c !important;
    border-color:#183f6c !important;
}

html[data-theme="light"] .admin-back,
html[data-theme="light"] .login-back,
html[data-theme="light"] .back-button,
html[data-theme="light"] .view-large-button,
html[data-theme="light"] .editor-actions a,
html[data-theme="light"] .drop-zone>button{
    border-color:#344b61 !important;
    background:#344b61 !important;
    color:#ffffff !important;
    box-shadow:0 5px 13px rgba(33,50,67,.10) !important;
}

html[data-theme="light"] .admin-back:hover,
html[data-theme="light"] .login-back:hover,
html[data-theme="light"] .back-button:hover,
html[data-theme="light"] .view-large-button:hover,
html[data-theme="light"] .editor-actions a:hover,
html[data-theme="light"] .drop-zone>button:hover{
    background:#22394e !important;
    border-color:#22394e !important;
}

html[data-theme="light"] .edit-button{
    border-color:#1f5d99 !important;
    background:#245f9d !important;
    color:#ffffff !important;
}

html[data-theme="light"] .edit-button:hover{
    background:#17487a !important;
    border-color:#17487a !important;
}

html[data-theme="light"] .delete-button{
    border-color:#8a2f2b !important;
    background:#9d3934 !important;
    color:#ffffff !important;
}

html[data-theme="light"] .delete-button:hover{
    background:#762723 !important;
    border-color:#762723 !important;
}

html[data-theme="light"] .copy-color-button,
html[data-theme="light"] #copyPickedColorButton,
html[data-theme="light"] #modalResetZoom,
html[data-theme="light"] .pick-color-button{
    border-color:#354e66 !important;
    background:#354e66 !important;
    color:#ffffff !important;
}

/* ---------------------------------------------------------
   SEARCH BAR CONTRAST IN BOTH THEMES
   --------------------------------------------------------- */

html[data-theme="dark"] .site-search .clear-search{
    background:#2b3d4e !important;
    color:#f1f6fb !important;
}

html[data-theme="light"] .site-search .clear-search{
    background:#26394b !important;
    color:#ffffff !important;
}

html[data-theme="light"] .site-search{
    background:#ffffff !important;
    border-color:#bacde0 !important;
}

html[data-theme="dark"] .site-search{
    background:#151e27 !important;
    border-color:#385069 !important;
}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media(max-width:960px){
    .header-inner{
        grid-template-columns:1fr 55px 55px !important;
        gap:10px !important;
    }

    .site-search{
        grid-column:1/-1 !important;
        grid-row:2 !important;
    }
}

@media(max-width:600px){
    .header-inner{
        grid-template-columns:1fr 46px 46px !important;
    }

    .theme-toggle-button,
    .settings-button{
        width:46px !important;
        height:46px !important;
        min-width:46px !important;
        min-height:46px !important;
        border-radius:12px !important;
    }

    .site-search .clear-search{
        width:31px !important;
        height:31px !important;
        min-width:31px !important;
        min-height:31px !important;
    }
}


/* =========================================================
   HC TAB THEME + SEARCH HISTORY V10
   ========================================================= */

/* Search occupies its original header grid cell. */
.catalog-search-shell{
    position:relative;
    min-width:0;
    z-index:80;
}

.catalog-search-shell .site-search{
    width:100%;
}

/* Suggestion/history dropdown directly under the search box. */
.search-suggestions-panel{
    position:absolute;
    top:calc(100% + 9px);
    left:0;
    right:0;
    z-index:95;
    max-height:420px;
    overflow:auto;
    padding:10px;
    border-radius:14px;
    backdrop-filter:blur(14px);
}

.search-suggestions-panel[hidden]{
    display:none !important;
}

.search-suggestion-section + .search-suggestion-section{
    margin-top:8px;
    padding-top:8px;
}

.search-suggestion-heading{
    min-height:31px;
    padding:4px 8px 7px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    font-size:10px;
    font-weight:900;
    letter-spacing:.07em;
    text-transform:uppercase;
}

.search-history-heading button{
    min-height:28px;
    padding:0 9px;
    border-radius:7px;
    font-size:9px;
    font-weight:900;
}

.search-suggestion-list{
    display:grid;
    gap:5px;
}

.search-suggestion-item{
    width:100%;
    min-height:44px;
    display:grid;
    grid-template-columns:30px minmax(0,1fr);
    gap:9px;
    align-items:center;
    padding:7px 10px;
    border-radius:9px;
    text-align:left;
    cursor:pointer;
}

.search-suggestion-icon{
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    border-radius:8px;
    font-size:14px;
}

.search-suggestion-text{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:12px;
    font-weight:800;
}

/* Dark */
html[data-theme="dark"] .search-suggestions-panel{
    border:1px solid #40576d;
    background:rgba(20,30,40,.98);
    color:#eef5fc;
    box-shadow:0 20px 48px rgba(0,0,0,.30);
}

html[data-theme="dark"] .search-suggestion-section + .search-suggestion-section{
    border-top:1px solid #304252;
}

html[data-theme="dark"] .search-suggestion-heading{
    color:#91a9c0;
}

html[data-theme="dark"] .search-history-heading button{
    border:1px solid #536a81;
    background:#293b4d;
    color:#d9e8f7;
}

html[data-theme="dark"] .search-suggestion-item{
    border:1px solid transparent;
    background:#182532;
    color:#edf5fc;
}

html[data-theme="dark"] .search-suggestion-item:hover{
    border-color:#4f83b8;
    background:#21394e;
}

html[data-theme="dark"] .search-suggestion-icon{
    background:#263e53;
    color:#8fc4ff;
}

/* Light */
html[data-theme="light"] .search-suggestions-panel{
    border:1px solid #bfd0df;
    background:rgba(255,255,255,.985);
    color:#172535;
    box-shadow:0 20px 48px rgba(35,60,84,.17);
}

html[data-theme="light"] .search-suggestion-section + .search-suggestion-section{
    border-top:1px solid #e0e7ee;
}

html[data-theme="light"] .search-suggestion-heading{
    color:#667b90;
}

html[data-theme="light"] .search-history-heading button{
    border:1px solid #adc0d2;
    background:#eaf1f8;
    color:#2c547d;
}

html[data-theme="light"] .search-suggestion-item{
    border:1px solid transparent;
    background:#f7f9fc;
    color:#1a2a3b;
}

html[data-theme="light"] .search-suggestion-item:hover{
    border-color:#9dbde0;
    background:#ecf5ff;
}

html[data-theme="light"] .search-suggestion-icon{
    background:#e4effb;
    color:#316fae;
}

@media(max-width:960px){
    .catalog-search-shell{
        grid-column:1/-1;
        grid-row:2;
    }
}

@media(max-width:600px){
    .search-suggestions-panel{
        max-height:360px;
        padding:8px;
    }

    .search-suggestion-item{
        min-height:42px;
    }

    .search-suggestion-text{
        font-size:11px;
    }
}


/* =========================================================
   HC THEME FLICKER FIX V11
   Prevent first-load flash and Light/Dark half-painted frames.
   ========================================================= */

/*
|--------------------------------------------------------------------------
| During first paint and the exact theme switch, absolutely no animation /
| transition is allowed. This is temporary and removed immediately.
|--------------------------------------------------------------------------
*/
html.theme-preload *,
html.theme-preload *::before,
html.theme-preload *::after,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after{
    transition:none !important;
    animation:none !important;
    scroll-behavior:auto !important;
}

/* The root itself must already have the correct surface before body paints. */
html[data-theme="light"]{
    background:#eef2f6 !important;
    color-scheme:light !important;
}

html[data-theme="dark"]{
    background:#10171f !important;
    color-scheme:dark !important;
}

/*
|--------------------------------------------------------------------------
| Body gets a fixed base immediately. This avoids an uncovered root/background
| frame during navigation or theme changes.
|--------------------------------------------------------------------------
*/
html[data-theme="light"] body{
    background-color:#eef2f6 !important;
}

html[data-theme="dark"] body{
    background-color:#10171f !important;
}

/*
|--------------------------------------------------------------------------
| Theme-sensitive controls keep exactly the same dimensions in both modes,
| preventing horizontal/header jumps while changing theme.
|--------------------------------------------------------------------------
*/
.theme-toggle-button,
.settings-button,
.catalog-search-button,
.clear-search,
.admin-back,
.back-button,
.edit-button,
.delete-button,
.add-product-button{
    box-sizing:border-box !important;
}

.theme-toggle-button{
    transform:none;
}

html.theme-switching .theme-toggle-button,
html.theme-switching .settings-button,
html.theme-switching .catalog-search-button,
html.theme-switching .admin-back,
html.theme-switching .back-button,
html.theme-switching .edit-button,
html.theme-switching .delete-button,
html.theme-switching .add-product-button{
    transform:none !important;
}

/* No backdrop-filter repaint flash in the header while switching theme. */
html.theme-switching .site-header,
html.theme-switching .admin-header,
html.theme-preload .site-header,
html.theme-preload .admin-header{
    backdrop-filter:none !important;
}

/*
|--------------------------------------------------------------------------
| Search suggestions should never briefly inherit the opposite theme.
|--------------------------------------------------------------------------
*/
html[data-theme="light"] .search-suggestions-panel{
    color-scheme:light !important;
}

html[data-theme="dark"] .search-suggestions-panel{
    color-scheme:dark !important;
}


/* =========================================================
   HC FIXED IMAGE BOXES V12
   Image NEVER decides card/row size.
   Container decides size; image always fits inside.
   ========================================================= */

/* ---------------------------------------------------------
   HOMEPAGE PRODUCT GRID
   --------------------------------------------------------- */

.product-grid{
    align-items:start !important;
}

.product-card{
    align-self:start !important;
    height:auto !important;
    min-height:0 !important;

    display:grid !important;
    grid-template-rows:
        330px
        auto !important;

    overflow:hidden !important;
}

/*
|--------------------------------------------------------------------------
| Fixed media stage.
| Tall, wide or huge source images cannot enlarge the card.
|--------------------------------------------------------------------------
*/
.product-card .product-image-wrap{
    width:100% !important;

    height:330px !important;
    min-height:330px !important;
    max-height:330px !important;

    aspect-ratio:auto !important;

    padding:20px !important;

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

    overflow:hidden !important;

    contain:layout paint !important;

    box-sizing:border-box !important;
}

/*
|--------------------------------------------------------------------------
| Actual uploaded image remains smaller than the media stage.
|--------------------------------------------------------------------------
*/
.product-card .product-image-wrap > img{
    display:block !important;

    width:auto !important;
    height:auto !important;

    max-width:86% !important;
    max-height:86% !important;

    min-width:0 !important;
    min-height:0 !important;

    object-fit:contain !important;
    object-position:center !important;

    flex:0 1 auto !important;

    margin:auto !important;

    transform:none !important;
}

/* Placeholder follows same visual size. */
.product-card .product-placeholder{
    width:78% !important;
    height:78% !important;

    max-width:250px !important;
    max-height:250px !important;

    flex:0 0 auto !important;
}

/*
|--------------------------------------------------------------------------
| Text/content never gets stretched just because another card has a tall photo.
|--------------------------------------------------------------------------
*/
.product-card .product-card-copy{
    align-self:start !important;
    min-height:118px !important;
    height:auto !important;
}

.product-card .product-card-copy h2{
    min-height:50px !important;
}

/* Color circle stays inside image stage. */
.product-card .card-color{
    right:13px !important;
    bottom:13px !important;
    z-index:3 !important;
}

/* ---------------------------------------------------------
   SETTINGS PRODUCT LIST
   --------------------------------------------------------- */

.admin-row{
    min-width:0 !important;
    overflow:hidden !important;
}

/*
|--------------------------------------------------------------------------
| Thumbnail box has hard dimensions.
|--------------------------------------------------------------------------
*/
.admin-row .admin-image{
    width:100px !important;
    height:100px !important;

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

    max-width:100px !important;
    max-height:100px !important;

    padding:8px !important;

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

    overflow:hidden !important;

    contain:layout paint !important;

    box-sizing:border-box !important;
    align-self:center !important;
}

/*
|--------------------------------------------------------------------------
| Even a 4000px portrait image stays inside the 100x100 thumbnail.
|--------------------------------------------------------------------------
*/
.admin-row .admin-image > img{
    display:block !important;

    width:auto !important;
    height:auto !important;

    max-width:100% !important;
    max-height:100% !important;

    min-width:0 !important;
    min-height:0 !important;

    object-fit:contain !important;
    object-position:center !important;

    margin:auto !important;

    transform:none !important;
}

/* Placeholder also cannot escape. */
.admin-row .admin-image > span{
    max-width:64px !important;
    max-height:72px !important;
    flex:0 0 auto !important;
}

/* Prevent any grid child from forcing the row wider/taller. */
.admin-row > *{
    min-width:0 !important;
}

.admin-product-copy{
    overflow:hidden !important;
}

.admin-product-copy h2{
    overflow-wrap:anywhere !important;
}

/* Desktop admin rows stay visually uniform. */
@media(min-width:601px){
    .admin-row{
        min-height:128px !important;
        height:128px !important;
        max-height:128px !important;
    }
}

/* ---------------------------------------------------------
   RESPONSIVE PRODUCT IMAGE STAGES
   --------------------------------------------------------- */

@media(max-width:1320px){
    .product-card{
        grid-template-rows:
            300px
            auto !important;
    }

    .product-card .product-image-wrap{
        height:300px !important;
        min-height:300px !important;
        max-height:300px !important;
    }
}

@media(max-width:960px){
    .product-card{
        grid-template-rows:
            270px
            auto !important;
    }

    .product-card .product-image-wrap{
        height:270px !important;
        min-height:270px !important;
        max-height:270px !important;
        padding:16px !important;
    }

    .product-card .product-image-wrap > img{
        max-width:88% !important;
        max-height:88% !important;
    }
}

@media(max-width:600px){
    .product-card{
        grid-template-rows:
            205px
            auto !important;
    }

    .product-card .product-image-wrap{
        height:205px !important;
        min-height:205px !important;
        max-height:205px !important;
        padding:11px !important;
    }

    .product-card .product-image-wrap > img{
        max-width:90% !important;
        max-height:90% !important;
    }

    /*
    |--------------------------------------------------------------------------
    | Admin mobile rows need natural height because buttons wrap,
    | but image remains locked inside its thumbnail.
    |--------------------------------------------------------------------------
    */
    .admin-row{
        height:auto !important;
        max-height:none !important;
        min-height:0 !important;
        overflow:hidden !important;
    }

    .admin-row .admin-image{
        width:76px !important;
        height:76px !important;

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

        max-width:76px !important;
        max-height:76px !important;

        padding:6px !important;
    }
}