/* Print Pricing Engine – storefront UI
 * v0.6.1: restore the Flatsome/WooCommerce product gallery and let the
 * calculator grow naturally with the page instead of using internal scrollbars.
 */
.gpp-quote-page{
  background:#fff;
}

.gpp-quote-page .product-main{
  padding:28px 0 36px;
}

.gpp-quote-page .product-main>.row{
  max-width:1440px;
  align-items:flex-start;
}

/* For calculator-heavy products, keep the gallery compact and give the information column the remaining width. */
.gpp-quote-page .product-main .product-gallery{
  display:block!important;
  flex:0 0 clamp(340px,34vw,520px)!important;
  max-width:clamp(340px,34vw,520px)!important;
  width:clamp(340px,34vw,520px)!important;
  padding-right:22px;
}

.gpp-quote-page .product-main .product-info{
  flex:1 1 0!important;
  max-width:none!important;
  width:auto!important;
  min-width:0;
  padding-left:22px!important;
  padding-right:15px!important;
}

.gpp-quote-page .product-main #product-sidebar{
  display:none!important;
}

.gpp-quote-page .product-title{
  font-size:28px;
  line-height:1.25;
  margin:0 0 10px;
  letter-spacing:-.01em;
}

.gpp-quote-page .woocommerce-product-details__short-description{
  font-size:14px;
  line-height:1.65;
  color:#667085;
}

.gpp-quote-page .woocommerce-product-details__short-description p{
  margin:0 0 14px;
}

.gpp-quote-page form.cart{
  display:block!important;
  margin:18px 0 0!important;
}

/* Let Flatsome render the gallery naturally, with a clean photo-card feel. */
.gpp-quote-page .product-gallery .product-images,
.gpp-quote-page .product-gallery .woocommerce-product-gallery{
  background:#fff;
  border-radius:4px;
}

.gpp-quote-page .product-gallery img{
  height:auto;
}

.gpp-config{
  --gpp-blue:#2f66e8;
  --gpp-blue-soft:#f3f7ff;
  --gpp-ink:#202939;
  --gpp-muted:#667085;
  --gpp-line:#e3e8ef;
  --gpp-soft:#f8fafc;
  display:block;
  width:100%;
  color:var(--gpp-ink);
  font-size:14px;
  line-height:1.45;
  text-align:left;
}

.gpp-config *{
  box-sizing:border-box;
}

.gpp-config [hidden]{
  display:none!important;
}

/* Important: no fixed height and no vertical scroll area. The page itself scrolls. */
.gpp-editor,
.gpp-results{
  min-width:0;
  width:100%;
  max-height:none!important;
  overflow:visible!important;
  background:#fff;
  border:1px solid var(--gpp-line);
  border-radius:12px;
  box-shadow:0 3px 14px rgba(16,24,40,.045);
}

.gpp-editor{
  padding:18px;
  margin-bottom:14px;
}

.gpp-results{
  padding:0 0 14px;
}

.gpp-config h2{
  font-size:17px;
  line-height:1.35;
  margin:0;
  color:var(--gpp-ink);
}

.gpp-editor-heading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}

.gpp-version-note{
  font-size:11px;
  color:#7b8798;
  white-space:nowrap;
}

.gpp-line{
  background:var(--gpp-soft);
  border:1px solid #e7ebf1;
  border-radius:10px;
  padding:13px;
  margin:0 0 12px;
}

.gpp-line-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#315fca;
  margin-bottom:10px;
}

.gpp-config button{
  font:inherit;
  letter-spacing:0;
  text-transform:none;
  min-height:38px;
  margin:0;
  line-height:1.25;
  border-radius:8px;
  padding:8px 12px;
  cursor:pointer;
  box-shadow:none;
}

.gpp-remove-line{
  background:#fff;
  color:#a63d4d;
  border:1px solid #ead9de;
  font-size:20px!important;
  min-height:30px!important;
  padding:0 9px!important;
}

.gpp-config p{
  margin:0 0 11px;
}

.gpp-config label{
  display:block;
  font-size:12px;
  font-weight:600;
  margin-bottom:5px;
  color:#344054;
}

