/* ==========================================================================
   OVIJAAT PREMIUM UI SYSTEM
   Canonical shared design layer for storefront + admin.
   Palette derived from Ovijaat logo: red / black / white.
   ========================================================================== */

:root {
    --ovj-red: #e30613;
    --ovj-red-600: #c8000c;
    --ovj-red-700: #a9000a;
    --ovj-red-soft: #fff1f2;
    --ovj-black: #0a0a0b;
    --ovj-ink: #171717;
    --ovj-charcoal: #242424;
    --ovj-muted: #6f7177;
    --ovj-line: #e8e8eb;
    --ovj-soft: #f6f7f8;
    --ovj-white: #ffffff;
    --ovj-success: #138a51;
    --ovj-warning: #b97000;
    --ovj-danger: #c1121f;

    --ovj-radius-xs: 8px;
    --ovj-radius-sm: 12px;
    --ovj-radius-md: 16px;
    --ovj-radius-lg: 22px;
    --ovj-radius-xl: 30px;

    --ovj-shadow-sm: 0 4px 18px rgba(10,10,11,.06);
    --ovj-shadow-md: 0 12px 35px rgba(10,10,11,.09);
    --ovj-shadow-lg: 0 24px 70px rgba(10,10,11,.14);

    --cp-primary: var(--ovj-red) !important;
    --cp-primary-dark: var(--ovj-red-700) !important;
    --cp-accent: var(--ovj-red) !important;
    --cp-text: var(--ovj-ink) !important;
    --cp-muted: var(--ovj-muted) !important;
    --cp-border: var(--ovj-line) !important;
}

html {
    background: var(--ovj-white);
    scroll-behavior: smooth;
}

body {
    color: var(--ovj-ink) !important;
    background: var(--ovj-white) !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: inherit;
}

::selection {
    color: var(--ovj-white);
    background: var(--ovj-red);
}

/* ---------- Global surfaces ---------- */

.cp-container,
.container,
.cpsc-container {
    width: min(100% - 32px, 1380px) !important;
    margin-inline: auto !important;
}

.cp-card,
.cpv4-panel,
.pav-card,
.cpsc-card,
.cp-panel,
[class*="dashboard-card"],
[class*="stat-card"] {
    background: var(--ovj-white) !important;
    border: 1px solid var(--ovj-line) !important;
    border-radius: var(--ovj-radius-md) !important;
    box-shadow: var(--ovj-shadow-sm) !important;
}

.cp-card:hover,
.cpsc-card:hover,
[class*="product-card"]:hover {
    border-color: rgba(227,6,19,.28) !important;
    box-shadow: var(--ovj-shadow-md) !important;
}

/* ---------- Buttons ---------- */

button,
.cp-btn,
.cpvc-btn,
.cpsc-btn,
.pav-btn,
.btn,
[class*="button"] {
    font-family: inherit;
}

.cp-btn,
.cpvc-btn,
.cpsc-btn,
.pav-btn,
.btn-primary,
button[type="submit"]:not(.link):not(.icon-only) {
    border-radius: 12px !important;
    font-weight: 700 !important;
    letter-spacing: -.01em;
}

.cp-btn.primary,
.cp-btn--primary,
.cpvc-btn:not(.secondary),
.cpsc-btn:not(.secondary),
.btn-primary,
button[type="submit"]:not(.secondary):not(.link):not(.icon-only) {
    color: #fff !important;
    background: var(--ovj-red) !important;
    border-color: var(--ovj-red) !important;
    box-shadow: 0 8px 20px rgba(227,6,19,.18) !important;
}

.cp-btn.primary:hover,
.cp-btn--primary:hover,
.cpvc-btn:not(.secondary):hover,
.cpsc-btn:not(.secondary):hover,
.btn-primary:hover,
button[type="submit"]:not(.secondary):not(.link):not(.icon-only):hover {
    background: var(--ovj-black) !important;
    border-color: var(--ovj-black) !important;
    transform: translateY(-1px);
}

.cp-btn.secondary,
.cpvc-btn.secondary,
.cpsc-btn.secondary,
.btn-secondary {
    color: var(--ovj-ink) !important;
    background: #fff !important;
    border: 1px solid var(--ovj-line) !important;
}

/* ---------- Inputs ---------- */

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
.cp-input,
.cp-select {
    min-height: 44px;
    color: var(--ovj-ink) !important;
    background: #fff !important;
    border: 1px solid #d9dade !important;
    border-radius: 11px !important;
    outline: none !important;
    transition: border-color .18s ease, box-shadow .18s ease;
}

textarea {
    min-height: 110px;
}

input:focus,
select:focus,
textarea:focus,
.cp-input:focus,
.cp-select:focus {
    border-color: var(--ovj-red) !important;
    box-shadow: 0 0 0 3px rgba(227,6,19,.09) !important;
}

