/* =====================================================================
   skin.css — custom visual re-skin layered on top of style.css
   ONLY changes appearance (color, type treatment, borders, shadows,
   radii, section tints). Does NOT touch container widths / 版心 / grid.
   ===================================================================== */

/* ---- 1. Palette + type tokens ---------------------------------------- */
:root {
  --primary: #7a1f3d;          /* deep bordeaux / wine */
  --primary-color: #7a1f3d;
  --primary-deep: #611530;     /* darker wine for gradients */
  --accent: #c6a662;           /* champagne gold accent */
  --accent-soft: #ecdcb4;
  --ink: #241016;              /* near-black with a wine cast */
  --color: #241016;
  --color-two: #6b525a;
  --color-three: #6b525a;
  --color-four: #f8f3f4;
  --color-six: #f4ecee;
  --color-seven: #3a2229;
  --color-eight: #3a2229;
  --color-border: #e7d7db;
  --skin-radius: 14px;
  --skin-shadow: 0 14px 38px -18px rgba(122, 31, 61, .35);
}

/* Soft-tinted "background-color" sections */
.background-color { background: linear-gradient(180deg, #faf4f5 0%, #f3e9ec 100%); }

/* ---- 2. Section headings -------------------------------------------- */
.public-title,
.index-four-title,
.index-one-title {
  color: var(--ink);
  letter-spacing: -.5px;
}
/* Gold underline accent under centered section titles */
.text-center .public-title { position: relative; display: inline-block; }
.text-center .public-title::after {
  content: "";
  display: block;
  width: 58px;
  height: 4px;
  margin: 18px auto 0;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}
.public-text { color: var(--color-two); }

/* ---- 3. Buttons ------------------------------------------------------ */
/* Original .btn-link used asymmetric 30px 0 radius + plain border.
   New: filled pill w/ brand gradient + lift on hover. */
.btn-link {
  border: 1px solid transparent;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(120deg, var(--primary) 0%, var(--primary-deep) 100%);
  transition: transform .25s ease, background .25s ease;
}
.btn-link:hover {
  transform: translateY(-2px);
  background: linear-gradient(120deg, var(--primary-deep) 0%, var(--primary) 100%);
  color: #fff;
}
/* White banner button becomes a crisp glass pill */
.btn-link.btn-white {
  background: rgba(255, 255, 255, .92);
  color: var(--primary);
  border-color: #fff;
}
.btn-link.btn-white:hover {
  background: #fff;
  color: var(--primary);
}
/* Header "GET A QUOTE" pill */
.btn-bg {
  color: #fff;
  background: var(--accent);
  border-radius: 999px;
  padding: 12px 24px;
}
.btn-bg:hover { background: #ad8f4f; color: #fff; }

/* ---- 4. Header ------------------------------------------------------- */
header.header-bg .container-top {
  min-height: 86px;
  align-items: center;
}
body.admin-bar header.header-bg {
  top: 32px;
}
@media (max-width: 782px) {
  body.admin-bar header.header-bg {
    top: 46px;
  }
}
header.header-bg .nav,
header.header-bg .nav .nav-ul,
header.header-bg .nav .nav-li {
  min-height: 86px;
}
header.header-bg .nav .nav-ul {
  align-items: stretch;
}
header.header-bg .nav .nav-li > a {
  min-height: 86px;
}
.nav .nav-li.nav-sub-item {
  position: relative;
}
.nav .nav-li.nav-sub-item > .nav-two {
  left: 0;
  right: auto;
  transform: none;
  top: calc(100% - 6px);
  width: max-content;
  min-width: 220px;
  max-width: 320px;
}
.nav .nav-li.nav-sub-item:hover > .nav-two {
  top: 100%;
}
.nav .nav-li.nav-sub-item > .nav-two li a {
  white-space: nowrap;
  padding: 12px 22px;
  justify-content: flex-start;
}
.nav .nav-li.nav-mega-item {
  position: unset;
}
@media (min-width: 992px) {
  header.header-bg {
    background: transparent !important;
    border-bottom: none !important;
    backdrop-filter: none;
  }
  header.header-bg .nav .nav-li > a {
    color: #fff !important;
    font-weight: 700;
    text-shadow: 0 2px 12px rgba(0,0,0,.36);
  }
  header.header-bg .nav .nav-li > a i {
    color: rgba(255,255,255,.82) !important;
  }
  body.home header.header-bg:not(.active):hover {
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
    backdrop-filter: none;
  }
  body.home header.header-bg:not(.active) .nav .nav-li > a:hover span {
    color: #fff !important;
  }
  body.home header.header-bg:not(.active) .nav .nav-li > a:hover i {
    color: rgba(255,255,255,.82) !important;
  }
  header.header-bg.active {
    background: rgba(255,255,255,.96) !important;
    border-bottom: 1px solid rgba(122,31,61,.12) !important;
    backdrop-filter: blur(12px);
  }
  header.header-bg.active .nav .nav-li > a {
    color: var(--ink) !important;
    text-shadow: none;
  }
  header.header-bg.active .nav .nav-li > a i {
    color: rgba(36,16,22,.62) !important;
  }
  body:not(.home) header.header-bg,
  body:not(.home) header.header-bg.active {
    background: #fff !important;
    border-bottom: 1px solid var(--color-border) !important;
    box-shadow: 0 6px 22px -14px rgba(97,21,48,.35);
    backdrop-filter: none;
  }
  body:not(.home) header.header-bg .nav .nav-li > a,
  body:not(.home) header.header-bg.active .nav .nav-li > a {
    color: var(--ink) !important;
    text-shadow: none;
  }
  body:not(.home) header.header-bg .nav .nav-li > a i,
  body:not(.home) header.header-bg.active .nav .nav-li > a i {
    color: rgba(36,16,22,.62) !important;
  }
}
header.header-bg.active {
  box-shadow: 0 6px 24px -14px rgba(122, 31, 61, .5);
}
.nav .nav-li > a.active span { color: var(--primary); }

/* ---- 5. Product grid (index-three) — equal-height cards ------------- */
/* Replaces the source's asymmetric mosaic (text-over-image) with a clean
   3-up card grid: image on top, title below on white. 版心 untouched. */
.index-three-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 44px;
}
.prod-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--skin-radius);
  overflow: hidden;
  box-shadow: 0 10px 30px -20px rgba(122,31,61,.35);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.prod-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow: 0 22px 46px -22px rgba(122,31,61,.45);
}
.prod-card-img {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-six);
}
.prod-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.prod-card:hover .prod-card-img img { transform: scale(1.07); }
.prod-card-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.prod-card-body h2 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
  letter-spacing: .2px;
  transition: color .25s ease;
}
.prod-card:hover .prod-card-body h2 { color: var(--primary); }
.prod-card-more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--primary);
  font-size: 14px;
  font-weight: 600;
}
.prod-card-more i { font-size: 11px; transition: transform .25s ease; }
.prod-card:hover .prod-card-more i { transform: translateX(4px); }
@media (max-width: 992px) { .index-three-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .index-three-grid { grid-template-columns: 1fr; } }

/* ---- 6. "More" grid (index-four) ------------------------------------ */
.index-four-row a {
  border: 1px solid var(--color-border);
  border-radius: 999px;
  transition: .3s;
}
.index-four-row a:hover {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
  transform: translateY(-2px);
}
.index-four-row a:hover h2,
.index-four-row a:hover i { color: #fff; }

/* ---- 7. Certificates strip (index-one) ------------------------------ */
.index-one-row .swiper-slide > div {
  border-radius: var(--skin-radius);
  overflow: hidden;
  box-shadow: 0 10px 24px -16px rgba(0,0,0,.3);
  background: #fff;
}
.index-one-prev, .index-one-next {
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  transition: .3s;
}
.index-one-prev:hover, .index-one-next:hover { background: var(--accent); }

/* ---- 8. About intro (index-two) — clean image + text, no decoration -- */
/* Kill the theme's diagonal pink panel + four-corner frames; keep just a
   clean rounded image with a soft shadow and a thin gold hairline. */
.index-two .row::before { display: none !important; }
.index-two .row { padding: 40px 0; }
.index-two-img { position: relative; }
.index-two-img::before,
.index-two-img::after { display: none !important; }
.index-two-img img {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: var(--skin-radius);
  border: 1px solid rgba(198,166,98,.5);
  box-shadow: 0 24px 54px -28px rgba(122,31,61,.5);
}
/* gold vertical accent bar before the heading */
.index-two-text .public-title {
  position: relative;
  padding-left: 20px;
}
.index-two-text .public-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--primary), var(--accent));
}

