/*
Theme Name:   Storefront Child - Office Net Enterprise
Theme URI:    https://www.ofc-net.com/
Description:  オフィスネットエンタープライズ株式会社 オンラインショップ用のStorefront子テーマ。法人向けOA機器・消耗品販売に合わせたデザイン調整を含みます。
Author:       Office Net Enterprise
Template:     storefront
Version:      1.1.0
Text Domain:  storefront-ofcnet
*/

/* ==========================================================================
   ブランドカラー・書体の設定（ここを変えるだけで全体の色味を調整できます）
   ========================================================================== */
:root {
	/* カラー */
	--onc-ink:        #2b5666;  /* ダークティール：見出し・フッター */
	--onc-ink-soft:   #3d7288;  /* ティールの明るめ：ホバーなど */
	--onc-accent:     #48a2be;  /* ティールブルー：ボタン・強調（現サイトの文字色） */
	--onc-accent-dark:#35809a;  /* ティールの濃いめ：ボタンホバー */
	--onc-bg:         #f2f8fa;  /* ページ背景：うっすら水色 */
	--onc-card:       #ffffff;  /* 商品カード背景 */
	--onc-border:     #c0dfe9;  /* 罫線：現サイトの帯の水色 */
	--onc-text:       #2b2b2b;  /* 本文 */
	--onc-text-muted: #6f6f6f;  /* 補足テキスト */

	/* 書体 */
	--onc-font-body:    "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
	--onc-font-heading: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;

	/* 角丸・影 */
	--onc-radius: 8px;
	--onc-shadow: 0 2px 10px rgba(43, 86, 102, 0.10);
	--onc-shadow-hover: 0 6px 18px rgba(43, 86, 102, 0.18);
}

/* ==========================================================================
   全体
   ========================================================================== */
body {
	background-color: var(--onc-bg);
	color: var(--onc-text);
	font-family: var(--onc-font-body);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--onc-font-heading);
	color: var(--onc-ink);
	letter-spacing: 0.02em;
}

a {
	color: var(--onc-ink-soft);
}

a:hover {
	color: var(--onc-accent);
}

/* ==========================================================================
   ヘッダー（濃紺ベース・会社サイトの顔）
   ========================================================================== */
.site-header {
	background-color: #ffffff;
	border-bottom: 3px solid var(--onc-border);
}

.site-branding .site-title a,
.site-header .site-title a {
	color: var(--onc-ink);
	font-family: var(--onc-font-heading);
	font-weight: 700;
}

.site-branding .site-description {
	color: var(--onc-text-muted);
}

/* メインナビゲーション */
.main-navigation ul li a,
.site-header-cart .cart-contents,
.site-header .menu-toggle {
	color: var(--onc-ink);
}

.main-navigation ul li a:hover,
.site-header-cart .cart-contents:hover {
	color: var(--onc-accent);
}

.main-navigation ul.menu > li.current-menu-item > a {
	border-bottom: 2px solid var(--onc-accent);
}

/* ドロップダウンメニュー */
.main-navigation ul.menu ul,
.main-navigation ul.nav-menu ul {
	background-color: #ffffff;
	border: 1px solid var(--onc-border);
}

/* カートアイコンの数量バッジ */
.site-header-cart .cart-contents .count {
	background-color: var(--onc-accent);
	color: #fff;
}

/* ヘッダーの「マイページ」リンク */
.onc-header-account-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	margin-right: 16px;
	color: var(--onc-ink);
	font-size: 0.9rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.onc-header-account-link:hover {
	color: var(--onc-accent);
}

.onc-header-account-link::before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b5666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

/* 検索バー */
.site-search .widget_product_search input[type="search"] {
	border-radius: var(--onc-radius);
	border: 1px solid var(--onc-border);
}

/* ==========================================================================
   ボタン
   ========================================================================== */
.button,
button,
input[type="button"],
input[type="submit"],
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.wc-block-components-button {
	background-color: var(--onc-accent);
	color: #ffffff;
	border-radius: 6px;
	border: none;
	font-weight: 700;
	letter-spacing: 0.03em;
	transition: background-color 0.15s ease;
}

.button:hover,
button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
	background-color: var(--onc-accent-dark);
	color: #ffffff;
}

/* カートに追加ボタン（一覧内） */
ul.products li.product .button {
	width: 100%;
	text-align: center;
	margin-top: 0.5em;
}

/* ==========================================================================
   商品一覧（カード型）
   ========================================================================== */
