/* ==========================================================
   J Stocker — カラーミー Classic テーマ 共通CSS v2
   貼り付け先：共通 > HTML・CSS > CSS欄（全体を置き換え）
   ========================================================== */

/* ── ベース ── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  background: #f2f0ec;
  color: #222;
  margin: 0;
  padding: 0;
}

a { color: #e03030; text-decoration: none; }
a:hover { opacity: .8; }

img { max-width: 100%; height: auto; display: block; }

/* ── wrapper ── */
.classic {
  width: 100%;
  min-width: 320px;
}

/* ━━━━━━━━━━━━━━━━━━━━
   ヘッダー
━━━━━━━━━━━━━━━━━━━━ */
.l-header {
  background: #111;
  width: 100%;
}

.header-inner {
  width: 100%;
}

/* 上段 */
.header-top {
  background: #111;
  padding: 8px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ロゴ */
.shop-logo {
  margin: 0;
  padding: 0;
  line-height: 1;
}

.shop-logo a {
  text-decoration: none !important;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.logo-text {
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: .5px;
  white-space: nowrap;
}

.logo-sub {
  color: #f5a623;
  font-size: 10px;
  letter-spacing: 1px;
  font-weight: normal;
}

/* 検索 */
.header-search {
  flex: 1;
  min-width: 180px;
  max-width: 440px;
}

.header-search form {
  display: flex;
  margin: 0;
}

.header-search input[type="text"] {
  flex: 1;
  padding: 8px 12px;
  border: none;
  border-radius: 4px 0 0 4px;
  font-size: 13px;
  background: #fff;
  color: #222;
  outline: none;
  -webkit-appearance: none;
}

.search-submit {
  background: #e03030 !important;
  color: #fff !important;
  border: none !important;
  padding: 8px 16px !important;
  border-radius: 0 4px 4px 0 !important;
  font-size: 13px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  white-space: nowrap;
}

.search-submit:hover { background: #c02020 !important; }

/* ヘッダーアクション */
.header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: auto;
  flex-wrap: wrap;
}

.btn-cart {
  background: #f5a623 !important;
  color: #3a2000 !important;
  padding: 6px 14px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  font-weight: bold !important;
  text-decoration: none !important;
  white-space: nowrap;
  display: inline-block;
}

.btn-login {
  background: transparent !important;
  color: #aaa !important;
  border: 1px solid #444 !important;
  padding: 6px 14px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  text-decoration: none !important;
  white-space: nowrap;
  display: inline-block;
}

.btn-reg {
  background: #e03030 !important;
  color: #fff !important;
  padding: 6px 14px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  font-weight: bold !important;
  text-decoration: none !important;
  white-space: nowrap;
  display: inline-block;
}

.btn-login:hover { color: #fff !important; border-color: #888 !important; }
.btn-reg:hover   { background: #c02020 !important; }
.btn-cart:hover  { opacity: .85; }

/* 共通ナビ（2段目） */
.sub-nav {
  background: #222;
  padding: 0 20px;
  display: flex;
  flex-wrap: wrap;
}

.sub-nav a {
  color: #bbb !important;
  font-size: 11px;
  padding: 7px 12px;
  display: block;
  text-decoration: none !important;
}

.sub-nav a:hover { color: #fff !important; }

/* カテゴリナビ（赤帯、3段目） */
.cat-nav {
  background: #e03030;
  padding: 0 16px;
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.cat-nav::-webkit-scrollbar { display: none; }

.cat-nav a {
  color: #fff !important;
  font-size: 12px;
  font-weight: bold;
  padding: 10px 14px;
  display: block;
  text-decoration: none !important;
  white-space: nowrap;
}

.cat-nav a:hover { background: rgba(0,0,0,.2); }
.cat-hot  { background: #c02020 !important; }
.cat-all  { border-right: 1px solid rgba(255,255,255,.25); }

/* 訴求バー（オレンジ） */
.urgency-bar {
  background: #f5a623;
  padding: 7px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.urgency-bar span {
  font-size: 12px;
  color: #3a2000;
  font-weight: bold;
}

.usep { color: #a06000 !important; }

/* ━━━━━━━━━━━━━━━━━━━━
   メインエリア・サイドバー制御
━━━━━━━━━━━━━━━━━━━━ */

/* Classicテーマのサイドバーを非表示 */
#side, .side, #leftNavi, .leftNavi,
#sideMenu, .sideMenu, .sidebar, #sidebar,
.l-side, .side-area {
  display: none !important;
}

/* メインをフル幅に */
.l-main {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  background: #f2f0ec;
}

/* Classicテーマの内部レイアウト上書き */
#container, .container,
#contents, .contents,
#contentsArea, .contentsArea,
#main, .main-area {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  float: none !important;
  padding: 0 !important;
}

/* ━━━━━━━━━━━━━━━━━━━━
   商品一覧・商品カード（全ページ共通）
━━━━━━━━━━━━━━━━━━━━ */
.item_list, .itemList, #itemList,
.product-list, .products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
  gap: 12px !important;
  padding: 16px 20px !important;
  list-style: none !important;
  margin: 0 !important;
}

.item, .itemBox, .item_box,
.product-item {
  background: #fff !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  border: 1px solid #eee !important;
  box-shadow: none !important;
  list-style: none !important;
}

.item img, .itemBox img,
.item_box img {
  width: 100% !important;
  height: 160px !important;
  object-fit: cover !important;
  display: block !important;
}

.item .name, .item_name, .itemName,
.item .item-name {
  font-size: 12px !important;
  color: #333 !important;
  padding: 6px 10px 2px !important;
  line-height: 1.4 !important;
}

.item .price, .item_price, .itemPrice,
.selling_price, .item .item-price {
  font-size: 17px !important;
  font-weight: bold !important;
  color: #e03030 !important;
  padding: 2px 10px 8px !important;
  display: block !important;
}

/* ━━━━━━━━━━━━━━━━━━━━
   ページタイトル
━━━━━━━━━━━━━━━━━━━━ */
.pageTitle, #pageTitle, h1.title,
.page-title {
  font-size: 16px !important;
  font-weight: bold !important;
  color: #111 !important;
  border-left: 4px solid #e03030 !important;
  border-bottom: none !important;
  padding: 0 0 0 10px !important;
  margin: 18px 20px 12px !important;
  background: none !important;
}

/* ━━━━━━━━━━━━━━━━━━━━
   ボタン類（カート・購入）
━━━━━━━━━━━━━━━━━━━━ */
input[type="submit"],
button[type="submit"],
.cartBtn, .addCartBtn,
.cart-btn, .add-to-cart {
  background: #e03030 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 10px 20px !important;
  font-size: 13px !important;
  font-weight: bold !important;
  cursor: pointer !important;
}

input[type="submit"]:hover,
.cartBtn:hover {
  background: #c02020 !important;
}

/* ━━━━━━━━━━━━━━━━━━━━
   フッター
━━━━━━━━━━━━━━━━━━━━ */
.l-footer {
  background: #111 !important;
  padding: 14px 20px !important;
  margin-top: 0;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 8px;
}

.l-footer a {
  color: #666 !important;
  font-size: 11px !important;
  text-decoration: none !important;
}

.l-footer a:hover { color: #aaa !important; }

.footer-copy {
  color: #444;
  font-size: 11px;
  margin: 0;
}

/* ━━━━━━━━━━━━━━━━━━━━
   スマホ対応
━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 640px) {

  .header-top { padding: 8px 12px; gap: 8px; }
  .logo-text { font-size: 16px; }

  .header-search { order: 3; min-width: 100%; max-width: 100%; }

  .header-actions { margin-left: 0; }

  .urgency-bar { padding: 6px 12px; gap: 6px; }
  .usep { display: none; }

  .sub-nav { padding: 0 12px; }
  .sub-nav a { padding: 6px 8px; font-size: 10px; }

  .cat-nav { padding: 0 8px; }

  .item_list, .itemList, #itemList {
    grid-template-columns: repeat(2, 1fr) !important;
    padding: 10px 12px !important;
    gap: 8px !important;
  }

  .item img, .itemBox img {
    height: 120px !important;
  }
}