@scope (.layout-grid) {
  display: grid;
  grid-template-columns: repeat(2, 1fr);;
  gap: var(--space-6);
  align-items: stretch;
  padding-inline: var(--space-8);

  & .product-info {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--space-4) var(--space-2);

      & .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        
        & .section-title {
          display: flex;
          align-items: center;
          gap: var(--space-1);

          font-size: var(--font-size-lg);
          font-weight: var(--font-weight-bold);
          margin-bottom: 0;
  
          & .title-counter {
              font-size: var(--font-size-md);
              line-height: var(--line-body-sm);
              color: var(--neutral);
          }
  
          & .title-icon {
              display: inline-block;
              height: 25px;
              aspect-ratio: 1 / 1;
          }
        }
      }


      & .product-images-section {
        display: flex;
        flex-direction: column;
        flex: 1 0 100%;  /* take full row */
        justify-content: center;
        align-items: center;
        background-color: var(--neutral-lightest);
        border-radius: var(--radius-3xl);
        aspect-ratio: 1 / 1;

        & .product-img {
          width: 65%;
          object-fit: contain;
          aspect-ratio: 1 / 1;
          background-color: var(--color-bg);
          border-radius: var(--radius-3xl);
        }

        & .img-carousel {
          display: flex;
          flex-direction: row;
          gap: var(--space-2);
          margin-top: var(--space-4);

          & .img-carousel-item {
            width: 80px;
            height: 80px;
            object-fit: cover;
            border-radius: var(--radius-xl);
            cursor: pointer;
            transition: scale 0.2s ease-in-out;
            
            &:hover {
              scale: 1.30;
              transition: scale 0.2s ease-in-out;
            }
          }
        }
      }

      & .product-features-section {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-2);
        width: 100%;

        & [class$="-section"] {
          padding: var(--space-4);
          overflow: hidden;
          /* max-height: 515px; */
          /* max-height: 400px; */
          aspect-ratio: 1 / 1;
        }

        & .product-reviews-section {
          scroll-margin-top: 180px; /* match your navbar height| pushes the section lower than top of screen */

          grid-column: span 1; /* take full width */
          grid-row: span 1; /* take full height of the features section */
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          gap: var(--space-2) var(--space-4);
          background-color: var(--white-60);
          border-radius: var(--radius-3xl);

          & .leave-review-btn,
          & .see-reviews-btn {
            background: none;
            border: none;
            color: var(--color-primary);
            font-size: var(--font-size-md);
            line-height: var(--line-small-lg);
            cursor: pointer;
          }

          & .see-reviews-btn {
            display: none; /* hidden by default, shown when reviews are visible */
          }

          & .review-form-container {
            flex: 1 0 100%; /* take full row */
            display: none; /* hidden by default, shown when leave review btn is clicked */

            & .add-review-form {
              width: 100%;
            
              & .star-rating {
                flex: 1 1 calc(50% - var(--space-1));  /* take full row unless expand btn is present*/
                display: flex;
                flex-direction: row;
                justify-content: start;
                gap: 0;
                margin: 0;
  
                & .star-input {
                  margin: 0;
                  padding: 0;
                }
                 
                & .review-form-star {
                  width: 50px;
                  height: 50px;
                  margin: 0;
                  padding: 0;
                  cursor: pointer;
                }
              }

              & .star-rating input {
                display: none;
              }
  
              & textarea {
                min-width: 100%;
                max-height: 550px;
              }
            }

          }

          & .reviews {
            flex: 1 0 100%;  /* take full row */
            max-height: 100%;

            display: flex;
            flex-direction: column;
            gap: var(--space-4);

            overflow-y: auto;
            min-height: 0;

            & .review-card {
              flex: 0 0 auto;  /* take full row */
              display: flex;
              flex-wrap: wrap;
              flex-direction: row;
              gap: var(--space-1);
              padding-bottom: var(--space-3);
              border-bottom: var(--border-width-1) solid var(--neutral-light);

              &:last-of-type {
                padding-bottom: none;  
                border: none;
              }

              & .review-rating {
                flex: 1 1 calc(50% - var(--space-1));  /* take full row unless expand btn is present*/
                display: flex;
                gap: 0;

                & .rating-star {
                  width: 20px;
                  height: 20px;
                }
              }

              & .expand-feedback-btn,
              & .hide-feedback-btn {
                flex: 1 1 calc(50% - var(--space-1));
                display: flex;
                justify-content: end;
                background: none;
                border: none;
                color: var(--color-primary);
                font-size: var(--font-size-sm);
                line-height: var(--line-small-md);
                cursor: pointer;

                & .expand-img,
                & .hide-img {
                  width: 20px;
                  height: 20px;
                }
              }
              
              & .hide-feedback-btn {
                display: none; /* hidden by default, shown when feedback is visible */
              }

              & .review-feedback {
                flex: 1 0 100%;  /* take full row */
                font-style: italic;
                color: var(--neutral);
                margin: 0;
                padding: 0;
                background: none;
                border-inline-start: none;
                font-size: var(--font-size-md);
                line-height: var(--line-body-sm);

                
                & .feedback-author {
                  display: block;
                  margin-top: var(--space-1);
                  font-style: normal;
                  font-weight: var(--font-weight-bold);
                  font-size: var(--font-size-sm);
                  line-height: var(--line-small-md);
                  color: var(--neutral-dark);
                }
              }
              
              & .review-reply {
                flex: 1 1 100%;  /* take full row but dont overflow */
                margin-left: var(--space-4);
                padding: var(--space-1) var(--space-2);
                border-inline-start: var(--blockquote-border-inline-sm) solid var(--color-primary);
              }
            }
          }
        }

        & .product-specifications-section {
          background-color: var(--white-60);
          border-radius: var(--radius-3xl);
          display: flex;
          flex-direction: column;
          gap: var(--space-4);

          & .specifications {
            display: flex;
            flex-direction: column;
            gap: 0;
            list-style: none;
            margin: 0;
            padding: 0;

            overflow-y: auto;
            min-height: 0;

            & .specification {
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              padding: 0;
              margin: 0;
              border-bottom: var(--border-width-1) solid var(--neutral-light);
              padding-block: var(--space-2);
            }

            & .specification:first-of-type {
              padding-top: 0;
            }

            & .specification:last-of-type {
              border: none;
              padding-bottom: 0;
            }

            & .spec-title {
              color: var(--neutral-light);
            }

            & .spec-value {
              color: var(--black);
              font-weight: var(--font-weight-semibold);
            }

          }
        }

        & .product-docs-section {
          grid-column: span 2; /* take full width */
          grid-row: span 1; /* take full height of the features section */
          aspect-ratio: unset;  /* allow height to adjust based on content */
          background-color: var(--black);
          color: var(--white);
          border-radius: var(--radius-3xl);
          display: flex;
          flex-direction: column;
          gap: var(--space-4);

          scroll-margin-top: 180px; /* match your navbar height| pushes the section lower than top of screen */

          & .download-docs-sheet-container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: var(--space-2);

            & .header {
              flex: 100%;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: start;
              gap: 0;

              & .card-title {
                margin: 0;
                font-size: var(--font-size-xl);
                line-height: var(--line-body-lg);
                font-weight: var(--font-weight-bold);
              }

              & .info-text {
                margin: 0;
                font-size: var(--font-size-md);
                line-height: var(--line-body-sm);
                color: var(--neutral-light);
              }
            }

            & .download-btn-container {
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-self: center;
              gap: var(--space-2);

              & .hidden-form {
                display: none;
              }

              & .active-form {
                  display: flex;
                  flex-direction: row;
                  gap: var(--space-2);
              }

              & .download-btn {
                display: flex;
                align-items: center;
                gap: 5px;
                background-color: var(--white);

                &:hover {
                  background-color: var(--color-secondary);
                }

                & .icon {
                  height: 24px;
                  width: 24px;
                }

                & .text {
                  color: var(--black);
                }
              }
            }
          }

          & .docs-download-login-notice {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;

            & .info-container {
              flex: 60%;
              display: flex;
              flex-direction: column;
              align-items: start;
              justify-content: center;

              & .card-title {
                margin: 0;
                font-size: var(--font-size-xl);
                line-height: var(--line-body-lg);
                font-weight: var(--font-weight-bold);
              }

              & .info-text {
                margin: 0;
                font-size: var(--font-size-md);
                line-height: var(--line-body-sm);
                color: var(--neutral-light);
              }
            }

            & .login-container {
              & .btn {
                flex: 0 0 auto;
                background-color: var(--white);
                color: var(--black);
                border: none;
                border-radius: var(--radius-pill);
                padding: var(--space-2) var(--space-4);
                font-weight: var(--font-weight-semibold);
                font-size: var(--font-size-md);
                line-height: var(--line-small-lg);
                cursor: pointer;

                text-decoration: none;  /* for un authenticated users */
    
                &:hover {
                  background-color: var(--white-80);
                }
              }
            }
          }
        }
  
        & .use-case-section {
          background-color: var(--black);
          color: var(--white);
          display: flex;
          flex-direction: column;
          gap: var(--space-4);
          border-radius: var(--radius-3xl);
  
          & .use-cases {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: var(--space-2) var(--space-1);

            overflow-y: auto;
            min-height: 0;
  
            & .use-case-pill {
              background-color: var(--white-20);
              padding: var(--space-1) var(--space-2);
              border: var(--border-width-1) solid var(--white-40);
              border-radius: var(--radius-pill);

              &:hover {
                background-color: var(--white-40);
                cursor: default;
              }
  
              & .use-case-description {
                margin: 0;
                font-size: var(--font-size-sm);
                line-height: var(--line-small-md);
              }
            }
          }
        }

        & .compatible-printers-section {
          background-color: var(--neutral-lightest);
          border: var(--border-width-1) solid var(--neutral-light);
          border-radius: var(--radius-3xl);
          display: flex;
          flex-direction: column;
          gap: var(--space-4);

          & .printers {
            display: flex;
            flex-direction: column;
            gap: 0;
            list-style-position: inside;  /* ensures bullets are inside the container and not affected by padding */
            margin: 0;
            padding: 0;

            overflow-y: auto;
            min-height: 0;

            & .printer {
              padding: 0;
              margin: 0;
              border-bottom: var(--border-width-1) solid var(--neutral-light);
              padding-block: var(--space-2);
            }

            & .printer:first-of-type {
              padding-top: 0;
            }

            & .printer:last-of-type {
              border: none;
              padding-bottom: 0;
            }

          }
        }

        & .request-sample-section {
          grid-column: span 2; /* take full width */
          grid-row: span 1; /* take full height of the features section */
          aspect-ratio: unset;  /* allow height to adjust based on content */
          background-color: var(--black);
          color: var(--white);
          border-radius: var(--radius-3xl);
          display: flex;
          flex-direction: column;
          gap: var(--space-4);

          scroll-margin-top: 180px; /* match your navbar height| pushes the section lower than top of screen */

          & .sample-request-control {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            width: 100%;

            & .sample-header {
              flex: 1 0 auto;
              display: flex;
              flex-direction: column;
              gap: 0;
  
              & .sample-tagline {
                margin: 0;
                font-size: var(--font-size-xl);
                line-height: var(--line-body-lg);
                font-weight: var(--font-weight-bold);
              }
  
              & .sample-text {
                margin: 0;
                font-size: var(--font-size-md);
                line-height: var(--line-body-sm);
                color: var(--neutral-light);
              }
            }

            & .btn {
              flex: 0 0 auto;
              background-color: var(--white);
              color: var(--black);
              border: none;
              border-radius: var(--radius-pill);
              padding: var(--space-2) var(--space-4);
              font-weight: var(--font-weight-semibold);
              font-size: var(--font-size-md);
              line-height: var(--line-small-lg);
              cursor: pointer;

              text-decoration: none;  /* for un authenticated users */
  
              &:hover {
                background-color: var(--white-80);
              }
            }
          }

          & .sample-form-div {
            display: none; /* hidden by default, shown when get samples btn is clicked */
            padding: 0 var(--space-8);

            & label {
              color: var(--white);
            }
            
            & .row-50-50 {
              display: flex;
              flex-direction: row;
              gap: var(--space-4) var(--space-2);

              & .field:first-of-type {
                flex: 0 0 50%;
              }
              & .field:last-of-type {
                flex: 0 0 50%;
              }
            }

            & .row-60-40 {
              display: flex;
              flex-direction: row;
              gap: var(--space-4) var(--space-2);

              & .field:first-of-type {
                flex: 0 0 60%;
              }
              & .field:last-of-type {
                flex: 0 0 40%;
              }
            }

            & .row-60 {
              display: flex;
              flex-direction: row;
              gap: var(--space-4);

              & .field {
                flex: 0 0 60%;
              }
            }

            & .row-40-20 {
              display: flex;
              flex-direction: row;
              gap: var(--space-4) var(--space-2);

              & .field:first-of-type {
                flex: 0 1 40%;
              }
              & .field:last-of-type {
                flex: 0 1 20%;
              }
          }
        }

      }
    }

    & .product-order-menu {
      background-color: var(--white-40);
    }

  }

  & .product-order-menu {

    & .product-card {
      position: sticky;
      top: var(--space-lg-1);
      background-color: var(--white-60);
      border-radius: var(--radius-3xl);
      padding: var(--space-4) var(--space-2);

      & .product-name {
        color: var(--black);
        margin: 0;
      }

      & .product-sku {
        margin: 0;
        color: var(--neutral);
      }

      & .product-rating-section {
          display: flex;
          flex-direction: row;
          justify-content: start;
          gap: var(--space-1);
          align-items: center;

          margin-top: var(--space-1);

        & .product-rating {
          display: flex;
          flex-direction: row;
          gap: 0;
  
          & .rating-star {
            width: 20px;
            height: 20px;
          }
        }

        & .reviews-link {
          color: var(--neutral);
          
        }
      }

      & .product-description {
        margin: var(--space-2) 0;
      }

      & .certifications {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--space-2) var(--space-1);

        overflow-y: auto;
        min-height: 0;

        margin-top: var(--space-1);

        & .certification-pill {
          background-color: var(--pill-color);
          padding: var(--space-1) var(--space-2);
          border: var(--border-width-1) solid var(--white-40);
          border-radius: var(--radius-pill);
          display: flex;
          flex-direction: row;
          gap: 5px;
          justify-content: center;
          align-items: center;

          &:hover {
            border-color: var(--black);
            cursor: default;
          }

          & .certification-text {
            margin: 0;
            color: var(--white);
            font-weight: var(--font-weight-semibold);
            font-size: var(--font-size-sm);
            line-height: var(--line-small-md);
          }
        }
      }

      & .product-form-div {

        & .product-form-label {
          font-weight: var(--font-weight-semibold);
          color: var(--neutral);
        }

        & .row-50-50 {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          gap: var(--space-1) var(--space-2);
          margin-bottom: var(--space-1);

          & .field {
            flex: 0 0 calc(50% - var(--space-1));
            
            & .variant-select,
            & .product-packaging-field {
              margin-bottom: 0;
            }

          }
        }

        & .item-qty-field {
          width: 100%;
          display: flex;
          flex-direction: row;
          justify-content: start;
          gap: var(--space-1);

          & .product-qty-field  {
              flex: 1 0 10ch;
              width: 10ch;
              text-align: center;
              margin: 0;
              appearance: textfield;

              &::-webkit-outer-spin-button,
              &::-webkit-inner-spin-button {
                  -webkit-appearance: none;
                  margin: 0;
              }
          }

          & .down-qty,
          & .up-qty {
              display: flex;
              justify-content: center;
              align-items: center;
              background: none;
              border: none;
              cursor: pointer;
              color: var(--black);
              margin: 0;

              & .qty-button-icon {
                  height: 40px;
                  width: auto;
                  transition: transform 0.2s ease;

                  &:hover {
                      transform: scale(1.05);
                      transition: transform 0.2s ease;
                  }
              }
          }

          & .down-qty {
              border-radius: var(--radius-md) 0 0 var(--radius-md);
          }

          & .up-qty {
              border-radius: 0 var(--radius-md) var(--radius-md) 0;
          }
        }

        & .moq-info {
          display: block;
          margin-top: 5px;  /* tiny manual adjustment */
          margin-bottom: var(--space-2);
        }

        & .product-form-btn-div {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: center;
          gap: var(--space-4);

          background-color: var(--neutral-lightest);
          border-radius: var(--radius-3xl);
          padding: var(--space-4);

          & .price-div {
            flex: 0 0 100%;
            display: flex;
            flex-direction: column;
            gap: 0;

            & .product-price-label {
              margin-bottom: 0;
              color: var(--neutral);
            }

            & .product-price {
              margin: 0;
              font-size: var(--font-size-4xl);
              line-height: var(--line-head-4xl);
              font-weight: var(--font-weight-bold);
            }

          }

          & .btn {
            flex: 0 0 100%;
            height: 60px;
            background-color: var(--black);
            color: var(--white);
            font-weight: var(--font-weight-semibold);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.2s ease-in-out;

            &:hover {
              background-color: var(--black-80);
              transition: background-color 0.2s ease-in-out;
            }

            & .cart-icon {
              width: 40px;
              height: 40px;
              margin-right: var(--space-2);
            }
          }
        }
      }

      & .price-chart-wrapper {
        margin-top: var(--space-4);

        & .price-table {
            margin-top: var(--space-2);
            margin-bottom: 0;
        }
        & td, 
        & th {
            padding: 0.5rem;
            text-align: center;
        }
        
        & .price-table, 
        & th, 
        & td {
            border: 1px dotted var(--neutral-light);
            border-collapse: collapse;
        }

        & .moq-disclaimer {
            color:firebrick;
        }
      }
    }
  }

}

