/* ==========================================================================
   Modern theme layer — visual refresh over the existing template.
   Loaded last: only touches look & feel (color, spacing, radius, motion),
   never structure/markup, so existing JS/plugins keep working untouched.
   Brand color (#0055ff) and font (Rubik) come from templates/default/css/styles.css.
   ========================================================================== */

:root {
    --sc-primary: #0055ff;
    --sc-primary-dark: #0041c7;
    --sc-primary-light: #e8f0ff;
    --sc-text: #2b2f38;
    --sc-text-muted: #6b7280;
    --sc-border: #e5e7eb;
    --sc-surface: #f7f8fa;
    --sc-radius: 10px;
    --sc-radius-sm: 6px;
    --sc-shadow-sm: 0 1px 3px rgba(20, 24, 34, .06), 0 1px 2px rgba(20, 24, 34, .08);
    --sc-shadow-md: 0 8px 24px rgba(20, 24, 34, .10);
    --sc-shadow-lg: 0 16px 40px rgba(20, 24, 34, .14);
    --sc-transition: .2s ease;
}

/* ---------- Base ---------- */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.page-body {
    color: var(--sc-text);
    background-color: #ffffff;
}

::selection {
    background: var(--sc-primary);
    color: #fff;
}

a {
    transition: color var(--sc-transition);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--sc-text);
    font-weight: 600;
    letter-spacing: -.01em;
}

:focus-visible {
    outline: 2px solid var(--sc-primary);
    outline-offset: 2px;
}

img {
    max-width: 100%;
}

/* ---------- Header ---------- */
.site-header {
    background: #ffffff;
    box-shadow: var(--sc-shadow-sm);
}

.site-header .topbar-one {
    border-bottom: 1px solid var(--sc-border);
}

.site-header .site-menu > ul > li > a {
    font-weight: 500;
    transition: color var(--sc-transition);
}

.site-header .site-menu > ul > li > a:hover,
.site-header .site-menu > ul > li.active > a {
    color: var(--sc-primary);
}

.site-header .sub-menu {
    border-radius: var(--sc-radius);
    box-shadow: var(--sc-shadow-lg);
    border: 1px solid var(--sc-border);
    overflow: hidden;
}

/* ---------- Buttons ----------
   Colors/shades are already correct in styles.css (brand blue #0055ff) —
   only touch weight/letter-spacing here, never repaint background/shadow. */
.btn {
    font-weight: 600;
    letter-spacing: .01em;
}

.btn:active {
    transform: translateY(1px);
}

/* ---------- Forms ---------- */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
select,
textarea {
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius-sm);
    background-color: #fff;
    transition: border-color var(--sc-transition), box-shadow var(--sc-transition);
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--sc-primary);
    box-shadow: 0 0 0 3px var(--sc-primary-light);
    outline: none;
}

label {
    color: var(--sc-text);
    font-weight: 500;
}

/* ---------- Cards / products ---------- */
.card,
.product,
.product-inner,
.checkout-box,
.order-box {
    border-radius: var(--sc-radius);
    border: 1px solid var(--sc-border);
    transition: box-shadow var(--sc-transition), transform var(--sc-transition);
}

.product:hover,
.product-inner:hover,
.card:hover {
    box-shadow: var(--sc-shadow-md);
    transform: translateY(-2px);
}

.product-price,
.price {
    color: var(--sc-primary);
    font-weight: 700;
}

/* ---------- Tables ---------- */
table {
    border-radius: var(--sc-radius-sm);
    overflow: hidden;
}

table thead th {
    background-color: var(--sc-surface);
    color: var(--sc-text);
    font-weight: 600;
    border-bottom: 1px solid var(--sc-border);
}

table td, table th {
    border-color: var(--sc-border) !important;
}

/* ---------- Alerts / growl notices ---------- */
.alert {
    border-radius: var(--sc-radius-sm);
    border: 1px solid transparent;
    box-shadow: var(--sc-shadow-sm);
}

.growl-notice, .growl-error, .growl-warning, .growl-info {
    border-radius: var(--sc-radius-sm) !important;
    box-shadow: var(--sc-shadow-md) !important;
}

/* ---------- Pagination / badges ---------- */
.pagination > li > a,
.pagination > li > span {
    border-radius: var(--sc-radius-sm) !important;
    margin: 0 3px;
    border-color: var(--sc-border);
    color: var(--sc-text);
}

.pagination > .active > a {
    background-color: var(--sc-primary) !important;
    border-color: var(--sc-primary) !important;
}

.badge, .product-badge {
    border-radius: 999px;
    font-weight: 600;
}

/* ---------- Modals ---------- */
.modal-content {
    border-radius: var(--sc-radius);
    border: none;
    box-shadow: var(--sc-shadow-lg);
}

/* ---------- Footer bottom-gap fix ----------
   Pre-existing template quirk: html.scrollHeight ends up ~20px taller than
   body's own box (unrelated to margin/padding/floats/fixed elements — verified
   with this stylesheet fully disabled, gap persists), leaving a sliver of the
   page background visible below the footer at max scroll. Rather than the
   footer being wrong, something outside body's own box model accounts for the
   extra height, so the fix bleeds the footer's own background past its box to
   guarantee it always reaches the true bottom, regardless of the cause. */
.site-footer {
    position: relative;
}

.site-footer::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 24px;
    background-color: inherit;
}

/* ---------- Responsive tightening ---------- */
@media (max-width: 767px) {
    .container-full, .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    h1 { font-size: 1.9rem; }
    h2 { font-size: 1.5rem; }
}