/* ==========================================
   GLOBAL
========================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #0b0b0f;
    color: white;
}

body.cart-open,
body.checkout-open {
    overflow: hidden;
}

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


/* ==========================================
   NAVIGATION
========================================== */

.navbar {
    width: 100%;
    padding: 20px 6%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    background: #0b0b0f;
    border-bottom: 1px solid #222;

    position: sticky;
    top: 0;
    z-index: 1000;
}

.logo {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 2px;
}

nav {
    display: flex;
    gap: 30px;
}

nav a {
    color: white;
    text-decoration: none;
    font-size: 15px;
}

nav a:hover {
    color: #8b5cff;
}

.cart-button {
    background: #8b5cff;
    color: white;

    border: none;

    padding: 10px 18px;

    border-radius: 8px;

    cursor: pointer;

    font-weight: bold;
}

.cart-button:hover {
    opacity: 0.9;
}


/* ==========================================
   HERO
========================================== */

.hero {
    min-height: 700px;

    display: flex;
    align-items: center;

    padding: 80px 8%;

    background:
        radial-gradient(
            circle at 80% 40%,
            rgba(111, 66, 193, 0.35),
            transparent 40%
        ),
        #0b0b0f;
}

.hero-content {
    max-width: 700px;
}

.small-title {
    color: #9d7cff;

    font-size: 13px;

    font-weight: bold;

    letter-spacing: 3px;

    margin-bottom: 20px;
}

.hero h1 {
    font-size: clamp(50px, 7vw, 90px);
    line-height: 0.95;

    margin-bottom: 30px;
}

.hero h1 span {
    color: #9d7cff;
}

.hero p {
    color: #b8b8c2;

    font-size: 18px;

    line-height: 1.6;

    max-width: 600px;
}

.hero-buttons {
    display: flex;
    gap: 15px;

    margin-top: 35px;
}


/* ==========================================
   BUTTONS
========================================== */

.primary-button,
.secondary-button {
    display: inline-block;

    padding: 15px 25px;

    border-radius: 8px;

    text-decoration: none;

    font-weight: bold;

    transition: 0.2s;
}

.primary-button {
    background: #8b5cff;
    color: white;

    border: none;
}

.primary-button:hover {
    opacity: 0.88;
}

.secondary-button {
    border: 1px solid #555;

    color: white;

    background: transparent;
}

.secondary-button:hover {
    border-color: #8b5cff;
    color: #9d7cff;
}


/* ==========================================
   CATEGORIES
========================================== */

.categories {
    padding: 100px 8%;

    background: #101014;
}

.categories h2,
.shop h2,
.repair-section h2,
.contact h2 {
    font-size: 42px;

    margin-bottom: 40px;
}

.category-grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 20px;
}

.category-card {
    padding: 35px 25px;

    background: #18181e;

    border: 1px solid #28282f;

    border-radius: 15px;

    transition: 0.3s;
}

.category-card:hover {
    transform: translateY(-5px);

    border-color: #8b5cff;
}

.category-icon {
    font-size: 40px;

    margin-bottom: 20px;
}

.category-card h3 {
    margin-bottom: 10px;
}

.category-card p {
    color: #999;
}


/* ==========================================
   SHOP
========================================== */

.shop {
    padding: 100px 8%;
}

.section-heading {
    margin-bottom: 40px;
}

.product-grid {
    min-height: 250px;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 20px;
}

.empty-store {
    grid-column: 1 / -1;

    padding: 70px;

    text-align: center;

    border: 1px dashed #444;

    border-radius: 15px;
}

.empty-store p {
    color: #888;

    margin-top: 10px;
}


/* ==========================================
   PRODUCT CARDS
========================================== */

.product-card {
    background: #18181e;

    border: 1px solid #28282f;

    border-radius: 15px;

    overflow: hidden;

    transition: 0.3s;
}

.product-card:hover {
    transform: translateY(-5px);

    border-color: #8b5cff;
}

.product-image {
    width: 100%;
    height: 240px;

    background: #111116;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}

.product-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.no-image {
    color: #666;
}

.product-info {
    padding: 20px;
}

.product-category {
    color: #9d7cff;

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-bottom: 8px;
}

.product-info h3 {
    font-size: 20px;

    margin-bottom: 15px;
}

.price {
    font-size: 20px;

    font-weight: bold;

    margin-bottom: 18px;
}

.old-price {
    color: #777;

    text-decoration: line-through;

    margin-right: 8px;

    font-size: 15px;
}

.sale-price {
    color: #9d7cff;
}

.add-cart {
    width: 100%;

    padding: 12px;

    border: none;

    border-radius: 8px;

    background: #8b5cff;

    color: white;

    font-weight: bold;

    cursor: pointer;
}

.add-cart:hover {
    opacity: 0.85;
}

.add-cart:disabled {
    opacity: 0.45;

    cursor: not-allowed;
}


/* ==========================================
   REPAIRS
========================================== */

.repair-section {
    padding: 120px 8%;

    background: #15151b;
}

.repair-content {
    max-width: 700px;
}

.repair-content > p {
    color: #aaa;

    line-height: 1.7;

    margin-bottom: 30px;
}

#repair-form {
    margin-top: 35px;

    display: grid;

    gap: 20px;
}

#repair-submit {
    cursor: pointer;

    width: fit-content;
}

#repair-message {
    margin-top: 10px;

    font-size: 14px;
}


/* ==========================================
   CONTACT
========================================== */

.contact {
    padding: 100px 8%;
}

.contact p {
    color: #aaa;

    line-height: 1.8;
}


/* ==========================================
   FOOTER
========================================== */

footer {
    padding: 50px 8%;

    background: #070709;

    border-top: 1px solid #222;
}

footer p {
    color: #777;

    margin-top: 10px;
}


/* ==========================================
   CART OVERLAY
========================================== */

.cart-overlay {
    position: fixed;

    inset: 0;

    background: rgba(0, 0, 0, 0.65);

    z-index: 1998;

    opacity: 0;

    visibility: hidden;

    transition: 0.25s;
}

.cart-overlay.active {
    opacity: 1;

    visibility: visible;
}


/* ==========================================
   CART DRAWER
========================================== */

.cart-drawer {
    position: fixed;

    top: 0;
    right: -460px;

    width: min(430px, 100%);

    height: 100vh;

    background: #101014;

    border-left: 1px solid #292932;

    z-index: 1999;

    transition: 0.3s;

    display: flex;
    flex-direction: column;

    box-shadow:
        -20px 0 50px
        rgba(0, 0, 0, 0.45);
}

.cart-drawer.active {
    right: 0;
}

.cart-drawer-header {
    padding: 25px;

    border-bottom: 1px solid #292932;

    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 20px;
}

.cart-drawer-header h2 {
    margin: 0;

    font-size: 28px;
}

.icon-button {
    width: 40px;
    height: 40px;

    border: 1px solid #3a3a45;

    border-radius: 8px;

    background: #18181e;

    color: white;

    font-size: 25px;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-button:hover {
    border-color: #8b5cff;
}


/* ==========================================
   CART ITEMS
========================================== */

.cart-items {
    flex: 1;

    overflow-y: auto;

    padding: 20px;
}

.cart-empty {
    padding: 60px 20px;

    text-align: center;

    color: #888;

    border: 1px dashed #444;

    border-radius: 12px;
}

.cart-item {
    display: grid;

    grid-template-columns:
        70px 1fr;

    gap: 15px;

    padding: 15px 0;

    border-bottom: 1px solid #292932;
}

.cart-item-image {
    width: 70px;
    height: 70px;

    border-radius: 10px;

    background: #18181e;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #666;

    font-size: 11px;

    text-align: center;
}

.cart-item-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.cart-item-top {
    display: flex;

    justify-content: space-between;

    gap: 10px;
}

.cart-item-name {
    font-weight: bold;

    margin-bottom: 5px;
}

.cart-item-price {
    color: #9d7cff;

    margin-bottom: 12px;
}

.remove-cart-item {
    border: none;

    background: transparent;

    color: #ff6b6b;

    cursor: pointer;

    font-size: 13px;
}

.remove-cart-item:hover {
    text-decoration: underline;
}


/* ==========================================
   CART QUANTITY
========================================== */

.quantity-row {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;
}

.quantity-button {
    width: 30px;
    height: 30px;

    border: 1px solid #3a3a45;

    background: #18181e;

    color: white;

    border-radius: 6px;

    cursor: pointer;

    font-size: 17px;
}

.quantity-button:hover {
    border-color: #8b5cff;
}


/* ==========================================
   CART TOTAL
========================================== */

.cart-summary {
    padding: 22px;

    border-top: 1px solid #292932;

    background: #0d0d11;
}

.cart-total-row {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    font-size: 20px;
}

.cart-note {
    color: #888;

    font-size: 13px;

    line-height: 1.5;

    margin: 12px 0 18px;
}

.cart-checkout-button {
    width: 100%;

    cursor: pointer;
}

.cart-checkout-button:disabled {
    opacity: 0.45;

    cursor: not-allowed;
}


/* ==========================================
   CHECKOUT MODAL
========================================== */

.checkout-modal {
    position: fixed;

    inset: 0;

    background: rgba(0, 0, 0, 0.82);

    z-index: 2100;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 20px;

    overflow-y: auto;
}

.checkout-modal.active {
    display: flex;
}

.checkout-card {
    width: min(850px, 100%);

    max-height: 94vh;

    overflow-y: auto;

    background: #15151b;

    border: 1px solid #292932;

    border-radius: 18px;

    padding: 30px;

    box-shadow:
        0 30px 80px
        rgba(0, 0, 0, 0.55);
}

.checkout-header {
    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 20px;

    margin-bottom: 30px;
}

.checkout-header h2 {
    font-size: 32px;
}


/* ==========================================
   CHECKOUT FORM
========================================== */

.checkout-grid {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 20px;
}

.checkout-grid .full {
    grid-column: 1 / -1;
}


/* ==========================================
   FORM GROUPS
========================================== */

.form-grid {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 20px;
}

.form-group {
    display: flex;

    flex-direction: column;
}

.form-group.full {
    grid-column: 1 / -1;
}

.form-group label {
    margin-bottom: 8px;

    font-size: 14px;

    font-weight: 600;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;

    padding: 13px 14px;

    background: #101014;

    color: white;

    border: 1px solid #33333d;

    border-radius: 8px;

    outline: none;

    font-family: inherit;

    font-size: 14px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #8b5cff;
}

.form-group textarea {
    resize: vertical;
}

.form-group small {
    color: #777;

    margin-top: 7px;
}

.form-group select option {
    background: #101014;

    color: white;
}


/* ==========================================
   FULFILLMENT PICKUP / DELIVERY
========================================== */

.fulfillment-options {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 12px;
}

.fulfillment-card {
    display: flex !important;

    flex-direction: row !important;

    gap: 12px;

    align-items: flex-start;

    background: #101014;

    border: 1px solid #33333d;

    border-radius: 10px;

    padding: 16px;

    cursor: pointer;

    transition: 0.2s;
}

.fulfillment-card:hover {
    border-color: #8b5cff;
}

.fulfillment-card input {
    width: auto !important;

    margin-top: 3px;
}

.fulfillment-card strong {
    display: block;
}

.fulfillment-card small {
    display: block;

    color: #888;

    margin-top: 5px;

    line-height: 1.4;
}


/* ==========================================
   PICKUP / DELIVERY DETAILS
========================================== */

.checkout-details {
    border: 1px solid #292932;

    background: #101014;

    border-radius: 12px;

    padding: 20px;
}

.checkout-details h3 {
    margin-bottom: 10px;
}

.checkout-details > p {
    color: #aaa;

    line-height: 1.6;

    margin-bottom: 15px;
}

.contact-action-row {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin: 15px 0;
}

.contact-action-row .secondary-button {
    background: transparent;

    cursor: pointer;

    font-size: 14px;
}


/* ==========================================
   LOCATION
========================================== */

.location-box {
    margin-top: 20px;

    padding: 18px;

    border: 1px dashed #444;

    border-radius: 10px;

    background: #15151b;
}

.location-box strong {
    display: block;

    margin-bottom: 8px;
}

.location-box p {
    color: #888;

    margin: 8px 0 15px;

    line-height: 1.5;
}

.privacy-note,
.location-message {
    color: #888 !important;

    font-size: 13px;

    line-height: 1.5;
}


/* ==========================================
   CHECKOUT SUMMARY
========================================== */

.checkout-order-summary {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    font-size: 20px;

    margin-top: 25px;

    padding: 20px;

    background: #101014;

    border: 1px solid #292932;

    border-radius: 10px;
}

.place-order-button {
    width: 100%;

    margin-top: 18px;

    cursor: pointer;
}

.place-order-button:disabled {
    opacity: 0.5;

    cursor: not-allowed;
}

#checkout-message {
    margin-top: 15px;

    font-size: 14px;
}


/* ==========================================
   ORDER SUCCESS
========================================== */

.order-success {
    text-align: center;

    padding: 30px 10px 10px;
}

.order-success-icon {
    width: 70px;
    height: 70px;

    border-radius: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #203b29;

    color: #4ade80;

    font-size: 35px;

    margin: 0 auto 20px;
}

.order-success h2 {
    font-size: 32px;

    margin-bottom: 15px;
}

.order-success p {
    color: #aaa;

    margin-bottom: 10px;

    line-height: 1.6;
}

.order-success .contact-action-row {
    justify-content: center;

    margin-top: 25px;
}


/* ==========================================
   FLOATING CONTACT
========================================== */

.floating-contact {
    position: fixed;

    right: 18px;

    bottom: 18px;

    z-index: 1500;

    display: flex;

    flex-direction: column;

    gap: 10px;
}

.floating-contact a {
    text-decoration: none;

    padding: 11px 15px;

    border-radius: 50px;

    font-weight: bold;

    font-size: 14px;

    box-shadow:
        0 10px 30px
        rgba(0, 0, 0, 0.3);
}

.floating-call {
    background: #18181e;

    color: white;

    border: 1px solid #444;
}

.floating-whatsapp {
    background: #25d366;

    color: #07150b;
}

.floating-contact a:hover {
    transform: translateY(-2px);
}


