/* AstriOnLine courses: catalogue cards, buy box, access page, strip. Colours follow the theme. */
.aoc {
	--aoc-ink: #f6f0e4;
	--aoc-muted: #c9c4d2;
	--aoc-dim: #8f8aa3;
	--aoc-gold: #d3a967;
	--aoc-gold-bright: #efcf91;
	--aoc-line: rgba(211, 169, 103, .32);
	--aoc-serif: Georgia, "Times New Roman", serif;
	color: var(--aoc-ink);
}
.aoc [hidden] { display: none !important; }
.aoc p { color: var(--aoc-muted); line-height: 1.7; }
.aoc h1, .aoc h2, .aoc h3 { color: var(--aoc-ink); font-family: var(--aoc-serif); font-weight: 400; line-height: 1.25; }
.aoc-kicker { color: var(--aoc-gold-bright) !important; font-size: .74rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 6px; }
.aoc-help { color: var(--aoc-dim) !important; font-size: .82rem; margin: 10px 0 0; }
.aoc-help a { color: var(--aoc-gold-bright); }
.aoc-button {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 46px; padding: 0 22px; border: 1px solid var(--aoc-gold); border-radius: 4px;
	background: linear-gradient(135deg, #efcf91, #bd8d4e); color: #0b0b16 !important;
	font-weight: 650; text-decoration: none !important; cursor: pointer; font: inherit; font-weight: 650;
}
.aoc-button:hover, .aoc-button:focus-visible { filter: brightness(1.06); }
.aoc-button[disabled] { opacity: .7; cursor: wait; }
.aoc-button--wide { width: 100%; }

/* Catalogue */
.aoc-catalog { display: grid; gap: 22px; }
.aoc-card { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 24px; align-items: start; padding: 22px; border: 1px solid var(--aoc-line); border-radius: 10px; background: rgba(7, 9, 25, .45); }
.aoc-card--soon { opacity: .82; }
.aoc-card__media img { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 14px 30px rgba(0, 0, 0, .45); }
.aoc-card--soon .aoc-card__media img { filter: grayscale(.35); }
.aoc-card__placeholder { display: grid; place-items: center; aspect-ratio: 560 / 792; border: 1px solid var(--aoc-line); border-radius: 4px; background: radial-gradient(circle at 50% 35%, rgba(140, 107, 174, .35), transparent 60%), #13143a; color: var(--aoc-gold); font-size: 2.4rem; }
.aoc-card__body h3 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); margin: 0 0 8px; }
.aoc-card__body h3 a { color: inherit; text-decoration: none; }
.aoc-card__body h3 a:hover { color: var(--aoc-gold-bright); }
.aoc-card__body p { margin: 0 0 10px; }
.aoc-card__badge { display: inline-block; margin: 0 0 10px !important; padding: 3px 10px; border-radius: 999px; font-size: .72rem !important; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; background: rgba(127, 178, 140, .16); color: #a9d8b4 !important; }
.aoc-card--soon .aoc-card__badge { background: rgba(255, 255, 255, .07); color: var(--aoc-dim) !important; }
.aoc-card__facts { color: var(--aoc-gold-bright) !important; font-size: .9rem; }
.aoc-card__note { font-size: .85rem; font-style: italic; }
.aoc-card__action { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 14px !important; }
.aoc-card__price { color: var(--aoc-ink); font-family: var(--aoc-serif); font-size: 1.25rem; }

/* Buy box */
.aoc-buy-box { display: grid; grid-template-columns: minmax(180px, 280px) minmax(0, 1fr); gap: clamp(20px, 4vw, 44px); align-items: start; padding: clamp(20px, 4vw, 36px); border: 1px solid var(--aoc-line); border-radius: 12px; background: radial-gradient(ellipse at 85% 0%, rgba(140, 107, 174, .3), transparent 60%), linear-gradient(160deg, #13143a, #070919); }
.aoc-buy-box__cover img { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 18px 40px rgba(0, 0, 0, .5); }
.aoc-buy-box h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 8px; }
.aoc-buy-box__price { color: var(--aoc-ink) !important; font-family: var(--aoc-serif); font-size: 1.2rem; margin: 6px 0 18px; }
.aoc-form { display: grid; gap: 14px; max-width: 560px; }
.aoc-field { display: grid; gap: 6px; }
.aoc-field > span { color: var(--aoc-gold-bright); font-size: .85rem; letter-spacing: .04em; }
.aoc-field small { color: var(--aoc-dim); font-size: .82rem; }
.aoc input[type="email"] { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--aoc-line); border-radius: 4px; background: rgba(7, 9, 25, .7); color: var(--aoc-ink); font: inherit; color-scheme: dark; }
.aoc input:focus-visible { outline: 2px solid var(--aoc-gold-bright); outline-offset: 2px; }
.aoc-check { display: flex; gap: 10px; align-items: flex-start; color: var(--aoc-muted); font-size: .92rem; line-height: 1.5; }
.aoc-check input { margin-top: 4px; accent-color: var(--aoc-gold); }
.aoc-check a { color: var(--aoc-gold-bright); }
.aoc-error { color: #f3a28a !important; margin: 0; }

/* Access page */
.aoc-access { max-width: 860px; margin: 0 auto; padding: clamp(24px, 5vw, 44px); border: 1px solid var(--aoc-line); border-radius: 12px; background: linear-gradient(160deg, #13143a, #070919); }
.aoc-access h1 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); margin: 4px 0 12px; }
.aoc-access__grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; align-items: start; }
.aoc-access__cover { width: 100%; height: auto; border-radius: 4px; box-shadow: 0 16px 34px rgba(0, 0, 0, .5); }
.aoc-access__course { color: var(--aoc-gold-bright) !important; }
.aoc-access__start { margin-top: 26px; padding: 18px 20px; border: 1px solid rgba(211, 169, 103, .25); border-radius: 8px; background: rgba(7, 9, 25, .45); }
.aoc-access__start h2 { font-size: 1.25rem; margin: 0 0 6px; }
.aoc-access__start a { color: var(--aoc-gold-bright); }
.aoc-spinner { width: 44px; height: 44px; margin: 18px 0; border-radius: 50%; border: 3px solid var(--aoc-line); border-top-color: var(--aoc-gold-bright); animation: aoc-spin 1.1s linear infinite; }
@keyframes aoc-spin { to { transform: rotate(360deg); } }
.ao-page-corsi-accesso main { padding-top: 120px; padding-bottom: 60px; }

/* Strip */
.aoc-cta { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; margin: 28px 0; padding: 16px 20px; border: 1px solid var(--aoc-line); border-radius: 8px; background: linear-gradient(90deg, rgba(140, 107, 174, .22), rgba(19, 20, 58, .75)); }
.aoc-cta p { margin: 0; color: var(--aoc-ink); flex: 1 1 320px; }
.aoc-cta strong { color: var(--aoc-gold-bright); }
.aoc-cta__kicker { display: inline-block; margin-right: 8px; padding: 2px 9px; border-radius: 999px; background: rgba(211, 169, 103, .16); color: var(--aoc-gold-bright); font-size: .72rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; vertical-align: 2px; }

/* Lesson previews on the course page */
.aoc-previews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 18px 0; }
.aoc-previews img { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 12px 26px rgba(0, 0, 0, .45); }

@media (max-width: 720px) {
	.aoc-card { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 16px; }
	.aoc-buy-box, .aoc-access__grid { grid-template-columns: 1fr; }
	.aoc-buy-box__cover, .aoc-access__cover { max-width: 200px; }
	.aoc-previews { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .aoc-spinner { animation: none; } }

/* Shop: the birth chart reading card uses the sales page artwork, cropped to the card format. */
.aoc-card--report .aoc-card__media img { aspect-ratio: 560 / 792; object-fit: cover; object-position: 72% center; }