/* ==========================================================================
   Velento — Home page, built to the Figma frames (Desktop 1440 / Android 412).
   Class prefix vl-. Shared pieces (headings, buttons, product cards, price,
   post cards) are also used by the shop, blog, brands and product pages.
   ========================================================================== */

.vl-main {
    background: var(--vl-page);
    color: var(--vl-text);
    direction: rtl;
    overflow-x: clip;
    font-family: "Estedad", sans-serif;
}
.vl-main *, .vl-main *::before, .vl-main *::after { box-sizing: border-box; }
.vl-main a { color: inherit; text-decoration: none; }
.vl-main img { max-width: 100%; display: block; }
.vl-main ul { list-style: none; margin: 0; padding: 0; }
.vl-main p { margin: 0; }

.vl-wrap { width: min(1280px, calc(100% - 48px)); margin-inline: auto; }
.vl-section { padding: 60px 0; }
.vl-m-only, .vl-card .vl-m-only { display: none; }

/* Official X logo (PNG alpha used as a mask, so it takes the current text colour) */
.vl-x-logo { display: inline-block; flex: none; background: currentColor; -webkit-mask: var(--vl-x) center / contain no-repeat; mask: var(--vl-x) center / contain no-repeat; }

/* ==========================================================================
   Section heading — English script overline, fading downward over the Persian
   title, gold rules on both sides
   ========================================================================== */
