/*
Theme Name: heonimoon 3
Theme URI: https://heonimoon.com
Author: heonimoon
Description: the fall 2026 revamp of heonimoon.com (built from the hnm mock)
Version: 3.0.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: heonimoon
*/

/* heonimoon.com, the new look. ONE stylesheet for every page (it becomes the wordpress theme's style.css) */

:root, [data-theme="heonimoon"] { --ground:#F5EEEA; --panel:#D9C5C4; --accent:#C0AEA3; --ink:#695146; }
[data-theme="ballerina"]    { --ground:#FDF8F4; --panel:#e8d4d4; --accent:#c9a8a8; --ink:#4A4A4A; }
[data-theme="teddy"]        { --ground:#F3EEE9; --panel:#E0CFC3; --accent:#C3A995; --ink:#3E2B23; }
[data-theme="storm"]        { --ground:#F5F4F2; --panel:#E9E3DB; --accent:#D7CDC3; --ink:#6B5C52; }
[data-theme="blush"]        { --ground:#FFF5F5; --panel:#F9DDDD; --accent:#F1D8D9; --ink:#6B5A5A; }
[data-theme="toph"]         { --ground:#E1DBCB; --panel:#D7CFBA; --accent:#C5BEAB; --ink:#2C3424; }
[data-theme="dracula"]      { --ground:#E8E0DF; --panel:#B89896; --accent:#996A6A; --ink:#5D292C; }
[data-theme="misted-oak"]   { --ground:#281A14; --panel:#3A2A21; --accent:#6E5847; --ink:#D8CCC0; }
[data-theme="bloodmoon"]    { --ground:#160909; --panel:#3F3130; --accent:#4f3438; --ink:#b0a2a7; }
[data-theme="noir-classic"] { --ground:#0E0E0E; --panel:#141316; --accent:#393939; --ink:#DBDBDE; }
[data-theme="tourmaline"]   { --ground:#1E1815; --panel:#2C2521; --accent:#61564E; --ink:#D7D0C7; }
:root { --line:color-mix(in srgb, var(--ink) 40%, var(--ground)); } /* borders: ink softened toward the background, every theme */

* { box-sizing:border-box; }
[hidden] { display:none !important; }
body {
  margin:0; min-height:100vh; padding:28px 16px;
  font-family:Arial, Helvetica, sans-serif; color:var(--ink);
  background-color:var(--ground);
}
[data-deco="on"][data-pattern="dots"] body {
  background-image:radial-gradient(var(--accent) 2.5px, transparent 3px), radial-gradient(var(--accent) 2.5px, transparent 3px);
  background-size:28px 28px; background-position:0 0, 14px 14px;
}
[data-deco="on"][data-pattern="stripes"] body {
  background-image:repeating-linear-gradient(90deg, var(--ground) 0 8px, var(--accent) 8px 16px);
}
[data-theme="dracula"][data-deco="on"][data-pattern="stripes"] body {
  background-image:repeating-linear-gradient(90deg, var(--ground) 0 8px, var(--panel) 8px 16px);
}
/* koulink's other patterns, same recipes at pattern size 32, drawn in --accent */
[data-deco="on"][data-pattern="grid"] body {
  background-image:linear-gradient(var(--accent) 1px, transparent 1px), linear-gradient(90deg, var(--accent) 1px, transparent 1px);
  background-size:16px 16px;
}
[data-deco="on"][data-pattern="gingham"] body {
  background-image:linear-gradient(90deg, color-mix(in srgb, var(--accent) 45%, transparent) 50%, transparent 50%), linear-gradient(color-mix(in srgb, var(--accent) 45%, transparent) 50%, transparent 50%);
  background-size:16px 16px;
}
[data-deco="on"][data-pattern="tartan"] body {
  --ln:color-mix(in srgb, var(--accent) 85%, transparent); --bd:color-mix(in srgb, var(--accent) 28%, transparent);
  background-image:
    repeating-linear-gradient(90deg, transparent 0 24px, var(--ln) 24px 25px, transparent 25px 29px, var(--ln) 29px 30px, transparent 30px 48px),
    repeating-linear-gradient(180deg, transparent 0 24px, var(--ln) 24px 25px, transparent 25px 29px, var(--ln) 29px 30px, transparent 30px 48px),
    repeating-linear-gradient(90deg, var(--bd) 0 14px, transparent 14px 48px),
    repeating-linear-gradient(180deg, var(--bd) 0 14px, transparent 14px 48px);
}
[data-deco="on"][data-pattern="buffalo"] body {
  background-image:linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, transparent) 50%, transparent 50%), linear-gradient(color-mix(in srgb, var(--accent) 55%, transparent) 50%, transparent 50%);
  background-size:64px 64px;
}
[data-deco="on"][data-pattern="madras"] body {
  --m:color-mix(in srgb, var(--accent) 30%, transparent) 0 8px, transparent 8px 11px, color-mix(in srgb, var(--accent) 42%, transparent) 11px 15px, transparent 15px 21px, color-mix(in srgb, var(--accent) 16%, transparent) 21px 32px, transparent 32px 36px, color-mix(in srgb, var(--accent) 35%, transparent) 36px 37px, transparent 37px 42px;
  background-image:repeating-linear-gradient(90deg, var(--m)), repeating-linear-gradient(180deg, var(--m));
}
[data-deco="on"][data-pattern="checks"] body {
  background-image:conic-gradient(var(--accent) 25%, transparent 0 50%, var(--accent) 0 75%, transparent 0);
  background-size:32px 32px;
}
/* argyle's crossing lines = koulink's dashed stitches (her 10/16 ask): each tile diagonal cut into 19 equal steps (koulink's ~7px step), a dash centered in each.
   an svg can't read --accent, so every theme carries its own stitch in its own --accent */
:root, [data-theme="heonimoon"] { --argyle-stitch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='108'%3E%3Cpath d='M0 0L72 108M72 0L0 108' stroke='%23C0AEA3' stroke-width='1.2' stroke-dasharray='0 1.37 4.10 1.37' fill='none'/%3E%3C/svg%3E"); }
[data-theme="ballerina"]       { --argyle-stitch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='108'%3E%3Cpath d='M0 0L72 108M72 0L0 108' stroke='%23c9a8a8' stroke-width='1.2' stroke-dasharray='0 1.37 4.10 1.37' fill='none'/%3E%3C/svg%3E"); }
[data-theme="teddy"]           { --argyle-stitch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='108'%3E%3Cpath d='M0 0L72 108M72 0L0 108' stroke='%23C3A995' stroke-width='1.2' stroke-dasharray='0 1.37 4.10 1.37' fill='none'/%3E%3C/svg%3E"); }
[data-theme="storm"]           { --argyle-stitch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='108'%3E%3Cpath d='M0 0L72 108M72 0L0 108' stroke='%23D7CDC3' stroke-width='1.2' stroke-dasharray='0 1.37 4.10 1.37' fill='none'/%3E%3C/svg%3E"); }
[data-theme="blush"]           { --argyle-stitch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='108'%3E%3Cpath d='M0 0L72 108M72 0L0 108' stroke='%23F1D8D9' stroke-width='1.2' stroke-dasharray='0 1.37 4.10 1.37' fill='none'/%3E%3C/svg%3E"); }
[data-theme="toph"]            { --argyle-stitch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='108'%3E%3Cpath d='M0 0L72 108M72 0L0 108' stroke='%23C5BEAB' stroke-width='1.2' stroke-dasharray='0 1.37 4.10 1.37' fill='none'/%3E%3C/svg%3E"); }
[data-theme="dracula"]         { --argyle-stitch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='108'%3E%3Cpath d='M0 0L72 108M72 0L0 108' stroke='%23996A6A' stroke-width='1.2' stroke-dasharray='0 1.37 4.10 1.37' fill='none'/%3E%3C/svg%3E"); }
[data-theme="misted-oak"]      { --argyle-stitch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='108'%3E%3Cpath d='M0 0L72 108M72 0L0 108' stroke='%236E5847' stroke-width='1.2' stroke-dasharray='0 1.37 4.10 1.37' fill='none'/%3E%3C/svg%3E"); }
[data-theme="bloodmoon"]       { --argyle-stitch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='108'%3E%3Cpath d='M0 0L72 108M72 0L0 108' stroke='%234f3438' stroke-width='1.2' stroke-dasharray='0 1.37 4.10 1.37' fill='none'/%3E%3C/svg%3E"); }
[data-theme="noir-classic"]    { --argyle-stitch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='108'%3E%3Cpath d='M0 0L72 108M72 0L0 108' stroke='%23393939' stroke-width='1.2' stroke-dasharray='0 1.37 4.10 1.37' fill='none'/%3E%3C/svg%3E"); }
[data-theme="tourmaline"]      { --argyle-stitch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='108'%3E%3Cpath d='M0 0L72 108M72 0L0 108' stroke='%2361564E' stroke-width='1.2' stroke-dasharray='0 1.37 4.10 1.37' fill='none'/%3E%3C/svg%3E"); }
[data-deco="on"][data-pattern="argyle"] body {
  /* tile corners = filled diamonds, tile middles = empty ones, the tile diagonals = the dashed crossing lines through every diamond's center */
  --dm:color-mix(in srgb, var(--accent) 45%, transparent);
  background-image:
    var(--argyle-stitch),
    linear-gradient(to bottom right, var(--dm) 25%, transparent 25%),
    linear-gradient(to bottom left, var(--dm) 25%, transparent 25%),
    linear-gradient(to top right, var(--dm) 25%, transparent 25%),
    linear-gradient(to top left, var(--dm) 25%, transparent 25%);
  background-size:72px 108px; /* 1.5x the old 48 x 72 (her call 10/5), same diamond shape */
}
[data-deco="on"][data-pattern="hstripes"] body { background-image:repeating-linear-gradient(180deg, var(--accent) 0 8px, transparent 8px 16px); }
[data-deco="on"][data-pattern="diagright"] body { background-image:repeating-linear-gradient(135deg, var(--accent) 0 8px, transparent 8px 16px); }
[data-deco="on"][data-pattern="diagleft"] body { background-image:repeating-linear-gradient(45deg, var(--accent) 0 8px, transparent 8px 16px); }
/* dracula: every stripe direction uses the softer --panel, like her vertical stripes */
[data-theme="dracula"][data-deco="on"][data-pattern="hstripes"] body { background-image:repeating-linear-gradient(180deg, var(--panel) 0 8px, transparent 8px 16px); }
[data-theme="dracula"][data-deco="on"][data-pattern="diagright"] body { background-image:repeating-linear-gradient(135deg, var(--panel) 0 8px, transparent 8px 16px); }
[data-theme="dracula"][data-deco="on"][data-pattern="diagleft"] body { background-image:repeating-linear-gradient(45deg, var(--panel) 0 8px, transparent 8px 16px); }

.page { max-width:1000px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.panel { background:var(--panel); border:1px solid var(--line); }

/* header */
.head { border-radius:16px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:9px 14px; font-size:12px; }
.brand { font-weight:700; letter-spacing:.3px; }
a.brand { color:inherit; text-decoration:none; } /* the brand line goes home (her 12:10am ask) */
.tagline { font-style:italic; font-weight:400; }
.controls { display:flex; align-items:center; gap:8px; }
.pill {
  appearance:none; -webkit-appearance:none; margin:0; cursor:pointer; outline:none;
  font:10px/1.2 Arial, Helvetica, sans-serif; color:var(--ink);
  background:var(--ground); border:1px solid var(--line); border-radius:999px;
  height:18px; padding:0 24.9px 0 9px; /* same 18px as the toggle; 26.2 right = the words sit centered between the left edge and the arrow (measured) */
  text-align:center; text-align-last:center;
}
.pill-wrap { position:relative; display:inline-block; }
.pill-wrap::after, .woocommerce-checkout .woocommerce-input-wrapper:has(> select)::after, .woocommerce-ordering::after {
  /* a little star instead of the arrow: svg mask filled with --ink, its middle = the star's own center, so it sits dead center in the pill */
  content:''; position:absolute; right:9.25px; top:50%; width:8px; height:8px; margin-top:-4px; background:var(--ink);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1.1 -1.1 2.2 2.2'%3E%3Cpath d='M0 -1L.2645 -.3641L.9511 -.309L.428 .1391L.5878 .809L0 .45L-.5878 .809L-.428 .1391L-.9511 -.309L-.2645 -.3641Z' fill='%23000' stroke='%23000' stroke-width='.12' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1.1 -1.1 2.2 2.2'%3E%3Cpath d='M0 -1L.2645 -.3641L.9511 -.309L.428 .1391L.5878 .809L0 .45L-.5878 .809L-.428 .1391L-.9511 -.309L-.2645 -.3641Z' fill='%23000' stroke='%23000' stroke-width='.12' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; pointer-events:none;
}
.head .cart { position:relative; display:inline-flex; color:var(--ink); }
.head button.cart { padding:0; margin:0; background:none; border:0; cursor:pointer; font:inherit; }

/* hero */
.hero { display:grid; grid-template-columns:minmax(0, 54fr) minmax(0, 46fr); grid-template-rows:440px; gap:12px; }
.hero .photo { order:2; }
.photo { margin:0; overflow:hidden; border-radius:16px; }
.photo picture { display:block; width:100%; height:100%; }
/* her text sits on the right, so narrower windows trim the left side first */
.photo img { display:block; width:100%; height:100%; object-fit:cover; object-position:right top; }
.cards { display:flex; flex-direction:column; gap:12px; min-height:0; }

.idcard { padding:18px 20px; }
/* her scallop frame: drawn by js from her curves so it fits any size, paperclip is her drawing */
.framed { position:relative; background:transparent; border:0; }
.idcard.framed { padding:24px 28px; }
.frame-svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.frame-svg path { fill:var(--ground); stroke:var(--line); stroke-width:1.5; stroke-linejoin:round; }
.framed > :not(svg) { position:relative; }
.paperclip { position:absolute; left:14px; top:-19px; width:35px; height:52px; z-index:2; pointer-events:none; overflow:visible; }
.id-top { display:flex; align-items:center; gap:14px; }
.avatar { width:64px; height:64px; border:1px solid var(--line); display:block; flex:none; }
.id-url { font-size:10px; margin-bottom:3px; }
.id-name { font-size:20px; font-weight:700; letter-spacing:.3px; }
.id-handle { font-size:12px; margin-top:2px; }
.rule { height:2px; margin:14px 0; background:radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 1.2px) 0 0 / 7px 2px repeat-x; }
.id-intro { font-size:13px; line-height:1.55; margin:0; text-align:center; }
.socials { display:flex; flex-wrap:wrap; justify-content:center; gap:4px 10px; margin-top:10px; font-size:12px; }
.socials a { color:var(--ink); font-weight:700; text-decoration:none; white-space:nowrap; }
.socials a:hover { text-decoration:underline; }
.socials svg { width:11px; height:11px; vertical-align:-1px; margin-right:4px; }
.id-btns { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:16px; }
.pill-btn {
  font:11px Arial, Helvetica, sans-serif; color:var(--ink); background:var(--ground);
  border:1px solid var(--line); border-radius:999px; padding:5px 14px; cursor:pointer;
}
.pill-btn.active { background:var(--accent); }
[data-theme="heonimoon"] .pill-btn.active { background:var(--panel); }

.card2 { flex:1; min-height:0; display:flex; flex-direction:column; border-radius:16px; overflow:hidden; }
.card2-bar { display:flex; justify-content:space-between; padding:10px 16px; font-size:12px; border-bottom:1px solid var(--line); background:var(--accent); }
.card2-body { flex:1; min-height:0; overflow-y:auto; background:var(--ground); scrollbar-width:thin; scrollbar-color:var(--accent) transparent; }
.upd { display:flex; gap:12px; padding:7px 16px; font-size:12px; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--accent); }
.upd:hover, .upd.active { background:var(--panel); }
.upd-date { flex:none; width:38px; }
.upd-title { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.upd-new { flex:none; align-self:center; padding:2px 7px; font:9px/1.2 Arial, Helvetica, sans-serif; letter-spacing:.3px; color:var(--ink); background:color-mix(in srgb, var(--accent) 55%, var(--ground)); border-radius:999px; } /* the newest update while it's under 21 days old: the same soft pill as "Verified Owner" */
.upd-count { display:inline-flex; align-items:center; gap:6px; }
.upd-dot { width:5px; height:5px; border-radius:50%; background:var(--ink); } /* the unseen dot: an update newer than the last one this visitor opened */
.upd-dot[hidden] { display:none; }

.toggle {
  all:unset; box-sizing:border-box; cursor:pointer; flex:none; position:relative;
  width:32px; height:18px; border:1px solid var(--line); border-radius:999px; background:var(--ground);
}
.toggle span { position:absolute; top:2px; left:2px; width:12px; height:12px; border-radius:50%; background:var(--ink); transition:left .2s; }
[data-deco="on"] .toggle span { left:16px; }

/* the drawer: closed = 0 height and its gap cancelled, opens downward */
.drawer { display:grid; grid-template-rows:0fr; margin-top:-12px; transition:grid-template-rows .35s ease; }
.drawer.open { grid-template-rows:1fr; }
.drawer-inner { overflow:hidden; min-height:0; }
.content { margin-top:12px; min-height:260px; padding:24px 28px; font-size:13px; line-height:1.6; }
.content-body.placeholder { min-height:212px; display:flex; align-items:center; justify-content:center; font-size:12px; }
.post-meta { font-size:11px; margin-bottom:4px; }
body.single-post .post-meta { font-style:italic; } /* the post page's date, her 10/5 10:38pm ask */
.post-title { font-size:18px; font-weight:700; margin:0 0 14px; }
.post-body p { margin:0 0 10px; }
.post-body a { color:var(--ink); }
.post-body figure { margin:12px 0; }
.post-body img { max-width:100%; height:auto; }
.post-body .aligncenter { text-align:center; }
.post-body .aligncenter img { display:inline-block; }
.post-body .has-medium-font-size { font-size:16px; }

/* shop: the series row */
.page-head { text-align:center; margin-bottom:16px; }
.page-eyebrow { font-size:11px; }
.shop-eyebrow { font-size:16px; } /* drawer page labels (shop, about, faq, contact), 11 + 5 */
.page-title { font-size:18px; font-weight:700; margin:2px 0 0; }
.series-tabs { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:0 0 18px; }

/* series pages: one featured bundle across the top, then the widgets 4 to a row */
.product-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:22px 16px; margin-top:4px; }
.product-card { background:none; border:0; padding:0; } /* borderless: the widgets sit right on the drawer */
.product-card .inner { display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; text-align:center; }
.product-image img { display:block; width:100%; aspect-ratio:1 / 1; object-fit:cover; border-radius:12px; background:var(--panel); }
/* her new tight-cropped shots: just the widget, no backdrop, kept square so the rows line up */
.product-image { width:100%; }
.product-image.fit { aspect-ratio:1 / 1; display:flex; align-items:center; justify-content:center; }
.product-image.fit img { width:100%; height:100%; aspect-ratio:auto; object-fit:contain; border-radius:0; background:none; }
/* koufree: all three widgets are wide, so the photo box is wide too (koujam's shape, the tallest of the three) and each widget sits on its bottom edge, right above its name */
.product-grid.wide .product-image.fit { aspect-ratio:1200 / 768; }
.product-grid.wide .product-image.fit img { object-position:center bottom; }
.product-name { font-size:13px; font-weight:700; margin:0; }
.name-row { display:flex; align-items:center; justify-content:center; gap:8px; }
.price-dot { display:inline-flex; align-items:center; justify-content:center; flex:none; width:24px; height:24px; box-sizing:border-box; padding-top:0.5px; border-radius:50%; background:var(--panel); font-size:9px; font-weight:700; line-height:1; } /* line-height 1 + half a pixel: arial digits sit dead center */
.name-row .price-dot { width:18px; height:18px; } /* widget stickers only, bundle keeps 24px */
.name-row .product-name { position:relative; top:0.5px; } /* brave on her retina drew the name 0.6px above the sticker middle */
.product-kind { font-size:12px; font-style:italic; margin-top:-2px; }
.card-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:auto; }
.btn { font:11px Arial, Helvetica, sans-serif; color:var(--ink); text-decoration:none; border:1px solid var(--line); border-radius:999px; padding:5px 12px; background:var(--ground); white-space:nowrap; text-align:center; }
.btn-fill { background:var(--accent); }
[data-theme="heonimoon"] .btn-fill { background:var(--ground); }
.product-card.bundle { grid-column:1 / -1; background:var(--panel); border-radius:16px; padding:18px 22px; }
.product-card.bundle .inner { display:block; text-align:left; }
/* the bundle is a banner now: words on the left, buttons on the right */
.product-card.bundle { position:relative; }
.product-card.bundle::after { content:''; position:absolute; right:26px; top:50%; width:110px; height:110px; margin-top:-55px; background:url(assets/cherub-logo.png) center / contain no-repeat; transform:scaleX(-1); pointer-events:none; } /* cherub kou, flipped to face the words */
.product-card.bundle.anim { overflow:hidden; }
.product-card.bundle.anim::after { top:0; bottom:0; right:0; margin-top:0; height:auto; width:calc((100% - 44px) * 0.44 + 22px); background:url(assets/bundle-anim.webp) right center / contain no-repeat; transform:none; } /* her animated kou fills the free space, flush right */
.product-card.bundle.anim.study::after { background-image:url(assets/bundle-anim-koustudy.webp); } /* her koustudy animation, same box as koudash */
.product-card.bundle.anim.free::after { background-image:url(assets/bundle-anim-koufree.webp); } /* her koufree animation */
.product-card.bundle.anim.pay::after { background-image:url(assets/bundle-anim-koupay.webp); } /* her koupay animation */
.bundle-content { display:grid; grid-template-columns:minmax(0, 56%); grid-template-areas:"label" "name" "desc" "actions"; row-gap:8px; align-items:start; } /* words stop 56% across, her green line */
.bundle-content .feature-label { grid-area:label; justify-self:start; }
.bundle-content .bundle-name { grid-area:name; }
.bundle-content .product-desc { grid-area:desc; }
.feature-label { font-size:10px; font-weight:700; color:var(--ground); background:var(--accent); border:1px solid var(--line); border-radius:999px; padding:2px 10px; }
.bundle-name { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:15px; font-weight:700; }
.price-dot.bundle-dot { background:var(--ground); color:var(--ink); } /* was --accent: too light to read in every theme (10/5) */
[data-theme="noir-classic"] .price-dot.bundle-dot { background:var(--ink); color:var(--ground); } /* noir: the black dot vanished on the black card, so it flips (her call 10/5) */
.price-was { font-weight:400; }
.product-desc { margin:0; font-size:12px; line-height:1.6; }
.bundle-content .card-actions { grid-area:actions; justify-content:flex-start; margin:4px 0 0; }

/* about / faq / contact, copy from the live site */
.prose { max-width:560px; margin:0 auto; }
.prose p { margin:0 0 1.6em; text-align:justify; } /* a full empty line between paragraphs */
.mascot { display:block; width:120px; margin:18px auto 6px; border-radius:12px; }
.art-credit { font-size:10px; text-align:center; }
.faq-item { max-width:620px; margin:0 auto; padding:14px 0 16px; background:radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 1.2px) 0 100% / 7px 2px repeat-x; }
.faq-item:last-child { background:none; }
.faq-q { font-weight:700; margin-bottom:6px; }
.faq-a { line-height:1.7; }
.link-row { margin:16px 0 6px; }
.link-label { display:block; font-size:11px; letter-spacing:1px; margin-bottom:2px; }
.link-url { color:var(--ink); font-weight:700; text-decoration:none; }
.link-url:hover { text-decoration:underline; }
.suggest-form, .updates-form { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.updates-form { flex-direction:row; }
.suggest-input, .suggest-text { font:12px Arial, Helvetica, sans-serif; color:var(--ink); background:var(--ground); border:1px solid var(--line); outline:none; padding:8px 14px; }
.suggest-input { border-radius:999px; }
.updates-form .suggest-input { flex:1; min-width:0; }
.suggest-text { border-radius:14px; resize:vertical; min-height:84px; line-height:1.6; }
.suggest-input::placeholder, .suggest-text::placeholder { color:var(--accent); }
.suggest-input:disabled { opacity:.5; }
.suggest-form .pill-btn { align-self:flex-start; }
.updates-form .pill-btn { align-self:stretch; }
.hp-field { position:absolute; left:-9999px; width:0; height:0; opacity:0; }
.type-row { display:flex; flex-wrap:wrap; gap:8px; }
.type-chip input { position:absolute; opacity:0; width:0; height:0; }
.type-chip span { display:inline-block; font-size:11px; font-weight:700; border:1px solid var(--line); border-radius:999px; padding:5px 14px; cursor:pointer; background:var(--ground); }
.type-chip input:checked + span { background:var(--accent); }
[data-theme="heonimoon"] .type-chip input:checked + span { background:var(--panel); }
.anon-row { display:flex; align-items:center; gap:10px; font-size:12px; cursor:pointer; }
.anon-row input { position:absolute; opacity:0; width:0; height:0; }
.anon-switch { position:relative; flex:none; width:32px; height:18px; box-sizing:border-box; border:1px solid var(--line); border-radius:999px; background:var(--ground); }
.anon-switch::after { content:''; position:absolute; top:2px; left:2px; width:12px; height:12px; border-radius:50%; background:var(--ink); transition:left .2s; }
.anon-row input:checked + .anon-switch::after { left:16px; }
.form-hint, .preview-note, .suggest-thanks { font-size:11px; } /* .suggest-thanks = the forms' thank-you lines (WP port) */
/* bug reports ask where it happened (her 10/16 ask, after an anon koucard tip with no device): two pill selects with the header's star, side by side, stacked on phones */
.bug-row { display:flex; flex-wrap:wrap; gap:8px; }
.bug-row .pill-wrap { flex:1 1 170px; }
.bug-row .pill-wrap::after { right:14px; }
.bug-select { width:100%; appearance:none; -webkit-appearance:none; padding-right:30px; cursor:pointer; }
.bug-select:invalid { color:var(--accent); } /* nothing picked yet = placeholder color, like the text fields */
.bug-select option { color:var(--ink); }
.foot { border-radius:16px; padding:10px 14px; font-size:12px; background:var(--accent); display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:6px 20px; }
.foot-links { display:flex; flex-wrap:wrap; gap:6px 20px; }
.foot-links a { color:inherit; text-decoration:none; font-weight:700; padding-bottom:1px; border-bottom:1px solid color-mix(in srgb, currentColor 45%, transparent); } /* live footer links: bold + a soft underline */
.foot-links a:hover { border-bottom-color:currentColor; }
[data-theme="dracula"] .foot { color:var(--ground); }
[data-theme="heonimoon"] .foot { background:var(--panel); color:var(--ground); }
[data-theme="dracula"] .card2-bar { background:var(--panel); }
[data-theme="dracula"] .upd:hover, [data-theme="dracula"] .upd.active { background:var(--accent); }

@media (max-width:720px) {
  .head { justify-content:center; text-align:center; }
  .hero { grid-template-columns:minmax(0, 1fr); grid-template-rows:none; }
  .product-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .product-card.bundle .inner { text-align:center; }
  .bundle-content { padding-right:0; grid-template-columns:minmax(0, 1fr); }
  .product-card.bundle::after { position:static; display:block; margin:12px auto 0; }
  .foot, .foot-links { justify-content:center; text-align:center; }
  .card2-body { max-height:94.5px; } /* phones: exactly 3 update rows (31.5px each), the rest scroll */
  .bundle-name { justify-content:center; } /* the wrapped price line centers under the title */
  .product-card.bundle.anim { display:flex; flex-direction:column; }
  .product-card.bundle.anim::after { order:-1; width:calc(100% + 44px); height:auto; aspect-ratio:1138 / 640; margin:-18px -22px 14px; background-position:center; } /* her animation on top, flush to the banner edges, like the widget cards picture-first */
  .bundle-content .feature-label { justify-self:center; }
  .bundle-content .card-actions { justify-content:center; }
  .hero .photo { order:0; height:auto; aspect-ratio:2000 / 1093; } /* phones: her mobile photo, shown whole */
}

/* ===== woo pages =====
   the theme loads woocommerce-layout.css + woocommerce-smallscreen.css (structure: the two columns, the related grid)
   and NOT woocommerce.css (its look), so everything below is the whole look. no !important fights like the old theme */
.screen-reader-text { position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(1px, 1px, 1px, 1px); clip-path:inset(50%); border:0; white-space:nowrap; }
.content-area.framed { padding:24px 28px; font-size:13px; line-height:1.6; } /* same box as the drawer */
.woocommerce-page .preview-note { margin:0 0 14px; }

/* breadcrumb: soft underline links, like the footer */
.woocommerce-breadcrumb { font-size:11px; margin:0 0 16px; }
.woocommerce-breadcrumb a, .product_meta a, .woocommerce-review-link { color:inherit; text-decoration:none; border-bottom:1px solid color-mix(in srgb, currentColor 45%, transparent); }
.woocommerce-breadcrumb a:hover, .product_meta a:hover { border-bottom-color:currentColor; }

/* product page, top half: her listing photo left, the summary right (the floats come from woocommerce-layout.css) */
.single-product div.product div.images { margin:0; }
.single-product div.product div.images img { display:block; width:100%; height:auto; border-radius:12px; }
.single-product .product_title { font-size:18px; font-weight:700; line-height:1.3; margin:0 0 8px; }
.single-product .summary .price { font-size:16px; margin:0 0 12px; }
.woocommerce-product-details__short-description { line-height:1.85; }
.woocommerce-product-details__short-description blockquote { margin:0; }
.woocommerce-product-details__short-description p { margin:0 0 14px; }
.single-product form.cart { display:flex; align-items:center; gap:8px; margin:0 0 14px; }
.single-product form.cart .qty, .woocommerce-cart table.cart .qty {
  box-sizing:border-box; width:44px; height:24px; padding:0 4px; margin:0;
  font:11px Arial, Helvetica, sans-serif; color:var(--ink); text-align:center;
  background:var(--ground); border:1px solid var(--line); border-radius:999px; outline:none;
  -moz-appearance:textfield; appearance:textfield;
}
.single-product form.cart .qty::-webkit-inner-spin-button, .single-product form.cart .qty::-webkit-outer-spin-button,
.woocommerce-cart table.cart .qty::-webkit-inner-spin-button, .woocommerce-cart table.cart .qty::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
.product_meta { font-size:11px; line-height:1.7; }
.product_meta > span { display:block; }

/* woo buttons = the site's pill buttons (add to cart fill = the active pill fill) */
.woocommerce-page .single_add_to_cart_button, .woocommerce-page ul.products a.button,
.woocommerce-page .checkout-button, .woocommerce-page table.cart td.actions .button, .woocommerce-page .woocommerce-message .button,
.woocommerce-checkout form.checkout_coupon .button, .woocommerce-checkout #place_order, .woocommerce-order .download-file .button, .woocommerce-cart .return-to-shop .button {
  display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; height:24px; padding:0 14px; margin:0;
  font:11px Arial, Helvetica, sans-serif; color:var(--ink); text-decoration:none; white-space:nowrap;
  background:var(--accent); border:1px solid var(--line); border-radius:999px; cursor:pointer;
}
[data-theme="heonimoon"] .woocommerce-page .single_add_to_cart_button, [data-theme="heonimoon"] .woocommerce-page ul.products a.button, [data-theme="heonimoon"] .woocommerce-page .checkout-button, [data-theme="heonimoon"] .woocommerce-checkout #place_order, [data-theme="heonimoon"] .woocommerce-order .download-file .button, [data-theme="heonimoon"] .woocommerce-cart .return-to-shop .button { background:var(--panel); }
/* the quieter buttons (apply coupon, update cart, the notice's view cart) = outline pills, like the old theme's */
.woocommerce-page table.cart td.actions .button, .woocommerce-page .woocommerce-message .button, .woocommerce-checkout form.checkout_coupon .button { background:var(--ground); }

/* description / reviews tabs = a centered pill row, like the shop's series pills */
.single-product div.product .woocommerce-tabs { padding-top:28px; }
.single-product div.product .woocommerce-tabs ul.tabs { list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:0 0 20px; padding:0; }
.single-product div.product .woocommerce-tabs ul.tabs::before, .single-product div.product .woocommerce-tabs ul.tabs::after { content:none; }
.single-product div.product .woocommerce-tabs ul.tabs li { display:block; margin:0; padding:0; }
.single-product div.product .woocommerce-tabs ul.tabs li a {
  display:block; font:11px Arial, Helvetica, sans-serif; color:var(--ink); text-decoration:none;
  background:var(--ground); border:1px solid var(--line); border-radius:999px; padding:5px 14px;
}
.single-product div.product .woocommerce-tabs ul.tabs li.active a { background:var(--accent); font-weight:700; } /* bold when picked, like the widget tabs (her 11:25pm ask) */
[data-theme="heonimoon"] .single-product div.product .woocommerce-tabs ul.tabs li.active a { background:var(--panel); }

/* her listing text: the old theme's spacing, kept. woo calls each tab box .panel, so it un-does the site's blush .panel box */
.woocommerce-tabs .panel { background:none; border:0; margin:0; padding:0; }
.woocommerce-Tabs-panel { line-height:1.85; }
.woocommerce-Tabs-panel a { color:inherit; text-underline-offset:2px; }
.woocommerce-Tabs-panel h2 { font-size:16px; }
.woocommerce-Tabs-panel p { margin:0 0 12px; }
.woocommerce-Tabs-panel--description p { margin-bottom:16px; }
.woocommerce-Tabs-panel--description p:has(br), .woocommerce-product-details__short-description p:has(br) { line-height:2.25; }
.woocommerce-Tabs-panel--description blockquote { margin:0 0 16px; padding:0; }
.woocommerce-Tabs-panel--description blockquote blockquote, .woocommerce-Tabs-panel--description blockquote > :last-child { margin-bottom:0; }
.woocommerce-Tabs-panel--description h2, .woocommerce-Tabs-panel--description h3, .woocommerce-Tabs-panel--description h4 { margin:26px 0 12px; }
.woocommerce-Tabs-panel--description ul, .woocommerce-Tabs-panel--description ol { margin:0 0 16px; padding-left:20px; }
.woocommerce-Tabs-panel--description li { margin-bottom:7px; }
.woocommerce-Tabs-panel--description hr { margin:20px 0; border:0; border-top:1px solid var(--line); }
.woocommerce-Tabs-panel--description figure { margin:18px 0; }
.woocommerce-Tabs-panel--description > :last-child { margin-bottom:0; }
.woocommerce-Tabs-panel img { max-width:100%; height:auto; }
.woocommerce-Tabs-panel iframe { max-width:100%; }

/* bundle listings: kou-wtabs.js (the old theme's script, carried as-is) turns each widget in the description into its own tab.
   kou's look: the header's small pills (18px, 10px text), picked = the same fill as the Description/Reviews pill. names stay as she typed them (ALL CAPS) */
body.single-product .kou-wtabs { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:0 0 20px; padding:0; list-style:none; }
body.single-product .kou-wtab { margin:0; padding:0; }
body.single-product .kou-wtab > button { display:flex; align-items:center; height:18px; padding:0 11px; font:10px Arial, Helvetica, sans-serif; letter-spacing:.5px; color:var(--ink); background:var(--ground); border:1px solid var(--line); border-radius:999px; cursor:pointer; }
body.single-product .kou-wtab.active > button { background:var(--accent); font-weight:700; } /* bold name on the picked tab, her 11:20pm ask */
[data-theme="heonimoon"] body.single-product .kou-wtab.active > button { background:var(--panel); } /* her 11:13pm call: round pills, no frill (tried the shrunk drawer frill, a cloud, the live scallop) */
body.single-product .kou-wtab > button:focus-visible { outline:1px solid var(--ink); outline-offset:2px; }
body.single-product .kou-wtabwrap.kou-wsplit { padding-bottom:26px; border-bottom:1px solid var(--line); margin-bottom:26px; } /* the "Features:" list moves under the tabs, a thin line between */
body.single-product .kou-wtabwrap { margin-top:20px; } /* her 11pm catch: the disclaimer above is a <center> (no margin), so the tabs sat right under it. now 20px to the pills */
body.single-product .kou-wpanel > :last-child { margin-bottom:0; }
body.single-product .kou-wtabwrap [hidden] { display:none; }
@media (max-width:720px) {
  body.single-product .kou-wtabs { flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; scrollbar-width:none; } /* phones: one row that swipes */
  body.single-product .kou-wtabs::-webkit-scrollbar { display:none; }
  body.single-product .kou-wtab { flex:0 0 auto; }
}
.aligncenter { display:block; margin-left:auto; margin-right:auto; }
#reviews h2 { font-size:15px; margin:0 0 10px; }
#reviews ol.commentlist { list-style:none; margin:0 0 16px; padding:0; } /* no "1." in front of each review (her 11:49pm yes) */
#reviews .commentlist .comment-text { display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:8px; } /* her 12:06am: hearts sit right after the date */
#reviews .commentlist .comment-text > .meta { grid-row:1; grid-column:1; margin:0; }
#reviews .commentlist .comment-text > .star-rating { grid-row:1; grid-column:2; margin:0; }
#reviews .commentlist .comment-text > .description { grid-column:1 / -1; margin-top:12px; }
#reviews .commentlist .description > :last-child { margin-bottom:0; } /* grid items keep their margins, so the gap under the review would double */
.single-product .summary .woocommerce-product-rating { display:flex; align-items:center; gap:8px; } /* hearts to the LEFT of the review link, one line (her 12:09am) */
.single-product .summary .woocommerce-product-rating .star-rating { margin:0; }
#reviews .comment_container > img.avatar { display:none; } /* her 11:30pm: no profile picture on reviews (and the id card's bare .avatar rule was sizing it) */
#reviews .woocommerce-review__verified { display:inline-block; vertical-align:1px; margin:0 2px; padding:2px 7px; font:9px/1.2 Arial, Helvetica, sans-serif; font-style:normal; letter-spacing:.3px; color:var(--ink); background:color-mix(in srgb, var(--accent) 55%, var(--ground)); border-radius:999px; } /* a soft notion-style status pill, small so it doesn't outshine the name */
.clear { clear:both; }

/* the review form (her 10/6 11:15pm catch, it was bare): checkout's fields (bold little labels, 30px pills, the textarea's photo corners), add to cart's pill, and the rating picked with pixel hearts */
#review_form_wrapper { margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
#respond .comment-reply-title { display:block; font-size:15px; font-weight:700; margin:0 0 6px; }
#respond .comment-reply-title small { display:none; }
#respond .comment-notes { font-size:11px; margin:0 0 16px; }
#respond .required { color:var(--ink); text-decoration:none; border:0; }
#respond .comment-form-rating, #respond .comment-form-comment, #respond .comment-form-author, #respond .comment-form-email { margin:0 0 12px; }
#respond .comment-form-rating > label, #respond .comment-form-comment > label, #respond .comment-form-author > label, #respond .comment-form-email > label { display:block; font-size:11px; font-weight:700; margin:0 0 4px; }
#respond input#author, #respond input#email, #respond textarea#comment {
  box-sizing:border-box; display:block; width:100%; height:30px; padding:0 14px; margin:0;
  font:12px Arial, Helvetica, sans-serif; color:var(--ink); background:var(--ground); border:1px solid var(--line); border-radius:999px; outline:none;
}
#respond textarea#comment { height:auto; min-height:110px; padding:9px 14px; line-height:1.5; border-radius:12px; resize:vertical; }
#respond input#author:focus, #respond input#email:focus, #respond textarea#comment:focus { border-color:var(--ink); }
#respond .comment-form-email .form-hint { display:block; margin-top:4px; }
#respond .comment-form-cookies-consent { display:flex; align-items:center; gap:6px; font-size:11px; margin:0 0 16px; }
#respond .comment-form-cookies-consent input { margin:0; accent-color:var(--ink); }
#respond .form-submit { margin:0; }
#respond .form-submit #submit {
  display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; height:24px; padding:0 14px; margin:0;
  font:11px Arial, Helvetica, sans-serif; color:var(--ink); background:var(--accent); border:1px solid var(--line); border-radius:999px; cursor:pointer; -webkit-appearance:none; appearance:none;
}
[data-theme="heonimoon"] #respond .form-submit #submit { background:var(--panel); }
/* woo's script swaps the rating select for five links: each one a pixel heart (2px pixels, the listing's are 1.5), --line until picked, ink up to the one under the mouse or the picked one */
#respond p.stars { margin:0; line-height:0; }
#respond p.stars span { display:inline-flex; gap:3px; }
#respond p.stars a { display:block; width:16px; height:12px; overflow:hidden; font-size:0; color:transparent; text-decoration:none; outline:none; }
#respond p.stars a::before { content:""; display:block; width:100%; height:100%; background:var(--line); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-0.5 0 8 6' shape-rendering='crispEdges'%3E%3Cpath d='M1 0H3V1H4V0H6V1H7V3H6V4H5V5H4V6H3V5H2V4H1V3H0V1H1Z'/%3E%3C/svg%3E") 0 0 / 16px 12px no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-0.5 0 8 6' shape-rendering='crispEdges'%3E%3Cpath d='M1 0H3V1H4V0H6V1H7V3H6V4H5V5H4V6H3V5H2V4H1V3H0V1H1Z'/%3E%3C/svg%3E") 0 0 / 16px 12px no-repeat; }
#respond p.stars:hover a::before, #respond p.stars.selected a::before { background:var(--ink); }
#respond p.stars a:hover ~ a::before, #respond p.stars.selected a.active ~ a::before { background:var(--line); }
#respond p.stars.selected:hover a::before { background:var(--ink); }
#respond p.stars.selected:hover a:hover ~ a::before { background:var(--line); }
#respond p.stars a:focus-visible { outline:1px solid var(--ink); outline-offset:2px; }

/* related products: woo's own grid (4 across, 2 on phones), cards like the shop's */
.related.products { clear:both; padding-top:30px; }
.related.products > h2 { font-size:16px; text-align:center; margin:0 0 18px; }
.woocommerce-page ul.products { list-style:none; margin:0; padding:0; }
.woocommerce-page ul.products li.product { text-align:center; }
.woocommerce-page ul.products li.product .woocommerce-LoopProduct-link { display:block; color:inherit; text-decoration:none; }
.woocommerce-page ul.products li.product img { display:block; width:100%; height:auto; border-radius:12px; margin:0 0 8px; }
.woocommerce-page ul.products li.product .woocommerce-loop-product__title { font-size:13px; font-weight:700; line-height:1.4; margin:0 0 2px; }
.woocommerce-page ul.products li.product .price { display:block; font-size:12px; margin:0 0 8px; }
/* page numbers under a long list (her 10/6 11:44pm: they were bare browser-blue links): round pills like the tab pills, the page you're on filled + bold, the arrows drawn in pixels like the hearts */
.woocommerce-pagination { clear:both; padding-top:26px; text-align:center; }
.woocommerce-pagination ul.page-numbers { display:inline-flex; gap:6px; list-style:none; margin:0; padding:0; position:relative; }
/* her 11:50pm catch: woo only prints the arrows that go somewhere, so page 1 (no ←) and the last page (no →) shifted the centered numbers. the arrows hang off the sides now, so the numbers sit in the same spot on every page */
.woocommerce-pagination .page-numbers li:has(> .prev) { position:absolute; top:0; right:calc(100% + 6px); }
.woocommerce-pagination .page-numbers li:has(> .next) { position:absolute; top:0; left:calc(100% + 6px); }
.woocommerce-pagination .page-numbers li { margin:0; }
.woocommerce-pagination .page-numbers li > .page-numbers {
  display:flex; align-items:center; justify-content:center; box-sizing:border-box; min-width:24px; height:24px; padding:0 7px;
  font:11px Arial, Helvetica, sans-serif; color:var(--ink); text-decoration:none; background:var(--ground); border:1px solid var(--line); border-radius:999px;
}
.woocommerce-pagination .page-numbers li > a.page-numbers:not(.next):not(.prev):hover { border-color:var(--ink); } /* the arrows only go lighter (her 11:47pm) */
.woocommerce-pagination .page-numbers li > .current { background:var(--accent); font-weight:700; }
[data-theme="heonimoon"] .woocommerce-pagination .page-numbers li > .current { background:var(--panel); }
.woocommerce-pagination .page-numbers li > .next, .woocommerce-pagination .page-numbers li > .prev { font-size:0; background:none; border-color:transparent; } /* her 11:46pm: no circle on the arrows, just the pixels */
.woocommerce-pagination .page-numbers li > .next:hover::before, .woocommerce-pagination .page-numbers li > .prev:hover::before { background:var(--accent); }
.woocommerce-pagination .page-numbers li > .next::before, .woocommerce-pagination .page-numbers li > .prev::before { content:""; width:10px; height:10px; background:var(--ink); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 5' shape-rendering='crispEdges'%3E%3Cpath d='M2 0h1v1H2zM3 1h1v1H3zM0 2h5v1H0zM3 3h1v1H3zM2 4h1v1H2z'/%3E%3C/svg%3E") center / 10px 10px no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 5' shape-rendering='crispEdges'%3E%3Cpath d='M2 0h1v1H2zM3 1h1v1H3zM0 2h5v1H0zM3 3h1v1H3zM2 4h1v1H2z'/%3E%3C/svg%3E") center / 10px 10px no-repeat; }
.woocommerce-pagination .page-numbers li > .prev::before { transform:scaleX(-1); }

/* notices ("added to your cart"): a thin blush box, its button on the right */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 12px;
  margin:0 0 18px; padding:10px 16px; list-style:none; background:var(--panel); border:1px solid var(--line); border-radius:12px;
}
/* her 10/6: woo focuses a new notice so screen readers read it out; the browser drew its blue focus ring on the box. it isn't clickable, so no ring */
.woocommerce-message:focus, .woocommerce-info:focus, .woocommerce-error:focus { outline:none; }
.woocommerce-page .woocommerce-message .button { float:none; order:1; }

/* cart + totals tables: thin --line box, rounded like the photos, the head row = the updates card's bar */
.woocommerce-cart table.shop_table, .woocommerce-checkout table.shop_table { width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; margin:0 0 24px; }
.woocommerce-cart table.shop_table th, .woocommerce-cart table.shop_table td,
.woocommerce-checkout table.shop_table th, .woocommerce-checkout table.shop_table td { padding:12px 14px; vertical-align:middle; text-align:left; border-top:1px solid var(--line); }
.woocommerce-cart table.shop_table tr:first-child > *, .woocommerce-checkout table.shop_table thead tr:first-child > * { border-top:0; }
.woocommerce-cart table.cart thead th { padding:8px 14px; font-size:11px; font-weight:700; text-align:center; background:var(--accent); }
.woocommerce-cart table.cart td { text-align:center; }
.woocommerce-cart table.cart td.product-name { text-align:left; }
.woocommerce-cart table.cart td.product-name a { color:inherit; text-decoration:none; border-bottom:1px solid color-mix(in srgb, currentColor 45%, transparent); }
.woocommerce-cart table.cart td.product-name a:hover { border-bottom-color:currentColor; }
.woocommerce-cart table.cart td.product-thumbnail { width:64px; box-sizing:content-box; }
.woocommerce-cart table.cart td.product-thumbnail img { display:block; width:64px; height:auto; border-radius:8px; }
.woocommerce-cart table.cart td.product-remove { width:18px; padding-right:0; box-sizing:content-box; }

/* remove = the old theme's little pixel x in a thin ring, filled on hover */
.woocommerce-cart a.remove, .minicart a.remove {
  display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; width:18px; height:18px; padding:0;
  font-size:0; line-height:0; text-decoration:none; color:var(--ink); background:transparent; border:1px solid var(--line); border-radius:50%;
}
.woocommerce-cart a.remove::before, .minicart a.remove::before {
  content:''; width:7px; height:7px; background:var(--ink);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7'%3E%3Cpath d='M0 0h1v1H0zM6 0h1v1H6zM1 1h1v1H1zM5 1h1v1H5zM2 2h1v1H2zM4 2h1v1H4zM3 3h1v1H3zM2 4h1v1H2zM4 4h1v1H4zM1 5h1v1H1zM5 5h1v1H5zM0 6h1v1H0zM6 6h1v1H6z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7'%3E%3Cpath d='M0 0h1v1H0zM6 0h1v1H6zM1 1h1v1H1zM5 1h1v1H5zM2 2h1v1H2zM4 2h1v1H4zM3 3h1v1H3zM2 4h1v1H2zM4 4h1v1H4zM1 5h1v1H1zM5 5h1v1H5zM0 6h1v1H0zM6 6h1v1H6z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.woocommerce-cart a.remove:hover, .minicart a.remove:hover { background:var(--ink); border-color:var(--ink); }
.woocommerce-cart a.remove:hover::before, .minicart a.remove:hover::before { background:var(--ground); }

/* actions row: coupon left, update cart right (the floats come from woocommerce-layout.css) */
.woocommerce-cart table.cart td.actions { padding:10px 14px; }
.woocommerce-cart table.cart td.actions .coupon { display:flex; align-items:center; gap:8px; }
.woocommerce-cart table.cart td.actions .coupon .input-text {
  box-sizing:border-box; width:130px; height:24px; padding:0 12px; margin:0; text-align:center;
  font:11px Arial, Helvetica, sans-serif; color:var(--ink); background:var(--ground); border:1px solid var(--line); border-radius:999px; outline:none;
}
.woocommerce-cart table.cart td.actions .coupon .input-text::placeholder { color:color-mix(in srgb, var(--ink) 55%, var(--ground)); }

/* totals: the right half, the big button under it */
.cart_totals h2 { font-size:16px; margin:0 0 12px; }
.woocommerce-cart .cart_totals table.shop_table { margin-bottom:14px; }
.woocommerce-cart .cart_totals table.shop_table th { font-weight:700; width:40%; }
.woocommerce-cart .cart_totals table.shop_table td { text-align:right; }
.wc-proceed-to-checkout { margin:0 0 14px; }
.woocommerce-cart .wc-proceed-to-checkout .checkout-button { display:flex; width:100%; height:30px; font-size:12px; margin-bottom:14px; } /* her 10/6: room above paypal's buttons (woocommerce.css gave the old theme 1em, it's off now) */
.woocommerce-cart table.cart td.actions .coupon::before, .woocommerce-cart table.cart td.actions .coupon::after { content:none; } /* woo's clearfix, it'd be a flex item */

/* ===== checkout: billing left, additional info right (woo's col2-set floats), your order + payment full width under them ===== */
.woocommerce-checkout h3 { font-size:16px; margin:0 0 12px; }
.woocommerce-checkout #order_review_heading { clear:both; padding-top:14px; }

/* the coupon line = the blush notice box, its link a soft underline like the breadcrumb's */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info { display:block; }
.woocommerce-checkout a.showcoupon, .woocommerce-privacy-policy-text a { color:inherit; text-decoration:none; border-bottom:1px solid color-mix(in srgb, currentColor 45%, transparent); }
.woocommerce-checkout a.showcoupon:hover, .woocommerce-privacy-policy-text a:hover { border-bottom-color:currentColor; }
.woocommerce-checkout form.checkout_coupon { display:flex; align-items:center; gap:8px; margin:0 0 18px; }
.woocommerce-checkout form.checkout_coupon .form-row { float:none; width:auto; margin:0; padding:0; }
.woocommerce-checkout form.checkout_coupon .clear { display:none; }
.woocommerce-checkout form.checkout_coupon .input-text {
  box-sizing:border-box; width:130px; height:24px; padding:0 12px; margin:0; text-align:center;
  font:11px Arial, Helvetica, sans-serif; color:var(--ink); background:var(--ground); border:1px solid var(--line); border-radius:999px; outline:none;
}

/* fields: 30px pills (the textarea gets the photo corners), bold little labels */
.woocommerce-checkout form .form-row { margin:0 0 12px; padding:0; }
.woocommerce-checkout form .form-row label { font-size:11px; font-weight:700; margin:0 0 4px; }
.woocommerce-checkout form .form-row label .optional { font-weight:400; }
.woocommerce-checkout .woocommerce-input-wrapper { display:block; position:relative; }
.woocommerce-checkout #customer_details .input-text, .woocommerce-checkout #customer_details select {
  box-sizing:border-box; width:100%; height:30px; padding:0 14px; margin:0;
  font:12px Arial, Helvetica, sans-serif; color:var(--ink); background:var(--ground); border:1px solid var(--line); border-radius:999px; outline:none;
}
.woocommerce-checkout #customer_details select { appearance:none; -webkit-appearance:none; padding-right:30px; cursor:pointer; }
.woocommerce-checkout .woocommerce-input-wrapper:has(> select)::after { right:14px; }
.woocommerce-checkout #customer_details textarea.input-text { height:auto; min-height:84px; padding:9px 14px; line-height:1.5; border-radius:12px; resize:vertical; }
.woocommerce-checkout #customer_details .input-text:focus, .woocommerce-checkout #customer_details select:focus, .woocommerce-checkout form.checkout_coupon .input-text:focus { border-color:var(--ink); }
.woocommerce-checkout .input-text::placeholder { color:color-mix(in srgb, var(--ink) 55%, var(--ground)); }

/* your order: the cart's table, amounts on the right */
.woocommerce-checkout table.shop_table { margin-bottom:18px; }
.woocommerce-checkout table.shop_table thead th { padding:8px 14px; font-size:11px; font-weight:700; background:var(--accent); }
.woocommerce-checkout table.shop_table thead tr { background:var(--accent); } /* under the cells too, so no hairline seam where a cell ends on a half pixel */
.woocommerce-checkout table.shop_table tfoot th { font-weight:700; }
.woocommerce-checkout table.shop_table .product-total, .woocommerce-checkout table.shop_table tfoot td { text-align:right; }

/* payment: one thin box, methods on top, the picked method's box in blush, place order full width at the bottom */
.woocommerce-checkout #payment { border:1px solid var(--line); border-radius:12px; }
.woocommerce-checkout #payment ul.payment_methods { list-style:none; margin:0; padding:12px 14px; border-bottom:1px solid var(--line); }
.woocommerce-checkout #payment ul.payment_methods li { margin:0 0 8px; }
.woocommerce-checkout #payment ul.payment_methods li:last-child { margin-bottom:0; }
.woocommerce-checkout #payment ul.payment_methods li > label { display:inline; font-size:12px; font-weight:700; }
.woocommerce-checkout #payment ul.payment_methods li img { height:18px; width:auto; vertical-align:middle; margin-left:4px; }
.woocommerce-checkout #payment input[type="radio"], .woocommerce-checkout #payment input[type="checkbox"] { accent-color:var(--ink); vertical-align:middle; margin:0 6px 0 0; }
.woocommerce-checkout #payment div.payment_box { margin:8px 0 2px; padding:10px 14px; font-size:12px; background:var(--panel); border:1px solid var(--line); border-radius:12px; }
.woocommerce-checkout #payment div.payment_box p { margin:0; }
.woocommerce-checkout #payment div.form-row.place-order { margin:0; padding:14px; }
.woocommerce-checkout .woocommerce-privacy-policy-text p { margin:0 0 8px; font-size:11px; line-height:1.7; }
.woocommerce-checkout #payment p.cr-customer-consent { margin:0 0 8px; font-size:11px; }
.woocommerce-checkout #payment p.cr-customer-consent label { font-weight:400; }
/* her 10/6: the two required boxes above place order, woo's terms box + the EU withdrawal waiver. 11px + regular weight like the review-invite line, the star in ink, no dotted underline */
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper p.form-row, .woocommerce-checkout #payment p.hnm-withdrawal { margin:0 0 8px; padding:0; font-size:11px; line-height:1.7; }
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper p.form-row label, .woocommerce-checkout #payment p.hnm-withdrawal label { font-size:0; font-weight:400; margin:0; }
.woocommerce-checkout #payment abbr.required { text-decoration:none; border:0; }
/* woo's template puts a line break between the box and its words (an extra space the review-invite line doesn't have), so the box row's own text size is 0 and the words carry the 11px. all three lines start at the same spot */
.woocommerce-checkout #payment .place-order label.checkbox { font-size:0; }
.woocommerce-checkout #payment .place-order label.checkbox > span, .woocommerce-checkout #payment .place-order label.checkbox > abbr { font-size:11px; }
.woocommerce-checkout #payment .place-order label.checkbox > abbr { margin-left:3px; }
.woocommerce-checkout #payment .place-order label.checkbox > input { vertical-align:-3px; } /* box centred on the first line of words (measured 0.3px off) */
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-link { color:inherit; text-decoration:none; border-bottom:1px solid color-mix(in srgb, currentColor 45%, transparent); }
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-link:hover { border-bottom-color:currentColor; }
.woocommerce-checkout #payment #place_order { float:none; display:flex; width:100%; height:30px; font-size:12px; margin-top:14px; } /* 14px above the button whichever box row is last (it collapses with the row's 8px), with or without the EU box */
.woocommerce-checkout #order_review > .preview-note { margin:10px 0 0; }

/* ===== thank-you page (/checkout/order-received/): kou up top, then the order. scoped to woo's .woocommerce-order box ===== */
.woocommerce-order .thankyou-logo img { display:block; width:72px; height:72px; margin:4px auto 8px; border:1px solid var(--line); } /* her 10/6: the square hm tile instead of cherub kou, square + thin line like the id card */
.woocommerce-order .woocommerce-thankyou-order-received { font-size:16px; font-weight:700; text-align:center; margin:0 0 20px; }
/* the overview = four little boxes in one thin box, 2 by 2 on phones */
.woocommerce-order ul.woocommerce-order-overview {
  list-style:none; display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; margin:0 0 8px; padding:0;
  background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden;
}
.woocommerce-order ul.woocommerce-order-overview::before, .woocommerce-order ul.woocommerce-order-overview::after { content:none; }
.woocommerce-order ul.woocommerce-order-overview li { margin:0; padding:10px 14px; font-size:11px; text-align:center; background:var(--ground); }
.woocommerce-order ul.woocommerce-order-overview li strong { display:block; margin-top:2px; font-size:13px; }
.woocommerce-order h2 { font-size:16px; margin:26px 0 12px; }
.woocommerce-order table.shop_table { margin-bottom:0; }
.woocommerce-order table.woocommerce-table--order-downloads th, .woocommerce-order table.woocommerce-table--order-downloads td { text-align:center; }
.woocommerce-order table.woocommerce-table--order-downloads .download-product { text-align:left; }
.woocommerce-order table.shop_table td.product-name a, .woocommerce-order table.shop_table td.download-product a { color:inherit; text-decoration:none; border-bottom:1px solid color-mix(in srgb, currentColor 45%, transparent); }
.woocommerce-order table.shop_table td.product-name a:hover, .woocommerce-order table.shop_table td.download-product a:hover { border-bottom-color:currentColor; }
.woocommerce-order address { font-style:normal; line-height:1.7; margin:0; padding:12px 14px; border:1px solid var(--line); border-radius:12px; }
.woocommerce-order address p { margin:0; }

/* ===== product lists: the shop, every category, the brand page (all one woo template, archive-product) ===== */
.woocommerce-products-header__title { font-size:18px; font-weight:700; text-align:center; text-transform:uppercase; margin:0 0 16px; } /* all caps (her 10/5 call): woo prints the category's own name, so every series page gets it */
.woocommerce-result-count { margin:0 0 18px; font-size:11px; line-height:24px; }
/* sort = a header pill, 24px like the cart's, with the little star */
.woocommerce-ordering { position:relative; margin:0 0 18px; }
.woocommerce-ordering::after { right:12px; }
.woocommerce-ordering select {
  appearance:none; -webkit-appearance:none; box-sizing:border-box; height:24px; margin:0; padding:0 30px 0 12px; cursor:pointer; outline:none;
  font:11px Arial, Helvetica, sans-serif; color:var(--ink); background:var(--ground); border:1px solid var(--line); border-radius:999px;
}
.woocommerce-ordering select:focus { border-color:var(--ink); }
/* ratings = five pixel hearts (her 10/5 11pm ask, stars were boring), the filled part in ink, the rest in --line. 1 heart pixel = 1.5px */
.woocommerce-page .star-rating {
  position:relative; display:block; width:60px; height:9px; margin:0 auto 4px; overflow:hidden; font-size:0; background:var(--line);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-0.5 0 8 6' shape-rendering='crispEdges'%3E%3Cpath d='M1 0H3V1H4V0H6V1H7V3H6V4H5V5H4V6H3V5H2V4H1V3H0V1H1Z'/%3E%3C/svg%3E") 0 0 / 12px 9px repeat-x; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-0.5 0 8 6' shape-rendering='crispEdges'%3E%3Cpath d='M1 0H3V1H4V0H6V1H7V3H6V4H5V5H4V6H3V5H2V4H1V3H0V1H1Z'/%3E%3C/svg%3E") 0 0 / 12px 9px repeat-x;
}
.woocommerce-page .star-rating span { position:absolute; top:0; left:0; height:100%; background:var(--ink); }

@media (max-width:768px) {
  .single-product div.product div.images { margin-bottom:20px; }
  .woocommerce-page table.shop_table_responsive tr:nth-child(2n) td { background:none; } /* woo's grey zebra, off */
  .woocommerce-cart table.cart td.product-remove { width:auto; padding-right:14px; }
  .woocommerce-order ul.woocommerce-order-overview { grid-template-columns:repeat(2, 1fr); }
  .woocommerce-order table.woocommerce-table--order-downloads td { text-align:right; }
}

/* ===== empty cart (/cart/ with nothing in it): the blush notice centered, the filled pill back to the shop under it ===== */
.woocommerce-cart .wc-empty-cart-message .cart-empty { justify-content:center; text-align:center; }
.woocommerce-cart .return-to-shop { margin:0; text-align:center; }
/* cherub kou between the notice and the button, same size as on the thank-you page. only the empty cart prints him */
.woocommerce-cart .empty-cart-kou img { display:block; width:120px; height:auto; margin:4px auto 12px; }

/* ===== plain pages (page.php: privacy policy, refunds, any page that isn't woo's): the frilly box, a centered title like the drawer's, her text as she typed it ===== */
body.page:not(.woocommerce-page) .page-logo, body.single-post .page-logo { display:block; width:64px; height:64px; margin:4px auto 12px; border:1px solid var(--line); } /* the home id card's hm tile, square like there */
body.page:not(.woocommerce-page) .entry-title { font-size:18px; font-weight:700; text-align:center; margin:0 0 18px; }
body.page:not(.woocommerce-page) .entry-content h2 { font-size:14px; font-weight:700; margin:22px 0 10px; }
body.page:not(.woocommerce-page) .entry-content p { margin:0 0 14px; }
body.page:not(.woocommerce-page) .entry-content p:empty { min-height:1em; } /* the blank lines she leaves in the editor stay as gaps, like the old theme */
body.page:not(.woocommerce-page) .entry-content a { color:inherit; text-decoration:none; border-bottom:1px solid color-mix(in srgb, currentColor 45%, transparent); }
body.page:not(.woocommerce-page) .entry-content a:hover { border-bottom-color:currentColor; }
body.policy-page .entry-content p, body.policy-page .entry-content li { text-align:justify; } /* policies stay justified, like the old theme */

/* ===== the header cart: woo's count + its mini cart dropdown (the cart widget, refilled by woo after every add) ===== */
.cart-wrap { position:relative; display:inline-flex; }
.head .cart-count { position:absolute; top:-7px; right:-9px; display:flex; align-items:center; justify-content:center; box-sizing:border-box; min-width:14px; height:14px; padding:0 3px; font:700 8px/1 Arial, Helvetica, sans-serif; color:var(--ground); background:var(--ink); border-radius:999px; }
.head .cart-count.empty { display:none; }
.minicart { position:absolute; right:-6px; top:calc(100% + 12px); z-index:60; width:264px; padding:6px 14px 14px; display:none; text-align:left; font-size:11px; line-height:1.5; background:var(--ground); border:1px solid var(--line); border-radius:12px; }
.minicart.open { display:block; }
.minicart .woocommerce-mini-cart__empty-message { margin:8px 0 0; text-align:center; }
.minicart ul.cart_list { list-style:none; margin:0; padding:0; }
.minicart ul.cart_list li { position:relative; display:flex; flex-direction:column; justify-content:center; min-height:60px; padding:10px 26px 10px 0; border-bottom:1px solid var(--line); }
.minicart ul.cart_list li a:not(.remove) { display:block; padding-left:50px; color:inherit; text-decoration:none; }
.minicart ul.cart_list li img { position:absolute; left:0; top:50%; width:40px; height:40px; margin-top:-20px; object-fit:cover; border-radius:8px; }
.minicart .quantity { display:block; margin-top:3px; padding-left:50px; }
.minicart a.remove { position:absolute; top:50%; right:0; margin-top:-9px; }
.minicart .woocommerce-mini-cart__total { display:flex; justify-content:space-between; margin:0; padding:10px 0; }
/* view cart = outline pill, checkout = filled pill, side by side */
.minicart .woocommerce-mini-cart__buttons { display:flex; gap:8px; margin:0; }
.minicart .woocommerce-mini-cart__buttons a { flex:1; display:inline-flex; align-items:center; justify-content:center; height:24px; font-size:11px; color:var(--ink); text-decoration:none; background:var(--ground); border:1px solid var(--line); border-radius:999px; }
.minicart .woocommerce-mini-cart__buttons a.checkout { background:var(--accent); }
[data-theme="heonimoon"] .minicart .woocommerce-mini-cart__buttons a.checkout { background:var(--panel); }
/* woo adds its own "view cart" link next to a button after an ajax add: the dropdown already says it, so it hides (the old theme did too) */
a.added_to_cart { display:none; }
@media (max-width:720px) { .head { position:relative; } .cart-wrap { position:static; } .minicart { left:14px; right:14px; width:auto; top:calc(100% + 8px); } } /* phones: the dropdown spans the header, under it */

/* ===== the coupon bar: a thin dashed pill under the header, every page ===== */
.hnm-offer-bar { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px; width:100%; margin:0; padding:6px 18px; font:inherit; color:var(--ink); cursor:pointer; background:var(--ground); border:1px solid transparent; border-radius:999px; position:relative; }
.offer-line { position:absolute; inset:-1px; width:calc(100% + 2px); height:calc(100% + 2px); overflow:visible; pointer-events:none; }
.offer-line rect { fill:none; stroke:var(--line); stroke-width:1.5; stroke-linecap:round; }
.hnm-offer-bar:hover .hnm-offer-text { text-decoration:underline; text-underline-offset:3px; }
.hnm-offer-spark { font-size:10px; }
.hnm-offer-text { font-size:11px; font-weight:700; letter-spacing:1px; }
@media (max-width:520px) { .hnm-offer-bar { gap:7px; padding:6px 14px; } .hnm-offer-text { font-size:10px; } }

/* ===== the welcome popup: the drawer's frill around it, the page dimmed behind ===== */
.hnm-pop { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:20px; background:color-mix(in srgb, var(--ink) 35%, transparent); opacity:0; transition:opacity .2s ease; }
.hnm-pop.open { opacity:1; }
.hnm-pop-card { width:100%; max-width:340px; padding:34px 28px 26px; text-align:center; font-size:11px; line-height:1.6; transform:translateY(6px); transition:transform .2s ease; }
.hnm-pop.open .hnm-pop-card { transform:none; }
.hnm-pop-card > .hnm-pop-x { position:absolute; top:16px; left:16px; width:11px; height:11px; padding:0; border:0; cursor:pointer; background:var(--ink);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7'%3E%3Cpath d='M0 0h1v1H0zM6 0h1v1H6zM1 1h1v1H1zM5 1h1v1H5zM2 2h1v1H2zM4 2h1v1H4zM3 3h1v1H3zM2 4h1v1H2zM4 4h1v1H4zM1 5h1v1H1zM5 5h1v1H5zM0 6h1v1H0zM6 6h1v1H6z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7'%3E%3Cpath d='M0 0h1v1H0zM6 0h1v1H6zM1 1h1v1H1zM5 1h1v1H5zM2 2h1v1H2zM4 2h1v1H4zM3 3h1v1H3zM2 4h1v1H2zM4 4h1v1H4zM1 5h1v1H1zM5 5h1v1H5zM0 6h1v1H0zM6 6h1v1H6z'/%3E%3C/svg%3E") center / contain no-repeat; }
.hnm-pop-x:hover { opacity:.6; }
.hnm-pop-eyebrow { margin:0 0 10px; font-size:10px; letter-spacing:1.5px; text-transform:uppercase; }
.hnm-pop-logo { display:block; width:40px; height:40px; margin:0 auto 10px; border:1px solid var(--line); } /* the hm tile, small, square like the home id card's */
.hnm-pop-title { margin:0 0 8px; font-size:18px; font-weight:700; line-height:1.3; }
.hnm-pop-sub { margin:0 0 18px; }
.hnm-pop-form { display:flex; flex-direction:column; gap:8px; }
.hnm-pop .hp-field { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; } /* the bot trap, never seen */
.hnm-pop-input { height:30px; padding:0 16px; font:11px Arial, Helvetica, sans-serif; color:var(--ink); text-align:center; background:var(--ground); border:1px solid var(--line); border-radius:999px; outline:none; }
.hnm-pop-input:focus { border-color:var(--ink); }
.hnm-pop-input::placeholder { color:var(--line); }
.hnm-pop-btn { display:inline-flex; align-items:center; justify-content:center; height:30px; padding:0 34px; font:11px Arial, Helvetica, sans-serif; color:var(--ink); text-decoration:none; background:var(--accent); border:1px solid var(--line); border-radius:999px; cursor:pointer; }
[data-theme="heonimoon"] .hnm-pop-btn { background:var(--panel); }
.hnm-pop-fine { margin:14px 0 0; font-size:10px; }
.hnm-pop-err { margin:10px 0 0; font-size:10px; }
.hnm-pop-code { display:inline-block; margin:4px 0 0; padding:7px 18px; font:700 12px Arial, Helvetica, sans-serif; letter-spacing:2px; color:var(--ink); background:var(--ground); border:1px dashed var(--line); border-radius:999px; cursor:pointer; }
.hnm-pop-code:hover, .hnm-pop-code.is-copied { border-style:solid; border-color:var(--ink); }
.hnm-pop-copied { margin:8px 0 16px; font-size:10px; letter-spacing:1.5px; text-transform:uppercase; }