@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

*,
*::before,
*::after{
    box-sizing:border-box;
}

:root{
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-display: 'Space Grotesk', -apple-system, sans-serif;
    --site-width:1180px;
    --content-width:760px;

    --bg:#0e0e0e;
    --surface:#070707;
    --surface-raised:#0b0b0b;
    --surface-hover:#101010;
    --field:#101010;

    --line:#242424;
    --line-soft:#151515;
    --line-strong:#3d3d3d;
    --line-focus:#cfcfcf;

    --text:#f1f1f1;
    --soft:#cfcfcf;
    --white:#f1f1f1;
    --button-hover:#e8e8e8;
    --black:#84102D;

    --space-1:4px;
    --space-2:8px;
    --space-3:12px;
    --space-4:16px;
    --space-5:20px;
    --space-6:24px;
    --space-7:32px;
    --space-8:40px;
    --space-9:48px;
    --space-10:64px;
    --space-11:80px;
    --space-12:96px;

    --text-micro:10px;
    --text-label:11px;
    --text-small:14px;
    --text-base:16px;
    --text-lead:18px;
    --text-display:34px;

    --track-tight:.02em;
    --track-label:.22em;
    --track-wide:.36em;

    --line-tight:1.35;
    --line-base:1.7;
    --line-relaxed:1.88;
}

*::selection{
    background:var(--white);
    color:var(--black);
}

html{
    font-size:16px;
    background:var(--bg);
    scroll-behavior:smooth;
}

body{
    margin:0;
    padding:var(--space-10) var(--space-8) var(--space-11);

    background:
        linear-gradient(
            135deg,
            #0e0e0e,
            #131313,
            #191919,
            #131313,
            #0e0e0e
        );

    background-size:500% 500%;

    animation:blkAmbient 30s ease infinite;

    color:var(--text);
    font-family:var(--font-sans);
    font-size:var(--text-base);
    line-height:var(--line-base);
    letter-spacing:var(--track-tight);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.logo a,
.admin-logo a,
.admin-kicker,
.area-kicker,
.product-category,
.section-title,
.process-step-index,
.process-label,
.admin-section-title h2,
.admin-hero h1 {
    font-family: var(--font-display) !important;
    font-weight: 600;
}

img{
    display:block;
    max-width:100%;
    height:auto;
}

a{
    color:var(--white);
    text-decoration:none;
    text-underline-offset:5px;
    text-decoration-thickness:1px;
}

button,
input,
select,
textarea{
    font:inherit;
}

#header,
#page{
    width:100%;
    max-width:var(--site-width);
    margin-left:auto;
    margin-right:auto;
}

#header{
    display:grid;
    grid-template-columns:1fr auto;
    gap:var(--space-7);
    align-items:end;
    margin-bottom:var(--space-11);
    padding-bottom:var(--space-6);
    border-bottom:1px solid var(--line);
}

.logo a{
    display:inline-block;
    color:var(--white);
    font-size:var(--text-display);
    line-height:1;
    letter-spacing:.18em;
    font-weight:700;
    text-decoration:none;
}

.logo a:hover{
    text-decoration:none;
}

/* Menu */
.filter{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    justify-content:flex-end;
    gap:0;
    color:var(--soft);
    font-size:var(--text-label);
    line-height:1;
    letter-spacing:var(--track-label);
    text-transform:none;
}

.filter a{
    display:inline-block;
    color:var(--soft);
    line-height:1;
    padding:4px 8px;
    transition:
        background-color .15s ease,
        color .15s ease;
}

.filter a:hover,
.filter a:focus{
    background:rgba(245, 245, 245, 0.12) !important;
    color:#f1f1f1 !important;
    text-decoration:none !important;
}

.filter a:hover *,
.filter a:focus *,
.filter a:hover span,
.filter a:focus span,
.filter a:hover [data-cart-count],
.filter a:focus [data-cart-count]{
    color:#f1f1f1 !important;
}

.filter span{
    display:inline-block;
    color:var(--soft);
    opacity:.75;
    padding:0 10px;
    line-height:1;
    transform:none;
}

[data-cart-count],
#cartCount{
    color:var(--white);
    font-variant-numeric:tabular-nums;
}

.intro{
    width:100%;
    max-width:820px;
    margin:0 0 var(--space-12);
    color:var(--soft);
}

.intro p{
    margin:0;
}

.intro p:first-child{
    margin:0 0 var(--space-7);
    color:var(--white);
    font-size:clamp(34px,6vw,72px);
    line-height:.98;
    letter-spacing:-.03em;
    font-weight:500;
}

.intro p:not(:first-child){
    max-width:760px;
    color:var(--soft);
    font-size:var(--text-lead);
    line-height:var(--line-relaxed);
}

.section-title{
    color:var(--white);
    font-size:var(--text-label);
    line-height:var(--line-tight);
    letter-spacing:var(--track-label);
    text-transform:none;
    margin:var(--space-10) 0 var(--space-5);
}

.section-title:first-of-type{
    margin-top:0;
}

.small,
.private-note,
.notice p,
.portal-card p,
.catalogue-card p,
.product-description,
.cart-meta,
.summary-line,
.empty-state,
.error-message,
.variant-inline-status{
    color:var(--soft);
}

.small{
    max-width:var(--content-width);
    font-size:var(--text-small);
    line-height:var(--line-relaxed);
    margin:0 0 var(--space-6);
}

.notice{
    max-width:var(--content-width);
    border-top:1px solid var(--line);
    margin-top:var(--space-9);
    padding:var(--space-5) 0 var(--space-7);
}

.notice p{
    margin:0 0 1.5rem;
    line-height:1.8;
}

.notice p:last-child{
    margin-bottom:0;
}

form,
#request,
#framework,
.error-message,
#page > label,
#page > .section-title,
#page > .request-actions{
    max-width:var(--content-width);
}

form{
    margin-top:var(--space-6);
}

.form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--space-6) var(--space-8);
    margin-bottom:var(--space-6);
}

label{
    display:block;
    color:var(--soft);
    font-size:var(--text-label);
    line-height:var(--line-tight);
    letter-spacing:var(--track-label);
    text-transform:none;
    margin-bottom:var(--space-6);
}

label input,
label select,
label textarea{
    margin-top:var(--space-3);
}

input,
select,
textarea{
    width:100%;
    background:var(--field);
    color:var(--white);
    border:1px solid var(--line);
    border-radius:4px;
    font-family:var(--font-sans);
    font-size:var(--text-base);
    line-height:1.5;
    outline:none;
    appearance:none;
    transition:border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

input,
select{
    height:43px;
    padding:10px var(--space-4);
}

textarea{
    min-height:140px;
    padding:var(--space-4);
    resize:vertical;
    height:auto;
}

input::placeholder,
textarea::placeholder{
    color:var(--soft);
    opacity:.45;
}

input:hover,
select:hover,
textarea:hover{
    border-color:var(--line-strong);
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
.button:focus-visible,
.checkbox-line input:focus{
    outline:1px solid var(--line-focus);
    outline-offset:2px;
}

input:focus,
select:focus,
textarea:focus{
    background:var(--surface-hover);
    border-color:var(--line-focus);
}

select{
    cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23cfcfcf' d='M0 0l5 5 5-5z'/%3E%3C/svg%3E");
    background-position:calc(100% - var(--space-5)) center;
    background-size:10px 6px;
    background-repeat:no-repeat;
    padding-right:var(--space-9);
}

#username{
    max-width:360px;
    height:42px;
}

#page > label:has(#username){
    max-width:360px;
}
#password,
input[type="password"],
input[name="password"]{
    max-width:360px;
    height:42px;
}

