/* Coffee Affiliate Pro - Frontend Stylesheet v2 */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=DM+Serif+Display:ital@0;1&family=Lato:wght@300;400;700&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap');

.cap-wrap *, .cap-wrap *::before, .cap-wrap *::after { box-sizing: border-box; }
.cap-wrap { font-family: var(--cap-font-body); color: var(--cap-text); margin: 1.75em 0; line-height: 1.5; }
.cap-wrap a { color: inherit; text-decoration: none; }

/* Scroll animation */
.cap-fade { opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .45s ease; }
.cap-visible { opacity: 1; transform: none; }

/* Disclosure */
.cap-disclosure { font-size: .72rem; color: var(--cap-text-muted); border-left: 3px solid var(--cap-border); padding: .3em .75em; margin-bottom: 1rem; font-style: italic; }

/* Section title */
.cap-section-title { font-family: var(--cap-font-head); font-size: 1.5rem; margin: 0 0 1rem; color: var(--cap-text); line-height: 1.2; }

/* Badge */
.cap-badge { display: inline-block; background: var(--cap-badge-bg); color: var(--cap-badge-text); font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .28em .7em; border-radius: var(--cap-radius); margin-bottom: .55rem; }
.cap-badge--sm { font-size: .58rem; padding: .2em .55em; }

/* Sale pill */
.cap-sale-pill { position: absolute; top: .5rem; right: .5rem; background: var(--cap-sale-bg); color: var(--cap-sale-text); font-size: .65rem; font-weight: 800; padding: .25em .55em; border-radius: 3px; letter-spacing: .04em; }

/* Stars */
.cap-stars { font-size: 1rem; letter-spacing: -.05em; color: var(--cap-star); }
.cap-star--empty { opacity: .3; }
.cap-card__rating { display: flex; align-items: center; gap: .35em; margin: .4em 0; flex-wrap: wrap; }
.cap-card__rating-num { font-weight: 700; font-size: .875rem; }
.cap-card__reviews { color: var(--cap-text-muted); font-size: .78rem; }

