/* ==========================================================================
   solewatch.eu, generated pages
   --------------------------------------------------------------------------
   The pages are a price board, not a shop. Readers arrive asking "is this
   discounted, and is it actually a good price" and then compare, so the
   layout is a dense ranked list with the discount as the dominant column,
   rather than a grid of product cards. Two consequences run through the whole
   sheet: surfaces are flat with hairline rules (no drop shadows), and every
   number is set in the mono face with tabular figures so columns of prices
   line up and can be read down.
   ========================================================================== */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --accent:#4B7B4B;--accent-light:#D7EBD7;--accent-dark:#2d5a2d;
  --bg:#F5F3EE;--card:#FFFFFF;--text:#1C1C1E;--text-2:#63615C;--text-3:#78756E;
  --sep:#E6E4DF;--rule:#DAD7D0;
  --radius:16px;--radius-pill:100px;
  --accent-ink:#3C6640;
  --shadow:0 1px 2px rgba(28,28,30,.05), 0 6px 18px rgba(28,28,30,.055);
  --shadow-lift:0 2px 4px rgba(28,28,30,.06), 0 14px 32px rgba(28,28,30,.10);
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --accent:#52A872;--accent-light:#1C3528;--accent-dark:#52A872;
  --bg:#141312;--card:#1E1D1B;--text:#EFEAE4;--text-2:#A5A19B;--text-3:#8A8782;
  --sep:#302F2C;--rule:#3A3936;--accent-ink:#8FD6A6;
  /* A drop shadow is invisible against a near-black page, so depth comes from a
     hairline and a lifted surface colour instead. */
  --shadow:0 0 0 1px #2C2B28;
  --shadow-lift:0 0 0 1px #3C3B37, 0 12px 28px rgba(0,0,0,.45);
}}

html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--text);
  line-height:1.55;-webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums}
.container{max-width:1000px;margin:0 auto;padding:0 24px}
a{color:inherit;text-decoration:none}
img{max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* Mono carries every number on the site: prices, percentages, dates, counts.
   It is the instrument face, it makes a column of prices readable downward
   and signals "measured" rather than "marketed". */
.mono{font-family:var(--mono);font-feature-settings:'tnum' 1}

/* --- nav ---------------------------------------------------------------- */
nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--sep)}
nav .container{display:flex;align-items:center;justify-content:space-between;height:58px}
.nav-brand{display:inline-flex;align-items:center;min-height:26px;font-weight:700;font-size:17px;letter-spacing:-.01em}
.nav-links{display:flex;align-items:center;gap:22px}
.nav-links a{font-size:14px;font-weight:500;color:var(--text-2);
  display:inline-block;padding:4px 0}
.nav-links a:hover{color:var(--text)}
.nav-cta{background:var(--accent);color:#fff!important;padding:7px 16px;
  border-radius:var(--radius-pill);font-weight:600;font-size:13px}
.nav-cta:hover{opacity:.88}

/* --- page head ---------------------------------------------------------- */
.crumbs{font-family:var(--mono);font-size:12px;color:var(--text-3);
  padding:18px 0 0;letter-spacing:.02em}
/* Inline links need padded hit areas to clear the 24px minimum target size. */
.crumbs a{display:inline-block;padding:5px 0}
.crumbs a:hover{color:var(--text-2)}

header.page{padding:26px 0 0}

/* Brand identity block. The logo tile is always white, never tinted: the
   fetched logos are inconsistent, some are white marks on a baked black
   square, others are dark ink on transparency, and white is the only
   backdrop on which every one of them stays legible. */
.brandhead{display:flex;align-items:center;gap:18px;margin-bottom:22px}
/* Landscape rather than square. The fetched logos split roughly evenly between
   square icons and wide wordmarks (Feelgrounds is 820x79); a square tile renders
   those wordmarks about five pixels tall. A 4:3 box lets an icon fill the height
   and a wordmark fill the width, so both stay legible at one consistent size. */
.logo-tile{flex:none;width:104px;height:78px;background:#fff;border:1px solid var(--sep);
  border-radius:var(--radius);padding:10px 12px;overflow:hidden}
/* The image box fills the padding box exactly and object-fit letterboxes the
   artwork inside it. max-width/max-height alone did not constrain the box, so
   square logos overflowed the tile and were clipped by overflow:hidden, which
   read as the logo being cropped. */