#page > label:has(#password),
#page > label:has(input[type="password"]),
#page > label:has(input[name="password"]){
    max-width:360px;
}
.checkbox-line{
    display:grid;
    grid-template-columns:12px 1fr;
    gap:var(--space-3);
    align-items:start;
    max-width:620px;
    margin:var(--space-6) 0;
    color:var(--soft);
    font-size:13px;
    line-height:1.68;
    letter-spacing:0;
    text-transform:none;
}

#framework + .checkbox-line{
    border-top:1px solid var(--line);
    padding-top: 0;
    margin-top:var(--space-5);
}

.checkbox-line input{
    width:12px;
    height:12px;
    min-width:12px;
    min-height:12px;
    margin:6px 0 0;
    padding:0;
    appearance:none;
    background:var(--field);
    border:1px solid var(--line);
    position:relative;
    cursor:pointer;
}

.checkbox-line input:hover{
    border-color:var(--line-strong);
}

.checkbox-line input:checked{
    background:var(--white);
    border-color:var(--white);
}

.checkbox-line input:checked::after{
    content:"";
    position:absolute;
    left:3px;
    top:0;
    width:4px;
    height:7px;
    border:solid var(--black);
    border-width:0 1.3px 1.3px 0;
    transform:rotate(45deg);
}

button,
.button,
input[type="submit"],
.blk-add-request{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:0 var(--space-6);
    background:var(--white);
    color:var(--black);
    border:1px solid var(--white);
    border-radius:4px;
    font-family:var(--font-display);
    font-size:var(--text-label);
    font-weight:700;
    line-height:1;
    letter-spacing:var(--track-label);
    text-transform:none;
    cursor:pointer;
    text-decoration:none;
    transition:background-color .16s cubic-bezier(0.16, 1, 0.3, 1), border-color .16s cubic-bezier(0.16, 1, 0.3, 1), transform .16s cubic-bezier(0.16, 1, 0.3, 1), opacity .16s ease;
}

button:hover,
.button:hover,
input[type="submit"]:hover,
.blk-add-request:hover{
    background:var(--button-hover);
    border-color:var(--button-hover);
    color:var(--black);
    text-decoration:none;
    transform:translateY(-1px);
}

button:disabled,
.button.disabled,
.blk-add-request:disabled{
    cursor:not-allowed;
    opacity:.42;
    transform:none;
}

button:active,
.button:active,
input[type="submit"]:active{
    transform:translateY(0);
}

.button.secondary,
button.secondary{
    background:transparent;
    color:var(--white);
    border-color:var(--line-strong);
}

.button.secondary:hover,
button.secondary:hover{
    background:var(--surface-hover);
    color:var(--white);
    border-color:var(--line-strong);
}

.request-actions{
    display:flex;
    flex-wrap:wrap;
    gap:var(--space-3);
    margin-top:var(--space-7);
}

/* catalogue */

.catalogue-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:var(--space-6);
    width:100%;
    max-width:var(--site-width);
    margin-top:var(--space-8);
}

.catalogue-card{
    display:block;
    color:var(--white);
    text-decoration:none;
    min-width:0;
}

.catalogue-card:hover{
    text-decoration:none;
}

.catalogue-image{
    aspect-ratio:1 / 1.12;
    max-height:300px;
    background:var(--surface-raised);
    border:1px solid var(--line);
    margin-bottom:var(--space-4);
    overflow:hidden;
}

.catalogue-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    filter:grayscale(1);
}

.catalogue-card:hover .catalogue-image{
    border-color:var(--line-strong);
}

.catalogue-card h3{
    margin:var(--space-2) 0 var(--space-3);
    color:var(--white);
    font-size:var(--text-base);
    line-height:var(--line-tight);
    font-weight:500;
}

.catalogue-card p{
    margin:0;
    max-width:95%;
    font-size:var(--text-small);
    line-height:var(--line-relaxed);
}

.product-category,
.product-meta,
.variant-status,
.cart-meta,
.footer-note,
.selected-count,
.selected-head strong{
    color:var(--soft);
    font-size:var(--text-label);
    letter-spacing:var(--track-label);
    line-height:var(--line-tight);
    text-transform:none;
}

/* product/material */

.product-detail,
.product-detail-inline,
.portal-product-detail{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:var(--space-10);
    align-items:start;
    width:100%;
    max-width:var(--site-width);
    margin:0 0 var(--space-10);
}

.product-gallery{
    width:100%;
    max-width:none;
}

.product-main-image{
    width:100%;
    min-height:620px;
    aspect-ratio:4 / 5;
    background:var(--surface-raised);
    border:1px solid var(--line);
    overflow:hidden;
}

.product-main-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    filter:grayscale(1);
}

.product-info{
    width:100%;
    max-width:none;
    position:sticky;
    top:var(--space-8);
}

.product-info h1{
    margin:var(--space-4) 0 var(--space-5);
    color:var(--white);
    font-size:clamp(34px,5vw,64px);
    line-height:.98;
    letter-spacing:-.03em;
    font-weight:500;
}

.product-description{
    max-width:640px;
    margin:0 0 var(--space-7);
    font-size:var(--text-lead);
    line-height:var(--line-relaxed);
}

.variant-select-block{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:var(--space-4);
    align-items:end;
    width:100%;
    max-width:640px;
    margin-top:var(--space-7);
    padding-top:var(--space-5);
    border-top:1px solid var(--line);
}

.variant-select-block label{
    margin:0;
}

.variant-select-action button{
    min-width:104px;
    min-height:43px;
}

.variant-inline-status{
    margin-top:var(--space-4);
    font-size:var(--text-label);
    letter-spacing:var(--track-label);
    line-height:var(--line-tight);
    text-transform:none;
}

.product-inline-actions{
    margin-top:var(--space-7);
}

/* portal home cards */

.portal-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:var(--space-5);
    max-width:var(--content-width);
    margin-top:var(--space-8);
}

.portal-card{
    position:relative;
    border:1px solid rgba(245, 245, 245, 0.05);
    background:rgba(11, 11, 11, 0.6);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    border-radius:6px;
    padding:var(--space-6) var(--space-7);
    transition:border-color .25s cubic-bezier(0.16, 1, 0.3, 1), background-color .25s cubic-bezier(0.16, 1, 0.3, 1), transform .25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .25s cubic-bezier(0.16, 1, 0.3, 1);
}

.portal-card:hover{
    border-color:rgba(245, 245, 245, 0.15);
    background:rgba(16, 16, 16, 0.7);
    transform:translateY(-2px);
    box-shadow:0 10px 30px rgba(23, 23, 23, 0.4);
}

.portal-card h3{
    margin:0 0 var(--space-4);
    color:var(--white);
    font-size:var(--text-small);
    line-height:var(--line-tight);
    letter-spacing:var(--track-label);
    text-transform:none;
}

/* legacy materials */

.tools,
#materialCategories,
.selected-panel{
    max-width:var(--content-width);
}

.tools{
    display:flex;
    gap:var(--space-4);
    margin-bottom:var(--space-5);
}

.material-category{
    border-top:1px solid var(--line);
}

.material-category:last-child{
    border-bottom:1px solid var(--line);
}

.category-select-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:var(--space-5);
    align-items:end;
    padding:var(--space-6) 0;
}

.category-select-row label{
    margin:0;
}

.category-select-row select{
    min-height:43px;
}

.category-select-row button,
.category-select-row .blk-add-select{
    min-width:104px;
    min-height:43px;
}

