﻿/* Promosyon catalogue: listing and product detail.
   Vendor images vary wildly in aspect ratio, so every image box is a fixed-height flex
   container with object-fit: contain - that keeps card heights aligned without cropping. */

/* ---------- shared image box ---------- */

/* The vendor photographs on white, so a grey backing showed as a border around every cut-out
   product. White instead, with a rule carrying the edge the grey used to imply. box-sizing is
   border-box here, so the border sits inside the stated height and the 20px padding is untouched. */
.promosyon_grid .item_image {
	align-items: center;
	background: #fff;
	border-bottom: 1px solid #e6e9ed;
	box-sizing: border-box;
	display: flex;
	height: 240px;
	justify-content: center;
	overflow: hidden;
	padding: 20px;
	/* Stated rather than inherited from the theme, so the filled placeholder keeps its anchor. */
	position: relative;
}

.promosyon_grid .item_image img {
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
	width: auto;
}

/* The placeholder is decorative rather than a product photo, so it covers its box edge to edge
   instead of sitting letterboxed on the grey backing. Absolutely positioned on purpose: the box
   carries padding, so width/height:100% would resolve against the content box and leave that
   padding showing as an inset border - which is what made it look smaller than the block. Filling
   it also means the theme's hover zoom has no empty edge to reveal.

   The selector repeats .item_image img so it out-specifies the (0,2,1) sizing rule above; a plain
   .promosyon_image[src*=...] at (0,2,0) would lose. Matches whether the src was emitted
   server-side or swapped in by the error fallback, since both set the attribute. */
.promosyon_grid .item_image img.promosyon_image[src*="no-image.svg"],
.promosyon_gallery_main img.promosyon_image[src*="no-image.svg"] {
	bottom: 0;
	height: 100%;
	left: 0;
	max-height: none;
	max-width: none;
	object-fit: cover;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
}

.promosyon_grid .item_content {
	padding: 22px 20px 26px;
}

/* The theme sizes the ANCHOR, not the heading: .blog_grid_2 .item_title > a carries font-size,
   line-height and letter-spacing. A rule on .item_title alone therefore does nothing here, because
   the anchor's own font-size overrides what it would otherwise inherit - which is why this card
   kept rendering at the theme's 22px. Match the theme's selector shape so specificity ties, and win
   on order: this file is linked from the page head, after style.min.css.

   letter-spacing has to come along. The theme's -1px is unremarkable at 22px and crushes Turkish
   words at this size. */
.promosyon_grid .item_title {
	margin-bottom: 8px;
}

.promosyon_grid .item_title > a {
	font-size: 18px;
	letter-spacing: -0.2px;
	line-height: 1.45;
}

/* ---------- listing ---------- */

.promosyon_meta {
	list-style: none;
	margin: 0;
	padding: 0;
}

.promosyon_meta li {
	color: #77808c;
	font-size: 14px;
	line-height: 1.7;
}

.promosyon_meta li span {
	color: #2b323b;
	font-weight: 500;
}

.promosyon_empty {
	background: #f4f5f7;
	border-radius: 6px;
	padding: 48px 24px;
	text-align: center;
}

/* ---------- detail gallery ---------- */

.promosyon_gallery_main {
	align-items: center;
	background: #f4f5f7;
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
	min-height: 360px;
	overflow: hidden;
	padding: 24px;
	/* Positioning context for the absolutely-filled placeholder. The card variant gets this from
	   the theme's .blog_grid_2 .item_image rule; this box has no such ancestor rule. */
	position: relative;
}

.promosyon_gallery_main img {
	max-height: 460px;
	max-width: 100%;
	object-fit: contain;
}

/* ---------- search ---------- */

/* A compact band rather than a full sec_ptb_130 section. On its own that class put 90px above the
   field and 130px below it before the first card, which read as an empty page with one input
   floating in it. The following section keeps the separation, so this one only needs breathing
   room above. */
.promosyon_search_section {
	padding: 45px 0 0;
}

.promosyon_search_section + section {
	padding-top: 55px;
}

/* Scoped to the catalogue so other pages keep the theme's roomier rhythm. The intro line here is
   a single sentence, and 80px under it left the search field looking stranded. */
.promosyon_search_section + section .mb_80 {
	margin-bottom: 45px;
}

.promosyon_search {
	margin: 0 auto;
	max-width: 620px;
}

.promosyon_search form {
	display: flex;
}

.promosyon_search input[type="search"] {
	border: 1px solid #e6e9ed;
	border-radius: 4px 0 0 4px;
	flex: 1 1 auto;
	height: 54px;
	min-width: 0;
	padding: 0 18px;
}

.promosyon_search button {
	border: 0;
	border-radius: 0 4px 4px 0;
	flex: 0 0 auto;
	height: 54px;
	padding: 0 26px;
}

/* The theme capitalises placeholder text, which mangles a hint written as a sentence.
   Kept as separate rules on purpose: a browser that does not recognise one of these selectors
   discards the entire rule it appears in, so grouping them would break all of them. */
.promosyon_search input[type="search"]::placeholder {
	text-transform: none;
}

.promosyon_search input[type="search"]::-webkit-input-placeholder {
	text-transform: none;
}

.promosyon_search input[type="search"]::-moz-placeholder {
	text-transform: none;
}

.promosyon_search input[type="search"]:-ms-input-placeholder {
	text-transform: none;
}

.promosyon_search_note {
	color: #77808c;
	font-size: 14px;
	margin-top: 12px;
	text-align: center;
}

/* ---------- detail thumbnails ---------- */

.promosyon_thumbs {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}

.promosyon_thumbs li {
	align-items: center;
	background: #f4f5f7;
	display: flex;
	height: 88px;
	justify-content: center;
	margin: 0 12px 12px 0;
	overflow: hidden;
	padding: 8px;
	width: 88px;
}

.promosyon_thumbs img {
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
}

/* ---------- detail specs ---------- */

.promosyon_spec {
	border-top: 1px solid #e6e9ed;
	list-style: none;
	margin: 0 0 30px;
	padding: 0;
}

.promosyon_spec li {
	border-bottom: 1px solid #e6e9ed;
	display: flex;
	justify-content: space-between;
	padding: 12px 0;
}

.promosyon_spec .spec_label {
	color: #77808c;
	padding-right: 20px;
}

.promosyon_spec .spec_value {
	color: #2b323b;
	font-weight: 500;
	text-align: right;
}

/* ---------- order form ---------- */

.promosyon_order {
	background: #f4f5f7;
	border-radius: 6px;
	padding: 34px 30px;
}

.promosyon_order .form_item {
	margin-bottom: 18px;
}

/* ---------- related products ---------- */

.promosyon_related .item_image {
	height: 200px;
	padding: 16px;
}

.promosyon_related .item_content {
	padding: 18px 16px 22px;
}

.promosyon_related .item_title > a {
	font-size: 16px;
}
