body.wp-child-theme-graceatwork-divi {
  &,
  &.woocommerce-page,
  .woocommerce {
    .woocommerce-notices-wrapper {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 111111;

      .admin-bar & {
        top: 32px;
      }

      .woocommerce-message {
        opacity: 0.8;
        display: flex;
        align-items: center;
        justify-content: center;

        .notice-close {
          position: absolute;
          right: 1rem;
          top: 50%;
          transform: translateY(-50%);
          font-size: 3.5rem;
          cursor: pointer;
          color: var(--white);
          font-weight: 500;
        }

        a.button.wc-forward {
          margin-left: 1rem;
          height: 40px !important;
          display: flex;
          align-items: center;
        }
      }
    }

    .menu-cart {
      .menu-cart-badge {
        position: absolute;
        line-height: 1;
        top: 0.6rem !important;
        right: -0.65rem !important;
        background-color: var(--primary-color) !important;
        color: var(--white);
        font-weight: 400;
        font-size: 0.65rem !important;
        padding: 0 !important;
        border-radius: 999px;
        width: 1.3rem;
        height: 1.3rem;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    /* Product Archive Grid */
    .bvi-product-archive-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2.5rem;
      margin: 2rem 0;
      justify-items: center;
    }

    @media (max-width: 1024px) {
      .bvi-product-archive-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media (max-width: 600px) {
      .bvi-product-archive-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
      }
      .bvi-product-card-content {
        padding: 1rem 1rem 1.25rem 1rem;
      }

      .bvi-product-card {
        margin-bottom: 20px;
        min-height: auto; /* allow natural height on mobile */
      }

      /* Let content and titles size naturally on mobile */
      .bvi-product-card .bvi-product-card-content {
        min-height: 0 !important;
      }
      .bvi-product-card .bvi-product-card-title {
        min-height: 0 !important;
        max-height: none;
      }
    }

    .bvi-product-card {
      max-width: 250px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      /* Remove card styles */
      background: none;
      border: none;
      border-radius: 0;
      box-shadow: none;
      min-height: 100%;
      position: relative;

      &:hover {
        .bvi-product-card-image {
          transform: scale(1.05);
        }
      }

      .bvi-product-card-image-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: none;
        text-align: center;
        padding: 0;
        overflow: hidden;
        aspect-ratio: 1 / 1.32;
        background-color: #f6f6f6;
      }

      .bvi-product-card-image {
        max-width: 100%;
        max-height: 300px;
        object-fit: contain;
        background: none;
        transition: transform 0.3s ease;
      }

      .bvi-product-card-placeholder {
        width: 100%;
        height: 180px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f6f6f6;
        border-radius: var(--radius-large);
      }

      .bvi-product-card-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        flex: 1 1 auto;
        gap: 0.5rem;
        padding: 0.5rem 0 0 0;
        min-height: 120px;
        position: relative;
      }

      .bvi-product-card-title {
        font-size: 1.15rem;
        font-weight: 700;
        margin: 0 0 0.5rem 0;
        line-height: 1.3;
        color: var(--primary-color);
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        min-height: 3.9em;
        max-height: 3.9em;

        a {
          color: var(--primary-color);
          text-decoration: none;
          transition: color 0.15s;

          &:hover {
            color: #005bb5;
          }
        }
      }
    }

    .bvi-product-archive-no-results {
      grid-column: 1 / -1;
      text-align: center;
      color: #888;
      font-size: 1.1rem;
      padding: 2rem 0;
    }

    /* Product Category Gallery Styles */
    .product-categories-container {
      margin: 2rem 0;

      .product-subcategories-heading {
        text-align: center;
        color: var(--primary-color);
        margin-bottom: 1.5rem;
        font-size: 1.5rem;
        font-weight: 700;
      }

      .product-subcategories-track {
        position: relative;
        overflow: hidden;
        display: flex;
        justify-content: center;

        &::before,
        &::after {
          content: "";
          position: absolute;
          top: 0;
          bottom: 0;
          width: 40px;
          pointer-events: none;
          z-index: 1;
        }

        &::before {
          left: 0;
          background: linear-gradient(
            to right,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(255, 255, 255, 0.3) 50%,
            transparent 100%
          );
          backdrop-filter: blur(2px);
        }

        &::after {
          right: 0;
          background: linear-gradient(
            to left,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(255, 255, 255, 0.3) 50%,
            transparent 100%
          );
          backdrop-filter: blur(2px);
        }

        .product-subcategories {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          /* overflow-x: auto; */
          gap: 1rem;
          padding: 0 2.5rem !important;
          margin: 0;
          list-style: none;
          scroll-behavior: smooth;
          -webkit-overflow-scrolling: touch;
          /* Hide scrollbar but keep functionality */
          scrollbar-width: none; /* Firefox */
          -ms-overflow-style: none; /* IE and Edge */

          &::-webkit-scrollbar {
            display: none; /* Chrome, Safari, Opera */
          }

          li,
          .subcat-item {
            list-style: none;
            margin: 0;
            padding: 0;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
          }
        }

        @media (max-width: 980px) {
          & {
            .product-subcategories {
              display: grid;
              padding: 0 0 !important;
              grid-template-columns: 1fr 1fr;

              .subcat-thumb {
                max-height: 120px;
              }
            }

            &::after,
            &::before {
              display: none;
            }
          }
        }
        @media (max-width: 480px) {
          & {
            .product-subcategories {
              grid-template-columns: 1fr;
            }
          }
        }
      }

      .subcat-thumb {
        max-width: 100%;
        max-height: 180px;
        border-radius: var(--radius-large);
        display: block;
      }

      .subcat-name--pill {
        display: inline-block;
        background-color: var(--blue);
        color: #fff;
        border-radius: var(--radius);
        padding: 0.6em 1.2em;
        font-weight: 600;
        font-size: 1.1rem;
        text-align: center;
        margin: 0 auto;

        &:hover {
          opacity: 0.9;
        }
      }
    }

    @media (max-width: 600px) {
      .product-subcategories {
        gap: 0.75rem;
      }
      .subcat-name--pill {
        font-size: 1rem;
        max-width: 200px;
        padding: 0.5em 1em;
      }

      .bvi-product-title {
        min-height: 0;
      }
    }

    /* Product Attribute Filters */
    .bvi-product-filters {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      margin: 2rem 0;

      .bvi-filter-toggle {
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        overflow: hidden;
        background: #fff;

        .bvi-filter-trigger {
          width: 100%;
          padding: 0.5rem 1rem;
          background: none;
          border: none;
          text-align: left;
          cursor: pointer;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 1rem;
          font-weight: 600;
          color: var(--primary-color);
          transition: background-color 0.2s ease;

          &:hover {
            background-color: #f8f9fa;
          }

          &[aria-expanded="true"] {
            background-color: #f8f9fa;
            border-bottom: 1px solid #e0e0e0;

            .bvi-filter-icon {
              transform: rotate(45deg);
            }
          }

          &.bvi-filter-active {
            background: var(--primary-color);
            color: #fff;
            border-color: var(--primary-color);

            &:hover {
              background: var(--primary-color);
              opacity: 0.9;
            }

            .bvi-filter-icon {
              color: #fff;
            }

            &[aria-expanded="true"] {
              background: var(--primary-color);
              border-bottom-color: var(--primary-color);
            }
          }

          .bvi-filter-title {
            flex: 1;
          }

          .bvi-filter-icon {
            font-size: 1.2rem;
            font-weight: bold;
            transition: transform 0.2s ease;
            color: var(--primary-color);
          }
        }

        .bvi-filter-content {
          padding: 1.25rem;
          background: #fff;

          .facetwp-facet {
            margin-bottom: 0;
          }
        }
      }
    }

    /* Product Listing Header */
    .bvi-product-listing-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 1rem 0;
      gap: 1rem;

      .bvi-product-sort {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 0.5rem;

        .bvi-sort-label {
          font-size: var(--small-font-size);
          color: var(--brown);
          font-weight: 400;
          white-space: nowrap;
        }
      }

      .bvi-product-search {
        flex: 0 0 auto;
      }
    }

    .bvi-product-listing-header {
      .facetwp-facet {
        margin-bottom: 0;
      }

      .facetwp-facet-product_search {
        .facetwp-input-wrap {
          min-width: 310px;

          @media (max-width: 980px) {
            min-width: 250px;
          }
        }
      }

      .facetwp-facet-sort_products {
        position: relative;

        select {
          appearance: none;
          -webkit-appearance: none;
          -moz-appearance: none;
          background-image: none;
          padding-right: 2.5rem;
          min-width: 230px;

          @media (max-width: 980px) {
            min-width: 150px;
          }
        }

        &::after {
          content: "⌄";
          position: absolute;
          right: 1rem;
          top: 42%;
          transform: translateY(-50%);
          pointer-events: none;
          font-size: 1.25rem;
          color: var(--brown);
          z-index: 1;
        }
      }
    }

    /* Mobile Filter Flyout */
    .bvi-mobile-filter-container {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;

      .bvi-filter-trigger-mobile {
        display: none;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
        background: #f8f9fa;
        border: 1px solid #e0e0e0;
        border-radius: var(--radius);
        color: var(--primary-color);
        font-weight: 500;
        cursor: pointer;
        transition: background-color 0.2s ease;
        position: relative;
        z-index: 1;

        &:hover {
          background: #e9ecef;
        }

        .filter-icon {
          font-size: 1.1rem;
        }
      }

      .bvi-current-filters {
        padding: 0.75rem;
        background: #f8f9fa;
        border: 1px solid #e0e0e0;
        border-radius: var(--radius);

        .bvi-current-filters-title {
          font-size: 0.85rem;
          font-weight: 600;
          color: var(--primary-color);
          margin: 0 0 0.5rem 0;
        }

        .bvi-current-filters-list {
          display: flex;
          flex-wrap: wrap;
          gap: 0.5rem;

          .bvi-current-filter-tag {
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            padding: 0.25rem 0.5rem;
            background: var(--primary-color);
            color: #fff;
            border-radius: 4px;
            font-size: 0.8rem;
            font-weight: 500;

            .bvi-current-filter-remove {
              background: none;
              border: none;
              color: #fff;
              font-size: 1.1rem !important;
              cursor: pointer;
              padding: 0;
              line-height: 1;
              margin-left: 0.2rem;
              width: 14px;
              height: 20px;
              display: flex;
              align-items: center;
              justify-content: center;

              &:hover {
                opacity: 0.8;
              }
            }
          }
        }
      }
    }

    /* Generic Flyout Component - Reusable for any flyout */
    .bvi-flyout-sidebar {
      position: fixed;
      top: 0;
      right: -100%;
      width: 100%;
      max-width: 400px;
      height: 100vh;
      background: #fff;
      box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
      z-index: 10000 !important;
      transition: right 0.3s ease;
      overflow-y: auto;

      &.bvi-flyout-sidebar--open {
        right: 0;
      }

      .bvi-flyout-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;
        border-bottom: 1px solid #e0e0e0;
        background: #f8f9fa;

        .bvi-flyout-title {
          margin: 0;
          font-size: 1.1rem;
          font-weight: 600;
          color: var(--primary-color);
        }

        .bvi-flyout-close {
          background: none;
          border: none;
          font-size: 1.5rem;
          color: #666;
          cursor: pointer;
          padding: 0;
          width: 30px;
          height: 30px;
          display: flex;
          align-items: center;
          justify-content: center;

          &:hover {
            color: var(--primary-color);
          }
        }
      }

      .bvi-flyout-content {
        padding: 1rem;
      }

      .bvi-flyout-footer {
        display: flex;
        gap: 0.5rem;
        padding: 1rem;
        border-top: 1px solid #e0e0e0;
        background: #f8f9fa;
      }
    }

    .bvi-flyout-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 9999 !important;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;

      &.bvi-flyout-overlay--visible {
        opacity: 1;
        visibility: visible;
      }
    }

    /* Prevent body scroll when flyout is open */
    body.flyout-open {
      overflow: hidden;
    }

    .bvi-flyout-sidebar {
      position: fixed !important;
      top: 0 !important;
      right: -100% !important;
      width: 320px !important;
      max-width: 90vw !important;
      height: 100vh !important;
      background: #fff !important;
      box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1) !important;
      z-index: 10020 !important; /* Higher than mobile header (10010) */
      transition: right 0.3s ease !important;
      /* transition: none; */ /* Uncomment to debug transition issues */
      overflow-y: auto !important;
      display: flex !important;
      flex-direction: column !important;

      &.bvi-flyout-sidebar--open {
        right: 0 !important;
      }

      .bvi-flyout-header {
        padding: 1rem 1.5rem;
        border-bottom: 1px solid #e0e0e0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #f8f9fa;

        .bvi-flyout-title {
          font-size: 1.1rem;
          font-weight: 600;
          color: var(--primary-color);
          margin: 0;
        }

        .bvi-flyout-close {
          background: none;
          border: none;
          font-size: 1.5rem;
          color: var(--text-color);
          cursor: pointer;
          padding: 0.25rem;
          line-height: 1;

          &:hover {
            opacity: 0.8;
          }
        }
      }

      .bvi-flyout-content {
        flex: 1;
        padding: 1.5rem;
        overflow-y: auto;
      }

      .bvi-flyout-footer {
        padding: 1rem 1.5rem;
        border-top: 1px solid #e0e0e0;
        background: #f8f9fa;
        display: flex;
        gap: 0.75rem;

        .bvi-flyout-apply {
          flex: 1;
        }
      }
    }

    .bvi-flyout-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 10019; /* Just below sidebar */
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;

      &.bvi-flyout-overlay--visible {
        opacity: 1 !important;
        visibility: visible !important;
      }
    }

    /* Responsive behavior */
    @media (max-width: 980px) {
      .bvi-mobile-filter-container {
        .bvi-filter-trigger-mobile {
          display: flex;
        }
      }

      /* Hide desktop filters on mobile (but not in flyout) */
      .bvi-product-filters:not(.bvi-flyout-content .bvi-product-filters) {
        display: none;
      }

      .bvi-product-listing-header {
        flex-direction: row;
        align-items: center;

        .bvi-sort-label {
          display: none;
        }

        .facetwp-facet {
          .facetwp-input-wrap {
            input,
            select {
              height: 50px;
              font-size: 0.9rem;
              padding: 0.75rem 1rem;
            }
          }
        }

        select,
        .facetwp-search,
        .facetwp-input-wrap {
          height: 50px !important;
          max-height: 50px;
        }

        .facetwp-facet-sort_products select {
          padding: 0.5rem 20px !important;
        }
      }
    }

    @media (max-width: 600px) {
      .bvi-product-listing-header {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 0.5rem;
        margin: 0;

        .facetwp-facet.facetwp-type-search .facetwp-input-wrap {
          margin-left: 0;
          margin-right: 0;
          max-width: 100%;
        }

        .bvi-product-search,
        .facetwp-facet-sort_products,
        select,
        .bvi-product-sort {
          width: 100%;
        }

        .facetwp-search {
          padding-left: 0;
          padding-right: 0;
        }
      }
    }

    @media (min-width: 981px) {
      /* Hide mobile filter container on desktop */
      .bvi-mobile-filter-container {
        display: none;
      }
    }

    &.single-product {
      .product_meta {
        span {
          font-size: var(--t-small);
          color: var(--text-color);
          line-height: var(--default-line-height);
          font-family: var(--body-font-family);
        }
      }

      .et_pb_wc_title {
        color: var(--primary-color);
      }

      .et_pb_wc_add_to_cart {
        form.cart {
          table.variations {
            border-collapse: separate;
            border-spacing: 0 20px;
            /* Account for undesirable border-spacing above table */
            margin-top: -20px;
            margin-bottom: 0;

            tr {
            }

            th.label {
              vertical-align: middle;
              padding-right: 10px;

              label {
                font-size: var(--t-small);
                color: var(--text-color);
                font-weight: 700;
                font-family: var(--body-font-family);
              }
            }

            td.value {
              padding-bottom: 0 !important;

              span {
                select {
                  min-height: 50px;
                  font-family: var(--body-font-family);
                  font-size: var(--body-font-size);
                  color: var(--brown) !important;
                  padding: 10px 20px !important;
                  background-color: var(--light-blue);
                  border-radius: var(--form-input-radius);
                }

                &:after {
                  right: 14px;
                  margin-top: 0;
                  transform: translateY(-233%);
                }
              }

              a.reset_variations {
                position: absolute;
                bottom: -2rem;
                right: 0;
              }
            }
          }

          .single_variation_wrap {
            margin-top: 2rem;
            /* revealed with jQuery */
            display: none;

            .woocommerce-variation {
              .woocommerce-variation-description {
                p {
                  font-size: var(--small-font-size);
                  color: var(--white);
                  background-color: var(--blue);
                  font-weight: 500;
                  padding: 1rem;
                  border-radius: var(--form-input-radius);
                }
              }
            }
          }

          .woocommerce-Price-amount {
            margin-top: 2rem;
            display: block;
            font-size: var(--t-h3);
          }

          p.stock {
            color: var(--text-color);
            margin-bottom: 1rem;
          }

          .quantity {
            margin-right: 10px !important;
          }
        }
      }

      .et_pb_wc_reviews {
        .woocommerce-Reviews#reviews {
          #comments {
            h2.woocommerce-Reviews-title {
              margin-bottom: 15px !important;
              font-size: var(--t-h5);
              color: var(--text-color);
              font-weight: 500;
            }

            .commentlist {
              .review {
                .comment_container {
                  .comment-text {
                    .meta {
                      color: var(--text-color);
                      margin-bottom: 5px !important;
                    }

                    p {
                      font-size: var(--t-small);
                      color: var(--text-color);
                      font-weight: 500;
                    }
                  }
                }
              }
            }
          }

          #review_form_wrapper {
            #review_form {
              .comment-respond {
                form {
                  p.stars {
                    padding-bottom: 0;
                  }

                  p.comment-form-comment {
                    padding-bottom: 0;

                    textarea {
                      border-radius: var(--form-input-radius);
                      background-color: var(--light-blue);
                      padding: 15px !important;
                      color: var(--brown);
                      resize: vertical;
                      max-height: 100% !important;
                      height: auto !important;
                    }
                  }

                  p.comment-form-author {
                    width: calc(50% - 7.5px);
                    float: left;

                    input {
                      width: 100%;
                    }
                  }

                  p.comment-form-email {
                    width: calc(50% - 7.5px);
                    float: right;

                    input {
                      width: 100%;
                    }
                  }

                  p.comment-form-cookies-consent {
                    display: none;
                  }

                  button[type="submit"] {
                    background-color: var(--primary-color) !important;
                    color: var(--white) !important;
                    font-size: var(--body-font-size);
                    text-transform: uppercase;
                    font-weight: 700;
                    height: 50px;
                    padding: 1rem 2rem;

                    &:hover {
                      opacity: 0.9;
                    }
                  }
                }
              }
            }
          }
        }
      }

      .et_pb_wc_related_products {
        .related.products {
          h2 {
            margin-bottom: 30px;
            padding-bottom: 0;
            font-size: var(--t-h3) !important;
          }
        }
      }

      .up-sells.upsells {
        h2 {
          font-size: var(--t-h3) !important;
          margin-bottom: 30px;
          color: var(--primary-color) !important;
        }
      }
    }
  }
}

