/* ================================================================
   BINNDU — home-page.css
   ================================================================ */
:root {
  --bp: #5C1E3A;
  --bp-d: #4a1830;
  --bp-l: #f5e6ed;
  --bp-ll: #fdf2f6;
}

.bp-container { width:100%; max-width:1400px; margin:0 auto; padding:0 24px; }

.bp-section { padding:64px 0; }
.bp-section--gray { background:#f8f9fa; }
.bp-section--dark { background:#1a1a2e; }

/* Tags */
.bp-tag { display:inline-block; padding:4px 14px; background:var(--bp-l); color:var(--bp); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; border-radius:20px; }
.bp-tag--white { background:rgba(255,255,255,.2); color:#fff; }

/* Section heads */
.bp-section-head { text-align:center; margin-bottom:40px; }
.bp-section-head h2 { font-size:clamp(22px,3vw,32px); font-weight:800; color:#111827; margin:8px 0 10px; }
.bp-section-head p { font-size:15px; color:#6b7280; }

.bp-section-head-row { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:28px; }
.bp-section-head-row h2 { font-size:clamp(20px,2.5vw,28px); font-weight:800; color:#111827; margin:6px 0 0; }

.bp-view-all { display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:700; color:var(--bp); text-decoration:none; flex-shrink:0; }
.bp-view-all:hover { color:var(--bp-d); }

/* Buttons */
.bp-btn-primary { display:inline-flex; align-items:center; gap:8px; background:var(--bp); color:#fff; font-size:15px; font-weight:700; padding:13px 26px; border-radius:10px; text-decoration:none; transition:all .2s; border:2px solid var(--bp); }
.bp-btn-primary:hover { background:var(--bp-d); color:#fff; transform:translateY(-1px); }
.bp-btn-outline  { display:inline-flex; align-items:center; gap:8px; background:transparent; color:var(--bp); font-size:15px; font-weight:700; padding:13px 26px; border-radius:10px; text-decoration:none; border:2px solid var(--bp); transition:all .2s; }
.bp-btn-outline:hover { background:var(--bp); color:#fff; }
.bp-btn-white    { display:inline-flex; align-items:center; gap:8px; background:#fff; color:var(--bp); font-size:15px; font-weight:700; padding:13px 26px; border-radius:10px; text-decoration:none; border:2px solid #fff; transition:all .2s; }
.bp-btn-white:hover { background:transparent; color:#fff; }

/* ══ 1. HERO ══ */
.bp-hero { display:grid; grid-template-columns:1fr 1fr; min-height:540px; background:linear-gradient(135deg,var(--bp-ll) 0%,#fff 70%); }

.bp-hero__left { display:flex; flex-direction:column; justify-content:center; padding:56px 40px 56px 24px; max-width:580px; margin-left:auto; }
.bp-hero__title { font-size:clamp(26px,4vw,50px); font-weight:900; color:#111827; line-height:1.15; margin:14px 0 16px; letter-spacing:-.5px; }
.bp-hero__sub { font-size:15px; color:#6b7280; line-height:1.7; margin-bottom:28px; }
.bp-hero__btns { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:36px; }
.bp-hero__stats { display:flex; align-items:center; gap:20px; padding-top:24px; border-top:1px solid #e5e7eb; }
.bp-hero__stat strong { display:block; font-size:20px; font-weight:800; color:var(--bp); }
.bp-hero__stat span { font-size:12px; color:#6b7280; }
.bp-hero__stat-sep { width:1px; height:28px; background:#e5e7eb; }

.bp-hero__right { position:relative; background:var(--bp-l); overflow:hidden; min-height:400px; }

.bp-hero__card { position:absolute; background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 10px 32px rgba(0,0,0,.14); text-decoration:none; transition:transform .3s; }
.bp-hero__card:hover { transform:translateY(-4px); }
.bp-hero__card img { display:block; object-fit:cover; }
.bp-hero__card--one   { top:32px;  left:24px;  width:140px; }
.bp-hero__card--one   img { width:140px; height:150px; }
.bp-hero__card--two   { top:60px;  right:32px; width:150px; }
.bp-hero__card--two   img { width:150px; height:160px; }
.bp-hero__card--three { bottom:40px; left:60px; width:138px; }
.bp-hero__card--three img { width:138px; height:148px; }
.bp-hero__card-info { padding:9px 12px; }
.bp-hero__card-info span { font-size:11px; color:#374151; font-weight:600;}
.bp-hero__card-info strong { font-size:12px; color:var(--bp); display:block; margin-top:2px; }

.bp-hero__float { position:absolute; background:#fff; color:var(--bp); font-size:12px; font-weight:700; padding:7px 14px; border-radius:20px; box-shadow:0 4px 14px rgba(0,0,0,.12); animation:bpFloat 3s ease-in-out infinite; }
.bp-hero__float--1 { bottom:28px; right:18px; }
.bp-hero__float--2 { top:20px; left:18px; animation-delay:1.5s; }
@keyframes bpFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

@media(max-width:900px) { .bp-hero{grid-template-columns:1fr} .bp-hero__left{padding:44px 20px 32px;margin:0;max-width:100%} .bp-hero__right{display:none} }

/* ══ 2. TRUST BAR ══ */
.bp-trust-bar { display:grid; grid-template-columns:repeat(4,1fr); background:var(--bp); }
.bp-trust-item { display:flex; align-items:center; gap:12px; padding:18px 20px; border-right:1px solid rgba(255,255,255,.15); }
.bp-trust-item:last-child { border-right:none; }
.bp-trust-item>span { font-size:22px; flex-shrink:0; }
.bp-trust-item strong { display:block; font-size:13px; font-weight:700; color:#fff; }
.bp-trust-item span:not(:first-child) { font-size:12px; color:rgba(255,255,255,.75); }
@media(max-width:768px){ .bp-trust-bar{grid-template-columns:repeat(2,1fr)} .bp-trust-item{border-bottom:1px solid rgba(255,255,255,.15)} }
@media(max-width:480px){ .bp-trust-bar{grid-template-columns:1fr} }

/* ══ 3. CATEGORIES ══ */
.bp-cats-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:20px; }
@media(max-width:900px){ .bp-cats-grid{grid-template-columns:repeat(3,1fr)} }
@media(max-width:600px){ .bp-cats-grid{grid-template-columns:repeat(2,1fr);gap:12px} }

.bp-cat-card { border-radius:14px; overflow:hidden; text-decoration:none; border:1px solid #e5e7eb; background:#fff; transition:all .25s; display:block; }
.bp-cat-card:hover { transform:translateY(-4px); box-shadow:0 10px 28px rgba(0,0,0,.1); border-color:var(--bp); }
.bp-cat-img { aspect-ratio:4/5; overflow:hidden; background:var(--bp-l); }
.bp-cat-img img { width:100%; height:100%; object-fit:cover; transition:transform .35s; display:block; }
.bp-cat-card:hover .bp-cat-img img { transform:scale(1.06); }
.bp-cat-body { padding:12px 14px; display:flex; align-items:center; justify-content:space-between; }
.bp-cat-body h3 { font-size:13px; font-weight:700; color:#111827; margin:0; }
.bp-cat-body span { font-size:12px; color:#6b7280; }

/* ══ 4 & 6. PRODUCT CARDS + SLIDER ══ */
.bp-slider-wrap { position:relative; }
.bp-slider { display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none; padding:4px 2px 8px; }
.bp-slider::-webkit-scrollbar { display:none; }

.bp-prod-card { min-width:210px; max-width:210px; scroll-snap-align:start; flex-shrink:0; background:#fff; border:1px solid #e5e7eb; border-radius:14px; overflow:hidden; transition:all .25s; position:relative; }
.bp-prod-card:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.1); border-color:var(--bp-l); }

.bp-prod-badge { position:absolute; top:10px; left:10px; z-index:2; background:var(--bp); color:#fff; font-size:10px; font-weight:700; padding:3px 9px; border-radius:12px; }
.bp-prod-badge--new { background:#22c55e; }

.bp-prod-img { display:block; aspect-ratio:3/4; overflow:hidden; background:var(--bp-ll); }
.bp-prod-img img { width:100%; height:100%; object-fit:cover; transition:transform .35s; display:block; }
.bp-prod-card:hover .bp-prod-img img { transform:scale(1.05); }

.bp-prod-body { padding:12px; }
.bp-prod-cats { font-size:10px; font-weight:700; color:var(--bp); text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bp-prod-name { display:block; font-size:13px; font-weight:600; color:#111827; text-decoration:none; line-height:1.4; margin-bottom:8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.bp-prod-name:hover { color:var(--bp); }
.bp-prod-price { font-size:15px; font-weight:800; color:var(--bp); margin-bottom:10px; }
.bp-prod-price del { font-size:12px; color:#9ca3af; font-weight:400; margin-right:4px; }
.bp-prod-price ins { text-decoration:none; }

.bp-prod-atc { display:block; width:100%; padding:9px; background:var(--bp); color:#fff; font-size:13px; font-weight:700; border:none; border-radius:8px; cursor:pointer; text-align:center; text-decoration:none; transition:background .2s; }
.bp-prod-atc:hover { background:var(--bp-d); color:#fff; }
.bp-prod-atc:disabled { background:#d1d5db; cursor:not-allowed; }

/* Arrows */
.bp-arrow { width:38px; height:38px; background:#fff; border:1.5px solid #e5e7eb; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .2s; box-shadow:0 2px 10px rgba(0,0,0,.08); color:#374151; position:absolute; top:38%; transform:translateY(-50%); z-index:5; }
.bp-arrow--left  { left:-16px; }
.bp-arrow--right { right:-16px; }
.bp-arrow:hover  { border-color:var(--bp); color:var(--bp); }
.bp-arrow--white { position:static; transform:none; background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.3); color:#fff; }
.bp-arrow--white:hover { background:#fff; color:var(--bp); }
@media(max-width:600px){ .bp-arrow--left{left:-6px} .bp-arrow--right{right:-6px} }

/* ══ 5. BANNER ══ */
.bp-banner { position:relative; padding:80px 24px; background:linear-gradient(135deg,var(--bp) 0%,#8b2252 100%); background-size:cover; background-position:center; text-align:center; overflow:hidden; }
.bp-banner__overlay { position:absolute; inset:0; background:rgba(92,30,58,.82); }
.bp-banner__content { position:relative; z-index:2; max-width:580px; margin:0 auto; }
.bp-banner__content h2 { font-size:clamp(22px,4vw,40px); font-weight:900; color:#fff; margin:12px 0 12px; line-height:1.2; }
.bp-banner__content p { font-size:15px; color:rgba(255,255,255,.85); margin-bottom:26px; }

/* ══ 7. REVIEWS ══ */
.bp-reviews-row { display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding:4px 2px 8px; }
.bp-reviews-row::-webkit-scrollbar { display:none; }

.bp-review-card { min-width:280px; max-width:280px; scroll-snap-align:start; flex-shrink:0; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:22px; }
.bp-review-stars { font-size:16px; color:#f59e0b; margin-bottom:10px; letter-spacing:2px; }
.bp-review-text { font-size:13px; color:rgba(255,255,255,.82); line-height:1.7; margin-bottom:18px; font-style:italic; }
.bp-review-author { display:flex; align-items:center; gap:10px; }
.bp-review-author img { width:38px; height:38px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,.25); }
.bp-review-author strong { display:block; font-size:13px; font-weight:700; color:#fff; }
.bp-review-author span { font-size:11px; color:rgba(255,255,255,.55); }

/* ══ 8. STRIP ══ */
.bp-strip { display:grid; grid-template-columns:repeat(6,1fr); }
@media(max-width:900px){ .bp-strip{grid-template-columns:repeat(3,1fr)} }
@media(max-width:480px){ .bp-strip{grid-template-columns:repeat(2,1fr)} }

.bp-strip-item { position:relative; aspect-ratio:1; overflow:hidden; display:block; }
.bp-strip-item img { width:100%; height:100%; object-fit:cover; transition:transform .35s; display:block; }
.bp-strip-item:hover img { transform:scale(1.08); }
.bp-strip-overlay { position:absolute; inset:0; background:rgba(92,30,58,.5); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .25s; }
.bp-strip-overlay span { color:#fff; font-size:13px; font-weight:700; background:rgba(0,0,0,.3); padding:6px 16px; border-radius:20px; }
.bp-strip-item:hover .bp-strip-overlay { opacity:1; }

/* ══ Mobile ══ */
@media(max-width:600px){
    .bp-prod-card { min-width:165px; max-width:165px; }
    .bp-review-card { min-width:250px; max-width:250px; }
    .bp-section { padding:48px 0; }
    .bp-container { padding:0 16px; }
}