ul.products li.product {
	background-color: var(--onc-card);
	border: 1px solid var(--onc-border);
	border-radius: var(--onc-radius);
	padding: 1.2em 1.2em 1.4em;
	box-shadow: var(--onc-shadow);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

ul.products li.product:hover {
	box-shadow: var(--onc-shadow-hover);
	transform: translateY(-2px);
}

/* 元画像のサイズがバラバラでもカードの高さを揃えるため、
   サムネイル枠を固定の高さにして画像は object-fit で中央収まりにする */
ul.products li.product img {
	display: block;
	width: 100%;
	height: 200px;
	object-fit: contain;
	border-radius: 4px;
	background-color: #e6f2f7;
}

@media (max-width: 568px) {
	ul.products li.product img {
		height: 150px;
	}
}

ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--onc-font-heading);
	font-size: 1rem;
	font-weight: 700;
	color: var(--onc-ink);
	line-height: 1.5;
	min-height: 3em; /* タイトルの行数差でカード高さが揃わないのを防ぐ */
}

/* 品番バッジ（functions.php で出力しているSKU表示） */
.onc-sku-badge {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--onc-ink-soft);
	background-color: #e6f2f7;
	border: 1px solid var(--onc-border);
	border-radius: 4px;
	padding: 0.15em 0.6em;
	margin-bottom: 0.4em;
	font-feature-settings: "tnum"; /* 数字を等幅に */
}

/* 中古品バッジ */
.onc-used-badge {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: #8a5a00;
	background-color: #fff3cd;
	border: 1px solid #e8c468;
	border-radius: 4px;
	padding: 0.15em 0.6em;
	margin: 0 0.5em 0.4em 0;
}

/* 価格 */
ul.products li.product .price,
.woocommerce div.product p.price {
	color: var(--onc-ink);
	font-weight: 700;
	font-size: 1.1rem;
	font-feature-settings: "tnum";
}

ul.products li.product .price del {
	color: var(--onc-text-muted);
	font-weight: 400;
}

ul.products li.product .price ins {
	color: var(--onc-accent);
	text-decoration: none;
}

/* セールバッジ */
.onsale {
	background-color: var(--onc-ink);
	color: #fff;
	border-radius: 4px;
	font-weight: 700;
}

/* WooCommerceブロック（カート等の関連商品表示）が独自に出す「セール」バッジは
   PHP側のフック削除が効かないため、CSSで非表示にする */
.wc-block-components-product-sale-badge,
.wc-block-grid__product-onsale {
	display: none !important;
}

/* ==========================================================================
   商品詳細ページ
   ========================================================================== */
.woocommerce div.product .product_title {
	font-family: var(--onc-font-heading);
	color: var(--onc-ink);
}

.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--onc-text);
}

.woocommerce div.product .product_meta .sku_wrapper {
	display: inline-block;
	background-color: #e6f2f7;
	border-radius: 4px;
	padding: 0.2em 0.7em;
	font-weight: 700;
	color: var(--onc-ink-soft);
}

/* 商品詳細ページの価格表示（一覧より大きく、希望小売価格があれば併記） */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	display: block;
	font-size: 2rem;
	line-height: 1.4;
	margin: 0.6em 0;
}

.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
	display: inline-block;
	font-size: 0.55em;
	font-weight: 400;
	color: var(--onc-text-muted);
	opacity: 1;
	margin-right: 0.6em;
}

.woocommerce div.product p.price del::before {
	content: "希望小売価格 ";
	font-size: 0.85em;
}

.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
	color: var(--onc-accent);
	text-decoration: none;
	font-weight: 700;
}

@media (max-width: 568px) {
	.woocommerce div.product p.price,
	.woocommerce div.product span.price {
		font-size: 1.5rem;
	}
}

/* ==========================================================================
   カテゴリー個別ページ：用途タグごとのグループ表示
   ========================================================================== */

/* ページ内ジャンプ時に固定ヘッダー分の余白を確保しつつ滑らかにスクロール */
html {
	scroll-behavior: smooth;
}

.onc-cat-jumpnav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0 0 34px;
}

.onc-cat-jumpnav a {
	text-decoration: none;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--onc-ink-soft);
	background-color: #fff;
	border: 1px solid var(--onc-border);
	border-radius: 20px;
	padding: 6px 18px;
	transition: all 0.15s ease;
}

.onc-cat-jumpnav a:hover {
	background-color: var(--onc-ink);
	border-color: var(--onc-ink);
	color: #fff;
}

