/* 奄美の国産はちみつ — 白・生成り・蜂蜜色・深緑。スマートフォン優先 */
:root {
  --white: #ffffff;
  --kinari: #f7f1e3;
  --kinari-deep: #efe5cf;
  --honey: #c98a12;
  --honey-light: #f3d98b;
  --honey-pale: #fbf0d2;
  --green: #1f3d2b;
  --green-soft: #2f5a40;
  --ink: #2a2620;
  --muted: #6b6255;
  --line: #e2d8c3;
  --danger: #a33a2a;
  --warn-bg: #fff6dc;
  --warn-line: #e8c565;
  --radius: 14px;
  --shadow: 0 6px 24px rgba(42, 38, 32, .08);
  --serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  --sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--kinari); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.8; }
img, svg { max-width: 100%; display: block; }
a { color: var(--green); }
a:hover { color: var(--honey); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.4; letter-spacing: .04em; color: var(--green); }
h1 { font-size: 1.6rem; margin: .2em 0 .5em; }
h2 { font-size: 1.3rem; margin: 2rem 0 .8rem; }
h3 { font-size: 1.05rem; margin: 1.4rem 0 .5rem; }
p { margin: 0 0 1em; }
.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 760px; }
main { padding-bottom: 48px; min-height: 60vh; }

/* テスト表示（必ず目に入る位置） */
.test-banner { background: var(--green); color: #fff; font-size: .82rem; text-align: center; padding: 6px 12px; line-height: 1.5; }
.test-banner strong { color: var(--honey-light); }

/* ヘッダー */
.site-header { background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; backdrop-filter: blur(6px); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--green); }
.brand-mark { width: 34px; height: 34px; flex: none; }
.brand-name { font-family: var(--serif); font-size: 1.02rem; letter-spacing: .08em; line-height: 1.2; }
.brand-name small { display: block; font-family: var(--sans); font-size: .62rem; color: var(--muted); letter-spacing: .12em; }
.nav { display: none; gap: 22px; font-size: .9rem; }
.nav a { text-decoration: none; color: var(--ink); }
.nav a:hover { color: var(--honey); }
.header-actions { display: flex; align-items: center; gap: 6px; }
.cart-link { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: var(--green); text-decoration: none; }
.cart-link:hover { background: var(--kinari); }
.cart-count { position: absolute; top: 4px; right: 2px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--honey); color: #fff; font-size: .7rem; line-height: 19px; text-align: center; font-weight: 700; }
.cart-count[hidden] { display: none; }
.menu-btn { width: 44px; height: 44px; border: 0; background: none; color: var(--green); border-radius: 50%; cursor: pointer; }
.menu-btn:hover { background: var(--kinari); }
.drawer { display: none; background: #fff; border-bottom: 1px solid var(--line); }
.drawer.open { display: block; }
.drawer a { display: block; padding: 14px 16px; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); }
@media (min-width: 860px) {
  .nav { display: flex; }
  .menu-btn, .drawer { display: none !important; }
  .site-header .wrap { height: 72px; }
}

