/* Storefront base: layout, header, buttons, utilities, drawers. Theme colours and font are set in the layout head. */
:root { --surface: var(--wh-surface-2); --border: var(--wh-line); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--store-font), sans-serif; background: var(--surface); color: var(--wh-ink); -webkit-font-smoothing: antialiased; }
.mono { font-family: 'JetBrains Mono', monospace; }
#main-content{min-height:calc(100vh - 350px);}
.text-navy { color:var(--wh-brand-text); }
.text-orange { color: var(--orange-text); }
.btn-orange { background:var(--orange-bar); color: var(--on-orange-bar); font-weight: 600; transition: all .2s; }
.btn-orange:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 6px 20px color-mix(in srgb,var(--orange) 35%,transparent); }
.btn-navy { background: var(--navy); color: var(--on-navy); font-weight: 600; transition: all .2s; }
.btn-navy:hover { opacity: .9; transform: translateY(-1px); }
.pcard { background: var(--wh-surface); border-radius: var(--r-card,16px); border: 1px solid var(--border); overflow: hidden; transition: all .25s cubic-bezier(.4,0,.2,1); display: block; position: relative; }
.pcard:hover { border-color: var(--orange); transform: translateY(-4px); box-shadow: 0 16px 40px rgba(10,22,40,.10); }
.pcard-img { aspect-ratio: 1; background: var(--wh-surface-2); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.pcard-img img { width:100%; height:100%; object-fit:cover; transition: transform .4s ease; }
.pcard:hover .pcard-img img { transform: scale(1.06); }
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 100px; letter-spacing: .02em; }
.badge-new    { background: var(--tone-blue-soft); color: #3B82F6; }
.site-header-logo { max-height:32px; max-width:140px; width:auto; height:auto; object-fit:contain; object-position:left center; display:block; flex-shrink:0; }
@media(max-width:400px){.site-header-logo{ max-height:26px; max-width:100px; }}
.site-header { background: color-mix(in srgb,var(--wh-surface) 92%,transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); position: var(--cl-header-position, sticky); top: 0; z-index: 100; }
.search-input { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r-card,12px); padding: 9px 14px; padding-inline-start: 38px; font-size: 13.5px; text-overflow: ellipsis; width: 100%; transition: all .2s; font-family: var(--store-font), sans-serif; }
.search-input:focus { outline: none; border-color: var(--orange); background: var(--wh-surface); box-shadow: 0 0 0 3px color-mix(in srgb,var(--orange) 12%,transparent); }
.site-header-user { padding-inline: .5rem .75rem; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.section-title { font-size: 20px; font-weight: 700; color:var(--wh-brand-text); display: flex; align-items: center; gap: 8px; }
.section-link { font-size: 12.5px; font-weight: 600; color: var(--orange-text); text-decoration: none; display: flex; align-items: center; gap: 4px; }
.section-link:hover { text-decoration: underline; }
.auth-gate { display: none; position: fixed; inset: 0; background: rgba(10,22,40,.6); backdrop-filter: blur(6px); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 16px; }
.auth-gate-box { background: var(--wh-surface); border-radius: var(--r-card,24px); padding: 40px 36px; max-width: 400px; width: 100%; text-align: center; box-shadow: 0 40px 80px rgba(0,0,0,.2); }
@media (max-width: 768px) {body { padding-bottom: 72px; }}
.filter-link { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--r-ctl,10px); font-size: 13px; font-weight: 500; color: var(--wh-text); text-decoration: none; transition: all .15s; }
.filter-link:hover { background: var(--wh-surface-3); }
.filter-link.active { background: color-mix(in srgb,var(--orange) 10%,transparent); color: var(--orange-text); font-weight: 600; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--wh-line-strong); border-radius: var(--r-ctl,10px); }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes fadeUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
.fade-up { animation: fadeUp .4s ease forwards; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--orange) !important; box-shadow: 0 0 0 3px color-mix(in srgb,var(--orange) 12%,transparent) !important; }
.wh-toast-wrap{position:fixed;top:20px;inset-inline-end:20px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.wh-toast{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--r-ctl,10px);font-size:13px;font-weight:600;box-shadow:0 4px 16px rgba(0,0,0,.12);pointer-events:all;animation:wh-toast-in .25s ease;max-width:320px;line-height:1.4}
.wh-toast.success{background:var(--tone-green-soft);border:1px solid var(--tone-green-line);color:var(--tone-green-fg)}
.wh-toast.error{background:var(--tone-red-soft);border:1px solid var(--tone-red-bg);color:var(--tone-red-mid)}
.wh-toast.info{background:var(--tone-blue-soft);border:1px solid var(--tone-blue-bg);color:var(--tone-blue-mid)}
.wh-toast.warning{background:var(--tone-amber-soft);border:1px solid var(--tone-amber-line);color:var(--tone-orange-mid)}
@keyframes wh-toast-in{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes wh-toast-out{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(20px)}}
.site-header-logo {
    max-height: 42px;
    max-width: 190px;
}
.site-footer-logo {
    display: block;
    width: auto;
    height: auto;
    max-height: 58px;
    max-width: 220px;
    margin-bottom: 16px;
    object-fit: contain;
    object-position: left center;
    filter: brightness(0) invert(1);
}
.site-footer-logo.is-colour { filter: none; }
@media (max-width: 768px) {.site-header-logo {
        max-height: 34px;
        max-width: 145px;
    }.site-footer-logo {
        max-height: 48px;
        max-width: 180px;
    }}
