/* ============================================================
 * pc_form.css  -  ginzahanasui.jp / PC goods detail option tables
 *
 * Repaints table.FS2_inputSelection_table and
 * table.FS2_OptionPrice_table in the renewal palette
 * (same tokens as cart-renewal.css).
 *
 * Load AFTER contents_renew.css.
 * No Japanese characters in this file (Shift_JIS safe).
 *
 * palette
 *   gold        #a8964f   gold dark   #8c7c3e
 *   gold pale   #faf6ea   gold line   #e3d9b8
 *   text        #3a3226   text sub    #6f6553
 *   line        #eae5da
 *   pink        #ff2456   pink press  #d90f3f
 *   radius      4px
 *
 * 2026-09  rev.7  (error banner matched to cart-renewal.css)
 * ============================================================ */

/* ---------- table shell ------------------------------------ */

#FS2_body_Goods #FS2_itemlayout_H table.FS2_inputSelection_table,
#FS2_body_Goods #FS2_itemlayout_H table.FS2_OptionPrice_table {
	width: 100%;
	margin: 0 0 18px;
	border-collapse: collapse;
	border-top: 1px solid #e3d9b8;
	border-bottom: 1px solid #e3d9b8;
	font-size: 14px;
	line-height: 1.7;
	color: #3a3226;
	background: #fff;
}

/* ---------- header cells ----------------------------------- */

#FS2_body_Goods #FS2_itemlayout_H table.FS2_inputSelection_table th,
#FS2_body_Goods #FS2_itemlayout_H table.FS2_OptionPrice_table th {
	padding: 14px 16px;
	background: #faf6ea;
	color: #3a3226;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .02em;
	line-height: 1.6;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid #e3d9b8;
	border-right: 1px solid #e3d9b8;
}

/* keep the label column identical in both tables so they line up */
#FS2_body_Goods #FS2_itemlayout_H table.FS2_inputSelection_table th,
#FS2_body_Goods #FS2_itemlayout_H table.FS2_OptionPrice_table th {
	width: 230px;
	white-space: normal;
}

/* single-line rows read better centred */
#FS2_body_Goods #FS2_itemlayout_H table.FS2_inputSelection_table th {
	vertical-align: middle;
}

/* required marker, wrapped by pc_form.js */
#FS2_body_Goods #FS2_itemlayout_H table.FS2_inputSelection_table th .hhReq,
#FS2_body_Goods #FS2_itemlayout_H table.FS2_OptionPrice_table th .hhReq {
	color: #ff2456;
}

/* ---------- data cells ------------------------------------- */

#FS2_body_Goods #FS2_itemlayout_H table.FS2_inputSelection_table td,
#FS2_body_Goods #FS2_itemlayout_H table.FS2_OptionPrice_table td {
	padding: 14px 16px;
	background: #fff;
	color: #3a3226;
	border-bottom: 1px solid #eae5da;
	vertical-align: middle;
}

/* the option cells carry long explanatory text - one step down
   from the base 14px. the select / input keep 14px below.        */
#FS2_body_Goods #FS2_itemlayout_H table.FS2_OptionPrice_table td {
	vertical-align: top;
	font-size: 13px;
	line-height: 1.75;
}

/* last row keeps the outer rule only */
#FS2_body_Goods #FS2_itemlayout_H table.FS2_inputSelection_table tr:last-child th,
#FS2_body_Goods #FS2_itemlayout_H table.FS2_inputSelection_table tr:last-child td,
#FS2_body_Goods #FS2_itemlayout_H table.FS2_OptionPrice_table tr:last-child th,
#FS2_body_Goods #FS2_itemlayout_H table.FS2_OptionPrice_table tr:last-child td {
	border-bottom: 0;
}

/* ---------- form controls ---------------------------------- */

#FS2_body_Goods #FS2_itemlayout_H table.FS2_inputSelection_table select,
#FS2_body_Goods #FS2_itemlayout_H table.FS2_OptionPrice_table select,
#FS2_body_Goods #FS2_itemlayout_H table.FS2_inputSelection_table input[type="text"],
#FS2_body_Goods #FS2_itemlayout_H table.FS2_OptionPrice_table input[type="text"] {
	width: 100%;
	max-width: 460px;
	box-sizing: border-box;
	padding: 10px 12px;
	font-size: 14px;
	line-height: 1.4;
	color: #3a3226;
	background-color: #fff;
	border: 1px solid #cfc6b3;
	border-radius: 4px;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

