@charset "UTF-8";
/* ==========================================================================
   BrandFlex Theme Override CSS (Bootstrap 5 friendly)
   Purpose: Pure CSS facelift without changing markup or PHP logic.
   Scope: Header(1–8), Footer(1–2), Home Slider, Blog Archive(Grid/List/Masonry),
          Blog Single(1–2), Woo Product Archive Cards(1–4), Woo Product Single(1–2),
          Widgets (incl. Image Pro), FAQ, Pagination, Utilities.
   Notes:
   - Keep selectors low-specificity where possible.
   - Use CSS variables for quick theming.
   - Mobile-first approach.
   ========================================================================== */

/* === 0. CSS Variables (Theme Tokens) =================================== */
:root {
  /* Palette */
  --bf-primary: #0d6efd;
  --bf-primary-600: #0b5ed7;
  --bf-secondary: #6c757d;
  --bf-success: #198754;
  --bf-info: #0dcaf0;
  --bf-warning: #ffc107;
  --bf-danger: #dc3545;
  --bf-light: #f8f9fa;
  --bf-dark: #212529;

  --bf-body-bg: #ffffff;
  --bf-body-fg: #212529;
  --bf-muted: #6c757d;
  --bf-border: #e9ecef;

  /* Typography */
  --bf-font-base: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
  --bf-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bf-font-size: 16px;
  --bf-h1: 2rem;
  --bf-h2: 1.75rem;
  --bf-h3: 1.5rem;
  --bf-h4: 1.25rem;
  --bf-h5: 1.125rem;
  --bf-h6: 1rem;
  --bf-line-height: 1.6;

  /* Radii & Shadows */
  --bf-radius-sm: .375rem;
  --bf-radius: .5rem;
  --bf-radius-lg: .75rem;
  --bf-shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --bf-shadow: 0 6px 20px rgba(0,0,0,.08);

  /* Spacing scale */
  --bf-space-1: .25rem;
  --bf-space-2: .5rem;
  --bf-space-3: .75rem;
  --bf-space-4: 1rem;
  --bf-space-5: 1.25rem;
  --bf-space-6: 1.5rem;
  --bf-space-7: 2rem;
  --bf-space-8: 3rem;

  /* Offcanvas width token (used by original CSS) */
  --bf-mobile-offcanvas-width: clamp(320px, 85vw, 420px);
}

/* === 1. Base / Resets ================================================== */
html { font-size: 100%; }
body {
  background: var(--bf-body-bg);
  color: var(--bf-body-fg);
  font-family: var(--bf-font-base);
  font-size: var(--bf-font-size);
  line-height: var(--bf-line-height);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video, canvas { max-width: 100%; height: auto; }
img { display: block; }
figure { margin: 0 0 var(--bf-space-6); }
hr { border: 0; border-top: 1px solid var(--bf-border); margin: var(--bf-space-6) 0; }

/* Typography */
h1, .h1 { font-size: var(--bf-h1); line-height: 1.25; margin: 0 0 var(--bf-space-5); }
h2, .h2 { font-size: var(--bf-h2); line-height: 1.28; margin: 0 0 var(--bf-space-5); }
h3, .h3 { font-size: var(--bf-h3); line-height: 1.3;  margin: 0 0 var(--bf-space-4); }
h4, .h4 { font-size: var(--bf-h4); line-height: 1.35; margin: 0 0 var(--bf-space-3); }
h5, .h5 { font-size: var(--bf-h5); line-height: 1.4;  margin: 0 0 var(--bf-space-3); }
h6, .h6 { font-size: var(--bf-h6); line-height: 1.45; margin: 0 0 var(--bf-space-2); }
p { margin: 0 0 var(--bf-space-5); }
small, .small { font-size: .875em; }

/* Links */
a { color: var(--bf-primary); text-decoration: none; }
a:hover { color: var(--bf-primary-600); text-decoration: underline; }

/* Utilities */
.shadow-soft { box-shadow: var(--bf-shadow); }
.rounded { border-radius: var(--bf-radius); }
.rounded-lg { border-radius: var(--bf-radius-lg); }
.rounded-sm { border-radius: var(--bf-radius-sm); }
.border-light { border: 1px solid var(--bf-border); }
.text-muted, .muted { color: var(--bf-muted) !important; }

/* Ratio images */
.ratio > img,
.ratio > a > img { object-fit: cover; width: 100%; height: 100%; }

/* Forms */
input[type="text"], input[type="search"], input[type="url"], input[type="email"], input[type="number"], textarea, select {
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-sm);
  padding: .5rem .75rem;
  outline: none;
  width: 100%;
  background: #fff;
}
input:focus, textarea:focus, select:focus { border-color: var(--bf-primary); box-shadow: 0 0 0 .2rem rgba(13,110,253,.15); }

