/* Sub Category product-card image stage.

   The card is a column flex box with align-items:center, and the Oxygen
   stylesheet sizes the image from its own content:
     .darbar-oxy-post-image            { padding:10px; height:150px }
     .darbar-oxy-post-image-fixed-ratio{ height:100%!important; width:100%;
                                         max-width:fit-content!important;
                                         display:flex; centered }
     img.darbar-oxy-post-image        { padding:10px; height:150px }
   The fixed-ratio wrapper's max-width:fit-content makes the stage width follow
   each photo's own aspect ratio, so the same design produced stage widths of
   128-170px for photos painted 88-130px wide. object-fit was never declared, so
   it stayed at the default "fill" and the frame around each product differed.
   A portrait product filled its whole 150px-tall stage and read as oversized
   next to a square one, even though the scale and the aspect ratio of every
   photo were individually correct.

   The fix gives every card one square stage and lets each photo be contained in
   it. Nothing is cropped, stretched or scaled differently: the painted area of
   every photo is exactly what it was before, because the stage is sized to the
   150px the design already used, and object-fit:contain now guarantees the
   natural aspect ratio instead of relying on the stage happening to match. */

.darbar-product-list-shop {
	/* One variable drives the stage, so the frame is identical on every card. */
	--db-card-image-stage: 150px;
}

/* The existing design already steps the image size up on tablet-sized layouts. */
@media screen and (max-width: 992px) {
	.darbar-product-list-shop {
		--db-card-image-stage: 200px;
	}
}

/* ...and steps it back down again on phone-sized layouts. Without this the
   992px value would leak down to 375px, where the cards are only 170px wide and
   a 200px stage would overflow them. */
@media screen and (max-width: 768px) {
	.darbar-product-list-shop {
		--db-card-image-stage: 150px;
	}
}

.darbar-product-list-shop .darbar-oxy-post-image {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	/* Square by construction, capped by the design size and by the card, so the
	   stage can never be taller than intended nor wider than the card it sits in
	   on a narrow screen. */
	width: min(var(--db-card-image-stage), 100%);
	height: auto;
	aspect-ratio: 1 / 1;
	padding: 10px;
}

.darbar-product-list-shop .darbar-oxy-post-image-fixed-ratio {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	/* The existing stylesheet declares this !important, so it has to be
	   overridden with the same priority or the wrapper keeps following the
	   photo's own aspect ratio. */
	max-width: none !important;
	max-height: none !important;
}

/* The hover panel's own image is a different context and is deliberately not
   touched here; it keeps the sizing set further down this file. */
.darbar-product-list-shop .darbar-oxy-post-image img.darbar-oxy-post-image {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	padding: 0;
	object-fit: contain;
	object-position: 50% 50%;
}

/* Sub Category hover detail panel.
   Visual language mirrors the existing click popup:
   .product-page-subwrapper (white, 10px radius) / .product-image-warpper (40%)
   / .product-detail-wrapper (60%) / .product-page-item-wrapper (row bands).
   The panel is a direct child of the card so the card width never constrains it.

   Geometry contract with the purchase area:
   .db-card-purchase owns the lower band of the card (price, quantity, total,
   Add to cart). The panel is information only and is confined to the band above
   it, so it can never cover a control. The cap is enforced by max-height, which
   the script sets from the measured distance between the card top and the top of
   the purchase area; overflow:hidden is only a last-resort guard for unusually
   long product names, never the mechanism that keeps the two regions apart. */

.darbar-product-list-shop .darbar-oxy-post {
	position: relative;
}

.db-card-info {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	width: 520px;
	max-width: calc(100vw - 24px);
	/* Set inline by the script from the measured free band above the purchase
	   area. The value here is a static fallback for guests. */
	max-height: 210px;
	overflow: hidden;
	padding: 12px 16px;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16);
	color: var(--mainblack, #2b2b2b);
	text-align: left;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.18s ease, visibility 0s linear 0.18s;
}

.darbar-oxy-post.db-card-info-open .db-card-info {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.18s ease, visibility 0s linear 0s;
}

/* The legacy magnifier sits under the panel while the detail view is open. */
.darbar-product-list-shop .darbar-oxy-post.db-card-info-open .hover-magnify-wrapper {
	opacity: 0;
}

.db-card-info-media {
	display: flex;
	flex: 0 0 32%;
	align-items: center;
	justify-content: center;
	padding-right: 14px;
	min-width: 0;
}

.db-card-info-thumb {
	display: block;
	width: 100%;
	max-width: 118px;
	height: auto;
	max-height: 118px;
	border-radius: 4px;
	object-fit: contain;
}