/* ---- 9. Stats (index-eight) ----------------------------------------- */
.index-eight-num span {
  color: var(--primary);
  background: linear-gradient(120deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---- 10. Review videos (index-nine) — single-row carousel ----------- */
/* Equal-size cards in one sliding row (no stacking). Clean 16:10 thumbs,
   gold-tinted frame, play overlay handled by theme .video-arrow. */
.index-nine .swiper { padding: 10px 0 20px; }
.index-nine .swiper-slide { height: auto; }
.index-nine .swiper-slide a {
  position: relative;
  display: block;
  border-radius: var(--skin-radius);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: 0 14px 34px -22px rgba(122,31,61,.4);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.index-nine .swiper-slide a:hover {
  transform: translateY(-5px);
  border-color: var(--accent);
  box-shadow: 0 24px 48px -22px rgba(122,31,61,.5);
}
.index-nine .swiper-slide img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  border-radius: var(--skin-radius);
}
.index-nine-prev, .index-nine-next {
  color: var(--primary);
  transition: .3s;
}
.index-nine-prev:hover, .index-nine-next:hover { color: var(--accent); }

/* ---- 11. Fabric grid (index-six) ------------------------------------ */
.index-six-row a > div {
  border-radius: var(--skin-radius);
  overflow: hidden;
  box-shadow: 0 12px 28px -18px rgba(122, 31, 61,.4);
}
.index-six-row a > div img { transition: transform .4s ease; }
.index-six-row a:hover > div img { transform: scale(1.06); }
.index-six-row a:hover h2 { color: var(--primary); }

/* ---- 12. Solution CTA (index-five) ---------------------------------- */
.index-five-card {
  border-radius: var(--skin-radius);
  border-top: 5px solid var(--accent);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.4);
}

/* ---- 13. Order steps (index-seven) ---------------------------------- */
.index-seven-li {
  border-radius: 999px;
  padding: 10px 18px;
  transition: .3s;
}
.index-seven-li span {
  border: 2px solid var(--color-border);
  transition: .3s;
}
.index-seven-li.active {
  background: linear-gradient(120deg, var(--primary), var(--primary-deep));
  color: #fff;
}
.index-seven-li.active h2,
.index-seven-li.active p { color: #fff; }
.index-seven-li.active span {
  background: var(--accent) !important;
  border-color: var(--accent-soft) !important;
  color: var(--primary-deep) !important;
  font-weight: 700;
}
.index-seven-img img {
  border-radius: var(--skin-radius);
  box-shadow: var(--skin-shadow);
}

/* ---- 14. FAQ (index-ten) -------------------------------------------- */
.faq-li { border-bottom: 2px solid #ecdde1; }
.faq-num { color: var(--accent); font-weight: 700; }
.faq-li.active .faq-title h2 { color: var(--primary); }

/* ---- 15. Quote form + testimonial (index-eleven) -------------------- */
.index-form-btn {
  border: 1px solid transparent !important;
  color: #fff !important;
  background: linear-gradient(120deg, var(--primary), var(--primary-deep)) !important;
  border-radius: 999px !important;
}
.index-form-btn:hover { background: linear-gradient(120deg, var(--primary-deep), var(--primary)) !important; }
.product-form-btn {
  background: var(--accent);
  border-radius: 999px;
}
.product-form-btn:hover { background: #ad8f4f; }
.ff-el-form-control,
.wpcf7-form-control {
  border-radius: 10px !important;
}
.index-eleven-card {
  border-radius: var(--skin-radius);
  border-left: 4px solid var(--accent);
}

/* ---- 16. Footer + sidebar ------------------------------------------- */
footer { background: linear-gradient(180deg, #2a1219 0%, #1a0b10 100%); color: #d8cace; }
footer .footer-title,
footer .footer-phone,
footer a { color: #f4ecee; }
footer .footer-links a:hover,
footer .footer-contact a:hover { color: var(--accent); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); }
/* recolor the fixed sidebar icons + mobile nav accents to brand */
.sidebar-icons.sidebar-color span[style*="background-color"] { background-color: var(--primary) !important; }

/* ---- 17. Popup form -------------------------------------------------- */
.form-popup-card { border-radius: var(--skin-radius); border-top: 5px solid var(--accent); }
.form-popup-clear i { color: var(--primary); }

/* ---- 18. Banner carousel -------------------------------------------- */
/* Show the full hero image (no crop). Height follows the image's own 2:1
   ratio (1920×960) so the whole slide is always visible. Container/版心 untouched. */
.banner .swiper-slide { height: auto; }
.banner .swiper-slide img { width: 100%; height: auto; display: block; object-fit: contain; }
/* Subtle scrim so white headline copy stays legible over any slide */
.banner .swiper-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(45,15,26,.55) 0%, rgba(45,15,26,.15) 55%, transparent 100%);
    pointer-events: none;
}
.banner .swiper-slide .banner-card { z-index: 2; }
.banner .banner-dot { z-index: 3; }
/* Pagination bullets adopt the accent skin */
.banner .banner-dot span { border-radius: 3px; }
.banner .banner-dot span.swiper-pagination-bullet-active { background: var(--accent); }

/* ---- 19. Mega / super nav dropdowns --------------------------------- */
/* Original: square white box, hard grey border, grey hover fill.
   New: soft card, gold top-accent, slide-up fade-in, wine-tint hover. */
.nav .nav-two,
.nav .nav-super {
  border: none;
  border-top: 3px solid var(--accent);
  border-radius: 0;
  box-shadow: 0 26px 54px -24px rgba(36,16,22,.34);
  padding: 6px 0;
  transform: translateY(10px);
  transition: opacity .28s ease, transform .28s ease, visibility .28s;
}
.nav .nav-super { padding: 0; }
.nav .nav-li:hover > .nav-two,
.nav .nav-li:hover .nav-super { transform: translateY(0); }

/* first/second level rows */
.nav .nav-two li { border-bottom: 1px solid #f0e6e9; }
.nav .nav-two li a {
  margin: 0;
  padding: 12px 20px;
  transition: background .2s ease, color .2s ease;
}
.nav .nav-two li a:hover,
.nav .nav-two li a.active {
  background: var(--color-six);
  color: var(--primary);
}
.nav .nav-two li a:hover .nav-btn,
.nav .nav-two li a:hover i { color: var(--primary); }

/* super (mega) columns */
.nav .nav-super-row { padding: 26px 14px; }
.nav .nav-super-lis {
  border-right: 1px solid rgba(122,31,61,.08);
  padding: 0 18px;
}
.nav .nav-super-lis h2 a {
  color: var(--ink);
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 6px;
  transition: color .2s ease;
}
/* gold underline strip under each column heading */
.nav .nav-super-lis h2 a::after {
  content: "";
  position: absolute;
  left: 15px;
  bottom: 4px;
  width: 26px;
  height: 2px;
  background: var(--accent);
}
.nav .nav-super-lis h2 a:hover { color: var(--primary); }
.nav .nav-super-lis ul a {
  border-radius: 8px;
  color: var(--color-two);
  transition: background .2s ease, color .2s ease, padding-left .2s ease;
}
.nav .nav-super-lis ul a.active,
.nav .nav-super-lis ul a:hover {
  background: var(--color-six);
  color: var(--primary);
  padding-left: 22px;
}
.nav .nav-three { border-radius: 0; }

/* ---- 20. Product mega menu (category list + hover image panel) ------ */
.nav .nav-super-product { padding: 0; overflow: hidden; }
/* positioning context + fixed height so the absolute panel stays inside */
.nav-prod-flex { position: relative; min-height: 470px; }
/* left: category name list — a fixed-width vertical column, soft cream */
.nav-prod-cats {
  width: 316px;
  min-height: 470px;
  padding: 14px 0;
  background: linear-gradient(180deg, #fbf6f2 0%, #f6eef0 100%);
  border-right: 1px solid rgba(198,166,98,.28);
}
.nav-prod-cat {
  position: static;
  margin: 0 14px;
  border-bottom: 1px solid rgba(122,31,61,.06);
}
.nav-prod-cat:last-child { border-bottom: none; }
.nav-prod-cat > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px 20px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink);
  border-radius: 10px;
  transition: background .22s ease, color .22s ease, padding-left .22s ease;
}
.nav-prod-cat > a i {
  font-size: 12px;
  opacity: .4;
  transition: transform .22s ease, opacity .22s ease, color .22s ease;
}
.nav-prod-cat:hover > a {
  background: linear-gradient(135deg, var(--primary) 0%, #93284c 100%);
  color: #fff;
  padding-left: 26px;
}
.nav-prod-cat:hover > a i { opacity: 1; color: var(--accent); transform: translateX(4px); }

/* right: product image panel — hidden until its category is hovered */
.nav-prod-panel {
  position: absolute;
  left: 316px;
  top: 0;
  right: 0;
  bottom: 0;
  padding: 28px 30px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: min-content;
  gap: 20px;
  align-content: start;
  overflow: hidden;
  background: #fff;
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s ease;
}
.nav-prod-panel::before {
  content: "";
  display: none;
}
/* panels only exist once the Product nav item itself is open — otherwise
   visibility:visible on a panel would leak through the closed dropdown. */
.nav .nav-li:hover .nav-prod-cat:first-child .nav-prod-panel,
.nav .nav-li:hover .nav-prod-cat:hover .nav-prod-panel {
  opacity: 1;
  visibility: visible;
}
/* a hovered category always wins over the default-visible first one */
.nav .nav-li:hover .nav-prod-cats:hover .nav-prod-cat:first-child .nav-prod-panel { opacity: 0; visibility: hidden; }
.nav .nav-li:hover .nav-prod-cats:hover .nav-prod-cat:hover .nav-prod-panel { opacity: 1; visibility: visible; }

.nav-prod-card {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--color-border);
  box-shadow: 0 6px 18px -12px rgba(122,31,61,.3);
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.nav-prod-card:hover {
  border-color: var(--accent);
  transform: translateY(-5px);
  box-shadow: 0 18px 34px -16px rgba(122,31,61,.4);
}
.nav-prod-img {
  display: block;
  height: 148px;
  overflow: hidden;
  position: relative;
}
.nav-prod-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}
.nav-prod-card:hover .nav-prod-img img { transform: scale(1.08); }
.nav-prod-card h2 {
  margin: 0;
  padding: 13px 16px;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  transition: color .25s ease;
}
.nav-prod-card:hover h2 { color: var(--primary); }

/* ---- 21. Inner page banner + shared blocks -------------------------- */
/* Inner-page header: give it a solid dark bar (the homepage header is
   transparent over its hero) so nav is clearly separated from the wine
   banner below it. Uses a darker tone than the banner + a gold hairline. */
.inner-page header.header-bg {
  background: #fff;
  border-bottom: 1px solid var(--color-border);
}
@media (min-width: 992px) {
  .inner-page header.header-bg,
  .inner-page header.header-bg.active {
    background: #fff;
    border-bottom: 1px solid var(--color-border);
  }
  /* scrolled state: subtle shadow for separation */
  .inner-page header.header-bg.active {
    background: #fff;
    box-shadow: 0 6px 22px -14px rgba(97,21,48,.35);
  }
}
/* inner-page header is a white bar, so use the dark logo + dark nav
   in both the top and scrolled (.active) states */
.inner-page header.header-bg .header-logo-white,
.inner-page header.header-bg.active .header-logo-white { display: none; }
.inner-page header.header-bg .header-logo-black,
.inner-page header.header-bg.active .header-logo-black { display: block; }
.inner-page header.header-bg .nav .nav-li > a,
.inner-page header.header-bg.active .nav .nav-li > a { color: var(--ink); }
.inner-page header.header-bg .nav .nav-li > a span,
.inner-page header.header-bg.active .nav .nav-li > a span {
  color: var(--ink);
  position: relative;
}
.inner-page header.header-bg .nav .nav-li > a i { color: rgba(36,16,22,.5); }
/* animated gold underline for hover / current page */
.inner-page header.header-bg .nav .nav-li > a span::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s ease;
}
.inner-page header.header-bg .nav .nav-li > a.active span::after { transform: scaleX(1); }
/* hover / current-page highlight → wine */
.inner-page header.header-bg .nav .nav-li > a.active span { color: var(--primary); }
.inner-page header.header-bg .nav .nav-li > a.active i { color: var(--accent); }
/* the dropdown panels themselves stay light — restore dark text inside them */
.inner-page header.header-bg .nav .nav-two a,
.inner-page header.header-bg .nav .nav-super a,
.inner-page header.header-bg .nav-prod-card h2 { color: var(--ink); }
.inner-page header.header-bg .nav .nav-two a:hover,
.inner-page header.header-bg .nav .nav-super a:hover,
.inner-page header.header-bg .nav-prod-card:hover h2 { color: var(--primary); }
/* product category column is light cream — dark text, white on hover fill.
   Must beat `.nav .nav-super a:hover{color:primary}` which would otherwise
   paint the label wine-on-wine (invisible) over the hover gradient. */
.inner-page header.header-bg .nav .nav-super .nav-prod-cat > a { color: var(--ink); }
.inner-page header.header-bg .nav .nav-super .nav-prod-cat:hover > a,
.inner-page header.header-bg .nav .nav-super .nav-prod-cat > a:hover { color: #fff; }
.inner-page header.header-bg .nav .nav-super .nav-prod-cat:hover > a i,
.inner-page header.header-bg .nav .nav-super .nav-prod-cat > a:hover i { color: var(--accent); }

/* push banner content below the fixed header so nav never overlaps the title */
.inner-page .page-banner { padding-top: 150px; }

.page-banner {
  position: relative;
  background:
    linear-gradient(120deg, rgba(97,21,48,.88) 0%, rgba(122,31,61,.72) 55%, rgba(147,43,76,.6) 100%),
    url("../../wp-content/uploads/2026/04/lQDPJwgB2VwYt4XNA8DNB4CwNtkefCpC0lMJohKrX-xWAA_1920_960.jpg") center/cover no-repeat;
  color: #fff;
  overflow: hidden;
  padding: 54px 0;
}
.page-banner::after {
  content: "";
  position: absolute;
  right: -80px;
  top: -80px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(198,166,98,.35) 0%, transparent 70%);
  pointer-events: none;
}
.page-banner .crumbs { margin-bottom: 14px; font-size: 14px; color: rgba(255,255,255,.72); }
.page-banner .crumbs a { color: rgba(255,255,255,.72); transition: color .2s ease; }
.page-banner .crumbs a:hover { color: var(--accent); }
.page-banner h1 { font-size: 46px; font-weight: 700; line-height: 1.15; letter-spacing: -.5px; }
.page-banner .page-banner-sub { margin-top: 16px; max-width: 720px; color: rgba(255,255,255,.82); font-size: 17px; }

/* generic inner section rhythm */
.inner-section { padding: 90px 0; }
.inner-section.tint { background: linear-gradient(180deg, #faf4f5 0%, #f3e9ec 100%); }
.inner-lead { max-width: 820px; margin: 0 auto 50px; text-align: center; }
.inner-lead .public-title { margin-bottom: 18px; }

/* prose blocks for About / policy text */
.inner-prose p { margin-bottom: 18px; color: var(--color-two); line-height: 1.9; }
.inner-prose h2 { margin: 34px 0 16px; color: var(--ink); font-size: 26px; font-weight: 700; }
.inner-prose ul { margin: 0 0 18px; padding-left: 22px; }
.inner-prose li { margin-bottom: 10px; color: var(--color-two); line-height: 1.7; list-style: disc; }

/* value / feature cards */
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.value-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--accent);
  padding: 34px 28px;
  transition: transform .28s ease, border-color .28s ease;
}
.value-card:hover { transform: translateY(-4px); border-color: var(--primary); }
.value-card .value-num { font-size: 34px; font-weight: 700; color: var(--accent); line-height: 1; }
.value-card h2 { margin: 16px 0 10px; font-size: 20px; font-weight: 700; color: var(--ink); }
.value-card p { color: var(--color-two); line-height: 1.75; }

/* contact layout */
.contact-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 46px; align-items: stretch; }
.contact-eyebrow {
  display: inline-block;
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.contact-intro > h2 { font-size: 30px; margin: 0 0 12px; color: var(--ink); }
.contact-intro > p { color: var(--color-two); line-height: 1.75; margin-bottom: 30px; max-width: 480px; }
.contact-info { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; background: none; }
.contact-info li {
  display: flex;
  align-items: center;
  gap: 15px;
  min-height: 92px;
  margin: 0;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}
/* kill any theme-inherited list decoration bars */
.contact-info li::before,
.contact-info li::after { content: none !important; display: none !important; }
.contact-info li:hover {
  border-color: var(--primary);
  box-shadow: 0 12px 30px rgba(97, 21, 48, .10);
  transform: translateY(-3px);
}
.contact-info .ci-ico {
  flex: none;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: var(--color-six);
  color: var(--primary);
  font-size: 20px;
  transition: background .3s ease, color .3s ease;
}
.contact-info li:hover .ci-ico { background: var(--primary); color: #fff; }
.contact-info h2 { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 3px; }
.contact-info p, .contact-info a { color: var(--color-two); line-height: 1.5; font-size: 14px; word-break: break-word; }
.contact-info a:hover { color: var(--primary); }
.contact-social { display: flex; gap: 12px; margin-top: 26px; }
.contact-social a {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--color-six);
  transition: background .3s ease, transform .3s ease;
}
.contact-social a:hover { background: var(--color-gold); transform: translateY(-3px); }
.contact-social img { width: 17px; height: 17px; object-fit: contain; }

.contact-form-box {
  background: #fff;
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--primary);
  border-radius: 14px;
  padding: 40px;
  box-shadow: 0 18px 44px rgba(97, 21, 48, .08);
}
.contact-form-title { font-size: 24px; margin: 0 0 6px; color: var(--ink); }
.contact-form-sub { color: var(--color-three); margin-bottom: 26px; }
.cf-row { display: flex; gap: 16px; }
.cf-row input { flex: 1; }
.contact-form-box input,
.contact-form-box textarea {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 13px 16px;
  margin-bottom: 16px;
  font-family: inherit;
  font-size: 15px;
  background: var(--color-six);
  transition: border-color .2s ease, background .2s ease;
}
.contact-form-box input:focus,
.contact-form-box textarea:focus { outline: none; border-color: var(--primary); background: #fff; }
.contact-form-box textarea { min-height: 130px; resize: vertical; }
.contact-submit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: none;
  cursor: pointer;
  padding: 14px 34px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary) 0%, #93284c 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .02em;
  transition: box-shadow .3s ease, transform .3s ease;
}
.contact-submit i { font-size: 13px; transition: transform .3s ease; }
.contact-submit:hover { box-shadow: 0 12px 26px rgba(97, 21, 48, .28); transform: translateY(-2px); }
.contact-submit:hover i { transform: translateX(4px); }

.contact-map { line-height: 0; }
.contact-map iframe {
  width: 100%;
  height: 420px;
  border: 0;
  filter: grayscale(.2);
}

/* ---- 22. Product category collection page -------------------------- */
/* Two-column: fixed left sidebar (search + category list + CTA) / right grid.
   Uses flex within the existing .container so 版心 is untouched. */
.cat-layout { display: flex; gap: 40px; align-items: flex-start; }
.cat-sidebar { flex: none; width: 280px; }
.cat-main { flex: 1; min-width: 0; }

/* search box */
.cat-search { position: relative; margin-bottom: 34px; }
.cat-search input {
  width: 100%;
  border: 1px solid var(--color-border);
  background: #fff;
  padding: 14px 52px 14px 18px;
  font-family: inherit;
  font-size: 15px;
  border-radius: 999px;
  transition: border-color .2s ease;
}
.cat-search input:focus { outline: none; border-color: var(--primary); }
.cat-search button {
  position: absolute;
  right: 5px; top: 50%;
  transform: translateY(-50%);
  width: 42px; height: 42px;
  border: none;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 17px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s ease;
}
.cat-search button:hover { background: var(--accent); }

/* sidebar widgets */
.cat-widget { margin-bottom: 34px; }
.cat-widget-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  padding-bottom: 14px;
  margin-bottom: 6px;
  border-bottom: 2px solid var(--accent);
}
/* two-level category list */
.cat-list .cat-parent { border-bottom: 1px solid var(--color-border); }
.cat-parent-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 4px;
  cursor: pointer;
  transition: color .2s ease;
}
.cat-parent-row:hover .cat-parent-name { color: var(--primary); }
.cat-parent-name { font-weight: 700; color: var(--ink); font-size: 15px; }
.cat-toggle { font-size: 12px; color: var(--color-two); transition: transform .25s ease; }
.cat-parent.open .cat-toggle { transform: rotate(180deg); color: var(--primary); }

