/* WooCommerce Variation Buttons - Layout & Style Adjustments */

/* ========================================
   Common Layout (Mobile First Base)
   ======================================== */

/* --- Layout Adjustments (Table to Block) --- */
.variations,
.variations tbody,
.variations tr,
.variations th.label,
.variations td.value {
	display: block;
	width: 100%;
	border: none;
	border-spacing: 0;
}

.variations {
	margin-bottom: 20px;
}

.variations tr {
	margin-bottom: 8px;
	/* Spacing between variation rows */
}

.variations th.label {
	padding: 0 0 4px 0;
	font-size: 13px;
	color: #333;
	font-weight: bold;
	text-align: left;
	line-height: 1.4;
	background-color: transparent;
}

.variations td.value {
	padding: 0;
}

/* Hide original dropdown */
.variations_form .variations td.value select.variation-select-hidden {
	display: none;
	width: 0;
	height: 0;
	opacity: 0;
	position: absolute;
	left: -9999px;
}

/* --- Button Container --- */
.variations .variation-buttons {
	display: flex;
	gap: 8px;
	/* Gap between buttons */
	padding-bottom: 5px;
	/* Prevent scrollbar interference */
	align-items: center;
}

/* --- Button Style (Unified to SP Design) --- */
.variations .variation-button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 12px;
	font-size: 12px;
	line-height: 1.4;
	color: #ff9800;
	/* Orange text */
	background-color: #fff;
	border: 1px solid #ff9800;
	/* Orange border */
	border-radius: 4px;
	/* Square-ish corners */
	cursor: pointer;
	transition: all 0.2s ease;
	margin: 0;
	box-shadow: none;
	text-transform: none;
	white-space: nowrap;
	flex: 0 0 auto;
	/* Prevent shrinking */
}

.variations .variation-button.button:hover {
	background-color: #fff3e0;
	border-color: #fb8c00;
	color: #fb8c00;
}

.variations .variation-button.button.selected {
	background-color: #ff9800;
	color: #fff;
	border-color: #ff9800;
}

.variations .variation-button.button.disabled {
	opacity: 0.6;
	cursor: not-allowed;
	border-color: #e0e0e0;
	color: #bdbdbd;
	background-color: #fafafa;
}

/* ========================================
   Device Specific Behavior
   ======================================== */

/* Mobile: Horizontal Scroll */
@media (max-width: 768px) {
	.variations .variation-buttons {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		/* Firefox */
		-ms-overflow-style: none;
		/* IE/Edge */
	}

	.variations .variation-buttons::-webkit-scrollbar {
		display: none;
		/* Chrome/Safari */
	}
}

/* PC: Wrap (Multi-line) */
@media (min-width: 769px) {
	.variations .variation-buttons {
		flex-wrap: wrap;
		overflow-x: visible;
	}
}

/* Hide Accordion Header on Desktop if present */
@media (min-width: 769px) {
	.variations_form .variation-accordion-header {
		display: none;
	}
}

/* バリエーション部分のボタン周り余白を削除 */
.variations td,
.variations th {
	padding: 0 !important;
}

/* ========================================
   Accordion Styles (New)
   ======================================== */

/* Summary (Header) - Visible on Mobile */
.variation-accordion-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 15px;
	background-color: #ffd495;
	border: 2px solid #ffd495;
	/* Match button border color */
	border-radius: 4px;
	cursor: pointer;
	margin-bottom: 0;
	/* Attach to content or keep small gap? Let's keep 0 and add margin to details */
	list-style: none;
	/* Hide default marker */
	font-size: 14px;
	font-weight: bold;
	color: #333333;
	/* Match button text color */
	transition: all 0.2s ease;
}

.variation-accordion[open] .variation-accordion-header {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	background-color: #ffd495;
	color: #333333;
}

/* Hide default marker in Webkit */
.variation-accordion-header::-webkit-details-marker {
	display: none;
}

/* Removed accordion-title style */

.current-selection-text {
	flex-grow: 1;
	font-weight: bold;
	font-size: 13px;
	text-align: left;
	/* Align left as title is gone */
	margin-right: 10px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: inherit;
	/* Inherit from header */
}

/* Icon (Pseudo-element) */
.accordion-icon::after {
	content: '▲';
	/* Default arrow (expanded) */
	font-size: 12px;
	font-weight: bold;
	color: inherit;
}

/* When collapsed (SP), point down */
.variation-accordion.is-collapsed .accordion-icon::after {
	content: '▼';
}

/* Content Area */
.variation-accordion-content {
	background-color: #fff;
	border: 2px solid #ffd495;
	border-top: none;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	padding: 15px;

	/* Transition setup */
	position: relative;
	overflow: hidden;
	transition: max-height 0.3s ease;
}