/* Buttons */
.btn, .button, button, input[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  border: 1px solid transparent;
  border-radius: var(--bf-radius-sm);
  padding: .5rem .9rem;
  font-weight: 600;
  transition: .2s ease-in-out;
}
.btn-primary, .button-primary, .wp-block-button__link {
  background: var(--bf-primary); border-color: var(--bf-primary); color: #fff;
}
.btn-primary:hover, .button-primary:hover, .wp-block-button__link:hover {
  background: var(--bf-primary-600); border-color: var(--bf-primary-600); color: #fff;
}
/* Extra small size for tight lists */
.btn-xs { padding: .25rem .5rem; font-size: .8125rem; line-height: 1.1; border-radius: .375rem; }

/* Focus */
:focus-visible { outline: 2px solid var(--bf-primary); outline-offset: 2px; }

/* ==========================================================================
   2. HEADER (pc-header-layout-1..8)
   ========================================================================== */
.site-header, .header { background: #fff; border-bottom: 1px solid var(--bf-border); position: relative; z-index: 30; }
.site-header .container, .header .container, .bf-header-container { padding-top: .6rem; padding-bottom: .6rem; }

/* Branding */
.site-branding, .header-logo { display: flex; align-items: center; gap: .75rem; }
.site-branding img, .header-logo img { max-height: 48px; width: auto; }
@media (max-width: 991.98px) { .site-branding img, .header-logo img { max-height: 40px; } }

/* Primary nav */
.primary-nav .navbar-nav > .nav-item > .nav-link,
.menu-primary > li > a, .main-navigation > ul > li > a,
.navbar .navbar-nav > li > a {
  padding: .5rem .75rem; color: var(--bf-body-fg); font-weight: 600;
}
.primary-nav .navbar-nav > .nav-item > .nav-link:hover,
.menu-primary > li > a:hover, .main-navigation > ul > li > a:hover,
.navbar .navbar-nav > li > a:hover { color: var(--bf-primary); }

/* Dropdowns */
.navbar .dropdown-menu, .main-navigation .sub-menu {
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius);
  box-shadow: var(--bf-shadow);
}

/* Icon buttons */
.icon-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 999px; color: var(--bf-body-fg);
}
.icon-btn:hover { background: var(--bf-light); color: var(--bf-body-fg); }
.icon-btn .bi, .icon-btn i { font-size: 1.1rem; line-height: 1; }

/* Cart badge */
#bfCartCount,
.header-cart-count, .header-notify-count {
  position: absolute; top: -2px; right: -2px; background: var(--bf-danger); color: #fff;
  font-size: 11px; line-height: 1; padding: 2px 6px; border-radius: 999px;
}

/* Inline search */
.bf-header-search-inline { max-width: 560px; width: 100%; }
.bf-header-search-inline .form-control { border-radius: var(--bf-radius-sm) 0 0 var(--bf-radius-sm); }
.bf-header-search-inline .btn { border-radius: 0 var(--bf-radius-sm) var(--bf-radius-sm) 0; }

/* Brand stack */
.bf-brand--stack { display: grid; grid-template-columns: auto; justify-items: center; gap: .25rem; }

/* Offcanvas scopes */
.bf-offcanvas-mobile .offcanvas-header { border-bottom: 1px solid var(--bf-border); }
.bf-offcanvas-mobile .offcanvas-body .navbar-nav .nav-link { padding: .5rem .25rem; }
.bf-offcanvas-start .offcanvas { width: 85vw; max-width: 380px; }
.bf-offcanvas-end .offcanvas { width: 85vw; max-width: 380px; }

/* Hide desktop nav on md- screens */
@media (max-width: 991.98px) { .primary-nav { display: none; } }

/* Layout 1 */
body.header-layout-1 .site-header .header-inner,
.pc-header-layout-1 .header-inner {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--bf-space-4);
}
.pc-header-layout-1 #bfPrimaryNav { justify-self: center; }

/* Layout 2 */
body.header-layout-2 .site-header .header-inner,
.pc-header-layout-2 .header-inner {
  display: grid; grid-template-columns: 1fr minmax(260px, 560px) 1fr; align-items: center; gap: var(--bf-space-3);
}
.pc-header-layout-2 .bf-header-search-inline { justify-self: center; }

