@import url("shop-palette.css");
/* Storefront colours only. Existing project tokens come from shop-palette.
   Do not load this file in CMS, Dashboard or checkout layouts. */
.shop-scope { background-color: var(--bg-body); color: var(--text-body); }
.shop-scope #content a:not(.btn):not(.text-reset) { color: var(--project-1); }
.shop-scope #content a:not(.btn):not(.text-reset):hover { color: var(--project); }
.shop-scope .btn-primary, .shop-scope .btn-success {
    --bs-btn-color: var(--on-project);
    --bs-btn-bg: var(--project);
    --bs-btn-border-color: var(--project);
    --bs-btn-hover-color: var(--on-project);
    --bs-btn-hover-bg: var(--project-1);
    --bs-btn-hover-border-color: var(--project-1);
    --bs-btn-active-color: var(--on-project);
    --bs-btn-active-bg: var(--project-1);
    --bs-btn-active-border-color: var(--project-1);
    --bs-btn-disabled-color: var(--on-project);
    --bs-btn-disabled-bg: var(--project);
    --bs-btn-disabled-border-color: var(--project);
    color: var(--on-project); background-color: var(--project); border-color: var(--project);
}
.shop-scope .btn-primary:hover, .shop-scope .btn-primary:active,
.shop-scope .btn-success:hover, .shop-scope .btn-success:active {
    color: var(--on-project); background-color: var(--project-1); border-color: var(--project-1);
}
.shop-scope .btn-outline-secondary, .shop-scope .btn-outline-primary, .shop-scope .btn-secondary {
    --bs-btn-color: var(--project); --bs-btn-bg: transparent; --bs-btn-border-color: var(--project);
    --bs-btn-hover-color: var(--on-project); --bs-btn-hover-bg: var(--project); --bs-btn-hover-border-color: var(--project);
    --bs-btn-active-color: var(--on-project); --bs-btn-active-bg: var(--project); --bs-btn-active-border-color: var(--project);
    --bs-btn-disabled-color: var(--text-muted); --bs-btn-disabled-border-color: var(--border-base);
    color: var(--project); background-color: transparent; border-color: var(--project);
}
.shop-scope .basket-quantity .btn { --bs-btn-hover-color: var(--project); --bs-btn-hover-bg: var(--project-4); --bs-btn-hover-border-color: var(--project-2); border-color: var(--border-base); }
.shop-scope .btn-link { color: var(--text-muted); --bs-btn-hover-color: var(--project); --bs-btn-active-color: var(--project); }
.shop-scope .btn-link:hover { color: var(--project) !important; }
.shop-scope .btn:focus-visible, .shop-scope a:focus-visible, .shop-scope summary:focus-visible,
.shop-scope .form-control:focus, .shop-scope .form-select:focus, .shop-scope select:focus {
    outline: 2px solid var(--project-2); outline-offset: 2px;
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--project-3) 20%, transparent);
    border-color: var(--project-2);
}
.shop-scope .form-control, .shop-scope .form-select, .shop-scope select { border-color: var(--border-base); color: var(--text-body); background-color: var(--surface-strong); }
.shop-scope input[type=radio], .shop-scope input[type=checkbox] { accent-color: var(--project-2); }
.shop-scope .form-check-input:checked { background-color: var(--project-2); border-color: var(--project-2); }
.shop-scope .form-check-input:focus { border-color: var(--project-2); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--project-3) 20%, transparent); }
.shop-scope .card { background-color: var(--surface-strong); border-color: var(--border-base); color: var(--text-body); }
.shop-scope .card.shadow-sm { box-shadow: var(--shadow) !important; }
.shop-scope .text-body-secondary, .shop-scope .text-muted { color: var(--text-muted) !important; }
.shop-scope .price_color, .shop-scope .product-price { color: var(--project); }
.shop-scope .availability.available, .shop-scope .availability.instock, .shop-scope .text-success { color: var(--project-2) !important; }
.shop-scope .availability.unavailable, .shop-scope .availability.outofstock { color: var(--text-muted); }
.shop-scope .text-primary, .shop-scope .link-primary { color: var(--project-1) !important; }
.shop-scope .link-primary:hover { color: var(--project) !important; }
.shop-scope .bg-primary, .shop-scope .text-bg-primary { background-color: var(--project) !important; color: var(--on-project) !important; }
.shop-scope .border-primary { border-color: var(--project) !important; }
.shop-scope .bg-success, .shop-scope .text-bg-success { background-color: var(--project-2) !important; color: var(--on-project) !important; }
.shop-scope .bg-info, .shop-scope .text-bg-info { background-color: var(--project-1) !important; color: var(--on-project) !important; }
.shop-scope .text-info { color: var(--project-1) !important; }
.shop-scope .bg-warning, .shop-scope .text-bg-warning { background-color: var(--accent) !important; color: var(--project) !important; }
.shop-scope .badge { color: var(--project); background-color: var(--project-4); }
.shop-scope .alert-success { color: var(--project); background-color: color-mix(in srgb, var(--project-2) 10%, var(--surface-strong)); border-color: var(--project-3); }
.shop-scope .alert-info { color: var(--project-1); background-color: color-mix(in srgb, var(--project-1) 8%, var(--surface-strong)); border-color: var(--border-base); }
.shop-scope .alert-warning { color: var(--project); background-color: color-mix(in srgb, var(--accent) 15%, var(--surface-strong)); border-color: var(--accent); }
.shop-scope .alert .alert-link { color: inherit; }
.shop-scope .page-link { color: var(--project); background-color: var(--surface-strong); border-color: var(--border-base); }
.shop-scope .page-link:hover { color: var(--project); background-color: var(--project-4); }
.shop-scope .active > .page-link { color: var(--on-project); background-color: var(--project-2); border-color: var(--project-2); }
.shop-scope .page-link:focus { box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--project-3) 20%, transparent); }
.shop-scope .list-group-item { color: var(--text-body); background-color: var(--surface-strong); border-color: var(--border-base); }
.shop-scope .list-group-item-action:hover, .shop-scope .list-group-item.active { color: var(--project); background-color: color-mix(in srgb, var(--project-2) 10%, var(--surface-strong)); border-color: var(--project-2); }
.shop-scope .catalogue-breadcrumbs .active { color: var(--text-muted); }
.shop-scope #content .category-sidebar-link.is-current, .shop-scope #content .category-sidebar-link.is-ancestor { color: var(--project-2); }
.shop-scope #site-header .shop-account-nav .nav-link { color: var(--text-header); }
.shop-scope #site-header .shop-account-nav .nav-link:hover, .shop-scope #site-header .shop-account-nav .dropdown-item:hover { color: var(--project-3); }
.shop-scope #site-header .shop-account-nav .dropdown-item:active { color: var(--text-header); background-color: var(--project-1); }
.shop-scope .btn-outline-secondary:hover, .shop-scope .btn-outline-primary:hover, .shop-scope .btn-secondary:hover,
.shop-scope .btn-outline-secondary:active, .shop-scope .btn-outline-primary:active, .shop-scope .btn-secondary:active {
    color: var(--on-project); background-color: var(--project); border-color: var(--project);
}
.shop-scope .basket-quantity .btn:hover, .shop-scope .basket-quantity .btn:active {
    color: var(--project); background-color: var(--project-4); border-color: var(--project-2);
}