.onc-cat-group {
	margin-bottom: 44px;
	scroll-margin-top: 90px;
}

.onc-cat-group-title {
	font-size: 1.15rem;
	color: var(--onc-ink);
	margin: 0 0 16px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--onc-border);
	scroll-margin-top: 90px;
}

.onc-cat-group-count {
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--onc-text-muted);
	margin-left: 0.3em;
}

/* メーカー商品ページリンク */
.onc-manufacturer-link {
	margin: 0.8em 0 1.2em;
}

.onc-manufacturer-link a {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--onc-ink-soft);
	text-decoration: none;
	border-bottom: 1px solid var(--onc-border);
	padding-bottom: 0.15em;
}

.onc-manufacturer-link a:hover {
	color: var(--onc-accent);
	border-color: var(--onc-accent);
}

/* ヤマトJITBOXチャーター便の注意書き（大型商品ページ） */
.onc-jitbox-notice {
	margin: 0.8em 0 1.2em;
	padding: 0.7em 1em;
	background-color: #fff8e6;
	border-left: 3px solid #d9a441;
	color: var(--onc-text);
	font-size: 0.85rem;
	line-height: 1.6;
}

/* フッター「ご利用ガイド」セクション（暗いフッター内で目立つ明るいパネルにする） */
.onc-footer-guide {
	background-color: var(--onc-card);
	color: var(--onc-ink);
	border-radius: var(--onc-radius);
	padding: 20px 24px;
	margin: 24px 0;
}

.onc-footer-guide-title {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--onc-text-muted);
	margin: 0 0 12px;
	text-transform: uppercase;
}

.onc-footer-guide-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.onc-footer-guide-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	color: var(--onc-ink);
	text-decoration: none;
	font-size: 0.92rem;
	font-weight: 700;
}

.onc-footer-guide-link:hover {
	color: var(--onc-accent);
	text-decoration: underline;
}

.onc-footer-guide-link::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b5666' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h9l5 5v15a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M8 12h8M8 16h8M8 20h5'/%3E%3C/svg%3E");
}

/* タブ */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--onc-accent);
}

/* ==========================================================================
   パンくず・お知らせ
   ========================================================================== */
.woocommerce-breadcrumb {
	font-size: 0.85rem;
	color: var(--onc-text-muted);
}

.woocommerce-message,
.woocommerce-info {
	border-top-color: var(--onc-ink);
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--onc-ink);
}

/* ==========================================================================
   カート・チェックアウト
   ========================================================================== */
.woocommerce-cart table.cart,
.woocommerce table.shop_table {
	background-color: var(--onc-card);
	border: 1px solid var(--onc-border);
	border-radius: var(--onc-radius);
}

#payment .payment_methods > li,
#payment .place-order {
	background-color: #f7fbfc;
}

/* ==========================================================================
   フッター
   ========================================================================== */
.site-footer {
	background-color: var(--onc-ink);
	color: rgba(255, 255, 255, 0.85);
}

.site-footer a {
	color: #ffffff;
}

.site-footer a:hover {
	color: #c0dfe9;
}

.site-footer .widget .widget-title {
	color: #ffffff;
}

.site-info {
	color: rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   スマートフォン向け微調整
   ========================================================================== */
@media (max-width: 568px) {
	ul.products li.product {
		padding: 1em;
	}

	ul.products li.product .woocommerce-loop-product__title {
		min-height: 0;
	}
}

/* ==========================================================================
   セクション共通（トップページ front-page.php ／ 固定ページ本文で使用）
   ========================================================================== */
.onc-section {
	padding: 70px 24px;
	background-color: #ffffff;
}

.onc-section-alt {
	background-color: var(--onc-bg);
	border-top: 1px solid var(--onc-border);
	border-bottom: 1px solid var(--onc-border);
}

.onc-section-inner {
	max-width: 1100px;
	margin: 0 auto;
	text-align: center;
}

/* 箇条書きは中央寄せだと行ごとに点の位置がバラつくため、
   ブロックとしては中央に、リスト内は左寄せで揃える */
.onc-section-inner ul,
.onc-section-inner ol {
	display: inline-block;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
}

.onc-eyebrow {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.25em;
	color: var(--onc-accent);
	margin-bottom: 0.6em;
}

.onc-section-title {
	font-size: 1.8rem;
	margin-bottom: 0.6em;
}

.onc-section-title::after {
	content: "";
	display: block;
	width: 48px;
	height: 3px;
	background-color: var(--onc-ink);
	margin: 0.5em auto 0;
}

.onc-section-text {
	max-width: 640px;
	margin: 0 auto 1.8em;
	color: var(--onc-text);
}

/* カテゴリーチップ */
.onc-cat-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-bottom: 34px;
}

