/* ==========================================================
   DIGITALMAKERS — WOK PDP ENHANCEMENTS
   Added: 2026-11-11
   Scope: Product page only
   Rollback: remove this stylesheet from main-product.liquid
   ========================================================== */

.product__info-wrapper {
  /* Size selector: visual enhancement only. Existing JS/variant logic is untouched. */
  size-selector {
    display: block;
    margin: 1.6rem 0 1rem;

    pdp-dropdown {
      display: block;

      .dropdown {
        border: 0;
        border-radius: 0;
        font-size: 1.3rem;
        width: 100%;

        .dropdown__summary {
          margin-bottom: 0.8rem;

          .dropdown__close-label {
            cursor: default;
            padding: 0;

            .dropdown__summary-content {
              justify-content: flex-start;
              line-height: 1.4;

              .dropdown__summary-content-selected-option {
                display: none;
              }
            }
          }
        }

        .dropdown__close-radio {
          display: none;
        }

        .dropdown__content,
        .dropdown__close-radio:checked ~ .dropdown__content {
          height: auto;
          max-height: none;
          overflow: visible;
          padding: 0;

          .dropdown__options {
            display: grid;
            gap: 0.8rem;
            grid-template-columns: repeat(auto-fit, minmax(4.8rem, 1fr));

            .dropdown__option {
              align-items: center;
              background: rgb(var(--color-background));
              border: 0.1rem solid rgb(var(--color-foreground));
              border-radius: 0.4rem;
              color: rgb(var(--color-foreground));
              display: flex;
              justify-content: center;
              margin: 0;
              min-height: 4rem;
              padding: 0.7rem 0.8rem;
              text-align: center;
              transition:
                background-color var(--duration-short) ease,
                color var(--duration-short) ease,
                opacity var(--duration-short) ease;

              > div:first-child {
                line-height: 1.2;
              }

              > div:last-child {
                display: none;
              }

              &:not(.dropdown__option--disabled) {
                &:hover {
                  background: rgba(var(--color-foreground), 0.06);
                  font-weight: inherit;
                }
              }

              &.dropdown__option--selected {
                background: rgb(var(--color-foreground));
                color: rgb(var(--color-background));
                font-weight: 500;

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

              &.dropdown__option--disabled {
                cursor: not-allowed;
                opacity: 0.3;
                position: relative;

                > div:first-child {
                  text-decoration: line-through;
                }
              }
            }
          }
        }
      }
    }
  }

  /* Size guide: compact, left-aligned secondary action as in the mockup. */
  .size-guide-modal__opener-wrapper {
    display: block;
    margin: 0.2rem 0 1.2rem;

    .size-guide-modal__opener-button {
      align-items: center;
      display: inline-flex;
      font-size: 1.2rem;
      justify-content: flex-start;
      padding: 0;
      text-align: left;
      width: auto;

      .size-guide-modal__opener {
        text-decoration: underline;
        text-underline-offset: 0.2rem;
      }
    }
  }

  /* Primary CTA: stronger visual hierarchy without changing product-form logic. */
  .product-form {
    .product-form__buttons {
      .product-form__submit {
        border-radius: 0.4rem;
        margin-bottom: 1.2rem;
        min-height: 4.8rem;
        padding: 1.3rem 1.8rem;
        transition:
          opacity var(--duration-short) ease,
          transform var(--duration-short) ease;

        .product-form__submit-text {
          font-size: 1.2rem;
          font-weight: 500;
          letter-spacing: 0.04em;
        }

        &:not(:disabled):active {
          transform: translateY(0.1rem);
        }

        &:disabled {
          opacity: 0.45;
        }
      }
    }
  }
}

@media screen and (min-width: 750px) {
  .product__info-wrapper {
    size-selector {
      pdp-dropdown {
        .dropdown {
          .dropdown__content,
          .dropdown__close-radio:checked ~ .dropdown__content {
            .dropdown__options {
              grid-template-columns: repeat(auto-fit, minmax(5.2rem, 1fr));
            }
          }
        }
      }
    }

    .product-form {
      .product-form__buttons {
        .product-form__submit {
          min-height: 5rem;

          .product-form__submit-text {
            font-size: 1.3rem;
          }
        }
      }
    }
  }
}

/* END DIGITALMAKERS — WOK PDP ENHANCEMENTS */