.cat-sublist {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.cat-parent.open .cat-sublist { max-height: 400px; }
.cat-sublist a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 4px 10px 16px;
  color: var(--color-two);
  font-size: 14px;
  transition: color .2s ease, padding-left .2s ease;
}
.cat-sublist a:hover,
.cat-sublist a.active { color: var(--primary); padding-left: 22px; }
.cat-sublist a.active { font-weight: 600; }

/* result heading above grid */
.cat-result-title { font-size: 26px; font-weight: 700; color: var(--ink); margin-bottom: 26px; }

.cat-cta {
  background: var(--color-six);
  border-top: 3px solid var(--accent);
  padding: 26px 24px;
}
.cat-cta .cat-widget-title { border-bottom: none; padding-bottom: 8px; }
.cat-cta p { color: var(--color-two); line-height: 1.7; margin-bottom: 18px; }

/* right product grid */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.cat-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--skin-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.cat-card:hover {
  transform: translateY(-5px);
  border-color: var(--primary);
  box-shadow: var(--skin-shadow);
}
.cat-card-img { display: block; overflow: hidden; aspect-ratio: 4 / 3; }
.cat-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.cat-card:hover .cat-card-img img { transform: scale(1.06); }
.cat-card-body { padding: 20px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.cat-card-body h2 { font-size: 19px; font-weight: 700; line-height: 1.3; }
.cat-card-body h2 a { color: var(--ink); transition: color .2s ease; }
.cat-card:hover .cat-card-body h2 a { color: var(--primary); }
.cat-card-body p { margin: 10px 0 18px; color: var(--color-two); line-height: 1.65; font-size: 14px; }
.cat-more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  color: var(--primary);
  font-weight: 600;
  font-size: 14px;
}
.cat-more i { font-size: 11px; transition: transform .2s ease; }
.cat-more:hover { color: var(--accent); }
.cat-more:hover i { transform: translateX(4px); }

/* category intro prose below the grid */
.cat-intro { margin-top: 54px; }
.cat-intro h2 { font-size: 28px; font-weight: 700; color: var(--ink); margin-bottom: 18px; }
.cat-intro p { color: var(--color-two); line-height: 1.9; margin-bottom: 16px; }

