/* Static clone: layout corrections + content revealed by removed plugin scripts */
/* ---------- reveal content normally handled by the plugin JS ---------- */
#sb_instagram .sbi_item { opacity: 1 !important; visibility: visible !important; }
[data-sbi-flags] .sbi_photo { background-image: none !important; }
.woocommerce-product-gallery { opacity: 1 !important; }

/* ---------- header: fit the longer Vietnamese labels ---------- */
header .container > h1 { flex-shrink: 0; }
header .container > h1 img { flex-shrink: 0; }
#main-menu { align-items: center; }
#main-menu a.menu-item {
  padding-left: .65rem;
  padding-right: .65rem;
  font-size: 13px;
  letter-spacing: .06em;
}
header a[href="my-account.html"] img {
  margin-bottom: 0;
  padding-left: .9rem;
  padding-right: .9rem;
}
header .z-20 > .container { gap: .25rem; }
header .z-20 a.inline-block { white-space: nowrap; }

/* below xl the inline nav + account + CTA no longer fit: hide the optional bits */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  header a[href="my-account.html"],
  header button:has(> a[href="shop.html"]) { display: none !important; }
}

/* ---------- shop cards: equal height, aligned CTA ---------- */
.woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
  padding: 1rem 1rem 1.25rem;
}
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link { flex: 1 1 auto; }
.woocommerce ul.products li.product > p { margin-top: auto; margin-bottom: 0; }
.woocommerce ul.products li.product .btn-outline-primary { width: 100%; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { margin-bottom: .25rem; }
.woocommerce ul.products li.product h2.woocommerce-loop-product-type { margin: .25rem 0 0; }
.woocommerce ul.products li.product h4.woocommerce-loop-protein-type { margin: .25rem 0 .75rem; }
/* text-box-trim cuts the box shorter than the glyphs: card text then overlaps the CTA */
.text-box-trim ul.products li.product h2,
.text-box-trim ul.products li.product h3,
.text-box-trim ul.products li.product h4,
.text-box-trim ul.products li.product p {
  text-box-trim: none;
  text-box-edge: auto;
  line-height: 1.3;
}

/* ---------- product page: two balanced columns (gallery + info) ---------- */
#product-781 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 2rem;
}
#product-781 > .woocommerce-product-gallery,
#product-781 > .summary {
  float: none;
  width: calc(50% - 1rem);
  margin: 0;
}
#product-781 .summary .price {
  margin: 1.25rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(46, 74, 120, .15);
  font-size: 1.75rem;
  font-weight: 500;
}
@media (max-width: 767.98px) {
  #product-781 > .woocommerce-product-gallery,
  #product-781 > .summary { width: 100%; }
}

/* ---------- contact: align the form card with the heading ---------- */
#content .banner--content > .container { margin-left: .75rem; margin-right: .75rem; }

/* ---------- faq: tighter, readable accordion cards ---------- */
.accordion-header { gap: 1.5rem; }
.accordion-header span.grow-1 { line-height: 1.35; }


/* ---------- blog listing ---------- */
#content .index.bg-primary-200 {
  width: 100%;
  max-width: none;
  padding: 1.5rem 2rem;
}
#blog_category_filter { gap: .5rem 1rem; align-items: center; }
#blog_category_filter .filter-item a { display: inline-block; padding: .15rem .6rem; border-radius: 9999px; }
#blog_category_filter .filter-item a.active { background: var(--color-primary-600, #3a5ca0); color: #fff; }
#content ul.list-none {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .5rem;
  padding-left: 0;
  font-size: 0;
}
#content ul.list-none l,
#content ul.list-none li { display: contents; }
#content ul.list-none a {
  display: inline-block;
  font-size: 12px;
  letter-spacing: .02em;
  margin: 0;
  line-height: 1.4;
}

/* ---------- blog post ---------- */
#post-897 [class*="max-width-[800px]"] { max-width: 51rem; }
.nav--post-terms { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: 0; margin-top: .75rem; }
.nav--post-terms a { font-size: 14px; }
#post-897 .flex.inline-flex:has(h6) { align-items: center; gap: .75rem; }
#post-897 .flex.inline-flex:has(h6) p { margin-top: 0 !important; }

/* ---------- small screens: keep the hero readable ---------- */
@media (max-width: 767.98px) {
  .carousel-caption h1 { font-size: 2.125rem; line-height: 1.16; }
  .carousel-caption h4 { font-size: 1.125rem; line-height: 1.4; margin-bottom: 1.25rem; }
  #banner_carousel .carousel-caption { padding-bottom: 2rem; }
}
#content .flex.flex-wrap.justify-center.-mx-4 { margin-left: 0; margin-right: 0; }

/* ---------- contact: keep the composition inside 1024-1279 ---------- */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  #content .form-contact {
    display: flex;
    flex-wrap: wrap;
    column-gap: 2rem;
    row-gap: 1.5rem;
    padding-left: .5rem;
    padding-right: .5rem;
  }
  /* flatten the prose wrapper so heading / card / contact details stack in a sane order */
  #content .form-contact > .prose { display: contents; }
  #content .form-contact .prose > div:first-child {
    order: 1;
    width: 100%;
    min-width: 0 !important;
    padding: 0;
  }
  #content .form-contact > div:last-child { order: 2; width: 100%; margin: 0 !important; }
  #content .form-contact .prose > div:last-child {
    order: 3;
    width: 100% !important;
    margin: 0 !important;
    padding: 0;
  }
  #content .banner--content {
    position: static !important;
    width: 100% !important;
    margin: 0 !important;
  }
  #content .banner--content > .container { width: 100%; }
  #content .form-contact .prose > div:last-child h4 { margin-bottom: .75rem; }
}

/* ---------- footer: steady rhythm ---------- */
#footer h4 { letter-spacing: .01em; }
#footer .social-icons { display: flex; gap: .25rem; }