/* ヒーロー */
.hero { background: linear-gradient(180deg, var(--white) 0%, var(--kinari) 100%); padding: 28px 0 8px; overflow: hidden; }
.hero .wrap { display: grid; gap: 18px; align-items: center; }
.hero-eyebrow { font-size: .78rem; letter-spacing: .3em; color: var(--honey); margin-bottom: .4rem; }
.hero h1 { font-size: 1.5rem; line-height: 1.55; margin: 0 0 .6rem; }
@media (min-width: 400px) { .hero h1 { font-size: 1.75rem; } }
.hero-lead { color: var(--muted); font-size: .98rem; }
.hero-visual { max-width: 340px; margin: 0 auto; width: 100%; }
@media (min-width: 860px) {
  .hero { padding: 56px 0 24px; }
  .hero .wrap { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  .hero h1 { font-size: 2.5rem; }
}

/* ボタン */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 26px; border-radius: 999px; border: 1.5px solid var(--green); background: var(--green); color: #fff; font: inherit; font-weight: 600; letter-spacing: .06em; text-decoration: none; cursor: pointer; transition: background .15s, transform .05s; }
.btn:hover { background: var(--green-soft); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn-honey { background: var(--honey); border-color: var(--honey); }
.btn-honey:hover { background: #b37a0d; }
.btn-ghost { background: transparent; color: var(--green); }
.btn-ghost:hover { background: var(--white); color: var(--green); }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { background: #cfc7b6; border-color: #cfc7b6; color: #fff; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* 商品カード */
.grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 860px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; border: 1px solid transparent; }
a.card:hover { border-color: var(--honey-light); color: inherit; }
.card-media { background: var(--honey-pale); aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; position: relative; }
.card-body { padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.card-title { font-family: var(--serif); color: var(--green); font-size: .98rem; line-height: 1.5; }
.card-price { font-weight: 700; font-size: 1.05rem; }
.card-price small { font-weight: 400; color: var(--muted); font-size: .72rem; }
.card.is-unavailable .card-media { filter: grayscale(.6); opacity: .75; }
.badge { display: inline-block; font-size: .7rem; padding: 2px 10px; border-radius: 999px; background: var(--honey-pale); color: #8a5b00; border: 1px solid var(--honey-light); width: fit-content; }
.badge-out { background: #f1e7e4; color: var(--danger); border-color: #e3c7c0; }
.badge-soon { background: #e8efe9; color: var(--green); border-color: #c8d8cc; }
.status-ribbon { position: absolute; top: 10px; left: 10px; }
.feature { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); display: grid; gap: 0; overflow: hidden; margin: 8px 0 28px; }
.feature .card-media { aspect-ratio: 4 / 3; }
.feature-body { padding: 20px 18px 24px; }
.feature-body .price { font-size: 1.5rem; font-weight: 700; margin: 4px 0 12px; }
@media (min-width: 860px) { .feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .feature .card-media { aspect-ratio: auto; min-height: 380px; } .feature-body { padding: 40px; } }

/* 仮画像 */
.placeholder-img { position: relative; width: 78%; max-width: 360px; margin: 0 auto; }
.placeholder-img svg { width: 100%; height: auto; }
.placeholder-tag { position: absolute; bottom: 8px; right: 8px; background: rgba(31,61,43,.82); color: #fff; font-size: .62rem; padding: 2px 8px; border-radius: 6px; letter-spacing: .04em; }

/* 3つの点 */
.points { display: grid; gap: 14px; margin: 8px 0 12px; }
.point { background: var(--white); border-radius: var(--radius); padding: 18px; border-left: 4px solid var(--honey); }
.point h3 { margin-top: 0; }
.point p { margin: 0; color: var(--muted); font-size: .94rem; }
@media (min-width: 860px) { .points { grid-template-columns: repeat(3, 1fr); } }

/* 商品詳細 */
.breadcrumb { font-size: .8rem; color: var(--muted); padding: 14px 0 4px; }
.breadcrumb a { color: var(--muted); }
.detail { display: grid; gap: 22px; }
.detail-media { background: var(--honey-pale); border-radius: var(--radius); aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; position: relative; }
.detail-price { font-size: 1.7rem; font-weight: 700; margin: .2rem 0; }
.detail-price small { font-size: .8rem; color: var(--muted); font-weight: 400; }
.stock { font-size: .88rem; color: var(--green); }
.stock.unknown { color: #8a5b00; }
.buy-box { background: var(--white); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); margin: 14px 0; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: #fff; }
.qty button { width: 46px; height: 46px; border: 0; background: none; font-size: 1.3rem; color: var(--green); cursor: pointer; }
.qty button:disabled { color: #c9c0ae; cursor: default; }
.qty output, .qty span { min-width: 40px; text-align: center; font-weight: 700; }
.buy-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.buy-row .btn { flex: 1; min-width: 180px; }
@media (min-width: 860px) { .detail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; padding-top: 12px; } .detail-media { position: sticky; top: 96px; } }

/* 表 */
.table { width: 100%; border-collapse: collapse; background: var(--white); border-radius: var(--radius); overflow: hidden; font-size: .92rem; }
.table th, .table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { width: 38%; background: #fbf8f0; color: var(--green); font-weight: 600; }
.table tr:last-child th, .table tr:last-child td { border-bottom: 0; }
.table-wide th { width: auto; }
.num { text-align: right; white-space: nowrap; }
.table-scroll { overflow-x: auto; }
.pending { display: inline-block; font-size: .68rem; padding: 0 7px; border-radius: 6px; background: var(--warn-bg); border: 1px solid var(--warn-line); color: #7a5800; margin-left: 6px; vertical-align: middle; white-space: nowrap; }

/* お知らせ */
.notice { border-radius: var(--radius); padding: 14px 16px; margin: 14px 0; font-size: .92rem; background: var(--white); border: 1px solid var(--line); }
.notice-warn { background: var(--warn-bg); border-color: var(--warn-line); }
.notice-danger { background: #fbecea; border-color: #e3b5ad; color: #6e2318; }
.notice-green { background: #edf3ee; border-color: #c8d8cc; }
.notice strong { color: inherit; }
.caution { border: 2px solid var(--honey); background: var(--honey-pale); border-radius: var(--radius); padding: 12px 16px; font-weight: 700; color: #6b4600; }

/* カート */
.cart-list { display: grid; gap: 12px; }
.cart-item { display: grid; grid-template-columns: 72px 1fr; gap: 12px; background: var(--white); border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow); }
.cart-item .thumb { background: var(--honey-pale); border-radius: 10px; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.cart-item .thumb .placeholder-tag { display: none; }
.cart-item-name { font-family: var(--serif); color: var(--green); }
.cart-item-controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.link-btn { background: none; border: 0; color: var(--muted); text-decoration: underline; cursor: pointer; font: inherit; font-size: .85rem; padding: 8px 4px; }
.summary { background: var(--white); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.summary dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 0 0 12px; }
.summary dt { color: var(--muted); }
.summary dd { margin: 0; text-align: right; font-weight: 600; }
.summary dt.total, .summary dd.total { font-size: 1.15rem; color: var(--ink); font-weight: 700; border-top: 1px solid var(--line); padding-top: 10px; }
.cart-layout { display: grid; gap: 18px; }
@media (min-width: 860px) { .cart-layout { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; } .summary { position: sticky; top: 96px; } }

/* フォーム */
.form { display: grid; gap: 14px; }
.field label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: 4px; }
.field .req { color: var(--danger); font-size: .75rem; margin-left: 4px; }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font: inherit; color: var(--ink); }
.field textarea { min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--honey-light); border-color: var(--honey); }
.field .hint { font-size: .78rem; color: var(--muted); margin-top: 2px; }
.field-row { display: grid; gap: 14px; }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }
.form-error { color: var(--danger); font-size: .9rem; font-weight: 600; }
.steps { display: flex; gap: 6px; font-size: .78rem; margin: 6px 0 16px; }
.steps span { flex: 1; text-align: center; padding: 6px 0; border-bottom: 3px solid var(--line); color: var(--muted); }
.steps span.on { border-color: var(--honey); color: var(--ink); font-weight: 700; }

/* FAQ */
.faq details { background: var(--white); border-radius: var(--radius); margin-bottom: 10px; padding: 0 16px; border: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 14px 0; font-weight: 600; color: var(--green); list-style: none; }
.faq summary::before { content: "Q. "; color: var(--honey); }
.faq details[open] summary { border-bottom: 1px solid var(--line); }
.faq details p { margin: 12px 0 14px; }

/* フッター */
.site-footer { background: var(--green); color: #e9efe9; padding: 34px 0 24px; font-size: .86rem; }
.site-footer a { color: #e9efe9; text-decoration: none; }
.site-footer a:hover { color: var(--honey-light); }
.footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin: 14px 0 22px; }
@media (min-width: 860px) { .footer-links { grid-template-columns: repeat(4, auto); justify-content: start; gap: 8px 32px; } }
.footer-brand { font-family: var(--serif); font-size: 1.1rem; letter-spacing: .1em; color: #fff; }
.footer-note { color: #b9c7bc; font-size: .76rem; }

/* 管理画面 */
.admin-section { background: var(--white); border-radius: var(--radius); padding: 18px; margin: 16px 0; box-shadow: var(--shadow); }
.admin-section h2 { margin-top: 0; }
.fee-input { width: 100px; min-height: 40px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; text-align: right; }
.blockers li { margin-bottom: 4px; }
.muted { color: var(--muted); }
.small { font-size: .82rem; }
.center { text-align: center; }
.mt0 { margin-top: 0; }
.order-id { font-family: ui-monospace, Menlo, monospace; font-size: 1.05rem; background: var(--kinari); padding: 4px 10px; border-radius: 8px; display: inline-block; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--green); color: #fff; padding: 12px 20px; border-radius: 999px; font-size: .9rem; box-shadow: var(--shadow); z-index: 50; max-width: calc(100% - 32px); }
.toast[hidden] { display: none; }

.mt10 { margin-top: 10px; }
.mt14 { margin-top: 14px; }
.fw-normal { font-weight: 400 !important; }
.btn-block + .btn-block { margin-top: 10px; }

/* 写真（販促資料の画像） */
.photo { margin: 0; width: 100%; height: 100%; position: relative; }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-note { position: absolute; right: 8px; bottom: 6px; font-size: .64rem; color: #fff; background: rgba(0,0,0,.45); padding: 1px 8px; border-radius: 6px; }
.card-media.has-photo, .detail-media.has-photo, .thumb.has-photo { padding: 0; overflow: hidden; }
.detail-media.has-photo { aspect-ratio: 4 / 5; }
.thumb.has-photo { overflow: hidden; }
.hero-visual.has-photo { max-width: none; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 16 / 10; }
.feature .card-media.has-photo { aspect-ratio: 4 / 5; }
@media (min-width: 860px) { .feature .card-media.has-photo { aspect-ratio: auto; } }
.summary dl { column-gap: 0; }
.summary dd { padding-left: 12px; }
.cart-item .thumb.has-photo { display: block; }
.cart-item .thumb.has-photo .photo { aspect-ratio: 1 / 1; }

/* ブランド（いとぐち農園の資料: 生成り・金・墨・リボンの紅） */
:root { --gold: #b8892f; --sumi: #3a2c1c; --ribbon: #c83c5a; }
h1, h2, h3, .card-title, .cart-item-name { color: var(--sumi); }
.brand-logo { width: 40px; height: 40px; border-radius: 50%; flex: none; }
.hero-eyebrow { color: var(--gold); }
.hero h1 .accent { color: var(--gold); }
.point { border-left-color: var(--gold); }
.photo.is-label { background: #fbf6ea; }
.photo.is-label img { object-fit: contain; }
.label-figure { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 2 / 1; }
.estimator { background: var(--white); border-radius: var(--radius); padding: 14px 16px; margin: 0 0 16px; border: 1px solid var(--line); }
.estimator select { width: 100%; min-height: 46px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; font: inherit; background: #fff; margin-top: 4px; }
.estimate { display: grid; grid-template-columns: 1fr auto; column-gap: 0; row-gap: 4px; margin: 10px 0 4px; font-size: .92rem; }
.estimate dd { margin: 0; text-align: right; font-weight: 600; padding-left: 12px; }
.estimate .total { border-top: 1px solid var(--line); padding-top: 6px; font-weight: 700; }
.ribbon-line { height: 3px; background: linear-gradient(90deg, var(--ribbon), var(--gold)); }
.brand-name { white-space: nowrap; font-size: .9rem; }
@media (min-width: 400px) { .brand-name { font-size: 1rem; } }
.detail-media.is-label-media { aspect-ratio: 2 / 1; }
@media (min-width: 860px) { .detail-media.is-label-media { aspect-ratio: 2 / 1; position: static; } }

.ship-fields { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px 4px; margin: 0 0 14px; background: #fff; }
.ship-fields legend { font-weight: 700; padding: 0 6px; }

/* 長い URL・メールアドレスがスマホ幅ではみ出さないよう、表の中では折り返す */
.table td { overflow-wrap: anywhere; }

/* 売上を伸ばす表示（当店のおすすめ・まとめ買い・比較表・送料無料まであと少し） */
.unit-price { margin-top: 2px; }
.save-badge { display: inline-block; background: var(--danger); color: #fff; font-size: .78rem; font-weight: 700; border-radius: 6px; padding: 1px 8px; margin: 4px 0; }
.reco-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.reco-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.reco-media { display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 10px; background: var(--kinari); }
.reco-media img, .reco-media svg { width: 100%; height: 100%; object-fit: cover; }
.reco-media .placeholder-tag { display: none; }
.reco-name { font-size: .88rem; line-height: 1.4; font-weight: 600; }
.reco-price { font-size: 1.05rem; font-weight: 700; color: var(--danger); }
.reco-price small { font-size: .72rem; color: var(--muted); font-weight: 400; }
.btn-small { padding: 6px 12px; font-size: .85rem; min-height: 0; }
.sets-box { background: var(--honey-pale); border: 1px solid var(--honey-light); border-radius: var(--radius); padding: 12px; margin: 14px 0; }
.sets-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.set-option { background: var(--white); border-radius: 10px; padding: 10px; border: 1px solid var(--line); }
.set-name { font-weight: 700; }
.set-price { font-size: 1.1rem; font-weight: 700; color: var(--danger); }
.set-price small { display: block; font-size: .75rem; color: var(--muted); font-weight: 400; }
.compare tr.is-current td { background: var(--honey-pale); font-weight: 700; }
.upsell { background: var(--honey-pale); border: 1px dashed var(--honey); border-radius: 10px; padding: 10px 12px; margin-top: 12px; font-size: .92rem; }
.upsell .btn { margin-left: 6px; }
.free-progress { margin-top: 10px; }
.free-progress .bar { height: 10px; background: var(--kinari-deep); border-radius: 999px; overflow: hidden; }
.free-progress .bar span { display: block; height: 100%; background: var(--honey); }
.b2b { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 16px 12px; margin-top: 24px; }
.sticky-buy { display: none; }
@media (max-width: 720px) {
  .sticky-buy { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; justify-content: space-between; align-items: center; gap: 12px;
    background: var(--white); border-top: 1px solid var(--line); padding: 8px 16px; box-shadow: 0 -4px 16px rgba(42, 38, 32, .08); }
  main { padding-bottom: 88px; }
}

/* 写真のギャラリー */
.gallery-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.gallery-photo { height: auto; }
.gallery-photo img { aspect-ratio: 4 / 5; border-radius: var(--radius); }
.gallery-photo figcaption { margin-top: 4px; }

/* 切り出した写真（100g）は全体を見せる */
.photo.is-contain { background: #fff; }
.photo.is-contain img { object-fit: contain; }

/* 最近チェックした商品（小さく1行） */
.recent { margin-top: 20px; }
.recent h3 { margin: 0 0 6px; color: var(--muted); font-family: var(--sans); }
.recent-row { display: flex; gap: 8px; overflow-x: auto; }
.recent-item { display: flex; align-items: center; gap: 6px; background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px 3px 3px; font-size: .78rem; text-decoration: none; color: var(--ink); white-space: nowrap; }
.recent-item img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.recent-price { color: var(--muted); }

/* 迷惑送信よけの空欄（人には見せない） */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* お住まいの種類 */
.housing { border: 0; padding: 0; margin: 0 0 12px; }
.housing .radio { display: inline-flex; align-items: center; gap: 4px; margin-right: 16px; font-size: .95rem; }