/* pagination */
.cat-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 44px;
}
.cat-pager .pg-num,
.cat-pager .pg-prev,
.cat-pager .pg-next {
  min-width: 46px;
  height: 46px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-two);
  font-weight: 600;
  font-size: 15px;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.cat-pager .pg-num:hover,
.cat-pager .pg-next:hover {
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
}
.cat-pager .pg-num.active {
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
  cursor: default;
}
.cat-pager .pg-prev { transform: rotate(180deg); }
.cat-pager .pg-prev.disabled {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}
.cat-pager i { font-size: 12px; }
.cat-pager .pg-dots {
  min-width: 30px;
  text-align: center;
  color: var(--color-two);
  letter-spacing: 2px;
}

@media (max-width: 1200px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 992px) {
  .cat-layout { flex-direction: column; }
  .cat-sidebar { width: 100%; }
}
@media (max-width: 576px) {
  .cat-grid { grid-template-columns: 1fr; }
}

/* ---- 23. Product detail page --------------------------------------- */
.pd-top { display: flex; gap: 50px; align-items: flex-start; }
.pd-gallery { flex: none; width: 46%; }
.pd-info { flex: 1; min-width: 0; }

/* gallery */
.pd-main-img {
  border: 1px solid var(--color-border);
  border-radius: var(--skin-radius);
  overflow: hidden;
  background: #fff;
}
.pd-main-img img { width: 100%; display: block; aspect-ratio: 1 / 1; object-fit: cover; }
.pd-thumbs { display: flex; gap: 12px; margin-top: 14px; }
.pd-thumb {
  width: 84px; height: 84px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .2s ease;
}
.pd-thumb.active,
.pd-thumb:hover { border-color: var(--primary); }
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* info */
.pd-title { font-size: 32px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.pd-desc { margin-top: 18px; }
.pd-desc p { color: var(--color-two); line-height: 1.85; }
.pd-features { margin: 24px 0 6px; }
.pd-features li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  color: var(--color-two);
  line-height: 1.6;
}
.pd-features li::before {
  content: "\e660";
  font-family: 'icomoon';
  position: absolute;
  left: 0; top: 3px;
  font-size: 11px;
  color: var(--accent);
  font-weight: 700;
}
.pd-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 24px; }
.pd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: transform .25s ease, background .25s ease, color .25s ease;
}
.pd-btn-primary {
  color: #fff;
  background: linear-gradient(120deg, var(--primary) 0%, var(--primary-deep) 100%);
}
.pd-btn-primary:hover { transform: translateY(-2px); color: #fff; }
.pd-btn-line {
  color: var(--primary);
  border: 1px solid var(--color-border);
  background: #fff;
}
.pd-btn-line:hover { border-color: var(--primary); color: var(--primary); }
.pd-share { display: flex; align-items: center; gap: 12px; padding-top: 22px; border-top: 1px solid var(--color-border); }
.pd-share span { font-weight: 600; color: var(--ink); }
.pd-share a {
  width: 40px; height: 40px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .2s ease, background .2s ease;
}
.pd-share a img { width: 16px; height: 16px; object-fit: contain; }
.pd-share a:hover { border-color: var(--accent); background: var(--color-six); }

/* description feature cards (reuse value-card + image) */
.pd-feature { text-align: left; padding-top: 0; overflow: hidden; }
.pd-feature-img { margin: -1px -28px 22px; height: 190px; }
.pd-feature-img img { width: 100%; height: 100%; object-fit: cover; }

/* parameters */
.pd-params { display: flex; gap: 46px; align-items: stretch; }
.pd-params-left { flex: 1; min-width: 0; }
.pd-params-right { flex: none; width: 40%; }
.pd-params-right img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--skin-radius); }
.pd-block-title { font-size: 26px; font-weight: 700; color: var(--ink); margin-bottom: 22px; }
.pd-spec { width: 100%; border-collapse: collapse; }
.pd-spec th, .pd-spec td { text-align: left; padding: 14px 18px; border: 1px solid var(--color-border); line-height: 1.5; }
.pd-spec th { width: 38%; background: var(--color-six); color: var(--ink); font-weight: 700; }
.pd-spec td { color: var(--color-two); }

@media (max-width: 992px) {
  .pd-top { flex-direction: column; }
  .pd-gallery { width: 100%; max-width: 520px; }
  .pd-params { flex-direction: column; }
  .pd-params-right { width: 100%; }
  .pd-params-right img { max-height: 360px; }
}

@media (max-width: 992px) {
  .value-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; gap: 34px; }
  .page-banner h1 { font-size: 34px; }
}
@media (max-width: 576px) {
  .value-grid { grid-template-columns: 1fr; }
  .cf-row { flex-direction: column; gap: 0; }
  .contact-info { grid-template-columns: 1fr; }
  .contact-form-box { padding: 26px; }
  .contact-map iframe { height: 300px; }
  .inner-section { padding: 60px 0; }
  .pd-title { font-size: 26px; }
}

/* ---- 24. Blog list (magazine rows) --------------------------------- */
/* category filter bar */
.blog-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 40px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--color-border);
}
.blog-cat-btn {
  appearance: none;
  cursor: pointer;
  padding: 9px 20px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-two);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  transition: color .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.blog-cat-btn:hover {
  color: var(--primary);
  border-color: var(--primary);
}
.blog-cat-btn.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(120deg, var(--primary) 0%, var(--primary-deep) 100%);
  box-shadow: 0 10px 24px -12px rgba(122, 31, 61, .6);
}

.blog-list {
  display: flex;
  flex-direction: column;
  gap: 34px;
}
.blog-post {
  display: flex;
  gap: 34px;
  align-items: stretch;
  height: 260px;
  background: #fff;
  border: 1px solid var(--color-six);
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow .3s ease, transform .3s ease;
}
.blog-post:hover {
  box-shadow: 0 18px 40px rgba(97, 21, 48, .12);
  transform: translateY(-4px);
}
.blog-post-img {
  flex: 0 0 38%;
  max-width: 38%;
  overflow: hidden;
  display: block;
}
.blog-post-img img {
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
  transition: transform .5s ease;
}
.blog-post:hover .blog-post-img img { transform: scale(1.06); }
.blog-post-body {
  flex: 1;
  padding: 30px 34px 30px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.blog-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}
.blog-cat {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  background: linear-gradient(120deg, var(--color-one) 0%, #93284c 100%);
  color: #fff;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.blog-date {
  color: var(--color-three);
  font-size: 13px;
}
.blog-post-body h2 {
  font-size: 23px;
  line-height: 1.35;
  margin: 0 0 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-post-body h2 a {
  color: var(--color-two);
  transition: color .3s ease;
}
.blog-post-body h2 a:hover { color: var(--color-one); }
.blog-post-body p {
  color: var(--color-three);
  line-height: 1.7;
  margin: 0 0 18px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-readmore {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-one);
  font-weight: 600;
  letter-spacing: .02em;
}
.blog-readmore i {
  font-size: 13px;
  transition: transform .3s ease;
}
.blog-readmore:hover { color: var(--color-gold); }
.blog-readmore:hover i { transform: translateX(5px); }

@media (max-width: 768px) {
  .blog-post { flex-direction: column; gap: 0; height: auto; }
  .blog-post-img { flex: none; max-width: 100%; }
  .blog-post-img img { min-height: 200px; }
  .blog-post-body { padding: 24px; }
  .blog-post-body h2 { font-size: 20px; }
}

/* ---- 25. Video library (thumbnail cards + play overlay) ------------- */
.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.video-card {
  display: block;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--color-six);
  transition: box-shadow .3s ease, transform .3s ease;
}
.video-card:hover {
  box-shadow: 0 18px 40px rgba(97, 21, 48, .14);
  transform: translateY(-5px);
}
.video-card-img {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.video-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.video-card:hover .video-card-img img { transform: scale(1.07); }
.video-card-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(45, 12, 24, 0) 45%, rgba(45, 12, 24, .55) 100%);
}
.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-one);
  font-size: 22px;
  padding-left: 4px;
  transition: transform .3s ease, background .3s ease;
}
.video-card:hover .video-play {
  transform: translate(-50%, -50%) scale(1.1);
  background: var(--color-gold);
  color: #fff;
}
.video-card-body {
  padding: 20px 22px 24px;
}
.video-tag {
  display: inline-block;
  color: var(--color-one);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.video-card-body h2 {
  font-size: 18px;
  line-height: 1.45;
  color: var(--color-two);
  margin: 0 0 12px;
  transition: color .3s ease;
}
.video-card:hover .video-card-body h2 { color: var(--color-one); }
.video-dur {
  display: inline-block;
  color: var(--color-three);
  font-size: 13px;
  letter-spacing: .03em;
}
.video-dur::before {
  content: "\25B6";
  font-size: 9px;
  margin-right: 7px;
  color: var(--color-gold);
}

@media (max-width: 992px) {
  .video-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
  .video-grid { grid-template-columns: 1fr; }
}

/* ---- 26. Blog article detail --------------------------------------- */
.post-detail {
  max-width: 100%;
  margin: 0 auto;
}
.page-banner-sub .blog-cat { vertical-align: middle; }
.page-banner-sub .blog-date { color: rgba(255, 255, 255, .85); }
.post-hero {
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 30px;
}
.post-hero img {
  width: 100%;
  max-height: 460px;
  object-fit: cover;
  display: block;
}
/* Article title + byline */
.post-title {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.4px;
  color: var(--ink);
  margin: 0 0 16px;
}
.post-byline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 24px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-three);
  font-size: 15px;
}
.post-byline .post-author {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--ink);
}
.post-byline .pa-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary) 0%, #93284c 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .5px;
}
.post-byline .post-byline-sep { color: var(--color-border); }
.post-byline .post-byline-item { color: var(--color-three); }
/* two-column article layout: content left, TOC sidebar right */
.post-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 46px;
  align-items: start;
}
.post-main { min-width: 0; }
.post-aside { min-width: 0; }
/* keep the TOC in view while scrolling the article */
.post-aside .headings-navigation {
  position: sticky;
  top: 120px;
}