/* Layout 3 */
body.header-layout-3 .site-header .header-inner,
.pc-header-layout-3 .header-inner {
  display: grid; grid-template-columns: auto 1fr auto auto auto; gap: var(--bf-space-3); align-items: center;
}

/* Layout 4 */
body.header-layout-4 .site-header .header-inner,
.pc-header-layout-4 .header-inner {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--bf-space-4);
}

/* Layout 5 */
body.header-layout-5 .site-header .header-top,
.pc-header-layout-5 .header-top {
  display: flex; align-items: center; gap: var(--bf-space-3); justify-content: space-between;
}
body.header-layout-5 .site-header .header-bottom,
.pc-header-layout-5 .header-bottom { display: flex; justify-content: center; }

/* Layout 6 */
body.header-layout-6 .site-header .header-top,
.pc-header-layout-6 .header-top {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--bf-space-3);
}
body.header-layout-6 .site-header .header-bottom,
.pc-header-layout-6 .header-bottom { display: flex; justify-content: center; }

/* Layout 7 */
body.header-layout-7 .site-header .header-top,
.pc-header-layout-7 .header-top {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--bf-space-3);
}
body.header-layout-7 .site-header .header-bottom,
.pc-header-layout-7 .header-bottom { display: flex; justify-content: center; }

/* Layout 8 */
body.header-layout-8 .site-header .header-inner,
.pc-header-layout-8 .header-inner {
  display: grid; grid-template-columns: auto 1fr auto auto auto; gap: var(--bf-space-3); align-items: center;
}

/* ==========================================================================
   3. SIDEBAR & WIDGETS
   ========================================================================== */
.sidebar, .site-sidebar { }
.bf-footer-middle .widget { margin-bottom: var(--bf-space-7);margin-top: var(--bf-space-7); }
.widget-title, .widget .widgettitle, .widget .wp-block-heading {
  font-size: 1.125rem; font-weight: 700; margin-bottom: var(--bf-space-4);
}
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget ul li { padding: .2rem 0; }
.widget ul li:last-child { border-bottom: 0; }
.widget .tagcloud a { display: inline-block; margin: 0 .4rem .4rem 0; padding: .3rem .6rem; font-size: .875rem !important; border: 1px solid var(--bf-border); border-radius: 20px; }

/* Image Pro widget */
.bf-image-pro.card { gap: var(--bf-space-3); }
.bf-image-pro .text-muted { color: var(--bf-muted) !important; }
.bf-image-pro .btn { border-radius: 999px; padding: .4rem .9rem; }

/* Core Image alignment helpers */
.alignleft  { float: left; margin: 0 var(--bf-space-5) var(--bf-space-5) 0; }
.alignright { float: right; margin: 0 0 var(--bf-space-5) var(--bf-space-5); }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }

/* ==========================================================================
   4. FOOTER (pc-footer-layout-1..2)
   ========================================================================== */