@media (max-width: 400px) {.site-header-logo {
        max-height: 30px;
        max-width: 115px;
    }}
@media (max-width: 767px) {#userDropdownWrap { display: none !important; }}
@media (max-width: 640px) {.site-header-row {
        gap: .375rem;
        padding-inline-start: .75rem;
        padding-inline-end: .75rem;
    }.site-header-logo-link {
        flex-shrink: 1;
        min-width: 0;
        margin-inline-end: 0 !important;
        gap: .375rem !important;
    }.site-header-name {
        max-width: 7rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: .875rem !important;
        line-height: 1;
    }.site-header-actions {
        flex-shrink: 0;
        gap: 0 !important;
    }.site-header-language {
        gap: .25rem !important;
        padding: .375rem .25rem !important;
    }.site-header-icon {
        padding: .375rem !important;
    }.site-header-login {
        padding: .375rem .4rem !important;
        font-size: .75rem !important;
    }.site-header-apply {
        gap: .25rem !important;
        padding: .45rem .55rem !important;
        font-size: .75rem !important;
    }}
@media (max-width: 440px) {.site-header-language .fa-chevron-down { display: none; }.site-header-login { padding-inline: .25rem !important; }}
/* On narrow phones the sign-up button keeps only its icon, so the shop name and the login link fit in any language. */
@media (max-width: 420px) {.site-header-apply .sm\:hidden { display: none !important; }}
@media (max-width: 360px) {.site-header-name { display: none; }.site-header-logo { max-width: 90px; }.site-header-apply .sm\:hidden { display: none !important; }}
/* Storefront page navigation loader */
.store-page-loader {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: grid;
    place-items: start center;
    padding-top: 82px;
    background: rgba(255, 255, 255, .30);
    cursor: wait;
    pointer-events: auto;
}
.store-page-loader::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 38%;
    height: 3px;
    background: linear-gradient(90deg, var(--orange), color-mix(in srgb,var(--orange) 55%,var(--wh-surface)));
    box-shadow: 0 1px 8px color-mix(in srgb,var(--orange) 35%,transparent);
    animation: store-loader-progress 1s ease-in-out infinite;
}
.store-page-loader[hidden] { display: none; }
.store-loader-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 15px;
    color:var(--wh-brand-text);
    background: var(--wh-surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(10, 22, 40, .12);
    font-size: 12px;
    font-weight: 600;
}
.store-loader-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--wh-line);
    border-top-color: var(--orange);
    border-radius: 50%;
    animation: store-loader-spin .7s linear infinite;
}
@keyframes store-loader-spin { to { transform: rotate(360deg); } }
@keyframes store-loader-progress {
    from { transform: translateX(-110%); }
    to { transform: translateX(370%); }
}
@media (prefers-reduced-motion: reduce) {.store-loader-spinner, .store-page-loader::before { animation-duration: 1.8s; }}
@media (max-width: 480px) {.store-page-loader { padding-top: 70px; }}
/* Hover and focus states for elements that carry their base colours inline */
.hv-orange-outline:hover { border-color: var(--orange) !important; color: var(--orange-text) !important; }
.hv-bright:hover { filter: brightness(1.12); }
.hv-gray-dark:hover { background: var(--wh-line) !important; }
.hv-act-blue:hover { color: #3B82F6 !important; border-color: var(--tone-blue-bg) !important; background: var(--tone-blue-soft) !important; }
.hv-act-red:hover { color: var(--tone-red-mid) !important; border-color: var(--tone-red-bg) !important; background: var(--tone-red-soft) !important; }
.hv-navy-border:hover { border-color: var(--navy) !important; }
.hv-gray:hover { background: var(--wh-surface-3) !important; }
.hv-red:hover { background: #B91C1C !important; }
.fx-orange:focus { border-color: var(--orange) !important; }
.hv-orange-soft:hover { background: color-mix(in srgb, var(--orange) 8%, var(--wh-surface)) !important; }
.drop-over { border-color: var(--orange) !important; }
/* "Request quote" button on product cards (home, catalogue, product page): white text on indigo in light and dark. */
.pcc-add.pcc-add--quote { width:auto; padding:0 12px; gap:6px; border-radius:var(--r-ctl,9px); background:linear-gradient(135deg,#4F46E5,#4338CA); color:#fff; box-shadow:0 2px 8px rgba(79,70,229,.35); font-size:10px; font-weight:700; letter-spacing:.03em; }