/* WooCommerce common styles (forms, etc.) */

body.wp-child-theme-graceatwork-divi {
  &.woocommerce,
  .woocommerce {
    input[type="number"],
    input[type="text"]:not(.adminbar-input),
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    input[type="password"],
    textarea,
    .select2-selection,
    select {
      border-radius: var(--radius) !important;
      color: var(--brown) !important;
      background-color: var(--light-blue) !important;
      font-size: var(--body-font-size) !important;
      max-height: 50px !important;
      height: 50px !important;
      padding: 5px 15px !important;
    }

    button[type="submit"],
    input[type="submit"] {
      background-color: var(--primary-color);
      color: var(--white);
      font-size: var(--body-font-size);
      font-weight: 700;
      padding: 1rem 2rem;
      border-radius: var(--form-input-radius);
      border: none;
      height: 54px;

      &:hover {
        background-color: var(--primary-color);
        color: var(--white);
        opacity: 0.9;
      }
    }

    button.button,
    a.button {
      font-size: var(--body-font-size);
      padding: 1rem 2rem;
      height: 54px;
      border-radius: var(--radius);
      border: none;
    }

    .woocommerce-Price-amount {
      bdi {
        /* color: var(--brown) !important;
        font-size: var(--t-body) !important; */
      }
    }

    /* Make all checkboxes a bit bigger */
    .woocommerce-form__label-for-checkbox {
      display: flex;
      align-items: center;
      gap: 8px;

      &,
      span {
        line-height: 1;
      }

      input.woocommerce-form__input-checkbox {
        width: 20px;
        height: 20px;
      }
    }
  }

  .gaw-woocommerce-form-shortcode-section .woocommerce {
    h2 {
      color: var(--primary-color);
      text-align: center;
      margin-bottom: 20px;
    }

    .woocommerce-form {
      max-width: 700px;
      margin: 0 auto;

      .form-row:has(.woocommerce-form-login__submit),
      .form-row:has(.woocommerce-form-register__submit) {
        display: flex;
        flex-direction: row-reverse;
        justify-content: flex-end;
        align-items: center;
        padding-left: 0;

        .woocommerce-form-login__rememberme {
          cursor: pointer;
        }
      }

      .woocommerce-privacy-policy-text {
        margin: 10px 0;

        &,
        p {
          font-size: var(--t-small);
          color: var(--text-color);
          font-weight: 500;
        }
      }
    }
  }
}

