/* Fakabao shop s5 overrides */
body { background: url('/assets/fakabao/images/background.png') no-repeat #f7f7f7; background-size: cover; }
.main { width: 100%; max-width: 1200px; margin: 0 auto; background: transparent !important; }
.header { padding: 0px 0; background: transparent !important; height: auto !important; position: relative; }
.header .main { position: relative; background: transparent; }
.header .main::after { content: ""; display: block; clear: both; }
.shop_img { width: 60px; height: 60px; border-radius: 60px; background: #fff; vertical-align: top; border: 2px solid #EEE; }
.shop { display: inline-block; margin-left: 20px; }
.shop_title { font-size: 16px; font-weight: 700; color: #545454; margin: 5px 0 10px; }
.contact_info { font-size: 14px; color: #999; }
.right { float: none; position: static; margin-top: 0; }
.header-flex{ display:flex; align-items:center; justify-content:space-between; }
.header-flex .left{ display:flex; align-items:center; }
.header-flex .right{ display:flex; align-items:center; gap:12px; }
.rbtn1 { border: 1px solid #492DD9; background: #492DD9; color: #fff; font-size: 15px; border-radius: 20px; padding: 6px 15px; display: inline-block; margin-right: 10px; box-shadow: 0 5px 6px 0 rgba(73,45,217,.22); text-decoration: none }
.rbtn1:hover { background: #fff; color: #492DD9; }
.rbtn2 { border: 1px solid #E4E2FA; background: #E4E2FA; color: #492DD9; font-size: 15px; border-radius: 20px; padding: 6px 15px; display: inline-block; box-shadow: 0 5px 6px 0 rgba(73,45,217,.22); text-decoration: none }
.rbtn2:hover { background: #fff; color: #492DD9; }
.notice { margin-top: 20px; line-height: 25px; }
.ntitle { color: #545454; font-size: 14px; font-weight: 700; }
.ninfo { font-size: 12px; color: #515a6e; }

.box { background: #fff; border-radius: 10px; min-height: 100px; padding: 20px 30px; box-shadow: 0 7px 29px 0 rgba(18,52,91,.11); margin-top: 20px }
.btitle { color: #545454; font-size: 16px; font-weight: 700; display:flex; align-items:center }
.btitle img { margin-right: 7px; width: 17px; vertical-align: top; margin-top: 3px; }
.hr { height: 1px; background: #f1f1f1; margin: 20px 0 }

/* Unified panel container (homepage/buy) */
.s5-panel { background:#fff; border-radius:12px; padding:20px 24px; box-shadow:0 7px 29px 0 rgba(18,52,91,.11); margin-top:24px }
.s5-section { margin:0; }
.s5-divider { height:1px; background:#f1f1f1; margin:20px 0 }

/* Description block (for product details) */
.s5-desc { background:#f5f6f8; border:1px solid #f0f2f5; border-radius:8px; padding:12px 14px; color:#666; line-height:1.7; }
.s5-desc img { max-width:100%; height:auto; }

/* Mobile spacing tune */
@media (max-width: 575px){
  .s5-panel { padding:16px; border-radius:12px; margin-top:20px; }
  .s5-divider { margin:16px 0; }
  .btitle { margin-bottom:10px; }
  .header-flex { flex-direction: column; align-items: flex-start; gap:8px; }
  .header-flex .right { align-self: flex-end; }
}

/* Harmonize buy page blocks with s5 cards */
.main .main-box, .main-box { background:#fff; border-radius:10px; padding:20px 30px; box-shadow:0 7px 29px 0 rgba(18,52,91,.11); margin-top:20px }
.pay-title { color:#545454; font-size:16px; font-weight:700; display:flex; align-items:center; margin-bottom:10px }
.pay-title svg { margin-right:7px }

/* Intro button disabled state */
#intro-buy.disabled { opacity:.5; cursor:not-allowed }

/* Override Luna image box to avoid huge square */
.main-box .goods-img { margin: 10px 20px; width: auto; height: auto; padding-bottom: 0; position: relative; }
.main-box .goods-img img { width: 100%; max-width: 520px; height: auto; object-fit: contain; position: static; margin: 5px auto; display:block; box-shadow: 0 5px 6px 0 rgba(73, 105, 230, .12); }
@media (max-width: 767px){
  .main-box .goods-img img { max-width: 100%; }
}

@media (min-width: 768px){
  .sort_active { width: calc(25% - 10px); height:68px; border-radius:7px; background: url('/assets/fakabao/images/bg2.png'); color:#fff; padding:14px; display:inline-block; margin-right:10px; position:relative; overflow:hidden; box-sizing:border-box; box-shadow:0 5px 6px 0 rgba(73,45,217,.22); }
  .sort { width: calc(25% - 10px); height:68px; border-radius:7px; background:#f8f8f8; color:#333; padding:14px; display:inline-block; margin-right:10px; overflow:hidden; box-sizing:border-box; text-decoration:none }
  .product_active { width: calc(25% - 10px); height:68px; border-radius:7px; padding:14px; display:flex; align-items:center; gap:12px; margin-right:10px; position:relative; border:2px solid #492DD9; overflow:hidden; color:#492DD9; box-sizing:border-box; box-shadow:0 4px 10px 0 rgba(135,142,154,.14); }
  .product { width: calc(25% - 10px); height:68px; border-radius:7px; color:#333; padding:14px; display:flex; align-items:center; gap:12px; margin-right:10px; border:2px solid #f1f4fb; overflow:hidden; box-sizing:border-box; box-shadow:0 4px 10px 0 rgba(135,142,154,.14); }
}
@media (max-width: 767px){
  .sort_active { width: calc(50% - 10px); height:68px; border-radius:7px; background: url('/assets/fakabao/images/bg2.png'); color:#fff; padding:14px; display:inline-block; margin-right:10px; position:relative; overflow:hidden; box-sizing:border-box; box-shadow:0 5px 6px 0 rgba(73,45,217,.22); }
  .sort { width: calc(50% - 10px); height:68px; border-radius:7px; background:#f8f8f8; color:#333; padding:14px; display:inline-block; margin-right:10px; overflow:hidden; box-sizing:border-box; text-decoration:none }
  .product_active { width: 100%; height:68px; border-radius:7px; padding:14px; display:flex; align-items:center; gap:12px; margin-right:0; position:relative; border:2px solid #492DD9; overflow:hidden; color:#492DD9; box-sizing:border-box; box-shadow:0 4px 10px 0 rgba(135,142,154,.14); }
  .product { width: 100%; height:68px; border-radius:7px; color:#333; padding:14px; display:flex; align-items:center; gap:12px; margin-right:0; border:2px solid #f1f4fb; overflow:hidden; box-sizing:border-box; box-shadow:0 4px 10px 0 rgba(135,142,154,.14); }
}

.sort_active .fl_img { width:50px; position:absolute; right:-5px; bottom:-17px; }
.sort_title { font-size:14px; font-weight:700; margin-bottom:5px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.sort_info { font-size:12px; opacity:.6 }
.product_active .fl_img { width:20px; position:absolute; right:0; bottom:0; }

/* Layout tuning to show text beside picture */
.product, .product_active {
  position: relative;
  line-height: 1.2;
  margin-bottom:12px;
}
.product .s5-pic,
.product_active .s5-pic {
  flex:0 0 68px;
  width:68px;
  height:68px;
  margin:-14px 12px -14px -14px;
  border-radius:0;
  object-fit:cover;
  display:block;
}
.product:not(.product_active) .s5-pic {
  box-shadow:0 4px 10px rgba(135,142,154,.08);
}
.product_meta {
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  flex:1 1 auto;
  min-width:0;
}
.product_meta .product_title {
  margin:0;
  font-size:13px;
  font-weight:700;
  color:#333;
  line-height:1.3;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.product_meta .product_info {
  margin:0;
  font-weight:700;
  font-size:12px;
  color:#515a6e;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
}
.product_meta .price {
  color:#333;
}
.fl_img { pointer-events: none; }

/* Price + stock badges */
.stock-badge { display:inline-block; padding: 2px 6px; border-radius: 4px; font-weight: 700; font-size: 12px; line-height: 1.2; }
.stock-ok { background: #EAF7EA; color: #2e7d32; }
.stock-zero { background: #FFE8E8; color: #e53935; }
.stock-low { background: #FFF4E5; color: #ef6c00; }

/* Remove underline and unify link colors for product cards */
a.product, a.product_active { text-decoration: none; color: inherit; }
a.product:hover, a.product_active:hover { text-decoration: none; color: inherit; }
a.product:link, a.product:visited, a.product_active:link, a.product_active:visited { text-decoration: none; color: #333; }

/* Category grid layout – smart fit: prefers 4 per row, otherwise 2; allows smooth shrink */
#cate-list { display:grid; gap:16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items:stretch; }
/* Ensure large viewports keep 4 items in a row */
@media (min-width: 960px){
  #cate-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Override any legacy width to let grid control sizing */
#cate-list .sort, #cate-list .sort_active { width:auto !important; margin:0; }
@media (max-width: 767px){
  #cate-list { gap:10px; }
  #cate-list .sort, #cate-list .sort_active { height:60px; padding:12px; border-radius:10px; }
  #cate-list .sort_active .fl_img { width:32px; right:-2px; bottom:-8px; opacity:.65; }
}

/* Category badge styles */
.cate-badge { display:inline-block; padding: 2px 8px; border-radius: 999px; font-weight:700; font-size:12px; background:#E4E2FA; color:#492DD9; }
.sort_active .cate-badge { background: rgba(255,255,255,.28); color:#fff; }

/* Payway cards */
.payway-list { display:flex; flex-wrap:wrap; gap:10px; }
.payway-card { border:1px solid #f1f4fb; padding:10px 12px; border-radius:8px; display:inline-flex; align-items:center; cursor:pointer; user-select:none; background:#fff; }
.payway-card input { display:none; }
.payway-card img { width:20px; height:20px; margin-right:8px; }
.payway-card.active { border-color:#492DD9; color:#492DD9; box-shadow:0 4px 10px 0 rgba(73,45,217,.12); }

/* Responsive header actions */
@media (max-width: 575px){
  .header .right { position: static; margin-top: 8px; }
}

/* --- Buy page redesign styles (s5 look) --- */
.s5-buy-header{ display:flex; gap:16px; align-items:flex-start; }
.s5-buy-pic{ width:120px; height:120px; object-fit:cover; border-radius:8px; }
.s5-buy-meta{ flex:1 }
.s5-buy-name{ font-size:18px; font-weight:700; color:#333; margin:2px 0 6px }
.s5-buy-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px }
.s5-buy-price .curr{ font-size:20px; color:#492DD9 }
.s5-buy-price .retail{ opacity:.6; margin-left:8px }

.s5-form-row{ margin-top:12px }
.s5-form-row > label{ display:block; font-weight:600; color:#555; margin-bottom:6px }
.s5-input{ width:100%; background:#fcfcfc; border:1px solid #EEE; border-radius:6px; padding:10px 12px; outline:none }
.s5-inline{ display:inline-flex; gap:8px; align-items:center; background:transparent; border:0; }
.s5-inline .s5-captcha-input{ width:180px; flex:0 0 180px; }
.s5-inline img.captcha-img{ flex:0 0 auto; }
.s5-stepper{ display:inline-flex; align-items:center; gap:6px }
.s5-step{ border:1px solid #EEE; background:#fff; width:38px; height:38px; line-height:36px; border-radius:6px; text-align:center; }
.s5-amount{ max-width:120px; text-align:center }

.s5-form-actions{ display:flex; justify-content:space-between; align-items:center; margin-top:14px }
.s5-total-text{ color:#333 }
.s5-btn-primary{ border:1px solid #492DD9; background:#492DD9; color:#fff; font-size:15px; border-radius:8px; padding:8px 16px; display:inline-block; box-shadow:0 5px 6px 0 rgba(73,45,217,.22); cursor:pointer }
.s5-btn-primary:hover{ background:#fff; color:#492DD9 }

@media (max-width: 767px){
  .s5-buy-pic{ width:100px; height:100px }
}

@media (max-width: 575px){
  .s5-inline .s5-captcha-input{ width:120px; flex:0 0 120px; }
}