/* Price */
.cap-price { font-weight: 700; font-size: 1.05rem; }
.cap-price--original { font-weight: 400; text-decoration: line-through; color: var(--cap-text-muted); font-size: .875rem; margin-left: .3em; }
.cap-prime { font-size: .7rem; font-weight: 700; color: #00a8e0; margin-left: .4em; }

/* Button */
.cap-btn { display: inline-flex; align-items: center; justify-content: center; background: var(--cap-accent); color: var(--cap-btn-text) !important; padding: .65em 1.4em; border-radius: var(--cap-radius); font-family: var(--cap-font-body); font-weight: 700; font-size: .875rem; letter-spacing: .03em; cursor: pointer; transition: background .18s, transform .12s, box-shadow .2s; white-space: nowrap; }
.cap-btn:hover { background: var(--cap-accent-hover); transform: translateY(-1px); box-shadow: var(--cap-shadow-hover); }
.cap-btn--sm { padding: .45em 1em; font-size: .8rem; }

/* Pros / Cons */
.cap-list { margin: .35em 0; padding: 0; list-style: none; }
.cap-list li { padding: .18em 0 .18em 1.4em; font-size: .85rem; position: relative; line-height: 1.4; }
.cap-list--pros li::before { content: '\2713'; color: #22c55e; position: absolute; left: 0; font-weight: 700; }
.cap-list--cons li::before { content: '\2717'; color: #ef4444; position: absolute; left: 0; font-weight: 700; }
.cap-card__proscons { display: flex; gap: 1rem; flex-wrap: wrap; margin: .75rem 0; }
.cap-card__proscons .cap-list { flex: 1; min-width: 130px; }

/* Card base */
.cap-card { background: var(--cap-surface); border: 1px solid var(--cap-border); border-radius: var(--cap-radius); box-shadow: var(--cap-shadow); overflow: hidden; position: relative; }

/* Title & subtitle & desc */
.cap-card__title { font-family: var(--cap-font-head); font-size: 1.1rem; margin: 0 0 .2rem; line-height: 1.3; }
.cap-card__title a:hover { text-decoration: underline; }
.cap-card__subtitle { font-size: .78rem; font-weight: 700; color: var(--cap-accent); text-transform: uppercase; letter-spacing: .07em; margin: .05em 0 .45em; }
.cap-card__desc { font-size: .875rem; color: var(--cap-text-muted); margin: .4em 0 .6em; line-height: 1.55; }

/* Card footer */
.cap-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--cap-border); }
.cap-card__prices { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25em; }

/* ── MINIMAL THEME OVERRIDES ── */
.cap-wrap[data-theme="minimal"] .cap-card { border: 1.5px solid #0a0a0a; border-radius: 0; box-shadow: none; }
.cap-wrap[data-theme="minimal"] .cap-badge { border-radius: 0; }
.cap-wrap[data-theme="minimal"] .cap-btn { border-radius: 0; }
.cap-wrap[data-theme="minimal"] .cap-table th, .cap-wrap[data-theme="minimal"] .cap-table td { border-color: #0a0a0a; }
.cap-wrap[data-theme="minimal"] .cap-versus { border: 1.5px solid #0a0a0a; }
.cap-wrap[data-theme="minimal"] .cap-versus__badge { border: 1.5px solid #0a0a0a; }
.cap-wrap[data-theme="minimal"] .cap-toc { border: 1.5px solid #0a0a0a; border-radius: 0; }
.cap-wrap[data-theme="minimal"] .cap-verdict { border-top: 1.5px solid #0a0a0a; }
.cap-wrap[data-theme="minimal"] .cap-card__subtitle { color: #0a0a0a; }
.cap-wrap[data-theme="minimal"] .cap-sale-pill { border-radius: 0; }
.cap-wrap[data-theme="minimal"] .cap-card--grid { border-radius: 0; }
.cap-wrap[data-theme="minimal"] .cap-rank { border-radius: 0; }
.cap-wrap[data-theme="minimal"] .cap-list--pros li::before { color: #0a0a0a; }
.cap-wrap[data-theme="minimal"] .cap-list--cons li::before { color: #888; }

/* ── 1. SINGLE PRODUCT ── */
.cap-card__img-wrap { position: relative; background: var(--cap-bg); }
.cap-card__img { width: 100%; height: 220px; object-fit: contain; display: block; padding: .85rem; transition: transform .28s ease; }
.cap-card__img:hover { transform: scale(1.04); }

.cap-single--horizontal .cap-card { display: flex; align-items: stretch; }
.cap-single--horizontal .cap-card__img-wrap { flex: 0 0 230px; }
.cap-single--horizontal .cap-card__body { flex: 1; padding: 1.5rem; }

.cap-single--vertical .cap-card { max-width: 380px; }
.cap-single--vertical .cap-card__body { padding: 1.25rem; }

.cap-single--compact .cap-card { display: flex; align-items: center; }
.cap-single--compact .cap-card__img-wrap { flex: 0 0 120px; }
.cap-single--compact .cap-card__img { height: 100px; }
.cap-single--compact .cap-card__body { flex: 1; padding: .85rem 1rem; }
.cap-single--compact .cap-card__title { font-size: .95rem; }
.cap-single--compact .cap-card__desc, .cap-single--compact .cap-card__proscons { display: none; }

@media (max-width: 640px) {
    .cap-single--horizontal .cap-card, .cap-single--compact .cap-card { flex-direction: column; }
    .cap-single--horizontal .cap-card__img-wrap, .cap-single--compact .cap-card__img-wrap { flex: none; width: 100%; }
}

/* ── 2. COMPARISON TABLE ── */
.cap-comparison__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cap-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.cap-table th, .cap-table td { padding: .7rem 1rem; text-align: center; border-bottom: 1px solid var(--cap-border); vertical-align: middle; }
.cap-table th { background: var(--cap-bg); font-family: var(--cap-font-head); padding-top: 1.1rem; padding-bottom: 1.1rem; }
.cap-table__feature-col { width: 150px; min-width: 130px; text-align: left; }
.cap-table__label { text-align: left; font-weight: 700; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--cap-text-muted); }
.cap-table__head-title { font-size: .82rem; font-weight: 700; margin-top: .4em; }
.cap-table__head-title a:hover { text-decoration: underline; }
.cap-table__head-sub { display: block; font-size: .7rem; color: var(--cap-text-muted); margin-top: .15em; }
.cap-table__thumb { width: 78px; height: 78px; object-fit: contain; display: block; margin: 0 auto .35em; }
.cap-table tr:last-child td { border-bottom: none; }
.cap-table tr:nth-child(even) td { background: var(--cap-bg); }
.cap-table__btn-row td { background: var(--cap-bg); padding: 1rem; }

/* ── 3. LISTICLE ── */
.cap-toc { background: var(--cap-surface); border: 1px solid var(--cap-border); border-radius: var(--cap-radius); padding: .9rem 1.15rem; margin-bottom: 1.5rem; }
.cap-toc__label { font-weight: 700; margin: 0 0 .45em; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--cap-text-muted); }
.cap-toc__list { margin: 0; padding-left: 1.2em; }
.cap-toc__list li { margin: .3em 0; font-size: .875rem; }
.cap-toc__list a { color: var(--cap-accent); text-decoration: underline; }
.cap-toc__list a:hover { color: var(--cap-accent-hover); }
.cap-listicle__item { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 2rem; }
.cap-rank { flex-shrink: 0; width: 2.1rem; height: 2.1rem; background: var(--cap-rank-bg); color: var(--cap-rank-text); font-family: var(--cap-font-head); font-size: .95rem; font-weight: 700; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: .8rem; }
.cap-card--list { flex: 1; }
.cap-card__list-inner { display: flex; }
.cap-card--list .cap-card__img-wrap { flex: 0 0 190px; }
.cap-card--list .cap-card__body { flex: 1; padding: 1.2rem; }
@media (max-width: 560px) { .cap-card__list-inner { flex-direction: column; } .cap-card--list .cap-card__img-wrap { flex: none; width: 100%; } }

/* ── 4. VERSUS ── */
.cap-versus { background: var(--cap-surface); border: 1px solid var(--cap-border); border-radius: var(--cap-radius); box-shadow: var(--cap-shadow); overflow: hidden; }
.cap-versus__header { display: grid; grid-template-columns: 1fr 54px 1fr; align-items: center; background: var(--cap-bg); border-bottom: 1px solid var(--cap-border); padding: 1.5rem 1rem; }
.cap-versus__side { text-align: center; padding: 0 .5rem; }
.cap-versus__img { width: 105px; height: 105px; object-fit: contain; margin: 0 auto .5rem; display: block; }
.cap-versus__title { font-family: var(--cap-font-head); font-size: .95rem; margin: .35em 0 .3em; }
.cap-versus__sub { font-size: .72rem; color: var(--cap-text-muted); margin: 0 0 .4em; }
.cap-versus__price { margin: .4em 0 .7em; }
.cap-versus__badge { width: 54px; height: 54px; align-self: center; background: var(--cap-vs-bg); color: var(--cap-vs-text); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--cap-font-head); font-size: .85rem; font-weight: 700; }
.cap-versus__table { border-top: 1px solid var(--cap-border); }
.cap-versus__table td { padding: .55rem .75rem; font-size: .875rem; }
.cap-versus__cell { text-align: center; width: 38%; }
.cap-versus__key { text-align: center; width: 24%; }
.cap-verdict { background: var(--cap-bg); border-top: 1px solid var(--cap-border); padding: 1rem 1.5rem; }
.cap-verdict__label { font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--cap-accent); display: block; margin-bottom: .3em; }
.cap-verdict p { margin: 0; font-size: .9rem; line-height: 1.6; }
@media (max-width: 480px) { .cap-versus__header { grid-template-columns: 1fr 38px 1fr; padding: 1rem .5rem; } .cap-versus__img { width: 80px; height: 80px; } }

/* ── 5. GRID ── */
.cap-grid__inner { display: grid; grid-template-columns: repeat(var(--cap-cols, 3), 1fr); gap: 1.25rem; }
.cap-card--grid { transition: box-shadow .22s, transform .22s; }
.cap-card--grid:hover { box-shadow: var(--cap-shadow-hover); transform: translateY(-2px); }
.cap-card--grid .cap-card__img { height: 155px; }
.cap-card--grid .cap-card__body { padding: .9rem; }
.cap-card--grid .cap-card__title { font-size: .875rem; margin-bottom: .2em; }
.cap-card--grid .cap-card__footer { border-top: 1px solid var(--cap-border); padding-top: .55rem; margin-top: .55rem; }
@media (max-width: 700px) { .cap-grid__inner { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 420px) { .cap-grid__inner { grid-template-columns: 1fr; } }