.onc-cat-chips a {
	text-decoration: none;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--onc-ink-soft);
	background-color: #fff;
	border: 1px solid var(--onc-border);
	border-radius: 20px;
	padding: 6px 18px;
	transition: all 0.15s ease;
}

.onc-cat-chips a:hover {
	background-color: var(--onc-ink);
	border-color: var(--onc-ink);
	color: #fff;
}

/* 流れる商品カルーセル */
.onc-marquee {
	overflow: hidden;
	margin: 0 -24px 34px;
	padding: 6px 0 12px;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.onc-marquee-track {
	display: flex;
	gap: 18px;
	width: max-content;
	animation: onc-flow 45s linear infinite;
}

.onc-marquee:hover .onc-marquee-track {
	animation-play-state: paused; /* ホバーで一時停止 */
}

@keyframes onc-flow {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* 動きを減らす設定のユーザーには横スクロールで見せる */
@media (prefers-reduced-motion: reduce) {
	.onc-marquee { overflow-x: auto; }
	.onc-marquee-track { animation: none; }
}

.onc-marquee-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 210px;
	flex-shrink: 0;
	background-color: var(--onc-card);
	border: 1px solid var(--onc-border);
	border-radius: var(--onc-radius);
	padding: 14px;
	text-decoration: none;
	box-shadow: var(--onc-shadow);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.onc-marquee-item:hover {
	box-shadow: var(--onc-shadow-hover);
	transform: translateY(-2px);
}

.onc-marquee-thumb {
	width: 100%;
	margin-bottom: 10px;
}

.onc-marquee-thumb img {
	width: 100%;
	height: 130px;
	object-fit: contain;
	background-color: #e6f2f7;
	border-radius: 4px;
}

.onc-marquee-name {
	font-family: var(--onc-font-heading);
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--onc-ink);
	line-height: 1.5;
	margin-top: 0.3em;
}

.onc-marquee-price {
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--onc-ink);
	margin-top: 0.4em;
	font-feature-settings: "tnum";
}

.onc-shop-button {
	font-size: 1rem;
	padding: 0.9em 3em;
}

@media (max-width: 568px) {
	.onc-section { padding: 48px 18px; }
	.onc-marquee-item { width: 160px; }
	.onc-marquee-thumb img { height: 100px; }
}

/* セクション画像 */
.onc-photo {
	max-width: 760px;
	margin: 0 auto 1.8em;
}

.onc-photo img {
	width: 100%;
	height: auto;
	border-radius: var(--onc-radius);
	display: block;
}

/* セクションのイラストカード画像は控えめなサイズで */
.onc-photo img {
	max-width: 480px;
	margin: 0 auto;
	border: 1px solid var(--onc-border);
}

/* ==========================================================================
   固定ページ サブコンテンツ（シャープ複合機・店舗のご案内など）
   ========================================================================== */
.onc-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
	margin-top: 20px;
	text-align: left;
}

.onc-card {
	background-color: var(--onc-card);
	border: 1px solid var(--onc-border);
	border-radius: var(--onc-radius);
	padding: 24px;
	box-shadow: var(--onc-shadow);
}

.onc-card-img {
	max-width: 220px;
	height: 220px;
	margin: 0 auto 16px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.onc-card-img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 4px;
	display: block;
}

.onc-card-title {
	font-size: 1.1rem;
	color: var(--onc-ink);
	margin-bottom: 0.3em;
}

.onc-card-spec {
	display: inline-block;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--onc-ink-soft);
	background-color: #e6f2f7;
	border-radius: 4px;
	padding: 0.15em 0.6em;
	margin-bottom: 0.6em;
}

.onc-card-text {
	font-size: 0.9rem;
	color: var(--onc-text);
	margin-bottom: 1em;
}

/* 店舗情報テーブル */
.onc-info-table {
	max-width: 640px;
	margin: 0 auto;
	text-align: left;
	border-top: 1px solid var(--onc-border);
}

.onc-info-table dt {
	padding: 14px 0 2px;
	font-weight: 700;
	color: var(--onc-ink);
	font-size: 0.85rem;
}

.onc-info-table dd {
	margin: 0;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--onc-border);
	color: var(--onc-text);
}

