/* ---------------------------------------------------------------------------
   Samant Home Appliances - presentation layer
   Additive only: loaded after the 6Valley theme CSS and never edits a Blade
   template, so a theme update cannot conflict with it. Remove the two <link>/
   <script> lines in layouts/front-end/app.blade.php to revert completely.
   --------------------------------------------------------------------------- */

:root {
    --shp-brand: #fea80e;
    --shp-brand-dark: #e8930a;
    --shp-ink: #1a1e28;
    --shp-muted: #6c7482;
    --shp-line: #ecedf1;
    --shp-radius: 14px;
    --shp-shadow: 0 1px 2px rgba(26, 30, 40, .04), 0 6px 20px rgba(26, 30, 40, .06);
    --shp-shadow-lift: 0 10px 34px rgba(26, 30, 40, .13);
    --shp-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ============================ 1. announcement ticker ===================== */
.shp-ticker {
    background: var(--shp-ink);
    color: #fff;
    overflow: hidden;
    position: relative;
    height: 42px;
    display: flex;
    align-items: center;
}
.shp-ticker__track {
    display: flex;
    align-items: center;
    gap: 56px;
    white-space: nowrap;
    will-change: transform;
    animation: shp-marquee 38s linear infinite;
}
.shp-ticker:hover .shp-ticker__track { animation-play-state: paused; }
.shp-ticker__item {
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .04em;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    opacity: .94;
}
.shp-ticker__item b { color: var(--shp-brand); font-weight: 700; }
@keyframes shp-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ============================ 2. full-bleed hero ======================== */
.shp-hero { padding-top: 0 !important; margin-bottom: 34px; }
.shp-hero > .container { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
.shp-hero .__top-slider-cate { display: none !important; }          /* nav already exposes categories */
.shp-hero .__top-slider-images { flex: 0 0 100% !important; max-width: 100% !important; }
.shp-hero .__top-slider-images > div { padding-left: 0 !important; padding-right: 0 !important; }
.shp-hero .hero-slider img,
.shp-hero .__slide-img,
.shp-hero .__slide-img-170 {
    height: clamp(300px, 33vw, 560px) !important;
    max-height: none !important;
    width: 100% !important;
    object-fit: cover;
    object-position: center;
    border-radius: 0 !important;
}
.shp-hero .owl-dots { position: absolute; bottom: 22px; left: 0; right: 0; }
.shp-hero .owl-dot span {
    width: 9px !important; height: 9px !important;
    background: rgba(26, 30, 40, .22) !important;
    transition: all .3s var(--shp-ease);
}
.shp-hero .owl-dot.active span { width: 30px !important; background: var(--shp-brand) !important; }
.shp-hero .owl-nav button {
    width: 46px; height: 46px; border-radius: 50%;
    background: rgba(255, 255, 255, .92) !important;
    box-shadow: var(--shp-shadow);
    opacity: 0; transition: opacity .3s var(--shp-ease), transform .3s var(--shp-ease);
}
.shp-hero:hover .owl-nav button { opacity: 1; }
.shp-hero .owl-nav button:hover { transform: scale(1.08); background: #fff !important; }

/* ============================ 3. product cards ========================== */
.product-single-hover,
.__product-card,
.card.product-card,
[class*="product-card"] {
    border-radius: var(--shp-radius) !important;
    border: 1px solid var(--shp-line) !important;
    box-shadow: none;
    overflow: hidden;
    transition: transform .34s var(--shp-ease), box-shadow .34s var(--shp-ease), border-color .34s var(--shp-ease);
}
.product-single-hover:hover,
.__product-card:hover,
.card.product-card:hover,
[class*="product-card"]:hover {
    transform: translateY(-5px);
    box-shadow: var(--shp-shadow-lift) !important;
    border-color: rgba(254, 168, 14, .45) !important;
}
[class*="product-card"] img,
.product-single-hover img {
    transition: transform .55s var(--shp-ease);
    backface-visibility: hidden;
}
[class*="product-card"]:hover img,
.product-single-hover:hover img { transform: scale(1.055); }

/* discount pill */
[class*="discount"], .__discount-badge, .product-badge {
    border-radius: 999px !important;
    font-weight: 700 !important;
    letter-spacing: .02em;
    box-shadow: 0 2px 8px rgba(254, 168, 14, .35);
}

/* price hierarchy */
.text-accent, .price, .__price { font-weight: 700 !important; letter-spacing: -.01em; }
del, .text-muted del, .__old-price { opacity: .55; font-weight: 400; }

/* ============================ 4. section rhythm ========================= */
.section-header h2,
.section-card-margin h2,
.__inline-62 h2 {
    font-weight: 800 !important;
    letter-spacing: -.02em;
    position: relative;
    padding-bottom: 10px;
}
.section-header h2::after,
.__inline-62 h2::after {
    content: "";
    position: absolute; left: 0; bottom: 0;
    width: 46px; height: 3px; border-radius: 2px;
    background: var(--shp-brand);
    transition: width .45s var(--shp-ease);
}
.section-header:hover h2::after { width: 78px; }

.view-all-btn-text {
    font-weight: 600;
    transition: gap .25s var(--shp-ease), color .25s var(--shp-ease);
}
.view-all-btn-text:hover { color: var(--shp-brand-dark) !important; }

/* ============================ 5. buttons =============================== */
.btn-primary, .btn--primary, .shop-now-btn {
    border-radius: 999px !important;
    font-weight: 600;
    transition: transform .22s var(--shp-ease), box-shadow .22s var(--shp-ease), filter .22s var(--shp-ease);
}
.btn-primary:hover, .btn--primary:hover, .shop-now-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(254, 168, 14, .34);
    filter: saturate(1.06);
}
.btn-primary:active, .btn--primary:active { transform: translateY(0); }

/* ============================ 6. header ================================ */
.shp-scrolled .navbar,
.shp-scrolled header { box-shadow: 0 2px 18px rgba(26, 30, 40, .09); }
header, .navbar { transition: box-shadow .3s var(--shp-ease); }

/* category strip icons */
.category-menu img, .__category-icon { transition: transform .3s var(--shp-ease); }
.category-menu li:hover img { transform: scale(1.12) rotate(-3deg); }

/* ============================ 7. scroll reveal ========================= */
.shp-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .62s var(--shp-ease), transform .62s var(--shp-ease);
    will-change: opacity, transform;
}
.shp-reveal.shp-in { opacity: 1; transform: none; }

/* images fade in once decoded instead of popping */
img.shp-fade { opacity: 0; transition: opacity .45s ease; }
img.shp-fade.shp-loaded { opacity: 1; }

/* ============================ 8. misc polish =========================== */
.card, .__card { border-radius: var(--shp-radius) !important; }
a { transition: color .2s var(--shp-ease); }

::selection { background: rgba(254, 168, 14, .28); }

/* slimmer, on-brand scrollbar on desktop */
@media (min-width: 992px) {
    ::-webkit-scrollbar { width: 11px; height: 11px; }
    ::-webkit-scrollbar-track { background: #f4f5f7; }
    ::-webkit-scrollbar-thumb { background: #cfd3da; border-radius: 999px; border: 3px solid #f4f5f7; }
    ::-webkit-scrollbar-thumb:hover { background: var(--shp-brand); }
}

/* ============================ 9. accessibility ========================= */
@media (prefers-reduced-motion: reduce) {
    .shp-ticker__track { animation: none; }
    .shp-reveal { opacity: 1 !important; transform: none !important; transition: none; }
    img.shp-fade { opacity: 1; }
    [class*="product-card"], .product-single-hover,
    [class*="product-card"] img, .product-single-hover img,
    .btn-primary, .btn--primary { transition: none !important; }
    [class*="product-card"]:hover, .product-single-hover:hover { transform: none; }
    [class*="product-card"]:hover img, .product-single-hover:hover img { transform: none; }
}

/* ============================ 10. small screens ======================== */
@media (max-width: 767px) {
    .shp-hero .hero-slider img { height: clamp(190px, 52vw, 300px) !important; }
    .shp-ticker { height: 36px; }
    .shp-ticker__item { font-size: 12px; }
    .shp-hero .owl-nav button { display: none; }
}

/* ============================ 11. USP strip ============================ */
.shp-usp {
    border-bottom: 1px solid var(--shp-line);
    background: #fff;
    margin-top: -34px;
    margin-bottom: 34px;
}
.shp-usp__inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 20px 12px;
}
.shp-usp__item {
    display: flex; align-items: center; gap: 14px;
    padding: 6px 10px;
    border-right: 1px solid var(--shp-line);
}
.shp-usp__item:last-child { border-right: 0; }
.shp-usp__ico {
    flex: 0 0 42px; height: 42px; width: 42px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(254, 168, 14, .13);
    color: var(--shp-brand-dark);
    font-weight: 800; font-size: 17px;
}
.shp-usp__txt { display: flex; flex-direction: column; line-height: 1.28; }
.shp-usp__txt b { font-size: 14.5px; color: var(--shp-ink); font-weight: 700; }
.shp-usp__txt i { font-size: 12.5px; color: var(--shp-muted); font-style: normal; }

@media (max-width: 991px) {
    .shp-usp__inner { grid-template-columns: repeat(2, 1fr); }
    .shp-usp__item:nth-child(2n) { border-right: 0; }
    .shp-usp__item:nth-child(-n+2) { border-bottom: 1px solid var(--shp-line); padding-bottom: 14px; }
}

/* ============================ 12. breadcrumb =========================== */
.shp-crumb {
    background: #fafbfc;
    border-bottom: 1px solid var(--shp-line);
    font-size: 13.5px;
    padding: 11px 0;
}
.shp-crumb .container { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.shp-crumb a { color: var(--shp-muted); text-decoration: none; }
.shp-crumb a:hover { color: var(--shp-brand-dark); }
.shp-crumb span { color: #c6cbd4; }
.shp-crumb em {
    font-style: normal; color: var(--shp-ink); font-weight: 600;
    max-width: 60ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}