:root {
    --primary-color: #4B0082;
    --secondary-color: #e6e6e6;
    --text-color-dark: #333;
    --text-color-light: #fff;
    --font-family: 'Poppins', sans-serif;
    --top-bar-padding: 8px 0;
    --navbar-padding: 15px 0;
    --button-padding: 10px 20px;
    --border-radius: 5px;
    --primary-text-color: #ffffff;
    --secondary-text-color: #e0e0e0;
    --card-bg-color: rgba(255, 255, 255, 0.1);
    --card-border-color: #ff1493;
    --card-border-top-color: #1e90ff;
    --card-border-bottom-color: #ff1493;
    --card-hover-border: linear-gradient(90deg, #1e90ff, #8a2be2, #ff1493);
    --font-family: 'Poppins', sans-serif;
    --container-max-width: 1200px;
    --container-padding: 0 15px;
    --card-border-top-color: #1e90ff;
    --card-border-bottom-color: #ff1493;
    --card-border-side-color: #8a2be2;
    --card-border-width: 1px;
    --card-border-style: solid;
    --section-bg: #f5f5f5;
    --input-border: #ccc;
    --section-spacing: 50px 0;
    --header-spacing: 0 0 40px 0;
    --search-btn-hover: #5d00a3;
    --primary-text: #333;
    --secondary-text: #888;
    --link-color: #7C1FA0;
    --link-hover-color: #4B0082;
    --card-bg: #fff;
    --card-border: #e0e0e0;
    --button-border: #7C1FA0;
    --button-text-color: #7C1FA0;
    --button-hover-bg: #F3EAFB;
    --view-all-bg: #7C1FA0;
    --view-all-hover-bg: #4B0082;
    --container-product-padding: 50px 15px;
}

/* =========================================================================
   Global brand-color pass — Bootstrap ships blue focus rings by default;
   swap them for the site's violet everywhere a form/button doesn't
   already have its own more specific override.
   ========================================================================= */

input[type="radio"],
input[type="checkbox"] {
    accent-color: var(--primary-color);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 .2rem rgba(75, 0, 130, .2);
}

.btn:focus,
.btn-check:focus + .btn {
    box-shadow: 0 0 0 .25rem rgba(75, 0, 130, .25);
}

.btn-check:focus + .btn-primary,
.btn-primary:focus,
.btn-check:checked + .btn-primary:focus,
.btn-check:active + .btn-primary:focus,
.btn-primary:active:focus,
.btn-primary.active:focus,
.show > .btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .25rem rgba(75, 0, 130, .5);
}

.btn-check:focus + .btn-outline-primary,
.btn-outline-primary:focus,
.btn-check:checked + .btn-outline-primary:focus,
.btn-check:active + .btn-outline-primary:focus,
.btn-outline-primary:active:focus,
.btn-outline-primary.active:focus,
.btn-outline-primary.dropdown-toggle.show:focus {
    box-shadow: 0 0 0 .25rem rgba(75, 0, 130, .5);
}

.form-check-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 .25rem rgba(75, 0, 130, .25);
}

.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-close:focus {
    box-shadow: 0 0 0 .25rem rgba(75, 0, 130, .25);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-family);
}

body {
    background-color: #f0f0f0;
}

a {
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600;
}

/* =========================================================================
   Global smoothness pass
   No layout/visual design changes here - only makes existing state
   changes (hover/focus/scroll) animate instead of snapping instantly.
   ========================================================================= */

html {
    scroll-behavior: smooth;
}

a,
button,
.btn,
input,
select,
textarea,
.form-control,
.form-check-input,
.nav-link,
.category-tile,
.arena-welcome .icon-tile {
    transition: color .15s ease, background-color .15s ease, border-color .15s ease,
        box-shadow .15s ease, opacity .15s ease;
}

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

    * {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

.dropdown-toggle::after {
    display: none !important;
}

.custom-arrow {
    margin-left: 5px;
    font-size: 12px;
    color: #FFF; /* change as needed */
}


.mobile-menu-icon{
    display: none;
    font-size: 24px;
    cursor: pointer;
    margin-right: 15px;
    color: var(--text-color-dark);
}

@media  (max-width: 992px) {
    .mobile-menu-icon{
        display: block;
    }
    .main-menu{
        display: none !important;
    }

}

.top-bar {
    background-color: var(--primary-color);
    color: var(--text-color-light);
    padding: var(--top-bar-padding);
}

.top-bar .top-menu {
    display: flex;
    justify-content: flex-end;
    gap: 20px;
    align-items: center;
}

.top-bar .top-menu a {
    color: var(--text-color-light);
    text-decoration: none;
    font-size: 14px;
    display: flex;
    align-items: center;
}

.top-bar .top-menu a img {
    margin-right: 5px;
    height: 14px;
}

.top-bar .top-menu .dropdown {
    position: relative;
    display: inline-block;
}

.top-bar .top-menu .dropdown-content {
    display: none;
    position: absolute;
    background-color: #5d00a3;
    min-width: 120px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    right: 0;
    top: 100%;
}

.top-bar .top-menu .dropdown-toggle:hover + .dropdown-content,
.top-bar .top-menu .dropdown-content:hover {
    display: block;
}

.top-bar .top-menu .dropdown-content a {
    color: var(--text-color-light);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.top-bar .top-menu .dropdown-content a:hover {
    background-color: #6a00b6;
}

.top-bar .top-menu .dropdown-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
}

.top-bar .top-menu .dropdown-toggle .arrow {
    margin-left: 5px;
}

.top-bar .top-menu .top-register-btn {
    background-color: var(--primary-color, #6a00b6);
    color: #fff;
    padding: 6px 18px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    transition: background-color .2s ease, transform .2s ease;
}

.top-bar .top-menu .top-register-btn:hover {
    background-color: #5d00a3;
    color: #fff;
    transform: translateY(-1px);
}

.navbar {
    background-color: var(--secondary-color);
    padding: var(--navbar-padding);
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar .logo {
    display: flex;
    align-items: center;
}

.navbar .logo img {
    height: 50px;
    margin-right: 10px;
}

.navbar .main-menu {
    display: flex;
    gap: 25px;
}

.navbar .main-menu a {
    color: var(--text-color-dark);
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    transition: color 0.3s;
}

.navbar .main-menu a:hover {
    color: var(--primary-color);
}

.add-product-btn {
    background-color: var(--primary-color);
    color: var(--text-color-light);
    padding: var(--button-padding);
    border-radius: var(--border-radius);
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s;
}

.add-product-btn:hover {
    background-color: #5d00a3;
}

/* Hero Section */
.hero-section {
    position: relative;
    width: 100%;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--primary-text-color);
    overflow: hidden;
    padding: 50px 15px;
    background: #02070b;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--hero-bg-image, url('../images/hero_banner.jpg'));
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 0;
}

.hero-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .72), rgba(0, 0, 0, .44) 48%, rgba(0, 0, 0, .66)),
        linear-gradient(180deg, rgba(0, 0, 0, .58), rgba(0, 0, 0, .38) 42%, rgba(0, 0, 0, .72));
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    width: 100%;
    padding: var(--container-padding);
}

.hero-content h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.hero-content p {
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--secondary-text-color);
    margin-bottom: 2rem;
    line-height: 1.6;
}

/* Service Cards */
.service-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-top: 30px;
}

.service-card {
    background-color: rgba(255, 255, 255, 0.05);
    border: var(--card-border-width) var(--card-border-style) transparent;
    border-color: var(--card-border-top-color) var(--card-border-side-color) var(--card-border-bottom-color) var(--card-border-side-color);
    backdrop-filter: blur(10px);
    padding: 1rem;
    border-radius: 12px;
    text-decoration: none;
    color: var(--primary-text-color);
    font-weight: 600;
    font-size: 1.1rem;
    text-align: center;
    flex: 1 1 260px;
    max-width: 320px;
    min-height: 80px;    /* keep a decent min height */
    max-height: 120px;   /* enforce max height */
    display: flex;       /* center text vertically */
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.service-card:hover {
    transform: translateY(-6px);
    border-color: transparent;
}

.service-card:hover::before {
    opacity: 1;
}

.service-card span {
    position: relative;
    z-index: 2;
}

/* Responsive Styles */
@media (max-width: 992px) {
    .hero-content h1 {
        font-size: 2.5rem;
    }
    .hero-content p {
        font-size: 1.05rem;
    }
}

@media (max-width: 768px) {
    .hero-section {
        padding: 40px 20px;
    }
    .hero-content h1 {
        font-size: 2rem;
    }
    .hero-content p {
        font-size: 0.95rem;
    }
    .service-cards {
        flex-direction: column;
        align-items: stretch;
    }
    .service-card {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .hero-content h1 {
        font-size: 1.6rem;
    }
    .hero-content p {
        font-size: 0.9rem;
    }
    .service-card {
        font-size: 1rem;
        padding: 0.9rem;
    }
}

@media (max-width: 400px) {
    .hero-content h1 {
        font-size: 1.4rem;
    }
    .hero-content p {
        font-size: 0.85rem;
    }
    .service-card {
        font-size: 0.95rem;
        padding: 0.8rem;
    }
}

.services-section {
    padding: var(--section-spacing);
}

.section-header {
    text-align: center;
    margin-bottom: var(--header-spacing);
}

.section-header h2 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.section-header p {
    font-size: 1rem;
    color: var(--secondary-text);
    max-width: 600px;
    margin: 0 auto;
}

.search-bar-container {
    text-align: center;
    width: 100%;
}

.search-form {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 10px;
    width: 100%;
}

.marketplace-section .search-bar-container {
    max-width: 860px;
    margin: 0 auto;
}

.search-dropdown-wrapper {
    position: relative;
    border: 1px solid var(--input-border);
    overflow: hidden;
    width: 260px;
    height: 40px;
}

.marketplace-section .search-form {
    align-items: stretch;
    flex-wrap: nowrap;
    justify-content: center;
    margin: 0 auto 13px;
    max-width: 680px;
}

.marketplace-section .search-form.has-active-search {
    max-width: 760px;
}

.marketplace-section .search-dropdown-wrapper {
    background: #fff;
    border-color: #111;
    border-left-width: 0;
    border-radius: 0;
    height: 37px;
    overflow: visible;
    width: 196px;
}

.marketplace-section .search-dropdown-wrapper:first-child {
    border-left-width: 1px;
    border-radius: 6px 0 0 6px;
}

.marketplace-section .search-dropdown-wrapper:nth-child(3) {
    width: 196px;
}

.search-dropdown {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666' width='18px' height='18px'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 18px;
    border: none;
    padding: 0 30px 0 10px;
    height: 100%;
    font-size: 1rem;
    cursor: pointer;
    background-color: #fff;
    outline: none;
    width: 100%;
}

.marketplace-section .search-dropdown {
    color: #111;
    font-size: 11px;
    font-weight: 700;
    height: 100%;
    padding: 0 32px 0 12px;
}

.search-input-wrapper {
    border: 1px solid var(--input-border);
    overflow: hidden;
    height: 40px;
}

.search-input {
    width: 260px;
    height: 40px;
    border: none;
    padding: 0 10px;
    font-size: 1rem;
    outline: none;
}

.search-btn {
    background-color: var(--primary-color);
    color: #fff;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: background-color 0.3s ease;
    height: 40px;
}

.marketplace-section .search-btn {
    background: #4b005d;
    border-radius: 0 6px 6px 0;
    font-size: 11px;
    font-weight: 700;
    gap: 8px;
    height: 37px;
    justify-content: center;
    min-width: 74px;
    padding: 0 13px;
}

.marketplace-section .search-btn:hover {
    background: #350043;
}

.search-reset-btn {
    align-items: center;
    background: #fff;
    border: 1px solid #4b005d;
    border-radius: 6px;
    color: #4b005d;
    display: inline-flex;
    font-size: 12px;
    font-weight: 700;
    height: 40px;
    justify-content: center;
    margin-left: 8px;
    min-width: 72px;
    padding: 0 14px;
    text-decoration: none;
}

.search-reset-btn:hover {
    background: #f4e8f8;
    color: #4b005d;
}

.marketplace-section .search-reset-btn {
    height: 37px;
}

.search-btn svg {
    height: 20px;
    width: 20px;
}

.marketplace-section .search-btn svg {
    height: 14px;
    width: 14px;
}

.search-btn:hover {
    background-color: var(--search-btn-hover);
}

.search-example {
    font-size: 0.9rem;
    color: var(--secondary-text);
    margin-top: 10px;
}

.marketplace-section .search-example {
    color: #858585;
    font-size: 11px;
    line-height: 1.4;
    margin: 0 auto;
    max-width: 680px;
    text-align: left;
}

.marketplace-section .search-example span {
    color: #8c8c8c;
}

.marketplace-section .select2-container {
    height: 100% !important;
}

.marketplace-section .select2-container--default .select2-selection--single {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    height: 100% !important;
    outline: 0 !important;
}

.marketplace-section .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #111 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 35px !important;
    padding-left: 12px !important;
    padding-right: 34px !important;
    text-align: left !important;
}

.marketplace-section .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #111 !important;
}

.marketplace-section .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 35px !important;
    right: 10px !important;
    top: 0 !important;
    width: 16px !important;
}

.marketplace-section .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border: 0 !important;
    height: 8px !important;
    left: 0 !important;
    margin: 0 !important;
    top: 13px !important;
    width: 8px !important;
}

.marketplace-section .select2-container--default .select2-selection--single .select2-selection__arrow b::before {
    border-bottom: 1.5px solid #111 !important;
    border-right: 1.5px solid #111 !important;
    content: "" !important;
    display: block !important;
    height: 8px !important;
    transform: rotate(45deg) !important;
    width: 8px !important;
}

.marketplace-section .select2-dropdown {
    border-color: #111 !important;
    border-radius: 0 0 6px 6px !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .10) !important;
    overflow: hidden !important;
}

.marketplace-section .select2-container--default .select2-results__option {
    font-size: 12px !important;
    padding: 8px 12px !important;
}

.marketplace-section .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: #4b005d !important;
}

.products-section {
    padding: var(--section-spacing);
}


@media (max-width: 768px) {
    .search-form {
        flex-direction: column;
        gap: 0px;
    }
    .search-dropdown-wrapper,
    .search-input-wrapper {
        width: 100%;
        max-width: 100%;
    }

    .search-btn {
        width: 100%;
        margin-top: 10px;
        justify-content: center;
    }

    .search-reset-btn {
        margin-left: 0;
        margin-top: 8px;
        width: 100%;
    }
}


.section-product-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.section-product-header h2 {
    font-size: 1.5rem;
    font-weight: 600;
}

.view-all-btn {
    background-color: var(--view-all-bg);
    color: #fff;
    padding: 8px 20px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 5px;
}

.view-all-btn:hover {
    background-color: var(--view-all-hover-bg);
    color: var(--text-color-light);
}

@media (max-width: 768px) {
    .view-all-btn {
        padding: 5px 10px;
        font-size: 0.7rem;
    }
}

.materials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    justify-items: center;
}

.material-card {
    width: 250px;
    background-color: #fff;
    border: 1px solid #edf0f4;
    border-radius: 8px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0 0 14px;
    text-align: center;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.material-card:hover {
    border-color: rgba(22, 143, 255, .22);
    box-shadow: 0 14px 32px rgba(15, 23, 42, .12);
    transform: translateY(-5px);
}

.material-image-container {
    width: 100%;
    height: 150px;
    overflow: hidden;
    border-radius: 0;
    margin-bottom: 10px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0 14px;
    background: #f8fafc;
    border-bottom: 1px solid #edf0f4;
    padding: 14px;
}

.material-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.material-card:hover .material-image {
    transform: scale(1.04);
}

.material-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-text);
    line-height: 1.35;
    margin: 0 auto 6px;
    min-height: 42px;
    padding: 0 14px;
}

.material-sold {
    font-size: 0.85rem;
    color: var(--secondary-text);
    margin-bottom: 12px;
    padding: 0 14px;
}

.request-btn {
    display: block;
    width: calc(100% - 28px);
    padding: 9px 10px;
    border: 1px solid var(--button-border);
    border-radius: 5px;
    color: var(--button-text-color);
    text-decoration: none;
    font-weight: 700;
    transition: background-color 0.3s ease, color 0.3s ease;
    margin: auto auto 0;
    text-align: center;
}

.request-btn:hover {
    background-color: var(--button-border);
    color: #fff;
}

.product-grid-item>a,
.product-card {
    background: #fff;
    border: 1px solid #edf0f4;
    border-radius: 8px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .06);
    color: inherit;
    height: 100%;
    overflow: hidden;
    text-decoration: none;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.product-grid-item>a:hover,
.product-card:hover {
    border-color: rgba(22, 143, 255, .22);
    box-shadow: 0 14px 32px rgba(15, 23, 42, .12);
    color: inherit;
    transform: translateY(-4px);
}

.product-grid-item>a>.text-center,
.product-card>a>.text-center {
    align-items: center;
    background: #f8fafc;
    border-bottom: 1px solid #edf0f4;
    display: flex;
    height: 168px;
    justify-content: center;
    padding: 16px;
}

.product-grid-item img,
.product-card img {
    max-height: 100%;
    object-fit: contain;
    transition: transform .25s ease;
}

.product-grid-item>a:hover img,
.product-card:hover img {
    transform: scale(1.04);
}

.product-card-info {
    min-height: 118px;
}

.product-card-info h1 {
    color: #243242;
    font-size: 14px !important;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 10px;
    min-height: 38px;
}

.product-price,
.ember-bold {
    color: #168fff;
    font-weight: 800;
}

.rating-count {
    color: #667085;
    font-size: 12px;
    font-weight: 700;
}

/* Search results page */
.search-results-page {
    background: #f1f1f1;
    min-height: 100vh;
    padding: 28px 0 92px;
}

.search-results-search-row {
    margin-bottom: 16px;
}

.search-results-page .search-bar-container {
    max-width: none;
    margin: 0;
}

.search-results-page .search-form {
    flex-wrap: nowrap;
    justify-content: center;
    margin: 0 0 12px;
    max-width: none;
    width: 100%;
}

.search-results-page .search-dropdown-wrapper {
    background: #fff;
    border-color: #111;
    border-left-width: 1px;
    border-radius: 0;
    border-right-width: 0;
    height: 39px;
    overflow: visible;
    flex: 1 1 0;
    min-width: 0;
    width: auto;
}

.search-results-page .search-dropdown-wrapper:first-child {
    border-radius: 3px 0 0 3px;
}

.search-results-page .search-dropdown-wrapper:nth-child(3) {
    width: auto;
}

.search-results-page .search-btn {
    background: #4b005d;
    border: 1px solid #4b005d;
    border-radius: 0 3px 3px 0;
    font-size: 11px;
    height: 39px;
    min-width: 86px;
    padding: 0 13px;
}

.search-results-page .search-reset-btn {
    border-radius: 3px;
    height: 39px;
}

.search-results-page .search-example {
    color: #858585;
    font-size: 10px;
    margin: 0;
    max-width: none;
    text-align: left;
}

.search-results-page .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #111 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 37px !important;
    padding-left: 12px !important;
    padding-right: 34px !important;
}

.search-results-page .select2-container {
    height: 100% !important;
}

.search-results-page .select2-container--default .select2-selection--single {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    height: 100% !important;
    outline: 0 !important;
}

.search-results-page .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #111 !important;
}

.search-results-page .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 37px !important;
    right: 10px !important;
    top: 0 !important;
    width: 16px !important;
}

.search-results-page .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border: 0 !important;
    height: 8px !important;
    left: 0 !important;
    margin: 0 !important;
    top: 14px !important;
    width: 8px !important;
}

.search-results-page .select2-container--default .select2-selection--single .select2-selection__arrow b::before {
    border-bottom: 1.5px solid #111 !important;
    border-right: 1.5px solid #111 !important;
    content: "" !important;
    display: block !important;
    height: 8px !important;
    transform: rotate(45deg) !important;
    width: 8px !important;
}

.search-results-page .select2-dropdown {
    border-color: #111 !important;
    border-radius: 0 0 4px 4px !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .10) !important;
    overflow: hidden !important;
}

.search-results-page .select2-container--default .select2-results__option {
    font-size: 12px !important;
    padding: 8px 12px !important;
}

.search-results-page .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: #4b005d !important;
}

.search-results-layout {
    display: grid;
    gap: 14px;
    grid-template-columns: 258px minmax(0, 1fr);
    margin: 0;
    max-width: none;
}

.search-sidebar-col {
    min-width: 0;
}

.search-products-col {
    min-width: 0;
}

.search-category-card {
    background: #fff;
    border: 0;
    border-radius: 0 0 12px 12px;
    overflow: hidden;
}

.search-results-page .category-header {
    background: #4b005d;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    height: 34px;
    line-height: 34px;
    padding: 0 14px;
}

.search-results-page .accordion {
    padding: 12px 14px 14px;
}

.search-results-page .accordion-item {
    border: 0;
}

.search-results-page .accordion-button {
    background: #fff;
    border: 0;
    border-bottom: 1px solid #e5e5e5;
    border-radius: 0 !important;
    box-shadow: none;
    color: #202329;
    font-size: 11px;
    font-weight: 700;
    min-height: 42px;
    padding: 0 18px 0 0;
}

.search-results-page .category-link {
    align-items: center;
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
    color: #202329;
    display: flex;
    font-size: 11px;
    font-weight: 700;
    min-height: 42px;
    padding: 0 12px;
    width: 100%;
}

.search-results-page .accordion-item:first-child .accordion-button {
    background: #eeeeee;
    border-radius: 4px !important;
    min-height: 31px;
    padding-left: 12px;
}

.search-results-page .accordion-item:first-child .category-link {
    background: #eeeeee;
    border-radius: 4px !important;
    min-height: 31px;
}

.search-results-page .accordion-button:not(.collapsed) {
    color: #202329;
}

.search-results-page .category-link.active,
.search-results-page .category-link:hover {
    background: #f0f0f0;
    color: #202329;
}

.search-results-page .accordion-button:focus {
    box-shadow: none;
}

.search-results-page .accordion-button::after {
    background-size: 11px;
    height: 11px;
    width: 11px;
}

.search-results-page .accordion-body {
    background: #fafafa;
}

.search-results-page .category-sub-item {
    background: #fafafa;
    border-bottom: 1px solid #e9e9e9;
    display: block;
    font-size: 10px;
    font-weight: 600;
    padding: 9px 12px 9px 18px;
}

.search-results-page .category-sub-item a {
    color: #2f3338;
}

.search-results-page .category-sub-item--nested {
    padding-left: 30px;
}

.search-results-page .category-sub-item.active,
.search-results-page .category-sub-item:hover {
    background: #f0f0f0;
}

.search-results-page .product-header {
    background: #3d72ff;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    height: 34px;
    line-height: 34px;
    margin-bottom: 13px;
    padding: 0 13px;
}

.search-products-panel {
    background: #fff;
    border-radius: 8px;
    padding: 12px 12px 14px;
}

.search-result-grid {
    display: grid;
    gap: 16px 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.search-result-grid .material-card {
    width: 100%;
}


@media (max-width: 768px) {
    .search-results-page {
        padding: 20px 0 60px;
    }

    .search-results-page .search-form {
        max-width: 100%;
    }

    .search-results-page .search-dropdown-wrapper,
    .search-results-page .search-dropdown-wrapper:nth-child(3),
    .search-results-page .search-btn,
    .search-results-page .search-reset-btn {
        width: 100%;
    }

    .search-results-page .search-dropdown-wrapper:first-child,
    .search-results-page .search-dropdown-wrapper,
    .search-results-page .search-btn,
    .search-results-page .search-reset-btn {
        border-left-width: 1px;
        border-right-width: 1px;
        border-radius: 4px;
        margin-bottom: 8px;
    }

    .search-results-page .search-reset-btn {
        margin-left: 0;
    }

    .search-results-layout {
        gap: 18px;
        grid-template-columns: 1fr;
    }

    .search-result-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .materials-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 15px;
    }
    .material-card {
        padding: 10px 0px;
    }
    .material-image-container {
        height: 100px;
    }
    .material-title {
        font-size: 0.9rem;
    }
    .material-sold {
        font-size: 0.75rem;
    }
    .request-btn {
        width: 90%;
        padding: 6px 8px;
        font-size: 0.85rem;
    }

    .search-results-page .search-form {
        flex-direction: column;
        gap: 0;
    }

    .search-results-page .search-dropdown-wrapper,
    .search-results-page .search-input-wrapper {
        max-width: none;
    }
}