body.wp-child-theme-graceatwork-divi {
  .onsale {
    background-color: var(--blue) !important;
    color: var(--white) !important;
    font-size: var(--t-small) !important;
    font-weight: 700 !important;
    padding: 0.5rem 1rem !important;
    border-radius: var(--radius) !important;
  }

  ul.products {
    li.product {
      .et_shop_image {
        overflow: hidden;
        img {
          border-radius: var(--radius);
          height: 300px;
          object-fit: cover;
          transition: transform 0.3s ease;
          &:hover {
            transform: scale(1.05);
          }
        }
        .et_overlay {
          display: none !important;
        }
      }

      h2.woocommerce-loop-product__title {
        color: var(--primary-color) !important;
        margin-bottom: 0 !important;
        /* height: 117px; */
        font-size: var(--t-h3) !important;
        /* display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis; */
      }

      a.price {
        .woocommerce-Price-amount {
          bdi,
          span {
            color: var(--brown) !important;
            font-weight: 700 !important;
            font-size: var(--t-h4) !important;
          }
        }
      }
    }
  }

  .woocommerce-cart {
    .woocommerce-cart-form {
      .shop_table {
        .woocommerce-cart-form__cart-item {
          .product-remove {
            a.remove {
              color: var(--primary-color) !important;
              font-size: 1.5rem !important;
              height: 1.5rem;
              width: 1.5rem;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 50%;
              transition: all 0.3s ease;

              &:hover {
                color: var(--white) !important;
                background-color: var(--primary-color) !important;
              }
            }
          }
        }
      }
    }

    .cart_totals {
      .shop_table {
        max-width: 400px;
      }
    }

    .wc-proceed-to-checkout {
      a.button.checkout-button {
        max-width: 400px;
        margin-right: auto;
        background-color: var(--primary-color) !important;
        color: var(--white) !important;
        font-size: var(--body-font-size) !important;
        font-weight: 700 !important;
        padding: 1rem 2rem !important;
        border-radius: var(--form-input-radius) !important;
        border: none !important;
        display: flex;
        justify-content: center;
        align-items: center;

        &:hover {
          opacity: 0.9;
        }
      }
    }
  }
}