.selected-panel{
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    margin-top:var(--space-9);
    padding:var(--space-6) 0;
}

.selected-head{
    display:flex;
    justify-content:space-between;
    gap:var(--space-5);
    align-items:center;
    margin-bottom:var(--space-4);
}

#selectedMaterials{
    min-height:96px;
    border:1px solid var(--line);
    background:var(--surface);
    color:var(--white);
    padding:var(--space-4);
    white-space:pre-wrap;
    font-size:var(--text-base);
    line-height:var(--line-base);
}

.empty-selection{
    color:var(--soft);
}

/* cart / checkout */

.checkout-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(320px,420px);
    gap:var(--space-10);
    align-items:start;
    width:100%;
    max-width:var(--site-width);
}

.checkout-main,
.checkout-form{
    max-width:none;
    width:100%;
}

.checkout-form > .section-title:first-child,
.checkout-summary-panel > .section-title:first-child{
    margin-top:0;
}

.checkout-summary-panel{
    width:100%;
    align-self:start;
}

.cart-list{
    width:100%;
    border-top:1px solid var(--line);
}

.cart-item{
    display:grid;
    grid-template-columns:88px minmax(0,1fr) auto;
    gap:var(--space-5);
    align-items:center;
    border-bottom:1px solid var(--line);
    padding:var(--space-5) 0;
    min-width:0;
}

.cart-thumb{
    width:88px;
    min-width:88px;
    max-width:88px;
    height:110px;
    aspect-ratio:auto;
    background:var(--surface-raised);
    border:1px solid var(--line);
    overflow:hidden;
}

.cart-thumb img,
.checkout-cart-list .cart-thumb img,
.checkout-summary-panel .cart-thumb img{
    display:block;
    width:100%;
    height:100%;
    max-width:none;
    object-fit:cover;
    object-position:center;
    filter:grayscale(1);
}

.cart-title{
    margin:0 0 var(--space-2);
    color:var(--white);
    font-weight:500;
}

.cart-controls{
    display:flex;
    align-items:center;
    gap:var(--space-3);
}

.qty-button{
    width:34px;
    min-height:34px;
    padding:0;
}

.remove-button{
    min-height:34px;
    padding:0 var(--space-4);
}

.cart-summary{
    margin-top:var(--space-5);
    border-top:1px solid var(--line);
    padding-top:var(--space-4);
}

.checkout-cart-list{
    margin-top:var(--space-5);
}

.summary-line{
    display:flex;
    justify-content:space-between;
    gap:var(--space-5);
    padding:var(--space-3) 0;
}

.summary-line strong{
    color:var(--white);
    font-weight:400;
}

.summary-line.total{
    color:var(--white);
    border-top:1px solid var(--line);
    margin-top:var(--space-3);
    padding-top:var(--space-5);
}

.checkout-cart-list .cart-item,
.checkout-summary-panel .cart-item{
    grid-template-columns:64px minmax(0,1fr);
    gap:var(--space-4);
    padding:var(--space-4) 0;
}

.checkout-cart-list .cart-thumb,
.checkout-summary-panel .cart-thumb{
    width:64px;
    min-width:64px;
    max-width:64px;
    height:80px;
}

.empty-state{
    border-bottom:1px solid var(--line);
    padding:var(--space-8) 0;
}

.error-message{
    display:none;
    background:var(--surface-hover);
    border:1px solid var(--line-strong);
    padding:var(--space-4);
    margin:var(--space-5) 0;
    font-size:var(--text-small);
    line-height:var(--line-base);
}

.visually-hidden{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border-width:0;
}

@media(max-width:1100px){
    .catalogue-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        max-width:760px;
    }
}

@media(max-width:900px){
    body{
        padding:var(--space-7) var(--space-5) var(--space-9);
    }

    #header{
        display:block;
        margin-bottom:var(--space-9);
    }

    .logo a{
        margin-bottom: 0 !important;
        font-size:28px;
        letter-spacing:.16em;
    }

    .filter{
        justify-content:flex-start;
        font-size:var(--text-micro);
        letter-spacing:2px;
    }

    .filter span{
        padding:0 var(--space-2);
    }

    .intro{
        margin-bottom:var(--space-10);
    }

    .intro p:first-child{
        font-size:42px;
    }

    .intro p:not(:first-child){
        font-size:var(--text-base);
        line-height:var(--line-relaxed);
    }

    .form-grid,
    .product-detail,
    .product-detail-inline,
    .portal-product-detail,
    .checkout-layout,
    .variant-select-block{
        grid-template-columns:1fr;
    }

    .product-main-image{
        min-height:0;
        aspect-ratio:4 / 5;
    }

    .product-info{
        position:static;
    }

    input,
    select,
    textarea{
        font-size:16px;
    }

    #username,
    #page > label:has(#username){
        max-width:none;
    }

    .request-actions{
        flex-direction:column;
    }

    button,
    .button,
    input[type="submit"]{
        width:100%;
    }

    .cart-item{
        grid-template-columns:72px minmax(0,1fr);
    }

    .cart-thumb{
        width:72px;
        min-width:72px;
        max-width:72px;
        height:90px;
    }

    .cart-controls{
        grid-column:2;
        flex-wrap:wrap;
    }

    .checkout-cart-list .cart-item,
    .checkout-summary-panel .cart-item{
        grid-template-columns:56px minmax(0,1fr);
    }

    .checkout-cart-list .cart-thumb,
    .checkout-summary-panel .cart-thumb{
        width:56px;
        min-width:56px;
        max-width:56px;
        height:70px;
    }
}

@media(max-width:640px){
    .catalogue-grid{
        grid-template-columns:1fr;
    }

    .catalogue-image{
        max-height:none;
        aspect-ratio:1 / .9;
    }
}

/* ==========================================
   CLEAN FINAL FIX
   Width consistency + menu slash alignment + Core Collection grid
========================================== */

/* Shared site width */
#header,
#page,
.site-footer{
    width:100%;
    max-width:var(--site-width);
    margin-left:auto;
    margin-right:auto;
}

/* Menu slash alignment: handled by the main .filter block above */

/* Core Collection process strip */
.process-strip{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:var(--space-6);
    margin:0 0 var(--space-8);
    padding:0 0 var(--space-4);
    border-bottom:1px solid var(--line);
}

.process-step{
    display:inline-flex;
    align-items:baseline;
    gap:var(--space-2);
    color:var(--soft);
    font-size:var(--text-micro);
    line-height:1;
    letter-spacing:var(--track-label);
    text-transform:none;
    white-space:nowrap;
}

.process-step-index{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:28px;
    height:20px;
    padding:0 var(--space-2);
    border:1px solid var(--line);
    color:var(--white);
    font-size:10px;
    line-height:1;
    font-variant-numeric:tabular-nums;
}

/* Core Collection annotation */
.collection-hero{
    margin-bottom:var(--space-8);
}

.collection-annotation{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:var(--space-5);
    margin:0 0 var(--space-5);
    color:var(--soft);
    font-size:var(--text-micro);
    line-height:1.2;
    letter-spacing:var(--track-label);
    text-transform:none;
}

/* Core Collection grid */
.core-resource-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:var(--space-6);
    width:100%;
    max-width:var(--site-width);
    align-items:start;
}

.core-resource-card{
    display:grid;
    grid-template-rows:64px auto 1fr;
    min-width:0;
    width:100%;
    height:100%;
    padding-top:var(--space-4);
    border-top:1px solid var(--line);
    color:var(--white);
    text-decoration:none;
}

.core-resource-card:hover{
    border-color:var(--white);
    text-decoration:none;
}