/* Welcome page styles */
.arena-welcome {
			--arena-blue: #168fff;
			--arena-accent: #4b0082;
			--arena-ink: #1f2d3d;
			--arena-muted: #7a8794;
			background: #fff;
		}

		.arena-welcome .top-bar+.navbar {
			box-shadow: 0 1px 0 rgba(17, 24, 39, .06);
		}

		.arena-welcome .hero-section {
			min-height: 337px;
			padding: 68px 15px 52px;
		}

		.arena-welcome .hero-section::before {
			filter: saturate(.86) contrast(1.08);
		}

		.arena-welcome .hero-section::after {
			background:
				linear-gradient(90deg, rgba(0, 0, 0, .78), rgba(0, 0, 0, .45) 50%, rgba(0, 0, 0, .72)),
				linear-gradient(180deg, rgba(0, 0, 0, .60), rgba(0, 0, 0, .40) 45%, rgba(0, 0, 0, .78));
		}

		.arena-welcome .hero-content {
			max-width: 900px;
		}

		.arena-welcome .hero-content h1 {
			color: #fff;
			font-size: 36px;
			font-weight: 800;
			line-height: 1.15;
			margin-bottom: 10px;
		}

		.arena-welcome .hero-content p {
			color: rgba(255, 255, 255, .92);
			font-size: 14px;
			line-height: 1.45;
			margin: 0 auto 24px;
			max-width: 430px;
		}

		.arena-welcome .service-cards {
			gap: 12px;
			margin-top: 0;
		}

		.arena-welcome .service-card {
			background: rgba(255, 255, 255, .08);
			border-color: rgba(22, 143, 255, .95) rgba(75, 0, 130, .95) rgba(75, 0, 130, .95) rgba(22, 143, 255, .95);
			border-radius: 8px;
			box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
			flex: 0 1 168px;
			font-size: 12px;
			font-weight: 700;
			line-height: 1.35;
			min-height: 56px;
			padding: 10px 12px;
		}

		.marketplace-section {
			padding: 34px 0 18px;
		}

		.arena-welcome .section-header {
			margin-bottom: 24px;
			text-align: center;
		}

		.arena-welcome .section-header h2,
		.arena-welcome .smart-service-title h2 {
			color: var(--arena-ink);
			font-size: 24px;
			font-weight: 800;
			line-height: 1.25;
			margin: 0 0 8px;
		}

		.arena-welcome .section-header p {
			color: var(--arena-muted);
			font-size: 11px;
			line-height: 1.45;
			max-width: 320px;
		}

		.arena-welcome .search-form {
			flex-wrap: nowrap;
			margin: 0 auto 13px;
			max-width: 680px;
		}

		.arena-welcome .search-dropdown-wrapper {
			height: 37px;
			width: 196px;
		}

		.arena-welcome .search-dropdown {
			color: #111;
			font-size: 11px;
		}

		.arena-welcome .search-btn {
			background: #4b005d;
			border-radius: 0 6px 6px 0;
			font-size: 11px;
			height: 37px;
			padding: 0 13px;
		}

		.arena-welcome .search-example {
			color: #858585;
			font-size: 11px;
		}

		.arena-welcome .products-section {
			padding: 36px 0 10px;
		}

		.arena-welcome .basic-materials-section {
			padding: 8px 0 12px;
		}

		.arena-welcome .section-product-header {
			align-items: center;
			margin-bottom: 8px;
		}

		.arena-welcome .section-product-header h2 {
			color: var(--arena-ink);
			font-size: 17px;
			line-height: 1.25;
			margin: 0;
		}

		.arena-welcome .view-all-btn {
			background: var(--arena-blue);
			border-radius: 999px;
			color: #fff;
			font-size: 11px;
			font-weight: 700;
			gap: 6px;
			padding: 5px 12px;
		}

		.arena-welcome .materials-grid {
			gap: 14px;
			grid-template-columns: repeat(5, minmax(0, 1fr));
			justify-items: stretch;
		}

		.arena-welcome .material-card {
			border-radius: 8px;
			min-height: 0;
			padding: 0 0 14px;
			width: 100%;
		}

		.arena-welcome .material-image-container {
			background: #f8fafc;
			border-radius: 0;
			height: 150px;
			margin: 0 0 14px;
			padding: 14px;
			width: 100%;
		}

		.arena-welcome .material-title {
			color: var(--primary-text);
			font-size: 1rem;
			font-weight: 700;
			line-height: 1.35;
			margin: 0 auto 6px;
			min-height: 42px;
			padding: 0 14px;
		}

		.arena-welcome .material-sold {
			color: var(--secondary-text);
			font-size: 0.85rem;
			margin-bottom: 12px;
			padding: 0 14px;
		}

		.arena-welcome .request-btn {
			border-color: var(--button-border);
			border-radius: 5px;
			color: var(--button-text-color);
			font-size: 1rem;
			line-height: 1.2;
			padding: 9px 10px;
			width: calc(100% - 28px);
		}

		.arena-welcome .request-btn:hover {
			background: var(--button-border);
			border-color: var(--button-border);
			color: #fff;
		}

		.arena-welcome .services-section {
			background: #f3f3f3;
			padding: 58px 0;
		}

		.arena-welcome .services-section h3 {
			color: var(--arena-ink);
			font-size: 22px;
			margin-bottom: 10px;
		}

		.arena-welcome .services-section p,
		.arena-welcome .services-section li {
			font-size: 13px;
			line-height: 1.75;
		}

		.arena-welcome .service-buttons .btn {
			border-radius: 999px;
			font-size: 12px;
			padding: 8px 18px;
		}

		.arena-welcome .services-section img {
			border-radius: 5px;
			max-width: 100%;
		}

		.arena-welcome .smart-services {
			background: #f1f1f1;
			padding: 44px 0 72px !important;
		}

		.arena-welcome .smart-service-title {
			margin-bottom: 46px;
		}

		.arena-welcome .smart-service-title h2 {
			color: #3d3d42;
			font-size: 24px;
			font-weight: 900;
			letter-spacing: 0;
			line-height: 1.35;
			margin: 0;
			white-space: pre-line;
		}

		.arena-welcome .smart-service-title h2::first-line {
			line-height: 1.2;
		}

		.arena-welcome .divider {
			align-items: center;
			display: flex;
			justify-content: center;
			margin-top: 12px;
		}

		.arena-welcome .divider span {
			background: #3d3d42;
			display: block;
			height: 1px;
			width: 108px;
		}

		.arena-welcome .divider i {
			color: #3d3d42;
			font-size: 14px;
			margin: 0 14px;
		}

		.arena-welcome .smart-services-panel {
			background: #fff;
			border-radius: 10px;
			display: grid;
			grid-template-columns: repeat(5, minmax(0, 1fr));
			margin: 0 auto;
			max-width: 950px;
			overflow: hidden;
		}

		.arena-welcome .smart-service-item {
			border-left: 1px solid #e2e2e2;
		}

		.arena-welcome .smart-service-item:first-child {
			border-left: 0;
		}

		.arena-welcome .smart-card {
			background: #fff;
			border-radius: 0;
			min-height: 150px;
			padding: 18px 16px 20px;
			text-align: left;
		}

		.arena-welcome .icon-circle {
			background: #ead7ff;
			border-radius: 50%;
			display: flex;
			height: 46px;
			margin-bottom: 22px;
			width: 46px;
		}

		.arena-welcome .icon-circle img {
			height: 24px;
			object-fit: contain;
			width: 24px;
		}

		.arena-welcome .smart-card h6 {
			color: #1f1f25 !important;
			font-size: 10px;
			font-weight: 900;
			line-height: 1.25;
			margin-bottom: 18px;
		}

		.arena-welcome .smart-card p {
			color: #4f4f55 !important;
			font-size: 10px;
			line-height: 1.45;
		}

		.arena-welcome .join-supplier-section {
			background: #fff !important;
			padding: 48px 0 40px !important;
		}

		.arena-welcome .join-supplier-section .row {
			background: #fff;
			border-radius: 0;
			margin: 0 auto;
			max-width: 950px;
			min-height: 246px;
			padding: 0;
		}

		.arena-welcome .join-us {
			padding-top: 32px;
		}

		.arena-welcome .join-us .section-title {
			color: #35353a;
			font-size: 25px;
			font-weight: 900;
			line-height: 1.1;
			margin-bottom: 24px !important;
			max-width: 360px;
		}

		.arena-welcome .join-us .section-title span,
		.arena-welcome .join-us .section-title u {
			color: #008cff;
			text-decoration: underline;
			text-decoration-thickness: 2px;
			text-underline-offset: 3px;
		}

		.arena-welcome .join-us p {
			color: #222;
			font-size: 11px;
			font-weight: 600;
			line-height: 1.45;
			margin-bottom: 0;
			max-width: 470px;
		}

		.arena-welcome .join-subtitle {
			margin-bottom: 24px !important;
		}

		.arena-welcome .register-button {
			display: flex;
			flex-wrap: wrap;
			gap: 12px;
		}

		.arena-welcome .register-button .btn {
			align-items: center;
			border-radius: 999px;
			display: inline-flex;
			font-size: 9px;
			font-weight: 700;
			gap: 8px;
			height: 31px;
			line-height: 1;
			padding: 0 17px;
		}

		.arena-welcome .join-primary-btn {
			background: #008cff;
			border: 1px solid #008cff;
			color: #fff;
		}

		.arena-welcome .join-outline-btn {
			background: #fff;
			border: 1px solid #008cff;
			color: #008cff;
		}

		.arena-welcome .register-button i {
			font-size: 9px;
		}

		.arena-welcome .join-us-img img {
			max-height: 246px;
			object-fit: contain;
		}

		.arena-app-strip {
			background: #f1f1f1;
			padding: 62px 0 74px;
			text-align: center;
		}

		.arena-app-strip h2 {
			color: #8f00d8;
			font-size: 22px;
			font-weight: 800;
			margin-bottom: 18px;
		}

		.arena-app-strip p {
			color: #111;
			font-size: 11px;
			font-weight: 600;
			line-height: 1.3;
			margin-bottom: 26px;
		}

		.arena-app-buttons {
			display: flex;
			gap: 14px;
			justify-content: center;
		}

		.arena-app-buttons a {
			align-items: center;
			background: #050505;
			border-radius: 5px;
			border: 1px solid rgba(255, 255, 255, .35);
			color: #fff;
			display: inline-flex;
			gap: 9px;
			min-height: 44px;
			min-width: 154px;
			padding: 5px 13px;
			text-align: left;
		}

		.arena-app-buttons i {
			font-size: 25px;
		}

		.arena-app-buttons span {
			display: grid;
			font-size: 19px;
			font-weight: 800;
			line-height: 1.05;
		}

		.arena-app-buttons small {
			color: rgba(255, 255, 255, .78);
			font-size: 8px;
			font-weight: 500;
		}

		@media (max-width: 991px) {
			.arena-welcome .materials-grid {
				grid-template-columns: repeat(3, minmax(0, 1fr));
			}

			.arena-welcome .smart-services-panel {
				grid-template-columns: repeat(2, minmax(0, 1fr));
			}

			.arena-welcome .smart-service-item {
				border-bottom: 1px solid #e2e2e2;
			}

			.arena-welcome .smart-service-item:nth-child(odd) {
				border-left: 0;
			}

			.arena-welcome .join-us {
				padding-top: 0;
			}
		}

		@media (max-width: 767px) {
			.arena-welcome .hero-section {
				min-height: 420px;
				padding: 42px 16px;
			}

			.arena-welcome .hero-content h1 {
				font-size: 28px;
			}

			.arena-welcome .search-form {
				flex-wrap: wrap;
			}

			.arena-welcome .search-dropdown-wrapper,
			.arena-welcome .search-btn {
				border-radius: 3px;
				width: 100%;
			}

			.arena-welcome .materials-grid {
				grid-template-columns: repeat(2, minmax(0, 1fr));
			}

			.arena-welcome .smart-services {
				padding: 38px 0 48px !important;
			}

			.arena-welcome .smart-services-panel {
				grid-template-columns: 1fr;
			}

			.arena-welcome .smart-service-item {
				border-left: 0;
			}

			.arena-welcome .join-supplier-section .row {
				padding: 18px 8px;
			}

			.arena-welcome .join-us {
				text-align: center;
			}

			.arena-welcome .join-us .section-title,
			.arena-welcome .join-us p {
				margin-left: auto;
				margin-right: auto;
			}

			.arena-welcome .register-button {
				justify-content: center;
			}

			.arena-app-buttons {
				align-items: center;
				flex-direction: column;
			}
		}

/* =========================================================================
   Arena home page — 2025 design refresh (source: /html Figma export)
   Scoped entirely under .arena-welcome so no other page is affected.
   ========================================================================= */

.arena-welcome {
	--arena-accent: #C026D3;
	--arena-accent-dark: #A21CAF;
	--arena-ink-deep: #3B0A45;
	--arena-blue: #2F6FED;
	--arena-ink: #14141F;
	--arena-muted: #6B7280;
	--arena-line: #E6E6EC;
	--arena-bg-soft: #F4F4F7;
}

.arena-welcome .search-btn,
.arena-welcome .view-all-btn,
.arena-welcome .request-btn:hover {
	background: var(--arena-blue);
	border-color: var(--arena-blue);
}

.arena-welcome .request-btn {
	border-color: var(--arena-blue);
	color: var(--arena-blue);
}

.arena-welcome .smart-service-title h2 {
	color: var(--arena-ink-deep);
}

.arena-welcome .divider span,
.arena-welcome .divider i {
	background: var(--arena-accent);
	color: var(--arena-accent);
}

.arena-welcome .icon-circle {
	background: #EFEAFE;
}

.arena-welcome .join-primary-btn {
	background: var(--arena-blue);
	border-color: var(--arena-blue);
}

.arena-welcome .join-outline-btn {
	border-color: var(--arena-blue);
	color: var(--arena-blue);
}

.arena-welcome .join-us .section-title span,
.arena-welcome .join-us .section-title u {
	color: var(--arena-blue);
}

.arena-welcome .arena-app-strip h2 {
	color: var(--arena-accent);
}

/* ---- shared section chrome ---- */
.arena-welcome .arena-section {
	padding: 4.5rem 0;
}

.arena-welcome .arena-section.is-soft {
	background: var(--arena-bg-soft);
}

.arena-welcome .arena-section-header {
	margin-bottom: 2.25rem;
}

.arena-welcome .arena-section-header h2 {
	color: var(--arena-ink);
	font-size: 1.9rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	margin-bottom: .5rem;
}

.arena-welcome .arena-section-header p {
	color: var(--arena-muted);
	max-width: 640px;
	margin: 0;
}

.arena-welcome .arena-eyebrow {
	color: var(--arena-accent);
	font-weight: 700;
	font-size: 1.05rem;
	margin-bottom: .35rem;
}

.arena-welcome .text-arena-accent {
	color: var(--arena-accent) !important;
}

.arena-welcome .text-arena-blue {
	color: var(--arena-blue) !important;
}

.arena-welcome .icon-tile {
	width: 46px;
	height: 46px;
	border-radius: 10px;
	background: #EFEAFE;
	color: var(--arena-accent);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.15rem;
	flex-shrink: 0;
}

.arena-welcome .btn-arena-accent {
	background: var(--arena-accent);
	border: 1px solid var(--arena-accent);
	color: #fff;
	font-weight: 600;
	padding: .7rem 1.5rem;
	border-radius: 8px;
	display: inline-block;
}

.arena-welcome .btn-arena-accent:hover {
	background: var(--arena-accent-dark);
	border-color: var(--arena-accent-dark);
	color: #fff;
}

.arena-welcome .btn-arena-outline {
	background: transparent;
	border: 1px solid var(--arena-accent);
	color: var(--arena-accent);
	font-weight: 600;
	padding: .65rem 1.4rem;
	border-radius: 8px;
	display: inline-block;
}

.arena-welcome .btn-arena-outline:hover {
	background: var(--arena-accent);
	color: #fff;
}

.arena-welcome .btn-arena-link {
	color: var(--arena-accent);
	font-weight: 600;
	font-size: .92rem;
	display: inline-block;
	text-decoration: underline;
}

/* ---- hero (headline colour + left-aligned copy + CTA row, matches the approved hero mock) ---- */
.arena-welcome .hero-section {
	text-align: start;
}

.arena-welcome .hero-content {
	margin-inline-start: 0;
	margin-inline-end: auto;
}

.arena-welcome .hero-content h1 {
	color: #4FC3F7;
}

.arena-welcome .hero-content p {
	margin: 0 0 24px;
	max-width: 640px;
}

.arena-welcome .hero-cta-row {
	display: flex;
	gap: .85rem;
	flex-wrap: wrap;
	justify-content: flex-start;
	margin-top: 1.5rem;
}

.arena-welcome .hero-cta-row .btn-arena-accent,
.arena-welcome .hero-cta-row .btn-arena-light {
	font-size: clamp(.82rem, 1.6vw, .92rem);
}

/* ---- hero: fluid, consolidated responsive sizing (overrides the fixed breakpoints above) ---- */
.arena-welcome .hero-section {
	min-height: clamp(280px, 38vw, 420px);
	padding-block: clamp(32px, 6vw, 68px);
}

.arena-welcome .hero-content {
	max-width: min(900px, 100%);
}

.arena-welcome .hero-content h1 {
	font-size: clamp(1.3rem, .95rem + 1.9vw, 2rem);
	line-height: 1.18;
	margin-bottom: .6rem;
}

.arena-welcome .hero-content p {
	font-size: clamp(.82rem, .7rem + .5vw, .95rem);
	line-height: 1.55;
	max-width: min(640px, 100%);
	margin-bottom: 1.25rem;
}

@media (max-width: 480px) {
	.arena-welcome .hero-cta-row {
		flex-direction: column;
		align-items: stretch;
	}

	.arena-welcome .hero-cta-row .btn-arena-accent,
	.arena-welcome .hero-cta-row .btn-arena-light {
		text-align: center;
	}
}

/* ---- mobile nav (offcanvas) — tighter horizontal padding ---- */
#offcanvasMenu {
	transition: transform .4s cubic-bezier(.16, 1, .3, 1) !important;
}

#offcanvasMenu .offcanvas-header {
	padding-inline: .75rem;
}

#offcanvasMenu .offcanvas-body {
	padding-inline: .75rem;
}

#offcanvasMenu .offcanvas-body ul,
#offcanvasMenu .offcanvas-body > a {
	margin-inline: 0;
}

.arena-welcome .btn-arena-light {
	background: #fff;
	border: 1px solid #fff;
	color: var(--arena-ink);
	font-weight: 600;
	padding: .68rem 1.45rem;
	border-radius: 8px;
	display: inline-block;
}

.arena-welcome .btn-arena-light:hover {
	background: #E6E6EC;
	border-color: #E6E6EC;
	color: var(--arena-ink);
}

/* ---- procurement / feature rows ---- */
.arena-welcome .procurement-media {
	position: relative;
	height: 100%;
	min-height: 650px;
	overflow: hidden;
	border-radius: 16px;
	box-shadow: 0 20px 40px rgba(20, 20, 31, .12);
}

.arena-welcome .procurement-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 991px) {
	.arena-welcome .procurement-media {
		min-height: 420px;
	}
}

@media (max-width: 576px) {
	.arena-welcome .procurement-media {
		min-height: 240px;
	}
}

.arena-welcome .feature-row-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .85rem;
	margin: 1.5rem 0;
}

.arena-welcome .feature-row {
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(20, 20, 31, .06);
	padding: .9rem 1.1rem;
	display: flex;
	align-items: center;
	gap: .8rem;
}

.arena-welcome .feature-row span {
	font-weight: 500;
	font-size: .88rem;
	color: var(--arena-ink);
}

.arena-welcome .procurement-cta {
	display: flex;
	gap: .85rem;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 1.5rem;
}

/* ---- how it works ---- */
.arena-welcome .how-it-works-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.5rem;
	text-align: center;
}

.arena-welcome .circle-step {
	width: 78px;
	height: 78px;
	border-radius: 50%;
	background: #F3EFFE;
	color: var(--arena-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.6rem;
	margin: 0 auto 1rem;
}

.arena-welcome .how-it-works-grid h6 {
	color: var(--arena-ink);
	font-weight: 700;
	margin-bottom: .3rem;
}

.arena-welcome .how-it-works-grid p {
	color: var(--arena-muted);
	font-size: .85rem;
	margin: 0;
}

/* ---- marketplace category filter dropdown ---- */
.arena-welcome .category-filter-bar {
	margin-bottom: 2rem;
}

.arena-welcome .category-filter-select-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	max-width: 320px;
	width: 100%;
}

.arena-welcome .category-filter-select-wrap > .fa-filter {
	position: absolute;
	inset-inline-start: 1rem;
	color: var(--arena-accent);
	font-size: .85rem;
	pointer-events: none;
}

.arena-welcome .category-filter-select {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	padding: .75rem 2.5rem;
	border-radius: 50px;
	border: 1px solid var(--arena-line);
	background: #fff;
	color: var(--arena-ink);
	font-size: .88rem;
	font-weight: 600;
	cursor: pointer;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.arena-welcome .category-filter-select:focus {
	outline: none;
	border-color: var(--arena-accent);
	box-shadow: 0 0 0 3px rgba(192, 38, 212, .12);
}

.arena-welcome .category-filter-select-caret {
	position: absolute;
	inset-inline-end: 1.1rem;
	color: var(--arena-muted);
	font-size: .75rem;
	pointer-events: none;
}

.arena-welcome .marketplace-products-empty {
	text-align: center;
	padding: 3rem 0;
	color: var(--arena-muted);
}

/* ---- companies showcase ---- */
.arena-welcome .company-showcase-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 1.25rem;
}

.arena-welcome .company-showcase-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: #fff;
	border: 1px solid rgba(20, 20, 31, .06);
	border-radius: 16px;
	padding: 1.75rem 1.25rem 1.5rem;
	text-decoration: none;
	color: inherit;
	box-shadow: 0 8px 24px rgba(20, 20, 31, .05);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.arena-welcome .company-showcase-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 36px rgba(20, 20, 31, .12);
	border-color: var(--arena-accent, #6c3ce9);
	color: inherit;
}

.arena-welcome .company-showcase-logo {
	width: 84px;
	height: 84px;
	border-radius: 50%;
	overflow: hidden;
	background: #f8fafc;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1rem;
	border: 1px solid rgba(20, 20, 31, .06);
}

.arena-welcome .company-showcase-logo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.arena-welcome .company-showcase-name {
	font-weight: 600;
	font-size: .95rem;
	color: var(--arena-ink);
	line-height: 1.3;
}

.arena-welcome .company-showcase-type {
	margin-top: .35rem;
	font-size: .8rem;
	color: var(--arena-muted);
}

.arena-welcome .company-showcase-rating {
	margin-top: .5rem;
	display: flex;
	align-items: center;
	gap: .2rem;
	font-size: .8rem;
	color: #f5a623;
}

.arena-welcome .company-showcase-rating .far.fa-star {
	color: #ccc;
}

.arena-welcome .company-showcase-rating-val {
	font-size: .75rem;
	color: var(--arena-muted);
	margin-left: .25rem;
}

@media (max-width: 991px) {
	.arena-welcome .company-showcase-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 575px) {
	.arena-welcome .company-showcase-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---- project services ---- */
.arena-welcome .project-services-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
}

.arena-welcome .project-service-card {
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 8px 24px rgba(20, 20, 31, .06);
	padding: 1.6rem;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.arena-welcome .request-service-btn {
	margin-top: auto;
	align-self: flex-start;
}

.arena-welcome .project-service-card p,
.arena-welcome .project-service-card ul {
	margin-bottom: 0;
}

.arena-welcome .project-service-card h5 {
	color: var(--arena-ink);
	font-size: 1.05rem;
	font-weight: 700;
	margin-bottom: .5rem;
}

.arena-welcome .project-service-card p {
	color: var(--arena-muted);
	font-size: .85rem;
}

.arena-welcome .project-service-card .included-label {
	font-weight: 600;
	font-size: .82rem;
	color: var(--arena-ink);
	border-bottom: 1px solid var(--arena-line);
	padding-bottom: .5rem;
	margin-bottom: .5rem;
	display: block;
}

.arena-welcome .project-service-card ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.arena-welcome .project-service-card ul li {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	font-size: .82rem;
	color: var(--arena-muted);
	padding: .25rem 0;
}

.arena-welcome .project-service-card ul li i {
	color: var(--arena-accent);
	font-size: .45rem;
	margin-top: .5rem;
	flex-shrink: 0;
}

/* ---- digital ecosystem integration ---- */
.arena-welcome .integration-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
}

.arena-welcome .integration-card {
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 8px 24px rgba(20, 20, 31, .06);
	padding: 1.5rem;
	height: 100%;
}

.arena-welcome .integration-card h6 {
	color: var(--arena-ink);
	font-weight: 700;
	margin-bottom: .4rem;
}

.arena-welcome .integration-card p {
	color: var(--arena-muted);
	font-size: .85rem;
	margin: 0;
}

/* ---- why arena / target industries ---- */
.arena-welcome .why-row-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .85rem;
}

.arena-welcome .why-row {
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(20, 20, 31, .06);
	padding: .9rem 1.1rem;
	display: flex;
	align-items: flex-start;
	gap: .8rem;
	height: 100%;
}

.arena-welcome .why-row span {
	font-weight: 500;
	font-size: .88rem;
	color: var(--arena-ink);
}

.arena-welcome .why-arena-media img,
.arena-welcome .target-industries-media img {
	width: 100%;
	border-radius: 16px;
	box-shadow: 0 20px 40px rgba(20, 20, 31, .12);
}

.arena-welcome .industry-check-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.arena-welcome .industry-check {
	display: flex;
	align-items: center;
	gap: .6rem;
	font-size: .9rem;
	color: var(--arena-ink);
	padding: .4rem 0;
}

.arena-welcome .industry-check i {
	color: var(--arena-blue);
}

/* ---- join the platform CTA banner ---- */
.arena-welcome .join-platform-cta {
	background: var(--arena-ink);
	border-radius: 18px;
	padding: 3.25rem 2rem;
	text-align: center;
	color: #fff;
}

.arena-welcome .join-platform-cta h2 {
	color: #fff;
	font-weight: 800;
	margin-bottom: .9rem;
}

.arena-welcome .join-platform-cta p {
	color: rgba(255, 255, 255, .72);
	max-width: 760px;
	margin: 0 auto 1.75rem;
	font-size: .92rem;
}

.arena-welcome .btn-arena-cta {
	background: var(--arena-blue);
	border: 1px solid var(--arena-blue);
	color: #fff;
	font-weight: 600;
	border-radius: 40px;
	padding: .7rem 1.75rem;
	display: inline-block;
}

