/* core styles (from v17.3 fixed) */
html, body{ margin:0; padding:0; }
*{ box-sizing:border-box; } img{ max-width:100%; display:block; } button{ border:none; background:none; }
:root{ --bg:#fafafa; --text:#222; --muted:#8e8e93; --line:#e0e0e0; --accent:#c00000; --card:#fff; }
body{ background:var(--bg); color:var(--text); font-family:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic","Meiryo",sans-serif; line-height:1.6; padding-top:64px !important; }

.header{ position:fixed; top:0; left:0; width:100%; height:64px; z-index:999;
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.08); padding:0 12px; }
.header .left, .header .center, .header .right{ display:flex; align-items:center; gap:12px; }
.header .center{ margin:0 auto; gap:8px; }
.logo-img{ width:28px; height:28px; border-radius:50%; background:#c00; }
.logo-text{ font-weight:700; font-size:16px; letter-spacing:.02em; }

.container{ width:100%; max-width:1200px; margin:0 auto; }
.catnav{ background:#fff; border-bottom:1px solid var(--line); }
.catnav .inner{ display:flex; gap:14px; overflow-x:auto; padding:8px 12px; }
.catnav a{ white-space:nowrap; font-size:14px; color:#333; text-decoration:none; padding:6px 10px; border-radius:999px; }
.catnav a:hover{ background:#f6f6f6; }

.search{ padding:12px; }
.search input{ width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px; font-size:14px; }

.hero{ position:relative; overflow:hidden; }
.hero-track{ display:flex; gap:10px; padding-inline:6vw; transition:transform .5s ease; will-change:transform; }
.hero-slide{ flex:0 0 84vw; user-select:none; border-radius:14px; overflow:hidden; }
.hero-slide img{ width:100%; height:25vh; max-height:260px; object-fit:cover; border-radius:14px; }
.hero-dots{ position:absolute; bottom:10px; left:0; right:0; display:flex; gap:6px; justify-content:center; }
.hero-dot{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.7); outline:1px solid rgba(0,0,0,.1); }
.hero-dot.active{ background:#fff; }
.hero-arrow{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.35); color:#fff; width:36px; height:36px; border-radius:999px; display:flex; align-items:center; justify-content:center; }
.hero-arrow.left{ left:14px; } .hero-arrow.right{ right:14px; }

.section{ padding:16px 12px 4px; }
.section h2{ font-size:16px; font-weight:700; margin:0 0 10px; }

.topics ul{ list-style:none; padding:0; margin:0 12px; border-top:1px solid var(--line); }
.topics li{ display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--line); font-size:14px; }
.topics time{ color:var(--muted); font-size:12px; }

.grid{ display:grid; gap:12px; grid-template-columns: repeat(3, 1fr); }

.card{ background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.card .thumb{ background:#e5e5e5; aspect-ratio:1/1; background-size:cover; background-position:center; }
.card .meta{ padding:8px; }
.card .title{ font-size:14px; font-weight:700; line-height:1.4; }
.subtitle{ font-size:12px; color:#666; margin-top:2px; line-height:1.3; }
.card .meta a{ color:inherit; text-decoration:none; }
.card .meta a:hover{ text-decoration:underline; }
.card .price{ margin-top:6px; font-weight:700; color: var(--accent); }

.tags{ font-size:11px; color:#444; margin:4px 0; display:flex; flex-wrap:wrap; gap:6px; }
.tags .geo,.tags .type{ display:flex; align-items:center; gap:4px; padding:2px 6px; background:#f6f6f6; border:1px solid #e6e6e6; border-radius:6px; }
.tags .type{ font-weight:600; }

.footer{ text-align:center; color:var(--muted); font-size:12px; padding:24px 12px 40px; }
.breadcrumbs{ font-size:12px; color:#666; padding: 10px 12px 0; }
.breadcrumbs a{ color:#666; text-decoration:none; }
.breadcrumbs span{ margin:0 6px; color:#aaa; }

.shrine-hero{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px; }
.shrine-hero .name{ font-size:20px; font-weight:700; margin: 0 0 10px; }
.shrine-hero .main-img{ background:#eee; border-radius:10px; aspect-ratio: 16/9; }
.shrine-hero .thumbs{ display:flex; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; gap:8px; margin-top:8px; padding-bottom:6px; -webkit-overflow-scrolling:touch; }
.shrine-hero .thumbs::-webkit-scrollbar{ height:6px; }
.shrine-hero .thumbs::-webkit-scrollbar-thumb{ background:#d0d0d0; border-radius:99px; }
.shrine-hero .thumb{ width:72px; height:72px; flex:0 0 auto; background:#ddd; border-radius:8px; outline:1px solid #ccc; cursor:pointer; }
.shrine-hero .thumb.active{ outline:2px solid var(--accent); }
.shrine-hero .address{ margin-top:10px; font-size:14px; color:#444; }
.shrine-hero .desc{ margin-top:10px; font-size:14px; color:#333; line-height:1.7; }

/* Product page additions */
.product-title{ font-size:20px; font-weight:700; margin:0 0 10px; padding:0 12px; }
.product-card{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px; }
.product-media{ background:#eee; border-radius:10px; aspect-ratio: 4/3; }
.product-desc{ margin-top:12px; color:#333; line-height:1.8; }
.price-row{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top:14px; }
.price-row .price{ font-size:18px; font-weight:700; color:var(--accent); }
.btns{ display:flex; gap:10px; }
.btn{ padding:10px 14px; border-radius:10px; font-weight:700; cursor:pointer; }
.btn-primary{ background:var(--accent); color:#fff; }
.btn-secondary{ background:#f4f4f4; border:1px solid #e6e6e6; color:#222; }
.btn:active{ transform: translateY(1px); }

/* tag links (already) */
.tags a{ display:inline-flex; align-items:center; gap:4px; padding:2px 6px; background:#f6f6f6; border:1px solid #e6e6e6; border-radius:6px; color:#444; text-decoration:none; font-size:11px; }
.tags a:hover{ background:#eee; }