/* TOC box re-skin (base layout lives in style.css) */
.post-detail .headings-navigation {
  max-width: 100%;
  width: 100%;
  background: var(--color-six);
  border: 1px solid #e7dfe2;
  border-left: 3px solid var(--color-one);
  border-radius: 10px;
  padding: 20px 22px;
  margin: 0;
}
/* neutralise the theme's toggle-shrink rule (button was removed) */
.post-detail .headings-navigation.active { width: 100%; }
.post-aside #toc-list { display: block !important; margin-top: 12px; }
.post-detail .headings-navigation h4 {
  font-size: 17px;
  color: var(--color-two);
}
.post-detail .headings-btn {
  border-color: #cbb8bf;
  color: var(--color-one);
  transition: transform .3s ease;
}
.post-detail .headings-navigation.active .headings-btn { transform: rotate(180deg); }
.post-detail .toc-link {
  color: var(--color-three);
  transition: color .25s ease;
}
.post-detail .toc-link:hover {
  color: var(--color-one);
  text-decoration: none;
}
/* article body */
.post-body { color: var(--color-two); line-height: 1.85; }
.post-body .post-lead {
  font-size: 19px;
  color: var(--color-two);
  line-height: 1.75;
  margin-bottom: 28px;
}
.post-body h2 {
  font-size: 26px;
  margin: 36px 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}
.post-body h3 {
  font-size: 20px;
  color: var(--color-one);
  margin: 24px 0 10px;
}
.post-body p { margin: 0 0 16px; color: var(--color-three); }
.post-body blockquote {
  margin: 26px 0;
  padding: 18px 24px;
  background: var(--color-six);
  border-left: 4px solid var(--color-gold);
  border-radius: 8px;
  font-style: italic;
  color: var(--color-two);
}
.post-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 34px 0 0;
}
.post-tags span { color: var(--color-three); font-weight: 600; }
.post-tags a {
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--color-six);
  color: var(--color-two);
  font-size: 13px;
  transition: background .25s ease, color .25s ease;
}
.post-tags a:hover { background: var(--color-one); color: #fff; }
.post-nav {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 36px;
  padding-top: 26px;
  border-top: 1px solid #ece5e8;
}
.post-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 48%;
  color: var(--color-two);
  transition: color .25s ease;
}
.post-nav a:hover { color: var(--color-one); }
.post-nav span {
  display: flex;
  flex-direction: column;
  font-weight: 600;
  line-height: 1.35;
}
.post-nav small {
  font-weight: 400;
  font-size: 12px;
  color: var(--color-three);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.post-nav-next { text-align: right; }
.post-nav i { color: var(--color-one); font-size: 15px; }
.post-related {
  margin-top: 60px;
  padding-top: 46px;
  border-top: 1px solid #ece5e8;
}
.post-related-title {
  font-size: 26px;
  margin-bottom: 26px;
  text-align: center;
}

/* stack the TOC above the article on narrow screens */
@media (max-width: 992px) {
  .post-layout { grid-template-columns: 1fr; gap: 0; }
  .post-aside { order: -1; margin-bottom: 32px; }
  .post-aside .headings-navigation { position: static; top: auto; }
}

@media (max-width: 576px) {
  .post-nav { flex-direction: column; }
  .post-nav a { max-width: 100%; }
  .post-nav-next { text-align: left; flex-direction: row-reverse; justify-content: flex-end; }
  .post-body h2 { font-size: 22px; }
  .post-title { font-size: 26px; }
}

/* ---- 27. FAQ page (search + category groups) ----------------------- */
.faq-search-box {
  position: relative;
  margin-bottom: 40px;
}
.faq-search-box i {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--primary);
  font-size: 18px;
  pointer-events: none;
}
.faq-search-box input {
  width: 100%;
  padding: 17px 24px 17px 54px;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  box-shadow: 0 10px 30px -18px rgba(122, 31, 61, .3);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.faq-search-box input::placeholder { color: #a8929a; }
.faq-search-box input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 12px 34px -16px rgba(122, 31, 61, .4);
}

/* category label rows between question groups */
.faq-rubric {
  list-style: none;
  margin: 40px 0 18px;
  padding: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--primary);
  border-bottom: 2px solid var(--accent);
}
.faq-rubric:first-child { margin-top: 0; }

/* empty-state message */
.faq-no-result {
  margin: 30px 0 0;
  padding: 26px;
  text-align: center;
  color: var(--color-two);
  background: var(--color-six);
  border-radius: var(--skin-radius);
}

/* =====================================================================
   28. Homepage section differentiation — break the source's rhythm.
   Pure appearance (bg/type/decoration). Markup + 版心 untouched.
   ===================================================================== */

/* -- Stats (index-eight): invert into a dark wine feature band. This is
   the single biggest departure from the source's flat white numbers. -- */
.index-eight {
  position: relative;
  background: radial-gradient(1200px 500px at 15% 0%, #7a1f3d 0%, #4d0f26 55%, #350a1b 100%);
  color: #f4ecee;
  overflow: hidden;
}
.index-eight::before {
  content: "";
  position: absolute;
  right: -120px;
  bottom: -140px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(198,166,98,.22) 0%, transparent 70%);
  pointer-events: none;
}
.index-eight .public-title { color: #fff; }
.index-eight .public-text { color: rgba(244,236,238,.72); }
/* stat cells: gold numerals + separating hairlines instead of bare text */
.index-eight-num {
  padding: 10px 6px 14px;
  border-bottom: 1px solid rgba(198,166,98,.28);
}
.index-eight-num span {
  -webkit-text-fill-color: initial;
  background: none;
  color: var(--accent);
}
.index-eight-num div { color: rgba(244,236,238,.8); }
/* button on the dark band → gold pill so it pops */
.index-eight .btn-link {
  background: var(--accent);
  color: var(--primary-deep);
}
.index-eight .btn-link:hover { background: #ad8f4f; color: #fff; }

/* (About intro index-two styling consolidated into section 8 above.) */

/* -- CTA band (index-five): warm the overlay to a wine wash so it isn't a
   plain darkened photo like the source. -- */
.index-five::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(61,10,26,.82) 0%, rgba(122,31,61,.55) 60%, rgba(147,43,76,.35) 100%);
  z-index: 0;
}
.index-five { position: relative; }
.index-five .container { position: relative; z-index: 1; }

/* -- Section vertical rhythm: give major bands more breathing room than the
   source's uniform spacing, so the page cadence feels distinct. -- */
.index-nine { padding: 110px 0; }
.index-ten { padding: 110px 0; }

/* =====================================================================
   29. Layout re-composition — flip column order + realign headings so the
   page reads differently from the source. Markup + 版心 (container width)
   untouched: we only reorder existing flex children and shift text align.
   ===================================================================== */
@media (min-width: 768px) {
  /* About intro: source = image-left / text-right → flip to text-left / image-right */
  .index-two .row { flex-direction: row-reverse; }

  /* Stats: source = title-left / numbers-right → flip to numbers-left / title-right */
  .index-eight .row { flex-direction: row-reverse; }

  /* FAQ: source = title-left / list-right → flip to list-left / title-right */
  .index-ten .row { flex-direction: row-reverse; }
}

/* Centre the two section intros the source left-aligns, so the heading
   rhythm alternates (centered → split → centered) down the page. */
.index-seven > .container > .public-title,
.index-seven > .container > .public-text { text-align: center; }
.index-seven > .container > .public-text { max-width: 640px; margin-left: auto; margin-right: auto; }

/* =====================================================================
   30. Homepage refresh inspired by factory/export homepages.
   Keeps the Silkara content, but moves the look toward bright industrial
   presentation: white space, charcoal type, gold lines, square media.
   ===================================================================== */
body {
  background: #fff;
  color: #373737;
}

:root {
  --primary: #b99245;
  --primary-color: #b99245;
  --primary-deep: #1f2529;
  --accent: #d6b46a;
  --accent-soft: #f5ecd7;
  --ink: #171b1f;
  --color: #171b1f;
  --color-two: #4f585f;
  --color-three: #6f777d;
  --color-four: #f6f7f7;
  --color-six: #f4f5f3;
  --color-seven: #262b2f;
  --color-eight: #262b2f;
  --color-border: #e3e0d8;
  --skin-radius: 8px;
  --skin-shadow: 0 16px 36px -24px rgba(23, 27, 31, .45);
}

.background-color {
  background: #f6f7f5;
}

.public-title,
.index-one-title,
.index-four-title {
  color: var(--ink);
  letter-spacing: 0;
}

.text-center .public-title::after {
  width: 72px;
  height: 3px;
  margin-top: 16px;
  border-radius: 0;
  background: var(--primary);
}

.section-kicker {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--primary);
}

.btn-link,
.index-form-btn,
.pd-btn-primary {
  border-radius: 2px;
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: none;
}

.btn-link:hover,
.index-form-btn:hover,
.pd-btn-primary:hover {
  transform: translateY(-2px);
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.btn-link.btn-white {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}

.btn-bg {
  border-radius: 2px;
  background: var(--primary);
  color: #fff;
}

.btn-bg:hover {
  background: var(--ink);
}

header.header-bg.active {
  box-shadow: 0 12px 32px -24px rgba(23, 27, 31, .35);
}

.nav .nav-li > a.active span {
  color: var(--primary);
}

.banner {
  background: #101315;
}

.banner .swiper-slide {
  min-height: 640px;
  height: 78vh;
}

.banner .swiper-slide picture,
.banner .swiper-slide img {
  width: 100%;
  height: 100%;
}

.banner .swiper-slide img {
  object-fit: cover;
}

.banner .swiper-slide::after {
  background:
    linear-gradient(90deg, rgba(10, 13, 15, .82) 0%, rgba(10, 13, 15, .48) 48%, rgba(10, 13, 15, .12) 100%),
    linear-gradient(180deg, rgba(10, 13, 15, .25), transparent 34%);
}

.banner .swiper-slide .banner-card h2 {
  max-width: 760px;
  font-size: 58px;
  line-height: 1.12;
}

.banner .swiper-slide .banner-card .banner-text {
  max-width: 680px;
  font-size: 18px;
  line-height: 1.7;
  color: rgba(255,255,255,.84);
}

.banner .banner-dot {
  bottom: 34px !important;
}

.banner .banner-dot span {
  width: 44px;
  height: 4px;
  border-radius: 0;
  background: rgba(255,255,255,.42);
}

.banner .banner-dot span.swiper-pagination-bullet-active {
  background: var(--primary);
}

.index-three,
.index-one,
.index-two,
.index-solutions,
.index-seven,
.index-nine,
.index-ten,
.index-news,
.index-eleven {
  padding-top: 100px;
  padding-bottom: 100px;
}

.index-three-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 48px;
}

.prod-card {
  border-radius: 0;
  border: 1px solid var(--color-border);
  box-shadow: none;
}

.prod-card-img {
  aspect-ratio: 1 / 1;
  background: #f4f4f2;
}

.prod-card-body {
  min-height: 128px;
  padding: 18px 18px 20px;
  border-top: 3px solid transparent;
}

.prod-card:hover {
  border-color: var(--primary);
  box-shadow: 0 18px 42px -28px rgba(0,0,0,.32);
}

