/* ============================================================
   Part 9 / S2 — storefront homepage. Loads AFTER front.css, so
   these win over the legacy rules on equal specificity.
   ============================================================ */
:root{ --sd-radius:18px; }   /* = the header pill's radius (header9.css) */

/* ---- 1. One roundness for every box/banner on the page -------------------
   The legacy sheet mixes 3/4/9/12/14/16/20/24px. Everything card-like inside
   the storefront body is normalised to the header's 18px. Small icon chips
   (.sd-trust-ic, .sd-service-ic …) are deliberately left alone — they're
   glyph tiles, not boxes.
   Part 12 update: those wrappers now have NO background or border at all — they
   are bare glyphs — so there is nothing left to round either way. */
.f_body .baner > div,
.f_body .baner_img,
.f_body .baner_img1,
.f_body .slider > div,
.f_body .baner .uk-slideshow-items,
.f_body .slider .uk-slideshow-items,
.f_body .sd-trust-item,
.f_body .sd-service,
.f_body .sd-services,
.f_body .product-slider.sd-rail--featured,
.f_body .sd-railnav .uk-slider-container,
.f_body .sd-news-card,
.f_body .sd-news-thumb{
    border-radius: var(--sd-radius);
}
/* The banners/sliders clip their <img>, so the wrapper needs the clip too. */
.f_body .baner > div,
.f_body .slider > div,
.f_body .baner .uk-slideshow-items,
.f_body .slider .uk-slideshow-items{ overflow: hidden; }

/* ---- 1b. Tighter banner/slider gutters ------------------------------------
   The dead space came from four stacked sources: the 10px .baner/.slider
   padding, the 15px .baner-group margin, UIkit's 30px .uk-grid-margin between
   wrapped rows, and the rails' own 10px paddings. */
.f_body .baner{ padding: 4px !important; }
.f_body .slider{ padding: 4px !important; }
.f_body .baner-group{ margin: 6px 0 !important; }
.f_body .uk-grid-margin{ margin-top: 8px; }
.f_body .body{ padding: 4px 12px; }
.f_body .product-slider{ margin-top: 4px; }
.f_body .product-slider > div{ padding: 4px 2px; }
.f_body .titr{ margin-top: 4px; padding: 4px 10px; }

/* ---- 1c. Rail header: centred title, bare arrows at both edges -------------
   Was [prev|next] as one bordered pill on the left with the title on the right.
   Now: right arrow at the right edge, title centred, left arrow at the left —
   and no box/background around either arrow. */