/* ==========================================
   ADMIN LOGIN
========================================== */

.admin-login {
    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 30px;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(111, 66, 193, 0.3),
            transparent 40%
        ),
        #0b0b0f;
}

.admin-login-box {
    width: 100%;

    max-width: 450px;

    padding: 45px;

    background: #18181e;

    border: 1px solid #292932;

    border-radius: 18px;

    box-shadow:
        0 20px 60px
        rgba(0, 0, 0, 0.4);
}

.admin-login-box .logo {
    margin-bottom: 15px;
}

.admin-label {
    color: #9d7cff;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 3px;

    margin-bottom: 15px;
}

.admin-login-box h1 {
    font-size: 35px;

    margin-bottom: 10px;
}

.admin-description {
    color: #999;

    margin-bottom: 30px;

    line-height: 1.5;
}

.admin-login-box label {
    display: block;

    margin-bottom: 8px;

    font-size: 14px;
}

.admin-login-box input {
    width: 100%;

    padding: 14px;

    margin-bottom: 20px;

    background: #101014;

    border: 1px solid #333;

    border-radius: 8px;

    color: white;

    outline: none;
}

.admin-login-box input:focus {
    border-color: #8b5cff;
}

.admin-login-button {
    width: 100%;

    padding: 15px;

    border: none;

    border-radius: 8px;

    background: #8b5cff;

    color: white;

    font-weight: bold;

    cursor: pointer;

    font-size: 15px;
}

.admin-login-button:hover {
    opacity: 0.9;
}

#login-message {
    color: #ff6b6b;

    margin-top: 15px;

    font-size: 14px;
}


/* ==========================================
   ADMIN DASHBOARD
========================================== */

.dashboard-header {
    padding: 18px 6%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background: #101014;

    border-bottom: 1px solid #292932;
}

.dashboard-user {
    display: flex;

    align-items: center;

    gap: 20px;

    color: #aaa;
}

.dashboard-user button {
    padding: 9px 15px;

    background: transparent;

    color: white;

    border: 1px solid #444;

    border-radius: 7px;

    cursor: pointer;
}

.dashboard {
    padding: 60px 7%;
}

.dashboard-heading {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 40px;
}

.dashboard-heading h1 {
    font-size: 45px;
}

.dashboard-subtitle {
    color: #888;

    margin-top: 10px;
}

.add-product-button {
    padding: 14px 22px;

    border: none;

    border-radius: 8px;

    background: #8b5cff;

    color: white;

    font-weight: bold;

    cursor: pointer;
}

.dashboard-cards {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 20px;

    margin-bottom: 60px;
}

.dashboard-card {
    padding: 25px;

    background: #18181e;

    border: 1px solid #292932;

    border-radius: 12px;
}

.dashboard-card span {
    display: block;

    color: #888;

    margin-bottom: 12px;
}

.dashboard-card strong {
    font-size: 32px;
}

.admin-section-heading {
    margin-bottom: 25px;
}

.admin-section-heading h2 {
    font-size: 30px;
}

.admin-section-heading p {
    color: #777;

    margin-top: 8px;
}

.admin-empty {
    padding: 60px;

    text-align: center;

    border: 1px dashed #444;

    border-radius: 12px;

    color: #888;
}

.admin-empty h3 {
    color: white;

    margin-bottom: 10px;
}


/* ==========================================
   ADMIN PRODUCT ROWS
========================================== */

.admin-product-row {
    display: grid;

    grid-template-columns:
        2fr 1fr 1fr auto;

    align-items: center;

    gap: 20px;

    padding: 15px;

    margin-bottom: 10px;

    background: #18181e;

    border: 1px solid #292932;

    border-radius: 10px;
}

.admin-product-name {
    display: flex;

    align-items: center;

    gap: 15px;
}

.admin-product-name img,
.admin-no-image {
    width: 55px;

    height: 55px;

    object-fit: cover;

    border-radius: 8px;

    background: #101014;

    display: flex;

    align-items: center;

    justify-content: center;
}

.admin-product-name small {
    display: block;

    color: #777;

    margin-top: 5px;
}

.edit-product {
    padding: 8px 14px;

    background: transparent;

    border: 1px solid #444;

    color: white;

    border-radius: 6px;

    cursor: pointer;
}


/* ==========================================
   PRODUCT FORM
========================================== */

.product-form-section {
    background: #18181e;

    border: 1px solid #292932;

    border-radius: 15px;

    padding: 30px;

    margin-bottom: 50px;
}

.checkbox-label {
    display: flex !important;

    flex-direction: row !important;

    align-items: center;

    gap: 10px;

    cursor: pointer;
}

.checkbox-label input {
    width: auto;
}

.form-buttons {
    display: flex;

    justify-content: flex-end;

    gap: 12px;

    margin-top: 25px;
}

.cancel-button,
.save-product-button {
    padding: 13px 22px;

    border-radius: 8px;

    cursor: pointer;

    font-weight: bold;
}

.cancel-button {
    background: transparent;

    color: white;

    border: 1px solid #444;
}

.save-product-button {
    background: #8b5cff;

    color: white;

    border: none;
}

.save-product-button:hover,
.add-product-button:hover {
    opacity: 0.88;
}

#product-message {
    margin-top: 18px;

    font-size: 14px;
}


/* ==========================================
   RESPONSIVE TABLET
========================================== */