.core-resource-card-header{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    gap:var(--space-2);
    min-height:64px;
}

.core-resource-code{
    display:block;
    color:var(--soft);
    font-size:var(--text-micro);
    line-height:1.2;
    letter-spacing:var(--track-label);
    text-transform:none;
}

.core-resource-name{
    display:block;
    margin:0;
    color:var(--white);
    font-size:var(--text-small);
    line-height:var(--line-tight);
    letter-spacing:var(--track-label);
    text-transform:none;
    font-weight:600;
}

.core-resource-thumb{
    display:block;
    width:100%;
    max-width:none;
    margin:var(--space-5) 0 var(--space-4);
    aspect-ratio:4 / 5;
    background:var(--surface-raised);
    border:1px solid var(--line);
    border-radius:4px;
    overflow:hidden;
}

.core-resource-thumb img{
    display:block;
    width:100%;
    height:100%;
    max-width:none;
    object-fit:cover;
    object-position:center;
    filter:grayscale(1);
    transition: transform .4s cubic-bezier(0.16, 1, 0.3, 1), filter .4s ease;
}

.core-resource-card:hover .core-resource-thumb img{
    transform:scale(1.05);
    filter:grayscale(0.2);
}

.core-resource-card:hover .core-resource-thumb{
    border-color:rgba(245, 245, 245, 0.3);
}

.core-resource-card-footer{
    display:grid;
    grid-template-rows:1fr auto;
    gap:var(--space-4);
    align-content:start;
}

.core-resource-description{
    min-height:72px;
    margin:0;
    color:var(--soft);
    font-size:var(--text-small);
    line-height:var(--line-base);
}

.core-resource-action{
    justify-self:start;
    align-self:start;
    min-height:36px;
    padding:0 var(--space-4);
    font-size:var(--text-micro);
    letter-spacing:var(--track-label);
}

.core-resource-card:hover .core-resource-action{
    background:var(--button-hover);
    border-color:var(--button-hover);
    color:var(--black);
}

.request-status{
    display:inline-flex;
    align-items:baseline;
    gap:var(--space-2);
    margin-top:var(--space-8);
    color:var(--soft);
    font-size:var(--text-micro);
    line-height:1.2;
    letter-spacing:var(--track-label);
    text-transform:none;
}

/* Footer alignment */
.site-footer{
    margin:12rem auto 0;
    padding-top:2rem;
    padding-bottom:3rem;
    border-top:1px solid var(--line);
}

.site-footer p{
    max-width:none;
    margin:0;
    color:var(--soft);
    font-size:.875rem;
    line-height:1.7;
}

.site-footer p + p{
    margin-top:.25rem;
}

@media(max-width:1024px){
    .core-resource-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:900px){
    .filter{
        justify-content:flex-start;
    }

    .filter span{
        padding:0 var(--space-2);
    }

    .site-footer{
        margin-top:7rem;
    }
}

@media(max-width:640px){
    .process-strip{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:var(--space-3);
        margin-bottom:var(--space-7);
    }

    .process-step{
        min-height:36px;
    }

    .collection-annotation{
        display:block;
    }

    .collection-annotation span{
        display:block;
    }

    .collection-annotation span + span{
        margin-top:var(--space-2);
    }

    .core-resource-grid{
        grid-template-columns:1fr;
    }

    .core-resource-card{
        display:block;
        height:auto;
        padding-bottom:var(--space-6);
    }

    .core-resource-card-header,
    .core-resource-description{
        min-height:0;
    }

    .core-resource-card-footer{
        display:flex;
        flex-direction:column;
        align-items:flex-start;
    }
  .notice{
    max-width:42rem;
}

.notice p{
    margin:0 0 1.5rem;
    line-height:1.8;
}

.notice:last-of-type{
    margin-top:4rem;
    padding-top:2rem;
    border-top:1px solid var(--line);
}

.request-actions{
    margin-top:4rem;
}
}

/* ==========================================
   CHECKOUT / CART COLUMN ALIGNMENT — FINAL CLEAN
   Fixes the form margin that pushed [Collaborator] down.
========================================== */

.checkout-layout{
    align-items:start;
}

.checkout-main,
.checkout-form,
.checkout-summary-panel{
    max-width:none;
    width:100%;
}

/* IMPORTANT: the global form margin pushes allocation titles down. */
.checkout-layout > .checkout-form{
    margin-top:0 !important;
}

.checkout-main > .section-title:first-of-type,
.checkout-form > .section-title:first-of-type,
.checkout-summary-panel > .section-title:first-of-type{
    margin-top:0 !important;
}

.checkout-summary-panel{
    align-self:start;
}

/* Cart only: align Summary divider with Request Resources list divider. */
.cart-layout .cart-summary{
    margin-top:0 !important;
}

/* Allocation Request only: preserve normal spacing below [Items Summary]. */
.checkout-layout:not(.cart-layout) .checkout-cart-list{
    margin-top:var(--space-5) !important;
}

@media(max-width:900px){
    .checkout-layout > .checkout-form{
        margin-top:0 !important;
    }

    .cart-layout .cart-summary{
        margin-top:var(--space-5) !important;
    }
  
}
/* ==========================================
   BLK SHP AMBIENT BACKGROUND
========================================== */

@keyframes blkAmbient {

    0% {
        background-position:53% 0%;
    }

    50% {
        background-position:48% 100%;
    }

    100% {
        background-position:53% 0%;
    }

}


/* Core operational components — centralized from page-level styles. */