.sd9-railhead{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.sd9-railhead .titr_hhh,
.sd9-railhead .titr_hhh2{ margin: 0 auto; }   /* centres between the two arrows */
/* drop the little vertical teal bar beside the title AND the rule under it */
.sd9-railhead .titr_hhh::before,
.sd9-railhead .titr_hhh2::before{ display: none; }
.sd9-railhead .titr_hhh,
.sd9-railhead .titr_hhh2{ border-bottom: 0; padding-bottom: 0; }
/* same treatment for the brands rail, which has its own heading markup */
.f_body .brand_slider > h3::before{ display: none; }
/* an arrow that can't go anywhere is hidden, but keeps its box so the title
   stays centred */
.sd9-railarrow.is-off{ visibility: hidden; pointer-events: none; }

/* ---- 2b. «مشاهده بیشتر» end-card -----------------------------------------
   It inherited a full product-card slot (1/5 of the rail), which is far wider
   than the label needs. front.css already narrows it on phones (22vw); do the
   same for the desktop slot. The hover colour must be set explicitly, or
   front.css's global a:hover turns the label blue. */
@media(min-width: 641px){
    .f_body .product-slider .uk-slider-items > li:has(> .sd-rail-more){
        width: 166px;
        min-width: 0;
    }
}
.f_body .sd-rail-more,
.f_body .sd-rail-more:hover,
.f_body .sd-rail-more:focus{ color: #fff; }
.sd9-railarrow{
    flex: 0 0 auto;
    background: none;
    border: 0;
    padding: 2px 6px;
    color: var(--sd-teal-600);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition: color .15s ease, transform .15s ease;
}
.sd9-railarrow:hover{ color: var(--sd-teal-hover); transform: scale(1.18); }

/* ---- 1d. فروش ویژه band: a much stronger teal ------------------------------
   Was a barely-there teal-050→100 tint; now the palette's real greens, so the
   sale shelf actually outranks the white rails. Everything sitting on it has
   to flip to white. */
.f_body .product-slider.sd-rail--featured{
    background: linear-gradient(160deg, var(--sd-teal-400), var(--sd-teal-600));
    border-color: var(--sd-teal-600);
}
.f_body .sd-rail--featured .titr_hhh{ color: #fff; border-bottom-color: rgba(255,255,255,.5); }
.f_body .sd-rail--featured .titr_hhh::before{ background: #fff; }
.f_body .sd-rail--featured .sd9-railarrow{ color: #fff; }
.f_body .sd-rail--featured .sd9-railarrow:hover{ color: var(--sd-teal-050); }

/* ---- 2. Hero slider (homepage) --------------------------------------------
   The full-width slider replaced the heading block + two square ad banners, so
   it carries the top of the page on its own. Ratio stays the slides' native
   60:29 — cropping them to a shorter box would cut the artwork. */
.sd9-hero-slider{ padding: 4px !important; }
.sd9-hero-slider .uk-slideshow-items{ border-radius: var(--sd-radius); }
.sd9-home-title{
  margin: 18px 0 12px;
  color: var(--sd-ink);
  font-size: clamp(18px,2vw,24px);
  font-weight: 800;
  line-height: 1.6;
  text-align: center;
}

/* ---- 3. Category grid (replaces the C4/C16/C17 capsule strip) -------------
   Two rows on desktop (10 tiles / 5 per row), three on narrow phones.
   No card behind a tile — just the round photo and its name. */
.sd9-cats-sec{ margin: 14px 10px 8px; }
/* The capsules are front.css's .sd-cat chips. Changes here: the strip wraps onto
   further lines and centres instead of staying on one scrolling line (hence no
   .sd-cats-nav arrows), and the chips are text-only — dropping the leading icon
   is what lets the whole set fit on a single line on a wide screen. */
.sd9-cats-sec .sd-cats{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    overflow: visible;
    gap: 9px;
    margin: 0 auto;
    padding: 0;
}
@media(max-width: 640px){
    .sd9-cats-sec{ margin: 12px 8px 6px; }
    .sd9-cats-sec .sd-cats{ gap: 7px; }
}

/* ---- 4. Brand marquee -----------------------------------------------------
   Two self-scrolling rows going opposite ways. The track holds its items twice
   and animates to exactly -50%, so copy #2 lands where copy #1 began → no jump.
   The rows are forced back to LTR: the content is logos, order carries no
   meaning, and an RTL overflow origin makes the transform maths fight itself. */
.sd9-brands{ margin: 18px 10px 10px; }
.sd9-brands-title{
    font-family: 'iransans2', sans-serif;
    font-weight: 700;
    font-size: 19px;
    color: var(--sd-ink);
    margin: 0 0 16px;
    text-align: center;
}
.sd9-marquee{ display: flex; flex-direction: column; gap: 14px; }
.sd9-brow{ position: relative; overflow: hidden; direction: ltr; }
/* fade the two ends so logos enter/leave instead of being chopped off */
.sd9-brow::before,
.sd9-brow::after{
    content: "";
    position: absolute; top: 0; bottom: 0;
    width: 80px; z-index: 2; pointer-events: none;
}
.sd9-brow::before{ left: 0; background: linear-gradient(to right, var(--sd-bg), transparent); }
.sd9-brow::after{ right: 0; background: linear-gradient(to left, var(--sd-bg), transparent); }
.sd9-btrack{
    display: flex;
    align-items: center;
    gap: 14px;
    width: max-content;
    animation: sd9BrandScroll 45s linear infinite;
}
.sd9-brow--rev .sd9-btrack{ animation-duration: 38s; animation-direction: reverse; }
.sd9-marquee:hover .sd9-btrack{ animation-play-state: paused; }
@keyframes sd9BrandScroll{
    from{ transform: translateX(0); }
    to{ transform: translateX(-50%); }
}
/* NOTE: class is .sd9-blogo, NOT .sd9-brand — header9.css already owns
   .sd9-brand (the burger+logo group), and this sheet loads after it, so reusing
   the name turned the site logo into a 92px circle. Keep these namespaces apart.
   The logos sit on a transparent background with no ring: they're supplied as
   cut-outs, and object-fit:contain keeps them whole (cover cropped their tops
   and bottoms). Hovering cross-fades to the brand's second image in place — the
   old markup scaled that image up, which is what bled past the frame. */
.sd9-blogo{
    position: relative;
    width: 92px; height: 92px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: none;
    border: 0;
    transition: transform .25s ease;
}
.sd9-blogo img{
    max-width: 100%; max-height: 100%;
    width: auto; height: auto;
    object-fit: contain;
    transition: opacity .25s ease;
}
.sd9-blogo-b{ position: absolute; inset: 0; margin: auto; opacity: 0; }
.sd9-blogo:hover .sd9-blogo-a{ opacity: 0; }
.sd9-blogo:hover .sd9-blogo-b{ opacity: 1; }
.sd9-blogo:hover{ transform: scale(1.06); }
@media(max-width: 640px){
    .sd9-brands{ margin: 14px 8px 8px; }
    .sd9-brands-title{ font-size: 16px; margin-bottom: 12px; }
    .sd9-marquee{ gap: 10px; }
    .sd9-brow::before, .sd9-brow::after{ width: 40px; }
    .sd9-btrack{ gap: 10px; }
    .sd9-blogo{ width: 66px; height: 66px; }
}
@media (prefers-reduced-motion: reduce){
    .sd9-btrack{ animation: none; }
    .sd9-blogo:hover{ transform: none; }
}