.db-card-info-body {
	flex: 1 1 auto;
	min-width: 0;
}

.db-card-info-cat {
	color: #6b6b6b;
	font-size: 11px;
	line-height: 1.35;
}

.db-card-info-rule {
	width: 48px;
	height: 1px;
	margin: 2px 0;
	background: var(--dotred, #ed1c24);
}

/* Bounded to one line so a long product name can never grow the panel past the
   band reserved above the purchase controls. */
.db-card-info-name {
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.25;
}

.db-card-info-brand {
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 3px 0 4px;
	color: #4a4a4a;
	font-size: 0.8rem;
	font-weight: 500;
	line-height: 1.3;
}

.db-card-info-rows {
	width: 100%;
}

.db-card-info-row {
	display: flex;
	align-items: flex-start;
	width: 100%;
	margin-top: 2px;
	padding: 0 12px;
	background: #f4eded;
	border-bottom: 1px solid var(--dotred, #ed1d24);
}

.db-card-info-key {
	flex: 0 0 50%;
	padding: 2px 8px 2px 0;
	color: #5c5c5c;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.3;
	white-space: nowrap;
}

/* break-word, never anywhere: values wrap on a word boundary when genuinely
   long, but are never broken one character per line. */
.db-card-info-value {
	flex: 1 1 50%;
	min-width: 0;
	padding: 2px 0;
	color: var(--mainblack, #2b2b2b);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.3;
	overflow-wrap: break-word;
	word-break: normal;
}

.db-card-purchase {
	width: 100%;
	margin: 10px 0 2px;
	text-align: center;
}

.db-card-price,
.db-card-total {
	margin: 0 0 4px;
	font-size: 0.8rem;
	line-height: 1.4;
}

.db-card-price-value,
.db-card-total-value {
	font-weight: 700;
}

.db-card-qty-container {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 6px 0;
}

.db-card-qty-btn {
	width: 38px;
	height: 38px;
	padding: 10px 13px;
	border: 1px solid #d4d4d4;
	background: #fff;
	color: #7a7a7a;
	font-size: 10px;
	line-height: 1;
	cursor: pointer;
	transition: 0.3s;
}

.db-card-qty-plus {
	margin-left: -1px;
}

.db-card-qty-minus {
	margin-right: -1px;
}

.db-card-qty-btn:hover,
.db-card-qty-btn:focus {
	background: var(--dotred, #ed1c24);
	border-color: var(--dotred, #ed1c24);
	color: #fff;
}

.db-card-qty-input {
	width: 100%;
	max-width: 80px;
	height: 38px;
	padding: 6px 10px;
	border: 1px solid #d4d4d4;
	background: #fff;
	color: inherit;
	font-size: 0.9rem;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.db-card-qty-input::-webkit-outer-spin-button,
.db-card-qty-input::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.db-card-atc {
	display: block;
	width: 100%;
	margin: 5px 0 0;
	padding: 10px 14px;
	border: none;
	border-radius: 50px;
	background: var(--dotred, #ed1c24);
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.09) 100%);
	box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15);
	color: #fff;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
	cursor: pointer;
}

.db-card-atc:hover,
.db-card-atc:focus {
	filter: brightness(0.94);
	color: #fff;
}

/* Guest call to action. It carries .db-card-atc, so it inherits the identical red
   background, radius, width, height, typography and hover treatment; only the
   anchor defaults have to be neutralised. A real <a href> is used so left click,
   Ctrl/Cmd click, middle click and keyboard Enter all behave natively, and it is
   always visible rather than revealed on hover. */
a.db-card-atc,
a.db-card-login {
	display: block;
	color: #fff;
	text-decoration: none;
}

a.db-card-atc:hover,
a.db-card-atc:focus,
a.db-card-login:hover,
a.db-card-login:focus {
	color: #fff;
	text-decoration: none;
}

a.db-card-login:focus-visible {
	filter: brightness(0.94);
	outline: 2px solid var(--dotred, #ed1c24);
	outline-offset: 2px;
}

.db-card-atc:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Narrow viewports keep the horizontal layout on purpose. Stacking the image
   above the rows would double the panel height and push it into the purchase
   area, so only the image and the gutters shrink. */
@media screen and (max-width: 700px) {
	.db-card-info {
		padding: 10px 12px;
	}

	.db-card-info-media {
		flex: 0 0 30%;
		padding-right: 10px;
	}

	.db-card-info-thumb {
		max-width: 88px;
		max-height: 88px;
	}

	.db-card-info-row {
		padding: 1px 9px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.db-card-info,
	.db-card-qty-btn {
		transition: none;
	}
}