/* AMG demo products. Keep product content in products.js */
.amg-products-section {
   background: #fff;
}
.amg-products-head {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   gap: 25px;
   margin-bottom: 24px;
}
.amg-products-head h2 {
   margin: 8px 0 8px;
}
.amg-products-head h2 span {
   color: var(--red, #d7192f);
}
.amg-products-head p {
   margin: 0;
   color: #64758b;
   font-size: 13px;
   max-width: 720px;
}
.amg-demo-note {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   color: #7b5360;
   background: #fff4f4;
   border: 1px solid #f5dce0;
   border-radius: 20px;
   padding: 8px 12px;
   font-size: 11px;
   font-weight: 700;
   white-space: nowrap;
}
.amg-products-tools {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   margin-bottom: 20px;
}
.amg-filter-chips {
   display: flex;
   gap: 7px;
   flex-wrap: wrap;
}
.amg-filter-chip {
   border: 1px solid #dce5ef;
   background: #f6f9fc;
   color: #49617c;
   border-radius: 999px;
   padding: 10px 16px;
   font-size: 12px;
   font-weight: 800;
   min-height: 41px;
   transition: 0.18s;
}
.amg-filter-chip:hover {
   border-color: #bbcddd;
   color: #163d65;
}
.amg-filter-chip[aria-pressed="true"] {
   background: #0c2d51;
   border-color: #0c2d51;
   color: #fff;
}
.amg-search-product {
   display: flex;
   align-items: center;
   gap: 8px;
   border: 1px solid #dce5ed;
   background: #fff;
   border-radius: 11px;
   min-height: 44px;
   padding: 0 13px;
   width: 240px;
   flex: none;
}
.amg-search-product svg {
   width: 18px;
   height: 18px;
   color: #66809a;
}
.amg-search-product input {
   width: 100%;
   min-width: 0;
   background: transparent;
   border: 0;
   outline: 0;
   font-size: 12px;
   color: #193552;
}
.amg-search-product:focus-within {
   border-color: #628bb5;
   box-shadow: 0 0 0 3px #e6eff9;
}
.amg-products-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 17px;
}
.amg-product-card {
   display: flex;
   flex-direction: column;
   min-width: 0;
   overflow: hidden;
   background: #fff;
   border: 1px solid #e2e9f1;
   border-radius: 16px;
   box-shadow: 0 8px 22px rgba(17, 40, 68, 0.055);
   transition:
      transform 0.2s,
      box-shadow 0.2s,
      border-color 0.2s;
}
.amg-product-card:hover {
   transform: translateY(-3px);
   border-color: #cbdae9;
   box-shadow: 0 16px 32px rgba(17, 40, 68, 0.1);
}
.amg-product-image {
   position: relative;
   display: grid;
   place-items: center;
   background: linear-gradient(145deg, #f9fbfd, #edf3fa);
   height: 190px;
   overflow: hidden;
}
.amg-product-image img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   transition: transform 0.3s;
}
.amg-product-card:hover .amg-product-image img {
   transform: scale(1.055);
}
.amg-product-status {
   position: absolute;
   top: 12px;
   left: 12px;
   padding: 7px 9px;
   border-radius: 7px;
   background: #fff;
   color: #bd3042;
   border: 1px solid #f4d4d9;
   font-size: 10px;
   font-weight: 800;
   max-width: calc(100% - 24px);
}
.amg-product-status.is-verified {
   background: #e9f7ef;
   color: #187044;
   border-color: #c6eed5;
}
.amg-product-status.is-unavailable {
   background: #f7f0f1;
   color: #8c5761;
   border-color: #ead8dc;
}
.amg-product-content {
   padding: 17px 16px 16px;
   display: flex;
   flex-direction: column;
   align-items: stretch;
   flex: 1;
}
.amg-product-meta {
   font-size: 10px;
   color: #7e90a4;
   line-height: 1.4;
   letter-spacing: 0.03em;
   font-weight: 700;
   margin-bottom: 8px;
}
.amg-product-card h3 {
   font-size: 16px;
   letter-spacing: -0.02em;
   line-height: 1.35;
   margin: 0 0 9px;
   color: #102b4b;
   min-height: 44px;
}
.amg-product-desc {
   font-size: 11px;
   color: #7b8b9f;
   line-height: 1.55;
   margin: 0 0 16px;
   min-height: 52px;
}
.amg-product-bottom {
   margin-top: auto;
   display: flex;
   justify-content: space-between;
   align-items: end;
   gap: 5px;
   border-top: 1px solid #e9eef3;
   padding-top: 12px;
   margin-bottom: 12px;
}
.amg-product-price {
   font-size: 20px;
   line-height: 1.1;
   font-weight: 900;
   letter-spacing: -0.045em;
   color: #0f2d4f;
   white-space: nowrap;
}
.amg-product-price small {
   font-size: 10px;
   color: #8a9bad;
   font-weight: 600;
   letter-spacing: 0;
   display: block;
   margin-bottom: 5px;
}
.amg-product-sku {
   font-size: 10px;
   color: #90a0b0;
   text-align: right;
   overflow-wrap: anywhere;
}
.amg-product-cta {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   min-height: 42px;
   border-radius: 9px;
   border: 1px solid #d9e5f0;
   background: #f3f7fb;
   color: #153b64;
   font-size: 12px;
   font-weight: 900;
   padding: 9px;
   width: 100%;
   transition:
      background 0.2s,
      color 0.2s;
}
.amg-product-cta:hover {
   background: #d7192f;
   border-color: #d7192f;
   color: #fff;
}
.amg-product-cta .icon {
   width: 16px;
   height: 16px;
}
.amg-products-actions {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 14px;
   margin-top: 24px;
}
.amg-products-all {
   border: 1px solid #ccd9e6;
   border-radius: 10px;
   background: #fff;
   padding: 12px 22px;
   font-size: 12px;
   font-weight: 900;
   color: #143959;
}
.amg-products-all:hover {
   border-color: #c32336;
   color: #bf2034;
}
.amg-products-empty {
   grid-column: 1/-1;
   min-height: 140px;
   display: grid;
   place-content: center;
   gap: 8px;
   text-align: center;
   color: #506b85;
   background: #f7fafc;
   border-radius: 14px;
   border: 1px dashed #cbdbe9;
   font-size: 13px;
}
/* Products tab inside the existing modal */
.amg-modal-tabs {
   display: flex;
   gap: 7px;
   align-items: center;
   border-bottom: 1px solid #e5edf4;
   margin-bottom: 17px;
}
.amg-modal-tab {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 7px;
   border: 0;
   border-bottom: 3px solid transparent;
   background: transparent;
   padding: 10px 16px 12px;
   color: #698098;
   font-size: 12px;
   font-weight: 900;
}
.amg-modal-tab[aria-selected="true"] {
   border-color: #d7192f;
   color: #132f4d;
}
.amg-modal-tab .icon {
   height: 16px;
   width: 16px;
}
#picker-products-panel[hidden],
#picker-categories-panel[hidden] {
   display: none !important;
}
.amg-modal-products-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 10px;
   margin-bottom: 12px;
}
.amg-modal-products-header strong {
   color: #142d4a;
   font-size: 13px;
}
.amg-modal-products-header span {
   color: #8193a7;
   font-size: 10px;
}
.amg-modal-products-search {
   width: 100%;
   padding: 12px 14px;
   border: 1px solid #dbe6ef;
   border-radius: 10px;
   color: #183754;
   outline: 0;
   margin-bottom: 12px;
   font-size: 12px;
}
.amg-modal-products-search:focus {
   border-color: #739abc;
   box-shadow: 0 0 0 3px #e6eff9;
}
.amg-modal-products-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 10px;
   max-height: 290px;
   overflow: auto;
   overscroll-behavior: contain;
}
.amg-modal-product {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 9px;
   text-align: left;
   min-width: 0;
   border: 1px solid #e2eaf2;
   border-radius: 11px;
   background: #fff;
   color: #193554;
}
.amg-modal-product:hover {
   border-color: #d2a1a7;
   background: #fff9fa;
}
.amg-modal-product img {
   width: 74px;
   height: 65px;
   object-fit: contain;
   border-radius: 7px;
   background: #f2f6fa;
   flex: none;
}
.amg-modal-product-text {
   display: flex;
   flex-direction: column;
   gap: 5px;
   min-width: 0;
   flex: 1;
}
.amg-modal-product-text strong {
   font-size: 11px;
   line-height: 1.35;
}
.amg-modal-product-text small {
   font-size: 10px;
   color: #7a8da1;
}
.amg-modal-product .icon {
   width: 16px;
   height: 16px;
   color: #d7192f;
}
.amg-modal-demo {
   font-size: 10px;
   color: #8796aa;
   margin: 12px 0 0;
}
@media (max-width: 1050px) {
   .amg-products-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
   }
   .amg-products-tools {
      align-items: flex-start;
      flex-direction: column;
   }
   .amg-search-product {
      width: min(100%, 400px);
   }
}
@media (max-width: 700px) {
   .amg-products-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
   }
   .amg-product-image {
      height: 135px;
   }
   .amg-product-content {
      padding: 12px;
   }
   .amg-product-card h3 {
      font-size: 13px;
      min-height: 36px;
   }
   .amg-product-meta {
      font-size: 9px;
   }
   .amg-product-desc {
      min-height: 0;
      font-size: 10px;
      margin-bottom: 12px;
   }
   .amg-product-price {
      font-size: 17px;
   }
   .amg-product-sku {
      font-size: 9px;
   }
   .amg-product-cta {
      font-size: 10px;
      min-height: 42px;
      padding: 7px 4px;
   }
   .amg-product-status {
      font-size: 9px;
      top: 8px;
      left: 8px;
   }
   .amg-products-head {
      display: block;
   }
   .amg-demo-note {
      margin-top: 15px;
   }
   .amg-products-section {
      padding: 48px 0 56px;
   }
   .amg-filter-chips {
      flex-wrap: nowrap;
      max-width: 100%;
      overflow-x: auto;
      padding-bottom: 5px;
      scrollbar-width: thin;
   }
   .amg-filter-chip {
      flex: none;
      padding: 9px 12px;
      font-size: 11px;
   }
   .amg-modal-products-grid {
      grid-template-columns: 1fr;
      max-height: 340px;
   }
   .amg-modal-product img {
      width: 67px;
      height: 58px;
   }
   .amg-modal-tab {
      padding: 9px 11px;
      font-size: 11px;
   }
}
@media (max-width: 370px) {
   .amg-product-desc {
      display: none;
   }
   .amg-product-image {
      height: 114px;
   }
   .amg-product-cta {
      font-size: 9px;
   }
   .amg-product-price {
      font-size: 15px;
   }
}

/* Prevent iOS automatic zoom when searching demo products. */
@media (max-width: 650px) {
   .amg-search-product input {
      font-size: 16px;
   }
}