.buy-page {display: block; width: 100%;}

.buy-columns {display: flex; flex-direction: column; max-width: 1000px; margin: 0 auto; padding: 0 24px;}

.buy-summary-col {display: flex; flex-direction: column; padding: 32px 0 24px 0; border-bottom: 1px solid #EDEDED;}
.buy-checkout-col {padding: 24px 0 60px 0;}

.buy-brand {display: flex; align-items: center; gap: 10px; margin-bottom: 24px;}
.buy-brand-logo {width: 28px; height: 28px;}
.buy-brand-name {font-size: 15px; font-weight: 600; color: #284257; letter-spacing: 0.02em;}

.buy-headline {font-size: 14px; color: #6B7280; margin-bottom: 6px;}
.buy-title {font-size: 26px; color: #284257; font-weight: 400; margin: 0 0 8px 0;}
.buy-price {font-size: 22px; color: #194C8E; font-weight: 600; margin-bottom: 16px;}

.buy-details-toggle {display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 0; font-size: 14px; color: #194C8E; font-weight: 600; cursor: pointer;}
.buy-details-arrow {display: inline-block; font-size: 11px; transition: transform 0.15s ease;}
.buy-details-toggle.is-open .buy-details-arrow {transform: rotate(180deg);}

.buy-description {font-size: 14px; line-height: 150%; color: #5A6A85; margin-top: 12px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.2s ease, opacity 0.2s ease;}
.buy-description.is-open {max-height: 400px; opacity: 1;}

.buy-checkout-loading {font-size: 14px; color: #6B7280; padding: 20px 0;}

.buy-not-found {text-align: center; margin: 100px auto; max-width: 420px; padding: 0 20px;}
.buy-not-found h1 {font-size: 24px; color: #284257; font-weight: 400; margin: 0 0 12px 0;}
.buy-not-found p {color: #5A6A85; margin: 0 0 20px 0;}
.buy-not-found a {display: inline-block; padding: 12px 24px; background: #194C8E; color: #fff; text-decoration: none; border-radius: 8px; font-weight: 600;}
.buy-not-found a:hover {background: #284257;}

@media (min-width: 900px) {
  .buy-columns {flex-direction: row; align-items: flex-start; gap: 80px; padding: 0 40px;}
  .buy-summary-col {flex: 1 1 0; max-width: 420px; padding: 80px 0 80px 0; border-bottom: none; border-right: 1px solid #EDEDED; padding-right: 80px;}
  .buy-checkout-col {flex: 1 1 0; max-width: 420px; padding: 80px 0 80px 0;}
  /* Description is a nice-to-have on mobile (space is tight); on desktop there's
     room to just always show it, so the toggle only exists for narrow screens. */
  .buy-details-toggle {display: none;}
  .buy-description {max-height: none; opacity: 1; overflow: visible;}
}