/* Source: core/create-payment.html */
.area-core-operations .admin-panel{max-width:var(--content-width);border-top:1px solid var(--line);padding-top:var(--space-6);margin-top:var(--space-8)}
        .area-core-operations .admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
        .area-core-operations .admin-grid-full{grid-column:1/-1}
        .area-core-operations .admin-status{display:none;max-width:var(--content-width);margin:var(--space-5) 0 0;padding:var(--space-4);border:1px solid var(--line-strong);background:var(--surface-hover);color:var(--soft);font-size:var(--text-small);line-height:var(--line-base)}
        .area-core-operations .admin-status.show{display:block}.area-core-operations .admin-status.ok{border-color:#f1f1f1;color:var(--white)}
        .area-core-operations .admin-result{display:none;max-width:var(--content-width);margin-top:var(--space-6);padding:var(--space-5);border:1px solid var(--line-strong);background:var(--surface-hover)}
        .area-core-operations .admin-result.show{display:block}
        .area-core-operations .admin-result-title{color:var(--white);font-size:var(--text-base);line-height:var(--line-base);font-weight:500;margin-bottom:var(--space-4)}
        .area-core-operations .admin-row{display:grid;grid-template-columns:160px minmax(0,1fr) auto;gap:var(--space-4);align-items:center;border-top:1px solid var(--line);padding:var(--space-4) 0}
        .area-core-operations .admin-row:last-child{border-bottom:1px solid var(--line)}
        .area-core-operations .admin-key{color:var(--soft);font-size:var(--text-label);line-height:var(--line-tight);letter-spacing:var(--track-label);text-transform:none}
        .area-core-operations .admin-value{color:var(--white);font-size:var(--text-base);line-height:var(--line-base);overflow-wrap:anywhere;font-weight:500}
        .area-core-operations .admin-copy{min-height:34px;padding:0 var(--space-4);font-size:var(--text-micro)}
        @media(max-width:720px){.area-core-operations .admin-grid{grid-template-columns:1fr}.area-core-operations .admin-row{grid-template-columns:1fr;gap:var(--space-2)}.area-core-operations .admin-copy{width:100%}}

/* Source: core/manage-payments.html */
.manage-panel {
            max-width: var(--content-width);
            border-top: 1px solid var(--line);
            padding-top: var(--space-6);
            margin-top: var(--space-8);
        }

        .manage-grid {
            display: grid;
            grid-template-columns: 1fr 220px;
            gap: var(--space-5);
            align-items: end;
        }

        .manage-status {
            display: none;
            max-width: var(--content-width);
            margin: var(--space-5) 0 0;
            padding: var(--space-4);
            border: 1px solid var(--line-strong);
            background: var(--surface-hover);
            color: var(--soft);
            font-size: var(--text-small);
            line-height: var(--line-base);
        }

        .manage-status.show {
            display: block;
        }

        .manage-status.ok {
            border-color: #f1f1f1;
            color: var(--white);
        }

        .payments-list {
            margin-top: var(--space-7);
            border-top: 1px solid var(--line);
        }

        .payment-card {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: var(--space-5);
            padding: var(--space-5) 0;
            border-bottom: 1px solid var(--line);
        }

        .payment-title {
            color: var(--white);
            font-size: var(--text-base);
            line-height: var(--line-base);
            font-weight: 500;
            overflow-wrap: anywhere;
        }

        .payment-meta {
            margin-top: var(--space-2);
            color: var(--soft);
            font-size: var(--text-small);
            line-height: var(--line-relaxed);
            overflow-wrap: anywhere;
        }

        .payment-badge {
            display: inline-flex;
            align-items: center;
            min-height: 26px;
            padding: 0 var(--space-3);
            border: 1px solid var(--line-strong);
            color: var(--soft);
            font-size: var(--text-micro);
            letter-spacing: var(--track-label);
            text-transform: none;
        }

        .payment-actions {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            gap: var(--space-3);
            align-content: start;
        }

        .payment-actions .button,
        .payment-actions button {
            min-height: 34px;
            padding: 0 var(--space-4);
            font-size: var(--text-micro);
        }

        .empty-state {
            padding: var(--space-7) 0;
            color: var(--soft);
            font-size: var(--text-small);
            border-bottom: 1px solid var(--line);
        }

        @media (max-width: 820px) {
            .manage-grid,
            .payment-card {
                grid-template-columns: 1fr;
            }

            .payment-actions {
                justify-content: flex-start;
            }

            .payment-actions .button,
            .payment-actions button {
                width: 100%;
            }
        }

/* Source: core/payment.html */
.payment-panel {
            max-width: var(--content-width);
            border-top: 1px solid var(--line);
            padding-top: var(--space-6);
            margin-top: var(--space-8);
            display: none;
        }

        .payment-panel.show {
            display: block;
        }

        .payment-amount {
            margin: var(--space-4) 0 var(--space-8);
            color: var(--white);
            font-size: clamp(32px, 5vw, 56px);
            line-height: .9;
            letter-spacing: -.05em;
            font-weight: 500;
        }

        .payment-row {
            display: grid;
            grid-template-columns: 160px minmax(0, 1fr) auto;
            gap: var(--space-4);
            align-items: center;
            border-top: 1px solid var(--line);
            padding: var(--space-5) 0;
        }

        .payment-row:last-child {
            border-bottom: 1px solid var(--line);
        }

        .payment-key {
            color: var(--soft);
            font-size: var(--text-label);
            line-height: var(--line-tight);
            letter-spacing: var(--track-label);
            text-transform: none;
        }

        .payment-value {
            color: var(--white);
            font-size: var(--text-base);
            line-height: var(--line-base);
            overflow-wrap: anywhere;
            font-weight: 500;
        }

        .payment-copy {
            min-height: 34px;
            padding: 0 var(--space-4);
            font-size: var(--text-micro);
        }

        .payment-status {
            display: none;
            max-width: var(--content-width);
            margin: var(--space-5) 0 0;
            padding: var(--space-4);
            border: 1px solid var(--line-strong);
            background: var(--surface-hover);
            color: var(--soft);
            font-size: var(--text-small);
            line-height: var(--line-base);
        }

        .payment-status.show {
            display: block;
        }

        .payment-status.ok {
            border-color: #f1f1f1;
            color: var(--white);
        }

        .payment-status.error {
            border-color: var(--line-strong);
            color: var(--soft);
        }

        .payment-note-small {
            max-width: var(--content-width);
            margin-top: var(--space-5);
            color: var(--soft);
            font-size: var(--text-small);
            line-height: var(--line-relaxed);
        }

        .payment-proof-panel {
            max-width: var(--content-width);
            margin-top: var(--space-8);
            padding-top: var(--space-6);
            border-top: 1px solid var(--line);
        }

        .payment-proof-title {
            color: var(--white);
            font-size: var(--text-base);
            line-height: var(--line-base);
            font-weight: 500;
            margin-bottom: var(--space-3);
        }

        .payment-file-control {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            gap: var(--space-4);
            align-items: stretch;
            margin-top: var(--space-4);
        }

        .payment-file-button {
            box-sizing: border-box;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 44px;
            min-height: 44px;
            padding: 0 var(--space-5);
            border: 1px solid var(--white);
            background: var(--white);
            color: #84102D;
            font-size: var(--text-micro);
            line-height: 1;
            font-weight: 700;
            letter-spacing: var(--track-label);
            text-transform: none;
            cursor: pointer;
            user-select: none;
        }

        .payment-file-name {
            box-sizing: border-box;
            display: flex;
            align-items: center;
            height: 44px;
            min-height: 44px;
            padding: 0 var(--space-4);
            border: 1px solid var(--line-strong);
            background: var(--surface-hover);
            color: var(--soft);
            font-size: var(--text-small);
            line-height: 1;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .payment-proof-input {
            position: absolute;
            width: 1px;
            height: 1px;
            opacity: 0;
            pointer-events: none;
        }

        .payment-proof-actions {
            margin-top: var(--space-4);
        }

        @media (max-width: 720px) {
            .payment-row {
                grid-template-columns: 1fr;
                gap: var(--space-2);
            }

            .payment-copy {
                width: 100%;
            }

            .payment-file-control {
                grid-template-columns: 1fr;
            }

            .payment-file-button {
                width: 100%;
            }
        }

/* ==========================================
   BLK SHP UNIFIED DESIGN SYSTEM
   Shared foundations for Public, Core and Admin.
========================================== */

:root{
    --font:var(--font-sans);
    --muted:#858585;
    --status-success:#86d19a;
    --status-warning:#e8c56f;
    --status-danger:#ef8f8f;
    --status-info:#8dbbe8;
    --radius-control:2px;
    --radius-panel:3px;
    --control-height:46px;
    --shadow-focus:0 0 0 3px rgba(245, 245, 245,.09);
}

body{
    font-family:var(--font);
}

.area-public{
    --area-label:"PUBLIC";
}

.area-core{
    --area-label:"CORE";
    --area-surface:#090909;
}

.area-admin{
    --area-label:"ADMIN";
    --area-surface:#0b0b0b;
}

input,
select,
textarea,
button,
.button{
    border-radius:var(--radius-control);
}

input,
select{
    min-height:var(--control-height);
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
.button:focus-visible{
    box-shadow:var(--shadow-focus);
}

.process-label,
.area-kicker{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:max-content;
    min-height:26px;
    padding:4px 12px;
    border:1px solid var(--white);
    background:var(--white);
    color:var(--black);
    font-size:var(--text-micro);
    font-weight:700;
    line-height:1;
    letter-spacing:var(--track-label);
    text-transform:none;
}

.process-label{
    height:auto;
}

.area-kicker-admin{
    background:transparent;
    color:var(--white);
    border-color:var(--line-strong);
}

.badge-wrap{
    margin-top:var(--space-3);
}

.payment-badge,
.admin-badge,
.request-status{
    border-radius:999px;
    font-weight:700;
}

.error-message,
.payment-status,
.manage-status,
.admin-status{
    border-radius:var(--radius-panel);
}

.error-message{
    border-color:color-mix(in srgb,var(--status-danger) 58%,transparent);
    color:var(--status-danger);
}

.payment-status.error,
.manage-status.error{
    border-color:color-mix(in srgb,var(--status-danger) 58%,transparent);
    color:var(--status-danger);
}

.payment-status.ok,
.manage-status.ok{
    border-color:color-mix(in srgb,var(--status-success) 58%,transparent);
    color:var(--status-success);
}

.notice,
.checkout-summary-panel,
.payment-panel,
.manage-panel,
.admin-panel,
.admin-counter-card,
.admin-detail-box,
.admin-result-link{
    border-radius:var(--radius-panel);
}

.area-core .collection-hero{
    position:relative;
}

.area-core .core-resource-card,
.area-core .catalogue-card{
    transition:transform .18s ease,border-color .18s ease,background-color .18s ease;
}

.area-core .core-resource-card:hover,
.area-core .catalogue-card:hover{
    transform:translateY(-2px);
}

.area-core .collaborator-dashboard-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:var(--space-3);
    width:100%;
    max-width:none;
    margin-top:var(--space-6);
}

.area-core .collaborator-dashboard-grid .portal-card{
    min-width:0;
    padding:var(--space-4);
}

.area-core .collaborator-dashboard-grid .portal-card h3{
    margin-bottom:var(--space-3);
}

.area-core .collaborator-dashboard-grid .portal-card p{
    margin:0;
    font-size:var(--text-small);
    line-height:1.55;
}

.core-dashboard-page #header{
    margin-bottom:var(--space-9);
}

.core-dashboard-page .collaborator-dashboard{
    margin-bottom:var(--space-7);
    padding-bottom:var(--space-7);
    border-bottom:1px solid var(--line);
}

.core-dashboard-page .collaborator-dashboard .section-title{
    margin:0;
}

.core-dashboard-page .collaborator-dashboard .variant-inline-status{
    margin-top:var(--space-3);
}

.core-dashboard-page .process-strip{
    margin-bottom:var(--space-9);
    padding-bottom:var(--space-5);
}

.core-dashboard-page .site-footer{
    margin-top:var(--space-10);
}

/* Collaborator UI composition polish */
.area-core #header{
    margin-bottom:var(--space-10);
}