.vl-heading {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0 auto;
}
.vl-section > .vl-wrap > .vl-heading { display: flex; width: fit-content; margin-bottom: 50px; }
.vl-heading::before, .vl-heading::after {
    content: "";
    position: absolute;
    top: 58%;
    width: clamp(60px, 13vw, 184px);
    height: 3px;
    border-radius: 3px;
}
.vl-heading::before { right: calc(100% + 26px); background: linear-gradient(270deg, #E7AE1D, rgba(231,174,29,0)); }
.vl-heading::after  { left:  calc(100% + 26px); background: linear-gradient(90deg,  #E7AE1D, rgba(231,174,29,0)); }
.vl-script {
    font-family: var(--vl-script);
    font-style: italic;
    font-size: 46px;
    line-height: 1;
    direction: ltr;
    white-space: nowrap;
    margin-bottom: -21px;
    padding-bottom: 4px;
    pointer-events: none;
    user-select: none;
    background: linear-gradient(180deg, rgba(140,140,140,.78) 0%, rgba(140,140,140,.3) 52%, rgba(140,140,140,0) 90%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.vl-main .vl-title {
    position: relative;
    margin: 0 !important;
    font-size: 28px !important;
    line-height: 1.5 !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    color: var(--vl-text);
}
.vl-title em { font-style: normal; color: #E7AE1D; }
.vl-heading.is-light .vl-title { color: #fff; }
.vl-heading.is-light .vl-script { background: linear-gradient(180deg, rgba(255,255,255,.66) 0%, rgba(255,255,255,.24) 52%, rgba(255,255,255,0) 90%); -webkit-background-clip: text; background-clip: text; }
[data-theme="dark"] .vl-script { background: linear-gradient(180deg, rgba(200,200,200,.5) 0%, rgba(200,200,200,.18) 52%, rgba(200,200,200,0) 90%); -webkit-background-clip: text; background-clip: text; }

/* ==========================================================================
   Buttons — label on the right, arrow circle on the left
   ========================================================================== */
.vl-btn {
    display: inline-flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 14px;
    height: 64px;
    padding: 0 12px 0 28px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    border: 0;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.vl-btn-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%; flex: none;
    transition: transform .25s ease;
}
.vl-btn:hover { transform: translateY(-2px); }
.vl-btn:hover .vl-btn-ico { transform: translateX(-4px); }
.vl-btn--yellow { background: #FFC32D; color: #1F1F1F !important; box-shadow: 0 8px 22px rgba(255,194,45,.3); }
.vl-btn--yellow .vl-btn-ico { background: #343434; color: #FFC32D; }
.vl-btn--dark   { background: #343434; color: #fff !important; }
.vl-btn--dark .vl-btn-ico { background: #232323; color: #fff; }
.vl-btn--white  { background: #fff; color: #1F1F1F !important; }
.vl-btn--white .vl-btn-ico { background: transparent; color: #1F1F1F; width: 24px; height: 24px; }
.vl-btn--gray, .vl-btn--sand { background: #E7E2D3; color: #1F1F1F !important; }
.vl-btn--gray .vl-btn-ico, .vl-btn--sand .vl-btn-ico { background: transparent; color: #1F1F1F; width: 24px; height: 24px; }
.vl-btn--gray { background: #E7E3D8; }
.vl-btn--gray .vl-btn-ico { background: #fff; width: 40px; height: 40px; }

/* ==========================================================================
   Hero — wavy bays cut with clip-path (same outline as the Figma frame),
   watch floating over a golden glow, badges tucked *behind* the watch
   ========================================================================== */
.vl-hero { padding: 56px 0 0; }
.vl-hero-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.vl-hero-wrap { position: relative; }
.vl-hero-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    direction: ltr;               /* media physically left, copy right */
    min-height: 514px;
    background:
        radial-gradient(circle at 25% 50%, #2e2a22 0, rgba(46,42,34,0) 52%),
        linear-gradient(135deg, #262626 0%, #1d1d1d 100%);
    overflow: hidden;
    isolation: isolate;
    clip-path: url(#vlHeroClip);
}
.vl-hero-rays { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; filter: drop-shadow(0 0 7px rgba(255,160,20,.55)); }
.vl-hero-rays path { fill: none; stroke: url(#vlRay); stroke-width: 4; vector-effect: non-scaling-stroke; }
.vl-hero-star { position: absolute; top: 48px; right: 70px; width: 100px; fill: rgba(231,174,29,.22); z-index: 1; animation: vlTwinkle 4.5s ease-in-out infinite; }
.vl-hero-star--s { top: 54px; right: 52px; width: 26px; animation-delay: 1.4s; }
.vl-hero-media { position: relative; z-index: 2; min-height: 420px; }
.vl-hero-glow {
    position: absolute; left: 50%; top: 50%; width: 470px; height: 470px; transform: translate(-50%, -50%);
    border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(255,175,30,.32) 0%, rgba(255,150,20,.12) 42%, rgba(255,150,20,0) 68%);
}
.vl-hero-slide {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden;
    transition: opacity .6s ease, visibility .6s ease;
}
.vl-hero-slide.is-active { opacity: 1; visibility: visible; }
.vl-hero-fig { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; max-width: 78%; }
.vl-hero-img {
    position: relative; z-index: 3;            /* the watch is above the badges */
    display: block; height: 350px; width: auto; max-width: 100%;
    object-fit: contain;
    filter: drop-shadow(0 26px 24px rgba(0,0,0,.55));
}
.vl-hero-shadow {
    position: absolute; z-index: 1; left: 50%; bottom: -18px; width: 66%; height: 28px; transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(0,0,0,.6), rgba(0,0,0,0)); filter: blur(5px);
}
.vl-hero-badge {
    position: absolute; z-index: 1;            /* tucked underneath the watch photo */
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 18px 7px 12px; border-radius: 999px;
    background: #FFC32D; color: #fff;
    font-size: 24px; font-weight: 800; line-height: 1.3;
    outline: 3px solid #FFC32D; outline-offset: 6px;
    box-shadow: 0 0 40px rgba(255,194,45,.55);
    direction: ltr; white-space: nowrap;      /* icon on the left, Latin digits */
}
.vl-hero-badge svg { flex: none; }
/* only the inner end of each badge slips under the watch's edge */
.vl-hero-badge--sale { top: 26%; left: calc(100% - 30px); }
.vl-hero-badge--rate { bottom: 16%; right: calc(100% - 30px); }
.vl-hero-slide.is-active .vl-hero-badge { animation: vlPop .7s .35s cubic-bezier(.2,.9,.3,1.3) both; }
.vl-hero-copy {
    position: relative; z-index: 2; direction: rtl;
    display: flex; flex-direction: column; justify-content: center; gap: 28px;
    padding: 56px 70px 56px 40px;
}
.vl-main .vl-hero-title {
    margin: 0 !important; padding-inline-start: 22px;
    border-inline-start: 7px solid #FFC32D; border-radius: 4px;
    max-width: 10em;
    font-size: clamp(34px, 3.4vw, 46px) !important; line-height: 1.5 !important; font-weight: 800 !important; letter-spacing: 0 !important;
    color: #fff;
}
.vl-main .vl-hero-text { max-width: 31em; font-size: 15px !important; line-height: 1.9 !important; color: #A3A3A3; text-align: right; }
.vl-hero-actions { display: flex; flex-wrap: wrap; gap: 32px; margin-top: 18px; }

/* Dots sit in the white bay at the bottom edge (outside the clipped card) */
.vl-hero-dots { position: absolute; z-index: 4; left: 25.9%; bottom: 5px; transform: translateX(-50%); display: flex; align-items: center; gap: 7px; }
.vl-hero-dot { width: 13px; height: 13px; padding: 0; border: 0; border-radius: 99px; background: #D2D2D2; cursor: pointer; transition: width .3s ease, background .3s ease; }
.vl-hero-dot.is-active { width: 28px; background: #E7AE1D; }

@keyframes vlPop    { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes vlTwinkle { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }

/* ==========================================================================
   Categories
   ========================================================================== */
.vl-cats { padding-top: 118px; }
.vl-main .vl-cat-grid {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px;
    padding-top: 118px; padding-bottom: 28px;
}
.vl-cat {
    position: relative; display: flex; flex-direction: column; align-items: center;
    height: 186px; padding-top: 112px;
    border-radius: 50px; background: #F2F2F2; text-align: center;
    transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.vl-cat-img { position: absolute; top: -112px; left: 50%; width: 80%; height: 170px; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; }
.vl-cat-img::after { content: ""; position: absolute; bottom: -26px; left: 14%; right: 14%; height: 7px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.2), rgba(0,0,0,0)); }
.vl-cat-img img { max-height: 100%; width: auto; object-fit: contain; filter: drop-shadow(0 10px 12px rgba(0,0,0,.2)); transition: transform .35s ease; }
.vl-cat-name { margin-top: 13px; font-size: 18px; font-weight: 800; color: #232323; }
.vl-cat-go {
    position: absolute;
    left: 50%;
    bottom: -24px;
    transform: translateX(-50%);
    box-sizing: border-box;
    display: inline-flex;
    flex-direction: row;
    direction: rtl;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 48px;
    min-width: 48px;
    height: 48px;
    padding: 0 15px;
    border-radius: 999px;
    background: #fff;
    color: #232323;
    box-shadow: 0 10px 22px rgba(0,0,0,.1);
    font-size: 14px;
    line-height: 1;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    transition: width .28s ease, min-width .28s ease, gap .28s ease,
                padding .28s ease, box-shadow .28s ease;
}
/* Default state: centered arrow only. DOM order + RTL keeps the arrow on the left of the label on hover. */
.vl-cat-go > svg {
    display: block;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    opacity: 1;
    transform: translateX(0);
    transition: transform .28s ease;
}
.vl-cat-go-text {
    display: inline-block;
    flex: 0 0 auto;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width .28s ease, opacity .2s ease;
}

[data-theme="dark"] .vl-cat { background: #262626; }
[data-theme="dark"] .vl-cat-name { color: #f2f2f2; }
.vl-cat:hover, .vl-cat:focus-visible { background: #FFC32D; transform: translateY(-3px); box-shadow: 0 18px 34px rgba(255,194,45,.38); }
[data-theme="dark"] .vl-cat:hover .vl-cat-name { color: #232323; }
.vl-cat:hover .vl-cat-img img { transform: scale(1.05); }
.vl-cat:hover .vl-cat-go, .vl-cat:focus-visible .vl-cat-go {
    width: 128px;
    min-width: 128px;
    gap: 10px;
    padding: 0 18px;
    background: #fff;
    color: #232323;
    box-shadow: 0 12px 26px rgba(0,0,0,.13);
}
.vl-cat:hover .vl-cat-go-text, .vl-cat:focus-visible .vl-cat-go-text {
    max-width: 64px;
    opacity: 1;
}

/* ==========================================================================
   Section bars (filters/timer · title · arrows)
   ========================================================================== */
.vl-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; margin-bottom: 50px; }
.vl-bar .vl-heading { margin: 0; }
.vl-bar-start { display: flex; justify-content: flex-start; align-items: center; }
.vl-bar-end   { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
/* Gold heading rules sit at 58% of the heading height, so on desktop (where the rules are visible)
   the brand/category filter and the «مشاهده همه» + arrows are pushed down to share the rules' axis. */
@media (min-width: 1181px) {
    .vl-bar-start, .vl-bar-end { padding-top: 14px; }
}
.vl-pill {
    display: inline-flex; align-items: center; height: 48px; padding: 0 25px;
    border-radius: 999px; background: #FFC32D; color: #1F1F1F !important;
    font-size: 15px; font-weight: 800; transition: transform .25s ease, filter .25s ease;
}
.vl-pill:hover { transform: translateY(-2px); filter: brightness(1.05); }
.vl-sep { width: 2px; height: 12px; margin: 0 6px; background: currentColor; opacity: .55; border-radius: 2px; }
.vl-arrows { display: flex; gap: 4px; }
.vl-arrow {
    width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #FFC32D; color: #1F1F1F; cursor: pointer; transition: transform .25s ease, opacity .25s ease;
}
.vl-arrow svg { width: 17px; height: 17px; }
.vl-arrow:hover { transform: scale(1.06); }
.vl-arrow:disabled { opacity: .35; cursor: default; transform: none; }
.vl-filter { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: #6F6F6F; }
.vl-select { position: relative; display: inline-flex; align-items: center; }
.vl-select select {
    appearance: none; -webkit-appearance: none;
    height: 48px; min-width: 156px; padding: 0 22px 0 44px;
    border: 1.5px solid #E7AE1D; border-radius: 999px;
    background: transparent; color: #E7AE1D;
    font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer;
}
.vl-select select:focus-visible { outline: 3px solid color-mix(in srgb, #FFC32D 45%, transparent); outline-offset: 2px; }
.vl-select select option { color: #1F1F1F; background: #fff; }
.vl-select svg { position: absolute; left: 18px; pointer-events: none; color: #E7AE1D; }

/* ---------- Horizontal track ---------- */
.vl-track {
    display: grid; grid-auto-flow: column;
    grid-auto-columns: calc((100% - 3 * 24px) / 4);
    gap: 24px; overflow-x: auto;
    padding: 6px 4px 40px; margin: -6px -4px -40px;
    scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.vl-track::-webkit-scrollbar { display: none; }
.vl-track > * { scroll-snap-align: start; }
.vl-track > [hidden] { display: none !important; }

/* ==========================================================================
   Product cards (shared with shop / product / blog pages)
   ========================================================================== */
.vl-card {
    position: relative; display: flex; flex-direction: column; gap: 12px;
    padding: 17px 17px 16px; min-width: 0;
    border-radius: 48px; background: var(--vl-surface); color: var(--vl-text);
}
.vl-card, .vl-card *, .vl-card *::before, .vl-card *::after { box-sizing: border-box; }
.vl-card a { color: inherit; text-decoration: none; }
.vl-card img { max-width: 100%; display: block; }
.vl-card p { margin: 0; }
.vl-card--grid { border: 1px solid #F1F1F1; box-shadow: 0 20px 48px rgba(20,20,20,.09); }
[data-theme="dark"] .vl-card--grid { border-color: var(--vl-line); }
.vl-card-img { display: flex; align-items: center; justify-content: center; height: 170px; }
.vl-card-img img { max-height: 100%; width: auto; max-width: 90%; object-fit: contain; transition: transform .4s ease; }
.vl-card:hover .vl-card-img img { transform: scale(1.05); }
.vl-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; padding-inline: 6px; }
.vl-brand { color: #C84D00; font-weight: 800; }
.vl-rating { display: inline-flex; align-items: center; gap: 4px; color: #C84D00; direction: rtl; font-size: 13px; }
.vl-rating b { font-weight: 800; }
.vl-rating em { font-style: normal; color: #E8B6A0; }
.vl-card .vl-card-title,
.vl-main .vl-card-title {
    margin: 0 !important; padding-inline: 6px;
    font-size: 16px !important; line-height: 1.7 !important; font-weight: 500 !important; color: inherit;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vl-card-title a:hover { color: #E7AE1D; }
.vl-card-stock { font-size: 12.5px; color: var(--vl-muted); padding-inline: 6px; }

.vl-stock { padding-inline: 2px; }
.vl-stock-text { display: flex; justify-content: space-between; font-size: 13px; color: #C84D00; font-weight: 800; margin-top: 4px; order: 2; }
.vl-stock { display: flex; flex-direction: column; }
.vl-stock-bar {
    position: relative; height: 8px; border-radius: 8px; overflow: hidden; order: 1; margin-top: 6px;
    background: repeating-linear-gradient(135deg, #F3D2C0 0 3px, #FFFFFF 3px 7px);
}
.vl-stock-bar i { position: absolute; top: 0; left: 0; bottom: 0; border-radius: 8px; background: #CC5107; }

.vl-card-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: auto; }
.vl-cart-btn {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: 50%;
    background: #FFC32D; color: #1F1F1F !important;
    transition: transform .25s ease, box-shadow .25s ease;
}
.vl-cart-btn:hover { transform: scale(1.08); box-shadow: 0 8px 18px rgba(255,194,45,.45); }
.vl-cart-btn.loading { opacity: .6; pointer-events: none; }
.vl-cart-btn.added { background: #2f9a55; color: #fff !important; }
.vl-cart-btn + .added_to_cart { display: none; }

/* Price block */
.vl-price { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.vl-price-old { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: #9B9B9B; }
.vl-price-old del { text-decoration: line-through; }
.vl-discount { padding: 1px 9px; border-radius: 9px; background: #3B82F6; color: #fff; font-size: 13.5px; font-weight: 800; line-height: 1.55; }
.vl-price-now { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; }
.vl-price-now strong { font-size: 22px; font-weight: 800; line-height: 1.4; }
.vl-price-now small, .vl-unit { font-size: 13.5px; color: #8A8A8A; font-weight: 600; }
.vl-price:not(.has-old) .vl-price-now { flex-direction: column; align-items: flex-start; gap: 0; }
.vl-price:not(.has-old) { padding-block: 14px 0; }

/* Colour pill */
.vl-colors {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 0 17px; height: 48px; border-radius: 999px; background: #F7F7F7;
    font-size: 14px; font-weight: 800; color: #232323;
}
[data-theme="dark"] .vl-colors { background: var(--vl-soft); color: var(--vl-text); }
.vl-colors ul { display: flex; flex-direction: row-reverse; gap: 5px; }
.vl-colors li { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }

/* Badges (shop cards) */
.vl-badges { position: absolute; top: 18px; inset-inline-start: 18px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.vl-badge { padding: 3px 11px; border-radius: 999px; background: #FFC32D; color: #1F1F1F; font-size: 12px; font-weight: 700; line-height: 1.7; }
.vl-badge.is-best { background: #1F1F1F; color: #FFC32D; }
.vl-badge.is-limited { background: var(--vl-peach); color: var(--vl-orange); }
.vl-badge.is-out { background: #E7E7E7; color: #5a5a5a; }

/* ==========================================================================
   Special offer — dark band, cards hang below its bottom edge
   ========================================================================== */
.vl-offer {
    margin-top: 40px; padding: 62px 0 0; color: #fff;
    background: linear-gradient(180deg, #222222 0, #222222 calc(100% - 167px), transparent calc(100% - 167px));
    padding-bottom: 0;
}
.vl-offer .vl-wrap { padding-bottom: 0; }
.vl-offer .vl-sep { background: #fff; }
.vl-offer .vl-card--offer { box-shadow: 0 24px 50px rgba(0,0,0,.18); border: 0; }
.vl-offer .vl-track { padding-bottom: 60px; margin-bottom: -60px; }
.vl-card--offer { background: #fff; color: #1F1F1F; padding-top: 18px; }
.vl-card--offer .vl-card-img { height: 168px; }
.vl-card--offer .vl-card-meta { min-height: 24px; }
.vl-timer { display: inline-flex; align-items: center; gap: 4px; direction: ltr; }
.vl-timer span {
    min-width: 48px; height: 48px; padding: 0 8px; border-radius: 99px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #FFC32D; color: #1F1F1F; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.vl-timer i { font-style: normal; color: #FFC32D; font-weight: 800; font-size: 22px; padding: 0 2px; }
.vl-offer + .vl-section { padding-top: 130px; }

/* ==========================================================================
   Best sellers (rows)
   ========================================================================== */
.vl-rows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 25px; }
.vl-row {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 22px 18px 26px; min-height: 155px;
    border: 1px solid #F0F0F0; border-radius: 44px; background: var(--vl-surface);
    box-shadow: 0 16px 40px rgba(20,20,20,.07);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
[data-theme="dark"] .vl-row { border-color: var(--vl-line); }
.vl-row:hover { transform: translateY(-3px); border-color: #FFC32D; box-shadow: var(--vl-shadow); }
.vl-row[hidden] { display: none !important; }
.vl-row-img { flex: none; width: 96px; height: 112px; display: flex; align-items: center; justify-content: center; }
.vl-row-img img { max-height: 100%; width: auto; object-fit: contain; }
.vl-row-body { flex: 1; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; min-width: 0; padding-block: 8px 4px; }
.vl-row-body .vl-card-title { font-size: 16px !important; padding-inline: 0; -webkit-line-clamp: 2; }
.vl-price--row { align-self: flex-end; }
.vl-price--row.vl-price:not(.has-old) { padding-block: 0; }
.vl-price--row .vl-price-now strong { font-size: 21px; }
.vl-rows-empty { grid-column: 1 / -1; text-align: center; color: var(--vl-muted); padding: 30px 0; }
.vl-more {
    display: none; align-items: center; justify-content: center; gap: 10px;
    height: 56px; margin-top: 22px; border: 1px solid #E7AE1D; border-radius: 999px;
    color: #E7AE1D !important; font-size: 15px; font-weight: 800;
}

/* ==========================================================================
   Classic banner
   ========================================================================== */
.vl-classic { padding-top: 56px; padding-bottom: 60px; }
.vl-classic-card {
    position: relative; display: flex; align-items: center; justify-content: space-between;
    direction: ltr; height: 236px; padding: 0 80px; border-radius: 118px; background: #212121;
}
.vl-classic-card > .vl-btn { order: 1; position: relative; z-index: 2; height: 56px; direction: rtl; }
.vl-classic-percent {
    position: absolute; left: 23.6%; top: 50%; transform: translateY(-50%);
    width: 23%; text-align: center; z-index: 1;
    font-family: var(--vl-script); font-style: italic;
    font-size: clamp(100px, 11.6vw, 168px); line-height: 1.15; white-space: nowrap;
    pointer-events: none; user-select: none;
}
.vl-classic-percent span {
    display: inline-block; padding: 0 .08em .12em;
    background: linear-gradient(180deg, #F0C447 0%, #C99719 38%, rgba(120,88,12,.7) 76%, rgba(120,88,12,.2) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.vl-classic-img {
    position: absolute; left: 58.5%; top: -46px; transform: translateX(-50%);
    height: 326px; width: 226px; z-index: 3; display: flex; justify-content: center; pointer-events: none;
}
.vl-classic-img img { height: 100%; width: auto; max-width: none; object-fit: contain; filter: drop-shadow(0 18px 22px rgba(0,0,0,.45)); }
.vl-classic-text {
    order: 4; position: relative; z-index: 2; direction: rtl; text-align: right;
    display: flex; flex-direction: column; align-items: flex-start;
    flex: none; width: max-content; max-width: 390px;
}
/* Keep the English line whole and balanced above the Persian title. */
.vl-classic-text .vl-script {
    font-size: clamp(30px, 3.15vw, 42px); line-height: 1.25; margin: 0 0 -.32em; padding: 0 .1em .1em;
    max-width: none; white-space: nowrap;
    background: linear-gradient(180deg, #D8A81E 0%, rgba(201,150,20,.78) 40%, rgba(160,115,15,.2) 82%, rgba(160,115,15,0) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.vl-main .vl-classic-text .vl-title {
    position: relative; z-index: 2; white-space: nowrap;
    color: #fff; font-size: clamp(30px, 2.9vw, 38px) !important; line-height: 1.5 !important; font-weight: 800 !important;
}
.vl-classic-text .vl-title em { color: #F2B91C; }

/* ==========================================================================
   Sport / newest grids
   ========================================================================== */
.vl-sport { padding-top: 62px; }
.vl-sport .vl-card-img { height: 230px; }
.vl-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 24px; }
.vl-grid4 .vl-card-img { height: 246px; }
.vl-new { padding-top: 58px; }

/* ==========================================================================
   Promo duo
   ========================================================================== */
.vl-duo { padding-top: 50px; padding-bottom: 30px; }
.vl-duo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.vl-promo {
    position: relative; display: flex; align-items: stretch; justify-content: space-between;
    direction: ltr; height: 230px; border-radius: 76px; overflow: hidden;
    box-shadow: 0 24px 48px rgba(20,20,20,.12); border: 1px solid rgba(0,0,0,.05);
    transition: transform .3s ease;
}
.vl-promo:hover { transform: translateY(-4px); }
.vl-promo--cream { background: linear-gradient(90deg, #FFFFFF 0%, #FFFAEB 55%, #FFE9A8 100%); }
.vl-promo--dark  { background: linear-gradient(90deg, #232323 0%, #232323 62%, #6F5612 100%); }
/* higher specificity than ".vl-main a { color: inherit }" — otherwise the text turned dark-on-dark */
.vl-main .vl-promo--cream { color: #232323; }
.vl-main .vl-promo--dark  { color: #FFFFFF; }
.vl-main .vl-promo--dark .vl-promo-copy small { color: #D6D0BE; opacity: 1; }
.vl-main .vl-promo--cream .vl-promo-copy small { color: #6B6554; opacity: 1; }
.vl-promo-photos { position: relative; flex: none; display: flex; width: 300px; }
.vl-promo-photos img { flex: 1; min-width: 0; height: 100%; object-fit: cover; }
.vl-promo-photos img.is-product { object-fit: contain; padding: 30px 8px; background: linear-gradient(180deg, #ECE8DF, #D9D3C4); }
.vl-promo--dark .vl-promo-photos img.is-product { background: linear-gradient(180deg, #4a4638, #2e2b22); }
.vl-promo-photos img + img { border-left: 2px solid rgba(255,255,255,.4); }
.vl-promo--dark .vl-promo-photos img + img { border-left: 2px solid #E7AE1D; border-right: 0; }
.vl-promo-badge {
    position: absolute; left: 32px; bottom: 32px; z-index: 2;
    display: inline-flex; align-items: center; gap: 9px; height: 52px; padding: 0 18px 0 22px;
    border-radius: 999px; direction: rtl; font-size: 17px; font-weight: 800;
    background: #FFF9E8; color: #232323; box-shadow: 0 8px 20px rgba(0,0,0,.14);
}
.vl-promo-badge svg { color: #343434; }
.vl-promo--dark .vl-promo-badge { background: #1B1B1B; color: #FFC32D; }
.vl-promo--dark .vl-promo-badge svg { color: #FFC32D; }
.vl-promo-copy { flex: 1; direction: rtl; text-align: right; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; padding-inline: 44px 48px; }
.vl-promo-copy b { align-self: stretch; font-size: 29px; font-weight: 800; line-height: 1.5; }
.vl-promo-copy small { align-self: stretch; font-size: 22px; font-weight: 500; line-height: 1.8; opacity: .55; }
.vl-promo-copy .vl-btn { align-self: flex-end; height: 56px; margin-top: 20px; font-size: 15px; padding: 0 20px 0 22px; gap: 10px; }

/* ==========================================================================
   Why Velento
   ========================================================================== */
.vl-why { padding-top: 60px; }
.vl-why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.vl-why-card {
    display: flex; flex-direction: column; align-items: center; gap: 24px;
    padding: 46px 20px 42px; text-align: center; min-height: 312px;
    border: 1px solid #E6E6E6; border-radius: 52px; background: var(--vl-surface);
    box-shadow: 0 16px 40px rgba(20,20,20,.04);
    transition: transform .3s ease, background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.vl-why-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 80px; height: 80px; border-radius: 50%; background: #F3F0EC; color: #4A4640;
    transition: background .3s ease, color .3s ease;
}
.vl-main .vl-why-title {
    margin: 0 !important; padding: 7px 24px; border-radius: 999px; background: #F3F0EC;
    font-size: 18px !important; line-height: 1.6 !important; font-weight: 800 !important;
    transition: background .3s ease, color .3s ease;
}
.vl-why-card p { font-size: 14.5px !important; font-weight: 600; color: var(--vl-text); margin-top: 10px; }
[data-theme="dark"] .vl-why-ico, [data-theme="dark"] .vl-main .vl-why-title { background: var(--vl-soft); }
.vl-why-card:hover, .vl-why-card:focus-within {
    transform: translateY(-4px);
    background: linear-gradient(180deg, #FFFDF8 0%, #FFF3D6 100%);
    border-color: rgba(231,174,29,.45);
    box-shadow: 0 26px 46px rgba(231,174,29,.2);
}
.vl-why-card:hover .vl-why-ico, .vl-why-card:focus-within .vl-why-ico { background: #E7AE1D; color: #fff; }
.vl-why-card:hover .vl-why-title, .vl-why-card:focus-within .vl-why-title { background: #E7AE1D; color: #fff; }
.vl-why-card:hover p, .vl-why-card:focus-within p { color: #E7AE1D; }

/* ==========================================================================
   Blog
   ========================================================================== */
.vl-blog { padding-bottom: 130px; }
.vl-blog-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
/* Keep the hot-topics panel and article cards equal in height on the same desktop row. */
.vl-blog-grid .vl-topics,
.vl-blog-grid .vl-post { height: 100%; box-sizing: border-box; min-width: 0; }
.vl-posts { display: contents; }
.vl-topics { padding: 24px; border: 1px solid #F0F0F0; border-radius: 44px; background: #F7F7F7; }
.vl-main .vl-topics-head {
    margin: 0 0 16px !important; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    height: 64px; padding: 0 24px; border-radius: 22px; background: #E7AE1D; color: #1F1F1F;
    font-size: 16px !important; font-weight: 800 !important; line-height: 1.4 !important;
}
.vl-topics ul { display: flex; flex-direction: column; gap: 12px; }
.vl-topics li a {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    height: 44px; padding: 0 22px; border-radius: 22px;
    background: #E9E9E9; color: #232323; font-size: 14.5px; font-weight: 700;
    transition: background .25s ease, transform .25s ease;
}
[data-theme="dark"] .vl-topics { background: var(--vl-soft); border-color: var(--vl-line); }
[data-theme="dark"] .vl-topics li a { background: var(--vl-surface); color: var(--vl-text); }
.vl-topics li a svg { color: #232323; transition: transform .25s ease; }
.vl-topics li a:hover { background: #FFE9A8; transform: translateX(-3px); }
.vl-topics li a:hover svg { transform: translateX(-3px); }

.vl-post {
    display: flex; flex-direction: column; gap: 12px; padding: 16px;
    border: 1px solid #F0F0F0; border-radius: 40px; background: var(--vl-surface);
    box-shadow: 0 18px 44px rgba(20,20,20,.08); transition: transform .3s ease;
}
[data-theme="dark"] .vl-post { border-color: var(--vl-line); }
.vl-post:hover { transform: translateY(-4px); }
.vl-post-img { display: block; aspect-ratio: 262 / 180; border-radius: 26px; overflow: hidden; background: var(--vl-soft); }
.vl-post-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.vl-post:hover .vl-post-img img { transform: scale(1.05); }
.vl-post-ph { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--vl-cream), var(--vl-yellow-soft)); }
.vl-main .vl-post-title {
    margin: 0 !important; padding: 0 4px 14px; border-bottom: 1px solid #EFEFEF;
    font-size: 16px !important; line-height: 1.9 !important; font-weight: 500 !important; min-height: 3.8em;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vl-post-title a:hover { color: #E7AE1D; }
.vl-post-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-inline: 2px; }
.vl-read {
    display: inline-flex; align-items: center; gap: 9px; height: 48px; padding: 0 18px;
    border-radius: 18px; background: #F4F2EF; font-size: 14px; font-weight: 600;
    transition: background .25s ease, color .25s ease;
}
.vl-read:hover { background: #FFC32D; color: #1F1F1F; }
.vl-post-meta { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.6; }
.vl-post-meta b { font-size: 14px; font-weight: 500; }
.vl-post-meta em { font-style: normal; font-size: 13px; color: #B5B5B5; }

/* --- Homepage «مقالات خواندنی» — sized to the Figma frame (302 × 352 cards, 262 × 179 photos) ---
   Scoped to .vl-blog-grid so the /blog archive and related-post cards keep their own look. */
.vl-blog-grid .vl-topics { padding: 23px 28px; border-color: #F5F1E5; border-radius: 30px; }
.vl-blog-grid .vl-topics ul { gap: 16px; }
.vl-blog-grid .vl-topics li a { padding: 0 22px 0 20px; background: #E7E7E7; }
.vl-blog-grid .vl-post { gap: 0; padding: 15px 15px 16px; border-color: #EFEFEF; border-radius: 30px; }
.vl-blog-grid .vl-post-img { margin-inline: 4px; aspect-ratio: 262 / 179; border-radius: 15px; }
.vl-main .vl-blog-grid .vl-post-title {
    margin: 11px 0 13px !important; padding: 0 0 9px; border-bottom-color: #F3F3F3;
    font-weight: 400 !important; line-height: 29px !important; min-height: 68px;
    text-wrap: wrap; /* the global h3 "balance" would split lines evenly; the design fills each line */
}
.vl-blog-grid .vl-post-foot { height: 48px; padding-inline: 0; }
.vl-blog-grid .vl-read { height: 44px; padding: 0 16px; margin-bottom: 2px; border-radius: 14px; background: #F8F6F4; }
.vl-blog-grid .vl-post-meta { margin-top: -4px; }
.vl-blog-grid .vl-post-meta b { line-height: 26px; }
.vl-blog-grid .vl-post-meta em { line-height: 22px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1180px) {
    .vl-heading::before, .vl-heading::after { display: none; }
    .vl-track { grid-auto-columns: calc((100% - 2 * 22px) / 3); gap: 22px; }
    .vl-main .vl-cat-grid { grid-template-columns: repeat(3, 1fr); row-gap: 130px; }
    .vl-rows { grid-template-columns: repeat(2, 1fr); }
    .vl-grid4, .vl-why-grid { grid-template-columns: repeat(2, 1fr); }
    .vl-blog-grid { grid-template-columns: repeat(2, 1fr); }
    .vl-topics { grid-column: 1 / -1; }
    .vl-topics ul { display: grid; grid-template-columns: repeat(2, 1fr); }
    .vl-duo-grid { grid-template-columns: 1fr; }
    .vl-hero-copy { padding: 48px 40px 48px 24px; }
    .vl-hero-actions { gap: 16px; }
    .vl-classic-card { padding: 0 44px; }
}

@media (max-width: 820px) {
    .vl-section { padding: 40px 0; }
    .vl-hero { padding-top: 12px; }
    .vl-hero-card { grid-template-columns: 1fr; direction: rtl; border-radius: 48px; min-height: 0; clip-path: none; }
    .vl-hero-copy { order: 2; padding: 6px 28px 32px; gap: 20px; }
    .vl-hero-media { order: 1; min-height: 340px; }
    .vl-hero-slide { padding: 0; }
    .vl-hero-img { height: 292px; }
    .vl-hero-fig { max-width: 62%; }
    .vl-hero-glow { width: 360px; height: 360px; }
    .vl-hero-badge { font-size: 18px; padding: 5px 12px 5px 9px; border-width: 2px; outline-width: 2px; outline-offset: 4px; }
    .vl-hero-badge svg { width: 18px; height: 18px; }
    .vl-hero-badge--sale { top: 16%; left: calc(100% - 40px); }
    .vl-hero-badge--rate { bottom: 14%; right: calc(100% - 40px); }
    .vl-hero-dots { left: 50%; bottom: auto; top: 316px; }
    .vl-hero-dot { background: #4a4a4a; }
    .vl-hero-dot.is-active { background: #FFC32D; }
    .vl-hero-star { display: none; }
    .vl-hero-actions { flex-direction: column-reverse; gap: 12px; margin-top: 6px; }
    .vl-hero-actions .vl-btn { width: 100%; height: 56px; justify-content: space-between; padding: 0 14px 0 22px; }
    .vl-main .vl-hero-title { max-width: none; }

    .vl-cats { padding-top: 70px; }
    .vl-bar { grid-template-columns: 1fr; justify-items: center; gap: 18px; margin-bottom: 34px; }
    .vl-bar-start, .vl-bar-end { width: 100%; justify-content: center; }
    .vl-bar .vl-heading { order: -1; }
    .vl-bar-start:empty { display: none; }
    .vl-bar-end { display: none; }

    .vl-track { grid-auto-columns: calc((100% - 12px) / 2); gap: 12px; margin-inline: -24px; padding-inline: 24px; scroll-padding-inline: 24px; }
    .vl-offer { margin-top: 30px; padding-top: 44px; background: linear-gradient(180deg, #222222 0, #222222 calc(100% - 70px), transparent calc(100% - 70px)); }
    .vl-offer + .vl-section { padding-top: 70px; }
    .vl-rows { grid-template-columns: 1fr; gap: 14px; }
    .vl-more { display: flex; }
    .vl-grid4 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .vl-grid4 .vl-card-img, .vl-sport .vl-card-img { height: 120px; }
    .vl-duo-grid { gap: 28px; }

    .vl-classic { padding-top: 70px; }
    .vl-classic-card { flex-direction: column; height: auto; direction: rtl; padding: 168px 31px 30px; gap: 4px; border-radius: 48px; }
    .vl-classic-img { left: 50%; top: -42px; height: 276px; width: 192px; }
    .vl-classic-text { order: 1; align-items: center; text-align: center; }
    .vl-classic-percent { order: 2; position: static; transform: none; width: auto; font-size: 96px; margin-top: 8px; }
    .vl-classic-card > .vl-btn { order: 3; width: 100%; justify-content: space-between; margin-top: 12px; padding: 0 14px 0 26px; }

    .vl-promo { flex-direction: column; height: auto; direction: rtl; border-radius: 48px; }
    .vl-promo-photos { width: 100%; height: 228px; }
    .vl-promo-photos img + img,
    .vl-promo--dark .vl-promo-photos img + img { border-left: 0; }
    .vl-promo-badge { left: 50%; bottom: 14px; transform: translateX(-50%); }
    .vl-promo-copy { align-items: center; text-align: center; padding: 26px 24px 34px; }
    .vl-promo-copy .vl-btn { align-self: center; margin-top: 16px; }
    .vl-promo--dark { background: linear-gradient(180deg, #232323 0%, #232323 60%, #6F5612 100%); }
    .vl-promo--cream { background: linear-gradient(180deg, #FFFAEB 0%, #FFF3CF 55%, #FFE2A0 100%); }

    .vl-blog-grid { grid-template-columns: 1fr; }
    .vl-posts { display: grid; grid-auto-flow: column; grid-auto-columns: 74%; gap: 12px; overflow-x: auto; margin-inline: -24px; padding: 6px 24px 30px; scroll-snap-type: x mandatory; scrollbar-width: none; order: 1; }
    .vl-posts::-webkit-scrollbar { display: none; }
    .vl-posts > * { scroll-snap-align: start; }
    .vl-topics { order: 2; grid-column: auto; }
    .vl-topics ul { grid-template-columns: 1fr; display: flex; }
    .vl-blog { padding-bottom: 90px; }
}

@media (max-width: 640px) {
    .vl-wrap { width: calc(100% - 48px); }
    .vl-script { font-size: 36px; margin-bottom: -17px; }
    .vl-main .vl-title { font-size: 25px !important; }
    .vl-heading::before, .vl-heading::after { display: block; width: 50px; top: 62%; }
    .vl-heading::before { right: calc(100% + 8px); }
    .vl-heading::after { left: calc(100% + 8px); }
    .vl-section > .vl-wrap > .vl-heading { margin-bottom: 38px; }
    .vl-bar .vl-heading { margin-inline: 0; }

    .vl-main .vl-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; row-gap: 92px; padding-top: 100px; }
    .vl-cat { height: 166px; padding-top: 96px; border-radius: 46px; }
    .vl-cat-img { top: -100px; height: 150px; width: 84%; }
    .vl-cat-name { font-size: 17px; margin-top: 8px; }
    .vl-cat-go { bottom: -24px; }

    .vl-card { padding: 12px 12px 14px; border-radius: 38px; gap: 8px; }
    .vl-card .vl-card-title, .vl-main .vl-card-title { font-size: 14px !important; }
    .vl-card-meta { font-size: 12.5px; }
    .vl-card-meta.vl-m-only { display: flex; }
    .vl-colors.vl-m-only { display: flex; }
    .vl-colors { height: 36px; padding: 0 12px; font-size: 12.5px; }
    .vl-colors li { width: 14px; height: 14px; }
    .vl-card--offer .vl-card-img { height: 130px; }
    .vl-offer .vl-cart-btn, .vl-card--grid .vl-cart-btn { display: none; }
    .vl-card-foot { justify-content: flex-start; }
    .vl-price-now strong { font-size: 17px; }
    .vl-price-old { font-size: 12.5px; }
    .vl-discount { font-size: 12.5px; }
    .vl-price:not(.has-old) { padding-block: 8px 0; }
    .vl-stock-text { font-size: 11.5px; }

    .vl-select select { min-width: 126px; height: 46px; }
    .vl-timer span { min-width: 48px; height: 48px; font-size: 20px; }
    .vl-row { min-height: 158px; padding: 14px 18px 14px 24px; border-radius: 36px; }
    .vl-row-img { width: 100px; height: 118px; }
    .vl-price--row .vl-price-now strong { font-size: 21px; }
    .vl-why { display: none; }
    .vl-promo-copy b { font-size: 28px; }
    .vl-promo-copy small { font-size: 21px; }
}

/* Phones: sport + newest become 2-column grids (first 4 items), like the Android frame */
@media (max-width: 640px) {
    .vl-sport .vl-track { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; margin: 0; padding: 0 0 4px; }
    .vl-sport .vl-track > * { scroll-snap-align: none; }
    .vl-is-extra { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .vl-main *, .vl-main *::before, .vl-main *::after { transition-duration: .01ms !important; animation: none !important; }
}


/* Product action: the button expands in place on hover; it never resizes the card. */
.vl-card-foot { position: relative; }
.vl-card-foot .vl-cart-btn {
    position: relative; flex: 0 0 36px; width: 36px; min-width: 36px; height: 36px;
    box-sizing: border-box; padding: 0; gap: 0; overflow: hidden; border: 1px solid var(--vl-dark, #232323);
    border-radius: 999px; background: var(--vl-dark, #232323); color: #fff !important;
    font-family: inherit; font-size: 11px; font-weight: 700; line-height: 1.3;
    white-space: nowrap; box-shadow: none; text-align: center;
    transition: width .2s ease, flex-basis .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease; z-index: 3;
}
.vl-card-foot .vl-cart-btn::after { content: "+"; display: block; font-family: inherit; font-size: 22px; font-weight: 400; line-height: 1; }
.vl-card-foot .vl-cart-btn:hover, .vl-card-foot .vl-cart-btn:focus-visible {
    position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%);
    width: 126px; min-width: 126px; max-width: min(126px, 100%);
    flex: 0 0 126px; overflow: hidden; background: #414141; border-color: #414141; color: #fff !important;
    box-shadow: 0 5px 14px rgba(0,0,0,.10);
}
.vl-card-foot .vl-cart-btn:hover::after, .vl-card-foot .vl-cart-btn:focus-visible::after { content: "افزودن به سبد خرید"; font-size: 11px; }
.vl-card-foot .vl-cart-btn.added { background: #292929; border-color: #292929; color: #fff !important; }
.vl-card-foot .vl-cart-btn.added::after { content: "به سبد اضافه شد"; font-size: 10px; }
.vl-card-foot .vl-cart-btn svg { display: none !important; }
@media (max-width: 420px) {
    .vl-classic-card { padding-top: 178px; }
    .vl-classic-img { left: 50%; top: -36px; height: 248px; width: 172px; }
    .vl-classic-text { max-width: 100%; }
    .vl-classic-text .vl-script { font-size: clamp(25px, 7vw, 30px); }
    .vl-main .vl-classic-text .vl-title { font-size: clamp(24px, 6.5vw, 30px) !important; }
    .vl-card-foot .vl-cart-btn:hover, .vl-card-foot .vl-cart-btn:focus-visible { width: 116px; min-width: 116px; flex-basis: 116px; }
}

/* Hero product badges: warm orange-yellow, double outline, Persian numerals. */
.vl-hero-badge {
    padding: 7px 16px 7px 12px; gap: 8px; background: #F5B51B; color: #fff;
    border: 3px solid #FFC329; outline: 3px solid #FFC329; outline-offset: 4px;
    box-shadow: 0 0 28px rgba(255,183,24,.35), inset 0 0 0 2px rgba(255,255,255,.18);
    font-family: inherit; font-size: 23px; font-weight: 800; letter-spacing: 0; direction: ltr;
}
.vl-hero-badge--sale { top: 25%; left: calc(100% - 52px); }
.vl-hero-badge--rate { bottom: 15%; right: calc(100% - 52px); }
.vl-hero-badge svg { flex: none; }
/* Keep offer and grid cards consistent. Hover expansion stays anchored to the footer. */
.vl-offer .vl-cart-btn,
.vl-card--grid .vl-cart-btn { display: inline-flex; }
.vl-card-foot { position: relative; }
.vl-card-foot .vl-cart-btn {
    position: relative; z-index: 3; width: 42px; min-width: 42px; height: 42px;
    flex: 0 0 42px; padding: 0; overflow: hidden; white-space: nowrap;
    transition: width .22s ease, min-width .22s ease, flex-basis .22s ease, background-color .22s ease, color .22s ease, box-shadow .22s ease;
}
.vl-card-foot .vl-cart-btn:hover,
.vl-card-foot .vl-cart-btn:focus-visible {
    position: absolute; inset-inline-start: 0; bottom: 0; top: auto; transform: none;
    width: 112px; min-width: 112px; max-width: 112px; height: 42px; flex: none;
    background: #292929; border-color: #292929; color: #fff !important;
    box-shadow: 0 5px 14px rgba(0,0,0,.12);
}
.vl-card-foot .vl-cart-btn:hover::after,
.vl-card-foot .vl-cart-btn:focus-visible::after { content: "افزودن به سبد خرید"; font-size: 10px; font-weight: 700; }
.vl-card-foot .vl-cart-btn.added { background: #292929; border-color: #292929; color: #fff !important; }
.vl-card-foot .vl-cart-btn.added::after { content: "اضافه شد"; font-size: 10px; font-weight: 700; }
.vl-card-foot .vl-cart-btn svg { display: none !important; }
@media (max-width: 420px) {
    .vl-card-foot .vl-cart-btn:hover, .vl-card-foot .vl-cart-btn:focus-visible { width: 104px; min-width: 104px; max-width: 104px; }
    .vl-card-foot .vl-cart-btn:hover::after, .vl-card-foot .vl-cart-btn:focus-visible::after { font-size: 9px; }
}

/* Remove the unwanted hero outline without changing its original layout. */
.vl-hero-media,
.vl-hero-slide,
.vl-hero-fig { outline: none; }

@media (max-width: 820px) {
    .vl-hero-badge { font-size: 18px; padding: 5px 12px 5px 9px; border-width: 2px; outline-width: 2px; outline-offset: 4px; }
    .vl-hero-badge svg { width: 18px; height: 18px; }
    .vl-hero-badge--sale { top: 16%; left: calc(100% - 40px); }
    .vl-hero-badge--rate { bottom: 14%; right: calc(100% - 40px); }
}



/* FINAL FIX: reserve a dedicated slot for the expanding cart button.
   The hover label must never overlap product price, stock, or card content. */
.vl-card-foot {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 120px !important;
    align-items: center !important;
    column-gap: 8px !important;
    position: relative !important;
    min-width: 0 !important;
}
.vl-card-foot > .vl-price,
.vl-card-foot > .vl-card-price,
.vl-card-foot > .price,
.vl-card-foot > :not(.vl-cart-btn):not(.added_to_cart) {
    min-width: 0 !important;
}
.vl-card-foot .vl-cart-btn {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    transform: none !important;
    justify-self: start !important;
    align-self: center !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 120px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    z-index: 1 !important;
    transition: width .38s cubic-bezier(0.22, 1, 0.36, 1), flex-basis .38s cubic-bezier(0.22, 1, 0.36, 1), background-color .28s ease, border-color .28s ease !important;
}
.vl-card-foot .vl-cart-btn:hover,
.vl-card-foot .vl-cart-btn:focus-visible {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    transform: none !important;
    width: 112px !important;
    min-width: 112px !important;
    max-width: 120px !important;
    flex: 0 0 112px !important;
    z-index: 1 !important;
}
@media (max-width: 420px) {
    .vl-card-foot {
        grid-template-columns: minmax(0, 1fr) 104px !important;
        column-gap: 5px !important;
    }
    .vl-card-foot .vl-cart-btn:hover,
    .vl-card-foot .vl-cart-btn:focus-visible {
        width: 98px !important;
        min-width: 98px !important;
        max-width: 104px !important;
        flex-basis: 98px !important;
    }
}


/* Reference-card layout: stable price area and a softly expanding plus button. */
.vl-card-foot {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 116px !important;
    align-items: end !important;
    gap: 8px !important;
    position: relative !important;
    min-width: 0 !important;
    direction: rtl !important;
}
.vl-card-foot > .vl-price { grid-column: 2 !important; grid-row: 1 !important; min-width: 0 !important; align-self: end !important; }
.vl-card-foot > .vl-cart-btn { grid-column: 1 !important; grid-row: 1 !important; justify-self: end !important; align-self: end !important; }
.vl-card-foot .vl-price-old {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    white-space: nowrap !important;
}
.vl-card-foot .vl-price-now {
    display: grid !important;
    grid-template-columns: max-content !important;
    grid-template-areas: "unit" "amount" !important;
    justify-items: start !important;
    align-items: start !important;
    gap: 0 !important;
    white-space: nowrap !important;
}
.vl-card-foot .vl-price-now strong { grid-area: amount !important; line-height: 1.35 !important; }
.vl-card-foot .vl-price-now .vl-unit,
.vl-card-foot .vl-price-now small { grid-area: unit !important; font-size: 13px !important; line-height: 1.25 !important; }
.vl-card-foot .vl-cart-btn {
    box-sizing: border-box !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 116px !important;
    height: 42px !important;
    padding: 0 12px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    border-radius: 999px !important;
    flex: 0 0 42px !important;
    z-index: 2 !important;
    transition: width .65s cubic-bezier(.22,1,.36,1), flex-basis .65s cubic-bezier(.22,1,.36,1), background-color .35s ease, box-shadow .35s ease !important;
}
.vl-card-foot .vl-cart-btn::before {
    content: "+" !important;
    display: block !important;
    flex: 0 0 auto !important;
    font-size: 26px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .25s ease !important;
}
.vl-card-foot .vl-cart-btn::after {
    content: "افزودن به سبد" !important;
    display: inline-block !important;
    max-width: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    font-family: inherit !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    transition: max-width .6s cubic-bezier(.22,1,.36,1), opacity .3s ease .08s !important;
}
.vl-card-foot .vl-cart-btn:hover,
.vl-card-foot .vl-cart-btn:focus-visible {
    width: 116px !important;
    min-width: 116px !important;
    flex-basis: 116px !important;
    transform: none !important;
}
.vl-card-foot .vl-cart-btn:hover::before,
.vl-card-foot .vl-cart-btn:focus-visible::before { transform: rotate(90deg) !important; }
.vl-card-foot .vl-cart-btn:hover::after,
.vl-card-foot .vl-cart-btn:focus-visible::after { max-width: 88px !important; opacity: 1 !important; }
@media (max-width: 420px) {
    .vl-card-foot { grid-template-columns: minmax(0,1fr) 102px !important; gap: 6px !important; }
    .vl-card-foot .vl-cart-btn:hover,
    .vl-card-foot .vl-cart-btn:focus-visible { width: 102px !important; min-width: 102px !important; flex-basis: 102px !important; }
    .vl-card-foot .vl-price-now strong { font-size: 18px !important; }
    .vl-card-foot .vl-price-old { gap: 4px !important; font-size: 12px !important; }
}


/* Final reference layout: price anchored bottom-left; plus anchored bottom-right.
   On hover the button grows leftward from its right edge without covering price. */
.vl-card-foot {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 42px !important;
    direction: ltr !important;
    align-items: end !important;
    column-gap: 8px !important;
    position: relative !important;
    min-width: 0 !important;
}
.vl-card-foot > .vl-price {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    align-self: end !important;
    min-width: 0 !important;
    direction: rtl !important;
    text-align: left !important;
}
.vl-card-foot > .vl-cart-btn {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: end !important;
    z-index: 3 !important;
}
.vl-card-foot .vl-price-old {
    display: flex !important;
    flex-direction: row !important;
    direction: ltr !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    white-space: nowrap !important;
}
.vl-card-foot .vl-discount { order: 0 !important; }
.vl-card-foot .vl-price-old del { order: 1 !important; }
.vl-card-foot .vl-price-now {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    gap: 0 !important;
    white-space: nowrap !important;
    direction: rtl !important;
}
.vl-card-foot .vl-price-now .vl-unit,
.vl-card-foot .vl-price-now small {
    order: 0 !important;
    display: block !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
}
.vl-card-foot .vl-price-now strong {
    order: 1 !important;
    display: block !important;
    line-height: 1.25 !important;
}
.vl-card-foot .vl-cart-btn {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 126px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    border-radius: 999px !important;
    padding: 0 10px !important;
    transition: width .72s cubic-bezier(.2,.85,.25,1), min-width .72s cubic-bezier(.2,.85,.25,1), flex-basis .72s cubic-bezier(.2,.85,.25,1), background-color .35s ease, box-shadow .35s ease !important;
}
.vl-card-foot .vl-cart-btn::before {
    content: "+" !important;
    display: block !important;
    flex: 0 0 auto !important;
    font-size: 26px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
}
.vl-card-foot .vl-cart-btn::after {
    content: "افزودن به سبد" !important;
    display: inline-block !important;
    max-width: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    font-family: inherit !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    transition: max-width .65s cubic-bezier(.2,.85,.25,1), opacity .35s ease .1s !important;
}
.vl-card-foot .vl-cart-btn:hover,
.vl-card-foot .vl-cart-btn:focus-visible {
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;
    top: auto !important;
    transform: none !important;
    width: 116px !important;
    min-width: 116px !important;
    flex-basis: 116px !important;
    background: #414141 !important;
    border-color: #414141 !important;
}
.vl-card-foot .vl-cart-btn:hover::after,
.vl-card-foot .vl-cart-btn:focus-visible::after { max-width: 82px !important; opacity: 1 !important; }
@media (max-width: 420px) {
    .vl-card-foot { grid-template-columns: minmax(0, 1fr) 38px !important; column-gap: 5px !important; }
    .vl-card-foot .vl-cart-btn { width: 38px !important; min-width: 38px !important; height: 38px !important; flex-basis: 38px !important; }
    .vl-card-foot .vl-cart-btn:hover,
    .vl-card-foot .vl-cart-btn:focus-visible { width: 108px !important; min-width: 108px !important; flex-basis: 108px !important; }
    .vl-card-foot .vl-price-now strong { font-size: 17px !important; }
}


/* Final requested card details: hide plus on expand, preserve dark button, align unit beside amount. */
.vl-card-foot .vl-cart-btn,
.vl-card-foot .vl-cart-btn:hover,
.vl-card-foot .vl-cart-btn:focus-visible {
    background: var(--vl-dark, #232323) !important;
    border-color: var(--vl-dark, #232323) !important;
    color: #fff !important;
    box-shadow: none !important;
}
.vl-card-foot .vl-cart-btn::before {
    opacity: 1 !important;
    transform: none !important;
    transition: opacity .22s ease, transform .35s ease !important;
}
.vl-card-foot .vl-cart-btn:hover::before,
.vl-card-foot .vl-cart-btn:focus-visible::before {
    opacity: 0 !important;
    transform: scale(.72) !important;
    width: 0 !important;
    flex-basis: 0 !important;
    margin: 0 !important;
}
.vl-card-foot .vl-cart-btn::after {
    content: "افزودن به سبد" !important;
    max-width: 0 !important;
    opacity: 0 !important;
    transition: max-width .72s cubic-bezier(.22,1,.36,1), opacity .38s ease .12s !important;
}
.vl-card-foot .vl-cart-btn:hover::after,
.vl-card-foot .vl-cart-btn:focus-visible::after {
    max-width: 92px !important;
    opacity: 1 !important;
}
.vl-card-foot .vl-price-now {
    display: flex !important;
    flex-direction: row !important;
    direction: ltr !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    white-space: nowrap !important;
}
.vl-card-foot .vl-price-now .vl-unit {
    order: 0 !important;
    display: inline !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}
.vl-card-foot .vl-price-now strong {
    order: 1 !important;
    display: inline !important;
    line-height: 1.25 !important;
}
.vl-card-foot .vl-price-now small:not(.vl-unit) { order: -1 !important; }
.vl-card-foot .vl-price-old {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 7px !important;
    white-space: nowrap !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
}
.vl-card-foot .vl-price-old .vl-discount {
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}
.vl-card-foot .vl-price-old del {
    font-size: 14px !important;
    font-weight: 600 !important;
}
@media (max-width: 420px) {
    .vl-card-foot .vl-price-now .vl-unit { font-size: 12px !important; }
    .vl-card-foot .vl-price-now strong { font-size: 17px !important; }
    .vl-card-foot .vl-price-old { gap: 5px !important; font-size: 13px !important; }
    .vl-card-foot .vl-price-old .vl-discount { font-size: 14px !important; }
    .vl-card-foot .vl-price-old del { font-size: 13px !important; }
}


/* Best-seller banner: layered transparent watch artwork creates the strap-behind / dial-in-front depth effect. */
.vl-classic-card {
    isolation: isolate;
    background: transparent;
}
.vl-classic-card::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    border-radius: 118px;
    background: #212121;
    pointer-events: none;
}
.vl-classic-card > .vl-btn,
.vl-classic-text { z-index: 2; }
.vl-classic-percent { z-index: 2; }
.vl-classic-img--back {
    z-index: 0;
}
.vl-classic-img--back img {
    clip-path: inset(0 0 76% 0);
}
.vl-classic-img--front {
    z-index: 3;
}
.vl-classic-img--front img {
    /* Cutout tuned for the user's newly cropped, narrower transparent watch PNG.
       Keep the dial and lower strap in front while allowing the right strap to sit behind the banner. */
    clip-path: polygon(0 0, 72% 0, 86% 4%, 100% 10%, 100% 56%, 94% 60%, 84% 66%, 78% 72%, 78% 77%, 82% 84%, 88% 94%, 83% 100%, 0 100%);
}
@media (max-width: 820px) {
    .vl-classic-card::before { border-radius: 48px; }
    .vl-classic-img--back img { clip-path: inset(0 0 76% 0); }
    .vl-classic-img--front img { clip-path: polygon(0 0, 72% 0, 86% 4%, 100% 10%, 100% 56%, 94% 60%, 84% 66%, 78% 72%, 78% 77%, 82% 84%, 88% 94%, 83% 100%, 0 100%); }
}


/* Restore the intended gold divider between the two promo product images. */
.vl-promo--dark .vl-promo-photos img:nth-child(2) {
    border-left: 2px solid #E7AE1D !important;
    border-left-color: #E7AE1D !important;
}

/* Hero badges — the pill sits ON the watch, only the thin ring runs behind it.
   .vl-hero-badge is a plain positioned wrapper (no z-index / transform, so it makes
   no stacking context); its two children join the figure's stacking context:
   ring z1  <  watch z3  <  pill z4.
   Colours sampled from the design: sale #FFC124, rating pill #E7AE1D, ring #FFC124. */
.vl-hero-badge,
.vl-hero-slide.is-active .vl-hero-badge {
    z-index: auto; display: flex; padding: 0; border: 0; outline: 0; border-radius: 0;
    background: none; box-shadow: none; animation: none; font-size: inherit;
    --vl-ring: #FFC124; --vl-ring-gap: 11px; --vl-ring-run: 66px;
    --vl-badge-overlap: 84px;   /* how far the pill reaches onto the watch photo */
}
.vl-hero-badge--sale { top: 25%; left: calc(100% - var(--vl-badge-overlap)); }
.vl-hero-badge--rate { bottom: 15%; right: calc(100% - var(--vl-badge-overlap)); }
.vl-hero-pill {
    position: relative; z-index: 4; display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 16px 7px 12px; border-radius: 999px; color: #fff;
    font-size: 23px; font-weight: 800; line-height: 1.3; direction: ltr; white-space: nowrap;
    box-shadow: 0 6px 18px rgba(0,0,0,.35);       /* lifts the pill off the watch face */
}
.vl-hero-badge--sale .vl-hero-pill { background: #FFC124; }
.vl-hero-badge--rate .vl-hero-pill { background: #E7AE1D; }
.vl-hero-slide.is-active .vl-hero-pill { animation: vlPop .7s .35s cubic-bezier(.2,.9,.3,1.3) both; }
.vl-hero-pill svg { flex: none; }
.vl-hero-ring {
    position: absolute; z-index: 1; pointer-events: none;
    top: calc(var(--vl-ring-gap) * -1); bottom: calc(var(--vl-ring-gap) * -1);
    border: 3.5px solid var(--vl-ring);
}
/* sale: watch on its left → ring wraps the right end, runs left behind the watch */
.vl-hero-badge--sale .vl-hero-ring {
    right: calc(var(--vl-ring-gap) * -1); left: calc(var(--vl-ring-run) * -1);
    border-left: 0; border-radius: 0 999px 999px 0;
}
/* rating: watch on its right → ring wraps the left end, runs right behind the watch */
.vl-hero-badge--rate .vl-hero-ring {
    left: calc(var(--vl-ring-gap) * -1); right: calc(var(--vl-ring-run) * -1);
    border-right: 0; border-radius: 999px 0 0 999px;
}
@media (max-width: 820px) {
    .vl-hero-badge { --vl-ring-gap: 8px; --vl-ring-run: 46px; --vl-badge-overlap: 62px; }
    .vl-hero-pill { font-size: 18px; padding: 5px 12px 5px 9px; }
    .vl-hero-pill svg { width: 18px; height: 18px; }
    .vl-hero-ring { border-width: 2.5px; }
}

/* Hero banner: neutral near-black in the site's palette, no warm tint, no yellow
   halo behind the watch. */
.vl-hero-card {
    background:
        radial-gradient(circle at 25% 50%, rgba(255,255,255,.06) 0, rgba(255,255,255,0) 55%),
        linear-gradient(135deg, #1b1b1b 0%, #121212 100%);
}
.vl-hero-glow { display: none; }
/* no glow: the orange lines sit on the same neutral as the rest of the banner */
.vl-hero-rays { filter: none; }
.vl-hero-star { fill: rgba(231,174,29,.14); }


/* User-requested refinements: category arrow direction + theme-aware offer cards. */
.vl-cat-go > svg {
    transform: rotate(180deg);
}
.vl-cat:hover .vl-cat-go > svg,
.vl-cat:focus-visible .vl-cat-go > svg {
    transform: rotate(180deg) translateX(0);
}
.vl-card--offer {
    background: var(--vl-surface);
    color: var(--vl-text);
    border: 1px solid var(--vl-line);
    box-shadow: var(--vl-shadow-sm);
}
[data-theme="dark"] .vl-card--offer {
    background: var(--vl-surface);
    color: var(--vl-text);
    border-color: var(--vl-line);
}


/* Article read button: enforce theme-aware contrast on homepage and blog cards. */
.vl-post .vl-read,
.vl-blog-page .vl-post--blog .vl-read,
.vl-related .vl-post--blog .vl-read {
    background: var(--vl-soft) !important;
    color: var(--vl-text) !important;
    border: 1px solid var(--vl-line);
}
.vl-post .vl-read:hover,
.vl-blog-page .vl-post--blog .vl-read:hover,
.vl-related .vl-post--blog .vl-read:hover {
    background: var(--vl-yellow) !important;
    border-color: var(--vl-yellow);
    color: #1F1F1F !important;
}