/** Mercantile skin: the visual layer shared by Joomla content and EasyCommerce SPA chrome. */
html {
    overflow-x: clip;
    background: var(--ec-bg);
}
body {
    overflow-x: clip;
    background: var(--ec-bg);
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: 1rem;
    line-height: 1.6;
    letter-spacing: -0.012em;
}

::selection { background: var(--ec-pop); color: #171713; }
a { color: inherit; }
h1, h2, h3, h4, h5, h6 {
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-weight: 400;
    letter-spacing: var(--ec-disp-tracking);
}

.ts-container { width: min(calc(100% - (2 * var(--ec-gut))), var(--ec-cw)); }

.ts-topbar {
    min-height: 34px;
    background: #171713;
    color: #fff;
    border: 0;
}
.ts-topbar__inner { min-height: 34px; }
.ts-topbar__text,
.ts-topbar a,
.ts-topbar button {
    color: inherit;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.ts-topbar__text::before {
    display: inline-block;
    width: 0.42rem;
    height: 0.42rem;
    margin-right: 0.6rem;
    background: var(--ec-pop);
    border-radius: 50%;
    content: '';
}

.ts-header {
    background: color-mix(in srgb, var(--ec-bg) 94%, transparent);
    border-bottom: 1px solid var(--ec-border);
    backdrop-filter: blur(18px);
}
.ts-header.is-sticky { box-shadow: none; }
.ts-header__inner { min-height: 88px; gap: clamp(1rem, 3vw, 3rem); }
.ts-brand {
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: clamp(1.25rem, 2vw, 1.55rem);
    font-weight: 800;
    letter-spacing: -0.075em;
    text-transform: lowercase;
}
.ts-brand__text::after { color: var(--ec-accent); content: '.'; }
.ts-header__nav { justify-content: center; }
.ts-header__nav .mod-menu { align-items: center; gap: clamp(1rem, 2.4vw, 2rem); }
.ts-header__nav .mod-menu > li > a,
.ts-header__nav .mod-menu > li > span {
    padding: 0.75rem 0;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.ts-header__nav .mod-menu > li > a::after {
    display: block;
    width: 0;
    height: 1px;
    margin-top: 0.35rem;
    background: currentColor;
    content: '';
    transition: width var(--ec-dur-2) var(--ec-ease);
}
.ts-header__nav .mod-menu > li > a:hover::after,
.ts-header__nav .mod-menu > li.active > a::after { width: 100%; }
.ts-header__actions { gap: 0.25rem; }
.ts-action {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    transition: background var(--ec-dur-1), transform var(--ec-dur-1);
}
.ts-action:hover { background: var(--ec-surface-2); transform: translateY(-1px); }
.ts-action[data-ec-cart-open] {
    width: 68px;
    border-radius: 999px;
    background: var(--ec-fg);
    color: var(--ec-bg);
}
.ts-action__badge {
    background: var(--ec-pop);
    color: #171713;
    font-size: 0.58rem;
    font-weight: 800;
}

.ts-shell { padding-block: 0; }
.ts-main { min-width: 0; }
.ts-row { gap: clamp(1rem, 2vw, 2rem); }
.ts-message-container { margin-block: 1rem; }

.ts-btn,
.btn,
button[type='submit'],
input[type='submit'] {
    min-height: 50px;
    padding-inline: 1.35rem;
    border: 1px solid var(--ec-fg);
    border-radius: var(--ec-btn-radius);
    background: var(--ec-fg);
    color: var(--ec-bg);
    font-family: var(--ec-font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: transform var(--ec-dur-1), background var(--ec-dur-1), color var(--ec-dur-1);
}
.ts-btn:hover,
.btn:hover,
button[type='submit']:hover,
input[type='submit']:hover { transform: translateY(-2px); }
.ts-btn--outline { background: transparent; color: var(--ec-fg); }
.ts-btn--ink { background: var(--ec-fg); color: var(--ec-bg); }

input:not([type='checkbox']):not([type='radio']),
select,
textarea,
.form-control,
.form-select {
    min-height: 48px;
    border: 1px solid var(--ec-border);
    border-radius: 4px;
    background: var(--ec-surface);
    color: var(--ec-fg);
}

.card,
.com-users-login__form,
.com-users-registration__form,
.com-users-profile,
.blog-item,
.item-page {
    border-color: var(--ec-border);
    border-radius: var(--ec-radius);
    background: var(--ec-surface);
    box-shadow: none;
}
.page-header h1,
.item-page__title,
.blog__title,
.com-users-login h1,
.com-users-registration h1 {
    font-size: clamp(2.8rem, 6vw, 5.5rem);
    line-height: 0.95;
}

.ts-footer {
    margin-top: clamp(4rem, 9vw, 8rem);
    padding-block: clamp(4rem, 7vw, 6.5rem) 1.5rem;
    background: #171713;
    color: #fff;
    border: 0;
}
.ts-footer h1,
.ts-footer h2,
.ts-footer h3,
.ts-footer h4,
.ts-footer a { color: #fff; }
.ts-footer__cols { gap: clamp(2rem, 5vw, 5rem); }
.ts-footer__col .moduletable > h3,
.ts-footer__col .module-title {
    color: #77756f;
    font-family: var(--ec-font-body);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.ts-footer__copy {
    margin-top: clamp(3rem, 6vw, 5rem);
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255,255,255,0.14);
    color: #8f8c84;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
}

/* EasyCommerce SPA tokens derived from the Mercantile inventory. */
#ec-store-root,
.ec-portal-host {
    --background: 40 33% 95%;
    --foreground: 60 8% 8%;
    --card: 40 100% 99%;
    --card-foreground: 60 8% 8%;
    --popover: 40 100% 99%;
    --popover-foreground: 60 8% 8%;
    --primary: 9 100% 62%;
    --primary-foreground: 60 8% 8%;
    --secondary: 38 27% 89%;
    --secondary-foreground: 60 8% 8%;
    --muted: 38 27% 89%;
    --muted-foreground: 50 4% 36%;
    --accent: 9 100% 62%;
    --accent-foreground: 60 8% 8%;
    --border: 37 16% 81%;
    --input: 37 16% 81%;
    --ring: 9 100% 62%;
    --radius: 0.625rem;
}
:root[data-color-scheme='dark'] #ec-store-root,
:root[data-color-scheme='dark'] .ec-portal-host {
    --background: 60 7% 8%;
    --foreground: 40 43% 96%;
    --card: 50 10% 12%;
    --card-foreground: 40 43% 96%;
    --popover: 50 10% 12%;
    --popover-foreground: 40 43% 96%;
    --primary: 9 100% 68%;
    --primary-foreground: 60 8% 8%;
    --secondary: 48 10% 17%;
    --secondary-foreground: 40 43% 96%;
    --muted: 48 10% 17%;
    --muted-foreground: 40 9% 70%;
    --border: 48 10% 22%;
    --input: 48 10% 22%;
}

@media (max-width: 900px) {
    .ts-header__inner { min-height: 72px; }
    .ts-brand { font-size: 1.2rem; }
    .ts-header__nav {
        background: var(--ec-bg);
        border-top: 1px solid var(--ec-border);
    }
    .ts-header__nav .mod-menu { align-items: stretch; gap: 0; }
    .ts-header__nav .mod-menu > li > a,
    .ts-header__nav .mod-menu > li > span {
        min-height: 52px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid var(--ec-border);
        font-family: var(--ec-font-display);
        font-size: 1.25rem;
    }
}

@media (max-width: 600px) {
    .ts-container { width: min(calc(100% - 1.5rem), var(--ec-cw)); }
    .ts-topbar__side { display: none; }
    .ts-topbar__inner { justify-content: center; }
    .ts-topbar__text { text-align: center; }
    .ts-action:not([data-ec-cart-open]):not(.ts-nav-toggle) { display: none; }
    .ts-action[data-ec-cart-open] { width: 48px; }
    .ts-footer__cols { grid-template-columns: 1fr 1fr; }
}