body.wp-child-theme-graceatwork-divi.woocommerce-js {
  h1.entry-title.main_title {
    color: var(--primary-color) !important;
    font-size: var(--t-h1) !important;
    font-weight: 700 !important;
  }

  .woocommerce {
    th,
    label {
      color: var(--text-color) !important;
      font-size: var(--t-small) !important;
      font-weight: 700 !important;
    }

    td {
      color: var(--text-color) !important;
      font-size: var(--t-body) !important;
    }

    input[type="submit"].button {
      &[value="Create List"],
      &[value="Search"] {
        background-color: var(--primary-color) !important;
        color: var(--white) !important;
        font-size: var(--body-font-size) !important;
        font-weight: 700 !important;
        height: 54px !important;
        padding: 1rem 2rem !important;
        border-radius: var(--form-input-radius) !important;
        border: none !important;

        &:hover {
          opacity: 0.9;
        }
      }
    }
  }
}

body.wp-child-theme-graceatwork-divi.woocommerce-account {
  &,
  &.et-db #et-boc {
    p:not(p.p2) {
      a:not(.et_pb_module_header > a) {
        font-size: var(--t-h4);
      }
    }

    .woocommerce-MyAccount-content {
      p {
        font-size: var(--t-body);
      }

      .woocommerce-info {
        background-color: var(--light-blue) !important;
        color: var(--primary-color) !important;

        a.button.wc-forward {
          background-color: var(--primary-color) !important;
          color: var(--white) !important;
          border-color: var(--primary-color) !important;
          display: flex;
          align-items: center;

          &:hover {
            opacity: 0.9;
          }
        }
      }

      .woocommerce-Addresses {
        .woocommerce-Address {
          .woocommerce-Address-title {
            h2 {
              font-size: var(--t-h3);
              color: var(--primary-color);
            }

            margin-bottom: 1rem;
          }

          address {
            font-size: var(--t-small);
          }
        }
      }

      .address_book {
        header {
          h3 {
            font-size: var(--t-h3);
            color: var(--primary-color);
          }
        }

        .wc-address-book-meta {
          a.button.wp-element-button {
            background-color: var(--light-blue) !important;
            color: var(--primary-color) !important;
            font-size: var(--body-font-size) !important;
            font-weight: 700 !important;
            padding: 1rem 2rem !important;
            border-radius: var(--form-input-radius) !important;
            border: none !important;
          }

          .wc-address-book-default-text {
            display: flex;
            height: 100%;
            align-items: center;
            padding: 5px;
            justify-content: center;
            font-size: var(--t-small);
          }
        }
      }

      form {
        h2 {
          color: var(--primary-color);
        }

        .woocommerce-address-fields {
          .woocommerce-address-fields__field-wrapper {
            .woocommerce-input-wrapper {
              .description {
                display: block;
                font-size: var(--t-small);
              }
            }
          }
        }

        #account_display_name_description {
          font-size: var(--t-small);
        }
      }
    }

    .woocommerce-orders-table {
      .woocommerce-orders-table__row {
        a.button.woocommerce-button {
          background-color: var(--primary-color) !important;
          color: var(--white) !important;
          font-size: var(--body-font-size) !important;
          font-weight: 700 !important;
          padding: 0.5rem 2rem !important;
          height: 40px !important;

          &:hover {
            opacity: 0.9;
          }
        }
      }
    }

    .woocommerce-order-details {
      .woocommerce-order-details__title {
        font-size: var(--t-h3);
        color: var(--primary-color);
        margin: 1rem 0;
      }

      ul.wc-item-meta {
        li {
          display: flex;
          align-items: center;
          gap: 0.5rem;

          &,
          p {
            font-size: var(--t-small);
          }
        }
      }

      .order-again {
        a.button {
          background-color: var(--primary-color) !important;
          color: var(--white) !important;
          font-size: var(--body-font-size) !important;
          font-weight: 700 !important;
          padding: 0.5rem 2rem !important;
          height: 50px !important;
          max-width: 200px !important;
          justify-content: center;
          display: flex;
          align-items: center;
        }
      }
    }

    .woocommerce-customer-details {
      h2 {
        font-size: var(--t-h3);
        color: var(--primary-color);
        margin-bottom: 1rem;
      }

      address {
        font-size: var(--t-small);
      }

      .woocommerce-customer-details--phone,
      .woocommerce-customer-details--email {
        font-size: var(--t-small);
        padding-bottom: 0;
        margin-top: 10px;
        display: flex;
        align-items: center;
      }
    }
  }
}