.area-core.core-dashboard-page #header{
    margin-bottom:var(--space-9);
}

.area-core .selection-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:22px;
    height:22px;
    margin-left:var(--space-1);
    padding:0 6px;
    border:1px solid var(--line-strong);
    color:var(--white);
    font-size:10px;
    line-height:1;
    letter-spacing:0;
    font-variant-numeric:tabular-nums;
    opacity:1;
}

.area-core .filter a:hover .selection-badge,
.area-core .filter a:focus .selection-badge{
    border-color:var(--white);
    color:var(--white);
}

.area-core .collaborator-dashboard-grid .product-category{
    color:rgba(245, 245, 245,.78);
    font-size:11px;
    letter-spacing:.14em;
}

.area-core .collaborator-dashboard-grid .portal-card h3{
    margin-top:var(--space-2);
    color:var(--white);
    font-size:clamp(22px,2.2vw,30px);
    line-height:1.08;
    letter-spacing:.035em;
    font-weight:600;
    overflow-wrap:anywhere;
}

.area-core .collaborator-dashboard-grid .portal-card p{
    color:rgba(245, 245, 245,.62);
    font-size:12px;
    line-height:1.55;
}

.area-core .dashboard-selection-card{
    transition:border-color .2s ease,background-color .2s ease,transform .2s ease;
}

.area-core .dashboard-selection-card.is-empty{
    border-color:var(--line-soft);
}

.area-core .dashboard-selection-card.is-empty h3,
.area-core .dashboard-selection-card.is-empty p,
.area-core .dashboard-selection-card.is-empty a{
    color:rgba(245, 245, 245,.48);
}

.area-core .dashboard-selection-card.has-selection{
    border-color:var(--line-focus);
    background:var(--surface-hover);
}

.area-core .dashboard-selection-card.has-selection h3{
    color:var(--white);
}

.area-core .core-status{
    display:flex;
    align-items:center;
    gap:var(--space-2);
    min-height:28px;
    color:rgba(245, 245, 245,.72);
}

.area-core .core-status::before{
    content:"";
    flex:0 0 auto;
    width:6px;
    height:6px;
    border:1px solid currentColor;
    transform:rotate(45deg);
}

.area-core .process-step{
    min-height:30px;
    padding:4px 8px;
    border:1px solid transparent;
    transition:opacity .2s ease,border-color .2s ease,background-color .2s ease;
}

.area-core .process-step.is-active{
    border-color:var(--line-strong);
    background:rgba(245, 245, 245,.08);
    color:var(--white);
}

.area-core .process-step.is-active .process-step-index{
    border-color:var(--white);
}

.area-core .process-step.is-complete::after{
    content:"✓";
    color:var(--white);
    font-size:11px;
}

.area-core .process-step.is-future{
    opacity:.48;
}

.area-core .core-primary-action{
    min-height:46px;
    padding:0 var(--space-6);
    border-color:var(--white);
    background:var(--white);
    color:var(--black);
    font-weight:700;
}

.area-core .core-primary-action[aria-disabled="true"]{
    pointer-events:none;
    opacity:.42;
}

.area-core .core-resource-code{
    color:rgba(245, 245, 245,.86);
    font-size:13px;
    letter-spacing:.05em;
}

.area-core .core-resource-card{
    transform-origin:center;
    transition:border-color .2s ease,transform .2s ease,background-color .2s ease;
}

.area-core .core-resource-card:hover{
    border-color:var(--white);
    transform:translateY(-2px) scale(1.01);
}

.area-core .core-resource-card:focus-visible{
    outline:1px solid var(--white);
    outline-offset:4px;
    border-color:var(--white);
}

.core-dashboard-page .collection-hero p:first-child{
    font-size:clamp(36px,4.5vw,40px);
    line-height:1.02;
}

.area-core .empty-state{
    color:rgba(245, 245, 245,.62);
    font-size:13px;
}

.area-core .error-message a{
    color:var(--white);
    font-weight:600;
    text-decoration:underline;
}

.area-core .cart-summary .summary-line strong,
#cartTotalUnits {
    font-size: 15px !important;
    font-weight: 500 !important;
    font-variant-numeric: tabular-nums;
}

/* Shared composition: public index and every Core page */
.area-public,
.area-core {
    font-family: var(--font);
    line-height: var(--line-base);
    letter-spacing: var(--track-tight);
}

.area-public h1,
.area-public h2,
.area-public h3,
.area-public h4,
.area-public h5,
.area-public h6,
.area-core h1,
.area-core h2,
.area-core h3,
.area-core h4,
.area-core h5,
.area-core h6,
.area-public .logo a,
.area-core .logo a,
.area-public .area-kicker,
.area-core .area-kicker,
.area-public .section-title,
.area-core .section-title,
.area-core .product-category,
.area-core .process-step-index,
.area-core .process-label {
    font-family: var(--font-display);
    font-weight: 600;
}

