/* ===============================
   Arcadia Instruments — Unified Styles from inline <style>
   Covers: Top, Listing, Product, Cart, Checkout
=============================== */

/* Reset & Base */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;color:#1f2937;background:#fafafa;line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
ul{margin:0;padding:0;list-style:none}
:where(h1,h2,h3){line-height:1.3}

/* Design Tokens */
:root{--brand:#7c3aed;--brand-ink:#fff;--ink:#111827;--muted:#6b7280;--border:#e5e7eb;--surface:#fff;--surface-2:#f3f4f6;--radius:14px;--shadow:0 8px 24px rgba(0,0,0,.08);--container:1100px;--tax-rate:0.1}

/* Header */
header.site-header,header{background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}
.header-inner{max-width:var(--container);margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:800}
.brand-badge{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--brand),#4f46e5);color:#fff;display:grid;place-items:center;box-shadow:var(--shadow)}

/* Search */
.search{flex:1 1 420px;display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:6px 8px 6px 12px}
.search input[type="search"],.search input[type="text"]{flex:1;border:0;background:transparent;padding:8px 6px}
.search button,.search input[type="submit"]{padding:8px 14px;border-radius:999px;border:1px solid var(--border);background:var(--brand);color:var(--brand-ink);font-weight:800;cursor:pointer}

/* Price toggle */
.price-toggle{margin-left:auto;display:inline-grid;grid-auto-flow:column;border:1px solid var(--border);border-radius:999px;overflow:hidden;background:var(--surface-2)}
.price-toggle input{position:absolute;inline-size:1px;block-size:1px;clip:rect(0 0 0 0)}
.price-toggle label{padding:8px 12px;font-size:12px;font-weight:800;color:#374151;cursor:pointer}
#pm-in:checked+label,#pm-ex:checked+label{background:var(--brand);color:var(--brand-ink)}

/* Primary nav */
nav.primary-nav{margin-left:auto}
nav.primary-nav ul{display:flex;gap:18px}
nav.primary-nav a{color:var(--muted);font-weight:600;padding:8px 10px;border-radius:8px}
nav.primary-nav a:hover{color:#111;background:var(--surface-2)}

/* Layout */
.container{max-width:var(--container);margin:24px auto;padding:0 20px;display:grid;grid-template-columns:280px 1fr;gap:24px;align-items:start}
main{display:grid;gap:24px}

/* Breadcrumb */
.breadcrumb{font-size:12px;color:var(--muted);display:flex;gap:8px;align-items:center;margin:6px 0 12px}

/* Sidebar */
aside.sidebar{position:sticky;top:96px;align-self:start;display:grid;gap:16px}
.side-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.side-card h3{margin:0 0 10px;font-size:14px;letter-spacing:.06em;font-weight:800;color:#374151;text-transform:uppercase}
.side-card li a{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:10px;color:#374151}
.side-card li a:hover{background:var(--surface-2)}
.tagcloud a{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;font-size:12px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);margin:0 8px 8px 0}
.side-card li.cat-item a{cursor: default;}
.sidebar .side-card .tagcloud a.tag-cloud-link:hover{background: var(--pill-bg, #f3f4f6);border-color: var(--pill-border, #e5e7eb);outline: none;}

/* Sections */
.section{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.section-header{padding:16px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.section-title{font-size:18px;font-weight:800}

/* Buttons */
.btn,a.btn{display:grid;place-items:center;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:var(--surface-2);font-weight:800;cursor:pointer}
.btn:hover,a.btn:hover{background:white;border-color:lightgray;color:white;}
.btn.primary,a.btn.primary{background:var(--brand);color:var(--brand-ink);border-color:transparent}

/* Slider */
.slider{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--border);background:#000}
.slides{position:relative;aspect-ratio:16/9}
.slider input[type=radio]{position:absolute;inline-size:1px;block-size:1px;opacity:0}
.slide{position:absolute;inset:0;opacity:0;transform:scale(1.02);transition:opacity .6s,transform .6s;background-position:center;background-size:cover;display:grid;place-items:center}
.slide-inner{color:#fff;text-align:center;padding:24px;max-width:80%}
.slide-inner h2{margin:0 0 8px;font-size:clamp(22px,4vw,36px)}
.cta{display:inline-block;padding:10px 16px;background:var(--brand);color:var(--brand-ink);font-weight:700;border-radius:10px;box-shadow:var(--shadow)}
#hero-1:checked~.slides .s1,#hero-2:checked~.slides .s2,#hero-3:checked~.slides .s3{opacity:1;transform:none}
.dots{position:absolute;inset-block-end:12px;inset-inline:0;display:flex;justify-content:center;gap:10px;z-index:2}
.dots label{width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.6);border:2px solid rgba(255,255,255,.8);cursor:pointer}
#hero-1:checked~.dots label[for="hero-1"],#hero-2:checked~.dots label[for="hero-2"],#hero-3:checked~.dots label[for="hero-3"]{background:var(--brand);border-color:#fff}

/* Product Grid */
.product-grid{padding:18px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.product-card{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#fff;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.product-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.product-thumb{aspect-ratio:4/3;background:#f5f5f5;display:grid;place-items:center}
.product-body{padding:12px;display:grid;gap:6px}
.product-name{font-weight:700}
.price{font-weight:900}

/* Blog cards */
.blog{padding:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.post{background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.post-thumb{aspect-ratio:16/9;background:#eef2ff;display:grid;place-items:center;font-weight:800;color:#4f46e5}
.post-body{padding:12px;display:grid;gap:6px}
.post-meta{color:var(--muted);font-size:12px}

/* Product Detail */
.product{width: calc(100% - 30px); padding: 0 15px}
.gallery{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:12px}
.gallery-main{aspect-ratio:4/3;background:#f5f5f5;border-radius:10px;display:grid;place-items:center;margin-bottom:10px}
.gallery-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.gallery-thumbs img{border:1px solid var(--border);border-radius:8px;cursor:pointer}
.info{display:grid;gap:8px}
.badges{display:flex;gap:8px}
.badge{font-size:12px;padding:4px 8px;border-radius:999px;background:#eef2ff;border:1px solid #c7d2fe;color:#3730a3}
.sku{font-size:12px;color:var(--muted)}
.rating{font-size:14px;color:#f59e0b}
.price-xl{font-weight:900;font-size:24px}
.options{display:grid;gap:10px}
.options .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.options select,.options input[type="number"]{padding:8px;border:1px solid var(--border);border-radius:10px}
.buy-actions{display:flex;gap:8px}
.buy-actions .btn{height:42px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}
.tabs{display:flex;gap:8px;border-bottom:1px solid var(--border);padding:0 16px}
.tab{padding:10px 12px;border:1px solid var(--border);border-bottom:0;border-radius:10px 10px 0 0;background:var(--surface-2);cursor:pointer}
.tab[aria-selected="true"]{background:#fff;font-weight:800}
.tabpanel{padding:16px}
.spec-table{width:100%;border-collapse:collapse}
.spec-table th,.spec-table td{padding:10px;border-bottom:1px solid var(--border);text-align:left}
.spec-table th{width:28%;color:#374151;font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

/* Listing (filters/toolbar) */
.toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.toolbar-left{display:flex;gap:8px;align-items:center}
.view-toggle{display:inline-grid;grid-auto-flow:column;gap:0;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface-2)}
.view-toggle button{padding:8px 10px;border:0;background:transparent;cursor:pointer}
.select,select{padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:#fff}
.filter-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px}
.filter-card h3{margin:0 0 8px;font-size:14px;letter-spacing:.06em;color:#374151;text-transform:uppercase}
.group{display:grid;gap:8px}
.check{display:flex;gap:8px;align-items:center}
.range{display:grid;gap:6px}
.minmax{display:flex;gap:8px}
.minmax input{flex:1;padding:8px;border:1px solid var(--border);border-radius:10px}
.tag-cloud{display:flex;flex-wrap:wrap;gap:8px}
.tag-check{position:absolute;inline-size:1px;block-size:1px;clip:rect(0 0 0 0)}
.tag{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;font-size:12px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);cursor:pointer}
.tag-check:checked+.tag{background:#eef2ff;border-color:#c7d2fe;color:#3730a3;box-shadow:inset 0 0 0 2px #e0e7ff}
.list-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.list .list-grid{grid-template-columns:1fr}
.list .product-card{flex-direction:row}
.list .product-thumb{width:280px;flex:0 0 280px}
.list .product-body{grid-template-columns:1fr auto;align-items:center}
.pager{display:flex;gap:8px;justify-content:center;margin:8px 0}
.pager a,.pager button{min-width:36px;height:36px;display:grid;place-items:center;border-radius:10px;border:1px solid var(--border);background:#fff;cursor:pointer}
.pager .current{background:var(--brand);color:var(--brand-ink);border-color:transparent}

/* Tables (cart & spec) */
table{width:100%;border-collapse:collapse}
th,td{padding:12px;border-bottom:1px solid var(--border);text-align:left}
th{font-size:12px;color:#374151;text-transform:uppercase;letter-spacing:.06em}

/* Cart */
.cart{}
.line{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center}
.thumb{width:96px;height:72px;border:1px solid var(--border);border-radius:10px;display:grid;place-items:center;background:#f5f5f5;overflow:hidden}
.name{font-weight:800}
.meta{font-size:12px;color:var(--muted)}
.qty{display:flex;gap:6px;align-items:center}
.qty input{width:70px;padding:8px;border:1px solid var(--border);border-radius:10px}
.del{background:transparent;border:0;color:#ef4444;cursor:pointer}
.cart-actions{padding:12px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.summary{padding:16px;gap:12px}
.summary h2{margin:0 0 6px;font-size:16px}
.summary .row{display:flex;justify-content:space-between;align-items:center}
.summary .total{font-size:20px;font-weight:900}
.summary .note{font-size:12px;color:var(--muted)}
.coupon{display:flex;gap:8px}
.coupon input{flex:1;padding:8px;border:1px solid var(--border);border-radius:10px}
.info{padding:16px;display:grid;gap:8px;color:#374151}
.info small{color:var(--muted)}

/* Checkout (input/review/complete) */
.section-title{font-size:16px;margin:0 0 10px}
form{display:grid;gap:16px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:grid;gap:6px}
label{font-size:12px;color:#374151}
input,select,textarea{padding:10px;border:1px solid var(--border);border-radius:10px;background:#fff}
.hint{font-size:12px;color:var(--muted)}
.methods{display:grid;gap:8px}
.row{display:flex;align-items:center;gap:8px}
.summary-card .row{display:flex;justify-content:space-between;align-items:center}
.order-hero,.hero{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;display:grid;gap:8px;text-align:center}
.order-no{font-weight:900;font-size:18px}

/* Footer */
footer{margin-top:32px;border-top:1px solid var(--border);background:var(--surface)}
.footer-inner{max-width:var(--container);margin:0 auto;padding:20px;color:var(--muted);display:flex;justify-content:space-between}

/* Responsive */
@media (max-width:1200px){.related-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:1024px){.container{grid-template-columns:240px 1fr}.product-grid{grid-template-columns:repeat(3,1fr)}.list-grid{grid-template-columns:repeat(2,1fr)}.product{grid-template-columns:1fr;gap:16px}}
@media (max-width:900px){.cart{grid-template-columns:1fr}.summary-card{order:-1}.grid{grid-template-columns:1fr}}
@media (max-width:800px){.container{grid-template-columns:1fr}aside.sidebar{position:static;order:2}main{order:1}.product-grid{grid-template-columns:repeat(2,1fr)}.blog{grid-template-columns:1fr}}
@media (max-width:760px){.list .product-thumb{width:40%}}
@media (max-width:600px){.list-grid{grid-template-columns:1fr}}
@media (max-width:480px){.product-grid{grid-template-columns:1fr}.related-grid{grid-template-columns:1fr}}

/* Admin Bar offset */
@media screen and (min-width:783px){.admin-bar header.site-header{top:32px}}
@media screen and (max-width:782px){.admin-bar header.site-header{top:46px}}

/* サイドバー: カテゴリ件数右寄せ */
.side-card li a {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 12px;
  border-radius:10px;
  color:#374151;
}
.side-card li a .count {
  color: var(--muted);
  font-size: 12px;
}

/* 共通: ピル風UI */
.sidebar .side-card ul,
.sidebar .side-card .tagcloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* li をピル化 */
.sidebar .side-card ul li,
.sidebar .side-card .tagcloud a {
  margin: 0; /* gapで調整するので不要 */
}

/* a をピルの本体に */
.sidebar .side-card ul li > a,
.sidebar .side-card .tagcloud a {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .35em .75em;
  border-radius: 9999px;
  background: var(--pill-bg, #f3f4f6);   /* 好みで */
  color: var(--pill-fg, #111827);
  text-decoration: none;
  line-height: 1.2;
  border: 1px solid var(--pill-border, #e5e7eb);
  font-size: 13px;
  white-space: nowrap; /* タグ名の途中改行を防ぐ */
}

/* hover/focus */
.sidebar .side-card ul li > a:hover,
.sidebar .side-card .tagcloud a:hover,
.sidebar .side-card ul li > a:focus-visible,
.sidebar .side-card .tagcloud a:focus-visible {
  background: var(--pill-bg-hover, #eef2ff);
  border-color: var(--pill-border-hover, #c7d2fe);
  outline: none;
}

/* 件数をバッジっぽく */
.sidebar .side-card .count {
  display: inline-block;
  min-width: 1.6em;
  padding: .1em .5em;
  border-radius: 9999px;
  background: var(--pill-badge-bg, #111827);
  color: var(--pill-badge-fg, #fff);
  font-size: 12px;
  line-height: 1.1;
}

/* カテゴリの子ULは非表示（フラット化） */
.sidebar .side-card ul ul {
  display: none !important;
}

/* 多すぎるときは高さ制限＋スクロール（必要なら） */
.sidebar .side-card .brand-list,
.sidebar .side-card ul,
.sidebar .side-card .tagcloud {
  max-height: 320px;      /* 調整OK */
  overflow: auto;
  scrollbar-width: thin;
}

/* 狭幅時はバッジ省略も可（任意） */
@media (max-width: 480px) {
  .sidebar .side-card .count { display: none; }
}

/* secret area */
.secret_wrapper {display: flex; flex-wrap: wrap;}
.secret_text {color: #fafafa}
.secret_checkboxes {display: flex; align-items: center; justify-content: space-between;}
.secret_checkbox {width: 30%; color: #fafafa; cursor:grab} 
.secret_checkbox input { position: absolute; opacity: 0;}

.post-thumb.single-thumb {max-width: 400px; margin: 0 auto; aspect-ratio: 1;}