/* Featured Home Page Product Styles */
.featured-home-page-product {
  .featured-product-layout {
    display: flex;
    align-items: stretch;
    min-height: 220px;

    @media (max-width: 768px) {
      flex-direction: column;
      min-height: auto;
    }
  }

  .featured-product-image-column {
    flex: 0 0 33.333%;
    position: relative;
    overflow: hidden;

    @media (max-width: 768px) {
      flex: none;
      height: 200px;
    }

    .featured-product-image {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;

      .featured-product-img {
        width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: var(--radius-medium);

        @media (max-width: 768px) {
          border-radius: var(--radius-medium);
          object-fit: contain;
        }
      }
    }
  }

  .featured-product-content-column {
    flex: 0 0 66.667%;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;

    @media (max-width: 768px) {
      flex: none;
      padding: 1.5rem;
      gap: 0.75rem;
    }

    .subheading {
      color: var(--text-color);
      margin: 0;
    }

    .featured-product-title {
      color: var(--primary-color);
      margin: 0;
    }

    .featured-product-description {
      margin: 0;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      padding-bottom: 0;

      /* Ensure all child elements inherit the line-clamp behavior */
      p,
      div,
      span,
      strong,
      em,
      a {
        display: inline;
        margin: 0;
        padding: 0;
      }

      /* Remove any block-level elements that might break the line-clamp */
      hr,
      br {
        display: none;
      }
    }

    .featured-product-button {
      align-self: flex-start;
      margin-top: 0.5rem;
    }
  }
}