.area-public #header,
.area-core #header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #060606;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.area-public .filter,
.area-core .filter {
    font-family: var(--font);
}

/* Exact typography parity with the Admin area.
   Kept at the end of the cascade so page-specific rules cannot diverge. */
.area-admin,
.area-public,
.area-core,
.area-public button,
.area-public input,
.area-public select,
.area-public textarea,
.area-core button,
.area-core input,
.area-core select,
.area-core textarea {
    font-family: var(--font-sans);
}

.admin-logo a,
.area-public .logo a,
.area-core .logo a {
    font-family: var(--font-sans) !important;
    font-size: var(--text-display);
    line-height: 1;
    letter-spacing: .18em;
    font-weight: 700;
}

.admin-nav,
.area-public .filter,
.area-core .filter {
    font-family: var(--font-sans);
    font-size: var(--text-label);
    line-height: 1;
    letter-spacing: var(--track-label);
    text-transform: none;
    margin-top:var(--space-8);
}

.admin-hero h1,
.admin-section-title h2,
.area-public h1,
.area-public h2,
.area-public h3,
.area-public h4,
.area-public h5,
.area-public h6,
.area-core h1,
.area-core h2,
.area-core h3,
.area-core h4,
.area-core h5,
.area-core h6,
.area-public .section-title,
.area-core .section-title,
.area-public .area-kicker,
.area-core .area-kicker,
.area-core .product-category,
.area-core .process-step-index,
.area-core .process-label {
    font-family: var(--font-sans) !important;
}

/* Public and Core follow the Admin's visible Inter typography throughout. */
.area-public h1,
.area-public h2,
.area-public h3,
.area-public h4,
.area-public h5,
.area-public h6,
.area-public .logo,
.area-public .logo *,
.area-public .section-title,
.area-public .area-kicker,
.area-public .filter,
.area-public .filter *,
.area-core h1,
.area-core h2,
.area-core h3,
.area-core h4,
.area-core h5,
.area-core h6,
.area-core .logo,
.area-core .logo *,
.area-core .section-title,
.area-core .area-kicker,
.area-core .filter,
.area-core .filter *,
.area-core .product-category,
.area-core .process-step,
.area-core .process-step * {
    font-family: var(--font-sans) !important;
}

.composition-page #header{
    margin-bottom:var(--space-9);
}

.composition-page .intro{
    margin-bottom:var(--space-9);
}

.composition-page .intro p:first-child{
    font-size:clamp(36px,4.5vw,40px);
    line-height:1.05;
    letter-spacing:-.025em;
}

.composition-page .intro p:not(:first-child){
    max-width:var(--content-width);
    font-size:var(--text-lead);
    line-height:1.72;
}

.composition-page .section-title{
    margin-top:var(--space-9);
    margin-bottom:var(--space-5);
}

.composition-page .section-title:first-child,
.composition-page .section-title:first-of-type{
    margin-top:0;
}

.composition-page .request-actions > button:not(.secondary),
.composition-page .request-actions > .button:not(.secondary),
.composition-page .composition-primary-action{
    min-height:46px;
    padding-left:var(--space-6);
    padding-right:var(--space-6);
    border-color:var(--white);
    background:var(--white);
    color:var(--black);
    font-weight:700;
}

.composition-page .site-footer{
    margin-top:var(--space-10);
}

.public-composition-page #request{
    padding-top:var(--space-7);
    border-top:1px solid var(--line);
}

.public-composition-page #request > .section-title{
    margin-top:0;
}

.public-composition-page #request > form{
    margin-top:var(--space-7);
}

.public-login-page .login-panel{
    width:100%;
    max-width:var(--content-width);
    padding-top:var(--space-7);
    border-top:1px solid var(--line);
}

.public-login-page .login-panel .section-title{
    margin:0 0 var(--space-6);
}

.public-login-page .login-panel > label{
    max-width:420px;
}

.public-login-page .login-panel .request-actions{
    margin-top:var(--space-7);
}

.area-core.composition-page .process-strip{
    margin-bottom:var(--space-9);
    padding-bottom:var(--space-5);
}

@media(max-width:1000px){
    .area-core .collaborator-dashboard-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

.site-footer{
    min-height:120px;
}

@media(max-width:900px){
    .site-footer{
        min-height:96px;
    }
}

@media(max-width:640px){
    .admin-logo a,
    .area-public .logo a,
    .area-core .logo a {
        font-size: 28px;
        letter-spacing: .16em;
    }

    .admin-nav,
    .area-public .filter,
    .area-core .filter {
        font-size: var(--text-micro);
        letter-spacing: 2px;
        margin-top:var(--space-8);
    }

    .area-public #header,
    .area-core #header {
        top: 0;
    }

    .composition-page #header{
        margin-bottom:var(--space-8);
    }

    .composition-page .intro{
        margin-bottom:var(--space-8);
    }

    .composition-page .intro p:first-child{
        font-size:clamp(32px,10vw,38px);
    }

    .composition-page.core-dashboard-page .collection-hero p:first-child{
        font-size:clamp(32px,10vw,38px);
    }

    .composition-page .intro p:not(:first-child){
        font-size:var(--text-base);
    }

    .composition-page .site-footer{
        margin-top:var(--space-9);
    }

    .public-composition-page #request{
        padding-top:var(--space-6);
    }

    .area-core #header,
    .area-core.core-dashboard-page #header{
        margin-bottom:var(--space-8);
    }

    .composition-page .filter{
        gap:var(--space-1);
    }

    .composition-page .filter > span:not(.selection-badge){
        display:none;
    }

    .composition-page .filter a{
        display:inline-flex;
        align-items:center;
        min-height:44px;
        padding:8px 10px;
    }

    .area-core .selection-badge{
        min-height:22px;
        padding:0 6px;
    }

    .area-core .core-primary-action,
    .area-core button,
    .area-core .button{
        min-height:44px;
    }

    .area-core .collaborator-dashboard-grid .portal-card h3{
        font-size:26px;
    }

    .core-dashboard-page .collection-hero p:first-child{
        font-size:clamp(34px,11vw,40px);
    }

    .area-core .collaborator-dashboard-grid{
        grid-template-columns:1fr;
    }

    .process-strip{
        grid-template-columns:1fr;
    }

    .process-step{
        width:100%;
        justify-content:space-between;
        border-top:1px solid var(--line);
        padding-top:var(--space-3);
    }

    .process-label{
        border-top:1px solid var(--white);
    }
}

@media(prefers-reduced-motion:reduce){
    html{
        scroll-behavior:auto;
    }

    body{
        animation:none;
    }

    *,*::before,*::after{
        transition:none!important;
    }
}
.queue-status {
    margin-top: var(--space-5);
    padding: var(--space-4);
    border: 1px solid var(--line-strong);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    background: var(--surface);
}

.queue-status[hidden] {
    display: none;
}

.queue-status p {
    margin: .35rem 0 0;
    color: var(--soft);
}

.queue-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: .65rem 0;
    border-bottom: 1px solid var(--line);
    font-size: .8rem;
}

.queue-item-actions {
    display: flex;
    gap: .5rem;
}

@media (max-width: 720px) {
    .queue-status {
        align-items: flex-start;
        flex-direction: column;
    }
}
.payment-proof-preview {
    margin-top: var(--space-4);
    padding: var(--space-3);
    border: 1px solid var(--line);
}

.payment-proof-preview img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 360px;
    object-fit: contain;
}

#paymentProofProgress {
    width: 100%;
    margin-top: var(--space-3);
}

/* Toast Notification System */
.toast-container {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    z-index: 9999;
    pointer-events: none;
}