/* keep the native arrow on selects */
#FS2_body_Goods #FS2_itemlayout_H table.FS2_inputSelection_table select,
#FS2_body_Goods #FS2_itemlayout_H table.FS2_OptionPrice_table select {
	height: auto;
	padding-right: 34px;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238c7c3e' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 12px 8px;
	cursor: pointer;
}

#FS2_body_Goods #FS2_itemlayout_H table.FS2_inputSelection_table select:hover,
#FS2_body_Goods #FS2_itemlayout_H table.FS2_OptionPrice_table select:hover,
#FS2_body_Goods #FS2_itemlayout_H table.FS2_inputSelection_table input[type="text"]:hover,
#FS2_body_Goods #FS2_itemlayout_H table.FS2_OptionPrice_table input[type="text"]:hover {
	border-color: #a8964f;
}

#FS2_body_Goods #FS2_itemlayout_H table.FS2_inputSelection_table select:focus,
#FS2_body_Goods #FS2_itemlayout_H table.FS2_OptionPrice_table select:focus,
#FS2_body_Goods #FS2_itemlayout_H table.FS2_inputSelection_table input[type="text"]:focus,
#FS2_body_Goods #FS2_itemlayout_H table.FS2_OptionPrice_table input[type="text"]:focus {
	border-color: #a8964f;
	box-shadow: 0 0 0 3px rgba(168, 150, 79, .18);
}

/* ---------- notes and images inside cells ------------------ */

#FS2_body_Goods #FS2_itemlayout_H table.FS2_OptionPrice_table td img {
	max-width: 100%;
	height: auto;
	margin: 0 0 10px;
	border-radius: 4px;
}

#FS2_body_Goods #FS2_itemlayout_H table.FS2_OptionPrice_table td font[color="red"],
#FS2_body_Goods #FS2_itemlayout_H table.FS2_inputSelection_table td font[color="red"] {
	color: #ff2456;
}

#FS2_body_Goods #FS2_itemlayout_H table.FS2_OptionPrice_table td font[color="black"] {
	color: #6f6553;
	font-size: 13px;
}

/* ---------- wrapping colour swatches ----------------------- */
/* markup lives in the option description (admin), see the
   snippet in the handover:  ul.hhWrapList > li > img + span     */

#FS2_body_Goods #FS2_itemlayout_H .hhWrapList {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
}

#FS2_body_Goods #FS2_itemlayout_H .hhWrapList li {
	width: 104px;
	margin: 0;
	padding: 0;
	text-align: center;
	list-style: none;
	background: none;
}

#FS2_body_Goods #FS2_itemlayout_H .hhWrapList img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 0 6px;
	border-radius: 4px;
}

#FS2_body_Goods #FS2_itemlayout_H .hhWrapList span {
	display: block;
	font-size: 12px;
	line-height: 1.4;
	color: #6f6553;
}

/* NOTE: the fuda sample box (#mtzCardBox) stays where it was,
   at the top of .FS2_OptionPrice. Its 148px CLS reservation is
   handled by inc_mtz.css and is deliberately not touched here.  */

/* ---------- error banner ----------------------------------- */
/* The shop prints a solid orange bar with centred white text
   (.error_content in system_DesignSettings.css, .error_item for
   the per-item variant). Same treatment the checkout flow got in
   cart-renewal.css, so the item page and the cart read alike.
   !important on the paint properties because the shop's rule may
   carry an id.                                                  */

#FS2_body_Goods .error_content,
#FS2_body_Goods .error_item {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 24px;
	padding: 16px 20px;
	background: #fdf2f5 !important;
	border: 1px solid #f2c9d4 !important;
	border-radius: 4px;
	color: #d90f3f !important;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
	text-align: left;
	word-break: auto-phrase;
}

#FS2_body_Goods .error_content::before,
#FS2_body_Goods .error_item::before {
	content: "!";
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	line-height: 20px;
	border: 2px solid #d90f3f;
	border-radius: 50%;
	text-align: center;
	font-size: 14px;
	font-weight: 700;
}

/* ---------- rows hidden by pc_form.js ---------------------- */

#FS2_body_Goods #FS2_itemlayout_H tr[data-hh-off] {
	display: none;
}