/* ===========================================================
   Espressimo — Single Guide template (hero · content+TOC · CTA · recommended)
   =========================================================== */

.esp-gh, .esp-gc, .esp-gcta, .esp-grec { font-family: 'Dialect PM', sans-serif; }

/* ── Hero ── */
.esp-gh__crumbs { display:flex; align-items:center; gap:8px; padding:12px 48px; border-bottom:1px solid #e6dad4; font-size:18px; color:#522c25; }
.esp-gh__crumb { color:#75605a; text-decoration:none; opacity: 1; transition:opacity .2s; }
.esp-gh__crumb:hover { opacity: 1; color: #522c25; }
.esp-gh__crumb--current { opacity: 1; font-weight:700; color: #522c25; }
.esp-gh__crumb-sep { opacity:.3; }

.esp-gh__head { background:#f6ede3; border-bottom:1px solid #e6dad4; }
.esp-gh__head-inner { padding:56px 48px; max-width:1000px; }
.esp-gh__eyebrow { display:block; color:#c46500; font-size:18px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.esp-gh__title { color:#522c25; font-size:64px; line-height:1.06; font-weight:700; letter-spacing:.02em; margin:12px 0 0; }
.esp-gh__subtitle { color:#75605a; font-size:26px; opacity: 1; line-height:1.5; margin:16px 0 0; }
.esp-gh__meta { display:flex; flex-wrap:wrap; align-items:center; gap:12px 28px; margin-top:28px; color:#522c25; font-size:17px; opacity:.7; }
.esp-gh__meta-item { display:inline-flex; align-items:center; gap:8px; }
.esp-gh__meta-item svg, .esp-gh__share svg { color:#c46500; }
/* Plain text button — !important strips the theme's default button border + magenta hover bg. */
.esp-gh__share { background:none !important; border:0 !important; box-shadow:none !important; padding:0 !important; margin:0; border-radius:0 !important; cursor:pointer; color:#522c25 !important; font:inherit; display:inline-flex; align-items:center; gap:8px; transition:color .2s; }
.esp-gh__share:hover, .esp-gh__share:focus { background:none !important; color:#8B3A00 !important; }
.esp-gh__share svg { color:#c46500; }
.esp-gh__share:hover svg { color:#8B3A00; }
.esp-gh__img { aspect-ratio:21/8; overflow:hidden; border-top:1px solid #e6dad4; }
.esp-gh__img img { width:100% !important; height:100% !important; object-fit:cover !important; display:block; }

/* ── Content (TOC + article) ── */
.esp-gc { display:flex; gap:48px; align-items:flex-start; padding:56px 48px; }
.esp-gc__toc-wrap { width:260px; flex-shrink:0; position:sticky; top:92px; align-self:flex-start; }
.esp-gc__toc-label { color:#75605a; font-size:15px; letter-spacing:.14em; text-transform:uppercase; opacity: 1; margin:0 0 16px; }
.esp-gc__toc { display:flex; flex-direction:column; border-right:2px solid #e6dad4; }
.esp-gc__toc-link { margin-right:-2px; border-right:2px solid transparent; padding:8px 16px 8px 0; font-size:19px; color:#75605a; opacity: 1; text-decoration:none; transition:all .2s; }
.esp-gc__toc-link:hover { opacity: 1; color:#8B3A00; }
.esp-gc__toc-link.is-active { border-right-color:#c46500; color:#8B3A00; opacity: 1; font-weight:700; }
.esp-gc__shop { margin-top:32px; display:flex; align-items:center; justify-content:center; gap:4px; background:#8B3A00; color:#fff; font-size:18px; letter-spacing:.04em; text-decoration:none; padding:12px; border-radius:8px; transition:background-color .2s; }
.esp-gc__shop:hover { background:#a34500; }

.esp-gc__article { flex:1; min-width:0; max-width:760px; }
.esp-gc__section { scroll-margin-top:100px; margin-bottom:8px; }
.esp-gc__h2, .esp-gc__from-content h2 { color:#522c25; font-size:34px; font-weight:700; letter-spacing:.02em; margin:28px 0 14px; scroll-margin-top:100px; }
.esp-gc__text p, .esp-gc__from-content p { color:#522c25; font-size:19px; line-height:1.75; margin:0 0 16px; }
.esp-gc__from-content { color:#522c25; }
.esp-gc__from-content h3 { color:#522c25; font-size:24px; font-weight:700; margin:20px 0 10px; }
.esp-gc__from-content img { max-width:100%; height:auto; border-radius:12px; }

/* pros / cons */
.esp-gc__pc { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:28px 0; }
.esp-gc__pc-box { border-radius:12px; padding:20px; }
.esp-gc__pc-box--pros { background:#f1f7f1; border:1px solid #cfe3cf; }
.esp-gc__pc-box--cons { background:#f6ede3; border:1px solid #e6dad4; }
.esp-gc__pc-title { font-size:20px; font-weight:700; margin:0 0 12px; }
.esp-gc__pc-box--pros .esp-gc__pc-title { color:#2e7d32; }
.esp-gc__pc-box--cons .esp-gc__pc-title { color:#8B3A00; }
.esp-gc__pc-box ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.esp-gc__pc-box li { display:flex; align-items:flex-start; gap:8px; font-size:18px; line-height:1.5; }
.esp-gc__pc-box li svg { flex-shrink:0; margin-top:3px; }
.esp-gc__pc-box--pros li { color:#3a4a3a; } .esp-gc__pc-box--pros li svg { color:#2e7d32; }
.esp-gc__pc-box--cons li { color:#522c25; opacity:.8; } .esp-gc__pc-box--cons li svg { color:#8B3A00; }

/* tip callout */
.esp-gc__tip { display:flex; gap:12px; background:#fff; border:1px solid #e6dad4; border-radius:12px; padding:20px; margin:24px 0; }
.esp-gc__tip svg { color:#c46500; flex-shrink:0; margin-top:4px; }
.esp-gc__tip > div { color:#522c25; font-size:19px; line-height:1.6; }
.esp-gc__tip strong { font-weight:700; }

/* card grid */
.esp-gc__cards { display:grid; grid-template-columns:repeat(var(--esp-gc-cols,2),1fr); gap:20px; margin:32px 0; }
.esp-gc__card { background:#f6ede3; border:1px solid #e6dad4; border-radius:16px; padding:24px; display:flex; flex-direction:column; gap:12px; }
.esp-gc__card-title { color:#8B3A00; font-size:28px; font-weight:700; line-height:1; }
.esp-gc__card-text { color:#522c25; font-size:18px; opacity:.75; line-height:1.7; }

/* inline button */
.esp-gc__btn { display:inline-flex; align-items:center; gap:4px; background:#8B3A00; color:#fff; font-size:19px; letter-spacing:.04em; text-decoration:none; padding:12px 24px; border-radius:8px; margin:16px 0; transition:background-color .2s; }
.esp-gc__btn:hover { background:#a34500; }

/* author box */
.esp-gc__author { display:flex; align-items:center; gap:16px; background:#f6ede3; border:1px solid #e6dad4; border-radius:16px; padding:24px; margin-top:48px; }
.esp-gc__author-avatar { width:64px; height:64px; border-radius:999px; background:#8B3A00; color:#fff; display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:700; flex-shrink:0; }
.esp-gc__author-name { color:#522c25; font-size:22px; font-weight:700; margin:0; }
.esp-gc__author-bio { color:#75605a; font-size:18px; opacity: 1; line-height:1.4; margin:2px 0 0; }

/* ── CTA band ── */
.esp-gcta { background:#522c25; text-align:center; padding:64px 48px; }
.esp-gcta__title { color:#fff9f2; font-size:44px; line-height:1.1; font-weight:700; letter-spacing:.03em; max-width:820px; margin:0 auto; }
.esp-gcta__subtitle { color:#fff9f2; font-size:22px; opacity:.7; margin:16px auto 0; max-width:780px; line-height:1.5; }
.esp-gcta__buttons { display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; margin-top:32px; }
.esp-gcta__btn { display:inline-flex; align-items:center; gap:8px; font-size:22px; letter-spacing:.04em; text-decoration:none; padding:14px 32px; border-radius:8px; transition:background-color .2s,border-color .2s; }
.esp-gcta__btn--primary { background:#c46500; color:#fff; }
.esp-gcta__btn--primary:hover { background:#a34500; }
.esp-gcta__btn--ghost { border:2px solid rgba(255,249,242,.4); color:#fff9f2; }
.esp-gcta__btn--ghost:hover { background:rgba(255,249,242,.1); }
.esp-gcta__footnote { color:#c46500; font-size:22px; font-weight:700; margin-top:28px; }
/* Pin the ☕ emoji inline — beats the theme's global `img { height:auto !important }`. */
.esp-gcta__footnote img.emoji { height:1em !important; width:1em !important; vertical-align:-0.1em; margin:0 .15em; display:inline; }

/* ── Recommended grid ── */
.esp-grec { border-top:1px solid #e6dad4; background:#f6ede3; padding:56px 48px; }
.esp-grec__title { color:#522c25; font-size:44px; font-weight:700; letter-spacing:.03em; margin:0 0 8px; }
.esp-grec__subtitle { color:#75605a; font-size:20px; opacity: 1; margin:0 0 36px; }
.esp-grec__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.esp-grec__card { display:flex; flex-direction:column; background:#fff9f2; border:1px solid #e6dad4; border-radius:12px; overflow:hidden; text-decoration:none; position:relative; transition:border-color .2s, box-shadow .3s; }
.esp-grec__card:hover { border-color:#c46500; box-shadow:0 8px 30px rgba(82,44,37,.08); }
/* Logical inset-inline-start keeps the badge on the correct visual side in RTL
   (= the right) and immune to physical right→left flip stylesheets that would
   otherwise push it onto the rounded corner and get it clipped by overflow:hidden. */
.esp-grec__badge { position:absolute; top:16px; inset-inline-start:16px; right:auto; left:auto; z-index:3; color:#fff !important; font-size:13px; line-height:1.4; padding:4px 12px; border-radius:999px; }
/* Theme bleeds its link/hover color onto text inside the card <a> — keep the badge white. */
.esp-grec__card:hover .esp-grec__badge { color:#fff !important; }
.esp-grec__img { aspect-ratio:1/1; background:#f6ede3; overflow:hidden; }
.esp-grec__img img { width:100% !important; height:100% !important; object-fit:contain !important; mix-blend-mode:multiply; padding:32px; box-sizing:border-box; }
.esp-grec__body { padding:24px; display:flex; flex-direction:column; gap:8px; border-top:1px solid #e6dad4; flex:1; }
.esp-grec__brand { color:#c46500; font-size:15px; font-weight:700; letter-spacing:.08em; }
.esp-grec__name { color:#522c25; font-size:24px; font-weight:700; line-height:1.15; margin:0; }
.esp-grec__desc { color:#75605a; font-size:16px; opacity: 1; line-height:1.35; margin:0; }
.esp-grec__tags { display:flex; flex-wrap:wrap; gap:6px; }
.esp-grec__tag { font-size:13px; color:#522c25; background:#f6ede3; border:1px solid #e6dad4; border-radius:999px; padding:2px 10px; }
.esp-grec__rating { display:flex; align-items:center; gap:6px; }
.esp-grec__stars { display:inline-flex; gap:2px; color:#c46500; }
.esp-grec__rtext { color:#75605a; font-size:14px; opacity: 1; }
.esp-grec__footer { display:flex; align-items:flex-end; justify-content:space-between; gap:8px; margin-top:auto; padding-top:12px; border-top:1px solid #e6dad4; }
.esp-grec__prices { display:flex; align-items:baseline; gap:8px; }
.esp-grec__price { color:#522c25; font-size:26px; font-weight:700; display:inline-flex; align-items:baseline; gap:.2em; }
.esp-grec__old { color:#522c25; font-size:17px; opacity:.3; text-decoration:line-through; display:inline-flex; align-items:baseline; gap:.2em; }
.esp-grec__cart { flex-shrink:0; width:40px; height:40px; border-radius:8px; background:#8B3A00; color:#fff; display:flex; align-items:center; justify-content:center; transition:background-color .2s; }
.esp-grec__cart:hover { background:#a34500; }

/* ── Guides Archive (magazine listing) ── */
.esp-garch { background:#fff9f2; padding:56px 48px; }
.esp-garch__head { max-width:760px; margin:0 0 36px; }
.esp-garch__eyebrow { display:block; color:#c46500; font-size:18px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.esp-garch__title { color:#522c25; font-size:48px; line-height:1.1; font-weight:700; letter-spacing:.02em; margin:10px 0 0; }
.esp-garch__subtitle { color:#75605a; font-size:21px; opacity: 1; line-height:1.5; margin:14px 0 0; }
.esp-garch__grid { display:grid; grid-template-columns:repeat(var(--esp-garch-cols,3),1fr); gap:28px; }
.esp-garch__card { display:flex; flex-direction:column; background:#fff; border:1px solid #e6dad4; border-radius:16px; overflow:hidden; text-decoration:none; transition:border-color .2s, box-shadow .3s, transform .2s; }
.esp-garch__card:hover { border-color:#c46500; box-shadow:0 8px 30px rgba(82,44,37,.08); transform:translateY(-2px); }
.esp-garch__img { aspect-ratio:16/10; background:#f6ede3; overflow:hidden; }
.esp-garch__img img { width:100% !important; height:100% !important; object-fit:cover !important; display:block; transition:transform .4s; }
.esp-garch__card:hover .esp-garch__img img { transform:scale(1.04); }
.esp-garch__body { padding:24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.esp-garch__meta { display:flex; align-items:center; gap:10px; font-size:14px; color:#522c25; }
.esp-garch__cat { color:#c46500; font-weight:700; letter-spacing:.06em; }
.esp-garch__date { opacity: 1; color: #75605a; }
.esp-garch__date::before { content:"·"; margin-inline-end:10px; opacity:.6; }
.esp-garch__name { color:#522c25; font-size:24px; font-weight:700; line-height:1.25; margin:0; transition:color .2s; }
.esp-garch__card:hover .esp-garch__name { color:#8B3A00; }
.esp-garch__excerpt { color:#75605a; font-size:16px; opacity: 1; line-height:1.55; margin:0; }
.esp-garch__footer { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; padding-top:14px; }
.esp-garch__more { display:inline-flex; align-items:center; gap:4px; color:#8B3A00; font-size:17px; font-weight:700; }
.esp-garch__read { display:inline-flex; align-items:center; gap:6px; color:#75605a; opacity: 1; font-size:14px; }
.esp-garch__read svg { color:#c46500; }
.esp-garch__pager { display:flex; justify-content:center; gap:8px; margin-top:44px; }
.esp-garch__page { display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:42px; padding:0 12px; border:1px solid #e6dad4; border-radius:10px; background:#fff; color:#522c25; text-decoration:none; font-size:18px; transition:all .2s; }
a.esp-garch__page:hover { border-color:#c46500; color:#8B3A00; }
.esp-garch__page.current { background:#8B3A00; border-color:#8B3A00; color:#fff; }

/* ── Responsive ── */
@media (max-width:1024px) {
    .esp-gh__crumbs, .esp-gh__head-inner { padding-left:24px; padding-right:24px; }
    .esp-gh__title { font-size:40px; }
    .esp-gh__subtitle { font-size:21px; }
    .esp-gc { flex-direction:column; padding:40px 24px; gap:32px; }
    .esp-gc__toc-wrap { display:none; }
    .esp-gcta { padding:48px 24px; } .esp-gcta__title { font-size:34px; }
    .esp-grec { padding:48px 24px; } .esp-grec__title { font-size:34px; }
    .esp-grec__grid { grid-template-columns:repeat(2,1fr); }
    .esp-gc__cards { grid-template-columns:1fr; }
    .esp-gc__pc { grid-template-columns:1fr; }
    .esp-garch { padding:40px 24px; } .esp-garch__title { font-size:36px; }
    .esp-garch__grid { grid-template-columns:repeat(2,1fr) !important; }
}
@media (max-width:560px) {
    .esp-gh__title { font-size:32px; }
    .esp-garch__grid { grid-template-columns:1fr !important; }
    .esp-grec__grid { grid-template-columns:1fr; }
}