.prod-card:hover .prod-card-body {
  border-top-color: var(--primary);
}

.prod-card-body h2 {
  font-size: 17px;
}

.prod-card-more {
  color: var(--primary);
}

.index-one {
  padding-top: 62px;
  padding-bottom: 62px;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.index-one-row .swiper-slide > div {
  border-radius: 0;
  border: 1px solid #e8e2d5;
  box-shadow: none;
}

.index-one-prev,
.index-one-next {
  border-radius: 0;
  background: #fff;
  border: 1px solid var(--color-border);
  color: var(--ink);
}

.index-one-prev:hover,
.index-one-next:hover {
  background: var(--primary);
  color: #fff;
}

.index-two .row {
  padding: 0;
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--color-border);
}

@media (min-width: 768px) {
  .index-two .row,
  .index-eight .row,
  .index-ten .row {
    flex-direction: row;
  }
}

.index-two-img,
.index-two-img img {
  height: 100%;
}

.index-two-img img {
  object-fit: cover;
  border-radius: 0;
  border: none;
  box-shadow: none;
}

.index-two-text {
  max-width: 620px;
  padding: 64px 36px;
}

.index-two-text .public-title {
  padding-left: 0;
}

.index-two-text .public-title::before {
  display: none;
}

.index-eight {
  background: #1f2529;
  color: #fff;
}

.index-eight::before {
  display: none;
}

.index-eight .row {
  align-items: center;
}

.index-eight .public-title,
.index-eight .public-text {
  color: #fff;
}

.index-eight .public-text {
  color: rgba(255,255,255,.72);
}

.index-eight .col-md-7 .row {
  row-gap: 26px;
}

.index-eight-num {
  min-height: 132px;
  padding: 26px 22px;
  border: 1px solid rgba(255,255,255,.14);
  border-bottom: 3px solid var(--primary);
}

.index-eight-num span {
  color: var(--accent);
}

.index-eight-num div {
  color: rgba(255,255,255,.72);
}

.index-solutions-head,
.index-news-head {
  max-width: 980px;
  margin: 0 auto 46px;
}

.index-solutions-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
}

.index-solutions-head > div:first-child {
  flex: 0 0 46%;
}

.index-solutions-head .public-text {
  flex: 1;
}

.index-solutions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.solution-card {
  position: relative;
  min-height: 360px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  color: #fff;
  background: #1f2529;
}

.solution-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s ease;
}

.solution-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(31,37,41,.05) 10%, rgba(31,37,41,.86) 100%);
}

.solution-card span,
.solution-card p {
  position: relative;
  z-index: 1;
}

.solution-card span {
  font-size: 22px;
  font-weight: 700;
}

.solution-card p {
  margin-top: 12px;
  line-height: 1.7;
  color: rgba(255,255,255,.78);
}

.solution-card:hover img {
  transform: scale(1.08);
}

.index-five {
  padding: 96px 0;
  background-position: center;
}

.index-five::before {
  background: linear-gradient(90deg, rgba(12,15,17,.82), rgba(12,15,17,.4));
}

.index-five-card {
  max-width: 650px;
  padding: 54px 60px;
  border-radius: 0;
  border-top: none;
  border-left: 5px solid var(--primary);
  box-shadow: 0 24px 54px -32px rgba(0,0,0,.55);
}

.index-five-card > h2 {
  color: var(--ink);
}

.index-seven-tab {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 24px 0 4px;
}

.index-seven-li {
  border-radius: 0;
  padding: 0;
}

.index-seven-li span {
  width: 54px;
  height: 54px;
  border-color: var(--primary);
  color: var(--primary);
}

.index-seven-li.active {
  background: none;
  color: var(--primary);
}

.index-seven-li.active span {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
}

.index-seven-li.active h2 {
  color: var(--ink);
}

.index-seven-img img,
.index-nine .swiper-slide a,
.index-eleven-card,
.index-form {
  border-radius: 0;
}

.index-seven-card {
  border-left: 4px solid var(--primary);
  padding-left: 34px;
}

.index-nine {
  background: #fff;
}

.index-nine-lr div {
  border-radius: 0;
  color: var(--ink);
  border-color: var(--color-border);
}

.index-nine-lr div:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.index-ten {
  background: #f6f7f5;
}

.index-ten-left {
  padding: 54px 0 0 34px;
  border-left: 4px solid var(--primary);
}

.faq-li {
  border-bottom: 1px solid var(--color-border);
}

.faq-num {
  color: var(--primary);
}

.faq-li.active .faq-title h2 {
  color: var(--ink);
}

.index-news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.news-card {
  display: block;
  background: #fff;
  border: 1px solid var(--color-border);
  color: var(--ink);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.news-card:hover {
  transform: translateY(-5px);
  border-color: var(--primary);
  box-shadow: 0 22px 42px -30px rgba(0,0,0,.35);
}

.news-card-img {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.news-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.news-card:hover .news-card-img img {
  transform: scale(1.06);
}

.news-card-body {
  padding: 24px 24px 28px;
}

.news-card-body span {
  display: block;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--primary);
  font-weight: 700;
}

.news-card-body h2 {
  font-size: 21px;
  line-height: 1.38;
  color: var(--ink);
}

.news-card-body p {
  margin-top: 12px;
  line-height: 1.7;
  color: var(--color-three);
}

.news-card-body em {
  display: inline-block;
  margin-top: 18px;
  color: var(--primary);
  font-style: normal;
  font-weight: 700;
}

.index-eleven {
  background: #fff;
}

.index-form {
  border-color: var(--color-border);
  box-shadow: var(--skin-shadow);
}

.index-form-li textarea,
.index-form-li input,
.ff-el-form-control,
.wpcf7-form-control {
  border-radius: 2px !important;
}

.index-eleven-card {
  padding: 54px;
  border-left: 5px solid var(--primary);
  background: #f6f7f5;
}

footer {
  background: #15191c;
}

@media (max-width: 1199px) {
  .banner .swiper-slide {
    min-height: 560px;
  }

  .banner .swiper-slide .banner-card h2 {
    font-size: 42px;
  }

  .index-three-grid,
  .index-solutions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .banner .swiper-slide {
    min-height: 500px;
    height: auto;
  }

  .banner .swiper-slide .banner-card h2 {
    font-size: 30px;
  }

  .banner .swiper-slide .banner-card .banner-text {
    font-size: 14px;
  }

  .index-three,
  .index-one,
  .index-two,
  .index-solutions,
  .index-seven,
  .index-nine,
  .index-ten,
  .index-news,
  .index-eleven {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .index-solutions-head {
    display: block;
  }

  .index-solutions-head .public-text {
    margin-top: 14px;
  }

  .index-three-grid,
  .index-solutions-grid,
  .index-news-grid {
    grid-template-columns: 1fr;
  }

  .index-two-text,
  .index-eleven-card {
    padding: 34px 24px;
  }

  .solution-card {
    min-height: 300px;
  }

  .index-five-card {
    padding: 34px 26px;
  }

  .index-ten-left,
  .index-seven-card {
    padding-left: 22px;
  }
}

/* =====================================================================
   31. Inner pages aligned with the refreshed homepage skin.
   Bright factory/export style: charcoal, white, restrained gold accents.
   ===================================================================== */
.inner-page header.header-bg,
.inner-page header.header-bg.active {
  background: #fff;
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 12px 32px -28px rgba(23, 27, 31, .45);
}

.inner-page header.header-bg .nav .nav-li > a span::after {
  background: var(--primary);
  border-radius: 0;
}

.inner-page header.header-bg .nav .nav-li > a.active span,
.inner-page header.header-bg .nav .nav-two a:hover,
.inner-page header.header-bg .nav .nav-super a:hover,
.inner-page header.header-bg .nav-prod-card:hover h2 {
  color: var(--primary);
}

.inner-page header.header-bg .nav .nav-li > a.active i {
  color: var(--primary);
}

.inner-page .page-banner {
  padding-top: 144px;
}

.page-banner {
  min-height: 360px;
  padding: 70px 0;
  background:
    linear-gradient(90deg, rgba(15, 18, 20, .88) 0%, rgba(15, 18, 20, .58) 52%, rgba(15, 18, 20, .2) 100%),
    url("../../../../uploads/2026/04/lQDPJwgB2VwYt4XNA8DNB4CwNtkefCpC0lMJohKrX-xWAA_1920_960.jpg") center/cover no-repeat;
}

.page-banner::after {
  right: auto;
  left: 0;
  top: auto;
  bottom: 0;
  width: 160px;
  height: 4px;
  border-radius: 0;
  background: var(--primary);
}

.page-banner .crumbs,
.page-banner .crumbs a {
  color: rgba(255, 255, 255, .76);
}

.page-banner .crumbs a:hover {
  color: var(--accent);
}

.page-banner h1 {
  max-width: 820px;
  font-size: 46px;
  letter-spacing: 0;
}

.page-banner .page-banner-sub {
  color: rgba(255, 255, 255, .82);
}

body.inner-page .page-banner {
  display: flex;
  align-items: center;
  text-align: left;
}

body.inner-page .page-banner > .container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  text-align: left;
}

body.inner-page .page-banner h1,
body.inner-page .page-banner .page-banner-sub {
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}

body.inner-page .page-banner h1 {
  max-width: 760px;
}

body.inner-page .page-banner .page-banner-sub {
  max-width: 720px;
}

@media (min-width: 1200px) {
  body.inner-page .page-banner > .container,
  body.inner-page .inner-section > .container {
    max-width: 1450px;
  }
}

.inner-section {
  padding: 96px 0;
  background: #fff;
}

.inner-section.tint {
  background: #f6f7f5;
}

.inner-lead {
  max-width: 860px;
}

.inner-prose h2,
.cat-intro h2,
.pd-block-title,
.contact-form-title,
.contact-intro > h2,
.post-related-title {
  color: var(--ink);
  letter-spacing: 0;
}

.inner-prose p,
.inner-prose li,
.cat-intro p,
.pd-desc p,
.post-body p,
.contact-intro > p {
  color: var(--color-two);
}

.value-card,
.contact-info li,
.contact-form-box,
.cat-card,
.cat-cta,
.pd-main-img,
.pd-thumb,
.blog-post,
.video-card,
.post-hero,
.post-detail .headings-navigation,
.faq-no-result {
  border-radius: 0;
  box-shadow: none;
}

.value-card,
.contact-form-box,
.cat-card,
.blog-post,
.video-card {
  border-color: var(--color-border);
}

.value-card {
  border-top: 4px solid var(--primary);
  padding: 32px 28px;
}

.value-card:hover,
.cat-card:hover,
.blog-post:hover,
.video-card:hover {
  border-color: var(--primary);
  box-shadow: 0 22px 44px -32px rgba(0, 0, 0, .35);
}

.value-card .value-num {
  color: var(--primary);
}

.contact-eyebrow {
  color: var(--primary);
  letter-spacing: .16em;
}

.contact-info li {
  min-height: 96px;
  background: #fff;
}

.contact-info .ci-ico {
  border-radius: 0;
  background: #f6f7f5;
  color: var(--primary);
}

.contact-info li:hover .ci-ico {
  background: var(--primary);
  color: #fff;
}

.contact-social a {
  border-radius: 0;
  background: #f6f7f5;
}

.contact-social a:hover {
  background: var(--primary);
}

.contact-form-box {
  border-top: none;
  border-left: 5px solid var(--primary);
  background: #fff;
}

.contact-form-box input,
.contact-form-box textarea,
.cat-search input,
.faq-search-box input {
  border-radius: 2px;
  background: #fff;
}

.contact-submit,
.product-form-btn,
.cat-search button {
  border-radius: 2px;
  background: var(--primary);
  box-shadow: none;
}

.contact-submit:hover,
.product-form-btn:hover,
.cat-search button:hover {
  background: var(--ink);
}

.cat-layout {
  gap: 44px;
}

.cat-widget-title,
.cat-result-title {
  color: var(--ink);
}

.cat-widget-title {
  border-bottom-color: var(--primary);
}

.cat-cta {
  background: #f6f7f5;
  border-top: none;
  border-left: 4px solid var(--primary);
}

.cat-parent-row:hover .cat-parent-name,
.cat-sublist a:hover,
.cat-sublist a.active,
.cat-card:hover .cat-card-body h2 a,
.cat-more,
.cat-search input:focus {
  color: var(--primary);
}

.cat-card {
  border-radius: 0;
}

.cat-card-img {
  aspect-ratio: 1 / 1;
}

.cat-card-body h2 {
  font-size: 18px;
}

.cat-pager .pg-num,
.cat-pager .pg-prev,
.cat-pager .pg-next {
  border-radius: 0;
}

.cat-pager .pg-num:hover,
.cat-pager .pg-next:hover,
.cat-pager .pg-num.active {
  background: var(--primary);
  border-color: var(--primary);
}

.pd-top {
  align-items: stretch;
}

.pd-main-img {
  border-color: var(--color-border);
}

.pd-thumb {
  border-radius: 0;
}

.pd-thumb.active,
.pd-thumb:hover {
  border-color: var(--primary);
}

.pd-title {
  font-size: 34px;
  letter-spacing: 0;
}

.pd-features li::before {
  color: var(--primary);
}

.pd-btn {
  border-radius: 2px;
}

.pd-btn-primary {
  background: var(--primary);
}

.pd-btn-primary:hover {
  background: var(--ink);
}

.pd-btn-line {
  color: var(--ink);
}

.pd-btn-line:hover,
.pd-share a:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: #f6f7f5;
}

