/* =========================
   QingJi Printing - Minimal Brand UI
   Bootstrap 5 Compatible
   ========================= */

:root{
  --qj-bg:#ffffff;
  --qj-bg-soft:#fafafa;
  --qj-nav:#f3f3f3;
  --qj-border:#e6e6e6;

  --qj-text:#111111;
  --qj-muted:#4b5563;

  --qj-primary:#2f6f4e;
  --qj-primary-2:#4f8f6b;

  --qj-radius:18px;
  --qj-shadow: 0 10px 28px rgba(0,0,0,.08);
  --qj-shadow-soft: 0 6px 18px rgba(0,0,0,.06);
}

html,body{
  height:100%;
  font-size:18px;
}
/* Global typography: Microsoft JhengHei, minimum 18px */
body, button, input, select, textarea,
table, .table, .btn, .form-control, .form-select,
p, li, a, span, small, label, td, th,
.small, .small-muted, .text-muted, .lead, .kicker,
.badge, .list-group-item, .card-body, .footer {
  font-family: "Microsoft JhengHei", "微軟正黑體", Arial, sans-serif;
  font-size:18px;
  line-height:1.75;
}


body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: "Microsoft JhengHei", "微軟正黑體", Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 1px;
  color: #555;
}

/* Sticky Footer */
.site-main{ flex:1 0 auto; }
footer.footer{ margin-top:auto; flex-shrink:0; }

/* =========================
   Navbar (UNIQLO-like)
   ========================= */
.navbar-qj{
  background:var(--qj-nav);
  border-bottom:1px solid var(--qj-border);
  transition: padding .18s ease, box-shadow .18s ease, background .18s ease;
  padding: 18px 0;
}

.navbar-qj .navbar-brand{
  font-weight:800;
  letter-spacing:1.2px;
  color:#111 !important;
}

.navbar-qj .nav-link{
  color:#333 !important;
  font-weight:600;
  font-size:18px;
  font-family: "Microsoft JhengHei", "微軟正黑體", Arial, sans-serif;
  padding: .45rem .8rem;
}

.navbar-qj .nav-link:hover{
  color:#000 !important;
}

.navbar-qj .nav-link.active{
  color:#000 !important;
}

.navbar-qj .icon-btn{
  width:40px;
  height:40px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  color:#111;
  text-decoration:none;
  transition: transform .12s ease, box-shadow .12s ease;
}

.navbar-qj .icon-btn:hover{
  box-shadow: var(--qj-shadow-soft);
  transform: translateY(-1px);
}

.navbar-qj.is-scrolled{
  padding: 10px 0;
  background: rgba(243,243,243,.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 18px rgba(0,0,0,.10);
}

/* =========================
   Hero
   ========================= */
.hero{
  background: linear-gradient(180deg, var(--qj-bg-soft), #fff);
  padding: 64px 0 40px;
}

.hero .kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:6px 12px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--qj-border);
  color:#111;
  font-size:18px;
}

.hero h1{
  font-weight:900;
  letter-spacing:.6px;
  line-height:1.15;
}

.hero .lead{
  color:var(--qj-muted);
  line-height:1.75;
}

.hero-card{
  background:#fff;
  border:1px solid var(--qj-border);
  border-radius: var(--qj-radius);
  box-shadow: var(--qj-shadow-soft);
}

.kv-img{
  width:100%;
  aspect-ratio: 16 / 10;
  height: clamp(260px, 32vw, 430px);
  object-fit: cover;
  border-radius: var(--qj-radius);
  box-shadow: var(--qj-shadow);
}

/* =========================
   Buttons
   ========================= */
.btn-qj{
  border-radius: 999px;
  padding: .85rem 1.2rem;
  font-weight:700;
  letter-spacing:0;
}

.btn-qj-primary{
  background:#2f6f4e;
  border-color:#2f6f4e;
  color:#fff;
  box-shadow: 0 8px 18px rgba(47,111,78,.18);
}

.btn-qj-primary:hover{
  background:#255d40;
  border-color:#255d40;
  color:#fff;
}

.btn-qj-outline{
  background:#fff;
  border:1px solid #b8d9c7;
  color:#285b42;
}

.btn-qj-outline:hover{
  background:#eef8f2;
  border-color:#8fc0a4;
  color:#1f4b36;
}

/* =========================
   Sections & Cards
   ========================= */
.section{
  padding: 64px 0;
}

.section-title{
  font-weight:900;
  letter-spacing:.4px;
}

.small-muted{
  color:var(--qj-muted);
  font-size:18px;
}

.card-soft{
  border:1px solid var(--qj-border);
  border-radius: var(--qj-radius);
  box-shadow: var(--qj-shadow-soft);
  transition: transform .16s ease, box-shadow .16s ease;
  overflow:hidden;
  background:#fff;
}

