/* ---------- Accordion ---------- */
.pda-accordion {
	width: 100%;
	margin-top: 24px;
	border-top: 1px solid #e1e1e1;
}

.pda-accordion--full-width {
	width: 100%;
}

.pda-accordion-item {
	width: 100% !important;
	border-bottom: 1px solid #e1e1e1;
}

.pda-accordion-trigger {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
	background: none !important;
	border: 0 !important;
	margin: 0 !important;
	padding: 14px 32px 14px 4px !important; /* right padding reserves room for the icon */
	font-size: 13px;
	letter-spacing: .05em;
	text-transform: uppercase;
	cursor: pointer;
	text-align: left !important;
}

.pda-accordion-title {
	display: block;
	width: 100%;
	white-space: normal;
	word-break: break-word;
}

.pda-accordion-icon {
	position: absolute !important;
	top: 50% !important;
	right: 4px !important;
	left: auto !important;
	width: 12px;
	height: 12px;
	margin: 0 !important;
	transform: translateY(-50%) !important;
	/* Two bars drawn as backgrounds (own box only, nothing to escape to) */
	background-image:
		linear-gradient(currentColor, currentColor),
		linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px 1px, 1px 12px; /* horizontal bar, vertical bar = "+" */
	transition: background-size .15s ease;
}
.pda-accordion-item.is-open .pda-accordion-icon {
	background-size: 12px 1px, 0 12px; /* vertical bar collapses = "−" */
}

.pda-accordion-panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .25s ease;
}
.pda-accordion-item.is-open .pda-accordion-panel {
	grid-template-rows: 1fr;
}
.pda-accordion-panel-inner {
	overflow: hidden;
	font-size: 13px;
	line-height: 1.6;
	padding: 0 4px;
}
.pda-accordion-item.is-open .pda-accordion-panel-inner {
	padding-bottom: 16px;
}

/* ---------- Left placement: swap gallery/summary columns ---------- */
/* Works with the default WooCommerce/Storefront single-product markup,
   which lays .images and .summary out as flex/float siblings inside
   div.product. Other themes may need a small selector tweak. */
body.pda-swap-columns div.product.woocommerce div.images {
	order: 2;
	float: right;
}
body.pda-swap-columns div.product.woocommerce div.summary {
	order: 1;
	float: left;
}
body.pda-swap-columns div.product.woocommerce {
	display: flex;
	flex-wrap: wrap;
}

/* ---------- Swatches ---------- */
.pda-swatch-group {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 8px 0 16px;
}

.pda-swatch {
	cursor: pointer;
	border: 1px solid #ccc;
	background-color: #fff;
	background-size: cover;
	background-position: center;
	padding: 0;
}

.pda-swatch--text {
	padding: 8px 14px;
	font-size: 12px;
	min-width: 40px;
}

.pda-swatch-group--square .pda-swatch--color,
.pda-swatch-group--square .pda-swatch--image {
	width: 32px;
	height: 32px;
}

.pda-swatch-group--round .pda-swatch--color,
.pda-swatch-group--round .pda-swatch--image {
	width: 32px;
	height: 32px;
	border-radius: 50%;
}

.pda-swatch.is-selected {
	outline: 2px solid #111;
	outline-offset: 2px;
}

.pda-swatch:disabled,
.pda-swatch.is-disabled {
	opacity: .3;
	cursor: not-allowed;
}