:root{
  --fx-navy:#152c61;
  --fx-navy-dark:#0e1e45;
  --fx-orange:#f5821f;
  --fx-orange-dark:#d96c10;
  --fx-gray:#6b7280;
  --fx-bg:#f7f8fb;
  --fx-radius:14px;
}

/* ---------- Product Tabs (after hero) ---------- */
.fx-tabs-sec{
  background:var(--fx-bg);
  padding:50px 0 60px;
}

.fx-tabs-sec .fx-tabs-title{
  text-align:center;
  color:var(--fx-navy);
  font-weight:700;
  font-size:clamp(1.4rem,3vw,2rem);
  margin-bottom:8px;
}

.fx-tabs-sec .fx-tabs-sub{
  text-align:center;
  color:var(--fx-gray);
  margin-bottom:34px;
  font-size:.98rem;
}

.fx-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  justify-content:center;
}

.fx-tab{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:180px;
  min-height:150px;
  padding:22px 14px;
  background:#fff;
  border:1px solid #eceef3;
  border-radius:var(--fx-radius);
  text-decoration:none;
  color:var(--fx-navy);
  font-weight:600;
  font-size:.98rem;
  box-shadow:0 3px 10px rgba(21,44,97,.06);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}

.fx-tab i{
  font-size:1.7rem;
  width:56px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--fx-bg);
  color:var(--fx-orange);
  transition:background .2s ease, color .2s ease;
}

.fx-tab:hover,
.fx-tab:focus{
  transform:translateY(-6px);
  color:#fff;
  background:var(--fx-navy);
  box-shadow:0 12px 22px rgba(21,44,97,.22);
  text-decoration:none;
}

.fx-tab:hover i,
.fx-tab:focus i{
  background:var(--fx-orange);
  color:#fff;
}

@media (max-width:576px){
  .fx-tab{ width:47%; min-height:130px; padding:16px 10px; }
  .fx-tab i{ width:46px; height:46px; font-size:1.4rem; }
}

/* ---------- Product Page Header ---------- */
.fx-prod-hero{
  background:var(--fx-navy);
  padding-top:120px;
  padding-bottom: 30px;
  color:#fff;
}

.fx-prod-hero .fx-crumb{
  color:#c9d2ea;
  font-size:.85rem;
  margin-bottom:6px;
}

.fx-prod-hero .fx-crumb a{
  color:#c9d2ea;
  text-decoration:none;
}

.fx-prod-hero .fx-crumb a:hover{ color:var(--fx-orange); }

.fx-prod-hero h1{
  font-weight:700;
  font-size:clamp(1.5rem,3.2vw,2.2rem);
  margin:0;
}

.fx-prod-hero p{
  margin:6px 0 0;
  color:#d7ddf0;
  font-size:.95rem;
}

/* ---------- Category quick switch on product page ---------- */
.fx-cat-strip{
  background:#fff;
  border-bottom:1px solid #eceef3;
  padding:14px 0;
  position:sticky;
  top:0;
  z-index:20;
}

.fx-cat-strip .fx-cat-scroll{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding-bottom:2px;
}

.fx-cat-strip .fx-cat-scroll::-webkit-scrollbar{ height:5px; }
.fx-cat-strip .fx-cat-scroll::-webkit-scrollbar-thumb{ background:#e3e6ee; border-radius:10px; }

.fx-cat-pill{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 18px;
  border-radius:30px;
  background:var(--fx-bg);
  color:var(--fx-navy);
  font-size:.88rem;
  font-weight:600;
  text-decoration:none;
  white-space:nowrap;
  border:1px solid transparent;
}

.fx-cat-pill i{ color:var(--fx-orange); font-size:.9rem; }

.fx-cat-pill.fx-active,
.fx-cat-pill:hover{
  background:var(--fx-orange);
  color:#fff;
  text-decoration:none;
}

.fx-cat-pill.fx-active i,
.fx-cat-pill:hover i{ color:#fff; }

/* ---------- Product Grid / Cards ---------- */
.fx-prod-sec{ padding:44px 0 70px; background:var(--fx-bg); }

.fx-prod-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}

@media (max-width:1199px){ .fx-prod-grid{ grid-template-columns:repeat(3,1fr);} }
@media (max-width:860px){ .fx-prod-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .fx-prod-grid{ grid-template-columns:1fr;} }

.fx-card{
  background:#fff;
  border-radius:var(--fx-radius);
  overflow:hidden;
  border:1px solid #eceef3;
  box-shadow:0 4px 14px rgba(21,44,97,.06);
  display:flex;
  flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
}

.fx-card:hover{
  transform:translateY(-5px);
  box-shadow:0 14px 26px rgba(21,44,97,.14);
}

.fx-card-thumb{
  height:180px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--fx-navy);
  position:relative;
  overflow:hidden;
}

