/* ============================================================
   HÒA CƯỜNG — CRITICAL: restore Flatsome .row flex layout
   Bug: my polish CSS or some rule broke .row → display:block
   Effect: product grid xếp 1 cột thay vì 3-4 cột
   ============================================================ */

/* Force .row back to flex on archive/single product pages */
.archive .products.row,
.tax-product_cat .products.row,
.single-product .related .products.row,
.products.row.row-small,
.products.row.row-large,
.products.row.large-columns-3,
.products.row.large-columns-4,
.products.row.large-columns-6 {
  display: flex !important;
  flex-wrap: wrap !important;
}

/* Flatsome default column widths — restore */
.products.row.large-columns-3 > .col,
.products.row.large-columns-3 > .product {
  flex: 0 0 33.333% !important;
  max-width: 33.333% !important;
  padding: 0 10px 20px !important;
}
.products.row.large-columns-4 > .col,
.products.row.large-columns-4 > .product {
  flex: 0 0 25% !important;
  max-width: 25% !important;
  padding: 0 10px 20px !important;
}
.products.row.large-columns-6 > .col,
.products.row.large-columns-6 > .product {
  flex: 0 0 16.666% !important;
  max-width: 16.666% !important;
  padding: 0 10px 20px !important;
}

/* Medium breakpoint */
@media (max-width: 1023px) {
  .products.row.large-columns-3 > .col,
  .products.row.large-columns-3 > .product,
  .products.row.large-columns-4 > .col,
  .products.row.large-columns-4 > .product,
  .products.row.medium-columns-3 > .col,
  .products.row.medium-columns-3 > .product {
    flex: 0 0 33.333% !important;
    max-width: 33.333% !important;
  }
}

/* Mobile */
@media (max-width: 549px) {
  .products.row > .col,
  .products.row > .product,
  .products.row.small-columns-2 > .col,
  .products.row.small-columns-2 > .product {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding: 0 6px 12px !important;
  }
}

/* Container max-width restore */
.products.row,
body .archive .products.row,
body .tax-product_cat .products.row {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 -10px !important;
}

/* PDP layout — ensure .row flex, KEEP Flatsome large-X widths intact */
body.single-product .product-main .row {
  display: flex !important;
  flex-wrap: wrap !important;
}
/* Restore Flatsome large-X widths (was broken by other rules) */
body.single-product .product-main .large-4 { flex: 0 0 33.333% !important; max-width: 33.333% !important; }
body.single-product .product-main .large-5 { flex: 0 0 41.666% !important; max-width: 41.666% !important; }
body.single-product .product-main .large-3 { flex: 0 0 25% !important; max-width: 25% !important; }
body.single-product .product-main .large-6 { flex: 0 0 50% !important; max-width: 50% !important; }
body.single-product .product-main .large-8 { flex: 0 0 66.666% !important; max-width: 66.666% !important; }
body.single-product .product-main .large-9 { flex: 0 0 75% !important; max-width: 75% !important; }

/* Mobile: stack vertically */
@media (max-width: 849px) {
  body.single-product .product-main .large-3,
  body.single-product .product-main .large-4,
  body.single-product .product-main .large-5,
  body.single-product .product-main .large-6,
  body.single-product .product-main .large-8,
  body.single-product .product-main .large-9 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* Restore Flatsome generic .row that broke (block → flex) */
.flatsome-page .row,
.page-wrapper .row,
.entry-content .row,
.section .row,
.product-main .row,
.product-footer .row,
body.single-post #main .row,
body.blog-single #main .row,
body.blog #main .row,
body.archive #main .row,
body.page #main .row {
  display: flex !important;
  flex-wrap: wrap !important;
}

/* Blog single post: main 75% + sidebar 25% layout */
body.single-post #main .row.row-large,
body.blog-single #main .row.row-large,
body.single #main .row.row-large {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
}
body.single-post #main .row > .large-9,
body.blog-single #main .row > .large-9,
body.single #main .row > .large-9 {
  flex: 0 0 74% !important;
  max-width: 74% !important;
  box-sizing: border-box !important;
  padding: 0 12px !important;
  order: 1 !important;
}
body.single-post #main .row > .large-3,
body.blog-single #main .row > .large-3,
body.single #main .row > .large-3 {
  flex: 0 0 26% !important;
  max-width: 26% !important;
  box-sizing: border-box !important;
  padding: 0 12px !important;
  order: 2 !important;
}
@media (max-width: 849px) {
  body.single-post #main .row > .large-9,
  body.single-post #main .row > .large-3,
  body.blog-single #main .row > .large-9,
  body.blog-single #main .row > .large-3,
  body.single #main .row > .large-9,
  body.single #main .row > .large-3 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-right: 0 !important;
  }
}