/* Hide Labels on Mobile inside Accordion */
@media (max-width: 768px) {
	.variation-accordion.is-collapsed .variation-accordion-content {
		max-height: 100px;
		/* Adjust height to show top 10% / first row */
		padding-bottom: 0;
		/* Remove bottom padding in collapsed state */
		border-bottom: none;
		/* Hide border to blend with mask or keep? Let's remove bottom border for cleaner fade */
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}

	/* Header style when collapsed */
	.variation-accordion.is-collapsed .variation-accordion-header {
		border-bottom-left-radius: 4px;
		border-bottom-right-radius: 4px;
		background-color: #ffd495;
		color: #333333;
	}

	/* Gradient Mask */
	.variation-accordion.is-collapsed::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 40px;
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9) 60%, #fff);
		pointer-events: auto;
		/* Block clicks to underlying buttons */
		z-index: 10;
		border-radius: 0 0 4px 4px;
	}

	/* Expand Arrow Indicator (New) */
	.variation-accordion.is-collapsed::before {
		content: '';
		position: absolute;
		bottom: 12px;
		left: 50%;
		transform: translateX(-50%) rotate(45deg);
		width: 8px;
		height: 8px;
		border-right: 2px solid #333333;
		border-bottom: 2px solid #333333;
		z-index: 20;
		/* Above mask */
		pointer-events: auto;
		animation: accordion-arrow-bounce 2s infinite;
	}

	@keyframes accordion-arrow-bounce {

		0%,
		100% {
			transform: translateX(-50%) rotate(45deg) translate(0, 0);
		}

		50% {
			transform: translateX(-50%) rotate(45deg) translate(2px, 2px);
		}
	}

	/* Ensure the accordion container is relative for absolute positioning of mask */
	.variation-accordion {
		position: relative;
	}

	/* Footer (Close Area) */
	.variation-accordion-footer {
		display: flex;
		justify-content: center;
		align-items: center;
		/* Extend hit area to bottom */
		padding: 15px 0 15px 0;
		/* Increase top/bottom padding */
		margin: 15px -15px -15px -15px;
		/* Negative margin to pull it to edges */
		width: calc(100% + 30px);
		/* Compensate for negative margin */
		cursor: pointer;
		color: #333;
		/* create a solid area or transparent? */
		/* background-color: rgba(0,0,0,0.05); Debugging */
	}

	.accordion-icon-up::after {
		content: '';
		display: block;
		width: 8px;
		height: 8px;
		border-left: 2px solid #333;
		border-top: 2px solid #333;
		transform: rotate(45deg);
		margin-bottom: -2px;
		/* Visual adjustment */
	}



	/* Row Layout: Flex for side-by-side */
	.variation-accordion-content .variations tr {
		display: flex;
		align-items: center;
		/* Center vertically */
		margin-bottom: 12px;
		border-bottom: 1px dashed #eee;
		/* Optional separator for clarity */
		padding-bottom: 12px;
	}

	.variation-accordion-content .variations tr:last-child {
		margin-bottom: 0;
		border-bottom: none;
		padding-bottom: 0;
	}

	/* Label: Fixed on left */
	.variation-accordion-content .variations th.label {
		display: block;
		/* Required for width to work if it was flex */
		width: 80px;
		/* Fixed width for labels */
		min-width: 80px;
		font-size: 12px;
		color: #333;
		margin-bottom: 0;
		/* Reset margin */
		margin-right: 10px;
		font-weight: bold;
		text-align: left;
		line-height: 1.2;
	}

	/* Value area: Scrollable */
	.variation-accordion-content .variations td.value {
		width: calc(100% - 90px);
		/* Remaining space */
		overflow: hidden;
		/* Buttons container has scroll, this just holds it */
		position: relative;
		/* For gradient mask positioning */
	}

	/* Gradient Hint for Scroll (Right) */
	.variation-accordion-content .variations td.value::after {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		width: 24px;
		background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);
		pointer-events: none;
		z-index: 5;
	}

	/* Ensure the existing button scroll works */
	.variation-accordion-content .variation-buttons {
		padding-bottom: 0;
		/* Remove padding that might look weird in row */
		margin-bottom: 0;
	}
}

/* Desktop: Hide Summary and Make Details Look Normal */
@media (min-width: 769px) {
	.variation-accordion-header {
		display: none !important;
	}

	.variation-accordion {
		border: none;
		margin: 0;
		padding: 0;
	}

	.variation-accordion-content {
		display: block;
		padding: 0;
		border: none;
		max-height: none !important;
		/* Ensure always visible on PC */
		overflow: visible;
	}

	.variation-accordion::after {
		display: none;
		/* No mask on PC */
	}

	.variation-accordion-footer {
		display: none;
	}
}