@media (max-width: 900px) {

   nav {
    display: flex;
    position: absolute;

    top: 100%;
    left: 0;

    width: 100%;

    padding: 12px 5%;

    gap: 22px;

    overflow-x: auto;

    background: #0b0b0f;

    border-top: 1px solid #222;
    border-bottom: 1px solid #222;

    white-space: nowrap;
}

nav a {
    flex: 0 0 auto;

    font-size: 14px;
}

    .category-grid,
    .product-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .dashboard-heading {
        align-items: flex-start;

        flex-direction: column;

        gap: 20px;
    }

    .dashboard-cards {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .admin-product-row {
        grid-template-columns: 1fr;
    }

}


/* ==========================================
   RESPONSIVE MOBILE
========================================== */

@media (max-width: 700px) {

    .form-grid,
    .checkout-grid {
        grid-template-columns: 1fr;
    }

    .form-group.full,
    .checkout-grid .full {
        grid-column: auto;
    }

    .product-form-section {
        padding: 20px;
    }

    .form-buttons {
        flex-direction: column;
    }

    .cancel-button,
    .save-product-button {
        width: 100%;
    }

    .checkout-card {
        padding: 20px;

        border-radius: 12px;
    }

    .checkout-header h2 {
        font-size: 26px;
    }

    .fulfillment-options {
        grid-template-columns: 1fr;
    }

    .contact-action-row {
        flex-direction: column;
    }

    .contact-action-row a,
    .contact-action-row button {
        width: 100%;

        text-align: center;
    }

    .cart-drawer {
        width: 100%;
    }

    .floating-contact {
        right: 10px;

        bottom: 10px;
    }

}


/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width: 600px) {

    .navbar {
        padding: 15px 5%;
        margin-bottom: 48px;
    }

    .logo {
        font-size: 20px;
    }

    .cart-button {
        padding: 9px 13px;

        font-size: 13px;
    }

    .hero {
        min-height: 600px;

        padding: 60px 6%;
    }

    .hero h1 {
        font-size: 52px;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .categories,
    .shop,
    .repair-section,
    .contact {
        padding-left: 6%;

        padding-right: 6%;
    }

    .categories h2,
    .shop h2,
    .repair-section h2,
    .contact h2 {
        font-size: 34px;
    }

    .category-grid,
    .product-grid {
        grid-template-columns: 1fr;
    }

    .cart-drawer-header {
        padding: 20px;
    }

    .cart-items {
        padding: 15px;
    }

    .cart-summary {
        padding: 18px;
    }

    .checkout-modal {
        padding: 10px;
    }

    .checkout-card {
        max-height: 97vh;
    }

    .floating-contact a {
        font-size: 12px;

        padding: 10px 13px;
    }

}
/* ==========================================
   ADMIN TABS
========================================== */

.admin-tabs {
    display: flex;

    gap: 10px;

    margin-bottom: 35px;

    padding: 10px;

    background: #101014;

    border: 1px solid #292932;

    border-radius: 12px;

    overflow-x: auto;
}


.admin-tab {
    padding: 11px 18px;

    border: 1px solid #33333d;

    border-radius: 8px;

    background: #18181e;

    color: #aaa;

    font-weight: bold;

    cursor: pointer;

    white-space: nowrap;
}


.admin-tab:hover,
.admin-tab.active {
    background: #8b5cff;

    color: white;

    border-color: #8b5cff;
}


.admin-panel {
    display: none;
}


.admin-panel.active-panel {
    display: block;
}


/* ==========================================
   DELETE BUTTONS
========================================== */

.delete-order-button,
.delete-repair-button {
    background: #30191c;

    color: #ff8a8a;

    border-color: #633038;
}


.delete-order-button:hover,
.delete-repair-button:hover {
    background: #442126;

    border-color: #ff6b6b;

    color: white;
}


/* ==========================================
   ADMIN ACTIONS
========================================== */

.admin-action-button {
    padding: 10px 15px;

    border: 1px solid #444;

    border-radius: 7px;

    background: #101014;

    color: white;

    cursor: pointer;

    text-decoration: none;

    font-size: 14px;
}


.admin-action-button:hover {
    border-color: #8b5cff;
}


@media (max-width: 700px) {

    .admin-tabs {
        gap: 8px;

        padding: 8px;
    }


    .admin-tab {
        padding: 10px 14px;

        font-size: 13px;
    }

}

/* ==================================================
   VERSITECH — INSPIRED PREMIUM SYSTEM
   Direction: premium dark ecommerce, clear product hierarchy,
   restrained violet/blue accent, large photography, low clutter.
================================================== */
:root {
    --vs-black: #07090d;
    --vs-graphite: #0b0e14;
    --vs-panel: #11151d;
    --vs-panel-2: #151a24;
    --vs-white: #f7f8fb;
    --vs-muted: #9ba3b3;
    --vs-line: rgba(255,255,255,.09);
    --vs-purple: #7467ff;
    --vs-blue: #6f8cff;
    --vs-glow: rgba(116,103,255,.18);
}
html { background: var(--vs-black); }
body {
    background: var(--vs-black);
    color: var(--vs-white);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}
.navbar {
    min-height: 76px;
    padding: 0 6%;
    background: rgba(7,9,13,.88);
    border-bottom: 1px solid var(--vs-line);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.logo { font-size: 22px; letter-spacing: .18em; }
nav { gap: 34px; }
nav a { color: #dfe3eb; font-size: 14px; font-weight: 600; }
nav a:hover { color: #fff; }
.cart-button {
    background: #f6f7fb;
    color: #0a0c11;
    border-radius: 999px;
    padding: 11px 17px;
    box-shadow: none;
}
.small-title {
    color: #9f98ff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .18em;
}
.primary-button,
.add-cart {
    background: linear-gradient(135deg, #7467ff, #6688ff);
    color: #fff;
    border-radius: 999px;
    box-shadow: 0 10px 30px rgba(99,91,255,.18);
}
.secondary-button {
    border-color: rgba(255,255,255,.16);
    border-radius: 999px;
    background: rgba(255,255,255,.025);
}
.primary-button:hover,
.secondary-button:hover { transform: translateY(-1px); }

/* HERO */
.hero {
    position: relative;
    min-height: 720px;
    padding: 82px 7% 78px;
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr);
    align-items: center;
    gap: clamp(50px, 7vw, 110px);
    overflow: hidden;
    isolation: isolate;
    background:
        linear-gradient(180deg, rgba(255,255,255,.012), transparent 26%),
        #090c12;
}
.hero-art { position:absolute; inset:0; pointer-events:none; z-index:-1; overflow:hidden; }
.hero-grid-lines {
    position:absolute; inset:0;
    opacity:.23;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.65), transparent 82%);
}
.hero-orb { position:absolute; border-radius:50%; filter:blur(12px); opacity:.65; animation: vsFloat 12s ease-in-out infinite alternate; }
.hero-orb-one { width:540px; height:540px; right:-140px; top:-170px; background:radial-gradient(circle, rgba(116,103,255,.24), rgba(116,103,255,0) 68%); }
.hero-orb-two { width:430px; height:430px; left:33%; bottom:-260px; background:radial-gradient(circle, rgba(79,117,255,.17), rgba(79,117,255,0) 70%); animation-duration:16s; }
@keyframes vsFloat { from{transform:translate3d(-1.5%,-1%,0) scale(1)} to{transform:translate3d(2.5%,2%,0) scale(1.08)} }
.hero-content { max-width: 680px; }
.hero-eyebrow-row { display:flex; align-items:center; gap:10px; margin-bottom:22px; }
.hero-eyebrow-row .small-title { margin:0; }
.hero-eyebrow-dot { width:7px; height:7px; border-radius:50%; background:#8b80ff; box-shadow:0 0 18px #8b80ff; }
.hero h1 {
    margin:0 0 26px;
    font-size: clamp(54px, 6.4vw, 92px);
    line-height:.95;
    letter-spacing:-.055em;
    font-weight:850;
}
.hero h1 span { color:#a8afff; }
.hero-lead { max-width:620px; color:#aab1bf; font-size:18px; line-height:1.72; }
.hero-buttons { margin-top:34px; display:flex; gap:12px; flex-wrap:wrap; }
.hero-proof { margin-top:48px; padding-top:24px; border-top:1px solid var(--vs-line); display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.hero-proof strong { display:block; font-size:13px; color:#f4f5f8; margin-bottom:5px; }
.hero-proof span { color:#858e9e; font-size:11px; line-height:1.45; }
.hero-showcase {
    position:relative;
    min-height: 555px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:32px;
    overflow:hidden;
    background:#0d1119;
    box-shadow:0 40px 100px rgba(0,0,0,.52), 0 0 70px rgba(93,91,255,.08);
}
.hero-showcase > img { width:100%; height:100%; min-height:555px; display:block; object-fit:cover; }
.hero-showcase-placeholder { position:absolute; inset:0; padding:24px; display:grid; grid-template-columns:1fr 155px; grid-template-rows:1fr 150px; gap:14px; background:linear-gradient(145deg,#111721,#0a0d13); }
.showcase-main { position:relative; grid-row:1 / 3; overflow:hidden; border-radius:24px; padding:28px; background:linear-gradient(155deg,#171d29,#0c1017); border:1px solid var(--vs-line); }
.showcase-label,.showcase-mini span { color:#8f89ff; font-size:10px; font-weight:800; letter-spacing:.16em; }
.showcase-main strong { display:block; margin-top:18px; max-width:320px; font-size:clamp(28px,3.1vw,48px); line-height:1.02; letter-spacing:-.04em; }
.showcase-device { position:absolute; width:190px; height:350px; right:-24px; bottom:-38px; border-radius:32px; border:1px solid rgba(255,255,255,.15); background:linear-gradient(160deg,#313849,#111621 55%,#080b10); transform:rotate(11deg); box-shadow:-35px 24px 70px rgba(0,0,0,.55),0 0 45px rgba(110,105,255,.12); }
.showcase-device::before { content:""; position:absolute; inset:10px; border-radius:24px; background:radial-gradient(circle at 40% 20%,rgba(120,111,255,.30),transparent 30%),linear-gradient(160deg,#111727,#07090d); }
.showcase-mini { padding:20px; border-radius:22px; border:1px solid var(--vs-line); background:#121721; display:flex; flex-direction:column; justify-content:flex-end; }
.showcase-mini strong { margin-top:7px; font-size:16px; line-height:1.15; }
.showcase-mini-two { background:linear-gradient(145deg,rgba(116,103,255,.17),#111620 65%); }

/* TRUST STRIP */
.store-assurance { padding:0 7%; display:grid; grid-template-columns:repeat(4,1fr); background:#0a0d13; border-top:1px solid var(--vs-line); border-bottom:1px solid var(--vs-line); }
.assurance-item { min-height:112px; padding:24px 24px 24px 0; display:flex; align-items:center; gap:14px; border-right:1px solid var(--vs-line); }
.assurance-item:last-child { border-right:0; }
.assurance-mark { flex:0 0 auto; width:9px; height:9px; border-radius:2px; transform:rotate(45deg); background:linear-gradient(135deg,#857aff,#6e93ff); box-shadow:0 0 18px rgba(120,112,255,.35); }
.assurance-item strong { display:block; font-size:13px; margin-bottom:5px; }
.assurance-item small { display:block; color:#7f8898; font-size:11px; line-height:1.45; }

/* CATEGORIES */
.categories.premium-categories { padding:110px 7% 120px; background:#080b10; position:relative; overflow:hidden; }
.categories.premium-categories::before { content:""; position:absolute; width:620px; height:620px; left:-360px; top:80px; border-radius:50%; background:radial-gradient(circle,rgba(92,82,255,.10),transparent 68%); pointer-events:none; }
.category-section-head { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:42px; position:relative; z-index:1; }
.category-section-head h2 { margin:7px 0 0; font-size:clamp(38px,5vw,62px); letter-spacing:-.045em; }
.category-section-copy { max-width:470px; color:#8f98a8; line-height:1.7; font-size:14px; }
.premium-category-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; position:relative; z-index:1; }
.premium-category-card { min-height:300px; display:grid; grid-template-columns:minmax(230px,.82fr) minmax(280px,1.18fr); overflow:hidden; border-radius:26px; border:1px solid var(--vs-line); background:#10141c; color:#fff; text-decoration:none; box-shadow:0 18px 55px rgba(0,0,0,.25); transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease; }
.premium-category-card:hover { transform:translateY(-5px); border-color:rgba(135,126,255,.42); box-shadow:0 28px 70px rgba(0,0,0,.38); }
.category-copy { position:relative; padding:32px 28px; display:flex; flex-direction:column; justify-content:flex-end; min-width:0; }
.category-index { position:absolute; top:24px; left:28px; color:#5e6675; font-size:11px; font-weight:700; letter-spacing:.14em; }
.category-kicker { color:#928aff; font-size:10px; font-weight:850; letter-spacing:.16em; margin-bottom:9px; }
.premium-category-card h3 { margin:0 0 9px; font-size:30px; line-height:1; letter-spacing:-.035em; }
.premium-category-card p { margin:0 0 20px; color:#939cab; font-size:13px; line-height:1.55; max-width:320px; }
.category-link { font-size:12px; font-weight:700; color:#e7e9ef; }
.category-link b { margin-left:6px; color:#9f98ff; font-size:16px; }
.category-photo { min-height:300px; position:relative; display:grid; place-items:center; overflow:hidden; background:linear-gradient(145deg,#171c27,#0b0e14); border-left:1px solid var(--vs-line); }
.category-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(16,20,28,.18),transparent 42%); pointer-events:none; }
.category-photo img { width:100%; height:100%; min-height:300px; display:block; object-fit:cover; }
.category-photo-placeholder { width:100%; height:100%; display:grid; place-items:center; background:radial-gradient(circle at 60% 40%,rgba(111,100,255,.16),transparent 32%),linear-gradient(145deg,#161b25,#0b0e14); }
.category-photo-placeholder span { color:rgba(245,247,251,.18); font-size:28px; font-weight:900; letter-spacing:.18em; }

/* PRODUCT / SERVICE SURFACES */
.shop { background:#0a0d13; padding-top:110px; }
.section-heading h2,.repair-section h2,.contact h2 { letter-spacing:-.035em; }
.product-grid { gap:18px; }
.product-card { background:#11151d; border-color:var(--vs-line); border-radius:18px; box-shadow:none; }
.product-card:hover { transform:translateY(-4px); border-color:rgba(130,121,255,.36); }
.product-image { background:#0c1016; height:260px; }
.product-info { padding:18px; }
.repair-section { background:linear-gradient(180deg,#10141c,#0c1016); border-top:1px solid var(--vs-line); border-bottom:1px solid var(--vs-line); }
.contact { background:#090c11; }
footer { background:#06080c; border-top:1px solid var(--vs-line); }

@media (max-width:1050px) {
    .hero { grid-template-columns:1fr; min-height:auto; }
    .hero-showcase { min-height:500px; }
    .hero-showcase > img { min-height:500px; }
    .store-assurance { grid-template-columns:repeat(2,1fr); }
    .assurance-item:nth-child(2) { border-right:0; }
    .assurance-item:nth-child(-n+2) { border-bottom:1px solid var(--vs-line); }
    .premium-category-card { grid-template-columns:1fr; }
    .category-photo { border-left:0; border-top:1px solid var(--vs-line); min-height:250px; }
    .category-photo img { min-height:250px; }
}
@media (max-width:760px) {
    .navbar { padding:14px 5%; min-height:auto; }
    .hero { padding:62px 6% 66px; gap:38px; }
    .hero h1 { font-size:clamp(48px,13vw,68px); }
    .hero-lead { font-size:16px; }
    .hero-proof { grid-template-columns:1fr; gap:15px; }
    .hero-proof div { display:grid; grid-template-columns:100px 1fr; align-items:start; }
    .hero-showcase { min-height:380px; border-radius:24px; }
    .hero-showcase > img { min-height:380px; }
    .hero-showcase-placeholder { grid-template-columns:1fr 105px; grid-template-rows:1fr 110px; padding:14px; }
    .showcase-main { border-radius:18px; padding:20px; }
    .showcase-mini { border-radius:16px; padding:14px; }
    .showcase-device { width:135px; height:260px; }
    .store-assurance { padding:0 6%; grid-template-columns:1fr; }
    .assurance-item,.assurance-item:nth-child(2) { border-right:0; border-bottom:1px solid var(--vs-line); min-height:92px; padding-right:0; }
    .assurance-item:last-child { border-bottom:0; }
    .categories.premium-categories { padding:78px 6% 88px; }
    .category-section-head { align-items:flex-start; flex-direction:column; gap:13px; }
    .premium-category-grid { grid-template-columns:1fr; }
    .premium-category-card { grid-template-columns:minmax(160px,.9fr) minmax(180px,1.1fr); min-height:245px; border-radius:20px; }
    .category-copy { padding:26px 20px; }
    .category-index { top:19px; left:20px; }
    .premium-category-card h3 { font-size:24px; }
    .premium-category-card p { font-size:12px; margin-bottom:14px; }
    .category-photo,.category-photo img { min-height:245px; border-top:0; border-left:1px solid var(--vs-line); }
}
@media (max-width:520px) {
    .premium-category-card { grid-template-columns:1fr; }
    .category-photo,.category-photo img { min-height:220px; border-left:0; border-top:1px solid var(--vs-line); }
    .category-copy { min-height:210px; }
}
@media (prefers-reduced-motion:reduce) { .hero-orb { animation:none; } }

/* ==================================================
   VERSITECH — PURPLE + WHITE LUXE VARIANT
   Brighter editorial direction inspired by the selected reference.
================================================== */
:root{
 --vs-black:#130d20;--vs-graphite:#1b122b;--vs-panel:#ffffff;--vs-panel-2:#f5f1fb;
 --vs-white:#ffffff;--vs-muted:#6f657b;--vs-line:rgba(78,42,112,.13);
 --vs-purple:#7b2cff;--vs-blue:#a45cff;--vs-glow:rgba(123,44,255,.25)
}
html,body{background:#f7f3fb;color:#1d1527}
.navbar{background:rgba(255,255,255,.91);border-bottom:1px solid rgba(72,39,103,.10);box-shadow:0 8px 30px rgba(70,31,112,.05)}
.logo{color:#21152f} nav a{color:#43364f} nav a:hover{color:#7b2cff}.cart-button{background:#7b2cff;color:#fff;box-shadow:0 10px 26px rgba(123,44,255,.18)}
.small-title{color:#7b2cff}.primary-button,.add-cart{background:linear-gradient(135deg,#7025ee,#a64dff);box-shadow:0 14px 34px rgba(123,44,255,.24)}.secondary-button{color:#2d2039;background:#fff;border-color:rgba(76,41,105,.16)}
.hero{background:linear-gradient(115deg,#fbf9fd 0%,#f3eafb 52%,#e9d6ff 100%);color:#21152f}
.hero-grid-lines{opacity:.28;background-image:linear-gradient(rgba(92,48,129,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(92,48,129,.055) 1px,transparent 1px)}
.hero-orb-one{background:radial-gradient(circle,rgba(137,50,255,.36),rgba(137,50,255,0) 68%)}.hero-orb-two{background:radial-gradient(circle,rgba(193,111,255,.28),rgba(193,111,255,0) 70%)}
.hero-eyebrow-dot{background:#8c35ff;box-shadow:0 0 18px #9d54ff}.hero h1{color:#20132e}.hero h1 span{color:#7b2cff}.hero-lead{color:#695c74}.hero-proof{border-top-color:rgba(75,40,105,.13)}.hero-proof strong{color:#2b1d37}.hero-proof span{color:#786b83}
.hero-showcase{background:#fff;border-color:rgba(84,45,116,.14);box-shadow:0 40px 100px rgba(79,37,116,.16),0 0 80px rgba(143,62,255,.12)}
.hero-showcase-placeholder{background:linear-gradient(145deg,#fff,#f0e6fb)}.showcase-main{background:linear-gradient(145deg,#ffffff,#eee0fa);border-color:rgba(88,47,120,.12)}.showcase-label,.showcase-mini span{color:#7b2cff}.showcase-main strong{color:#24152f}.showcase-device{border-color:rgba(95,52,126,.15);background:linear-gradient(160deg,#a34cff,#6f24d9 58%,#37105e);box-shadow:-35px 24px 70px rgba(74,30,107,.25),0 0 50px rgba(137,58,255,.2)}.showcase-device::before{background:radial-gradient(circle at 40% 20%,rgba(255,255,255,.28),transparent 30%),linear-gradient(160deg,#542086,#1f0e35)}.showcase-mini{background:#fff;border-color:rgba(88,47,120,.12);color:#24152f}.showcase-mini-two{background:linear-gradient(145deg,#efe1ff,#fff 72%)}
.store-assurance{background:#fff;border-color:rgba(77,42,106,.11);color:#2b1e36}.assurance-item{border-color:rgba(77,42,106,.11)}.assurance-mark{background:linear-gradient(135deg,#7425ed,#bd67ff);box-shadow:0 0 18px rgba(123,44,255,.28)}.assurance-item strong{color:#2b1e36}.assurance-item small{color:#766a80}
.categories.premium-categories{background:linear-gradient(180deg,#faf8fc,#f4eef9)}.categories.premium-categories::before{background:radial-gradient(circle,rgba(139,54,255,.16),transparent 68%)}.category-section-head h2{color:#24172f}.category-section-copy{color:#71647b}
.premium-category-card{background:#fff;color:#25172f;border-color:rgba(80,42,111,.12);box-shadow:0 20px 55px rgba(67,27,96,.10)}.premium-category-card:hover{border-color:rgba(123,44,255,.32);box-shadow:0 30px 75px rgba(87,33,128,.16)}.category-index{color:#a397ad}.category-kicker{color:#7b2cff}.premium-category-card h3{color:#24162f}.premium-category-card p{color:#74677e}.category-link{color:#382743}.category-link b{color:#8c35ff}.category-photo{background:linear-gradient(145deg,#f1e7fa,#e6d4f5);border-color:rgba(80,42,111,.11)}.category-photo::after{background:linear-gradient(90deg,rgba(255,255,255,.16),transparent 42%)}.category-photo-placeholder{background:radial-gradient(circle at 60% 40%,rgba(140,53,255,.25),transparent 34%),linear-gradient(145deg,#f5edfc,#e6d5f4)}.category-photo-placeholder span{color:rgba(70,38,93,.28)}
.shop{background:#fff}.section-heading h2,.repair-section h2,.contact h2{color:#24172f}.product-card{background:#fff;border-color:rgba(80,42,111,.12);box-shadow:0 12px 38px rgba(65,30,91,.07)}.product-card:hover{border-color:rgba(123,44,255,.3);box-shadow:0 22px 55px rgba(80,31,117,.12)}.product-image{background:#f4eff8}.product-info{color:#281b34}.repair-section{background:linear-gradient(135deg,#f2e8fb,#fff);border-color:rgba(80,42,111,.11)}.contact{background:#fff}.contact p{color:#6f6279}footer{background:#1a0f29;border-top:0;color:#fff}
@media(max-width:760px){.navbar{background:rgba(255,255,255,.95)}}


/* ==================================================
   VERSITECH — TYPOGRAPHY & READABILITY PASS 2026
   Larger supporting copy, stronger hierarchy, less grey.
================================================== */
:root{
    --vs-ink:#21142d;
    --vs-body:#493653;
    --vs-soft:#655070;
    --vs-purple-dark:#5f1fc5;
    --vs-purple:#7b2cff;
    --vs-lavender:#f4ecfb;
}

/* Global readable hierarchy */
body{
    color:var(--vs-ink);
    font-size:16px;
    line-height:1.6;
}

nav a{
    font-size:15px;
    font-weight:650;
    color:#3c2c47;
}

.small-title{
    font-size:12px;
    font-weight:850;
    letter-spacing:.16em;
    color:var(--vs-purple-dark);
}

.hero-lead{
    color:var(--vs-body);
    font-size:20px;
    line-height:1.7;
    font-weight:450;
}

.hero-proof strong{
    color:#2a1937;
    font-size:15px;
    font-weight:800;
}

.hero-proof span{
    color:#594665;
    font-size:13px;
    line-height:1.5;
}

.assurance-item strong{
    color:#291834;
    font-size:15px;
    font-weight:800;
}

.assurance-item small{
    color:#5d4968;
    font-size:13.5px;
    line-height:1.5;
}

.category-section-copy{
    color:#55415f;
    font-size:16px;
    line-height:1.7;
    font-weight:450;
}

.category-kicker{
    color:var(--vs-purple-dark);
    font-size:11px;
    font-weight:900;
}

.premium-category-card h3{
    color:#22142d;
    font-size:32px;
    font-weight:850;
}

.premium-category-card p{
    color:#584365;
    font-size:15px;
    line-height:1.55;
}

.category-link{
    color:#2e1d39;
    font-size:14px;
    font-weight:800;
}

.section-heading > p:not(.small-title),
.shop .section-heading > p:not(.small-title){
    color:#55415f !important;
    font-size:16px !important;
    line-height:1.7;
    max-width:720px;
}

.section-heading h2,
.repair-section h2,
.contact h2{
    color:#22142d;
    font-weight:850;
}

.product-category{
    color:var(--vs-purple-dark);
    font-size:13px;
    font-weight:850;
    letter-spacing:.08em;
}

.product-info h3{
    color:#24162f;
    font-size:21px;
    line-height:1.25;
}

.price{
    color:#24162f;
    font-size:21px;
}

.old-price{
    color:#806f89;
}

.repair-content > p,
.contact p{
    color:#51405d;
    font-size:16.5px;
    line-height:1.75;
}

#repair-form label,
.form-group label{
    color:#3f2c4b;
    font-size:14px;
    font-weight:750;
}

footer p{
    color:#d6c7df;
    font-size:14px;
}

/* Keep secondary buttons readable */
.secondary-button{
    color:#2b1c36;
    font-size:15px;
    font-weight:750;
}

.primary-button{
    font-size:15px;
    font-weight:800;
}

@media(max-width:760px){
    body{font-size:16px}
    .hero-lead{font-size:17px;line-height:1.65}
    .hero-proof strong{font-size:14px}
    .hero-proof span{font-size:13px}
    .category-section-copy{font-size:15px}
    .premium-category-card h3{font-size:27px}
    .premium-category-card p{font-size:14px}
    .section-heading > p:not(.small-title),
    .shop .section-heading > p:not(.small-title),
    .repair-content > p,
    .contact p{font-size:15.5px}
}

/* ==================================================
   VERSITECH 2026 READABILITY + CONVERSION REDESIGN
================================================== */
:root{
 --brand-purple:#6D35E8;--brand-violet:#8B5CF6;--brand-indigo:#4F46E5;
 --ink:#17142B;--ink-2:#332E4F;--muted:#5F5877;--line:#E7E0F5;
 --lavender:#F7F3FF;--lavender-2:#EEE7FF;--white:#FFFFFF;
}
html{font-size:17px} body{color:var(--ink);background:#fff;line-height:1.65}
p,li,label,input,select,textarea,button,a{font-size:1rem}
.small-title{font-size:.88rem!important;letter-spacing:.12em!important;font-weight:800!important;color:#6436CF!important}
.navbar{min-height:82px;padding:0 7%;background:rgba(255,255,255,.96)!important;border-bottom:1px solid var(--line)!important;box-shadow:0 6px 24px rgba(54,32,95,.06)}
.logo{font-size:1.45rem!important;letter-spacing:.16em!important;color:var(--ink)!important} nav a{font-size:1rem!important;font-weight:750!important;color:#30294A!important}
.cart-button{font-size:.98rem!important;font-weight:800!important}
.hero{min-height:auto!important;padding:88px 8% 70px!important;grid-template-columns:minmax(0,1.02fr) minmax(360px,.98fr)!important;gap:clamp(42px,6vw,88px)!important;background:linear-gradient(135deg,#fff 0%,#FBF9FF 48%,#F1EAFF 100%)!important}
.hero::before{opacity:.55}.hero-content{max-width:760px!important}.hero h1{font-size:clamp(3.5rem,6.2vw,6.4rem)!important;line-height:.96!important;letter-spacing:-.055em!important;margin:18px 0 26px!important;color:var(--ink)!important}.hero h1 span{color:var(--brand-purple)!important;background:none!important;-webkit-text-fill-color:initial!important}.hero-lead{font-size:clamp(1.15rem,1.55vw,1.38rem)!important;line-height:1.65!important;color:var(--ink-2)!important;max-width:680px!important;font-weight:520!important}.hero-buttons{gap:14px!important;margin-top:32px!important}.primary-button,.secondary-button{min-height:56px!important;padding:15px 25px!important;font-size:1.03rem!important;font-weight:850!important;border-radius:14px!important}.primary-button{background:linear-gradient(135deg,#6731DF,#8B5CF6)!important;color:#fff!important;box-shadow:0 14px 32px rgba(109,53,232,.22)!important}.secondary-button{background:#fff!important;color:#33235F!important;border:1.5px solid #D7C8F5!important}.hero-proof{margin-top:44px!important;padding-top:26px!important;border-top:1px solid #DED5EF!important;gap:28px!important}.hero-proof strong{font-size:1.05rem!important;color:#271D45!important}.hero-proof span{font-size:.94rem!important;color:#5B526E!important;line-height:1.45!important;margin-top:4px!important}.hero-showcase{border-radius:30px!important;border:1px solid #DCCDF7!important;box-shadow:0 28px 70px rgba(74,39,135,.18)!important;background:linear-gradient(145deg,#6D35E8,#9C6CFF)!important;min-height:510px!important}.hero-showcase-placeholder{color:#fff!important}.showcase-main strong{font-size:clamp(2rem,3.2vw,3.2rem)!important;line-height:1.05!important}.showcase-mini{background:rgba(255,255,255,.94)!important;color:#24153F!important;border:1px solid rgba(255,255,255,.9)!important}.showcase-mini span{color:#6D35E8!important}.store-assurance{padding:28px 7%!important;background:#fff!important;border-top:1px solid var(--line)!important;border-bottom:1px solid var(--line)!important;gap:18px!important}.assurance-item{padding:18px 18px!important;border-radius:16px!important;background:#FAF8FF!important;border:1px solid #E9E2F7!important}.assurance-item strong{font-size:1.02rem!important;color:#241B3B!important}.assurance-item small{font-size:.91rem!important;color:#5B536B!important;line-height:1.45!important}.premium-categories{padding:92px 7%!important;background:#F8F5FF!important}.category-section-head{margin-bottom:34px!important}.category-section-head h2,.section-heading h2,.repair-content h2,.contact h2{font-size:clamp(2.35rem,4vw,4rem)!important;line-height:1.05!important;letter-spacing:-.035em!important;color:var(--ink)!important}.category-section-copy,.section-heading>p:not(.small-title){font-size:1.08rem!important;color:#514A65!important;max-width:620px!important}.premium-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:24px!important}.premium-category-card{min-height:430px!important;border-radius:26px!important;background:#fff!important;border:1px solid #DED4F1!important;box-shadow:0 16px 45px rgba(56,34,91,.09)!important}.premium-category-card:hover{transform:translateY(-5px)!important;box-shadow:0 24px 55px rgba(78,43,139,.15)!important;border-color:#BBA2EC!important}.category-copy{padding:34px!important}.category-index{font-size:.9rem!important;color:#7A55CE!important}.category-kicker{font-size:.85rem!important;color:#6D35E8!important;font-weight:850!important}.premium-category-card h3{font-size:clamp(2rem,3vw,3rem)!important;color:#1D1630!important;margin:8px 0 10px!important}.premium-category-card p{font-size:1.05rem!important;line-height:1.55!important;color:#514A62!important;max-width:460px!important}.category-link{font-size:1rem!important;font-weight:850!important;color:#6030CE!important}.category-photo{background:linear-gradient(145deg,#F0E8FF,#E4D5FF)!important}.category-photo-placeholder span{font-size:1.1rem!important;color:#6D35E8!important;font-weight:900!important;letter-spacing:.12em!important}.shop{padding:92px 7%!important;background:#fff!important}.section-heading{max-width:720px!important}.section-heading [style*="color:#888"]{color:#514A65!important;font-size:1.08rem!important;line-height:1.6!important}.product-card{border:1px solid #E3DCEF!important;border-radius:20px!important;box-shadow:0 10px 30px rgba(43,26,72,.07)!important}.product-card h3{font-size:1.15rem!important;color:#201932!important}.product-category{font-size:.86rem!important;font-weight:800!important;color:#6D35E8!important}.product-description{font-size:.96rem!important;color:#5A5268!important}.repair-section{padding:92px 7%!important;background:linear-gradient(145deg,#F5EFFF,#FBFAFF)!important}.repair-content>p:not(.small-title){font-size:1.12rem!important;color:#4E465F!important}.form-group label{font-size:1rem!important;font-weight:800!important;color:#2A2240!important}.form-group input,.form-group select,.form-group textarea{font-size:1rem!important;min-height:54px!important;color:#211A32!important;background:#fff!important;border:1.5px solid #D8CEE9!important;border-radius:12px!important}.form-group textarea{min-height:130px!important}.contact{padding:92px 7%!important;background:#fff!important}.contact p,.contact-details,.contact-details p{font-size:1.05rem!important;color:#514A62!important}.floating-contact a{font-size:1rem!important;font-weight:850!important} footer,footer p,footer a{font-size:.96rem!important}
@media(max-width:900px){html{font-size:16px}.hero{grid-template-columns:1fr!important;padding:62px 6% 58px!important}.hero h1{font-size:clamp(3.15rem,12vw,5.4rem)!important}.hero-showcase{min-height:390px!important}.hero-proof{grid-template-columns:1fr 1fr!important}.store-assurance{grid-template-columns:1fr 1fr!important}.premium-categories,.shop,.repair-section,.contact{padding-left:6%!important;padding-right:6%!important}}
@media(max-width:600px){html{font-size:17px}.navbar{min-height:72px!important}.hero{padding-top:48px!important}.hero h1{font-size:clamp(2.9rem,14vw,4.25rem)!important;line-height:.98!important}.hero-lead{font-size:1.08rem!important}.hero-buttons{display:grid!important;grid-template-columns:1fr!important}.primary-button,.secondary-button{width:100%!important;text-align:center!important}.hero-proof{grid-template-columns:1fr!important;gap:16px!important}.hero-proof div{padding:12px 0!important}.hero-showcase{min-height:330px!important}.store-assurance{grid-template-columns:1fr!important;padding:20px 5%!important}.premium-category-grid{grid-template-columns:1fr!important}.premium-category-card{min-height:470px!important}.category-copy{padding:26px!important}.category-section-head h2,.section-heading h2,.repair-content h2,.contact h2{font-size:2.45rem!important}.premium-categories,.shop,.repair-section,.contact{padding:68px 5%!important}.floating-contact{right:14px!important;bottom:14px!important}}


/* VERSITECH FINAL VISUAL SYSTEM */
:root{--vp:#6C3CE7;--vpd:#45208F;--vv:#8B5CF6;--vi:#181426;--vb:#423A55;--vm:#625A72;--vl:#F5F0FF;--vline:#DDD2F2}
body{background:#fff!important;color:var(--vi)!important;font-size:18px!important;line-height:1.65!important}p{color:var(--vb)}
.navbar{background:rgba(255,255,255,.97)!important;border-bottom:1px solid #E7DFF5!important;box-shadow:0 8px 28px rgba(54,32,95,.07)!important}.logo{color:#1B1727!important}nav a{color:#2D2740!important;font-size:17px!important;font-weight:800!important}nav a:hover{color:var(--vp)!important}.cart-button{background:linear-gradient(135deg,#5B2DCE,#7B4FF0)!important;color:#fff!important}
.hero{min-height:620px!important;padding:72px 7% 62px!important;background:radial-gradient(circle at 86% 20%,rgba(139,92,246,.20),transparent 28%),radial-gradient(circle at 72% 78%,rgba(108,60,231,.12),transparent 28%),linear-gradient(135deg,#fff 0%,#FBF9FF 52%,#F1EAFF 100%)!important}
.hero h1{font-size:clamp(3.3rem,5.5vw,5.7rem)!important;line-height:.98!important;max-width:800px!important;color:var(--vi)!important}.hero h1 span{color:var(--vp)!important}.hero-lead{font-size:20px!important;line-height:1.65!important;color:#3F374F!important;max-width:670px!important}
.primary-button,.secondary-button{font-size:17px!important;min-height:58px!important}.primary-button{background:linear-gradient(135deg,#6030D8,#8658F2)!important;color:#fff!important}.secondary-button{background:#fff!important;color:#39235E!important;border:2px solid #D3C2F3!important}.hero-proof strong{font-size:18px!important;color:#201A30!important}.hero-proof span{font-size:16px!important;color:#51495F!important}
.hero-showcase{min-height:460px!important;border-radius:30px!important;background:radial-gradient(circle at 76% 20%,rgba(255,255,255,.34),transparent 22%),linear-gradient(145deg,#4D21B0,#7141E6 52%,#9B72FF)!important;border:0!important;box-shadow:0 30px 70px rgba(76,39,143,.24)!important}.hero-showcase-placeholder{color:#fff!important}.showcase-main strong{font-size:clamp(2.25rem,3.2vw,3.6rem)!important;color:#fff!important}.showcase-label{color:#EDE6FF!important}.showcase-mini{background:#fff!important;color:#20172F!important;box-shadow:0 16px 35px rgba(40,20,75,.18)!important}.showcase-mini span{color:#6C3CE7!important;font-size:14px!important}.showcase-mini strong{font-size:18px!important}
.store-assurance{background:#fff!important;padding:24px 7%!important}.assurance-item{background:#FAF8FF!important;border:1px solid #E5DCF5!important;padding:20px!important}.assurance-item strong{font-size:17px!important;color:#211A32!important}.assurance-item small{font-size:15px!important;color:#554D64!important}
.premium-categories{background:#F7F3FF!important;padding:86px 7% 96px!important}.category-section-head h2{font-size:clamp(2.7rem,4.3vw,4.5rem)!important;color:#181426!important}.category-section-copy{font-size:19px!important;color:#4A4258!important;line-height:1.6!important}.premium-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:26px!important}
.premium-category-card{min-height:500px!important;display:grid!important;grid-template-rows:64% 36%!important;background:#fff!important;border:1px solid #DED3F0!important;border-radius:26px!important;overflow:hidden!important;box-shadow:0 18px 45px rgba(53,31,88,.10)!important}.premium-category-card:hover{transform:translateY(-5px)!important;box-shadow:0 28px 60px rgba(70,38,123,.16)!important}.category-photo{grid-row:1!important;position:relative!important;inset:auto!important;min-height:0!important;background:linear-gradient(145deg,#E9DEFF,#D8C4FF)!important}.category-photo img{width:100%!important;height:100%!important;display:block!important}.category-copy{grid-row:2!important;padding:24px 28px 27px!important;position:relative!important;background:#fff!important;z-index:3!important}.category-index{display:none!important}.category-kicker{font-size:14px!important;color:#6C3CE7!important;font-weight:900!important}.premium-category-card h3{font-size:31px!important;color:#1B1528!important;margin:5px 0!important}.premium-category-card p{font-size:17px!important;color:#51495F!important;line-height:1.5!important;margin:0 0 11px!important}.category-link{font-size:16px!important;color:#5D2FD0!important;font-weight:900!important}.category-photo-placeholder span{font-size:20px!important;color:#5B2BC7!important}
.shop{background:#fff!important;padding:88px 7%!important}.section-heading h2{font-size:clamp(2.6rem,4vw,4.2rem)!important;color:#181426!important}.section-heading>p:not(.small-title){font-size:19px!important;color:#4C4459!important}.product-card{background:#fff!important;border:1px solid #E0D8ED!important;border-radius:20px!important;box-shadow:0 12px 34px rgba(47,29,72,.08)!important}.product-info h3,.product-card h3{font-size:21px!important;color:#1D1729!important}.product-description{font-size:16px!important;color:#544D60!important}.product-category{font-size:14px!important;color:#6334D2!important}.price,.sale-price{font-size:21px!important}
.repair-section{padding:92px 7%!important;background:linear-gradient(135deg,#F2EAFF,#FAF8FF 55%,#EEE4FF)!important}.repair-content{max-width:920px!important;margin:auto!important}.repair-content h2{font-size:clamp(2.8rem,4.6vw,4.7rem)!important;color:#181426!important}.repair-content>p:not(.small-title){font-size:20px!important;color:#443B53!important}
#repair-form{margin-top:34px!important;padding:36px!important;background:#fff!important;border:1px solid #D8CBEF!important;border-radius:24px!important;box-shadow:0 22px 55px rgba(68,39,116,.12)!important}.form-group{margin-bottom:22px!important}.form-group label{display:block!important;font-size:17px!important;font-weight:850!important;color:#251C37!important;margin-bottom:9px!important}.form-group input,.form-group select,.form-group textarea{width:100%!important;min-height:58px!important;padding:14px 16px!important;font-size:17px!important;color:#20172F!important;background:#fff!important;border:2px solid #D7CBEA!important;border-radius:12px!important}.form-group input::placeholder,.form-group textarea::placeholder{color:#71677F!important;opacity:1!important}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none!important;border-color:#7544E8!important;box-shadow:0 0 0 4px rgba(108,60,231,.10)!important}.form-group textarea{min-height:140px!important}#repair-form button[type="submit"]{min-height:60px!important;font-size:18px!important;font-weight:900!important;background:linear-gradient(135deg,#5C2DD0,#8657F0)!important;color:#fff!important}
.contact{background:#fff!important}.contact h2{color:#181426!important}.contact p,.contact-details,.contact-details p{font-size:17px!important;color:#4F475C!important}.floating-contact a{font-size:16px!important;font-weight:900!important}
@media(max-width:900px){body{font-size:17px!important}.hero{grid-template-columns:1fr!important;padding:58px 6% 60px!important}.hero h1{font-size:clamp(3rem,11vw,5rem)!important}.hero-showcase{min-height:370px!important}.premium-category-grid{grid-template-columns:1fr!important}.premium-category-card{min-height:500px!important}}
@media(max-width:600px){nav a{font-size:16px!important}.hero h1{font-size:clamp(2.75rem,13vw,4rem)!important}.hero-lead{font-size:18px!important}.hero-showcase{min-height:320px!important}.premium-categories,.shop,.repair-section,.contact{padding:64px 5%!important}.category-section-copy,.section-heading>p:not(.small-title),.repair-content>p:not(.small-title){font-size:18px!important}.premium-category-card{min-height:455px!important;grid-template-rows:60% 40%!important}.premium-category-card h3{font-size:28px!important}.premium-category-card p{font-size:16px!important}#repair-form{padding:24px 18px!important}.form-group label,.form-group input,.form-group select,.form-group textarea{font-size:16px!important}}

/* VERSITECH PROFESSIONAL FINAL CORRECTION */
.hero-showcase{position:relative!important;overflow:hidden!important;min-height:470px!important;padding:0!important;background:linear-gradient(145deg,#5426BD,#7447E5 52%,#9A75F8)!important}
.hero-showcase>img{width:100%!important;height:100%!important;min-height:470px!important;display:block!important}
.hero-showcase-placeholder{height:100%!important;min-height:470px!important;display:flex!important;flex-direction:column!important;justify-content:flex-end!important;align-items:flex-start!important;padding:42px!important;background:radial-gradient(circle at 72% 25%,rgba(255,255,255,.20),transparent 23%),linear-gradient(145deg,#4E20B5,#7747E7 58%,#A080FF)!important}
.showcase-device,.showcase-mini{display:none!important}.showcase-main{max-width:390px!important}.showcase-main::before{content:"VERSITECH";display:inline-flex;padding:8px 12px;margin-bottom:16px;border-radius:999px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.24);color:#fff;font-size:13px;font-weight:900;letter-spacing:.14em}.showcase-main strong{display:block!important;font-size:clamp(2.2rem,3.5vw,3.8rem)!important;line-height:1.02!important;color:#fff!important}.showcase-main strong::after{content:"Phones • Accessories • Repairs";display:block;margin-top:14px;font-size:17px;line-height:1.5;font-weight:650;color:#EEE8FF}
.premium-category-card{grid-template-rows:minmax(315px,1fr) auto!important;min-height:510px!important;padding:0!important}.category-photo{width:100%!important;height:100%!important;min-height:315px!important;overflow:hidden!important;display:flex!important;align-items:center!important;justify-content:center!important;background:linear-gradient(145deg,#F1EAFF,#E5D9FF)!important}.category-photo img{width:100%!important;height:100%!important;min-height:315px!important;display:block!important}.category-copy{min-height:175px!important;padding:25px 28px 27px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;border-top:1px solid #E7DFF2!important}.category-photo-placeholder{width:100%!important;height:100%!important;min-height:315px!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:30px!important;text-align:center!important}.category-photo-placeholder span{font-size:15px!important;color:#5F35C8!important;letter-spacing:.11em!important;font-weight:900!important}.category-image-loaded .category-photo-placeholder{display:none!important}.category-image-loaded .category-photo{background:#EEE8F7!important}.category-kicker{font-size:14px!important;margin-bottom:7px!important}.premium-category-card h3{font-size:32px!important;line-height:1.08!important}.premium-category-card p{font-size:17px!important;line-height:1.55!important;max-width:560px!important}.category-link{margin-top:auto!important;padding-top:8px!important}.category-section-head,.premium-category-grid{max-width:1180px!important;margin-left:auto!important;margin-right:auto!important}.hero p,.category-section-copy,.premium-category-card p,.assurance-item small,.product-description,.repair-content>p,.contact p{opacity:1!important}
@media(max-width:900px){.hero-showcase,.hero-showcase-placeholder,.hero-showcase>img{min-height:360px!important}.premium-category-card{grid-template-rows:minmax(290px,1fr) auto!important;min-height:465px!important}.category-photo,.category-photo img,.category-photo-placeholder{min-height:290px!important}}
@media(max-width:600px){.hero-showcase,.hero-showcase-placeholder,.hero-showcase>img{min-height:310px!important}.hero-showcase-placeholder{padding:28px!important}.premium-category-card{min-height:445px!important;grid-template-rows:minmax(265px,1fr) auto!important}.category-photo,.category-photo img,.category-photo-placeholder{min-height:265px!important}.category-copy{min-height:180px!important;padding:22px!important}.premium-category-card h3{font-size:29px!important}}


/* ==================================================
   VERSITECH CATEGORY CARD — CLEAN BLEND FINAL
================================================== */
.premium-category-card{
    position:relative!important;
    display:grid!important;
    grid-template-rows:330px auto!important;
    min-height:515px!important;
    overflow:hidden!important;
    background:#fff!important;
    border:1px solid #DDD2F0!important;
    border-radius:28px!important;
    box-shadow:0 20px 50px rgba(53,31,88,.11)!important;
}
.category-photo{
    position:relative!important;
    width:100%!important;
    height:330px!important;
    min-height:330px!important;
    overflow:hidden!important;
    background:
      radial-gradient(circle at 50% 42%,rgba(126,78,230,.13),transparent 38%),
      linear-gradient(135deg,#F5F0FF,#E9DFFF)!important;
}
.category-photo img{
    width:100%!important;
    height:100%!important;
    display:block!important;
    object-fit:cover;
    background:#F1EBFA!important;
}
.category-photo::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:-1px;
    height:76px;
    pointer-events:none;
    background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.72) 58%,#fff 100%);
}
.category-copy{
    position:relative!important;
    z-index:3!important;
    min-height:185px!important;
    padding:24px 30px 30px!important;
    background:#fff!important;
    border-top:0!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
}
.category-kicker{
    color:#6533D2!important;
    font-size:14px!important;
    font-weight:900!important;
    letter-spacing:.10em!important;
    opacity:1!important;
}
.premium-category-card h3{
    color:#171222!important;
    font-size:32px!important;
    line-height:1.08!important;
    font-weight:900!important;
    margin:6px 0 8px!important;
    opacity:1!important;
}
.premium-category-card p{
    color:#443B51!important;
    font-size:18px!important;
    line-height:1.5!important;
    font-weight:550!important;
    opacity:1!important;
    margin:0 0 10px!important;
}
.category-link{
    color:#5627C5!important;
    font-size:16px!important;
    font-weight:900!important;
    opacity:1!important;
}
.category-image-loaded .category-photo-placeholder{display:none!important}

/* Contain images get an intentional backdrop rather than ugly empty white space. */
.category-photo img[style*="contain"]{
    padding:18px!important;
    background:
      radial-gradient(circle at 50% 45%,rgba(108,60,231,.11),transparent 42%),
      linear-gradient(135deg,#F8F5FF,#EEE7FA)!important;
}

@media(max-width:700px){
    .premium-category-card{
        grid-template-rows:280px auto!important;
        min-height:465px!important;
        border-radius:24px!important;
    }
    .category-photo{
        height:280px!important;
        min-height:280px!important;
    }
    .category-copy{padding:22px 23px 26px!important}
    .premium-category-card h3{font-size:29px!important}
    .premium-category-card p{font-size:17px!important}
}



/* ==================================================
   VERSITECH REFERENCE-STYLE UPGRADE
   Dynamic image colour bleed + split cards
================================================== */

:root {
    --ref-purple: #6640e8;
    --ref-purple-dark: #352273;
    --ref-ink: #151326;
    --ref-body: #514b63;
    --ref-soft: #f5f1ff;
    --ref-line: rgba(95, 65, 155, 0.14);
}


/* --------------------------------------------------
   HERO — COMPACT SO SHOP CARDS APPEAR QUICKLY
-------------------------------------------------- */

.hero {
    min-height: 500px !important;
    padding-top: 60px !important;
    padding-bottom: 58px !important;
    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(116, 82, 239, 0.16),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #ffffff,
            #faf8ff 52%,
            #f1ebff
        ) !important;
}

.hero h1 {
    font-size:
        clamp(
            3.15rem,
            5.2vw,
            5.35rem
        ) !important;

    color:
        var(
            --ref-ink
        ) !important;
}

.hero h1 span {
    color:
        var(
            --ref-purple
        ) !important;
}

.hero-lead {
    max-width: 650px !important;
    color: #413b50 !important;
    font-size: 19px !important;
}

.hero-proof {
    display: none !important;
}


/* --------------------------------------------------
   HERO IMAGE / FALLBACK
-------------------------------------------------- */

.hero-showcase {
    position: relative !important;

    min-height: 390px !important;

    overflow: hidden !important;

    border-radius: 30px !important;

    border:
        1px solid
        rgba(
            86,
            55,
            159,
            0.12
        ) !important;

    background:
        linear-gradient(
            145deg,
            #f2ecff,
            #ddd1ff
        ) !important;

    box-shadow:
        0 30px 80px
        rgba(
            60,
            38,
            109,
            0.16
        ) !important;
}

.hero-showcase::before {
    content: "";

    position: absolute;

    inset: -36px;

    background-image:
        var(
            --hero-ambient-image,
            none
        );

    background-size:
        cover;

    background-position:
        center;

    filter:
        blur(55px)
        saturate(1.25);

    transform:
        scale(1.13);

    opacity:
        0.34;

    pointer-events:
        none;
}

.hero-showcase > img {
    position: relative;

    z-index: 2;

    width: 100% !important;

    height: 100% !important;

    min-height: 390px !important;

    display: block !important;
}


/* --------------------------------------------------
   CATEGORY SECTION
-------------------------------------------------- */

.premium-categories {
    position: relative !important;

    overflow: hidden !important;

    padding:
        80px 6.5%
        105px !important;

    background:
        radial-gradient(
            circle at 8% 8%,
            rgba(
                117,
                81,
                235,
                0.12
            ),
            transparent 24%
        ),
        radial-gradient(
            circle at 92% 46%,
            rgba(
                89,
                146,
                255,
                0.10
            ),
            transparent 26%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8f5ff 100%
        ) !important;
}

.category-section-head {
    max-width: 1200px !important;

    margin:
        0 auto
        34px !important;
}

.category-section-head h2 {
    color:
        var(
            --ref-ink
        ) !important;
}

.category-section-copy {
    color: #4e465e !important;
    font-size: 18px !important;
}


/* --------------------------------------------------
   GRID
-------------------------------------------------- */

.premium-category-grid {
    max-width:
        1200px !important;

    margin:
        0 auto !important;

    display:
        grid !important;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        ) !important;

    gap:
        24px !important;
}


/* --------------------------------------------------
   CATEGORY CARD
-------------------------------------------------- */

.premium-category-card {
    --ambient-image: none;
    --ambient-position: center;

    position:
        relative !important;

    isolation:
        isolate !important;

    display:
        grid !important;

    grid-template-columns:
        minmax(
            0,
            0.96fr
        )
        minmax(
            0,
            1.04fr
        ) !important;

    grid-template-rows:
        1fr !important;

    min-height:
        385px !important;

    overflow:
        hidden !important;

    padding:
        0 !important;

    border-radius:
        28px !important;

    border:
        1px solid
        rgba(
            98,
            66,
            160,
            0.13
        ) !important;

    background:
        rgba(
            255,
            255,
            255,
            0.78
        ) !important;

    box-shadow:
        0 24px 60px
        rgba(
            57,
            35,
            91,
            0.11
        ) !important;

    backdrop-filter:
        blur(
            18px
        );

    -webkit-backdrop-filter:
        blur(
            18px
        );

    transition:
        transform
        .28s ease,
        box-shadow
        .28s ease,
        border-color
        .28s ease !important;
}


/* blurred copy of the uploaded image:
   this is what pushes its colours into the card */
.premium-category-card::before {
    content: "";

    position:
        absolute;

    inset:
        -45px;

    z-index:
        -3;

    background-image:
        var(
            --ambient-image
        );

    background-size:
        cover;

    background-position:
        var(
            --ambient-position
        );

    filter:
        blur(
            58px
        )
        saturate(
            1.28
        )
        brightness(
            1.08
        );

    transform:
        scale(
            1.14
        );

    opacity:
        0;

    transition:
        opacity
        .35s ease;
}

.premium-category-card.has-ambient-image::before {
    opacity:
        .34;
}


/* white / lavender glass softens the blur so text stays legible */
.premium-category-card::after {
    content: "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -2;

    pointer-events:
        none;

    background:
        linear-gradient(
            115deg,
            rgba(
                255,
                255,
                255,
                .86
            ) 0%,
            rgba(
                255,
                255,
                255,
                .70
            ) 44%,
            rgba(
                243,
                238,
                255,
                .54
            ) 100%
        );
}

.premium-category-card:hover {
    transform:
        translateY(
            -5px
        ) !important;

    border-color:
        rgba(
            103,
            65,
            220,
            .27
        ) !important;

    box-shadow:
        0 32px 72px
        rgba(
            57,
            35,
            91,
            0.16
        ) !important;
}


/* --------------------------------------------------
   COPY
-------------------------------------------------- */

.category-copy {
    position:
        relative !important;

    z-index:
        5 !important;

    grid-row:
        1 !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    justify-content:
        center !important;

    min-height:
        385px !important;

    padding:
        42px 38px !important;

    background:
        transparent !important;

    border:
        0 !important;
}


/* phone/gadget cards: image left, words right */
.premium-category-card:nth-child(odd)
.category-copy {
    grid-column:
        2 !important;
}


/* accessories/repairs: words left, image right */
.premium-category-card:nth-child(even)
.category-copy {
    grid-column:
        1 !important;
}

.category-kicker {
    display:
        inline-flex !important;

    width:
        fit-content;

    padding:
        6px 10px !important;

    margin-bottom:
        10px !important;

    border-radius:
        999px;

    background:
        rgba(
            102,
            64,
            232,
            0.09
        );

    border:
        1px solid
        rgba(
            102,
            64,
            232,
            0.14
        );

    color:
        #5431c5 !important;

    font-size:
        12px !important;

    font-weight:
        900 !important;

    letter-spacing:
        .10em !important;

    opacity:
        1 !important;
}

.premium-category-card h3 {
    margin:
        0 0
        10px !important;

    color:
        #151326 !important;

    font-size:
        clamp(
            2.05rem,
            3vw,
            3rem
        ) !important;

    line-height:
        1.02 !important;

    font-weight:
        900 !important;

    letter-spacing:
        -.035em !important;

    opacity:
        1 !important;
}

.premium-category-card p {
    max-width:
        340px !important;

    margin:
        0 0
        22px !important;

    color:
        #4b4558 !important;

    font-size:
        17px !important;

    line-height:
        1.55 !important;

    font-weight:
        550 !important;

    opacity:
        1 !important;
}

.category-link {
    display:
        inline-flex !important;

    align-items:
        center;

    gap:
        10px;

    width:
        fit-content;

    padding:
        12px 16px !important;

    margin-top:
        0 !important;

    border-radius:
        10px;

    background:
        linear-gradient(
            135deg,
            #5640ee,
            #7841dc
        );

    color:
        #ffffff !important;

    font-size:
        14px !important;

    font-weight:
        850 !important;

    box-shadow:
        0 10px 24px
        rgba(
            95,
            57,
            203,
            0.18
        );

    opacity:
        1 !important;
}

.category-link b {
    font-size:
        16px;
}


/* --------------------------------------------------
   PHOTO HALF
-------------------------------------------------- */

.category-photo {
    position:
        relative !important;

    z-index:
        4 !important;

    grid-row:
        1 !important;

    width:
        100% !important;

    height:
        100% !important;

    min-height:
        385px !important;

    overflow:
        visible !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    background:
        transparent !important;
}


.premium-category-card:nth-child(odd)
.category-photo {
    grid-column:
        1 !important;
}


.premium-category-card:nth-child(even)
.category-photo {
    grid-column:
        2 !important;
}


.category-main-image {
    width:
        100% !important;

    height:
        100% !important;

    min-height:
        385px !important;

    display:
        block !important;

    background:
        transparent !important;

    transform:
        scale(
            1.02
        );

    filter:
        drop-shadow(
            0 24px 36px
            rgba(
                33,
                24,
                62,
                .12
            )
        );
}


/* fade the edge of the actual image into the card */
.premium-category-card:nth-child(odd)
.category-main-image {
    -webkit-mask-image:
        linear-gradient(
            to right,
            #000 0%,
            #000 72%,
            rgba(
                0,
                0,
                0,
                .65
            ) 88%,
            transparent
            100%
        );

    mask-image:
        linear-gradient(
            to right,
            #000 0%,
            #000 72%,
            rgba(
                0,
                0,
                0,
                .65
            ) 88%,
            transparent
            100%
        );
}


.premium-category-card:nth-child(even)
.category-main-image {
    -webkit-mask-image:
        linear-gradient(
            to left,
            #000 0%,
            #000 72%,
            rgba(
                0,
                0,
                0,
                .65
            ) 88%,
            transparent
            100%
        );

    mask-image:
        linear-gradient(
            to left,
            #000 0%,
            #000 72%,
            rgba(
                0,
                0,
                0,
                .65
            ) 88%,
            transparent
            100%
        );
}


/* Contain mode:
   show the full image but keep the blur colour behind it */
.premium-category-card[
    data-image-fit="contain"
]
.category-main-image {
    padding:
        24px !important;

    transform:
        scale(
            .94
        );

    filter:
        drop-shadow(
            0 24px 34px
            rgba(
                35,
                24,
                70,
                .18
            )
        );
}


/* no uploaded photo yet */
.category-photo-placeholder {
    width:
        100% !important;

    height:
        100% !important;

    min-height:
        385px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    padding:
        32px !important;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(
                106,
                69,
                225,
                .15
            ),
            transparent 34%
        );

    text-align:
        center;
}

.category-photo-placeholder span {
    color:
        #6244c3 !important;

    font-size:
        13px !important;

    font-weight:
        900 !important;

    letter-spacing:
        .12em !important;

    opacity:
        .92;
}

.category-image-loaded
.category-photo-placeholder {
    display:
        none !important;
}


/* --------------------------------------------------
   ASSURANCE
-------------------------------------------------- */

.store-assurance {
    max-width:
        1200px;

    margin:
        0 auto;

    padding:
        24px 6.5%
        52px !important;
}

.assurance-item {
    background:
        rgba(
            250,
            248,
            255,
            .92
        ) !important;

    border:
        1px solid
        rgba(
            96,
            69,
            151,
            .10
        ) !important;
}


/* --------------------------------------------------
   MOBILE
-------------------------------------------------- */

@media (
    max-width:
    860px
) {

    .premium-category-grid {
        grid-template-columns:
            1fr !important;
    }

    .premium-category-card {
        grid-template-columns:
            1fr !important;

        grid-template-rows:
            285px auto !important;

        min-height:
            0 !important;
    }

    .premium-category-card:nth-child(odd)
    .category-photo,
    .premium-category-card:nth-child(even)
    .category-photo {
        grid-column:
            1 !important;

        grid-row:
            1 !important;

        min-height:
            285px !important;
    }

    .premium-category-card:nth-child(odd)
    .category-copy,
    .premium-category-card:nth-child(even)
    .category-copy {
        grid-column:
            1 !important;

        grid-row:
            2 !important;

        min-height:
            0 !important;

        padding:
            27px 25px
            30px !important;

        background:
            rgba(
                255,
                255,
                255,
                .78
            ) !important;
    }

    .category-main-image {
        min-height:
            285px !important;

        -webkit-mask-image:
            linear-gradient(
                to bottom,
                #000 0%,
                #000 72%,
                rgba(
                    0,
                    0,
                    0,
                    .55
                ) 88%,
                transparent 100%
            ) !important;

        mask-image:
            linear-gradient(
                to bottom,
                #000 0%,
                #000 72%,
                rgba(
                    0,
                    0,
                    0,
                    .55
                ) 88%,
                transparent 100%
            ) !important;
    }

    .category-photo-placeholder {
        min-height:
            285px !important;
    }

    .premium-category-card h3 {
        font-size:
            2.1rem !important;
    }

    .premium-category-card p {
        font-size:
            16px !important;
    }

}


@media (
    max-width:
    600px
) {

    .hero {
        min-height:
            auto !important;

        padding:
            52px 5%
            54px !important;
    }

    .hero-showcase {
        min-height:
            315px !important;
    }

    .premium-categories {
        padding:
            64px 5%
            80px !important;
    }

    .premium-category-card {
        border-radius:
            22px !important;
    }

}



/* ==================================================
   VERSITECH TRUE STOREFRONT REBUILD
   Structure inspired by the user's approved reference
================================================== */

:root {
    --vs-purple: #6844e8;
    --vs-purple-dark: #43259b;
    --vs-purple-soft: #eee8ff;
    --vs-blue-soft: #eaf3ff;
    --vs-ink: #161425;
    --vs-copy: #4c465d;
    --vs-line: rgba(69, 45, 123, .12);
    --vs-card-image: none;
    --vs-image-position: center;
}

body {
    background: #f8f6ff !important;
    color: var(--vs-ink) !important;
}

.navbar {
    min-height: 88px !important;
    padding: 0 7% !important;
    background: rgba(255,255,255,.97) !important;
    border-bottom: 1px solid rgba(73,51,124,.10) !important;
    box-shadow: 0 10px 30px rgba(48,31,82,.06) !important;
}

.logo {
    color: #171425 !important;
    font-size: 22px !important;
    letter-spacing: .20em !important;
}

.navbar nav a {
    color: #272236 !important;
    font-size: 16px !important;
    font-weight: 800 !important;
}

.cart-button {
    min-height: 48px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg,#4f3fe8,#7650e6) !important;
    color: white !important;
    box-shadow: 0 10px 24px rgba(90,63,207,.22) !important;
}

/* Intro */
.vs-intro {
    position: relative;
    overflow: hidden;
    padding: 78px 7% 48px;
    background:
        radial-gradient(circle at 84% 18%, rgba(85,116,255,.20), transparent 30%),
        radial-gradient(circle at 76% 72%, rgba(127,79,233,.18), transparent 28%),
        linear-gradient(135deg,#ffffff 0%,#faf8ff 48%,#eee9ff 100%);
}

.vs-intro-glow {
    position: absolute;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .24;
    pointer-events: none;
}

.vs-intro-glow-one {
    right: 14%;
    top: -90px;
    background: #5e79ff;
}

.vs-intro-glow-two {
    right: -80px;
    bottom: -130px;
    background: #8e5cff;
}

.vs-intro-inner {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0,1.15fr) minmax(320px,.85fr);
    align-items: center;
    gap: 70px;
}

.vs-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #5b3cc9;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .12em;
}

.vs-intro-copy h1 {
    max-width: 780px;
    margin: 16px 0 20px;
    color: var(--vs-ink);
    font-size: clamp(3.2rem,5.6vw,5.7rem);
    line-height: .98;
    letter-spacing: -.055em;
}

.vs-intro-copy h1 span {
    display: block;
    color: var(--vs-purple);
}

.vs-intro-copy > p {
    max-width: 680px;
    margin: 0;
    color: #454052;
    font-size: 19px;
    line-height: 1.65;
}

.vs-intro-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.vs-btn {
    min-height: 54px;
    padding: 0 21px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    border-radius: 12px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 900;
}

.vs-btn-primary {
    color: #fff;
    background: linear-gradient(135deg,#5542e9,#7946dc);
    box-shadow: 0 12px 26px rgba(92,61,199,.23);
}

.vs-btn-secondary {
    color: #302451;
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(93,64,156,.18);
}

.vs-intro-panel {
    position: relative;
    overflow: hidden;
    min-height: 330px;
    padding: 38px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-radius: 30px;
    color: #fff;
    background:
        radial-gradient(circle at 76% 22%, rgba(255,255,255,.22), transparent 25%),
        linear-gradient(145deg,#392188 0%,#6341d9 54%,#8e66f2 100%);
    box-shadow: 0 28px 70px rgba(67,37,136,.24);
}

.vs-intro-panel::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -30px;
    top: -35px;
    border-radius: 45px;
    border: 1px solid rgba(255,255,255,.16);
    transform: rotate(18deg);
}

.vs-panel-label {
    width: fit-content;
    padding: 7px 10px;
    margin-bottom: 13px;
    border-radius: 999px;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.20);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
}

.vs-intro-panel strong {
    font-size: clamp(2rem,3vw,3.15rem);
    line-height: 1.03;
    letter-spacing: -.04em;
}

.vs-panel-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}

.vs-panel-pills span {
    padding: 8px 11px;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    color: #f8f5ff;
    font-size: 13px;
    font-weight: 800;
}

/* Category section */
.vs-category-section {
    position: relative;
    overflow: hidden;
    padding: 76px 7% 94px;
    background:
        radial-gradient(circle at 3% 20%, rgba(87,133,255,.13), transparent 25%),
        radial-gradient(circle at 97% 68%, rgba(119,72,230,.13), transparent 28%),
        linear-gradient(180deg,#f8f6ff 0%,#f1edff 100%);
}

.vs-category-heading {
    max-width: 1200px;
    margin: 0 auto 30px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 34px;
}

.vs-category-heading h2 {
    margin: 7px 0 0;
    color: var(--vs-ink);
    font-size: clamp(2.7rem,4.3vw,4.2rem);
    line-height: 1;
    letter-spacing: -.045em;
}

.vs-category-heading > p {
    max-width: 520px;
    margin: 0;
    color: #514a60;
    font-size: 17px;
    line-height: 1.6;
}

.vs-category-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 24px;
}

/* The actual reference-style card */
.vs-category-card {
    --vs-card-image: none;
    --vs-image-position: center;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 370px;
    display: grid;
    grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr);
    border: 1px solid var(--vs-line);
    border-radius: 26px;
    background: rgba(255,255,255,.78);
    color: inherit;
    text-decoration: none;
    box-shadow: 0 22px 55px rgba(52,33,84,.11);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* THIS is the dynamic colour blend from the uploaded photo */
.vs-category-card::before {
    content: "";
    position: absolute;
    inset: -80px;
    z-index: -3;
    background-image: var(--vs-card-image);
    background-size: cover;
    background-position: var(--vs-image-position);
    filter: blur(72px) saturate(1.35) brightness(1.08);
    transform: scale(1.15);
    opacity: 0;
    transition: opacity .35s ease;
}

.vs-category-card.vs-image-loaded::before {
    opacity: .42;
}

/* frosted layer keeps words readable regardless of photo */
.vs-category-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(110deg,rgba(255,255,255,.90),rgba(255,255,255,.66) 48%,rgba(240,235,255,.48));
    pointer-events: none;
}

.vs-category-card:hover {
    transform: translateY(-5px);
    border-color: rgba(93,57,189,.24);
    box-shadow: 0 30px 70px rgba(52,33,84,.16);
}

.vs-card-copy {
    position: relative;
    z-index: 4;
    min-height: 370px;
    padding: 42px 34px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.vs-card-label {
    width: fit-content;
    padding: 6px 9px;
    margin-bottom: 10px;
    border-radius: 999px;
    background: rgba(103,67,230,.10);
    border: 1px solid rgba(103,67,230,.13);
    color: #5230bf;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .11em;
}

.vs-card-copy h3 {
    margin: 0 0 10px;
    color: #171425;
    font-size: clamp(2.15rem,3vw,3.05rem);
    line-height: 1;
    letter-spacing: -.045em;
}

.vs-card-copy p {
    max-width: 320px;
    margin: 0 0 24px;
    color: #4a4556;
    font-size: 17px;
    line-height: 1.55;
    font-weight: 550;
}

.vs-card-button {
    width: fit-content;
    padding: 12px 15px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
    color: white;
    background: linear-gradient(135deg,#5142e8,#7543d8);
    font-size: 14px;
    font-weight: 900;
    box-shadow: 0 10px 22px rgba(83,55,183,.18);
}

.vs-card-media {
    position: relative;
    z-index: 3;
    min-height: 370px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

/* blurred version within the media panel too, so even contain images have no ugly white gaps */
.vs-card-media::before {
    content: "";
    position: absolute;
    inset: -34px;
    background-image: var(--vs-card-image);
    background-size: cover;
    background-position: var(--vs-image-position);
    filter: blur(38px) saturate(1.24);
    transform: scale(1.12);
    opacity: .30;
}

.vs-card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.vs-media-left .vs-card-media::after {
    background: linear-gradient(to right,transparent 55%,rgba(255,255,255,.88) 100%);
}

.vs-media-right .vs-card-media::after {
    background: linear-gradient(to left,transparent 55%,rgba(255,255,255,.88) 100%);
}

.vs-card-image {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    min-height: 370px;
    display: block;
}

.vs-media-left .vs-card-image {
    -webkit-mask-image: linear-gradient(to right,#000 0%,#000 73%,rgba(0,0,0,.60) 88%,transparent 100%);
    mask-image: linear-gradient(to right,#000 0%,#000 73%,rgba(0,0,0,.60) 88%,transparent 100%);
}

.vs-media-right .vs-card-image {
    -webkit-mask-image: linear-gradient(to left,#000 0%,#000 73%,rgba(0,0,0,.60) 88%,transparent 100%);
    mask-image: linear-gradient(to left,#000 0%,#000 73%,rgba(0,0,0,.60) 88%,transparent 100%);
}

.vs-category-card[data-image-fit="contain"] .vs-card-image {
    width: calc(100% - 28px);
    height: calc(100% - 28px);
    min-height: 342px;
    margin: 14px;
    filter: drop-shadow(0 20px 28px rgba(34,23,65,.13));
}

.vs-media-placeholder {
    position: relative;
    z-index: 2;
    width: 72%;
    height: 62%;
    display: grid;
    place-items: center;
    border-radius: 22px;
    border: 1px dashed rgba(100,68,177,.22);
    background:
        radial-gradient(circle at 50% 45%,rgba(104,68,232,.15),transparent 35%),
        rgba(255,255,255,.32);
}

.vs-media-placeholder span {
    color: #6641c7;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .12em;
}

/* alternating side positions exactly like the reference */
.vs-media-left .vs-card-media { grid-column: 1; grid-row: 1; }
.vs-media-left .vs-card-copy  { grid-column: 2; grid-row: 1; }
.vs-media-right .vs-card-copy { grid-column: 1; grid-row: 1; }
.vs-media-right .vs-card-media{ grid-column: 2; grid-row: 1; }

/* trust strip */
.vs-trust-row {
    max-width: 1200px;
    margin: 26px auto 0;
    padding: 20px 24px;
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 16px;
    border: 1px solid rgba(72,48,130,.10);
    border-radius: 22px;
    background: rgba(255,255,255,.72);
    box-shadow: 0 16px 40px rgba(50,32,83,.07);
}

.vs-trust-item {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

.vs-trust-icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #5935cf;
    background: #ede7ff;
    font-weight: 900;
}

.vs-trust-item strong,
.vs-trust-item small {
    display: block;
}

.vs-trust-item strong {
    color: #201a2f;
    font-size: 15px;
}

.vs-trust-item small {
    margin-top: 2px;
    color: #5d566a;
    font-size: 13px;
    line-height: 1.4;
}

/* Align the rest of the page with the new design */
.shop {
    background: #fff !important;
    padding: 86px 7% !important;
}

.section-heading h2 {
    color: #171425 !important;
}

.repair-section {
    background: linear-gradient(135deg,#eee7ff,#faf8ff 55%,#e9f0ff) !important;
}

#repair-form {
    background: rgba(255,255,255,.94) !important;
    border: 1px solid rgba(80,54,135,.15) !important;
    box-shadow: 0 20px 50px rgba(55,36,93,.10) !important;
}

/* Responsive */
@media (max-width: 980px) {
    .vs-intro-inner {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .vs-intro-panel {
        min-height: 260px;
    }

    .vs-category-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .navbar {
        min-height: 74px !important;
        padding: 0 5% !important;
    }

    .vs-intro {
        padding: 58px 5% 42px;
    }

    .vs-intro-copy h1 {
        font-size: clamp(2.8rem,12vw,4.3rem);
    }

    .vs-intro-copy > p {
        font-size: 17px;
    }

    .vs-category-section {
        padding: 62px 5% 76px;
    }

    .vs-category-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 13px;
    }

    .vs-category-card {
        grid-template-columns: 1fr;
        grid-template-rows: 280px auto;
        min-height: 0;
    }

    .vs-media-left .vs-card-media,
    .vs-media-right .vs-card-media {
        grid-column: 1;
        grid-row: 1;
        min-height: 280px;
    }

    .vs-media-left .vs-card-copy,
    .vs-media-right .vs-card-copy {
        grid-column: 1;
        grid-row: 2;
        min-height: 0;
        padding: 25px 23px 28px;
        background: rgba(255,255,255,.80);
    }

    .vs-card-image {
        min-height: 280px;
        -webkit-mask-image: linear-gradient(to bottom,#000 0%,#000 72%,rgba(0,0,0,.58) 88%,transparent 100%) !important;
        mask-image: linear-gradient(to bottom,#000 0%,#000 72%,rgba(0,0,0,.58) 88%,transparent 100%) !important;
    }

    .vs-card-media::after {
        background: linear-gradient(to bottom,transparent 56%,rgba(255,255,255,.90) 100%) !important;
    }

    .vs-card-copy h3 {
        font-size: 2.15rem;
    }

    .vs-card-copy p {
        font-size: 16px;
    }

    .vs-trust-row {
        grid-template-columns: 1fr;
    }
}



/* ==================================================
   VERSITECH UNIFIED PANEL SYSTEM — 2026
   White / lavender / deep violet across cart, checkout,
   forms, admin login and utility panels.
================================================== */
:root{
  --panel-bg:#FFFFFF;
  --panel-soft:#F7F3FF;
  --panel-soft-2:#EEE7FF;
  --panel-purple:#6B3FE8;
  --panel-purple-dark:#43218D;
  --panel-ink:#181426;
  --panel-body:#4B4458;
  --panel-muted:#6A6278;
  --panel-border:#DED4F0;
  --panel-shadow:0 24px 64px rgba(67,33,141,.14);
}

/* Cart drawer */
.cart-overlay{background:rgba(38,24,66,.34)!important;backdrop-filter:blur(5px)!important;-webkit-backdrop-filter:blur(5px)!important}
.cart-drawer{
  background:linear-gradient(180deg,#FFFFFF 0%,#FBF9FF 100%)!important;
  color:var(--panel-ink)!important;
  border-left:1px solid var(--panel-border)!important;
  box-shadow:-28px 0 70px rgba(41,24,74,.18)!important;
}
.cart-drawer-header{border-bottom:1px solid var(--panel-border)!important;background:rgba(255,255,255,.94)!important}
.cart-drawer-header h2,.cart-item-name,.cart-total-row strong{color:var(--panel-ink)!important}
.icon-button,.quantity-button{
  background:var(--panel-soft)!important;color:var(--panel-ink)!important;border:1px solid var(--panel-border)!important
}
.icon-button:hover,.quantity-button:hover{background:var(--panel-soft-2)!important;border-color:#A98CF3!important}
.cart-items{background:transparent!important}
.cart-empty{color:var(--panel-muted)!important;border-color:#CABCE8!important;background:var(--panel-soft)!important}
.cart-item{border-bottom:1px solid #E7E0F2!important}
.cart-item-image{background:var(--panel-soft)!important;color:var(--panel-muted)!important;border:1px solid #E5DDF2!important}
.cart-item-price{color:var(--panel-purple)!important;font-weight:850!important}
.cart-summary{background:#F8F5FF!important;border-top:1px solid var(--panel-border)!important}
.cart-note{color:var(--panel-muted)!important;font-size:14px!important}
.cart-checkout-button{background:linear-gradient(135deg,#5C31D7,#7B50ED)!important;color:#fff!important;min-height:54px!important;font-size:16px!important;font-weight:900!important;border-radius:12px!important}

/* Checkout overlay and card */
.checkout-modal{
  background:rgba(39,24,68,.34)!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
}
.checkout-card{
  background:linear-gradient(180deg,#FFFFFF 0%,#FBF9FF 100%)!important;
  color:var(--panel-ink)!important;
  border:1px solid var(--panel-border)!important;
  border-radius:26px!important;
  box-shadow:0 34px 90px rgba(48,29,83,.22)!important;
  padding:34px!important;
}
.checkout-header{padding-bottom:20px!important;margin-bottom:26px!important;border-bottom:1px solid #E8E1F2!important}
.checkout-header h2{color:var(--panel-ink)!important;font-size:34px!important;line-height:1.05!important}
.checkout-header .small-title,.checkout-card .small-title{color:var(--panel-purple)!important;font-size:13px!important;font-weight:900!important;letter-spacing:.12em!important}
.checkout-card .form-group label{color:#2A203A!important;font-size:16px!important;font-weight:850!important}
.checkout-card .form-group input,
.checkout-card .form-group select,
.checkout-card .form-group textarea{
  background:#FFFFFF!important;
  color:var(--panel-ink)!important;
  border:2px solid #D8CDEB!important;
  border-radius:12px!important;
  min-height:56px!important;
  padding:14px 15px!important;
  font-size:16px!important;
  box-shadow:none!important;
}
.checkout-card .form-group input::placeholder,.checkout-card .form-group textarea::placeholder{color:#756D82!important;opacity:1!important}
.checkout-card .form-group input:focus,.checkout-card .form-group select:focus,.checkout-card .form-group textarea:focus{border-color:#7B4CEC!important;box-shadow:0 0 0 4px rgba(107,63,232,.10)!important}
.checkout-card .form-group small{color:var(--panel-muted)!important;font-size:13px!important}
.checkout-card .form-group select option{background:#fff!important;color:var(--panel-ink)!important}

.fulfillment-options{gap:14px!important}
.fulfillment-card{
  background:#F8F5FF!important;
  border:2px solid #DDD2EF!important;
  color:var(--panel-ink)!important;
  border-radius:14px!important;
  padding:18px!important;
}
.fulfillment-card:hover{border-color:#9C7BEF!important;background:#F2ECFF!important}
.fulfillment-card:has(input:checked){border-color:var(--panel-purple)!important;background:#EEE7FF!important;box-shadow:0 0 0 4px rgba(107,63,232,.08)!important}
.fulfillment-card strong{color:#241A36!important;font-size:16px!important}
.fulfillment-card small{color:#62596F!important;font-size:14px!important}

.checkout-details{
  background:#F8F5FF!important;
  border:1px solid #DCD1EE!important;
  color:var(--panel-ink)!important;
  border-radius:16px!important;
  padding:22px!important;
}
.checkout-details h3{color:#241A36!important;font-size:20px!important}
.checkout-details>p{color:#5A5268!important;font-size:15px!important}
.location-box{background:#FFFFFF!important;border:1px dashed #BAA6DE!important;color:var(--panel-ink)!important;border-radius:14px!important}
.location-box p,.privacy-note,.location-message{color:#675E74!important}
.checkout-order-summary{
  background:linear-gradient(135deg,#F1EAFF,#FAF8FF)!important;
  color:var(--panel-ink)!important;
  border:1px solid #D8CAEF!important;
  border-radius:15px!important;
  font-size:20px!important;
}
.checkout-order-summary strong{color:var(--panel-purple-dark)!important}
.place-order-button{background:linear-gradient(135deg,#5C31D7,#7B50ED)!important;color:#fff!important;min-height:58px!important;border-radius:12px!important;font-size:17px!important;font-weight:900!important}
.order-success{color:var(--panel-ink)!important}
.order-success h2,.order-success h3{color:var(--panel-ink)!important}
.order-success p{color:var(--panel-body)!important}
.order-success-icon{background:#EDE6FF!important;color:var(--panel-purple)!important;border:1px solid #D6C8EE!important}

/* Admin login page */
.admin-login{
  background:radial-gradient(circle at 18% 12%,rgba(123,80,237,.18),transparent 28%),radial-gradient(circle at 86% 82%,rgba(86,145,255,.12),transparent 28%),linear-gradient(135deg,#FFFFFF,#F5F0FF)!important;
  color:var(--panel-ink)!important;
}
.admin-login-box{
  background:rgba(255,255,255,.90)!important;
  border:1px solid #DCD0EF!important;
  border-radius:24px!important;
  box-shadow:0 30px 80px rgba(53,31,88,.16)!important;
  backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important;
}
.admin-login-box .logo,.admin-login-box h1{color:var(--panel-ink)!important}
.admin-label{color:var(--panel-purple)!important;font-weight:900!important}
.admin-description{color:var(--panel-body)!important}
.admin-login-box label{color:#2A203A!important;font-size:15px!important;font-weight:850!important}
.admin-login-box input{background:#fff!important;color:var(--panel-ink)!important;border:2px solid #D9CFEB!important;min-height:54px!important;border-radius:12px!important;font-size:16px!important}
.admin-login-box input::placeholder{color:#766E82!important;opacity:1!important}
.admin-login-box input:focus{border-color:#7B4CEC!important;box-shadow:0 0 0 4px rgba(107,63,232,.10)!important}
.admin-login-button{background:linear-gradient(135deg,#5C31D7,#7B50ED)!important;color:#fff!important;border-radius:12px!important;min-height:54px!important;font-size:16px!important;font-weight:900!important}

/* Global form readability for utility forms without damaging the product cards */
.checkout-card p,.cart-drawer p,.admin-login-box p{opacity:1!important}

@media(max-width:600px){
  .checkout-card{padding:22px 16px!important;border-radius:20px!important}
  .checkout-header h2{font-size:28px!important}
  .fulfillment-options{grid-template-columns:1fr!important}
}

/* ==========================================================
   2026-08-23 HOMEPAGE SPACING + READABILITY FIX
   Removes oversized dead space and keeps the storefront tight.
========================================================== */
.vs-intro {
    padding-top: 54px !important;
    padding-bottom: 54px !important;
    min-height: auto !important;
}
.vs-intro-inner {
    min-height: 0 !important;
    align-items: stretch !important;
}
.vs-intro-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 18px 0 !important;
}
.vs-intro-panel {
    min-height: 310px !important;
    height: auto !important;
    align-self: stretch !important;
}
.vs-category-section {
    padding-top: 56px !important;
    padding-bottom: 76px !important;
    min-height: 0 !important;
}
.vs-category-heading {
    margin-top: 0 !important;
    margin-bottom: 28px !important;
    min-height: 0 !important;
}
.vs-category-heading > p {
    color: #373142 !important;
    font-weight: 600 !important;
    opacity: 1 !important;
}
.vs-category-grid {
    margin-top: 0 !important;
}
.vs-card-copy p,
.vs-trust-item small,
.vs-intro-copy > p {
    opacity: 1 !important;
}

@media (max-width: 980px) {
    .vs-intro { padding: 44px 5% !important; }
    .vs-intro-inner { gap: 26px !important; }
    .vs-intro-panel { min-height: 250px !important; }
    .vs-category-section { padding: 46px 5% 64px !important; }
}


/* ==========================================================
   VERSITECH CATEGORY ROUTING + RESPONSIVE HOME NAV — 2026
========================================================== */
.logo{ text-decoration:none; }
.vs-home-menu{display:none;width:44px;height:44px;border-radius:12px;border:1px solid #ded4ed;background:#fff;color:#241a36;font-size:22px;cursor:pointer}
.vs-repair-cta{padding:64px 7%;background:linear-gradient(180deg,#fff,#f7f3ff)}
.vs-repair-cta-inner{max-width:1200px;margin:auto;padding:34px;display:flex;align-items:center;justify-content:space-between;gap:30px;border:1px solid #ddd3ec;border-radius:24px;background:#fff;box-shadow:0 18px 45px rgba(52,33,84,.08)}
.vs-repair-cta h2{margin:8px 0 10px;color:#171425;font-size:clamp(2.25rem,4vw,3.7rem);line-height:1;letter-spacing:-.045em}
.vs-repair-cta p{max-width:760px;margin:0;color:#50495f;font-size:17px;line-height:1.6}
@media(max-width:880px){
  .vs-home-navbar{display:grid!important;grid-template-columns:auto 1fr auto!important;gap:10px!important}
  .vs-home-menu{display:grid;place-items:center;justify-self:end}
  .vs-home-navbar nav{position:absolute;left:5%;right:5%;top:72px;display:none!important;flex-direction:column!important;gap:0!important;padding:10px;background:#fff;border:1px solid #ded4ed;border-radius:15px;box-shadow:0 20px 45px rgba(47,29,75,.16);z-index:1200}
  .vs-home-navbar nav.vs-open{display:flex!important}
  .vs-home-navbar nav a{padding:13px 14px;border-radius:9px}
  .vs-home-navbar nav a:hover{background:#f5f1ff}
  .vs-home-navbar .cart-button{justify-self:end}
  .vs-repair-cta{padding:52px 5%}
  .vs-repair-cta-inner{align-items:flex-start;flex-direction:column;padding:26px}
}
@media(max-width:520px){
  .vs-home-navbar{padding:0 4%!important}
  .vs-home-navbar .logo{font-size:17px!important;letter-spacing:.14em!important}
  .vs-home-menu{width:42px;height:42px}
  .vs-home-navbar .cart-button{min-height:42px!important;padding:0 12px!important;font-size:13px!important}
  .vs-repair-cta-inner .vs-btn{width:100%}
}


/* Homepage hero image controlled by Admin > Site Images > Hero Image */
.vs-intro-hero-image{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
.vs-intro-panel.vs-has-hero-image::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(27,13,69,.12) 0%,rgba(36,16,82,.36) 48%,rgba(31,13,71,.82) 100%);pointer-events:none}
.vs-intro-panel .vs-panel-label,.vs-intro-panel strong,.vs-intro-panel .vs-panel-pills{position:relative;z-index:2}
.vs-intro-panel.vs-has-hero-image::after{z-index:2}

/* ==========================================================
   VERSITECH VISIBILITY + TRUE IMAGE BLEND — 2026-08-24 B
   Keeps homepage cards visually identical to Admin previews,
   with a longer photo-to-card transition and stronger copy.
========================================================== */

/* More readable supporting copy throughout the storefront */
.vs-intro-copy > p{
  color:#302A3B !important;
  font-size:21px !important;
  line-height:1.62 !important;
  font-weight:620 !important;
  letter-spacing:-.005em;
}
.vs-eyebrow{
  color:#5633C6 !important;
  font-size:14px !important;
  font-weight:950 !important;
}
.vs-card-label{
  color:#4F2BB9 !important;
  font-size:12px !important;
  font-weight:950 !important;
}
.vs-card-copy p{
  max-width:350px !important;
  color:#332D3E !important;
  font-size:19px !important;
  line-height:1.58 !important;
  font-weight:630 !important;
}
.vs-card-button{
  font-size:15px !important;
  min-height:48px;
  padding:0 17px !important;
}
.vs-trust-item strong{font-size:16px !important;color:#201829 !important}
.vs-trust-item small{font-size:15px !important;color:#494253 !important;line-height:1.48 !important;font-weight:560 !important}
.vs-repair-cta p{font-size:19px !important;color:#3E374A !important;font-weight:580 !important}

/* Let the uploaded photograph colour travel farther into the whole card */
.vs-category-card::before{
  inset:-100px !important;
  filter:blur(82px) saturate(1.42) brightness(1.06) !important;
  transform:scale(1.20) !important;
}
.vs-category-card.vs-image-loaded::before{opacity:.52 !important}
.vs-category-card::after{
  background:linear-gradient(110deg,rgba(255,255,255,.84),rgba(255,255,255,.55) 48%,rgba(243,239,255,.42)) !important;
}
.vs-card-media::before{
  inset:-58px !important;
  filter:blur(54px) saturate(1.38) brightness(1.04) !important;
  transform:scale(1.18) !important;
  opacity:.54 !important;
}

/* Long, soft blend instead of a visible rectangular photo edge */
.vs-media-left .vs-card-media::after{
  background:linear-gradient(to right,transparent 28%,rgba(255,255,255,.10) 43%,rgba(255,255,255,.58) 73%,rgba(255,255,255,.94) 100%) !important;
}
.vs-media-right .vs-card-media::after{
  background:linear-gradient(to left,transparent 28%,rgba(255,255,255,.10) 43%,rgba(255,255,255,.58) 73%,rgba(255,255,255,.94) 100%) !important;
}
.vs-media-left .vs-card-image{
  -webkit-mask-image:linear-gradient(to right,#000 0%,#000 52%,rgba(0,0,0,.93) 61%,rgba(0,0,0,.62) 76%,rgba(0,0,0,.22) 91%,transparent 100%) !important;
  mask-image:linear-gradient(to right,#000 0%,#000 52%,rgba(0,0,0,.93) 61%,rgba(0,0,0,.62) 76%,rgba(0,0,0,.22) 91%,transparent 100%) !important;
}
.vs-media-right .vs-card-image{
  -webkit-mask-image:linear-gradient(to left,#000 0%,#000 52%,rgba(0,0,0,.93) 61%,rgba(0,0,0,.62) 76%,rgba(0,0,0,.22) 91%,transparent 100%) !important;
  mask-image:linear-gradient(to left,#000 0%,#000 52%,rgba(0,0,0,.93) 61%,rgba(0,0,0,.62) 76%,rgba(0,0,0,.22) 91%,transparent 100%) !important;
}

/* Contain still shows the full item, but the duplicate blurred layer fills its surroundings */
.vs-category-card[data-image-fit="contain"] .vs-card-image{
  width:calc(100% - 18px) !important;
  height:calc(100% - 18px) !important;
  min-height:352px !important;
  margin:9px !important;
}

@media(max-width:720px){
  .vs-intro-copy > p{font-size:18px !important;line-height:1.6 !important}
  .vs-card-copy p{font-size:17px !important;line-height:1.55 !important}
  .vs-card-label{font-size:11px !important}
  .vs-trust-item small{font-size:14px !important}
  .vs-media-left .vs-card-image,.vs-media-right .vs-card-image{
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 52%,rgba(0,0,0,.93) 61%,rgba(0,0,0,.60) 78%,rgba(0,0,0,.18) 92%,transparent 100%) !important;
    mask-image:linear-gradient(to bottom,#000 0%,#000 52%,rgba(0,0,0,.93) 61%,rgba(0,0,0,.60) 78%,rgba(0,0,0,.18) 92%,transparent 100%) !important;
  }
  .vs-card-media::after{
    background:linear-gradient(to bottom,transparent 30%,rgba(255,255,255,.10) 46%,rgba(255,255,255,.62) 76%,rgba(255,255,255,.96) 100%) !important;
  }
}

/* ACCESSORIES TITLE SIZE ONLY */
.vs-category-card[data-site-image="accessories_category"] .vs-card-copy h3 {
    font-size: clamp(1.85rem, 2.45vw, 2.55rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.035em !important;
    white-space: nowrap;
}
@media (max-width: 720px) {
    .vs-category-card[data-site-image="accessories_category"] .vs-card-copy h3 {
        font-size: 1.95rem !important;
        white-space: normal;
    }
}

body.catalog-page .repair-services,body.catalog-page .repair-booking{width:min(1440px,94%);margin-left:auto;margin-right:auto}.repair-service-grid{align-items:stretch}.repair-service-card{height:100%;box-sizing:border-box}.repair-form-card,.repair-booking-copy{box-sizing:border-box}