.pd-params-right img {
  border-radius: 0;
}

.pd-spec th {
  background: #f6f7f5;
}

.blog-cats {
  border-bottom-color: var(--color-border);
}

.blog-cat-btn {
  border-radius: 2px;
}

.blog-cat-btn.active,
.blog-cat {
  background: var(--primary);
  box-shadow: none;
}

.blog-post {
  height: 270px;
  border-color: var(--color-border);
}

.blog-post-body h2 a,
.video-card-body h2 {
  color: var(--ink);
}

.blog-post-body h2 a:hover,
.blog-readmore,
.blog-readmore:hover,
.video-tag,
.video-card:hover .video-card-body h2,
.video-dur::before {
  color: var(--primary);
}

.video-card {
  border-color: var(--color-border);
}

.video-play {
  border-radius: 0;
  color: var(--primary);
}

.video-card:hover .video-play {
  background: var(--primary);
  color: #fff;
}

.post-hero {
  border: 1px solid var(--color-border);
}

.post-byline {
  border-bottom-color: var(--color-border);
}

.post-byline .pa-avatar {
  background: var(--primary);
}

.post-body h2 {
  border-bottom-color: var(--color-border);
}

.post-body h3,
.post-tags a:hover,
.post-nav i,
.post-nav a:hover {
  color: var(--primary);
}

.post-body blockquote {
  background: #f6f7f5;
  border-left-color: var(--primary);
}

.post-tags a:hover {
  background: var(--primary);
  color: #fff;
}

.post-detail .headings-navigation {
  background: #f6f7f5;
  border-color: var(--color-border);
  border-left-color: var(--primary);
}

.post-detail .headings-btn {
  border-radius: 0;
  color: var(--primary);
}

.post-detail .toc-link:hover {
  color: var(--primary);
}

.faq-search-box i,
.faq-rubric {
  color: var(--primary);
}

.faq-search-box input:focus {
  border-color: var(--primary);
  box-shadow: none;
}

.faq-rubric {
  border-bottom-color: var(--primary);
}

.faq-no-result {
  background: #f6f7f5;
}

@media (max-width: 992px) {
  .inner-page .page-banner {
    padding-top: 70px;
  }

  .page-banner {
    min-height: 300px;
  }
}

@media (max-width: 576px) {
  .page-banner {
    min-height: 260px;
    padding: 52px 0;
  }

  .page-banner h1 {
    font-size: 30px;
  }

  .inner-section {
    padding: 64px 0;
  }

  .blog-post {
    height: auto;
  }
}

/* FAQ page: clean single-column accordion like the reference */
.faq .faq-wrap {
  max-width: 960px !important;
  margin: 0 auto !important;
}

.faq .faq-search-box {
  margin-bottom: 34px;
}

.faq .faq-rubric {
  display: none;
}

.faq .faq-ul {
  border-top: none !important;
}

.faq .faq-li {
  display: flex;
  align-items: flex-start;
  gap: 36px;
  padding: 34px 0 36px !important;
  border: none !important;
  border-bottom: 1px solid #e5dfd2 !important;
  background: transparent !important;
}

.faq .faq-num {
  flex: 0 0 64px;
  margin: 0 !important;
  color: var(--accent) !important;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
}

.faq .faq-right {
  flex: 1;
  min-width: 0;
}

.faq .faq-title {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  width: 100%;
  cursor: pointer;
}

.faq .faq-title h2 {
  flex: 1;
  margin: 0;
  color: var(--ink) !important;
  font-size: 22px !important;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
}

.faq .faq-title h2:hover {
  text-decoration: none !important;
}

.faq .faq-title span {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin: 2px 0 0 !important;
  color: var(--ink) !important;
  font-size: 18px;
  top: auto !important;
  transition: transform .28s ease, color .28s ease;
}

.faq .faq-li.active .faq-title span {
  transform: rotate(180deg) !important;
}

.faq .faq-title span i {
  font-weight: 700;
}

.faq .faq-text {
  display: none;
  padding: 22px 80px 0 0 !important;
  color: var(--color-two) !important;
  font-size: 16px;
  line-height: 1.65;
}

.faq .faq-li.active .faq-title h2 {
  color: var(--ink) !important;
}

@media (max-width: 767px) {
  .faq .faq-li {
    gap: 18px;
    padding: 26px 0 !important;
  }
  .faq .faq-num {
    flex-basis: 44px;
    font-size: 20px;
  }
  .faq .faq-title h2 {
    font-size: 18px !important;
  }
  .faq .faq-text {
    padding-right: 0 !important;
  }
}

/* Product mega menu: polished selected state */
.nav .nav-super-product {
  border-top: 4px solid var(--primary);
  box-shadow: 0 28px 70px -34px rgba(0, 0, 0, .38);
}

.nav-prod-flex {
  min-height: 590px;
  background: #fff;
}

.nav-prod-cats {
  width: 318px;
  min-height: 590px;
  padding: 18px 12px;
  background: #f5f2ee;
  border-right: 1px solid #e5ded2;
}

.nav-prod-cat {
  margin: 0;
  border-bottom: 1px solid rgba(31, 37, 41, .07);
}

.nav-prod-cat > a {
  position: relative;
  min-height: 56px;
  padding: 0 18px 0 22px;
  border-radius: 2px;
  color: var(--ink);
  overflow: hidden;
}

.nav-prod-cat > a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  background: transparent;
  transition: background .24s ease, top .24s ease, bottom .24s ease;
}

.nav-prod-cat > a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(185, 146, 69, .16), rgba(185, 146, 69, 0));
  opacity: 0;
  transition: opacity .24s ease;
}

.nav-prod-cat > a,
.nav-prod-cat > a i {
  z-index: 1;
}

.nav-prod-cat > a i {
  width: 24px;
  height: 24px;
  margin-left: 14px;
  border: 1px solid rgba(185, 146, 69, .35);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  opacity: 1;
  font-size: 10px;
  background: rgba(255, 255, 255, .72);
}