.toast {
    background: rgba(12, 12, 12, 0.95);
    border: 1px solid var(--line-strong);
    color: var(--white);
    padding: var(--space-4) var(--space-5);
    font-size: var(--text-small);
    font-weight: 500;
    letter-spacing: var(--track-tight);
    border-radius: 4px;
    box-shadow: 0 8px 30px rgba(23, 23, 23, 0.8);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 280px;
    max-width: 420px;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(20px) scale(0.98);
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.toast-success {
    border-left: 3px solid var(--white);
}

.toast-error {
    border-left: 3px solid var(--line-focus);
}

.toast-info {
    border-left: 3px solid var(--soft);
}

/* Quantity input and warnings */
.request-quantity-input {
    width: 60px;
    height: 34px;
    background: var(--bg);
    border: 1px solid var(--line-strong);
    color: var(--white);
    text-align: center;
    border-radius: 4px;
    font-size: var(--text-base);
    font-weight: bold;
}

.request-quantity-input:focus {
    border-color: var(--line-focus);
    outline: none;
}

.stock-warning-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: var(--text-micro);
    border-radius: 99px;
    background: rgba(232, 197, 111, 0.15);
    border: 1px solid rgba(232, 197, 111, 0.3);
    vertical-align: middle;
}

/* ==========================================================================
   AESTHETIC & USABILITY IMPROVEMENTS ADDITIONS
   ========================================================================== */

/* Glassmorphism Card Enhancement */
.portal-card {
    background: rgba(7, 7, 7, 0.45) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(245, 245, 245, 0.06) !important;
    box-shadow: 0 4px 20px rgba(23, 23, 23, 0.5);
}

.portal-card:hover {
    border-color: rgba(245, 245, 245, 0.14) !important;
    box-shadow: 0 10px 30px rgba(23, 23, 23, 0.7);
    transform: translateY(-3px) scale(1.01);
}

/* Core Resource Card hover glow */
.core-resource-card {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.core-resource-card:hover {
    transform: translateY(-4px);
    border-color: rgba(245, 245, 245, 0.4) !important;
    box-shadow: 0 8px 24px rgba(245, 245, 245, 0.05);
}

/* Real-Time Input Validation UI */
input:focus:invalid,
textarea:focus:invalid {
    border-color: rgba(239, 143, 143, 0.7) !important;
    box-shadow: 0 0 0 2px rgba(239, 143, 143, 0.1) !important;
}

input:focus:valid:not(:placeholder-shown),
textarea:focus:valid:not(:placeholder-shown) {
    border-color: rgba(134, 209, 154, 0.7) !important;
    box-shadow: 0 0 0 2px rgba(134, 209, 154, 0.1) !important;
}

/* Character Counter Styles */
.char-counter {
    display: flex;
    justify-content: flex-end;
    font-size: 11px;
    color: var(--soft);
    opacity: 0.6;
    margin-top: 6px;
    letter-spacing: 0.05em;
    text-transform: none;
}
.char-counter.near-limit {
    color: var(--status-warning);
    opacity: 0.9;
}
.char-counter.at-limit {
    color: var(--status-danger);
    opacity: 1;
}

/* Loading Skeleton Screen Styles */
@keyframes blkSkeletonPulse {
    0% { opacity: 0.25; }
    50% { opacity: 0.55; }
    100% { opacity: 0.25; }
}

.blk-skeleton {
    display: inline-block;
    height: 1.2em;
    background-color: var(--line);
    border-radius: 3px;
    animation: blkSkeletonPulse 1.6s ease-in-out infinite;
    pointer-events: none;
    vertical-align: middle;
}

.blk-skeleton-text { width: 85%; }
.blk-skeleton-title { width: 55%; height: 1.6em; margin-bottom: 8px; }
.blk-skeleton-short { width: 35%; }

/* ==========================================
   FULL WIDTH HEADER BACKGROUND — STICKY SAFE FIX
   Public + Core + Admin

   Fix:
   - mantiene lo sticky header attivo
   - NON rimuove il padding laterale del body
   - NON usa overflow-x hidden su html/body, perché può rompere position: sticky
   - sfondo e riga dell'header sono full width reali
   - logo/menu restano nella posizione originale della site-width
========================================== */

/* Header attaccato al bordo superiore, senza cambiare i padding laterali pagina */
body {
    padding-top: 0 !important;
}

/* Sticky header conservato */
#header,
.area-public #header,
.area-core #header,
.area-admin #header,
.admin-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000;

    width: 100%;
    max-width: var(--site-width);
    margin-left: auto;
    margin-right: auto;

    padding-top: 0;
    padding-bottom: var(--space-6);

    background: transparent !important;
    border-bottom: 0 !important;

    isolation: isolate;
}

/* Sfondo full width dietro l'header, senza spostare gli elementi */
#header::before,
.admin-header::before {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;

    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);

    background: #060606;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

/* Riga inferiore full width reale */
#header::after,
.admin-header::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;

    left: 50%;
    bottom: 0;
    width: 100vw;
    height: 1px;
    transform: translateX(-50%);
    background: var(--line);
}

/* Logo e menu sopra allo sfondo */
#header > *,
.admin-header > * {
    position: relative;
    z-index: 1;
}

/* Menu: nessuna larghezza forzata qui.
   La riga full width viene gestita dallo pseudo-elemento dell'header,
   quindi gli elementi restano nella posizione originale. */
.admin-nav,
.area-public .filter,
.area-core .filter {
    position: relative;
    z-index: 2;
    border-top: 0 !important;
    border-bottom: 0 !important;
}

/* Mobile: mantiene sticky e spazio interno coerente */
@media (max-width: 900px) {
    #header,
    .area-public #header,
    .area-core #header,
    .area-admin #header,
    .admin-header {
        padding-top: var(--space-6);
        padding-bottom: var(--space-5);
    }
}

/* ==========================================
   ANCHOR POINT FIX — PRECISE STICKY OFFSET
   Public + Core + Admin

   Nota tecnica:
   non usare insieme scroll-padding-top e scroll-margin-top,
   perché su mobile sommano l'offset e il titolo finisce troppo basso.
   Qui resta solo scroll-margin-top sui target.
========================================== */

:root {
    --anchor-offset: 112px;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 0 !important;
}

body {
    scroll-padding-top: 0 !important;
}

/* Applica l'offset a tutti gli anchor interni al contenuto.
   Così funzionano sia #framework-title / #request-title,
   sia eventuali anchor diretti tipo #framework / #request. */
#page [id],
#framework,
#request,
#framework-title,
#request-title,
#access-request,
#access-request-title,
:target {
    scroll-margin-top: var(--anchor-offset) !important;
}

@media (max-width: 900px) {
    :root {
        --anchor-offset: 178px;
    }
}

@media (max-width: 640px) {
    :root {
        --anchor-offset: 186px;
    }
}

/* Global typography: force all visible text to uppercase */
html,
body,
body *,
body *::before,
body *::after,
body *::placeholder {
    text-transform: none !important;
}

/* Mobile Core header: tighter logo-to-navigation spacing only. */
@media (max-width: 640px) {
    .area-core #header .filter {
        margin-top: 14px;
    }
}

/* Buttons and navigation only: uppercase text */
button,
button *,
.button,
.button *,
input[type="submit"],
input[type="button"],
input[type="reset"],
.blk-add-request,
.blk-add-request *,
.payment-file-button,
.payment-file-button *,
.filter,
.filter *,
.admin-nav,
.admin-nav * {
    text-transform: uppercase !important;
}