/**
 * Rekhi Featured Products — Frontend CSS
 * Dynamic tabs + product card grid. ALL colors via CSS custom props.
 * No hardcoded colors — uses var(--rekhi-accent), var(--rekhi-accent-rgb), var(--rekhi-accent-light).
 */
.rekhi-fp-container{--rekhi-accent:#ff6600;--rekhi-accent-rgb:255,102,0;--rekhi-accent-light:#ffaa33;--rekhi-bg:#0a0a0a;--rekhi-text:#fff;--rekhi-subtitle:#aaa;--fp-glass-bg:rgba(255,255,255,0.05);--fp-glass-border:rgba(var(--rekhi-accent-rgb),0.15);--fp-font:'Inter',system-ui,-apple-system,sans-serif;width:100%;max-width:1280px;margin:0 auto;padding:50px 20px;box-sizing:border-box;font-family:var(--fp-font);color:var(--rekhi-text)}
.rekhi-fp-header{text-align:center;margin-bottom:40px}
.rekhi-fp-title{font-size:2.6rem;font-weight:700;margin:0 0 14px;background:linear-gradient(90deg,var(--rekhi-text),var(--rekhi-accent),var(--rekhi-text));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.rekhi-fp-subtitle{font-size:1.15rem;color:var(--rekhi-subtitle);font-weight:400;margin:0}

/* Tab navigation */
.rekhi-fp-tabs-nav{display:flex;gap:4px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07);border-radius:14px;padding:5px;margin-bottom:28px;flex-wrap:wrap;justify-content:center}
.rekhi-fp-tab-btn{flex:1;min-width:110px;padding:10px 18px;border:none;background:transparent;color:var(--rekhi-subtitle);font-size:0.88rem;font-weight:600;cursor:pointer;border-radius:10px;transition:all .25s;font-family:inherit;white-space:nowrap}
.rekhi-fp-tab-btn:hover{color:var(--rekhi-text);background:rgba(255,255,255,0.04)}
.rekhi-fp-tab-btn.active{background:rgba(var(--rekhi-accent-rgb),0.12);color:var(--rekhi-accent);box-shadow:0 2px 8px rgba(var(--rekhi-accent-rgb),0.1)}
.rekhi-fp-tab-btn.active:hover{background:rgba(var(--rekhi-accent-rgb),0.18)}

/* Tab panels */
.rekhi-fp-tab-panel{display:none}
.rekhi-fp-tab-panel.active{display:block}

/* Category carousel */
.rekhi-fp-carousel{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px}
.rekhi-fp-carousel-viewport{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.rekhi-fp-carousel-track{display:flex;gap:16px;padding:4px 2px 12px}
.rekhi-fp-carousel-btn{width:42px;height:42px;border-radius:50%;border:1px solid rgba(var(--rekhi-accent-rgb),0.35);background:rgba(var(--rekhi-accent-rgb),0.12);color:var(--rekhi-accent);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s}
.rekhi-fp-carousel-btn:hover{background:rgba(var(--rekhi-accent-rgb),0.22);border-color:var(--rekhi-accent)}
.rekhi-fp-card{flex:0 0 min(260px,78vw);scroll-snap-align:start;opacity:0;transform:translateY(20px);transition:all .4s cubic-bezier(.25,.1,.25,1)}
.rekhi-fp-card.active{opacity:1;transform:translateY(0)}
.rekhi-fp-empty{text-align:center;color:var(--rekhi-subtitle);padding:28px 16px;border:1px dashed rgba(var(--rekhi-accent-rgb),0.25);border-radius:14px}
.rekhi-fp-mode-hint{margin:10px 0 0;text-align:center;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--rekhi-subtitle);opacity:.8}
.rekhi-fp-card-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:auto}
.rekhi-fp-view{display:inline-flex;align-items:center;padding:9px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.14);color:var(--rekhi-text);text-decoration:none;font-size:.8rem;font-weight:600}
.rekhi-fp-view:hover{border-color:var(--rekhi-accent);color:var(--rekhi-accent)}

/* Glass card */
.rekhi-fp-glass{background:var(--fp-glass-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--fp-glass-border);border-radius:20px;padding:22px 18px 20px;box-shadow:0 6px 28px rgba(0,0,0,.32);transition:border-color .3s,box-shadow .3s;display:flex;flex-direction:column;align-items:center;text-align:center;height:100%;min-height:330px;box-sizing:border-box}
.rekhi-fp-glass:hover{border-color:var(--rekhi-accent);box-shadow:0 0 36px rgba(var(--rekhi-accent-rgb),0.15)}

/* Image / placeholder */
.rekhi-fp-img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;margin-bottom:14px}
.rekhi-fp-img-placeholder{width:100%;aspect-ratio:4/3;background:rgba(var(--rekhi-accent-rgb),0.06);border:1px dashed rgba(var(--rekhi-accent-rgb),0.15);border-radius:12px;margin-bottom:14px;display:flex;align-items:center;justify-content:center;font-size:2rem;color:var(--rekhi-accent)}

/* Card text */
.rekhi-fp-card-title{font-size:1rem;font-weight:700;color:var(--rekhi-text);margin:0 0 4px;line-height:1.25}
.rekhi-fp-card-subtitle{font-size:.8rem;color:var(--rekhi-subtitle);margin:0 0 12px;line-height:1.35}

/* Specs row */
.rekhi-fp-specs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-bottom:14px}
.rekhi-fp-spec{font-size:.72rem;background:rgba(var(--rekhi-accent-rgb),0.06);border:1px solid rgba(var(--rekhi-accent-rgb),0.1);padding:3px 8px;border-radius:6px;color:var(--rekhi-subtitle)}
.rekhi-fp-spec strong{color:var(--rekhi-text)}

/* RFQ button */
.rekhi-fp-rfq{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding:9px 18px;background:var(--rekhi-accent);color:#fff;border-radius:10px;font-weight:700;font-size:.82rem;text-decoration:none;transition:all .25s;box-shadow:0 3px 16px rgba(var(--rekhi-accent-rgb),0.25)}
.rekhi-fp-rfq:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(var(--rekhi-accent-rgb),0.4)}
.rekhi-fp-rfq i{transition:transform .25s}
.rekhi-fp-rfq:hover i{transform:translateX(3px)}

@media(max-width:750px){.rekhi-fp-title{font-size:2rem}.rekhi-fp-carousel{grid-template-columns:1fr;gap:8px}.rekhi-fp-carousel-btn{justify-self:center}}
@media(max-width:480px){.rekhi-fp-title{font-size:1.6rem}.rekhi-fp-tab-btn{flex:none;font-size:.78rem;padding:8px 12px}}
@media(prefers-reduced-motion:reduce){.rekhi-fp-card{transition:opacity .1s;transform:none}}
