/* ============================
   Hold & Bold – Single Product (ONE CSS)
   CLEANED + UPDATED (2.2.0)
   - Pricing like ref (now/was/%off/taxes)
   - Thumbnail row becomes slider (arrows + horizontal scroll)
   - Mobile title smaller
   - Why you’ll love it = 4 + 2 grid (premium)
   - Sticky mobile bar CTA styling
   ============================ */

/* -----------------------------
   RESET OceanWP/Woo edges
------------------------------ */
body.single-product #content-wrap,
body.single-product .content-area,
body.single-product .site-content,
body.single-product .container,
body.single-product .oceanwp-row{
  border:0 !important;
  box-shadow:none !important;
  background:#fff !important;
}
body.single-product hr,
body.single-product .woocommerce-breadcrumb,
body.single-product .oceanwp-breadcrumb,
body.single-product .page-header{ display:none !important; }

/* Hide Woo short description */
body.single-product .woocommerce-product-details__short-description,
body.single-product .summary .woocommerce-product-details__short-description{
  display:none !important;
}

/* Remove OceanWP sidebar on product pages */
body.single-product #left-sidebar,
body.single-product #right-sidebar,
body.single-product #sidebar{
  display:none !important;
}
body.single-product .content-area{ width:100% !important; }

/* Base spacing */
body.single-product .site-content{ padding-top:26px !important; }