.logo-tile img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.logo-tile.empty{display:grid;place-items:center;font-family:var(--mono);font-size:24px;
  font-weight:600;color:#8E8A82}
.brandhead .meta{font-family:var(--mono);font-size:12px;color:var(--text-2);
  text-transform:uppercase;letter-spacing:.08em}
.brandhead h1{margin-top:2px}

h1{font-size:clamp(30px,4.4vw,42px);font-weight:700;letter-spacing:-.025em;line-height:1.1}

/* The answer is the page. It is set as display type rather than boxed in a
   tinted callout, a reader (or an answer engine) should meet the conclusion
   first, at the size of a headline. */
.answer{font-size:clamp(21px,2.7vw,29px);font-weight:500;line-height:1.32;
  letter-spacing:-.015em;max-width:24ch;margin:20px 0 0}
.answer.wide{max-width:30ch}
.answer em{font-style:normal;font-family:var(--mono);font-weight:600;
  font-size:.92em;letter-spacing:-.02em}
.answer-sub{font-family:var(--mono);font-size:12.5px;color:var(--text-2);margin-top:14px}

/* Metadata strip replaces the old row of four identical stat boxes. Same
   facts, a tenth of the visual weight, and it reads as one line of
   instrumentation instead of four competing headlines. */
.metastrip{display:flex;flex-wrap:wrap;gap:0 26px;margin:26px 0 0;padding:14px 0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  font-family:var(--mono);font-size:12.5px;color:var(--text-2)}
.metastrip b{color:var(--text);font-weight:600}

/* --- section headings --------------------------------------------------- */
.sechead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:4px 16px;margin:52px 0 0;padding-bottom:10px;border-bottom:1px solid var(--text)}
.sechead h2{font-size:19px;font-weight:700;letter-spacing:-.01em}
.sechead .count{font-family:var(--mono);font-size:12.5px;color:var(--text-2);
  text-transform:uppercase;letter-spacing:.08em}
.secnote{color:var(--text-2);font-size:14.5px;margin-top:12px;max-width:64ch}

/* --- product cards ------------------------------------------------------ */

/* A card grid, with the discount badged over the image and the price directly
   under the name. Everything a reader compares sits inside one small box, which
   is the property the full-width rows lacked: there the name was at the far left
   and its discount at the far right, so reading one item meant crossing the
   viewport. */
.board{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
  gap:20px;margin-top:18px}

