/* Formosa SS Dalas — targeted bug-fix stylesheet (audit 2026-09-01). Loaded last so it wins the cascade. */

/* A2/A5 — Add to Cart button on product cards: was bottom:-60px against a 79px-tall
   button, leaving a 19px strip always visible. Use a transform-based slide instead,
   which fully hides the button regardless of its own height. */
.c_hpps_thumb{ overflow:hidden; }
.c_hp_add_cart{
    position:absolute; left:0; bottom:0; width:100%;
    transform:translateY(100%) !important;
    transition:transform .3s ease;
    padding:10px 0 !important;
}
.c_hpp_single_pro:hover .c_hp_add_cart{
    transform:translateY(0) !important;
}
.c_hpps_thumb img.pro-thumb,
.c_hpps_thumb > a:not(.c_hp_add_cart) > img{
    transition:transform .3s ease;
}
.c_hpp_single_pro:hover .c_hpps_thumb > a:not(.c_hp_add_cart) > img{
    transform:scale(1.04);
}

/* A3 — cart icon inside the button was inheriting the thumbnail's width:100%/
   object-fit:cover rule and rendering stretched/cropped. Scope it back down. */
.c_hpps_thumb .c_hp_add_cart img{
    width:20px !important;
    height:20px !important;
    object-fit:contain !important;
    display:inline-block;
    margin-right:6px;
}

/* A4 — the button only ever appeared on :hover, which doesn't exist on touch
   devices, so mobile visitors never saw it. Show it as a static bar on touch/narrow. */
@media (hover:none), (max-width:767px){
    .c_hp_add_cart{
        position:static !important;
        transform:none !important;
        width:100%;
    }
}

/* C2 — two slide captions overlapping because both were visible at once, with
   low-contrast text over a light background image. */
.carousel-item .carousel-caption{ opacity:0; transition:opacity .4s ease; }
.carousel-item.active .carousel-caption{ opacity:1; }
.carousel-item .carousel-caption{ color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.6); }
.carousel-item{ position:relative; }
.carousel-item::after{
    content:''; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(90deg, rgba(0,0,0,.45), transparent 65%);
}

/* C5 — product name on category cards was clipped to a single fixed-height line,
   cutting names off mid-word. Allow two lines with an ellipsis instead. */
.c_hpps_info .name{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    height:auto;
    min-height:2.6em;
    line-height:1.3;
    white-space:normal;
}

/* C8 — category pages with no banner image showed a bare empty gray box. Give it
   a brand-colored gradient so it reads as intentional rather than broken. */
.cat_page_header{
    background:linear-gradient(120deg, #1f6b3a, #0d6f3f) !important;
    background-size:cover !important;
    background-position:center center !important;
}
.cat_page_header .category_name,
.cat_page_header .category_title{
    color:#fff;
}

/* C11 — replaced the deprecated <marquee> tag with a CSS animation. */
.fsd-ticker{ overflow:hidden; white-space:nowrap; }
.fsd-ticker-track{
    display:inline-block;
    padding-left:100%;
    animation:fsd-ticker-scroll 22s linear infinite;
}
.fsd-ticker:hover .fsd-ticker-track{ animation-play-state:paused; }
@keyframes fsd-ticker-scroll{
    0%{ transform:translateX(0); }
    100%{ transform:translateX(-100%); }
}

/* C3 — always-visible header navigation (Home / All Products / About / Contact),
   independent of the mega-menu's category data. */
.fsd-main-nav{
    background:#0d6f3f;
}
.fsd-main-nav-inner{
    display:flex;
    flex-wrap:wrap;
    gap:4px 22px;
    padding:10px 15px;
}
.fsd-main-nav-inner a{
    color:#fff;
    font-size:14px;
    font-weight:600;
    letter-spacing:.02em;
    text-decoration:none;
    opacity:.92;
}
.fsd-main-nav-inner a:hover{
    opacity:1;
    text-decoration:underline;
}

/* D2 — homepage H1, styled to sit quietly under the banner rather than looking
   like a bolted-on SEO tag. */
.fsd-h1{
    font-size:18px;
    font-weight:600;
    color:#2b3a33;
    text-align:center;
    margin:18px 0;
    line-height:1.4;
}

/* C4 — defensive fallback: if the mobile top bar's own logo ever fails to render
   (server-side device detection mismatch), keep the desktop logo visible instead
   of leaving the header with no brand mark at all. Only kicks in when nothing
   with a .mobile_logo class exists on the page. */
@media (max-width:767px){
    body:not(:has(.mobile_logo)) .logo{
        display:block !important;
    }
}