/*
Install-level frontend overrides
================================

This file is safe to customise per server install.

Use it for:
- client branding
- layout rearrangement support styles
- page-specific install customisations
- install-only CSS that should survive core upgrades

Recommended approach:
1. Prefer overriding variables from `frontend_theme_contract.css`
2. Use the shell hooks:
   - body[data-vp-page]
   - [data-vp-header]
   - [data-vp-breadcrumbs]
   - [data-vp-content]
   - [data-vp-footer]
3. Keep deep selector overrides here, not in shared core CSS
*/

/* Signworks client palette */
:root {
    --vp-client-black: #030504;
    --vp-client-charcoal: #211f20;
    --vp-client-slate: #3f3f41;
    --vp-client-accent: #fbeb00;
    --vp-client-accent-hover: #e4d700;
    --vp-client-accent-soft: #fffbe0;
    --vp-client-canvas: #f6f6f3;
    --vp-client-border: #deded9;
    --vp-client-muted: #69696b;
    --vp-client-white: #ffffff;
    --vp-brand-navy: var(--vp-client-charcoal);
    --vp-brand-slate: var(--vp-client-slate);
    --vp-brand-sky: var(--vp-client-accent-soft);
    --vp-brand-blue: var(--vp-client-accent);
    --vp-brand-blue-deep: var(--vp-client-charcoal);
    --vp-brand-ink: var(--vp-client-charcoal);
    --vp-brand-muted: var(--vp-client-muted);
    --vp-brand-border: var(--vp-client-border);
    --vp-brand-panel: var(--vp-client-white);
    --vp-brand-panel-soft: #fafaf7;
    --vp-brand-highlight: var(--vp-client-accent-soft);
    --vp-page-background: var(--vp-client-canvas);
    --vp-page-text: var(--vp-client-slate);
    --vp-page-link: var(--vp-client-charcoal);
    --vp-page-link-hover: var(--vp-client-black);
    --vp-header-background: var(--vp-client-charcoal);
    --vp-header-border-color: rgba(255, 255, 255, 0.12);
    --vp-header-brand-color: var(--vp-client-white);
    --vp-header-brand-meta-color: #c4c4c5;
    --vp-header-link-color: #f2f2f2;
    --vp-header-link-hover-color: var(--vp-client-accent);
    --vp-header-link-active-color: var(--vp-client-accent);
    --vp-header-search-background: var(--vp-client-white);
    --vp-header-search-border-color: #5b5b5d;
    --vp-header-chip-background: var(--vp-client-accent);
    --vp-header-chip-color: var(--vp-client-charcoal);
    --vp-breadcrumb-background: #f1f1ed;
    --vp-breadcrumb-border: var(--vp-client-border);
    --vp-breadcrumb-link: var(--vp-client-slate);
    --vp-breadcrumb-link-hover: var(--vp-client-black);
    --vp-breadcrumb-current: var(--vp-client-charcoal);
    --vp-breadcrumb-separator: #88888a;
    --vp-surface-card-bg: var(--vp-client-white);
    --vp-surface-card-bg-soft: #fafaf7;
    --vp-surface-card-border: var(--vp-client-border);
    --vp-surface-card-shadow: 0 12px 30px rgba(3, 5, 4, 0.06);
    --vp-surface-card-header-bg: #fafaf7;
    --vp-surface-card-header-border: var(--vp-client-border);
    --vp-surface-hero-bg: linear-gradient(135deg, #ffffff 0%, #f4f4ef 100%);
    --vp-surface-hero-border: var(--vp-client-border);
    --vp-button-primary-bg: var(--vp-client-accent);
    --vp-button-primary-bg-hover: var(--vp-client-charcoal);
    --vp-button-primary-border: var(--vp-client-accent);
    --vp-button-primary-border-hover: var(--vp-client-charcoal);
    --vp-button-primary-text: var(--vp-client-charcoal);
    --vp-button-outline-primary-bg: var(--vp-client-white);
    --vp-button-outline-primary-border: var(--vp-client-charcoal);
    --vp-button-outline-primary-text: var(--vp-client-charcoal);
    --vp-button-outline-primary-bg-hover: var(--vp-client-accent);
    --vp-button-outline-primary-border-hover: var(--vp-client-accent);
    --vp-button-outline-primary-text-hover: var(--vp-client-charcoal);
    --vp-form-control-border: #cfcfca;
    --vp-form-control-focus-border: var(--vp-client-charcoal);
    --vp-form-control-focus-shadow: 0 0 0 0.2rem rgba(251, 235, 0, 0.34);
    --vp-footer-background: var(--vp-client-black);
    --vp-footer-border: var(--vp-client-slate);
    --vp-focus-ring: 0 0 0 0.22rem rgba(251, 235, 0, 0.72);
    --vp-primary: var(--vp-client-accent);
}

::selection {
    background: var(--vp-client-accent);
    color: var(--vp-client-charcoal);
}

body.vp-storefront-shell {
    background: var(--vp-page-background);
    color: var(--vp-page-text);
}

.vp-storefront-shell h1,
.vp-storefront-shell h2,
.vp-storefront-shell h3,
.vp-storefront-shell h4,
.vp-storefront-shell h5,
.vp-storefront-shell h6,
.vp-storefront-shell .navbar-brand {
    color: var(--vp-client-charcoal);
}

.vp-storefront-shell a {
    color: var(--vp-page-link);
}

.vp-storefront-shell a:hover {
    color: var(--vp-page-link-hover);
}

.vp-storefront-shell a:focus-visible,
.vp-storefront-shell button:focus-visible,
.vp-storefront-shell .btn:focus-visible,
.vp-storefront-shell input:focus-visible,
.vp-storefront-shell select:focus-visible,
.vp-storefront-shell textarea:focus-visible,
.vp-storefront-shell [tabindex]:focus-visible {
    outline: 2px solid var(--vp-client-charcoal);
    outline-offset: 3px;
    box-shadow: var(--vp-focus-ring);
}

.vp-skip-link {
    border: 2px solid var(--vp-client-accent);
    background: var(--vp-client-charcoal);
    color: var(--vp-client-white);
}

.vp-storefront-shell .text-pronia-primary,
.vp-storefront-shell .text-pronia-primary * {
    color: var(--vp-client-charcoal);
}

.vp-storefront-shell .section-title::before,
.vp-storefront-shell .section-title::after {
    background: var(--vp-client-accent);
}

/* Header and primary navigation */
.bg-pronia-primary,
.vp-pronia-header .header-top {
    background: var(--vp-client-black);
}

.vp-pronia-header,
.vp-pronia-header .header-middle {
    background: var(--vp-client-charcoal);
}

.vp-pronia-header .header-middle {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.vp-pronia-header .header-bottom {
    border-color: var(--vp-client-slate);
    background: var(--vp-client-black);
}

.vp-header-assurance,
.vp-pronia-header .vp-header-account-link,
.vp-header-text-button {
    color: #f2f2f2;
}

.vp-pronia-header .vp-header-account-link:hover,
.vp-header-text-button:hover {
    color: var(--vp-client-accent);
}

.vp-pronia-header .vp-storefront-logo,
.vp-pronia-header .vp-storefront-logo:hover,
.vp-pronia-header .vp-storefront-logo-copy strong {
    color: var(--vp-client-white);
}

.vp-pronia-header .vp-storefront-logo-copy small {
    color: #c4c4c5;
}

.vp-pronia-header .vp-storefront-logo-mark {
    background: var(--vp-client-accent);
    color: var(--vp-client-charcoal);
}

.vp-storefront-logo { max-width: 100%; }

.vp-storefront-logo-image {
    display: block;
    max-width: 100%;
    height: auto;
    background: transparent;
    object-fit: contain;
}

.vp-pronia-header .vp-storefront-logo-image {
    width: auto;
    max-height: 42px;
    padding: 0;
}

.vp-storefront-logo-footer .vp-storefront-logo-image {
    width: 180px;
    padding: 0;
    border-radius: 0;
    background: transparent;
}

@media (max-width: 575.98px) {
    .vp-pronia-footer .footer-top .row {
        --bs-gutter-x: 1.5rem;
    }
}

.vp-storefront-search {
    border-color: #636365;
    background: var(--vp-client-white);
}

.vp-storefront-search:focus-within {
    border-color: var(--vp-client-accent);
    box-shadow: 0 0 0 0.2rem rgba(251, 235, 0, 0.3);
}

.vp-pronia-header .vp-header-action {
    color: var(--vp-client-white);
}

.vp-pronia-header .vp-header-action:hover {
    background: rgba(251, 235, 0, 0.12);
    color: var(--vp-client-accent);
}

.vp-header-action-count {
    border-color: var(--vp-client-charcoal);
    background: var(--vp-client-accent);
    color: var(--vp-client-charcoal);
}

.vp-main-nav .nav-link {
    color: #efefef;
}

.vp-main-nav .nav-link::after {
    background: var(--vp-client-accent);
}

.vp-main-nav .nav-link:hover,
.vp-main-nav .nav-link.active {
    color: var(--vp-client-accent);
}

.vp-storefront-social-links-header .vp-storefront-social-link {
    border-color: rgba(255, 255, 255, 0.38);
    background: rgba(255, 255, 255, 0.06);
}

.vp-storefront-social-links-header .vp-storefront-social-link:hover {
    border-color: var(--vp-client-accent);
    background: rgba(251, 235, 0, 0.1);
}

.vp-autocomplete-result:hover,
.vp-autocomplete-result.is-active,
.vp-autocomplete-footer-link {
    background: var(--vp-client-accent-soft);
    color: var(--vp-client-charcoal);
}

.vp-autocomplete-result-price {
    background: var(--vp-client-accent-soft);
    color: var(--vp-client-charcoal);
}

/* Breadcrumbs and controls */
.vp-pronia-breadcrumb {
    border-bottom-color: var(--vp-client-border);
    background:
        radial-gradient(circle at 92% 20%, rgba(251, 235, 0, 0.22) 0 4rem, transparent 4.1rem),
        linear-gradient(135deg, #f8f8f5 0%, #eeeeea 100%);
    box-shadow: inset 0 -3px 0 var(--vp-client-accent);
}

.vp-pronia-breadcrumb::after {
    border-color: rgba(33, 31, 32, 0.16);
}

.vp-breadcrumb-item,
.vp-breadcrumb-item a {
    color: var(--vp-client-slate);
}

.vp-breadcrumb-item a:hover {
    color: var(--vp-client-black);
    text-decoration-color: var(--vp-client-accent);
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2rem;
}

.vp-breadcrumb-item.is-current {
    color: var(--vp-client-charcoal);
}

.vp-breadcrumb-item:not(:last-child)::after {
    color: #8a8a8b;
}

.vp-storefront-shell .btn-primary,
.vp-storefront-shell .btn-success,
.vp-storefront-shell .btn-pronia-primary {
    border-color: var(--vp-client-accent);
    background: var(--vp-client-accent);
    color: var(--vp-client-charcoal);
}

.vp-storefront-shell .btn-primary:hover,
.vp-storefront-shell .btn-primary:focus-visible,
.vp-storefront-shell .btn-success:hover,
.vp-storefront-shell .btn-success:focus-visible,
.vp-storefront-shell .btn-pronia-primary:hover,
.vp-storefront-shell .btn-pronia-primary:focus-visible {
    border-color: var(--vp-client-charcoal);
    background: var(--vp-client-charcoal);
    color: var(--vp-client-white);
}

.vp-storefront-shell .btn-outline-primary,
.vp-storefront-shell .btn-outline-success {
    border-color: var(--vp-client-charcoal);
    background: var(--vp-client-white);
    color: var(--vp-client-charcoal);
}

.vp-storefront-shell .btn-outline-primary:hover,
.vp-storefront-shell .btn-outline-success:hover {
    border-color: var(--vp-client-accent);
    background: var(--vp-client-accent);
    color: var(--vp-client-charcoal);
}

.vp-storefront-shell .btn-outline-secondary:hover,
.vp-storefront-shell .btn-outline-dark:hover {
    border-color: var(--vp-client-charcoal);
    background: var(--vp-client-charcoal);
    color: var(--vp-client-white);
}

.vp-storefront-shell .btn:disabled,
.vp-storefront-shell .btn.disabled {
    cursor: not-allowed;
    opacity: 0.58;
}

.vp-storefront-shell .form-control,
.vp-storefront-shell .form-select {
    border-color: var(--vp-form-control-border);
    color: var(--vp-client-charcoal);
}

.vp-storefront-shell .form-control:focus,
.vp-storefront-shell .form-select:focus {
    border-color: var(--vp-client-charcoal);
    box-shadow: var(--vp-form-control-focus-shadow);
}

.vp-storefront-shell .form-check-input:checked {
    border-color: var(--vp-client-charcoal);
    background-color: var(--vp-client-charcoal);
}

.vp-storefront-shell input[type="range"] {
    accent-color: var(--vp-client-charcoal);
}

/* Surfaces, tables and reusable content */
.vp-storefront-shell .card,
.catalog-filter-card,
.catalog-step-card,
.catalog-main-image-wrap,
.vp-register-address-panel {
    border-color: var(--vp-client-border);
    background: var(--vp-client-white);
    box-shadow: var(--vp-surface-card-shadow);
}

.vp-storefront-shell .card-header {
    border-bottom-color: var(--vp-client-border);
    background: #fafaf7;
}

.vp-storefront-shell .text-bg-light,
.vp-storefront-shell .badge.bg-light,
.selection-chip {
    border-color: #e4d900;
    background: var(--vp-client-accent-soft) !important;
    color: var(--vp-client-charcoal) !important;
}

.vp-storefront-shell .table-responsive {
    border-color: var(--vp-client-border);
}

.vp-storefront-shell .table thead th {
    border-bottom: 2px solid var(--vp-client-accent);
    background: #eeeeea;
    color: var(--vp-client-charcoal);
}

.vp-storefront-shell .table tbody tr:hover > * {
    background: #fffdf0;
}

.catalog-hero {
    border-color: var(--vp-client-border);
    background: var(--vp-surface-hero-bg);
}

.catalog-hero::after {
    background: radial-gradient(circle, rgba(251, 235, 0, 0.3), transparent 68%);
}

.catalog-mini-stat {
    border-color: var(--vp-client-border);
    background: var(--vp-client-white);
}

.price-panel {
    border-color: #e8df55;
    background: #fffdeb;
}

.price-box span.new-price,
.single-product-content .price-box span.new-price {
    color: var(--vp-client-charcoal);
}

.vp-product-card {
    border-color: #e3e3df;
}

.vp-product-card:hover {
    border-color: var(--vp-client-accent);
    box-shadow: 0 18px 40px rgba(3, 5, 4, 0.11);
}

.vp-product-card .catalog-card-title,
.vp-product-card .catalog-card-title a {
    color: var(--vp-client-charcoal);
}

.vp-empty-state {
    border-color: #cfcfca;
    background: #fafaf7;
}

blockquote {
    border-left: 4px solid var(--vp-client-accent);
    background: var(--vp-client-charcoal);
    color: var(--vp-client-white);
}

/* Catalogue, product and slider states */
.catalog-pill-button:hover,
.catalog-pill-button.active,
.vp-catalogue-smart-select-option:hover,
.vp-catalogue-smart-select-option.is-selected {
    border-color: var(--vp-client-accent);
    background: var(--vp-client-accent-soft);
    color: var(--vp-client-charcoal);
}

.vp-catalogue-banner {
    background: var(--vp-client-charcoal);
}

.vp-catalogue-banner__scrim {
    background: linear-gradient(100deg, rgba(3, 5, 4, 0.92) 0%, rgba(33, 31, 32, 0.78) 56%, rgba(33, 31, 32, 0.58) 100%);
}

.vp-catalogue-banner:not(.has-media) .vp-catalogue-banner__scrim {
    background: linear-gradient(135deg, var(--vp-client-black) 0%, var(--vp-client-slate) 100%);
}

.vp-catalogue-banner__eyebrow {
    color: var(--vp-client-accent);
}

.vp-category-search-status,
.vp-category-tree-link.is-selected-ancestor,
.vp-catalogue-clear-filters {
    color: var(--vp-client-charcoal);
}

.vp-category-tree-toggle:hover,
.vp-category-tree-link:hover {
    border-color: #e8df55;
    background: var(--vp-client-accent-soft);
    color: var(--vp-client-charcoal);
}

.vp-category-tree-group {
    border-left-color: #d8d8d3;
}

.vp-category-tree-link.is-selected {
    border-color: var(--vp-client-accent);
    background: var(--vp-client-accent-soft);
    color: var(--vp-client-charcoal);
    box-shadow: inset 3px 0 0 var(--vp-client-accent);
}

.vp-category-tree-node.is-search-match > .vp-category-tree-row .vp-category-tree-link:not(.is-selected) {
    border-color: #e8df55;
    background: #fffef3;
    color: var(--vp-client-charcoal);
}

.vp-category-tree-node.is-search-context > .vp-category-tree-row .vp-category-tree-link:not(.is-selected) {
    color: var(--vp-client-slate);
}

.vp-category-no-results {
    border-color: #d3d3ce;
    background: #fafaf7;
    color: var(--vp-client-slate);
}

.vp-catalogue-filter-chip {
    border-color: #e1d600;
    background: var(--vp-client-accent-soft);
    color: var(--vp-client-charcoal);
}

.vp-catalogue-filter-chip:hover {
    border-color: var(--vp-client-accent-hover);
    background: var(--vp-client-accent);
    color: var(--vp-client-charcoal);
}

.vp-catalogue-view-switch {
    border-color: #cecec9;
}

.vp-catalogue-view-button {
    border-left-color: #cecec9;
    color: var(--vp-client-slate);
}

.vp-catalogue-view-button:hover,
.vp-catalogue-view-button.is-active {
    background: var(--vp-client-accent);
    color: var(--vp-client-charcoal);
}

.vp-catalogue-pagination .page-link,
.pagination .page-link {
    border-color: #cecec9;
    background: var(--vp-client-white);
    color: var(--vp-client-charcoal);
}

.vp-catalogue-pagination .page-link:hover,
.pagination .page-link:hover {
    border-color: var(--vp-client-accent);
    background: var(--vp-client-accent-soft);
    color: var(--vp-client-charcoal);
}

.vp-catalogue-pagination .page-item.active .page-link,
.pagination .page-item.active .page-link {
    border-color: var(--vp-client-accent);
    background: var(--vp-client-accent);
    color: var(--vp-client-charcoal) !important;
}

.vp-product-gallery-control,
.vp-product-gallery-open,
.vp-product-gallery-counter {
    border-color: #d2d2cd;
    color: var(--vp-client-charcoal);
}

.vp-product-gallery-control:hover,
.vp-product-gallery-open:hover,
.vp-may-like-control:hover,
.vp-may-like-control:focus-visible,
.vp-suggested-products-control:hover,
.vp-suggested-products-control:focus-visible {
    border-color: var(--vp-client-accent);
    background: var(--vp-client-accent);
    color: var(--vp-client-charcoal);
}

.vp-product-gallery-thumb.is-active,
.vp-product-gallery-thumb:hover,
.option-button:hover,
.option-button.active,
.option-button[aria-pressed="true"] {
    border-color: var(--vp-client-accent);
}

.option-button:hover,
.option-button.active,
.option-button[aria-pressed="true"] {
    background: var(--vp-client-accent-soft);
    color: var(--vp-client-charcoal);
}

.vp-may-like-counter,
.vp-may-like-control,
.vp-suggested-products-counter,
.vp-suggested-products-control {
    border-color: #d2d2cd;
    color: var(--vp-client-charcoal);
}

.vp-may-like-track,
.vp-suggested-products-track {
    scrollbar-color: var(--vp-client-slate) #eeeeea;
}

.vp-cart-qty-button:hover {
    border-color: var(--vp-client-accent);
    background: var(--vp-client-accent-soft);
    color: var(--vp-client-charcoal);
}

.vp-page-checkout .card-header,
.vp-page-quote-checkout .card-header {
    background: #fafaf7;
}

.vp-page-checkout .form-check.border:has(.form-check-input:checked),
.vp-page-quote-checkout .form-check.border:has(.form-check-input:checked) {
    border-color: var(--vp-client-accent) !important;
    background: var(--vp-client-accent-soft);
}

.vp-brand-directory-hero {
    border-color: var(--vp-client-border);
    background:
        radial-gradient(circle at top right, rgba(251, 235, 0, 0.26), transparent 30rem),
        linear-gradient(180deg, #ffffff, #f2f2ee);
}

.vp-brand-directory-kicker {
    background: var(--vp-client-accent);
    color: var(--vp-client-charcoal);
}

.vp-brand-directory-search:focus,
.vp-brand-directory-search:focus-within {
    border-color: var(--vp-client-charcoal);
    box-shadow: var(--vp-form-control-focus-shadow);
}

.vp-brand-card:hover,
.vp-brand-card:focus-visible {
    border-color: var(--vp-client-accent);
    box-shadow: 0 16px 35px rgba(3, 5, 4, 0.1);
}

.vp-brand-card-media,
.vp-brand-card-placeholder {
    background: #f7f7f3;
}

.vp-brand-card-placeholder,
.vp-brand-card-name {
    color: var(--vp-client-charcoal);
}

.myaccount-tab-trigger li a.active {
    border-color: var(--vp-client-accent);
    background: var(--vp-client-accent);
    color: var(--vp-client-charcoal);
}

.myaccount-tab-trigger li a:hover,
.myaccount-orders .table .account-order-id:hover,
.product-content .product-name:hover,
.single-product-content .product-category ul li a:hover {
    color: var(--vp-client-black);
    text-decoration-color: var(--vp-client-accent);
}

.scroll-to-top {
    background: var(--vp-client-charcoal);
    color: var(--vp-client-white);
}

.scroll-to-top:hover {
    background: var(--vp-client-accent);
    color: var(--vp-client-charcoal);
}

/* Footer */
.vp-pronia-footer {
    border-top: 3px solid var(--vp-client-accent);
    background: var(--vp-client-black);
    color: #c5c5c6;
}

.vp-pronia-footer .vp-storefront-logo-mark {
    background: var(--vp-client-accent);
    color: var(--vp-client-charcoal);
}

.vp-pronia-footer .vp-storefront-logo-copy strong,
.vp-pronia-footer .vp-storefront-logo-copy small,
.vp-pronia-footer .footer-widget-title {
    color: var(--vp-client-white);
}

.vp-pronia-footer .footer-widget-title::after {
    display: block;
    width: 2.25rem;
    height: 2px;
    margin-top: 0.55rem;
    background: var(--vp-client-accent);
    content: "";
}

.vp-footer-intro,
.footer-widget-list a {
    color: #bcbcbf;
}

.footer-widget-list a:hover {
    color: var(--vp-client-accent);
}

.vp-pronia-footer .vp-storefront-social-link {
    border-color: #555558;
    background: var(--vp-client-charcoal);
}

.vp-pronia-footer .vp-storefront-social-link:hover {
    border-color: var(--vp-client-accent);
    background: var(--vp-client-slate);
}

.footer-bottom {
    border-top-color: var(--vp-client-slate);
    color: #a6a6a8;
}

@media (max-width: 991.98px) {
    .vp-pronia-header .header-middle {
        border-bottom-color: var(--vp-client-slate);
    }

    .vp-pronia-header .navbar-collapse {
        background: var(--vp-client-black);
    }
}