:root{
  --bg:#0b0d0c;
  --bg-panel:#131615;
  --bg-panel2:#0f1211;
  --line:#262a28;
  --ink:#e9ece9;
  --ink-soft:#8b938e;
  --neon:#39ff8f;
  --neon-dim:#1f6b46;

  /* ---- タイポグラフィ基準（B案 = 旧サイズの約1.2倍） ------------------
     文字サイズは全て rem。rem の基準は下の html{font-size} 1箇所。
     --fs-scale を変えればサイト全体の文字が一括で拡縮する。
       1    = 現行（B案）
       1.08 = さらに一段大きく / 0.84 = 旧サイズ相当
     px値のコメントは --fs-scale:1 かつ既定16pxのときの実寸。 */
  --fs-scale:1;
  --fs-xs:.625rem;      /* 10px  ロゴ下の小文字 */
  --fs-sm:.8125rem;     /* 13px  パンくず/eyebrow/フッター/タグ */
  --fs-ui:.875rem;      /* 14px  ナビ/ボタン/表/キャプション */
  --fs-body:1rem;       /* 16px  本文・仕様表・購入ボタン */
  --fs-lead:1.0625rem;  /* 17px  リード・記事タイトル */
  --fs-h4:1.125rem;     /* 18px  h4相当（カード見出し） */
  --fs-h3:1.1875rem;    /* 19px  h3 */
  --fs-h2:1.5rem;       /* 24px  h2（本文中） */
  --fs-h2-lg:1.75rem;   /* 28px  h2（セクション） */
  --fs-h1:2rem;         /* 32px  h1（商品名） */
  --fs-h1-lg:2.5rem;    /* 40px  h1（ページ見出し） */
  --fs-display:2.75rem; /* 44px  ストーリー見出し */
  /* 見出しは body の 1.8 だと間延びするので個別に詰める */
  --lh-head:1.25;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; font-size:calc(16px * var(--fs-scale));}
body{
  font-family:'Noto Sans JP', sans-serif;
  background-color:var(--bg);
  /* 薄いカーボン柄。既存ヘッダーの縞（45度・タイル12px）と同じ技法で、
     縞の色だけ var(--bg-panel) に強めたもの（比較検討: F案）。 */
  background-image:repeating-linear-gradient(45deg,
    var(--bg-panel) 0px, var(--bg-panel) 6px,
    var(--bg) 6px, var(--bg) 12px);
  color:var(--ink);
  font-size:var(--fs-body);
  line-height:1.8;
}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}

/* header */
header{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 48px;
  background:repeating-linear-gradient(45deg, #101312 0 6px, #0b0d0c 6px 12px);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20;
  flex-wrap:wrap; gap:12px;
}
.brand{display:flex; align-items:center; gap:12px;}
.brand img{height:30px; filter:brightness(0) invert(1);}
.brand small{display:block; font-size:var(--fs-xs); font-weight:400; letter-spacing:.18em; color:var(--ink-soft);}
nav{display:flex; gap:26px; font-size:var(--fs-ui); font-weight:700; letter-spacing:.06em; color:var(--ink-soft); text-transform:uppercase; flex-wrap:wrap;}
nav a{position:relative; padding-bottom:6px;}
nav a:hover{color:var(--neon);}
nav a:hover::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--neon);}
.head-right{display:flex; align-items:center; gap:22px;}
.lang{font-size:var(--fs-sm); color:var(--ink-soft); letter-spacing:.08em;}
.cart{font-size:var(--fs-ui); color:var(--ink); display:flex; align-items:center; gap:6px; border:1px solid var(--line); padding:8px 13px;}
.cart b{color:var(--neon);}

/* header search (submits to the results page on Enter / button click -- no live dropdown) */
.site-search{position:relative;}
.site-search-form{display:flex; align-items:stretch;}
.site-search-input{background:var(--bg-panel); border:1px solid var(--line); border-right:0; color:var(--ink); padding:9px 13px; font-size:var(--fs-ui); width:170px; font-family:inherit;}
.site-search-input:focus{outline:none; border-color:var(--neon);}
.site-search-btn{background:transparent; border:1px solid var(--line); color:var(--ink-soft); padding:0 10px; cursor:pointer; display:flex; align-items:center; transition:border-color .15s, color .15s;}
.site-search-btn:hover{border-color:var(--neon); color:var(--neon);}