/* Product page image gallery styles */

.woocommerce-product-gallery {
  position: relative;

  /* Scrollable wrapper container */
  .flex-control-nav-wrapper {
    position: relative;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    padding: 10px 0;

    /* Hide default scrollbar but keep functionality */
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  /* Inner track that holds the thumbnails */
  .flex-control-nav-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    overflow: auto;
  }

  /* The actual thumbnail list */
  ol.flex-control-nav.flex-control-thumbs {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: max-content;
    min-width: 100%;

    li {
      flex: 0 0 calc(25% - 7.5px) !important;
      float: none !important;
      margin: 0 !important;
      width: auto !important;
      list-style: none;

      img {
        width: 100%;
        height: auto;
        object-fit: cover;
        display: block;
      }
    }
  }

  /* Gradient overlays to indicate more content */
  .flex-control-nav-wrapper::before,
  .flex-control-nav-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .flex-control-nav-wrapper::before {
    left: 0;
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0.9),
      rgba(255, 255, 255, 0)
    );
  }

  .flex-control-nav-wrapper::after {
    right: 0;
    background: linear-gradient(
      to left,
      rgba(255, 255, 255, 0.9),
      rgba(255, 255, 255, 0)
    );
  }

  .flex-control-nav-wrapper.has-scroll-left::before,
  .flex-control-nav-wrapper.has-scroll-right::after {
    opacity: 1;
  }

  /* Scroll arrow buttons - positioned relative to wrapper */
  .gallery-scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 4;
    opacity: 0;
    transition: opacity 0.3s ease, background 0.2s ease;
    font-size: 20px;
    line-height: 1;

    &:hover {
      background: rgba(0, 0, 0, 0.8);
    }

    &:disabled {
      opacity: 0.3;
      cursor: not-allowed;
    }
  }

  /* Hiding these for now as they're not working */
  .gallery-scroll-btn--left {
    display: none;
    left: 10px;
  }

  .gallery-scroll-btn--right {
    display: none;
    right: 10px;
  }

  .flex-control-nav-wrapper:hover .gallery-scroll-btn:not(:disabled) {
    opacity: 1;
  }

  /* Mobile adjustments */
  @media (max-width: 768px) {
    ol.flex-control-nav.flex-control-thumbs li {
      flex: 0 0 calc(33.333% - 6.67px) !important; /* 3 items on tablets */
    }
  }

  @media (max-width: 480px) {
    ol.flex-control-nav.flex-control-thumbs li {
      flex: 0 0 calc(50% - 5px) !important; /* 2 items on mobile */
    }

    .gallery-scroll-btn {
      width: 32px;
      height: 32px;
      font-size: 16px;
    }
  }
}

/* Resets */
.woocommerce form .form-row-first,
.woocommerce form .form-row-last,
.woocommerce-page form .form-row-first,
.woocommerce-page form .form-row-last {
  width: 48.5%;
}

.et_pb_wc_cart_totals
  .select2-container--default
  .select2-selection--single
  .select2-selection__arrow,
.et_pb_wc_checkout_billing
  .select2-container--default
  .select2-selection--single
  .select2-selection__arrow,
.et_pb_wc_checkout_shipping
  .select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  top: 0;
}