@scope (.other-products) {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);

  padding-inline: calc(var(--space-8) + var(--space-2)); /* match the main and .layout-grid padding*/
  margin-top: var(--space-6);

  & .section-title {
    margin: 0;
    font-size: var(--font-size-2xl);
    line-height: var(--line-head-2xl);
    font-weight: var(--font-weight-bold);
  }

  & .other-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-6);

    & .product-card {
      color: var(--black);
      flex: 1 1 0;
      transition: flex 0.5s ease;
      border-radius: var(--radius-lg);
      background-color: var(--white);
      min-width: fit-content;
      transition: transform 0.5s ease;

      &:hover {
        /* subtle zoom effect on hover to indicate interactivity */
        transform: scale(1.05);
        transition: transform 0.5s ease;
      }

      & .bento-col {
        /* override bento-col's default background and border-radius for clean card look */
        background: none; 
        gap: 0;
      }

      & .card-img-container {
        text-decoration: none;
        width: 100%;
        aspect-ratio: 1 / 1; /* maintain square aspect ratio */
        overflow: hidden;
        padding: var(--space-2);
        border-top-left-radius: var(--radius-lg);
        border-top-right-radius: var(--radius-lg);
        
        &:hover {
          & .card-image {
            /* subtle zoom effect on hover to indicate interactivity */
            transform: scale(1.15);
            transition: transform 0.5s ease;
          }
        }
        
        & .card-image {
          width: 100%;
          height: 100%;
          text-align: center;
          background-color: var(--color-bg); /* placeholder background while image loads */
          border-radius: var(--radius-lg) var(--radius-lg);
          transition: transform 0.5s ease;
        }
      }

      & .card-info-container {
        padding:  0 var(--space-2) var(--space-2);
        min-height: 200px;  /* ensure consistent card height for better grid alignment */
        
        & .product-price {
          color: var(--color-primary);
          font-weight: var(--font-weight-bold);
          margin: 0;
          font-size: var(--font-size-lg);

          & .product-moq {
            color: var(--neutral-light);
            font-size: var(--font-size-sm);
          }
        }

        & .product-name {
          margin: 0;
        }

        & .product-attributes-container {
          display: flex;
          flex-wrap: wrap;
          gap: 5px;
          margin-top: var(--space-1);

          & .product-attribute {
            background-color: var(--color-bg);
            color: var(--neutral-dark);
            font-size: var(--font-size-sm);
            padding: 0.25em 0.5em;
            border-radius: var(--radius-pill);
            margin: 0;
          }
        }
      }
      
      & .card-form-container {
        display: flex;
        flex-direction: row;
        justify-content: center;
        padding: var(--space-2);

        & .card-form {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: space-around;
          width: 100%;
        } 
      }
    }   
  }
}