.card-soft:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 35px rgba(0,0,0,.10);
}

.card-img-top{
  width:100%;
  aspect-ratio: 3 / 2;
  height: 220px;
  object-fit: cover;
}

.meta-list{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
}

.meta-item{
  padding: 12px 12px;
  border:1px solid var(--qj-border);
  border-radius: 14px;
  background:#fff;
}
.meta-item .t{
  font-size:18px;
  color:var(--qj-muted);
  margin-bottom:6px;
}
.meta-item .v{
  font-weight:800;
  color:#111;
}

/* =========================
   Footer
   ========================= */
.footer{
  background:#111;
  color:rgba(255,255,255,.82);
  font-size:18px;
}

.footer a{
  color:rgba(255,255,255,.88);
  text-decoration:none;
}
.footer a:hover{ text-decoration: underline; }

/* =========================
   RWD
   ========================= */
@media (max-width: 992px){
  .navbar-qj .nav-link{ padding:.6rem .75rem; }
  .meta-list{ grid-template-columns: 1fr; }
  .hero{ padding: 44px 0 30px; }
}

@media (max-width: 576px){
  .btn-qj{ width:100%; }
}
/* Product category sidebar readability */
.product-category-list .list-group-item {
  color: var(--qj-text);
}

.product-category-list .list-group-item .small-muted {
  color: var(--qj-muted);
}

.product-category-list .list-group-item.active {
  background: #e8f4ee;
  border-color: #b8d9c7;
  color: #123f2a;
}

.product-category-list .list-group-item.active .small-muted,
.product-category-list .list-group-item.active small {
  color: #355a47;
}

.product-category-list .list-group-item.active .badge {
  background: #fff !important;
  color: #123f2a !important;
}
/* Ensure product action links stay clickable above card effects */
.product-actions,
.product-actions .btn {
  position: relative;
  z-index: 5;
  cursor: pointer;
}
/* Tighter spacing between page title and first content section */
.site-main > header.bg-white {
  padding-top: 42px !important;
  padding-bottom: 18px !important;
}

.site-main > header.bg-white + .section {
  padding-top: 24px;
}

@media (max-width: 576px) {
  .site-main > header.bg-white {
    padding-top: 32px !important;
    padding-bottom: 14px !important;
  }

  .site-main > header.bg-white + .section {
    padding-top: 18px;
  }
}
.qj-brand-logo{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:44px;
}

.qj-brand-logo img{
  width:44px;
  height:44px;
  object-fit:contain;
  display:block;
  background:#fff;
}

.qj-brand-logo span{
  line-height:1;

}

@media (max-width: 576px){
  .qj-brand-logo img{
    width:38px;
    height:38px;
  }
}
/* Force compact logo size in navbar */
.navbar-qj .qj-brand-logo{
  display:inline-flex !important;
  align-items:center;
  gap:8px;
  min-height:48px;
}

.navbar-qj .qj-brand-logo img{
  width:48px !important;
  height:48px !important;
  max-width:48px !important;
  max-height:48px !important;
  object-fit:contain;
  display:block;
}

.navbar-qj .qj-brand-logo span{
  font-family: "Microsoft JhengHei", "微軟正黑體", Arial, sans-serif;
  font-size:24px;
  font-weight:700;
  line-height:1;
}
.navbar-qj,
.navbar-qj *:not(svg):not(path) {
  font-family: "Microsoft JhengHei", "微軟正黑體", Arial, sans-serif !important;
}

@media (max-width: 576px){
  .navbar-qj .qj-brand-logo img{
    width:38px !important;
    height:38px !important;
    max-width:38px !important;
    max-height:38px !important;
  }
  .navbar-qj .qj-brand-logo span{
    font-size:18px;
  }
}
/* FontAwesome icon font preservation */
.fa, .fa:before, .fa:after,
[class^="fa-"], [class*=" fa-"] {
  font-family: FontAwesome !important;
}

/* Transparent navbar logo */
.qj-brand-logo img,
.navbar-qj .qj-brand-logo img {
  background: transparent !important;
}

/* Codex text clarity tuning */
body {
  letter-spacing: 0 !important;
  text-rendering: geometricPrecision;
}

.small-muted,
.hero .lead,
.section .small-muted,
.card-soft .small-muted,
.meta-item .t,
.product-category-list .list-group-item .small-muted {
  color: #4b5563 !important;
  font-weight: 500;
}

.product-category-list .list-group-item.active .small-muted,
.product-category-list .list-group-item.active small {
  color: #355a47 !important;
}

h1, h2, h3, h4, h5, h6,
.fw-bold, .section-title {
  color: #111111;
  letter-spacing: 0 !important;
}