.arena-welcome .btn-arena-cta:hover {
	background: #244fb0;
	border-color: #244fb0;
	color: #fff;
}

/* ---- join as supplier bubble ---- */
.arena-welcome .join-bubble {
	position: relative;
	width: 260px;
	height: 260px;
	margin: 0 auto;
}

.arena-welcome .join-bubble .b1,
.arena-welcome .join-bubble .b2,
.arena-welcome .join-bubble .b3 {
	position: absolute;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 700;
}

.arena-welcome .join-bubble .b1 {
	width: 170px;
	height: 170px;
	background: #F26B3A;
	top: 0;
	inset-inline-start: 0;
	font-size: 1.6rem;
}

.arena-welcome .join-bubble .b2 {
	width: 90px;
	height: 90px;
	background: #9CA3D4;
	top: 10px;
	inset-inline-end: 0;
}

.arena-welcome .join-bubble .b3 {
	width: 130px;
	height: 130px;
	background: var(--arena-blue);
	bottom: 0;
	inset-inline-end: 20px;
	font-size: 1.3rem;
}

/* ---- responsive ---- */
@media (max-width: 991px) {
	.arena-welcome .feature-row-grid,
	.arena-welcome .why-row-grid {
		grid-template-columns: 1fr;
	}

	.arena-welcome .how-it-works-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.75rem;
	}

	.arena-welcome .project-services-grid,
	.arena-welcome .integration-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 575px) {
	.arena-welcome .how-it-works-grid,
	.arena-welcome .project-services-grid,
	.arena-welcome .integration-grid,
	.arena-welcome .industry-check-grid {
		grid-template-columns: 1fr;
	}

	.arena-welcome .arena-section {
		padding: 3rem 0;
	}
}

/* ---- RTL ---- */
[dir="rtl"] .arena-welcome .project-service-card .included-label,
.rtl .arena-welcome .project-service-card .included-label {
	border-bottom-color: var(--arena-line);
}

[dir="rtl"] .arena-welcome .arena-eyebrow,
[dir="rtl"] .arena-welcome .arena-section-header,
.rtl .arena-welcome .arena-eyebrow,
.rtl .arena-welcome .arena-section-header {
	text-align: right;
}

/* =========================================================================
   Submit Requirements — inner-page banner, step tiles, and form system
   ========================================================================= */

.arena-welcome .page-banner {
	position: relative;
	height: 260px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #fff;
	box-shadow: inset 0 -50px 70px -20px rgba(0, 0, 0, .4);
}

.arena-welcome .page-banner::before {
	content: '';
	position: absolute;
	inset: -20px;
	background: url('/spincu/images/page_banner.jpg') center/cover no-repeat;
	filter: blur(14px) brightness(.6) saturate(120%);
	transform: scale(1.1);
	z-index: 0;
}

.arena-welcome .page-banner::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, rgba(75, 0, 130, .55), rgba(20, 5, 40, .4) 50%, rgba(106, 27, 179, .35));
	z-index: 0;
}

.arena-welcome .page-banner-glass {
	position: relative;
	z-index: 1;
}

.arena-welcome .page-banner h1 {
	color: #fff;
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	margin-bottom: .4rem;
}

.arena-welcome .page-banner .crumb {
	color: rgba(255, 255, 255, .78);
	font-size: .85rem;
}

.arena-welcome .page-banner .crumb a {
	color: rgba(255, 255, 255, .7);
}

.arena-welcome .page-banner .crumb a:hover {
	color: #fff;
}

.arena-welcome .step-tile {
	background: #F3EFFE;
	border-radius: 12px;
	padding: 1.6rem;
	height: 100%;
}

.arena-welcome .step-tile h6 {
	font-weight: 700;
	margin: .9rem 0 .4rem;
	color: var(--arena-ink);
}

.arena-welcome .step-tile p {
	font-size: .87rem;
	margin: 0;
	color: var(--arena-muted);
}

/* ---- form shell ---- */
.arena-welcome .form-shell {
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 8px 24px rgba(20, 20, 31, .06);
	padding: 2.5rem;
}

.arena-welcome .badge-soft {
	background: #EFEAFE;
	color: var(--arena-accent);
	border-radius: 40px;
	padding: .35rem .9rem;
	font-size: .78rem;
	font-weight: 600;
	display: inline-block;
}

.arena-welcome .form-section-title {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin: 2rem 0 1rem;
}

.arena-welcome .form-section-title .step-num {
	background: var(--arena-accent);
	color: #fff;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: .9rem;
	flex-shrink: 0;
}

.arena-welcome .form-section-title h5 {
	margin: 0;
	font-size: 1.05rem;
	color: var(--arena-ink);
}

.arena-welcome .form-section-title small {
	display: block;
	color: var(--arena-muted);
	font-size: .8rem;
}

.arena-welcome .form-subblock {
	border: 1px solid var(--arena-line);
	border-radius: 12px;
	padding: 1.5rem;
	margin-bottom: 1.25rem;
}

.arena-welcome .form-subblock .sub-title {
	font-weight: 600;
	font-size: .92rem;
	margin-bottom: 1rem;
	display: flex;
	align-items: center;
	gap: .5rem;
	color: var(--arena-ink);
}

.arena-welcome .form-subblock .sub-title::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--arena-accent);
	display: inline-block;
	flex-shrink: 0;
}

.arena-welcome .form-label-sm {
	font-size: .78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--arena-ink);
	margin-bottom: .3rem;
	display: block;
}

.arena-welcome .form-label-sm .req {
	color: #E14A4A;
}

.arena-welcome .form-control,
.arena-welcome .form-select {
	border: 1px solid var(--arena-line);
	border-radius: 8px;
	font-size: .9rem;
	padding: .6rem 2.25rem .6rem .8rem;
	background-position: right 0.75rem center;
}

[dir="rtl"] .arena-welcome .form-select,
.arena-welcome [dir="rtl"] .form-select {
	padding-inline-start: 2.25rem;
	padding-inline-end: .8rem;
	background-position: right 0.75rem center;
	text-align: right;
}

[dir="rtl"] .arena-welcome .form-check,
.arena-welcome [dir="rtl"] .form-check {
	padding-left: 0;
	padding-right: 1.5em;
}

[dir="rtl"] .arena-welcome .form-check .form-check-input,
.arena-welcome [dir="rtl"] .form-check .form-check-input {
	float: right;
	margin-left: 0;
	margin-right: -1.5em;
}

.arena-welcome .form-control:focus,
.arena-welcome .form-select:focus {
	border-color: var(--arena-accent);
	box-shadow: 0 0 0 .2rem rgba(192, 38, 211, .12);
}

.arena-welcome .stage-pill {
	border: 1px solid var(--arena-line);
	border-radius: 10px;
	padding: .9rem .5rem;
	text-align: center;
	font-size: .82rem;
	font-weight: 500;
	cursor: pointer;
	color: var(--arena-ink);
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.arena-welcome .stage-pill.is-selected {
	border-color: var(--arena-accent);
	background: #F3EFFE;
	color: var(--arena-accent);
	font-weight: 700;
}

.arena-welcome .radio-card {
	border: 1px solid var(--arena-line);
	border-radius: 10px;
	padding: .75rem 1rem;
	font-size: .88rem;
	display: flex;
	align-items: center;
	gap: .6rem;
	height: 100%;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}

.arena-welcome .radio-card.is-selected {
	border-color: var(--arena-accent);
	background: #F3EFFE;
}

.arena-welcome .radio-card .urgent {
	color: #E14A4A;
	font-weight: 600;
}

.arena-welcome .check-item {
	display: flex;
	align-items: center;
	gap: .55rem;
	font-size: .88rem;
	padding: .35rem 0;
}

.arena-welcome .upload-box {
	border: 2px dashed var(--arena-line);
	border-radius: 12px;
	padding: 2.5rem 1rem;
	text-align: center;
}

.arena-welcome .upload-box .icon-tile {
	margin: 0 auto 1rem;
}

.arena-welcome .attachment-upload-tile {
	border: 1px solid var(--arena-line);
	border-radius: 12px;
	padding: 1rem;
	height: 100%;
	transition: transform .3s var(--ease-smooth, ease), box-shadow .3s var(--ease-smooth, ease), border-color .3s ease;
}

.arena-welcome .attachment-upload-tile:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 20px -8px rgba(75, 0, 130, .18);
	border-color: var(--arena-accent);
}

.arena-welcome .attachment-upload-tile .icon-tile {
	width: 36px;
	height: 36px;
	font-size: .85rem;
	flex-shrink: 0;
}

.arena-welcome .req-table th {
	font-size: .72rem;
	text-transform: uppercase;
	color: var(--arena-muted);
	font-weight: 600;
	border-bottom: 1px solid var(--arena-line);
	padding-bottom: .6rem;
	white-space: nowrap;
}

.arena-welcome .req-table td {
	padding: .5rem .4rem;
}

.arena-welcome .req-table input {
	font-size: .82rem;
}

@media (max-width: 767px) {
	.arena-welcome .form-shell {
		padding: 1.5rem;
	}
}

/* =========================================================================
   About Us — institutional panels (hero-panel, pillars, workflow, objectives, values)
   ========================================================================= */

.arena-welcome .badge-soft-outline {
	border: 1px solid var(--arena-line);
	color: var(--arena-muted);
	border-radius: 40px;
	padding: .35rem .9rem;
	font-size: .78rem;
	font-weight: 500;
	display: inline-block;
}

.arena-welcome .hero-panel {
	background: linear-gradient(120deg, #F3EFFE, #EFF3FE);
	border-radius: 18px;
	padding: 2.5rem;
}

.arena-welcome .info-panel-dark {
	background: #EDE9FE;
	border-radius: 12px;
	padding: 1.75rem;
	height: 100%;
}

.arena-welcome .node-chip {
	background: #fff;
	border: 1px solid var(--arena-line);
	border-radius: 8px;
	padding: .5rem .9rem;
	font-size: .82rem;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
}

.arena-welcome .pillar-card {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(20, 20, 31, .06);
	padding: 1.5rem;
	height: 100%;
}

.arena-welcome .pillar-card h6 {
	font-weight: 700;
	margin: .9rem 0 .4rem;
	font-size: .98rem;
	color: var(--arena-ink);
}

.arena-welcome .pillar-card p {
	font-size: .85rem;
	margin: 0;
	color: var(--arena-muted);
}

.arena-welcome .workflow-card {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(20, 20, 31, .06);
	padding: 1.3rem;
	height: 100%;
	position: relative;
}

.arena-welcome .workflow-card .num {
	display: inline-block;
	font-size: .75rem;
	font-weight: 700;
	color: var(--arena-accent);
	margin-bottom: .5rem;
}

.arena-welcome .workflow-card h6 {
	font-weight: 700;
	font-size: .92rem;
	margin-bottom: .3rem;
	color: var(--arena-ink);
}

.arena-welcome .workflow-card p {
	font-size: .8rem;
	margin: 0;
	color: var(--arena-muted);
}

.arena-welcome .workflow-card.is-active {
	background: var(--arena-accent);
	color: #fff;
}

.arena-welcome .workflow-card.is-active .num,
.arena-welcome .workflow-card.is-active h6 {
	color: #fff;
}

.arena-welcome .workflow-card.is-active p {
	color: rgba(255, 255, 255, .8);
}

.arena-welcome .objective-card {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(20, 20, 31, .06);
	padding: 1.4rem;
	height: 100%;
}

.arena-welcome .objective-card .num-badge {
	font-size: .7rem;
	font-weight: 700;
	color: var(--arena-muted);
}

.arena-welcome .objective-card p {
	font-size: .88rem;
	margin: .5rem 0 0;
	color: var(--arena-ink);
	font-weight: 500;
}

.arena-welcome .value-tile {
	text-align: center;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(20, 20, 31, .06);
	padding: 1.5rem 1rem;
	height: 100%;
	transition: transform .2s ease, box-shadow .2s ease;
}

.arena-welcome .value-tile:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 32px rgba(20, 20, 31, .12);
}

.arena-welcome .value-tile .icon-tile {
	margin: 0 auto 1rem;
}

.arena-welcome .value-tile h6 {
	font-weight: 700;
	font-size: .95rem;
	margin-bottom: .3rem;
	color: var(--arena-ink);
}

.arena-welcome .value-tile p {
	font-size: .82rem;
	margin: 0;
	color: var(--arena-muted);
}

/* =========================================================================
   Marketplace / product listing page (filter-products.blade.php)
   Restyle only — Vue bindings/markup untouched, purely visual.
   ========================================================================= */

.arena-welcome .filter-container {
	display: flex;
	align-items: flex-start;
	gap: 1.5rem;
}

.arena-welcome .product-filters {
	width: 280px;
	flex-shrink: 0;
}

.arena-welcome .product-filters .card {
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 8px 24px rgba(20, 20, 31, .06);
}

.arena-welcome .filter-category h6,
.arena-welcome .product-filters h6 {
	color: var(--arena-ink);
	font-weight: 700;
	font-size: .82rem;
	letter-spacing: .03em;
	margin-bottom: .9rem;
	padding-bottom: .6rem;
	border-bottom: 1px solid var(--arena-line);
}

.arena-welcome .product-filters .form-check {
	margin-bottom: .5rem;
}

.arena-welcome .product-filters .form-check-label {
	color: var(--arena-muted);
	font-size: .8rem;
	font-weight: 500;
}

.arena-welcome .product-filters .form-check-input:checked {
	background-color: var(--arena-accent);
	border-color: var(--arena-accent);
}

.arena-welcome .product-filters .form-control {
	border: 1px solid var(--arena-line);
	border-radius: 8px;
	font-size: .85rem;
}

.arena-welcome .product-filters .btn-primary {
	background: var(--arena-accent);
	border-color: var(--arena-accent);
	font-size: .85rem;
}

.arena-welcome .product-filters .btn-primary:hover {
	background: var(--arena-accent-dark);
	border-color: var(--arena-accent-dark);
}

.arena-welcome .filtered-products {
	flex: 1;
	min-width: 0;
}

.arena-welcome .filtered-products > .d-flex.justify-content-between {
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(20, 20, 31, .06);
}

.arena-welcome .filtered-products h5 {
	color: var(--arena-ink);
	font-weight: 800;
	font-size: 1.1rem;
	margin-bottom: .2rem;
}

.arena-welcome .filtered-products small {
	color: var(--arena-muted);
}

.arena-welcome .filtered-products .form-select {
	border: 1px solid var(--arena-line);
	border-radius: 8px;
	font-size: .85rem;
}

.arena-welcome .active-filters span:first-child {
	color: var(--arena-muted);
	font-size: .82rem;
	font-weight: 600;
	margin-inline-end: .4rem;
}

.arena-welcome .filtered-by-box {
	background: #F3EFFE !important;
	border: 1px solid var(--arena-line) !important;
	border-radius: 999px !important;
	font-size: .78rem;
	color: var(--arena-accent);
	margin: 4px !important;
}

.arena-welcome .filtered-by-box span:first-child {
	font-weight: 600;
}

.arena-welcome .filtered-by-box span:last-child {
	border-inline-start: 1px solid var(--arena-line) !important;
	border-left: 0 !important;
}

.arena-welcome .product-grid-container {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
}

.arena-welcome .product-grid-item {
	height: 100%;
}

.arena-welcome .product-price,
.arena-welcome .ember-bold {
	color: var(--arena-accent) !important;
}

.arena-welcome #load_more .btn {
	background: var(--arena-accent);
	border-color: var(--arena-accent);
	border-radius: 999px;
	padding: .55rem 1.75rem;
	font-weight: 600;
}

.arena-welcome #load_more .btn:hover {
	background: var(--arena-accent-dark);
	border-color: var(--arena-accent-dark);
}

@media (max-width: 991px) {
	.arena-welcome .filter-container {
		flex-direction: column;
		align-items: stretch;
	}

	.arena-welcome .product-filters {
		width: 100%;
	}

	.arena-welcome .filtered-products {
		width: 100%;
	}

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

/* Phone: 2 per row (tablet keeps 3 from the 991px rule above) */
@media (max-width: 575px) {
	.arena-welcome .product-grid-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* =========================================================================
   Mobile nav (offcanvas) — polish pass
   ========================================================================= */

#offcanvasMenu .offcanvas-header {
	border-bottom: 1px solid #EFEFF2;
	padding-block: .85rem;
	justify-content: space-between;
}

#offcanvasMenu .offcanvas-logo {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 0.5rem;
	margin: 0;
}

#offcanvasMenu .offcanvas-logo img {
	height: 32px;
	width: auto;
	object-fit: contain;
}

#offcanvasMenu .offcanvas-header .btn-close {
	opacity: .55;
	transition: opacity .15s ease;
	margin: 0;
}

#offcanvasMenu .offcanvas-header .btn-close:hover {
	opacity: 1;
}

#offcanvasMenu .offcanvas-body {
	display: flex;
	flex-direction: column;
	padding-block: 1.1rem 1.25rem;
}

#offcanvasMenu .offcanvas-body ul {
	margin: 0;
}

#offcanvasMenu .offcanvas-body ul li a {
	position: relative;
	display: block;
	color: #1F2937;
	font-size: 1.02rem;
	font-weight: 600;
	padding: .7rem .6rem .7rem .95rem;
	border-radius: 10px;
	text-decoration: none;
	overflow: hidden;
	transition: background-color .3s cubic-bezier(.4, 0, .2, 1),
		color .3s cubic-bezier(.4, 0, .2, 1),
		padding-inline-start .3s cubic-bezier(.4, 0, .2, 1);
}

#offcanvasMenu .offcanvas-body ul li a::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: .35rem;
	bottom: .35rem;
	width: 4px;
	border-radius: 4px;
	background: #4B0082;
	transform: scaleY(0);
	transition: transform .3s cubic-bezier(.4, 0, .2, 1);
	transform-origin: center;
}

#offcanvasMenu .offcanvas-body ul li a::after {
	content: "\2192";
	position: absolute;
	inset-inline-end: .75rem;
	top: 50%;
	transform: translate(6px, -50%);
	opacity: 0;
	color: #4B0082;
	transition: transform .3s cubic-bezier(.4, 0, .2, 1), opacity .3s ease;
}

#offcanvasMenu .offcanvas-body ul li a:hover,
#offcanvasMenu .offcanvas-body ul li a:active,
#offcanvasMenu .offcanvas-body ul li a:focus-visible {
	background: linear-gradient(90deg, #F3EFFE, rgba(243, 239, 254, .35));
	color: #4B0082;
	padding-inline-start: 1.25rem;
}

#offcanvasMenu .offcanvas-body ul li a:hover::before,
#offcanvasMenu .offcanvas-body ul li a:active::before,
#offcanvasMenu .offcanvas-body ul li a:focus-visible::before {
	transform: scaleY(1);
}

#offcanvasMenu .offcanvas-body ul li a:hover::after,
#offcanvasMenu .offcanvas-body ul li a:active::after,
#offcanvasMenu .offcanvas-body ul li a:focus-visible::after {
	opacity: 1;
	transform: translate(0, -50%);
}

#offcanvasMenu .offcanvas-body ul li + li {
	margin-top: 2px;
}

/* entrance: staggered fade/slide-in each time the menu opens */
#offcanvasMenu .offcanvas-body ul li {
	opacity: 0;
	transform: translateX(-12px);
}

.offcanvas.show#offcanvasMenu .offcanvas-body ul li,
.offcanvas.showing#offcanvasMenu .offcanvas-body ul li {
	animation: arenaMenuItemIn .45s cubic-bezier(.16, 1, .3, 1) forwards;
}

.offcanvas.show#offcanvasMenu .offcanvas-body ul li:nth-child(1) { animation-delay: .05s; }
.offcanvas.show#offcanvasMenu .offcanvas-body ul li:nth-child(2) { animation-delay: .09s; }
.offcanvas.show#offcanvasMenu .offcanvas-body ul li:nth-child(3) { animation-delay: .13s; }
.offcanvas.show#offcanvasMenu .offcanvas-body ul li:nth-child(4) { animation-delay: .17s; }
.offcanvas.show#offcanvasMenu .offcanvas-body ul li:nth-child(5) { animation-delay: .21s; }
.offcanvas.show#offcanvasMenu .offcanvas-body ul li:nth-child(6) { animation-delay: .25s; }
.offcanvas.show#offcanvasMenu .offcanvas-body ul li:nth-child(n+7) { animation-delay: .29s; }

@keyframes arenaMenuItemIn {
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	#offcanvasMenu .offcanvas-body ul li {
		opacity: 1;
		transform: none;
		animation: none !important;
	}
}

#offcanvasMenu .offcanvas-body ul li hr {
	margin: .9rem .25rem 1rem;
	border: 0;
	border-top: 1px solid #EFEFF2;
	opacity: 1;
}

#offcanvasMenu .offcanvas-body ul li strong {
	display: block;
	padding: 0 .6rem;
	font-size: .72rem !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: #9AA3AF !important;
}

#offcanvasMenu .offcanvas-body ul li a.ps-3 {
	font-size: .95rem;
	font-weight: 500;
	padding-inline-start: 1.6rem !important;
}

#offcanvasMenu .offcanvas-body ul li a.ps-3:hover,
#offcanvasMenu .offcanvas-body ul li a.ps-3:active {
	padding-inline-start: 1.85rem !important;
}

#offcanvasMenu .offcanvas-body > a.btn {
	margin-top: 1.25rem !important;
	border-radius: 999px;
	padding: .75rem 1rem;
	font-weight: 700;
	letter-spacing: .02em;
	box-shadow: 0 8px 20px rgba(75, 0, 130, .25);
}

/* =========================================================================
   Page-load entrance animations — pure CSS (no JS, no scroll trigger).
   Plays once automatically when the page renders/refreshes, so content is
   guaranteed to end up fully visible with no dependency on any event firing.
   ========================================================================= */