.nav .nav-li:hover .nav-prod-cat:first-child > a,
.nav-prod-cat:hover > a {
  padding-left: 28px;
  color: #fff;
  background: linear-gradient(135deg, #1f2529 0%, #35312a 100%);
  box-shadow: 0 12px 24px -18px rgba(0, 0, 0, .45);
}

.nav .nav-li:hover .nav-prod-cat:first-child > a::before,
.nav-prod-cat:hover > a::before {
  top: 0;
  bottom: 0;
  background: var(--primary);
}

.nav .nav-li:hover .nav-prod-cat:first-child > a::after,
.nav-prod-cat:hover > a::after {
  opacity: 1;
}

.nav .nav-li:hover .nav-prod-cat:first-child > a i,
.nav-prod-cat:hover > a i {
  color: #fff;
  border-color: rgba(255, 255, 255, .34);
  background: var(--primary);
  transform: translateX(4px);
}

.nav .nav-li:hover .nav-prod-cats:has(.nav-prod-cat:hover) .nav-prod-cat:first-child:not(:hover) > a {
  padding-left: 22px;
  color: var(--ink);
  background: transparent;
  box-shadow: none;
}

.nav .nav-li:hover .nav-prod-cats:has(.nav-prod-cat:hover) .nav-prod-cat:first-child:not(:hover) > a::before {
  top: 12px;
  bottom: 12px;
  background: transparent;
}

.nav .nav-li:hover .nav-prod-cats:has(.nav-prod-cat:hover) .nav-prod-cat:first-child:not(:hover) > a::after {
  opacity: 0;
}

.nav .nav-li:hover .nav-prod-cats:has(.nav-prod-cat:hover) .nav-prod-cat:first-child:not(:hover) > a i {
  color: var(--primary);
  border-color: rgba(185, 146, 69, .35);
  background: rgba(255, 255, 255, .72);
  transform: none;
}

.nav-prod-panel {
  left: 318px;
  padding: 32px 34px;
  gap: 22px;
  min-height: 590px;
  overflow-y: auto;
  overflow-x: hidden;
  background:
    linear-gradient(180deg, #fff 0%, #fbfaf8 100%);
}

.nav-prod-panel::before {
  content: "";
  display: none;
}

.nav-prod-card {
  border-radius: 2px;
  border-color: #e5ded2;
  box-shadow: 0 12px 30px -24px rgba(31, 37, 41, .55);
}

.nav-prod-card:hover {
  border-color: var(--primary);
  box-shadow: 0 18px 38px -26px rgba(31, 37, 41, .55);
}

.nav-prod-img {
  height: 178px;
  padding: 0;
  background: #f4f1ec;
  isolation: auto;
}

.nav-prod-img::before {
  display: none;
}

.nav-prod-img::after {
  display: none;
}

.nav-prod-img img {
  width: 100%;
  height: 100%;
  padding: 0;
  object-fit: cover;
  object-position: center;
  background: #f4f1ec;
}

.nav-prod-card:hover .nav-prod-img img {
  transform: scale(1.04);
}

.nav-prod-card h2 {
  padding: 14px 16px 16px;
  font-size: 15px;
  color: var(--ink);
  border-top: 1px solid rgba(229, 222, 210, .78);
}

.nav-prod-card:hover h2 {
  color: var(--primary);
}

.inner-page header.header-bg .nav .nav-super .nav-prod-cat:hover > a,
.inner-page header.header-bg .nav .nav-super .nav-prod-cat > a:hover,
.inner-page header.header-bg .nav .nav-super .nav-prod-cat:hover > a i,
.inner-page header.header-bg .nav .nav-super .nav-prod-cat > a:hover i {
  color: #fff;
}

/* Inquiry popup: larger, calmer, premium black-gold treatment */
.form-popup {
  background:
    radial-gradient(circle at 22% 18%, rgba(185, 146, 69, .18), transparent 34%),
    rgba(10, 12, 14, .76);
  backdrop-filter: blur(4px);
}

.form-popup-bg {
  padding: 24px;
}

.form-popup-card {
  width: min(680px, calc(100vw - 40px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  border-radius: 0;
  border: 1px solid rgba(214, 180, 106, .55);
  border-top: 5px solid var(--primary);
  background: #fff;
  box-shadow: 0 38px 90px -42px rgba(0, 0, 0, .72);
  transform: translateY(-24px) scale(.98);
}

.form-popup.active .form-popup-card {
  transform: translateY(0) scale(1);
}

.form-popup-head {
  padding: 34px 42px 32px;
  background: linear-gradient(135deg, #171b1f 0%, #2c2a24 100%);
  color: #fff;
}

.form-popup-head span {
  display: block;
  margin-bottom: 12px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.form-popup-head h2 {
  max-width: 520px;
  color: #fff;
  font-size: 34px;
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: 0;
}

.form-popup-head h2::after {
  content: "";
  display: block;
  width: 72px;
  height: 3px;
  margin-top: 18px;
  background: var(--primary);
}

.form-popup-head p {
  max-width: 560px;
  margin-top: 18px;
  color: rgba(255, 255, 255, .72);
  font-size: 15px;
  line-height: 1.65;
}

.form-popup-card .product-form {
  position: static;
  padding: 34px 42px 42px;
  border: none;
  box-shadow: none;
  background: #fff;
}

.form-popup-card .wpcf7 {
  padding: 34px 42px 42px;
  background: #fff;
}

.form-popup-card .wpcf7-form {
  display: grid;
  gap: 14px;
  margin: 0;
}

.form-popup-card .wpcf7-form p {
  margin: 0;
}

.form-popup-card .wpcf7-form label {
  display: block;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.55;
}

.form-popup-card .wpcf7-form-control-wrap {
  display: block;
  margin-top: 7px;
}

.form-popup-card .product-form h2 {
  display: none;
}

.form-popup-card .product-form-li {
  margin-bottom: 14px;
}

.form-popup-card .product-form-li input,
.form-popup-card .product-form-li textarea,
.form-popup-card .wpcf7 input[type="text"],
.form-popup-card .wpcf7 input[type="email"],
.form-popup-card .wpcf7 input[type="tel"],
.form-popup-card .wpcf7 input[type="url"],
.form-popup-card .wpcf7 input[type="number"],
.form-popup-card .wpcf7 textarea {
  width: 100%;
  min-height: 52px;
  padding: 15px 18px;
  border: 1px solid #e4ded2;
  border-radius: 2px !important;
  background: #f8f8f6;
  color: var(--ink);
  font-size: 15px;
}

.form-popup-card .product-form-li input:focus,
.form-popup-card .product-form-li textarea:focus,
.form-popup-card .wpcf7 input[type="text"]:focus,
.form-popup-card .wpcf7 input[type="email"]:focus,
.form-popup-card .wpcf7 input[type="tel"]:focus,
.form-popup-card .wpcf7 input[type="url"]:focus,
.form-popup-card .wpcf7 input[type="number"]:focus,
.form-popup-card .wpcf7 textarea:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(185, 146, 69, .12);
  outline: none;
}

.form-popup-card .product-form-li textarea,
.form-popup-card .wpcf7 textarea {
  height: 150px;
  resize: vertical;
}

.form-popup-card .product-form-btn,
.form-popup-card .wpcf7-submit {
  min-height: 54px;
  margin-top: 4px;
  width: 100%;
  border: none;
  border-radius: 2px;
  background: var(--primary);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .02em;
  transition: background .25s ease, transform .25s ease;
}

.form-popup-card .product-form-btn:hover,
.form-popup-card .wpcf7-submit:hover {
  background: var(--ink);
  transform: translateY(-2px);
}

.form-popup-card .wpcf7-spinner {
  position: absolute;
  right: 42px;
  bottom: 58px;
}

.form-popup-card .wpcf7-not-valid-tip {
  margin-top: 6px;
  color: var(--primary);
  font-size: 12px;
}

.form-popup-card .wpcf7-response-output {
  margin: 0 !important;
  padding: 10px 14px !important;
  border-color: #e4ded2 !important;
  color: var(--color-two);
  font-size: 13px;
  line-height: 1.5;
}

.form-popup-clear {
  right: 18px;
  top: 18px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(214, 180, 106, .5);
  background: rgba(255, 255, 255, .08);
  color: var(--accent);
  z-index: 3;
}

.form-popup-clear:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.form-popup-clear i {
  color: currentColor;
}

@media (min-width: 720px) {
  .form-popup-card .product-form,
  .form-popup-card .wpcf7-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 14px;
  }

  .form-popup-card .product-form-li:nth-of-type(5),
  .form-popup-card .product-form-btn,
  .form-popup-card .wpcf7-form p:nth-last-of-type(1),
  .form-popup-card .wpcf7-form p:has(textarea),
  .form-popup-card .wpcf7-response-output {
    grid-column: 1 / -1;
  }
}

@media (max-width: 719px) {
  .form-popup-bg {
    padding: 16px;
  }

  .form-popup-card {
    width: calc(100vw - 28px);
  }

  .form-popup-head {
    padding: 28px 24px 26px;
  }

  .form-popup-head h2 {
    padding-right: 46px;
    font-size: 27px;
  }

  .form-popup-head p {
    font-size: 14px;
  }

  .form-popup-card .product-form,
  .form-popup-card .wpcf7 {
    padding: 26px 24px 30px;
  }

  .form-popup-clear {
    right: 14px;
    top: 14px;
  }
}

/* Homepage quote form: calmer black-gold balance */
.index-eleven {
  background:
    linear-gradient(180deg, #fff 0%, #f7f7f4 100%);
}

.index-eleven .row {
  align-items: stretch;
}

.index-form {
  position: relative;
  height: 100%;
  padding: 54px 54px 48px;
  border: 1px solid #e4ded2;
  border-left: 5px solid var(--primary);
  border-radius: 0;
  background: #fff;
  box-shadow: 0 28px 64px -44px rgba(31, 37, 41, .35);
}

.index-form::before {
  content: "";
  display: none;
}

.index-form-title {
  color: var(--ink);
  line-height: 1.18;
}

.index-form .index-form-title {
  margin-bottom: 32px;
  font-size: 30px;
  font-weight: 700;
}

.index-form-card {
  gap: 0;
}

.index-form-li {
  margin-bottom: 14px;
}

.index-form-li-50 {
  width: calc(50% - 10px);
}

.index-form-li textarea,
.index-form-li input {
  min-height: 56px;
  padding: 16px 18px;
  border: 1px solid #e2ded6;
  border-radius: 2px !important;
  background: #fafaf8;
  color: var(--ink);
  box-shadow: none;
}

.index-form-li textarea::placeholder,
.index-form-li input::placeholder {
  color: #7a7f84;
}

.index-form-li textarea:focus,
.index-form-li input:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(185, 146, 69, .12);
}

.index-form-li textarea {
  min-height: 160px;
}

.index-form-btn {
  min-height: 56px;
  width: 100%;
  border-radius: 2px !important;
  border: 1px solid var(--ink) !important;
  background: var(--ink) !important;
  color: #fff !important;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: none;
}

.index-form-btn:hover {
  border-color: var(--primary) !important;
  background: var(--primary) !important;
  color: #fff !important;
  transform: translateY(-2px);
}

.index-eleven-card {
  height: 100%;
  padding: 54px;
  border: 1px solid #e4ded2;
  border-left: none;
  border-top: 5px solid var(--primary);
  border-radius: 0;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 28px 64px -44px rgba(31, 37, 41, .35);
}

.index-eleven-card .index-form-title,
.index-eleven-card .public-text,
.index-eleven-card h2,
.index-eleven-card p {
  color: var(--ink);
}

.index-eleven-card .public-text {
  color: var(--color-two);
}

.index-eleven-icon {
  opacity: .55;
}

.index-eleven-name {
  padding-top: 26px;
  border-top: 1px solid #e4ded2;
}

.index-eleven-name img {
  width: 58px;
  height: 58px;
  object-fit: cover;
  border: 2px solid var(--primary);
}

@media (max-width: 992px) {
  .index-eleven-card {
    margin-top: 28px;
  }
}

@media (max-width: 576px) {
  .index-form,
  .index-eleven-card {
    padding: 32px 24px;
  }

  .index-form-li-50 {
    width: 100%;
  }

  .index-form .index-form-title {
    font-size: 24px;
  }
}