/*
 * /shop/ (yooperhub-shop-v020).
 *
 * The shop page's own stylesheet, which that plugin printed inline
 * (<style id="yh-shop20-css">, 9 KB, live-only: its source is not in this repo).
 * Site SEO swaps that block, in place, for a link to this file, so the page follows
 * the same six colors and three font pairs. Rules are the plugin's, restated on the
 * tokens, class names unchanged. The three mug swatches keep their product colors
 * (they arrive as --sw in inline style attributes, which are data, not brand).
 * Every selector carries an `html` prefix: the plugin's inline block still prints after this
 * link (it is emitted outside the buffers Site SEO can rewrite), so specificity, not order,
 * settles the cascade. If the shop plugin's CSS changes, change it here.
 */
html body.yh-shop20-page{background:var(--yht-newsprint)!important;color:var(--yht-ink);padding-top:0!important}
html body.yh-shop20-page.yh-shop20-has-sticky{padding-bottom:84px}
html .yh-shop20-main{max-width:1120px;margin:0 auto;padding:clamp(16px,3vw,32px) 16px clamp(56px,7vw,96px);font-family:var(--yht-font-text,Newsreader,"Times New Roman",serif);line-height:1.55;-webkit-font-smoothing:antialiased}
html .yh-shop20-main *, html .yh-shop20-main *::before, html .yh-shop20-main *::after{box-sizing:border-box}
html .yh-shop20-main img{max-width:100%;height:auto;display:block}
html .yh-shop20-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html .yh-shop20-kicker{margin:0 0 14px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--yht-newsprint);font-family:var(--yht-font-mono,"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace)}
html .yh-shop20-kicker--ink{color:var(--yht-oxide)}
html .yh-shop20-h1{margin:0 0 16px;font-family:var(--yht-font-text,Newsreader,"Times New Roman",serif);font-weight:700;font-size:clamp(40px,5.4vw,66px);line-height:1.02;letter-spacing:-.01em;color:var(--yht-newsprint)}
html .yh-shop20-h2{margin:0 0 12px;font-family:var(--yht-font-text,Newsreader,"Times New Roman",serif);font-weight:700;font-size:clamp(26px,3.2vw,36px);line-height:1.12;letter-spacing:-.01em;color:var(--yht-ink)}
html .yh-shop20-lede{margin:0 0 10px;font-size:clamp(18px,2vw,21px);font-weight:700;line-height:1.35;color:var(--yht-newsprint)}
html .yh-shop20-body{margin:0 0 18px;font-size:16px;color:var(--yht-muted);max-width:56ch}
html .yh-shop20-hero .yh-shop20-body{color:var(--yht-newsprint-80)}
html .yh-shop20-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);align-items:center;background:var(--yht-ink);background-image:radial-gradient(1100px 540px at 8% -10%,var(--yht-newsprint-24),transparent 60%),radial-gradient(700px 420px at 100% 110%,var(--yht-ink-48),transparent 65%);color:var(--yht-newsprint);border-radius:0;padding:clamp(28px,4.6vw,60px);box-shadow:none}
html .yh-shop20-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:6px 0 18px}
html .yh-shop20-price__num{font-size:clamp(28px,3.2vw,36px);font-weight:700;letter-spacing:-.01em;color:var(--yht-newsprint);font-variant-numeric:tabular-nums}
html .yh-shop20-price__meta{font-size:14px;font-weight:700;color:var(--yht-newsprint-72)}
html .yh-shop20-price--ink .yh-shop20-price__num{color:var(--yht-ink)}
html .yh-shop20-price--ink .yh-shop20-price__meta{color:var(--yht-muted)}
html .yh-shop20-swatches{margin:0 0 22px}
html .yh-shop20-swatches__label{display:block;font-size:13px;font-weight:700;color:var(--yht-newsprint-80);margin-bottom:8px}
html .yh-shop20-swatches__label strong{color:var(--yht-newsprint);font-weight:700}
html .yh-shop20-swatches__row{display:flex;gap:10px}
html .yh-shop20-swatch{border-color:var(--yht-newsprint-72)!important;position:relative;width:34px;height:34px;border-radius:0;border:2px solid var(--yht-newsprint-48);background:var(--sw);cursor:pointer;padding:0;transition:transform .15s ease,box-shadow .15s ease}
html .yh-shop20-swatch:hover{transform:scale(1.06)}
html .yh-shop20-swatch.is-active{border-color:var(--yht-newsprint);outline:3px solid var(--yht-newsprint);outline-offset:3px}
html .yh-shop20-swatch:focus-visible{outline:3px solid var(--yht-newsprint);outline-offset:3px}
html .yh-shop20-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin:0 0 14px}
html .yh-shop20-btn{display:inline-flex;align-items:center;gap:6px;padding:15px 24px;border-radius:0;background:var(--yht-oxide);color:var(--yht-newsprint)!important;font-weight:700;font-size:16px;line-height:1;text-decoration:none!important;border:2px solid var(--yht-newsprint);transition:background .15s ease,border-color .15s ease,transform .15s ease}
html .yh-shop20-btn:hover{background:var(--yht-oxide);border-color:var(--yht-newsprint);transform:translateY(-1px)}
html .yh-shop20-btn:focus-visible{outline:3px solid var(--yht-newsprint);outline-offset:3px}
html .yh-shop20-btn--outline{background:transparent;color:var(--yht-oxide)!important;border-color:var(--yht-oxide)}
html .yh-shop20-btn--outline:hover{background:var(--yht-oxide);color:var(--yht-newsprint)!important;border-color:var(--yht-oxide)}
html .yh-shop20-btn--small{padding:12px 18px;font-size:15px;white-space:nowrap}
html .yh-shop20-textlink{color:var(--yht-newsprint)!important;font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--yht-newsprint-48)}
html .yh-shop20-textlink--ink{color:var(--yht-ink)!important;text-decoration-color:var(--yht-ink-48)}
html .yh-shop20-fine{margin:0;font-size:13px;line-height:1.5;color:var(--yht-newsprint);max-width:48ch}
html .yh-shop20-fine--ink{color:var(--yht-muted)}
html .yh-shop20-hero__media{margin:0;min-width:0}
html .yh-shop20-frame{aspect-ratio:4/5;max-width:100%;border-radius:0;overflow:hidden;background:var(--yht-newsprint);box-shadow:none}
html .yh-shop20-main .yh-shop20-hero__img{width:112%;height:112%;max-width:none;margin:-2% -6% -10%;object-fit:cover;object-position:50% 35%}
html .yh-shop20-cap{margin:10px 2px 0;font-size:12.5px;line-height:1.45;color:var(--yht-newsprint)}
html .yh-shop20-proof{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
html .yh-shop20-proof li{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;row-gap:2px;background:var(--yht-newsprint);border:1px solid var(--yht-hairline);border-radius:0;padding:16px 18px}
html .yh-shop20-proof__n{grid-row:1/3;width:30px;height:30px;border-radius:0;background:var(--yht-oxide);color:var(--yht-newsprint);font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;margin-top:2px}
html .yh-shop20-proof strong{font-size:15px;color:var(--yht-ink)}
html .yh-shop20-proof span:not(.yh-shop20-proof__n){font-size:13.5px;line-height:1.5;color:var(--yht-muted)}
html .yh-shop20-card{background:var(--yht-newsprint);border:1px solid var(--yht-hairline);border-radius:0;padding:clamp(22px,3.4vw,40px);margin:18px 0 0}
html .yh-shop20-mug{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(20px,3.4vw,44px);align-items:center}
html .yh-shop20-mug__media{margin:0;border-radius:0;overflow:hidden;aspect-ratio:1/1;background:var(--yht-newsprint)}
html .yh-shop20-mug__img{width:100%;height:100%;object-fit:cover}
html .yh-shop20-sizing{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(20px,3.4vw,44px);align-items:start}
html .yh-shop20-sizing__intro .yh-shop20-btn{margin-top:4px}
html .yh-shop20-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--yht-hairline);border-radius:0}
html .yh-shop20-table{width:100%;border-collapse:collapse;font-size:14px;min-width:420px;font-variant-numeric:tabular-nums}
html .yh-shop20-table th, html .yh-shop20-table td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--yht-hairline);white-space:nowrap;color:var(--yht-ink);background:transparent}
html .yh-shop20-table thead th{background:var(--yht-newsprint);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--yht-muted);font-family:var(--yht-font-mono,"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace);font-weight:600}
html .yh-shop20-table tbody th{font-weight:700;color:var(--yht-ink)}
html .yh-shop20-table tbody tr:last-child th, html .yh-shop20-table tbody tr:last-child td{border-bottom:0}
html .yh-shop20-faq{margin:34px 0 0}
html .yh-shop20-faq__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;align-items:start}
html .yh-shop20-q{background:var(--yht-newsprint);border:1px solid var(--yht-hairline);border-radius:0;padding:0 18px}
html .yh-shop20-q summary{cursor:pointer;list-style:none;padding:14px 26px 14px 0;font-weight:700;font-size:15.5px;color:var(--yht-ink);position:relative}
html .yh-shop20-q summary::-webkit-details-marker{display:none}
html .yh-shop20-q summary::after{content:"+";position:absolute;right:0;top:12px;font-size:20px;line-height:1;color:var(--yht-oxide);font-weight:700}
html .yh-shop20-q[open] summary::after{content:"\2013"}
html .yh-shop20-q p{margin:0 0 16px;font-size:15px;line-height:1.55;color:var(--yht-muted)}
html .yh-shop20-q a{color:var(--yht-oxide);font-weight:700}
html .yh-shop20-close{margin:34px 0 0;padding:clamp(24px,3.4vw,40px);border-radius:0;background:var(--yht-photo);text-align:center}
html .yh-shop20-close .yh-shop20-body{margin-left:auto;margin-right:auto}
html .yh-shop20-close .yh-shop20-actions{justify-content:center}
html .yh-shop20-sticky{position:fixed;left:0;right:0;bottom:0;z-index:9000;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--yht-ink-90);color:var(--yht-newsprint);backdrop-filter:blur(8px);box-shadow:none;transform:translateY(110%);transition:transform .25s ease}
html .yh-shop20-sticky[hidden]{display:none}
html .yh-shop20-sticky.is-on{transform:none}
html .yh-shop20-sticky__text{display:flex;flex-direction:column;min-width:0;font-size:13px;line-height:1.3}
html .yh-shop20-sticky__text strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html .yh-shop20-sticky__text span{color:var(--yht-newsprint-72)}
@media (min-width:721px){html .yh-shop20-sticky{display:none}}
@media (max-width:900px){html .yh-shop20-hero{grid-template-columns:1fr 1fr;gap:24px}html .yh-shop20-proof{grid-template-columns:1fr}html .yh-shop20-proof li{padding:14px 16px}}
@media (max-width:780px){html .yh-shop20-hero{grid-template-columns:1fr;padding:22px 18px 26px}html .yh-shop20-hero__media{order:-1}html .yh-shop20-frame{aspect-ratio:1/1}html .yh-shop20-mug{grid-template-columns:1fr}html .yh-shop20-sizing{grid-template-columns:1fr}html .yh-shop20-faq__grid{grid-template-columns:1fr}html .yh-shop20-h1{font-size:clamp(36px,10vw,46px)}}
@media (prefers-reduced-motion:reduce){html .yh-shop20-btn, html .yh-shop20-swatch, html .yh-shop20-sticky{transition:none}}