/* ==========================================================================
   STOREFRONT
   ========================================================================== */

.cp11-topbar,
[class*="topbar"] {
    color: #fff !important;
    background: var(--ovj-black) !important;
    border: 0 !important;
}

.cp11-header,
header.cp11-header,
[class*="site-header"] {
    background: rgba(255,255,255,.97) !important;
    border-bottom: 1px solid var(--ovj-line) !important;
    box-shadow: 0 4px 20px rgba(10,10,11,.045) !important;
    backdrop-filter: blur(14px);
}

.cp11-header img,
.cp11-logo img,
header img[alt*="logo" i] {
    max-height: 58px !important;
    width: auto !important;
    object-fit: contain !important;
}

.cp11-search,
[class*="search-box"] {
    background: var(--ovj-soft) !important;
    border: 1px solid var(--ovj-line) !important;
    border-radius: 14px !important;
}

.cp11-search input {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.cp11-search button,
[class*="search"] button[type="submit"] {
    color: #fff !important;
    background: var(--ovj-red) !important;
    border-color: var(--ovj-red) !important;
    border-radius: 10px !important;
}

.cp11-header ~ nav,
[class*="cp11"][class*="nav"],
[class*="cp11"][class*="menu"],
[class*="category-bar"],
[class*="department-bar"] {
    color: var(--ovj-white) !important;
    background: var(--ovj-black) !important;
    border-color: #252525 !important;
}

[class*="all-categor"],
[class*="category-trigger"],
[class*="depart"] {
    color: #fff !important;
    background: var(--ovj-red) !important;
    border-color: var(--ovj-red) !important;
}

.cp11-category-strip a,
.cpsc-category-strip a {
    border-radius: 999px !important;
}

.cp11-category-strip a.is-active,
.cpsc-category-strip a.is-active,
.cp11-category-strip a:hover,
.cpsc-category-strip a:hover {
    color: #fff !important;
    background: var(--ovj-black) !important;
    border-color: var(--ovj-black) !important;
}

.cp11-category-strip i,
.cpsc-category-strip i {
    color: var(--ovj-red);
    margin-right: 7px;
}

/* hero */
.cp11-hero-card,
.cp-hero-slide,
[class*="hero-card"] {
    overflow: hidden;
    border-radius: var(--ovj-radius-xl) !important;
    border: 1px solid var(--ovj-line) !important;
    box-shadow: var(--ovj-shadow-md) !important;
}

.cp11-eyebrow,
.cp-eyebrow,
[class*="kicker"] {
    color: var(--ovj-red) !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.cp11-hero-copy h1,
.cp-page-hero h1,
.cp-personal-hero h1,
.cpsc-title,
h1 {
    color: var(--ovj-black);
    letter-spacing: -.035em;
}

.cp11-hero-badge {
    color: #fff !important;
    background: var(--ovj-red) !important;
    border: 0 !important;
}

.cp11-hero-dots span.is-active,
.cp11-hero-dots span:first-child {
    background: var(--ovj-red) !important;
}

/* products */
.cp11-product-card,
.cpsc-card,
[class*="product-card"] {
    overflow: hidden;
    background: #fff !important;
    border: 1px solid var(--ovj-line) !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.cp11-product-card:hover,
.cpsc-card:hover,
[class*="product-card"]:hover {
    transform: translateY(-3px);
    box-shadow: var(--ovj-shadow-md) !important;
}

.cp11-product-card__brand,
.cpsc-card__brand,
.cp-pdp-brand {
    color: var(--ovj-red) !important;
    font-weight: 800 !important;
}

[class*="product-card"] img,
.cpsc-card img {
    background: #f8f8f9;
}

[class*="sale-badge"],
[class*="discount-badge"],
.cp11-product-card__badge {
    color: #fff !important;
    background: var(--ovj-red) !important;
}

[class*="price"] strong,
.cp-pdp-price strong {
    color: var(--ovj-black) !important;
}

.cp-pdp-shell,
.cp-pdp-card,
.cp-pdp-gallery,
.cp-pdp-summary {
    border-color: var(--ovj-line) !important;
    border-radius: var(--ovj-radius-lg) !important;
}

.cp-pdp-value-choice input:checked + span,
.cp-pdp-color-choice input:checked + span {
    border-color: var(--ovj-red) !important;
    box-shadow: 0 0 0 2px rgba(227,6,19,.12) !important;
}

/* shop/sidebar */
.cpsc-sidebar,
.cp-filter-card {
    background: #fff !important;
    border: 1px solid var(--ovj-line) !important;
    border-radius: 16px !important;
    box-shadow: var(--ovj-shadow-sm) !important;
}

.cpsc-filter-group > label,
.cp-filter-card > label {
    color: var(--ovj-black) !important;
    font-weight: 750 !important;
}

/* cart/checkout/account */
.cp11-cart-drawer__head,
[class*="cart-drawer"][class*="head"] {
    color: #fff !important;
    background: var(--ovj-black) !important;
}

.cp11-cart-drawer__head::after {
    background: var(--ovj-red) !important;
}

[class*="checkout"] .cp-card,
[class*="account"] .cp-card,
[class*="dashboard"] .cp-card {
    border-color: var(--ovj-line) !important;
}

/* Footer */
footer,
.cp11-footer,
[class*="site-footer"] {
    color: #d5d5d7 !important;
    background: var(--ovj-black) !important;
    border-top: 3px solid var(--ovj-red) !important;
}

footer h1,
footer h2,
footer h3,
footer h4,
footer strong {
    color: #fff !important;
}

footer a {
    color: #c5c5c8 !important;
}

footer a:hover {
    color: #fff !important;
}

footer img {
    max-height: 72px !important;
    width: auto !important;
}

/* mobile bottom nav */
.cp11-mobile-bottom {
    background: rgba(255,255,255,.97) !important;
    border-top: 1px solid var(--ovj-line) !important;
    backdrop-filter: blur(16px);
}

.cp11-mobile-bottom a.is-active,
.cp11-mobile-bottom button.is-active {
    color: var(--ovj-red) !important;
}

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

body:has(.sidebar),
body:has(.admin-shell),
body:has([class*="admin-"]) {
    background: #f4f4f5 !important;
}

.sidebar,
aside.sidebar,
[class*="admin-sidebar"] {
    color: #e8e8ea !important;
    background:
        radial-gradient(circle at 15% 0%, rgba(227,6,19,.18), transparent 30%),
        var(--ovj-black) !important;
    border-right: 1px solid #27272a !important;
}

.sidebar a,
[class*="admin-sidebar"] a {
    color: #c9c9cc !important;
    border-radius: 10px !important;
}

.sidebar a:hover,
.sidebar a.active,
.sidebar .active > a,
[class*="admin-sidebar"] a:hover,
[class*="admin-sidebar"] a.active {
    color: #fff !important;
    background: rgba(227,6,19,.14) !important;
}

.sidebar a.active::before,
[class*="admin-sidebar"] a.active::before {
    background: var(--ovj-red) !important;
}

.sidebar h3,
.sidebar [class*="section-title"] {
    color: #77777d !important;
    letter-spacing: .09em !important;
    text-transform: uppercase;
}

.topbar,
.admin-topbar,
[class*="admin-header"] {
    background: rgba(255,255,255,.96) !important;
    border-bottom: 1px solid var(--ovj-line) !important;
    box-shadow: 0 2px 15px rgba(0,0,0,.035) !important;
    backdrop-filter: blur(14px);
}

main,
.admin-main,
[class*="admin-content"] {
    color: var(--ovj-ink);
}

.cp-panel-title,
.admin-page-title,
[class*="page-title"] {
    color: var(--ovj-black) !important;
    letter-spacing: -.025em;
}

table {
    overflow: hidden;
    background: #fff;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid var(--ovj-line) !important;
    border-radius: 14px !important;
}

thead th {
    color: #52525b !important;
    background: #f6f6f7 !important;
    border-bottom: 1px solid var(--ovj-line) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: .04em;
}

tbody td {
    border-bottom: 1px solid #efeff1 !important;
}

tbody tr:hover td {
    background: #fff8f8 !important;
}

.badge,
.cp-badge,
[class*="status"] {
    border-radius: 999px;
}

.cp-card .cp-panel-title::before,
[class*="section-title"]::before {
    background: var(--ovj-red) !important;
}

/* login/auth */
.auth-shell,
.login-shell,
[class*="login-card"] {
    border-radius: var(--ovj-radius-lg) !important;
    box-shadow: var(--ovj-shadow-lg) !important;
}

.brand-panel,
.login-brand,
[class*="auth-brand"] {
    color: #fff !important;
    background:
        radial-gradient(circle at 30% 20%, rgba(227,6,19,.35), transparent 38%),
        var(--ovj-black) !important;
}

/* Focus accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(227,6,19,.22) !important;
    outline-offset: 2px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 991px) {
    .cp-container,
    .container,
    .cpsc-container {
        width: min(100% - 22px, 1380px) !important;
    }

    .cp11-header {
        background: #fff !important;
    }

    .cp11-header img,
    .cp11-logo img {
        max-height: 46px !important;
    }

    .cp11-hero-card,
    .cp-hero-slide {
        border-radius: 18px !important;
    }
}

@media (max-width: 640px) {
    .cp-card,
    .cpsc-card,
    .pav-card,
    .cp-panel {
        border-radius: 13px !important;
    }

    h1 {
        letter-spacing: -.03em;
    }
}