/* Solris Editorial — article furniture and in-article commerce.
 *
 * Every custom property has a literal fallback: this file has to survive on
 * its own if the theme is ever swapped, which is the whole reason the logic
 * lives in a plugin.
 */

/* ---------- table of contents ---------- */
/* A <details> rather than a permanently-open list. On a phone a fourteen-item
   contents list is a screen of links between the reader and the first
   sentence, so it opens on wide screens and starts closed on narrow ones. */
.ed-toc{margin-block:var(--sp-6,1.5rem)}
.ed-toc__box{border:1px solid var(--border,#E3E8F0);border-radius:var(--r-lg,14px);
  background:var(--surface-2,#F6F8FB);padding:var(--sp-4,1rem) var(--sp-5,1.25rem)}
.ed-toc__box summary{cursor:pointer;font-weight:var(--fw-semibold,600);
  font-size:var(--fs--1,.9375rem);text-transform:uppercase;
  letter-spacing:var(--ls-caps,.06em);color:var(--ink-2,#42506A);
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3,.75rem)}
.ed-toc__box summary::-webkit-details-marker{display:none}
.ed-toc__box summary::after{content:"";width:16px;height:16px;flex:0 0 auto;
  background:no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2342506A' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  transition:transform .2s ease}
.ed-toc__box[open] summary::after{transform:rotate(180deg)}
.ed-toc__list{margin:var(--sp-4,1rem) 0 0;padding:0 0 0 var(--sp-5,1.25rem);
  display:grid;gap:var(--sp-2,.5rem)}
.ed-toc__item{font-size:var(--fs--1,.9375rem);line-height:1.5}
.ed-toc__item--h3{margin-inline-start:var(--sp-4,1rem);list-style-type:lower-alpha;
  color:var(--ink-2,#42506A)}
.ed-toc__list a{color:inherit;text-decoration:none;border-block-end:1px solid transparent}
.ed-toc__list a:hover{border-block-end-color:currentColor}

@media (max-width:767px){
  /* Closed by default on a phone — see the note above. */
  .ed-toc__box:not([data-keep-open]){}
}

/* ---------- a single product inside the prose ---------- */
/* Not the shop's product card. Inside an article the reader is mid-argument,
   so the block has to say why it is interrupting: a label, a name, a price,
   one action. */
.ed-product{margin-block:var(--sp-8,2rem);padding:var(--sp-5,1.25rem);
  border:1px solid var(--border,#E3E8F0);border-inline-start:3px solid var(--amber-400,#F6A821);
  border-radius:var(--r-lg,14px);background:var(--surface,#fff)}
.ed-product__eyebrow{margin:0 0 var(--sp-3,.75rem);font-size:var(--fs--2,.8125rem);
  text-transform:uppercase;letter-spacing:var(--ls-caps,.06em);
  font-weight:var(--fw-semibold,600);color:var(--ink-3,#6B7A94)}
.ed-product__body{display:grid;grid-template-columns:96px minmax(0,1fr);
  gap:var(--sp-4,1rem);align-items:center}
@media (min-width:600px){ .ed-product__body{grid-template-columns:132px minmax(0,1fr)} }
.ed-product__media{display:block;border-radius:var(--r-md,10px);overflow:hidden;
  background:var(--surface-2,#F6F8FB)}
.ed-product__media img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.ed-product__title{margin:0 0 var(--sp-1,.25rem);font-size:var(--fs-0,1rem);line-height:1.35}
.ed-product__title a{color:inherit;text-decoration:none}
.ed-product__title a:hover{text-decoration:underline}
.ed-product__reason{margin:0 0 var(--sp-2,.5rem);font-size:var(--fs--1,.9375rem);
  color:var(--ink-2,#42506A)}
.ed-product__price{margin:0 0 var(--sp-3,.75rem);font-weight:var(--fw-bold,700)}
.ed-product__price del{opacity:.6;font-weight:var(--fw-regular,400);margin-inline-end:6px}

/* ---------- product rail ---------- */
.ed-rail{margin-block:var(--sp-10,2.5rem)}
.ed-rail__head{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--sp-4,1rem);margin-block-end:var(--sp-4,1rem)}
.ed-rail__title{margin:0;font-size:var(--fs-2,1.375rem)}
.ed-rail__more{font-size:var(--fs--1,.9375rem);white-space:nowrap;text-decoration:none;
  color:var(--ink-2,#42506A)}
.ed-rail__more:hover{text-decoration:underline}
/* A rail, not a grid: a six-up grid mid-article is a page break, and the
   reader loses their place in the argument. */
.ed-rail__track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);
  gap:var(--sp-3,.75rem);list-style:none;margin:0;padding:0 0 var(--sp-2,.5rem);
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
  scrollbar-width:none}
.ed-rail__track::-webkit-scrollbar{display:none}
.ed-rail__item{scroll-snap-align:start;min-width:0}
.ed-rail__link{display:grid;gap:var(--sp-2,.5rem);text-decoration:none;color:inherit;
  padding:var(--sp-2,.5rem);border:1px solid var(--border,#E3E8F0);
  border-radius:var(--r-lg,14px);background:var(--surface,#fff);height:100%;
  transition:border-color .15s ease,box-shadow .15s ease}
.ed-rail__link:hover{border-color:var(--border-strong,#C5CFDD);
  box-shadow:0 2px 10px rgb(14 35 64/.07)}
.ed-rail__media{display:block;border-radius:var(--r-md,10px);overflow:hidden;
  background:var(--surface-2,#F6F8FB)}
.ed-rail__media img{width:100%;height:100%;object-fit:cover}
.ed-rail__name{font-size:var(--fs--1,.9375rem);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ed-rail__price{font-size:var(--fs--1,.9375rem);font-weight:var(--fw-bold,700)}
.ed-rail__price del{display:none}

/* ---------- references ---------- */
.ed-refs{margin-block-start:var(--sp-10,2.5rem);padding-block-start:var(--sp-6,1.5rem);
  border-block-start:1px solid var(--border,#E3E8F0)}
.ed-refs__title{font-size:var(--fs-1,1.125rem);margin:0 0 var(--sp-3,.75rem)}
.ed-refs__list{margin:0;padding-inline-start:var(--sp-5,1.25rem);
  display:grid;gap:var(--sp-2,.5rem);font-size:var(--fs--1,.9375rem)}
.ed-refs__list li{line-height:1.5}
.ed-refs__list a{color:inherit}
.ed-refs__host{display:inline-block;margin-inline-start:6px;font-size:var(--fs--2,.8125rem);
  color:var(--ink-3,#6B7A94)}
.ed-refs__host::before{content:"— "}

/* ---------- reading list (on shop pages) ---------- */
.ed-reading{margin-block:var(--sp-10,2.5rem)}
.ed-reading__title{font-size:var(--fs-2,1.375rem);margin:0 0 var(--sp-5,1.25rem)}
.ed-reading__list{display:grid;gap:var(--sp-4,1rem);list-style:none;margin:0;padding:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.ed-reading__link{display:grid;gap:var(--sp-3,.75rem);text-decoration:none;color:inherit}
.ed-reading__media{display:block;border-radius:var(--r-lg,14px);overflow:hidden;
  background:var(--surface-2,#F6F8FB)}
.ed-reading__media img{width:100%;height:100%;object-fit:cover}
.ed-reading__name{display:block;font-weight:var(--fw-semibold,600);line-height:1.4}
.ed-reading__link:hover .ed-reading__name{text-decoration:underline}
.ed-reading__meta{display:block;margin-block-start:4px;font-size:var(--fs--2,.8125rem);
  color:var(--ink-3,#6B7A94)}

/* ---------- roundup product cards ---------- */
/* These replace a review-box plugin that is not installed, so nothing here can
   inherit from it: every value is stated, with a literal fallback. */
.rbox{position:relative;display:grid;gap:var(--sp-4,1rem);
  grid-template-columns:minmax(0,1fr);
  margin-block:var(--sp-6,1.5rem);padding:var(--sp-5,1.25rem);
  border:1px solid var(--border,#E3E8F0);border-radius:var(--r-lg,14px);
  background:var(--surface,#fff)}
@media (min-width:640px){
  .rbox{grid-template-columns:200px minmax(0,1fr);gap:var(--sp-6,1.5rem);align-items:start}
}
/* Our own product is the one thing on the page we are responsible for, so it
   is marked rather than blended in. */
.rbox--ours{border-color:var(--amber-400,#F6A821);border-width:2px;
  background:var(--amber-50,#FFF8EC)}

.rbox__rank{position:absolute;inset-block-start:-12px;inset-inline-start:var(--sp-5,1.25rem);
  display:grid;place-items:center;min-width:30px;height:30px;padding:0 8px;
  border-radius:999px;background:var(--navy-800,#0E2340);color:#fff;
  font-weight:var(--fw-bold,700);font-size:var(--fs--1,.9375rem);
  font-variant-numeric:tabular-nums}
.rbox--ours .rbox__rank{background:var(--amber-400,#F6A821);color:var(--navy-800,#0E2340)}

.rbox__media{border-radius:var(--r-md,10px);overflow:hidden;background:var(--surface-2,#F6F8FB)}
.rbox__media img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.rbox__label{margin:0 0 var(--sp-1,.25rem);font-size:var(--fs--2,.8125rem);
  text-transform:uppercase;letter-spacing:var(--ls-caps,.06em);
  font-weight:var(--fw-semibold,600);color:var(--ink-3,#6B7A94)}
.rbox__label--ours{color:var(--accent-text,#8A5A00)}
.rbox__title{margin:0 0 var(--sp-2,.5rem);font-size:var(--fs-1,1.125rem);line-height:1.35}
.rbox__title a{color:inherit;text-decoration:none}
.rbox__title a:hover{text-decoration:underline}
.rbox__price{margin:0 0 var(--sp-3,.75rem);font-weight:var(--fw-bold,700)}
.rbox__price del{opacity:.6;font-weight:400;margin-inline-end:6px}

.rbox__score{display:inline-flex;align-items:baseline;gap:3px;margin:0 0 var(--sp-3,.75rem);
  padding:4px 10px;border-radius:999px;background:var(--navy-800,#0E2340);color:#fff}
.rbox__score-num{font-weight:var(--fw-bold,700);font-variant-numeric:tabular-nums}
.rbox__score-of{font-size:var(--fs--2,.8125rem);opacity:.7}

.rbox__pc{display:grid;gap:var(--sp-4,1rem);margin-block-end:var(--sp-4,1rem)}
@media (min-width:520px){ .rbox__pc{grid-template-columns:1fr 1fr} }
.rbox__pc-title{margin:0 0 var(--sp-1,.25rem);font-size:var(--fs--1,.9375rem)}
.rbox__pc-title--pro{color:var(--success,#1E7F4F)}
.rbox__pc-title--con{color:var(--danger,#B3261E)}
.rbox__points{margin:0;padding:0;list-style:none;display:grid;gap:4px;
  font-size:var(--fs--1,.9375rem);line-height:1.45}
.rbox__points li{padding-inline-start:1.25em;position:relative}
.rbox__points--pro li::before{content:"+";position:absolute;inset-inline-start:0;
  color:var(--success,#1E7F4F);font-weight:700}
.rbox__points--con li::before{content:"−";position:absolute;inset-inline-start:0;
  color:var(--danger,#B3261E);font-weight:700}

.rbox__cta{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 var(--sp-5,1.25rem);border-radius:var(--r-md,10px);
  font-weight:var(--fw-semibold,600);text-decoration:none;
  font-size:var(--fs--1,.9375rem)}
.rbox__cta--ours{background:var(--amber-400,#F6A821);color:var(--navy-800,#0E2340)}
.rbox__cta--ours:hover{background:var(--amber-300,#FFC24D)}
.rbox__cta--out{background:var(--navy-800,#0E2340);color:#fff}
.rbox__cta--out:hover{background:var(--navy-700,#1B3A63)}

/* ---------- comparison strip ---------- */
.rcompare{display:grid;gap:var(--sp-3,.75rem);margin-block:var(--sp-6,1.5rem);
  grid-auto-flow:column;grid-auto-columns:minmax(200px,1fr);
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
  scrollbar-width:none;padding-block-end:4px}
.rcompare::-webkit-scrollbar{display:none}
.rcompare__item{scroll-snap-align:start;display:grid;gap:var(--sp-2,.5rem);
  padding:var(--sp-4,1rem);border:1px solid var(--border,#E3E8F0);
  border-radius:var(--r-lg,14px);background:var(--surface,#fff);text-align:center;
  align-content:start}
.rcompare__badge{margin:0;font-size:var(--fs--2,.8125rem);font-weight:var(--fw-semibold,600);
  color:var(--accent-text,#8A5A00);text-transform:uppercase;letter-spacing:var(--ls-caps,.06em)}
.rcompare__media img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain}
.rcompare__title{margin:0;font-size:var(--fs--1,.9375rem);line-height:1.35}
.rcompare__spec{margin:0;font-size:var(--fs--2,.8125rem);color:var(--ink-2,#42506A)}
.rcompare .rbox__cta{min-height:38px;padding:0 var(--sp-4,1rem)}

/* ---------- affiliate disclosure ---------- */
.ed-disclosure{margin-block:0 var(--sp-6,1.5rem);padding:var(--sp-3,.75rem) var(--sp-4,1rem);
  border-inline-start:3px solid var(--border-strong,#C5CFDD);
  background:var(--surface-2,#F6F8FB);border-radius:0 var(--r-md,10px) var(--r-md,10px) 0;
  font-size:var(--fs--2,.8125rem);color:var(--ink-2,#42506A);line-height:1.5}

/* ---------- article FAQ ---------- */
/* <details> so a ten-question FAQ does not add three screens to the end of
   every article. The answer stays in the DOM whether open or closed, which is
   what matters for both crawling and Ctrl-F. */
.ed-faq{margin-block-start:var(--sp-10,2.5rem);padding-block-start:var(--sp-6,1.5rem);
  border-block-start:1px solid var(--border,#E3E8F0)}
.ed-faq__title{font-size:var(--fs-2,1.375rem);margin:0 0 var(--sp-4,1rem)}
.ed-faq__list{display:grid;gap:var(--sp-2,.5rem)}
.ed-faq__item{border:1px solid var(--border,#E3E8F0);border-radius:var(--r-lg,14px);
  background:var(--surface,#fff);overflow:hidden}
.ed-faq__item summary{cursor:pointer;list-style:none;
  padding:var(--sp-4,1rem) var(--sp-5,1.25rem);
  font-weight:var(--fw-semibold,600);line-height:1.4;
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3,.75rem)}
.ed-faq__item summary::-webkit-details-marker{display:none}
.ed-faq__item summary::after{content:"";flex:0 0 auto;width:18px;height:18px;margin-block-start:3px;
  background:no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2342506A' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  transition:transform .2s ease}
.ed-faq__item[open] summary::after{transform:rotate(180deg)}
.ed-faq__item summary:hover{background:var(--surface-2,#F6F8FB)}
.ed-faq__answer{padding:0 var(--sp-5,1.25rem) var(--sp-4,1rem)}
.ed-faq__answer p{margin:0 0 var(--sp-3,.75rem);color:var(--ink-2,#42506A);line-height:1.65}
.ed-faq__answer p:last-child{margin-block-end:0}