.onc-info-table ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Googleマップ埋め込み（レスポンシブ） */
.onc-map {
	max-width: 890px;
	margin: 0 auto;
	aspect-ratio: 890 / 423;
}

.onc-map iframe {
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: var(--onc-radius);
}

@media (max-width: 568px) {
	.onc-card-img { max-width: 160px; height: 160px; }
}

/* ==========================================================================
   フォーカスリング（クリック時の枠）
   本番サイトと同様、クリック・キーボード操作にかかわらず非表示にする
   ヘッダーメニューなどでブラウザ既定の紫っぽい枠(box-shadow経由)が
   出るケースがあるため、outlineだけでなくbox-shadow等もまとめて無効化する
   ========================================================================== */
a, button, input, select, textarea, summary, [tabindex],
a:focus, a:active, a:focus-visible,
button:focus, button:active, button:focus-visible,
.main-navigation a:focus,
.main-navigation a:active,
.main-navigation a:focus-visible,
.main-navigation ul li a:focus,
.main-navigation ul li a:active {
	outline: none !important;
	box-shadow: none !important;
	border-color: transparent !important;
	-webkit-tap-highlight-color: transparent;
}

/* ==========================================================================
   ショップページ（/shop/）冒頭のカテゴリーチップ・流れるバナー
   ========================================================================== */
.onc-shop-top {
	margin-bottom: 32px;
}

.onc-shop-top .onc-cat-chips {
	margin-bottom: 24px;
}

.onc-shop-top .onc-marquee {
	margin: 0 0 8px;
}

/* ==========================================================================
   ショップページ：カテゴリーごとの横スクロール棚
   ========================================================================== */
.onc-shop-row {
	margin-bottom: 40px;
}

.onc-shop-row-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--onc-border);
}

.onc-shop-row-title {
	font-size: 1.2rem;
	color: var(--onc-ink);
	margin: 0;
}

.onc-shop-row-more {
	flex-shrink: 0;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--onc-ink-soft);
	text-decoration: none;
	white-space: nowrap;
}

.onc-shop-row-more:hover {
	color: var(--onc-accent);
}

.onc-shop-row-wrap {
	position: relative;
}

.onc-shop-row-scroll {
	display: flex;
	gap: 18px;
	overflow-x: auto;
	padding: 4px 4px 12px;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
}

.onc-shop-row-scroll::-webkit-scrollbar {
	height: 6px;
}

.onc-shop-row-scroll::-webkit-scrollbar-thumb {
	background-color: var(--onc-border);
	border-radius: 3px;
}

.onc-shop-row-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid var(--onc-border);
	background-color: var(--onc-card);
	color: var(--onc-ink);
	font-size: 1.4rem;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: var(--onc-shadow);
	transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.onc-shop-row-arrow-prev {
	left: -8px;
}

.onc-shop-row-arrow-next {
	right: -8px;
}

.onc-shop-row-arrow:hover {
	background-color: var(--onc-accent);
	color: #fff;
}

.onc-shop-row-arrow:disabled {
	opacity: 0;
	pointer-events: none;
}

@media (max-width: 568px) {
	.onc-shop-row-arrow {
		width: 32px;
		height: 32px;
		font-size: 1.2rem;
	}
	.onc-shop-row-arrow-prev { left: -4px; }
	.onc-shop-row-arrow-next { right: -4px; }
}

.onc-shop-row-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 200px;
	flex-shrink: 0;
	scroll-snap-align: start;
	background-color: var(--onc-card);
	border: 1px solid var(--onc-border);
	border-radius: var(--onc-radius);
	padding: 14px;
	text-decoration: none;
	box-shadow: var(--onc-shadow);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.onc-shop-row-item:hover {
	box-shadow: var(--onc-shadow-hover);
	transform: translateY(-2px);
}

.onc-shop-row-thumb {
	width: 100%;
	margin-bottom: 10px;
}

.onc-shop-row-thumb img {
	width: 100%;
	height: 130px;
	object-fit: contain;
	background-color: #e6f2f7;
	border-radius: 4px;
	display: block;
}

.onc-shop-row-name {
	font-family: var(--onc-font-heading);
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--onc-ink);
	line-height: 1.5;
	margin-top: 0.3em;
}

.onc-shop-row-price {
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--onc-ink);
	margin-top: 0.4em;
	font-feature-settings: "tnum";
}

@media (max-width: 568px) {
	.onc-shop-row-item { width: 150px; }
	.onc-shop-row-thumb img { height: 100px; }
}