/* full search results page (pages/search.html) */
.search-page-form{display:flex; gap:10px; max-width:520px; margin-bottom:32px;}
.search-page-input{flex:1; background:var(--bg-panel); border:1px solid var(--line); color:var(--ink); padding:13px 15px; font-size:var(--fs-body); font-family:inherit;}
.search-page-input:focus{outline:none; border-color:var(--neon);}
.search-page-form button{background:transparent; color:var(--neon); border:1px solid var(--neon); padding:0 26px; font-weight:700; font-size:var(--fs-ui); letter-spacing:.08em; cursor:pointer;}
.search-page-form button:hover{background:var(--neon); color:#04140a;}

/* hero banner slot (home) -- 3-slide carousel: 1 image slide + 2 coded promo slides */
.hero{position:relative; border-bottom:1px solid var(--line);}
/* shared carbon-stripe background (45deg, 6px/12px tile) -- reused by hero + closure-notice + events-wrap so the pattern stays in one place */
.hero, .closure-notice, .events-wrap{background-color:var(--bg); background-image:repeating-linear-gradient(45deg, var(--bg-panel) 0px, var(--bg-panel) 6px, var(--bg) 6px, var(--bg) 12px);}
.hero-slides{position:relative; width:100%; height:clamp(260px, 32vw, 460px); overflow:hidden;}
@media (max-aspect-ratio: 3/4){ .hero-slides{height:520px;} }
.hero-slide{position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .6s ease; display:flex; align-items:center;}
.hero-slide.active{opacity:1; visibility:visible; z-index:1;}
.hero-slide.img-slide{justify-content:center;}
.hero-slide.img-slide img{width:100%; height:100%; object-fit:contain; display:block;}
.hero-slide.promo-slide{background-size:cover; background-position:center;}
.hero-slide.promo-slide::before{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(11,13,12,.94) 0%, rgba(11,13,12,.62) 45%, rgba(11,13,12,.18) 100%);}
.hero-slide-content{position:relative; z-index:1; max-width:640px; padding:0 6%;}
.hero-slide-logo{height:24px; width:auto; filter:brightness(0) invert(1); opacity:.85; margin-bottom:16px; display:block;}
.hero-slide-eyebrow{font-size:var(--fs-sm); letter-spacing:.25em; color:var(--neon); font-weight:700; margin-bottom:10px; text-transform:uppercase;}
.hero-slide-title{font-family:'Oswald', sans-serif; text-transform:uppercase; font-size:clamp(24px, 3vw, 38px); letter-spacing:.03em; color:#fff; line-height:var(--lh-head); margin-bottom:12px;}
.hero-slide-desc{font-size:var(--fs-body); color:rgba(255,255,255,.72); line-height:1.8; margin-bottom:20px; max-width:460px;}
.hero-slide-cta{display:inline-block; border:1px solid var(--neon); color:var(--neon); font-size:var(--fs-ui); letter-spacing:.06em; padding:12px 24px; text-transform:uppercase; transition:background .2s, color .2s;}
.hero-slide-cta:hover{background:var(--neon); color:#04140a;}
@media (max-width:700px){ .hero-slide-desc{display:none;} }
.hero-marks{position:absolute; right:24px; bottom:16px; display:flex; gap:10px; z-index:2;}
.hero-marks span{width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.25); cursor:pointer;}
.hero-marks span.active{background:var(--neon);}

/* closure / seasonal notice bar (home, above hero) -- see closure-notice-manual.txt */
.closure-notice{border-bottom:1px solid var(--line); border-top:2px solid var(--neon); padding:22px 48px;}
.closure-notice-inner{max-width:860px; margin:0 auto;}
.closure-notice-title{font-family:'Oswald', sans-serif; text-transform:uppercase; letter-spacing:.06em; color:var(--neon); font-size:var(--fs-h4); font-weight:700; margin-bottom:10px;}
.closure-notice-body{font-size:var(--fs-body); color:var(--ink-soft); line-height:1.9;}
.closure-notice-body strong{color:var(--ink);}
.closure-notice-sub{margin-top:12px; padding-top:12px; border-top:1px solid var(--line);}
.closure-notice-apology{margin-top:12px;}
@media (max-width:700px){ .closure-notice{padding:18px 24px;} }

/* simple page header banner (interior pages) */
.page-hero{padding:64px 48px 40px; border-bottom:1px solid var(--line); background-color:var(--bg-panel2); background-image:repeating-linear-gradient(45deg, var(--bg-panel) 0px, var(--bg-panel) 6px, var(--bg-panel2) 6px, var(--bg-panel2) 12px);}
.page-hero .eyebrow{font-size:var(--fs-sm); letter-spacing:.25em; color:var(--neon); font-weight:700; margin-bottom:12px;}
.page-hero h1{font-family:'Oswald', sans-serif; text-transform:uppercase; font-size:var(--fs-h1-lg); letter-spacing:.03em; color:#fff; line-height:var(--lh-head);}
.page-hero p{margin-top:12px; max-width:700px; font-size:var(--fs-body); color:var(--ink-soft);}
.crumb{font-size:var(--fs-sm); color:var(--ink-soft); margin-bottom:14px;}
.crumb a{color:var(--neon);}

/* generic section header */
section{padding:56px 48px;}
.section-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:28px; flex-wrap:wrap; gap:8px;}
.section-head h2{font-family:'Oswald', sans-serif; text-transform:uppercase; font-size:var(--fs-h2-lg); letter-spacing:.06em; color:#fff; line-height:var(--lh-head);}
.section-head h2::before{content:"// "; color:var(--neon);}
.section-head a{font-size:var(--fs-ui); color:var(--neon); letter-spacing:.05em;}
.section-head a:hover{text-decoration:underline;}

/* events (background: see shared carbon-stripe rule above, grouped with .hero) */
.events{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.event-card{background:var(--bg-panel); display:flex; text-decoration:none; transition:background .15s;}
.event-card:hover{background:var(--bg-panel2);}
.event-thumb{width:150px; min-width:150px; border-right:1px solid var(--line); overflow:hidden;}
.event-thumb img{width:100%; height:100%; object-fit:cover; filter:grayscale(.3) contrast(1.05);}
.event-body{padding:20px; flex:1;}
.event-date{font-size:var(--fs-sm); color:var(--neon); letter-spacing:.08em;}
.event-title{font-size:var(--fs-h4); font-weight:700; margin:8px 0 8px; color:#fff; line-height:1.5;}
.event-excerpt{font-size:var(--fs-body); color:var(--ink-soft);}
.event-more{display:inline-block; margin-top:10px; font-size:var(--fs-sm); color:var(--neon); letter-spacing:.05em;}
.event-card:hover .event-more{text-decoration:underline;}
@media (max-width:700px){ .events{grid-template-columns:1fr;} }

/* SNS embed (home, between events and new products) */
.sns-section{}
.sns-cols{display:flex; justify-content:center;}
.sns-col{background:var(--bg-panel); padding:24px;}
.sns-col-solo{width:100%; max-width:480px; border:1px solid var(--line);}
.sns-col-head{display:flex; align-items:center; gap:8px; margin-bottom:20px;}
.sns-col-head svg{flex-shrink:0;}
.sns-col-head span{font-family:'Oswald', sans-serif; text-transform:uppercase; font-size:var(--fs-lead); letter-spacing:.06em; color:#fff;}
.sns-col-head a{margin-left:auto; font-size:var(--fs-sm); color:var(--neon); letter-spacing:.05em;}
.sns-col-head a:hover{text-decoration:underline;}
.sns-embeds{display:flex; flex-direction:column; gap:16px;}
.sns-embed-item{background:var(--bg-panel2); border:1px solid var(--line); padding:10px; border-radius:4px;}
.sns-embed-item iframe, .sns-embed-item blockquote{max-width:100% !important;}
.sns-embeds-scroll{height:650px; overflow-y:scroll; padding-right:4px;}
.sns-embeds-scroll::-webkit-scrollbar{width:8px;}
.sns-embeds-scroll::-webkit-scrollbar-track{background:var(--bg-panel2);}
.sns-embeds-scroll::-webkit-scrollbar-thumb{background:var(--line); border-radius:4px;}
.sns-embeds-scroll::-webkit-scrollbar-thumb:hover{background:var(--neon-dim);}
.ig-fallback{display:block; background:#fff; border-radius:4px; padding:16px; text-decoration:none; color:#000;}
.ig-fallback-row{display:flex; align-items:center; gap:12px; margin-bottom:12px;}
.ig-fallback-avatar{width:32px; height:32px; border-radius:50%; background:#f4f4f4; flex-shrink:0;}
.ig-fallback-lines{flex:1;}
.ig-fallback-lines div{background:#f4f4f4; border-radius:4px; height:10px; margin-bottom:6px;}
.ig-fallback-lines div:last-child{width:60%; margin-bottom:0;}
.ig-fallback-cta{color:#3897f0; font-size:var(--fs-body); font-weight:600; text-align:center; padding:16px 0;}

/* new products (home) */
.newprod-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.newprod-card{background:var(--bg-panel); display:flex; flex-direction:column; text-decoration:none; transition:background .15s;}
.newprod-card:hover{background:var(--bg-panel2);}
.newprod-photo{aspect-ratio:1/1; overflow:hidden; background-color:var(--bg-panel2); background-image:repeating-linear-gradient(45deg, var(--bg-panel) 0px, var(--bg-panel) 6px, var(--bg-panel2) 6px, var(--bg-panel2) 12px);}
.newprod-photo img{width:100%; height:100%; object-fit:contain; padding:20px; display:block;}
.newprod-body{padding:20px; flex:1; display:flex; flex-direction:column;}
.newprod-tag{display:inline-block; font-size:var(--fs-sm); color:var(--neon); letter-spacing:.05em; margin-bottom:8px;}
.newprod-name{font-size:var(--fs-h4); font-weight:700; color:#fff; margin-bottom:8px; line-height:1.5;}
.newprod-desc{font-size:var(--fs-body); color:var(--ink-soft); line-height:1.8; flex:1; margin-bottom:14px;}
.newprod-btn{align-self:flex-start; font-size:var(--fs-sm); color:var(--neon); letter-spacing:.05em;}
.newprod-card:hover .newprod-btn{text-decoration:underline;}
@media (max-width:900px){ .newprod-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .newprod-grid{grid-template-columns:1fr;} }

/* new products strip */
.promo-strip{margin:0 48px; border:1px solid var(--line); overflow:hidden; display:block;}
.promo-strip img{width:100%; display:block;}

/* product grid */
.grid-primary{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-bottom:1px;}
.grid-secondary{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-top:none;}
.tile{background-color:var(--bg-panel); background-image:repeating-linear-gradient(45deg, var(--line) 0px, var(--line) 6px, var(--bg-panel) 6px, var(--bg-panel) 12px); aspect-ratio:1/1; position:relative; overflow:hidden;}
.tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; transition:opacity .2s;}
.tile:hover img{opacity:.85;}
.tile-name{position:relative; z-index:1; height:100%; display:flex; align-items:flex-end; padding:16px; font-size:var(--fs-ui); font-weight:700; letter-spacing:.08em; color:#fff; text-transform:uppercase; line-height:1.45; background:linear-gradient(0deg, rgba(0,0,0,.75), transparent 60%);}
.tile:hover .tile-name{color:var(--neon);}
@media (max-width:800px){ .grid-primary,.grid-secondary{grid-template-columns:repeat(2,1fr);} }
.tile.blank{display:flex; align-items:flex-end;}

/* brand story */
.story{
  background:#070808; color:#fff; text-align:center; padding:100px 48px; position:relative; overflow:hidden;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.story-illust{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); opacity:.14; width:640px; z-index:0;}
.story-content{position:relative; z-index:1;}
.story .eyebrow{font-size:var(--fs-sm); letter-spacing:.25em; color:var(--neon); font-weight:700;}
.story h2{font-family:'Oswald', sans-serif; text-transform:uppercase; font-size:var(--fs-display); margin:16px 0 22px; line-height:1.2;}
.story p{max-width:600px; margin:0 auto 8px; font-size:var(--fs-body); color:var(--ink-soft);}
.story .cta{margin-top:26px; display:inline-block; color:var(--neon); border:1px solid var(--neon-dim); padding:14px 32px; font-size:var(--fs-ui); letter-spacing:.1em;}
.story .cta:hover{background:var(--neon); color:#04140a; border-color:var(--neon);}

/* footer */
footer{background:#0b0d0c; padding:48px 48px 32px; text-align:center; border-top:1px solid var(--line);}
.socials{display:flex; justify-content:center; gap:14px; margin-bottom:26px;}
.socials a{width:32px; height:32px; border:1px solid var(--line); border-radius:50%; color:var(--ink-soft); display:flex; align-items:center; justify-content:center; transition:border-color .15s, color .15s;}
.socials a:hover{border-color:var(--neon); color:var(--neon);}
.socials svg{display:block;}
.foot-links-row{display:flex; justify-content:center; gap:20px; flex-wrap:wrap; font-size:var(--fs-sm); color:var(--ink-soft); margin-bottom:14px;}
.foot-links-row.secondary a{color:var(--neon);}
.copyright{font-size:var(--fs-sm); color:#5c645f; margin-top:8px;}

/* scroll-to-top */
.top-btn{
  position:fixed; right:28px; bottom:28px; width:44px; height:44px; border-radius:50%;
  background:var(--neon); color:#04140a; display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:700; z-index:30;
}

/* prose / content pages */
.prose{max-width:820px;}
.prose h2{font-family:'Oswald', sans-serif; text-transform:uppercase; font-size:var(--fs-h2); letter-spacing:.04em; color:#fff; margin:32px 0 14px; line-height:var(--lh-head);}
.prose h2:first-child{margin-top:0;}
.prose h3{font-size:var(--fs-h4); font-weight:700; color:var(--neon); margin:22px 0 8px; line-height:1.5;}
.prose p{font-size:var(--fs-body); color:var(--ink-soft); margin-bottom:12px;}
.prose ul, .prose ol{margin:0 0 12px 22px; font-size:var(--fs-body); color:var(--ink-soft);}
.prose li{margin-bottom:5px;}
.prose dl{margin-bottom:10px; font-size:var(--fs-body); color:var(--ink-soft); border-top:1px solid var(--line);}
.prose dt{padding:12px 0 2px; font-weight:700; color:#fff;}
.prose dd{padding-bottom:10px; border-bottom:1px solid var(--line);}
.prose table{width:100%; border-collapse:collapse; font-size:var(--fs-ui); margin-bottom:16px;}
.prose table td, .prose table th{border:1px solid var(--line); padding:10px 12px; text-align:left; color:var(--ink-soft);}

/* card grids: staff / dealer / blog / best-sellers */
.card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.simple-card{background:var(--bg-panel); padding:20px;}
@media (max-width:900px){ .card-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .card-grid{grid-template-columns:1fr;} }

.staff-card{background:var(--bg-panel); border:1px solid var(--line); padding:20px; display:flex; gap:16px;}
.staff-photo{width:80px; height:80px; min-width:80px; object-fit:cover; border:1px solid var(--line);}
.staff-name{font-size:var(--fs-h4); font-weight:700; color:#fff; margin-bottom:6px;}
.staff-bio{font-size:var(--fs-ui); color:var(--ink-soft);}
.staff-link{display:inline-block; margin-top:8px; font-size:var(--fs-sm); color:var(--neon);}

.region-block{margin-bottom:32px;}
.region-block h3{font-family:'Oswald', sans-serif; text-transform:uppercase; font-size:var(--fs-h3); color:var(--neon); letter-spacing:.05em; margin-bottom:12px; border-bottom:1px solid var(--line); padding-bottom:8px;}
.dealer-item{font-size:var(--fs-ui); color:var(--ink-soft); padding:12px 0; border-bottom:1px dashed var(--line);}
.dealer-item b{color:#fff; display:block; margin-bottom:2px; font-size:var(--fs-body);}

.price-tag{display:inline-block; font-size:var(--fs-body); color:var(--neon); font-weight:700; margin-top:6px;}

.blog-item{padding:16px 0; border-bottom:1px solid var(--line);}
.blog-date{font-size:var(--fs-sm); color:var(--neon); letter-spacing:.05em;}
.blog-title{font-size:var(--fs-lead); font-weight:700; color:#fff; margin-top:6px; line-height:1.5;}

.form-note{background:var(--bg-panel); border:1px solid var(--line); padding:20px; font-size:var(--fs-body); color:var(--ink-soft); margin-bottom:20px;}
.field-row{margin-bottom:14px;}
.field-row label{display:block; font-size:var(--fs-ui); color:var(--ink-soft); margin-bottom:6px; letter-spacing:.04em;}
.field-row input, .field-row textarea{width:100%; background:var(--bg-panel); border:1px solid var(--line); color:var(--ink); padding:11px 13px; font-size:var(--fs-body); font-family:inherit;}
.btn-submit{margin-top:6px; background:transparent; color:var(--neon); border:1px solid var(--neon); padding:14px 32px; font-weight:700; font-size:var(--fs-ui); letter-spacing:.1em; cursor:pointer;}

/* ---- スマホ幅 -------------------------------------------------------
   本文を一段落とすと同時に、左右余白を48px→22pxに詰める。
   これで文字を大きくしても1行の文字数が現状より減らない。 */
@media (max-width:700px){
  :root{ --fs-body:.9375rem; --fs-lead:1rem; }   /* 15px / 16px */
  header{padding:16px 22px;}
  section{padding:40px 22px;}
  .page-hero{padding:44px 22px 30px;}
  .page-hero h1{font-size:1.875rem;}             /* 30px */
  .section-head h2{font-size:1.5rem;}            /* 24px */
  .prose h2{font-size:1.3125rem;}                /* 21px */
  .story{padding:64px 22px;}
  .story h2{font-size:2.125rem;}                 /* 34px */
  .promo-strip{margin:0 22px;}
  footer{padding:40px 22px 28px;}
}

/* category filter chips (freshwater/saltwater/etc product pages) */
.category-chips{display:flex; flex-wrap:wrap; gap:8px;}
.cat-chip{background:var(--bg-panel); border:1px solid var(--line); color:var(--ink-soft); padding:9px 16px; font-size:var(--fs-ui); cursor:pointer; transition:border-color .15s, color .15s;}
.cat-chip:hover{border-color:var(--neon); color:var(--ink);}
.cat-chip.active{border-color:var(--neon); color:var(--neon);}
.shop-tile.filtered-out{display:none;}

/* product grid tiles (category listing pages) -- compact, easy-to-browse size */
.shop-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line);}
.shop-tile{background:var(--bg-panel); display:flex; flex-direction:column; text-decoration:none; transition:background .15s;}
.shop-tile:hover{background:var(--bg-panel2);}
.shop-tile-img{aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; overflow:hidden; background-color:var(--bg-panel2); background-image:repeating-linear-gradient(45deg, var(--bg-panel) 0px, var(--bg-panel) 6px, var(--bg-panel2) 6px, var(--bg-panel2) 12px); padding:12px;}
.shop-tile-img img{width:100%; height:100%; object-fit:contain;}
.shop-tile-name{padding:11px 13px 3px; font-size:var(--fs-ui); font-weight:700; color:#fff; line-height:1.5;}
.shop-tile-price{padding:0 13px 13px; font-size:var(--fs-ui); color:var(--neon);}


/* product detail pages (shop-items/)
   layout: row1 = photo (left) + spec info (right), row2 = other-products
   sidebar spanning the full width below. */
.product-layout{display:flex; flex-direction:column; gap:40px;}
.product-main{display:grid; grid-template-columns:380px minmax(280px,560px); gap:32px; align-items:start;}
@media (max-width:860px){ .product-main{grid-template-columns:1fr;} }
.product-photo{background:var(--bg-panel); border:1px solid var(--line); aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.product-photo img{width:100%; height:100%; object-fit:contain;}
.product-info .cat-tag{font-size:var(--fs-sm); letter-spacing:.1em; color:var(--neon); text-transform:uppercase; margin-bottom:10px; display:block;}
.product-info h1{font-family:'Oswald', sans-serif; text-transform:uppercase; font-size:var(--fs-h1); letter-spacing:.02em; color:#fff; margin-bottom:14px; line-height:var(--lh-head);}
.product-info .price-tag{font-size:var(--fs-h2);}
.spec-list{margin:18px 0; font-size:var(--fs-body); color:var(--ink-soft); border-top:1px solid var(--line);}
.spec-list div{display:flex; gap:24px; padding:11px 0; border-bottom:1px solid var(--line);}
.spec-list span:first-child{color:var(--ink); font-weight:700; width:88px; flex-shrink:0;}
.buy-box{margin-top:22px;}
.buy-box .buy-label{font-size:var(--fs-ui); color:var(--ink-soft); margin-bottom:10px; letter-spacing:.04em;}
.yh-btn{display:flex; align-items:center; justify-content:space-between; gap:14px; background:#ff0033; color:#fff; padding:16px 20px; margin-bottom:8px; font-size:var(--fs-body); font-weight:700; letter-spacing:.02em; border:1px solid #ff0033;}
.yh-btn:hover{background:#d40029;}
.yh-btn .yh-price{font-size:var(--fs-body); font-weight:700; white-space:nowrap;}
.no-stock-note{font-size:var(--fs-ui); color:var(--ink-soft); margin-top:8px;}
.related-note{margin-top:26px; font-size:var(--fs-ui); color:var(--ink-soft); border-top:1px solid var(--line); padding-top:16px;}

/* product sidebar (other products in this category, shown below the main row)
   -- carbon-stripe background (45deg, 6px/12px tile), same technique as
   .product-photo used before it was made plain; individual .sidebar-item
   cards stay unstriped (see PHOTO_NOIMG_CSS / sidebar-item img below). */
.product-sidebar{background-color:var(--bg-panel); background-image:repeating-linear-gradient(45deg, var(--line) 0px, var(--line) 6px, var(--bg-panel) 6px, var(--bg-panel) 12px); border:1px solid var(--line); padding:20px; display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:16px;}
.product-sidebar h3{grid-column:1/-1; font-family:'Oswald', sans-serif; text-transform:uppercase; font-size:var(--fs-ui); letter-spacing:.06em; color:#fff; margin-bottom:4px;}
.sidebar-back{grid-column:1/-1; display:block; font-size:var(--fs-sm); color:var(--neon); margin-bottom:6px; padding-bottom:12px; border-bottom:1px solid var(--line);}
.sidebar-item{display:flex; flex-direction:column; align-items:center; gap:6px; padding:0; border-bottom:none; font-size:var(--fs-sm); color:var(--ink-soft); text-align:center;}
.sidebar-item img{width:100%; aspect-ratio:1/1; height:auto; min-width:0; object-fit:contain; background:#0b0d0c; border:1px solid var(--line);}
.sidebar-item span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width:100%;}
.sidebar-item:hover{color:var(--ink);}
.sidebar-item.active{color:var(--neon); font-weight:700;}
.sidebar-item.active img{border-color:var(--neon);}

/* product photo gallery thumbnails + color chip list */
.product-photo-col{display:flex; flex-direction:column; align-items:center; gap:10px;}
.photo-thumbs{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; max-width:380px;}
.photo-thumbs .thumb{width:56px; height:56px; object-fit:contain; background:var(--bg-panel); border:1px solid var(--line); cursor:pointer; padding:4px; box-sizing:border-box;}
.photo-thumbs .thumb:hover{border-color:var(--neon);}
.photo-thumbs .thumb.active{border-color:var(--neon); border-width:2px;}
.color-chips{display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 8px;}
.color-chip{background:var(--bg-panel); border:1px solid var(--line); padding:6px 12px; font-size:var(--fs-sm); color:var(--ink-soft); white-space:nowrap;}

/* product photo lightbox (click to enlarge) */
.product-photo img.zoomable{cursor:zoom-in;}
.lightbox-overlay{display:none; position:fixed; inset:0; background:rgba(4,6,5,.92); z-index:200; align-items:center; justify-content:center; cursor:zoom-out;}
.lightbox-overlay.active{display:flex;}
.lightbox-overlay img{max-width:92vw; max-height:92vh; object-fit:contain; cursor:default; box-shadow:0 0 40px rgba(0,0,0,.6);}
.lightbox-close{position:absolute; top:20px; right:28px; font-size:34px; line-height:1; color:#fff; cursor:pointer; font-family:Arial, sans-serif;}
.lightbox-close:hover{color:var(--neon);}

/* placeholder for products without a photo yet */
.photo-noimg{width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:var(--fs-ui); color:var(--ink-soft); border:1px dashed var(--line);}
.sidebar-noimg{width:100%; aspect-ratio:1/1; background:#0b0d0c; border:1px solid var(--line); display:block;}