/* -----------------------------
   HERO
------------------------------ */
.hb-hero{ background:#fff; padding:18px 0 10px; }
.hb-hero__wrap{
  max-width:1340px; margin:0 auto; padding:0 18px;
  display:grid; grid-template-columns:1.05fr 0.95fr;
  gap:28px; align-items:start;
}
.hb-hero__media{
  border:1px solid #E6E7EB; border-radius:22px; background:#fff; padding:14px;
  box-shadow:0 10px 26px rgba(0,0,0,0.05);
}
.hb-hero__media .woocommerce-product-gallery{ width:100% !important; margin:0 !important; }
.hb-hero__content{ padding-top:6px; }
.hb-hero__eyebrow{ font-size:12px; letter-spacing:.12em; font-weight:800; color:#6B7280; margin-bottom:10px; }
.hb-hero__title{ margin:0 0 10px; font-size:30px; line-height:1.12; color:#0B0B0F; font-weight:900; }
.hb-hero__subtitle{ margin:0 0 14px; color:#4B5563; font-size:14px; line-height:1.5; }
.hb-hero__price{ margin:0 0 12px; }

/* Mobile title smaller */
@media (max-width: 767px){
  .hb-hero__title{ font-size:22px; line-height:1.15; margin-bottom:8px; }
  .hb-hero__subtitle{ font-size:13px; }
}

/* -----------------------------
   PRICE (LIKE REF)
------------------------------ */
.hb-price{ margin:0; }
.hb-price__row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.hb-price__now{
  font-size:30px;
  line-height:1;
  font-weight:950;
  color:#0B0B0F;
}
.hb-price__was{
  font-size:18px;
  font-weight:900;
  color:rgba(11,11,15,.35);
  text-decoration:line-through;
}
.hb-price__off{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:10px;
  background:#FFE94A;
  color:#0B0B0F;
  font-weight:950;
  font-size:12.5px;
  letter-spacing:.02em;
}
.hb-price__tax{
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  color:rgba(11,11,15,.55);
}
@media (max-width: 767px){
  .hb-price__now{ font-size:26px; }
  .hb-price__was{ font-size:16px; }
}

/* -----------------------------
   BADGES
------------------------------ */
.hb-hero__badges{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px; }
.hb-badge{
  display:inline-flex; align-items:center;
  padding:8px 10px; border:1px solid #E6E7EB; border-radius:999px;
  background:#FAFAFB; color:#111827; font-size:12.5px; font-weight:700;
}

/* -----------------------------
   CTA (Woo add-to-cart)
------------------------------ */
.hb-hero__cta .quantity{ margin-right:10px !important; }
.hb-hero__cta .single_add_to_cart_button{
  background:#0B0B0F !important; color:#fff !important;
  border-radius:14px !important; padding:14px 18px !important;
  font-weight:900 !important; border:none !important;
}
.hb-hero__cta .single_add_to_cart_button:hover{ opacity:.92; }

/* -----------------------------
   TRUST CHIPS
------------------------------ */
.hb-hero__trust{ margin-top:14px; display:flex; flex-wrap:wrap; gap:10px; }
.hb-trustchip{ font-size:12.5px; color:#111827; font-weight:800; border-left:3px solid #0B0B0F; padding-left:10px; }

/* -----------------------------
   ENGRAVING
------------------------------ */
.hb-engrave{
  margin:14px 0 14px; padding:14px;
  border:1px solid #E6E7EB; border-radius:18px; background:#FAFAFB;
}
.hb-engrave__title{ font-weight:900; color:#0B0B0F; font-size:14px; }
.hb-engrave__hint{ color:#6B7280; font-size:12.5px; margin-top:4px; }
.hb-engrave__grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }
.hb-engrave__label{ display:block; font-size:12px; font-weight:800; color:#111827; margin-bottom:6px; }
.hb-engrave input, .hb-engrave select{
  width:100%; border:1px solid #E6E7EB; border-radius:14px;
  padding:10px 12px; font-size:13px; background:#fff; outline:none;
}
.hb-engrave__preview{ margin-top:12px; }
.hb-engrave__previewLabel{ font-size:12px; font-weight:800; color:#111827; margin-bottom:6px; }
.hb-engrave__previewBox{ border:1px dashed #D1D5DB; background:#fff; border-radius:14px; padding:12px; }
#hb_engrave_preview{ display:block; font-size:22px; line-height:1.1; letter-spacing:.02em; color:#0B0B0F; }

/* Font classes */
.hb-font-sans{ font-family:"Poppins",system-ui,-apple-system,"Segoe UI",Arial,sans-serif; }
.hb-font-serif{ font-family:Georgia,"Times New Roman",serif; }
.hb-font-script{ font-family:"Brush Script MT","Segoe Script","Snell Roundhand",cursive; }
.hb-font-mono{ font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; }

@media (max-width: 767px){
  .hb-engrave__grid{ grid-template-columns:1fr; }
}

/* -----------------------------
   GALLERY: make default Woo pieces clean
------------------------------ */
.hb-hero__media .woocommerce-product-gallery__trigger{ display:none !important; }
.hb-hero__media .onsale{ display:none !important; } /* optional: remove sale bubble */

/* -----------------------------
   THUMBNAILS = SLIDER (NO LIB)
   JS wraps thumbs in:
   .hb-thumbs > .hb-thumbs__viewport + arrows
------------------------------ */
.hb-thumbs{
  position:relative;
  margin-top:12px;
  padding:0 34px; /* room for arrows */
}
.hb-thumbs__viewport{
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  scrollbar-width:none;
}
.hb-thumbs__viewport::-webkit-scrollbar{ display:none; }

/* Ensure thumbs row stays horizontal */
.hb-thumbs ol.flex-control-thumbs,
.hb-thumbs ul.flex-control-thumbs,
.hb-thumbs .flex-control-nav.flex-control-thumbs{
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:10px !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
}

/* Thumb items */
.hb-thumbs li{
  flex:0 0 auto !important;
  margin:0 !important;
}
.hb-thumbs img{
  width:64px !important;
  height:64px !important;
  object-fit:cover !important;
  border-radius:14px !important;
  border:1px solid rgba(11,11,15,.12) !important;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
@media (hover:hover){
  .hb-thumbs img:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(0,0,0,.10); }
}

/* Active thumb (Woo adds .flex-active) */
.hb-thumbs .flex-active,
.hb-thumbs .flex-active img{
  border-color:rgba(11,11,15,.45) !important;
}

/* Arrow buttons */
.hb-thumbs__btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:30px;
  height:30px;
  border-radius:999px;
  border:1px solid rgba(11,11,15,.14);
  background:rgba(255,255,255,.95);
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  display:none; /* default hidden unless overflow */
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
}
.hb-thumbs__btn span{ font-size:22px; line-height:1; color:#0B0B0F; font-weight:900; }
.hb-thumbs__btn--prev{ left:6px; }
.hb-thumbs__btn--next{ right:6px; }
.hb-thumbs.hb-thumbs--scroll .hb-thumbs__btn{ display:flex; }

@media (max-width: 767px){
  .hb-thumbs{ padding:0 30px; }
  .hb-thumbs img{ width:58px !important; height:58px !important; border-radius:13px !important; }
}

/* -----------------------------
   SECTIONS + TYPO
------------------------------ */
.hb-section{ padding:28px 0; }
.hb-section--muted{ background:#F7F7F8; padding:48px 0; }
.hb-wrap{ max-width:1240px; margin:0 auto; padding:0 18px; }
.hb-h2{ margin:0 0 14px; font-size:20px; font-weight:900; color:#0B0B0F; }
.hb-h3{ margin:0 0 10px; font-size:16px; font-weight:900; color:#0B0B0F; }

/* -----------------------------
   WHY YOU’LL LOVE IT (4 + 2)
------------------------------ */
.hb-featuregrid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:14px;
}
.hb-featurecard{
  background:#fff;
  border:1px solid rgba(11,11,15,.10);
  border-radius:18px;
  padding:18px;
  box-shadow:0 10px 26px rgba(0,0,0,.05);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  min-width:0;
}
@media (hover:hover){
  .hb-featurecard:hover{
    transform: translateY(-2px);
    box-shadow:0 16px 40px rgba(0,0,0,.08);
    border-color: rgba(11,11,15,.16);
  }
}
.hb-featurecard__icon{ width:28px; height:28px; object-fit:contain; margin-bottom:12px; }
.hb-featurecard__title{ font-weight:950; color:#0B0B0F; margin-bottom:6px; font-size:15px; }
.hb-featurecard__text{ color:rgba(11,11,15,.70); font-size:13.5px; line-height:1.6; }

/* Make last 2 cards wide (assumes 6 total like ref) */
.hb-featuregrid .hb-featurecard:nth-last-child(2),
.hb-featuregrid .hb-featurecard:last-child{
  grid-column: span 2;
}

@media (max-width: 1024px){
  .hb-featuregrid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .hb-featuregrid .hb-featurecard:nth-last-child(2),
  .hb-featuregrid .hb-featurecard:last-child{ grid-column:auto; }
}
@media (max-width: 767px){
  .hb-featuregrid{ grid-template-columns:1fr; gap:12px; }
}

/* -----------------------------
   BENEFITS (premium)
------------------------------ */
.hb-section--muted .hb-h2{
  font-size:28px;
  letter-spacing:-0.02em;
  margin-bottom:18px;
}
.hb-benefits{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.hb-benefit{
  background:#ffffff;
  border:1px solid rgba(17,17,17,0.08);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(17,17,17,0.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
@media (hover:hover){
  .hb-benefit:hover{
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(17,17,17,0.10);
    border-color: rgba(17,17,17,0.14);
  }
}
.hb-benefit__grid{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items:stretch;
  min-height: 240px;
}
.hb-benefit.is-reverse .hb-benefit__grid{
  grid-template-columns: 0.85fr 1.15fr;
}
.hb-benefit.is-reverse .hb-benefit__content{ order:2; }
.hb-benefit.is-reverse .hb-benefit__media{ order:1; }

.hb-benefit__content{
  padding:26px;
  position:relative;
}
.hb-benefit__content:before{
  content:"";
  position:absolute;
  left:0;
  top:18px;
  bottom:18px;
  width:4px;
  border-radius:999px;
  background: linear-gradient(180deg, #111111, rgba(17,17,17,0.15));
  opacity:0.18;
}
.hb-benefit__content .hb-h3{
  font-size:20px;
  line-height:1.2;
  letter-spacing:-0.02em;
  margin:0 0 12px;
}
.hb-bullets{
  list-style:none;
  padding:0;
  margin:0 0 12px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.hb-bullets li{
  position:relative;
  padding-left:22px;
  color:#222;
  line-height:1.55;
  font-size:14.5px;
}
.hb-bullets li:before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  width:12px;
  height:12px;
  border-radius:999px;
  border:1px solid rgba(17,17,17,0.25);
  background: radial-gradient(circle at 35% 35%, rgba(17,17,17,0.12), transparent 55%);
}
.hb-note{
  margin-top:10px;
  padding:12px 14px;
  border-radius:14px;
  background:#f7f7f8;
  border:1px solid rgba(17,17,17,0.08);
  font-weight:600;
  font-size:13.5px;
  color:#111;
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.hb-note:before{
  content:"";
  width:6px;
  height:6px;
  border-radius:999px;
  background:#111;
  opacity:0.35;
  margin-top:7px;
  flex:0 0 auto;
}
.hb-benefit__media{
  position:relative;
  min-height:240px;
  background: linear-gradient(135deg, #f1f2f4, #fbfbfc);
}
.hb-benefit__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(1.05) contrast(1.02);
  transform:scale(1.02);
  transition:transform .25s ease;
}
@media (hover:hover){
  .hb-benefit:hover .hb-benefit__media img{ transform:scale(1.06); }
}
.hb-benefit__ph{
  width:100%;
  height:100%;
  min-height:240px;
  background:
    radial-gradient(circle at 25% 20%, rgba(0,0,0,0.06), transparent 60%),
    linear-gradient(135deg, #f0f1f3, #fbfbfc);
}
.hb-benefit__media:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(0,0,0,0.00), rgba(0,0,0,0.05));
}
@media (max-width: 767px){
  .hb-section--muted{ padding:34px 0; }
  .hb-benefit__grid{
    display:flex !important;
    flex-direction:column !important;
    min-height:unset;
  }
  .hb-benefit__media{ order:1 !important; aspect-ratio:16/10; min-height:unset; }
  .hb-benefit__content{ order:2 !important; padding:18px; }
  .hb-benefit__content:before{
    left:18px;
    top:14px;
    bottom:auto;
    width:44px;
    height:4px;
    border-radius:999px;
  }
  .hb-benefit__media img{
    transform:none !important;
    filter:none;
  }
}

/* -----------------------------
   SPECS
------------------------------ */
.hb-specgrid{ display:grid; grid-template-columns:1.2fr .8fr; gap:14px; }
.hb-card{ background:#fff; border:1px solid #E6E7EB; border-radius:18px; padding:16px; }
.hb-card__title{ font-weight:700; margin-bottom:12px; color:#0B0B0F; }
.hb-specs__row{ display:flex; justify-content:space-between; gap:14px; padding:10px 0; border-top:1px solid #F0F1F3; }
.hb-specs__row:first-child{ border-top:0; }
.hb-specs__label{ color:#6B7280; font-weight:800; font-size:12.5px; margin:0; }
.hb-specs__value{ color:#0B0B0F; font-weight:800; font-size:12.5px; margin:0; text-align:right; }
.hb-boxlist{ list-style:none; padding:0; margin:0; }
.hb-boxlist li{ display:flex; justify-content:space-between; padding:10px 0; border-top:1px solid #F0F1F3; }
.hb-boxlist li:first-child{ border-top:0; }
.hb-boxlist__item{ font-weight:800; color:#0B0B0F; }
.hb-boxlist__qty{ color:#6B7280; font-weight:900; }

@media (max-width: 1024px){
  .hb-specgrid{ grid-template-columns:1fr; }
}

/* -----------------------------
   FAQ
------------------------------ */
.hb-accordion{ border:1px solid #E6E7EB; border-radius:18px; overflow:hidden; background:#fff; }
.hb-accitem + .hb-accitem{ border-top:1px solid #F0F1F3; }
.hb-accbtn{
  width:100%; text-align:left; background:#fff; border:0;
  padding:14px 16px; display:flex; align-items:center; justify-content:space-between;
  font-weight:700; color:#0B0B0F;
}
.hb-acca{ padding:0 16px 14px; color:#4B5563; line-height:1.7; font-size:13px; }
.hb-accicon{ width:20px; height:20px; border-radius:999px; border:1px solid #E6E7EB; position:relative; }
.hb-accicon:before,.hb-accicon:after{ content:""; position:absolute; background:#0B0B0F; left:50%; top:50%; transform:translate(-50%,-50%); }
.hb-accicon:before{ width:10px; height:2px; }
.hb-accicon:after{ width:2px; height:10px; }
.hb-accbtn[aria-expanded="true"] .hb-accicon:after{ display:none; }

/* -----------------------------
   STICKY BUY BAR (mobile only)
------------------------------ */
.hb-stickybuy{
  position:fixed; left:0; right:0; bottom:-120px;
  z-index:99999; padding:10px 12px;
  background:rgba(255,255,255,0.96);
  backdrop-filter:blur(10px);
  border-top:1px solid #E6E7EB;
  transition:bottom .25s ease;
}
.hb-stickybuy.is-visible{ bottom:0; }
.hb-stickybuy__inner{
  max-width:1240px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.hb-stickybuy__title{
  font-size:12px; font-weight:900; color:#0B0B0F;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:55vw;
}

/* Sticky uses tighter price */
.hb-price--sticky .hb-price__now{ font-size:15px; }
.hb-price--sticky .hb-price__was{ font-size:12px; }
.hb-price--sticky .hb-price__off{ padding:5px 8px; font-size:11px; border-radius:9px; }
.hb-price--sticky .hb-price__tax{ display:none; }

.hb-stickybuy__btn{
  background:#0B0B0F; color:#fff;
  border:0; border-radius:14px;
  padding:12px 14px;
  font-weight:950;
  font-size:13px;
}
.hb-stickybuy__btn:active{ transform:translateY(1px); }

@media (min-width:768px){ .hb-stickybuy{ display:none !important; } }

/* -----------------------------
   REVIEWS
------------------------------ */
.hb-reviews__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.hb-reviews__title{ font-size:20px; font-weight:900; color:#0B0B0F; }
.hb-btn{ background:#0B0B0F; color:#fff; border:0; border-radius:12px; padding:10px 12px; font-weight:900; font-size:13px; }
.hb-reviews__grid{ display:grid; grid-template-columns:320px 1fr; gap:16px; align-items:start; }
.hb-reviewSummary{ background:#fff; border:1px solid #E6E7EB; border-radius:18px; padding:16px; }
.hb-reviewSummary__avg{ font-size:40px; font-weight:900; color:#0B0B0F; line-height:1; }
.hb-reviewSummary__count{ color:#6B7280; font-weight:800; margin-top:6px; }
.hb-reviewBars{ margin-top:14px; display:flex; flex-direction:column; gap:10px; }
.hb-reviewBar{ display:grid; grid-template-columns:52px 1fr 34px; gap:10px; align-items:center; }
.hb-reviewBar__label{ font-weight:800; color:#111827; font-size:12px; }
.hb-reviewBar__track{ height:8px; background:#EEF0F3; border-radius:999px; overflow:hidden; }
.hb-reviewBar__fill{ display:block; height:100%; background:#0B0B0F; border-radius:999px; }
.hb-reviewBar__num{ text-align:right; font-weight:900; color:#6B7280; font-size:12px; }

.hb-reviewList{ background:#fff; border:1px solid #E6E7EB; border-radius:18px; padding:16px; }
.hb-reviewList__head{ font-weight:900; color:#0B0B0F; margin-bottom:10px; }

@media (max-width: 1024px){
  .hb-hero__wrap{ grid-template-columns:1fr; gap:18px; }
  .hb-reviews__grid{ grid-template-columns:1fr; }
}
@media (max-width: 767px){
  .hb-reviews__top{ flex-direction:column; align-items:flex-start; }
  body.single-product .site-content{ padding-top:0 !important; }
  .hb-hero{ padding:12px 0 10px; }
}

/* Prevent accidental horizontal scroll */
html, body{ max-width:100%; overflow-x:hidden; }
.hb-hero *, .hb-section *, .hb-wrap *, .hb-benefit *, .hb-featuregrid *, .hb-specgrid *{ box-sizing:border-box; }
/* =====================================================
   FIX: Mobile gallery / thumbs getting CUT above next section
   (add at END of hb-product.css)
===================================================== */
@media (max-width: 767px){

  /* 1) Never clip gallery area */
  .hb-hero,
  .hb-hero__wrap,
  .hb-hero__media{
    overflow: visible !important;
  }

  /* 2) Ensure gallery wrapper expands naturally */
  .hb-hero__media .woocommerce-product-gallery,
  .hb-hero__media .woocommerce-product-gallery__wrapper,
  .hb-hero__media .flex-viewport{
    height: auto !important;
    max-height: none !important;
  }

  /* 3) Flexslider sometimes clips thumbs because parent sets overflow hidden */
  .hb-hero__media .woocommerce-product-gallery{
    overflow: visible !important;
  }

  /* 4) Give guaranteed space under thumbs so next section doesn't overlap */
  .hb-hero__media{
    padding-bottom: 18px !important;
    margin-bottom: 14px !important;
  }

  /* 5) Our thumbs slider wrapper: add breathing room */
  .hb-thumbs{
    margin-top: 12px !important;
    padding-bottom: 10px !important;
  }

  /* 6) If any theme rule is forcing floats that collapse height */
  .hb-hero__media .woocommerce-product-gallery,
  .hb-hero__media .woocommerce-product-gallery__wrapper{
    float: none !important;
    clear: both !important;
  }
}
/* Force Woo price color to black everywhere (Woo default is green) */
body.single-product .hb-hero__price,
body.single-product .hb-hero__price *,
body.single-product .hb-stickybuy__price,
body.single-product .hb-stickybuy__price *{
  color:#0B0B0F !important;
}

/* If any Woo theme rule still targets .price specifically */
body.single-product .price,
body.single-product .price *{
  color:#0B0B0F !important;
}
@media (max-width: 767px){
  #hbStickyBuy{
    display:block !important;
    bottom:0 !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }
}
/* =====================================================
   MOBILE: Make hero badges systematic (2-col grid)
===================================================== */
@media (max-width: 767px){

  .hb-hero__badges{
    display:grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap:10px !important;
    margin:12px 0 14px !important;
  }

  .hb-badge{
    width:100% !important;
    justify-content:center !important;
    text-align:center !important;

    /* cleaner look */
    padding:10px 12px !important;
    border-radius:14px !important;

    background:#ffffff !important;
    border:1px solid rgba(11,11,15,.10) !important;
    box-shadow:0 8px 18px rgba(0,0,0,.05);

    font-size:12px !important;
    font-weight:600 !important;
    color:#0B0B0F !important;

    /* prevent ugly wraps */
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  /* If odd count, last badge spans full width (looks balanced) */
  .hb-hero__badges .hb-badge:last-child:nth-child(odd){
    grid-column: 1 / -1 !important;
  }
}
/* =====================================================
   SPECS — premium redesign (mobile-first)
===================================================== */

/* Section title spacing */
.hb-section .hb-h2{
  letter-spacing:-0.01em;
}

/* Card polish */
.hb-card{
  border:1px solid rgba(11,11,15,.10) !important;
  border-radius:20px !important;
  box-shadow:0 14px 34px rgba(0,0,0,.06) !important;
}

/* Card header */
.hb-card__title{
  font-size:14px !important;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(11,11,15,.60) !important;
  margin-bottom:14px !important;
}

/* Make each row look intentional */
.hb-specs{
  margin:0;
}
.hb-specs__row{
  border-top:0 !important;
  padding:12px 0 !important;
  display:grid !important;
  grid-template-columns: 130px 1fr; /* label / value */
  gap:12px !important;
  align-items:start !important;
  position:relative;
}
.hb-specs__row + .hb-specs__row{
  border-top:1px solid rgba(11,11,15,.06) !important;
}

/* Label styling */
.hb-specs__label{
  color:rgba(11,11,15,.52) !important;
  font-weight:650 !important;
  font-size:12px !important;
  letter-spacing:.02em;
  text-transform:none;
  margin:0 !important;
}

/* Value styling (pill look) */
.hb-specs__value{
  margin:0 !important;
  text-align:left !important;
  font-weight:700 !important;
  font-size:13px !important;
  color:#0B0B0F !important;

  /* pill */
  display:inline-flex;
  align-items:center;
  padding:8px 10px;
  border-radius:14px;
  background:rgba(11,11,15,.04);
  border:1px solid rgba(11,11,15,.08);
  width:fit-content;
  max-width:100%;
}

/* Prevent ugly breaking like your screenshot */
.hb-specs__value{
  word-break:normal !important;
  overflow-wrap:anywhere;
  line-height:1.35;
}

/* Slight hover polish (desktop only) */
@media (hover:hover){
  .hb-specs__row:hover .hb-specs__value{
    background:rgba(11,11,15,.06);
    border-color:rgba(11,11,15,.12);
  }
}

/* Mobile: give label more space if needed */
@media (max-width: 767px){
  .hb-specs__row{
    grid-template-columns: 112px 1fr !important;
    padding:11px 0 !important;
  }
  .hb-specs__value{
    padding:8px 10px;
    border-radius:13px;
  }
}

/* Very small screens: stack label above value */
@media (max-width: 380px){
  .hb-specs__row{
    grid-template-columns:1fr !important;
    gap:8px !important;
  }
  .hb-specs__value{
    width:100%;
    justify-content:flex-start;
  }
}
/* =====================================================
   MOBILE: ULTRA TIGHT OUTER GUTTERS (exclude sticky)
   Add at END
===================================================== */
@media (max-width: 767px){

  /* Remove theme/container side gutters */
  body.single-product #content-wrap,
  body.single-product .site-content,
  body.single-product .content-area,
  body.single-product .container,
  body.single-product .oceanwp-row{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  /* Make all our sections use minimal side padding */
  .hb-hero__wrap,
  .hb-wrap{
    padding-left:8px !important;
    padding-right:8px !important;
  }

  /* Tighten hero vertical spacing */
  .hb-hero{ padding:8px 0 6px !important; }

  /* Reduce card padding a bit more (but keep premium) */
  .hb-hero__media{ padding:8px !important; border-radius:16px !important; }
  .hb-featurecard{ padding:12px !important; border-radius:16px !important; }
  .hb-card{ padding:12px !important; border-radius:16px !important; }
  .hb-engrave{ padding:12px !important; border-radius:16px !important; }

  /* Reduce section vertical padding */
  .hb-section{ padding:16px 0 !important; }
  .hb-section--muted{ padding:20px 0 !important; }

  /* Ensure no accidental margins create outer whitespace */
  .hb-hero,
  .hb-section{
    margin-left:0 !important;
    margin-right:0 !important;
  }

  /* Exclude sticky bar from these tightening rules */
  #hbStickyBuy,
  #hbStickyBuy *{
    margin:initial;
  }
}

/* Sticky bar untouched */
@media (max-width: 767px){
  #hbStickyBuy{
    padding:10px 12px !important; /* keep original */
  }
}
/* =====================================================
   MOBILE GALLERY – NEW CLEAN MODERN LAYOUT
   Paste at END of hb-product.css
===================================================== */
@media (max-width: 767px){

  /* Make media block feel premium + clean */
  .hb-hero__media{
    padding: 10px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(11,11,15,.10) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.08) !important;
    background:#fff !important;
  }

  /* Stack gallery parts with consistent rhythm */
  .hb-hero__media .woocommerce-product-gallery{
    display:flex !important;
    flex-direction:column !important;
    gap: 10px !important;
    overflow: visible !important;
  }

  /* Main image: clean rounded frame */
  .hb-hero__media .woocommerce-product-gallery__wrapper,
  .hb-hero__media .flex-viewport{
    border-radius: 16px !important;
    overflow: hidden !important;
    background:#fff !important;
  }

  /* Ensure the main image is not cramped */
  .hb-hero__media .woocommerce-product-gallery__image img{
    width:100% !important;
    height:auto !important;
    display:block !important;
  }

  /* ---- Thumbs strip: modern filmstrip ---- */
  .hb-thumbs{
    margin-top: 10px !important;
    padding: 0 !important;              /* no side padding (no arrows) */
  }

  .hb-thumbs__viewport{
    overflow:auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: 2px 2px 6px !important;
    scrollbar-width: none;
  }
  .hb-thumbs__viewport::-webkit-scrollbar{ display:none; }

  .hb-thumbs ol.flex-control-thumbs,
  .hb-thumbs ul.flex-control-thumbs,
  .hb-thumbs .flex-control-nav.flex-control-thumbs{
    display:flex !important;
    flex-wrap:nowrap !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style:none !important;
  }

  .hb-thumbs li{
    flex: 0 0 auto !important;
    scroll-snap-align: start;
  }

  /* Thumb look: clean tiles */
  .hb-thumbs img{
    width: 60px !important;
    height: 60px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(11,11,15,.12) !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.08) !important;
    object-fit: cover !important;
    transform: none !important;
  }

  /* Active thumb: clearer highlight (premium) */
  .hb-thumbs .flex-active img,
  .hb-thumbs img.flex-active{
    border-color: rgba(11,11,15,.55) !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.12) !important;
  }

  /* Kill thumb arrows on mobile (source of alignment pain) */
  .hb-thumbs__btn{
    display:none !important;
  }

  /* Reduce chance of “overlap” with next section */
  .hb-hero__media{
    margin-bottom: 12px !important;
  }
}
/* =====================================================
   MOBILE: tighter thumbs + "peeky" filmstrip effect
   Paste at END of hb-product.css
===================================================== */
@media (max-width: 767px){

  /* 1) Tighten the gap between thumbnails */
  .hb-thumbs ol.flex-control-thumbs,
  .hb-thumbs ul.flex-control-thumbs,
  .hb-thumbs .flex-control-nav.flex-control-thumbs{
    gap: 6px !important;              /* was 10px */
  }

  /* 2) Peeky effect: viewport slightly narrower + right padding
        so next thumb peeks in */
  .hb-thumbs__viewport{
    padding: 2px 24px 6px 2px !important; /* extra RIGHT padding creates "peek" */
    max-width: calc(100% - 18px) !important;
    margin-left: 0 !important;
  }

  /* 3) Slightly smaller thumbs so 3.x show nicely */
  .hb-thumbs img{
    width: 56px !important;
    height: 56px !important;
    border-radius: 12px !important;
  }

  /* 4) Optional: make the strip feel intentionally inset (premium) */
  .hb-thumbs{
    margin-top: 10px !important;
    padding-left: 2px !important;
  }

  /* 5) If any theme adds margins to li, kill them (prevents random gaps) */
  .hb-thumbs li{
    margin: 0 !important;
  }
}
@media (max-width: 767px){
  .hb-thumbs__viewport{
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
  }
}
/* =====================================================
   FIX: OceanWP/Woo forces 25% width on thumbs (columns-4)
   Override to compact thumbnail strip
===================================================== */

/* Make thumbs items auto-sized (not 25%) */
.hb-thumbs ol.flex-control-thumbs li,
.hb-thumbs ul.flex-control-thumbs li,
.hb-thumbs .flex-control-nav.flex-control-thumbs li{
  width: auto !important;
  float: none !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}

/* Control spacing via gap only */
.hb-thumbs ol.flex-control-thumbs,
.hb-thumbs ul.flex-control-thumbs,
.hb-thumbs .flex-control-nav.flex-control-thumbs{
  gap: 8px !important;            /* adjust 6-10 as you like */
}

/* Safety: if theme sets display:block and breaks flex */
.hb-thumbs ol.flex-control-thumbs,
.hb-thumbs ul.flex-control-thumbs,
.hb-thumbs .flex-control-nav.flex-control-thumbs{
  display: flex !important;
  flex-wrap: nowrap !important;
}
/* Sticky bar must always be above any OceanWP/woo overlays */
#hbStickyBuy{
  z-index: 999999 !important;
  pointer-events: auto !important;
}
#hbStickyBuy *{ pointer-events:auto !important; }

/* If theme adds any fixed bottom overlays, keep them below */
.oceanwp-toolbar,
#sidr,
#mobile-fullscreen-search,
.oceanwp-mobile-menu-icon{
  z-index: 99998 !important;
}
/* =========================================
   HB — LESS BOLD (HARD OVERRIDE)
========================================= */

/* Headings / titles */
body.single-product .hb-hero__title,
body.single-product .hb-h2,
body.single-product .hb-h3{
  font-weight: 650 !important;
}

/* Price */
body.single-product .hb-price__now{ font-weight:650 !important; }
body.single-product .hb-price__was{ font-weight:450 !important; }
body.single-product .hb-price__off{ font-weight:600 !important; }
body.single-product .hb-price__tax{ font-weight:500 !important; }

/* Badges / chips / labels */
body.single-product .hb-badge,
body.single-product .hb-trustchip,
body.single-product .hb-engrave__label{
  font-weight:500 !important;
}

/* Buttons */
body.single-product .hb-hero__cta .single_add_to_cart_button,
body.single-product .hb-stickybuy__btn{
  font-weight:600 !important;
}

/* Body text */
body.single-product .hb-hero__subtitle,
body.single-product .hb-featurecard__text,
body.single-product .hb-acca,
body.single-product .hb-bullets li{
  font-weight:400 !important;
}
/* ============================
   RELATED PRODUCTS SLIDER (Single Product)
   - 4 cards visible on desktop
   - horizontal slider (no wrap)
   - premium separated section
============================ */

.hbRelSlider{
  width: min(1240px, calc(100% - 36px));
  margin: 26px auto 0;
  padding: 18px;
  background: #F7F7FA;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 18px;
}

.hbRelSlider__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin: 0 0 14px;
}

.hbRelSlider__title{
  margin:0;
  font-size:18px;
  font-weight:800;
  color:#0B0B0F;
}

.hbRelSlider__nav{ display:flex; gap:10px; }

.hbRelSlider__btn{
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  color:#0B0B0F;
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease;
}
.hbRelSlider__btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
}
.hbRelSlider__btn:disabled{
  opacity:.35;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}
.hbRelSlider__btn svg{ width:18px; height:18px; }

/* viewport */
.hbRelSlider__viewport{ overflow:hidden; }

/* ✅ Force single-row slider track (no wrap) */
.hbRelSlider .hbRelSlider__track.products{
  display:flex !important;
  flex-wrap: nowrap !important;
  gap:14px !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;

  overflow-x:auto !important;
  overflow-y:hidden !important;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  scrollbar-width:none;
  scroll-snap-type:x mandatory;
}
.hbRelSlider .hbRelSlider__track.products::-webkit-scrollbar{ display:none; }

/* ✅ 4 cards visible on desktop */
.hbRelSlider{ --hbRelCols: 3; }

.hbRelSlider .hbRelSlider__track > li.product{
  flex: 0 0 calc((100% - (14px * (var(--hbRelCols) - 1))) / var(--hbRelCols)) !important;
  width: auto !important;
  margin:0 !important;
  scroll-snap-align:start;
}

/* Tablet: 3 cards */
@media (max-width: 1024px){
  .hbRelSlider{ --hbRelCols: 3; }
}

/* Mobile: 1.15 cards (peek) */
@media (max-width: 640px){
  .hbRelSlider{ --hbRelCols: 1.15; padding: 14px; }
  .hbRelSlider__title{ font-size:16px; }
}
/* ✅ FIX: Match Related slider width with rest of product page on mobile */
@media (max-width: 640px){

  /* Use the same page gutter as other sections (12px/16px style) */
  .hbRelSlider{
    max-width: none !important;
    width: calc(100% - 24px) !important;   /* 12px left + 12px right */
    margin: 18px 12px 0 !important;
    padding: 14px !important;
    border-radius: 18px !important;
    border-left: 1px solid rgba(15,23,42,.08) !important;
    border-right: 1px solid rgba(15,23,42,.08) !important;
    box-sizing: border-box !important;
  }

}