@charset "UTF-8";
/* =========================================================================
   Vitalis UI — design system
   Supplements & pharmacy storefront. Loaded AFTER bootstrap/theme/style.
   Part 1/5: tokens, fonts, reset, typography
   ========================================================================= */

/* ------------------------------ fonts ---------------------------------- */
@font-face {
    font-family: 'Yekan';
    src: url('../../fonts/yekan/Yekan.woff2') format('woff2'),
    url('../../fonts/yekan/Yekan.woff') format('woff'),
    url('../../fonts/yekan/Yekan.ttf') format('truetype');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    text-rendering: optimizeLegibility;
}

/* ------------------------------ tokens --------------------------------- */
:root {
    /* brand: powder blue pharmacy */
    --c-brand-50: #f4f8fc;
    --c-brand-100: #d9eaf8;
    --c-brand-200: #c5dcf3;
    --c-brand-300: #8eb8e8;
    --c-brand-400: #6aa4e0;
    --c-brand-500: #3d74b8;
    --c-brand-600: #32639e;
    --c-brand-700: #2a5588;
    --c-brand-800: #1d3e66;
    --c-brand-900: #16304f;

    --c-leaf-100: #f7e3ea;
    --c-leaf-300: #f0c2d0;
    --c-leaf-400: #e7a0b5;
    --c-leaf-500: #d4849e;

    --c-amber-100: #fff3d6;
    --c-amber-400: #f9b42c;
    --c-amber-500: #e8940c;

    --c-rose-100: #ffe6ec;
    --c-rose-500: #e5325c;
    --c-rose-600: #c8234a;

    /* neutrals */
    --c-ink: #1d2c3d;
    --c-ink-2: #314056;
    --c-ink-3: #5c6b7c;
    --c-ink-4: #8b98a8;
    --c-line: #e4edf5;
    --c-line-2: #eef3f8;
    --c-surface: #ffffff;
    --c-surface-2: #f7fafd;
    --c-canvas: #f4f8fc;

    /* semantic */
    --c-success: #2f8f72;
    --c-warning: #e8940c;
    --c-danger: #e5325c;
    --c-info: #2f7fbf;

    /* radii */
    --r-xs: 4px;
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 20px;
    --r-pill: 999px;

    /* shadows: hairline elevation, not a heavy card stack */
    --sh-xs: 0 0 0 1px rgba(29, 44, 61, .04);
    --sh-sm: 0 1px 2px rgba(29, 44, 61, .04);
    --sh-md: 0 8px 24px rgba(29, 44, 61, .06);
    --sh-lg: 0 16px 40px rgba(29, 44, 61, .08);
    --sh-brand: none;

    /* motion */
    --t-fast: .16s cubic-bezier(.4, 0, .2, 1);
    --t-base: .26s cubic-bezier(.4, 0, .2, 1);
    --t-slow: .45s cubic-bezier(.22, 1, .36, 1);

    /* layout */
    --header-h: 64px;
    --bottomnav-h: 58px;

    /* override legacy theme.css font stack so Yekan actually loads */
    --font-family-sans-serif: 'Yekan', 'Vazirmatn', 'IRANSans', Tahoma, system-ui, sans-serif;
}

/* ------------------------------ reset ---------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    direction: rtl;
    text-align: right;
    font-family: var(--font-family-sans-serif);
    font-size: 15px;
    line-height: 1.75;
    color: var(--c-ink-2);
    background-color: var(--c-canvas);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* style.css zeroes all margins; restore a sane vertical rhythm */
p {
    margin-bottom: .9rem;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 .6rem;
    color: var(--c-ink);
    font-weight: 700;
    line-height: 1.4;
}

h1 {
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
}

h2 {
    font-size: clamp(1.3rem, 1rem + 1.1vw, 1.7rem);
}

h3 {
    font-size: clamp(1.1rem, .95rem + .6vw, 1.35rem);
}

h4 {
    font-size: 1.1rem;
}

h5 {
    font-size: 1rem;
}

h6 {
    font-size: .95rem;
}

ul, ol {
    margin-bottom: .9rem;
    padding-right: 1.1rem;
}

ul.list-plain, ol.list-plain {
    list-style: none;
    padding: 0;
    margin: 0;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--c-brand-600);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--t-fast);
}

a:hover, a:focus {
    color: var(--c-brand-700);
    font-weight: 600;
    text-decoration: none;
}

hr {
    border: 0;
    border-top: 1px solid var(--c-line);
    margin: 1.5rem 0;
}

::selection {
    background: var(--c-brand-200);
    color: var(--c-brand-900);
}

/* visible focus for keyboard users only */
:focus-visible {
    outline: 3px solid var(--c-brand-300);
    outline-offset: 2px;
}

/* ---------------------- numbers inside RTL text ------------------------ */
/* Prices/quantities must not be reordered by the bidi algorithm. */
.num, .price__num, .ltr {
    direction: ltr;
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
}

/* ------------------------------ a11y ----------------------------------- */
.sr-only-focusable.skip-link {
    position: fixed;
    top: 8px;
    right: 8px;
    z-index: 2000;
    width: auto;
    height: auto;
    padding: 10px 18px;
    clip: auto;
    background: var(--c-brand-600);
    color: #fff;
    border-radius: var(--r-sm);
    box-shadow: var(--sh-md);
    transform: translateY(-160%);
    transition: transform var(--t-base);
}

.sr-only-focusable.skip-link:focus {
    transform: translateY(0);
    color: #fff;
}

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

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