/* HomeWisely Tools — TOC, product boxes, calculators. Uses theme palette vars with fallbacks. */
:root {
	--hwt-primary: var(--wp--preset--color--primary, #0E5E52);
	--hwt-primary-dark: var(--wp--preset--color--primary-dark, #093F37);
	--hwt-soft: var(--wp--preset--color--primary-soft, #E4F1EE);
	--hwt-accent: var(--wp--preset--color--accent, #AD4B1A);
	--hwt-border: var(--wp--preset--color--border, #E3E1DA);
	--hwt-surface: var(--wp--preset--color--surface, #fff);
	--hwt-muted: var(--wp--preset--color--muted, #56625C);
	--hwt-radius: 16px;
}

/* Table of contents */
.hw-toc { background: var(--hwt-surface); border: 1px solid var(--hwt-border); border-radius: var(--hwt-radius); margin: 1.5rem 0; }
.hw-toc summary { cursor: pointer; font-weight: 800; padding: .85rem 1.1rem; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--hwt-primary-dark); }
.hw-toc ol { margin: 0; padding: 0 1.1rem 1rem 2.4rem; columns: 2 260px; column-gap: 2rem; }
.hw-toc li { break-inside: avoid; margin: .3rem 0 !important; font-size: .95rem; }
.hw-toc a { text-decoration: none; }
.hw-toc a:hover { text-decoration: underline; }

/* Product box */
.hw-product { position: relative; background: var(--hwt-surface); border: 1px solid var(--hwt-border); border-radius: var(--hwt-radius); padding: 1.25rem; margin: 1.5rem 0; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 20px rgba(0,0,0,.05); }
.hw-product__badge { position: absolute; top: -.75rem; left: 1rem; background: var(--hwt-accent); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: .25rem .7rem; border-radius: 999px; }
.hw-product__body { display: flex; gap: 1.25rem; align-items: flex-start; }
.hw-product__img { width: 140px; height: 140px; object-fit: contain; flex: 0 0 auto; border-radius: 8px; background: #fff; }
.hw-product__main { flex: 1; min-width: 0; }
.hw-product__name { margin: .25rem 0 .4rem !important; font-size: 1.2rem !important; }
.hw-product__verdict { margin: 0 0 .75rem; }
.hw-product__pc { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem 1.25rem; font-size: .92rem; margin-bottom: .9rem; }
.hw-product__pc ul { list-style: none; padding: 0 !important; margin: 0; }
.hw-product__pc li { position: relative; padding-left: 1.4rem; margin: .25rem 0 !important; }
.hw-product__pros li::before { content: "✓"; position: absolute; left: 0; color: var(--hwt-primary); font-weight: 800; }
.hw-product__cons li::before { content: "✕"; position: absolute; left: 0; color: #A8251B; font-weight: 800; }
.hw-product__buy { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; }
.hw-product__price { font-weight: 800; font-size: 1.1rem; }
.hw-product__cta { display: inline-block; background: var(--hwt-accent); color: #fff !important; text-decoration: none !important; font-weight: 750; padding: .65rem 1.25rem; border-radius: 999px; }
.hw-product__cta:hover { background: #8F3D14; }
@media (max-width: 560px) {
	.hw-product__body { flex-direction: column; }
	.hw-product__img { width: 100%; height: 180px; }
	.hw-product__pc { grid-template-columns: 1fr; }
}

/* Calculators */
.hw-calc { background: var(--hwt-surface); border: 1px solid var(--hwt-border); border-top: 5px solid var(--hwt-primary); border-radius: var(--hwt-radius); padding: 1.25rem; margin: 1.5rem 0; }
.hw-calc__title { font-weight: 800; font-size: 1.15rem; margin: 0 0 1rem !important; }
.hw-calc__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .85rem 1rem; }
.hw-calc__grid label { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; font-weight: 650; color: var(--hwt-muted); }
.hw-calc__full { grid-column: 1 / -1; }
.hw-calc input, .hw-calc select { font: inherit; font-size: 1rem; color: inherit; padding: .55rem .7rem; border: 1px solid var(--hwt-border); border-radius: 8px; background: #fff; width: 100%; box-sizing: border-box; }
.hw-calc input:focus, .hw-calc select:focus { border-color: var(--hwt-primary); outline: 3px solid var(--hwt-accent); outline-offset: 2px; }
.hw-calc__out { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .6rem; margin-top: 1.1rem; }
.hw-calc__out > div { background: var(--hwt-soft); border-radius: 10px; padding: .8rem .9rem; display: flex; flex-direction: column; }
.hw-calc__out span { font-size: 1.45rem; font-weight: 800; color: var(--hwt-primary-dark); font-variant-numeric: tabular-nums; line-height: 1.2; }
.hw-calc__out small { color: var(--hwt-muted); font-size: .8rem; }
.hw-calc__note { font-size: .8rem; color: var(--hwt-muted); margin: .9rem 0 0 !important; }