.site-footer, .footer {
  background: #0f1114; color: #cfd3da; padding-top: var(--bf-space-7); padding-bottom: var(--bf-space-6);
}
.bf-footer-container { }
.site-footer a { color: #e6e9ef; }
.site-footer a:hover { color: #fff; }
.footer hr { border-color: rgba(255,255,255,.1); }

.footer-top, .footer-middle, .footer-bottom { margin-bottom: var(--bf-space-6); }
.footer-bottom { margin-bottom: 0; border-top: 1px solid rgba(255,255,255,.08); padding-top: var(--bf-space-4); }
.site-footer .widget { color: #cfd3da; }
.site-footer .widget-title { color: #fff; border-color: rgba(255,255,255,.12); }

/* Footer layout 1 */
body.footer-layout-1 .site-footer .footer-row,
.pc-footer-layout-1 .footer-row { display: flex; align-items: center; gap: var(--bf-space-3); justify-content: space-between; }
.pc-footer-layout-1 .nav .nav-link { color: #cfd3da; padding: .25rem .5rem; }
.pc-footer-layout-1 .nav .nav-link:hover { color: #fff; }

/* Footer layout 2 */
body.footer-layout-2 .site-footer .footer-top,
.pc-footer-layout-2 .bf-footer-top { }
body.footer-layout-2 .site-footer .footer-middle,
.pc-footer-layout-2 .bf-footer-middle { }
body.footer-layout-2 .site-footer .footer-bottom,
.pc-footer-layout-2 .bf-footer-bottom { }

/* Mobile footer stacking */
@media (max-width: 767.98px) { .site-footer { padding-top: var(--bf-space-6); } }

/* ==========================================================================
   5. HOME SLIDER (Bootstrap Carousel)
   ========================================================================== */
#bfHomeSlider.carousel, .carousel.bf-home-slider { }
#bfHomeSlider .carousel-indicators [data-bs-target] {
  width: 20px; height: 0px; border-radius: 50%; background: rgba(255,255,255,.6);
}
#bfHomeSlider .carousel-indicators .active { background: #fff; }
#bfHomeSlider .carousel-item img { width: 100%; height: 100%; object-fit: cover; }
#bfHomeSlider .carousel-caption { text-shadow: 0 2px 10px rgba(0,0,0,.35); }

/* ==========================================================================
   6. BLOG: ARCHIVE (grid/list/masonry & layout-1/2 + grid-overlay/list)
   ========================================================================== */
.archive .archive-header, .blog .archive-header { margin-bottom: var(--bf-space-6); }

/* Grid helper */
.bf-archive-grid { display: grid; grid-template-columns: 1fr; gap: var(--bf-space-6); }
@media (min-width: 576px) { .bf-archive-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .bf-archive-grid { grid-template-columns: repeat(3, 1fr); } }

/* Card base */
.bf-blog-card {
  display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid var(--bf-border); border-radius: var(--bf-radius);
  overflow: hidden; transition: transform .2s ease, box-shadow .2s ease;
}
.bf-blog-card:hover { transform: translateY(-2px); box-shadow: var(--bf-shadow); }
.bf-blog-card .card-media { position: relative; }
.bf-blog-card .card-body { padding: var(--bf-space-4); display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.bf-blog-card .card-meta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; color: var(--bf-muted); font-size: .875rem; }
.bf-blog-card .card-title { font-size: 1.125rem; margin: .25rem 0; line-height: 1.35; }
.bf-blog-card .card-title a { color: inherit; }
.bf-blog-card .card-title a:hover { color: var(--bf-primary); }
.bf-blog-card .card-excerpt { color: var(--bf-body-fg); }
.bf-blog-card .card-actions { margin-top: auto; }

/* Truncation */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Layout 1 */
body.blog-archive-layout-1 .bf-blog-card,
.blog-archive-layout-1 .bf-blog-card { }

/* Layout 2: media list */
body.blog-archive-layout-2 .bf-blog-card,
.blog-archive-layout-2 .bf-blog-card { flex-direction: column; }
@media (min-width: 768px) {
  .blog-archive-layout-2 .bf-blog-card { flex-direction: row; }
  .blog-archive-layout-2 .bf-blog-card .card-media { width: 40%; min-width: 260px; }
  .blog-archive-layout-2 .bf-blog-card .card-body { width: 60%; }
}

/* Grid overlay variant */
.blog-archive-layout-grid .overlay-mask {
  position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.65) 100%);
}
.blog-archive-layout-grid .overlay-content {
  position: absolute; inset: auto 0 0 0; color: #fff; padding: var(--bf-space-4);
}
.blog-archive-layout-grid .overlay-meta { opacity: .85; font-size: .875rem; }
.blog-archive-layout-grid .overlay-title { font-size: 1.25rem; margin: .25rem 0; }
.blog-archive-layout-grid .stretched-link { position: static; }

/* Compact list */
.blog-archive-layout-list article { border-bottom: 1px solid var(--bf-border); padding-bottom: var(--bf-space-4); margin-bottom: var(--bf-space-4); }
.blog-archive-layout-list .btn-xs { vertical-align: middle; }

/* Masonry fallback (CSS multi-column) */
.blog-archive-layout-masonry .bf-masonry { column-count: 1; column-gap: var(--bf-space-6); }
@media (min-width: 768px) { .blog-archive-layout-masonry .bf-masonry { column-count: 2; } }
@media (min-width: 1200px) { .blog-archive-layout-masonry .bf-masonry { column-count: 3; } }
.blog-archive-layout-masonry .bf-masonry .bf-blog-card { break-inside: avoid; margin-bottom: var(--bf-space-6); }

/* Archive pagination (non-Woo) */
.pagination, .nav-links, .page-numbers {
  display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: var(--bf-space-6);
}
.page-numbers a, .page-numbers span {
  border: 1px solid var(--bf-border); border-radius: var(--bf-radius-sm);
  padding: .4rem .75rem; color: var(--bf-body-fg);
}
.page-numbers .current { background: var(--bf-primary); color: #fff; border-color: var(--bf-primary); }

/* ==========================================================================
   7. BLOG: SINGLE (layout-1 / layout-2)
   ========================================================================== */
.single-post .entry-header { margin-bottom: var(--bf-space-6); }
.single-post .entry-title { font-size: clamp(1.75rem, 2.5vw, 2.25rem); margin: 0 0 var(--bf-space-3); }
.single-post .entry-meta { color: var(--bf-muted); display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
.single-post .entry-summary { color: var(--bf-body-fg); font-size: 1.0625rem; margin-bottom: var(--bf-space-5); }
.single-post .post-thumbnail { margin-bottom: var(--bf-space-6); border-radius: var(--bf-radius); overflow: hidden; }
.single-post .entry-content { font-size: 1.0625rem; line-height: 1.9; }
.single-post .entry-content blockquote { border-left: 4px solid var(--bf-primary); padding-left: 1rem; color: var(--bf-muted); }

.single-post .post-tags { margin-top: var(--bf-space-6); }
.single-post .post-tags a { margin: 0 .4rem .4rem 0; display: inline-block; padding: .3rem .6rem; border: 1px solid var(--bf-border); border-radius: 20px; }

.single-post .author-box {
  display: grid; grid-template-columns: 64px 1fr; gap: var(--bf-space-4);
  padding: var(--bf-space-4); border: 1px solid var(--bf-border); border-radius: var(--bf-radius);
}
.single-post .author-box img { border-radius: 999px; }

.single-post .post-navigation { display: flex; justify-content: space-between; gap: var(--bf-space-4); margin-top: var(--bf-space-6); }
.single-post .related-posts { margin-top: var(--bf-space-7); }

/* Layout 1 */
body.blog-single-layout-1 .single-post .entry-title { }
/* Layout 2 */
body.blog-single-layout-2 .single-post .entry-title { }

/* ==========================================================================
   8. WOO: PRODUCT ARCHIVE (cards 1–4)
   ========================================================================== */
.woocommerce .woocommerce-breadcrumb { color: var(--bf-muted); margin-bottom: var(--bf-space-4); }
.woocommerce .woocommerce-breadcrumb a { color: var(--bf-muted); }
.woocommerce .woocommerce-ordering select { min-width: 220px; }

.woocommerce ul.products { margin: 0 -12px; }
.woocommerce ul.products li.product { margin: 0; padding: 12px; list-style: none; position: relative; }

/* Card shell */
.woocommerce ul.products li.product .bf-product-card,
.woocommerce ul.products li.product .product-card {
  display: flex; flex-direction: column; height: 100%;
  border: 1px solid var(--bf-border); border-radius: var(--bf-radius);
  overflow: hidden; background: #fff; transition: transform .2s ease, box-shadow .2s ease;
}
.woocommerce ul.products li.product .bf-product-card:hover { transform: translateY(-2px); box-shadow: var(--bf-shadow); }

/* Media + sale badge */
.woocommerce ul.products li.product .card-media { position: relative; }
.woocommerce ul.products li.product .card-media .onsale {
  position: absolute; top: .5rem; left: .5rem; background: var(--bf-danger); color: #fff;
  padding: .2rem .5rem; border-radius: var(--bf-radius-sm); font-weight: 700; font-size: .75rem; line-height: 1;
}

/* Body */
.woocommerce ul.products li.product .card-body {
  padding: .75rem .75rem 1rem; display: flex; flex-direction: column; gap: .25rem; flex: 1;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 1rem; margin: .25rem 0; line-height: 1.35; }
.woocommerce ul.products li.product .price { color: var(--bf-dark); font-weight: 800; }
.woocommerce ul.products li.product .star-rating { margin-top: .25rem; }
.woocommerce ul.products li.product .add_to_cart_button, .woocommerce ul.products li.product .button { margin-top: .5rem; }

/* Card variants */
body.woo-archive-layout-1 .woocommerce ul.products li.product .bf-product-card,
.product-card-layout-1 .bf-product-card { }

body.woo-archive-layout-2 .woocommerce ul.products li.product .bf-product-card,
.product-card-layout-2 .bf-product-card { }
@media (min-width: 768px) {
  .product-card-layout-2 .bf-product-card { flex-direction: row; }
  .product-card-layout-2 .card-media { width: 40%; min-width: 240px; }
  .product-card-layout-2 .card-body { width: 60%; }
}

body.woo-archive-layout-3 .woocommerce ul.products li.product .bf-product-card,
.product-card-layout-3 .bf-product-card { }
.product-card-layout-3 .card-media { aspect-ratio: 4/3; }
.product-card-layout-3 .card-body { position: absolute; inset: auto 0 0 0; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.65)); color: #fff; }

body.woo-archive-layout-4 .woocommerce ul.products li.product .bf-product-card,
.product-card-layout-4 .bf-product-card { }

/* Woo archive pagination */
.woocommerce nav.woocommerce-pagination { text-align: center; margin-top: var(--bf-space-6); }
.woocommerce nav.woocommerce-pagination ul { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span {
  border: 1px solid var(--bf-border); border-radius: var(--bf-radius-sm); margin: 0 .25rem;
  padding: .4rem .75rem; color: var(--bf-body-fg);
}
.woocommerce nav.woocommerce-pagination ul li .current { background: var(--bf-primary); color: #fff; border-color: var(--bf-primary); }

/* ==========================================================================
   9. WOO: PRODUCT SINGLE (layout-1 / layout-2)
   ========================================================================== */
.single-product .product { }
.single-product .product .images { margin-bottom: var(--bf-space-6); }
.single-product .product .summary { }
.single-product .sku_wrapper, .single-product .posted_in, .single-product .tagged_as { color: var(--bf-muted); font-size: .9375rem; }
.single-product .price { font-size: 1.375rem; font-weight: 800; margin: .25rem 0 .75rem; }
.single-product .star-rating { margin-left: .5rem; vertical-align: middle; }
.single-product .cart .quantity .qty { max-width: 120px; }
.single-product .product_meta { border-top: 1px solid var(--bf-border); padding-top: var(--bf-space-4); margin-top: var(--bf-space-4); font-size: .9375rem; }
.single-product .woocommerce-tabs { margin-top: var(--bf-space-7); }
.single-product .woocommerce-tabs ul.tabs { border-bottom: 1px solid var(--bf-border); }
.single-product .woocommerce-tabs ul.tabs li a { padding: .75rem 1rem; display: inline-block; font-weight: 600; }
.single-product .related, .single-product .upsells { margin-top: var(--bf-space-7); }

/* Layout 1 */
body.product-single-layout-1 .single-product .product .entry-title { margin-top: 0; }
/* Layout 2 */
body.product-single-layout-2 .single-product .product .entry-title { margin-top: 0; }

/* Responsive stacking */
@media (max-width: 991.98px) {
  .single-product .product .images, .single-product .product .summary { margin-bottom: var(--bf-space-6); }
}

/* ==========================================================================
   10. FAQ (dl.bf-faq)
   ========================================================================== */
.bf-faq { border-top: 1px solid var(--bf-border); }
.bf-faq dt {
  position: relative; cursor: pointer; padding: var(--bf-space-4) var(--bf-space-6) var(--bf-space-4) var(--bf-space-4);
  margin: 0; border-bottom: 1px solid var(--bf-border); font-weight: 700;
}
.bf-faq dt::after {
  content: "+"; position: absolute; right: var(--bf-space-4); top: 50%; transform: translateY(-50%);
  color: var(--bf-muted); font-weight: 900;
}
.bf-faq dt.is-open::after { content: "–"; }
.bf-faq dd {
  margin: 0; padding: 0 var(--bf-space-4) var(--bf-space-4) var(--bf-space-4);
  display: none; color: var(--bf-body-fg); background: #fff;
  border-bottom: 1px solid var(--bf-border);
}
.bf-faq dd.show { display: block; }

/* ==========================================================================
   11. MISC / Helpers
   ========================================================================== */
.breadcrumb { --bs-breadcrumb-divider-color: var(--bf-muted); color: var(--bf-muted); }
.table { border-color: var(--bf-border); }
.table thead th { background: #fafafa; }
.position-relative > .stretched-link { z-index: 1; }

/* ==========================================================================
   12. Responsive Type Scale
   ========================================================================== */
@media (min-width: 576px) {
  :root { --bf-h1: 2.25rem; --bf-h2: 2rem; --bf-h3: 1.625rem; }
}
@media (min-width: 768px) {
  :root { --bf-h1: 2.5rem; --bf-h2: 2.125rem; --bf-h3: 1.75rem; }
}
@media (min-width: 992px) {
  :root { --bf-h1: 2.75rem; --bf-h2: 2.25rem; --bf-h3: 1.875rem; }
}
@media (min-width: 1200px) {
  :root { --bf-h1: 3rem; --bf-h2: 2.5rem; --bf-h3: 2rem; }
}

/* ==========================================================================
   13. Print
   ========================================================================== */
@media print {
  .site-header, .site-footer, .sidebar, .widget-area, .primary-nav, .post-navigation { display: none !important; }
  a[href]:after { content: " (" attr(href) ")"; font-size: .875em; color: var(--bf-muted); }
}

/* ==========================================================================
   APPENDED: Original BrandFlex theme.css (kept to preserve original look)
   Notes:
   - Comments translated to English.
   - Rules left intact to maintain previous appearance.
   ========================================================================== */

/* Base */
:root { scroll-behavior: smooth; }
.theme-brandflex .site-content { min-height: 50vh; }

/* Utilities */
.bf-container-narrow { max-width: 840px; margin-inline: auto; }

/* === Mobile Offcanvas Sidebar === */
.offcanvas.bf-offcanvas-sidebar { --bs-offcanvas-width: 80vw; }

/* Admin bar offset for Offcanvas (WP 32px / 46px) */
.admin-bar .offcanvas.bf-offcanvas-sidebar { top: 32px; height: calc(100% - 32px); }
@media (max-width: 782px) {
  .admin-bar .offcanvas.bf-offcanvas-sidebar { top: 46px; height: calc(100% - 46px); }
}

/* Floating toggle for mobile offcanvas (left center; < lg only) */
@media (max-width: 991.98px) {
  .bf-offcanvas-toggle {
    position: fixed; left: .5rem; top: 50%; transform: translateY(-50%);
    z-index: 1051;
  }
}

/* ===== Header icons ===== */
.bf-header-icons .nav-link, .bf-header-icons .btn { line-height: 1; }
.bf-header-icons .icon-btn { position: relative; padding: .25rem .5rem; }
/* Cart badge tweak */
#bfCartCount { font-size: .65rem; min-width: 1.25rem; }

/* Offcanvas (Account/Cart) admin bar offset */
.admin-bar .offcanvas.bf-offcanvas-end { top: 32px; height: calc(100% - 32px); }
@media (max-width: 782px) {
  .admin-bar .offcanvas.bf-offcanvas-end { top: 46px; height: calc(100% - 46px); }
}

/* Header search collapse spacing */
#bfHeaderSearch.collapse { margin-top: .5rem; }

/* Mobile brand logo size */
.bf-mobile-brand img { max-height: 36px; height: auto; }

/* Offcanvas (Account/Cart) admin bar offset (dup kept for safety) */
.admin-bar .offcanvas.bf-offcanvas-end { top: 32px; height: calc(100% - 32px); }
@media (max-width: 782px) {
  .admin-bar .offcanvas.bf-offcanvas-end { top: 46px; height: calc(100% - 46px); }
}

/* Offcanvas: nav (left 80% width) */
.offcanvas.bf-offcanvas-nav { --bs-offcanvas-width: 80vw; }

/* Admin bar offset for both sides */
.admin-bar .offcanvas.bf-offcanvas-start,
.admin-bar .offcanvas.bf-offcanvas-end { top: 32px; height: calc(100% - 32px); }
@media (max-width: 782px) {
  .admin-bar .offcanvas.bf-offcanvas-start,
  .admin-bar .offcanvas.bf-offcanvas-end { top: 46px; height: calc(100% - 46px); }
}

/* Global mobile offcanvas width control (<992px) */
@media (max-width: 991.98px) {
  .offcanvas.bf-offcanvas-mobile { --bs-offcanvas-width: var(--bf-mobile-offcanvas-width); }
}

/* Sticky Header */
.bf-sticky-header {
  position: sticky; top: 0; z-index: 1030; background: var(--bs-body-bg);
}
.admin-bar .bf-sticky-header { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .bf-sticky-header { top: 46px; }
}

/* Topbar */
.sticy-topbar-wrap {width:100%;}
.bf-topbar {}
.bf-topbar .widget { margin-bottom: 0; }

/* Sticky fallback via JS vars: --bf-sticky-top / --bf-sticky-height */
#site-header { min-height: var(--bf-sticky-height, auto); }
.bf-sticky-header.is-fixed {
  position: fixed; top: var(--bf-sticky-top, 0); left: 0; right: 0; z-index: 1030; background: var(--bs-body-bg);
}

/* Mega menu: navbar as positioning context */
.navbar { position: relative; }

/* Mega menu full-width */
.dropdown-menu.bf-mega-menu { left: 0; right: 0; }
/* Responsive equal columns */
.dropdown-menu.bf-mega-menu > .bf-mega {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 1rem;
}
.dropdown-menu.bf-mega-menu > .bf-mega > li { list-style: none; }
.bf-mega-col a { text-decoration: none; }
.bf-item-desc :where(p){ margin-bottom: .5rem; }

/* Classic submenu container (hidden by JS with d-none) */
.bf-submenu { padding-left: 0; margin: .25rem 0 0 0; }
.bf-submenu > li > a { display: block; padding: .25rem .5rem; }

/* Mobile offcanvas nav scroll handled by Bootstrap */

/* Additional quick tweaks */
.navbar .dropdown-toggle::after { display: none; }
.bf-caret { font-size: .8rem; line-height: 1; vertical-align: middle; }

.bf-circle {
  width: 28px; height: 28px; border-radius: 9999px;
  border: 1px solid var(--bs-secondary-color, #6c757d);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; line-height: 1;
}
.bf-arrow-btn.is-open { background-color: rgba(0,0,0,.06); }
.bf-arrow { font-size: 14px; }

.bf-mobile-desc :where(p){ margin-bottom: .5rem; }

/* Flyout submenu */
.dropdown-menu.bf-flyout { position:absolute; top:0; left:100%; margin-left:.25rem; min-width:12rem; display:none; }
.dropdown-menu.bf-flyout.show { display:block; }

/* Mega menu centered to viewport width */
.dropdown-menu.bf-mega-menu { left: 50%; transform: translateX(-50%); width: 100vw; }
.bf-mega-inner .bf-mega { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:1rem; }

.bf-mobile-sidebar-toggle { z-index: 1045; }

/* Logo + tagline stack helper (layouts 3/6/7) */
.bf-brand--stack .custom-logo-link,
.bf-brand--stack .site-title { display: block; }
.bf-brand--stack .site-description { display: block; margin-top: .25rem; font-size: .875rem; opacity: .8; }

/* Header inline search reset */
.bf-header-search-inline :where(form){ margin: 0; }

/* FAQ short styles (legacy accordion version) */
.bf-faq-accordion .faq-toggle{ background:#fff; border:0; }
.bf-faq-accordion .faq-toggle:focus{ outline:2px solid rgba(0,0,0,.1) }
.bf-faq-accordion .faq-icon::before{ content:"+"; display:inline-block; font-weight:700 }
.bf-faq-accordion .faq-toggle:not(.collapsed) .faq-icon::before{ content:"–" }


/* ==========================================================================
   FIX: Admin bar-safe offsets for mobile header & offcanvas
   - Apply offsets ONLY when body has .admin-bar
   - Visitors see no gap at the top
   ========================================================================== */

/* 1) Single source of truth for admin bar height */
:root { --bf-adminbar-h: 0px; }          /* default for visitors */
.admin-bar { --bf-adminbar-h: 32px; }    /* desktop toolbar */
@media (max-width: 782px) {
  .admin-bar { --bf-adminbar-h: 46px; }  /* mobile toolbar */
}

/* 2) Sticky header must always stick to viewport top (no forced gap) */
.bf-sticky-header { top: 0; }                     /* ensure no inherited top */
.admin-bar .bf-sticky-header { top: 0; }          /* override any earlier rules */

/* 3) Only fixed header needs an offset when admin bar shows */
.admin-bar .bf-sticky-header.is-fixed {
  top: var(--bf-adminbar-h);                      /* header sits right below toolbar */
}

/* 4) Offcanvas (nav/account/cart) shift only for admin users */
.admin-bar .offcanvas.bf-offcanvas-mobile,
.admin-bar .offcanvas.bf-offcanvas-start,
.admin-bar .offcanvas.bf-offcanvas-end {
  top: var(--bf-adminbar-h);
  height: calc(100% - var(--bf-adminbar-h));
}

/* 5) Anchor scroll & in-page jump better behavior */
html { scroll-padding-top: var(--bf-adminbar-h); }



/******other css*****/

/* ---------- Checkout Page Layout (Desktop only) ---------- */
@media (min-width: 992px) {

  /* 整体两栏布局 */
  form.checkout {
    display: flex;
    flex-wrap: nowrap;
    gap: 30px;
    align-items: flex-start;
  }

  /* 左栏 - 客户详情 */
  #customer_details {
    width: 50%;
  }

  /* col-1 与 col-2 上下排列 */
  #customer_details .col-1,
  #customer_details .col-2 {
    width: 100%;
    float: none;
    clear: both;
  }

  /* 右栏 - 订单信息 */
  #order_review {
    width: 50%;
    background: #fafafa;
    border: 1px solid #eee;
    padding: 25px;
    box-sizing: border-box;
	position: sticky;
    top: 20px;
  }

  /* 标题 */
  #order_review_heading {
    display:none;
  }
}

/* ---------- Mobile default behavior保持WooCommerce默认 ---------- */
@media (max-width: 991px) {
  form.checkout {
    display: block;
  }
  #customer_details,
  #order_review {
    width: 100%;
  }
}