@keyframes arenaSlideInLeft {
	from {
		opacity: 0;
		transform: translateX(-48px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes arenaSlideInRight {
	from {
		opacity: 0;
		transform: translateX(48px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes arenaFadeUp {
	from {
		opacity: 0;
		transform: translateY(22px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.arena-anim-left {
	animation: arenaSlideInLeft .75s cubic-bezier(.16, 1, .3, 1) both;
}

.arena-anim-right {
	animation: arenaSlideInRight .75s cubic-bezier(.16, 1, .3, 1) both;
}

.arena-anim-up {
	animation: arenaFadeUp .6s cubic-bezier(.16, 1, .3, 1) both;
}

/* staggered grids — each direct child fades up with an increasing delay */
.arena-anim-grid > * {
	animation: arenaFadeUp .6s cubic-bezier(.16, 1, .3, 1) both;
}

.arena-anim-grid > *:nth-child(1) { animation-delay: .05s; }
.arena-anim-grid > *:nth-child(2) { animation-delay: .1s; }
.arena-anim-grid > *:nth-child(3) { animation-delay: .15s; }
.arena-anim-grid > *:nth-child(4) { animation-delay: .2s; }
.arena-anim-grid > *:nth-child(5) { animation-delay: .25s; }
.arena-anim-grid > *:nth-child(6) { animation-delay: .3s; }
.arena-anim-grid > *:nth-child(7) { animation-delay: .35s; }
.arena-anim-grid > *:nth-child(8) { animation-delay: .4s; }
.arena-anim-grid > *:nth-child(9) { animation-delay: .45s; }
.arena-anim-grid > *:nth-child(10) { animation-delay: .5s; }
.arena-anim-grid > *:nth-child(11) { animation-delay: .55s; }
.arena-anim-grid > *:nth-child(n+12) { animation-delay: .6s; }

@media (prefers-reduced-motion: reduce) {
	.arena-anim-left,
	.arena-anim-right,
	.arena-anim-up,
	.arena-anim-grid > * {
		animation: none;
	}
}

/* =========================================================================
   Sticky site header (top-bar + navbar stick together as one unit)
   ========================================================================= */

.site-header-sticky {
	position: sticky;
	top: 0;
	z-index: 1030;
	box-shadow: 0 2px 4px rgba(20, 20, 31, .06), 0 12px 24px -10px rgba(75, 0, 130, .18),
		0 28px 46px -20px rgba(75, 0, 130, .22);
}

/* =========================================================================
   Header — elevated "3D" depth pass. No layout/color changes — only
   shadows, raised buttons and smooth hover motion.
   ========================================================================= */

.navbar .logo img {
	transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}

.navbar .logo img:hover {
	transform: scale(1.04);
}

.navbar .main-menu a {
	position: relative;
	padding-bottom: 4px;
}

.navbar .main-menu a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 2px;
	background: var(--primary-color);
	transition: width .3s cubic-bezier(.22, 1, .36, 1);
}

.navbar .main-menu a:hover::after {
	width: 100%;
}

.add-product-btn {
	display: inline-block;
	box-shadow: 0 2px 4px rgba(75, 0, 130, .25), 0 10px 20px -8px rgba(75, 0, 130, .45);
	transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s cubic-bezier(.22, 1, .36, 1),
		background-color .3s ease;
}

.add-product-btn:hover {
	transform: translateY(-3px) scale(1.03);
	box-shadow: 0 4px 8px rgba(75, 0, 130, .3), 0 16px 28px -8px rgba(75, 0, 130, .5);
}

.add-product-btn:active {
	transform: translateY(-1px) scale(1.01);
	transition-duration: .12s;
}

.mobile-menu-icon {
	transition: transform .3s cubic-bezier(.22, 1, .36, 1), color .2s ease;
}

.mobile-menu-icon:hover {
	transform: scale(1.12);
	color: var(--primary-color);
}

.top-bar .top-menu .dropdown-content {
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, .18), 0 20px 32px -10px rgba(0, 0, 0, .3);
	opacity: 0;
	transform: translateY(-6px);
	visibility: hidden;
	transition: opacity .25s cubic-bezier(.22, 1, .36, 1), transform .25s cubic-bezier(.22, 1, .36, 1),
		visibility .25s;
	overflow: hidden;
}

.top-bar .top-menu .dropdown-toggle:hover + .dropdown-content,
.top-bar .top-menu .dropdown-content:hover {
	display: block;
	opacity: 1;
	transform: translateY(0);
	visibility: visible;
}

.top-bar .top-menu .dropdown-content a {
	transition: background-color .2s ease, padding-left .2s ease;
}

@media (prefers-reduced-motion: reduce) {

	.navbar .logo img,
	.navbar .main-menu a::after,
	.add-product-btn,
	.mobile-menu-icon,
	.top-bar .top-menu .dropdown-content,
	.top-bar .top-menu .dropdown-content a {
		transition: none;
	}
}

/* =========================================================================
   Top navigation — modern refresh pass (top-bar + navbar)
   ========================================================================= */

.top-bar {
	background: linear-gradient(120deg, var(--primary-color) 0%, #6a0fb0 55%, #7c1fc9 100%);
	padding: 10px 0;
}

.top-bar .top-menu {
	gap: 6px;
}

.top-bar .top-menu .dropdown {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.top-bar .top-menu a {
	padding: 5px 10px;
	border-radius: 999px;
	transition: background-color .2s ease, color .2s ease;
}

.top-bar .top-menu > .dropdown > .dropdown-toggle:hover,
.top-bar .top-menu > a.top-register-btn:not(:hover) {
	background-color: transparent;
}

.top-bar .top-menu .dropdown-toggle:hover {
	background-color: rgba(255, 255, 255, .14);
}

.top-bar .top-menu a img {
	border-radius: 3px;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .35);
}

.top-bar .top-menu .custom-arrow {
	font-size: 10px;
	margin-left: 6px;
	opacity: .85;
	transition: transform .2s ease;
}

.top-bar .top-menu .user-toggle {
	gap: 8px;
}

.top-bar .top-menu .user-avatar {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, .5) !important;
}

.top-bar .top-menu .user-name {
	max-width: 120px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.top-bar .top-menu .user-dropdown .dropdown-content a {
	display: flex;
	align-items: center;
	gap: 8px;
}

.top-bar .top-menu .dropdown:hover .custom-arrow i {
	transform: rotate(180deg);
	display: inline-block;
}

.top-bar .top-menu .top-register-btn {
	margin-inline-start: 6px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

.navbar {
	background-color: #fff;
	border-bottom: 1px solid rgba(20, 20, 31, .06);
}

.navbar .logo img {
	height: 46px;
}

.navbar .main-menu {
	gap: 30px;
}

.navbar .main-menu a {
	font-weight: 600;
	font-size: 15px;
	color: #2b2b38;
	letter-spacing: .1px;
}

.navbar .main-menu a:hover {
	color: var(--primary-color);
}

.add-product-btn {
	border-radius: 999px;
	padding: 11px 24px;
	background: linear-gradient(120deg, var(--primary-color), #7c1fc9);
	font-size: 14.5px;
}

.cart-icon-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin-inline-start: 14px;
	border-radius: 50%;
	background: rgba(75, 0, 130, .06);
	color: var(--primary-color);
	font-size: 17px;
	text-decoration: none;
	transition: background-color .2s ease, transform .2s ease;
}

.cart-icon-link:hover {
	background: rgba(75, 0, 130, .12);
	color: var(--primary-color);
	transform: translateY(-1px);
}

.cart-icon-badge {
	position: absolute;
	top: -4px;
	inset-inline-end: -4px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 999px;
	background: linear-gradient(120deg, var(--primary-color), #7c1fc9);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	box-shadow: 0 2px 6px rgba(75, 0, 130, .35);
}

.mobile-menu-icon {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	line-height: 38px;
	text-align: center;
}

@media (max-width: 992px) {
	.mobile-menu-icon {
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

.mobile-menu-icon:hover {
	background: rgba(75, 0, 130, .08);
}

@media (max-width: 992px) {
	.top-bar .top-menu {
		flex-wrap: wrap;
		justify-content: flex-end;
		row-gap: 8px;
	}
}

/* =========================================================================
   Auth pages (Login / Register) — split-screen visual refresh
   Scoped under .arena-welcome .auth-page
   ========================================================================= */

.arena-welcome .auth-page {
	padding: 3.5rem 0;
}

.arena-welcome .auth-shell {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	max-width: 980px;
	margin: 0 auto;
	background: #fff;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(20, 20, 31, .12);
}

.arena-welcome .auth-shell.auth-shell-wide {
	max-width: 1100px;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
}

.arena-welcome .auth-visual {
	background: linear-gradient(160deg, var(--arena-accent) 0%, var(--arena-ink-deep) 100%);
	color: #fff;
	padding: 3rem 2.5rem;
	display: flex;
	align-items: center;
	position: relative;
	overflow: hidden;
}

.arena-welcome .auth-visual::before {
	content: '';
	position: absolute;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	top: -120px;
	inset-inline-end: -120px;
}

.arena-welcome .auth-visual::after {
	content: '';
	position: absolute;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .06);
	bottom: -90px;
	inset-inline-start: -60px;
}

.arena-welcome .auth-visual-content {
	position: relative;
	z-index: 1;
}

.arena-welcome .auth-logo {
	display: inline-block;
	margin-bottom: 2.25rem;
}

.arena-welcome .auth-logo img {
	height: 38px;
	width: auto;
}

.arena-welcome .auth-visual-content h2 {
	font-size: 1.6rem;
	font-weight: 800;
	margin-bottom: .75rem;
	color: #fff;
}

.arena-welcome .auth-visual-content p {
	color: rgba(255, 255, 255, .85);
	margin-bottom: 1.75rem;
	font-size: .95rem;
}

.arena-welcome .auth-visual-points {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: .85rem;
}

.arena-welcome .auth-visual-points li {
	display: flex;
	align-items: flex-start;
	gap: .65rem;
	font-size: .9rem;
	color: rgba(255, 255, 255, .95);
}

.arena-welcome .auth-visual-points li i {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .18);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: .65rem;
	flex-shrink: 0;
	margin-top: .1rem;
}

.arena-welcome .auth-form-panel {
	padding: 3rem 2.75rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.arena-welcome .auth-title {
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--arena-ink);
	margin-bottom: .35rem;
}

.arena-welcome .auth-subtitle {
	color: var(--arena-muted);
	margin-bottom: 1.75rem;
	font-size: .92rem;
}

.arena-welcome .role-toggle-wrapper {
	margin-bottom: 0.25rem;
}
.arena-welcome .role-toggle-group {
	display: flex;
	border: 2px solid var(--arena-accent);
	border-radius: 10px;
	overflow: hidden;
}
.arena-welcome .role-toggle-btn {
	flex: 1;
	padding: 10px 16px;
	border: none;
	background: #fff;
	color: var(--arena-accent);
	font-weight: 600;
	font-size: 0.95rem;
	cursor: pointer;
	transition: all 0.25s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
.arena-welcome .role-toggle-btn:first-child {
	border-right: 2px solid var(--arena-accent);
}
.arena-welcome .role-toggle-btn.active {
	background: var(--arena-accent);
	color: #fff;
}
.arena-welcome .role-toggle-btn:hover:not(.active) {
	background: rgba(192, 38, 211, 0.08);
}

.arena-welcome .auth-page label.required {
	font-weight: 600;
	font-size: .88rem;
	color: var(--arena-ink);
	margin-bottom: .4rem;
	display: inline-block;
}

.arena-welcome .auth-page label.required::after {
	content: '*';
	color: #E11D48;
	margin-inline-start: 3px;
}

.arena-welcome .auth-page .form-control {
	border: 1px solid var(--arena-line);
	border-radius: 10px;
	padding: .68rem .9rem;
	font-size: .92rem;
}

.arena-welcome .auth-page .form-control:focus {
	border-color: var(--arena-accent);
	box-shadow: 0 0 0 3px rgba(192, 38, 212, .12);
}

.arena-welcome .auth-page .form-control.is-invalid {
	border-color: #E11D48;
}

.arena-welcome .auth-page .btn-primary {
	background: var(--arena-accent);
	border-color: var(--arena-accent);
	border-radius: 10px;
	padding: .75rem 1.5rem;
	font-weight: 700;
}

.arena-welcome .auth-page .btn-primary:hover {
	background: var(--arena-accent-dark);
	border-color: var(--arena-accent-dark);
}

.arena-welcome .auth-page a {
	color: var(--arena-accent);
}

.arena-welcome .auth-page .form-check-input:checked {
	background-color: var(--arena-accent);
	border-color: var(--arena-accent);
}

.arena-welcome .auth-alt-link {
	text-align: center;
	color: var(--arena-muted);
	font-size: .88rem;
	margin-top: 1.5rem;
}

.arena-welcome .auth-switch {
	text-align: center;
	margin-top: 1.5rem;
	margin-bottom: 0;
	font-size: .92rem;
	color: var(--arena-muted);
}

@media (max-width: 900px) {
	.arena-welcome .auth-shell,
	.arena-welcome .auth-shell.auth-shell-wide {
		grid-template-columns: 1fr;
		max-width: 480px;
	}

	.arena-welcome .auth-visual {
		display: none;
	}

	.arena-welcome .auth-form-panel {
		padding: 2.25rem 1.5rem;
	}
}

/* password eye icon — shared by the auth forms (previously unstyled on the frontend) */
.password-eye {
	position: absolute;
	top: 50%;
	inset-inline-end: 14px;
	transform: translateY(-50%);
	color: #9CA3AF;
	cursor: pointer;
}

.password-eye:hover {
	color: var(--arena-accent, #4B0082);
}

/* =========================================================================
   Small auth utility pages (password reset/verification) — plain Bootstrap
   cards with no depth at all; give them the same raised 3D treatment as
   the rest of the auth/form pages.
   ========================================================================= */

.auth-mini-page {
	padding: 40px 0;
}

.auth-mini-card {
	border: 0;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 2px 4px rgba(20, 20, 31, .05), 0 20px 40px -14px rgba(75, 0, 130, .18),
		0 44px 70px -22px rgba(75, 0, 130, .22);
	transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s cubic-bezier(.22, 1, .36, 1);
}

.auth-mini-card .card-header {
	background: linear-gradient(155deg, #6a1bb3, #4B0082);
	color: #fff;
	border: 0;
	font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
	.auth-mini-card {
		transition: none;
	}
}

/* RFQ page — flat unstyled card, give it the same raised 3D card treatment */
.rfq-card {
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 2px 4px rgba(20, 20, 31, .05), 0 20px 40px -14px rgba(75, 0, 130, .18),
		0 44px 70px -22px rgba(75, 0, 130, .22);
	transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s cubic-bezier(.22, 1, .36, 1);
}

.rfq-page .btn-primary {
	box-shadow: 0 2px 4px rgba(75, 0, 130, .25), 0 14px 24px -8px rgba(75, 0, 130, .45);
}

@media (prefers-reduced-motion: reduce) {
	.rfq-card {
		transition: none;
	}
}

/* Contact-Supplier page — flat unstyled card, give it the same raised 3D card treatment */
.contact-supplier-card {
	border: 0;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 2px 4px rgba(20, 20, 31, .05), 0 20px 40px -14px rgba(75, 0, 130, .18),
		0 44px 70px -22px rgba(75, 0, 130, .22);
	transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s cubic-bezier(.22, 1, .36, 1);
}

.contact-supplier-card .btn-primary {
	box-shadow: 0 2px 4px rgba(75, 0, 130, .25), 0 14px 24px -8px rgba(75, 0, 130, .45);
}

@media (prefers-reduced-motion: reduce) {
	.contact-supplier-card {
		transition: none;
	}
}

/* =========================================================================
   Submit-Requirement page — elevated "3D" depth pass
   Scoped under .submit-requirement-page only; layout/content unchanged,
   just adds layered shadows, gentle gradients and hover lift for depth.
   ========================================================================= */

.submit-requirement-page {
	--ease-smooth: cubic-bezier(.22, 1, .36, 1);
}

.submit-requirement-page .arena-section {
	perspective: 1400px;
}

.submit-requirement-page .arena-section img.rounded-4 {
	box-shadow: 0 2px 4px rgba(20, 20, 31, .06), 0 18px 30px -8px rgba(20, 20, 31, .18),
		0 40px 64px -16px rgba(75, 0, 130, .28);
	transform: perspective(1400px) rotateX(3deg) rotateY(-2deg) translateZ(0) scale(1);
	transition: transform .55s var(--ease-smooth), box-shadow .55s var(--ease-smooth);
	will-change: transform;
}

.submit-requirement-page .arena-section img.rounded-4:hover {
	transform: perspective(1400px) rotateX(0deg) rotateY(0deg) translateY(-12px) translateZ(30px) scale(1.02);
	box-shadow: 0 4px 8px rgba(20, 20, 31, .08), 0 26px 40px -8px rgba(20, 20, 31, .22),
		0 56px 84px -16px rgba(75, 0, 130, .38);
}

.submit-requirement-page .icon-tile {
	background: linear-gradient(145deg, #F9F6FF, #E4D9FB);
	box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .9), inset 0 -3px 5px rgba(75, 0, 130, .16),
		0 10px 18px -4px rgba(75, 0, 130, .32);
	transition: transform .4s var(--ease-smooth), box-shadow .4s var(--ease-smooth);
}

.submit-requirement-page .step-tile {
	background: linear-gradient(160deg, #FEFDFF, #EEE5FC);
	border: 1px solid rgba(255, 255, 255, .7);
	transform: perspective(1200px) rotateX(4deg) translateZ(0) scale(1);
	box-shadow: 0 1.5px 0 rgba(255, 255, 255, .8) inset, 0 3px 6px rgba(20, 20, 31, .05),
		0 16px 28px -8px rgba(75, 0, 130, .16), 0 34px 54px -20px rgba(75, 0, 130, .3);
	transition: transform .5s var(--ease-smooth), box-shadow .5s var(--ease-smooth);
	will-change: transform;
}

.submit-requirement-page .step-tile:hover {
	transform: perspective(1200px) rotateX(0deg) translateY(-14px) translateZ(40px) scale(1.035);
	box-shadow: 0 1.5px 0 rgba(255, 255, 255, .8) inset, 0 6px 10px rgba(20, 20, 31, .07),
		0 26px 40px -8px rgba(75, 0, 130, .24), 0 54px 80px -18px rgba(75, 0, 130, .42);
}

.submit-requirement-page .step-tile:hover .icon-tile {
	transform: translateY(-3px) scale(1.12) rotate(-4deg);
	box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .9), inset 0 -3px 5px rgba(75, 0, 130, .16),
		0 16px 26px -4px rgba(75, 0, 130, .42);
}

.submit-requirement-page .why-row {
	border: 1px solid rgba(255, 255, 255, .7);
	transform: perspective(1200px) rotateX(2deg) translateZ(0);
	box-shadow: 0 1.5px 0 rgba(255, 255, 255, .8) inset, 0 3px 6px rgba(20, 20, 31, .04),
		0 12px 22px -8px rgba(20, 20, 31, .14), 0 26px 40px -16px rgba(75, 0, 130, .2);
	transition: transform .45s var(--ease-smooth), box-shadow .45s var(--ease-smooth);
	will-change: transform;
}

.submit-requirement-page .why-row:hover {
	transform: perspective(1200px) rotateX(0deg) translateY(-8px) translateZ(20px) scale(1.015);
	box-shadow: 0 1.5px 0 rgba(255, 255, 255, .8) inset, 0 5px 10px rgba(20, 20, 31, .06),
		0 20px 32px -8px rgba(20, 20, 31, .18), 0 40px 60px -16px rgba(75, 0, 130, .3);
}

.submit-requirement-page .why-row:hover .icon-tile {
	transform: scale(1.1);
}

.submit-requirement-page .btn-arena-accent {
	box-shadow: 0 2px 4px rgba(75, 0, 130, .3), 0 14px 26px -8px rgba(75, 0, 130, .55);
	transition: transform .35s var(--ease-smooth), box-shadow .35s var(--ease-smooth), background .35s var(--ease-smooth);
}

.submit-requirement-page .btn-arena-accent:hover {
	transform: translateY(-4px) scale(1.03);
	box-shadow: 0 4px 8px rgba(75, 0, 130, .34), 0 22px 38px -8px rgba(75, 0, 130, .6);
}

.submit-requirement-page .btn-arena-accent:active {
	transform: translateY(-1px) scale(1.01);
	box-shadow: 0 2px 4px rgba(75, 0, 130, .3), 0 10px 18px -6px rgba(75, 0, 130, .45);
	transition-duration: .12s;
}

@media (max-width: 767px) {
	.submit-requirement-page .step-tile,
	.submit-requirement-page .why-row,
	.submit-requirement-page .arena-section img.rounded-4 {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {

	.submit-requirement-page .arena-section img.rounded-4,
	.submit-requirement-page .step-tile,
	.submit-requirement-page .why-row,
	.submit-requirement-page .btn-arena-accent,
	.submit-requirement-page .icon-tile {
		transition: none;
		transform: none;
	}
}

/* =========================================================================
   Home page — elevated "3D" depth pass (same treatment as the
   submit-requirement page). Scoped under .home-page only; layout,
   copy, colors and spacing are unchanged — only depth + motion added.
   ========================================================================= */

.home-page {
	--ease-smooth: cubic-bezier(.22, 1, .36, 1);
}

.home-page .arena-section {
	perspective: 1400px;
}

/* ---- shared card lift used by feature-row / why-row ---- */
.home-page .feature-row,
.home-page .why-row {
	border: 1px solid rgba(255, 255, 255, .7);
	transform: perspective(1200px) rotateX(2deg) translateZ(0);
	box-shadow: 0 1.5px 0 rgba(255, 255, 255, .8) inset, 0 3px 6px rgba(20, 20, 31, .04),
		0 12px 22px -8px rgba(20, 20, 31, .14), 0 26px 40px -16px rgba(75, 0, 130, .2);
	transition: transform .45s var(--ease-smooth), box-shadow .45s var(--ease-smooth);
	will-change: transform;
}

.home-page .feature-row:hover,
.home-page .why-row:hover {
	transform: perspective(1200px) rotateX(0deg) translateY(-8px) translateZ(20px) scale(1.02);
	box-shadow: 0 1.5px 0 rgba(255, 255, 255, .8) inset, 0 5px 10px rgba(20, 20, 31, .06),
		0 20px 32px -8px rgba(20, 20, 31, .18), 0 40px 60px -16px rgba(75, 0, 130, .3);
}

.home-page .feature-row:hover .icon-tile,
.home-page .why-row:hover .icon-tile {
	transform: scale(1.12) rotate(-4deg);
}

/* ---- icon tiles (feature-row / why-row / integration-card) ---- */
.home-page .icon-tile {
	background: linear-gradient(145deg, #F9F6FF, #E4D9FB);
	box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .9), inset 0 -3px 5px rgba(75, 0, 130, .16),
		0 8px 16px -4px rgba(75, 0, 130, .28);
	transition: transform .4s var(--ease-smooth), box-shadow .4s var(--ease-smooth);
}

/* ---- how it works circles ---- */
.home-page .circle-step {
	background: linear-gradient(145deg, #FBF8FF, #E7DCFB);
	box-shadow: inset 0 2px 0 rgba(255, 255, 255, .9), inset 0 -4px 6px rgba(75, 0, 130, .14),
		0 12px 22px -6px rgba(75, 0, 130, .3);
	transition: transform .4s var(--ease-smooth), box-shadow .4s var(--ease-smooth);
}

.home-page .how-it-works-grid>div {
	transition: transform .4s var(--ease-smooth);
}

.home-page .how-it-works-grid>div:hover {
	transform: translateY(-6px);
}

.home-page .how-it-works-grid>div:hover .circle-step {
	transform: scale(1.1) rotate(-6deg);
	box-shadow: inset 0 2px 0 rgba(255, 255, 255, .9), inset 0 -4px 6px rgba(75, 0, 130, .14),
		0 18px 30px -6px rgba(75, 0, 130, .4);
}

/* ---- marketplace category tiles ---- */
.home-page .category-tile {
	transform: perspective(1200px) rotateX(3deg) translateZ(0) scale(1);
	box-shadow: 0 2px 4px rgba(20, 20, 31, .05), 0 16px 28px -8px rgba(20, 20, 31, .16),
		0 34px 54px -18px rgba(75, 0, 130, .26);
	transition: transform .5s var(--ease-smooth), box-shadow .5s var(--ease-smooth);
	will-change: transform;
}

.home-page .category-tile:hover {
	transform: perspective(1200px) rotateX(0deg) translateY(-12px) translateZ(30px) scale(1.03);
	box-shadow: 0 4px 8px rgba(20, 20, 31, .08), 0 26px 40px -8px rgba(20, 20, 31, .2),
		0 54px 80px -18px rgba(75, 0, 130, .36);
}

/* ---- project services / integration cards ---- */
.home-page .project-service-card,
.home-page .integration-card {
	border: 1px solid rgba(255, 255, 255, .7);
	transform: perspective(1200px) rotateX(4deg) translateZ(0) scale(1);
	box-shadow: 0 1.5px 0 rgba(255, 255, 255, .8) inset, 0 3px 6px rgba(20, 20, 31, .05),
		0 16px 28px -8px rgba(75, 0, 130, .14), 0 34px 54px -20px rgba(75, 0, 130, .26);
	transition: transform .5s var(--ease-smooth), box-shadow .5s var(--ease-smooth);
	will-change: transform;
}

.home-page .project-service-card:hover,
.home-page .integration-card:hover {
	transform: perspective(1200px) rotateX(0deg) translateY(-12px) translateZ(30px) scale(1.02);
	box-shadow: 0 1.5px 0 rgba(255, 255, 255, .8) inset, 0 6px 10px rgba(20, 20, 31, .07),
		0 26px 40px -8px rgba(75, 0, 130, .2), 0 54px 80px -18px rgba(75, 0, 130, .36);
}

.home-page .integration-card:hover .icon-tile {
	transform: translateY(-3px) scale(1.1) rotate(-4deg);
}

/* ---- images (why arena / target industries) ---- */
.home-page .why-arena-media img,
.home-page .target-industries-media img,
.home-page .procurement-media img {
	transform: perspective(1400px) rotateX(3deg) rotateY(-2deg) translateZ(0) scale(1);
	transition: transform .55s var(--ease-smooth), box-shadow .55s var(--ease-smooth);
	will-change: transform;
}

.home-page .why-arena-media img:hover,
.home-page .target-industries-media img:hover,
.home-page .procurement-media img:hover {
	transform: perspective(1400px) rotateX(0deg) rotateY(0deg) translateY(-12px) translateZ(30px) scale(1.02);
	box-shadow: 0 4px 8px rgba(20, 20, 31, .08), 0 26px 40px -8px rgba(20, 20, 31, .22),
		0 56px 84px -16px rgba(75, 0, 130, .32);
}

/* ---- join platform CTA banner ---- */
.home-page .join-platform-cta {
	box-shadow: 0 3px 6px rgba(0, 0, 0, .2), 0 20px 34px -10px rgba(0, 0, 0, .35),
		0 44px 70px -20px rgba(75, 0, 130, .4);
	transition: transform .4s var(--ease-smooth), box-shadow .4s var(--ease-smooth);
}

/* ---- join-as-supplier bubble ---- */
.home-page .join-bubble .b1,
.home-page .join-bubble .b2,
.home-page .join-bubble .b3 {
	transition: transform .5s var(--ease-smooth), box-shadow .5s var(--ease-smooth);
}

.home-page .join-bubble .b1 {
	box-shadow: 0 2px 4px rgba(242, 107, 58, .3), 0 20px 34px -10px rgba(242, 107, 58, .5);
}

.home-page .join-bubble .b2 {
	box-shadow: 0 2px 4px rgba(156, 163, 212, .3), 0 16px 26px -8px rgba(156, 163, 212, .5);
}

.home-page .join-bubble .b3 {
	box-shadow: 0 2px 4px rgba(47, 111, 237, .3), 0 20px 34px -10px rgba(47, 111, 237, .5);
}

.home-page .join-bubble:hover .b1 {
	transform: translateY(-6px) scale(1.03);
}

.home-page .join-bubble:hover .b2 {
	transform: translateY(-10px) scale(1.05);
}

.home-page .join-bubble:hover .b3 {
	transform: translateY(-4px) scale(1.03);
}

/* ---- raised buttons ---- */
.home-page .btn-arena-accent,
.home-page .btn-arena-light,
.home-page .btn-arena-cta,
.home-page .btn-arena-outline {
	transition: transform .35s var(--ease-smooth), box-shadow .35s var(--ease-smooth), background .35s var(--ease-smooth);
}

.home-page .btn-arena-accent,
.home-page .btn-arena-cta {
	box-shadow: 0 2px 4px rgba(75, 0, 130, .25), 0 14px 24px -8px rgba(75, 0, 130, .45);
}

.home-page .btn-arena-light {
	box-shadow: 0 2px 4px rgba(20, 20, 31, .1), 0 14px 24px -8px rgba(20, 20, 31, .2);
}

.home-page .btn-arena-accent:hover,
.home-page .btn-arena-light:hover,
.home-page .btn-arena-cta:hover,
.home-page .btn-arena-outline:hover {
	transform: translateY(-4px) scale(1.03);
}

.home-page .btn-arena-accent:hover,
.home-page .btn-arena-cta:hover {
	box-shadow: 0 4px 8px rgba(75, 0, 130, .3), 0 22px 36px -8px rgba(75, 0, 130, .5);
}

.home-page .btn-arena-accent:active,
.home-page .btn-arena-light:active,
.home-page .btn-arena-cta:active,
.home-page .btn-arena-outline:active {
	transform: translateY(-1px) scale(1.01);
	transition-duration: .12s;
}

@media (max-width: 767px) {

	.home-page .feature-row,
	.home-page .why-row,
	.home-page .category-tile,
	.home-page .project-service-card,
	.home-page .integration-card,
	.home-page .why-arena-media img,
	.home-page .target-industries-media img,
	.home-page .procurement-media img {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {

	.home-page .feature-row,
	.home-page .why-row,
	.home-page .icon-tile,
	.home-page .circle-step,
	.home-page .how-it-works-grid>div,
	.home-page .category-tile,
	.home-page .project-service-card,
	.home-page .integration-card,
	.home-page .why-arena-media img,
	.home-page .target-industries-media img,
	.home-page .procurement-media img,
	.home-page .join-platform-cta,
	.home-page .join-bubble .b1,
	.home-page .join-bubble .b2,
	.home-page .join-bubble .b3,
	.home-page .btn-arena-accent,
	.home-page .btn-arena-light,
	.home-page .btn-arena-cta,
	.home-page .btn-arena-outline {
		transition: none;
		transform: none;
	}
}

/* =========================================================================
   About Us page — elevated "3D" depth pass (same treatment as the
   home / submit-requirement pages). Scoped under .about-page only;
   layout, copy, colors and spacing are unchanged — only depth + motion.
   ========================================================================= */

.about-page {
	--ease-smooth: cubic-bezier(.22, 1, .36, 1);
}

.about-page .arena-section {
	perspective: 1400px;
}

/* ---- large static panels: richer shadow, no tilt (too big to tilt) ---- */
.about-page .hero-panel,
.about-page .info-panel-dark {
	box-shadow: 0 1.5px 0 rgba(255, 255, 255, .5) inset, 0 10px 20px -6px rgba(20, 20, 31, .08),
		0 30px 50px -18px rgba(75, 0, 130, .2);
	transition: box-shadow .4s var(--ease-smooth);
}

.about-page .node-chip {
	transition: transform .3s var(--ease-smooth), box-shadow .3s var(--ease-smooth);
}

.about-page .node-chip:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 14px -4px rgba(20, 20, 31, .18);
}

/* ---- icon tiles ---- */
.about-page .icon-tile {
	background: linear-gradient(145deg, #F9F6FF, #E4D9FB);
	box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .9), inset 0 -3px 5px rgba(75, 0, 130, .16),
		0 8px 16px -4px rgba(75, 0, 130, .28);
	transition: transform .4s var(--ease-smooth), box-shadow .4s var(--ease-smooth);
}

/* ---- feature-row (used inside vision/mission cards) ---- */
.about-page .feature-row {
	border: 1px solid rgba(255, 255, 255, .7);
	transform: perspective(1200px) rotateX(2deg) translateZ(0);
	box-shadow: 0 1.5px 0 rgba(255, 255, 255, .8) inset, 0 3px 6px rgba(20, 20, 31, .04),
		0 12px 22px -8px rgba(20, 20, 31, .14), 0 26px 40px -16px rgba(75, 0, 130, .2);
	transition: transform .45s var(--ease-smooth), box-shadow .45s var(--ease-smooth);
	will-change: transform;
}

.about-page .feature-row:hover {
	transform: perspective(1200px) rotateX(0deg) translateY(-8px) translateZ(20px) scale(1.02);
	box-shadow: 0 1.5px 0 rgba(255, 255, 255, .8) inset, 0 5px 10px rgba(20, 20, 31, .06),
		0 20px 32px -8px rgba(20, 20, 31, .18), 0 40px 60px -16px rgba(75, 0, 130, .3);
}

.about-page .feature-row:hover .icon-tile {
	transform: scale(1.12) rotate(-4deg);
}

/* ---- pillar cards (operating pillars) ---- */
.about-page .pillar-card {
	background: linear-gradient(160deg, #FEFDFF, #F3EDFC);
	border: 1px solid rgba(255, 255, 255, .7);
	transform: perspective(1200px) rotateX(4deg) translateZ(0) scale(1);
	box-shadow: 0 1.5px 0 rgba(255, 255, 255, .8) inset, 0 3px 6px rgba(20, 20, 31, .05),
		0 16px 28px -8px rgba(75, 0, 130, .14), 0 34px 54px -20px rgba(75, 0, 130, .26);
	transition: transform .5s var(--ease-smooth), box-shadow .5s var(--ease-smooth);
	will-change: transform;
}

.about-page .pillar-card:hover {
	transform: perspective(1200px) rotateX(0deg) translateY(-12px) translateZ(30px) scale(1.02);
	box-shadow: 0 1.5px 0 rgba(255, 255, 255, .8) inset, 0 6px 10px rgba(20, 20, 31, .07),
		0 26px 40px -8px rgba(75, 0, 130, .2), 0 54px 80px -18px rgba(75, 0, 130, .36);
}

.about-page .pillar-card:hover .icon-tile {
	transform: translateY(-3px) scale(1.1) rotate(-4deg);
}

/* ---- workflow cards (lifecycle) — keep .is-active purple fill intact,
   only add depth + motion, never override its background ---- */
.about-page .workflow-card {
	transform: perspective(1200px) rotateX(3deg) translateZ(0) scale(1);
	box-shadow: 0 2px 4px rgba(20, 20, 31, .05), 0 14px 24px -8px rgba(20, 20, 31, .12),
		0 30px 48px -18px rgba(75, 0, 130, .22);
	transition: transform .45s var(--ease-smooth), box-shadow .45s var(--ease-smooth);
	will-change: transform;
}

.about-page .workflow-card:hover {
	transform: perspective(1200px) rotateX(0deg) translateY(-10px) translateZ(24px) scale(1.03);
	box-shadow: 0 4px 8px rgba(20, 20, 31, .08), 0 22px 34px -8px rgba(20, 20, 31, .18),
		0 46px 68px -16px rgba(75, 0, 130, .32);
}

/* ---- objective cards — keep .is-highlight purple fill intact ---- */
.about-page .objective-card {
	transform: perspective(1200px) rotateX(3deg) translateZ(0) scale(1);
	box-shadow: 0 2px 4px rgba(20, 20, 31, .05), 0 14px 24px -8px rgba(20, 20, 31, .12),
		0 30px 48px -18px rgba(75, 0, 130, .22);
	transition: transform .45s var(--ease-smooth), box-shadow .45s var(--ease-smooth);
	will-change: transform;
}

.about-page .objective-card:hover {
	transform: perspective(1200px) rotateX(0deg) translateY(-10px) translateZ(24px) scale(1.03);
	box-shadow: 0 4px 8px rgba(20, 20, 31, .08), 0 22px 34px -8px rgba(20, 20, 31, .18),
		0 46px 68px -16px rgba(75, 0, 130, .32);
}

/* ---- value tiles ---- */
.about-page .value-tile {
	background: linear-gradient(160deg, #FEFDFF, #F3EDFC);
	border: 1px solid rgba(255, 255, 255, .7);
	transform: perspective(1200px) rotateX(4deg) translateZ(0) scale(1);
	box-shadow: 0 1.5px 0 rgba(255, 255, 255, .8) inset, 0 3px 6px rgba(20, 20, 31, .05),
		0 16px 28px -8px rgba(75, 0, 130, .14), 0 34px 54px -20px rgba(75, 0, 130, .26);
	transition: transform .5s var(--ease-smooth), box-shadow .5s var(--ease-smooth);
	will-change: transform;
}

.about-page .value-tile:hover {
	transform: perspective(1200px) rotateX(0deg) translateY(-12px) translateZ(30px) scale(1.04);
	box-shadow: 0 1.5px 0 rgba(255, 255, 255, .8) inset, 0 6px 10px rgba(20, 20, 31, .07),
		0 26px 40px -8px rgba(75, 0, 130, .2), 0 54px 80px -18px rgba(75, 0, 130, .36);
}

.about-page .value-tile:hover .icon-tile {
	transform: translateY(-3px) scale(1.12) rotate(-4deg);
}

/* ---- join-as-supplier bubble + CTA buttons (shared with home page) ---- */
.about-page .join-bubble .b1,
.about-page .join-bubble .b2,
.about-page .join-bubble .b3 {
	transition: transform .5s var(--ease-smooth), box-shadow .5s var(--ease-smooth);
}

.about-page .join-bubble .b1 {
	box-shadow: 0 2px 4px rgba(242, 107, 58, .3), 0 20px 34px -10px rgba(242, 107, 58, .5);
}

.about-page .join-bubble .b2 {
	box-shadow: 0 2px 4px rgba(156, 163, 212, .3), 0 16px 26px -8px rgba(156, 163, 212, .5);
}

.about-page .join-bubble .b3 {
	box-shadow: 0 2px 4px rgba(47, 111, 237, .3), 0 20px 34px -10px rgba(47, 111, 237, .5);
}

.about-page .join-bubble:hover .b1 {
	transform: translateY(-6px) scale(1.03);
}

.about-page .join-bubble:hover .b2 {
	transform: translateY(-10px) scale(1.05);
}

.about-page .join-bubble:hover .b3 {
	transform: translateY(-4px) scale(1.03);
}

.about-page .btn-arena-cta,
.about-page .btn-arena-outline {
	transition: transform .35s var(--ease-smooth), box-shadow .35s var(--ease-smooth), background .35s var(--ease-smooth);
}

.about-page .btn-arena-cta {
	box-shadow: 0 2px 4px rgba(75, 0, 130, .25), 0 14px 24px -8px rgba(75, 0, 130, .45);
}

.about-page .btn-arena-cta:hover,
.about-page .btn-arena-outline:hover {
	transform: translateY(-4px) scale(1.03);
}

.about-page .btn-arena-cta:hover {
	box-shadow: 0 4px 8px rgba(75, 0, 130, .3), 0 22px 36px -8px rgba(75, 0, 130, .5);
}

.about-page .btn-arena-cta:active,
.about-page .btn-arena-outline:active {
	transform: translateY(-1px) scale(1.01);
	transition-duration: .12s;
}

@media (max-width: 767px) {

	.about-page .feature-row,
	.about-page .pillar-card,
	.about-page .workflow-card,
	.about-page .objective-card,
	.about-page .value-tile {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {

	.about-page .hero-panel,
	.about-page .info-panel-dark,
	.about-page .node-chip,
	.about-page .icon-tile,
	.about-page .feature-row,
	.about-page .pillar-card,
	.about-page .workflow-card,
	.about-page .objective-card,
	.about-page .value-tile,
	.about-page .join-bubble .b1,
	.about-page .join-bubble .b2,
	.about-page .join-bubble .b3,
	.about-page .btn-arena-cta,
	.about-page .btn-arena-outline {
		transition: none;
		transform: none;
	}
}

/* =========================================================================
   "Our Objectives" section — colored 3D cards
   Scoped under #our-objectives only. Every card (including the two
   previously-"is-highlight" cards, 13 & 14) shares the same tinted
   palette that cycles every 4 cards, so all 14 look consistent.
   ========================================================================= */

#our-objectives .objective-card {
	position: relative;
	overflow: hidden;
}

#our-objectives .objective-card i {
	font-size: 1.2rem;
	transition: transform .4s var(--ease-smooth, ease);
}

#our-objectives .objective-card:hover i {
	transform: scale(1.15) rotate(-6deg);
}

#our-objectives .row>div:nth-child(4n+1) .objective-card {
	background: linear-gradient(155deg, #FBF3FF 0%, #ECD3FC 100%);
	border: 1px solid rgba(192, 38, 212, .18);
	box-shadow: 0 1.5px 0 rgba(255, 255, 255, .8) inset, 0 3px 6px rgba(20, 20, 31, .05),
		0 16px 26px -10px rgba(192, 38, 212, .35), 0 32px 50px -20px rgba(192, 38, 212, .3);
}

#our-objectives .row>div:nth-child(4n+1) .objective-card:hover {
	box-shadow: 0 1.5px 0 rgba(255, 255, 255, .8) inset, 0 6px 10px rgba(20, 20, 31, .07),
		0 24px 38px -10px rgba(192, 38, 212, .45), 0 48px 70px -18px rgba(192, 38, 212, .4);
}

#our-objectives .row>div:nth-child(4n+1) .objective-card i,
#our-objectives .row>div:nth-child(4n+1) .objective-card .num-badge {
	color: #A21CAF;
}

#our-objectives .row>div:nth-child(4n+2) .objective-card {
	background: linear-gradient(155deg, #EEF4FF 0%, #D2E3FD 100%);
	border: 1px solid rgba(47, 111, 237, .18);
	box-shadow: 0 1.5px 0 rgba(255, 255, 255, .8) inset, 0 3px 6px rgba(20, 20, 31, .05),
		0 16px 26px -10px rgba(47, 111, 237, .35), 0 32px 50px -20px rgba(47, 111, 237, .3);
}

#our-objectives .row>div:nth-child(4n+2) .objective-card:hover {
	box-shadow: 0 1.5px 0 rgba(255, 255, 255, .8) inset, 0 6px 10px rgba(20, 20, 31, .07),
		0 24px 38px -10px rgba(47, 111, 237, .45), 0 48px 70px -18px rgba(47, 111, 237, .4);
}

#our-objectives .row>div:nth-child(4n+2) .objective-card i,
#our-objectives .row>div:nth-child(4n+2) .objective-card .num-badge {
	color: #1D4ED8;
}

#our-objectives .row>div:nth-child(4n+3) .objective-card {
	background: linear-gradient(155deg, #E9FBF6 0%, #C7F3E7 100%);
	border: 1px solid rgba(13, 148, 136, .2);
	box-shadow: 0 1.5px 0 rgba(255, 255, 255, .8) inset, 0 3px 6px rgba(20, 20, 31, .05),
		0 16px 26px -10px rgba(13, 148, 136, .3), 0 32px 50px -20px rgba(13, 148, 136, .26);
}

#our-objectives .row>div:nth-child(4n+3) .objective-card:hover {
	box-shadow: 0 1.5px 0 rgba(255, 255, 255, .8) inset, 0 6px 10px rgba(20, 20, 31, .07),
		0 24px 38px -10px rgba(13, 148, 136, .4), 0 48px 70px -18px rgba(13, 148, 136, .34);
}

#our-objectives .row>div:nth-child(4n+3) .objective-card i,
#our-objectives .row>div:nth-child(4n+3) .objective-card .num-badge {
	color: #0D9488;
}

#our-objectives .row>div:nth-child(4n) .objective-card {
	background: linear-gradient(155deg, #FFF6E9 0%, #FFE3BF 100%);
	border: 1px solid rgba(242, 107, 58, .22);
	box-shadow: 0 1.5px 0 rgba(255, 255, 255, .8) inset, 0 3px 6px rgba(20, 20, 31, .05),
		0 16px 26px -10px rgba(242, 107, 58, .35), 0 32px 50px -20px rgba(242, 107, 58, .3);
}

#our-objectives .row>div:nth-child(4n) .objective-card:hover {
	box-shadow: 0 1.5px 0 rgba(255, 255, 255, .8) inset, 0 6px 10px rgba(20, 20, 31, .07),
		0 24px 38px -10px rgba(242, 107, 58, .45), 0 48px 70px -18px rgba(242, 107, 58, .4);
}

#our-objectives .row>div:nth-child(4n) .objective-card i,
#our-objectives .row>div:nth-child(4n) .objective-card .num-badge {
	color: #C2410C;
}

@media (prefers-reduced-motion: reduce) {
	#our-objectives .objective-card i {
		transition: none;
	}
}

/* =========================================================================
   About Us — Modern Purple Redesign
   Overrides and enhancements for a clean, contemporary look using only
   the site purple palette. Header (.page-banner) is unchanged.
   ========================================================================= */

/* ---- section spacing & soft alternating backgrounds ---- */
.about-page .arena-section {
	padding-top: 4.5rem;
	padding-bottom: 4.5rem;
}

.about-page .arena-section.is-soft {
	background: linear-gradient(180deg, #faf8ff 0%, #f3effe 100%);
}

/* ---- hero / intro panel ---- */
.about-page .hero-panel {
	background: linear-gradient(135deg, #f9f5ff 0%, #ede9fe 55%, #e5d9fd 100%);
	border: 1px solid rgba(192, 38, 211, .12);
	border-radius: 24px;
	padding: 3rem;
}

/* ---- dark info panel (right column of intro) ---- */
.about-page .info-panel-dark {
	background: linear-gradient(145deg, #3b0764 0%, #6b21a8 60%, #7c3aed 100%);
	border-radius: 18px;
	padding: 2rem;
	color: #fff;
	border: none;
}

.about-page .info-panel-dark p {
	color: rgba(255, 255, 255, .88);
	font-size: .9rem;
	line-height: 1.75;
}

.about-page .info-panel-dark .small {
	color: rgba(255, 255, 255, .65);
}

.about-page .info-panel-dark .text-arena-accent {
	color: #e879f9 !important;
}

.about-page .info-panel-dark .fw-semibold {
	color: #fff;
}

/* ---- badges ---- */
.about-page .badge-soft {
	background: rgba(192, 38, 211, .1);
	color: #9333ea;
	border: 1px solid rgba(192, 38, 211, .18);
	border-radius: 40px;
	padding: .38rem 1rem;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.about-page .badge-soft-outline {
	background: transparent;
	border: 1px solid rgba(192, 38, 211, .25);
	color: #9333ea;
	border-radius: 40px;
	padding: .38rem 1rem;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .03em;
}

/* ---- eyebrow labels ---- */
.about-page .arena-eyebrow {
	color: #9333ea;
	font-weight: 700;
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .07em;
	margin-bottom: .5rem;
}

/* ---- section headings ---- */
.about-page h2 {
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	font-weight: 800;
	color: #1e0535;
	line-height: 1.2;
}

.about-page h3 {
	font-size: clamp(1.3rem, 2.5vw, 1.75rem);
	font-weight: 800;
	color: #1e0535;
}

/* ---- icon tile ---- */
.about-page .icon-tile {
	background: linear-gradient(145deg, #f3e8ff, #e9d5ff);
	color: #7c3aed;
	border: 1px solid rgba(192, 38, 211, .2);
	border-radius: 14px;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
	flex-shrink: 0;
}

/* ---- node chips ---- */
.about-page .node-chip {
	background: rgba(192, 38, 211, .07);
	border: 1px solid rgba(192, 38, 211, .2);
	color: #7c3aed;
	border-radius: 10px;
	padding: .4rem .85rem;
	font-size: .8rem;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	transition: background .2s ease, transform .2s ease;
}

.about-page .node-chip:hover {
	background: rgba(192, 38, 211, .14);
	transform: translateY(-2px);
}

.about-page .node-chip i {
	color: #c026d3;
}

/* ---- feature row (vision/mission footer) ---- */
.about-page .feature-row {
	background: linear-gradient(135deg, rgba(192, 38, 211, .05), rgba(192, 38, 211, .1));
	border: 1px solid rgba(192, 38, 211, .15);
	border-radius: 14px;
	padding: 1rem 1.25rem;
	display: flex;
	align-items: center;
	gap: 1rem;
}

/* ---- pillar cards ---- */
.about-page .pillar-card {
	background: #fff;
	border: 1px solid rgba(192, 38, 211, .12);
	border-radius: 18px;
	padding: 1.75rem;
	height: 100%;
	position: relative;
	overflow: hidden;
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.about-page .pillar-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, #c026d3, #7c3aed);
	opacity: 0;
	transition: opacity .3s ease;
}

.about-page .pillar-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 40px -8px rgba(192, 38, 211, .2), 0 4px 12px rgba(20, 20, 31, .06);
	border-color: rgba(192, 38, 211, .3);
}

.about-page .pillar-card:hover::before {
	opacity: 1;
}

.about-page .pillar-card h6 {
	font-weight: 700;
	color: #1e0535;
	margin: .9rem 0 .4rem;
}

.about-page .pillar-card p {
	color: #6b7280;
	font-size: .85rem;
}

/* ---- workflow cards ---- */
.about-page .workflow-card {
	background: #fff;
	border: 1px solid rgba(192, 38, 211, .12);
	border-radius: 16px;
	padding: 1.4rem;
	height: 100%;
	transition: transform .3s ease, box-shadow .3s ease;
}

.about-page .workflow-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 14px 32px -8px rgba(192, 38, 211, .22);
}

.about-page .workflow-card .num {
	color: #c026d3;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .06em;
}

.about-page .workflow-card h6 {
	color: #1e0535;
	font-weight: 700;
}

.about-page .workflow-card p {
	color: #6b7280;
	font-size: .82rem;
}

.about-page .workflow-card.is-active {
	background: linear-gradient(135deg, #9333ea, #c026d3);
	border-color: transparent;
	box-shadow: 0 12px 32px -6px rgba(192, 38, 211, .45);
}

.about-page .workflow-card.is-active .num,
.about-page .workflow-card.is-active h6 {
	color: #fff;
}

.about-page .workflow-card.is-active p {
	color: rgba(255, 255, 255, .8);
}

/* ---- objective cards — override the multi-color palette to all-purple ---- */
#our-objectives .row > div:nth-child(4n+1) .objective-card,
#our-objectives .row > div:nth-child(4n+2) .objective-card,
#our-objectives .row > div:nth-child(4n+3) .objective-card,
#our-objectives .row > div:nth-child(4n) .objective-card {
	background: #fff;
	border: 1px solid rgba(192, 38, 211, .12);
	border-radius: 16px;
	padding: 1.4rem;
	height: 100%;
	box-shadow: none;
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

#our-objectives .row > div:nth-child(4n+1) .objective-card:hover,
#our-objectives .row > div:nth-child(4n+2) .objective-card:hover,
#our-objectives .row > div:nth-child(4n+3) .objective-card:hover,
#our-objectives .row > div:nth-child(4n) .objective-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 14px 32px -8px rgba(192, 38, 211, .2);
	border-color: rgba(192, 38, 211, .3);
}

#our-objectives .row > div:nth-child(4n+1) .objective-card i,
#our-objectives .row > div:nth-child(4n+1) .objective-card .num-badge,
#our-objectives .row > div:nth-child(4n+2) .objective-card i,
#our-objectives .row > div:nth-child(4n+2) .objective-card .num-badge,
#our-objectives .row > div:nth-child(4n+3) .objective-card i,
#our-objectives .row > div:nth-child(4n+3) .objective-card .num-badge,
#our-objectives .row > div:nth-child(4n) .objective-card i,
#our-objectives .row > div:nth-child(4n) .objective-card .num-badge {
	color: #c026d3;
}

.about-page .objective-card.is-highlight {
	background: linear-gradient(135deg, #fdf4ff, #ede9fe);
	border-color: rgba(192, 38, 211, .25);
}

.about-page .objective-card p {
	color: #374151;
}

.about-page .objective-card .num-badge {
	font-size: .7rem;
	font-weight: 800;
	color: #c026d3;
}

/* ---- value tiles ---- */
.about-page .value-tile {
	background: #fff;
	border: 1px solid rgba(192, 38, 211, .12);
	border-radius: 18px;
	padding: 1.75rem 1.25rem;
	height: 100%;
	text-align: center;
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.about-page .value-tile:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 40px -8px rgba(192, 38, 211, .2);
	border-color: rgba(192, 38, 211, .3);
}

.about-page .value-tile .icon-tile {
	margin: 0 auto 1rem;
}

.about-page .value-tile h6 {
	font-weight: 700;
	color: #1e0535;
	font-size: .95rem;
	margin-bottom: .3rem;
}

.about-page .value-tile p {
	font-size: .82rem;
	color: #6b7280;
	margin: 0;
}

/* ---- objective cards shared base ---- */
.about-page .objective-card {
	background: #fff;
	border: 1px solid rgba(192, 38, 211, .12);
	border-radius: 16px;
	padding: 1.4rem;
	height: 100%;
	box-shadow: none;
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

/* ---- vision/mission cards ---- */
.about-page .arena-section.is-soft .objective-card {
	background: #fff;
	border: 1px solid rgba(192, 38, 211, .12);
	border-radius: 18px;
	padding: 2rem;
}

.about-page .arena-section.is-soft .objective-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 40px -8px rgba(192, 38, 211, .2);
	border-color: rgba(192, 38, 211, .3);
}

.about-page .arena-section.is-soft .objective-card h4 {
	font-weight: 800;
	color: #1e0535;
}

/* ---- CTA / join-as-supplier section ---- */
.about-page .btn-arena-cta {
	background: linear-gradient(135deg, #9333ea, #c026d3);
	border: none;
	box-shadow: 0 6px 20px -4px rgba(192, 38, 211, .45);
}

.about-page .btn-arena-cta:hover {
	background: linear-gradient(135deg, #7c3aed, #a21caf);
	box-shadow: 0 10px 28px -4px rgba(192, 38, 211, .55);
	transform: translateY(-3px);
}

.about-page .btn-arena-outline {
	border-color: rgba(192, 38, 211, .5);
	color: #9333ea;
}

.about-page .btn-arena-outline:hover {
	background: rgba(192, 38, 211, .07);
	border-color: #c026d3;
	color: #c026d3;
	transform: translateY(-3px);
}

/* ---- join bubble: purple accent ---- */
.about-page .join-bubble .b1 {
	box-shadow: 0 4px 8px rgba(192, 38, 211, .2), 0 20px 40px -10px rgba(192, 38, 211, .4);
}

.about-page .join-bubble .b2 {
	box-shadow: 0 4px 8px rgba(147, 51, 234, .2), 0 16px 30px -8px rgba(147, 51, 234, .35);
}

.about-page .join-bubble .b3 {
	box-shadow: 0 4px 8px rgba(124, 58, 237, .2), 0 20px 40px -10px rgba(124, 58, 237, .4);
}

/* ---- text accent color ---- */
.about-page .text-arena-accent {
	color: #c026d3 !important;
}

/* ---- section divider line ---- */
.about-page .arena-section + .arena-section {
	border-top: 1px solid rgba(192, 38, 211, .08);
}

/* ---- section header: stack title + description vertically ---- */
.about-page .arena-section > .container > .d-flex.justify-content-between {
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: .75rem !important;
}

.about-page .arena-section > .container > .d-flex.justify-content-between > p {
	max-width: 100% !important;
	color: #6b7280;
	font-size: .95rem;
	line-height: 1.7;
}

/* =========================================================================
   Our Services page — elevated "3D" depth pass (same treatment as the
   home / about-us / submit-requirement pages). Scoped under
   .services-page only; layout, copy, colors and spacing are unchanged.
   ========================================================================= */

.services-page {
	--ease-smooth: cubic-bezier(.22, 1, .36, 1);
}

.services-page .arena-section {
	perspective: 1400px;
}

.services-page .arena-section img.rounded-4 {
	box-shadow: 0 2px 4px rgba(20, 20, 31, .06), 0 18px 30px -8px rgba(20, 20, 31, .18),
		0 40px 64px -16px rgba(75, 0, 130, .28);
	transform: perspective(1400px) rotateX(3deg) rotateY(-2deg) translateZ(0) scale(1);
	transition: transform .55s var(--ease-smooth), box-shadow .55s var(--ease-smooth);
	will-change: transform;
}

.services-page .arena-section img.rounded-4:hover {
	transform: perspective(1400px) rotateX(0deg) rotateY(0deg) translateY(-12px) translateZ(30px) scale(1.02);
	box-shadow: 0 4px 8px rgba(20, 20, 31, .08), 0 26px 40px -8px rgba(20, 20, 31, .22),
		0 56px 84px -16px rgba(75, 0, 130, .38);
}

.services-page .icon-tile {
	background: linear-gradient(145deg, #F9F6FF, #E4D9FB);
	box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .9), inset 0 -3px 5px rgba(75, 0, 130, .16),
		0 8px 16px -4px rgba(75, 0, 130, .28);
	transition: transform .4s var(--ease-smooth), box-shadow .4s var(--ease-smooth);
}

.services-page .why-row {
	border: 1px solid rgba(255, 255, 255, .7);
	transform: perspective(1200px) rotateX(2deg) translateZ(0);
	box-shadow: 0 1.5px 0 rgba(255, 255, 255, .8) inset, 0 3px 6px rgba(20, 20, 31, .04),
		0 12px 22px -8px rgba(20, 20, 31, .14), 0 26px 40px -16px rgba(75, 0, 130, .2);
	transition: transform .45s var(--ease-smooth), box-shadow .45s var(--ease-smooth);
	will-change: transform;
}

.services-page .why-row:hover {
	transform: perspective(1200px) rotateX(0deg) translateY(-8px) translateZ(20px) scale(1.02);
	box-shadow: 0 1.5px 0 rgba(255, 255, 255, .8) inset, 0 5px 10px rgba(20, 20, 31, .06),
		0 20px 32px -8px rgba(20, 20, 31, .18), 0 40px 60px -16px rgba(75, 0, 130, .3);
}

.services-page .why-row:hover .icon-tile {
	transform: scale(1.12) rotate(-4deg);
}

.services-page .project-service-card {
	background: linear-gradient(160deg, #FEFDFF, #F3EDFC);
	border: 1px solid rgba(255, 255, 255, .7);
	transform: perspective(1200px) rotateX(4deg) translateZ(0) scale(1);
	box-shadow: 0 1.5px 0 rgba(255, 255, 255, .8) inset, 0 3px 6px rgba(20, 20, 31, .05),
		0 16px 28px -8px rgba(75, 0, 130, .14), 0 34px 54px -20px rgba(75, 0, 130, .26);
	transition: transform .5s var(--ease-smooth), box-shadow .5s var(--ease-smooth);
	will-change: transform;
}

.services-page .project-service-card:hover {
	transform: perspective(1200px) rotateX(0deg) translateY(-12px) translateZ(30px) scale(1.02);
	box-shadow: 0 1.5px 0 rgba(255, 255, 255, .8) inset, 0 6px 10px rgba(20, 20, 31, .07),
		0 26px 40px -8px rgba(75, 0, 130, .2), 0 54px 80px -18px rgba(75, 0, 130, .36);
}

.services-page .join-bubble .b1,
.services-page .join-bubble .b2,
.services-page .join-bubble .b3 {
	transition: transform .5s var(--ease-smooth), box-shadow .5s var(--ease-smooth);
}

.services-page .join-bubble .b1 {
	box-shadow: 0 2px 4px rgba(242, 107, 58, .3), 0 20px 34px -10px rgba(242, 107, 58, .5);
}

.services-page .join-bubble .b2 {
	box-shadow: 0 2px 4px rgba(156, 163, 212, .3), 0 16px 26px -8px rgba(156, 163, 212, .5);
}

.services-page .join-bubble .b3 {
	box-shadow: 0 2px 4px rgba(47, 111, 237, .3), 0 20px 34px -10px rgba(47, 111, 237, .5);
}

.services-page .join-bubble:hover .b1 {
	transform: translateY(-6px) scale(1.03);
}

.services-page .join-bubble:hover .b2 {
	transform: translateY(-10px) scale(1.05);
}

.services-page .join-bubble:hover .b3 {
	transform: translateY(-4px) scale(1.03);
}

.services-page .btn-arena-cta,
.services-page .btn-arena-outline {
	transition: transform .35s var(--ease-smooth), box-shadow .35s var(--ease-smooth), background .35s var(--ease-smooth);
}

.services-page .btn-arena-cta {
	box-shadow: 0 2px 4px rgba(75, 0, 130, .25), 0 14px 24px -8px rgba(75, 0, 130, .45);
}

.services-page .btn-arena-cta:hover,
.services-page .btn-arena-outline:hover {
	transform: translateY(-4px) scale(1.03);
}

.services-page .btn-arena-cta:hover {
	box-shadow: 0 4px 8px rgba(75, 0, 130, .3), 0 22px 36px -8px rgba(75, 0, 130, .5);
}

.services-page .btn-arena-cta:active,
.services-page .btn-arena-outline:active {
	transform: translateY(-1px) scale(1.01);
	transition-duration: .12s;
}

@media (max-width: 767px) {

	.services-page .why-row,
	.services-page .project-service-card,
	.services-page .arena-section img.rounded-4 {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {

	.services-page .arena-section img.rounded-4,
	.services-page .icon-tile,
	.services-page .why-row,
	.services-page .project-service-card,
	.services-page .join-bubble .b1,
	.services-page .join-bubble .b2,
	.services-page .join-bubble .b3,
	.services-page .btn-arena-cta,
	.services-page .btn-arena-outline {
		transition: none;
		transform: none;
	}
}

/* =========================================================================
   Our Services — Modern Purple Redesign
   Full visual overhaul using only the site purple palette.
   Header (.page-banner) is unchanged.
   ========================================================================= */

/* ---- section rhythm ---- */
.services-page .arena-section {
	padding-top: 4.5rem;
	padding-bottom: 4.5rem;
}

.services-page .arena-section.is-soft {
	background: linear-gradient(180deg, #faf8ff 0%, #f3effe 100%);
}

.services-page .arena-section + .arena-section {
	border-top: 1px solid rgba(192, 38, 211, .08);
}

/* ---- intro section ---- */
.services-page .arena-eyebrow {
	color: #9333ea;
	font-weight: 700;
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .07em;
	margin-bottom: .6rem;
}

.services-page .arena-section h2 {
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	font-weight: 800;
	color: #1e0535;
	line-height: 1.2;
}

.services-page .arena-section p {
	color: #4b5563;
	line-height: 1.75;
}

/* ---- hero image ---- */
.services-page .arena-section img.rounded-4 {
	border: 1px solid rgba(192, 38, 211, .12);
	box-shadow: 0 4px 12px rgba(20, 20, 31, .06), 0 20px 48px -12px rgba(192, 38, 211, .22);
	transform: none;
	transition: box-shadow .35s ease, transform .35s ease;
}

.services-page .arena-section img.rounded-4:hover {
	box-shadow: 0 8px 20px rgba(20, 20, 31, .08), 0 32px 64px -14px rgba(192, 38, 211, .32);
	transform: translateY(-6px);
}

/* ---- section header (why arena) ---- */
.services-page .arena-section-header h2 {
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	font-weight: 800;
	color: #1e0535;
}

/* ---- service cards grid ---- */
.services-page .project-services-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
}

.services-page .project-service-card {
	background: #fff;
	border: 1px solid rgba(192, 38, 211, .12);
	border-radius: 20px;
	padding: 1.75rem;
	box-shadow: none;
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
	position: relative;
	overflow: hidden;
}

.services-page .project-service-card::before {
	content: '';
	position: absolute;
	top: 0;
	inset-inline-start: 0;
	inset-inline-end: 0;
	height: 3px;
	background: linear-gradient(90deg, #c026d3, #7c3aed);
	opacity: 0;
	transition: opacity .3s ease;
}

.services-page .project-service-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 40px -8px rgba(192, 38, 211, .2), 0 4px 12px rgba(20, 20, 31, .05);
	border-color: rgba(192, 38, 211, .3);
}

.services-page .project-service-card:hover::before {
	opacity: 1;
}

.services-page .project-service-card h5 {
	color: #1e0535;
	font-size: 1rem;
	font-weight: 800;
	margin-bottom: .55rem;
}

.services-page .project-service-card p {
	color: #6b7280;
	font-size: .85rem;
	line-height: 1.65;
}

.services-page .project-service-card .included-label {
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #9333ea;
	border-bottom: 1px solid rgba(192, 38, 211, .15);
	padding-bottom: .45rem;
	margin: .85rem 0 .5rem;
}

.services-page .project-service-card ul li {
	color: #4b5563;
	font-size: .83rem;
}

.services-page .project-service-card ul li i {
	color: #c026d3;
	font-size: .42rem;
	margin-top: .55rem;
}

/* ---- request service button ---- */
.services-page .request-service-btn {
	margin-top: auto;
	align-self: flex-start;
	border-color: rgba(192, 38, 211, .4);
	color: #9333ea;
	border-radius: 10px;
	font-size: .82rem;
	font-weight: 600;
	padding: .45rem 1rem;
	transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}

.services-page .request-service-btn:hover {
	background: rgba(192, 38, 211, .07);
	border-color: #c026d3;
	color: #c026d3;
	transform: translateY(-2px);
}

/* ---- why arena rows ---- */
.services-page .why-row {
	background: #fff;
	border: 1px solid rgba(192, 38, 211, .12);
	border-radius: 14px;
	padding: 1rem 1.25rem;
	box-shadow: none;
	transform: none;
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.services-page .why-row:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px -8px rgba(192, 38, 211, .18);
	border-color: rgba(192, 38, 211, .28);
}

.services-page .icon-tile {
	background: linear-gradient(145deg, #f3e8ff, #e9d5ff);
	color: #7c3aed;
	border: 1px solid rgba(192, 38, 211, .2);
	border-radius: 12px;
	box-shadow: none;
	transition: transform .3s ease;
}

.services-page .why-row:hover .icon-tile {
	transform: scale(1.1) rotate(-4deg);
}

.services-page .why-row span {
	color: #374151;
	font-weight: 500;
}

/* ---- CTA / join section ---- */
.services-page .btn-arena-cta {
	background: linear-gradient(135deg, #9333ea, #c026d3);
	border: none;
	box-shadow: 0 6px 20px -4px rgba(192, 38, 211, .4);
	transition: transform .3s ease, box-shadow .3s ease;
}

.services-page .btn-arena-cta:hover {
	background: linear-gradient(135deg, #7c3aed, #a21caf);
	box-shadow: 0 10px 28px -4px rgba(192, 38, 211, .52);
	transform: translateY(-3px);
}

.services-page .btn-arena-outline {
	border-color: rgba(192, 38, 211, .45);
	color: #9333ea;
	transition: transform .3s ease, background .3s ease, border-color .3s ease;
}

.services-page .btn-arena-outline:hover {
	background: rgba(192, 38, 211, .07);
	border-color: #c026d3;
	color: #c026d3;
	transform: translateY(-3px);
}

.services-page .join-bubble .b1,
.services-page .join-bubble .b2,
.services-page .join-bubble .b3 {
	transition: transform .5s ease, box-shadow .5s ease;
}

.services-page .join-bubble .b1 {
	box-shadow: 0 4px 8px rgba(192, 38, 211, .2), 0 20px 40px -10px rgba(192, 38, 211, .4);
}

.services-page .join-bubble .b2 {
	box-shadow: 0 4px 8px rgba(147, 51, 234, .2), 0 16px 30px -8px rgba(147, 51, 234, .35);
}

.services-page .join-bubble .b3 {
	box-shadow: 0 4px 8px rgba(124, 58, 237, .2), 0 20px 40px -10px rgba(124, 58, 237, .4);
}

.services-page .join-bubble:hover .b1 { transform: translateY(-6px) scale(1.03); }
.services-page .join-bubble:hover .b2 { transform: translateY(-10px) scale(1.05); }
.services-page .join-bubble:hover .b3 { transform: translateY(-4px) scale(1.03); }

/* ---- mobile: 2 cards per row ---- */
@media (max-width: 767px) {
	.services-page .project-services-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: .85rem;
	}

	.services-page .project-service-card {
		padding: 1.2rem;
		transform: none;
	}

	.services-page .why-row {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.services-page .project-service-card,
	.services-page .why-row,
	.services-page .icon-tile,
	.services-page .arena-section img.rounded-4,
	.services-page .request-service-btn,
	.services-page .btn-arena-cta,
	.services-page .btn-arena-outline,
	.services-page .join-bubble .b1,
	.services-page .join-bubble .b2,
	.services-page .join-bubble .b3 {
		transition: none;
		transform: none;
	}
}

/* =========================================================================
   Training & Jobs page — elevated "3D" depth pass (same treatment as the
   other pages). Scoped under .training-jobs-page only; this page uses
   its own class names (.investment-*, .knowlage_hub_*, .hover-card)
   rather than the shared arena-section-card system, so it gets its
   own matching rules. Layout, copy and colors are unchanged.
   ========================================================================= */

.training-jobs-page {
	--ease-smooth: cubic-bezier(.22, 1, .36, 1);
}

.training-jobs-page section {
	perspective: 1400px;
}

.training-jobs-page .investment-image img,
.training-jobs-page .knowlage_hub_img img {
	box-shadow: 0 2px 4px rgba(20, 20, 31, .06), 0 18px 30px -8px rgba(20, 20, 31, .18),
		0 40px 64px -16px rgba(75, 0, 130, .28);
	transform: perspective(1400px) rotateX(3deg) rotateY(-2deg) translateZ(0) scale(1);
	transition: transform .55s var(--ease-smooth), box-shadow .55s var(--ease-smooth);
	will-change: transform;
}

.training-jobs-page .investment-image img:hover,
.training-jobs-page .knowlage_hub_img img:hover {
	transform: perspective(1400px) rotateX(0deg) rotateY(0deg) translateY(-12px) translateZ(30px) scale(1.02);
	box-shadow: 0 4px 8px rgba(20, 20, 31, .08), 0 26px 40px -8px rgba(20, 20, 31, .22),
		0 56px 84px -16px rgba(75, 0, 130, .38);
}

.training-jobs-page .hover-card {
	transform: perspective(1200px) rotateX(3deg) translateZ(0) scale(1);
	box-shadow: 0 2px 4px rgba(20, 20, 31, .05), 0 14px 24px -8px rgba(20, 20, 31, .12),
		0 30px 48px -18px rgba(75, 0, 130, .22) !important;
	transition: transform .45s var(--ease-smooth), box-shadow .45s var(--ease-smooth) !important;
	will-change: transform;
}

.training-jobs-page .hover-card:hover {
	transform: perspective(1200px) rotateX(0deg) translateY(-10px) translateZ(24px) scale(1.03) !important;
	box-shadow: 0 4px 8px rgba(20, 20, 31, .08), 0 22px 34px -8px rgba(20, 20, 31, .18),
		0 46px 68px -16px rgba(75, 0, 130, .32) !important;
}

.training-jobs-page .join-usp .btn-primary {
	transition: transform .35s var(--ease-smooth), box-shadow .35s var(--ease-smooth);
	box-shadow: 0 2px 4px rgba(20, 20, 31, .15), 0 14px 24px -8px rgba(20, 20, 31, .3);
}

.training-jobs-page .join-usp .btn-primary:hover {
	transform: translateY(-4px) scale(1.03);
	box-shadow: 0 4px 8px rgba(20, 20, 31, .18), 0 22px 36px -8px rgba(20, 20, 31, .35);
}

.training-jobs-page .join-usp .btn-primary:active {
	transform: translateY(-1px) scale(1.01);
	transition-duration: .12s;
}

@media (max-width: 767px) {

	.training-jobs-page .investment-image img,
	.training-jobs-page .knowlage_hub_img img,
	.training-jobs-page .hover-card {
		transform: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {

	.training-jobs-page .investment-image img,
	.training-jobs-page .knowlage_hub_img img,
	.training-jobs-page .hover-card,
	.training-jobs-page .join-usp .btn-primary {
		transition: none !important;
		transform: none !important;
	}
}

/* =========================================================================
   Contact Us page — elevated "3D" depth pass. This page had no custom
   styling at all (plain Bootstrap .card.border-0), so we only add
   depth/motion to the existing cards and button — no layout, copy,
   spacing or color changes.
   ========================================================================= */

.contact-area {
	--ease-smooth: cubic-bezier(.22, 1, .36, 1);
	perspective: 1400px;
}

.contact-area .card {
	background: linear-gradient(160deg, #fff, #f7f4fc);
	border-radius: 14px;
	transform: perspective(1200px) rotateX(3deg) translateZ(0) scale(1);
	box-shadow: 0 1.5px 0 rgba(255, 255, 255, .8) inset, 0 3px 6px rgba(20, 20, 31, .05),
		0 16px 28px -10px rgba(75, 0, 130, .14), 0 34px 54px -20px rgba(75, 0, 130, .22);
	transition: transform .5s var(--ease-smooth), box-shadow .5s var(--ease-smooth);
	will-change: transform;
}

.contact-area .card:hover {
	transform: perspective(1200px) rotateX(0deg) translateY(-8px) translateZ(20px) scale(1.01);
	box-shadow: 0 1.5px 0 rgba(255, 255, 255, .8) inset, 0 6px 10px rgba(20, 20, 31, .07),
		0 26px 40px -10px rgba(75, 0, 130, .2), 0 54px 80px -18px rgba(75, 0, 130, .3);
}

.contact-area .btn-primary {
	box-shadow: 0 2px 4px rgba(75, 0, 130, .25), 0 14px 24px -8px rgba(75, 0, 130, .4);
	transition: transform .35s var(--ease-smooth), box-shadow .35s var(--ease-smooth);
}

.contact-area .btn-primary:hover {
	transform: translateY(-4px) scale(1.03);
	box-shadow: 0 4px 8px rgba(75, 0, 130, .3), 0 22px 36px -8px rgba(75, 0, 130, .45);
}

.contact-area .btn-primary:active {
	transform: translateY(-1px) scale(1.01);
	transition-duration: .12s;
}

.contact-area .social-icons a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #f3EFFE;
	color: var(--arena-accent, #4B0082);
	transition: transform .3s var(--ease-smooth), box-shadow .3s var(--ease-smooth), background .3s ease;
}

.contact-area .social-icons a:hover {
	transform: translateY(-3px) scale(1.08);
	box-shadow: 0 8px 16px -4px rgba(75, 0, 130, .35);
	background: var(--arena-accent, #4B0082);
	color: #fff;
}

@media (max-width: 767px) {
	.contact-area .card {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {

	.contact-area .card,
	.contact-area .btn-primary,
	.contact-area .social-icons a {
		transition: none;
		transform: none;
	}
}

/* =========================================================================
   Submit Requirements Form page — elevated "3D" depth pass.
   The outer .form-shell and .form-subblock containers hold many nested
   inputs, so they only get a richer resting shadow (no tilt/hover-shift,
   to avoid the block moving under the cursor while filling a field).
   The small standalone selectable elements (stage pills, radio cards,
   upload box, buttons) get the full tilt + hover-pop treatment.
   ========================================================================= */

.submit-requirement-form-page {
	--ease-smooth: cubic-bezier(.22, 1, .36, 1);
}

.submit-requirement-form-page .form-shell {
	box-shadow: 0 2px 4px rgba(20, 20, 31, .05), 0 20px 40px -14px rgba(75, 0, 130, .16),
		0 44px 70px -22px rgba(75, 0, 130, .22);
}

.submit-requirement-form-page .form-subblock {
	background: linear-gradient(165deg, #fff, #FAF8FD);
	box-shadow: 0 2px 4px rgba(20, 20, 31, .03), 0 10px 20px -12px rgba(75, 0, 130, .12);
	transition: box-shadow .4s var(--ease-smooth);
}

.submit-requirement-form-page .step-num {
	background: linear-gradient(145deg, #D946E0, var(--arena-accent));
	box-shadow: 0 4px 10px -2px rgba(75, 0, 130, .5);
}

.submit-requirement-form-page .stage-pill,
.submit-requirement-form-page .radio-card {
	background: #fff;
	transform: perspective(1000px) rotateX(3deg) translateZ(0) scale(1);
	box-shadow: 0 2px 4px rgba(20, 20, 31, .04), 0 10px 18px -8px rgba(20, 20, 31, .1);
	transition: transform .35s var(--ease-smooth), box-shadow .35s var(--ease-smooth),
		border-color .15s ease, background .15s ease;
	will-change: transform;
}

.submit-requirement-form-page .stage-pill:hover,
.submit-requirement-form-page .radio-card:hover {
	transform: perspective(1000px) rotateX(0deg) translateY(-4px) translateZ(10px) scale(1.02);
	box-shadow: 0 4px 8px rgba(20, 20, 31, .06), 0 16px 26px -8px rgba(75, 0, 130, .2);
}

.submit-requirement-form-page .stage-pill.is-selected,
.submit-requirement-form-page .radio-card.is-selected {
	box-shadow: 0 4px 8px rgba(75, 0, 130, .12), 0 14px 24px -8px rgba(75, 0, 130, .28);
}

.submit-requirement-form-page .upload-box {
	transition: transform .4s var(--ease-smooth), box-shadow .4s var(--ease-smooth), border-color .3s ease;
}

.submit-requirement-form-page .upload-box:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 28px -10px rgba(75, 0, 130, .2);
	border-color: var(--arena-accent);
}

.submit-requirement-form-page .icon-tile {
	background: linear-gradient(145deg, #F9F6FF, #E4D9FB);
	box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .9), inset 0 -3px 5px rgba(75, 0, 130, .16),
		0 8px 16px -4px rgba(75, 0, 130, .28);
}

.submit-requirement-form-page .btn-arena-accent,
.submit-requirement-form-page .btn-arena-outline {
	transition: transform .35s var(--ease-smooth), box-shadow .35s var(--ease-smooth), background .35s var(--ease-smooth);
}

.submit-requirement-form-page .btn-arena-accent {
	box-shadow: 0 2px 4px rgba(75, 0, 130, .25), 0 14px 24px -8px rgba(75, 0, 130, .45);
}

.submit-requirement-form-page .btn-arena-accent:hover,
.submit-requirement-form-page .btn-arena-outline:hover {
	transform: translateY(-3px) scale(1.02);
}

.submit-requirement-form-page .btn-arena-accent:hover {
	box-shadow: 0 4px 8px rgba(75, 0, 130, .3), 0 20px 32px -8px rgba(75, 0, 130, .5);
}

.submit-requirement-form-page .btn-arena-accent:active,
.submit-requirement-form-page .btn-arena-outline:active {
	transform: translateY(-1px) scale(1.01);
	transition-duration: .12s;
}

@media (max-width: 767px) {

	.submit-requirement-form-page .stage-pill,
	.submit-requirement-form-page .radio-card {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {

	.submit-requirement-form-page .form-subblock,
	.submit-requirement-form-page .stage-pill,
	.submit-requirement-form-page .radio-card,
	.submit-requirement-form-page .upload-box,
	.submit-requirement-form-page .btn-arena-accent,
	.submit-requirement-form-page .btn-arena-outline {
		transition: none;
		transform: none;
	}
}

/* =========================================================================
   Marketplace / product listing page (filter-products.blade.php)
   Elevated "3D" depth pass. The filter sidebar holds many checkboxes,
   so it only gets a richer resting shadow (no tilt/hover-shift). The
   product tiles themselves are the standalone clickable cards, so they
   get the full tilt + hover-pop treatment.
   ========================================================================= */

.product-list-page {
	--ease-smooth: cubic-bezier(.22, 1, .36, 1);
}

.product-list-page .product-filters .card {
	box-shadow: 0 2px 4px rgba(20, 20, 31, .04), 0 16px 28px -12px rgba(75, 0, 130, .14),
		0 34px 54px -20px rgba(75, 0, 130, .18);
}

.product-list-page .filtered-products>.d-flex.justify-content-between {
	box-shadow: 0 2px 4px rgba(20, 20, 31, .04), 0 14px 24px -10px rgba(75, 0, 130, .12);
}

.product-list-page .product-grid-container {
	perspective: 1400px;
}

.product-list-page .product-grid-item>a {
	display: block;
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
	transform: perspective(1200px) rotateX(3deg) translateZ(0) scale(1);
	box-shadow: 0 2px 4px rgba(20, 20, 31, .05), 0 14px 24px -10px rgba(20, 20, 31, .12),
		0 30px 48px -18px rgba(75, 0, 130, .2);
	transition: transform .45s var(--ease-smooth), box-shadow .45s var(--ease-smooth);
	will-change: transform;
}

.product-list-page .product-grid-item>a:hover {
	transform: perspective(1200px) rotateX(0deg) translateY(-10px) translateZ(24px) scale(1.02);
	box-shadow: 0 4px 8px rgba(20, 20, 31, .08), 0 22px 34px -8px rgba(20, 20, 31, .16),
		0 46px 68px -16px rgba(75, 0, 130, .3);
}

.product-list-page .filtered-by-box {
	transition: transform .3s var(--ease-smooth), box-shadow .3s var(--ease-smooth);
}

.product-list-page .filtered-by-box:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 14px -4px rgba(75, 0, 130, .25);
}

.product-list-page .product-filters .btn-primary,
.product-list-page #load_more .btn {
	box-shadow: 0 2px 4px rgba(75, 0, 130, .25), 0 14px 24px -8px rgba(75, 0, 130, .4);
	transition: transform .35s var(--ease-smooth), box-shadow .35s var(--ease-smooth), background .35s var(--ease-smooth);
}

.product-list-page .product-filters .btn-primary:hover,
.product-list-page #load_more .btn:hover {
	transform: translateY(-3px) scale(1.03);
	box-shadow: 0 4px 8px rgba(75, 0, 130, .3), 0 20px 32px -8px rgba(75, 0, 130, .45);
}

.product-list-page .product-filters .btn-primary:active,
.product-list-page #load_more .btn:active {
	transform: translateY(-1px) scale(1.01);
	transition-duration: .12s;
}

/* =========================================================================
   Company / supplier banner (company-banner.blade.php) — modern refresh
   Shared across the products, about and contact tabs of a company page.
   ========================================================================= */

.company-products-page .company-banner-card {
	background: #fff;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 2px 4px rgba(20, 20, 31, .05), 0 20px 40px -16px rgba(75, 0, 130, .16),
		0 40px 64px -24px rgba(75, 0, 130, .2);
	margin-bottom: 1.5rem;
}

.company-products-page .company-banner-cover {
	height: 130px;
	background: linear-gradient(135deg, var(--arena-ink-deep, #3B0A45) 0%, var(--arena-accent, #C026D3) 100%);
}

.company-products-page .company-banner-header {
	display: flex;
	align-items: flex-end;
	gap: 1.5rem;
	padding: 0 .5rem 1.5rem;
	margin-top: -48px;
}

.company-products-page .company-banner-logo {
	flex-shrink: 0;
	width: 112px;
	height: 112px;
	border-radius: 50%;
	background: #fff;
	padding: 5px;
	box-shadow: 0 6px 18px -4px rgba(20, 20, 31, .25);
}

.company-products-page .company-banner-logo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	background: var(--arena-bg-soft, #F4F4F7);
}

.company-products-page .company-banner-meta {
	padding-top: 56px;
	padding-bottom: .35rem;
}

.company-products-page .company-banner-meta h4 {
	font-weight: 700;
	color: var(--arena-ink, #14141F);
	margin-bottom: .35rem;
}

.company-products-page .company-banner-rating {
	color: #F5A623;
	font-size: .85rem;
	margin-bottom: .35rem;
}

.company-products-page .company-banner-rating i {
	margin-inline-end: 1px;
}

.company-products-page .company-banner-location {
	color: var(--arena-muted, #6B7280);
	font-size: .85rem;
	margin: 0;
}

.company-products-page .company-banner-location i {
	color: var(--arena-accent, #C026D3);
	margin-inline-end: .35rem;
}

.company-products-page .company-banner-nav {
	background: #fff !important;
	border-top: 1px solid var(--arena-line, #E6E6EC);
	padding: 0 .5rem;
}

.company-products-page .company-banner-nav .nav-link {
	position: relative;
	font-weight: 600;
	color: var(--arena-ink, #14141F);
	padding: .9rem .25rem;
	margin-inline-end: 1.5rem;
	transition: color .2s ease;
}

.company-products-page .company-banner-nav .nav-link::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 2px;
	background: var(--arena-accent, #C026D3);
	transition: width .3s cubic-bezier(.22, 1, .36, 1);
}

.company-products-page .company-banner-nav .nav-link:hover,
.company-products-page .company-banner-nav .nav-link.active {
	color: var(--arena-accent, #C026D3);
}

.company-products-page .company-banner-nav .nav-link:hover::after,
.company-products-page .company-banner-nav .nav-link.active::after {
	width: 100%;
}

.company-products-page .company-banner-search {
	background: var(--arena-bg-soft, #F4F4F7);
	border-radius: 50px;
	padding: 4px 4px 4px 16px;
	align-items: center;
	gap: .5rem;
}

.company-products-page .company-banner-search .form-control {
	border: none;
	background: none;
	box-shadow: none;
	font-size: .85rem;
}

.company-products-page .company-banner-search .form-control:focus {
	box-shadow: none;
}

.company-products-page .company-banner-search .search-btn {
	background: var(--arena-accent, #C026D3);
	border: none;
	color: #fff;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	flex-shrink: 0;
	transition: background-color .2s ease;
}

.company-products-page .company-banner-search .search-btn:hover {
	background: var(--arena-accent-dark, #A21CAF);
}

@media (max-width: 575px) {
	.company-products-page .company-banner-header {
		flex-direction: column;
		align-items: center;
		text-align: center;
		margin-top: -40px;
	}

	.company-products-page .company-banner-logo {
		width: 92px;
		height: 92px;
	}
}

/* ---- supplier products empty / no-results state ---- */
.company-products-page .supplier-empty-state {
	text-align: center;
	padding: 4rem 1rem;
	background: #fff;
	border: 1px solid var(--arena-line, #E6E6EC);
	border-radius: 16px;
}

.company-products-page .supplier-empty-state i {
	font-size: 2.75rem;
	color: var(--arena-line, #E6E6EC);
	margin-bottom: 1rem;
}

.company-products-page .supplier-empty-state h5 {
	font-weight: 700;
	color: var(--arena-ink, #14141F);
	margin-bottom: .5rem;
}

.company-products-page .supplier-empty-state p {
	color: var(--arena-muted, #6B7280);
	max-width: 420px;
	margin: 0 auto 1.25rem;
}

.company-products-page .supplier-empty-state .btn-arena-accent {
	display: inline-flex;
	align-items: center;
	background: var(--arena-accent, #C026D3);
	border: none;
	color: #fff;
	font-weight: 600;
	font-size: .85rem;
	padding: .6rem 1.4rem;
	border-radius: 50px;
	text-decoration: none;
	transition: background-color .25s ease, transform .25s ease;
}

.company-products-page .supplier-empty-state .btn-arena-accent:hover {
	background: var(--arena-accent-dark, #A21CAF);
	color: #fff;
	transform: translateY(-1px);
}

/* =========================================================================
   Suppliers listing page — modern refresh
   ========================================================================= */

.suppliers-page {
	--arena-accent: #C026D3;
	--arena-accent-dark: #A21CAF;
	--arena-ink: #14141F;
	--arena-muted: #6B7280;
	--arena-line: #E6E6EC;
	--arena-bg-soft: #F4F4F7;
	background: #fff;
}

.suppliers-page .suppliers-hero {
	background: linear-gradient(135deg, var(--arena-ink-deep, #3B0A45) 0%, var(--arena-accent) 100%);
	padding: 4rem 0 5rem;
	text-align: center;
	color: #fff;
}

.suppliers-page .suppliers-hero .arena-eyebrow {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: .8rem;
	font-weight: 600;
	color: #F3D9FA;
	margin-bottom: .5rem;
}

.suppliers-page .suppliers-hero h1 {
	font-weight: 700;
	font-size: 2.25rem;
	margin-bottom: .5rem;
}

.suppliers-page .suppliers-hero p {
	color: rgba(255, 255, 255, .85);
	max-width: 560px;
	margin: 0 auto 2rem;
}

.suppliers-page .suppliers-search {
	max-width: 640px;
	margin: 0 auto;
}

.suppliers-page .search-box {
	display: flex;
	justify-content: space-between;
	background: #fff;
	border-radius: 50px;
	padding: 6px 6px 6px 22px;
	box-shadow: 0 12px 32px rgba(20, 20, 31, .18);
	width: 100%;
}

.suppliers-page .search-input {
	border: none;
	background: none;
	outline: none;
	width: 100%;
	padding: 10px;
	font-size: 1rem;
	color: var(--arena-ink);
}

.suppliers-page .search-input::placeholder {
	color: #9AA0AC;
}

.suppliers-page .search-btn {
	background: var(--arena-accent);
	border: none;
	color: #fff;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color .25s ease, transform .25s ease;
	flex-shrink: 0;
}

.suppliers-page .search-btn:hover {
	background: var(--arena-accent-dark);
	transform: scale(1.05);
}

.suppliers-page .suppliers-list {
	padding: 3.5rem 0 4rem;
}

.suppliers-page .supplier-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.5rem;
}

.suppliers-page .supplier-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: #fff;
	border: 1px solid var(--arena-line);
	border-radius: 16px;
	padding: 2rem 1.25rem 1.5rem;
	box-shadow: 0 8px 24px rgba(20, 20, 31, .05);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.suppliers-page .supplier-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 36px rgba(20, 20, 31, .12);
	border-color: var(--arena-accent);
}

.suppliers-page .supplier-card-logo {
	width: 84px;
	height: 84px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--arena-bg-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1rem;
	border: 1px solid var(--arena-line);
}

.suppliers-page .supplier-card-logo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.suppliers-page .supplier-card-name {
	font-weight: 600;
	font-size: 1rem;
	color: var(--arena-ink);
	text-decoration: none;
	margin-bottom: .25rem;
}

.suppliers-page .supplier-card-name:hover {
	color: var(--arena-accent);
}

.suppliers-page .supplier-card-type {
	font-size: .8rem;
	color: var(--arena-muted);
	margin-bottom: .5rem;
}

.suppliers-page .supplier-card-rating {
	color: #F5A623;
	font-size: .8rem;
	margin-bottom: 1.1rem;
}

.suppliers-page .supplier-card-rating i {
	margin: 0 1px;
}

.suppliers-page .supplier-card-btn {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	background: var(--arena-accent);
	color: #fff;
	font-size: .85rem;
	font-weight: 600;
	padding: .55rem 1.1rem;
	border-radius: 50px;
	text-decoration: none;
	transition: background-color .25s ease, transform .25s ease;
}

.suppliers-page .supplier-card-btn:hover {
	background: var(--arena-accent-dark);
	color: #fff;
	transform: translateX(2px);
}

.suppliers-page .suppliers-empty {
	text-align: center;
	padding: 4rem 0;
	color: var(--arena-muted);
}

.suppliers-page .suppliers-empty i {
	font-size: 2.5rem;
	margin-bottom: 1rem;
	color: var(--arena-line);
}

@media (max-width: 991px) {
	.suppliers-page .supplier-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 575px) {
	.suppliers-page .suppliers-hero h1 {
		font-size: 1.6rem;
	}

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

@media (prefers-reduced-motion: reduce) {
	.company-products-page .company-banner-card .nav-link::after {
		transition: none;
	}
}

@media (max-width: 767px) {
	.product-list-page .product-grid-item>a {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {

	.product-list-page .product-grid-item>a,
	.product-list-page .filtered-by-box,
	.product-list-page .product-filters .btn-primary,
	.product-list-page #load_more .btn {
		transition: none;
		transform: none;
	}
}

/* =========================================================================
   Submit-Requirement success page — elevated "3D" depth pass.
   ========================================================================= */

.submit-requirement-success-page {
	--ease-smooth: cubic-bezier(.22, 1, .36, 1);
}

.submit-requirement-success-page .icon-tile {
	background: linear-gradient(145deg, #E9FBF3, #C7F3DC);
	color: #16A34A;
	box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .9), inset 0 -3px 5px rgba(22, 163, 74, .18),
		0 12px 22px -6px rgba(22, 163, 74, .35);
}

.submit-requirement-success-page .form-shell {
	box-shadow: 0 2px 4px rgba(20, 20, 31, .05), 0 20px 40px -14px rgba(75, 0, 130, .16),
		0 44px 70px -22px rgba(75, 0, 130, .22);
}

.submit-requirement-success-page .btn-arena-accent {
	box-shadow: 0 2px 4px rgba(75, 0, 130, .25), 0 14px 24px -8px rgba(75, 0, 130, .45);
	transition: transform .35s var(--ease-smooth), box-shadow .35s var(--ease-smooth), background .35s var(--ease-smooth);
}

.submit-requirement-success-page .btn-arena-accent:hover {
	transform: translateY(-4px) scale(1.03);
	box-shadow: 0 4px 8px rgba(75, 0, 130, .3), 0 22px 36px -8px rgba(75, 0, 130, .5);
}

.submit-requirement-success-page .btn-arena-accent:active {
	transform: translateY(-1px) scale(1.01);
	transition-duration: .12s;
}

@media (prefers-reduced-motion: reduce) {
	.submit-requirement-success-page .btn-arena-accent {
		transition: none;
		transform: none;
	}
}

/* =========================================================================
   Product details page — Add to Cart / Order Now / Wishlist buttons.
   This page has no .arena-welcome wrapper, so these are self-contained
   (hardcoded brand colors via the globally-available --primary-color).
   ========================================================================= */

.product-buy-actions {
	gap: .75rem;
	flex-wrap: wrap;
}

.buy-action-btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .7rem 1.5rem;
	border-radius: 10px;
	font-weight: 600;
	transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s cubic-bezier(.22, 1, .36, 1),
		background-color .25s ease, color .25s ease;
}

.add-to-cart-btn.btn-outline-primary {
	background: #fff;
	border: 1.5px solid var(--primary-color);
	color: var(--primary-color);
	box-shadow: 0 2px 4px rgba(75, 0, 130, .1), 0 10px 18px -10px rgba(75, 0, 130, .3);
}

.add-to-cart-btn.btn-outline-primary:hover:not(:disabled) {
	background: var(--primary-color);
	color: #fff;
	transform: translateY(-3px);
	box-shadow: 0 4px 8px rgba(75, 0, 130, .18), 0 16px 26px -8px rgba(75, 0, 130, .4);
}

.order-now-btn.btn-primary {
	background: linear-gradient(155deg, #6a1bb3, var(--primary-color));
	border: 0;
	color: #fff;
	box-shadow: 0 2px 4px rgba(75, 0, 130, .3), 0 14px 24px -8px rgba(75, 0, 130, .5);
}

.order-now-btn.btn-primary:hover:not(:disabled) {
	transform: translateY(-3px) scale(1.02);
	box-shadow: 0 4px 8px rgba(75, 0, 130, .35), 0 22px 36px -8px rgba(75, 0, 130, .55);
}

.buy-action-btn:active:not(:disabled) {
	transform: translateY(-1px) scale(1.005);
	transition-duration: .12s;
}

.buy-action-btn:disabled {
	opacity: .7;
	cursor: not-allowed;
	transform: none !important;
}

.wishlist-btn {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	background: #fff;
	border: 1.5px solid #E6E6EC;
	border-radius: 10px;
	padding: .65rem 1.1rem;
	color: #6B7280;
	font-weight: 600;
	box-shadow: 0 2px 4px rgba(20, 20, 31, .06), 0 10px 18px -10px rgba(20, 20, 31, .2);
	transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s cubic-bezier(.22, 1, .36, 1),
		border-color .2s ease;
}

.wishlist-btn:hover {
	transform: translateY(-3px);
	border-color: #E14A4A;
	box-shadow: 0 4px 8px rgba(20, 20, 31, .1), 0 16px 26px -8px rgba(225, 74, 74, .3);
}

.wishlist-btn i {
	transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}

.wishlist-btn:hover i {
	transform: scale(1.15);
}

@media (max-width: 480px) {
	.product-buy-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.buy-action-btn,
	.wishlist-btn {
		justify-content: center;
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {

	.buy-action-btn,
	.wishlist-btn,
	.wishlist-btn i {
		transition: none;
	}
}

/* =========================================================================
   Company details page (supplier-details.blade.php) — modern refresh
   ========================================================================= */

.company-details-page .company-profile-card {
	background: #fff;
	border: 1px solid var(--arena-line, #E6E6EC);
	border-radius: 16px;
	box-shadow: 0 8px 24px rgba(20, 20, 31, .05);
	padding: 2rem;
	margin-bottom: 2.5rem;
}

.company-details-page .company-profile-card .arena-eyebrow {
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: .78rem;
	font-weight: 600;
	color: var(--arena-accent, #C026D3);
	margin-bottom: .35rem;
}

.company-details-page .company-profile-card h2 {
	font-weight: 700;
	color: var(--arena-ink, #14141F);
	margin-bottom: 1.5rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--arena-line, #E6E6EC);
}

.company-details-page .company-profile-body {
	display: flex;
	gap: 2rem;
	align-items: flex-start;
}

.company-details-page .company-profile-logo {
	flex-shrink: 0;
	width: 160px;
	height: 160px;
	border-radius: 16px;
	overflow: hidden;
	background: var(--arena-bg-soft, #F4F4F7);
	border: 1px solid var(--arena-line, #E6E6EC);
	display: flex;
	align-items: center;
	justify-content: center;
}

.company-details-page .company-profile-logo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.company-details-page .company-profile-info {
	flex: 1;
	min-width: 0;
}

.company-details-page .company-info-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem 2rem;
}

.company-details-page .company-info-item {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--arena-line, #E6E6EC);
}

.company-details-page .company-info-item .label {
	font-size: .78rem;
	color: var(--arena-muted, #6B7280);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.company-details-page .company-info-item .value {
	font-weight: 600;
	color: var(--arena-ink, #14141F);
}

.company-details-page .company-description {
	margin-top: 1.75rem;
}

.company-details-page .company-description .label {
	display: block;
	font-size: .78rem;
	color: var(--arena-muted, #6B7280);
	text-transform: uppercase;
	letter-spacing: .04em;
	margin-bottom: .5rem;
}

.company-details-page .company-description .value {
	color: var(--arena-ink, #14141F);
	line-height: 1.7;
}

@media (max-width: 767px) {
	.company-details-page .company-profile-body {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.company-details-page .company-info-grid {
		grid-template-columns: 1fr;
	}
}

/* ---- contact supplier form ---- */
.company-details-page .contact-supplier-body {
	max-width: 620px;
	margin: 0 auto;
}

.company-details-page .contact-supplier-form label {
	font-weight: 600;
	font-size: .85rem;
	color: var(--arena-ink, #14141F);
	margin-bottom: .4rem;
	display: inline-block;
}

.company-details-page .contact-supplier-form .form-control {
	border: 1px solid var(--arena-line, #E6E6EC);
	border-radius: 10px;
	padding: .65rem .9rem;
	font-size: .9rem;
}

.company-details-page .contact-supplier-form .form-control:focus {
	border-color: var(--arena-accent, #C026D3);
	box-shadow: 0 0 0 3px rgba(192, 38, 212, .12);
}

.company-details-page .btn-arena-accent {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	background: var(--arena-accent, #C026D3);
	border: none;
	color: #fff;
	font-weight: 600;
	font-size: .9rem;
	padding: .65rem 1.6rem;
	border-radius: 50px;
	text-decoration: none;
	transition: background-color .25s ease, transform .25s ease;
}

.company-details-page .btn-arena-accent:hover {
	background: var(--arena-accent-dark, #A21CAF);
	color: #fff;
	transform: translateY(-1px);
}

.company-details-page .contact-supplier-guest {
	text-align: center;
	padding: 2rem 0;
}

.company-details-page .contact-supplier-guest i {
	font-size: 2rem;
	color: var(--arena-line, #E6E6EC);
	margin-bottom: 1rem;
}

.company-details-page .contact-supplier-guest p {
	color: var(--arena-muted, #6B7280);
	margin-bottom: 1.25rem;
}

/* ---- company reviews section ---- */
.company-details-page .company-reviews-section {
	background: #fff;
	border: 1px solid var(--arena-line, #E6E6EC);
	border-radius: 16px;
	padding: 2rem;
}

.company-details-page .company-reviews-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 1rem;
	padding-bottom: 1.25rem;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid var(--arena-line, #E6E6EC);
}

.company-details-page .company-reviews-header .arena-eyebrow {
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: .78rem;
	font-weight: 600;
	color: var(--arena-accent, #C026D3);
	margin-bottom: .35rem;
}

.company-details-page .company-reviews-header h2 {
	font-weight: 700;
	color: var(--arena-ink, #14141F);
	margin: 0;
}

.company-details-page .company-reviews-summary {
	display: flex;
	align-items: center;
	gap: .6rem;
}

.company-details-page .company-reviews-summary .score {
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--arena-ink, #14141F);
}

.company-details-page .company-reviews-summary .stars {
	color: #F5A623;
	font-size: .95rem;
}

.company-details-page .company-reviews-summary .count {
	color: var(--arena-muted, #6B7280);
	font-size: .85rem;
}

.company-details-page .company-review-form-card {
	background: var(--arena-bg-soft, #F4F4F7);
	border-radius: 14px;
	padding: 1.5rem;
	margin-bottom: 2rem;
}

.company-details-page .company-review-form-card h5 {
	font-weight: 700;
	color: var(--arena-ink, #14141F);
	margin-bottom: .85rem;
}

.company-details-page .review-star-input {
	font-size: 1.5rem;
	margin-bottom: .85rem;
}

.company-details-page .review-star-input i {
	cursor: pointer;
	margin-inline-end: .25rem;
	color: #D9D9E3;
	transition: transform .15s ease, color .15s ease;
}

.company-details-page .review-star-input i.is-active {
	color: #F5A623;
}

.company-details-page .review-star-input i:hover {
	transform: scale(1.15);
}

.company-details-page .review-star-error {
	display: none;
	color: #C0392B;
	font-size: .8rem;
	margin-bottom: .75rem;
}

.company-details-page .company-review-form.has-rating-error .review-star-error {
	display: block;
}

.company-details-page .company-review-form.has-rating-error .review-star-input {
	animation: arena-shake .3s ease;
}

@keyframes arena-shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-4px); }
	75% { transform: translateX(4px); }
}

.company-details-page .company-reviews-section .alert {
	border-radius: 10px;
	font-size: .88rem;
	padding: .85rem 1.1rem;
	margin-bottom: 1.25rem;
	border: none;
}

.company-details-page .company-reviews-section .alert-success {
	background: #E7F7EE;
	color: #1E7A46;
}

.company-details-page .company-reviews-section .alert-danger {
	background: #FDEAEA;
	color: #B32424;
}

.company-details-page .company-review-form-card textarea.form-control {
	border: 1px solid var(--arena-line, #E6E6EC);
	border-radius: 10px;
	font-size: .9rem;
}

.company-details-page .company-review-form-card textarea.form-control:focus {
	border-color: var(--arena-accent, #C026D3);
	box-shadow: 0 0 0 3px rgba(192, 38, 212, .12);
}

.company-details-page .company-review-guest {
	text-align: center;
	background: var(--arena-bg-soft, #F4F4F7);
	border-radius: 14px;
	padding: 1.75rem;
	margin-bottom: 2rem;
}

.company-details-page .company-review-guest p {
	color: var(--arena-muted, #6B7280);
	margin-bottom: 1rem;
}

.company-details-page .company-reviews-list {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.company-details-page .company-review-item {
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--arena-line, #E6E6EC);
}

.company-details-page .company-review-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.company-details-page .review-item-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: .4rem;
}

.company-details-page .reviewer-name {
	font-weight: 600;
	color: var(--arena-ink, #14141F);
}

.company-details-page .review-item-head .stars {
	color: #F5A623;
	font-size: .85rem;
}

.company-details-page .review-item-body {
	color: var(--arena-ink, #14141F);
	margin-bottom: .35rem;
	line-height: 1.6;
}

.company-details-page .review-item-date {
	color: var(--arena-muted, #6B7280);
	font-size: .78rem;
}

.company-details-page .company-reviews-empty {
	text-align: center;
	padding: 2.5rem 0;
	color: var(--arena-muted, #6B7280);
}

.company-details-page .company-reviews-empty i {
	font-size: 2.25rem;
	color: var(--arena-line, #E6E6EC);
	margin-bottom: .75rem;
	display: block;
}

@media (max-width: 575px) {
	.company-details-page .company-reviews-header {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* =========================================================================
   Product details page — modern refresh
   ========================================================================= */

.product-details-page .product-breadcrumb {
	font-size: .85rem;
	color: var(--arena-muted, #6B7280);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .4rem;
}

.product-details-page .product-breadcrumb a {
	color: var(--arena-muted, #6B7280);
	text-decoration: none;
}

.product-details-page .product-breadcrumb a:hover {
	color: var(--arena-accent, #C026D3);
}

.product-details-page .product-breadcrumb i {
	font-size: .7rem;
	color: var(--arena-line, #E6E6EC);
}

.product-details-page .product-breadcrumb .current {
	color: var(--arena-ink, #14141F);
	font-weight: 600;
}

.product-details-page .product-details-card {
	background: #fff;
	border: 1px solid var(--arena-line, #E6E6EC);
	border-radius: 16px;
	padding: 1.75rem;
	box-shadow: 0 8px 24px rgba(20, 20, 31, .04);
}

.product-details-page .product-title {
	font-weight: 700;
	font-size: 1.4rem;
	color: var(--arena-ink, #14141F);
	line-height: 1.35;
}

.product-details-page .product-meta-row {
	display: flex;
	align-items: center;
	color: var(--arena-muted, #6B7280);
	font-size: .85rem;
	margin-bottom: .5rem;
}

.product-details-page .product-meta-row a {
	color: var(--arena-accent, #C026D3);
	text-decoration: none;
}

.product-details-page .product-price-box {
	background: var(--arena-bg-soft, #F4F4F7);
	border-radius: 12px;
	padding: 1rem 1.25rem;
	margin: 1rem 0;
}

.product-details-page .product-price {
	font-weight: 700;
	font-size: 1.5rem;
}

.product-details-page .product-field-label {
	font-size: .78rem;
	font-weight: 600;
	color: var(--arena-muted, #6B7280);
	text-transform: uppercase;
	letter-spacing: .03em;
	margin-bottom: .4rem;
}

.product-details-page .product-origin-row {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: .88rem;
}

.product-details-page .product-origin-row .product-field-label {
	margin-bottom: 0;
}

.product-details-page .qty-stepper {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--arena-line, #E6E6EC);
	border-radius: 10px;
	overflow: hidden;
}

.product-details-page .qty-stepper .input-group-text {
	background: var(--arena-bg-soft, #F4F4F7);
	border: none;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-weight: 700;
	color: var(--arena-accent, #C026D3);
}

.product-details-page .qty-stepper input {
	width: 48px;
	border: none;
	text-align: center;
	font-weight: 600;
}

.product-details-page .qty-stepper input:focus {
	outline: none;
}

.product-details-page .product-qty-buttons {
	display: flex;
	align-items: center;
}

.product-details-page .in-stock {
	font-size: .8rem;
	color: #1E7A46;
	font-weight: 600;
}

.product-details-page .pd-label {
	border: 1px solid var(--arena-line, #E6E6EC);
	border-radius: 10px;
	padding: .65rem .9rem;
	margin-bottom: 1rem;
	cursor: pointer;
	transition: border-color .2s ease;
}

.product-details-page .pd-label:hover {
	border-color: var(--arena-accent, #C026D3);
}

.product-details-page .pd-label h6 {
	margin-bottom: .15rem;
	font-size: .9rem;
}

.product-details-page .pd-label p {
	margin: 0;
	font-size: .8rem;
	color: var(--arena-muted, #6B7280);
}

.product-details-page .seller-card {
	background: #fff;
	border: 1px solid var(--arena-line, #E6E6EC);
	border-radius: 14px;
	overflow: hidden;
}

.product-details-page .seller-card-body {
	padding: 1.25rem;
	text-align: center;
}

.product-details-page .seller-name {
	display: block;
	font-weight: 700;
	font-size: 1rem;
	color: var(--arena-ink, #14141F);
	text-decoration: none;
	margin-bottom: .5rem;
}

.product-details-page .seller-name:hover {
	color: var(--arena-accent, #C026D3);
}

.product-details-page .seller-rating {
	font-size: .85rem;
	color: var(--arena-muted, #6B7280);
	margin-bottom: .35rem;
}

.product-details-page .seller-location {
	font-size: .8rem;
	color: var(--arena-muted, #6B7280);
	margin-bottom: 1rem;
}

.product-details-page .seller-actions {
	display: flex;
	flex-direction: column;
	gap: .6rem;
}

.product-details-page .seller-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	padding: .6rem .75rem;
	border-radius: 10px;
	font-size: .82rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.product-details-page .seller-btn i {
	font-size: .85rem;
}

.product-details-page .seller-btn-outline {
	border: 1px solid var(--arena-accent, #C026D3);
	color: var(--arena-accent, #C026D3);
}

.product-details-page .seller-btn-outline:hover {
	background: var(--arena-accent, #C026D3);
	color: #fff;
}

.product-details-page .seller-btn-solid {
	background: var(--arena-accent, #C026D3);
	color: #fff;
	border: 1px solid var(--arena-accent, #C026D3);
}

.product-details-page .seller-btn-solid:hover {
	background: var(--arena-accent-dark, #A21CAF);
	transform: translateY(-1px);
}

.product-details-page .product-tabs-nav {
	background: transparent;
	border-bottom: 1px solid var(--arena-line, #E6E6EC);
	gap: 1.5rem;
}

.product-details-page .product-tabs-nav .nav-link {
	border: none;
	background: none;
	color: var(--arena-muted, #6B7280);
	font-weight: 600;
	padding: .75rem .1rem;
	margin-inline-end: 1.5rem;
	border-radius: 0;
	position: relative;
}

.product-details-page .product-tabs-nav .nav-link.active {
	color: var(--arena-accent, #C026D3);
	background: none;
}

.product-details-page .product-tabs-nav .nav-link.active::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 100%;
	height: 2px;
	background: var(--arena-accent, #C026D3);
}

.product-details-page .product-tabs-card {
	border: 1px solid var(--arena-line, #E6E6EC);
	border-top: none;
	border-radius: 0 0 16px 16px;
	background: #fff;
}

/* ---- share icons (jssocials) ---- */
.product-details-page #share {
	margin-top: 1rem;
}

.product-details-page .jssocials-shares {
	display: flex;
	gap: .6rem;
}

.product-details-page .jssocials-share {
	margin: 0;
}

.product-details-page .jssocials-share-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--arena-bg-soft, #F4F4F7);
	color: var(--arena-muted, #6B7280);
	box-shadow: 0 2px 6px rgba(20, 20, 31, .06);
	transition: transform .2s ease, background-color .2s ease, color .2s ease;
}

.product-details-page .jssocials-share-link:hover {
	transform: translateY(-3px);
}

.product-details-page .jssocials-share-logo {
	font-size: .95rem;
}

.product-details-page .jssocials-share-email .jssocials-share-link:hover {
	background: #6B7280;
	color: #fff;
}

.product-details-page .jssocials-share-twitter .jssocials-share-link:hover {
	background: #000;
	color: #fff;
}

.product-details-page .jssocials-share-facebook .jssocials-share-link:hover {
	background: #1877F2;
	color: #fff;
}

.product-details-page .jssocials-share-linkedin .jssocials-share-link:hover {
	background: #0A66C2;
	color: #fff;
}

.product-details-page .jssocials-share-whatsapp .jssocials-share-link:hover {
	background: #25D366;
	color: #fff;
}

/* ---- related products ---- */
.product-details-page .related-products {
	padding: 3rem 0 3.5rem;
}

.product-details-page .related-products-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 1.75rem;
}

.product-details-page .related-products-header .arena-eyebrow {
	text-transform: uppercase;
	letter-spacing: .16em;
	font-size: .7rem;
	font-weight: 600;
	font-family: var(--fi-mono, 'Space Grotesk', sans-serif);
	color: var(--fi-accent, #9b6fb3);
	margin-bottom: .4rem;
	display: block;
}

.product-details-page .write-review-card {
	background: var(--arena-bg-soft, #F4F4F7);
	border-radius: 14px;
	padding: 1.5rem;
	margin-bottom: 1.5rem;
	max-width: 560px;
}

.product-details-page .write-review-stars {
	font-size: 1.4rem;
	margin-bottom: .75rem;
}

.product-details-page .write-review-stars i {
	cursor: pointer;
	margin-inline-end: .25rem;
	color: #D9D9E3;
	transition: color .15s ease;
}

.product-details-page .write-review-stars i.is-active {
	color: #F5A623;
}

.product-details-page .write-review-card textarea.form-control {
	border: 1px solid var(--arena-line, #E6E6EC);
	border-radius: 10px;
	font-size: .9rem;
}

.product-details-page .write-review-card textarea.form-control:focus {
	border-color: var(--arena-accent, #C026D3);
	box-shadow: 0 0 0 3px rgba(192, 38, 212, .12);
}

.product-details-page .write-review-card .btn-arena-accent {
	display: inline-flex;
	align-items: center;
	background: var(--arena-accent, #C026D3);
	border: none;
	color: #fff;
	font-weight: 600;
	font-size: .88rem;
	padding: .6rem 1.5rem;
	border-radius: 50px;
	transition: background-color .2s ease, transform .2s ease;
}

.product-details-page .write-review-card .btn-arena-accent:hover:not(:disabled) {
	background: var(--arena-accent-dark, #A21CAF);
	transform: translateY(-1px);
}

.product-details-page .write-review-card .btn-arena-accent:disabled {
	opacity: .7;
}

.product-details-page .related-products-title {
	font-family: var(--fi-display, 'Fraunces', serif);
	font-weight: 600;
	font-size: 1.7rem;
	letter-spacing: -.01em;
	color: var(--fi-ink, #1c1220);
	margin: 0;
}

/* Related products use the same card as the home page (.flash-deal-product-card).
   Here we only own the grid layout + the sidebar carousel spacing. */
.product-details-page .related-products-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 18px;
	margin-top: 1.5rem;
}

@media (max-width: 1100px) {
	.product-details-page .related-products-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 768px) {
	.product-details-page .related-products-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.product-details-page .related-products-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
}

/* Sidebar carousel spacing + slick dots */
.product-details-page .product-carousel {
	padding-bottom: 1rem;
}

.product-details-page .product-carousel .slick-dots {
	bottom: -20px;
}

.product-details-page .product-carousel .slick-dots li button:before {
	color: var(--fi-primary, #75418f);
	opacity: .3;
	font-size: 8px;
}

.product-details-page .product-carousel .slick-dots li.slick-active button:before {
	opacity: 1;
}

@media (max-width: 991px) {
	.product-details-page .product-details-card {
		padding: 1.25rem;
	}
}

/* =========================================================================
   Coupons page — modern refresh
   ========================================================================= */

.coupons-page .coupons-hero {
	background: linear-gradient(135deg, var(--arena-ink-deep, #3B0A45) 0%, var(--arena-accent, #C026D3) 100%);
	padding: 3.5rem 0 4.5rem;
	text-align: center;
	color: #fff;
}

.coupons-page .coupons-hero .arena-eyebrow {
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: .8rem;
	font-weight: 600;
	color: #F3D9FA;
	margin-bottom: .5rem;
}

.coupons-page .coupons-hero h1 {
	font-weight: 700;
	font-size: 2rem;
	margin-bottom: .5rem;
}

.coupons-page .coupons-hero p {
	color: rgba(255, 255, 255, .85);
	max-width: 520px;
	margin: 0 auto;
}

.coupons-page .coupons-list {
	padding: 3rem 0 4rem;
}

.coupons-page .coupon-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
}

.coupons-page .coupon-ticket {
	display: flex;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 8px 24px rgba(20, 20, 31, .06);
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;
	position: relative;
}

.coupons-page .coupon-ticket:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 36px rgba(20, 20, 31, .12);
}

.coupons-page .coupon-ticket-main {
	flex: 1;
	padding: 1.5rem;
	min-width: 0;
}

.coupons-page .coupon-discount {
	display: flex;
	align-items: baseline;
	gap: .4rem;
	color: var(--arena-accent, #C026D3);
	margin-bottom: .5rem;
}

.coupons-page .coupon-discount .value {
	font-size: 1.9rem;
	font-weight: 800;
	line-height: 1;
}

.coupons-page .coupon-discount .label {
	font-size: .85rem;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--arena-ink, #14141F);
}

.coupons-page .coupon-name {
	font-weight: 600;
	color: var(--arena-ink, #14141F);
	margin-bottom: .5rem;
}

.coupons-page .coupon-min-spend {
	font-size: .82rem;
	color: var(--arena-muted, #6B7280);
	margin-bottom: .35rem;
}

.coupons-page .coupon-dates {
	font-size: .78rem;
	color: var(--arena-muted, #6B7280);
	display: flex;
	align-items: center;
	gap: .4rem;
}

.coupons-page .coupon-ticket-stub {
	flex-shrink: 0;
	width: 130px;
	background: var(--arena-bg-soft, #F4F4F7);
	border-inline-start: 2px dashed var(--arena-line, #E6E6EC);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: 1rem .75rem;
	position: relative;
}

.coupons-page .coupon-ticket-stub::before,
.coupons-page .coupon-ticket-stub::after {
	content: '';
	position: absolute;
	inset-inline-start: -11px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--arena-bg-page, #fff);
}

.coupons-page .coupon-ticket-stub::before {
	top: -10px;
}

.coupons-page .coupon-ticket-stub::after {
	bottom: -10px;
}

.coupons-page .coupon-stub-label {
	font-size: .7rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--arena-muted, #6B7280);
}

.coupons-page .coupon-code-btn {
	display: flex;
	align-items: center;
	gap: .4rem;
	background: #fff;
	border: 1px dashed var(--arena-accent, #C026D3);
	color: var(--arena-accent, #C026D3);
	font-weight: 700;
	font-size: .8rem;
	letter-spacing: .03em;
	padding: .4rem .65rem;
	border-radius: 8px;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}

.coupons-page .coupon-code-btn:hover:not(:disabled) {
	background: var(--arena-accent, #C026D3);
	color: #fff;
}

.coupons-page .coupon-code-btn.is-copied {
	background: #1E7A46;
	border-color: #1E7A46;
	color: #fff;
}


.coupons-page .coupon-status {
	font-size: .7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: .2rem .55rem;
	border-radius: 50px;
}

.coupons-page .coupon-status.is-active {
	background: #E7F7EE;
	color: #1E7A46;
}

.coupons-page .coupons-empty {
	text-align: center;
	padding: 4rem 0;
	color: var(--arena-muted, #6B7280);
}

.coupons-page .coupons-empty i {
	font-size: 2.5rem;
	margin-bottom: 1rem;
	color: var(--arena-line, #E6E6EC);
	display: block;
}

@media (max-width: 991px) {
	.coupons-page .coupon-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 575px) {
	.coupons-page .coupon-grid {
		grid-template-columns: 1fr;
	}

	.coupons-page .coupon-ticket {
		flex-direction: column;
	}

	.coupons-page .coupon-ticket-stub {
		width: 100%;
		border-inline-start: none;
		border-top: 2px dashed var(--arena-line, #E6E6EC);
		flex-direction: row;
		justify-content: space-between;
	}

	.coupons-page .coupon-ticket-stub::before,
	.coupons-page .coupon-ticket-stub::after {
		inset-inline-start: 50%;
		top: -10px;
		transform: translateX(-50%);
	}

	.coupons-page .coupon-ticket-stub::after {
		bottom: auto;
		top: auto;
		bottom: -10px;
	}
}

/* =========================================================================
   Flash deals page — modern refresh
   ========================================================================= */

.flash-deals-page .flash-deals-hero {
	background: linear-gradient(135deg, #1A0B2E 0%, #C026D3 100%);
	padding: 3.5rem 0 4.5rem;
	text-align: center;
	color: #fff;
}

.flash-deals-page .flash-deals-hero .arena-eyebrow {
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: .8rem;
	font-weight: 600;
	color: #FDE68A;
	margin-bottom: .5rem;
}

.flash-deals-page .flash-deals-hero h1 {
	font-weight: 700;
	font-size: 2rem;
	margin-bottom: .5rem;
}

.flash-deals-page .flash-deals-hero p {
	color: rgba(255, 255, 255, .85);
	max-width: 480px;
	margin: 0 auto;
}

.flash-deals-page .flash-deals-list {
	padding: 3rem 0 4rem;
}

.flash-deal-block {
	margin-bottom: 3rem;
}

.flash-deal-block:last-child {
	margin-bottom: 0;
}

.flash-deal-block-banner {
	border-radius: 16px;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	margin-bottom: 1.5rem;
}

.flash-deal-block-overlay {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	padding: 2rem;
	background: linear-gradient(135deg, rgba(26, 11, 46, .88) 0%, rgba(192, 38, 212, .78) 100%);
	color: #fff;
}

.flash-deal-block-overlay h2 {
	font-weight: 700;
	font-size: 1.4rem;
	margin-bottom: .5rem;
}

.flash-deal-block-link {
	color: #fff;
	font-size: .85rem;
	font-weight: 600;
	text-decoration: none;
	opacity: .9;
}

.flash-deal-block-link:hover {
	opacity: 1;
	color: #fff;
}

.flash-deal-block-empty {
	text-align: center;
	padding: 2rem;
	background: var(--arena-bg-soft, #F4F4F7);
	border-radius: 14px;
	color: var(--arena-muted, #6B7280);
}

.flash-deal-countdown-wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: .5rem;
}

.flash-deal-countdown-label {
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #FDE68A;
	display: inline-flex;
	align-items: center;
	gap: .35rem;
}

.flash-deal-countdown {
	display: flex;
	align-items: center;
	gap: .4rem;
	padding: .6rem .75rem;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 14px;
	backdrop-filter: blur(6px);
}

.flash-deal-countdown .countdown-item {
	min-width: 42px;
	text-align: center;
}

.flash-deal-countdown .countdown-digit {
	display: block;
	font-weight: 800;
	font-size: 1.4rem;
	line-height: 1.1;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

.flash-deal-countdown .countdown-item.is-seconds .countdown-digit {
	color: #FDE68A;
}

.flash-deal-countdown .countdown-label {
	display: block;
	font-size: .62rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: rgba(255, 255, 255, .7);
}

.flash-deal-countdown .countdown-sep {
	color: rgba(255, 255, 255, .5);
	font-weight: 700;
	font-size: 1.2rem;
	transform: translateY(-6px);
}

.flash-deal-countdown-inline {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .6rem .85rem;
	background: #fff;
	border: 1px solid var(--arena-line, #E6E6EC);
	border-radius: 14px;
	box-shadow: 0 8px 20px rgba(20, 20, 31, .06);
}

.flash-deal-countdown-inline .countdown-item {
	min-width: 42px;
	text-align: center;
}

.flash-deal-countdown-inline .countdown-digit {
	display: block;
	font-weight: 800;
	font-size: 1.3rem;
	line-height: 1.1;
	color: var(--arena-ink, #14141F);
	font-variant-numeric: tabular-nums;
}

.flash-deal-countdown-inline .countdown-item.is-seconds .countdown-digit {
	color: var(--arena-accent, #C026D3);
}

.flash-deal-countdown-inline .countdown-label {
	display: block;
	font-size: .6rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--arena-muted, #6B7280);
}

.flash-deal-countdown-inline .countdown-sep {
	color: var(--arena-line, #E6E6EC);
	font-weight: 700;
	font-size: 1.1rem;
	transform: translateY(-6px);
}

.flash-deals-page .flash-deals-empty {
	text-align: center;
	padding: 4rem 0;
	color: var(--arena-muted, #6B7280);
}

.flash-deals-page .flash-deals-empty i {
	font-size: 2.5rem;
	margin-bottom: 1rem;
	color: var(--arena-line, #E6E6EC);
	display: block;
}

/* ---- single flash deal page ---- */
.flash-deal-page-container {
	padding: 2.5rem 0 4rem;
}

.flash-deal-expired {
	text-align: center;
	padding: 5rem 0;
}

.flash-deal-expired i {
	font-size: 3rem;
	color: var(--arena-line, #E6E6EC);
	margin-bottom: 1.25rem;
	display: block;
}

.flash-deal-expired h2 {
	font-weight: 700;
	color: var(--arena-ink, #14141F);
	margin-bottom: .5rem;
}

.flash-deal-expired p {
	color: var(--arena-muted, #6B7280);
	margin-bottom: 1.5rem;
}

@media (max-width: 575px) {
	.flash-deal-block-overlay {
		flex-direction: column;
		align-items: flex-start;
	}

	.flash-deal-countdown-wrap {
		align-items: flex-start;
	}
}

/* =========================================================================
   Home page — flash deal products section
   ========================================================================= */

.arena-welcome .flash-deal-section {
	background: linear-gradient(135deg, #1A0B2E 0%, var(--arena-bg-soft, #F4F4F7) 55%);
}

.arena-welcome .flash-deal-countdown-inline {
	display: flex;
	gap: .6rem;
}

.arena-welcome .flash-deal-countdown-inline .countdown-item {
	background: #fff;
	border: 1px solid var(--arena-line, #E6E6EC);
	border-radius: 10px;
	text-align: center;
	padding: .5rem .85rem;
	min-width: 56px;
	box-shadow: 0 4px 12px rgba(20, 20, 31, .06);
}

.arena-welcome .flash-deal-countdown-inline .countdown-digit {
	display: block;
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--arena-accent, #C026D3);
}

.arena-welcome .flash-deal-countdown-inline .countdown-label {
	display: block;
	font-size: .65rem;
	text-transform: uppercase;
	color: var(--arena-muted, #6B7280);
}

.arena-welcome .flash-deal-product-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 1.25rem;
}

.arena-welcome .marketplace-product-grid {
	margin-top: 2.5rem;
}

.arena-welcome .flash-deal-product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(20, 20, 31, .06);
	transition: transform .25s ease, box-shadow .25s ease;
}

.arena-welcome .flash-deal-product-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 36px rgba(20, 20, 31, .12);
}

.arena-welcome .flash-deal-discount-badge {
	position: absolute;
	top: .6rem;
	inset-inline-start: .6rem;
	z-index: 2;
	padding: .2rem .5rem;
	border-radius: 999px;
	background: #E0245E;
	color: #fff;
	font-size: .72rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .3px;
	box-shadow: 0 4px 10px rgba(224, 36, 94, .35);
}

.arena-welcome .flash-deal-product-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.arena-welcome .flash-deal-product-link:hover {
	color: inherit;
}

.arena-welcome .flash-deal-wishlist-btn {
	position: absolute;
	top: .6rem;
	inset-inline-end: .6rem;
	z-index: 2;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--arena-muted, #6B7280);
	box-shadow: 0 2px 8px rgba(20, 20, 31, .12);
	transition: color .2s ease, transform .15s ease;
}

.arena-welcome .flash-deal-wishlist-btn:hover {
	transform: scale(1.08);
}

.arena-welcome .flash-deal-wishlist-btn.is-active {
	color: #E0245E;
}

.arena-welcome .flash-deal-add-cart-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	margin: 0 1rem 1rem;
	padding: .55rem 0;
	background: var(--arena-accent, #C026D3);
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: .82rem;
	font-weight: 600;
	transition: background-color .2s ease, transform .2s ease;
}

.arena-welcome .flash-deal-add-cart-btn:hover:not(:disabled) {
	background: var(--arena-accent-dark, #A21CAF);
	transform: translateY(-1px);
}

.arena-welcome .flash-deal-add-cart-btn:disabled {
	opacity: .7;
}

.arena-welcome .flash-deal-product-image {
	height: 150px;
	background: var(--arena-bg-soft, #F4F4F7);
}

.arena-welcome .flash-deal-product-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.arena-welcome .flash-deal-product-body {
	padding: 1rem;
}

.arena-welcome .flash-deal-product-body .name {
	font-size: .88rem;
	font-weight: 600;
	color: var(--arena-ink, #14141F);
	margin-bottom: .5rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.4em;
}

.arena-welcome .flash-deal-product-body .price-row {
	display: flex;
	align-items: baseline;
	gap: .4rem;
	margin-bottom: .35rem;
}

.arena-welcome .flash-deal-product-body .price {
	font-weight: 700;
	color: var(--arena-accent, #C026D3);
}

.arena-welcome .flash-deal-product-body .price-max {
	font-size: .78rem;
	color: var(--arena-muted, #6B7280);
	text-decoration: line-through;
}

.arena-welcome .flash-deal-product-body .rating {
	font-size: .78rem;
	color: #F5A623;
}

.arena-welcome .flash-deal-product-body .rating span {
	color: var(--arena-muted, #6B7280);
	margin-inline-start: .25rem;
}

@media (max-width: 991px) {
	.arena-welcome .flash-deal-product-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 575px) {
	.arena-welcome .flash-deal-product-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.arena-welcome .flash-deal-countdown-inline {
		flex-wrap: wrap;
	}
}


/* Attribute selector base */
.pa-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}

/* Text chip (size, material, etc.) */
.pa-value--text {
    padding: 5px 14px;
    border-radius: 6px;
    border: 1.5px solid #d1d5db;
    background: #fff;
    color: #374151;
    font-size: 13px;
    font-weight: 500;
    min-width: 40px;
    text-align: center;
    user-select: none;
}
.pa-value--text:hover {
    border-color: #7c3aed;
    color: #7c3aed;
    background: #f5f3ff;
}
.pa-value--text.pav-active {
    border-color: #7c3aed;
    background: #7c3aed;
    color: #fff;
    box-shadow: 0 2px 8px rgba(124,58,237,0.25);
}

/* Color swatch chip */
.pa-value--color {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2.5px solid #e5e7eb;
    padding: 3px;
    background: transparent;
}
.pa-value--color:hover {
    border-color: #7c3aed;
}
.pa-value--color.pav-active {
    border-color: #7c3aed;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #7c3aed;
}
.pa-color-swatch {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

/* Label + selected name */
.pav-label {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.pav-selected-name {
    font-size: 12px;
    color: #111827;
    font-weight: 600;
}

/* Discount badge circle */
.discount-badge-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #e53935;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    flex-shrink: 0;
}

/* Shipping method rows */
.shipping-method-row {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 8px 12px;
}

.shipping-cost-badge {
    background: #e8f5e9;
    color: #2e7d32;
    font-weight: 600;
    font-size: 13px;
    padding: 2px 10px;
    border-radius: 20px;
}