.gpp-config select,
.gpp-config input[type=number]{
  font:inherit;
  font-size:13px;
  width:100%;
  height:40px;
  min-height:40px;
  margin:0;
  border:1px solid #cfd7e3;
  border-radius:8px;
  padding:7px 10px;
  background:#fff;
  box-shadow:none;
  color:#1f2937;
}

.gpp-config input:focus,
.gpp-config select:focus,
.gpp-config button:focus-visible{
  outline:2px solid #6c8ff0;
  outline-offset:1px;
}

.gpp-config input:disabled,
.gpp-config select:disabled{
  background:#eef2f6;
  color:#7a8798;
}

.gpp-grid-2,
.gpp-grid-3{
  display:grid;
  gap:10px;
}

.gpp-grid-2{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.gpp-grid-3{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.gpp-custom-fields h4{
  font-size:13px;
  margin:13px 0 9px;
  color:#23727b;
  border-top:1px solid #e3e8ef;
  padding-top:10px;
}

.gpp-choices{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

.gpp-choices button{
  flex:1 1 96px;
  border:1px solid #d6dce6;
  background:#fff;
  color:#344054;
  font-size:12px;
  min-height:36px;
}

.gpp-choices button:hover{
  border-color:#9db4ef;
  background:#f8faff;
}

.gpp-choices button.is-selected{
  border-color:#4f7bec;
  background:var(--gpp-blue-soft);
  color:#214ebd;
  font-weight:700;
  box-shadow:inset 0 0 0 1px #4f7bec;
}

.gpp-config select.gpp-has-choices{
  display:none;
}

.gpp-checks,
.gpp-extras{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.gpp-checks label,
.gpp-extras label,
.gpp-addons>label{
  display:flex;
  align-items:center;
  gap:6px;
  font-weight:500;
  margin:5px 0;
}

.gpp-config input[type=checkbox]{
  width:15px;
  height:15px;
  margin:0;
  accent-color:var(--gpp-blue);
}

.gpp-addons,
.gpp-extras{
  border:1px solid #e2e7ee;
  border-radius:9px;
  padding:10px;
  margin:8px 0;
  background:#fff;
}

.gpp-config legend{
  font-size:12px;
  font-weight:700;
  padding:0 5px;
  color:#495a72;
}

.gpp-add-line{
  display:block;
  width:100%;
  border:1px solid #c9d6f8;
  color:#2858c6;
  background:#f6f8ff;
  margin:8px 0 10px!important;
}

.gpp-add-line:hover{
  background:#eef3ff;
}

.gpp-calculate,
.gpp-cart-action button{
  display:block;
  width:100%;
  border:0;
  background:var(--gpp-blue);
  color:#fff;
  font-size:15px!important;
  font-weight:700!important;
  min-height:46px!important;
}

.gpp-calculate:hover,
.gpp-cart-action button:hover{
  background:#2459cf;
  color:#fff;
}

.gpp-status{
  font-size:13px;
  color:#b54708;
  margin:10px 0 0!important;
}

.gpp-status:empty{
  display:none;
}

.gpp-empty{
  padding:22px 18px;
  color:#7a8798;
  background:#fbfcfe;
  border-radius:12px 12px 0 0;
}

.gpp-order{
  border-bottom:1px solid #e6eaf0;
}

.gpp-order h2{
  padding:14px 18px;
  color:#1f2937;
  background:#f7f9fc;
  border-radius:12px 12px 0 0;
  border-bottom:1px solid #e6eaf0;
}

.gpp-table-wrap{
  overflow:visible;
}

.gpp-config table{
  width:100%;
  border-collapse:collapse;
  margin:0;
  font-size:12px;
}

.gpp-config th{
  background:#fff;
  color:#667085;
  text-transform:none;
  font-size:11px;
  padding:10px;
  border-bottom:1px solid #e7ebf0;
  letter-spacing:0;
}

.gpp-config td{
  padding:11px 10px;
  border-bottom:1px solid #edf0f4;
  vertical-align:top;
}

/* Keep table content aligned with the 18px inner gutter used by the quote card headings. */
.gpp-config th:first-child,
.gpp-config td:first-child{
  padding-left:18px;
}

.gpp-config th:last-child,
.gpp-config td:last-child{
  padding-right:18px;
}

.gpp-config td:first-child{
  width:54%;
}

.gpp-config td:not(:first-child){
  white-space:nowrap;
}

.gpp-config small{
  display:block;
  font-size:11px;
  color:#7b8798;
  line-height:1.5;
  font-weight:400;
}

.gpp-config td strong{
  color:#3157a7;
}

.gpp-detail{
  padding:16px 18px 4px;
}

.gpp-detail h2{
  display:flex;
  justify-content:space-between;
  gap:10px;
  border-bottom:1px solid #e7ebf0;
  padding-bottom:10px;
}

.gpp-detail h3{
  font-size:13px;
  color:#3157a7;
  margin:12px 0 4px;
}

.gpp-detail-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:14px;
}

.gpp-detail-grid:has(.gpp-layout){
  grid-template-columns:minmax(0,1fr) 145px;
}

.gpp-cost{
  display:flex;
  justify-content:space-between;
  align-items:start;
  gap:15px;
  padding:8px 0;
  border-bottom:1px solid #edf0f4;
  font-size:12px;
}

.gpp-cost>b,
.gpp-cost>strong{
  white-space:nowrap;
}

.gpp-line-total{
  color:#3157a7;
}

.gpp-layout{
  margin:7px 0 0;
  padding:10px;
  border:1px dashed #cbd3df;
  border-radius:8px;
  text-align:center;
  background:#fff;
}

.gpp-layout figcaption{
  font-size:10px;
  font-weight:700;
  color:#7a8798;
  margin-bottom:8px;
}

.gpp-layout svg{
  width:100%;
  max-height:170px;
  display:block;
  margin:0 auto 8px;
}

.gpp-layout small{
  font-size:10px;
}

.gpp-quote-summary{
  margin:12px 18px;
  padding:13px;
  border:1px solid #e6e9d1;
  border-radius:9px;
  background:#fffef7;
}

.gpp-copy-content{
  font-size:11px;
  line-height:1.5;
  color:#5f634b;
  padding-top:8px;
}

.gpp-grand-total{
  font-size:16px;
  font-weight:700;
  color:#d13c32;
  border:0;
}

.gpp-copy{
  font-size:12px!important;
  color:#315ebc;
  border:1px solid #d5def0;
  background:#fff;
  margin-top:8px!important;
}

.gpp-copy-status{
  font-size:11px;
  padding-left:8px;
  color:#238552;
}

.gpp-copy-fallback{
  width:100%;
  height:100px;
  font-size:12px;
}

.gpp-cart-action{
  padding:0 18px;
  position:static!important;
  background:transparent;
}

.gpp-cart-action button:disabled{
  opacity:.45;
  cursor:not-allowed;
}

.gpp-edit-cart{
  font-size:13px;
  text-decoration:underline;
  color:#245be9;
}

.gpp-manual-note{
  padding:14px;
  background:#fff9e9;
  color:#655631;
  border:1px solid #f0dfb0;
  border-radius:8px;
}

.gpp-quote-page .product-footer{
  margin-top:28px;
}


@media(min-width:1200px){
  .gpp-quote-page .product-title{
    font-size:32px;
  }

  .gpp-editor,
  .gpp-results{
    border-radius:14px;
  }

  .gpp-editor{
    padding:20px;
  }

  .gpp-detail-grid:has(.gpp-layout){
    grid-template-columns:minmax(0,1fr) 165px;
  }
}

@media(min-width:850px) and (max-width:1199px){
  .gpp-quote-page .product-main>.row{
    max-width:1320px;
  }

  .gpp-quote-page .product-main .product-gallery{
    flex:0 0 38%!important;
    max-width:38%!important;
    width:38%!important;
  }

  .gpp-quote-page .product-main .product-info{
    flex:1 1 0!important;
    max-width:none!important;
    width:auto!important;
  }
}

/* Tablet: show image first, then product info/calculator below. */
@media(max-width:849px){
  .gpp-quote-page .product-main{
    padding-top:18px;
  }

  .gpp-quote-page .product-main .product-gallery,
  .gpp-quote-page .product-main .product-info{
    flex-basis:100%!important;
    max-width:100%!important;
    width:100%!important;
    padding-left:15px!important;
    padding-right:15px!important;
  }

  .gpp-quote-page .product-main .product-info{
    padding-top:22px;
  }
}

@media(max-width:600px){
  .gpp-config{
    font-size:13px;
  }

  .gpp-editor{
    padding:13px;
  }

  .gpp-grid-3{
    grid-template-columns:1fr;
  }

  .gpp-detail-grid:has(.gpp-layout){
    grid-template-columns:1fr;
  }

  .gpp-layout{
    max-width:190px;
    margin:8px auto;
  }

  .gpp-grand-total{
    font-size:14px;
  }

  .gpp-version-note{
    display:none;
  }

  /* Only allow horizontal table movement on small screens; never vertical scrolling. */
  .gpp-table-wrap{
    overflow-x:auto;
    overflow-y:visible;
    -webkit-overflow-scrolling:touch;
  }

  .gpp-config td:first-child{
    min-width:180px;
  }
}

/* v0.7.7 — Independent hardware quantity for X/roll-up Standee. */
.gpp-config .gpp-extras > p{flex:1 1 100%;margin:2px 0 0;}
.gpp-config .gpp-extras > p label{display:block;margin-bottom:6px;}
.gpp-config .gpp-extras .gpp-leg-quantity{width:100%;max-width:220px;}
.gpp-config .gpp-extras > small{display:block;flex:1 1 100%;font-size:11px;color:#667085;line-height:1.5;}
.gpp-config .gpp-extras label[hidden],
.gpp-config .gpp-dynamic-fields p[hidden],
.gpp-config .gpp-extras small[hidden]{display:none!important;}

/* ============================================================
 * TECH5P – Desktop shop: Danh mục | Cấu hình | Báo giá
 * v0.7.9 – Chỉ áp dụng khi mở sản phẩm trong One Screen Shop.
 * Không tác động đến mobile/tablet (<850px), trang sản phẩm đơn,
 * trang danh mục sản phẩm mặc định, hay công thức tính giá.
 * ============================================================ */
@media (min-width: 850px) {
  /* Bỏ cột ảnh của khu vực sản phẩm AJAX, mở rộng cấu hình. */
  body.post-type-archive-product .t5-shop-stage .t5-inline-product
  :is(.t5-inline-layout, .t5-inline-product-layout) {
    display: block !important;
    grid-template-columns: none !important;
    width: 100%;
    min-width: 0;
  }

  body.post-type-archive-product .t5-shop-stage .t5-inline-product
  :is(.t5-inline-media, .t5-inline-product-media) {
    display: none !important;
  }

  body.post-type-archive-product .t5-shop-stage .t5-inline-product
  :is(.t5-inline-config, .t5-inline-product-config) {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  /* Ở nội dung bên phải danh mục: editor trái, báo giá phải. */
  body.post-type-archive-product .t5-shop-stage .t5-inline-product
  :is(.t5-inline-config, .t5-inline-product-config) .gpp-config {
    display: grid !important;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(12px, 1.35vw, 20px);
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
  }

  body.post-type-archive-product .t5-shop-stage .t5-inline-product
  .gpp-config > :is(.gpp-editor, .gpp-results) {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    margin: 0 !important;
    align-self: start;
  }

  /* Bảng báo giá dài không được tràn lên cột cấu hình. */
  body.post-type-archive-product .t5-shop-stage .t5-inline-product
  .gpp-results .gpp-table-wrap {
    max-width: 100%;
    overflow-x: auto;
  }
}

/* Thu hẹp padding trên PC màn hình nhỏ, giữ đúng thứ tự 3 cột. */
@media (min-width: 850px) and (max-width: 1199px) {
  body.post-type-archive-product .t5-shop-stage .t5-inline-product {
    padding: 16px;
  }

  body.post-type-archive-product .t5-shop-stage .t5-inline-product
  .gpp-config > .gpp-editor {
    padding: 13px;
  }

  body.post-type-archive-product .t5-shop-stage .t5-inline-product
  :is(.t5-inline-config, .t5-inline-product-config) .gpp-config {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    gap: 12px;
  }
}