/* real product image */
.fx-card-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* fallback icon (used if no image is provided) */
.fx-card-thumb i{
  font-size:2.6rem;
  color:var(--fx-orange);
}

.fx-card-badge{
  position:absolute;
  top:10px;
  left:10px;
  background:var(--fx-orange);
  color:#fff;
  font-size:.7rem;
  font-weight:700;
  padding:4px 10px;
  border-radius:20px;
  text-transform:uppercase;
  letter-spacing:.4px;
}

.fx-card-body{
  padding:16px 16px 18px;
  display:flex;
  flex-direction:column;
  flex:1;
}

.fx-card-body h3{
  font-size:1rem;
  font-weight:700;
  color:var(--fx-navy);
  margin:0 0 6px;
}

.fx-card-body p{
  font-size:.85rem;
  color:var(--fx-gray);
  margin:0 0 14px;
  flex:1;
}

.fx-card-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.fx-price{
  font-weight:700;
  color:var(--fx-navy);
  font-size:1.05rem;
}

.fx-price span{
  font-size:.8rem;
  color:#b3bacb;
  text-decoration:line-through;
  font-weight:500;
  margin-left:6px;
}

.fx-buy-btn{
  border:none;
  background:var(--fx-orange);
  color:#fff;
  font-weight:600;
  font-size:.85rem;
  padding:9px 16px;
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  transition:background .2s ease;
}

.fx-buy-btn:hover{ background:var(--fx-orange-dark); color:#fff; }

/* ---------- Buy Now Modal / Form ---------- */
.fx-modal .modal-content{
  border-radius:var(--fx-radius);
  border:none;
  overflow:hidden;
}

.fx-modal .modal-header{
  background:var(--fx-navy);
  color:#fff;
  border:none;
}

.fx-modal .modal-header .btn-close{ filter:invert(1); }

.fx-modal .fx-modal-product{
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--fx-bg);
  padding:12px 16px;
  border-radius:10px;
  margin-bottom:18px;
}

.fx-modal .fx-modal-product i{
  font-size:1.5rem;
  color:var(--fx-orange);
}

.fx-form-label{
  font-size:.85rem;
  font-weight:600;
  color:var(--fx-navy);
  margin-bottom:5px;
}

.fx-form-control{
  border-radius:8px;
  border:1px solid #dde1ec;
  padding:10px 12px;
  font-size:.9rem;
}

.fx-form-control:focus{
  border-color:var(--fx-orange);
  box-shadow:0 0 0 .18rem rgba(245,130,31,.18);
}

.fx-submit-btn{
  width:100%;
  border:none;
  background:var(--fx-orange);
  color:#fff;
  font-weight:700;
  padding:12px;
  border-radius:9px;
  font-size:.95rem;
  transition:background .2s ease;
}

.fx-submit-btn:hover{ background:var(--fx-orange-dark); }

.fx-success{
  text-align:center;
  padding:20px 10px 6px;
}

.fx-success i{
  font-size:3rem;
  color:#22a559;
  margin-bottom:12px;
}

.fx-success h4{
  color:var(--fx-navy);
  font-weight:700;
  margin-bottom:6px;
}

.fx-success p{ color:var(--fx-gray); font-size:.9rem; }