/* Optimized homepage CSS extracted from index.blade.php */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; overflow-x: hidden; scroll-behavior: smooth; }
body { font-family: var(--font-body); background: #F8F8F8; color: var(--text); line-height: 1.65; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; }

.hp { width: 100%; background: #F8F8F8; padding-bottom: 72px; }
html, body { background-color: #F8F8F8 !important; }
.hw { width: 100%; max-width: 1600px; margin: 0 auto; padding: 0 20px; }
.hs { margin-bottom: 40px; }

/* REVEAL */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-scale { opacity: 0; transform: scale(.94); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.reveal-scale.visible { opacity: 1; transform: scale(1); }
.stagger > * { opacity: 0; transform: translateY(24px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.stagger.visible > *:nth-child(1) { opacity:1; transform:none; transition-delay:.05s; }
.stagger.visible > *:nth-child(2) { opacity:1; transform:none; transition-delay:.12s; }
.stagger.visible > *:nth-child(3) { opacity:1; transform:none; transition-delay:.19s; }
.stagger.visible > *:nth-child(4) { opacity:1; transform:none; transition-delay:.26s; }
.stagger.visible > *:nth-child(n+5) { opacity:1; transform:none; transition-delay:.33s; }

/* SECTION HEADER */
.sec-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.sec-title { font-family: var(--font-head); font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: -.4px; display: flex; align-items: center; gap: 10px; }
.sec-btn { display: inline-flex; align-items: center; gap: 7px; padding: 10px 22px; border-radius: var(--r-pill); background: var(--grad-p); color: #fff; font-family: var(--font-head); font-size: 13px; font-weight: 700; box-shadow: 0 6px 22px var(--p-glow); transition: var(--t); border: none; cursor: pointer; white-space: nowrap; }
.sec-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 32px var(--p-glow); color: #fff; }
.sec-btn i { font-size: 11px; }



/* HERO */
.hero-wrap { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; align-items: start; }
.hero-main { background: #ffffff !important; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-md); position: relative; border: none !important; outline: none !important; }
.hero-main, .hero-main .owl-carousel, .hero-main .owl-stage-outer, .hero-main .owl-stage, .hero-slider, .hero-slider .owl-carousel, .hero-slider .owl-stage-outer { background: #ffffff !important; background-color: #ffffff !important; border-color: transparent !important; }
.hero-slider .item, .hero-slider .owl-item, .hero-slider .dimage_item { background: #ffffff !important; }
.hero-slider .item img { width: 100%; height: 460px; object-fit: cover; display: block; }
.hero-slider .owl-nav button { position: absolute !important; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50% !important; background: rgba(255,255,255,.97) !important; color: var(--p) !important; font-size: 22px !important; margin: 0 !important; padding: 0 !important; box-shadow: 0 8px 28px rgba(0,0,0,.15) !important; transition: var(--t) !important; display: flex !important; align-items: center; justify-content: center; }
.hero-slider .owl-nav button:hover { transform: translateY(-50%) scale(1.08) !important; }
.hero-slider .owl-nav .owl-prev { left: 16px; }
.hero-slider .owl-nav .owl-next { right: 16px; }
.hero-slider .owl-dots { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 5; }
.hero-slider .owl-dots .owl-dot span { width: 8px; height: 8px; background: rgba(255,255,255,.5); border-radius: 4px; transition: var(--t); display: block; }
.hero-slider .owl-dots .owl-dot.active span { background: var(--s, #F59E0B) !important; width: 24px; }

/* SIDE BANNERS */
.hero-side { display: flex; flex-direction: column; gap: 20px; }
.hero-side-box { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-sm); position: relative; transition: var(--t-slow); display: block; cursor: pointer; text-decoration: none !important; }
.hero-side-box:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.hero-side-box::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(15,23,42,.2) 100%); opacity: 0; transition: var(--t); pointer-events: none; }
.hero-side-box:hover::after { opacity: 1; }
.hero-side-box img { width: 100%; height: 220px; object-fit: cover; transition: transform .5s var(--ease); display: block; }
.hero-side-box:hover img { transform: scale(1.04); }

/* TRUST */
.trust-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 36px; }
.trust-card { background: #fff; border-radius: var(--r-lg); border: 1.5px solid #EDE9FE; padding: 16px 20px; display: flex; align-items: center; gap: 14px; transition: var(--t); box-shadow: var(--sh-xs); }
.trust-card:hover { border-color: var(--p); box-shadow: var(--sh-sm); transform: translateY(-2px); }
.trust-text strong { display: block; font-family: var(--font-head); font-size: 14px; font-weight: 700; color: var(--text2); }
.trust-text span { font-size: 12.5px; color: var(--muted); }

/* CATEGORY */
.cat-item { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 20px 12px 18px; background: #fff; border-radius: var(--r-lg); border: 1px solid #EDE9FE; color: var(--text); cursor: pointer; transition: var(--t); min-height: 188px; position: relative; overflow: hidden; box-shadow: 0 2px 8px rgba(109,40,217,.06); }
.cat-item::before, .cat-item::after { display: none !important; }
.cat-item:hover { border-color: var(--p); box-shadow: var(--sh-sm); transform: translateY(-3px); background: #fff !important; background-color: #fff !important; }
.cat-item:hover .cat-img-bg { transform: scale(1.06); background: linear-gradient(135deg,#EDE9FE,#C4B5F4); }
.cat-item:hover h4 { color: var(--p); }
.cat-img-wrap { width: 100%; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.cat-img-bg { width: 100px; height: 100px; border-radius: 50%; background: transparent; display: flex; align-items: center; justify-content: center; transition: var(--t); margin-bottom: 1px; }
.cat-item img { width: 120px; height: 120px; object-fit: contain; transition: transform .2s; }
.cat-item:hover img { transform: scale(1.08); }
.cat-item h4 { font-family: var(--font-head); font-size: 13px; font-weight: 700; color: var(--text3); line-height: 1.4; word-break: break-word; transition: color var(--t); }

/* PRODUCT CARD */
.p-card { position: relative; background: #fff !important; border-radius: var(--r-lg); border: 1.5px solid #EDE9FE; overflow: hidden; display: flex; flex-direction: column; height: 100%; transition: var(--t); box-shadow: var(--sh-card); }
.p-card:hover { border-color: var(--p); box-shadow: var(--sh-lg); transform: translateY(-6px); background: #fff !important; }
.p-card *:hover { background-color: transparent; }
.disc-badge { position: absolute; top: 10px; right: 10px; background: linear-gradient(135deg,#EF4444,#DC2626); color: #fff; font-family: var(--font-head); font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: var(--r-pill); z-index: 3; box-shadow: 0 4px 14px rgba(239,68,68,.3); animation: badge-pulse 2.5s ease-in-out infinite; }
@keyframes badge-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
.p-thumb { padding: 16px 16px 10px; background: linear-gradient(180deg,#FBF9FF 0%,#fff 100%) !important; position: relative; overflow: hidden; }
.p-thumb:hover { background: linear-gradient(180deg,#FBF9FF 0%,#fff 100%) !important; }
.p-thumb img { width: 100%; height: 200px; object-fit: contain; transition: transform .4s var(--ease); mix-blend-mode: multiply; position: relative; z-index: 1; }
.p-card:hover .p-thumb img { transform: scale(1.08); }
.p-thumb::after { content: ''; position: absolute; top: 0; left: -80%; width: 60%; height: 100%; background: linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent); transform: skewX(-15deg); pointer-events: none; opacity: 0; }
.p-card:hover .p-thumb::after { opacity: 1; animation: shine .55s ease forwards; }
@keyframes shine { to { left: 140%; } }
.p-body { padding: 12px 14px 10px; flex: 1; display: flex; flex-direction: column; background: #fff !important; }
.p-body:hover { background: #fff !important; }
.p-name { font-family: var(--font-head); font-size: 14px; font-weight: 700; line-height: 1.5; min-height: 44px; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.p-name a { color: var(--text3); transition: color var(--t); }
.p-name a:hover { color: var(--p); background: transparent !important; }
.p-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; margin-top: auto; }
.p-price-new { font-family: var(--font-head); font-size: 19px; font-weight: 900; color: var(--p-dark); letter-spacing: -.3px; }
.p-price-old { font-size: 13px; color: var(--muted2); font-weight: 500; text-decoration: line-through; }
.p-actions { display: flex; align-items: center; gap: 8px; padding: 10px 12px 13px; border-top: 1px solid #F5F3FF; background: #fff !important; }
.p-actions:hover { background: #fff !important; }
.p-actions form { margin: 0; flex: 1; }
.btn-now { flex: 1; height: 42px; background: var(--grad-s) !important; color: #fff !important; border: none; border-radius: var(--r-md); font-family: var(--font-body); font-size: 14px; font-weight: 700; cursor: pointer; transition: var(--t); display: flex; align-items: center; justify-content: center; width: 100%; box-shadow: 0 4px 16px var(--s-glow); }
.btn-now:hover { filter: brightness(1.07); box-shadow: 0 8px 24px var(--s-glow); transform: translateY(-1px); color: #fff !important; background: var(--grad-s) !important; }
.btn-cart-ic { width: 42px; min-width: 42px; height: 42px; background: var(--grad-p) !important; color: #fff !important; border: none; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; transition: var(--t); box-shadow: 0 4px 16px var(--p-glow); }
.btn-cart-ic:hover { filter: brightness(1.1); transform: translateY(-1px) scale(1.05); color: #fff !important; background: var(--grad-p) !important; }

/* DEAL */
.deal-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.deal-left { display: flex; align-items: center; gap: 14px; }
.deal-title { font-family: var(--font-head); font-size: 22px; font-weight: 800; color: var(--text); display: flex; align-items: center; gap: 10px; }
.deal-fire { color: var(--s); animation: fire-flicker 1.4s ease-in-out infinite alternate; }
@keyframes fire-flicker { from{transform:rotate(-4deg) scale(1)} to{transform:rotate(4deg) scale(1.15)} }
.countdown-wrap { display: flex; align-items: center; gap: 6px; background: var(--p-soft); border: 1.5px solid var(--border); border-radius: var(--r-pill); padding: 6px 16px; }
.cd-unit { display: flex; flex-direction: column; align-items: center; min-width: 36px; }
.cd-num { font-family: var(--font-head); font-size: 22px; font-weight: 900; color: var(--p-dark); line-height: 1; transition: var(--t); }
.cd-label { font-size: 10px; color: var(--muted); font-weight: 600; letter-spacing: .5px; text-transform: uppercase; margin-top: 2px; }
.cd-sep { font-family: var(--font-head); font-size: 20px; font-weight: 900; color: var(--p); margin-bottom: 10px; animation: sep-blink .9s ease-in-out infinite; }
@keyframes sep-blink { 0%,100%{opacity:1} 50%{opacity:.2} }

/* SWIPER */
.bd-swiper { position: relative; padding: 6px 4px 52px; overflow: hidden; }
.bd-swiper .swiper-slide { height: auto; display: flex; }
.bd-swiper .p-card { width: 100%; }
.bd-nav { width: 42px; height: 42px; background: var(--surface); border: 1.5px solid var(--border); border-radius: 50%; box-shadow: var(--sh-sm); color: var(--p); transition: var(--t); }
.bd-nav:hover { background: var(--p); border-color: var(--p); color: #fff; }
.bd-nav::after { font-size: 13px; font-weight: 800; }
.bd-pagination .swiper-pagination-bullet { background: #C4B5F4; opacity: 1; transition: var(--t); }
.bd-pagination .swiper-pagination-bullet-active { background: var(--s); width: 22px; border-radius: 4px; }

/* PROMO */
.promo-box { width: 100%; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-md); transition: var(--t-slow); display: block; position: relative; }
.promo-box:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); }
.promo-box img { width: 100%; height: 240px; object-fit: cover; transition: transform .5s var(--ease); display: block; }
.promo-box:hover img { transform: scale(1.025); }

/* OWL */
.top-category-slider .owl-stage, .cat-prod-slider .owl-stage { display: flex; }
.top-category-slider .owl-item, .cat-prod-slider .owl-item { display: flex; height: auto !important; }
.top-category-slider .item, .cat-prod-slider .item { width: 100%; height: 100%; }
.top-category-slider .cat-item, .cat-prod-slider .p-card { width: 100%; height: 100%; }
.top-category-slider .owl-stage-outer, .cat-prod-slider .owl-stage-outer { padding: 10px 4px; }
.cat-prod-slider .owl-nav button { position: absolute !important; top: 50%; transform: translateY(-50%) !important; width: 36px !important; height: 36px !important; border-radius: 50% !important; background: var(--surface) !important; border: 1.5px solid var(--border) !important; color: var(--p) !important; box-shadow: var(--sh-sm) !important; font-size: 18px !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: var(--t) !important; }
.cat-prod-slider .owl-nav button:hover { background: var(--p) !important; color: #fff !important; border-color: var(--p) !important; }
.cat-prod-slider .owl-nav .owl-prev { left: -8px !important; }
.cat-prod-slider .owl-nav .owl-next { right: -8px !important; }
.cat-prod-slider { position: relative; }

/* SKELETON */
.skeleton { background: linear-gradient(90deg,#f0f4ff 25%,#e8eeff 50%,#f0f4ff 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.5s infinite; border-radius: var(--r-md); }
@keyframes skeleton-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* RESPONSIVE */
@media(max-width:1199px) { .hero-slider .item img{height:400px} .trust-strip{grid-template-columns:repeat(2,1fr)} }
@media(max-width:991px) { .hero-wrap{grid-template-columns:1fr} .hero-slider .item img{height:360px} .hero-side{display:grid;grid-template-columns:1fr 1fr;gap:14px} .hero-side-box img{height:170px} .trust-strip{grid-template-columns:repeat(2,1fr)} .p-thumb img{height:175px} }
@media(max-width:767px) {
    body{padding-bottom:80px} .hp{padding-bottom:24px !important} .hw{padding:0 12px !important} .hs{margin-bottom:22px !important}
    .hp-topbar{display:none !important} .header-bottom,.category-menu-area{display:none !important}
    .trust-strip{grid-template-columns:repeat(2,1fr);gap:10px} .trust-card{padding:12px 14px;gap:10px}
    .hero-wrap{grid-template-columns:1fr !important;gap:12px !important} .hero-main{border-radius:16px !important} .hero-slider .item img{height:190px !important}
    .hero-side{display:grid !important;grid-template-columns:1fr 1fr !important;gap:10px !important} .hero-side-box{border-radius:14px !important} .hero-side-box img{height:90px !important}
    .sec-title{font-size:16px !important} .deal-title{font-size:16px !important} .sec-btn{padding:8px 15px !important;font-size:12px !important}
    .cat-item{padding:14px 8px 12px !important;min-height:148px !important;border-radius:12px !important} .cat-img-bg{width:72px;height:72px} .cat-item img{width:44px !important;height:44px !important} .cat-item h4{font-size:11px !important}
    .p-card{border-radius:12px !important} .p-thumb{padding:10px !important} .p-thumb img{height:148px !important} .p-body{padding:10px 10px 8px !important} .p-name{font-size:12.5px !important;min-height:auto !important} .p-price-new{font-size:15px !important} .p-actions{padding:8px 8px 10px !important;gap:6px !important} .btn-now{height:38px !important;font-size:13px !important} .btn-cart-ic{width:38px !important;min-width:38px !important;height:38px !important;font-size:15px !important}
    .promo-box img{height:110px !important} .bd-swiper{padding-bottom:44px} .bd-nav{display:none !important}
    .hp{position:relative !important;z-index:1 !important} .ann-bar{position:relative !important;z-index:1 !important;overflow:hidden !important}
}
@media(max-width:480px) { .hero-slider .item img{height:165px !important} .hero-side-box img{height:80px !important} .cat-item{min-height:135px !important} .sec-title{font-size:14px !important} .trust-strip{grid-template-columns:repeat(2,1fr) !important} }