/* Customer/account presentation. Oscar Bootstrap 4 widgets remain intact. */
.customer-scope .customer-main { padding-top: 2rem; padding-bottom: 3rem; }
.customer-scope .customer-heading { margin: 1.5rem 0 2rem; }
.customer-scope h1, .customer-scope h2, .customer-scope h3 { color: var(--project); }
.customer-scope h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); }
.customer-scope h2 { font-size: 1.35rem; margin-bottom: 1.25rem; }
.customer-scope .customer-card, .customer-scope .login_form form,
.customer-scope .register_form form, .customer-scope .customer-content:not(:has(.customer-columns, .login_form, .register_form)) {
    background: var(--surface-strong); border: 1px solid var(--border-base);
    border-radius: 1rem; box-shadow: var(--shadow); padding: clamp(1.2rem, 3vw, 2rem);
}
.customer-scope .customer-columns > *, .customer-scope .customer-panel { min-width: 0; }
.customer-scope .customer-columns > *, .customer-scope .login_form, .customer-scope .register_form { margin-bottom: 1.5rem; }
.customer-scope .customer-panel > .customer-card { margin-top: 1.5rem; box-shadow: none; }
.customer-scope .customer-panel .card, .customer-scope .bg-light { background: var(--surface-strong) !important; border-color: var(--border-base); }
.customer-scope .customer-navigation .nav-link { color: var(--text-body) !important; border-left: 3px solid transparent; border-radius: .4rem; }
.customer-scope .customer-navigation .nav-link:hover { background: var(--project-4); }
.customer-scope .customer-navigation .nav-link.active { color: var(--project) !important; background: color-mix(in srgb, var(--project-2) 10%, var(--surface-strong)); border-left-color: var(--project-2); font-weight: 600; }
.customer-scope .breadcrumb { background: transparent; padding-left: 0; flex-wrap: wrap; }
.customer-scope .breadcrumb-item.active { color: var(--text-muted); }
.customer-scope .customer-address-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.customer-scope .customer-address-grid .customer-card { padding: 1.25rem; box-shadow: none; }
.customer-scope .customer-address-grid address { margin-top: 1rem; }
.customer-scope .table { color: var(--text-body); }
.customer-scope .table th, .customer-scope .table td { border-color: var(--border-base); vertical-align: middle; }
.customer-scope .table-striped tbody tr:nth-of-type(odd) { background: var(--project-4); }
.customer-scope .table-responsive { margin: 1rem 0; }
.customer-scope .form-group { margin-bottom: 1.25rem; }
.customer-scope label { font-weight: 600; }
.customer-scope .help-block, .customer-scope .helptext { color: var(--text-muted); }
.customer-scope .btn { white-space: normal; }
.customer-scope .customer-panel > .btn { margin: .25rem .25rem .25rem 0; }
.customer-scope .btn-info { background: var(--project-1); border-color: var(--project-1); color: var(--on-project); }
.customer-scope .btn-info:hover { background: var(--project); border-color: var(--project); }
.customer-scope .badge-success { background: var(--project-2); color: var(--on-project); }
.customer-scope .badge-info { background: var(--project-1); color: var(--on-project); }
.customer-scope .badge-warning { background: var(--accent); color: var(--project); }
.customer-scope .badge-primary { background: var(--project); color: var(--on-project); }
.customer-scope .nav-tabs .nav-link.active { border-color: var(--project-2); background: var(--project-4); color: var(--project); }
.customer-scope .dropdown-item:active { background: var(--project-4); color: var(--project); }
.customer-scope .bootstrap-datetimepicker-widget table td.active,
.customer-scope .bootstrap-datetimepicker-widget table td.active:hover { background: var(--project-2); }
.customer-scope .bootstrap-datetimepicker-widget table td.today:before { border-bottom-color: var(--project-2); }
.customer-scope #site-header .navbar-nav.ms-auto { margin-left: auto; }
.customer-scope #site-header .nav-list { gap: .75rem; }
.customer-scope #site-header .shop-account-nav { margin-left: 1rem; }
@media (max-width: 575.98px) {
    .customer-scope .customer-main { padding-top: 1rem; }
    .customer-scope .customer-panel { padding: 1rem; }
    .customer-scope .customer-content { overflow-wrap: anywhere; }
    .customer-scope .form-group .btn { margin-bottom: .5rem; }
    .customer-scope #site-header .shop-account-nav { margin-left: 0; }
}
.customer-scope .btn-primary:not(:disabled):not(.disabled):active,
.customer-scope .btn-success:not(:disabled):not(.disabled):active,
.customer-scope .btn-info:not(:disabled):not(.disabled):active {
    background: var(--project-1); border-color: var(--project-1); color: var(--on-project);
}
.customer-scope .btn-primary:disabled, .customer-scope .btn-success:disabled { background: var(--project); border-color: var(--project); }
.customer-scope .btn:focus { box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--project-3) 20%, transparent) !important; }
@media (max-width: 991.98px) {
    .customer-scope .table-responsive .dropdown-menu.show { position: static !important; transform: none !important; }
}
/* Keep headings, prices and actions readable; scroll only the table on phones. */
.customer-scope .table-responsive .table { min-width: 32rem; overflow-wrap: normal; }
.customer-scope .table-responsive .btn { white-space: nowrap; }
/* Header is in normal flow; retain a small gap above breadcrumbs. */
.shop-scope #shop-content { scroll-margin-top: 1rem; }
html.shop-fragment-navigation { scroll-behavior: auto; }

/* Subcategory cards: preserve the existing grid, padding and minimum height. */
.shop-scope .category-card--subcategory {
    position: relative;
    background: var(--surface-strong);
    box-shadow: inset 4px 0 var(--project-2);
}
.shop-scope .category-card--subcategory .subcategory-name {
    flex: 1 1 auto;
    color: var(--project);
}
.shop-scope .category-card--subcategory .subcategory-arrow {
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--project-2);
    transition: transform .2s ease;
}
.shop-scope .category-card--subcategory:hover,
.shop-scope .category-card--subcategory:focus-visible {
    background: color-mix(in srgb, var(--project-3) 9%, var(--surface-strong));
    border-color: var(--project-2);
    box-shadow: inset 5px 0 var(--project-2), var(--shadow);
}
.shop-scope .category-card--subcategory:hover .subcategory-arrow,
.shop-scope .category-card--subcategory:focus-visible .subcategory-arrow {
    transform: translateX(3px);
}
@media (prefers-reduced-motion: reduce) {
    .shop-scope .category-card--subcategory .subcategory-arrow {
        transition: none;
        transform: none;
    }
}