.product-page-wrapper { gap: 30px; max-width: 940px; margin: auto; }
  .product-page { gap: 10px; font-size: 1.15em; position: relative; }
  .product-page img {
    transition: 0.3s; width: 100%; max-width: min(100%, 400px); aspect-ratio: 1/1;
    border-radius: 15px; box-shadow: 0 0 10px rgba(0,0,0,0.2); background: #fff;
  }
  .product-page:hover img { box-shadow: 0 0 15px rgba(0,0,0,0.3); }
  .product-page .hover-image { opacity: 0; position: absolute; top: 0; left: 0; }
  .product-page:hover .hover-image { opacity: 1; }

  .qty { display: grid; gap: 8px; min-width: fit-content; }
  .qty-ctrl {
    display: inline-flex; align-items: center; border: 2px solid #aaa;
    border-radius: 10px; overflow: hidden; max-width: fit-content; min-width: fit-content;
  }
  .qty-btn { border: none; padding: 8px 12px; background: #f5f5f5; cursor: pointer; height: 100%; width: 40px; font-size: 1.2em; }
  .qty-btn:hover { color: white; }
  #qty-input {
    width: 54px; text-align: center; border: none; outline: none; font-weight: 600; height: 100%;
    border-left: 1px solid #aaa; border-right: 1px solid #aaa; -moz-appearance: textfield;
  }
  #qty-input::-webkit-inner-spin-button, #qty-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

  button.button.buy-button {
    margin: 0; margin-top: 10px; padding: 14px 18px; border-radius: 10px; background: #111; color: #fff;
    border: none; font-weight: 600; cursor: pointer; width: 100%;
    text-shadow: none;
  }

  button.button.buy-button[disabled], button.button.buy-button[disabled]:hover {
    background: #ccc; cursor: not-allowed; color: #666; transform: none;
  }
  
  button.button.buy-button:not([disabled]):hover { background: #000; color: white; }