/* Single product page for product_type=auction (Ultimate WC Auction Pro).
   Scoped to .page__container--auction so we don't bleed into simple
   product or skup_product styles. */

.page__container--auction { padding-top: 1rem; }

/* --- Breadcrumb override (smaller, inline with hero) --- */

.breadcrumb--auction { padding: 1rem 0 0.5rem; }
.breadcrumb--auction .breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.82rem;
	color: #555;
}
.breadcrumb--auction .breadcrumb__item + .breadcrumb__item::before {
	content: "/";
	margin-right: 0.4rem;
	color: #aaa;
}
.breadcrumb--auction .breadcrumb__link { color: #555; text-decoration: none; }
.breadcrumb--auction .breadcrumb__link:hover { color: #000; }
.breadcrumb--auction .breadcrumb__current { color: #000; font-weight: 500; }

/* --- Hero: 2-col gallery + bid panel --- */

.auction_detail { padding: 1.5rem 0 3.5rem; }

.auction_detail__grid {
	display: grid;
	/* Gallery hugs the capped 22rem image (+ ~1rem padding) so the
	   info panel takes the rest of the row. Previous 1.05fr/1fr split
	   gave the gallery a 525px container around a 319px image — way
	   too much grey real estate. */
	grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
	gap: 2.5rem;
	align-items: start;
}

.auction_detail__gallery {
	background: #f7f7f7;
	border: 1px solid #ececec;
	border-radius: 0.6rem;
	padding: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.auction_detail__gallery--multi {
	flex-direction: column;
	gap: 0.75rem;
}
.auction_detail__thumbs {
	display: flex;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
	justify-content: center;
}
.auction_detail__thumb {
	width: 4.5rem;
	height: 4.5rem;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 0.4rem;
	background: #fff;
	cursor: pointer;
	overflow: hidden;
	transition: border-color 0.15s ease;
}
.auction_detail__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.auction_detail__thumb:hover { border-color: #ddd; }
.auction_detail__thumb.is-active { border-color: #fed435; }
/* WC ships `.woocommerce img { max-width: 100% }` at (0,1,1) — same
   specificity as `.auction_detail__image`. Source-order resolution
   then favours WC's bundle (loaded later via the LiteSpeed combine),
   so the cap below would be silently dropped. Bump specificity by
   anchoring under the page shell to win the cascade. */
.page__container--auction .auction_detail__image {
	/* Original assets are 900–1200px square — at the page's half-column
	   width they balloon to ~480px which dominates the hero. Cap to a
	   tighter max and center inside the framed gallery container. */
	max-width: 22rem;
	height: auto;
	display: block;
	margin: 0 auto;
}
.auction_detail__placeholder {
	width: 100%;
	min-height: 18rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #f0f0f0, #e8e8e8);
	border-radius: 0.4rem;
	color: #999;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}
.auction_detail__placeholder--xau { background: linear-gradient(135deg, #fff4d1, #fed435); color: #5a4500; }
.auction_detail__placeholder--xag { background: linear-gradient(135deg, #f0f0f0, #c8c8c8); color: #555; }
.auction_detail__placeholder--xpt { background: linear-gradient(135deg, #e8e8e8, #a8a8a8); color: #333; }
.auction_detail__placeholder--xpd { background: linear-gradient(135deg, #e8d8c8, #b89878); color: #4a3a2a; }

/* --- Right panel: title / status / specs / bid --- */

.auction_detail__panel {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.auction_detail__title {
	font-size: clamp(1.4rem, 2.4vw, 1.95rem);
	line-height: 1.2;
	margin: 0;
}

.auction_detail__status {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	width: fit-content;
	padding: 0.4rem 0.85rem;
	border-radius: 999px;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}
.auction_detail__status--live    { background: #e8f5e9; color: #2e7d32; }
.auction_detail__status--live::before    { content: "●"; color: #2e7d32; }
.auction_detail__status--ended   { background: #f3f3f3; color: #666; }
.auction_detail__status--pending { background: #fff8e1; color: #b27500; }

.auction_detail__specs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem 1.25rem;
	margin: 0;
	padding: 1.25rem 0;
	border-top: 1px solid #ececec;
	border-bottom: 1px solid #ececec;
}
.auction_detail__spec {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}
.auction_detail__spec dt {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #777;
}
.auction_detail__spec dd {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	color: #1a1a1a;
}
.auction_detail__spec--bid {
	grid-column: 1 / -1;
	padding-bottom: 0.5rem;
	border-bottom: 1px dashed #ececec;
	margin-bottom: 0.25rem;
}
.auction_detail__spec--bid dd {
	font-size: 1.6rem;
	color: #b27500;
	line-height: 1.1;
}
.auction_detail__spec--bid dd .woocommerce-Price-amount { font-weight: 700; }

/* --- Bid panel (UA Pro markup) --- */

.auction_detail__bid {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}
.auction_detail__bid #auction-product-type { display: block; }
.auction_detail__bid p { margin: 0; }
/* Lots without a reserve price get .lot--no-reserve on <body> from
   skup_auction_no_reserve_body_class(). Hide UA Pro's misleading
   "reserve met" notice — it's nonsense when there is no reserve. */
.lot--no-reserve .checkreserve { display: none; }
.auction_detail__bid .uwa_proxy_text {
	background: #fff8e1;
	border-left: 3px solid #fed435;
	padding: 0.6rem 0.85rem;
	font-size: 0.85rem;
	color: #5a4500;
}
.auction_detail__bid .winner-name span {
	font-size: 1rem !important;
	font-weight: 600;
}
.auction_detail__bid .uwa_auction_condition {
	font-size: 0.85rem;
	color: #555;
	/* Hidden by default — inline JS in single-product.php un-hides only
	   when `.uwa_auction_current_condition` has a non-empty value. UA Pro
	   always renders this paragraph, so without this rule lots without a
	   condition show a dangling "Stan przedmiotu:" label. */
	display: none;
}

/* Countdown — UA Pro emits its own structure; brand restyle. */
.auction_detail__bid .uwa-countdown,
.auction_detail__bid .countdown {
	display: flex;
	gap: 0.4rem;
	flex-wrap: wrap;
	font-variant-numeric: tabular-nums;
}
.auction_detail__bid .countdown-row { display: flex; gap: 0.4rem; }
.auction_detail__bid .countdown-section {
	background: #1a1a1a;
	color: #fff;
	padding: 0.5rem 0.7rem;
	border-radius: 0.35rem;
	min-width: 3rem;
	text-align: center;
	font-size: 0.75rem;
	line-height: 1.2;
}
.auction_detail__bid .countdown-amount {
	display: block;
	font-size: 1.2rem;
	font-weight: 700;
}

/* Bid form inputs/buttons */
.auction_detail__bid input[type="number"],
.auction_detail__bid input[type="text"] {
	width: 100%;
	padding: 0.65rem 0.85rem;
	border: 1px solid #ddd;
	border-radius: 0.4rem;
	font-size: 1rem;
	background: #fff;
}
/* Bid button — solid gold, primary action. */
.auction_detail__bid button.bid_button,
.auction_detail__bid #placebidbutton,
.auction_detail__bid #placebidbutton_direct,
.auction_detail__bid input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.85rem 1.4rem;
	border: 1px solid #fed435;
	border-radius: 0.4rem;
	background: #fed435 !important;
	color: #000 !important;
	font-weight: 700;
	font-size: 0.95rem;
	cursor: pointer;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
	text-shadow: none;
}
.auction_detail__bid button.bid_button:hover,
.auction_detail__bid #placebidbutton:hover,
.auction_detail__bid #placebidbutton_direct:hover,
.auction_detail__bid input[type="submit"]:hover {
	background: #212121 !important;
	color: #fff !important;
	border-color: #212121;
}

/* Buy-It-Now — outlined, secondary action. Same dimensions as the bid
   button but inverted treatment so users immediately read it as the
   "alternative to bidding" path, not as another submit. */
.auction_detail__bid button.single_add_to_cart_button,
.auction_detail__bid .button,
.auction_detail__bid .button.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Plugin emits the price as a nested <span> next to the label
	   ("Kup teraz " + <span>5 500,00 zł</span>). The trailing space
	   in the label text node collapses inside the flex layout, so
	   without an explicit gap the two run together visually. */
	gap: 0.35rem;
	padding: 0.85rem 1.4rem;
	border: 1px solid #fed435 !important;
	border-radius: 0.4rem;
	background: #fff !important;
	color: #1a1a1a !important;
	font-weight: 700;
	font-size: 0.95rem;
	cursor: pointer;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
	text-shadow: none;
}
.auction_detail__bid button.single_add_to_cart_button:hover,
.auction_detail__bid .button:hover,
.auction_detail__bid .button.alt:hover {
	background: #fed435 !important;
	color: #000 !important;
}
.auction_detail__bid .uwa_buttons { gap: 0.6rem; }
.auction_detail__bid .uwa_buttons,
.auction_detail__bid .form-group-block {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
}
.auction_detail__bid .form-group-block-two,
.auction_detail__bid .form-group-block-one { flex: 1 1 12rem; min-width: 0; }

/* Login-to-bid CTA — UA Pro emits .wdm-login-to-place-bid */
.auction_detail__bid .wdm-login-to-place-bid,
.auction_detail__bid .wdm-login-to-buy-now {
	display: inline-block;
	padding: 0.75rem 1.25rem;
	background: #f7f7f7;
	border: 1px solid #ddd;
	border-radius: 0.4rem;
	color: #1a1a1a;
	text-decoration: none;
	font-weight: 600;
	text-align: center;
}
.auction_detail__bid .wdm-login-to-place-bid:hover,
.auction_detail__bid .wdm-login-to-buy-now:hover {
	background: #212121;
	color: #fff;
	border-color: #212121;
}

/* --- WC tabs (Opis / Bids / Private message) --- */

.auction_detail__tabs_wrap { padding: 2rem 0; }
.auction_detail__tabs_wrap .woocommerce-tabs {
	background: #fff;
	border-top: 1px solid #ececec;
	padding-top: 1.5rem;
}
.auction_detail__tabs_wrap .wc-tabs {
	display: flex;
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
	gap: 0.25rem;
	border-bottom: 2px solid #ececec;
}
.auction_detail__tabs_wrap .wc-tabs li {
	margin: 0;
}
.auction_detail__tabs_wrap .wc-tabs li a {
	display: block;
	padding: 0.75rem 1.25rem;
	color: #555;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.95rem;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	transition: color 0.2s, border-color 0.2s;
}
.auction_detail__tabs_wrap .wc-tabs li.active a,
.auction_detail__tabs_wrap .wc-tabs li a:hover {
	color: #000;
	border-bottom-color: #fed435;
}
.auction_detail__tabs_wrap .wc-tab {
	font-size: 0.95rem;
	line-height: 1.6;
	color: #333;
}
.auction_detail__tabs_wrap .wc-tab h2 {
	font-size: 1.2rem;
	margin: 0 0 0.85rem;
}
.auction_detail__tabs_wrap .wc-tab p { margin: 0 0 0.85rem; }
.auction_detail__tabs_wrap .wc-tab table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.88rem;
}
.auction_detail__tabs_wrap .wc-tab table th,
.auction_detail__tabs_wrap .wc-tab table td {
	padding: 0.55rem 0.75rem;
	border-bottom: 1px solid #ececec;
	text-align: left;
}
.auction_detail__tabs_wrap .wc-tab table th {
	background: #f7f7f7;
	font-weight: 600;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #555;
}

/* --- Related lots: reuse listing grid --- */

.auction_related { padding: 2.5rem 0; background: #fafafa; }
.auction_related__title {
	font-size: 1.4rem;
	margin: 0 0 1.25rem;
}
.auction_related__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 1.25rem;
}
/* `.auction__card` is sized for the homepage flex row via home.css
   (width: calc(...)) — it bleeds in here under LiteSpeed CSS combine,
   so the cards collapse to ~66px inside grid cells. Scope our reset
   to the related grid to win specificity, mirroring aukcji.css's
   approach for the listing. */
.auction_related__grid .auction__card {
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 0.5rem;
	padding: 1.25rem 1.25rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	width: auto;
	min-width: 0;
	box-sizing: border-box;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.auction_related__grid .auction__card > * { min-width: 0; max-width: 100%; }
.auction_related__grid .auction__card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
	border-color: #fed435;
}
.auction_related__grid .auction__card__title {
	font-size: 0.95rem;
	font-weight: 600;
	color: #1a1a1a;
	text-decoration: none;
	line-height: 1.3;
	display: block;
}
.auction_related__grid .auction__card__image {
	display: block;
	text-align: center;
	/* Force a square frame so cards line up evenly regardless of source
	   aspect (Pierścionek's thumb is 578×920, Filharmonicy is square).
	   `height: auto` overrides aukcji.css `.auction__card__image
	   { height: 9rem }`, otherwise the explicit height pins the box and
	   aspect-ratio has no effect. */
	aspect-ratio: 1 / 1;
	height: auto;
	overflow: hidden;
}
.auction_related__grid .auction__card__image img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
	object-position: center;
}
.auction_related__grid .auction__card__price {
	font-size: 1.1rem;
	font-weight: 700;
	color: #b27500;
}
.auction_related__grid .auction__card__status {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.78rem;
	color: #2e7d32;
	font-weight: 600;
}
.auction_related__grid .auction__card__status--ended { color: #888; }
.auction_related__grid .auction__card__weight { font-size: 0.82rem; color: #666; }
.auction_related__grid .auction__card .btn_auction__card {
	margin-top: auto;
	align-self: stretch;
	text-align: center;
}

/* --- Mobile --- */

@media (max-width: 900px) {
	.auction_detail__grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
	.auction_detail__gallery { min-height: 16rem; padding: 1rem; }
	.auction_detail__specs { grid-template-columns: 1fr; }
	.auction_detail__spec--bid dd { font-size: 1.4rem; }
}

@media (max-width: 600px) {
	.auction_detail__tabs_wrap .wc-tabs {
		flex-wrap: wrap;
	}
	.auction_detail__tabs_wrap .wc-tabs li a {
		padding: 0.55rem 0.85rem;
		font-size: 0.85rem;
	}
	.auction_detail__bid input[type="submit"],
	.auction_detail__bid button.single_add_to_cart_button,
	.auction_detail__bid .button {
		width: 100%;
	}
}