/* Conta, compra e biblioteca usam os mesmos estilos do site. */
[hidden] { display: none !important; }
.commerce-panel { max-width: 580px; margin-top: 28px; padding: clamp(20px, 4vw, 36px); border: 1px solid var(--line); border-radius: 24px; background: var(--panel-deep); position: relative; z-index: 10; }
.commerce-form { display: grid; gap: 16px; margin-top: 24px; position: relative; z-index: 10; }
.commerce-form label { display: grid; gap: 8px; font-family: var(--display); font-weight: 700; font-size: 14px; color: var(--white); }
.commerce-form input:not([type="radio"]) { width: 100%; min-height: 48px; background: rgba(0, 0, 0, 0.5); border: 1px solid var(--line); border-radius: 10px; color: var(--white); font-family: var(--body); font-weight: 400; font-size: 16px; padding: 12px 14px; }
.commerce-form input:focus-visible { outline: 2px solid var(--magenta); outline-offset: 3px; }
.commerce-form fieldset { margin: 0; padding: 16px; border: 1px solid var(--line); border-radius: 12px; }
.commerce-form legend { padding-inline: 6px; }
.commerce-form .payment-choice { display: flex; align-items: center; gap: 12px; min-height: 44px; font-family: var(--body); font-weight: 400; font-size: 16px; color: var(--text); }
.commerce-form input[type="radio"] { width: 20px; height: 20px; accent-color: var(--magenta); }
.commerce-form button, .commerce-panel button { cursor: pointer; }
button:disabled { opacity: 0.55; cursor: wait; }
.commerce-page { min-height: min(100svh, 900px); }
.commerce-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 20px; position: relative; z-index: 10; }
.commerce-links a { min-height: 44px; display: inline-flex; align-items: center; color: var(--white); font-family: var(--display); font-weight: 700; font-size: 14px; text-decoration: underline; text-decoration-color: var(--magenta); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.commerce-links a:hover { color: var(--magenta); }
.commerce-message { margin-top: 24px; color: var(--text); }
.library-list { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 24px; position: relative; z-index: 10; }
.library-item { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 24px; align-items: center; padding: 24px 0; border-top: 1px solid var(--line); }
.library-item img { width: 92px; border-radius: 8px; box-shadow: var(--cover-frame); }
.library-item h2 { font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1.3; color: var(--white); margin: 0 0 16px; }
@media (max-width: 420px) { .library-item { grid-template-columns: 1fr; } .library-item img { width: 72px; } }