.card{display:flex;flex-direction:column;background:var(--card);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  transition:transform .16s ease,box-shadow .16s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.card:hover .card-name{color:var(--accent)}

.card-media{position:relative;aspect-ratio:1;background:#fff}
.card-media img{width:100%;height:100%;object-fit:cover;display:block}
.card-media.ph{background:var(--bg)}

/* Badge over the image. Sized and coloured on the same 50/60 cut points the
   app's DiscountBadge uses, so a deal carries the same weight in both places. */
.badge{position:absolute;top:10px;left:10px;font-family:var(--mono);font-weight:600;
  letter-spacing:-.02em;padding:5px 9px;border-radius:9px;
  background:var(--accent-light);color:var(--accent-ink);font-size:14px}
.badge[data-tier="strong"]{font-size:15px}
.badge[data-tier="exceptional"]{font-size:16px;background:var(--accent);color:#fff}

.card-body{display:flex;flex-direction:column;gap:5px;padding:13px 14px 14px}
.card-brand{font-family:var(--mono);font-size:11.5px;color:var(--text-2);
  text-transform:uppercase;letter-spacing:.08em}
.card-name{font-size:14.5px;font-weight:600;line-height:1.32;overflow-wrap:anywhere}
.card-price{display:flex;align-items:baseline;gap:8px;font-family:var(--mono);
  margin-top:1px}
.card-price .now{font-size:14.5px;font-weight:600}
.card-price .was{font-size:11.5px;color:var(--text-3);text-decoration:line-through}
.card-note{font-family:var(--mono);font-size:11.5px;color:var(--accent);
  text-transform:uppercase;letter-spacing:.06em}

/* The depth rule. Its length maps a discount onto a fixed 0-70% axis, so a
   half-filled bar means -35% anywhere it appears. A fixed axis is the point:
   one that rescaled to the day's best deal would make a weak sale look strong
   whenever nothing better was running.
   
   Brand cards only. On product cards it was redundant, since that grid is
   already sorted by discount and the badge states the number outright, so an
   unlabelled bar at the bottom of every card read as a progress indicator for
   something rather than as data. Comparing 21 brands against each other is a
   real scanning task; comparing 36 already-ranked products is not. */
.depth{display:block;height:3px;margin-top:8px;background:var(--rule);
  border-radius:2px;position:relative;overflow:hidden}
.depth i{position:absolute;inset:0 auto 0 0;background:var(--text-2);border-radius:2px}
.bcard[data-tier="exceptional"] .depth i{background:var(--accent)}

/* --- brand cards -------------------------------------------------------- */
.blist{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
  gap:20px;margin-top:18px}

.bcard{display:flex;flex-direction:column;gap:4px;justify-content:flex-start;background:var(--card);
  border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);
  transition:transform .16s ease,box-shadow .16s ease}
.bcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.bcard:hover .bn{color:var(--accent)}
.bcard .logo-tile{flex:none;width:100%;height:66px;margin-bottom:10px;border-radius:10px;
  border:1px solid var(--sep);padding:9px 12px}
.bcard .bn{font-size:15.5px;font-weight:600}
.bcard .bs{font-family:var(--mono);font-size:11.5px;color:var(--text-2);
  text-transform:uppercase;letter-spacing:.06em}
.bcard .bfig{display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;margin-top:auto;padding-top:8px;font-family:var(--mono)}
.bcard .bfig .n{font-size:17px;font-weight:600;letter-spacing:-.03em}
.bcard[data-tier="exceptional"] .bfig .n{color:var(--accent)}
.bcard .bfig .c{font-size:11.5px;color:var(--text-2);text-transform:uppercase;
  letter-spacing:.06em}
.bcard.quiet{box-shadow:none;border:1px solid var(--sep)}
.bcard.quiet .logo-tile,.bcard.quiet .bn{opacity:.62}

@media (max-width:600px){
  .container{padding:0 16px}
  nav .container{height:54px}
  .nav-brand{font-size:15px}
  .nav-links{gap:14px}
  .nav-links a{font-size:13px}
  .nav-cta{padding:7px 13px;font-size:12.5px}
  h1{font-size:clamp(26px,7vw,34px)}
  .answer{font-size:clamp(19px,5.2vw,23px);max-width:none}
  .sechead{margin-top:40px}
}
/* Below this the wordmark and three nav items cannot share a line at a legible
   size. The two text links go rather than shrink: both destinations are in the
   footer and linked from the page body, and a nav that overlaps itself is
   worse than a nav with fewer items. */
@media (max-width:420px){
  .nav-links a:not(.nav-cta){display:none}
}
@media (max-width:560px){
  .board,.blist{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px}
  .card-body{padding:11px 12px 12px}
  .bcard{padding:13px}
}

/* --- sale history ------------------------------------------------------- */
.histwrap{overflow-x:auto;margin-top:14px}
table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:13px;
  white-space:nowrap}
th{text-align:left;padding:0 18px 9px 0;font-size:11px;color:var(--text-2);
  text-transform:uppercase;letter-spacing:.08em;font-weight:500;
  border-bottom:1px solid var(--text)}
td{padding:11px 18px 11px 0;border-bottom:1px solid var(--sep)}
td.num,th.num{text-align:right;padding-right:0}
tr:last-child td{border-bottom:0}
.live-tag{color:var(--accent);font-weight:600}

/* --- faq ---------------------------------------------------------------- */
.faq{border-bottom:1px solid var(--sep)}
.faq summary{padding:16px 0;font-weight:600;font-size:15.5px;cursor:pointer;
  list-style:none;display:flex;gap:14px;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:'+';font-family:var(--mono);color:var(--accent);
  font-weight:600;flex:none}
.faq[open] summary::before{content:'–'}
.faq p{padding:0 0 18px 28px;color:var(--text-2);font-size:15px;max-width:70ch}

/* --- related ------------------------------------------------------------ */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chip{border:1px solid var(--rule);border-radius:var(--radius-pill);padding:7px 15px;
  font-size:13.5px;font-weight:500}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip .c{font-family:var(--mono);font-size:12px;color:var(--text-2)}
.chip:hover .c{color:var(--accent)}

/* --- cta ---------------------------------------------------------------- */
.cta{margin:56px 0 0;padding:34px 0 0;border-top:1px solid var(--text)}
.cta h2{font-size:24px;font-weight:700;letter-spacing:-.02em;max-width:20ch}
.cta p{color:var(--text-2);max-width:56ch;margin:12px 0 22px;font-size:15.5px}
.btn{display:inline-block;background:var(--accent);color:#fff!important;font-weight:600;
  padding:13px 26px;border-radius:var(--radius-pill);font-size:15px}
.btn:hover{opacity:.9}

/* --- empty state -------------------------------------------------------- */
.empty{padding:28px 0;color:var(--text-2);font-size:15.5px;max-width:64ch}

/* --- footer ------------------------------------------------------------- */
footer{border-top:1px solid var(--sep);margin-top:64px;padding:28px 0 48px;
  color:var(--text-2);font-size:13.5px}
.footer-links{display:flex;gap:16px 20px;flex-wrap:wrap;margin-bottom:12px}
.footer-links a{display:inline-block;padding:4px 0}
.footer-links a:hover{color:var(--text)}
.updated{font-family:var(--mono);font-size:12px;color:var(--text-3);margin-top:8px}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}