/* Aprenda Crochê – componentes renderizados pelo plugin.
   Usa as variáveis globais do Bricks (--c-*, --space-*, --radius-*, --shadow-*). */

.ac-icon { width: 1.25em; height: 1.25em; flex: none; }
.ac-muted { color: var(--c-ink-soft); font-size: var(--text-s); }
[hidden] { display: none !important; }

/* ---------- Vídeo com fachada ---------- */
.ac-video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-l); overflow: hidden; background: var(--c-ink); box-shadow: var(--shadow-soft); }
.ac-video__btn { all: unset; position: absolute; inset: 0; cursor: pointer; display: block; }
.ac-video__btn:focus-visible { outline: 3px solid var(--c-brand); outline-offset: -3px; }
.ac-video__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease, filter .3s ease; }
.ac-video__btn:hover .ac-video__img { transform: scale(1.02); filter: brightness(.92); }
.ac-video__play { position: absolute; left: 50%; top: 50%; width: clamp(64px, 11vw, 92px); aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; display: grid; place-items: center; background: var(--c-brand); color: #fff; box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .45); transition: transform .2s ease, background-color .2s ease; }
.ac-video__play .ac-icon { width: 42%; height: 42%; fill: currentColor; stroke: none; margin-left: 6%; }
.ac-video__btn:hover .ac-video__play { transform: scale(1.06); background: var(--c-brand-dark); }
.ac-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Botões de ação ---------- */
.ac-acoes { display: flex; flex-wrap: wrap; gap: var(--space-2xs); align-items: center; }
.ac-btn { display: inline-flex; align-items: center; gap: .5em; min-height: 46px; padding: .6em 1.1em; border: 1.5px solid var(--c-line); border-radius: var(--radius-full); background: var(--c-surface); color: var(--c-ink); font: inherit; font-size: 1rem; font-weight: 600; line-height: 1; cursor: pointer; text-decoration: none; transition: border-color .2s ease, background-color .2s ease, color .2s ease, transform .15s ease; }
.ac-btn:hover { border-color: var(--c-brand); color: var(--c-brand-dark); }
.ac-btn:focus-visible { outline: 3px solid var(--c-brand); outline-offset: 2px; }
.ac-btn .ac-icon { color: var(--c-brand); }
.ac-btn__count { min-width: 1.6em; padding: .2em .45em; border-radius: var(--radius-full); background: var(--c-tint); color: var(--c-brand-dark); font-size: .8125rem; text-align: center; }
.ac-btn--fav.is-on { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }
.ac-btn--fav.is-on .ac-icon { color: #fff; fill: currentColor; }
.ac-btn--fav.is-on .ac-btn__count { background: rgba(255, 255, 255, .22); color: #fff; }
.is-pop .ac-icon { animation: ac-pop .4s ease; }
@keyframes ac-pop { 40% { transform: scale(1.35); } }

.ac-fav-mini { position: absolute; top: .6rem; right: .6rem; z-index: 2; width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--c-brand); cursor: pointer; box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .35); transition: transform .15s ease, background-color .2s ease; }
.ac-fav-mini:hover { transform: scale(1.08); }
.ac-fav-mini:focus-visible { outline: 3px solid var(--c-brand); outline-offset: 2px; }
.ac-fav-mini.is-on { background: var(--c-brand); color: #fff; }
.ac-fav-mini.is-on .ac-icon { fill: currentColor; }

.ac-remove { position: absolute; top: .6rem; left: .6rem; z-index: 2; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--c-ink); color: #fff; cursor: pointer; }

.ac-conta-btn { display: inline-flex; align-items: center; gap: .45em; min-height: 44px; padding: .55em 1.1em; border-radius: var(--radius-full); background: var(--c-brand); color: #fff; font-weight: 700; font-size: .9375rem; line-height: 1; text-decoration: none; white-space: nowrap; transition: background-color .2s ease; }
.ac-conta-btn:hover { background: var(--c-brand-dark); color: #fff; }
.ac-conta-btn .ac-icon { width: 1.1em; height: 1.1em; }
.ac-conta-btn.is-logged { background: var(--c-tint); color: var(--c-brand-dark); }
.ac-conta-btn.is-logged .ac-icon { fill: currentColor; }
@media (max-width: 478px) { .ac-conta-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .ac-conta-btn { width: 44px; height: 44px; padding: 0; justify-content: center; } }

/* ---------- Ficha técnica ---------- */
.ac-ficha { margin: 0; display: grid; gap: 0; border: 1px solid var(--c-line); border-radius: var(--radius-m); background: var(--c-surface); overflow: hidden; }
.ac-ficha__row { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--space-s); padding: .8rem var(--space-s); border-bottom: 1px solid var(--c-line); }
.ac-ficha__row:last-child { border-bottom: 0; }
.ac-ficha dt { color: var(--c-ink-soft); font-size: var(--text-s); font-weight: 600; letter-spacing: .02em; }
.ac-ficha dd { margin: 0; font-weight: 600; }
.ac-ficha a { color: var(--c-brand-dark); text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat; }
.ac-ficha a:hover { color: var(--c-brand); }

/* ---------- Compra (afiliado) ---------- */
.ac-buy-group { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.ac-buy { display: inline-flex; align-items: center; gap: .45em; min-height: 42px; padding: .55em 1em; border-radius: var(--radius-full); font-size: .9375rem; font-weight: 700; line-height: 1; text-decoration: none; transition: filter .2s ease, transform .15s ease; }
.ac-buy:hover { filter: brightness(.95); transform: translateY(-1px); }
.ac-buy:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 2px; }
.ac-buy--shopee { background: var(--c-shopee); color: #fff; }
.ac-buy--ml { background: var(--c-ml); color: var(--c-ml-ink); }
.ac-aviso { margin: 0; color: var(--c-ink-soft); font-size: .875rem; line-height: 1.5; }

.ac-avatar { display: block; flex: none; border-radius: 50%; object-fit: cover; background: var(--c-tint); box-shadow: 0 0 0 3px var(--c-surface), 0 0 0 5px var(--c-tint); }

/* ---------- Redes do criador ---------- */
.ac-redes { display: flex; flex-wrap: wrap; gap: .5rem; }
.ac-rede { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--c-surface); border: 1px solid var(--c-line); color: var(--c-ink); transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.ac-rede:hover { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }
.ac-rede:focus-visible { outline: 3px solid var(--c-brand); outline-offset: 2px; }

/* ---------- Cores e materiais ---------- */
.ac-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.ac-chips li { padding: .5em .95em; border-radius: var(--radius-full); background: var(--c-tint); color: var(--c-brand-dark); font-size: var(--text-s); font-weight: 600; }
.ac-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.ac-checklist li { display: flex; gap: .6rem; align-items: flex-start; }
.ac-checklist .ac-icon { color: var(--c-sage); margin-top: .2em; }

.ac-badge { display: inline-flex; align-items: center; gap: .4em; padding: .45em .9em; border-radius: var(--radius-full); background: var(--c-sage-tint); color: var(--c-sage); font-size: .875rem; font-weight: 700; }
.ac-badge--muted { background: var(--c-linen); color: var(--c-ink-soft); }

/* ---------- Modais ---------- */
.ac-modal { width: min(460px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 0; border-radius: var(--radius-l); background: var(--c-surface); color: var(--c-ink); box-shadow: 0 30px 80px -20px rgba(55, 55, 54, .45); }
.ac-modal::backdrop { background: rgba(55, 55, 54, .45); backdrop-filter: blur(2px); }
.ac-modal[open] { animation: ac-rise .25s ease; }
@keyframes ac-rise { from { opacity: 0; transform: translateY(12px); } }
.ac-modal__box { position: relative; padding: var(--space-l) var(--space-m) var(--space-m); display: grid; gap: var(--space-s); }
.ac-modal__box--center { text-align: center; justify-items: center; }
.ac-modal__close { position: absolute; top: .6rem; right: .6rem; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--c-ink-soft); cursor: pointer; }
.ac-modal__close:hover { background: var(--c-linen); color: var(--c-ink); }
.ac-modal__title { margin: 0; padding-right: 2rem; font-size: var(--heading-3); }
.ac-modal__box--center .ac-modal__title { padding: 0; }
.ac-modal__box p { margin: 0; }
.ac-modal__icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--c-tint); color: var(--c-brand); }
.ac-modal__icon .ac-icon { width: 30px; height: 30px; fill: currentColor; }
.ac-modal__actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.ac-modal__lists { display: grid; gap: .4rem; max-height: 46vh; overflow: auto; }
.ac-list-choice { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .75rem; align-items: center; width: 100%; padding: .7rem .8rem; border: 1.5px solid var(--c-line); border-radius: var(--radius-m); background: var(--c-surface); color: var(--c-ink); font: inherit; text-align: left; cursor: pointer; }
.ac-list-choice:hover { border-color: var(--c-brand); }
.ac-list-choice__box { grid-row: span 2; width: 24px; height: 24px; border: 2px solid var(--c-line); border-radius: 7px; transition: all .15s ease; }
.ac-list-choice.is-on { border-color: var(--c-brand); background: var(--c-tint); }
.ac-list-choice.is-on .ac-list-choice__box { background: var(--c-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 16px no-repeat; border-color: var(--c-brand); }
.ac-list-choice__name { font-weight: 700; }
.ac-list-choice__meta { color: var(--c-ink-soft); font-size: .8125rem; }
.ac-modal__new { display: grid; gap: .5rem; padding-top: var(--space-s); border-top: 1px solid var(--c-line); }
.ac-modal__new > label:first-child { font-weight: 700; }
.ac-modal__row { display: flex; gap: .5rem; }
.ac-modal__row input { flex: 1; min-width: 0; }
.ac-check { display: flex; gap: .5rem; align-items: center; font-size: var(--text-s); color: var(--c-ink-soft); cursor: pointer; }
.ac-check input { width: 18px; height: 18px; accent-color: var(--c-brand); }

.ac-modal input[type=text], .ac-auth input[type=text], .ac-auth input[type=email], .ac-auth input[type=password] { width: 100%; min-height: 48px; padding: .65rem .9rem; border: 1.5px solid var(--c-line); border-radius: var(--radius-s); background: var(--c-surface); color: var(--c-ink); font: inherit; font-size: 1rem; }
.ac-modal input:focus, .ac-auth input:focus { outline: none; border-color: var(--c-brand); box-shadow: 0 0 0 3px var(--c-tint); }

.ac-share { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.ac-share a, .ac-share button { display: flex; align-items: center; gap: .6rem; min-height: 52px; padding: .7rem .9rem; border: 1.5px solid var(--c-line); border-radius: var(--radius-m); background: var(--c-surface); color: var(--c-ink); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.ac-share a:hover, .ac-share button:hover { border-color: var(--c-brand); color: var(--c-brand-dark); }
.ac-share .ac-icon { color: var(--c-brand); }

.ac-toast { position: fixed; left: 50%; bottom: max(1.25rem, env(safe-area-inset-bottom)); z-index: 100000; max-width: calc(100vw - 2rem); padding: .85rem 1.25rem; border-radius: var(--radius-full); background: var(--c-ink); color: #fff; font-weight: 600; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .45); opacity: 0; transform: translate(-50%, 12px); transition: opacity .25s ease, transform .25s ease; pointer-events: none; }
.ac-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Entrar / cadastro ---------- */
.ac-auth { display: grid; gap: var(--space-s); width: 100%; }
.ac-auth form, .ac-auth__form { display: grid; gap: .9rem; }
.ac-auth form p { margin: 0; display: grid; gap: .35rem; }
.ac-auth label { font-weight: 600; font-size: .9375rem; }
.ac-auth .login-remember label { display: flex; gap: .5rem; align-items: center; font-weight: 400; }
.ac-auth .login-remember input { accent-color: var(--c-brand); width: 18px; height: 18px; }
.ac-auth input[type=submit], .ac-auth .button-primary { width: 100%; min-height: 50px; border: 0; border-radius: var(--radius-full); background: var(--c-brand); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.ac-auth input[type=submit]:hover { background: var(--c-brand-dark); }
.ac-auth__form .bricks-button { width: 100%; justify-content: center; }
.ac-auth__notice { margin: 0; padding: .85rem 1rem; border-radius: var(--radius-m); background: var(--c-sage-tint); color: var(--c-sage); font-weight: 600; font-size: .9375rem; }
.ac-auth__or { display: flex; align-items: center; gap: .8rem; color: var(--c-ink-soft); font-size: .875rem; }
.ac-auth__or::before, .ac-auth__or::after { content: ""; flex: 1; height: 1px; background: var(--c-line); }
.ac-auth__links { margin: 0; text-align: center; font-size: .9375rem; }
.ac-auth__links a { color: var(--c-brand-dark); font-weight: 600; }
.ac-auth__social .nsl-container { display: block !important; }
.ac-auth__social .nsl-container-buttons { display: grid !important; padding: 0 !important; }
.ac-auth__social .nsl-button { width: 100% !important; min-height: 50px; border-radius: var(--radius-full) !important; justify-content: center; box-shadow: 0 0 0 1.5px var(--c-line) !important; }

/* ---------- Minha conta: listas ---------- */
.ac-lists-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-m); }
.ac-list-card { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--c-line); border-radius: var(--radius-l); background: var(--c-surface); overflow: hidden; }
.ac-list-card__media { display: block; aspect-ratio: 16 / 9; background: var(--c-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b14191' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M4 6h11M4 12h11M4 18h7M18 14v7M14.5 17.5h7'/%3E%3C/svg%3E") center / 48px no-repeat; }
.ac-list-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ac-list-card__body { display: grid; gap: .5rem; align-content: start; padding: var(--space-s); }
.ac-list-card__title { margin: 0; font-size: var(--heading-4); }
.ac-list-card__title a { color: inherit; text-decoration: none; }
.ac-list-card__title a:hover { color: var(--c-brand-dark); }
.ac-list-card__meta { margin: 0; color: var(--c-ink-soft); font-size: var(--text-s); }
.ac-list-card__actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .25rem; }
.ac-chip-btn { padding: .5em .85em; border: 1px solid var(--c-line); border-radius: var(--radius-full); background: var(--c-surface); color: var(--c-ink); font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; }
.ac-chip-btn:hover { border-color: var(--c-brand); color: var(--c-brand-dark); }
.ac-chip-btn--danger:hover { border-color: #b3261e; color: #b3261e; }
.ac-empty { padding: var(--space-l); border: 1.5px dashed var(--c-line); border-radius: var(--radius-l); background: var(--c-surface); text-align: center; color: var(--c-ink-soft); }
.ac-empty p { margin: 0 0 .4rem; }

@media (max-width: 478px) {
	.ac-btn { flex: 1 1 auto; justify-content: center; }
	.ac-ficha__row { grid-template-columns: 6.5rem 1fr; }
	.ac-share { grid-template-columns: 1fr; }
}